@daltonr/pathwrite-angular 0.2.1 → 0.4.0

package/README.md

@@ -2,6 +2,31 @@
 
 Angular `@Injectable` facade over `@daltonr/pathwrite-core`. Exposes path state and events as RxJS observables that work seamlessly with Angular signals, the `async` pipe, and `takeUntilDestroyed`.
 
+## Installation
+
+```bash
+npm install @daltonr/pathwrite-core @daltonr/pathwrite-angular
+```
+
+## Exported Types
+
+For convenience, this package re-exports core types so you don't need to import from `@daltonr/pathwrite-core`:
+
+```typescript
+import { 
+  PathFacade,           // Angular-specific
+  PathData,             // Re-exported from core
+  PathDefinition,       // Re-exported from core
+  PathEvent,            // Re-exported from core
+  PathSnapshot,         // Re-exported from core
+  PathStep,             // Re-exported from core
+  PathStepContext,      // Re-exported from core
+  SerializedPathState   // Re-exported from core
+} from "@daltonr/pathwrite-angular";
+```
+
+---
+
 ## Setup
 
 Provide `PathFacade` at the component level so each component gets its own isolated path instance, and Angular handles cleanup automatically via `ngOnDestroy`.
@@ -41,7 +66,8 @@ export class MyComponent {
 | Method | Description |
 |--------|-------------|
 | `start(definition, data?)` | Start or re-start a path. |
-| `startSubPath(definition, data?)` | Push a sub-path. Requires an active path. |
+| `restart(definition, data?)` | Tear down any active path (without firing hooks) and start the given path fresh. Safe to call at any time. Use for "Start over" / retry flows. |
+| `startSubPath(definition, data?, meta?)` | Push a sub-path. Requires an active path. `meta` is returned unchanged to `onSubPathComplete` / `onSubPathCancel`. |
 | `next()` | Advance one step. Completes the path on the last step. |
 | `previous()` | Go back one step. No-op when already on the first step of a top-level path. |
 | `cancel()` | Cancel the active path (or sub-path). |
@@ -199,7 +225,12 @@ The Angular adapter ships an optional shell component that renders a complete pr
 The shell lives in a separate entry point so that headless-only usage does not pull in the Angular compiler:
 
 ```typescript
-import { PathShellComponent, PathStepDirective } from "@daltonr/pathwrite-angular/shell";
+import {
+  PathShellComponent,
+  PathStepDirective,
+  PathShellHeaderDirective,
+  PathShellFooterDirective,
+} from "@daltonr/pathwrite-angular/shell";
 ```
 
 ### Usage
@@ -283,6 +314,324 @@ export class MyComponent {
 | `(cancelled)` | `PathData` | Emitted when the path is cancelled. |
 | `(pathEvent)` | `PathEvent` | Emitted for every engine event. |
 
+### Customising the header and footer
+
+Use `pwShellHeader` and `pwShellFooter` directives to replace the built-in progress bar or navigation buttons with your own templates. Both are declared on `<ng-template>` elements inside the shell.
+
+**`pwShellHeader`** — receives the current `PathSnapshot` as the implicit template variable:
+
+```typescript
+@Component({
+  imports: [PathShellComponent, PathStepDirective, PathShellHeaderDirective],
+  template: `
+    <pw-shell [path]="myPath">
+      <ng-template pwShellHeader let-s>
+        <p>Step {{ s.stepIndex + 1 }} of {{ s.stepCount }} — {{ s.stepTitle }}</p>
+      </ng-template>
+      <ng-template pwStep="details"><app-details-form /></ng-template>
+      <ng-template pwStep="review"><app-review-panel /></ng-template>
+    </pw-shell>
+  `
+})
+export class MyComponent { ... }
+```
+
+**`pwShellFooter`** — receives the snapshot as the implicit variable and an `actions` variable with all navigation callbacks:
+
+```typescript
+@Component({
+  imports: [PathShellComponent, PathStepDirective, PathShellFooterDirective],
+  template: `
+    <pw-shell [path]="myPath">
+      <ng-template pwShellFooter let-s let-actions="actions">
+        <button (click)="actions.previous()" [disabled]="s.isFirstStep || s.isNavigating">Back</button>
+        <button (click)="actions.next()"     [disabled]="!s.canMoveNext || s.isNavigating">
+          {{ s.isLastStep ? 'Finish' : 'Next' }}
+        </button>
+      </ng-template>
+      <ng-template pwStep="details"><app-details-form /></ng-template>
+    </pw-shell>
+  `
+})
+export class MyComponent { ... }
+```
+
+`actions` (`PathShellActions`) contains: `next`, `previous`, `cancel`, `goToStep`, `goToStepChecked`, `setData`, `restart`. All return `Promise<void>`.
+
+`restart()` restarts the shell's own `[path]` input with its own `[initialData]` input — useful for a "Start over" button in a custom footer.
+
+Both directives can be combined. Only the sections you override are replaced — a custom header still shows the default footer, and vice versa.
+
+---
+
+## Sub-Paths
+
+Sub-paths allow you to nest multi-step workflows. Common use cases include:
+- Running a child workflow per collection item (e.g., approve each document)
+- Conditional drill-down flows (e.g., "Add payment method" modal)
+- Reusable wizard components
+
+### Basic Sub-Path Flow
+
+When a sub-path is active:
+- The shell switches to show the sub-path's steps
+- The progress bar displays sub-path steps (not main path steps)
+- Pressing Back on the first sub-path step **cancels** the sub-path and returns to the parent
+- The `PathFacade` (and thus `state$`, `stateSignal`) reflects the **sub-path** snapshot, not the parent's
+
+### Complete Example: Approver Collection
+
+```typescript
+import { PathData, PathDefinition, PathFacade } from "@daltonr/pathwrite-angular";
+
+// Sub-path data shape
+interface ApproverReviewData extends PathData {
+  decision: "approve" | "reject" | "";
+  comments: string;
+}
+
+// Main path data shape
+interface ApprovalWorkflowData extends PathData {
+  documentTitle: string;
+  approvers: string[];
+  approvals: Array<{ approver: string; decision: string; comments: string }>;
+}
+
+// Define the sub-path (approver review wizard)
+const approverReviewPath: PathDefinition<ApproverReviewData> = {
+  id: "approver-review",
+  steps: [
+    { id: "review", title: "Review Document" },
+    {
+      id: "decision",
+      title: "Make Decision",
+      canMoveNext: ({ data }) =>
+        data.decision === "approve" || data.decision === "reject",
+      validationMessages: ({ data }) =>
+        !data.decision ? ["Please select Approve or Reject"] : []
+    },
+    { id: "comments", title: "Add Comments" }
+  ]
+};
+
+// Define the main path
+const approvalWorkflowPath: PathDefinition<ApprovalWorkflowData> = {
+  id: "approval-workflow",
+  steps: [
+    {
+      id: "setup",
+      title: "Setup Approval",
+      canMoveNext: ({ data }) =>
+        (data.documentTitle ?? "").trim().length > 0 &&
+        data.approvers.length > 0
+    },
+    {
+      id: "run-approvals",
+      title: "Collect Approvals",
+      // Block "Next" until all approvers have completed their reviews
+      canMoveNext: ({ data }) =>
+        data.approvals.length === data.approvers.length,
+      validationMessages: ({ data }) => {
+        const remaining = data.approvers.length - data.approvals.length;
+        return remaining > 0
+          ? [`${remaining} approver(s) pending review`]
+          : [];
+      },
+      // When an approver finishes their sub-path, record the result
+      onSubPathComplete(subPathId, subPathData, ctx, meta) {
+        const approverName = meta?.approverName as string;
+        const result = subPathData as ApproverReviewData;
+        return {
+          approvals: [
+            ...ctx.data.approvals,
+            {
+              approver: approverName,
+              decision: result.decision,
+              comments: result.comments
+            }
+          ]
+        };
+      },
+      // If an approver cancels (presses Back on first step), you can track it
+      onSubPathCancel(subPathId, subPathData, ctx, meta) {
+        console.log(`${meta?.approverName} cancelled their review`);
+        // Optionally return data changes, or just log
+      }
+    },
+    { id: "summary", title: "Summary" }
+  ]
+};
+
+// Component
+@Component({
+  selector: 'app-approval-workflow',
+  standalone: true,
+  imports: [PathShellComponent, PathStepDirective],
+  providers: [PathFacade],
+  template: `
+    <pw-shell [path]="approvalWorkflowPath" [initialData]="initialData">
+      <!-- Main path steps -->
+      <ng-template pwStep="setup">
+        <input [(ngModel)]="facade.snapshot()!.data.documentTitle" placeholder="Document title" />
+        <!-- approver selection UI here -->
+      </ng-template>
+
+      <ng-template pwStep="run-approvals">
+        <h3>Approvers</h3>
+        <ul>
+          @for (approver of facade.snapshot()!.data.approvers; track $index) {
+            <li>
+              {{ approver }}
+              @if (!hasApproval(approver)) {
+                <button (click)="launchReviewForApprover(approver, $index)">
+                  Start Review
+                </button>
+              } @else {
+                <span>✓ {{ getApproval(approver)?.decision }}</span>
+              }
+            </li>
+          }
+        </ul>
+      </ng-template>
+
+      <ng-template pwStep="summary">
+        <h3>All Approvals Collected</h3>
+        <ul>
+          @for (approval of facade.snapshot()!.data.approvals; track approval.approver) {
+            <li>{{ approval.approver }}: {{ approval.decision }}</li>
+          }
+        </ul>
+      </ng-template>
+
+      <!-- Sub-path steps (must be co-located in the same pw-shell) -->
+      <ng-template pwStep="review">
+        <p>Review the document: "{{ facade.snapshot()!.data.documentTitle }}"</p>
+      </ng-template>
+
+      <ng-template pwStep="decision">
+        <label><input type="radio" value="approve" [(ngModel)]="facade.snapshot()!.data.decision" /> Approve</label>
+        <label><input type="radio" value="reject" [(ngModel)]="facade.snapshot()!.data.decision" /> Reject</label>
+      </ng-template>
+
+      <ng-template pwStep="comments">
+        <textarea [(ngModel)]="facade.snapshot()!.data.comments" placeholder="Optional comments"></textarea>
+      </ng-template>
+    </pw-shell>
+  `
+})
+export class ApprovalWorkflowComponent {
+  protected readonly facade = inject(PathFacade) as PathFacade<ApprovalWorkflowData>;
+  protected readonly approvalWorkflowPath = approvalWorkflowPath;
+  protected readonly initialData = { documentTitle: '', approvers: [], approvals: [] };
+
+  protected launchReviewForApprover(approverName: string, index: number): void {
+    // Pass correlation data via `meta` — it's echoed back to onSubPathComplete
+    void this.facade.startSubPath(
+      approverReviewPath,
+      { decision: "", comments: "" },
+      { approverName, approverIndex: index }
+    );
+  }
+
+  protected hasApproval(approver: string): boolean {
+    return this.facade.snapshot()!.data.approvals.some(a => a.approver === approver);
+  }
+
+  protected getApproval(approver: string) {
+    return this.facade.snapshot()!.data.approvals.find(a => a.approver === approver);
+  }
+}
+```
+
+### Key Notes
+
+**1. Sub-path steps must be co-located with main path steps**  
+All `pwStep` templates (main path + sub-path steps) live in the same `<pw-shell>`. When a sub-path is active, the shell renders the sub-path's step templates. This means:
+- Parent and sub-path step IDs **must not collide** (e.g., don't use `summary` in both)
+- The shell matches step IDs from the current path only (main or sub), but all templates are registered globally
+
+**2. The `meta` correlation field**  
+`startSubPath` accepts an optional third argument (`meta`) that is returned unchanged to `onSubPathComplete` and `onSubPathCancel`. Use it to correlate which collection item triggered the sub-path:
+
+```typescript
+facade.startSubPath(subPath, initialData, { itemIndex: 3, itemId: "abc" });
+
+// In the parent step:
+onSubPathComplete(subPathId, subPathData, ctx, meta) {
+  const itemIndex = meta?.itemIndex; // 3
+}
+```
+
+**3. Progress bar switches during sub-paths**  
+When `snapshot.nestingLevel > 0`, you're in a sub-path. The `steps` array in the snapshot contains the sub-path's steps, not the main path's. The default PathShell progress bar shows sub-path progress. You can check `nestingLevel` to show a breadcrumb or "back to main flow" indicator.
+
+**4. Accessing parent path data from sub-path components**  
+There is currently no way to inject a "parent facade" in sub-path step components. If a sub-path step needs parent data (e.g., the document title), pass it via `initialData` when calling `startSubPath`:
+
+```typescript
+facade.startSubPath(approverReviewPath, {
+  decision: "",
+  comments: "",
+  documentTitle: facade.snapshot()!.data.documentTitle // copy from parent
+});
+```
+
+---
+
+## Guards and Lifecycle Hooks
+
+### Defensive Guards (Important!)
+
+**Guards and `validationMessages` are evaluated *before* `onEnter` runs on first entry.**
+
+If you access fields in a guard that `onEnter` is supposed to initialize, the guard will throw a `TypeError` on startup. Write guards defensively using nullish coalescing:
+
+```typescript
+// ✗ Unsafe — crashes if data.name is undefined
+canMoveNext: ({ data }) => data.name.trim().length > 0
+
+// ✓ Safe — handles undefined gracefully
+canMoveNext: ({ data }) => (data.name ?? "").trim().length > 0
+```
+
+Alternatively, pass `initialData` to `start()` / `<pw-shell>` so all fields are present from the first snapshot:
+
+```typescript
+<pw-shell [path]="myPath" [initialData]="{ name: '', age: 0 }" />
+```
+
+If a guard throws, the engine catches it, logs a warning, and returns `true` (allow navigation) as a safe default.
+
+### Async Guards and Validation Messages
+
+Guards and `validationMessages` must be **synchronous** for inclusion in snapshots. Async functions are detected and warned about:
+- Async `canMoveNext` / `canMovePrevious` default to `true` (optimistic)
+- Async `validationMessages` default to `[]`
+
+The async version is still enforced during actual navigation (when you call `next()` / `previous()`), but the snapshot won't reflect the pending state. If you need async validation, perform it in the guard and store the result in `data` so the guard can read it synchronously.
+
+### `isFirstEntry` Flag
+
+The `PathStepContext` passed to all hooks includes an `isFirstEntry: boolean` flag. It's `true` the first time a step is visited, `false` on re-entry (e.g., after navigating back then forward again).
+
+Use it to distinguish initialization from re-entry:
+
+```typescript
+{
+  id: "details",
+  onEnter: ({ isFirstEntry, data }) => {
+    if (isFirstEntry) {
+      // Only pre-fill on first visit, not when returning via Back
+      return { name: "Default Name" };
+    }
+  }
+}
+```
+
+**Important:** `onEnter` fires every time you enter the step. If you want "initialize once" behavior, either:
+1. Use `isFirstEntry` to conditionally return data
+2. Provide `initialData` to `start()` instead of using `onEnter`
+
 ---
 
 ## Styling
@@ -314,3 +663,36 @@ Override any `--pw-*` variable to customise the appearance:
   --pw-shell-radius: 12px;
 }
 ```
+
+### Available CSS Custom Properties
+
+**Layout:**
+- `--pw-shell-max-width` — Maximum width of the shell (default: `720px`)
+- `--pw-shell-padding` — Internal padding (default: `24px`)
+- `--pw-shell-gap` — Gap between header, body, footer (default: `20px`)
+- `--pw-shell-radius` — Border radius for cards (default: `10px`)
+
+**Colors:**
+- `--pw-color-bg` — Background color (default: `#ffffff`)
+- `--pw-color-border` — Border color (default: `#dbe4f0`)
+- `--pw-color-text` — Primary text color (default: `#1f2937`)
+- `--pw-color-muted` — Muted text color (default: `#5b677a`)
+- `--pw-color-primary` — Primary/accent color (default: `#2563eb`)
+- `--pw-color-primary-light` — Light primary for backgrounds (default: `rgba(37, 99, 235, 0.12)`)
+- `--pw-color-btn-bg` — Button background (default: `#f8fbff`)
+- `--pw-color-btn-border` — Button border (default: `#c2d0e5`)
+
+**Validation:**
+- `--pw-color-error` — Error text color (default: `#dc2626`)
+- `--pw-color-error-bg` — Error background (default: `#fef2f2`)
+- `--pw-color-error-border` — Error border (default: `#fecaca`)
+
+**Progress Indicator:**
+- `--pw-dot-size` — Step dot size (default: `32px`)
+- `--pw-dot-font-size` — Font size inside dots (default: `13px`)
+- `--pw-track-height` — Progress track height (default: `4px`)
+
+**Buttons:**
+- `--pw-btn-padding` — Button padding (default: `8px 16px`)
+- `--pw-btn-radius` — Button border radius (default: `6px`)
+

package/dist/index.css

@@ -250,6 +250,16 @@
   border-color: #1d4ed8;
 }
 
+.pw-shell__btn--back {
+  background: transparent;
+  border-color: var(--pw-color-primary);
+  color: var(--pw-color-primary);
+}
+
+.pw-shell__btn--back:hover:not(:disabled) {
+  background: var(--pw-color-primary-light);
+}
+
 .pw-shell__btn--cancel {
   color: var(--pw-color-muted);
   border-color: transparent;

package/dist/index.d.ts

@@ -29,7 +29,14 @@ export declare class PathFacade<TData extends PathData = PathData> implements On
     constructor();
     ngOnDestroy(): void;
     start(path: PathDefinition<any>, initialData?: PathData): Promise<void>;
-    startSubPath(path: PathDefinition<any>, initialData?: PathData): Promise<void>;
+    /**
+     * Tears down any active path (without firing lifecycle hooks) and immediately
+     * starts the given path fresh. Safe to call whether or not a path is running.
+     * Use for "Start over" / retry flows without destroying and re-creating the
+     * component that provides this facade.
+     */
+    restart(path: PathDefinition<any>, initialData?: PathData): Promise<void>;
+    startSubPath(path: PathDefinition<any>, initialData?: PathData, meta?: Record<string, unknown>): Promise<void>;
     next(): Promise<void>;
     previous(): Promise<void>;
     cancel(): Promise<void>;
@@ -84,3 +91,4 @@ export interface FormGroupLike {
  * ```
  */
 export declare function syncFormGroup<TData extends PathData = PathData>(facade: PathFacade<TData>, formGroup: FormGroupLike, destroyRef?: DestroyRef): () => void;
+export type { PathData, PathDefinition, PathEvent, PathSnapshot, PathStep, PathStepContext, SerializedPathState } from "@daltonr/pathwrite-core";

package/dist/index.js

@@ -46,8 +46,17 @@ export class PathFacade {
     start(path, initialData = {}) {
         return this.engine.start(path, initialData);
     }
-    startSubPath(path, initialData = {}) {
-        return this.engine.startSubPath(path, initialData);
+    /**
+     * Tears down any active path (without firing lifecycle hooks) and immediately
+     * starts the given path fresh. Safe to call whether or not a path is running.
+     * Use for "Start over" / retry flows without destroying and re-creating the
+     * component that provides this facade.
+     */
+    restart(path, initialData = {}) {
+        return this.engine.restart(path, initialData);
+    }
+    startSubPath(path, initialData = {}, meta) {
+        return this.engine.startSubPath(path, initialData, meta);
     }
     next() {
         return this.engine.next();

package/dist/index.js.map

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

package/dist/shell.d.ts

@@ -1,7 +1,22 @@
 import { TemplateRef, EventEmitter, QueryList, OnInit, OnDestroy, Injector } from "@angular/core";
-import { PathData, PathDefinition, PathEvent } from "@daltonr/pathwrite-core";
+import { PathData, PathDefinition, PathEvent, PathSnapshot } from "@daltonr/pathwrite-core";
 import { PathFacade } from "./index";
 import * as i0 from "@angular/core";
+/**
+ * Navigation actions passed as template context to custom `pwShellFooter`
+ * templates. Mirrors what React's `renderFooter` and Vue's `#footer` slot
+ * receive, using promises so it is consistent with the Angular facade.
+ */
+export interface PathShellActions {
+    next: () => Promise<void>;
+    previous: () => Promise<void>;
+    cancel: () => Promise<void>;
+    goToStep: (stepId: string) => Promise<void>;
+    goToStepChecked: (stepId: string) => Promise<void>;
+    setData: (key: string, value: unknown) => Promise<void>;
+    /** Restart the shell's current path with its current `initialData`. */
+    restart: () => Promise<void>;
+}
 /**
  * Structural directive that associates a template with a step ID.
  * Used inside `<pw-shell>` to define per-step content.
@@ -20,6 +35,56 @@ export declare class PathStepDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<PathStepDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<PathStepDirective, "[pwStep]", never, { "stepId": { "alias": "pwStep"; "required": true; }; }, {}, never, never, true, never>;
 }
+/**
+ * Replaces the default progress header inside `<pw-shell>`.
+ * The template receives the current `PathSnapshot` as the implicit context.
+ *
+ * ```html
+ * <pw-shell [path]="myPath">
+ *   <ng-template pwShellHeader let-s>
+ *     <my-custom-progress [snapshot]="s" />
+ *   </ng-template>
+ *   <ng-template pwStep="details"><app-details-form /></ng-template>
+ * </pw-shell>
+ * ```
+ */
+export declare class PathShellHeaderDirective {
+    readonly templateRef: TemplateRef<{
+        $implicit: PathSnapshot;
+    }>;
+    constructor(templateRef: TemplateRef<{
+        $implicit: PathSnapshot;
+    }>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PathShellHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PathShellHeaderDirective, "[pwShellHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Replaces the default navigation footer inside `<pw-shell>`.
+ * The template receives the current `PathSnapshot` as the implicit context
+ * and a `actions` variable containing all navigation actions.
+ *
+ * ```html
+ * <pw-shell [path]="myPath">
+ *   <ng-template pwShellFooter let-s let-actions="actions">
+ *     <button (click)="actions.previous()" [disabled]="s.isFirstStep">Back</button>
+ *     <button (click)="actions.next()" [disabled]="!s.canMoveNext">Next</button>
+ *   </ng-template>
+ *   <ng-template pwStep="details"><app-details-form /></ng-template>
+ * </pw-shell>
+ * ```
+ */
+export declare class PathShellFooterDirective {
+    readonly templateRef: TemplateRef<{
+        $implicit: PathSnapshot;
+        actions: PathShellActions;
+    }>;
+    constructor(templateRef: TemplateRef<{
+        $implicit: PathSnapshot;
+        actions: PathShellActions;
+    }>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PathShellFooterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PathShellFooterDirective, "[pwShellFooter]", never, {}, {}, never, never, true, never>;
+}
 /**
  * Default UI shell component. Renders a progress indicator, step content,
  * and navigation buttons.
@@ -54,15 +119,19 @@ export declare class PathShellComponent implements OnInit, OnDestroy {
     cancelled: EventEmitter<PathData>;
     pathEvent: EventEmitter<PathEvent>;
     stepDirectives: QueryList<PathStepDirective>;
+    customHeader?: PathShellHeaderDirective;
+    customFooter?: PathShellFooterDirective;
     readonly facade: PathFacade<PathData>;
     /** The shell's own component-level injector. Passed to ngTemplateOutlet so that
      *  step components can resolve PathFacade (provided by this shell) via inject(). */
     protected readonly shellInjector: Injector;
     started: boolean;
+    /** Navigation actions passed to custom `pwShellFooter` templates. */
+    protected readonly shellActions: PathShellActions;
     private readonly destroy$;
     ngOnInit(): void;
     ngOnDestroy(): void;
     doStart(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PathShellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PathShellComponent, "pw-shell", never, { "path": { "alias": "path"; "required": true; }; "initialData": { "alias": "initialData"; "required": false; }; "autoStart": { "alias": "autoStart"; "required": false; }; "backLabel": { "alias": "backLabel"; "required": false; }; "nextLabel": { "alias": "nextLabel"; "required": false; }; "finishLabel": { "alias": "finishLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "hideCancel": { "alias": "hideCancel"; "required": false; }; "hideProgress": { "alias": "hideProgress"; "required": false; }; }, { "completed": "completed"; "cancelled": "cancelled"; "pathEvent": "pathEvent"; }, ["stepDirectives"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PathShellComponent, "pw-shell", never, { "path": { "alias": "path"; "required": true; }; "initialData": { "alias": "initialData"; "required": false; }; "autoStart": { "alias": "autoStart"; "required": false; }; "backLabel": { "alias": "backLabel"; "required": false; }; "nextLabel": { "alias": "nextLabel"; "required": false; }; "finishLabel": { "alias": "finishLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "hideCancel": { "alias": "hideCancel"; "required": false; }; "hideProgress": { "alias": "hideProgress"; "required": false; }; }, { "completed": "completed"; "cancelled": "cancelled"; "pathEvent": "pathEvent"; }, ["customHeader", "customFooter", "stepDirectives"], never, true, never>;
 }

package/dist/shell.js

@@ -1,4 +1,4 @@
-import { Component, Directive, Input, Output, EventEmitter, ContentChildren, inject, Injector, ChangeDetectionStrategy } from "@angular/core";
+import { Component, Directive, Input, Output, EventEmitter, ContentChild, ContentChildren, inject, Injector, ChangeDetectionStrategy } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
@@ -34,6 +34,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: [{ required: true, alias: "pwStep" }]
             }] } });
 // ---------------------------------------------------------------------------
+// PathShellHeaderDirective
+// ---------------------------------------------------------------------------
+/**
+ * Replaces the default progress header inside `<pw-shell>`.
+ * The template receives the current `PathSnapshot` as the implicit context.
+ *
+ * ```html
+ * <pw-shell [path]="myPath">
+ *   <ng-template pwShellHeader let-s>
+ *     <my-custom-progress [snapshot]="s" />
+ *   </ng-template>
+ *   <ng-template pwStep="details"><app-details-form /></ng-template>
+ * </pw-shell>
+ * ```
+ */
+export class PathShellHeaderDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PathShellHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PathShellHeaderDirective, isStandalone: true, selector: "[pwShellHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PathShellHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[pwShellHeader]", standalone: true }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+// ---------------------------------------------------------------------------
+// PathShellFooterDirective
+// ---------------------------------------------------------------------------
+/**
+ * Replaces the default navigation footer inside `<pw-shell>`.
+ * The template receives the current `PathSnapshot` as the implicit context
+ * and a `actions` variable containing all navigation actions.
+ *
+ * ```html
+ * <pw-shell [path]="myPath">
+ *   <ng-template pwShellFooter let-s let-actions="actions">
+ *     <button (click)="actions.previous()" [disabled]="s.isFirstStep">Back</button>
+ *     <button (click)="actions.next()" [disabled]="!s.canMoveNext">Next</button>
+ *   </ng-template>
+ *   <ng-template pwStep="details"><app-details-form /></ng-template>
+ * </pw-shell>
+ * ```
+ */
+export class PathShellFooterDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PathShellFooterDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PathShellFooterDirective, isStandalone: true, selector: "[pwShellFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PathShellFooterDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[pwShellFooter]", standalone: true }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+// ---------------------------------------------------------------------------
 // PathShellComponent
 // ---------------------------------------------------------------------------
 /**
@@ -73,6 +129,16 @@ export class PathShellComponent {
          *  step components can resolve PathFacade (provided by this shell) via inject(). */
         this.shellInjector = inject(Injector);
         this.started = false;
