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

package/dist/modules/design_system/gallery/components/ComponentIndex.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GalleryLink as Link } from "./GalleryLink.js";
+import { ArrowRight } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Skeleton } from "@open-mercato/ui/primitives/skeleton";
+import { GALLERY_BASE_PATH } from "../registry.js";
+import { FamilyEntryPreview } from "./FamilyEntryPreview.js";
+const representativeEntries = {
+  inputs: "input",
+  dates: "date-picker",
+  filters: "quick-filters",
+  scaffolding: "section-header",
+  notifications: "notification-item",
+  schedule: "schedule-agenda",
+  messages: "message-object-preview"
+};
+function ComponentIndex({ families, loaded, failed, onRetry }) {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "columns-1 gap-6 @3xl:columns-2", children: families.map((family) => {
+    const entries = loaded[family.id];
+    const entry = entries?.find((candidate) => candidate.id === representativeEntries[family.id]) ?? entries?.[0];
+    return /* @__PURE__ */ jsxs("section", { "aria-labelledby": `gallery-family-${family.id}`, className: "relative mb-6 min-w-0 break-inside-avoid rounded-lg border border-border bg-card", children: [
+      /* @__PURE__ */ jsx("h2", { id: `gallery-family-${family.id}`, className: "text-base font-semibold", children: /* @__PURE__ */ jsxs(Link, { href: `${GALLERY_BASE_PATH}?family=${family.id}`, className: "flex items-center justify-between gap-3 p-5 after:absolute after:inset-0 after:rounded-lg hover:bg-muted/30 focus-visible:outline-none focus-visible:after:shadow-focus", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-3", children: [
+          family.icon,
+          t(family.labelKey, family.id)
+        ] }),
+        /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "min-h-40 border-t border-border bg-muted/20 p-5", children: entry ? /* @__PURE__ */ jsx("div", { inert: true, "aria-hidden": "true", className: "flex min-h-28 min-w-0 flex-wrap items-center gap-3 [&>*]:max-w-full", children: /* @__PURE__ */ jsx(FamilyEntryPreview, { entry }) }) : failed[family.id] ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.loadFailed", "Could not load this family") }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", className: "relative z-10", onClick: () => onRetry(family), children: t("design_system.gallery.retry", "Retry") })
+      ] }) : /* @__PURE__ */ jsx(Skeleton, { className: "h-28 w-full" }) })
+    ] }, family.id);
+  }) });
+}
+export {
+  ComponentIndex
+};
+//# sourceMappingURL=ComponentIndex.js.map

package/dist/modules/design_system/gallery/components/ComponentIndex.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/ComponentIndex.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { GalleryLink as Link } from './GalleryLink'\nimport { ArrowRight } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Skeleton } from '@open-mercato/ui/primitives/skeleton'\nimport { GALLERY_BASE_PATH } from '../registry'\nimport type { GalleryEntry, GalleryFamily } from '../types'\nimport { FamilyEntryPreview } from './FamilyEntryPreview'\n\nconst representativeEntries: Record<string, string> = {\n  inputs: 'input',\n  dates: 'date-picker',\n  filters: 'quick-filters',\n  scaffolding: 'section-header',\n  notifications: 'notification-item',\n  schedule: 'schedule-agenda',\n  messages: 'message-object-preview',\n}\n\nexport function ComponentIndex({ families, loaded, failed, onRetry }: {\n  families: GalleryFamily[]\n  loaded: Record<string, GalleryEntry[]>\n  failed: Record<string, boolean>\n  onRetry: (family: GalleryFamily) => void\n}) {\n  const t = useT()\n  return <div className=\"columns-1 gap-6 @3xl:columns-2\">\n    {families.map(family => {\n      const entries = loaded[family.id]\n      const entry = entries?.find(candidate => candidate.id === representativeEntries[family.id]) ?? entries?.[0]\n      return <section key={family.id} aria-labelledby={`gallery-family-${family.id}`} className=\"relative mb-6 min-w-0 break-inside-avoid rounded-lg border border-border bg-card\">\n        <h2 id={`gallery-family-${family.id}`} className=\"text-base font-semibold\">\n          <Link href={`${GALLERY_BASE_PATH}?family=${family.id}`} className=\"flex items-center justify-between gap-3 p-5 after:absolute after:inset-0 after:rounded-lg hover:bg-muted/30 focus-visible:outline-none focus-visible:after:shadow-focus\">\n            <span className=\"flex items-center gap-3\">{family.icon}{t(family.labelKey, family.id)}</span>\n            <ArrowRight aria-hidden className=\"size-4 shrink-0 text-muted-foreground\" />\n          </Link>\n        </h2>\n        <div className=\"min-h-40 border-t border-border bg-muted/20 p-5\">\n          {entry ? <div inert aria-hidden=\"true\" className=\"flex min-h-28 min-w-0 flex-wrap items-center gap-3 [&>*]:max-w-full\"><FamilyEntryPreview entry={entry} /></div> : failed[family.id] ? <div className=\"space-y-3\"><p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.loadFailed', 'Could not load this family')}</p><Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"relative z-10\" onClick={() => onRetry(family)}>{t('design_system.gallery.retry', 'Retry')}</Button></div> : <Skeleton className=\"h-28 w-full\" />}\n        </div>\n      </section>\n    })}\n  </div>\n}\n"],
+  "mappings": ";AAoCY,SACA,KADA;AAjCZ,SAAS,eAAe,YAAY;AACpC,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAElC,SAAS,0BAA0B;AAEnC,MAAM,wBAAgD;AAAA,EACpD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT,aAAa;AAAA,EACb,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,SAAS,eAAe,EAAE,UAAU,QAAQ,QAAQ,QAAQ,GAKhE;AACD,QAAM,IAAI,KAAK;AACf,SAAO,oBAAC,SAAI,WAAU,kCACnB,mBAAS,IAAI,YAAU;AACtB,UAAM,UAAU,OAAO,OAAO,EAAE;AAChC,UAAM,QAAQ,SAAS,KAAK,eAAa,UAAU,OAAO,sBAAsB,OAAO,EAAE,CAAC,KAAK,UAAU,CAAC;AAC1G,WAAO,qBAAC,aAAwB,mBAAiB,kBAAkB,OAAO,EAAE,IAAI,WAAU,oFACxF;AAAA,0BAAC,QAAG,IAAI,kBAAkB,OAAO,EAAE,IAAI,WAAU,2BAC/C,+BAAC,QAAK,MAAM,GAAG,iBAAiB,WAAW,OAAO,EAAE,IAAI,WAAU,2KAChE;AAAA,6BAAC,UAAK,WAAU,2BAA2B;AAAA,iBAAO;AAAA,UAAM,EAAE,OAAO,UAAU,OAAO,EAAE;AAAA,WAAE;AAAA,QACtF,oBAAC,cAAW,eAAW,MAAC,WAAU,yCAAwC;AAAA,SAC5E,GACF;AAAA,MACA,oBAAC,SAAI,WAAU,mDACZ,kBAAQ,oBAAC,SAAI,OAAK,MAAC,eAAY,QAAO,WAAU,uEAAsE,8BAAC,sBAAmB,OAAc,GAAE,IAAS,OAAO,OAAO,EAAE,IAAI,qBAAC,SAAI,WAAU,aAAY;AAAA,4BAAC,OAAE,WAAU,iCAAiC,YAAE,oCAAoC,4BAA4B,GAAE;AAAA,QAAI,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAAK,WAAU,iBAAgB,SAAS,MAAM,QAAQ,MAAM,GAAI,YAAE,+BAA+B,OAAO,GAAE;AAAA,SAAS,IAAS,oBAAC,YAAS,WAAU,eAAc,GACthB;AAAA,SATmB,OAAO,EAU5B;AAAA,EACF,CAAC,GACH;AACF;",
+  "names": []
+}

