@daltonr/pathwrite-svelte 0.6.2 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +6 -1
  3. package/dist/PathShell.svelte +41 -5
  4. package/dist/PathShell.svelte.d.ts +16 -1
  5. package/dist/PathShell.svelte.d.ts.map +1 -1
  6. package/dist/index.css +69 -0
  7. package/dist/index.svelte.d.ts +1 -1
  8. package/dist/index.svelte.d.ts.map +1 -1
  9. package/package.json +2 -2
  10. package/src/PathShell.svelte +41 -5
  11. package/src/index.svelte.ts +2 -0
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2026 Richard Dalton
3
+ Copyright (c) 2026 Devjoy Ltd.
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -532,7 +532,7 @@ setData('invalid', 'value');
532
532
 
533
533
  ## License
534
534
 
535
- MIT
535
+ MIT — © 2026 Devjoy Ltd.
536
536
 
537
537
  ## See Also
538
538
 
@@ -540,3 +540,8 @@ MIT
540
540
  - [@daltonr/pathwrite-store-http](../store-http) - HTTP persistence
541
541
  - [Documentation](../../docs/guides/DEVELOPER_GUIDE.md)
542
542
 
543
+
544
+ ---
545
+
546
+ © 2026 Devjoy Ltd. MIT License.
547
+
package/dist/PathShell.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { onMount } from 'svelte';
3
3
  import { usePath, setPathContext } from './index.svelte.js';
4
- import type { PathDefinition, PathData, PathEngine, PathSnapshot } from './index.svelte.js';
4
+ import type { PathDefinition, PathData, PathEngine, PathSnapshot, ProgressLayout } from './index.svelte.js';
5
5
  import type { Snippet } from 'svelte';
6
6
 
7
7
  /** Converts a camelCase or lowercase field key to a display label. */
@@ -27,6 +27,21 @@
27
27
  * - "form": Cancel on left, Submit alone on right. Back button never shown.
28
28
  */
29
29
  footerLayout?: "wizard" | "form" | "auto";
30
+ /**
31
+ * Controls whether the shell renders its auto-generated field-error summary box.
32
+ * - `"summary"` (default): Shell renders the labeled error list below the step body.
33
+ * - `"inline"`: Suppress the summary — handle errors inside the step template instead.
34
+ * - `"both"`: Render the shell summary AND whatever the step template renders.
35
+ */
36
+ validationDisplay?: "summary" | "inline" | "both";
37
+ /**
38
+ * Controls how progress bars are arranged when a sub-path is active.
39
+ * - "merged" (default): Root and sub-path bars in one card.
40
+ * - "split": Root and sub-path bars as separate cards.
41
+ * - "rootOnly": Only the root bar — sub-path bar hidden.
42
+ * - "activeOnly": Only the active (sub-path) bar — root bar hidden.
43
+ */
44
+ progressLayout?: ProgressLayout;
30
45
  // Callback props replace event dispatching in Svelte 5
31
46
  oncomplete?: (data: PathData) => void;
32
47
  oncancel?: (data: PathData) => void;
@@ -50,6 +65,8 @@
50
65
  hideCancel = false,
51
66
  hideProgress = false,
52
67
  footerLayout = 'auto',
68
+ validationDisplay = 'inline',
69
+ progressLayout = 'merged',
53
70
  oncomplete,
54
71
  oncancel,
55
72
  onevent,
@@ -115,7 +132,7 @@
115
132
  }
116
133
  </script>
117
134
 
