@daltonr/pathwrite-solid 0.14.0 → 0.15.0

package/dist/index.js

@@ -1,281 +1,572 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "solid-js/jsx-runtime";
-import { createSignal, createMemo, untrack, onCleanup, onMount, createContext, useContext, createEffect, on, For, Show, } from "solid-js";
-import { PathEngine, formatFieldKey, errorPhaseMessage, } from "@daltonr/pathwrite-core";
-// ---------------------------------------------------------------------------
-// usePath composable
-// ---------------------------------------------------------------------------
-export function usePath(options) {
-    let ownEngine = null;
-    const resolveEngine = () => {
-        const external = typeof options?.engine === "function" ? options.engine() : options?.engine;
-        return external ?? (ownEngine ??= new PathEngine());
-    };
-    let engine = resolveEngine();
-    const [snapshot, setSnapshot] = createSignal(engine.snapshot(), 
+import { delegateEvents, createComponent, getNextElement, getNextMarker, insert, memo, runHydrationEvents, effect, className, setStyleProperty, addEventListener, setProperty, template } from "solid-js/web";
+import { createContext, createSignal, createEffect, on, onCleanup, useContext, onMount, createMemo, Show, For, untrack } from "solid-js";
+import { PathEngine, formatFieldKey, errorPhaseMessage } from "@daltonr/pathwrite-core";
+import { PathEngine as PathEngine2 } from "@daltonr/pathwrite-core";
+var _tmpl$ = /* @__PURE__ */ template(`<div class=pw-shell__body>`), _tmpl$2 = /* @__PURE__ */ template(`<ul class=pw-shell__validation>`), _tmpl$3 = /* @__PURE__ */ template(`<ul class=pw-shell__warnings>`), _tmpl$4 = /* @__PURE__ */ template(`<p class=pw-shell__blocking-error>`), _tmpl$5 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<button type=button class=pw-shell__start-btn>Start`), _tmpl$7 = /* @__PURE__ */ template(`<div class=pw-shell><div class=pw-shell__empty><p>No active path.</p><!$><!/>`), _tmpl$8 = /* @__PURE__ */ template(`<div class=pw-shell__completion><p class=pw-shell__completion-message>All done.</p><button type=button class=pw-shell__completion-restart>Start over`), _tmpl$9 = /* @__PURE__ */ template(`<span class=pw-shell__validation-label>`), _tmpl$0 = /* @__PURE__ */ template(`<li class=pw-shell__validation-item><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ template(`<span class=pw-shell__warnings-label>`), _tmpl$10 = /* @__PURE__ */ template(`<li class=pw-shell__warnings-item><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<div class=pw-shell__root-progress><div class=pw-shell__steps></div><div class=pw-shell__track><div class=pw-shell__track-fill>`), _tmpl$12 = /* @__PURE__ */ template(`<div><span class=pw-shell__step-dot></span><span class=pw-shell__step-label>`), _tmpl$13 = /* @__PURE__ */ template(`<div class=pw-shell__header><div class=pw-shell__steps></div><div class=pw-shell__track><div class=pw-shell__track-fill>`), _tmpl$14 = /* @__PURE__ */ template(`<button type=button class="pw-shell__btn pw-shell__btn--retry">Try again`), _tmpl$15 = /* @__PURE__ */ template(`<button type=button>Save and come back later`), _tmpl$16 = /* @__PURE__ */ template(`<div class=pw-shell__error><div class=pw-shell__error-title></div><div class=pw-shell__error-message><!$><!/><!$><!/></div><div class=pw-shell__error-actions><!$><!/><!$><!/><!$><!/>`), _tmpl$17 = /* @__PURE__ */ template(`<button type=button class="pw-shell__btn pw-shell__btn--cancel">`), _tmpl$18 = /* @__PURE__ */ template(`<button type=button class="pw-shell__btn pw-shell__btn--back">`), _tmpl$19 = /* @__PURE__ */ template(`<div class=pw-shell__footer><div class=pw-shell__footer-left><!$><!/><!$><!/></div><div class=pw-shell__footer-right><!$><!/><button type=button>`);
+function usePath(options) {
+  let ownEngine = null;
+  const resolveEngine = () => {
+    const external = typeof options?.engine === "function" ? options.engine() : options?.engine;
+    return external ?? (ownEngine ??= new PathEngine());
+  };
+  let engine = resolveEngine();
+  const [snapshot, setSnapshot] = createSignal(
+    engine.snapshot(),
     // always notify — PathEngine produces new snapshot objects on every event
-    { equals: false });
-    const onEngineEvent = (event) => {
-        if (event.type === "stateChanged" || event.type === "resumed") {
-            setSnapshot(event.snapshot);
-        }
-        else if (event.type === "completed" || event.type === "cancelled") {
-            setSnapshot(engine.snapshot());
-        }
-        options?.onEvent?.(event);
-    };
-    let unsubscribe = engine.subscribe(onEngineEvent);
-    // Adopt a late or swapped engine: re-subscribe and re-seed the snapshot.
-    createEffect(on(resolveEngine, (next) => {
-        if (next === engine)
-            return;
-        unsubscribe();
-        engine = next;
-        setSnapshot(engine.snapshot());
-        unsubscribe = engine.subscribe(onEngineEvent);
-    }, { defer: true }));
-    onCleanup(() => unsubscribe());
-    const start = (path, initialData = {}) => engine.start(path, initialData);
-    const startSubPath = (path, initialData = {}, meta) => engine.startSubPath(path, initialData, meta);
-    const next = () => engine.next();
-    const previous = () => engine.previous();
-    const cancel = () => engine.cancel();
-    const goToStep = (stepId, options) => engine.goToStep(stepId, options);
-    const goToStepChecked = (stepId, options) => engine.goToStepChecked(stepId, options);
-    const setData = (key, value) => engine.setData(key, value);
-    const resetStep = () => engine.resetStep();
-    const restart = () => engine.restart();
-    const retry = () => engine.retry();
-    const suspend = () => engine.suspend();
-    const validate = () => engine.validate();
-    return {
-        snapshot,
-        start,
-        startSubPath,
-        next,
-        previous,
-        cancel,
-        goToStep,
-        goToStepChecked,
-        setData,
-        resetStep,
-        restart,
-        retry,
-        suspend,
-        validate,
-    };
-}
-const PathContext = createContext(undefined);
-/**
- * Access the nearest `PathShell`'s path instance and optional services object.
- * Throws if used outside of a PathShell component.
- *
- * Both generics are type-level assertions, not runtime guarantees:
- * - `TData` narrows `snapshot().data`
- * - `TServices` types the `services` value — must match what was passed to `PathShell`
- */
-export function usePathContext() {
-    const ctx = useContext(PathContext);
-    if (!ctx) {
-        throw new Error("usePathContext must be used within a PathShell component.");
+    {
+      equals: false
     }
-    return {
-        ...ctx.path,
-        services: ctx.services,
-    };
+  );
+  const onEngineEvent = (event) => {
+    if (event.type === "stateChanged" || event.type === "resumed") {
+      setSnapshot(event.snapshot);
+    } else if (event.type === "completed" || event.type === "cancelled") {
+      setSnapshot(engine.snapshot());
+    }
+    options?.onEvent?.(event);
+  };
+  let unsubscribe = engine.subscribe(onEngineEvent);
+  createEffect(on(resolveEngine, (next2) => {
+    if (next2 === engine) return;
+    unsubscribe();
+    engine = next2;
+    setSnapshot(engine.snapshot());
+    unsubscribe = engine.subscribe(onEngineEvent);
+  }, {
+    defer: true
+  }));
+  onCleanup(() => unsubscribe());
+  const start = (path, initialData = {}) => engine.start(path, initialData);
+  const startSubPath = (path, initialData = {}, meta) => engine.startSubPath(path, initialData, meta);
+  const next = () => engine.next();
+  const previous = () => engine.previous();
+  const cancel = () => engine.cancel();
+  const goToStep = (stepId, options2) => engine.goToStep(stepId, options2);
+  const goToStepChecked = (stepId, options2) => engine.goToStepChecked(stepId, options2);
+  const setData = (key, value) => engine.setData(key, value);
+  const resetStep = () => engine.resetStep();
+  const restart = () => engine.restart();
+  const retry = () => engine.retry();
+  const suspend = () => engine.suspend();
+  const validate = () => engine.validate();
+  return {
+    snapshot,
+    start,
+    startSubPath,
+    next,
+    previous,
+    cancel,
+    goToStep,
+    goToStepChecked,
+    setData,
+    resetStep,
+    restart,
+    retry,
+    suspend,
+    validate
+  };
+}
+const PathContext = createContext(void 0);
+function usePathContext() {
+  const ctx = useContext(PathContext);
+  if (!ctx) {
+    throw new Error("usePathContext must be used within a PathShell component.");
+  }
+  return {
+    ...ctx.path,
+    services: ctx.services
+  };
 }
-export const PathShell = (props) => {
-    // Read outer PathShell context BEFORE providing our own.
-    const outerCtx = useContext(PathContext);
-    // When remounting under restoreKey, rebuild the inner engine from the state the
-    // previous instance exported, instead of starting the path and jumping to the
-    // step (which re-ran onEnter/onLeave and lost attempted / visited state).
-    const restoredEngine = (() => {
-        if (props.engine || !props.restoreKey || !outerCtx)
-            return null;
+const PathShell = (props) => {
+  const outerCtx = useContext(PathContext);
+  const restoredEngine = (() => {
+    if (props.engine || !props.restoreKey || !outerCtx) return null;
+    const stored = outerCtx.path.snapshot()?.data[props.restoreKey];
+    if (!stored || typeof stored !== "object" || !stored.serializedState) return null;
+    try {
+      return PathEngine.fromState(stored.serializedState, {
+        [props.path.id]: props.path
+      });
+    } catch {
+      return null;
+    }
+  })();
+  const ownEngine = restoredEngine ?? new PathEngine();
+  const currentEngine = () => props.engine ?? ownEngine;
+  const pathReturn = usePath({
+    engine: currentEngine,
+    onEvent(event) {
+      props.onEvent?.(event);
+      if (event.type === "completed") props.onComplete?.(event.data);
+      if (event.type === "cancelled") props.onCancel?.(event.data);
+      if (props.restoreKey && outerCtx && event.type === "stateChanged") {
+        void outerCtx.path.setData(props.restoreKey, {
+          ...event.snapshot,
+          serializedState: currentEngine().exportState()
+        });
+      }
+    }
+  });
+  const {
+    snapshot,
+    start,
+    next,
+    previous,
+    cancel,
+    goToStep,
+    goToStepChecked,
+    setData,
+    restart,
+    retry,
+    suspend,
+    validate
+  } = pathReturn;
+  onMount(() => {
+    if (props.autoStart !== false && !props.engine && !restoredEngine) {
+      let startData = props.initialData ?? {};
+      let restoreStepId;
+      if (props.restoreKey && outerCtx) {
         const stored = outerCtx.path.snapshot()?.data[props.restoreKey];
-        if (!stored || typeof stored !== "object" || !stored.serializedState)
-            return null;
-        try {
-            return PathEngine.fromState(stored.serializedState, { [props.path.id]: props.path });
-        }
-        catch {
-            return null; // unusable state (e.g. the path definition changed): start fresh below
+        if (stored != null && typeof stored === "object" && "stepId" in stored) {
+          startData = stored.data;
+          if (stored.stepIndex > 0) restoreStepId = stored.stepId;
         }
-    })();
-    // The shell's own engine is created once; an `engine` prop — present at
-    // mount or arriving later — always takes precedence and is adopted by usePath.
-    const ownEngine = restoredEngine ?? new PathEngine();
-    const currentEngine = () => props.engine ?? ownEngine;
-    const pathReturn = usePath({
-        engine: currentEngine,
-        onEvent(event) {
-            props.onEvent?.(event);
-            if (event.type === "completed")
-                props.onComplete?.(event.data);
-            if (event.type === "cancelled")
-                props.onCancel?.(event.data);
-            if (props.restoreKey && outerCtx && event.type === "stateChanged") {
-                void outerCtx.path.setData(props.restoreKey, {
-                    ...event.snapshot,
-                    serializedState: currentEngine().exportState(),
-                });
-            }
-        },
+      }
+      const p = start(props.path, startData);
+      if (restoreStepId) {
+        p.then(() => goToStep(restoreStepId));
+      }
+    }
+  });
+  createEffect(() => {
+    if (props.validateWhen) validate();
+  });
+  const contextValue = {
+    path: pathReturn,
+    services: props.services ?? null
+  };
+  const actions = {
+    next,
+    previous,
+    cancel,
+    goToStep,
+    goToStepChecked,
+    setData,
+    restart: () => restart(),
+    retry: () => retry(),
+    suspend: () => suspend()
+  };
+  const snap = () => snapshot();
+  const shellClass = () => {
+    const base = "pw-shell";
+    const layout = props.progressLayout;
+    const mod = layout && layout !== "merged" ? ` pw-shell--progress-${layout}` : "";
+    return props.class ? `${base}${mod} ${props.class}` : `${base}${mod}`;
+  };
+  const effectiveHideProgress = () => props.hideProgress || props.layout === "tabs";
+  const effectiveHideFooter = () => props.hideFooter || props.layout === "tabs";
+  const showRoot = () => !effectiveHideProgress() && !!snap().rootProgress && props.progressLayout !== "activeOnly";
+  const showActive = () => !effectiveHideProgress() && (props.renderHeader ? true : (snap().stepCount > 1 || snap().nestingLevel > 0) && props.progressLayout !== "rootOnly");
+  const stepLookupKey = createMemo(() => {
+    const s = snapshot();
+    if (!s) return null;
+    if (s.formId && props.steps?.[s.formId]) return s.formId;
+    return s.stepId;
+  });
+  const stepIdentity = createMemo(() => {
+    const s = snapshot();
+    return s ? `${s.nestingLevel}:${s.pathId}:${s.formId ?? s.stepId}` : null;
+  });
+  const liveSnapshot = new Proxy({}, {
+    get: (_target, key) => snapshot()?.[key],
+    has: (_target, key) => {
+      const s = snapshot();
+      return s ? key in s : false;
+    },
+    ownKeys: () => {
+      const s = snapshot();
+      return s ? Reflect.ownKeys(s) : [];
+    },
+    getOwnPropertyDescriptor: (_target, key) => {
+      const s = snapshot();
+      const d = s ? Object.getOwnPropertyDescriptor(s, key) : void 0;
+      return d ? {
+        ...d,
+        configurable: true
+      } : void 0;
+    }
+  });
+  const StepContent = () => {
+    const content = createMemo(() => {
+      if (stepIdentity() === null) return null;
+      const render = props.steps?.[untrack(stepLookupKey)];
+      return render ? untrack(() => render(liveSnapshot)) : null;
     });
-    const { snapshot, start, next, previous, cancel, goToStep, goToStepChecked, setData, restart, retry, suspend, validate, } = pathReturn;
-    onMount(() => {
-        if (props.autoStart !== false && !props.engine && !restoredEngine) {
-            let startData = props.initialData ?? {};
-            let restoreStepId;
-            if (props.restoreKey && outerCtx) {
-                const stored = outerCtx.path.snapshot()?.data[props.restoreKey];
-                if (stored != null && typeof stored === "object" && "stepId" in stored) {
-                    startData = stored.data;
-                    if (stored.stepIndex > 0)
-                        restoreStepId = stored.stepId;
+    return memo(content);
+  };
+  const showValidation = () => props.validationDisplay !== "inline" && (snap().hasAttemptedNext || snap().hasValidated) && Object.keys(snap().fieldErrors).length > 0;
+  const showWarnings = () => props.validationDisplay !== "inline" && Object.keys(snap().fieldWarnings).length > 0;
+  const showBlockingError = () => props.validationDisplay !== "inline" && (snap().hasAttemptedNext || snap().hasValidated) && !!snap().blockingError;
+  const resolvedFooterLayout = () => {
+    const fl = props.layout ?? "auto";
+    if (fl !== "auto" && fl !== "tabs") return fl;
+    return snap().stepCount === 1 && snap().nestingLevel === 0 ? "form" : "wizard";
+  };
+  return createComponent(PathContext.Provider, {
+    value: contextValue,
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return snapshot();
+        },
+        get fallback() {
+          return (() => {
+            var _el$13 = getNextElement(_tmpl$7), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$17 = _el$15.nextSibling, [_el$18, _co$5] = getNextMarker(_el$17.nextSibling);
+            insert(_el$14, createComponent(Show, {
+              get when() {
+                return props.autoStart === false;
+              },
+              get children() {
+                var _el$16 = getNextElement(_tmpl$6);
+                _el$16.$$click = () => start(props.path, props.initialData ?? {});
+                runHydrationEvents();
+                return _el$16;
+              }
+            }), _el$18, _co$5);
+            return _el$13;
+          })();
+        },
+        get children() {
+          var _el$ = getNextElement(_tmpl$5), _el$7 = _el$.firstChild, [_el$8, _co$] = getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$2] = getNextMarker(_el$9.nextSibling), _el$1 = _el$0.nextSibling, [_el$10, _co$3] = getNextMarker(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$4] = getNextMarker(_el$11.nextSibling);
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return showRoot();
+            },
+            get children() {
+              return createComponent(SolidRootProgress, {
+                get root() {
+                  return snap().rootProgress;
+                }
+              });
+            }
+          }), _el$8, _co$);
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return showActive();
+            },
+            get children() {
+              return memo(() => !!props.renderHeader)() ? props.renderHeader(snap()) : createComponent(SolidHeader, {
+                get snapshot() {
+                  return snap();
                 }
+              });
             }
-            const p = start(props.path, startData);
-            if (restoreStepId) {
-                p.then(() => goToStep(restoreStepId));
+          }), _el$0, _co$2);
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return snap().status === "completed";
+            },
+            get children() {
+              var _el$2 = getNextElement(_tmpl$);
+              insert(_el$2, (() => {
+                var _c$ = memo(() => !!props.completionContent);
+                return () => _c$() ? props.completionContent(snap()) : (() => {
+                  var _el$19 = getNextElement(_tmpl$8), _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling;
+                  _el$21.$$click = () => restart();
+                  runHydrationEvents();
+                  return _el$19;
+                })();
+              })());
+              return _el$2;
             }
+          }), _el$10, _co$3);
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return snap().status !== "completed";
+            },
+            get children() {
+              return [(() => {
+                var _el$3 = getNextElement(_tmpl$);
+                insert(_el$3, createComponent(StepContent, {}));
+                return _el$3;
+              })(), createComponent(Show, {
+                get when() {
+                  return showValidation();
+                },
+                get children() {
+                  var _el$4 = getNextElement(_tmpl$2);
+                  insert(_el$4, createComponent(For, {
+                    get each() {
+                      return Object.entries(snap().fieldErrors);
+                    },
+                    children: ([key, msg]) => (() => {
+                      var _el$22 = getNextElement(_tmpl$0), _el$24 = _el$22.firstChild, [_el$25, _co$6] = getNextMarker(_el$24.nextSibling), _el$26 = _el$25.nextSibling, [_el$27, _co$7] = getNextMarker(_el$26.nextSibling);
+                      insert(_el$22, createComponent(Show, {
+                        when: key !== "_",
+                        get children() {
+                          var _el$23 = getNextElement(_tmpl$9);
+                          insert(_el$23, () => formatFieldKey(key));
+                          return _el$23;
+                        }
+                      }), _el$25, _co$6);
+                      insert(_el$22, msg, _el$27, _co$7);
+                      return _el$22;
+                    })()
+                  }));
+                  return _el$4;
+                }
+              }), createComponent(Show, {
+                get when() {
+                  return showWarnings();
+                },
+                get children() {
+                  var _el$5 = getNextElement(_tmpl$3);
+                  insert(_el$5, createComponent(For, {
+                    get each() {
+                      return Object.entries(snap().fieldWarnings);
+                    },
+                    children: ([key, msg]) => (() => {
+                      var _el$28 = getNextElement(_tmpl$10), _el$30 = _el$28.firstChild, [_el$31, _co$8] = getNextMarker(_el$30.nextSibling), _el$32 = _el$31.nextSibling, [_el$33, _co$9] = getNextMarker(_el$32.nextSibling);
+                      insert(_el$28, createComponent(Show, {
+                        when: key !== "_",
+                        get children() {
+                          var _el$29 = getNextElement(_tmpl$1);
+                          insert(_el$29, () => formatFieldKey(key));
+                          return _el$29;
+                        }
+                      }), _el$31, _co$8);
+                      insert(_el$28, msg, _el$33, _co$9);
+                      return _el$28;
+                    })()
+                  }));
+                  return _el$5;
+                }
+              }), createComponent(Show, {
+                get when() {
+                  return showBlockingError();
+                },
+                get children() {
+                  var _el$6 = getNextElement(_tmpl$4);
+                  insert(_el$6, () => snap().blockingError);
+                  return _el$6;
+                }
+              }), createComponent(Show, {
+                get when() {
+                  return memo(() => snap().status === "error")() && snap().error;
+                },
+                get fallback() {
+                  return createComponent(Show, {
+                    get when() {
+                      return !effectiveHideFooter();
+                    },
+                    get children() {
+                      return memo(() => !!props.renderFooter)() ? props.renderFooter(snap(), actions) : createComponent(SolidFooter, {
+                        get snapshot() {
+                          return snap();
+                        },
+                        actions,
+                        get backLabel() {
+                          return props.backLabel ?? "Previous";
+                        },
+                        get nextLabel() {
+                          return props.nextLabel ?? "Next";
+                        },
+                        get completeLabel() {
+                          return props.completeLabel ?? "Complete";
+                        },
+                        get loadingLabel() {
+                          return props.loadingLabel;
+                        },
+                        get cancelLabel() {
+                          return props.cancelLabel ?? "Cancel";
+                        },
+                        get hideCancel() {
+                          return props.hideCancel ?? false;
+                        },
+                        get layout() {
+                          return resolvedFooterLayout();
+                        }
+                      });
+                    }
+                  });
+                },
+                get children() {
+                  return createComponent(SolidErrorPanel, {
+                    get snapshot() {
+                      return snap();
+                    },
+                    actions
+                  });
+                }
+              })];
+            }
+          }), _el$12, _co$4);
+          effect(() => className(_el$, shellClass()));
+          return _el$;
         }
