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

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

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GalleryLink as Link } from "./GalleryLink.js";
+import { ChevronRight, Menu, X } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Skeleton } from "@open-mercato/ui/primitives/skeleton";
+import { useInjectedMenuItems } from "@open-mercato/ui/backend/injection/useInjectedMenuItems";
+import { mergeMenuItems } from "@open-mercato/ui/backend/injection/mergeMenuItems";
+import { resolveInjectedIcon } from "@open-mercato/ui/backend/injection/resolveInjectedIcon";
+function GalleryNavigation({ sections, activePath, activeFamilyId, onExpand, onNavigate, failed, onRetry }) {
+  const t = useT();
+  const prefix = React.useId();
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [expanded, setExpanded] = React.useState({});
+  const { items: injectedItems } = useInjectedMenuItems("menu:sidebar:settings:design_system");
+  React.useEffect(() => {
+    if (activeFamilyId) setExpanded((previous) => ({ ...previous, [activeFamilyId]: true }));
+    setMobileOpen(false);
+  }, [activeFamilyId, activePath]);
+  const navigate = () => {
+    setMobileOpen(false);
+    onNavigate();
+  };
+  const itemLabel = (item) => t(item.labelKey ?? item.label, item.label);
+  const renderLink = (item, nested = false) => {
+    const active = activePath === item.href;
+    return /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: cn("w-full min-w-0 justify-start gap-2 rounded-md px-3 text-left text-sm font-normal text-muted-foreground", !nested && "w-0 flex-1", active && "bg-accent font-semibold text-accent-foreground", nested && "border-l-2 rounded-l-none", nested && (active ? "border-foreground" : "border-transparent")), children: /* @__PURE__ */ jsxs(Link, { href: item.href, "aria-current": active ? "page" : void 0, onClick: navigate, children: [
+      !nested && item.icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0", "aria-hidden": true, children: item.icon }) : null,
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: itemLabel(item) })
+    ] }) });
+  };
+  const renderItem = (item) => {
+    const expandable = item.children !== void 0;
+    const open = expanded[item.id] ?? false;
+    const label = itemLabel(item);
+    const contentId = `${prefix}-${item.id}`;
+    return /* @__PURE__ */ jsxs("li", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+        renderLink(item),
+        expandable ? /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", size: "sm", className: "shrink-0 text-muted-foreground", "aria-label": t(open ? "design_system.gallery.navigation.collapse" : "design_system.gallery.navigation.expand", { category: label }), "aria-expanded": open, "aria-controls": contentId, onClick: () => {
+          setExpanded((previous) => ({ ...previous, [item.id]: !open }));
+          if (!open) onExpand(item.id);
+        }, children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-4 transition-transform", open && "rotate-90") }) }) : null
+      ] }),
+      expandable && open ? /* @__PURE__ */ jsx("div", { id: contentId, className: "mb-2 ml-5 mt-1 border-l border-border pl-2", children: failed[item.id] ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onRetry(item.id), children: t("design_system.gallery.retry") }) : item.children?.length ? /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: item.children.map((child) => /* @__PURE__ */ jsx("li", { children: renderLink(child, true) }, child.id)) }) : /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-2", role: "status", "aria-label": t("common.loading", "Loading\u2026"), children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-3/4" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-1/2" })
+      ] }) }) : null
+    ] }, item.id);
+  };
+  return /* @__PURE__ */ jsxs("aside", { className: "sticky top-16 z-20 min-w-0 bg-background lg:top-20 lg:w-60 lg:shrink-0 lg:self-start lg:border-r lg:border-border", children: [
+    /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", className: "my-2 w-full justify-between lg:hidden", "aria-expanded": mobileOpen, "aria-controls": `${prefix}-navigation`, onClick: () => setMobileOpen((value) => !value), children: [
+      t("design_system.gallery.navigation.browse"),
+      mobileOpen ? /* @__PURE__ */ jsx(X, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Menu, { "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ jsxs("nav", { id: `${prefix}-navigation`, "aria-label": t("design_system.gallery.navigation.label"), className: cn("max-h-screen overflow-y-auto overscroll-contain py-4 pr-3 pb-24 lg:block", !mobileOpen && "hidden"), children: [
+      /* @__PURE__ */ jsx(Link, { href: "/backend/design-system", onClick: navigate, className: "mb-5 block px-3 text-base font-semibold tracking-tight", children: t("design_system.nav.title") }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-5", children: sections.map((section) => {
+        const additions = injectedItems.filter((item) => (item.groupId ?? section.id) === section.id);
+        const items = mergeMenuItems(section.items.map((item) => ({ id: item.id, item })), additions).flatMap((item) => {
+          if (item.source === "built-in") {
+            const original = section.items.find((candidate) => candidate.id === item.id);
+            return original ? [original] : [];
+          }
+          return item.href ? [{ id: item.id, label: item.label ?? item.id, labelKey: item.labelKey, href: item.href, icon: resolveInjectedIcon(item.icon) }] : [];
+        });
+        return /* @__PURE__ */ jsxs("section", { children: [
+          section.label ? /* @__PURE__ */ jsx("p", { className: "mb-2 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t(section.labelKey ?? section.label, section.label) }) : null,
+          /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: items.map((item) => renderItem(item)) })
+        ] }, section.id);
+      }) })
+    ] })
+  ] });
+}
+export {
+  GalleryNavigation
+};
+//# sourceMappingURL=GalleryNavigation.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/GalleryNavigation.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { GalleryLink as Link } from './GalleryLink'\nimport { ChevronRight, Menu, X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Skeleton } from '@open-mercato/ui/primitives/skeleton'\nimport type { SectionNavGroup, SectionNavItem } from '@open-mercato/ui/backend/section-page'\nimport { useInjectedMenuItems } from '@open-mercato/ui/backend/injection/useInjectedMenuItems'\nimport { mergeMenuItems } from '@open-mercato/ui/backend/injection/mergeMenuItems'\nimport { resolveInjectedIcon } from '@open-mercato/ui/backend/injection/resolveInjectedIcon'\n\nexport function GalleryNavigation({ sections, activePath, activeFamilyId, onExpand, onNavigate, failed, onRetry }: {\n  sections: SectionNavGroup[]\n  activePath: string\n  activeFamilyId: string | null\n  onExpand: (id: string) => void\n  onNavigate: () => void\n  failed: Record<string, boolean>\n  onRetry: (id: string) => void\n}) {\n  const t = useT()\n  const prefix = React.useId()\n  const [mobileOpen, setMobileOpen] = React.useState(false)\n  const [expanded, setExpanded] = React.useState<Record<string, boolean>>({})\n  const { items: injectedItems } = useInjectedMenuItems('menu:sidebar:settings:design_system')\n  React.useEffect(() => {\n    if (activeFamilyId) setExpanded(previous => ({ ...previous, [activeFamilyId]: true }))\n    setMobileOpen(false)\n  }, [activeFamilyId, activePath])\n\n  const navigate = () => { setMobileOpen(false); onNavigate() }\n  const itemLabel = (item: SectionNavItem) => t(item.labelKey ?? item.label, item.label)\n  const renderLink = (item: SectionNavItem, nested = false) => {\n    const active = activePath === item.href\n    return <Button asChild variant=\"ghost\" size=\"sm\" className={cn('w-full min-w-0 justify-start gap-2 rounded-md px-3 text-left text-sm font-normal text-muted-foreground', !nested && 'w-0 flex-1', active && 'bg-accent font-semibold text-accent-foreground', nested && 'border-l-2 rounded-l-none', nested && (active ? 'border-foreground' : 'border-transparent'))}>\n      <Link href={item.href} aria-current={active ? 'page' : undefined} onClick={navigate}>\n        {!nested && item.icon ? <span className=\"shrink-0\" aria-hidden>{item.icon}</span> : null}\n        <span className=\"min-w-0 truncate\">{itemLabel(item)}</span>\n      </Link>\n    </Button>\n  }\n  const renderItem = (item: SectionNavItem) => {\n    const expandable = item.children !== undefined\n    const open = expanded[item.id] ?? false\n    const label = itemLabel(item)\n    const contentId = `${prefix}-${item.id}`\n    return <li key={item.id} className=\"min-w-0\">\n      <div className=\"flex min-w-0 items-center gap-1\">\n        {renderLink(item)}\n        {expandable ? <IconButton type=\"button\" variant=\"ghost\" size=\"sm\" className=\"shrink-0 text-muted-foreground\" aria-label={t(open ? 'design_system.gallery.navigation.collapse' : 'design_system.gallery.navigation.expand', { category: label })} aria-expanded={open} aria-controls={contentId} onClick={() => {\n          setExpanded(previous => ({ ...previous, [item.id]: !open }))\n          if (!open) onExpand(item.id)\n        }}><ChevronRight className={cn('size-4 transition-transform', open && 'rotate-90')} /></IconButton> : null}\n      </div>\n      {expandable && open ? <div id={contentId} className=\"mb-2 ml-5 mt-1 border-l border-border pl-2\">\n        {failed[item.id] ? <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={() => onRetry(item.id)}>{t('design_system.gallery.retry')}</Button> : item.children?.length ? <ul className=\"space-y-0.5\">{item.children.map(child => <li key={child.id}>{renderLink(child, true)}</li>)}</ul> : <div className=\"space-y-2 p-2\" role=\"status\" aria-label={t('common.loading', 'Loading\u2026')}><Skeleton className=\"h-5 w-3/4\" /><Skeleton className=\"h-5 w-1/2\" /></div>}\n      </div> : null}\n    </li>\n  }\n  return <aside className=\"sticky top-16 z-20 min-w-0 bg-background lg:top-20 lg:w-60 lg:shrink-0 lg:self-start lg:border-r lg:border-border\">\n    <Button type=\"button\" variant=\"outline\" className=\"my-2 w-full justify-between lg:hidden\" aria-expanded={mobileOpen} aria-controls={`${prefix}-navigation`} onClick={() => setMobileOpen(value => !value)}>\n      {t('design_system.gallery.navigation.browse')}{mobileOpen ? <X aria-hidden /> : <Menu aria-hidden />}\n    </Button>\n    <nav id={`${prefix}-navigation`} aria-label={t('design_system.gallery.navigation.label')} className={cn('max-h-screen overflow-y-auto overscroll-contain py-4 pr-3 pb-24 lg:block', !mobileOpen && 'hidden')}>\n      <Link href=\"/backend/design-system\" onClick={navigate} className=\"mb-5 block px-3 text-base font-semibold tracking-tight\">{t('design_system.nav.title')}</Link>\n      <div className=\"space-y-5\">{sections.map(section => {\n        const additions = injectedItems.filter(item => (item.groupId ?? section.id) === section.id)\n        const items = mergeMenuItems(section.items.map(item => ({ id: item.id, item })), additions).flatMap(item => {\n          if (item.source === 'built-in') {\n            const original = section.items.find(candidate => candidate.id === item.id)\n            return original ? [original] : []\n          }\n          return item.href ? [{ id: item.id, label: item.label ?? item.id, labelKey: item.labelKey, href: item.href, icon: resolveInjectedIcon(item.icon) }] : []\n        })\n        return <section key={section.id}>\n          {section.label ? <p className=\"mb-2 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground\">{t(section.labelKey ?? section.label, section.label)}</p> : null}\n          <ul className=\"space-y-1\">{items.map(item => renderItem(item))}</ul>\n        </section>\n      })}</div>\n    </nav>\n  </aside>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -1,9 +1,11 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useSearchParams } from "next/navigation";
+import { GalleryLink as Link, navigateGallery } from "./GalleryLink.js";
+import { ArrowLeft, Home, BookOpen, Grid2X2, Palette } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
-import { SectionPage } from "@open-mercato/ui/backend/section-page";
+import { GalleryNavigation } from "./GalleryNavigation.js";
 import { SearchInput } from "@open-mercato/ui/primitives/search-input";
 import { Skeleton } from "@open-mercato/ui/primitives/skeleton";
 import { EmptyState } from "@open-mercato/ui/primitives/empty-state";
