@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.1-develop.7204.1.83330e271e

package/dist/modules/design_system/gallery/entries/navigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/design_system/gallery/entries/navigation.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { CreditCard, LayoutGrid, Settings, ShoppingCart, Truck } from 'lucide-react'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from '@open-mercato/ui/primitives/segmented-control'\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@open-mercato/ui/primitives/accordion'\nimport type { GalleryEntry } from '../types'\n\n// Component titles and variant names are proper nouns from the codebase and\n// are deliberately not translated. `code` MUST contain the entry's importPath\n// (enforced by the registry-integrity test) and is always reviewed alongside\n// its sibling `render`.\n\n// Pagination is a controlled component \u2014 these small wrappers own the page\n// state so the preview stays interactive without polluting the entry shape.\n\nfunction PaginationBasicDemo() {\n  const [page, setPage] = React.useState(2)\n  const [pageSize, setPageSize] = React.useState(25)\n  return (\n    <Pagination\n      page={page}\n      pageSize={pageSize}\n      total={400}\n      onPageChange={setPage}\n      onPageSizeChange={setPageSize}\n    />\n  )\n}\n\nfunction PaginationCompactDemo() {\n  const [page, setPage] = React.useState(1)\n  return (\n    <Pagination\n      page={page}\n      pageSize={20}\n      total={120}\n      onPageChange={setPage}\n      showFirstLast={false}\n      showPageSize={false}\n    />\n  )\n}\n\nconst tabsEntry: GalleryEntry = {\n  id: 'tabs',\n  title: 'Tabs',\n  importPath: '@open-mercato/ui/primitives/tabs',\n  usage: {\n    do: [\n      'variant=\"underline\" is the canon for page-level tab strips; pill only for small embedded switchers.',\n      'TabsList always carries an aria-label; use count and leading to add context to triggers.',\n    ],\n    dont: ['No hand-rolled tab strips from buttons and border classes \u2014 lint flags raw tab lists.'],\n  },\n  docsAnchor: '#tabs',\n  figmaNodeId: '553:734',\n  variants: [\n    {\n      id: 'underline',\n      title: 'underline',\n      // Underline is the DS canon for page-level tab strips \u2014 flat rail\n      // with an accent underline, per-tab `leading` icon and `count` badge.\n      render: () => (\n        <Tabs defaultValue=\"orders\" variant=\"underline\" className=\"w-full\">\n          <TabsList aria-label=\"Customer sections\">\n            <TabsTrigger value=\"overview\" leading={<LayoutGrid className=\"size-4\" />}>\n              Overview\n            </TabsTrigger>\n            <TabsTrigger value=\"orders\" leading={<ShoppingCart className=\"size-4\" />} count={12}>\n              Orders\n            </TabsTrigger>\n            <TabsTrigger value=\"settings\" leading={<Settings className=\"size-4\" />}>\n              Settings\n            </TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"overview\">\n            <p className=\"text-sm text-muted-foreground\">Customer overview panel.</p>\n          </TabsContent>\n          <TabsContent value=\"orders\">\n            <p className=\"text-sm text-muted-foreground\">12 orders in the last 30 days.</p>\n          </TabsContent>\n          <TabsContent value=\"settings\">\n            <p className=\"text-sm text-muted-foreground\">Notification and access settings.</p>\n          </TabsContent>\n        </Tabs>\n      ),\n      code: `import { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\n<Tabs defaultValue=\"orders\" variant=\"underline\">\n  <TabsList aria-label=\"Customer sections\">\n    <TabsTrigger value=\"overview\" leading={<LayoutGrid className=\"size-4\" />}>Overview</TabsTrigger>\n    <TabsTrigger value=\"orders\" leading={<ShoppingCart className=\"size-4\" />} count={12}>Orders</TabsTrigger>\n    <TabsTrigger value=\"settings\" leading={<Settings className=\"size-4\" />}>Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"overview\">\u2026</TabsContent>\n  <TabsContent value=\"orders\">\u2026</TabsContent>\n  <TabsContent value=\"settings\">\u2026</TabsContent>\n</Tabs>`,\n    },\n    {\n      id: 'pill',\n      title: 'pill (default)',\n      render: () => (\n        <Tabs defaultValue=\"preview\">\n          <TabsList aria-label=\"Editor view\">\n            <TabsTrigger value=\"preview\">Preview</TabsTrigger>\n            <TabsTrigger value=\"code\">Code</TabsTrigger>\n            <TabsTrigger value=\"logs\">Logs</TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"preview\">\n            <p className=\"text-sm text-muted-foreground\">Rendered preview.</p>\n          </TabsContent>\n          <TabsContent value=\"code\">\n            <p className=\"text-sm text-muted-foreground\">Source code panel.</p>\n          </TabsContent>\n          <TabsContent value=\"logs\">\n            <p className=\"text-sm text-muted-foreground\">Runtime logs panel.</p>\n          </TabsContent>\n        </Tabs>\n      ),\n      code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\n<Tabs defaultValue=\"preview\">\n  <TabsList aria-label=\"Editor view\">\n    <TabsTrigger value=\"preview\">Preview</TabsTrigger>\n    <TabsTrigger value=\"code\">Code</TabsTrigger>\n    <TabsTrigger value=\"logs\">Logs</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"preview\">\u2026</TabsContent>\n  <TabsContent value=\"code\">\u2026</TabsContent>\n  <TabsContent value=\"logs\">\u2026</TabsContent>\n</Tabs>`,\n    },\n    {\n      id: 'pill-vertical',\n      title: 'pill, vertical',\n      render: () => (\n        <Tabs defaultValue=\"profile\" orientation=\"vertical\" className=\"w-full\">\n          <TabsList aria-label=\"Account settings\">\n            <TabsTrigger value=\"profile\">Profile</TabsTrigger>\n            <TabsTrigger value=\"billing\">Billing</TabsTrigger>\n            <TabsTrigger value=\"security\">Security</TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"profile\">\n            <p className=\"text-sm text-muted-foreground\">Profile settings panel.</p>\n          </TabsContent>\n          <TabsContent value=\"billing\">\n            <p className=\"text-sm text-muted-foreground\">Billing settings panel.</p>\n          </TabsContent>\n          <TabsContent value=\"security\">\n            <p className=\"text-sm text-muted-foreground\">Security settings panel.</p>\n          </TabsContent>\n        </Tabs>\n      ),\n      code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\n<Tabs defaultValue=\"profile\" orientation=\"vertical\">\n  <TabsList aria-label=\"Account settings\">\n    <TabsTrigger value=\"profile\">Profile</TabsTrigger>\n    <TabsTrigger value=\"billing\">Billing</TabsTrigger>\n    <TabsTrigger value=\"security\">Security</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"profile\">\u2026</TabsContent>\n  <TabsContent value=\"billing\">\u2026</TabsContent>\n  <TabsContent value=\"security\">\u2026</TabsContent>\n</Tabs>`,\n    },\n  ],\n}\n\nconst breadcrumbEntry: GalleryEntry = {\n  id: 'breadcrumb',\n  title: 'Breadcrumb',\n  importPath: '@open-mercato/ui/primitives/breadcrumb',\n  docsAnchor: '#breadcrumb',\n  variants: [\n    {\n      id: 'slash',\n      title: 'slash (default)',\n      render: () => (\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">Dashboard</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">Products</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Winter catalog</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      ),\n      code: `import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend\">Dashboard</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/products\">Products</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Winter catalog</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`,\n    },\n    {\n      id: 'arrow',\n      title: 'arrow divider',\n      render: () => (\n        <Breadcrumb divider=\"arrow\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">Orders</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">#20418</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Shipment</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      ),\n      code: `import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\n\n<Breadcrumb divider=\"arrow\">\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/orders\">Orders</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/orders/20418\">#20418</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Shipment</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`,\n    },\n    {\n      id: 'ellipsis',\n      title: 'collapsed (ellipsis)',\n      render: () => (\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">Dashboard</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbEllipsis />\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">Attributes</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Color</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      ),\n      code: `import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend\">Dashboard</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/products/attributes\">Attributes</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Color</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`,\n    },\n  ],\n}\n\nconst paginationEntry: GalleryEntry = {\n  id: 'pagination',\n  title: 'Pagination',\n  importPath: '@open-mercato/ui/primitives/pagination',\n  docsAnchor: '#pagination',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Basic',\n      render: () => <PaginationBasicDemo />,\n      code: `import * as React from 'react'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\n\nconst [page, setPage] = React.useState(2)\nconst [pageSize, setPageSize] = React.useState(25)\n\n<Pagination\n  page={page}\n  pageSize={pageSize}\n  total={400}\n  onPageChange={setPage}\n  onPageSizeChange={setPageSize}\n/>`,\n    },\n    {\n      id: 'compact',\n      title: 'Compact',\n      render: () => <PaginationCompactDemo />,\n      code: `import * as React from 'react'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\n\nconst [page, setPage] = React.useState(1)\n\n<Pagination\n  page={page}\n  pageSize={20}\n  total={120}\n  onPageChange={setPage}\n  showFirstLast={false}\n  showPageSize={false}\n/>`,\n    },\n  ],\n}\n\nconst segmentedControlEntry: GalleryEntry = {\n  id: 'segmented-control',\n  title: 'SegmentedControl',\n  importPath: '@open-mercato/ui/primitives/segmented-control',\n  docsAnchor: '#segmentedcontrol',\n  variants: [\n    {\n      id: 'default',\n      title: 'default',\n      render: () => (\n        <SegmentedControl defaultValue=\"all\" aria-label=\"View filter\">\n          <SegmentedControlItem value=\"all\">All</SegmentedControlItem>\n          <SegmentedControlItem value=\"active\">Active</SegmentedControlItem>\n          <SegmentedControlItem value=\"archived\">Archived</SegmentedControlItem>\n        </SegmentedControl>\n      ),\n      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\n<SegmentedControl defaultValue=\"all\" aria-label=\"View filter\">\n  <SegmentedControlItem value=\"all\">All</SegmentedControlItem>\n  <SegmentedControlItem value=\"active\">Active</SegmentedControlItem>\n  <SegmentedControlItem value=\"archived\">Archived</SegmentedControlItem>\n</SegmentedControl>`,\n    },\n    {\n      id: 'small',\n      title: 'Small',\n      render: () => (\n        <SegmentedControl size=\"sm\" defaultValue=\"30d\" aria-label=\"Chart period\">\n          <SegmentedControlItem value=\"7d\">7d</SegmentedControlItem>\n          <SegmentedControlItem value=\"30d\">30d</SegmentedControlItem>\n          <SegmentedControlItem value=\"90d\">90d</SegmentedControlItem>\n          <SegmentedControlItem value=\"1y\">1y</SegmentedControlItem>\n        </SegmentedControl>\n      ),\n      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\n<SegmentedControl size=\"sm\" defaultValue=\"30d\" aria-label=\"Chart period\">\n  <SegmentedControlItem value=\"7d\">7d</SegmentedControlItem>\n  <SegmentedControlItem value=\"30d\">30d</SegmentedControlItem>\n  <SegmentedControlItem value=\"90d\">90d</SegmentedControlItem>\n  <SegmentedControlItem value=\"1y\">1y</SegmentedControlItem>\n</SegmentedControl>`,\n    },\n    {\n      id: 'disabled',\n      title: 'Disabled',\n      render: () => (\n        <SegmentedControl defaultValue=\"list\" disabled aria-label=\"Layout\">\n          <SegmentedControlItem value=\"list\">List</SegmentedControlItem>\n          <SegmentedControlItem value=\"grid\">Grid</SegmentedControlItem>\n        </SegmentedControl>\n      ),\n      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\n<SegmentedControl defaultValue=\"list\" disabled aria-label=\"Layout\">\n  <SegmentedControlItem value=\"list\">List</SegmentedControlItem>\n  <SegmentedControlItem value=\"grid\">Grid</SegmentedControlItem>\n</SegmentedControl>`,\n    },\n  ],\n}\n\nconst accordionEntry: GalleryEntry = {\n  id: 'accordion',\n  title: 'Accordion',\n  importPath: '@open-mercato/ui/primitives/accordion',\n  docsAnchor: '#accordion',\n  variants: [\n    {\n      id: 'card',\n      title: 'card (default)',\n      render: () => (\n        <Accordion type=\"single\" collapsible defaultValue=\"shipping\" className=\"w-full space-y-2\">\n          <AccordionItem value=\"shipping\">\n            <AccordionTrigger>Shipping and delivery</AccordionTrigger>\n            <AccordionContent>\n              Orders placed before 2 PM ship the same business day from the nearest warehouse.\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"returns\">\n            <AccordionTrigger>Returns</AccordionTrigger>\n            <AccordionContent>\n              Items can be returned within 30 days of delivery in their original packaging.\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"payments\">\n            <AccordionTrigger>Payment methods</AccordionTrigger>\n            <AccordionContent>\n              We accept cards, bank transfer, and deferred payment for verified B2B accounts.\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      ),\n      code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'\n\n<Accordion type=\"single\" collapsible defaultValue=\"shipping\" className=\"w-full space-y-2\">\n  <AccordionItem value=\"shipping\">\n    <AccordionTrigger>Shipping and delivery</AccordionTrigger>\n    <AccordionContent>Orders placed before 2 PM ship the same business day.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"returns\">\n    <AccordionTrigger>Returns</AccordionTrigger>\n    <AccordionContent>Items can be returned within 30 days of delivery.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"payments\">\n    <AccordionTrigger>Payment methods</AccordionTrigger>\n    <AccordionContent>We accept cards, bank transfer, and deferred payment.</AccordionContent>\n  </AccordionItem>\n</Accordion>`,\n    },\n    {\n      id: 'left-icon',\n      title: 'With leftIcon',\n      render: () => (\n        <Accordion type=\"single\" collapsible className=\"w-full space-y-2\">\n          <AccordionItem value=\"shipping\">\n            <AccordionTrigger leftIcon={<Truck />}>How fast is shipping?</AccordionTrigger>\n            <AccordionContent>\n              Same-day dispatch on weekdays; delivery typically takes 1\u20133 business days.\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"billing\">\n            <AccordionTrigger leftIcon={<CreditCard />}>When am I charged?</AccordionTrigger>\n            <AccordionContent>\n              Your card is charged when the order ships, never at checkout.\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      ),\n      code: `import { CreditCard, Truck } from 'lucide-react'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'\n\n<Accordion type=\"single\" collapsible className=\"w-full space-y-2\">\n  <AccordionItem value=\"shipping\">\n    <AccordionTrigger leftIcon={<Truck />}>How fast is shipping?</AccordionTrigger>\n    <AccordionContent>Same-day dispatch on weekdays.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"billing\">\n    <AccordionTrigger leftIcon={<CreditCard />}>When am I charged?</AccordionTrigger>\n    <AccordionContent>Your card is charged when the order ships.</AccordionContent>\n  </AccordionItem>\n</Accordion>`,\n    },\n    {\n      id: 'chevron',\n      title: 'Chevron indicator',\n      render: () => (\n        <Accordion type=\"multiple\" className=\"w-full space-y-2\">\n          <AccordionItem value=\"general\">\n            <AccordionTrigger triggerIcon=\"chevron\">General</AccordionTrigger>\n            <AccordionContent>\n              Store name, contact details, and default locale for the storefront.\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"advanced\">\n            <AccordionTrigger triggerIcon=\"chevron\">Advanced</AccordionTrigger>\n            <AccordionContent>\n              Webhooks, API keys, and other developer-facing configuration.\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      ),\n      code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'\n\n<Accordion type=\"multiple\" className=\"w-full space-y-2\">\n  <AccordionItem value=\"general\">\n    <AccordionTrigger triggerIcon=\"chevron\">General</AccordionTrigger>\n    <AccordionContent>Store name, contact details, and default locale.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"advanced\">\n    <AccordionTrigger triggerIcon=\"chevron\">Advanced</AccordionTrigger>\n    <AccordionContent>Webhooks, API keys, and developer configuration.</AccordionContent>\n  </AccordionItem>\n</Accordion>`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  tabsEntry,\n  breadcrumbEntry,\n  paginationEntry,\n  segmentedControlEntry,\n  accordionEntry,\n]\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { CreditCard, LayoutGrid, Settings, ShoppingCart, Truck } from 'lucide-react'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\nimport { Pagination, type PaginationAppearance } from '@open-mercato/ui/primitives/pagination'\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from '@open-mercato/ui/primitives/segmented-control'\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@open-mercato/ui/primitives/accordion'\nimport { SidebarExample, SidebarFeatureExample, SidebarIdentityExample, SidebarItemsExample, TopbarExample, NavigationBrandsExample } from '../demos/shell'\nimport { shellExampleCode } from '../demos/shell-code.generated'\nimport { AiPromptExample, AiIconButtonExamples, AiNavigationExamples, AiSearchExamples, AiAuthExamples, AiSettingsExamples, AiNewChatExample, AiSidebarExample, AiMobileNavigationExample } from '../demos/ai-product'\nimport { aiProductExampleCode } from '../demos/ai-product-code.generated'\nimport type { GalleryEntry } from '../types'\n\n// Component titles and variant names are proper nouns from the codebase and\n// are deliberately not translated. `code` MUST contain the entry's importPath\n// (enforced by the registry-integrity test) and is always reviewed alongside\n// its sibling `render`.\n\n// Pagination is a controlled component \u2014 these small wrappers own the page\n// state so the preview stays interactive without polluting the entry shape.\n\nfunction PaginationBasicDemo({ appearance, disabled = false }: { appearance?: PaginationAppearance; disabled?: boolean }) {\n  const [page, setPage] = React.useState(2)\n  const [pageSize, setPageSize] = React.useState(25)\n  return (\n    <Pagination\n      appearance={appearance}\n      disabled={disabled}\n      page={page}\n      pageSize={pageSize}\n      total={400}\n      onPageChange={setPage}\n      onPageSizeChange={setPageSize}\n    />\n  )\n}\n\nfunction PaginationCompactDemo() {\n  const [page, setPage] = React.useState(1)\n  return (\n    <Pagination\n      page={page}\n      pageSize={20}\n      total={120}\n      onPageChange={setPage}\n      showFirstLast={false}\n      showPageSize={false}\n    />\n  )\n}\n\nfunction TabsQuantityDemo({ variant, orientation }: { variant: 'underline' | 'card' | 'list'; orientation: 'horizontal' | 'vertical' }) {\n  const t = useT()\n  const counts = orientation === 'vertical' ? [2, 3, 4, 5, 6, 7, 8] : [2, 3, 4, 5, 6]\n  return <div className={orientation === 'vertical' ? 'grid w-full gap-6 xl:grid-cols-2' : 'flex w-full flex-col gap-6'}>\n    {counts.map(count => <Tabs key={count} defaultValue=\"1\" variant={variant} orientation={orientation} className=\"min-w-0\">\n      <TabsList aria-label={t('design_system.gallery.examples.navigation2.sections', { count })} className={orientation === 'vertical' ? 'w-64 shrink-0' : 'flex w-full overflow-x-auto'}>\n        {orientation === 'vertical' && <span aria-hidden=\"true\" className=\"px-2 py-1 text-xs font-medium uppercase text-muted-foreground\">{t('design_system.gallery.examples.navigation2.selectMenu')}</span>}\n        {Array.from({ length: count }, (_, index) => <TabsTrigger key={index} value={String(index + 1)} leading={<LayoutGrid className=\"size-5\" />} count={index === 1 ? 12 : undefined}>\n          {t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}\n        </TabsTrigger>)}\n      </TabsList>\n      {Array.from({ length: count }, (_, index) => <TabsContent key={index} value={String(index + 1)} className=\"text-sm text-muted-foreground\">\n        {t('design_system.gallery.examples.navigation2.panel', { number: index + 1 })}\n      </TabsContent>)}\n    </Tabs>)}\n  </div>\n}\n\nfunction TabsKeyboardDemo() {\n  const t = useT()\n  return <Tabs defaultValue=\"overview\" variant=\"underline\" className=\"w-full\">\n    <TabsList aria-label={t('design_system.gallery.examples.navigation2.keyboard')}>\n      <TabsTrigger value=\"overview\" leading={<LayoutGrid className=\"size-5\" />}>{t('design_system.gallery.examples.navigation2.overview')}</TabsTrigger>\n      <TabsTrigger value=\"locked\" disabled count={4}>{t('design_system.gallery.examples.navigation2.locked')}</TabsTrigger>\n      <TabsTrigger value=\"settings\" leading={<Settings className=\"size-5\" />}>{t('design_system.gallery.examples.navigation2.settings')}</TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"overview\">{t('design_system.gallery.examples.navigation2.keyboardHint')}</TabsContent>\n    <TabsContent value=\"settings\">{t('design_system.gallery.examples.navigation2.settingsPanel')}</TabsContent>\n  </Tabs>\n}\n\nfunction BreadcrumbQuantityDemo() {\n  const t = useT()\n  const targetId = React.useId()\n  return <div className=\"flex w-full flex-col gap-4\">\n    {(['arrow', 'slash', 'dot'] as const).map(divider => <div key={divider} className=\"flex flex-col gap-4\">\n      {[3, 4, 5].map(count => <Breadcrumb key={count} divider={divider} aria-label={t('design_system.gallery.examples.navigation2.path', { count })}>\n        <BreadcrumbList className=\"flex-wrap\">\n          {Array.from({ length: count }, (_, index) => <React.Fragment key={index}>\n            {index > 0 && <BreadcrumbSeparator className=\"size-5 justify-center\">{divider === 'dot' ? '\u2022' : undefined}</BreadcrumbSeparator>}\n            <BreadcrumbItem>\n              {index === count - 1\n                ? <BreadcrumbPage>{t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}</BreadcrumbPage>\n                : <BreadcrumbLink href={`#${targetId}`}><LayoutGrid className=\"size-5\" aria-hidden=\"true\" />{t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}</BreadcrumbLink>}\n            </BreadcrumbItem>\n          </React.Fragment>)}\n        </BreadcrumbList>\n      </Breadcrumb>)}\n    </div>)}\n    <p id={targetId} tabIndex={-1} className=\"text-sm text-muted-foreground\">{t('design_system.gallery.examples.navigation2.localDestination')}</p>\n  </div>\n}\n\nfunction AccordionStartDemo() {\n  const t = useT()\n  return <Accordion type=\"single\" collapsible defaultValue=\"details\" className=\"w-full max-w-md space-y-2\">\n    <AccordionItem value=\"overview\">\n      <AccordionTrigger iconPosition=\"start\">{t('design_system.gallery.examples.navigation2.overview')}</AccordionTrigger>\n      <AccordionContent>{t('design_system.gallery.examples.navigation2.accordionBody')}</AccordionContent>\n    </AccordionItem>\n    <AccordionItem value=\"details\">\n      <AccordionTrigger iconPosition=\"start\">{t('design_system.gallery.examples.navigation2.settings')}</AccordionTrigger>\n      <AccordionContent>{t('design_system.gallery.examples.navigation2.accordionBody')}</AccordionContent>\n    </AccordionItem>\n    <AccordionItem value=\"locked\" disabled>\n      <AccordionTrigger iconPosition=\"start\">{t('design_system.gallery.examples.navigation2.locked')}</AccordionTrigger>\n      <AccordionContent>{t('design_system.gallery.examples.navigation2.accordionBody')}</AccordionContent>\n    </AccordionItem>\n  </Accordion>\n}\n\nfunction SegmentedSourceDemo({ content }: { content: 'text' | 'leading' | 'icon' }) {\n  const t = useT()\n  const labelId = React.useId()\n  const [value, setValue] = React.useState('overview')\n  const options = [\n    { value: 'overview', label: t('design_system.gallery.examples.navigation2.overview'), icon: <LayoutGrid className=\"size-5\" aria-hidden=\"true\" /> },\n    { value: 'settings', label: t('design_system.gallery.examples.navigation2.settings'), icon: <Settings className=\"size-5\" aria-hidden=\"true\" /> },\n    { value: 'orders', label: t('design_system.gallery.examples.navigation2.orders'), icon: <ShoppingCart className=\"size-5\" aria-hidden=\"true\" /> },\n  ]\n  return <div className=\"flex w-full max-w-sm flex-col gap-6\">\n    {[false, true].map(disabled => <div key={String(disabled)} className=\"flex flex-col gap-1.5\">\n      <Label id={`${labelId}-${disabled}`} className=\"leading-5\">{disabled ? t('design_system.gallery.examples.navigation2.locked') : t('design_system.gallery.examples.navigation2.selectMenu')}</Label>\n      <SegmentedControl value={value} onValueChange={setValue} disabled={disabled} aria-labelledby={`${labelId}-${disabled}`} className=\"h-9 w-full gap-1 rounded-lg border-0 p-1\">\n        {options.map(option => <SegmentedControlItem key={option.value} value={option.value} aria-label={content === 'icon' ? option.label : undefined} className=\"h-7 min-w-0 flex-1 gap-1.5 rounded-md p-1\">\n          {content !== 'text' && option.icon}\n          {content !== 'icon' && option.label}\n        </SegmentedControlItem>)}\n      </SegmentedControl>\n    </div>)}\n  </div>\n}\n\nconst tabsEntry: GalleryEntry = {\n  id: 'tabs',\n  title: 'Tabs',\n  importPath: '@open-mercato/ui/primitives/tabs',\n  usage: {\n    do: [\n      'variant=\"underline\" is the canon for page-level tab strips; pill only for small embedded switchers.',\n      'TabsList always carries an aria-label; use count and leading to add context to triggers.',\n    ],\n    dont: ['No hand-rolled tab strips from buttons and border classes \u2014 lint flags raw tab lists.'],\n  },\n  docsAnchor: '#tabs',\n  figmaNodeId: '553:734',\n  variants: [\n    {\n      id: 'underline',\n      title: 'underline',\n      // Underline is the DS canon for page-level tab strips \u2014 flat rail\n      // with an accent underline, per-tab `leading` icon and `count` badge.\n      render: () => <TabsNavigationUnderlineSample />,\n      code: `import { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\n<Tabs defaultValue=\"orders\" variant=\"underline\">\n  <TabsList aria-label=\"Customer sections\">\n    <TabsTrigger value=\"overview\" leading={<LayoutGrid className=\"size-4\" />}>Overview</TabsTrigger>\n    <TabsTrigger value=\"orders\" leading={<ShoppingCart className=\"size-4\" />} count={12}>Orders</TabsTrigger>\n    <TabsTrigger value=\"settings\" leading={<Settings className=\"size-4\" />}>Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"overview\">\u2026</TabsContent>\n  <TabsContent value=\"orders\">\u2026</TabsContent>\n  <TabsContent value=\"settings\">\u2026</TabsContent>\n</Tabs>`,\n    },\n    {\n      id: 'pill',\n      title: 'pill (default)',\n      render: () => <TabsNavigationPillSample />,\n      code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\n<Tabs defaultValue=\"preview\">\n  <TabsList aria-label=\"Editor view\">\n    <TabsTrigger value=\"preview\">Preview</TabsTrigger>\n    <TabsTrigger value=\"code\">Code</TabsTrigger>\n    <TabsTrigger value=\"logs\">Logs</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"preview\">\u2026</TabsContent>\n  <TabsContent value=\"code\">\u2026</TabsContent>\n  <TabsContent value=\"logs\">\u2026</TabsContent>\n</Tabs>`,\n    },\n    {\n      id: 'pill-vertical',\n      title: 'pill, vertical',\n      render: () => <TabsNavigationPillVerticalSample />,\n      code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\n<Tabs defaultValue=\"profile\" orientation=\"vertical\">\n  <TabsList aria-label=\"Account settings\">\n    <TabsTrigger value=\"profile\">Profile</TabsTrigger>\n    <TabsTrigger value=\"billing\">Billing</TabsTrigger>\n    <TabsTrigger value=\"security\">Security</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"profile\">\u2026</TabsContent>\n  <TabsContent value=\"billing\">\u2026</TabsContent>\n  <TabsContent value=\"security\">\u2026</TabsContent>\n</Tabs>`,\n    },\n    {\n      id: 'underline-quantities',\n      title: 'underline \u00B7 all source counts',\n      render: () => <TabsQuantityDemo variant=\"underline\" orientation=\"horizontal\" />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LayoutGrid, Settings } from 'lucide-react'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@open-mercato/ui/primitives/tabs'\n\nfunction TabsQuantityDemo({ variant, orientation }: { variant: 'underline' | 'card' | 'list'; orientation: 'horizontal' | 'vertical' }) {\n  const t = useT()\n  const counts = orientation === 'vertical' ? [2, 3, 4, 5, 6, 7, 8] : [2, 3, 4, 5, 6]\n  return <div className={orientation === 'vertical' ? 'grid w-full gap-6 xl:grid-cols-2' : 'flex w-full flex-col gap-6'}>\n    {counts.map(count => <Tabs key={count} defaultValue=\"1\" variant={variant} orientation={orientation} className=\"min-w-0\">\n      <TabsList aria-label={t('design_system.gallery.examples.navigation2.sections', { count })} className={orientation === 'vertical' ? 'w-64 shrink-0' : 'flex w-full overflow-x-auto'}>\n        {orientation === 'vertical' && <span aria-hidden=\"true\" className=\"px-2 py-1 text-xs font-medium uppercase text-muted-foreground\">{t('design_system.gallery.examples.navigation2.selectMenu')}</span>}\n        {Array.from({ length: count }, (_, index) => <TabsTrigger key={index} value={String(index + 1)} leading={<LayoutGrid className=\"size-5\" />} count={index === 1 ? 12 : undefined}>\n          {t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}\n        </TabsTrigger>)}\n      </TabsList>\n      {Array.from({ length: count }, (_, index) => <TabsContent key={index} value={String(index + 1)} className=\"text-sm text-muted-foreground\">\n        {t('design_system.gallery.examples.navigation2.panel', { number: index + 1 })}\n      </TabsContent>)}\n    </Tabs>)}\n  </div>\n}\n\n<TabsQuantityDemo variant=\"underline\" orientation=\"horizontal\" />`,\n    },\n    {\n      id: 'card-quantities',\n      title: 'card \u00B7 all source counts',\n      render: () => <TabsQuantityDemo variant=\"card\" orientation=\"vertical\" />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LayoutGrid, Settings } from 'lucide-react'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@open-mercato/ui/primitives/tabs'\n\nfunction TabsQuantityDemo({ variant, orientation }: { variant: 'underline' | 'card' | 'list'; orientation: 'horizontal' | 'vertical' }) {\n  const t = useT()\n  const counts = orientation === 'vertical' ? [2, 3, 4, 5, 6, 7, 8] : [2, 3, 4, 5, 6]\n  return <div className={orientation === 'vertical' ? 'grid w-full gap-6 xl:grid-cols-2' : 'flex w-full flex-col gap-6'}>\n    {counts.map(count => <Tabs key={count} defaultValue=\"1\" variant={variant} orientation={orientation} className=\"min-w-0\">\n      <TabsList aria-label={t('design_system.gallery.examples.navigation2.sections', { count })} className={orientation === 'vertical' ? 'w-64 shrink-0' : 'flex w-full overflow-x-auto'}>\n        {orientation === 'vertical' && <span aria-hidden=\"true\" className=\"px-2 py-1 text-xs font-medium uppercase text-muted-foreground\">{t('design_system.gallery.examples.navigation2.selectMenu')}</span>}\n        {Array.from({ length: count }, (_, index) => <TabsTrigger key={index} value={String(index + 1)} leading={<LayoutGrid className=\"size-5\" />} count={index === 1 ? 12 : undefined}>\n          {t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}\n        </TabsTrigger>)}\n      </TabsList>\n      {Array.from({ length: count }, (_, index) => <TabsContent key={index} value={String(index + 1)} className=\"text-sm text-muted-foreground\">\n        {t('design_system.gallery.examples.navigation2.panel', { number: index + 1 })}\n      </TabsContent>)}\n    </Tabs>)}\n  </div>\n}\n\n<TabsQuantityDemo variant=\"card\" orientation=\"vertical\" />`,\n    },\n    {\n      id: 'list-quantities',\n      title: 'list \u00B7 all source counts',\n      render: () => <TabsQuantityDemo variant=\"list\" orientation=\"vertical\" />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LayoutGrid, Settings } from 'lucide-react'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@open-mercato/ui/primitives/tabs'\n\nfunction TabsQuantityDemo({ variant, orientation }: { variant: 'underline' | 'card' | 'list'; orientation: 'horizontal' | 'vertical' }) {\n  const t = useT()\n  const counts = orientation === 'vertical' ? [2, 3, 4, 5, 6, 7, 8] : [2, 3, 4, 5, 6]\n  return <div className={orientation === 'vertical' ? 'grid w-full gap-6 xl:grid-cols-2' : 'flex w-full flex-col gap-6'}>\n    {counts.map(count => <Tabs key={count} defaultValue=\"1\" variant={variant} orientation={orientation} className=\"min-w-0\">\n      <TabsList aria-label={t('design_system.gallery.examples.navigation2.sections', { count })} className={orientation === 'vertical' ? 'w-64 shrink-0' : 'flex w-full overflow-x-auto'}>\n        {orientation === 'vertical' && <span aria-hidden=\"true\" className=\"px-2 py-1 text-xs font-medium uppercase text-muted-foreground\">{t('design_system.gallery.examples.navigation2.selectMenu')}</span>}\n        {Array.from({ length: count }, (_, index) => <TabsTrigger key={index} value={String(index + 1)} leading={<LayoutGrid className=\"size-5\" />} count={index === 1 ? 12 : undefined}>\n          {t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}\n        </TabsTrigger>)}\n      </TabsList>\n      {Array.from({ length: count }, (_, index) => <TabsContent key={index} value={String(index + 1)} className=\"text-sm text-muted-foreground\">\n        {t('design_system.gallery.examples.navigation2.panel', { number: index + 1 })}\n      </TabsContent>)}\n    </Tabs>)}\n  </div>\n}\n\n<TabsQuantityDemo variant=\"list\" orientation=\"vertical\" />`,\n    },\n    {\n      id: 'keyboard-states',\n      title: 'Keyboard and disabled tabs',\n      render: () => <TabsKeyboardDemo />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LayoutGrid, Settings } from 'lucide-react'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@open-mercato/ui/primitives/tabs'\n\nfunction TabsKeyboardDemo() {\n  const t = useT()\n  return <Tabs defaultValue=\"overview\" variant=\"underline\" className=\"w-full\">\n    <TabsList aria-label={t('design_system.gallery.examples.navigation2.keyboard')}>\n      <TabsTrigger value=\"overview\" leading={<LayoutGrid className=\"size-5\" />}>{t('design_system.gallery.examples.navigation2.overview')}</TabsTrigger>\n      <TabsTrigger value=\"locked\" disabled count={4}>{t('design_system.gallery.examples.navigation2.locked')}</TabsTrigger>\n      <TabsTrigger value=\"settings\" leading={<Settings className=\"size-5\" />}>{t('design_system.gallery.examples.navigation2.settings')}</TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"overview\">{t('design_system.gallery.examples.navigation2.keyboardHint')}</TabsContent>\n    <TabsContent value=\"settings\">{t('design_system.gallery.examples.navigation2.settingsPanel')}</TabsContent>\n  </Tabs>\n}\n\n<TabsKeyboardDemo />`,\n    },\n  ],\n}\n\nconst breadcrumbEntry: GalleryEntry = {\n  id: 'breadcrumb',\n  figmaNodeId: '447:8832',\n  title: 'Breadcrumb',\n  importPath: '@open-mercato/ui/primitives/breadcrumb',\n  docsAnchor: '#breadcrumb',\n  variants: [\n    {\n      id: 'slash',\n      title: 'slash (default)',\n      render: () => <BreadcrumbNavigationSlashSample />,\n      code: `import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend\">Dashboard</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/products\">Products</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Winter catalog</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`,\n    },\n    {\n      id: 'arrow',\n      title: 'arrow divider',\n      render: () => <BreadcrumbNavigationArrowSample />,\n      code: `import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\n\n<Breadcrumb divider=\"arrow\">\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/orders\">Orders</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/orders/20418\">#20418</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Shipment</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`,\n    },\n    {\n      id: 'ellipsis',\n      title: 'collapsed (ellipsis)',\n      render: () => <BreadcrumbNavigationEllipsisSample />,\n      code: `import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend\">Dashboard</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/products/attributes\">Attributes</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Color</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`,\n    },\n    {\n      id: 'dividers-quantities',\n      title: 'Arrow / Slash / Dot \u00B73,4,5items',\n      render: () => <BreadcrumbQuantityDemo />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LayoutGrid } from 'lucide-react'\nimport { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbLink, BreadcrumbPage } from '@open-mercato/ui/primitives/breadcrumb'\n\nfunction BreadcrumbQuantityDemo() {\n  const t = useT()\n  const targetId = React.useId()\n  return <div className=\"flex w-full flex-col gap-4\">\n    {(['arrow', 'slash', 'dot'] as const).map(divider => <div key={divider} className=\"flex flex-col gap-4\">\n      {[3, 4, 5].map(count => <Breadcrumb key={count} divider={divider} aria-label={t('design_system.gallery.examples.navigation2.path', { count })}>\n        <BreadcrumbList className=\"flex-wrap\">\n          {Array.from({ length: count }, (_, index) => <React.Fragment key={index}>\n            {index > 0 && <BreadcrumbSeparator className=\"size-5 justify-center\">{divider === 'dot' ? '\u2022' : undefined}</BreadcrumbSeparator>}\n            <BreadcrumbItem>\n              {index === count - 1\n                ? <BreadcrumbPage>{t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}</BreadcrumbPage>\n                : <BreadcrumbLink href={\\`#\\${targetId}\\`}><LayoutGrid className=\"size-5\" aria-hidden=\"true\" />{t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}</BreadcrumbLink>}\n            </BreadcrumbItem>\n          </React.Fragment>)}\n        </BreadcrumbList>\n      </Breadcrumb>)}\n    </div>)}\n    <p id={targetId} tabIndex={-1} className=\"text-sm text-muted-foreground\">{t('design_system.gallery.examples.navigation2.localDestination')}</p>\n  </div>\n}\n\n<BreadcrumbQuantityDemo />`,\n    },\n  ],\n}\n\nconst paginationEntry: GalleryEntry = {\n  id: 'pagination',\n  title: 'Pagination',\n  importPath: '@open-mercato/ui/primitives/pagination',\n  docsAnchor: '#pagination',\n  figmaNodeId: '513:3892',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Basic',\n      render: () => <PaginationBasicDemo />,\n      code: `import * as React from 'react'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\n\nconst [page, setPage] = React.useState(2)\nconst [pageSize, setPageSize] = React.useState(25)\n\n<Pagination\n  page={page}\n  pageSize={pageSize}\n  total={400}\n  onPageChange={setPage}\n  onPageSizeChange={setPageSize}\n/>`,\n    },\n    {\n      id: 'compact',\n      title: 'Compact',\n      render: () => <PaginationCompactDemo />,\n      code: `import * as React from 'react'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\n\nconst [page, setPage] = React.useState(1)\n\n<Pagination\n  page={page}\n  pageSize={20}\n  total={120}\n  onPageChange={setPage}\n  showFirstLast={false}\n  showPageSize={false}\n/>`,\n    },\n    {\n      id: 'source-basic',\n      title: 'Basic cells',\n      render: () => <PaginationBasicDemo appearance=\"basic\" />,\n      code: `import * as React from 'react'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\n\nconst [page, setPage] = React.useState(2)\nconst [pageSize, setPageSize] = React.useState(25)\n\n<Pagination\n  appearance=\"basic\"\n  page={page}\n  pageSize={pageSize}\n  total={400}\n  onPageChange={setPage}\n  onPageSizeChange={setPageSize}\n/>`,\n    },\n    {\n      id: 'circle',\n      title: 'Full radius',\n      render: () => <PaginationBasicDemo appearance=\"circle\" />,\n      code: `import * as React from 'react'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\n\nconst [page, setPage] = React.useState(2)\nconst [pageSize, setPageSize] = React.useState(25)\n\n<Pagination\n  appearance=\"circle\"\n  page={page}\n  pageSize={pageSize}\n  total={400}\n  onPageChange={setPage}\n  onPageSizeChange={setPageSize}\n/>`,\n    },\n    {\n      id: 'group',\n      title: 'Connected group',\n      render: () => <PaginationBasicDemo appearance=\"group\" />,\n      code: `import * as React from 'react'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\n\nconst [page, setPage] = React.useState(2)\nconst [pageSize, setPageSize] = React.useState(25)\n\n<Pagination\n  appearance=\"group\"\n  page={page}\n  pageSize={pageSize}\n  total={400}\n  onPageChange={setPage}\n  onPageSizeChange={setPageSize}\n/>`,\n    },\n    {\n      id: 'disabled',\n      title: 'Disabled states',\n      render: () => <PaginationBasicDemo appearance=\"circle\" disabled />,\n      code: `import * as React from 'react'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\n\nconst [page, setPage] = React.useState(2)\nconst [pageSize, setPageSize] = React.useState(25)\n\n<Pagination\n  appearance=\"circle\"\n  page={page}\n  pageSize={pageSize}\n  total={400}\n  onPageChange={setPage}\n  onPageSizeChange={setPageSize}\n  disabled\n/>`,\n    },\n  ],\n}\n\nconst segmentedControlEntry: GalleryEntry = {\n  id: 'segmented-control',\n  figmaNodeId: '2604:114',\n  title: 'SegmentedControl',\n  importPath: '@open-mercato/ui/primitives/segmented-control',\n  docsAnchor: '#segmentedcontrol',\n  variants: [\n    {\n      id: 'default',\n      title: 'default',\n      render: () => <SegmentedControlNavigationDefaultSample />,\n      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\n<SegmentedControl defaultValue=\"all\" aria-label=\"View filter\">\n  <SegmentedControlItem value=\"all\">All</SegmentedControlItem>\n  <SegmentedControlItem value=\"active\">Active</SegmentedControlItem>\n  <SegmentedControlItem value=\"archived\">Archived</SegmentedControlItem>\n</SegmentedControl>`,\n    },\n    {\n      id: 'small',\n      title: 'Small',\n      render: () => <SegmentedControlNavigationSmallSample />,\n      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\n<SegmentedControl size=\"sm\" defaultValue=\"30d\" aria-label=\"Chart period\">\n  <SegmentedControlItem value=\"7d\">7d</SegmentedControlItem>\n  <SegmentedControlItem value=\"30d\">30d</SegmentedControlItem>\n  <SegmentedControlItem value=\"90d\">90d</SegmentedControlItem>\n  <SegmentedControlItem value=\"1y\">1y</SegmentedControlItem>\n</SegmentedControl>`,\n    },\n    {\n      id: 'disabled',\n      title: 'Disabled',\n      render: () => <SegmentedControlNavigationDisabledSample />,\n      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\n<SegmentedControl defaultValue=\"list\" disabled aria-label=\"Layout\">\n  <SegmentedControlItem value=\"list\">List</SegmentedControlItem>\n  <SegmentedControlItem value=\"grid\">Grid</SegmentedControlItem>\n</SegmentedControl>`,\n    },\n    {\n      id: 'source-text',\n      title: 'Label shell \u00B7 text',\n      render: () => <SegmentedSourceDemo content=\"text\" />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\nfunction SegmentedSourceDemo({ content }: { content: 'text' | 'leading' | 'icon' }) {\n  const t = useT()\n  const labelId = React.useId()\n  const [value, setValue] = React.useState('overview')\n  const options = [\n    { value: 'overview', label: t('design_system.gallery.examples.navigation2.overview'), icon: <LayoutGrid className=\"size-5\" aria-hidden=\"true\" /> },\n    { value: 'settings', label: t('design_system.gallery.examples.navigation2.settings'), icon: <Settings className=\"size-5\" aria-hidden=\"true\" /> },\n    { value: 'orders', label: t('design_system.gallery.examples.navigation2.orders'), icon: <ShoppingCart className=\"size-5\" aria-hidden=\"true\" /> },\n  ]\n  return <div className=\"flex w-full max-w-sm flex-col gap-6\">\n    {[false, true].map(disabled => <div key={String(disabled)} className=\"flex flex-col gap-1.5\">\n      <Label id={\\`\\${labelId}-\\${disabled}\\`} className=\"leading-5\">{disabled ? t('design_system.gallery.examples.navigation2.locked') : t('design_system.gallery.examples.navigation2.selectMenu')}</Label>\n      <SegmentedControl value={value} onValueChange={setValue} disabled={disabled} aria-labelledby={\\`\\${labelId}-\\${disabled}\\`} className=\"h-9 w-full gap-1 rounded-lg border-0 p-1\">\n        {options.map(option => <SegmentedControlItem key={option.value} value={option.value} aria-label={content === 'icon' ? option.label : undefined} className=\"h-7 min-w-0 flex-1 gap-1.5 rounded-md p-1\">\n          {content !== 'text' && option.icon}\n          {content !== 'icon' && option.label}\n        </SegmentedControlItem>)}\n      </SegmentedControl>\n    </div>)}\n  </div>\n}\n\n<SegmentedSourceDemo content=\"text\" />`,\n    },\n    {\n      id: 'source-leading',\n      title: 'Label shell \u00B7 leading',\n      render: () => <SegmentedSourceDemo content=\"leading\" />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\nfunction SegmentedSourceDemo({ content }: { content: 'text' | 'leading' | 'icon' }) {\n  const t = useT()\n  const labelId = React.useId()\n  const [value, setValue] = React.useState('overview')\n  const options = [\n    { value: 'overview', label: t('design_system.gallery.examples.navigation2.overview'), icon: <LayoutGrid className=\"size-5\" aria-hidden=\"true\" /> },\n    { value: 'settings', label: t('design_system.gallery.examples.navigation2.settings'), icon: <Settings className=\"size-5\" aria-hidden=\"true\" /> },\n    { value: 'orders', label: t('design_system.gallery.examples.navigation2.orders'), icon: <ShoppingCart className=\"size-5\" aria-hidden=\"true\" /> },\n  ]\n  return <div className=\"flex w-full max-w-sm flex-col gap-6\">\n    {[false, true].map(disabled => <div key={String(disabled)} className=\"flex flex-col gap-1.5\">\n      <Label id={\\`\\${labelId}-\\${disabled}\\`} className=\"leading-5\">{disabled ? t('design_system.gallery.examples.navigation2.locked') : t('design_system.gallery.examples.navigation2.selectMenu')}</Label>\n      <SegmentedControl value={value} onValueChange={setValue} disabled={disabled} aria-labelledby={\\`\\${labelId}-\\${disabled}\\`} className=\"h-9 w-full gap-1 rounded-lg border-0 p-1\">\n        {options.map(option => <SegmentedControlItem key={option.value} value={option.value} aria-label={content === 'icon' ? option.label : undefined} className=\"h-7 min-w-0 flex-1 gap-1.5 rounded-md p-1\">\n          {content !== 'text' && option.icon}\n          {content !== 'icon' && option.label}\n        </SegmentedControlItem>)}\n      </SegmentedControl>\n    </div>)}\n  </div>\n}\n\n<SegmentedSourceDemo content=\"leading\" />`,\n    },\n    {\n      id: 'source-icon',\n      title: 'Label shell \u00B7 icon',\n      render: () => <SegmentedSourceDemo content=\"icon\" />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\nfunction SegmentedSourceDemo({ content }: { content: 'text' | 'leading' | 'icon' }) {\n  const t = useT()\n  const labelId = React.useId()\n  const [value, setValue] = React.useState('overview')\n  const options = [\n    { value: 'overview', label: t('design_system.gallery.examples.navigation2.overview'), icon: <LayoutGrid className=\"size-5\" aria-hidden=\"true\" /> },\n    { value: 'settings', label: t('design_system.gallery.examples.navigation2.settings'), icon: <Settings className=\"size-5\" aria-hidden=\"true\" /> },\n    { value: 'orders', label: t('design_system.gallery.examples.navigation2.orders'), icon: <ShoppingCart className=\"size-5\" aria-hidden=\"true\" /> },\n  ]\n  return <div className=\"flex w-full max-w-sm flex-col gap-6\">\n    {[false, true].map(disabled => <div key={String(disabled)} className=\"flex flex-col gap-1.5\">\n      <Label id={\\`\\${labelId}-\\${disabled}\\`} className=\"leading-5\">{disabled ? t('design_system.gallery.examples.navigation2.locked') : t('design_system.gallery.examples.navigation2.selectMenu')}</Label>\n      <SegmentedControl value={value} onValueChange={setValue} disabled={disabled} aria-labelledby={\\`\\${labelId}-\\${disabled}\\`} className=\"h-9 w-full gap-1 rounded-lg border-0 p-1\">\n        {options.map(option => <SegmentedControlItem key={option.value} value={option.value} aria-label={content === 'icon' ? option.label : undefined} className=\"h-7 min-w-0 flex-1 gap-1.5 rounded-md p-1\">\n          {content !== 'text' && option.icon}\n          {content !== 'icon' && option.label}\n        </SegmentedControlItem>)}\n      </SegmentedControl>\n    </div>)}\n  </div>\n}\n\n<SegmentedSourceDemo content=\"icon\" />`,\n    },\n  ],\n}\n\nconst accordionEntry: GalleryEntry = {\n  id: 'accordion',\n  figmaNodeId: '210:4022',\n  title: 'Accordion',\n  importPath: '@open-mercato/ui/primitives/accordion',\n  docsAnchor: '#accordion',\n  variants: [\n    {\n      id: 'card',\n      title: 'card (default)',\n      render: () => <AccordionNavigationCardSample />,\n      code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'\n\n<Accordion type=\"single\" collapsible defaultValue=\"shipping\" className=\"w-full space-y-2\">\n  <AccordionItem value=\"shipping\">\n    <AccordionTrigger>Shipping and delivery</AccordionTrigger>\n    <AccordionContent>Orders placed before 2 PM ship the same business day.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"returns\">\n    <AccordionTrigger>Returns</AccordionTrigger>\n    <AccordionContent>Items can be returned within 30 days of delivery.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"payments\">\n    <AccordionTrigger>Payment methods</AccordionTrigger>\n    <AccordionContent>We accept cards, bank transfer, and deferred payment.</AccordionContent>\n  </AccordionItem>\n</Accordion>`,\n    },\n    {\n      id: 'left-icon',\n      title: 'With leftIcon',\n      render: () => <AccordionNavigationLeftIconSample />,\n      code: `import { CreditCard, Truck } from 'lucide-react'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'\n\n<Accordion type=\"single\" collapsible className=\"w-full space-y-2\">\n  <AccordionItem value=\"shipping\">\n    <AccordionTrigger leftIcon={<Truck />}>How fast is shipping?</AccordionTrigger>\n    <AccordionContent>Same-day dispatch on weekdays.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"billing\">\n    <AccordionTrigger leftIcon={<CreditCard />}>When am I charged?</AccordionTrigger>\n    <AccordionContent>Your card is charged when the order ships.</AccordionContent>\n  </AccordionItem>\n</Accordion>`,\n    },\n    {\n      id: 'chevron',\n      title: 'Chevron indicator',\n      render: () => <AccordionNavigationChevronSample />,\n      code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'\n\n<Accordion type=\"multiple\" className=\"w-full space-y-2\">\n  <AccordionItem value=\"general\">\n    <AccordionTrigger triggerIcon=\"chevron\">General</AccordionTrigger>\n    <AccordionContent>Store name, contact details, and default locale.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"advanced\">\n    <AccordionTrigger triggerIcon=\"chevron\">Advanced</AccordionTrigger>\n    <AccordionContent>Webhooks, API keys, and developer configuration.</AccordionContent>\n  </AccordionItem>\n</Accordion>`,\n    },\n    {\n      id: 'indicator-start',\n      title: 'Indicator at start \u00B7 closed/open/disabled',\n      render: () => <AccordionStartDemo />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@open-mercato/ui/primitives/accordion'\n\nfunction AccordionStartDemo() {\n  const t = useT()\n  return <Accordion type=\"single\" collapsible defaultValue=\"details\" className=\"w-full max-w-md space-y-2\">\n    <AccordionItem value=\"overview\">\n      <AccordionTrigger iconPosition=\"start\">{t('design_system.gallery.examples.navigation2.overview')}</AccordionTrigger>\n      <AccordionContent>{t('design_system.gallery.examples.navigation2.accordionBody')}</AccordionContent>\n    </AccordionItem>\n    <AccordionItem value=\"details\">\n      <AccordionTrigger iconPosition=\"start\">{t('design_system.gallery.examples.navigation2.settings')}</AccordionTrigger>\n      <AccordionContent>{t('design_system.gallery.examples.navigation2.accordionBody')}</AccordionContent>\n    </AccordionItem>\n    <AccordionItem value=\"locked\" disabled>\n      <AccordionTrigger iconPosition=\"start\">{t('design_system.gallery.examples.navigation2.locked')}</AccordionTrigger>\n      <AccordionContent>{t('design_system.gallery.examples.navigation2.accordionBody')}</AccordionContent>\n    </AccordionItem>\n  </Accordion>\n}\n\n<AccordionStartDemo />`,\n    },\n  ],\n}\n\nconst sidebarEntry: GalleryEntry = {\n  id: 'sidebar',\n  title: 'Sidebar and Topbar',\n  figmaNodeId: '3802:11759',\n  importPath: '@open-mercato/ui/primitives/sidebar',\n  usage: { do: ['Presentational composition with local state; the application AppShell still owns tenant APIs and injection points.', 'Hover, current navigation, workspace switching, filtering and feature-card actions use real controls.', 'Feature-card primary and neutral surfaces use the existing accessible application palettes; they do not claim exact Figma color parity.'] },\n  variants: [\n    { id: 'items', title: 'Sidebar items / expanded and collapsed', render: () => <SidebarItemsExample />, code: shellExampleCode('<SidebarItemsExample />') },\n    { id: 'identity-cards', title: 'Header and profile cards / expanded and collapsed', render: () => <SidebarIdentityExample />, code: shellExampleCode('<SidebarIdentityExample />') },\n    { id: 'feature-meeting', title: 'Feature card / meeting / 4 styles', render: () => <SidebarFeatureExample type=\"meeting\" />, code: shellExampleCode('<SidebarFeatureExample type=\"meeting\" />') },\n    { id: 'feature-progress', title: 'Feature card / progress / 4 styles', render: () => <SidebarFeatureExample type=\"progress\" />, code: shellExampleCode('<SidebarFeatureExample type=\"progress\" />') },\n    { id: 'feature-link', title: 'Feature card / link / 4 styles', render: () => <SidebarFeatureExample type=\"link\" />, code: shellExampleCode('<SidebarFeatureExample type=\"link\" />') },\n    { id: 'feature-gift', title: 'Feature card / gift / 4 styles', render: () => <SidebarFeatureExample type=\"gift\" />, code: shellExampleCode('<SidebarFeatureExample type=\"gift\" />') },\n    { id: 'feature-storage', title: 'Feature card / storage / 4 styles', render: () => <SidebarFeatureExample type=\"storage\" />, code: shellExampleCode('<SidebarFeatureExample type=\"storage\" />') },\n    { id: 'feature-support', title: 'Feature card / support / 4 styles', render: () => <SidebarFeatureExample type=\"support\" />, code: shellExampleCode('<SidebarFeatureExample type=\"support\" />') },\n    { id: 'topbar-hr-default', title: 'HR topbar / default', render: () => <TopbarExample product=\"hr\" />, code: shellExampleCode('<TopbarExample product=\"hr\" />') },\n    { id: 'topbar-hr-icons', title: 'HR topbar / icons', render: () => <TopbarExample product=\"hr\" icons />, code: shellExampleCode('<TopbarExample product=\"hr\" icons />') },\n    { id: 'topbar-finance-default', title: 'FINANCE topbar / default', render: () => <TopbarExample product=\"finance\" />, code: shellExampleCode('<TopbarExample product=\"finance\" />') },\n    { id: 'topbar-finance-icons', title: 'FINANCE topbar / icons', render: () => <TopbarExample product=\"finance\" icons />, code: shellExampleCode('<TopbarExample product=\"finance\" icons />') },\n    { id: 'brand-artwork', title: 'Synergy and Apex / 6 original assets', render: () => <NavigationBrandsExample />, code: shellExampleCode('<NavigationBrandsExample />') },\n  ],\n}\n\nconst promptAreaEntry: GalleryEntry = {\n  id: 'prompt-area',\n  title: 'PromptArea',\n  figmaNodeId: '191226:4236',\n  importPath: '@open-mercato/ui/primitives/prompt-area',\n  usage: { do: ['Desktop and mobile compositions expose all 18 source variants through real hover and focus states.', 'Enter saves a local draft; Shift+Enter inserts a line break. Attachments stay in this browser and can be removed.', 'Model names reproduce source labels. These examples do not call a model or represent a subscription.'] },\n  variants: [\n    { id: 'desktop', title: 'Desktop / empty / Default, Hover, Active', render: () => <AiPromptExample />, code: aiProductExampleCode('<AiPromptExample />') },\n    { id: 'desktop-file', title: 'Desktop / file', render: () => <AiPromptExample attachment=\"file\" />, code: aiProductExampleCode('<AiPromptExample attachment=\"file\" />') },\n    { id: 'desktop-image', title: 'Desktop / original image', render: () => <AiPromptExample attachment=\"image\" />, code: aiProductExampleCode('<AiPromptExample attachment=\"image\" />') },\n    { id: 'mobile', title: 'Mobile / empty / Default, Hover, Active', render: () => <AiPromptExample compact />, code: aiProductExampleCode('<AiPromptExample compact />') },\n    { id: 'mobile-file', title: 'Mobile / file', render: () => <AiPromptExample compact attachment=\"file\" />, code: aiProductExampleCode('<AiPromptExample compact attachment=\"file\" />') },\n    { id: 'mobile-image', title: 'Mobile / original image', render: () => <AiPromptExample compact attachment=\"image\" />, code: aiProductExampleCode('<AiPromptExample compact attachment=\"image\" />') },\n  ],\n}\n\n// Composed AI-product patterns: point at the demo module rather than claiming a primitive's import path.\nconst aiProductPatternCode = (expression: string) => `import { ${expression.match(/<(\\w+)/)?.[1] ?? 'AiPromptExample'} } from '@open-mercato/core/modules/design_system/gallery/demos/ai-product'\n\n${expression}\n`\n\nconst aiControlsEntry: GalleryEntry = {\n  id: 'ai-controls',\n  title: 'AI Product / Controls',\n  figmaNodeId: '191042:2378',\n  importPath: '@open-mercato/core/modules/design_system/gallery/demos/ai-product',\n  usage: { do: ['Source-specific compositions reuse existing primitives with additive semantic radius and typography tokens.', 'Hover, keyboard focus and selected states are real interactions. Authentication buttons only display local explanatory feedback.', 'Original authentication glyphs are preserved as source assets. Application fonts, focus and semantic colors remain explicit adaptations.'] },\n  variants: [\n    { id: 'chat-buttons', title: 'Chat custom buttons / 2 styles \u00D7 3 states', render: () => <AiIconButtonExamples chat />, code: aiProductPatternCode('<AiIconButtonExamples chat />') },\n    { id: 'icon-buttons', title: 'Custom icon buttons / 4 sizes \u00D7 2 tones \u00D7 3 states', render: () => <AiIconButtonExamples />, code: aiProductPatternCode('<AiIconButtonExamples />') },\n    { id: 'search', title: 'Search / 2 sizes \u00D7 3 states', render: () => <AiSearchExamples />, code: aiProductPatternCode('<AiSearchExamples />') },\n    { id: 'new-chat', title: 'New chat / Default, Hover', render: () => <AiNewChatExample />, code: aiProductPatternCode('<AiNewChatExample />') },\n    { id: 'navigation-items', title: 'Navigation items / 12 variants', render: () => <AiNavigationExamples />, code: aiProductPatternCode('<AiNavigationExamples />') },\n    { id: 'auth-icons', title: 'Authentication / 8 original icons', render: () => <AiAuthExamples />, code: aiProductPatternCode('<AiAuthExamples />') },\n    { id: 'social-google', title: 'Google button / local feedback', render: () => <AiAuthExamples kind=\"social\" />, code: aiProductPatternCode('<AiAuthExamples kind=\"social\" />') },\n    { id: 'text-input', title: 'Text input / 5 source states', render: () => <AiAuthExamples kind=\"text\" />, code: aiProductPatternCode('<AiAuthExamples kind=\"text\" />') },\n    { id: 'digit-input', title: 'Digit input / 5 source states', render: () => <AiAuthExamples kind=\"digits\" />, code: aiProductPatternCode('<AiAuthExamples kind=\"digits\" />') },\n    { id: 'settings', title: 'Settings navigation, select, counter and model / 15 variants', render: () => <AiSettingsExamples />, code: aiProductPatternCode('<AiSettingsExamples />') },\n  ],\n}\n\nconst aiSidebarEntry: GalleryEntry = {\n  id: 'ai-sidebar',\n  title: 'AI Product / Sidebar',\n  figmaNodeId: '191050:3105',\n  importPath: '@open-mercato/ui/primitives/sidebar',\n  usage: { do: ['All four source sidebar variants render using the presentational Sidebar without application API calls.', 'Search filters the local history, navigation updates the selected item, and new chat creates a local draft counter.', 'The collapsed logo expands the sidebar; this adds a keyboard-accessible restoration control to the source composition.'] },\n  variants: [\n    { id: 'search-01', title: 'Search 01 / expanded / 272 \u00D7 900', render: () => <AiSidebarExample />, code: aiProductExampleCode('<AiSidebarExample />') },\n    { id: 'search-02', title: 'Search 02 / expanded', render: () => <AiSidebarExample search=\"02\" />, code: aiProductExampleCode('<AiSidebarExample search=\"02\" />') },\n    { id: 'search-03', title: 'Search 03 / expanded', render: () => <AiSidebarExample search=\"03\" />, code: aiProductExampleCode('<AiSidebarExample search=\"03\" />') },\n    { id: 'collapsed', title: 'Search 01 / collapsed / 72 \u00D7 900', render: () => <AiSidebarExample initialCollapsed />, code: aiProductExampleCode('<AiSidebarExample initialCollapsed />') },\n  ],\n}\n\nconst aiMobileNavigationEntry: GalleryEntry = {\n  id: 'ai-mobile-navigation',\n  title: 'AI Product / Mobile Navigation',\n  figmaNodeId: '192681:59134',\n  importPath: '@open-mercato/core/modules/design_system/gallery/demos/ai-product',\n  usage: { do: ['All four 390 \u00D7 64 source compositions have working local controls and keyboard-accessible popovers.', 'Add project stores the entered name only in component state. Escape closes the popover, Enter or Ctrl/Cmd+Enter confirms.'] },\n  variants: [\n    { id: 'default', title: 'Default', render: () => <AiMobileNavigationExample />, code: aiProductPatternCode('<AiMobileNavigationExample />') },\n    { id: 'in-projects', title: 'In Projects', render: () => <AiMobileNavigationExample kind=\"in-projects\" />, code: aiProductPatternCode('<AiMobileNavigationExample kind=\"in-projects\" />') },\n    { id: 'projects', title: 'Projects', render: () => <AiMobileNavigationExample kind=\"projects\" />, code: aiProductPatternCode('<AiMobileNavigationExample kind=\"projects\" />') },\n    { id: 'project-details', title: 'Project Details', render: () => <AiMobileNavigationExample kind=\"project-details\" />, code: aiProductPatternCode('<AiMobileNavigationExample kind=\"project-details\" />') },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  promptAreaEntry,\n  aiControlsEntry,\n  aiSidebarEntry,\n  aiMobileNavigationEntry,\n  sidebarEntry,\n  tabsEntry,\n  breadcrumbEntry,\n  paginationEntry,\n  segmentedControlEntry,\n  accordionEntry,\n]\n\nfunction TabsNavigationUnderlineSample() {\n  const t = useT()\n  return (<Tabs defaultValue=\"orders\" variant=\"underline\" className=\"w-full\">\n          <TabsList aria-label={t('design_system.gallery.sampleCopy.customerSections')}>\n            <TabsTrigger value=\"overview\" leading={<LayoutGrid className=\"size-4\" />}>\n              {t('design_system.gallery.examples.navigation2.overview')}\n            </TabsTrigger>\n            <TabsTrigger value=\"orders\" leading={<ShoppingCart className=\"size-4\" />} count={12}>\n              {t('design_system.gallery.examples.navigation2.orders')}\n            </TabsTrigger>\n            <TabsTrigger value=\"settings\" leading={<Settings className=\"size-4\" />}>\n              {t('design_system.gallery.examples.navigation2.settings')}\n            </TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"overview\">\n            <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sampleCopy.customerOverviewPanel')}</p>\n          </TabsContent>\n          <TabsContent value=\"orders\">\n            <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sampleCopy.12OrdersInTheLast30Days')}</p>\n          </TabsContent>\n          <TabsContent value=\"settings\">\n            <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sampleCopy.notificationAndAccessSettings')}</p>\n          </TabsContent>\n        </Tabs>)\n}\n\nfunction TabsNavigationPillSample() {\n  const t = useT()\n  return (<Tabs defaultValue=\"preview\">\n          <TabsList aria-label={t('design_system.gallery.sampleCopy.editorView')}>\n            <TabsTrigger value=\"preview\">{t('design_system.gallery.samples.table.preview')}</TabsTrigger>\n            <TabsTrigger value=\"code\">{t('design_system.gallery.samples.richEditor.labels.code')}</TabsTrigger>\n            <TabsTrigger value=\"logs\">{t('design_system.gallery.sampleCopy.logs')}</TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"preview\">\n            <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sampleCopy.renderedPreview')}</p>\n          </TabsContent>\n          <TabsContent value=\"code\">\n            <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sampleCopy.sourceCodePanel')}</p>\n          </TabsContent>\n          <TabsContent value=\"logs\">\n            <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sampleCopy.runtimeLogsPanel')}</p>\n          </TabsContent>\n        </Tabs>)\n}\n\nfunction TabsNavigationPillVerticalSample() {\n  const t = useT()\n  return (<Tabs defaultValue=\"profile\" orientation=\"vertical\" className=\"w-full\">\n          <TabsList aria-label={t('design_system.gallery.samples.crypto.accountSettings')}>\n            <TabsTrigger value=\"profile\">{t('design_system.gallery.samples.crypto.profile')}</TabsTrigger>\n            <TabsTrigger value=\"billing\">{t('design_system.gallery.samples.marketing.billing')}</TabsTrigger>\n            <TabsTrigger value=\"security\">{t('design_system.gallery.sampleCopy.security')}</TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"profile\">\n            <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sampleCopy.profileSettingsPanel')}</p>\n          </TabsContent>\n          <TabsContent value=\"billing\">\n            <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sampleCopy.billingSettingsPanel')}</p>\n          </TabsContent>\n          <TabsContent value=\"security\">\n            <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sampleCopy.securitySettingsPanel')}</p>\n          </TabsContent>\n        </Tabs>)\n}\n\nfunction BreadcrumbNavigationSlashSample() {\n  const t = useT()\n  return (<Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">{t('design_system.gallery.examples.shell.dashboard')}</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">{t('design_system.gallery.sampleCopy.products')}</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>{t('design_system.gallery.sampleCopy.winterCatalog')}</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>)\n}\n\nfunction BreadcrumbNavigationArrowSample() {\n  const t = useT()\n  return (<Breadcrumb divider=\"arrow\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">{t('design_system.gallery.examples.navigation2.orders')}</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">#20418</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>{t('design_system.gallery.sampleCopy.shipment')}</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>)\n}\n\nfunction BreadcrumbNavigationEllipsisSample() {\n  const t = useT()\n  return (<Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">{t('design_system.gallery.examples.shell.dashboard')}</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbEllipsis />\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">{t('design_system.gallery.sampleCopy.attributes')}</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>{t('design_system.gallery.samples.richEditor.labels.textColor')}</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>)\n}\n\nfunction SegmentedControlNavigationDefaultSample() {\n  const t = useT()\n  return (<SegmentedControl defaultValue=\"all\" aria-label={t('design_system.gallery.sampleCopy.viewFilter')}>\n          <SegmentedControlItem value=\"all\">{t('design_system.gallery.samples.feeds.all')}</SegmentedControlItem>\n          <SegmentedControlItem value=\"active\">{t('design_system.gallery.samples.finance.active')}</SegmentedControlItem>\n          <SegmentedControlItem value=\"archived\">{t('design_system.gallery.sampleCopy.archived')}</SegmentedControlItem>\n        </SegmentedControl>)\n}\n\nfunction SegmentedControlNavigationSmallSample() {\n  const t = useT()\n  return (<SegmentedControl size=\"sm\" defaultValue={t('design_system.gallery.sampleCopy.30d')} aria-label={t('design_system.gallery.samples.crypto.chartRange')}>\n          <SegmentedControlItem value=\"7d\">{t('design_system.gallery.sampleCopy.7d')}</SegmentedControlItem>\n          <SegmentedControlItem value=\"30d\">{t('design_system.gallery.sampleCopy.30d')}</SegmentedControlItem>\n          <SegmentedControlItem value=\"90d\">{t('design_system.gallery.sampleCopy.90d')}</SegmentedControlItem>\n          <SegmentedControlItem value=\"1y\">{t('design_system.gallery.sampleCopy.1y')}</SegmentedControlItem>\n        </SegmentedControl>)\n}\n\nfunction SegmentedControlNavigationDisabledSample() {\n  const t = useT()\n  return (<SegmentedControl defaultValue=\"list\" disabled aria-label={t('design_system.gallery.sampleCopy.layout')}>\n          <SegmentedControlItem value=\"list\">{t('design_system.gallery.sampleCopy.list')}</SegmentedControlItem>\n          <SegmentedControlItem value=\"grid\">{t('design_system.gallery.sampleCopy.grid')}</SegmentedControlItem>\n        </SegmentedControl>)\n}\n\nfunction AccordionNavigationCardSample() {\n  const t = useT()\n  return (<Accordion type=\"single\" collapsible defaultValue=\"shipping\" className=\"w-full space-y-2\">\n          <AccordionItem value=\"shipping\">\n            <AccordionTrigger>{t('design_system.gallery.sampleCopy.shippingAndDelivery')}</AccordionTrigger>\n            <AccordionContent>\n              {t('design_system.gallery.sampleCopy.ordersPlacedBefore2PMShipTheSameBusinessDay')}\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"returns\">\n            <AccordionTrigger>{t('design_system.gallery.sampleCopy.returns')}</AccordionTrigger>\n            <AccordionContent>\n              {t('design_system.gallery.sampleCopy.itemsCanBeReturnedWithin30DaysOfDeliveryIn')}\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"payments\">\n            <AccordionTrigger>{t('design_system.gallery.sampleCopy.paymentMethods')}</AccordionTrigger>\n            <AccordionContent>\n              {t('design_system.gallery.sampleCopy.weAcceptCardsBankTransferAndDeferredPaymentForVerified')}\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>)\n}\n\nfunction AccordionNavigationLeftIconSample() {\n  const t = useT()\n  return (<Accordion type=\"single\" collapsible className=\"w-full space-y-2\">\n          <AccordionItem value=\"shipping\">\n            <AccordionTrigger leftIcon={<Truck />}>{t('design_system.gallery.sampleCopy.howFastIsShipping')}</AccordionTrigger>\n            <AccordionContent>\n              {t('design_system.gallery.sampleCopy.samedayDispatchOnWeekdaysDeliveryTypicallyTakes13BusinessDays')}\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"billing\">\n            <AccordionTrigger leftIcon={<CreditCard />}>{t('design_system.gallery.sampleCopy.whenAmICharged')}</AccordionTrigger>\n            <AccordionContent>\n              {t('design_system.gallery.sampleCopy.yourCardIsChargedWhenTheOrderShipsNeverAt')}\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>)\n}\n\nfunction AccordionNavigationChevronSample() {\n  const t = useT()\n  return (<Accordion type=\"multiple\" className=\"w-full space-y-2\">\n          <AccordionItem value=\"general\">\n            <AccordionTrigger triggerIcon=\"chevron\">{t('design_system.gallery.sampleCopy.general')}</AccordionTrigger>\n            <AccordionContent>\n              {t('design_system.gallery.sampleCopy.storeNameContactDetailsAndDefaultLocaleForTheStorefront')}\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"advanced\">\n            <AccordionTrigger triggerIcon=\"chevron\">{t('design_system.gallery.samples.finance.advanced')}</AccordionTrigger>\n            <AccordionContent>\n              {t('design_system.gallery.sampleCopy.webhooksAPIKeysAndOtherDeveloperfacingConfiguration')}\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/design_system/gallery/entries/notifications.js

