@usetheo/ui 0.13.0 → 0.13.2

package/registry/r/tool-call.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/tool-call/tool-call.tsx",
       "type": "registry:ui",
       "target": "components/ui/tool-call.tsx",
-      "content": "import { ChevronRight, Wrench } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface ToolCallProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tool name e.g. \"bash\", \"read_file\", \"edit_file\". */\n  name?: string;\n  /**\n   * Summary label e.g. \"Ran 2 commands\", \"Read 18 files\".\n   */\n  summary: ReactNode;\n  /**\n   * Collapsible payload (e.g. command, stdout, file list).\n   */\n  detail?: ReactNode;\n  defaultOpen?: boolean;\n  /**\n   * If true, hides the wrench icon (useful when grouping by name elsewhere).\n   */\n  hideIcon?: boolean;\n}\n\n/**\n * ToolCall — collapsible row representing an agent tool invocation.\n *\n * Visual: subtle muted container, wrench icon, summary in body text,\n * chevron rotates on expand. Pairs with `<ToolResult>` for the rendered output.\n *\n * Typical usage inside a ChatMessage assistant body:\n *\n *   <ToolCall summary=\"Read 18 files\" detail={<ToolResult>{output}</ToolResult>} />\n */\nconst ToolCall = forwardRef<HTMLDivElement, ToolCallProps>(\n  ({ className, name, summary, detail, defaultOpen, hideIcon, ...props }, ref) => {\n    const [open, setOpen] = useState(defaultOpen ?? false);\n    const expandable = detail !== undefined;\n    return (\n      <div\n        ref={ref}\n        className={cn(\"rounded-md border border-border/40 bg-muted/30\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={() => expandable && setOpen((v) => !v)}\n          aria-expanded={expandable ? open : undefined}\n          disabled={!expandable}\n          className={cn(\n            \"flex w-full items-center gap-2 px-3 py-2 text-left\",\n            \"font-sans text-body-sm text-foreground\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n            expandable && \"cursor-pointer hover:bg-muted/60\",\n          )}\n        >\n          {!hideIcon ? (\n            <Wrench className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n          ) : null}\n          {name ? (\n            <span className=\"font-mono text-code-sm text-muted-foreground\">{name}</span>\n          ) : null}\n          <span className=\"flex-1 truncate\">{summary}</span>\n          {expandable ? (\n            <ChevronRight\n              className={cn(\n                \"size-3.5 text-muted-foreground transition-transform\",\n                open && \"rotate-90\",\n              )}\n              aria-hidden=\"true\"\n            />\n          ) : null}\n        </button>\n        {expandable && open ? (\n          <div className=\"border-border/40 border-t bg-card px-3 py-2\">{detail}</div>\n        ) : null}\n      </div>\n    );\n  },\n);\nToolCall.displayName = \"ToolCall\";\n\nexport { ToolCall };\n"
+      "content": "\"use client\";\n\nimport { ChevronRight, Wrench } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface ToolCallProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tool name e.g. \"bash\", \"read_file\", \"edit_file\". */\n  name?: string;\n  /**\n   * Summary label e.g. \"Ran 2 commands\", \"Read 18 files\".\n   */\n  summary: ReactNode;\n  /**\n   * Collapsible payload (e.g. command, stdout, file list).\n   */\n  detail?: ReactNode;\n  defaultOpen?: boolean;\n  /**\n   * If true, hides the wrench icon (useful when grouping by name elsewhere).\n   */\n  hideIcon?: boolean;\n}\n\n/**\n * ToolCall — collapsible row representing an agent tool invocation.\n *\n * Visual: subtle muted container, wrench icon, summary in body text,\n * chevron rotates on expand. Pairs with `<ToolResult>` for the rendered output.\n *\n * Typical usage inside a ChatMessage assistant body:\n *\n *   <ToolCall summary=\"Read 18 files\" detail={<ToolResult>{output}</ToolResult>} />\n */\nconst ToolCall = forwardRef<HTMLDivElement, ToolCallProps>(\n  ({ className, name, summary, detail, defaultOpen, hideIcon, ...props }, ref) => {\n    const [open, setOpen] = useState(defaultOpen ?? false);\n    const expandable = detail !== undefined;\n    return (\n      <div\n        data-slot=\"tool-call\"\n        ref={ref}\n        className={cn(\"rounded-md border border-border/40 bg-muted/30\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={() => expandable && setOpen((v) => !v)}\n          aria-expanded={expandable ? open : undefined}\n          disabled={!expandable}\n          className={cn(\n            \"flex w-full items-center gap-2 px-3 py-2 text-left\",\n            \"font-sans text-body-sm text-foreground\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n            expandable && \"cursor-pointer hover:bg-muted/60\",\n          )}\n        >\n          {!hideIcon ? (\n            <Wrench className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n          ) : null}\n          {name ? (\n            <span className=\"font-mono text-code-sm text-muted-foreground\">{name}</span>\n          ) : null}\n          <span className=\"flex-1 truncate\">{summary}</span>\n          {expandable ? (\n            <ChevronRight\n              className={cn(\n                \"size-3.5 text-muted-foreground transition-transform\",\n                open && \"rotate-90\",\n              )}\n              aria-hidden=\"true\"\n            />\n          ) : null}\n        </button>\n        {expandable && open ? (\n          <div className=\"border-border/40 border-t bg-card px-3 py-2\">{detail}</div>\n        ) : null}\n      </div>\n    );\n  },\n);\nToolCall.displayName = \"ToolCall\";\n\nexport { ToolCall };\n"
     }
   ]
 }

package/registry/r/tool-result.json

@@ -14,7 +14,7 @@
       "path": "components/primitives/tool-result/tool-result.tsx",
       "type": "registry:ui",
       "target": "components/ui/tool-result.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ntype Variant = \"text\" | \"code\" | \"json\";\n\ninterface ToolResultProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: Variant;\n  /**\n   * Pre-formatted content. For `code`/`json`, the component uses mono font\n   * and preserves whitespace. For `text`, normal body font.\n   */\n  children: ReactNode;\n}\n\n/**\n * ToolResult — formatted output of a tool invocation.\n *\n * Three quick variants: plain text, code (monospace), json (monospace, tinted).\n * Always rendered as a `<div>` for predictable prop typing; code/json variants\n * wrap children in `<pre>` internally.\n */\nconst ToolResult = forwardRef<HTMLDivElement, ToolResultProps>(\n  ({ className, variant = \"text\", children, ...props }, ref) => {\n    if (variant === \"text\") {\n      return (\n        <div ref={ref} className={cn(\"text-body-sm text-muted-foreground\", className)} {...props}>\n          {children}\n        </div>\n      );\n    }\n    return (\n      <div ref={ref} className={className} {...props}>\n        <pre\n          className={cn(\n            \"overflow-x-auto whitespace-pre-wrap font-mono text-code-sm\",\n            variant === \"json\" ? \"text-primary-glow\" : \"text-foreground\",\n          )}\n        >\n          {children}\n        </pre>\n      </div>\n    );\n  },\n);\nToolResult.displayName = \"ToolResult\";\n\nexport { ToolResult };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ntype Variant = \"text\" | \"code\" | \"json\";\n\ninterface ToolResultProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: Variant;\n  /**\n   * Pre-formatted content. For `code`/`json`, the component uses mono font\n   * and preserves whitespace. For `text`, normal body font.\n   */\n  children: ReactNode;\n}\n\n/**\n * ToolResult — formatted output of a tool invocation.\n *\n * Three quick variants: plain text, code (monospace), json (monospace, tinted).\n * Always rendered as a `<div>` for predictable prop typing; code/json variants\n * wrap children in `<pre>` internally.\n */\nconst ToolResult = forwardRef<HTMLDivElement, ToolResultProps>(\n  ({ className, variant = \"text\", children, ...props }, ref) => {\n    if (variant === \"text\") {\n      return (\n        <div\n          data-slot=\"tool-result\"\n          ref={ref}\n          className={cn(\"text-body-sm text-muted-foreground\", className)}\n          {...props}\n        >\n          {children}\n        </div>\n      );\n    }\n    return (\n      <div data-slot=\"tool-result\" ref={ref} className={className} {...props}>\n        <pre\n          className={cn(\n            \"overflow-x-auto whitespace-pre-wrap font-mono text-code-sm\",\n            variant === \"json\" ? \"text-primary-glow\" : \"text-foreground\",\n          )}\n        >\n          {children}\n        </pre>\n      </div>\n    );\n  },\n);\nToolResult.displayName = \"ToolResult\";\n\nexport { ToolResult };\n"
     }
   ]
 }

package/registry/r/tools-list.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/tools-list/tools-list.tsx",
       "type": "registry:ui",
       "target": "components/ui/tools-list.tsx",