package/dist/modules/design_system/gallery/components/DesignSystemHome.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GalleryLink as Link } from "./GalleryLink.js";
+import { ArrowRight, Code2, Keyboard, Layers, Palette } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { GALLERY_BASE_PATH } from "../registry.js";
+const paths = {
+  foundations: `${GALLERY_BASE_PATH}?family=foundations`,
+  components: `${GALLERY_BASE_PATH}?view=components`,
+  button: `${GALLERY_BASE_PATH}?family=buttons&entry=button`,
+  patterns: `${GALLERY_BASE_PATH}?family=scaffolding`
+};
+const principles = [
+  { id: "semantics", icon: Palette, href: `${paths.foundations}&entry=color-roles` },
+  { id: "states", icon: Layers, href: `${GALLERY_BASE_PATH}?family=feedback` },
+  { id: "keyboard", icon: Keyboard, href: `${GALLERY_BASE_PATH}?family=overlays` },
+  { id: "handoff", icon: Code2, href: paths.button }
+];
+function DesignSystemPrinciples() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-8", "aria-labelledby": "ds-principles-title", children: [
+    /* @__PURE__ */ jsxs("div", { className: "max-w-2xl space-y-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-widest text-muted-foreground", children: t("design_system.portal.principles.eyebrow") }),
+      /* @__PURE__ */ jsx("h2", { id: "ds-principles-title", className: "text-2xl font-semibold tracking-tight", children: t("design_system.portal.principles.title") }),
+      /* @__PURE__ */ jsx("p", { className: "text-base leading-relaxed text-muted-foreground", children: t("design_system.portal.principles.description") })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-x-8 gap-y-6 sm:grid-cols-2", children: principles.map(({ id, icon: Icon, href }) => /* @__PURE__ */ jsxs("article", { className: "space-y-3 border-t border-border py-6", children: [
+      /* @__PURE__ */ jsx(Icon, { className: "size-5 text-muted-foreground", "aria-hidden": true }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium", children: t(`design_system.portal.principles.${id}.title`) }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-prose text-sm leading-relaxed text-muted-foreground", children: t(`design_system.portal.principles.${id}.description`) }),
+      /* @__PURE__ */ jsxs(Link, { href, className: "inline-flex items-center gap-2 rounded-sm text-sm underline underline-offset-4 focus-visible:outline-none focus-visible:shadow-focus", children: [
+        t("design_system.portal.seeExamples"),
+        /* @__PURE__ */ jsx(ArrowRight, { className: "size-4", "aria-hidden": true })
+      ] })
+    ] }, id)) })
+  ] });
+}
+function DesignSystemHome() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-12 pb-8", "data-example": "design-system-home", children: [
+    /* @__PURE__ */ jsx("header", { id: "gallery-page-heading", className: "scroll-mt-36 border-b border-border pb-8 lg:scroll-mt-24", children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl space-y-6", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-widest text-muted-foreground", children: t("design_system.portal.eyebrow") }),
+      /* @__PURE__ */ jsx("h1", { className: "max-w-2xl text-3xl font-medium leading-tight tracking-tight sm:text-5xl", children: t("design_system.portal.title") }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-xl text-base leading-relaxed text-muted-foreground", children: t("design_system.portal.description") }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+        /* @__PURE__ */ jsx(Button, { asChild: true, size: "lg", children: /* @__PURE__ */ jsxs(Link, { href: paths.components, children: [
+          t("design_system.portal.browse"),
+          /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true })
+        ] }) }),
+        /* @__PURE__ */ jsx(Button, { asChild: true, size: "lg", variant: "outline", children: /* @__PURE__ */ jsx(Link, { href: paths.foundations, children: t("design_system.portal.start") }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-4 rounded-xl border border-border bg-card p-6", children: [
+      /* @__PURE__ */ jsx(Palette, { className: "size-6 text-muted-foreground", "aria-hidden": true }),
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-medium", children: t("design_system.styleAgents.title") }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-sm leading-relaxed text-muted-foreground", children: t("design_system.styleAgents.description") }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", children: /* @__PURE__ */ jsxs(Link, { href: `${GALLERY_BASE_PATH}?view=style-agents`, children: [
+        t("design_system.styleAgents.open"),
+        /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true })
+      ] }) })
+    ] })
+  ] });
+}
+export {
+  DesignSystemHome,
+  DesignSystemPrinciples
+};
+//# sourceMappingURL=DesignSystemHome.js.map

package/dist/modules/design_system/gallery/components/DesignSystemHome.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/DesignSystemHome.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { GalleryLink as Link } from './GalleryLink'\nimport { ArrowRight, Code2, Keyboard, Layers, Palette } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { GALLERY_BASE_PATH } from '../registry'\n\nconst paths = {\n  foundations: `${GALLERY_BASE_PATH}?family=foundations`,\n  components: `${GALLERY_BASE_PATH}?view=components`,\n  button: `${GALLERY_BASE_PATH}?family=buttons&entry=button`,\n  patterns: `${GALLERY_BASE_PATH}?family=scaffolding`,\n}\n\nconst principles = [\n  { id: 'semantics', icon: Palette, href: `${paths.foundations}&entry=color-roles` },\n  { id: 'states', icon: Layers, href: `${GALLERY_BASE_PATH}?family=feedback` },\n  { id: 'keyboard', icon: Keyboard, href: `${GALLERY_BASE_PATH}?family=overlays` },\n  { id: 'handoff', icon: Code2, href: paths.button },\n] as const\n\nexport function DesignSystemPrinciples() {\n  const t = useT()\n  return <section className=\"space-y-8\" aria-labelledby=\"ds-principles-title\">\n    <div className=\"max-w-2xl space-y-3\">\n      <p className=\"text-xs font-medium uppercase tracking-widest text-muted-foreground\">{t('design_system.portal.principles.eyebrow')}</p>\n      <h2 id=\"ds-principles-title\" className=\"text-2xl font-semibold tracking-tight\">{t('design_system.portal.principles.title')}</h2>\n      <p className=\"text-base leading-relaxed text-muted-foreground\">{t('design_system.portal.principles.description')}</p>\n    </div>\n    <div className=\"grid gap-x-8 gap-y-6 sm:grid-cols-2\">\n      {principles.map(({ id, icon: Icon, href }) => <article key={id} className=\"space-y-3 border-t border-border py-6\">\n        <Icon className=\"size-5 text-muted-foreground\" aria-hidden />\n        <h3 className=\"text-lg font-medium\">{t(`design_system.portal.principles.${id}.title`)}</h3>\n        <p className=\"max-w-prose text-sm leading-relaxed text-muted-foreground\">{t(`design_system.portal.principles.${id}.description`)}</p>\n        <Link href={href} className=\"inline-flex items-center gap-2 rounded-sm text-sm underline underline-offset-4 focus-visible:outline-none focus-visible:shadow-focus\">{t('design_system.portal.seeExamples')}<ArrowRight className=\"size-4\" aria-hidden /></Link>\n      </article>)}\n    </div>\n  </section>\n}\n\nexport function DesignSystemHome() {\n  const t = useT()\n  return <div className=\"space-y-12 pb-8\" data-example=\"design-system-home\">\n    <header id=\"gallery-page-heading\" className=\"scroll-mt-36 border-b border-border pb-8 lg:scroll-mt-24\">\n      <div className=\"max-w-3xl space-y-6\">\n        <p className=\"text-xs font-medium uppercase tracking-widest text-muted-foreground\">{t('design_system.portal.eyebrow')}</p>\n        <h1 className=\"max-w-2xl text-3xl font-medium leading-tight tracking-tight sm:text-5xl\">{t('design_system.portal.title')}</h1>\n        <p className=\"max-w-xl text-base leading-relaxed text-muted-foreground\">{t('design_system.portal.description')}</p>\n        <div className=\"flex flex-wrap gap-3\">\n          <Button asChild size=\"lg\"><Link href={paths.components}>{t('design_system.portal.browse')}<ArrowRight aria-hidden /></Link></Button>\n          <Button asChild size=\"lg\" variant=\"outline\"><Link href={paths.foundations}>{t('design_system.portal.start')}</Link></Button>\n        </div>\n      </div>\n    </header>\n\n    <section className=\"space-y-4 rounded-xl border border-border bg-card p-6\">\n      <Palette className=\"size-6 text-muted-foreground\" aria-hidden />\n      <h2 className=\"text-2xl font-medium\">{t('design_system.styleAgents.title')}</h2>\n      <p className=\"max-w-2xl text-sm leading-relaxed text-muted-foreground\">{t('design_system.styleAgents.description')}</p>\n      <Button asChild variant=\"outline\"><Link href={`${GALLERY_BASE_PATH}?view=style-agents`}>{t('design_system.styleAgents.open')}<ArrowRight aria-hidden /></Link></Button>\n    </section>\n\n  </div>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/design_system/gallery/components/EntryCard.js

@@ -1,58 +1,64 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, ExternalLink, X } from "lucide-react";
+import * as React from "react";
+import { GalleryLink as Link } from "./GalleryLink.js";
+import { ArrowRight, Check, ExternalLink, X } from "lucide-react";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { LinkButton } from "@open-mercato/ui/primitives/link-button";
-import { DS_DOCS_URL, figmaNodeUrl } from "../registry.js";
+import { DS_DOCS_URL } from "../registry.js";
 import { VariantPreview } from "./VariantPreview.js";
 import { CodeSnippet } from "./CodeSnippet.js";
