@kerfjs/ui 5.0.0-beta.3 → 5.0.0-beta.30

package/dist/chunk-WN52USHV.js

@@ -0,0 +1,115 @@
+import { resizeRegionFromPointer, clampRegionSize } from './chunk-CAB6NQ2T.js';
+import { delegate } from 'kerfjs';
+
+function regionState(handle) {
+  const region = handle.closest(
+    '[data-component="resizable-region"]'
+  );
+  if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement))
+    return void 0;
+  const id = region.dataset.regionId;
+  const axis = region.dataset.axis;
+  const edge = region.dataset.edge;
+  const min = Number(handle.getAttribute("aria-valuemin"));
+  const max = Number(handle.getAttribute("aria-valuemax"));
+  const size = Number(handle.getAttribute("aria-valuenow"));
+  if (!id || region.dataset.collapsed === "true" || region.dataset.presentation !== "inline" || axis !== "horizontal" && axis !== "vertical" || edge !== "start" && edge !== "end" || !Number.isFinite(min) || !Number.isFinite(max) || !Number.isFinite(size))
+    return void 0;
+  return { region, handle, id, axis, edge, min, max, size };
+}
+function preview(state, size, onPreview) {
+  const next = clampRegionSize(size, state.min, state.max);
+  state.region.style.setProperty("--kui-resizable-region-size", `${next}px`);
+  state.handle.setAttribute("aria-valuenow", String(next));
+  onPreview?.({ id: state.id, size: next, source: "pointer" });
+  return next;
+}
+function wireResizableRegions(root, {
+  step = 16,
+  largeStep = 64,
+  onPreview,
+  onCommit
+}) {
+  let stopPointer;
+  const stopKeydown = delegate(
+    root,
+    "keydown",
+    "[data-kui-resize-handle]",
+    (event, handle) => {
+      const keyboardEvent = event;
+      const state = regionState(handle);
+      if (!state) return;
+      let next;
+      if (keyboardEvent.key === "Home") next = state.min;
+      if (keyboardEvent.key === "End") next = state.max;
+      const increment = keyboardEvent.shiftKey ? largeStep : step;
+      if (state.axis === "horizontal" && keyboardEvent.key === "ArrowLeft")
+        next = resizeRegionFromPointer(state.size, -increment, state.edge);
+      if (state.axis === "horizontal" && keyboardEvent.key === "ArrowRight")
+        next = resizeRegionFromPointer(state.size, increment, state.edge);
+      if (state.axis === "vertical" && keyboardEvent.key === "ArrowUp")
+        next = resizeRegionFromPointer(state.size, -increment, state.edge);
+      if (state.axis === "vertical" && keyboardEvent.key === "ArrowDown")
+        next = resizeRegionFromPointer(state.size, increment, state.edge);
+      if (next === void 0) return;
+      keyboardEvent.preventDefault();
+      const size = clampRegionSize(next, state.min, state.max);
+      state.region.style.setProperty(
+        "--kui-resizable-region-size",
+        `${size}px`
+      );
+      state.handle.setAttribute("aria-valuenow", String(size));
+      onCommit({ id: state.id, size, source: "keyboard" });
+    }
+  );
+  const stopPointerDown = delegate(
+    root,
+    "pointerdown",
+    "[data-kui-resize-handle]",
+    (event, handle) => {
+      const pointerEvent = event;
+      if (pointerEvent.button !== 0) return;
+      const state = regionState(handle);
+      if (!state) return;
+      pointerEvent.preventDefault();
+      state.handle.setPointerCapture?.(pointerEvent.pointerId);
+      const startCoordinate = state.axis === "horizontal" ? pointerEvent.clientX : pointerEvent.clientY;
+      let next = state.size;
+      const move = (moveEvent) => {
+        const coordinate = state.axis === "horizontal" ? moveEvent.clientX : moveEvent.clientY;
+        next = preview(
+          state,
+          resizeRegionFromPointer(
+            state.size,
+            coordinate - startCoordinate,
+            state.edge
+          ),
+          onPreview
+        );
+      };
+      const finish = () => {
+        root.removeEventListener("pointermove", move);
+        root.removeEventListener("pointerup", finish);
+        root.removeEventListener("pointercancel", finish);
+        stopPointer = void 0;
+        delete state.region.dataset.resizing;
+        onCommit({ id: state.id, size: next, source: "pointer" });
+      };
+      stopPointer?.();
+      stopPointer = finish;
+      state.region.dataset.resizing = "true";
+      root.addEventListener("pointermove", move);
+      root.addEventListener("pointerup", finish, { once: true });
+      root.addEventListener("pointercancel", finish, { once: true });
+    }
+  );
+  return () => {
+    stopPointer?.();
+    stopKeydown();
+    stopPointerDown();
+  };
+}
+
+export { wireResizableRegions };
+
+//# sourceMappingURL=chunk-WN52USHV.js.map