@@ -1,21 +1,109 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import * as React from "react";
 import { Bell } from "lucide-react";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { IconButton } from "@open-mercato/ui/primitives/icon-button";
-import {
-  NotificationCountBadge,
-  NotificationItem,
-  NotificationPanel
-} from "@open-mercato/ui/backend/notifications";
-const galleryT = (key, fallbackOrParams, params) => {
-  const fallback = typeof fallbackOrParams === "string" ? fallbackOrParams : key;
-  const variables = (typeof fallbackOrParams === "object" ? fallbackOrParams : params) ?? {};
-  return Object.entries(variables).reduce(
-    (text, [name, value]) => text.replaceAll(`{${name}}`, String(value)),
-    fallback
+import { NotificationCountBadge, NotificationItem, NotificationPanel } from "@open-mercato/ui/backend/notifications";
+function NotificationBellEntryPresentationalMockPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(
+    IconButton,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: "relative",
+      "aria-label": t("design_system.gallery.samples.content.3UnreadNotifications"),
+      children: [
+        /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsx(NotificationCountBadge, { count: 3 })
+      ]
+    }
   );
-};
+}
+function NotificationCountBadgeEntryCountsPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      IconButton,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "relative",
+        "aria-label": t("design_system.gallery.samples.content.3UnreadNotifications"),
+        children: [
+          /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx(NotificationCountBadge, { count: 3 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      IconButton,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "relative",
+        "aria-label": t("design_system.gallery.samples.content.12UnreadNotifications"),
+        children: [
+          /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx(NotificationCountBadge, { count: 12 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      IconButton,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "relative",
+        "aria-label": t("design_system.gallery.samples.content.120UnreadNotifications"),
+        children: [
+          /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx(NotificationCountBadge, { count: 120 })
+        ]
+      }
+    )
+  ] });
+}
+function NotificationItemEntryUnreadInfoPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    NotificationItem,
+    {
+      notification: unreadInfoNotification(t),
+      onMarkAsRead: noopMarkAsRead,
+      onExecuteAction: noopExecuteAction,
+      onDismiss: noopDismiss,
+      t
+    }
+  ) });
+}
+function NotificationItemEntryWithBodyPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    NotificationItem,
+    {
+      notification: successWithBodyNotification(t),
+      onMarkAsRead: noopMarkAsRead,
+      onExecuteAction: noopExecuteAction,
+      onDismiss: noopDismiss,
+      t
+    }
+  ) });
+}
+function NotificationItemEntryWithActionsPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    NotificationItem,
+    {
+      notification: actionRequiredNotification(t),
+      onMarkAsRead: noopMarkAsRead,
+      onExecuteAction: noopExecuteAction,
+      onDismiss: noopDismiss,
+      t
+    }
+  ) });
+}
 const minutesAgo = (minutes) => new Date(Date.now() - minutes * 6e4).toISOString();
 const noopMarkAsRead = async () => {
 };
