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

package/dist/modules/design_system/gallery/demos/shell.js

@@ -0,0 +1,330 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { BadgeCheck, Bell, CalendarDays, ChevronDown, ChevronRight, ChevronsUpDown, Cloud, CreditCard, Download, FileText, Folder, Gift, Headphones, Home, Layers, PanelLeftClose, PanelLeftOpen, Pause, Play, Plus, Search, Settings, UserRound, Users, X } from "lucide-react";
+import { PageHeader } from "@open-mercato/ui/backend/Page";
+import { Avatar, AvatarStack } from "@open-mercato/ui/primitives/avatar";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { CompactButton } from "@open-mercato/ui/primitives/compact-button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { LinkButton } from "@open-mercato/ui/primitives/link-button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import { SearchInput } from "@open-mercato/ui/primitives/search-input";
+import { Progress } from "@open-mercato/ui/primitives/progress";
+import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@open-mercato/ui/primitives/dialog";
+import { Sidebar, SidebarContent, SidebarFeatureCard, SidebarFooter, SidebarHeader, SidebarIdentity, SidebarItem, Topbar } from "@open-mercato/ui/primitives/sidebar";
+import { navigationBrandArtwork } from "@open-mercato/ui/assets/navigation-brand-artwork";
+import avatarIllustration from "../assets/avatar-illustration.png";
+import avatarMemoji from "../assets/avatar-memoji.png";
+import avatarPhoto from "../assets/avatar-photo.png";
+const avatarImages = [avatarIllustration, avatarMemoji, avatarPhoto].map((image) => typeof image === "string" ? image : image.src);
+const navItems = {
+  hr: ["dashboard", "calendar", "timeOff", "projects", "teams", "integrations", "benefits", "documents"],
+  finance: ["dashboard", "cards", "transfer", "transactions", "payments", "exchange"]
+};
+const navIcons = [Home, CalendarDays, CreditCard, Folder, Users, Layers, Gift, FileText];
+function ShellAvatar({ size = 40, product = "hr" }) {
+  return /* @__PURE__ */ jsx(Avatar, { src: product === "hr" ? navigationBrandArtwork.sophiaAvatar : navigationBrandArtwork.arthurAvatar, label: product === "hr" ? "Sophia Williams" : "Arthur Taylor", size });
+}
+function WorkspaceIdentity({ product, onProductChange, collapsed = false, profile = false }) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const name = product === "hr" ? "Synergy" : "Apex";
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      SidebarIdentity,
+      {
+        collapsed,
+        label: profile ? product === "hr" ? "Sophia Williams" : "Arthur Taylor" : name,
+        description: profile ? product === "hr" ? "sophia@example.com" : "arthur@example.com" : t(`design_system.gallery.examples.shell.${product}`),
+        leading: profile ? /* @__PURE__ */ jsx(ShellAvatar, { product }) : /* @__PURE__ */ jsx("img", { src: navigationBrandArtwork[product === "hr" ? "synergyOriginal" : "apexOriginal"], alt: "", className: "size-10" }),
+        badge: profile ? /* @__PURE__ */ jsx(BadgeCheck, { className: "size-3.5 fill-status-info-icon stroke-status-info-solid-foreground", "aria-hidden": "true" }) : void 0,
+        trailing: profile ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" }) : /* @__PURE__ */ jsx("span", { className: "flex size-6 items-center justify-center rounded-sm border border-border bg-background shadow-xs", children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-5" }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-64 p-3", children: profile ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: t("design_system.gallery.examples.shell.localProfile") }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: ["hr", "finance"].map((value) => /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", "aria-pressed": product === value, onClick: () => {
+      onProductChange?.(value);
+      setOpen(false);
+    }, children: value === "hr" ? "Synergy" : "Apex" }, value)) }) })
+  ] });
+}
+function PageHeaderExample({ appearance = "page", type = "basic", configurable = false }) {
+  const t = useT();
+  const [options, setOptions] = React.useState({ divider: true, search: true, notification: true, actions: true, second: true, dropdown: false });
+  const [query, setQuery] = React.useState("");
+  const [dialog, setDialog] = React.useState(false);
+  const [draft, setDraft] = React.useState("");
+  const [saved, setSaved] = React.useState("");
+  const [period, setPeriod] = React.useState("month");
+  const [workspace, setWorkspace] = React.useState("hr");
+  const submit = () => {
+    if (draft.trim()) {
+      setSaved(draft.trim());
+      setDialog(false);
+    }
+  };
+  const copy = (key) => t(`design_system.gallery.examples.shell.${key}`);
+  const leading = type === "avatar" ? /* @__PURE__ */ jsx(ShellAvatar, { size: 48 }) : type === "icon" ? /* @__PURE__ */ jsx("span", { className: "flex size-12 items-center justify-center rounded-full border border-border", children: /* @__PURE__ */ jsx(UserRound, { className: "size-6", "aria-hidden": "true" }) }) : type === "brand" ? /* @__PURE__ */ jsx("img", { src: navigationBrandArtwork.loom, alt: "Loom", className: "size-12" }) : type === "company" ? /* @__PURE__ */ jsx("img", { src: navigationBrandArtwork.apexOriginal, alt: "Apex", className: "size-12" }) : void 0;
+  const periodMenu = /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "lg", children: [
+      /* @__PURE__ */ jsx(CalendarDays, { className: "size-5" }),
+      copy(period),
+      /* @__PURE__ */ jsx(ChevronDown, { className: "size-5" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "p-2", children: ["month", "year"].map((value) => /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", "aria-pressed": period === value, onClick: () => setPeriod(value), children: copy(value) }, value)) })
+  ] });
+  const titleAction = options.dropdown && appearance === "section" ? /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CompactButton, { fullRadius: true, "aria-label": copy("switchWorkspace"), children: /* @__PURE__ */ jsx(ChevronDown, {}) }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "p-3", children: ["hr", "finance"].map((value) => /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => setWorkspace(value), children: copy(value) }, value)) })
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    configurable ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex flex-wrap gap-4", children: Object.keys(options).map((key) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(Checkbox, { checked: options[key], onCheckedChange: (checked) => setOptions((current) => ({ ...current, [key]: checked === true })) }),
+      copy(key)
+    ] }, key)) }) : null,
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        appearance,
+        leading,
+        divider: options.divider,
+        title: configurable ? copy(workspace) : copy("title"),
+        description: copy("description"),
+        titleAction,
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          options.search ? /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", className: "size-10 rounded-lg data-[state=open]:bg-muted", "aria-label": copy("search"), children: /* @__PURE__ */ jsx(Search, { className: "size-5" }) }) }),
+            /* @__PURE__ */ jsxs(PopoverContent, { className: "p-3", children: [
+              /* @__PURE__ */ jsx(SearchInput, { value: query, onChange: setQuery, "aria-label": copy("search") }),
+              /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm", role: "status", children: query ? t("design_system.gallery.examples.shell.localQuery", { query }) : copy("searchHint") })
+            ] })
+          ] }) : null,
+          options.notification && appearance === "page" ? /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", className: "size-10 rounded-lg data-[state=open]:bg-muted", "aria-label": copy("notifications"), children: /* @__PURE__ */ jsx(Bell, { className: "size-5" }) }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "p-4 text-sm", children: copy("noNotifications") })
+          ] }) : null,
+          options.dropdown && appearance === "page" ? periodMenu : null,
+          options.actions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            options.second ? appearance === "page" ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "lg", onClick: () => {
+              setDraft("");
+              setDialog(true);
+            }, children: [
+              /* @__PURE__ */ jsx(CalendarDays, { className: "size-5" }),
+              copy("schedule")
+            ] }) : /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "lg", children: /* @__PURE__ */ jsxs("a", { download: "page-header-example.json", href: `data:application/json;charset=utf-8,${encodeURIComponent(JSON.stringify({ title: copy("title"), description: copy("description") }, null, 2))}`, children: [
+              /* @__PURE__ */ jsx(Download, { className: "size-5" }),
+              copy("export")
+            ] }) }) : null,
+            /* @__PURE__ */ jsxs(Button, { type: "button", variant: "primary-filled", size: "lg", onClick: () => {
+              setDraft("");
+              setDialog(true);
+            }, children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-5" }),
+              copy(appearance === "page" ? "create" : "invite")
+            ] })
+          ] }) : null
+        ] })
+      }
+    ),
+    saved ? /* @__PURE__ */ jsx("output", { className: "block px-8 pt-3 text-sm", children: t("design_system.gallery.examples.shell.savedDraft", { title: saved }) }) : null,
+    /* @__PURE__ */ jsx(Dialog, { open: dialog, onOpenChange: setDialog, children: /* @__PURE__ */ jsxs(DialogContent, { onKeyDown: (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+        event.preventDefault();
+        submit();
+      }
+    }, children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: copy("localDraft") }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: copy("localDraftHint") })
+      ] }),
+      /* @__PURE__ */ jsx(Input, { value: draft, onChange: (event) => setDraft(event.target.value), "aria-label": copy("draftTitle"), autoFocus: true }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setDialog(false), children: copy("cancel") }),
+        /* @__PURE__ */ jsx(Button, { type: "button", disabled: !draft.trim(), onClick: submit, children: copy("saveDraft") })
+      ] })
+    ] }) })
+  ] });
+}
+function FeatureCard({ type, appearance }) {
+  const t = useT();
+  const [dismissed, setDismissed] = React.useState(false);
+  const [paused, setPaused] = React.useState(true);
+  const [details, setDetails] = React.useState(false);
+  const id = React.useId();
+  const copy = (key) => t(`design_system.gallery.examples.shell.${key}`);
+  const inverse = appearance === "primary" || appearance === "neutral";
+  const descriptionClass = inverse ? "text-current" : "text-muted-foreground";
+  const link = (key) => /* @__PURE__ */ jsx(LinkButton, { asChild: true, variant: "modifiable", underline: "always", className: type === "link" ? void 0 : "self-start", children: /* @__PURE__ */ jsxs("a", { href: `#${id}`, onClick: () => setDetails(true), children: [
+    copy(key),
+    type === "meeting" ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" }) : null
+  ] }) });
+  if (dismissed) return /* @__PURE__ */ jsx("div", { className: "flex min-h-27 w-58 items-center justify-center rounded-lg border border-dashed border-border", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setDismissed(false), children: copy("restoreCard") }) });
+  return /* @__PURE__ */ jsxs("div", { className: "w-58 max-w-full", children: [
+    /* @__PURE__ */ jsxs(SidebarFeatureCard, { appearance, className: cn("flex flex-col", type === "gift" ? "flex-row items-center gap-3 p-3" : type === "link" || type === "support" ? "gap-3" : "gap-4", type === "link" && "items-center text-center", type === "storage" && "px-2 pt-4 pb-2"), children: [
+      type === "meeting" || type === "support" ? /* @__PURE__ */ jsx(CompactButton, { appearance: "modifiable", className: "absolute top-3 right-3 text-current", "aria-label": copy("dismissCard"), onClick: () => setDismissed(true), children: /* @__PURE__ */ jsx(X, {}) }) : null,
+      type === "meeting" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-meeting-avatars", className: "flex w-fit items-center gap-1.5 rounded-full bg-background p-0.5 pr-2 text-foreground ring-1 ring-inset ring-border", children: [
+          /* @__PURE__ */ jsx(AvatarStack, { size: 24, max: 3, className: "[&_[data-slot=avatar-stack-item]+[data-slot=avatar-stack-item]]:-ml-0.5", children: avatarImages.map((src, index) => /* @__PURE__ */ jsx(Avatar, { label: String(index + 1), src, size: 24 }, `meeting-avatar-${index}`)) }),
+          /* @__PURE__ */ jsx("span", { className: "w-4 text-xs leading-4 text-muted-foreground", children: "+4" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: copy("meeting") }),
+          /* @__PURE__ */ jsx("p", { className: cn("text-xs", descriptionClass), children: copy("meetingTime") })
+        ] }),
+        link("join")
+      ] }) : null,
+      type === "progress" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: copy("capacity") }),
+          /* @__PURE__ */ jsx("p", { className: cn("text-xs", descriptionClass), children: copy("capacityHint") })
+        ] }),
+        /* @__PURE__ */ jsx(Progress, { value: 90, size: "md", "aria-label": copy("capacity"), className: inverse ? "bg-current/20" : void 0, fillClassName: inverse ? "bg-current" : void 0 }),
+        link("upgrade")
+      ] }) : null,
+      type === "link" || type === "gift" ? /* @__PURE__ */ jsx("span", { className: cn("flex size-10 shrink-0 items-center justify-center rounded-full", inverse ? "bg-background text-status-info-icon" : "bg-status-info-bg text-status-info-icon"), children: type === "link" ? /* @__PURE__ */ jsx(Cloud, { className: "size-5" }) : /* @__PURE__ */ jsx(Gift, { className: "size-5" }) }) : null,
+      type === "link" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: cn("text-sm", descriptionClass), children: copy("plansHint") }),
+        link("plans")
+      ] }) : null,
+      type === "gift" ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: copy("gift") }),
+        /* @__PURE__ */ jsx("p", { className: cn("text-xs", descriptionClass), children: copy("giftHint") })
+      ] }) : null,
+      type === "storage" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { children: copy("storage") }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs", children: "80%" })
+          ] }),
+          /* @__PURE__ */ jsx(Progress, { value: 80, size: "md", "aria-label": copy("storage"), className: inverse ? "bg-current/20" : void 0, fillClassName: inverse ? "bg-current" : void 0 }),
+          /* @__PURE__ */ jsx("p", { className: cn("mt-1.5 text-xs", descriptionClass), children: copy("storageHint") })
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", className: "h-8 w-full justify-start gap-1 rounded-md bg-background px-2.5 py-1.5 text-xs text-foreground hover:bg-muted", "aria-pressed": !paused, onClick: () => setPaused((value) => !value), children: [
+          copy("sync"),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left text-muted-foreground", children: copy(paused ? "paused" : "running") }),
+          paused ? /* @__PURE__ */ jsx(Play, { className: "size-5" }) : /* @__PURE__ */ jsx(Pause, { className: "size-5" })
+        ] })
+      ] }) : null,
+      type === "support" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 pr-4", children: [
+          /* @__PURE__ */ jsx(Headphones, { className: "size-6" }),
+          /* @__PURE__ */ jsx("p", { className: "text-base", children: copy("supportTitle") })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: cn("text-sm", descriptionClass), children: copy("supportHint") })
+      ] }) : null
+    ] }),
+    type === "meeting" || type === "progress" || type === "link" ? /* @__PURE__ */ jsx("div", { id, tabIndex: -1, children: details ? /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-feature-details", className: "mt-3 rounded-md border border-border p-3 text-sm", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: copy("localDestination") }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground", children: copy(type === "meeting" ? "meetingTime" : "plansHint") })
+    ] }) : null }) : null
+  ] });
+}
+function SidebarFeatureExample({ type = "meeting" }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap items-start gap-6", children: ["stroke", "gray", "primary", "neutral"].map((appearance) => /* @__PURE__ */ jsx(FeatureCard, { type, appearance }, appearance)) });
+}
+function SidebarItemsExample() {
+  const t = useT();
+  const [selected, setSelected] = React.useState([0, 0]);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-start gap-6", children: [false, true].map((collapsed, group) => /* @__PURE__ */ jsxs("div", { className: collapsed ? "w-9" : "w-58", children: [
+    ["dashboard", "calendar", "projects"].map((key, index) => /* @__PURE__ */ jsx(SidebarItem, { collapsed, icon: React.createElement(navIcons[index], { className: "size-5" }), active: selected[group] === index, trailing: /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" }), onClick: () => setSelected((current) => current.map((value, currentGroup) => currentGroup === group ? index : value)), children: t(`design_system.gallery.examples.shell.${key}`) }, key)),
+    /* @__PURE__ */ jsx("output", { className: "sr-only", children: t(`design_system.gallery.examples.shell.${["dashboard", "calendar", "projects"][selected[group]]}`) })
+  ] }, String(collapsed))) });
+}
+function SidebarIdentityExample() {
+  const [product, setProduct] = React.useState("hr");
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-start gap-6", children: [false, true].map((collapsed) => /* @__PURE__ */ jsxs("div", { className: collapsed ? "w-16" : "w-62", children: [
+    /* @__PURE__ */ jsx(WorkspaceIdentity, { collapsed, product, onProductChange: setProduct }),
+    /* @__PURE__ */ jsx(WorkspaceIdentity, { collapsed, product, profile: true })
+  ] }, String(collapsed))) });
+}
+function SidebarExample({ product = "hr", collapsed = false, feature = false }) {
+  const t = useT();
+  const [compact, setCompact] = React.useState(collapsed);
+  const [workspace, setWorkspace] = React.useState(product);
+  const [active, setActive] = React.useState("dashboard");
+  const copy = (key) => t(`design_system.gallery.examples.shell.${key}`);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap items-start gap-6", children: [
+    /* @__PURE__ */ jsxs(Sidebar, { collapsed: compact, className: "max-w-full", "aria-label": copy("sidebar"), children: [
+      /* @__PURE__ */ jsx(SidebarHeader, { className: "relative after:absolute after:inset-x-5 after:bottom-0 after:border-b after:border-border after:content-['']", children: /* @__PURE__ */ jsx(WorkspaceIdentity, { collapsed: compact, product: workspace, onProductChange: (value) => {
+        setWorkspace(value);
+        setActive("dashboard");
+      } }) }),
+      /* @__PURE__ */ jsxs(SidebarContent, { children: [
+        /* @__PURE__ */ jsxs("nav", { "aria-label": copy("main"), className: "w-full", children: [
+          /* @__PURE__ */ jsx("p", { className: cn("mb-3 px-1 text-xs uppercase text-muted-foreground", compact && "sr-only"), children: copy("main") }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: navItems[workspace].map((key, index) => /* @__PURE__ */ jsx(SidebarItem, { icon: React.createElement(navIcons[index], { className: "size-5" }), active: active === key, trailing: active === key ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" }) : void 0, className: active === key ? cn("before:absolute before:top-2 before:h-5 before:w-1 before:rounded-r before:bg-foreground before:content-['']", compact ? "before:-left-5.5" : "before:-left-5") : void 0, onClick: () => setActive(key), children: copy(key) }, key)) })
+        ] }),
+        !compact && workspace === "hr" && !feature ? /* @__PURE__ */ jsxs("nav", { "aria-label": copy("favorites"), children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-3 px-1 text-xs uppercase text-muted-foreground", children: copy("favorites") }),
+          ["Loom Mobile App", "Monday Redesign", "Udemy Courses"].map((name, index) => /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Folder, { className: "size-5" }), active: active === name, trailing: /* @__PURE__ */ jsxs("span", { className: "text-xs", children: [
+            "\u2318",
+            index + 1
+          ] }), onClick: () => setActive(name), children: name }, name))
+        ] }) : null,
+        /* @__PURE__ */ jsx("nav", { "aria-label": copy("support"), className: "mt-auto w-full", children: ["settings", "support"].map((key) => /* @__PURE__ */ jsx(SidebarItem, { icon: key === "settings" ? /* @__PURE__ */ jsx(Settings, {}) : /* @__PURE__ */ jsx(Headphones, {}), active: active === key, onClick: () => setActive(key), children: copy(key) }, key)) }),
+        feature && !compact ? /* @__PURE__ */ jsx(FeatureCard, { type: workspace === "hr" ? "meeting" : "progress", appearance: "stroke" }) : null
+      ] }),
+      /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(WorkspaceIdentity, { collapsed: compact, product: workspace, profile: true }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-64 space-y-4 py-5", children: [
+      /* @__PURE__ */ jsx(IconButton, { variant: "outline", "aria-label": copy(compact ? "expand" : "collapse"), "aria-expanded": !compact, onClick: () => setCompact((value) => !value), children: compact ? /* @__PURE__ */ jsx(PanelLeftOpen, {}) : /* @__PURE__ */ jsx(PanelLeftClose, {}) }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium", children: navItems[workspace].some((key) => key === active) || ["settings", "support"].includes(active) ? copy(active) : active }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: copy("previewHint") })
+    ] })
+  ] });
+}
+function TopbarExample({ product = "hr", icons = false }) {
+  const t = useT();
+  const [active, setActive] = React.useState("dashboard");
+  const [query, setQuery] = React.useState("");
+  const copy = (key) => t(`design_system.gallery.examples.shell.${key}`);
+  const items = product === "hr" ? ["dashboard", "calendar", "timeOff", "projects", "teams", "settings"] : navItems.finance;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full overflow-x-auto", children: [
+    /* @__PURE__ */ jsxs(Topbar, { className: "w-360 flex-nowrap", children: [
+      /* @__PURE__ */ jsx("img", { src: navigationBrandArtwork[product === "hr" ? "synergyOriginal" : "apexOriginal"], alt: product === "hr" ? "Synergy" : "Apex", className: "size-10" }),
+      /* @__PURE__ */ jsxs("nav", { "aria-label": copy("topbar"), className: "flex min-w-0 flex-1 items-center gap-1", children: [
+        items.filter((key) => copy(key).toLocaleLowerCase().includes(query.toLocaleLowerCase())).map((key, index) => /* @__PURE__ */ jsx(SidebarItem, { icon: icons ? React.createElement(navIcons[index], { className: "size-5" }) : null, active: active === key, className: cn("w-auto flex-1 px-2", !icons && "[&>span:first-child]:hidden"), onClick: () => setActive(key), children: copy(key) }, key)),
+        /* @__PURE__ */ jsxs(Popover, { children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", className: "h-9 gap-2 px-3", children: [
+            copy("others"),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "size-5" })
+          ] }) }),
+          /* @__PURE__ */ jsx(PopoverContent, { className: "p-2", children: ["settings", "support"].map((key) => /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => setActive(key), children: copy(key) }, key)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(SearchInput, { value: query, onChange: setQuery, className: "w-58", "aria-label": copy("filterNavigation") }),
+      /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", className: "size-10 rounded-lg data-[state=open]:bg-muted", "aria-label": copy("notifications"), children: /* @__PURE__ */ jsx(Bell, { className: "size-5" }) }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "p-4 text-sm", children: copy("noNotifications") })
+      ] }),
+      /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", className: "h-10 gap-1.5 rounded-lg py-1 pr-2 pl-1 data-[state=open]:bg-muted", children: [
+          /* @__PURE__ */ jsx(ShellAvatar, { size: 32, product }),
+          /* @__PURE__ */ jsx("span", { children: product === "hr" ? "Sophia" : "Arthur" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-5" })
+        ] }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "p-4 text-sm", children: copy("localProfile") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("output", { className: "sr-only", children: copy(active) })
+  ] });
+}
+function NavigationBrandsExample() {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-6", children: Object.entries(navigationBrandArtwork).filter(([key]) => key !== "loom" && !key.endsWith("Avatar")).map(([key, src]) => /* @__PURE__ */ jsxs("figure", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("flex size-20 items-center justify-center rounded-lg", key.endsWith("White") ? "bg-status-info-solid" : key.endsWith("Black") ? "bg-accent-indigo-foreground" : "bg-background"), children: /* @__PURE__ */ jsx("img", { src, alt: key.startsWith("synergy") ? "Synergy" : "Apex", className: "size-10" }) }),
+    /* @__PURE__ */ jsx("figcaption", { className: "text-xs text-muted-foreground", children: key })
+  ] }, key)) });
+}
+export {
+  NavigationBrandsExample,
+  PageHeaderExample,
+  SidebarExample,
+  SidebarFeatureExample,
+  SidebarIdentityExample,
+  SidebarItemsExample,
+  TopbarExample
+};
+//# sourceMappingURL=shell.js.map

