@usetheo/ui 0.12.0 → 0.13.0

package/dist/primitives/channel-card/index.js

@@ -0,0 +1,4 @@
+export { ChannelCard } from '../../chunk-JPTPIZ5V.js';
+import '../../chunk-ZSRJCIWF.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/primitives/channel-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/primitives/export-chat-dialog/index.js

@@ -0,0 +1,4 @@
+export { ExportChatDialog } from '../../chunk-I32I36LW.js';
+import '../../chunk-ZSRJCIWF.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/primitives/export-chat-dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/primitives/gateway-status-indicator/index.js

@@ -0,0 +1,4 @@
+export { GatewayStatusIndicator } from '../../chunk-AVPHVQZS.js';
+import '../../chunk-ZSRJCIWF.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/primitives/gateway-status-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/primitives/pin-input/index.js

@@ -1,4 +1,4 @@
-export { PinInput } from '../../chunk-R2PAGRDP.js';
+export { PinInput } from '../../chunk-MYEHGDC2.js';
 import '../../chunk-ZSRJCIWF.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/primitives/run-status-pill/index.js

@@ -0,0 +1,4 @@
+export { RunStatusPill } from '../../chunk-UK27KR35.js';
+import '../../chunk-ZSRJCIWF.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/primitives/run-status-pill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/primitives/thinking-level-selector/index.js

@@ -0,0 +1,4 @@
+export { ThinkingLevelSelector } from '../../chunk-UOMQPIB4.js';
+import '../../chunk-ZSRJCIWF.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/primitives/thinking-level-selector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/primitives/update-banner/index.js

@@ -0,0 +1,4 @@
+export { UpdateBanner } from '../../chunk-GXBFGWQN.js';
+import '../../chunk-ZSRJCIWF.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/primitives/update-banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Theo UI — framework-agnostic React component library with the Violet Forge design system. Focused on AI-agent interfaces, cloud dashboards, and developer-tooling surfaces.",
   "license": "Apache-2.0",
   "type": "module",
@@ -12,6 +12,17 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
+    "./styles-v3-legacy.css": "./dist/styles-v3-legacy.css",
+    "./components.css": "./dist/components.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./tokens-v4.css": "./dist/tokens-v4.css",
+    "./preset.css": "./dist/preset.css",
+    "./preset": "./dist/preset.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./fonts-cdn.css": "./dist/fonts-cdn.css",
+    "./slide/themes/default.css": "./dist/slide/themes/default.css",
+    "./slide/themes/violet-forge.css": "./dist/slide/themes/violet-forge.css",
     "./account-menu": {
       "types": "./dist/index.d.ts",
       "import": "./dist/composites/account-menu/index.js"
@@ -92,6 +103,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/badge/index.js"
     },
+    "./branch-indicator": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/primitives/branch-indicator/index.js"
+    },
     "./browser-controls": {
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/browser-controls/index.js"
@@ -112,6 +127,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/card/index.js"
     },
+    "./channel-card": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/primitives/channel-card/index.js"
+    },
     "./chat-composer": {
       "types": "./dist/index.d.ts",
       "import": "./dist/composites/chat-composer/index.js"
@@ -136,7 +155,6 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/composites/command-palette/index.js"
     },
-    "./components.css": "./dist/components.css",
     "./confirm-dialog": {
       "types": "./dist/index.d.ts",
       "import": "./dist/composites/confirm-dialog/index.js"
@@ -205,6 +223,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/composites/env-var-editor/index.js"
     },
+    "./export-chat-dialog": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/primitives/export-chat-dialog/index.js"
+    },
     "./folder-context-card": {
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/folder-context-card/index.js"
@@ -213,12 +235,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/folder-selector/index.js"
     },
-    "./fonts-cdn.css": "./dist/fonts-cdn.css",
-    "./fonts.css": "./dist/fonts.css",
     "./form-field": {
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/form-field/index.js"
     },