-function EntryCard({ entry }) {
+import { FamilyEntryPreview } from "./FamilyEntryPreview.js";
+import { EntryHeader } from "./EntryHeader.js";
+function EntryCard({ entry, href, summary = false, summaryPreview = false, onNavigate, hideTitle = false, fullWidth = false }) {
   const t = useT();
+  const availableVariants = React.useMemo(() => entry.id === "file-upload" ? entry.variants.filter((variant) => variant.id !== "drag-and-drop") : entry.variants, [entry.id, entry.variants]);
   return /* @__PURE__ */ jsxs(
     "section",
     {
       id: `gallery-entry-${entry.id}`,
-      "aria-labelledby": `gallery-entry-${entry.id}-title`,
-      className: "scroll-mt-4 space-y-4 rounded-lg border border-border bg-card p-4",
+      "aria-label": hideTitle ? entry.title : void 0,
+      "aria-labelledby": hideTitle ? void 0 : `gallery-entry-${entry.id}-title`,
+      className: summary ? `relative min-w-0 rounded-lg border border-border bg-card p-4 sm:p-5 ${summaryPreview ? `flex flex-col gap-4 ${fullWidth ? "@3xl:col-span-2" : ""}` : "space-y-4"}` : "min-w-0 space-y-6",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx("h3", { id: `gallery-entry-${entry.id}-title`, className: "text-base font-semibold leading-tight", children: entry.title }),
-            entry.descriptionKey ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t(entry.descriptionKey, entry.title) }) : null,
-            /* @__PURE__ */ jsx("code", { className: "block truncate text-xs text-muted-foreground", children: entry.importPath })
+        !hideTitle ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+            /* @__PURE__ */ jsx("h3", { id: `gallery-entry-${entry.id}-title`, className: "text-base font-semibold leading-tight", children: href ? /* @__PURE__ */ jsxs(Link, { href, onNavigate, className: "flex items-center justify-between gap-3 rounded-sm after:absolute after:inset-0 after:rounded-lg focus-visible:outline-none focus-visible:after:shadow-focus", children: [
+              entry.title,
+              summaryPreview ? /* @__PURE__ */ jsx(ArrowRight, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }) : null
+            ] }) : entry.title }),
+            entry.descriptionKey && !summaryPreview ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t(entry.descriptionKey, entry.title) }) : null
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
-            entry.figmaNodeId ? /* @__PURE__ */ jsx(LinkButton, { asChild: true, size: "sm", children: /* @__PURE__ */ jsxs("a", { href: figmaNodeUrl(entry.figmaNodeId), target: "_blank", rel: "noreferrer", children: [
-              t("design_system.gallery.openInFigma", "Open in Figma"),
-              /* @__PURE__ */ jsx(ExternalLink, {})
-            ] }) }) : null,
-            entry.docsAnchor ? /* @__PURE__ */ jsx(LinkButton, { asChild: true, size: "sm", variant: "gray", children: /* @__PURE__ */ jsxs("a", { href: `${DS_DOCS_URL}${entry.docsAnchor}`, target: "_blank", rel: "noreferrer", children: [
-              t("design_system.gallery.viewDocs", "View docs"),
-              /* @__PURE__ */ jsx(ExternalLink, {})
-            ] }) }) : null
-          ] })
-        ] }),
-        entry.usage && (entry.usage.do?.length || entry.usage.dont?.length) ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4 rounded-md border border-border bg-muted/30 p-4 sm:grid-cols-2", children: [
-          entry.usage.do?.length ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("design_system.gallery.usageDo", "Do") }),
-            /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: entry.usage.do.map((rule) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground", children: [
-              /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "mt-0.5 size-3.5 shrink-0 text-status-success-icon" }),
-              /* @__PURE__ */ jsx("span", { children: rule })
-            ] }, rule)) })
-          ] }) : null,
-          entry.usage.dont?.length ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("design_system.gallery.usageDont", "Don't") }),
-            /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: entry.usage.dont.map((rule) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground", children: [
-              /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "mt-0.5 size-3.5 shrink-0 text-status-error-icon" }),
-              /* @__PURE__ */ jsx("span", { children: rule })
-            ] }, rule)) })
-          ] }) : null
+          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-3", children: entry.docsAnchor && !summary ? /* @__PURE__ */ jsx(LinkButton, { asChild: true, size: "sm", variant: "gray", children: /* @__PURE__ */ jsxs("a", { href: `${DS_DOCS_URL}${entry.docsAnchor}`, target: "_blank", rel: "noreferrer", children: [
+            t("design_system.gallery.viewDocs", "View docs"),
+            /* @__PURE__ */ jsx(ExternalLink, {})
+          ] }) }) : null })
         ] }) : null,
-        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: entry.variants.map((variant) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: variant.title }),
-          /* @__PURE__ */ jsx(VariantPreview, { children: variant.render() }),
-          /* @__PURE__ */ jsx(CodeSnippet, { code: variant.code })
-        ] }, variant.id)) })
+        summary && summaryPreview && entry.variants.length ? /* @__PURE__ */ jsx("div", { inert: true, "aria-hidden": "true", className: "flex flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-32 min-w-0 flex-1 flex-wrap items-center gap-4 rounded-md bg-muted/20 p-4 [&>*]:max-w-full", children: /* @__PURE__ */ jsx(FamilyEntryPreview, { entry }) }) }) : null,
+        !summary ? /* @__PURE__ */ jsx(EntryHeader, { entry, variants: availableVariants }) : null,
+        !summary ? /* @__PURE__ */ jsx("div", { className: "space-y-8", children: availableVariants.map((variant) => /* @__PURE__ */ jsxs("div", { id: `gallery-variant-${entry.id}-${variant.id}`, className: "scroll-mt-36 lg:scroll-mt-24 space-y-3", children: [
+          availableVariants.length > 1 ? /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: t(`design_system.gallery.variantTitles.${variant.title}`, variant.title) }) : null,
+          /* @__PURE__ */ jsx(CodeSnippet, { code: variant.code, preview: /* @__PURE__ */ jsx(VariantPreview, { framed: !fullWidth, children: variant.render() }) })
+        ] }, variant.id)) }) : null,
+        !summary && entry.usage && (entry.usage.do?.length || entry.usage.dont?.length) ? /* @__PURE__ */ jsxs("section", { className: "rounded-md border border-border", children: [
+          /* @__PURE__ */ jsx("h3", { className: "p-4 text-sm font-medium", children: t("design_system.portal.nav.principles") }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 border-t border-border p-4 sm:grid-cols-2", children: [
+            entry.usage.do?.length ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("design_system.gallery.usageDo", "Do") }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: entry.usage.do.map((rule, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground", children: [
+                /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "mt-0.5 size-3.5 shrink-0 text-status-success-icon" }),
+                /* @__PURE__ */ jsx("span", { children: t(`design_system.gallery.usage.${entry.id}.do.${index}`, rule) })
+              ] }, rule)) })
+            ] }) : null,
+            entry.usage.dont?.length ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("design_system.gallery.usageDont", "Don't") }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: entry.usage.dont.map((rule, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground", children: [
+                /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "mt-0.5 size-3.5 shrink-0 text-status-error-icon" }),
+                /* @__PURE__ */ jsx("span", { children: t(`design_system.gallery.usage.${entry.id}.dont.${index}`, rule) })
+              ] }, rule)) })
+            ] }) : null
+          ] })
+        ] }) : null
       ]
     }
   );

