@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/design_system/gallery/entries/foundations.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { Circle } from 'lucide-react'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport type { GalleryEntry } from '../types'\n\n// Token names are proper nouns from the codebase and are deliberately not\n// translated. Structure mirrors the DS Figma color-system sheet (node\n// 553:14956): Brand Colors \u2192 Color Tokens by role \u2192 State Color Tokens.\n// Figma state names map to code tokens per the contract documented in\n// globals.css: state/{x}/base\u2192icon, /light\u2192border, /lighter\u2192bg.\n\nconst TOKENS_IMPORT = 'apps/mercato/src/app/globals.css'\nconst FIGMA_COLORS_NODE = '553:14956'\n\nfunction SwatchCard({ copyText, label, children }: { copyText: string; label: string; children: React.ReactNode }) {\n  const onCopy = React.useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(copyText)\n      flash(`${copyText} copied`, 'success')\n    } catch {\n      flash('Could not copy the token', 'error')\n    }\n  }, [copyText])\n  return (\n    <button\n      type=\"button\"\n      onClick={onCopy}\n      className=\"flex w-36 flex-col items-start gap-1 rounded-md border border-border bg-background p-2 text-left transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:shadow-focus\"\n      title={`Copy ${copyText}`}\n    >\n      {children}\n      <code className=\"break-all text-[11px] leading-tight text-muted-foreground\">{label}</code>\n    </button>\n  )\n}\n\nfunction TokenSwatch({ tokenClass, label }: { tokenClass: string; label: string }) {\n  return (\n    <SwatchCard copyText={label} label={label}>\n      <span aria-hidden className={`h-10 w-full rounded-sm border border-border ${tokenClass}`} />\n    </SwatchCard>\n  )\n}\n\n// A text-color token shown in its actual role \u2014 as type, not as a fill.\nfunction TextSwatch({ textClass, label }: { textClass: string; label: string }) {\n  return (\n    <SwatchCard copyText={textClass} label={label}>\n      <span aria-hidden className=\"flex h-10 w-full items-center justify-center rounded-sm border border-border bg-background\">\n        <span className={`text-xl font-semibold leading-none ${textClass}`}>Aa</span>\n      </span>\n    </SwatchCard>\n  )\n}\n\n// A border-color token shown as a 2px outline on the neutral surface.\nfunction BorderSwatch({ borderClass, label }: { borderClass: string; label: string }) {\n  return (\n    <SwatchCard copyText={borderClass} label={label}>\n      <span aria-hidden className={`h-10 w-full rounded-sm border-2 bg-background ${borderClass}`} />\n    </SwatchCard>\n  )\n}\n\n// An icon-color token shown on a real glyph.\nfunction IconSwatch({ iconClass, label }: { iconClass: string; label: string }) {\n  return (\n    <SwatchCard copyText={iconClass} label={label}>\n      <span aria-hidden className=\"flex h-10 w-full items-center justify-center rounded-sm border border-border bg-background\">\n        <Circle className={`size-4 fill-current ${iconClass}`} />\n      </span>\n    </SwatchCard>\n  )\n}\n\nfunction SwatchRow({ items }: { items: Array<{ tokenClass: string; label: string }> }) {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      {items.map((item) => (\n        <TokenSwatch key={item.label} tokenClass={item.tokenClass} label={item.label} />\n      ))}\n    </div>\n  )\n}\n\nconst brandColorsEntry: GalleryEntry = {\n  id: 'brand-colors',\n  title: 'Brand colors',\n  importPath: TOKENS_IMPORT,\n  usage: {\n    do: ['brand-violet 10/30/100 pattern (bg/border/text) for proposed and feature accents.'],\n    dont: ['Never theme or repurpose accent-indigo \u2014 it is the selection-control contract.'],\n  },\n  figmaNodeId: FIGMA_COLORS_NODE,\n  variants: [\n    {\n      id: 'gradient',\n      title: 'gradient 135\u00B0',\n      render: () => (\n        <div className=\"space-y-2\">\n          <div\n            aria-hidden\n            className=\"h-16 w-full max-w-md rounded-md border border-border bg-linear-135 from-brand-lime from-0% via-brand-yellow via-35% to-brand-violet to-70%\"\n          />\n          <code className=\"text-xs text-muted-foreground\">brand-lime 0%, brand-yellow 35%, brand-violet 70%</code>\n        </div>\n      ),\n      code: `<div className=\"bg-linear-135 from-brand-lime from-0% via-brand-yellow via-35% to-brand-violet to-70%\" />`,\n    },\n    {\n      id: 'identity',\n      title: 'identity',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-brand-lime', label: 'brand-lime' },\n            { tokenClass: 'bg-brand-yellow', label: 'brand-yellow' },\n            { tokenClass: 'bg-brand-violet', label: 'brand-violet' },\n            { tokenClass: 'bg-brand-violet-foreground', label: 'brand-violet-foreground' },\n            { tokenClass: 'bg-accent-indigo', label: 'accent-indigo' },\n          ]}\n        />\n      ),\n      code: `<span className=\"bg-brand-violet/10 border-brand-violet/30 text-brand-violet\" />`,\n    },\n    {\n      id: 'social',\n      title: 'social',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-brand-apple', label: 'brand-apple' },\n            { tokenClass: 'bg-brand-github', label: 'brand-github' },\n            { tokenClass: 'bg-brand-facebook', label: 'brand-facebook' },\n            { tokenClass: 'bg-brand-dropbox', label: 'brand-dropbox' },\n            { tokenClass: 'bg-brand-linkedin', label: 'brand-linkedin' },\n            { tokenClass: 'bg-brand-x', label: 'brand-x' },\n          ]}\n        />\n      ),\n      code: `<SocialButton provider=\"github\" />`,\n    },\n  ],\n}\n\nconst colorTokensEntry: GalleryEntry = {\n  id: 'color-tokens',\n  title: 'Color tokens',\n  importPath: TOKENS_IMPORT,\n  usage: {\n    do: ['Pair every surface with its -foreground counterpart.', 'Borders come from border-border / border-input \u2014 nothing else.'],\n    dont: ['Never border-gray-* or any raw palette shade.'],\n  },\n  figmaNodeId: FIGMA_COLORS_NODE,\n  variants: [\n    {\n      id: 'primary',\n      title: 'primary',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-primary', label: 'primary' },\n            { tokenClass: 'bg-primary-foreground', label: 'primary-foreground' },\n            { tokenClass: 'bg-primary-hover', label: 'primary-hover' },\n            { tokenClass: 'bg-destructive', label: 'destructive' },\n          ]}\n        />\n      ),\n      code: `<div className=\"bg-primary text-primary-foreground hover:bg-primary-hover\" />`,\n    },\n    {\n      id: 'background',\n      title: 'background (bg)',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-background', label: 'background' },\n            { tokenClass: 'bg-card', label: 'card' },\n            { tokenClass: 'bg-popover', label: 'popover' },\n            { tokenClass: 'bg-muted', label: 'muted' },\n            { tokenClass: 'bg-accent', label: 'accent' },\n            { tokenClass: 'bg-sidebar', label: 'sidebar' },\n            { tokenClass: 'bg-bg-disabled', label: 'bg-disabled' },\n          ]}\n        />\n      ),\n      code: `<div className=\"bg-card text-card-foreground\" />`,\n    },\n    {\n      id: 'text',\n      title: 'text',\n      render: () => (\n        <div className=\"flex flex-wrap gap-2\">\n          <TextSwatch textClass=\"text-foreground\" label=\"text-foreground\" />\n          <TextSwatch textClass=\"text-muted-foreground\" label=\"text-muted-foreground\" />\n          <TextSwatch textClass=\"text-card-foreground\" label=\"text-card-foreground\" />\n          <TextSwatch textClass=\"text-accent-foreground\" label=\"text-accent-foreground\" />\n          <TextSwatch textClass=\"text-text-disabled\" label=\"text-text-disabled\" />\n        </div>\n      ),\n      code: `<p className=\"text-muted-foreground\">Secondary copy</p>`,\n    },\n    {\n      id: 'stroke',\n      title: 'stroke',\n      render: () => (\n        <div className=\"flex flex-wrap gap-2\">\n          <BorderSwatch borderClass=\"border-border\" label=\"border-border\" />\n          <BorderSwatch borderClass=\"border-input\" label=\"border-input\" />\n          <BorderSwatch borderClass=\"border-ring\" label=\"border-ring\" />\n          <BorderSwatch borderClass=\"border-border-disabled\" label=\"border-border-disabled\" />\n        </div>\n      ),\n      code: `<div className=\"border-border focus-visible:ring-ring\" />`,\n    },\n  ],\n}\n\n// Literal class strings on purpose: the Tailwind scanner only sees complete\n// literals, so `bg-status-${x}` variants would silently never be generated.\ntype StatusFamily = {\n  figma: string\n  status: string\n  chipLabel: string\n  bg: string\n  text: string\n  border: string\n  icon: string\n  dot: string\n}\n\nconst FIGMA_STATE_TO_CODE: StatusFamily[] = [\n  { figma: 'Faded', status: 'neutral', chipLabel: 'Neutral', bg: 'bg-status-neutral-bg', text: 'text-status-neutral-text', border: 'border-status-neutral-border', icon: 'text-status-neutral-icon', dot: 'bg-status-neutral-icon' },\n  { figma: 'Information', status: 'info', chipLabel: 'Info', bg: 'bg-status-info-bg', text: 'text-status-info-text', border: 'border-status-info-border', icon: 'text-status-info-icon', dot: 'bg-status-info-icon' },\n  { figma: 'Warning', status: 'warning', chipLabel: 'Warning', bg: 'bg-status-warning-bg', text: 'text-status-warning-text', border: 'border-status-warning-border', icon: 'text-status-warning-icon', dot: 'bg-status-warning-icon' },\n  { figma: 'Error', status: 'error', chipLabel: 'Error', bg: 'bg-status-error-bg', text: 'text-status-error-text', border: 'border-status-error-border', icon: 'text-status-error-icon', dot: 'bg-status-error-icon' },\n  { figma: 'Success', status: 'success', chipLabel: 'Success', bg: 'bg-status-success-bg', text: 'text-status-success-text', border: 'border-status-success-border', icon: 'text-status-success-icon', dot: 'bg-status-success-icon' },\n  { figma: 'Highlighted', status: 'pink', chipLabel: 'Highlighted', bg: 'bg-status-pink-bg', text: 'text-status-pink-text', border: 'border-status-pink-border', icon: 'text-status-pink-icon', dot: 'bg-status-pink-icon' },\n]\n\n// One status family: the composed chip first (how the roles work together),\n// then each token presented in its actual role.\nfunction StatusFamilyPreview({ family }: { family: StatusFamily }) {\n  return (\n    <div className=\"space-y-3\">\n      <span\n        className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-sm font-medium ${family.bg} ${family.text} ${family.border}`}\n      >\n        <span aria-hidden className={`size-2 rounded-full ${family.dot}`} />\n        {family.chipLabel}\n      </span>\n      <div className=\"flex flex-wrap gap-2\">\n        <TokenSwatch tokenClass={family.bg} label={family.bg} />\n        <TextSwatch textClass={family.text} label={family.text} />\n        <BorderSwatch borderClass={family.border} label={family.border} />\n        <IconSwatch iconClass={family.icon} label={family.icon} />\n      </div>\n    </div>\n  )\n}\n\nconst stateTokensEntry: GalleryEntry = {\n  id: 'state-tokens',\n  title: 'State color tokens',\n  importPath: TOKENS_IMPORT,\n  usage: {\n    do: [\n      'Pair -bg with -text of the same family \u2014 the shades are contrast-tested together.',\n      '-icon for glyphs and dots, -border for outlines; both handle dark mode themselves.',\n    ],\n    dont: [\n      'Never hardcode Tailwind status colors (text-red-*, bg-green-*, text-amber-*).',\n      'No dark: overrides on status tokens \u2014 they already theme.',\n    ],\n  },\n  figmaNodeId: FIGMA_COLORS_NODE,\n  variants: [\n    ...FIGMA_STATE_TO_CODE.map((family) => ({\n      id: family.status,\n      title: `${family.figma} \u2192 status-${family.status}`,\n      render: () => <StatusFamilyPreview family={family} />,\n      code: `<span className=\"${family.bg} ${family.text} ${family.border}\" />`,\n    })),\n    {\n      id: 'feature',\n      title: 'Feature \u2192 brand-violet pattern',\n      render: () => (\n        <div className=\"flex max-w-md items-center gap-2 rounded-md border border-brand-violet/30 bg-brand-violet/10 p-3 text-sm text-brand-violet\">\n          Feature state uses the brand-violet 10/30/100 pattern, not a status family.\n        </div>\n      ),\n      code: `<Alert status=\"feature\" />`,\n    },\n  ],\n}\n\nconst chartPaletteEntry: GalleryEntry = {\n  id: 'chart-palette',\n  title: 'Chart palette',\n  importPath: TOKENS_IMPORT,\n  usage: {\n    dont: [\n      'Never build token class names dynamically (`bg-chart-${n}`) \u2014 the Tailwind scanner only sees complete literals, so the class is silently never generated.',\n    ],\n  },\n  variants: [\n    {\n      id: 'numbered',\n      title: 'numbered',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-chart-1', label: 'chart-1' },\n            { tokenClass: 'bg-chart-2', label: 'chart-2' },\n            { tokenClass: 'bg-chart-3', label: 'chart-3' },\n            { tokenClass: 'bg-chart-4', label: 'chart-4' },\n            { tokenClass: 'bg-chart-5', label: 'chart-5' },\n          ]}\n        />\n      ),\n      code: `<BarChart data={data} />`,\n    },\n    {\n      id: 'named',\n      title: 'named',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-chart-blue', label: 'chart-blue' },\n            { tokenClass: 'bg-chart-emerald', label: 'chart-emerald' },\n            { tokenClass: 'bg-chart-amber', label: 'chart-amber' },\n            { tokenClass: 'bg-chart-rose', label: 'chart-rose' },\n            { tokenClass: 'bg-chart-violet', label: 'chart-violet' },\n            { tokenClass: 'bg-chart-cyan', label: 'chart-cyan' },\n            { tokenClass: 'bg-chart-indigo', label: 'chart-indigo' },\n            { tokenClass: 'bg-chart-pink', label: 'chart-pink' },\n            { tokenClass: 'bg-chart-teal', label: 'chart-teal' },\n            { tokenClass: 'bg-chart-orange', label: 'chart-orange' },\n          ]}\n        />\n      ),\n      code: `<Sparkline className=\"text-chart-blue\" data={points} />`,\n    },\n  ],\n}\n\ntype ColorRole = {\n  surface: string\n  onSurface: string\n  surfaceCls: string\n  onSurfaceCls: string\n  borderCls?: string\n}\n\nfunction RoleCard({ role }: { role: ColorRole }) {\n  const label = `${role.surface} / ${role.onSurface}`\n  const onCopy = React.useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(`${role.surfaceCls} ${role.onSurfaceCls}`)\n      flash(`${role.surfaceCls} ${role.onSurfaceCls} copied`, 'success')\n    } catch {\n      flash('Could not copy the classes', 'error')\n    }\n  }, [role])\n  return (\n    <button\n      type=\"button\"\n      onClick={onCopy}\n      title={`Copy ${role.surfaceCls} ${role.onSurfaceCls}`}\n      className={`flex h-24 w-full flex-col justify-between rounded-md border p-3 text-left transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:shadow-focus ${role.surfaceCls} ${role.onSurfaceCls} ${role.borderCls ?? 'border-border'}`}\n    >\n      <span className=\"text-sm font-medium leading-tight\">{role.surface}</span>\n      <code className=\"text-xs opacity-80\">{role.onSurface}</code>\n    </button>\n  )\n}\n\nfunction RoleGrid({ roles }: { roles: ColorRole[] }) {\n  return (\n    <div className=\"grid w-full gap-2 sm:grid-cols-2 lg:grid-cols-3\">\n      {roles.map((role) => (\n        <RoleCard key={role.surface + role.onSurface} role={role} />\n      ))}\n    </div>\n  )\n}\n\nconst colorRolesEntry: GalleryEntry = {\n  id: 'color-roles',\n  title: 'Color roles',\n  importPath: TOKENS_IMPORT,\n  figmaNodeId: FIGMA_COLORS_NODE,\n  keywords: ['roles', 'pairs', 'on-color', 'material'],\n  usage: {\n    do: [\n      'A role is a surface paired with its content color \u2014 always use them together, never mix pairs.',\n      'Click a card to copy both classes of the pair.',\n    ],\n    dont: [\n      'Never put foreground on a surface from a different pair \u2014 contrast is only tested within a pair.',\n      'Never use a -foreground token as a standalone accent color.',\n    ],\n  },\n  variants: [\n    {\n      id: 'action',\n      title: 'action',\n      render: () => (\n        <RoleGrid\n          roles={[\n            { surface: 'primary', onSurface: 'primary-foreground', surfaceCls: 'bg-primary', onSurfaceCls: 'text-primary-foreground' },\n            { surface: 'destructive', onSurface: 'white', surfaceCls: 'bg-destructive', onSurfaceCls: 'text-white' },\n            { surface: 'brand-violet', onSurface: 'brand-violet-foreground', surfaceCls: 'bg-brand-violet', onSurfaceCls: 'text-brand-violet-foreground' },\n            { surface: 'accent-indigo', onSurface: 'accent-indigo-foreground', surfaceCls: 'bg-accent-indigo', onSurfaceCls: 'text-accent-indigo-foreground' },\n          ]}\n        />\n      ),\n      code: `<button className=\"bg-primary text-primary-foreground\" />`,\n    },\n    {\n      id: 'surfaces',\n      title: 'surfaces',\n      render: () => (\n        <RoleGrid\n          roles={[\n            { surface: 'background', onSurface: 'foreground', surfaceCls: 'bg-background', onSurfaceCls: 'text-foreground' },\n            { surface: 'card', onSurface: 'card-foreground', surfaceCls: 'bg-card', onSurfaceCls: 'text-card-foreground' },\n            { surface: 'popover', onSurface: 'popover-foreground', surfaceCls: 'bg-popover', onSurfaceCls: 'text-popover-foreground' },\n            { surface: 'muted', onSurface: 'muted-foreground', surfaceCls: 'bg-muted', onSurfaceCls: 'text-muted-foreground' },\n            { surface: 'accent', onSurface: 'accent-foreground', surfaceCls: 'bg-accent', onSurfaceCls: 'text-accent-foreground' },\n            { surface: 'sidebar', onSurface: 'sidebar-foreground', surfaceCls: 'bg-sidebar', onSurfaceCls: 'text-sidebar-foreground' },\n          ]}\n        />\n      ),\n      code: `<div className=\"bg-card text-card-foreground\" />`,\n    },\n    {\n      id: 'status',\n      title: 'status',\n      render: () => (\n        <RoleGrid\n          roles={['error', 'success', 'warning', 'info', 'neutral', 'pink'].map((status) => ({\n            surface: `status-${status}-bg`,\n            onSurface: `status-${status}-text`,\n            surfaceCls: `bg-status-${status}-bg`,\n            onSurfaceCls: `text-status-${status}-text`,\n            borderCls: `border-status-${status}-border`,\n          }))}\n        />\n      ),\n      code: `<span className=\"bg-status-error-bg text-status-error-text border-status-error-border\" />`,\n    },\n  ],\n}\n\nconst RADIUS_SCALE: Array<{ cls: string; label: string; px: string }> = [\n  { cls: 'rounded-none', label: 'rounded-none', px: '0px' },\n  { cls: 'rounded-sm', label: 'rounded-sm', px: '6px' },\n  { cls: 'rounded-md', label: 'rounded-md', px: '8px' },\n  { cls: 'rounded-lg', label: 'rounded-lg', px: '10px' },\n  { cls: 'rounded-xl', label: 'rounded-xl', px: '16px' },\n  { cls: 'rounded-full', label: 'rounded-full', px: '999px' },\n]\n\nfunction RadiusCard({ cls, label, px }: { cls: string; label: string; px: string }) {\n  const onCopy = React.useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(label)\n      flash(`${label} copied`, 'success')\n    } catch {\n      flash('Could not copy the class', 'error')\n    }\n  }, [label])\n  return (\n    <button\n      type=\"button\"\n      onClick={onCopy}\n      title={`Copy ${label}`}\n      className=\"flex w-36 flex-col items-start gap-2 rounded-md border border-border bg-background p-2 text-left transition-colors hover:bg-muted/40\"\n    >\n      <span aria-hidden className={`h-14 w-full border-2 border-dashed border-status-pink-icon bg-status-pink-bg ${cls}`} />\n      <span className=\"space-y-0.5\">\n        <code className=\"block text-xs text-foreground\">{label}</code>\n        <span className=\"block text-xs text-muted-foreground\">{px}</span>\n      </span>\n    </button>\n  )\n}\n\nconst radiusEntry: GalleryEntry = {\n  id: 'corner-radius',\n  title: 'Corner radius',\n  importPath: TOKENS_IMPORT,\n  keywords: ['radius', 'rounded', 'border-radius', 'corners'],\n  usage: {\n    do: [\n      'The scale derives from the --radius base token (10px): sm 6px, md 8px, lg 10px, xl 16px.',\n      'Cards and panels use rounded-lg; controls, chips and filter buttons use rounded-md.',\n      'rounded-full is reserved for Badge, Tag, SegmentedControl, Avatar and status dots.',\n    ],\n    dont: [\n      'No arbitrary values (rounded-[24px]) \u2014 pick from the scale.',\n      'No full-pill radii on filter chips or custom controls outside the reserved primitives.',\n    ],\n  },\n  variants: [\n    {\n      id: 'scale',\n      title: 'scale',\n      render: () => (\n        <div className=\"flex flex-wrap gap-2\">\n          {RADIUS_SCALE.map((item) => (\n            <RadiusCard key={item.cls} {...item} />\n          ))}\n        </div>\n      ),\n      code: `<div className=\"rounded-lg border border-border\" />`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  brandColorsEntry,\n  colorRolesEntry,\n  colorTokensEntry,\n  stateTokensEntry,\n  chartPaletteEntry,\n  radiusEntry,\n]\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport { ArrowRight, Circle } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport type { GalleryEntry } from '../types'\nimport { SourceColors, SourceGrids, SourceRadius, SourceShadows, SourceTypography } from '../demos/foundation-references'\n\n// Token names are proper nouns from the codebase and are deliberately not\n// translated. Structure mirrors the DS Figma color-system sheet (node\n// 553:14956): Brand Colors \u2192 Color Tokens by role \u2192 State Color Tokens.\n// Figma state names map to code tokens per the contract documented in\n// globals.css: state/{x}/base\u2192icon, /light\u2192border, /lighter\u2192bg.\n\nconst TOKENS_IMPORT = 'apps/mercato/src/app/globals.css'\nconst FIGMA_COLORS_NODE = '553:14956'\n\nfunction useCopyToken(copyText: string) {\n  const t = useT()\n  const onCopy = React.useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(copyText)\n      flash(t('design_system.gallery.tokenCopied', { token: copyText }), 'success')\n    } catch {\n      flash(t('design_system.gallery.tokenCopyFailed'), 'error')\n    }\n  }, [copyText, t])\n  return { onCopy, copyLabel: t('design_system.gallery.copyToken', { token: copyText }) }\n}\n\nfunction SwatchCard({ copyText, label, children }: { copyText: string; label: string; children: React.ReactNode }) {\n  const { onCopy, copyLabel } = useCopyToken(copyText)\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      onClick={onCopy}\n      className=\"h-auto w-44 max-w-full flex-col items-start gap-3 whitespace-normal border border-border bg-background p-3 text-left hover:bg-muted/50\"\n      title={copyLabel}\n      aria-label={copyLabel}\n    >\n      {children}\n      <code className=\"break-all text-xs text-muted-foreground\">{label}</code>\n    </Button>\n  )\n}\n\nfunction TokenSwatch({ tokenClass, label }: { tokenClass: string; label: string }) {\n  return (\n    <SwatchCard copyText={label} label={label}>\n      <span aria-hidden className={`h-20 w-full rounded-sm border border-border ${tokenClass}`} />\n    </SwatchCard>\n  )\n}\n\n// A text-color token shown in its actual role \u2014 as type, not as a fill.\nfunction TextSwatch({ textClass, label }: { textClass: string; label: string }) {\n  return (\n    <SwatchCard copyText={textClass} label={label}>\n      <span aria-hidden className=\"flex h-20 w-full items-center justify-center rounded-sm border border-border bg-background\">\n        <span className={`text-3xl font-medium leading-none ${textClass}`}>Aa</span>\n      </span>\n    </SwatchCard>\n  )\n}\n\n// A border-color token shown as a 2px outline on the neutral surface.\nfunction BorderSwatch({ borderClass, label }: { borderClass: string; label: string }) {\n  return (\n    <SwatchCard copyText={borderClass} label={label}>\n      <span aria-hidden className={`h-20 w-full rounded-sm border-2 bg-background ${borderClass}`} />\n    </SwatchCard>\n  )\n}\n\n// An icon-color token shown on a real glyph.\nfunction IconSwatch({ iconClass, label }: { iconClass: string; label: string }) {\n  return (\n    <SwatchCard copyText={iconClass} label={label}>\n      <span aria-hidden className=\"flex h-20 w-full items-center justify-center rounded-sm border border-border bg-background\">\n        <Circle className={`size-4 fill-current ${iconClass}`} />\n      </span>\n    </SwatchCard>\n  )\n}\n\nfunction SwatchRow({ items }: { items: Array<{ tokenClass: string; label: string }> }) {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      {items.map((item) => (\n        <TokenSwatch key={item.label} tokenClass={item.tokenClass} label={item.label} />\n      ))}\n    </div>\n  )\n}\n\nconst brandColorsEntry: GalleryEntry = {\n  id: 'brand-colors',\n  title: 'Brand colors',\n  importPath: TOKENS_IMPORT,\n  usage: {\n    do: ['Use the brand-violet 10/30/100 pattern (bg/border/text) for AI features and user-saved views.'],\n    dont: ['Do not substitute brand colors for semantic status tokens.', 'Do not repurpose accent-indigo \u2014 it is the selection-control contract.'],\n  },\n  figmaNodeId: FIGMA_COLORS_NODE,\n  variants: [\n    {\n      id: 'gradient',\n      title: 'gradient 135\u00B0',\n      render: () => (\n        <div className=\"space-y-2\">\n          <div\n            aria-hidden\n            className=\"h-32 w-full rounded-lg border border-border bg-linear-135 from-brand-lime from-0% via-brand-yellow via-35% to-brand-violet to-70%\"\n          />\n          <code className=\"text-xs text-muted-foreground\">brand-lime 0%, brand-yellow 35%, brand-violet 70%</code>\n        </div>\n      ),\n      code: `<div className=\"bg-linear-135 from-brand-lime from-0% via-brand-yellow via-35% to-brand-violet to-70%\" />`,\n    },\n    {\n      id: 'identity',\n      title: 'identity',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-brand-lime', label: 'brand-lime' },\n            { tokenClass: 'bg-brand-yellow', label: 'brand-yellow' },\n            { tokenClass: 'bg-brand-violet', label: 'brand-violet' },\n            { tokenClass: 'bg-brand-violet-foreground', label: 'brand-violet-foreground' },\n            { tokenClass: 'bg-accent-indigo', label: 'accent-indigo' },\n          ]}\n        />\n      ),\n      code: `<span className=\"bg-brand-violet/10 border-brand-violet/30 text-brand-violet\" />`,\n    },\n    {\n      id: 'social',\n      title: 'social',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-brand-apple', label: 'brand-apple' },\n            { tokenClass: 'bg-brand-github', label: 'brand-github' },\n            { tokenClass: 'bg-brand-facebook', label: 'brand-facebook' },\n            { tokenClass: 'bg-brand-dropbox', label: 'brand-dropbox' },\n            { tokenClass: 'bg-brand-linkedin', label: 'brand-linkedin' },\n            { tokenClass: 'bg-brand-x', label: 'brand-x' },\n          ]}\n        />\n      ),\n      code: `<SocialButton provider=\"github\" />`,\n    },\n  ],\n}\n\nconst colorTokensEntry: GalleryEntry = {\n  id: 'color-tokens',\n  title: 'Color tokens',\n  importPath: TOKENS_IMPORT,\n  usage: {\n    do: ['Pair every surface with its -foreground counterpart.', 'Borders come from border-border / border-input \u2014 nothing else.'],\n    dont: ['Never border-gray-* or any raw palette shade.'],\n  },\n  figmaNodeId: FIGMA_COLORS_NODE,\n  variants: [\n    {\n      id: 'source-palette',\n      title: 'Complete source palette',\n      render: () => <SourceColors />,\n      code: `import { SourceColors } from '@open-mercato/core/modules/design_system/gallery/demos/foundation-references'\n\n<SourceColors />`,\n    },\n    {\n      id: 'primary',\n      title: 'primary',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-primary', label: 'primary' },\n            { tokenClass: 'bg-primary-foreground', label: 'primary-foreground' },\n            { tokenClass: 'bg-primary-hover', label: 'primary-hover' },\n            { tokenClass: 'bg-destructive', label: 'destructive' },\n          ]}\n        />\n      ),\n      code: `<div className=\"bg-primary text-primary-foreground hover:bg-primary-hover\" />`,\n    },\n    {\n      id: 'background',\n      title: 'background (bg)',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-background', label: 'background' },\n            { tokenClass: 'bg-card', label: 'card' },\n            { tokenClass: 'bg-popover', label: 'popover' },\n            { tokenClass: 'bg-muted', label: 'muted' },\n            { tokenClass: 'bg-accent', label: 'accent' },\n            { tokenClass: 'bg-sidebar', label: 'sidebar' },\n            { tokenClass: 'bg-bg-disabled', label: 'bg-disabled' },\n          ]}\n        />\n      ),\n      code: `<div className=\"bg-card text-card-foreground\" />`,\n    },\n    {\n      id: 'text',\n      title: 'text',\n      render: () => (\n        <div className=\"flex flex-wrap gap-2\">\n          <TextSwatch textClass=\"text-foreground\" label=\"text-foreground\" />\n          <TextSwatch textClass=\"text-muted-foreground\" label=\"text-muted-foreground\" />\n          <TextSwatch textClass=\"text-card-foreground\" label=\"text-card-foreground\" />\n          <TextSwatch textClass=\"text-accent-foreground\" label=\"text-accent-foreground\" />\n          <TextSwatch textClass=\"text-text-disabled\" label=\"text-text-disabled\" />\n        </div>\n      ),\n      code: `<p className=\"text-muted-foreground\">{t('design_system.gallery.samples.typeBody')}</p>`,\n    },\n    {\n      id: 'stroke',\n      title: 'stroke',\n      render: () => (\n        <div className=\"flex flex-wrap gap-2\">\n          <BorderSwatch borderClass=\"border-border\" label=\"border-border\" />\n          <BorderSwatch borderClass=\"border-input\" label=\"border-input\" />\n          <BorderSwatch borderClass=\"border-ring\" label=\"border-ring\" />\n          <BorderSwatch borderClass=\"border-border-disabled\" label=\"border-border-disabled\" />\n        </div>\n      ),\n      code: `<div className=\"border-border focus-visible:ring-ring\" />`,\n    },\n  ],\n}\n\n// Literal class strings on purpose: the Tailwind scanner only sees complete\n// literals, so `bg-status-${x}` variants would silently never be generated.\ntype StatusFamily = {\n  figma: string\n  status: string\n  chipLabel: string\n  bg: string\n  text: string\n  border: string\n  icon: string\n  dot: string\n}\n\nconst FIGMA_STATE_TO_CODE: StatusFamily[] = [\n  { figma: 'Faded', status: 'neutral', chipLabel: 'Neutral', bg: 'bg-status-neutral-bg', text: 'text-status-neutral-text', border: 'border-status-neutral-border', icon: 'text-status-neutral-icon', dot: 'bg-status-neutral-icon' },\n  { figma: 'Information', status: 'info', chipLabel: 'Info', bg: 'bg-status-info-bg', text: 'text-status-info-text', border: 'border-status-info-border', icon: 'text-status-info-icon', dot: 'bg-status-info-icon' },\n  { figma: 'Warning', status: 'warning', chipLabel: 'Warning', bg: 'bg-status-warning-bg', text: 'text-status-warning-text', border: 'border-status-warning-border', icon: 'text-status-warning-icon', dot: 'bg-status-warning-icon' },\n  { figma: 'Error', status: 'error', chipLabel: 'Error', bg: 'bg-status-error-bg', text: 'text-status-error-text', border: 'border-status-error-border', icon: 'text-status-error-icon', dot: 'bg-status-error-icon' },\n  { figma: 'Success', status: 'success', chipLabel: 'Success', bg: 'bg-status-success-bg', text: 'text-status-success-text', border: 'border-status-success-border', icon: 'text-status-success-icon', dot: 'bg-status-success-icon' },\n  { figma: 'Highlighted', status: 'pink', chipLabel: 'Highlighted', bg: 'bg-status-pink-bg', text: 'text-status-pink-text', border: 'border-status-pink-border', icon: 'text-status-pink-icon', dot: 'bg-status-pink-icon' },\n]\n\n// One status family: the composed chip first (how the roles work together),\n// then each token presented in its actual role.\nfunction StatusFamilyPreview({ family }: { family: StatusFamily }) {\n  return (\n    <div className=\"space-y-3\">\n      <span\n        className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-sm font-medium ${family.bg} ${family.text} ${family.border}`}\n      >\n        <span aria-hidden className={`size-2 rounded-full ${family.dot}`} />\n        {family.chipLabel}\n      </span>\n      <div className=\"flex flex-wrap gap-2\">\n        <TokenSwatch tokenClass={family.bg} label={family.bg} />\n        <TextSwatch textClass={family.text} label={family.text} />\n        <BorderSwatch borderClass={family.border} label={family.border} />\n        <IconSwatch iconClass={family.icon} label={family.icon} />\n      </div>\n    </div>\n  )\n}\n\nfunction FeatureStatePreview() {\n  const t = useT()\n  return (\n    <Alert status=\"feature\" className=\"max-w-md\">\n      <AlertDescription>{t('design_system.gallery.samples.featureState')}</AlertDescription>\n    </Alert>\n  )\n}\n\nconst stateTokensEntry: GalleryEntry = {\n  id: 'state-tokens',\n  title: 'State color tokens',\n  importPath: TOKENS_IMPORT,\n  usage: {\n    do: [\n      'Pair -bg with -text of the same family \u2014 the shades are contrast-tested together.',\n      '-icon for glyphs and dots, -border for outlines; both handle dark mode themselves.',\n      'Alert status=\"feature\" uses the neutral token family; brand-violet is reserved for AI and saved-view accents.',\n    ],\n    dont: [\n      'Never hardcode Tailwind status colors (text-red-*, bg-green-*, text-amber-*).',\n      'No dark: overrides on status tokens \u2014 they already theme.',\n    ],\n  },\n  figmaNodeId: FIGMA_COLORS_NODE,\n  variants: [\n    ...FIGMA_STATE_TO_CODE.map((family) => ({\n      id: family.status,\n      title: `${family.figma} \u2192 status-${family.status}`,\n      render: () => <StatusFamilyPreview family={family} />,\n      code: `<span className=\"${family.bg} ${family.text} ${family.border}\" />`,\n    })),\n    {\n      id: 'feature',\n      title: 'Feature \u2192 status-neutral',\n      render: () => <FeatureStatePreview />,\n      code: `import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\n\n<Alert status=\"feature\" className=\"max-w-md\">\n  <AlertDescription>{t('design_system.gallery.samples.featureState')}</AlertDescription>\n</Alert>`,\n    },\n  ],\n}\n\nconst chartPaletteEntry: GalleryEntry = {\n  id: 'chart-palette',\n  title: 'Chart palette',\n  importPath: TOKENS_IMPORT,\n  usage: {\n    dont: [\n      'Never build token class names dynamically (`bg-chart-${n}`) \u2014 the Tailwind scanner only sees complete literals, so the class is silently never generated.',\n    ],\n  },\n  variants: [\n    {\n      id: 'numbered',\n      title: 'numbered',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-chart-1', label: 'chart-1' },\n            { tokenClass: 'bg-chart-2', label: 'chart-2' },\n            { tokenClass: 'bg-chart-3', label: 'chart-3' },\n            { tokenClass: 'bg-chart-4', label: 'chart-4' },\n            { tokenClass: 'bg-chart-5', label: 'chart-5' },\n          ]}\n        />\n      ),\n      code: `<BarChart data={data} />`,\n    },\n    {\n      id: 'named',\n      title: 'named',\n      render: () => (\n        <SwatchRow\n          items={[\n            { tokenClass: 'bg-chart-blue', label: 'chart-blue' },\n            { tokenClass: 'bg-chart-emerald', label: 'chart-emerald' },\n            { tokenClass: 'bg-chart-amber', label: 'chart-amber' },\n            { tokenClass: 'bg-chart-rose', label: 'chart-rose' },\n            { tokenClass: 'bg-chart-violet', label: 'chart-violet' },\n            { tokenClass: 'bg-chart-cyan', label: 'chart-cyan' },\n            { tokenClass: 'bg-chart-indigo', label: 'chart-indigo' },\n            { tokenClass: 'bg-chart-pink', label: 'chart-pink' },\n            { tokenClass: 'bg-chart-teal', label: 'chart-teal' },\n            { tokenClass: 'bg-chart-orange', label: 'chart-orange' },\n          ]}\n        />\n      ),\n      code: `<Sparkline className=\"text-chart-blue\" data={points} />`,\n    },\n  ],\n}\n\ntype ColorRole = {\n  surface: string\n  onSurface: string\n  surfaceCls: string\n  onSurfaceCls: string\n  borderCls?: string\n}\n\nfunction RoleCard({ role }: { role: ColorRole }) {\n  const { onCopy, copyLabel } = useCopyToken(`${role.surfaceCls} ${role.onSurfaceCls}`)\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      onClick={onCopy}\n      title={copyLabel}\n      aria-label={copyLabel}\n      className=\"h-auto w-full whitespace-normal p-0 text-left transition-opacity hover:bg-transparent hover:opacity-90\"\n    >\n      <span className={`flex h-36 w-full flex-col items-start justify-between rounded-lg border p-4 ${role.surfaceCls} ${role.onSurfaceCls} ${role.borderCls ?? 'border-border'}`}>\n        <span className=\"text-base font-medium leading-tight\">{role.surface}</span>\n        <code className=\"text-xs opacity-80\">{role.onSurface}</code>\n      </span>\n    </Button>\n  )\n}\n\nfunction RoleGrid({ roles }: { roles: ColorRole[] }) {\n  return (\n    <div className=\"grid w-full gap-4 sm:grid-cols-2 xl:grid-cols-3\">\n      {roles.map((role) => (\n        <RoleCard key={role.surface + role.onSurface} role={role} />\n      ))}\n    </div>\n  )\n}\n\nconst colorRolesEntry: GalleryEntry = {\n  id: 'color-roles',\n  title: 'Color roles',\n  importPath: TOKENS_IMPORT,\n  figmaNodeId: FIGMA_COLORS_NODE,\n  keywords: ['roles', 'pairs', 'on-color', 'material'],\n  usage: {\n    do: [\n      'A role is a surface paired with its content color \u2014 always use them together, never mix pairs.',\n      'Click a card to copy both classes of the pair.',\n    ],\n    dont: [\n      'Never put foreground on a surface from a different pair \u2014 contrast is only tested within a pair.',\n      'Never use a -foreground token as a standalone accent color.',\n    ],\n  },\n  variants: [\n    {\n      id: 'action',\n      title: 'action',\n      render: () => (\n        <RoleGrid\n          roles={[\n            { surface: 'primary', onSurface: 'primary-foreground', surfaceCls: 'bg-primary', onSurfaceCls: 'text-primary-foreground' },\n            { surface: 'destructive', onSurface: 'white', surfaceCls: 'bg-destructive', onSurfaceCls: 'text-white' },\n            { surface: 'brand-violet', onSurface: 'brand-violet-foreground', surfaceCls: 'bg-brand-violet', onSurfaceCls: 'text-brand-violet-foreground' },\n            { surface: 'accent-indigo', onSurface: 'accent-indigo-foreground', surfaceCls: 'bg-accent-indigo', onSurfaceCls: 'text-accent-indigo-foreground' },\n          ]}\n        />\n      ),\n      code: `import { Button } from '@open-mercato/ui/primitives/button'\n\n<Button type=\"button\">{t('design_system.gallery.samples.primaryAction')}</Button>`,\n    },\n    {\n      id: 'surfaces',\n      title: 'surfaces',\n      render: () => (\n        <RoleGrid\n          roles={[\n            { surface: 'background', onSurface: 'foreground', surfaceCls: 'bg-background', onSurfaceCls: 'text-foreground' },\n            { surface: 'card', onSurface: 'card-foreground', surfaceCls: 'bg-card', onSurfaceCls: 'text-card-foreground' },\n            { surface: 'popover', onSurface: 'popover-foreground', surfaceCls: 'bg-popover', onSurfaceCls: 'text-popover-foreground' },\n            { surface: 'muted', onSurface: 'muted-foreground', surfaceCls: 'bg-muted', onSurfaceCls: 'text-muted-foreground' },\n            { surface: 'accent', onSurface: 'accent-foreground', surfaceCls: 'bg-accent', onSurfaceCls: 'text-accent-foreground' },\n            { surface: 'sidebar', onSurface: 'sidebar-foreground', surfaceCls: 'bg-sidebar', onSurfaceCls: 'text-sidebar-foreground' },\n          ]}\n        />\n      ),\n      code: `<div className=\"bg-card text-card-foreground\" />`,\n    },\n    {\n      id: 'status',\n      title: 'status',\n      render: () => (\n        <RoleGrid\n          roles={FIGMA_STATE_TO_CODE.map((family) => ({\n            surface: `status-${family.status}-bg`,\n            onSurface: `status-${family.status}-text`,\n            surfaceCls: family.bg,\n            onSurfaceCls: family.text,\n            borderCls: family.border,\n          }))}\n        />\n      ),\n      code: `<span className=\"bg-status-error-bg text-status-error-text border-status-error-border\" />`,\n    },\n  ],\n}\n\nconst RADIUS_SCALE: Array<{ cls: string; label: string; px: string }> = [\n  { cls: 'rounded-none', label: 'rounded-none', px: '0px' },\n  { cls: 'rounded-sm', label: 'rounded-sm', px: '6px' },\n  { cls: 'rounded-md', label: 'rounded-md', px: '8px' },\n  { cls: 'rounded-lg', label: 'rounded-lg', px: '10px' },\n  { cls: 'rounded-xl', label: 'rounded-xl', px: '16px' },\n  { cls: 'rounded-full', label: 'rounded-full', px: '999px' },\n]\n\nfunction RadiusCard({ cls, label, px }: { cls: string; label: string; px: string }) {\n  const { onCopy, copyLabel } = useCopyToken(label)\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      onClick={onCopy}\n      title={copyLabel}\n      aria-label={copyLabel}\n      className=\"h-auto w-36 flex-col items-start gap-2 border border-border bg-background p-2 text-left hover:bg-muted/50\"\n    >\n      <span aria-hidden className={`h-14 w-full border-2 border-dashed border-status-pink-icon bg-status-pink-bg ${cls}`} />\n      <span className=\"space-y-0.5\">\n        <code className=\"block text-xs text-foreground\">{label}</code>\n        <span className=\"block text-xs text-muted-foreground\">{px}</span>\n      </span>\n    </Button>\n  )\n}\n\nconst radiusEntry: GalleryEntry = {\n  id: 'corner-radius',\n  title: 'Corner radius',\n  importPath: TOKENS_IMPORT,\n  figmaNodeId: '553:14961',\n  keywords: ['radius', 'rounded', 'border-radius', 'corners'],\n  usage: {\n    do: [\n      'The scale derives from the --radius base token (10px): sm 6px, md 8px, lg 10px, xl 16px.',\n      'Cards and panels use rounded-lg; controls, chips and filter buttons use rounded-md.',\n      'rounded-full is reserved for Badge, Tag, SegmentedControl, Avatar and status dots.',\n    ],\n    dont: [\n      'No arbitrary values (rounded-[24px]) \u2014 pick from the scale.',\n      'No full-pill radii on filter chips or custom controls outside the reserved primitives.',\n    ],\n  },\n  variants: [\n    {\n      id: 'source-radius',\n      title: 'Complete radius scale',\n      render: () => <SourceRadius />,\n      code: `import { SourceRadius } from '@open-mercato/core/modules/design_system/gallery/demos/foundation-references'\n\n<SourceRadius />`,\n    },\n    {\n      id: 'scale',\n      title: 'scale',\n      render: () => (\n        <div className=\"flex flex-wrap gap-2\">\n          {RADIUS_SCALE.map((item) => (\n            <RadiusCard key={item.cls} {...item} />\n          ))}\n        </div>\n      ),\n      code: `<div className=\"rounded-lg border border-border\" />`,\n    },\n  ],\n}\n\nconst TYPOGRAPHY_ROLES = [\n  { id: 'page', className: 'text-2xl font-bold tracking-tight', metrics: '24 / 32 px' },\n  { id: 'section', className: 'text-xl font-semibold', metrics: '20 / 28 px' },\n  { id: 'body', className: 'text-sm', metrics: '14 / 20 px' },\n  { id: 'label', className: 'text-sm font-medium', metrics: '14 / 20 px' },\n  { id: 'helper', className: 'text-xs text-muted-foreground', metrics: '12 / 16 px' },\n] as const\n\nfunction TypographyRolesPreview() {\n  const t = useT()\n  return <div className=\"space-y-6\">\n    <p className=\"max-w-3xl text-sm leading-relaxed text-muted-foreground\">{t('design_system.foundations.typography.guide.intro')}</p>\n    <div className=\"divide-y divide-border border-y border-border\">\n      {TYPOGRAPHY_ROLES.map(role => <article key={role.id} className=\"grid min-w-0 gap-4 py-6 md:grid-cols-3 md:gap-8\" data-typography-role={role.id}>\n        <div className=\"space-y-2\">\n          <h4 className=\"text-sm font-medium\">{t(`design_system.foundations.typography.guide.${role.id}.title`)}</h4>\n          <p className=\"text-xs text-muted-foreground\">{role.metrics}</p>\n        </div>\n        <div className=\"min-w-0 space-y-3 md:col-span-2\">\n          <p className={`${role.className} break-words`}>{t(`design_system.foundations.typography.guide.${role.id}.example`)}</p>\n          <p className=\"max-w-prose text-sm leading-relaxed text-muted-foreground\">{t(`design_system.foundations.typography.guide.${role.id}.usage`)}</p>\n        </div>\n      </article>)}\n    </div>\n    <p className=\"max-w-3xl text-sm leading-relaxed text-muted-foreground\">{t('design_system.foundations.typography.guide.fonts')}</p>\n  </div>\n}\n\nfunction TypographyReferencePreview() {\n  const t = useT()\n  return <section className=\"rounded-lg border border-border\">\n    <h3 className=\"p-4 text-sm font-medium\">{t('design_system.foundations.typography.guide.reference')}</h3>\n    <div className=\"space-y-8 border-t border-border p-4 sm:p-6\">\n      <div className=\"space-y-3\">\n        <h4 className=\"text-sm font-medium\">{t('design_system.foundations.typography.guide.classes')}</h4>\n        <dl className=\"divide-y divide-border\">\n          {TYPOGRAPHY_ROLES.map(role => <div key={role.id} className=\"flex flex-wrap justify-between gap-2 py-3 text-sm\">\n            <dt>{t(`design_system.foundations.typography.guide.${role.id}.title`)}</dt>\n            <dd><code className=\"break-words text-xs text-muted-foreground\">{role.className}</code></dd>\n          </div>)}\n        </dl>\n      </div>\n      <SourceTypography />\n    </div>\n  </section>\n}\n\nconst typographyEntry: GalleryEntry = {\n  id: 'typography',\n  title: 'Typography',\n  importPath: TOKENS_IMPORT,\n  figmaNodeId: '553:14957',\n  keywords: ['font', 'type', 'heading', 'body', 'line-height', 'Geist', 'Inter'],\n  usage: {\n    do: [\n      'Use font-sans for the interface and font-mono for code and identifiers. Both resolve through the host application font tokens, with system fallbacks in globals.css.',\n      'Use text-2xl for backend page titles and text-sm for body text. Scale measurements assume a 16px root font size.',\n      'The Figma reference uses Inter / Inter Display; these specimens show the shipped font tokens rather than claiming font parity.',\n    ],\n    dont: ['Do not copy marketing display sizes into dense backend pages.', 'Do not set inline font families or arbitrary text sizes.'],\n  },\n  variants: [\n    {\n      id: 'roles',\n      title: 'Text hierarchy',\n      render: () => <TypographyRolesPreview />,\n      code: `import { Label } from '@open-mercato/ui/primitives/label'\nimport { Input } from '@open-mercato/ui/primitives/input'\n\n<h1 className=\"text-2xl font-bold tracking-tight\">{t('design_system.foundations.typography.guide.page.example')}</h1>\n<h2 className=\"text-xl font-semibold\">{t('design_system.foundations.typography.guide.section.example')}</h2>\n<p className=\"text-sm\">{t('design_system.foundations.typography.guide.body.example')}</p>\n<Label htmlFor=\"name\">{t('design_system.foundations.typography.guide.label.example')}</Label>\n<Input id=\"name\" aria-describedby=\"name-hint\" />\n<p id=\"name-hint\" className=\"text-xs text-muted-foreground\">{t('design_system.foundations.typography.guide.helper.example')}</p>`,\n    },\n    {\n      id: 'source-typography',\n      title: 'Complete typography scale',\n      render: () => <TypographyReferencePreview />,\n      code: `import { SourceTypography } from '@open-mercato/core/modules/design_system/gallery/demos/foundation-references'\n\n<SourceTypography />`,\n    },\n  ],\n}\n\nconst SPACING_SCALE = [\n  { token: '1', className: 'w-1', pixels: 4 },\n  { token: '2', className: 'w-2', pixels: 8 },\n  { token: '3', className: 'w-3', pixels: 12 },\n  { token: '4', className: 'w-4', pixels: 16 },\n  { token: '6', className: 'w-6', pixels: 24 },\n  { token: '8', className: 'w-8', pixels: 32 },\n  { token: '12', className: 'w-12', pixels: 48 },\n]\n\nfunction SpacingScalePreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full space-y-6\">\n      <p className=\"text-sm text-muted-foreground\">{t('design_system.foundations.spacing.scaleHint')}</p>\n      {SPACING_SCALE.map((item) => (\n        <div key={item.token} className=\"flex items-center gap-4 py-2\">\n          <code className=\"w-12 shrink-0 text-sm text-muted-foreground\">p-{item.token}</code>\n          <div className=\"min-w-0 flex-1\"><span aria-hidden className=\"block h-8 rounded-sm border-l-4 border-primary bg-muted\" style={{ width: `${item.pixels / 48 * 100}%` }} /></div>\n          <span className=\"w-28 shrink-0 font-mono text-xs\"><span>{item.pixels / 16} rem</span><span className=\"ml-3 text-muted-foreground\">{item.pixels} px</span></span>\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction SpacingRhythmPreview() {\n  return (\n    <div className=\"grid w-full gap-6 md:grid-cols-2\">\n      {[\n        { padding: 'p-4', gap: 'gap-2' },\n        { padding: 'p-6', gap: 'gap-4' },\n      ].map((item) => (\n        <div key={item.padding} className={`space-y-4 rounded-lg border border-border bg-muted/30 ${item.padding}`}>\n          <code className=\"text-xs text-muted-foreground\">{item.padding} / {item.gap}</code>\n          <div aria-hidden className={`flex ${item.gap}`}>\n            <span className=\"h-12 flex-1 rounded-md border border-border bg-background\" />\n            <span className=\"h-12 flex-1 rounded-md border border-border bg-background\" />\n            <span className=\"h-12 flex-1 rounded-md border border-border bg-background\" />\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n\nconst spacingEntry: GalleryEntry = {\n  id: 'spacing',\n  title: 'Spacing',\n  importPath: TOKENS_IMPORT,\n  figmaNodeId: '553:14958',\n  keywords: ['padding', 'gap', 'margin', 'grid', 'rhythm'],\n  usage: {\n    do: ['Use the 4px spacing grid. Start with gap-2 between controls, p-4 within containers and p-6 for larger panels.'],\n    dont: ['Do not invent arbitrary spacing values or compensate for layout problems with negative margins.'],\n  },\n  variants: [\n    {\n      id: 'source-grids',\n      title: 'Layout grids',\n      render: () => <SourceGrids />,\n      code: `import { SourceGrids } from '@open-mercato/core/modules/design_system/gallery/demos/foundation-references'\n\n<SourceGrids />`,\n    },\n    {\n      id: 'scale',\n      title: 'Spacing scale',\n      render: () => <SpacingScalePreview />,\n      code: `<div className=\"flex gap-2 p-4\">{children}</div>\n<section className=\"space-y-6 p-6\">{children}</section>`,\n    },\n    {\n      id: 'rhythm',\n      title: 'Container rhythm',\n      render: () => <SpacingRhythmPreview />,\n      code: `<div className=\"p-4\">\n  <div className=\"flex gap-2\">{children}</div>\n</div>\n<div className=\"p-6\">\n  <div className=\"flex gap-4\">{children}</div>\n</div>`,\n    },\n  ],\n}\n\nconst SHADOW_SCALE = ['shadow-none', 'shadow-xs', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-2xl']\n\nfunction ShadowScalePreview() {\n  return (\n    <div className=\"grid w-full grid-cols-2 gap-6 p-4 md:grid-cols-3 lg:grid-cols-4\">\n      {SHADOW_SCALE.map((className) => (\n        <div key={className} className={`flex h-24 items-center justify-center rounded-lg border border-border bg-card p-4 ${className}`}>\n          <code className=\"text-xs text-card-foreground\">{className}</code>\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction FocusPreview() {\n  const t = useT()\n  return (\n    <div className=\"space-y-4 p-2\">\n      <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.focusHint')}</p>\n      <div className=\"flex flex-wrap items-center gap-6\">\n        <Button type=\"button\" variant=\"outline\">{t('design_system.gallery.samples.focusAction')}</Button>\n        <span aria-hidden className=\"rounded-md border border-border bg-background px-4 py-2 text-sm shadow-focus\">shadow-focus</span>\n      </div>\n    </div>\n  )\n}\n\nconst shadowsEntry: GalleryEntry = {\n  id: 'shadows',\n  title: 'Shadows & focus',\n  importPath: TOKENS_IMPORT,\n  figmaNodeId: '553:14959',\n  keywords: ['elevation', 'depth', 'focus', 'keyboard'],\n  usage: {\n    do: ['Use shadow-xs for controls, shadow-sm for cards and higher elevations for overlays.', 'Keep the visible keyboard focus supplied by DS primitives. Shadow tokens adapt to the active theme.'],\n    dont: ['Do not draw custom colored glows or arbitrary box shadows.', 'Do not remove focus feedback without an equivalent visible indicator.'],\n  },\n  variants: [\n    {\n      id: 'source-shadows',\n      title: 'Complete shadow collection',\n      render: () => <SourceShadows />,\n      code: `import { SourceShadows } from '@open-mercato/core/modules/design_system/gallery/demos/foundation-references'\n\n<SourceShadows />`,\n    },\n    {\n      id: 'elevation',\n      title: 'Elevation scale',\n      render: () => <ShadowScalePreview />,\n      code: `<div className=\"rounded-lg border border-border bg-card p-4 shadow-sm\">{children}</div>\n<div className=\"rounded-lg border border-border bg-popover p-4 shadow-lg\">{children}</div>`,\n    },\n    {\n      id: 'focus',\n      title: 'Keyboard focus',\n      render: () => <FocusPreview />,\n      code: `import { Button } from '@open-mercato/ui/primitives/button'\n\n<Button type=\"button\" variant=\"outline\">{t('design_system.gallery.samples.focusAction')}</Button>`,\n    },\n  ],\n}\n\nfunction MotionPreview() {\n  const t = useT()\n  const [active, setActive] = React.useState(false)\n  return (\n    <div className=\"w-full space-y-4\">\n      <Button type=\"button\" variant=\"outline\" aria-pressed={active} onClick={() => setActive((value) => !value)}>\n        {t('design_system.gallery.samples.toggleMotion')}\n      </Button>\n      <div className=\"grid gap-4 md:grid-cols-3\">\n        <div className=\"space-y-3 rounded-lg border border-border p-4\">\n          <code className=\"text-xs text-muted-foreground\">transition-colors / 150 ms</code>\n          <div aria-hidden className={`h-12 rounded-md transition-colors duration-150 motion-reduce:transition-none ${active ? 'bg-primary' : 'bg-muted'}`} />\n        </div>\n        <div className=\"space-y-3 rounded-lg border border-border p-4\">\n          <code className=\"text-xs text-muted-foreground\">transition-opacity / 200 ms</code>\n          <div aria-hidden className={`h-12 rounded-md bg-primary transition-opacity duration-200 ease-out motion-reduce:transition-none ${active ? 'opacity-100' : 'opacity-30'}`} />\n        </div>\n        <div className=\"space-y-3 rounded-lg border border-border p-4\">\n          <code className=\"text-xs text-muted-foreground\">transition-transform / 300 ms</code>\n          <div aria-hidden className=\"flex h-12 items-center\">\n            <ArrowRight className={`size-6 text-foreground transition-transform duration-300 ease-out motion-reduce:transition-none ${active ? 'translate-x-8' : 'translate-x-0'}`} />\n          </div>\n        </div>\n        <div className=\"space-y-3 rounded-lg border border-border p-4\">\n          <code className=\"text-xs text-muted-foreground\">transition-opacity / 400 ms</code>\n          <div aria-hidden className={`h-12 rounded-md bg-primary transition-opacity duration-400 ease-out motion-reduce:transition-none ${active ? 'opacity-100' : 'opacity-30'}`} />\n        </div>\n        <div className=\"space-y-3 rounded-lg border border-border p-4\">\n          <code className=\"text-xs text-muted-foreground\">transition-opacity / 500 ms</code>\n          <div aria-hidden className={`h-12 rounded-md bg-primary transition-opacity duration-500 ease-out motion-reduce:transition-none ${active ? 'opacity-100' : 'opacity-30'}`} />\n        </div>\n      </div>\n      <p className=\"text-xs text-muted-foreground\">{t('design_system.gallery.samples.reducedMotion')}</p>\n    </div>\n  )\n}\n\nconst motionEntry: GalleryEntry = {\n  id: 'motion',\n  title: 'Motion',\n  importPath: TOKENS_IMPORT,\n  figmaNodeId: '553:14960',\n  keywords: ['animation', 'transition', 'duration', 'reduced-motion'],\n  usage: {\n    do: ['The Figma duration scale is 150, 200, 300, 400 and 500ms; choose timing according to content size and travel distance.', 'Name the changing property and respect reduced-motion preferences.'],\n    dont: ['Do not use animation as the only feedback for a state change.', 'Do not use transition-all when only one property changes.'],\n  },\n  variants: [\n    {\n      id: 'durations',\n      title: 'Interactive duration scale',\n      render: () => <MotionPreview />,\n      code: `import * as React from 'react'\nimport { ArrowRight } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\nconst [active, setActive] = React.useState(false)\n\n<Button type=\"button\" variant=\"outline\" aria-pressed={active} onClick={() => setActive((value) => !value)}>\n  {t('design_system.gallery.samples.toggleMotion')}\n</Button>\n<div aria-hidden className={['h-12 rounded-md transition-colors duration-150 motion-reduce:transition-none', active ? 'bg-primary' : 'bg-muted'].join(' ')} />\n<div aria-hidden className={['h-12 rounded-md bg-primary transition-opacity duration-200 ease-out motion-reduce:transition-none', active ? 'opacity-100' : 'opacity-30'].join(' ')} />\n<ArrowRight aria-hidden className={['size-6 transition-transform duration-300 ease-out motion-reduce:transition-none', active ? 'translate-x-8' : 'translate-x-0'].join(' ')} />\n<div aria-hidden className={['h-12 rounded-md bg-primary transition-opacity duration-400 ease-out motion-reduce:transition-none', active ? 'opacity-100' : 'opacity-30'].join(' ')} />\n<div aria-hidden className={['h-12 rounded-md bg-primary transition-opacity duration-500 ease-out motion-reduce:transition-none', active ? 'opacity-100' : 'opacity-30'].join(' ')} />`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  brandColorsEntry,\n  colorRolesEntry,\n  colorTokensEntry,\n  stateTokensEntry,\n  chartPaletteEntry,\n  radiusEntry,\n  typographyEntry,\n  spacingEntry,\n  shadowsEntry,\n  motionEntry,\n]\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,96 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { SourceIconCatalogue, sourceIconCatalogueCode } from "../demos/source-icons.js";
+import { SourceArtworkCatalogue, sourceArtworkCode } from "../demos/source-artwork.js";
+import { IconGrid } from "../demos/registered-icons.js";
 import { LUCIDE_ICON_REGISTRY } from "@open-mercato/ui/backend/icons/lucideRegistry";