-    });
-    createEffect(() => {
-        if (props.validateWhen)
-            validate();
-    });
-    const contextValue = { path: pathReturn, services: props.services ?? null };
-    const actions = {
-        next,
-        previous,
-        cancel,
-        goToStep,
-        goToStepChecked,
-        setData,
-        restart: () => restart(),
-        retry: () => retry(),
-        suspend: () => suspend(),
-    };
-    // Convenience — non-null snapshot, only valid inside <Show when={snapshot()}>
-    const snap = () => snapshot();
-    const shellClass = () => {
-        const base = "pw-shell";
-        const layout = props.progressLayout;
-        const mod = layout && layout !== "merged" ? ` pw-shell--progress-${layout}` : "";
-        return props.class ? `${base}${mod} ${props.class}` : `${base}${mod}`;
-    };
-    const effectiveHideProgress = () => props.hideProgress || props.layout === "tabs";
-    const effectiveHideFooter = () => props.hideFooter || props.layout === "tabs";
-    const showRoot = () => !effectiveHideProgress() && !!snap().rootProgress && props.progressLayout !== "activeOnly";
-    // A custom header is the consumer's decision: show it whenever progress is
-    // not hidden, even for a single-step path. Only the *default* header hides
-    // for one step (same rule as the React / Vue shells).
-    const showActive = () => !effectiveHideProgress() &&
-        (props.renderHeader
-            ? true
-            : (snap().stepCount > 1 || snap().nestingLevel > 0) && props.progressLayout !== "rootOnly");
-    // The step render function must only run when the *step* changes. The
-    // snapshot signal is `{ equals: false }` (a new object on every engine
-    // event), so reading it in a tracked render position would tear the step
-    // component down and re-create it on every setData — losing the input's
-    // DOM node and focus on each keystroke. Key the rendered content on the
-    // step's identity and create it untracked; live state reaches the step
-    // through the reactive snapshot proxy below or `usePathContext()`.
-    // Which key of `props.steps` renders the current step: the StepChoice's
-    // inner step id (`formId`) when content is registered under it, otherwise
-    // the slot's own id — the same fallback the React / Vue / Svelte shells use.
-    const stepLookupKey = createMemo(() => {
-        const s = snapshot();
-        if (!s)
-            return null;
-        if (s.formId && props.steps?.[s.formId])
-            return s.formId;
-        return s.stepId;
-    });
-    const stepIdentity = createMemo(() => {
-        const s = snapshot();
-        return s ? `${s.nestingLevel}:${s.pathId}:${s.formId ?? s.stepId}` : null;
-    });
-    // A snapshot whose property reads go through the signal, so a step that
-    // received it as a prop (`(snap) => <Step snapshot={snap} />`) sees the
-    // current values reactively even though the step itself is created once.
-    const liveSnapshot = new Proxy({}, {
-        get: (_target, key) => snapshot()?.[key],
-        has: (_target, key) => {
-            const s = snapshot();
-            return s ? key in s : false;
-        },
-        ownKeys: () => {
-            const s = snapshot();
-            return s ? Reflect.ownKeys(s) : [];
-        },
-        getOwnPropertyDescriptor: (_target, key) => {
-            const s = snapshot();
-            const d = s ? Object.getOwnPropertyDescriptor(s, key) : undefined;
-            return d ? { ...d, configurable: true } : undefined;
-        },
-    });
-    // Rendered inside <PathContext.Provider>, so the memo (and the step it
-    // creates) is owned by the provider and `usePathContext()` resolves.
-    const StepContent = () => {
-        const content = createMemo(() => {
-            if (stepIdentity() === null)
-                return null;
-            const render = props.steps?.[untrack(stepLookupKey)];
-            return render ? untrack(() => render(liveSnapshot)) : null;
-        });
-        return _jsx(_Fragment, { children: content() });
-    };
-    const showValidation = () => props.validationDisplay !== "inline" &&
-        (snap().hasAttemptedNext || snap().hasValidated) &&
-        Object.keys(snap().fieldErrors).length > 0;
-    const showWarnings = () => props.validationDisplay !== "inline" && Object.keys(snap().fieldWarnings).length > 0;
-    const showBlockingError = () => props.validationDisplay !== "inline" &&
-        (snap().hasAttemptedNext || snap().hasValidated) &&
-        !!snap().blockingError;
-    const resolvedFooterLayout = () => {
-        const fl = props.layout ?? "auto";
-        if (fl !== "auto" && fl !== "tabs")
-            return fl;
-        return snap().stepCount === 1 && snap().nestingLevel === 0 ? "form" : "wizard";
-    };
-    return (_jsx(PathContext.Provider, { value: contextValue, children: _jsx(Show, { when: snapshot(), fallback: _jsx("div", { class: "pw-shell", children: _jsxs("div", { class: "pw-shell__empty", children: [_jsx("p", { children: "No active path." }), _jsx(Show, { when: props.autoStart === false, children: _jsx("button", { type: "button", class: "pw-shell__start-btn", onClick: () => start(props.path, props.initialData ?? {}), children: "Start" }) })] }) }), children: _jsxs("div", { class: shellClass(), children: [_jsx(Show, { when: showRoot(), children: _jsx(SolidRootProgress, { root: snap().rootProgress }) }), _jsx(Show, { when: showActive(), children: props.renderHeader ? props.renderHeader(snap()) : _jsx(SolidHeader, { snapshot: snap() }) }), _jsx(Show, { when: snap().status === "completed", children: _jsx("div", { class: "pw-shell__body", children: props.completionContent ? (props.completionContent(snap())) : (_jsxs("div", { class: "pw-shell__completion", children: [_jsx("p", { class: "pw-shell__completion-message", children: "All done." }), _jsx("button", { type: "button", class: "pw-shell__completion-restart", onClick: () => restart(), children: "Start over" })] })) }) }), _jsxs(Show, { when: snap().status !== "completed", children: [_jsx("div", { class: "pw-shell__body", children: _jsx(StepContent, {}) }), _jsx(Show, { when: showValidation(), children: _jsx("ul", { class: "pw-shell__validation", children: _jsx(For, { each: Object.entries(snap().fieldErrors), children: ([key, msg]) => (_jsxs("li", { class: "pw-shell__validation-item", children: [_jsx(Show, { when: key !== "_", children: _jsx("span", { class: "pw-shell__validation-label", children: formatFieldKey(key) }) }), msg] })) }) }) }), _jsx(Show, { when: showWarnings(), children: _jsx("ul", { class: "pw-shell__warnings", children: _jsx(For, { each: Object.entries(snap().fieldWarnings), children: ([key, msg]) => (_jsxs("li", { class: "pw-shell__warnings-item", children: [_jsx(Show, { when: key !== "_", children: _jsx("span", { class: "pw-shell__warnings-label", children: formatFieldKey(key) }) }), msg] })) }) }) }), _jsx(Show, { when: showBlockingError(), children: _jsx("p", { class: "pw-shell__blocking-error", children: snap().blockingError }) }), _jsx(Show, { when: snap().status === "error" && snap().error, fallback: _jsx(Show, { when: !effectiveHideFooter(), children: props.renderFooter ? (props.renderFooter(snap(), actions)) : (_jsx(SolidFooter, { snapshot: snap(), actions: actions, backLabel: props.backLabel ?? "Previous", nextLabel: props.nextLabel ?? "Next", completeLabel: props.completeLabel ?? "Complete", loadingLabel: props.loadingLabel, cancelLabel: props.cancelLabel ?? "Cancel", hideCancel: props.hideCancel ?? false, layout: resolvedFooterLayout() })) }), children: _jsx(SolidErrorPanel, { snapshot: snap(), actions: actions }) })] })] }) }) }));
+      });
+    }
+  });
 };
