@kerfjs/ui 5.0.0-beta.54 → 5.0.0-beta.56

package/dist/catalog.js

@@ -1,56 +1,77 @@
-import { ToolbarControlGroup, ToolbarActionLink } from './chunk-ZIYOJFZD.js';
-import { Toolbar } from './chunk-MTM43SJO.js';
-import { ListItem } from './chunk-GUIHMIT2.js';
-import { List } from './chunk-3NBL3OUQ.js';
-import { ToolbarText } from './chunk-TZ5IHWB2.js';
-import { Pane } from './chunk-7GUQYHKA.js';
+import { Workbench } from './chunk-QQOTQTDD.js';
 
+import { PopupMenu } from './chunk-WLG6SSNT.js';
 
-import { ListHeader } from './chunk-KPNTVB7A.js';
+import { Row } from './chunk-VZOFZPSO.js';
+import { ListInsetText } from './chunk-DG6G5EPF.js';
+import { ListItem } from './chunk-VNPQDCQZ.js';
+import { List } from './chunk-NAPE7WUS.js';
 
+import { ToolbarText } from './chunk-K6UNVKDK.js';
+
+
+import { ListHeader } from './chunk-PK4N5QTO.js';
+import { Text } from './chunk-24PHKUR3.js';
 
-import { filterDataAttributes } from './chunk-SRSJO5QE.js';
 
 
 
+import { ToolbarControlGroup, ToolbarActionLink } from './chunk-ZIYOJFZD.js';
+import { Toolbar } from './chunk-G33XC2NB.js';
+
 import { LucideIcon } from './chunk-4R777DUZ.js';
