@usetheo/ui 0.13.0 → 0.13.1

package/dist/chunk-5XCTTXC3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/choice-prompt/choice-prompt.tsx"],"names":[],"mappings":"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","file":"chunk-5XCTTXC3.js","sourcesContent":["\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport {\n  OTHER_OPTION_VALUE,\n  type PromptOption,\n  digitKeyToIndex,\n  isOtherValue,\n} from \"../../../lib/prompt.js\";\nimport { Badge } from \"../../primitives/badge/index.js\";\nimport { Button } from \"../../primitives/button/index.js\";\nimport { Input } from \"../../primitives/input/index.js\";\nimport { Label } from \"../../primitives/label/index.js\";\nimport { RadioGroup } from \"../../primitives/radio-group/index.js\";\n\n/**\n * ChoicePrompt — single-select \"ask the user\" card for agent surfaces.\n *\n * Mirrors the UX of Claude Code's question card: a question with an optional\n * header chip, a list of options each carrying a label + description, optional\n * number-key shortcuts (terminal-style `1`..`9` selection), an injectable\n * free-text \"Other\" option, and a side-by-side preview pane when options carry\n * preview content.\n *\n * Renders one question at a time — sequencing across multiple questions is the\n * consumer's responsibility (there is no built-in flow orchestrator).\n *\n * Controlled or uncontrolled: pass `value` + `onValueChange` to control the\n * selection, or `defaultValue` to let the component own it. Same for the Other\n * text via `otherText` / `onOtherTextChange`.\n */\n\n/** Payload handed to `onConfirm`. */\nexport interface ChoicePromptResult {\n  /** The selected option value (or the reserved Other value). */\n  value: string;\n  /** Present only when the selected value is the synthesized Other option. */\n  otherText?: string;\n}\n\nexport interface ChoicePromptProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n  /** The question being asked. */\n  question: ReactNode;\n  /** Optional secondary line under the question. */\n  description?: ReactNode;\n  /** Optional short header chip (rendered as a Badge), e.g. \"Deploy\". */\n  badge?: ReactNode;\n  /** The selectable options. */\n  options: PromptOption[];\n  /** Controlled selected value. */\n  value?: string;\n  /** Initial selected value when uncontrolled. */\n  defaultValue?: string;\n  /** Fired with the option value whenever the selection changes. */\n  onValueChange?: (value: string) => void;\n  /** Inject a free-text \"Other\" option as the last row. */\n  allowOther?: boolean;\n  /** Label for the Other row. Defaults to \"Other\". */\n  otherLabel?: ReactNode;\n  /** Placeholder for the Other text field. */\n  otherPlaceholder?: string;\n  /** Controlled Other text. */\n  otherText?: string;\n  /** Fired with the Other text on every keystroke. */\n  onOtherTextChange?: (text: string) => void;\n  /** Enable `1`..`9` number-key selection. Default true. */\n  enableKeyboardShortcuts?: boolean;\n  /** Show the `1`..`9` hint chips next to options. Defaults to the shortcut flag. */\n  showNumbers?: boolean;\n  /** Confirm button label. Defaults to \"Confirm\". Omit `onConfirm` to hide it. */\n  confirmLabel?: ReactNode;\n  /** Cancel button label. Defaults to \"Cancel\". Omit `onCancel` to hide it. */\n  cancelLabel?: ReactNode;\n  /** Pressing Confirm. Receives the selection (and Other text when relevant). */\n  onConfirm?: (result: ChoicePromptResult) => void;\n  /** Pressing Cancel. */\n  onCancel?: () => void;\n}\n\nconst ChoicePrompt = forwardRef<HTMLElement, ChoicePromptProps>(\n  (\n    {\n      className,\n      question,\n      description,\n      badge,\n      options,\n      value,\n      defaultValue,\n      onValueChange,\n      allowOther = false,\n      otherLabel = \"Other\",\n      otherPlaceholder = \"Type your answer…\",\n      otherText,\n      onOtherTextChange,\n      enableKeyboardShortcuts = true,\n      showNumbers,\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      onConfirm,\n      onCancel,\n      ...props\n    },\n    ref,\n  ) => {\n    const baseId = useId();\n    const questionId = `${baseId}-question`;\n    const optionId = (value_: string): string => `${baseId}-opt-${value_}`;\n\n    const [internalValue, setInternalValue] = useState<string | undefined>(defaultValue);\n    const selected = value !== undefined ? value : internalValue;\n\n    const [internalOther, setInternalOther] = useState(\"\");\n    const otherValue = otherText !== undefined ? otherText : internalOther;\n\n    const numbersVisible = showNumbers ?? enableKeyboardShortcuts;\n    const hasPreview = options.some((option) => option.preview != null);\n    const selectedPreview = options.find((option) => option.value === selected)?.preview;\n\n    const select = (next: string): void => {\n      if (value === undefined) setInternalValue(next);\n      onValueChange?.(next);\n    };\n\n    const setOther = (next: string): void => {\n      if (otherText === undefined) setInternalOther(next);\n      onOtherTextChange?.(next);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLElement>): void => {\n      if (!enableKeyboardShortcuts) return;\n      const target = event.target as HTMLElement;\n      // Never hijack digits typed into a form field (e.g. the Other input).\n      if (target.tagName === \"INPUT\" || target.tagName === \"TEXTAREA\") return;\n      const index = digitKeyToIndex(event.key);\n      if (index === null || index >= options.length) return;\n      const option = options[index];\n      if (!option || option.disabled) return;\n      event.preventDefault();\n      select(option.value);\n    };\n\n    const confirm = (): void => {\n      if (!selected) return;\n      onConfirm?.(\n        isOtherValue(selected) ? { value: selected, otherText: otherValue } : { value: selected },\n      );\n    };\n\n    return (\n      <section\n        data-slot=\"choice-prompt\"\n        ref={ref}\n        aria-labelledby={questionId}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"grid w-full gap-4 rounded-xl border bg-card p-5 text-card-foreground shadow-md\",\n          \"transition-shadow duration-base ease-out-soft\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <h3 id={questionId} className=\"font-display text-foreground text-title-md tracking-tight\">\n            {question}\n          </h3>\n          {badge != null ? (\n            <Badge variant=\"primary\" size=\"sm\" className=\"shrink-0\">\n              {badge}\n            </Badge>\n          ) : null}\n        </header>\n        {description != null ? (\n          <p className=\"text-body-sm text-muted-foreground\">{description}</p>\n        ) : null}\n\n        <div className={cn(\"grid gap-5\", hasPreview && \"md:grid-cols-2\")}>\n          <RadioGroup\n            aria-labelledby={questionId}\n            value={selected ?? \"\"}\n            onValueChange={select}\n            className=\"gap-2\"\n          >\n            {options.map((option, index) => (\n              <div key={option.value} className=\"flex items-start gap-3\">\n                <RadioGroup.Item\n                  value={option.value}\n                  id={optionId(option.value)}\n                  disabled={option.disabled}\n                  className=\"mt-0.5\"\n                />\n                <Label\n                  htmlFor={optionId(option.value)}\n                  className=\"flex flex-1 cursor-pointer flex-col items-start gap-0.5\"\n                >\n                  <span className=\"text-body-md text-foreground\">{option.label}</span>\n                  {option.description != null ? (\n                    <span className=\"text-body-sm text-muted-foreground\">{option.description}</span>\n                  ) : null}\n                </Label>\n                {numbersVisible && index < 9 ? (\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"mt-0.5 shrink-0 rounded border border-border bg-muted px-1.5 font-mono text-label text-muted-foreground\"\n                  >\n                    {index + 1}\n                  </span>\n                ) : null}\n              </div>\n            ))}\n\n            {allowOther ? (\n              <div className=\"flex flex-col gap-2 border-border/40 border-t pt-2\">\n                <div className=\"flex items-start gap-3\">\n                  <RadioGroup.Item\n                    value={OTHER_OPTION_VALUE}\n                    id={optionId(OTHER_OPTION_VALUE)}\n                    className=\"mt-0.5\"\n                  />\n                  <Label\n                    htmlFor={optionId(OTHER_OPTION_VALUE)}\n                    className=\"flex-1 cursor-pointer text-body-md\"\n                  >\n                    {otherLabel}\n                  </Label>\n                </div>\n                {isOtherValue(selected) ? (\n                  <Input\n                    size=\"sm\"\n                    aria-label={typeof otherLabel === \"string\" ? otherLabel : \"Other\"}\n                    placeholder={otherPlaceholder}\n                    value={otherValue}\n                    onChange={(event) => setOther(event.target.value)}\n                    className=\"ml-7\"\n                  />\n                ) : null}\n              </div>\n            ) : null}\n          </RadioGroup>\n\n          {hasPreview ? (\n            <div className=\"rounded-lg border border-border/60 bg-muted/40 p-3\">\n              <p className=\"mb-2 font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Preview\n              </p>\n              {selectedPreview != null ? (\n                <div className=\"whitespace-pre-wrap break-words font-mono text-code-sm text-foreground\">\n                  {selectedPreview}\n                </div>\n              ) : (\n                <p className=\"text-body-sm text-muted-foreground\">Select an option to preview.</p>\n              )}\n            </div>\n          ) : null}\n        </div>\n\n        {onConfirm || onCancel ? (\n          <footer className=\"flex items-center justify-end gap-2\">\n            {onCancel ? (\n              <Button size=\"sm\" variant=\"secondary\" onClick={onCancel}>\n                {cancelLabel}\n              </Button>\n            ) : null}\n            {onConfirm ? (\n              <Button size=\"sm\" variant=\"primary\" disabled={!selected} onClick={confirm}>\n                {confirmLabel}\n              </Button>\n            ) : null}\n          </footer>\n        ) : null}\n      </section>\n    );\n  },\n);\nChoicePrompt.displayName = \"ChoicePrompt\";\n\nexport { ChoicePrompt };\n"]}