-      "content": "import { Eye, Lock, Settings2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport type ToolEnablement = \"enabled\" | \"ask\" | \"denied\";\n\nexport interface ToolEntry {\n  id: string;\n  name: string;\n  description?: ReactNode;\n  icon?: IconComponent;\n  enablement?: ToolEnablement;\n  /**\n   * Source of the tool: built-in, plugin/skill, or MCP server name.\n   */\n  source?: string;\n  /** Optional badge text (e.g. \"destructive\", \"experimental\"). */\n  badge?: ReactNode;\n}\n\ninterface ToolsListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onChange\"> {\n  tools: ToolEntry[];\n  /** Title above the list. */\n  title?: ReactNode;\n  /**\n   * Fires when the consumer toggles a tool's enablement state.\n   * Cycle: enabled → ask → denied → enabled.\n   */\n  onEnablementChange?: (id: string, next: ToolEnablement) => void;\n}\n\nconst ENABLEMENT_LABEL: Record<ToolEnablement, string> = {\n  enabled: \"Allowed\",\n  ask: \"Ask before use\",\n  denied: \"Denied\",\n};\n\nconst ENABLEMENT_CLASS: Record<ToolEnablement, string> = {\n  enabled: \"bg-success/15 text-success border-success/40\",\n  ask: \"bg-warning/15 text-warning border-warning/40\",\n  denied: \"bg-destructive/15 text-destructive border-destructive/40\",\n};\n\nconst cycle = (cur: ToolEnablement): ToolEnablement =>\n  cur === \"enabled\" ? \"ask\" : cur === \"ask\" ? \"denied\" : \"enabled\";\n\n/**\n * ToolsList — surface every tool the agent could call, with its enablement\n * state. Click the chip to cycle: Allowed → Ask → Denied.\n */\nconst ToolsList = forwardRef<HTMLDivElement, ToolsListProps>(\n  ({ className, tools, title = \"Tools\", onEnablementChange, ...props }, ref) => (\n    <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n      {title ? (\n        <header className=\"flex items-center justify-between border-border/40 border-b px-4 py-3\">\n          <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {tools.length} {tools.length === 1 ? \"tool\" : \"tools\"}\n          </span>\n        </header>\n      ) : null}\n      <ul className=\"divide-y divide-border/30\">\n        {tools.map((tool) => {\n          const Icon = tool.icon ?? Settings2;\n          const state = tool.enablement ?? \"enabled\";\n          return (\n            <li\n              key={tool.id}\n              className=\"grid grid-cols-[auto_1fr_auto] items-start gap-3 px-4 py-3\"\n            >\n              <span className=\"mt-0.5 grid size-8 place-items-center rounded-md bg-muted text-muted-foreground\">\n                <Icon className=\"size-4\" aria-hidden=\"true\" />\n              </span>\n              <div className=\"min-w-0\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"font-medium font-mono text-body-sm text-foreground\">\n                    {tool.name}\n                  </span>\n                  {tool.source ? (\n                    <span className=\"font-mono text-label text-muted-foreground uppercase tracking-wider\">\n                      {tool.source}\n                    </span>\n                  ) : null}\n                  {tool.badge ? (\n                    <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase\">\n                      {tool.badge}\n                    </span>\n                  ) : null}\n                </div>\n                {tool.description ? (\n                  <p className=\"mt-0.5 text-body-sm text-muted-foreground\">{tool.description}</p>\n                ) : null}\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => onEnablementChange?.(tool.id, cycle(state))}\n                className={cn(\n                  \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1\",\n                  \"font-mono text-label uppercase tracking-wider transition-colors\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                  ENABLEMENT_CLASS[state],\n                  !onEnablementChange && \"pointer-events-none\",\n                )}\n                aria-label={`Cycle enablement for ${tool.name}`}\n              >\n                {state === \"enabled\" ? (\n                  <Eye className=\"size-3\" aria-hidden=\"true\" />\n                ) : state === \"ask\" ? (\n                  <Settings2 className=\"size-3\" aria-hidden=\"true\" />\n                ) : (\n                  <Lock className=\"size-3\" aria-hidden=\"true\" />\n                )}\n                {ENABLEMENT_LABEL[state]}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </section>\n  ),\n);\nToolsList.displayName = \"ToolsList\";\n\nexport { ToolsList };\n"
+      "content": "import { Eye, Lock, Settings2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport type ToolEnablement = \"enabled\" | \"ask\" | \"denied\";\n\nexport interface ToolEntry {\n  id: string;\n  name: string;\n  description?: ReactNode;\n  icon?: IconComponent;\n  enablement?: ToolEnablement;\n  /**\n   * Source of the tool: built-in, plugin/skill, or MCP server name.\n   */\n  source?: string;\n  /** Optional badge text (e.g. \"destructive\", \"experimental\"). */\n  badge?: ReactNode;\n}\n\ninterface ToolsListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onChange\"> {\n  tools: ToolEntry[];\n  /** Title above the list. */\n  title?: ReactNode;\n  /**\n   * Fires when the consumer toggles a tool's enablement state.\n   * Cycle: enabled → ask → denied → enabled.\n   */\n  onEnablementChange?: (id: string, next: ToolEnablement) => void;\n}\n\nconst ENABLEMENT_LABEL: Record<ToolEnablement, string> = {\n  enabled: \"Allowed\",\n  ask: \"Ask before use\",\n  denied: \"Denied\",\n};\n\nconst ENABLEMENT_CLASS: Record<ToolEnablement, string> = {\n  enabled: \"bg-success/15 text-success border-success/40\",\n  ask: \"bg-warning/15 text-warning border-warning/40\",\n  denied: \"bg-destructive/15 text-destructive border-destructive/40\",\n};\n\nconst cycle = (cur: ToolEnablement): ToolEnablement =>\n  cur === \"enabled\" ? \"ask\" : cur === \"ask\" ? \"denied\" : \"enabled\";\n\n/**\n * ToolsList — surface every tool the agent could call, with its enablement\n * state. Click the chip to cycle: Allowed → Ask → Denied.\n */\nconst ToolsList = forwardRef<HTMLDivElement, ToolsListProps>(\n  ({ className, tools, title = \"Tools\", onEnablementChange, ...props }, ref) => (\n    <section\n      data-slot=\"tools-list\"\n      ref={ref}\n      className={cn(\"rounded-xl border bg-card\", className)}\n      {...props}\n    >\n      {title ? (\n        <header className=\"flex items-center justify-between border-border/40 border-b px-4 py-3\">\n          <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {tools.length} {tools.length === 1 ? \"tool\" : \"tools\"}\n          </span>\n        </header>\n      ) : null}\n      <ul className=\"divide-y divide-border/30\">\n        {tools.map((tool) => {\n          const Icon = tool.icon ?? Settings2;\n          const state = tool.enablement ?? \"enabled\";\n          return (\n            <li\n              key={tool.id}\n              className=\"grid grid-cols-[auto_1fr_auto] items-start gap-3 px-4 py-3\"\n            >\n              <span className=\"mt-0.5 grid size-8 place-items-center rounded-md bg-muted text-muted-foreground\">\n                <Icon className=\"size-4\" aria-hidden=\"true\" />\n              </span>\n              <div className=\"min-w-0\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"font-medium font-mono text-body-sm text-foreground\">\n                    {tool.name}\n                  </span>\n                  {tool.source ? (\n                    <span className=\"font-mono text-label text-muted-foreground uppercase tracking-wider\">\n                      {tool.source}\n                    </span>\n                  ) : null}\n                  {tool.badge ? (\n                    <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase\">\n                      {tool.badge}\n                    </span>\n                  ) : null}\n                </div>\n                {tool.description ? (\n                  <p className=\"mt-0.5 text-body-sm text-muted-foreground\">{tool.description}</p>\n                ) : null}\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => onEnablementChange?.(tool.id, cycle(state))}\n                className={cn(\n                  \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1\",\n                  \"font-mono text-label uppercase tracking-wider transition-colors\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                  ENABLEMENT_CLASS[state],\n                  !onEnablementChange && \"pointer-events-none\",\n                )}\n                aria-label={`Cycle enablement for ${tool.name}`}\n              >\n                {state === \"enabled\" ? (\n                  <Eye className=\"size-3\" aria-hidden=\"true\" />\n                ) : state === \"ask\" ? (\n                  <Settings2 className=\"size-3\" aria-hidden=\"true\" />\n                ) : (\n                  <Lock className=\"size-3\" aria-hidden=\"true\" />\n                )}\n                {ENABLEMENT_LABEL[state]}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </section>\n  ),\n);\nToolsList.displayName = \"ToolsList\";\n\nexport { ToolsList };\n"
     }
   ]
 }

package/registry/r/tooltip.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/tooltip/tooltip.tsx",
       "type": "registry:ui",
       "target": "components/ui/tooltip.tsx",
-      "content": "import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Tooltip — built on Radix Tooltip.\n *\n * Visual: dark surface in light mode (and inverse in dark) with rounded-md,\n * shadow-md, text-body-sm. 8px delay-show default.\n *\n * Wrap your app in <Tooltip.Provider> once (or use the default delayDuration here).\n */\n\nconst Provider = TooltipPrimitive.Provider;\nconst Root = TooltipPrimitive.Root;\nconst Trigger = TooltipPrimitive.Trigger;\n\nconst Content = forwardRef<\n  ElementRef<typeof TooltipPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 6, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 overflow-hidden rounded-md border border-border/40 bg-foreground px-2.5 py-1.5\",\n        \"text-background text-body-sm shadow-md\",\n        \"data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n        \"data-[side=top]:slide-in-from-bottom-1 data-[side=bottom]:slide-in-from-top-1\",\n        \"data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1\",\n        className,\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\ninterface TooltipProps extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  label: ReactNode;\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * Shorthand: <Tooltip label=\"…\"><Button>…</Button></Tooltip>\n * Wraps Provider + Root + Trigger asChild + Content for the common case.\n * For advanced usage (controlled state, custom content), use Tooltip.Root etc. directly.\n */\nconst Tooltip = ({\n  label,\n  side = \"top\",\n  align = \"center\",\n  delayDuration = 200,\n  children,\n  ...rootProps\n}: TooltipProps) =>\n  (\n    <Provider delayDuration={delayDuration}>\n      <Root {...rootProps}>\n        <Trigger asChild>{children}</Trigger>\n        <Content side={side} align={align}>\n          {label}\n        </Content>\n      </Root>\n    </Provider>\n  ) as ReturnType<typeof Provider>;\n\nconst TooltipWithStatics = Tooltip as typeof Tooltip & {\n  Provider: typeof Provider;\n  Root: typeof Root;\n  Trigger: typeof Trigger;\n  Content: typeof Content;\n};\nTooltipWithStatics.Provider = Provider;\nTooltipWithStatics.Root = Root;\nTooltipWithStatics.Trigger = Trigger;\nTooltipWithStatics.Content = Content;\n\nexport { TooltipWithStatics as Tooltip };\n"
+      "content": "import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Tooltip — built on Radix Tooltip.\n *\n * Visual: dark surface in light mode (and inverse in dark) with rounded-md,\n * shadow-md, text-body-sm. 8px delay-show default.\n *\n * Wrap your app in <Tooltip.Provider> once (or use the default delayDuration here).\n */\n\nconst Provider = TooltipPrimitive.Provider;\nconst Root = TooltipPrimitive.Root;\nconst Trigger = TooltipPrimitive.Trigger;\n\nconst Content = forwardRef<\n  ElementRef<typeof TooltipPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 6, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      data-slot=\"tooltip-content\"\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 overflow-hidden rounded-md border border-border/40 bg-foreground px-2.5 py-1.5\",\n        \"text-background text-body-sm shadow-md\",\n        \"data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n        \"data-[side=top]:slide-in-from-bottom-1 data-[side=bottom]:slide-in-from-top-1\",\n        \"data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1\",\n        className,\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\ninterface TooltipProps extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  label: ReactNode;\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * Shorthand: <Tooltip label=\"…\"><Button>…</Button></Tooltip>\n * Wraps Provider + Root + Trigger asChild + Content for the common case.\n * For advanced usage (controlled state, custom content), use Tooltip.Root etc. directly.\n */\nconst Tooltip = ({\n  label,\n  side = \"top\",\n  align = \"center\",\n  delayDuration = 200,\n  children,\n  ...rootProps\n}: TooltipProps) =>\n  (\n    <Provider delayDuration={delayDuration}>\n      <Root {...rootProps}>\n        <Trigger asChild>{children}</Trigger>\n        <Content side={side} align={align}>\n          {label}\n        </Content>\n      </Root>\n    </Provider>\n  ) as ReturnType<typeof Provider>;\n\nconst TooltipWithStatics = Tooltip as typeof Tooltip & {\n  Provider: typeof Provider;\n  Root: typeof Root;\n  Trigger: typeof Trigger;\n  Content: typeof Content;\n};\nTooltipWithStatics.Provider = Provider;\nTooltipWithStatics.Root = Root;\nTooltipWithStatics.Trigger = Trigger;\nTooltipWithStatics.Content = Content;\n\nexport { TooltipWithStatics as Tooltip };\n"
     }
   ]
 }

package/registry/r/topnav.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/topnav/topnav.tsx",
       "type": "registry:ui",
       "target": "components/ui/topnav.tsx",
