@kerfjs/ui 5.0.0-beta.17 → 5.0.0-beta.21

package/dist/chunk-W4CXQYSG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sunken-panel.tsx"],"names":[],"mappings":";;;AAcO,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAqB;AACnB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,IAAA,EAAM,YAAY,QAAA,GAAW,MAAA;AAAA,MAC7B,YAAA,EAAY,SAAA;AAAA,MAEX;AAAA;AAAA,GACH;AAEJ","file":"chunk-W4CXQYSG.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface SunkenPanelProps {\n  children?: SafeHtml | readonly SafeHtml[];\n  /** Optional accessible landmark name for a distinct application region. */\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * A lowered application surface with one compact inset and a vertical content\n * stack. The panel owns its background and padding; children own their own\n * borders and internal geometry.\n */\nexport function SunkenPanel({\n  children,\n  ariaLabel,\n  className = '',\n}: SunkenPanelProps) {\n  return (\n    <div\n      class={`kui-sunken-panel ${className}`.trim()}\n      data-component=\"sunken-panel\"\n      role={ariaLabel ? 'region' : undefined}\n      aria-label={ariaLabel}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-WXMGNX2Y.js → chunk-W7YD6E4N.js}

@@ -1,4 +1,4 @@
-import { Skeleton } from './chunk-B24C4A6T.js';
+import { Skeleton } from './chunk-PZQVSDLH.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 function ToolbarText({
@@ -35,4 +35,4 @@ function ToolbarText({
 
 export { ToolbarText };
 
-//# sourceMappingURL=chunk-WXMGNX2Y.js.map
+//# sourceMappingURL=chunk-W7YD6E4N.js.map

package/dist/chunk-W7YD6E4N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toolbar-text.tsx"],"names":[],"mappings":";;;AA2CO,SAAS,WAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,EAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW,IAAA;AAAA,EACX,QAAA,GAAW;AACb,CAAA,EAAqB;AACnB,EAAA,MAAM,MAAA,GAAS,IAAA,IAAQ,QAAA,IAAY,IAAA,IAAQ,QAAA,GAAW,CAAA;AACtD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,eAAA,EAAe,WAAW,MAAA,GAAY,OAAA;AAAA,MACtC,gBAAA,EAAgB,MAAA,GAAS,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAC5C,KAAA,EAAO,MAAA,GAAS,CAAA,6BAAA,EAAgC,QAAQ,CAAA,CAAA,GAAK,MAAA;AAAA,MAC7D,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,EAAA;AAAA,MACA,IAAA,EAAM,eAAe,SAAA,GAAY,MAAA;AAAA,MACjC,YAAA,EAAY,YAAA,GAAe,MAAA,CAAO,YAAY,CAAA,GAAI,MAAA;AAAA,MAClD,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,oBAEtB,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,GAE/C;AAEJ","file":"chunk-W7YD6E4N.js","sourcesContent":["import { Skeleton } from './skeleton.js';\n\nexport type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';\n\n/** ARIA heading level for a title exposed as a heading landmark. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface ToolbarTextBaseProps {\n  text: string;\n  size?: ToolbarTextSize;\n  className?: string;\n  /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n  id?: string;\n  /**\n   * Expose heading semantics (`role=\"heading\"` + `aria-level`) so the text acts as\n   * a heading landmark — e.g. a page's primary title. Omit to keep the plain span\n   * (the default), which suits a dialog title referenced via `aria-labelledby`.\n   */\n  headingLevel?: HeadingLevel;\n  /** Render the text as an unanimated loading skeleton instead of its value. */\n  placeholder?: boolean;\n  /**\n   * Show a trailing ellipsis (…) where the text is truncated — on the single line\n   * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip\n   * instead. Default true.\n   */\n  ellipsis?: boolean;\n  /**\n   * Cap wrapped text to this many lines, truncating past it. Only takes effect with\n   * `wrap`; ignored on a single line. `null`/omitted wraps without a line cap. Default null.\n   */\n}\n\ntype ToolbarTextWrappingProps =\n  | {\n      /** Wrap onto multiple lines; combine with `maxLines` to cap them. */\n      wrap: true;\n      maxLines?: number | null;\n    }\n  | { wrap?: false; maxLines?: never };\n\nexport type ToolbarTextProps = ToolbarTextBaseProps & ToolbarTextWrappingProps;\n\nexport function ToolbarText({\n  text,\n  size = 'default',\n  className = '',\n  id,\n  headingLevel,\n  placeholder = false,\n  wrap = false,\n  ellipsis = true,\n  maxLines = null,\n}: ToolbarTextProps) {\n  const capped = wrap && maxLines != null && maxLines > 0;\n  return (\n    <span\n      class={`kui-toolbar-text ${className}`.trim()}\n      data-component=\"toolbar-text\"\n      data-size={size}\n      data-wrap={wrap ? 'true' : undefined}\n      data-ellipsis={ellipsis ? undefined : 'false'}\n      data-max-lines={capped ? String(maxLines) : undefined}\n      style={capped ? `--kui-toolbar-text-max-lines:${maxLines}` : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      id={id}\n      role={headingLevel ? 'heading' : undefined}\n      aria-level={headingLevel ? String(headingLevel) : undefined}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      {placeholder ? (\n        <Skeleton width=\"8em\" />\n      ) : (\n        <span class=\"kui-toolbar-text__text\">{text}</span>\n      )}\n    </span>\n  );\n}\n"]}

package/dist/{chunk-56RJXPHG.js → chunk-Y6LYKFXY.js}

@@ -40,4 +40,4 @@ function DisclosureArrow({
 
 export { DisclosureArrow };
 
-//# sourceMappingURL=chunk-56RJXPHG.js.map
+//# sourceMappingURL=chunk-Y6LYKFXY.js.map

package/dist/{chunk-56RJXPHG.js.map → chunk-Y6LYKFXY.js.map}

@@ -1 +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"]}
+{"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,CAAkB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAO,GAAA;AACtE,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,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,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,MAEX,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAChE;AAEJ","file":"chunk-Y6LYKFXY.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 (\n    <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    >\n      {icon ?? <LucideIcon icon={ChevronRight} name=\"chevron-right\" />}\n    </span>\n  );\n}\n"]}

package/dist/collapsible-panel.d.ts

@@ -35,7 +35,7 @@ interface CollapsiblePanelToggleProps {
  * put it in the panel's own header (to collapse) and somewhere always-visible
  * (to expand while collapsed).
  */
-declare function CollapsiblePanelToggle({ side, collapsed, action, panelId, label, className }: CollapsiblePanelToggleProps): SafeHtml;
+declare function CollapsiblePanelToggle({ side, collapsed, action, panelId, label, className, }: CollapsiblePanelToggleProps): SafeHtml;
 interface CollapsiblePanelProps {
     /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */
     id: string;
@@ -61,6 +61,6 @@ interface CollapsiblePanelProps {
  * and persistence semantics, and with `CollapsiblePanelToggle` for the standard
  * affordance. See `docs/24-collapsible-panel.md`.
  */
-declare function CollapsiblePanel({ id, side, collapsed, size, label, children, className }: CollapsiblePanelProps): SafeHtml;
+declare function CollapsiblePanel({ id, side, collapsed, size, label, children, className, }: CollapsiblePanelProps): SafeHtml;
 
 export { CollapsiblePanel, type CollapsiblePanelProps, type CollapsiblePanelSide, CollapsiblePanelToggle, type CollapsiblePanelToggleProps, collapsiblePanelToggleIcon };

package/dist/collapsible-panel.js

@@ -3,18 +3,59 @@ import { PanelLeftOpen, PanelLeftClose, PanelRightOpen, PanelRightClose, PanelBo
 import { jsx } 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" };
+  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 CollapsiblePanelToggle({ side, collapsed, action, panelId, label, className = "" }) {
+function CollapsiblePanelToggle({
+  side,
+  collapsed,
+  action,
+  panelId,
+  label,
+  className = ""
+}) {
   const glyph = collapsiblePanelToggleIcon(side, collapsed);
   const accessible = label ?? (collapsed ? "Expand" : "Collapse");
-  return /* @__PURE__ */ jsx("button", { type: "button", class: `kui-collapsible-panel__toggle ${className}`.trim(), "data-action": action, "data-collapsible-target": panelId, "aria-expanded": String(!collapsed), "aria-label": accessible, children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name }) });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      class: `kui-collapsible-panel__toggle ${className}`.trim(),
+      "data-action": action,
+      "data-collapsible-target": panelId,
+      "aria-expanded": String(!collapsed),
+      "aria-label": accessible,
+      children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name })
+    }
+  );
 }
-function CollapsiblePanel({ id, side, collapsed = false, size, label, children, className = "" }) {
+function CollapsiblePanel({
+  id,
+  side,
+  collapsed = false,
+  size,
+  label,
+  children,
+  className = ""
+}) {
   const sizeVar = side === "bottom" ? "--kui-collapsible-panel-height" : "--kui-collapsible-panel-width";
-  return /* @__PURE__ */ jsx("aside", { class: `kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim(), "data-component": "collapsible-panel", "data-collapsible-panel": id, "data-side": side, "data-collapsed": String(collapsed), "aria-label": label || void 0, "aria-hidden": collapsed ? "true" : void 0, style: size ? `${sizeVar}: ${size}px` : void 0, children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children }) });
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      class: `kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim(),
+      "data-component": "collapsible-panel",
+      "data-collapsible-panel": id,
+      "data-side": side,
+      "data-collapsed": String(collapsed),
+      "aria-label": label || void 0,
+      "aria-hidden": collapsed ? "true" : void 0,
+      style: size ? `${sizeVar}: ${size}px` : void 0,
+      children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children })
+    }
+  );
 }
 
 export { CollapsiblePanel, CollapsiblePanelToggle, collapsiblePanelToggleIcon };

package/dist/collapsible-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/collapsible-panel.tsx"],"names":[],"mappings":";;;;AAeO,SAAS,0BAAA,CAA2B,MAA4B,SAAA,EAAsF;AAC3J,EAAA,IAAI,IAAA,KAAS,MAAA,EAAQ,OAAO,SAAA,GAAY,EAAE,IAAA,EAAM,aAAA,EAAe,IAAA,EAAM,iBAAA,EAAkB,GAAI,EAAE,IAAA,EAAM,cAAA,EAAgB,MAAM,kBAAA,EAAmB;AAC5I,EAAA,IAAI,IAAA,KAAS,OAAA,EAAS,OAAO,SAAA,GAAY,EAAE,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAM,kBAAA,EAAmB,GAAI,EAAE,IAAA,EAAM,eAAA,EAAiB,MAAM,mBAAA,EAAoB;AACjJ,EAAA,OAAO,SAAA,GAAY,EAAE,IAAA,EAAM,eAAA,EAAiB,IAAA,EAAM,mBAAA,EAAoB,GAAI,EAAE,IAAA,EAAM,gBAAA,EAAkB,IAAA,EAAM,oBAAA,EAAqB;AACjI;AAuBO,SAAS,sBAAA,CAAuB,EAAE,IAAA,EAAM,SAAA,EAAW,QAAQ,OAAA,EAAS,KAAA,EAAO,SAAA,GAAY,EAAA,EAAG,EAAgC;AAC/H,EAAA,MAAM,KAAA,GAAQ,0BAAA,CAA2B,IAAA,EAAM,SAAS,CAAA;AACxD,EAAA,MAAM,UAAA,GAAa,KAAA,KAAU,SAAA,GAAY,QAAA,GAAW,UAAA,CAAA;AACpD,EAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,KAAA,EAAO,CAAA,8BAAA,EAAiC,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,aAAA,EAAa,MAAA,EAAQ,yBAAA,EAAyB,OAAA,EAAS,eAAA,EAAe,MAAA,CAAO,CAAC,SAAS,CAAA,EAAG,YAAA,EAAY,UAAA,EAAY,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,KAAA,CAAM,IAAA,EAAM,IAAA,EAAM,KAAA,CAAM,MAAM,CAAA,EAAE,CAAA;AAC/P;AA4BO,SAAS,gBAAA,CAAiB,EAAE,EAAA,EAAI,IAAA,EAAM,SAAA,GAAY,KAAA,EAAO,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,SAAA,GAAY,EAAA,EAAG,EAA0B;AAC9H,EAAA,MAAM,OAAA,GAAU,IAAA,KAAS,QAAA,GAAW,gCAAA,GAAmC,+BAAA;AACvE,EAAA,2BAAQ,OAAA,EAAA,EAAM,KAAA,EAAO,gDAAgD,IAAI,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,qBAAoB,wBAAA,EAAwB,EAAA,EAAI,aAAW,IAAA,EAAM,gBAAA,EAAgB,OAAO,SAAS,CAAA,EAAG,YAAA,EAAY,KAAA,IAAS,QAAW,aAAA,EAAa,SAAA,GAAY,SAAS,MAAA,EAAW,KAAA,EAAO,OAAO,CAAA,EAAG,OAAO,CAAA,EAAA,EAAK,IAAI,OAAO,MAAA,EACvU,QAAA,kBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,gCAAA,EAAkC,UAAS,CAAA,EACxD,CAAA;AACF","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.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(side: CollapsiblePanelSide, collapsed: boolean): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n  if (side === 'left') return collapsed ? { icon: PanelLeftOpen, name: 'panel-left-open' } : { icon: PanelLeftClose, name: 'panel-left-close' };\n  if (side === 'right') return collapsed ? { icon: PanelRightOpen, name: 'panel-right-open' } : { icon: PanelRightClose, name: 'panel-right-close' };\n  return collapsed ? { icon: PanelBottomOpen, name: 'panel-bottom-open' } : { 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}\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({ side, collapsed, action, panelId, label, className = '' }: CollapsiblePanelToggleProps) {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n  return <button type=\"button\" class={`kui-collapsible-panel__toggle ${className}`.trim()} data-action={action} data-collapsible-target={panelId} aria-expanded={String(!collapsed)} aria-label={accessible}><LucideIcon icon={glyph.icon} name={glyph.name} /></button>;\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?: SafeHtml | readonly SafeHtml[];\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). 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 `docs/24-collapsible-panel.md`.\n */\nexport function CollapsiblePanel({ id, side, collapsed = false, size, label, children, className = '' }: CollapsiblePanelProps) {\n  const sizeVar = side === 'bottom' ? '--kui-collapsible-panel-height' : '--kui-collapsible-panel-width';\n  return <aside class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()} data-component=\"collapsible-panel\" data-collapsible-panel={id} data-side={side} data-collapsed={String(collapsed)} aria-label={label || undefined} aria-hidden={collapsed ? 'true' : undefined} style={size ? `${sizeVar}: ${size}px` : undefined}>\n    <div class=\"kui-collapsible-panel__content\">{children}</div>\n  </aside>;\n}\n"]}
+{"version":3,"sources":["../src/collapsible-panel.tsx"],"names":[],"mappings":";;;;AAsBO,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;AAuBO,SAAS,sBAAA,CAAuB;AAAA,EACrC,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAgC;AAC9B,EAAA,MAAM,KAAA,GAAQ,0BAAA,CAA2B,IAAA,EAAM,SAAS,CAAA;AACxD,EAAA,MAAM,UAAA,GAAa,KAAA,KAAU,SAAA,GAAY,QAAA,GAAW,UAAA,CAAA;AACpD,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,KAAA,EAAO,CAAA,8BAAA,EAAiC,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzD,aAAA,EAAa,MAAA;AAAA,MACb,yBAAA,EAAyB,OAAA;AAAA,MACzB,eAAA,EAAe,MAAA,CAAO,CAAC,SAAS,CAAA;AAAA,MAChC,YAAA,EAAY,UAAA;AAAA,MAEZ,8BAAC,UAAA,EAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM;AAAA;AAAA,GAClD;AAEJ;AA4BO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,EAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAA0B;AACxB,EAAA,MAAM,OAAA,GACJ,IAAA,KAAS,QAAA,GACL,gCAAA,GACA,+BAAA;AACN,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAO,CAAA,6CAAA,EAAgD,IAAI,CAAA,CAAA,EAAI,SAAS,GAAG,IAAA,EAAK;AAAA,MAChF,gBAAA,EAAe,mBAAA;AAAA,MACf,wBAAA,EAAwB,EAAA;AAAA,MACxB,WAAA,EAAW,IAAA;AAAA,MACX,gBAAA,EAAgB,OAAO,SAAS,CAAA;AAAA,MAChC,cAAY,KAAA,IAAS,MAAA;AAAA,MACrB,aAAA,EAAa,YAAY,MAAA,GAAS,MAAA;AAAA,MAClC,OAAO,IAAA,GAAO,CAAA,EAAG,OAAO,CAAA,EAAA,EAAK,IAAI,CAAA,EAAA,CAAA,GAAO,MAAA;AAAA,MAExC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,gCAAA,EAAkC,QAAA,EAAS;AAAA;AAAA,GACxD;AAEJ","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';\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}\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}: 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    >\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?: SafeHtml | readonly SafeHtml[];\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). 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 `docs/24-collapsible-panel.md`.\n */\nexport function CollapsiblePanel({\n  id,\n  side,\n  collapsed = false,\n  size,\n  label,\n  children,\n  className = '',\n}: CollapsiblePanelProps) {\n  const sizeVar =\n    side === 'bottom'\n      ? '--kui-collapsible-panel-height'\n      : '--kui-collapsible-panel-width';\n  return (\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      aria-label={label || undefined}\n      aria-hidden={collapsed ? 'true' : undefined}\n      style={size ? `${sizeVar}: ${size}px` : undefined}\n    >\n      <div class=\"kui-collapsible-panel__content\">{children}</div>\n    </aside>\n  );\n}\n"]}

package/dist/device-class.js

@@ -7,8 +7,19 @@ var DEFAULT_BREAKPOINTS = {
   desktop: 1024,
   "xl-desktop": 1440
 };
-var SIZE_ORDER = ["xs-mobile", "mobile", "tablet", "desktop", "xl-desktop"];
-var SSR_VIEWPORT = { width: 1024, height: 768, segments: 1, verticalSegments: 1 };
+var SIZE_ORDER = [
+  "xs-mobile",
+  "mobile",
+  "tablet",
+  "desktop",
+  "xl-desktop"
+];
+var SSR_VIEWPORT = {
+  width: 1024,
+  height: 768,
+  segments: 1,
+  verticalSegments: 1
+};
 function classifyViewport(width, orientation, segments = 1, verticalSegments = 1, breakpoints = DEFAULT_BREAKPOINTS) {
   const size = width >= breakpoints["xl-desktop"] ? "xl-desktop" : width >= breakpoints.desktop ? "desktop" : width >= breakpoints.tablet ? "tablet" : width >= breakpoints.mobile ? "mobile" : "xs-mobile";
   const rank = SIZE_ORDER.indexOf(size);
@@ -57,16 +68,33 @@ function orientationOf(view) {
   return view.height > view.width ? "portrait" : "landscape";
 }
 function deviceClass(options = {}) {
-  const breakpoints = { ...DEFAULT_BREAKPOINTS, ...options.breakpoints };
+  const breakpoints = {
+    ...DEFAULT_BREAKPOINTS,
+    ...options.breakpoints
+  };
   const view = browserWindow();
   if (!view) {
     const snapshot = { ...SSR_VIEWPORT, ...options.ssr };
-    return computed(() => classifyViewport(snapshot.width, orientationOf(snapshot), snapshot.segments, snapshot.verticalSegments, breakpoints));
+    return computed(
+      () => classifyViewport(
+        snapshot.width,
+        orientationOf(snapshot),
+        snapshot.segments,
+        snapshot.verticalSegments,
+        breakpoints
+      )
+    );
   }
   const source = viewportSource(view);
   return computed(() => {
     const v = source.value;
-    return classifyViewport(v.width, orientationOf(v), v.segments, v.verticalSegments, breakpoints);
+    return classifyViewport(
+      v.width,
+      orientationOf(v),
+      v.segments,
+      v.verticalSegments,
+      breakpoints
+    );
   });
 }
 

package/dist/device-class.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/device-class.ts"],"names":[],"mappings":"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","file":"device-class.js","sourcesContent":["import { computed, type ReadonlySignal, signal } from 'kerfjs';\n\n/**\n * Reactive device-class detection for `@kerfjs/ui` (see `docs/23-app-layouts.md`\n * §2). `deviceClass()` returns a `ReadonlySignal<DeviceClass>` describing the\n * current viewport as a size bucket × orientation × viewport-segment count, so a\n * layout can pick its presentation reactively instead of hand-wiring `matchMedia`.\n *\n * One shared viewport source backs every reader; the pure `classifyViewport`\n * core is DOM-free and directly unit-tested.\n */\n\nexport type DeviceSize = 'xs-mobile' | 'mobile' | 'tablet' | 'desktop' | 'xl-desktop';\nexport type DeviceOrientation = 'portrait' | 'landscape';\n\n/** Minimum widths (px) at which each larger bucket begins. `xs-mobile` is 0. */\nexport interface DeviceBreakpoints {\n  mobile: number;\n  tablet: number;\n  desktop: number;\n  'xl-desktop': number;\n}\n\nexport interface DeviceClass {\n  size: DeviceSize;\n  orientation: DeviceOrientation;\n  /** Horizontal viewport segments (foldables / dual-screen); 1 on ordinary devices. */\n  segments: number;\n  /** Vertical viewport segments; 1 on ordinary devices. */\n  verticalSegments: number;\n  /** Small phones — `xs-mobile` or `mobile`. */\n  handset: boolean;\n  /** \"One pane at a time\" — a handset or a portrait tablet. */\n  compact: boolean;\n  /** True when the current size is `size` or larger, e.g. `atLeast('tablet')`. */\n  atLeast(size: DeviceSize): boolean;\n}\n\n/** A raw viewport snapshot, before breakpoints are applied. */\nexport interface Viewport {\n  width: number;\n  height: number;\n  segments: number;\n  verticalSegments: number;\n}\n\nexport interface DeviceClassOptions {\n  /** Override any of the default bucket thresholds. */\n  breakpoints?: Partial<DeviceBreakpoints>;\n  /** The viewport assumed when there is no DOM (SSR). Defaults to 1024×768, one segment. */\n  ssr?: Partial<Viewport>;\n}\n\nexport const DEFAULT_BREAKPOINTS: DeviceBreakpoints = {\n  mobile: 360,\n  tablet: 720,\n  desktop: 1024,\n  'xl-desktop': 1440,\n};\n\nconst SIZE_ORDER: readonly DeviceSize[] = ['xs-mobile', 'mobile', 'tablet', 'desktop', 'xl-desktop'];\n\nconst SSR_VIEWPORT: Viewport = { width: 1024, height: 768, segments: 1, verticalSegments: 1 };\n\n/**\n * Classify a raw viewport into a {@link DeviceClass}. Pure and DOM-free — the\n * single source of truth for the bucketing rules.\n */\nexport function classifyViewport(\n  width: number,\n  orientation: DeviceOrientation,\n  segments = 1,\n  verticalSegments = 1,\n  breakpoints: DeviceBreakpoints = DEFAULT_BREAKPOINTS,\n): DeviceClass {\n  const size: DeviceSize =\n    width >= breakpoints['xl-desktop']\n      ? 'xl-desktop'\n      : width >= breakpoints.desktop\n        ? 'desktop'\n        : width >= breakpoints.tablet\n          ? 'tablet'\n          : width >= breakpoints.mobile\n            ? 'mobile'\n            : 'xs-mobile';\n  const rank = SIZE_ORDER.indexOf(size);\n  return {\n    size,\n    orientation,\n    segments,\n    verticalSegments,\n    handset: rank <= 1,\n    compact: rank <= 1 || (size === 'tablet' && orientation === 'portrait'),\n    atLeast: (target) => rank >= SIZE_ORDER.indexOf(target),\n  };\n}\n\n/** Count viewport segments along one axis, feature-detecting the media query. */\nfunction countSegments(axis: 'horizontal' | 'vertical', view: Window): number {\n  const mq = view.matchMedia;\n  if (typeof mq !== 'function') return 1;\n  for (let n = 4; n >= 2; n--) {\n    if (mq.call(view, `(${axis}-viewport-segments: ${n})`).matches) return n;\n  }\n  return 1;\n}\n\n/** Read the current viewport from a browser window. */\nfunction readViewport(view: Window): Viewport {\n  return {\n    width: view.innerWidth,\n    height: view.innerHeight,\n    segments: countSegments('horizontal', view),\n    verticalSegments: countSegments('vertical', view),\n  };\n}\n\n/** The browser window, or `undefined` when running without a DOM (SSR). */\nfunction browserWindow(): Window | undefined {\n  return typeof window === 'undefined' ? undefined : window;\n}\n\nlet sharedSource: ReturnType<typeof signal<Viewport>> | undefined;\n\n/**\n * The shared reactive viewport source. Installed lazily on first read and kept\n * for the life of the page — there is only ever one viewport, so a single\n * listener set backs every `deviceClass()` reader.\n */\nfunction viewportSource(view: Window): ReturnType<typeof signal<Viewport>> {\n  if (sharedSource) return sharedSource;\n  const source = signal(readViewport(view));\n  sharedSource = source;\n  const update = (): void => {\n    source.value = readViewport(view);\n  };\n  view.addEventListener('resize', update);\n  view.addEventListener('orientationchange', update);\n  return source;\n}\n\nfunction orientationOf(view: Viewport): DeviceOrientation {\n  return view.height > view.width ? 'portrait' : 'landscape';\n}\n\n/**\n * A reactive signal of the current {@link DeviceClass}. Reading it inside an\n * `effect`/`computed` re-runs when the viewport crosses a breakpoint, rotates,\n * or changes its segment count. Without a DOM it resolves to `options.ssr`\n * (default 1024×768, landscape, one segment).\n */\nexport function deviceClass(options: DeviceClassOptions = {}): ReadonlySignal<DeviceClass> {\n  const breakpoints: DeviceBreakpoints = { ...DEFAULT_BREAKPOINTS, ...options.breakpoints };\n  const view = browserWindow();\n  if (!view) {\n    const snapshot: Viewport = { ...SSR_VIEWPORT, ...options.ssr };\n    return computed(() => classifyViewport(snapshot.width, orientationOf(snapshot), snapshot.segments, snapshot.verticalSegments, breakpoints));\n  }\n  const source = viewportSource(view);\n  return computed(() => {\n    const v = source.value;\n    return classifyViewport(v.width, orientationOf(v), v.segments, v.verticalSegments, breakpoints);\n  });\n}\n"]}
+{"version":3,"sources":["../src/device-class.ts"],"names":[],"mappings":"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","file":"device-class.js","sourcesContent":["import { computed, type ReadonlySignal, signal } from 'kerfjs';\n\n/**\n * Reactive device-class detection for `@kerfjs/ui` (see `docs/23-app-layouts.md`\n * §2). `deviceClass()` returns a `ReadonlySignal<DeviceClass>` describing the\n * current viewport as a size bucket × orientation × viewport-segment count, so a\n * layout can pick its presentation reactively instead of hand-wiring `matchMedia`.\n *\n * One shared viewport source backs every reader; the pure `classifyViewport`\n * core is DOM-free and directly unit-tested.\n */\n\nexport type DeviceSize =\n  'xs-mobile' | 'mobile' | 'tablet' | 'desktop' | 'xl-desktop';\nexport type DeviceOrientation = 'portrait' | 'landscape';\n\n/** Minimum widths (px) at which each larger bucket begins. `xs-mobile` is 0. */\nexport interface DeviceBreakpoints {\n  mobile: number;\n  tablet: number;\n  desktop: number;\n  'xl-desktop': number;\n}\n\nexport interface DeviceClass {\n  size: DeviceSize;\n  orientation: DeviceOrientation;\n  /** Horizontal viewport segments (foldables / dual-screen); 1 on ordinary devices. */\n  segments: number;\n  /** Vertical viewport segments; 1 on ordinary devices. */\n  verticalSegments: number;\n  /** Small phones — `xs-mobile` or `mobile`. */\n  handset: boolean;\n  /** \"One pane at a time\" — a handset or a portrait tablet. */\n  compact: boolean;\n  /** True when the current size is `size` or larger, e.g. `atLeast('tablet')`. */\n  atLeast(size: DeviceSize): boolean;\n}\n\n/** A raw viewport snapshot, before breakpoints are applied. */\nexport interface Viewport {\n  width: number;\n  height: number;\n  segments: number;\n  verticalSegments: number;\n}\n\nexport interface DeviceClassOptions {\n  /** Override any of the default bucket thresholds. */\n  breakpoints?: Partial<DeviceBreakpoints>;\n  /** The viewport assumed when there is no DOM (SSR). Defaults to 1024×768, one segment. */\n  ssr?: Partial<Viewport>;\n}\n\nexport const DEFAULT_BREAKPOINTS: DeviceBreakpoints = {\n  mobile: 360,\n  tablet: 720,\n  desktop: 1024,\n  'xl-desktop': 1440,\n};\n\nconst SIZE_ORDER: readonly DeviceSize[] = [\n  'xs-mobile',\n  'mobile',\n  'tablet',\n  'desktop',\n  'xl-desktop',\n];\n\nconst SSR_VIEWPORT: Viewport = {\n  width: 1024,\n  height: 768,\n  segments: 1,\n  verticalSegments: 1,\n};\n\n/**\n * Classify a raw viewport into a {@link DeviceClass}. Pure and DOM-free — the\n * single source of truth for the bucketing rules.\n */\nexport function classifyViewport(\n  width: number,\n  orientation: DeviceOrientation,\n  segments = 1,\n  verticalSegments = 1,\n  breakpoints: DeviceBreakpoints = DEFAULT_BREAKPOINTS,\n): DeviceClass {\n  const size: DeviceSize =\n    width >= breakpoints['xl-desktop']\n      ? 'xl-desktop'\n      : width >= breakpoints.desktop\n        ? 'desktop'\n        : width >= breakpoints.tablet\n          ? 'tablet'\n          : width >= breakpoints.mobile\n            ? 'mobile'\n            : 'xs-mobile';\n  const rank = SIZE_ORDER.indexOf(size);\n  return {\n    size,\n    orientation,\n    segments,\n    verticalSegments,\n    handset: rank <= 1,\n    compact: rank <= 1 || (size === 'tablet' && orientation === 'portrait'),\n    atLeast: (target) => rank >= SIZE_ORDER.indexOf(target),\n  };\n}\n\n/** Count viewport segments along one axis, feature-detecting the media query. */\nfunction countSegments(axis: 'horizontal' | 'vertical', view: Window): number {\n  const mq = view.matchMedia;\n  if (typeof mq !== 'function') return 1;\n  for (let n = 4; n >= 2; n--) {\n    if (mq.call(view, `(${axis}-viewport-segments: ${n})`).matches) return n;\n  }\n  return 1;\n}\n\n/** Read the current viewport from a browser window. */\nfunction readViewport(view: Window): Viewport {\n  return {\n    width: view.innerWidth,\n    height: view.innerHeight,\n    segments: countSegments('horizontal', view),\n    verticalSegments: countSegments('vertical', view),\n  };\n}\n\n/** The browser window, or `undefined` when running without a DOM (SSR). */\nfunction browserWindow(): Window | undefined {\n  return typeof window === 'undefined' ? undefined : window;\n}\n\nlet sharedSource: ReturnType<typeof signal<Viewport>> | undefined;\n\n/**\n * The shared reactive viewport source. Installed lazily on first read and kept\n * for the life of the page — there is only ever one viewport, so a single\n * listener set backs every `deviceClass()` reader.\n */\nfunction viewportSource(view: Window): ReturnType<typeof signal<Viewport>> {\n  if (sharedSource) return sharedSource;\n  const source = signal(readViewport(view));\n  sharedSource = source;\n  const update = (): void => {\n    source.value = readViewport(view);\n  };\n  view.addEventListener('resize', update);\n  view.addEventListener('orientationchange', update);\n  return source;\n}\n\nfunction orientationOf(view: Viewport): DeviceOrientation {\n  return view.height > view.width ? 'portrait' : 'landscape';\n}\n\n/**\n * A reactive signal of the current {@link DeviceClass}. Reading it inside an\n * `effect`/`computed` re-runs when the viewport crosses a breakpoint, rotates,\n * or changes its segment count. Without a DOM it resolves to `options.ssr`\n * (default 1024×768, landscape, one segment).\n */\nexport function deviceClass(\n  options: DeviceClassOptions = {},\n): ReadonlySignal<DeviceClass> {\n  const breakpoints: DeviceBreakpoints = {\n    ...DEFAULT_BREAKPOINTS,\n    ...options.breakpoints,\n  };\n  const view = browserWindow();\n  if (!view) {\n    const snapshot: Viewport = { ...SSR_VIEWPORT, ...options.ssr };\n    return computed(() =>\n      classifyViewport(\n        snapshot.width,\n        orientationOf(snapshot),\n        snapshot.segments,\n        snapshot.verticalSegments,\n        breakpoints,\n      ),\n    );\n  }\n  const source = viewportSource(view);\n  return computed(() => {\n    const v = source.value;\n    return classifyViewport(\n      v.width,\n      orientationOf(v),\n      v.segments,\n      v.verticalSegments,\n      breakpoints,\n    );\n  });\n}\n"]}

package/dist/disclosure-arrow.js

@@ -1,4 +1,4 @@
-export { DisclosureArrow } from './chunk-56RJXPHG.js';
+export { DisclosureArrow } from './chunk-Y6LYKFXY.js';
 
 
 //# sourceMappingURL=disclosure-arrow.js.map

package/dist/empty-state.d.ts

@@ -8,6 +8,6 @@ interface EmptyStateProps {
     busy?: boolean;
     className?: string;
 }
-declare function EmptyState({ title, detail, icon, action, busy, className }: EmptyStateProps): SafeHtml;
+declare function EmptyState({ title, detail, icon, action, busy, className, }: EmptyStateProps): SafeHtml;
 
 export { EmptyState, type EmptyStateProps };

package/dist/empty-state.js

@@ -1,4 +1,4 @@
-export { EmptyState } from './chunk-WVPYVDXY.js';
+export { EmptyState } from './chunk-PX3YSS5C.js';
 
 
 //# sourceMappingURL=empty-state.js.map

package/dist/floating-toolbar.d.ts

@@ -23,6 +23,6 @@ interface FloatingToolbarProps {
  * top toolbar's own inset); override that token to move it. The app owns the
  * controls and their behavior — wire them with `delegate()` as usual.
  */
-declare function FloatingToolbar({ children, label, position, className }: FloatingToolbarProps): SafeHtml;
+declare function FloatingToolbar({ children, label, position, className, }: FloatingToolbarProps): SafeHtml;
 
 export { FloatingToolbar, type FloatingToolbarPosition, type FloatingToolbarProps };

package/dist/floating-toolbar.js

@@ -1,3 +1,3 @@
-export { FloatingToolbar } from './chunk-5E2HVJ33.js';
+export { FloatingToolbar } from './chunk-LPOMRC4C.js';
 
 //# sourceMappingURL=floating-toolbar.js.map

package/dist/index.d.ts

@@ -9,16 +9,18 @@ export { ListInsetText, ListInsetTextProps } from './list-inset-text.js';
 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 { PanelHeader, PanelHeaderProps } from './panel-header.js';
 export { ResizableRegion, ResizableRegionAxis, ResizableRegionEdge, ResizableRegionProps, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
 export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, SegmentedControlLayout, SegmentedControlProps, SegmentedControlShape, SegmentedControlSize } from './segmented-control.js';
 export { Select, SelectChoice, SelectProps } from './select.js';
 export { Skeleton, SkeletonProps } from './skeleton.js';
-export { StateBanner, StateBannerProps, StateBannerTone } from './state-banner.js';
-export { TabBar, TabBarProps } from './tab-bar.js';
-export { TokenSearchField, TokenSearchFieldProps, TokenSearchFieldValue, TokenSearchToken, placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';
+export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } from './state-banner.js';
+export { SunkenPanel, SunkenPanelProps } from './sunken-panel.js';
+export { TabActivation, TabBar, TabBarProps } from './tab-bar.js';
+export { TokenSearchEditorAttributes, TokenSearchField, TokenSearchFieldProps, TokenSearchFieldValue, TokenSearchToken, placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';
 export { Toolbar, ToolbarProps } from './toolbar.js';
-export { ToolbarControlGroup, ToolbarControlGroupProps } from './toolbar-control-group.js';
+export { ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupProps, ToolbarControlGroupShape, ToolbarControlGroupTone } from './toolbar-control-group.js';
 export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize } from './toolbar-text.js';
 export { ValueTable, ValueTableProps, ValueTableRow, ValueTableRowProps } from './value-table.js';
 export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from './wire-resizable-regions.js';

package/dist/index.js

@@ -1,29 +1,31 @@
-export { wireResizableRegions } from './chunk-AQNKJRFH.js';
-export { reorderTabs, wireTabBars } from './chunk-XXMOARTH.js';
-export { wireTokenSearchFields } from './chunk-6NLRBSVX.js';
-export { TabBar } from './chunk-AVZHJN6C.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
-export { ValueTable, ValueTableRow } from './chunk-37T3VNIZ.js';
-export { PanelHeader } from './chunk-ZQQ6P4SV.js';
-export { SegmentedControl } from './chunk-YGN7OMLT.js';
-export { Select } from './chunk-CH4SQ6H5.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-M5JRI6MN.js';
-export { StateBanner } from './chunk-I7INRJO4.js';
-export { ListActionRow } from './chunk-7JB7VPRI.js';
-export { ListInsetControl } from './chunk-VPCTCUED.js';
-export { ListInsetText } from './chunk-AHQI52QO.js';
-export { ToolbarText } from './chunk-WXMGNX2Y.js';
-export { AppTab } from './chunk-2Z5TWHKQ.js';
-export { ToolbarControlGroup } from './chunk-RNPGFQ33.js';
-export { Toolbar } from './chunk-DAFFDO33.js';
-export { ListHeader } from './chunk-5ATCDSQS.js';
-export { ListItem } from './chunk-L4OKFDJY.js';
+export { wireTokenSearchFields } from './chunk-CN2XNTAM.js';
+export { ValueTable, ValueTableRow } from './chunk-QQFJMRIB.js';
+export { wireResizableRegions } from './chunk-DPDBVKNA.js';
+export { reorderTabs, wireTabBars } from './chunk-AASLYRGE.js';
+export { StateBanner } from './chunk-VLYV65LK.js';
+export { SunkenPanel } from './chunk-W4CXQYSG.js';
+export { TabBar } from './chunk-M7JBER5U.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7KEUJIIC.js';
+export { PanelHeader } from './chunk-RYRIFZCT.js';
+export { ToolbarText } from './chunk-W7YD6E4N.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-NENBUYX5.js';
+export { SegmentedControl } from './chunk-OZWU5ZPZ.js';
+export { Select } from './chunk-K57KRAOV.js';
+export { ListActionRow } from './chunk-BBRXX6PF.js';
+export { ListInsetControl } from './chunk-QO55FN2Y.js';
+export { ListInsetText } from './chunk-FEY65TBV.js';
+export { AppTab } from './chunk-PIDTEQ3U.js';
+export { Pane } from './chunk-JRKSK2HX.js';
+export { Toolbar } from './chunk-7L6EHUMV.js';
+export { ToolbarControlGroup } from './chunk-5VTB2BKP.js';
+export { ListHeader } from './chunk-DSNIYOZ3.js';
+export { ListItem } from './chunk-ELSJX4W7.js';
 
-export { Skeleton } from './chunk-B24C4A6T.js';
-export { DisclosureArrow } from './chunk-56RJXPHG.js';
+export { Skeleton } from './chunk-PZQVSDLH.js';
+export { DisclosureArrow } from './chunk-Y6LYKFXY.js';
 export { LucideIcon } from './chunk-W2FK7ZNY.js';
-export { EmptyState } from './chunk-WVPYVDXY.js';
-export { LoadingSpinner } from './chunk-55DATV3A.js';
-export { FloatingToolbar } from './chunk-5E2HVJ33.js';
+export { EmptyState } from './chunk-PX3YSS5C.js';
+export { LoadingSpinner } from './chunk-6WTETUZ6.js';
+export { FloatingToolbar } from './chunk-LPOMRC4C.js';
 
 //# sourceMappingURL=index.js.map

package/dist/list-action-row.d.ts

@@ -47,6 +47,6 @@ interface ListActionRowProps {
     rootAttributes?: ListActionRowRootAttributes;
     trailingActionAttributes?: ListActionRowTrailingAttributes;
 }
-declare function ListActionRow({ label, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, className, style, rootAttributes, trailingActionAttributes }: ListActionRowProps): SafeHtml;
+declare function ListActionRow({ label, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, className, style, rootAttributes, trailingActionAttributes, }: ListActionRowProps): SafeHtml;
 
 export { ListActionRow, type ListActionRowProps };

package/dist/list-action-row.js

@@ -1,4 +1,4 @@
-export { ListActionRow } from './chunk-7JB7VPRI.js';
+export { ListActionRow } from './chunk-BBRXX6PF.js';
 
 
 

package/dist/list-header.d.ts

@@ -16,18 +16,39 @@ type ListHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | un
 }>;
 interface ListHeaderBaseProps {
     label: string;
-    action?: string;
-    actionLabel?: string;
-    actionIcon?: SafeHtml;
-    actionDisabled?: boolean;
-    disabledReason?: string;
-    expanded?: boolean;
-    toggle?: boolean;
     /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */
     placeholder?: boolean;
     rootAttributes?: ListHeaderRootAttributes;
     triggerAttributes?: ListHeaderTriggerAttributes;
 }
+type ListHeaderModeProps = {
+    /** Render the title as a controlled disclosure trigger. */
+    toggle: true;
+    action: string;
+    expanded: boolean;
+    actionIcon?: SafeHtml;
+    actionLabel?: never;
+    actionDisabled?: boolean;
+    disabledReason?: string;
+} | {
+    /** Render a separately named trailing action. */
+    toggle?: false;
+    action: string;
+    actionLabel: string;
+    actionIcon: SafeHtml;
+    expanded?: never;
+    actionDisabled?: boolean;
+    disabledReason?: string;
+} | {
+    /** Render a passive section heading. */
+    toggle?: false;
+    action?: never;
+    actionLabel?: never;
+    actionIcon?: never;
+    expanded?: never;
+    actionDisabled?: never;
+    disabledReason?: never;
+};
 type ListHeaderIndicatorProps = {
     count: number;
     countLabel: string;
@@ -37,7 +58,7 @@ type ListHeaderIndicatorProps = {
     countLabel?: never;
     badge?: SafeHtml;
 };
-type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps;
-declare function ListHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes }: ListHeaderProps): SafeHtml;
+type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps & ListHeaderModeProps;
+declare function ListHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, }: ListHeaderProps): SafeHtml;
 
 export { ListHeader, type ListHeaderProps };

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-5ATCDSQS.js';
+export { ListHeader } from './chunk-DSNIYOZ3.js';
 
 
 

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