package/dist/modules/design_system/gallery/components/EntryCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/design_system/gallery/components/EntryCard.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Check, ExternalLink, X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LinkButton } from '@open-mercato/ui/primitives/link-button'\nimport type { GalleryEntry } from '../types'\nimport { DS_DOCS_URL, figmaNodeUrl } from '../registry'\nimport { VariantPreview } from './VariantPreview'\nimport { CodeSnippet } from './CodeSnippet'\n\nexport function EntryCard({ entry }: { entry: GalleryEntry }) {\n  const t = useT()\n\n  return (\n    <section\n      id={`gallery-entry-${entry.id}`}\n      aria-labelledby={`gallery-entry-${entry.id}-title`}\n      className=\"scroll-mt-4 space-y-4 rounded-lg border border-border bg-card p-4\"\n    >\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"min-w-0 space-y-1\">\n          <h3 id={`gallery-entry-${entry.id}-title`} className=\"text-base font-semibold leading-tight\">\n            {entry.title}\n          </h3>\n          {entry.descriptionKey ? (\n            <p className=\"text-sm text-muted-foreground\">{t(entry.descriptionKey, entry.title)}</p>\n          ) : null}\n          <code className=\"block truncate text-xs text-muted-foreground\">{entry.importPath}</code>\n        </div>\n        <div className=\"flex shrink-0 items-center gap-3\">\n          {entry.figmaNodeId ? (\n            <LinkButton asChild size=\"sm\">\n              <a href={figmaNodeUrl(entry.figmaNodeId)} target=\"_blank\" rel=\"noreferrer\">\n                {t('design_system.gallery.openInFigma', 'Open in Figma')}\n                <ExternalLink />\n              </a>\n            </LinkButton>\n          ) : null}\n          {entry.docsAnchor ? (\n            <LinkButton asChild size=\"sm\" variant=\"gray\">\n              <a href={`${DS_DOCS_URL}${entry.docsAnchor}`} target=\"_blank\" rel=\"noreferrer\">\n                {t('design_system.gallery.viewDocs', 'View docs')}\n                <ExternalLink />\n              </a>\n            </LinkButton>\n          ) : null}\n        </div>\n      </div>\n      {entry.usage && (entry.usage.do?.length || entry.usage.dont?.length) ? (\n        <div className=\"grid gap-4 rounded-md border border-border bg-muted/30 p-4 sm:grid-cols-2\">\n          {entry.usage.do?.length ? (\n            <div className=\"space-y-1.5\">\n              <div className=\"text-xs font-medium uppercase tracking-wider text-muted-foreground\">\n                {t('design_system.gallery.usageDo', 'Do')}\n              </div>\n              <ul className=\"space-y-1.5\">\n                {entry.usage.do.map((rule) => (\n                  <li key={rule} className=\"flex items-start gap-2 text-sm text-foreground\">\n                    <Check aria-hidden className=\"mt-0.5 size-3.5 shrink-0 text-status-success-icon\" />\n                    <span>{rule}</span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ) : null}\n          {entry.usage.dont?.length ? (\n            <div className=\"space-y-1.5\">\n              <div className=\"text-xs font-medium uppercase tracking-wider text-muted-foreground\">\n                {t('design_system.gallery.usageDont', \"Don't\")}\n              </div>\n              <ul className=\"space-y-1.5\">\n                {entry.usage.dont.map((rule) => (\n                  <li key={rule} className=\"flex items-start gap-2 text-sm text-foreground\">\n                    <X aria-hidden className=\"mt-0.5 size-3.5 shrink-0 text-status-error-icon\" />\n                    <span>{rule}</span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className=\"space-y-4\">\n        {entry.variants.map((variant) => (\n          <div key={variant.id} className=\"space-y-2\">\n            <div className=\"text-sm font-medium text-foreground\">{variant.title}</div>\n            <VariantPreview>{variant.render()}</VariantPreview>\n            <CodeSnippet code={variant.code} />\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n"],
-  "mappings": ";AAqBQ,SACE,KADF;AAlBR,SAAS,OAAO,cAAc,SAAS;AACvC,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAE3B,SAAS,aAAa,oBAAoB;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAErB,SAAS,UAAU,EAAE,MAAM,GAA4B;AAC5D,QAAM,IAAI,KAAK;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,iBAAiB,MAAM,EAAE;AAAA,MAC7B,mBAAiB,iBAAiB,MAAM,EAAE;AAAA,MAC1C,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,qEACb;AAAA,+BAAC,SAAI,WAAU,qBACb;AAAA,gCAAC,QAAG,IAAI,iBAAiB,MAAM,EAAE,UAAU,WAAU,yCAClD,gBAAM,OACT;AAAA,YACC,MAAM,iBACL,oBAAC,OAAE,WAAU,iCAAiC,YAAE,MAAM,gBAAgB,MAAM,KAAK,GAAE,IACjF;AAAA,YACJ,oBAAC,UAAK,WAAU,gDAAgD,gBAAM,YAAW;AAAA,aACnF;AAAA,UACA,qBAAC,SAAI,WAAU,oCACZ;AAAA,kBAAM,cACL,oBAAC,cAAW,SAAO,MAAC,MAAK,MACvB,+BAAC,OAAE,MAAM,aAAa,MAAM,WAAW,GAAG,QAAO,UAAS,KAAI,cAC3D;AAAA,gBAAE,qCAAqC,eAAe;AAAA,cACvD,oBAAC,gBAAa;AAAA,eAChB,GACF,IACE;AAAA,YACH,MAAM,aACL,oBAAC,cAAW,SAAO,MAAC,MAAK,MAAK,SAAQ,QACpC,+BAAC,OAAE,MAAM,GAAG,WAAW,GAAG,MAAM,UAAU,IAAI,QAAO,UAAS,KAAI,cAC/D;AAAA,gBAAE,kCAAkC,WAAW;AAAA,cAChD,oBAAC,gBAAa;AAAA,eAChB,GACF,IACE;AAAA,aACN;AAAA,WACF;AAAA,QACC,MAAM,UAAU,MAAM,MAAM,IAAI,UAAU,MAAM,MAAM,MAAM,UAC3D,qBAAC,SAAI,WAAU,6EACZ;AAAA,gBAAM,MAAM,IAAI,SACf,qBAAC,SAAI,WAAU,eACb;AAAA,gCAAC,SAAI,WAAU,sEACZ,YAAE,iCAAiC,IAAI,GAC1C;AAAA,YACA,oBAAC,QAAG,WAAU,eACX,gBAAM,MAAM,GAAG,IAAI,CAAC,SACnB,qBAAC,QAAc,WAAU,kDACvB;AAAA,kCAAC,SAAM,eAAW,MAAC,WAAU,qDAAoD;AAAA,cACjF,oBAAC,UAAM,gBAAK;AAAA,iBAFL,IAGT,CACD,GACH;AAAA,aACF,IACE;AAAA,UACH,MAAM,MAAM,MAAM,SACjB,qBAAC,SAAI,WAAU,eACb;AAAA,gCAAC,SAAI,WAAU,sEACZ,YAAE,mCAAmC,OAAO,GAC/C;AAAA,YACA,oBAAC,QAAG,WAAU,eACX,gBAAM,MAAM,KAAK,IAAI,CAAC,SACrB,qBAAC,QAAc,WAAU,kDACvB;AAAA,kCAAC,KAAE,eAAW,MAAC,WAAU,mDAAkD;AAAA,cAC3E,oBAAC,UAAM,gBAAK;AAAA,iBAFL,IAGT,CACD,GACH;AAAA,aACF,IACE;AAAA,WACN,IACE;AAAA,QACJ,oBAAC,SAAI,WAAU,aACZ,gBAAM,SAAS,IAAI,CAAC,YACnB,qBAAC,SAAqB,WAAU,aAC9B;AAAA,8BAAC,SAAI,WAAU,uCAAuC,kBAAQ,OAAM;AAAA,UACpE,oBAAC,kBAAgB,kBAAQ,OAAO,GAAE;AAAA,UAClC,oBAAC,eAAY,MAAM,QAAQ,MAAM;AAAA,aAHzB,QAAQ,EAIlB,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { GalleryLink as Link } from './GalleryLink'\nimport { ArrowRight, Check, ExternalLink, X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LinkButton } from '@open-mercato/ui/primitives/link-button'\nimport type { GalleryEntry } from '../types'\nimport { DS_DOCS_URL } from '../registry'\nimport { VariantPreview } from './VariantPreview'\nimport { CodeSnippet } from './CodeSnippet'\nimport { FamilyEntryPreview } from './FamilyEntryPreview'\nimport { EntryHeader } from './EntryHeader'\n\ntype EntryCardProps = {\n  entry: GalleryEntry\n  href?: string\n  summary?: boolean\n  summaryPreview?: boolean\n  onNavigate?: () => void\n  hideTitle?: boolean\n  fullWidth?: boolean\n}\n\nexport function EntryCard({ entry, href, summary = false, summaryPreview = false, onNavigate, hideTitle = false, fullWidth = false }: EntryCardProps) {\n  const t = useT()\n  const availableVariants = React.useMemo(() => entry.id === 'file-upload' ? entry.variants.filter(variant => variant.id !== 'drag-and-drop') : entry.variants, [entry.id, entry.variants])\n\n\n  return (\n    <section\n      id={`gallery-entry-${entry.id}`}\n      aria-label={hideTitle ? entry.title : undefined}\n      aria-labelledby={hideTitle ? undefined : `gallery-entry-${entry.id}-title`}\n      className={summary ? `relative min-w-0 rounded-lg border border-border bg-card p-4 sm:p-5 ${summaryPreview ? `flex flex-col gap-4 ${fullWidth ? '@3xl:col-span-2' : ''}` : 'space-y-4'}` : 'min-w-0 space-y-6'}\n    >\n      {!hideTitle ? <div className=\"flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"min-w-0 flex-1 space-y-1\">\n          <h3 id={`gallery-entry-${entry.id}-title`} className=\"text-base font-semibold leading-tight\">\n            {href ? <Link href={href} onNavigate={onNavigate} className=\"flex items-center justify-between gap-3 rounded-sm after:absolute after:inset-0 after:rounded-lg focus-visible:outline-none focus-visible:after:shadow-focus\">{entry.title}{summaryPreview ? <ArrowRight className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden /> : null}</Link> : entry.title}\n          </h3>\n          {entry.descriptionKey && !summaryPreview ? (\n            <p className=\"text-sm text-muted-foreground\">{t(entry.descriptionKey, entry.title)}</p>\n          ) : null}\n        </div>\n        <div className=\"flex shrink-0 flex-wrap items-center gap-3\">\n          {entry.docsAnchor && !summary ? (\n            <LinkButton asChild size=\"sm\" variant=\"gray\">\n              <a href={`${DS_DOCS_URL}${entry.docsAnchor}`} target=\"_blank\" rel=\"noreferrer\">\n                {t('design_system.gallery.viewDocs', 'View docs')}\n                <ExternalLink />\n              </a>\n            </LinkButton>\n          ) : null}\n        </div>\n      </div> : null}\n      {summary && summaryPreview && entry.variants.length ? <div inert aria-hidden=\"true\" className=\"flex flex-1\">\n        <div className=\"flex min-h-32 min-w-0 flex-1 flex-wrap items-center gap-4 rounded-md bg-muted/20 p-4 [&>*]:max-w-full\">\n          <FamilyEntryPreview entry={entry} />\n        </div>\n      </div> : null}\n      {!summary ? <EntryHeader entry={entry} variants={availableVariants} /> : null}\n      {!summary ? <div className=\"space-y-8\">\n        {availableVariants.map((variant) => (\n          <div key={variant.id} id={`gallery-variant-${entry.id}-${variant.id}`} className=\"scroll-mt-36 lg:scroll-mt-24 space-y-3\">\n            {availableVariants.length > 1 ? <h2 className=\"text-lg font-medium\">{t(`design_system.gallery.variantTitles.${variant.title}`, variant.title)}</h2> : null}\n            <CodeSnippet code={variant.code} preview={<VariantPreview framed={!fullWidth}>{variant.render()}</VariantPreview>} />\n          </div>\n        ))}\n      </div> : null}\n      {!summary && entry.usage && (entry.usage.do?.length || entry.usage.dont?.length) ? (\n        <section className=\"rounded-md border border-border\">\n          <h3 className=\"p-4 text-sm font-medium\">{t('design_system.portal.nav.principles')}</h3>\n          <div className=\"grid gap-4 border-t border-border p-4 sm:grid-cols-2\">\n          {entry.usage.do?.length ? (\n            <div className=\"space-y-1.5\">\n              <div className=\"text-xs font-medium uppercase tracking-wider text-muted-foreground\">\n                {t('design_system.gallery.usageDo', 'Do')}\n              </div>\n              <ul className=\"space-y-1.5\">\n                {entry.usage.do.map((rule, index) => (\n                  <li key={rule} className=\"flex items-start gap-2 text-sm text-foreground\">\n                    <Check aria-hidden className=\"mt-0.5 size-3.5 shrink-0 text-status-success-icon\" />\n                    <span>{t(`design_system.gallery.usage.${entry.id}.do.${index}`, rule)}</span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ) : null}\n          {entry.usage.dont?.length ? (\n            <div className=\"space-y-1.5\">\n              <div className=\"text-xs font-medium uppercase tracking-wider text-muted-foreground\">\n                {t('design_system.gallery.usageDont', \"Don't\")}\n              </div>\n              <ul className=\"space-y-1.5\">\n                {entry.usage.dont.map((rule, index) => (\n                  <li key={rule} className=\"flex items-start gap-2 text-sm text-foreground\">\n                    <X aria-hidden className=\"mt-0.5 size-3.5 shrink-0 text-status-error-icon\" />\n                    <span>{t(`design_system.gallery.usage.${entry.id}.dont.${index}`, rule)}</span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ) : null}\n          </div>\n        </section>\n      ) : null}\n    </section>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/design_system/gallery/components/EntryHeader.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Copy, LayoutTemplate } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { GALLERY_BASE_PATH } from "../registry.js";
+import { GalleryLink as Link } from "./GalleryLink.js";
+import { copyTextToClipboard } from "./CodeSnippet.js";
+const VARIANT_INDEX_THRESHOLD = 4;
+function isPatternEntry(entry) {
+  return entry.importPath.includes("/design_system/gallery/");
+}
+function resolveImportStatement(entry) {
+  const escapedPath = entry.importPath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const statement = new RegExp(`import[^;'"]*?from\\s+['"]${escapedPath}['"]`);
+  for (const variant of entry.variants) {
+    const match = variant.code.match(statement);
+    if (match) return match[0].replace(/\s+/g, " ");
+  }
+  return entry.importPath;
+}
+function EntryHeader({ entry, variants }) {
+  const t = useT();
+  const searchParams = useSearchParams();
+  const familyId = searchParams?.get("family") ?? null;
+  const importStatement = React.useMemo(() => resolveImportStatement(entry), [entry]);
+  const copyLabel = t("design_system.gallery.copyImport", "Copy import");
+  const onCopy = React.useCallback(async () => {
+    try {
+      await copyTextToClipboard(importStatement);
+      flash(t("design_system.gallery.importCopied", "Import copied to clipboard"), "success");
+    } catch {
+      flash(t("design_system.gallery.copyFailed", "Could not copy the snippet"), "error");
+    }
+  }, [importStatement, t]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", "data-testid": "gallery-entry-header", children: [
+    isPatternEntry(entry) ? /* @__PURE__ */ jsxs("p", { className: "flex items-start gap-2 rounded-md border border-status-info-border bg-status-info-bg p-3 text-sm text-status-info-text", children: [
+      /* @__PURE__ */ jsx(LayoutTemplate, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-status-info-icon" }),
+      /* @__PURE__ */ jsx("span", { children: t("design_system.gallery.patternNote", "This is a sample layout composed from library components, not an importable component. Use it as a pattern.") })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2 rounded-md border border-border bg-muted/50 py-1 pl-3 pr-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("design_system.gallery.importLabel", "Import") }),
+      /* @__PURE__ */ jsx("code", { className: "min-w-0 flex-1 overflow-x-auto whitespace-nowrap py-1 text-xs", children: importStatement }),
+      /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", size: "sm", "aria-label": copyLabel, title: copyLabel, onClick: onCopy, children: /* @__PURE__ */ jsx(Copy, {}) })
+    ] }),
+    variants.length >= VARIANT_INDEX_THRESHOLD ? /* @__PURE__ */ jsxs("nav", { "aria-label": t("design_system.gallery.variantsNav", "Variants"), className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: [
+        t("design_system.gallery.variantsNav", "Variants"),
+        " (",
+        variants.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-4 gap-y-1", children: variants.map((variant) => {
+        const label = t(`design_system.gallery.variantTitles.${variant.title}`, variant.title);
+        const className = "rounded-sm text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:shadow-focus";
+        return /* @__PURE__ */ jsx("li", { children: familyId ? /* @__PURE__ */ jsx(Link, { href: `${GALLERY_BASE_PATH}?family=${familyId}&entry=${entry.id}&variant=${variant.id}`, className, children: label }) : /* @__PURE__ */ jsx("a", { href: `#gallery-variant-${entry.id}-${variant.id}`, className, children: label }) }, variant.id);
+      }) })
+    ] }) : null
+  ] });
+}
+export {
+  EntryHeader,
+  isPatternEntry,
+  resolveImportStatement
+};
+//# sourceMappingURL=EntryHeader.js.map

package/dist/modules/design_system/gallery/components/EntryHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/EntryHeader.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Copy, LayoutTemplate } from 'lucide-react'\nimport { useSearchParams } from 'next/navigation'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport type { GalleryEntry, GalleryVariant } from '../types'\nimport { GALLERY_BASE_PATH } from '../registry'\nimport { GalleryLink as Link } from './GalleryLink'\nimport { copyTextToClipboard } from './CodeSnippet'\n\nconst VARIANT_INDEX_THRESHOLD = 4\n\nexport function isPatternEntry(entry: GalleryEntry): boolean {\n  return entry.importPath.includes('/design_system/gallery/')\n}\n\nexport function resolveImportStatement(entry: GalleryEntry): string {\n  const escapedPath = entry.importPath.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n  const statement = new RegExp(`import[^;'\"]*?from\\\\s+['\"]${escapedPath}['\"]`)\n  for (const variant of entry.variants) {\n    const match = variant.code.match(statement)\n    if (match) return match[0].replace(/\\s+/g, ' ')\n  }\n  return entry.importPath\n}\n\nexport function EntryHeader({ entry, variants }: { entry: GalleryEntry; variants: GalleryVariant[] }) {\n  const t = useT()\n  const searchParams = useSearchParams()\n  const familyId = searchParams?.get('family') ?? null\n  const importStatement = React.useMemo(() => resolveImportStatement(entry), [entry])\n  const copyLabel = t('design_system.gallery.copyImport', 'Copy import')\n\n  const onCopy = React.useCallback(async () => {\n    try {\n      await copyTextToClipboard(importStatement)\n      flash(t('design_system.gallery.importCopied', 'Import copied to clipboard'), 'success')\n    } catch {\n      flash(t('design_system.gallery.copyFailed', 'Could not copy the snippet'), 'error')\n    }\n  }, [importStatement, t])\n\n  return (\n    <div className=\"space-y-4\" data-testid=\"gallery-entry-header\">\n      {isPatternEntry(entry) ? (\n        <p className=\"flex items-start gap-2 rounded-md border border-status-info-border bg-status-info-bg p-3 text-sm text-status-info-text\">\n          <LayoutTemplate aria-hidden className=\"mt-0.5 size-4 shrink-0 text-status-info-icon\" />\n          <span>{t('design_system.gallery.patternNote', 'This is a sample layout composed from library components, not an importable component. Use it as a pattern.')}</span>\n        </p>\n      ) : (\n        <div className=\"flex min-w-0 items-center gap-2 rounded-md border border-border bg-muted/50 py-1 pl-3 pr-1\">\n          <span className=\"shrink-0 text-xs font-medium uppercase tracking-wider text-muted-foreground\">{t('design_system.gallery.importLabel', 'Import')}</span>\n          <code className=\"min-w-0 flex-1 overflow-x-auto whitespace-nowrap py-1 text-xs\">{importStatement}</code>\n          <IconButton type=\"button\" variant=\"ghost\" size=\"sm\" aria-label={copyLabel} title={copyLabel} onClick={onCopy}><Copy /></IconButton>\n        </div>\n      )}\n      {variants.length >= VARIANT_INDEX_THRESHOLD ? (\n        <nav aria-label={t('design_system.gallery.variantsNav', 'Variants')} className=\"space-y-2\">\n          <p className=\"text-xs font-medium uppercase tracking-wider text-muted-foreground\">{t('design_system.gallery.variantsNav', 'Variants')} ({variants.length})</p>\n          <ul className=\"flex flex-wrap gap-x-4 gap-y-1\">\n            {variants.map((variant) => {\n              const label = t(`design_system.gallery.variantTitles.${variant.title}`, variant.title)\n              const className = 'rounded-sm text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:shadow-focus'\n              return (\n                <li key={variant.id}>\n                  {familyId\n                    ? <Link href={`${GALLERY_BASE_PATH}?family=${familyId}&entry=${entry.id}&variant=${variant.id}`} className={className}>{label}</Link>\n                    : <a href={`#gallery-variant-${entry.id}-${variant.id}`} className={className}>{label}</a>}\n                </li>\n              )\n            })}\n          </ul>\n        </nav>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": ";AAgDQ,SACE,KADF;AA9CR,YAAY,WAAW;AACvB,SAAS,MAAM,sBAAsB;AACrC,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AAEtB,SAAS,yBAAyB;AAClC,SAAS,eAAe,YAAY;AACpC,SAAS,2BAA2B;AAEpC,MAAM,0BAA0B;AAEzB,SAAS,eAAe,OAA8B;AAC3D,SAAO,MAAM,WAAW,SAAS,yBAAyB;AAC5D;AAEO,SAAS,uBAAuB,OAA6B;AAClE,QAAM,cAAc,MAAM,WAAW,QAAQ,uBAAuB,MAAM;AAC1E,QAAM,YAAY,IAAI,OAAO,6BAA6B,WAAW,MAAM;AAC3E,aAAW,WAAW,MAAM,UAAU;AACpC,UAAM,QAAQ,QAAQ,KAAK,MAAM,SAAS;AAC1C,QAAI,MAAO,QAAO,MAAM,CAAC,EAAE,QAAQ,QAAQ,GAAG;AAAA,EAChD;AACA,SAAO,MAAM;AACf;AAEO,SAAS,YAAY,EAAE,OAAO,SAAS,GAAwD;AACpG,QAAM,IAAI,KAAK;AACf,QAAM,eAAe,gBAAgB;AACrC,QAAM,WAAW,cAAc,IAAI,QAAQ,KAAK;AAChD,QAAM,kBAAkB,MAAM,QAAQ,MAAM,uBAAuB,KAAK,GAAG,CAAC,KAAK,CAAC;AAClF,QAAM,YAAY,EAAE,oCAAoC,aAAa;AAErE,QAAM,SAAS,MAAM,YAAY,YAAY;AAC3C,QAAI;AACF,YAAM,oBAAoB,eAAe;AACzC,YAAM,EAAE,sCAAsC,4BAA4B,GAAG,SAAS;AAAA,IACxF,QAAQ;AACN,YAAM,EAAE,oCAAoC,4BAA4B,GAAG,OAAO;AAAA,IACpF;AAAA,EACF,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAEvB,SACE,qBAAC,SAAI,WAAU,aAAY,eAAY,wBACpC;AAAA,mBAAe,KAAK,IACnB,qBAAC,OAAE,WAAU,0HACX;AAAA,0BAAC,kBAAe,eAAW,MAAC,WAAU,gDAA+C;AAAA,MACrF,oBAAC,UAAM,YAAE,qCAAqC,6GAA6G,GAAE;AAAA,OAC/J,IAEA,qBAAC,SAAI,WAAU,8FACb;AAAA,0BAAC,UAAK,WAAU,+EAA+E,YAAE,qCAAqC,QAAQ,GAAE;AAAA,MAChJ,oBAAC,UAAK,WAAU,iEAAiE,2BAAgB;AAAA,MACjG,oBAAC,cAAW,MAAK,UAAS,SAAQ,SAAQ,MAAK,MAAK,cAAY,WAAW,OAAO,WAAW,SAAS,QAAQ,8BAAC,QAAK,GAAE;AAAA,OACxH;AAAA,IAED,SAAS,UAAU,0BAClB,qBAAC,SAAI,cAAY,EAAE,qCAAqC,UAAU,GAAG,WAAU,aAC7E;AAAA,2BAAC,OAAE,WAAU,sEAAsE;AAAA,UAAE,qCAAqC,UAAU;AAAA,QAAE;AAAA,QAAG,SAAS;AAAA,QAAO;AAAA,SAAC;AAAA,MAC1J,oBAAC,QAAG,WAAU,kCACX,mBAAS,IAAI,CAAC,YAAY;AACzB,cAAM,QAAQ,EAAE,uCAAuC,QAAQ,KAAK,IAAI,QAAQ,KAAK;AACrF,cAAM,YAAY;AAClB,eACE,oBAAC,QACE,qBACG,oBAAC,QAAK,MAAM,GAAG,iBAAiB,WAAW,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,IAAI,WAAuB,iBAAM,IAC5H,oBAAC,OAAE,MAAM,oBAAoB,MAAM,EAAE,IAAI,QAAQ,EAAE,IAAI,WAAuB,iBAAM,KAHjF,QAAQ,EAIjB;AAAA,MAEJ,CAAC,GACH;AAAA,OACF,IACE;AAAA,KACN;AAEJ;",
+  "names": []
+}

package/dist/modules/design_system/gallery/components/FamilyEntryPreview.js

@@ -0,0 +1,19 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { SourceIcon } from "@open-mercato/ui/assets/source-icons";
+import { representativeVariantIds } from "../presentation.js";
+import { getCompactEntrySpecimen } from "./CompactEntrySpecimen.js";
+function FamilyEntryPreview({ entry }) {
+  const compact = getCompactEntrySpecimen(entry.id);
+  if (compact !== void 0) return compact;
+  if (entry.id === "button") return /* @__PURE__ */ jsx(Fragment, { children: entry.variants.filter((variant) => ["default", "outline", "ghost"].includes(variant.id)).map((variant) => /* @__PURE__ */ jsx(React.Fragment, { children: variant.render() }, variant.id)) });
+  if (entry.id === "icon-registry") return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-6", children: ["activity", "arrow-right", "bell", "calendar", "check", "house", "plus", "search"].map((name) => /* @__PURE__ */ jsx(SourceIcon, { name, "aria-hidden": "true", className: "size-6" }, name)) });
+  const overviewVariant = [representativeVariantIds[entry.id], "default"].map((id) => entry.variants.find((variant) => variant.id === id)).find(Boolean) ?? entry.variants[0];
+  if (entry.id === "table") return /* @__PURE__ */ jsx("div", { className: "w-full min-w-0 overflow-x-auto", children: overviewVariant?.render() });
+  return overviewVariant?.render() ?? null;
+}
+export {
+  FamilyEntryPreview
+};
+//# sourceMappingURL=FamilyEntryPreview.js.map

package/dist/modules/design_system/gallery/components/FamilyEntryPreview.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/FamilyEntryPreview.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { SourceIcon } from '@open-mercato/ui/assets/source-icons'\nimport type { GalleryEntry } from '../types'\nimport { representativeVariantIds } from '../presentation'\nimport { getCompactEntrySpecimen } from './CompactEntrySpecimen'\n\nexport function FamilyEntryPreview({ entry }: { entry: GalleryEntry }) {\n  const compact = getCompactEntrySpecimen(entry.id)\n  if (compact !== undefined) return compact\n\n  if (entry.id === 'button') return <>{entry.variants.filter(variant => ['default', 'outline', 'ghost'].includes(variant.id)).map(variant => <React.Fragment key={variant.id}>{variant.render()}</React.Fragment>)}</>\n\n  if (entry.id === 'icon-registry') return <div className=\"grid grid-cols-4 gap-6\">{(['activity', 'arrow-right', 'bell', 'calendar', 'check', 'house', 'plus', 'search'] as const).map(name => <SourceIcon key={name} name={name} aria-hidden=\"true\" className=\"size-6\" />)}</div>\n\n  const overviewVariant = [representativeVariantIds[entry.id], 'default']\n    .map(id => entry.variants.find(variant => variant.id === id))\n    .find(Boolean) ?? entry.variants[0]\n  if (entry.id === 'table') return <div className=\"w-full min-w-0 overflow-x-auto\">{overviewVariant?.render()}</div>\n  return overviewVariant?.render() ?? null\n}\n"],
+  "mappings": ";AAYoC,mBAAyG,WAAzG;AAVpC,YAAY,WAAW;AACvB,SAAS,kBAAkB;AAE3B,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AAEjC,SAAS,mBAAmB,EAAE,MAAM,GAA4B;AACrE,QAAM,UAAU,wBAAwB,MAAM,EAAE;AAChD,MAAI,YAAY,OAAW,QAAO;AAElC,MAAI,MAAM,OAAO,SAAU,QAAO,gCAAG,gBAAM,SAAS,OAAO,aAAW,CAAC,WAAW,WAAW,OAAO,EAAE,SAAS,QAAQ,EAAE,CAAC,EAAE,IAAI,aAAW,oBAAC,MAAM,UAAN,EAAiC,kBAAQ,OAAO,KAA5B,QAAQ,EAAsB,CAAiB,GAAE;AAEjN,MAAI,MAAM,OAAO,gBAAiB,QAAO,oBAAC,SAAI,WAAU,0BAA2B,WAAC,YAAY,eAAe,QAAQ,YAAY,SAAS,SAAS,QAAQ,QAAQ,EAAY,IAAI,UAAQ,oBAAC,cAAsB,MAAY,eAAY,QAAO,WAAU,YAA/C,IAAwD,CAAE,GAAE;AAE1Q,QAAM,kBAAkB,CAAC,yBAAyB,MAAM,EAAE,GAAG,SAAS,EACnE,IAAI,QAAM,MAAM,SAAS,KAAK,aAAW,QAAQ,OAAO,EAAE,CAAC,EAC3D,KAAK,OAAO,KAAK,MAAM,SAAS,CAAC;AACpC,MAAI,MAAM,OAAO,QAAS,QAAO,oBAAC,SAAI,WAAU,kCAAkC,2BAAiB,OAAO,GAAE;AAC5G,SAAO,iBAAiB,OAAO,KAAK;AACtC;",
+  "names": []
+}

