@daltonr/pathwrite-angular 0.4.0 → 0.6.0

package/dist/shell.d.ts

@@ -108,13 +108,20 @@ export declare class PathShellComponent implements OnInit, OnDestroy {
     /** Label for the Next navigation button. */
     nextLabel: string;
     /** Label for the Next button when on the last step. */
-    finishLabel: string;
+    completeLabel: string;
     /** Label for the Cancel button. */
     cancelLabel: string;
     /** Hide the Cancel button entirely. */
     hideCancel: boolean;
-    /** Hide the step progress indicator in the header. */
+    /** Hide the step progress indicator in the header. Also hidden automatically when the path has only one step. */
     hideProgress: boolean;
+    /**
+     * Footer layout mode:
+     * - "auto" (default): Uses "form" for single-step top-level paths, "wizard" otherwise.
+     * - "wizard": Back button on left, Cancel and Submit together on right.
+     * - "form": Cancel on left, Submit alone on right. Back button never shown.
+     */
+    footerLayout: "wizard" | "form" | "auto";
     completed: EventEmitter<PathData>;
     cancelled: EventEmitter<PathData>;
     pathEvent: EventEmitter<PathEvent>;
@@ -132,6 +139,23 @@ export declare class PathShellComponent implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     doStart(): void;
+    /**
+     * Restart the active path from step 1 with the original `initialData`,
+     * without unmounting the shell. Call this via a `#shell` template reference:
+     *
+     * ```html
+     * <pw-shell #shell [path]="myPath" ...></pw-shell>
+     * <button (click)="shell.restart()">Try Again</button>
+     * ```
+     */
+    restart(): Promise<void>;
+    /** Returns Object.entries(s.fieldMessages) for use in *ngFor. */
+    protected fieldEntries(s: PathSnapshot): [string, string][];
+    /** Resolves "auto" footerLayout based on snapshot. Single-step top-level → "form", otherwise → "wizard". */
+    protected getResolvedFooterLayout(s: PathSnapshot): "wizard" | "form";
+    /** Converts a camelCase or lowercase field key to a display label.
+     *  e.g. "firstName" → "First Name", "email" → "Email" */
+    protected formatFieldKey(key: string): string;
     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"; }, ["customHeader", "customFooter", "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; }; "completeLabel": { "alias": "completeLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "hideCancel": { "alias": "hideCancel"; "required": false; }; "hideProgress": { "alias": "hideProgress"; "required": false; }; "footerLayout": { "alias": "footerLayout"; "required": false; }; }, { "completed": "completed"; "cancelled": "cancelled"; "pathEvent": "pathEvent"; }, ["customHeader", "customFooter", "stepDirectives"], never, true, never>;
 }

package/dist/shell.js

@@ -110,17 +110,24 @@ export class PathShellComponent {
         /** Start the path automatically on ngOnInit. Set to false to call doStart() manually. */
         this.autoStart = true;
         /** Label for the Back navigation button. */
-        this.backLabel = "Back";
+        this.backLabel = "Previous";
         /** Label for the Next navigation button. */
         this.nextLabel = "Next";
         /** Label for the Next button when on the last step. */
-        this.finishLabel = "Finish";
+        this.completeLabel = "Complete";
         /** Label for the Cancel button. */
         this.cancelLabel = "Cancel";
         /** Hide the Cancel button entirely. */
         this.hideCancel = false;
-        /** Hide the step progress indicator in the header. */
+        /** Hide the step progress indicator in the header. Also hidden automatically when the path has only one step. */
         this.hideProgress = false;
+        /**
+         * Footer layout mode:
+         * - "auto" (default): Uses "form" for single-step top-level paths, "wizard" otherwise.
+         * - "wizard": Back button on left, Cancel and Submit together on right.
+         * - "form": Cancel on left, Submit alone on right. Back button never shown.
+         */
+        this.footerLayout = "auto";
         this.completed = new EventEmitter();
         this.cancelled = new EventEmitter();
         this.pathEvent = new EventEmitter();
@@ -161,8 +168,35 @@ export class PathShellComponent {
         this.started = true;
         this.facade.start(this.path, this.initialData);
     }
+    /**
+     * Restart the active path from step 1 with the original `initialData`,
+     * without unmounting the shell. Call this via a `#shell` template reference:
+     *
+     * ```html
+     * <pw-shell #shell [path]="myPath" ...></pw-shell>
+     * <button (click)="shell.restart()">Try Again</button>
+     * ```
+     */
+    restart() {
+        return this.facade.restart(this.path, this.initialData);
+    }
+    /** Returns Object.entries(s.fieldMessages) for use in *ngFor. */
+    fieldEntries(s) {
+        return Object.entries(s.fieldMessages);
+    }
+    /** Resolves "auto" footerLayout based on snapshot. Single-step top-level → "form", otherwise → "wizard". */
+    getResolvedFooterLayout(s) {
+        return this.footerLayout === "auto"
+            ? (s.stepCount === 1 && s.nestingLevel === 0 ? "form" : "wizard")
+            : this.footerLayout;
+    }
+    /** Converts a camelCase or lowercase field key to a display label.
+     *  e.g. "firstName" → "First Name", "email" → "Email" */
+    formatFieldKey(key) {
+        return key.replace(/([A-Z])/g, " $1").replace(/^./, c => c.toUpperCase()).trim();
+    }
     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: "customHeader", first: true, predicate: PathShellHeaderDirective, descendants: true }, { propertyName: "customFooter", first: true, predicate: PathShellFooterDirective, descendants: true }, { 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", completeLabel: "completeLabel", cancelLabel: "cancelLabel", hideCancel: "hideCancel", hideProgress: "hideProgress", footerLayout: "footerLayout" }, 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">
@@ -178,7 +212,7 @@ export class PathShellComponent {
         <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__header" *ngIf="!hideProgress && (s.stepCount > 1 || s.nestingLevel > 0)">
           <div class="pw-shell__steps">
             <div
               *ngFor="let step of s.steps; let i = index"
@@ -204,9 +238,11 @@ export class PathShellComponent {
         </ng-container>
       </div>
 
-      <!-- Validation messages -->
-      <ul class="pw-shell__validation" *ngIf="s.validationMessages.length > 0">
-        <li *ngFor="let msg of s.validationMessages" class="pw-shell__validation-item">{{ msg }}</li>
+      <!-- Validation messages — labeled by field name -->
+      <ul class="pw-shell__validation" *ngIf="s.hasAttemptedNext && fieldEntries(s).length > 0">
+        <li *ngFor="let entry of fieldEntries(s)" class="pw-shell__validation-item">
+          <span *ngIf="entry[0] !== '_'" class="pw-shell__validation-label">{{ formatFieldKey(entry[0]) }}</span>{{ entry[1] }}
+        </li>
       </ul>
 
       <!-- Footer — custom or default navigation buttons -->
@@ -216,8 +252,17 @@ export class PathShellComponent {
       <ng-template #defaultFooter>
         <div class="pw-shell__footer">
           <div class="pw-shell__footer-left">
+            <!-- Form mode: Cancel on the left -->
+            <button
+              *ngIf="getResolvedFooterLayout(s) === 'form' && !hideCancel"
+              type="button"
+              class="pw-shell__btn pw-shell__btn--cancel"
+              [disabled]="s.isNavigating"
+              (click)="facade.cancel()"
+            >{{ cancelLabel }}</button>
+            <!-- Wizard mode: Back on the left -->
             <button
-              *ngIf="!s.isFirstStep"
+              *ngIf="getResolvedFooterLayout(s) === 'wizard' && !s.isFirstStep"
               type="button"
               class="pw-shell__btn pw-shell__btn--back"
               [disabled]="s.isNavigating || !s.canMovePrevious"
@@ -225,19 +270,21 @@ export class PathShellComponent {
             >{{ backLabel }}</button>
           </div>
           <div class="pw-shell__footer-right">
+            <!-- Wizard mode: Cancel on the right -->
             <button
-              *ngIf="!hideCancel"
+              *ngIf="getResolvedFooterLayout(s) === 'wizard' && !hideCancel"
               type="button"
               class="pw-shell__btn pw-shell__btn--cancel"
               [disabled]="s.isNavigating"
               (click)="facade.cancel()"
             >{{ cancelLabel }}</button>
+            <!-- Both modes: Submit on the right -->
             <button
               type="button"
               class="pw-shell__btn pw-shell__btn--next"
-              [disabled]="s.isNavigating || !s.canMoveNext"
+              [disabled]="s.isNavigating"
               (click)="facade.next()"
-            >{{ s.isLastStep ? finishLabel : nextLabel }}</button>
+            >{{ s.isLastStep ? completeLabel : nextLabel }}</button>
           </div>
         </div>
       </ng-template>
@@ -268,7 +315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         <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__header" *ngIf="!hideProgress && (s.stepCount > 1 || s.nestingLevel > 0)">
           <div class="pw-shell__steps">
             <div
               *ngFor="let step of s.steps; let i = index"
@@ -294,9 +341,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         </ng-container>
       </div>
 
-      <!-- Validation messages -->
-      <ul class="pw-shell__validation" *ngIf="s.validationMessages.length > 0">
-        <li *ngFor="let msg of s.validationMessages" class="pw-shell__validation-item">{{ msg }}</li>
+      <!-- Validation messages — labeled by field name -->
+      <ul class="pw-shell__validation" *ngIf="s.hasAttemptedNext && fieldEntries(s).length > 0">
+        <li *ngFor="let entry of fieldEntries(s)" class="pw-shell__validation-item">
+          <span *ngIf="entry[0] !== '_'" class="pw-shell__validation-label">{{ formatFieldKey(entry[0]) }}</span>{{ entry[1] }}
+        </li>
       </ul>
 
       <!-- Footer — custom or default navigation buttons -->
@@ -306,8 +355,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <ng-template #defaultFooter>
         <div class="pw-shell__footer">
           <div class="pw-shell__footer-left">
+            <!-- Form mode: Cancel on the left -->
             <button
-              *ngIf="!s.isFirstStep"
+              *ngIf="getResolvedFooterLayout(s) === 'form' && !hideCancel"
+              type="button"
+              class="pw-shell__btn pw-shell__btn--cancel"
+              [disabled]="s.isNavigating"
+              (click)="facade.cancel()"
+            >{{ cancelLabel }}</button>
+            <!-- Wizard mode: Back on the left -->
+            <button
+              *ngIf="getResolvedFooterLayout(s) === 'wizard' && !s.isFirstStep"
               type="button"
               class="pw-shell__btn pw-shell__btn--back"
               [disabled]="s.isNavigating || !s.canMovePrevious"
@@ -315,19 +373,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             >{{ backLabel }}</button>
           </div>
           <div class="pw-shell__footer-right">
+            <!-- Wizard mode: Cancel on the right -->
             <button
-              *ngIf="!hideCancel"
+              *ngIf="getResolvedFooterLayout(s) === 'wizard' && !hideCancel"
               type="button"
               class="pw-shell__btn pw-shell__btn--cancel"
               [disabled]="s.isNavigating"
               (click)="facade.cancel()"
             >{{ cancelLabel }}</button>
+            <!-- Both modes: Submit on the right -->
             <button
               type="button"
               class="pw-shell__btn pw-shell__btn--next"
-              [disabled]="s.isNavigating || !s.canMoveNext"
+              [disabled]="s.isNavigating"
               (click)="facade.next()"
-            >{{ s.isLastStep ? finishLabel : nextLabel }}</button>
+            >{{ s.isLastStep ? completeLabel : nextLabel }}</button>
           </div>
         </div>
       </ng-template>
@@ -345,7 +405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], nextLabel: [{
                 type: Input
-            }], finishLabel: [{
+            }], completeLabel: [{
                 type: Input
             }], cancelLabel: [{
                 type: Input
@@ -353,6 +413,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], hideProgress: [{
                 type: Input
+            }], footerLayout: [{
+                type: Input
             }], completed: [{
                 type: Output
             }], cancelled: [{

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.4.0",
+  "version": "0.6.0",
   "type": "module",
   "license": "MIT",
   "description": "Angular adapter for @daltonr/pathwrite-core — RxJS observables, signal-friendly, with optional <pw-shell> default UI.",
@@ -29,7 +29,8 @@
       "types": "./dist/shell.d.ts",
       "import": "./dist/shell.js"
     },
-    "./styles.css": "./dist/index.css"
+    "./styles.css": "./dist/index.css",
+    "./dist/index.css": "./dist/index.css"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -60,7 +61,7 @@
     "@angular/compiler-cli": "^17.0.0"
   },
   "dependencies": {
-    "@daltonr/pathwrite-core": "^0.4.0"
+    "@daltonr/pathwrite-core": "^0.6.0"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -1,4 +1,4 @@
-import { Injectable, OnDestroy, DestroyRef, signal, Signal } from "@angular/core";
+import { Injectable, OnDestroy, DestroyRef, signal, Signal, inject } from "@angular/core";
 import { BehaviorSubject, Observable, Subject } from "rxjs";
 import {
   PathData,
@@ -24,10 +24,10 @@ import {
  */
 @Injectable()
 export class PathFacade<TData extends PathData = PathData> implements OnDestroy {
-  private readonly engine = new PathEngine();
+  private _engine = new PathEngine();
   private readonly _state$ = new BehaviorSubject<PathSnapshot<TData> | null>(null);
   private readonly _events$ = new Subject<PathEvent>();
-  private readonly unsubscribeFromEngine: () => void;
+  private _unsubscribeFromEngine: () => void = () => {};
   private readonly _stateSignal = signal<PathSnapshot<TData> | null>(null);
 
   public readonly state$: Observable<PathSnapshot<TData> | null> = this._state$.asObservable();
@@ -36,7 +36,37 @@ export class PathFacade<TData extends PathData = PathData> implements OnDestroy
   public readonly stateSignal: Signal<PathSnapshot<TData> | null> = this._stateSignal.asReadonly();
 
   public constructor() {
-    this.unsubscribeFromEngine = this.engine.subscribe((event) => {
+    this.connectEngine(this._engine);
+  }
+
+  /**
+   * Adopt an externally-managed `PathEngine` — for example, the engine returned
+   * by `restoreOrStart()` from `@daltonr/pathwrite-store-http`.
+   *
+   * The facade immediately reflects the engine's current state and forwards all
+   * subsequent events. The **caller** is responsible for the engine's lifecycle
+   * (starting, cleanup); the facade only subscribes to it.
+   *
+   * ```typescript
+   * const { engine } = await restoreOrStart({ store, key, path, initialData, observers: [...] });
+   * facade.adoptEngine(engine);
+   * ```
+   */
+  public adoptEngine(engine: PathEngine): void {
+    // Disconnect from whatever engine we're currently listening to
+    this._unsubscribeFromEngine();
+    this._engine = engine;
+    this.connectEngine(engine);
+  }
+
+  private connectEngine(engine: PathEngine): void {
+    // Seed state immediately — critical when restoring a persisted path since
+    // the engine is already running before the facade connects to it.
+    const current = engine.snapshot() as PathSnapshot<TData> | null;
+    this._state$.next(current);
+    this._stateSignal.set(current);
+
+    this._unsubscribeFromEngine = engine.subscribe((event) => {
       this._events$.next(event);
       if (event.type === "stateChanged" || event.type === "resumed") {
         this._state$.next(event.snapshot as PathSnapshot<TData>);
@@ -49,13 +79,13 @@ export class PathFacade<TData extends PathData = PathData> implements OnDestroy
   }
 
   public ngOnDestroy(): void {
-    this.unsubscribeFromEngine();
+    this._unsubscribeFromEngine();
     this._events$.complete();
     this._state$.complete();
   }
 
   public start(path: PathDefinition<any>, initialData: PathData = {}): Promise<void> {
-    return this.engine.start(path, initialData);
+    return this._engine.start(path, initialData);
   }
 
   /**
@@ -65,38 +95,38 @@ export class PathFacade<TData extends PathData = PathData> implements OnDestroy
    * component that provides this facade.
    */
   public restart(path: PathDefinition<any>, initialData: PathData = {}): Promise<void> {
-    return this.engine.restart(path, initialData);
+    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);
+    return this._engine.startSubPath(path, initialData, meta);
   }
 
   public next(): Promise<void> {
-    return this.engine.next();
+    return this._engine.next();
   }
 
   public previous(): Promise<void> {
-    return this.engine.previous();
+    return this._engine.previous();
   }
 
   public cancel(): Promise<void> {
-    return this.engine.cancel();
+    return this._engine.cancel();
   }
 
   public setData<K extends string & keyof TData>(key: K, value: TData[K]): Promise<void> {
-    return this.engine.setData(key, value as unknown);
+    return this._engine.setData(key, value as unknown);
   }
 
   public goToStep(stepId: string): Promise<void> {
-    return this.engine.goToStep(stepId);
+    return this._engine.goToStep(stepId);
   }
 
   /** Jump to a step by ID, checking the current step's canMoveNext (forward) or
    *  canMovePrevious (backward) guard first. Navigation is blocked if the guard
    *  returns false. Throws if the step ID does not exist. */
   public goToStepChecked(stepId: string): Promise<void> {
-    return this.engine.goToStepChecked(stepId);
+    return this._engine.goToStepChecked(stepId);
   }
 
   public snapshot(): PathSnapshot<TData> | null {
@@ -104,6 +134,101 @@ export class PathFacade<TData extends PathData = PathData> implements OnDestroy
   }
 }
 
+// ---------------------------------------------------------------------------
+// injectPath() - Signal-based path access
+// ---------------------------------------------------------------------------
+
+/**
+ * Return type of `injectPath()`. Provides signal-based reactive access to the
+ * path state and strongly-typed navigation actions. Mirrors React's `usePathContext()`
+ * return type for consistency across adapters.
+ */
+export interface InjectPathReturn<TData extends PathData = PathData> {
+  /** Current path snapshot as a signal. Returns `null` when no path is active. */
+  snapshot: Signal<PathSnapshot<TData> | null>;
+  /** Start (or restart) a path. */
+  start: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
+  /** Push a sub-path onto the stack. */
+  startSubPath: (path: PathDefinition<any>, 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. */
+  previous: () => Promise<void>;
+  /** Cancel the active path (or sub-path). */
+  cancel: () => Promise<void>;
+  /** Update a single data field. */
+  setData: <K extends string & keyof TData>(key: K, value: TData[K]) => Promise<void>;
+  /** Jump to a step by ID without checking guards. */
+  goToStep: (stepId: string) => Promise<void>;
+  /** Jump to a step by ID, checking guards first. */
+  goToStepChecked: (stepId: string) => Promise<void>;
+  /**
+   * Tears down any active path and immediately starts the given path fresh.
+   * Use for "Start over" / retry flows.
+   */
+  restart: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
+}
+
+/**
+ * Inject a PathFacade and return a signal-based API for use in Angular components.
+ * Requires `PathFacade` to be provided in the component's injector tree (either via
+ * `providers: [PathFacade]` in the component or a parent component).
+ *
+ * **This is the recommended way to consume Pathwrite in Angular components** — it
+ * provides the same ergonomic, framework-native API that React's `usePathContext()`
+ * and Vue's `usePath()` offer. No template references or manual facade injection needed.
+ *
+ * The optional generic `TData` narrows `snapshot().data` and `setData()` to your
+ * data shape. It is a **type-level assertion**, not a runtime guarantee.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'app-contact-step',
+ *   standalone: true,
+ *   providers: [PathFacade],  // ← Provide at this component or a parent
+ *   template: `
+ *     @if (path.snapshot(); as s) {
+ *       <div>Step: {{ s.activeStep?.title }}</div>
+ *       <button (click)="path.next()">Next</button>
+ *     }
+ *   `
+ * })
+ * export class ContactStepComponent {
+ *   protected readonly path = injectPath<ContactData>();
+ *
+ *   updateName(name: string) {
+ *     this.path.setData('name', name);
+ *   }
+ * }
+ * ```
+ *
+ * @throws Error if PathFacade is not provided in the injector tree
+ */
+export function injectPath<TData extends PathData = PathData>(): InjectPathReturn<TData> {
+  const facade = inject(PathFacade, { optional: true }) as PathFacade<TData> | null;
+  
+  if (!facade) {
+    throw new Error(
+      "injectPath() requires PathFacade to be provided. " +
+      "Add 'providers: [PathFacade]' to your component or a parent component."
+    );
+  }
+
+  return {
+    snapshot: facade.stateSignal,
+    start: (path, initialData = {}) => facade.start(path, initialData),
+    startSubPath: (path, initialData = {}, meta) => facade.startSubPath(path, initialData, meta),
+    next: () => facade.next(),
+    previous: () => facade.previous(),
+    cancel: () => facade.cancel(),
+    setData: (key, value) => facade.setData(key, value),
+    goToStep: (stepId) => facade.goToStep(stepId),
+    goToStepChecked: (stepId) => facade.goToStepChecked(stepId),
+    restart: (path, initialData = {}) => facade.restart(path, initialData),
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Forms integration
 // ---------------------------------------------------------------------------
@@ -176,6 +301,7 @@ export function syncFormGroup<TData extends PathData = PathData>(
 // Re-export core types for convenience (users don't need to import from @daltonr/pathwrite-core)
 export type {
   PathData,
+  FieldErrors,
   PathDefinition,
   PathEvent,
   PathSnapshot,
@@ -184,3 +310,5 @@ export type {
   SerializedPathState
 } from "@daltonr/pathwrite-core";
 
+export { PathEngine } from "@daltonr/pathwrite-core";
+