@@ -11,6 +11,6 @@ interface ListInsetControlProps {
  * Use it for controls that carry their own border and padding but no outer margin
  * — the wrapper adds only the alignment margin and layout, not a second inset.
  */
-declare function ListInsetControl({ children, className }: ListInsetControlProps): SafeHtml;
+declare function ListInsetControl({ children, className, }: ListInsetControlProps): SafeHtml;
 
 export { ListInsetControl, type ListInsetControlProps };

package/dist/list-inset-control.js

@@ -1,3 +1,3 @@
-export { ListInsetControl } from './chunk-VPCTCUED.js';
+export { ListInsetControl } from './chunk-QO55FN2Y.js';
 
 //# sourceMappingURL=list-inset-control.js.map

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

@@ -20,6 +20,6 @@ interface ListInsetTextProps {
  * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box
  * space for tight text layout.
  */
-declare function ListInsetText({ children, horizontalOnly, className }: ListInsetTextProps): SafeHtml;
+declare function ListInsetText({ children, horizontalOnly, className, }: ListInsetTextProps): SafeHtml;
 
 export { ListInsetText, type ListInsetTextProps };

package/dist/list-inset-text.js

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

package/dist/list-item.d.ts

@@ -28,6 +28,6 @@ interface ListItemProps {
     placeholder?: boolean;
     rootAttributes?: ListItemRootAttributes;
 }
-declare function ListItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes }: ListItemProps): SafeHtml;
+declare function ListItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes, }: ListItemProps): SafeHtml;
 
 export { ListItem, type ListItemProps };

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem } from './chunk-L4OKFDJY.js';
+export { ListItem } from './chunk-ELSJX4W7.js';
 
 
 