package/dist/chunk-624AATQZ.js

@@ -0,0 +1,77 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var badgeVariants = cva(
+  [
+    "inline-flex items-center gap-1.5 rounded-full border",
+    "font-sans uppercase tracking-wider",
+    "transition-colors"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-border/40 bg-muted text-muted-foreground",
+        primary: "border-primary/30 bg-primary/10 text-primary",
+        accent: "border-accent/40 bg-accent/15 text-accent",
+        success: "border-success/40 bg-success/15 text-success",
+        warning: "border-warning/40 bg-warning/15 text-warning",
+        destructive: "border-destructive/40 bg-destructive/15 text-destructive",
+        outline: "border-border bg-transparent text-foreground"
+      },
+      size: {
+        sm: "px-2 py-0.5 text-label-caps",
+        md: "px-2.5 py-0.5 text-label",
+        lg: "px-3 py-1 text-body-md"
+      }
+    },
+    defaultVariants: { variant: "default", size: "md" }
+  }
+);
+var Badge = forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      "data-size": size,
+      ref,
+      className: cn(badgeVariants({ variant, size }), className),
+      ...props
+    }
+  )
+);
+Badge.displayName = "Badge";
+var toneClass = {
+  primary: "bg-primary",
+  accent: "bg-accent",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  muted: "bg-muted-foreground"
+};
+var Dot = forwardRef(
+  ({ className, pulse = false, tone = "success", ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "badge-dot",
+      ref,
+      "aria-hidden": "true",
+      className: cn(
+        "inline-block size-1.5 rounded-full",
+        toneClass[tone],
+        pulse && "animate-pulse-glow",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Dot.displayName = "Badge.Dot";
+var BadgeWithDot = Badge;
+BadgeWithDot.Dot = Dot;
+
+export { BadgeWithDot, badgeVariants };
+//# sourceMappingURL=chunk-624AATQZ.js.map
+//# sourceMappingURL=chunk-624AATQZ.js.map

package/dist/chunk-624AATQZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/badge/badge.tsx"],"names":[],"mappings":";;;;;AAoBA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACpB;AAAA,IACE,sDAAA;AAAA,IACA,oCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,iDAAA;AAAA,QACT,OAAA,EAAS,8CAAA;AAAA,QACT,MAAA,EAAQ,2CAAA;AAAA,QACR,OAAA,EAAS,8CAAA;AAAA,QACT,OAAA,EAAS,8CAAA;AAAA,QACT,WAAA,EAAa,0DAAA;AAAA,QACb,OAAA,EAAS;AAAA,OACX;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,6BAAA;AAAA,QACJ,EAAA,EAAI,0BAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA,EAAW,MAAM,IAAA;AAAK;AAEtD;AAMA,IAAM,KAAA,GAAQ,UAAA;AAAA,EACZ,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,MAAM,GAAG,KAAA,IAAS,GAAA,qBACvC,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,OAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,GAAA;AAAA,MACA,SAAA,EAAW,GAAG,aAAA,CAAc,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACxD,GAAG;AAAA;AAAA;AAGV,CAAA;AACA,KAAA,CAAM,WAAA,GAAc,OAAA;AAOpB,IAAM,SAAA,GAAgE;AAAA,EACpE,OAAA,EAAS,YAAA;AAAA,EACT,MAAA,EAAQ,WAAA;AAAA,EACR,OAAA,EAAS,YAAA;AAAA,EACT,OAAA,EAAS,YAAA;AAAA,EACT,WAAA,EAAa,gBAAA;AAAA,EACb,KAAA,EAAO;AACT,CAAA;AAEA,IAAM,GAAA,GAAM,UAAA;AAAA,EACV,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,KAAA,EAAO,OAAO,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBACzD,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,GAAA;AAAA,MACA,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAU,IAAI,CAAA;AAAA,QACd,KAAA,IAAS,oBAAA;AAAA,QACT;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA;AAGV,CAAA;AACA,GAAA,CAAI,WAAA,GAAc,WAAA;AAElB,IAAM,YAAA,GAAe;AACrB,YAAA,CAAa,GAAA,GAAM,GAAA","file":"chunk-624AATQZ.js","sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * Badge — small status / tag indicator.\n *\n * Variants:\n *   - default     muted surface, hairline border\n *   - primary     violet outline + soft violet bg\n *   - accent      burnt sienna (celebration / pro / beta)\n *   - success     deploy succeeded\n *   - warning     attention needed\n *   - destructive failed\n *   - outline     transparent, just border\n *\n * Status dots are inlined via `<Badge.Dot />` for things like \"Building…\",\n * \"Running\", \"Failed\" rows in deployment lists.\n */\nconst badgeVariants = cva(\n  [\n    \"inline-flex items-center gap-1.5 rounded-full border\",\n    \"font-sans uppercase tracking-wider\",\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border-border/40 bg-muted text-muted-foreground\",\n        primary: \"border-primary/30 bg-primary/10 text-primary\",\n        accent: \"border-accent/40 bg-accent/15 text-accent\",\n        success: \"border-success/40 bg-success/15 text-success\",\n        warning: \"border-warning/40 bg-warning/15 text-warning\",\n        destructive: \"border-destructive/40 bg-destructive/15 text-destructive\",\n        outline: \"border-border bg-transparent text-foreground\",\n      },\n      size: {\n        sm: \"px-2 py-0.5 text-label-caps\",\n        md: \"px-2.5 py-0.5 text-label\",\n        lg: \"px-3 py-1 text-body-md\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"md\" },\n  },\n);\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant, size, ...props }, ref) => (\n    <span\n      data-slot=\"badge\"\n      data-variant={variant}\n      data-size={size}\n      ref={ref}\n      className={cn(badgeVariants({ variant, size }), className)}\n      {...props}\n    />\n  ),\n);\nBadge.displayName = \"Badge\";\n\ninterface BadgeDotProps extends HTMLAttributes<HTMLSpanElement> {\n  pulse?: boolean;\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"destructive\" | \"muted\";\n}\n\nconst toneClass: Record<NonNullable<BadgeDotProps[\"tone\"]>, string> = {\n  primary: \"bg-primary\",\n  accent: \"bg-accent\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n  muted: \"bg-muted-foreground\",\n};\n\nconst Dot = forwardRef<HTMLSpanElement, BadgeDotProps>(\n  ({ className, pulse = false, tone = \"success\", ...props }, ref) => (\n    <span\n      data-slot=\"badge-dot\"\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(\n        \"inline-block size-1.5 rounded-full\",\n        toneClass[tone],\n        pulse && \"animate-pulse-glow\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDot.displayName = \"Badge.Dot\";\n\nconst BadgeWithDot = Badge as typeof Badge & { Dot: typeof Dot };\nBadgeWithDot.Dot = Dot;\n\nexport { BadgeWithDot as Badge, badgeVariants };\n"]}

package/dist/chunk-6IODJQWC.js

@@ -0,0 +1,47 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SocialAuthRow = forwardRef(
+  ({ className, providers, onSelect, vertical, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "social-auth-row",
+      ref,
+      className: cn(
+        "grid gap-2",
+        vertical ? "grid-cols-1" : `grid-cols-${Math.min(providers.length, 4)}`,
+        className
+      ),
+      style: !vertical ? { gridTemplateColumns: `repeat(${providers.length}, minmax(0, 1fr))` } : void 0,
+      ...props,
+      children: providers.map((p) => {
+        const Icon = p.icon;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect?.(p.id),
+            className: cn(
+              "inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-border bg-card",
+              "px-4 font-medium font-sans text-body-sm text-foreground",
+              "transition-colors duration-base ease-out-soft",
+              "hover:bg-muted",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }),
+              p.label
+            ]
+          },
+          p.id
+        );
+      })
+    }
+  )
+);
+SocialAuthRow.displayName = "SocialAuthRow";
+
+export { SocialAuthRow };
+//# sourceMappingURL=chunk-6IODJQWC.js.map
+//# sourceMappingURL=chunk-6IODJQWC.js.map

