@kerfjs/ui 5.0.0-beta.104 → 5.0.0-beta.106

package/dist/{wire-token-search-fields.d.ts → wire-search-fields.d.ts}

@@ -1,13 +1,13 @@
 import { Signal } from 'kerfjs';
-import { d as TokenSearchModel } from './token-search-model-JA1i8z4D.js';
+import { b as SearchFieldModel } from './search-field-CrGTN5sa.js';
 import './semantic-content-BbzjvSu9.js';
 
-interface TokenSearchSubmit {
+interface SearchFieldSubmit {
     id: string;
     editor: HTMLElement;
 }
-/** Reported to {@link WireTokenSearchFieldsOptions.onEdit} on every editor input. */
-interface TokenSearchEdit extends TokenSearchSubmit {
+/** Reported to {@link WireSearchFieldsOptions.onEdit} on every editor input. */
+interface SearchFieldEdit extends SearchFieldSubmit {
     /**
      * The `InputEvent` that mutated the editor — read `event.inputType` / `event.data`
      * to gate commit behavior (e.g. only parse a chip on whitespace-terminated input)
@@ -16,7 +16,7 @@ interface TokenSearchEdit extends TokenSearchSubmit {
     event: InputEvent;
 }
 /** Reported when adjacent-token keyboard deletion asks the app to drop a chip. */
-interface TokenSearchTokenRemoval {
+interface SearchFieldTokenRemoval {
     id: string;
     /** The `data-token-value` of the token the app should remove from its state. */
     value: string;
@@ -27,11 +27,11 @@ interface TokenSearchTokenRemoval {
 /**
  * Opt-in keyboard behavior for the atomic token chips. Off unless `keyboard` is
  * set; each piece defaults on once opted in. The helper never mutates app state:
- * a removal is reported through {@link TokenSearchKeyboardOptions.onRemoveToken}
+ * a removal is reported through {@link SearchFieldKeyboardOptions.onRemoveToken}
  * for the caller to apply, while caret movement past a chip is a pure ephemeral
  * mechanic the helper performs itself.
  */
-interface TokenSearchKeyboardBaseOptions {
+interface SearchFieldKeyboardBaseOptions {
     /**
      * From a collapsed caret with no selection, Backspace removes the token
      * immediately before it and Delete the token immediately after — reported via
@@ -43,20 +43,20 @@ interface TokenSearchKeyboardBaseOptions {
      */
     moveCaretPastToken?: boolean;
 }
-type TokenSearchKeyboardOptions = TokenSearchKeyboardBaseOptions & ({
+type SearchFieldKeyboardOptions = SearchFieldKeyboardBaseOptions & ({
     removeAdjacentToken?: true;
     /** Apply the reported removal to your controlled state, then re-render. */
-    onRemoveToken: (removal: TokenSearchTokenRemoval) => void;
+    onRemoveToken: (removal: SearchFieldTokenRemoval) => void;
 } | {
     removeAdjacentToken: false;
     onRemoveToken?: never;
 });
 /**
- * Managed collapsible behavior for the iconic TokenSearchField. Every piece is on
+ * Managed collapsible behavior for the iconic SearchField. Every piece is on
  * by default; disable a specific one to own it in the app. Provide `signals` to
  * drive app-owned `expanded` signals per field id instead of helper-created ones.
  */
-interface TokenSearchCollapsibleOptions {
+interface SearchFieldCollapsibleOptions {
     /** Expand the field and focus its editor when the iconic trigger is activated. Default: true. */
     expandOnActivate?: boolean;
     /** Collapse the field when focus leaves it while it is empty. Default: true. */
@@ -69,7 +69,7 @@ interface TokenSearchCollapsibleOptions {
      * Keep an empty field expanded when focus moves to a caller-owned surface
      * rendered outside the field — a suggestions dropdown, date picker, or help
      * popover shown beside it. Return true for any focus target that must NOT
-     * trigger collapse-on-empty-blur. An element carrying `data-token-search-keep-open`
+     * trigger collapse-on-empty-blur. An element carrying `data-search-field-keep-open`
      * (or any node inside one) is always exempt, so this predicate is only needed
      * for surfaces you cannot mark declaratively.
      */
@@ -77,24 +77,24 @@ interface TokenSearchCollapsibleOptions {
     /** App-owned `expanded` signals keyed by field id; adopted instead of helper-created. */
     signals?: Readonly<Record<string, Signal<boolean>>>;
 }
-interface WireTokenSearchFieldsOptions {
-    /** Optional automatic grammar/suggestion models, keyed by TokenSearchField id. */
-    models?: Readonly<Record<string, TokenSearchModel>>;
-    onSubmit?: (submission: TokenSearchSubmit) => void;
+interface WireSearchFieldsOptions {
+    /** Optional automatic grammar/suggestion models, keyed by SearchField id. */
+    models?: Readonly<Record<string, SearchFieldModel>>;
+    onSubmit?: (submission: SearchFieldSubmit) => void;
     /** Fired on every editor `input`, after the browser mutates it, so a caller can drop its own `input` listener. */
-    onEdit?: (edit: TokenSearchEdit) => void;
+    onEdit?: (edit: SearchFieldEdit) => void;
     /** Managed collapsible transient behavior. `true`/omitted = on with defaults; `false` = fully off. */
-    collapsible?: boolean | TokenSearchCollapsibleOptions;
+    collapsible?: boolean | SearchFieldCollapsibleOptions;
     /** Opt-in atomic-chip keyboard behavior (off by default). */
-    keyboard?: false | TokenSearchKeyboardOptions;
+    keyboard?: false | SearchFieldKeyboardOptions;
 }
 /**
- * The value returned from {@link wireTokenSearchFields}: call it (or `dispose()`) to
+ * The value returned from {@link wireSearchFields}: call it (or `dispose()`) to
  * tear down. When collapsible behavior is managed, it also exposes the transient
  * `expanded` state per field id so the app can read it in render, hand in its own
  * signal, or drive it imperatively.
  */
-interface TokenSearchFieldsHandle {
+interface SearchFieldsHandle {
     (): void;
     dispose(): void;
     /** The managed `expanded` signal for a field id (adopted or helper-created); undefined when unmanaged. */
@@ -105,11 +105,11 @@ interface TokenSearchFieldsHandle {
     close(id: string): void;
 }
 /**
- * Wire every TokenSearchField under `root`: submit on Enter, preserve the caret across
+ * Wire every SearchField under `root`: submit on Enter, preserve the caret across
  * controlled token deletion, and (by default) manage the collapsible field's transient
- * expand/collapse/focus. Returns a {@link TokenSearchFieldsHandle} — a disposer that also
+ * expand/collapse/focus. Returns a {@link SearchFieldsHandle} — a disposer that also
  * exposes the managed `expanded` state per field id.
  */
-declare function wireTokenSearchFields(root: HTMLElement, { models, onSubmit, onEdit, collapsible, keyboard, }?: WireTokenSearchFieldsOptions): TokenSearchFieldsHandle;
+declare function wireSearchFields(root: HTMLElement, { models, onSubmit, onEdit, collapsible, keyboard, }?: WireSearchFieldsOptions): SearchFieldsHandle;
 
-export { type TokenSearchCollapsibleOptions, type TokenSearchEdit, type TokenSearchFieldsHandle, type TokenSearchKeyboardOptions, type TokenSearchSubmit, type TokenSearchTokenRemoval, type WireTokenSearchFieldsOptions, wireTokenSearchFields };
+export { type SearchFieldCollapsibleOptions, type SearchFieldEdit, type SearchFieldKeyboardOptions, type SearchFieldSubmit, type SearchFieldTokenRemoval, type SearchFieldsHandle, type WireSearchFieldsOptions, wireSearchFields };

package/dist/wire-search-fields.js

@@ -0,0 +1,6 @@
+export { wireSearchFields } from './chunk-UMNHJSIO.js';
+
+
+
+
+//# sourceMappingURL=wire-search-fields.js.map

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

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

package/dist/wire-sliders.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Keep every Slider under `root` in step with a drag before the app
+ * re-renders: one delegated `input` listener updates the track fill, the
+ * `<output>` readout, and the spoken value text from the live value. Returns
+ * a disposer. The app still owns the value (read it on `input` or `change`
+ * through the Slider's `action`) and re-renders with it.
+ */
+declare function wireSliders(root?: Element | Document): () => void;
+/** Recompute one Slider's fill, readout, and value text from its input. */
+declare function syncSlider(input: HTMLInputElement): void;
+
+export { syncSlider, wireSliders };

package/dist/wire-sliders.js

@@ -0,0 +1,31 @@
+// src/components/forms/slider/wiring/wire-sliders.ts
+function wireSliders(root = document) {
+  const onInput = (event) => {
+    const input = event.target;
+    if (!(input instanceof HTMLInputElement) || !input.classList.contains("kui-slider__input"))
+      return;
+    syncSlider(input);
+  };
+  root.addEventListener("input", onInput);
+  return () => root.removeEventListener("input", onInput);
+}
+function syncSlider(input) {
+  const min = Number(input.min || 0);
+  const max = Number(input.max || 100);
+  const value = Number(input.value);
+  const fraction = max === min ? 0 : (value - min) / (max - min);
+  input.style.setProperty(
+    "--_kui-slider-fill",
+    `${Number((fraction * 100).toFixed(4))}%`
+  );
+  const slider = input.closest(".kui-slider");
+  const unit = slider?.dataset.unit ?? "";
+  const text = `${input.value}${unit}`;
+  if (unit) input.setAttribute("aria-valuetext", text);
+  const output = slider?.querySelector(".kui-slider__value");
+  if (output) output.textContent = text;
+}
+
+export { syncSlider, wireSliders };
+
+//# sourceMappingURL=wire-sliders.js.map

package/dist/wire-sliders.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/slider/wiring/wire-sliders.ts"],"names":[],"mappings":";AAOO,SAAS,WAAA,CAAY,OAA2B,QAAA,EAAsB;AAC3E,EAAA,MAAM,OAAA,GAAU,CAAC,KAAA,KAAiB;AAChC,IAAA,MAAM,QAAQ,KAAA,CAAM,MAAA;AACpB,IAAA,IACE,EAAE,KAAA,YAAiB,gBAAA,CAAA,IACnB,CAAC,KAAA,CAAM,SAAA,CAAU,SAAS,mBAAmB,CAAA;AAE7C,MAAA;AACF,IAAA,UAAA,CAAW,KAAK,CAAA;AAAA,EAClB,CAAA;AACA,EAAA,IAAA,CAAK,gBAAA,CAAiB,SAAS,OAAO,CAAA;AACtC,EAAA,OAAO,MAAM,IAAA,CAAK,mBAAA,CAAoB,OAAA,EAAS,OAAO,CAAA;AACxD;AAGO,SAAS,WAAW,KAAA,EAA+B;AACxD,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,KAAA,CAAM,GAAA,IAAO,CAAC,CAAA;AACjC,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,KAAA,CAAM,GAAA,IAAO,GAAG,CAAA;AACnC,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,KAAA,CAAM,KAAK,CAAA;AAChC,EAAA,MAAM,WAAW,GAAA,KAAQ,GAAA,GAAM,CAAA,GAAA,CAAK,KAAA,GAAQ,QAAQ,GAAA,GAAM,GAAA,CAAA;AAC1D,EAAA,KAAA,CAAM,KAAA,CAAM,WAAA;AAAA,IACV,oBAAA;AAAA,IACA,GAAG,MAAA,CAAA,CAAQ,QAAA,GAAW,KAAK,OAAA,CAAQ,CAAC,CAAC,CAAC,CAAA,CAAA;AAAA,GACxC;AACA,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,OAAA,CAAqB,aAAa,CAAA;AACvD,EAAA,MAAM,IAAA,GAAO,MAAA,EAAQ,OAAA,CAAQ,IAAA,IAAQ,EAAA;AACrC,EAAA,MAAM,IAAA,GAAO,CAAA,EAAG,KAAA,CAAM,KAAK,GAAG,IAAI,CAAA,CAAA;AAClC,EAAA,IAAI,IAAA,EAAM,KAAA,CAAM,YAAA,CAAa,gBAAA,EAAkB,IAAI,CAAA;AACnD,EAAA,MAAM,MAAA,GAAS,MAAA,EAAQ,aAAA,CAAc,oBAAoB,CAAA;AACzD,EAAA,IAAI,MAAA,SAAe,WAAA,GAAc,IAAA;AACnC","file":"wire-sliders.js","sourcesContent":["/**\n * Keep every Slider under `root` in step with a drag before the app\n * re-renders: one delegated `input` listener updates the track fill, the\n * `<output>` readout, and the spoken value text from the live value. Returns\n * a disposer. The app still owns the value (read it on `input` or `change`\n * through the Slider's `action`) and re-renders with it.\n */\nexport function wireSliders(root: Element | Document = document): () => void {\n  const onInput = (event: Event) => {\n    const input = event.target;\n    if (\n      !(input instanceof HTMLInputElement) ||\n      !input.classList.contains('kui-slider__input')\n    )\n      return;\n    syncSlider(input);\n  };\n  root.addEventListener('input', onInput);\n  return () => root.removeEventListener('input', onInput);\n}\n\n/** Recompute one Slider's fill, readout, and value text from its input. */\nexport function syncSlider(input: HTMLInputElement): void {\n  const min = Number(input.min || 0);\n  const max = Number(input.max || 100);\n  const value = Number(input.value);\n  const fraction = max === min ? 0 : (value - min) / (max - min);\n  input.style.setProperty(\n    '--_kui-slider-fill',\n    `${Number((fraction * 100).toFixed(4))}%`,\n  );\n  const slider = input.closest<HTMLElement>('.kui-slider');\n  const unit = slider?.dataset.unit ?? '';\n  const text = `${input.value}${unit}`;\n  if (unit) input.setAttribute('aria-valuetext', text);\n  const output = slider?.querySelector('.kui-slider__value');\n  if (output) output.textContent = text;\n}\n"]}

package/dist/wire-tab-bars.js

@@ -1,3 +1,3 @@
-export { reorderTabs, wireTabBars } from './chunk-K4AT3V3J.js';
+export { reorderTabs, wireTabBars } from './chunk-T74YB76U.js';
 
 //# sourceMappingURL=wire-tab-bars.js.map

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

@@ -0,0 +1,41 @@
+/** Reported to {@link WireTagFieldsOptions.onChange} with the field's next tags. */
+interface TagFieldChange {
+    id: string;
+    tags: string[];
+}
+/** Why a typed value did not become a tag. */
+type TagFieldRejection = 'duplicate' | 'max' | 'invalid';
+interface WireTagFieldsOptions {
+    /** Apply the next tag list to your state, then re-render the TagField. */
+    onChange: (change: TagFieldChange) => void;
+    /** Report a value that was not added (to show an `error`, for example). */
+    onReject?: (rejection: {
+        id: string;
+        value: string;
+        reason: TagFieldRejection;
+    }) => void;
+    /** Keys besides Enter that add the typed tag (default `[',']`). */
+    delimiters?: readonly string[];
+    /** Accept a tag already in the list (default false). */
+    allowDuplicates?: boolean;
+    /**
+     * Clean up a typed value, or return `undefined` to refuse it as invalid
+     * (default: trim, refusing an empty value).
+     */
+    normalize?: (value: string, id: string) => string | undefined;
+    /** Add the typed text when focus leaves the editor for anything but its own chips (default true). */
+    commitOnBlur?: boolean;
+}
+/**
+ * Wire every TagField under `root`: Enter or a delimiter adds the typed text
+ * as a tag (several at once when pasted text holds delimiters), leaving focus
+ * adds it too, a chip's × or Backspace at the start removes a tag, a chip's
+ * label moves it back into the editor to edit, the clear button empties the
+ * list, and ArrowLeft / ArrowRight move between the chips and the editor.
+ * Duplicates, the field's `max`, and `normalize` are enforced before
+ * `onChange`. It also wires the SearchField editor mechanics the TagField is
+ * built on. Returns a disposer.
+ */
+declare function wireTagFields(root: HTMLElement, { onChange, onReject, delimiters, allowDuplicates, normalize, commitOnBlur, }: WireTagFieldsOptions): () => void;
+
+export { type TagFieldChange, type TagFieldRejection, type WireTagFieldsOptions, wireTagFields };

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"}