{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-ai-environment-variables",
  "title": "Aurora AI Environment Variables",
  "author": "jmagar <https://github.com/jmagar>",
  "description": "Aurora-native environment variables parity surface from AI Elements.",
  "dependencies": [
    "lucide-react@^0.487.0"
  ],
  "registryDependencies": [
    "@aurora/aurora-tokens",
    "@aurora/aurora-ai-elements"
  ],
  "files": [
    {
      "path": "registry/aurora/blocks/ai/elements/environment-variables.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Copy, Eye, EyeOff, KeyRound } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/registry/aurora/ui/badge\"\nimport { Button } from \"@/registry/aurora/ui/button\"\nimport { Separator } from \"@/registry/aurora/ui/separator\"\nimport { useClipboard } from \"@/registry/aurora/lib/use-clipboard\"\n\nexport interface EnvironmentVariable {\n  key: string\n  value?: string\n  secret?: boolean\n  required?: boolean\n}\n\nexport interface EnvironmentVariablesProps extends React.HTMLAttributes<HTMLDivElement> {\n  variables: EnvironmentVariable[]\n}\n\nfunction panelStyle(style?: React.CSSProperties): React.CSSProperties {\n  return {\n    background: \"var(--aurora-surface-raised)\",\n    border: \"1px solid var(--aurora-border-strong)\",\n    borderRadius: \"var(--aurora-radius-1)\",\n    boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n    ...style,\n  }\n}\n\nfunction maskValue(value: string): string {\n  // Reveal a short prefix, then mask the remainder with dots — matches CD.\n  const visible = value.slice(0, 6)\n  return `${visible}${value.length > 6 ? \"••••\" : \"\"}`\n}\n\nfunction previewValue(value: string | undefined, secret: boolean, revealed: boolean): string {\n  if (!value) return \"Unset\"\n  if (secret && !revealed) return maskValue(value)\n  return value.length > 18 ? `${value.slice(0, 18)}…` : value\n}\n\nfunction RowCopyButton({ value, label }: { value: string; label: string }) {\n  const { copied, error, copy } = useClipboard(1200)\n  const handleCopy = React.useCallback(() => void copy(value), [copy, value])\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={handleCopy}\n      aria-label={copied ? `Copied ${label}` : error ? `Unable to copy ${label}` : `Copy ${label}`}\n      style={{ height: 26, width: 26, borderRadius: 6 }}\n    >\n      {copied ? (\n        <Check className=\"size-3.5\" aria-hidden style={{ color: \"var(--aurora-success)\" }} />\n      ) : (\n        <Copy className=\"size-3.5\" aria-hidden />\n      )}\n    </Button>\n  )\n}\n\nconst EnvironmentVariables = ({ ref, className, variables, style, ...props }: EnvironmentVariablesProps & { ref?: React.Ref<HTMLDivElement> }) => {\n    const [revealed, setRevealed] = React.useState(false)\n    const hasSecret = variables.some((item) => item.secret)\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"grid gap-3 p-4\", className)}\n        style={panelStyle(style)}\n        {...props}\n      >\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex items-center gap-2 aurora-text-label\" style={{ color: \"var(--aurora-text-muted)\" }}>\n            <KeyRound className=\"size-4\" aria-hidden style={{ color: \"var(--aurora-accent-primary)\" }} />\n            <span style={{ color: \"var(--aurora-text-primary)\" }}>Environment</span>\n            <span\n              className=\"aurora-text-meta\"\n              style={{\n                color: \"var(--aurora-text-muted)\",\n                lineHeight: 1,\n                fontVariantNumeric: \"tabular-nums\",\n              }}\n            >\n              {variables.length}\n            </span>\n          </div>\n          {hasSecret ? (\n            <Button\n              type=\"button\"\n              variant=\"neutral\"\n              size=\"icon\"\n              aria-pressed={revealed}\n              aria-label={revealed ? \"Hide secret values\" : \"Reveal secret values\"}\n              onClick={() => setRevealed((prev) => !prev)}\n              style={{ height: 30, width: 30, borderRadius: 8 }}\n            >\n              {revealed ? (\n                <EyeOff className=\"size-4\" aria-hidden />\n              ) : (\n                <Eye className=\"size-4\" aria-hidden />\n              )}\n            </Button>\n          ) : null}\n        </div>\n        <Separator />\n        <div className=\"grid gap-1\">\n          {variables.map((item) => {\n            const display = previewValue(item.value, Boolean(item.secret), revealed)\n            return (\n              <div\n                key={item.key}\n                className=\"grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 rounded-[6px] px-2 py-1.5 sm:grid-cols-[minmax(0,1fr)_minmax(0,168px)_auto]\"\n              >\n                <span\n                  className=\"truncate aurora-text-code\"\n                  style={{ color: \"var(--aurora-text-primary)\" }}\n                >\n                  {item.key}\n                </span>\n                <span\n                  className=\"truncate aurora-text-code\"\n                  style={{\n                    color: item.secret ? \"var(--aurora-accent-pink)\" : \"var(--aurora-text-muted)\",\n                    justifySelf: \"end\",\n                  }}\n                >\n                  {display}\n                </span>\n                <span className=\"col-span-2 flex items-center justify-end gap-2 sm:col-span-1\">\n                  {item.required ? <Badge variant=\"warn\">Required</Badge> : null}\n                  {item.secret ? <Badge variant=\"rose\">Secret</Badge> : null}\n                  {item.value ? <RowCopyButton value={item.value} label={item.key} /> : null}\n                </span>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\nEnvironmentVariables.displayName = \"EnvironmentVariables\"\n\nexport { EnvironmentVariables }\nexport default EnvironmentVariables\n",
      "type": "registry:component",
      "target": "@components/aurora/ai/environment-variables.tsx"
    }
  ],
  "meta": {
    "namespace": "@aurora",
    "style": "aurora",
    "family": "block",
    "requiresTokens": true,
    "sourcePath": "registry/aurora/blocks/ai/elements/environment-variables.tsx",
    "installTarget": "@components/aurora/ai/environment-variables.tsx",
    "taxonomy": "ai"
  },
  "docs": "Aurora block that expects `aurora-tokens` to be installed first.\n\nDefault install target: `@components/aurora/ai/environment-variables.tsx`.\n\nRegistry dependencies: `aurora-tokens`, `aurora-ai-elements`.",
  "categories": [
    "aurora",
    "block",
    "ai"
  ],
  "type": "registry:block"
}