-import { SearchInput } from "@open-mercato/ui/primitives/search-input";
-import {
-  Popover,
-  PopoverClose,
-  PopoverContent,
-  PopoverTrigger
-} from "@open-mercato/ui/primitives/popover";
-import { flash } from "@open-mercato/ui/backend/FlashMessages";
 const FIGMA_ICONS_NODE = "2716:25504";
-function pascalCase(registryName) {
-  return registryName.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
-}
-function IconTile({ name }) {
-  const t = useT();
-  const Icon = LUCIDE_ICON_REGISTRY[name];
-  const jsxSnippet = `<${pascalCase(name)} aria-hidden className="size-4" />`;
-  const copy = React.useCallback(async (payload) => {
-    try {
-      await navigator.clipboard.writeText(payload);
-      flash(t("design_system.gallery.iconCopied", "Copied: {snippet}", { snippet: payload }), "success");
-    } catch {
-      flash(t("design_system.gallery.copyFailed", "Could not copy the snippet"), "error");
-    }
-  }, [t]);
-  return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "flex flex-col items-center gap-1.5 rounded-md border border-transparent p-2 transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:shadow-focus",
-        children: [
-          /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-5 text-foreground", strokeWidth: 1.75 }),
-          /* @__PURE__ */ jsx("code", { className: "max-w-full truncate text-[10px] leading-tight text-muted-foreground", children: name })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { align: "center", className: "w-auto max-w-xs p-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => copy(name),
-          className: "flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: t("design_system.gallery.iconCopyMeta", "Copy name for page.meta icon") }),
-            /* @__PURE__ */ jsx("code", { className: "text-[11px] text-muted-foreground", children: name })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => copy(jsxSnippet),
-          className: "flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: t("design_system.gallery.iconCopyJsx", "Copy JSX (lucide-react)") }),
-            /* @__PURE__ */ jsx("code", { className: "max-w-full truncate text-[11px] text-muted-foreground", children: jsxSnippet })
-          ]
-        }
-      ) })
-    ] }) })
-  ] });
-}
-function IconGrid() {
-  const t = useT();
-  const [query, setQuery] = React.useState("");
-  const names = React.useMemo(() => Object.keys(LUCIDE_ICON_REGISTRY).sort((a, b) => a.localeCompare(b)), []);
-  const needle = query.trim().toLowerCase();
-  const visible = needle ? names.filter((name) => name.toLowerCase().includes(needle)) : names;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "max-w-sm flex-1", children: /* @__PURE__ */ jsx(
-        SearchInput,
-        {
-          value: query,
-          onChange: setQuery,
-          placeholder: t("design_system.gallery.iconSearchPlaceholder", "Filter icons\u2026"),
-          "aria-label": t("design_system.gallery.iconSearchPlaceholder", "Filter icons\u2026")
-        }
-      ) }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: needle ? t("design_system.gallery.iconCountFiltered", "{visible} of {total} icons", {
-        visible: visible.length,
-        total: names.length
-      }) : t("design_system.gallery.iconCountAll", "{total} icons", { total: names.length }) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-1 sm:grid-cols-6 lg:grid-cols-8", children: visible.map((name) => /* @__PURE__ */ jsx(IconTile, { name }, name)) })
-  ] });
-}
 const iconRegistryEntry = {
   id: "icon-registry",
   title: "Icon registry",
@@ -133,7 +46,32 @@ const iconRegistryEntry = {
     }
   ]
 };
