@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/chunk-QTSMHH5J.js

@@ -0,0 +1,85 @@
+// src/components/surfaces/surface-scaffold/internal/sheet-handle.ts
+var STEP = 16;
+var PAGE_STEP = 64;
+function createSheetHandle(attributes) {
+  const handle = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes))
+    handle.setAttribute(name, value);
+  handle.setAttribute("role", "separator");
+  handle.setAttribute("aria-orientation", "horizontal");
+  handle.setAttribute("aria-label", "Resize sheet");
+  handle.tabIndex = 0;
+  return handle;
+}
+function wireSheetHandle(handle, target) {
+  const onFocus = () => syncSheetHandleValues(handle, target.panel);
+  const onKeydown = (event) => {
+    if (!target.enabled()) return;
+    const { min, max } = bounds(target.panel);
+    const current = target.panel.getBoundingClientRect().height;
+    const next = {
+      ArrowUp: current + STEP,
+      ArrowDown: current - STEP,
+      PageUp: current + PAGE_STEP,
+      PageDown: current - PAGE_STEP,
+      Home: min,
+      End: max
+    }[event.key];
+    if (next === void 0) return;
+    event.preventDefault();
+    resizeTo(handle, target, next);
+  };
+  const onPointerdown = (event) => {
+    if (!target.enabled() || event.button !== 0) return;
+    event.preventDefault();
+    const startY = event.clientY;
+    const start = target.panel.getBoundingClientRect().height;
+    handle.setPointerCapture?.(event.pointerId);
+    const move = (moveEvent) => resizeTo(handle, target, start - (moveEvent.clientY - startY));
+    const end = () => {
+      handle.removeEventListener("pointermove", move);
+      handle.removeEventListener("pointerup", end);
+      handle.removeEventListener("pointercancel", end);
+    };
+    handle.addEventListener("pointermove", move);
+    handle.addEventListener("pointerup", end);
+    handle.addEventListener("pointercancel", end);
+  };
+  handle.addEventListener("focus", onFocus);
+  handle.addEventListener("keydown", onKeydown);
+  handle.addEventListener("pointerdown", onPointerdown);
+  return () => {
+    handle.removeEventListener("focus", onFocus);
+    handle.removeEventListener("keydown", onKeydown);
+    handle.removeEventListener("pointerdown", onPointerdown);
+  };
+}
+function bounds(panel) {
+  const style = globalThis.getComputedStyle(panel);
+  const clearance = parseFloat(style.paddingBlockEnd) || 0;
+  const min = parseFloat(style.minHeight) || 0;
+  const max = parseFloat(style.maxHeight);
+  return {
+    min,
+    max: Number.isFinite(max) ? max : globalThis.innerHeight,
+    clearance
+  };
+}
+function resizeTo(handle, target, height) {
+  const { panel, host, property } = target;
+  const { min, max, clearance } = bounds(panel);
+  const clamped = Math.min(max, Math.max(min, Math.round(height)));
+  host.style.setProperty(property, `${Math.max(0, clamped - clearance)}px`);
+  syncSheetHandleValues(handle, panel, clamped);
+}
+function syncSheetHandleValues(handle, panel, height = panel.getBoundingClientRect().height) {
+  const { min, max, clearance } = bounds(panel);
+  const visible = (value) => String(Math.max(0, Math.round(value - clearance)));
+  handle.setAttribute("aria-valuemin", visible(min));
+  handle.setAttribute("aria-valuemax", visible(max));
+  handle.setAttribute("aria-valuenow", visible(height));
+}
+
+export { createSheetHandle, syncSheetHandleValues, wireSheetHandle };
+
+//# sourceMappingURL=chunk-QTSMHH5J.js.map