package/dist/modules/design_system/gallery/demos/shell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/shell.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { BadgeCheck, Bell, CalendarDays, ChevronDown, ChevronRight, ChevronsUpDown, Cloud, CreditCard, Download, FileText, Folder, Gift, Headphones, Home, Layers, PanelLeftClose, PanelLeftOpen, Pause, Play, Plus, Search, Settings, UserRound, Users, X } from 'lucide-react'\nimport { PageHeader } from '@open-mercato/ui/backend/Page'\nimport { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { CompactButton } from '@open-mercato/ui/primitives/compact-button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { LinkButton } from '@open-mercato/ui/primitives/link-button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Checkbox } from '@open-mercato/ui/primitives/checkbox'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport { Progress } from '@open-mercato/ui/primitives/progress'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'\nimport { Sidebar, SidebarContent, SidebarFeatureCard, SidebarFooter, SidebarHeader, SidebarIdentity, SidebarItem, Topbar } from '@open-mercato/ui/primitives/sidebar'\nimport { navigationBrandArtwork } from '@open-mercato/ui/assets/navigation-brand-artwork'\nimport avatarIllustration from '../assets/avatar-illustration.png'\nimport avatarMemoji from '../assets/avatar-memoji.png'\nimport avatarPhoto from '../assets/avatar-photo.png'\n\nconst avatarImages = [avatarIllustration, avatarMemoji, avatarPhoto].map(image => typeof image === 'string' ? image : image.src)\ntype Product = 'hr' | 'finance'\ntype HeaderType = 'basic' | 'avatar' | 'icon' | 'brand' | 'company'\ntype FeatureType = 'meeting' | 'progress' | 'link' | 'gift' | 'storage' | 'support'\ntype FeatureAppearance = 'stroke' | 'gray' | 'primary' | 'neutral'\nconst navItems = {\n  hr: ['dashboard', 'calendar', 'timeOff', 'projects', 'teams', 'integrations', 'benefits', 'documents'],\n  finance: ['dashboard', 'cards', 'transfer', 'transactions', 'payments', 'exchange'],\n} as const\nconst navIcons = [Home, CalendarDays, CreditCard, Folder, Users, Layers, Gift, FileText]\n\nfunction ShellAvatar({ size = 40, product = 'hr' }: { size?: 24 | 32 | 40 | 48; product?: Product }) {\n  return <Avatar src={product === 'hr' ? navigationBrandArtwork.sophiaAvatar : navigationBrandArtwork.arthurAvatar} label={product === 'hr' ? 'Sophia Williams' : 'Arthur Taylor'} size={size} />\n}\n\nfunction WorkspaceIdentity({ product, onProductChange, collapsed = false, profile = false }: { product: Product; onProductChange?: (product: Product) => void; collapsed?: boolean; profile?: boolean }) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const name = product === 'hr' ? 'Synergy' : 'Apex'\n  return <Popover open={open} onOpenChange={setOpen}>\n    <PopoverTrigger asChild>\n      <SidebarIdentity collapsed={collapsed} label={profile ? product === 'hr' ? 'Sophia Williams' : 'Arthur Taylor' : name}\n        description={profile ? product === 'hr' ? 'sophia@example.com' : 'arthur@example.com' : t(`design_system.gallery.examples.shell.${product}`)}\n        leading={profile ? <ShellAvatar product={product} /> : <img src={navigationBrandArtwork[product === 'hr' ? 'synergyOriginal' : 'apexOriginal']} alt=\"\" className=\"size-10\" />}\n        badge={profile ? <BadgeCheck className=\"size-3.5 fill-status-info-icon stroke-status-info-solid-foreground\" aria-hidden=\"true\" /> : undefined}\n        trailing={profile ? <ChevronRight className=\"size-5\" /> : <span className=\"flex size-6 items-center justify-center rounded-sm border border-border bg-background shadow-xs\"><ChevronsUpDown className=\"size-5\" /></span>} />\n    </PopoverTrigger>\n    <PopoverContent className=\"w-64 p-3\">\n      {profile ? <p className=\"text-sm\">{t('design_system.gallery.examples.shell.localProfile')}</p> : <div className=\"flex flex-col gap-1\">\n        {(['hr', 'finance'] as const).map(value => <Button key={value} type=\"button\" variant=\"ghost\" aria-pressed={product === value} onClick={() => { onProductChange?.(value); setOpen(false) }}>{value === 'hr' ? 'Synergy' : 'Apex'}</Button>)}\n      </div>}\n    </PopoverContent>\n  </Popover>\n}\n\nexport function PageHeaderExample({ appearance = 'page', type = 'basic', configurable = false }: { appearance?: 'page' | 'section'; type?: HeaderType; configurable?: boolean }) {\n  const t = useT()\n  const [options, setOptions] = React.useState({ divider: true, search: true, notification: true, actions: true, second: true, dropdown: false })\n  const [query, setQuery] = React.useState('')\n  const [dialog, setDialog] = React.useState(false)\n  const [draft, setDraft] = React.useState('')\n  const [saved, setSaved] = React.useState('')\n  const [period, setPeriod] = React.useState('month')\n  const [workspace, setWorkspace] = React.useState<Product>('hr')\n  const submit = () => { if (draft.trim()) { setSaved(draft.trim()); setDialog(false) } }\n  const copy = (key: string) => t(`design_system.gallery.examples.shell.${key}`)\n  const leading = type === 'avatar' ? <ShellAvatar size={48} />\n    : type === 'icon' ? <span className=\"flex size-12 items-center justify-center rounded-full border border-border\"><UserRound className=\"size-6\" aria-hidden=\"true\" /></span>\n      : type === 'brand' ? <img src={navigationBrandArtwork.loom} alt=\"Loom\" className=\"size-12\" />\n        : type === 'company' ? <img src={navigationBrandArtwork.apexOriginal} alt=\"Apex\" className=\"size-12\" /> : undefined\n  const periodMenu = <Popover><PopoverTrigger asChild><Button type=\"button\" variant=\"outline\" size=\"lg\"><CalendarDays className=\"size-5\" />{copy(period)}<ChevronDown className=\"size-5\" /></Button></PopoverTrigger><PopoverContent className=\"p-2\">{['month', 'year'].map(value => <Button key={value} type=\"button\" variant=\"ghost\" aria-pressed={period === value} onClick={() => setPeriod(value)}>{copy(value)}</Button>)}</PopoverContent></Popover>\n  const titleAction = options.dropdown && appearance === 'section' ? <Popover><PopoverTrigger asChild><CompactButton fullRadius aria-label={copy('switchWorkspace')}><ChevronDown /></CompactButton></PopoverTrigger><PopoverContent className=\"p-3\">{(['hr', 'finance'] as const).map(value => <Button key={value} type=\"button\" variant=\"ghost\" onClick={() => setWorkspace(value)}>{copy(value)}</Button>)}</PopoverContent></Popover> : undefined\n  return <div className=\"w-full\">\n    {configurable ? <div className=\"mb-4 flex flex-wrap gap-4\">{(Object.keys(options) as Array<keyof typeof options>).map(key => <label key={key} className=\"flex items-center gap-2 text-sm\"><Checkbox checked={options[key]} onCheckedChange={checked => setOptions(current => ({ ...current, [key]: checked === true }))} />{copy(key)}</label>)}</div> : null}\n    <PageHeader appearance={appearance} leading={leading} divider={options.divider} title={configurable ? copy(workspace) : copy('title')} description={copy('description')} titleAction={titleAction}\n      actions={<>\n        {options.search ? <Popover><PopoverTrigger asChild><IconButton variant=\"ghost\" className=\"size-10 rounded-lg data-[state=open]:bg-muted\" aria-label={copy('search')}><Search className=\"size-5\" /></IconButton></PopoverTrigger><PopoverContent className=\"p-3\"><SearchInput value={query} onChange={setQuery} aria-label={copy('search')} /><p className=\"mt-2 text-sm\" role=\"status\">{query ? t('design_system.gallery.examples.shell.localQuery', { query }) : copy('searchHint')}</p></PopoverContent></Popover> : null}\n        {options.notification && appearance === 'page' ? <Popover><PopoverTrigger asChild><IconButton variant=\"ghost\" className=\"size-10 rounded-lg data-[state=open]:bg-muted\" aria-label={copy('notifications')}><Bell className=\"size-5\" /></IconButton></PopoverTrigger><PopoverContent className=\"p-4 text-sm\">{copy('noNotifications')}</PopoverContent></Popover> : null}\n        {options.dropdown && appearance === 'page' ? periodMenu : null}\n        {options.actions ? <>\n          {options.second ? appearance === 'page' ? <Button type=\"button\" variant=\"outline\" size=\"lg\" onClick={() => { setDraft(''); setDialog(true) }}><CalendarDays className=\"size-5\" />{copy('schedule')}</Button> : <Button asChild variant=\"outline\" size=\"lg\"><a download=\"page-header-example.json\" href={`data:application/json;charset=utf-8,${encodeURIComponent(JSON.stringify({ title: copy('title'), description: copy('description') }, null, 2))}`}><Download className=\"size-5\" />{copy('export')}</a></Button> : null}\n          <Button type=\"button\" variant=\"primary-filled\" size=\"lg\" onClick={() => { setDraft(''); setDialog(true) }}><Plus className=\"size-5\" />{copy(appearance === 'page' ? 'create' : 'invite')}</Button>\n        </> : null}\n      </>} />\n    {saved ? <output className=\"block px-8 pt-3 text-sm\">{t('design_system.gallery.examples.shell.savedDraft', { title: saved })}</output> : null}\n    <Dialog open={dialog} onOpenChange={setDialog}><DialogContent onKeyDown={event => { if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') { event.preventDefault(); submit() } }}>\n      <DialogHeader><DialogTitle>{copy('localDraft')}</DialogTitle><DialogDescription>{copy('localDraftHint')}</DialogDescription></DialogHeader>\n      <Input value={draft} onChange={event => setDraft(event.target.value)} aria-label={copy('draftTitle')} autoFocus />\n      <DialogFooter><Button type=\"button\" variant=\"outline\" onClick={() => setDialog(false)}>{copy('cancel')}</Button><Button type=\"button\" disabled={!draft.trim()} onClick={submit}>{copy('saveDraft')}</Button></DialogFooter>\n    </DialogContent></Dialog>\n  </div>\n}\n\nfunction FeatureCard({ type, appearance }: { type: FeatureType; appearance: FeatureAppearance }) {\n  const t = useT()\n  const [dismissed, setDismissed] = React.useState(false)\n  const [paused, setPaused] = React.useState(true)\n  const [details, setDetails] = React.useState(false)\n  const id = React.useId()\n  const copy = (key: string) => t(`design_system.gallery.examples.shell.${key}`)\n  const inverse = appearance === 'primary' || appearance === 'neutral'\n  const descriptionClass = inverse ? 'text-current' : 'text-muted-foreground'\n  const link = (key: string) => <LinkButton asChild variant=\"modifiable\" underline=\"always\" className={type === 'link' ? undefined : 'self-start'}><a href={`#${id}`} onClick={() => setDetails(true)}>{copy(key)}{type === 'meeting' ? <ChevronRight className=\"size-5\" /> : null}</a></LinkButton>\n  if (dismissed) return <div className=\"flex min-h-27 w-58 items-center justify-center rounded-lg border border-dashed border-border\"><Button type=\"button\" variant=\"outline\" onClick={() => setDismissed(false)}>{copy('restoreCard')}</Button></div>\n  return <div className=\"w-58 max-w-full\">\n    <SidebarFeatureCard appearance={appearance} className={cn('flex flex-col', type === 'gift' ? 'flex-row items-center gap-3 p-3' : type === 'link' || type === 'support' ? 'gap-3' : 'gap-4', type === 'link' && 'items-center text-center', type === 'storage' && 'px-2 pt-4 pb-2')}>\n      {(type === 'meeting' || type === 'support') ? <CompactButton appearance=\"modifiable\" className=\"absolute top-3 right-3 text-current\" aria-label={copy('dismissCard')} onClick={() => setDismissed(true)}><X /></CompactButton> : null}\n      {type === 'meeting' ? <>\n        <div data-slot=\"sidebar-meeting-avatars\" className=\"flex w-fit items-center gap-1.5 rounded-full bg-background p-0.5 pr-2 text-foreground ring-1 ring-inset ring-border\"><AvatarStack size={24} max={3} className=\"[&_[data-slot=avatar-stack-item]+[data-slot=avatar-stack-item]]:-ml-0.5\">{avatarImages.map((src, index) => <Avatar key={`meeting-avatar-${index}`} label={String(index + 1)} src={src} size={24} />)}</AvatarStack><span className=\"w-4 text-xs leading-4 text-muted-foreground\">+4</span></div>\n        <div className=\"flex flex-col gap-1\"><p className=\"text-sm font-medium\">{copy('meeting')}</p><p className={cn('text-xs', descriptionClass)}>{copy('meetingTime')}</p></div>{link('join')}\n      </> : null}\n      {type === 'progress' ? <><div className=\"flex flex-col gap-1\"><p className=\"text-sm font-medium\">{copy('capacity')}</p><p className={cn('text-xs', descriptionClass)}>{copy('capacityHint')}</p></div><Progress value={90} size=\"md\" aria-label={copy('capacity')} className={inverse ? 'bg-current/20' : undefined} fillClassName={inverse ? 'bg-current' : undefined} />{link('upgrade')}</> : null}\n      {(type === 'link' || type === 'gift') ? <span className={cn('flex size-10 shrink-0 items-center justify-center rounded-full', inverse ? 'bg-background text-status-info-icon' : 'bg-status-info-bg text-status-info-icon')}>{type === 'link' ? <Cloud className=\"size-5\" /> : <Gift className=\"size-5\" />}</span> : null}\n      {type === 'link' ? <><p className={cn('text-sm', descriptionClass)}>{copy('plansHint')}</p>{link('plans')}</> : null}\n      {type === 'gift' ? <div className=\"flex min-w-0 flex-col gap-1\"><p className=\"text-sm font-medium\">{copy('gift')}</p><p className={cn('text-xs', descriptionClass)}>{copy('giftHint')}</p></div> : null}\n      {type === 'storage' ? <><div className=\"px-2\"><div className=\"mb-1.5 flex items-center justify-between text-sm\"><span>{copy('storage')}</span><span className=\"text-xs\">80%</span></div><Progress value={80} size=\"md\" aria-label={copy('storage')} className={inverse ? 'bg-current/20' : undefined} fillClassName={inverse ? 'bg-current' : undefined} /><p className={cn('mt-1.5 text-xs', descriptionClass)}>{copy('storageHint')}</p></div><Button type=\"button\" variant=\"ghost\" className=\"h-8 w-full justify-start gap-1 rounded-md bg-background px-2.5 py-1.5 text-xs text-foreground hover:bg-muted\" aria-pressed={!paused} onClick={() => setPaused(value => !value)}>{copy('sync')}<span className=\"flex-1 text-left text-muted-foreground\">{copy(paused ? 'paused' : 'running')}</span>{paused ? <Play className=\"size-5\" /> : <Pause className=\"size-5\" />}</Button></> : null}\n      {type === 'support' ? <><div className=\"flex items-center gap-2.5 pr-4\"><Headphones className=\"size-6\" /><p className=\"text-base\">{copy('supportTitle')}</p></div><p className={cn('text-sm', descriptionClass)}>{copy('supportHint')}</p></> : null}\n    </SidebarFeatureCard>\n    {(type === 'meeting' || type === 'progress' || type === 'link') ? <div id={id} tabIndex={-1}>{details ? <div data-slot=\"sidebar-feature-details\" className=\"mt-3 rounded-md border border-border p-3 text-sm\"><p className=\"font-medium\">{copy('localDestination')}</p><p className=\"mt-1 text-muted-foreground\">{copy(type === 'meeting' ? 'meetingTime' : 'plansHint')}</p></div> : null}</div> : null}\n  </div>\n}\n\nexport function SidebarFeatureExample({ type = 'meeting' }: { type?: FeatureType }) {\n  return <div className=\"flex w-full flex-wrap items-start gap-6\">{(['stroke', 'gray', 'primary', 'neutral'] as const).map(appearance => <FeatureCard key={appearance} type={type} appearance={appearance} />)}</div>\n}\n\nexport function SidebarItemsExample() {\n  const t = useT()\n  const [selected, setSelected] = React.useState([0, 0])\n  return <div className=\"flex flex-wrap items-start gap-6\">{[false, true].map((collapsed, group) => <div key={String(collapsed)} className={collapsed ? 'w-9' : 'w-58'}>\n    {['dashboard', 'calendar', 'projects'].map((key, index) => <SidebarItem key={key} collapsed={collapsed} icon={React.createElement(navIcons[index], { className: 'size-5' })} active={selected[group] === index} trailing={<ChevronRight className=\"size-5\" />} onClick={() => setSelected(current => current.map((value, currentGroup) => currentGroup === group ? index : value))}>{t(`design_system.gallery.examples.shell.${key}`)}</SidebarItem>)}\n    <output className=\"sr-only\">{t(`design_system.gallery.examples.shell.${['dashboard', 'calendar', 'projects'][selected[group]]}`)}</output>\n  </div>)}</div>\n}\n\nexport function SidebarIdentityExample() {\n  const [product, setProduct] = React.useState<Product>('hr')\n  return <div className=\"flex flex-wrap items-start gap-6\">{[false, true].map(collapsed => <div key={String(collapsed)} className={collapsed ? 'w-16' : 'w-62'}><WorkspaceIdentity collapsed={collapsed} product={product} onProductChange={setProduct} /><WorkspaceIdentity collapsed={collapsed} product={product} profile /></div>)}</div>\n}\n\nexport function SidebarExample({ product = 'hr', collapsed = false, feature = false }: { product?: Product; collapsed?: boolean; feature?: boolean }) {\n  const t = useT()\n  const [compact, setCompact] = React.useState(collapsed)\n  const [workspace, setWorkspace] = React.useState(product)\n  const [active, setActive] = React.useState('dashboard')\n  const copy = (key: string) => t(`design_system.gallery.examples.shell.${key}`)\n  return <div className=\"flex w-full flex-wrap items-start gap-6\">\n    <Sidebar collapsed={compact} className=\"max-w-full\" aria-label={copy('sidebar')}>\n      <SidebarHeader className=\"relative after:absolute after:inset-x-5 after:bottom-0 after:border-b after:border-border after:content-['']\"><WorkspaceIdentity collapsed={compact} product={workspace} onProductChange={value => { setWorkspace(value); setActive('dashboard') }} /></SidebarHeader>\n      <SidebarContent>\n        <nav aria-label={copy('main')} className=\"w-full\"><p className={cn('mb-3 px-1 text-xs uppercase text-muted-foreground', compact && 'sr-only')}>{copy('main')}</p><div className=\"flex flex-col gap-1\">\n          {navItems[workspace].map((key, index) => <SidebarItem key={key} icon={React.createElement(navIcons[index], { className: 'size-5' })} active={active === key} trailing={active === key ? <ChevronRight className=\"size-5\" /> : undefined} className={active === key ? cn(\"before:absolute before:top-2 before:h-5 before:w-1 before:rounded-r before:bg-foreground before:content-['']\", compact ? 'before:-left-5.5' : 'before:-left-5') : undefined} onClick={() => setActive(key)}>{copy(key)}</SidebarItem>)}\n        </div></nav>\n        {!compact && workspace === 'hr' && !feature ? <nav aria-label={copy('favorites')}><p className=\"mb-3 px-1 text-xs uppercase text-muted-foreground\">{copy('favorites')}</p>{['Loom Mobile App', 'Monday Redesign', 'Udemy Courses'].map((name, index) => <SidebarItem key={name} icon={<Folder className=\"size-5\" />} active={active === name} trailing={<span className=\"text-xs\">\u2318{index + 1}</span>} onClick={() => setActive(name)}>{name}</SidebarItem>)}</nav> : null}\n        <nav aria-label={copy('support')} className=\"mt-auto w-full\">{['settings', 'support'].map(key => <SidebarItem key={key} icon={key === 'settings' ? <Settings /> : <Headphones />} active={active === key} onClick={() => setActive(key)}>{copy(key)}</SidebarItem>)}</nav>\n        {feature && !compact ? <FeatureCard type={workspace === 'hr' ? 'meeting' : 'progress'} appearance=\"stroke\" /> : null}\n      </SidebarContent>\n      <SidebarFooter><WorkspaceIdentity collapsed={compact} product={workspace} profile /></SidebarFooter>\n    </Sidebar>\n    <div className=\"min-w-0 flex-1 basis-64 space-y-4 py-5\"><IconButton variant=\"outline\" aria-label={copy(compact ? 'expand' : 'collapse')} aria-expanded={!compact} onClick={() => setCompact(value => !value)}>{compact ? <PanelLeftOpen /> : <PanelLeftClose />}</IconButton><h3 className=\"text-lg font-medium\">{navItems[workspace].some(key => key === active) || ['settings', 'support'].includes(active) ? copy(active) : active}</h3><p className=\"text-sm text-muted-foreground\">{copy('previewHint')}</p></div>\n  </div>\n}\n\nexport function TopbarExample({ product = 'hr', icons = false }: { product?: Product; icons?: boolean }) {\n  const t = useT()\n  const [active, setActive] = React.useState('dashboard')\n  const [query, setQuery] = React.useState('')\n  const copy = (key: string) => t(`design_system.gallery.examples.shell.${key}`)\n  const items = product === 'hr' ? ['dashboard', 'calendar', 'timeOff', 'projects', 'teams', 'settings'] : navItems.finance\n  return <div className=\"w-full overflow-x-auto\"><Topbar className=\"w-360 flex-nowrap\">\n    <img src={navigationBrandArtwork[product === 'hr' ? 'synergyOriginal' : 'apexOriginal']} alt={product === 'hr' ? 'Synergy' : 'Apex'} className=\"size-10\" />\n    <nav aria-label={copy('topbar')} className=\"flex min-w-0 flex-1 items-center gap-1\">{items.filter(key => copy(key).toLocaleLowerCase().includes(query.toLocaleLowerCase())).map((key, index) => <SidebarItem key={key} icon={icons ? React.createElement(navIcons[index], { className: 'size-5' }) : null} active={active === key} className={cn('w-auto flex-1 px-2', !icons && '[&>span:first-child]:hidden')} onClick={() => setActive(key)}>{copy(key)}</SidebarItem>)}<Popover><PopoverTrigger asChild><Button type=\"button\" variant=\"ghost\" className=\"h-9 gap-2 px-3\">{copy('others')}<ChevronDown className=\"size-5\" /></Button></PopoverTrigger><PopoverContent className=\"p-2\">{['settings', 'support'].map(key => <Button key={key} type=\"button\" variant=\"ghost\" onClick={() => setActive(key)}>{copy(key)}</Button>)}</PopoverContent></Popover></nav>\n    <SearchInput value={query} onChange={setQuery} className=\"w-58\" aria-label={copy('filterNavigation')} />\n    <Popover><PopoverTrigger asChild><IconButton variant=\"ghost\" className=\"size-10 rounded-lg data-[state=open]:bg-muted\" aria-label={copy('notifications')}><Bell className=\"size-5\" /></IconButton></PopoverTrigger><PopoverContent className=\"p-4 text-sm\">{copy('noNotifications')}</PopoverContent></Popover>\n    <Popover><PopoverTrigger asChild><Button type=\"button\" variant=\"ghost\" className=\"h-10 gap-1.5 rounded-lg py-1 pr-2 pl-1 data-[state=open]:bg-muted\"><ShellAvatar size={32} product={product} /><span>{product === 'hr' ? 'Sophia' : 'Arthur'}</span><ChevronDown className=\"size-5\" /></Button></PopoverTrigger><PopoverContent className=\"p-4 text-sm\">{copy('localProfile')}</PopoverContent></Popover>\n  </Topbar><output className=\"sr-only\">{copy(active)}</output></div>\n}\n\nexport function NavigationBrandsExample() {\n  return <div className=\"flex flex-wrap gap-6\">{Object.entries(navigationBrandArtwork).filter(([key]) => key !== 'loom' && !key.endsWith('Avatar')).map(([key, src]) => <figure key={key} className=\"space-y-2\"><div className={cn('flex size-20 items-center justify-center rounded-lg', key.endsWith('White') ? 'bg-status-info-solid' : key.endsWith('Black') ? 'bg-accent-indigo-foreground' : 'bg-background')}><img src={src} alt={key.startsWith('synergy') ? 'Synergy' : 'Apex'} className=\"size-10\" /></div><figcaption className=\"text-xs text-muted-foreground\">{key}</figcaption></figure>)}</div>\n}\n"],
+  "mappings": "AAkCS,SA+CkB,UA/ClB,KAOA,YAPA;AAlCT,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,YAAY,MAAM,cAAc,aAAa,cAAc,gBAAgB,OAAO,YAAY,UAAU,UAAU,QAAQ,MAAM,YAAY,MAAM,QAAQ,gBAAgB,eAAe,OAAO,MAAM,MAAM,QAAQ,UAAU,WAAW,OAAO,SAAS;AAClQ,SAAS,kBAAkB;AAC3B,SAAS,QAAQ,mBAAmB;AACpC,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,QAAQ,eAAe,mBAAmB,cAAc,cAAc,mBAAmB;AAClG,SAAS,SAAS,gBAAgB,oBAAoB,eAAe,eAAe,iBAAiB,aAAa,cAAc;AAChI,SAAS,8BAA8B;AACvC,OAAO,wBAAwB;AAC/B,OAAO,kBAAkB;AACzB,OAAO,iBAAiB;AAExB,MAAM,eAAe,CAAC,oBAAoB,cAAc,WAAW,EAAE,IAAI,WAAS,OAAO,UAAU,WAAW,QAAQ,MAAM,GAAG;AAK/H,MAAM,WAAW;AAAA,EACf,IAAI,CAAC,aAAa,YAAY,WAAW,YAAY,SAAS,gBAAgB,YAAY,WAAW;AAAA,EACrG,SAAS,CAAC,aAAa,SAAS,YAAY,gBAAgB,YAAY,UAAU;AACpF;AACA,MAAM,WAAW,CAAC,MAAM,cAAc,YAAY,QAAQ,OAAO,QAAQ,MAAM,QAAQ;AAEvF,SAAS,YAAY,EAAE,OAAO,IAAI,UAAU,KAAK,GAAoD;AACnG,SAAO,oBAAC,UAAO,KAAK,YAAY,OAAO,uBAAuB,eAAe,uBAAuB,cAAc,OAAO,YAAY,OAAO,oBAAoB,iBAAiB,MAAY;AAC/L;AAEA,SAAS,kBAAkB,EAAE,SAAS,iBAAiB,YAAY,OAAO,UAAU,MAAM,GAA+G;AACvM,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,OAAO,YAAY,OAAO,YAAY;AAC5C,SAAO,qBAAC,WAAQ,MAAY,cAAc,SACxC;AAAA,wBAAC,kBAAe,SAAO,MACrB;AAAA,MAAC;AAAA;AAAA,QAAgB;AAAA,QAAsB,OAAO,UAAU,YAAY,OAAO,oBAAoB,kBAAkB;AAAA,QAC/G,aAAa,UAAU,YAAY,OAAO,uBAAuB,uBAAuB,EAAE,wCAAwC,OAAO,EAAE;AAAA,QAC3I,SAAS,UAAU,oBAAC,eAAY,SAAkB,IAAK,oBAAC,SAAI,KAAK,uBAAuB,YAAY,OAAO,oBAAoB,cAAc,GAAG,KAAI,IAAG,WAAU,WAAU;AAAA,QAC3K,OAAO,UAAU,oBAAC,cAAW,WAAU,sEAAqE,eAAY,QAAO,IAAK;AAAA,QACpI,UAAU,UAAU,oBAAC,gBAAa,WAAU,UAAS,IAAK,oBAAC,UAAK,WAAU,mGAAkG,8BAAC,kBAAe,WAAU,UAAS,GAAE;AAAA;AAAA,IAAS,GAC9N;AAAA,IACA,oBAAC,kBAAe,WAAU,YACvB,oBAAU,oBAAC,OAAE,WAAU,WAAW,YAAE,mDAAmD,GAAE,IAAO,oBAAC,SAAI,WAAU,uBAC5G,WAAC,MAAM,SAAS,EAAY,IAAI,WAAS,oBAAC,UAAmB,MAAK,UAAS,SAAQ,SAAQ,gBAAc,YAAY,OAAO,SAAS,MAAM;AAAE,wBAAkB,KAAK;AAAG,cAAQ,KAAK;AAAA,IAAE,GAAI,oBAAU,OAAO,YAAY,UAAjK,KAAwK,CAAS,GAC3O,GACF;AAAA,KACF;AACF;AAEO,SAAS,kBAAkB,EAAE,aAAa,QAAQ,OAAO,SAAS,eAAe,MAAM,GAAmF;AAC/K,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,QAAQ,MAAM,cAAc,MAAM,SAAS,MAAM,QAAQ,MAAM,UAAU,MAAM,CAAC;AAC9I,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,OAAO;AAClD,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAkB,IAAI;AAC9D,QAAM,SAAS,MAAM;AAAE,QAAI,MAAM,KAAK,GAAG;AAAE,eAAS,MAAM,KAAK,CAAC;AAAG,gBAAU,KAAK;AAAA,IAAE;AAAA,EAAE;AACtF,QAAM,OAAO,CAAC,QAAgB,EAAE,wCAAwC,GAAG,EAAE;AAC7E,QAAM,UAAU,SAAS,WAAW,oBAAC,eAAY,MAAM,IAAI,IACvD,SAAS,SAAS,oBAAC,UAAK,WAAU,8EAA6E,8BAAC,aAAU,WAAU,UAAS,eAAY,QAAO,GAAE,IAChK,SAAS,UAAU,oBAAC,SAAI,KAAK,uBAAuB,MAAM,KAAI,QAAO,WAAU,WAAU,IACvF,SAAS,YAAY,oBAAC,SAAI,KAAK,uBAAuB,cAAc,KAAI,QAAO,WAAU,WAAU,IAAK;AAChH,QAAM,aAAa,qBAAC,WAAQ;AAAA,wBAAC,kBAAe,SAAO,MAAC,+BAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAAK;AAAA,0BAAC,gBAAa,WAAU,UAAS;AAAA,MAAG,KAAK,MAAM;AAAA,MAAE,oBAAC,eAAY,WAAU,UAAS;AAAA,OAAE,GAAS;AAAA,IAAiB,oBAAC,kBAAe,WAAU,OAAO,WAAC,SAAS,MAAM,EAAE,IAAI,WAAS,oBAAC,UAAmB,MAAK,UAAS,SAAQ,SAAQ,gBAAc,WAAW,OAAO,SAAS,MAAM,UAAU,KAAK,GAAI,eAAK,KAAK,KAAjH,KAAmH,CAAS,GAAE;AAAA,KAAiB;AAC/a,QAAM,cAAc,QAAQ,YAAY,eAAe,YAAY,qBAAC,WAAQ;AAAA,wBAAC,kBAAe,SAAO,MAAC,8BAAC,iBAAc,YAAU,MAAC,cAAY,KAAK,iBAAiB,GAAG,8BAAC,eAAY,GAAE,GAAgB;AAAA,IAAiB,oBAAC,kBAAe,WAAU,OAAQ,WAAC,MAAM,SAAS,EAAY,IAAI,WAAS,oBAAC,UAAmB,MAAK,UAAS,SAAQ,SAAQ,SAAS,MAAM,aAAa,KAAK,GAAI,eAAK,KAAK,KAApF,KAAsF,CAAS,GAAE;AAAA,KAAiB,IAAa;AAC1a,SAAO,qBAAC,SAAI,WAAU,UACnB;AAAA,mBAAe,oBAAC,SAAI,WAAU,6BAA8B,iBAAO,KAAK,OAAO,EAAkC,IAAI,SAAO,qBAAC,WAAgB,WAAU,mCAAkC;AAAA,0BAAC,YAAS,SAAS,QAAQ,GAAG,GAAG,iBAAiB,aAAW,WAAW,cAAY,EAAE,GAAG,SAAS,CAAC,GAAG,GAAG,YAAY,KAAK,EAAE,GAAG;AAAA,MAAG,KAAK,GAAG;AAAA,SAA3L,GAA6L,CAAQ,GAAE,IAAS;AAAA,IACzV;AAAA,MAAC;AAAA;AAAA,QAAW;AAAA,QAAwB;AAAA,QAAkB,SAAS,QAAQ;AAAA,QAAS,OAAO,eAAe,KAAK,SAAS,IAAI,KAAK,OAAO;AAAA,QAAG,aAAa,KAAK,aAAa;AAAA,QAAG;AAAA,QACvK,SAAS,iCACN;AAAA,kBAAQ,SAAS,qBAAC,WAAQ;AAAA,gCAAC,kBAAe,SAAO,MAAC,8BAAC,cAAW,SAAQ,SAAQ,WAAU,iDAAgD,cAAY,KAAK,QAAQ,GAAG,8BAAC,UAAO,WAAU,UAAS,GAAE,GAAa;AAAA,YAAiB,qBAAC,kBAAe,WAAU,OAAM;AAAA,kCAAC,eAAY,OAAO,OAAO,UAAU,UAAU,cAAY,KAAK,QAAQ,GAAG;AAAA,cAAE,oBAAC,OAAE,WAAU,gBAAe,MAAK,UAAU,kBAAQ,EAAE,mDAAmD,EAAE,MAAM,CAAC,IAAI,KAAK,YAAY,GAAE;AAAA,eAAI;AAAA,aAAiB,IAAa;AAAA,UACtf,QAAQ,gBAAgB,eAAe,SAAS,qBAAC,WAAQ;AAAA,gCAAC,kBAAe,SAAO,MAAC,8BAAC,cAAW,SAAQ,SAAQ,WAAU,iDAAgD,cAAY,KAAK,eAAe,GAAG,8BAAC,QAAK,WAAU,UAAS,GAAE,GAAa;AAAA,YAAiB,oBAAC,kBAAe,WAAU,eAAe,eAAK,iBAAiB,GAAE;AAAA,aAAiB,IAAa;AAAA,UAClW,QAAQ,YAAY,eAAe,SAAS,aAAa;AAAA,UACzD,QAAQ,UAAU,iCAChB;AAAA,oBAAQ,SAAS,eAAe,SAAS,qBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAAK,SAAS,MAAM;AAAE,uBAAS,EAAE;AAAG,wBAAU,IAAI;AAAA,YAAE,GAAG;AAAA,kCAAC,gBAAa,WAAU,UAAS;AAAA,cAAG,KAAK,UAAU;AAAA,eAAE,IAAY,oBAAC,UAAO,SAAO,MAAC,SAAQ,WAAU,MAAK,MAAK,+BAAC,OAAE,UAAS,4BAA2B,MAAM,uCAAuC,mBAAmB,KAAK,UAAU,EAAE,OAAO,KAAK,OAAO,GAAG,aAAa,KAAK,aAAa,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI;AAAA,kCAAC,YAAS,WAAU,UAAS;AAAA,cAAG,KAAK,QAAQ;AAAA,eAAE,GAAI,IAAY;AAAA,YACzf,qBAAC,UAAO,MAAK,UAAS,SAAQ,kBAAiB,MAAK,MAAK,SAAS,MAAM;AAAE,uBAAS,EAAE;AAAG,wBAAU,IAAI;AAAA,YAAE,GAAG;AAAA,kCAAC,QAAK,WAAU,UAAS;AAAA,cAAG,KAAK,eAAe,SAAS,WAAW,QAAQ;AAAA,eAAE;AAAA,aAC3L,IAAM;AAAA,WACR;AAAA;AAAA,IAAK;AAAA,IACN,QAAQ,oBAAC,YAAO,WAAU,2BAA2B,YAAE,mDAAmD,EAAE,OAAO,MAAM,CAAC,GAAE,IAAY;AAAA,IACzI,oBAAC,UAAO,MAAM,QAAQ,cAAc,WAAW,+BAAC,iBAAc,WAAW,WAAS;AAAE,WAAK,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ,SAAS;AAAE,cAAM,eAAe;AAAG,eAAO;AAAA,MAAE;AAAA,IAAE,GACtL;AAAA,2BAAC,gBAAa;AAAA,4BAAC,eAAa,eAAK,YAAY,GAAE;AAAA,QAAc,oBAAC,qBAAmB,eAAK,gBAAgB,GAAE;AAAA,SAAoB;AAAA,MAC5H,oBAAC,SAAM,OAAO,OAAO,UAAU,WAAS,SAAS,MAAM,OAAO,KAAK,GAAG,cAAY,KAAK,YAAY,GAAG,WAAS,MAAC;AAAA,MAChH,qBAAC,gBAAa;AAAA,4BAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,SAAS,MAAM,UAAU,KAAK,GAAI,eAAK,QAAQ,GAAE;AAAA,QAAS,oBAAC,UAAO,MAAK,UAAS,UAAU,CAAC,MAAM,KAAK,GAAG,SAAS,QAAS,eAAK,WAAW,GAAE;AAAA,SAAS;AAAA,OAC9M,GAAgB;AAAA,KAClB;AACF;AAEA,SAAS,YAAY,EAAE,MAAM,WAAW,GAAyD;AAC/F,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,IAAI;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAClD,QAAM,KAAK,MAAM,MAAM;AACvB,QAAM,OAAO,CAAC,QAAgB,EAAE,wCAAwC,GAAG,EAAE;AAC7E,QAAM,UAAU,eAAe,aAAa,eAAe;AAC3D,QAAM,mBAAmB,UAAU,iBAAiB;AACpD,QAAM,OAAO,CAAC,QAAgB,oBAAC,cAAW,SAAO,MAAC,SAAQ,cAAa,WAAU,UAAS,WAAW,SAAS,SAAS,SAAY,cAAc,+BAAC,OAAE,MAAM,IAAI,EAAE,IAAI,SAAS,MAAM,WAAW,IAAI,GAAI;AAAA,SAAK,GAAG;AAAA,IAAG,SAAS,YAAY,oBAAC,gBAAa,WAAU,UAAS,IAAK;AAAA,KAAK,GAAI;AACrR,MAAI,UAAW,QAAO,oBAAC,SAAI,WAAU,gGAA+F,8BAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,SAAS,MAAM,aAAa,KAAK,GAAI,eAAK,aAAa,GAAE,GAAS;AAC9O,SAAO,qBAAC,SAAI,WAAU,mBACpB;AAAA,yBAAC,sBAAmB,YAAwB,WAAW,GAAG,iBAAiB,SAAS,SAAS,oCAAoC,SAAS,UAAU,SAAS,YAAY,UAAU,SAAS,SAAS,UAAU,4BAA4B,SAAS,aAAa,gBAAgB,GAC7Q;AAAA,eAAS,aAAa,SAAS,YAAa,oBAAC,iBAAc,YAAW,cAAa,WAAU,uCAAsC,cAAY,KAAK,aAAa,GAAG,SAAS,MAAM,aAAa,IAAI,GAAG,8BAAC,KAAE,GAAE,IAAmB;AAAA,MAChO,SAAS,YAAY,iCACpB;AAAA,6BAAC,SAAI,aAAU,2BAA0B,WAAU,uHAAsH;AAAA,8BAAC,eAAY,MAAM,IAAI,KAAK,GAAG,WAAU,2EAA2E,uBAAa,IAAI,CAAC,KAAK,UAAU,oBAAC,UAAuC,OAAO,OAAO,QAAQ,CAAC,GAAG,KAAU,MAAM,MAArE,kBAAkB,KAAK,EAAkD,CAAE,GAAE;AAAA,UAAc,oBAAC,UAAK,WAAU,+CAA8C,gBAAE;AAAA,WAAO;AAAA,QAC7e,qBAAC,SAAI,WAAU,uBAAsB;AAAA,8BAAC,OAAE,WAAU,uBAAuB,eAAK,SAAS,GAAE;AAAA,UAAI,oBAAC,OAAE,WAAW,GAAG,WAAW,gBAAgB,GAAI,eAAK,aAAa,GAAE;AAAA,WAAI;AAAA,QAAO,KAAK,MAAM;AAAA,SACzL,IAAM;AAAA,MACL,SAAS,aAAa,iCAAE;AAAA,6BAAC,SAAI,WAAU,uBAAsB;AAAA,8BAAC,OAAE,WAAU,uBAAuB,eAAK,UAAU,GAAE;AAAA,UAAI,oBAAC,OAAE,WAAW,GAAG,WAAW,gBAAgB,GAAI,eAAK,cAAc,GAAE;AAAA,WAAI;AAAA,QAAM,oBAAC,YAAS,OAAO,IAAI,MAAK,MAAK,cAAY,KAAK,UAAU,GAAG,WAAW,UAAU,kBAAkB,QAAW,eAAe,UAAU,eAAe,QAAW;AAAA,QAAG,KAAK,SAAS;AAAA,SAAE,IAAM;AAAA,MAC/X,SAAS,UAAU,SAAS,SAAU,oBAAC,UAAK,WAAW,GAAG,kEAAkE,UAAU,wCAAwC,yCAAyC,GAAI,mBAAS,SAAS,oBAAC,SAAM,WAAU,UAAS,IAAK,oBAAC,QAAK,WAAU,UAAS,GAAG,IAAU;AAAA,MACnT,SAAS,SAAS,iCAAE;AAAA,4BAAC,OAAE,WAAW,GAAG,WAAW,gBAAgB,GAAI,eAAK,WAAW,GAAE;AAAA,QAAK,KAAK,OAAO;AAAA,SAAE,IAAM;AAAA,MAC/G,SAAS,SAAS,qBAAC,SAAI,WAAU,+BAA8B;AAAA,4BAAC,OAAE,WAAU,uBAAuB,eAAK,MAAM,GAAE;AAAA,QAAI,oBAAC,OAAE,WAAW,GAAG,WAAW,gBAAgB,GAAI,eAAK,UAAU,GAAE;AAAA,SAAI,IAAS;AAAA,MAClM,SAAS,YAAY,iCAAE;AAAA,6BAAC,SAAI,WAAU,QAAO;AAAA,+BAAC,SAAI,WAAU,oDAAmD;AAAA,gCAAC,UAAM,eAAK,SAAS,GAAE;AAAA,YAAO,oBAAC,UAAK,WAAU,WAAU,iBAAG;AAAA,aAAO;AAAA,UAAM,oBAAC,YAAS,OAAO,IAAI,MAAK,MAAK,cAAY,KAAK,SAAS,GAAG,WAAW,UAAU,kBAAkB,QAAW,eAAe,UAAU,eAAe,QAAW;AAAA,UAAE,oBAAC,OAAE,WAAW,GAAG,kBAAkB,gBAAgB,GAAI,eAAK,aAAa,GAAE;AAAA,WAAI;AAAA,QAAM,qBAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,WAAU,gHAA+G,gBAAc,CAAC,QAAQ,SAAS,MAAM,UAAU,WAAS,CAAC,KAAK,GAAI;AAAA,eAAK,MAAM;AAAA,UAAE,oBAAC,UAAK,WAAU,0CAA0C,eAAK,SAAS,WAAW,SAAS,GAAE;AAAA,UAAQ,SAAS,oBAAC,QAAK,WAAU,UAAS,IAAK,oBAAC,SAAM,WAAU,UAAS;AAAA,WAAG;AAAA,SAAS,IAAM;AAAA,MACv1B,SAAS,YAAY,iCAAE;AAAA,6BAAC,SAAI,WAAU,kCAAiC;AAAA,8BAAC,cAAW,WAAU,UAAS;AAAA,UAAE,oBAAC,OAAE,WAAU,aAAa,eAAK,cAAc,GAAE;AAAA,WAAI;AAAA,QAAM,oBAAC,OAAE,WAAW,GAAG,WAAW,gBAAgB,GAAI,eAAK,aAAa,GAAE;AAAA,SAAI,IAAM;AAAA,OAClP;AAAA,IACE,SAAS,aAAa,SAAS,cAAc,SAAS,SAAU,oBAAC,SAAI,IAAQ,UAAU,IAAK,oBAAU,qBAAC,SAAI,aAAU,2BAA0B,WAAU,oDAAmD;AAAA,0BAAC,OAAE,WAAU,eAAe,eAAK,kBAAkB,GAAE;AAAA,MAAI,oBAAC,OAAE,WAAU,8BAA8B,eAAK,SAAS,YAAY,gBAAgB,WAAW,GAAE;AAAA,OAAI,IAAS,MAAK,IAAS;AAAA,KACtY;AACF;AAEO,SAAS,sBAAsB,EAAE,OAAO,UAAU,GAA2B;AAClF,SAAO,oBAAC,SAAI,WAAU,2CAA4C,WAAC,UAAU,QAAQ,WAAW,SAAS,EAAY,IAAI,gBAAc,oBAAC,eAA6B,MAAY,cAAxB,UAAgD,CAAE,GAAE;AAC/M;AAEO,SAAS,sBAAsB;AACpC,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,CAAC,GAAG,CAAC,CAAC;AACrD,SAAO,oBAAC,SAAI,WAAU,oCAAoC,WAAC,OAAO,IAAI,EAAE,IAAI,CAAC,WAAW,UAAU,qBAAC,SAA4B,WAAW,YAAY,QAAQ,QAC3J;AAAA,KAAC,aAAa,YAAY,UAAU,EAAE,IAAI,CAAC,KAAK,UAAU,oBAAC,eAAsB,WAAsB,MAAM,MAAM,cAAc,SAAS,KAAK,GAAG,EAAE,WAAW,SAAS,CAAC,GAAG,QAAQ,SAAS,KAAK,MAAM,OAAO,UAAU,oBAAC,gBAAa,WAAU,UAAS,GAAI,SAAS,MAAM,YAAY,aAAW,QAAQ,IAAI,CAAC,OAAO,iBAAiB,iBAAiB,QAAQ,QAAQ,KAAK,CAAC,GAAI,YAAE,wCAAwC,GAAG,EAAE,KAAvV,GAAyV,CAAc;AAAA,IACpb,oBAAC,YAAO,WAAU,WAAW,YAAE,wCAAwC,CAAC,aAAa,YAAY,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC,EAAE,GAAE;AAAA,OAFvB,OAAO,SAAS,CAG5H,CAAM,GAAE;AACV;AAEO,SAAS,yBAAyB;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAkB,IAAI;AAC1D,SAAO,oBAAC,SAAI,WAAU,oCAAoC,WAAC,OAAO,IAAI,EAAE,IAAI,eAAa,qBAAC,SAA4B,WAAW,YAAY,SAAS,QAAQ;AAAA,wBAAC,qBAAkB,WAAsB,SAAkB,iBAAiB,YAAY;AAAA,IAAE,oBAAC,qBAAkB,WAAsB,SAAkB,SAAO,MAAC;AAAA,OAAxN,OAAO,SAAS,CAA0M,CAAM,GAAE;AACvU;AAEO,SAAS,eAAe,EAAE,UAAU,MAAM,YAAY,OAAO,UAAU,MAAM,GAAkE;AACpJ,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,SAAS;AACtD,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,OAAO;AACxD,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,WAAW;AACtD,QAAM,OAAO,CAAC,QAAgB,EAAE,wCAAwC,GAAG,EAAE;AAC7E,SAAO,qBAAC,SAAI,WAAU,2CACpB;AAAA,yBAAC,WAAQ,WAAW,SAAS,WAAU,cAAa,cAAY,KAAK,SAAS,GAC5E;AAAA,0BAAC,iBAAc,WAAU,gHAA+G,8BAAC,qBAAkB,WAAW,SAAS,SAAS,WAAW,iBAAiB,WAAS;AAAE,qBAAa,KAAK;AAAG,kBAAU,WAAW;AAAA,MAAE,GAAG,GAAE;AAAA,MAChR,qBAAC,kBACC;AAAA,6BAAC,SAAI,cAAY,KAAK,MAAM,GAAG,WAAU,UAAS;AAAA,8BAAC,OAAE,WAAW,GAAG,qDAAqD,WAAW,SAAS,GAAI,eAAK,MAAM,GAAE;AAAA,UAAI,oBAAC,SAAI,WAAU,uBAC7K,mBAAS,SAAS,EAAE,IAAI,CAAC,KAAK,UAAU,oBAAC,eAAsB,MAAM,MAAM,cAAc,SAAS,KAAK,GAAG,EAAE,WAAW,SAAS,CAAC,GAAG,QAAQ,WAAW,KAAK,UAAU,WAAW,MAAM,oBAAC,gBAAa,WAAU,UAAS,IAAK,QAAW,WAAW,WAAW,MAAM,GAAG,gHAAgH,UAAU,qBAAqB,gBAAgB,IAAI,QAAW,SAAS,MAAM,UAAU,GAAG,GAAI,eAAK,GAAG,KAAna,GAAqa,CAAc,GAChf;AAAA,WAAM;AAAA,QACL,CAAC,WAAW,cAAc,QAAQ,CAAC,UAAU,qBAAC,SAAI,cAAY,KAAK,WAAW,GAAG;AAAA,8BAAC,OAAE,WAAU,qDAAqD,eAAK,WAAW,GAAE;AAAA,UAAK,CAAC,mBAAmB,mBAAmB,eAAe,EAAE,IAAI,CAAC,MAAM,UAAU,oBAAC,eAAuB,MAAM,oBAAC,UAAO,WAAU,UAAS,GAAI,QAAQ,WAAW,MAAM,UAAU,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,YAAE,QAAQ;AAAA,aAAE,GAAS,SAAS,MAAM,UAAU,IAAI,GAAI,kBAA9J,IAAmK,CAAc;AAAA,WAAE,IAAS;AAAA,QACtc,oBAAC,SAAI,cAAY,KAAK,SAAS,GAAG,WAAU,kBAAkB,WAAC,YAAY,SAAS,EAAE,IAAI,SAAO,oBAAC,eAAsB,MAAM,QAAQ,aAAa,oBAAC,YAAS,IAAK,oBAAC,cAAW,GAAI,QAAQ,WAAW,KAAK,SAAS,MAAM,UAAU,GAAG,GAAI,eAAK,GAAG,KAA/H,GAAiI,CAAc,GAAE;AAAA,QACnQ,WAAW,CAAC,UAAU,oBAAC,eAAY,MAAM,cAAc,OAAO,YAAY,YAAY,YAAW,UAAS,IAAK;AAAA,SAClH;AAAA,MACA,oBAAC,iBAAc,8BAAC,qBAAkB,WAAW,SAAS,SAAS,WAAW,SAAO,MAAC,GAAE;AAAA,OACtF;AAAA,IACA,qBAAC,SAAI,WAAU,0CAAyC;AAAA,0BAAC,cAAW,SAAQ,WAAU,cAAY,KAAK,UAAU,WAAW,UAAU,GAAG,iBAAe,CAAC,SAAS,SAAS,MAAM,WAAW,WAAS,CAAC,KAAK,GAAI,oBAAU,oBAAC,iBAAc,IAAK,oBAAC,kBAAe,GAAG;AAAA,MAAa,oBAAC,QAAG,WAAU,uBAAuB,mBAAS,SAAS,EAAE,KAAK,SAAO,QAAQ,MAAM,KAAK,CAAC,YAAY,SAAS,EAAE,SAAS,MAAM,IAAI,KAAK,MAAM,IAAI,QAAO;AAAA,MAAK,oBAAC,OAAE,WAAU,iCAAiC,eAAK,aAAa,GAAE;AAAA,OAAI;AAAA,KACnf;AACF;AAEO,SAAS,cAAc,EAAE,UAAU,MAAM,QAAQ,MAAM,GAA2C;AACvG,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,WAAW;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,OAAO,CAAC,QAAgB,EAAE,wCAAwC,GAAG,EAAE;AAC7E,QAAM,QAAQ,YAAY,OAAO,CAAC,aAAa,YAAY,WAAW,YAAY,SAAS,UAAU,IAAI,SAAS;AAClH,SAAO,qBAAC,SAAI,WAAU,0BAAyB;AAAA,yBAAC,UAAO,WAAU,qBAC/D;AAAA,0BAAC,SAAI,KAAK,uBAAuB,YAAY,OAAO,oBAAoB,cAAc,GAAG,KAAK,YAAY,OAAO,YAAY,QAAQ,WAAU,WAAU;AAAA,MACzJ,qBAAC,SAAI,cAAY,KAAK,QAAQ,GAAG,WAAU,0CAA0C;AAAA,cAAM,OAAO,SAAO,KAAK,GAAG,EAAE,kBAAkB,EAAE,SAAS,MAAM,kBAAkB,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,UAAU,oBAAC,eAAsB,MAAM,QAAQ,MAAM,cAAc,SAAS,KAAK,GAAG,EAAE,WAAW,SAAS,CAAC,IAAI,MAAM,QAAQ,WAAW,KAAK,WAAW,GAAG,sBAAsB,CAAC,SAAS,6BAA6B,GAAG,SAAS,MAAM,UAAU,GAAG,GAAI,eAAK,GAAG,KAAvO,GAAyO,CAAc;AAAA,QAAE,qBAAC,WAAQ;AAAA,8BAAC,kBAAe,SAAO,MAAC,+BAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,WAAU,kBAAkB;AAAA,iBAAK,QAAQ;AAAA,YAAE,oBAAC,eAAY,WAAU,UAAS;AAAA,aAAE,GAAS;AAAA,UAAiB,oBAAC,kBAAe,WAAU,OAAO,WAAC,YAAY,SAAS,EAAE,IAAI,SAAO,oBAAC,UAAiB,MAAK,UAAS,SAAQ,SAAQ,SAAS,MAAM,UAAU,GAAG,GAAI,eAAK,GAAG,KAA3E,GAA6E,CAAS,GAAE;AAAA,WAAiB;AAAA,SAAU;AAAA,MAC7zB,oBAAC,eAAY,OAAO,OAAO,UAAU,UAAU,WAAU,QAAO,cAAY,KAAK,kBAAkB,GAAG;AAAA,MACtG,qBAAC,WAAQ;AAAA,4BAAC,kBAAe,SAAO,MAAC,8BAAC,cAAW,SAAQ,SAAQ,WAAU,iDAAgD,cAAY,KAAK,eAAe,GAAG,8BAAC,QAAK,WAAU,UAAS,GAAE,GAAa;AAAA,QAAiB,oBAAC,kBAAe,WAAU,eAAe,eAAK,iBAAiB,GAAE;AAAA,SAAiB;AAAA,MACrS,qBAAC,WAAQ;AAAA,4BAAC,kBAAe,SAAO,MAAC,+BAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,WAAU,qEAAoE;AAAA,8BAAC,eAAY,MAAM,IAAI,SAAkB;AAAA,UAAE,oBAAC,UAAM,sBAAY,OAAO,WAAW,UAAS;AAAA,UAAO,oBAAC,eAAY,WAAU,UAAS;AAAA,WAAE,GAAS;AAAA,QAAiB,oBAAC,kBAAe,WAAU,eAAe,eAAK,cAAc,GAAE;AAAA,SAAiB;AAAA,OAClY;AAAA,IAAS,oBAAC,YAAO,WAAU,WAAW,eAAK,MAAM,GAAE;AAAA,KAAS;AAC9D;AAEO,SAAS,0BAA0B;AACxC,SAAO,oBAAC,SAAI,WAAU,wBAAwB,iBAAO,QAAQ,sBAAsB,EAAE,OAAO,CAAC,CAAC,GAAG,MAAM,QAAQ,UAAU,CAAC,IAAI,SAAS,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,KAAK,GAAG,MAAM,qBAAC,YAAiB,WAAU,aAAY;AAAA,wBAAC,SAAI,WAAW,GAAG,uDAAuD,IAAI,SAAS,OAAO,IAAI,yBAAyB,IAAI,SAAS,OAAO,IAAI,gCAAgC,eAAe,GAAG,8BAAC,SAAI,KAAU,KAAK,IAAI,WAAW,SAAS,IAAI,YAAY,QAAQ,WAAU,WAAU,GAAE;AAAA,IAAM,oBAAC,gBAAW,WAAU,iCAAiC,eAAI;AAAA,OAA3X,GAAwY,CAAS,GAAE;AACxkB;",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/source-artwork.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { loadSourceArtwork } from "@open-mercato/ui/assets/source-artwork";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { SearchInput } from "@open-mercato/ui/primitives/search-input";
+import { Pagination } from "@open-mercato/ui/primitives/pagination";
+import { EmptyState } from "@open-mercato/ui/primitives/empty-state";
+import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
+import { LoadingMessage, ErrorMessage } from "@open-mercato/ui/backend/detail";
+const pageSize = 48;
+function ArtworkTile({ asset, group, duplicate }) {
+  const t = useT();
+  const [notice, setNotice] = React.useState("");
+  const illustration = group === "thumbnails";
+  const name = illustration ? t(`design_system.gallery.thumbnailNames.${asset.name}`, asset.name) : asset.name;
+  const category = illustration ? t(`design_system.gallery.thumbnailCategories.${asset.category}`, asset.category) : asset.category;
+  const label = duplicate ? `${name} (${illustration ? category : asset.id})` : name;
+  async function copy() {
+    const code = `import { loadSourceArtwork } from '@open-mercato/ui/assets/source-artwork'
+
+const assets = await loadSourceArtwork('${group}')
+const asset = assets.find(item => item.id === '${asset.id}')
+
+<img src={asset?.src} width={asset?.width} height={asset?.height} alt="" />`;
+    try {
+      await navigator.clipboard.writeText(code);
+      setNotice(t("design_system.gallery.sourceIcons.copied"));
+    } catch {
+      setNotice(t("design_system.gallery.copyFailed"));
+    }
+  }
+  return /* @__PURE__ */ jsxs(Popover, { onOpenChange: () => setNotice(""), children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", "data-source-node": asset.id, "aria-label": label, className: "h-auto min-h-36 min-w-0 flex-col gap-3 whitespace-normal rounded-lg border border-border bg-background p-3", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("flex w-full items-center justify-center rounded-md bg-muted p-2", illustration ? "h-40" : "h-20"), children: /* @__PURE__ */ jsx("img", { src: asset.src, width: asset.width, height: asset.height, alt: "", loading: "lazy", className: "max-h-full max-w-full object-contain drop-shadow-sm" }) }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-full break-words text-center text-xs font-normal leading-4", children: name })
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: cn("space-y-4 p-4", illustration ? "w-80" : "w-72"), "aria-label": label, children: [
+      /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center rounded-md bg-status-neutral-solid p-4", illustration ? "h-64" : "h-32"), children: /* @__PURE__ */ jsx("img", { src: asset.src, width: asset.width, height: asset.height, alt: "", className: "max-h-full max-w-full object-contain" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "break-words font-medium", children: name }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          category,
+          " \xB7 ",
+          asset.width,
+          " \xD7 ",
+          asset.height
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: copy, children: t("design_system.gallery.sourceIcons.copy") }),
+      notice ? /* @__PURE__ */ jsx("p", { role: "status", className: "text-xs text-muted-foreground", children: notice }) : null
+    ] })
+  ] });
+}
+function SourceArtworkCatalogue({ group, collectionControl }) {
+  const t = useT();
+  const [assets, setAssets] = React.useState(null);
+  const [failed, setFailed] = React.useState(false);
+  const [attempt, setAttempt] = React.useState(0);
+  const [query, setQuery] = React.useState("");
+  const [page, setPage] = React.useState(1);
+  React.useEffect(() => {
+    let active = true;
+    setAssets(null);
+    setFailed(false);
+    setPage(1);
+    setQuery("");
+    loadSourceArtwork(group).then((items) => {
+      if (active) setAssets(items);
+    }).catch(() => {
+      if (active) setFailed(true);
+    });
+    return () => {
+      active = false;
+    };
+  }, [group, attempt]);
+  if (failed) return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+    collectionControl,
+    /* @__PURE__ */ jsx(ErrorMessage, { label: t("design_system.gallery.loadFailed"), action: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setAttempt((value) => value + 1), children: t("design_system.gallery.retry") }) })
+  ] });
+  if (!assets) return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+    collectionControl,
+    /* @__PURE__ */ jsx(LoadingMessage, { label: t("design_system.gallery.sourceArtwork.loading") })
+  ] });
+  const needle = query.trim().toLowerCase();
+  const nameCounts = /* @__PURE__ */ new Map();
+  for (const asset of assets) nameCounts.set(asset.name, (nameCounts.get(asset.name) ?? 0) + 1);
+  const filtered = assets.filter((asset) => {
+    const translated = group === "thumbnails" ? `${t(`design_system.gallery.thumbnailNames.${asset.name}`, asset.name)} ${t(`design_system.gallery.thumbnailCategories.${asset.category}`, asset.category)}` : "";
+    return `${asset.name} ${asset.category} ${translated}`.toLowerCase().includes(needle);
+  });
+  const visible = filtered.slice((page - 1) * pageSize, page * pageSize);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 space-y-5", "data-example": "source-artwork-catalogue", "data-collection": group, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+      collectionControl,
+      /* @__PURE__ */ jsx(SearchInput, { value: query, onChange: (value) => {
+        setQuery(value);
+        setPage(1);
+      }, className: "w-80 max-w-full", "aria-label": t("design_system.gallery.sourceArtwork.search"), placeholder: t("design_system.gallery.sourceArtwork.search") }),
+      /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm text-muted-foreground", children: t("design_system.gallery.sourceArtwork.count", { visible: filtered.length, total: assets.length }) })
+    ] }),
+    visible.length ? /* @__PURE__ */ jsx("div", { className: cn("grid gap-3", group === "thumbnails" ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5"), children: visible.map((asset) => /* @__PURE__ */ jsx(ArtworkTile, { asset, group, duplicate: (nameCounts.get(asset.name) ?? 0) > 1 }, asset.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.sourceArtwork.pages") }) : null
+  ] });
+}
+function sourceArtworkCode(group) {
+  return `import { loadSourceArtwork } from '@open-mercato/ui/assets/source-artwork'
+
+const artwork = await loadSourceArtwork('${group}')
+
+<div className="flex flex-wrap gap-4">
+  {artwork.slice(0, 24).map(asset => <img key={asset.id} src={asset.src} width={asset.width} height={asset.height} alt={asset.name} />)}
+</div>`;
+}
+export {
+  SourceArtworkCatalogue,
+  sourceArtworkCode
+};
+//# sourceMappingURL=source-artwork.js.map