@@ -11,6 +13,12 @@ import { Button } from "@open-mercato/ui/primitives/button";
 import { ErrorMessage } from "@open-mercato/ui/backend/detail";
 import { GALLERY_BASE_PATH, galleryFamilies } from "../registry.js";
 import { EntryCard } from "./EntryCard.js";
+import { DesignSystemHome, DesignSystemPrinciples } from "./DesignSystemHome.js";
+import { StyleAgents } from "./StyleAgents.js";
+import { ComponentIndex } from "./ComponentIndex.js";
+import { FoundationGuide } from "./FoundationGuide.js";
+import { IconsBrowser } from "./IconsBrowser.js";
+import { fullWidthEntryIds } from "../presentation.js";
 function familyLabelFallback(id) {
   return id.charAt(0).toUpperCase() + id.slice(1).replace(/[-_]/g, " ");
 }
@@ -21,20 +29,62 @@ function matchesQuery(entry, query) {
   if (entry.keywords?.some((keyword) => keyword.toLowerCase().includes(needle))) return true;
   return needle.includes(entry.id.toLowerCase()) || needle.includes(entry.title.toLowerCase());
 }
+function resolveFullWidthIds(entryIds, fullWidthIds) {
+  const resolved = new Set(entryIds.filter((id) => fullWidthIds.has(id)));
+  let unpaired = null;
+  for (const id of entryIds) {
+    if (resolved.has(id)) {
+      if (unpaired) resolved.add(unpaired);
+      unpaired = null;
+    } else {
+      unpaired = unpaired ? null : id;
+    }
+  }
+  if (unpaired) resolved.add(unpaired);
+  return resolved;
+}
+function useShellDockOffset(rootRef) {
+  const [offset, setOffset] = React.useState(0);
+  React.useLayoutEffect(() => {
+    const main = rootRef.current?.closest("main");
+    const column = main?.parentElement;
+    if (!main || !column || typeof ResizeObserver === "undefined") return;
+    const measure = () => setOffset(Math.max(0, Math.round(main.getBoundingClientRect().left - column.getBoundingClientRect().left)));
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(column);
+    return () => observer.disconnect();
+  }, [rootRef]);
+  return offset;
+}
+const componentFamilies = galleryFamilies.filter((family) => !["foundations", "library"].includes(family.id));
 function GalleryShell() {
   const t = useT();
+  const router = useRouter();
   const searchParams = useSearchParams();
   const [loaded, setLoaded] = React.useState({});
   const [failed, setFailed] = React.useState({});
   const [search, setSearch] = React.useState("");
   const pendingRef = React.useRef(/* @__PURE__ */ new Set());
+  const rootRef = React.useRef(null);
+  const dockOffset = useShellDockOffset(rootRef);
   const familyParam = searchParams?.get("family") ?? null;
   const entryParam = searchParams?.get("entry") ?? null;
+  const variantParam = searchParams?.get("variant") ?? null;
+  const showingPrinciples = searchParams?.get("view") === "principles" && !familyParam;
+  const showingComponents = searchParams?.get("view") === "components" && !familyParam;
+  const showingStyleAgents = searchParams?.get("view") === "style-agents" && !familyParam;
+  const showingHome = !familyParam && !showingPrinciples && !showingComponents && !showingStyleAgents;
+  const showingFoundations = familyParam === "foundations";
+  const showingAssets = familyParam === "icons";
+  const showingInventory = familyParam === "library";
+  const showingEntry = Boolean(entryParam) && !showingFoundations && !showingAssets && !showingInventory;
   React.useEffect(() => {
     setSearch("");
-  }, [familyParam]);
+  }, [familyParam, entryParam, showingPrinciples, showingComponents, showingStyleAgents]);
   const activeFamily = galleryFamilies.find((family) => family.id === familyParam) ?? galleryFamilies[0];
   const activeFamilyId = activeFamily?.id ?? null;