-const entries = [iconRegistryEntry];
+const sourceIconsEntry = {
+  id: "source-icons",
+  title: "Source icon library",
+  importPath: "@open-mercato/ui/assets/source-icons",
+  figmaNodeId: "199678:19375",
+  descriptionKey: "design_system.entries.sourceIcons.description",
+  variants: [
+    { id: "catalogue", title: "All 1667 source icons / search and copy", render: () => /* @__PURE__ */ jsx(SourceIconCatalogue, {}), code: sourceIconCatalogueCode }
+  ]
+};
+const sourceArtworkEntry = {
+  id: "source-artwork",
+  title: "Source artwork library",
+  importPath: "@open-mercato/ui/assets/source-artwork",
+  figmaNodeId: "2771:1469",
+  descriptionKey: "design_system.gallery.sourceArtwork.description",
+  variants: [
+    { id: "brands", title: "Brands / 439 original logos and styles", render: () => /* @__PURE__ */ jsx(SourceArtworkCatalogue, { group: "brand" }), code: sourceArtworkCode("brand") },
+    { id: "flags", title: "Country flags / 263 original assets", render: () => /* @__PURE__ */ jsx(SourceArtworkCatalogue, { group: "country-flags" }), code: sourceArtworkCode("country-flags") },
+    { id: "emoji", title: "Emoji / 607 original assets", render: () => /* @__PURE__ */ jsx(SourceArtworkCatalogue, { group: "emojies" }), code: sourceArtworkCode("emojies") },
+    { id: "store-badges", title: "Store badges / 16 original variants", render: () => /* @__PURE__ */ jsx(SourceArtworkCatalogue, { group: "appstore-badges" }), code: sourceArtworkCode("appstore-badges") },
+    { id: "thumbnails", title: "Thumbnails / 78 component and landing illustrations", render: () => /* @__PURE__ */ jsx(SourceArtworkCatalogue, { group: "thumbnails" }), code: sourceArtworkCode("thumbnails") },
+    { id: "cursors", title: "Cursors / 10 original assets", render: () => /* @__PURE__ */ jsx(SourceArtworkCatalogue, { group: "others" }), code: sourceArtworkCode("others") }
+  ]
+};
+const entries = [iconRegistryEntry, sourceIconsEntry, sourceArtworkEntry];
 export {
   entries
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/design_system/gallery/entries/icons.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LUCIDE_ICON_REGISTRY } from '@open-mercato/ui/backend/icons/lucideRegistry'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport {\n  Popover,\n  PopoverClose,\n  PopoverContent,\n  PopoverTrigger,\n} from '@open-mercato/ui/primitives/popover'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport type { GalleryEntry } from '../types'\n\n// Mirrors the DS Figma icon sheet (node 2716:25504, \"Lucide icons\"): a plain\n// grid of outline icons with the name beneath each. The gallery shows the\n// icons REGISTERED in the string-icon registry \u2014 the set page.meta.ts `icon`\n// accepts; components import from lucide-react directly.\n\nconst FIGMA_ICONS_NODE = '2716:25504'\n\nfunction pascalCase(registryName: string): string {\n  return registryName\n    .split(/[-_]/)\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join('')\n}\n\n// Clicking a tile opens an explicit two-option menu instead of a hidden\n// copy-mode: each option shows exactly what will land in the clipboard.\nfunction IconTile({ name }: { name: string }) {\n  const t = useT()\n  const Icon = LUCIDE_ICON_REGISTRY[name]\n  const jsxSnippet = `<${pascalCase(name)} aria-hidden className=\"size-4\" />`\n\n  const copy = React.useCallback(async (payload: string) => {\n    try {\n      await navigator.clipboard.writeText(payload)\n      flash(t('design_system.gallery.iconCopied', 'Copied: {snippet}', { snippet: payload }), 'success')\n    } catch {\n      flash(t('design_system.gallery.copyFailed', 'Could not copy the snippet'), 'error')\n    }\n  }, [t])\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"flex flex-col items-center gap-1.5 rounded-md border border-transparent p-2 transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:shadow-focus\"\n        >\n          <Icon aria-hidden className=\"size-5 text-foreground\" strokeWidth={1.75} />\n          <code className=\"max-w-full truncate text-[10px] leading-tight text-muted-foreground\">{name}</code>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"center\" className=\"w-auto max-w-xs p-2\">\n        <div className=\"space-y-1\">\n          <PopoverClose asChild>\n            <button\n              type=\"button\"\n              onClick={() => copy(name)}\n              className=\"flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus\"\n            >\n              <span className=\"text-xs font-medium text-foreground\">\n                {t('design_system.gallery.iconCopyMeta', 'Copy name for page.meta icon')}\n              </span>\n              <code className=\"text-[11px] text-muted-foreground\">{name}</code>\n            </button>\n          </PopoverClose>\n          <PopoverClose asChild>\n            <button\n              type=\"button\"\n              onClick={() => copy(jsxSnippet)}\n              className=\"flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus\"\n            >\n              <span className=\"text-xs font-medium text-foreground\">\n                {t('design_system.gallery.iconCopyJsx', 'Copy JSX (lucide-react)')}\n              </span>\n              <code className=\"max-w-full truncate text-[11px] text-muted-foreground\">{jsxSnippet}</code>\n            </button>\n          </PopoverClose>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nfunction IconGrid() {\n  const t = useT()\n  const [query, setQuery] = React.useState('')\n  const names = React.useMemo(() => Object.keys(LUCIDE_ICON_REGISTRY).sort((a, b) => a.localeCompare(b)), [])\n  const needle = query.trim().toLowerCase()\n  const visible = needle ? names.filter((name) => name.toLowerCase().includes(needle)) : names\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <div className=\"max-w-sm flex-1\">\n          <SearchInput\n            value={query}\n            onChange={setQuery}\n            placeholder={t('design_system.gallery.iconSearchPlaceholder', 'Filter icons\u2026')}\n            aria-label={t('design_system.gallery.iconSearchPlaceholder', 'Filter icons\u2026')}\n          />\n        </div>\n        <p className=\"text-xs text-muted-foreground\">\n          {needle\n            ? t('design_system.gallery.iconCountFiltered', '{visible} of {total} icons', {\n                visible: visible.length,\n                total: names.length,\n              })\n            : t('design_system.gallery.iconCountAll', '{total} icons', { total: names.length })}\n        </p>\n      </div>\n      <div className=\"grid grid-cols-4 gap-1 sm:grid-cols-6 lg:grid-cols-8\">\n        {visible.map((name) => (\n          <IconTile key={name} name={name} />\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst iconRegistryEntry: GalleryEntry = {\n  id: 'icon-registry',\n  title: 'Icon registry',\n  importPath: 'lucide-react',\n  usage: {\n    do: [\n      'size-4 inside buttons, menus and inline text; size-5 in section navs and toolbars.',\n      'Always aria-hidden next to a visible label, or aria-label on icon-only controls.',\n      'Color with semantic tokens only (text-muted-foreground, text-status-*-icon).',\n      'Icon-only actions use IconButton \u2014 it ships the focus ring, sizing and the aria-label contract.',\n    ],\n    dont: [\n      'No emoji or font glyphs as icons \u2014 Lucide only.',\n      'Never convey status by icon color alone; pair with text or a label.',\n      'No hand-drawn SVGs when a Lucide icon exists.',\n    ],\n  },\n  figmaNodeId: FIGMA_ICONS_NODE,\n  variants: [\n    {\n      id: 'registry',\n      title: 'registered icons',\n      render: () => <IconGrid />,\n      code: `export const metadata = { icon: 'shapes' }`,\n    },\n    {\n      id: 'component-usage',\n      title: 'usage in components',\n      render: () => {\n        const Sample = LUCIDE_ICON_REGISTRY.search ?? Object.values(LUCIDE_ICON_REGISTRY)[0]\n        return (\n          <div className=\"flex items-center gap-4\">\n            <Sample aria-hidden className=\"size-4 text-muted-foreground\" />\n            <Sample aria-hidden className=\"size-5 text-foreground\" />\n            <Sample aria-hidden className=\"size-6 text-status-info-icon\" />\n          </div>\n        )\n      },\n      code: `import { Search } from 'lucide-react'\n\n<Search aria-hidden className=\"size-4 text-muted-foreground\" />`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [iconRegistryEntry]\n"],
-  "mappings": "AA8CQ,SAIE,KAJF;AA9CR,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AAQtB,MAAM,mBAAmB;AAEzB,SAAS,WAAW,cAA8B;AAChD,SAAO,aACJ,MAAM,MAAM,EACZ,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,YAAY,IAAI,KAAK,MAAM,CAAC,CAAC,EAC1D,KAAK,EAAE;AACZ;AAIA,SAAS,SAAS,EAAE,KAAK,GAAqB;AAC5C,QAAM,IAAI,KAAK;AACf,QAAM,OAAO,qBAAqB,IAAI;AACtC,QAAM,aAAa,IAAI,WAAW,IAAI,CAAC;AAEvC,QAAM,OAAO,MAAM,YAAY,OAAO,YAAoB;AACxD,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,OAAO;AAC3C,YAAM,EAAE,oCAAoC,qBAAqB,EAAE,SAAS,QAAQ,CAAC,GAAG,SAAS;AAAA,IACnG,QAAQ;AACN,YAAM,EAAE,oCAAoC,4BAA4B,GAAG,OAAO;AAAA,IACpF;AAAA,EACF,GAAG,CAAC,CAAC,CAAC;AAEN,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QAEV;AAAA,8BAAC,QAAK,eAAW,MAAC,WAAU,0BAAyB,aAAa,MAAM;AAAA,UACxE,oBAAC,UAAK,WAAU,uEAAuE,gBAAK;AAAA;AAAA;AAAA,IAC9F,GACF;AAAA,IACA,oBAAC,kBAAe,OAAM,UAAS,WAAU,uBACvC,+BAAC,SAAI,WAAU,aACb;AAAA,0BAAC,gBAAa,SAAO,MACnB;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,KAAK,IAAI;AAAA,UACxB,WAAU;AAAA,UAEV;AAAA,gCAAC,UAAK,WAAU,uCACb,YAAE,sCAAsC,8BAA8B,GACzE;AAAA,YACA,oBAAC,UAAK,WAAU,qCAAqC,gBAAK;AAAA;AAAA;AAAA,MAC5D,GACF;AAAA,MACA,oBAAC,gBAAa,SAAO,MACnB;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,KAAK,UAAU;AAAA,UAC9B,WAAU;AAAA,UAEV;AAAA,gCAAC,UAAK,WAAU,uCACb,YAAE,qCAAqC,yBAAyB,GACnE;AAAA,YACA,oBAAC,UAAK,WAAU,yDAAyD,sBAAW;AAAA;AAAA;AAAA,MACtF,GACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW;AAClB,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,QAAQ,MAAM,QAAQ,MAAM,OAAO,KAAK,oBAAoB,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1G,QAAM,SAAS,MAAM,KAAK,EAAE,YAAY;AACxC,QAAM,UAAU,SAAS,MAAM,OAAO,CAAC,SAAS,KAAK,YAAY,EAAE,SAAS,MAAM,CAAC,IAAI;AAEvF,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,0BAAC,SAAI,WAAU,mBACb;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,aAAa,EAAE,+CAA+C,oBAAe;AAAA,UAC7E,cAAY,EAAE,+CAA+C,oBAAe;AAAA;AAAA,MAC9E,GACF;AAAA,MACA,oBAAC,OAAE,WAAU,iCACV,mBACG,EAAE,2CAA2C,8BAA8B;AAAA,QACzE,SAAS,QAAQ;AAAA,QACjB,OAAO,MAAM;AAAA,MACf,CAAC,IACD,EAAE,sCAAsC,iBAAiB,EAAE,OAAO,MAAM,OAAO,CAAC,GACtF;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAU,wDACZ,kBAAQ,IAAI,CAAC,SACZ,oBAAC,YAAoB,QAAN,IAAkB,CAClC,GACH;AAAA,KACF;AAEJ;AAEA,MAAM,oBAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,OAAO;AAAA,IACL,IAAI;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,IACR;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,YAAS;AAAA,MACxB,MAAM;AAAA,IACR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM;AACZ,cAAM,SAAS,qBAAqB,UAAU,OAAO,OAAO,oBAAoB,EAAE,CAAC;AACnF,eACE,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,UAAO,eAAW,MAAC,WAAU,gCAA+B;AAAA,UAC7D,oBAAC,UAAO,eAAW,MAAC,WAAU,0BAAyB;AAAA,UACvD,oBAAC,UAAO,eAAW,MAAC,WAAU,gCAA+B;AAAA,WAC/D;AAAA,MAEJ;AAAA,MACA,MAAM;AAAA;AAAA;AAAA,IAGR;AAAA,EACF;AACF;AAEO,MAAM,UAA0B,CAAC,iBAAiB;",
+  "sourcesContent": ["import * as React from 'react'\nimport { SourceIconCatalogue, sourceIconCatalogueCode } from '../demos/source-icons'\nimport { SourceArtworkCatalogue, sourceArtworkCode } from '../demos/source-artwork'\nimport { IconGrid } from '../demos/registered-icons'\nimport { LUCIDE_ICON_REGISTRY } from '@open-mercato/ui/backend/icons/lucideRegistry'\nimport type { GalleryEntry } from '../types'\n\nconst FIGMA_ICONS_NODE = '2716:25504'\n\nconst iconRegistryEntry: GalleryEntry = {\n  id: 'icon-registry',\n  title: 'Icon registry',\n  importPath: 'lucide-react',\n  usage: {\n    do: [\n      'size-4 inside buttons, menus and inline text; size-5 in section navs and toolbars.',\n      'Always aria-hidden next to a visible label, or aria-label on icon-only controls.',\n      'Color with semantic tokens only (text-muted-foreground, text-status-*-icon).',\n      'Icon-only actions use IconButton \u2014 it ships the focus ring, sizing and the aria-label contract.',\n    ],\n    dont: [\n      'No emoji or font glyphs as icons \u2014 Lucide only.',\n      'Never convey status by icon color alone; pair with text or a label.',\n      'No hand-drawn SVGs when a Lucide icon exists.',\n    ],\n  },\n  figmaNodeId: FIGMA_ICONS_NODE,\n  variants: [\n    {\n      id: 'registry',\n      title: 'registered icons',\n      render: () => <IconGrid />,\n      code: `export const metadata = { icon: 'shapes' }`,\n    },\n    {\n      id: 'component-usage',\n      title: 'usage in components',\n      render: () => {\n        const Sample = LUCIDE_ICON_REGISTRY.search ?? Object.values(LUCIDE_ICON_REGISTRY)[0]\n        return (\n          <div className=\"flex items-center gap-4\">\n            <Sample aria-hidden className=\"size-4 text-muted-foreground\" />\n            <Sample aria-hidden className=\"size-5 text-foreground\" />\n            <Sample aria-hidden className=\"size-6 text-status-info-icon\" />\n          </div>\n        )\n      },\n      code: `import { Search } from 'lucide-react'\n\n<Search aria-hidden className=\"size-4 text-muted-foreground\" />`,\n    },\n  ],\n}\n\nconst sourceIconsEntry: GalleryEntry = {\n  id: 'source-icons',\n  title: 'Source icon library',\n  importPath: '@open-mercato/ui/assets/source-icons',\n  figmaNodeId: '199678:19375',\n  descriptionKey: 'design_system.entries.sourceIcons.description',\n  variants: [\n    { id: 'catalogue', title: 'All 1667 source icons / search and copy', render: () => <SourceIconCatalogue />, code: sourceIconCatalogueCode },\n  ],\n}\n\nconst sourceArtworkEntry: GalleryEntry = {\n  id: 'source-artwork',\n  title: 'Source artwork library',\n  importPath: '@open-mercato/ui/assets/source-artwork',\n  figmaNodeId: '2771:1469',\n  descriptionKey: 'design_system.gallery.sourceArtwork.description',\n  variants: [\n    { id: 'brands', title: 'Brands / 439 original logos and styles', render: () => <SourceArtworkCatalogue group=\"brand\" />, code: sourceArtworkCode('brand') },\n    { id: 'flags', title: 'Country flags / 263 original assets', render: () => <SourceArtworkCatalogue group=\"country-flags\" />, code: sourceArtworkCode('country-flags') },\n    { id: 'emoji', title: 'Emoji / 607 original assets', render: () => <SourceArtworkCatalogue group=\"emojies\" />, code: sourceArtworkCode('emojies') },\n    { id: 'store-badges', title: 'Store badges / 16 original variants', render: () => <SourceArtworkCatalogue group=\"appstore-badges\" />, code: sourceArtworkCode('appstore-badges') },\n    { id: 'thumbnails', title: 'Thumbnails / 78 component and landing illustrations', render: () => <SourceArtworkCatalogue group=\"thumbnails\" />, code: sourceArtworkCode('thumbnails') },\n    { id: 'cursors', title: 'Cursors / 10 original assets', render: () => <SourceArtworkCatalogue group=\"others\" />, code: sourceArtworkCode('others') },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [iconRegistryEntry, sourceIconsEntry, sourceArtworkEntry]\n"],
+  "mappings": "AA+BoB,cASV,YATU;AA9BpB,SAAS,qBAAqB,+BAA+B;AAC7D,SAAS,wBAAwB,yBAAyB;AAC1D,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AAGrC,MAAM,mBAAmB;AAEzB,MAAM,oBAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,OAAO;AAAA,IACL,IAAI;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,IACR;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,YAAS;AAAA,MACxB,MAAM;AAAA,IACR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM;AACZ,cAAM,SAAS,qBAAqB,UAAU,OAAO,OAAO,oBAAoB,EAAE,CAAC;AACnF,eACE,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,UAAO,eAAW,MAAC,WAAU,gCAA+B;AAAA,UAC7D,oBAAC,UAAO,eAAW,MAAC,WAAU,0BAAyB;AAAA,UACvD,oBAAC,UAAO,eAAW,MAAC,WAAU,gCAA+B;AAAA,WAC/D;AAAA,MAEJ;AAAA,MACA,MAAM;AAAA;AAAA;AAAA,IAGR;AAAA,EACF;AACF;AAEA,MAAM,mBAAiC;AAAA,EACrC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,UAAU;AAAA,IACR,EAAE,IAAI,aAAa,OAAO,2CAA2C,QAAQ,MAAM,oBAAC,uBAAoB,GAAI,MAAM,wBAAwB;AAAA,EAC5I;AACF;AAEA,MAAM,qBAAmC;AAAA,EACvC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,UAAU;AAAA,IACR,EAAE,IAAI,UAAU,OAAO,0CAA0C,QAAQ,MAAM,oBAAC,0BAAuB,OAAM,SAAQ,GAAI,MAAM,kBAAkB,OAAO,EAAE;AAAA,IAC1J,EAAE,IAAI,SAAS,OAAO,uCAAuC,QAAQ,MAAM,oBAAC,0BAAuB,OAAM,iBAAgB,GAAI,MAAM,kBAAkB,eAAe,EAAE;AAAA,IACtK,EAAE,IAAI,SAAS,OAAO,+BAA+B,QAAQ,MAAM,oBAAC,0BAAuB,OAAM,WAAU,GAAI,MAAM,kBAAkB,SAAS,EAAE;AAAA,IAClJ,EAAE,IAAI,gBAAgB,OAAO,uCAAuC,QAAQ,MAAM,oBAAC,0BAAuB,OAAM,mBAAkB,GAAI,MAAM,kBAAkB,iBAAiB,EAAE;AAAA,IACjL,EAAE,IAAI,cAAc,OAAO,uDAAuD,QAAQ,MAAM,oBAAC,0BAAuB,OAAM,cAAa,GAAI,MAAM,kBAAkB,YAAY,EAAE;AAAA,IACrL,EAAE,IAAI,WAAW,OAAO,gCAAgC,QAAQ,MAAM,oBAAC,0BAAuB,OAAM,UAAS,GAAI,MAAM,kBAAkB,QAAQ,EAAE;AAAA,EACrJ;AACF;AAEO,MAAM,UAA0B,CAAC,mBAAmB,kBAAkB,kBAAkB;",
   "names": []
 }