package/dist/chunk-6IODJQWC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/social-auth-row/social-auth-row.tsx"],"names":[],"mappings":";;;;AA2BA,IAAM,aAAA,GAAgB,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,SAAA,EAAW,UAAU,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACvD,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,YAAA;AAAA,QACA,QAAA,GAAW,gBAAgB,CAAA,UAAA,EAAa,IAAA,CAAK,IAAI,SAAA,CAAU,MAAA,EAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,QACrE;AAAA,OACF;AAAA,MACA,KAAA,EACE,CAAC,QAAA,GACG,EAAE,qBAAqB,CAAA,OAAA,EAAU,SAAA,CAAU,MAAM,CAAA,iBAAA,CAAA,EAAoB,GACrE,MAAA;AAAA,MAEL,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,SAAA,CAAU,GAAA,CAAI,CAAC,CAAA,KAAM;AACpB,QAAA,MAAM,OAAO,CAAA,CAAE,IAAA;AACf,QAAA,uBACE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,QAAA,GAAW,CAAA,CAAE,EAAE,CAAA;AAAA,YAC9B,SAAA,EAAW,EAAA;AAAA,cACT,4FAAA;AAAA,cACA,yDAAA;AAAA,cACA,+CAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,cAC3C,CAAA,CAAE;AAAA;AAAA,WAAA;AAAA,UAZE,CAAA,CAAE;AAAA,SAaT;AAAA,MAEJ,CAAC;AAAA;AAAA;AAGP;AACA,aAAA,CAAc,WAAA,GAAc,eAAA","file":"chunk-6IODJQWC.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\n\nexport interface SocialProvider {\n  id: string;\n  label: ReactNode;\n  /** Icon component (e.g. brand-specific SVG). */\n  icon: IconComponent;\n}\n\ninterface SocialAuthRowProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  providers: SocialProvider[];\n  onSelect?: (id: string) => void;\n  /**\n   * Stack vertically instead of horizontally (single-column flow).\n   */\n  vertical?: boolean;\n}\n\n/**\n * SocialAuthRow — row of OAuth provider buttons.\n *\n * Stateless; caller wires the redirect on `onSelect`. Buttons share Theo button\n * styling but with provider icon prominently on the left.\n */\nconst SocialAuthRow = forwardRef<HTMLDivElement, SocialAuthRowProps>(\n  ({ className, providers, onSelect, vertical, ...props }, ref) => (\n    <div\n      data-slot=\"social-auth-row\"\n      ref={ref}\n      className={cn(\n        \"grid gap-2\",\n        vertical ? \"grid-cols-1\" : `grid-cols-${Math.min(providers.length, 4)}`,\n        className,\n      )}\n      style={\n        !vertical\n          ? { gridTemplateColumns: `repeat(${providers.length}, minmax(0, 1fr))` }\n          : undefined\n      }\n      {...props}\n    >\n      {providers.map((p) => {\n        const Icon = p.icon;\n        return (\n          <button\n            key={p.id}\n            type=\"button\"\n            onClick={() => onSelect?.(p.id)}\n            className={cn(\n              \"inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-border bg-card\",\n              \"px-4 font-medium font-sans text-body-sm text-foreground\",\n              \"transition-colors duration-base ease-out-soft\",\n              \"hover:bg-muted\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n            )}\n          >\n            <Icon className=\"size-4\" aria-hidden=\"true\" />\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  ),\n);\nSocialAuthRow.displayName = \"SocialAuthRow\";\n\nexport { SocialAuthRow };\n"]}