-      "content": "import { ChevronRight } from \"lucide-react\";\nimport { Fragment, forwardRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * TopNav — horizontal app bar (64px).\n *\n * Composition:\n *   <TopNav>\n *     <TopNav.Left>\n *       <TopNav.Breadcrumbs items={[{label: \"acme\"}, {label: \"api\"}]} />\n *     </TopNav.Left>\n *     <TopNav.Center>…segmented switcher…</TopNav.Center>\n *     <TopNav.Right>…actions…</TopNav.Right>\n *   </TopNav>\n *\n * Variant — hairline bottom border. No glass/blur (anti-glass guideline).\n */\n\nconst Root = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(\n  ({ className, ...props }, ref) => (\n    <header\n      ref={ref}\n      className={cn(\n        \"flex h-16 items-center justify-between gap-4 border-border/40 border-b bg-card px-6\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRoot.displayName = \"TopNav\";\n\nconst Left = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-1 items-center gap-3\", className)} {...props} />\n  ),\n);\nLeft.displayName = \"TopNav.Left\";\n\nconst Center = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"hidden flex-1 justify-center md:flex\", className)} {...props} />\n  ),\n);\nCenter.displayName = \"TopNav.Center\";\n\nconst Right = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-1 items-center justify-end gap-2\", className)}\n      {...props}\n    />\n  ),\n);\nRight.displayName = \"TopNav.Right\";\n\ninterface BreadcrumbItem {\n  label: ReactNode;\n  href?: string;\n}\n\ninterface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n}\n\nconst Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n  ({ className, items, ...props }, ref) => (\n    <nav\n      ref={ref}\n      aria-label=\"Breadcrumb\"\n      className={cn(\"flex items-center gap-1.5 text-body-sm\", className)}\n      {...props}\n    >\n      {items.map((item, idx) => {\n        const isLast = idx === items.length - 1;\n        const key = typeof item.label === \"string\" ? item.label : idx;\n        return (\n          <Fragment key={key}>\n            {item.href && !isLast ? (\n              <a\n                href={item.href}\n                className=\"font-sans text-muted-foreground transition-colors hover:text-foreground\"\n              >\n                {item.label}\n              </a>\n            ) : (\n              <span\n                className={cn(\n                  \"font-sans\",\n                  isLast ? \"font-medium text-foreground\" : \"text-muted-foreground\",\n                )}\n                aria-current={isLast ? \"page\" : undefined}\n              >\n                {item.label}\n              </span>\n            )}\n            {!isLast ? (\n              <ChevronRight className=\"size-3.5 text-muted-foreground\" aria-hidden=\"true\" />\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </nav>\n  ),\n);\nBreadcrumbs.displayName = \"TopNav.Breadcrumbs\";\n\ninterface ModeSwitcherOption {\n  value: string;\n  label: ReactNode;\n}\n\ninterface ModeSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value: string;\n  options: ModeSwitcherOption[];\n  onChange?: (value: string) => void;\n  /**\n   * Accessible label for the radiogroup. Defaults to \"Mode\".\n   */\n  ariaLabel?: string;\n}\n\n/**\n * TopNav.ModeSwitcher — segmented control (Chat / Code / Infra).\n *\n * ARIA semantics: `role=\"radiogroup\"` + `role=\"radio\"` per option, with roving\n * tabindex and full keyboard navigation (Arrow keys + Home/End). Per WAI-ARIA\n * radiogroup pattern, exactly one option has `tabIndex=0` (the active one) and\n * the rest have `tabIndex=-1`, so Tab moves in and Tab moves out.\n *\n * Stateless: pass `value` + `onChange`.\n */\nconst ModeSwitcher = forwardRef<HTMLDivElement, ModeSwitcherProps>(\n  ({ className, value, options, onChange, ariaLabel = \"Mode\", ...props }, ref) => {\n    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n      if (!onChange || options.length === 0) return;\n      const idx = options.findIndex((o) => o.value === value);\n      const current = idx >= 0 ? idx : 0;\n      let nextIdx: number | null = null;\n      if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n        nextIdx = (current + 1) % options.length;\n      } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n        nextIdx = (current - 1 + options.length) % options.length;\n      } else if (e.key === \"Home\") {\n        nextIdx = 0;\n      } else if (e.key === \"End\") {\n        nextIdx = options.length - 1;\n      }\n      if (nextIdx === null) return;\n      e.preventDefault();\n      const target = options[nextIdx];\n      if (target) onChange(target.value);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"inline-flex items-center rounded-lg border border-border/60 bg-muted p-1\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((opt) => {\n          const isActive = opt.value === value;\n          return (\n            <button\n              key={opt.value}\n              type=\"button\"\n              // biome-ignore lint/a11y/useSemanticElements: WAI-ARIA radiogroup pattern requires role=\"radio\" on buttons for segmented controls\n              role=\"radio\"\n              aria-checked={isActive}\n              tabIndex={isActive ? 0 : -1}\n              onClick={() => onChange?.(opt.value)}\n              className={cn(\n                \"rounded-md px-3 py-1.5 font-medium font-sans text-body-sm\",\n                \"transition-all duration-base ease-out-soft\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                isActive\n                  ? \"bg-card text-foreground shadow-sm\"\n                  : \"text-muted-foreground hover:text-foreground\",\n              )}\n            >\n              {opt.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\nModeSwitcher.displayName = \"TopNav.ModeSwitcher\";\n\nconst TopNav = /*#__PURE__*/ Object.assign(Root, {\n  Left,\n  Center,\n  Right,\n  Breadcrumbs,\n  ModeSwitcher,\n});\n\nexport { TopNav };\n"
+      "content": "import { ChevronRight } from \"lucide-react\";\nimport { Fragment, forwardRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * TopNav — horizontal app bar (64px).\n *\n * Composition:\n *   <TopNav>\n *     <TopNav.Left>\n *       <TopNav.Breadcrumbs items={[{label: \"acme\"}, {label: \"api\"}]} />\n *     </TopNav.Left>\n *     <TopNav.Center>…segmented switcher…</TopNav.Center>\n *     <TopNav.Right>…actions…</TopNav.Right>\n *   </TopNav>\n *\n * Variant — hairline bottom border. No glass/blur (anti-glass guideline).\n */\n\nconst Root = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(\n  ({ className, ...props }, ref) => (\n    <header\n      data-slot=\"top-nav\"\n      ref={ref}\n      className={cn(\n        \"flex h-16 items-center justify-between gap-4 border-border/40 border-b bg-card px-6\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRoot.displayName = \"TopNav\";\n\nconst Left = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      data-slot=\"top-nav-left\"\n      ref={ref}\n      className={cn(\"flex flex-1 items-center gap-3\", className)}\n      {...props}\n    />\n  ),\n);\nLeft.displayName = \"TopNav.Left\";\n\nconst Center = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      data-slot=\"top-nav-center\"\n      ref={ref}\n      className={cn(\"hidden flex-1 justify-center md:flex\", className)}\n      {...props}\n    />\n  ),\n);\nCenter.displayName = \"TopNav.Center\";\n\nconst Right = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      data-slot=\"top-nav-right\"\n      ref={ref}\n      className={cn(\"flex flex-1 items-center justify-end gap-2\", className)}\n      {...props}\n    />\n  ),\n);\nRight.displayName = \"TopNav.Right\";\n\ninterface BreadcrumbItem {\n  label: ReactNode;\n  href?: string;\n}\n\ninterface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n}\n\nconst Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n  ({ className, items, ...props }, ref) => (\n    <nav\n      data-slot=\"top-nav-breadcrumbs\"\n      ref={ref}\n      aria-label=\"Breadcrumb\"\n      className={cn(\"flex items-center gap-1.5 text-body-sm\", className)}\n      {...props}\n    >\n      {items.map((item, idx) => {\n        const isLast = idx === items.length - 1;\n        const key = typeof item.label === \"string\" ? item.label : idx;\n        return (\n          <Fragment key={key}>\n            {item.href && !isLast ? (\n              <a\n                href={item.href}\n                className=\"font-sans text-muted-foreground transition-colors hover:text-foreground\"\n              >\n                {item.label}\n              </a>\n            ) : (\n              <span\n                className={cn(\n                  \"font-sans\",\n                  isLast ? \"font-medium text-foreground\" : \"text-muted-foreground\",\n                )}\n                aria-current={isLast ? \"page\" : undefined}\n              >\n                {item.label}\n              </span>\n            )}\n            {!isLast ? (\n              <ChevronRight className=\"size-3.5 text-muted-foreground\" aria-hidden=\"true\" />\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </nav>\n  ),\n);\nBreadcrumbs.displayName = \"TopNav.Breadcrumbs\";\n\ninterface ModeSwitcherOption {\n  value: string;\n  label: ReactNode;\n}\n\ninterface ModeSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value: string;\n  options: ModeSwitcherOption[];\n  onChange?: (value: string) => void;\n  /**\n   * Accessible label for the radiogroup. Defaults to \"Mode\".\n   */\n  ariaLabel?: string;\n}\n\n/**\n * TopNav.ModeSwitcher — segmented control (Chat / Code / Infra).\n *\n * ARIA semantics: `role=\"radiogroup\"` + `role=\"radio\"` per option, with roving\n * tabindex and full keyboard navigation (Arrow keys + Home/End). Per WAI-ARIA\n * radiogroup pattern, exactly one option has `tabIndex=0` (the active one) and\n * the rest have `tabIndex=-1`, so Tab moves in and Tab moves out.\n *\n * Stateless: pass `value` + `onChange`.\n */\nconst ModeSwitcher = forwardRef<HTMLDivElement, ModeSwitcherProps>(\n  ({ className, value, options, onChange, ariaLabel = \"Mode\", ...props }, ref) => {\n    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n      if (!onChange || options.length === 0) return;\n      const idx = options.findIndex((o) => o.value === value);\n      const current = idx >= 0 ? idx : 0;\n      let nextIdx: number | null = null;\n      if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n        nextIdx = (current + 1) % options.length;\n      } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n        nextIdx = (current - 1 + options.length) % options.length;\n      } else if (e.key === \"Home\") {\n        nextIdx = 0;\n      } else if (e.key === \"End\") {\n        nextIdx = options.length - 1;\n      }\n      if (nextIdx === null) return;\n      e.preventDefault();\n      const target = options[nextIdx];\n      if (target) onChange(target.value);\n    };\n\n    return (\n      <div\n        data-slot=\"top-nav-mode-switcher\"\n        ref={ref}\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"inline-flex items-center rounded-lg border border-border/60 bg-muted p-1\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((opt) => {\n          const isActive = opt.value === value;\n          return (\n            <button\n              key={opt.value}\n              type=\"button\"\n              // biome-ignore lint/a11y/useSemanticElements: WAI-ARIA radiogroup pattern requires role=\"radio\" on buttons for segmented controls\n              role=\"radio\"\n              aria-checked={isActive}\n              tabIndex={isActive ? 0 : -1}\n              onClick={() => onChange?.(opt.value)}\n              className={cn(\n                \"rounded-md px-3 py-1.5 font-medium font-sans text-body-sm\",\n                \"transition-all duration-base ease-out-soft\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                isActive\n                  ? \"bg-card text-foreground shadow-sm\"\n                  : \"text-muted-foreground hover:text-foreground\",\n              )}\n            >\n              {opt.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\nModeSwitcher.displayName = \"TopNav.ModeSwitcher\";\n\nconst TopNav = /*#__PURE__*/ Object.assign(Root, {\n  Left,\n  Center,\n  Right,\n  Breadcrumbs,\n  ModeSwitcher,\n});\n\nexport { TopNav };\n"
     }
   ]
 }

package/registry/r/usage-meter.json

@@ -15,7 +15,7 @@
       "path": "components/composites/usage-meter/usage-meter.tsx",
       "type": "registry:ui",
       "target": "components/ui/usage-meter.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Progress } from \"@/components/ui/progress\";\n\n/**\n * UsageMeter — multi-metric stacked usage card.\n *\n * PaaS-shape sibling of `<CostMeter>` (which is mono-USD). Displays N\n * metrics with arbitrary units (GB, requests, build-minutes, seats) per\n * the reference TheoCloud dashboard mockup. Each row = label + value/max\n * + `<Progress>` fill bar.\n *\n * Composition:\n *\n *   <UsageMeter\n *     title=\"Last 30 days\"\n *     action={<Badge variant=\"outline\">Upgrade</Badge>}\n *     metrics={[\n *       { label: \"Fast Data Transfer\", value: 0, max: 100, unit: \"GB\" },\n *       { label: \"Edge Requests\", value: 0, max: 1_000_000, unit: \"req\",\n *         formatter: (v, m) => `${v} / ${m >= 1e6 ? `${m / 1e6}M` : m}` },\n *     ]}\n *   />\n *\n * Over-quota detection: when `value > max`, the value text gets the\n * `text-warning` class and the underlying `<Progress>` uses\n * `intent=\"warning\"` (bar fills 100% via Progress's own clamping).\n *\n * `compact` mode renders only the bars (no label/value text) — useful in\n * narrow nav-bar slots.\n *\n * Imports the sibling `<Progress>` primitive via relative path (per RFC\n * dashboard-paas-primitives D3) — primitives must not depend on the\n * `@usetheo/ui` barrel.\n */\n\nexport interface UsageMetric {\n  /** Display label (e.g. \"Fast Data Transfer\"). */\n  label: ReactNode;\n  /** Current consumption. */\n  value: number;\n  /** Maximum allowed in the current period. */\n  max: number;\n  /** Unit string (e.g. \"GB\", \"req\", \"min\"). Rendered after value/max. */\n  unit?: string;\n  /** Optional custom formatter — overrides default `${value} / ${max} ${unit}`. */\n  formatter?: (value: number, max: number, unit?: string) => string;\n}\n\nexport interface UsageMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Card title (e.g. \"Last 30 days\", \"This billing period\"). */\n  title?: ReactNode;\n  /** Optional right-aligned action slot (e.g. an Upgrade Badge or Button). */\n  action?: ReactNode;\n  /** Array of metrics to display. Order preserved. */\n  metrics: UsageMetric[];\n  /** When true, show only the bars without label/value text (sparkline mode). */\n  compact?: boolean;\n}\n\nfunction defaultFormat(value: number, max: number, unit?: string): string {\n  return `${value} / ${max}${unit ? ` ${unit}` : \"\"}`;\n}\n\nfunction metricAriaLabel(metric: UsageMetric, formatted: string): string {\n  // Label may be a ReactNode; coerce to string for aria-label.\n  const label = typeof metric.label === \"string\" ? metric.label : \"metric\";\n  return `${label}: ${formatted}`;\n}\n\nconst UsageMeter = forwardRef<HTMLDivElement, UsageMeterProps>(\n  ({ className, title, action, metrics, compact = false, ...props }, ref) => {\n    const hasHeader = Boolean(title) || Boolean(action);\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid gap-3 rounded-xl border border-border bg-card p-4\",\n          compact && \"gap-2\",\n          className,\n        )}\n        data-theo-usage-meter=\"\"\n        {...props}\n      >\n        {hasHeader ? (\n          <header className=\"flex items-baseline justify-between gap-3\">\n            {title ? (\n              <span\n                className={cn(\n                  \"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\",\n                )}\n              >\n                {title}\n              </span>\n            ) : (\n              <span />\n            )}\n            {action ? <div className=\"shrink-0\">{action}</div> : null}\n          </header>\n        ) : null}\n\n        {metrics.map((metric, idx) => {\n          const overQuota = metric.value > metric.max;\n          const fmt = metric.formatter ?? defaultFormat;\n          const formatted = fmt(metric.value, metric.max, metric.unit);\n          const intent = overQuota ? \"warning\" : \"default\";\n          // Each metric needs a stable key. Without a unique id field we\n          // synthesize one from label + idx — duplicates resolve via the\n          // index suffix.\n          const key = `${typeof metric.label === \"string\" ? metric.label : \"metric\"}-${idx}`;\n\n          if (compact) {\n            return (\n              <Progress\n                key={key}\n                value={metric.value}\n                max={metric.max}\n                intent={intent}\n                aria-label={metricAriaLabel(metric, formatted)}\n              />\n            );\n          }\n\n          return (\n            <div key={key} className=\"grid gap-1.5\">\n              <div className=\"flex items-baseline justify-between gap-3 text-body-sm\">\n                <span className=\"truncate text-muted-foreground\">{metric.label}</span>\n                <span\n                  className={cn(\n                    \"shrink-0 font-mono tabular-nums\",\n                    overQuota ? \"text-warning\" : \"text-foreground\",\n                  )}\n                >\n                  {formatted}\n                </span>\n              </div>\n              <Progress\n                value={metric.value}\n                max={metric.max}\n                intent={intent}\n                aria-label={metricAriaLabel(metric, formatted)}\n              />\n            </div>\n          );\n        })}\n      </div>\n    );\n  },\n);\nUsageMeter.displayName = \"UsageMeter\";\n\nexport { UsageMeter };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Progress } from \"@/components/ui/progress\";\n\n/**\n * UsageMeter — multi-metric stacked usage card.\n *\n * PaaS-shape sibling of `<CostMeter>` (which is mono-USD). Displays N\n * metrics with arbitrary units (GB, requests, build-minutes, seats) per\n * the reference TheoCloud dashboard mockup. Each row = label + value/max\n * + `<Progress>` fill bar.\n *\n * Composition:\n *\n *   <UsageMeter\n *     title=\"Last 30 days\"\n *     action={<Badge variant=\"outline\">Upgrade</Badge>}\n *     metrics={[\n *       { label: \"Fast Data Transfer\", value: 0, max: 100, unit: \"GB\" },\n *       { label: \"Edge Requests\", value: 0, max: 1_000_000, unit: \"req\",\n *         formatter: (v, m) => `${v} / ${m >= 1e6 ? `${m / 1e6}M` : m}` },\n *     ]}\n *   />\n *\n * Over-quota detection: when `value > max`, the value text gets the\n * `text-warning` class and the underlying `<Progress>` uses\n * `intent=\"warning\"` (bar fills 100% via Progress's own clamping).\n *\n * `compact` mode renders only the bars (no label/value text) — useful in\n * narrow nav-bar slots.\n *\n * Imports the sibling `<Progress>` primitive via relative path (per RFC\n * dashboard-paas-primitives D3) — primitives must not depend on the\n * `@theokit/ui` barrel.\n */\n\nexport interface UsageMetric {\n  /** Display label (e.g. \"Fast Data Transfer\"). */\n  label: ReactNode;\n  /** Current consumption. */\n  value: number;\n  /** Maximum allowed in the current period. */\n  max: number;\n  /** Unit string (e.g. \"GB\", \"req\", \"min\"). Rendered after value/max. */\n  unit?: string;\n  /** Optional custom formatter — overrides default `${value} / ${max} ${unit}`. */\n  formatter?: (value: number, max: number, unit?: string) => string;\n}\n\nexport interface UsageMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Card title (e.g. \"Last 30 days\", \"This billing period\"). */\n  title?: ReactNode;\n  /** Optional right-aligned action slot (e.g. an Upgrade Badge or Button). */\n  action?: ReactNode;\n  /** Array of metrics to display. Order preserved. */\n  metrics: UsageMetric[];\n  /** When true, show only the bars without label/value text (sparkline mode). */\n  compact?: boolean;\n}\n\nfunction defaultFormat(value: number, max: number, unit?: string): string {\n  return `${value} / ${max}${unit ? ` ${unit}` : \"\"}`;\n}\n\nfunction metricAriaLabel(metric: UsageMetric, formatted: string): string {\n  // Label may be a ReactNode; coerce to string for aria-label.\n  const label = typeof metric.label === \"string\" ? metric.label : \"metric\";\n  return `${label}: ${formatted}`;\n}\n\nconst UsageMeter = forwardRef<HTMLDivElement, UsageMeterProps>(\n  ({ className, title, action, metrics, compact = false, ...props }, ref) => {\n    const hasHeader = Boolean(title) || Boolean(action);\n    return (\n      <div\n        data-slot=\"usage-meter\"\n        ref={ref}\n        className={cn(\n          \"grid gap-3 rounded-xl border border-border bg-card p-4\",\n          compact && \"gap-2\",\n          className,\n        )}\n        data-theo-usage-meter=\"\"\n        {...props}\n      >\n        {hasHeader ? (\n          <header className=\"flex items-baseline justify-between gap-3\">\n            {title ? (\n              <span\n                className={cn(\n                  \"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\",\n                )}\n              >\n                {title}\n              </span>\n            ) : (\n              <span />\n            )}\n            {action ? <div className=\"shrink-0\">{action}</div> : null}\n          </header>\n        ) : null}\n\n        {metrics.map((metric, idx) => {\n          const overQuota = metric.value > metric.max;\n          const fmt = metric.formatter ?? defaultFormat;\n          const formatted = fmt(metric.value, metric.max, metric.unit);\n          const intent = overQuota ? \"warning\" : \"default\";\n          // Each metric needs a stable key. Without a unique id field we\n          // synthesize one from label + idx — duplicates resolve via the\n          // index suffix.\n          const key = `${typeof metric.label === \"string\" ? metric.label : \"metric\"}-${idx}`;\n\n          if (compact) {\n            return (\n              <Progress\n                key={key}\n                value={metric.value}\n                max={metric.max}\n                intent={intent}\n                aria-label={metricAriaLabel(metric, formatted)}\n              />\n            );\n          }\n\n          return (\n            <div key={key} className=\"grid gap-1.5\">\n              <div className=\"flex items-baseline justify-between gap-3 text-body-sm\">\n                <span className=\"truncate text-muted-foreground\">{metric.label}</span>\n                <span\n                  className={cn(\n                    \"shrink-0 font-mono tabular-nums\",\n                    overQuota ? \"text-warning\" : \"text-foreground\",\n                  )}\n                >\n                  {formatted}\n                </span>\n              </div>\n              <Progress\n                value={metric.value}\n                max={metric.max}\n                intent={intent}\n                aria-label={metricAriaLabel(metric, formatted)}\n              />\n            </div>\n          );\n        })}\n      </div>\n    );\n  },\n);\nUsageMeter.displayName = \"UsageMeter\";\n\nexport { UsageMeter };\n"
     }
   ]
 }

