sdocs 0.0.18 → 0.0.20

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 (18) hide show
  1. package/README.md +281 -0
  2. package/dist/client/App.svelte +1 -1
  3. package/dist/client/App.svelte.d.ts +1 -1
  4. package/dist/client/views/CollapsiblePanel.svelte +15 -15
  5. package/dist/client/views/ComponentView.svelte +186 -32
  6. package/dist/client/views/DataTable.svelte +1 -0
  7. package/dist/client/views/PreviewFrame.svelte +0 -4
  8. package/dist/server/app-gen.js +1 -0
  9. package/dist/server/snippet-extractor.js +12 -1
  10. package/dist/ui/About.page.sdoc +1 -1
  11. package/dist/ui/Button/Button.sdoc +1 -1
  12. package/dist/ui/Dashboard.layout.sdoc +1 -1
  13. package/dist/ui/Stack/Stack.sdoc +9 -1
  14. package/dist/ui/styles/{fonts.css → fonts/fonts.css} +8 -8
  15. package/dist/ui/styles/sdocs.css +239 -0
  16. package/dist/ui/styles/theme.css +18 -252
  17. package/dist/vite.js +19 -0
  18. package/package.json +1 -1
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
+ }