package/dist/chunk-QTSMHH5J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/internal/sheet-handle.ts"],"names":[],"mappings":"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","file":"chunk-QTSMHH5J.js","sourcesContent":["/**\n * The bottom-sheet resize grabber shared by `DialogSurface` and the core\n * `kerfjs/overlay` sheets `wireOverlaySheets` wires: a `role=\"separator\"`\n * that resizes a sheet's visible height by drag or keyboard, between the\n * sheet's computed `min-height` and `max-height`, and reports that height in\n * its ARIA values. The sheet's height rule reads the published property and\n * adds back its block-end clearance.\n */\n\n/** Arrow-key step, and the Page Up/Down step, in px. */\nconst STEP = 16;\nconst PAGE_STEP = 64;\n\n/** Where a grabber reads its bounds and publishes the resized height. */\nexport interface SheetHandleTarget {\n  /** The sheet whose border box is measured and bounded, read at each event. */\n  panel: HTMLElement;\n  /** The element the visible height is published on (the panel or an ancestor). */\n  host: HTMLElement;\n  /** The custom property holding the visible height. */\n  property: string;\n  /** False while the sheet is not resizable: input is ignored. */\n  enabled: () => boolean;\n}\n\n/** Create an unattached grabber element with its separator semantics. */\nexport function createSheetHandle(\n  attributes: Record<string, string>,\n): HTMLElement {\n  const handle = document.createElement('div');\n  for (const [name, value] of Object.entries(attributes))\n    handle.setAttribute(name, value);\n  handle.setAttribute('role', 'separator');\n  handle.setAttribute('aria-orientation', 'horizontal');\n  handle.setAttribute('aria-label', 'Resize sheet');\n  handle.tabIndex = 0;\n  return handle;\n}\n\n/** Wire a grabber's focus, keyboard, and pointer resizing. Returns a disposer. */\nexport function wireSheetHandle(\n  handle: HTMLElement,\n  target: SheetHandleTarget,\n): () => void {\n  const onFocus = (): void => syncSheetHandleValues(handle, target.panel);\n  const onKeydown = (event: KeyboardEvent): void => {\n    if (!target.enabled()) return;\n    const { min, max } = bounds(target.panel);\n    const current = target.panel.getBoundingClientRect().height;\n    const next = {\n      ArrowUp: current + STEP,\n      ArrowDown: current - STEP,\n      PageUp: current + PAGE_STEP,\n      PageDown: current - PAGE_STEP,\n      Home: min,\n      End: max,\n    }[event.key];\n    if (next === undefined) return;\n    event.preventDefault();\n    resizeTo(handle, target, next);\n  };\n  const onPointerdown = (event: PointerEvent): void => {\n    if (!target.enabled() || event.button !== 0) return;\n    event.preventDefault();\n    const startY = event.clientY;\n    const start = target.panel.getBoundingClientRect().height;\n    handle.setPointerCapture?.(event.pointerId);\n    const move = (moveEvent: PointerEvent): void =>\n      resizeTo(handle, target, start - (moveEvent.clientY - startY));\n    const end = (): void => {\n      handle.removeEventListener('pointermove', move);\n      handle.removeEventListener('pointerup', end);\n      handle.removeEventListener('pointercancel', end);\n    };\n    handle.addEventListener('pointermove', move);\n    handle.addEventListener('pointerup', end);\n    handle.addEventListener('pointercancel', end);\n  };\n  handle.addEventListener('focus', onFocus);\n  handle.addEventListener('keydown', onKeydown);\n  handle.addEventListener('pointerdown', onPointerdown);\n  return () => {\n    handle.removeEventListener('focus', onFocus);\n    handle.removeEventListener('keydown', onKeydown);\n    handle.removeEventListener('pointerdown', onPointerdown);\n  };\n}\n\n/** The panel's resolved border-box bounds and block-end clearance, in px. */\nfunction bounds(panel: HTMLElement): {\n  min: number;\n  max: number;\n  clearance: number;\n} {\n  const style = globalThis.getComputedStyle(panel);\n  const clearance = parseFloat(style.paddingBlockEnd) || 0;\n  const min = parseFloat(style.minHeight) || 0;\n  const max = parseFloat(style.maxHeight);\n  return {\n    min,\n    max: Number.isFinite(max) ? max : globalThis.innerHeight,\n    clearance,\n  };\n}\n\n/** Resize to a border-box height, published as the visible height above the clearance. */\nfunction resizeTo(\n  handle: Element,\n  target: SheetHandleTarget,\n  height: number,\n): void {\n  const { panel, host, property } = target;\n  const { min, max, clearance } = bounds(panel);\n  const clamped = Math.min(max, Math.max(min, Math.round(height)));\n  host.style.setProperty(property, `${Math.max(0, clamped - clearance)}px`);\n  syncSheetHandleValues(handle, panel, clamped);\n}\n\n/** Separator values in visible (content) px, as a ResizableRegion reports them. */\nexport function syncSheetHandleValues(\n  handle: Element,\n  panel: HTMLElement,\n  height = panel.getBoundingClientRect().height,\n): void {\n  const { min, max, clearance } = bounds(panel);\n  const visible = (value: number) =>\n    String(Math.max(0, Math.round(value - clearance)));\n  handle.setAttribute('aria-valuemin', visible(min));\n  handle.setAttribute('aria-valuemax', visible(max));\n  handle.setAttribute('aria-valuenow', visible(height));\n}\n"]}

package/dist/chunk-QYMJHS4K.js