+    "./gateway-status-indicator": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/primitives/gateway-status-indicator/index.js"
+    },
     "./hook-config": {
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/hook-config/index.js"
@@ -299,12 +323,6 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/plan-badge/index.js"
     },
-    "./preset": "./dist/preset.css",
-    "./preset-v3-legacy": {
-      "types": "./dist/preset-v3-legacy.d.ts",
-      "import": "./dist/preset-v3-legacy.js"
-    },
-    "./preset.css": "./dist/preset.css",
     "./preview-env-card": {
       "types": "./dist/index.d.ts",
       "import": "./dist/composites/preview-env-card/index.js"
@@ -357,6 +375,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/run-stats/index.js"
     },
+    "./run-status-pill": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/primitives/run-status-pill/index.js"
+    },
     "./running-tasks-panel": {
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/running-tasks-panel/index.js"
@@ -401,36 +423,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/composites/skills-list/index.js"
     },
-    "./slide": {
-      "types": "./dist/slide/index.d.ts",
-      "import": "./dist/slide/index.js"
-    },
-    "./slide-deck": {
-      "types": "./dist/slide-deck/index.d.ts",
-      "import": "./dist/slide-deck/index.js"
-    },
-    "./slide/plugins/emoji": {
-      "types": "./dist/slide/plugins/emoji/index.d.ts",
-      "import": "./dist/slide/plugins/emoji/index.js"
-    },
-    "./slide/plugins/math": {
-      "types": "./dist/slide/plugins/math/index.d.ts",
-      "import": "./dist/slide/plugins/math/index.js"
-    },
-    "./slide/plugins/mermaid": {
-      "types": "./dist/slide/plugins/mermaid/index.d.ts",
-      "import": "./dist/slide/plugins/mermaid/index.js"
-    },
-    "./slide/plugins/shiki": {
-      "types": "./dist/slide/plugins/shiki/index.d.ts",
-      "import": "./dist/slide/plugins/shiki/index.js"
-    },
-    "./slide/themes/default.css": "./dist/slide/themes/default.css",
-    "./slide/themes/violet-forge.css": "./dist/slide/themes/violet-forge.css",
     "./social-auth-row": {
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/social-auth-row/index.js"
     },
+    "./stability-bundle-viewer": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/composites/stability-bundle-viewer/index.js"
+    },
     "./stat-tile": {
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/stat-tile/index.js"
@@ -443,8 +443,6 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/steps-rail/index.js"
     },
-    "./styles-v3-legacy.css": "./dist/styles-v3-legacy.css",
-    "./styles.css": "./dist/styles.css",
     "./sub-agent-dispatch": {
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/sub-agent-dispatch/index.js"
@@ -481,6 +479,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/textarea/index.js"
     },
+    "./thinking-level-selector": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/primitives/thinking-level-selector/index.js"
+    },
     "./timestamp": {
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/timestamp/index.js"
@@ -493,8 +495,6 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/token-usage-chart/index.js"
     },
-    "./tokens-v4.css": "./dist/tokens-v4.css",
-    "./tokens.css": "./dist/tokens.css",
     "./tool-call": {
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/tool-call/index.js"
@@ -519,17 +519,49 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/primitives/topnav/index.js"
     },
+    "./update-banner": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/primitives/update-banner/index.js"
+    },
     "./usage-meter": {
       "types": "./dist/index.d.ts",
       "import": "./dist/composites/usage-meter/index.js"
     },
