@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

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

@@ -1,43 +1,54 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Circle } from "lucide-react";
+import { ArrowRight, Circle } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { Alert, AlertDescription } from "@open-mercato/ui/primitives/alert";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { SourceColors, SourceGrids, SourceRadius, SourceShadows, SourceTypography } from "../demos/foundation-references.js";
 const TOKENS_IMPORT = "apps/mercato/src/app/globals.css";
 const FIGMA_COLORS_NODE = "553:14956";
-function SwatchCard({ copyText, label, children }) {
+function useCopyToken(copyText) {
+  const t = useT();
   const onCopy = React.useCallback(async () => {
     try {
       await navigator.clipboard.writeText(copyText);
-      flash(`${copyText} copied`, "success");
+      flash(t("design_system.gallery.tokenCopied", { token: copyText }), "success");
     } catch {
-      flash("Could not copy the token", "error");
+      flash(t("design_system.gallery.tokenCopyFailed"), "error");
     }
-  }, [copyText]);
+  }, [copyText, t]);
+  return { onCopy, copyLabel: t("design_system.gallery.copyToken", { token: copyText }) };
+}
+function SwatchCard({ copyText, label, children }) {
+  const { onCopy, copyLabel } = useCopyToken(copyText);
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
       type: "button",
+      variant: "ghost",
       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}`,
+      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",
+      title: copyLabel,
+      "aria-label": copyLabel,
       children: [
         children,
-        /* @__PURE__ */ jsx("code", { className: "break-all text-[11px] leading-tight text-muted-foreground", children: label })
+        /* @__PURE__ */ jsx("code", { className: "break-all text-xs 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}` }) });
+  return /* @__PURE__ */ jsx(SwatchCard, { copyText: label, label, children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `h-20 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" }) }) });
+  return /* @__PURE__ */ jsx(SwatchCard, { copyText: textClass, label, children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex h-20 w-full items-center justify-center rounded-sm border border-border bg-background", children: /* @__PURE__ */ jsx("span", { className: `text-3xl font-medium 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}` }) });
+  return /* @__PURE__ */ jsx(SwatchCard, { copyText: borderClass, label, children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `h-20 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}` }) }) });
+  return /* @__PURE__ */ jsx(SwatchCard, { copyText: iconClass, label, children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex h-20 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)) });
@@ -47,8 +58,8 @@ const brandColorsEntry = {
   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."]
+    do: ["Use the brand-violet 10/30/100 pattern (bg/border/text) for AI features and user-saved views."],
+    dont: ["Do not substitute brand colors for semantic status tokens.", "Do not repurpose accent-indigo \u2014 it is the selection-control contract."]
   },
   figmaNodeId: FIGMA_COLORS_NODE,
   variants: [
@@ -60,7 +71,7 @@ const brandColorsEntry = {
           "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%"
+            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%"
           }
         ),
         /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "brand-lime 0%, brand-yellow 35%, brand-violet 70%" })
@@ -114,6 +125,14 @@ const colorTokensEntry = {
   },
   figmaNodeId: FIGMA_COLORS_NODE,
   variants: [
+    {
+      id: "source-palette",
+      title: "Complete source palette",
+      render: () => /* @__PURE__ */ jsx(SourceColors, {}),
+      code: `import { SourceColors } from '@open-mercato/core/modules/design_system/gallery/demos/foundation-references'
+
+<SourceColors />`
+    },
     {
       id: "primary",
       title: "primary",
@@ -159,7 +178,7 @@ const colorTokensEntry = {
         /* @__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>`
+      code: `<p className="text-muted-foreground">{t('design_system.gallery.samples.typeBody')}</p>`
     },
     {
       id: "stroke",
@@ -202,6 +221,10 @@ function StatusFamilyPreview({ family }) {
     ] })
   ] });
 }
