sdocs 0.0.19 → 0.0.21

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 (16) hide show
  1. package/dist/client/App.svelte +1 -1
  2. package/dist/client/App.svelte.d.ts +1 -1
  3. package/dist/client/views/CollapsiblePanel.svelte +15 -15
  4. package/dist/client/views/ComponentView.svelte +186 -32
  5. package/dist/client/views/DataTable.svelte +1 -0
  6. package/dist/server/app-gen.js +1 -0
  7. package/dist/server/snippet-extractor.js +12 -1
  8. package/dist/ui/About.page.sdoc +1 -1
  9. package/dist/ui/Button/Button.sdoc +1 -1
  10. package/dist/ui/Dashboard.layout.sdoc +1 -1
  11. package/dist/ui/Stack/Stack.sdoc +9 -1
  12. package/dist/ui/styles/{fonts.css → fonts/fonts.css} +8 -8
  13. package/dist/ui/styles/sdocs.css +239 -0
  14. package/dist/ui/styles/theme.css +18 -252
  15. package/dist/vite.js +19 -0
  16. package/package.json +2 -2
package/dist/client/App.svelte CHANGED
@@ -8,7 +8,7 @@
8
8
  import LayoutView from './views/LayoutView.svelte';
9
9
  import HomePage from './views/HomePage.svelte';
10
10
  import { onMount } from 'svelte';
11
- import '../ui/styles/theme.css';
11
+ import '../ui/styles/sdocs.css';
12
12
 
13
13
  type ThemeMode = 'light' | 'dark';
14
14
 