+    "./whiteboard": {
+      "types": "./dist/whiteboard/index.d.ts",
+      "import": "./dist/whiteboard/index.js"
+    },
+    "./slide": {
+      "types": "./dist/slide/index.d.ts",
+      "import": "./dist/slide/index.js"
+    },
+    "./slide/plugins/shiki": {
+      "types": "./dist/slide/plugins/shiki/index.d.ts",
+      "import": "./dist/slide/plugins/shiki/index.js"
+    },
+    "./slide/plugins/math": {
+      "types": "./dist/slide/plugins/math/index.d.ts",
+      "import": "./dist/slide/plugins/math/index.js"
+    },
+    "./slide/plugins/mermaid": {
+      "types": "./dist/slide/plugins/mermaid/index.d.ts",
+      "import": "./dist/slide/plugins/mermaid/index.js"
+    },
+    "./slide/plugins/emoji": {
+      "types": "./dist/slide/plugins/emoji/index.d.ts",
+      "import": "./dist/slide/plugins/emoji/index.js"
+    },
+    "./slide-deck": {
+      "types": "./dist/slide-deck/index.d.ts",
+      "import": "./dist/slide-deck/index.js"
+    },
     "./vite-plugin": {
       "types": "./dist/vite-plugin.d.ts",
       "import": "./dist/vite-plugin.js"
     },
-    "./whiteboard": {
-      "types": "./dist/whiteboard/index.d.ts",
-      "import": "./dist/whiteboard/index.js"
+    "./preset-v3-legacy": {
+      "types": "./dist/preset-v3-legacy.d.ts",
+      "import": "./dist/preset-v3-legacy.js"
     }
   },
   "files": [
@@ -542,50 +574,6 @@
     "llms.txt",
     "DESIGN.md"
   ],
