@mova-ui/react 0.4.1 → 0.4.5

package/dist/ui/ai/ai-context-meter.d.ts

@@ -7,8 +7,9 @@ export type AIContextMeterProps = {
     className?: string;
     dangerAt?: number;
     limit: number;
+    theme?: "light" | "dark";
     used: number;
     warningAt?: number;
 };
-export declare function AIContextMeter({ breakdown, className, dangerAt, limit, used, warningAt, }: AIContextMeterProps): import("react").JSX.Element;
+export declare function AIContextMeter({ breakdown, className, dangerAt, limit, theme, used, warningAt, }: AIContextMeterProps): import("react").JSX.Element;
 export default AIContextMeter;

package/dist/ui/ai/ai-sources.d.ts

@@ -11,6 +11,7 @@ export type AISourcesProps = {
     defaultOpen?: boolean;
     label?: string;
     sources: AISource[];
+    theme?: "light" | "dark";
 };
-export declare function AISources({ className, defaultOpen, label, sources }: AISourcesProps): import("react").JSX.Element;
+export declare function AISources({ className, defaultOpen, label, sources, theme }: AISourcesProps): import("react").JSX.Element;
 export default AISources;

package/dist/ui/ai/ai-task-list.d.ts

@@ -10,6 +10,7 @@ export type AITaskListProps = {
     className?: string;
     label?: string;
     tasks: AITask[];
+    theme?: "light" | "dark";
 };
-export declare function AITaskList({ className, label, tasks }: AITaskListProps): import("react").JSX.Element;
+export declare function AITaskList({ className, label, tasks, theme }: AITaskListProps): import("react").JSX.Element;
 export default AITaskList;

package/dist/ui/ai/ai-tool-call.d.ts

@@ -8,6 +8,7 @@ export type AIToolCallProps = {
     result?: ReactNode;
     status?: AIToolCallStatus;
     summary?: string;
+    theme?: "light" | "dark";
 };
-export declare function AIToolCall({ args, className, defaultOpen, name, result, status, summary }: AIToolCallProps): import("react").JSX.Element;
+export declare function AIToolCall({ args, className, defaultOpen, name, result, status, summary, theme }: AIToolCallProps): import("react").JSX.Element;
 export default AIToolCall;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mova-ui/react",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "description": "Mova. Make interfaces feel alive. React motion components and an offline source CLI.",
   "private": false,
   "type": "module",

package/registry/1.json

