{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-ai-sandbox",
  "title": "Aurora AI Sandbox",
  "author": "jmagar <https://github.com/jmagar>",
  "description": "Aurora-native sandbox parity surface from AI Elements.",
  "dependencies": [
    "lucide-react@^0.487.0"
  ],
  "registryDependencies": [
    "@aurora/aurora-tokens",
    "@aurora/aurora-ai-elements",
    "@aurora/aurora-safe-url"
  ],
  "files": [
    {
      "path": "registry/aurora/blocks/ai/elements/sandbox.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ExternalLink, FileText, Globe, Monitor, SquareTerminal } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/registry/aurora/ui/badge\"\nimport { Button } from \"@/registry/aurora/ui/button\"\nimport { safeHttpUrl } from \"@/registry/aurora/lib/safe-url\"\n\nexport interface SandboxProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  command?: string\n  status?: \"ready\" | \"running\" | \"idle\"\n  runtime?: string\n  /** Preview URL shown in the address bar. */\n  url?: string\n  /** Human-readable uptime, e.g. \"4m 12s\". Rendered as an \"up …\" chip. */\n  uptime?: string\n  paths?: string[]\n  envCount?: number\n}\n\nconst statusTone: Record<NonNullable<SandboxProps[\"status\"]>, \"success\" | \"info\" | \"neutral\"> = {\n  running: \"success\",\n  ready: \"info\",\n  idle: \"neutral\",\n}\n\n/** Monospace shell-prompt glyph (`>_`) used by the command chip and the\n * \"Attach shell\" affordance, matching the Claude Design source. */\nfunction PromptGlyph({ color }: { color: string }) {\n  return (\n    <span\n      aria-hidden\n      style={{\n        fontFamily: \"var(--aurora-font-mono, 'JetBrains Mono', monospace)\",\n        fontSize: \"12px\",\n        fontWeight: 600,\n        lineHeight: 1,\n        color,\n        letterSpacing: 0,\n      }}\n    >\n      {\">_\"}\n    </span>\n  )\n}\n\nconst Sandbox = (\n    { ref,\n      title = \"Sandbox\",\n      command = \"pnpm dev\",\n      status = \"running\",\n      runtime = \"Node 20\",\n      url,\n      uptime,\n      paths = [\"/workdir/app\", \"/workdir/.next\"],\n      envCount = 8,\n      className,\n      style,\n      children,\n      ...props\n    }: SandboxProps & { ref?: React.Ref<HTMLDivElement> }\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\"grid gap-4 p-[18px]\", className)}\n      style={{\n        background: \"var(--aurora-surface-raised)\",\n        border: \"1px solid var(--aurora-border-strong)\",\n        borderRadius: \"var(--aurora-radius-2)\",\n        boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n        ...style,\n      }}\n      {...props}\n    >\n      {/* Header: icon + title + status */}\n      <div className=\"flex items-center justify-between gap-3\">\n        <span className=\"flex min-w-0 items-center gap-2.5\">\n          <span\n            className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-[8px]\"\n            style={{\n              background: \"var(--axon-orange-surface)\",\n              border: \"1px solid var(--axon-orange-border)\",\n              color: \"var(--axon-orange)\",\n            }}\n          >\n            <SquareTerminal className=\"size-4\" aria-hidden />\n          </span>\n          <span\n            className=\"truncate\"\n            style={{\n              color: \"var(--aurora-text-primary)\",\n              fontFamily: \"var(--aurora-font-sans)\",\n              fontSize: \"15px\",\n              fontWeight: 700,\n              letterSpacing: 0,\n            }}\n          >\n            {title}\n          </span>\n        </span>\n        <Badge variant={statusTone[status]} dot={status === \"running\"} pulse={status === \"running\"}>\n          {status}\n        </Badge>\n      </div>\n\n      {/* Preview URL bar */}\n      {safeHttpUrl(url) ? (\n        <div\n          className=\"flex items-center gap-2.5 rounded-[10px] px-3.5 py-3\"\n          style={{\n            background: \"var(--aurora-control-surface)\",\n            border: \"1px solid var(--aurora-border-default)\",\n          }}\n        >\n          <Globe className=\"size-4 shrink-0\" aria-hidden style={{ color: \"var(--aurora-text-muted)\" }} />\n          <a\n            href={safeHttpUrl(url)}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"aurora-text-ui min-w-0 flex-1 truncate\"\n            style={{ color: \"var(--aurora-accent-strong)\" }}\n          >\n            {url}\n          </a>\n          <ExternalLink className=\"size-4 shrink-0\" aria-hidden style={{ color: \"var(--aurora-text-muted)\" }} />\n        </div>\n      ) : null}\n\n      {/* Runtime chips */}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <span\n          className=\"inline-flex items-center gap-1.5 rounded-[7px] px-2.5 py-1.5\"\n          style={{\n            background: \"var(--axon-orange-surface)\",\n            border: \"1px solid var(--axon-orange-border)\",\n          }}\n        >\n          <PromptGlyph color=\"var(--axon-orange-strong)\" />\n          <span\n            className=\"aurora-text-code\"\n            style={{ color: \"var(--axon-orange-strong)\", fontSize: \"13px\" }}\n          >\n            {command}\n          </span>\n        </span>\n        <span\n          className=\"inline-flex items-center rounded-[7px] px-2.5 py-1.5 aurora-text-meta\"\n          style={{\n            background: \"var(--aurora-control-surface)\",\n            border: \"1px solid var(--aurora-border-default)\",\n            color: \"var(--aurora-text-muted)\",\n            fontFamily: \"var(--aurora-font-sans)\",\n            fontSize: \"var(--aurora-type-caption)\",\n          }}\n        >\n          {runtime}\n        </span>\n        <span\n          className=\"inline-flex items-center rounded-[7px] px-2.5 py-1.5 aurora-text-meta\"\n          style={{\n            background: \"var(--aurora-control-surface)\",\n            border: \"1px solid var(--aurora-border-default)\",\n            color: \"var(--aurora-text-muted)\",\n            fontFamily: \"var(--aurora-font-sans)\",\n            fontSize: \"var(--aurora-type-caption)\",\n            fontVariantNumeric: \"tabular-nums\",\n          }}\n        >\n          {envCount} env\n        </span>\n        {uptime ? (\n          <span\n            className=\"inline-flex items-center rounded-[7px] px-2.5 py-1.5 aurora-text-meta\"\n            style={{\n              background: \"var(--aurora-control-surface)\",\n              border: \"1px solid var(--aurora-border-default)\",\n              color: \"var(--aurora-text-muted)\",\n              fontFamily: \"var(--aurora-font-sans)\",\n              fontSize: \"var(--aurora-type-caption)\",\n              fontVariantNumeric: \"tabular-nums\",\n            }}\n          >\n            up {uptime}\n          </span>\n        ) : null}\n      </div>\n\n      {/* Mounted paths */}\n      <div\n        className=\"grid gap-2.5 rounded-[10px] px-3.5 py-3\"\n        style={{\n          background: \"var(--aurora-control-surface)\",\n          border: \"1px solid var(--aurora-border-default)\",\n        }}\n      >\n        {paths.map((path) => (\n          <div key={path} className=\"flex items-center gap-2.5\">\n            <FileText className=\"size-4 shrink-0\" aria-hidden style={{ color: \"var(--aurora-text-muted)\" }} />\n            <span\n              className=\"aurora-text-meta truncate\"\n              style={{ color: \"var(--aurora-text-primary)\" }}\n            >\n              {path}\n            </span>\n          </div>\n        ))}\n      </div>\n\n      {/* Actions */}\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <Button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"sm\"\n          iconLeft={<Monitor className=\"size-3.5\" aria-hidden />}\n        >\n          Open Logs\n        </Button>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          iconLeft={<PromptGlyph color=\"var(--aurora-text-muted)\" />}\n        >\n          Attach Shell\n        </Button>\n      </div>\n\n      {children}\n    </div>\n  )\nSandbox.displayName = \"Sandbox\"\n\nexport { Sandbox }\nexport default Sandbox\n",
      "type": "registry:component",
      "target": "@components/aurora/ai/sandbox.tsx"
    }
  ],
  "meta": {
    "namespace": "@aurora",
    "style": "aurora",
    "family": "block",
    "requiresTokens": true,
    "sourcePath": "registry/aurora/blocks/ai/elements/sandbox.tsx",
    "installTarget": "@components/aurora/ai/sandbox.tsx",
    "taxonomy": "ai"
  },
  "docs": "Aurora block that expects its declared dependencies to be installed first.\n\nDefault install target: `@components/aurora/ai/sandbox.tsx`.\n\nRegistry dependencies: `aurora-tokens`, `aurora-ai-elements`, `aurora-safe-url`.",
  "categories": [
    "aurora",
    "block",
    "ai"
  ],
  "type": "registry:block"
}