@@ -0,0 +1,36 @@
+import { filterRootAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var columnTrackProtected = /* @__PURE__ */ new Set(["data-component", "data-layout"]);
+function ColumnTrack({
+  children,
+  layout = "scroll",
+  minColumnWidth,
+  peek,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const style = [
+    minColumnWidth === void 0 ? "" : `--_kui-column-track-min-width:${minColumnWidth}`,
+    peek === void 0 ? "" : `--_kui-column-track-peek:${peek}`
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...filterRootAttributes(rootAttributes, columnTrackProtected),
+      id,
+      class: `kui-column-track ${className}`.trim(),
+      "data-component": "column-track",
+      "data-layout": layout,
+      style: style || void 0,
+      slot,
+      children: /* @__PURE__ */ jsx("div", { class: "kui-column-track__columns", children })
+    }
+  );
+}
+
+export { ColumnTrack };
+
+//# sourceMappingURL=chunk-QYMJHS4K.js.map

package/dist/chunk-QYMJHS4K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/column-track/column-track.tsx"],"names":[],"mappings":";;;AAUA,IAAM,uCAAuB,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,aAAa,CAAC,CAAA;AAiC/D,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,MAAA,GAAS,QAAA;AAAA,EACT,cAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,8BAAA,EAAiC,cAAc,CAAA,CAAA;AAAA,IACnD,IAAA,KAAS,MAAA,GAAY,EAAA,GAAK,CAAA,yBAAA,EAA4B,IAAI,CAAA;AAAA,GAC5D,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,aAAA,EAAa,MAAA;AAAA,MACb,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB,IAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAAA,EAA6B,QAAA,EAAS;AAAA;AAAA,GACnD;AAEJ","file":"chunk-QYMJHS4K.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  filterRootAttributes,\n  type StructuralRootAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\n/** `scroll` keeps equal min-width columns; `paged` shows one near-full-width column per page. */\nexport type ColumnTrackLayout = 'scroll' | 'paged';\n\nconst columnTrackProtected = new Set(['data-component', 'data-layout']);\n\ntype ColumnTrackRootAttributes = StructuralRootAttributes &\n  Readonly<{ 'data-component'?: never; 'data-layout'?: never }>;\n\nexport interface ColumnTrackProps {\n  /** The columns, in order; each owns its own inset and scrolling. */\n  children: KerfUiContent;\n  /**\n   * `scroll` (default): equal columns that never shrink below\n   * `minColumnWidth`, so a narrow track scrolls sideways instead of crushing\n   * them. `paged`: each column is nearly the visible width, the next one peeks\n   * in, and scrolling snaps to column starts.\n   */\n  layout?: ColumnTrackLayout;\n  /** Narrowest a `scroll` column gets before the track scrolls; default 250px. */\n  minColumnWidth?: CssLength;\n  /** How much of the next column a `paged` track shows; default 24px. */\n  peek?: CssLength;\n  id?: string;\n  className?: string;\n  /** Safe `data-*`, `aria-*`, and structural `role` metadata on the scroller. */\n  rootAttributes?: ColumnTrackRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A horizontal track of columns (a kanban board): the track is the sideways\n * scroll owner and fills its parent's height; columns sit flush and own their\n * insets and vertical scrolling. Kerf owns the overflow, the paged snapping,\n * and reduced motion.\n */\nexport function ColumnTrack({\n  children,\n  layout = 'scroll',\n  minColumnWidth,\n  peek,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ColumnTrackProps) {\n  const style = [\n    minColumnWidth === undefined\n      ? ''\n      : `--_kui-column-track-min-width:${minColumnWidth}`,\n    peek === undefined ? '' : `--_kui-column-track-peek:${peek}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <div\n      {...filterRootAttributes(rootAttributes, columnTrackProtected)}\n      id={id}\n      class={`kui-column-track ${className}`.trim()}\n      data-component=\"column-track\"\n      data-layout={layout}\n      style={style || undefined}\n      slot={slot}\n    >\n      <div class=\"kui-column-track__columns\">{children}</div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-S2XULQEK.js

@@ -0,0 +1,52 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var framedListProtected = /* @__PURE__ */ new Set(["data-component", "data-surface"]);
+var framedListRowProtected = /* @__PURE__ */ new Set(["data-component", "data-highlighted"]);
+function FramedList({
+  children,
+  label,
+  surface = "lowered",
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...filterDataAttributes(rootAttributes, framedListProtected),
+      id,
+      class: `kui-framed-list ${className}`.trim(),
+      "data-component": "framed-list",
+      "data-surface": surface,
+      role: "list",
+      "aria-label": label,
+      slot,
+      children
+    }
+  );
+}
+function FramedListRow({
+  children,
+  highlighted = false,
+  id,
+  className = "",
+  rootAttributes = {}
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ...filterDataAttributes(rootAttributes, framedListRowProtected),
+      id,
+      class: `kui-framed-list__row ${className}`.trim(),
+      "data-component": "framed-list-row",
+      "data-highlighted": highlighted ? "true" : void 0,
+      children
+    }
+  );
+}
+
+export { FramedList, FramedListRow };
+
+//# sourceMappingURL=chunk-S2XULQEK.js.map

