50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T4433,// Ballmac UI: Env Editor. https://ui.ballmac.com/components/env-editor "use client" import * as React from "react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { AlertCircle, Eye, EyeOff, Plus, Trash2, ClipboardPaste } from "lucide-react" import { CopyButton } from "@/components/ballmac/copy-button" import { cn } from "@/lib/utils" import { useMessages } from "@/lib/ballmac/i18n" type EnvVariable = { /** Stable id for the row. */ id: string /** Variable name, such as DATABASE_URL. */ key: string /** Its value. */ value: string } const KEY_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/ /** Reads `KEY=value` lines, skipping blanks and `#` comments, handling `export`, quotes and inline comments after quoted values. */ function parseEnv(text: string): { key: string; value: string }[] { const out: { key: string; value: string }[] = [] for (const raw of text.split(/\r?\n/)) { const line = raw.trim() if (!line || line.startsWith("#")) continue const m = line.match(/^(?:export\s+)?([A-Za-z_][A-Za-z0-9_.-]*)\s*=\s*(.*)$/) if (!m) continue let value = m[2]!.trim() const quote = value[0] if ((quote === '"' || quote === "'") && value.lastIndexOf(quote) > 0) { value = value.slice(1, value.lastIndexOf(quote)) if (quote === '"') value = value.replace(/\\n/g, "\n").replace(/\\"/g, '"') } else { value = value.replace(/\s+#.*$/, "") } out.push({ key: m[1]!, value }) } return out } /** Writes variables as a .env file, quoting values that need it. */ function formatEnv(variables: { key: string; value: string }[]) { return variables .filter((v) => v.key.trim()) .map((v) => { const needsQuotes = /[\s#"'\\]/.test(v.value) || v.value === "" const value = needsQuotes ? `"${v.value.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\n")}"` : v.value return `${v.key}=${value}` }) .join("\n") } function problemFor(variable: EnvVariable, all: EnvVariable[]) { if (!variable.key && !variable.value) return null if (!variable.key) return "Add a name for this value." if (!KEY_PATTERN.test(variable.key)) return "Use letters, numbers and underscores, and don't start with a number." if (all.filter((v) => v.key === variable.key).length > 1) return "This name is used more than once." return null } type EnvEditorProps = Omit, "defaultValue" | "onChange"> & { /** Variables (controlled). */ value?: EnvVariable[] /** Initial variables when uncontrolled. */ defaultValue?: Omit[] /** Called with the new list after every change. */ onChange?: (variables: EnvVariable[]) => void /** Names whose values are shown masked until revealed. Defaults to every row. */ maskAll?: boolean /** Title shown above the rows. */ title?: string /** Helper text under the title. */ description?: string /** Disables editing, for read-only views. */ disabled?: boolean } function EnvEditor({ value: valueProp, defaultValue = [], onChange, maskAll = true, title, description, disabled = false, className, ...props }: EnvEditorProps) { const msg = useMessages() title ??= msg("env-editor.title", "Environment variables") const reduce = useReducedMotion() const uid = React.useId() const counter = React.useRef(0) const nextId = React.useCallback(() => `${uid}-${counter.current++}`, [uid]) const [internal, setInternal] = React.useState(() => defaultValue.map((v) => ({ ...v, id: `${uid}-${counter.current++}` }))) const variables = valueProp ?? internal const [revealed, setRevealed] = React.useState>(new Set()) const [pasteOpen, setPasteOpen] = React.useState(false) const [pasteText, setPasteText] = React.useState("") const [announce, setAnnounce] = React.useState("") const focusId = React.useRef(null) const addRef = React.useRef(null) function commit(next: EnvVariable[]) { if (valueProp === undefined) setInternal(next) onChange?.(next) } React.useEffect(() => { if (!focusId.current) return document.getElementById(`${focusId.current}-key`)?.focus() focusId.current = null }) function update(id: string, patch: Partial) { commit(variables.map((v) => (v.id === id ? { ...v, ...patch } : v))) } function add() { const id = nextId() focusId.current = id commit([...variables, { id, key: "", value: "" }]) setAnnounce(`Added variable ${variables.length + 1}`) } function remove(variable: EnvVariable, index: number) { commit(variables.filter((v) => v.id !== variable.id)) setAnnounce(`Removed ${variable.key || `variable ${index + 1}`}`) const prev = variables[index - 1] if (prev) focusId.current = prev.id else addRef.current?.focus() } function importText(text: string, base: EnvVariable[] = variables) { const parsed = parseEnv(text) if (parsed.length === 0) return 0 const merged = [...base.filter((v) => v.key || v.value)] for (const p of parsed) { const at = merged.findIndex((v) => v.key === p.key) if (at >= 0) merged[at] = { ...merged[at]!, value: p.value } else merged.push({ id: nextId(), ...p }) } commit(merged) setAnnounce(`Imported ${parsed.length} ${parsed.length === 1 ? "variable" : "variables"}`) return parsed.length } const allRevealed = variables.length > 0 && variables.every((v) => revealed.has(v.id)) const problems = variables.map((v) => problemFor(v, variables)) const bad = problems.filter(Boolean).length return (