package/registry/r/whiteboard.json

@@ -3,7 +3,7 @@
   "name": "whiteboard",
   "type": "registry:ui",
   "title": "Whiteboard",
-  "description": "View-only primitive that renders a declarative JSON scene as SVG with a hand-drawn aesthetic. Pan + zoom built-in; no editor surface. Subpath-isolated bundle in @usetheo/ui.",
+  "description": "View-only primitive that renders a declarative JSON scene as SVG with a hand-drawn aesthetic. Pan + zoom built-in; no editor surface. Subpath-isolated bundle in @theokit/ui.",
   "dependencies": [
     "perfect-freehand",
     "roughjs",
@@ -17,7 +17,7 @@
       "path": "components/primitives/whiteboard/whiteboard.tsx",
       "type": "registry:ui",
       "target": "components/ui/whiteboard/whiteboard.tsx",
-      "content": "import { useEffect, useMemo, useRef } from \"react\";\n/**\n * `<Whiteboard>` — view-only primitive that turns a JSON scene into a\n * hand-drawn SVG. Lives in the isolated subpath `@usetheo/ui/whiteboard`.\n *\n * See RFC 0001 (`docs/rfcs/0001-whiteboard.md`) and the plan in\n * `.claude/knowledge-base/plans/whiteboard-view-primitive-plan.md`.\n */\nimport rough from \"roughjs\";\nimport type { RoughGenerator } from \"roughjs/bin/generator\";\nimport { renderScene } from \"@/components/ui/whiteboard/render/scene\";\nimport type { WhiteboardScene, WhiteboardSceneInput } from \"@/components/ui/whiteboard/schema\";\nimport { type ValidationError, validateScene } from \"@/components/ui/whiteboard/validate\";\nimport { usePointerPan } from \"@/components/ui/whiteboard/viewport/use-pointer-pan\";\nimport { useViewport } from \"@/components/ui/whiteboard/viewport/use-viewport\";\n\n/** Input type accepted by the component (defaults like `headEnd` are optional). */\nexport type WhiteboardData = WhiteboardSceneInput;\nexport type { ValidationError } from \"@/components/ui/whiteboard/validate\";\n\nexport interface WhiteboardProps {\n  /** The scene to render. Validated with Zod on every change. */\n  data: WhiteboardData | unknown;\n  className?: string;\n  /** Starting zoom level (clamped 0.1–8). Default 1. */\n  initialZoom?: number;\n  /** World coordinate centered in the viewport on first render. */\n  initialCenter?: [number, number];\n  /** When true, computes a bounding box of all elements and zooms to fit. */\n  fitOnLoad?: boolean;\n  /** Called once per validation failure with the list of errors (EC-6: in useEffect, not render). */\n  onValidationError?: (errors: ValidationError[]) => void;\n  /** Accessible label for the SVG (defaults to \"Whiteboard diagram\"). */\n  \"aria-label\"?: string;\n}\n\nfunction computeBounds(scene: WhiteboardScene): {\n  minX: number;\n  minY: number;\n  maxX: number;\n  maxY: number;\n} | null {\n  if (scene.elements.length === 0) return null;\n  let minX = Number.POSITIVE_INFINITY;\n  let minY = Number.POSITIVE_INFINITY;\n  let maxX = Number.NEGATIVE_INFINITY;\n  let maxY = Number.NEGATIVE_INFINITY;\n  for (const el of scene.elements) {\n    const x1 = el.x;\n    const y1 = el.y;\n    let x2 = el.x;\n    let y2 = el.y;\n    if (el.type === \"rect\" || el.type === \"ellipse\" || el.type === \"diamond\") {\n      x2 = el.x + el.w;\n      y2 = el.y + el.h;\n    } else if (el.type === \"line\" || el.type === \"arrow\") {\n      x2 = el.to[0];\n      y2 = el.to[1];\n    } else if (el.type === \"freedraw\") {\n      for (const [px, py] of el.points) {\n        const tx = el.x + px;\n        const ty = el.y + py;\n        if (tx < minX) minX = tx;\n        if (ty < minY) minY = ty;\n        if (tx > maxX) maxX = tx;\n        if (ty > maxY) maxY = ty;\n      }\n      continue;\n    }\n    if (x1 < minX) minX = x1;\n    if (y1 < minY) minY = y1;\n    if (x2 < minX) minX = x2;\n    if (y2 < minY) minY = y2;\n    if (x1 > maxX) maxX = x1;\n    if (y1 > maxY) maxY = y1;\n    if (x2 > maxX) maxX = x2;\n    if (y2 > maxY) maxY = y2;\n  }\n  if (!Number.isFinite(minX)) return null;\n  return { minX, minY, maxX, maxY };\n}\n\nexport function Whiteboard({\n  data,\n  className,\n  initialZoom,\n  initialCenter,\n  fitOnLoad,\n  onValidationError,\n  \"aria-label\": ariaLabel,\n}: WhiteboardProps) {\n  const validation = useMemo(() => validateScene(data), [data]);\n  const scene = validation.ok ? validation.scene : null;\n\n  // EC-6: side effects only inside useEffect — never call user callbacks in render.\n  useEffect(() => {\n    if (!validation.ok && onValidationError) {\n      onValidationError(validation.errors);\n    }\n  }, [validation, onValidationError]);\n\n  // Stable rough.js generator across renders.\n  const generator: RoughGenerator | null = useMemo(() => {\n    if (typeof globalThis === \"undefined\") return null;\n    try {\n      return rough.generator();\n    } catch {\n      return null;\n    }\n  }, []);\n\n  // Fallback dimensions for invalid scenes (still render a valid svg).\n  const sceneWidth = scene?.width ?? 400;\n  const sceneHeight = scene?.height ?? 300;\n  const sceneBackground = scene?.background;\n\n  const viewport = useViewport({\n    width: sceneWidth,\n    height: sceneHeight,\n    initialZoom,\n    initialCenter,\n  });\n\n  const svgRef = useRef<SVGSVGElement | null>(null);\n\n  const fitTo = viewport.fitTo;\n  // EC-14: fitOnLoad must run in useEffect (after mount), not during render.\n  useEffect(() => {\n    if (!fitOnLoad || !scene) return;\n    const bounds = computeBounds(scene);\n    if (!bounds) return;\n    fitTo(bounds, { width: sceneWidth, height: sceneHeight });\n  }, [fitOnLoad, scene, sceneWidth, sceneHeight, fitTo]);\n\n  const handlers = usePointerPan(svgRef, viewport, {\n    width: sceneWidth,\n    height: sceneHeight,\n  });\n\n  const label = ariaLabel ?? \"Whiteboard diagram\";\n\n  return (\n    <svg\n      ref={svgRef}\n      viewBox={viewport.viewBox({ width: sceneWidth, height: sceneHeight })}\n      width={sceneWidth}\n      height={sceneHeight}\n      className={className}\n      role=\"img\"\n      aria-label={label}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-whiteboard-state={scene ? \"ok\" : \"invalid\"}\n      style={{ touchAction: \"none\", userSelect: \"none\" }}\n      {...handlers}\n    >\n      <title>{label}</title>\n      {sceneBackground ? (\n        <rect\n          x={0}\n          y={0}\n          width={sceneWidth}\n          height={sceneHeight}\n          fill={sceneBackground}\n          data-layer=\"background\"\n        />\n      ) : null}\n      {scene && generator ? renderScene(scene, generator) : null}\n    </svg>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useEffect, useMemo, useRef } from \"react\";\n/**\n * `<Whiteboard>` — view-only primitive that turns a JSON scene into a\n * hand-drawn SVG. Lives in the isolated subpath `@theokit/ui/whiteboard`.\n *\n * See RFC 0001 (`docs/rfcs/0001-whiteboard.md`) and the plan in\n * `.claude/knowledge-base/plans/whiteboard-view-primitive-plan.md`.\n */\nimport rough from \"roughjs\";\nimport type { RoughGenerator } from \"roughjs/bin/generator\";\nimport { renderScene } from \"@/components/ui/whiteboard/render/scene\";\nimport type { WhiteboardScene, WhiteboardSceneInput } from \"@/components/ui/whiteboard/schema\";\nimport { type ValidationError, validateScene } from \"@/components/ui/whiteboard/validate\";\nimport { usePointerPan } from \"@/components/ui/whiteboard/viewport/use-pointer-pan\";\nimport { useViewport } from \"@/components/ui/whiteboard/viewport/use-viewport\";\n\n/** Input type accepted by the component (defaults like `headEnd` are optional). */\nexport type WhiteboardData = WhiteboardSceneInput;\nexport type { ValidationError } from \"@/components/ui/whiteboard/validate\";\n\nexport interface WhiteboardProps {\n  /** The scene to render. Validated with Zod on every change. */\n  data: WhiteboardData | unknown;\n  className?: string;\n  /** Starting zoom level (clamped 0.1–8). Default 1. */\n  initialZoom?: number;\n  /** World coordinate centered in the viewport on first render. */\n  initialCenter?: [number, number];\n  /** When true, computes a bounding box of all elements and zooms to fit. */\n  fitOnLoad?: boolean;\n  /** Called once per validation failure with the list of errors (EC-6: in useEffect, not render). */\n  onValidationError?: (errors: ValidationError[]) => void;\n  /** Accessible label for the SVG (defaults to \"Whiteboard diagram\"). */\n  \"aria-label\"?: string;\n}\n\nfunction computeBounds(scene: WhiteboardScene): {\n  minX: number;\n  minY: number;\n  maxX: number;\n  maxY: number;\n} | null {\n  if (scene.elements.length === 0) return null;\n  let minX = Number.POSITIVE_INFINITY;\n  let minY = Number.POSITIVE_INFINITY;\n  let maxX = Number.NEGATIVE_INFINITY;\n  let maxY = Number.NEGATIVE_INFINITY;\n  for (const el of scene.elements) {\n    const x1 = el.x;\n    const y1 = el.y;\n    let x2 = el.x;\n    let y2 = el.y;\n    if (el.type === \"rect\" || el.type === \"ellipse\" || el.type === \"diamond\") {\n      x2 = el.x + el.w;\n      y2 = el.y + el.h;\n    } else if (el.type === \"line\" || el.type === \"arrow\") {\n      x2 = el.to[0];\n      y2 = el.to[1];\n    } else if (el.type === \"freedraw\") {\n      for (const [px, py] of el.points) {\n        const tx = el.x + px;\n        const ty = el.y + py;\n        if (tx < minX) minX = tx;\n        if (ty < minY) minY = ty;\n        if (tx > maxX) maxX = tx;\n        if (ty > maxY) maxY = ty;\n      }\n      continue;\n    }\n    if (x1 < minX) minX = x1;\n    if (y1 < minY) minY = y1;\n    if (x2 < minX) minX = x2;\n    if (y2 < minY) minY = y2;\n    if (x1 > maxX) maxX = x1;\n    if (y1 > maxY) maxY = y1;\n    if (x2 > maxX) maxX = x2;\n    if (y2 > maxY) maxY = y2;\n  }\n  if (!Number.isFinite(minX)) return null;\n  return { minX, minY, maxX, maxY };\n}\n\nexport function Whiteboard({\n  data,\n  className,\n  initialZoom,\n  initialCenter,\n  fitOnLoad,\n  onValidationError,\n  \"aria-label\": ariaLabel,\n}: WhiteboardProps) {\n  const validation = useMemo(() => validateScene(data), [data]);\n  const scene = validation.ok ? validation.scene : null;\n\n  // EC-6: side effects only inside useEffect — never call user callbacks in render.\n  useEffect(() => {\n    if (!validation.ok && onValidationError) {\n      onValidationError(validation.errors);\n    }\n  }, [validation, onValidationError]);\n\n  // Stable rough.js generator across renders.\n  const generator: RoughGenerator | null = useMemo(() => {\n    if (typeof globalThis === \"undefined\") return null;\n    try {\n      return rough.generator();\n    } catch {\n      return null;\n    }\n  }, []);\n\n  // Fallback dimensions for invalid scenes (still render a valid svg).\n  const sceneWidth = scene?.width ?? 400;\n  const sceneHeight = scene?.height ?? 300;\n  const sceneBackground = scene?.background;\n\n  const viewport = useViewport({\n    width: sceneWidth,\n    height: sceneHeight,\n    initialZoom,\n    initialCenter,\n  });\n\n  const svgRef = useRef<SVGSVGElement | null>(null);\n\n  const fitTo = viewport.fitTo;\n  // EC-14: fitOnLoad must run in useEffect (after mount), not during render.\n  useEffect(() => {\n    if (!fitOnLoad || !scene) return;\n    const bounds = computeBounds(scene);\n    if (!bounds) return;\n    fitTo(bounds, { width: sceneWidth, height: sceneHeight });\n  }, [fitOnLoad, scene, sceneWidth, sceneHeight, fitTo]);\n\n  const handlers = usePointerPan(svgRef, viewport, {\n    width: sceneWidth,\n    height: sceneHeight,\n  });\n\n  const label = ariaLabel ?? \"Whiteboard diagram\";\n\n  return (\n    <svg\n      data-slot=\"whiteboard\"\n      ref={svgRef}\n      viewBox={viewport.viewBox({ width: sceneWidth, height: sceneHeight })}\n      width={sceneWidth}\n      height={sceneHeight}\n      className={className}\n      role=\"img\"\n      aria-label={label}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-whiteboard-state={scene ? \"ok\" : \"invalid\"}\n      style={{ touchAction: \"none\", userSelect: \"none\" }}\n      {...handlers}\n    >\n      <title>{label}</title>\n      {sceneBackground ? (\n        <rect\n          x={0}\n          y={0}\n          width={sceneWidth}\n          height={sceneHeight}\n          fill={sceneBackground}\n          data-layer=\"background\"\n        />\n      ) : null}\n      {scene && generator ? renderScene(scene, generator) : null}\n    </svg>\n  );\n}\n"
     },
     {
       "path": "components/primitives/whiteboard/schema.ts",
@@ -53,7 +53,7 @@
       "path": "components/primitives/whiteboard/render/shape.tsx",
       "type": "registry:ui",
       "target": "components/ui/whiteboard/render/shape.tsx",
-      "content": "import type { RoughGenerator } from \"roughjs/bin/generator\";\nimport type { DiamondElement, EllipseElement, RectElement } from \"@/components/ui/whiteboard/schema\";\nimport { toRoughPaths } from \"@/components/ui/whiteboard/render/rough-paths\";\nimport { buildOptions, strokeDashArray } from \"@/components/ui/whiteboard/render/style\";\n\ninterface LabelProps {\n  cx: number;\n  cy: number;\n  label: string;\n  stroke?: string;\n}\n\nfunction Label({ cx, cy, label, stroke }: LabelProps) {\n  return (\n    <text\n      x={cx}\n      y={cy}\n      textAnchor=\"middle\"\n      dominantBaseline=\"central\"\n      fontSize={16}\n      fontFamily=\"ui-sans-serif, system-ui, sans-serif\"\n      fill={stroke ?? \"currentColor\"}\n      style={{ pointerEvents: \"none\" }}\n    >\n      {label}\n    </text>\n  );\n}\n\nfunction pathsToReactNodes(\n  paths: ReturnType<typeof toRoughPaths>,\n  keyPrefix: string,\n  outlineStroke: string,\n  dashArray?: string,\n): React.ReactNode[] {\n  return paths.map((p, i) => {\n    // Apply stroke-dasharray only to paths whose stroke matches the outline\n    // color — this avoids dashing hachure/cross-hatch fill lines (which are\n    // stroked in the fill color, not the outline color) when a shape mixes\n    // fillStyle with strokeStyle.\n    const isOutline = p.stroke === outlineStroke;\n    return (\n      <path\n        // biome-ignore lint/suspicious/noArrayIndexKey: rough.js path order is stable for a given (geometry, seed) tuple — index is the most precise key.\n        key={`${keyPrefix}-${i}`}\n        d={p.d}\n        stroke={p.stroke}\n        strokeWidth={p.strokeWidth}\n        fill={p.fill ?? \"none\"}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeDasharray={isOutline ? dashArray : undefined}\n      />\n    );\n  });\n}\n\nexport function renderRect(gen: RoughGenerator, el: RectElement): React.ReactNode {\n  const opts = buildOptions(el, el.seed ?? 0);\n  const drawable = gen.rectangle(el.x, el.y, el.w, el.h, opts);\n  const paths = toRoughPaths(gen, drawable);\n  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);\n  return (\n    <g opacity={el.opacity ?? 1}>\n      {pathsToReactNodes(paths, \"rect\", opts.stroke as string, dash)}\n      {el.label ? (\n        <Label cx={el.x + el.w / 2} cy={el.y + el.h / 2} label={el.label} stroke={el.stroke} />\n      ) : null}\n    </g>\n  );\n}\n\nexport function renderEllipse(gen: RoughGenerator, el: EllipseElement): React.ReactNode {\n  const opts = buildOptions(el, el.seed ?? 0);\n  // rough.js ellipse takes center + width + height.\n  const drawable = gen.ellipse(el.x + el.w / 2, el.y + el.h / 2, el.w, el.h, opts);\n  const paths = toRoughPaths(gen, drawable);\n  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);\n  return (\n    <g opacity={el.opacity ?? 1}>\n      {pathsToReactNodes(paths, \"ellipse\", opts.stroke as string, dash)}\n      {el.label ? (\n        <Label cx={el.x + el.w / 2} cy={el.y + el.h / 2} label={el.label} stroke={el.stroke} />\n      ) : null}\n    </g>\n  );\n}\n\nexport function renderDiamond(gen: RoughGenerator, el: DiamondElement): React.ReactNode {\n  const opts = buildOptions(el, el.seed ?? 0);\n  const cx = el.x + el.w / 2;\n  const cy = el.y + el.h / 2;\n  const points: [number, number][] = [\n    [cx, el.y], // top\n    [el.x + el.w, cy], // right\n    [cx, el.y + el.h], // bottom\n    [el.x, cy], // left\n  ];\n  const drawable = gen.polygon(points, opts);\n  const paths = toRoughPaths(gen, drawable);\n  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);\n  return (\n    <g opacity={el.opacity ?? 1}>\n      {pathsToReactNodes(paths, \"diamond\", opts.stroke as string, dash)}\n      {el.label ? <Label cx={cx} cy={cy} label={el.label} stroke={el.stroke} /> : null}\n    </g>\n  );\n}\n"
+      "content": "import type { RoughGenerator } from \"roughjs/bin/generator\";\nimport type { DiamondElement, EllipseElement, RectElement } from \"@/components/ui/whiteboard/schema\";\nimport { toRoughPaths } from \"@/components/ui/whiteboard/render/rough-paths\";\nimport { buildOptions, strokeDashArray } from \"@/components/ui/whiteboard/render/style\";\n\ninterface LabelProps {\n  cx: number;\n  cy: number;\n  label: string;\n  stroke?: string;\n}\n\nfunction Label({ cx, cy, label, stroke }: LabelProps) {\n  return (\n    <text\n      data-slot=\"label\"\n      x={cx}\n      y={cy}\n      textAnchor=\"middle\"\n      dominantBaseline=\"central\"\n      fontSize={16}\n      fontFamily=\"ui-sans-serif, system-ui, sans-serif\"\n      fill={stroke ?? \"currentColor\"}\n      style={{ pointerEvents: \"none\" }}\n    >\n      {label}\n    </text>\n  );\n}\n\nfunction pathsToReactNodes(\n  paths: ReturnType<typeof toRoughPaths>,\n  keyPrefix: string,\n  outlineStroke: string,\n  dashArray?: string,\n): React.ReactNode[] {\n  return paths.map((p, i) => {\n    // Apply stroke-dasharray only to paths whose stroke matches the outline\n    // color — this avoids dashing hachure/cross-hatch fill lines (which are\n    // stroked in the fill color, not the outline color) when a shape mixes\n    // fillStyle with strokeStyle.\n    const isOutline = p.stroke === outlineStroke;\n    return (\n      <path\n        // biome-ignore lint/suspicious/noArrayIndexKey: rough.js path order is stable for a given (geometry, seed) tuple — index is the most precise key.\n        key={`${keyPrefix}-${i}`}\n        d={p.d}\n        stroke={p.stroke}\n        strokeWidth={p.strokeWidth}\n        fill={p.fill ?? \"none\"}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeDasharray={isOutline ? dashArray : undefined}\n      />\n    );\n  });\n}\n\nexport function renderRect(gen: RoughGenerator, el: RectElement): React.ReactNode {\n  const opts = buildOptions(el, el.seed ?? 0);\n  const drawable = gen.rectangle(el.x, el.y, el.w, el.h, opts);\n  const paths = toRoughPaths(gen, drawable);\n  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);\n  return (\n    <g opacity={el.opacity ?? 1}>\n      {pathsToReactNodes(paths, \"rect\", opts.stroke as string, dash)}\n      {el.label ? (\n        <Label cx={el.x + el.w / 2} cy={el.y + el.h / 2} label={el.label} stroke={el.stroke} />\n      ) : null}\n    </g>\n  );\n}\n\nexport function renderEllipse(gen: RoughGenerator, el: EllipseElement): React.ReactNode {\n  const opts = buildOptions(el, el.seed ?? 0);\n  // rough.js ellipse takes center + width + height.\n  const drawable = gen.ellipse(el.x + el.w / 2, el.y + el.h / 2, el.w, el.h, opts);\n  const paths = toRoughPaths(gen, drawable);\n  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);\n  return (\n    <g opacity={el.opacity ?? 1}>\n      {pathsToReactNodes(paths, \"ellipse\", opts.stroke as string, dash)}\n      {el.label ? (\n        <Label cx={el.x + el.w / 2} cy={el.y + el.h / 2} label={el.label} stroke={el.stroke} />\n      ) : null}\n    </g>\n  );\n}\n\nexport function renderDiamond(gen: RoughGenerator, el: DiamondElement): React.ReactNode {\n  const opts = buildOptions(el, el.seed ?? 0);\n  const cx = el.x + el.w / 2;\n  const cy = el.y + el.h / 2;\n  const points: [number, number][] = [\n    [cx, el.y], // top\n    [el.x + el.w, cy], // right\n    [cx, el.y + el.h], // bottom\n    [el.x, cy], // left\n  ];\n  const drawable = gen.polygon(points, opts);\n  const paths = toRoughPaths(gen, drawable);\n  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);\n  return (\n    <g opacity={el.opacity ?? 1}>\n      {pathsToReactNodes(paths, \"diamond\", opts.stroke as string, dash)}\n      {el.label ? <Label cx={cx} cy={cy} label={el.label} stroke={el.stroke} /> : null}\n    </g>\n  );\n}\n"
     },
     {
       "path": "components/primitives/whiteboard/render/line.tsx",

package/dist/chunk-2UJROWAG.js

@@ -1,106 +0,0 @@
-import { cn } from './chunk-ZSRJCIWF.js';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import { forwardRef } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var Overlay2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-background/80",
-      "data-[state=open]:fade-in-0 data-[state=open]:animate-in",
-      "data-[state=closed]:fade-out-0 data-[state=closed]:animate-out",
-      className
-    ),
-    ...props
-  }
-));
-Overlay2.displayName = "Dialog.Overlay";
-var Content2 = forwardRef(
-  ({ className, children, hideCloseButton, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
-    /* @__PURE__ */ jsx(Overlay2, {}),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
-      {
-        ref,
-        className: cn(
-          "-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 w-full max-w-lg",
-          "rounded-2xl border bg-card text-card-foreground shadow-lg",
-          "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in",
-          "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out",
-          "duration-base",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          !hideCloseButton ? /* @__PURE__ */ jsxs(
-            DialogPrimitive.Close,
-            {
-              className: cn(
-                "absolute top-4 right-4 rounded-md p-1 opacity-70",
-                "transition-opacity hover:opacity-100",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
-                "disabled:pointer-events-none"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(X, { className: "size-4" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          ) : null
-        ]
-      }
-    )
-  ] })
-);
-Content2.displayName = "Dialog.Content";
-var Header = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 p-6 pb-3 text-left", className), ...props });
-Header.displayName = "Dialog.Header";
-var Body = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("px-6 pb-6 text-body-md text-muted-foreground", className), ...props });
-Body.displayName = "Dialog.Body";
-var Footer = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn("flex flex-col-reverse gap-2 p-6 pt-3 sm:flex-row sm:justify-end", className),
-    ...props
-  }
-);
-Footer.displayName = "Dialog.Footer";
-var Title2 = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
-    {
-      ref,
-      className: cn("font-display text-foreground text-title-lg tracking-tight", className),
-      ...props
-    }
-  )
-);
-Title2.displayName = "Dialog.Title";
-var Description2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Description,
-  {
-    ref,
-    className: cn("text-body-sm text-muted-foreground", className),
-    ...props
-  }
-));
-Description2.displayName = "Dialog.Description";
-var Dialog = /* @__PURE__ */ Object.assign(DialogPrimitive.Root, {
-  Trigger: DialogPrimitive.Trigger,
-  Close: DialogPrimitive.Close,
-  Content: Content2,
-  Overlay: Overlay2,
-  Header,
-  Body,
-  Footer,
-  Title: Title2,
-  Description: Description2
-});
-
-export { Dialog };
-//# sourceMappingURL=chunk-2UJROWAG.js.map
-//# sourceMappingURL=chunk-2UJROWAG.js.map