package/dist/client/App.svelte.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { DocEntry } from '../types.js';
2
- import '../ui/styles/theme.css';
2
+ import '../ui/styles/sdocs.css';
3
3
  interface Props {
4
4
  docs: DocEntry[];
5
5
  logo?: string;
package/dist/client/views/CollapsiblePanel.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import type { Snippet } from 'svelte';
3
+ import { Icon } from '../../ui/Icon/index.js';
3
4
 
4
5
  interface Props {
5
6
  title: string;
@@ -12,9 +13,11 @@
12
13
  </script>
13
14
 
14
15
  <div class="sdocs-panel">
15
- <button class="sdocs-panel-header" onclick={() => expanded = !expanded}>
16
- <span class="sdocs-panel-arrow" class:expanded>&#9654;</span>
16
+ <button class="sdocs-panel-header" onclick={() => (expanded = !expanded)}>
17
17
  <span class="sdocs-panel-title">{title}</span>
18
+ <span class="sdocs-panel-chevron">
19
+ <Icon name={expanded ? 'chevron-down' : 'chevron-right'} --w="14px" --h="14px" />
20
+ </span>
18
21
  </button>
19
22
  {#if expanded}
20
23
  <div class="sdocs-panel-body">
@@ -25,39 +28,36 @@
25
28
 
26
29
  <style>
27
30
  .sdocs-panel {
28
- border: 1px solid var(--color-base-200);
29
- border-radius: 8px;
31
+ /* border: 1px solid var(--color-base-200); */
32
+ /* border-radius: 8px; */
30
33
  overflow: hidden;
34
+ background: var(--color-base-0);
31
35
  }
32
36
  .sdocs-panel-header {
33
37
  display: flex;
34
38
  align-items: center;
35
39
  gap: 8px;
36
40
  width: 100%;
37
- padding: 10px 14px;
41
+ padding: 6px 8px 6px 12px;
38
42
  border: none;
39
43
  background: var(--color-base-50);
40
44
  font: inherit;
41
45
  font-size: 13px;
42
46
  font-weight: 600;
43
- color: var(--color-base-900);
47
+ color: var(--color-base-700);
44
48
  cursor: pointer;
45
49
  text-align: left;
46
50
  }
47
51
  .sdocs-panel-header:hover {
48
52
  background: var(--color-base-100);
49
53
  }
50
- .sdocs-panel-arrow {
51
- font-size: 8px;
52
- transition: transform 0.15s;
53
- display: inline-block;
54
- width: 10px;
55
- }
56
- .sdocs-panel-arrow.expanded {
57
- transform: rotate(90deg);
54
+ .sdocs-panel-chevron {
55
+ margin-left: auto;
56
+ display: flex;
57
+ align-items: center;
58
58
  }
59
59
  .sdocs-panel-body {
60
60
  padding: 14px;
61
- border-top: 1px solid var(--color-base-200);
61
+ border-top: 1px solid var(--color-base-100);
62
62
  }
63
63
  </style>
package/dist/client/views/ComponentView.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import type { DocEntry } from '../../types.js';
3
+ import { Icon } from '../../ui/Icon/index.js';
3
4
  import CollapsiblePanel from './CollapsiblePanel.svelte';
4
5
  import PreviewFrame from './PreviewFrame.svelte';
5
6
  import ControlsPanel from './ControlsPanel.svelte';
@@ -50,17 +51,17 @@
50
51
  cssValues = { ...cssValues, [name]: value };
51
52
  }
52
53
 
53
- function generateUsageCode(name: string, props: Record<string, unknown>, css: Record<string, string>): string {
54
+ function formatAttr(name: string, value: unknown): string {
55
+ if (typeof value === 'string') return `${name}="${value}"`;
56
+ if (typeof value === 'boolean') return value ? name : `${name}={false}`;
57
+ return `${name}={${JSON.stringify(value)}}`;
58
+ }
59
+
60
+ function generateFallbackCode(name: string, props: Record<string, unknown>, css: Record<string, string>): string {
54
61
  const attrs: string[] = [];
55
62
  for (const [key, value] of Object.entries(props)) {
56
63
  if (value === undefined || value === null || value === '') continue;
57
- if (typeof value === 'string') {
58
- attrs.push(`${key}="${value}"`);
59
- } else if (typeof value === 'boolean') {
60
- attrs.push(value ? key : `${key}={false}`);
61
- } else {
62
- attrs.push(`${key}={${JSON.stringify(value)}}`);
63
- }
64
+ attrs.push(formatAttr(key, value));
64
65
  }
65
66
  for (const [key, value] of Object.entries(css)) {
66
67
  if (value === undefined || value === '') continue;
@@ -71,7 +72,126 @@
71
72
  return `<${name}\n ${attrs.join('\n ')}\n/>`;
72
73
  }
73
74
 
74
- const usageCode = $derived(generateUsageCode(componentName, propValues, cssValues));
75
+ /**
76
+ * Patch the Default snippet body with prop/CSS changes from Controls.
77
+ * Finds the root component opening tag and updates/adds changed attributes.
78
+ */
79
+ function patchSnippetCode(
80
+ snippetBody: string,
81
+ name: string,
82
+ currentProps: Record<string, unknown>,
83
+ currentCss: Record<string, string>,
84
+ initialProps: Record<string, unknown>,
85
+ initialCss: Record<string, string>,
86
+ ): string {
87
+ // Collect only changed props/css
88
+ const changes: [string, unknown][] = [];
89
+ for (const [key, value] of Object.entries(currentProps)) {
90
+ if (JSON.stringify(value) !== JSON.stringify(initialProps[key])) {
91
+ changes.push([key, value]);
92
+ }
93
+ }
94
+ for (const [key, value] of Object.entries(currentCss)) {
95
+ if (value !== (initialCss[key] ?? '')) {
96
+ changes.push([key, value]);
97
+ }
98
+ }
99
+
100
+ if (changes.length === 0) return snippetBody;
101
+
102
+ // Find the opening tag: <ComponentName ...> or <ComponentName ... />
103
+ const tagStart = snippetBody.indexOf(`<${name}`);
104
+ if (tagStart === -1) return snippetBody;
105
+
106
+ // Find the end of the opening tag, respecting {} expressions
107
+ let braceDepth = 0;
108
+ let tagEnd = -1;
109
+ for (let i = tagStart + name.length + 1; i < snippetBody.length; i++) {
110
+ if (snippetBody[i] === '{') braceDepth++;
111
+ else if (snippetBody[i] === '}') braceDepth--;
112
+ else if (braceDepth === 0 && snippetBody[i] === '>') {
113
+ tagEnd = i;
114
+ break;
115
+ }
116
+ }
117
+ if (tagEnd === -1) return snippetBody;
118
+
119
+ const isSelfClosing = snippetBody[tagEnd - 1] === '/';
120
+ const attrsStart = tagStart + `<${name}`.length;
121
+ const attrsEnd = isSelfClosing ? tagEnd - 1 : tagEnd;
122
+ let attrs = snippetBody.slice(attrsStart, attrsEnd);
123
+
124
+ for (const [attrName, value] of changes) {
125
+ const formatted = formatAttr(attrName, value);
126
+ const escaped = attrName.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
127
+
128
+ // Try replacing existing: name="...", name={...}, or bare name
129
+ const patterns = [
130
+ new RegExp(`(\\s)${escaped}="[^"]*"`),
131
+ new RegExp(`(\\s)${escaped}=\\{[^}]*\\}`),
132
+ new RegExp(`(\\s)${escaped}(?=\\s|$)`),
133
+ ];
134
+
135
+ let replaced = false;
136
+ for (const pattern of patterns) {
137
+ if (pattern.test(attrs)) {
138
+ attrs = attrs.replace(pattern, `$1${formatted}`);
139
+ replaced = true;
140
+ break;
141
+ }
142
+ }
143
+
144
+ if (!replaced) {
145
+ attrs += ` ${formatted}`;
146
+ }
147
+ }
148
+
149
+ const closing = isSelfClosing ? '/>' : '>';
150
+ return snippetBody.slice(0, attrsStart) + attrs + closing + snippetBody.slice(tagEnd + 1);
151
+ }
152
+
153
+ // Initial values for diffing (computed once per doc change)
154
+ const initialProps = $derived(meta.args ?? {});
155
+ const initialCss = $derived.by(() => {
156
+ const css: Record<string, string> = {};
157
+ if (cd?.cssProps) {
158
+ for (const cp of cd.cssProps) {
159
+ if (cp.default) css[cp.name] = cp.default;
160
+ }
161
+ }
162
+ return css;
163
+ });
164
+
165
+ const usageCode = $derived.by(() => {
166
+ if (defaultSnippet?.body) {
167
+ return patchSnippetCode(defaultSnippet.body, componentName, propValues, cssValues, initialProps, initialCss);
168
+ }
169
+ return generateFallbackCode(componentName, propValues, cssValues);
170
+ });
171
+
172
+ // Highlighted usage code via server-side Shiki
173
+ let highlightedUsageHtml = $state('');
174
+ let highlightTimer: ReturnType<typeof setTimeout> | undefined;
175
+
176
+ $effect(() => {
177
+ const code = usageCode;
178
+ clearTimeout(highlightTimer);
179
+ highlightTimer = setTimeout(async () => {
180
+ try {
181
+ const res = await fetch('/__sdocs/highlight', {
182
+ method: 'POST',
183
+ headers: { 'Content-Type': 'application/json' },
184
+ body: JSON.stringify({ code, lang: 'svelte' }),
185
+ });
186
+ if (res.ok) {
187
+ const { html } = await res.json();
188
+ highlightedUsageHtml = html;
189
+ }
190
+ } catch {
191
+ // Fallback: leave previous value
192
+ }
193
+ }, 150);
194
+ });
75
195
 
76
196
  function handleReset() {
77
197
  propValues = { ...(meta.args ?? {}) };
@@ -146,7 +266,7 @@
146
266
  </div>
147
267
  <div class="sdocs-panels">
148
268
  <CollapsiblePanel title="Preview">
149
- <PreviewFrame src={focusedSnippet.previewUrl} {activeStylesheet} />
269
+ <PreviewFrame src={focusedSnippet.previewUrl ?? ''} {activeStylesheet} />
150
270
  </CollapsiblePanel>
151
271
  <CollapsiblePanel title="Code" defaultExpanded={false}>
152
272
  <div class="sdocs-code-block">{@html focusedSnippet.highlightedHtml ?? ''}</div>
@@ -164,17 +284,23 @@
164
284
  <div class="sdocs-panels">
165
285
  <!-- Showcase -->
166
286
  {#if defaultSnippet}
167
- <CollapsiblePanel title="Preview">
287
+ <div class="sdocs-preview-wrapper">
168
288
  <PreviewFrame
169
- src={defaultSnippet.previewUrl}
289
+ src={defaultSnippet.previewUrl ?? ''}
170
290
  props={propValues}
171
291
  cssVars={cssValues}
172
292
  {activeStylesheet}
173
293
  />
174
- </CollapsiblePanel>
294
+ </div>
175
295
 
176
- <CollapsiblePanel title="Preview Code">
177
- <div class="sdocs-code-block"><pre><code>{usageCode}</code></pre></div>
296
+ <CollapsiblePanel title="Preview Code" defaultExpanded={false}>
297
+ <div class="sdocs-code-block">
298
+ {#if highlightedUsageHtml}
299
+ {@html highlightedUsageHtml}
300
+ {:else}
301
+ <pre><code>{usageCode}</code></pre>
302
+ {/if}
303
+ </div>
178
304
  </CollapsiblePanel>
179
305
  {/if}
180
306
 
@@ -262,29 +388,37 @@
262
388
  />
263
389
  </CollapsiblePanel>
264
390
 
265
- <!-- Examples -->
266
- {#if exampleSnippets.length > 0}
267
- <h2 class="sdocs-section-title">Examples</h2>
268
- {#each exampleSnippets as example (example.name)}
269
- <div class="sdocs-example">
270
- <h3 class="sdocs-example-title">{example.name}</h3>
271
- <CollapsiblePanel title="Preview">
272
- <PreviewFrame src={example.previewUrl} {activeStylesheet} />
273
- </CollapsiblePanel>
391
+ </div>
392
+
393
+ {#if exampleSnippets.length > 0}
394
+ <hr class="sdocs-divider" />
395
+ <h2 class="sdocs-section-title">Examples</h2>
396
+ {#each exampleSnippets as example (example.name)}
397
+ <div class="sdocs-example">
398
+ <h3 class="sdocs-example-title">
399
+ <Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-500)" />
400
+ {example.name}
401
+ </h3>
402
+ <div class="sdocs-panels">
403
+ <div class="sdocs-preview-wrapper">
404
+ <PreviewFrame src={example.previewUrl ?? ''} {activeStylesheet} />
405
+ </div>
274
406
  <CollapsiblePanel title="Code" defaultExpanded={false}>
275
407
  <div class="sdocs-code-block">{@html example.highlightedHtml ?? ''}</div>
276
408
  </CollapsiblePanel>
277
409
  </div>
278
- {/each}
279
- {/if}
410
+ </div>
411
+ {/each}
412
+ {/if}
280
413
 
281
- <!-- Source -->
282
- {#if doc.highlightedSource}
414
+ {#if doc.highlightedSource}
415
+ <hr class="sdocs-divider" />
416
+ <div class="sdocs-panels">
283
417
  <CollapsiblePanel title="Component Source" defaultExpanded={false}>
284
418
  <div class="sdocs-code-block">{@html doc.highlightedSource}</div>
285
419
  </CollapsiblePanel>
286
- {/if}
287
- </div>
420
+ </div>
421
+ {/if}
288
422
  {/if}
289
423
  </div>
290
424
 
@@ -311,13 +445,29 @@
311
445
  .sdocs-panels {
312
446
  display: flex;
313
447
  flex-direction: column;
314
- gap: 12px;
448
+ gap: 1px;
449
+ border: 1px solid var(--color-base-200);
450
+ background: var(--color-base-200);
451
+ border-radius: 8px;
452
+ overflow: hidden;
453
+ }
454
+ .sdocs-preview-wrapper {
455
+ background: var(--color-base-0);
456
+ padding: 16px;
457
+ }
458
+ .sdocs-divider {
459
+ border: none;
460
+ border-top: 1px solid var(--color-base-200);
461
+ margin: 24px 0;
315
462
  }
316
463
  .sdocs-section-title {
317
464
  font-size: 18px;
318
465
  font-weight: 600;
319
466
  color: var(--color-base-900);
320
- margin: 24px 0 8px;
467
+ margin: 24px 0 16px;
468
+ }
469
+ .sdocs-example + .sdocs-example {
470
+ margin-top: 16px;
321
471
  }
322
472
  .sdocs-example {
323
473
  display: flex;
@@ -325,6 +475,9 @@
325
475
  gap: 8px;
326
476
  }
327
477
  .sdocs-example-title {
478
+ display: flex;
479
+ align-items: center;
480
+ gap: 6px;
328
481
  font-size: 15px;
329
482
  font-weight: 600;
330
483
  color: var(--color-base-800);
@@ -334,6 +487,7 @@
334
487
  overflow-x: auto;
335
488
  font-size: 13px;
336
489
  line-height: 1.5;
490
+ tab-size: 4;
337
491
  }
338
492
  .sdocs-code-block :global(pre) {
339
493
  margin: 0;
package/dist/client/views/DataTable.svelte CHANGED
@@ -74,5 +74,6 @@
74
74
  color: var(--color-base-400);
75
75
  font-size: 13px;
76
76
  font-style: italic;
77
+ margin: 0;
77
78
  }
78
79
  </style>
package/dist/server/app-gen.js CHANGED
@@ -33,6 +33,7 @@ function generateIndexHtml(title) {
33
33
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
34
34
  <link rel="icon" type="image/png" href="./client/favicon.png">
35
35
  <title>${title}</title>
36
+ <style>body { margin: 0; }</style>
36
37
  </head>
37
38
  <body>
38
39
  <div id="app"></div>
package/dist/server/snippet-extractor.js CHANGED
@@ -35,7 +35,7 @@ export function extractSnippets(source) {
35
35
  }
36
36
  }
37
37
  if (depth === 0) {
38
- const body = markup.slice(bodyStart, i).trim();
38
+ const body = dedent(markup.slice(bodyStart, i).trim());
39
39
  snippets.push({ name, body });
40
40
  searchFrom = i + '{/snippet}'.length;
41
41
  }
@@ -45,6 +45,17 @@ export function extractSnippets(source) {
45
45
  }
46
46
  return snippets;
47
47
  }
48
+ /** Remove common leading whitespace from all lines */
49
+ function dedent(text) {
50
+ const lines = text.split('\n');
51
+ // Skip first line (already trimmed) when computing minimum indent
52
+ const rest = lines.slice(1).filter((l) => l.trim().length > 0);
53
+ const indents = rest.map((l) => l.match(/^(\s*)/)?.[1].length ?? 0);
54
+ const min = indents.length > 0 ? Math.min(...indents) : 0;
55
+ if (min === 0)
56
+ return text;
57
+ return [lines[0], ...lines.slice(1).map((l) => l.slice(min))].join('\n');
58
+ }
48
59
  /** Check if a Default snippet exists or needs auto-generation */
49
60
  export function hasDefaultSnippet(snippets) {
50
61
  return snippets.some((s) => s.name === 'Default');
package/dist/ui/About.page.sdoc CHANGED
@@ -5,7 +5,7 @@
5
5
  };
6
6
  </script>
7
7
 
8
- <div style="max-width: 640px; padding: 32px; font-family: system-ui, sans-serif; line-height: 1.6; color: #1e293b;">
8
+ <div style="max-width: 640px; padding: 32px;">
9
9
  <h1>About sdocs</h1>
10
10
  <p>
11
11
  sdocs is a lightweight documentation tool for Svelte 5 components.
package/dist/ui/Button/Button.sdoc CHANGED
@@ -15,7 +15,7 @@
15
15
 
16
16
  {#snippet WithLeftIcon()}
17
17
  <Button onclick={() => alert('Settings')}>
18
- {#snippet left()}<Icon name="settings" --w="14px" --h="14px" />{/snippet}
18
+ {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
19
19
  Settings
20
20
  </Button>
21
21
  {/snippet}
package/dist/ui/Dashboard.layout.sdoc CHANGED
@@ -5,7 +5,7 @@
5
5
  };
6
6
  </script>
7
7
 
8
- <div style="display: flex; flex-direction: column; height: 100vh; font-family: system-ui, sans-serif;">
8
+ <div style="display: flex; flex-direction: column; height: 100vh; ">
9
9
  <header style="padding: 12px 24px; background: #1e293b; color: white; display: flex; align-items: center; justify-content: space-between;">
10
10
  <span style="font-weight: 700; font-size: 16px;">Dashboard</span>
11
11
  <nav style="display: flex; gap: 16px; font-size: 14px;">
package/dist/ui/Stack/Stack.sdoc CHANGED
@@ -9,6 +9,14 @@
9
9
  };
10
10
  </script>
11
11
 
12
+ {#snippet Default()}
13
+ <Stack>
14
+ <Button>One</Button>
15
+ <Button>Two</Button>
16
+ <Button>Three</Button>
17
+ </Stack>
18
+ {/snippet}
19
+
12
20
  {#snippet Column()}
13
21
  <Stack --gap="8px">
14
22
  <Button>One</Button>
@@ -41,4 +49,4 @@
41
49
  <Button>D</Button>
42
50
  <Button>E</Button>
43
51
  </Stack>
44
- {/snippet}
52
+ {/snippet}
package/dist/ui/styles/{fonts.css → fonts/fonts.css} RENAMED
@@ -4,7 +4,7 @@
4
4
  font-style: normal;
5
5
  font-weight: 300 900;
6
6
  font-display: swap;
7
- src: url('./fonts/figtree-latin.woff2') format('woff2');
7
+ src: url('./figtree-latin.woff2') format('woff2');
8
8
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
9
9
  U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
10
10
  U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
@@ -14,7 +14,7 @@
14
14
  font-style: normal;
15
15
  font-weight: 300 900;
16
16
  font-display: swap;
17
- src: url('./fonts/figtree-latin-ext.woff2') format('woff2');
17
+ src: url('./figtree-latin-ext.woff2') format('woff2');
18
18
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
19
19
  U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
20
20
  U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
@@ -25,7 +25,7 @@
25
25
  font-style: italic;
26
26
  font-weight: 300 900;
27
27
  font-display: swap;
28
- src: url('./fonts/figtree-italic-latin.woff2') format('woff2');
28
+ src: url('./figtree-italic-latin.woff2') format('woff2');
29
29
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
30
30
  U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
31
31
  U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
@@ -35,7 +35,7 @@
35
35
  font-style: italic;
36
36
  font-weight: 300 900;
37
37
  font-display: swap;
38
- src: url('./fonts/figtree-italic-latin-ext.woff2') format('woff2');
38
+ src: url('./figtree-italic-latin-ext.woff2') format('woff2');
39
39
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
40
40
  U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
41
41
  U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
@@ -48,7 +48,7 @@
48
48
  font-style: normal;
49
49
  font-weight: 100 800;
50
50
  font-display: swap;
51
- src: url('./fonts/jetbrains-mono-latin.woff2') format('woff2');
51
+ src: url('./jetbrains-mono-latin.woff2') format('woff2');
52
52
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
53
53
  U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
54
54
  U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
@@ -58,7 +58,7 @@
58
58
  font-style: normal;
59
59
  font-weight: 100 800;
60
60
  font-display: swap;
61
- src: url('./fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
61
+ src: url('./jetbrains-mono-latin-ext.woff2') format('woff2');
62
62
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
63
63
  U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
64
64
  U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
@@ -69,7 +69,7 @@
69
69
  font-style: italic;
70
70
  font-weight: 100 800;
71
71
  font-display: swap;
72
- src: url('./fonts/jetbrains-mono-italic-latin.woff2') format('woff2');
72
+ src: url('./jetbrains-mono-italic-latin.woff2') format('woff2');
73
73
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
74
74
  U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
75
75
  U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
@@ -79,7 +79,7 @@
79
79
  font-style: italic;
80
80
  font-weight: 100 800;
81
81
  font-display: swap;
82
- src: url('./fonts/jetbrains-mono-italic-latin-ext.woff2') format('woff2');
82
+ src: url('./jetbrains-mono-italic-latin-ext.woff2') format('woff2');
83
83
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
84
84
  U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
85
85
  U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
package/dist/ui/styles/sdocs.css ADDED
@@ -0,0 +1,239 @@
1
+ @import './fonts/fonts.css';
2
+ @import './theme.css';
3
+
4
+ /* sdocs shell styles — scoped to .sdocs-app
5
+ *
6
+ * Used by the sdocs UI (sidebar, panels, nav).
7
+ * Scoped to .sdocs-app so it doesn't leak into the host app when embedded.
8
+ */
9
+
10
+ .sdocs-app {
11
+ margin: 0;
12
+ font-family: var(--sans);
13
+ color: var(--color-base-900);
14
+ }
15
+
16
+ .sdocs-app[data-sdocs-theme='dark'] {
17
+ /* base — layouts, backgrounds, surfaces, borders, text (inverted) */
18
+ --color-base-0: var(--color-zinc-1000);
19
+ --color-base-50: var(--color-zinc-950);
20
+ --color-base-100: var(--color-zinc-900);
21
+ --color-base-150: var(--color-zinc-850);
22
+ --color-base-200: var(--color-zinc-800);
23
+ --color-base-250: var(--color-zinc-750);
24
+ --color-base-300: var(--color-zinc-700);
25
+ --color-base-350: var(--color-zinc-650);
26
+ --color-base-400: var(--color-zinc-600);
27
+ --color-base-450: var(--color-zinc-550);
28
+ --color-base-500: var(--color-zinc-500);
29
+ --color-base-550: var(--color-zinc-450);
30
+ --color-base-600: var(--color-zinc-400);
31
+ --color-base-650: var(--color-zinc-350);
32
+ --color-base-700: var(--color-zinc-300);
33
+ --color-base-750: var(--color-zinc-250);
34
+ --color-base-800: var(--color-zinc-200);
35
+ --color-base-850: var(--color-zinc-150);
36
+ --color-base-900: var(--color-zinc-100);
37
+ --color-base-950: var(--color-zinc-50);
38
+ --color-base-1000: var(--color-zinc-0);
39
+ /* success (inverted) */
40
+ --color-success-50: var(--color-green-950);
41
+ --color-success-100: var(--color-green-900);
42
+ --color-success-150: var(--color-green-850);
43
+ --color-success-200: var(--color-green-800);
44
+ --color-success-250: var(--color-green-750);
45
+ --color-success-300: var(--color-green-700);
46
+ --color-success-350: var(--color-green-650);
47
+ --color-success-400: var(--color-green-600);
48
+ --color-success-450: var(--color-green-550);
49
+ --color-success-500: var(--color-green-500);
50
+ --color-success-550: var(--color-green-450);
51
+ --color-success-600: var(--color-green-400);
52
+ --color-success-650: var(--color-green-350);
53
+ --color-success-700: var(--color-green-300);
54
+ --color-success-750: var(--color-green-250);
55
+ --color-success-800: var(--color-green-200);
56
+ --color-success-850: var(--color-green-150);
57
+ --color-success-900: var(--color-green-100);
58
+ --color-success-950: var(--color-green-50);
59
+ /* danger (inverted) */
60
+ --color-danger-50: var(--color-red-950);
61
+ --color-danger-100: var(--color-red-900);
62
+ --color-danger-150: var(--color-red-850);
63
+ --color-danger-200: var(--color-red-800);
64
+ --color-danger-250: var(--color-red-750);
65
+ --color-danger-300: var(--color-red-700);
66
+ --color-danger-350: var(--color-red-650);
67
+ --color-danger-400: var(--color-red-600);
68
+ --color-danger-450: var(--color-red-550);
69
+ --color-danger-500: var(--color-red-500);
70
+ --color-danger-550: var(--color-red-450);
71
+ --color-danger-600: var(--color-red-400);
72
+ --color-danger-650: var(--color-red-350);
73
+ --color-danger-700: var(--color-red-300);
74
+ --color-danger-750: var(--color-red-250);
75
+ --color-danger-800: var(--color-red-200);
76
+ --color-danger-850: var(--color-red-150);
77
+ --color-danger-900: var(--color-red-100);
78
+ --color-danger-950: var(--color-red-50);
79
+ /* warning (inverted) */
80
+ --color-warning-50: var(--color-orange-950);
81
+ --color-warning-100: var(--color-orange-900);
82
+ --color-warning-150: var(--color-orange-850);
83
+ --color-warning-200: var(--color-orange-800);
84
+ --color-warning-250: var(--color-orange-750);
85
+ --color-warning-300: var(--color-orange-700);
86
+ --color-warning-350: var(--color-orange-650);
87
+ --color-warning-400: var(--color-orange-600);
88
+ --color-warning-450: var(--color-orange-550);
89
+ --color-warning-500: var(--color-orange-500);
90
+ --color-warning-550: var(--color-orange-450);
91
+ --color-warning-600: var(--color-orange-400);
92
+ --color-warning-650: var(--color-orange-350);
93
+ --color-warning-700: var(--color-orange-300);
94
+ --color-warning-750: var(--color-orange-250);
95
+ --color-warning-800: var(--color-orange-200);
96
+ --color-warning-850: var(--color-orange-150);
97
+ --color-warning-900: var(--color-orange-100);
98
+ --color-warning-950: var(--color-orange-50);
99
+ /* focus (inverted) */
100
+ --color-focus-50: var(--color-yellow-950);
101
+ --color-focus-100: var(--color-yellow-900);
102
+ --color-focus-150: var(--color-yellow-850);
103
+ --color-focus-200: var(--color-yellow-800);
104
+ --color-focus-250: var(--color-yellow-750);
105
+ --color-focus-300: var(--color-yellow-700);
106
+ --color-focus-350: var(--color-yellow-650);
107
+ --color-focus-400: var(--color-yellow-600);
108
+ --color-focus-450: var(--color-yellow-550);
109
+ --color-focus-500: var(--color-yellow-500);
110
+ --color-focus-550: var(--color-yellow-450);
111
+ --color-focus-600: var(--color-yellow-400);
112
+ --color-focus-650: var(--color-yellow-350);
113
+ --color-focus-700: var(--color-yellow-300);
114
+ --color-focus-750: var(--color-yellow-250);
115
+ --color-focus-800: var(--color-yellow-200);
116
+ --color-focus-850: var(--color-yellow-150);
117
+ --color-focus-900: var(--color-yellow-100);
118
+ --color-focus-950: var(--color-yellow-50);
119
+ /* component (inverted) */
120
+ --color-component-50: var(--color-pink-950);
121
+ --color-component-100: var(--color-pink-900);
122
+ --color-component-150: var(--color-pink-850);
123
+ --color-component-200: var(--color-pink-800);
124
+ --color-component-250: var(--color-pink-750);
125
+ --color-component-300: var(--color-pink-700);
126
+ --color-component-350: var(--color-pink-650);
127
+ --color-component-400: var(--color-pink-600);
128
+ --color-component-450: var(--color-pink-550);
129
+ --color-component-500: var(--color-pink-500);
130
+ --color-component-550: var(--color-pink-450);
131
+ --color-component-600: var(--color-pink-400);
132
+ --color-component-650: var(--color-pink-350);
133
+ --color-component-700: var(--color-pink-300);
134
+ --color-component-750: var(--color-pink-250);
135
+ --color-component-800: var(--color-pink-200);
136
+ --color-component-850: var(--color-pink-150);
137
+ --color-component-900: var(--color-pink-100);
138
+ --color-component-950: var(--color-pink-50);
139
+ /* layout (inverted) */
140
+ --color-layout-50: var(--color-purple-950);
141
+ --color-layout-100: var(--color-purple-900);
142
+ --color-layout-150: var(--color-purple-850);
143
+ --color-layout-200: var(--color-purple-800);
144
+ --color-layout-250: var(--color-purple-750);
145
+ --color-layout-300: var(--color-purple-700);
146
+ --color-layout-350: var(--color-purple-650);
147
+ --color-layout-400: var(--color-purple-600);
148
+ --color-layout-450: var(--color-purple-550);
149
+ --color-layout-500: var(--color-purple-500);
150
+ --color-layout-550: var(--color-purple-450);
151
+ --color-layout-600: var(--color-purple-400);
152
+ --color-layout-650: var(--color-purple-350);
153
+ --color-layout-700: var(--color-purple-300);
154
+ --color-layout-750: var(--color-purple-250);
155
+ --color-layout-800: var(--color-purple-200);
156
+ --color-layout-850: var(--color-purple-150);
157
+ --color-layout-900: var(--color-purple-100);
158
+ --color-layout-950: var(--color-purple-50);
159
+ /* example (inverted) */
160
+ --color-example-50: var(--color-cyan-950);
161
+ --color-example-100: var(--color-cyan-900);
162
+ --color-example-150: var(--color-cyan-850);
163
+ --color-example-200: var(--color-cyan-800);
164
+ --color-example-250: var(--color-cyan-750);
165
+ --color-example-300: var(--color-cyan-700);
166
+ --color-example-350: var(--color-cyan-650);
167
+ --color-example-400: var(--color-cyan-600);
168
+ --color-example-450: var(--color-cyan-550);
169
+ --color-example-500: var(--color-cyan-500);
170
+ --color-example-550: var(--color-cyan-450);
171
+ --color-example-600: var(--color-cyan-400);
172
+ --color-example-650: var(--color-cyan-350);
173
+ --color-example-700: var(--color-cyan-300);
174
+ --color-example-750: var(--color-cyan-250);
175
+ --color-example-800: var(--color-cyan-200);
176
+ --color-example-850: var(--color-cyan-150);
177
+ --color-example-900: var(--color-cyan-100);
178
+ --color-example-950: var(--color-cyan-50);
179
+ /* docs (inverted) */
180
+ --color-docs-50: var(--color-amber-950);
181
+ --color-docs-100: var(--color-amber-900);
182
+ --color-docs-150: var(--color-amber-850);
183
+ --color-docs-200: var(--color-amber-800);
184
+ --color-docs-250: var(--color-amber-750);
185
+ --color-docs-300: var(--color-amber-700);
186
+ --color-docs-350: var(--color-amber-650);
187
+ --color-docs-400: var(--color-amber-600);
188
+ --color-docs-450: var(--color-amber-550);
189
+ --color-docs-500: var(--color-amber-500);
190
+ --color-docs-550: var(--color-amber-450);
191
+ --color-docs-600: var(--color-amber-400);
192
+ --color-docs-650: var(--color-amber-350);
193
+ --color-docs-700: var(--color-amber-300);
194
+ --color-docs-750: var(--color-amber-250);
195
+ --color-docs-800: var(--color-amber-200);
196
+ --color-docs-850: var(--color-amber-150);
197
+ --color-docs-900: var(--color-amber-100);
198
+ --color-docs-950: var(--color-amber-50);
199
+ /* page (inverted) */
200
+ --color-page-50: var(--color-yellow-950);
201
+ --color-page-100: var(--color-yellow-900);
202
+ --color-page-150: var(--color-yellow-850);
203
+ --color-page-200: var(--color-yellow-800);
204
+ --color-page-250: var(--color-yellow-750);
205
+ --color-page-300: var(--color-yellow-700);
206
+ --color-page-350: var(--color-yellow-650);
207
+ --color-page-400: var(--color-yellow-600);
208
+ --color-page-450: var(--color-yellow-550);
209
+ --color-page-500: var(--color-yellow-500);
210
+ --color-page-550: var(--color-yellow-450);
211
+ --color-page-600: var(--color-yellow-400);
212
+ --color-page-650: var(--color-yellow-350);
213
+ --color-page-700: var(--color-yellow-300);
214
+ --color-page-750: var(--color-yellow-250);
215
+ --color-page-800: var(--color-yellow-200);
216
+ --color-page-850: var(--color-yellow-150);
217
+ --color-page-900: var(--color-yellow-100);
218
+ --color-page-950: var(--color-yellow-50);
219
+ /* action (inverted) */
220
+ --color-action-50: var(--color-blue-950);
221
+ --color-action-100: var(--color-blue-900);
222
+ --color-action-150: var(--color-blue-850);
223
+ --color-action-200: var(--color-blue-800);
224
+ --color-action-250: var(--color-blue-750);
225
+ --color-action-300: var(--color-blue-700);
226
+ --color-action-350: var(--color-blue-650);
227
+ --color-action-400: var(--color-blue-600);
228
+ --color-action-450: var(--color-blue-550);
229
+ --color-action-500: var(--color-blue-500);
230
+ --color-action-550: var(--color-blue-450);
231
+ --color-action-600: var(--color-blue-400);
232
+ --color-action-650: var(--color-blue-350);
233
+ --color-action-700: var(--color-blue-300);
234
+ --color-action-750: var(--color-blue-250);
235
+ --color-action-800: var(--color-blue-200);
236
+ --color-action-850: var(--color-blue-150);
237
+ --color-action-900: var(--color-blue-100);
238
+ --color-action-950: var(--color-blue-50);
239
+ }
package/dist/ui/styles/theme.css CHANGED
@@ -1,12 +1,13 @@
1
- @import './fonts.css';
2
-
3
- /* sdocs design tokens
1
+ /* sdocs theme tokens
4
2
  *
5
- * Layer 1 — Primitives (Tailwind v4 oklch, never use directly in components)
6
- * Layer 2 — Semantic aliases (per-theme, use these in components)
3
+ * Shared foundation imported by both sdocs.css (shell) and demo.css (iframes).
4
+ * Defines font vars, all color primitives, and light-mode semantic aliases on :root.
7
5
  */
8
6
 
9
- .sdocs-app {
7
+ :root {
8
+ --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
9
+ --mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
10
+
10
11
  /* zinc — Tailwind v4 zinc (oklch), 150-850 interpolated */
11
12
  --color-zinc-0: #fff;
12
13
  --color-zinc-50: oklch(0.985 0 0);
@@ -450,17 +451,7 @@
450
451
  --color-rose-900: oklch(0.404 0.152 12.447);
451
452
  --color-rose-950: oklch(0.271 0.105 12.094);
452
453
 
453
- --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
454
- --mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
455
- }
456
-
457
- .sdocs-app {
458
- font-family: var(--sans);
459
- }
460
-
461
- .sdocs-app,
462
- .sdocs-app[data-sdocs-theme="light"] {
463
- /* base — layouts, backgrounds, surfaces, borders, text */
454
+ /* base — layouts, backgrounds, surfaces, borders, text (light mode) */
464
455
  --color-base-0: var(--color-zinc-0);
465
456
  --color-base-50: var(--color-zinc-50);
466
457
  --color-base-100: var(--color-zinc-100);
@@ -482,7 +473,7 @@
482
473
  --color-base-900: var(--color-zinc-900);
483
474
  --color-base-950: var(--color-zinc-950);
484
475
  --color-base-1000: var(--color-zinc-1000);
485
- /* success — positive feedback, confirmations, valid states */
476
+ /* success */
486
477
  --color-success-50: var(--color-green-50);
487
478
  --color-success-100: var(--color-green-100);
488
479
  --color-success-150: var(--color-green-150);
@@ -502,7 +493,7 @@
502
493
  --color-success-850: var(--color-green-850);
503
494
  --color-success-900: var(--color-green-900);
504
495
  --color-success-950: var(--color-green-950);
505
- /* danger — errors, destructive actions, invalid states */
496
+ /* danger */
506
497
  --color-danger-50: var(--color-red-50);
507
498
  --color-danger-100: var(--color-red-100);
508
499
  --color-danger-150: var(--color-red-150);
@@ -522,7 +513,7 @@
522
513
  --color-danger-850: var(--color-red-850);
523
514
  --color-danger-900: var(--color-red-900);
524
515
  --color-danger-950: var(--color-red-950);
525
- /* warning — caution, attention needed */
516
+ /* warning */
526
517
  --color-warning-50: var(--color-orange-50);
527
518
  --color-warning-100: var(--color-orange-100);
528
519
  --color-warning-150: var(--color-orange-150);
@@ -542,7 +533,7 @@
542
533
  --color-warning-850: var(--color-orange-850);
543
534
  --color-warning-900: var(--color-orange-900);
544
535
  --color-warning-950: var(--color-orange-950);
545
- /* focus — selection, highlights, active states */
536
+ /* focus */
546
537
  --color-focus-50: var(--color-yellow-50);
547
538
  --color-focus-100: var(--color-yellow-100);
548
539
  --color-focus-150: var(--color-yellow-150);
@@ -562,7 +553,7 @@
562
553
  --color-focus-850: var(--color-yellow-850);
563
554
  --color-focus-900: var(--color-yellow-900);
564
555
  --color-focus-950: var(--color-yellow-950);
565
- /* component — component doc badges, tags, accents */
556
+ /* component */
566
557
  --color-component-50: var(--color-pink-50);
567
558
  --color-component-100: var(--color-pink-100);
568
559
  --color-component-150: var(--color-pink-150);
@@ -582,7 +573,7 @@
582
573
  --color-component-850: var(--color-pink-850);
583
574
  --color-component-900: var(--color-pink-900);
584
575
  --color-component-950: var(--color-pink-950);
585
- /* layout — layout doc badges, tags, accents */
576
+ /* layout */
586
577
  --color-layout-50: var(--color-purple-50);
587
578
  --color-layout-100: var(--color-purple-100);
588
579
  --color-layout-150: var(--color-purple-150);
@@ -602,7 +593,7 @@
602
593
  --color-layout-850: var(--color-purple-850);
603
594
  --color-layout-900: var(--color-purple-900);
604
595
  --color-layout-950: var(--color-purple-950);
605
- /* example — code examples, snippets, playground accents */
596
+ /* example */
606
597
  --color-example-50: var(--color-cyan-50);
607
598
  --color-example-100: var(--color-cyan-100);
608
599
  --color-example-150: var(--color-cyan-150);
@@ -622,7 +613,7 @@
622
613
  --color-example-850: var(--color-cyan-850);
623
614
  --color-example-900: var(--color-cyan-900);
624
615
  --color-example-950: var(--color-cyan-950);
625
- /* docs — documentation file badges, tags, accents */
616
+ /* docs */
626
617
  --color-docs-50: var(--color-amber-50);
627
618
  --color-docs-100: var(--color-amber-100);
628
619
  --color-docs-150: var(--color-amber-150);
@@ -642,7 +633,7 @@
642
633
  --color-docs-850: var(--color-amber-850);
643
634
  --color-docs-900: var(--color-amber-900);
644
635
  --color-docs-950: var(--color-amber-950);
645
- /* page — page doc badges, tags, accents */
636
+ /* page */
646
637
  --color-page-50: var(--color-yellow-50);
647
638
  --color-page-100: var(--color-yellow-100);
648
639
  --color-page-150: var(--color-yellow-150);
@@ -662,7 +653,7 @@
662
653
  --color-page-850: var(--color-yellow-850);
663
654
  --color-page-900: var(--color-yellow-900);
664
655
  --color-page-950: var(--color-yellow-950);
665
- /* action — links, buttons, interactive accents */
656
+ /* action */
666
657
  --color-action-50: var(--color-blue-50);
667
658
  --color-action-100: var(--color-blue-100);
668
659
  --color-action-150: var(--color-blue-150);
@@ -683,228 +674,3 @@
683
674
  --color-action-900: var(--color-blue-900);
684
675
  --color-action-950: var(--color-blue-950);
685
676
  }
686
-
687
- .sdocs-app[data-sdocs-theme="dark"] {
688
- /* base — layouts, backgrounds, surfaces, borders, text (inverted) */
689
- --color-base-0: var(--color-zinc-1000);
690
- --color-base-50: var(--color-zinc-950);
691
- --color-base-100: var(--color-zinc-900);
692
- --color-base-150: var(--color-zinc-850);
693
- --color-base-200: var(--color-zinc-800);
694
- --color-base-250: var(--color-zinc-750);
695
- --color-base-300: var(--color-zinc-700);
696
- --color-base-350: var(--color-zinc-650);
697
- --color-base-400: var(--color-zinc-600);
698
- --color-base-450: var(--color-zinc-550);
699
- --color-base-500: var(--color-zinc-500);
700
- --color-base-550: var(--color-zinc-450);
701
- --color-base-600: var(--color-zinc-400);
702
- --color-base-650: var(--color-zinc-350);
703
- --color-base-700: var(--color-zinc-300);
704
- --color-base-750: var(--color-zinc-250);
705
- --color-base-800: var(--color-zinc-200);
706
- --color-base-850: var(--color-zinc-150);
707
- --color-base-900: var(--color-zinc-100);
708
- --color-base-950: var(--color-zinc-50);
709
- --color-base-1000: var(--color-zinc-0);
710
- /* success — positive feedback, confirmations, valid states (inverted) */
711
- --color-success-50: var(--color-green-950);
712
- --color-success-100: var(--color-green-900);
713
- --color-success-150: var(--color-green-850);
714
- --color-success-200: var(--color-green-800);
715
- --color-success-250: var(--color-green-750);
716
- --color-success-300: var(--color-green-700);
717
- --color-success-350: var(--color-green-650);
718
- --color-success-400: var(--color-green-600);
719
- --color-success-450: var(--color-green-550);
720
- --color-success-500: var(--color-green-500);
721
- --color-success-550: var(--color-green-450);
722
- --color-success-600: var(--color-green-400);
723
- --color-success-650: var(--color-green-350);
724
- --color-success-700: var(--color-green-300);
725
- --color-success-750: var(--color-green-250);
726
- --color-success-800: var(--color-green-200);
727
- --color-success-850: var(--color-green-150);
728
- --color-success-900: var(--color-green-100);
729
- --color-success-950: var(--color-green-50);
730
- /* danger — errors, destructive actions, invalid states (inverted) */
731
- --color-danger-50: var(--color-red-950);
732
- --color-danger-100: var(--color-red-900);
733
- --color-danger-150: var(--color-red-850);
734
- --color-danger-200: var(--color-red-800);
735
- --color-danger-250: var(--color-red-750);
736
- --color-danger-300: var(--color-red-700);
737
- --color-danger-350: var(--color-red-650);
738
- --color-danger-400: var(--color-red-600);
739
- --color-danger-450: var(--color-red-550);
740
- --color-danger-500: var(--color-red-500);
741
- --color-danger-550: var(--color-red-450);
742
- --color-danger-600: var(--color-red-400);
743
- --color-danger-650: var(--color-red-350);
744
- --color-danger-700: var(--color-red-300);
745
- --color-danger-750: var(--color-red-250);
746
- --color-danger-800: var(--color-red-200);
747
- --color-danger-850: var(--color-red-150);
748
- --color-danger-900: var(--color-red-100);
749
- --color-danger-950: var(--color-red-50);
750
- /* warning — caution, attention needed (inverted) */
751
- --color-warning-50: var(--color-orange-950);
752
- --color-warning-100: var(--color-orange-900);
753
- --color-warning-150: var(--color-orange-850);
754
- --color-warning-200: var(--color-orange-800);
755
- --color-warning-250: var(--color-orange-750);
756
- --color-warning-300: var(--color-orange-700);
757
- --color-warning-350: var(--color-orange-650);
758
- --color-warning-400: var(--color-orange-600);
759
- --color-warning-450: var(--color-orange-550);
760
- --color-warning-500: var(--color-orange-500);
761
- --color-warning-550: var(--color-orange-450);
762
- --color-warning-600: var(--color-orange-400);
763
- --color-warning-650: var(--color-orange-350);
764
- --color-warning-700: var(--color-orange-300);
765
- --color-warning-750: var(--color-orange-250);
766
- --color-warning-800: var(--color-orange-200);
767
- --color-warning-850: var(--color-orange-150);
768
- --color-warning-900: var(--color-orange-100);
769
- --color-warning-950: var(--color-orange-50);
770
- /* focus — selection, highlights, active states (inverted) */
771
- --color-focus-50: var(--color-yellow-950);
772
- --color-focus-100: var(--color-yellow-900);
773
- --color-focus-150: var(--color-yellow-850);
774
- --color-focus-200: var(--color-yellow-800);
775
- --color-focus-250: var(--color-yellow-750);
776
- --color-focus-300: var(--color-yellow-700);
777
- --color-focus-350: var(--color-yellow-650);
778
- --color-focus-400: var(--color-yellow-600);
779
- --color-focus-450: var(--color-yellow-550);
780
- --color-focus-500: var(--color-yellow-500);
781
- --color-focus-550: var(--color-yellow-450);
782
- --color-focus-600: var(--color-yellow-400);
783
- --color-focus-650: var(--color-yellow-350);
784
- --color-focus-700: var(--color-yellow-300);
785
- --color-focus-750: var(--color-yellow-250);
786
- --color-focus-800: var(--color-yellow-200);
787
- --color-focus-850: var(--color-yellow-150);
788
- --color-focus-900: var(--color-yellow-100);
789
- --color-focus-950: var(--color-yellow-50);
790
- /* component — component doc badges, tags, accents (inverted) */
791
- --color-component-50: var(--color-pink-950);
792
- --color-component-100: var(--color-pink-900);
793
- --color-component-150: var(--color-pink-850);
794
- --color-component-200: var(--color-pink-800);
795
- --color-component-250: var(--color-pink-750);
796
- --color-component-300: var(--color-pink-700);
797
- --color-component-350: var(--color-pink-650);
798
- --color-component-400: var(--color-pink-600);
799
- --color-component-450: var(--color-pink-550);
800
- --color-component-500: var(--color-pink-500);
801
- --color-component-550: var(--color-pink-450);
802
- --color-component-600: var(--color-pink-400);
803
- --color-component-650: var(--color-pink-350);
804
- --color-component-700: var(--color-pink-300);
805
- --color-component-750: var(--color-pink-250);
806
- --color-component-800: var(--color-pink-200);
807
- --color-component-850: var(--color-pink-150);
808
- --color-component-900: var(--color-pink-100);
809
- --color-component-950: var(--color-pink-50);
810
- /* layout — layout doc badges, tags, accents (inverted) */
811
- --color-layout-50: var(--color-purple-950);
812
- --color-layout-100: var(--color-purple-900);
813
- --color-layout-150: var(--color-purple-850);
814
- --color-layout-200: var(--color-purple-800);
815
- --color-layout-250: var(--color-purple-750);
816
- --color-layout-300: var(--color-purple-700);
817
- --color-layout-350: var(--color-purple-650);
818
- --color-layout-400: var(--color-purple-600);
819
- --color-layout-450: var(--color-purple-550);
820
- --color-layout-500: var(--color-purple-500);
821
- --color-layout-550: var(--color-purple-450);
822
- --color-layout-600: var(--color-purple-400);
823
- --color-layout-650: var(--color-purple-350);
824
- --color-layout-700: var(--color-purple-300);
825
- --color-layout-750: var(--color-purple-250);
826
- --color-layout-800: var(--color-purple-200);
827
- --color-layout-850: var(--color-purple-150);
828
- --color-layout-900: var(--color-purple-100);
829
- --color-layout-950: var(--color-purple-50);
830
- /* example — code examples, snippets, playground accents (inverted) */
831
- --color-example-50: var(--color-cyan-950);
832
- --color-example-100: var(--color-cyan-900);
833
- --color-example-150: var(--color-cyan-850);
834
- --color-example-200: var(--color-cyan-800);
835
- --color-example-250: var(--color-cyan-750);
836
- --color-example-300: var(--color-cyan-700);
837
- --color-example-350: var(--color-cyan-650);
838
- --color-example-400: var(--color-cyan-600);
839
- --color-example-450: var(--color-cyan-550);
840
- --color-example-500: var(--color-cyan-500);
841
- --color-example-550: var(--color-cyan-450);
842
- --color-example-600: var(--color-cyan-400);
843
- --color-example-650: var(--color-cyan-350);
844
- --color-example-700: var(--color-cyan-300);
845
- --color-example-750: var(--color-cyan-250);
846
- --color-example-800: var(--color-cyan-200);
847
- --color-example-850: var(--color-cyan-150);
848
- --color-example-900: var(--color-cyan-100);
849
- --color-example-950: var(--color-cyan-50);
850
- /* docs — documentation file badges, tags, accents (inverted) */
851
- --color-docs-50: var(--color-amber-950);
852
- --color-docs-100: var(--color-amber-900);
853
- --color-docs-150: var(--color-amber-850);
854
- --color-docs-200: var(--color-amber-800);
855
- --color-docs-250: var(--color-amber-750);
856
- --color-docs-300: var(--color-amber-700);
857
- --color-docs-350: var(--color-amber-650);
858
- --color-docs-400: var(--color-amber-600);
859
- --color-docs-450: var(--color-amber-550);
860
- --color-docs-500: var(--color-amber-500);
861
- --color-docs-550: var(--color-amber-450);
862
- --color-docs-600: var(--color-amber-400);
863
- --color-docs-650: var(--color-amber-350);
864
- --color-docs-700: var(--color-amber-300);
865
- --color-docs-750: var(--color-amber-250);
866
- --color-docs-800: var(--color-amber-200);
867
- --color-docs-850: var(--color-amber-150);
868
- --color-docs-900: var(--color-amber-100);
869
- --color-docs-950: var(--color-amber-50);
870
- /* page — page doc badges, tags, accents (inverted) */
871
- --color-page-50: var(--color-yellow-950);
872
- --color-page-100: var(--color-yellow-900);
873
- --color-page-150: var(--color-yellow-850);
874
- --color-page-200: var(--color-yellow-800);
875
- --color-page-250: var(--color-yellow-750);
876
- --color-page-300: var(--color-yellow-700);
877
- --color-page-350: var(--color-yellow-650);
878
- --color-page-400: var(--color-yellow-600);
879
- --color-page-450: var(--color-yellow-550);
880
- --color-page-500: var(--color-yellow-500);
881
- --color-page-550: var(--color-yellow-450);
882
- --color-page-600: var(--color-yellow-400);
883
- --color-page-650: var(--color-yellow-350);
884
- --color-page-700: var(--color-yellow-300);
885
- --color-page-750: var(--color-yellow-250);
886
- --color-page-800: var(--color-yellow-200);
887
- --color-page-850: var(--color-yellow-150);
888
- --color-page-900: var(--color-yellow-100);
889
- --color-page-950: var(--color-yellow-50);
890
- /* action — links, buttons, interactive accents (inverted) */
891
- --color-action-50: var(--color-blue-950);
892
- --color-action-100: var(--color-blue-900);
893
- --color-action-150: var(--color-blue-850);
894
- --color-action-200: var(--color-blue-800);
895
- --color-action-250: var(--color-blue-750);
896
- --color-action-300: var(--color-blue-700);
897
- --color-action-350: var(--color-blue-650);
898
- --color-action-400: var(--color-blue-600);
899
- --color-action-450: var(--color-blue-550);
900
- --color-action-500: var(--color-blue-500);
901
- --color-action-550: var(--color-blue-450);
902
- --color-action-600: var(--color-blue-400);
903
- --color-action-650: var(--color-blue-350);
904
- --color-action-700: var(--color-blue-300);
905
- --color-action-750: var(--color-blue-250);
906
- --color-action-800: var(--color-blue-200);
907
- --color-action-850: var(--color-blue-150);
908
- --color-action-900: var(--color-blue-100);
909
- --color-action-950: var(--color-blue-50);
910
- }
package/dist/vite.js CHANGED
@@ -62,6 +62,25 @@ export function sdocsPlugin(userConfig) {
62
62
  res.end('Internal error');
63
63
  });
64
64
  });
65
+ // API: highlight code on demand
66
+ server.middlewares.use((req, res, next) => {
67
+ if (req.url !== '/__sdocs/highlight' || req.method !== 'POST')
68
+ return next();
69
+ let body = '';
70
+ req.on('data', (chunk) => { body += chunk; });
71
+ req.on('end', async () => {
72
+ try {
73
+ const { code, lang } = JSON.parse(body);
74
+ const html = await highlight(code, lang);
75
+ res.setHeader('Content-Type', 'application/json');
76
+ res.end(JSON.stringify({ html }));
77
+ }
78
+ catch {
79
+ res.statusCode = 400;
80
+ res.end('Invalid request');
81
+ }
82
+ });
83
+ });
65
84
  // Watch for .sdoc file add/unlink/change
66
85
  server.watcher.on('add', async (filePath) => {
67
86
  if (isDocFile(filePath)) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sdocs",
3
- "version": "0.0.19",
3
+ "version": "0.0.21",
4
4
  "description": "A lightweight documentation tool for Svelte 5 components",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -29,7 +29,7 @@
29
29
  "bin"
30
30
  ],
31
31
  "peerDependencies": {
32
- "@sveltejs/vite-plugin-svelte": "^5.0.0 || ^6.0.0",
32
+ "@sveltejs/vite-plugin-svelte": "^5.0.0 || ^6.0.0 || ^7.0.0",
33
33
  "svelte": "^5.0.0",
34
34
  "vite": "^6.0.0 || ^7.0.0"
35
35
  },