+        /** Navigation actions passed to custom `pwShellFooter` templates. */
+        this.shellActions = {
+            next: () => this.facade.next(),
+            previous: () => this.facade.previous(),
+            cancel: () => this.facade.cancel(),
+            goToStep: (id) => this.facade.goToStep(id),
+            goToStepChecked: (id) => this.facade.goToStepChecked(id),
+            setData: (key, value) => this.facade.setData(key, value),
+            restart: () => this.facade.restart(this.path, this.initialData),
+        };
         this.destroy$ = new Subject();
     }
     ngOnInit() {
@@ -96,7 +162,7 @@ export class PathShellComponent {
         this.facade.start(this.path, this.initialData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PathShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PathShellComponent, isStandalone: true, selector: "pw-shell", inputs: { path: "path", initialData: "initialData", autoStart: "autoStart", backLabel: "backLabel", nextLabel: "nextLabel", finishLabel: "finishLabel", cancelLabel: "cancelLabel", hideCancel: "hideCancel", hideProgress: "hideProgress" }, outputs: { completed: "completed", cancelled: "cancelled", pathEvent: "pathEvent" }, providers: [PathFacade], queries: [{ propertyName: "stepDirectives", predicate: PathStepDirective }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PathShellComponent, isStandalone: true, selector: "pw-shell", inputs: { path: "path", initialData: "initialData", autoStart: "autoStart", backLabel: "backLabel", nextLabel: "nextLabel", finishLabel: "finishLabel", cancelLabel: "cancelLabel", hideCancel: "hideCancel", hideProgress: "hideProgress" }, outputs: { completed: "completed", cancelled: "cancelled", pathEvent: "pathEvent" }, providers: [PathFacade], queries: [{ propertyName: "customHeader", first: true, predicate: PathShellHeaderDirective, descendants: true }, { propertyName: "customFooter", first: true, predicate: PathShellFooterDirective, descendants: true }, { propertyName: "stepDirectives", predicate: PathStepDirective }], ngImport: i0, template: `
     <!-- Empty state -->
     <div class="pw-shell" *ngIf="!(facade.state$ | async)">
       <div class="pw-shell__empty" *ngIf="!started">
@@ -107,22 +173,27 @@ export class PathShellComponent {
 
     <!-- Active path -->
     <div class="pw-shell" *ngIf="facade.state$ | async as s">
-      <!-- Header — progress indicator -->
-      <div class="pw-shell__header" *ngIf="!hideProgress">
-        <div class="pw-shell__steps">
-          <div
-            *ngFor="let step of s.steps; let i = index"
-            class="pw-shell__step"
-            [ngClass]="'pw-shell__step--' + step.status"
-          >
-            <span class="pw-shell__step-dot">{{ step.status === 'completed' ? '✓' : (i + 1) }}</span>
-            <span class="pw-shell__step-label">{{ step.title ?? step.id }}</span>
+      <!-- Header — custom or default progress indicator -->
+      <ng-container *ngIf="customHeader; else defaultHeader">
+        <ng-container *ngTemplateOutlet="customHeader.templateRef; context: { $implicit: s }"></ng-container>
+      </ng-container>
+      <ng-template #defaultHeader>
+        <div class="pw-shell__header" *ngIf="!hideProgress">
+          <div class="pw-shell__steps">
+            <div
+              *ngFor="let step of s.steps; let i = index"
+              class="pw-shell__step"
+              [ngClass]="'pw-shell__step--' + step.status"
+            >
+              <span class="pw-shell__step-dot">{{ step.status === 'completed' ? '✓' : (i + 1) }}</span>
+              <span class="pw-shell__step-label">{{ step.title ?? step.id }}</span>
+            </div>
+          </div>
+          <div class="pw-shell__track">
+            <div class="pw-shell__track-fill" [style.width.%]="s.progress * 100"></div>
           </div>
         </div>
-        <div class="pw-shell__track">
-          <div class="pw-shell__track-fill" [style.width.%]="s.progress * 100"></div>
-        </div>
-      </div>
+      </ng-template>
 
       <!-- Body — step content -->
       <div class="pw-shell__body">
@@ -138,33 +209,38 @@ export class PathShellComponent {
         <li *ngFor="let msg of s.validationMessages" class="pw-shell__validation-item">{{ msg }}</li>
       </ul>
 
-      <!-- Footer — navigation buttons -->
-      <div class="pw-shell__footer">
-        <div class="pw-shell__footer-left">
-          <button
-            *ngIf="!s.isFirstStep"
-            type="button"
-            class="pw-shell__btn pw-shell__btn--back"
-            [disabled]="s.isNavigating || !s.canMovePrevious"
-            (click)="facade.previous()"
-          >{{ backLabel }}</button>
-        </div>
-        <div class="pw-shell__footer-right">
-          <button
-            *ngIf="!hideCancel"
-            type="button"
-            class="pw-shell__btn pw-shell__btn--cancel"
-            [disabled]="s.isNavigating"
-            (click)="facade.cancel()"
-          >{{ cancelLabel }}</button>
-          <button
-            type="button"
-            class="pw-shell__btn pw-shell__btn--next"
-            [disabled]="s.isNavigating || !s.canMoveNext"
-            (click)="facade.next()"
-          >{{ s.isLastStep ? finishLabel : nextLabel }}</button>
+      <!-- Footer — custom or default navigation buttons -->
+      <ng-container *ngIf="customFooter; else defaultFooter">
+        <ng-container *ngTemplateOutlet="customFooter.templateRef; context: { $implicit: s, actions: shellActions }"></ng-container>
+      </ng-container>
+      <ng-template #defaultFooter>
+        <div class="pw-shell__footer">
+          <div class="pw-shell__footer-left">
+            <button
+              *ngIf="!s.isFirstStep"
+              type="button"
+              class="pw-shell__btn pw-shell__btn--back"
+              [disabled]="s.isNavigating || !s.canMovePrevious"
+              (click)="facade.previous()"
+            >{{ backLabel }}</button>
+          </div>
+          <div class="pw-shell__footer-right">
+            <button
+              *ngIf="!hideCancel"
+              type="button"
+              class="pw-shell__btn pw-shell__btn--cancel"
+              [disabled]="s.isNavigating"
+              (click)="facade.cancel()"
+            >{{ cancelLabel }}</button>
+            <button
+              type="button"
+              class="pw-shell__btn pw-shell__btn--next"
+              [disabled]="s.isNavigating || !s.canMoveNext"
+              (click)="facade.next()"
+            >{{ s.isLastStep ? finishLabel : nextLabel }}</button>
+          </div>
         </div>
-      </div>
+      </ng-template>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
@@ -187,22 +263,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
     <!-- Active path -->
     <div class="pw-shell" *ngIf="facade.state$ | async as s">
-      <!-- Header — progress indicator -->
-      <div class="pw-shell__header" *ngIf="!hideProgress">
-        <div class="pw-shell__steps">
-          <div
-            *ngFor="let step of s.steps; let i = index"
-            class="pw-shell__step"
-            [ngClass]="'pw-shell__step--' + step.status"
-          >
-            <span class="pw-shell__step-dot">{{ step.status === 'completed' ? '✓' : (i + 1) }}</span>
-            <span class="pw-shell__step-label">{{ step.title ?? step.id }}</span>
+      <!-- Header — custom or default progress indicator -->
+      <ng-container *ngIf="customHeader; else defaultHeader">
+        <ng-container *ngTemplateOutlet="customHeader.templateRef; context: { $implicit: s }"></ng-container>
+      </ng-container>
+      <ng-template #defaultHeader>
+        <div class="pw-shell__header" *ngIf="!hideProgress">
+          <div class="pw-shell__steps">
+            <div
+              *ngFor="let step of s.steps; let i = index"
+              class="pw-shell__step"
+              [ngClass]="'pw-shell__step--' + step.status"
+            >
+              <span class="pw-shell__step-dot">{{ step.status === 'completed' ? '✓' : (i + 1) }}</span>
+              <span class="pw-shell__step-label">{{ step.title ?? step.id }}</span>
+            </div>
+          </div>
+          <div class="pw-shell__track">
+            <div class="pw-shell__track-fill" [style.width.%]="s.progress * 100"></div>
           </div>
         </div>
-        <div class="pw-shell__track">
-          <div class="pw-shell__track-fill" [style.width.%]="s.progress * 100"></div>
-        </div>
-      </div>
+      </ng-template>
 
       <!-- Body — step content -->
       <div class="pw-shell__body">
@@ -218,33 +299,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         <li *ngFor="let msg of s.validationMessages" class="pw-shell__validation-item">{{ msg }}</li>
       </ul>
 
-      <!-- Footer — navigation buttons -->
-      <div class="pw-shell__footer">
-        <div class="pw-shell__footer-left">
-          <button
-            *ngIf="!s.isFirstStep"
-            type="button"
-            class="pw-shell__btn pw-shell__btn--back"
-            [disabled]="s.isNavigating || !s.canMovePrevious"
-            (click)="facade.previous()"
-          >{{ backLabel }}</button>
-        </div>
-        <div class="pw-shell__footer-right">
-          <button
-            *ngIf="!hideCancel"
-            type="button"
-            class="pw-shell__btn pw-shell__btn--cancel"
-            [disabled]="s.isNavigating"
-            (click)="facade.cancel()"
-          >{{ cancelLabel }}</button>
-          <button
-            type="button"
-            class="pw-shell__btn pw-shell__btn--next"
-            [disabled]="s.isNavigating || !s.canMoveNext"
-            (click)="facade.next()"
-          >{{ s.isLastStep ? finishLabel : nextLabel }}</button>
+      <!-- Footer — custom or default navigation buttons -->
+      <ng-container *ngIf="customFooter; else defaultFooter">
+        <ng-container *ngTemplateOutlet="customFooter.templateRef; context: { $implicit: s, actions: shellActions }"></ng-container>
+      </ng-container>
+      <ng-template #defaultFooter>
+        <div class="pw-shell__footer">
+          <div class="pw-shell__footer-left">
+            <button
+              *ngIf="!s.isFirstStep"
+              type="button"
+              class="pw-shell__btn pw-shell__btn--back"
+              [disabled]="s.isNavigating || !s.canMovePrevious"
+              (click)="facade.previous()"
+            >{{ backLabel }}</button>
+          </div>
+          <div class="pw-shell__footer-right">
+            <button
+              *ngIf="!hideCancel"
+              type="button"
+              class="pw-shell__btn pw-shell__btn--cancel"
+              [disabled]="s.isNavigating"
+              (click)="facade.cancel()"
+            >{{ cancelLabel }}</button>
+            <button
+              type="button"
+              class="pw-shell__btn pw-shell__btn--next"
+              [disabled]="s.isNavigating || !s.canMoveNext"
+              (click)="facade.next()"
+            >{{ s.isLastStep ? finishLabel : nextLabel }}</button>
+          </div>
         </div>
-      </div>
+      </ng-template>
     </div>
   `
                 }]
@@ -276,5 +362,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], stepDirectives: [{
                 type: ContentChildren,
                 args: [PathStepDirective]
+            }], customHeader: [{
+                type: ContentChild,
+                args: [PathShellHeaderDirective]
+            }], customFooter: [{
+                type: ContentChild,
+                args: [PathShellFooterDirective]
             }] } });
 //# sourceMappingURL=shell.js.map

