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

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

@@ -0,0 +1,166 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowUpRight, Check, Clock3, Heart, Layers, MoveUpRight, Palette, Sparkles } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Avatar, AvatarStack } from "@open-mercato/ui/primitives/avatar";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import product from "../assets/style-studio-product.png";
+import portrait from "../assets/landing-teams-01.png";
+import creator from "../assets/contact-support-portrait.png";
+import workspace from "../assets/blog-photo-0.png";
+const assetSource = (asset) => typeof asset === "string" ? asset : asset.src;
+const CARD = "flex min-h-112 min-w-0 flex-col overflow-hidden rounded-xl border border-border shadow-sm";
+const TASKS = ["collect", "explore", "share"];
+const CATEGORIES = ["identity", "digital", "editorial"];
+function ColorStudioCompositions({ theme, tokens }) {
+  const t = useT();
+  const id = React.useId();
+  const copy = (key) => t(`design_system.colorStudio.compositions.${key}`);
+  const [plan, setPlan] = React.useState("solo");
+  const [category, setCategory] = React.useState("identity");
+  const [completed, setCompleted] = React.useState(["collect"]);
+  const [saved, setSaved] = React.useState(false);
+  const [following, setFollowing] = React.useState(false);
+  const [productSaved, setProductSaved] = React.useState(false);
+  const primary = { backgroundColor: tokens["--primary"], color: tokens["--primary-foreground"] };
+  const secondary = { backgroundColor: tokens["--studio-secondary-soft"], color: tokens["--studio-secondary-soft-foreground"] };
+  const tertiary = { backgroundColor: tokens["--studio-tertiary"], color: tokens["--studio-tertiary-foreground"] };
+  const gradient = `linear-gradient(145deg, ${tokens["--accent"]}, ${tokens["--studio-secondary-soft"]}, ${tokens["--studio-tertiary-soft"]})`;
+  const appointments = [
+    { key: "meeting", time: "09:00\u201310:00", background: tokens["--accent"], foreground: tokens["--accent-foreground"], accent: tokens["--primary"] },
+    { key: "research", time: "11:00\u201312:30", background: tokens["--studio-secondary-soft"], foreground: tokens["--studio-secondary-soft-foreground"], accent: tokens["--studio-secondary"] },
+    { key: "review", time: "14:00\u201315:00", background: tokens["--studio-tertiary-soft"], foreground: tokens["--studio-tertiary-soft-foreground"], accent: tokens["--studio-tertiary"] }
+  ];
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${id}-title`, "data-composition-theme": theme, style: tokens, className: "@container/cards min-w-0 space-y-6 rounded-xl bg-background p-4 text-foreground sm:p-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("h4", { id: `${id}-title`, className: "text-2xl font-medium tracking-tight", children: copy("galleryTitle") }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: copy("live") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 auto-rows-fr gap-6 @md/cards:grid-cols-2 @7xl/cards:grid-cols-4", children: [
+      /* @__PURE__ */ jsxs("article", { className: `${CARD} gap-6 bg-card p-6`, "aria-label": t("design_system.colorStudio.agenda"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Clock3, { "aria-hidden": true, className: "size-5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("h5", { className: "text-xl font-medium tracking-tight", children: t("design_system.colorStudio.agenda") }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: copy("today") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-3", children: appointments.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2 rounded-lg border-l-4 px-4 py-3", style: { backgroundColor: item.background, color: item.foreground, borderLeftColor: item.accent }, children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: t(`design_system.colorStudio.${item.key}`) }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs", children: item.time })
+        ] }, item.key)) }),
+        /* @__PURE__ */ jsxs(AvatarStack, { size: "xs", children: [
+          /* @__PURE__ */ jsx(Avatar, { label: copy("creatorName"), src: assetSource(creator) }),
+          /* @__PURE__ */ jsx(Avatar, { label: copy("designerName"), src: assetSource(portrait) }),
+          /* @__PURE__ */ jsx(Avatar, { label: copy("collaboratorName"), src: assetSource(workspace) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("article", { className: `${CARD} relative justify-between border-transparent p-6`, style: secondary, "aria-label": copy("poster"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative -mx-6 -mt-6 h-56 overflow-hidden", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-6 rounded-full border-8", style: { borderColor: tokens["--studio-secondary"] } }),
+          /* @__PURE__ */ jsx("img", { src: assetSource(portrait), alt: "", className: "relative mx-auto h-full w-full object-contain object-bottom", loading: "lazy" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute -right-8 -top-8 size-40 rounded-full border-8", style: { borderColor: tokens["--studio-tertiary"] } })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative space-y-4 pt-6", children: [
+          /* @__PURE__ */ jsx(Sparkles, { "aria-hidden": true, className: "size-6" }),
+          /* @__PURE__ */ jsx("h5", { className: "text-4xl font-semibold leading-tight tracking-tight", children: copy("posterTitle") }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed", children: copy("posterDescription") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("article", { className: `${CARD} border-transparent bg-card`, "aria-label": copy("creator"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative min-h-56 flex-1 overflow-hidden", style: { background: gradient }, children: [
+          /* @__PURE__ */ jsx("img", { src: assetSource(creator), alt: copy("creatorPhoto"), className: "absolute inset-0 h-full w-full object-cover", loading: "lazy" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-24", style: { background: `linear-gradient(transparent, ${tokens["--primary"]})` }, "aria-hidden": true })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-6", style: primary, children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider", children: copy("creator") }),
+          /* @__PURE__ */ jsx("h5", { className: "text-3xl font-medium leading-tight tracking-tight", children: copy("creatorName") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: copy("creatorRole") }),
+            /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "modifiable", size: "lg", "aria-label": copy(following ? "unfollow" : "follow"), "aria-pressed": following, onClick: () => setFollowing((value) => !value), style: { color: "inherit" }, children: following ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(ArrowUpRight, {}) })
+          ] }),
+          /* @__PURE__ */ jsx("p", { role: "status", className: "text-xs empty:hidden", children: following ? copy("following") : "" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("article", { className: `${CARD} justify-between gap-6 p-6`, style: { background: gradient }, "aria-label": copy("product"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "rounded-md bg-card px-3 py-2 text-xs font-medium text-card-foreground", children: copy("productLabel") }),
+          /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "white", size: "lg", "aria-label": copy(productSaved ? "removeProduct" : "saveProduct"), "aria-pressed": productSaved, onClick: () => setProductSaved((value) => !value), children: /* @__PURE__ */ jsx(Heart, { className: productSaved ? "fill-current" : "" }) })
+        ] }),
+        /* @__PURE__ */ jsx("img", { src: assetSource(product), alt: copy("productPhoto"), className: "h-56 w-full rounded-lg object-contain", loading: "lazy" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-lg bg-card p-4 text-card-foreground", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: copy("productCollection") }),
+          /* @__PURE__ */ jsx("h5", { className: "text-2xl font-medium tracking-tight", children: copy("productTitle") }),
+          /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm text-muted-foreground", children: copy(productSaved ? "productSaved" : "productHint") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("article", { className: `${CARD} gap-6 bg-card p-6`, "aria-label": copy("plans"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(Layers, { "aria-hidden": true, className: "size-6", style: { color: tokens["--primary"] } }),
+          /* @__PURE__ */ jsx("h5", { className: "text-2xl font-medium tracking-tight", children: copy("plans") }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: copy("plansHint") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: ["solo", "team"].map((choice) => /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", "aria-pressed": plan === choice, onClick: () => setPlan(choice), className: "h-auto w-full justify-between gap-3 whitespace-normal p-4 text-left", style: plan === choice ? { backgroundColor: tokens["--accent"], color: tokens["--accent-foreground"], borderColor: tokens["--primary"] } : void 0, children: [
+          /* @__PURE__ */ jsxs("span", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block text-base font-medium", children: copy(choice) }),
+            /* @__PURE__ */ jsx("span", { className: "block text-xs font-normal", children: copy(`${choice}Hint`) })
+          ] }),
+          plan === choice ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-5 shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "size-5 shrink-0 rounded-full border border-border", "aria-hidden": true })
+        ] }, choice)) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-auto space-y-3 border-t border-border pt-5", children: [
+          /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm font-medium", children: copy(plan === "solo" ? "soloSelected" : "teamSelected") }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: copy("planNote") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("article", { className: `${CARD} gap-6 bg-card p-6`, "aria-label": copy("categories"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Palette, { "aria-hidden": true, className: "size-6 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("h5", { className: "text-2xl font-medium tracking-tight", children: copy("categories") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: CATEGORIES.map((choice) => /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-pressed": category === choice, onClick: () => setCategory(choice), style: category === choice ? tertiary : void 0, children: copy(choice) }, choice)) }),
+        /* @__PURE__ */ jsx("div", { className: "relative flex min-h-36 flex-1 items-center justify-center overflow-hidden rounded-lg p-6", style: { background: gradient }, "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: `flex size-28 items-center justify-center shadow-lg ${category === "identity" ? "rounded-full" : category === "digital" ? "rotate-12 rounded-xl" : "-rotate-6 rounded-md"}`, style: category === "digital" ? secondary : tertiary, children: category === "identity" ? /* @__PURE__ */ jsx(Sparkles, { className: "size-12" }) : category === "digital" ? /* @__PURE__ */ jsx(Layers, { className: "size-12" }) : /* @__PURE__ */ jsx(Palette, { className: "size-12" }) }) }),
+        /* @__PURE__ */ jsxs("div", { role: "status", className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("h6", { className: "text-lg font-medium", children: copy(`${category}Title`) }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: copy(`${category}Description`) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("article", { className: `${CARD} gap-6 bg-card p-6`, "aria-label": copy("tasks"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: copy("workspace") }),
+          /* @__PURE__ */ jsx("h5", { className: "text-2xl font-medium tracking-tight", children: copy("tasks") })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-5xl font-medium tracking-tight", style: { color: tokens["--primary"] }, children: [
+          completed.length,
+          /* @__PURE__ */ jsxs("span", { className: "text-xl text-muted-foreground", children: [
+            " / ",
+            TASKS.length
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 divide-y divide-border", children: TASKS.map((task) => /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-start gap-3 py-4", children: [
+          /* @__PURE__ */ jsx(Checkbox, { size: "md", checked: completed.includes(task), onCheckedChange: (checked) => setCompleted((current) => checked ? [...current.filter((item) => item !== task), task] : current.filter((item) => item !== task)), "aria-label": copy(task) }),
+          /* @__PURE__ */ jsx("span", { className: `text-sm leading-relaxed ${completed.includes(task) ? "text-muted-foreground line-through" : ""}`, children: copy(task) })
+        ] }, task)) }),
+        /* @__PURE__ */ jsx("p", { role: "status", className: "rounded-lg p-4 text-sm", style: secondary, children: copy(completed.length === TASKS.length ? "allDone" : "keepGoing") })
+      ] }),
+      /* @__PURE__ */ jsxs("article", { className: `${CARD} border-transparent`, "aria-label": copy("inspiration"), children: [
+        /* @__PURE__ */ jsx("div", { className: "relative min-h-56 flex-1", children: /* @__PURE__ */ jsx("img", { src: assetSource(workspace), alt: copy("workspacePhoto"), className: "absolute inset-0 h-full w-full object-cover", loading: "lazy" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-6", style: tertiary, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider", children: copy("inspiration") }),
+            /* @__PURE__ */ jsx(MoveUpRight, { "aria-hidden": true, className: "size-5" })
+          ] }),
+          /* @__PURE__ */ jsx("h5", { className: "text-3xl font-medium leading-tight tracking-tight", children: copy("inspirationTitle") }),
+          /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", "aria-pressed": saved, onClick: () => setSaved((value) => !value), className: "w-full", style: { backgroundColor: tokens["--studio-tertiary-soft"], color: tokens["--studio-tertiary-soft-foreground"], borderColor: "transparent" }, children: [
+            /* @__PURE__ */ jsx(Heart, { "aria-hidden": true, className: saved ? "fill-current" : "" }),
+            copy(saved ? "saved" : "save")
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  ColorStudioCompositions
+};
+//# sourceMappingURL=ColorStudioCompositions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/ColorStudioCompositions.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { ArrowUpRight, Check, Clock3, Heart, Layers, MoveUpRight, Palette, Sparkles } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Checkbox } from '@open-mercato/ui/primitives/checkbox'\nimport product from '../assets/style-studio-product.png'\nimport portrait from '../assets/landing-teams-01.png'\nimport creator from '../assets/contact-support-portrait.png'\nimport workspace from '../assets/blog-photo-0.png'\n\nconst assetSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\nconst CARD = 'flex min-h-112 min-w-0 flex-col overflow-hidden rounded-xl border border-border shadow-sm'\nconst TASKS = ['collect', 'explore', 'share'] as const\nconst CATEGORIES = ['identity', 'digital', 'editorial'] as const\n\nexport function ColorStudioCompositions({ theme, tokens }: { theme: 'light' | 'dark'; tokens: Record<string, string> }) {\n  const t = useT()\n  const id = React.useId()\n  const copy = (key: string) => t(`design_system.colorStudio.compositions.${key}`)\n  const [plan, setPlan] = React.useState('solo')\n  const [category, setCategory] = React.useState<typeof CATEGORIES[number]>('identity')\n  const [completed, setCompleted] = React.useState<string[]>(['collect'])\n  const [saved, setSaved] = React.useState(false)\n  const [following, setFollowing] = React.useState(false)\n  const [productSaved, setProductSaved] = React.useState(false)\n  const primary = { backgroundColor: tokens['--primary'], color: tokens['--primary-foreground'] }\n  const secondary = { backgroundColor: tokens['--studio-secondary-soft'], color: tokens['--studio-secondary-soft-foreground'] }\n  const tertiary = { backgroundColor: tokens['--studio-tertiary'], color: tokens['--studio-tertiary-foreground'] }\n  const gradient = `linear-gradient(145deg, ${tokens['--accent']}, ${tokens['--studio-secondary-soft']}, ${tokens['--studio-tertiary-soft']})`\n  const appointments = [\n    { key: 'meeting', time: '09:00\u201310:00', background: tokens['--accent'], foreground: tokens['--accent-foreground'], accent: tokens['--primary'] },\n    { key: 'research', time: '11:00\u201312:30', background: tokens['--studio-secondary-soft'], foreground: tokens['--studio-secondary-soft-foreground'], accent: tokens['--studio-secondary'] },\n    { key: 'review', time: '14:00\u201315:00', background: tokens['--studio-tertiary-soft'], foreground: tokens['--studio-tertiary-soft-foreground'], accent: tokens['--studio-tertiary'] },\n  ]\n  return <section aria-labelledby={`${id}-title`} data-composition-theme={theme} style={tokens as React.CSSProperties} className=\"@container/cards min-w-0 space-y-6 rounded-xl bg-background p-4 text-foreground sm:p-6\">\n    <div className=\"flex items-end justify-between gap-4\"><h4 id={`${id}-title`} className=\"text-2xl font-medium tracking-tight\">{copy('galleryTitle')}</h4><p className=\"text-xs text-muted-foreground\">{copy('live')}</p></div>\n    <div className=\"grid min-w-0 auto-rows-fr gap-6 @md/cards:grid-cols-2 @7xl/cards:grid-cols-4\">\n      <article className={`${CARD} gap-6 bg-card p-6`} aria-label={t('design_system.colorStudio.agenda')}>\n        <div className=\"space-y-2\"><Clock3 aria-hidden className=\"size-5 text-muted-foreground\" /><h5 className=\"text-xl font-medium tracking-tight\">{t('design_system.colorStudio.agenda')}</h5><p className=\"text-xs text-muted-foreground\">{copy('today')}</p></div>\n        <div className=\"flex flex-1 flex-col gap-3\">{appointments.map(item => <div key={item.key} className=\"flex-1 space-y-2 rounded-lg border-l-4 px-4 py-3\" style={{ backgroundColor: item.background, color: item.foreground, borderLeftColor: item.accent }}>\n          <p className=\"text-sm font-semibold\">{t(`design_system.colorStudio.${item.key}`)}</p><p className=\"text-xs\">{item.time}</p>\n        </div>)}</div>\n        <AvatarStack size=\"xs\"><Avatar label={copy('creatorName')} src={assetSource(creator)} /><Avatar label={copy('designerName')} src={assetSource(portrait)} /><Avatar label={copy('collaboratorName')} src={assetSource(workspace)} /></AvatarStack>\n      </article>\n\n      <article className={`${CARD} relative justify-between border-transparent p-6`} style={secondary} aria-label={copy('poster')}>\n        <div className=\"relative -mx-6 -mt-6 h-56 overflow-hidden\" aria-hidden>\n          <div className=\"absolute inset-6 rounded-full border-8\" style={{ borderColor: tokens['--studio-secondary'] }} />\n          <img src={assetSource(portrait)} alt=\"\" className=\"relative mx-auto h-full w-full object-contain object-bottom\" loading=\"lazy\" />\n          <div className=\"absolute -right-8 -top-8 size-40 rounded-full border-8\" style={{ borderColor: tokens['--studio-tertiary'] }} />\n        </div>\n        <div className=\"relative space-y-4 pt-6\"><Sparkles aria-hidden className=\"size-6\" /><h5 className=\"text-4xl font-semibold leading-tight tracking-tight\">{copy('posterTitle')}</h5><p className=\"text-sm leading-relaxed\">{copy('posterDescription')}</p></div>\n      </article>\n\n      <article className={`${CARD} border-transparent bg-card`} aria-label={copy('creator')}>\n        <div className=\"relative min-h-56 flex-1 overflow-hidden\" style={{ background: gradient }}><img src={assetSource(creator)} alt={copy('creatorPhoto')} className=\"absolute inset-0 h-full w-full object-cover\" loading=\"lazy\" /><div className=\"absolute inset-x-0 bottom-0 h-24\" style={{ background: `linear-gradient(transparent, ${tokens['--primary']})` }} aria-hidden /></div>\n        <div className=\"space-y-4 p-6\" style={primary}><p className=\"text-xs font-medium uppercase tracking-wider\">{copy('creator')}</p><h5 className=\"text-3xl font-medium leading-tight tracking-tight\">{copy('creatorName')}</h5><div className=\"flex items-center justify-between gap-3\"><p className=\"text-sm\">{copy('creatorRole')}</p><IconButton type=\"button\" variant=\"modifiable\" size=\"lg\" aria-label={copy(following ? 'unfollow' : 'follow')} aria-pressed={following} onClick={() => setFollowing(value => !value)} style={{ color: 'inherit' }}>{following ? <Check /> : <ArrowUpRight />}</IconButton></div><p role=\"status\" className=\"text-xs empty:hidden\">{following ? copy('following') : ''}</p></div>\n      </article>\n\n      <article className={`${CARD} justify-between gap-6 p-6`} style={{ background: gradient }} aria-label={copy('product')}>\n        <div className=\"flex items-center justify-between gap-3\"><span className=\"rounded-md bg-card px-3 py-2 text-xs font-medium text-card-foreground\">{copy('productLabel')}</span><IconButton type=\"button\" variant=\"white\" size=\"lg\" aria-label={copy(productSaved ? 'removeProduct' : 'saveProduct')} aria-pressed={productSaved} onClick={() => setProductSaved(value => !value)}><Heart className={productSaved ? 'fill-current' : ''} /></IconButton></div>\n        <img src={assetSource(product)} alt={copy('productPhoto')} className=\"h-56 w-full rounded-lg object-contain\" loading=\"lazy\" />\n        <div className=\"space-y-2 rounded-lg bg-card p-4 text-card-foreground\"><p className=\"text-xs text-muted-foreground\">{copy('productCollection')}</p><h5 className=\"text-2xl font-medium tracking-tight\">{copy('productTitle')}</h5><p role=\"status\" className=\"text-sm text-muted-foreground\">{copy(productSaved ? 'productSaved' : 'productHint')}</p></div>\n      </article>\n\n      <article className={`${CARD} gap-6 bg-card p-6`} aria-label={copy('plans')}>\n        <div className=\"space-y-3\"><Layers aria-hidden className=\"size-6\" style={{ color: tokens['--primary'] }} /><h5 className=\"text-2xl font-medium tracking-tight\">{copy('plans')}</h5><p className=\"text-sm leading-relaxed text-muted-foreground\">{copy('plansHint')}</p></div>\n        <div className=\"space-y-3\">{['solo', 'team'].map(choice => <Button key={choice} type=\"button\" variant=\"outline\" aria-pressed={plan === choice} onClick={() => setPlan(choice)} className=\"h-auto w-full justify-between gap-3 whitespace-normal p-4 text-left\" style={plan === choice ? { backgroundColor: tokens['--accent'], color: tokens['--accent-foreground'], borderColor: tokens['--primary'] } : undefined}><span className=\"space-y-1\"><span className=\"block text-base font-medium\">{copy(choice)}</span><span className=\"block text-xs font-normal\">{copy(`${choice}Hint`)}</span></span>{plan === choice ? <Check aria-hidden className=\"size-5 shrink-0\" /> : <span className=\"size-5 shrink-0 rounded-full border border-border\" aria-hidden />}</Button>)}</div>\n        <div className=\"mt-auto space-y-3 border-t border-border pt-5\"><p role=\"status\" className=\"text-sm font-medium\">{copy(plan === 'solo' ? 'soloSelected' : 'teamSelected')}</p><p className=\"text-xs leading-relaxed text-muted-foreground\">{copy('planNote')}</p></div>\n      </article>\n\n      <article className={`${CARD} gap-6 bg-card p-6`} aria-label={copy('categories')}>\n        <div className=\"space-y-2\"><Palette aria-hidden className=\"size-6 text-muted-foreground\" /><h5 className=\"text-2xl font-medium tracking-tight\">{copy('categories')}</h5></div>\n        <div className=\"flex flex-wrap gap-2\">{CATEGORIES.map(choice => <Button key={choice} type=\"button\" variant=\"outline\" size=\"sm\" aria-pressed={category === choice} onClick={() => setCategory(choice)} style={category === choice ? tertiary : undefined}>{copy(choice)}</Button>)}</div>\n        <div className=\"relative flex min-h-36 flex-1 items-center justify-center overflow-hidden rounded-lg p-6\" style={{ background: gradient }} aria-hidden><div className={`flex size-28 items-center justify-center shadow-lg ${category === 'identity' ? 'rounded-full' : category === 'digital' ? 'rotate-12 rounded-xl' : '-rotate-6 rounded-md'}`} style={category === 'digital' ? secondary : tertiary}>{category === 'identity' ? <Sparkles className=\"size-12\" /> : category === 'digital' ? <Layers className=\"size-12\" /> : <Palette className=\"size-12\" />}</div></div>\n        <div role=\"status\" className=\"space-y-2\"><h6 className=\"text-lg font-medium\">{copy(`${category}Title`)}</h6><p className=\"text-sm leading-relaxed text-muted-foreground\">{copy(`${category}Description`)}</p></div>\n      </article>\n\n      <article className={`${CARD} gap-6 bg-card p-6`} aria-label={copy('tasks')}>\n        <div className=\"space-y-2\"><p className=\"text-xs font-medium uppercase tracking-wider text-muted-foreground\">{copy('workspace')}</p><h5 className=\"text-2xl font-medium tracking-tight\">{copy('tasks')}</h5></div>\n        <p className=\"text-5xl font-medium tracking-tight\" style={{ color: tokens['--primary'] }}>{completed.length}<span className=\"text-xl text-muted-foreground\"> / {TASKS.length}</span></p>\n        <div className=\"flex-1 divide-y divide-border\">{TASKS.map(task => <label key={task} className=\"flex cursor-pointer items-start gap-3 py-4\"><Checkbox size=\"md\" checked={completed.includes(task)} onCheckedChange={checked => setCompleted(current => checked ? [...current.filter(item => item !== task), task] : current.filter(item => item !== task))} aria-label={copy(task)} /><span className={`text-sm leading-relaxed ${completed.includes(task) ? 'text-muted-foreground line-through' : ''}`}>{copy(task)}</span></label>)}</div>\n        <p role=\"status\" className=\"rounded-lg p-4 text-sm\" style={secondary}>{copy(completed.length === TASKS.length ? 'allDone' : 'keepGoing')}</p>\n      </article>\n\n      <article className={`${CARD} border-transparent`} aria-label={copy('inspiration')}>\n        <div className=\"relative min-h-56 flex-1\"><img src={assetSource(workspace)} alt={copy('workspacePhoto')} className=\"absolute inset-0 h-full w-full object-cover\" loading=\"lazy\" /></div>\n        <div className=\"space-y-5 p-6\" style={tertiary}><div className=\"flex items-center justify-between gap-3\"><p className=\"text-xs font-medium uppercase tracking-wider\">{copy('inspiration')}</p><MoveUpRight aria-hidden className=\"size-5\" /></div><h5 className=\"text-3xl font-medium leading-tight tracking-tight\">{copy('inspirationTitle')}</h5><Button type=\"button\" variant=\"outline\" aria-pressed={saved} onClick={() => setSaved(value => !value)} className=\"w-full\" style={{ backgroundColor: tokens['--studio-tertiary-soft'], color: tokens['--studio-tertiary-soft-foreground'], borderColor: 'transparent' }}><Heart aria-hidden className={saved ? 'fill-current' : ''} />{copy(saved ? 'saved' : 'save')}</Button></div>\n      </article>\n    </div>\n  </section>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,182 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, FolderKanban, Plus, Search } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { DataTable } from "@open-mercato/ui/backend/DataTable";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { CircularProgress } from "@open-mercato/ui/primitives/progress";
+import { SegmentedControl, SegmentedControlItem } from "@open-mercato/ui/primitives/segmented-control";
+const PROJECTS = [
+  { id: "design", titleKey: "project.design", ownerKey: "owner.you", status: "confirmed", progress: 72 },
+  { id: "website", titleKey: "project.website", ownerKey: "owner.team", status: "pending", progress: 38 },
+  { id: "mobile", titleKey: "project.mobile", ownerKey: "owner.review", status: "error", progress: 16 }
+];
+const STATUS_VARIANTS = { confirmed: "success", pending: "warning", error: "error" };
+function ColorStudioSpecimen({ theme, tokens, logo }) {
+  const t = useT();
+  const id = React.useId();
+  const [view, setView] = React.useState("projects");
+  const [search, setSearch] = React.useState("");
+  const [projects, setProjects] = React.useState(PROJECTS);
+  const [selectedId, setSelectedId] = React.useState("design");
+  const [workspaceName, setWorkspaceName] = React.useState("");
+  const [savedName, setSavedName] = React.useState("");
+  const [notifications, setNotifications] = React.useState(true);
+  const [savedNotifications, setSavedNotifications] = React.useState(true);
+  const [feedback, setFeedback] = React.useState(null);
+  const selectedProject = projects.find((project) => project.id === selectedId) ?? projects[0];
+  const hasNewProject = projects.some((project) => project.id === "new");
+  const visibleProjects = projects.filter((project) => `${t(`design_system.colorStudio.${project.titleKey}`)} ${t(`design_system.colorStudio.${project.ownerKey}`)}`.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase()));
+  const columns = React.useMemo(() => [
+    {
+      id: "project",
+      header: t("design_system.colorStudio.projectName"),
+      meta: { truncate: false },
+      cell: ({ row }) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          size: "sm",
+          "aria-pressed": row.original.id === selectedId,
+          onClick: () => setSelectedId(row.original.id),
+          className: "h-auto w-full justify-start gap-3 whitespace-normal rounded-md px-0 py-1 text-left shadow-none",
+          style: { backgroundColor: "transparent", color: tokens["--foreground"] },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md", style: { backgroundColor: row.original.id === selectedId ? tokens["--accent"] : tokens["--muted"], color: row.original.id === selectedId ? tokens["--accent-foreground"] : tokens["--muted-foreground"] }, children: row.original.id === selectedId ? /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(FolderKanban, { className: "size-4", "aria-hidden": true }) }),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 space-y-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium", children: t(`design_system.colorStudio.${row.original.titleKey}`) }),
+              /* @__PURE__ */ jsx("span", { className: "block text-xs font-normal text-muted-foreground", children: t(`design_system.colorStudio.${row.original.ownerKey}`) })
+            ] })
+          ]
+        }
+      )
+    },
+    {
+      id: "status",
+      header: t("design_system.colorStudio.status"),
+      meta: { truncate: false },
+      cell: ({ row }) => /* @__PURE__ */ jsx(Badge, { variant: STATUS_VARIANTS[row.original.status], dot: true, children: t(`design_system.colorPreview.${row.original.status}`) })
+    }
+  ], [selectedId, t, tokens]);
+  function addProject() {
+    if (hasNewProject) return;
+    setProjects((current) => [...current, { id: "new", titleKey: "newProject", ownerKey: "owner.you", status: "pending", progress: 0 }]);
+    setSelectedId("new");
+    setSearch("");
+    setFeedback("added");
+  }
+  function saveSettings() {
+    setSavedName(workspaceName);
+    setSavedNotifications(notifications);
+    setFeedback("saved");
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      role: "region",
+      "aria-label": `${t("design_system.colorStudio.preview")} \u2014 ${t(`design_system.colorPreview.${theme}`)}`,
+      "data-preview-theme": theme,
+      style: tokens,
+      className: "min-w-0 overflow-hidden rounded-xl border border-border bg-card text-foreground",
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-border bg-card px-5 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+            logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: t("design_system.styleAgents.logoPreview"), className: "h-9 w-28 shrink-0 object-contain object-left" }) : /* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent text-accent-foreground", children: /* @__PURE__ */ jsx(FolderKanban, { className: "size-5", "aria-hidden": true }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: savedName || t("design_system.colorStudio.workspace") }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(`design_system.colorPreview.${theme}`) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(SegmentedControl, { value: view, onValueChange: (value) => {
+            setView(value);
+            setFeedback(null);
+          }, "aria-label": t("design_system.colorStudio.overview"), size: "sm", children: [
+            /* @__PURE__ */ jsx(SegmentedControlItem, { value: "projects", children: t("design_system.colorStudio.projects") }),
+            /* @__PURE__ */ jsx(SegmentedControlItem, { value: "settings", children: t("design_system.colorStudio.settings") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-5 sm:p-6", children: [
+          view === "projects" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: t("design_system.colorStudio.projects") }),
+              /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: addProject, disabled: hasNewProject, children: [
+                /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
+                t("design_system.colorStudio.newProject")
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-6", style: { gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 24rem), 1fr))" }, children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-4", children: [
+                /* @__PURE__ */ jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), "aria-label": t("design_system.colorStudio.search"), placeholder: t("design_system.colorStudio.search"), leading: /* @__PURE__ */ jsx(Search, { className: "size-4", "aria-hidden": true }) }),
+                /* @__PURE__ */ jsx(DataTable, { data: visibleProjects, columns, embedded: true, sortable: false, exporter: false, onRowClick: (project) => setSelectedId(project.id), emptyState: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.colorStudio.noResults") }) })
+              ] }),
+              /* @__PURE__ */ jsxs("aside", { className: "space-y-6 rounded-xl border border-border bg-background p-6", "aria-label": t("design_system.colorStudio.selected"), children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsx(Badge, { variant: STATUS_VARIANTS[selectedProject.status], dot: true, children: t(`design_system.colorPreview.${selectedProject.status}`) }),
+                  /* @__PURE__ */ jsx("h4", { className: "text-xl font-medium tracking-tight", children: t(`design_system.colorStudio.${selectedProject.titleKey}`) }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(`design_system.colorStudio.${selectedProject.ownerKey}`) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5 border-t border-border pt-5", children: [
+                  /* @__PURE__ */ jsx(CircularProgress, { value: selectedProject.progress, size: "lg", showValue: true, "aria-label": t("design_system.colorStudio.progress") }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("design_system.colorStudio.progress") }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t("design_system.colorStudio.progressHint") })
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs("form", { className: "max-w-xl space-y-5", onSubmit: (event) => {
+            event.preventDefault();
+            saveSettings();
+          }, children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: t("design_system.colorStudio.settings") }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.colorStudio.detailsHint") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-workspace`, children: t("design_system.colorPreview.name") }),
+              /* @__PURE__ */ jsx(Input, { id: `${id}-workspace`, value: workspaceName, placeholder: t("design_system.colorStudio.workspace"), onChange: (event) => {
+                setWorkspaceName(event.target.value);
+                setFeedback(null);
+              } })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-border bg-card p-4", children: [
+              /* @__PURE__ */ jsx(Checkbox, { id: `${id}-notifications`, checked: notifications, onCheckedChange: (checked) => {
+                setNotifications(checked === true);
+                setFeedback(null);
+              } }),
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-notifications`, className: "leading-5", children: t("design_system.colorStudio.notifications") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { type: "submit", children: t("design_system.colorPreview.save") }),
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => {
+                setWorkspaceName(savedName);
+                setNotifications(savedNotifications);
+                setFeedback(null);
+              }, children: t("design_system.colorPreview.cancel") })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("p", { role: "status", className: "text-xs text-status-success-text empty:hidden", children: feedback ? t(feedback === "saved" ? "design_system.colorPreview.saved" : "design_system.colorStudio.added") : null })
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: "flex flex-wrap items-center justify-between gap-4 border-t border-border bg-background px-6 py-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t("design_system.colorStudio.states") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", children: t("design_system.colorStudio.default") }),
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", style: { backgroundColor: tokens["--primary-hover"], color: tokens["--primary-foreground"] }, children: t("design_system.colorStudio.hover") }),
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", style: { boxShadow: `0 0 0 2px ${tokens["--background"]}, 0 0 0 4px ${tokens["--focus-ring-outer"]}` }, children: t("design_system.colorStudio.focus") }),
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", disabled: true, children: t("design_system.colorStudio.disabled") })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ColorStudioSpecimen
+};
+//# sourceMappingURL=ColorStudioSpecimen.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/ColorStudioSpecimen.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'\nimport { Check, FolderKanban, Plus, Search } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { DataTable } from '@open-mercato/ui/backend/DataTable'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Checkbox } from '@open-mercato/ui/primitives/checkbox'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { CircularProgress } from '@open-mercato/ui/primitives/progress'\nimport { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\ntype Project = {\n  id: string\n  titleKey: string\n  ownerKey: string\n  status: 'confirmed' | 'pending' | 'error'\n  progress: number\n}\n\nconst PROJECTS: Project[] = [\n  { id: 'design', titleKey: 'project.design', ownerKey: 'owner.you', status: 'confirmed', progress: 72 },\n  { id: 'website', titleKey: 'project.website', ownerKey: 'owner.team', status: 'pending', progress: 38 },\n  { id: 'mobile', titleKey: 'project.mobile', ownerKey: 'owner.review', status: 'error', progress: 16 },\n]\n\nconst STATUS_VARIANTS = { confirmed: 'success', pending: 'warning', error: 'error' } as const\n\nexport function ColorStudioSpecimen({ theme, tokens, logo }: { logo?: string | null; theme: 'light' | 'dark'; tokens: Record<string, string> }) {\n  const t = useT()\n  const id = React.useId()\n  const [view, setView] = React.useState('projects')\n  const [search, setSearch] = React.useState('')\n  const [projects, setProjects] = React.useState(PROJECTS)\n  const [selectedId, setSelectedId] = React.useState('design')\n  const [workspaceName, setWorkspaceName] = React.useState('')\n  const [savedName, setSavedName] = React.useState('')\n  const [notifications, setNotifications] = React.useState(true)\n  const [savedNotifications, setSavedNotifications] = React.useState(true)\n  const [feedback, setFeedback] = React.useState<'saved' | 'added' | null>(null)\n  const selectedProject = projects.find(project => project.id === selectedId) ?? projects[0]\n  const hasNewProject = projects.some(project => project.id === 'new')\n  const visibleProjects = projects.filter(project => `${t(`design_system.colorStudio.${project.titleKey}`)} ${t(`design_system.colorStudio.${project.ownerKey}`)}`.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase()))\n  const columns = React.useMemo<ColumnDef<Project, unknown>[]>(() => [\n    {\n      id: 'project',\n      header: t('design_system.colorStudio.projectName'),\n      meta: { truncate: false },\n      cell: ({ row }) => <Button\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"sm\"\n        aria-pressed={row.original.id === selectedId}\n        onClick={() => setSelectedId(row.original.id)}\n        className=\"h-auto w-full justify-start gap-3 whitespace-normal rounded-md px-0 py-1 text-left shadow-none\"\n        style={{ backgroundColor: 'transparent', color: tokens['--foreground'] }}\n      >\n        <span className=\"flex size-8 shrink-0 items-center justify-center rounded-md\" style={{ backgroundColor: row.original.id === selectedId ? tokens['--accent'] : tokens['--muted'], color: row.original.id === selectedId ? tokens['--accent-foreground'] : tokens['--muted-foreground'] }}>{row.original.id === selectedId ? <Check className=\"size-4\" aria-hidden /> : <FolderKanban className=\"size-4\" aria-hidden />}</span>\n        <span className=\"min-w-0 space-y-1\">\n          <span className=\"block text-sm font-medium\">{t(`design_system.colorStudio.${row.original.titleKey}`)}</span>\n          <span className=\"block text-xs font-normal text-muted-foreground\">{t(`design_system.colorStudio.${row.original.ownerKey}`)}</span>\n        </span>\n      </Button>,\n    },\n    {\n      id: 'status',\n      header: t('design_system.colorStudio.status'),\n      meta: { truncate: false },\n      cell: ({ row }) => <Badge variant={STATUS_VARIANTS[row.original.status]} dot>{t(`design_system.colorPreview.${row.original.status}`)}</Badge>,\n    },\n  ], [selectedId, t, tokens])\n\n  function addProject() {\n    if (hasNewProject) return\n    setProjects(current => [...current, { id: 'new', titleKey: 'newProject', ownerKey: 'owner.you', status: 'pending', progress: 0 }])\n    setSelectedId('new')\n    setSearch('')\n    setFeedback('added')\n  }\n\n  function saveSettings() {\n    setSavedName(workspaceName)\n    setSavedNotifications(notifications)\n    setFeedback('saved')\n  }\n\n  return <section\n    role=\"region\"\n    aria-label={`${t('design_system.colorStudio.preview')} \u2014 ${t(`design_system.colorPreview.${theme}`)}`}\n    data-preview-theme={theme}\n    style={tokens as React.CSSProperties}\n    className=\"min-w-0 overflow-hidden rounded-xl border border-border bg-card text-foreground\"\n  >\n    <header className=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-card px-5 py-4\">\n      <div className=\"flex min-w-0 items-center gap-3\">\n        {logo ? <img src={logo} alt={t('design_system.styleAgents.logoPreview')} className=\"h-9 w-28 shrink-0 object-contain object-left\" /> : <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent text-accent-foreground\"><FolderKanban className=\"size-5\" aria-hidden /></span>}\n        <div className=\"min-w-0\">\n          <p className=\"truncate text-sm font-semibold\">{savedName || t('design_system.colorStudio.workspace')}</p>\n          <p className=\"text-xs text-muted-foreground\">{t(`design_system.colorPreview.${theme}`)}</p>\n        </div>\n      </div>\n      <SegmentedControl value={view} onValueChange={value => { setView(value); setFeedback(null) }} aria-label={t('design_system.colorStudio.overview')} size=\"sm\">\n        <SegmentedControlItem value=\"projects\">{t('design_system.colorStudio.projects')}</SegmentedControlItem>\n        <SegmentedControlItem value=\"settings\">{t('design_system.colorStudio.settings')}</SegmentedControlItem>\n      </SegmentedControl>\n    </header>\n    <div className=\"space-y-5 p-5 sm:p-6\">\n      {view === 'projects' ? <>\n        <div className=\"flex flex-wrap items-center justify-between gap-3\">\n          <h3 className=\"text-lg font-semibold tracking-tight\">{t('design_system.colorStudio.projects')}</h3>\n          <Button type=\"button\" size=\"sm\" onClick={addProject} disabled={hasNewProject}><Plus aria-hidden />{t('design_system.colorStudio.newProject')}</Button>\n        </div>\n        <div className=\"grid items-start gap-6\" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 24rem), 1fr))' }}>\n          <div className=\"min-w-0 space-y-4\">\n            <Input value={search} onChange={event => setSearch(event.target.value)} aria-label={t('design_system.colorStudio.search')} placeholder={t('design_system.colorStudio.search')} leading={<Search className=\"size-4\" aria-hidden />} />\n            <DataTable<Project> data={visibleProjects} columns={columns} embedded sortable={false} exporter={false} onRowClick={project => setSelectedId(project.id)} emptyState={<p className=\"text-sm text-muted-foreground\">{t('design_system.colorStudio.noResults')}</p>} />\n          </div>\n          <aside className=\"space-y-6 rounded-xl border border-border bg-background p-6\" aria-label={t('design_system.colorStudio.selected')}>\n            <div className=\"space-y-3\">\n              <Badge variant={STATUS_VARIANTS[selectedProject.status]} dot>{t(`design_system.colorPreview.${selectedProject.status}`)}</Badge>\n              <h4 className=\"text-xl font-medium tracking-tight\">{t(`design_system.colorStudio.${selectedProject.titleKey}`)}</h4>\n              <p className=\"text-xs text-muted-foreground\">{t(`design_system.colorStudio.${selectedProject.ownerKey}`)}</p>\n            </div>\n            <div className=\"flex items-center gap-5 border-t border-border pt-5\">\n              <CircularProgress value={selectedProject.progress} size=\"lg\" showValue aria-label={t('design_system.colorStudio.progress')} />\n              <div className=\"min-w-0 space-y-2\"><p className=\"text-sm font-medium\">{t('design_system.colorStudio.progress')}</p><p className=\"text-xs leading-relaxed text-muted-foreground\">{t('design_system.colorStudio.progressHint')}</p></div>\n            </div>\n          </aside>\n        </div>\n      </> : <form className=\"max-w-xl space-y-5\" onSubmit={event => { event.preventDefault(); saveSettings() }}>\n        <div className=\"space-y-1\">\n          <h3 className=\"text-lg font-semibold tracking-tight\">{t('design_system.colorStudio.settings')}</h3>\n          <p className=\"text-sm text-muted-foreground\">{t('design_system.colorStudio.detailsHint')}</p>\n        </div>\n        <div className=\"space-y-2\">\n          <Label htmlFor={`${id}-workspace`}>{t('design_system.colorPreview.name')}</Label>\n          <Input id={`${id}-workspace`} value={workspaceName} placeholder={t('design_system.colorStudio.workspace')} onChange={event => { setWorkspaceName(event.target.value); setFeedback(null) }} />\n        </div>\n        <div className=\"flex items-start gap-3 rounded-lg border border-border bg-card p-4\">\n          <Checkbox id={`${id}-notifications`} checked={notifications} onCheckedChange={checked => { setNotifications(checked === true); setFeedback(null) }} />\n          <Label htmlFor={`${id}-notifications`} className=\"leading-5\">{t('design_system.colorStudio.notifications')}</Label>\n        </div>\n        <div className=\"flex flex-wrap gap-2\">\n          <Button type=\"submit\">{t('design_system.colorPreview.save')}</Button>\n          <Button type=\"button\" variant=\"secondary\" onClick={() => { setWorkspaceName(savedName); setNotifications(savedNotifications); setFeedback(null) }}>{t('design_system.colorPreview.cancel')}</Button>\n        </div>\n      </form>}\n      <p role=\"status\" className=\"text-xs text-status-success-text empty:hidden\">{feedback ? t(feedback === 'saved' ? 'design_system.colorPreview.saved' : 'design_system.colorStudio.added') : null}</p>\n    </div>\n    <footer className=\"flex flex-wrap items-center justify-between gap-4 border-t border-border bg-background px-6 py-4\">\n      <p className=\"text-xs font-medium text-muted-foreground\">{t('design_system.colorStudio.states')}</p>\n      <div className=\"flex flex-wrap gap-3\">\n        <Button type=\"button\" size=\"sm\">{t('design_system.colorStudio.default')}</Button>\n        <Button type=\"button\" size=\"sm\" style={{ backgroundColor: tokens['--primary-hover'], color: tokens['--primary-foreground'] }}>{t('design_system.colorStudio.hover')}</Button>\n        <Button type=\"button\" size=\"sm\" style={{ boxShadow: `0 0 0 2px ${tokens['--background']}, 0 0 0 4px ${tokens['--focus-ring-outer']}` }}>{t('design_system.colorStudio.focus')}</Button>\n        <Button type=\"button\" size=\"sm\" disabled>{t('design_system.colorStudio.disabled')}</Button>\n      </div>\n\n    </footer>\n  </section>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Plus } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
+import { Banner } from "@open-mercato/ui/primitives/banner";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { CompactButton } from "@open-mercato/ui/primitives/compact-button";
+import { KeyIcon, KeyIconGlyph } from "@open-mercato/ui/primitives/key-icon";
+import { EmptyStateIllustration } from "@open-mercato/ui/primitives/empty-state-illustration";
+function CompactButtons() {
+  const t = useT();
+  const [pressed, setPressed] = React.useState({});
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-4", children: ["stroke", "ghost", "white", "modifiable"].map((appearance) => /* @__PURE__ */ jsx("div", { className: appearance === "modifiable" ? "rounded-md bg-primary p-2 text-primary-foreground" : "p-2", children: /* @__PURE__ */ jsx(
+    CompactButton,
+    {
+      type: "button",
+      appearance,
+      size: 24,
+      "aria-label": t("design_system.gallery.examples.buttons.compactAction"),
+      "aria-pressed": pressed[appearance] ?? false,
+      onClick: () => setPressed((current) => ({ ...current, [appearance]: !current[appearance] })),
+      children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": true })
+    }
+  ) }, appearance)) });
+}
+function KeyIcons() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-4", children: ["gray", "blue", "green", "orange", "purple"].map((color, index) => /* @__PURE__ */ jsx(KeyIcon, { color, size: 40, appearance: index < 2 ? "stroke" : "lighter", "aria-label": t(`design_system.gallery.examples.keyComponents.color.${color}`), children: /* @__PURE__ */ jsx(KeyIconGlyph, {}) }, color)) });
+}
+function AlertSpecimen() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Alert, { status: "information", style: "light", size: "default", className: "w-full", children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: t("design_system.gallery.samples.banner.title") }),
+    /* @__PURE__ */ jsx(AlertDescription, { children: t("design_system.gallery.samples.banner.description") })
+  ] });
+}
+function BannerSpecimen() {
+  const t = useT();
+  const [dismissed, setDismissed] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(false);
+  if (dismissed) return /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+    setDismissed(false);
+    setExpanded(false);
+  }, children: t("design_system.gallery.samples.banner.restore") });
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      Banner,
+      {
+        status: "information",
+        style: "lighter",
+        title: t("design_system.gallery.samples.banner.title"),
+        onDismiss: () => setDismissed(true),
+        action: /* @__PURE__ */ jsx(Button, { variant: "link", className: "h-auto p-0 text-inherit underline", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: t("design_system.gallery.samples.banner.details") })
+      }
+    ),
+    expanded ? /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.banner.detailsBody") }) : null
+  ] });
+}
+function getCompactEntrySpecimen(entryId) {
+  switch (entryId) {
+    case "compact-button":
+      return /* @__PURE__ */ jsx(CompactButtons, {});
+    case "key-icon":
+      return /* @__PURE__ */ jsx(KeyIcons, {});
+    case "alert":
+      return /* @__PURE__ */ jsx(AlertSpecimen, {});
+    case "banner":
+      return /* @__PURE__ */ jsx(BannerSpecimen, {});
+    case "empty-state-illustration":
+      return /* @__PURE__ */ jsx(EmptyStateIllustration, { kind: "mercato-records" });
+    default:
+      return void 0;
+  }
+}
+export {
+  getCompactEntrySpecimen
+};
+//# sourceMappingURL=CompactEntrySpecimen.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/CompactEntrySpecimen.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Plus } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'\nimport { Banner } from '@open-mercato/ui/primitives/banner'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { CompactButton } from '@open-mercato/ui/primitives/compact-button'\nimport { KeyIcon, KeyIconGlyph } from '@open-mercato/ui/primitives/key-icon'\nimport { EmptyStateIllustration } from '@open-mercato/ui/primitives/empty-state-illustration'\n\nfunction CompactButtons() {\n  const t = useT()\n  const [pressed, setPressed] = React.useState<Record<string, boolean>>({})\n  return <div className=\"flex flex-wrap items-center gap-4\">\n    {(['stroke', 'ghost', 'white', 'modifiable'] as const).map(appearance => <div key={appearance} className={appearance === 'modifiable' ? 'rounded-md bg-primary p-2 text-primary-foreground' : 'p-2'}>\n      <CompactButton type=\"button\" appearance={appearance} size={24}\n        aria-label={t('design_system.gallery.examples.buttons.compactAction')}\n        aria-pressed={pressed[appearance] ?? false}\n        onClick={() => setPressed(current => ({ ...current, [appearance]: !current[appearance] }))}>\n        <Plus aria-hidden />\n      </CompactButton>\n    </div>)}\n  </div>\n}\n\nfunction KeyIcons() {\n  const t = useT()\n  return <div className=\"flex flex-wrap items-center gap-4\">\n    {(['gray', 'blue', 'green', 'orange', 'purple'] as const).map((color, index) => <KeyIcon key={color} color={color} size={40} appearance={index < 2 ? 'stroke' : 'lighter'} aria-label={t(`design_system.gallery.examples.keyComponents.color.${color}`)}><KeyIconGlyph /></KeyIcon>)}\n  </div>\n}\n\nfunction AlertSpecimen() {\n  const t = useT()\n  return <Alert status=\"information\" style=\"light\" size=\"default\" className=\"w-full\">\n    <AlertTitle>{t('design_system.gallery.samples.banner.title')}</AlertTitle>\n    <AlertDescription>{t('design_system.gallery.samples.banner.description')}</AlertDescription>\n  </Alert>\n}\n\nfunction BannerSpecimen() {\n  const t = useT()\n  const [dismissed, setDismissed] = React.useState(false)\n  const [expanded, setExpanded] = React.useState(false)\n  if (dismissed) return <Button variant=\"outline\" size=\"sm\" onClick={() => { setDismissed(false); setExpanded(false) }}>{t('design_system.gallery.samples.banner.restore')}</Button>\n  return <div className=\"w-full space-y-3\">\n    <Banner status=\"information\" style=\"lighter\" title={t('design_system.gallery.samples.banner.title')}\n      onDismiss={() => setDismissed(true)}\n      action={<Button variant=\"link\" className=\"h-auto p-0 text-inherit underline\" aria-expanded={expanded} onClick={() => setExpanded(value => !value)}>{t('design_system.gallery.samples.banner.details')}</Button>} />\n    {expanded ? <p role=\"status\" className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.banner.detailsBody')}</p> : null}\n  </div>\n}\n\nexport function getCompactEntrySpecimen(entryId: string): React.ReactNode | undefined {\n  switch (entryId) {\n    case 'compact-button': return <CompactButtons />\n    case 'key-icon': return <KeyIcons />\n    case 'alert': return <AlertSpecimen />\n    case 'banner': return <BannerSpecimen />\n    case 'empty-state-illustration': return <EmptyStateIllustration kind=\"mercato-records\" />\n    default: return undefined\n  }\n}\n"],
+  "mappings": ";AAqBQ,cAeC,YAfD;AAnBR,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,OAAO,kBAAkB,kBAAkB;AACpD,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,SAAS,oBAAoB;AACtC,SAAS,8BAA8B;AAEvC,SAAS,iBAAiB;AACxB,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAkC,CAAC,CAAC;AACxE,SAAO,oBAAC,SAAI,WAAU,qCAClB,WAAC,UAAU,SAAS,SAAS,YAAY,EAAY,IAAI,gBAAc,oBAAC,SAAqB,WAAW,eAAe,eAAe,sDAAsD,OAC5L;AAAA,IAAC;AAAA;AAAA,MAAc,MAAK;AAAA,MAAS;AAAA,MAAwB,MAAM;AAAA,MACzD,cAAY,EAAE,sDAAsD;AAAA,MACpE,gBAAc,QAAQ,UAAU,KAAK;AAAA,MACrC,SAAS,MAAM,WAAW,cAAY,EAAE,GAAG,SAAS,CAAC,UAAU,GAAG,CAAC,QAAQ,UAAU,EAAE,EAAE;AAAA,MACzF,8BAAC,QAAK,eAAW,MAAC;AAAA;AAAA,EACpB,KANiF,UAOnF,CAAM,GACR;AACF;AAEA,SAAS,WAAW;AAClB,QAAM,IAAI,KAAK;AACf,SAAO,oBAAC,SAAI,WAAU,qCAClB,WAAC,QAAQ,QAAQ,SAAS,UAAU,QAAQ,EAAY,IAAI,CAAC,OAAO,UAAU,oBAAC,WAAoB,OAAc,MAAM,IAAI,YAAY,QAAQ,IAAI,WAAW,WAAW,cAAY,EAAE,sDAAsD,KAAK,EAAE,GAAG,8BAAC,gBAAa,KAAzK,KAA2K,CAAU,GACrR;AACF;AAEA,SAAS,gBAAgB;AACvB,QAAM,IAAI,KAAK;AACf,SAAO,qBAAC,SAAM,QAAO,eAAc,OAAM,SAAQ,MAAK,WAAU,WAAU,UACxE;AAAA,wBAAC,cAAY,YAAE,4CAA4C,GAAE;AAAA,IAC7D,oBAAC,oBAAkB,YAAE,kDAAkD,GAAE;AAAA,KAC3E;AACF;AAEA,SAAS,iBAAiB;AACxB,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AACtD,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AACpD,MAAI,UAAW,QAAO,oBAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,SAAS,MAAM;AAAE,iBAAa,KAAK;AAAG,gBAAY,KAAK;AAAA,EAAE,GAAI,YAAE,8CAA8C,GAAE;AACzK,SAAO,qBAAC,SAAI,WAAU,oBACpB;AAAA;AAAA,MAAC;AAAA;AAAA,QAAO,QAAO;AAAA,QAAc,OAAM;AAAA,QAAU,OAAO,EAAE,4CAA4C;AAAA,QAChG,WAAW,MAAM,aAAa,IAAI;AAAA,QAClC,QAAQ,oBAAC,UAAO,SAAQ,QAAO,WAAU,qCAAoC,iBAAe,UAAU,SAAS,MAAM,YAAY,WAAS,CAAC,KAAK,GAAI,YAAE,8CAA8C,GAAE;AAAA;AAAA,IAAW;AAAA,IAClN,WAAW,oBAAC,OAAE,MAAK,UAAS,WAAU,iCAAiC,YAAE,kDAAkD,GAAE,IAAO;AAAA,KACvI;AACF;AAEO,SAAS,wBAAwB,SAA8C;AACpF,UAAQ,SAAS;AAAA,IACf,KAAK;AAAkB,aAAO,oBAAC,kBAAe;AAAA,IAC9C,KAAK;AAAY,aAAO,oBAAC,YAAS;AAAA,IAClC,KAAK;AAAS,aAAO,oBAAC,iBAAc;AAAA,IACpC,KAAK;AAAU,aAAO,oBAAC,kBAAe;AAAA,IACtC,KAAK;AAA4B,aAAO,oBAAC,0BAAuB,MAAK,mBAAkB;AAAA,IACvF;AAAS,aAAO;AAAA,EAClB;AACF;",
+  "names": []
+}