-// ---------------------------------------------------------------------------
-// Root progress
-// ---------------------------------------------------------------------------
 function SolidRootProgress(props) {
-    return (_jsxs("div", { class: "pw-shell__root-progress", children: [_jsx("div", { class: "pw-shell__steps", children: _jsx(For, { each: props.root.steps, children: (step, i) => (_jsxs("div", { class: `pw-shell__step pw-shell__step--${step.status}`, children: [_jsx("span", { class: "pw-shell__step-dot", children: step.status === "completed" ? "✓" : String(i() + 1) }), _jsx("span", { class: "pw-shell__step-label", children: step.title ?? step.id })] })) }) }), _jsx("div", { class: "pw-shell__track", children: _jsx("div", { class: "pw-shell__track-fill", style: { width: `${props.root.progress * 100}%` } }) })] }));
+  return (() => {
+    var _el$34 = getNextElement(_tmpl$11), _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$36.firstChild;
+    insert(_el$35, createComponent(For, {
+      get each() {
+        return props.root.steps;
+      },
+      children: (step, i) => (() => {
+        var _el$38 = getNextElement(_tmpl$12), _el$39 = _el$38.firstChild, _el$40 = _el$39.nextSibling;
+        insert(_el$39, (() => {
+          var _c$2 = memo(() => step.status === "completed");
+          return () => _c$2() ? "✓" : String(i() + 1);
+        })());
+        insert(_el$40, () => step.title ?? step.id);
+        effect(() => className(_el$38, `pw-shell__step pw-shell__step--${step.status}`));
+        return _el$38;
+      })()
+    }));
+    effect((_$p) => setStyleProperty(_el$37, "width", `${props.root.progress * 100}%`));
+    return _el$34;
+  })();
 }
