sdocs 0.0.41 → 0.0.43

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 (47) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/explorer/tree-builder.js +2 -4
  3. package/dist/explorer/views/ComponentView.svelte +85 -29
  4. package/dist/explorer/views/LayoutView.svelte +1 -1
  5. package/dist/explorer/views/PageView.svelte +1 -1
  6. package/dist/index.d.ts +1 -1
  7. package/dist/language/index.d.ts +1 -0
  8. package/dist/language/index.js +1 -0
  9. package/dist/language/projection.d.ts +23 -0
  10. package/dist/language/projection.js +136 -0
  11. package/dist/language/projection.test.d.ts +1 -0
  12. package/dist/language/projection.test.js +117 -0
  13. package/dist/server/app-gen.js +18 -21
  14. package/dist/server/discovery.d.ts +0 -2
  15. package/dist/server/discovery.js +0 -9
  16. package/dist/server/doc-model.d.ts +26 -0
  17. package/dist/server/doc-model.js +58 -0
  18. package/dist/server/page-markdown.d.ts +15 -0
  19. package/dist/server/page-markdown.js +104 -0
  20. package/dist/server/snippet-compiler.d.ts +18 -18
  21. package/dist/server/snippet-compiler.js +32 -29
  22. package/dist/types.d.ts +35 -19
  23. package/dist/ui/About.sdoc +28 -0
  24. package/dist/ui/Button/Button.sdoc +41 -44
  25. package/dist/ui/Control/Checkbox.sdoc +7 -13
  26. package/dist/ui/Control/Color.sdoc +7 -13
  27. package/dist/ui/Control/Dimension.sdoc +7 -13
  28. package/dist/ui/Control/Number.sdoc +7 -13
  29. package/dist/ui/Control/Select.sdoc +7 -14
  30. package/dist/ui/Control/Text.sdoc +7 -13
  31. package/dist/ui/Dashboard.sdoc +57 -0
  32. package/dist/ui/Frame/Frame.sdoc +46 -48
  33. package/dist/ui/Icon/Icon.sdoc +33 -38
  34. package/dist/ui/NavTree/Group.sdoc +36 -38
  35. package/dist/ui/NavTree/Item.sdoc +52 -57
  36. package/dist/ui/NavTree/NavTree.sdoc +89 -91
  37. package/dist/ui/Stack/Stack.sdoc +41 -43
  38. package/dist/vite.js +168 -99
  39. package/package.json +2 -1
  40. package/dist/server/meta-parser.d.ts +0 -11
  41. package/dist/server/meta-parser.js +0 -109
  42. package/dist/server/snippet-extractor.d.ts +0 -11
  43. package/dist/server/snippet-extractor.js +0 -83
  44. package/dist/server/toc-extractor.d.ts +0 -3
  45. package/dist/server/toc-extractor.js +0 -23
  46. package/dist/ui/About.page.sdoc +0 -37
  47. package/dist/ui/Dashboard.layout.sdoc +0 -60
package/dist/ui/NavTree/NavTree.sdoc CHANGED
@@ -2,118 +2,116 @@
2
2
  import NavTree from './index.js';
3
3
  import NavTreeRoot from './NavTree.svelte';
4
4
  import { Icon } from '../Icon/index.js';
5
-
6
- export const meta = {
7
- component: NavTreeRoot,
8
- title: 'NavTree',
9
- description: 'A composable tree navigation with Item and Group subcomponents.',
10
- };
11
5
  </script>
12
6
 