+function FeatureStatePreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(Alert, { status: "feature", className: "max-w-md", children: /* @__PURE__ */ jsx(AlertDescription, { children: t("design_system.gallery.samples.featureState") }) });
+}
 const stateTokensEntry = {
   id: "state-tokens",
   title: "State color tokens",
@@ -209,7 +232,8 @@ const stateTokensEntry = {
   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."
+      "-icon for glyphs and dots, -border for outlines; both handle dark mode themselves.",
+      'Alert status="feature" uses the neutral token family; brand-violet is reserved for AI and saved-view accents.'
     ],
     dont: [
       "Never hardcode Tailwind status colors (text-red-*, bg-green-*, text-amber-*).",
@@ -226,9 +250,13 @@ const stateTokensEntry = {
     })),
     {
       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" />`
+      title: "Feature \u2192 status-neutral",
+      render: () => /* @__PURE__ */ jsx(FeatureStatePreview, {}),
+      code: `import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+
+<Alert status="feature" className="max-w-md">
+  <AlertDescription>{t('design_system.gallery.samples.featureState')}</AlertDescription>
+</Alert>`
     }
   ]
 };
@@ -284,31 +312,25 @@ const chartPaletteEntry = {
   ]
 };
 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",
+  const { onCopy, copyLabel } = useCopyToken(`${role.surfaceCls} ${role.onSurfaceCls}`);
+  return /* @__PURE__ */ jsx(
+    Button,
     {
       type: "button",
+      variant: "ghost",
       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 }),
