@mova-ui/react 0.4.1 → 0.4.5

package/registry/ai-sidebar-nav.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-sidebar-nav",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "ai-sidebar-nav.tsx",
   "sourcePath": "ui/ai/ai-sidebar-nav.tsx",
   "registryFile": "ai-sidebar-nav.json",
@@ -13,5 +13,5 @@
   ],
   "license": "MIT",
   "previewMode": "client",
-  "content": "\"use client\";\n\"use client\";\n\n// SPDX-License-Identifier: MIT\n// Adapted from Beautiful UI, Copyright (c) 2026 Shane Levine.\n// Retains the original 224px / 52px rail and gliding navigation motion.\n\nimport { useEffect, useRef, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { LogOut as IconArrowBoxLeft, Check as IconCheckmark1Small, ChevronDown as IconChevronDownSmall, X as IconCrossSmall, SquarePen as IconEditBig, House as IconHome, Search as IconMagnifyingGlass, Plus as IconPlusMedium, IceCream as IconPopsicle2, Settings as IconSettingsGear1, PanelLeftClose as IconSidebarLeftArrow, UserPlus as IconUserAdd } from \"lucide-react\";\n\n/* Shadow tokens from shadow-plugin 2.1.1.\nMIT License\n\nCopyright (c) 2026 Florian Kiem\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n*/\nconst COMPONENT_STYLES = `[data-mova-sidebar] {--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);--shadow-lg: 0 25px 50px 0 rgba(0, 0, 0, 0.05), 0 12px 24px 0 rgba(0, 0, 0, 0.04),\n    0 6px 12px 0 rgba(0, 0, 0, 0.03), 0 3px 6px 0 rgba(0, 0, 0, 0.02),\n    0 1.5px 3px 0 rgba(0, 0, 0, 0.02); font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:14px;line-height:1.5;letter-spacing:-0.01em;color:var(--ink);\n  /* surfaces — cool, blue-tinted neutrals */\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 ramp */\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  /* borders — solid and crisp, not alpha */\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 */\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  /* semantic */\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  /* chart overlays — neutral system colors with enough contrast on either theme */\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  /* shadows — our solid hairline ring + shadow-plugin's smooth layered stacks\n   * (--shadow-xs…lg come from shadow-plugin/unprefixed) so every surface reads\n   * consistently across the app. */\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);}\n[data-mova-sidebar][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  /* Elevation rings go to a subtle *light* hairline in dark mode: the ring\n   * paints over the surface behind the element, so a low-alpha white edge\n   * dissolves into the shadow as one continuous stroke (per smooth-shadow-ring),\n   * graduated by how far the surface floats. */\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[data-mova-sidebar] :is(button,input,textarea):focus-visible { outline:2px solid var(--accent);outline-offset:2px; }\n[data-mova-sidebar] button { cursor:pointer; } [data-mova-sidebar] button:disabled { cursor:default; }\n[data-mova-sidebar] .sidebar-row{\n  width: 208px;\n  transition-duration: var(--sidebar-copy-duration);\n  transition-timing-function: var(--sidebar-easing);\n}\n\n[data-mova-sidebar] .sidebar-copy{\n  opacity: 1;\n  transform: translateX(0);\n  transition:\n    opacity var(--sidebar-copy-duration) ease-out,\n    transform var(--sidebar-copy-duration) var(--sidebar-easing);\n}\n\n[data-mova-sidebar] .sidebar-logo,\n[data-mova-sidebar] .sidebar-collapse-control,\n[data-mova-sidebar] .sidebar-expand-control{\n  transition-duration: var(--sidebar-copy-duration);\n  transition-timing-function: ease-out;\n}\n\n[data-mova-sidebar] .sidebar-expand-control{\n  pointer-events: none;\n  opacity: 0;\n}\n\n[data-mova-sidebar] .sidebar-glide-highlight{\n  right: 8px;\n  left: 8px;\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-row{\n  width: 36px;\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-copy{\n  pointer-events: none;\n  opacity: 0;\n  transform: translateX(calc(var(--sidebar-copy-offset) * -1));\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-workspace-control{\n  pointer-events: none;\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-logo,\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-collapse-control{\n  pointer-events: none;\n  opacity: 0;\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-expand-control{\n  pointer-events: auto;\n  opacity: 1;\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-glide-highlight{\n  right: auto;\n  width: 36px;\n}\n\n\n@keyframes mova-sidebar-pop {from {opacity:0;transform:scale(.95)} to {opacity:1;transform:scale(1)}}\n@keyframes mova-sidebar-eq {0%,100% {transform:scaleY(.35)} 50% {transform:scaleY(1)}}\n@media(prefers-reduced-motion:reduce) { [data-mova-sidebar], [data-mova-sidebar] * {animation:none!important;transition:none!important;scroll-behavior:auto!important;} }\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\n/* ─────────────────────────────────────────────────────────\n * SIDEBAR NAV\n * Shared by the design-system preview and the harness shell:\n * compact workspace switcher, primary navigation, searchable\n * chat history, and a collapse that preserves icon alignment.\n * ───────────────────────────────────────────────────────── */\n\nconst WORKSPACE = { key: \"creamery\", name: \"Creamery Ops\", monogram: \"C\" };\n\nconst NAV_ITEMS = [\n  { key: \"home\", label: \"Home\", icon: <IconHome size={18} /> },\n  { key: \"invite\", label: \"Invite users\", icon: <IconUserAdd size={18} />, count: \"3/10\" },\n];\n\ntype SidebarRecent = {\n  id: string;\n  label: string;\n  prompt?: string;\n};\n\nconst DEFAULT_RECENTS: SidebarRecent[] = [\n  { id: \"suppliers\", label: \"Supplier records\" },\n  { id: \"todos\", label: \"Urgent to-dos this morning\" },\n  { id: \"flavor\", label: \"Flavor page ticket\" },\n  { id: \"workload\", label: \"Workload summary\" },\n  { id: \"offboarding\", label: \"Off-board a supplier\" },\n  { id: \"restock\", label: \"Batch restock function\" },\n  { id: \"edits\", label: \"Propose flavor edits\" },\n  { id: \"subway\", label: \"Subway surfing\" },\n];\n\ntype SidebarNavProps = {\n  theme?: \"dark\" | \"light\";\n  onWorkspaceAction?: (action: string) => void;\n  activeTitle?: string | null;\n  className?: string;\n  fill?: boolean;\n  onNewChat?: () => void;\n  onPick?: (id: string, label: string, prompt?: string) => void;\n  /** controlled primary-nav selection (e.g. \"home\" | \"invite\") */\n  activeNav?: string;\n  onNavigate?: (key: string) => void;\n  /** footer call-to-action — defaults to the demo \"Upgrade\" button */\n  footerLabel?: string;\n  footerIcon?: ReactNode;\n  onFooterClick?: () => void;\n  recents?: SidebarRecent[];\n  variant?: string;\n};\n\nconst SIDEBAR_MOTION = {\n  expandedWidth: 224,\n  collapsedWidth: 52,\n  duration: 280,\n  copyDuration: 180,\n  copyOffset: 8,\n  easing: \"cubic-bezier(0.16, 1, 0.3, 1)\",\n};\n\n/* ─────────────────────────────────────────────────────────\n * CHAT SEARCH STORYBOARD\n *\n *   0ms   search is triggered; Chats label begins fading\n *   0ms   field grows right → left from the search control\n * 180ms   field fills the row; cursor is focused and ready\n * ───────────────────────────────────────────────────────── */\nconst CHAT_SEARCH_MOTION = {\n  duration: 180,\n  closedWidth: 28,\n  easing: \"cubic-bezier(0.16, 1, 0.3, 1)\",\n};\n\nfunction GlideGroup({ children }: { children: ReactNode }) {\n  return (\n    <GlideMenu\n      rowSelector=\"[data-row]\"\n      highlightClassName=\"sidebar-glide-highlight rounded-[7px] bg-[var(--hover-2)]\"\n      className=\"group/glide flex flex-col gap-px\"\n    >\n      {children}\n    </GlideMenu>\n  );\n}\n\nfunction RailButton({\n  icon,\n  label,\n  active = false,\n  count,\n  onClick,\n}: {\n  icon: ReactNode;\n  label: string;\n  active?: boolean;\n  count?: string;\n  onClick?: () => void;\n}) {\n  return (\n    <button\n      data-row\n      aria-label={label}\n      aria-current={active ? \"page\" : undefined}\n      type=\"button\"\n      onClick={onClick}\n      className={`sidebar-row relative z-10 mx-2 flex h-8 items-center rounded-[8px] px-2 text-left\n        transition-[width,background-color,color,transform] duration-150 active:scale-[0.98]\n        ${active ? \"bg-[var(--hover-2)] group-hover/glide:bg-transparent\" : \"\"}`}\n    >\n      <span className={`flex size-5 shrink-0 items-center justify-center ${active ? \"text-[var(--ink)]\" : \"text-[var(--ink-2)]\"}`}>\n        {icon}\n      </span>\n      <span className={`sidebar-copy ml-1.5 min-w-0 flex-1 truncate text-[14px] font-medium ${active ? \"text-[var(--ink)]\" : \"text-[var(--ink-2)]\"}`}>\n        {label}\n      </span>\n      {count && (\n        <span className=\"sidebar-copy mr-2 shrink-0 text-[12px] font-medium tabular-nums text-[var(--ink-3)]\">\n          {count}\n        </span>\n      )}\n    </button>\n  );\n}\n\nfunction WorkspaceMenu({\n  position,\n  theme,\n  onAction,\n  onClose,\n}: {\n  theme: \"dark\" | \"light\";\n  onAction: (action: string) => void;\n  position: { top: number; left: number };\n  onClose: () => void;\n}) {\n  const menuRef = useRef<HTMLDivElement>(null);\n  useEffect(() => { menuRef.current?.querySelector<HTMLButtonElement>(\"button\")?.focus(); }, []);\n  return createPortal(\n    <div ref={menuRef}\n      data-mova-sidebar data-theme={theme}\n      data-workspace-menu\n      role=\"group\" aria-label=\"Workspace menu\"\n      onKeyDown={(event) => { if (event.key === \"Escape\") { event.preventDefault(); onClose(); } if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") { event.preventDefault(); const buttons = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>(\"button\")); const index = buttons.indexOf(document.activeElement as HTMLButtonElement); buttons[(index + (event.key === \"ArrowDown\" ? 1 : buttons.length - 1)) % buttons.length]?.focus(); } }}\n      className=\"fixed z-50 w-64 rounded-[14px] bg-[var(--surface)] p-1.5 shadow-[var(--shadow-overlay)]\"\n      style={{\n        top: position.top,\n        left: position.left,\n        maxWidth: \"calc(100vw - 16px)\",\n        maxHeight: \"calc(100dvh - 16px)\", overflowY: \"auto\",\n        animation: \"mova-sidebar-pop 180ms cubic-bezier(0.23,1,0.32,1) both\",\n        transformOrigin: \"top left\",\n      }}\n    >\n      <style>{COMPONENT_STYLES}</style>\n      <GlideMenu className=\"flex flex-col gap-px\" highlightClassName=\"inset-x-0 rounded-[8px] bg-[var(--hover-2)]\">\n        <button\n          data-menu-row\n          type=\"button\"\n          onClick={onClose}\n          className=\"relative z-10 flex h-10 w-full items-center gap-1.5 rounded-[8px] px-2 text-left\"\n        >\n          <span className=\"flex size-6 shrink-0 items-center justify-center rounded-[7px] bg-[var(--ink)] text-[11px] font-semibold text-[var(--surface)]\">\n            {WORKSPACE.monogram}\n          </span>\n          <span className=\"min-w-0 flex-1 truncate text-[13.5px] font-medium text-[var(--ink)]\">{WORKSPACE.name}</span>\n          <span className=\"shrink-0 text-[var(--ink)]\"><IconCheckmark1Small size={18} /></span>\n        </button>\n        <div className=\"my-1 h-px bg-[var(--line)]\" />\n        {[\n          { label: \"New workspace\", icon: <IconPlusMedium size={16} /> },\n          { label: \"Workspace settings\", icon: <IconSettingsGear1 size={16} /> },\n          { label: \"Invite team members\", icon: <IconUserAdd size={16} /> },\n        ].map((item) => (\n          <button\n            key={item.label}\n            data-menu-row\n            type=\"button\"\n            onClick={() => { onAction(item.label); onClose(); }}\n            className=\"relative z-10 flex h-9 w-full items-center gap-1.5 rounded-[8px] px-2 text-left\"\n          >\n            <span className=\"flex size-5 shrink-0 items-center justify-center text-[var(--ink-2)]\">{item.icon}</span>\n            <span className=\"min-w-0 flex-1 truncate text-[13.5px] text-[var(--ink)]\">{item.label}</span>\n          </button>\n        ))}\n        <div className=\"my-1 h-px bg-[var(--line)]\" />\n        <button\n          data-menu-row\n          type=\"button\"\n          onClick={() => { onAction(\"Sign out\"); onClose(); }}\n          className=\"relative z-10 flex h-9 w-full items-center gap-1.5 rounded-[8px] px-2 text-left\"\n        >\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-[var(--ink-2)]\"><IconArrowBoxLeft size={16} /></span>\n          <span className=\"min-w-0 flex-1 truncate text-[13.5px] text-[var(--ink)]\">Sign out</span>\n        </button>\n      </GlideMenu>\n    </div>,\n    document.body,\n  );\n}\n\nexport function AISidebarNav({\n  theme = \"dark\",\n  onWorkspaceAction,\n  activeTitle,\n  className = \"\",\n  fill = false,\n  onNewChat,\n  onPick,\n  activeNav,\n  onNavigate,\n  footerLabel = \"Upgrade\",\n  footerIcon,\n  onFooterClick,\n  recents = DEFAULT_RECENTS,\n}: SidebarNavProps) {\n  const [feedback, setFeedback] = useState(\"\");\n  const rootRef = useRef<HTMLElement>(null);\n  const searchButtonRef = useRef<HTMLButtonElement>(null);\n  const expandRef = useRef<HTMLButtonElement>(null);\n  const collapseRef = useRef<HTMLButtonElement>(null);\n  const [collapsed, setCollapsed] = useState(false);\n  const [internalNav, setInternalNav] = useState(\"chats\");\n  const currentNav = activeNav ?? internalNav;\n  const selectNav = (key: string) => {\n    setInternalNav(key);\n    setFeedback(key === \"home\" ? \"Home selected\" : key === \"invite\" ? \"Invite users selected\" : \"Chats selected\");\n    onNavigate?.(key);\n  };\n  const [demoActiveTitle, setDemoActiveTitle] = useState<string | null>(null);\n  const [workspaceOpen, setWorkspaceOpen] = useState(false);\n  const [workspacePosition, setWorkspacePosition] = useState({ top: 0, left: 0 });\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const workspaceButtonRef = useRef<HTMLButtonElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n\n  const selectedTitle = activeTitle === undefined ? demoActiveTitle : activeTitle;\n  const visibleRecents = recents.filter((item) => item.label.toLowerCase().includes(query.trim().toLowerCase()));\n\n  useEffect(() => {\n    if (!workspaceOpen) return;\n    const close = (event: PointerEvent) => {\n      const target = event.target as Element;\n      if (!workspaceButtonRef.current?.contains(target) && !target.closest(\"[data-workspace-menu]\")) {\n        setWorkspaceOpen(false);\n      }\n    };\n    document.addEventListener(\"pointerdown\", close);\n    return () => document.removeEventListener(\"pointerdown\", close);\n  }, [workspaceOpen]);\n\n  useEffect(() => {\n    if (!workspaceOpen) return;\n    const close = () => { setWorkspaceOpen(false); workspaceButtonRef.current?.focus(); };\n    window.addEventListener(\"resize\", close);\n    return () => { window.removeEventListener(\"resize\", close); };\n  }, [workspaceOpen]);\n\n  useEffect(() => {\n    if (searchOpen) searchRef.current?.focus();\n  }, [searchOpen]);\n\n  const collapse = () => {\n    setCollapsed(true);\n    requestAnimationFrame(() => expandRef.current?.focus());\n    setWorkspaceOpen(false);\n    setSearchOpen(false);\n    setQuery(\"\");\n  };\n\n  return (\n    <aside\n      ref={rootRef}\n      data-mova-sidebar data-theme={theme}\n      data-sidebar-collapsed={collapsed}\n      aria-label=\"Workspace navigation\"\n      className={`relative flex shrink-0 overflow-hidden transition-[width] ${fill ? \"h-full\" : \"h-[600px]\"} ${className}`}\n      style={{\n        width: collapsed ? SIDEBAR_MOTION.collapsedWidth : SIDEBAR_MOTION.expandedWidth,\n        transitionDuration: `${SIDEBAR_MOTION.duration}ms`,\n        transitionTimingFunction: SIDEBAR_MOTION.easing,\n        \"--sidebar-copy-duration\": `${SIDEBAR_MOTION.copyDuration}ms`,\n        \"--sidebar-copy-offset\": `${SIDEBAR_MOTION.copyOffset}px`,\n        \"--sidebar-easing\": SIDEBAR_MOTION.easing,\n      } as CSSProperties}\n    >\n      <style>{COMPONENT_STYLES}</style>\n      <div className=\"flex min-h-0 w-[224px] shrink-0 flex-col\">\n        <div className=\"relative mb-2.5 h-10 shrink-0\">\n          <button\n            ref={workspaceButtonRef}\n            data-workspace-trigger\n            type=\"button\"\n            aria-expanded={workspaceOpen}\n            aria-hidden={collapsed}\n            tabIndex={collapsed ? -1 : 0}\n            onClick={() => {\n              if (!workspaceOpen && workspaceButtonRef.current) {\n                const rect = workspaceButtonRef.current.getBoundingClientRect();\n                setWorkspacePosition({ top: Math.min(rect.bottom + 6, Math.max(8, window.innerHeight - 260)), left: Math.max(8, Math.min(rect.left, window.innerWidth - 264)) });\n              }\n              setWorkspaceOpen((open) => !open);\n            }}\n            className=\"sidebar-workspace-control absolute left-2 top-1 flex h-8 w-[164px] items-center rounded-[8px] px-2 text-left transition-[background-color,transform] duration-100 hover:bg-[var(--hover-2)] active:scale-[0.99]\"\n          >\n            <span className=\"sidebar-logo flex size-5 shrink-0 items-center justify-center text-[var(--ink)]\">\n              <IconPopsicle2 size={18} />\n            </span>\n            <span className=\"sidebar-copy ml-1.5 min-w-0 flex-1 truncate text-[14px] font-medium text-[var(--ink-2)]\">\n              {WORKSPACE.name}\n            </span>\n            <span className=\"sidebar-copy ml-1 flex shrink-0 text-[var(--ink-3)]\">\n              <IconChevronDownSmall size={16} />\n            </span>\n          </button>\n\n          {workspaceOpen && <WorkspaceMenu theme={theme} position={workspacePosition} onAction={(action) => { setFeedback(`${action} selected`); onWorkspaceAction?.(action); }} onClose={() => { setWorkspaceOpen(false); workspaceButtonRef.current?.focus(); }} />}\n\n          <button\n            type=\"button\"\n            ref={collapseRef}\n            aria-label=\"Collapse sidebar\"\n            aria-hidden={collapsed}\n            tabIndex={collapsed ? -1 : 0}\n            onClick={collapse}\n            className=\"sidebar-collapse-control absolute right-2 top-1 flex size-8 items-center justify-center rounded-[8px] text-[var(--ink-3)] transition-[opacity,background-color,color] duration-150 hover:bg-[var(--hover-2)] hover:text-[var(--ink)]\"\n          >\n            <IconSidebarLeftArrow size={18} />\n          </button>\n          <button\n            type=\"button\"\n            ref={expandRef}\n            aria-label=\"Expand sidebar\"\n            aria-hidden={!collapsed}\n            tabIndex={collapsed ? 0 : -1}\n            onClick={() => { setCollapsed(false); requestAnimationFrame(() => collapseRef.current?.focus()); }}\n            className=\"sidebar-expand-control absolute left-2 top-0.5 flex size-9 items-center justify-center rounded-[8px] text-[var(--ink-3)] transition-[opacity,background-color,color] duration-150 hover:bg-[var(--hover-2)] hover:text-[var(--ink)]\"\n          >\n            <IconSidebarLeftArrow size={18} className=\"rotate-180\" />\n          </button>\n        </div>\n\n        <GlideGroup>\n          <RailButton\n            icon={<IconEditBig size={18} />}\n            label=\"New chat\"\n            onClick={() => {\n              if (activeTitle === undefined) setDemoActiveTitle(null);\n              selectNav(\"chats\");\n              setFeedback(\"New chat ready\");\n              onNewChat?.();\n            }}\n          />\n          {NAV_ITEMS.map((item) => (\n            <RailButton\n              key={item.key}\n              icon={item.icon}\n              label={item.label}\n              count={item.count}\n              active={currentNav === item.key}\n              onClick={() => selectNav(item.key)}\n            />\n          ))}\n        </GlideGroup>\n\n        <div className=\"mt-3 min-h-0 flex-1 overflow-y-auto\" inert={collapsed}>\n          <div className=\"sidebar-copy relative mx-2 mb-1 h-8\">\n            <div\n              aria-hidden={searchOpen}\n              className={`absolute inset-0 flex items-center gap-1.5 px-2 text-[12.5px] font-medium text-[var(--ink-3)] transition-[opacity,transform] ${searchOpen ? \"pointer-events-none -translate-x-1 opacity-0\" : \"translate-x-0 opacity-100\"}`}\n              style={{ transitionDuration: `${CHAT_SEARCH_MOTION.duration}ms`, transitionTimingFunction: CHAT_SEARCH_MOTION.easing }}\n            >\n              <IconChevronDownSmall size={16} />\n              <span>Chats</span>\n            </div>\n\n            <button\n              type=\"button\"\n              ref={searchButtonRef}\n              aria-label=\"Search chats\"\n              tabIndex={searchOpen ? -1 : 0}\n              aria-expanded={searchOpen}\n              onClick={() => setSearchOpen(true)}\n              className={`absolute right-0 top-0 z-10 flex size-8 items-center justify-center rounded-[8px] text-[var(--ink-3)] transition-[opacity,background-color,color,transform] hover:bg-[var(--hover-2)] hover:text-[var(--ink)] active:scale-[0.96] ${searchOpen ? \"pointer-events-none opacity-0\" : \"opacity-100\"}`}\n              style={{ transitionDuration: `${CHAT_SEARCH_MOTION.duration}ms` }}\n            >\n              <IconMagnifyingGlass size={16} />\n            </button>\n\n            <div\n              className={`absolute right-0 top-0 z-20 flex h-8 items-center overflow-hidden rounded-[8px] bg-[var(--field)] text-[var(--ink-3)] shadow-[var(--shadow-hairline)] transition-[width,opacity] focus-within:text-[var(--ink-2)] ${searchOpen ? \"pointer-events-auto opacity-100\" : \"pointer-events-none opacity-0\"}`}\n              style={{\n                width: searchOpen ? \"100%\" : CHAT_SEARCH_MOTION.closedWidth,\n                transitionDuration: `${CHAT_SEARCH_MOTION.duration}ms`,\n                transitionTimingFunction: CHAT_SEARCH_MOTION.easing,\n              }}\n            >\n              <span className=\"ml-2 flex shrink-0 items-center justify-center\">\n                <IconMagnifyingGlass size={15} />\n              </span>\n              <input\n                ref={searchRef}\n                tabIndex={searchOpen ? 0 : -1}\n                value={query}\n                onChange={(event) => setQuery(event.target.value)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Escape\") {\n                    setSearchOpen(false);\n                    setQuery(\"\");\n                    searchButtonRef.current?.focus();\n                  }\n                }}\n                placeholder=\"Search chats\"\n                aria-label=\"Search chat history\"\n                className=\"ml-1.5 min-w-0 flex-1 bg-transparent text-[13px] font-medium text-[var(--ink)] outline-none placeholder:text-[var(--ink-3)]\"\n              />\n              <button\n                type=\"button\"\n                aria-label=\"Close chat search\"\n                tabIndex={searchOpen ? 0 : -1}\n                onClick={() => {\n                  setSearchOpen(false);\n                  setQuery(\"\");\n                  searchButtonRef.current?.focus();\n                }}\n                className=\"flex size-8 shrink-0 items-center justify-center rounded-[8px] text-[var(--ink-3)] transition-[background-color,color,transform] duration-150 hover:bg-[var(--hover-2)] hover:text-[var(--ink)] active:scale-[0.96]\"\n              >\n                <IconCrossSmall size={16} />\n              </button>\n            </div>\n          </div>\n\n          <GlideGroup>\n            {visibleRecents.map((item) => {\n              const active = item.label === selectedTitle;\n              return (\n                <button\n                  key={item.id}\n                  data-row\n                  type=\"button\"\n                  title={item.label}\n                  aria-current={active ? \"page\" : undefined}\n                  onClick={() => {\n                    selectNav(\"chats\");\n                    if (activeTitle === undefined) setDemoActiveTitle(item.label);\n                    onPick?.(item.id, item.label, item.prompt);\n                  }}\n                  className={`sidebar-row relative z-10 mx-2 flex h-8 items-center rounded-[8px] px-2 text-left transition-[width,background-color,color,transform] duration-150 active:scale-[0.98] ${\n                    active ? \"bg-[var(--hover-2)] group-hover/glide:bg-transparent\" : \"\"\n                  }`}\n                >\n                  <span className={`sidebar-copy min-w-0 flex-1 truncate text-[14px] font-medium ${active ? \"text-[var(--ink)]\" : \"text-[var(--ink-2)]\"}`}>\n                    {item.label}\n                  </span>\n                </button>\n              );\n            })}\n            {query && visibleRecents.length === 0 && (\n              <div className=\"sidebar-copy mx-2 px-2 py-2 text-[12.5px] text-[var(--ink-3)]\">No chats found</div>\n            )}\n          </GlideGroup>\n        </div>\n\n        <div inert={collapsed} className=\"sidebar-copy mx-2 mt-3 w-[208px] border-t border-[var(--line)] pt-3\">\n          <button\n            type=\"button\"\n            onClick={() => { setFeedback(`${footerLabel} selected`); (onFooterClick ?? onNewChat)?.(); }}\n            className=\"flex h-8 w-full items-center justify-center gap-1.5 rounded-[8px] bg-[var(--hover-2)] text-[12.5px] font-medium text-[var(--ink)] transition-[background-color,transform] duration-150 hover:bg-[var(--line-strong)] active:scale-[0.98]\"\n          >\n            {footerIcon}\n            {footerLabel}\n          </button>\n          <p role=\"status\" className=\"mt-2 text-[11px] text-[var(--ink-3)]\">{feedback}</p>\n        </div>\n      </div>\n    </aside>\n  );\n}\n\nexport default AISidebarNav;\n"
+  "content": "\"use client\";\n\"use client\";\n\n// SPDX-License-Identifier: MIT\n// Adapted from Beautiful UI, Copyright (c) 2026 Shane Levine.\n// Retains the original 224px / 52px rail and gliding navigation motion.\n\nimport { useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { LogOut as IconArrowBoxLeft, Check as IconCheckmark1Small, ChevronDown as IconChevronDownSmall, X as IconCrossSmall, SquarePen as IconEditBig, House as IconHome, Search as IconMagnifyingGlass, Plus as IconPlusMedium, IceCream as IconPopsicle2, Settings as IconSettingsGear1, PanelLeftClose as IconSidebarLeftArrow, UserPlus as IconUserAdd } from \"lucide-react\";\n\n/* Shadow tokens from shadow-plugin 2.1.1.\nMIT License\n\nCopyright (c) 2026 Florian Kiem\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n*/\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 COMPONENT_STYLES = `[data-mova-sidebar] button:focus-visible { outline:2px solid var(--mova-ai-accent,#454545);outline-offset:2px;border-radius:8px; }\n[data-mova-sidebar] input:focus-visible { outline:none; }\n[data-mova-sidebar] .sidebar-search:focus-within { outline:2px solid var(--mova-ai-accent,#454545);outline-offset:2px;border-radius:8px; }\n[data-mova-sidebar] .sidebar-search button:focus-visible { outline:none; }\n[data-mova-sidebar] button { cursor:pointer; } [data-mova-sidebar] button:disabled { cursor:default; }\n[data-mova-sidebar] .sidebar-row{\n  width: 208px;\n  transition-duration: var(--sidebar-copy-duration);\n  transition-timing-function: var(--sidebar-easing);\n}\n\n[data-mova-sidebar] .sidebar-copy{\n  opacity: 1;\n  transform: translateX(0);\n  transition:\n    opacity var(--sidebar-copy-duration) ease-out,\n    transform var(--sidebar-copy-duration) var(--sidebar-easing);\n}\n\n[data-mova-sidebar] .sidebar-logo,\n[data-mova-sidebar] .sidebar-collapse-control,\n[data-mova-sidebar] .sidebar-expand-control{\n  transition-duration: var(--sidebar-copy-duration);\n  transition-timing-function: ease-out;\n}\n\n[data-mova-sidebar] .sidebar-expand-control{\n  pointer-events: none;\n  opacity: 0;\n}\n\n[data-mova-sidebar] .sidebar-glide-highlight{\n  right: 8px;\n  left: 8px;\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-row{\n  width: 36px;\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-copy{\n  pointer-events: none;\n  opacity: 0;\n  transform: translateX(calc(var(--sidebar-copy-offset) * -1));\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-workspace-control{\n  pointer-events: none;\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-logo,\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-collapse-control{\n  pointer-events: none;\n  opacity: 0;\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-expand-control{\n  pointer-events: auto;\n  opacity: 1;\n}\n\n[data-mova-sidebar][data-sidebar-collapsed=\"true\"] .sidebar-glide-highlight{\n  right: auto;\n  width: 36px;\n}\n\n\n@keyframes mova-sidebar-pop {from {opacity:0;transform:scale(.95)} to {opacity:1;transform:scale(1)}}\n@keyframes mova-sidebar-eq {0%,100% {transform:scaleY(.35)} 50% {transform:scaleY(1)}}\n@media(prefers-reduced-motion:reduce) { [data-mova-sidebar], [data-mova-sidebar] * {animation:none!important;transition:none!important;scroll-behavior:auto!important;} }\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\n/* ─────────────────────────────────────────────────────────\n * SIDEBAR NAV\n * Shared by the design-system preview and the harness shell:\n * compact workspace switcher, primary navigation, searchable\n * chat history, and a collapse that preserves icon alignment.\n * ───────────────────────────────────────────────────────── */\n\nconst WORKSPACE = { key: \"creamery\", name: \"Creamery Ops\", monogram: \"C\" };\n\nconst NAV_ITEMS = [\n  { key: \"home\", label: \"Home\", icon: <IconHome size={18} /> },\n  { key: \"invite\", label: \"Invite users\", icon: <IconUserAdd size={18} />, count: \"3/10\" },\n];\n\ntype SidebarRecent = {\n  id: string;\n  label: string;\n  prompt?: string;\n};\n\nconst DEFAULT_RECENTS: SidebarRecent[] = [\n  { id: \"suppliers\", label: \"Supplier records\" },\n  { id: \"todos\", label: \"Urgent to-dos this morning\" },\n  { id: \"flavor\", label: \"Flavor page ticket\" },\n  { id: \"workload\", label: \"Workload summary\" },\n  { id: \"offboarding\", label: \"Off-board a supplier\" },\n  { id: \"restock\", label: \"Batch restock function\" },\n  { id: \"edits\", label: \"Propose flavor edits\" },\n  { id: \"subway\", label: \"Subway surfing\" },\n];\n\ntype SidebarNavProps = {\n  theme?: \"dark\" | \"light\";\n  onWorkspaceAction?: (action: string) => void;\n  activeTitle?: string | null;\n  className?: string;\n  fill?: boolean;\n  onNewChat?: () => void;\n  onPick?: (id: string, label: string, prompt?: string) => void;\n  /** controlled primary-nav selection (e.g. \"home\" | \"invite\") */\n  activeNav?: string;\n  onNavigate?: (key: string) => void;\n  /** footer call-to-action — defaults to the demo \"Upgrade\" button */\n  footerLabel?: string;\n  footerIcon?: ReactNode;\n  onFooterClick?: () => void;\n  recents?: SidebarRecent[];\n  variant?: string;\n};\n\nconst SIDEBAR_MOTION = {\n  expandedWidth: 224,\n  collapsedWidth: 52,\n  duration: 280,\n  copyDuration: 180,\n  copyOffset: 8,\n  easing: \"cubic-bezier(0.16, 1, 0.3, 1)\",\n};\n\n/* ─────────────────────────────────────────────────────────\n * CHAT SEARCH STORYBOARD\n *\n *   0ms   search is triggered; Chats label begins fading\n *   0ms   field grows right → left from the search control\n * 180ms   field fills the row; cursor is focused and ready\n * ───────────────────────────────────────────────────────── */\nconst CHAT_SEARCH_MOTION = {\n  duration: 180,\n  closedWidth: 28,\n  easing: \"cubic-bezier(0.16, 1, 0.3, 1)\",\n  listDuration: 220,\n};\n\nfunction GlideGroup({ children }: { children: ReactNode }) {\n  return (\n    <GlideMenu\n      rowSelector=\"[data-row]\"\n      highlightClassName=\"sidebar-glide-highlight rounded-[7px] bg-[var(--mova-ai-hover-strong,#e9e9e9)]\"\n      className=\"group/glide flex flex-col gap-px\"\n    >\n      {children}\n    </GlideMenu>\n  );\n}\n\nfunction RailButton({\n  icon,\n  label,\n  active = false,\n  count,\n  onClick,\n}: {\n  icon: ReactNode;\n  label: string;\n  active?: boolean;\n  count?: string;\n  onClick?: () => void;\n}) {\n  return (\n    <button\n      data-row\n      aria-label={label}\n      aria-current={active ? \"page\" : undefined}\n      type=\"button\"\n      onClick={onClick}\n      className={`sidebar-row relative z-10 mx-2 flex h-8 items-center rounded-[8px] px-2 text-left\n        transition-[width,background-color,color,transform] duration-150 active:scale-[0.98]\n        ${active ? \"bg-[var(--mova-ai-hover-strong,#e9e9e9)] group-hover/glide:bg-transparent\" : \"\"}`}\n    >\n      <span className={`flex size-5 shrink-0 items-center justify-center ${active ? \"text-[var(--mova-ai-ink,#202020)]\" : \"text-[var(--mova-ai-ink-secondary,#666)]\"}`}>\n        {icon}\n      </span>\n      <span className={`sidebar-copy ml-1.5 min-w-0 flex-1 truncate text-[14px] font-medium ${active ? \"text-[var(--mova-ai-ink,#202020)]\" : \"text-[var(--mova-ai-ink-secondary,#666)]\"}`}>\n        {label}\n      </span>\n      {count && (\n        <span className=\"sidebar-copy mr-2 shrink-0 text-[12px] font-medium tabular-nums text-[var(--mova-ai-ink-muted,#858585)]\">\n          {count}\n        </span>\n      )}\n    </button>\n  );\n}\n\nfunction WorkspaceMenu({\n  position,\n  theme,\n  onAction,\n  onClose,\n}: {\n  theme: \"dark\" | \"light\";\n  onAction: (action: string) => void;\n  position: { top: number; left: number };\n  onClose: () => void;\n}) {\n  const menuRef = useRef<HTMLDivElement>(null);\n  useEffect(() => { menuRef.current?.querySelector<HTMLButtonElement>(\"button\")?.focus(); }, []);\n  return createPortal(\n    <div ref={menuRef}\n      data-mova-sidebar data-theme={theme}\n      data-workspace-menu\n      role=\"group\" aria-label=\"Workspace menu\"\n      onKeyDown={(event) => { if (event.key === \"Escape\") { event.preventDefault(); onClose(); } if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") { event.preventDefault(); const buttons = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>(\"button\")); const index = buttons.indexOf(document.activeElement as HTMLButtonElement); buttons[(index + (event.key === \"ArrowDown\" ? 1 : buttons.length - 1)) % buttons.length]?.focus(); } }}\n      className=\"mova-ai-theme fixed z-50 w-64 rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-1.5 shadow-[var(--mova-ai-shadow-overlay,none)]\"\n      style={{\n        top: position.top,\n        left: position.left,\n        maxWidth: \"calc(100vw - 16px)\",\n        maxHeight: \"calc(100dvh - 16px)\", overflowY: \"auto\",\n        animation: \"mova-sidebar-pop 180ms cubic-bezier(0.23,1,0.32,1) both\",\n        transformOrigin: \"top left\",\n      }}\n    >\n      <style>{AI_THEME_STYLES}{COMPONENT_STYLES}</style>\n      <GlideMenu className=\"flex flex-col gap-px\" highlightClassName=\"inset-x-0 rounded-[8px] bg-[var(--mova-ai-hover-strong,#e9e9e9)]\">\n        <button\n          data-menu-row\n          type=\"button\"\n          onClick={onClose}\n          className=\"relative z-10 flex h-10 w-full items-center gap-1.5 rounded-[8px] px-2 text-left\"\n        >\n          <span className=\"flex size-6 shrink-0 items-center justify-center rounded-[7px] bg-[var(--mova-ai-ink,#202020)] text-[11px] font-semibold text-[var(--mova-ai-surface,#fff)]\">\n            {WORKSPACE.monogram}\n          </span>\n          <span className=\"min-w-0 flex-1 truncate text-[13.5px] font-medium text-[var(--mova-ai-ink,#202020)]\">{WORKSPACE.name}</span>\n          <span className=\"shrink-0 text-[var(--mova-ai-ink,#202020)]\"><IconCheckmark1Small size={18} /></span>\n        </button>\n        <div className=\"my-1 h-px bg-[var(--mova-ai-border,#dedede)]\" />\n        {[\n          { label: \"New workspace\", icon: <IconPlusMedium size={16} /> },\n          { label: \"Workspace settings\", icon: <IconSettingsGear1 size={16} /> },\n          { label: \"Invite team members\", icon: <IconUserAdd size={16} /> },\n        ].map((item) => (\n          <button\n            key={item.label}\n            data-menu-row\n            type=\"button\"\n            onClick={() => { onAction(item.label); onClose(); }}\n            className=\"relative z-10 flex h-9 w-full items-center gap-1.5 rounded-[8px] px-2 text-left\"\n          >\n            <span className=\"flex size-5 shrink-0 items-center justify-center text-[var(--mova-ai-ink-secondary,#666)]\">{item.icon}</span>\n            <span className=\"min-w-0 flex-1 truncate text-[13.5px] text-[var(--mova-ai-ink,#202020)]\">{item.label}</span>\n          </button>\n        ))}\n        <div className=\"my-1 h-px bg-[var(--mova-ai-border,#dedede)]\" />\n        <button\n          data-menu-row\n          type=\"button\"\n          onClick={() => { onAction(\"Sign out\"); onClose(); }}\n          className=\"relative z-10 flex h-9 w-full items-center gap-1.5 rounded-[8px] px-2 text-left\"\n        >\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-[var(--mova-ai-ink-secondary,#666)]\"><IconArrowBoxLeft size={16} /></span>\n          <span className=\"min-w-0 flex-1 truncate text-[13.5px] text-[var(--mova-ai-ink,#202020)]\">Sign out</span>\n        </button>\n      </GlideMenu>\n    </div>,\n    document.body,\n  );\n}\n\nexport function AISidebarNav({\n  theme = \"dark\",\n  onWorkspaceAction,\n  activeTitle,\n  className = \"\",\n  fill = false,\n  onNewChat,\n  onPick,\n  activeNav,\n  onNavigate,\n  footerLabel = \"Upgrade\",\n  footerIcon,\n  onFooterClick,\n  recents = DEFAULT_RECENTS,\n}: SidebarNavProps) {\n  const [feedback, setFeedback] = useState(\"\");\n  const rootRef = useRef<HTMLElement>(null);\n  const searchButtonRef = useRef<HTMLButtonElement>(null);\n  const expandRef = useRef<HTMLButtonElement>(null);\n  const collapseRef = useRef<HTMLButtonElement>(null);\n  const [collapsed, setCollapsed] = useState(false);\n  const [internalNav, setInternalNav] = useState(\"chats\");\n  const currentNav = activeNav ?? internalNav;\n  const selectNav = (key: string) => {\n    setInternalNav(key);\n    if (key === \"home\" || key === \"invite\") setFeedback(key === \"home\" ? \"Home selected\" : \"Invite users selected\");\n    onNavigate?.(key);\n  };\n  const [demoActiveTitle, setDemoActiveTitle] = useState<string | null>(null);\n  const [workspaceOpen, setWorkspaceOpen] = useState(false);\n  const [workspacePosition, setWorkspacePosition] = useState({ top: 0, left: 0 });\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [chatsExpanded, setChatsExpanded] = useState(true);\n  const historyId = useId();\n  const searchId = useId();\n  const workspaceButtonRef = useRef<HTMLButtonElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n\n  const selectedTitle = activeTitle === undefined ? demoActiveTitle : activeTitle;\n  const visibleRecents = recents.filter((item) => item.label.toLowerCase().includes(query.trim().toLowerCase()));\n\n  useEffect(() => {\n    if (!workspaceOpen) return;\n    const close = (event: PointerEvent) => {\n      const target = event.target as Element;\n      if (!workspaceButtonRef.current?.contains(target) && !target.closest(\"[data-workspace-menu]\")) {\n        setWorkspaceOpen(false);\n      }\n    };\n    document.addEventListener(\"pointerdown\", close);\n    return () => document.removeEventListener(\"pointerdown\", close);\n  }, [workspaceOpen]);\n\n  useEffect(() => {\n    if (!workspaceOpen) return;\n    const close = () => { setWorkspaceOpen(false); workspaceButtonRef.current?.focus(); };\n    window.addEventListener(\"resize\", close);\n    return () => { window.removeEventListener(\"resize\", close); };\n  }, [workspaceOpen]);\n\n  useEffect(() => {\n    if (searchOpen) searchRef.current?.focus();\n  }, [searchOpen]);\n\n  const collapse = () => {\n    setCollapsed(true);\n    requestAnimationFrame(() => expandRef.current?.focus());\n    setWorkspaceOpen(false);\n    setSearchOpen(false);\n    setQuery(\"\");\n  };\n\n  const toggleChats = () => {\n    if (chatsExpanded) {\n      setSearchOpen(false);\n      setQuery(\"\");\n    }\n    setChatsExpanded(!chatsExpanded);\n  };\n\n  return (\n    <aside\n      ref={rootRef}\n      data-mova-sidebar data-theme={theme}\n      data-sidebar-collapsed={collapsed}\n      aria-label=\"Workspace navigation\"\n      className={`mova-ai-theme relative flex shrink-0 overflow-hidden rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] text-[color:var(--mova-ai-ink,#202020)] transition-[width] ${fill ? \"h-full\" : \"h-[600px]\"} ${className}`}\n      style={{\n        width: collapsed ? SIDEBAR_MOTION.collapsedWidth : SIDEBAR_MOTION.expandedWidth,\n        transitionDuration: `${SIDEBAR_MOTION.duration}ms`,\n        transitionTimingFunction: SIDEBAR_MOTION.easing,\n        \"--sidebar-copy-duration\": `${SIDEBAR_MOTION.copyDuration}ms`,\n        \"--sidebar-copy-offset\": `${SIDEBAR_MOTION.copyOffset}px`,\n        \"--sidebar-easing\": SIDEBAR_MOTION.easing,\n      } as CSSProperties}\n    >\n      <style>{AI_THEME_STYLES}{COMPONENT_STYLES}</style>\n      <div className=\"flex min-h-0 w-[224px] shrink-0 flex-col\">\n        <div className=\"relative mb-2.5 h-10 shrink-0\">\n          <button\n            ref={workspaceButtonRef}\n            data-workspace-trigger\n            type=\"button\"\n            aria-expanded={workspaceOpen}\n            aria-hidden={collapsed}\n            tabIndex={collapsed ? -1 : 0}\n            onClick={() => {\n              if (!workspaceOpen && workspaceButtonRef.current) {\n                const rect = workspaceButtonRef.current.getBoundingClientRect();\n                setWorkspacePosition({ top: Math.min(rect.bottom + 6, Math.max(8, window.innerHeight - 260)), left: Math.max(8, Math.min(rect.left, window.innerWidth - 264)) });\n              }\n              setWorkspaceOpen((open) => !open);\n            }}\n            className=\"sidebar-workspace-control absolute left-2 top-1 flex h-8 w-[164px] items-center rounded-[8px] px-2 text-left transition-[background-color,transform] duration-100 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] active:scale-[0.99]\"\n          >\n            <span className=\"sidebar-logo flex size-5 shrink-0 items-center justify-center text-[var(--mova-ai-ink,#202020)]\">\n              <IconPopsicle2 size={18} />\n            </span>\n            <span className=\"sidebar-copy ml-1.5 min-w-0 flex-1 truncate text-[14px] font-medium text-[var(--mova-ai-ink-secondary,#666)]\">\n              {WORKSPACE.name}\n            </span>\n            <span className=\"sidebar-copy ml-1 flex shrink-0 text-[var(--mova-ai-ink-muted,#858585)]\">\n              <IconChevronDownSmall size={16} />\n            </span>\n          </button>\n\n          {workspaceOpen && <WorkspaceMenu theme={theme} position={workspacePosition} onAction={(action) => { setFeedback(`${action} selected`); onWorkspaceAction?.(action); }} onClose={() => { setWorkspaceOpen(false); workspaceButtonRef.current?.focus(); }} />}\n\n          <button\n            type=\"button\"\n            ref={collapseRef}\n            aria-label=\"Collapse sidebar\"\n            aria-hidden={collapsed}\n            tabIndex={collapsed ? -1 : 0}\n            onClick={collapse}\n            className=\"sidebar-collapse-control absolute right-2 top-1 flex size-8 items-center justify-center rounded-[8px] text-[var(--mova-ai-ink-muted,#858585)] transition-[opacity,background-color,color] duration-150 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] hover:text-[var(--mova-ai-ink,#202020)]\"\n          >\n            <IconSidebarLeftArrow size={18} />\n          </button>\n          <button\n            type=\"button\"\n            ref={expandRef}\n            aria-label=\"Expand sidebar\"\n            aria-hidden={!collapsed}\n            tabIndex={collapsed ? 0 : -1}\n            onClick={() => { setCollapsed(false); requestAnimationFrame(() => collapseRef.current?.focus()); }}\n            className=\"sidebar-expand-control absolute left-2 top-0.5 flex size-9 items-center justify-center rounded-[8px] text-[var(--mova-ai-ink-muted,#858585)] transition-[opacity,background-color,color] duration-150 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] hover:text-[var(--mova-ai-ink,#202020)]\"\n          >\n            <IconSidebarLeftArrow size={18} className=\"rotate-180\" />\n          </button>\n        </div>\n\n        <GlideGroup>\n          <RailButton\n            icon={<IconEditBig size={18} />}\n            label=\"New chat\"\n            onClick={() => {\n              if (activeTitle === undefined) setDemoActiveTitle(null);\n              selectNav(\"chats\");\n              setFeedback(\"New chat ready\");\n              onNewChat?.();\n            }}\n          />\n          {NAV_ITEMS.map((item) => (\n            <RailButton\n              key={item.key}\n              icon={item.icon}\n              label={item.label}\n              count={item.count}\n              active={currentNav === item.key}\n              onClick={() => selectNav(item.key)}\n            />\n          ))}\n        </GlideGroup>\n\n        <div className=\"mt-3 flex min-h-0 flex-1 flex-col\" inert={collapsed}>\n          <div className=\"sidebar-copy relative mx-2 mb-1 h-8 shrink-0\">\n            <button\n              type=\"button\"\n              aria-label=\"Chats\"\n              aria-expanded={chatsExpanded}\n              aria-controls={historyId}\n              aria-hidden={searchOpen}\n              tabIndex={searchOpen ? -1 : 0}\n              onClick={toggleChats}\n              className={`absolute inset-0 flex items-center gap-1.5 rounded-[8px] px-2 text-left text-[12.5px] font-medium text-[var(--mova-ai-ink-muted,#858585)] transition-[opacity,transform,color] hover:text-[var(--mova-ai-ink,#202020)] ${searchOpen ? \"pointer-events-none -translate-x-1 opacity-0\" : \"translate-x-0 opacity-100\"}`}\n              style={{ transitionDuration: `${CHAT_SEARCH_MOTION.duration}ms`, transitionTimingFunction: CHAT_SEARCH_MOTION.easing }}\n            >\n              <IconChevronDownSmall size={16} className={`transition-transform duration-200 ${chatsExpanded ? \"rotate-0\" : \"-rotate-90\"}`} />\n              <span>Chats</span>\n            </button>\n\n            <button\n              type=\"button\"\n              ref={searchButtonRef}\n              aria-label=\"Search chats\"\n              tabIndex={searchOpen ? -1 : 0}\n              aria-expanded={searchOpen}\n              aria-controls={searchId}\n              aria-hidden={searchOpen}\n              onClick={() => { setChatsExpanded(true); setSearchOpen(true); }}\n              className={`absolute right-0 top-0 z-10 flex size-8 items-center justify-center rounded-[8px] text-[var(--mova-ai-ink-muted,#858585)] transition-[opacity,background-color,color,transform] hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] hover:text-[var(--mova-ai-ink,#202020)] active:scale-[0.96] ${searchOpen ? \"pointer-events-none opacity-0\" : \"opacity-100\"}`}\n              style={{ transitionDuration: `${CHAT_SEARCH_MOTION.duration}ms` }}\n            >\n              <IconMagnifyingGlass size={16} />\n            </button>\n\n            <div\n              id={searchId}\n              role=\"search\"\n              aria-hidden={!searchOpen}\n              inert={!searchOpen}\n              className={`sidebar-search absolute right-0 top-0 z-20 flex h-8 items-center overflow-hidden rounded-[8px] bg-[var(--mova-ai-field,#f6f6f6)] text-[var(--mova-ai-ink-muted,#858585)] shadow-[var(--mova-ai-shadow-hairline,none)] transition-[width,opacity] focus-within:text-[var(--mova-ai-ink-secondary,#666)] ${searchOpen ? \"pointer-events-auto opacity-100\" : \"pointer-events-none opacity-0\"}`}\n              style={{\n                width: searchOpen ? \"100%\" : CHAT_SEARCH_MOTION.closedWidth,\n                transitionDuration: `${CHAT_SEARCH_MOTION.duration}ms`,\n                transitionTimingFunction: CHAT_SEARCH_MOTION.easing,\n              }}\n            >\n              <span className=\"ml-2 flex shrink-0 items-center justify-center\">\n                <IconMagnifyingGlass size={15} />\n              </span>\n              <input\n                ref={searchRef}\n                tabIndex={searchOpen ? 0 : -1}\n                value={query}\n                onChange={(event) => setQuery(event.target.value)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Escape\") {\n                    setSearchOpen(false);\n                    setQuery(\"\");\n                    searchButtonRef.current?.focus();\n                  }\n                }}\n                placeholder=\"Search chats\"\n                aria-label=\"Search chat history\"\n                className=\"ml-1.5 min-w-0 flex-1 bg-transparent text-[13px] font-medium text-[var(--mova-ai-ink,#202020)] outline-none placeholder:text-[var(--mova-ai-ink-muted,#858585)]\"\n              />\n              <button\n                type=\"button\"\n                aria-label=\"Close chat search\"\n                tabIndex={searchOpen ? 0 : -1}\n                onClick={() => {\n                  setSearchOpen(false);\n                  setQuery(\"\");\n                  searchButtonRef.current?.focus();\n                }}\n                className=\"flex size-8 shrink-0 items-center justify-center rounded-[8px] text-[var(--mova-ai-ink-muted,#858585)] transition-[background-color,color,transform] duration-150 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] hover:text-[var(--mova-ai-ink,#202020)] active:scale-[0.96]\"\n              >\n                <IconCrossSmall size={16} />\n              </button>\n            </div>\n          </div>\n\n          <div\n            id={historyId}\n            aria-hidden={!chatsExpanded}\n            inert={!chatsExpanded}\n            className=\"grid min-h-0 flex-1 transition-[grid-template-rows,opacity]\"\n            style={{\n              gridTemplateRows: chatsExpanded ? \"minmax(0, 1fr)\" : \"minmax(0, 0fr)\",\n              opacity: chatsExpanded ? 1 : 0,\n              transitionDuration: `${CHAT_SEARCH_MOTION.listDuration}ms`,\n              transitionTimingFunction: CHAT_SEARCH_MOTION.easing,\n            }}\n          >\n            <div className=\"min-h-0 overflow-hidden\">\n              <div className=\"h-full overflow-y-auto\">\n                <GlideGroup>\n                  {visibleRecents.map((item) => {\n              const active = item.label === selectedTitle;\n              return (\n                <button\n                  key={item.id}\n                  data-row\n                  type=\"button\"\n                  title={item.label}\n                  aria-current={active ? \"page\" : undefined}\n                  onClick={() => {\n                    setInternalNav(\"chats\");\n                    onNavigate?.(\"chats\");\n                    if (activeTitle === undefined) setDemoActiveTitle(item.label);\n                    onPick?.(item.id, item.label, item.prompt);\n                  }}\n                  className={`sidebar-row relative z-10 mx-2 flex h-8 items-center rounded-[8px] px-2 text-left transition-[width,background-color,color,transform] duration-150 active:scale-[0.98] ${\n                    active ? \"bg-[var(--mova-ai-hover-strong,#e9e9e9)] group-hover/glide:bg-transparent\" : \"\"\n                  }`}\n                >\n                  <span className={`sidebar-copy min-w-0 flex-1 truncate text-[14px] font-medium ${active ? \"text-[var(--mova-ai-ink,#202020)]\" : \"text-[var(--mova-ai-ink-secondary,#666)]\"}`}>\n                    {item.label}\n                  </span>\n                </button>\n              );\n                  })}\n                  {query && visibleRecents.length === 0 && (\n                    <div className=\"sidebar-copy mx-2 px-2 py-2 text-[12.5px] text-[var(--mova-ai-ink-muted,#858585)]\">No chats found</div>\n                  )}\n                </GlideGroup>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div inert={collapsed} className=\"sidebar-copy mx-2 mt-3 w-[208px] border-t border-[var(--mova-ai-border,#dedede)] pt-3\">\n          <button\n            type=\"button\"\n            onClick={() => { (onFooterClick ?? onNewChat)?.(); }}\n            className=\"flex h-8 w-full items-center justify-center gap-1.5 rounded-[8px] bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[12.5px] font-medium text-[var(--mova-ai-ink,#202020)] transition-[background-color,transform] duration-150 hover:bg-[var(--mova-ai-border-strong,#c8c8c8)] active:scale-[0.98]\"\n          >\n            {footerIcon}\n            {footerLabel}\n          </button>\n          <p role=\"status\" className=\"sr-only\">{feedback}</p>\n        </div>\n      </div>\n    </aside>\n  );\n}\n\nexport default AISidebarNav;\n"
 }

package/registry/ai-sources.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-sources",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "ai-sources.tsx",
   "sourcePath": "ui/ai/ai-sources.tsx",
   "registryFile": "ai-sources.json",
@@ -16,5 +16,5 @@
   ],
   "license": "MIT",
   "previewMode": "client",
-  "content": "\"use client\";\n\"use client\";\n\n// Adapted from SmoothUI's ai-sources (MIT). See ../patterns/smoothui.LICENSE.\nimport { ChevronRight, Globe } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { type ReactNode, useId, useState } from \"react\";\n\nconst SPRING_DEFAULT = { bounce: 0.1, duration: 0.25, type: \"spring\" as const };\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst STACK_LIMIT = 3;\nconst STACK_OVERLAP_PX = 8;\nconst FAN_GAP_PX = 3;\nconst ROW_STAGGER = 0.035;\n\nexport type AISource = { favicon?: ReactNode; id: string; snippet?: string; title: string; url: string };\nexport type AISourcesProps = { className?: string; defaultOpen?: boolean; label?: string; sources: AISource[] };\n\nconst hostOf = (url: string): string => {\n  try { return new URL(url).hostname.replace(/^www\\./, \"\"); } catch { return url; }\n};\n\nconst Favicon = ({ size, source }: { size: number; source: AISource }) => (\n  <span className=\"relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-background text-muted-foreground\" style={{ height: size, width: size }}>\n    <Globe aria-hidden=\"true\" size={size * 0.6} />\n    {source.favicon ? <span className=\"absolute inset-0 flex size-full items-center justify-center *:size-full *:object-cover\">{source.favicon}</span> : null}\n  </span>\n);\n\nexport function AISources({ className = \"\", defaultOpen = false, label = \"Sources\", sources }: AISourcesProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const [isHovered, setIsHovered] = useState(false);\n  const listId = useId();\n  const stacked = sources.slice(0, STACK_LIMIT);\n  const overflow = sources.length - stacked.length;\n  const fanned = isHovered && !isOpen && !shouldReduceMotion;\n\n  return (\n    <div className={`w-full ${className}`}>\n      <button\n        aria-expanded={isOpen}\n        aria-controls={listId}\n        className=\"flex cursor-pointer items-center gap-2 rounded-lg py-1 text-muted-foreground text-sm transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2\"\n        onBlur={() => setIsHovered(false)}\n        onClick={() => setIsOpen((current) => !current)}\n        onFocus={() => setIsHovered(true)}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        type=\"button\"\n      >\n        <span className=\"flex items-center\">\n          {stacked.map((source, index) => (\n            <motion.span\n              animate={{ marginLeft: index === 0 ? 0 : fanned ? FAN_GAP_PX : -STACK_OVERLAP_PX }}\n              className=\"relative block\"\n              key={source.id}\n              style={{ zIndex: stacked.length - index }}\n              transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}\n            >\n              <Favicon size={18} source={source} />\n            </motion.span>\n          ))}\n          {overflow > 0 ? <span className=\"ml-1 tabular-nums\">+{overflow}</span> : null}\n        </span>\n        <span>{label}</span>\n        <motion.span animate={{ rotate: isOpen ? 90 : 0 }} className=\"flex size-4 items-center justify-center\" transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}>\n          <ChevronRight aria-hidden=\"true\" size={14} />\n        </motion.span>\n      </button>\n\n      <AnimatePresence initial={false}>\n        {isOpen ? (\n          <motion.ul\n            id={listId}\n            animate={{ height: \"auto\", opacity: 1 }}\n            className=\"mt-1 list-none overflow-hidden\"\n            exit={shouldReduceMotion ? { opacity: 0, transition: { duration: 0 } } : { height: 0, opacity: 0 }}\n            initial={shouldReduceMotion ? { height: \"auto\", opacity: 1 } : { height: 0, opacity: 0 }}\n            transition={shouldReduceMotion ? { duration: 0 } : { height: SPRING_DEFAULT, opacity: { duration: 0.18, ease: EASE_OUT } }}\n          >\n            {sources.map((source, index) => (\n              <motion.li animate={{ opacity: 1, y: 0 }} initial={shouldReduceMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 4 }} key={source.id} transition={shouldReduceMotion ? { duration: 0 } : { ...SPRING_DEFAULT, delay: index * ROW_STAGGER }}>\n                <a className=\"flex items-start gap-2.5 rounded-lg px-1 py-1.5 no-underline transition-colors hover:bg-muted\" href={source.url} rel=\"noopener noreferrer\" target=\"_blank\">\n                  <motion.span className=\"mt-0.5 block shrink-0\" transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}>\n                    <Favicon size={18} source={source} />\n                  </motion.span>\n                  <span className=\"min-w-0\">\n                    <span className=\"block truncate font-medium text-foreground text-sm\">{source.title}</span>\n                    <span className=\"block truncate text-muted-foreground text-xs\">{source.snippet ?? hostOf(source.url)}</span>\n                  </span>\n                </a>\n              </motion.li>\n            ))}\n          </motion.ul>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nexport default AISources;\n"
+  "content": "\"use client\";\n\"use client\";\n\n// Adapted from SmoothUI's ai-sources (MIT). See ../patterns/smoothui.LICENSE.\nimport { ChevronRight, Globe } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { type ReactNode, useId, useState } from \"react\";\n\nconst SPRING_DEFAULT = { bounce: 0.1, duration: 0.25, type: \"spring\" as const };\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst STACK_LIMIT = 3;\nconst STACK_OVERLAP_PX = 8;\nconst FAN_GAP_PX = 3;\nconst ROW_STAGGER = 0.035;\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\";\n\nexport type AISource = { favicon?: ReactNode; id: string; snippet?: string; title: string; url: string };\nexport type AISourcesProps = { className?: string; defaultOpen?: boolean; label?: string; sources: AISource[]; theme?: \"light\" | \"dark\" };\n\nconst hostOf = (url: string): string => {\n  try { return new URL(url).hostname.replace(/^www\\./, \"\"); } catch { return url; }\n};\n\nconst Favicon = ({ size, source }: { size: number; source: AISource }) => (\n  <span className=\"relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] text-[color:var(--mova-ai-ink-secondary,#666)]\" style={{ height: size, width: size }}>\n    <Globe aria-hidden=\"true\" size={size * 0.6} />\n    {source.favicon ? <span className=\"absolute inset-0 flex size-full items-center justify-center *:size-full *:object-cover\">{source.favicon}</span> : null}\n  </span>\n);\n\nexport function AISources({ className = \"\", defaultOpen = false, label = \"Sources\", sources, theme = \"light\" }: AISourcesProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const [isHovered, setIsHovered] = useState(false);\n  const listId = useId();\n  const stacked = sources.slice(0, STACK_LIMIT);\n  const overflow = sources.length - stacked.length;\n  const fanned = isHovered && !isOpen && !shouldReduceMotion;\n\n  return (\n    <div className={`mova-ai-theme w-full ${className}`} data-theme={theme}>\n      <style>{AI_THEME_STYLES}</style>\n      <button\n        aria-expanded={isOpen}\n        aria-controls={listId}\n        className=\"flex cursor-pointer items-center gap-2 rounded-lg py-1 text-[color:var(--mova-ai-ink-secondary,#666)] text-sm transition-colors hover:text-[color:var(--mova-ai-ink,#202020)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--mova-ai-accent,#454545)]\"\n        onBlur={() => setIsHovered(false)}\n        onClick={() => setIsOpen((current) => !current)}\n        onFocus={() => setIsHovered(true)}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        type=\"button\"\n      >\n        <span className=\"flex items-center\">\n          {stacked.map((source, index) => (\n            <motion.span\n              animate={{ marginLeft: index === 0 ? 0 : fanned ? FAN_GAP_PX : -STACK_OVERLAP_PX }}\n              className=\"relative block\"\n              key={source.id}\n              style={{ zIndex: stacked.length - index }}\n              transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}\n            >\n              <Favicon size={18} source={source} />\n            </motion.span>\n          ))}\n          {overflow > 0 ? <span className=\"ml-1 tabular-nums\">+{overflow}</span> : null}\n        </span>\n        <span>{label}</span>\n        <motion.span animate={{ rotate: isOpen ? 90 : 0 }} className=\"flex size-4 items-center justify-center\" transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}>\n          <ChevronRight aria-hidden=\"true\" size={14} />\n        </motion.span>\n      </button>\n\n      <AnimatePresence initial={false}>\n        {isOpen ? (\n          <motion.ul\n            id={listId}\n            animate={{ height: \"auto\", opacity: 1 }}\n            className=\"mt-1 list-none overflow-hidden\"\n            exit={shouldReduceMotion ? { opacity: 0, transition: { duration: 0 } } : { height: 0, opacity: 0 }}\n            initial={shouldReduceMotion ? { height: \"auto\", opacity: 1 } : { height: 0, opacity: 0 }}\n            transition={shouldReduceMotion ? { duration: 0 } : { height: SPRING_DEFAULT, opacity: { duration: 0.18, ease: EASE_OUT } }}\n          >\n            {sources.map((source, index) => (\n              <motion.li animate={{ opacity: 1, y: 0 }} initial={shouldReduceMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 4 }} key={source.id} transition={shouldReduceMotion ? { duration: 0 } : { ...SPRING_DEFAULT, delay: index * ROW_STAGGER }}>\n                <a className=\"flex items-start gap-2.5 rounded-lg px-1 py-1.5 no-underline transition-colors hover:bg-[var(--mova-ai-hover,#f1f1f1)]\" href={source.url} rel=\"noopener noreferrer\" target=\"_blank\">\n                  <motion.span className=\"mt-0.5 block shrink-0\" transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}>\n                    <Favicon size={18} source={source} />\n                  </motion.span>\n                  <span className=\"min-w-0\">\n                    <span className=\"block truncate font-medium text-[color:var(--mova-ai-ink,#202020)] text-sm\">{source.title}</span>\n                    <span className=\"block truncate text-[color:var(--mova-ai-ink-secondary,#666)] text-xs\">{source.snippet ?? hostOf(source.url)}</span>\n                  </span>\n                </a>\n              </motion.li>\n            ))}\n          </motion.ul>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nexport default AISources;\n"
 }

package/registry/ai-suggestions.json

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

package/registry/ai-task-list.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-task-list",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "ai-task-list.tsx",
   "sourcePath": "ui/ai/ai-task-list.tsx",
   "registryFile": "ai-task-list.json",
@@ -16,5 +16,5 @@
   ],
   "license": "MIT",
   "previewMode": "client",
-  "content": "\"use client\";\n\"use client\";\n\n// Adapted from SmoothUI's ai-task-list (MIT). See ../patterns/smoothui.LICENSE.\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { Fragment, type ReactNode } from \"react\";\n\nconst SPRING_DEFAULT = { bounce: 0.1, duration: 0.25, type: \"spring\" as const };\nconst EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const;\nconst CHECK_PATH = \"M 3.5 7.5 L 6 10 L 10.5 4.5\";\nconst BOX_SIZE = 14;\nconst UNDERLINE_SECONDS = 1.4;\nconst SUCCESS_COLOR = \"oklch(72% 0.17 150)\";\nconst DANGER_COLOR = \"oklch(63% 0.21 25)\";\n\nexport type AITaskStatus = \"pending\" | \"running\" | \"done\" | \"failed\";\nexport type AITask = { children?: AITask[]; id: string; label: string; note?: string; status: AITaskStatus };\nexport type AITaskListProps = { className?: string; label?: string; tasks: AITask[] };\n\nconst flatten = (tasks: AITask[]): AITask[] => tasks.flatMap((task) => [task, ...flatten(task.children ?? [])]);\nconst boxStroke = (status: AITaskStatus): string => status === \"failed\" ? DANGER_COLOR : status === \"done\" ? SUCCESS_COLOR : \"currentColor\";\n\nfunction TaskBox({ status, shouldReduceMotion }: { shouldReduceMotion: boolean; status: AITaskStatus }) {\n  const isDone = status === \"done\";\n  const isFailed = status === \"failed\";\n  return (\n    <span className=\"mt-0.5 flex size-3.5 shrink-0 items-center justify-center\">\n      <svg aria-hidden=\"true\" className=\"size-3.5\" viewBox={`0 0 ${BOX_SIZE} ${BOX_SIZE}`}>\n        <motion.rect\n          animate={{ fillOpacity: isDone ? 0.12 : 0, stroke: boxStroke(status) }}\n          fill={isFailed ? DANGER_COLOR : SUCCESS_COLOR}\n          height={12}\n          rx={3.5}\n          strokeWidth={1.4}\n          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.2 }}\n          width={12}\n          x={1}\n          y={1}\n        />\n        {isDone ? <path className=\"ai-task-draw\" d={CHECK_PATH} fill=\"none\" pathLength={1} stroke={SUCCESS_COLOR} strokeDasharray=\"1 1\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.8} /> : null}\n        {isFailed ? <path className=\"ai-task-draw\" d=\"M 5 5 L 9 9 M 9 5 L 5 9\" fill=\"none\" pathLength={1} stroke={DANGER_COLOR} strokeDasharray=\"1 1\" strokeLinecap=\"round\" strokeWidth={1.8} /> : null}\n      </svg>\n    </span>\n  );\n}\n\nfunction TaskRow({ depth, shouldReduceMotion, task }: { depth: number; shouldReduceMotion: boolean; task: AITask }) {\n  const isRunning = task.status === \"running\";\n  const isDone = task.status === \"done\";\n  return (\n    <motion.li\n      animate={{ opacity: isDone ? 0.65 : 1, y: isDone && !shouldReduceMotion ? 1 : 0 }}\n      className=\"list-none\"\n      style={{ paddingLeft: depth * 20 }}\n      transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}\n    >\n      <span className=\"relative flex items-start gap-2 py-1.5\">\n        <span className=\"sr-only\">{task.status}: </span>\n        <TaskBox shouldReduceMotion={shouldReduceMotion} status={task.status} />\n        <span className=\"min-w-0 flex-1 break-words text-foreground text-xs leading-snug\">{task.label}</span>\n        {task.note ? <span className=\"max-w-[35%] truncate text-muted-foreground text-xs tabular-nums\">{task.note}</span> : null}\n        {isRunning && !shouldReduceMotion ? (\n          <motion.span\n            animate={{ backgroundPositionX: [\"0%\", \"200%\"] }}\n            className=\"pointer-events-none absolute inset-x-0 bottom-0 h-px\"\n            style={{ backgroundImage: \"linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%)\", backgroundSize: \"50% 100%\", opacity: 0.5 }}\n            transition={{ duration: UNDERLINE_SECONDS, ease: EASE_IN_OUT, repeat: Number.POSITIVE_INFINITY }}\n          />\n        ) : null}\n      </span>\n    </motion.li>\n  );\n}\n\nexport function AITaskList({ className = \"\", label = \"Plan\", tasks }: AITaskListProps) {\n  const shouldReduceMotion = Boolean(useReducedMotion());\n  const all = flatten(tasks);\n  const done = all.filter((task) => task.status === \"done\").length;\n  return (\n    <div className={`w-full rounded-lg border border-border bg-background p-3 ${className}`}>\n      <div className=\"mb-1.5 flex items-baseline justify-between\">\n        <p className=\"font-medium text-foreground text-sm\">{label}</p>\n        <p className=\"text-muted-foreground text-xs tabular-nums\">{done}/{all.length}</p>\n      </div>\n      <style>{`\n        .ai-task-draw { stroke-dashoffset: 0; }\n        @media (prefers-reduced-motion: no-preference) {\n          .ai-task-draw { animation: ai-task-draw 200ms cubic-bezier(0.23, 1, 0.32, 1) both; }\n        }\n        @keyframes ai-task-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }\n      `}</style>\n      <ul className=\"list-none\">\n        {(() => {\n          const renderTasks = (items: AITask[], depth: number): ReactNode => items.map((task) => <Fragment key={task.id}><TaskRow depth={depth} shouldReduceMotion={shouldReduceMotion} task={task} />{renderTasks(task.children ?? [], depth + 1)}</Fragment>);\n          return renderTasks(tasks, 0);\n        })()}\n      </ul>\n    </div>\n  );\n}\n\nexport default AITaskList;\n"
+  "content": "\"use client\";\n\"use client\";\n\n// Adapted from SmoothUI's ai-task-list (MIT). See ../patterns/smoothui.LICENSE.\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { Fragment, type ReactNode } from \"react\";\n\nconst SPRING_DEFAULT = { bounce: 0.1, duration: 0.25, type: \"spring\" as const };\nconst EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const;\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 CHECK_PATH = \"M 3.5 7.5 L 6 10 L 10.5 4.5\";\nconst BOX_SIZE = 14;\nconst UNDERLINE_SECONDS = 1.4;\nconst SUCCESS_COLOR = \"var(--mova-ai-success,#28734d)\";\nconst DANGER_COLOR = \"var(--mova-ai-danger,#a33c3c)\";\n\nexport type AITaskStatus = \"pending\" | \"running\" | \"done\" | \"failed\";\nexport type AITask = { children?: AITask[]; id: string; label: string; note?: string; status: AITaskStatus };\nexport type AITaskListProps = { className?: string; label?: string; tasks: AITask[]; theme?: \"light\" | \"dark\" };\n\nconst flatten = (tasks: AITask[]): AITask[] => tasks.flatMap((task) => [task, ...flatten(task.children ?? [])]);\nconst boxStroke = (status: AITaskStatus): string => status === \"failed\" ? DANGER_COLOR : status === \"done\" ? SUCCESS_COLOR : \"currentColor\";\n\nfunction TaskBox({ status, shouldReduceMotion }: { shouldReduceMotion: boolean; status: AITaskStatus }) {\n  const isDone = status === \"done\";\n  const isFailed = status === \"failed\";\n  return (\n    <span className=\"mt-0.5 flex size-3.5 shrink-0 items-center justify-center\">\n      <svg aria-hidden=\"true\" className=\"size-3.5\" viewBox={`0 0 ${BOX_SIZE} ${BOX_SIZE}`}>\n        <motion.rect\n          animate={{ fillOpacity: isDone ? 0.12 : 0, stroke: boxStroke(status) }}\n          fill={isFailed ? DANGER_COLOR : SUCCESS_COLOR}\n          height={12}\n          rx={3.5}\n          strokeWidth={1.4}\n          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.2 }}\n          width={12}\n          x={1}\n          y={1}\n        />\n        {isDone ? <path className=\"ai-task-draw\" d={CHECK_PATH} fill=\"none\" pathLength={1} stroke={SUCCESS_COLOR} strokeDasharray=\"1 1\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.8} /> : null}\n        {isFailed ? <path className=\"ai-task-draw\" d=\"M 5 5 L 9 9 M 9 5 L 5 9\" fill=\"none\" pathLength={1} stroke={DANGER_COLOR} strokeDasharray=\"1 1\" strokeLinecap=\"round\" strokeWidth={1.8} /> : null}\n      </svg>\n    </span>\n  );\n}\n\nfunction TaskRow({ depth, shouldReduceMotion, task }: { depth: number; shouldReduceMotion: boolean; task: AITask }) {\n  const isRunning = task.status === \"running\";\n  const isDone = task.status === \"done\";\n  return (\n    <motion.li\n      animate={{ opacity: isDone ? 0.65 : 1, y: isDone && !shouldReduceMotion ? 1 : 0 }}\n      className=\"list-none\"\n      style={{ paddingLeft: depth * 20 }}\n      transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}\n    >\n      <span className=\"relative flex items-start gap-2 py-1.5\">\n        <span className=\"sr-only\">{task.status}: </span>\n        <TaskBox shouldReduceMotion={shouldReduceMotion} status={task.status} />\n        <span className=\"min-w-0 flex-1 break-words text-[color:var(--mova-ai-ink,#202020)] text-xs leading-snug\">{task.label}</span>\n        {task.note ? <span className=\"max-w-[35%] truncate text-[color:var(--mova-ai-ink-secondary,#666)] text-xs tabular-nums\">{task.note}</span> : null}\n        {isRunning && !shouldReduceMotion ? (\n          <motion.span\n            animate={{ backgroundPositionX: [\"0%\", \"200%\"] }}\n            className=\"pointer-events-none absolute inset-x-0 bottom-0 h-px\"\n            style={{ backgroundImage: \"linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%)\", backgroundSize: \"50% 100%\", opacity: 0.5 }}\n            transition={{ duration: UNDERLINE_SECONDS, ease: EASE_IN_OUT, repeat: Number.POSITIVE_INFINITY }}\n          />\n        ) : null}\n      </span>\n    </motion.li>\n  );\n}\n\nexport function AITaskList({ className = \"\", label = \"Plan\", tasks, theme = \"light\" }: AITaskListProps) {\n  const shouldReduceMotion = Boolean(useReducedMotion());\n  const all = flatten(tasks);\n  const done = all.filter((task) => task.status === \"done\").length;\n  return (\n    <div className={`mova-ai-theme w-full rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-3 ${className}`} data-theme={theme}>\n      <style>{AI_THEME_STYLES}</style>\n      <div className=\"mb-1.5 flex items-baseline justify-between\">\n        <p className=\"font-medium text-[color:var(--mova-ai-ink,#202020)] text-sm\">{label}</p>\n        <p className=\"text-[color:var(--mova-ai-ink-secondary,#666)] text-xs tabular-nums\">{done}/{all.length}</p>\n      </div>\n      <style>{AI_THEME_STYLES}{`\n        .ai-task-draw { stroke-dashoffset: 0; }\n        @media (prefers-reduced-motion: no-preference) {\n          .ai-task-draw { animation: ai-task-draw 200ms cubic-bezier(0.23, 1, 0.32, 1) both; }\n        }\n        @keyframes ai-task-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }\n      `}</style>\n      <ul className=\"list-none\">\n        {(() => {\n          const renderTasks = (items: AITask[], depth: number): ReactNode => items.map((task) => <Fragment key={task.id}><TaskRow depth={depth} shouldReduceMotion={shouldReduceMotion} task={task} />{renderTasks(task.children ?? [], depth + 1)}</Fragment>);\n          return renderTasks(tasks, 0);\n        })()}\n      </ul>\n    </div>\n  );\n}\n\nexport default AITaskList;\n"
 }

package/registry/ai-tool-call.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-tool-call",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "ai-tool-call.tsx",
   "sourcePath": "ui/ai/ai-tool-call.tsx",
   "registryFile": "ai-tool-call.json",
@@ -16,5 +16,5 @@
   ],
   "license": "MIT",
   "previewMode": "client",
-  "content": "\"use client\";\n\"use client\";\n\n// Adapted from SmoothUI's ai-tool-call (MIT). See ../patterns/smoothui.LICENSE.\nimport { ChevronRight } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { type ReactNode, useState } from \"react\";\n\nconst SPRING_DEFAULT = { bounce: 0.1, duration: 0.25, type: \"spring\" as const };\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst BADGE_VIEWBOX = 24;\nconst BADGE_CENTER = BADGE_VIEWBOX / 2;\nconst RING_RADIUS = 8;\nconst CHECK_PATH = \"M 8.5 12.2 L 11 14.8 L 15.8 9.6\";\nconst CROSS_PATHS = [\"M 9 9 L 15 15\", \"M 15 9 L 9 15\"] as const;\nconst SPIN_SECONDS = 0.9;\nconst PENDING_PULSE_SECONDS = 1.6;\n\nexport type AIToolCallStatus = \"pending\" | \"running\" | \"success\" | \"error\";\nexport type AIToolCallProps = {\n  args?: ReactNode;\n  className?: string;\n  defaultOpen?: boolean;\n  name: string;\n  result?: ReactNode;\n  status?: AIToolCallStatus;\n  summary?: string;\n};\n\nconst STATUS_LABEL: Record<AIToolCallStatus, string> = {\n  error: \"Failed\",\n  pending: \"Queued\",\n  running: \"Running\",\n  success: \"Done\",\n};\n\nfunction AIToolCallBadge({ status, shouldReduceMotion }: { shouldReduceMotion: boolean; status: AIToolCallStatus }) {\n  const isRunning = status === \"running\";\n  const isPending = status === \"pending\";\n  const ringColor = status === \"success\" ? \"oklch(72% 0.17 150)\" : status === \"error\" ? \"oklch(63% 0.21 25)\" : \"currentColor\";\n\n  return (\n    <span className=\"relative flex size-5 shrink-0 items-center justify-center text-muted-foreground\">\n      <svg aria-hidden=\"true\" className=\"size-5 overflow-visible\" viewBox={`0 0 ${BADGE_VIEWBOX} ${BADGE_VIEWBOX}`}>\n        <motion.g\n          animate={shouldReduceMotion || !isRunning ? undefined : { rotate: 360 }}\n          style={{ transformBox: \"view-box\", transformOrigin: \"center\" }}\n          transition={{ duration: SPIN_SECONDS, ease: \"linear\", repeat: Number.POSITIVE_INFINITY }}\n        >\n          <motion.circle\n            animate={{\n              stroke: ringColor,\n              strokeDasharray: isRunning ? \"0.68 0.32\" : \"1 0\",\n              strokeOpacity: isPending && !shouldReduceMotion ? [0.35, 1, 0.35] : 1,\n            }}\n            cx={BADGE_CENTER}\n            cy={BADGE_CENTER}\n            fill=\"none\"\n            pathLength={1}\n            r={RING_RADIUS}\n            strokeLinecap=\"round\"\n            strokeWidth={2}\n            transition={{\n              stroke: shouldReduceMotion ? { duration: 0 } : { duration: 0.25, ease: EASE_OUT },\n              strokeDasharray: shouldReduceMotion ? { duration: 0 } : { duration: 0.25, ease: EASE_OUT },\n              strokeOpacity: shouldReduceMotion ? { duration: 0 } : { duration: PENDING_PULSE_SECONDS, repeat: Number.POSITIVE_INFINITY },\n            }}\n          />\n        </motion.g>\n        <AnimatePresence initial={false}>\n          {status === \"success\" ? (\n            <motion.path\n              animate={{ opacity: 1, pathLength: 1 }}\n              d={CHECK_PATH}\n              exit={{ opacity: 0, transition: { duration: 0.1 } }}\n              fill=\"none\"\n              initial={shouldReduceMotion ? { opacity: 1, pathLength: 1 } : { opacity: 1, pathLength: 0 }}\n              key=\"check\"\n              stroke={ringColor}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2.2}\n              transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.22, ease: EASE_OUT }}\n            />\n          ) : null}\n          {status === \"error\" ? CROSS_PATHS.map((path, index) => (\n            <motion.path\n              animate={{ opacity: 1, pathLength: 1 }}\n              d={path}\n              exit={{ opacity: 0, transition: { duration: 0.1 } }}\n              fill=\"none\"\n              initial={shouldReduceMotion ? { opacity: 1, pathLength: 1 } : { opacity: 1, pathLength: 0 }}\n              key={path}\n              stroke={ringColor}\n              strokeLinecap=\"round\"\n              strokeWidth={2.2}\n              transition={shouldReduceMotion ? { duration: 0 } : { delay: index * 0.06, duration: 0.16, ease: EASE_OUT }}\n            />\n          )) : null}\n        </AnimatePresence>\n      </svg>\n    </span>\n  );\n}\n\nexport function AIToolCall({ args, className = \"\", defaultOpen = false, name, result, status = \"pending\", summary }: AIToolCallProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const hasDetail = Boolean(args || result);\n\n  return (\n    <div className={`w-full overflow-hidden rounded-lg border border-border bg-background ${className}`}>\n      <button\n        aria-expanded={hasDetail ? isOpen : undefined}\n        className=\"flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left disabled:cursor-default focus-visible:outline-2 focus-visible:outline-offset-[-2px] hover:bg-muted/40\"\n        disabled={!hasDetail}\n        onClick={() => setIsOpen((current) => !current)}\n        type=\"button\"\n      >\n        <AIToolCallBadge shouldReduceMotion={Boolean(shouldReduceMotion)} status={status} />\n        <span className=\"min-w-0 flex-1\"><span className=\"block truncate font-medium font-mono text-foreground text-xs\">{name}</span></span>\n        {summary ? <span className=\"max-w-[40%] truncate text-muted-foreground text-xs\">{summary}</span> : null}\n        <span className=\"sr-only\">{STATUS_LABEL[status]}</span>\n        {hasDetail ? (\n          <motion.span animate={{ rotate: isOpen ? 90 : 0 }} className=\"flex size-4 shrink-0 items-center justify-center text-muted-foreground\" transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}>\n            <ChevronRight aria-hidden=\"true\" size={14} />\n          </motion.span>\n        ) : null}\n      </button>\n\n      <AnimatePresence initial={false}>\n        {isOpen && hasDetail ? (\n          <motion.div\n            animate={{ height: \"auto\", opacity: 1 }}\n            className=\"overflow-hidden\"\n            exit={shouldReduceMotion ? { opacity: 0, transition: { duration: 0 } } : { height: 0, opacity: 0 }}\n            initial={shouldReduceMotion ? { height: \"auto\", opacity: 1 } : { height: 0, opacity: 0 }}\n            transition={shouldReduceMotion ? { duration: 0 } : { height: SPRING_DEFAULT, opacity: { duration: 0.18, ease: EASE_OUT } }}\n          >\n            <div className=\"space-y-2 border-border border-t px-3 py-2.5 text-xs\">\n              {args ? <div><p className=\"mb-1 text-[10px] text-muted-foreground uppercase tracking-wide\">Arguments</p><div className=\"overflow-x-auto font-mono text-foreground\">{args}</div></div> : null}\n              {result ? <div><p className=\"mb-1 text-[10px] text-muted-foreground uppercase tracking-wide\">Result</p><div className=\"overflow-x-auto text-foreground\">{result}</div></div> : null}\n            </div>\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nexport default AIToolCall;\n"
+  "content": "\"use client\";\n\"use client\";\n\n// Adapted from SmoothUI's ai-tool-call (MIT). See ../patterns/smoothui.LICENSE.\nimport { ChevronRight } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { type ReactNode, useState } from \"react\";\n\nconst SPRING_DEFAULT = { bounce: 0.1, duration: 0.25, type: \"spring\" as const };\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst BADGE_VIEWBOX = 24;\nconst BADGE_CENTER = BADGE_VIEWBOX / 2;\nconst RING_RADIUS = 8;\nconst CHECK_PATH = \"M 8.5 12.2 L 11 14.8 L 15.8 9.6\";\nconst CROSS_PATHS = [\"M 9 9 L 15 15\", \"M 15 9 L 9 15\"] as const;\nconst SPIN_SECONDS = 0.9;\nconst PENDING_PULSE_SECONDS = 1.6;\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\";\n\nexport type AIToolCallStatus = \"pending\" | \"running\" | \"success\" | \"error\";\nexport type AIToolCallProps = {\n  args?: ReactNode;\n  className?: string;\n  defaultOpen?: boolean;\n  name: string;\n  result?: ReactNode;\n  status?: AIToolCallStatus;\n  summary?: string;\n  theme?: \"light\" | \"dark\";\n};\n\nconst STATUS_LABEL: Record<AIToolCallStatus, string> = {\n  error: \"Failed\",\n  pending: \"Queued\",\n  running: \"Running\",\n  success: \"Done\",\n};\n\nfunction AIToolCallBadge({ status, shouldReduceMotion }: { shouldReduceMotion: boolean; status: AIToolCallStatus }) {\n  const isRunning = status === \"running\";\n  const isPending = status === \"pending\";\n  const ringColor = status === \"success\" ? \"var(--mova-ai-success,#28734d)\" : status === \"error\" ? \"var(--mova-ai-danger,#a33c3c)\" : \"currentColor\";\n\n  return (\n    <span className=\"relative flex size-5 shrink-0 items-center justify-center text-muted-foreground\">\n      <svg aria-hidden=\"true\" className=\"size-5 overflow-visible\" viewBox={`0 0 ${BADGE_VIEWBOX} ${BADGE_VIEWBOX}`}>\n        <motion.g\n          animate={shouldReduceMotion || !isRunning ? undefined : { rotate: 360 }}\n          style={{ transformBox: \"view-box\", transformOrigin: \"center\" }}\n          transition={{ duration: SPIN_SECONDS, ease: \"linear\", repeat: Number.POSITIVE_INFINITY }}\n        >\n          <motion.circle\n            animate={{\n              stroke: ringColor,\n              strokeDasharray: isRunning ? \"0.68 0.32\" : \"1 0\",\n              strokeOpacity: isPending && !shouldReduceMotion ? [0.35, 1, 0.35] : 1,\n            }}\n            cx={BADGE_CENTER}\n            cy={BADGE_CENTER}\n            fill=\"none\"\n            pathLength={1}\n            r={RING_RADIUS}\n            strokeLinecap=\"round\"\n            strokeWidth={2}\n            transition={{\n              stroke: shouldReduceMotion ? { duration: 0 } : { duration: 0.25, ease: EASE_OUT },\n              strokeDasharray: shouldReduceMotion ? { duration: 0 } : { duration: 0.25, ease: EASE_OUT },\n              strokeOpacity: shouldReduceMotion ? { duration: 0 } : { duration: PENDING_PULSE_SECONDS, repeat: Number.POSITIVE_INFINITY },\n            }}\n          />\n        </motion.g>\n        <AnimatePresence initial={false}>\n          {status === \"success\" ? (\n            <motion.path\n              animate={{ opacity: 1, pathLength: 1 }}\n              d={CHECK_PATH}\n              exit={{ opacity: 0, transition: { duration: 0.1 } }}\n              fill=\"none\"\n              initial={shouldReduceMotion ? { opacity: 1, pathLength: 1 } : { opacity: 1, pathLength: 0 }}\n              key=\"check\"\n              stroke={ringColor}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2.2}\n              transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.22, ease: EASE_OUT }}\n            />\n          ) : null}\n          {status === \"error\" ? CROSS_PATHS.map((path, index) => (\n            <motion.path\n              animate={{ opacity: 1, pathLength: 1 }}\n              d={path}\n              exit={{ opacity: 0, transition: { duration: 0.1 } }}\n              fill=\"none\"\n              initial={shouldReduceMotion ? { opacity: 1, pathLength: 1 } : { opacity: 1, pathLength: 0 }}\n              key={path}\n              stroke={ringColor}\n              strokeLinecap=\"round\"\n              strokeWidth={2.2}\n              transition={shouldReduceMotion ? { duration: 0 } : { delay: index * 0.06, duration: 0.16, ease: EASE_OUT }}\n            />\n          )) : null}\n        </AnimatePresence>\n      </svg>\n    </span>\n  );\n}\n\nexport function AIToolCall({ args, className = \"\", defaultOpen = false, name, result, status = \"pending\", summary, theme = \"light\" }: AIToolCallProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const hasDetail = Boolean(args || result);\n\n  return (\n    <div className={`mova-ai-theme w-full overflow-hidden rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] text-[color:var(--mova-ai-ink,#202020)] ${className}`} data-theme={theme}>\n      <style>{AI_THEME_STYLES}</style>\n      <button\n        aria-expanded={hasDetail ? isOpen : undefined}\n        className=\"flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left disabled:cursor-default focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--mova-ai-accent,#454545)] hover:bg-[color-mix(in_srgb,var(--mova-ai-hover,#f1f1f1)_70%,transparent)]\"\n        disabled={!hasDetail}\n        onClick={() => setIsOpen((current) => !current)}\n        type=\"button\"\n      >\n        <AIToolCallBadge shouldReduceMotion={Boolean(shouldReduceMotion)} status={status} />\n        <span className=\"min-w-0 flex-1\"><span className=\"block truncate font-medium font-mono text-[color:var(--mova-ai-ink,#202020)] text-xs\">{name}</span></span>\n        {summary ? <span className=\"max-w-[40%] truncate text-[color:var(--mova-ai-ink-secondary,#666)] text-xs\">{summary}</span> : null}\n        <span className=\"sr-only\">{STATUS_LABEL[status]}</span>\n        {hasDetail ? (\n          <motion.span animate={{ rotate: isOpen ? 90 : 0 }} className=\"flex size-4 shrink-0 items-center justify-center text-[color:var(--mova-ai-ink-secondary,#666666)]\" transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}>\n            <ChevronRight aria-hidden=\"true\" size={14} />\n          </motion.span>\n        ) : null}\n      </button>\n\n      <AnimatePresence initial={false}>\n        {isOpen && hasDetail ? (\n          <motion.div\n            animate={{ height: \"auto\", opacity: 1 }}\n            className=\"overflow-hidden\"\n            exit={shouldReduceMotion ? { opacity: 0, transition: { duration: 0 } } : { height: 0, opacity: 0 }}\n            initial={shouldReduceMotion ? { height: \"auto\", opacity: 1 } : { height: 0, opacity: 0 }}\n            transition={shouldReduceMotion ? { duration: 0 } : { height: SPRING_DEFAULT, opacity: { duration: 0.18, ease: EASE_OUT } }}\n          >\n            <div className=\"space-y-2 border-[var(--mova-ai-border,#dedede)] border-t px-3 py-2.5 text-xs\">\n              {args ? <div><p className=\"mb-1 text-[10px] text-[color:var(--mova-ai-ink-secondary,#666666)] uppercase tracking-wide\">Arguments</p><div className=\"overflow-x-auto font-mono text-[color:var(--mova-ai-ink,#202020)]\">{args}</div></div> : null}\n              {result ? <div><p className=\"mb-1 text-[10px] text-[color:var(--mova-ai-ink-secondary,#666666)] uppercase tracking-wide\">Result</p><div className=\"overflow-x-auto text-[color:var(--mova-ai-ink,#202020)]\">{result}</div></div> : null}\n            </div>\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nexport default AIToolCall;\n"
 }

