attaform 0.17.2 → 0.18.1

package/dist/shared/attaform.BDdFdjeX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"attaform.BDdFdjeX.mjs","sources":["../../src/runtime/core/serialize.ts","../../src/runtime/core/devtools-shared.ts"],"sourcesContent":["import type { App } from 'vue'\nimport type { FormKey } from '../types/types-api'\nimport { pathKeyToDotted, type PathKey } from './paths'\nimport { getRegistryFromApp, type SerializedFormData } from './registry'\n\n/**\n * Serialised snapshot of every form in a Vue app, produced by\n * `renderAttaformState` and consumed by `hydrateAttaformState`.\n *\n * JSON-safe — pass to `JSON.stringify`, `devalue`, or any other\n * serialiser before embedding in your SSR payload.\n */\nexport type SerializedAttaformState = {\n  /** Tuples of `[formKey, snapshot]` for every form in the app. */\n  readonly forms: ReadonlyArray<readonly [FormKey, SerializedFormData]>\n}\n\n/**\n * Snapshot every form on a Vue app for SSR. Call from your server\n * entry after rendering the app:\n *\n * ```ts\n * import { renderToString } from '@vue/server-renderer'\n * import { renderAttaformState, escapeForInlineScript } from 'attaform'\n *\n * const html = await renderToString(app)\n * const state = renderAttaformState(app)\n * const payload = escapeForInlineScript(JSON.stringify(state))\n *\n * return `\n *   ${html}\n *   <script>window.__ATTAFORM_STATE__ = ${payload}</script>\n * `\n * ```\n *\n * Pair with `hydrateAttaformState` on the client to restore the\n * forms in their server-rendered state. Nuxt users don't need this —\n * `attaform/nuxt` wires SSR automatically.\n */\nexport function renderAttaformState(app: App): SerializedAttaformState {\n  const registry = getRegistryFromApp(app)\n  const forms: Array<readonly [FormKey, SerializedFormData]> = []\n  for (const [key, state] of registry.forms) {\n    // Skip the blank field when the set is empty so the\n    // wire payload stays minimal for forms that don't use it. The\n    // optional shape on the consuming side handles the absence\n    // cleanly (defaults to \"no blank paths\"). PathKey → dotted at\n    // the boundary so the wire shape matches the rest of the\n    // public path notation.\n    const transientList: string[] = []\n    for (const pk of state.blankPaths) {\n      const d = pathKeyToDotted(pk as PathKey)\n      if (d !== null) transientList.push(d)\n    }\n    forms.push([\n      key,\n      {\n        form: state.form.value,\n        schemaErrors: Array.from(state.schemaErrors.entries()),\n        userErrors: Array.from(state.userErrors.entries()),\n        fields: Array.from(state.fields.entries()),\n        ...(transientList.length > 0 ? { blankPaths: transientList } : {}),\n      },\n    ])\n  }\n  return { forms }\n}\n\n/**\n * Restore forms from a server-rendered snapshot on the client. Call\n * from your client entry before mounting:\n *\n * ```ts\n * import { createApp } from 'vue'\n * import { createAttaform, hydrateAttaformState } from 'attaform'\n *\n * const app = createApp(App).use(createAttaform())\n * hydrateAttaformState(app, window.__ATTAFORM_STATE__)\n * app.mount('#app')\n * ```\n *\n * The next `useForm({ key })` call for each serialised form picks up\n * the snapshot transparently — no further action is required.\n */\nexport function hydrateAttaformState(app: App, payload: SerializedAttaformState): void {\n  const registry = getRegistryFromApp(app)\n  for (const [key, data] of payload.forms) {\n    registry.pendingHydration.set(key, data)\n  }\n}\n","/**\n * Shared building blocks for Attaform's two devtools surfaces — the Vue\n * DevTools (Chrome-extension) inspector wired up in `./devtools.ts`, and\n * the Nuxt DevTools (overlay) panel wired up via `../../nuxt.ts` +\n * `../pages/_attaform_devtools.vue`.\n *\n * Centralizing the redaction policy and the window-bridge contract here\n * keeps both surfaces aligned: a future tightening of the sensitive-name\n * heuristic, or a new field added to the bridge, lands in one file.\n */\nimport type { AttaformRegistry } from './registry'\nimport type { Segment } from './paths'\n\nexport const REDACTED = '[redacted]'\n\n/**\n * Walk `value` and replace any leaf whose enclosing path matches the\n * sensitive-name heuristic with the string `'[redacted]'`. Returns a\n * new tree (no mutation of the input). Object keys + array indices are\n * preserved; only the leaf payloads change.\n *\n * Applied to BOTH devtools surfaces' Form-value rendering AND every\n * timeline event payload — leaks via either surface are treatable as\n * \"any developer with the panel open during user testing can read a\n * customer's password,\" which is exactly the failure mode the\n * sensitive-name guard exists to prevent on the storage side.\n *\n * Leaves whose path doesn't match a pattern pass through untouched.\n * `acknowledgeSensitive: true` on persistence does NOT bypass this — if\n * the consumer opted into persisting the value, they still shouldn't\n * see it in DevTools timelines that grow unbounded.\n *\n * Implementation note: tracks an `inSensitiveSubtree` flag through the\n * recursion instead of allocating a fresh path array per node + calling\n * `isSensitivePath` per leaf. Once any ancestor segment matches the\n * heuristic, the flag stays set for every descendant — the leaf simply\n * returns `REDACTED` without re-scanning the path. For a 100-leaf form:\n * ~100 path allocations + ~100 full-path regex sweeps → 0 path\n * allocations + ~100 single-segment regex sweeps, with whole-subtree\n * short-circuit when sensitive ancestors are found early.\n */\nexport function redactSensitiveLeaves(\n  value: unknown,\n  matchSensitive: (segment: Segment) => boolean\n): unknown {\n  return redactImpl(value, false, matchSensitive)\n}\n\nfunction redactImpl(\n  value: unknown,\n  inSensitiveSubtree: boolean,\n  matchSensitive: (segment: Segment) => boolean\n): unknown {\n  if (value === null || value === undefined) return value\n  if (typeof value !== 'object') {\n    return inSensitiveSubtree ? REDACTED : value\n  }\n  if (Array.isArray(value)) {\n    // Numeric segments never match the sensitive-name heuristic\n    // (segmentMatchesSensitive rejects non-string segments), so the\n    // flag passes through unchanged when descending into arrays.\n    return value.map((item) => redactImpl(item, inSensitiveSubtree, matchSensitive))\n  }\n  // Non-plain object (Map / Set / Date / class instance) — redact\n  // wholesale if we're already in a sensitive subtree; otherwise pass\n  // through. DevTools rendering of these is already heuristic, so we\n  // don't try to descend into them.\n  //\n  // Use `Object.prototype.toString.call(value)` rather than a\n  // `getPrototypeOf` comparison because `Object.prototype` is\n  // realm-scoped — the Nuxt DevTools overlay panel runs in an iframe\n  // whose Vue runtime is separate from the host's, so the host's\n  // reactive proxies have a prototype that doesn't equal the panel's\n  // `Object.prototype`. The `toString` tag check is realm-aware via\n  // `@@toStringTag` and returns `'[object Object]'` for plain objects\n  // (including Vue reactive proxies of plain objects) regardless of\n  // which iframe they were created in.\n  if (Object.prototype.toString.call(value) !== '[object Object]') {\n    return inSensitiveSubtree ? REDACTED : value\n  }\n  const out: Record<string, unknown> = {}\n  for (const key of Object.keys(value as Record<string, unknown>)) {\n    const childSensitive = inSensitiveSubtree || matchSensitive(key)\n    out[key] = redactImpl((value as Record<string, unknown>)[key], childSensitive, matchSensitive)\n  }\n  return out\n}\n\n/**\n * Property key on `window` that the Nuxt-side dev plugin attaches the\n * bridge object to. The iframe-mounted overlay panel reads\n * `window.parent[DEVTOOLS_WINDOW_KEY]` to reach the host app's registry.\n *\n * Underscored + namespaced to make accidental collision with consumer\n * globals vanishingly unlikely. Stable across versions — bumping it\n * would silently disconnect older library builds from newer overlay\n * panels in the same browser tab during a library upgrade.\n */\nexport const DEVTOOLS_WINDOW_KEY = '__attaform_devtools__'\n\n/**\n * Shape of the object the host plugin attaches to `window` in dev mode.\n * The iframe overlay panel reads this to discover the live registry and\n * render its forms.\n *\n * Single-registry assumption: the latest `createAttaform()` install\n * wins. Multi-app pages (rare; typically only seen in micro-frontend\n * setups) will only see one app's forms in the panel. Documented but\n * not actively supported — the alternative (a Set of registries with\n * union-rendering) is a future call if a real consumer hits it.\n */\nexport interface AttaformDevtoolsBridge {\n  registry: AttaformRegistry\n  /**\n   * The library version, surfaced in the panel's footer for support /\n   * bug-report context. Read from `package.json` at host-plugin init.\n   */\n  version: string\n}\n\ndeclare global {\n  interface Window {\n    [DEVTOOLS_WINDOW_KEY]?: AttaformDevtoolsBridge\n  }\n}\n"],"names":[],"mappings":";;AAuCO,SAAS,oBAAoB,GAAA,EAAmC;AACrE,EAAA,MAAM,QAAA,GAAW,mBAAmB,GAAG,CAAA;AACvC,EAAA,MAAM,QAAuD,EAAC;AAC9D,EAAA,KAAA,MAAW,CAAC,GAAA,EAAK,KAAK,CAAA,IAAK,SAAS,KAAA,EAAO;AAOzC,IAAA,MAAM,gBAA0B,EAAC;AACjC,IAAA,KAAA,MAAW,EAAA,IAAM,MAAM,UAAA,EAAY;AACjC,MAAA,MAAM,CAAA,GAAI,gBAAgB,EAAa,CAAA;AACvC,MAAA,IAAI,CAAA,KAAM,IAAA,EAAM,aAAA,CAAc,IAAA,CAAK,CAAC,CAAA;AAAA,IACtC;AACA,IAAA,KAAA,CAAM,IAAA,CAAK;AAAA,MACT,GAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,MAAM,IAAA,CAAK,KAAA;AAAA,QACjB,cAAc,KAAA,CAAM,IAAA,CAAK,KAAA,CAAM,YAAA,CAAa,SAAS,CAAA;AAAA,QACrD,YAAY,KAAA,CAAM,IAAA,CAAK,KAAA,CAAM,UAAA,CAAW,SAAS,CAAA;AAAA,QACjD,QAAQ,KAAA,CAAM,IAAA,CAAK,KAAA,CAAM,MAAA,CAAO,SAAS,CAAA;AAAA,QACzC,GAAI,cAAc,MAAA,GAAS,CAAA,GAAI,EAAE,UAAA,EAAY,aAAA,KAAkB;AAAC;AAClE,KACD,CAAA;AAAA,EACH;AACA,EAAA,OAAO,EAAE,KAAA,EAAM;AACjB;AAkBO,SAAS,oBAAA,CAAqB,KAAU,OAAA,EAAwC;AACrF,EAAA,MAAM,QAAA,GAAW,mBAAmB,GAAG,CAAA;AACvC,EAAA,KAAA,MAAW,CAAC,GAAA,EAAK,IAAI,CAAA,IAAK,QAAQ,KAAA,EAAO;AACvC,IAAA,QAAA,CAAS,gBAAA,CAAiB,GAAA,CAAI,GAAA,EAAK,IAAI,CAAA;AAAA,EACzC;AACF;;AC5EO,MAAM,QAAA,GAAW;AA4BjB,SAAS,qBAAA,CACd,OACA,cAAA,EACS;AACT,EAAA,OAAO,UAAA,CAAW,KAAA,EAAO,KAAA,EAAO,cAAc,CAAA;AAChD;AAEA,SAAS,UAAA,CACP,KAAA,EACA,kBAAA,EACA,cAAA,EACS;AACT,EAAA,IAAI,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,MAAA,EAAW,OAAO,KAAA;AAClD,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,IAAA,OAAO,qBAAqB,QAAA,GAAW,KAAA;AAAA,EACzC;AACA,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG;AAIxB,IAAA,OAAO,KAAA,CAAM,IAAI,CAAC,IAAA,KAAS,WAAW,IAAA,EAAM,kBAAA,EAAoB,cAAc,CAAC,CAAA;AAAA,EACjF;AAeA,EAAA,IAAI,OAAO,SAAA,CAAU,QAAA,CAAS,IAAA,CAAK,KAAK,MAAM,iBAAA,EAAmB;AAC/D,IAAA,OAAO,qBAAqB,QAAA,GAAW,KAAA;AAAA,EACzC;AACA,EAAA,MAAM,MAA+B,EAAC;AACtC,EAAA,KAAA,MAAW,GAAA,IAAO,MAAA,CAAO,IAAA,CAAK,KAAgC,CAAA,EAAG;AAC/D,IAAA,MAAM,cAAA,GAAiB,kBAAA,IAAsB,cAAA,CAAe,GAAG,CAAA;AAC/D,IAAA,GAAA,CAAI,GAAG,CAAA,GAAI,UAAA,CAAY,MAAkC,GAAG,CAAA,EAAG,gBAAgB,cAAc,CAAA;AAAA,EAC/F;AACA,EAAA,OAAO,GAAA;AACT;AAYO,MAAM,mBAAA,GAAsB;;;;"}