package/dist/modules/design_system/gallery/components/FoundationGuide.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GalleryLink as Link } from "./GalleryLink.js";
+import { ArrowRight } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { CodeSnippet } from "./CodeSnippet.js";
+import { ThemeTokenReference } from "./ThemeTokenReference.js";
+import { GALLERY_BASE_PATH } from "../registry.js";
+function FoundationGuide({ entries }) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-12 pb-12", children: [
+    /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-muted-foreground", children: t("design_system.foundations.intro") }),
+    entries.some((entry) => entry.id === "brand-colors" || entry.id === "color-tokens") ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "max-w-xl text-sm text-muted-foreground", children: t("design_system.styleAgents.referenceHint") }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", children: /* @__PURE__ */ jsxs(Link, { href: `${GALLERY_BASE_PATH}?view=style-agents`, children: [
+        t("design_system.styleAgents.open"),
+        /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true })
+      ] }) })
+    ] }) : null,
+    entries.map((entry) => /* @__PURE__ */ jsxs("section", { id: `gallery-entry-${entry.id}`, "aria-labelledby": `gallery-entry-${entry.id}-title`, className: "min-w-0 scroll-mt-36 lg:scroll-mt-24 space-y-8 border-t border-border pt-8", children: [
+      /* @__PURE__ */ jsxs("header", { className: "max-w-2xl space-y-3", children: [
+        /* @__PURE__ */ jsx("h2", { id: `gallery-entry-${entry.id}-title`, className: "text-2xl font-medium tracking-tight", children: t(`design_system.foundations.${entry.id}.title`, entry.title) }),
+        /* @__PURE__ */ jsx("p", { className: "text-base leading-relaxed text-muted-foreground", children: t(`design_system.foundations.${entry.id}.description`) })
+      ] }),
+      /* @__PURE__ */ jsx(CodeSnippet, { code: entry.variants.map((variant) => variant.code).join("\n\n"), preview: /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+        entry.variants.map((variant) => /* @__PURE__ */ jsxs("div", { id: `gallery-variant-${entry.id}-${variant.id}`, className: "min-w-0 scroll-mt-36 space-y-4 lg:scroll-mt-24", children: [
+          entry.variants.length > 1 && entry.id !== "typography" ? /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-muted-foreground", children: t(`design_system.foundations.variants.${variant.id}`, variant.title) }) : null,
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 overflow-x-auto py-2", children: variant.render() })
+        ] }, variant.id)),
+        entry.id === "color-tokens" ? /* @__PURE__ */ jsx(ThemeTokenReference, {}) : null
+      ] }) }),
+      entry.usage ? /* @__PURE__ */ jsxs("section", { className: "rounded-md border border-border", children: [
+        /* @__PURE__ */ jsx("h3", { className: "p-4 text-sm font-medium", children: t("design_system.portal.nav.principles") }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-6 border-t border-border p-4 sm:grid-cols-2", children: ["do", "dont"].map((kind) => entry.usage?.[kind]?.length ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: t(kind === "do" ? "design_system.gallery.usageDo" : "design_system.gallery.usageDont") }),
+          /* @__PURE__ */ jsx("ul", { className: "list-disc space-y-2 pl-4 text-sm leading-relaxed text-muted-foreground", children: entry.usage[kind]?.map((rule, index) => /* @__PURE__ */ jsx("li", { children: t(`design_system.gallery.usage.${entry.id}.${kind}.${index}`, rule) }, rule)) })
+        ] }, kind) : null) })
+      ] }) : null
+    ] }, entry.id))
+  ] });
+}
+export {
+  FoundationGuide
+};
+//# sourceMappingURL=FoundationGuide.js.map