package/dist/chunk-WN52USHV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/wire-resizable-regions.ts"],"names":[],"mappings":"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","file":"chunk-WN52USHV.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nimport {\n  clampRegionSize,\n  type ResizableRegionAxis,\n  type ResizableRegionEdge,\n  resizeRegionFromPointer,\n} from './resizable-region.js';\n\nexport interface ResizeCommit {\n  id: string;\n  size: number;\n  source: 'keyboard' | 'pointer';\n}\n\nexport interface WireResizableRegionsOptions {\n  step?: number;\n  largeStep?: number;\n  onPreview?: (change: ResizeCommit) => void;\n  onCommit: (change: ResizeCommit) => void;\n}\n\ninterface RegionState {\n  region: HTMLElement;\n  handle: HTMLElement;\n  id: string;\n  axis: ResizableRegionAxis;\n  edge: ResizableRegionEdge;\n  min: number;\n  max: number;\n  size: number;\n}\n\nfunction regionState(handle: Element): RegionState | undefined {\n  const region = handle.closest<HTMLElement>(\n    '[data-component=\"resizable-region\"]',\n  );\n  if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement))\n    return undefined;\n  const id = region.dataset.regionId;\n  const axis = region.dataset.axis;\n  const edge = region.dataset.edge;\n  const min = Number(handle.getAttribute('aria-valuemin'));\n  const max = Number(handle.getAttribute('aria-valuemax'));\n  const size = Number(handle.getAttribute('aria-valuenow'));\n  if (\n    !id ||\n    region.dataset.collapsed === 'true' ||\n    region.dataset.presentation !== 'inline' ||\n    (axis !== 'horizontal' && axis !== 'vertical') ||\n    (edge !== 'start' && edge !== 'end') ||\n    !Number.isFinite(min) ||\n    !Number.isFinite(max) ||\n    !Number.isFinite(size)\n  )\n    return undefined;\n  return { region, handle, id, axis, edge, min, max, size };\n}\n\nfunction preview(\n  state: RegionState,\n  size: number,\n  onPreview?: (change: ResizeCommit) => void,\n) {\n  const next = clampRegionSize(size, state.min, state.max);\n  state.region.style.setProperty('--kui-resizable-region-size', `${next}px`);\n  state.handle.setAttribute('aria-valuenow', String(next));\n  onPreview?.({ id: state.id, size: next, source: 'pointer' });\n  return next;\n}\n\n/** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */\nexport function wireResizableRegions(\n  root: HTMLElement,\n  {\n    step = 16,\n    largeStep = 64,\n    onPreview,\n    onCommit,\n  }: WireResizableRegionsOptions,\n) {\n  let stopPointer: (() => void) | undefined;\n\n  const stopKeydown = delegate(\n    root,\n    'keydown',\n    '[data-kui-resize-handle]',\n    (event, handle) => {\n      const keyboardEvent = event as KeyboardEvent;\n      const state = regionState(handle);\n      if (!state) return;\n      let next: number | undefined;\n      if (keyboardEvent.key === 'Home') next = state.min;\n      if (keyboardEvent.key === 'End') next = state.max;\n      const increment = keyboardEvent.shiftKey ? largeStep : step;\n      if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowLeft')\n        next = resizeRegionFromPointer(state.size, -increment, state.edge);\n      if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowRight')\n        next = resizeRegionFromPointer(state.size, increment, state.edge);\n      if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowUp')\n        next = resizeRegionFromPointer(state.size, -increment, state.edge);\n      if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowDown')\n        next = resizeRegionFromPointer(state.size, increment, state.edge);\n      if (next === undefined) return;\n      keyboardEvent.preventDefault();\n      const size = clampRegionSize(next, state.min, state.max);\n      state.region.style.setProperty(\n        '--kui-resizable-region-size',\n        `${size}px`,\n      );\n      state.handle.setAttribute('aria-valuenow', String(size));\n      onCommit({ id: state.id, size, source: 'keyboard' });\n    },\n  );\n\n  const stopPointerDown = delegate(\n    root,\n    'pointerdown',\n    '[data-kui-resize-handle]',\n    (event, handle) => {\n      const pointerEvent = event as PointerEvent;\n      if (pointerEvent.button !== 0) return;\n      const state = regionState(handle);\n      if (!state) return;\n      pointerEvent.preventDefault();\n      state.handle.setPointerCapture?.(pointerEvent.pointerId);\n      const startCoordinate =\n        state.axis === 'horizontal'\n          ? pointerEvent.clientX\n          : pointerEvent.clientY;\n      let next = state.size;\n      const move = (moveEvent: PointerEvent) => {\n        const coordinate =\n          state.axis === 'horizontal' ? moveEvent.clientX : moveEvent.clientY;\n        next = preview(\n          state,\n          resizeRegionFromPointer(\n            state.size,\n            coordinate - startCoordinate,\n            state.edge,\n          ),\n          onPreview,\n        );\n      };\n      const finish = () => {\n        root.removeEventListener('pointermove', move);\n        root.removeEventListener('pointerup', finish);\n        root.removeEventListener('pointercancel', finish);\n        stopPointer = undefined;\n        delete state.region.dataset.resizing;\n        onCommit({ id: state.id, size: next, source: 'pointer' });\n      };\n      stopPointer?.();\n      stopPointer = finish;\n      state.region.dataset.resizing = 'true';\n      root.addEventListener('pointermove', move);\n      root.addEventListener('pointerup', finish, { once: true });\n      root.addEventListener('pointercancel', finish, { once: true });\n    },\n  );\n\n  return () => {\n    stopPointer?.();\n    stopKeydown();\n    stopPointerDown();\n  };\n}\n"]}