@@ -26,7 +114,6 @@ function mockNotification(overrides) {
   return {
     id: "gallery-notification",
     type: "gallery.demo",
-    title: "Notification",
     severity: "info",
     status: "unread",
     actions: [],
@@ -34,57 +121,66 @@ function mockNotification(overrides) {
     ...overrides
   };
 }
-const unreadInfoNotification = mockNotification({
+const unreadInfoNotification = (t) => mockNotification({
   id: "gallery-unread-info",
-  title: "Nightly import finished",
+  title: t("design_system.gallery.samples.content.nightlyImportFinished"),
   severity: "info",
   status: "unread",
   sourceModule: "catalog",
   createdAt: minutesAgo(4)
 });
-const successWithBodyNotification = mockNotification({
+const successWithBodyNotification = (t) => mockNotification({
   id: "gallery-success-body",
-  title: "Order #10023 shipped",
-  body: "Carrier picked up 3 parcels. Tracking numbers were emailed to the customer.",
+  title: t("design_system.gallery.samples.content.order10023Shipped"),
+  body: t("design_system.gallery.samples.content.carrierPickedUp3ParcelsTrackingNumbersWereEmailedToTheCustomer"),
   severity: "success",
   status: "read",
   sourceModule: "sales",
   createdAt: minutesAgo(35)
 });
-const actionRequiredNotification = mockNotification({
+const actionRequiredNotification = (t) => mockNotification({
   id: "gallery-action-required",
-  title: "Price list awaiting approval",
-  body: "Wholesale EU price list changes 214 products.",
+  title: t("design_system.gallery.samples.content.priceListAwaitingApproval"),
+  body: t("design_system.gallery.samples.content.wholesaleEuPriceListChanges214Products"),
   severity: "warning",
   status: "unread",
   sourceModule: "pricing",
   actions: [
-    { id: "review", label: "Review changes", variant: "outline" },
-    { id: "approve", label: "Approve", variant: "default" }
+    {
+      id: "review",
+      label: t("design_system.gallery.samples.content.reviewChanges"),
+      variant: "outline"
+    },
+    {
+      id: "approve",
+      label: t("design_system.gallery.samples.content.approve"),
+      variant: "default"
+    }
   ],
   createdAt: minutesAgo(90)
 });
-const panelNotifications = [
-  unreadInfoNotification,
-  actionRequiredNotification,
-  successWithBodyNotification
+const panelNotifications = (t) => [
+  unreadInfoNotification(t),
+  actionRequiredNotification(t),
+  successWithBodyNotification(t)
 ];
 function DemoNotificationPanel() {
+  const t = useT();
   const [open, setOpen] = React.useState(false);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setOpen(true), children: "Open notification panel" }),
+    /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setOpen(true), children: t("design_system.gallery.samples.content.openNotificationPanel") }),
     /* @__PURE__ */ jsx(
       NotificationPanel,
       {
         open,
         onOpenChange: setOpen,
-        notifications: panelNotifications,
+        notifications: panelNotifications(t),
         unreadCount: 2,
         onMarkAsRead: noopMarkAsRead,
         onExecuteAction: noopExecuteAction,
         onDismiss: noopDismiss,
         onMarkAllRead: noopMarkAsRead,
-        t: galleryT
+        t
       }
     )
   ] });
@@ -97,10 +193,7 @@ const notificationBellEntry = {
     {
       id: "presentational-mock",
       title: "Presentational mock (live bell is SSE-wired)",
-      render: () => /* @__PURE__ */ jsxs(IconButton, { variant: "ghost", size: "sm", className: "relative", "aria-label": "3 unread notifications", children: [
-        /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
-        /* @__PURE__ */ jsx(NotificationCountBadge, { count: 3 })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(NotificationBellEntryPresentationalMockPreview, {}),
       code: `import { NotificationBell } from '@open-mercato/ui/backend/notifications'
 
 // Wired to the notifications API + SSE \u2014 AppShell renders one in the topbar.
@@ -116,20 +209,7 @@ const notificationCountBadgeEntry = {
     {
       id: "counts",
       title: "Counts (caps at 99+)",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(IconButton, { variant: "ghost", size: "sm", className: "relative", "aria-label": "3 unread notifications", children: [
-          /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
-          /* @__PURE__ */ jsx(NotificationCountBadge, { count: 3 })
-        ] }),
-        /* @__PURE__ */ jsxs(IconButton, { variant: "ghost", size: "sm", className: "relative", "aria-label": "12 unread notifications", children: [
-          /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
-          /* @__PURE__ */ jsx(NotificationCountBadge, { count: 12 })
-        ] }),
-        /* @__PURE__ */ jsxs(IconButton, { variant: "ghost", size: "sm", className: "relative", "aria-label": "120 unread notifications", children: [
-          /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
-          /* @__PURE__ */ jsx(NotificationCountBadge, { count: 120 })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(NotificationCountBadgeEntryCountsPreview, {}),
       code: `import { NotificationCountBadge } from '@open-mercato/ui/backend/notifications'
 
 // Renders nothing for count <= 0; anchors to the nearest relative parent.
@@ -148,16 +228,7 @@ const notificationItemEntry = {
     {
       id: "unread-info",
       title: "Unread (mocked data)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
-        NotificationItem,
-        {
-          notification: unreadInfoNotification,
-          onMarkAsRead: noopMarkAsRead,
-          onExecuteAction: noopExecuteAction,
-          onDismiss: noopDismiss,
-          t: galleryT
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(NotificationItemEntryUnreadInfoPreview, {}),
       code: `import { NotificationItem } from '@open-mercato/ui/backend/notifications'
 
 <NotificationItem
@@ -171,16 +242,7 @@ const notificationItemEntry = {
     {
       id: "with-body",
       title: "Read with body bubble (mocked data)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
-        NotificationItem,
-        {
-          notification: successWithBodyNotification,
-          onMarkAsRead: noopMarkAsRead,
-          onExecuteAction: noopExecuteAction,
-          onDismiss: noopDismiss,
-          t: galleryT
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(NotificationItemEntryWithBodyPreview, {}),
       code: `import { NotificationItem } from '@open-mercato/ui/backend/notifications'
 
 // A notification with a body renders it as a speech-bubble under the title.
@@ -195,16 +257,7 @@ const notificationItemEntry = {
     {
       id: "with-actions",
       title: "Action required (mocked data)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
-        NotificationItem,
-        {
-          notification: actionRequiredNotification,
-          onMarkAsRead: noopMarkAsRead,
-          onExecuteAction: noopExecuteAction,
-          onDismiss: noopDismiss,
-          t: galleryT
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(NotificationItemEntryWithActionsPreview, {}),
       code: `import { NotificationItem } from '@open-mercato/ui/backend/notifications'
 
 // Actions come from notification.actions; the last one renders as primary.