+      title: copyLabel,
+      "aria-label": copyLabel,
+      className: "h-auto w-full whitespace-normal p-0 text-left transition-opacity hover:bg-transparent hover:opacity-90",
+      children: /* @__PURE__ */ jsxs("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"}`, children: [
+        /* @__PURE__ */ jsx("span", { className: "text-base 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)) });
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full gap-4 sm:grid-cols-2 xl:grid-cols-3", children: roles.map((role) => /* @__PURE__ */ jsx(RoleCard, { role }, role.surface + role.onSurface)) });
 }
 const colorRolesEntry = {
   id: "color-roles",
@@ -341,7 +363,9 @@ const colorRolesEntry = {
           ]
         }
       ),
-      code: `<button className="bg-primary text-primary-foreground" />`
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button type="button">{t('design_system.gallery.samples.primaryAction')}</Button>`
     },
     {
       id: "surfaces",
@@ -367,12 +391,12 @@ const colorRolesEntry = {
       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`
+          roles: FIGMA_STATE_TO_CODE.map((family) => ({
+            surface: `status-${family.status}-bg`,
+            onSurface: `status-${family.status}-text`,
+            surfaceCls: family.bg,
+            onSurfaceCls: family.text,
+            borderCls: family.border
           }))
         }
       ),
@@ -389,21 +413,16 @@ const RADIUS_SCALE = [
   { 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]);
+  const { onCopy, copyLabel } = useCopyToken(label);
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
       type: "button",
+      variant: "ghost",
       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",
+      title: copyLabel,
+      "aria-label": copyLabel,
+      className: "h-auto w-36 flex-col items-start gap-2 border border-border bg-background p-2 text-left hover:bg-muted/50",
       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: [
@@ -418,6 +437,7 @@ const radiusEntry = {
   id: "corner-radius",
   title: "Corner radius",
   importPath: TOKENS_IMPORT,
+  figmaNodeId: "553:14961",
   keywords: ["radius", "rounded", "border-radius", "corners"],
   usage: {
     do: [
@@ -431,6 +451,14 @@ const radiusEntry = {
     ]
   },
   variants: [
+    {
+      id: "source-radius",
+      title: "Complete radius scale",
+      render: () => /* @__PURE__ */ jsx(SourceRadius, {}),
+      code: `import { SourceRadius } from '@open-mercato/core/modules/design_system/gallery/demos/foundation-references'
+
+<SourceRadius />`
+    },
     {
       id: "scale",
       title: "scale",
@@ -439,13 +467,296 @@ const radiusEntry = {
     }
   ]
 };
+const TYPOGRAPHY_ROLES = [
+  { id: "page", className: "text-2xl font-bold tracking-tight", metrics: "24 / 32 px" },
+  { id: "section", className: "text-xl font-semibold", metrics: "20 / 28 px" },
+  { id: "body", className: "text-sm", metrics: "14 / 20 px" },
+  { id: "label", className: "text-sm font-medium", metrics: "14 / 20 px" },
+  { id: "helper", className: "text-xs text-muted-foreground", metrics: "12 / 16 px" }
+];
+function TypographyRolesPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-relaxed text-muted-foreground", children: t("design_system.foundations.typography.guide.intro") }),
+    /* @__PURE__ */ jsx("div", { className: "divide-y divide-border border-y border-border", children: TYPOGRAPHY_ROLES.map((role) => /* @__PURE__ */ jsxs("article", { className: "grid min-w-0 gap-4 py-6 md:grid-cols-3 md:gap-8", "data-typography-role": role.id, children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: t(`design_system.foundations.typography.guide.${role.id}.title`) }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: role.metrics })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3 md:col-span-2", children: [
+        /* @__PURE__ */ jsx("p", { className: `${role.className} break-words`, children: t(`design_system.foundations.typography.guide.${role.id}.example`) }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-prose text-sm leading-relaxed text-muted-foreground", children: t(`design_system.foundations.typography.guide.${role.id}.usage`) })
+      ] })
+    ] }, role.id)) }),
+    /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-relaxed text-muted-foreground", children: t("design_system.foundations.typography.guide.fonts") })
+  ] });
+}
+function TypographyReferencePreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("section", { className: "rounded-lg border border-border", children: [
+    /* @__PURE__ */ jsx("h3", { className: "p-4 text-sm font-medium", children: t("design_system.foundations.typography.guide.reference") }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-8 border-t border-border p-4 sm:p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: t("design_system.foundations.typography.guide.classes") }),
+        /* @__PURE__ */ jsx("dl", { className: "divide-y divide-border", children: TYPOGRAPHY_ROLES.map((role) => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-2 py-3 text-sm", children: [
+          /* @__PURE__ */ jsx("dt", { children: t(`design_system.foundations.typography.guide.${role.id}.title`) }),
+          /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("code", { className: "break-words text-xs text-muted-foreground", children: role.className }) })
+        ] }, role.id)) })
+      ] }),
+      /* @__PURE__ */ jsx(SourceTypography, {})
+    ] })
+  ] });
+}
+const typographyEntry = {
+  id: "typography",
+  title: "Typography",
+  importPath: TOKENS_IMPORT,
+  figmaNodeId: "553:14957",
+  keywords: ["font", "type", "heading", "body", "line-height", "Geist", "Inter"],
+  usage: {
+    do: [
+      "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.",
+      "Use text-2xl for backend page titles and text-sm for body text. Scale measurements assume a 16px root font size.",
+      "The Figma reference uses Inter / Inter Display; these specimens show the shipped font tokens rather than claiming font parity."
+    ],
+    dont: ["Do not copy marketing display sizes into dense backend pages.", "Do not set inline font families or arbitrary text sizes."]
+  },
+  variants: [
+    {
+      id: "roles",
+      title: "Text hierarchy",
+      render: () => /* @__PURE__ */ jsx(TypographyRolesPreview, {}),
+      code: `import { Label } from '@open-mercato/ui/primitives/label'
+import { Input } from '@open-mercato/ui/primitives/input'
+
+<h1 className="text-2xl font-bold tracking-tight">{t('design_system.foundations.typography.guide.page.example')}</h1>
+<h2 className="text-xl font-semibold">{t('design_system.foundations.typography.guide.section.example')}</h2>
+<p className="text-sm">{t('design_system.foundations.typography.guide.body.example')}</p>
+<Label htmlFor="name">{t('design_system.foundations.typography.guide.label.example')}</Label>
+<Input id="name" aria-describedby="name-hint" />
+<p id="name-hint" className="text-xs text-muted-foreground">{t('design_system.foundations.typography.guide.helper.example')}</p>`
+    },
+    {
+      id: "source-typography",
+      title: "Complete typography scale",
+      render: () => /* @__PURE__ */ jsx(TypographyReferencePreview, {}),
+      code: `import { SourceTypography } from '@open-mercato/core/modules/design_system/gallery/demos/foundation-references'
+
+<SourceTypography />`
+    }
+  ]
+};
+const SPACING_SCALE = [
+  { token: "1", className: "w-1", pixels: 4 },
+  { token: "2", className: "w-2", pixels: 8 },
+  { token: "3", className: "w-3", pixels: 12 },
+  { token: "4", className: "w-4", pixels: 16 },
+  { token: "6", className: "w-6", pixels: 24 },
+  { token: "8", className: "w-8", pixels: 32 },
+  { token: "12", className: "w-12", pixels: 48 }
+];
+function SpacingScalePreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-6", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.foundations.spacing.scaleHint") }),
+    SPACING_SCALE.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
+      /* @__PURE__ */ jsxs("code", { className: "w-12 shrink-0 text-sm text-muted-foreground", children: [
+        "p-",
+        item.token
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "block h-8 rounded-sm border-l-4 border-primary bg-muted", style: { width: `${item.pixels / 48 * 100}%` } }) }),
+      /* @__PURE__ */ jsxs("span", { className: "w-28 shrink-0 font-mono text-xs", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          item.pixels / 16,
+          " rem"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "ml-3 text-muted-foreground", children: [
+          item.pixels,
+          " px"
+        ] })
+      ] })
+    ] }, item.token))
+  ] });
+}
+function SpacingRhythmPreview() {
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full gap-6 md:grid-cols-2", children: [
+    { padding: "p-4", gap: "gap-2" },
+    { padding: "p-6", gap: "gap-4" }
+  ].map((item) => /* @__PURE__ */ jsxs("div", { className: `space-y-4 rounded-lg border border-border bg-muted/30 ${item.padding}`, children: [
+    /* @__PURE__ */ jsxs("code", { className: "text-xs text-muted-foreground", children: [
+      item.padding,
+      " / ",
+      item.gap
+    ] }),
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: `flex ${item.gap}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "h-12 flex-1 rounded-md border border-border bg-background" }),
+      /* @__PURE__ */ jsx("span", { className: "h-12 flex-1 rounded-md border border-border bg-background" }),
+      /* @__PURE__ */ jsx("span", { className: "h-12 flex-1 rounded-md border border-border bg-background" })
+    ] })
+  ] }, item.padding)) });
+}
+const spacingEntry = {
+  id: "spacing",
+  title: "Spacing",
+  importPath: TOKENS_IMPORT,
+  figmaNodeId: "553:14958",
+  keywords: ["padding", "gap", "margin", "grid", "rhythm"],
+  usage: {
+    do: ["Use the 4px spacing grid. Start with gap-2 between controls, p-4 within containers and p-6 for larger panels."],
+    dont: ["Do not invent arbitrary spacing values or compensate for layout problems with negative margins."]
+  },
+  variants: [
+    {
+      id: "source-grids",
+      title: "Layout grids",
+      render: () => /* @__PURE__ */ jsx(SourceGrids, {}),
+      code: `import { SourceGrids } from '@open-mercato/core/modules/design_system/gallery/demos/foundation-references'
+
+<SourceGrids />`
+    },
+    {
+      id: "scale",
+      title: "Spacing scale",
+      render: () => /* @__PURE__ */ jsx(SpacingScalePreview, {}),
+      code: `<div className="flex gap-2 p-4">{children}</div>
+<section className="space-y-6 p-6">{children}</section>`
+    },
+    {
+      id: "rhythm",
+      title: "Container rhythm",
+      render: () => /* @__PURE__ */ jsx(SpacingRhythmPreview, {}),
+      code: `<div className="p-4">
+  <div className="flex gap-2">{children}</div>
+</div>
+<div className="p-6">
+  <div className="flex gap-4">{children}</div>
+</div>`
+    }
+  ]
+};
+const SHADOW_SCALE = ["shadow-none", "shadow-xs", "shadow-sm", "shadow-md", "shadow-lg", "shadow-xl", "shadow-2xl"];
+function ShadowScalePreview() {
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-2 gap-6 p-4 md:grid-cols-3 lg:grid-cols-4", children: SHADOW_SCALE.map((className) => /* @__PURE__ */ jsx("div", { className: `flex h-24 items-center justify-center rounded-lg border border-border bg-card p-4 ${className}`, children: /* @__PURE__ */ jsx("code", { className: "text-xs text-card-foreground", children: className }) }, className)) });
+}
+function FocusPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.focusHint") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", children: t("design_system.gallery.samples.focusAction") }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "rounded-md border border-border bg-background px-4 py-2 text-sm shadow-focus", children: "shadow-focus" })
+    ] })
+  ] });
+}
+const shadowsEntry = {
+  id: "shadows",
+  title: "Shadows & focus",
+  importPath: TOKENS_IMPORT,
+  figmaNodeId: "553:14959",
+  keywords: ["elevation", "depth", "focus", "keyboard"],
+  usage: {
+    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."],
+    dont: ["Do not draw custom colored glows or arbitrary box shadows.", "Do not remove focus feedback without an equivalent visible indicator."]
+  },
+  variants: [
+    {
+      id: "source-shadows",
+      title: "Complete shadow collection",
+      render: () => /* @__PURE__ */ jsx(SourceShadows, {}),
+      code: `import { SourceShadows } from '@open-mercato/core/modules/design_system/gallery/demos/foundation-references'
+
+<SourceShadows />`
+    },
+    {
+      id: "elevation",
+      title: "Elevation scale",
+      render: () => /* @__PURE__ */ jsx(ShadowScalePreview, {}),
+      code: `<div className="rounded-lg border border-border bg-card p-4 shadow-sm">{children}</div>
+<div className="rounded-lg border border-border bg-popover p-4 shadow-lg">{children}</div>`
+    },
+    {
+      id: "focus",
+      title: "Keyboard focus",
+      render: () => /* @__PURE__ */ jsx(FocusPreview, {}),
+      code: `import { Button } from '@open-mercato/ui/primitives/button'
+
+<Button type="button" variant="outline">{t('design_system.gallery.samples.focusAction')}</Button>`
+    }
+  ]
+};
+function MotionPreview() {
+  const t = useT();
+  const [active, setActive] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", "aria-pressed": active, onClick: () => setActive((value) => !value), children: t("design_system.gallery.samples.toggleMotion") }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border p-4", children: [
+        /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "transition-colors / 150 ms" }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: `h-12 rounded-md transition-colors duration-150 motion-reduce:transition-none ${active ? "bg-primary" : "bg-muted"}` })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border p-4", children: [
+        /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "transition-opacity / 200 ms" }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: `h-12 rounded-md bg-primary transition-opacity duration-200 ease-out motion-reduce:transition-none ${active ? "opacity-100" : "opacity-30"}` })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border p-4", children: [
+        /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "transition-transform / 300 ms" }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex h-12 items-center", children: /* @__PURE__ */ jsx(ArrowRight, { className: `size-6 text-foreground transition-transform duration-300 ease-out motion-reduce:transition-none ${active ? "translate-x-8" : "translate-x-0"}` }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border p-4", children: [
+        /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "transition-opacity / 400 ms" }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: `h-12 rounded-md bg-primary transition-opacity duration-400 ease-out motion-reduce:transition-none ${active ? "opacity-100" : "opacity-30"}` })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border p-4", children: [
+        /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "transition-opacity / 500 ms" }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: `h-12 rounded-md bg-primary transition-opacity duration-500 ease-out motion-reduce:transition-none ${active ? "opacity-100" : "opacity-30"}` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("design_system.gallery.samples.reducedMotion") })
+  ] });
+}
+const motionEntry = {
+  id: "motion",
+  title: "Motion",
+  importPath: TOKENS_IMPORT,
+  figmaNodeId: "553:14960",
+  keywords: ["animation", "transition", "duration", "reduced-motion"],
+  usage: {
+    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."],
+    dont: ["Do not use animation as the only feedback for a state change.", "Do not use transition-all when only one property changes."]
+  },
+  variants: [
+    {
+      id: "durations",
+      title: "Interactive duration scale",
+      render: () => /* @__PURE__ */ jsx(MotionPreview, {}),
+      code: `import * as React from 'react'
+import { ArrowRight } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+const [active, setActive] = React.useState(false)
+
+<Button type="button" variant="outline" aria-pressed={active} onClick={() => setActive((value) => !value)}>
+  {t('design_system.gallery.samples.toggleMotion')}
+</Button>
+<div aria-hidden className={['h-12 rounded-md transition-colors duration-150 motion-reduce:transition-none', active ? 'bg-primary' : 'bg-muted'].join(' ')} />
+<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(' ')} />
+<ArrowRight aria-hidden className={['size-6 transition-transform duration-300 ease-out motion-reduce:transition-none', active ? 'translate-x-8' : 'translate-x-0'].join(' ')} />
+<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(' ')} />
+<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(' ')} />`
+    }
+  ]
+};
 const entries = [
   brandColorsEntry,
   colorRolesEntry,
   colorTokensEntry,
   stateTokensEntry,
   chartPaletteEntry,
-  radiusEntry
+  radiusEntry,
+  typographyEntry,
+  spacingEntry,
+  shadowsEntry,
+  motionEntry
 ];
 export {
   entries