package/dist/loading-spinner.js

@@ -1,3 +1,3 @@
-export { LoadingSpinner } from './chunk-55DATV3A.js';
+export { LoadingSpinner } from './chunk-6WTETUZ6.js';
 
 //# sourceMappingURL=loading-spinner.js.map

package/dist/nav-stack.d.ts

@@ -33,6 +33,6 @@ interface NavStackProps {
  * cross-fades the chrome across a change. A single-pane layout is a `NavStack`
  * with one entry. See `docs/23-app-layouts.md` §3.1.
  */
-declare function NavStack({ id, label, views, backLabel, hideToolbar, bottomToolbar, className }: NavStackProps): SafeHtml;
+declare function NavStack({ id, label, views, backLabel, hideToolbar, bottomToolbar, className, }: NavStackProps): SafeHtml;
 
 export { NavStack, type NavStackProps, type NavStackView };

package/dist/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-WRTAQ7BZ.js';
+export { NavStack } from './chunk-OHU6CI22.js';
 
 
 

package/dist/pane.d.ts

@@ -0,0 +1,49 @@
+import { SafeHtml } from 'kerfjs';
+
+/** Logical sides that can show a {@link Pane} separator. */
+type PaneSeparatorSide = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
+/** Semantic root elements supported by {@link Pane}. */
+type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';
+/** Semantic elements supported by the scrolling content slot. */
+type PaneContentElement = 'div' | 'main' | 'nav' | 'section';
+type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-separator-block-start'?: never;
+    'data-separator-block-end'?: never;
+    'data-separator-inline-start'?: never;
+    'data-separator-inline-end'?: never;
+}>;
+interface PaneProps {
+    /** Optional fixed chrome above the scrolling content, arranged vertically. */
+    header?: SafeHtml | readonly SafeHtml[];
+    /** The pane's primary vertical, scrolling content stack. */
+    children?: SafeHtml | readonly SafeHtml[];
+    /** Optional fixed chrome below the scrolling content. */
+    footer?: SafeHtml | readonly SafeHtml[];
+    /** Root semantics. Defaults to `div`. */
+    element?: PaneElement;
+    /** Scrolling content semantics. Defaults to `div`. */
+    contentElement?: PaneContentElement;
+    /** Independent logical-edge separator lines. Defaults to none. */
+    separators?: readonly PaneSeparatorSide[];
+    id?: string;
+    /** Accessible name for a landmark root such as `aside` or `main`. */
+    label?: string;
+    /** Accessible name for a landmark scrolling slot such as `nav`. */
+    contentLabel?: string;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+    /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */
+    rootAttributes?: PaneRootAttributes;
+}
+/**
+ * An unpadded application column with optional fixed header/footer slots and one
+ * scrolling vertical content owner. Separator lines are independently opt-in on
+ * each logical edge, so the same component works as a sidebar, main area,
+ * inspector, or dialog column.
+ */
+declare function Pane({ header, children, footer, element, contentElement, separators, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, }: PaneProps): SafeHtml;
+
+export { Pane, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };