{
  "count": 66,
  "components": [
    {
      "slug": "accordion",
      "name": "Accordion",
      "category": "Navigation",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/accordion",
      "description": "Collapsible content sections. Single or multi-open mode. Hairline-bottom rows; ChevronDown rotates 180° on open.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/accordion",
        "importStatement": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@dashfi/svelte/ui/accordion'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/accordion/",
        "handoffDirective": "Svelte/SvelteKit: import Accordion from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "alert",
      "name": "Alert",
      "category": "Feedback",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/alert",
      "description": "Inline contextual messaging — success, warning, error, info. Always paired with an icon and short copy. Full 1px border in the variant colour (40% tint) on a soft tinted background, rounded-lg.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/alert",
        "importStatement": "import { Alert, AlertTitle, AlertDescription } from '@dashfi/svelte/ui/alert'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/alert/",
        "handoffDirective": "Svelte/SvelteKit: import Alert from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "alert-dialog",
      "name": "Alert Dialog",
      "category": "Feedback",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/alert-dialog",
      "description": "Confirmation modal — interrupts the user for a destructive or irreversible action.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/alert-dialog",
        "importStatement": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from '@dashfi/svelte/ui/alert-dialog'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/alert-dialog/",
        "handoffDirective": "Svelte/SvelteKit: import Alert Dialog from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "alert-error",
      "name": "Alert Error",
      "category": "Display",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/alert-error",
      "description": "Specialized error alert. Pre-styled wrapper around the destructive Alert variant for common error surfaces with retry/dismiss affordances.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/alert-error",
        "importStatement": "import { AlertError } from '@dashfi/svelte/ui/alert-error'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/alert-error/alert-error.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Alert Error from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "avatar",
      "name": "Avatar",
      "category": "Display",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/avatar",
      "description": "Circular user or merchant identity. Image with fallback initials.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/avatar",
        "importStatement": "import { Avatar, AvatarImage, AvatarFallback } from '@dashfi/svelte/ui/avatar'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/avatar/",
        "handoffDirective": "Svelte/SvelteKit: import Avatar from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "badge",
      "name": "Badge",
      "category": "Display",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/badge",
      "description": "Small categorical or decorative label. Mono uppercase in a hairline-bordered or filled chip. Use Badge for category, count, or visual emphasis (DEBIT, 99+, AI, NEW). For semantic state (Active, Pending, Failed) use Pill.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/badge",
        "importStatement": "import { Badge } from '@dashfi/svelte/ui/badge'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/badge/badge.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Badge from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "breadcrumb",
      "name": "Breadcrumb",
      "category": "Navigation",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/breadcrumb",
      "description": "Hierarchical navigation trail. Always end with a non-link Page indicating the current location.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/breadcrumb",
        "importStatement": "import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@dashfi/svelte/ui/breadcrumb'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/breadcrumb/",
        "handoffDirective": "Svelte/SvelteKit: import Breadcrumb from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "button",
      "name": "Button",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/button",
      "description": "The primary action surface. Seven variants, six sizes, with loading state. Renders as button or anchor.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/button",
        "importStatement": "import { Button } from '@dashfi/svelte/ui/button'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/button/button.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Button from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "calendar",
      "name": "Calendar",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/calendar",
      "description": "Date picker. Month grid with prev/next navigation, keyboard-navigable. Selected day fills primary; today fills accent.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/calendar",
        "importStatement": "import { Calendar } from '@dashfi/svelte/ui/calendar'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/calendar/",
        "handoffDirective": "Svelte/SvelteKit: import Calendar from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "auth-footer",
      "name": "Auth footer",
      "category": "Chrome",
      "status": "stable",
      "importPath": "// Resolved via marketing_get_legal_disclosure({ kind })",
      "description": "Legal disclosure block paired with secondary routing — sits at the bottom of auth pages (sign-in, sign-up, 2FA, magic link, password reset). Sourced from marketing_get_legal_disclosure.",
      "implementation": {
        "kind": "dashbook-scaffold",
        "reusePolicy": "reference-guidance",
        "importPath": "// Resolved via marketing_get_legal_disclosure({ kind })",
        "canonicalSource": "src/lib/mcp/tools/marketing.ts → marketing_get_legal_disclosure",
        "handoffDirective": "This entry is composed guidance rather than an @dashfi/svelte export. Follow its canonical example and referenced Dashbook asset tools."
      }
    },
    {
      "slug": "card",
      "name": "Card",
      "category": "Layout",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/card",
      "description": "A bordered surface for grouping related content. Compositional — Card, CardHeader, CardContent, CardFooter.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/card",
        "importStatement": "import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@dashfi/svelte/ui/card'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/card/",
        "handoffDirective": "Svelte/SvelteKit: import Card from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "checkbox",
      "name": "Checkbox",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/checkbox",
      "description": "Boolean input with checked / unchecked / indeterminate states.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/checkbox",
        "importStatement": "import { Checkbox } from '@dashfi/svelte/ui/checkbox'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/checkbox/checkbox.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Checkbox from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "code-block",
      "name": "Code Block",
      "category": "Display",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/code-block",
      "description": "Display code with a monospace surface. Prism-backed — 7 languages, 8 themes, optional line numbers.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/code-block",
        "importStatement": "import { CodeBlock } from '@dashfi/svelte/ui/code-block'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/code-block/code-block.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Code Block from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "collapsible",
      "name": "Collapsible",
      "category": "Navigation",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/collapsible",
      "description": "Show/hide a single content block. Unstyled bits-ui primitive — caller styles every part. Building block for accordions and disclosure UI.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/collapsible",
        "importStatement": "import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@dashfi/svelte/ui/collapsible'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/collapsible/",
        "handoffDirective": "Svelte/SvelteKit: import Collapsible from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "command",
      "name": "Command",
      "category": "Navigation",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/command",
      "description": "Cmd+K palette. Searchable, keyboard-navigable list of actions. Powers the global search. Built on bits-ui.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/command",
        "importStatement": "import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandSeparator, CommandEmpty } from '@dashfi/svelte/ui/command'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/command/",
        "handoffDirective": "Svelte/SvelteKit: import Command from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "data-table",
      "name": "Data Table",
      "category": "Data",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/data-table",
      "description": "Headless TanStack-Table integration. Use to compose custom tables — sorting, paging, filtering hooks. Most consumers want Enhanced Table instead.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/data-table",
        "importStatement": "import { createSvelteTable } from '@dashfi/svelte/ui/data-table'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/data-table/",
        "handoffDirective": "Svelte/SvelteKit: import Data Table from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "date-range-selector",
      "name": "Date Range Selector",
      "category": "Inputs",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/date-range-selector",
      "description": "Pick a start + end date with presets — Last 7d, MTD, QTD, YTD. Powers transaction filters and reports.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/date-range-selector",
        "importStatement": "import { DateRangeSelector } from '@dashfi/svelte/ui/date-range-selector'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/date-range-selector/",
        "handoffDirective": "Svelte/SvelteKit: import Date Range Selector from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "dialog",
      "name": "Dialog",
      "category": "Feedback",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/dialog",
      "description": "Generic modal. Use for forms, confirmations, content panels.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/dialog",
        "importStatement": "import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogFooter } from '@dashfi/svelte/ui/dialog'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/dialog/",
        "handoffDirective": "Svelte/SvelteKit: import Dialog from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "drawer",
      "name": "Drawer",
      "category": "Feedback",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/drawer",
      "description": "Mobile-friendly slide-up panel. Pulls from the bottom edge with momentum scroll, drag-to-dismiss, and an optional page-scale effect.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/drawer",
        "importStatement": "import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from '@dashfi/svelte/ui/drawer'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/drawer/",
        "handoffDirective": "Svelte/SvelteKit: import Drawer from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "dropdown-menu",
      "name": "Dropdown Menu",
      "category": "Navigation",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/dropdown-menu",
      "description": "Contextual action menu attached to a trigger. Keyboard-navigable, portal-rendered, supports nested submenus and checkbox / radio items.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/dropdown-menu",
        "importStatement": "import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@dashfi/svelte/ui/dropdown-menu'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/dropdown-menu/",
        "handoffDirective": "Svelte/SvelteKit: import Dropdown Menu from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "empty",
      "name": "Empty",
      "category": "Display",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/empty",
      "description": "Empty-state container. Title, description, optional action — for \"no data yet\" surfaces. Centered, transparent fill, dashed-border-ready.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/empty",
        "importStatement": "import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent } from '@dashfi/svelte/ui/empty'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/empty/",
        "handoffDirective": "Svelte/SvelteKit: import Empty from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "enhanced-table",
      "name": "Enhanced Table",
      "category": "Data",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/enhanced-table",
      "description": "Feature-rich table — sorting, filtering, pagination, column visibility, row expansion. Built on @tanstack/table-core.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/enhanced-table",
        "importStatement": "import { EnhancedTable } from '@dashfi/svelte/ui/enhanced-table'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/enhanced-table/",
        "handoffDirective": "Svelte/SvelteKit: import Enhanced Table from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "flow-lines",
      "name": "Flow Lines",
      "category": "Display",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/flow-lines",
      "description": "Animated flowing lines — decorative brand element. The vector-map motif as a Svelte component. WebGL fluid simulation, marketing surfaces only.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/flow-lines",
        "importStatement": "import { FlowLines } from '@dashfi/svelte/ui/flow-lines'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/flow-lines/",
        "handoffDirective": "Svelte/SvelteKit: import Flow Lines from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "form",
      "name": "Form",
      "category": "Inputs",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/form",
      "description": "Composition primitives for accessible forms — Label + Input + Description + Errors. Wraps sveltekit-superforms + formsnap; validation comes from the schema (zod).",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/form",
        "importStatement": "import { FormField, FormLabel, FormControl, FormDescription, FormFieldErrors } from '@dashfi/svelte/ui/form'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/form/",
        "handoffDirective": "Svelte/SvelteKit: import Form from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "fullscreen-dialog",
      "name": "Fullscreen Dialog",
      "category": "Feedback",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/fullscreen-dialog",
      "description": "Edge-to-edge modal for long flows — KYC, statement download, partner agreement. Brand logo + close in the header; body scrolls.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/fullscreen-dialog",
        "importStatement": "import { FullscreenDialog } from '@dashfi/svelte/ui/fullscreen-dialog'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/fullscreen-dialog/fullscreen-dialog.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Fullscreen Dialog from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "hover-card",
      "name": "Hover Card",
      "category": "Feedback",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/hover-card",
      "description": "Floating card on hover or focus. 256px panel — 1px border, 16px padding, shadow-md. Richer than a Tooltip, lighter than a Popover.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/hover-card",
        "importStatement": "import { HoverCard, HoverCardTrigger, HoverCardContent } from '@dashfi/svelte/ui/hover-card'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/hover-card/",
        "handoffDirective": "Svelte/SvelteKit: import Hover Card from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "indicator",
      "name": "Indicator",
      "category": "Display",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/indicator",
      "description": "Small status dot. Layered over icons or avatars for unread counts, presence, alerts. Jade-only.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/indicator",
        "importStatement": "import { Indicator } from '@dashfi/svelte/ui/indicator'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/indicator/indicator.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Indicator from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "input",
      "name": "Input",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/input",
      "description": "Text field. Underline-only — 40px tall, no surrounding border or radius, bottom hairline darkens on focus. Supports masks (for formatted input) and debounced binding (for search).",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/input",
        "importStatement": "import { Input } from '@dashfi/svelte/ui/input'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/input/input.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Input from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "item",
      "name": "Item",
      "category": "Display",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/item",
      "description": "List item primitive — leading icon/avatar, title + description, trailing action. The row in any list.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/item",
        "importStatement": "import { Item, ItemContent, ItemTitle, ItemDescription, ItemMedia, ItemActions } from '@dashfi/svelte/ui/item'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/item/",
        "handoffDirective": "Svelte/SvelteKit: import Item from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "label",
      "name": "Label",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/label",
      "description": "Form label that pairs with any input via for/id. Required for screen-reader-friendly forms. Eyebrow style — 12px uppercase tracked.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/label",
        "importStatement": "import { Label } from '@dashfi/svelte/ui/label'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/label/label.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Label from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "linear-loader",
      "name": "Linear Loader",
      "category": "Feedback",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/linear-loader",
      "description": "Indeterminate horizontal progress bar. Use across the top of a panel or page during background work.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/linear-loader",
        "importStatement": "import { LinearLoader } from '@dashfi/svelte/ui/linear-loader'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/linear-loader/linear-loader.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Linear Loader from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "loader",
      "name": "Loader",
      "category": "Feedback",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/loader",
      "description": "Indeterminate spinner. Drop into a button, an empty state, or a card while data loads.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/loader",
        "importStatement": "import { Loader } from '@dashfi/svelte/ui/loader'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/loader/loader.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Loader from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "logo",
      "name": "Logo",
      "category": "Display",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/logo",
      "description": "Dash.fi wordmark and app icon as Svelte components — Logo, LogoSmall, LogoApp.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/logo",
        "importStatement": "import { Logo, LogoSmall, LogoApp } from '@dashfi/svelte/ui/logo'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/logo/",
        "handoffDirective": "Svelte/SvelteKit: import Logo from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "magnetic-hover",
      "name": "Magnetic Hover",
      "category": "Display",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/magnetic-hover",
      "description": "Decorative — wrapped element shifts subtly toward the cursor on hover. For marketing CTAs only; not for product UI.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/magnetic-hover",
        "importStatement": "import { MagneticHover } from '@dashfi/svelte/ui/magnetic-hover'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/magnetic-hover/magnetic-hover.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Magnetic Hover from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "merchant-logo",
      "name": "Merchant Logo",
      "category": "Display",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/merchant-logo",
      "description": "Auto-fetched merchant logo with initials fallback. Used in transaction rows and Ad-Pay surfaces.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/merchant-logo",
        "importStatement": "import { MerchantLogo } from '@dashfi/svelte/ui/merchant-logo'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/merchant-logo/merchant-logo.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Merchant Logo from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "multi-select",
      "name": "Multi Select",
      "category": "Inputs",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/multi-select",
      "description": "Select multiple options from a flat list. Bordered combobox trigger with inline Badge chips, clear controls, and an anchored option panel.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/multi-select",
        "importStatement": "import { MultiSelect } from '@dashfi/svelte/ui/multi-select'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/multi-select/multi-select.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Multi Select from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "navigation",
      "name": "Sub Navigation",
      "category": "Navigation",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/navigation",
      "description": "In-page section nav — settings, profile, account flows. Uses route binding for active state. Two variants: primary (top strip) and secondary (sub-row).",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/navigation",
        "importStatement": "import { SubNavigation } from '@dashfi/svelte/ui/navigation'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/navigation/",
        "handoffDirective": "Svelte/SvelteKit: import Sub Navigation from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "page-shell",
      "name": "Page shell",
      "category": "Chrome",
      "status": "stable",
      "importPath": "// Resolved via product_get_page_template({ slug })",
      "description": "Page-level chrome scaffold — centered card layout used by auth surfaces (sign-in, 2FA, magic link, password reset). 460px max-width, 24/32/48 vertical padding, wordmark header + legal footer slots.",
      "implementation": {
        "kind": "dashbook-scaffold",
        "reusePolicy": "reference-guidance",
        "importPath": "// Resolved via product_get_page_template({ slug })",
        "canonicalSource": "src/lib/mcp/tools/product.ts → product_get_page_template",
        "handoffDirective": "This entry is composed guidance rather than an @dashfi/svelte export. Follow its canonical example and referenced Dashbook asset tools."
      }
    },
    {
      "slug": "pagination",
      "name": "Pagination",
      "category": "Navigation",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/pagination",
      "description": "Paged navigation for long lists. Previous/Next buttons + ellipsis + numbered links via the bits-ui pages snippet.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/pagination",
        "importStatement": "import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@dashfi/svelte/ui/pagination'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/pagination/",
        "handoffDirective": "Svelte/SvelteKit: import Pagination from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "pagination-wrapper",
      "name": "Pagination Wrapper",
      "category": "Navigation",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/pagination-wrapper",
      "description": "Batteries-included pagination row with Previous/Next, numbered pages, optional total count, and a page-size Select.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/pagination-wrapper",
        "importStatement": "import { PaginationWrapper } from '@dashfi/svelte/ui/pagination-wrapper'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/pagination-wrapper/",
        "handoffDirective": "Svelte/SvelteKit: import Pagination Wrapper from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "partner-cobrand",
      "name": "Partner co-brand block",
      "category": "Chrome",
      "status": "stable",
      "importPath": "// Resolved via marketing_get_partner_kit({ partner })",
      "description": "Partner co-branding block — wordmark + partner logo lockup with the canonical usage rules. Used on partner-co-branded auth pages, integration docs, joint landing pages.",
      "implementation": {
        "kind": "dashbook-scaffold",
        "reusePolicy": "reference-guidance",
        "importPath": "// Resolved via marketing_get_partner_kit({ partner })",
        "canonicalSource": "src/lib/mcp/tools/marketing.ts → marketing_get_partner_kit",
        "handoffDirective": "This entry is composed guidance rather than an @dashfi/svelte export. Follow its canonical example and referenced Dashbook asset tools."
      }
    },
    {
      "slug": "phone-input",
      "name": "Phone Input",
      "category": "Inputs",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/phone-input",
      "description": "International phone input — country flag picker, format-as-you-type, validates per region against E.164.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/phone-input",
        "importStatement": "import { PhoneInput } from '@dashfi/svelte/ui/phone-input'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/phone-input/phone-input.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Phone Input from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "pill",
      "name": "Pill",
      "category": "Display",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/pill",
      "description": "Small label that encodes semantic state. Five types map to intent (base / info / success / warning / danger) — use Pill for status (\"Active\", \"Pending\", \"Failed\", \"Connected\"). For categorical or decorative labels (DEBIT, 99+, NEW) use Badge.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/pill",
        "importStatement": "import { Pill } from '@dashfi/svelte/ui/pill'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/pill/pill.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Pill from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "popover",
      "name": "Popover",
      "category": "Feedback",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/popover",
      "description": "Floating panel anchored to a trigger. 288px wide, 12px radius, shadow-lg, no border. For filters, mini-forms, secondary actions.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/popover",
        "importStatement": "import { Popover, PopoverTrigger, PopoverContent } from '@dashfi/svelte/ui/popover'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/popover/",
        "handoffDirective": "Svelte/SvelteKit: import Popover from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "progress",
      "name": "Progress",
      "category": "Feedback",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/progress",
      "description": "Determinate progress bar. 0–100% with optional label.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/progress",
        "importStatement": "import { Progress } from '@dashfi/svelte/ui/progress'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/progress/progress.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Progress from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "radio-group",
      "name": "Radio Group",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/radio-group",
      "description": "Single-option selection within a group. Keyboard-navigable.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/radio-group",
        "importStatement": "import { RadioGroup, RadioGroupItem } from '@dashfi/svelte/ui/radio-group'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/radio-group/",
        "handoffDirective": "Svelte/SvelteKit: import Radio Group from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "range-calendar",
      "name": "Range Calendar",
      "category": "Inputs",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/range-calendar",
      "description": "Two-month calendar grid for selecting a date range. Underlies Date Range Selector. Start/end primary-filled, middle accent-tinted.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/range-calendar",
        "importStatement": "import { RangeCalendar } from '@dashfi/svelte/ui/range-calendar'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/range-calendar/",
        "handoffDirective": "Svelte/SvelteKit: import Range Calendar from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "scroll-area",
      "name": "Scroll Area",
      "category": "Navigation",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/scroll-area",
      "description": "Custom-styled scrollbar. Replaces native browser scrollbar for visual consistency. 10px rails, --color-border pill thumbs.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/scroll-area",
        "importStatement": "import { ScrollArea, ScrollBar } from '@dashfi/svelte/ui/scroll-area'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/scroll-area/",
        "handoffDirective": "Svelte/SvelteKit: import Scroll Area from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "select",
      "name": "Select",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/select",
      "description": "Dropdown selection. Built on bits-ui — keyboard navigation, search, async.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/select",
        "importStatement": "import { Select, SelectTrigger, SelectContent, SelectItem } from '@dashfi/svelte/ui/select'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/select/",
        "handoffDirective": "Svelte/SvelteKit: import Select from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "separator",
      "name": "Separator",
      "category": "Display",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/separator",
      "description": "Hairline divider. Horizontal or vertical, decorative or semantic.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/separator",
        "importStatement": "import { Separator } from '@dashfi/svelte/ui/separator'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/separator/separator.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Separator from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "sheet",
      "name": "Sheet",
      "category": "Feedback",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/sheet",
      "description": "Side drawer — slides in from any edge. Left/right are floating inset panels (12px gap from the viewport edges, fully rounded); top/bottom stay edge-flush. 40% black overlay, absolute Close button in the corner. Built on bits-ui Dialog primitives.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/sheet",
        "importStatement": "import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@dashfi/svelte/ui/sheet'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/sheet/",
        "handoffDirective": "Svelte/SvelteKit: import Sheet from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "sidebar",
      "name": "Sidebar",
      "category": "Navigation",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/sidebar",
      "description": "The authenticated-app navigation shell. Collapsible (icon / offcanvas / none), auto-swaps to a Sheet below the md breakpoint, Cmd/Ctrl+B keyboard shortcut. Every signed-in route mounts inside it via the Protected app shell pattern.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/sidebar",
        "importStatement": "import { Sidebar, SidebarProvider, SidebarInset, SidebarTrigger, SidebarMenu } from '@dashfi/svelte/ui/sidebar'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/sidebar/",
        "handoffDirective": "Svelte/SvelteKit: import Sidebar from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "skeleton",
      "name": "Skeleton",
      "category": "Display",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/skeleton",
      "description": "Placeholder shape for loading states. Match the silhouette of the eventual content.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/skeleton",
        "importStatement": "import { Skeleton } from '@dashfi/svelte/ui/skeleton'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/skeleton/skeleton.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Skeleton from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "sonner",
      "name": "Toast (Sonner)",
      "category": "Feedback",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/sonner",
      "description": "Stacked transient notifications. Mount <code>Toaster</code> once at the app root; invoke <code>toast()</code> from anywhere. Wraps svelte-sonner with our theme.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/sonner",
        "importStatement": "import { Toaster } from '@dashfi/svelte/ui/sonner'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/sonner/sonner.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Toast (Sonner) from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "spinner",
      "name": "Spinner",
      "category": "Feedback",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/spinner",
      "description": "Compact spinning indicator. Smaller than Loader.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/spinner",
        "importStatement": "import { Spinner } from '@dashfi/svelte/ui/spinner'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/spinner/spinner.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Spinner from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "support-modal",
      "name": "Support Modal",
      "category": "Feedback",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/support-modal",
      "description": "Help & support widget — Dash.fi-specific. Opens a guided Dialog bound to the user session and tier with hover-lift option rows.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/support-modal",
        "importStatement": "import { SupportModal } from '@dashfi/svelte/ui/support-modal'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/support-modal/support-modal.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Support Modal from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "switch",
      "name": "Switch",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/switch",
      "description": "Binary on/off control. Larger affordance than a checkbox — for settings, toggles.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/switch",
        "importStatement": "import { Switch } from '@dashfi/svelte/ui/switch'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/switch/switch.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Switch from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "table",
      "name": "Table",
      "category": "Data",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/table",
      "description": "Basic semantic table — Table, Header, Body, Row, Cell, Head. For static data; use Enhanced Table for sorting, filtering, paging.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/table",
        "importStatement": "import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@dashfi/svelte/ui/table'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/table/",
        "handoffDirective": "Svelte/SvelteKit: import Table from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "table-filters",
      "name": "Table Filters",
      "category": "Data",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/table-filters",
      "description": "Pre-built filter UI — search, select facets, date range. Drops into table toolbars; URL-param helpers included.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/table-filters",
        "importStatement": "import { SearchFilter, DateRangeFilter, FilterButton } from '@dashfi/svelte/ui/table-filters'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/table-filters/",
        "handoffDirective": "Svelte/SvelteKit: import Table Filters from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "tabs",
      "name": "Tabs",
      "category": "Navigation",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/tabs",
      "description": "Switch between panes of content. Underline indicator on the active tab.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/tabs",
        "importStatement": "import { Tabs, TabsList, TabsTrigger, TabsContent } from '@dashfi/svelte/ui/tabs'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/tabs/",
        "handoffDirective": "Svelte/SvelteKit: import Tabs from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "tel-input",
      "name": "Tel Input",
      "category": "Inputs",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/tel-input",
      "description": "Telephone input primitive. Outline button (dial code) + searchable Command popover + bare Input. Composite {raw, dialCode, iso2} binding.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/tel-input",
        "importStatement": "import { TelInput } from '@dashfi/svelte/ui/tel-input'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/tel-input/tel-input.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Tel Input from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "textarea",
      "name": "Textarea",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/textarea",
      "description": "Multiline text input. Same underline-only border + focus treatment as Input.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/textarea",
        "importStatement": "import { Textarea } from '@dashfi/svelte/ui/textarea'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/textarea/textarea.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Textarea from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "toggle",
      "name": "Toggle",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/toggle",
      "description": "Single press-on/press-off button. Same hit target as Button, different state model — tracks a pressed state via data-state=\"on\".",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/toggle",
        "importStatement": "import { Toggle } from '@dashfi/svelte/ui/toggle'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/toggle/toggle.svelte",
        "handoffDirective": "Svelte/SvelteKit: import Toggle from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "toggle-group",
      "name": "Toggle Group",
      "category": "Inputs",
      "status": "stable",
      "importPath": "@dashfi/svelte/ui/toggle-group",
      "description": "Group of toggles bound together — single or multi-select. Segmented-control pattern. Shared size/variant via Svelte context.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/toggle-group",
        "importStatement": "import { ToggleGroup, ToggleGroupItem } from '@dashfi/svelte/ui/toggle-group'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/toggle-group/",
        "handoffDirective": "Svelte/SvelteKit: import Toggle Group from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "tooltip",
      "name": "Tooltip",
      "category": "Feedback",
      "status": "beta",
      "importPath": "@dashfi/svelte/ui/tooltip",
      "description": "Hover-revealed label. Inverted surface — bg-primary text-primary-foreground. Single sentence; never essential information.",
      "implementation": {
        "kind": "shared-svelte-component",
        "reusePolicy": "required-in-svelte",
        "package": "@dashfi/svelte",
        "importPath": "@dashfi/svelte/ui/tooltip",
        "importStatement": "import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@dashfi/svelte/ui/tooltip'",
        "canonicalSource": "libs/svelte-components/lib/src/lib/ui/tooltip/",
        "handoffDirective": "Svelte/SvelteKit: import Tooltip from the shared library using the exact importStatement. Do not recreate it from anatomy HTML, generated CSS, or screenshots.",
        "nonSvelteFallback": {
          "action": "port",
          "tool": "product_port_to",
          "instruction": "For React, React Native, Vue, or plain HTML/CSS, port the anatomy with product_port_to because @dashfi/svelte is not a cross-framework runtime."
        }
      }
    },
    {
      "slug": "wordmark",
      "name": "Wordmark",
      "category": "Chrome",
      "status": "stable",
      "importPath": "// Resolved via marketing_get_logo({ variant: \"wordmark\" })",
      "description": "The Dash.fi wordmark — page-chrome use. Always sourced from marketing_get_logo. Never invented, reconstructed, or substituted with a placeholder glyph.",
      "implementation": {
        "kind": "dashbook-scaffold",
        "reusePolicy": "reference-guidance",
        "importPath": "// Resolved via marketing_get_logo({ variant: \"wordmark\" })",
        "canonicalSource": "src/lib/chrome/logo-sources.ts (wordmarkSvg generator)",
        "handoffDirective": "This entry is composed guidance rather than an @dashfi/svelte export. Follow its canonical example and referenced Dashbook asset tools."
      }
    }
  ]
}