@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/dist/wire-tag-fields.js

@@ -0,0 +1,258 @@
+import { tagFieldActions } from './chunk-6VVIW7VB.js';
+import { wireSearchFields } from './chunk-UMNHJSIO.js';
+import { placeSearchFieldCaret, readSearchField } from './chunk-VEME3D7K.js';
+
+
+import { delegateCapture, delegate } from 'kerfjs';
+
+var defaultNormalize = (value) => value.trim() || void 0;
+var idOf = (field) => field.dataset.tagFieldId;
+var tokenOf = (element) => element.dataset.tokenValue;
+function tagFieldOf(element) {
+  return element.closest('[data-component="tag-field"]');
+}
+function tagsOf(field) {
+  return [
+    ...field.querySelectorAll(
+      '[data-component="search-field-token"]'
+    )
+  ].map(tokenOf);
+}
+function editorOf(field) {
+  return field.querySelector("[data-tag-field-editor]");
+}
+function textBeforeCaret(editor) {
+  const selection = globalThis.getSelection();
+  if (!selection || selection.rangeCount === 0 || !selection.isCollapsed)
+    return void 0;
+  const caret = selection.getRangeAt(0);
+  if (!editor.contains(caret.startContainer)) return void 0;
+  const range = document.createRange();
+  range.selectNodeContents(editor);
+  range.setEnd(caret.startContainer, caret.startOffset);
+  const fragment = range.cloneContents();
+  for (const chip of fragment.querySelectorAll(
+    '[data-component="search-field-token"]'
+  ))
+    chip.remove();
+  return fragment.textContent.replaceAll("\u200B", "");
+}
+function wireTagFields(root, {
+  onChange,
+  onReject,
+  delimiters = [","],
+  allowDuplicates = false,
+  normalize = defaultNormalize,
+  commitOnBlur = true
+}) {
+  const pendingEdits = /* @__PURE__ */ new Map();
+  const fieldById = (id) => root.querySelector(`[data-tag-field-id="${CSS.escape(id)}"]`);
+  const change = (id, tags) => {
+    const typing = fieldById(id)?.querySelector("[data-tag-field-editor]")?.contains(document.activeElement);
+    onChange({ id, tags });
+    const text = pendingEdits.get(id);
+    pendingEdits.delete(id);
+    if (text === void 0 && !typing) return;
+    globalThis.queueMicrotask(() => {
+      const field = fieldById(id);
+      const editor = field && editorOf(field);
+      if (!editor) return;
+      if (text === void 0) {
+        if (!editor.contains(document.activeElement))
+          placeSearchFieldCaret(editor);
+        return;
+      }
+      const span = editor.querySelector(
+        "[data-search-field-text]:last-of-type"
+      ) ?? editor;
+      span.textContent = text;
+      editor.dispatchEvent(
+        new InputEvent("input", { bubbles: true, inputType: "insertText" })
+      );
+      placeSearchFieldCaret(editor);
+    });
+  };
+  const commit = (field, editor) => {
+    const id = idOf(field);
+    const text = readSearchField(editor).query;
+    const parts = delimiters.reduce(
+      (pieces, delimiter) => pieces.flatMap((piece) => piece.split(delimiter)),
+      [text]
+    );
+    const tags = tagsOf(field);
+    const max = field.dataset.max === void 0 ? Infinity : Number(field.dataset.max);
+    let added = false;
+    for (const part of parts) {
+      if (part.trim() === "") continue;
+      const value = normalize(part, id);
+      if (value === void 0) {
+        onReject?.({ id, value: part.trim(), reason: "invalid" });
+        continue;
+      }
+      if (!allowDuplicates && tags.includes(value)) {
+        onReject?.({ id, value, reason: "duplicate" });
+        continue;
+      }
+      if (tags.length >= max) {
+        onReject?.({ id, value, reason: "max" });
+        continue;
+      }
+      tags.push(value);
+      added = true;
+    }
+    if (added) change(id, tags);
+    return added;
+  };
+  const stopSearchFields = wireSearchFields(root, { collapsible: false });
+  const stopKeys = delegateCapture(
+    root,
+    "keydown",
+    '[data-component="tag-field"]',
+    (event, element) => {
+      const key = event;
+      if (key.isComposing) return;
+      const field = element;
+      const editor = editorOf(field);
+      if (!editor) return;
+      const target = key.target;
+      const chips = [
+        ...field.querySelectorAll(
+          `[data-action="${tagFieldActions.edit}"]`
+        )
+      ];
+      const forward = globalThis.getComputedStyle(field).direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+      const backward = forward === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+      const index = chips.indexOf(target);
+      if (index === -1 && (target === editor || editor.contains(target))) {
+        if (key.key === "Enter" || delimiters.includes(key.key)) {
+          key.preventDefault();
+          commit(field, editor);
+          return;
+        }
+        if (key.key === "Tab" && commitOnBlur) {
+          commit(field, editor);
+          return;
+        }
+        if (key.key === "Backspace" && textBeforeCaret(editor) === "") {
+          const run = globalThis.getSelection()?.getRangeAt(0).startContainer.parentElement?.closest("[data-search-field-text]");
+          const chip = run?.previousElementSibling ?? editor.querySelector(
+            '[data-component="search-field-token"]:last-of-type'
+          );
+          if (!chip?.matches('[data-component="search-field-token"]')) return;
+          key.preventDefault();
+          const value = tokenOf(chip);
+          change(
+            idOf(field),
+            tagsOf(field).filter((tag) => tag !== value)
+          );
+          return;
+        }
+        if (key.key === backward && chips.length > 0 && textBeforeCaret(editor) === "") {
+          key.preventDefault();
+          chips.at(-1).focus();
+        }
+        return;
+      }
+      if (index === -1) return;
+      if (key.key === backward) {
+        key.preventDefault();
+        chips[Math.max(0, index - 1)].focus();
+      } else if (key.key === forward) {
+        key.preventDefault();
+        if (index === chips.length - 1) placeSearchFieldCaret(editor);
+        else chips[index + 1].focus();
+      } else if (key.key === "Backspace" || key.key === "Delete") {
+        key.preventDefault();
+        const value = tokenOf(target);
+        change(
+          idOf(field),
+          tagsOf(field).filter((tag) => tag !== value)
+        );
+        globalThis.queueMicrotask(() => {
+          const next = [
+            ...field.querySelectorAll(
+              `[data-action="${tagFieldActions.edit}"]`
+            )
+          ];
+          const live = editorOf(field);
+          if (next.length === 0 && live) placeSearchFieldCaret(live);
+          else next[Math.min(index, next.length - 1)]?.focus();
+        });
+      }
+    }
+  );
+  const stopPaste = delegate(
+    root,
+    "input",
+    "[data-tag-field-editor]",
+    (event, element) => {
+      const input = event;
+      if (input.inputType !== "insertFromPaste") return;
+      const editor = element;
+      const field = tagFieldOf(editor);
+      if (field) commit(field, editor);
+    }
+  );
+  const stopBlur = delegate(
+    root,
+    "focusout",
+    "[data-tag-field-editor]",
+    (event, element) => {
+      if (!commitOnBlur) return;
+      const editor = element;
+      const field = tagFieldOf(editor);
+      const next = event.relatedTarget;
+      if (!field || next instanceof Node && editor.contains(next)) return;
+      commit(field, editor);
+    }
+  );
+  const stopClicks = delegate(
+    root,
+    "click",
+    `[data-component="tag-field"] [data-action]`,
+    (_event, element) => {
+      const button = element;
+      const field = tagFieldOf(button);
+      if (!field) return;
+      const id = idOf(field);
+      const value = tokenOf(button);
+      switch (button.dataset.action) {
+        case tagFieldActions.remove:
+          change(
+            id,
+            tagsOf(field).filter((tag) => tag !== value)
+          );
+          globalThis.queueMicrotask(() => {
+            const live = editorOf(field);
+            if (live) placeSearchFieldCaret(live);
+          });
+          return;
+        case tagFieldActions.edit:
+          pendingEdits.set(id, value);
+          change(
+            id,
+            tagsOf(field).filter((tag) => tag !== value)
+          );
+          return;
+        case tagFieldActions.clear:
+          change(id, []);
+          globalThis.queueMicrotask(() => {
+            const live = editorOf(field);
+            if (live) placeSearchFieldCaret(live);
+          });
+          return;
+      }
+    }
+  );
+  return () => {
+    stopSearchFields();
+    stopKeys();
+    stopPaste();
+    stopBlur();
+    stopClicks();
+  };
+}
+
+export { wireTagFields };
+
+//# sourceMappingURL=wire-tag-fields.js.map