package/dist/chunk-2UJROWAG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/primitives/dialog/dialog.tsx"],"names":["Overlay","Content","Title","Description"],"mappings":";;;;;;AA2BA,IAAMA,QAAAA,GAAU,WAGd,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1B,GAAA;AAAA,EAAiB,eAAA,CAAA,OAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,qCAAA;AAAA,MACA,0DAAA;AAAA,MACA,gEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD,CAAA;AACDA,QAAAA,CAAQ,WAAA,GAAc,gBAAA;AAMtB,IAAMC,QAAAA,GAAU,UAAA;AAAA,EACd,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,eAAA,EAAiB,GAAG,KAAA,EAAM,EAAG,GAAA,qBACnD,IAAA,CAAiB,eAAA,CAAA,MAAA,EAAhB,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAACD,UAAA,EAAQ,CAAA;AAAA,oBACT,IAAA;AAAA,MAAiB,eAAA,CAAA,OAAA;AAAA,MAAhB;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,+EAAA;AAAA,UACA,2DAAA;AAAA,UACA,uFAAA;AAAA,UACA,gGAAA;AAAA,UACA,eAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,CAAC,eAAA,mBACA,IAAA;AAAA,YAAiB,eAAA,CAAA,KAAA;AAAA,YAAhB;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,kDAAA;AAAA,gBACA,sCAAA;AAAA,gBACA,oIAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,CAAA,EAAA,EAAE,WAAU,QAAA,EAAS,CAAA;AAAA,gCACtB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,OAAA,EAAK;AAAA;AAAA;AAAA,WACjC,GACE;AAAA;AAAA;AAAA;AACN,GAAA,EACF;AAEJ,CAAA;AACAC,QAAAA,CAAQ,WAAA,GAAc,gBAAA;AAEtB,IAAM,MAAA,GAAS,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,qBACpC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,0CAAA,EAA4C,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAExF,MAAA,CAAO,WAAA,GAAc,eAAA;AAErB,IAAM,IAAA,GAAO,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,qBAClC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,8CAAA,EAAgD,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAE5F,IAAA,CAAK,WAAA,GAAc,aAAA;AAEnB,IAAM,SAAS,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,qBACpC,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA,EAAW,EAAA,CAAG,iEAAA,EAAmE,SAAS,CAAA;AAAA,IACzF,GAAG;AAAA;AACN,CAAA;AAEF,MAAA,CAAO,WAAA,GAAc,eAAA;AAIrB,IAAMC,MAAAA,GAAQ,UAAA;AAAA,EACZ,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxB,GAAA;AAAA,IAAiB,eAAA,CAAA,KAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,2DAAA,EAA6D,SAAS,CAAA;AAAA,MACnF,GAAG;AAAA;AAAA;AAGV,CAAA;AACAA,MAAAA,CAAM,WAAA,GAAc,cAAA;AAEpB,IAAMC,YAAAA,GAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1B,GAAA;AAAA,EAAiB,eAAA,CAAA,WAAA;AAAA,EAAhB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,IAC5D,GAAG;AAAA;AACN,CACD,CAAA;AACDA,YAAAA,CAAY,WAAA,GAAc,oBAAA;AAE1B,IAAM,MAAA,mBAAuB,MAAA,CAAO,MAAA,CAAuB,eAAA,CAAA,IAAA,EAAM;AAAA,EAC/D,OAAA,EAAyB,eAAA,CAAA,OAAA;AAAA,EACzB,KAAA,EAAuB,eAAA,CAAA,KAAA;AAAA,EACvB,OAAA,EAAAF,QAAAA;AAAA,EACA,OAAA,EAAAD,QAAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,EAAAE,MAAAA;AAAA,EACA,WAAA,EAAAC;AACF,CAAC","file":"chunk-2UJROWAG.js","sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * Dialog — modal overlay built on Radix Dialog.\n *\n * Composition:\n *   <Dialog>\n *     <Dialog.Trigger>Open</Dialog.Trigger>\n *     <Dialog.Content>\n *       <Dialog.Header>\n *         <Dialog.Title>…</Dialog.Title>\n *         <Dialog.Description>…</Dialog.Description>\n *       </Dialog.Header>\n *       <Dialog.Body>…</Dialog.Body>\n *       <Dialog.Footer>…</Dialog.Footer>\n *     </Dialog.Content>\n *   </Dialog>\n *\n * Overlay is a theme-neutral backdrop (`bg-background/80`) with no glass blur\n * (anti-glass guideline). Content uses card surface, rounded-2xl, shadow-lg\n * + slight glow on enter.\n */\n\nconst Overlay = forwardRef<\n  ElementRef<typeof DialogPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-background/80\",\n      \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n      className,\n    )}\n    {...props}\n  />\n));\nOverlay.displayName = \"Dialog.Overlay\";\n\ninterface ContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  hideCloseButton?: boolean;\n}\n\nconst Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, ContentProps>(\n  ({ className, children, hideCloseButton, ...props }, ref) => (\n    <DialogPrimitive.Portal>\n      <Overlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          \"-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 w-full max-w-lg\",\n          \"rounded-2xl border bg-card text-card-foreground shadow-lg\",\n          \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n          \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n          \"duration-base\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {!hideCloseButton ? (\n          <DialogPrimitive.Close\n            className={cn(\n              \"absolute top-4 right-4 rounded-md p-1 opacity-70\",\n              \"transition-opacity hover:opacity-100\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n              \"disabled:pointer-events-none\",\n            )}\n          >\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  ),\n);\nContent.displayName = \"Dialog.Content\";\n\nconst Header = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col gap-1.5 p-6 pb-3 text-left\", className)} {...props} />\n);\nHeader.displayName = \"Dialog.Header\";\n\nconst Body = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"px-6 pb-6 text-body-md text-muted-foreground\", className)} {...props} />\n);\nBody.displayName = \"Dialog.Body\";\n\nconst Footer = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"flex flex-col-reverse gap-2 p-6 pt-3 sm:flex-row sm:justify-end\", className)}\n    {...props}\n  />\n);\nFooter.displayName = \"Dialog.Footer\";\n\ntype TitleProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\nconst Title = forwardRef<ElementRef<typeof DialogPrimitive.Title>, TitleProps>(\n  ({ className, ...props }, ref) => (\n    <DialogPrimitive.Title\n      ref={ref}\n      className={cn(\"font-display text-foreground text-title-lg tracking-tight\", className)}\n      {...props}\n    />\n  ),\n);\nTitle.displayName = \"Dialog.Title\";\n\nconst Description = forwardRef<\n  ElementRef<typeof DialogPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-body-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nDescription.displayName = \"Dialog.Description\";\n\nconst Dialog = /*#__PURE__*/ Object.assign(DialogPrimitive.Root, {\n  Trigger: DialogPrimitive.Trigger,\n  Close: DialogPrimitive.Close,\n  Content,\n  Overlay,\n  Header,\n  Body,\n  Footer,\n  Title,\n  Description,\n});\n\nexport { Dialog };\n"]}

