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:T21e4,"use client"; import * as React from "react"; import { Download, Eye, EyeOff, Plus, Trash2, Upload } from "lucide-react"; import { cn } from "@/lib/utils"; interface EnvVariable { key: string; value: string; } interface EnvEditorProps { value?: EnvVariable[]; onChange?: (variables: EnvVariable[]) => void; readOnly?: boolean; masked?: boolean; className?: string; } function parseEnvString(content: string): EnvVariable[] { const lines = content.split("\n"); const variables: EnvVariable[] = []; for (const line of lines) { const trimmed = line.trim(); if (!trimmed || trimmed.startsWith("#")) continue; const eqIndex = trimmed.indexOf("="); if (eqIndex === -1) continue; const key = trimmed.slice(0, eqIndex).trim(); let value = trimmed.slice(eqIndex + 1).trim(); if ( (value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'")) ) { value = value.slice(1, -1); } variables.push({ key, value }); } return variables; } function toEnvString(variables: EnvVariable[]): string { return variables .map(({ key, value }) => { const needsQuotes = value.includes(" ") || value.includes("=") || value.includes("#"); return `${key}=${needsQuotes ? `"${value}"` : value}`; }) .join("\n"); } export function EnvEditor({ value = [], onChange, readOnly = false, masked: defaultMasked = true, className, }: EnvEditorProps) { const [variables, setVariables] = React.useState(value); const [maskedKeys, setMaskedKeys] = React.useState>( () => new Set(value.map((v) => v.key)), ); const fileInputRef = React.useRef(null); React.useEffect(() => { setVariables(value); if (defaultMasked) { setMaskedKeys(new Set(value.map((v) => v.key))); } }, [value, defaultMasked]); const updateVariables = React.useCallback( (newVars: EnvVariable[]) => { setVariables(newVars); onChange?.(newVars); }, [onChange], ); const handleAdd = React.useCallback(() => { const newVar = { key: "", value: "" }; setVariables((prev) => { const updated = [...prev, newVar]; onChange?.(updated); return updated; }); }, [onChange]); const handleRemove = React.useCallback( (index: number) => { setVariables((prev) => { const updated = prev.filter((_, i) => i !== index); onChange?.(updated); return updated; }); }, [onChange], ); const handleChange = React.useCallback( (index: number, field: "key" | "value", newValue: string) => { setVariables((prev) => { const updated = prev.map((v, i) => { if (i === index) { return { ...v, [field]: newValue }; } return v; }); onChange?.(updated); return updated; }); }, [onChange], ); const toggleMask = React.useCallback((key: string) => { setMaskedKeys((prev) => { const next = new Set(prev); if (next.has(key)) { next.delete(key); } else { next.add(key); } return next; }); }, []); const handleExport = React.useCallback(() => { const content = toEnvString(variables); const blob = new Blob([content], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = ".env"; a.click(); URL.revokeObjectURL(url); }, [variables]); const handleImport = React.useCallback( (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = (evt) => { const content = evt.target?.result as string; const parsed = parseEnvString(content); setVariables(parsed); onChange?.(parsed); if (defaultMasked) { setMaskedKeys(new Set(parsed.map((v) => v.key))); } }; reader.readAsText(file); if (fileInputRef.current) { fileInputRef.current.value = ""; } }, [onChange, defaultMasked], ); return (

.env Editor {!readOnly && (

)}

{variables.map((variable, index) => (

handleChange(index, "key", e.target.value)} placeholder="KEY" readOnly={readOnly} aria-label="Variable name" className="flex-1 min-w-0 bg-transparent font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none" />

handleChange(index, "value", e.target.value)} placeholder="value" readOnly={readOnly} aria-label={`Value for ${variable.key || "variable"}`} className="flex-1 min-w-0 bg-transparent font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none" /> {!readOnly && ( )}

))} {variables.length === 0 && (

No environment variables

)}

{!readOnly && (

)}

); } export type { EnvEditorProps, 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","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":"@elements","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/blocks/devtools/env-editor/components/elements/env-editor.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]