{title}

{description ?? msg("env-editor.variableCount", { one: "{count} variable", other: "{count} variables" }, { count: variables.length })} {bad > 0 && · {msg("env-editor.toFix", "{count} to fix", { count: bad })}}

formatEnv(variables)} disabled={variables.length === 0} />

{variables.length === 0 ? (

{msg("env-editor.noVariablesYet", "No variables yet")}

Add one by hand, or paste the contents of a .env file to import them all at once.

) : (

{variables.map((v, i) => { const problem = problems[i] const shown = !maskAll || revealed.has(v.id) const errId = `${v.id}-err` return (

update(v.id, { key: e.target.value })} onPaste={(e) => { const text = e.clipboardData.getData("text") if (!/[=\n]/.test(text)) return if (parseEnv(text).length === 0) return e.preventDefault() importText(text, !v.key && !v.value ? variables.filter((x) => x.id !== v.id) : variables) }} className={cn( "h-9 w-full rounded-md border bg-background px-2.5 font-mono text-[13px] outline-none transition-[border-color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-60", problem && "border-destructive focus-visible:ring-destructive/25" )} />

update(v.id, { value: e.target.value })} className="h-9 w-full rounded-md border bg-background pe-9 ps-2.5 font-mono text-[13px] outline-none transition-[border-color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-60" /> {maskAll && ( )}

{problem && (

)} ) })}

)} {pasteOpen && (

{msg("env-editor.pasteAEnvFile", "Paste a .env file")}

setPasteText(e.target.value)}
            rows={5}
            spellCheck={false}
            placeholder={"DATABASE_URL=postgres://…\nAPI_KEY=…"} // i18n-ignore: sample .env text
            className="w-full resize-y rounded-md border bg-background p-2.5 font-mono text-[13px] outline-none placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
          />
          <div className="mt-2 flex justify-end gap-2">
            <button
              type="button"
              onClick={() => {
                setPasteOpen(false)
                setPasteText("")
              }}
              className="h-8 rounded-md px-3 text-[13px] font-medium text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
            >
              {msg("env-editor.cancel", "Cancel")}
            </button>
            <button
              type="button"
              disabled={parseEnv(pasteText).length === 0}
              onClick={() => {
                importText(pasteText)
                setPasteOpen(false)
                setPasteText("")
              }}
              className="h-8 rounded-md bg-primary px-3 text-[13px] font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50"
            >
              {msg("env-editor.import", "Import")} {parseEnv(pasteText).length || ""} {parseEnv(pasteText).length === 1 ? "variable" : "variables"}
            </button>
          </div>
        </div>
      )}

<div className="flex flex-wrap items-center gap-2 border-t bg-muted/30 px-4 py-3">
        <button
          ref={addRef}
          type="button"
          disabled={disabled}
          onClick={add}
          className="inline-flex h-8 items-center gap-1.5 rounded-md border bg-background px-3 text-[13px] font-medium shadow-xs outline-none transition-colors hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
        >
          <Plus aria-hidden="true" className="size-4" />
          {msg("env-editor.addVariable", "Add variable")}
        </button>
        <button
          type="button"
          disabled={disabled}
          aria-expanded={pasteOpen}
          onClick={() => setPasteOpen((o) => !o)}
          className="inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-[13px] font-medium text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
        >
          <ClipboardPaste aria-hidden="true" className="size-4" />
          {msg("env-editor.pasteEnv", "Paste .env")}
        </button>
        <span className="ms-auto hidden text-xs text-muted-foreground @md:block">{msg("env-editor.tipPasteSeveralLinesInto", "Tip: paste several lines into any name field to import them.")}</span>
      </div>
      <span className="sr-only" role="status" aria-live="polite">
        {announce}
      </span>
    </div>
  )

}

export { EnvEditor, parseEnv, formatEnv, type EnvEditorProps, type EnvVariable }
4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion@^12",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^12"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@ballmac","registryDependencies":["utils","https://ui.ballmac.com/r/copy-button.json","https://ui.ballmac.com/r/i18n.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ballmac/components/env-editor.tsx","content":"$52","type":"registry:ui","target":"@components/ballmac/env-editor.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>