package/dist/chunk-75IDWFYX.js

@@ -0,0 +1,134 @@
+"use client";
+import { cn } from './chunk-EWDN56AS.js';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ScrollAreaRoot = forwardRef(
+  ({ className, children, orientation = "vertical", size = "thin", type = "hover", ...props }, ref) => /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      ref,
+      type,
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            className: cn(
+              "h-full w-full rounded-[inherit]",
+              // Smooth scroll-behavior + masked overflow inheriting any inner radius
+              "[&>div]:!block"
+            ),
+            children
+          }
+        ),
+        orientation === "vertical" || orientation === "both" ? /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical", size }) : null,
+        orientation === "horizontal" || orientation === "both" ? /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal", size }) : null,
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, { className: "bg-transparent" })
+      ]
+    }
+  )
+);
+ScrollAreaRoot.displayName = "ScrollArea";
+var ScrollBar = forwardRef(({ className, orientation = "vertical", size = "thin", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    "data-slot": "scroll-area-bar",
+    ref,
+    orientation,
+    className: cn(
+      "z-10 flex touch-none select-none p-0.5 transition-[width,height,background-color] duration-base ease-out-soft",
+      // hover state slightly lifts the track with a near-invisible violet wash
+      "hover:bg-primary/5",
+      orientation === "vertical" && (size === "thin" ? "h-full w-2.5 border-l border-l-transparent" : "h-full w-3 border-l border-l-transparent"),
+      orientation === "horizontal" && (size === "thin" ? "h-2.5 w-full flex-col border-t border-t-transparent" : "h-3 w-full flex-col border-t border-t-transparent"),
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      ScrollAreaPrimitive.ScrollAreaThumb,
+      {
+        className: cn(
+          "relative flex-1 rounded-full bg-primary/30",
+          "transition-[background-color,box-shadow] duration-fast ease-out-soft",
+          // Theme-aware: glow uses --primary (recolors when theme switches)
+          "hover:bg-primary/55 hover:shadow-[0_0_8px_hsl(var(--primary)/0.35)]",
+          // Drag state uses Radix data-state="visible" + :active
+          "active:bg-primary/75 data-[state=visible]:bg-primary/45"
+        )
+      }
+    )
+  }
+));
+ScrollBar.displayName = "ScrollArea.Bar";
+var ScrollArea = /* @__PURE__ */ Object.assign(ScrollAreaRoot, { Bar: ScrollBar });
+function isNearBottom(metrics, threshold) {
+  return metrics.scrollHeight - metrics.clientHeight - metrics.scrollTop <= threshold;
+}
+function resolveViewport(node) {
+  return node.querySelector("[data-radix-scroll-area-viewport]") ?? node;
+}
+function readMetrics(el) {
+  return { scrollTop: el.scrollTop, scrollHeight: el.scrollHeight, clientHeight: el.clientHeight };
+}
+var DEFAULT_THRESHOLD = 32;
+function useStickToBottom(options = {}) {
+  const threshold = options.threshold ?? DEFAULT_THRESHOLD;
+  const viewportRef = useRef(null);
+  const pinnedRef = useRef(true);
+  const cleanupRef = useRef(null);
+  const [isPinned, setIsPinned] = useState(true);
+  const scrollToBottom = useCallback(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+    pinnedRef.current = true;
+    setIsPinned(true);
+  }, []);
+  const scrollRef = useCallback(
+    (node) => {
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+      if (node === null) {
+        viewportRef.current = null;
+        return;
+      }
+      const vp = resolveViewport(node);
+      viewportRef.current = vp;
+      const updatePinned = () => {
+        const pinned = isNearBottom(readMetrics(vp), threshold);
+        pinnedRef.current = pinned;
+        setIsPinned(pinned);
+      };
+      const onScroll = () => updatePinned();
+      const onGrow = () => {
+        if (pinnedRef.current) vp.scrollTop = vp.scrollHeight;
+      };
+      vp.addEventListener("scroll", onScroll, { passive: true });
+      updatePinned();
+      onGrow();
+      const mutationObserver = new MutationObserver(onGrow);
+      mutationObserver.observe(vp, { childList: true, subtree: true, characterData: true });
+      let resizeObserver;
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(onGrow);
+        resizeObserver.observe(vp);
+      }
+      cleanupRef.current = () => {
+        vp.removeEventListener("scroll", onScroll);
+        mutationObserver.disconnect();
+        resizeObserver?.disconnect();
+      };
+    },
+    [threshold]
+  );
+  useEffect(() => () => cleanupRef.current?.(), []);
+  return { scrollRef, isPinned, scrollToBottom };
+}
+
+export { ScrollArea, isNearBottom, useStickToBottom };
+//# sourceMappingURL=chunk-75IDWFYX.js.map
+//# sourceMappingURL=chunk-75IDWFYX.js.map