package/dist/modules/design_system/gallery/entries/inputs-snippets.js

@@ -0,0 +1,154 @@
+const SPECIALISED_INPUTS_NOTE = `// Email, phone, card, website, amount, search and password have dedicated primitives:
+// EmailInput, PhoneNumberField, CardInput, WebsiteInput, AmountInput, SearchInput, PasswordInput.`;
+function inputFieldCode({ inputProps = "", fieldProps = "" } = {}) {
+  return `import { User } from 'lucide-react'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+
+<FormField label="Full name" description="Shown on invoices"${fieldProps}>
+  <Input${inputProps} leftIcon={<User />} placeholder="Alex Morgan" />
+</FormField>
+
+${SPECIALISED_INPUTS_NOTE}`;
+}
+const textareaFieldCode = `import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+
+<FormField label="Note" description="Visible to your team">
+  <Textarea appearance="source" showCount maxLength={200} placeholder="Add a note" />
+</FormField>
+
+// States: pass error="..." or disabled to FormField, and disabled to Textarea.`;
+function phoneNumberFieldCode(extraProps = "") {
+  return `import * as React from 'react'
+import { PhoneNumberField, type PhoneCountry } from '@open-mercato/ui/backend/inputs/PhoneNumberField'
+
+const countries: PhoneCountry[] = [
+  { iso2: 'US', dialCode: '+1', label: 'United States', flag: '\u{1F1FA}\u{1F1F8}' },
+  { iso2: 'PL', dialCode: '+48', label: 'Poland', flag: '\u{1F1F5}\u{1F1F1}' },
+]
+
+function PhoneExample() {
+  const [phone, setPhone] = React.useState<string | undefined>()
+  return (
+    <PhoneNumberField size={36} ariaLabel="Phone number" countryLabel="Country"
+      value={phone} onValueChange={setPhone} countries={countries}${extraProps} />
+  )
+}`;
+}
+function selectFieldCode({ size = 36, leading = false, selectProps = "", fieldProps = "", initialValue = "warsaw" } = {}) {
+  const leadingImport = leading ? `import { Building2 } from 'lucide-react'
+` : "";
+  const triggerImports = leading ? "Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue" : "Select, SelectContent, SelectItem, SelectTrigger, SelectValue";
+  const triggerLeading = leading ? `
+          <SelectTriggerLeading><Building2 aria-hidden="true" className="size-5" /></SelectTriggerLeading>` : "";
+  const itemLeading = leading ? ` leading={<Building2 aria-hidden="true" className="size-5" />}` : "";
+  return `import * as React from 'react'
+${leadingImport}import { FormField } from '@open-mercato/ui/primitives/form-field'
+import { ${triggerImports} } from '@open-mercato/ui/primitives/select'
+
+function SelectExample() {
+  const [value, setValue] = React.useState('${initialValue}')
+  return (
+    <Select value={value} onValueChange={setValue}${selectProps}>
+      <FormField label="Office" description="You can change it later"${fieldProps}>
+        <SelectTrigger size={${size}}>${triggerLeading}
+          <SelectValue placeholder="Choose an office" />
+        </SelectTrigger>
+      </FormField>
+      <SelectContent>
+        <SelectItem value="warsaw"${itemLeading}>Warsaw</SelectItem>
+        <SelectItem value="berlin"${itemLeading}>Berlin</SelectItem>
+        <SelectItem value="archive" disabled${itemLeading}>Archive</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}`;
+}
+function dropdownCode({ size = 36, initialQuery = "" } = {}) {
+  const description = size === 56 ? ` description="12 members"` : "";
+  return `import * as React from 'react'
+import { Building2, Plus } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter } from '@open-mercato/ui/primitives/dropdown'
+
+const workspaces = ['Warsaw', 'Berlin', 'Lisbon']
+
+function DropdownExample() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState('Warsaw')
+  const [query, setQuery] = React.useState('${initialQuery}')
+  return (
+    <Dropdown open={open} onOpenChange={setOpen}>
+      <DropdownTrigger asChild><Button variant="outline">{value}</Button></DropdownTrigger>
+      <DropdownContent className="w-96 max-w-full" aria-label="Choose a workspace" commandProps={{ label: 'Workspaces' }}>
+        <DropdownInput value={query} onValueChange={setQuery} aria-label="Search workspaces" placeholder="Search workspaces" />
+        <DropdownList>
+          <DropdownEmpty>No workspaces match your search</DropdownEmpty>
+          {workspaces.map((workspace) => (
+            <DropdownItem key={workspace} value={workspace} size={${size}} checked={value === workspace}${description}
+              leading={<Building2 aria-hidden="true" className="size-5" />}
+              onSelect={() => { setValue(workspace); setOpen(false) }}>
+              {workspace}
+            </DropdownItem>
+          ))}
+        </DropdownList>
+        <DropdownFooter>
+          <Button variant="outline" size="sm" className="w-full"><Plus className="size-5" />Add workspace</Button>
+        </DropdownFooter>
+      </DropdownContent>
+    </Dropdown>
+  )
+}`;
+}
+function fieldLabelCode(labelProps = "", imports = "") {
+  return `import { FieldLabel } from '@open-mercato/ui/primitives/label'
+import { Input } from '@open-mercato/ui/primitives/input'
+${imports}
+<FieldLabel htmlFor="company-name"${labelProps}>Company name</FieldLabel>
+<Input id="company-name" />`;
+}
+const fieldLabelInformationCode = fieldLabelCode(
+  `
+  information={<SimpleTooltip content="Used on invoices and quotes"><CompactButton size={20} appearance="ghost" aria-label="More information"><KeyIconGlyph name="labelInformation" /></CompactButton></SimpleTooltip>}`,
+  `import { CompactButton } from '@open-mercato/ui/primitives/compact-button'
+import { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'
+import { KeyIconGlyph } from '@open-mercato/ui/primitives/key-icon'
+`
+);
+const fieldLabelActionCode = fieldLabelCode(
+  `
+  action={<LinkButton type="button" size="sm" variant="gray" onClick={openHelp}>Help</LinkButton>}`,
+  `import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+`
+);
+const formFieldLabelCode = `import { FieldLabel } from '@open-mercato/ui/primitives/label'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+import { Input } from '@open-mercato/ui/primitives/input'
+
+// FormField renders FieldLabel for you: sourceLabel switches to the source layout.
+<FormField sourceLabel label="Company name" labelSublabel="(optional)" description="Used on invoices and quotes">
+  <Input />
+</FormField>`;
+function hintTextCode({ state, icon = true } = {}) {
+  const stateProp = state ? ` state="${state}"` : "";
+  const iconImport = icon ? `import { KeyIconGlyph } from '@open-mercato/ui/primitives/key-icon'
+` : "";
+  const leading = icon ? ` leading={<KeyIconGlyph name="information" />}` : "";
+  return `import { HintText } from '@open-mercato/ui/primitives/hint-text'
+${iconImport}
+<HintText${stateProp}${leading}>Used on invoices and quotes</HintText>`;
+}
+export {
+  dropdownCode,
+  fieldLabelActionCode,
+  fieldLabelCode,
+  fieldLabelInformationCode,
+  formFieldLabelCode,
+  hintTextCode,
+  inputFieldCode,
+  phoneNumberFieldCode,
+  selectFieldCode,
+  textareaFieldCode
+};
+//# sourceMappingURL=inputs-snippets.js.map