package/dist/chunk-WSXUPSID.js

@@ -0,0 +1,43 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/surface-scaffold.tsx
+function DialogSurface({
+  children,
+  size = "medium",
+  presentation = "modal",
+  bodyInset = "compact",
+  footerInset = "comfortable",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-dialog-surface ${className}`.trim(),
+      "data-component": "dialog-surface",
+      "data-size": size,
+      "data-presentation": presentation,
+      "data-body-inset": bodyInset,
+      "data-footer-inset": footerInset,
+      children
+    }
+  );
+}
+function PopupSurface({
+  children,
+  inset = "standard",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: `kui-popup-surface ${className}`.trim(),
+      "data-component": "popup-surface",
+      "data-inset": inset,
+      children
+    }
+  );
+}
+
+export { DialogSurface, PopupSurface };
+
+//# sourceMappingURL=chunk-WSXUPSID.js.map

package/dist/chunk-WSXUPSID.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/surface-scaffold.tsx"],"names":[],"mappings":";;;AAgBO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,YAAA,GAAe,OAAA;AAAA,EACf,SAAA,GAAY,SAAA;AAAA,EACZ,WAAA,GAAc,aAAA;AAAA,EACd,SAAA,GAAY;AACd,CAAA,EAAuB;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC9C,gBAAA,EAAe,gBAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,mBAAA,EAAmB,YAAA;AAAA,MACnB,iBAAA,EAAiB,SAAA;AAAA,MACjB,mBAAA,EAAmB,WAAA;AAAA,MAElB;AAAA;AAAA,GACH;AAEJ;AAWO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,KAAA,GAAQ,UAAA;AAAA,EACR,SAAA,GAAY;AACd,CAAA,EAAsB;AACpB,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,kBAAA,EAAqB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC7C,gBAAA,EAAe,eAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MAEX;AAAA;AAAA,GACH;AAEJ","file":"chunk-WSXUPSID.js","sourcesContent":["import type { KerfUiContent } from './semantic-content.js';\n\nexport type DialogSurfaceSize = 'small' | 'medium' | 'large';\nexport type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen';\nexport type SurfaceInset = 'none' | 'compact' | 'comfortable';\n\nexport interface DialogSurfaceProps {\n  children: KerfUiContent;\n  size?: DialogSurfaceSize;\n  presentation?: DialogSurfacePresentation;\n  bodyInset?: SurfaceInset;\n  footerInset?: SurfaceInset;\n  className?: string;\n}\n\n/** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */\nexport function DialogSurface({\n  children,\n  size = 'medium',\n  presentation = 'modal',\n  bodyInset = 'compact',\n  footerInset = 'comfortable',\n  className = '',\n}: DialogSurfaceProps) {\n  return (\n    <div\n      class={`kui-dialog-surface ${className}`.trim()}\n      data-component=\"dialog-surface\"\n      data-size={size}\n      data-presentation={presentation}\n      data-body-inset={bodyInset}\n      data-footer-inset={footerInset}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';\n\nexport interface PopupSurfaceProps {\n  children: KerfUiContent;\n  inset?: PopupSurfaceInset;\n  className?: string;\n}\n\n/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */\nexport function PopupSurface({\n  children,\n  inset = 'standard',\n  className = '',\n}: PopupSurfaceProps) {\n  return (\n    <span\n      class={`kui-popup-surface ${className}`.trim()}\n      data-component=\"popup-surface\"\n      data-inset={inset}\n    >\n      {children}\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/chunk-ZPWZIVI6.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/tab-bar.tsx
+function TabBar({
+  id,
+  label,
+  children,
+  leading,
+  trailing,
+  className = "",
+  activation,
+  allocation = "intrinsic",
+  presentation = "rail",
+  trailingPlacement = "separate"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      class: `kui-tab-bar ${className}`.trim(),
+      "data-component": "tab-bar",
+      "data-tab-bar-id": id,
+      "data-tab-activation": activation,
+      "data-allocation": allocation,
+      "data-presentation": presentation,
+      "data-trailing-placement": trailingPlacement,
+      "aria-label": label,
+      children: [
+        leading && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__leading", children: leading }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-tab-bar__tabs",
+            role: "tablist",
+            "aria-label": label,
+            "data-kui-tab-list": true,
+            children
+          }
+        ),
+        trailing && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__trailing", children: trailing })
+      ]
+    }
+  );
+}
+
+export { TabBar };
+
+//# sourceMappingURL=chunk-ZPWZIVI6.js.map

package/dist/chunk-ZPWZIVI6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tab-bar.tsx"],"names":[],"mappings":";;;AA8BO,SAAS,MAAA,CAAO;AAAA,EACrB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,UAAA;AAAA,EACA,UAAA,GAAa,WAAA;AAAA,EACb,YAAA,GAAe,MAAA;AAAA,EACf,iBAAA,GAAoB;AACtB,CAAA,EAAgB;AACd,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,gBAAA,EAAe,SAAA;AAAA,MACf,iBAAA,EAAiB,EAAA;AAAA,MACjB,qBAAA,EAAqB,UAAA;AAAA,MACrB,iBAAA,EAAiB,UAAA;AAAA,MACjB,mBAAA,EAAmB,YAAA;AAAA,MACnB,yBAAA,EAAyB,iBAAA;AAAA,MACzB,YAAA,EAAY,KAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBACvD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,mBAAA;AAAA,YACN,IAAA,EAAK,SAAA;AAAA,YACL,YAAA,EAAY,KAAA;AAAA,YACZ,mBAAA,EAAiB,IAAA;AAAA,YAEhB;AAAA;AAAA,SACH;AAAA,QACC,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAyB,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA;AAAA,GAC5D;AAEJ","file":"chunk-ZPWZIVI6.js","sourcesContent":["import type { KerfUiContent } from './semantic-content.js';\n\nexport type TabActivation = 'automatic' | 'manual';\nexport type TabBarAllocation = 'intrinsic' | 'fill';\nexport type TabBarPresentation = 'rail' | 'segmented' | 'inspector';\nexport type TabBarTrailingPlacement = 'separate' | 'adjacent';\n\nexport interface TabBarProps {\n  id: string;\n  label: string;\n  children: KerfUiContent;\n  leading?: KerfUiContent;\n  trailing?: KerfUiContent;\n  className?: string;\n  /**\n   * Keyboard activation mode for this strip, emitted as `data-tab-activation` for\n   * `wireTabBars` to read (overrides its `activation` option). `'automatic'` (default)\n   * selects on arrow / Home / End; `'manual'` moves roving focus only and the user\n   * selects with Enter / Space / click — use it when selecting a tab is a heavy action.\n   */\n  activation?: TabActivation;\n  /** How available strip width is allocated across child AppTabs. */\n  allocation?: TabBarAllocation;\n  /** Named strip chrome for application rails, segmented tabs, or inspectors. */\n  presentation?: TabBarPresentation;\n  /** Keep a trailing action beside the final tab or at the far edge of the bar. */\n  trailingPlacement?: TabBarTrailingPlacement;\n}\n\n/** Render a controlled tab strip. The application owns selection, order, and persistence. */\nexport function TabBar({\n  id,\n  label,\n  children,\n  leading,\n  trailing,\n  className = '',\n  activation,\n  allocation = 'intrinsic',\n  presentation = 'rail',\n  trailingPlacement = 'separate',\n}: TabBarProps) {\n  return (\n    <nav\n      class={`kui-tab-bar ${className}`.trim()}\n      data-component=\"tab-bar\"\n      data-tab-bar-id={id}\n      data-tab-activation={activation}\n      data-allocation={allocation}\n      data-presentation={presentation}\n      data-trailing-placement={trailingPlacement}\n      aria-label={label}\n    >\n      {leading && <div class=\"kui-tab-bar__leading\">{leading}</div>}\n      <div\n        class=\"kui-tab-bar__tabs\"\n        role=\"tablist\"\n        aria-label={label}\n        data-kui-tab-list\n      >\n        {children}\n      </div>\n      {trailing && <div class=\"kui-tab-bar__trailing\">{trailing}</div>}\n    </nav>\n  );\n}\n"]}

package/dist/collapsible-panel.d.ts

@@ -0,0 +1,77 @@
+import { SafeHtml } from 'kerfjs';
+import { LucideIcon } from './lucide-icon.js';
+import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import 'lucide';
+
+/** Which edge a {@link CollapsiblePanel} docks to. */
+type CollapsiblePanelSide = '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: CollapsiblePanelSide, collapsed: boolean): {
+    icon: Parameters<typeof LucideIcon>[0]['icon'];
+    name: string;
+};
+interface CollapsiblePanelToggleProps {
+    /** The panel this toggle controls. */
+    side: CollapsiblePanelSide;
+    /** The panel's current collapsed state (drives the icon direction). */
+    collapsed: boolean;
+    /** `data-action` the button carries so `wireSidebar` can delegate its click. */
+    action: string;
+    /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */
+    panelId?: string;
+    /** Accessible label; defaults to "Collapse"/"Expand". */
+    label?: string;
+    className?: string;
+}
+/**
+ * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the
+ * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the
+ * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —
+ * 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;
+interface CollapsiblePanelProps {
+    /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */
+    id: string;
+    /** Which edge the panel docks to: a left/right rail or a bottom drawer. */
+    side: CollapsiblePanelSide;
+    /** Whether the panel is currently collapsed (the app owns this signal). */
+    collapsed?: boolean;
+    /** Rail width or drawer height in px. Overrides the CSS default. */
+    size?: number;
+    /** Accessible label for the panel region. */
+    label?: string;
+    /** Panel content. */
+    children?: KerfUiContent;
+    separator?: ResizableRegionSeparator;
+    collapseMotion?: ResizableRegionCollapseMotion;
+    contentOverflow?: ResizableRegionContentOverflow;
+    presentation?: ResizableRegionPresentation;
+    /** Control shown in a safe-area-aware viewport corner while collapsed. */
+    restoreControl?: SafeHtml;
+    restorePosition?: ResizableRegionRestorePosition;
+    className?: string;
+}
+/**
+ * A standalone collapsible side rail or bottom drawer, outside the full
+ * {@link Workbench} shell. It owns only the presentation: a fixed-size content
+ * area that stays laid out while the panel's track snaps to zero and the content
+ * slides out via `transform` (one reflow, composited — the same technique
+ * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored
+ * to the panel's fixed bottom edge, so the track cannot move its layout origin
+ * underneath the transform transition. The app owns the `collapsed` signal;
+ * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,
+ * 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, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, className, }: CollapsiblePanelProps): SafeHtml;
+
+export { CollapsiblePanel, type CollapsiblePanelProps, type CollapsiblePanelSide, CollapsiblePanelToggle, type CollapsiblePanelToggleProps, collapsiblePanelToggleIcon };

package/dist/collapsible-panel.js

@@ -0,0 +1,84 @@
+import { LucideIcon } from './chunk-W2FK7ZNY.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 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 })
+    }
+  );
+}
+function CollapsiblePanel({
+  id,
+  side,
+  collapsed = false,
+  size,
+  label,
+  children,
+  separator = "auto",
+  collapseMotion = "slide",
+  contentOverflow = "clip",
+  presentation = "inline",
+  restoreControl,
+  restorePosition = side === "left" ? "bottom-start" : "bottom-end",
+  className = ""
+}) {
+  const sizeVar = side === "bottom" ? "--kui-collapsible-panel-height" : "--kui-collapsible-panel-width";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__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),
+        "data-separator": separator,
+        "data-collapse-motion": collapseMotion,
+        "data-content-overflow": contentOverflow,
+        "data-presentation": presentation,
+        "aria-label": label || void 0,
+        "aria-hidden": collapsed || presentation === "hidden" ? "true" : void 0,
+        style: size ? `${sizeVar}: ${size}px` : void 0,
+        children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children })
+      }
+    ),
+    collapsed && restoreControl && presentation !== "hidden" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: "kui-collapsible-panel__restore",
+        "data-panel-restore": id,
+        "data-position": restorePosition,
+        children: restoreControl
+      }
+    )
+  ] });
+}
+
+export { CollapsiblePanel, CollapsiblePanelToggle, collapsiblePanelToggleIcon };
+
+//# sourceMappingURL=collapsible-panel.js.map

package/dist/collapsible-panel.js.map

@@ -0,0 +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}\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?: KerfUiContent;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown in a safe-area-aware viewport corner while collapsed. */\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. 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  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        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"]}

package/dist/css-values.d.ts

@@ -0,0 +1,75 @@
+declare const cssValueBrand: unique symbol;
+declare const cssLengthBrand: unique symbol;
+declare const cssLengthExpressionBrand: unique symbol;
+declare const cssFlexBrand: unique symbol;
+declare const cssColorBrand: unique symbol;
+/**
+ * A complete typed CSS value minted by a property-specific Kerf UI builder.
+ *
+ * This brand is an authoring correctness aid, not a sanitizer or security
+ * boundary. Prefer the narrower property grammar, such as {@link CssLength},
+ * whenever one is available.
+ */
+type CssValue = string & {
+    readonly [cssValueBrand]: 'CssValue';
+};
+/**
+ * A complete CSS length-percentage value suitable for dimension-valued UI
+ * props. Despite the concise name, percentages are intentionally included.
+ */
+type CssLength = CssValue & {
+    readonly [cssLengthBrand]: 'CssLength';
+};
+/**
+ * An incomplete arithmetic expression. Wrap it with {@link calc} before
+ * passing it to a prop that accepts {@link CssLength}.
+ */
+type CssLengthExpression = string & {
+    readonly [cssLengthExpressionBrand]: 'CssLengthExpression';
+};
+/** A complete CSS `flex` shorthand. It is not interchangeable with a length. */
+type CssFlex = CssValue & {
+    readonly [cssFlexBrand]: 'CssFlex';
+};
+/** A complete CSS color value. It is not interchangeable with a length. */
+type CssColor = CssValue & {
+    readonly [cssColorBrand]: 'CssColor';
+};
+type CssFlexKeyword = 'none' | 'auto' | 'initial';
+type CssFlexBasis = CssLength | 'auto' | 'content' | 'min-content' | 'max-content' | 'fit-content';
+type CssSizeKeyword = 'auto' | 'min-content' | 'max-content' | 'fit-content';
+/** A complete width/height value accepted by dimension-valued UI props. */
+type CssSize = CssLength | CssSizeKeyword;
+declare const uiColorNames: readonly ["accent", "accent-text", "border", "border-quiet", "brand-border-loud", "brand-border-normal", "brand-border-quiet", "brand-fill-loud", "brand-fill-normal", "brand-fill-quiet", "brand-on-fill", "brand-on-loud", "brand-on-normal", "brand-on-quiet", "danger", "danger-border-loud", "danger-border-normal", "danger-border-quiet", "danger-fill-loud", "danger-fill-normal", "danger-fill-quiet", "danger-on-loud", "danger-on-normal", "danger-on-quiet", "danger-text", "neutral-border-loud", "neutral-border-normal", "neutral-border-quiet", "neutral-fill-loud", "neutral-fill-normal", "neutral-fill-quiet", "neutral-on-loud", "neutral-on-normal", "neutral-on-quiet", "pop", "pop-border-loud", "pop-border-normal", "pop-border-quiet", "pop-fill-loud", "pop-fill-normal", "pop-fill-quiet", "pop-on-fill", "pop-on-loud", "pop-on-normal", "pop-on-quiet", "pop-text", "success", "success-border-loud", "success-border-normal", "success-border-quiet", "success-fill-loud", "success-fill-normal", "success-fill-quiet", "success-on-fill", "success-on-loud", "success-on-normal", "success-on-quiet", "success-text", "surface", "surface-lowered", "surface-raised", "text", "text-link", "text-quiet", "warning", "warning-border-loud", "warning-border-normal", "warning-border-quiet", "warning-fill-loud", "warning-fill-normal", "warning-fill-quiet", "warning-on-fill", "warning-on-loud", "warning-on-normal", "warning-on-quiet", "warning-text"];
+/** Names of the public `--kui-color-*` semantic tokens. */
+type UiColorName = (typeof uiColorNames)[number];
+/** Kerf UI's complete spacing-token vocabulary. `s` and `xl` are exceptions. */
+type UiSpaceName = 'none' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+/** Create a complete pixel length. */
+declare function px(value: number): CssLength;
+/** Create a complete root-font-relative length. */
+declare function rem(value: number): CssLength;
+/** Create a complete current-font-relative length. */
+declare function em(value: number): CssLength;
+/** Create a complete percentage length. */
+declare function pct(value: number): CssLength;
+/** Resolve a Kerf UI spacing step to its public custom property. */
+declare function space(name: UiSpaceName): CssLength;
+/**
+ * Reference an application-owned custom property whose contract is a CSS
+ * length-percentage. The deliberately narrow name grammar keeps this helper
+ * from becoming an arbitrary CSS-string constructor.
+ */
+declare function lengthVar(name: `--${string}`, fallback?: CssLength): CssLength;
+/** Combine two or more complete lengths into a non-standalone sum. */
+declare function plus(first: CssLength, second: CssLength, ...rest: readonly CssLength[]): CssLengthExpression;
+/** Turn a typed length expression into a complete CSS `calc()` value. */
+declare function calc(expression: CssLengthExpression): CssLength;
+/** Build a complete, structured CSS flex shorthand. */
+declare function flex(grow: number, shrink?: number, basis?: CssFlexBasis): CssFlex;
+/** Resolve a public Kerf UI semantic color token. */
+declare function uiColor(name: UiColorName): CssColor;
+/** Reference an application-owned custom property whose contract is a color. */
+declare function colorVar(name: `--${string}`, fallback?: CssColor): CssColor;
+
+export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColorName, type UiSpaceName, calc, colorVar, em, flex, lengthVar, pct, plus, px, rem, space, uiColor };

package/dist/css-values.js

@@ -0,0 +1,3 @@
+export { calc, colorVar, em, flex, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-OL4TC3U2.js';
+
+//# sourceMappingURL=css-values.js.map

package/dist/css-values.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"css-values.js"}

package/dist/device-class.d.ts

@@ -0,0 +1,62 @@
+import { ReadonlySignal } from 'kerfjs';
+
+/**
+ * Reactive device-class detection for `@kerfjs/ui` (see `docs/23-app-layouts.md`
+ * §2). `deviceClass()` returns a `ReadonlySignal<DeviceClass>` describing the
+ * current viewport as a size bucket × orientation × viewport-segment count, so a
+ * layout can pick its presentation reactively instead of hand-wiring `matchMedia`.
+ *
+ * One shared viewport source backs every reader; the pure `classifyViewport`
+ * core is DOM-free and directly unit-tested.
+ */
+type DeviceSize = 'xs-mobile' | 'mobile' | 'tablet' | 'desktop' | 'xl-desktop';
+type DeviceOrientation = 'portrait' | 'landscape';
+/** Minimum widths (px) at which each larger bucket begins. `xs-mobile` is 0. */
+interface DeviceBreakpoints {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+    'xl-desktop': number;
+}
+interface DeviceClass {
+    size: DeviceSize;
+    orientation: DeviceOrientation;
+    /** Horizontal viewport segments (foldables / dual-screen); 1 on ordinary devices. */
+    segments: number;
+    /** Vertical viewport segments; 1 on ordinary devices. */
+    verticalSegments: number;
+    /** Small phones — `xs-mobile` or `mobile`. */
+    handset: boolean;
+    /** "One pane at a time" — a handset or a portrait tablet. */
+    compact: boolean;
+    /** True when the current size is `size` or larger, e.g. `atLeast('tablet')`. */
+    atLeast(size: DeviceSize): boolean;
+}
+/** A raw viewport snapshot, before breakpoints are applied. */
+interface Viewport {
+    width: number;
+    height: number;
+    segments: number;
+    verticalSegments: number;
+}
+interface DeviceClassOptions {
+    /** Override any of the default bucket thresholds. */
+    breakpoints?: Partial<DeviceBreakpoints>;
+    /** The viewport assumed when there is no DOM (SSR). Defaults to 1024×768, one segment. */
+    ssr?: Partial<Viewport>;
+}
+declare const DEFAULT_BREAKPOINTS: DeviceBreakpoints;
+/**
+ * Classify a raw viewport into a {@link DeviceClass}. Pure and DOM-free — the
+ * single source of truth for the bucketing rules.
+ */
+declare function classifyViewport(width: number, orientation: DeviceOrientation, segments?: number, verticalSegments?: number, breakpoints?: DeviceBreakpoints): DeviceClass;
+/**
+ * A reactive signal of the current {@link DeviceClass}. Reading it inside an
+ * `effect`/`computed` re-runs when the viewport crosses a breakpoint, rotates,
+ * or changes its segment count. Without a DOM it resolves to `options.ssr`
+ * (default 1024×768, landscape, one segment).
+ */
+declare function deviceClass(options?: DeviceClassOptions): ReadonlySignal<DeviceClass>;
+
+export { DEFAULT_BREAKPOINTS, type DeviceBreakpoints, type DeviceClass, type DeviceClassOptions, type DeviceOrientation, type DeviceSize, type Viewport, classifyViewport, deviceClass };