-// ---------------------------------------------------------------------------
-// Default header (progress indicator)
-// ---------------------------------------------------------------------------
 function SolidHeader(props) {
-    return (_jsxs("div", { class: "pw-shell__header", children: [_jsx("div", { class: "pw-shell__steps", children: _jsx(For, { each: props.snapshot.steps, children: (step, i) => (_jsxs("div", { class: `pw-shell__step pw-shell__step--${step.status}`, children: [_jsx("span", { class: "pw-shell__step-dot", children: step.status === "completed" ? "✓" : String(i() + 1) }), _jsx("span", { class: "pw-shell__step-label", children: step.title ?? step.id })] })) }) }), _jsx("div", { class: "pw-shell__track", children: _jsx("div", { class: "pw-shell__track-fill", style: { width: `${props.snapshot.progress * 100}%` } }) })] }));
+  return (() => {
+    var _el$41 = getNextElement(_tmpl$13), _el$42 = _el$41.firstChild, _el$43 = _el$42.nextSibling, _el$44 = _el$43.firstChild;
+    insert(_el$42, createComponent(For, {
+      get each() {
+        return props.snapshot.steps;
+      },
+      children: (step, i) => (() => {
+        var _el$45 = getNextElement(_tmpl$12), _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling;
+        insert(_el$46, (() => {
+          var _c$3 = memo(() => step.status === "completed");
+          return () => _c$3() ? "✓" : String(i() + 1);
+        })());
+        insert(_el$47, () => step.title ?? step.id);
+        effect(() => className(_el$45, `pw-shell__step pw-shell__step--${step.status}`));
+        return _el$45;
+      })()
+    }));
+    effect((_$p) => setStyleProperty(_el$44, "width", `${props.snapshot.progress * 100}%`));
+    return _el$41;
+  })();
 }