+  const activeNavigationPath = showingStyleAgents ? `${GALLERY_BASE_PATH}?view=style-agents` : showingHome ? GALLERY_BASE_PATH : showingPrinciples ? `${GALLERY_BASE_PATH}?view=principles` : showingComponents ? `${GALLERY_BASE_PATH}?view=components` : `${GALLERY_BASE_PATH}?family=${activeFamilyId}${(showingFoundations || showingEntry) && entryParam ? `&entry=${entryParam}` : ""}`;
   const loadFamily = React.useCallback((family) => {
     if (pendingRef.current.has(family.id)) return;
     pendingRef.current.add(family.id);
@@ -50,33 +100,53 @@ function GalleryShell() {
   React.useEffect(() => {
     if (searching) {
       for (const family of galleryFamilies) loadFamily(family);
-    } else if (activeFamily) {
+    } else if (showingComponents) {
+      for (const family of componentFamilies) loadFamily(family);
+    } else if (activeFamily && !showingHome && !showingPrinciples && !showingStyleAgents) {
       loadFamily(activeFamily);
     }
-  }, [searching, activeFamily, loadFamily]);
+  }, [searching, activeFamily, loadFamily, showingHome, showingPrinciples, showingComponents, showingStyleAgents]);
   const activeEntries = activeFamilyId ? loaded[activeFamilyId] : void 0;
   React.useEffect(() => {
-    if (!entryParam || searching || !activeEntries) return;
-    const node = document.getElementById(`gallery-entry-${entryParam}`);
+    if (searching || showingFoundations && entryParam && !activeEntries) return;
+    const variantId = entryParam === "file-upload" && variantParam === "drag-and-drop" ? "default" : variantParam;
+    const targetId = showingFoundations && entryParam ? `gallery-entry-${entryParam}` : entryParam && variantId && variantId !== "__all" ? `gallery-variant-${entryParam}-${variantId}` : "gallery-page-heading";
+    const node = document.getElementById(targetId) ?? document.getElementById("gallery-page-heading");
     node?.scrollIntoView({ block: "start" });
-  }, [entryParam, searching, activeEntries]);
-  const sections = React.useMemo(
-    () => [
-      {
-        id: "families",
-        label: "Families",
-        labelKey: "design_system.gallery.familiesGroup",
-        items: galleryFamilies.map((family) => ({
-          id: family.id,
-          label: familyLabelFallback(family.id),
-          labelKey: family.labelKey,
-          icon: family.icon,
-          href: `${GALLERY_BASE_PATH}?family=${family.id}`
-        }))
-      }
-    ],
-    []
-  );
+  }, [familyParam, entryParam, variantParam, searching, activeEntries, showingFoundations, showingHome, showingPrinciples, showingComponents, showingStyleAgents]);
+  const sections = React.useMemo(() => {
+    const familyItem = (family) => ({
+      id: family.id,
+      label: familyLabelFallback(family.id),
+      labelKey: family.labelKey,
+      icon: family.icon,
+      href: `${GALLERY_BASE_PATH}?family=${family.id}`,
+      ...!["library", "icons"].includes(family.id) ? { children: (loaded[family.id] ?? []).map((entry) => ({
+        id: `entry:${entry.id}`,
+        label: entry.title,
+        ...family.id === "foundations" ? { labelKey: `design_system.foundations.${entry.id}.title` } : {},
+        href: `${GALLERY_BASE_PATH}?family=${family.id}&entry=${entry.id}`
+      })) } : {}
+    });
+    return [
+      { id: "guide", label: "", items: [
+        { id: "__home", label: "Start", labelKey: "design_system.portal.nav.home", icon: /* @__PURE__ */ jsx(Home, { className: "size-4" }), href: GALLERY_BASE_PATH },
+        { id: "__style-agents", label: "Style agents", labelKey: "design_system.styleAgents.title", icon: /* @__PURE__ */ jsx(Palette, { className: "size-4" }), href: `${GALLERY_BASE_PATH}?view=style-agents` },
+        ...galleryFamilies.filter((family) => family.id === "foundations").map(familyItem)
+      ] },
+      { id: "families", label: "Components", labelKey: "design_system.portal.nav.components", items: [
+        { id: "__components", label: "All components", labelKey: "design_system.gallery.navigation.allComponents", icon: /* @__PURE__ */ jsx(Grid2X2, { className: "size-4" }), href: `${GALLERY_BASE_PATH}?view=components` },
+        ...componentFamilies.map(familyItem)
+      ] },
+      { id: "resources", label: "Resources", labelKey: "design_system.gallery.navigation.resources", items: [
+        { id: "__principles", label: "Guidelines", labelKey: "design_system.portal.nav.principles", icon: /* @__PURE__ */ jsx(BookOpen, { className: "size-4" }), href: `${GALLERY_BASE_PATH}?view=principles` },
+        ...galleryFamilies.filter((family) => family.id === "library").map(familyItem)
+      ] }
+    ];
+  }, [loaded]);
+  const selectedEntry = entryParam ? activeEntries?.find((entry) => entry.id === entryParam) : void 0;
+  const familyTitle = activeFamily ? t(activeFamily.labelKey, familyLabelFallback(activeFamily.id)) : t("design_system.nav.title");
+  const pageTitle = showingComponents ? t("design_system.portal.nav.components") : showingEntry && selectedEntry ? selectedEntry.title : familyTitle;
   const renderFamilySkeleton = () => /* @__PURE__ */ jsxs("div", { className: "space-y-4", "data-testid": "gallery-family-skeleton", children: [
     /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" }),
     /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" })
@@ -98,7 +168,7 @@ function GalleryShell() {
     }
     return /* @__PURE__ */ jsx("div", { className: "space-y-8", children: groups.map(({ family, entries }) => /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium uppercase tracking-wider text-muted-foreground", children: t(family.labelKey, familyLabelFallback(family.id)) }),
-      entries.map((entry) => /* @__PURE__ */ jsx(EntryCard, { entry }, entry.id))
+      entries.map((entry) => /* @__PURE__ */ jsx(EntryCard, { entry, summary: true, href: `${GALLERY_BASE_PATH}?family=${family.id}&entry=${entry.id}`, onNavigate: () => setSearch("") }, entry.id))
     ] }, family.id)) });
   };
   const renderActiveFamily = () => {
@@ -114,50 +184,60 @@ function GalleryShell() {
       );
     }
     if (!entries) return renderFamilySkeleton();
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: t(activeFamily.labelKey, familyLabelFallback(activeFamily.id)) }),
-      entries.length > 1 ? /* @__PURE__ */ jsx(
-        "nav",
+    if (activeFamily.id === "icons") return /* @__PURE__ */ jsx(IconsBrowser, { entryId: entryParam ?? void 0, variantId: variantParam ?? void 0, onNavigate: (entryId, variantId) => {
+      const href = `${GALLERY_BASE_PATH}?family=icons&entry=${entryId}${variantId ? `&variant=${variantId}` : ""}`;
+      if (!navigateGallery(href)) router.push(href, { scroll: false });
+    } });
+    if (activeFamily.id === "foundations") return /* @__PURE__ */ jsx(FoundationGuide, { entries });
+    const sourceLibraryRender = activeFamily.id === "library" && entries.length === 1 && !entryParam ? entries[0]?.variants[0]?.render : void 0;
+    if (sourceLibraryRender) {
+      const SourceLibraryRender = sourceLibraryRender;
+      return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(SourceLibraryRender, {}) });
+    }
+    const selectedEntry2 = entries.find((entry) => entry.id === entryParam) ?? (entries.length === 1 ? entries[0] : void 0);
+    const familyFullWidthIds = resolveFullWidthIds(entries.map((entry) => entry.id), fullWidthEntryIds);
+    return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: selectedEntry2 ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(EntryCard, { entry: selectedEntry2, hideTitle: true, fullWidth: fullWidthEntryIds.has(selectedEntry2.id) }, selectedEntry2.id) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 @3xl:grid-cols-2", children: entries.map((entry) => /* @__PURE__ */ jsx(EntryCard, { entry, summary: true, summaryPreview: true, fullWidth: familyFullWidthIds.has(entry.id), href: `${GALLERY_BASE_PATH}?family=${activeFamily.id}&entry=${entry.id}` }, entry.id)) }) });
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: "flex min-w-0 flex-col lg:flex-row", style: dockOffset ? { marginLeft: -dockOffset, width: `calc(100% + ${dockOffset}px)` } : void 0, children: [
+    /* @__PURE__ */ jsx(GalleryNavigation, { sections, activePath: activeNavigationPath, activeFamilyId: familyParam, onNavigate: () => setSearch(""), failed, onExpand: (id) => {
+      const family = galleryFamilies.find((family2) => family2.id === id);
+      if (family) loadFamily(family);
+    }, onRetry: (id) => {
+      const family = galleryFamilies.find((family2) => family2.id === id);
+      if (family) loadFamily(family);
+    } }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 py-4 lg:pl-6", children: /* @__PURE__ */ jsx("div", { className: "@container mx-auto w-full max-w-6xl space-y-6", children: showingStyleAgents ? /* @__PURE__ */ jsx(StyleAgents, {}) : showingHome ? /* @__PURE__ */ jsx(DesignSystemHome, {}) : showingPrinciples ? /* @__PURE__ */ jsxs("div", { id: "gallery-page-heading", className: "scroll-mt-36 lg:scroll-mt-24 space-y-8 py-8", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl font-medium tracking-tight", children: t("design_system.portal.nav.principles") }),
+      /* @__PURE__ */ jsx(DesignSystemPrinciples, {})
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("header", { id: "gallery-page-heading", className: "scroll-mt-36 lg:scroll-mt-24 space-y-3", children: [
+        selectedEntry && showingEntry ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxs(Link, { href: `${GALLERY_BASE_PATH}?family=${activeFamilyId}`, children: [
+          /* @__PURE__ */ jsx(ArrowLeft, { "aria-hidden": true }),
+          t("design_system.gallery.backToNamedFamily", { family: familyTitle })
+        ] }) }) : null,
+        !showingComponents && (!selectedEntry || !showingEntry) ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxs(Link, { href: `${GALLERY_BASE_PATH}?view=components`, children: [
+          /* @__PURE__ */ jsx(ArrowLeft, { "aria-hidden": true }),
+          t("design_system.gallery.backToNamedFamily", { family: t("design_system.portal.nav.components") })
+        ] }) }) : null,
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: pageTitle }),
+        showingEntry && selectedEntry?.descriptionKey ? /* @__PURE__ */ jsx("p", { className: "max-w-prose text-sm leading-relaxed text-muted-foreground", children: t(selectedEntry.descriptionKey) }) : null,
+        showingComponents ? /* @__PURE__ */ jsx("p", { className: "text-base text-muted-foreground", children: t("design_system.portal.componentsDescription") }) : null
+      ] }),
+      !showingAssets && !showingInventory && !showingEntry ? /* @__PURE__ */ jsx(
+        SearchInput,
         {
-          "aria-label": t("design_system.gallery.familyContents", "Components in this family"),
-          className: "flex flex-wrap items-center gap-1.5 rounded-md border border-border bg-muted/30 p-2",
-          children: entries.map((entry) => /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: `#gallery-entry-${entry.id}`,
-              className: "rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus",
-              children: entry.title
-            },
-            entry.id
-          ))
+          value: search,
+          onChange: setSearch,
+          placeholder: t("design_system.gallery.searchPlaceholder", "Search components\u2026"),
+          "aria-label": t("design_system.gallery.searchPlaceholder", "Search components\u2026")
         }
       ) : null,