package/dist/chunk-S2XULQEK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/framed-list/framed-list.tsx"],"names":[],"mappings":";;;AAMA,IAAM,sCAAsB,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,cAAc,CAAC,CAAA;AACtE,IAAM,yCAAyB,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,kBAAkB,CAAC,CAAA;AA+CtE,SAAS,UAAA,CAAW;AAAA,EACzB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,mBAAmB,CAAA;AAAA,MAC5D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,cAAA,EAAc,OAAA;AAAA,MACd,IAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAGO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB;AACnB,CAAA,EAAuB;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,sBAAsB,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,gBAAA,EAAe,iBAAA;AAAA,MACf,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MAExC;AAAA;AAAA,GACH;AAEJ","file":"chunk-S2XULQEK.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\n\n/** The frame's fill: the lowered surface (as `ValueTable`), or the page surface. */\nexport type FramedListSurface = 'lowered' | 'base';\n\nconst framedListProtected = new Set(['data-component', 'data-surface']);\nconst framedListRowProtected = new Set(['data-component', 'data-highlighted']);\n\ntype FramedListRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-surface'?: never;\n  }\n>;\n\ntype FramedListRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-highlighted'?: never;\n  }\n>;\n\nexport interface FramedListProps {\n  /** `FramedListRow` children. */\n  children: KerfUiContent;\n  /** Accessible name for the list, when no heading names it. */\n  label?: string;\n  /** Frame fill; defaults to `lowered`, matching `ValueTable`. */\n  surface?: FramedListSurface;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata; FramedList-owned markers stay protected. */\n  rootAttributes?: FramedListRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport interface FramedListRowProps {\n  /** Arbitrary row content: a `Row` of copy and controls, a keycap, … */\n  children: KerfUiContent;\n  /** Tint the row (the row being edited or the current item). */\n  highlighted?: boolean;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata; FramedListRow-owned markers stay protected. */\n  rootAttributes?: FramedListRowRootAttributes;\n}\n\n/**\n * An inset-grouped list (the settings-list pattern): one rounded, bordered\n * frame with 1px dividers between rows of arbitrary content. `ValueTable` is\n * the same frame for label/value facts; this one takes any row content.\n */\nexport function FramedList({\n  children,\n  label,\n  surface = 'lowered',\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: FramedListProps) {\n  return (\n    <ul\n      {...filterDataAttributes(rootAttributes, framedListProtected)}\n      id={id}\n      class={`kui-framed-list ${className}`.trim()}\n      data-component=\"framed-list\"\n      data-surface={surface}\n      role=\"list\"\n      aria-label={label}\n      slot={slot}\n    >\n      {children}\n    </ul>\n  );\n}\n\n/** One row of a `FramedList`; it owns the row inset and the divider above it. */\nexport function FramedListRow({\n  children,\n  highlighted = false,\n  id,\n  className = '',\n  rootAttributes = {},\n}: FramedListRowProps) {\n  return (\n    <li\n      {...filterDataAttributes(rootAttributes, framedListRowProtected)}\n      id={id}\n      class={`kui-framed-list__row ${className}`.trim()}\n      data-component=\"framed-list-row\"\n      data-highlighted={highlighted ? 'true' : undefined}\n    >\n      {children}\n    </li>\n  );\n}\n"]}

package/dist/chunk-S3ECMF23.js

@@ -0,0 +1,33 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/actions/floating-toolbar/floating-toolbar.tsx
+function FloatingToolbar({
+  children,
+  label,
+  position = "bottom-end",
+  placement = "floating",
+  inset,
+  safeAreaInsets = false,
+  className = "",
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-floating-toolbar ${className}`.trim(),
+      "data-component": "floating-toolbar",
+      "data-position": position,
+      "data-placement": placement,
+      "data-safe-area-insets": safeAreaInsets ? "true" : void 0,
+      role: "toolbar",
+      "aria-label": label,
+      style: inset ? `--kui-floating-toolbar-inset:${inset}` : void 0,
+      slot,
+      children
+    }
+  );
+}
+
+export { FloatingToolbar };
+
+//# sourceMappingURL=chunk-S3ECMF23.js.map

package/dist/chunk-S3ECMF23.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/floating-toolbar/floating-toolbar.tsx"],"names":[],"mappings":";;;AAkDO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,YAAA;AAAA,EACX,SAAA,GAAY,UAAA;AAAA,EACZ,KAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,gBAAA,EAAe,kBAAA;AAAA,MACf,eAAA,EAAe,QAAA;AAAA,MACf,gBAAA,EAAgB,SAAA;AAAA,MAChB,uBAAA,EAAuB,iBAAiB,MAAA,GAAS,MAAA;AAAA,MACjD,IAAA,EAAK,SAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,KAAA,EAAO,KAAA,GAAQ,CAAA,6BAAA,EAAgC,KAAK,CAAA,CAAA,GAAK,MAAA;AAAA,MACzD,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-S3ECMF23.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\n/** Where a {@link FloatingToolbar} floats within its positioned container. */\nexport type FloatingToolbarPosition =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n\nexport interface FloatingToolbarProps {\n  /** Toolbar contents — normally one or more `ToolbarControlGroup`s. */\n  children: KerfUiContent;\n  /** Accessible name for the toolbar (required — it exposes `role=\"toolbar\"`). */\n  label: string;\n  /**\n   * Corner or edge it floats to inside its nearest positioned ancestor.\n   * Default: `'bottom-end'`.\n   */\n  position?: FloatingToolbarPosition;\n  /** Keep the toolbar in normal document flow instead of floating over content. */\n  placement?: 'floating' | 'inline';\n  /**\n   * Distance from the container edges named by `position`. Default:\n   * `space('m')` (16px, 8px past a top toolbar's own inset). Omit it inside a\n   * `Workbench`, `CollapsiblePanel`, or `ResizableRegion` restore corner: the\n   * corner owns the inset there and sets it to zero.\n   */\n  inset?: CssLength;\n  /** Add device or layout-routed safe-area insets to the positioned edges. */\n  safeAreaInsets?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A toolbar that floats above the main content of its nearest positioned\n * ancestor — a transparent, forced-dark cluster of controls (e.g. a drawer\n * restore button) that sits over the content but NOT over dialogs or overlays\n * (it is not in the top layer). It is inset from the container edges by\n * `inset` (default `--kui-space-m`, i.e. 8px more than a top toolbar's own\n * inset); pass a typed length to move it. Inside a `Workbench`, `CollapsiblePanel`, or\n * `ResizableRegion` restore corner the corner owns the inset, so the toolbar\n * floats from the corner's own position. While one of those layouts has a\n * side overlay open over the toolbar's region (a Workbench rail overlay, a\n * `wireSidebar` compact overlay, an overlay `CollapsiblePanel` or horizontal\n * `ResizableRegion`), the toolbar is hidden — unfocusable and out of the\n * accessibility tree — until the overlay closes. The app owns the controls\n * and their behavior — wire them with `delegate()` as usual. Set\n * `placement=\"inline\"` for normal flow when an owner already positions the\n * control; floating placement can add safe-area insets to its per-edge tokens.\n */\nexport function FloatingToolbar({\n  children,\n  label,\n  position = 'bottom-end',\n  placement = 'floating',\n  inset,\n  safeAreaInsets = false,\n  className = '',\n  slot,\n}: FloatingToolbarProps) {\n  return (\n    <div\n      class={`kui-floating-toolbar ${className}`.trim()}\n      data-component=\"floating-toolbar\"\n      data-position={position}\n      data-placement={placement}\n      data-safe-area-insets={safeAreaInsets ? 'true' : undefined}\n      role=\"toolbar\"\n      aria-label={label}\n      style={inset ? `--kui-floating-toolbar-inset:${inset}` : undefined}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-S4Y3YTAI.js

@@ -0,0 +1,35 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var listInsetTextProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-sides"
+]);
+function ListInsetText({
+  children,
+  sides = "trbl",
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    listInsetTextProtectedAttributes
+  );
+  const cls = `kui-list-inset-text ${className}`.trim();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      class: cls,
+      "data-component": "list-inset-text",
+      "data-sides": sides,
+      slot,
+      children
+    }
+  );
+}
+
+export { ListInsetText };
+
+//# sourceMappingURL=chunk-S4Y3YTAI.js.map