-  "scripts": {
-    "build": "tsup && tsx scripts/regen-subpath-exports.ts",
-    "dev": "ladle serve",
-    "ladle:build": "ladle build",
-    "ladle:preview": "ladle preview",
-    "playground": "vite --config playground/vite.config.ts",
-    "playground:build": "vite build --config playground/vite.config.ts",
-    "playground:preview": "vite preview --config playground/vite.config.ts",
-    "typecheck": "tsc --noEmit",
-    "lint": "biome check src",
-    "lint:ci": "biome ci src scripts .ladle playground",
-    "lint:fix": "biome check --write src",
-    "format": "biome format --write src scripts .ladle package.json tsconfig.json tailwind.config.ts vitest.config.ts tsup.config.ts biome.json",
-    "format:check": "biome format src scripts .ladle package.json tsconfig.json tailwind.config.ts vitest.config.ts tsup.config.ts biome.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:ui": "vitest --ui",
-    "test:contract": "vitest run tests/contract",
-    "prepublishOnly": "pnpm build && pnpm test:contract && node scripts/validate-exports.mjs",
-    "validate:exports": "node scripts/validate-exports.mjs",
-    "registry:build": "tsx scripts/build-registry.ts",
-    "registry:validate": "tsx scripts/validate-registry.ts",
-    "sync:readme": "tsx scripts/sync-readme.ts",
-    "sync:exports": "tsx scripts/sync-exports.ts",
-    "test:registry": "tsx scripts/test-registry-install.ts",
-    "test:coverage": "vitest run --coverage",
-    "quality:structure": "tsx scripts/validate-quality-gates.ts",
-    "quality:bundle": "tsx scripts/validate-bundle-size.ts",
-    "quality:bundle:update": "tsx scripts/validate-bundle-size.ts --update",
-    "quality:a11y": "vitest run src/test/ladle-axe.test.tsx",
-    "dogfood:whiteboard": "tsx scripts/dogfood-whiteboard.ts",
-    "dogfood:slide": "tsx scripts/dogfood-slide.ts",
-    "dogfood:slide-deck": "tsx scripts/dogfood-slide-deck.ts",
-    "dogfood:slide-rich": "tsx scripts/dogfood-slide-rich.ts",
-    "dogfood:v4-zero-config": "tsx scripts/dogfood-v4-zero-config.ts",
-    "dogfood:v4-real-build": "bash scripts/dogfood-v4-real-build.sh",
-    "dogfood:precompiled-utilities": "tsx scripts/dogfood-precompiled-utilities.ts",
-    "quality:gates": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm quality:knip && pnpm test && pnpm build && pnpm quality:publint && pnpm registry:build && pnpm registry:validate && pnpm quality:structure && pnpm quality:bundle && pnpm quality:a11y && pnpm ladle:build && pnpm dogfood:whiteboard && pnpm dogfood:slide && pnpm dogfood:slide-deck && pnpm dogfood:slide-rich && pnpm dogfood:v4-zero-config && pnpm dogfood:precompiled-utilities",
-    "quality:gates:fast": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm quality:knip && pnpm registry:build && pnpm registry:validate && pnpm quality:structure",
-    "quality:knip": "knip",
-    "quality:knip:fix": "knip --fix",
-    "quality:publint": "publint --strict",
-    "quality:attw": "attw --pack . --profile esm-only"
-  },
   "peerDependencies": {
     "@tailwindcss/vite": "^4.0.0",
     "hast-util-from-html": "^2.0.0",
@@ -741,16 +729,6 @@
   "engines": {
     "node": ">=20"
   },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@biomejs/biome",
-      "@swc/core",
-      "esbuild"
-    ],
-    "overrides": {
-      "postcss": ">=8.5.10"
-    }
-  },
   "keywords": [
     "react",
     "components",
@@ -766,5 +744,51 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be"
-}
+  "scripts": {
+    "build": "tsup && tsx scripts/regen-subpath-exports.ts",
+    "dev": "ladle serve",
+    "ladle:build": "ladle build",
+    "ladle:preview": "ladle preview",
+    "playground": "vite --config playground/vite.config.ts",
+    "playground:build": "vite build --config playground/vite.config.ts",
+    "playground:preview": "vite preview --config playground/vite.config.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src",
+    "lint:ci": "biome ci src scripts .ladle playground",
+    "inventory": "node scripts/inventory-components.mjs",
+    "stories:check": "node scripts/generate-missing-stories.mjs --check",
+    "stories:generate": "node scripts/generate-missing-stories.mjs --write",
+    "stories:test": "node scripts/__tests__/generate-missing-stories.test.mjs",
+    "lint:fix": "biome check --write src",
+    "format": "biome format --write src scripts .ladle package.json tsconfig.json tailwind.config.ts vitest.config.ts tsup.config.ts biome.json",
+    "format:check": "biome format src scripts .ladle package.json tsconfig.json tailwind.config.ts vitest.config.ts tsup.config.ts biome.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:contract": "vitest run tests/contract",
+    "validate:exports": "node scripts/validate-exports.mjs",
+    "registry:build": "tsx scripts/build-registry.ts",
+    "registry:validate": "tsx scripts/validate-registry.ts",
+    "sync:readme": "tsx scripts/sync-readme.ts",
+    "sync:exports": "tsx scripts/sync-exports.ts",
+    "test:registry": "tsx scripts/test-registry-install.ts",
+    "test:coverage": "vitest run --coverage",
+    "quality:structure": "tsx scripts/validate-quality-gates.ts",
+    "quality:bundle": "tsx scripts/validate-bundle-size.ts",
+    "quality:bundle:update": "tsx scripts/validate-bundle-size.ts --update",
+    "quality:a11y": "vitest run src/test/ladle-axe.test.tsx",
+    "dogfood:whiteboard": "tsx scripts/dogfood-whiteboard.ts",
+    "dogfood:slide": "tsx scripts/dogfood-slide.ts",
+    "dogfood:slide-deck": "tsx scripts/dogfood-slide-deck.ts",
+    "dogfood:slide-rich": "tsx scripts/dogfood-slide-rich.ts",
+    "dogfood:v4-zero-config": "tsx scripts/dogfood-v4-zero-config.ts",
+    "dogfood:v4-real-build": "bash scripts/dogfood-v4-real-build.sh",
+    "dogfood:precompiled-utilities": "tsx scripts/dogfood-precompiled-utilities.ts",
+    "quality:gates": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm quality:knip && pnpm test && pnpm build && pnpm quality:publint && pnpm registry:build && pnpm registry:validate && pnpm quality:structure && pnpm quality:bundle && pnpm quality:a11y && pnpm ladle:build && pnpm dogfood:whiteboard && pnpm dogfood:slide && pnpm dogfood:slide-deck && pnpm dogfood:slide-rich && pnpm dogfood:v4-zero-config && pnpm dogfood:precompiled-utilities",
+    "quality:gates:fast": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm quality:knip && pnpm registry:build && pnpm registry:validate && pnpm quality:structure",
+    "quality:knip": "knip",
+    "quality:knip:fix": "knip --fix",
+    "quality:publint": "publint --strict",
+    "quality:attw": "attw --pack . --profile esm-only"
+  }
+}