package/dist/chunk-2XPWOUEH.js

@@ -1,68 +0,0 @@
-import { cn } from './chunk-ZSRJCIWF.js';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var INTENT_FILL = {
-  default: "bg-primary",
-  success: "bg-success",
-  warning: "bg-warning",
-  destructive: "bg-destructive"
-};
-var Progress = forwardRef(
-  ({
-    className,
-    value = 0,
-    max = 100,
-    intent = "default",
-    height = "h-1",
-    indeterminate = false,
-    ...props
-  }, ref) => {
-    const clampedMax = Math.max(0, max);
-    const clampedValue = Math.min(clampedMax, Math.max(0, value));
-    const percent = clampedMax > 0 ? clampedValue / clampedMax * 100 : 0;
-    const fillClass = INTENT_FILL[intent];
-    return (
-      // biome-ignore lint/a11y/useFocusableInteractive: WAI-ARIA `progressbar` is a status role (https://www.w3.org/TR/wai-aria-1.2/#progressbar) — NOT supposed to be focusable; screen readers announce updates without keyboard navigation.
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref,
-          role: "progressbar",
-          "aria-valuemin": 0,
-          "aria-valuemax": clampedMax,
-          "aria-valuenow": indeterminate ? void 0 : clampedValue,
-          "aria-busy": indeterminate ? true : void 0,
-          className: cn("relative w-full overflow-hidden rounded-full bg-muted", height, className),
-          ...props,
-          children: indeterminate ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "absolute inset-y-0 left-0 w-1/3 rounded-full",
-                "animate-[progress-indeterminate_1.4s_ease-in-out_infinite] motion-reduce:animate-none",
-                "motion-reduce:w-full motion-reduce:opacity-50",
-                fillClass
-              )
-            }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "h-full rounded-full transition-[width] duration-base ease-out-soft",
-                "motion-reduce:transition-none",
-                fillClass
-              ),
-              style: { width: `${percent}%` }
-            }
-          )
-        }
-      )
-    );
-  }
-);
-Progress.displayName = "Progress";
-
-export { Progress };
-//# sourceMappingURL=chunk-2XPWOUEH.js.map
-//# sourceMappingURL=chunk-2XPWOUEH.js.map