13
- {#snippet Default()}
14
- <NavTree>
15
- <NavTree.Group label="Components">
16
- <NavTree.Item label="UI" expanded>
17
- {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
18
- <NavTree.Item label="Button" expanded --font-weight="500">
19
- {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
20
- <NavTree.Item label="Docs" href="#/ui/button/docs" --font-weight="400">
21
- {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
7
+ [DOCS title="NavTree" description="A composable tree navigation with Item and Group subcomponents."]
8
+
9
+ [preview component={NavTreeRoot}]
10
+ <NavTree>
11
+ <NavTree.Group label="Components">
12
+ <NavTree.Item label="UI" expanded>
13
+ {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
14
+ <NavTree.Item label="Button" expanded --font-weight="500">
15
+ {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
16
+ <NavTree.Item label="Docs" href="#/ui/button/docs" --font-weight="400">
17
+ {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
18
+ </NavTree.Item>
19
+ <NavTree.Item label="Primary" href="#/ui/button/primary" active --font-weight="400">
20
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
21
+ </NavTree.Item>
22
+ <NavTree.Item label="Outlined" href="#/ui/button/outlined" --font-weight="400">
23
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
24
+ </NavTree.Item>
22
25
  </NavTree.Item>
23
- <NavTree.Item label="Primary" href="#/ui/button/primary" active --font-weight="400">
24
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
26
+ <NavTree.Item label="Icon" --font-weight="500">
27
+ {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
28
+ <NavTree.Item label="Docs" href="#/ui/icon/docs" --font-weight="400">
29
+ {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
30
+ </NavTree.Item>
31
+ <NavTree.Item label="Sizes" href="#/ui/icon/sizes" --font-weight="400">
32
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
33
+ </NavTree.Item>
25
34
  </NavTree.Item>
26
- <NavTree.Item label="Outlined" href="#/ui/button/outlined" --font-weight="400">
27
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
35
+ <NavTree.Item label="Frame" --font-weight="500">
36
+ {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
37
+ <NavTree.Item label="Docs" href="#/ui/frame/docs" --font-weight="400">
38
+ {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
39
+ </NavTree.Item>
28
40
  </NavTree.Item>
29
41
  </NavTree.Item>
30
- <NavTree.Item label="Icon" --font-weight="500">
42
+ <NavTree.Item label="Card" expanded --font-weight="500">
31
43
  {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
32
- <NavTree.Item label="Docs" href="#/ui/icon/docs" --font-weight="400">
44
+ <NavTree.Item label="Docs" href="#/card/docs" --font-weight="400">
33
45
  {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
34
46
  </NavTree.Item>
35
- <NavTree.Item label="Sizes" href="#/ui/icon/sizes" --font-weight="400">
47
+ <NavTree.Item label="WithImage" href="#/card/with-image" --font-weight="400">
36
48
  {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
37
49
  </NavTree.Item>
38
50
  </NavTree.Item>
39
- <NavTree.Item label="Frame" --font-weight="500">
51
+ <NavTree.Item label="Badge" --font-weight="500">
40
52
  {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
41
- <NavTree.Item label="Docs" href="#/ui/frame/docs" --font-weight="400">
53
+ <NavTree.Item label="Docs" href="#/badge/docs" --font-weight="400">
42
54
  {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
43
55
  </NavTree.Item>
56
+ <NavTree.Item label="Status" href="#/badge/status" --font-weight="400">
57
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
58
+ </NavTree.Item>
44
59
  </NavTree.Item>
45
- </NavTree.Item>
46
- <NavTree.Item label="Card" expanded --font-weight="500">
47
- {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
48
- <NavTree.Item label="Docs" href="#/card/docs" --font-weight="400">
49
- {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
60
+ </NavTree.Group>
61
+ <NavTree.Group label="Pages">
62
+ <NavTree.Item label="Getting Started" href="#/pages/getting-started" --font-weight="500">
63
+ {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
50
64
  </NavTree.Item>
51
- <NavTree.Item label="WithImage" href="#/card/with-image" --font-weight="400">
52
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
65
+ <NavTree.Item label="Changelog" href="#/pages/changelog" --font-weight="500">
66
+ {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
53
67
  </NavTree.Item>
54
- </NavTree.Item>
55
- <NavTree.Item label="Badge" --font-weight="500">
56
- {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
57
- <NavTree.Item label="Docs" href="#/badge/docs" --font-weight="400">
58
- {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
68
+ </NavTree.Group>
69
+ <NavTree.Group label="Layouts">
70
+ <NavTree.Item label="LoginForm" href="#/layouts/login-form" --font-weight="500">
71
+ {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
59
72
  </NavTree.Item>
60
- <NavTree.Item label="Status" href="#/badge/status" --font-weight="400">
61
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
73
+ <NavTree.Item label="Dashboard" href="#/layouts/dashboard" --font-weight="500">
74
+ {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
62
75
  </NavTree.Item>
63
- </NavTree.Item>
64
- </NavTree.Group>
65
- <NavTree.Group label="Pages">
66
- <NavTree.Item label="Getting Started" href="#/pages/getting-started" --font-weight="500">
67
- {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
68
- </NavTree.Item>
69
- <NavTree.Item label="Changelog" href="#/pages/changelog" --font-weight="500">
70
- {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
71
- </NavTree.Item>
72
- </NavTree.Group>
73
- <NavTree.Group label="Layouts">
74
- <NavTree.Item label="LoginForm" href="#/layouts/login-form" --font-weight="500">
75
- {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
76
- </NavTree.Item>
77
- <NavTree.Item label="Dashboard" href="#/layouts/dashboard" --font-weight="500">
78
- {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
79
- </NavTree.Item>
80
- </NavTree.Group>
81
- </NavTree>
82
- {/snippet}
83
-
84
- {#snippet WithSlots()}
85
- <NavTree>
86
- <NavTree.Group label="Files">
87
- <NavTree.Item label="index.ts" href="#/index">
88
- {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
89
- {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">2.4kb</span>{/snippet}
90
- </NavTree.Item>
91
- <NavTree.Item label="utils.ts" href="#/utils">
92
- {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
93
- {#snippet right()}<span style="font-size: 11px; color: tomato;">54kb</span>{/snippet}
94
- </NavTree.Item>
95
- <NavTree.Item label="config.ts" href="#/config">
96
- {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
97
- {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">1.1kb</span>{/snippet}
98
- </NavTree.Item>
99
- </NavTree.Group>
100
- </NavTree>
101
- {/snippet}
76
+ </NavTree.Group>
77
+ </NavTree>
78
+ [/preview]
102
79
 
103
- {#snippet NestedFolders()}
104
- <NavTree>
105
- <NavTree.Item label="src" expanded>
106
- <NavTree.Item label="lib" expanded>
107
- <NavTree.Item label="ui">
108
- <NavTree.Item label="Frame.svelte" />
109
- <NavTree.Item label="index.ts" />
80
+ [example title="WithSlots"]
81
+ <NavTree>
82
+ <NavTree.Group label="Files">
83
+ <NavTree.Item label="index.ts" href="#/index">
84
+ {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
85
+ {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">2.4kb</span>{/snippet}
110
86
  </NavTree.Item>
111
- <NavTree.Item label="server">
112
- <NavTree.Item label="config.ts" />
113
- <NavTree.Item label="cli.ts" />
87
+ <NavTree.Item label="utils.ts" href="#/utils">
88
+ {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
89
+ {#snippet right()}<span style="font-size: 11px; color: tomato;">54kb</span>{/snippet}
114
90
  </NavTree.Item>
91
+ <NavTree.Item label="config.ts" href="#/config">
92
+ {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
93
+ {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">1.1kb</span>{/snippet}
94
+ </NavTree.Item>
95
+ </NavTree.Group>
96
+ </NavTree>
97
+ [/example]
98
+
99
+ [example title="NestedFolders"]
100
+ <NavTree>
101
+ <NavTree.Item label="src" expanded>
102
+ <NavTree.Item label="lib" expanded>
103
+ <NavTree.Item label="ui">
104
+ <NavTree.Item label="Frame.svelte" />
105
+ <NavTree.Item label="index.ts" />
106
+ </NavTree.Item>
107
+ <NavTree.Item label="server">
108
+ <NavTree.Item label="config.ts" />
109
+ <NavTree.Item label="cli.ts" />
110
+ </NavTree.Item>
111
+ </NavTree.Item>
112
+ <NavTree.Item label="app.ts" />
115
113
  </NavTree.Item>
116
- <NavTree.Item label="app.ts" />
117
- </NavTree.Item>
118
- </NavTree>
119
- {/snippet}
114
+ </NavTree>
115
+ [/example]
116
+
117
+ [/DOCS]
package/dist/ui/Stack/Stack.sdoc CHANGED
@@ -1,52 +1,50 @@
1
1
  <script lang="ts">
2
2
  import Stack from './Stack.svelte';
3
3
  import { Button } from '../Button/index.js';
4
-
5
- export const meta = {
6
- component: Stack,
7
- title: 'Stack',
8
- description: 'A flex container with configurable direction, gap, alignment, and styling.',
9
- };
10
4
  </script>
11
5
 
12
- {#snippet Default()}
13
- <Stack>
14
- <Button>One</Button>
15
- <Button>Two</Button>
16
- <Button>Three</Button>
17
- </Stack>
18
- {/snippet}
6
+ [DOCS title="Stack" description="A flex container with configurable direction, gap, alignment, and styling."]
7
+
8
+ [preview component={Stack}]
9
+ <Stack>
10
+ <Button>One</Button>
11
+ <Button>Two</Button>
12
+ <Button>Three</Button>
13
+ </Stack>
14
+ [/preview]
15
+
16
+ [example title="Column"]
17
+ <Stack --gap="8px">
18
+ <Button>One</Button>
19
+ <Button>Two</Button>
20
+ <Button>Three</Button>
21
+ </Stack>
22
+ [/example]
19
23
 
20
- {#snippet Column()}
21
- <Stack --gap="8px">
22
- <Button>One</Button>
23
- <Button>Two</Button>
24
- <Button>Three</Button>
25
- </Stack>
26
- {/snippet}
24
+ [example title="Row"]
25
+ <Stack --direction="row" --gap="8px">
26
+ <Button>One</Button>
27
+ <Button>Two</Button>
28
+ <Button>Three</Button>
29
+ </Stack>
30
+ [/example]
27
31
 
28
- {#snippet Row()}
29
- <Stack --direction="row" --gap="8px">
30
- <Button>One</Button>
31
- <Button>Two</Button>
32
- <Button>Three</Button>
33
- </Stack>
34
- {/snippet}
32
+ [example title="Centered"]
33
+ <Stack --direction="row" --gap="12px" --align="center" --justify="center" --p="16px" --bg="var(--color-base-50)" --r="8px">
34
+ <Button>Left</Button>
35
+ <Button>Center</Button>
36
+ <Button>Right</Button>
37
+ </Stack>
38
+ [/example]
35
39
 
36
- {#snippet Centered()}
37
- <Stack --direction="row" --gap="12px" --align="center" --justify="center" --p="16px" --bg="var(--color-base-50)" --r="8px">
38
- <Button>Left</Button>
39
- <Button>Center</Button>
40
- <Button>Right</Button>
41
- </Stack>
42
- {/snippet}
40
+ [example title="Wrap"]
41
+ <Stack --direction="row" --gap="8px" --wrap="wrap" style="max-width: 200px;">
42
+ <Button>A</Button>
43
+ <Button>B</Button>
44
+ <Button>C</Button>
45
+ <Button>D</Button>
46
+ <Button>E</Button>
47
+ </Stack>
48
+ [/example]
43
49
 
44
- {#snippet Wrap()}
45
- <Stack --direction="row" --gap="8px" --wrap="wrap" style="max-width: 200px;">
46
- <Button>A</Button>
47
- <Button>B</Button>
48
- <Button>C</Button>
49
- <Button>D</Button>
50
- <Button>E</Button>
51
- </Stack>
52
- {/snippet}
50
+ [/DOCS]