@destyler/dynamic 0.0.6 → 0.0.7-beta.2

package/dist/index.mjs

@@ -1,10 +1,1024 @@
-export { DynamicClear, DynamicInput, DynamicItem, DynamicItemDelete, DynamicItemText, DynamicRoot, dynamicClearProps, dynamicInputProps, dynamicItemDeleteProps, dynamicItemProps, dynamicItemTextProps, dynamicRootProps } from './component.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/composition';
-import '@destyler/shared';
-import '@vueuse/core';
-import '@destyler/collection';
-import '@destyler/collection/composition';
-import '@destyler/visually-hidden/component';
-import '@destyler/directives';
+import { createAnatomy } from '@zag-js/anatomy';
+import { getNativeEvent, getEventKey } from '@zag-js/dom-event';
+import { createScope, queryAll, prevById, nextById, indexOfId, dataAttr, ariaAttr, isComposingEvent, contains, raf } from '@zag-js/dom-query';
+import { dispatchInputValueEvent, trackFormControl } from '@zag-js/form-utils';
+import { autoResizeInput } from '@zag-js/auto-resize';
+import { createMachine, guards } from '@zag-js/core';
+import { trackInteractOutside } from '@zag-js/interact-outside';
+import { createLiveRegion } from '@zag-js/live-region';
+import { compact, removeAt, warn, uniq, isEqual, createSplitProps } from '@zag-js/utils';
+import { createProps } from '@zag-js/types';
+
+const anatomy = createAnatomy("dynamic").parts(
+  "root",
+  "label",
+  "control",
+  "input",
+  "clearTrigger",
+  "item",
+  "itemPreview",
+  "itemInput",
+  "itemText",
+  "itemDeleteTrigger"
+);
+const parts = anatomy.build();
+
+const dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `dynamic:${ctx.id}`,
+  getInputId: (ctx) => ctx.ids?.input ?? `dynamic:${ctx.id}:input`,
+  getClearTriggerId: (ctx) => ctx.ids?.clearBtn ?? `dynamic:${ctx.id}:clear-btn`,
+  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `dynamic:${ctx.id}:hidden-input`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `dynamic:${ctx.id}:label`,
+  getControlId: (ctx) => ctx.ids?.control ?? `dynamic:${ctx.id}:control`,
+  getItemId: (ctx, opt) => ctx.ids?.item?.(opt) ?? `dynamic:${ctx.id}:tag:${opt.value}:${opt.index}`,
+  getItemDeleteTriggerId: (ctx, opt) => ctx.ids?.itemDeleteTrigger?.(opt) ?? `${dom.getItemId(ctx, opt)}:delete-btn`,
+  getItemInputId: (ctx, opt) => ctx.ids?.itemInput?.(opt) ?? `${dom.getItemId(ctx, opt)}:input`,
+  getEditInputId: (ctx) => `${ctx.editedTagId}:input`,
+  getTagInputEl: (ctx, opt) => dom.getById(ctx, dom.getItemInputId(ctx, opt)),
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
+  getEditInputEl: (ctx) => dom.getById(ctx, dom.getEditInputId(ctx)),
+  getTagElements: (ctx) => queryAll(dom.getRootEl(ctx), `[data-part=item-preview]:not([data-disabled])`),
+  getFirstEl: (ctx) => dom.getTagElements(ctx)[0],
+  getLastEl: (ctx) => dom.getTagElements(ctx)[dom.getTagElements(ctx).length - 1],
+  getPrevEl: (ctx, id) => prevById(dom.getTagElements(ctx), id, false),
+  getNextEl: (ctx, id) => nextById(dom.getTagElements(ctx), id, false),
+  getTagElAtIndex: (ctx, index) => dom.getTagElements(ctx)[index],
+  getIndexOfId: (ctx, id) => indexOfId(dom.getTagElements(ctx), id),
+  isInputFocused: (ctx) => dom.getDoc(ctx).activeElement === dom.getInputEl(ctx),
+  getHighlightedTagValue: (ctx) => {
+    if (!ctx.highlightedTagId)
+      return null;
+    const tagEl = dom.getById(ctx, ctx.highlightedTagId);
+    return tagEl?.dataset.value ?? null;
+  },
+  setHoverIntent: (el) => {
+    const tagEl = el.closest("[data-part=item-preview]");
+    if (!tagEl)
+      return;
+    tagEl.dataset.deleteIntent = "";
+  },
+  clearHoverIntent: (el) => {
+    const tagEl = el.closest("[data-part=item-preview]");
+    if (!tagEl)
+      return;
+    delete tagEl.dataset.deleteIntent;
+  },
+  dispatchInputEvent(ctx) {
+    const inputEl = dom.getHiddenInputEl(ctx);
+    if (!inputEl)
+      return;
+    dispatchInputValueEvent(inputEl, { value: ctx.valueAsString });
+  }
+});
+
+function connect(state, send, normalize) {
+  const interactive = state.context.isInteractive;
+  const disabled = state.context.disabled;
+  const readOnly = state.context.readOnly;
+  const invalid = state.context.invalid || state.context.isOverflowing;
+  const translations = state.context.translations;
+  const focused = state.hasTag("focused");
+  const editingTag = state.matches("editing:tag");
+  const empty = state.context.count === 0;
+  function getItemState(options) {
+    const id = dom.getItemId(state.context, options);
+    return {
+      id,
+      editing: editingTag && state.context.editedTagId === id,
+      highlighted: id === state.context.highlightedTagId,
+      disabled: Boolean(options.disabled || disabled)
+    };
+  }
+  return {
+    empty,
+    inputValue: state.context.trimmedInputValue,
+    value: state.context.value,
+    valueAsString: state.context.valueAsString,
+    count: state.context.count,
+    atMax: state.context.isAtMax,
+    setValue(value) {
+      send({ type: "SET_VALUE", value });
+    },
+    clearValue(id) {
+      if (id) {
+        send({ type: "CLEAR_TAG", id });
+      } else {
+        send("CLEAR_VALUE");
+      }
+    },
+    addValue(value) {
+      send({ type: "ADD_TAG", value });
+    },
+    setValueAtIndex(index, value) {
+      send({ type: "SET_VALUE_AT_INDEX", index, value });
+    },
+    setInputValue(value) {
+      send({ type: "SET_INPUT_VALUE", value });
+    },
+    clearInputValue() {
+      send({ type: "SET_INPUT_VALUE", value: "" });
+    },
+    focus() {
+      dom.getInputEl(state.context)?.focus();
+    },
+    getItemState,
+    getRootProps() {
+      return normalize.element({
+        "dir": state.context.dir,
+        ...parts.root.attrs,
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly),
+        "data-disabled": dataAttr(disabled),
+        "data-focus": dataAttr(focused),
+        "data-empty": dataAttr(empty),
+        "id": dom.getRootId(state.context),
+        onPointerDown() {
+          if (!interactive)
+            return;
+          send("POINTER_DOWN");
+        }
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly),
+        "id": dom.getLabelId(state.context),
+        "dir": state.context.dir,
+        "htmlFor": dom.getInputId(state.context)
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        "id": dom.getControlId(state.context),
+        ...parts.control.attrs,
+        "dir": state.context.dir,
+        "tabIndex": readOnly ? 0 : void 0,
+        "data-disabled": dataAttr(disabled),
+        "data-readonly": dataAttr(readOnly),
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused)
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        "dir": state.context.dir,
+        "data-invalid": dataAttr(invalid),
+        "aria-invalid": ariaAttr(invalid),
+        "data-readonly": dataAttr(readOnly),
+        "maxLength": state.context.maxLength,
+        "id": dom.getInputId(state.context),
+        "defaultValue": state.context.inputValue,
+        "autoComplete": "off",
+        "autoCorrect": "off",
+        "autoCapitalize": "none",
+        "disabled": disabled || readOnly,
+        onChange(event) {
+          const evt = getNativeEvent(event);
+          const value = event.currentTarget.value;
+          if (evt.inputType === "insertFromPaste") {
+            send({ type: "PASTE", value });
+            return;
+          }
+          if (endsWith(value, state.context.delimiter)) {
+            send("DELIMITER_KEY");
+            return;
+          }
+          send({ type: "TYPE", value, key: evt.inputType });
+        },
+        onFocus() {
+          send("FOCUS");
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (isComposingEvent(event))
+            return;
+          const target = event.currentTarget;
+          const isCombobox = target.getAttribute("role") === "combobox";
+          const isExpanded = target.ariaExpanded === "true";
+          const keyMap = {
+            ArrowDown() {
+              send("ARROW_DOWN");
+            },
+            ArrowLeft() {
+              if (isCombobox && isExpanded)
+                return;
+              send("ARROW_LEFT");
+            },
+            ArrowRight(event2) {
+              if (state.context.highlightedTagId) {
+                event2.preventDefault();
+              }
+              if (isCombobox && isExpanded)
+                return;
+              send("ARROW_RIGHT");
+            },
+            Escape(event2) {
+              event2.preventDefault();
+              send("ESCAPE");
+            },
+            Backspace() {
+              send("BACKSPACE");
+            },
+            Delete() {
+              send("DELETE");
+            },
+            Enter(event2) {
+              if (isCombobox && isExpanded)
+                return;
+              send("ENTER");
+              event2.preventDefault();
+            }
+          };
+          const key = getEventKey(event, state.context);
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+          }
+        }
+      });
+    },
+    getHiddenInputProps() {
+      return normalize.input({
+        type: "text",
+        hidden: true,
+        name: state.context.name,
+        form: state.context.form,
+        disabled,
+        readOnly,
+        required: state.context.required,
+        id: dom.getHiddenInputId(state.context),
+        defaultValue: state.context.valueAsString
+      });
+    },
+    getItemProps(props) {
+      return normalize.element({
+        ...parts.item.attrs,
+        "dir": state.context.dir,
+        "data-value": props.value,
+        "data-disabled": dataAttr(disabled)
+      });
+    },
+    getItemPreviewProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...parts.itemPreview.attrs,
+        "id": itemState.id,
+        "dir": state.context.dir,
+        "hidden": itemState.editing,
+        "data-value": props.value,
+        "data-disabled": dataAttr(disabled),
+        "data-highlighted": dataAttr(itemState.highlighted),
+        onPointerDown(event) {
+          if (!interactive || itemState.disabled)
+            return;
+          event.preventDefault();
+          send({ type: "POINTER_DOWN_TAG", id: itemState.id });
+        },
+        onDoubleClick() {
+          if (!interactive || itemState.disabled)
+            return;
+          send({ type: "DOUBLE_CLICK_TAG", id: itemState.id });
+        }
+      });
+    },
+    getItemTextProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...parts.itemText.attrs,
+        "dir": state.context.dir,
+        "data-disabled": dataAttr(disabled),
+        "data-highlighted": dataAttr(itemState.highlighted)
+      });
+    },
+    getItemInputProps(props) {
+      const itemState = getItemState(props);
+      return normalize.input({
+        ...parts.itemInput.attrs,
+        "dir": state.context.dir,
+        "aria-label": translations.tagEdited(props.value),
+        "aria-hidden": true,
+        "disabled": disabled,
+        "id": dom.getItemInputId(state.context, props),
+        "tabIndex": -1,
+        "hidden": !itemState.editing,
+        "defaultValue": itemState.editing ? state.context.editedTagValue : "",
+        onChange(event) {
+          send({ type: "TAG_INPUT_TYPE", value: event.currentTarget.value });
+        },
+        onBlur(event) {
+          send({ type: "TAG_INPUT_BLUR", target: event.relatedTarget, id: itemState.id });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (isComposingEvent(event))
+            return;
+          const keyMap = {
+            Enter() {
+              send("TAG_INPUT_ENTER");
+            },
+            Escape() {
+              send("TAG_INPUT_ESCAPE");
+            }
+          };
+          const exec = keyMap[event.key];
+          if (exec) {
+            event.preventDefault();
+            exec(event);
+          }
+        }
+      });
+    },
+    getItemDeleteTriggerProps(props) {
+      const id = dom.getItemId(state.context, props);
+      return normalize.button({
+        ...parts.itemDeleteTrigger.attrs,
+        "dir": state.context.dir,
+        "id": dom.getItemDeleteTriggerId(state.context, props),
+        "type": "button",
+        "disabled": disabled,
+        "aria-label": translations.deleteTagTriggerLabel(props.value),
+        "tabIndex": -1,
+        onPointerDown(event) {
+          if (!interactive) {
+            event.preventDefault();
+          }
+        },
+        onPointerMove(event) {
+          if (!interactive)
+            return;
+          dom.setHoverIntent(event.currentTarget);
+        },
+        onPointerLeave(event) {
+          if (!interactive)
+            return;
+          dom.clearHoverIntent(event.currentTarget);
+        },
+        onClick() {
+          if (!interactive)
+            return;
+          send({ type: "CLICK_DELETE_TAG", id });
+        }
+      });
+    },
+    getClearTriggerProps() {
+      return normalize.button({
+        ...parts.clearTrigger.attrs,
+        "dir": state.context.dir,
+        "id": dom.getClearTriggerId(state.context),
+        "type": "button",
+        "data-readonly": dataAttr(readOnly),
+        "disabled": disabled,
+        "aria-label": translations.clearTriggerLabel,
+        "hidden": empty,
+        onClick() {
+          if (!interactive)
+            return;
+          send("CLEAR_VALUE");
+        }
+      });
+    }
+  };
+}
+function endsWith(str, del) {
+  if (!del)
+    return false;
+  if (typeof del === "string")
+    return str.endsWith(del);
+  return new RegExp(`${del.source}$`).test(str);
+}
+
+const { and, not, or } = guards;
+const invoke = {
+  change: (ctx) => {
+    ctx.onValueChange?.({ value: Array.from(ctx.value) });
+    dom.dispatchInputEvent(ctx);
+  },
+  highlightChange: (ctx) => {
+    const highlightedValue = dom.getHighlightedTagValue(ctx);
+    ctx.onHighlightChange?.({ highlightedValue });
+  },
+  valueChange: (ctx) => {
+    ctx.onInputValueChange?.({ inputValue: ctx.inputValue });
+  }
+};
+const set = {
+  value: (ctx, value) => {
+    if (isEqual(ctx.value, value))
+      return;
+    ctx.value = value;
+    invoke.change(ctx);
+  },
+  valueAtIndex: (ctx, index, value) => {
+    if (isEqual(ctx.value[index], value))
+      return;
+    ctx.value[index] = value;
+    invoke.change(ctx);
+  },
+  highlightedId: (ctx, id) => {
+    if (isEqual(ctx.highlightedTagId, id))
+      return;
+    ctx.highlightedTagId = id;
+    invoke.highlightChange(ctx);
+  },
+  inputValue: (ctx, value) => {
+    if (isEqual(ctx.inputValue, value))
+      return;
+    ctx.inputValue = value;
+    invoke.valueChange(ctx);
+  }
+};
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "dynamic",
+      initial: ctx.autoFocus ? "focused:input" : "idle",
+      context: {
+        inputValue: "",
+        editedTagValue: "",
+        editedTagId: null,
+        highlightedTagId: null,
+        value: [],
+        dir: "ltr",
+        max: Infinity,
+        blurBehavior: void 0,
+        addOnPaste: false,
+        editable: true,
+        validate: () => true,
+        delimiter: ",",
+        disabled: false,
+        readOnly: false,
+        ...ctx,
+        liveRegion: null,
+        log: { current: null, prev: null },
+        fieldsetDisabled: false,
+        translations: {
+          clearTriggerLabel: "Clear all tags",
+          deleteTagTriggerLabel: (value) => `Delete tag ${value}`,
+          tagAdded: (value) => `Added tag ${value}`,
+          tagsPasted: (values) => `Pasted ${values.length} tags`,
+          tagEdited: (value) => `Editing tag ${value}. Press enter to save or escape to cancel.`,
+          tagUpdated: (value) => `Tag update to ${value}`,
+          tagDeleted: (value) => `Tag ${value} deleted`,
+          tagSelected: (value) => `Tag ${value} selected. Press enter to edit, delete or backspace to remove.`,
+          ...ctx.translations
+        }
+      },
+      computed: {
+        count: (ctx2) => ctx2.value.length,
+        valueAsString: (ctx2) => JSON.stringify(ctx2.value),
+        trimmedInputValue: (ctx2) => ctx2.inputValue.trim(),
+        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
+        isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.isDisabled),
+        isAtMax: (ctx2) => ctx2.count === ctx2.max,
+        isOverflowing: (ctx2) => ctx2.count > ctx2.max
+      },
+      watch: {
+        highlightedTagId: "logHighlightedTag",
+        isOverflowing: "invokeOnInvalid",
+        log: "announceLog",
+        inputValue: "syncInputValue",
+        editedTagValue: "syncEditedTagInputValue"
+      },
+      activities: ["trackLiveRegion", "trackFormControlState"],
+      exit: ["clearLog"],
+      on: {
+        DOUBLE_CLICK_TAG: {
+          internal: true,
+          guard: "isTagEditable",
+          target: "editing:tag",
+          actions: ["setEditedId", "initializeEditedTagValue"]
+        },
+        POINTER_DOWN_TAG: {
+          internal: true,
+          target: "navigating:tag",
+          actions: ["highlightTag", "focusInput"]
+        },
+        CLICK_DELETE_TAG: {
+          target: "focused:input",
+          actions: ["deleteTag"]
+        },
+        SET_INPUT_VALUE: {
+          actions: ["setInputValue"]
+        },
+        SET_VALUE: {
+          actions: ["setValue"]
+        },
+        CLEAR_TAG: {
+          actions: ["deleteTag"]
+        },
+        SET_VALUE_AT_INDEX: {
+          actions: ["setValueAtIndex"]
+        },
+        CLEAR_VALUE: {
+          actions: ["clearTags", "clearInputValue", "focusInput"]
+        },
+        ADD_TAG: {
+          actions: ["addTag"]
+        },
+        INSERT_TAG: {
+          // (!isAtMax || allowOverflow) && !inputValueIsEmpty
+          guard: and(or(not("isAtMax"), "allowOverflow"), not("isInputValueEmpty")),
+          actions: ["addTag", "clearInputValue"]
+        },
+        EXTERNAL_BLUR: [
+          { guard: "addOnBlur", actions: "raiseInsertTagEvent" },
+          { guard: "clearOnBlur", actions: "clearInputValue" }
+        ]
+      },
+      states: {
+        "idle": {
+          on: {
+            FOCUS: "focused:input",
+            POINTER_DOWN: {
+              guard: not("hasHighlightedTag"),
+              target: "focused:input"
+            }
+          }
+        },
+        "focused:input": {
+          tags: ["focused"],
+          entry: ["focusInput", "clearHighlightedId"],
+          activities: ["trackInteractOutside"],
+          on: {
+            TYPE: {
+              actions: "setInputValue"
+            },
+            BLUR: [
+              {
+                guard: "addOnBlur",
+                target: "idle",
+                actions: "raiseInsertTagEvent"
+              },
+              {
+                guard: "clearOnBlur",
+                target: "idle",
+                actions: "clearInputValue"
+              },
+              { target: "idle" }
+            ],
+            ENTER: {
+              actions: ["raiseInsertTagEvent"]
+            },
+            DELIMITER_KEY: {
+              actions: ["raiseInsertTagEvent"]
+            },
+            ARROW_LEFT: {
+              guard: and("hasTags", "isInputCaretAtStart"),
+              target: "navigating:tag",
+              actions: "highlightLastTag"
+            },
+            BACKSPACE: {
+              target: "navigating:tag",
+              guard: and("hasTags", "isInputCaretAtStart"),
+              actions: "highlightLastTag"
+            },
+            DELETE: {
+              guard: "hasHighlightedTag",
+              actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
+            },
+            PASTE: [
+              {
+                guard: "addOnPaste",
+                actions: ["setInputValue", "addTagFromPaste"]
+              },
+              {
+                actions: "setInputValue"
+              }
+            ]
+          }
+        },
+        "navigating:tag": {
+          tags: ["focused"],
+          activities: ["trackInteractOutside"],
+          on: {
+            ARROW_RIGHT: [
+              {
+                guard: and("hasTags", "isInputCaretAtStart", not("isLastTagHighlighted")),
+                actions: "highlightNextTag"
+              },
+              { target: "focused:input" }
+            ],
+            ARROW_LEFT: {
+              actions: "highlightPrevTag"
+            },
+            BLUR: {
+              target: "idle",
+              actions: "clearHighlightedId"
+            },
+            ENTER: {
+              guard: and("isTagEditable", "hasHighlightedTag"),
+              target: "editing:tag",
+              actions: ["setEditedId", "initializeEditedTagValue", "focusEditedTagInput"]
+            },
+            ARROW_DOWN: "focused:input",
+            ESCAPE: "focused:input",
+            TYPE: {
+              target: "focused:input",
+              actions: "setInputValue"
+            },
+            BACKSPACE: [
+              {
+                guard: "isFirstTagHighlighted",
+                actions: ["deleteHighlightedTag", "highlightFirstTag"]
+              },
+              {
+                guard: "hasHighlightedTag",
+                actions: ["deleteHighlightedTag", "highlightPrevTag"]
+              },
+              {
+                actions: ["highlightLastTag"]
+              }
+            ],
+            DELETE: {
+              target: "focused:input",
+              actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
+            },
+            PASTE: [
+              {
+                guard: "addOnPaste",
+                target: "focused:input",
+                actions: ["setInputValue", "addTagFromPaste"]
+              },
+              {
+                target: "focused:input",
+                actions: "setInputValue"
+              }
+            ]
+          }
+        },
+        "editing:tag": {
+          tags: ["editing", "focused"],
+          entry: "focusEditedTagInput",
+          activities: ["autoResize"],
+          on: {
+            TAG_INPUT_TYPE: {
+              actions: "setEditedTagValue"
+            },
+            TAG_INPUT_ESCAPE: {
+              target: "navigating:tag",
+              actions: ["clearEditedTagValue", "focusInput", "clearEditedId", "highlightTagAtIndex"]
+            },
+            TAG_INPUT_BLUR: [
+              {
+                guard: "isInputRelatedTarget",
+                target: "navigating:tag",
+                actions: ["clearEditedTagValue", "clearHighlightedId", "clearEditedId"]
+              },
+              {
+                target: "idle",
+                actions: ["clearEditedTagValue", "clearHighlightedId", "clearEditedId", "raiseExternalBlurEvent"]
+              }
+            ],
+            TAG_INPUT_ENTER: [
+              {
+                guard: "isEditedTagEmpty",
+                target: "navigating:tag",
+                actions: ["deleteHighlightedTag", "focusInput", "clearEditedId", "highlightTagAtIndex"]
+              },
+              {
+                target: "navigating:tag",
+                actions: ["submitEditedTagValue", "focusInput", "clearEditedId", "highlightTagAtIndex"]
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isInputRelatedTarget: (ctx2, evt) => evt.relatedTarget === dom.getInputEl(ctx2),
+        isAtMax: (ctx2) => ctx2.isAtMax,
+        hasHighlightedTag: (ctx2) => ctx2.highlightedTagId !== null,
+        isFirstTagHighlighted: (ctx2) => {
+          const firstItemId = dom.getItemId(ctx2, { value: ctx2.value[0], index: 0 });
+          return firstItemId === ctx2.highlightedTagId;
+        },
+        isEditedTagEmpty: (ctx2) => ctx2.editedTagValue.trim() === "",
+        isLastTagHighlighted: (ctx2) => {
+          const lastIndex = ctx2.value.length - 1;
+          const lastItemId = dom.getItemId(ctx2, { value: ctx2.value[lastIndex], index: lastIndex });
+          return lastItemId === ctx2.highlightedTagId;
+        },
+        isInputValueEmpty: (ctx2) => ctx2.trimmedInputValue.length === 0,
+        hasTags: (ctx2) => ctx2.value.length > 0,
+        allowOverflow: (ctx2) => !!ctx2.allowOverflow,
+        autoFocus: (ctx2) => !!ctx2.autoFocus,
+        addOnBlur: (ctx2) => ctx2.blurBehavior === "add",
+        clearOnBlur: (ctx2) => ctx2.blurBehavior === "clear",
+        addOnPaste: (ctx2) => !!ctx2.addOnPaste,
+        isTagEditable: (ctx2) => !!ctx2.editable,
+        isInputCaretAtStart(ctx2) {
+          const input = dom.getInputEl(ctx2);
+          if (!input)
+            return false;
+          try {
+            return input.selectionStart === 0 && input.selectionEnd === 0;
+          } catch {
+            return input.value === "";
+          }
+        }
+      },
+      activities: {
+        trackInteractOutside(ctx2, _evt, { send }) {
+          return trackInteractOutside(dom.getInputEl(ctx2), {
+            exclude(target) {
+              return contains(dom.getRootEl(ctx2), target);
+            },
+            onFocusOutside: ctx2.onFocusOutside,
+            onPointerDownOutside: ctx2.onPointerDownOutside,
+            onInteractOutside(event) {
+              ctx2.onInteractOutside?.(event);
+              if (event.defaultPrevented)
+                return;
+              send({ type: "BLUR", src: "interact-outside" });
+            }
+          });
+        },
+        trackFormControlState(ctx2, _evt, { send, initialContext }) {
+          return trackFormControl(dom.getHiddenInputEl(ctx2), {
+            onFieldsetDisabledChange(disabled) {
+              ctx2.fieldsetDisabled = disabled;
+            },
+            onFormReset() {
+              send({ type: "SET_VALUE", value: initialContext.value, src: "form-reset" });
+            }
+          });
+        },
+        autoResize(ctx2) {
+          if (!ctx2.editedTagValue || ctx2.idx == null || !ctx2.editable)
+            return;
+          const input = dom.getTagInputEl(ctx2, { value: ctx2.editedTagValue, index: ctx2.idx });
+          return autoResizeInput(input);
+        },
+        trackLiveRegion(ctx2) {
+          ctx2.liveRegion = createLiveRegion({
+            level: "assertive",
+            document: dom.getDoc(ctx2)
+          });
+          return () => ctx2.liveRegion?.destroy();
+        }
+      },
+      actions: {
+        raiseInsertTagEvent(_, __, { self }) {
+          self.send("INSERT_TAG");
+        },
+        raiseExternalBlurEvent(_, evt, { self }) {
+          self.send({ type: "EXTERNAL_BLUR", id: evt.id });
+        },
+        dispatchChangeEvent(ctx2) {
+          dom.dispatchInputEvent(ctx2);
+        },
+        highlightNextTag(ctx2) {
+          if (ctx2.highlightedTagId == null)
+            return;
+          const next = dom.getNextEl(ctx2, ctx2.highlightedTagId);
+          set.highlightedId(ctx2, next?.id ?? null);
+        },
+        highlightFirstTag(ctx2) {
+          raf(() => {
+            const first = dom.getFirstEl(ctx2);
+            set.highlightedId(ctx2, first?.id ?? null);
+          });
+        },
+        highlightLastTag(ctx2) {
+          const last = dom.getLastEl(ctx2);
+          set.highlightedId(ctx2, last?.id ?? null);
+        },
+        highlightPrevTag(ctx2) {
+          if (ctx2.highlightedTagId == null)
+            return;
+          const prev = dom.getPrevEl(ctx2, ctx2.highlightedTagId);
+          set.highlightedId(ctx2, prev?.id ?? null);
+        },
+        highlightTag(ctx2, evt) {
+          set.highlightedId(ctx2, evt.id);
+        },
+        highlightTagAtIndex(ctx2) {
+          raf(() => {
+            if (ctx2.idx == null)
+              return;
+            const tagEl = dom.getTagElAtIndex(ctx2, ctx2.idx);
+            if (tagEl == null)
+              return;
+            set.highlightedId(ctx2, tagEl.id);
+            ctx2.idx = void 0;
+          });
+        },
+        deleteTag(ctx2, evt) {
+          const index = dom.getIndexOfId(ctx2, evt.id);
+          const value = ctx2.value[index];
+          ctx2.log.prev = ctx2.log.current;
+          ctx2.log.current = { type: "delete", value };
+          set.value(ctx2, removeAt(ctx2.value, index));
+        },
+        deleteHighlightedTag(ctx2) {
+          if (ctx2.highlightedTagId == null)
+            return;
+          const index = dom.getIndexOfId(ctx2, ctx2.highlightedTagId);
+          ctx2.idx = index;
+          const value = ctx2.value[index];
+          ctx2.log.prev = ctx2.log.current;
+          ctx2.log.current = { type: "delete", value };
+          set.value(ctx2, removeAt(ctx2.value, index));
+        },
+        setEditedId(ctx2, evt) {
+          ctx2.editedTagId = evt.id ?? ctx2.highlightedTagId;
+          ctx2.idx = dom.getIndexOfId(ctx2, ctx2.editedTagId);
+        },
+        clearEditedId(ctx2) {
+          ctx2.editedTagId = null;
+        },
+        clearEditedTagValue(ctx2) {
+          ctx2.editedTagValue = "";
+        },
+        setEditedTagValue(ctx2, evt) {
+          ctx2.editedTagValue = evt.value;
+        },
+        submitEditedTagValue(ctx2) {
+          if (!ctx2.editedTagId)
+            return;
+          const index = dom.getIndexOfId(ctx2, ctx2.editedTagId);
+          set.valueAtIndex(ctx2, index, ctx2.editedTagValue ?? "");
+          ctx2.log.prev = ctx2.log.current;
+          ctx2.log.current = { type: "update", value: ctx2.editedTagValue };
+        },
+        setValueAtIndex(ctx2, evt) {
+          if (evt.value) {
+            ctx2.value[evt.index] = evt.value;
+            ctx2.log.prev = ctx2.log.current;
+            ctx2.log.current = { type: "update", value: evt.value };
+          } else {
+            warn("You need to provide a value for the tag");
+          }
+        },
+        initializeEditedTagValue(ctx2) {
+          if (!ctx2.editedTagId)
+            return;
+          const index = dom.getIndexOfId(ctx2, ctx2.editedTagId);
+          ctx2.editedTagValue = ctx2.value[index];
+        },
+        focusEditedTagInput(ctx2) {
+          raf(() => {
+            dom.getEditInputEl(ctx2)?.select();
+          });
+        },
+        setInputValue(ctx2, evt) {
+          set.inputValue(ctx2, evt.value);
+        },
+        clearHighlightedId(ctx2) {
+          ctx2.highlightedTagId = null;
+        },
+        focusInput(ctx2) {
+          raf(() => {
+            dom.getInputEl(ctx2)?.focus();
+          });
+        },
+        clearInputValue(ctx2) {
+          raf(() => {
+            set.inputValue(ctx2, "");
+          });
+        },
+        syncInputValue(ctx2) {
+          const inputEl = dom.getInputEl(ctx2);
+          dom.setValue(inputEl, ctx2.inputValue);
+        },
+        syncEditedTagInputValue(ctx2, evt) {
+          const id = ctx2.editedTagId || ctx2.highlightedTagId || evt.id;
+          if (id == null)
+            return;
+          const editTagInputEl = dom.getById(ctx2, `${id}:input`);
+          dom.setValue(editTagInputEl, ctx2.editedTagValue);
+        },
+        addTag(ctx2, evt) {
+          const value = evt.value ?? ctx2.trimmedInputValue;
+          const guard = ctx2.validate?.({ inputValue: value, value: Array.from(ctx2.value) });
+          if (guard) {
+            const nextValue = uniq(ctx2.value.concat(value));
+            set.value(ctx2, nextValue);
+            ctx2.log.prev = ctx2.log.current;
+            ctx2.log.current = { type: "add", value };
+          } else {
+            ctx2.onValueInvalid?.({ reason: "invalidTag" });
+          }
+        },
+        addTagFromPaste(ctx2) {
+          raf(() => {
+            const value = ctx2.trimmedInputValue;
+            const guard = ctx2.validate?.({ inputValue: value, value: Array.from(ctx2.value) });
+            if (guard) {
+              const trimmedValue = ctx2.delimiter ? value.split(ctx2.delimiter).map((v) => v.trim()) : [value];
+              const nextValue = uniq(ctx2.value.concat(...trimmedValue));
+              set.value(ctx2, nextValue);
+              ctx2.log.prev = ctx2.log.current;
+              ctx2.log.current = { type: "paste", values: trimmedValue };
+            } else {
+              ctx2.onValueInvalid?.({ reason: "invalidTag" });
+            }
+            set.inputValue(ctx2, "");
+          });
+        },
+        clearTags(ctx2) {
+          set.value(ctx2, []);
+          ctx2.log.prev = ctx2.log.current;
+          ctx2.log.current = { type: "clear" };
+        },
+        setValue(ctx2, evt) {
+          set.value(ctx2, evt.value);
+        },
+        invokeOnInvalid(ctx2) {
+          if (ctx2.isOverflowing) {
+            ctx2.onValueInvalid?.({ reason: "rangeOverflow" });
+          }
+        },
+        clearLog(ctx2) {
+          ctx2.log = { prev: null, current: null };
+        },
+        logHighlightedTag(ctx2) {
+          if (ctx2.highlightedTagId == null)
+            return;
+          const index = dom.getIndexOfId(ctx2, ctx2.highlightedTagId);
+          ctx2.log.prev = ctx2.log.current;
+          ctx2.log.current = { type: "select", value: ctx2.value[index] };
+        },
+        // queue logs with screen reader and get it announced
+        announceLog(ctx2) {
+          if (!ctx2.log.current || ctx2.liveRegion == null)
+            return;
+          const region = ctx2.liveRegion;
+          const { current, prev } = ctx2.log;
+          let msg;
+          switch (current.type) {
+            case "add":
+              msg = ctx2.translations.tagAdded(current.value);
+              break;
+            case "delete":
+              msg = ctx2.translations.tagDeleted(current.value);
+              break;
+            case "update":
+              msg = ctx2.translations.tagUpdated(current.value);
+              break;
+            case "paste":
+              msg = ctx2.translations.tagsPasted(current.values);
+              break;
+            case "select":
+              msg = ctx2.translations.tagSelected(current.value);
+              if (prev?.type === "delete") {
+                msg = `${ctx2.translations.tagDeleted(prev.value)}. ${msg}`;
+              } else if (prev?.type === "update") {
+                msg = `${ctx2.translations.tagUpdated(prev.value)}. ${msg}`;
+              }
+              break;
+          }
+          if (msg)
+            region.announce(msg);
+        }
+      }
+    }
+  );
+}
+
+const props = createProps()([
+  "addOnPaste",
+  "allowOverflow",
+  "autoFocus",
+  "blurBehavior",
+  "delimiter",
+  "dir",
+  "disabled",
+  "editable",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "inputValue",
+  "invalid",
+  "max",
+  "maxLength",
+  "name",
+  "onFocusOutside",
+  "onHighlightChange",
+  "onInputValueChange",
+  "onInteractOutside",
+  "onPointerDownOutside",
+  "onValueChange",
+  "onValueInvalid",
+  "required",
+  "readOnly",
+  "translations",
+  "validate",
+  "value"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["index", "disabled", "value"]);
+const splitItemProps = createSplitProps(itemProps);
+
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };