@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.
- package/dist/d0-data-viz/BarChart.test.js +53 -0
- package/dist/d0-data-viz/CheckpointBar.test.js +83 -0
- package/dist/d0-data-viz/CheckpointPill.svelte +1 -1
- package/dist/d0-data-viz/CheckpointPill.test.js +78 -0
- package/dist/d0-data-viz/ConnectionHealth.test.js +70 -0
- package/dist/d0-data-viz/MetricCard.test.js +57 -0
- package/dist/d0-data-viz/SparkLine.test.js +47 -0
- package/dist/d0-data-viz/StorageMap.test.js +63 -0
- package/dist/d0-data-viz/Timeline.test.js +62 -0
- package/dist/d0-data-viz/WorldLineTimeline.test.js +99 -0
- package/dist/d0-data-viz/checkpoint-types.js +1 -1
- package/dist/d0-data-viz/storage-map-types.d.ts.map +1 -1
- package/dist/d0-data-viz/storage-map-types.js +6 -3
- package/dist/d0-data-viz/theme-integration.js +1 -1
- package/dist/demos/AmbientPrimitivesDemo.svelte +103 -0
- package/dist/demos/AmbientPrimitivesDemo.svelte.d.ts +5 -0
- package/dist/demos/AmbientPrimitivesDemo.svelte.d.ts.map +1 -0
- package/dist/demos/NodepadBlocksShowcase.svelte +2 -1
- package/dist/demos/NodepadBlocksShowcase.svelte.d.ts.map +1 -1
- package/dist/demos/index.d.ts +1 -0
- package/dist/demos/index.d.ts.map +1 -1
- package/dist/demos/index.js +1 -0
- package/dist/editor/CodeEditor.svelte +83 -26
- package/dist/editor/CodeEditor.svelte.d.ts +0 -1
- package/dist/editor/CodeEditor.svelte.d.ts.map +1 -1
- package/dist/editor/ExternalChangeDialog.svelte +117 -0
- package/dist/editor/ExternalChangeDialog.svelte.d.ts +13 -0
- package/dist/editor/ExternalChangeDialog.svelte.d.ts.map +1 -0
- package/dist/editor/MarkdownEditor.svelte +104 -617
- package/dist/editor/MarkdownEditor.svelte.d.ts +1 -1
- package/dist/editor/MarkdownEditor.svelte.d.ts.map +1 -1
- package/dist/editor/codemirror-config.d.ts +36 -0
- package/dist/editor/codemirror-config.d.ts.map +1 -0
- package/dist/editor/codemirror-config.js +87 -0
- package/dist/editor/components/CorrectionTooltip.svelte +180 -159
- package/dist/editor/components/CorrectionTooltip.svelte.d.ts +7 -23
- package/dist/editor/components/CorrectionTooltip.svelte.d.ts.map +1 -1
- package/dist/editor/extensions/autocomplete.d.ts +2 -2
- package/dist/editor/extensions/autocomplete.d.ts.map +1 -1
- package/dist/editor/extensions/autocomplete.test.js +121 -0
- package/dist/editor/extensions/spellcheck.d.ts +21 -3
- package/dist/editor/extensions/spellcheck.d.ts.map +1 -1
- package/dist/editor/extensions/spellcheck.js +51 -9
- package/dist/editor/extensions/spellcheck.test.js +168 -0
- package/dist/editor/extensions/types.d.ts +2 -1
- package/dist/editor/extensions/types.d.ts.map +1 -1
- package/dist/editor/index.d.ts +2 -1
- package/dist/editor/index.d.ts.map +1 -1
- package/dist/editor/index.js +1 -0
- package/dist/editor/markdown-preview.d.ts +9 -0
- package/dist/editor/markdown-preview.d.ts.map +1 -0
- package/dist/editor/markdown-preview.js +19 -0
- package/dist/editor/markdown-preview.test.js +38 -0
- package/dist/editor/useCodeMirror.d.ts +23 -0
- package/dist/editor/useCodeMirror.d.ts.map +1 -0
- package/dist/editor/useCodeMirror.js +40 -0
- package/dist/editor/useFilePersistence.d.ts +32 -0
- package/dist/editor/useFilePersistence.d.ts.map +1 -0
- package/dist/editor/useFilePersistence.js +117 -0
- package/dist/fabric/ai/ChatPanel.svelte +61 -62
- package/dist/fabric/ai/ChatPanel.svelte.d.ts.map +1 -1
- package/dist/fabric/ai/ResearchPanel.svelte +31 -24
- package/dist/fabric/data/FileTree.svelte +195 -0
- package/dist/fabric/data/FileTree.svelte.d.ts +19 -0
- package/dist/fabric/data/FileTree.svelte.d.ts.map +1 -0
- package/dist/fabric/data/FileTree.test.js +127 -0
- package/dist/fabric/data/index.d.ts +5 -9
- package/dist/fabric/data/index.d.ts.map +1 -1
- package/dist/fabric/data/index.js +4 -1
- package/dist/fabric/index.d.ts +1 -0
- package/dist/fabric/index.d.ts.map +1 -1
- package/dist/fabric/index.js +2 -0
- package/dist/fabric/input/KeyboardShortcuts.svelte +23 -21
- package/dist/fabric/layout/CollapsiblePanel.svelte +8 -10
- package/dist/fabric/navigation/ActivityRail.svelte +3 -5
- package/dist/fabric/navigation/ActivityRail.svelte.d.ts.map +1 -1
- package/dist/g0-generative/components/Text.svelte +38 -0
- package/dist/g0-generative/components/Text.svelte.d.ts +9 -0
- package/dist/g0-generative/components/Text.svelte.d.ts.map +1 -0
- package/dist/g0-generative/index.d.ts +1 -0
- package/dist/g0-generative/index.d.ts.map +1 -1
- package/dist/g0-generative/index.js +1 -0
- package/dist/g0-generative/library/ComponentLibrary.d.ts +4 -0
- package/dist/g0-generative/library/ComponentLibrary.d.ts.map +1 -1
- package/dist/g0-generative/library/ComponentLibrary.js +10 -0
- package/dist/g0-generative/library/ComponentLibrary.test.js +135 -0
- package/dist/g0-generative/renderer/OpenUIRenderer.svelte +16 -56
- package/dist/g0-generative/renderer/OpenUIRenderer.svelte.d.ts.map +1 -1
- package/dist/g0-generative/renderer/OpenUIRenderer.test.js +143 -0
- package/dist/g0-geo/SovereignMap.svelte +13 -13
- package/dist/g0-geo/SovereignMap.svelte.d.ts.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/l0-layout/block-writer/BlockContent.svelte +23 -22
- package/dist/l0-layout/block-writer/BlockContent.svelte.d.ts.map +1 -1
- package/dist/l0-layout/block-writer/BlockContent.test.js +47 -0
- package/dist/l0-layout/block-writer/markdown.js +11 -11
- package/dist/l0-layout/block-writer/markdown.test.js +81 -0
- package/dist/l0-layout/card/StackedCard.svelte +87 -0
- package/dist/l0-layout/card/StackedCard.svelte.d.ts +9 -0
- package/dist/l0-layout/card/StackedCard.svelte.d.ts.map +1 -0
- package/dist/l0-layout/card/StackedCard.test.js +29 -0
- package/dist/l0-layout/index.d.ts +1 -0
- package/dist/l0-layout/index.d.ts.map +1 -1
- package/dist/l0-layout/index.js +1 -0
- package/dist/l0-layout/kanban/KanbanBoard.svelte +1 -1
- package/dist/l0-layout/kanban/KanbanColumn.svelte +1 -1
- package/dist/n1-flow-canvas/FlowCanvas.svelte +50 -6
- package/dist/n1-flow-canvas/FlowCanvas.svelte.d.ts.map +1 -1
- package/dist/n1-flow-canvas/index.d.ts +2 -0
- package/dist/n1-flow-canvas/index.d.ts.map +1 -1
- package/dist/n1-flow-canvas/index.js +1 -0
- package/dist/n1-flow-canvas/pipeline-adapter.d.ts +37 -0
- package/dist/n1-flow-canvas/pipeline-adapter.d.ts.map +1 -0
- package/dist/n1-flow-canvas/pipeline-adapter.js +160 -0
- package/dist/n2-manifold-disk/ManifoldDisk.svelte +62 -35
- package/dist/n2-manifold-disk/ManifoldDisk.svelte.d.ts.map +1 -1
- package/dist/n4-adaptive-manifold/AdaptiveManifold.svelte +23 -19
- package/dist/n4-adaptive-manifold/AdaptiveManifold.svelte.d.ts.map +1 -1
- package/dist/n4-adaptive-manifold/types.d.ts +3 -0
- package/dist/n4-adaptive-manifold/types.d.ts.map +1 -1
- package/dist/p0-primitives/ThemeProvider.svelte +28 -7
- package/dist/p0-primitives/ThemeProvider.svelte.d.ts +5 -0
- package/dist/p0-primitives/ThemeProvider.svelte.d.ts.map +1 -1
- package/dist/p0-primitives/canvas-theme.d.ts +21 -1
- package/dist/p0-primitives/canvas-theme.d.ts.map +1 -1
- package/dist/p0-primitives/canvas-theme.js +78 -23
- package/dist/p0-primitives/debug.d.ts +6 -0
- package/dist/p0-primitives/debug.d.ts.map +1 -0
- package/dist/p0-primitives/debug.js +21 -0
- package/dist/p0-primitives/theme.d.ts.map +1 -1
- package/dist/p0-primitives/theme.js +11 -31
- package/dist/p0-primitives/tokens/ambient.css +76 -0
- package/dist/p0-primitives/tokens/tokens.css +124 -29
- package/dist/p0-primitives/utils/index.d.ts +2 -0
- package/dist/p0-primitives/utils/index.d.ts.map +1 -1
- package/dist/p0-primitives/utils/index.js +1 -0
- package/dist/p0-primitives/utils/reveal.d.ts +15 -0
- package/dist/p0-primitives/utils/reveal.d.ts.map +1 -0
- package/dist/p0-primitives/utils/reveal.js +29 -0
- package/dist/p0-primitives/utils/reveal.test.js +95 -0
- package/dist/s0-state/SyncStatus.svelte +1 -1
- package/dist/s0-state/index.d.ts +2 -1
- package/dist/s0-state/index.d.ts.map +1 -1
- package/dist/s0-state/index.js +2 -0
- package/dist/s0-state/modal-stack-store.svelte.d.ts +3 -3
- package/dist/s0-state/modal-stack-store.svelte.js +2 -2
- package/dist/spatial/ForceSimulation.svelte.js +1 -1
- package/dist/spatial/ParticleAssembleMark.svelte +285 -0
- package/dist/spatial/ParticleAssembleMark.svelte.d.ts +24 -0
- package/dist/spatial/ParticleAssembleMark.svelte.d.ts.map +1 -0
- package/dist/spatial/ZoneTiler.test.js +90 -0
- package/dist/spatial/index.js +1 -0
- package/dist/spatial/particle-assemble-math.d.ts +22 -0
- package/dist/spatial/particle-assemble-math.d.ts.map +1 -0
- package/dist/spatial/particle-assemble-math.js +26 -0
- package/dist/spatial/particle-assemble-math.test.js +56 -0
- package/dist/t0-transport/substrate.svelte.d.ts.map +1 -1
- package/dist/t0-transport/substrate.svelte.js +10 -4
- package/dist/u0-primitives/LockIndicator.svelte +16 -14
- package/dist/u0-primitives/VerticalToolbar.svelte +24 -21
- package/dist/u0-primitives/accordion/Accordion.svelte +8 -7
- package/dist/u0-primitives/animated-icon/AnimatedIcon.svelte +3 -3
- package/dist/u0-primitives/animated-icon/AnimatedIcon.test.js +82 -0
- package/dist/u0-primitives/avatar/Avatar.svelte +14 -14
- package/dist/u0-primitives/avatar/Avatar.test.js +81 -0
- package/dist/u0-primitives/badge/Badge.svelte +6 -4
- package/dist/u0-primitives/badge/ValidityBadge.svelte +4 -27
- package/dist/u0-primitives/button/Button.svelte +15 -12
- package/dist/u0-primitives/card/Card.svelte +37 -15
- package/dist/u0-primitives/card/Card.test.js +86 -0
- package/dist/u0-primitives/command-palette/CommandPalette.svelte +48 -43
- package/dist/u0-primitives/command-palette/CommandPalette.test.js +202 -0
- package/dist/u0-primitives/dropdown/Dropdown.svelte +20 -25
- package/dist/u0-primitives/grant-badge/GrantStatusBadge.svelte +2 -2
- package/dist/u0-primitives/index.d.ts +6 -0
- package/dist/u0-primitives/index.d.ts.map +1 -1
- package/dist/u0-primitives/index.js +8 -0
- package/dist/u0-primitives/input/Input.svelte +77 -24
- package/dist/u0-primitives/input/Input.svelte.d.ts +2 -10
- package/dist/u0-primitives/input/Input.svelte.d.ts.map +1 -1
- package/dist/u0-primitives/input/Input.test.js +81 -1
- package/dist/u0-primitives/live-dot/LiveDot.svelte +56 -0
- package/dist/u0-primitives/live-dot/LiveDot.svelte.d.ts +11 -0
- package/dist/u0-primitives/live-dot/LiveDot.svelte.d.ts.map +1 -0
- package/dist/u0-primitives/live-dot/LiveDot.test.js +41 -0
- package/dist/u0-primitives/live-dot/index.d.ts +3 -0
- package/dist/u0-primitives/live-dot/index.d.ts.map +1 -0
- package/dist/u0-primitives/live-dot/index.js +1 -0
- package/dist/u0-primitives/modal/Modal.svelte +22 -19
- package/dist/u0-primitives/modal/Modal.test.js +1 -1
- package/dist/u0-primitives/spinner/Spinner.svelte +11 -79
- package/dist/u0-primitives/spinner/Spinner.svelte.d.ts.map +1 -1
- package/dist/u0-primitives/steps/Steps.svelte +18 -19
- package/dist/u0-primitives/surface-state/SurfaceState.svelte +7 -7
- package/dist/u0-primitives/tabs/Tabs.svelte +13 -11
- package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte +94 -0
- package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte.d.ts +16 -0
- package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte.d.ts.map +1 -0
- package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.test.js +48 -0
- package/dist/u0-primitives/theme-swatch-group/index.d.ts +3 -0
- package/dist/u0-primitives/theme-swatch-group/index.d.ts.map +1 -0
- package/dist/u0-primitives/theme-swatch-group/index.js +1 -0
- package/dist/u0-primitives/toggle/Toggle.svelte +10 -11
- package/dist/u0-primitives/tooltip/Tooltip.svelte +9 -9
- package/dist/u0-primitives/web-components/button-component.d.ts +5 -1
- package/dist/u0-primitives/web-components/button-component.d.ts.map +1 -1
- package/dist/u0-primitives/web-components/button-component.js +72 -33
- package/dist/u0-primitives/web-components/index.d.ts +3 -0
- package/dist/u0-primitives/web-components/index.d.ts.map +1 -0
- package/dist/u0-primitives/web-components/index.js +2 -0
- package/dist/u0-primitives/web-components/input-component.d.ts +5 -1
- package/dist/u0-primitives/web-components/input-component.d.ts.map +1 -1
- package/dist/u0-primitives/web-components/input-component.js +56 -39
- package/dist/u0-primitives/web-components/web-components.test.js +96 -0
- package/dist/u0-primitives/window-frame/WindowFrame.svelte +87 -0
- package/dist/u0-primitives/window-frame/WindowFrame.svelte.d.ts +10 -0
- package/dist/u0-primitives/window-frame/WindowFrame.svelte.d.ts.map +1 -0
- package/dist/u0-primitives/window-frame/WindowFrame.test.js +31 -0
- package/dist/u0-primitives/window-frame/index.d.ts +3 -0
- package/dist/u0-primitives/window-frame/index.d.ts.map +1 -0
- package/dist/u0-primitives/window-frame/index.js +1 -0
- package/dist/x0-enchanted-blocks/components/NodepadBlock.svelte +11 -2
- package/dist/x0-enchanted-blocks/components/NodepadBlock.svelte.d.ts.map +1 -1
- package/package.json +44 -28
- package/src/p0-primitives/tokens/ambient.css +76 -0
- package/src/p0-primitives/tokens/tokens.css +124 -29
- 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(
|
|
8
|
-
stroke: 'rgba(
|
|
9
|
-
text: '#
|
|
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: '#
|
|
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
|
-
|
|
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":"
|
|
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"}
|
package/dist/demos/index.d.ts
CHANGED
|
@@ -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"}
|
package/dist/demos/index.js
CHANGED
|
@@ -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
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
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 ?
|
|
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":"
|
|
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"}
|