package/dist/chunk-2XPWOUEH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/primitives/progress/progress.tsx"],"names":[],"mappings":";;;;AA+CA,IAAM,WAAA,GAAoE;AAAA,EACxE,OAAA,EAAS,YAAA;AAAA,EACT,OAAA,EAAS,YAAA;AAAA,EACT,OAAA,EAAS,YAAA;AAAA,EACT,WAAA,EAAa;AACf,CAAA;AAEA,IAAM,QAAA,GAAW,UAAA;AAAA,EACf,CACE;AAAA,IACE,SAAA;AAAA,IACA,KAAA,GAAQ,CAAA;AAAA,IACR,GAAA,GAAM,GAAA;AAAA,IACN,MAAA,GAAS,SAAA;AAAA,IACT,MAAA,GAAS,KAAA;AAAA,IACT,aAAA,GAAgB,KAAA;AAAA,IAChB,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,GAAG,CAAA;AAClC,IAAA,MAAM,YAAA,GAAe,KAAK,GAAA,CAAI,UAAA,EAAY,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAC,CAAA;AAC5D,IAAA,MAAM,OAAA,GAAU,UAAA,GAAa,CAAA,GAAK,YAAA,GAAe,aAAc,GAAA,GAAM,CAAA;AACrE,IAAA,MAAM,SAAA,GAAY,YAAY,MAAM,CAAA;AAEpC,IAAA;AAAA;AAAA,sBAEE,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAA,EAAK,aAAA;AAAA,UACL,eAAA,EAAe,CAAA;AAAA,UACf,eAAA,EAAe,UAAA;AAAA,UACf,eAAA,EAAe,gBAAgB,MAAA,GAAY,YAAA;AAAA,UAC3C,WAAA,EAAW,gBAAgB,IAAA,GAAO,MAAA;AAAA,UAClC,SAAA,EAAW,EAAA,CAAG,uDAAA,EAAyD,MAAA,EAAQ,SAAS,CAAA;AAAA,UACvF,GAAG,KAAA;AAAA,UAEH,QAAA,EAAA,aAAA,mBACC,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,8CAAA;AAAA,gBACA,uFAAA;AAAA,gBACA,+CAAA;AAAA,gBACA;AAAA;AACF;AAAA,WACF,mBAEA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,oEAAA;AAAA,gBACA,+BAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,OAAO,CAAA,CAAA,CAAA;AAAI;AAAA;AAChC;AAAA;AAEJ;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-2XPWOUEH.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * Progress — accessible progress bar primitive.\n *\n * Built on `<div role=\"progressbar\">` (NOT native `<progress>`) so Tailwind\n * classes can style the track + fill cross-browser (Chrome/Safari/Firefox\n * shadow-DOM hooks for `<progress>` diverge). Matches Radix / shadcn /\n * Mantine convention.\n *\n * Variants:\n *   - intent: `default` | `success` | `warning` | `destructive` — controls fill color\n *   - height: `h-1` (4px, default) | `h-1.5` | `h-2` | `h-3`\n *   - indeterminate: animated bar, no value (e.g. \"uploading…\", \"building…\")\n *\n * Composition:\n *   <Progress value={42} max={100} intent=\"success\" aria-label=\"Upload\" />\n *   <Progress indeterminate aria-label=\"Building\" />\n *\n * A11y:\n *   - role=\"progressbar\"\n *   - aria-valuenow / aria-valuemin / aria-valuemax (determinate)\n *   - aria-busy=\"true\" when indeterminate\n *   - Respects `prefers-reduced-motion` (no animation when set)\n *\n * Used by `<UsageMeter>` to render each metric's fill bar, but ships as a\n * standalone primitive for direct consumer use (deploy phase, file upload,\n * build progress, quota fill).\n */\n\nexport interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /** Current value (0..max). Values outside the range are clamped. */\n  value?: number;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Visual intent — controls fill color. */\n  intent?: \"default\" | \"success\" | \"warning\" | \"destructive\";\n  /** Bar height in tailwind units. Defaults to `\"h-1\"` (4px). */\n  height?: \"h-1\" | \"h-1.5\" | \"h-2\" | \"h-3\";\n  /** When true, animated bar with no value. Omits `aria-valuenow`, adds `aria-busy`. */\n  indeterminate?: boolean;\n  /** Accessible label. Required if not preceded by an `aria-labelledby` element. */\n  \"aria-label\"?: string;\n}\n\nconst INTENT_FILL: Record<NonNullable<ProgressProps[\"intent\"]>, string> = {\n  default: \"bg-primary\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n};\n\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  (\n    {\n      className,\n      value = 0,\n      max = 100,\n      intent = \"default\",\n      height = \"h-1\",\n      indeterminate = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedMax = Math.max(0, max);\n    const clampedValue = Math.min(clampedMax, Math.max(0, value));\n    const percent = clampedMax > 0 ? (clampedValue / clampedMax) * 100 : 0;\n    const fillClass = INTENT_FILL[intent];\n\n    return (\n      // biome-ignore lint/a11y/useFocusableInteractive: WAI-ARIA `progressbar` is a status role (https://www.w3.org/TR/wai-aria-1.2/#progressbar) — NOT supposed to be focusable; screen readers announce updates without keyboard navigation.\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={clampedMax}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-busy={indeterminate ? true : undefined}\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-muted\", height, className)}\n        {...props}\n      >\n        {indeterminate ? (\n          <div\n            className={cn(\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[progress-indeterminate_1.4s_ease-in-out_infinite] motion-reduce:animate-none\",\n              \"motion-reduce:w-full motion-reduce:opacity-50\",\n              fillClass,\n            )}\n          />\n        ) : (\n          <div\n            className={cn(\n              \"h-full rounded-full transition-[width] duration-base ease-out-soft\",\n              \"motion-reduce:transition-none\",\n              fillClass,\n            )}\n            style={{ width: `${percent}%` }}\n          />\n        )}\n      </div>\n    );\n  },\n);\nProgress.displayName = \"Progress\";\n\nexport { Progress };\n"]}

