@kerfjs/ui 4.4.1 → 5.0.0-beta.10

package/dist/catalog.js

@@ -0,0 +1,143 @@
+import { ListHeader } from './chunk-W5EQ3HYQ.js';
+import { ListItem } from './chunk-L4OKFDJY.js';
+import { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
+import { Toolbar } from './chunk-DAFFDO33.js';
+
+import { LucideIcon } from './chunk-W2FK7ZNY.js';
+
+
+import { PanelLeftClose, Moon, Sun, PanelLeftOpen, Waypoints, ExternalLink } from 'lucide';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+function findEntry(sections, id) {
+  for (const section of sections) {
+    for (const entry of section.entries) if (entry.id === id) return entry;
+  }
+  return void 0;
+}
+function relatedMenuItems(related, selectAction) {
+  const groups = [];
+  for (const entry of related) if (!groups.includes(entry.group)) groups.push(entry.group);
+  const nodes = [];
+  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 (entry.group === group) nodes.push(/* @__PURE__ */ jsx("wa-dropdown-item", { "data-action": selectAction, "data-item-id": entry.id, children: entry.name }));
+    }
+  });
+  return nodes;
+}
+function Catalog({
+  brand,
+  sections,
+  active,
+  content,
+  collapsed = false,
+  theme,
+  headerActions,
+  secondarySections,
+  sidebarFooter,
+  status,
+  selectAction = "catalog-select",
+  toggleSidebarAction = "catalog-toggle-sidebar",
+  toggleThemeAction = "catalog-toggle-theme",
+  toggleSecondaryAction = "catalog-toggle-secondary",
+  className = ""
+}) {
+  const selected = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : void 0);
+  const name = selected?.name ?? "";
+  const nextTheme = theme === "dark" ? "light" : "dark";
+  const resources = selected?.resources ?? [];
+  const related = selected?.related ?? [];
+  return /* @__PURE__ */ jsxs("main", { class: `kui-catalog ${className}`.trim(), "data-component": "catalog", "data-sidebar-collapsed": String(collapsed), children: [
+    /* @__PURE__ */ jsxs("aside", { class: "kui-catalog__sidebar kui-pane", "aria-label": `${brand.title} catalog`, children: [
+      /* @__PURE__ */ jsxs("header", { class: "kui-catalog__brand kui-pane__toolbar", children: [
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            label: `${brand.title} catalog header`,
+            divider: false,
+            leading: /* @__PURE__ */ jsxs(ToolbarControlGroup, { appearance: "borderless", className: "kui-catalog__identity", children: [
+              brand.logoUrl ? /* @__PURE__ */ jsx("img", { class: "kui-catalog__mark", src: brand.logoUrl, alt: "" }) : /* @__PURE__ */ jsx(Fragment, {}),
+              /* @__PURE__ */ jsx("h1", { children: brand.title })
+            ] }),
+            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 }) : /* @__PURE__ */ jsx(Fragment, {})
+      ] }),
+      /* @__PURE__ */ jsxs("nav", { class: "kui-pane__content kui-content", "aria-label": `${brand.title} components`, 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: section.entries.map((entry) => /* @__PURE__ */ jsx(ListItem, { action: selectAction, itemId: entry.id, label: entry.name, selected: active === entry.id, title: entry.description, multiline: true })) })
+        ] })),
+        secondarySections ? /* @__PURE__ */ jsxs("section", { class: "kui-catalog__group kui-catalog__group--secondary", children: [
+          /* @__PURE__ */ jsx(ListHeader, { label: secondarySections.label, toggle: secondarySections.collapsible, expanded: secondarySections.collapsible ? Boolean(secondarySections.expanded) : void 0, action: secondarySections.collapsible ? toggleSecondaryAction : void 0 }),
+          !secondarySections.collapsible || secondarySections.expanded ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__secondary", "data-catalog-secondary": true, children: secondarySections.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__items", children: section.entries.map((entry) => /* @__PURE__ */ jsx(ListItem, { action: selectAction, itemId: entry.id, label: entry.name, selected: active === entry.id, title: entry.description, multiline: true })) })
+          ] })) }) : /* @__PURE__ */ jsx(Fragment, {})
+        ] }) : /* @__PURE__ */ jsx(Fragment, {}),
+        sidebarFooter
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("article", { class: "kui-catalog__detail kui-pane", children: [
+      /* @__PURE__ */ jsxs("header", { class: "kui-catalog__header kui-pane__toolbar", children: [
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            label: `${name} header`,
+            divider: false,
+            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 ${brand.title} catalog`, children: /* @__PURE__ */ jsx(LucideIcon, { icon: PanelLeftOpen, name: "panel-left-open" }) }) }) : /* @__PURE__ */ jsx(Fragment, {}),
+              /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", className: "kui-catalog__title", children: /* @__PURE__ */ jsx("h2", { children: name }) })
+            ] }),
+            trailing: /* @__PURE__ */ jsxs("div", { class: "kui-catalog__header-actions", children: [
+              headerActions,
+              theme ? /* @__PURE__ */ jsx(ToolbarControlGroup, { className: "kui-catalog__settings", 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" })
+              ] }) }) : /* @__PURE__ */ jsx(Fragment, {})
+            ] })
+          }
+        ),
+        selected?.description ? /* @__PURE__ */ jsx("p", { class: "kui-catalog__description kui-content-item", children: selected.description }) : /* @__PURE__ */ jsx(Fragment, {})
+      ] }),
+      /* @__PURE__ */ jsx("section", { class: "kui-catalog__stage kui-pane__content", "aria-label": `${name} preview`, children: /* @__PURE__ */ jsx("div", { class: "kui-catalog__canvas", children: content }) }),
+      /* @__PURE__ */ jsxs("footer", { class: "kui-catalog__footer kui-pane__footer", children: [
+        status ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__status", children: status }) : /* @__PURE__ */ jsx(Fragment, {}),
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            label: `${name} resources`,
+            divider: false,
+            leading: resources.length > 0 ? /* @__PURE__ */ jsx("nav", { class: "kui-catalog__resources", "aria-label": `${name} resources`, children: /* @__PURE__ */ jsx(ToolbarControlGroup, { className: "kui-catalog__resource-group", label: `${name} resources`, children: resources.map((resource) => /* @__PURE__ */ jsxs("a", { class: "kui-catalog__resource", href: resource.href, target: "_blank", rel: "noopener noreferrer", "aria-label": `${name}: ${resource.label} (opens in new tab)`, children: [
+              /* @__PURE__ */ jsx(LucideIcon, { icon: ExternalLink, name: "external-link" }),
+              /* @__PURE__ */ jsx("span", { children: resource.label }),
+              resource.detail ? /* @__PURE__ */ jsx("code", { children: resource.detail }) : /* @__PURE__ */ jsx(Fragment, {})
+            ] })) }) }) : /* @__PURE__ */ jsx(Fragment, {}),
+            trailing: related.length > 0 ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__related", "data-catalog-related": true, children: /* @__PURE__ */ jsx(ToolbarControlGroup, { single: true, className: "kui-catalog__related-group", label: "Related entries", children: /* @__PURE__ */ jsxs("wa-dropdown", { class: "kui-catalog__related-menu", placement: "top-end", "data-key": `kui-catalog-related-${active}`, "data-morph-skip-children": true, children: [
+              /* @__PURE__ */ jsx("wa-button", { slot: "trigger", appearance: "plain", "with-caret": true, "aria-label": "Related entries", children: /* @__PURE__ */ jsx(LucideIcon, { icon: Waypoints, name: "waypoints" }) }),
+              relatedMenuItems(related, selectAction)
+            ] }) }) }) : /* @__PURE__ */ jsx(Fragment, {})
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function CatalogExample({ label, note, align = "none", className = "", children }) {
+  return /* @__PURE__ */ jsxs("section", { class: `kui-catalog-example ${className}`.trim(), "data-catalog-example": true, "data-align": align, children: [
+    label !== void 0 ? /* @__PURE__ */ jsx(ListHeader, { label }) : /* @__PURE__ */ jsx(Fragment, {}),
+    note !== void 0 ? /* @__PURE__ */ jsx("p", { class: "kui-catalog-example__note", children: note }) : /* @__PURE__ */ jsx(Fragment, {}),
+    children
+  ] });
+}
+function CatalogExampleStack({ label, className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { class: `kui-catalog-example-stack ${className}`.trim(), "data-catalog-example-stack": true, "aria-label": label, children });
+}
+
+export { Catalog, CatalogExample, CatalogExampleStack };
+
+//# sourceMappingURL=catalog.js.map

package/dist/catalog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/catalog.tsx"],"names":[],"mappings":"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","file":"catalog.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ExternalLink, Moon, PanelLeftClose, PanelLeftOpen, Sun, Waypoints } from 'lucide';\n\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** A reference link shown in the detail footer for the active entry. */\nexport interface CatalogResource {\n  label: string;\n  href: string;\n  /** Optional monospace detail (e.g. a file path) shown after the label. */\n  detail?: string;\n}\n\n/** A related entry offered in the detail footer's \"Related entries\" popup menu. */\nexport interface CatalogRelated {\n  id: string;\n  name: string;\n  /** Group heading in the menu, e.g. \"Uses\" / \"Used by\". */\n  group: string;\n}\n\nexport interface CatalogEntry {\n  id: string;\n  name: string;\n  description?: string;\n  resources?: readonly CatalogResource[];\n  related?: readonly CatalogRelated[];\n}\n\nexport interface CatalogSection {\n  category: string;\n  entries: readonly CatalogEntry[];\n}\n\n/**\n * A secondary group of sections shown below the primary sidebar sections with a\n * quieter \"ecosystem\" treatment (e.g. third-party components). Optionally\n * collapsible — the app owns `expanded` and toggles it from `wireCatalog`'s\n * `onToggleSecondary`.\n */\nexport interface CatalogSecondaryGroup {\n  label: string;\n  sections: readonly CatalogSection[];\n  /** When true, the group's label is a disclosure toggle controlling `expanded`. */\n  collapsible?: boolean;\n  /** Whether the group is expanded (controlled). Ignored unless `collapsible`. */\n  expanded?: boolean;\n}\n\nexport interface CatalogBrand {\n  title: string;\n  subtitle?: string;\n  /** Logo image URL (rendered decorative). Omit for a text-only brand. */\n  logoUrl?: string;\n}\n\nexport interface CatalogProps {\n  brand: CatalogBrand;\n  sections: readonly CatalogSection[];\n  /** The controlled active entry id — the app owns this signal. */\n  active: string;\n  /** The rendered preview for the active entry; the app computes it from `active`. */\n  content: SafeHtml;\n  /** Whether the sidebar is collapsed (controlled). */\n  collapsed?: boolean;\n  /** Current theme; when set, a theme toggle is shown that switches to the opposite. Omit to hide it. */\n  theme?: 'light' | 'dark';\n  /** Extra header controls placed before the theme toggle (each a `ToolbarControlGroup`). */\n  headerActions?: SafeHtml;\n  /** A secondary \"ecosystem\" group of sections below the primary category groups. */\n  secondarySections?: CatalogSecondaryGroup;\n  /** Extra sidebar content below the category groups (and the secondary group). */\n  sidebarFooter?: SafeHtml;\n  /** Status line content shown at the start of the detail footer. */\n  status?: SafeHtml;\n  selectAction?: string;\n  toggleSidebarAction?: string;\n  toggleThemeAction?: string;\n  /** Action fired by the secondary group's disclosure toggle (when collapsible). */\n  toggleSecondaryAction?: string;\n  className?: string;\n}\n\nfunction findEntry(sections: readonly CatalogSection[], id: string): CatalogEntry | undefined {\n  for (const section of sections) {\n    for (const entry of section.entries) if (entry.id === id) return entry;\n  }\n  return undefined;\n}\n\n/**\n * Render the related entries as a `wa-dropdown` popup-menu body: a heading per\n * `group` (first-seen order) followed by that group's entries, each a navigable\n * item carrying the same `selectAction` the sidebar items use, so a chosen entry\n * routes through the one `wireCatalog` select handler.\n */\nfunction relatedMenuItems(related: readonly CatalogRelated[], selectAction: string): SafeHtml[] {\n  const groups: string[] = [];\n  for (const entry of related) if (!groups.includes(entry.group)) groups.push(entry.group);\n  const nodes: SafeHtml[] = [];\n  groups.forEach((group, index) => {\n    if (index > 0) nodes.push(<wa-divider></wa-divider>);\n    nodes.push(<small class=\"kui-catalog__related-heading\">{group}</small>);\n    for (const entry of related) {\n      if (entry.group === group) nodes.push(<wa-dropdown-item data-action={selectAction} data-item-id={entry.id}>{entry.name}</wa-dropdown-item>);\n    }\n  });\n  return nodes;\n}\n\n/**\n * A reusable component-catalog shell: a collapsible category sidebar, a titled\n * detail stage that renders the active entry's preview, and a footer with\n * reference links and a related-entry popup menu. Built entirely from public\n * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,\n * `collapsed`, and `theme` signals and computes `content` from `active` in its own\n * render; wire the sidebar/collapse/theme actions with `wireCatalog`.\n */\nexport function Catalog({\n  brand,\n  sections,\n  active,\n  content,\n  collapsed = false,\n  theme,\n  headerActions,\n  secondarySections,\n  sidebarFooter,\n  status,\n  selectAction = 'catalog-select',\n  toggleSidebarAction = 'catalog-toggle-sidebar',\n  toggleThemeAction = 'catalog-toggle-theme',\n  toggleSecondaryAction = 'catalog-toggle-secondary',\n  className = '',\n}: CatalogProps) {\n  const selected = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : undefined);\n  const name = selected?.name ?? '';\n  const nextTheme = theme === 'dark' ? 'light' : 'dark';\n  const resources = selected?.resources ?? [];\n  const related = selected?.related ?? [];\n\n  return <main class={`kui-catalog ${className}`.trim()} data-component=\"catalog\" data-sidebar-collapsed={String(collapsed)}>\n    <aside class=\"kui-catalog__sidebar kui-pane\" aria-label={`${brand.title} catalog`}>\n      <header class=\"kui-catalog__brand kui-pane__toolbar\">\n        <Toolbar\n          label={`${brand.title} catalog header`}\n          divider={false}\n          leading={<ToolbarControlGroup appearance=\"borderless\" className=\"kui-catalog__identity\">{brand.logoUrl ? <img class=\"kui-catalog__mark\" src={brand.logoUrl} alt=\"\" /> : <></>}<h1>{brand.title}</h1></ToolbarControlGroup>}\n          trailing={<ToolbarControlGroup appearance=\"borderless\" single><button type=\"button\" data-action={toggleSidebarAction} aria-label={`Collapse ${brand.title} catalog`}><LucideIcon icon={PanelLeftClose} name=\"panel-left-close\" /></button></ToolbarControlGroup>}\n        />\n        {brand.subtitle ? <p class=\"kui-catalog__subtitle\">{brand.subtitle}</p> : <></>}\n      </header>\n      <nav class=\"kui-pane__content kui-content\" aria-label={`${brand.title} components`}>\n        {sections.map((section) => <section class=\"kui-catalog__group\">\n          <ListHeader label={section.category} />\n          <div class=\"kui-catalog__items\">\n            {section.entries.map((entry) => <ListItem action={selectAction} itemId={entry.id} label={entry.name} selected={active === entry.id} title={entry.description} multiline />)}\n          </div>\n        </section>)}\n        {secondarySections ? <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n          <ListHeader label={secondarySections.label} toggle={secondarySections.collapsible} expanded={secondarySections.collapsible ? Boolean(secondarySections.expanded) : undefined} action={secondarySections.collapsible ? toggleSecondaryAction : undefined} />\n          {!secondarySections.collapsible || secondarySections.expanded\n            ? <div class=\"kui-catalog__secondary\" data-catalog-secondary>\n              {secondarySections.sections.map((section) => <section class=\"kui-catalog__secondary-group\">\n                <h3 class=\"kui-catalog__secondary-heading\">{section.category}</h3>\n                <div class=\"kui-catalog__items\">\n                  {section.entries.map((entry) => <ListItem action={selectAction} itemId={entry.id} label={entry.name} selected={active === entry.id} title={entry.description} multiline />)}\n                </div>\n              </section>)}\n            </div>\n            : <></>}\n        </section> : <></>}\n        {sidebarFooter}\n      </nav>\n    </aside>\n    <article class=\"kui-catalog__detail kui-pane\">\n      <header class=\"kui-catalog__header kui-pane__toolbar\">\n        <Toolbar\n          label={`${name} header`}\n          divider={false}\n          leading={<>{collapsed ? <ToolbarControlGroup appearance=\"borderless\" single><button type=\"button\" data-action={toggleSidebarAction} aria-label={`Expand ${brand.title} catalog`}><LucideIcon icon={PanelLeftOpen} name=\"panel-left-open\" /></button></ToolbarControlGroup> : <></>}<ToolbarControlGroup appearance=\"borderless\" className=\"kui-catalog__title\"><h2>{name}</h2></ToolbarControlGroup></>}\n          trailing={<div class=\"kui-catalog__header-actions\">{headerActions}{theme ? <ToolbarControlGroup className=\"kui-catalog__settings\" label=\"Catalog display\"><button type=\"button\" data-action={toggleThemeAction} aria-label={`Use ${nextTheme} theme`} data-theme-preview={theme}>{nextTheme === 'dark' ? <LucideIcon icon={Moon} name=\"moon\" /> : <LucideIcon icon={Sun} name=\"sun\" />}<span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span></button></ToolbarControlGroup> : <></>}</div>}\n        />\n        {selected?.description ? <p class=\"kui-catalog__description kui-content-item\">{selected.description}</p> : <></>}\n      </header>\n      <section class=\"kui-catalog__stage kui-pane__content\" aria-label={`${name} preview`}>\n        <div class=\"kui-catalog__canvas\">{content}</div>\n      </section>\n      <footer class=\"kui-catalog__footer kui-pane__footer\">\n        {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n        <Toolbar\n          label={`${name} resources`}\n          divider={false}\n          leading={resources.length > 0\n            ? <nav class=\"kui-catalog__resources\" aria-label={`${name} resources`}><ToolbarControlGroup className=\"kui-catalog__resource-group\" label={`${name} resources`}>{resources.map((resource) => <a class=\"kui-catalog__resource\" href={resource.href} target=\"_blank\" rel=\"noopener noreferrer\" aria-label={`${name}: ${resource.label} (opens in new tab)`}><LucideIcon icon={ExternalLink} name=\"external-link\" /><span>{resource.label}</span>{resource.detail ? <code>{resource.detail}</code> : <></>}</a>)}</ToolbarControlGroup></nav>\n            : <></>}\n          trailing={related.length > 0\n            ? <div class=\"kui-catalog__related\" data-catalog-related><ToolbarControlGroup single className=\"kui-catalog__related-group\" label=\"Related entries\"><wa-dropdown class=\"kui-catalog__related-menu\" placement=\"top-end\" data-key={`kui-catalog-related-${active}`} data-morph-skip-children><wa-button slot=\"trigger\" appearance=\"plain\" with-caret aria-label=\"Related entries\"><LucideIcon icon={Waypoints} name=\"waypoints\" /></wa-button>{relatedMenuItems(related, selectAction)}</wa-dropdown></ToolbarControlGroup></div>\n            : <></>}\n        />\n      </footer>\n    </article>\n  </main>;\n}\n\n/**\n * How a {@link CatalogExample}'s content aligns its visible left edge with the\n * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):\n * - `'glyph'` — a bare glyph/text specimen with no inline geometry insets the full 16px.\n * - `'inline-control'` — a control that already carries ~8px of its own inline padding insets 8px so its content lands on the same line.\n * - `'none'` — a content-item / composition that owns its geometry and already aligns; no inset (default).\n */\nexport type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';\n\nexport interface CatalogExampleProps {\n  /** The example's label, shown as a `ListHeader` above the specimen. Omit for a bare specimen. */\n  label?: string;\n  /** Optional explanatory note between the label and the specimen. */\n  note?: SafeHtml | string;\n  /** Alignment inset for the specimen — see {@link CatalogExampleAlign}. Default `'none'`. */\n  align?: CatalogExampleAlign;\n  className?: string;\n  children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * One labeled example in a catalog preview: a `ListHeader` label, an optional\n * note, and the specimen. `align` insets the specimen so its visible left edge\n * lines up with the label text, encoding the catalog's alignment rules as a\n * first-class prop instead of per-demo CSS. The inset is published as the\n * `--kui-catalog-example-align` custom property so a debug overlay can exclude it\n * from a specimen's measured margin.\n */\nexport function CatalogExample({ label, note, align = 'none', className = '', children }: CatalogExampleProps) {\n  return <section class={`kui-catalog-example ${className}`.trim()} data-catalog-example data-align={align}>\n    {label !== undefined ? <ListHeader label={label} /> : <></>}\n    {note !== undefined ? <p class=\"kui-catalog-example__note\">{note}</p> : <></>}\n    {children}\n  </section>;\n}\n\nexport interface CatalogExampleStackProps {\n  /** Accessible label for the stack region. */\n  label?: string;\n  className?: string;\n  children?: SafeHtml | readonly SafeHtml[];\n}\n\n/** A vertically-stacked group of {@link CatalogExample}s with the catalog's example rhythm. */\nexport function CatalogExampleStack({ label, className = '', children }: CatalogExampleStackProps) {\n  return <div class={`kui-catalog-example-stack ${className}`.trim()} data-catalog-example-stack aria-label={label}>{children}</div>;\n}\n"]}

package/dist/chunk-2Z5TWHKQ.js

@@ -0,0 +1,34 @@
+import { filterDataAttributes } from './chunk-7BR3DO2A.js';
+import { Skeleton } from './chunk-B24C4A6T.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-tab-id",
+  "data-selected",
+  "data-tab-dragging",
+  "data-tab-drop-position"
+]);
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.25", "stroke-linecap": "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "m7 7 10 10" }),
+    /* @__PURE__ */ jsx("path", { d: "M17 7 7 17" })
+  ] });
+}
+function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, closeIcon, selectAction = "select-tab", closeAction = "close-tab", className = "", placeholder = false, rootAttributes = {} }) {
+  const keyshortcuts = [closable ? "Delete Backspace" : "", draggable ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : ""].filter(Boolean).join(" ");
+  const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);
+  return /* @__PURE__ */ jsxs("div", { ...extensionAttributes, class: `kui-app-tab ${className}`.trim(), "data-component": "app-tab", "data-tab-id": id, "data-selected": String(selected), "data-placeholder": placeholder ? "true" : void 0, draggable: placeholder ? "false" : draggable ? "true" : "false", "aria-busy": placeholder ? "true" : void 0, children: [
+    closable && /* @__PURE__ */ jsx("button", { type: "button", tabindex: "-1", class: "kui-app-tab__close", "data-action": placeholder ? void 0 : closeAction, "data-tab-id": id, disabled: placeholder || void 0, "aria-label": `Close ${name}`, title: `Close ${name}`, children: /* @__PURE__ */ jsx("span", { class: "kui-app-tab__close-icon", "aria-hidden": "true", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}) }) }),
+    /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-app-tab__select", role: "tab", "aria-selected": String(selected), "aria-keyshortcuts": placeholder ? void 0 : keyshortcuts || void 0, "data-action": placeholder ? void 0 : selectAction, "data-tab-id": id, disabled: placeholder || void 0, tabindex: placeholder ? "-1" : selected ? "0" : "-1", children: [
+      leading,
+      /* @__PURE__ */ jsx("span", { class: "kui-app-tab__name", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "7em" }) : name }),
+      closable || trailing ? /* @__PURE__ */ jsx("span", { class: "kui-app-tab__trailing", children: trailing }) : void 0
+    ] })
+  ] });
+}
+
+export { AppTab };
+
+//# sourceMappingURL=chunk-2Z5TWHKQ.js.map

package/dist/chunk-2Z5TWHKQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-2Z5TWHKQ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n  }\n>;\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  rootAttributes?: AppTabRootAttributes;\n}\n\nfunction CloseIcon() {\n  return <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"><path d=\"m7 7 10 10\"></path><path d=\"M17 7 7 17\"></path></svg>;\n}\n\nexport function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, closeIcon, selectAction = 'select-tab', closeAction = 'close-tab', className = '', placeholder = false, rootAttributes = {} }: AppTabProps) {\n  const keyshortcuts = [closable ? 'Delete Backspace' : '', draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : ''].filter(Boolean).join(' ');\n  const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n  return <div {...extensionAttributes} class={`kui-app-tab ${className}`.trim()} data-component=\"app-tab\" data-tab-id={id} data-selected={String(selected)} data-placeholder={placeholder ? 'true' : undefined} draggable={placeholder ? 'false' : draggable ? 'true' : 'false'} aria-busy={placeholder ? 'true' : undefined}>\n    {closable && <button type=\"button\" tabindex=\"-1\" class=\"kui-app-tab__close\" data-action={placeholder ? undefined : closeAction} data-tab-id={id} disabled={placeholder || undefined} aria-label={`Close ${name}`} title={`Close ${name}`}><span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">{closeIcon ?? <CloseIcon />}</span></button>}\n    <button type=\"button\" class=\"kui-app-tab__select\" role=\"tab\" aria-selected={String(selected)} aria-keyshortcuts={placeholder ? undefined : keyshortcuts || undefined} data-action={placeholder ? undefined : selectAction} data-tab-id={id} disabled={placeholder || undefined} tabindex={placeholder ? '-1' : selected ? '0' : '-1'}>\n      {leading}<span class=\"kui-app-tab__name\">{placeholder ? <Skeleton width=\"7em\" /> : name}</span>{closable || trailing ? <span class=\"kui-app-tab__trailing\">{trailing}</span> : undefined}\n    </button>\n  </div>;\n}\n"]}

package/dist/chunk-37T3VNIZ.js

@@ -0,0 +1,19 @@
+import { Skeleton } from './chunk-B24C4A6T.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+function ValueTableRow({ label, value, icon, className = "", placeholder = false }) {
+  return /* @__PURE__ */ jsxs("div", { class: `kui-value-table__row ${className}`.trim(), "data-has-icon": String(Boolean(icon)), "data-placeholder": placeholder ? "true" : void 0, children: [
+    /* @__PURE__ */ jsxs("dt", { children: [
+      icon && /* @__PURE__ */ jsx("span", { class: "kui-value-table__icon", children: icon }),
+      /* @__PURE__ */ jsx("span", { class: "kui-value-table__label", children: label })
+    ] }),
+    /* @__PURE__ */ jsx("dd", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "10em" }) : value })
+  ] });
+}
+function ValueTable({ label, className = "", children }) {
+  return /* @__PURE__ */ jsx("dl", { class: `kui-value-table ${className}`.trim(), "data-component": "value-table", "aria-label": label, children });
+}
+
+export { ValueTable, ValueTableRow };
+
+//# sourceMappingURL=chunk-37T3VNIZ.js.map

package/dist/chunk-37T3VNIZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/value-table-row.tsx","../src/value-table.tsx"],"names":["jsx"],"mappings":";;;AAaO,SAAS,aAAA,CAAc,EAAE,KAAA,EAAO,KAAA,EAAO,MAAM,SAAA,GAAY,EAAA,EAAI,WAAA,GAAc,KAAA,EAAM,EAAuB;AAC7G,EAAA,4BAAQ,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,GAAG,IAAA,EAAK,EAAG,eAAA,EAAe,MAAA,CAAO,QAAQ,IAAI,CAAC,GAAG,kBAAA,EAAkB,WAAA,GAAc,SAAS,MAAA,EAC5I,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBACnD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM;AAAA,KAAA,EAC9C,CAAA;AAAA,oBACA,GAAA,CAAC,QAAI,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAM,MAAA,EAAO,IAAK,KAAA,EAAM;AAAA,GAAA,EACvD,CAAA;AACF;ACXO,SAAS,WAAW,EAAE,KAAA,EAAO,SAAA,GAAY,EAAA,EAAI,UAAS,EAAoB;AAC/E,EAAA,uBAAOA,GAAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,aAAA,EAAc,YAAA,EAAY,OAAQ,QAAA,EAAS,CAAA;AACrH","file":"chunk-37T3VNIZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport interface ValueTableRowProps {\n  label: string | SafeHtml;\n  value: string | SafeHtml;\n  icon?: SafeHtml;\n  className?: string;\n  /** Render the value as an unanimated loading skeleton, keeping the field label. */\n  placeholder?: boolean;\n}\n\nexport function ValueTableRow({ label, value, icon, className = '', placeholder = false }: ValueTableRowProps) {\n  return <div class={`kui-value-table__row ${className}`.trim()} data-has-icon={String(Boolean(icon))} data-placeholder={placeholder ? 'true' : undefined}>\n    <dt>\n      {icon && <span class=\"kui-value-table__icon\">{icon}</span>}\n      <span class=\"kui-value-table__label\">{label}</span>\n    </dt>\n    <dd>{placeholder ? <Skeleton width=\"10em\" /> : value}</dd>\n  </div>;\n}\n","import type { SafeHtml } from 'kerfjs';\n\nexport { ValueTableRow, type ValueTableRowProps } from './value-table-row.js';\n\nexport interface ValueTableProps {\n  label: string;\n  className?: string;\n  children: SafeHtml | readonly SafeHtml[];\n}\n\nexport function ValueTable({ label, className = '', children }: ValueTableProps) {\n  return <dl class={`kui-value-table ${className}`.trim()} data-component=\"value-table\" aria-label={label}>{children}</dl>;\n}\n"]}

package/dist/chunk-56RJXPHG.js

@@ -0,0 +1,43 @@
+import { LucideIcon } from './chunk-W2FK7ZNY.js';
+import { ChevronRight } from 'lucide';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var directionRotations = {
+  right: 0,
+  down: 90,
+  left: 180,
+  up: 270
+};
+function rotationForState(open, openDirection, closedDirection) {
+  const closedRotation = directionRotations[closedDirection];
+  if (!open) return closedRotation;
+  const openRotation = directionRotations[openDirection];
+  const shortestDelta = (openRotation - closedRotation + 540) % 360 - 180;
+  return closedRotation + shortestDelta;
+}
+function DisclosureArrow({
+  open,
+  openDirection = "down",
+  closedDirection = "right",
+  icon,
+  className = ""
+}) {
+  const direction = open ? openDirection : closedDirection;
+  const rotation = rotationForState(open, openDirection, closedDirection);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: `kui-disclosure-arrow ${className}`.trim(),
+      style: `--_kui-disclosure-arrow-rotation:${rotation}deg`,
+      "data-component": "disclosure-arrow",
+      "data-open": String(open),
+      "data-direction": direction,
+      "aria-hidden": "true",
+      children: icon ?? /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronRight, name: "chevron-right" })
+    }
+  );
+}
+
+export { DisclosureArrow };
+
+//# sourceMappingURL=chunk-56RJXPHG.js.map

package/dist/chunk-56RJXPHG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/disclosure-arrow.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,kBAAA,GAA0D;AAAA,EAC9D,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,GAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,gBAAA,CACP,IAAA,EACA,aAAA,EACA,eAAA,EACA;AACA,EAAA,MAAM,cAAA,GAAiB,mBAAmB,eAAe,CAAA;AACzD,EAAA,IAAI,CAAC,MAAM,OAAO,cAAA;AAElB,EAAA,MAAM,YAAA,GAAe,mBAAmB,aAAa,CAAA;AACrD,EAAA,MAAM,aAAA,GAAA,CAAiB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAM,GAAA;AACpE,EAAA,OAAO,cAAA,GAAiB,aAAA;AAC1B;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,eAAA,GAAkB,OAAA;AAAA,EAClB,IAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,OAAO,aAAA,GAAgB,eAAA;AACzC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,IAAA,EAAM,aAAA,EAAe,eAAe,CAAA;AACtE,EAAA,uBAAO,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACN,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,KAAA,EAAO,oCAAoC,QAAQ,CAAA,GAAA,CAAA;AAAA,MACnD,gBAAA,EAAe,kBAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,gBAAA,EAAgB,SAAA;AAAA,MAChB,aAAA,EAAY,MAAA;AAAA,MACZ,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAAG;AACpE","file":"chunk-56RJXPHG.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronRight } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\n\nexport type DisclosureDirection = 'up' | 'down' | 'left' | 'right';\n\nexport interface DisclosureArrowProps {\n  open: boolean;\n  openDirection?: DisclosureDirection;\n  closedDirection?: DisclosureDirection;\n  /** Replacement icons should use right as their unrotated orientation. */\n  icon?: SafeHtml;\n  className?: string;\n}\n\nconst directionRotations: Record<DisclosureDirection, number> = {\n  right: 0,\n  down: 90,\n  left: 180,\n  up: 270,\n};\n\nfunction rotationForState(\n  open: boolean,\n  openDirection: DisclosureDirection,\n  closedDirection: DisclosureDirection,\n) {\n  const closedRotation = directionRotations[closedDirection];\n  if (!open) return closedRotation;\n\n  const openRotation = directionRotations[openDirection];\n  const shortestDelta = (openRotation - closedRotation + 540) % 360 - 180;\n  return closedRotation + shortestDelta;\n}\n\nexport function DisclosureArrow({\n  open,\n  openDirection = 'down',\n  closedDirection = 'right',\n  icon,\n  className = '',\n}: DisclosureArrowProps) {\n  const direction = open ? openDirection : closedDirection;\n  const rotation = rotationForState(open, openDirection, closedDirection);\n  return <span\n    class={`kui-disclosure-arrow ${className}`.trim()}\n    style={`--_kui-disclosure-arrow-rotation:${rotation}deg`}\n    data-component=\"disclosure-arrow\"\n    data-open={String(open)}\n    data-direction={direction}\n    aria-hidden=\"true\"\n  >{icon ?? <LucideIcon icon={ChevronRight} name=\"chevron-right\" />}</span>;\n}\n"]}

package/dist/chunk-7BR3DO2A.js

@@ -0,0 +1,31 @@
+// src/extension-attributes.ts
+var DATA_ATTRIBUTE_NAME = /^data-[a-z0-9_.:-]+$/;
+var POPOVER_TARGET_ACTIONS = /* @__PURE__ */ new Set(["toggle", "show", "hide"]);
+var ARIA_HASPOPUP_VALUES = /* @__PURE__ */ new Set(["dialog", "menu", "listbox", "tree", "grid", "true"]);
+function filterDataAttributes(attributes, protectedNames) {
+  const filtered = {};
+  for (const [name, value] of Object.entries(attributes)) {
+    const normalizedName = name.toLowerCase();
+    if (typeof value === "string" && DATA_ATTRIBUTE_NAME.test(normalizedName) && !protectedNames.has(normalizedName)) {
+      filtered[normalizedName] = value;
+    }
+  }
+  return filtered;
+}
+function filterControlAttributes(attributes, protectedDataNames) {
+  const source = attributes;
+  const filtered = filterDataAttributes(attributes, protectedDataNames);
+  if (typeof source.popoverTarget === "string") filtered.popoverTarget = source.popoverTarget;
+  if (POPOVER_TARGET_ACTIONS.has(source.popoverTargetAction)) {
+    filtered.popoverTargetAction = source.popoverTargetAction;
+  }
+  if (typeof source["aria-controls"] === "string") filtered["aria-controls"] = source["aria-controls"];
+  if (ARIA_HASPOPUP_VALUES.has(source["aria-haspopup"])) {
+    filtered["aria-haspopup"] = source["aria-haspopup"];
+  }
+  return filtered;
+}
+
+export { filterControlAttributes, filterDataAttributes };
+
+//# sourceMappingURL=chunk-7BR3DO2A.js.map

package/dist/chunk-7BR3DO2A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/extension-attributes.ts"],"names":[],"mappings":";AAEA,IAAM,mBAAA,GAAsB,sBAAA;AAC5B,IAAM,yCAAyB,IAAI,GAAA,CAAI,CAAC,QAAA,EAAU,MAAA,EAAQ,MAAM,CAAC,CAAA;AACjE,IAAM,oBAAA,mBAAuB,IAAI,GAAA,CAAI,CAAC,QAAA,EAAU,QAAQ,SAAA,EAAW,MAAA,EAAQ,MAAA,EAAQ,MAAM,CAAC,CAAA;AAEnF,SAAS,oBAAA,CACd,YACA,cAAA,EACwB;AACxB,EAAA,MAAM,WAAmC,EAAC;AAE1C,EAAA,KAAA,MAAW,CAAC,IAAA,EAAM,KAAK,KAAK,MAAA,CAAO,OAAA,CAAQ,UAA0B,CAAA,EAAG;AACtE,IAAA,MAAM,cAAA,GAAiB,KAAK,WAAA,EAAY;AACxC,IAAA,IACE,OAAO,KAAA,KAAU,QAAA,IACd,mBAAA,CAAoB,IAAA,CAAK,cAAc,CAAA,IACvC,CAAC,cAAA,CAAe,GAAA,CAAI,cAAc,CAAA,EACrC;AACA,MAAA,QAAA,CAAS,cAAc,CAAA,GAAI,KAAA;AAAA,IAC7B;AAAA,EACF;AAEA,EAAA,OAAO,QAAA;AACT;AAEO,SAAS,uBAAA,CACd,YACA,kBAAA,EACwB;AACxB,EAAA,MAAM,MAAA,GAAS,UAAA;AACf,EAAA,MAAM,QAAA,GAAW,oBAAA,CAAqB,UAAA,EAAY,kBAAkB,CAAA;AAEpE,EAAA,IAAI,OAAO,MAAA,CAAO,aAAA,KAAkB,QAAA,EAAU,QAAA,CAAS,gBAAgB,MAAA,CAAO,aAAA;AAC9E,EAAA,IAAI,sBAAA,CAAuB,GAAA,CAAI,MAAA,CAAO,mBAA6B,CAAA,EAAG;AACpE,IAAA,QAAA,CAAS,sBAAsB,MAAA,CAAO,mBAAA;AAAA,EACxC;AACA,EAAA,IAAI,OAAO,OAAO,eAAe,CAAA,KAAM,UAAU,QAAA,CAAS,eAAe,CAAA,GAAI,MAAA,CAAO,eAAe,CAAA;AACnG,EAAA,IAAI,oBAAA,CAAqB,GAAA,CAAI,MAAA,CAAO,eAAe,CAAW,CAAA,EAAG;AAC/D,IAAA,QAAA,CAAS,eAAe,CAAA,GAAI,MAAA,CAAO,eAAe,CAAA;AAAA,EACpD;AAEA,EAAA,OAAO,QAAA;AACT","file":"chunk-7BR3DO2A.js","sourcesContent":["type AttributeBag = Readonly<Record<string, unknown>>;\n\nconst DATA_ATTRIBUTE_NAME = /^data-[a-z0-9_.:-]+$/;\nconst POPOVER_TARGET_ACTIONS = new Set(['toggle', 'show', 'hide']);\nconst ARIA_HASPOPUP_VALUES = new Set(['dialog', 'menu', 'listbox', 'tree', 'grid', 'true']);\n\nexport function filterDataAttributes(\n  attributes: object,\n  protectedNames: ReadonlySet<string>,\n): Record<string, string> {\n  const filtered: Record<string, string> = {};\n\n  for (const [name, value] of Object.entries(attributes as AttributeBag)) {\n    const normalizedName = name.toLowerCase();\n    if (\n      typeof value === 'string'\n      && DATA_ATTRIBUTE_NAME.test(normalizedName)\n      && !protectedNames.has(normalizedName)\n    ) {\n      filtered[normalizedName] = value;\n    }\n  }\n\n  return filtered;\n}\n\nexport function filterControlAttributes(\n  attributes: object,\n  protectedDataNames: ReadonlySet<string>,\n): Record<string, string> {\n  const source = attributes as AttributeBag;\n  const filtered = filterDataAttributes(attributes, protectedDataNames);\n\n  if (typeof source.popoverTarget === 'string') filtered.popoverTarget = source.popoverTarget;\n  if (POPOVER_TARGET_ACTIONS.has(source.popoverTargetAction as string)) {\n    filtered.popoverTargetAction = source.popoverTargetAction as string;\n  }\n  if (typeof source['aria-controls'] === 'string') filtered['aria-controls'] = source['aria-controls'];\n  if (ARIA_HASPOPUP_VALUES.has(source['aria-haspopup'] as string)) {\n    filtered['aria-haspopup'] = source['aria-haspopup'] as string;\n  }\n\n  return filtered;\n}\n"]}

package/dist/chunk-7JB7VPRI.js

@@ -0,0 +1,34 @@
+import { filterDataAttributes, filterControlAttributes } from './chunk-7BR3DO2A.js';
+import { Skeleton } from './chunk-B24C4A6T.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-item-id",
+  "data-has-icon",
+  "data-multiline",
+  "data-state",
+  "data-selected",
+  "data-pressed"
+]);
+var PROTECTED_TRAILING_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-item-id"
+]);
+function ListActionRow({ label, icon, action, itemId, selected = false, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, placeholder = false, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled = false, trailingActionTitle, className = "", style, rootAttributes = {}, trailingActionAttributes = {} }) {
+  const extensionRootAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);
+  const extensionTrailingAttributes = filterControlAttributes(trailingActionAttributes, PROTECTED_TRAILING_DATA_ATTRIBUTES);
+  return /* @__PURE__ */ jsxs("div", { ...extensionRootAttributes, class: `kui-list-action-row ${className}`.trim(), style, "data-component": "list-action-row", "data-item-id": itemId, "data-has-icon": String(Boolean(icon)), "data-multiline": multiline ? "true" : void 0, "data-state": state, "data-selected": String(selected), "data-pressed": pressed === void 0 ? void 0 : String(pressed), "data-placeholder": placeholder ? "true" : void 0, "aria-busy": placeholder ? "true" : void 0, children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-list-action-row__primary", title: placeholder ? void 0 : title, disabled: disabled || placeholder, tabindex: placeholder ? -1 : tabIndex, "data-action": placeholder ? void 0 : action, "data-item-id": itemId, "aria-label": accessibleLabel, "aria-current": selected ? "page" : void 0, "aria-pressed": pressed === void 0 ? void 0 : String(pressed), children: [
+      icon && /* @__PURE__ */ jsx("span", { class: "kui-list-action-row__icon", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "1em", height: "1em" }) : icon }),
+      /* @__PURE__ */ jsx("span", { class: "kui-list-action-row__label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "9em" }) : label })
+    ] }),
+    /* @__PURE__ */ jsx("button", { ...extensionTrailingAttributes, type: "button", class: "kui-list-action-row__trailing-action", "data-action": placeholder ? void 0 : trailingAction, "data-item-id": itemId, "aria-label": trailingActionLabel, title: trailingActionTitle ?? trailingActionLabel, disabled: trailingActionDisabled || placeholder || void 0, children: trailingActionIcon })
+  ] });
+}
+
+export { ListActionRow };
+
+//# sourceMappingURL=chunk-7JB7VPRI.js.map

package/dist/chunk-7JB7VPRI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-7JB7VPRI.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterControlAttributes, filterDataAttributes } from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-multiline',\n  'data-state',\n  'data-selected',\n  'data-pressed',\n]);\nconst PROTECTED_TRAILING_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n]);\n\ntype ListActionRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-multiline'?: never;\n    'data-state'?: never;\n    'data-selected'?: never;\n    'data-pressed'?: never;\n  }\n>;\n\ntype ListActionRowTrailingAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\nexport interface ListActionRowProps {\n  /** Visible dormant content for the primary button. Must not contain interactive descendants. */\n  label: string | SafeHtml;\n  /** Decorative dormant content for the primary button. Must not contain interactive descendants. */\n  icon?: SafeHtml;\n  action: string;\n  itemId?: string;\n  selected?: boolean;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render as an unanimated loading skeleton, disabling both actions. */\n  placeholder?: boolean;\n  trailingAction: string;\n  trailingActionLabel: string;\n  /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */\n  trailingActionIcon: SafeHtml;\n  trailingActionDisabled?: boolean;\n  trailingActionTitle?: string;\n  className?: string;\n  style?: string;\n  rootAttributes?: ListActionRowRootAttributes;\n  trailingActionAttributes?: ListActionRowTrailingAttributes;\n}\n\nexport function ListActionRow({ label, icon, action, itemId, selected = false, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, placeholder = false, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled = false, trailingActionTitle, className = '', style, rootAttributes = {}, trailingActionAttributes = {} }: ListActionRowProps) {\n  const extensionRootAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n  const extensionTrailingAttributes = filterControlAttributes(trailingActionAttributes, PROTECTED_TRAILING_DATA_ATTRIBUTES);\n\n  return <div {...extensionRootAttributes} class={`kui-list-action-row ${className}`.trim()} style={style} data-component=\"list-action-row\" data-item-id={itemId} data-has-icon={String(Boolean(icon))} data-multiline={multiline ? 'true' : undefined} data-state={state} data-selected={String(selected)} data-pressed={pressed === undefined ? undefined : String(pressed)} data-placeholder={placeholder ? 'true' : undefined} aria-busy={placeholder ? 'true' : undefined}>\n    <button type=\"button\" class=\"kui-list-action-row__primary\" title={placeholder ? undefined : title} disabled={disabled || placeholder} tabindex={placeholder ? -1 : tabIndex} data-action={placeholder ? undefined : action} data-item-id={itemId} aria-label={accessibleLabel} aria-current={selected ? 'page' : undefined} aria-pressed={pressed === undefined ? undefined : String(pressed)}>\n      {icon && <span class=\"kui-list-action-row__icon\">{placeholder ? <Skeleton width=\"1em\" height=\"1em\" /> : icon}</span>}\n      <span class=\"kui-list-action-row__label\">{placeholder ? <Skeleton width=\"9em\" /> : label}</span>\n    </button>\n    <button {...extensionTrailingAttributes} type=\"button\" class=\"kui-list-action-row__trailing-action\" data-action={placeholder ? undefined : trailingAction} data-item-id={itemId} aria-label={trailingActionLabel} title={trailingActionTitle ?? trailingActionLabel} disabled={trailingActionDisabled || placeholder || undefined}>{trailingActionIcon}</button>\n  </div>;\n}\n"]}

package/dist/chunk-7LDCTU7D.js

@@ -0,0 +1,134 @@
+import { LucideIcon } from './chunk-W2FK7ZNY.js';
+import { Search, X } from 'lucide';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+function orderedParts(query, tokens) {
+  const ordered = tokens.map((token, index) => ({ token, index, offset: Math.max(0, Math.min(query.length, token.offset ?? query.length)) })).sort((left, right) => left.offset - right.offset || left.index - right.index);
+  const parts = [];
+  let cursor = 0;
+  for (const { token, offset } of ordered) {
+    parts.push({ kind: "text", value: query.slice(cursor, offset) });
+    parts.push({ kind: "token", token: { ...token, offset } });
+    cursor = offset;
+  }
+  parts.push({ kind: "text", value: query.slice(cursor) });
+  return parts;
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx(LucideIcon, { icon: X, name: "x" });
+}
+function TokenSearchField({
+  id,
+  label,
+  query = "",
+  tokens = [],
+  placeholder = "Search",
+  tokenPlaceholder = "Add search\u2026",
+  disabled = false,
+  autofocus = false,
+  collapsible = false,
+  expanded = false,
+  expandAction = "expand-token-search",
+  expandLabel,
+  leading,
+  trailing,
+  editAction = "edit-search-token",
+  removeAction = "remove-search-token",
+  clearAction = "clear-token-search",
+  clearLabel = "Clear search",
+  className = "",
+  editorAttributes = {}
+}) {
+  const parts = orderedParts(query, tokens);
+  const key = `${id}:${tokens.map((token) => token.value).join("|")}`;
+  const resolvedExpanded = !collapsible || expanded || query.length > 0 || tokens.length > 0;
+  return /* @__PURE__ */ jsx("div", { class: `kui-token-search ${className}`.trim(), "data-component": "token-search-field", "data-token-search-id": id, "data-disabled": String(disabled), "data-collapsible": String(collapsible), "data-expanded": String(resolvedExpanded), "data-has-trailing": String(Boolean(trailing)), children: !resolvedExpanded ? /* @__PURE__ */ jsx("button", { type: "button", class: "kui-token-search__expand", "data-action": expandAction, "aria-label": expandLabel ?? label, title: expandLabel ?? label, disabled, children: /* @__PURE__ */ jsx(LucideIcon, { icon: Search, name: "search" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { class: "kui-token-search__leading", "aria-hidden": "true", children: leading ?? /* @__PURE__ */ jsx(LucideIcon, { icon: Search, name: "search" }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...editorAttributes,
+        class: "kui-token-search__editor",
+        "data-key": key,
+        "data-morph-skip": true,
+        "data-token-search-editor": id,
+        "data-token-count": tokens.length,
+        "data-placeholder": tokens.length ? tokenPlaceholder : placeholder,
+        role: "searchbox",
+        "aria-label": label,
+        "aria-disabled": disabled ? "true" : void 0,
+        contenteditable: disabled ? "false" : "true",
+        spellcheck: "false",
+        autofocus,
+        children: parts.map((part) => part.kind === "text" ? /* @__PURE__ */ jsx("span", { "data-token-search-text": true, "data-empty": String(part.value.length === 0), children: part.value || (tokens.length ? "\u200B" : "") }) : /* @__PURE__ */ jsxs("span", { class: "kui-token-search__token", contenteditable: "false", "data-component": "token-search-token", "data-token-value": part.token.value, children: [
+          /* @__PURE__ */ jsx("button", { type: "button", class: "kui-token-search__token-edit", "data-action": editAction, "data-token-value": part.token.value, "aria-label": `Edit ${part.token.accessibleLabel ?? part.token.label}`, disabled, children: part.token.label }),
+          /* @__PURE__ */ jsx("button", { type: "button", class: "kui-token-search__token-remove", "data-action": removeAction, "data-token-value": part.token.value, "aria-label": `Remove ${part.token.accessibleLabel ?? part.token.label}`, disabled, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+        ] }))
+      }
+    ),
+    (query || tokens.length > 0) && /* @__PURE__ */ jsx("button", { type: "button", class: "kui-token-search__clear", "data-action": clearAction, "aria-label": clearLabel, title: clearLabel, disabled, children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
+    trailing && /* @__PURE__ */ jsx("span", { class: "kui-token-search__trailing", children: trailing })
+  ] }) });
+}
+function readTokenSearchField(editor, knownTokens = []) {
+  let query = "";
+  const tokens = [];
+  const visit = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      query += (node.textContent ?? "").replaceAll("\xA0", " ").replaceAll("\u200B", "");
+      return;
+    }
+    if (!(node instanceof HTMLElement)) return;
+    if (node.matches('[data-component="token-search-token"]')) {
+      const value = node.dataset.tokenValue;
+      const known = knownTokens.find((token) => token.value === value);
+      if (known) tokens.push({ ...known, offset: query.length });
+      else if (value) tokens.push({ value, label: value, offset: query.length });
+      return;
+    }
+    if (node.tagName === "BR") {
+      query += " ";
+      return;
+    }
+    for (const child of node.childNodes) visit(child);
+  };
+  for (const child of editor.childNodes) visit(child);
+  return { query, tokens };
+}
+function placeTokenSearchCaret(editor, offset) {
+  editor.focus({ preventScroll: true });
+  const selection = globalThis.getSelection();
+  if (!selection) return;
+  const range = document.createRange();
+  if (offset === void 0) {
+    range.selectNodeContents(editor);
+    range.collapse(false);
+  } else {
+    let remaining = Math.max(0, offset);
+    let found = false;
+    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) => node.parentElement?.closest('[data-component="token-search-token"]') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+    });
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      const source = node.textContent ?? "";
+      const length = source.replaceAll("\u200B", "").length;
+      if (remaining <= length) {
+        range.setStart(node, source === "\u200B" ? 0 : Math.min(remaining, source.length));
+        range.collapse(true);
+        found = true;
+        break;
+      }
+      remaining -= length;
+    }
+    if (!found) {
+      range.selectNodeContents(editor);
+      range.collapse(false);
+    }
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField };
+
+//# sourceMappingURL=chunk-7LDCTU7D.js.map

package/dist/chunk-7LDCTU7D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/token-search-field.tsx"],"names":[],"mappings":"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","file":"chunk-7LDCTU7D.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { Search, X } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\n\nexport interface TokenSearchToken {\n  value: string;\n  label: string;\n  offset?: number;\n  accessibleLabel?: string;\n}\n\nexport interface TokenSearchFieldProps {\n  id: string;\n  label: string;\n  query?: string;\n  tokens?: readonly TokenSearchToken[];\n  placeholder?: string;\n  tokenPlaceholder?: string;\n  disabled?: boolean;\n  autofocus?: boolean;\n  /** Allow an empty field to render as one iconic action. */\n  collapsible?: boolean;\n  /** Keep an empty collapsible field open while the application owns focus. */\n  expanded?: boolean;\n  expandAction?: string;\n  expandLabel?: string;\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  editAction?: string;\n  removeAction?: string;\n  clearAction?: string;\n  clearLabel?: string;\n  className?: string;\n  editorAttributes?: Readonly<Record<`data-${string}`, string>>;\n}\n\nexport interface TokenSearchFieldValue {\n  query: string;\n  tokens: TokenSearchToken[];\n}\n\ntype TokenSearchPart =\n  | { kind: 'text'; value: string }\n  | { kind: 'token'; token: TokenSearchToken };\n\nfunction orderedParts(query: string, tokens: readonly TokenSearchToken[]): TokenSearchPart[] {\n  const ordered = tokens\n    .map((token, index) => ({ token, index, offset: Math.max(0, Math.min(query.length, token.offset ?? query.length)) }))\n    .sort((left, right) => left.offset - right.offset || left.index - right.index);\n  const parts: TokenSearchPart[] = [];\n  let cursor = 0;\n  for (const { token, offset } of ordered) {\n    parts.push({ kind: 'text', value: query.slice(cursor, offset) });\n    parts.push({ kind: 'token', token: { ...token, offset } });\n    cursor = offset;\n  }\n  parts.push({ kind: 'text', value: query.slice(cursor) });\n  return parts;\n}\n\nfunction CloseIcon() {\n  return <LucideIcon icon={X} name=\"x\" />;\n}\n\nexport function TokenSearchField({\n  id,\n  label,\n  query = '',\n  tokens = [],\n  placeholder = 'Search',\n  tokenPlaceholder = 'Add search…',\n  disabled = false,\n  autofocus = false,\n  collapsible = false,\n  expanded = false,\n  expandAction = 'expand-token-search',\n  expandLabel,\n  leading,\n  trailing,\n  editAction = 'edit-search-token',\n  removeAction = 'remove-search-token',\n  clearAction = 'clear-token-search',\n  clearLabel = 'Clear search',\n  className = '',\n  editorAttributes = {},\n}: TokenSearchFieldProps) {\n  const parts = orderedParts(query, tokens);\n  const key = `${id}:${tokens.map((token) => token.value).join('|')}`;\n  const resolvedExpanded = !collapsible || expanded || query.length > 0 || tokens.length > 0;\n  return <div class={`kui-token-search ${className}`.trim()} data-component=\"token-search-field\" data-token-search-id={id} data-disabled={String(disabled)} data-collapsible={String(collapsible)} data-expanded={String(resolvedExpanded)} data-has-trailing={String(Boolean(trailing))}>\n    {!resolvedExpanded\n      ? <button type=\"button\" class=\"kui-token-search__expand\" data-action={expandAction} aria-label={expandLabel ?? label} title={expandLabel ?? label} disabled={disabled}><LucideIcon icon={Search} name=\"search\" /></button>\n      : <>\n        <span class=\"kui-token-search__leading\" aria-hidden=\"true\">{leading ?? <LucideIcon icon={Search} name=\"search\" />}</span>\n        <div\n          {...editorAttributes}\n          class=\"kui-token-search__editor\"\n          data-key={key}\n          data-morph-skip\n          data-token-search-editor={id}\n          data-token-count={tokens.length}\n          data-placeholder={tokens.length ? tokenPlaceholder : placeholder}\n          role=\"searchbox\"\n          aria-label={label}\n          aria-disabled={disabled ? 'true' : undefined}\n          contenteditable={disabled ? 'false' : 'true'}\n          spellcheck=\"false\"\n          autofocus={autofocus}\n        >{parts.map((part) => part.kind === 'text'\n          ? <span data-token-search-text data-empty={String(part.value.length === 0)}>{part.value || (tokens.length ? '\\u200b' : '')}</span>\n          : <span class=\"kui-token-search__token\" contenteditable=\"false\" data-component=\"token-search-token\" data-token-value={part.token.value}>\n            <button type=\"button\" class=\"kui-token-search__token-edit\" data-action={editAction} data-token-value={part.token.value} aria-label={`Edit ${part.token.accessibleLabel ?? part.token.label}`} disabled={disabled}>{part.token.label}</button>\n            <button type=\"button\" class=\"kui-token-search__token-remove\" data-action={removeAction} data-token-value={part.token.value} aria-label={`Remove ${part.token.accessibleLabel ?? part.token.label}`} disabled={disabled}><CloseIcon /></button>\n          </span>)}</div>\n        {(query || tokens.length > 0) && <button type=\"button\" class=\"kui-token-search__clear\" data-action={clearAction} aria-label={clearLabel} title={clearLabel} disabled={disabled}><CloseIcon /></button>}\n        {trailing && <span class=\"kui-token-search__trailing\">{trailing}</span>}\n      </>}\n  </div>;\n}\n\n/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */\nexport function readTokenSearchField(editor: HTMLElement, knownTokens: readonly TokenSearchToken[] = []): TokenSearchFieldValue {\n  let query = '';\n  const tokens: TokenSearchToken[] = [];\n  const visit = (node: Node): void => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      query += (node.textContent ?? '').replaceAll('\\u00a0', ' ').replaceAll('\\u200b', '');\n      return;\n    }\n    if (!(node instanceof HTMLElement)) return;\n    if (node.matches('[data-component=\"token-search-token\"]')) {\n      const value = node.dataset.tokenValue;\n      const known = knownTokens.find((token) => token.value === value);\n      if (known) tokens.push({ ...known, offset: query.length });\n      else if (value) tokens.push({ value, label: value, offset: query.length });\n      return;\n    }\n    if (node.tagName === 'BR') {\n      query += ' ';\n      return;\n    }\n    for (const child of node.childNodes) visit(child);\n  };\n  for (const child of editor.childNodes) visit(child);\n  return { query, tokens };\n}\n\n/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */\nexport function placeTokenSearchCaret(editor: HTMLElement, offset?: number): void {\n  editor.focus({ preventScroll: true });\n  const selection = globalThis.getSelection();\n  if (!selection) return;\n  const range = document.createRange();\n  if (offset === undefined) {\n    range.selectNodeContents(editor);\n    range.collapse(false);\n  } else {\n    let remaining = Math.max(0, offset);\n    let found = false;\n    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {\n      acceptNode: (node) => node.parentElement?.closest('[data-component=\"token-search-token\"]')\n        ? NodeFilter.FILTER_REJECT\n        : NodeFilter.FILTER_ACCEPT,\n    });\n    for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n      const source = node.textContent ?? '';\n      const length = source.replaceAll('\\u200b', '').length;\n      if (remaining <= length) {\n        range.setStart(node, source === '\\u200b' ? 0 : Math.min(remaining, source.length));\n        range.collapse(true);\n        found = true;\n        break;\n      }\n      remaining -= length;\n    }\n    if (!found) {\n      range.selectNodeContents(editor);\n      range.collapse(false);\n    }\n  }\n  selection.removeAllRanges();\n  selection.addRange(range);\n}\n"]}

package/dist/{chunk-4HHCYSGT.js → chunk-AQNKJRFH.js}

@@ -1,4 +1,4 @@
-import { resizeRegionFromPointer, clampRegionSize } from './chunk-3O7ZEUW2.js';
+import { resizeRegionFromPointer, clampRegionSize } from './chunk-M5JRI6MN.js';
 import { delegate } from 'kerfjs';
 
 function regionState(handle) {
@@ -76,4 +76,4 @@ function wireResizableRegions(root, { step = 16, largeStep = 64, onPreview, onCo
 
 export { wireResizableRegions };
 
-//# sourceMappingURL=chunk-4HHCYSGT.js.map
+//# sourceMappingURL=chunk-AQNKJRFH.js.map