-import { PanelLeftClose, Moon, Sun, PanelLeftOpen, Waypoints, ExternalLink } from 'lucide';
-import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+import { filterDataAttributes } from './chunk-SRSJO5QE.js';
+
+import { Moon, Sun, Waypoints, ExternalLink } from 'lucide';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
 function relatedMenuItems(related, selectAction) {
   const groups = [];
   for (const entry of related)
     if (!groups.includes(entry.group)) groups.push(entry.group);
-  const nodes = [];
+  const items = [];
   groups.forEach((group, index) => {
-    if (index > 0) nodes.push(/* @__PURE__ */ jsx("wa-divider", {}));
-    nodes.push(/* @__PURE__ */ jsx("small", { class: "kui-catalog__related-heading", children: group }));
-    for (const entry of related) {
+    if (index > 0) items.push({ kind: "divider" });
+    items.push({ kind: "heading", label: group });
+    for (const entry of related)
       if (entry.group === group)
-        nodes.push(
-          /* @__PURE__ */ jsx("wa-dropdown-item", { "data-action": selectAction, "data-item-id": entry.id, children: entry.name })
-        );
-    }
+        items.push({
+          label: entry.name,
+          action: selectAction,
+          attributes: { "data-item-id": entry.id }
+        });
   });
-  return nodes;
+  return items;
 }
 function CatalogResourceFooter({
   name,
-  active,
   resources,
   related,
   status,
-  selectAction
+  selectAction,
+  toolbar
 }) {
-  return /* @__PURE__ */ jsxs("div", { class: "kui-catalog__footer", children: [
-    status ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__status", children: status }) : null,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    status ? /* @__PURE__ */ jsx(
+      Row,
+      {
+        hAlign: "space-between",
+        vAlign: "baseline",
+        gap: "xs",
+        wrap: true,
+        textInsets: "trl",
+        children: status
+      }
+    ) : null,
     /* @__PURE__ */ jsx(
       Toolbar,
       {
         label: `${name} resources`,
-        dividerSides: "",
-        responsive: "stack",
-        responsiveAt: "narrow",
+        dividerSides: toolbar?.dividerSides ?? "",
+        centerAlign: toolbar?.centerAlign,
+        responsive: toolbar?.responsive ?? "stack",
+        responsiveAt: toolbar?.responsiveAt ?? "narrow",
+        safeAreaEdges: toolbar?.safeAreaEdges,
         leading: resources.length > 0 ? /* @__PURE__ */ jsx(
           ToolbarControlGroup,
           {
@@ -80,20 +101,14 @@ function CatalogResourceFooter({
             menuInset: "compact",
             size: "compact",
             label: "Related entries",
-            children: /* @__PURE__ */ jsxs(
-              "wa-dropdown",
+            children: /* @__PURE__ */ jsx(
+              PopupMenu,
               {
+                text: "Components",
+                icon: /* @__PURE__ */ jsx(LucideIcon, { icon: Waypoints, name: "waypoints" }),
                 placement: "top-end",
-                "data-key": `kui-catalog-related-${active}`,
-                "data-catalog-related": true,
-                "data-morph-skip-children": true,
-                children: [
-                  /* @__PURE__ */ jsxs("wa-button", { slot: "trigger", appearance: "plain", "with-caret": true, children: [
-                    /* @__PURE__ */ jsx(LucideIcon, { icon: Waypoints, name: "waypoints" }),
-                    /* @__PURE__ */ jsx("span", { children: "Components" })
-                  ] }),
-                  relatedMenuItems(related, selectAction)
-                ]
+                items: relatedMenuItems(related, selectAction),
+                rootAttributes: { "data-catalog-related": "" }
               }
             )
           }
@@ -102,135 +117,26 @@ function CatalogResourceFooter({
     )
   ] });
 }
-var protectedAttributes = /* @__PURE__ */ new Set(["data-catalog-stage"]);
-function CatalogStage({
-  name,
-  content,
-  geometryOverlay,
-  rootAttributes = {}
-}) {
-  const safeRootAttributes = filterDataAttributes(
-    rootAttributes,
-    protectedAttributes
-  );
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      ...safeRootAttributes,
-      class: "kui-catalog__stage",
-      "data-catalog-stage": true,
-      "aria-label": `${name} preview`,
-      children: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__canvas", children: [
-        content,
-        geometryOverlay !== void 0 ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            class: "kui-catalog__geometry-overlay",
-            "data-catalog-geometry-overlay": true,
-            "data-morph-skip-children": true,
-            "aria-hidden": "true"
-          }
-        ) : null
-      ] })
-    }
-  );
-}
-function CatalogDetail({
-  brandTitle,
+function CatalogSectionEntries({
+  section,
   active,
-  selected,
-  content,
-  collapsed,
-  theme,
-  headerActions,
-  status,
-  geometryOverlay,
-  stageRootAttributes,
-  selectAction,
-  toggleSidebarAction,
-  toggleThemeAction
+  selectAction
 }) {
-  const name = selected?.name ?? "";
-  const nextTheme = theme === "dark" ? "light" : "dark";
-  return /* @__PURE__ */ jsx("article", { class: "kui-catalog__detail", children: /* @__PURE__ */ jsx(
-    Pane,
-    {
-      contentClassName: "kui-catalog__detail-preview",
-      header: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__header", children: [
-        /* @__PURE__ */ jsx(
-          Toolbar,
-          {
-            label: `${name} header`,
-            dividerSides: "",
-            leading: /* @__PURE__ */ jsxs(Fragment, { children: [
-              collapsed ? /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "data-action": toggleSidebarAction,
-                  "aria-label": `Expand ${brandTitle} catalog`,
-                  children: /* @__PURE__ */ jsx(
-                    LucideIcon,
-                    {
-                      icon: PanelLeftOpen,
-                      name: "panel-left-open"
-                    }
-                  )
-                }
-              ) }) : null,
-              /* @__PURE__ */ jsx(ToolbarText, { text: name, size: "xlarge", headingLevel: 2 })
-            ] }),
-            trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
-              headerActions,
-              theme ? /* @__PURE__ */ jsx(
-                ToolbarControlGroup,
-                {
-                  appearance: "borderless",
-                  content: "mixed",
-                  size: "compact",
-                  label: "Catalog display",
-                  children: /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      "data-action": toggleThemeAction,
-                      "aria-label": `Use ${nextTheme} theme`,
-                      "data-theme-preview": theme,
-                      children: [
-                        nextTheme === "dark" ? /* @__PURE__ */ jsx(LucideIcon, { icon: Moon, name: "moon" }) : /* @__PURE__ */ jsx(LucideIcon, { icon: Sun, name: "sun" }),
-                        /* @__PURE__ */ jsx("span", { children: nextTheme === "dark" ? "Dark" : "Light" })
-                      ]
-                    }
-                  )
-                }
-              ) : null
-            ] })
-          }
-        ),
-        selected?.description ? /* @__PURE__ */ jsx("p", { class: "kui-catalog__description kui-content-item", children: selected.description }) : null
-      ] }),
-      footer: /* @__PURE__ */ jsx(
-        CatalogResourceFooter,
-        {
-          name,
-          active,
-          resources: selected?.resources ?? [],
-          related: selected?.related ?? [],
-          status,
-          selectAction
-        }
-      ),
-      children: /* @__PURE__ */ jsx(
-        CatalogStage,
-        {
-          name,
-          content,
-          geometryOverlay,
-          rootAttributes: stageRootAttributes
-        }
-      )
-    }
-  ) });
+  return /* @__PURE__ */ jsxs(List, { rootAttributes: { "data-catalog-section": section.category }, children: [
+    /* @__PURE__ */ jsx(ListHeader, { label: section.category }),
+    /* @__PURE__ */ jsx(List, { gap: "2xs", children: section.entries.map((entry) => /* @__PURE__ */ jsx(
+      ListItem,
+      {
+        action: selectAction,
+        itemId: entry.id,
+        label: entry.name,
+        status: entry.tags?.join(" \xB7 "),
+        selected: active === entry.id,
+        title: entry.description,
+        multiline: true
+      }
+    )) })
+  ] });
 }
 function CatalogSecondarySections({
   group,
@@ -238,31 +144,25 @@ function CatalogSecondarySections({
   selectAction,
   toggleAction
 }) {
-  return /* @__PURE__ */ jsxs("section", { class: "kui-catalog__group--secondary", children: [
+  const open = !group.collapsible || Boolean(group.expanded);
+  return /* @__PURE__ */ jsxs(List, { dividerSides: "t", controlInsets: "t", children: [
     group.collapsible ? /* @__PURE__ */ jsx(
       ListHeader,
       {
         label: group.label,
         toggle: true,
-        expanded: Boolean(group.expanded),
+        expanded: open,
         action: toggleAction
       }
     ) : /* @__PURE__ */ jsx(ListHeader, { label: group.label }),
-    !group.collapsible || group.expanded ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__secondary", "data-catalog-secondary": true, children: group.sections.map((section) => /* @__PURE__ */ jsxs("section", { class: "kui-catalog__secondary-group", children: [
-      /* @__PURE__ */ jsx("h3", { class: "kui-catalog__secondary-heading", children: section.category }),
-      /* @__PURE__ */ jsx("div", { class: "kui-catalog__secondary-items", children: /* @__PURE__ */ jsx(List, { gap: "2xs", children: section.entries.map((entry) => /* @__PURE__ */ jsx(
-        ListItem,
-        {
-          action: selectAction,
-          itemId: entry.id,
-          label: entry.name,
-          status: entry.tags?.join(" \xB7 "),
-          selected: active === entry.id,
-          title: entry.description,
-          multiline: true
-        }
-      )) }) })
-    ] })) }) : null
+    open ? /* @__PURE__ */ jsx(List, { gap: "m", rootAttributes: { "data-catalog-secondary": "" }, children: group.sections.map((section) => /* @__PURE__ */ jsx(
+      CatalogSectionEntries,
+      {
+        section,
+        active,
+        selectAction
+      }
+    )) }) : null
   ] });
 }
 function CatalogSectionList({
@@ -270,108 +170,76 @@ function CatalogSectionList({
   active,
   selectAction
 }) {
-  return /* @__PURE__ */ jsx("div", { class: "kui-catalog__sections", children: sections.map((section) => /* @__PURE__ */ jsxs("section", { class: "kui-catalog__group", children: [
-    /* @__PURE__ */ jsx(ListHeader, { label: section.category }),
-    /* @__PURE__ */ jsx("div", { class: "kui-catalog__items", children: /* @__PURE__ */ jsx(List, { gap: "2xs", children: section.entries.map((entry) => /* @__PURE__ */ jsx(
-      ListItem,
-      {
-        action: selectAction,
-        itemId: entry.id,
-        label: entry.name,
-        status: entry.tags?.join(" \xB7 "),
-        selected: active === entry.id,
-        title: entry.description,
-        multiline: true
-      }
-    )) }) })
-  ] })) });
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => /* @__PURE__ */ jsx(
+    CatalogSectionEntries,
+    {
+      section,
+      active,
+      selectAction
+    }
+  )) });
 }
 function CatalogSidebar({
   brand,
   sections,
   active,
-  collapsed,
   secondarySections,
   footer,
   selectAction,
-  toggleSidebarAction,
   toggleSecondaryAction
 }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": `${brand.title} components`, children: /* @__PURE__ */ jsxs(List, { gap: "m", controlInsets: "b", children: [
+    brand.subtitle ? /* @__PURE__ */ jsx(ListInsetText, { sides: "rl", children: /* @__PURE__ */ jsx(Text, { variant: "span", size: "compact", tone: "quiet", children: brand.subtitle }) }) : null,
+    /* @__PURE__ */ jsx(
+      CatalogSectionList,
+      {
+        sections,
+        active,
+        selectAction
+      }
+    ),
+    secondarySections ? /* @__PURE__ */ jsx(
+      CatalogSecondarySections,
+      {
+        group: secondarySections,
+        active,
+        selectAction,
+        toggleAction: toggleSecondaryAction
+      }
+    ) : null,
+    footer
+  ] }) });
+}
+var protectedAttributes = /* @__PURE__ */ new Set(["data-catalog-stage"]);
+function CatalogStage({
+  name,
+  content,
+  geometryOverlay,
+  rootAttributes = {}
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    protectedAttributes
+  );
   return /* @__PURE__ */ jsx(
-    "aside",
+    "section",
     {
-      class: "kui-catalog__sidebar",
-      "aria-label": `${brand.title} catalog`,
-      "data-collapsed": String(collapsed),
-      children: /* @__PURE__ */ jsx(
-        Pane,
-        {
-          header: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__brand", children: [
-            /* @__PURE__ */ jsx(
-              Toolbar,
-              {
-                label: `${brand.title} catalog header`,
-                dividerSides: "",
-                leading: /* @__PURE__ */ jsxs(Fragment, { children: [
-                  brand.logoUrl ? /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      class: "kui-catalog__mark",
-                      src: brand.logoUrl,
-                      alt: ""
-                    }
-                  ) }) : null,
-                  /* @__PURE__ */ jsx(
-                    ToolbarText,
-                    {
-                      text: brand.title,
-                      size: "large",
-                      headingLevel: 1
-                    }
-                  )
-                ] }),
-                trailing: /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "data-action": toggleSidebarAction,
-                    "aria-label": `Collapse ${brand.title} catalog`,
-                    children: /* @__PURE__ */ jsx(LucideIcon, { icon: PanelLeftClose, name: "panel-left-close" })
-                  }
-                ) })
-              }
-            ),
-            brand.subtitle ? /* @__PURE__ */ jsx("p", { class: "kui-catalog__subtitle", children: brand.subtitle }) : null
-          ] }),
-          children: /* @__PURE__ */ jsxs(
-            "nav",
-            {
-              class: "kui-catalog__navigation",
-              "aria-label": `${brand.title} components`,
-              children: [
-                /* @__PURE__ */ jsx(
-                  CatalogSectionList,
-                  {
-                    sections,
-                    active,
-                    selectAction
-                  }
-                ),
-                secondarySections ? /* @__PURE__ */ jsx(
-                  CatalogSecondarySections,
-                  {
-                    group: secondarySections,
-                    active,
-                    selectAction,
-                    toggleAction: toggleSecondaryAction
-                  }
-                ) : null,
-                footer
-              ]
-            }
-          )
-        }
-      )
+      ...safeRootAttributes,
+      class: "kui-catalog__stage",
+      "data-catalog-stage": true,
+      "aria-label": `${name} preview`,
+      children: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__canvas", children: [
+        content,
+        geometryOverlay !== void 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-catalog__geometry-overlay",
+            "data-catalog-geometry-overlay": true,
+            "data-morph-skip-children": true,
+            "aria-hidden": "true"
+          }
+        ) : null
+      ] })
     }
   );
 }