package/registry/analyzing-image.json

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

package/registry/animated-sidebar.json

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

package/registry/animated-tags.json

@@ -1,7 +1,7 @@
 {
   "id": "animated-tags",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "animated-tags.tsx",
   "sourcePath": "ui/patterns/animated-tags.tsx",
   "registryFile": "animated-tags.json",

package/registry/app-icon-load.json

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

package/registry/apple-breathe.json

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

package/registry/apple-equalizer.json

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

package/registry/apple-icon-morph.json

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

package/registry/apple-pulse-dots.json

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

package/registry/apple-scale-pulse.json

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

package/registry/apple-sound-wave.json

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

package/registry/apple-text-reveal.json

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

package/registry/apple-unlock.json

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

package/registry/arc-tracer.json

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

package/registry/bar-cascade.json

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

package/registry/bar-sweep.json

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

package/registry/blur-text.json

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

package/registry/blur-up-char.json

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

package/registry/blur-up-word.json

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

package/registry/bobbing-dots.json

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

package/registry/bookmark-corner-peel.json

@@ -1,7 +1,7 @@
 {
   "id": "bookmark-corner-peel",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "bookmark-corner-peel.tsx",
   "sourcePath": "components/css-animations/whimsical/ConceptTrios1.tsx",
   "registryFile": "bookmark-corner-peel.json",

package/registry/bookmark-save-pill.json

@@ -1,7 +1,7 @@
 {
   "id": "bookmark-save-pill",
   "tier": "free",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "file": "bookmark-save-pill.tsx",
   "sourcePath": "components/css-animations/yui-components/RedesignedUiTrios.tsx",
   "registryFile": "bookmark-save-pill.json",

package/registry/bookmark-toggle.json

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

package/registry/border-trail-loading.json

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