-      entries.map((entry) => /* @__PURE__ */ jsx(EntryCard, { entry }, entry.id))
-    ] });
-  };
-  return /* @__PURE__ */ jsx(
-    SectionPage,
-    {
-      title: "Design system",
-      titleKey: "design_system.nav.title",
-      sections,
-      activePath: activeFamilyId ? `${GALLERY_BASE_PATH}?family=${activeFamilyId}` : GALLERY_BASE_PATH,
-      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-5xl space-y-6", children: [
-        /* @__PURE__ */ jsx(
-          SearchInput,
-          {
-            value: search,
-            onChange: setSearch,
-            placeholder: t("design_system.gallery.searchPlaceholder", "Search components\u2026"),
-            "aria-label": t("design_system.gallery.searchPlaceholder", "Search components\u2026")
-          }
-        ),
-        searching ? renderSearchResults() : renderActiveFamily()
-      ] })
-    }
-  );
+      searching ? renderSearchResults() : showingComponents ? /* @__PURE__ */ jsx(ComponentIndex, { families: componentFamilies, loaded, failed, onRetry: loadFamily }) : renderActiveFamily()
+    ] }) }) })
+  ] });
 }
 export {
-  GalleryShell
+  GalleryShell,
+  resolveFullWidthIds
 };
 //# sourceMappingURL=GalleryShell.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/design_system/gallery/components/GalleryShell.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useSearchParams } from 'next/navigation'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { SectionPage } from '@open-mercato/ui/backend/section-page'\nimport type { SectionNavGroup } from '@open-mercato/ui/backend/section-page'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport { Skeleton } from '@open-mercato/ui/primitives/skeleton'\nimport { EmptyState } from '@open-mercato/ui/primitives/empty-state'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { ErrorMessage } from '@open-mercato/ui/backend/detail'\nimport type { GalleryEntry, GalleryFamily } from '../types'\nimport { GALLERY_BASE_PATH, galleryFamilies } from '../registry'\nimport { EntryCard } from './EntryCard'\n\n/** 'buttons' \u2192 'Buttons' \u2014 untranslated fallback when a family labelKey has no message. */\nfunction familyLabelFallback(id: string): string {\n  return id.charAt(0).toUpperCase() + id.slice(1).replace(/[-_]/g, ' ')\n}\n\nfunction matchesQuery(entry: GalleryEntry, query: string): boolean {\n  const needle = query.trim().toLowerCase()\n  if (!needle) return true\n  if (entry.id.toLowerCase().includes(needle) || entry.title.toLowerCase().includes(needle)) return true\n  if (entry.keywords?.some((keyword) => keyword.toLowerCase().includes(needle))) return true\n  // 'radiobutton' should still find 'radio' \u2014 match when the query CONTAINS the id/title too.\n  return needle.includes(entry.id.toLowerCase()) || needle.includes(entry.title.toLowerCase())\n}\n\ntype LoadedEntries = Record<string, GalleryEntry[]>\n\nexport function GalleryShell() {\n  const t = useT()\n  const searchParams = useSearchParams()\n  const [loaded, setLoaded] = React.useState<LoadedEntries>({})\n  const [failed, setFailed] = React.useState<Record<string, boolean>>({})\n  const [search, setSearch] = React.useState('')\n  const pendingRef = React.useRef(new Set<string>())\n\n  const familyParam = searchParams?.get('family') ?? null\n  const entryParam = searchParams?.get('entry') ?? null\n\n  // Clicking a family in the section nav exits search mode \u2014 otherwise the\n  // query keeps precedence and family navigation appears dead.\n  React.useEffect(() => {\n    setSearch('')\n  }, [familyParam])\n  const activeFamily: GalleryFamily | undefined =\n    galleryFamilies.find((family) => family.id === familyParam) ?? galleryFamilies[0]\n  const activeFamilyId = activeFamily?.id ?? null\n\n  const loadFamily = React.useCallback((family: GalleryFamily) => {\n    if (pendingRef.current.has(family.id)) return\n    pendingRef.current.add(family.id)\n    setFailed((prev) => (prev[family.id] ? { ...prev, [family.id]: false } : prev))\n    family\n      .load()\n      .then((mod) => {\n        setLoaded((prev) => (prev[family.id] ? prev : { ...prev, [family.id]: mod.entries }))\n      })\n      .catch(() => {\n        pendingRef.current.delete(family.id)\n        setFailed((prev) => ({ ...prev, [family.id]: true }))\n      })\n  }, [])\n\n  // Lazy-load the active family; when searching, load every family so results\n  // span the whole gallery.\n  const searching = search.trim().length > 0\n  React.useEffect(() => {\n    if (searching) {\n      for (const family of galleryFamilies) loadFamily(family)\n    } else if (activeFamily) {\n      loadFamily(activeFamily)\n    }\n  }, [searching, activeFamily, loadFamily])\n\n  // Deep link: ?entry=<id> scrolls the entry into view once its family loaded.\n  const activeEntries = activeFamilyId ? loaded[activeFamilyId] : undefined\n  React.useEffect(() => {\n    if (!entryParam || searching || !activeEntries) return\n    const node = document.getElementById(`gallery-entry-${entryParam}`)\n    node?.scrollIntoView({ block: 'start' })\n  }, [entryParam, searching, activeEntries])\n\n  const sections: SectionNavGroup[] = React.useMemo(\n    () => [\n      {\n        id: 'families',\n        label: 'Families',\n        labelKey: 'design_system.gallery.familiesGroup',\n        items: galleryFamilies.map((family) => ({\n          id: family.id,\n          label: familyLabelFallback(family.id),\n          labelKey: family.labelKey,\n          icon: family.icon,\n          href: `${GALLERY_BASE_PATH}?family=${family.id}`,\n        })),\n      },\n    ],\n    [],\n  )\n\n  const renderFamilySkeleton = () => (\n    <div className=\"space-y-4\" data-testid=\"gallery-family-skeleton\">\n      <Skeleton className=\"h-40 w-full\" />\n      <Skeleton className=\"h-40 w-full\" />\n    </div>\n  )\n\n  const renderSearchResults = () => {\n    const groups = galleryFamilies\n      .map((family) => ({\n        family,\n        entries: (loaded[family.id] ?? []).filter((entry) => matchesQuery(entry, search)),\n      }))\n      .filter((group) => group.entries.length > 0)\n    const stillLoading = galleryFamilies.some((family) => !loaded[family.id] && !failed[family.id])\n    if (groups.length === 0 && stillLoading) return renderFamilySkeleton()\n    if (groups.length === 0) {\n      return (\n        <EmptyState\n          title={t('design_system.gallery.noResults', 'No components match your search')}\n        />\n      )\n    }\n    return (\n      <div className=\"space-y-8\">\n        {groups.map(({ family, entries }) => (\n          <div key={family.id} className=\"space-y-4\">\n            <h2 className=\"text-sm font-medium uppercase tracking-wider text-muted-foreground\">\n              {t(family.labelKey, familyLabelFallback(family.id))}\n            </h2>\n            {entries.map((entry) => (\n              <EntryCard key={entry.id} entry={entry} />\n            ))}\n          </div>\n        ))}\n      </div>\n    )\n  }\n\n  const renderActiveFamily = () => {\n    if (!activeFamily) return null\n    const entries = loaded[activeFamily.id]\n    if (!entries && failed[activeFamily.id]) {\n      return (\n        <ErrorMessage\n          label={t('design_system.gallery.loadFailed', 'Could not load this family')}\n          action={\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => loadFamily(activeFamily)}>\n              {t('design_system.gallery.retry', 'Retry')}\n            </Button>\n          }\n        />\n      )\n    }\n    if (!entries) return renderFamilySkeleton()\n    return (\n      <div className=\"space-y-4\">\n        <h2 className=\"text-lg font-semibold\">\n          {t(activeFamily.labelKey, familyLabelFallback(activeFamily.id))}\n        </h2>\n        {entries.length > 1 ? (\n          <nav\n            aria-label={t('design_system.gallery.familyContents', 'Components in this family')}\n            className=\"flex flex-wrap items-center gap-1.5 rounded-md border border-border bg-muted/30 p-2\"\n          >\n            {entries.map((entry) => (\n              <a\n                key={entry.id}\n                href={`#gallery-entry-${entry.id}`}\n                className=\"rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus\"\n              >\n                {entry.title}\n              </a>\n            ))}\n          </nav>\n        ) : null}\n        {entries.map((entry) => (\n          <EntryCard key={entry.id} entry={entry} />\n        ))}\n      </div>\n    )\n  }\n\n  return (\n    <SectionPage\n      title=\"Design system\"\n      titleKey=\"design_system.nav.title\"\n      sections={sections}\n      activePath={activeFamilyId ? `${GALLERY_BASE_PATH}?family=${activeFamilyId}` : GALLERY_BASE_PATH}\n    >\n      <div className=\"mx-auto w-full max-w-5xl space-y-6\">\n        <SearchInput\n          value={search}\n          onChange={setSearch}\n          placeholder={t('design_system.gallery.searchPlaceholder', 'Search components\u2026')}\n          aria-label={t('design_system.gallery.searchPlaceholder', 'Search components\u2026')}\n        />\n        {searching ? renderSearchResults() : renderActiveFamily()}\n      </div>\n    </SectionPage>\n  )\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { GalleryLink as Link, navigateGallery } from './GalleryLink'\nimport { ArrowLeft, Home, BookOpen, Grid2X2, Palette } from 'lucide-react'\nimport { useRouter, useSearchParams } from 'next/navigation'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { GalleryNavigation } from './GalleryNavigation'\nimport type { SectionNavGroup } from '@open-mercato/ui/backend/section-page'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport { Skeleton } from '@open-mercato/ui/primitives/skeleton'\nimport { EmptyState } from '@open-mercato/ui/primitives/empty-state'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { ErrorMessage } from '@open-mercato/ui/backend/detail'\nimport type { GalleryEntry, GalleryFamily } from '../types'\nimport { GALLERY_BASE_PATH, galleryFamilies } from '../registry'\nimport { EntryCard } from './EntryCard'\nimport { DesignSystemHome, DesignSystemPrinciples } from './DesignSystemHome'\nimport { StyleAgents } from './StyleAgents'\nimport { ComponentIndex } from './ComponentIndex'\nimport { FoundationGuide } from './FoundationGuide'\nimport { IconsBrowser } from './IconsBrowser'\nimport { fullWidthEntryIds } from '../presentation'\n\n/** 'buttons' \u2192 'Buttons' \u2014 untranslated fallback when a family labelKey has no message. */\nfunction familyLabelFallback(id: string): string {\n  return id.charAt(0).toUpperCase() + id.slice(1).replace(/[-_]/g, ' ')\n}\n\nfunction matchesQuery(entry: GalleryEntry, query: string): boolean {\n  const needle = query.trim().toLowerCase()\n  if (!needle) return true\n  if (entry.id.toLowerCase().includes(needle) || entry.title.toLowerCase().includes(needle)) return true\n  if (entry.keywords?.some((keyword) => keyword.toLowerCase().includes(needle))) return true\n  // 'radiobutton' should still find 'radio' \u2014 match when the query CONTAINS the id/title too.\n  return needle.includes(entry.id.toLowerCase()) || needle.includes(entry.title.toLowerCase())\n}\n\n/** A half-width card with no neighbour before the next full-width card would leave a hole, so it spans the row too. */\nexport function resolveFullWidthIds(entryIds: string[], fullWidthIds: ReadonlySet<string>): Set<string> {\n  const resolved = new Set(entryIds.filter(id => fullWidthIds.has(id)))\n  let unpaired: string | null = null\n  for (const id of entryIds) {\n    if (resolved.has(id)) {\n      if (unpaired) resolved.add(unpaired)\n      unpaired = null\n    } else {\n      unpaired = unpaired ? null : id\n    }\n  }\n  if (unpaired) resolved.add(unpaired)\n  return resolved\n}\n\n/**\n * The backend shell centres `main` once the viewport outgrows its max width, which would leave the\n * library navigation floating mid-screen. Pull the gallery back by that centring margin so the\n * navigation stays docked next to the application sidebar at every width.\n */\nfunction useShellDockOffset(rootRef: React.RefObject<HTMLElement | null>): number {\n  const [offset, setOffset] = React.useState(0)\n  React.useLayoutEffect(() => {\n    const main = rootRef.current?.closest('main')\n    const column = main?.parentElement\n    if (!main || !column || typeof ResizeObserver === 'undefined') return\n    const measure = () => setOffset(Math.max(0, Math.round(main.getBoundingClientRect().left - column.getBoundingClientRect().left)))\n    measure()\n    const observer = new ResizeObserver(measure)\n    observer.observe(column)\n    return () => observer.disconnect()\n  }, [rootRef])\n  return offset\n}\n\ntype LoadedEntries = Record<string, GalleryEntry[]>\n\nconst componentFamilies = galleryFamilies.filter(family => !['foundations', 'library'].includes(family.id))\n\nexport function GalleryShell() {\n  const t = useT()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const [loaded, setLoaded] = React.useState<LoadedEntries>({})\n  const [failed, setFailed] = React.useState<Record<string, boolean>>({})\n  const [search, setSearch] = React.useState('')\n  const pendingRef = React.useRef(new Set<string>())\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const dockOffset = useShellDockOffset(rootRef)\n\n  const familyParam = searchParams?.get('family') ?? null\n  const entryParam = searchParams?.get('entry') ?? null\n  const variantParam = searchParams?.get('variant') ?? null\n  const showingPrinciples = searchParams?.get('view') === 'principles' && !familyParam\n  const showingComponents = searchParams?.get('view') === 'components' && !familyParam\n  const showingStyleAgents = searchParams?.get('view') === 'style-agents' && !familyParam\n  const showingHome = !familyParam && !showingPrinciples && !showingComponents && !showingStyleAgents\n  const showingFoundations = familyParam === 'foundations'\n  const showingAssets = familyParam === 'icons'\n  const showingInventory = familyParam === 'library'\n  const showingEntry = Boolean(entryParam) && !showingFoundations && !showingAssets && !showingInventory\n\n\n  React.useEffect(() => {\n    setSearch('')\n  }, [familyParam, entryParam, showingPrinciples, showingComponents, showingStyleAgents])\n  const activeFamily: GalleryFamily | undefined =\n    galleryFamilies.find((family) => family.id === familyParam) ?? galleryFamilies[0]\n  const activeFamilyId = activeFamily?.id ?? null\n  const activeNavigationPath = showingStyleAgents ? `${GALLERY_BASE_PATH}?view=style-agents` : showingHome ? GALLERY_BASE_PATH : showingPrinciples ? `${GALLERY_BASE_PATH}?view=principles` : showingComponents ? `${GALLERY_BASE_PATH}?view=components` : `${GALLERY_BASE_PATH}?family=${activeFamilyId}${(showingFoundations || showingEntry) && entryParam ? `&entry=${entryParam}` : ''}`\n\n  const loadFamily = React.useCallback((family: GalleryFamily) => {\n    if (pendingRef.current.has(family.id)) return\n    pendingRef.current.add(family.id)\n    setFailed((prev) => (prev[family.id] ? { ...prev, [family.id]: false } : prev))\n    family\n      .load()\n      .then((mod) => {\n        setLoaded((prev) => (prev[family.id] ? prev : { ...prev, [family.id]: mod.entries }))\n      })\n      .catch(() => {\n        pendingRef.current.delete(family.id)\n        setFailed((prev) => ({ ...prev, [family.id]: true }))\n      })\n  }, [])\n\n  // Lazy-load the active family; when searching, load every family so results\n  // span the whole gallery.\n  const searching = search.trim().length > 0\n  React.useEffect(() => {\n    if (searching) {\n      for (const family of galleryFamilies) loadFamily(family)\n    } else if (showingComponents) {\n      for (const family of componentFamilies) loadFamily(family)\n    } else if (activeFamily && !showingHome && !showingPrinciples && !showingStyleAgents) {\n      loadFamily(activeFamily)\n    }\n  }, [searching, activeFamily, loadFamily, showingHome, showingPrinciples, showingComponents, showingStyleAgents])\n\n  const activeEntries = activeFamilyId ? loaded[activeFamilyId] : undefined\n  React.useEffect(() => {\n    if (searching || (showingFoundations && entryParam && !activeEntries)) return\n    const variantId = entryParam === 'file-upload' && variantParam === 'drag-and-drop' ? 'default' : variantParam\n    const targetId = showingFoundations && entryParam ? `gallery-entry-${entryParam}` : entryParam && variantId && variantId !== '__all' ? `gallery-variant-${entryParam}-${variantId}` : 'gallery-page-heading'\n    const node = document.getElementById(targetId) ?? document.getElementById('gallery-page-heading')\n    node?.scrollIntoView({ block: 'start' })\n  }, [familyParam, entryParam, variantParam, searching, activeEntries, showingFoundations, showingHome, showingPrinciples, showingComponents, showingStyleAgents])\n\n  const sections: SectionNavGroup[] = React.useMemo(() => {\n    const familyItem = (family: GalleryFamily) => ({\n      id: family.id,\n      label: familyLabelFallback(family.id),\n      labelKey: family.labelKey,\n      icon: family.icon,\n      href: `${GALLERY_BASE_PATH}?family=${family.id}`,\n      ...(!['library', 'icons'].includes(family.id) ? { children: (loaded[family.id] ?? []).map(entry => ({\n        id: `entry:${entry.id}`, label: entry.title,\n        ...(family.id === 'foundations' ? { labelKey: `design_system.foundations.${entry.id}.title` } : {}),\n        href: `${GALLERY_BASE_PATH}?family=${family.id}&entry=${entry.id}`,\n      })) } : {}),\n    })\n    return [\n      { id: 'guide', label: '', items: [\n        { id: '__home', label: 'Start', labelKey: 'design_system.portal.nav.home', icon: <Home className=\"size-4\" />, href: GALLERY_BASE_PATH },\n        { id: '__style-agents', label: 'Style agents', labelKey: 'design_system.styleAgents.title', icon: <Palette className=\"size-4\" />, href: `${GALLERY_BASE_PATH}?view=style-agents` },\n        ...galleryFamilies.filter(family => family.id === 'foundations').map(familyItem),\n      ] },\n      { id: 'families', label: 'Components', labelKey: 'design_system.portal.nav.components', items: [\n        { id: '__components', label: 'All components', labelKey: 'design_system.gallery.navigation.allComponents', icon: <Grid2X2 className=\"size-4\" />, href: `${GALLERY_BASE_PATH}?view=components` },\n        ...componentFamilies.map(familyItem),\n      ] },\n      { id: 'resources', label: 'Resources', labelKey: 'design_system.gallery.navigation.resources', items: [\n        { id: '__principles', label: 'Guidelines', labelKey: 'design_system.portal.nav.principles', icon: <BookOpen className=\"size-4\" />, href: `${GALLERY_BASE_PATH}?view=principles` },\n        ...galleryFamilies.filter(family => family.id === 'library').map(familyItem),\n      ] },\n    ]\n  }, [loaded])\n  const selectedEntry = entryParam ? activeEntries?.find(entry => entry.id === entryParam) : undefined\n  const familyTitle = activeFamily ? t(activeFamily.labelKey, familyLabelFallback(activeFamily.id)) : t('design_system.nav.title')\n  const pageTitle = showingComponents ? t('design_system.portal.nav.components') : showingEntry && selectedEntry ? selectedEntry.title : familyTitle\n\n  const renderFamilySkeleton = () => (\n    <div className=\"space-y-4\" data-testid=\"gallery-family-skeleton\">\n      <Skeleton className=\"h-40 w-full\" />\n      <Skeleton className=\"h-40 w-full\" />\n    </div>\n  )\n\n  const renderSearchResults = () => {\n    const groups = galleryFamilies\n      .map((family) => ({\n        family,\n        entries: (loaded[family.id] ?? []).filter((entry) => matchesQuery(entry, search)),\n      }))\n      .filter((group) => group.entries.length > 0)\n    const stillLoading = galleryFamilies.some((family) => !loaded[family.id] && !failed[family.id])\n    if (groups.length === 0 && stillLoading) return renderFamilySkeleton()\n    if (groups.length === 0) {\n      return (\n        <EmptyState\n          title={t('design_system.gallery.noResults', 'No components match your search')}\n        />\n      )\n    }\n    return (\n      <div className=\"space-y-8\">\n        {groups.map(({ family, entries }) => (\n          <div key={family.id} className=\"space-y-4\">\n            <h2 className=\"text-sm font-medium uppercase tracking-wider text-muted-foreground\">\n              {t(family.labelKey, familyLabelFallback(family.id))}\n            </h2>\n            {entries.map((entry) => (\n              <EntryCard key={entry.id} entry={entry} summary href={`${GALLERY_BASE_PATH}?family=${family.id}&entry=${entry.id}`} onNavigate={() => setSearch('')} />\n            ))}\n          </div>\n        ))}\n      </div>\n    )\n  }\n\n  const renderActiveFamily = () => {\n    if (!activeFamily) return null\n    const entries = loaded[activeFamily.id]\n    if (!entries && failed[activeFamily.id]) {\n      return (\n        <ErrorMessage\n          label={t('design_system.gallery.loadFailed', 'Could not load this family')}\n          action={\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => loadFamily(activeFamily)}>\n              {t('design_system.gallery.retry', 'Retry')}\n            </Button>\n          }\n        />\n      )\n    }\n    if (!entries) return renderFamilySkeleton()\n    if (activeFamily.id === 'icons') return <IconsBrowser entryId={entryParam ?? undefined} variantId={variantParam ?? undefined} onNavigate={(entryId, variantId) => {\n      const href = `${GALLERY_BASE_PATH}?family=icons&entry=${entryId}${variantId ? `&variant=${variantId}` : ''}`\n      if (!navigateGallery(href)) router.push(href, { scroll: false })\n    }} />\n    if (activeFamily.id === 'foundations') return <FoundationGuide entries={entries} />\n    const sourceLibraryRender = activeFamily.id === 'library' && entries.length === 1 && !entryParam\n      ? entries[0]?.variants[0]?.render\n      : undefined\n    if (sourceLibraryRender) {\n      const SourceLibraryRender = sourceLibraryRender\n      return <div className=\"space-y-4\">\n        <SourceLibraryRender />\n      </div>\n    }\n    const selectedEntry = entries.find(entry => entry.id === entryParam) ?? (entries.length === 1 ? entries[0] : undefined)\n    const familyFullWidthIds = resolveFullWidthIds(entries.map(entry => entry.id), fullWidthEntryIds)\n    return (\n      <div className=\"space-y-4\">\n        {selectedEntry ? <>\n          <EntryCard key={selectedEntry.id} entry={selectedEntry} hideTitle fullWidth={fullWidthEntryIds.has(selectedEntry.id)} />\n        </> : <div className=\"grid grid-cols-1 gap-4 @3xl:grid-cols-2\">{entries.map(entry => <EntryCard key={entry.id} entry={entry} summary summaryPreview fullWidth={familyFullWidthIds.has(entry.id)} href={`${GALLERY_BASE_PATH}?family=${activeFamily.id}&entry=${entry.id}`} />)}</div>}\n      </div>\n    )\n  }\n\n  return (\n    <div ref={rootRef} className=\"flex min-w-0 flex-col lg:flex-row\" style={dockOffset ? { marginLeft: -dockOffset, width: `calc(100% + ${dockOffset}px)` } : undefined}>\n      <GalleryNavigation sections={sections} activePath={activeNavigationPath} activeFamilyId={familyParam} onNavigate={() => setSearch('')} failed={failed} onExpand={id => {\n        const family = galleryFamilies.find(family => family.id === id)\n        if (family) loadFamily(family)\n      }} onRetry={id => {\n        const family = galleryFamilies.find(family => family.id === id)\n        if (family) loadFamily(family)\n      }} />\n      <div className=\"min-w-0 flex-1 py-4 lg:pl-6\">\n      <div className=\"@container mx-auto w-full max-w-6xl space-y-6\">\n        {showingStyleAgents ? <StyleAgents /> : showingHome ? <DesignSystemHome /> : showingPrinciples ? <div id=\"gallery-page-heading\" className=\"scroll-mt-36 lg:scroll-mt-24 space-y-8 py-8\"><h1 className=\"text-3xl font-medium tracking-tight\">{t('design_system.portal.nav.principles')}</h1><DesignSystemPrinciples /></div> : <>\n        <header id=\"gallery-page-heading\" className=\"scroll-mt-36 lg:scroll-mt-24 space-y-3\">\n          {selectedEntry && showingEntry ? <Button asChild variant=\"outline\" size=\"sm\"><Link href={`${GALLERY_BASE_PATH}?family=${activeFamilyId}`}><ArrowLeft aria-hidden />{t('design_system.gallery.backToNamedFamily', { family: familyTitle })}</Link></Button> : null}\n          {!showingComponents && (!selectedEntry || !showingEntry) ? <Button asChild variant=\"outline\" size=\"sm\"><Link href={`${GALLERY_BASE_PATH}?view=components`}><ArrowLeft aria-hidden />{t('design_system.gallery.backToNamedFamily', { family: t('design_system.portal.nav.components') })}</Link></Button> : null}\n          <h1 className=\"text-3xl font-semibold tracking-tight\">{pageTitle}</h1>\n          {showingEntry && selectedEntry?.descriptionKey ? <p className=\"max-w-prose text-sm leading-relaxed text-muted-foreground\">{t(selectedEntry.descriptionKey)}</p> : null}\n          {showingComponents ? <p className=\"text-base text-muted-foreground\">{t('design_system.portal.componentsDescription')}</p> : null}\n        </header>\n        {!showingAssets && !showingInventory && !showingEntry ? <SearchInput\n          value={search}\n          onChange={setSearch}\n          placeholder={t('design_system.gallery.searchPlaceholder', 'Search components\u2026')}\n          aria-label={t('design_system.gallery.searchPlaceholder', 'Search components\u2026')}\n        /> : null}\n        {searching ? renderSearchResults() : showingComponents ? <ComponentIndex families={componentFamilies} loaded={loaded} failed={failed} onRetry={loadFamily} /> : renderActiveFamily()}\n        </>}\n      </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["selectedEntry", "family"]
 }

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

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@open-mercato/ui/primitives/select";
+import { SourceIconCatalogue } from "../demos/source-icons.js";
+import { SourceArtworkCatalogue } from "../demos/source-artwork.js";
+import { IconGrid } from "../demos/registered-icons.js";
+const collections = [
+  { id: "icons", entryId: "source-icons", variantId: "catalogue" },
+  { id: "brands", entryId: "source-artwork", variantId: "brands", group: "brand" },
+  { id: "flags", entryId: "source-artwork", variantId: "flags", group: "country-flags" },
+  { id: "emoji", entryId: "source-artwork", variantId: "emoji", group: "emojies" },
+  { id: "badges", entryId: "source-artwork", variantId: "store-badges", group: "appstore-badges" },
+  { id: "thumbnails", entryId: "source-artwork", variantId: "thumbnails", group: "thumbnails" },
+  { id: "cursors", entryId: "source-artwork", variantId: "cursors", group: "others" },
+  { id: "registered", entryId: "icon-registry", variantId: "registry" }
+];
+function IconsBrowser({ entryId, variantId, onNavigate }) {
+  const t = useT();
+  const collection = collections.find((item) => item.entryId === entryId && item.variantId === variantId) ?? collections.find((item) => item.entryId === entryId) ?? collections[0];
+  const collectionControl = /* @__PURE__ */ jsxs(Select, { value: collection.id, onValueChange: (value) => {
+    const next = collections.find((item) => item.id === value);
+    if (next) onNavigate(next.entryId, next.variantId);
+  }, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { className: "w-64 max-w-full", "aria-label": t("design_system.gallery.assets.collection"), children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: collections.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.id, children: t(`design_system.gallery.assets.${item.id}`) }, item.id)) })
+  ] });
+  return collection.group ? /* @__PURE__ */ jsx(SourceArtworkCatalogue, { group: collection.group, collectionControl }, collection.id) : collection.id === "registered" ? /* @__PURE__ */ jsx(IconGrid, { collectionControl }) : /* @__PURE__ */ jsx(SourceIconCatalogue, { collectionControl });
+}
+export {
+  IconsBrowser
+};
+//# sourceMappingURL=IconsBrowser.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/components/IconsBrowser.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'\nimport { SourceIconCatalogue } from '../demos/source-icons'\nimport { SourceArtworkCatalogue } from '../demos/source-artwork'\nimport { IconGrid } from '../demos/registered-icons'\nimport type { SourceArtworkGroup } from '@open-mercato/ui/assets/source-artwork'\n\nconst collections: { id: string; entryId: string; variantId: string; group?: SourceArtworkGroup }[] = [\n  { id: 'icons', entryId: 'source-icons', variantId: 'catalogue' },\n  { id: 'brands', entryId: 'source-artwork', variantId: 'brands', group: 'brand' },\n  { id: 'flags', entryId: 'source-artwork', variantId: 'flags', group: 'country-flags' },\n  { id: 'emoji', entryId: 'source-artwork', variantId: 'emoji', group: 'emojies' },\n  { id: 'badges', entryId: 'source-artwork', variantId: 'store-badges', group: 'appstore-badges' },\n  { id: 'thumbnails', entryId: 'source-artwork', variantId: 'thumbnails', group: 'thumbnails' },\n  { id: 'cursors', entryId: 'source-artwork', variantId: 'cursors', group: 'others' },\n  { id: 'registered', entryId: 'icon-registry', variantId: 'registry' },\n]\n\nexport function IconsBrowser({ entryId, variantId, onNavigate }: {\n  entryId?: string\n  variantId?: string\n  onNavigate: (entryId: string, variantId?: string) => void\n}) {\n  const t = useT()\n  const collection = collections.find(item => item.entryId === entryId && item.variantId === variantId)\n    ?? collections.find(item => item.entryId === entryId)\n    ?? collections[0]\n  const collectionControl = <Select value={collection.id} onValueChange={value => {\n      const next = collections.find(item => item.id === value)\n      if (next) onNavigate(next.entryId, next.variantId)\n    }}>\n      <SelectTrigger className=\"w-64 max-w-full\" aria-label={t('design_system.gallery.assets.collection')}><SelectValue /></SelectTrigger>\n      <SelectContent>{collections.map(item => <SelectItem key={item.id} value={item.id}>{t(`design_system.gallery.assets.${item.id}`)}</SelectItem>)}</SelectContent>\n    </Select>\n  return collection.group ? <SourceArtworkCatalogue key={collection.id} group={collection.group} collectionControl={collectionControl} />\n    : collection.id === 'registered' ? <IconGrid collectionControl={collectionControl} /> : <SourceIconCatalogue collectionControl={collectionControl} />\n}\n"],
+  "mappings": ";AA8B4B,SAI+E,KAJ/E;AA3B5B,SAAS,YAAY;AACrB,SAAS,QAAQ,eAAe,YAAY,eAAe,mBAAmB;AAC9E,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,gBAAgB;AAGzB,MAAM,cAAgG;AAAA,EACpG,EAAE,IAAI,SAAS,SAAS,gBAAgB,WAAW,YAAY;AAAA,EAC/D,EAAE,IAAI,UAAU,SAAS,kBAAkB,WAAW,UAAU,OAAO,QAAQ;AAAA,EAC/E,EAAE,IAAI,SAAS,SAAS,kBAAkB,WAAW,SAAS,OAAO,gBAAgB;AAAA,EACrF,EAAE,IAAI,SAAS,SAAS,kBAAkB,WAAW,SAAS,OAAO,UAAU;AAAA,EAC/E,EAAE,IAAI,UAAU,SAAS,kBAAkB,WAAW,gBAAgB,OAAO,kBAAkB;AAAA,EAC/F,EAAE,IAAI,cAAc,SAAS,kBAAkB,WAAW,cAAc,OAAO,aAAa;AAAA,EAC5F,EAAE,IAAI,WAAW,SAAS,kBAAkB,WAAW,WAAW,OAAO,SAAS;AAAA,EAClF,EAAE,IAAI,cAAc,SAAS,iBAAiB,WAAW,WAAW;AACtE;AAEO,SAAS,aAAa,EAAE,SAAS,WAAW,WAAW,GAI3D;AACD,QAAM,IAAI,KAAK;AACf,QAAM,aAAa,YAAY,KAAK,UAAQ,KAAK,YAAY,WAAW,KAAK,cAAc,SAAS,KAC/F,YAAY,KAAK,UAAQ,KAAK,YAAY,OAAO,KACjD,YAAY,CAAC;AAClB,QAAM,oBAAoB,qBAAC,UAAO,OAAO,WAAW,IAAI,eAAe,WAAS;AAC5E,UAAM,OAAO,YAAY,KAAK,UAAQ,KAAK,OAAO,KAAK;AACvD,QAAI,KAAM,YAAW,KAAK,SAAS,KAAK,SAAS;AAAA,EACnD,GACE;AAAA,wBAAC,iBAAc,WAAU,mBAAkB,cAAY,EAAE,yCAAyC,GAAG,8BAAC,eAAY,GAAE;AAAA,IACpH,oBAAC,iBAAe,sBAAY,IAAI,UAAQ,oBAAC,cAAyB,OAAO,KAAK,IAAK,YAAE,gCAAgC,KAAK,EAAE,EAAE,KAArE,KAAK,EAAkE,CAAa,GAAE;AAAA,KACjJ;AACF,SAAO,WAAW,QAAQ,oBAAC,0BAA2C,OAAO,WAAW,OAAO,qBAAxC,WAAW,EAAmE,IACjI,WAAW,OAAO,eAAe,oBAAC,YAAS,mBAAsC,IAAK,oBAAC,uBAAoB,mBAAsC;AACvJ;",
+  "names": []
+}