@open-mercato/core 0.6.7 → 0.6.8-develop.6875.1.871a4afc94

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/entries/filters.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { Download } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport {\n  FilterBar,\n  type FilterDef,\n  type FilterValues,\n} from '@open-mercato/ui/backend/FilterBar'\nimport { QuickFilters, type FilterPreset } from '@open-mercato/ui/backend/filters/QuickFilters'\nimport { ActiveFilterChips } from '@open-mercato/ui/backend/filters/ActiveFilterChips'\nimport { AdvancedFilterBuilder } from '@open-mercato/ui/backend/filters/AdvancedFilterBuilder'\nimport { FilterEmptyState } from '@open-mercato/ui/backend/filters/FilterEmptyState'\nimport { ListEmptyState } from '@open-mercato/ui/backend/filters/ListEmptyState'\nimport { FilteredEmptyResults } from '@open-mercato/ui/backend/filters/FilteredEmptyResults'\nimport { SearchEmptyResults } from '@open-mercato/ui/backend/filters/SearchEmptyResults'\nimport type { FilterFieldDef } from '@open-mercato/shared/lib/query/advanced-filter'\nimport type {\n  AdvancedFilterTree,\n  FilterGroup,\n  FilterRule,\n} from '@open-mercato/shared/lib/query/advanced-filter-tree'\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// AdvancedFilterPanel itself is not showcased: it is a popover host that\n// orchestrates open/anchor state and saved-filter persistence. Its\n// presentational subcomponents (AdvancedFilterBuilder, QuickFilters,\n// FilterEmptyState) are shown standalone below with variant titles noting it.\n\n// ---------------------------------------------------------------------------\n// Inline demo data \u2014 no API calls. Field defs and trees mirror what CRM list\n// pages pass to the advanced filter stack.\n// ---------------------------------------------------------------------------\n\nconst demoFilterDefs: FilterDef[] = [\n  { id: 'city', label: 'City', type: 'text', placeholder: 'e.g. Berlin' },\n  {\n    id: 'status',\n    label: 'Status',\n    type: 'select',\n    options: [\n      { value: 'active', label: 'Active' },\n      { value: 'prospect', label: 'Prospect' },\n      { value: 'churned', label: 'Churned' },\n    ],\n  },\n  { id: 'hasOpenDeals', label: 'Has open deals', type: 'checkbox' },\n]\n\nconst demoFields: FilterFieldDef[] = [\n  { key: 'name', label: 'Name', type: 'text' },\n  { key: 'email', label: 'Email', type: 'text' },\n  {\n    key: 'status',\n    label: 'Status',\n    type: 'select',\n    options: [\n      { value: 'active', label: 'Active', tone: 'success' },\n      { value: 'prospect', label: 'Prospect', tone: 'info' },\n      { value: 'churned', label: 'Churned', tone: 'error' },\n    ],\n  },\n  { key: 'employees', label: 'Employees', type: 'number' },\n]\n\nfunction rule(id: string, field: string, operator: FilterRule['operator'], value: unknown): FilterRule {\n  return { id, type: 'rule', field, operator, value }\n}\n\nfunction tree(children: FilterGroup['children']): AdvancedFilterTree {\n  return { root: { id: 'root', type: 'group', combinator: 'and', children } }\n}\n\nconst ruleChipsTree = tree([\n  rule('r1', 'name', 'contains', 'north'),\n  rule('r2', 'status', 'is', 'active'),\n  rule('r3', 'employees', 'between', [10, 50]),\n])\n\nconst groupChipTree = tree([\n  {\n    id: 'g1',\n    type: 'group',\n    combinator: 'or',\n    children: [\n      rule('g1r1', 'status', 'is', 'prospect'),\n      rule('g1r2', 'status', 'is', 'churned'),\n    ],\n  },\n])\n\nconst valuelessChipTree = tree([rule('r4', 'email', 'is_empty', null)])\n\nconst builderSingleRuleTree = tree([rule('b1', 'status', 'is', 'active')])\n\nconst builderNestedTree = tree([\n  rule('b2', 'name', 'contains', 'north'),\n  {\n    id: 'bg1',\n    type: 'group',\n    combinator: 'or',\n    children: [\n      rule('bg1r1', 'status', 'is', 'prospect'),\n      rule('bg1r2', 'employees', 'greater_than', 100),\n    ],\n  },\n])\n\nconst demoPresets: FilterPreset[] = [\n  {\n    id: 'active-accounts',\n    labelKey: 'Active accounts',\n    iconName: 'filter',\n    build: () => tree([rule('p1', 'status', 'is', 'active')]),\n  },\n  {\n    id: 'added-this-week',\n    labelKey: 'Added this week',\n    iconName: 'clock',\n    build: () => tree([rule('p2', 'name', 'is_not_empty', null)]),\n  },\n]\n\nconst userScopedPresets: FilterPreset[] = [\n  ...demoPresets,\n  {\n    id: 'my-accounts',\n    labelKey: 'My accounts',\n    requiresUser: true,\n    build: ({ userId }) => tree([rule('p3', 'name', 'contains', userId)]),\n  },\n]\n\n// ---------------------------------------------------------------------------\n// Demo wrappers \u2014 controlled components need local state to be interactive in\n// the gallery. The `code` snippets show the essential consumer usage, not\n// these wrappers.\n// ---------------------------------------------------------------------------\n\nfunction DemoFilterBar({\n  layout,\n  trailingItems,\n}: {\n  layout?: 'stacked' | 'inline'\n  trailingItems?: React.ReactNode\n}) {\n  const [search, setSearch] = React.useState('')\n  const [values, setValues] = React.useState<FilterValues>({ status: 'active' })\n  return (\n    <div className=\"w-full max-w-2xl\">\n      <FilterBar\n        searchValue={search}\n        onSearchChange={setSearch}\n        filters={demoFilterDefs}\n        values={values}\n        onApply={setValues}\n        onClear={() => setValues({})}\n        layout={layout}\n        trailingItems={trailingItems}\n      />\n    </div>\n  )\n}\n\nfunction DemoActiveFilterChips({ initialTree }: { initialTree: AdvancedFilterTree }) {\n  const [value, setValue] = React.useState(initialTree)\n  const removeNode = (id: string) =>\n    setValue((prev) => ({\n      root: { ...prev.root, children: prev.root.children.filter((child) => child.id !== id) },\n    }))\n  return (\n    <div className=\"w-full max-w-2xl\">\n      <ActiveFilterChips\n        tree={value}\n        fields={demoFields}\n        popoverOpen={false}\n        onRemoveNode={removeNode}\n        onOpen={() => {}}\n      />\n    </div>\n  )\n}\n\nfunction DemoAdvancedFilterBuilder({ initialTree }: { initialTree: AdvancedFilterTree }) {\n  const [value, setValue] = React.useState(initialTree)\n  return (\n    <div className=\"w-full max-w-2xl rounded-lg border bg-popover p-3\">\n      <AdvancedFilterBuilder\n        fields={demoFields}\n        value={value}\n        onChange={setValue}\n        onApply={() => {}}\n        onClear={() => setValue(tree([]))}\n      />\n    </div>\n  )\n}\n\nfunction DemoFilterEmptyState({ withQuickFilters }: { withQuickFilters?: boolean }) {\n  const addConditionRef = React.useRef<HTMLButtonElement | null>(null)\n  return (\n    <div className=\"w-full max-w-xl rounded-lg border bg-popover\">\n      <FilterEmptyState\n        onAddCondition={() => {}}\n        addConditionRef={addConditionRef}\n        quickFilters={\n          withQuickFilters ? (\n            <QuickFilters presets={demoPresets} userId=\"user-1\" onApply={() => {}} />\n          ) : undefined\n        }\n      />\n    </div>\n  )\n}\n\nconst filterBarEntry: GalleryEntry = {\n  id: 'filter-bar',\n  title: 'FilterBar',\n  importPath: '@open-mercato/ui/backend/FilterBar',\n  variants: [\n    {\n      id: 'stacked',\n      title: 'Stacked (default)',\n      render: () => <DemoFilterBar />,\n      code: `import { FilterBar, type FilterDef, type FilterValues } from '@open-mercato/ui/backend/FilterBar'\n\nconst filters: FilterDef[] = [\n  { id: 'city', label: 'City', type: 'text' },\n  { id: 'status', label: 'Status', type: 'select', options: statusOptions },\n  { id: 'hasOpenDeals', label: 'Has open deals', type: 'checkbox' },\n]\n\n<FilterBar\n  searchValue={search}\n  onSearchChange={setSearch}\n  filters={filters}\n  values={values}\n  onApply={setValues}\n  onClear={() => setValues({})}\n/>`,\n    },\n    {\n      id: 'inline',\n      title: 'Inline layout',\n      render: () => <DemoFilterBar layout=\"inline\" />,\n      code: `import { FilterBar } from '@open-mercato/ui/backend/FilterBar'\n\n<FilterBar\n  searchValue={search}\n  onSearchChange={setSearch}\n  filters={filters}\n  values={values}\n  onApply={setValues}\n  layout=\"inline\"\n/>`,\n    },\n    {\n      id: 'trailing-items',\n      title: 'With trailing items',\n      render: () => (\n        <DemoFilterBar\n          trailingItems={\n            <Button variant=\"outline\" size=\"sm\">\n              <Download />\n              Export\n            </Button>\n          }\n        />\n      ),\n      code: `import { Download } from 'lucide-react'\nimport { FilterBar } from '@open-mercato/ui/backend/FilterBar'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\n<FilterBar\n  searchValue={search}\n  onSearchChange={setSearch}\n  filters={filters}\n  values={values}\n  onApply={setValues}\n  trailingItems={<Button variant=\"outline\" size=\"sm\"><Download />Export</Button>}\n/>`,\n    },\n  ],\n}\n\nconst quickFiltersEntry: GalleryEntry = {\n  id: 'quick-filters',\n  title: 'QuickFilters',\n  importPath: '@open-mercato/ui/backend/filters/QuickFilters',\n  variants: [\n    {\n      id: 'presets',\n      title: 'Presets (used inside AdvancedFilterPanel)',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <QuickFilters presets={demoPresets} userId=\"user-1\" onApply={() => {}} />\n        </div>\n      ),\n      code: `import { QuickFilters, type FilterPreset } from '@open-mercato/ui/backend/filters/QuickFilters'\n\nconst presets: FilterPreset[] = [\n  { id: 'active-accounts', labelKey: 'customers.filters.activeAccounts', iconName: 'filter', build: () => activeTree },\n  { id: 'added-this-week', labelKey: 'customers.filters.addedThisWeek', iconName: 'clock', build: () => recentTree },\n]\n\n<QuickFilters presets={presets} userId={userId} onApply={(tree, preset) => applyTree(tree)} />`,\n    },\n    {\n      id: 'user-scoped',\n      title: 'User-scoped preset (hidden without userId)',\n      render: () => (\n        <div className=\"flex w-full max-w-xl flex-col gap-6\">\n          <QuickFilters presets={userScopedPresets} userId=\"user-1\" onApply={() => {}} />\n          <QuickFilters presets={userScopedPresets} userId=\"\" onApply={() => {}} />\n        </div>\n      ),\n      code: `import { QuickFilters } from '@open-mercato/ui/backend/filters/QuickFilters'\n\n// Presets with requiresUser: true are hidden when userId is empty.\n<QuickFilters presets={presets} userId={userId} onApply={applyTree} />`,\n    },\n  ],\n}\n\nconst activeFilterChipsEntry: GalleryEntry = {\n  id: 'active-filter-chips',\n  title: 'ActiveFilterChips',\n  importPath: '@open-mercato/ui/backend/filters/ActiveFilterChips',\n  variants: [\n    {\n      id: 'rule-chips',\n      title: 'Rule chips (text, toned select, range)',\n      render: () => <DemoActiveFilterChips initialTree={ruleChipsTree} />,\n      code: `import { ActiveFilterChips } from '@open-mercato/ui/backend/filters/ActiveFilterChips'\n\n<ActiveFilterChips\n  tree={tree}\n  fields={fields}\n  popoverOpen={panelOpen}\n  onRemoveNode={(id) => dispatch({ type: 'removeNode', id })}\n  onOpen={(focusNodeId) => setPanelOpen(true)}\n/>`,\n    },\n    {\n      id: 'group-chip',\n      title: 'Group chip (first rule +N)',\n      render: () => <DemoActiveFilterChips initialTree={groupChipTree} />,\n      code: `import { ActiveFilterChips } from '@open-mercato/ui/backend/filters/ActiveFilterChips'\n\n// An OR group renders as a single chip: \"Status: Prospect +1\".\n<ActiveFilterChips tree={tree} fields={fields} popoverOpen={false} onRemoveNode={removeNode} onOpen={openPanel} />`,\n    },\n    {\n      id: 'valueless-operator',\n      title: 'Valueless operator chip',\n      render: () => <DemoActiveFilterChips initialTree={valuelessChipTree} />,\n      code: `import { ActiveFilterChips } from '@open-mercato/ui/backend/filters/ActiveFilterChips'\n\n// Valueless operators read as a phrase: \"Email is empty\".\n<ActiveFilterChips tree={tree} fields={fields} popoverOpen={false} onRemoveNode={removeNode} onOpen={openPanel} />`,\n    },\n  ],\n}\n\nconst advancedFilterBuilderEntry: GalleryEntry = {\n  id: 'advanced-filter-builder',\n  title: 'AdvancedFilterBuilder',\n  importPath: '@open-mercato/ui/backend/filters/AdvancedFilterBuilder',\n  variants: [\n    {\n      id: 'single-rule',\n      title: 'Single rule (presentational core of AdvancedFilterPanel)',\n      render: () => <DemoAdvancedFilterBuilder initialTree={builderSingleRuleTree} />,\n      code: `import { AdvancedFilterBuilder } from '@open-mercato/ui/backend/filters/AdvancedFilterBuilder'\n\n<AdvancedFilterBuilder\n  fields={fields}\n  value={tree}\n  onChange={setTree}\n  onApply={applyFilters}\n  onClear={clearFilters}\n/>`,\n    },\n    {\n      id: 'nested-group',\n      title: 'Rule with nested OR group',\n      render: () => <DemoAdvancedFilterBuilder initialTree={builderNestedTree} />,\n      code: `import { AdvancedFilterBuilder } from '@open-mercato/ui/backend/filters/AdvancedFilterBuilder'\n\n// Groups nest up to 3 levels; the value is a plain AdvancedFilterTree.\n<AdvancedFilterBuilder fields={fields} value={tree} onChange={setTree} onApply={applyFilters} onClear={clearFilters} />`,\n    },\n  ],\n}\n\nconst filterEmptyStateEntry: GalleryEntry = {\n  id: 'filter-empty-state',\n  title: 'FilterEmptyState',\n  importPath: '@open-mercato/ui/backend/filters/FilterEmptyState',\n  variants: [\n    {\n      id: 'default',\n      title: 'Default (panel empty state of AdvancedFilterPanel)',\n      render: () => <DemoFilterEmptyState />,\n      code: `import { FilterEmptyState } from '@open-mercato/ui/backend/filters/FilterEmptyState'\n\n<FilterEmptyState onAddCondition={openFieldPicker} addConditionRef={addConditionRef} />`,\n    },\n    {\n      id: 'with-quick-filters',\n      title: 'With quick filters slot',\n      render: () => <DemoFilterEmptyState withQuickFilters />,\n      code: `import { FilterEmptyState } from '@open-mercato/ui/backend/filters/FilterEmptyState'\nimport { QuickFilters } from '@open-mercato/ui/backend/filters/QuickFilters'\n\n<FilterEmptyState\n  onAddCondition={openFieldPicker}\n  addConditionRef={addConditionRef}\n  quickFilters={<QuickFilters presets={presets} userId={userId} onApply={applyTree} />}\n/>`,\n    },\n  ],\n}\n\nconst listEmptyStateEntry: GalleryEntry = {\n  id: 'list-empty-state',\n  title: 'ListEmptyState',\n  importPath: '@open-mercato/ui/backend/filters/ListEmptyState',\n  variants: [\n    {\n      id: 'with-create-action',\n      title: 'With create action',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <ListEmptyState entityName=\"companies\" onCreate={() => {}} createLabel=\"Add company\" />\n        </div>\n      ),\n      code: `import { ListEmptyState } from '@open-mercato/ui/backend/filters/ListEmptyState'\n\n// Pass to DataTable's emptyState for the zero-records case.\n<ListEmptyState entityName=\"companies\" createHref=\"/backend/customers/companies/create\" createLabel=\"Add company\" />`,\n    },\n    {\n      id: 'custom-copy',\n      title: 'Custom title and description',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <ListEmptyState\n            title=\"No imports yet\"\n            description=\"Connect a source or upload a CSV file to bring records in.\"\n          />\n        </div>\n      ),\n      code: `import { ListEmptyState } from '@open-mercato/ui/backend/filters/ListEmptyState'\n\n<ListEmptyState\n  title=\"No imports yet\"\n  description=\"Connect a source or upload a CSV file to bring records in.\"\n/>`,\n    },\n  ],\n}\n\nconst filteredEmptyResultsEntry: GalleryEntry = {\n  id: 'filtered-empty-results',\n  title: 'FilteredEmptyResults',\n  importPath: '@open-mercato/ui/backend/filters/FilteredEmptyResults',\n  variants: [\n    {\n      id: 'filters-only',\n      title: 'Filters active',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <FilteredEmptyResults\n            entityNamePlural=\"companies\"\n            canRemoveLast\n            onClearAll={() => {}}\n            onRemoveLast={() => {}}\n          />\n        </div>\n      ),\n      code: `import { FilteredEmptyResults } from '@open-mercato/ui/backend/filters/FilteredEmptyResults'\n\n// DataTable renders this automatically when filters match nothing.\n<FilteredEmptyResults\n  entityNamePlural=\"companies\"\n  canRemoveLast={tree.root.children.length > 0}\n  onClearAll={clearFilters}\n  onRemoveLast={removeLastFilter}\n/>`,\n    },\n    {\n      id: 'with-search',\n      title: 'Search and filters active',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <FilteredEmptyResults\n            entityNamePlural=\"companies\"\n            canRemoveLast\n            onClearAll={() => {}}\n            onRemoveLast={() => {}}\n            onClearSearch={() => {}}\n          />\n        </div>\n      ),\n      code: `import { FilteredEmptyResults } from '@open-mercato/ui/backend/filters/FilteredEmptyResults'\n\n// Passing onClearSearch switches to combined copy and clears both at once.\n<FilteredEmptyResults\n  entityNamePlural=\"companies\"\n  canRemoveLast\n  onClearAll={clearFilters}\n  onRemoveLast={removeLastFilter}\n  onClearSearch={clearSearch}\n/>`,\n    },\n  ],\n}\n\nconst searchEmptyResultsEntry: GalleryEntry = {\n  id: 'search-empty-results',\n  title: 'SearchEmptyResults',\n  importPath: '@open-mercato/ui/backend/filters/SearchEmptyResults',\n  variants: [\n    {\n      id: 'default',\n      title: 'Default',\n      render: () => (\n        <div className=\"flex w-full max-w-xl justify-center\">\n          <SearchEmptyResults query=\"northwind\" onClearSearch={() => {}} />\n        </div>\n      ),\n      code: `import { SearchEmptyResults } from '@open-mercato/ui/backend/filters/SearchEmptyResults'\n\n// DataTable renders this automatically when a search matches nothing.\n<SearchEmptyResults query={search} onClearSearch={() => setSearch('')} />`,\n    },\n    {\n      id: 'with-entity',\n      title: 'With entity label',\n      render: () => (\n        <div className=\"flex w-full max-w-xl justify-center\">\n          <SearchEmptyResults\n            query=\"northwind\"\n            entityNamePlural=\"companies\"\n            onClearSearch={() => {}}\n          />\n        </div>\n      ),\n      code: `import { SearchEmptyResults } from '@open-mercato/ui/backend/filters/SearchEmptyResults'\n\n<SearchEmptyResults query={search} entityNamePlural=\"companies\" onClearSearch={() => setSearch('')} />`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  filterBarEntry,\n  quickFiltersEntry,\n  activeFilterChipsEntry,\n  advancedFilterBuilderEntry,\n  filterEmptyStateEntry,\n  listEmptyStateEntry,\n  filteredEmptyResultsEntry,\n  searchEmptyResultsEntry,\n]\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,453 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Circle } from "lucide-react";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+const TOKENS_IMPORT = "apps/mercato/src/app/globals.css";
+const FIGMA_COLORS_NODE = "553:14956";
+function SwatchCard({ copyText, label, children }) {
+  const onCopy = React.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(copyText);
+      flash(`${copyText} copied`, "success");
+    } catch {
+      flash("Could not copy the token", "error");
+    }
+  }, [copyText]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onCopy,
+      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",
+      title: `Copy ${copyText}`,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("code", { className: "break-all text-[11px] leading-tight text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+function TokenSwatch({ tokenClass, label }) {
+  return /* @__PURE__ */ jsx(SwatchCard, { copyText: label, label, children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `h-10 w-full rounded-sm border border-border ${tokenClass}` }) });
+}
+function TextSwatch({ textClass, label }) {
+  return /* @__PURE__ */ jsx(SwatchCard, { copyText: textClass, label, children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex h-10 w-full items-center justify-center rounded-sm border border-border bg-background", children: /* @__PURE__ */ jsx("span", { className: `text-xl font-semibold leading-none ${textClass}`, children: "Aa" }) }) });
+}
+function BorderSwatch({ borderClass, label }) {
+  return /* @__PURE__ */ jsx(SwatchCard, { copyText: borderClass, label, children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `h-10 w-full rounded-sm border-2 bg-background ${borderClass}` }) });
+}
+function IconSwatch({ iconClass, label }) {
+  return /* @__PURE__ */ jsx(SwatchCard, { copyText: iconClass, label, children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex h-10 w-full items-center justify-center rounded-sm border border-border bg-background", children: /* @__PURE__ */ jsx(Circle, { className: `size-4 fill-current ${iconClass}` }) }) });
+}
+function SwatchRow({ items }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ jsx(TokenSwatch, { tokenClass: item.tokenClass, label: item.label }, item.label)) });
+}
+const brandColorsEntry = {
+  id: "brand-colors",
+  title: "Brand colors",
+  importPath: TOKENS_IMPORT,
+  usage: {
+    do: ["brand-violet 10/30/100 pattern (bg/border/text) for proposed and feature accents."],
+    dont: ["Never theme or repurpose accent-indigo \u2014 it is the selection-control contract."]
+  },
+  figmaNodeId: FIGMA_COLORS_NODE,
+  variants: [
+    {
+      id: "gradient",
+      title: "gradient 135\xB0",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            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%"
+          }
+        ),
+        /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "brand-lime 0%, brand-yellow 35%, brand-violet 70%" })
+      ] }),
+      code: `<div className="bg-linear-135 from-brand-lime from-0% via-brand-yellow via-35% to-brand-violet to-70%" />`
+    },
+    {
+      id: "identity",
+      title: "identity",
+      render: () => /* @__PURE__ */ jsx(
+        SwatchRow,
+        {
+          items: [
+            { tokenClass: "bg-brand-lime", label: "brand-lime" },
+            { tokenClass: "bg-brand-yellow", label: "brand-yellow" },
+            { tokenClass: "bg-brand-violet", label: "brand-violet" },
+            { tokenClass: "bg-brand-violet-foreground", label: "brand-violet-foreground" },
+            { tokenClass: "bg-accent-indigo", label: "accent-indigo" }
+          ]
+        }
+      ),
+      code: `<span className="bg-brand-violet/10 border-brand-violet/30 text-brand-violet" />`
+    },
+    {
+      id: "social",
+      title: "social",
+      render: () => /* @__PURE__ */ jsx(
+        SwatchRow,
+        {
+          items: [
+            { tokenClass: "bg-brand-apple", label: "brand-apple" },
+            { tokenClass: "bg-brand-github", label: "brand-github" },
+            { tokenClass: "bg-brand-facebook", label: "brand-facebook" },
+            { tokenClass: "bg-brand-dropbox", label: "brand-dropbox" },
+            { tokenClass: "bg-brand-linkedin", label: "brand-linkedin" },
+            { tokenClass: "bg-brand-x", label: "brand-x" }
+          ]
+        }
+      ),
+      code: `<SocialButton provider="github" />`
+    }
+  ]
+};
+const colorTokensEntry = {
+  id: "color-tokens",
+  title: "Color tokens",
+  importPath: TOKENS_IMPORT,
+  usage: {
+    do: ["Pair every surface with its -foreground counterpart.", "Borders come from border-border / border-input \u2014 nothing else."],
+    dont: ["Never border-gray-* or any raw palette shade."]
+  },
+  figmaNodeId: FIGMA_COLORS_NODE,
+  variants: [
+    {
+      id: "primary",
+      title: "primary",
+      render: () => /* @__PURE__ */ jsx(
+        SwatchRow,
+        {
+          items: [
+            { tokenClass: "bg-primary", label: "primary" },
+            { tokenClass: "bg-primary-foreground", label: "primary-foreground" },
+            { tokenClass: "bg-primary-hover", label: "primary-hover" },
+            { tokenClass: "bg-destructive", label: "destructive" }
+          ]
+        }
+      ),
+      code: `<div className="bg-primary text-primary-foreground hover:bg-primary-hover" />`
+    },
+    {
+      id: "background",
+      title: "background (bg)",
+      render: () => /* @__PURE__ */ jsx(
+        SwatchRow,
+        {
+          items: [
+            { tokenClass: "bg-background", label: "background" },
+            { tokenClass: "bg-card", label: "card" },
+            { tokenClass: "bg-popover", label: "popover" },
+            { tokenClass: "bg-muted", label: "muted" },
+            { tokenClass: "bg-accent", label: "accent" },
+            { tokenClass: "bg-sidebar", label: "sidebar" },
+            { tokenClass: "bg-bg-disabled", label: "bg-disabled" }
+          ]
+        }
+      ),
+      code: `<div className="bg-card text-card-foreground" />`
+    },
+    {
+      id: "text",
+      title: "text",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx(TextSwatch, { textClass: "text-foreground", label: "text-foreground" }),
+        /* @__PURE__ */ jsx(TextSwatch, { textClass: "text-muted-foreground", label: "text-muted-foreground" }),
+        /* @__PURE__ */ jsx(TextSwatch, { textClass: "text-card-foreground", label: "text-card-foreground" }),
+        /* @__PURE__ */ jsx(TextSwatch, { textClass: "text-accent-foreground", label: "text-accent-foreground" }),
+        /* @__PURE__ */ jsx(TextSwatch, { textClass: "text-text-disabled", label: "text-text-disabled" })
+      ] }),
+      code: `<p className="text-muted-foreground">Secondary copy</p>`
+    },
+    {
+      id: "stroke",
+      title: "stroke",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx(BorderSwatch, { borderClass: "border-border", label: "border-border" }),
+        /* @__PURE__ */ jsx(BorderSwatch, { borderClass: "border-input", label: "border-input" }),
+        /* @__PURE__ */ jsx(BorderSwatch, { borderClass: "border-ring", label: "border-ring" }),
+        /* @__PURE__ */ jsx(BorderSwatch, { borderClass: "border-border-disabled", label: "border-border-disabled" })
+      ] }),
+      code: `<div className="border-border focus-visible:ring-ring" />`
+    }
+  ]
+};
+const FIGMA_STATE_TO_CODE = [
+  { 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" },
+  { 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" },
+  { 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" },
+  { 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" },
+  { 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" },
+  { 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" }
+];
+function StatusFamilyPreview({ family }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        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}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `size-2 rounded-full ${family.dot}` }),
+          family.chipLabel
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx(TokenSwatch, { tokenClass: family.bg, label: family.bg }),
+      /* @__PURE__ */ jsx(TextSwatch, { textClass: family.text, label: family.text }),
+      /* @__PURE__ */ jsx(BorderSwatch, { borderClass: family.border, label: family.border }),
+      /* @__PURE__ */ jsx(IconSwatch, { iconClass: family.icon, label: family.icon })
+    ] })
+  ] });
+}
+const stateTokensEntry = {
+  id: "state-tokens",
+  title: "State color tokens",
+  importPath: TOKENS_IMPORT,
+  usage: {
+    do: [
+      "Pair -bg with -text of the same family \u2014 the shades are contrast-tested together.",
+      "-icon for glyphs and dots, -border for outlines; both handle dark mode themselves."
+    ],
+    dont: [
+      "Never hardcode Tailwind status colors (text-red-*, bg-green-*, text-amber-*).",
+      "No dark: overrides on status tokens \u2014 they already theme."
+    ]
+  },
+  figmaNodeId: FIGMA_COLORS_NODE,
+  variants: [
+    ...FIGMA_STATE_TO_CODE.map((family) => ({
+      id: family.status,
+      title: `${family.figma} \u2192 status-${family.status}`,
+      render: () => /* @__PURE__ */ jsx(StatusFamilyPreview, { family }),
+      code: `<span className="${family.bg} ${family.text} ${family.border}" />`
+    })),
+    {
+      id: "feature",
+      title: "Feature \u2192 brand-violet pattern",
+      render: () => /* @__PURE__ */ jsx("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", children: "Feature state uses the brand-violet 10/30/100 pattern, not a status family." }),
+      code: `<Alert status="feature" />`
+    }
+  ]
+};
+const chartPaletteEntry = {
+  id: "chart-palette",
+  title: "Chart palette",
+  importPath: TOKENS_IMPORT,
+  usage: {
+    dont: [
+      "Never build token class names dynamically (`bg-chart-${n}`) \u2014 the Tailwind scanner only sees complete literals, so the class is silently never generated."
+    ]
+  },
+  variants: [
+    {
+      id: "numbered",
+      title: "numbered",
+      render: () => /* @__PURE__ */ jsx(
+        SwatchRow,
+        {
+          items: [
+            { tokenClass: "bg-chart-1", label: "chart-1" },
+            { tokenClass: "bg-chart-2", label: "chart-2" },
+            { tokenClass: "bg-chart-3", label: "chart-3" },
+            { tokenClass: "bg-chart-4", label: "chart-4" },
+            { tokenClass: "bg-chart-5", label: "chart-5" }
+          ]
+        }
+      ),
+      code: `<BarChart data={data} />`
+    },
+    {
+      id: "named",
+      title: "named",
+      render: () => /* @__PURE__ */ jsx(
+        SwatchRow,
+        {
+          items: [
+            { tokenClass: "bg-chart-blue", label: "chart-blue" },
+            { tokenClass: "bg-chart-emerald", label: "chart-emerald" },
+            { tokenClass: "bg-chart-amber", label: "chart-amber" },
+            { tokenClass: "bg-chart-rose", label: "chart-rose" },
+            { tokenClass: "bg-chart-violet", label: "chart-violet" },
+            { tokenClass: "bg-chart-cyan", label: "chart-cyan" },
+            { tokenClass: "bg-chart-indigo", label: "chart-indigo" },
+            { tokenClass: "bg-chart-pink", label: "chart-pink" },
+            { tokenClass: "bg-chart-teal", label: "chart-teal" },
+            { tokenClass: "bg-chart-orange", label: "chart-orange" }
+          ]
+        }
+      ),
+      code: `<Sparkline className="text-chart-blue" data={points} />`
+    }
+  ]
+};
+function RoleCard({ role }) {
+  const label = `${role.surface} / ${role.onSurface}`;
+  const onCopy = React.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(`${role.surfaceCls} ${role.onSurfaceCls}`);
+      flash(`${role.surfaceCls} ${role.onSurfaceCls} copied`, "success");
+    } catch {
+      flash("Could not copy the classes", "error");
+    }
+  }, [role]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onCopy,
+      title: `Copy ${role.surfaceCls} ${role.onSurfaceCls}`,
+      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"}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-tight", children: role.surface }),
+        /* @__PURE__ */ jsx("code", { className: "text-xs opacity-80", children: role.onSurface })
+      ]
+    }
+  );
+}
+function RoleGrid({ roles }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full gap-2 sm:grid-cols-2 lg:grid-cols-3", children: roles.map((role) => /* @__PURE__ */ jsx(RoleCard, { role }, role.surface + role.onSurface)) });
+}
+const colorRolesEntry = {
+  id: "color-roles",
+  title: "Color roles",
+  importPath: TOKENS_IMPORT,
+  figmaNodeId: FIGMA_COLORS_NODE,
+  keywords: ["roles", "pairs", "on-color", "material"],
+  usage: {
+    do: [
+      "A role is a surface paired with its content color \u2014 always use them together, never mix pairs.",
+      "Click a card to copy both classes of the pair."
+    ],
+    dont: [
+      "Never put foreground on a surface from a different pair \u2014 contrast is only tested within a pair.",
+      "Never use a -foreground token as a standalone accent color."
+    ]
+  },
+  variants: [
+    {
+      id: "action",
+      title: "action",
+      render: () => /* @__PURE__ */ jsx(
+        RoleGrid,
+        {
+          roles: [
+            { surface: "primary", onSurface: "primary-foreground", surfaceCls: "bg-primary", onSurfaceCls: "text-primary-foreground" },
+            { surface: "destructive", onSurface: "white", surfaceCls: "bg-destructive", onSurfaceCls: "text-white" },
+            { surface: "brand-violet", onSurface: "brand-violet-foreground", surfaceCls: "bg-brand-violet", onSurfaceCls: "text-brand-violet-foreground" },
+            { surface: "accent-indigo", onSurface: "accent-indigo-foreground", surfaceCls: "bg-accent-indigo", onSurfaceCls: "text-accent-indigo-foreground" }
+          ]
+        }
+      ),
+      code: `<button className="bg-primary text-primary-foreground" />`
+    },
+    {
+      id: "surfaces",
+      title: "surfaces",
+      render: () => /* @__PURE__ */ jsx(
+        RoleGrid,
+        {
+          roles: [
+            { surface: "background", onSurface: "foreground", surfaceCls: "bg-background", onSurfaceCls: "text-foreground" },
+            { surface: "card", onSurface: "card-foreground", surfaceCls: "bg-card", onSurfaceCls: "text-card-foreground" },
+            { surface: "popover", onSurface: "popover-foreground", surfaceCls: "bg-popover", onSurfaceCls: "text-popover-foreground" },
+            { surface: "muted", onSurface: "muted-foreground", surfaceCls: "bg-muted", onSurfaceCls: "text-muted-foreground" },
+            { surface: "accent", onSurface: "accent-foreground", surfaceCls: "bg-accent", onSurfaceCls: "text-accent-foreground" },
+            { surface: "sidebar", onSurface: "sidebar-foreground", surfaceCls: "bg-sidebar", onSurfaceCls: "text-sidebar-foreground" }
+          ]
+        }
+      ),
+      code: `<div className="bg-card text-card-foreground" />`
+    },
+    {
+      id: "status",
+      title: "status",
+      render: () => /* @__PURE__ */ jsx(
+        RoleGrid,
+        {
+          roles: ["error", "success", "warning", "info", "neutral", "pink"].map((status) => ({
+            surface: `status-${status}-bg`,
+            onSurface: `status-${status}-text`,
+            surfaceCls: `bg-status-${status}-bg`,
+            onSurfaceCls: `text-status-${status}-text`,
+            borderCls: `border-status-${status}-border`
+          }))
+        }
+      ),
+      code: `<span className="bg-status-error-bg text-status-error-text border-status-error-border" />`
+    }
+  ]
+};
+const RADIUS_SCALE = [
+  { cls: "rounded-none", label: "rounded-none", px: "0px" },
+  { cls: "rounded-sm", label: "rounded-sm", px: "6px" },
+  { cls: "rounded-md", label: "rounded-md", px: "8px" },
+  { cls: "rounded-lg", label: "rounded-lg", px: "10px" },
+  { cls: "rounded-xl", label: "rounded-xl", px: "16px" },
+  { cls: "rounded-full", label: "rounded-full", px: "999px" }
+];
+function RadiusCard({ cls, label, px }) {
+  const onCopy = React.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(label);
+      flash(`${label} copied`, "success");
+    } catch {
+      flash("Could not copy the class", "error");
+    }
+  }, [label]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onCopy,
+      title: `Copy ${label}`,
+      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",
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `h-14 w-full border-2 border-dashed border-status-pink-icon bg-status-pink-bg ${cls}` }),
+        /* @__PURE__ */ jsxs("span", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsx("code", { className: "block text-xs text-foreground", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: px })
+        ] })
+      ]
+    }
+  );
+}
+const radiusEntry = {
+  id: "corner-radius",
+  title: "Corner radius",
+  importPath: TOKENS_IMPORT,
+  keywords: ["radius", "rounded", "border-radius", "corners"],
+  usage: {
+    do: [
+      "The scale derives from the --radius base token (10px): sm 6px, md 8px, lg 10px, xl 16px.",
+      "Cards and panels use rounded-lg; controls, chips and filter buttons use rounded-md.",
+      "rounded-full is reserved for Badge, Tag, SegmentedControl, Avatar and status dots."
+    ],
+    dont: [
+      "No arbitrary values (rounded-[24px]) \u2014 pick from the scale.",
+      "No full-pill radii on filter chips or custom controls outside the reserved primitives."
+    ]
+  },
+  variants: [
+    {
+      id: "scale",
+      title: "scale",
+      render: () => /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: RADIUS_SCALE.map((item) => /* @__PURE__ */ jsx(RadiusCard, { ...item }, item.cls)) }),
+      code: `<div className="rounded-lg border border-border" />`
+    }
+  ]
+};
+const entries = [
+  brandColorsEntry,
+  colorRolesEntry,
+  colorTokensEntry,
+  stateTokensEntry,
+  chartPaletteEntry,
+  radiusEntry
+];
+export {
+  entries
+};
+//# sourceMappingURL=foundations.js.map

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

@@ -0,0 +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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",
+  "names": []
+}