@@ -1,7 +1,7 @@
 {
   "id": "1",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "1.tsx",
   "registryFile": "1.json",
   "exports": [

package/registry/10.json

@@ -1,7 +1,7 @@
 {
   "id": "10",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "10.tsx",
   "registryFile": "10.json",
   "exports": [

package/registry/11.json

@@ -1,7 +1,7 @@
 {
   "id": "11",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "11.tsx",
   "registryFile": "11.json",
   "exports": [

package/registry/12.json

@@ -1,7 +1,7 @@
 {
   "id": "12",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "12.tsx",
   "registryFile": "12.json",
   "exports": [

package/registry/13.json

@@ -1,7 +1,7 @@
 {
   "id": "13",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "13.tsx",
   "registryFile": "13.json",
   "exports": [

package/registry/14.json

@@ -1,7 +1,7 @@
 {
   "id": "14",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "14.tsx",
   "registryFile": "14.json",
   "exports": [

package/registry/15.json

@@ -1,7 +1,7 @@
 {
   "id": "15",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "15.tsx",
   "registryFile": "15.json",
   "exports": [

package/registry/16.json

@@ -1,7 +1,7 @@
 {
   "id": "16",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "16.tsx",
   "registryFile": "16.json",
   "exports": [

package/registry/17.json

@@ -1,7 +1,7 @@
 {
   "id": "17",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "17.tsx",
   "registryFile": "17.json",
   "exports": [

package/registry/18.json

@@ -1,7 +1,7 @@
 {
   "id": "18",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "18.tsx",
   "registryFile": "18.json",
   "exports": [

package/registry/19.json

@@ -1,7 +1,7 @@
 {
   "id": "19",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "19.tsx",
   "registryFile": "19.json",
   "exports": [

package/registry/2.json

@@ -1,7 +1,7 @@
 {
   "id": "2",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "2.tsx",
   "registryFile": "2.json",
   "exports": [

package/registry/20.json

@@ -1,7 +1,7 @@
 {
   "id": "20",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "20.tsx",
   "registryFile": "20.json",
   "exports": [

package/registry/21.json

@@ -1,7 +1,7 @@
 {
   "id": "21",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "21.tsx",
   "registryFile": "21.json",
   "exports": [

package/registry/22.json

@@ -1,7 +1,7 @@
 {
   "id": "22",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "22.tsx",
   "registryFile": "22.json",
   "exports": [

package/registry/23.json

@@ -1,7 +1,7 @@
 {
   "id": "23",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "23.tsx",
   "registryFile": "23.json",
   "exports": [

package/registry/24.json

@@ -1,7 +1,7 @@
 {
   "id": "24",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "24.tsx",
   "registryFile": "24.json",
   "exports": [

package/registry/25.json

@@ -1,7 +1,7 @@
 {
   "id": "25",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "25.tsx",
   "registryFile": "25.json",
   "exports": [

package/registry/26.json

@@ -1,7 +1,7 @@
 {
   "id": "26",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "26.tsx",
   "registryFile": "26.json",
   "exports": [

package/registry/27.json

@@ -1,7 +1,7 @@
 {
   "id": "27",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "27.tsx",
   "registryFile": "27.json",
   "exports": [

package/registry/28.json

@@ -1,7 +1,7 @@
 {
   "id": "28",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "28.tsx",
   "registryFile": "28.json",
   "exports": [

package/registry/29.json

@@ -1,7 +1,7 @@
 {
   "id": "29",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "29.tsx",
   "registryFile": "29.json",
   "exports": [

package/registry/3.json

@@ -1,7 +1,7 @@
 {
   "id": "3",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "3.tsx",
   "registryFile": "3.json",
   "exports": [

package/registry/30.json

@@ -1,7 +1,7 @@
 {
   "id": "30",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "30.tsx",
   "registryFile": "30.json",
   "exports": [

package/registry/31.json

@@ -1,7 +1,7 @@
 {
   "id": "31",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "31.tsx",
   "registryFile": "31.json",
   "exports": [

package/registry/32.json

@@ -1,7 +1,7 @@
 {
   "id": "32",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "32.tsx",
   "registryFile": "32.json",
   "exports": [

package/registry/33.json

@@ -1,7 +1,7 @@
 {
   "id": "33",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "33.tsx",
   "registryFile": "33.json",
   "exports": [

package/registry/34.json

@@ -1,7 +1,7 @@
 {
   "id": "34",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "34.tsx",
   "registryFile": "34.json",
   "exports": [

package/registry/35.json

@@ -1,7 +1,7 @@
 {
   "id": "35",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "35.tsx",
   "registryFile": "35.json",
   "exports": [

package/registry/36.json

@@ -1,7 +1,7 @@
 {
   "id": "36",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "36.tsx",
   "registryFile": "36.json",
   "exports": [

package/registry/37.json

@@ -1,7 +1,7 @@
 {
   "id": "37",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "37.tsx",
   "registryFile": "37.json",
   "exports": [

package/registry/4.json

@@ -1,7 +1,7 @@
 {
   "id": "4",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "4.tsx",
   "registryFile": "4.json",
   "exports": [

package/registry/5.json

@@ -1,7 +1,7 @@
 {
   "id": "5",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "5.tsx",
   "registryFile": "5.json",
   "exports": [

package/registry/6.json

@@ -1,7 +1,7 @@
 {
   "id": "6",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "6.tsx",
   "registryFile": "6.json",
   "exports": [

package/registry/7.json

@@ -1,7 +1,7 @@
 {
   "id": "7",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "7.tsx",
   "registryFile": "7.json",
   "exports": [

package/registry/8.json

@@ -1,7 +1,7 @@
 {
   "id": "8",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "8.tsx",
   "registryFile": "8.json",
   "exports": [

package/registry/9.json

@@ -1,7 +1,7 @@
 {
   "id": "9",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "9.tsx",
   "registryFile": "9.json",
   "exports": [

package/registry/ab-segmented-tabs.json

@@ -1,7 +1,7 @@
 {
   "id": "ab-segmented-tabs",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "ab-segmented-tabs.tsx",
   "sourcePath": "components/css-animations/yui-components/YuiUiKit2.tsx",
   "registryFile": "ab-segmented-tabs.json",

package/registry/accordion-blind.json

@@ -1,7 +1,7 @@
 {
   "id": "accordion-blind",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "accordion-blind.tsx",
   "sourcePath": "components/css-animations/whimsical/WhimsicalVariations.tsx",
   "registryFile": "accordion-blind.json",

package/registry/accordion-loader.json

@@ -1,7 +1,7 @@
 {
   "id": "accordion-loader",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "accordion-loader.tsx",
   "sourcePath": "ui/loading/accordion-loader.tsx",
   "registryFile": "accordion-loader.json",

package/registry/ai-approval-card.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-approval-card",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "ai-approval-card.tsx",
   "sourcePath": "ui/ai/ai-approval-card.tsx",
   "registryFile": "ai-approval-card.json",
@@ -13,5 +13,5 @@
   "dependencies": [],
   "license": "MIT",
   "previewMode": "client",
-  "content": "\"use client\";\n\"use client\";\n\n/** Adapted from Beautiful UI (https://github.com/slev12397/beautiful-ui).\n * Copyright (c) 2026 Shane Levine. MIT License; see LICENSE.third-party.\n * Original card geometry, interactions, and motion are preserved. */\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * APPROVAL CARD (human-in-the-loop)\n * One question at a time. The stack slides vertically as you\n * move between questions (the card's height animates to fit),\n * the step counter rolls like an odometer, and the footer uses\n * pill actions — a quiet Skip and a dark Continue with a ⏎.\n * Single-choice answers auto-advance; multi-select waits.\n * ───────────────────────────────────────────────────────── */\n\nexport type ApprovalQuestion = {\n  q: string;\n  type: \"radio\" | \"check\";\n  options: string[];\n};\n\nconst QUESTIONS: ApprovalQuestion[] = [\n  {\n    q: \"How many flavors should we launch?\",\n    type: \"radio\",\n    options: [\"Three (core line)\", \"Five (full case)\", \"Just one hero\"],\n  },\n  {\n    q: \"Which mix-ins should we stock?\",\n    type: \"check\",\n    options: [\"Chocolate chips\", \"Waffle bits\", \"Sprinkles\"],\n  },\n  {\n    q: \"Which market do we enter first?\",\n    type: \"radio\",\n    options: [\"Food trucks\", \"Grocery freezers\", \"Scoop shops\"],\n  },\n];\n\nexport type ApprovalLabels = {\n  skip: string;\n  continue: string;\n  send: string;\n  customPlaceholder: string;\n  sentMessage: string;\n};\n\nconst DEFAULT_LABELS: ApprovalLabels = {\n  skip: \"Skip\",\n  continue: \"Continue\",\n  send: \"Send\",\n  customPlaceholder: \"Something else…\",\n  sentMessage: \"Answers sent\",\n};\n\nconst ROLL_MS = 400;\nconst SLIDE = \"360ms cubic-bezier(0.22, 1, 0.36, 1)\";\n\n/* odometer digits — each character that changes rolls up (or down) */\nfunction RollingDigits({ value }: { value: string }) {\n  const prevRef = useRef(value);\n  const [oldVal, setOldVal] = useState(value);\n  const [newVal, setNewVal] = useState(value);\n  const [rolling, setRolling] = useState(false);\n  const [shifted, setShifted] = useState(false);\n  const [dir, setDir] = useState<\"up\" | \"down\">(\"up\");\n\n  useEffect(() => {\n    if (prevRef.current === value) return;\n    const from = prevRef.current;\n    prevRef.current = value;\n    const fromN = parseInt(from, 10);\n    const toN = parseInt(value, 10);\n    setDir(Number.isFinite(fromN) && Number.isFinite(toN) && toN < fromN ? \"down\" : \"up\");\n    setOldVal(from);\n    setNewVal(value);\n    setRolling(true);\n    setShifted(false);\n\n    let raf2 = 0;\n    const raf1 = requestAnimationFrame(() => {\n      raf2 = requestAnimationFrame(() => setShifted(true));\n    });\n    const done = setTimeout(() => {\n      setRolling(false);\n      setOldVal(value);\n      setShifted(false);\n    }, ROLL_MS);\n\n    return () => {\n      cancelAnimationFrame(raf1);\n      cancelAnimationFrame(raf2);\n      clearTimeout(done);\n    };\n  }, [value]);\n\n  const chars = rolling ? newVal : oldVal;\n\n  return (\n    <>\n      {Array.from({ length: chars.length }, (_, i) => {\n        const o = oldVal[i] ?? \"\";\n        const n = chars[i] ?? \"\";\n        if (!rolling || o === n) {\n          return <span key={`${i}-${n}`}>{n}</span>;\n        }\n        const top = dir === \"down\" ? n : o;\n        const bottom = dir === \"down\" ? o : n;\n        const restY = dir === \"down\" ? \"0\" : \"-1em\";\n        const startY = dir === \"down\" ? \"-1em\" : \"0\";\n        return (\n          <span\n            key={`${i}-${o}-${n}-${dir}`}\n            style={{ display: \"inline-block\", position: \"relative\", overflow: \"hidden\", height: \"1em\", lineHeight: \"1em\", verticalAlign: \"-0.05em\" }}\n          >\n            <span\n              style={{\n                display: \"flex\",\n                flexDirection: \"column\",\n                transition: \"transform 350ms cubic-bezier(0.4, 0, 0.2, 1)\",\n                transform: `translateY(${shifted ? restY : startY})`,\n              }}\n            >\n              <span style={{ height: \"1em\", lineHeight: \"1em\" }}>{top}</span>\n              <span style={{ height: \"1em\", lineHeight: \"1em\" }}>{bottom}</span>\n            </span>\n          </span>\n        );\n      })}\n    </>\n  );\n}\n\nfunction Ico({ path, size = 14, sw = 2 }: { path: React.ReactNode; size?: number; sw?: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={sw} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      {path}\n    </svg>\n  );\n}\n\nfunction ApprovalCard({\n  questions = QUESTIONS,\n  labels,\n  onSubmitted,\n  onAnswerChange,\n  resettable = true,\n}: {\n  questions?: ApprovalQuestion[];\n  labels?: Partial<ApprovalLabels>;\n  onSubmitted?: (answers: Record<number, number[]>, customAnswers: Record<number, string>) => void;\n  onAnswerChange?: (questionIndex: number, answer: number[]) => void;\n  resettable?: boolean;\n  variant?: string;\n} = {}) {\n  const t = { ...DEFAULT_LABELS, ...labels };\n  const [qi, setQi] = useState(0);\n  const [answers, setAnswers] = useState<Record<number, number[]>>({});\n  const [custom, setCustom] = useState<Record<number, string>>({});\n  const answersRef = useRef(answers);\n  answersRef.current = answers;\n  const customRef = useRef(custom);\n  customRef.current = custom;\n  const [sent, setSent] = useState(false);\n  const [open, setOpen] = useState(true);\n  const reopenRef = useRef<HTMLButtonElement>(null);\n  const sentStatusRef = useRef<HTMLDivElement>(null);\n  const previousView = useRef({ open: true, sent: false });\n\n  const advanceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const questionRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const measured = useRef(false);\n  const [viewportH, setViewportH] = useState<number | undefined>(undefined);\n  const [trackY, setTrackY] = useState(0);\n  const [animate, setAnimate] = useState(false);\n  // Until the first question is measured, render only the active one so the\n  // initial (and SSR) height is Q1's height — not all questions stacked, which\n  // would flash to full height and then shrink on mount.\n  const [ready, setReady] = useState(false);\n\n  const last = qi >= questions.length - 1;\n  const selected = answers[qi] ?? [];\n  const hasAnswer = selected.length > 0 || Boolean(custom[qi]?.trim());\n\n  const sync = (withAnim: boolean) => {\n    const item = questionRefs.current[qi];\n    if (!item) return;\n    const reduce = typeof window !== \"undefined\" && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    setViewportH(item.offsetHeight);\n    setTrackY(item.offsetTop);\n    setAnimate(withAnim && !reduce);\n  };\n\n  useLayoutEffect(() => {\n    const withAnim = measured.current;\n    measured.current = true;\n    sync(withAnim);\n    setReady(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [qi, answers, custom, open, sent]);\n\n  useEffect(() => {\n    const previous = previousView.current;\n    previousView.current = { open, sent };\n    if (!open) reopenRef.current?.focus({ preventScroll: true });\n    else if (sent) sentStatusRef.current?.focus({ preventScroll: true });\n    else if (!previous.open || previous.sent) questionRefs.current[qi]?.querySelector<HTMLButtonElement>(\"button\")?.focus({ preventScroll: true });\n  }, [open, sent, qi]);\n\n  useEffect(() => {\n    const focused = document.activeElement;\n    const previousQuestion = questionRefs.current.find((item, index) => index !== qi && item?.contains(focused));\n    if (previousQuestion) questionRefs.current[qi]?.querySelector<HTMLButtonElement>(\"button\")?.focus({ preventScroll: true });\n  }, [qi]);\n\n  useEffect(() => {\n    setQi((current) => Math.max(0, Math.min(current, questions.length - 1)));\n  }, [questions.length]);\n\n  useEffect(() => {\n    const id = requestAnimationFrame(() => sync(measured.current));\n    return () => cancelAnimationFrame(id);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [qi]);\n\n  useEffect(() => {\n    const item = questionRefs.current[qi];\n    if (!item || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => sync(false));\n    observer.observe(item);\n    return () => observer.disconnect();\n  }, [qi, open, sent, questions]);\n\n  useEffect(() => () => { if (advanceTimer.current) clearTimeout(advanceTimer.current); }, []);\n\n  const goTo = (next: number) => {\n    if (advanceTimer.current) clearTimeout(advanceTimer.current);\n    setQi(Math.max(0, Math.min(Math.max(next, 0), questions.length - 1)));\n  };\n\n  const send = () => {\n    if (advanceTimer.current) clearTimeout(advanceTimer.current);\n    setSent(true);\n    onSubmitted?.(answersRef.current, customRef.current);\n  };\n\n  const advance = () => {\n    if (last) send();\n    else goTo(qi + 1);\n  };\n\n  const toggle = (index: number) => {\n    const type = questions[qi].type;\n    const current = answersRef.current;\n    const picked = current[qi] ?? [];\n    const next = type === \"radio\" ? [index] : picked.includes(index) ? picked.filter((item) => item !== index) : [...picked, index];\n    const updated = { ...current, [qi]: next };\n    answersRef.current = updated;\n    setAnswers(updated);\n    onAnswerChange?.(qi, next);\n    if (type === \"radio\") {\n      setCustom((current) => ({ ...current, [qi]: \"\" }));\n      if (advanceTimer.current) clearTimeout(advanceTimer.current);\n      advanceTimer.current = setTimeout(() => {\n        if (last) send();\n        else setQi((current) => Math.min(questions.length - 1, current + 1));\n      }, 480);\n    }\n  };\n\n  const reset = () => {\n    if (advanceTimer.current) clearTimeout(advanceTimer.current);\n    setQi(0);\n    setAnswers({});\n    setCustom({});\n    setSent(false);\n    setOpen(true);\n    measured.current = false;\n  };\n\n  if (questions.length === 0) return <div role=\"status\" className=\"text-[13px]\">No questions to approve.</div>;\n\n  if (!open) {\n    return (\n      <button ref={reopenRef} type=\"button\" onClick={() => setOpen(true)} className=\"rounded-[8px] bg-[var(--surface)] px-3 py-2 text-[12.5px] font-medium text-[var(--ink)] shadow-[var(--shadow-btn)] transition-colors duration-150 hover:bg-[var(--hover)]\">\n        Open approval\n      </button>\n    );\n  }\n\n  if (sent) {\n    return (\n      <div ref={sentStatusRef} tabIndex={-1} role=\"status\" className=\"flex w-full max-w-80 flex-wrap items-center gap-3\" style={{ animation: \"mova-ai-approval-card-pop-in 260ms cubic-bezier(0.23,1,0.32,1) both\" }}>\n        <span className=\"inline-flex items-center gap-1.5 rounded-full bg-[var(--green-tint)] py-1 pr-2.5 pl-1 text-[12.5px] font-medium text-[var(--green)]\">\n          <span className=\"flex size-4.5 items-center justify-center rounded-full bg-[var(--green)] text-white\">\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 6L9 17l-5-5\" /></svg>\n          </span>\n          {t.sentMessage}\n        </span>\n        {resettable && (\n          <button type=\"button\" onClick={reset} className=\"text-[12px] font-medium text-[var(--ink-3)] transition-colors duration-150 hover:text-[var(--ink)]\">\n            Start over\n          </button>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"w-full max-w-80\">\n      <div className=\"relative overflow-hidden rounded-[10px] bg-[var(--surface)] shadow-[var(--shadow-card)]\" style={{ animation: \"mova-ai-approval-card-fade-up 380ms cubic-bezier(0.23,1,0.32,1) both\" }}>\n        <button\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={() => { if (advanceTimer.current) clearTimeout(advanceTimer.current); setOpen(false); }}\n          className=\"primitive-icon-button absolute right-2.5 top-2.5 z-10 text-[var(--ink-3)] transition-colors duration-100 hover:bg-[var(--hover)] hover:text-[var(--ink)]\"\n        >\n          <Ico size={14} sw={2.2} path={<path d=\"M18 6L6 18M6 6l12 12\" />} />\n        </button>\n        <div className=\"primitive-card-pad\">\n          {/* the question itself is the heading */}\n          <div\n            className=\"overflow-hidden\"\n            style={{ height: viewportH, transition: animate ? `height ${SLIDE}` : undefined }}\n            aria-live=\"polite\"\n          >\n            <div\n              style={{\n                position: \"relative\",\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: 26,\n                transform: `translate3d(0, ${-trackY}px, 0)`,\n                transition: animate ? `transform ${SLIDE}` : undefined,\n                willChange: \"transform\",\n              }}\n            >\n              {questions.map((question, qIdx) => {\n                const active = qIdx === qi;\n                // Before the first measure, mount only the active question so the\n                // card opens at its real height instead of flashing to full height.\n                if (!ready && !active) return null;\n                const picked = answers[qIdx] ?? [];\n                const questionStyle: CSSProperties = {\n                  opacity: active ? 1 : 0,\n                  transition: animate ? `opacity ${SLIDE}` : undefined,\n                  pointerEvents: active ? undefined : \"none\",\n                };\n                return (\n                  <div\n                    key={qIdx}\n                    ref={(el) => { questionRefs.current[qIdx] = el; }}\n                    aria-hidden={active ? undefined : true}\n                    style={questionStyle}\n                  >\n                    <div className=\"pr-7 text-[14px] font-medium text-[var(--ink)]\">{question.q}</div>\n                    <GlideMenu className=\"mt-2.5 flex flex-col gap-1\" highlightClassName=\"inset-x-0 rounded-[8px] bg-[var(--hover)]\">\n                      {question.options.map((option, i) => {\n                        const on = picked.includes(i);\n                        return (\n                          <button\n                            key={option}\n                            type=\"button\"\n                            data-menu-row\n                            aria-pressed={on}\n                            tabIndex={active ? 0 : -1}\n                            onClick={() => { if (active) toggle(i); }}\n                            className=\"relative z-10 flex items-center gap-1.5 rounded-[8px] pl-1 pr-2 py-1 text-left transition-colors duration-100\"\n                          >\n                            <span\n                              className={`flex size-4 shrink-0 items-center justify-center transition-colors duration-200\n                                ${question.type === \"radio\" ? \"rounded-full\" : \"rounded-[5px]\"}\n                                ${on ? \"bg-[var(--ink)] text-[var(--canvas)]\" : \"shadow-[inset_0_0_0_1.5px_var(--line-strong)] text-transparent\"}`}\n                            >\n                              {question.type === \"radio\" ? (\n                                <span className=\"size-1.5 rounded-full bg-[var(--canvas)] transition-transform duration-200\" style={{ transform: on ? \"scale(1)\" : \"scale(0)\" }} />\n                              ) : (\n                                <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 6L9 17l-5-5\" /></svg>\n                              )}\n                            </span>\n                            <span className={`text-[13px] leading-snug transition-colors duration-200 ${on ? \"text-[var(--ink)]\" : \"text-[var(--ink-2)]\"}`}>\n                              {option}\n                            </span>\n                          </button>\n                        );\n                      })}\n                      <label data-menu-row className=\"relative z-10 flex items-center gap-1.5 rounded-[8px] pl-1 pr-2 py-1 transition-colors duration-100\">\n                        <input\n                          value={custom[qIdx] ?? \"\"}\n                          tabIndex={active ? 0 : -1}\n                          onChange={(event) => {\n                            if (!active) return;\n                            if (advanceTimer.current) clearTimeout(advanceTimer.current);\n                            setCustom((current) => ({ ...current, [qIdx]: event.target.value }));\n                            if (question.type === \"radio\") setAnswers((current) => ({ ...current, [qIdx]: [] }));\n                          }}\n                          onKeyDown={(event) => {\n                            if (event.key === \"Enter\" && hasAnswer) {\n                              event.preventDefault();\n                              advance();\n                            }\n                          }}\n                          placeholder={t.customPlaceholder}\n                          aria-label=\"Custom answer\"\n                          className=\"min-w-0 flex-1 bg-transparent pl-1.5 text-[13px] text-[var(--ink)] outline-none placeholder:text-[var(--ink-3)]\"\n                        />\n                      </label>\n                    </GlideMenu>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n\n        {/* footer — step nav (rolling counter) + pill actions */}\n        <div className=\"primitive-card-footer flex items-center justify-between gap-3\">\n          <div className=\"flex items-center gap-1 text-[var(--ink-3)]\">\n            <button\n              type=\"button\"\n              aria-label=\"Previous question\"\n              disabled={qi <= 0}\n              onClick={() => goTo(qi - 1)}\n              className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors duration-100 enabled:hover:text-[var(--ink)] disabled:opacity-30\"\n            >\n              <Ico size={14} path={<path d=\"M18 15l-6-6-6 6\" />} />\n            </button>\n            <span className=\"inline-flex items-center text-[12px] font-medium tabular-nums text-[var(--ink-3)]\" style={{ letterSpacing: \"-0.1px\", lineHeight: 1 }}>\n              <RollingDigits value={`${qi + 1} / ${questions.length}`} />\n            </span>\n            <button\n              type=\"button\"\n              aria-label=\"Next question\"\n              disabled={last}\n              onClick={() => goTo(qi + 1)}\n              className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors duration-100 enabled:hover:text-[var(--ink)] disabled:opacity-30\"\n            >\n              <Ico size={14} path={<path d=\"M6 9l6 6 6-6\" />} />\n            </button>\n          </div>\n\n          <div className=\"-mr-0.5 flex items-center gap-1.5\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => { if (advanceTimer.current) clearTimeout(advanceTimer.current); if (last) setOpen(false); else goTo(qi + 1); }}>\n              {t.skip}\n            </Button>\n            <Button variant=\"accent\" size=\"sm\" disabled={!hasAnswer} onClick={advance}>\n              {last ? t.send : t.continue}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype GlideMenuProps = {\n  children: ReactNode;\n  className?: string;\n  highlightClassName?: string;\n  rowSelector?: string;\n};\n\n/** A single hover layer that glides between interactive menu rows. */\nfunction GlideMenu({\n  children,\n  className = \"\",\n  highlightClassName = \"inset-x-0 rounded-[8px] bg-[var(--hover)]\",\n  rowSelector = \"[data-menu-row]\",\n}: GlideMenuProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [box, setBox] = useState<{ top: number; height: number } | null>(null);\n  const [visible, setVisible] = useState(false);\n\n  const moveTo = (target: EventTarget | null) => {\n    const container = ref.current;\n    if (!(target instanceof Element) || !container) return;\n    const row = target.closest(rowSelector);\n    if (!(row instanceof HTMLElement) || !container.contains(row)) return;\n    const containerRect = container.getBoundingClientRect();\n    const rowRect = row.getBoundingClientRect();\n    setBox({ top: rowRect.top - containerRect.top, height: rowRect.height });\n    setVisible(true);\n  };\n\n  return (\n    <div\n      ref={ref}\n      onMouseOver={(event) => moveTo(event.target)}\n      onMouseLeave={() => setVisible(false)}\n      onFocusCapture={(event) => moveTo(event.target)}\n      onBlurCapture={(event) => {\n        if (!ref.current?.contains(event.relatedTarget as Node | null)) setVisible(false);\n      }}\n      className={`group/glide-menu relative ${className}`}\n    >\n      <span\n        aria-hidden\n        className={`pointer-events-none absolute ${highlightClassName}`}\n        style={{\n          top: box?.top ?? 0,\n          height: box?.height ?? 0,\n          opacity: box && visible ? 1 : 0,\n          transition:\n            \"top 220ms cubic-bezier(0.23,1,0.32,1), height 220ms cubic-bezier(0.23,1,0.32,1), opacity 150ms ease\",\n        }}\n      />\n      {children}\n    </div>\n  );\n}\n\nfunction Button({variant = \"secondary\",size = \"md\",className = \"\",...props}: React.ButtonHTMLAttributes<HTMLButtonElement> & {variant?: \"secondary\" | \"ghost\" | \"accent\";size?: \"sm\" | \"md\"}) {\n  const variants = {secondary:\"bg-[var(--surface)] text-[var(--ink)] shadow-[var(--shadow-btn)] hover:bg-[var(--inset)]\", ghost:\"bg-[var(--hover-2)] text-[var(--ink)] hover:bg-[var(--line-strong)]\", accent:\"bg-[var(--accent)] text-white hover:bg-[var(--accent-ink)] shadow-[inset_0_1px_0_rgba(255,255,255,0.14)]\"};\n  return <button type=\"button\" className={`inline-flex items-center justify-center font-medium select-none transition-[transform,background-color,opacity] duration-150 ease-out active:scale-[0.96] disabled:opacity-50 disabled:pointer-events-none ${variants[variant]} ${size === \"sm\" ? \"h-[27px] px-3 text-[13px] leading-none rounded-full gap-1.5\" : \"px-4 py-[9px] text-sm leading-none rounded-full gap-2\"} ${className}`} {...props}/>;\n}\n\n/* Smooth shadow values: shadow-plugin, Copyright (c) Florian Kiem, MIT. */\nconst scopedStyles = `.mova-ai-approval-card{\n  --page: oklch(0.985 0.001 286.376);\n  --canvas: oklch(0.961 0.002 247.84);\n  --surface: oklch(1 0 0);\n  --inset: oklch(0.979 0.002 247.839);\n  --hover: oklch(0.97 0.002 247.839);\n  --hover-2: oklch(0.933 0.003 247.86);\n\n  --ink: oklch(0.247 0.006 258.361);\n  --ink-2: oklch(0.506 0.01 264.477);\n  --ink-3: oklch(0.695 0.009 264.505);\n\n  --line: oklch(0.946 0.003 264.542);\n  --line-strong: oklch(0.912 0.005 258.326);\n  --line-soft: oklch(0.966 0.002 264.542);\n  --grid-line: color-mix(in srgb, var(--line) 78%, transparent);\n  --field: oklch(0.961 0.001 286.375);\n  --stripe: oklch(0.405 0 0 / 0.075);\n  --stripe-bg: oklch(0.97 0 0);\n\n  --accent: oklch(0.626 0.205 254.947);\n  --accent-ink: oklch(0.556 0.187 255.617);\n  --accent-tint: oklch(0.96 0.019 252.878);\n\n  --green: oklch(0.603 0.155 150.883);\n  --green-tint: oklch(0.958 0.017 159.118);\n  --orange: oklch(0.689 0.179 49.902);\n  --orange-tint: oklch(0.964 0.021 67.581);\n  --red: oklch(0.621 0.192 23.042);\n  --red-tint: oklch(0.956 0.017 17.462);\n\n  --tooltip-bg: oklch(0.272 0.008 264.435);\n  --tooltip-fg: oklch(0.976 0.002 247.839);\n  --tooltip-muted: oklch(0.731 0.008 260.731);\n  --tooltip-border: oklch(0.356 0.007 264.474);\n\n  --shadow-hairline: 0 0 0 1px var(--line);\n  --shadow-btn: 0 0 0 1px var(--line-strong), var(--shadow-xs);\n  --shadow-card: 0 0 0 1px var(--line), var(--shadow-sm);\n  --shadow-raised: 0 0 0 1px var(--line), var(--shadow-md);\n  --shadow-overlay: 0 0 0 1px var(--line), var(--shadow-lg);\n  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.12);--shadow-xs: 0 0 4px 0 rgba(0, 0, 0, 0.04);--shadow-sm: 0 18px 47px 0 rgba(0, 0, 0, 0.03), 0 7.5px 19px 0 rgba(0, 0, 0, 0.02),\n    0 4px 10.5px 0 rgba(0, 0, 0, 0.02), 0 2.3px 5.8px 0 rgba(0, 0, 0, 0.01),\n    0 1.2px 3.1px 0 rgba(0, 0, 0, 0.01), 0 0.5px 1.3px 0 rgba(0, 0, 0, 0.01);--shadow-md: 0 17.54px 23.39px 0 rgba(0, 0, 0, 0.04), 0 9.4px 12.5px 0 rgba(0, 0, 0, 0.03),\n    0 5.25px 7px 0 rgba(0, 0, 0, 0.02), 0 2.79px 3.72px -2px rgba(0, 0, 0, 0.01),\n    0 1.16px 1.5px 0 rgba(0, 0, 0, 0.01);--radius-control:8px;\n width:100%;max-width:320px;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1.5;letter-spacing:-.01em;color:var(--ink);}\n.mova-ai-approval-card[data-theme=\"dark\"]{\n  --page: oklch(0.209 0.004 264.477);\n  --canvas: oklch(0.231 0.004 264.487);\n  --surface: oklch(0.26 0.006 271.191);\n  --inset: oklch(0.243 0.004 264.492);\n  --hover: oklch(0.289 0.006 271.22);\n  --hover-2: oklch(0.318 0.007 274.747);\n\n  --ink: oklch(0.964 0.002 247.839);\n  --ink-2: oklch(0.731 0.008 260.731);\n  --ink-3: oklch(0.541 0.01 264.484);\n\n  --line: oklch(0.308 0.006 258.354);\n  --line-strong: oklch(0.356 0.007 264.474);\n  --line-soft: oklch(0.278 0.006 258.354);\n  --field: oklch(0.293 0.006 271.223);\n  --stripe: oklch(1 0 0 / 0.055);\n  --stripe-bg: oklch(0.226 0.004 264.485);\n\n  --accent: oklch(0.68 0.173 253.301);\n  --accent-ink: oklch(0.788 0.113 248.33);\n  --accent-tint: oklch(0.68 0.173 253.301 / 0.16);\n\n  --green: oklch(0.705 0.154 153.814);\n  --green-tint: oklch(0.705 0.154 153.814 / 0.14);\n  --orange: oklch(0.746 0.156 55.642);\n  --orange-tint: oklch(0.746 0.156 55.642 / 0.14);\n  --red: oklch(0.666 0.18 21.433);\n  --red-tint: oklch(0.666 0.18 21.433 / 0.14);\n\n  --tooltip-bg: oklch(0.182 0.004 264.459);\n  --tooltip-fg: oklch(0.964 0.002 247.839);\n  --tooltip-muted: oklch(0.731 0.008 260.731);\n  --tooltip-border: oklch(0.308 0.006 258.354);\n\n  --shadow-hairline: 0 0 0 1px var(--line);\n  --shadow-btn: 0 0 0 1px oklch(1 0 0 / 0.1), 0 1px 2px oklch(0 0 0 / 0.3);\n  --shadow-card:\n    0 0 0 1px oklch(1 0 0 / 0.11), 0 1px 2px oklch(0 0 0 / 0.2),\n    0 2px 6px oklch(0 0 0 / 0.2);\n  --shadow-raised:\n    0 0 0 1px oklch(1 0 0 / 0.13), 0 2px 10px oklch(0 0 0 / 0.22);\n  --shadow-overlay:\n    0 0 0 1px oklch(1 0 0 / 0.15), 0 8px 28px oklch(0 0 0 / 0.34);\n  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.4);}\n.mova-ai-approval-card .primitive-card-pad{padding:12px} .mova-ai-approval-card .primitive-card-bar{padding:10px 12px} .mova-ai-approval-card .primitive-card-footer{padding:10px} .mova-ai-approval-card .primitive-icon-button{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px}\n.mova-ai-approval-card :is(button,input,[tabindex]):focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px} .mova-ai-approval-card button:not(:disabled){cursor:pointer} .mova-ai-approval-card code{overflow-wrap:anywhere} .mova-ai-approval-card *, .mova-ai-approval-card *::before,.mova-ai-approval-card *::after{box-sizing:border-box}\n@keyframes mova-ai-approval-card-pop-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n@keyframes mova-ai-approval-card-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}\n@keyframes mova-ai-approval-card-shimmer-text{from{background-position:150% center}to{background-position:-50% center}}\n@media(prefers-reduced-motion:reduce){.mova-ai-approval-card *, .mova-ai-approval-card *::before, .mova-ai-approval-card *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}`;\n\nexport function AIApprovalCard({theme = \"light\", ...props}: React.ComponentProps<typeof ApprovalCard> & {theme?: \"light\" | \"dark\"} = {}) {\n return <div className=\"mova-ai-approval-card\" data-theme={theme}><style>{scopedStyles}</style><ApprovalCard {...props} /></div>;\n}\n"
+  "content": "\"use client\";\n\"use client\";\n\n/** Adapted from Beautiful UI (https://github.com/slev12397/beautiful-ui).\n * Copyright (c) 2026 Shane Levine. MIT License; see LICENSE.third-party.\n * Original card geometry, interactions, and motion are preserved. */\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * APPROVAL CARD (human-in-the-loop)\n * One question at a time. The stack slides vertically as you\n * move between questions (the card's height animates to fit),\n * the step counter rolls like an odometer, and the footer uses\n * pill actions — a quiet Skip and a dark Continue with a ⏎.\n * Single-choice answers auto-advance; multi-select waits.\n * ───────────────────────────────────────────────────────── */\n\nexport type ApprovalQuestion = {\n  q: string;\n  type: \"radio\" | \"check\";\n  options: string[];\n};\n\nconst QUESTIONS: ApprovalQuestion[] = [\n  {\n    q: \"How many flavors should we launch?\",\n    type: \"radio\",\n    options: [\"Three (core line)\", \"Five (full case)\", \"Just one hero\"],\n  },\n  {\n    q: \"Which mix-ins should we stock?\",\n    type: \"check\",\n    options: [\"Chocolate chips\", \"Waffle bits\", \"Sprinkles\"],\n  },\n  {\n    q: \"Which market do we enter first?\",\n    type: \"radio\",\n    options: [\"Food trucks\", \"Grocery freezers\", \"Scoop shops\"],\n  },\n];\n\nexport type ApprovalLabels = {\n  skip: string;\n  continue: string;\n  send: string;\n  customPlaceholder: string;\n  sentMessage: string;\n};\n\nconst DEFAULT_LABELS: ApprovalLabels = {\n  skip: \"Skip\",\n  continue: \"Continue\",\n  send: \"Send\",\n  customPlaceholder: \"Something else…\",\n  sentMessage: \"Answers sent\",\n};\n\nconst ROLL_MS = 400;\nconst SLIDE = \"360ms cubic-bezier(0.22, 1, 0.36, 1)\";\n\n/* odometer digits — each character that changes rolls up (or down) */\nfunction RollingDigits({ value }: { value: string }) {\n  const prevRef = useRef(value);\n  const [oldVal, setOldVal] = useState(value);\n  const [newVal, setNewVal] = useState(value);\n  const [rolling, setRolling] = useState(false);\n  const [shifted, setShifted] = useState(false);\n  const [dir, setDir] = useState<\"up\" | \"down\">(\"up\");\n\n  useEffect(() => {\n    if (prevRef.current === value) return;\n    const from = prevRef.current;\n    prevRef.current = value;\n    const fromN = parseInt(from, 10);\n    const toN = parseInt(value, 10);\n    setDir(Number.isFinite(fromN) && Number.isFinite(toN) && toN < fromN ? \"down\" : \"up\");\n    setOldVal(from);\n    setNewVal(value);\n    setRolling(true);\n    setShifted(false);\n\n    let raf2 = 0;\n    const raf1 = requestAnimationFrame(() => {\n      raf2 = requestAnimationFrame(() => setShifted(true));\n    });\n    const done = setTimeout(() => {\n      setRolling(false);\n      setOldVal(value);\n      setShifted(false);\n    }, ROLL_MS);\n\n    return () => {\n      cancelAnimationFrame(raf1);\n      cancelAnimationFrame(raf2);\n      clearTimeout(done);\n    };\n  }, [value]);\n\n  const chars = rolling ? newVal : oldVal;\n\n  return (\n    <>\n      {Array.from({ length: chars.length }, (_, i) => {\n        const o = oldVal[i] ?? \"\";\n        const n = chars[i] ?? \"\";\n        if (!rolling || o === n) {\n          return <span key={`${i}-${n}`}>{n}</span>;\n        }\n        const top = dir === \"down\" ? n : o;\n        const bottom = dir === \"down\" ? o : n;\n        const restY = dir === \"down\" ? \"0\" : \"-1em\";\n        const startY = dir === \"down\" ? \"-1em\" : \"0\";\n        return (\n          <span\n            key={`${i}-${o}-${n}-${dir}`}\n            style={{ display: \"inline-block\", position: \"relative\", overflow: \"hidden\", height: \"1em\", lineHeight: \"1em\", verticalAlign: \"-0.05em\" }}\n          >\n            <span\n              style={{\n                display: \"flex\",\n                flexDirection: \"column\",\n                transition: \"transform 350ms cubic-bezier(0.4, 0, 0.2, 1)\",\n                transform: `translateY(${shifted ? restY : startY})`,\n              }}\n            >\n              <span style={{ height: \"1em\", lineHeight: \"1em\" }}>{top}</span>\n              <span style={{ height: \"1em\", lineHeight: \"1em\" }}>{bottom}</span>\n            </span>\n          </span>\n        );\n      })}\n    </>\n  );\n}\n\nfunction Ico({ path, size = 14, sw = 2 }: { path: React.ReactNode; size?: number; sw?: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={sw} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      {path}\n    </svg>\n  );\n}\n\nfunction ApprovalCard({\n  questions = QUESTIONS,\n  labels,\n  onSubmitted,\n  onAnswerChange,\n  resettable = true,\n}: {\n  questions?: ApprovalQuestion[];\n  labels?: Partial<ApprovalLabels>;\n  onSubmitted?: (answers: Record<number, number[]>, customAnswers: Record<number, string>) => void;\n  onAnswerChange?: (questionIndex: number, answer: number[]) => void;\n  resettable?: boolean;\n  variant?: string;\n} = {}) {\n  const t = { ...DEFAULT_LABELS, ...labels };\n  const [qi, setQi] = useState(0);\n  const [answers, setAnswers] = useState<Record<number, number[]>>({});\n  const [custom, setCustom] = useState<Record<number, string>>({});\n  const answersRef = useRef(answers);\n  answersRef.current = answers;\n  const customRef = useRef(custom);\n  customRef.current = custom;\n  const [sent, setSent] = useState(false);\n  const [open, setOpen] = useState(true);\n  const reopenRef = useRef<HTMLButtonElement>(null);\n  const sentStatusRef = useRef<HTMLDivElement>(null);\n  const previousView = useRef({ open: true, sent: false });\n\n  const advanceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const questionRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const measured = useRef(false);\n  const [viewportH, setViewportH] = useState<number | undefined>(undefined);\n  const [trackY, setTrackY] = useState(0);\n  const [animate, setAnimate] = useState(false);\n  // Until the first question is measured, render only the active one so the\n  // initial (and SSR) height is Q1's height — not all questions stacked, which\n  // would flash to full height and then shrink on mount.\n  const [ready, setReady] = useState(false);\n\n  const last = qi >= questions.length - 1;\n  const selected = answers[qi] ?? [];\n  const hasAnswer = selected.length > 0 || Boolean(custom[qi]?.trim());\n\n  const sync = (withAnim: boolean) => {\n    const item = questionRefs.current[qi];\n    if (!item) return;\n    const reduce = typeof window !== \"undefined\" && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    setViewportH(item.offsetHeight);\n    setTrackY(item.offsetTop);\n    setAnimate(withAnim && !reduce);\n  };\n\n  useLayoutEffect(() => {\n    const withAnim = measured.current;\n    measured.current = true;\n    sync(withAnim);\n    setReady(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [qi, answers, custom, open, sent]);\n\n  useEffect(() => {\n    const previous = previousView.current;\n    previousView.current = { open, sent };\n    if (!open) reopenRef.current?.focus({ preventScroll: true });\n    else if (sent) sentStatusRef.current?.focus({ preventScroll: true });\n    else if (!previous.open || previous.sent) questionRefs.current[qi]?.querySelector<HTMLButtonElement>(\"button\")?.focus({ preventScroll: true });\n  }, [open, sent, qi]);\n\n  useEffect(() => {\n    const focused = document.activeElement;\n    const previousQuestion = questionRefs.current.find((item, index) => index !== qi && item?.contains(focused));\n    if (previousQuestion) questionRefs.current[qi]?.querySelector<HTMLButtonElement>(\"button\")?.focus({ preventScroll: true });\n  }, [qi]);\n\n  useEffect(() => {\n    setQi((current) => Math.max(0, Math.min(current, questions.length - 1)));\n  }, [questions.length]);\n\n  useEffect(() => {\n    const id = requestAnimationFrame(() => sync(measured.current));\n    return () => cancelAnimationFrame(id);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [qi]);\n\n  useEffect(() => {\n    const item = questionRefs.current[qi];\n    if (!item || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => sync(false));\n    observer.observe(item);\n    return () => observer.disconnect();\n  }, [qi, open, sent, questions]);\n\n  useEffect(() => () => { if (advanceTimer.current) clearTimeout(advanceTimer.current); }, []);\n\n  const goTo = (next: number) => {\n    if (advanceTimer.current) clearTimeout(advanceTimer.current);\n    setQi(Math.max(0, Math.min(Math.max(next, 0), questions.length - 1)));\n  };\n\n  const send = () => {\n    if (advanceTimer.current) clearTimeout(advanceTimer.current);\n    setSent(true);\n    onSubmitted?.(answersRef.current, customRef.current);\n  };\n\n  const advance = () => {\n    if (last) send();\n    else goTo(qi + 1);\n  };\n\n  const toggle = (index: number) => {\n    const type = questions[qi].type;\n    const current = answersRef.current;\n    const picked = current[qi] ?? [];\n    const next = type === \"radio\" ? [index] : picked.includes(index) ? picked.filter((item) => item !== index) : [...picked, index];\n    const updated = { ...current, [qi]: next };\n    answersRef.current = updated;\n    setAnswers(updated);\n    onAnswerChange?.(qi, next);\n    if (type === \"radio\") {\n      setCustom((current) => ({ ...current, [qi]: \"\" }));\n      if (advanceTimer.current) clearTimeout(advanceTimer.current);\n      advanceTimer.current = setTimeout(() => {\n        if (last) send();\n        else setQi((current) => Math.min(questions.length - 1, current + 1));\n      }, 480);\n    }\n  };\n\n  const reset = () => {\n    if (advanceTimer.current) clearTimeout(advanceTimer.current);\n    setQi(0);\n    setAnswers({});\n    setCustom({});\n    setSent(false);\n    setOpen(true);\n    measured.current = false;\n  };\n\n  if (questions.length === 0) return <div role=\"status\" className=\"text-[13px]\">No questions to approve.</div>;\n\n  if (!open) {\n    return (\n      <button ref={reopenRef} type=\"button\" onClick={() => setOpen(true)} className=\"rounded-[8px] bg-[var(--mova-ai-surface,#fff)] px-3 py-2 text-[12.5px] font-medium text-[var(--mova-ai-ink,#202020)] shadow-[var(--mova-ai-shadow-btn,none)] transition-colors duration-150 hover:bg-[var(--mova-ai-hover,#f1f1f1)]\">\n        Open approval\n      </button>\n    );\n  }\n\n  if (sent) {\n    return (\n      <div ref={sentStatusRef} tabIndex={-1} role=\"status\" className=\"flex w-full max-w-80 flex-wrap items-center gap-3\" style={{ animation: \"mova-ai-approval-card-pop-in 260ms cubic-bezier(0.23,1,0.32,1) both\" }}>\n        <span className=\"inline-flex items-center gap-1.5 rounded-full bg-[var(--mova-ai-success-tint,#e8f3ec)] py-1 pr-2.5 pl-1 text-[12.5px] font-medium text-[var(--mova-ai-success,#28734d)]\">\n          <span className=\"flex size-4.5 items-center justify-center rounded-full bg-[var(--mova-ai-success,#28734d)] text-white\">\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 6L9 17l-5-5\" /></svg>\n          </span>\n          {t.sentMessage}\n        </span>\n        {resettable && (\n          <button type=\"button\" onClick={reset} className=\"text-[12px] font-medium text-[var(--mova-ai-ink-muted,#858585)] transition-colors duration-150 hover:text-[var(--mova-ai-ink,#202020)]\">\n            Start over\n          </button>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"w-full max-w-80\">\n      <div className=\"relative overflow-hidden rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] text-[color:var(--mova-ai-ink,#202020)] shadow-[var(--mova-ai-shadow-card,none)]\" style={{ animation: \"mova-ai-approval-card-fade-up 380ms cubic-bezier(0.23,1,0.32,1) both\" }}>\n        <button\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={() => { if (advanceTimer.current) clearTimeout(advanceTimer.current); setOpen(false); }}\n          className=\"primitive-icon-button absolute right-2.5 top-2.5 z-10 text-[var(--mova-ai-ink-muted,#858585)] transition-colors duration-100 hover:bg-[var(--mova-ai-hover,#f1f1f1)] hover:text-[var(--mova-ai-ink,#202020)]\"\n        >\n          <Ico size={14} sw={2.2} path={<path d=\"M18 6L6 18M6 6l12 12\" />} />\n        </button>\n        <div className=\"primitive-card-pad\">\n          {/* the question itself is the heading */}\n          <div\n            className=\"overflow-hidden\"\n            style={{ height: viewportH, transition: animate ? `height ${SLIDE}` : undefined }}\n            aria-live=\"polite\"\n          >\n            <div\n              style={{\n                position: \"relative\",\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: 26,\n                transform: `translate3d(0, ${-trackY}px, 0)`,\n                transition: animate ? `transform ${SLIDE}` : undefined,\n                willChange: \"transform\",\n              }}\n            >\n              {questions.map((question, qIdx) => {\n                const active = qIdx === qi;\n                // Before the first measure, mount only the active question so the\n                // card opens at its real height instead of flashing to full height.\n                if (!ready && !active) return null;\n                const picked = answers[qIdx] ?? [];\n                const questionStyle: CSSProperties = {\n                  opacity: active ? 1 : 0,\n                  transition: animate ? `opacity ${SLIDE}` : undefined,\n                  pointerEvents: active ? undefined : \"none\",\n                };\n                return (\n                  <div\n                    key={qIdx}\n                    ref={(el) => { questionRefs.current[qIdx] = el; }}\n                    aria-hidden={active ? undefined : true}\n                    style={questionStyle}\n                  >\n                    <div className=\"pr-7 text-[14px] font-medium text-[var(--mova-ai-ink,#202020)]\">{question.q}</div>\n                    <GlideMenu className=\"mt-2.5 flex flex-col gap-1\" highlightClassName=\"inset-x-0 rounded-[8px] bg-[var(--mova-ai-hover,#f1f1f1)]\">\n                      {question.options.map((option, i) => {\n                        const on = picked.includes(i);\n                        return (\n                          <button\n                            key={option}\n                            type=\"button\"\n                            data-menu-row\n                            aria-pressed={on}\n                            tabIndex={active ? 0 : -1}\n                            onClick={() => { if (active) toggle(i); }}\n                            className=\"relative z-10 flex items-center gap-1.5 rounded-[8px] pl-1 pr-2 py-1 text-left transition-colors duration-100\"\n                          >\n                            <span\n                              className={`flex size-4 shrink-0 items-center justify-center transition-colors duration-200\n                                ${question.type === \"radio\" ? \"rounded-full\" : \"rounded-[5px]\"}\n                                ${on ? \"bg-[var(--mova-ai-ink,#202020)] text-[var(--mova-ai-canvas,#f4f4f4)]\" : \"shadow-[inset_0_0_0_1.5px_var(--mova-ai-border-strong,#c8c8c8)] text-transparent\"}`}\n                            >\n                              {question.type === \"radio\" ? (\n                                <span className=\"size-1.5 rounded-full bg-[var(--mova-ai-canvas,#f4f4f4)] transition-transform duration-200\" style={{ transform: on ? \"scale(1)\" : \"scale(0)\" }} />\n                              ) : (\n                                <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 6L9 17l-5-5\" /></svg>\n                              )}\n                            </span>\n                            <span className={`text-[13px] leading-snug transition-colors duration-200 ${on ? \"text-[var(--mova-ai-ink,#202020)]\" : \"text-[var(--mova-ai-ink-secondary,#666)]\"}`}>\n                              {option}\n                            </span>\n                          </button>\n                        );\n                      })}\n                      <label data-menu-row className=\"relative z-10 flex items-center gap-1.5 rounded-[8px] pl-1 pr-2 py-1 transition-colors duration-100\">\n                        <input\n                          value={custom[qIdx] ?? \"\"}\n                          tabIndex={active ? 0 : -1}\n                          onChange={(event) => {\n                            if (!active) return;\n                            if (advanceTimer.current) clearTimeout(advanceTimer.current);\n                            setCustom((current) => ({ ...current, [qIdx]: event.target.value }));\n                            if (question.type === \"radio\") setAnswers((current) => ({ ...current, [qIdx]: [] }));\n                          }}\n                          onKeyDown={(event) => {\n                            if (event.key === \"Enter\" && hasAnswer) {\n                              event.preventDefault();\n                              advance();\n                            }\n                          }}\n                          placeholder={t.customPlaceholder}\n                          aria-label=\"Custom answer\"\n                          className=\"min-w-0 flex-1 bg-transparent pl-1.5 text-[13px] text-[var(--mova-ai-ink,#202020)] outline-none placeholder:text-[var(--mova-ai-ink-muted,#858585)]\"\n                        />\n                      </label>\n                    </GlideMenu>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n\n        {/* footer — step nav (rolling counter) + pill actions */}\n        <div className=\"primitive-card-footer flex items-center justify-between gap-3\">\n          <div className=\"flex items-center gap-1 text-[var(--mova-ai-ink-muted,#858585)]\">\n            <button\n              type=\"button\"\n              aria-label=\"Previous question\"\n              disabled={qi <= 0}\n              onClick={() => goTo(qi - 1)}\n              className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors duration-100 enabled:hover:text-[var(--mova-ai-ink,#202020)] disabled:opacity-30\"\n            >\n              <Ico size={14} path={<path d=\"M18 15l-6-6-6 6\" />} />\n            </button>\n            <span className=\"inline-flex items-center text-[12px] font-medium tabular-nums text-[var(--mova-ai-ink-muted,#858585)]\" style={{ letterSpacing: \"-0.1px\", lineHeight: 1 }}>\n              <RollingDigits value={`${qi + 1} / ${questions.length}`} />\n            </span>\n            <button\n              type=\"button\"\n              aria-label=\"Next question\"\n              disabled={last}\n              onClick={() => goTo(qi + 1)}\n              className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors duration-100 enabled:hover:text-[var(--mova-ai-ink,#202020)] disabled:opacity-30\"\n            >\n              <Ico size={14} path={<path d=\"M6 9l6 6 6-6\" />} />\n            </button>\n          </div>\n\n          <div className=\"-mr-0.5 flex items-center gap-1.5\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => { if (advanceTimer.current) clearTimeout(advanceTimer.current); if (last) setOpen(false); else goTo(qi + 1); }}>\n              {t.skip}\n            </Button>\n            <Button variant=\"accent\" size=\"sm\" disabled={!hasAnswer} onClick={advance}>\n              {last ? t.send : t.continue}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype GlideMenuProps = {\n  children: ReactNode;\n  className?: string;\n  highlightClassName?: string;\n  rowSelector?: string;\n};\n\n/** A single hover layer that glides between interactive menu rows. */\nfunction GlideMenu({\n  children,\n  className = \"\",\n  highlightClassName = \"inset-x-0 rounded-[8px] bg-[var(--mova-ai-hover,#f1f1f1)]\",\n  rowSelector = \"[data-menu-row]\",\n}: GlideMenuProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [box, setBox] = useState<{ top: number; height: number } | null>(null);\n  const [visible, setVisible] = useState(false);\n\n  const moveTo = (target: EventTarget | null) => {\n    const container = ref.current;\n    if (!(target instanceof Element) || !container) return;\n    const row = target.closest(rowSelector);\n    if (!(row instanceof HTMLElement) || !container.contains(row)) return;\n    const containerRect = container.getBoundingClientRect();\n    const rowRect = row.getBoundingClientRect();\n    setBox({ top: rowRect.top - containerRect.top, height: rowRect.height });\n    setVisible(true);\n  };\n\n  return (\n    <div\n      ref={ref}\n      onMouseOver={(event) => moveTo(event.target)}\n      onMouseLeave={() => setVisible(false)}\n      onFocusCapture={(event) => moveTo(event.target)}\n      onBlurCapture={(event) => {\n        if (!ref.current?.contains(event.relatedTarget as Node | null)) setVisible(false);\n      }}\n      className={`group/glide-menu relative ${className}`}\n    >\n      <span\n        aria-hidden\n        className={`pointer-events-none absolute ${highlightClassName}`}\n        style={{\n          top: box?.top ?? 0,\n          height: box?.height ?? 0,\n          opacity: box && visible ? 1 : 0,\n          transition:\n            \"top 220ms cubic-bezier(0.23,1,0.32,1), height 220ms cubic-bezier(0.23,1,0.32,1), opacity 150ms ease\",\n        }}\n      />\n      {children}\n    </div>\n  );\n}\n\nfunction Button({variant = \"secondary\",size = \"md\",className = \"\",...props}: React.ButtonHTMLAttributes<HTMLButtonElement> & {variant?: \"secondary\" | \"ghost\" | \"accent\";size?: \"sm\" | \"md\"}) {\n  const variants = {secondary:\"bg-[var(--mova-ai-surface,#fff)] text-[var(--mova-ai-ink,#202020)] shadow-[var(--mova-ai-shadow-btn,none)] hover:bg-[var(--mova-ai-inset,#f8f8f8)]\", ghost:\"bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[var(--mova-ai-ink,#202020)] hover:bg-[var(--mova-ai-border-strong,#c8c8c8)]\", accent:\"approval-accent shadow-[inset_0_1px_0_rgba(255,255,255,0.14)]\"};\n  return <button type=\"button\" className={`inline-flex items-center justify-center font-medium select-none transition-[transform,background-color,color,opacity,filter] duration-150 ease-out active:scale-[0.96] active:brightness-110 disabled:opacity-50 disabled:pointer-events-none ${variants[variant]} ${size === \"sm\" ? \"h-[27px] px-3 text-[13px] leading-none rounded-full gap-1.5\" : \"px-4 py-[9px] text-sm leading-none rounded-full gap-2\"} ${className}`} {...props}/>;\n}\n\n/* Smooth shadow values: shadow-plugin, Copyright (c) Florian Kiem, MIT. */\nconst AI_THEME_STYLES = \"/* Shared public tokens for the standalone AI component family. */\\n.mova-ai-theme {\\n  color-scheme: light;\\n  color: var(--mova-ai-ink, #202020);\\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", sans-serif;\\n  font-size: 13px;\\n  line-height: 1.45;\\n  letter-spacing: -0.01em;\\n\\n  --mova-ai-page: #f7f7f7;\\n  --mova-ai-canvas: #f4f4f4;\\n  --mova-ai-surface: #ffffff;\\n  --mova-ai-inset: #f8f8f8;\\n  --mova-ai-hover: #f1f1f1;\\n  --mova-ai-hover-strong: #e9e9e9;\\n\\n  --mova-ai-ink: #202020;\\n  --mova-ai-ink-secondary: #666666;\\n  --mova-ai-ink-muted: #858585;\\n\\n  --mova-ai-border: #dedede;\\n  --mova-ai-border-soft: #ededed;\\n  --mova-ai-border-strong: #c8c8c8;\\n  --mova-ai-field: #f6f6f6;\\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\\n  --mova-ai-stripe-bg: #242424;\\n\\n  --mova-ai-accent: #454545;\\n  --mova-ai-accent-ink: #333333;\\n  --mova-ai-accent-foreground: #ffffff;\\n  --mova-ai-accent-tint: #eeeeee;\\n  --mova-ai-success: #28734d;\\n  --mova-ai-success-tint: #e8f3ec;\\n  --mova-ai-warning: #986517;\\n  --mova-ai-warning-tint: #f8f0df;\\n  --mova-ai-danger: #a33c3c;\\n  --mova-ai-danger-tint: #f7eaea;\\n  --mova-ai-info: #496b89;\\n  --mova-ai-info-tint: #eaf0f5;\\n  --mova-ai-neutral-status: #69737d;\\n  --mova-ai-status-on: #ffffff;\\n\\n  --mova-ai-tooltip-bg: #292929;\\n  --mova-ai-tooltip-fg: #f6f6f6;\\n  --mova-ai-tooltip-muted: #c3c3c3;\\n  --mova-ai-tooltip-border: #484848;\\n\\n  --mova-ai-radius-panel: 8px;\\n  --mova-ai-radius-control: 8px;\\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\\n}\\n\\n.mova-ai-theme[data-theme=\\\"dark\\\"] {\\n  color-scheme: dark;\\n  --mova-ai-page: #181818;\\n  --mova-ai-canvas: #202020;\\n  --mova-ai-surface: #272727;\\n  --mova-ai-inset: #1d1d1d;\\n  --mova-ai-hover: #2d2d2d;\\n  --mova-ai-hover-strong: #393939;\\n\\n  --mova-ai-ink: #eeeeee;\\n  --mova-ai-ink-secondary: #b5b5b5;\\n  --mova-ai-ink-muted: #929292;\\n\\n  --mova-ai-border: #3b3b3b;\\n  --mova-ai-border-soft: #303030;\\n  --mova-ai-border-strong: #505050;\\n  --mova-ai-field: #2c2c2c;\\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\\n  --mova-ai-stripe-bg: #202528;\\n\\n  --mova-ai-accent: #c2c2c2;\\n  --mova-ai-accent-ink: #d5d5d5;\\n  --mova-ai-accent-foreground: #202020;\\n  --mova-ai-accent-tint: #353535;\\n  --mova-ai-success: #88c7a0;\\n  --mova-ai-success-tint: #293b30;\\n  --mova-ai-warning: #d7b66f;\\n  --mova-ai-warning-tint: #3c3525;\\n  --mova-ai-danger: #e5928e;\\n  --mova-ai-danger-tint: #3c2b2b;\\n  --mova-ai-info: #9bbbd6;\\n  --mova-ai-info-tint: #293541;\\n  --mova-ai-neutral-status: #a0a0a0;\\n  --mova-ai-status-on: #181818;\\n\\n  --mova-ai-tooltip-bg: #121212;\\n  --mova-ai-tooltip-fg: #eeeeee;\\n  --mova-ai-tooltip-muted: #b5b5b5;\\n  --mova-ai-tooltip-border: #3b3b3b;\\n\\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\\n}\\n\";\nconst scopedStyles = `.mova-ai-approval-card{--approval-action-bg:#454545;--approval-action-fg:#fff;--approval-action-hover:#333;--approval-action-disabled-bg:#e9e9e9;--approval-action-disabled-fg:#858585} .mova-ai-approval-card[data-theme=\"dark\"]{--approval-action-bg:#f5f5f5;--approval-action-fg:#202020;--approval-action-hover:#fff;--approval-action-disabled-bg:#3b3b3b;--approval-action-disabled-fg:#929292} .mova-ai-approval-card .approval-accent{background-color:var(--approval-action-bg);color:var(--approval-action-fg)} .mova-ai-approval-card .approval-accent:not(:disabled):hover{background-color:var(--approval-action-hover)} .mova-ai-approval-card .approval-accent:disabled{background-color:var(--approval-action-disabled-bg);color:var(--approval-action-disabled-fg);opacity:1}\n.mova-ai-approval-card .primitive-card-pad{padding:12px} .mova-ai-approval-card .primitive-card-bar{padding:10px 12px} .mova-ai-approval-card .primitive-card-footer{padding:10px} .mova-ai-approval-card .primitive-icon-button{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px}\n.mova-ai-approval-card :is(button,input,[tabindex]):focus-visible{outline:2px solid var(--mova-ai-accent,#454545)!important;outline-offset:2px} .mova-ai-approval-card button:not(:disabled){cursor:pointer} .mova-ai-approval-card code{overflow-wrap:anywhere} .mova-ai-approval-card *, .mova-ai-approval-card *::before,.mova-ai-approval-card *::after{box-sizing:border-box}\n@keyframes mova-ai-approval-card-pop-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n@keyframes mova-ai-approval-card-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}\n@keyframes mova-ai-approval-card-shimmer-text{from{background-position:150% center}to{background-position:-50% center}}\n@media(prefers-reduced-motion:reduce){.mova-ai-approval-card *, .mova-ai-approval-card *::before, .mova-ai-approval-card *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}`;\n\nexport function AIApprovalCard({theme = \"light\", ...props}: React.ComponentProps<typeof ApprovalCard> & {theme?: \"light\" | \"dark\"} = {}) {\n return <div className=\"mova-ai-theme mova-ai-approval-card\" data-theme={theme}><style>{AI_THEME_STYLES}{scopedStyles}</style><ApprovalCard {...props} /></div>;\n}\n"
 }