package/dist/chunk-S4Y3YTAI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-inset-text/list-inset-text.tsx"],"names":[],"mappings":";;;AAIA,IAAM,gCAAA,uBAAuC,GAAA,CAAI;AAAA,EAC/C,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA6BM,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,GAAA,GAAM,CAAA,oBAAA,EAAuB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AACpD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,GAAA;AAAA,MACP,gBAAA,EAAe,iBAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-S4Y3YTAI.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\n\nconst listInsetTextProtectedAttributes = new Set([\n  'data-component',\n  'data-sides',\n]);\n\ntype ListInsetTextRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-sides'?: never;\n  }\n>;\n\nexport interface ListInsetTextProps {\n  /** Text (or inline content) that carries no margin, border, or padding of its own. */\n  children: KerfUiContent | string;\n  /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */\n  sides?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; component-owned structural attributes stay protected. */\n  rootAttributes?: ListInsetTextRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Gives bare text the content-item geometry — an 8px inline margin, a 1px\n * transparent border, and 8px padding — so a plain string lines up with\n * bordered `.kui-content` items (its text edge lands at the same 17px inset).\n * Use it for text elements that have no margin, border, or padding of their own.\n * Pass `sides=\"rl\"` to keep the horizontal inset but drop the vertical box\n * space for tight text layout.\n */\nexport function ListInsetText({\n  children,\n  sides = 'trbl',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ListInsetTextProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    listInsetTextProtectedAttributes,\n  );\n  const cls = `kui-list-inset-text ${className}`.trim();\n  return (\n    <div\n      {...safeRootAttributes}\n      class={cls}\n      data-component=\"list-inset-text\"\n      data-sides={sides}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/chunk-S4ZGTDSG.js

@@ -0,0 +1,18 @@
+// src/components/layout/workbench/internal/workbench-resize.ts
+var SLUGS = {
+  leftRail: "left-rail",
+  rightRail: "right-rail",
+  bottomDrawer: "bottom-drawer"
+};
+var workbenchRegionId = (id, panel) => `${id}-${SLUGS[panel]}`;
+var WORKBENCH_RESIZE_DEFAULTS = {
+  leftRail: { size: 280, min: 180, max: 480 },
+  rightRail: { size: 280, min: 180, max: 480 },
+  bottomDrawer: { size: 220, min: 120, max: 480 }
+};
+var WORKBENCH_MAIN_MIN_SIZE = 320;
+var WORKBENCH_MAIN_MIN_HEIGHT = 120;
+
+export { WORKBENCH_MAIN_MIN_HEIGHT, WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_RESIZE_DEFAULTS, workbenchRegionId };
+
+//# sourceMappingURL=chunk-S4ZGTDSG.js.map

package/dist/chunk-S4ZGTDSG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/workbench/internal/workbench-resize.ts"],"names":[],"mappings":";AAMA,IAAM,KAAA,GAA2C;AAAA,EAC/C,QAAA,EAAU,WAAA;AAAA,EACV,SAAA,EAAW,YAAA;AAAA,EACX,YAAA,EAAc;AAChB,CAAA;AAGO,IAAM,iBAAA,GAAoB,CAAC,EAAA,EAAY,KAAA,KAC5C,GAAG,EAAE,CAAA,CAAA,EAAI,KAAA,CAAM,KAAK,CAAC,CAAA;AAGhB,IAAM,yBAAA,GAGT;AAAA,EACF,UAAU,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAI;AAAA,EAC1C,WAAW,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAI;AAAA,EAC3C,cAAc,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA;AAC5C;AAOO,IAAM,uBAAA,GAA0B;AAOhC,IAAM,yBAAA,GAA4B","file":"chunk-S4ZGTDSG.js","sourcesContent":["// The resizable-panel contract shared by `Workbench` (which renders it) and\n// `wireWorkbench` (which drives it). Internal.\n\n/** A Workbench panel slot, named after its `WorkbenchProps` prop. */\nexport type WorkbenchPanelKey = 'leftRail' | 'rightRail' | 'bottomDrawer';\n\nconst SLUGS: Record<WorkbenchPanelKey, string> = {\n  leftRail: 'left-rail',\n  rightRail: 'right-rail',\n  bottomDrawer: 'bottom-drawer',\n};\n\n/** The `data-region-id` a resizable panel carries, e.g. `studio-left-rail`. */\nexport const workbenchRegionId = (id: string, panel: WorkbenchPanelKey) =>\n  `${id}-${SLUGS[panel]}`;\n\n/** Default size and limits (px) for a panel whose `resizable` omits them. */\nexport const WORKBENCH_RESIZE_DEFAULTS: Record<\n  WorkbenchPanelKey,\n  { size: number; min: number; max: number }\n> = {\n  leftRail: { size: 280, min: 180, max: 480 },\n  rightRail: { size: 280, min: 180, max: 480 },\n  bottomDrawer: { size: 220, min: 120, max: 480 },\n};\n\n/**\n * Default minimum width (px) a Workbench keeps for its work area beside its\n * inline rails, fixed or resizable: resizable rails stop growing there, and\n * every inline rail shrinks proportionally when the container narrows.\n */\nexport const WORKBENCH_MAIN_MIN_SIZE = 320;\n\n/**\n * Default minimum height (px) a Workbench keeps for its work area above an\n * inline bottom drawer: a resizable drawer stops growing there, and the drawer\n * shrinks when the Workbench gets shorter.\n */\nexport const WORKBENCH_MAIN_MIN_HEIGHT = 120;\n"]}

package/dist/chunk-SCDWURBO.js