package/dist/shell.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daltonr/pathwrite-angular",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "description": "Angular adapter for @daltonr/pathwrite-core — RxJS observables, signal-friendly, with optional <pw-shell> default UI.",
@@ -60,7 +60,7 @@
     "@angular/compiler-cli": "^17.0.0"
   },
   "dependencies": {
-    "@daltonr/pathwrite-core": "^0.2.1"
+    "@daltonr/pathwrite-core": "^0.4.0"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -58,8 +58,18 @@ export class PathFacade<TData extends PathData = PathData> implements OnDestroy
     return this.engine.start(path, initialData);
   }
 
-  public startSubPath(path: PathDefinition<any>, initialData: PathData = {}): Promise<void> {
-    return this.engine.startSubPath(path, initialData);
+  /**
+   * Tears down any active path (without firing lifecycle hooks) and immediately
+   * starts the given path fresh. Safe to call whether or not a path is running.
+   * Use for "Start over" / retry flows without destroying and re-creating the
+   * component that provides this facade.
+   */
+  public restart(path: PathDefinition<any>, initialData: PathData = {}): Promise<void> {
+    return this.engine.restart(path, initialData);
+  }
+
+  public startSubPath(path: PathDefinition<any>, initialData: PathData = {}, meta?: Record<string, unknown>): Promise<void> {
+    return this.engine.startSubPath(path, initialData, meta);
   }
 
   public next(): Promise<void> {
@@ -162,3 +172,15 @@ export function syncFormGroup<TData extends PathData = PathData>(
   destroyRef?.onDestroy(cleanup);
   return cleanup;
 }
+
+// Re-export core types for convenience (users don't need to import from @daltonr/pathwrite-core)
+export type {
+  PathData,
+  PathDefinition,
+  PathEvent,
+  PathSnapshot,
+  PathStep,
+  PathStepContext,
+  SerializedPathState
+} from "@daltonr/pathwrite-core";
+

package/src/shell.ts

@@ -5,6 +5,7 @@ import {
   Input,
   Output,
   EventEmitter,
+  ContentChild,
   ContentChildren,
   QueryList,
   OnInit,
@@ -19,10 +20,31 @@ import { takeUntil } from "rxjs/operators";
 import {
   PathData,
   PathDefinition,
-  PathEvent
+  PathEvent,
+  PathSnapshot
 } from "@daltonr/pathwrite-core";
 import { PathFacade } from "./index";
 
+// ---------------------------------------------------------------------------
+// PathShellActions
+// ---------------------------------------------------------------------------
+
+/**
+ * Navigation actions passed as template context to custom `pwShellFooter`
+ * templates. Mirrors what React's `renderFooter` and Vue's `#footer` slot
+ * receive, using promises so it is consistent with the Angular facade.
+ */
+export interface PathShellActions {
+  next: () => Promise<void>;
+  previous: () => Promise<void>;
+  cancel: () => Promise<void>;
+  goToStep: (stepId: string) => Promise<void>;
+  goToStepChecked: (stepId: string) => Promise<void>;
+  setData: (key: string, value: unknown) => Promise<void>;
+  /** Restart the shell's current path with its current `initialData`. */
+  restart: () => Promise<void>;
+}
+
 // ---------------------------------------------------------------------------
 // PathStepDirective
 // ---------------------------------------------------------------------------
@@ -44,6 +66,56 @@ export class PathStepDirective {
   public constructor(public readonly templateRef: TemplateRef<unknown>) {}
 }
 
+// ---------------------------------------------------------------------------
+// PathShellHeaderDirective
+// ---------------------------------------------------------------------------
+
+/**
+ * Replaces the default progress header inside `<pw-shell>`.
+ * The template receives the current `PathSnapshot` as the implicit context.
+ *
+ * ```html
+ * <pw-shell [path]="myPath">
+ *   <ng-template pwShellHeader let-s>
+ *     <my-custom-progress [snapshot]="s" />
+ *   </ng-template>
+ *   <ng-template pwStep="details"><app-details-form /></ng-template>
+ * </pw-shell>
+ * ```
+ */
+@Directive({ selector: "[pwShellHeader]", standalone: true })
+export class PathShellHeaderDirective {
+  public constructor(
+    public readonly templateRef: TemplateRef<{ $implicit: PathSnapshot }>
+  ) {}
+}
+
+// ---------------------------------------------------------------------------
+// PathShellFooterDirective
+// ---------------------------------------------------------------------------
+
+/**
+ * Replaces the default navigation footer inside `<pw-shell>`.
+ * The template receives the current `PathSnapshot` as the implicit context
+ * and a `actions` variable containing all navigation actions.
+ *
+ * ```html
+ * <pw-shell [path]="myPath">
+ *   <ng-template pwShellFooter let-s let-actions="actions">
+ *     <button (click)="actions.previous()" [disabled]="s.isFirstStep">Back</button>
+ *     <button (click)="actions.next()" [disabled]="!s.canMoveNext">Next</button>
+ *   </ng-template>
+ *   <ng-template pwStep="details"><app-details-form /></ng-template>
+ * </pw-shell>
+ * ```
+ */
+@Directive({ selector: "[pwShellFooter]", standalone: true })
+export class PathShellFooterDirective {
+  public constructor(
+    public readonly templateRef: TemplateRef<{ $implicit: PathSnapshot; actions: PathShellActions }>
+  ) {}
+}
+
 // ---------------------------------------------------------------------------
 // PathShellComponent
 // ---------------------------------------------------------------------------
@@ -76,22 +148,27 @@ export class PathStepDirective {
 
     <!-- Active path -->
     <div class="pw-shell" *ngIf="facade.state$ | async as s">
-      <!-- Header — progress indicator -->
-      <div class="pw-shell__header" *ngIf="!hideProgress">
-        <div class="pw-shell__steps">
-          <div
-            *ngFor="let step of s.steps; let i = index"
-            class="pw-shell__step"
-            [ngClass]="'pw-shell__step--' + step.status"
-          >
-            <span class="pw-shell__step-dot">{{ step.status === 'completed' ? '✓' : (i + 1) }}</span>
-            <span class="pw-shell__step-label">{{ step.title ?? step.id }}</span>
+      <!-- Header — custom or default progress indicator -->
+      <ng-container *ngIf="customHeader; else defaultHeader">
+        <ng-container *ngTemplateOutlet="customHeader.templateRef; context: { $implicit: s }"></ng-container>
+      </ng-container>
+      <ng-template #defaultHeader>
+        <div class="pw-shell__header" *ngIf="!hideProgress">
+          <div class="pw-shell__steps">
+            <div
+              *ngFor="let step of s.steps; let i = index"
+              class="pw-shell__step"
+              [ngClass]="'pw-shell__step--' + step.status"
+            >
+              <span class="pw-shell__step-dot">{{ step.status === 'completed' ? '✓' : (i + 1) }}</span>
+              <span class="pw-shell__step-label">{{ step.title ?? step.id }}</span>
+            </div>
+          </div>
+          <div class="pw-shell__track">
+            <div class="pw-shell__track-fill" [style.width.%]="s.progress * 100"></div>
           </div>
         </div>
-        <div class="pw-shell__track">
-          <div class="pw-shell__track-fill" [style.width.%]="s.progress * 100"></div>
-        </div>
-      </div>
+      </ng-template>
 
       <!-- Body — step content -->
       <div class="pw-shell__body">
@@ -107,33 +184,38 @@ export class PathStepDirective {
         <li *ngFor="let msg of s.validationMessages" class="pw-shell__validation-item">{{ msg }}</li>
       </ul>
 
-      <!-- Footer — navigation buttons -->
-      <div class="pw-shell__footer">
-        <div class="pw-shell__footer-left">
-          <button
-            *ngIf="!s.isFirstStep"
-            type="button"
-            class="pw-shell__btn pw-shell__btn--back"
-            [disabled]="s.isNavigating || !s.canMovePrevious"
-            (click)="facade.previous()"
-          >{{ backLabel }}</button>
-        </div>
-        <div class="pw-shell__footer-right">
-          <button
-            *ngIf="!hideCancel"
-            type="button"
-            class="pw-shell__btn pw-shell__btn--cancel"
-            [disabled]="s.isNavigating"
-            (click)="facade.cancel()"
-          >{{ cancelLabel }}</button>
-          <button
-            type="button"
-            class="pw-shell__btn pw-shell__btn--next"
-            [disabled]="s.isNavigating || !s.canMoveNext"
-            (click)="facade.next()"
-          >{{ s.isLastStep ? finishLabel : nextLabel }}</button>
+      <!-- Footer — custom or default navigation buttons -->
+      <ng-container *ngIf="customFooter; else defaultFooter">
+        <ng-container *ngTemplateOutlet="customFooter.templateRef; context: { $implicit: s, actions: shellActions }"></ng-container>
+      </ng-container>
+      <ng-template #defaultFooter>
+        <div class="pw-shell__footer">
+          <div class="pw-shell__footer-left">
+            <button
+              *ngIf="!s.isFirstStep"
+              type="button"
+              class="pw-shell__btn pw-shell__btn--back"
+              [disabled]="s.isNavigating || !s.canMovePrevious"
+              (click)="facade.previous()"
+            >{{ backLabel }}</button>
+          </div>
+          <div class="pw-shell__footer-right">
+            <button
+              *ngIf="!hideCancel"
+              type="button"
+              class="pw-shell__btn pw-shell__btn--cancel"
+              [disabled]="s.isNavigating"
+              (click)="facade.cancel()"
+            >{{ cancelLabel }}</button>
+            <button
+              type="button"
+              class="pw-shell__btn pw-shell__btn--next"
+              [disabled]="s.isNavigating || !s.canMoveNext"
+              (click)="facade.next()"
+            >{{ s.isLastStep ? finishLabel : nextLabel }}</button>
+          </div>
         </div>
-      </div>
+      </ng-template>
     </div>
   `
 })
@@ -162,6 +244,8 @@ export class PathShellComponent implements OnInit, OnDestroy {
   @Output() pathEvent = new EventEmitter<PathEvent>();
 
   @ContentChildren(PathStepDirective) stepDirectives!: QueryList<PathStepDirective>;
+  @ContentChild(PathShellHeaderDirective) customHeader?: PathShellHeaderDirective;
+  @ContentChild(PathShellFooterDirective) customFooter?: PathShellFooterDirective;
 
   public readonly facade = inject(PathFacade);
   /** The shell's own component-level injector. Passed to ngTemplateOutlet so that
@@ -169,6 +253,17 @@ export class PathShellComponent implements OnInit, OnDestroy {
   protected readonly shellInjector = inject(Injector);
   public started = false;
 
+  /** Navigation actions passed to custom `pwShellFooter` templates. */
+  protected readonly shellActions: PathShellActions = {
+    next: () => this.facade.next(),
+    previous: () => this.facade.previous(),
+    cancel: () => this.facade.cancel(),
+    goToStep: (id) => this.facade.goToStep(id),
+    goToStepChecked: (id) => this.facade.goToStepChecked(id),
+    setData: (key, value) => this.facade.setData(key, value as never),
+    restart: () => this.facade.restart(this.path, this.initialData),
+  };
+
   private readonly destroy$ = new Subject<void>();
 
   public ngOnInit(): void {
@@ -193,5 +288,3 @@ export class PathShellComponent implements OnInit, OnDestroy {
     this.facade.start(this.path, this.initialData);
   }
 }
-
-