@stephen-netu/design-system 0.2.2 → 0.5.1

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 (229) hide show
  1. package/dist/d0-data-viz/BarChart.test.js +53 -0
  2. package/dist/d0-data-viz/CheckpointBar.test.js +83 -0
  3. package/dist/d0-data-viz/CheckpointPill.svelte +1 -1
  4. package/dist/d0-data-viz/CheckpointPill.test.js +78 -0
  5. package/dist/d0-data-viz/ConnectionHealth.test.js +70 -0
  6. package/dist/d0-data-viz/MetricCard.test.js +57 -0
  7. package/dist/d0-data-viz/SparkLine.test.js +47 -0
  8. package/dist/d0-data-viz/StorageMap.test.js +63 -0
  9. package/dist/d0-data-viz/Timeline.test.js +62 -0
  10. package/dist/d0-data-viz/WorldLineTimeline.test.js +99 -0
  11. package/dist/d0-data-viz/checkpoint-types.js +1 -1
  12. package/dist/d0-data-viz/storage-map-types.d.ts.map +1 -1
  13. package/dist/d0-data-viz/storage-map-types.js +6 -3
  14. package/dist/d0-data-viz/theme-integration.js +1 -1
  15. package/dist/demos/AmbientPrimitivesDemo.svelte +103 -0
  16. package/dist/demos/AmbientPrimitivesDemo.svelte.d.ts +5 -0
  17. package/dist/demos/AmbientPrimitivesDemo.svelte.d.ts.map +1 -0
  18. package/dist/demos/NodepadBlocksShowcase.svelte +2 -1
  19. package/dist/demos/NodepadBlocksShowcase.svelte.d.ts.map +1 -1
  20. package/dist/demos/index.d.ts +1 -0
  21. package/dist/demos/index.d.ts.map +1 -1
  22. package/dist/demos/index.js +1 -0
  23. package/dist/editor/CodeEditor.svelte +83 -26
  24. package/dist/editor/CodeEditor.svelte.d.ts +0 -1
  25. package/dist/editor/CodeEditor.svelte.d.ts.map +1 -1
  26. package/dist/editor/ExternalChangeDialog.svelte +117 -0
  27. package/dist/editor/ExternalChangeDialog.svelte.d.ts +13 -0
  28. package/dist/editor/ExternalChangeDialog.svelte.d.ts.map +1 -0
  29. package/dist/editor/MarkdownEditor.svelte +104 -617
  30. package/dist/editor/MarkdownEditor.svelte.d.ts +1 -1
  31. package/dist/editor/MarkdownEditor.svelte.d.ts.map +1 -1
  32. package/dist/editor/codemirror-config.d.ts +36 -0
  33. package/dist/editor/codemirror-config.d.ts.map +1 -0
  34. package/dist/editor/codemirror-config.js +87 -0
  35. package/dist/editor/components/CorrectionTooltip.svelte +180 -159
  36. package/dist/editor/components/CorrectionTooltip.svelte.d.ts +7 -23
  37. package/dist/editor/components/CorrectionTooltip.svelte.d.ts.map +1 -1
  38. package/dist/editor/extensions/autocomplete.d.ts +2 -2
  39. package/dist/editor/extensions/autocomplete.d.ts.map +1 -1
  40. package/dist/editor/extensions/autocomplete.test.js +121 -0
  41. package/dist/editor/extensions/spellcheck.d.ts +21 -3
  42. package/dist/editor/extensions/spellcheck.d.ts.map +1 -1
  43. package/dist/editor/extensions/spellcheck.js +51 -9
  44. package/dist/editor/extensions/spellcheck.test.js +168 -0
  45. package/dist/editor/extensions/types.d.ts +2 -1
  46. package/dist/editor/extensions/types.d.ts.map +1 -1
  47. package/dist/editor/index.d.ts +2 -1
  48. package/dist/editor/index.d.ts.map +1 -1
  49. package/dist/editor/index.js +1 -0
  50. package/dist/editor/markdown-preview.d.ts +9 -0
  51. package/dist/editor/markdown-preview.d.ts.map +1 -0
  52. package/dist/editor/markdown-preview.js +19 -0
  53. package/dist/editor/markdown-preview.test.js +38 -0
  54. package/dist/editor/useCodeMirror.d.ts +23 -0
  55. package/dist/editor/useCodeMirror.d.ts.map +1 -0
  56. package/dist/editor/useCodeMirror.js +40 -0
  57. package/dist/editor/useFilePersistence.d.ts +32 -0
  58. package/dist/editor/useFilePersistence.d.ts.map +1 -0
  59. package/dist/editor/useFilePersistence.js +117 -0
  60. package/dist/fabric/ai/ChatPanel.svelte +61 -62
  61. package/dist/fabric/ai/ChatPanel.svelte.d.ts.map +1 -1
  62. package/dist/fabric/ai/ResearchPanel.svelte +31 -24
  63. package/dist/fabric/data/FileTree.svelte +195 -0
  64. package/dist/fabric/data/FileTree.svelte.d.ts +19 -0
  65. package/dist/fabric/data/FileTree.svelte.d.ts.map +1 -0
  66. package/dist/fabric/data/FileTree.test.js +127 -0
  67. package/dist/fabric/data/index.d.ts +5 -9
  68. package/dist/fabric/data/index.d.ts.map +1 -1
  69. package/dist/fabric/data/index.js +4 -1
  70. package/dist/fabric/index.d.ts +1 -0
  71. package/dist/fabric/index.d.ts.map +1 -1
  72. package/dist/fabric/index.js +2 -0
  73. package/dist/fabric/input/KeyboardShortcuts.svelte +23 -21
  74. package/dist/fabric/layout/CollapsiblePanel.svelte +8 -10
  75. package/dist/fabric/navigation/ActivityRail.svelte +3 -5
  76. package/dist/fabric/navigation/ActivityRail.svelte.d.ts.map +1 -1
  77. package/dist/g0-generative/components/Text.svelte +38 -0
  78. package/dist/g0-generative/components/Text.svelte.d.ts +9 -0
  79. package/dist/g0-generative/components/Text.svelte.d.ts.map +1 -0
  80. package/dist/g0-generative/index.d.ts +1 -0
  81. package/dist/g0-generative/index.d.ts.map +1 -1
  82. package/dist/g0-generative/index.js +1 -0
  83. package/dist/g0-generative/library/ComponentLibrary.d.ts +4 -0
  84. package/dist/g0-generative/library/ComponentLibrary.d.ts.map +1 -1
  85. package/dist/g0-generative/library/ComponentLibrary.js +10 -0
  86. package/dist/g0-generative/library/ComponentLibrary.test.js +135 -0
  87. package/dist/g0-generative/renderer/OpenUIRenderer.svelte +16 -56
  88. package/dist/g0-generative/renderer/OpenUIRenderer.svelte.d.ts.map +1 -1
  89. package/dist/g0-generative/renderer/OpenUIRenderer.test.js +143 -0
  90. package/dist/g0-geo/SovereignMap.svelte +13 -13
  91. package/dist/g0-geo/SovereignMap.svelte.d.ts.map +1 -1
  92. package/dist/index.d.ts +0 -1
  93. package/dist/index.d.ts.map +1 -1
  94. package/dist/index.js +3 -1
  95. package/dist/l0-layout/block-writer/BlockContent.svelte +23 -22
  96. package/dist/l0-layout/block-writer/BlockContent.svelte.d.ts.map +1 -1
  97. package/dist/l0-layout/block-writer/BlockContent.test.js +47 -0
  98. package/dist/l0-layout/block-writer/markdown.js +11 -11
  99. package/dist/l0-layout/block-writer/markdown.test.js +81 -0
  100. package/dist/l0-layout/card/StackedCard.svelte +87 -0
  101. package/dist/l0-layout/card/StackedCard.svelte.d.ts +9 -0
  102. package/dist/l0-layout/card/StackedCard.svelte.d.ts.map +1 -0
  103. package/dist/l0-layout/card/StackedCard.test.js +29 -0
  104. package/dist/l0-layout/index.d.ts +1 -0
  105. package/dist/l0-layout/index.d.ts.map +1 -1
  106. package/dist/l0-layout/index.js +1 -0
  107. package/dist/l0-layout/kanban/KanbanBoard.svelte +1 -1
  108. package/dist/l0-layout/kanban/KanbanColumn.svelte +1 -1
  109. package/dist/n1-flow-canvas/FlowCanvas.svelte +50 -6
  110. package/dist/n1-flow-canvas/FlowCanvas.svelte.d.ts.map +1 -1
  111. package/dist/n1-flow-canvas/index.d.ts +2 -0
  112. package/dist/n1-flow-canvas/index.d.ts.map +1 -1
  113. package/dist/n1-flow-canvas/index.js +1 -0
  114. package/dist/n1-flow-canvas/pipeline-adapter.d.ts +37 -0
  115. package/dist/n1-flow-canvas/pipeline-adapter.d.ts.map +1 -0
  116. package/dist/n1-flow-canvas/pipeline-adapter.js +160 -0
  117. package/dist/n2-manifold-disk/ManifoldDisk.svelte +62 -35
  118. package/dist/n2-manifold-disk/ManifoldDisk.svelte.d.ts.map +1 -1
  119. package/dist/n4-adaptive-manifold/AdaptiveManifold.svelte +23 -19
  120. package/dist/n4-adaptive-manifold/AdaptiveManifold.svelte.d.ts.map +1 -1
  121. package/dist/n4-adaptive-manifold/types.d.ts +3 -0
  122. package/dist/n4-adaptive-manifold/types.d.ts.map +1 -1
  123. package/dist/p0-primitives/ThemeProvider.svelte +28 -7
  124. package/dist/p0-primitives/ThemeProvider.svelte.d.ts +5 -0
  125. package/dist/p0-primitives/ThemeProvider.svelte.d.ts.map +1 -1
  126. package/dist/p0-primitives/canvas-theme.d.ts +21 -1
  127. package/dist/p0-primitives/canvas-theme.d.ts.map +1 -1
  128. package/dist/p0-primitives/canvas-theme.js +78 -23
  129. package/dist/p0-primitives/debug.d.ts +6 -0
  130. package/dist/p0-primitives/debug.d.ts.map +1 -0
  131. package/dist/p0-primitives/debug.js +21 -0
  132. package/dist/p0-primitives/theme.d.ts.map +1 -1
  133. package/dist/p0-primitives/theme.js +11 -31
  134. package/dist/p0-primitives/tokens/ambient.css +76 -0
  135. package/dist/p0-primitives/tokens/tokens.css +124 -29
  136. package/dist/p0-primitives/utils/index.d.ts +2 -0
  137. package/dist/p0-primitives/utils/index.d.ts.map +1 -1
  138. package/dist/p0-primitives/utils/index.js +1 -0
  139. package/dist/p0-primitives/utils/reveal.d.ts +15 -0
  140. package/dist/p0-primitives/utils/reveal.d.ts.map +1 -0
  141. package/dist/p0-primitives/utils/reveal.js +29 -0
  142. package/dist/p0-primitives/utils/reveal.test.js +95 -0
  143. package/dist/s0-state/SyncStatus.svelte +1 -1
  144. package/dist/s0-state/index.d.ts +2 -1
  145. package/dist/s0-state/index.d.ts.map +1 -1
  146. package/dist/s0-state/index.js +2 -0
  147. package/dist/s0-state/modal-stack-store.svelte.d.ts +3 -3
  148. package/dist/s0-state/modal-stack-store.svelte.js +2 -2
  149. package/dist/spatial/ForceSimulation.svelte.js +1 -1
  150. package/dist/spatial/ParticleAssembleMark.svelte +285 -0
  151. package/dist/spatial/ParticleAssembleMark.svelte.d.ts +24 -0
  152. package/dist/spatial/ParticleAssembleMark.svelte.d.ts.map +1 -0
  153. package/dist/spatial/ZoneTiler.test.js +90 -0
  154. package/dist/spatial/index.js +1 -0
  155. package/dist/spatial/particle-assemble-math.d.ts +22 -0
  156. package/dist/spatial/particle-assemble-math.d.ts.map +1 -0
  157. package/dist/spatial/particle-assemble-math.js +26 -0
  158. package/dist/spatial/particle-assemble-math.test.js +56 -0
  159. package/dist/t0-transport/substrate.svelte.d.ts.map +1 -1
  160. package/dist/t0-transport/substrate.svelte.js +10 -4
  161. package/dist/u0-primitives/LockIndicator.svelte +16 -14
  162. package/dist/u0-primitives/VerticalToolbar.svelte +24 -21
  163. package/dist/u0-primitives/accordion/Accordion.svelte +8 -7
  164. package/dist/u0-primitives/animated-icon/AnimatedIcon.svelte +3 -3
  165. package/dist/u0-primitives/animated-icon/AnimatedIcon.test.js +82 -0
  166. package/dist/u0-primitives/avatar/Avatar.svelte +14 -14
  167. package/dist/u0-primitives/avatar/Avatar.test.js +81 -0
  168. package/dist/u0-primitives/badge/Badge.svelte +6 -4
  169. package/dist/u0-primitives/badge/ValidityBadge.svelte +4 -27
  170. package/dist/u0-primitives/button/Button.svelte +15 -12
  171. package/dist/u0-primitives/card/Card.svelte +37 -15
  172. package/dist/u0-primitives/card/Card.test.js +86 -0
  173. package/dist/u0-primitives/command-palette/CommandPalette.svelte +48 -43
  174. package/dist/u0-primitives/command-palette/CommandPalette.test.js +202 -0
  175. package/dist/u0-primitives/dropdown/Dropdown.svelte +20 -25
  176. package/dist/u0-primitives/grant-badge/GrantStatusBadge.svelte +2 -2
  177. package/dist/u0-primitives/index.d.ts +6 -0
  178. package/dist/u0-primitives/index.d.ts.map +1 -1
  179. package/dist/u0-primitives/index.js +8 -0
  180. package/dist/u0-primitives/input/Input.svelte +77 -24
  181. package/dist/u0-primitives/input/Input.svelte.d.ts +2 -10
  182. package/dist/u0-primitives/input/Input.svelte.d.ts.map +1 -1
  183. package/dist/u0-primitives/input/Input.test.js +81 -1
  184. package/dist/u0-primitives/live-dot/LiveDot.svelte +56 -0
  185. package/dist/u0-primitives/live-dot/LiveDot.svelte.d.ts +11 -0
  186. package/dist/u0-primitives/live-dot/LiveDot.svelte.d.ts.map +1 -0
  187. package/dist/u0-primitives/live-dot/LiveDot.test.js +41 -0
  188. package/dist/u0-primitives/live-dot/index.d.ts +3 -0
  189. package/dist/u0-primitives/live-dot/index.d.ts.map +1 -0
  190. package/dist/u0-primitives/live-dot/index.js +1 -0
  191. package/dist/u0-primitives/modal/Modal.svelte +22 -19
  192. package/dist/u0-primitives/modal/Modal.test.js +1 -1
  193. package/dist/u0-primitives/spinner/Spinner.svelte +11 -79
  194. package/dist/u0-primitives/spinner/Spinner.svelte.d.ts.map +1 -1
  195. package/dist/u0-primitives/steps/Steps.svelte +18 -19
  196. package/dist/u0-primitives/surface-state/SurfaceState.svelte +7 -7
  197. package/dist/u0-primitives/tabs/Tabs.svelte +13 -11
  198. package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte +94 -0
  199. package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte.d.ts +16 -0
  200. package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte.d.ts.map +1 -0
  201. package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.test.js +48 -0
  202. package/dist/u0-primitives/theme-swatch-group/index.d.ts +3 -0
  203. package/dist/u0-primitives/theme-swatch-group/index.d.ts.map +1 -0
  204. package/dist/u0-primitives/theme-swatch-group/index.js +1 -0
  205. package/dist/u0-primitives/toggle/Toggle.svelte +10 -11
  206. package/dist/u0-primitives/tooltip/Tooltip.svelte +9 -9
  207. package/dist/u0-primitives/web-components/button-component.d.ts +5 -1
  208. package/dist/u0-primitives/web-components/button-component.d.ts.map +1 -1
  209. package/dist/u0-primitives/web-components/button-component.js +72 -33
  210. package/dist/u0-primitives/web-components/index.d.ts +3 -0
  211. package/dist/u0-primitives/web-components/index.d.ts.map +1 -0
  212. package/dist/u0-primitives/web-components/index.js +2 -0
  213. package/dist/u0-primitives/web-components/input-component.d.ts +5 -1
  214. package/dist/u0-primitives/web-components/input-component.d.ts.map +1 -1
  215. package/dist/u0-primitives/web-components/input-component.js +56 -39
  216. package/dist/u0-primitives/web-components/web-components.test.js +96 -0
  217. package/dist/u0-primitives/window-frame/WindowFrame.svelte +87 -0
  218. package/dist/u0-primitives/window-frame/WindowFrame.svelte.d.ts +10 -0
  219. package/dist/u0-primitives/window-frame/WindowFrame.svelte.d.ts.map +1 -0
  220. package/dist/u0-primitives/window-frame/WindowFrame.test.js +31 -0
  221. package/dist/u0-primitives/window-frame/index.d.ts +3 -0
  222. package/dist/u0-primitives/window-frame/index.d.ts.map +1 -0
  223. package/dist/u0-primitives/window-frame/index.js +1 -0
  224. package/dist/x0-enchanted-blocks/components/NodepadBlock.svelte +11 -2
  225. package/dist/x0-enchanted-blocks/components/NodepadBlock.svelte.d.ts.map +1 -1
  226. package/package.json +44 -28
  227. package/src/p0-primitives/tokens/ambient.css +76 -0
  228. package/src/p0-primitives/tokens/tokens.css +124 -29
  229. package/src/p0-primitives/tokens/tokens.json +42 -24