-// ---------------------------------------------------------------------------
-// Error panel
-// ---------------------------------------------------------------------------
 function SolidErrorPanel(props) {
-    const error = () => props.snapshot.error;
-    const escalated = () => error().retryCount >= 2;
-    const title = () => (escalated() ? "Still having trouble." : "Something went wrong.");
-    const phaseMsg = () => errorPhaseMessage(error().phase);
-    return (_jsxs("div", { class: "pw-shell__error", children: [_jsx("div", { class: "pw-shell__error-title", children: title() }), _jsxs("div", { class: "pw-shell__error-message", children: [phaseMsg(), error().message ? ` ${error().message}` : ""] }), _jsxs("div", { class: "pw-shell__error-actions", children: [_jsx(Show, { when: !escalated(), children: _jsx("button", { type: "button", class: "pw-shell__btn pw-shell__btn--retry", onClick: props.actions.retry, children: "Try again" }) }), _jsx(Show, { when: props.snapshot.hasPersistence, children: _jsx("button", { type: "button", class: `pw-shell__btn ${escalated() ? "pw-shell__btn--retry" : "pw-shell__btn--suspend"}`, onClick: props.actions.suspend, children: "Save and come back later" }) }), _jsx(Show, { when: escalated() && !props.snapshot.hasPersistence, children: _jsx("button", { type: "button", class: "pw-shell__btn pw-shell__btn--retry", onClick: props.actions.retry, children: "Try again" }) })] })] }));
+  const error = () => props.snapshot.error;
+  const escalated = () => error().retryCount >= 2;
+  const title = () => escalated() ? "Still having trouble." : "Something went wrong.";
+  const phaseMsg = () => errorPhaseMessage(error().phase);
+  return (() => {
+    var _el$48 = getNextElement(_tmpl$16), _el$49 = _el$48.firstChild, _el$50 = _el$49.nextSibling, _el$51 = _el$50.firstChild, [_el$52, _co$0] = getNextMarker(_el$51.nextSibling), _el$53 = _el$52.nextSibling, [_el$54, _co$1] = getNextMarker(_el$53.nextSibling), _el$55 = _el$50.nextSibling, _el$59 = _el$55.firstChild, [_el$60, _co$10] = getNextMarker(_el$59.nextSibling), _el$61 = _el$60.nextSibling, [_el$62, _co$11] = getNextMarker(_el$61.nextSibling), _el$63 = _el$62.nextSibling, [_el$64, _co$12] = getNextMarker(_el$63.nextSibling);
+    insert(_el$49, title);
+    insert(_el$50, phaseMsg, _el$52, _co$0);
+    insert(_el$50, (() => {
+      var _c$4 = memo(() => !!error().message);
+      return () => _c$4() ? ` ${error().message}` : "";
+    })(), _el$54, _co$1);
+    insert(_el$55, createComponent(Show, {
+      get when() {
+        return !escalated();
+      },
+      get children() {
+        var _el$56 = getNextElement(_tmpl$14);
+        addEventListener(_el$56, "click", props.actions.retry, true);
+        runHydrationEvents();
+        return _el$56;
+      }
+    }), _el$60, _co$10);
+    insert(_el$55, createComponent(Show, {
+      get when() {
+        return props.snapshot.hasPersistence;
+      },
+      get children() {
+        var _el$57 = getNextElement(_tmpl$15);
+        addEventListener(_el$57, "click", props.actions.suspend, true);
+        effect(() => className(_el$57, `pw-shell__btn ${escalated() ? "pw-shell__btn--retry" : "pw-shell__btn--suspend"}`));
+        runHydrationEvents();
+        return _el$57;
+      }
+    }), _el$62, _co$11);
+    insert(_el$55, createComponent(Show, {
+      get when() {
+        return memo(() => !!escalated())() && !props.snapshot.hasPersistence;
+      },
+      get children() {
+        var _el$58 = getNextElement(_tmpl$14);
+        addEventListener(_el$58, "click", props.actions.retry, true);
+        runHydrationEvents();
+        return _el$58;
+      }
+    }), _el$64, _co$12);
+    return _el$48;
+  })();
 }
