@daltonr/pathwrite-svelte 0.13.0 → 0.14.0

package/README.md

@@ -22,8 +22,9 @@ Peer dependencies: Svelte 5+.
   import { applicationPath } from "./application-path";
   import DetailsStep from "./DetailsStep.svelte";
   import CoverNoteStep from "./CoverNoteStep.svelte";
+  import type { PathData } from "@daltonr/pathwrite-core";
 
-  function handleComplete(data) {
+  function handleComplete(data: PathData) {
     console.log("Submitted:", data);
   }
 </script>
@@ -32,16 +33,8 @@ Peer dependencies: Svelte 5+.
   path={applicationPath}
   initialData={{ name: "", email: "", coverNote: "" }}
   oncomplete={handleComplete}
->
-  {#snippet details()}
-    <DetailsStep />
-  {/snippet}
-
-  <!-- Step ID is "cover-note"; PathShell resolves the camelCase snippet automatically -->
-  {#snippet coverNote()}
-    <CoverNoteStep />
-  {/snippet}
-</PathShell>
+  steps={{ details: DetailsStep, "cover-note": CoverNoteStep }}
+/>
 ```
 
 ```svelte
@@ -94,7 +87,9 @@ Peer dependencies: Svelte 5+.
 
 ## PathShell props
 
-Step content is supplied as Svelte 5 snippets whose names match each step's `id`. For hyphenated step IDs (e.g. `"cover-letter"`), pass the snippet as the camelCase prop (`coverLetter={...}`) — PathShell resolves it automatically. A `console.warn` fires in development if no snippet is found under either the exact ID or the camelCase form.
+Step content is supplied through the `steps` prop: a record of Svelte components keyed by step `id` (for a StepChoice, by the inner step's id, which is what `snapshot.formId` reports). The shell renders the active step's component with no props — step components reach the path through `usePathContext()`. Hyphenated step IDs can be used as-is (`"cover-letter": CoverLetterStep`) or in camelCase (`coverLetter: CoverLetterStep`); PathShell checks both. A `console.warn` fires in development if no component is found under either key.
+
+`Props` has no index signature, so a misspelled prop (`nextLable`, `onComplete`) is a type error rather than a silently ignored attribute.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -116,6 +111,7 @@ Step content is supplied as Svelte 5 snippets whose names match each step's `id`
 | `validateWhen` | `boolean` | `false` | When `true` (including already at mount), calls `validate()` on the engine so all steps show inline errors at once. Bind to the outer snapshot's `hasAttemptedNext` when this shell is nested inside a step of an outer shell. |
 | `restoreKey` | `string` | — | When set, the shell automatically saves its full state (data + active step) into the nearest outer `PathShell`'s data under this key on every change, and restores from it on remount. No-op on a top-level shell. The stored value also carries the inner engine's serialized state, so a remount restores in place: no `onEnter` / `onLeave` re-run, attempted / visited state kept. |
 | `services` | `unknown` | `null` | Arbitrary services object available to step components via `usePathContext<TData, TServices>().services`. |
+| `steps` | `Record<string, Component>` | `{}` | Step components keyed by step id (see above). Each is rendered without props. |
 | `oncomplete` | `(data: PathData) => void` | — | Called when the path finishes naturally. |
 | `oncancel` | `(data: PathData) => void` | — | Called when the path is cancelled. |
 | `onevent` | `(event: PathEvent) => void` | — | Called for every engine event. |
@@ -130,13 +126,11 @@ The component instance also exposes `restart()` for `bind:this` refs, which rest
 You can also replace the built-in header and footer with custom snippets:
 
 ```svelte
-<PathShell path={myPath}>
+<PathShell path={myPath} steps={{ details: DetailsStep }}>
   {#snippet header(snap)}
     <p>Step {snap.stepIndex + 1} of {snap.stepCount}</p>
   {/snippet}
 
-  {#snippet details()}<DetailsStep />{/snippet}
-
   {#snippet footer(snap, actions)}
     <button onclick={actions.previous} disabled={snap.isFirstStep}>Back</button>
     <button onclick={actions.next} disabled={!snap.canMoveNext}>
@@ -170,7 +164,7 @@ You can also replace the built-in header and footer with custom snippets:
 | Export | Description |
 |---|---|
 | `bindData(getSnapshot, setData, key)` | Two-way binding helper for inputs. Returns an object with a reactive `value` getter (reads `getSnapshot()?.data[key]`) and a `set(value)` method that calls `setData(key, value)`. Example: `const name = bindData(() => path.snapshot, path.setData, "name")`, then `<input value={name.value} oninput={(e) => name.set(e.currentTarget.value)} />`. |
-| `stepIdToCamelCase(id)` | Converts a hyphenated step ID to camelCase (`"cover-letter"` → `"coverLetter"`) — the conversion `<PathShell>` uses to resolve snippets for hyphenated step IDs. |
+| `stepIdToCamelCase(id)` | Converts a hyphenated step ID to camelCase (`"cover-letter"` → `"coverLetter"`) — the fallback key `<PathShell>` tries in its `steps` record for hyphenated step IDs. |
 | `setPathContext(ctx)` | Sets the `PathContext` that `usePathContext()` reads, under the adapter's private `Symbol` key. Used internally by `<PathShell>`; only needed when building your own shell component. |
 | `getPathContextOrNull()` | Reads the nearest ancestor `PathContext`, or `undefined` when there is none. Used internally by `<PathShell>` to reach the outer shell for `restoreKey`; call it before `setPathContext()` so it reads the parent rather than self. |
 | `formatFieldKey`, `errorPhaseMessage` | Re-exported from `@daltonr/pathwrite-core` for building custom summaries and error panels. |

package/dist/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>

package/dist/PathShell.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { PathDefinition, PathData, PathEngine, PathSnapshot, ProgressLayout, PathShellActions } from './index.svelte.js';
-import type { Snippet, Component } from 'svelte';
+import type { PathDefinition, PathData, PathEngine, PathEvent, PathSnapshot, ProgressLayout, PathShellActions } from "./index.svelte.js";
+import type { Snippet, Component } from "svelte";
 interface Props {
-    path?: PathDefinition<any>;
+    path?: PathDefinition;
     engine?: PathEngine;
     initialData?: PathData;
     /**
@@ -50,14 +50,21 @@ interface Props {
      * 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>;
     oncomplete?: (data: PathData) => void;
     oncancel?: (data: PathData) => void;
-    onevent?: (event: any) => void;
-    header?: Snippet<[PathSnapshot<any>]>;
-    footer?: Snippet<[PathSnapshot<any>, PathShellActions]>;
+    onevent?: (event: PathEvent) => void;
+    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>]>;
-    [key: string]: Component<any> | any;
+    completion?: Snippet<[PathSnapshot]>;
 }
 declare const PathShell: Component<Props, {
     restart: () => Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"PathShell.svelte.d.ts","sourceRoot":"","sources":["../src/PathShell.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG9H,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8HAA8H;IAC9H,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qNAAqN;IACrN,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7C;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/B,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC;IACxD,6HAA6H;IAC7H,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAE1C,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;CACrC;AA6WH,QAAA,MAAM,SAAS;mBA7LQ,QAAQ,IAAI,CAAC;MA6LmB,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"PathShell.svelte.d.ts","sourceRoot":"","sources":["../src/PathShell.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACR,cAAc,EACd,QAAQ,EACR,UAAU,EACV,SAAS,EACT,YAAY,EACZ,cAAc,EACd,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAG7B,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAG/C,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8HAA8H;IAC9H,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qNAAqN;IACrN,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7C;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAElC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAErC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC;IACnD,6HAA6H;IAC7H,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;CACtC;AA2ZH,QAAA,MAAM,SAAS;mBArMQ,QAAQ,IAAI,CAAC;MAqMmB,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/index.css

@@ -53,7 +53,12 @@
   flex-direction: column;
   gap: var(--pw-shell-gap);
   padding: var(--pw-shell-padding);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
   color: var(--pw-color-text);
 }
 
@@ -397,7 +402,9 @@
   border-radius: var(--pw-btn-radius);
   cursor: pointer;
   font-size: 14px;
-  transition: background 0.15s ease, border-color 0.15s ease;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
 }
 
 .pw-shell__btn:hover:not(:disabled) {
@@ -422,7 +429,9 @@
 }
 
 @keyframes pw-spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .pw-shell__btn--next.pw-shell__btn--loading {
@@ -515,4 +524,3 @@
 .pw-shell__btn--suspend:hover:not(:disabled) {
   background: var(--pw-color-primary-light);
 }
-