@@ -0,0 +1,136 @@
+import { remify } from './chunk-IQSRHXZR.js';
+import { filterRootAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var backdropImageProtected = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-blur",
+  "data-parallax",
+  "data-scrim",
+  "data-fade",
+  "data-repeat",
+  "data-under-chrome"
+]);
+var SUBTLE_PARALLAX = 0.35;
+function parallaxFactor(parallax) {
+  if (parallax === "none") return 0;
+  if (parallax === "subtle") return SUBTLE_PARALLAX;
+  if (!Number.isFinite(parallax) || parallax < 0 || parallax > 1)
+    throw new RangeError(
+      "BackdropImage parallax must be none, subtle, or a number from 0 to 1."
+    );
+  return parallax;
+}
+function blurDim(dim) {
+  if (dim === void 0) return 0;
+  if (!Number.isFinite(dim) || dim < 0 || dim > 1)
+    throw new RangeError("BackdropImage blur.dim must be from 0 to 1.");
+  return dim;
+}
+var unsafeStyleValue = /[;{}<>"'\\]|\p{Cc}/u;
+function styleValue(value, prop) {
+  const trimmed = value.trim();
+  if (!trimmed || unsafeStyleValue.test(trimmed))
+    throw new TypeError(`BackdropImage ${prop} requires one CSS value.`);
+  return trimmed;
+}
+function cssUrl(src) {
+  if (/\p{Cc}/u.test(src))
+    throw new TypeError(
+      "BackdropImage src must not contain control characters."
+    );
+  return `url("${src.replace(/["\\]/g, (char) => `\\${char}`)}")`;
+}
+function BackdropImage(props) {
+  const {
+    src,
+    alt,
+    position = "center",
+    height,
+    parallax = "none",
+    blur,
+    fadeTo,
+    scrim = "none",
+    underChrome = false,
+    overlay,
+    children,
+    id,
+    className = "",
+    rootAttributes = {},
+    slot
+  } = props;
+  const factor = parallaxFactor(parallax);
+  const dim = blurDim(blur?.dim);
+  const blurRadius = blur === void 0 ? void 0 : blur.radius ?? (blur.blurredSrc === void 0 ? remify(24) : void 0);
+  const style = [
+    height === void 0 ? "" : `--_kui-backdrop-image-height:${styleValue(height, "height")}`,
+    fadeTo === void 0 ? "" : `--_kui-backdrop-image-fade-to:${styleValue(fadeTo, "fadeTo")}`,
+    factor === 0 ? "" : `--_kui-backdrop-image-parallax:${String(factor)}`,
+    position === "center" ? "" : `--_kui-backdrop-image-position:${position}`,
+    props.fit === void 0 || props.fit === "cover" ? "" : `--_kui-backdrop-image-fit:${props.fit}`,
+    blurRadius === void 0 ? "" : `--_kui-backdrop-image-blur:${styleValue(blurRadius, "blur.radius")}`,
+    dim === 0 ? "" : `--_kui-backdrop-image-dim:${String(dim)}`
+  ].filter(Boolean).join(";");
+  const image = (className2, source, copy) => props.repeat === void 0 ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      class: className2,
+      src: source,
+      srcSet: source === src ? props.srcset : void 0,
+      sizes: source === src ? props.sizes : void 0,
+      alt: copy ? "" : alt,
+      "aria-hidden": copy ? "true" : void 0,
+      decoding: "async"
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: className2,
+      role: !copy && alt ? "img" : void 0,
+      "aria-label": !copy && alt ? alt : void 0,
+      "aria-hidden": copy ? "true" : void 0,
+      style: `background-image:${cssUrl(source)};background-repeat:${props.repeat}`
+    }
+  );
+  const hasOverlay = overlay !== void 0 && overlay !== null && overlay !== false;
+  const hasChildren = children !== void 0 && children !== null && children !== false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterRootAttributes(rootAttributes, backdropImageProtected),
+      id,
+      class: `kui-backdrop-image ${className}`.trim(),
+      "data-component": "backdrop-image",
+      "data-parallax": factor === 0 ? "none" : "scroll",
+      "data-blur": blur === void 0 ? void 0 : blurRadius === void 0 ? "asset" : "filter",
+      "data-fade": fadeTo === void 0 ? void 0 : "true",
+      "data-scrim": scrim === "none" ? void 0 : scrim,
+      "data-repeat": props.repeat,
+      "data-under-chrome": underChrome ? "true" : void 0,
+      style: style || void 0,
+      slot,
+      children: [
+        /* @__PURE__ */ jsxs("div", { class: "kui-backdrop-image__hero", children: [
+          /* @__PURE__ */ jsxs("div", { class: "kui-backdrop-image__backdrop", children: [
+            /* @__PURE__ */ jsxs("div", { class: "kui-backdrop-image__layers", children: [
+              image("kui-backdrop-image__media", src, false),
+              blur === void 0 ? null : image(
+                "kui-backdrop-image__blurred",
+                blur.blurredSrc ?? src,
+                true
+              )
+            ] }),
+            dim === 0 ? null : /* @__PURE__ */ jsx("div", { class: "kui-backdrop-image__dim" }),
+            scrim === "none" ? null : /* @__PURE__ */ jsx("div", { class: "kui-backdrop-image__scrim" })
+          ] }),
+          hasOverlay ? /* @__PURE__ */ jsx("div", { class: "kui-backdrop-image__overlay", children: overlay }) : null
+        ] }),
+        hasChildren ? /* @__PURE__ */ jsx("div", { class: "kui-backdrop-image__content", children }) : null
+      ]
+    }
+  );
+}
+
+export { BackdropImage };
+
+//# sourceMappingURL=chunk-SCDWURBO.js.map

