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

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

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GalleryLink as Link } from "./GalleryLink.js";
+import { ArrowRight } from "lucide-react";
+import { LinkButton } from "@open-mercato/ui/primitives/link-button";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { EmptyState } from "@open-mercato/ui/primitives/empty-state";
+import { Pagination } from "@open-mercato/ui/primitives/pagination";
+import { SearchInput } from "@open-mercato/ui/primitives/search-input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@open-mercato/ui/primitives/select";
+import { GALLERY_BASE_PATH } from "../registry.js";
+import { sourceLibrary } from "../source-library.generated.js";
+const pageSize = 12;
+const allGroups = "__all";
+const groupTranslationKey = (group) => `design_system.gallery.sourceLibrary.groups.${group.toLowerCase().replace(/\s+/g, "-")}`;
+function SourceLibrary() {
+  const t = useT();
+  const storyTitle = (story) => story.family === "foundations" ? t(`design_system.foundations.${story.entryId}.title`, story.title) : story.title;
+  const [query, setQuery] = React.useState("");
+  const [group, setGroup] = React.useState(allGroups);
+  const [page, setPage] = React.useState(1);
+  const groups = React.useMemo(() => Array.from(new Set(sourceLibrary.pages.map((item) => item.group))), []);
+  const needle = query.trim().toLowerCase();
+  const filtered = sourceLibrary.pages.filter((item) => {
+    const matchesGroup = group === allGroups || item.group === group;
+    const translatedName = t(`design_system.gallery.sourceLibrary.names.${item.id}`, item.name);
+    const translatedGroup = t(groupTranslationKey(item.group), item.group);
+    const searchTerms = t(`design_system.gallery.sourceLibrary.searchTerms.${item.id}`, "");
+    const searchable = `${item.name} ${translatedName} ${item.group} ${translatedGroup} ${searchTerms} ${item.stories.map((story) => `${story.title} ${storyTitle(story)}`).join(" ")} ${item.sets.map((set) => `${set.name} ${Object.values(set.axes).flat().join(" ")}`).join(" ")} ${item.standalone.map((asset) => asset.name).join(" ")}`;
+    return matchesGroup && searchable.toLowerCase().includes(needle);
+  });
+  const visible = filtered.slice((page - 1) * pageSize, page * pageSize);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 space-y-4", "data-example": "native-source-library", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sourceLibrary.boundary") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row", children: [
+      /* @__PURE__ */ jsx(SearchInput, { className: "sm:flex-1", value: query, onChange: (value) => {
+        setQuery(value);
+        setPage(1);
+      }, "aria-label": t("design_system.gallery.sourceLibrary.search"), placeholder: t("design_system.gallery.sourceLibrary.search") }),
+      /* @__PURE__ */ jsxs(Select, { value: group, onValueChange: (value) => {
+        setGroup(value);
+        setPage(1);
+      }, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full sm:w-64", "aria-label": t("design_system.gallery.sourceLibrary.group"), children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: allGroups, children: t("design_system.gallery.sourceLibrary.allGroups") }),
+          groups.map((value) => /* @__PURE__ */ jsx(SelectItem, { value, children: t(groupTranslationKey(value), value) }, value))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm text-muted-foreground", children: t("design_system.gallery.sourceLibrary.count", { visible: filtered.length, total: sourceLibrary.pages.length }) }),
+    visible.length ? /* @__PURE__ */ jsx("div", { className: "divide-y divide-border rounded-lg border border-border bg-card", children: visible.map((item) => {
+      const variantCount = item.sets.reduce((total, set) => total + set.count, 0);
+      const hasInventory = item.sets.length > 0 || item.standaloneCount > 0 || item.frameCount > 0;
+      return /* @__PURE__ */ jsxs("article", { className: "grid min-w-0 gap-4 p-5 lg:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs("header", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold leading-tight", children: t(`design_system.gallery.sourceLibrary.names.${item.id}`, item.name) }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(groupTranslationKey(item.group), item.group) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3 lg:col-span-2", children: [
+          item.stories.length ? /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-6 gap-y-3", "aria-label": t("design_system.gallery.sourceLibrary.examples"), children: item.stories.map((story) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(LinkButton, { asChild: true, variant: "black", children: /* @__PURE__ */ jsxs(Link, { href: `${GALLERY_BASE_PATH}?family=${story.family}&entry=${story.entryId}`, children: [
+            storyTitle(story),
+            /* @__PURE__ */ jsx(ArrowRight, { className: "size-4 text-muted-foreground", "aria-hidden": "true" })
+          ] }) }) }, `${story.family}:${story.entryId}`)) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sourceLibrary.referenceOnly") }),
+          hasInventory ? /* @__PURE__ */ jsxs("section", { className: "text-sm", children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground", children: t("design_system.gallery.sourceLibrary.details") }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-4 border-l border-border pl-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground", children: [
+                item.sets.length ? /* @__PURE__ */ jsx("span", { children: t("design_system.gallery.sourceLibrary.componentSets", { count: item.sets.length }) }) : null,
+                variantCount ? /* @__PURE__ */ jsx("span", { children: t("design_system.gallery.sourceLibrary.variants", { count: variantCount }) }) : null,
+                item.frameCount ? /* @__PURE__ */ jsx("span", { children: t("design_system.gallery.sourceLibrary.frames", { count: item.frameCount }) }) : null,
+                item.standaloneCount ? /* @__PURE__ */ jsx("span", { children: t("design_system.gallery.sourceLibrary.assets", { count: item.standaloneCount }) }) : null
+              ] }),
+              item.sets.map((set) => /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: set.name }),
+                /* @__PURE__ */ jsx("dl", { className: "space-y-2", children: Object.entries(set.axes).map(([axis, values]) => /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
+                  /* @__PURE__ */ jsx("dt", { className: "font-medium", children: axis }),
+                  /* @__PURE__ */ jsx("dd", { className: "break-words text-muted-foreground", children: values.join(" \xB7 ") })
+                ] }, axis)) })
+              ] }, set.id))
+            ] })
+          ] }) : null
+        ] })
+      ] }, item.id);
+    }) }) : /* @__PURE__ */ jsx(EmptyState, { title: t("design_system.gallery.noResults") }),
+    filtered.length > pageSize ? /* @__PURE__ */ jsx(Pagination, { page, pageSize, total: filtered.length, showPageSize: false, onPageChange: setPage, "aria-label": t("design_system.gallery.sourceLibrary.pages") }) : null
+  ] });
+}
+export {
+  SourceLibrary
+};
+//# sourceMappingURL=SourceLibrary.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/SourceLibrary.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { GalleryLink as Link } from './GalleryLink'\nimport { ArrowRight } from 'lucide-react'\nimport { LinkButton } from '@open-mercato/ui/primitives/link-button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { EmptyState } from '@open-mercato/ui/primitives/empty-state'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'\nimport { GALLERY_BASE_PATH } from '../registry'\nimport { sourceLibrary } from '../source-library.generated'\n\nconst pageSize = 12\nconst allGroups = '__all'\nconst groupTranslationKey = (group: string) => `design_system.gallery.sourceLibrary.groups.${group.toLowerCase().replace(/\\s+/g, '-')}`\n\nexport function SourceLibrary() {\n  const t = useT()\n  const storyTitle = (story: { family: string; entryId: string; title: string }) => story.family === 'foundations'\n    ? t(`design_system.foundations.${story.entryId}.title`, story.title)\n    : story.title\n  const [query, setQuery] = React.useState('')\n  const [group, setGroup] = React.useState(allGroups)\n  const [page, setPage] = React.useState(1)\n  const groups = React.useMemo(() => Array.from(new Set(sourceLibrary.pages.map(item => item.group))), [])\n  const needle = query.trim().toLowerCase()\n  const filtered = sourceLibrary.pages.filter(item => {\n    const matchesGroup = group === allGroups || item.group === group\n    const translatedName = t(`design_system.gallery.sourceLibrary.names.${item.id}`, item.name)\n    const translatedGroup = t(groupTranslationKey(item.group), item.group)\n    const searchTerms = t(`design_system.gallery.sourceLibrary.searchTerms.${item.id}`, '')\n    const searchable = `${item.name} ${translatedName} ${item.group} ${translatedGroup} ${searchTerms} ${item.stories.map(story => `${story.title} ${storyTitle(story)}`).join(' ')} ${item.sets.map(set => `${set.name} ${Object.values(set.axes).flat().join(' ')}`).join(' ')} ${item.standalone.map(asset => asset.name).join(' ')}`\n    return matchesGroup && searchable.toLowerCase().includes(needle)\n  })\n  const visible = filtered.slice((page - 1) * pageSize, page * pageSize)\n\n  return <div className=\"w-full min-w-0 space-y-4\" data-example=\"native-source-library\">\n    <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sourceLibrary.boundary')}</p>\n    <div className=\"flex flex-col gap-3 sm:flex-row\">\n      <SearchInput className=\"sm:flex-1\" value={query} onChange={value => { setQuery(value); setPage(1) }} aria-label={t('design_system.gallery.sourceLibrary.search')} placeholder={t('design_system.gallery.sourceLibrary.search')} />\n      <Select value={group} onValueChange={value => { setGroup(value); setPage(1) }}>\n        <SelectTrigger className=\"w-full sm:w-64\" aria-label={t('design_system.gallery.sourceLibrary.group')}><SelectValue /></SelectTrigger>\n        <SelectContent>\n          <SelectItem value={allGroups}>{t('design_system.gallery.sourceLibrary.allGroups')}</SelectItem>\n          {groups.map(value => <SelectItem key={value} value={value}>{t(groupTranslationKey(value), value)}</SelectItem>)}\n        </SelectContent>\n      </Select>\n    </div>\n    <p role=\"status\" className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sourceLibrary.count', { visible: filtered.length, total: sourceLibrary.pages.length })}</p>\n    {visible.length ? <div className=\"divide-y divide-border rounded-lg border border-border bg-card\">{visible.map(item => {\n      const variantCount = item.sets.reduce((total, set) => total + set.count, 0)\n      const hasInventory = item.sets.length > 0 || item.standaloneCount > 0 || item.frameCount > 0\n      return <article key={item.id} className=\"grid min-w-0 gap-4 p-5 lg:grid-cols-3\">\n        <header className=\"space-y-1\">\n          <h3 className=\"text-base font-semibold leading-tight\">{t(`design_system.gallery.sourceLibrary.names.${item.id}`, item.name)}</h3>\n          <p className=\"text-xs text-muted-foreground\">{t(groupTranslationKey(item.group), item.group)}</p>\n        </header>\n        <div className=\"min-w-0 space-y-3 lg:col-span-2\">\n          {item.stories.length ? <ul className=\"flex flex-wrap gap-x-6 gap-y-3\" aria-label={t('design_system.gallery.sourceLibrary.examples')}>\n            {item.stories.map(story => <li key={`${story.family}:${story.entryId}`}>\n              <LinkButton asChild variant=\"black\">\n                <Link href={`${GALLERY_BASE_PATH}?family=${story.family}&entry=${story.entryId}`}>\n                  {storyTitle(story)}<ArrowRight className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n                </Link>\n              </LinkButton>\n            </li>)}\n          </ul> : <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sourceLibrary.referenceOnly')}</p>}\n          {hasInventory ? <section className=\"text-sm\">\n            <h4 className=\"text-xs font-medium text-muted-foreground\">{t('design_system.gallery.sourceLibrary.details')}</h4>\n            <div className=\"mt-3 space-y-4 border-l border-border pl-4\">\n              <div className=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground\">\n                {item.sets.length ? <span>{t('design_system.gallery.sourceLibrary.componentSets', { count: item.sets.length })}</span> : null}\n                {variantCount ? <span>{t('design_system.gallery.sourceLibrary.variants', { count: variantCount })}</span> : null}\n                {item.frameCount ? <span>{t('design_system.gallery.sourceLibrary.frames', { count: item.frameCount })}</span> : null}\n                {item.standaloneCount ? <span>{t('design_system.gallery.sourceLibrary.assets', { count: item.standaloneCount })}</span> : null}\n              </div>\n              {item.sets.map(set => <section key={set.id} className=\"space-y-2\">\n                <h4 className=\"text-sm font-medium\">{set.name}</h4>\n                <dl className=\"space-y-2\">{Object.entries(set.axes).map(([axis, values]) => <div key={axis} className=\"text-xs\"><dt className=\"font-medium\">{axis}</dt><dd className=\"break-words text-muted-foreground\">{(values as string[]).join(' \u00B7 ')}</dd></div>)}</dl>\n              </section>)}\n            </div>\n          </section> : null}\n        </div>\n      </article>\n    })}</div> : <EmptyState title={t('design_system.gallery.noResults')} />}\n    {filtered.length > pageSize ? <Pagination page={page} pageSize={pageSize} total={filtered.length} showPageSize={false} onPageChange={setPage} aria-label={t('design_system.gallery.sourceLibrary.pages')} /> : null}\n  </div>\n}\n"],
+  "mappings": ";AAuCI,cAKI,YALJ;AArCJ,YAAY,WAAW;AACvB,SAAS,eAAe,YAAY;AACpC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,eAAe,YAAY,eAAe,mBAAmB;AAC9E,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAE9B,MAAM,WAAW;AACjB,MAAM,YAAY;AAClB,MAAM,sBAAsB,CAAC,UAAkB,8CAA8C,MAAM,YAAY,EAAE,QAAQ,QAAQ,GAAG,CAAC;AAE9H,SAAS,gBAAgB;AAC9B,QAAM,IAAI,KAAK;AACf,QAAM,aAAa,CAAC,UAA8D,MAAM,WAAW,gBAC/F,EAAE,6BAA6B,MAAM,OAAO,UAAU,MAAM,KAAK,IACjE,MAAM;AACV,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,SAAS;AAClD,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,CAAC;AACxC,QAAM,SAAS,MAAM,QAAQ,MAAM,MAAM,KAAK,IAAI,IAAI,cAAc,MAAM,IAAI,UAAQ,KAAK,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC;AACvG,QAAM,SAAS,MAAM,KAAK,EAAE,YAAY;AACxC,QAAM,WAAW,cAAc,MAAM,OAAO,UAAQ;AAClD,UAAM,eAAe,UAAU,aAAa,KAAK,UAAU;AAC3D,UAAM,iBAAiB,EAAE,6CAA6C,KAAK,EAAE,IAAI,KAAK,IAAI;AAC1F,UAAM,kBAAkB,EAAE,oBAAoB,KAAK,KAAK,GAAG,KAAK,KAAK;AACrE,UAAM,cAAc,EAAE,mDAAmD,KAAK,EAAE,IAAI,EAAE;AACtF,UAAM,aAAa,GAAG,KAAK,IAAI,IAAI,cAAc,IAAI,KAAK,KAAK,IAAI,eAAe,IAAI,WAAW,IAAI,KAAK,QAAQ,IAAI,WAAS,GAAG,MAAM,KAAK,IAAI,WAAW,KAAK,CAAC,EAAE,EAAE,KAAK,GAAG,CAAC,IAAI,KAAK,KAAK,IAAI,SAAO,GAAG,IAAI,IAAI,IAAI,OAAO,OAAO,IAAI,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,KAAK,GAAG,CAAC,IAAI,KAAK,WAAW,IAAI,WAAS,MAAM,IAAI,EAAE,KAAK,GAAG,CAAC;AAClU,WAAO,gBAAgB,WAAW,YAAY,EAAE,SAAS,MAAM;AAAA,EACjE,CAAC;AACD,QAAM,UAAU,SAAS,OAAO,OAAO,KAAK,UAAU,OAAO,QAAQ;AAErE,SAAO,qBAAC,SAAI,WAAU,4BAA2B,gBAAa,yBAC5D;AAAA,wBAAC,OAAE,WAAU,iCAAiC,YAAE,8CAA8C,GAAE;AAAA,IAChG,qBAAC,SAAI,WAAU,mCACb;AAAA,0BAAC,eAAY,WAAU,aAAY,OAAO,OAAO,UAAU,WAAS;AAAE,iBAAS,KAAK;AAAG,gBAAQ,CAAC;AAAA,MAAE,GAAG,cAAY,EAAE,4CAA4C,GAAG,aAAa,EAAE,4CAA4C,GAAG;AAAA,MAChO,qBAAC,UAAO,OAAO,OAAO,eAAe,WAAS;AAAE,iBAAS,KAAK;AAAG,gBAAQ,CAAC;AAAA,MAAE,GAC1E;AAAA,4BAAC,iBAAc,WAAU,kBAAiB,cAAY,EAAE,2CAA2C,GAAG,8BAAC,eAAY,GAAE;AAAA,QACrH,qBAAC,iBACC;AAAA,8BAAC,cAAW,OAAO,WAAY,YAAE,+CAA+C,GAAE;AAAA,UACjF,OAAO,IAAI,WAAS,oBAAC,cAAuB,OAAe,YAAE,oBAAoB,KAAK,GAAG,KAAK,KAAzD,KAA2D,CAAa;AAAA,WAChH;AAAA,SACF;AAAA,OACF;AAAA,IACA,oBAAC,OAAE,MAAK,UAAS,WAAU,iCAAiC,YAAE,6CAA6C,EAAE,SAAS,SAAS,QAAQ,OAAO,cAAc,MAAM,OAAO,CAAC,GAAE;AAAA,IAC3K,QAAQ,SAAS,oBAAC,SAAI,WAAU,kEAAkE,kBAAQ,IAAI,UAAQ;AACrH,YAAM,eAAe,KAAK,KAAK,OAAO,CAAC,OAAO,QAAQ,QAAQ,IAAI,OAAO,CAAC;AAC1E,YAAM,eAAe,KAAK,KAAK,SAAS,KAAK,KAAK,kBAAkB,KAAK,KAAK,aAAa;AAC3F,aAAO,qBAAC,aAAsB,WAAU,yCACtC;AAAA,6BAAC,YAAO,WAAU,aAChB;AAAA,8BAAC,QAAG,WAAU,yCAAyC,YAAE,6CAA6C,KAAK,EAAE,IAAI,KAAK,IAAI,GAAE;AAAA,UAC5H,oBAAC,OAAE,WAAU,iCAAiC,YAAE,oBAAoB,KAAK,KAAK,GAAG,KAAK,KAAK,GAAE;AAAA,WAC/F;AAAA,QACA,qBAAC,SAAI,WAAU,mCACZ;AAAA,eAAK,QAAQ,SAAS,oBAAC,QAAG,WAAU,kCAAiC,cAAY,EAAE,8CAA8C,GAC/H,eAAK,QAAQ,IAAI,WAAS,oBAAC,QAC1B,8BAAC,cAAW,SAAO,MAAC,SAAQ,SAC1B,+BAAC,QAAK,MAAM,GAAG,iBAAiB,WAAW,MAAM,MAAM,UAAU,MAAM,OAAO,IAC3E;AAAA,uBAAW,KAAK;AAAA,YAAE,oBAAC,cAAW,WAAU,gCAA+B,eAAY,QAAO;AAAA,aAC7F,GACF,KALkC,GAAG,MAAM,MAAM,IAAI,MAAM,OAAO,EAMpE,CAAK,GACP,IAAQ,oBAAC,OAAE,WAAU,iCAAiC,YAAE,mDAAmD,GAAE;AAAA,UAC5G,eAAe,qBAAC,aAAQ,WAAU,WACjC;AAAA,gCAAC,QAAG,WAAU,6CAA6C,YAAE,6CAA6C,GAAE;AAAA,YAC5G,qBAAC,SAAI,WAAU,8CACb;AAAA,mCAAC,SAAI,WAAU,gEACZ;AAAA,qBAAK,KAAK,SAAS,oBAAC,UAAM,YAAE,qDAAqD,EAAE,OAAO,KAAK,KAAK,OAAO,CAAC,GAAE,IAAU;AAAA,gBACxH,eAAe,oBAAC,UAAM,YAAE,gDAAgD,EAAE,OAAO,aAAa,CAAC,GAAE,IAAU;AAAA,gBAC3G,KAAK,aAAa,oBAAC,UAAM,YAAE,8CAA8C,EAAE,OAAO,KAAK,WAAW,CAAC,GAAE,IAAU;AAAA,gBAC/G,KAAK,kBAAkB,oBAAC,UAAM,YAAE,8CAA8C,EAAE,OAAO,KAAK,gBAAgB,CAAC,GAAE,IAAU;AAAA,iBAC5H;AAAA,cACC,KAAK,KAAK,IAAI,SAAO,qBAAC,aAAqB,WAAU,aACpD;AAAA,oCAAC,QAAG,WAAU,uBAAuB,cAAI,MAAK;AAAA,gBAC9C,oBAAC,QAAG,WAAU,aAAa,iBAAO,QAAQ,IAAI,IAAI,EAAE,IAAI,CAAC,CAAC,MAAM,MAAM,MAAM,qBAAC,SAAe,WAAU,WAAU;AAAA,sCAAC,QAAG,WAAU,eAAe,gBAAK;AAAA,kBAAK,oBAAC,QAAG,WAAU,qCAAsC,iBAAoB,KAAK,QAAK,GAAE;AAAA,qBAArJ,IAA0J,CAAM,GAAE;AAAA,mBAFtN,IAAI,EAGxC,CAAU;AAAA,eACZ;AAAA,aACF,IAAa;AAAA,WACf;AAAA,WA9BmB,KAAK,EA+B1B;AAAA,IACF,CAAC,GAAE,IAAS,oBAAC,cAAW,OAAO,EAAE,iCAAiC,GAAG;AAAA,IACpE,SAAS,SAAS,WAAW,oBAAC,cAAW,MAAY,UAAoB,OAAO,SAAS,QAAQ,cAAc,OAAO,cAAc,SAAS,cAAY,EAAE,2CAA2C,GAAG,IAAK;AAAA,KACjN;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,139 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ImagePlus, RotateCcw, Upload, X } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { SimpleTooltip } from "@open-mercato/ui/primitives/tooltip";
+import { getBrandStyle, saveBrandStyle } from "@open-mercato/ui/theme/brand-style";
+import { ColorPlayground } from "./ColorPlayground.js";
+import { BrandStylePreview } from "./BrandStylePreview.js";
+import { readThemeTokens } from "./themeTokens.js";
+import { readBrandLogo, studioBrandStyle } from "./styleAgentBranding.js";
+function brandPreview(studio, logo) {
+  const style = studioBrandStyle(studio, logo);
+  return { light: style.light, dark: style.dark };
+}
+function StyleAgents() {
+  const t = useT();
+  const input = React.useRef(null);
+  const uploadVersion = React.useRef(0);
+  const [initial, setInitial] = React.useState(void 0);
+  const [hostTokens, setHostTokens] = React.useState(null);
+  const [logo, setLogo] = React.useState(null);
+  const [draft, setDraft] = React.useState(null);
+  const [uploading, setUploading] = React.useState(false);
+  const [notice, setNotice] = React.useState("");
+  const [error, setError] = React.useState("");
+  React.useEffect(() => {
+    setHostTokens(readThemeTokens(document.styleSheets));
+    const applied = getBrandStyle();
+    setInitial(applied);
+    setLogo(applied?.logo ?? null);
+    return () => {
+      uploadVersion.current += 1;
+    };
+  }, []);
+  const updateStudio = React.useCallback((studio, valid) => {
+    setDraft({ studio, valid });
+    setNotice("");
+  }, []);
+  async function upload(file) {
+    if (!file) return;
+    const version = ++uploadVersion.current;
+    setUploading(true);
+    setError("");
+    setNotice("");
+    try {
+      const data = await readBrandLogo(file);
+      if (uploadVersion.current === version) setLogo(data);
+    } catch (failure) {
+      if (uploadVersion.current === version) setError(failure instanceof Error ? failure.message : "fileDecode");
+    } finally {
+      if (uploadVersion.current === version) setUploading(false);
+    }
+  }
+  function apply() {
+    if (!draft?.valid || uploading) return;
+    try {
+      saveBrandStyle(studioBrandStyle(draft.studio, logo));
+      setError("");
+      setNotice("applied");
+    } catch {
+      setError("saveFailed");
+      setNotice("");
+    }
+  }
+  function restore() {
+    try {
+      saveBrandStyle(null);
+      setError("");
+      setNotice("restored");
+    } catch {
+      setError("saveFailed");
+      setNotice("");
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-8 pb-8", "data-example": "style-agents", children: [
+    /* @__PURE__ */ jsxs("header", { id: "gallery-page-heading", className: "scroll-mt-36 space-y-3 lg:scroll-mt-24", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-medium tracking-tight", children: t("design_system.styleAgents.title") }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-relaxed text-muted-foreground", children: t("design_system.styleAgents.description") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx(SimpleTooltip, { content: t("design_system.styleAgents.restoreHint"), children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", onClick: restore, children: [
+            /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": true }),
+            t("design_system.styleAgents.restore")
+          ] }) }),
+          /* @__PURE__ */ jsxs(Button, { type: "button", onClick: apply, disabled: !draft?.valid || uploading, children: [
+            /* @__PURE__ */ jsx(Check, { "aria-hidden": true }),
+            t("design_system.styleAgents.apply")
+          ] })
+        ] })
+      ] }),
+      notice ? /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm text-status-success-text", children: t(`design_system.styleAgents.${notice}`) }) : null,
+      error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-status-error-text", children: t(`design_system.styleAgents.${error}`) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "grid gap-6 rounded-xl border border-border bg-card p-5 sm:p-6 lg:grid-cols-2", "aria-label": t("design_system.styleAgents.identity"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: t("design_system.styleAgents.logo") }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t("design_system.styleAgents.logoHint") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-28 items-center justify-center rounded-lg border border-dashed border-border bg-background p-6", children: logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: t("design_system.styleAgents.logoPreview"), className: "max-h-20 max-w-full object-contain" }) : /* @__PURE__ */ jsx(ImagePlus, { className: "size-8 text-muted-foreground", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx("input", { ref: input, type: "file", accept: "image/png,image/jpeg,image/webp", className: "sr-only", "aria-label": t("design_system.styleAgents.upload"), onChange: (event) => {
+          void upload(event.target.files?.[0]);
+          event.target.value = "";
+        } }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: () => input.current?.click(), children: [
+            /* @__PURE__ */ jsx(Upload, { "aria-hidden": true }),
+            t(`design_system.styleAgents.${uploading ? "uploading" : "upload"}`)
+          ] }),
+          logo ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", onClick: () => {
+            uploadVersion.current += 1;
+            setUploading(false);
+            setLogo(null);
+            setNotice("");
+            setError("");
+          }, children: [
+            /* @__PURE__ */ jsx(X, { "aria-hidden": true }),
+            t("design_system.styleAgents.removeLogo")
+          ] }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-between gap-5", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: t("design_system.styleAgents.applyTitle") }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: t("design_system.styleAgents.scope") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t("design_system.styleAgents.tokenScope") })
+      ] }) })
+    ] }),
+    draft ? /* @__PURE__ */ jsx(BrandStylePreview, { ...brandPreview(draft.studio, logo), hostTokens, logo }) : null,
+    initial !== void 0 ? /* @__PURE__ */ jsx(ColorPlayground, { initialView: "light", initialSeeds: initial?.seeds, initialActionShades: initial?.actionShades, logo, onStudioChange: updateStudio }) : null
+  ] });
+}
+export {
+  StyleAgents
+};
+//# sourceMappingURL=StyleAgents.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/StyleAgents.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Check, ImagePlus, RotateCcw, Upload, X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\nimport { getBrandStyle, saveBrandStyle, type BrandStyle } from '@open-mercato/ui/theme/brand-style'\nimport { ColorPlayground } from './ColorPlayground'\nimport { BrandStylePreview } from './BrandStylePreview'\nimport { readThemeTokens, type ThemeTokens } from './themeTokens'\nimport type { Shade } from './colorStudio'\nimport type { ColorStudio } from './colorStudio'\nimport { readBrandLogo, studioBrandStyle } from './styleAgentBranding'\n\nfunction brandPreview(studio: ColorStudio, logo: string | null) {\n  const style = studioBrandStyle(studio, logo)\n  return { light: style.light, dark: style.dark }\n}\n\nexport function StyleAgents() {\n  const t = useT()\n  const input = React.useRef<HTMLInputElement>(null)\n  const uploadVersion = React.useRef(0)\n  const [initial, setInitial] = React.useState<BrandStyle | null | undefined>(undefined)\n  const [hostTokens, setHostTokens] = React.useState<ThemeTokens | null>(null)\n  const [logo, setLogo] = React.useState<string | null>(null)\n  const [draft, setDraft] = React.useState<{ studio: ColorStudio; valid: boolean } | null>(null)\n  const [uploading, setUploading] = React.useState(false)\n  const [notice, setNotice] = React.useState('')\n  const [error, setError] = React.useState('')\n  React.useEffect(() => {\n    setHostTokens(readThemeTokens(document.styleSheets))\n    const applied = getBrandStyle()\n    setInitial(applied)\n    setLogo(applied?.logo ?? null)\n    return () => { uploadVersion.current += 1 }\n  }, [])\n  const updateStudio = React.useCallback((studio: ColorStudio, valid: boolean) => {\n    setDraft({ studio, valid })\n    setNotice('')\n  }, [])\n\n  async function upload(file: File | undefined) {\n    if (!file) return\n    const version = ++uploadVersion.current\n    setUploading(true)\n    setError('')\n    setNotice('')\n    try {\n      const data = await readBrandLogo(file)\n      if (uploadVersion.current === version) setLogo(data)\n    } catch (failure) {\n      if (uploadVersion.current === version) setError(failure instanceof Error ? failure.message : 'fileDecode')\n    } finally {\n      if (uploadVersion.current === version) setUploading(false)\n    }\n  }\n\n  function apply() {\n    if (!draft?.valid || uploading) return\n    try {\n      saveBrandStyle(studioBrandStyle(draft.studio, logo))\n      setError('')\n      setNotice('applied')\n    } catch { setError('saveFailed'); setNotice('') }\n  }\n\n  function restore() {\n    try {\n      saveBrandStyle(null)\n      setError('')\n      setNotice('restored')\n    } catch { setError('saveFailed'); setNotice('') }\n  }\n\n  return <div className=\"space-y-8 pb-8\" data-example=\"style-agents\">\n    <header id=\"gallery-page-heading\" className=\"scroll-mt-36 space-y-3 lg:scroll-mt-24\">\n      <div className=\"flex flex-wrap items-start justify-between gap-4\">\n        <div className=\"space-y-3\">\n          <h1 className=\"text-3xl font-medium tracking-tight\">{t('design_system.styleAgents.title')}</h1>\n          <p className=\"max-w-3xl text-sm leading-relaxed text-muted-foreground\">{t('design_system.styleAgents.description')}</p>\n        </div>\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <SimpleTooltip content={t('design_system.styleAgents.restoreHint')}>\n            <Button type=\"button\" variant=\"ghost\" onClick={restore}><RotateCcw aria-hidden />{t('design_system.styleAgents.restore')}</Button>\n          </SimpleTooltip>\n          <Button type=\"button\" onClick={apply} disabled={!draft?.valid || uploading}><Check aria-hidden />{t('design_system.styleAgents.apply')}</Button>\n        </div>\n      </div>\n      {notice ? <p role=\"status\" className=\"text-sm text-status-success-text\">{t(`design_system.styleAgents.${notice}`)}</p> : null}\n      {error ? <p role=\"alert\" className=\"text-sm text-status-error-text\">{t(`design_system.styleAgents.${error}`)}</p> : null}\n    </header>\n    <section className=\"grid gap-6 rounded-xl border border-border bg-card p-5 sm:p-6 lg:grid-cols-2\" aria-label={t('design_system.styleAgents.identity')}>\n      <div className=\"space-y-4\">\n        <div className=\"space-y-1\"><h2 className=\"text-lg font-medium\">{t('design_system.styleAgents.logo')}</h2><p className=\"text-xs leading-relaxed text-muted-foreground\">{t('design_system.styleAgents.logoHint')}</p></div>\n        <div className=\"flex min-h-28 items-center justify-center rounded-lg border border-dashed border-border bg-background p-6\">\n          {logo ? <img src={logo} alt={t('design_system.styleAgents.logoPreview')} className=\"max-h-20 max-w-full object-contain\" /> : <ImagePlus className=\"size-8 text-muted-foreground\" aria-hidden />}\n        </div>\n        <input ref={input} type=\"file\" accept=\"image/png,image/jpeg,image/webp\" className=\"sr-only\" aria-label={t('design_system.styleAgents.upload')} onChange={event => { void upload(event.target.files?.[0]); event.target.value = '' }} />\n        <div className=\"flex flex-wrap gap-2\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => input.current?.click()}><Upload aria-hidden />{t(`design_system.styleAgents.${uploading ? 'uploading' : 'upload'}`)}</Button>\n          {logo ? <Button type=\"button\" variant=\"ghost\" onClick={() => { uploadVersion.current += 1; setUploading(false); setLogo(null); setNotice(''); setError('') }}><X aria-hidden />{t('design_system.styleAgents.removeLogo')}</Button> : null}\n        </div>\n      </div>\n      <div className=\"flex flex-col justify-between gap-5\">\n        <div className=\"space-y-3\"><h2 className=\"text-lg font-medium\">{t('design_system.styleAgents.applyTitle')}</h2><p className=\"text-sm leading-relaxed text-muted-foreground\">{t('design_system.styleAgents.scope')}</p><p className=\"text-xs leading-relaxed text-muted-foreground\">{t('design_system.styleAgents.tokenScope')}</p></div>\n\n      </div>\n    </section>\n    {draft ? <BrandStylePreview {...brandPreview(draft.studio, logo)} hostTokens={hostTokens} logo={logo} /> : null}\n    {initial !== undefined ? <ColorPlayground initialView=\"light\" initialSeeds={initial?.seeds} initialActionShades={initial?.actionShades as { light?: Shade; dark?: Shade } | undefined} logo={logo} onStudioChange={updateStudio} /> : null}\n\n  </div>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,101 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { DataTable } from "@open-mercato/ui/backend/DataTable";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { readThemeTokens } from "./themeTokens.js";
+const referenceTokens = [
+  "brand-lime",
+  "brand-yellow",
+  "brand-violet",
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "muted",
+  "muted-foreground",
+  "primary",
+  "primary-foreground",
+  "primary-hover",
+  "border",
+  "input",
+  "ring",
+  "destructive",
+  "status-info-bg",
+  "status-info-text",
+  "status-success-bg",
+  "status-success-text",
+  "status-warning-bg",
+  "status-warning-text",
+  "status-error-bg",
+  "status-error-text"
+];
+function displayColor(value, context) {
+  if (!context || !CSS.supports("color", value)) return value;
+  context.clearRect(0, 0, 1, 1);
+  context.fillStyle = value;
+  context.fillRect(0, 0, 1, 1);
+  const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data;
+  return "#" + [red, green, blue, ...alpha === 255 ? [] : [alpha]].map((channel) => channel.toString(16).padStart(2, "0")).join("").toUpperCase();
+}
+function ThemeTokenReference() {
+  const t = useT();
+  const [tokens, setTokens] = React.useState(null);
+  React.useEffect(() => {
+    const values = readThemeTokens(document.styleSheets);
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    for (const theme of ["light", "dark"]) {
+      for (const token of referenceTokens) {
+        const value = values[theme][`--${token}`];
+        if (value) values[theme][`--${token}`] = displayColor(value, context);
+      }
+    }
+    setTokens(values);
+  }, []);
+  const rows = referenceTokens.map((token) => ({ token: `--${token}`, light: tokens?.light[`--${token}`] ?? "\u2014", dark: tokens?.dark[`--${token}`] ?? "\u2014" }));
+  async function copyToken(token) {
+    try {
+      await navigator.clipboard.writeText(token);
+      flash(t("design_system.gallery.tokenCopied", { token }), "success");
+    } catch {
+      flash(t("design_system.gallery.tokenCopyFailed"), "error");
+    }
+  }
+  const columns = [
+    { accessorKey: "token", header: t("design_system.foundations.token"), cell: ({ row }) => /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", className: "h-auto justify-start px-0 py-2 font-mono text-xs", "aria-label": t("design_system.gallery.copyToken", { token: row.original.token }), onClick: () => copyToken(row.original.token), children: row.original.token }) },
+    ...["light", "dark"].map((theme) => ({
+      accessorKey: theme,
+      header: t(`design_system.foundations.${theme}`),
+      cell: ({ row }) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-3 py-2", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-6 shrink-0 rounded-full border border-border", style: { backgroundColor: row.original[theme] === "\u2014" ? void 0 : row.original[theme] } }),
+        /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: row.original[theme] })
+      ] })
+    }))
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium", children: t("design_system.foundations.themeReference") }),
+    /* @__PURE__ */ jsx("p", { className: "max-w-prose text-sm leading-relaxed text-muted-foreground", children: t("design_system.foundations.themeDescription") }),
+    tokens ? /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: ["light", "dark"].map((theme) => /* @__PURE__ */ jsxs("div", { className: "space-y-6 rounded-lg border p-6", style: { backgroundColor: tokens[theme]["--background"], color: tokens[theme]["--foreground"], borderColor: tokens[theme]["--border"] }, children: [
+      /* @__PURE__ */ jsx("p", { className: "text-base font-medium", children: t(`design_system.foundations.${theme}`) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", style: { backgroundColor: tokens[theme]["--primary"], color: tokens[theme]["--primary-foreground"] }, children: t("design_system.gallery.samples.primaryAction") }),
+        /* @__PURE__ */ jsx("span", { className: "inline-flex h-9 items-center rounded-md border px-4 text-sm", style: { borderColor: tokens[theme]["--border"] }, children: "Aa" })
+      ] }),
+      /* @__PURE__ */ jsxs("code", { className: "text-xs", style: { color: tokens[theme]["--muted-foreground"] }, children: [
+        tokens[theme]["--background"],
+        " / ",
+        tokens[theme]["--foreground"]
+      ] })
+    ] }, theme)) }) : null,
+    /* @__PURE__ */ jsx(DataTable, { columns, data: rows, isLoading: !tokens })
+  ] });
+}
+export {
+  ThemeTokenReference
+};
+//# sourceMappingURL=ThemeTokenReference.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/ThemeTokenReference.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { DataTable } from '@open-mercato/ui/backend/DataTable'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { readThemeTokens, type ThemeTokens } from './themeTokens'\n\nconst referenceTokens = [\n  'brand-lime', 'brand-yellow', 'brand-violet', 'background', 'foreground',\n  'card', 'card-foreground', 'muted', 'muted-foreground', 'primary', 'primary-foreground',\n  'primary-hover', 'border', 'input', 'ring', 'destructive',\n  'status-info-bg', 'status-info-text', 'status-success-bg', 'status-success-text',\n  'status-warning-bg', 'status-warning-text', 'status-error-bg', 'status-error-text',\n]\ntype TokenRow = { token: string; light: string; dark: string }\n\nfunction displayColor(value: string, context: CanvasRenderingContext2D | null) {\n  if (!context || !CSS.supports('color', value)) return value\n  context.clearRect(0, 0, 1, 1)\n  context.fillStyle = value\n  context.fillRect(0, 0, 1, 1)\n  const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data\n  return '#' + [red, green, blue, ...(alpha === 255 ? [] : [alpha])].map(channel => channel.toString(16).padStart(2, '0')).join('').toUpperCase()\n}\n\nexport function ThemeTokenReference() {\n  const t = useT()\n  const [tokens, setTokens] = React.useState<ThemeTokens | null>(null)\n  React.useEffect(() => {\n    const values = readThemeTokens(document.styleSheets)\n    const canvas = document.createElement('canvas')\n    canvas.width = 1\n    canvas.height = 1\n    const context = canvas.getContext('2d', { willReadFrequently: true })\n    for (const theme of ['light', 'dark'] as const) {\n      for (const token of referenceTokens) {\n        const value = values[theme][`--${token}`]\n        if (value) values[theme][`--${token}`] = displayColor(value, context)\n      }\n    }\n    setTokens(values)\n  }, [])\n  const rows = referenceTokens.map(token => ({ token: `--${token}`, light: tokens?.light[`--${token}`] ?? '\u2014', dark: tokens?.dark[`--${token}`] ?? '\u2014' }))\n  async function copyToken(token: string) {\n    try {\n      await navigator.clipboard.writeText(token)\n      flash(t('design_system.gallery.tokenCopied', { token }), 'success')\n    } catch { flash(t('design_system.gallery.tokenCopyFailed'), 'error') }\n  }\n  const columns: ColumnDef<TokenRow, unknown>[] = [\n    { accessorKey: 'token', header: t('design_system.foundations.token'), cell: ({ row }) => <Button type=\"button\" variant=\"ghost\" className=\"h-auto justify-start px-0 py-2 font-mono text-xs\" aria-label={t('design_system.gallery.copyToken', { token: row.original.token })} onClick={() => copyToken(row.original.token)}>{row.original.token}</Button> },\n    ...(['light', 'dark'] as const).map(theme => ({\n      accessorKey: theme,\n      header: t(`design_system.foundations.${theme}`),\n      cell: ({ row }: { row: { original: TokenRow } }) => <span className=\"flex items-center gap-3 py-2\"><span aria-hidden className=\"size-6 shrink-0 rounded-full border border-border\" style={{ backgroundColor: row.original[theme] === '\u2014' ? undefined : row.original[theme] }} /><code className=\"text-xs text-muted-foreground\">{row.original[theme]}</code></span>,\n    })),\n  ]\n  return <div className=\"space-y-4\">\n    <h3 className=\"text-xl font-medium\">{t('design_system.foundations.themeReference')}</h3>\n    <p className=\"max-w-prose text-sm leading-relaxed text-muted-foreground\">{t('design_system.foundations.themeDescription')}</p>\n    {tokens ? <div className=\"grid gap-4 sm:grid-cols-2\">\n      {(['light', 'dark'] as const).map(theme => <div key={theme} className=\"space-y-6 rounded-lg border p-6\" style={{ backgroundColor: tokens[theme]['--background'], color: tokens[theme]['--foreground'], borderColor: tokens[theme]['--border'] }}>\n        <p className=\"text-base font-medium\">{t(`design_system.foundations.${theme}`)}</p>\n        <div className=\"flex flex-wrap items-center gap-3\">\n          <Button type=\"button\" style={{ backgroundColor: tokens[theme]['--primary'], color: tokens[theme]['--primary-foreground'] }}>{t('design_system.gallery.samples.primaryAction')}</Button>\n          <span className=\"inline-flex h-9 items-center rounded-md border px-4 text-sm\" style={{ borderColor: tokens[theme]['--border'] }}>Aa</span>\n        </div>\n        <code className=\"text-xs\" style={{ color: tokens[theme]['--muted-foreground'] }}>{tokens[theme]['--background']} / {tokens[theme]['--foreground']}</code>\n      </div>)}\n    </div> : null}\n    <DataTable columns={columns} data={rows} isLoading={!tokens} />\n  </div>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-function VariantPreview({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3 rounded-md border border-border bg-background p-4", children });
+function VariantPreview({ children, framed = true }) {
+  return /* @__PURE__ */ jsx("div", { className: framed ? "flex min-w-0 flex-wrap items-start gap-4 rounded-lg border border-border bg-background p-4 sm:p-6 [&>*]:min-w-0" : "min-w-0 [&>*]:min-w-0", children });
 }
 export {
   VariantPreview

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/design_system/gallery/components/VariantPreview.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\n/**\n * Bordered stage a variant renders inside. Chrome uses semantic tokens only \u2014\n * the stage must never impose colors of its own on the previewed component.\n */\nexport function VariantPreview({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 rounded-md border border-border bg-background p-4\">\n      {children}\n    </div>\n  )\n}\n"],
-  "mappings": ";AAUI;AAFG,SAAS,eAAe,EAAE,SAAS,GAAkC;AAC1E,SACE,oBAAC,SAAI,WAAU,uFACZ,UACH;AAEJ;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\n/**\n * Bordered stage a variant renders inside. Chrome uses semantic tokens only \u2014\n * the stage must never impose colors of its own on the previewed component.\n */\nexport function VariantPreview({ children, framed = true }: { children: React.ReactNode; framed?: boolean }) {\n  return (\n    <div className={framed ? 'flex min-w-0 flex-wrap items-start gap-4 rounded-lg border border-border bg-background p-4 sm:p-6 [&>*]:min-w-0' : 'min-w-0 [&>*]:min-w-0'}>\n      {children}\n    </div>\n  )\n}\n"],
+  "mappings": ";AAUI;AAFG,SAAS,eAAe,EAAE,UAAU,SAAS,KAAK,GAAoD;AAC3G,SACE,oBAAC,SAAI,WAAW,SAAS,oHAAoH,yBAC1I,UACH;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,58 @@
+function normalizeHex(input) {
+  const value = input.trim().replace(/^#/, "");
+  if (/^[\da-f]{3}$/i.test(value)) {
+    return `#${[...value].map((digit) => digit.repeat(2)).join("").toUpperCase()}`;
+  }
+  return /^[\da-f]{6}$/i.test(value) ? `#${value.toUpperCase()}` : null;
+}
+function channels(hex) {
+  return [
+    Number.parseInt(hex.slice(1, 3), 16),
+    Number.parseInt(hex.slice(3, 5), 16),
+    Number.parseInt(hex.slice(5, 7), 16)
+  ];
+}
+function luminance(hex) {
+  const linear = channels(hex).map((channel) => {
+    const normalized = channel / 255;
+    return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  });
+  return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
+}
+function contrastRatio(first, second) {
+  const normalizedFirst = normalizeHex(first);
+  const normalizedSecond = normalizeHex(second);
+  if (!normalizedFirst || !normalizedSecond) return 1;
+  const firstLuminance = luminance(normalizedFirst);
+  const secondLuminance = luminance(normalizedSecond);
+  return (Math.max(firstLuminance, secondLuminance) + 0.05) / (Math.min(firstLuminance, secondLuminance) + 0.05);
+}
+function mix(color, target, amount) {
+  const targetChannels = channels(target);
+  return `#${channels(color).map((channel, index) => Math.round(channel + (targetChannels[index] - channel) * amount).toString(16).padStart(2, "0")).join("").toUpperCase()}`;
+}
+function readableForeground(background) {
+  return contrastRatio(background, "#000000") >= contrastRatio(background, "#FFFFFF") ? "#000000" : "#FFFFFF";
+}
+function readableAccent(color, surface) {
+  const target = readableForeground(surface);
+  for (let step = 0; step <= 20; step += 1) {
+    const candidate = mix(color, target, step / 20);
+    if (contrastRatio(candidate, surface) >= 4.5) return candidate;
+  }
+  return target;
+}
+function createAccentPalette(hex, surface) {
+  const color = normalizeHex(hex) ?? "#000000";
+  const normalizedSurface = normalizeHex(surface) ?? "#FFFFFF";
+  const foreground = readableForeground(color);
+  const hover = mix(color, foreground === "#FFFFFF" ? "#000000" : "#FFFFFF", 0.08);
+  const soft = mix(normalizedSurface, color, 0.1);
+  return { color, foreground, hover, soft, softForeground: readableAccent(color, soft) };
+}
+export {
+  contrastRatio,
+  createAccentPalette,
+  normalizeHex
+};
+//# sourceMappingURL=colorPreview.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/colorPreview.ts"],
+  "sourcesContent": ["type Rgb = [number, number, number]\n\nexport function normalizeHex(input: string): string | null {\n  const value = input.trim().replace(/^#/, '')\n  if (/^[\\da-f]{3}$/i.test(value)) {\n    return `#${[...value].map((digit) => digit.repeat(2)).join('').toUpperCase()}`\n  }\n  return /^[\\da-f]{6}$/i.test(value) ? `#${value.toUpperCase()}` : null\n}\n\nfunction channels(hex: string): Rgb {\n  return [\n    Number.parseInt(hex.slice(1, 3), 16),\n    Number.parseInt(hex.slice(3, 5), 16),\n    Number.parseInt(hex.slice(5, 7), 16),\n  ]\n}\n\nfunction luminance(hex: string): number {\n  const linear = channels(hex).map((channel) => {\n    const normalized = channel / 255\n    return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4\n  })\n  return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722\n}\n\nexport function contrastRatio(first: string, second: string): number {\n  const normalizedFirst = normalizeHex(first)\n  const normalizedSecond = normalizeHex(second)\n  if (!normalizedFirst || !normalizedSecond) return 1\n  const firstLuminance = luminance(normalizedFirst)\n  const secondLuminance = luminance(normalizedSecond)\n  return (Math.max(firstLuminance, secondLuminance) + 0.05) / (Math.min(firstLuminance, secondLuminance) + 0.05)\n}\n\nfunction mix(color: string, target: string, amount: number): string {\n  const targetChannels = channels(target)\n  return `#${channels(color).map((channel, index) => (\n    Math.round(channel + (targetChannels[index] - channel) * amount).toString(16).padStart(2, '0')\n  )).join('').toUpperCase()}`\n}\n\nfunction readableForeground(background: string): string {\n  return contrastRatio(background, '#000000') >= contrastRatio(background, '#FFFFFF') ? '#000000' : '#FFFFFF'\n}\n\nfunction readableAccent(color: string, surface: string): string {\n  const target = readableForeground(surface)\n  for (let step = 0; step <= 20; step += 1) {\n    const candidate = mix(color, target, step / 20)\n    if (contrastRatio(candidate, surface) >= 4.5) return candidate\n  }\n  return target\n}\n\nexport function createAccentPalette(hex: string, surface: string) {\n  const color = normalizeHex(hex) ?? '#000000'\n  const normalizedSurface = normalizeHex(surface) ?? '#FFFFFF'\n  const foreground = readableForeground(color)\n  const hover = mix(color, foreground === '#FFFFFF' ? '#000000' : '#FFFFFF', 0.08)\n  const soft = mix(normalizedSurface, color, 0.1)\n  return { color, foreground, hover, soft, softForeground: readableAccent(color, soft) }\n}\n"],
+  "mappings": "AAEO,SAAS,aAAa,OAA8B;AACzD,QAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,MAAM,EAAE;AAC3C,MAAI,gBAAgB,KAAK,KAAK,GAAG;AAC/B,WAAO,IAAI,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,UAAU,MAAM,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,CAAC;AAAA,EAC9E;AACA,SAAO,gBAAgB,KAAK,KAAK,IAAI,IAAI,MAAM,YAAY,CAAC,KAAK;AACnE;AAEA,SAAS,SAAS,KAAkB;AAClC,SAAO;AAAA,IACL,OAAO,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACnC,OAAO,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACnC,OAAO,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,EACrC;AACF;AAEA,SAAS,UAAU,KAAqB;AACtC,QAAM,SAAS,SAAS,GAAG,EAAE,IAAI,CAAC,YAAY;AAC5C,UAAM,aAAa,UAAU;AAC7B,WAAO,cAAc,UAAU,aAAa,UAAU,aAAa,SAAS,UAAU;AAAA,EACxF,CAAC;AACD,SAAO,OAAO,CAAC,IAAI,SAAS,OAAO,CAAC,IAAI,SAAS,OAAO,CAAC,IAAI;AAC/D;AAEO,SAAS,cAAc,OAAe,QAAwB;AACnE,QAAM,kBAAkB,aAAa,KAAK;AAC1C,QAAM,mBAAmB,aAAa,MAAM;AAC5C,MAAI,CAAC,mBAAmB,CAAC,iBAAkB,QAAO;AAClD,QAAM,iBAAiB,UAAU,eAAe;AAChD,QAAM,kBAAkB,UAAU,gBAAgB;AAClD,UAAQ,KAAK,IAAI,gBAAgB,eAAe,IAAI,SAAS,KAAK,IAAI,gBAAgB,eAAe,IAAI;AAC3G;AAEA,SAAS,IAAI,OAAe,QAAgB,QAAwB;AAClE,QAAM,iBAAiB,SAAS,MAAM;AACtC,SAAO,IAAI,SAAS,KAAK,EAAE,IAAI,CAAC,SAAS,UACvC,KAAK,MAAM,WAAW,eAAe,KAAK,IAAI,WAAW,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAC9F,EAAE,KAAK,EAAE,EAAE,YAAY,CAAC;AAC3B;AAEA,SAAS,mBAAmB,YAA4B;AACtD,SAAO,cAAc,YAAY,SAAS,KAAK,cAAc,YAAY,SAAS,IAAI,YAAY;AACpG;AAEA,SAAS,eAAe,OAAe,SAAyB;AAC9D,QAAM,SAAS,mBAAmB,OAAO;AACzC,WAAS,OAAO,GAAG,QAAQ,IAAI,QAAQ,GAAG;AACxC,UAAM,YAAY,IAAI,OAAO,QAAQ,OAAO,EAAE;AAC9C,QAAI,cAAc,WAAW,OAAO,KAAK,IAAK,QAAO;AAAA,EACvD;AACA,SAAO;AACT;AAEO,SAAS,oBAAoB,KAAa,SAAiB;AAChE,QAAM,QAAQ,aAAa,GAAG,KAAK;AACnC,QAAM,oBAAoB,aAAa,OAAO,KAAK;AACnD,QAAM,aAAa,mBAAmB,KAAK;AAC3C,QAAM,QAAQ,IAAI,OAAO,eAAe,YAAY,YAAY,WAAW,IAAI;AAC/E,QAAM,OAAO,IAAI,mBAAmB,OAAO,GAAG;AAC9C,SAAO,EAAE,OAAO,YAAY,OAAO,MAAM,gBAAgB,eAAe,OAAO,IAAI,EAAE;AACvF;",
+  "names": []
+}