118
- <div class="pw-shell">
135
+ <div class="pw-shell {progressLayout !== 'merged' ? `pw-shell--progress-${progressLayout}` : ''}">
119
136
  {#if !snap}
120
137
  <div class="pw-shell__empty">
121
138
  <p>No active path.</p>
@@ -126,8 +143,27 @@
126
143
  {/if}
127
144
  </div>
128
145
  {:else}
146
+ <!-- Root progress: persistent top-level bar visible during sub-paths -->
147
+ {#if !hideProgress && snap.rootProgress && progressLayout !== 'activeOnly'}
148
+ <div class="pw-shell__root-progress">
149
+ <div class="pw-shell__steps">
150
+ {#each snap.rootProgress.steps as step, i}
151
+ <div class="pw-shell__step pw-shell__step--{step.status}">
152
+ <span class="pw-shell__step-dot">
153
+ {step.status === 'completed' ? '✓' : i + 1}
154
+ </span>
155
+ <span class="pw-shell__step-label">{step.title ?? step.id}</span>
156
+ </div>
157
+ {/each}
158
+ </div>
159
+ <div class="pw-shell__track">
160
+ <div class="pw-shell__track-fill" style="width: {snap.rootProgress.progress * 100}%"></div>
161
+ </div>
162
+ </div>
163
+ {/if}
164
+
129
165
  <!-- Header: progress indicator (overridable via header snippet) -->
130
- {#if !hideProgress}
166
+ {#if !hideProgress && progressLayout !== 'rootOnly'}
131
167
  {#if header}
132
168
  {@render header(snap)}
133
169
  {:else if snap.stepCount > 1 || snap.nestingLevel > 0}
@@ -158,8 +194,8 @@
158
194
  {/if}
159
195
  </div>
160
196
 
161
- <!-- Validation messages — labeled by field name -->
162
- {#if snap.hasAttemptedNext && Object.keys(snap.fieldMessages).length > 0}
197
+ <!-- Validation messages — suppressed when validationDisplay="inline" -->
198
+ {#if validationDisplay !== 'inline' && snap.hasAttemptedNext && Object.keys(snap.fieldMessages).length > 0}
163
199
  <ul class="pw-shell__validation">
164
200
  {#each Object.entries(snap.fieldMessages) as [key, msg]}
165
201
  <li class="pw-shell__validation-item">
package/dist/PathShell.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { PathDefinition, PathData, PathEngine, PathSnapshot } from './index.svelte.js';
1
+ import type { PathDefinition, PathData, PathEngine, PathSnapshot, ProgressLayout } from './index.svelte.js';
2
2
  import type { Snippet } from 'svelte';
3
3
  interface Props {
4
4
  path?: PathDefinition<any>;
@@ -18,6 +18,21 @@ interface Props {
18
18
  * - "form": Cancel on left, Submit alone on right. Back button never shown.
19
19
  */
20
20
  footerLayout?: "wizard" | "form" | "auto";
21
+ /**
22
+ * Controls whether the shell renders its auto-generated field-error summary box.
23
+ * - `"summary"` (default): Shell renders the labeled error list below the step body.
24
+ * - `"inline"`: Suppress the summary — handle errors inside the step template instead.
25
+ * - `"both"`: Render the shell summary AND whatever the step template renders.
26
+ */
27
+ validationDisplay?: "summary" | "inline" | "both";
28
+ /**
29
+ * Controls how progress bars are arranged when a sub-path is active.
30
+ * - "merged" (default): Root and sub-path bars in one card.
31
+ * - "split": Root and sub-path bars as separate cards.
32
+ * - "rootOnly": Only the root bar — sub-path bar hidden.
33
+ * - "activeOnly": Only the active (sub-path) bar — root bar hidden.
34
+ */
35
+ progressLayout?: ProgressLayout;
21
36
  oncomplete?: (data: PathData) => void;
22
37
  oncancel?: (data: PathData) => void;
23
38
  onevent?: (event: any) => void;
package/dist/PathShell.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PathShell.svelte.d.ts","sourceRoot":"","sources":["../src/PathShell.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5F,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAE1C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/B,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,GAAG,CAAC;CAC9B;AAuLH,QAAA,MAAM,SAAS;mBAlGQ,OAAO,CAAC,IAAI,CAAC;MAkGmB,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"PathShell.svelte.d.ts","sourceRoot":"","sources":["../src/PathShell.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC5G,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/B,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,GAAG,CAAC;CAC9B;AA4MH,QAAA,MAAM,SAAS;mBArHQ,QAAQ,IAAI,CAAC;MAqHmB,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
package/dist/index.css CHANGED
@@ -77,6 +77,75 @@
77
77
  font-size: 14px;
78
78
  }
79
79
 
80
+ /* ------------------------------------------------------------------ */
81
+ /* Root progress — persistent top-level bar visible during sub-paths */
82
+ /* ------------------------------------------------------------------ */
83
+ .pw-shell__root-progress {
84
+ background: var(--pw-color-bg);
85
+ border: 1px solid var(--pw-color-border);
86
+ border-radius: var(--pw-shell-radius);
87
+ padding: 20px 24px 16px;
88
+ }
89
+
90
+ .pw-shell__root-progress .pw-shell__steps {
91
+ display: flex;
92
+ justify-content: space-between;
93
+ margin-bottom: 12px;
94
+ }
95
+
96
+ .pw-shell__root-progress .pw-shell__step {
97
+ display: flex;
98
+ flex-direction: column;
99
+ align-items: center;
100
+ gap: 6px;
101
+ flex: 1;
102
+ }
103
+
104
+ /* Merge root progress + sub-path header into a single card */
105
+ .pw-shell__root-progress + .pw-shell__header {
106
+ margin-top: calc(-1 * var(--pw-shell-gap));
107
+ border-top: 1px solid var(--pw-color-border);
108
+ border-top-left-radius: 0;
109
+ border-top-right-radius: 0;
110
+ padding: 12px 24px 12px;
111
+ opacity: 0.6;
112
+ }
113
+
114
+ .pw-shell__root-progress:has(+ .pw-shell__header) {
115
+ border-bottom-left-radius: 0;
116
+ border-bottom-right-radius: 0;
117
+ padding-bottom: 12px;
118
+ }
119
+
120
+ .pw-shell__root-progress + .pw-shell__header .pw-shell__steps {
121
+ margin-bottom: 6px;
122
+ }
123
+
124
+ .pw-shell__root-progress + .pw-shell__header .pw-shell__step-dot {
125
+ width: 22px;
126
+ height: 22px;
127
+ font-size: 10px;
128
+ }
129
+
130
+ .pw-shell__root-progress + .pw-shell__header .pw-shell__step-label {
131
+ font-size: 10px;
132
+ }
133
+
134
+ .pw-shell__root-progress + .pw-shell__header .pw-shell__track {
135
+ height: 3px;
136
+ }
137
+
138
+ /* Split layout — disable the merged-card effect */
139
+ .pw-shell--progress-split .pw-shell__root-progress + .pw-shell__header {
140
+ margin-top: 0;
141
+ border-top: 1px solid var(--pw-color-border);
142
+ border-radius: var(--pw-shell-radius);
143
+ }
144
+ .pw-shell--progress-split .pw-shell__root-progress:has(+ .pw-shell__header) {
145
+ border-radius: var(--pw-shell-radius);
146
+ padding-bottom: 16px;
147
+ }
148
+
80
149
  /* ------------------------------------------------------------------ */
81
150
  /* Header — progress indicator */
82
151
  /* ------------------------------------------------------------------ */
package/dist/index.svelte.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { PathData, PathDefinition, PathEngine, PathEvent, PathSnapshot } from "@daltonr/pathwrite-core";
2
- export type { PathData, FieldErrors, PathDefinition, PathEngine, PathEvent, PathSnapshot, PathStep, PathStepContext, SerializedPathState } from "@daltonr/pathwrite-core";
2
+ export type { PathData, FieldErrors, PathDefinition, PathEngine, PathEvent, PathSnapshot, PathStep, PathStepContext, ProgressLayout, RootProgress, SerializedPathState } from "@daltonr/pathwrite-core";
3
3
  export interface UsePathOptions {
4
4
  /**
5
5
  * An externally-managed `PathEngine` to subscribe to — for example, the engine
package/dist/index.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.svelte.d.ts","sourceRoot":"","sources":["../src/index.svelte.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.svelte.d.ts","sourceRoot":"","sources":["../src/index.svelte.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@daltonr/pathwrite-svelte",
3
- "version": "0.6.2",
3
+ "version": "0.7.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "description": "Svelte 5 adapter for @daltonr/pathwrite-core — runes-based reactive bindings and optional PathShell component.",
@@ -52,7 +52,7 @@
52
52
  "svelte": ">=5.0.0"
53
53
  },
54
54
  "dependencies": {
55
- "@daltonr/pathwrite-core": "^0.6.2"
55
+ "@daltonr/pathwrite-core": "^0.7.0"
56
56
  },
57
57
  "devDependencies": {
58
58
  "@sveltejs/package": "^2.5.7",
package/src/PathShell.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { onMount } from 'svelte';
3
3
  import { usePath, setPathContext } from './index.svelte.js';
4
- import type { PathDefinition, PathData, PathEngine, PathSnapshot } from './index.svelte.js';
4
+ import type { PathDefinition, PathData, PathEngine, PathSnapshot, ProgressLayout } from './index.svelte.js';
5
5
  import type { Snippet } from 'svelte';
6
6
 
7
7
  /** Converts a camelCase or lowercase field key to a display label. */
@@ -27,6 +27,21 @@
27
27
  * - "form": Cancel on left, Submit alone on right. Back button never shown.
28
28
  */
29
29
  footerLayout?: "wizard" | "form" | "auto";
30
+ /**
31
+ * Controls whether the shell renders its auto-generated field-error summary box.
32
+ * - `"summary"` (default): Shell renders the labeled error list below the step body.
33
+ * - `"inline"`: Suppress the summary — handle errors inside the step template instead.
34
+ * - `"both"`: Render the shell summary AND whatever the step template renders.
35
+ */
36
+ validationDisplay?: "summary" | "inline" | "both";
37
+ /**
38
+ * Controls how progress bars are arranged when a sub-path is active.
39
+ * - "merged" (default): Root and sub-path bars in one card.
40
+ * - "split": Root and sub-path bars as separate cards.
41
+ * - "rootOnly": Only the root bar — sub-path bar hidden.
42
+ * - "activeOnly": Only the active (sub-path) bar — root bar hidden.
43
+ */
44
+ progressLayout?: ProgressLayout;
30
45
  // Callback props replace event dispatching in Svelte 5
31
46
  oncomplete?: (data: PathData) => void;
32
47
  oncancel?: (data: PathData) => void;
@@ -50,6 +65,8 @@
50
65
  hideCancel = false,
51
66
  hideProgress = false,
52
67
  footerLayout = 'auto',
68
+ validationDisplay = 'inline',
69
+ progressLayout = 'merged',
53
70
  oncomplete,
54
71
  oncancel,
55
72
  onevent,
@@ -115,7 +132,7 @@
115
132
  }
116
133
  </script>
117
134
 
118
- <div class="pw-shell">
135
+ <div class="pw-shell {progressLayout !== 'merged' ? `pw-shell--progress-${progressLayout}` : ''}">
119
136
  {#if !snap}
120
137
  <div class="pw-shell__empty">
121
138
  <p>No active path.</p>
@@ -126,8 +143,27 @@
126
143
  {/if}
127
144
  </div>
128
145
  {:else}
146
+ <!-- Root progress: persistent top-level bar visible during sub-paths -->
147
+ {#if !hideProgress && snap.rootProgress && progressLayout !== 'activeOnly'}
148
+ <div class="pw-shell__root-progress">
149
+ <div class="pw-shell__steps">
150
+ {#each snap.rootProgress.steps as step, i}
151
+ <div class="pw-shell__step pw-shell__step--{step.status}">
152
+ <span class="pw-shell__step-dot">
153
+ {step.status === 'completed' ? '✓' : i + 1}
154
+ </span>
155
+ <span class="pw-shell__step-label">{step.title ?? step.id}</span>
156
+ </div>
157
+ {/each}
158
+ </div>
159
+ <div class="pw-shell__track">
160
+ <div class="pw-shell__track-fill" style="width: {snap.rootProgress.progress * 100}%"></div>
161
+ </div>
162
+ </div>
163
+ {/if}
164
+
129
165
  <!-- Header: progress indicator (overridable via header snippet) -->
130
- {#if !hideProgress}
166
+ {#if !hideProgress && progressLayout !== 'rootOnly'}
131
167
  {#if header}
132
168
  {@render header(snap)}
133
169
  {:else if snap.stepCount > 1 || snap.nestingLevel > 0}
@@ -158,8 +194,8 @@
158
194
  {/if}
159
195
  </div>
160
196
 
161
- <!-- Validation messages — labeled by field name -->
162
- {#if snap.hasAttemptedNext && Object.keys(snap.fieldMessages).length > 0}
197
+ <!-- Validation messages — suppressed when validationDisplay="inline" -->
198
+ {#if validationDisplay !== 'inline' && snap.hasAttemptedNext && Object.keys(snap.fieldMessages).length > 0}
163
199
  <ul class="pw-shell__validation">
164
200
  {#each Object.entries(snap.fieldMessages) as [key, msg]}
165
201
  <li class="pw-shell__validation-item">
package/src/index.svelte.ts CHANGED
@@ -18,6 +18,8 @@ export type {
18
18
  PathSnapshot,
19
19
  PathStep,
20
20
  PathStepContext,
21
+ ProgressLayout,
22
+ RootProgress,
21
23
  SerializedPathState
22
24
  } from "@daltonr/pathwrite-core";
23
25