package/dist/chunk-SCDWURBO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/backdrop-image/backdrop-image.tsx"],"names":["className"],"mappings":"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","file":"chunk-SCDWURBO.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  filterRootAttributes,\n  type StructuralRootAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport {\n  type CssColor,\n  type CssLength,\n  remify,\n} from '../../../shared/styles/css-values.js';\n\n/** How a single image fills the backdrop (`object-fit`). */\nexport type BackdropImageFit = 'cover' | 'contain' | 'fill';\n\n/** Which part of the image stays in view when it is cropped. */\nexport type BackdropImagePosition =\n  | 'center'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top left'\n  | 'top right'\n  | 'bottom left'\n  | 'bottom right';\n\n/** Tile the image as a background instead of fitting one copy. */\nexport type BackdropImageRepeat = 'repeat' | 'repeat-x' | 'repeat-y';\n\n/**\n * How far the image lags the scroll: `none` scrolls with the content,\n * `subtle` lags by 35%, and a number from 0 to 1 is the lag factor (0.5\n * moves the image at half the scroll speed).\n */\nexport type BackdropImageParallax = 'none' | 'subtle' | number;\n\n/**\n * A dimming layer under `overlay` content: `bottom` darkens toward the\n * block end where a title sits, `full` dims the whole image evenly.\n */\nexport type BackdropImageScrim = 'none' | 'bottom' | 'full';\n\n/**\n * A scroll-linked progressive blur: a statically blurred copy of the image\n * fades in as the image block scrolls away. Only the copy's opacity (and the\n * optional dim layer's) animates; the blur itself is set once.\n */\nexport interface BackdropImageBlur {\n  /**\n   * CSS blur radius applied once to the copy. Default 24px; with\n   * `blurredSrc` the default is no filter, since that asset is already soft.\n   */\n  radius?: CssLength;\n  /**\n   * An app-supplied pre-blurred or low-resolution copy of the image, used\n   * instead of filtering `src`.\n   */\n  blurredSrc?: string;\n  /**\n   * Peak opacity, from 0 to 1, of a black dim layer that ramps in with the\n   * blur. Default 0 (no dim layer).\n   */\n  dim?: number;\n}\n\nconst backdropImageProtected = new Set([\n  'data-component',\n  'data-blur',\n  'data-parallax',\n  'data-scrim',\n  'data-fade',\n  'data-repeat',\n  'data-under-chrome',\n]);\n\ntype BackdropImageRootAttributes = StructuralRootAttributes &\n  Readonly<{\n    'data-component'?: never;\n    'data-blur'?: never;\n    'data-parallax'?: never;\n    'data-scrim'?: never;\n    'data-fade'?: never;\n    'data-repeat'?: never;\n    'data-under-chrome'?: never;\n  }>;\n\ninterface BackdropImageCommonProps {\n  /** Image URL. */\n  src: string;\n  /**\n   * Accessible description of the image. Pass `''` for a decorative image\n   * that only sets a mood; assistive technology then skips it.\n   */\n  alt: string;\n  /** Which part of a cropped image stays in view. Default `center`. */\n  position?: BackdropImagePosition;\n  /** Height of the image block. Default 320px (`remify(320)`). */\n  height?: CssLength;\n  /** How far the image lags the scroll. Default `none`. */\n  parallax?: BackdropImageParallax;\n  /**\n   * The color the image fades into at its block end. It also paints the\n   * whole surface, so `children` below the image sit on the same color and\n   * the page reads as one surface. Omit for a hard edge with no surface.\n   */\n  fadeTo?: CssColor;\n  /**\n   * Blur the image progressively as it scrolls away, by cross-fading a\n   * statically blurred copy. Static (unblurred) wherever parallax is.\n   */\n  blur?: BackdropImageBlur;\n  /**\n   * Run the image up beneath the scroller's block-start inset: an overlay or\n   * clear Pane header, NavStack chrome handed to a view's Pane, and the top\n   * safe area, the way a media page's artwork fills the screen behind\n   * transparent chrome. The visible image keeps `height` below that inset,\n   * and `overlay` content stays clear of the chrome. Place the image first in\n   * the Pane's content; it reads the Pane's\n   * `--kui-pane-content-inset-block-start`. Default `false`.\n   */\n  underChrome?: boolean;\n  /** Dim the image under `overlay` content. Default `none`. */\n  scrim?: BackdropImageScrim;\n  /** Content laid over the image's block end, such as a title and actions. */\n  overlay?: KerfUiContent;\n  /** Content that continues below the image on the `fadeTo` surface. */\n  children?: KerfUiContent;\n  id?: string;\n  className?: string;\n  /** Safe `data-*`, `aria-*`, and structural `role` metadata on the root. */\n  rootAttributes?: BackdropImageRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** One fitted image, with optional responsive candidates. */\nexport interface BackdropImageSingleProps extends BackdropImageCommonProps {\n  repeat?: undefined;\n  /** Responsive image candidates (`srcset`). */\n  srcset?: string;\n  /** Rendered-size hints for `srcset` (`sizes`). */\n  sizes?: string;\n  /** How the image fills the block. Default `cover`. */\n  fit?: BackdropImageFit;\n}\n\n/** A tiled background image at its natural size. */\nexport interface BackdropImageTiledProps extends BackdropImageCommonProps {\n  repeat: BackdropImageRepeat;\n  srcset?: never;\n  sizes?: never;\n  fit?: never;\n}\n\nexport type BackdropImageProps =\n  BackdropImageSingleProps | BackdropImageTiledProps;\n\nconst SUBTLE_PARALLAX = 0.35;\n\nfunction parallaxFactor(parallax: BackdropImageParallax): number {\n  if (parallax === 'none') return 0;\n  if (parallax === 'subtle') return SUBTLE_PARALLAX;\n  if (!Number.isFinite(parallax) || parallax < 0 || parallax > 1)\n    throw new RangeError(\n      'BackdropImage parallax must be none, subtle, or a number from 0 to 1.',\n    );\n  return parallax;\n}\n\nfunction blurDim(dim: number | undefined): number {\n  if (dim === undefined) return 0;\n  if (!Number.isFinite(dim) || dim < 0 || dim > 1)\n    throw new RangeError('BackdropImage blur.dim must be from 0 to 1.');\n  return dim;\n}\n\nconst unsafeStyleValue = /[;{}<>\"'\\\\]|\\p{Cc}/u;\n\nfunction styleValue(value: string, prop: string): string {\n  const trimmed = value.trim();\n  if (!trimmed || unsafeStyleValue.test(trimmed))\n    throw new TypeError(`BackdropImage ${prop} requires one CSS value.`);\n  return trimmed;\n}\n\n/** A CSS `url(\"…\")` for the tiled form; quotes and backslashes are escaped. */\nfunction cssUrl(src: string): string {\n  if (/\\p{Cc}/u.test(src))\n    throw new TypeError(\n      'BackdropImage src must not contain control characters.',\n    );\n  return `url(\"${src.replace(/[\"\\\\]/g, (char) => `\\\\${char}`)}\")`;\n}\n\n/**\n * An image backdrop at the top of a scrolling Pane or NavStack view: the\n * image can lag the scroll (parallax on a scroll-driven, compositor-only\n * transform), fade through a mask into `fadeTo`, and that color keeps\n * painting under `children` so the page reads as one surface. Kerf owns the\n * static fallbacks: no parallax without scroll-driven animation support,\n * under reduced motion, under `data-kui-effects=\"static\"`, or on a\n * slow-update display, and a hard edge onto solid `fadeTo` under reduced\n * transparency.\n */\nexport function BackdropImage(props: BackdropImageProps) {\n  const {\n    src,\n    alt,\n    position = 'center',\n    height,\n    parallax = 'none',\n    blur,\n    fadeTo,\n    scrim = 'none',\n    underChrome = false,\n    overlay,\n    children,\n    id,\n    className = '',\n    rootAttributes = {},\n    slot,\n  } = props;\n  const factor = parallaxFactor(parallax);\n  const dim = blurDim(blur?.dim);\n  const blurRadius =\n    blur === undefined\n      ? undefined\n      : (blur.radius ??\n        (blur.blurredSrc === undefined ? remify(24) : undefined));\n  const style = [\n    height === undefined\n      ? ''\n      : `--_kui-backdrop-image-height:${styleValue(height, 'height')}`,\n    fadeTo === undefined\n      ? ''\n      : `--_kui-backdrop-image-fade-to:${styleValue(fadeTo, 'fadeTo')}`,\n    factor === 0 ? '' : `--_kui-backdrop-image-parallax:${String(factor)}`,\n    position === 'center' ? '' : `--_kui-backdrop-image-position:${position}`,\n    props.fit === undefined || props.fit === 'cover'\n      ? ''\n      : `--_kui-backdrop-image-fit:${props.fit}`,\n    blurRadius === undefined\n      ? ''\n      : `--_kui-backdrop-image-blur:${styleValue(blurRadius, 'blur.radius')}`,\n    dim === 0 ? '' : `--_kui-backdrop-image-dim:${String(dim)}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  const image = (className: string, source: string, copy: boolean) =>\n    props.repeat === undefined ? (\n      <img\n        class={className}\n        src={source}\n        srcSet={source === src ? props.srcset : undefined}\n        sizes={source === src ? props.sizes : undefined}\n        alt={copy ? '' : alt}\n        aria-hidden={copy ? 'true' : undefined}\n        decoding=\"async\"\n      />\n    ) : (\n      <div\n        class={className}\n        role={!copy && alt ? 'img' : undefined}\n        aria-label={!copy && alt ? alt : undefined}\n        aria-hidden={copy ? 'true' : undefined}\n        style={`background-image:${cssUrl(source)};background-repeat:${props.repeat}`}\n      />\n    );\n  const hasOverlay =\n    overlay !== undefined && overlay !== null && overlay !== false;\n  const hasChildren =\n    children !== undefined && children !== null && children !== false;\n  return (\n    <div\n      {...filterRootAttributes(rootAttributes, backdropImageProtected)}\n      id={id}\n      class={`kui-backdrop-image ${className}`.trim()}\n      data-component=\"backdrop-image\"\n      data-parallax={factor === 0 ? 'none' : 'scroll'}\n      data-blur={\n        blur === undefined\n          ? undefined\n          : blurRadius === undefined\n            ? 'asset'\n            : 'filter'\n      }\n      data-fade={fadeTo === undefined ? undefined : 'true'}\n      data-scrim={scrim === 'none' ? undefined : scrim}\n      data-repeat={props.repeat}\n      data-under-chrome={underChrome ? 'true' : undefined}\n      style={style || undefined}\n      slot={slot}\n    >\n      <div class=\"kui-backdrop-image__hero\">\n        <div class=\"kui-backdrop-image__backdrop\">\n          <div class=\"kui-backdrop-image__layers\">\n            {image('kui-backdrop-image__media', src, false)}\n            {blur === undefined\n              ? null\n              : image(\n                  'kui-backdrop-image__blurred',\n                  blur.blurredSrc ?? src,\n                  true,\n                )}\n          </div>\n          {dim === 0 ? null : <div class=\"kui-backdrop-image__dim\" />}\n          {scrim === 'none' ? null : <div class=\"kui-backdrop-image__scrim\" />}\n        </div>\n        {hasOverlay ? (\n          <div class=\"kui-backdrop-image__overlay\">{overlay}</div>\n        ) : null}\n      </div>\n      {hasChildren ? (\n        <div class=\"kui-backdrop-image__content\">{children}</div>\n      ) : null}\n    </div>\n  );\n}\n"]}