@@ -382,6 +250,7 @@ function findEntry(sections, id) {
   return void 0;
 }
 function Catalog({
+  id = "kui-catalog",
   brand,
   sections,
   active,
@@ -398,11 +267,19 @@ function Catalog({
   toggleSidebarAction = "catalog-toggle-sidebar",
   toggleThemeAction = "catalog-toggle-theme",
   toggleSecondaryAction = "catalog-toggle-secondary",
+  headerPlacement = "auto",
+  footerPlacement = "auto",
+  sidebar = {},
+  mainToolbar,
+  footerToolbar,
   className = "",
   slot
 }) {
   const selected = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : void 0);
-  return /* @__PURE__ */ jsxs(
+  const name = selected?.name ?? "";
+  const nextTheme = theme === "dark" ? "light" : "dark";
+  const catalogName = `${brand.title} catalog`;
+  return /* @__PURE__ */ jsx(
     "main",
     {
       class: `kui-catalog ${className}`.trim(),
@@ -410,40 +287,107 @@ function Catalog({
       "data-sidebar-collapsed": String(collapsed),
       "data-geometry-overlay": geometryOverlay === void 0 ? void 0 : String(geometryOverlay),
       slot,
-      children: [
-        /* @__PURE__ */ jsx(
-          CatalogSidebar,
-          {
-            brand,
-            sections,
-            active,
-            collapsed,
-            secondarySections,
-            footer: sidebarFooter,
-            selectAction,
-            toggleSidebarAction,
-            toggleSecondaryAction
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          CatalogDetail,
-          {
-            brandTitle: brand.title,
-            active,
-            selected,
-            content,
+      children: /* @__PURE__ */ jsx(
+        Workbench,
+        {
+          id,
+          label: catalogName,
+          leftRail: {
+            label: catalogName,
+            size: sidebar.size ?? 288,
+            resizable: sidebar.resizable,
+            separator: sidebar.separator,
+            collapseMotion: sidebar.collapseMotion,
+            presentation: sidebar.presentation,
+            responsiveOverlayAt: sidebar.responsiveOverlayAt,
+            compactOverlay: sidebar.compactOverlay,
             collapsed,
-            theme,
-            headerActions,
-            status,
-            geometryOverlay,
-            stageRootAttributes,
-            selectAction,
-            toggleSidebarAction,
-            toggleThemeAction
-          }
-        )
-      ]
+            toolbar: {
+              ...sidebar.toolbar,
+              label: `${catalogName} header`,
+              title: /* @__PURE__ */ jsxs(Fragment, { children: [
+                brand.logoUrl ? /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx("img", { class: "kui-catalog__mark", src: brand.logoUrl, alt: "" }) }) : null,
+                /* @__PURE__ */ jsx(ToolbarText, { text: brand.title, size: "large", headingLevel: 1 })
+              ] }),
+              toggle: { action: toggleSidebarAction, name: catalogName }
+            },
+            content: /* @__PURE__ */ jsx(
+              CatalogSidebar,
+              {
+                brand,
+                sections,
+                active,
+                secondarySections,
+                footer: sidebarFooter,
+                selectAction,
+                toggleSecondaryAction
+              }
+            )
+          },
+          mainToolbar: {
+            ...mainToolbar,
+            label: `${name} header`,
+            // The entry title stays whole; actions wrap below it when narrow.
+            responsive: mainToolbar?.responsive ?? "wrap",
+            title: /* @__PURE__ */ jsx(ToolbarText, { text: name, size: "xlarge", headingLevel: 2 }),
+            trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+              headerActions,
+              theme ? /* @__PURE__ */ jsx(
+                ToolbarControlGroup,
+                {
+                  appearance: "borderless",
+                  content: "mixed",
+                  size: "compact",
+                  label: "Catalog display",
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "data-action": toggleThemeAction,
+                      "aria-label": `Use ${nextTheme} theme`,
+                      "data-theme-preview": theme,
+                      children: [
+                        nextTheme === "dark" ? /* @__PURE__ */ jsx(LucideIcon, { icon: Moon, name: "moon" }) : /* @__PURE__ */ jsx(LucideIcon, { icon: Sun, name: "sun" }),
+                        /* @__PURE__ */ jsx("span", { children: nextTheme === "dark" ? "Dark" : "Light" })
+                      ]
+                    }
+                  )
+                }
+              ) : null
+            ] })
+          },
+          mainFooter: /* @__PURE__ */ jsx(
+            CatalogResourceFooter,
+            {
+              name,
+              resources: selected?.resources ?? [],
+              related: selected?.related ?? [],
+              status,
+              selectAction,
+              toolbar: footerToolbar
+            }
+          ),
+          mainHeader: selected?.description ? /* @__PURE__ */ jsx(
+            ListInsetText,
+            {
+              sides: "trbl",
+              rootAttributes: { "data-catalog-description": "" },
+              children: /* @__PURE__ */ jsx(Text, { variant: "span", children: selected.description })
+            }
+          ) : null,
+          mainHeaderPlacement: headerPlacement,
+          mainFooterPlacement: footerPlacement,
+          main: /* @__PURE__ */ jsx(List, { flex: true, children: /* @__PURE__ */ jsx(
+            CatalogStage,
+            {
+              name,
+              content,
+              geometryOverlay,
+              rootAttributes: stageRootAttributes
+            }
+          ) })
+        }
+      )
     }
   );
 }
@@ -505,8 +449,16 @@ function CatalogExample({
             rootAttributes: { "data-catalog-example-label": "" }
           }
         ) : null,
-        note !== void 0 ? /* @__PURE__ */ jsx("p", { class: "kui-catalog-example__note", "data-catalog-example-note": true, children: note }) : null,
-        compactFallback !== void 0 ? /* @__PURE__ */ jsx("p", { class: "kui-catalog-example__compact-fallback", children: compactFallback }) : null,
+        note !== void 0 ? /* @__PURE__ */ jsx(
+          ListInsetText,
+          {
+            sides: "rl",
+            className: "kui-catalog-example__note",
+            rootAttributes: { "data-catalog-example-note": "" },
+            children: /* @__PURE__ */ jsx(Text, { variant: "span", size: "compact", tone: "quiet", children: note })
+          }
+        ) : null,
+        compactFallback !== void 0 ? /* @__PURE__ */ jsx(Text, { tone: "quiet", className: "kui-catalog-example__compact-fallback", children: compactFallback }) : null,
         specimen
       ]
     }