@daltonr/pathwrite-svelte 0.5.0

package/dist/index.css

@@ -0,0 +1,272 @@
+/*
+ * Pathwrite — Default Shell Stylesheet
+ *
+ * Optional CSS for the <PathShell> / <pw-shell> default UI components.
+ * Import this file if you want sensible out-of-the-box styling.
+ * Every visual value is a CSS custom property (--pw-*) so you can
+ * theme the shell without overriding selectors.
+ *
+ * Usage (React / Vue):
+ *   import "adapter-package/styles.css";
+ *
+ * Usage (Angular) — add to the styles array in angular.json:
+ *   "node_modules/@daltonr/pathwrite-angular/dist/index.css"
+ */
+
+/* ------------------------------------------------------------------ */
+/* Custom property defaults                                           */
+/* ------------------------------------------------------------------ */
+:root {
+  /* Layout */
+  --pw-shell-max-width: 720px;
+  --pw-shell-padding: 24px;
+  --pw-shell-gap: 20px;
+  --pw-shell-radius: 10px;
+
+  /* Colours */
+  --pw-color-bg: #ffffff;
+  --pw-color-border: #dbe4f0;
+  --pw-color-text: #1f2937;
+  --pw-color-muted: #5b677a;
+  --pw-color-primary: #2563eb;
+  --pw-color-primary-light: rgba(37, 99, 235, 0.12);
+  --pw-color-btn-bg: #f8fbff;
+  --pw-color-btn-border: #c2d0e5;
+
+  /* Progress */
+  --pw-dot-size: 32px;
+  --pw-dot-font-size: 13px;
+  --pw-track-height: 4px;
+
+  /* Buttons */
+  --pw-btn-padding: 8px 16px;
+  --pw-btn-radius: 6px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Shell root                                                         */
+/* ------------------------------------------------------------------ */
+.pw-shell {
+  max-width: var(--pw-shell-max-width);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pw-shell-gap);
+  padding: var(--pw-shell-padding);
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color: var(--pw-color-text);
+}
+
+/* ------------------------------------------------------------------ */
+/* Empty state                                                        */
+/* ------------------------------------------------------------------ */
+.pw-shell__empty {
+  text-align: center;
+  padding: 32px 16px;
+  color: var(--pw-color-muted);
+}
+
+.pw-shell__start-btn {
+  margin-top: 12px;
+  border: 1px solid var(--pw-color-btn-border);
+  background: var(--pw-color-btn-bg);
+  color: var(--pw-color-text);
+  padding: var(--pw-btn-padding);
+  border-radius: var(--pw-btn-radius);
+  cursor: pointer;
+  font-size: 14px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Header — progress indicator                                        */
+/* ------------------------------------------------------------------ */
+.pw-shell__header {
+  background: var(--pw-color-bg);
+  border: 1px solid var(--pw-color-border);
+  border-radius: var(--pw-shell-radius);
+  padding: 20px 24px 16px;
+}
+
+.pw-shell__steps {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.pw-shell__step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+}
+
+.pw-shell__step-dot {
+  width: var(--pw-dot-size);
+  height: var(--pw-dot-size);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--pw-dot-font-size);
+  font-weight: 600;
+  border: 2px solid var(--pw-color-border);
+  background: var(--pw-color-bg);
+  color: var(--pw-color-muted);
+  transition: all 0.25s ease;
+}
+
+.pw-shell__step--completed .pw-shell__step-dot {
+  background: var(--pw-color-primary);
+  border-color: var(--pw-color-primary);
+  color: #fff;
+}
+
+.pw-shell__step--current .pw-shell__step-dot {
+  border-color: var(--pw-color-primary);
+  color: var(--pw-color-primary);
+  box-shadow: 0 0 0 3px var(--pw-color-primary-light);
+}
+
+.pw-shell__step-label {
+  font-size: 12px;
+  color: var(--pw-color-muted);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.pw-shell__step--current .pw-shell__step-label {
+  color: var(--pw-color-primary);
+  font-weight: 600;
+}
+
+.pw-shell__step--completed .pw-shell__step-label {
+  color: var(--pw-color-text);
+}
+
+/* Track / fill */
+.pw-shell__track {
+  height: var(--pw-track-height);
+  background: var(--pw-color-border);
+  border-radius: calc(var(--pw-track-height) / 2);
+  overflow: hidden;
+}
+
+.pw-shell__track-fill {
+  height: 100%;
+  background: var(--pw-color-primary);
+  border-radius: calc(var(--pw-track-height) / 2);
+  transition: width 0.3s ease;
+}
+
+/* ------------------------------------------------------------------ */
+/* Body — step content                                                */
+/* ------------------------------------------------------------------ */
+.pw-shell__body {
+  background: var(--pw-color-bg);
+  border: 1px solid var(--pw-color-border);
+  border-radius: var(--pw-shell-radius);
+  padding: var(--pw-shell-padding);
+  min-height: 120px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Validation messages                                                */
+/* ------------------------------------------------------------------ */
+:root {
+  --pw-color-error: #dc2626;
+  --pw-color-error-bg: #fef2f2;
+  --pw-color-error-border: #fecaca;
+}
+
+.pw-shell__validation {
+  list-style: none;
+  margin: 0;
+  padding: 12px 16px;
+  background: var(--pw-color-error-bg);
+  border: 1px solid var(--pw-color-error-border);
+  border-radius: var(--pw-shell-radius);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pw-shell__validation-item {
+  font-size: 13px;
+  color: var(--pw-color-error);
+  padding-left: 16px;
+  position: relative;
+}
+
+.pw-shell__validation-item::before {
+  content: "•";
+  position: absolute;
+  left: 4px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Footer — navigation buttons                                        */
+/* ------------------------------------------------------------------ */
+.pw-shell__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pw-shell__footer-left,
+.pw-shell__footer-right {
+  display: flex;
+  gap: 8px;
+}
+
+.pw-shell__btn {
+  border: 1px solid var(--pw-color-btn-border);
+  background: var(--pw-color-btn-bg);
+  color: var(--pw-color-text);
+  padding: var(--pw-btn-padding);
+  border-radius: var(--pw-btn-radius);
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.pw-shell__btn:hover:not(:disabled) {
+  background: var(--pw-color-border);
+}
+
+.pw-shell__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pw-shell__btn--next {
+  background: var(--pw-color-primary);
+  border-color: var(--pw-color-primary);
+  color: #fff;
+}
+
+.pw-shell__btn--next:hover:not(:disabled) {
+  background: #1d4ed8;
+  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;
+  background: transparent;
+}
+
+.pw-shell__btn--cancel:hover:not(:disabled) {
+  background: var(--pw-color-primary-light);
+}
+

package/dist/index.svelte.d.ts

@@ -0,0 +1,130 @@
+import type { PathData, PathDefinition, PathEngine, PathEvent, PathSnapshot } from "@daltonr/pathwrite-core";
+export type { PathData, PathDefinition, PathEngine, PathEvent, PathSnapshot, PathStep, PathStepContext, SerializedPathState } from "@daltonr/pathwrite-core";
+export interface UsePathOptions {
+    /**
+     * An externally-managed `PathEngine` to subscribe to — for example, the engine
+     * returned by `restoreOrStart()` from `@daltonr/pathwrite-store-http`.
+     *
+     * When provided:
+     * - `usePath` will **not** create its own engine.
+     * - The snapshot is seeded immediately from the engine's current state.
+     * - The engine lifecycle (start / cleanup) is the **caller's responsibility**.
+     * - `PathShell` will skip its own `autoStart` call.
+     */
+    engine?: PathEngine;
+    /** Called for every engine event (stateChanged, completed, cancelled, resumed). */
+    onEvent?: (event: PathEvent) => void;
+}
+export interface UsePathReturn<TData extends PathData = PathData> {
+    /** Current path snapshot, or `null` when no path is active. Reactive via `$state`. */
+    readonly snapshot: PathSnapshot<TData> | null;
+    /** Start (or restart) a path. */
+    start: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
+    /** Push a sub-path onto the stack. Requires an active path. Pass an optional `meta` object for correlation — it is returned unchanged to the parent step's `onSubPathComplete` / `onSubPathCancel` hooks. */
+    startSubPath: (path: PathDefinition<any>, initialData?: PathData, meta?: Record<string, unknown>) => Promise<void>;
+    /** Advance one step. Completes the path on the last step. */
+    next: () => Promise<void>;
+    /** Go back one step. No-op when already on the first step of a top-level path. Pops back to the parent path when on the first step of a sub-path. */
+    previous: () => Promise<void>;
+    /** Cancel the active path (or sub-path). */
+    cancel: () => Promise<void>;
+    /** Jump directly to a step by ID. Calls onLeave / onEnter but bypasses guards and shouldSkip. */
+    goToStep: (stepId: string) => Promise<void>;
+    /** Jump directly 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. */
+    goToStepChecked: (stepId: string) => Promise<void>;
+    /** Update a single data value; triggers a re-render via stateChanged. When `TData` is specified, `key` and `value` are type-checked against your data shape. */
+    setData: <K extends string & keyof TData>(key: K, value: TData[K]) => Promise<void>;
+    /**
+     * Tear down any active path (without firing hooks) and immediately start the
+     * given path fresh. Safe to call whether or not a path is currently active.
+     * Use for "Start over" / retry flows without remounting the component.
+     */
+    restart: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
+}
+/**
+ * Create a Pathwrite engine with Svelte 5 runes-based reactivity.
+ * Call this from inside a Svelte component to get a reactive snapshot.
+ * Cleanup is automatic via onDestroy.
+ *
+ * **Note:** `snapshot` is a reactive getter — access it via the returned
+ * object (e.g. `path.snapshot`). Destructuring `snapshot` will lose reactivity.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { usePath } from '@daltonr/pathwrite-svelte';
+ *
+ *   const path = usePath();
+ *
+ *   onMount(() => {
+ *     path.start(myPath, { name: '' });
+ *   });
+ * </script>
+ *
+ * {#if path.snapshot}
+ *   <h2>{path.snapshot.stepId}</h2>
+ *   <button onclick={path.previous} disabled={path.snapshot.isFirstStep}>Previous</button>
+ *   <button onclick={path.next} disabled={!path.snapshot.canMoveNext}>Next</button>
+ * {/if}
+ * ```
+ */
+export declare function usePath<TData extends PathData = PathData>(options?: UsePathOptions): UsePathReturn<TData>;
+export interface PathContext<TData extends PathData = PathData> {
+    readonly snapshot: PathSnapshot<TData> | null;
+    next: () => Promise<void>;
+    previous: () => Promise<void>;
+    cancel: () => Promise<void>;
+    goToStep: (stepId: string) => Promise<void>;
+    goToStepChecked: (stepId: string) => Promise<void>;
+    setData: <K extends string & keyof TData>(key: K, value: TData[K]) => Promise<void>;
+    restart: () => Promise<void>;
+}
+/**
+ * Get the PathContext from a parent PathShell component.
+ * Use this inside step components to access the path engine.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { getPathContext } from '@daltonr/pathwrite-svelte';
+ *
+ *   const ctx = getPathContext();
+ * </script>
+ *
+ * <input value={ctx.snapshot?.data.name}
+ *        oninput={(e) => ctx.setData('name', e.target.value)} />
+ * <button onclick={ctx.next}>Next</button>
+ * ```
+ */
+export declare function getPathContext<TData extends PathData = PathData>(): PathContext<TData>;
+/**
+ * Internal: Set the PathContext for child components.
+ * Used by PathShell component.
+ */
+export declare function setPathContext<TData extends PathData = PathData>(ctx: PathContext<TData>): void;
+/**
+ * Create a two-way binding helper for form inputs.
+ * Returns an object with a reactive `value` property.
+ *
+ * @param getSnapshot - A getter function returning the current snapshot (e.g. `() => path.snapshot`)
+ * @param setData - The `setData` function from `usePath()`
+ * @param key - The data key to bind
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { usePath, bindData } from '@daltonr/pathwrite-svelte';
+ *
+ *   const path = usePath();
+ *   const name = bindData(() => path.snapshot, path.setData, 'name');
+ * </script>
+ *
+ * <input value={name.value} oninput={(e) => name.value = e.target.value} />
+ * ```
+ */
+export declare function bindData<TData extends PathData, K extends string & keyof TData>(getSnapshot: () => PathSnapshot<TData> | null, setData: <Key extends string & keyof TData>(key: Key, value: TData[Key]) => Promise<void>, key: K): {
+    readonly value: TData[K];
+    set: (value: TData[K]) => void;
+};
+export { default as PathShell } from "./PathShell.svelte";
+//# sourceMappingURL=index.svelte.d.ts.map

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

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

package/dist/index.svelte.js

@@ -0,0 +1,141 @@
+import { onDestroy, getContext, setContext } from "svelte";
+import { PathEngine as PathEngineClass } from "@daltonr/pathwrite-core";
+// ---------------------------------------------------------------------------
+// usePath - Runes-based API for Svelte 5
+// ---------------------------------------------------------------------------
+/**
+ * Create a Pathwrite engine with Svelte 5 runes-based reactivity.
+ * Call this from inside a Svelte component to get a reactive snapshot.
+ * Cleanup is automatic via onDestroy.
+ *
+ * **Note:** `snapshot` is a reactive getter — access it via the returned
+ * object (e.g. `path.snapshot`). Destructuring `snapshot` will lose reactivity.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { usePath } from '@daltonr/pathwrite-svelte';
+ *
+ *   const path = usePath();
+ *
+ *   onMount(() => {
+ *     path.start(myPath, { name: '' });
+ *   });
+ * </script>
+ *
+ * {#if path.snapshot}
+ *   <h2>{path.snapshot.stepId}</h2>
+ *   <button onclick={path.previous} disabled={path.snapshot.isFirstStep}>Previous</button>
+ *   <button onclick={path.next} disabled={!path.snapshot.canMoveNext}>Next</button>
+ * {/if}
+ * ```
+ */
+export function usePath(options) {
+    const engine = options?.engine ?? new PathEngineClass();
+    // Reactive snapshot via $state rune
+    let _snapshot = $state(engine.snapshot());
+    // Subscribe to engine events
+    const unsubscribe = engine.subscribe((event) => {
+        if (event.type === "stateChanged" || event.type === "resumed") {
+            _snapshot = event.snapshot;
+        }
+        else if (event.type === "completed" || event.type === "cancelled") {
+            _snapshot = null;
+        }
+        options?.onEvent?.(event);
+    });
+    // Auto-cleanup when component is destroyed
+    onDestroy(unsubscribe);
+    const start = (path, initialData = {}) => engine.start(path, initialData);
+    const startSubPath = (path, initialData = {}, meta) => engine.startSubPath(path, initialData, meta);
+    const next = () => engine.next();
+    const previous = () => engine.previous();
+    const cancel = () => engine.cancel();
+    const goToStep = (stepId) => engine.goToStep(stepId);
+    const goToStepChecked = (stepId) => engine.goToStepChecked(stepId);
+    const setData = ((key, value) => engine.setData(key, value));
+    const restart = (path, initialData = {}) => engine.restart(path, initialData);
+    return {
+        get snapshot() { return _snapshot; },
+        start,
+        startSubPath,
+        next,
+        previous,
+        cancel,
+        goToStep,
+        goToStepChecked,
+        setData,
+        restart
+    };
+}
+// ---------------------------------------------------------------------------
+// Context API for PathShell
+// ---------------------------------------------------------------------------
+const PATH_CONTEXT_KEY = Symbol("pathwrite-context");
+/**
+ * Get the PathContext from a parent PathShell component.
+ * Use this inside step components to access the path engine.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { getPathContext } from '@daltonr/pathwrite-svelte';
+ *
+ *   const ctx = getPathContext();
+ * </script>
+ *
+ * <input value={ctx.snapshot?.data.name}
+ *        oninput={(e) => ctx.setData('name', e.target.value)} />
+ * <button onclick={ctx.next}>Next</button>
+ * ```
+ */
+export function getPathContext() {
+    const ctx = getContext(PATH_CONTEXT_KEY);
+    if (!ctx) {
+        throw new Error("getPathContext() must be called from a component inside a <PathShell>. " +
+            "Ensure the PathShell component is a parent in the component tree.");
+    }
+    return ctx;
+}
+/**
+ * Internal: Set the PathContext for child components.
+ * Used by PathShell component.
+ */
+export function setPathContext(ctx) {
+    setContext(PATH_CONTEXT_KEY, ctx);
+}
+// ---------------------------------------------------------------------------
+// Helper for binding form inputs
+// ---------------------------------------------------------------------------
+/**
+ * Create a two-way binding helper for form inputs.
+ * Returns an object with a reactive `value` property.
+ *
+ * @param getSnapshot - A getter function returning the current snapshot (e.g. `() => path.snapshot`)
+ * @param setData - The `setData` function from `usePath()`
+ * @param key - The data key to bind
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { usePath, bindData } from '@daltonr/pathwrite-svelte';
+ *
+ *   const path = usePath();
+ *   const name = bindData(() => path.snapshot, path.setData, 'name');
+ * </script>
+ *
+ * <input value={name.value} oninput={(e) => name.value = e.target.value} />
+ * ```
+ */
+export function bindData(getSnapshot, setData, key) {
+    return {
+        get value() {
+            return (getSnapshot()?.data[key] ?? undefined);
+        },
+        set(value) {
+            setData(key, value);
+        }
+    };
+}
+// Export PathShell component
+export { default as PathShell } from "./PathShell.svelte";

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@daltonr/pathwrite-svelte",
+  "version": "0.5.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Svelte 5 adapter for @daltonr/pathwrite-core — runes-based reactive bindings and optional PathShell component.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardadalton/pathwrite.git",
+    "directory": "packages/svelte-adapter"
+  },
+  "keywords": [
+    "wizard",
+    "stepper",
+    "path",
+    "svelte",
+    "runes",
+    "multi-step",
+    "workflow"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.svelte.d.ts",
+      "svelte": "./dist/index.svelte.js",
+      "import": "./dist/index.svelte.js"
+    },
+    "./PathShell.svelte": {
+      "svelte": "./dist/PathShell.svelte",
+      "import": "./dist/PathShell.svelte"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "svelte": "./dist/index.svelte.js",
+  "main": "dist/index.svelte.js",
+  "types": "dist/index.svelte.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist && cp ../shell.css dist/index.css",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "prepublishOnly": "test -d dist && echo 'dist already built, skipping' || (npm run clean && npm run build)"
+  },
+  "peerDependencies": {
+    "svelte": ">=5.0.0"
+  },
+  "dependencies": {
+    "@daltonr/pathwrite-core": "^0.5.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@testing-library/svelte": "^5.0.0",
+    "svelte": "^5.0.0"
+  }
+}