package/dist/chunk-75IDWFYX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/scroll-area/scroll-area.tsx","../src/components/primitives/scroll-area/use-stick-to-bottom.ts"],"names":[],"mappings":"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","file":"chunk-75IDWFYX.js","sourcesContent":["import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * ScrollArea — custom scroller with Violet Forge styling.\n *\n * Built on Radix ScrollArea so the native scrollbar is always hidden and the\n * custom thumb stays consistent across Chrome/Firefox/Safari/macOS-trackpad.\n *\n * Visual:\n *   - track is transparent, only the thumb is visible.\n *   - thumb is `--primary` at 25% opacity by default; on hover, 45% with violet glow.\n *   - active drag bumps to 60%.\n *   - the rounded full pill thumb plays well with the brutalist border language\n *     but stays subtle (1.5px wide on rest, 3px on hover).\n *\n * Modes (via `type`):\n *   - \"hover\" (default)  — scrollbar fades in on hover/focus, otherwise hidden.\n *   - \"always\"           — scrollbar always visible.\n *   - \"auto\"             — scrollbar visible only when content overflows.\n *   - \"scroll\"           — Radix-managed: visible only while scrolling.\n */\n\ninterface ScrollAreaProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\n  /**\n   * Optional override for which scrollbar(s) to render.\n   * Defaults: vertical only. Set to \"both\" for grids/tables with overflow-x.\n   */\n  orientation?: \"vertical\" | \"horizontal\" | \"both\";\n  /**\n   * Thickness of the scrollbar. Default \"thin\" (2.5px → 3.5px on hover).\n   * Use \"regular\" (8px) for content where the scrollbar should be a more prominent target.\n   */\n  size?: \"thin\" | \"regular\";\n}\n\nconst ScrollAreaRoot = forwardRef<ElementRef<typeof ScrollAreaPrimitive.Root>, ScrollAreaProps>(\n  (\n    { className, children, orientation = \"vertical\", size = \"thin\", type = \"hover\", ...props },\n    ref,\n  ) => (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      ref={ref}\n      type={type}\n      className={cn(\"relative overflow-hidden\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full w-full rounded-[inherit]\",\n          // Smooth scroll-behavior + masked overflow inheriting any inner radius\n          \"[&>div]:!block\",\n        )}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      {orientation === \"vertical\" || orientation === \"both\" ? (\n        <ScrollBar orientation=\"vertical\" size={size} />\n      ) : null}\n      {orientation === \"horizontal\" || orientation === \"both\" ? (\n        <ScrollBar orientation=\"horizontal\" size={size} />\n      ) : null}\n      <ScrollAreaPrimitive.Corner className=\"bg-transparent\" />\n    </ScrollAreaPrimitive.Root>\n  ),\n);\nScrollAreaRoot.displayName = \"ScrollArea\";\n\ninterface ScrollBarProps\n  extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> {\n  size?: \"thin\" | \"regular\";\n}\n\nconst ScrollBar = forwardRef<\n  ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  ScrollBarProps\n>(({ className, orientation = \"vertical\", size = \"thin\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    data-slot=\"scroll-area-bar\"\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"z-10 flex touch-none select-none p-0.5 transition-[width,height,background-color] duration-base ease-out-soft\",\n      // hover state slightly lifts the track with a near-invisible violet wash\n      \"hover:bg-primary/5\",\n      orientation === \"vertical\" &&\n        (size === \"thin\"\n          ? \"h-full w-2.5 border-l border-l-transparent\"\n          : \"h-full w-3 border-l border-l-transparent\"),\n      orientation === \"horizontal\" &&\n        (size === \"thin\"\n          ? \"h-2.5 w-full flex-col border-t border-t-transparent\"\n          : \"h-3 w-full flex-col border-t border-t-transparent\"),\n      className,\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn(\n        \"relative flex-1 rounded-full bg-primary/30\",\n        \"transition-[background-color,box-shadow] duration-fast ease-out-soft\",\n        // Theme-aware: glow uses --primary (recolors when theme switches)\n        \"hover:bg-primary/55 hover:shadow-[0_0_8px_hsl(var(--primary)/0.35)]\",\n        // Drag state uses Radix data-state=\"visible\" + :active\n        \"active:bg-primary/75 data-[state=visible]:bg-primary/45\",\n      )}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\nScrollBar.displayName = \"ScrollArea.Bar\";\n\n// Compound assembly. `ScrollArea.Bar` is the only public surface for the\n// scroll bar. The previous standalone `ScrollBar` re-export was deprecated\n// theater in v0.0.0 (no public consumers exist on a pre-published package),\n// so it was removed cleanly in T7.4 (agent-team-audit-fixes plan).\nconst ScrollArea = /*#__PURE__*/ Object.assign(ScrollAreaRoot, { Bar: ScrollBar });\n\nexport { ScrollArea };\n","\"use client\";\n\n/**\n * `useStickToBottom` (M5-5) — auto-scroll a scroll container to the bottom when\n * its content grows, but ONLY while the user is pinned near the bottom (so it\n * never yanks the view away while they read history). Encapsulates the leaked\n * `[data-radix-scroll-area-viewport]` selector: attach `scrollRef` to a\n * `<ScrollArea>` (or any element) and the hook resolves the real scrollable\n * node internally.\n *\n * Content growth (streamed messages/tokens) is detected with a `MutationObserver`\n * — a scroll container's own box does not resize when content grows inside it, so\n * a ResizeObserver alone would miss it. A `ResizeObserver` is added on top (when\n * available) to also catch box-size changes such as an image finishing load.\n */\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport interface StickToBottomMetrics {\n  scrollTop: number;\n  scrollHeight: number;\n  clientHeight: number;\n}\n\n/** Pure: is the scroll position within `threshold` px of the bottom? */\nexport function isNearBottom(metrics: StickToBottomMetrics, threshold: number): boolean {\n  return metrics.scrollHeight - metrics.clientHeight - metrics.scrollTop <= threshold;\n}\n\nexport interface UseStickToBottomOptions {\n  /** Px distance from the bottom under which the view is considered pinned. */\n  threshold?: number;\n}\n\nexport interface UseStickToBottomReturn<T extends HTMLElement = HTMLElement> {\n  /** Attach to the `<ScrollArea>` root (or any element). */\n  scrollRef: (node: T | null) => void;\n  /** Whether the view is currently pinned near the bottom. */\n  isPinned: boolean;\n  /** Force-scroll to the bottom and re-pin. */\n  scrollToBottom: () => void;\n}\n\nfunction resolveViewport(node: HTMLElement): HTMLElement {\n  return node.querySelector<HTMLElement>(\"[data-radix-scroll-area-viewport]\") ?? node;\n}\n\nfunction readMetrics(el: HTMLElement): StickToBottomMetrics {\n  return { scrollTop: el.scrollTop, scrollHeight: el.scrollHeight, clientHeight: el.clientHeight };\n}\n\nconst DEFAULT_THRESHOLD = 32;\n\nexport function useStickToBottom<T extends HTMLElement = HTMLElement>(\n  options: UseStickToBottomOptions = {},\n): UseStickToBottomReturn<T> {\n  const threshold = options.threshold ?? DEFAULT_THRESHOLD;\n  const viewportRef = useRef<HTMLElement | null>(null);\n  const pinnedRef = useRef(true);\n  const cleanupRef = useRef<(() => void) | null>(null);\n  const [isPinned, setIsPinned] = useState(true);\n\n  const scrollToBottom = useCallback(() => {\n    const el = viewportRef.current;\n    if (!el) return;\n    el.scrollTop = el.scrollHeight;\n    pinnedRef.current = true;\n    setIsPinned(true);\n  }, []);\n\n  const scrollRef = useCallback(\n    (node: T | null) => {\n      cleanupRef.current?.();\n      cleanupRef.current = null;\n      if (node === null) {\n        viewportRef.current = null;\n        return;\n      }\n      const vp = resolveViewport(node);\n      viewportRef.current = vp;\n\n      const updatePinned = (): void => {\n        const pinned = isNearBottom(readMetrics(vp), threshold);\n        pinnedRef.current = pinned;\n        setIsPinned(pinned);\n      };\n      const onScroll = (): void => updatePinned();\n      // Auto-scroll on growth ONLY while pinned — the guard that prevents yanking\n      // the view away while the user reads history.\n      const onGrow = (): void => {\n        if (pinnedRef.current) vp.scrollTop = vp.scrollHeight;\n      };\n\n      vp.addEventListener(\"scroll\", onScroll, { passive: true });\n      updatePinned();\n      onGrow(); // pin to bottom on attach when already pinned\n\n      // A scroll container's OWN box does not resize when content grows inside\n      // it, so streamed messages/tokens are detected as DOM mutations (the\n      // primary signal). A ResizeObserver additionally catches box-size changes\n      // (e.g. an image finishing load) when the environment provides one.\n      const mutationObserver = new MutationObserver(onGrow);\n      mutationObserver.observe(vp, { childList: true, subtree: true, characterData: true });\n      let resizeObserver: ResizeObserver | undefined;\n      if (typeof ResizeObserver !== \"undefined\") {\n        resizeObserver = new ResizeObserver(onGrow);\n        resizeObserver.observe(vp);\n      }\n      cleanupRef.current = (): void => {\n        vp.removeEventListener(\"scroll\", onScroll);\n        mutationObserver.disconnect();\n        resizeObserver?.disconnect();\n      };\n    },\n    [threshold],\n  );\n\n  useEffect(() => () => cleanupRef.current?.(), []);\n\n  return { scrollRef, isPinned, scrollToBottom };\n}\n"]}

