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

package/dist/chunk-N7FHFNT6.js

@@ -0,0 +1,55 @@
+import { Toolbar } from './chunk-MTM43SJO.js';
+import { ToolbarControlGroup } from './chunk-ZIYOJFZD.js';
+import { LucideIcon } from './chunk-4R777DUZ.js';
+import { PanelLeftOpen, PanelLeftClose, PanelRightOpen, PanelRightClose, PanelBottomOpen, PanelBottomClose } from 'lucide';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+function collapsiblePanelToggleIcon(side, collapsed) {
+  if (side === "left")
+    return collapsed ? { icon: PanelLeftOpen, name: "panel-left-open" } : { icon: PanelLeftClose, name: "panel-left-close" };
+  if (side === "right")
+    return collapsed ? { icon: PanelRightOpen, name: "panel-right-open" } : { icon: PanelRightClose, name: "panel-right-close" };
+  return collapsed ? { icon: PanelBottomOpen, name: "panel-bottom-open" } : { icon: PanelBottomClose, name: "panel-bottom-close" };
+}
+function panelToggleGroup(side, toggle, collapsed, attributes) {
+  const glyph = collapsiblePanelToggleIcon(side, collapsed);
+  return /* @__PURE__ */ jsx(ToolbarControlGroup, { label: toggle.name, appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...attributes,
+      "data-action": toggle.action,
+      "aria-expanded": String(!collapsed),
+      "aria-label": `${collapsed ? "Show" : "Hide"} ${toggle.name}`,
+      children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name })
+    }
+  ) });
+}
+function composedPanelToolbar(toolbar, side, collapsed, attributes) {
+  return /* @__PURE__ */ jsx(
+    Toolbar,
+    {
+      label: toolbar.label,
+      dividerSides: "b",
+      leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+        toolbar.title,
+        toolbar.panelOnly
+      ] }),
+      trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+        toolbar.constant,
+        toolbar.toggle ? panelToggleGroup(side, toolbar.toggle, collapsed, attributes) : null
+      ] })
+    }
+  );
+}
+function relocatedPanelGroups(toolbar, side, collapsed, attributes) {
+  if (!collapsed || !toolbar) return [];
+  return [
+    toolbar.constant,
+    toolbar.toggle ? panelToggleGroup(side, toolbar.toggle, true, attributes) : null
+  ].filter((group) => group !== void 0 && group !== null && group !== false);
+}
+
+export { collapsiblePanelToggleIcon, composedPanelToolbar, relocatedPanelGroups };
+
+//# sourceMappingURL=chunk-N7FHFNT6.js.map

package/dist/chunk-N7FHFNT6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/panel-toolbar.tsx"],"names":[],"mappings":";;;;;;AAyBO,SAAS,0BAAA,CACd,MACA,SAAA,EACkE;AAClE,EAAA,IAAI,IAAA,KAAS,MAAA;AACX,IAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,aAAA,EAAe,IAAA,EAAM,iBAAA,EAAkB,GAC/C,EAAE,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAM,kBAAA,EAAmB;AACvD,EAAA,IAAI,IAAA,KAAS,OAAA;AACX,IAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAM,kBAAA,EAAmB,GACjD,EAAE,IAAA,EAAM,eAAA,EAAiB,IAAA,EAAM,mBAAA,EAAoB;AACzD,EAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,eAAA,EAAiB,IAAA,EAAM,mBAAA,EAAoB,GACnD,EAAE,IAAA,EAAM,gBAAA,EAAkB,IAAA,EAAM,oBAAA,EAAqB;AAC3D;AA0CO,SAAS,gBAAA,CACd,IAAA,EACA,MAAA,EACA,SAAA,EACA,UAAA,EACU;AACV,EAAA,MAAM,KAAA,GAAQ,0BAAA,CAA2B,IAAA,EAAM,SAAS,CAAA;AACxD,EAAA,uBACE,GAAA,CAAC,uBAAoB,KAAA,EAAO,MAAA,CAAO,MAAM,UAAA,EAAW,YAAA,EAAa,QAAM,IAAA,EACrE,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACJ,GAAG,UAAA;AAAA,MACJ,eAAa,MAAA,CAAO,MAAA;AAAA,MACpB,eAAA,EAAe,MAAA,CAAO,CAAC,SAAS,CAAA;AAAA,MAChC,cAAY,CAAA,EAAG,SAAA,GAAY,SAAS,MAAM,CAAA,CAAA,EAAI,OAAO,IAAI,CAAA,CAAA;AAAA,MAEzD,8BAAC,UAAA,EAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM;AAAA;AAAA,GAClD,EACF,CAAA;AAEJ;AAMO,SAAS,oBAAA,CACd,OAAA,EACA,IAAA,EACA,SAAA,EACA,UAAA,EACU;AACV,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAO,OAAA,CAAQ,KAAA;AAAA,MACf,YAAA,EAAa,GAAA;AAAA,MACb,yBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,OAAA,CAAQ,KAAA;AAAA,QACR,OAAA,CAAQ;AAAA,OAAA,EACX,CAAA;AAAA,MAEF,0BACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,OAAA,CAAQ,QAAA;AAAA,QACR,OAAA,CAAQ,SACL,gBAAA,CAAiB,IAAA,EAAM,QAAQ,MAAA,EAAQ,SAAA,EAAW,UAAU,CAAA,GAC5D;AAAA,OAAA,EACN;AAAA;AAAA,GAEJ;AAEJ;AAMO,SAAS,oBAAA,CACd,OAAA,EACA,IAAA,EACA,SAAA,EACA,UAAA,EACiB;AACjB,EAAA,IAAI,CAAC,SAAA,IAAa,CAAC,OAAA,SAAgB,EAAC;AACpC,EAAA,OAAO;AAAA,IACL,OAAA,CAAQ,QAAA;AAAA,IACR,OAAA,CAAQ,SACJ,gBAAA,CAAiB,IAAA,EAAM,QAAQ,MAAA,EAAQ,IAAA,EAAM,UAAU,CAAA,GACvD;AAAA,GACN,CAAE,OAAO,CAAC,KAAA,KAAU,UAAU,MAAA,IAAa,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,KAAK,CAAA;AAC9E","file":"chunk-N7FHFNT6.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n  PanelBottomClose,\n  PanelBottomOpen,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PanelRightClose,\n  PanelRightOpen,\n} from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** Which edge a collapsible panel docks to. */\nexport type PanelSide = 'left' | 'right' | 'bottom';\n\n/**\n * The standard collapse/expand icon for a panel `side` and `collapsed` state,\n * so every app's sidebars and drawers use one recognizable convention:\n * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`\n * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while\n * collapsed. Exposed so an app can render its own toggle affordance.\n */\nexport function collapsiblePanelToggleIcon(\n  side: PanelSide,\n  collapsed: boolean,\n): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n  if (side === 'left')\n    return collapsed\n      ? { icon: PanelLeftOpen, name: 'panel-left-open' }\n      : { icon: PanelLeftClose, name: 'panel-left-close' };\n  if (side === 'right')\n    return collapsed\n      ? { icon: PanelRightOpen, name: 'panel-right-open' }\n      : { icon: PanelRightClose, name: 'panel-right-close' };\n  return collapsed\n    ? { icon: PanelBottomOpen, name: 'panel-bottom-open' }\n    : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\n/**\n * The standard collapse toggle a panel toolbar renders. The app handles the\n * button's `data-action` and flips its own `collapsed` flag.\n */\nexport interface PanelToggle {\n  /** The `data-action` the toggle button carries. */\n  action: string;\n  /** The panel's short name, for the accessible \"Show …\" / \"Hide …\" label. */\n  name: string;\n}\n\n/**\n * A collapsible panel's top toolbar, composed so its groups follow the\n * panel's open state.\n *\n * - `title` (a `ToolbarText`) and `panelOnly` groups lead the toolbar and are\n *   available only while the panel is open.\n * - `constant` groups stay available either way: they trail the panel's\n *   toolbar while it is open and move to the work area's toolbar while it is\n *   collapsed.\n * - `toggle` is always the last group: in the panel's toolbar while it is\n *   open, and right after the `constant` groups in the work area's toolbar\n *   while it is collapsed.\n *\n * `constant` content renders in both places while the panel is collapsed (the\n * panel's copy is inert), so give it no `id`s.\n */\nexport interface PanelToolbar {\n  /** Accessible name of the panel's toolbar. */\n  label: string;\n  title?: KerfUiContent;\n  panelOnly?: KerfUiContent;\n  constant?: KerfUiContent;\n  toggle?: PanelToggle;\n}\n\n/** Owner-specific attributes a toggle button carries (its wiring hooks). */\nexport type PanelToggleAttributes = Readonly<Record<string, string>>;\n\n/** The standard toggle, alone in a borderless group. */\nexport function panelToggleGroup(\n  side: PanelSide,\n  toggle: PanelToggle,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): SafeHtml {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  return (\n    <ToolbarControlGroup label={toggle.name} appearance=\"borderless\" single>\n      <button\n        type=\"button\"\n        {...attributes}\n        data-action={toggle.action}\n        aria-expanded={String(!collapsed)}\n        aria-label={`${collapsed ? 'Show' : 'Hide'} ${toggle.name}`}\n      >\n        <LucideIcon icon={glyph.icon} name={glyph.name} />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * The panel's own toolbar: title and panel-only groups lead, constant groups\n * and the toggle trail.\n */\nexport function composedPanelToolbar(\n  toolbar: PanelToolbar,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): SafeHtml {\n  return (\n    <Toolbar\n      label={toolbar.label}\n      dividerSides=\"b\"\n      leading={\n        <>\n          {toolbar.title}\n          {toolbar.panelOnly}\n        </>\n      }\n      trailing={\n        <>\n          {toolbar.constant}\n          {toolbar.toggle\n            ? panelToggleGroup(side, toolbar.toggle, collapsed, attributes)\n            : null}\n        </>\n      }\n    />\n  );\n}\n\n/**\n * The groups a collapsed panel hands to the work area: its `constant` groups,\n * then its toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedPanelGroups(\n  toolbar: PanelToolbar | undefined,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): KerfUiContent[] {\n  if (!collapsed || !toolbar) return [];\n  return [\n    toolbar.constant,\n    toolbar.toggle\n      ? panelToggleGroup(side, toolbar.toggle, true, attributes)\n      : null,\n  ].filter((group) => group !== undefined && group !== null && group !== false);\n}\n"]}