@@ -3,10 +3,13 @@
3
3
  // Pure TypeScript — no Svelte, no DOM.
4
4
  /** Color palette per owner tier */
5
5
  export const TIER_COLORS = {
6
+ // kos tier: accent-driven. These literals are canvas paint values, not CSS;
7
+ // consumers should call resolveAccentRamp() and replace with ramp.alpha(N).
8
+ // Until wired: neutral fallback so the visual is at least color-agnostic.
6
9
  kos: {
7
- fill: 'rgba(184, 115, 51, 0.25)',
8
- stroke: 'rgba(184, 115, 51, 0.6)',
9
- text: '#d4a06a',
10
+ fill: 'rgba(128, 128, 128, 0.20)',
11
+ stroke: 'rgba(128, 128, 128, 0.50)',
12
+ text: 'var(--color-text-secondary, #9aa1a8)',
10
13
  },
11
14
  external: {
12
15
  fill: 'rgba(160, 152, 128, 0.15)',
@@ -60,7 +60,7 @@ export const CHECKPOINT_COLOR_LABELS = {
60
60
  * Used when themeStore hasn't applied custom values.
61
61
  */
62
62
  export const CHECKPOINT_DEFAULT_COLORS = {
63
- 'rust-crate': { light: '#8a5a28', dark: '#b87333' },
63
+ 'rust-crate': { light: '#8a5a28', dark: '#b55533' },
64
64
  'ui-bundle': { light: '#2d6b6e', dark: '#5f9ea0' },
65
65
  'config': { light: '#7c6fae', dark: '#a99fd6' },
66
66
  'faculty-state': { light: '#d4a03d', dark: '#e6c470' },
@@ -0,0 +1,103 @@
1
+ <script lang="ts">
2
+ // Ambient Primitives Demo — visual check for the marketing/docs-surface
3
+ // primitives added alongside src/p0-primitives/tokens/ambient.css:
4
+ // gradient text, ambient glow, LiveDot, ThemeSwatchGroup, WindowFrame,
5
+ // StackedCard, scroll-reveal, and ParticleAssembleMark. None of these
6
+ // are wired into console/product chrome — this page is the opt-in demo.
7
+
8
+ import '../p0-primitives/tokens/ambient.css';
9
+ import LiveDot from '../u0-primitives/live-dot/LiveDot.svelte';
10
+ import ThemeSwatchGroup from '../u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte';
11
+ import WindowFrame from '../u0-primitives/window-frame/WindowFrame.svelte';
12
+ import StackedCard from '../l0-layout/card/StackedCard.svelte';
13
+ import ParticleAssembleMark from '../spatial/ParticleAssembleMark.svelte';
14
+ import { reveal } from '../p0-primitives/utils/reveal';
15
+
16
+ // Example seed list — a taste call for whoever wires this into a real
17
+ // page; swap freely. Each swatch sets --accent-primary directly, no
18
+ // parallel palette authoring.
19
+ const swatches = [
20
+ { hex: '#b87333', label: 'Brass (default)' },
21
+ { hex: '#4fa8a2', label: 'Teal' },
22
+ { hex: '#d4a04c', label: 'Amber' },
23
+ { hex: '#8b7fb0', label: 'Violet' },
24
+ { hex: '#c14a4a', label: 'Crimson' }
25
+ ];
26
+
27
+ let accent = $state('#b87333');
28
+
29
+ $effect(() => {
30
+ document.documentElement.style.setProperty('--accent-primary', accent);
31
+ });
32
+
33
+ // A simple generic mark (diamond over a triangle) — deliberately not
34
+ // Mesa's actual logomark. ParticleAssembleMark accepts any polygon set.
35
+ const shapes = [
36
+ { points: [[100, 10], [190, 100], [100, 190], [10, 100]] as [number, number][], tone: 'primary' as const },
37
+ { points: [[100, 70], [140, 130], [60, 130]] as [number, number][], tone: 'secondary' as const }
38
+ ];
39
+ </script>
40
+
41
+ <div class="demo bg-ambient-glow">
42
+ <section use:reveal>
43
+ <h2 class="text-gradient-accent">Ambient primitives</h2>
44
+ <p>Opt-in marketing/docs-surface additions — import <code>ambient.css</code> explicitly.</p>
45
+ </section>
46
+
47
+ <section use:reveal={{ delayMs: 80 }}>
48
+ <h3>ThemeSwatchGroup</h3>
49
+ <ThemeSwatchGroup {swatches} bind:value={accent} />
50
+ </section>
51
+
52
+ <section use:reveal={{ delayMs: 120 }}>
53
+ <h3>LiveDot</h3>
54
+ <div class="row">
55
+ <LiveDot variant="cleared" aria-label="Cleared" />
56
+ <LiveDot variant="pending" aria-label="Pending" />
57
+ <LiveDot variant="blocked" aria-label="Blocked" />
58
+ <LiveDot variant="degraded" aria-label="Degraded" pulse={false} />
59
+ </div>
60
+ </section>
61
+
62
+ <section use:reveal={{ delayMs: 160 }}>
63
+ <h3>WindowFrame</h3>
64
+ <WindowFrame title="PROPERTY SEARCH">
65
+ <p>Slotted content renders here.</p>
66
+ </WindowFrame>
67
+ </section>
68
+
69
+ <section use:reveal={{ delayMs: 200 }}>
70
+ <h3>StackedCard</h3>
71
+ <StackedCard>
72
+ <p>Front-sheet content, two decorative sheets behind it.</p>
73
+ </StackedCard>
74
+ </section>
75
+
76
+ <section use:reveal={{ delayMs: 240 }}>
77
+ <h3>ParticleAssembleMark</h3>
78
+ <ParticleAssembleMark
79
+ {shapes}
80
+ viewBoxWidth={200}
81
+ viewBoxHeight={200}
82
+ width={160}
83
+ height={160}
84
+ primaryColor={accent}
85
+ secondaryColor="var(--color-text-primary)"
86
+ />
87
+ </section>
88
+ </div>
89
+
90
+ <style>
91
+ .demo {
92
+ display: flex;
93
+ flex-direction: column;
94
+ gap: var(--space-8);
95
+ padding: var(--space-8);
96
+ }
97
+
98
+ .row {
99
+ display: flex;
100
+ gap: var(--space-4);
101
+ align-items: center;
102
+ }
103
+ </style>
@@ -0,0 +1,5 @@
1
+ import '../p0-primitives/tokens/ambient.css';
2
+ declare const AmbientPrimitivesDemo: import("svelte").Component<Record<string, never>, {}, "">;
3
+ type AmbientPrimitivesDemo = ReturnType<typeof AmbientPrimitivesDemo>;
4
+ export default AmbientPrimitivesDemo;
5
+ //# sourceMappingURL=AmbientPrimitivesDemo.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AmbientPrimitivesDemo.svelte.d.ts","sourceRoot":"","sources":["../../src/demos/AmbientPrimitivesDemo.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,qCAAqC,CAAC;AA6F7C,QAAA,MAAM,qBAAqB,2DAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
@@ -6,6 +6,7 @@
6
6
  // - NO collapse button (content flows naturally)
7
7
 
8
8
  import { NodepadBlock, type EnchantedBlockData } from '../x0-enchanted-blocks';
9
+ import { debug } from '../p0-primitives/debug';
9
10
 
10
11
  // Mock blocks as EnchantedBlockData (not wrapped in TaskView)
11
12
  const mockBlocks: EnchantedBlockData[] = [
@@ -72,7 +73,7 @@ The block should just flow naturally—no collapse buttons needed.`,
72
73
  block.content = newContent;
73
74
  block.modifiedAt = Date.now();
74
75
  }
75
- console.log(`Changed ${id}: ${newContent.slice(0, 30)}...`);
76
+ debug.log(`Changed ${id}: ${newContent.slice(0, 30)}...`);
76
77
  }
77
78
 
78
79
  function handleTypeChange(id: string, newType: string) {
@@ -1 +1 @@
1
- {"version":3,"file":"NodepadBlocksShowcase.svelte.d.ts","sourceRoot":"","sources":["../../src/demos/NodepadBlocksShowcase.svelte.ts"],"names":[],"mappings":"AA2HA,QAAA,MAAM,qBAAqB,2DAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
1
+ {"version":3,"file":"NodepadBlocksShowcase.svelte.d.ts","sourceRoot":"","sources":["../../src/demos/NodepadBlocksShowcase.svelte.ts"],"names":[],"mappings":"AA6HA,QAAA,MAAM,qBAAqB,2DAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
@@ -2,4 +2,5 @@ export { default as NodepadBlocksShowcase } from './NodepadBlocksShowcase.svelte
2
2
  export { default as BspZoneDemo } from './BspZoneDemo.svelte';
3
3
  export { default as BspSizingInfographic } from './BspSizingInfographic.svelte';
4
4
  export { default as ControlRoomDemo } from './ControlRoomDemo.svelte';
5
+ export { default as AmbientPrimitivesDemo } from './AmbientPrimitivesDemo.svelte';
5
6
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/demos/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/demos/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC"}
@@ -4,3 +4,4 @@ export { default as NodepadBlocksShowcase } from './NodepadBlocksShowcase.svelte
4
4
  export { default as BspZoneDemo } from './BspZoneDemo.svelte';
5
5
  export { default as BspSizingInfographic } from './BspSizingInfographic.svelte';
6
6
  export { default as ControlRoomDemo } from './ControlRoomDemo.svelte';
7
+ export { default as AmbientPrimitivesDemo } from './AmbientPrimitivesDemo.svelte';
@@ -14,12 +14,13 @@
14
14
  import { expansion } from './extensions/expansion';
15
15
  import { autocomplete } from './extensions/autocomplete';
16
16
  import { spellcheck } from './extensions/spellcheck';
17
+ import CorrectionTooltip from './components/CorrectionTooltip.svelte';
18
+ import { resolveAccentRamp } from '../p0-primitives/canvas-theme.js';
17
19
  import type { CompletionSource } from './extensions/autocomplete';
18
- import type { SpellCheckDictionary } from './extensions/spellcheck';
20
+ import type { SpellCheckCorrection, SpellCheckDictionary } from './extensions/spellcheck';
19
21
 
20
22
  interface Props {
21
23
  content: string;
22
- /** Source hint — file path or URL, used for language detection */
23
24
  source?: string;
24
25
  isActive: boolean;
25
26
  onContentChange?: (content: string) => void;
@@ -28,12 +29,18 @@
28
29
  spellCheckDictionary?: SpellCheckDictionary;
29
30
  }
30
31
 
32
+ interface ActiveCorrection extends SpellCheckCorrection {
33
+ from: number;
34
+ to: number;
35
+ }
36
+
31
37
  let { content, source = '', isActive, onContentChange, onBlur, completionSource, spellCheckDictionary }: Props = $props();
32
38
 
33
39
  let container: HTMLElement | null = $state(null);
34
40
  let view: EditorView | null = null;
35
41
  let skipSync = false;
36
42
  let detectedLang = $state('text');
43
+ let activeCorrection = $state<ActiveCorrection | null>(null);
37
44
 
38
45
  // Detect language from source path/extension or content shebang
39
46
  async function detectLanguageExtension(): Promise<Extension> {
@@ -85,33 +92,72 @@
85
92
  return [];
86
93
  }
87
94
 
88
- // Loge dark theme (matches MarkdownEditor)
89
- const logeTheme = EditorView.theme({
90
- '&': { background: 'transparent', height: '100%', color: '#e8e0d0' },
91
- '.cm-scroller': {
92
- fontFamily: 'var(--font-mono, monospace)',
93
- fontSize: '11px',
94
- lineHeight: '1.6',
95
- overflow: 'auto',
96
- },
97
- '.cm-content': { padding: '6px 8px', caretColor: '#b87333' },
98
- '.cm-cursor': { borderLeftColor: '#b87333' },
99
- '.cm-focused': { outline: 'none' },
100
- '.cm-selectionBackground, ::selection': { background: 'rgba(184,115,51,0.2)' },
101
- '.cm-gutters': {
102
- background: '#1a1a1a',
103
- borderRight: '1px solid #2a2a2a',
104
- color: '#5a5248',
105
- fontSize: '10px',
106
- },
107
- '.cm-lineNumbers .cm-gutterElement': { padding: '0 6px 0 4px' },
108
- '.cm-activeLine': { background: 'rgba(184,115,51,0.05)' },
109
- '.cm-activeLineGutter': { background: 'rgba(184,115,51,0.08)' },
110
- }, { dark: true });
95
+ async function handleCorrectionClick(
96
+ correction: SpellCheckCorrection,
97
+ _view: EditorView,
98
+ from: number,
99
+ to: number
100
+ ) {
101
+ activeCorrection = { ...correction, from, to };
102
+ }
103
+
104
+ function handleAcceptCorrection(suggestion: string) {
105
+ if (!activeCorrection || !view) return;
106
+ view.dispatch({
107
+ changes: { from: activeCorrection.from, to: activeCorrection.to, insert: suggestion },
108
+ });
109
+ activeCorrection = null;
110
+ }
111
+
112
+ function handleAddWordToDictionary() {
113
+ if (!activeCorrection) return;
114
+ spellCheckDictionary?.addWord(activeCorrection.original);
115
+ activeCorrection = null;
116
+ }
117
+
118
+ function handleDismissCorrection() {
119
+ activeCorrection = null;
120
+ }
121
+
122
+ // Loge dark theme — built from runtime CSS tokens so the user's accent
123
+ // and any overriding ThemeProvider are respected. Constructed in onMount
124
+ // where the DOM is available for getComputedStyle.
125
+ function buildLogeTheme(): Extension {
126
+ const acc = resolveAccentRamp(document.documentElement);
127
+ const cs = getComputedStyle(document.documentElement);
128
+ const rv = (p: string, fb: string) => cs.getPropertyValue(p).trim() || fb;
129
+ return EditorView.theme({
130
+ '&': { background: 'transparent', height: '100%', color: rv('--color-text-primary', '#e7e9eb') },
131
+ '.cm-scroller': {
132
+ fontFamily: 'var(--font-mono, monospace)',
133
+ fontSize: '11px',
134
+ lineHeight: '1.6',
135
+ overflow: 'auto',
136
+ },
137
+ '.cm-content': { padding: '6px 8px', caretColor: acc.solid },
138
+ '.cm-cursor': { borderLeftColor: acc.solid },
139
+ '.cm-focused': { outline: 'none' },
140
+ '.cm-selectionBackground, ::selection': { background: acc.alpha(0.2) },
141
+ '.cm-gutters': {
142
+ background: rv('--color-bg-app', '#0a0b0c'),
143
+ borderRight: `1px solid ${rv('--border-default', '#262b30')}`,
144
+ color: rv('--color-text-tertiary', '#646b72'),
145
+ fontSize: '10px',
146
+ },
147
+ '.cm-lineNumbers .cm-gutterElement': { padding: '0 6px 0 4px' },
148
+ '.cm-activeLine': { background: acc.alpha(0.05) },
149
+ '.cm-activeLineGutter': { background: acc.alpha(0.08) },
150
+ }, { dark: true });
151
+ }
152
+ // Placeholder until onMount — replaced before EditorView construction.
153
+ let logeTheme: Extension = [];
111
154
 
112
155
  onMount(async () => {
113
156
  if (!container) return;
114
157
 
158
+ // Build theme now that DOM is available — accent reads --accent-primary.
159
+ logeTheme = buildLogeTheme();
160
+
115
161
  const langExtension = await detectLanguageExtension();
116
162
 
117
163
  const onEscape = keymap.of([{
@@ -131,10 +177,11 @@
131
177
  autoFormat(),
132
178
  expansion(),
133
179
  ...(completionSource ? [autocomplete({ source: completionSource })] : []),
134
- ...(spellCheckDictionary ? [spellcheck(spellCheckDictionary)] : []),
180
+ ...(spellCheckDictionary ? spellcheck(spellCheckDictionary, { onCorrectionClick: handleCorrectionClick }) : []),
135
181
  EditorView.updateListener.of((update: ViewUpdate) => {
136
182
  if (update.docChanged) {
137
183
  skipSync = true;
184
+ activeCorrection = null;
138
185
  onContentChange?.(update.state.doc.toString());
139
186
  }
140
187
  }),
@@ -170,6 +217,16 @@
170
217
  {/if}
171
218
  </div>
172
219
 
220
+ {#if activeCorrection}
221
+ <CorrectionTooltip
222
+ correction={{ original: activeCorrection.original, suggestions: activeCorrection.suggestions }}
223
+ position={activeCorrection.position}
224
+ onAccept={handleAcceptCorrection}
225
+ onDismiss={handleDismissCorrection}
226
+ onAddToDictionary={handleAddWordToDictionary}
227
+ />
228
+ {/if}
229
+
173
230
  <style>
174
231
  .code-editor {
175
232
  width: 100%;
@@ -2,7 +2,6 @@ import type { CompletionSource } from './extensions/autocomplete';
2
2
  import type { SpellCheckDictionary } from './extensions/spellcheck';
3
3
  interface Props {
4
4
  content: string;
5
- /** Source hint — file path or URL, used for language detection */
6
5
  source?: string;
7
6
  isActive: boolean;
8
7
  onContentChange?: (content: string) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"CodeEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/editor/CodeEditor.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGlE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;CAC7C;AAuKH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"CodeEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/editor/CodeEditor.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAwB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGxF,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;CAC7C;AA4NH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
@@ -0,0 +1,117 @@
1
+ <script lang="ts">
2
+ /**
3
+ * ExternalChangeDialog — shown when the open file is modified on disk outside
4
+ * the editor. The parent owns the open/close state and the reload/keep logic;
5
+ * this component is purely presentational.
6
+ */
7
+ interface Props {
8
+ onReload: () => void;
9
+ onKeepCurrent: () => void;
10
+ }
11
+
12
+ let { onReload, onKeepCurrent }: Props = $props();
13
+ </script>
14
+
15
+ <div class="dialog-overlay">
16
+ <div class="dialog">
17
+ <div class="dialog-header">
18
+ <h3>File Changed Externally</h3>
19
+ </div>
20
+ <div class="dialog-body">
21
+ <p>This file has been modified outside of Atelier.</p>
22
+ <p>Would you like to reload it from disk, or keep your current changes?</p>
23
+ </div>
24
+ <div class="dialog-footer">
25
+ <button class="action-btn" onclick={onKeepCurrent}>
26
+ Keep Current
27
+ </button>
28
+ <button class="action-btn primary" onclick={onReload}>
29
+ Reload from Disk
30
+ </button>
31
+ </div>
32
+ </div>
33
+ </div>
34
+
35
+ <style>
36
+ .dialog-overlay {
37
+ position: fixed;
38
+ inset: 0;
39
+ background: rgba(0, 0, 0, 0.7);
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: center;
43
+ z-index: 1000;
44
+ }
45
+
46
+ .dialog {
47
+ background: var(--color-bg-panel, #1a1a1a);
48
+ border: 1px solid var(--border-subtle, #2a2a2a);
49
+ border-radius: var(--radius-lg, 8px);
50
+ min-width: 400px;
51
+ max-width: 500px;
52
+ box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.5));
53
+ }
54
+
55
+ .dialog-header {
56
+ padding: 16px 20px;
57
+ border-bottom: 1px solid var(--border-subtle, #2a2a2a);
58
+ }
59
+
60
+ .dialog-header h3 {
61
+ margin: 0;
62
+ font-size: 16px;
63
+ font-weight: 600;
64
+ color: var(--color-text-primary, #f5f2eb);
65
+ }
66
+
67
+ .dialog-body {
68
+ padding: 20px;
69
+ }
70
+
71
+ .dialog-body p {
72
+ margin: 0 0 12px 0;
73
+ color: var(--color-text-secondary, #a0a0a0);
74
+ font-size: 14px;
75
+ line-height: 1.5;
76
+ }
77
+
78
+ .dialog-body p:last-child {
79
+ margin-bottom: 0;
80
+ }
81
+
82
+ .dialog-footer {
83
+ display: flex;
84
+ justify-content: flex-end;
85
+ gap: var(--space-3);
86
+ padding: 16px 20px;
87
+ border-top: 1px solid var(--border-subtle, #2a2a2a);
88
+ }
89
+
90
+ /* Button styles mirror MarkdownEditor's .action-btn — scoped styles do not
91
+ cross component boundaries, so the dialog carries its own copy. */
92
+ .action-btn {
93
+ padding: 6px 12px;
94
+ border: 1px solid var(--border-subtle, #2a2a2a);
95
+ background: var(--color-bg-panel-elevated, #252525);
96
+ color: var(--color-text-secondary, #a0a0a0);
97
+ border-radius: var(--radius-sm, 4px);
98
+ cursor: pointer;
99
+ font-size: 13px;
100
+ transition: all 0.15s ease;
101
+ }
102
+
103
+ .action-btn:hover {
104
+ background: var(--border-subtle);
105
+ color: var(--color-text-primary, #f5f2eb);
106
+ }
107
+
108
+ .action-btn.primary {
109
+ background: var(--color-accent);
110
+ color: white;
111
+ border-color: var(--color-accent);
112
+ }
113
+
114
+ .action-btn.primary:hover {
115
+ background: var(--color-accent-hover, #c9843d);
116
+ }
117
+ </style>
@@ -0,0 +1,13 @@
1
+ /**
2
+ * ExternalChangeDialog — shown when the open file is modified on disk outside
3
+ * the editor. The parent owns the open/close state and the reload/keep logic;
4
+ * this component is purely presentational.
5
+ */
6
+ interface Props {
7
+ onReload: () => void;
8
+ onKeepCurrent: () => void;
9
+ }
10
+ declare const ExternalChangeDialog: import("svelte").Component<Props, {}, "">;
11
+ type ExternalChangeDialog = ReturnType<typeof ExternalChangeDialog>;
12
+ export default ExternalChangeDialog;
13
+ //# sourceMappingURL=ExternalChangeDialog.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExternalChangeDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/editor/ExternalChangeDialog.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AA+BH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}