@daltonr/pathwrite-svelte 0.13.0 → 0.14.0

package/dist/index.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { PathData, PathDefinition, PathEngine, PathEvent, PathSnapshot } from "@daltonr/pathwrite-core";
 export { formatFieldKey, errorPhaseMessage } from "@daltonr/pathwrite-core";
-export type { PathData, FieldErrors, PathDefinition, PathEngine, PathEvent, PathSnapshot, PathStep, PathStepContext, ProgressLayout, RootProgress, SerializedPathState } from "@daltonr/pathwrite-core";
-export interface UsePathOptions {
+export type { PathData, FieldErrors, PathDefinition, PathEngine, PathEvent, PathSnapshot, StepStatus, PathStep, PathStepContext, ProgressLayout, RootProgress, SerializedPathState, } from "@daltonr/pathwrite-core";
+export interface UsePathOptions<TData extends PathData = PathData> {
     /**
      * An externally-managed `PathEngine` to subscribe to — for example, the engine
      * returned by `restoreOrStart()` from `@daltonr/pathwrite-store`.
@@ -18,22 +18,22 @@ export interface UsePathOptions {
      * later (e.g. from an async `restoreOrStart()`) or is swapped is adopted —
      * the hook re-subscribes and re-seeds its snapshot from the new engine.
      */
-    engine?: PathEngine;
+    engine?: PathEngine<TData>;
     /** Called for every engine event (stateChanged, completed, cancelled, resumed). */
-    onEvent?: (event: PathEvent) => void;
+    onEvent?: (event: PathEvent<TData>) => void;
 }
 export interface UsePathReturn<TData extends PathData = PathData> {
     /**
-     * Current path snapshot, or `null` when no path is active. Reactive via `$state`.
+     * Current path snapshot, or `null` when no path is active. Reactive via `$state.raw`.
      *
      * ⚠️ **Do not destructure.** `const { snapshot } = usePath()` captures the value
      * once and loses reactivity. Always access as `path.snapshot`.
      */
     readonly snapshot: PathSnapshot<TData> | null;
     /** Start (or restart) a path. */
-    start: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
-    /** Push a sub-path onto the stack. Requires an active path. Pass an optional `meta` object for correlation — it is returned unchanged to the parent step's `onSubPathComplete` / `onSubPathCancel` hooks. */
-    startSubPath: (path: PathDefinition<any>, initialData?: PathData, meta?: Record<string, unknown>) => Promise<void>;
+    start: (path: PathDefinition<TData>, initialData?: Partial<TData>) => Promise<void>;
+    /** Push a sub-path onto the stack. Requires an active path. A sub-path has its own data, so any definition is accepted. Pass an optional `meta` object for correlation — it is returned unchanged to the parent step's `onSubPathComplete` / `onSubPathCancel` hooks. */
+    startSubPath: (path: PathDefinition, initialData?: PathData, meta?: Record<string, unknown>) => Promise<void>;
     /** Advance one step. Completes the path on the last step. */
     next: () => Promise<void>;
     /** Go back one step. No-op when already on the first step of a top-level path. Pops back to the parent path when on the first step of a sub-path. */
@@ -120,7 +120,7 @@ export interface UsePathReturn<TData extends PathData = PathData> {
  * {/if}
  * ```
  */
-export declare function usePath<TData extends PathData = PathData>(options?: UsePathOptions): UsePathReturn<TData>;
+export declare function usePath<TData extends PathData = PathData>(options?: UsePathOptions<TData>): UsePathReturn<TData>;
 /**
  * Navigation actions handed to a custom `footer` snippet of `<PathShell>`
  * (`{#snippet footer(snap, actions)}`). Same shape as the other adapters'
@@ -211,9 +211,9 @@ export declare function bindData<TData extends PathData, K extends string & keyo
 };
 /**
  * Converts a hyphenated step ID to camelCase.
- * Used internally by PathShell to resolve step snippets when a step ID contains
- * hyphens (e.g. "cover-letter" → "coverLetter"), since Svelte prop names must
- * be valid JavaScript identifiers.
+ * Used internally by PathShell as a fallback key into its `steps` record, so a
+ * hyphenated step ID (e.g. "cover-letter") also resolves an entry registered
+ * under its camelCase form ("coverLetter").
  */
 export declare function stepIdToCamelCase(id: string): string;
 export { default as PathShell } from "./PathShell.svelte";

package/dist/index.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.svelte.d.ts","sourceRoot":"","sources":["../src/index.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.svelte.d.ts","sourceRoot":"","sources":["../src/index.svelte.ts"],"names":[],"mappings":"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"}

package/dist/index.svelte.js

@@ -63,7 +63,11 @@ export function usePath(options) {
     let ownEngine = null;
     const resolveEngine = () => options?.engine ?? (ownEngine ??= new PathEngineClass());
     let engine = resolveEngine();
-    let _snapshot = $state(engine.snapshot());
+    // `$state.raw`, not `$state`: snapshots are immutable values the engine
+    // replaces wholesale on every change and nothing mutates them in place, so a
+    // deep proxy over each one (and its `data`) would be pure overhead. Every
+    // update below reassigns the whole value, which is what `$state.raw` tracks.
+    let _snapshot = $state.raw(engine.snapshot());
     const onEngineEvent = (event) => {
         if (event.type === "stateChanged" || event.type === "resumed") {
             _snapshot = event.snapshot;
@@ -89,7 +93,10 @@ export function usePath(options) {
         });
     });
     // Auto-cleanup when component is destroyed
-    onDestroy(() => { unsubscribe(); stopWatching(); });
+    onDestroy(() => {
+        unsubscribe();
+        stopWatching();
+    });
     const start = (path, initialData = {}) => engine.start(path, initialData);
     const startSubPath = (path, initialData = {}, meta) => engine.startSubPath(path, initialData, meta);
     const next = () => engine.next();
@@ -97,14 +104,16 @@ export function usePath(options) {
     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 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 {
-        get snapshot() { return _snapshot; },
+        get snapshot() {
+            return _snapshot;
+        },
         start,
         startSubPath,
         next,
@@ -117,7 +126,7 @@ export function usePath(options) {
         restart,
         retry,
         suspend,
-        validate
+        validate,
     };
 }
 // ---------------------------------------------------------------------------
@@ -198,14 +207,14 @@ export function bindData(getSnapshot, setData, key) {
         },
         set(value) {
             setData(key, value);
-        }
+        },
     };
 }
 /**
  * Converts a hyphenated step ID to camelCase.
- * Used internally by PathShell to resolve step snippets when a step ID contains
- * hyphens (e.g. "cover-letter" → "coverLetter"), since Svelte prop names must
- * be valid JavaScript identifiers.
+ * Used internally by PathShell as a fallback key into its `steps` record, so a
+ * hyphenated step ID (e.g. "cover-letter") also resolves an entry registered
+ * under its camelCase form ("coverLetter").
  */
 export function stepIdToCamelCase(id) {
     return id.replace(/-([a-z])/g, (_, c) => c.toUpperCase());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daltonr/pathwrite-svelte",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "type": "module",
   "license": "MIT",
   "description": "Svelte 5 adapter for @daltonr/pathwrite-core — runes-based reactive bindings and optional PathShell component.",
@@ -48,13 +48,13 @@
     "check": "svelte-check --tsconfig ./tsconfig.check.json --fail-on-warnings",
     "build": "npm run check && svelte-package -i src -o dist && cp ../shell.css dist/index.css",
     "clean": "rm -rf dist tsconfig.tsbuildinfo",
-    "prepublishOnly": "test -d dist && echo 'dist already built, skipping' || (npm run clean && npm run build)"
+    "prepublishOnly": "npm run clean && npm run build"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"
   },
   "dependencies": {
-    "@daltonr/pathwrite-core": "^0.13.0"
+    "@daltonr/pathwrite-core": "^0.14.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",

package/src/PathShell.svelte

@@ -1,14 +1,28 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { usePath, setPathContext, getPathContextOrNull, formatFieldKey, errorPhaseMessage, stepIdToCamelCase } from './index.svelte.js';
-  import type { PathDefinition, PathData, PathEngine, PathSnapshot, ProgressLayout, PathShellActions } from './index.svelte.js';
-  import { PathEngine as PathEngineClass } from '@daltonr/pathwrite-core';
-  import type { SerializedPathState } from '@daltonr/pathwrite-core';
-  import type { Snippet, Component } from 'svelte';
-
+  import { onMount } from "svelte";
+  import {
+    usePath,
+    setPathContext,
+    getPathContextOrNull,
+    formatFieldKey,
+    errorPhaseMessage,
+    stepIdToCamelCase,
+  } from "./index.svelte.js";
+  import type {
+    PathDefinition,
+    PathData,
+    PathEngine,
+    PathEvent,
+    PathSnapshot,
+    ProgressLayout,
+    PathShellActions,
+  } from "./index.svelte.js";
+  import { PathEngine as PathEngineClass } from "@daltonr/pathwrite-core";
+  import type { SerializedPathState } from "@daltonr/pathwrite-core";
+  import type { Snippet, Component } from "svelte";
 
   interface Props {
-    path?: PathDefinition<any>;
+    path?: PathDefinition;
     engine?: PathEngine;
     initialData?: PathData;
     /**
@@ -57,17 +71,23 @@
      * Step components access it via `usePathContext<TData, TServices>()`.
      */
     services?: unknown;
+    /**
+     * Step components keyed by step id. The shell renders the entry for the
+     * active step (`snapshot.formId` first, for the inner step of a StepChoice,
+     * then `snapshot.stepId`) with no props — step components read the path
+     * through `usePathContext()`. Hyphenated ids may be given as-is
+     * (`"cover-letter"`) or in camelCase (`coverLetter`).
+     */
+    steps?: Record<string, Component>;
     // Callback props replace event dispatching in Svelte 5
     oncomplete?: (data: PathData) => void;
     oncancel?: (data: PathData) => void;
-    onevent?: (event: any) => void;
+    onevent?: (event: PathEvent) => void;
     // Optional override snippets for header and footer
-    header?: Snippet<[PathSnapshot<any>]>;
-    footer?: Snippet<[PathSnapshot<any>, PathShellActions]>;
+    header?: Snippet<[PathSnapshot]>;
+    footer?: Snippet<[PathSnapshot, PathShellActions]>;
     /** Snippet rendered when `snapshot.status === "completed"`. Defaults to a simple "All done." panel with a restart button. */
-    completion?: Snippet<[PathSnapshot<any>]>;
-    // All other props treated as step components keyed by step ID
-    [key: string]: Component<any> | any;
+    completion?: Snippet<[PathSnapshot]>;
   }
 
   let {
@@ -76,26 +96,29 @@
     initialData = {},
     restoreKey = undefined,
     autoStart = true,
-    backLabel = 'Previous',
-    nextLabel = 'Next',
-    completeLabel = 'Complete',
+    backLabel = "Previous",
+    nextLabel = "Next",
+    completeLabel = "Complete",
     loadingLabel = undefined,
-    cancelLabel = 'Cancel',
+    cancelLabel = "Cancel",
     hideCancel = false,
     hideProgress = false,
     hideFooter = false,
     validateWhen = false,
-    layout = 'auto',
-    validationDisplay = 'summary',
-    progressLayout = 'merged',
+    layout = "auto",
+    validationDisplay = "summary",
+    progressLayout = "merged",
     services = null,
+    steps = {},
     oncomplete,
     oncancel,
     onevent,
     header,
     footer,
     completion,
-    ...stepSnippets
+    // Not part of `Props` (which has no index signature, so a stray prop is a
+    // type error): kept only for the runtime camelCase-callback warning below.
+    ...rest
   }: Props = $props();
 
   // Read outer PathShell context BEFORE setting our own — gives access to
@@ -108,8 +131,9 @@
   // svelte-ignore state_referenced_locally — read once at init on purpose: restore happens at mount only
   const restoredEngine: PathEngine | null = (() => {
     if (engineProp || !restoreKey || !outerCtx || !path) return null;
-    const stored = outerCtx.snapshot?.data[restoreKey] as { serializedState?: SerializedPathState } | undefined;
-    if (!stored || typeof stored !== 'object' || !stored.serializedState) return null;
+    const stored = outerCtx.snapshot?.data[restoreKey] as
+      { serializedState?: SerializedPathState } | undefined;
+    if (!stored || typeof stored !== "object" || !stored.serializedState) return null;
     try {
       return PathEngineClass.fromState(stored.serializedState, { [path.id]: path });
     } catch {
@@ -123,24 +147,43 @@
 
   // Initialize path engine
   const pathReturn = usePath({
-    get engine() { return currentEngine(); },
+    get engine() {
+      return currentEngine();
+    },
     onEvent: (event) => {
       onevent?.(event);
-      if (event.type === 'completed') oncomplete?.(event.data);
-      if (event.type === 'cancelled') oncancel?.(event.data);
-      if (restoreKey && outerCtx && event.type === 'stateChanged') {
-        (outerCtx.setData as unknown as (key: string, value: unknown) => Promise<void>)(
-          restoreKey, { ...event.snapshot, serializedState: currentEngine().exportState() }
-        );
+      if (event.type === "completed") oncomplete?.(event.data);
+      if (event.type === "cancelled") oncancel?.(event.data);
+      if (restoreKey && outerCtx && event.type === "stateChanged") {
+        void outerCtx.setData(restoreKey, {
+          ...event.snapshot,
+          serializedState: currentEngine().exportState(),
+        });
       }
-    }
+    },
   });
 
-  const { start, startSubPath, next, previous, cancel, goToStep, goToStepChecked, setData, resetStep, restart: restartFn, retry, suspend, validate } = pathReturn;
+  const {
+    start,
+    startSubPath,
+    next,
+    previous,
+    cancel,
+    goToStep,
+    goToStepChecked,
+    setData,
+    resetStep,
+    restart: restartFn,
+    retry,
+    suspend,
+    validate,
+  } = pathReturn;
 
   // Provide context for child step components
   setPathContext({
-    get snapshot() { return pathReturn.snapshot; },
+    get snapshot() {
+      return pathReturn.snapshot;
+    },
     start,
     startSubPath,
     validate,
@@ -154,21 +197,25 @@
     restart: () => restartFn(),
     retry,
     suspend,
-    get services() { return services; },
+    get services() {
+      return services;
+    },
   });
 
   // Dev-mode warning: camelCase callback props are silently ignored in Svelte.
   // Warn if the user passed onComplete/onCancel/onEvent instead of the correct
-  // lowercase forms oncomplete/oncancel/onevent. Runs once, on mount (a closure
-  // — reading the props at the top level would only capture their initial value).
+  // lowercase forms oncomplete/oncancel/onevent (a type error in TypeScript,
+  // but plain JavaScript callers get no such hint). Runs once, on mount (a
+  // closure — reading the props at the top level would only capture their
+  // initial value).
   // `import.meta.env` is a bundler convention (Vite); the cast keeps this
   // package free of Vite's ambient types.
   const isDev = (import.meta as { env?: { DEV?: boolean } }).env?.DEV !== false;
   onMount(() => {
     if (!isDev) return;
-    const camelCallbacks = ['onComplete', 'onCancel', 'onEvent'] as const;
+    const camelCallbacks = ["onComplete", "onCancel", "onEvent"] as const;
     for (const name of camelCallbacks) {
-      if (name in stepSnippets) {
+      if (name in rest) {
         console.warn(
           `[PathShell] "${name}" was passed but will be ignored. Svelte uses lowercase callback props — use "${name.toLowerCase()}" instead.`
         );
@@ -185,8 +232,8 @@
       let startData: PathData = initialData ?? {};
       let restoreStepId: string | undefined;
       if (restoreKey && outerCtx) {
-        const stored = outerCtx.snapshot?.data[restoreKey] as PathSnapshot<any> | undefined;
-        if (stored != null && typeof stored === 'object' && 'stepId' in stored) {
+        const stored = outerCtx.snapshot?.data[restoreKey] as PathSnapshot | undefined;
+        if (stored != null && typeof stored === "object" && "stepId" in stored) {
           startData = stored.data as PathData;
           if (stored.stepIndex > 0) restoreStepId = stored.stepId as string;
         }
@@ -204,27 +251,38 @@
 
   function warnMissingStep(stepId: string): void {
     const camel = stepIdToCamelCase(stepId);
-    const hint = camel !== stepId
-      ? ` No snippet found for "${stepId}" or its camelCase form "${camel}". If your step ID contains hyphens, pass the snippet as a camelCase prop: ${camel}={YourComponent}.`
-      : ` No snippet found for "${stepId}".`;
+    const hint =
+      camel !== stepId
+        ? ` No step component found for "${stepId}" or its camelCase form "${camel}". Pass it in the \`steps\` record under either key.`
+        : ` No step component found for "${stepId}". Pass it in the \`steps\` record.`;
     console.warn(`[PathShell]${hint}`);
   }
 
   let snap = $derived(pathReturn.snapshot);
   let actions: PathShellActions = $derived({
-    next, previous, cancel, goToStep, goToStepChecked,
-    setData: (key, value) => setData(key as never, value as never),
-    restart: () => restartFn(), retry, suspend
+    next,
+    previous,
+    cancel,
+    goToStep,
+    goToStepChecked,
+    setData,
+    restart: () => restartFn(),
+    retry,
+    suspend,
   });
 
-  let effectiveHideProgress = $derived(hideProgress || layout === 'tabs');
-  let effectiveHideFooter = $derived(hideFooter || layout === 'tabs');
+  let effectiveHideProgress = $derived(hideProgress || layout === "tabs");
+  let effectiveHideFooter = $derived(hideFooter || layout === "tabs");
 
   // Auto-detect footer layout: single-step top-level paths use "form", everything else uses "wizard"
   let resolvedFooterLayout = $derived(
-    (layout === 'auto' || layout === 'tabs') && snap
-      ? (snap.stepCount === 1 && snap.nestingLevel === 0 ? 'form' : 'wizard')
-      : (layout === 'auto' || layout === 'tabs' ? 'wizard' : layout)
+    (layout === "auto" || layout === "tabs") && snap
+      ? snap.stepCount === 1 && snap.nestingLevel === 0
+        ? "form"
+        : "wizard"
+      : layout === "auto" || layout === "tabs"
+        ? "wizard"
+        : layout
   );
 
   /**
@@ -251,7 +309,7 @@
         </button>
       {/if}
     </div>
-  {:else if snap.status === 'completed'}
+  {:else if snap.status === "completed"}
     <!-- Completion panel: shown after stayOnFinal completion -->
     {#if !effectiveHideProgress && snap.stepCount > 1}
       <div class="pw-shell__header">
@@ -282,13 +340,13 @@
     </div>
   {:else}
     <!-- Root progress: persistent top-level bar visible during sub-paths -->
-    {#if !effectiveHideProgress && snap.rootProgress && progressLayout !== 'activeOnly'}
+    {#if !effectiveHideProgress && snap.rootProgress && progressLayout !== "activeOnly"}
       <div class="pw-shell__root-progress">
         <div class="pw-shell__steps">
           {#each snap.rootProgress.steps as step, i}
             <div class="pw-shell__step pw-shell__step--{step.status}">
               <span class="pw-shell__step-dot">
-                {step.status === 'completed' ? '✓' : i + 1}
+                {step.status === "completed" ? "✓" : i + 1}
               </span>
               <span class="pw-shell__step-label">{step.title ?? step.id}</span>
             </div>
@@ -301,7 +359,7 @@
     {/if}
 
     <!-- Header: progress indicator (overridable via header snippet) -->
-    {#if !effectiveHideProgress && progressLayout !== 'rootOnly'}
+    {#if !effectiveHideProgress && progressLayout !== "rootOnly"}
       {#if header}
         {@render header(snap)}
       {:else if snap.stepCount > 1 || snap.nestingLevel > 0}
@@ -310,7 +368,7 @@
             {#each snap.steps as step, i}
               <div class="pw-shell__step pw-shell__step--{step.status}">
                 <span class="pw-shell__step-dot">
-                  {step.status === 'completed' ? '✓' : i + 1}
+                  {step.status === "completed" ? "✓" : i + 1}
                 </span>
                 <span class="pw-shell__step-label">{step.title ?? step.id}</span>
               </div>
@@ -323,21 +381,20 @@
       {/if}
     {/if}
 
-    <!-- Body: current step rendered via named snippet.
+    <!-- Body: the active step's component from the `steps` record.
          Prefer formId (inner step id of a StepChoice) so consumers can
-         register snippets by inner step ids directly.
-         Hyphenated step IDs (e.g. "cover-letter") are normalised to camelCase
-         ("coverLetter") as a fallback, since Svelte props must be valid JS
-         identifiers. -->
+         register components by inner step ids directly.
+         Hyphenated step IDs (e.g. "cover-letter") also resolve under their
+         camelCase form ("coverLetter"). -->
     <div class="pw-shell__body">
-      {#if snap.formId && stepSnippets[snap.formId]}
-        {@const StepComponent = stepSnippets[snap.formId]}
+      {#if snap.formId && steps[snap.formId]}
+        {@const StepComponent = steps[snap.formId]}
         <StepComponent />
-      {:else if stepSnippets[snap.stepId]}
-        {@const StepComponent = stepSnippets[snap.stepId]}
+      {:else if steps[snap.stepId]}
+        {@const StepComponent = steps[snap.stepId]}
         <StepComponent />
-      {:else if stepSnippets[stepIdToCamelCase(snap.formId ?? snap.stepId)]}
-        {@const StepComponent = stepSnippets[stepIdToCamelCase(snap.formId ?? snap.stepId)]}
+      {:else if steps[stepIdToCamelCase(snap.formId ?? snap.stepId)]}
+        {@const StepComponent = steps[stepIdToCamelCase(snap.formId ?? snap.stepId)]}
         <StepComponent />
       {:else}
         {warnMissingStep(snap.stepId)}
@@ -346,29 +403,29 @@
     </div>
 
     <!-- Validation messages — suppressed when validationDisplay="inline" -->
-    {#if validationDisplay !== 'inline' && (snap.hasAttemptedNext || snap.hasValidated) && Object.keys(snap.fieldErrors).length > 0}
+    {#if validationDisplay !== "inline" && (snap.hasAttemptedNext || snap.hasValidated) && Object.keys(snap.fieldErrors).length > 0}
       <ul class="pw-shell__validation">
         {#each Object.entries(snap.fieldErrors) as [key, msg]}
           <li class="pw-shell__validation-item">
-            {#if key !== '_'}<span class="pw-shell__validation-label">{formatFieldKey(key)}</span>{/if}{msg}
+            {#if key !== "_"}<span class="pw-shell__validation-label">{formatFieldKey(key)}</span>{/if}{msg}
           </li>
         {/each}
       </ul>
     {/if}
 
     <!-- Warning messages — non-blocking, shown immediately (no hasAttemptedNext gate) -->
-    {#if validationDisplay !== 'inline' && Object.keys(snap.fieldWarnings).length > 0}
+    {#if validationDisplay !== "inline" && Object.keys(snap.fieldWarnings).length > 0}
       <ul class="pw-shell__warnings">
         {#each Object.entries(snap.fieldWarnings) as [key, msg]}
           <li class="pw-shell__warnings-item">
-            {#if key !== '_'}<span class="pw-shell__warnings-label">{formatFieldKey(key)}</span>{/if}{msg}
+            {#if key !== "_"}<span class="pw-shell__warnings-label">{formatFieldKey(key)}</span>{/if}{msg}
           </li>
         {/each}
       </ul>
     {/if}
 
     <!-- Blocking error — guard returned { allowed: false, reason } -->
-    {#if validationDisplay !== 'inline' && (snap.hasAttemptedNext || snap.hasValidated) && snap.blockingError}
+    {#if validationDisplay !== "inline" && (snap.hasAttemptedNext || snap.hasValidated) && snap.blockingError}
       <p class="pw-shell__blocking-error">{snap.blockingError}</p>
     {/if}
 
@@ -377,31 +434,37 @@
       {@const err = snap.error}
       {@const escalated = err.retryCount >= 2}
       <div class="pw-shell__error">
-        <div class="pw-shell__error-title">{escalated ? "Still having trouble." : "Something went wrong."}</div>
-        <div class="pw-shell__error-message">{errorPhaseMessage(err.phase)}{err.message ? ` ${err.message}` : ""}</div>
+        <div class="pw-shell__error-title">
+          {escalated ? "Still having trouble." : "Something went wrong."}
+        </div>
+        <div class="pw-shell__error-message">
+          {errorPhaseMessage(err.phase)}{err.message ? ` ${err.message}` : ""}
+        </div>
         <div class="pw-shell__error-actions">
           {#if !escalated}
-            <button type="button" class="pw-shell__btn pw-shell__btn--retry" onclick={retry}>Try again</button>
+            <button type="button" class="pw-shell__btn pw-shell__btn--retry" onclick={retry}>Try again</button
+            >
           {/if}
           {#if snap.hasPersistence}
             <button
               type="button"
               class="pw-shell__btn {escalated ? 'pw-shell__btn--retry' : 'pw-shell__btn--suspend'}"
-              onclick={suspend}
-            >Save and come back later</button>
+              onclick={suspend}>Save and come back later</button
+            >
           {/if}
           {#if escalated && !snap.hasPersistence}
-            <button type="button" class="pw-shell__btn pw-shell__btn--retry" onclick={retry}>Try again</button>
+            <button type="button" class="pw-shell__btn pw-shell__btn--retry" onclick={retry}>Try again</button
+            >
           {/if}
         </div>
       </div>
-    <!-- Footer: navigation buttons (overridable via footer snippet) -->
+      <!-- Footer: navigation buttons (overridable via footer snippet) -->
     {:else if !effectiveHideFooter && footer}
       {@render footer(snap, actions)}
     {:else if !effectiveHideFooter}
       <div class="pw-shell__footer">
         <div class="pw-shell__footer-left">
-          {#if resolvedFooterLayout === 'form' && !hideCancel}
+          {#if resolvedFooterLayout === "form" && !hideCancel}
             <!-- Form mode: Cancel on the left -->
             <button
               type="button"
@@ -411,7 +474,7 @@
             >
               {cancelLabel}
             </button>
-          {:else if resolvedFooterLayout === 'wizard' && !snap.isFirstStep}
+          {:else if resolvedFooterLayout === "wizard" && !snap.isFirstStep}
             <!-- Wizard mode: Back on the left -->
             <button
               type="button"
@@ -424,7 +487,7 @@
           {/if}
         </div>
         <div class="pw-shell__footer-right">
-          {#if resolvedFooterLayout === 'wizard' && !hideCancel}
+          {#if resolvedFooterLayout === "wizard" && !hideCancel}
             <!-- Wizard mode: Cancel on the right -->
             <button
               type="button"
@@ -443,7 +506,11 @@
             disabled={snap.status !== "idle"}
             onclick={next}
           >
-            {snap.status !== 'idle' && loadingLabel ? loadingLabel : snap.isLastStep ? completeLabel : nextLabel}
+            {snap.status !== "idle" && loadingLabel
+              ? loadingLabel
+              : snap.isLastStep
+                ? completeLabel
+                : nextLabel}
           </button>
         </div>
       </div>