package/dist/shared/{attaform.Dee2rU1P.cjs → attaform.BqK_L4gK.cjs}

@@ -78,43 +78,118 @@ function detectSSR(options = {}) {
 }
 
 const kAttaformRegistry = Symbol.for("attaform:registry");
+const kAttaformAncestorWizard = Symbol.for(
+  "attaform:ancestor-wizard"
+);
+const kAttaformWizardActiveStepResolver = Symbol.for(
+  "attaform:wizard-active-step-resolver"
+);
 const kFormContext = Symbol.for("attaform:form-context");
 const kFormInstanceId = Symbol.for("attaform:form-instance-id");
 function createRegistry(options = {}) {
   const ssr = detectSSR(options);
   const defaults = Object.freeze({ ...options.defaults ?? {} });
   const forms = vue.shallowReactive(/* @__PURE__ */ new Map());
+  const wizards = vue.shallowReactive(/* @__PURE__ */ new Map());
   const pendingHydration = vue.shallowReactive(/* @__PURE__ */ new Map());
   const consumers = /* @__PURE__ */ new Map();
   const evicting = /* @__PURE__ */ new Set();
+  const pendingEvictions = /* @__PURE__ */ new Map();
+  function cancelPendingEviction(key) {
+    const pending = pendingEvictions.get(key);
+    if (pending === void 0) return;
+    pending.cancelled = true;
+    pendingEvictions.delete(key);
+  }
   function trackConsumer(key) {
+    cancelPendingEviction(key);
     consumers.set(key, (consumers.get(key) ?? 0) + 1);
     let disposed = false;
     return () => {
       if (disposed) return;
       disposed = true;
       const remaining = (consumers.get(key) ?? 1) - 1;
-      if (remaining <= 0) {
+      if (remaining > 0) {
+        consumers.set(key, remaining);
+        return;
+      }
+      consumers.delete(key);
+      const token = { cancelled: false };
+      pendingEvictions.set(key, token);
+      queueMicrotask(() => {
+        if (token.cancelled) return;
+        if (pendingEvictions.get(key) !== token) return;
+        pendingEvictions.delete(key);
         const state = forms.get(key);
-        consumers.delete(key);
         forms.delete(key);
-        if (state !== void 0) {
-          evicting.add(state);
-          void state.awaitPendingWrites().catch(() => void 0).finally(() => {
-            evicting.delete(state);
-            state.dispose();
-          });
-        }
-      } else {
-        consumers.set(key, remaining);
+        if (state === void 0) return;
+        evicting.add(state);
+        void state.awaitPendingWrites().catch(() => void 0).finally(() => {
+          evicting.delete(state);
+          state.dispose();
+        });
+      });
+    };
+  }
+  const wizardConsumers = /* @__PURE__ */ new Map();
+  const pendingWizardEvictions = /* @__PURE__ */ new Map();
+  function cancelPendingWizardEviction(key) {
+    const pending = pendingWizardEvictions.get(key);
+    if (pending === void 0) return;
+    pending.cancelled = true;
+    pendingWizardEvictions.delete(key);
+  }
+  function trackWizardConsumer(key) {
+    cancelPendingWizardEviction(key);
+    wizardConsumers.set(key, (wizardConsumers.get(key) ?? 0) + 1);
+    let disposed = false;
+    return () => {
+      if (disposed) return;
+      disposed = true;
+      const remaining = (wizardConsumers.get(key) ?? 1) - 1;
+      if (remaining > 0) {
+        wizardConsumers.set(key, remaining);
+        return;
       }
+      wizardConsumers.delete(key);
+      const token = { cancelled: false };
+      pendingWizardEvictions.set(key, token);
+      queueMicrotask(() => {
+        if (token.cancelled) return;
+        if (pendingWizardEvictions.get(key) !== token) return;
+        pendingWizardEvictions.delete(key);
+        wizards.delete(key);
+      });
     };
   }
   async function shutdown() {
     const states = [...forms.values(), ...evicting];
     await Promise.allSettled(states.map((state) => state.awaitPendingWrites()));
   }
-  return { forms, pendingHydration, ssr, defaults, trackConsumer, shutdown };
+  const prefetchEnqueued = /* @__PURE__ */ new Set();
+  const prefetchSkipped = /* @__PURE__ */ new Set();
+  function enqueuePrefetch(key) {
+    prefetchEnqueued.add(key);
+  }
+  function skipPrefetch(key) {
+    prefetchSkipped.add(key);
+  }
+  function shouldPrefetch(key) {
+    return prefetchEnqueued.has(key) && !prefetchSkipped.has(key);
+  }
+  return {
+    forms,
+    wizards,
+    pendingHydration,
+    ssr,
+    defaults,
+    trackConsumer,
+    trackWizardConsumer,
+    enqueuePrefetch,
+    skipPrefetch,
+    shouldPrefetch,
+    shutdown
+  };
 }
 function useRegistry() {
   const instance = vue.getCurrentInstance();
@@ -284,6 +359,17 @@ function useRegister() {
     if ("registerValue" in rawAttrs) {
       capturedRegisterValue.value = rawAttrs["registerValue"];
       delete rawAttrs["registerValue"];
+    } else {
+      const dirs = instance.vnode.dirs;
+      if (dirs !== null && dirs !== void 0) {
+        for (const dir of dirs) {
+          const marked = dir.dir?.[V_REGISTER_MARKER];
+          if (marked === true) {
+            capturedRegisterValue.value = dir.value;
+            break;
+          }
+        }
+      }
     }
     if ("value" in rawAttrs) delete rawAttrs["value"];
   };
@@ -634,6 +720,12 @@ const getModelAssigner = (el, vnode, registerValue) => {
     };
   }
   const defaultAssigner = (value) => {
+    if (value === void 0 && registerValue.acceptsUndefined) {
+      return registerValue.setValueWithInternalPath(
+        void 0,
+        computePersistMeta(el, registerValue)
+      );
+    }
     const r = runTransforms(value, registerValue);
     if (!r.ok) return false;
     const coerced = applyCoerce(r.value, registerValue);
@@ -642,9 +734,10 @@ const getModelAssigner = (el, vnode, registerValue) => {
   defaultAssigner[DEFAULT_ASSIGNER_TAG] = true;
   return defaultAssigner;
 };
-function syncPersistOptIn(el, value, oldValue) {
+function syncPersistOptIn(el, value, oldValue, vnodeType) {
   const wasOptedIn = isRegisterValue(oldValue) && oldValue.persist === true;
-  const wantsOptIn = isRegisterValue(value) && value.persist === true;
+  const isFileInput = el.tagName === "INPUT" && (vnodeType === "file" || el.type === "file");
+  const wantsOptIn = !isFileInput && isRegisterValue(value) && value.persist === true;
   if (!wasOptedIn && !wantsOptIn) return;
   const elementId = getOrAssignElementId(el);
   if (wasOptedIn) {
@@ -770,7 +863,13 @@ const vRegisterText = {
         }
         if (isRegisterValue(value)) writeLastTypedForm(value, typedString);
       }
-      el[assignKey]?.(domValue);
+      if (domValue === "" && isRegisterValue(value) && !value.acceptsString && !value.acceptsUndefined) {
+        writeLastTypedForm(value, null);
+        value.markBlank();
+        return;
+      }
+      const commit = domValue === "" && isRegisterValue(value) && value.acceptsUndefined ? void 0 : domValue;
+      el[assignKey]?.(commit);
       if (isRegisterValue(value) && isDefaultAssigner(el[assignKey])) {
         const storage = value.innerRef.value;
         if (storage !== domValue) {
@@ -1122,7 +1221,7 @@ const SUPPORTED_TAGS = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT"]);
 const warnedUnsupportedElements = __DEV__ ? /* @__PURE__ */ new WeakSet() : null;
 const vRegisterDynamic = {
   created(el, binding, vnode) {
-    syncPersistOptIn(el, binding.value, void 0);
+    syncPersistOptIn(el, binding.value, void 0, vnode.props?.["type"]);
     syncMultiTabOptOut(binding.value, void 0);
     callModelHook(el, binding, vnode, null, "created");
     if (__DEV__ && warnedUnsupportedElements !== null && !SUPPORTED_TAGS.has(el.tagName) && !warnedUnsupportedElements.has(el)) {
@@ -1144,7 +1243,7 @@ const vRegisterDynamic = {
     callModelHook(el, binding, vnode, null, "mounted");
   },
   beforeUpdate(el, binding, vnode, prevVNode) {
-    syncPersistOptIn(el, binding.value, binding.oldValue);
+    syncPersistOptIn(el, binding.value, binding.oldValue, vnode.props?.["type"]);
     syncMultiTabOptOut(binding.value, binding.oldValue);
     syncElementRegistration(el, binding.value, binding.oldValue);
     callModelHook(el, binding, vnode, prevVNode, "beforeUpdate");
@@ -1165,18 +1264,83 @@ const vRegisterDynamic = {
     delete el[assignKey];
   }
 };
-const vRegisterFileNoop = {
+function isBlankFileValue(value) {
+  if (value === null || value === void 0) return true;
+  if (Array.isArray(value) && value.length === 0) return true;
+  if (typeof FileList !== "undefined" && value instanceof FileList && value.length === 0)
+    return true;
+  return false;
+}
+function readFilesFromInput(el) {
+  const files = el.files;
+  if (el.multiple) {
+    return files === null ? [] : Array.from(files);
+  }
+  if (files === null || files.length === 0) return null;
+  return files.item(0);
+}
+const warnedPersistedFileForms = __DEV__ ? /* @__PURE__ */ new WeakMap() : null;
+function maybeWarnPersistedFile(value) {
+  if (!__DEV__ || warnedPersistedFileForms === null) return;
+  if (value.persist !== true) return;
+  let warnedPaths = warnedPersistedFileForms.get(value.persistOptIns);
+  if (warnedPaths === void 0) {
+    warnedPaths = /* @__PURE__ */ new Set();
+    warnedPersistedFileForms.set(value.persistOptIns, warnedPaths);
+  }
+  if (warnedPaths.has(value.path)) return;
+  warnedPaths.add(value.path);
+  vue.warn(
+    `[attaform] register('${value.path}', { persist: true }) on <input type="file"> \u2014 files can't ride a refresh (browsers block programmatic writes to <input type="file">), so this path won't be saved. For long-lived flows, upload on selection and persist the resulting URL or ID in a sibling string field.`
+  );
+}
+const fileScopeKey = Symbol.for("attaform:file-scope");
+const vRegisterFile = {
   created(el, { value }) {
     if (!isRegisterValue(value)) return;
-    value.registerElement(el);
-    if (__DEV__) {
-      vue.warn(
-        '[attaform] v-register on <input type="file"> is not supported. Handle uploads with a manual @change listener.'
+    const input = el;
+    value.registerElement(input);
+    maybeWarnPersistedFile(value);
+    const currentRaw = value.innerRef.value;
+    if (isBlankFileValue(currentRaw)) {
+      const blankShape = input.multiple ? [] : null;
+      value.setValueWithInternalPath(blankShape, { blank: true });
+    }
+    addEventListener(input, "change", () => {
+      const next = readFilesFromInput(input);
+      const blank = isBlankFileValue(next);
+      value.setValueWithInternalPath(next, blank ? { blank: true } : void 0);
+    });
+    const scope = vue.effectScope(true);
+    scope.run(() => {
+      vue.watch(
+        value.innerRef,
+        (next) => {
+          if (!isBlankFileValue(next)) return;
+          value.setValueWithInternalPath(next, { blank: true });
+          if (input.value !== "") input.value = "";
+        },
+        { flush: "post" }
       );
+    });
+    input[fileScopeKey] = () => scope.stop();
+  },
+  beforeUpdate(el, { value }) {
+    if (!isRegisterValue(value)) return;
+    const input = el;
+    const currentRaw = value.innerRef.value;
+    if (isBlankFileValue(currentRaw)) {
+      value.setValueWithInternalPath(currentRaw, { blank: true });
+      if (input.value !== "") input.value = "";
     }
   },
   beforeUnmount(el, { value }) {
     removeTrackedListeners(el);
+    const stop = el[fileScopeKey];
+    if (stop !== void 0) {
+      stop();
+      delete el[fileScopeKey];
+    }
     if (!isRegisterValue(value)) return;
     value.deregisterElement(el);
   }
@@ -1185,7 +1349,7 @@ function resolveDynamicModel(tagName, type) {
   if (tagName === "SELECT") return vRegisterSelect;
   if (tagName === "TEXTAREA") return vRegisterText;
   if (typeof type !== "string") return vRegisterText;
-  if (type === "file") return vRegisterFileNoop;
+  if (type === "file") return vRegisterFile;
   if (type === "checkbox") return vRegisterCheckbox;
   if (type === "radio") return vRegisterRadio;
   return vRegisterText;
@@ -1195,7 +1359,9 @@ function callModelHook(el, binding, vnode, prevVNode, hook) {
   const fn = modelToUse[hook];
   fn?.(el, binding, vnode, prevVNode);
 }
+const V_REGISTER_MARKER = Symbol.for("attaform:v-register-directive");
 const vRegister = vRegisterDynamic;
+vRegisterDynamic[V_REGISTER_MARKER] = true;
 
 function installAttaformOnApp(app, options, source) {
   if (app._attaform !== void 0) {
@@ -1232,19 +1398,133 @@ function createAttaform(options = {}) {
   return plugin;
 }
 
+const INTEGER_SEGMENT = /^(?:0|[1-9]\d*)$/;
+function normalizeSegment(raw) {
+  if (typeof raw === "number") {
+    if (!Number.isInteger(raw) || raw < 0) {
+      throw new InvalidPathError(
+        `Path segments must be non-negative integers when numeric; got ${String(raw)}`
+      );
+    }
+    return raw;
+  }
+  if (INTEGER_SEGMENT.test(raw)) return Number(raw);
+  return raw;
+}
+function parseDottedPath(path) {
+  if (path.length === 0) return [""];
+  const rawSegments = path.split(".");
+  const segments = [];
+  for (const raw of rawSegments) {
+    if (raw.length === 0) {
+      throw new InvalidPathError(
+        `Path '${path}' has an empty segment; use the array form for empty keys.`
+      );
+    }
+    segments.push(normalizeSegment(raw));
+  }
+  return segments;
+}
+const CANONICAL_STRING_CACHE_MAX = 128;
+const canonicalStringCache = /* @__PURE__ */ new Map();
+const PATHKEY_TO_SEGMENTS_MAX = 4096;
+const pathKeyToSegments = /* @__PURE__ */ new Map();
+function rememberSegmentsForPathKey(key, segments) {
+  if (!pathKeyToSegments.has(key) && pathKeyToSegments.size >= PATHKEY_TO_SEGMENTS_MAX) {
+    const oldest = pathKeyToSegments.keys().next().value;
+    if (oldest !== void 0) pathKeyToSegments.delete(oldest);
+  }
+  pathKeyToSegments.set(key, segments);
+}
+function segmentsForPathKey(key) {
+  const cached = pathKeyToSegments.get(key);
+  if (cached !== void 0) return cached;
+  let parsed;
+  try {
+    parsed = JSON.parse(key);
+  } catch {
+    return null;
+  }
+  if (!Array.isArray(parsed)) return null;
+  const segments = [];
+  for (const raw of parsed) {
+    if (typeof raw !== "string" && typeof raw !== "number") return null;
+    segments.push(normalizeSegment(raw));
+  }
+  rememberSegmentsForPathKey(key, segments);
+  return segments;
+}
+function canonicalizePath(input) {
+  if (typeof input === "string") {
+    const cached = canonicalStringCache.get(input);
+    if (cached !== void 0) return cached;
+    const segments2 = parseDottedPath(input);
+    const key2 = JSON.stringify(segments2);
+    const entry = { segments: segments2, key: key2 };
+    if (canonicalStringCache.size >= CANONICAL_STRING_CACHE_MAX) {
+      const oldest = canonicalStringCache.keys().next().value;
+      if (oldest !== void 0) canonicalStringCache.delete(oldest);
+    }
+    canonicalStringCache.set(input, entry);
+    rememberSegmentsForPathKey(key2, segments2);
+    return entry;
+  }
+  const segments = Array.from(input).map(normalizeSegment);
+  const key = JSON.stringify(segments);
+  rememberSegmentsForPathKey(key, segments);
+  return { segments, key };
+}
+function segmentsToDotted(segments) {
+  return segments.join(".");
+}
+function pathKeyToDotted(key) {
+  const segments = segmentsForPathKey(key);
+  if (segments === null) return null;
+  return segmentsToDotted(segments);
+}
+function coerceToPathKey(input) {
+  if (input.length > 0 && input.charCodeAt(0) === 91) {
+    try {
+      const parsed = JSON.parse(input);
+      if (Array.isArray(parsed) && parsed.every((s) => typeof s === "string" || typeof s === "number")) {
+        return input;
+      }
+    } catch {
+    }
+  }
+  return canonicalizePath(input).key;
+}
+const ROOT_PATH = Object.freeze([]);
+const ROOT_PATH_KEY = "[]";
+const FORM_ERRORS_PATH = Object.freeze([""]);
+const FORM_ERRORS_PATH_KEY = '[""]';
+function isPathPrefix(prefix, path) {
+  if (path.length < prefix.length) return false;
+  for (let i = 0; i < prefix.length; i++) {
+    if (path[i] !== prefix[i]) return false;
+  }
+  return true;
+}
+
 exports.AnonPersistError = AnonPersistError;
 exports.AttaformError = AttaformError;
 exports.DEFAULT_SENSITIVE_NAMES = DEFAULT_SENSITIVE_NAMES;
+exports.FORM_ERRORS_PATH = FORM_ERRORS_PATH;
+exports.FORM_ERRORS_PATH_KEY = FORM_ERRORS_PATH_KEY;
 exports.InvalidPathError = InvalidPathError;
 exports.InvalidUseFormConfigError = InvalidUseFormConfigError;
 exports.OutsideSetupError = OutsideSetupError;
+exports.ROOT_PATH = ROOT_PATH;
+exports.ROOT_PATH_KEY = ROOT_PATH_KEY;
 exports.RegistryNotInstalledError = RegistryNotInstalledError;
 exports.ReservedFormKeyError = ReservedFormKeyError;
 exports.SensitivePersistFieldError = SensitivePersistFieldError;
 exports.SubmitErrorHandlerError = SubmitErrorHandlerError;
 exports.__DEV__ = __DEV__;
 exports.assignKey = assignKey;
+exports.canonicalizePath = canonicalizePath;
 exports.captureUserCallSite = captureUserCallSite;
+exports.coerceToPathKey = coerceToPathKey;
 exports.createAttaform = createAttaform;
 exports.createIsSensitivePath = createIsSensitivePath;
 exports.createPersistOptInRegistry = createPersistOptInRegistry;
@@ -1253,13 +1533,19 @@ exports.createSegmentMatchesSensitive = createSegmentMatchesSensitive;
 exports.enforceSensitiveCheck = enforceSensitiveCheck;
 exports.ensureAttaformInstalled = ensureAttaformInstalled;
 exports.getRegistryFromApp = getRegistryFromApp;
+exports.isPathPrefix = isPathPrefix;
 exports.isRegisterValue = isRegisterValue;
 exports.isSensitivePath = isSensitivePath;
+exports.kAttaformAncestorWizard = kAttaformAncestorWizard;
 exports.kAttaformRegistry = kAttaformRegistry;
+exports.kAttaformWizardActiveStepResolver = kAttaformWizardActiveStepResolver;
 exports.kFormContext = kFormContext;
 exports.kFormInstanceId = kFormInstanceId;
+exports.parseDottedPath = parseDottedPath;
+exports.pathKeyToDotted = pathKeyToDotted;
 exports.segmentMatchesSensitive = segmentMatchesSensitive;
+exports.segmentsForPathKey = segmentsForPathKey;
 exports.useRegister = useRegister;
 exports.useRegistry = useRegistry;
 exports.vRegister = vRegister;
-//# sourceMappingURL=attaform.Dee2rU1P.cjs.map
+//# sourceMappingURL=attaform.BqK_L4gK.cjs.map