{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "env-editor", "type": "registry:ui", "title": "Env Editor", "description": "Environment variable rows with masked values, paste-a-.env import and duplicate warnings.", "categories": [ "developer" ], "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/motion.json", "https://www.stealth.pm/r/use-controllable-state.json", "https://www.stealth.pm/r/copy-button.json" ], "files": [ { "path": "components/ui/env-editor.tsx", "content": "\"use client\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { useCopy } from \"@/components/ui/copy-button\";\nimport { cn } from \"@/lib/cn\";\nimport { Check, Copy, Eye, EyeOff, Plus, Trash, Warning } from \"@/lib/icons\";\nimport { ease, spring } from \"@/lib/motion\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\n\nexport type EnvVar = { id: string; key: string; value: string };\n\nconst KEY = /^[A-Za-z_][A-Za-z0-9_]*$/;\nlet seq = 0;\n/** A new row with a stable id. Call it in event handlers, not during render. */\nexport const createEnvVar = (key = \"\", value = \"\"): EnvVar => ({ id: `env-${Date.now().toString(36)}-${(seq++).toString(36)}`, key, value });\n\n/** Reads KEY=value lines: skips blanks and comments, drops `export`, unquotes, strips trailing # comments. */\nexport function parseEnv(text: string): { key: string; value: string }[] {\n const out: { key: string; value: string }[] = [];\n for (const raw of text.split(/\\r?\\n/)) {\n const line = raw.trim().replace(/^export\\s+/, \"\");\n if (!line || line.startsWith(\"#\")) continue;\n const at = line.indexOf(\"=\");\n if (at <= 0) continue;\n const key = line.slice(0, at).trim();\n let value = line.slice(at + 1).trim();\n const q = value[0];\n if ((q === '\"' || q === \"'\" || q === \"`\") && value.lastIndexOf(q) > 0) {\n value = value.slice(1, value.lastIndexOf(q));\n if (q === '\"') value = value.replace(/\\\\n/g, \"\\n\").replace(/\\\\\"/g, '\"');\n } else {\n value = value.replace(/\\s+#.*$/, \"\");\n }\n out.push({ key, value });\n }\n return out;\n}\n\n/** Writes rows back out as a .env file, quoting values that need it. */\nexport function toEnv(rows: EnvVar[]) {\n return rows\n .filter((r) => r.key.trim())\n .map((r) => `${r.key.trim()}=${/[\\s#\"'=]/.test(r.value) || r.value === \"\" ? JSON.stringify(r.value) : r.value}`)\n .join(\"\\n\");\n}\n\nexport type EnvEditorProps = Omit, \"children\" | \"defaultValue\" | \"onChange\"> & {\n /** The rows (controlled). */\n value?: EnvVar[];\n defaultValue?: EnvVar[];\n onValueChange?: (rows: EnvVar[]) => void;\n /** Heading above the rows. */\n title?: string;\n /** Shows values without editing, and hides add and remove. */\n readOnly?: boolean;\n disabled?: boolean;\n};\n\nexport function EnvEditor({\n value: valueProp,\n defaultValue = [],\n onValueChange,\n title = \"Environment variables\",\n readOnly = false,\n disabled = false,\n className,\n ...rest\n}: EnvEditorProps) {\n const reduce = useReducedMotion();\n const uid = useId();\n const [rows, setRows] = useControllableState({ value: valueProp, defaultValue, onChange: onValueChange });\n const [revealed, setRevealed] = useState>(() => new Set());\n const [touched, setTouched] = useState>(() => new Set());\n // Rows that just arrived from a paste: they cascade in and hold a wash for a moment.\n const [fresh, setFresh] = useState<{ ids: Set; order: string[] }>({ ids: new Set(), order: [] });\n const [note, setNote] = useState(\"\");\n const focusNext = useRef(null);\n const root = useRef(null);\n const [tip] = useState(() => Tooltip.createHandle());\n const { state: copyState, copy } = useCopy({ timeout: 1600 });\n\n // Focus a row's key after it mounts (add, or Enter at the end).\n useEffect(() => {\n const id = focusNext.current;\n if (!id) return;\n focusNext.current = null;\n root.current?.querySelector(`[data-key-input=\"${id}\"]`)?.focus();\n }, [rows]);\n\n useEffect(() => {\n if (!fresh.ids.size && !note) return;\n const t = window.setTimeout(() => {\n setFresh({ ids: new Set(), order: [] });\n setNote(\"\");\n }, 2600);\n return () => window.clearTimeout(t);\n }, [fresh, note]);\n\n const counts = useMemo(() => {\n const m = new Map();\n for (const r of rows) {\n const k = r.key.trim();\n if (k) m.set(k, (m.get(k) ?? 0) + 1);\n }\n return m;\n }, [rows]);\n // For duplicates, the row whose value is actually used: the last one.\n const winner = useMemo(() => {\n const m = new Map();\n for (const r of rows) if (r.key.trim()) m.set(r.key.trim(), r.id);\n return m;\n }, [rows]);\n\n const locked = readOnly || disabled;\n const allRevealed = rows.length > 0 && rows.every((r) => revealed.has(r.id));\n\n const update = (id: string, patch: Partial) => setRows(rows.map((r) => (r.id === id ? { ...r, ...patch } : r)));\n\n const add = (after?: string) => {\n const row = createEnvVar();\n focusNext.current = row.id;\n const i = after ? rows.findIndex((r) => r.id === after) : -1;\n setRows(i === -1 ? [...rows, row] : [...rows.slice(0, i + 1), row, ...rows.slice(i + 1)]);\n };\n\n const remove = (id: string, focusPrev = false) => {\n const i = rows.findIndex((r) => r.id === id);\n const next = rows.filter((r) => r.id !== id);\n setRows(next);\n const target = next[Math.max(0, i - (focusPrev ? 1 : 0))] ?? null;\n // Hand focus to a neighbour so the keyboard never falls back to the page.\n requestAnimationFrame(() => {\n const sel = target ? `[data-${focusPrev ? \"value\" : \"key\"}-input=\"${target.id}\"]` : \"[data-add]\";\n root.current?.querySelector(sel)?.focus();\n });\n };\n\n // A pasted .env lands as rows: existing keys are updated in place, new keys appended.\n const paste = (text: string, into: EnvVar) => {\n const parsed = parseEnv(text);\n if (!parsed.length) return false;\n let next = [...rows];\n const touchedIds: string[] = [];\n let added = 0;\n let updated = 0;\n for (const [n, p] of parsed.entries()) {\n const existing = next.find((r) => r.key.trim() === p.key && r.id !== into.id);\n if (n === 0 && !into.key.trim() && !into.value) {\n next = next.map((r) => (r.id === into.id ? { ...r, key: p.key, value: p.value } : r));\n touchedIds.push(into.id);\n added++;\n } else if (existing) {\n next = next.map((r) => (r.id === existing.id ? { ...r, value: p.value } : r));\n touchedIds.push(existing.id);\n updated++;\n } else {\n const row = createEnvVar(p.key, p.value);\n next.push(row);\n touchedIds.push(row.id);\n added++;\n }\n }\n setRows(next);\n setFresh({ ids: new Set(touchedIds), order: touchedIds });\n const say = (n: number, verb: string) => `${verb} ${n} ${n === 1 ? \"variable\" : \"variables\"}`;\n setNote([added && say(added, \"Added\"), updated && say(updated, \"updated\")].filter(Boolean).join(\", \").replace(/^u/, \"U\"));\n return true;\n };\n\n const toggleReveal = (id: string) => {\n const next = new Set(revealed);\n if (next.has(id)) next.delete(id);\n else next.add(id);\n setRevealed(next);\n };\n\n const field = cn(\n \"h-8 w-full min-w-0 rounded-lg border bg-frame px-2.5 font-mono text-base text-fg outline-none sm:text-[12.5px]\",\n \"transition-[border-color,box-shadow,background-color] duration-150 placeholder:text-fg-4\",\n \"hover:border-fg-4 focus:border-fg-4 focus:ring-3 focus:ring-fg/10\",\n \"disabled:pointer-events-none disabled:opacity-50 read-only:bg-transparent read-only:hover:border-line-2\",\n );\n\n return (\n \n \n
\n

{title}

\n {rows.filter((r) => r.key.trim()).length}\n
\n setRevealed(allRevealed ? new Set() : new Set(rows.map((r) => r.id)))}\n >\n \n {allRevealed ? : }\n \n \n r.key.trim())}\n onPress={() => copy(() => toEnv(rows))}\n >\n \n {copyState === \"copied\" ? : }\n \n \n
\n
\n\n {rows.length === 0 ? (\n
\n
\n

No variables yet

\n

Add one, or paste a .env file into the key field.

\n
\n {!locked && (\n \n )}\n
\n ) : (\n
    \n \n {rows.map((r, i) => {\n const k = r.key.trim();\n const dupe = !!k && (counts.get(k) ?? 0) > 1;\n const shadowed = dupe && winner.get(k) !== r.id;\n const invalid = !!k && !KEY.test(k) && touched.has(r.id);\n const shown = revealed.has(r.id);\n const msgId = `${uid}-${r.id}-msg`;\n const order = fresh.order.indexOf(r.id);\n return (\n 0 ? Math.min(order, 8) * 0.03 : 0 },\n opacity: { duration: 0.2, ease: ease.out, delay: order > 0 ? Math.min(order, 8) * 0.03 : 0 },\n }}\n className=\"overflow-hidden\"\n >\n \n
    \n update(r.id, { key: e.target.value.replace(/\\s/g, \"_\") })}\n onBlur={() => r.key && !touched.has(r.id) && setTouched(new Set(touched).add(r.id))}\n onPaste={(e) => {\n const text = e.clipboardData.getData(\"text\");\n if (/[\\n=]/.test(text) && paste(text, r)) e.preventDefault();\n }}\n onKeyDown={(e) => {\n if (e.key === \"Backspace\" && !r.key && !r.value && rows.length > 1) {\n e.preventDefault();\n remove(r.id, true);\n }\n }}\n className={cn(\n field,\n \"col-start-1 row-start-1 tracking-[0.01em]\",\n invalid ? \"border-danger/60 focus:border-danger focus:ring-danger/15\" : dupe ? \"border-warning/60 focus:border-warning focus:ring-warning/15\" : \"border-line-2\",\n shadowed && \"text-fg-3 line-through decoration-fg-4\",\n )}\n />\n
    \n update(r.id, { value: e.target.value })}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !locked) {\n e.preventDefault();\n add(r.id);\n }\n }}\n className={cn(field, \"peer border-line-2 pr-9\", !shown && r.value && \"text-transparent focus:text-fg\")}\n />\n {/* A fixed-length mask at rest, so a hidden value doesn't give away its length. */}\n {!shown && r.value && (\n \n ••••••••••••\n \n )}\n toggleReveal(r.id)}\n className={cn(\n \"absolute right-1 top-1 grid size-6 place-items-center rounded-md text-fg-3 outline-none\",\n \"transition-[background-color,color,scale] duration-150 ease-out hover:bg-fg/[0.06] hover:text-fg active:scale-90 active:duration-75\",\n \"focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-fg-3 focus-visible:outline-solid\",\n \"disabled:pointer-events-none disabled:opacity-40\",\n \"before:absolute before:-inset-2 before:content-[''] pointer-fine:before:hidden\",\n )}\n >\n \n {shown ? : }\n \n \n
    \n {!locked && (\n remove(r.id)}\n className={cn(\n \"relative col-start-2 row-start-1 grid size-8 place-items-center rounded-lg text-fg-3 outline-none sm:col-start-3\",\n \"transition-[background-color,color,scale] duration-150 ease-out hover:bg-danger-soft hover:text-danger active:scale-90 active:duration-75\",\n \"focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-fg-3 focus-visible:outline-solid\",\n \"before:absolute before:-inset-1.5 before:content-[''] pointer-fine:before:hidden\",\n )}\n />\n }\n >\n \n \n )}\n
    \n {(invalid || dupe) && (\n

    \n \n {invalid\n ? \"Use letters, digits and underscores, not starting with a digit\"\n : shadowed\n ? `Duplicate key. A later ${k} overrides this one.`\n : `Duplicate key. This value overrides the earlier ${k}.`}\n

    \n )}\n \n \n );\n })}\n     \n
\n )}\n\n {rows.length > 0 && (\n
\n \n {copyState === \"copied\" ? \"Copied as .env\" : copyState === \"failed\" ? \"Couldn’t copy\" : \"\"}\n \n {!locked && (\n \n )}\n

\n \n \n {note ? {note} : locked ? \"\" : Paste a .env into any key to add many}\n \n \n

\n
\n )}\n \n\n \n {({ payload }) => (\n \n \n \n {payload}\n \n \n \n )}\n \n \n );\n}\n\nconst primaryButton = cn(\n \"inline-flex h-8 items-center gap-1.5 rounded-lg bg-fg px-3 text-[12.5px] font-medium text-frame outline-none\",\n \"transition-[background-color,scale] duration-150 ease-out hover:bg-fg/90 active:scale-[0.97] active:duration-75\",\n \"focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-fg-3 focus-visible:outline-solid\",\n);\nconst secondaryButton = cn(\n \"inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-line-2 bg-raised px-2.5 text-[12.5px] font-medium text-fg shadow-[var(--shadow)] outline-none\",\n \"transition-[background-color,border-color,scale] duration-150 ease-out hover:border-fg-4 hover:bg-hover active:scale-[0.97] active:duration-75\",\n \"focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-fg-3 focus-visible:outline-solid\",\n);\n\nfunction SwapIcon({ k, reduce, children }: { k: string; reduce: boolean; children: React.ReactNode }) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nfunction ToolButton({\n label,\n hint,\n tip,\n onPress,\n disabled,\n pressed,\n children,\n}: {\n label: string;\n hint: string;\n tip: ReturnType>;\n onPress: () => void;\n disabled?: boolean;\n pressed?: boolean;\n children: React.ReactNode;\n}) {\n return (\n \n }\n >\n {children}\n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/env-editor" }