package/registry/r/pin-input.json

@@ -14,7 +14,7 @@
       "path": "components/primitives/pin-input/pin-input.tsx",
       "type": "registry:ui",
       "target": "components/ui/pin-input.tsx",
-      "content": "import { forwardRef, useEffect, useRef } from \"react\";\nimport type { ClipboardEvent, HTMLAttributes, KeyboardEvent } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * PinInput — multi-slot OTP / code input primitive.\n *\n * Renders N separate boxes (default 6) that auto-advance focus on\n * input. Paste handling fills all slots from clipboard (whitespace\n * stripped). Arrow keys navigate; backspace clears current slot\n * then moves focus back when empty.\n *\n * Industry-standard pattern for email verification codes (Apple,\n * Stripe, Clerk, Auth0, GitHub two-factor).\n *\n * @example\n *   <PinInput\n *     length={6}\n *     value={code}\n *     onChange={setCode}\n *     onComplete={(v) => verify(v)}\n *     inputMode=\"numeric\"\n *     aria-label=\"Verification code\"\n *   />\n *\n * Note: value is treated as controlled. If you pass a complete value\n * on mount, onComplete will NOT fire — onComplete fires only on\n * transitions from incomplete → complete.\n */\nexport interface PinInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"inputMode\"> {\n  length?: number;\n  value?: string;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n  inputMode?: \"numeric\" | \"alphanumeric\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  disabled?: boolean;\n  error?: boolean;\n  \"aria-label\": string;\n  autoFocus?: boolean;\n  mask?: boolean;\n}\n\nconst SIZE_CLASS: Record<NonNullable<PinInputProps[\"size\"]>, string> = {\n  sm: \"size-8 text-body-sm\",\n  md: \"size-10 text-body-md\",\n  lg: \"size-12 text-title-sm\",\n};\n\nfunction sanitize(raw: string, inputMode: \"numeric\" | \"alphanumeric\"): string {\n  const noWhitespace = raw.replace(/\\s/g, \"\");\n  if (inputMode === \"numeric\") {\n    return noWhitespace.replace(/\\D/g, \"\");\n  }\n  return noWhitespace.toUpperCase().replace(/[^A-Z0-9]/g, \"\");\n}\n\nconst PinInput = forwardRef<HTMLDivElement, PinInputProps>(\n  (\n    {\n      className,\n      length = 6,\n      value = \"\",\n      onChange,\n      onComplete,\n      inputMode = \"numeric\",\n      size = \"md\",\n      disabled = false,\n      error = false,\n      autoFocus = false,\n      mask = false,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n    const wasCompleteRef = useRef<boolean>(value.length === length);\n\n    // Auto-focus first slot on mount (SSR-safe)\n    useEffect(() => {\n      if (!autoFocus) return;\n      if (typeof window === \"undefined\") return;\n      inputRefs.current[0]?.focus();\n    }, [autoFocus]);\n\n    // Fire onComplete on transitions from incomplete → complete\n    useEffect(() => {\n      const isComplete = value.length === length && value.length > 0;\n      if (isComplete && !wasCompleteRef.current) {\n        onComplete?.(value);\n      }\n      wasCompleteRef.current = isComplete;\n    }, [value, length, onComplete]);\n\n    function commit(next: string) {\n      const sanitized = sanitize(next, inputMode).slice(0, length);\n      onChange?.(sanitized);\n    }\n\n    function handleChange(slot: number, raw: string) {\n      const sanitized = sanitize(raw, inputMode);\n      if (sanitized.length === 0) {\n        // Clear current slot\n        const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n        commit(next);\n        return;\n      }\n      // Take the last character typed (handles browser autocomplete that fills multiple)\n      const ch = sanitized[sanitized.length - 1] ?? \"\";\n      const next = `${value.slice(0, slot)}${ch}${value.slice(slot + 1)}`;\n      commit(next);\n      // Advance focus\n      if (slot < length - 1) {\n        inputRefs.current[slot + 1]?.focus();\n      }\n    }\n\n    function handleKeyDown(slot: number, e: KeyboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      const slotChar = value[slot] ?? \"\";\n\n      if (e.key === \"Backspace\") {\n        if (slotChar === \"\") {\n          // Move focus back if current is empty\n          if (slot > 0) {\n            inputRefs.current[slot - 1]?.focus();\n          }\n        } else {\n          // Clear current slot, stay focused\n          const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n          commit(next);\n        }\n        e.preventDefault();\n      } else if (e.key === \"ArrowLeft\") {\n        if (slot > 0) inputRefs.current[slot - 1]?.focus();\n        e.preventDefault();\n      } else if (e.key === \"ArrowRight\") {\n        if (slot < length - 1) inputRefs.current[slot + 1]?.focus();\n        e.preventDefault();\n      }\n    }\n\n    function handlePaste(slot: number, e: ClipboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      e.preventDefault();\n      const pasted = e.clipboardData.getData(\"text/plain\");\n      const sanitized = sanitize(pasted, inputMode);\n      if (sanitized.length === 0) return;\n      // Build slot-indexed array, then overwrite from `slot` onwards.\n      // Previous string-concat approach didn't pad when value was shorter\n      // than `slot`, which made paste-from-middle-when-empty fill from 0.\n      const slotArr: string[] = Array.from({ length }, (_, i) => value[i] ?? \"\");\n      const remaining = length - slot;\n      const filled = sanitized.slice(0, remaining);\n      for (let i = 0; i < filled.length; i++) {\n        slotArr[slot + i] = filled[i] ?? \"\";\n      }\n      const next = slotArr.join(\"\");\n      commit(next);\n      // Focus the slot after the last filled, or the last slot if completed\n      const focusAt = Math.min(slot + filled.length, length - 1);\n      requestAnimationFrame(() => inputRefs.current[focusAt]?.focus());\n    }\n\n    const slots = Array.from({ length }, (_, i) => i);\n\n    return (\n      <div\n        ref={ref}\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force a different visual layout (rectangular border by default) and is form-bound; we use a div with role=\"group\" + aria-label for grouping semantics.\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\"inline-flex items-center gap-2\", className)}\n        {...props}\n      >\n        {slots.map((i) => {\n          const ch = value[i] ?? \"\";\n          const display = mask && ch !== \"\" ? \"•\" : ch;\n          return (\n            <input\n              // biome-ignore lint/suspicious/noArrayIndexKey: PinInput slots are positional; reorder is impossible by design.\n              key={i}\n              ref={(el) => {\n                inputRefs.current[i] = el;\n              }}\n              type=\"text\"\n              inputMode={inputMode === \"numeric\" ? \"numeric\" : \"text\"}\n              pattern={inputMode === \"numeric\" ? \"[0-9]*\" : undefined}\n              maxLength={1}\n              autoComplete={i === 0 ? \"one-time-code\" : \"off\"}\n              disabled={disabled}\n              value={display}\n              onChange={(e) => handleChange(i, e.target.value)}\n              onKeyDown={(e) => handleKeyDown(i, e)}\n              onPaste={(e) => handlePaste(i, e)}\n              aria-label={`Digit ${i + 1} of ${length}`}\n              className={cn(\n                \"rounded-md border bg-card text-center font-medium font-mono\",\n                \"transition-colors\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n                SIZE_CLASS[size],\n                error ? \"border-destructive\" : \"border-border/60 hover:border-border\",\n              )}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\nPinInput.displayName = \"PinInput\";\n\nexport { PinInput };\n"
+      "content": "import { forwardRef, useEffect, useRef } from \"react\";\nimport type { ClipboardEvent, HTMLAttributes, KeyboardEvent } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * PinInput — multi-slot OTP / code input primitive.\n *\n * Renders N separate boxes (default 6) that auto-advance focus on\n * input. Paste handling fills all slots from clipboard (whitespace\n * stripped). Arrow keys navigate; backspace clears current slot\n * then moves focus back when empty.\n *\n * Industry-standard pattern for email verification codes (Apple,\n * Stripe, Clerk, Auth0, GitHub two-factor).\n *\n * @example\n *   <PinInput\n *     length={6}\n *     value={code}\n *     onChange={setCode}\n *     onComplete={(v) => verify(v)}\n *     inputMode=\"numeric\"\n *     aria-label=\"Verification code\"\n *   />\n *\n * Note: value is treated as controlled. If you pass a complete value\n * on mount, onComplete will NOT fire — onComplete fires only on\n * transitions from incomplete → complete.\n */\nexport interface PinInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"inputMode\"> {\n  length?: number;\n  value?: string;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n  inputMode?: \"numeric\" | \"alphanumeric\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  disabled?: boolean;\n  error?: boolean;\n  \"aria-label\": string;\n  autoFocus?: boolean;\n  mask?: boolean;\n}\n\nconst SIZE_CLASS: Record<NonNullable<PinInputProps[\"size\"]>, string> = {\n  sm: \"size-8 text-body-sm\",\n  md: \"size-10 text-body-md\",\n  lg: \"size-12 text-title-sm\",\n};\n\nfunction sanitize(raw: string, inputMode: \"numeric\" | \"alphanumeric\"): string {\n  const noWhitespace = raw.replace(/\\s/g, \"\");\n  if (inputMode === \"numeric\") {\n    return noWhitespace.replace(/\\D/g, \"\");\n  }\n  return noWhitespace.toUpperCase().replace(/[^A-Z0-9]/g, \"\");\n}\n\nconst PinInput = forwardRef<HTMLDivElement, PinInputProps>(\n  (\n    {\n      className,\n      length = 6,\n      value = \"\",\n      onChange,\n      onComplete,\n      inputMode = \"numeric\",\n      size = \"md\",\n      disabled = false,\n      error = false,\n      autoFocus = false,\n      mask = false,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n    const wasCompleteRef = useRef<boolean>(value.length === length);\n\n    // Auto-focus first slot on mount (SSR-safe)\n    useEffect(() => {\n      if (!autoFocus) return;\n      if (typeof window === \"undefined\") return;\n      inputRefs.current[0]?.focus();\n    }, [autoFocus]);\n\n    // Fire onComplete on transitions from incomplete → complete\n    useEffect(() => {\n      const isComplete = value.length === length && value.length > 0;\n      if (isComplete && !wasCompleteRef.current) {\n        onComplete?.(value);\n      }\n      wasCompleteRef.current = isComplete;\n    }, [value, length, onComplete]);\n\n    function commit(next: string) {\n      const sanitized = sanitize(next, inputMode).slice(0, length);\n      onChange?.(sanitized);\n    }\n\n    function handleChange(slot: number, raw: string) {\n      const sanitized = sanitize(raw, inputMode);\n      if (sanitized.length === 0) {\n        // Clear current slot\n        const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n        commit(next);\n        return;\n      }\n      // Take the last character typed (handles browser autocomplete that fills multiple)\n      const ch = sanitized[sanitized.length - 1] ?? \"\";\n      const next = `${value.slice(0, slot)}${ch}${value.slice(slot + 1)}`;\n      commit(next);\n      // Advance focus\n      if (slot < length - 1) {\n        inputRefs.current[slot + 1]?.focus();\n      }\n    }\n\n    function handleKeyDown(slot: number, e: KeyboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      const slotChar = value[slot] ?? \"\";\n\n      if (e.key === \"Backspace\") {\n        if (slotChar === \"\") {\n          // Move focus back if current is empty\n          if (slot > 0) {\n            inputRefs.current[slot - 1]?.focus();\n          }\n        } else {\n          // Clear current slot, stay focused\n          const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n          commit(next);\n        }\n        e.preventDefault();\n      } else if (e.key === \"ArrowLeft\") {\n        if (slot > 0) inputRefs.current[slot - 1]?.focus();\n        e.preventDefault();\n      } else if (e.key === \"ArrowRight\") {\n        if (slot < length - 1) inputRefs.current[slot + 1]?.focus();\n        e.preventDefault();\n      }\n    }\n\n    function handlePaste(slot: number, e: ClipboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      e.preventDefault();\n      const pasted = e.clipboardData.getData(\"text/plain\");\n      const sanitized = sanitize(pasted, inputMode);\n      if (sanitized.length === 0) return;\n      // Build slot-indexed array, then overwrite from `slot` onwards.\n      // Previous string-concat approach didn't pad when value was shorter\n      // than `slot`, which made paste-from-middle-when-empty fill from 0.\n      const slotArr: string[] = Array.from({ length }, (_, i) => value[i] ?? \"\");\n      const remaining = length - slot;\n      const filled = sanitized.slice(0, remaining);\n      for (let i = 0; i < filled.length; i++) {\n        slotArr[slot + i] = filled[i] ?? \"\";\n      }\n      const next = slotArr.join(\"\");\n      commit(next);\n      // Focus the slot after the last filled, or the last slot if completed\n      const focusAt = Math.min(slot + filled.length, length - 1);\n      requestAnimationFrame(() => inputRefs.current[focusAt]?.focus());\n    }\n\n    const slots = Array.from({ length }, (_, i) => i);\n\n    return (\n      <div\n        ref={ref}\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force a different visual layout (rectangular border by default) and is form-bound; we use a div with role=\"group\" + aria-label for grouping semantics.\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\"inline-flex items-center gap-2\", className)}\n        {...props}\n      >\n        {slots.map((i) => {\n          const ch = value[i] ?? \"\";\n          const display = mask && ch !== \"\" ? \"•\" : ch;\n          return (\n            <input\n              key={i}\n              ref={(el) => {\n                inputRefs.current[i] = el;\n              }}\n              type=\"text\"\n              inputMode={inputMode === \"numeric\" ? \"numeric\" : \"text\"}\n              pattern={inputMode === \"numeric\" ? \"[0-9]*\" : undefined}\n              maxLength={1}\n              autoComplete={i === 0 ? \"one-time-code\" : \"off\"}\n              disabled={disabled}\n              value={display}\n              onChange={(e) => handleChange(i, e.target.value)}\n              onKeyDown={(e) => handleKeyDown(i, e)}\n              onPaste={(e) => handlePaste(i, e)}\n              aria-label={`Digit ${i + 1} of ${length}`}\n              className={cn(\n                \"rounded-md border bg-card text-center font-medium font-mono\",\n                \"transition-colors\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n                SIZE_CLASS[size],\n                error ? \"border-destructive\" : \"border-border/60 hover:border-border\",\n              )}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\nPinInput.displayName = \"PinInput\";\n\nexport { PinInput };\n"
     }
   ]
 }