package/dist/chunk-7BGCWJQR.js

@@ -0,0 +1,113 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { Sparkles, Wrench, CalendarDays, Eye, GitBranch, Image } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var formatTokens = (n) => {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(0)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(0)}k`;
+  return `${n}`;
+};
+var formatUsd = (n) => n >= 100 ? `$${n.toFixed(0)}` : n >= 1 ? `$${n.toFixed(2)}` : `$${n.toFixed(3)}`;
+var ModelCard = forwardRef(
+  ({ className, model, selected, onSelect, ...props }, ref) => {
+    const Tag = onSelect ? "button" : "article";
+    return /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        "data-slot": "model-card",
+        ref,
+        type: onSelect ? "button" : void 0,
+        onClick: onSelect ? () => onSelect(model.id) : void 0,
+        className: cn(
+          "grid gap-3 rounded-xl border bg-card p-4 text-left",
+          "transition-[border-color,box-shadow] duration-base ease-out-soft",
+          selected ? "border-primary shadow-glow" : onSelect ? "hover:border-primary/40 hover:shadow-sm" : "",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        "aria-pressed": onSelect ? !!selected : void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("h4", { className: "font-display text-title-md tracking-tight", children: model.name }),
+              /* @__PURE__ */ jsx("p", { className: "font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: model.vendor })
+            ] }),
+            model.tag ? /* @__PURE__ */ jsxs("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", children: [
+              typeof model.tag === "string" && model.tag.toLowerCase() === "smart" ? /* @__PURE__ */ jsx(Sparkles, { className: "size-3" }) : null,
+              model.tag
+            ] }) : null
+          ] }),
+          model.description ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: model.description }) : null,
+          /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 gap-3 border-border/30 border-t pt-3 font-mono", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-label-caps text-muted-foreground uppercase tracking-wider", children: "Context" }),
+              /* @__PURE__ */ jsxs("dd", { className: "font-medium text-body-sm tabular-nums", children: [
+                formatTokens(model.contextWindow),
+                " tok"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-label-caps text-muted-foreground uppercase tracking-wider", children: "Max output" }),
+              /* @__PURE__ */ jsxs("dd", { className: "font-medium text-body-sm tabular-nums", children: [
+                formatTokens(model.maxOutput),
+                " tok"
+              ] })
+            ] }),
+            model.pricePerMInput !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-label-caps text-muted-foreground uppercase tracking-wider", children: "Input" }),
+              /* @__PURE__ */ jsxs("dd", { className: "font-medium text-body-sm tabular-nums", children: [
+                formatUsd(model.pricePerMInput),
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/M" })
+              ] })
+            ] }) : null,
+            model.pricePerMOutput !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-label-caps text-muted-foreground uppercase tracking-wider", children: "Output" }),
+              /* @__PURE__ */ jsxs("dd", { className: "font-medium text-body-sm tabular-nums", children: [
+                formatUsd(model.pricePerMOutput),
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/M" })
+              ] })
+            ] }) : null
+          ] }),
+          model.capabilities && model.capabilities.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: model.capabilities.map((cap) => {
+            const Icon = cap.icon ?? Wrench;
+            return /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-label",
+                  cap.enabled ? "bg-success/15 text-success" : "bg-muted text-muted-foreground line-through"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "size-3", "aria-hidden": "true" }),
+                  cap.label
+                ]
+              },
+              cap.id
+            );
+          }) }) : null,
+          model.cutoff ? /* @__PURE__ */ jsxs("p", { className: "inline-flex items-center gap-1 font-mono text-label text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(CalendarDays, { className: "size-3", "aria-hidden": "true" }),
+            " Knowledge cutoff \xB7 ",
+            model.cutoff
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+ModelCard.displayName = "ModelCard";
+var modelCapabilityPresets = {
+  vision: { id: "vision", label: "Vision", icon: Image },
+  tools: { id: "tools", label: "Tool use", icon: Wrench },
+  reasoning: { id: "reasoning", label: "Reasoning", icon: Sparkles },
+  fineTuning: { id: "ft", label: "Fine-tuning", icon: GitBranch },
+  multimodal: { id: "multimodal", label: "Multimodal", icon: Eye }
+};
+
+export { ModelCard, modelCapabilityPresets };
+//# sourceMappingURL=chunk-7BGCWJQR.js.map
+//# sourceMappingURL=chunk-7BGCWJQR.js.map

package/dist/chunk-7BGCWJQR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/model-card/model-card.tsx"],"names":[],"mappings":"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","file":"chunk-7BGCWJQR.js","sourcesContent":["import { CalendarDays, Eye, GitBranch, Image, Sparkles, Wrench } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\n\nexport interface ModelCapabilityFlag {\n  id: string;\n  label: string;\n  icon?: IconComponent;\n  enabled: boolean;\n}\n\nexport interface ModelInfo {\n  id: string;\n  /** Display name (e.g. \"Opus 4.7\"). */\n  name: string;\n  /** Vendor (Anthropic, OpenAI, …). */\n  vendor: string;\n  /** Optional tag (default, fast, smart, beta). */\n  tag?: ReactNode;\n  /** Total context window in tokens. */\n  contextWindow: number;\n  /** Max output tokens per turn. */\n  maxOutput: number;\n  /** USD per million input tokens. */\n  pricePerMInput?: number;\n  /** USD per million output tokens. */\n  pricePerMOutput?: number;\n  /** Knowledge cutoff date label (e.g. \"Jan 2026\"). */\n  cutoff?: string;\n  /** Capability flags shown as chips. */\n  capabilities?: ModelCapabilityFlag[];\n  /** Short description / positioning. */\n  description?: ReactNode;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;\n  return `${n}`;\n};\n\nconst formatUsd = (n: number) =>\n  n >= 100 ? `$${n.toFixed(0)}` : n >= 1 ? `$${n.toFixed(2)}` : `$${n.toFixed(3)}`;\n\ninterface ModelCardProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n  model: ModelInfo;\n  /** Render as the currently-selected variant (violet ring). */\n  selected?: boolean;\n  /** Fires when user clicks to select. */\n  onSelect?: (id: string) => void;\n}\n\n/**\n * ModelCard — full info on a model: vendor, context, output cap, pricing,\n * capabilities, knowledge cutoff. Used in the \"switch model\" surface.\n */\nconst ModelCard = forwardRef<HTMLElement, ModelCardProps>(\n  ({ className, model, selected, onSelect, ...props }, ref) => {\n    const Tag = onSelect ? \"button\" : \"article\";\n    return (\n      <Tag\n        data-slot=\"model-card\"\n        ref={ref as never}\n        type={onSelect ? \"button\" : undefined}\n        onClick={onSelect ? () => onSelect(model.id) : undefined}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4 text-left\",\n          \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n          selected\n            ? \"border-primary shadow-glow\"\n            : onSelect\n              ? \"hover:border-primary/40 hover:shadow-sm\"\n              : \"\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          className,\n        )}\n        aria-pressed={onSelect ? !!selected : undefined}\n        {...(props as HTMLAttributes<HTMLElement>)}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h4 className=\"font-display text-title-md tracking-tight\">{model.name}</h4>\n            <p className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {model.vendor}\n            </p>\n          </div>\n          {model.tag ? (\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              {typeof model.tag === \"string\" && model.tag.toLowerCase() === \"smart\" ? (\n                <Sparkles className=\"size-3\" />\n              ) : null}\n              {model.tag}\n            </span>\n          ) : null}\n        </header>\n\n        {model.description ? (\n          <p className=\"text-body-sm text-muted-foreground\">{model.description}</p>\n        ) : null}\n\n        <dl className=\"grid grid-cols-2 gap-3 border-border/30 border-t pt-3 font-mono\">\n          <div className=\"grid gap-0.5\">\n            <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Context\n            </dt>\n            <dd className=\"font-medium text-body-sm tabular-nums\">\n              {formatTokens(model.contextWindow)} tok\n            </dd>\n          </div>\n          <div className=\"grid gap-0.5\">\n            <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Max output\n            </dt>\n            <dd className=\"font-medium text-body-sm tabular-nums\">\n              {formatTokens(model.maxOutput)} tok\n            </dd>\n          </div>\n          {model.pricePerMInput !== undefined ? (\n            <div className=\"grid gap-0.5\">\n              <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Input\n              </dt>\n              <dd className=\"font-medium text-body-sm tabular-nums\">\n                {formatUsd(model.pricePerMInput)} <span className=\"text-muted-foreground\">/M</span>\n              </dd>\n            </div>\n          ) : null}\n          {model.pricePerMOutput !== undefined ? (\n            <div className=\"grid gap-0.5\">\n              <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Output\n              </dt>\n              <dd className=\"font-medium text-body-sm tabular-nums\">\n                {formatUsd(model.pricePerMOutput)} <span className=\"text-muted-foreground\">/M</span>\n              </dd>\n            </div>\n          ) : null}\n        </dl>\n\n        {model.capabilities && model.capabilities.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {model.capabilities.map((cap) => {\n              const Icon = cap.icon ?? Wrench;\n              return (\n                <span\n                  key={cap.id}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-label\",\n                    cap.enabled\n                      ? \"bg-success/15 text-success\"\n                      : \"bg-muted text-muted-foreground line-through\",\n                  )}\n                >\n                  <Icon className=\"size-3\" aria-hidden=\"true\" />\n                  {cap.label}\n                </span>\n              );\n            })}\n          </div>\n        ) : null}\n\n        {model.cutoff ? (\n          <p className=\"inline-flex items-center gap-1 font-mono text-label text-muted-foreground\">\n            <CalendarDays className=\"size-3\" aria-hidden=\"true\" /> Knowledge cutoff · {model.cutoff}\n          </p>\n        ) : null}\n      </Tag>\n    );\n  },\n);\nModelCard.displayName = \"ModelCard\";\n\n/** Pre-canned capability flags. */\nexport const modelCapabilityPresets = {\n  vision: { id: \"vision\", label: \"Vision\", icon: Image as IconComponent } as const,\n  tools: { id: \"tools\", label: \"Tool use\", icon: Wrench } as const,\n  reasoning: { id: \"reasoning\", label: \"Reasoning\", icon: Sparkles } as const,\n  fineTuning: { id: \"ft\", label: \"Fine-tuning\", icon: GitBranch } as const,\n  multimodal: { id: \"multimodal\", label: \"Multimodal\", icon: Eye } as const,\n};\n\nexport { ModelCard };\n"]}

package/dist/chunk-7BQXMG2A.js

@@ -0,0 +1,93 @@
+import { Progress } from './chunk-4EH6F54D.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function defaultFormat(value, max, unit) {
+  return `${value} / ${max}${unit ? ` ${unit}` : ""}`;
+}
+function metricAriaLabel(metric, formatted) {
+  const label = typeof metric.label === "string" ? metric.label : "metric";
+  return `${label}: ${formatted}`;
+}
+var UsageMeter = forwardRef(
+  ({ className, title, action, metrics, compact = false, ...props }, ref) => {
+    const hasHeader = Boolean(title) || Boolean(action);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "usage-meter",
+        ref,
+        className: cn(
+          "grid gap-3 rounded-xl border border-border bg-card p-4",
+          compact && "gap-2",
+          className
+        ),
+        "data-theo-usage-meter": "",
+        ...props,
+        children: [
+          hasHeader ? /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-3", children: [
+            title ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "font-mono text-label-caps text-muted-foreground uppercase tracking-wider"
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsx("span", {}),
+            action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+          ] }) : null,
+          metrics.map((metric, idx) => {
+            const overQuota = metric.value > metric.max;
+            const fmt = metric.formatter ?? defaultFormat;
+            const formatted = fmt(metric.value, metric.max, metric.unit);
+            const intent = overQuota ? "warning" : "default";
+            const key = `${typeof metric.label === "string" ? metric.label : "metric"}-${idx}`;
+            if (compact) {
+              return /* @__PURE__ */ jsx(
+                Progress,
+                {
+                  value: metric.value,
+                  max: metric.max,
+                  intent,
+                  "aria-label": metricAriaLabel(metric, formatted)
+                },
+                key
+              );
+            }
+            return /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3 text-body-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: metric.label }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "shrink-0 font-mono tabular-nums",
+                      overQuota ? "text-warning" : "text-foreground"
+                    ),
+                    children: formatted
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Progress,
+                {
+                  value: metric.value,
+                  max: metric.max,
+                  intent,
+                  "aria-label": metricAriaLabel(metric, formatted)
+                }
+              )
+            ] }, key);
+          })
+        ]
+      }
+    );
+  }
+);
+UsageMeter.displayName = "UsageMeter";
+
+export { UsageMeter };
+//# sourceMappingURL=chunk-7BQXMG2A.js.map
+//# sourceMappingURL=chunk-7BQXMG2A.js.map

package/dist/chunk-7BQXMG2A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/usage-meter/usage-meter.tsx"],"names":[],"mappings":"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","file":"chunk-7BQXMG2A.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { Progress } from \"../../primitives/progress/index.js\";\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"]}