package/dist/modules/design_system/gallery/components/FoundationGuide.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/FoundationGuide.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { GalleryLink as Link } from './GalleryLink'\nimport { ArrowRight } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport type { GalleryEntry } from '../types'\nimport { CodeSnippet } from './CodeSnippet'\nimport { ThemeTokenReference } from './ThemeTokenReference'\nimport { GALLERY_BASE_PATH } from '../registry'\n\nexport function FoundationGuide({ entries }: { entries: GalleryEntry[] }) {\n  const t = useT()\n  return <div className=\"space-y-12 pb-12\">\n    <p className=\"max-w-2xl text-base leading-relaxed text-muted-foreground\">{t('design_system.foundations.intro')}</p>\n    {entries.some(entry => entry.id === 'brand-colors' || entry.id === 'color-tokens') ? <div className=\"flex flex-wrap items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-4\">\n      <p className=\"max-w-xl text-sm text-muted-foreground\">{t('design_system.styleAgents.referenceHint')}</p>\n      <Button asChild variant=\"outline\"><Link href={`${GALLERY_BASE_PATH}?view=style-agents`}>{t('design_system.styleAgents.open')}<ArrowRight aria-hidden /></Link></Button>\n    </div> : null}\n    {entries.map(entry => <section key={entry.id} id={`gallery-entry-${entry.id}`} aria-labelledby={`gallery-entry-${entry.id}-title`} className=\"min-w-0 scroll-mt-36 lg:scroll-mt-24 space-y-8 border-t border-border pt-8\">\n      <header className=\"max-w-2xl space-y-3\">\n        <h2 id={`gallery-entry-${entry.id}-title`} className=\"text-2xl font-medium tracking-tight\">{t(`design_system.foundations.${entry.id}.title`, entry.title)}</h2>\n        <p className=\"text-base leading-relaxed text-muted-foreground\">{t(`design_system.foundations.${entry.id}.description`)}</p>\n      </header>\n      <CodeSnippet code={entry.variants.map(variant => variant.code).join('\\n\\n')} preview={<div className=\"space-y-8\">{entry.variants.map(variant => <div key={variant.id} id={`gallery-variant-${entry.id}-${variant.id}`} className=\"min-w-0 scroll-mt-36 space-y-4 lg:scroll-mt-24\">\n        {entry.variants.length > 1 && entry.id !== 'typography' ? <h3 className=\"text-sm font-medium text-muted-foreground\">{t(`design_system.foundations.variants.${variant.id}`, variant.title)}</h3> : null}\n        <div className=\"min-w-0 overflow-x-auto py-2\">{variant.render()}</div>\n      </div>)}\n      {entry.id === 'color-tokens' ? <ThemeTokenReference /> : null}\n      </div>} />\n      {entry.usage ? <section className=\"rounded-md border border-border\">\n        <h3 className=\"p-4 text-sm font-medium\">{t('design_system.portal.nav.principles')}</h3>\n        <div className=\"grid gap-6 border-t border-border p-4 sm:grid-cols-2\">\n          {(['do', 'dont'] as const).map(kind => entry.usage?.[kind]?.length ? <div key={kind} className=\"space-y-3\">\n            <h3 className=\"text-sm font-medium\">{t(kind === 'do' ? 'design_system.gallery.usageDo' : 'design_system.gallery.usageDont')}</h3>\n            <ul className=\"list-disc space-y-2 pl-4 text-sm leading-relaxed text-muted-foreground\">{entry.usage[kind]?.map((rule, index) => <li key={rule}>{t(`design_system.gallery.usage.${entry.id}.${kind}.${index}`, rule)}</li>)}</ul>\n          </div> : null)}\n        </div>\n      </section> : null}\n    </section>)}\n  </div>\n}\n"],
+  "mappings": ";AAeI,cAGoC,YAHpC;AAZJ,SAAS,eAAe,YAAY;AACpC,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAE3B,SAAS,gBAAgB,EAAE,QAAQ,GAAgC;AACxE,QAAM,IAAI,KAAK;AACf,SAAO,qBAAC,SAAI,WAAU,oBACpB;AAAA,wBAAC,OAAE,WAAU,6DAA6D,YAAE,iCAAiC,GAAE;AAAA,IAC9G,QAAQ,KAAK,WAAS,MAAM,OAAO,kBAAkB,MAAM,OAAO,cAAc,IAAI,qBAAC,SAAI,WAAU,qGAClG;AAAA,0BAAC,OAAE,WAAU,0CAA0C,YAAE,yCAAyC,GAAE;AAAA,MACpG,oBAAC,UAAO,SAAO,MAAC,SAAQ,WAAU,+BAAC,QAAK,MAAM,GAAG,iBAAiB,sBAAuB;AAAA,UAAE,gCAAgC;AAAA,QAAE,oBAAC,cAAW,eAAW,MAAC;AAAA,SAAE,GAAO;AAAA,OAChK,IAAS;AAAA,IACR,QAAQ,IAAI,WAAS,qBAAC,aAAuB,IAAI,iBAAiB,MAAM,EAAE,IAAI,mBAAiB,iBAAiB,MAAM,EAAE,UAAU,WAAU,8EAC3I;AAAA,2BAAC,YAAO,WAAU,uBAChB;AAAA,4BAAC,QAAG,IAAI,iBAAiB,MAAM,EAAE,UAAU,WAAU,uCAAuC,YAAE,6BAA6B,MAAM,EAAE,UAAU,MAAM,KAAK,GAAE;AAAA,QAC1J,oBAAC,OAAE,WAAU,mDAAmD,YAAE,6BAA6B,MAAM,EAAE,cAAc,GAAE;AAAA,SACzH;AAAA,MACA,oBAAC,eAAY,MAAM,MAAM,SAAS,IAAI,aAAW,QAAQ,IAAI,EAAE,KAAK,MAAM,GAAG,SAAS,qBAAC,SAAI,WAAU,aAAa;AAAA,cAAM,SAAS,IAAI,aAAW,qBAAC,SAAqB,IAAI,mBAAmB,MAAM,EAAE,IAAI,QAAQ,EAAE,IAAI,WAAU,kDAC9N;AAAA,gBAAM,SAAS,SAAS,KAAK,MAAM,OAAO,eAAe,oBAAC,QAAG,WAAU,6CAA6C,YAAE,sCAAsC,QAAQ,EAAE,IAAI,QAAQ,KAAK,GAAE,IAAQ;AAAA,UAClM,oBAAC,SAAI,WAAU,gCAAgC,kBAAQ,OAAO,GAAE;AAAA,aAFwF,QAAQ,EAGlK,CAAM;AAAA,QACL,MAAM,OAAO,iBAAiB,oBAAC,uBAAoB,IAAK;AAAA,SACzD,GAAQ;AAAA,MACP,MAAM,QAAQ,qBAAC,aAAQ,WAAU,mCAChC;AAAA,4BAAC,QAAG,WAAU,2BAA2B,YAAE,qCAAqC,GAAE;AAAA,QAClF,oBAAC,SAAI,WAAU,wDACX,WAAC,MAAM,MAAM,EAAY,IAAI,UAAQ,MAAM,QAAQ,IAAI,GAAG,SAAS,qBAAC,SAAe,WAAU,aAC7F;AAAA,8BAAC,QAAG,WAAU,uBAAuB,YAAE,SAAS,OAAO,kCAAkC,iCAAiC,GAAE;AAAA,UAC5H,oBAAC,QAAG,WAAU,0EAA0E,gBAAM,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,UAAU,oBAAC,QAAe,YAAE,+BAA+B,MAAM,EAAE,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,KAAzE,IAA2E,CAAK,GAAE;AAAA,aAF9I,IAG/E,IAAS,IAAI,GACf;AAAA,SACF,IAAa;AAAA,SAnBqB,MAAM,EAoB1C,CAAU;AAAA,KACZ;AACF;",
+  "names": []
+}