package/dist/wire-tag-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/tag-field/wiring/wire-tag-fields.ts"],"names":[],"mappings":"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","file":"wire-tag-fields.js","sourcesContent":["import { delegate, delegateCapture } from 'kerfjs';\n\nimport {\n  placeSearchFieldCaret,\n  readSearchField,\n} from '../../search-field/search-field.js';\nimport { wireSearchFields } from '../../search-field/wiring/wire-search-fields.js';\nimport { tagFieldActions } from '../tag-field.js';\n\n/** Reported to {@link WireTagFieldsOptions.onChange} with the field's next tags. */\nexport interface TagFieldChange {\n  id: string;\n  tags: string[];\n}\n\n/** Why a typed value did not become a tag. */\nexport type TagFieldRejection = 'duplicate' | 'max' | 'invalid';\n\nexport interface WireTagFieldsOptions {\n  /** Apply the next tag list to your state, then re-render the TagField. */\n  onChange: (change: TagFieldChange) => void;\n  /** Report a value that was not added (to show an `error`, for example). */\n  onReject?: (rejection: {\n    id: string;\n    value: string;\n    reason: TagFieldRejection;\n  }) => void;\n  /** Keys besides Enter that add the typed tag (default `[',']`). */\n  delimiters?: readonly string[];\n  /** Accept a tag already in the list (default false). */\n  allowDuplicates?: boolean;\n  /**\n   * Clean up a typed value, or return `undefined` to refuse it as invalid\n   * (default: trim, refusing an empty value).\n   */\n  normalize?: (value: string, id: string) => string | undefined;\n  /** Add the typed text when focus leaves the editor for anything but its own chips (default true). */\n  commitOnBlur?: boolean;\n}\n\nconst defaultNormalize = (value: string) => value.trim() || undefined;\n\n/** The field's id and a chip's value: attributes the render always writes. */\nconst idOf = (field: HTMLElement) => field.dataset.tagFieldId!;\nconst tokenOf = (element: HTMLElement) => element.dataset.tokenValue!;\n\nfunction tagFieldOf(element: Element): HTMLElement | null {\n  return element.closest<HTMLElement>('[data-component=\"tag-field\"]');\n}\n\nfunction tagsOf(field: HTMLElement): string[] {\n  return [\n    ...field.querySelectorAll<HTMLElement>(\n      '[data-component=\"search-field-token\"]',\n    ),\n  ].map(tokenOf);\n}\n\nfunction editorOf(field: HTMLElement): HTMLElement | null {\n  return field.querySelector<HTMLElement>('[data-tag-field-editor]');\n}\n\n/** The text before the caret in an editor, or undefined without a caret in it. */\nfunction textBeforeCaret(editor: HTMLElement): string | undefined {\n  const selection = globalThis.getSelection();\n  if (!selection || selection.rangeCount === 0 || !selection.isCollapsed)\n    return undefined;\n  const caret = selection.getRangeAt(0);\n  if (!editor.contains(caret.startContainer)) return undefined;\n  const range = document.createRange();\n  range.selectNodeContents(editor);\n  range.setEnd(caret.startContainer, caret.startOffset);\n  const fragment = range.cloneContents();\n  for (const chip of fragment.querySelectorAll(\n    '[data-component=\"search-field-token\"]',\n  ))\n    chip.remove();\n  return fragment.textContent!.replaceAll('​', '');\n}\n\n/**\n * Wire every TagField under `root`: Enter or a delimiter adds the typed text\n * as a tag (several at once when pasted text holds delimiters), leaving focus\n * adds it too, a chip's × or Backspace at the start removes a tag, a chip's\n * label moves it back into the editor to edit, the clear button empties the\n * list, and ArrowLeft / ArrowRight move between the chips and the editor.\n * Duplicates, the field's `max`, and `normalize` are enforced before\n * `onChange`. It also wires the SearchField editor mechanics the TagField is\n * built on. Returns a disposer.\n */\nexport function wireTagFields(\n  root: HTMLElement,\n  {\n    onChange,\n    onReject,\n    delimiters = [','],\n    allowDuplicates = false,\n    normalize = defaultNormalize,\n    commitOnBlur = true,\n  }: WireTagFieldsOptions,\n): () => void {\n  // Text to place in an editor once the app re-renders it (editing a tag).\n  const pendingEdits = new Map<string, string>();\n\n  const fieldById = (id: string) =>\n    root.querySelector<HTMLElement>(`[data-tag-field-id=\"${CSS.escape(id)}\"]`);\n\n  const change = (id: string, tags: string[]) => {\n    // A tag change rebuilds the editor, which drops focus from the old one:\n    // return the caret to the new editor when the person was typing in it.\n    const typing = fieldById(id)\n      ?.querySelector('[data-tag-field-editor]')\n      ?.contains(document.activeElement);\n    onChange({ id, tags });\n    const text = pendingEdits.get(id);\n    pendingEdits.delete(id);\n    if (text === undefined && !typing) return;\n    globalThis.queueMicrotask(() => {\n      const field = fieldById(id);\n      const editor = field && editorOf(field);\n      if (!editor) return;\n      if (text === undefined) {\n        if (!editor.contains(document.activeElement))\n          placeSearchFieldCaret(editor);\n        return;\n      }\n      const span =\n        editor.querySelector<HTMLElement>(\n          '[data-search-field-text]:last-of-type',\n        ) ?? editor;\n      span.textContent = text;\n      editor.dispatchEvent(\n        new InputEvent('input', { bubbles: true, inputType: 'insertText' }),\n      );\n      placeSearchFieldCaret(editor);\n    });\n  };\n\n  /** Add the editor's text as tags; returns whether any text was taken. */\n  const commit = (field: HTMLElement, editor: HTMLElement): boolean => {\n    const id = idOf(field);\n    const text = readSearchField(editor).query;\n    const parts = delimiters.reduce<string[]>(\n      (pieces, delimiter) => pieces.flatMap((piece) => piece.split(delimiter)),\n      [text],\n    );\n    const tags = tagsOf(field);\n    const max =\n      field.dataset.max === undefined ? Infinity : Number(field.dataset.max);\n    let added = false;\n    for (const part of parts) {\n      if (part.trim() === '') continue;\n      const value = normalize(part, id);\n      if (value === undefined) {\n        onReject?.({ id, value: part.trim(), reason: 'invalid' });\n        continue;\n      }\n      if (!allowDuplicates && tags.includes(value)) {\n        onReject?.({ id, value, reason: 'duplicate' });\n        continue;\n      }\n      if (tags.length >= max) {\n        onReject?.({ id, value, reason: 'max' });\n        continue;\n      }\n      tags.push(value);\n      added = true;\n    }\n    if (added) change(id, tags);\n    return added;\n  };\n\n  // The SearchField editor mechanics (empty-text normalization, the\n  // placeholder) the TagField is built on; its keys are handled below.\n  const stopSearchFields = wireSearchFields(root, { collapsible: false });\n\n  const stopKeys = delegateCapture(\n    root,\n    'keydown',\n    '[data-component=\"tag-field\"]',\n    (event, element) => {\n      const key = event as KeyboardEvent;\n      if (key.isComposing) return;\n      const field = element as HTMLElement;\n      const editor = editorOf(field);\n      if (!editor) return;\n      const target = key.target as HTMLElement;\n      const chips = [\n        ...field.querySelectorAll<HTMLElement>(\n          `[data-action=\"${tagFieldActions.edit}\"]`,\n        ),\n      ];\n      const forward =\n        globalThis.getComputedStyle(field).direction === 'rtl'\n          ? 'ArrowLeft'\n          : 'ArrowRight';\n      const backward = forward === 'ArrowRight' ? 'ArrowLeft' : 'ArrowRight';\n      const index = chips.indexOf(target);\n      // The chips sit inside the editor, so test for a chip first.\n      if (index === -1 && (target === editor || editor.contains(target))) {\n        if (key.key === 'Enter' || delimiters.includes(key.key)) {\n          key.preventDefault();\n          commit(field, editor);\n          return;\n        }\n        // Tab may move focus onto a chip inside the editor (which a blur\n        // would not count as leaving), so it adds the typed text itself.\n        if (key.key === 'Tab' && commitOnBlur) {\n          commit(field, editor);\n          return;\n        }\n        if (key.key === 'Backspace' && textBeforeCaret(editor) === '') {\n          // Remove the tag just before the caret: the chip ahead of the\n          // text run the caret is in.\n          const run = globalThis\n            .getSelection()\n            ?.getRangeAt(0)\n            .startContainer.parentElement?.closest('[data-search-field-text]');\n          const chip = (run?.previousElementSibling ??\n            editor.querySelector(\n              '[data-component=\"search-field-token\"]:last-of-type',\n            )) as HTMLElement | null;\n          if (!chip?.matches('[data-component=\"search-field-token\"]')) return;\n          key.preventDefault();\n          const value = tokenOf(chip);\n          change(\n            idOf(field),\n            tagsOf(field).filter((tag) => tag !== value),\n          );\n          return;\n        }\n        if (\n          key.key === backward &&\n          chips.length > 0 &&\n          textBeforeCaret(editor) === ''\n        ) {\n          key.preventDefault();\n          chips.at(-1)!.focus();\n        }\n        return;\n      }\n      if (index === -1) return;\n      if (key.key === backward) {\n        key.preventDefault();\n        chips[Math.max(0, index - 1)]!.focus();\n      } else if (key.key === forward) {\n        key.preventDefault();\n        if (index === chips.length - 1) placeSearchFieldCaret(editor);\n        else chips[index + 1]!.focus();\n      } else if (key.key === 'Backspace' || key.key === 'Delete') {\n        key.preventDefault();\n        const value = tokenOf(target);\n        change(\n          idOf(field),\n          tagsOf(field).filter((tag) => tag !== value),\n        );\n        globalThis.queueMicrotask(() => {\n          const next = [\n            ...field.querySelectorAll<HTMLElement>(\n              `[data-action=\"${tagFieldActions.edit}\"]`,\n            ),\n          ];\n          const live = editorOf(field);\n          if (next.length === 0 && live) placeSearchFieldCaret(live);\n          else next[Math.min(index, next.length - 1)]?.focus();\n        });\n      }\n    },\n  );\n\n  const stopPaste = delegate(\n    root,\n    'input',\n    '[data-tag-field-editor]',\n    (event, element) => {\n      const input = event as InputEvent;\n      if (input.inputType !== 'insertFromPaste') return;\n      const editor = element as HTMLElement;\n      const field = tagFieldOf(editor);\n      if (field) commit(field, editor);\n    },\n  );\n\n  const stopBlur = delegate(\n    root,\n    'focusout',\n    '[data-tag-field-editor]',\n    (event, element) => {\n      if (!commitOnBlur) return;\n      const editor = element as HTMLElement;\n      const field = tagFieldOf(editor);\n      const next = (event as FocusEvent).relatedTarget;\n      // Focus moving within the editor (onto one of its chips) keeps editing.\n      if (!field || (next instanceof Node && editor.contains(next))) return;\n      commit(field, editor);\n    },\n  );\n\n  const stopClicks = delegate(\n    root,\n    'click',\n    `[data-component=\"tag-field\"] [data-action]`,\n    (_event, element) => {\n      const button = element as HTMLElement;\n      const field = tagFieldOf(button);\n      if (!field) return;\n      const id = idOf(field);\n      const value = tokenOf(button);\n      switch (button.dataset.action) {\n        case tagFieldActions.remove:\n          change(\n            id,\n            tagsOf(field).filter((tag) => tag !== value),\n          );\n          globalThis.queueMicrotask(() => {\n            const live = editorOf(field);\n            if (live) placeSearchFieldCaret(live);\n          });\n          return;\n        case tagFieldActions.edit:\n          pendingEdits.set(id, value);\n          change(\n            id,\n            tagsOf(field).filter((tag) => tag !== value),\n          );\n          return;\n        case tagFieldActions.clear:\n          change(id, []);\n          globalThis.queueMicrotask(() => {\n            const live = editorOf(field);\n            if (live) placeSearchFieldCaret(live);\n          });\n          return;\n      }\n    },\n  );\n\n  return () => {\n    stopSearchFields();\n    stopKeys();\n    stopPaste();\n    stopBlur();\n    stopClicks();\n  };\n}\n"]}

package/dist/wire-text-fields.d.ts

@@ -0,0 +1,12 @@
+type Root = HTMLElement | Document;
+/**
+ * Make every clearable `TextField` below root clear itself: its clear button
+ * empties the field, announces the change with bubbling `input` and `change`
+ * events (as typing would), and returns focus to the field. The button hides
+ * itself while the field is empty. A field with `showCount` keeps its
+ * `count / maxLength` current as people type. Dispose with the owning
+ * application.
+ */
+declare function wireTextFields(root: Root): () => void;
+
+export { wireTextFields };

package/dist/wire-text-fields.js

@@ -0,0 +1,3 @@
+export { wireTextFields } from './chunk-KC6WUSNS.js';
+
+//# sourceMappingURL=wire-text-fields.js.map

package/dist/wire-text-fields.js.map

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

package/dist/wire-toolbar-visibility.d.ts

@@ -0,0 +1,13 @@
+type Root = HTMLElement | Document;
+/**
+ * Wire ToolbarText and ToolbarControlGroup width thresholds below root.
+ * Below is strict: hideBelow hides at width < threshold; showBelow hides at
+ * width >= threshold. Percentages use the closest Toolbar's content box;
+ * em and custom properties use the item's own inherited context. Invalid,
+ * negative, unresolved, or contradictory thresholds leave the item visible.
+ * This helper changes only a component-owned visibility marker. Existing
+ * CSS visibility policies still apply. Dispose with the owning application.
+ */
+declare function wireToolbarVisibility(root: Root): () => void;
+
+export { wireToolbarVisibility };

package/dist/wire-toolbar-visibility.js

@@ -0,0 +1,3 @@
+export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
+
+//# sourceMappingURL=wire-toolbar-visibility.js.map

package/dist/wire-toolbar-visibility.js.map

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

package/dist/wire-workbench.d.ts

@@ -0,0 +1,116 @@
+import { Signal, ReadonlySignal } from 'kerfjs';
+import { DeviceClass } from './device-class.js';
+
+/** A Workbench panel slot, named after its `WorkbenchProps` prop. */
+type WorkbenchPanelKey = 'leftRail' | 'rightRail' | 'bottomDrawer';
+
+/** Minimal `localStorage`-shaped store, so the persistence hook is testable. */
+interface WorkbenchStorage {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+/** One Workbench panel's app-owned state. */
+interface WireWorkbenchPanel {
+    /**
+     * The app-owned size signal a `resizable` panel renders as its `size`.
+     * `wireWorkbench` writes each committed resize here; collapsing never
+     * touches it, so an expanded panel returns at the size it had. Omit it for
+     * a panel that is not resizable.
+     */
+    size?: Signal<number>;
+    /**
+     * When set with `size`, the size is loaded from and saved to `storage`
+     * under this key, so the panel remembers the user's size.
+     */
+    storageKey?: string;
+    /**
+     * The app-owned signal the panel renders as its `collapsed`. With it (and
+     * `dismissOverlays`, on by default) `wireWorkbench` treats the panel as a
+     * transient overlay while it presents as one: it collapses when its
+     * `responsiveOverlayAt` breakpoint begins to apply and gets its inline state
+     * back when the breakpoint stops applying, an open overlay takes focus and
+     * keeps Tab inside it, and it closes on Escape or a press outside it.
+     */
+    collapsed?: Signal<boolean>;
+    /**
+     * Treat presses in a portal surface launched by this panel (for example a
+     * body-level menu or dialog) as inside it. The predicate receives each Node
+     * in the press's composed path; return true for the portal root. Ordinary
+     * presses outside the panel and its allowed surfaces still dismiss it.
+     */
+    keepOpenOn?: (target: Node) => boolean;
+}
+/** A resize the user made, after `wireWorkbench` wrote it to the size signal. */
+interface WorkbenchResize {
+    panel: WorkbenchPanelKey;
+    size: number;
+    source: 'keyboard' | 'pointer';
+}
+interface WireWorkbenchOptions {
+    /** The `id` the `Workbench` was rendered with. */
+    id: string;
+    /**
+     * The wired panels, keyed like the `Workbench` props. Render a panel given
+     * a `size` with `resizable` and `size={panel.size.value}`, and one given a
+     * `collapsed` signal with `collapsed={panel.collapsed.value}`.
+     */
+    panels: Partial<Record<WorkbenchPanelKey, WireWorkbenchPanel>>;
+    /**
+     * When provided, resizing is suspended while `deviceClass.compact` is true —
+     * the classes where rails become overlay drawers or are replaced.
+     */
+    deviceClass?: ReadonlySignal<DeviceClass>;
+    /** Persistence store (default `globalThis.localStorage`, if present). */
+    storage?: WorkbenchStorage;
+    /** Keyboard step in px (default 16). */
+    step?: number;
+    /** Shift+arrow step in px (default 64). */
+    largeStep?: number;
+    /** Called after each committed resize. */
+    onResize?: (change: WorkbenchResize) => void;
+    /**
+     * Treat the panels given a `collapsed` signal as transient overlays while
+     * they present as overlays (default `true`), like `wireSidebar`'s compact
+     * overlay: a panel whose `responsiveOverlayAt` breakpoint begins to apply
+     * starts collapsed, with no collapse motion, and gets its inline collapsed
+     * state back when the breakpoint stops applying (and on disposal); an open
+     * overlay panel, responsive or `presentation: "overlay"`, closes on Escape
+     * or a press that starts and ends outside it. A panel that opens as an
+     * overlay takes focus on its first focusable control, and while it is open
+     * Tab and Shift+Tab cycle through its controls instead of reaching the
+     * work area it covers (the ARIA dialog pattern of `wireSidebar`'s compact
+     * overlay); inline panels never move focus. Focus stranded in a closing
+     * panel — however it closed, the app's own control inside it included —
+     * returns to the control that had it when the panel opened, else to the
+     * panel's restore control, else to a control outside the panel whose
+     * `aria-controls` names it (each panel's `id` is its region id, e.g.
+     * `studio-left-rail`) — the fallback for a panel already open at wire-up.
+     * An opener inside a panel that has closed since is skipped. `false` leaves
+     * every `collapsed` write and all focus handling to the app.
+     */
+    dismissOverlays?: boolean;
+    /**
+     * Keep overlays exclusive (default `true`), like `wireSidebar`'s
+     * `exclusiveCompact`: when a panel opens while it presents as an overlay,
+     * every other open overlay panel — rails and the bottom drawer alike —
+     * closes, so one overlay never covers another's controls. Panels presenting
+     * inline are never closed by it. Applies only with `dismissOverlays`.
+     */
+    exclusiveOverlays?: boolean;
+}
+/**
+ * Wire a `Workbench`'s panels. For `resizable` panels given a `size` signal:
+ * pointer drags and arrow / Shift+arrow / Home / End on each panel's
+ * separator, clamped to the panel's limits and to the room that leaves the
+ * work area its minimum width and height, committed to the app-owned size signals.
+ * Optional persistence loads and saves each size; optional `deviceClass`
+ * suspends resizing on compact classes. Collapse stays the app's `collapsed`
+ * flag and never changes a size. For panels given a `collapsed` signal,
+ * overlays are transient (`dismissOverlays`): a responsive overlay starts
+ * collapsed, an open overlay takes focus and keeps Tab inside it, it closes
+ * on Escape or an outside press, and
+ * opening one overlay closes the others (`exclusiveOverlays`). Returns a disposer. See `docs/23-app-layouts.md` §3.3.
+ */
+declare function wireWorkbench(root: HTMLElement, { id, panels, deviceClass, storage, step, largeStep, onResize, dismissOverlays, exclusiveOverlays, }: WireWorkbenchOptions): () => void;
+
+export { type WireWorkbenchOptions, type WireWorkbenchPanel, type WorkbenchPanelKey, type WorkbenchResize, type WorkbenchStorage, wireWorkbench };

package/dist/wire-workbench.js

@@ -0,0 +1,6 @@
+export { wireWorkbench } from './chunk-WPNIKZMJ.js';
+
+
+
+
+//# sourceMappingURL=wire-workbench.js.map

package/dist/wire-workbench.js.map

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

package/dist/workbench-dialog.d.ts

@@ -0,0 +1,106 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
+import { WorkbenchMainBottomToolbar, WorkbenchPanel } from './workbench.js';
+import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
+export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
+import './nav-stack-CU_0dKtI.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './list.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './sides-BPSWde0A.js';
+import './panel-toolbar-vg6Ir5Dy.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';
+import './resizable-region.js';
+
+/**
+ * Application `data-*` identity on the dialog root, such as `data-key`; the
+ * dialog's own configuration attributes stay protected.
+ */
+type WorkbenchDialogRootAttributes = DialogSurfaceRootAttributes;
+interface WorkbenchDialogProps {
+    /**
+     * The dialog's id, for `openDialog(document.getElementById(id))`. The
+     * Workbench inside is `<id>-workbench`, so its rails are
+     * `<id>-workbench-left-rail` and `<id>-workbench-right-rail`.
+     */
+    id: string;
+    /** The dialog's accessible name. */
+    label: string;
+    /** The dialog's primary title: an xl heading in the work area's toolbar. */
+    title: string;
+    /**
+     * A short supporting line under the title. It is the dialog's accessible
+     * description (`aria-describedby` to its `<id>-description`) unless
+     * `describedBy` names other content.
+     */
+    description?: string;
+    /**
+     * Id of the element whose text is the dialog's accessible description, in
+     * place of `description`, such as app-owned summary copy in `main`.
+     */
+    describedBy?: string;
+    /** Groups after the title in the work area's toolbar. */
+    leading?: KerfUiContent;
+    /** Header controls before the close control, such as a `ToolbarControlGroup`. */
+    actions?: KerfUiContent;
+    /** The work area. */
+    main: KerfUiContent;
+    /** Fixed content over the work area's bottom toolbar, such as a status line. */
+    mainFooter?: KerfUiContent;
+    /** The work area's bottom toolbar, usually the dialog's buttons. */
+    mainBottomToolbar?: WorkbenchMainBottomToolbar;
+    /**
+     * Side rails with their own toolbars. On compact devices each presents as
+     * an overlay over the work area; the app starts it collapsed and its
+     * `toolbar.toggle` shows it.
+     */
+    leftRail?: WorkbenchPanel;
+    rightRail?: WorkbenchPanel;
+    /** A bottom drawer under the work area. */
+    bottomDrawer?: WorkbenchPanel;
+    /**
+     * Fill the screen with the rails as overlays: derive from
+     * `deviceClass().value.compact`.
+     */
+    compact?: boolean;
+    /** The close control's accessible name (default `Close`). */
+    closeLabel?: string;
+    /** Close on a press on the backdrop; otherwise the panel pulses. */
+    lightDismiss?: boolean;
+    /** Roomy preferred width preset (default `large`). */
+    size?: DialogSurfaceSize;
+    /** Roomy preferred width; takes precedence over `size`. */
+    preferredWidth?: CssLength;
+    /** Roomy definite height (default 560px), bounded by the viewport. */
+    height?: DialogSurfaceHeight;
+    /** Roomy height cap in place of a definite height. */
+    maxHeight?: DialogSurfaceMaxHeight;
+    /** Roomy edge clearance from the viewport. */
+    viewportGutter?: CssLength;
+    /** Minimum work-area width beside inline rails, in px (Workbench default 320). */
+    mainMinSize?: number;
+    rootAttributes?: WorkbenchDialogRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A workbench dialog: a modal whose body is a `Workbench`. The work area's
+ * toolbar carries the dialog's primary title, its actions, and the close
+ * control; side rails keep their own toolbars and run the dialog's full
+ * height. On compact devices it fills the screen and its rails become
+ * overlays over the work area, shown by their toolbar toggles, so the work
+ * area keeps its width. Open it with `openDialog()`; the app owns each
+ * rail's `collapsed` state, and `wireWorkbench` closes an overlay rail on
+ * Escape or a press outside it before the dialog sees the Escape. Built from
+ * `DialogSurface` and `Workbench`.
+ */
+declare function WorkbenchDialog({ id, label, title, description, describedBy, leading, actions, main, mainFooter, mainBottomToolbar, leftRail, rightRail, bottomDrawer, compact, closeLabel, lightDismiss, size, preferredWidth, height, maxHeight, viewportGutter, mainMinSize, rootAttributes, className, slot, }: WorkbenchDialogProps): kerfjs.SafeHtml;
+
+export { WorkbenchDialog, type WorkbenchDialogProps, type WorkbenchDialogRootAttributes };