package/dist/modules/design_system/gallery/demos/source-artwork.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/source-artwork.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { loadSourceArtwork, type SourceArtwork, type SourceArtworkGroup } from '@open-mercato/ui/assets/source-artwork'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\nimport { EmptyState } from '@open-mercato/ui/primitives/empty-state'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'\n\nconst pageSize = 48\n\nfunction ArtworkTile({ asset, group, duplicate }: { asset: SourceArtwork; group: SourceArtworkGroup; duplicate: boolean }) {\n  const t = useT()\n  const [notice, setNotice] = React.useState('')\n  const illustration = group === 'thumbnails'\n  const name = illustration ? t(`design_system.gallery.thumbnailNames.${asset.name}`, asset.name) : asset.name\n  const category = illustration ? t(`design_system.gallery.thumbnailCategories.${asset.category}`, asset.category) : asset.category\n  const label = duplicate ? `${name} (${illustration ? category : asset.id})` : name\n  async function copy() {\n    const code = `import { loadSourceArtwork } from '@open-mercato/ui/assets/source-artwork'\\n\\nconst assets = await loadSourceArtwork('${group}')\\nconst asset = assets.find(item => item.id === '${asset.id}')\\n\\n<img src={asset?.src} width={asset?.width} height={asset?.height} alt=\"\" />`\n    try { await navigator.clipboard.writeText(code); setNotice(t('design_system.gallery.sourceIcons.copied')) }\n    catch { setNotice(t('design_system.gallery.copyFailed')) }\n  }\n  return <Popover onOpenChange={() => setNotice('')}>\n    <PopoverTrigger asChild>\n      <Button type=\"button\" variant=\"ghost\" data-source-node={asset.id} aria-label={label} className=\"h-auto min-h-36 min-w-0 flex-col gap-3 whitespace-normal rounded-lg border border-border bg-background p-3\">\n        <span className={cn(\"flex w-full items-center justify-center rounded-md bg-muted p-2\", illustration ? \"h-40\" : \"h-20\")}><img src={asset.src} width={asset.width} height={asset.height} alt=\"\" loading=\"lazy\" className=\"max-h-full max-w-full object-contain drop-shadow-sm\" /></span>\n        <span className=\"max-w-full break-words text-center text-xs font-normal leading-4\">{name}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent className={cn(\"space-y-4 p-4\", illustration ? \"w-80\" : \"w-72\")} aria-label={label}>\n      <div className={cn(\"flex items-center justify-center rounded-md bg-status-neutral-solid p-4\", illustration ? \"h-64\" : \"h-32\")}><img src={asset.src} width={asset.width} height={asset.height} alt=\"\" className=\"max-h-full max-w-full object-contain\" /></div>\n      <div><p className=\"break-words font-medium\">{name}</p><p className=\"text-xs text-muted-foreground\">{category} \u00B7 {asset.width} \u00D7 {asset.height}</p></div>\n      <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={copy}>{t('design_system.gallery.sourceIcons.copy')}</Button>\n      {notice ? <p role=\"status\" className=\"text-xs text-muted-foreground\">{notice}</p> : null}\n    </PopoverContent>\n  </Popover>\n}\n\nexport function SourceArtworkCatalogue({ group, collectionControl }: { group: SourceArtworkGroup; collectionControl?: React.ReactNode }) {\n  const t = useT()\n  const [assets, setAssets] = React.useState<readonly SourceArtwork[] | null>(null)\n  const [failed, setFailed] = React.useState(false)\n  const [attempt, setAttempt] = React.useState(0)\n  const [query, setQuery] = React.useState('')\n  const [page, setPage] = React.useState(1)\n\n  React.useEffect(() => {\n    let active = true\n    setAssets(null)\n    setFailed(false)\n    setPage(1)\n    setQuery('')\n    loadSourceArtwork(group).then(items => {\n      if (active) setAssets(items)\n    }).catch(() => { if (active) setFailed(true) })\n    return () => { active = false }\n  }, [group, attempt])\n\n  if (failed) return <div className=\"space-y-5\">{collectionControl}<ErrorMessage label={t('design_system.gallery.loadFailed')} action={<Button type=\"button\" variant=\"outline\" onClick={() => setAttempt(value => value + 1)}>{t('design_system.gallery.retry')}</Button>} /></div>\n  if (!assets) return <div className=\"space-y-5\">{collectionControl}<LoadingMessage label={t('design_system.gallery.sourceArtwork.loading')} /></div>\n  const needle = query.trim().toLowerCase()\n  const nameCounts = new Map<string, number>()\n  for (const asset of assets) nameCounts.set(asset.name, (nameCounts.get(asset.name) ?? 0) + 1)\n  const filtered = assets.filter(asset => {\n    const translated = group === 'thumbnails' ? `${t(`design_system.gallery.thumbnailNames.${asset.name}`, asset.name)} ${t(`design_system.gallery.thumbnailCategories.${asset.category}`, asset.category)}` : ''\n    return `${asset.name} ${asset.category} ${translated}`.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-5\" data-example=\"source-artwork-catalogue\" data-collection={group}>\n    <div className=\"flex flex-wrap items-center gap-4\">\n      {collectionControl}\n      <SearchInput value={query} onChange={value => { setQuery(value); setPage(1) }} className=\"w-80 max-w-full\" aria-label={t('design_system.gallery.sourceArtwork.search')} placeholder={t('design_system.gallery.sourceArtwork.search')} />\n      <p role=\"status\" className=\"text-sm text-muted-foreground\">{t('design_system.gallery.sourceArtwork.count', { visible: filtered.length, total: assets.length })}</p>\n    </div>\n    {visible.length ? <div className={cn(\"grid gap-3\", group === \"thumbnails\" ? \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\" : \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-5\")}>\n      {visible.map(asset => <ArtworkTile key={asset.id} asset={asset} group={group} duplicate={(nameCounts.get(asset.name) ?? 0) > 1} />)}\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.sourceArtwork.pages')} /> : null}\n  </div>\n}\n\nexport function sourceArtworkCode(group: SourceArtworkGroup) {\n  return `import { loadSourceArtwork } from '@open-mercato/ui/assets/source-artwork'\\n\\nconst artwork = await loadSourceArtwork('${group}')\\n\\n<div className=\"flex flex-wrap gap-4\">\\n  {artwork.slice(0, 24).map(asset => <img key={asset.id} src={asset.src} width={asset.width} height={asset.height} alt={asset.name} />)}\\n</div>`\n}\n"],
+  "mappings": "AA2BM,SAC0H,KAD1H;AA3BN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,yBAAsE;AAC/E,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,gBAAgB,oBAAoB;AAE7C,MAAM,WAAW;AAEjB,SAAS,YAAY,EAAE,OAAO,OAAO,UAAU,GAA4E;AACzH,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAE;AAC7C,QAAM,eAAe,UAAU;AAC/B,QAAM,OAAO,eAAe,EAAE,wCAAwC,MAAM,IAAI,IAAI,MAAM,IAAI,IAAI,MAAM;AACxG,QAAM,WAAW,eAAe,EAAE,6CAA6C,MAAM,QAAQ,IAAI,MAAM,QAAQ,IAAI,MAAM;AACzH,QAAM,QAAQ,YAAY,GAAG,IAAI,KAAK,eAAe,WAAW,MAAM,EAAE,MAAM;AAC9E,iBAAe,OAAO;AACpB,UAAM,OAAO;AAAA;AAAA,0CAAyH,KAAK;AAAA,iDAAsD,MAAM,EAAE;AAAA;AAAA;AACzM,QAAI;AAAE,YAAM,UAAU,UAAU,UAAU,IAAI;AAAG,gBAAU,EAAE,0CAA0C,CAAC;AAAA,IAAE,QACpG;AAAE,gBAAU,EAAE,kCAAkC,CAAC;AAAA,IAAE;AAAA,EAC3D;AACA,SAAO,qBAAC,WAAQ,cAAc,MAAM,UAAU,EAAE,GAC9C;AAAA,wBAAC,kBAAe,SAAO,MACrB,+BAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,oBAAkB,MAAM,IAAI,cAAY,OAAO,WAAU,8GAC7F;AAAA,0BAAC,UAAK,WAAW,GAAG,mEAAmE,eAAe,SAAS,MAAM,GAAG,8BAAC,SAAI,KAAK,MAAM,KAAK,OAAO,MAAM,OAAO,QAAQ,MAAM,QAAQ,KAAI,IAAG,SAAQ,QAAO,WAAU,uDAAsD,GAAE;AAAA,MAC/Q,oBAAC,UAAK,WAAU,oEAAoE,gBAAK;AAAA,OAC3F,GACF;AAAA,IACA,qBAAC,kBAAe,WAAW,GAAG,iBAAiB,eAAe,SAAS,MAAM,GAAG,cAAY,OAC1F;AAAA,0BAAC,SAAI,WAAW,GAAG,2EAA2E,eAAe,SAAS,MAAM,GAAG,8BAAC,SAAI,KAAK,MAAM,KAAK,OAAO,MAAM,OAAO,QAAQ,MAAM,QAAQ,KAAI,IAAG,WAAU,wCAAuC,GAAE;AAAA,MACxP,qBAAC,SAAI;AAAA,4BAAC,OAAE,WAAU,2BAA2B,gBAAK;AAAA,QAAI,qBAAC,OAAE,WAAU,iCAAiC;AAAA;AAAA,UAAS;AAAA,UAAI,MAAM;AAAA,UAAM;AAAA,UAAI,MAAM;AAAA,WAAO;AAAA,SAAI;AAAA,MAClJ,oBAAC,UAAO,MAAK,UAAS,MAAK,MAAK,SAAQ,WAAU,SAAS,MAAO,YAAE,wCAAwC,GAAE;AAAA,MAC7G,SAAS,oBAAC,OAAE,MAAK,UAAS,WAAU,iCAAiC,kBAAO,IAAO;AAAA,OACtF;AAAA,KACF;AACF;AAEO,SAAS,uBAAuB,EAAE,OAAO,kBAAkB,GAAuE;AACvI,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAA0C,IAAI;AAChF,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAChD,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,CAAC;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,CAAC;AAExC,QAAM,UAAU,MAAM;AACpB,QAAI,SAAS;AACb,cAAU,IAAI;AACd,cAAU,KAAK;AACf,YAAQ,CAAC;AACT,aAAS,EAAE;AACX,sBAAkB,KAAK,EAAE,KAAK,WAAS;AACrC,UAAI,OAAQ,WAAU,KAAK;AAAA,IAC7B,CAAC,EAAE,MAAM,MAAM;AAAE,UAAI,OAAQ,WAAU,IAAI;AAAA,IAAE,CAAC;AAC9C,WAAO,MAAM;AAAE,eAAS;AAAA,IAAM;AAAA,EAChC,GAAG,CAAC,OAAO,OAAO,CAAC;AAEnB,MAAI,OAAQ,QAAO,qBAAC,SAAI,WAAU,aAAa;AAAA;AAAA,IAAkB,oBAAC,gBAAa,OAAO,EAAE,kCAAkC,GAAG,QAAQ,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,SAAS,MAAM,WAAW,WAAS,QAAQ,CAAC,GAAI,YAAE,6BAA6B,GAAE,GAAW;AAAA,KAAE;AAC3Q,MAAI,CAAC,OAAQ,QAAO,qBAAC,SAAI,WAAU,aAAa;AAAA;AAAA,IAAkB,oBAAC,kBAAe,OAAO,EAAE,6CAA6C,GAAG;AAAA,KAAE;AAC7I,QAAM,SAAS,MAAM,KAAK,EAAE,YAAY;AACxC,QAAM,aAAa,oBAAI,IAAoB;AAC3C,aAAW,SAAS,OAAQ,YAAW,IAAI,MAAM,OAAO,WAAW,IAAI,MAAM,IAAI,KAAK,KAAK,CAAC;AAC5F,QAAM,WAAW,OAAO,OAAO,WAAS;AACtC,UAAM,aAAa,UAAU,eAAe,GAAG,EAAE,wCAAwC,MAAM,IAAI,IAAI,MAAM,IAAI,CAAC,IAAI,EAAE,6CAA6C,MAAM,QAAQ,IAAI,MAAM,QAAQ,CAAC,KAAK;AAC3M,WAAO,GAAG,MAAM,IAAI,IAAI,MAAM,QAAQ,IAAI,UAAU,GAAG,YAAY,EAAE,SAAS,MAAM;AAAA,EACtF,CAAC;AACD,QAAM,UAAU,SAAS,OAAO,OAAO,KAAK,UAAU,OAAO,QAAQ;AAErE,SAAO,qBAAC,SAAI,WAAU,4BAA2B,gBAAa,4BAA2B,mBAAiB,OACxG;AAAA,yBAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,MACD,oBAAC,eAAY,OAAO,OAAO,UAAU,WAAS;AAAE,iBAAS,KAAK;AAAG,gBAAQ,CAAC;AAAA,MAAE,GAAG,WAAU,mBAAkB,cAAY,EAAE,4CAA4C,GAAG,aAAa,EAAE,4CAA4C,GAAG;AAAA,MACtO,oBAAC,OAAE,MAAK,UAAS,WAAU,iCAAiC,YAAE,6CAA6C,EAAE,SAAS,SAAS,QAAQ,OAAO,OAAO,OAAO,CAAC,GAAE;AAAA,OACjK;AAAA,IACC,QAAQ,SAAS,oBAAC,SAAI,WAAW,GAAG,cAAc,UAAU,eAAe,8CAA8C,2CAA2C,GAClK,kBAAQ,IAAI,WAAS,oBAAC,eAA2B,OAAc,OAAc,YAAY,WAAW,IAAI,MAAM,IAAI,KAAK,KAAK,KAArF,MAAM,EAAkF,CAAE,GACpI,IAAS,oBAAC,cAAW,OAAO,EAAE,iCAAiC,GAAG;AAAA,IACjE,SAAS,SAAS,WAAW,oBAAC,cAAW,MAAY,UAAoB,OAAO,SAAS,QAAQ,cAAc,OAAO,cAAc,SAAS,cAAY,EAAE,2CAA2C,GAAG,IAAK;AAAA,KACjN;AACF;AAEO,SAAS,kBAAkB,OAA2B;AAC3D,SAAO;AAAA;AAAA,2CAA0H,KAAK;AAAA;AAAA;AAAA;AAAA;AACxI;",
+  "names": []
+}