package/dist/{chunk-KPNTVB7A.js → chunk-R754MHXX.js}

@@ -1,7 +1,7 @@
-import { Text } from './chunk-7IUSV4XG.js';
+import { Text } from './chunk-24PHKUR3.js';
 import { Skeleton } from './chunk-ATHXW6RP.js';
-import { filterDataAttributes, filterControlAttributes } from './chunk-SRSJO5QE.js';
 import { Badge } from './chunk-XD7DWYXG.js';
+import { filterDataAttributes, filterControlAttributes } from './chunk-SRSJO5QE.js';
 import { em } from './chunk-WZ2GLEY4.js';
 import { DisclosureArrow } from './chunk-HMQ2ZDGG.js';
 import { jsx, jsxs } from 'kerfjs/jsx-runtime';
@@ -153,4 +153,4 @@ function ListHeader({
 
 export { ListHeader };
 
-//# sourceMappingURL=chunk-KPNTVB7A.js.map
+//# sourceMappingURL=chunk-R754MHXX.js.map

package/dist/{chunk-KPNTVB7A.js.map → chunk-R754MHXX.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/list-header.tsx"],"names":[],"mappings":";;;;;;;;AAYA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAAC,CAAA;AACD,IAAM,iCAAA,uBAAwC,GAAA,CAAI;AAAA,EAChD,aAAA;AAAA,EACA;AACF,CAAC,CAAA;AAsFM,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,UAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,MAAA,GAAS,KAAA;AAAA,EACT,KAAA,GAAQ,MAAA;AAAA,EACR,aAAA,GAAgB,SAAA;AAAA,EAChB,MAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,cAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,WAAA,GAAc,KAAA;AAAA,EACd,iBAAiB,EAAC;AAAA,EAClB,oBAAoB,EAAC;AAAA,EACrB;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,uBAAA,GAA0B,oBAAA;AAAA,IAC9B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,0BAAA,GAA6B,uBAAA;AAAA,IACjC,iBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,eAAA,GACJ,OAAO,KAAA,KAAU,QAAA,IAAY,MAAA,CAAO,cAAc,KAAK,CAAA,IAAK,KAAA,IAAS,CAAA,GACjE,KAAA,GACA,MAAA;AACN,EAAA,MAAM,oBAAA,GACJ,eAAA,KAAoB,MAAA,GAChB,MAAA,GACA,OAAO,UAAA,KAAe,QAAA,IAAY,UAAA,CAAW,IAAA,EAAK,GAChD,UAAA,GACA,MAAA,CAAO,eAAe,CAAA;AAC9B,EAAA,MAAM,aAAA,GACJ,eAAA,KAAoB,MAAA,GAAa,MAAA,IAAU,KAAA,GAAS,MAAA;AACtD,EAAA,MAAM,kBAAA,GACJ,eACC,MAAA,mBAAS,GAAA,CAAC,mBAAgB,IAAA,EAAM,OAAA,CAAQ,QAAQ,CAAA,EAAG,CAAA,GAAK,MAAA,CAAA;AAC3D,EAAA,MAAM,kBACJ,eAAA,KAAoB,MAAA,GAChB,SACA,CAAA,EAAG,KAAK,KAAK,oBAAoB,CAAA,CAAA;AACvC,EAAA,MAAM,SAAA,GACJ,aAAA,KAAkB,QAAA,GAAW,OAAA,GAAU,aAAA;AACzC,EAAA,MAAM,YAAY,WAAA,GAAA,CACf,eAAA,KAAoB,MAAA,IAAa,aAAA,yBAC/B,KAAA,EAAA,EAAM,IAAA,EAAK,SAAA,EAAU,IAAA,EAAM,WAC1B,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,IAAI,GAAG,CAAA,EAC7B,CAAA,GAEA,eAAA,KAAoB,MAAA,GACtB,iCACE,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAK,SAAA,EAAU,MAAM,SAAA,EACzB,QAAA,EAAA,aAAA,EACH,CAAA,mBAGF,GAAA,CAAC,SAAM,IAAA,EAAK,SAAA,EAAU,MAAM,SAAA,EAAW,UAAA,EAAU,MAC9C,QAAA,EAAA,eAAA,EACH,CAAA;AAEF,EAAA,MAAM,IAAA,GAAO,cAAe,MAAA,GAAmB,MAAA;AAC/C,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,uBAAA;AAAA,QACJ,KAAA,EAAM,iBAAA;AAAA,QACN,gBAAA,EAAe,aAAA;AAAA,QACf,gBAAA,EAAgB,MAAA,CAAO,OAAA,CAAQ,aAAa,CAAC,CAAA;AAAA,QAC7C,gBAAA,EAAgB,MAAA,CAAO,eAAA,KAAoB,MAAS,CAAA;AAAA,QACpD,cAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAc,OAAA;AAAA,QACd,aAAA,EAAa,OAAO,MAAM,CAAA;AAAA,QAC1B,YAAA,EAAY,KAAA;AAAA,QACZ,qBAAA,EAAqB,aAAA;AAAA,QACrB,aAAA,EAAY,MAAA;AAAA,QACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,QACzC,WAAA,EAAW,IAAA;AAAA,QACX,IAAA;AAAA,QAEA,QAAA,kBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,0BAAA;AAAA,YACJ,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,gDAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,KAAA,EAAO,iBAAiB,cAAA,GAAiB,MAAA;AAAA,YACzC,QAAA,EAAU,kBAAkB,WAAA,IAAe,MAAA;AAAA,YAC3C,mBAAA,EAAmB,iBAAiB,MAAA,GAAS,MAAA;AAAA,YAC7C,YAAA,EAAY,eAAA;AAAA,YACZ,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,QAAQ,CAAC,CAAA;AAAA,YAEvC,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,cAC3C,SAAA;AAAA,cACA,kBAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,iCACT,QAAA,EAAA,kBAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA,EAEJ;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,uBAAA;AAAA,MACJ,KAAA,EAAM,iBAAA;AAAA,MACN,gBAAA,EAAe,aAAA;AAAA,MACf,gBAAA,EAAgB,MAAA,CAAO,OAAA,CAAQ,aAAa,CAAC,CAAA;AAAA,MAC7C,gBAAA,EAAgB,MAAA,CAAO,eAAA,KAAoB,MAAS,CAAA;AAAA,MACpD,cAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAc,OAAA;AAAA,MACd,aAAA,EAAa,OAAO,MAAM,CAAA;AAAA,MAC1B,YAAA,EAAY,KAAA;AAAA,MACZ,qBAAA,EAAqB,aAAA;AAAA,MACrB,aAAA,EAAY,OAAA;AAAA,MACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,WAAA,EAAW,IAAA;AAAA,MACX,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,IAAA;AAAA,cACR,KAAA,EAAM,wBAAA;AAAA,cACN,MAAA,EAAO,MAAA;AAAA,cACP,YAAA,EAAY,eAAA;AAAA,cAEX,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UACC;AAAA,SAAA,EACH,CAAA;AAAA,QACC,MAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,0BAAA;AAAA,YACJ,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,yBAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,YAAA,EAAY,WAAA;AAAA,YACZ,KAAA,EAAO,iBAAiB,cAAA,GAAiB,WAAA;AAAA,YACzC,QAAA,EAAU,kBAAkB,WAAA,IAAe,MAAA;AAAA,YAC3C,mBAAA,EAAmB,iBAAiB,MAAA,GAAS,MAAA;AAAA,YAE5C,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-KPNTVB7A.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge, type BadgeTone } from './badge.js';\nimport { em } from './css-values.js';\nimport { DisclosureArrow } from './disclosure-arrow.js';\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\nimport { Text } from './text.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-has-badge',\n  'data-has-count',\n  'data-density',\n  'data-divider',\n  'data-inline',\n  'data-width',\n  'data-indicator-tone',\n  'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set([\n  'data-action',\n  'data-kui-disabled',\n]);\n\ntype ListHeaderRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-has-badge'?: never;\n    'data-has-count'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-inline'?: never;\n    'data-width'?: never;\n    'data-indicator-tone'?: never;\n    'data-toggle'?: never;\n  }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    'data-kui-disabled'?: 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\ninterface ListHeaderBaseProps {\n  label: string;\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  /** Shrink-wrap the header without its default outer margin, border, or padding. */\n  inline?: boolean;\n  /** Fill the available row or shrink-wrap while retaining normal header geometry. */\n  width?: 'fill' | 'content';\n  indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';\n  /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n  placeholder?: boolean;\n  rootAttributes?: ListHeaderRootAttributes;\n  triggerAttributes?: ListHeaderTriggerAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype ListHeaderModeProps =\n  | {\n      /** Render the title as a controlled disclosure trigger. */\n      toggle: true;\n      action: string;\n      expanded: boolean;\n      actionIcon?: SafeHtml;\n      actionLabel?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a separately named trailing action. */\n      toggle?: false;\n      action: string;\n      actionLabel: string;\n      actionIcon: SafeHtml;\n      expanded?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a passive section heading. */\n      toggle?: false;\n      action?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n      expanded?: never;\n      actionDisabled?: never;\n      disabledReason?: never;\n    };\n\ntype ListHeaderIndicatorProps =\n  | { count: number; countLabel: string; badge?: never; status?: never }\n  | { count?: never; countLabel?: never; badge: SafeHtml; status?: never }\n  | { count?: never; countLabel?: never; badge?: never; status?: SafeHtml };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n  ListHeaderIndicatorProps &\n  ListHeaderModeProps;\n\nexport function ListHeader({\n  label,\n  count,\n  countLabel,\n  badge,\n  status,\n  density = 'standard',\n  divider = 'none',\n  inline = false,\n  width = 'fill',\n  indicatorTone = 'neutral',\n  action,\n  actionLabel,\n  actionIcon,\n  actionDisabled = false,\n  disabledReason,\n  expanded,\n  toggle = false,\n  placeholder = false,\n  rootAttributes = {},\n  triggerAttributes = {},\n  slot,\n}: ListHeaderProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTriggerAttributes = filterControlAttributes(\n    triggerAttributes,\n    PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n  );\n  const normalizedCount =\n    typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n      ? count\n      : undefined;\n  const normalizedCountLabel =\n    normalizedCount === undefined\n      ? undefined\n      : typeof countLabel === 'string' && countLabel.trim()\n        ? countLabel\n        : String(normalizedCount);\n  const renderedBadge =\n    normalizedCount === undefined ? (status ?? badge) : undefined;\n  const renderedActionIcon =\n    actionIcon ??\n    (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n  const accessibleLabel =\n    normalizedCount === undefined\n      ? undefined\n      : `${label}, ${normalizedCountLabel}`;\n  const badgeTone: BadgeTone =\n    indicatorTone === 'accent' ? 'brand' : indicatorTone;\n  const indicator = placeholder ? (\n    (normalizedCount !== undefined || renderedBadge) && (\n      <Badge size=\"compact\" tone={badgeTone}>\n        <Skeleton width={em(1.75)} />\n      </Badge>\n    )\n  ) : normalizedCount === undefined ? (\n    renderedBadge && (\n      <Badge size=\"compact\" tone={badgeTone}>\n        {renderedBadge}\n      </Badge>\n    )\n  ) : (\n    <Badge size=\"compact\" tone={badgeTone} ariaHidden>\n      {normalizedCount}\n    </Badge>\n  );\n  const busy = placeholder ? ('true' as const) : undefined;\n  if (toggle) {\n    return (\n      <header\n        {...extensionRootAttributes}\n        class=\"kui-list-header\"\n        data-component=\"list-header\"\n        data-has-badge={String(Boolean(renderedBadge))}\n        data-has-count={String(normalizedCount !== undefined)}\n        data-density={density}\n        data-divider={divider}\n        data-inline={String(inline)}\n        data-width={width}\n        data-indicator-tone={indicatorTone}\n        data-toggle=\"true\"\n        data-placeholder={placeholder ? 'true' : undefined}\n        aria-busy={busy}\n        slot={slot}\n      >\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__title kui-list-header__toggle\"\n          data-action={placeholder ? undefined : action}\n          title={actionDisabled ? disabledReason : undefined}\n          disabled={actionDisabled || placeholder || undefined}\n          data-kui-disabled={actionDisabled ? 'true' : undefined}\n          aria-label={accessibleLabel}\n          aria-expanded={String(Boolean(expanded))}\n        >\n          <span class=\"kui-list-header__label\">{label}</span>\n          {indicator}\n          {renderedActionIcon && (\n            <span class=\"kui-list-header__action-layer\">\n              {renderedActionIcon}\n            </span>\n          )}\n        </button>\n      </header>\n    );\n  }\n  return (\n    <header\n      {...extensionRootAttributes}\n      class=\"kui-list-header\"\n      data-component=\"list-header\"\n      data-has-badge={String(Boolean(renderedBadge))}\n      data-has-count={String(normalizedCount !== undefined)}\n      data-density={density}\n      data-divider={divider}\n      data-inline={String(inline)}\n      data-width={width}\n      data-indicator-tone={indicatorTone}\n      data-toggle=\"false\"\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={busy}\n      slot={slot}\n    >\n      <div class=\"kui-list-header__title\">\n        <Text\n          variant=\"h2\"\n          class=\"kui-list-header__label\"\n          border=\"none\"\n          aria-label={accessibleLabel}\n        >\n          {label}\n        </Text>\n        {indicator}\n      </div>\n      {action && (\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__action\"\n          data-action={placeholder ? undefined : action}\n          aria-label={actionLabel}\n          title={actionDisabled ? disabledReason : actionLabel}\n          disabled={actionDisabled || placeholder || undefined}\n          data-kui-disabled={actionDisabled ? 'true' : undefined}\n        >\n          {renderedActionIcon}\n        </button>\n      )}\n    </header>\n  );\n}\n"]}
+{"version":3,"sources":["../src/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-R754MHXX.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge, type BadgeTone } from './badge.js';\nimport { em } from './css-values.js';\nimport { DisclosureArrow } from './disclosure-arrow.js';\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\nimport { Text } from './text.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-has-badge',\n  'data-has-count',\n  'data-density',\n  'data-divider',\n  'data-inline',\n  'data-width',\n  'data-indicator-tone',\n  'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set([\n  'data-action',\n  'data-kui-disabled',\n]);\n\ntype ListHeaderRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-has-badge'?: never;\n    'data-has-count'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-inline'?: never;\n    'data-width'?: never;\n    'data-indicator-tone'?: never;\n    'data-toggle'?: never;\n  }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    'data-kui-disabled'?: 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\ninterface ListHeaderBaseProps {\n  label: string;\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  /** Shrink-wrap the header without its default outer margin, border, or padding. */\n  inline?: boolean;\n  /** Fill the available row or shrink-wrap while retaining normal header geometry. */\n  width?: 'fill' | 'content';\n  indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';\n  /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n  placeholder?: boolean;\n  rootAttributes?: ListHeaderRootAttributes;\n  triggerAttributes?: ListHeaderTriggerAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype ListHeaderModeProps =\n  | {\n      /** Render the title as a controlled disclosure trigger. */\n      toggle: true;\n      action: string;\n      expanded: boolean;\n      actionIcon?: SafeHtml;\n      actionLabel?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a separately named trailing action. */\n      toggle?: false;\n      action: string;\n      actionLabel: string;\n      actionIcon: SafeHtml;\n      expanded?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a passive section heading. */\n      toggle?: false;\n      action?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n      expanded?: never;\n      actionDisabled?: never;\n      disabledReason?: never;\n    };\n\ntype ListHeaderIndicatorProps =\n  | { count: number; countLabel: string; badge?: never; status?: never }\n  | { count?: never; countLabel?: never; badge: SafeHtml; status?: never }\n  | { count?: never; countLabel?: never; badge?: never; status?: SafeHtml };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n  ListHeaderIndicatorProps &\n  ListHeaderModeProps;\n\nexport function ListHeader({\n  label,\n  count,\n  countLabel,\n  badge,\n  status,\n  density = 'standard',\n  divider = 'none',\n  inline = false,\n  width = 'fill',\n  indicatorTone = 'neutral',\n  action,\n  actionLabel,\n  actionIcon,\n  actionDisabled = false,\n  disabledReason,\n  expanded,\n  toggle = false,\n  placeholder = false,\n  rootAttributes = {},\n  triggerAttributes = {},\n  slot,\n}: ListHeaderProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTriggerAttributes = filterControlAttributes(\n    triggerAttributes,\n    PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n  );\n  const normalizedCount =\n    typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n      ? count\n      : undefined;\n  const normalizedCountLabel =\n    normalizedCount === undefined\n      ? undefined\n      : typeof countLabel === 'string' && countLabel.trim()\n        ? countLabel\n        : String(normalizedCount);\n  const renderedBadge =\n    normalizedCount === undefined ? (status ?? badge) : undefined;\n  const renderedActionIcon =\n    actionIcon ??\n    (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n  const accessibleLabel =\n    normalizedCount === undefined\n      ? undefined\n      : `${label}, ${normalizedCountLabel}`;\n  const badgeTone: BadgeTone =\n    indicatorTone === 'accent' ? 'brand' : indicatorTone;\n  const indicator = placeholder ? (\n    (normalizedCount !== undefined || renderedBadge) && (\n      <Badge size=\"compact\" tone={badgeTone}>\n        <Skeleton width={em(1.75)} />\n      </Badge>\n    )\n  ) : normalizedCount === undefined ? (\n    renderedBadge && (\n      <Badge size=\"compact\" tone={badgeTone}>\n        {renderedBadge}\n      </Badge>\n    )\n  ) : (\n    <Badge size=\"compact\" tone={badgeTone} ariaHidden>\n      {normalizedCount}\n    </Badge>\n  );\n  const busy = placeholder ? ('true' as const) : undefined;\n  if (toggle) {\n    return (\n      <header\n        {...extensionRootAttributes}\n        class=\"kui-list-header\"\n        data-component=\"list-header\"\n        data-has-badge={String(Boolean(renderedBadge))}\n        data-has-count={String(normalizedCount !== undefined)}\n        data-density={density}\n        data-divider={divider}\n        data-inline={String(inline)}\n        data-width={width}\n        data-indicator-tone={indicatorTone}\n        data-toggle=\"true\"\n        data-placeholder={placeholder ? 'true' : undefined}\n        aria-busy={busy}\n        slot={slot}\n      >\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__title kui-list-header__toggle\"\n          data-action={placeholder ? undefined : action}\n          title={actionDisabled ? disabledReason : undefined}\n          disabled={actionDisabled || placeholder || undefined}\n          data-kui-disabled={actionDisabled ? 'true' : undefined}\n          aria-label={accessibleLabel}\n          aria-expanded={String(Boolean(expanded))}\n        >\n          <span class=\"kui-list-header__label\">{label}</span>\n          {indicator}\n          {renderedActionIcon && (\n            <span class=\"kui-list-header__action-layer\">\n              {renderedActionIcon}\n            </span>\n          )}\n        </button>\n      </header>\n    );\n  }\n  return (\n    <header\n      {...extensionRootAttributes}\n      class=\"kui-list-header\"\n      data-component=\"list-header\"\n      data-has-badge={String(Boolean(renderedBadge))}\n      data-has-count={String(normalizedCount !== undefined)}\n      data-density={density}\n      data-divider={divider}\n      data-inline={String(inline)}\n      data-width={width}\n      data-indicator-tone={indicatorTone}\n      data-toggle=\"false\"\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={busy}\n      slot={slot}\n    >\n      <div class=\"kui-list-header__title\">\n        <Text\n          variant=\"h2\"\n          class=\"kui-list-header__label\"\n          border=\"none\"\n          aria-label={accessibleLabel}\n        >\n          {label}\n        </Text>\n        {indicator}\n      </div>\n      {action && (\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__action\"\n          data-action={placeholder ? undefined : action}\n          aria-label={actionLabel}\n          title={actionDisabled ? disabledReason : actionLabel}\n          disabled={actionDisabled || placeholder || undefined}\n          data-kui-disabled={actionDisabled ? 'true' : undefined}\n        >\n          {renderedActionIcon}\n        </button>\n      )}\n    </header>\n  );\n}\n"]}

package/dist/{chunk-HJKRCKDR.js → chunk-RNRUVPJ3.js}

@@ -28,6 +28,7 @@ function TokenSearchField({
   label,
   query = "",
   tokens = [],
+  revision,
   placeholder = "Search",
   tokenPlaceholder = "Add search\u2026",
   disabled = false,
@@ -48,7 +49,8 @@ function TokenSearchField({
   slot
 }) {
   const parts = orderedParts(query, tokens);
-  const key = `${id}:${tokens.map((token) => token.value).join("|")}`;
+  const tokenKey = tokens.map((token) => token.value).join("|");
+  const key = revision === void 0 ? `${id}:${tokenKey}` : `${id}@${String(revision)}:${tokenKey}`;
   const resolvedExpanded = !collapsible || expanded || query.length > 0 || tokens.length > 0;
   return /* @__PURE__ */ jsx(
     "div",
@@ -219,4 +221,4 @@ function placeTokenSearchCaret(editor, offset) {
 
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField };
 
-//# sourceMappingURL=chunk-HJKRCKDR.js.map
+//# sourceMappingURL=chunk-RNRUVPJ3.js.map

package/dist/chunk-RNRUVPJ3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/token-search-field.tsx"],"names":[],"mappings":"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","file":"chunk-RNRUVPJ3.js","sourcesContent":["import { Search, X } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport interface TokenSearchToken {\n  value: string;\n  label: string;\n  offset?: number;\n  accessibleLabel?: string;\n}\n\nexport type TokenSearchEditorAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-key'?: never;\n    'data-morph-skip'?: never;\n    'data-token-search-editor'?: never;\n    'data-token-count'?: never;\n    'data-placeholder'?: never;\n  }\n>;\n\ninterface TokenSearchFieldBaseProps {\n  id: string;\n  label: string;\n  query?: string;\n  tokens?: readonly TokenSearchToken[];\n  /**\n   * Editor identity for a programmatic text replacement. The editor's text is\n   * DOM-owned between token changes, so a new `query` with the same tokens\n   * does not re-render it (that would reset the caret on every keystroke).\n   * Change `revision` when the app replaces the text itself — reseeding a\n   * persistent dialog's field on reopen, applying a saved search — and the\n   * editor is rebuilt from `query` and `tokens`.\n   */\n  revision?: string | number;\n  placeholder?: string;\n  tokenPlaceholder?: string;\n  disabled?: boolean;\n  autofocus?: boolean;\n  leading?: KerfUiContent;\n  trailing?: KerfUiContent;\n  /** Standalone field chrome or the inset visual layer of a configured toolbar group. */\n  presentation?: 'standalone' | 'toolbar-group';\n  editAction?: string;\n  removeAction?: string;\n  clearAction?: string;\n  clearLabel?: string;\n  className?: string;\n  editorAttributes?: TokenSearchEditorAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype TokenSearchCollapsibleProps =\n  | {\n      /** Allow an empty field to render as one iconic action. */\n      collapsible: true;\n      /** Keep an empty collapsible field open while the application owns focus. */\n      expanded?: boolean;\n      expandAction?: string;\n      expandLabel?: string;\n    }\n  | {\n      collapsible?: false;\n      expanded?: never;\n      expandAction?: never;\n      expandLabel?: never;\n    };\n\nexport type TokenSearchFieldProps = TokenSearchFieldBaseProps &\n  TokenSearchCollapsibleProps;\n\nexport interface TokenSearchFieldValue {\n  query: string;\n  tokens: TokenSearchToken[];\n}\n\ntype TokenSearchPart =\n  { kind: 'text'; value: string } | { kind: 'token'; token: TokenSearchToken };\n\nfunction orderedParts(\n  query: string,\n  tokens: readonly TokenSearchToken[],\n): TokenSearchPart[] {\n  const ordered = tokens\n    .map((token, index) => ({\n      token,\n      index,\n      offset: Math.max(0, Math.min(query.length, token.offset ?? query.length)),\n    }))\n    .sort(\n      (left, right) => left.offset - right.offset || left.index - right.index,\n    );\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  revision,\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  presentation = 'standalone',\n  editAction = 'edit-search-token',\n  removeAction = 'remove-search-token',\n  clearAction = 'clear-token-search',\n  clearLabel = 'Clear search',\n  className = '',\n  editorAttributes = {},\n  slot,\n}: TokenSearchFieldProps) {\n  const parts = orderedParts(query, tokens);\n  const tokenKey = tokens.map((token) => token.value).join('|');\n  const key =\n    revision === undefined\n      ? `${id}:${tokenKey}`\n      : `${id}@${String(revision)}:${tokenKey}`;\n  const resolvedExpanded =\n    !collapsible || expanded || query.length > 0 || tokens.length > 0;\n  return (\n    <div\n      class={`kui-token-search ${className}`.trim()}\n      data-component=\"token-search-field\"\n      data-token-search-id={id}\n      data-disabled={String(disabled)}\n      data-collapsible={String(collapsible)}\n      data-expanded={String(resolvedExpanded)}\n      data-has-trailing={String(Boolean(trailing))}\n      data-presentation={presentation}\n      slot={slot}\n    >\n      {!resolvedExpanded ? (\n        <button\n          type=\"button\"\n          class=\"kui-token-search__expand\"\n          data-action={expandAction}\n          aria-label={expandLabel ?? label}\n          title={expandLabel ?? label}\n          disabled={disabled}\n        >\n          <LucideIcon icon={Search} name=\"search\" />\n        </button>\n      ) : (\n        <>\n          <span class=\"kui-token-search__leading\" aria-hidden=\"true\">\n            {leading ?? <LucideIcon icon={Search} name=\"search\" />}\n          </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          >\n            {parts.map((part) =>\n              part.kind === 'text' ? (\n                <span\n                  data-token-search-text\n                  data-empty={String(part.value.length === 0)}\n                >\n                  {part.value || (tokens.length ? '\\u200b' : '')}\n                </span>\n              ) : (\n                <span\n                  class=\"kui-token-search__token\"\n                  contenteditable=\"false\"\n                  data-component=\"token-search-token\"\n                  data-token-value={part.token.value}\n                >\n                  <button\n                    type=\"button\"\n                    class=\"kui-token-search__token-edit\"\n                    data-action={editAction}\n                    data-token-value={part.token.value}\n                    aria-label={`Edit ${part.token.accessibleLabel ?? part.token.label}`}\n                    disabled={disabled}\n                  >\n                    {part.token.label}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"kui-token-search__token-remove\"\n                    data-action={removeAction}\n                    data-token-value={part.token.value}\n                    aria-label={`Remove ${part.token.accessibleLabel ?? part.token.label}`}\n                    disabled={disabled}\n                  >\n                    <CloseIcon />\n                  </button>\n                </span>\n              ),\n            )}\n          </div>\n          {(query || tokens.length > 0) && (\n            <button\n              type=\"button\"\n              class=\"kui-token-search__clear\"\n              data-action={clearAction}\n              aria-label={clearLabel}\n              title={clearLabel}\n              disabled={disabled}\n            >\n              <CloseIcon />\n            </button>\n          )}\n          {trailing && (\n            <span class=\"kui-token-search__trailing\">{trailing}</span>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\n/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */\nexport function readTokenSearchField(\n  editor: HTMLElement,\n  knownTokens: readonly TokenSearchToken[] = [],\n): 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 ?? '')\n        .replaceAll('\\u00a0', ' ')\n        .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)\n        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(\n  editor: HTMLElement,\n  offset?: number,\n): 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) =>\n        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(\n          node,\n          source === '\\u200b' ? 0 : Math.min(remaining, source.length),\n        );\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/collapsible-panel.d.ts

@@ -1,22 +1,22 @@
 import { SafeHtml } from 'kerfjs';
-import { LucideIcon } from './lucide-icon.js';
+import { P as PanelSide, a as PanelToolbar, b as PanelToggle } from './panel-toolbar-BFQxFITu.js';
+export { c as collapsiblePanelToggleIcon } from './panel-toolbar-BFQxFITu.js';
 import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import './lucide-icon.js';
 import 'lucide';
 
 /** Which edge a {@link CollapsiblePanel} docks to. */
-type CollapsiblePanelSide = 'left' | 'right' | 'bottom';
+type CollapsiblePanelSide = PanelSide;
+/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */
+type CollapsiblePanelToolbarToggle = PanelToggle;
 /**
- * The standard collapse/expand icon for a panel `side` and `collapsed` state,
- * so every app's sidebars and drawers use one recognizable convention:
- * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`
- * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while
- * collapsed. Exposed so an app can render its own toggle affordance.
+ * A panel's composed top toolbar. `title` and `panelOnly` groups lead it and
+ * are available only while the panel is open; `constant` groups and the
+ * standard `toggle` trail it while open and move to the app's work-area
+ * toolbar — through {@link CollapsiblePanelRelocated} — while it is collapsed.
  */
-declare function collapsiblePanelToggleIcon(side: CollapsiblePanelSide, collapsed: boolean): {
-    icon: Parameters<typeof LucideIcon>[0]['icon'];
-    name: string;
-};
+type CollapsiblePanelToolbar = PanelToolbar;
 interface CollapsiblePanelToggleProps {
     /** The panel this toggle controls. */
     side: CollapsiblePanelSide;
@@ -53,6 +53,15 @@ interface CollapsiblePanelProps {
     label?: string;
     /** Panel content. */
     children?: KerfUiContent;
+    /**
+     * The panel's top toolbar, composed so its groups follow the panel's open
+     * state. With it, `children` renders in a `Pane` below the toolbar; render
+     * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the
+     * `constant` groups and toggle stay reachable while the panel is collapsed.
+     */
+    toolbar?: CollapsiblePanelToolbar;
+    /** Optional bottom toolbar under a `toolbar` panel's content. */
+    footer?: KerfUiContent;
     separator?: ResizableRegionSeparator;
     collapseMotion?: ResizableRegionCollapseMotion;
     contentOverflow?: ResizableRegionContentOverflow;
@@ -78,6 +87,24 @@ interface CollapsiblePanelProps {
  * and persistence semantics, and with `CollapsiblePanelToggle` for the standard
  * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.
  */
-declare function CollapsiblePanel({ id, side, collapsed, size, label, children, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, className, }: CollapsiblePanelProps): SafeHtml;
+declare function CollapsiblePanel({ id, side, collapsed, size, label, children, toolbar, footer, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, className, }: CollapsiblePanelProps): SafeHtml;
+interface CollapsiblePanelRelocatedProps {
+    /** The panel's `id`. */
+    panelId: string;
+    side: CollapsiblePanelSide;
+    /** The panel's current collapsed state. */
+    collapsed: boolean;
+    /** The same `toolbar` the panel receives. */
+    toolbar: CollapsiblePanelToolbar;
+}
+/**
+ * A collapsed {@link CollapsiblePanel}'s `constant` groups and standard
+ * toggle, for the app's work-area toolbar — nothing while the panel is open.
+ * Put it first in the leading zone for a left rail, last in the trailing zone
+ * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`
+ * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when
+ * the panel closes from its own toggle.
+ */
+declare function CollapsiblePanelRelocated({ panelId, side, collapsed, toolbar, }: CollapsiblePanelRelocatedProps): SafeHtml;
 
-export { CollapsiblePanel, type CollapsiblePanelProps, type CollapsiblePanelSide, CollapsiblePanelToggle, type CollapsiblePanelToggleProps, collapsiblePanelToggleIcon };
+export { CollapsiblePanel, type CollapsiblePanelProps, CollapsiblePanelRelocated, type CollapsiblePanelRelocatedProps, type CollapsiblePanelSide, CollapsiblePanelToggle, type CollapsiblePanelToggleProps, type CollapsiblePanelToolbar, type CollapsiblePanelToolbarToggle };

package/dist/collapsible-panel.js

@@ -1,14 +1,18 @@
+import { collapsiblePanelToggleIcon, composedPanelToolbar, relocatedPanelGroups } from './chunk-N7FHFNT6.js';
+export { collapsiblePanelToggleIcon } from './chunk-N7FHFNT6.js';
+
+
+import { Pane } from './chunk-7GUQYHKA.js';
+
 import { LucideIcon } from './chunk-4R777DUZ.js';
-import { PanelLeftOpen, PanelLeftClose, PanelRightOpen, PanelRightClose, PanelBottomOpen, PanelBottomClose } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
-function collapsiblePanelToggleIcon(side, collapsed) {
-  if (side === "left")
-    return collapsed ? { icon: PanelLeftOpen, name: "panel-left-open" } : { icon: PanelLeftClose, name: "panel-left-close" };
-  if (side === "right")
-    return collapsed ? { icon: PanelRightOpen, name: "panel-right-open" } : { icon: PanelRightClose, name: "panel-right-close" };
-  return collapsed ? { icon: PanelBottomOpen, name: "panel-bottom-open" } : { icon: PanelBottomClose, name: "panel-bottom-close" };
-}
+var toggleAttributes = (panelId) => ({
+  "data-collapsible-target": panelId,
+  // Keyed, so the morph never reuses a (possibly focused) toggle's button for
+  // another control as the toggle moves between toolbars.
+  "data-key": `${panelId}-toggle`
+});
 function CollapsiblePanelToggle({
   side,
   collapsed,
@@ -41,6 +45,8 @@ function CollapsiblePanel({
   size,
   label,
   children,
+  toolbar,
+  footer,
   separator = "auto",
   collapseMotion = "slide",
   contentOverflow = "clip",
@@ -67,7 +73,19 @@ function CollapsiblePanel({
         "aria-hidden": collapsed || presentation === "hidden" ? "true" : void 0,
         inert: collapsed,
         style: size ? `${sizeVar}: ${size}px` : void 0,
-        children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children })
+        children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children: toolbar ? /* @__PURE__ */ jsx(
+          Pane,
+          {
+            header: composedPanelToolbar(
+              toolbar,
+              side,
+              collapsed,
+              toggleAttributes(id)
+            ),
+            footer,
+            children
+          }
+        ) : children })
       }
     ),
     collapsed && restoreControl && presentation !== "hidden" && /* @__PURE__ */ jsx(
@@ -81,7 +99,20 @@ function CollapsiblePanel({
     )
   ] });
 }
+function CollapsiblePanelRelocated({
+  panelId,
+  side,
+  collapsed,
+  toolbar
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: relocatedPanelGroups(
+    toolbar,
+    side,
+    collapsed,
+    toggleAttributes(panelId)
+  ) });
+}
 
-export { CollapsiblePanel, CollapsiblePanelToggle, collapsiblePanelToggleIcon };
+export { CollapsiblePanel, CollapsiblePanelRelocated, CollapsiblePanelToggle };
 
 //# sourceMappingURL=collapsible-panel.js.map

package/dist/collapsible-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n  PanelBottomClose,\n  PanelBottomOpen,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PanelRightClose,\n  PanelRightOpen,\n} from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type {\n  ResizableRegionCollapseMotion,\n  ResizableRegionContentOverflow,\n  ResizableRegionPresentation,\n  ResizableRegionRestorePosition,\n  ResizableRegionSeparator,\n} from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = 'left' | 'right' | 'bottom';\n\n/**\n * The standard collapse/expand icon for a panel `side` and `collapsed` state,\n * so every app's sidebars and drawers use one recognizable convention:\n * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`\n * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while\n * collapsed. Exposed so an app can render its own toggle affordance.\n */\nexport function collapsiblePanelToggleIcon(\n  side: CollapsiblePanelSide,\n  collapsed: boolean,\n): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n  if (side === 'left')\n    return collapsed\n      ? { icon: PanelLeftOpen, name: 'panel-left-open' }\n      : { icon: PanelLeftClose, name: 'panel-left-close' };\n  if (side === 'right')\n    return collapsed\n      ? { icon: PanelRightOpen, name: 'panel-right-open' }\n      : { icon: PanelRightClose, name: 'panel-right-close' };\n  return collapsed\n    ? { icon: PanelBottomOpen, name: 'panel-bottom-open' }\n    : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\nexport interface CollapsiblePanelToggleProps {\n  /** The panel this toggle controls. */\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state (drives the icon direction). */\n  collapsed: boolean;\n  /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n  action: string;\n  /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n  panelId?: string;\n  /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n  label?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n  side,\n  collapsed,\n  action,\n  panelId,\n  label,\n  className = '',\n  slot,\n}: CollapsiblePanelToggleProps) {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n  return (\n    <button\n      type=\"button\"\n      class={`kui-collapsible-panel__toggle ${className}`.trim()}\n      data-action={action}\n      data-collapsible-target={panelId}\n      aria-expanded={String(!collapsed)}\n      aria-label={accessible}\n      slot={slot}\n    >\n      <LucideIcon icon={glyph.icon} name={glyph.name} />\n    </button>\n  );\n}\n\nexport interface CollapsiblePanelProps {\n  /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n  id: string;\n  /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n  side: CollapsiblePanelSide;\n  /** Whether the panel is currently collapsed (the app owns this signal). */\n  collapsed?: boolean;\n  /** Rail width or drawer height in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible label for the panel region. */\n  label?: string;\n  /** Panel content. */\n  children?: KerfUiContent;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n  className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n  id,\n  side,\n  collapsed = false,\n  size,\n  label,\n  children,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n  className = '',\n}: CollapsiblePanelProps) {\n  const sizeVar =\n    side === 'bottom'\n      ? '--kui-collapsible-panel-height'\n      : '--kui-collapsible-panel-width';\n  return (\n    <>\n      <aside\n        class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n        data-component=\"collapsible-panel\"\n        data-collapsible-panel={id}\n        data-side={side}\n        data-collapsed={String(collapsed)}\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        aria-label={label || undefined}\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        inert={collapsed}\n        style={size ? `${sizeVar}: ${size}px` : undefined}\n      >\n        <div class=\"kui-collapsible-panel__content\">{children}</div>\n      </aside>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-collapsible-panel__restore\"\n          data-panel-restore={id}\n          data-position={restorePosition}\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["../src/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport { Pane } from './pane.js';\nimport {\n  collapsiblePanelToggleIcon,\n  composedPanelToolbar,\n  type PanelSide,\n  type PanelToggle,\n  type PanelToggleAttributes,\n  type PanelToolbar,\n  relocatedPanelGroups,\n} from './panel-toolbar.js';\nimport type {\n  ResizableRegionCollapseMotion,\n  ResizableRegionContentOverflow,\n  ResizableRegionPresentation,\n  ResizableRegionRestorePosition,\n  ResizableRegionSeparator,\n} from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport { collapsiblePanelToggleIcon } from './panel-toolbar.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = PanelSide;\n\n/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */\nexport type CollapsiblePanelToolbarToggle = PanelToggle;\n\n/**\n * A panel's composed top toolbar. `title` and `panelOnly` groups lead it and\n * are available only while the panel is open; `constant` groups and the\n * standard `toggle` trail it while open and move to the app's work-area\n * toolbar — through {@link CollapsiblePanelRelocated} — while it is collapsed.\n */\nexport type CollapsiblePanelToolbar = PanelToolbar;\n\n/** A CollapsiblePanel toggle's `wireSidebar` hook. */\nconst toggleAttributes = (panelId: string): PanelToggleAttributes => ({\n  'data-collapsible-target': panelId,\n  // Keyed, so the morph never reuses a (possibly focused) toggle's button for\n  // another control as the toggle moves between toolbars.\n  'data-key': `${panelId}-toggle`,\n});\n\nexport interface CollapsiblePanelToggleProps {\n  /** The panel this toggle controls. */\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state (drives the icon direction). */\n  collapsed: boolean;\n  /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n  action: string;\n  /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n  panelId?: string;\n  /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n  label?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n  side,\n  collapsed,\n  action,\n  panelId,\n  label,\n  className = '',\n  slot,\n}: CollapsiblePanelToggleProps) {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n  return (\n    <button\n      type=\"button\"\n      class={`kui-collapsible-panel__toggle ${className}`.trim()}\n      data-action={action}\n      data-collapsible-target={panelId}\n      aria-expanded={String(!collapsed)}\n      aria-label={accessible}\n      slot={slot}\n    >\n      <LucideIcon icon={glyph.icon} name={glyph.name} />\n    </button>\n  );\n}\n\nexport interface CollapsiblePanelProps {\n  /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n  id: string;\n  /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n  side: CollapsiblePanelSide;\n  /** Whether the panel is currently collapsed (the app owns this signal). */\n  collapsed?: boolean;\n  /** Rail width or drawer height in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible label for the panel region. */\n  label?: string;\n  /** Panel content. */\n  children?: KerfUiContent;\n  /**\n   * The panel's top toolbar, composed so its groups follow the panel's open\n   * state. With it, `children` renders in a `Pane` below the toolbar; render\n   * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the\n   * `constant` groups and toggle stay reachable while the panel is collapsed.\n   */\n  toolbar?: CollapsiblePanelToolbar;\n  /** Optional bottom toolbar under a `toolbar` panel's content. */\n  footer?: KerfUiContent;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n  className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n  id,\n  side,\n  collapsed = false,\n  size,\n  label,\n  children,\n  toolbar,\n  footer,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n  className = '',\n}: CollapsiblePanelProps) {\n  const sizeVar =\n    side === 'bottom'\n      ? '--kui-collapsible-panel-height'\n      : '--kui-collapsible-panel-width';\n  return (\n    <>\n      <aside\n        class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n        data-component=\"collapsible-panel\"\n        data-collapsible-panel={id}\n        data-side={side}\n        data-collapsed={String(collapsed)}\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        aria-label={label || undefined}\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        inert={collapsed}\n        style={size ? `${sizeVar}: ${size}px` : undefined}\n      >\n        <div class=\"kui-collapsible-panel__content\">\n          {toolbar ? (\n            <Pane\n              header={composedPanelToolbar(\n                toolbar,\n                side,\n                collapsed,\n                toggleAttributes(id),\n              )}\n              footer={footer}\n            >\n              {children}\n            </Pane>\n          ) : (\n            children\n          )}\n        </div>\n      </aside>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-collapsible-panel__restore\"\n          data-panel-restore={id}\n          data-position={restorePosition}\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport interface CollapsiblePanelRelocatedProps {\n  /** The panel's `id`. */\n  panelId: string;\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state. */\n  collapsed: boolean;\n  /** The same `toolbar` the panel receives. */\n  toolbar: CollapsiblePanelToolbar;\n}\n\n/**\n * A collapsed {@link CollapsiblePanel}'s `constant` groups and standard\n * toggle, for the app's work-area toolbar — nothing while the panel is open.\n * Put it first in the leading zone for a left rail, last in the trailing zone\n * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`\n * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when\n * the panel closes from its own toggle.\n */\nexport function CollapsiblePanelRelocated({\n  panelId,\n  side,\n  collapsed,\n  toolbar,\n}: CollapsiblePanelRelocatedProps) {\n  return (\n    <>\n      {relocatedPanelGroups(\n        toolbar,\n        side,\n        collapsed,\n        toggleAttributes(panelId),\n      )}\n    </>\n  );\n}\n"]}

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { ListItem, ListItemProps } from './list-item.js';
 export { LoadingSpinner, LoadingSpinnerProps } from './loading-spinner.js';
 export { LucideIcon, LucideIconProps, LucideNode } from './lucide-icon.js';
 export { Pane, PaneContentElement, PaneElement, PaneProps, PaneSeparatorSide } from './pane.js';
+export { PopupMenu, PopupMenuDivider, PopupMenuEntry, PopupMenuHeading, PopupMenuItem, PopupMenuPlacement, PopupMenuProps } from './popup-menu.js';
 export { ResizableRegion, ResizableRegionAxis, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionEdge, ResizableRegionPresentation, ResizableRegionProps, ResizableRegionResponsiveFillAt, ResizableRegionRestorePosition, ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
 export { Row, RowProps } from './row.js';
 export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, SegmentedControlLayout, SegmentedControlProps, SegmentedControlShape, SegmentedControlSize } from './segmented-control.js';

package/dist/index.js

@@ -1,38 +1,39 @@
-export { wireTokenSearchFields } from './chunk-CMUIXJZM.js';
+export { reorderTabs, wireTabBars } from './chunk-46263QLK.js';
+export { wireTokenSearchFields } from './chunk-BSKEH3UC.js';
 export { ValueTable, ValueTableRow } from './chunk-44IG7PFV.js';
 export { wireResizableRegions } from './chunk-XQV2B4IL.js';
 
-export { reorderTabs, wireTabBars } from './chunk-46263QLK.js';
+export { StateBanner } from './chunk-LZXQVUGN.js';
+export { SunkenPanel } from './chunk-6ZXOQEAN.js';
 export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
 export { TabBar } from './chunk-N3GKMPDW.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-HJKRCKDR.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-RNRUVPJ3.js';
 export { SegmentedControl } from './chunk-X5QSICJ3.js';
 export { Select } from './chunk-T22EM4ET.js';
 export { Spacer } from './chunk-ZMBU522F.js';
-export { StateBanner } from './chunk-BJJKFVWW.js';
-export { SunkenPanel } from './chunk-6ZXOQEAN.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VHADGP3B.js';
-export { Row } from './chunk-5I22LMCV.js';
 export { EmptyState } from './chunk-E36EVCKG.js';
-export { FloatingToolbar } from './chunk-5NDQABWK.js';
 export { Grid } from './chunk-C2FAYFDE.js';
 export { ListActionRow } from './chunk-RNZAKSME.js';
 export { ListInsetControl } from './chunk-D7GWXIAS.js';
-export { ListInsetText } from './chunk-ZK5EGVFP.js';
 export { AppTab } from './chunk-NE5JAOQS.js';
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-ZIYOJFZD.js';
-export { Toolbar } from './chunk-MTM43SJO.js';
+export { Row } from './chunk-5I22LMCV.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VHADGP3B.js';
 export { ListItem } from './chunk-GUIHMIT2.js';
 export { List } from './chunk-3NBL3OUQ.js';
-export { ToolbarText } from './chunk-TZ5IHWB2.js';
-export { Pane } from './chunk-7GUQYHKA.js';
 
+export { ToolbarText } from './chunk-TZ5IHWB2.js';
+export { PopupMenu } from './chunk-4BIMLITI.js';
+export { FloatingToolbar } from './chunk-5NDQABWK.js';
 export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
-export { ListHeader } from './chunk-KPNTVB7A.js';
-export { Text } from './chunk-7IUSV4XG.js';
+export { ListHeader } from './chunk-R754MHXX.js';
+export { Text } from './chunk-24PHKUR3.js';
+export { ListInsetText } from './chunk-5OLVUEND.js';
 export { Skeleton } from './chunk-ATHXW6RP.js';
-
 export { Badge } from './chunk-XD7DWYXG.js';
+export { Toolbar } from './chunk-MTM43SJO.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-ZIYOJFZD.js';
+export { Pane } from './chunk-7GUQYHKA.js';
+
 export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-WZ2GLEY4.js';
 export { DisclosureArrow } from './chunk-HMQ2ZDGG.js';
 export { LucideIcon } from './chunk-4R777DUZ.js';

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-KPNTVB7A.js';
+export { ListHeader } from './chunk-R754MHXX.js';
 
 
 

package/dist/list-inset-text.d.ts

@@ -2,6 +2,10 @@ import * as kerfjs from 'kerfjs';
 import { S as Sides } from './divider-sides-BzB6rphT.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
+type ListInsetTextRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-sides'?: never;
+}>;
 interface ListInsetTextProps {
     /** Text (or inline content) that carries no margin, border, or padding of its own. */
     children: KerfUiContent | string;
@@ -15,6 +19,8 @@ interface ListInsetTextProps {
      */
     horizontalOnly?: boolean;
     className?: string;
+    /** Safe `data-*` metadata; component-owned structural attributes stay protected. */
+    rootAttributes?: ListInsetTextRootAttributes;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
@@ -26,6 +32,6 @@ interface ListInsetTextProps {
  * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box
  * space for tight text layout.
  */
-declare function ListInsetText({ children, sides, horizontalOnly, className, slot, }: ListInsetTextProps): kerfjs.SafeHtml;
+declare function ListInsetText({ children, sides, horizontalOnly, className, rootAttributes, slot, }: ListInsetTextProps): kerfjs.SafeHtml;
 
 export { ListInsetText, type ListInsetTextProps, Sides };

package/dist/list-inset-text.js

@@ -1,3 +1,4 @@
-export { ListInsetText } from './chunk-ZK5EGVFP.js';
+export { ListInsetText } from './chunk-5OLVUEND.js';
+
 
 //# sourceMappingURL=list-inset-text.js.map

package/dist/panel-toolbar-BFQxFITu.d.ts

@@ -0,0 +1,52 @@
+import { LucideIcon } from './lucide-icon.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/** Which edge a collapsible panel docks to. */
+type PanelSide = 'left' | 'right' | 'bottom';
+/**
+ * The standard collapse/expand icon for a panel `side` and `collapsed` state,
+ * so every app's sidebars and drawers use one recognizable convention:
+ * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`
+ * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while
+ * collapsed. Exposed so an app can render its own toggle affordance.
+ */
+declare function collapsiblePanelToggleIcon(side: PanelSide, collapsed: boolean): {
+    icon: Parameters<typeof LucideIcon>[0]['icon'];
+    name: string;
+};
+/**
+ * The standard collapse toggle a panel toolbar renders. The app handles the
+ * button's `data-action` and flips its own `collapsed` flag.
+ */
+interface PanelToggle {
+    /** The `data-action` the toggle button carries. */
+    action: string;
+    /** The panel's short name, for the accessible "Show …" / "Hide …" label. */
+    name: string;
+}
+/**
+ * A collapsible panel's top toolbar, composed so its groups follow the
+ * panel's open state.
+ *
+ * - `title` (a `ToolbarText`) and `panelOnly` groups lead the toolbar and are
+ *   available only while the panel is open.
+ * - `constant` groups stay available either way: they trail the panel's
+ *   toolbar while it is open and move to the work area's toolbar while it is
+ *   collapsed.
+ * - `toggle` is always the last group: in the panel's toolbar while it is
+ *   open, and right after the `constant` groups in the work area's toolbar
+ *   while it is collapsed.
+ *
+ * `constant` content renders in both places while the panel is collapsed (the
+ * panel's copy is inert), so give it no `id`s.
+ */
+interface PanelToolbar {
+    /** Accessible name of the panel's toolbar. */
+    label: string;
+    title?: KerfUiContent;
+    panelOnly?: KerfUiContent;
+    constant?: KerfUiContent;
+    toggle?: PanelToggle;
+}
+
+export { type PanelSide as P, type PanelToolbar as a, type PanelToggle as b, collapsiblePanelToggleIcon as c };

package/dist/popup-menu-register.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Marker export for tests and tooling; importing this module registers the
+ * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,
+ * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard
+ * choice through the item's click so delegated `data-action`s run.
+ */
+declare const popupMenuElementsRegistered = true;
+
+export { popupMenuElementsRegistered };