-// ---------------------------------------------------------------------------
-// Default footer (navigation buttons)
-// ---------------------------------------------------------------------------
 function SolidFooter(props) {
-    const isFormMode = () => props.layout === "form";
-    const isLoading = () => props.snapshot.status !== "idle";
-    const submitLabel = () => isLoading() && props.loadingLabel
-        ? props.loadingLabel
-        : props.snapshot.isLastStep
-            ? props.completeLabel
-            : props.nextLabel;
-    return (_jsxs("div", { class: "pw-shell__footer", children: [_jsxs("div", { class: "pw-shell__footer-left", children: [_jsx(Show, { when: isFormMode() && !props.hideCancel, children: _jsx("button", { type: "button", class: "pw-shell__btn pw-shell__btn--cancel", disabled: isLoading(), onClick: props.actions.cancel, children: props.cancelLabel }) }), _jsx(Show, { when: !isFormMode() && !props.snapshot.isFirstStep, children: _jsx("button", { type: "button", class: "pw-shell__btn pw-shell__btn--back", disabled: isLoading() || !props.snapshot.canMovePrevious, onClick: props.actions.previous, children: props.backLabel }) })] }), _jsxs("div", { class: "pw-shell__footer-right", children: [_jsx(Show, { when: !isFormMode() && !props.hideCancel, children: _jsx("button", { type: "button", class: "pw-shell__btn pw-shell__btn--cancel", disabled: isLoading(), onClick: props.actions.cancel, children: props.cancelLabel }) }), _jsx("button", { type: "button", class: `pw-shell__btn pw-shell__btn--next${isLoading() ? " pw-shell__btn--loading" : ""}`, disabled: isLoading(), onClick: props.actions.next, children: submitLabel() })] })] }));
+  const isFormMode = () => props.layout === "form";
+  const isLoading = () => props.snapshot.status !== "idle";
+  const submitLabel = () => isLoading() && props.loadingLabel ? props.loadingLabel : props.snapshot.isLastStep ? props.completeLabel : props.nextLabel;
+  return (() => {
+    var _el$65 = getNextElement(_tmpl$19), _el$66 = _el$65.firstChild, _el$69 = _el$66.firstChild, [_el$70, _co$13] = getNextMarker(_el$69.nextSibling), _el$71 = _el$70.nextSibling, [_el$72, _co$14] = getNextMarker(_el$71.nextSibling), _el$73 = _el$66.nextSibling, _el$76 = _el$73.firstChild, [_el$77, _co$15] = getNextMarker(_el$76.nextSibling), _el$75 = _el$77.nextSibling;
+    insert(_el$66, createComponent(Show, {
+      get when() {
+        return memo(() => !!isFormMode())() && !props.hideCancel;
+      },
+      get children() {
+        var _el$67 = getNextElement(_tmpl$17);
+        addEventListener(_el$67, "click", props.actions.cancel, true);
+        insert(_el$67, () => props.cancelLabel);
+        effect(() => setProperty(_el$67, "disabled", isLoading()));
+        runHydrationEvents();
+        return _el$67;
+      }
+    }), _el$70, _co$13);
+    insert(_el$66, createComponent(Show, {
+      get when() {
+        return memo(() => !!!isFormMode())() && !props.snapshot.isFirstStep;
+      },
+      get children() {
+        var _el$68 = getNextElement(_tmpl$18);
+        addEventListener(_el$68, "click", props.actions.previous, true);
+        insert(_el$68, () => props.backLabel);
+        effect(() => setProperty(_el$68, "disabled", isLoading() || !props.snapshot.canMovePrevious));
+        runHydrationEvents();
+        return _el$68;
+      }
+    }), _el$72, _co$14);
+    insert(_el$73, createComponent(Show, {
+      get when() {
+        return memo(() => !!!isFormMode())() && !props.hideCancel;
+      },
+      get children() {
+        var _el$74 = getNextElement(_tmpl$17);
+        addEventListener(_el$74, "click", props.actions.cancel, true);
+        insert(_el$74, () => props.cancelLabel);
+        effect(() => setProperty(_el$74, "disabled", isLoading()));
+        runHydrationEvents();
+        return _el$74;
+      }
+    }), _el$77, _co$15);
+    addEventListener(_el$75, "click", props.actions.next, true);
+    insert(_el$75, submitLabel);
+    effect((_p$) => {
+      var _v$ = `pw-shell__btn pw-shell__btn--next${isLoading() ? " pw-shell__btn--loading" : ""}`, _v$2 = isLoading();
+      _v$ !== _p$.e && className(_el$75, _p$.e = _v$);
+      _v$2 !== _p$.t && setProperty(_el$75, "disabled", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    runHydrationEvents();
+    return _el$65;
+  })();
 }
-export { PathEngine } from "@daltonr/pathwrite-core";
-//# sourceMappingURL=index.js.map
+delegateEvents(["click"]);
+export {
+  PathEngine2 as PathEngine,
+  PathShell,
+  usePath,
+  usePathContext
+};
+//# sourceMappingURL=index.js.map