package/dist/modules/design_system/gallery/components/GalleryLink.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Link from "next/link";
+import { GALLERY_BASE_PATH } from "../registry.js";
+function navigateGallery(href) {
+  const target = new URL(href, window.location.href);
+  if (target.origin !== window.location.origin || target.pathname !== GALLERY_BASE_PATH || window.location.pathname !== GALLERY_BASE_PATH) return false;
+  if (target.href !== window.location.href) window.history.pushState(null, "", target.href);
+  return true;
+}
+function GalleryLink({ onNavigate, ...props }) {
+  return /* @__PURE__ */ jsx(Link, { ...props, prefetch: false, onNavigate: (event) => {
+    if (typeof props.href === "string" && navigateGallery(props.href)) event.preventDefault();
+    onNavigate?.(event);
+  } });
+}
+export {
+  GalleryLink,
+  navigateGallery
+};
+//# sourceMappingURL=GalleryLink.js.map

package/dist/modules/design_system/gallery/components/GalleryLink.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/GalleryLink.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { GALLERY_BASE_PATH } from '../registry'\n\nexport function navigateGallery(href: string): boolean {\n  const target = new URL(href, window.location.href)\n  if (target.origin !== window.location.origin || target.pathname !== GALLERY_BASE_PATH || window.location.pathname !== GALLERY_BASE_PATH) return false\n  if (target.href !== window.location.href) window.history.pushState(null, '', target.href)\n  return true\n}\n\nexport function GalleryLink({ onNavigate, ...props }: React.ComponentProps<typeof Link>) {\n  return <Link {...props} prefetch={false} onNavigate={event => {\n    if (typeof props.href === 'string' && navigateGallery(props.href)) event.preventDefault()\n    onNavigate?.(event)\n  }} />\n}\n"],
+  "mappings": ";AAcS;AAXT,OAAO,UAAU;AACjB,SAAS,yBAAyB;AAE3B,SAAS,gBAAgB,MAAuB;AACrD,QAAM,SAAS,IAAI,IAAI,MAAM,OAAO,SAAS,IAAI;AACjD,MAAI,OAAO,WAAW,OAAO,SAAS,UAAU,OAAO,aAAa,qBAAqB,OAAO,SAAS,aAAa,kBAAmB,QAAO;AAChJ,MAAI,OAAO,SAAS,OAAO,SAAS,KAAM,QAAO,QAAQ,UAAU,MAAM,IAAI,OAAO,IAAI;AACxF,SAAO;AACT;AAEO,SAAS,YAAY,EAAE,YAAY,GAAG,MAAM,GAAsC;AACvF,SAAO,oBAAC,QAAM,GAAG,OAAO,UAAU,OAAO,YAAY,WAAS;AAC5D,QAAI,OAAO,MAAM,SAAS,YAAY,gBAAgB,MAAM,IAAI,EAAG,OAAM,eAAe;AACxF,iBAAa,KAAK;AAAA,EACpB,GAAG;AACL;",
+  "names": []
+}