package/dist/chunk-3GHLNCM3.js

@@ -1,42 +0,0 @@
-import { cn } from './chunk-ZSRJCIWF.js';
-import { Clock, Coins, FileEdit } from 'lucide-react';
-import { forwardRef } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var RunStats = forwardRef(
-  ({ className, duration, tokens, filesChanged, ...props }, ref) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex flex-wrap items-center gap-3 font-mono text-code-sm text-muted-foreground",
-        className
-      ),
-      ...props,
-      children: [
-        duration ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(Clock, { className: "size-3", "aria-hidden": "true" }),
-          " ",
-          duration
-        ] }) : null,
-        tokens ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(Coins, { className: "size-3", "aria-hidden": "true" }),
-          " ",
-          tokens,
-          " tokens"
-        ] }) : null,
-        filesChanged !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(FileEdit, { className: "size-3", "aria-hidden": "true" }),
-          " ",
-          filesChanged,
-          " files"
-        ] }) : null
-      ]
-    }
-  )
-);
-RunStats.displayName = "RunStats";
-
-export { RunStats };
-//# sourceMappingURL=chunk-3GHLNCM3.js.map
-//# sourceMappingURL=chunk-3GHLNCM3.js.map

package/dist/chunk-3GHLNCM3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/primitives/run-stats/run-stats.tsx"],"names":[],"mappings":";;;;;AAmBA,IAAM,QAAA,GAAW,UAAA;AAAA,EACf,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,QAAQ,YAAA,EAAc,GAAG,KAAA,EAAM,EAAG,GAAA,qBACxD,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,gFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA,mBACC,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kCAAA,EACd,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,QAAA,EAAS,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,UAAE,GAAA;AAAA,UAAE;AAAA,SAAA,EACnD,CAAA,GACE,IAAA;AAAA,QACH,MAAA,mBACC,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kCAAA,EACd,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,QAAA,EAAS,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,UAAE,GAAA;AAAA,UAAE,MAAA;AAAA,UAAO;AAAA,SAAA,EAC1D,CAAA,GACE,IAAA;AAAA,QACH,YAAA,KAAiB,MAAA,mBAChB,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,kCAAA,EACd,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,QAAA,EAAS,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,UAAE,GAAA;AAAA,UAAE,YAAA;AAAA,UAAa;AAAA,SAAA,EACnE,CAAA,GACE;AAAA;AAAA;AAAA;AAGV;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-3GHLNCM3.js","sourcesContent":["import { Clock, Coins, FileEdit } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\ninterface RunStatsProps extends HTMLAttributes<HTMLDivElement> {\n  duration?: string;\n  /** Formatted token count, e.g. \"35.7k\". */\n  tokens?: string;\n  /** Number of files changed in the run. */\n  filesChanged?: number;\n}\n\n/**\n * RunStats — inline metric row shown after an agent run.\n *\n * Visual: muted bullet-separated row with clock + tokens + files-changed icons.\n * All optional — the component skips entries that aren't provided.\n */\nconst RunStats = forwardRef<HTMLDivElement, RunStatsProps>(\n  ({ className, duration, tokens, filesChanged, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex flex-wrap items-center gap-3 font-mono text-code-sm text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {duration ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <Clock className=\"size-3\" aria-hidden=\"true\" /> {duration}\n        </span>\n      ) : null}\n      {tokens ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <Coins className=\"size-3\" aria-hidden=\"true\" /> {tokens} tokens\n        </span>\n      ) : null}\n      {filesChanged !== undefined ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <FileEdit className=\"size-3\" aria-hidden=\"true\" /> {filesChanged} files\n        </span>\n      ) : null}\n    </div>\n  ),\n);\nRunStats.displayName = \"RunStats\";\n\nexport { RunStats };\n"]}

package/dist/chunk-3HOXC25T.js

@@ -1,48 +0,0 @@
-import { cn } from './chunk-ZSRJCIWF.js';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { cva } from 'class-variance-authority';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var switchVariants = cva(
-  [
-    "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent",
-    "transition-[background-color,box-shadow] duration-base ease-out-soft",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-    "data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_0_8px_hsl(var(--primary)/0.35)]",
-    "data-[state=unchecked]:bg-muted",
-    "disabled:cursor-not-allowed disabled:opacity-50"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-4 w-7",
-        md: "h-5 w-9",
-        lg: "h-6 w-11"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var thumbClassBySize = {
-  sm: "size-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0.5",
-  md: "size-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
-  lg: "size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5"
-};
-var Switch = forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitive.Root, { ref, className: cn(switchVariants({ size }), className), ...props, children: /* @__PURE__ */ jsx(
-    SwitchPrimitive.Thumb,
-    {
-      className: cn(
-        "pointer-events-none block rounded-full bg-card shadow-sm",
-        "transition-transform duration-base ease-out-soft",
-        thumbClassBySize[size ?? "md"]
-      )
-    }
-  ) })
-);
-Switch.displayName = "Switch";
-
-export { Switch };
-//# sourceMappingURL=chunk-3HOXC25T.js.map
-//# sourceMappingURL=chunk-3HOXC25T.js.map

package/dist/chunk-3HOXC25T.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/primitives/switch/switch.tsx"],"names":[],"mappings":";;;;;;AAgBA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB;AAAA,IACE,8FAAA;AAAA,IACA,sEAAA;AAAA,IACA,0IAAA;AAAA,IACA,gGAAA;AAAA,IACA,iCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA;AAAK;AAElC,CAAA;AAEA,IAAM,gBAAA,GAA6F;AAAA,EACjG,EAAA,EAAI,kFAAA;AAAA,EACJ,EAAA,EAAI,kFAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAMA,IAAM,MAAA,GAAS,UAAA;AAAA,EACb,CAAC,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC9B,GAAA,CAAiB,eAAA,CAAA,IAAA,EAAhB,EAAqB,KAAU,SAAA,EAAW,EAAA,CAAG,eAAe,EAAE,IAAA,EAAM,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EACtF,QAAA,kBAAA,GAAA;AAAA,IAAiB,eAAA,CAAA,KAAA;AAAA,IAAhB;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,0DAAA;AAAA,QACA,kDAAA;AAAA,QACA,gBAAA,CAAiB,QAAQ,IAAI;AAAA;AAC/B;AAAA,GACF,EACF;AAEJ;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-3HOXC25T.js","sourcesContent":["import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * Switch — built on Radix Switch. Used for binary toggles (autoaccept,\n * dark mode preview, feature flags).\n *\n * Off-state uses --muted, on-state uses --primary with a subtle glow shadow\n * to mark \"this is active\" in the violet brand language.\n *\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 20×36 track from before this prop existed.\n */\nconst switchVariants = cva(\n  [\n    \"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent\",\n    \"transition-[background-color,box-shadow] duration-base ease-out-soft\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    \"data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_0_8px_hsl(var(--primary)/0.35)]\",\n    \"data-[state=unchecked]:bg-muted\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-7\",\n        md: \"h-5 w-9\",\n        lg: \"h-6 w-11\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst thumbClassBySize: Record<NonNullable<VariantProps<typeof switchVariants>[\"size\"]>, string> = {\n  sm: \"size-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0.5\",\n  md: \"size-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5\",\n  lg: \"size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5\",\n};\n\ninterface SwitchProps\n  extends ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n    VariantProps<typeof switchVariants> {}\n\nconst Switch = forwardRef<ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(\n  ({ className, size, ...props }, ref) => (\n    <SwitchPrimitive.Root ref={ref} className={cn(switchVariants({ size }), className)} {...props}>\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block rounded-full bg-card shadow-sm\",\n          \"transition-transform duration-base ease-out-soft\",\n          thumbClassBySize[size ?? \"md\"],\n        )}\n      />\n    </SwitchPrimitive.Root>\n  ),\n);\nSwitch.displayName = \"Switch\";\n\nexport { Switch, switchVariants };\n"]}