@structuralists/scaffolding 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (225) hide show
  1. package/.storybook/main.ts +9 -0
  2. package/.storybook/manager.ts +13 -0
  3. package/.storybook/preview.tsx +18 -0
  4. package/CLAUDE.md +30 -0
  5. package/LICENSE +21 -0
  6. package/README.md +7 -0
  7. package/bun.lock +947 -0
  8. package/bunfig.toml +2 -0
  9. package/eslint.config.mjs +106 -0
  10. package/index.ts +1 -0
  11. package/package.json +50 -0
  12. package/src/components/Chat/ChatComposer/ChatComposer.stories.tsx +68 -0
  13. package/src/components/Chat/ChatComposer/index.tsx +74 -0
  14. package/src/components/Chat/ChatComposer/styles.module.css +88 -0
  15. package/src/components/Chat/ChatComposer/types.ts +11 -0
  16. package/src/components/Chat/ChatMessage/ChatMessage.stories.tsx +111 -0
  17. package/src/components/Chat/ChatMessage/index.tsx +42 -0
  18. package/src/components/Chat/ChatMessage/styles.module.css +58 -0
  19. package/src/components/Chat/ChatMessage/types.ts +14 -0
  20. package/src/components/Chat/ChatRecipientsHeader/ChatRecipientsHeader.stories.tsx +145 -0
  21. package/src/components/Chat/ChatRecipientsHeader/index.tsx +29 -0
  22. package/src/components/Chat/ChatRecipientsHeader/styles.module.css +48 -0
  23. package/src/components/Chat/ChatRecipientsHeader/types.ts +26 -0
  24. package/src/components/Chat/ChatShell/ChatShell.stories.tsx +203 -0
  25. package/src/components/Chat/ChatShell/index.tsx +16 -0
  26. package/src/components/Chat/ChatShell/styles.module.css +27 -0
  27. package/src/components/Chat/ChatShell/types.ts +7 -0
  28. package/src/components/Chat/PillCombobox/PillCombobox.stories.tsx +59 -0
  29. package/src/components/Chat/PillCombobox/index.tsx +17 -0
  30. package/src/components/Chat/PillCombobox/styles.module.css +29 -0
  31. package/src/components/Chat/PillCombobox/types.ts +28 -0
  32. package/src/components/Chat/PillComboboxCore/Core.tsx +235 -0
  33. package/src/components/Chat/PillComboboxCore/styles.module.css +79 -0
  34. package/src/components/Chat/index.ts +12 -0
  35. package/src/components/Content/Badge/Badge.stories.tsx +31 -0
  36. package/src/components/Content/Badge/index.tsx +22 -0
  37. package/src/components/Content/Badge/styles.module.css +25 -0
  38. package/src/components/Content/Badge/types.ts +7 -0
  39. package/src/components/Content/Card/Card.stories.tsx +24 -0
  40. package/src/components/Content/Card/index.tsx +21 -0
  41. package/src/components/Content/Card/styles.module.css +13 -0
  42. package/src/components/Content/Card/types.ts +8 -0
  43. package/src/components/Content/EditableMarkdown/EditableMarkdown.stories.tsx +58 -0
  44. package/src/components/Content/EditableMarkdown/index.tsx +140 -0
  45. package/src/components/Content/EditableMarkdown/styles.module.css +221 -0
  46. package/src/components/Content/EditableMarkdown/types.ts +11 -0
  47. package/src/components/Content/Heading/Heading.stories.tsx +26 -0
  48. package/src/components/Content/Heading/index.tsx +20 -0
  49. package/src/components/Content/Heading/styles.module.css +19 -0
  50. package/src/components/Content/Heading/types.ts +8 -0
  51. package/src/components/Content/Link/Link.stories.tsx +21 -0
  52. package/src/components/Content/Link/index.tsx +19 -0
  53. package/src/components/Content/Link/styles.module.css +11 -0
  54. package/src/components/Content/Link/types.ts +8 -0
  55. package/src/components/Content/List/List.stories.tsx +62 -0
  56. package/src/components/Content/List/index.tsx +26 -0
  57. package/src/components/Content/List/styles.module.css +41 -0
  58. package/src/components/Content/List/types.ts +33 -0
  59. package/src/components/Content/LoadingContainer/LoadingContainer.stories.tsx +105 -0
  60. package/src/components/Content/LoadingContainer/index.tsx +36 -0
  61. package/src/components/Content/LoadingContainer/styles.module.css +54 -0
  62. package/src/components/Content/LoadingContainer/types.ts +8 -0
  63. package/src/components/Content/Markdown/Markdown.stories.tsx +39 -0
  64. package/src/components/Content/Markdown/index.tsx +28 -0
  65. package/src/components/Content/Markdown/styles.module.css +79 -0
  66. package/src/components/Content/Markdown/types.ts +8 -0
  67. package/src/components/Content/Menu/Menu.stories.tsx +186 -0
  68. package/src/components/Content/Menu/index.tsx +259 -0
  69. package/src/components/Content/Menu/styles.module.css +103 -0
  70. package/src/components/Content/Menu/types.ts +25 -0
  71. package/src/components/Content/Text/Text.stories.tsx +36 -0
  72. package/src/components/Content/Text/index.tsx +35 -0
  73. package/src/components/Content/Text/styles.module.css +30 -0
  74. package/src/components/Content/Text/types.ts +11 -0
  75. package/src/components/Forms/Button/Button.stories.tsx +40 -0
  76. package/src/components/Forms/Button/index.tsx +43 -0
  77. package/src/components/Forms/Button/styles.module.css +67 -0
  78. package/src/components/Forms/Button/types.ts +16 -0
  79. package/src/components/Forms/ColorInput/index.tsx +22 -0
  80. package/src/components/Forms/ColorInput/styles.module.css +19 -0
  81. package/src/components/Forms/ColorInput/types.ts +12 -0
  82. package/src/components/Forms/Field/Field.stories.tsx +35 -0
  83. package/src/components/Forms/Field/index.tsx +17 -0
  84. package/src/components/Forms/Field/styles.module.css +21 -0
  85. package/src/components/Forms/Field/types.ts +9 -0
  86. package/src/components/Forms/IconButton/IconButton.stories.tsx +91 -0
  87. package/src/components/Forms/IconButton/index.tsx +55 -0
  88. package/src/components/Forms/IconButton/styles.module.css +61 -0
  89. package/src/components/Forms/IconButton/types.ts +23 -0
  90. package/src/components/Forms/Input/Input.stories.tsx +22 -0
  91. package/src/components/Forms/Input/index.tsx +42 -0
  92. package/src/components/Forms/Input/styles.module.css +30 -0
  93. package/src/components/Forms/Input/types.ts +18 -0
  94. package/src/components/Forms/SearchInput/index.tsx +41 -0
  95. package/src/components/Forms/SearchInput/styles.module.css +30 -0
  96. package/src/components/Forms/SearchInput/types.ts +17 -0
  97. package/src/components/Forms/Select/MultiSelect/MultiSelect.stories.tsx +116 -0
  98. package/src/components/Forms/Select/MultiSelect/index.tsx +74 -0
  99. package/src/components/Forms/Select/MultiSelect/types.ts +15 -0
  100. package/src/components/Forms/Select/SingleSelect/SingleSelect.stories.tsx +174 -0
  101. package/src/components/Forms/Select/SingleSelect/index.tsx +62 -0
  102. package/src/components/Forms/Select/SingleSelect/types.ts +12 -0
  103. package/src/components/Forms/Select/index.ts +4 -0
  104. package/src/components/Forms/Select/internal/OptionList.tsx +124 -0
  105. package/src/components/Forms/Select/internal/SelectTrigger.tsx +60 -0
  106. package/src/components/Forms/Select/internal/styles.module.css +122 -0
  107. package/src/components/Forms/Textarea/Textarea.stories.tsx +25 -0
  108. package/src/components/Forms/Textarea/index.tsx +48 -0
  109. package/src/components/Forms/Textarea/styles.module.css +34 -0
  110. package/src/components/Forms/Textarea/types.ts +24 -0
  111. package/src/components/Json/Json/Json.stories.tsx +33 -0
  112. package/src/components/Json/Json/index.tsx +38 -0
  113. package/src/components/Json/Json/types.ts +21 -0
  114. package/src/components/Json/JsonTable/JsonLeafNode.tsx +31 -0
  115. package/src/components/Json/JsonTable/JsonTable.stories.tsx +52 -0
  116. package/src/components/Json/JsonTable/index.tsx +33 -0
  117. package/src/components/Json/JsonTable/types.ts +13 -0
  118. package/src/components/Json/JsonTable/utils.ts +6 -0
  119. package/src/components/Layout/Bar/Bar.stories.tsx +100 -0
  120. package/src/components/Layout/Bar/index.tsx +17 -0
  121. package/src/components/Layout/Bar/styles.module.css +34 -0
  122. package/src/components/Layout/Bar/types.ts +10 -0
  123. package/src/components/Layout/Debug/Debug.stories.tsx +86 -0
  124. package/src/components/Layout/Debug/index.tsx +41 -0
  125. package/src/components/Layout/Debug/styles.module.css +13 -0
  126. package/src/components/Layout/Debug/types.ts +12 -0
  127. package/src/components/Layout/Divider/Divider.stories.tsx +22 -0
  128. package/src/components/Layout/Divider/index.tsx +3 -0
  129. package/src/components/Layout/Divider/styles.module.css +6 -0
  130. package/src/components/Layout/Grid/Grid.stories.tsx +28 -0
  131. package/src/components/Layout/Grid/index.tsx +29 -0
  132. package/src/components/Layout/Grid/styles.module.css +12 -0
  133. package/src/components/Layout/Grid/types.ts +9 -0
  134. package/src/components/Layout/Panels/Panels.stories.tsx +287 -0
  135. package/src/components/Layout/Panels/index.tsx +119 -0
  136. package/src/components/Layout/Panels/styles.module.css +103 -0
  137. package/src/components/Layout/Panels/types.ts +36 -0
  138. package/src/components/Layout/Stack/Stack.stories.tsx +45 -0
  139. package/src/components/Layout/Stack/index.tsx +73 -0
  140. package/src/components/Layout/Stack/styles.module.css +41 -0
  141. package/src/components/Layout/Stack/types.ts +17 -0
  142. package/src/components/Modals/ConfirmModal/ConfirmModal.stories.tsx +73 -0
  143. package/src/components/Modals/ConfirmModal/index.tsx +72 -0
  144. package/src/components/Modals/ConfirmModal/styles.module.css +62 -0
  145. package/src/components/Modals/ConfirmModal/types.ts +14 -0
  146. package/src/components/Modals/LargeModal/LargeModal.stories.tsx +75 -0
  147. package/src/components/Modals/LargeModal/index.tsx +9 -0
  148. package/src/components/Modals/LargeModal/styles.module.css +6 -0
  149. package/src/components/Modals/LargeModal/types.ts +18 -0
  150. package/src/components/Modals/MediumModal/MediumModal.stories.tsx +121 -0
  151. package/src/components/Modals/MediumModal/MediumModal.test.tsx +48 -0
  152. package/src/components/Modals/MediumModal/index.tsx +9 -0
  153. package/src/components/Modals/MediumModal/styles.module.css +5 -0
  154. package/src/components/Modals/MediumModal/types.ts +18 -0
  155. package/src/components/Modals/index.ts +3 -0
  156. package/src/components/Modals/internal/ModalBody.tsx +21 -0
  157. package/src/components/Modals/internal/ModalFooter.tsx +12 -0
  158. package/src/components/Modals/internal/ModalHeader.tsx +27 -0
  159. package/src/components/Modals/internal/ModalShell.tsx +112 -0
  160. package/src/components/Modals/internal/styles.module.css +141 -0
  161. package/src/components/Navigation/TabBar/TabBar.stories.tsx +59 -0
  162. package/src/components/Navigation/TabBar/index.tsx +25 -0
  163. package/src/components/Navigation/TabBar/styles.module.css +32 -0
  164. package/src/components/Navigation/TabBar/types.ts +22 -0
  165. package/src/components/Navigation/VerticalNav/VerticalNav.stories.tsx +41 -0
  166. package/src/components/Navigation/VerticalNav/index.tsx +25 -0
  167. package/src/components/Navigation/VerticalNav/styles.module.css +28 -0
  168. package/src/components/Navigation/VerticalNav/types.ts +19 -0
  169. package/src/components/Overlays/Popover/Popover.stories.tsx +154 -0
  170. package/src/components/Overlays/Popover/index.tsx +175 -0
  171. package/src/components/Overlays/Popover/styles.module.css +59 -0
  172. package/src/components/Overlays/Popover/types.ts +34 -0
  173. package/src/components/Overlays/Tooltip/Tooltip.stories.tsx +41 -0
  174. package/src/components/Overlays/Tooltip/index.tsx +115 -0
  175. package/src/components/Overlays/Tooltip/styles.module.css +25 -0
  176. package/src/components/Overlays/Tooltip/types.ts +15 -0
  177. package/src/components/Primitives/EmptyValue/EmptyValue.stories.tsx +18 -0
  178. package/src/components/Primitives/EmptyValue/index.tsx +3 -0
  179. package/src/components/Primitives/EmptyValue/styles.module.css +3 -0
  180. package/src/components/Primitives/LinedStack/LinedStack.stories.tsx +101 -0
  181. package/src/components/Primitives/LinedStack/index.tsx +41 -0
  182. package/src/components/Primitives/LinedStack/styles.module.css +27 -0
  183. package/src/components/Primitives/LinedStack/types.ts +49 -0
  184. package/src/components/Primitives/LongText/LongText.stories.tsx +72 -0
  185. package/src/components/Primitives/LongText/index.tsx +67 -0
  186. package/src/components/Primitives/LongText/styles.module.css +30 -0
  187. package/src/components/Primitives/LongText/types.ts +4 -0
  188. package/src/components/Primitives/Num/Num.stories.tsx +51 -0
  189. package/src/components/Primitives/Num/index.tsx +37 -0
  190. package/src/components/Primitives/Num/types.ts +19 -0
  191. package/src/components/Primitives/Percent/Percent.stories.tsx +48 -0
  192. package/src/components/Primitives/Percent/index.tsx +15 -0
  193. package/src/components/Primitives/Percent/types.ts +10 -0
  194. package/src/components/Primitives/RelativeTime/RelativeTime.stories.tsx +57 -0
  195. package/src/components/Primitives/RelativeTime/index.tsx +31 -0
  196. package/src/components/Primitives/RelativeTime/types.ts +3 -0
  197. package/src/components/Tables/BigTable/BigTable.stories.tsx +367 -0
  198. package/src/components/Tables/BigTable/CLAUDE.md +118 -0
  199. package/src/components/Tables/BigTable/columnDefs.tsx +208 -0
  200. package/src/components/Tables/BigTable/index.tsx +104 -0
  201. package/src/components/Tables/BigTable/styles.module.css +83 -0
  202. package/src/components/Tables/BigTable/types.ts +20 -0
  203. package/src/components/Tables/QuickTable/CLAUDE.md +118 -0
  204. package/src/components/Tables/QuickTable/QuickTable.stories.tsx +121 -0
  205. package/src/components/Tables/QuickTable/index.tsx +86 -0
  206. package/src/components/Tables/QuickTable/internal.tsx +48 -0
  207. package/src/components/Tables/QuickTable/styles.module.css +65 -0
  208. package/src/components/Tables/QuickTable/types.ts +40 -0
  209. package/src/env.d.ts +4 -0
  210. package/src/index.ts +87 -0
  211. package/src/storybook/CLAUDE.md +35 -0
  212. package/src/storybook/Composition.stories.tsx +269 -0
  213. package/src/storybook/Lorem/index.tsx +54 -0
  214. package/src/storybook/Placeholder/index.tsx +27 -0
  215. package/src/storybook/Placeholder/styles.module.css +20 -0
  216. package/src/storybook/Repeat/index.tsx +23 -0
  217. package/src/storybook/Toggle/index.tsx +29 -0
  218. package/src/storybook/_StoryUtils.stories.tsx +58 -0
  219. package/src/storybook/index.ts +4 -0
  220. package/src/tokens.ts +31 -0
  221. package/src/utils.test.ts +24 -0
  222. package/src/utils.ts +2 -0
  223. package/test-setup.ts +3 -0
  224. package/tokens.css +323 -0
  225. package/tsconfig.json +16 -0
package/test-setup.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { GlobalRegistrator } from '@happy-dom/global-registrator';
2
+
3
+ GlobalRegistrator.register();
package/tokens.css ADDED
@@ -0,0 +1,323 @@
1
+ /* ---------------------------------------------------------------------------
2
+ Theme system
3
+ ---------------------------------------------------------------------------
4
+ Six themes selected via `data-theme` on any element (typically <html>):
5
+ light-warm | light-paper | light-sepia | dark-warm | dark-neutral | dark-dimmed
6
+
7
+ When `data-theme` is absent:
8
+ - light system preference → `light-warm` (the default :root block)
9
+ - dark system preference → `dark-warm` (via the @media block below)
10
+
11
+ Explicit `data-theme` always wins over system preference because attribute
12
+ selectors share specificity with :root but come later in source order.
13
+
14
+ Palette roles (each theme picks tones for these slots — brightness
15
+ ordering between levels may differ across themes):
16
+
17
+ Background ramp — brightness ordering is role, not monotonic.
18
+ 0 — primary interactive surface (content, inputs, modal, secondary-button fill)
19
+ 0-offset — body of a form-heavy surface where 0 would give no separation from inputs;
20
+ just enough contrast to make form elements pop, not a full step to 1
21
+ 1 — sidebar
22
+ 2 — body / header / footer wall
23
+ 3 — recessed or raised highlight (ghost-button hover, badges)
24
+
25
+ Text
26
+ foreground — primary text on any background
27
+ muted — secondary text (hints, metadata, placeholders)
28
+
29
+ Edges
30
+ border — visible divider (card edges, input outlines)
31
+ border-subtle — barely-there separator (section splits inside a surface)
32
+
33
+ Brand + destructive
34
+ accent — primary action, links, focus rings
35
+ accent-hover — accent hover/pressed
36
+ danger — destructive action
37
+ danger-hover — danger hover/pressed
38
+ on-accent — text/icon color on an accent fill
39
+ on-danger — text/icon color on a danger fill
40
+
41
+ Depth
42
+ shadow — elevated surface drop shadow (modals, menus)
43
+ shadow-soft — gentler lift (hover elevation, cards)
44
+ backdrop — modal overlay tint behind dialogs
45
+
46
+ These values are scaffolds, not final design. Revise deliberately.
47
+ --------------------------------------------------------------------------- */
48
+
49
+ /* Theme-independent base — fonts, sizes, spacing, radius. */
50
+ :root {
51
+ --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
52
+ --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
53
+
54
+ --ui-text-xsmall: 11px;
55
+ --ui-text-small: 12px;
56
+ --ui-text-medium: 14px;
57
+ --ui-text-large: 16px;
58
+
59
+ --ui-heading-1: 24px;
60
+ --ui-heading-2: 18px;
61
+ --ui-heading-3: 15px;
62
+
63
+ --ui-line-height-tight: 1.3;
64
+ --ui-line-height: 1.5;
65
+
66
+ --ui-space-1: 4px;
67
+ --ui-space-2: 8px;
68
+ --ui-space-3: 12px;
69
+ --ui-space-4: 16px;
70
+ --ui-space-5: 24px;
71
+ --ui-space-6: 32px;
72
+
73
+ --ui-radius: 3px;
74
+ --ui-radius-large: 6px;
75
+ }
76
+
77
+ /* Theme-switch smoothing. Brief transitions on the three color-channel
78
+ properties so flipping Dark Mode doesn't look like a hard cut. Universal
79
+ selector is deliberate — every element inherits from the theme variables.
80
+ Side effect: hover/focus color transitions also animate, which reads fine
81
+ at 140ms. */
82
+ *,
83
+ *::before,
84
+ *::after {
85
+ transition:
86
+ background-color 140ms ease,
87
+ border-color 140ms ease,
88
+ color 140ms ease;
89
+ }
90
+
91
+ /* Default palette — applies when no data-theme is set (= light-warm). */
92
+ :root {
93
+ --ui-background-0: #ffffff;
94
+ --ui-background-0-offset: #fdfbf8;
95
+ --ui-background-1: #fbf8f1;
96
+ --ui-background-2: #f7f4ec;
97
+ --ui-background-3: #efeadc;
98
+
99
+ --ui-foreground: #1f1e1c;
100
+ --ui-muted: #6a6862;
101
+ --ui-border: #d0ccc0;
102
+ --ui-border-subtle: #e5e1d5;
103
+
104
+ --ui-accent: #355070;
105
+ --ui-accent-hover: #24385a;
106
+ --ui-danger: #9c3232;
107
+ --ui-danger-hover: #762626;
108
+
109
+ --ui-on-accent: #ffffff;
110
+ --ui-on-danger: #ffffff;
111
+
112
+ --ui-shadow: rgba(0, 0, 0, 0.15);
113
+ --ui-shadow-soft: rgba(0, 0, 0, 0.08);
114
+ --ui-backdrop: rgba(30, 28, 25, 0.35);
115
+ }
116
+
117
+ /* System preference: dark → fall back to dark-warm when no data-theme is set.
118
+ Only targets :root, so explicit data-theme overrides this via source order. */
119
+ @media (prefers-color-scheme: dark) {
120
+ :root {
121
+ --ui-background-0: #211d18;
122
+ --ui-background-0-offset: #1e1a16;
123
+ --ui-background-1: #1a1713;
124
+ --ui-background-2: #16130f;
125
+ --ui-background-3: #2d2821;
126
+
127
+ --ui-foreground: #eae5d8;
128
+ --ui-muted: #9d9689;
129
+ --ui-border: #3d3831;
130
+ --ui-border-subtle: #2a2620;
131
+
132
+ --ui-accent: #8aa5c4;
133
+ --ui-accent-hover: #a5bcd6;
134
+ --ui-danger: #cc6b6b;
135
+ --ui-danger-hover: #dd8585;
136
+
137
+ --ui-on-accent: #1f1c18;
138
+ --ui-on-danger: #1f1c18;
139
+
140
+ --ui-shadow: rgba(0, 0, 0, 0.5);
141
+ --ui-shadow-soft: rgba(0, 0, 0, 0.3);
142
+ --ui-backdrop: rgba(0, 0, 0, 0.55);
143
+ }
144
+ }
145
+
146
+ /* ---------------------------------------------------------------------------
147
+ Explicit themes — win over system preference because they come last.
148
+ --------------------------------------------------------------------------- */
149
+
150
+ [data-theme='light-warm'] {
151
+ --ui-background-0: #ffffff;
152
+ --ui-background-0-offset: #fdfbf8;
153
+ --ui-background-1: #fbf8f1;
154
+ --ui-background-2: #f7f4ec;
155
+ --ui-background-3: #efeadc;
156
+
157
+ --ui-foreground: #1f1e1c;
158
+ --ui-muted: #6a6862;
159
+ --ui-border: #d0ccc0;
160
+ --ui-border-subtle: #e5e1d5;
161
+
162
+ --ui-accent: #355070;
163
+ --ui-accent-hover: #24385a;
164
+ --ui-danger: #9c3232;
165
+ --ui-danger-hover: #762626;
166
+
167
+ --ui-on-accent: #ffffff;
168
+ --ui-on-danger: #ffffff;
169
+
170
+ --ui-shadow: rgba(0, 0, 0, 0.15);
171
+ --ui-shadow-soft: rgba(0, 0, 0, 0.08);
172
+ --ui-backdrop: rgba(30, 28, 25, 0.35);
173
+ }
174
+
175
+ [data-theme='light-paper'] {
176
+ --ui-background-0: #ffffff;
177
+ --ui-background-0-offset: #fafaf9;
178
+ --ui-background-1: #f6f6f4;
179
+ --ui-background-2: #efeeeb;
180
+ --ui-background-3: #e4e2dd;
181
+
182
+ --ui-foreground: #1a1a18;
183
+ --ui-muted: #656361;
184
+ --ui-border: #c8c6c0;
185
+ --ui-border-subtle: #e0ded9;
186
+
187
+ --ui-accent: #355070;
188
+ --ui-accent-hover: #24385a;
189
+ --ui-danger: #9c3232;
190
+ --ui-danger-hover: #762626;
191
+
192
+ --ui-on-accent: #ffffff;
193
+ --ui-on-danger: #ffffff;
194
+
195
+ --ui-shadow: rgba(0, 0, 0, 0.12);
196
+ --ui-shadow-soft: rgba(0, 0, 0, 0.06);
197
+ --ui-backdrop: rgba(20, 20, 20, 0.35);
198
+ }
199
+
200
+ [data-theme='light-sepia'] {
201
+ --ui-background-0: #fbf3e2;
202
+ --ui-background-0-offset: #f8f0db;
203
+ --ui-background-1: #f5ecd4;
204
+ --ui-background-2: #efe5c4;
205
+ --ui-background-3: #e7dbb5;
206
+
207
+ --ui-foreground: #3a2f1a;
208
+ --ui-muted: #7a6a4a;
209
+ --ui-border: #c7b98e;
210
+ --ui-border-subtle: #d9cf9f;
211
+
212
+ --ui-accent: #4a3a70;
213
+ --ui-accent-hover: #382a58;
214
+ --ui-danger: #8a3222;
215
+ --ui-danger-hover: #6a2616;
216
+
217
+ --ui-on-accent: #fbf3e2;
218
+ --ui-on-danger: #fbf3e2;
219
+
220
+ --ui-shadow: rgba(70, 50, 20, 0.18);
221
+ --ui-shadow-soft: rgba(70, 50, 20, 0.09);
222
+ --ui-backdrop: rgba(50, 35, 15, 0.4);
223
+ }
224
+
225
+ [data-theme='dark-warm'] {
226
+ --ui-background-0: #211d18;
227
+ --ui-background-0-offset: #1e1a16;
228
+ --ui-background-1: #1a1713;
229
+ --ui-background-2: #16130f;
230
+ --ui-background-3: #2d2821;
231
+
232
+ --ui-foreground: #eae5d8;
233
+ --ui-muted: #9d9689;
234
+ --ui-border: #3d3831;
235
+ --ui-border-subtle: #2a2620;
236
+
237
+ --ui-accent: #8aa5c4;
238
+ --ui-accent-hover: #a5bcd6;
239
+ --ui-danger: #cc6b6b;
240
+ --ui-danger-hover: #dd8585;
241
+
242
+ --ui-on-accent: #1f1c18;
243
+ --ui-on-danger: #1f1c18;
244
+
245
+ --ui-shadow: rgba(0, 0, 0, 0.5);
246
+ --ui-shadow-soft: rgba(0, 0, 0, 0.3);
247
+ --ui-backdrop: rgba(0, 0, 0, 0.55);
248
+ }
249
+
250
+ [data-theme='dark-neutral'] {
251
+ --ui-background-0: #1e1e1e;
252
+ --ui-background-0-offset: #1b1b1b;
253
+ --ui-background-1: #181818;
254
+ --ui-background-2: #131313;
255
+ --ui-background-3: #2a2a2a;
256
+
257
+ --ui-foreground: #e8e8e8;
258
+ --ui-muted: #a0a0a0;
259
+ --ui-border: #404040;
260
+ --ui-border-subtle: #2c2c2c;
261
+
262
+ --ui-accent: #7fa8d0;
263
+ --ui-accent-hover: #9abfe0;
264
+ --ui-danger: #cf6a6a;
265
+ --ui-danger-hover: #dd8585;
266
+
267
+ --ui-on-accent: #1e1e1e;
268
+ --ui-on-danger: #1e1e1e;
269
+
270
+ --ui-shadow: rgba(0, 0, 0, 0.5);
271
+ --ui-shadow-soft: rgba(0, 0, 0, 0.3);
272
+ --ui-backdrop: rgba(0, 0, 0, 0.6);
273
+ }
274
+
275
+ [data-theme='dark-dimmed'] {
276
+ --ui-background-0: #2b2e38;
277
+ --ui-background-0-offset: #282b34;
278
+ --ui-background-1: #24272f;
279
+ --ui-background-2: #1d2027;
280
+ --ui-background-3: #363a45;
281
+
282
+ --ui-foreground: #cdd3de;
283
+ --ui-muted: #8a91a0;
284
+ --ui-border: #454a56;
285
+ --ui-border-subtle: #30343d;
286
+
287
+ --ui-accent: #8ab2d9;
288
+ --ui-accent-hover: #a3c5e4;
289
+ --ui-danger: #c67474;
290
+ --ui-danger-hover: #d38a8a;
291
+
292
+ --ui-on-accent: #1d2027;
293
+ --ui-on-danger: #1d2027;
294
+
295
+ --ui-shadow: rgba(0, 0, 0, 0.4);
296
+ --ui-shadow-soft: rgba(0, 0, 0, 0.25);
297
+ --ui-backdrop: rgba(0, 0, 0, 0.55);
298
+ }
299
+
300
+ /* ---------------------------------------------------------------------------
301
+ Global resets — theme-independent.
302
+ --------------------------------------------------------------------------- */
303
+
304
+ *,
305
+ *::before,
306
+ *::after {
307
+ box-sizing: border-box;
308
+ }
309
+
310
+ html,
311
+ body,
312
+ #root {
313
+ height: 100%;
314
+ }
315
+
316
+ body {
317
+ margin: 0;
318
+ background-color: var(--ui-background-2);
319
+ color: var(--ui-foreground);
320
+ font-family: var(--ui-font);
321
+ font-size: var(--ui-text-medium);
322
+ line-height: var(--ui-line-height);
323
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ESNext",
4
+ "module": "ESNext",
5
+ "moduleResolution": "bundler",
6
+ "esModuleInterop": true,
7
+ "strict": true,
8
+ "skipLibCheck": true,
9
+ "resolveJsonModule": true,
10
+ "isolatedModules": true,
11
+ "noEmit": true,
12
+ "jsx": "react-jsx",
13
+ "types": ["bun"]
14
+ },
15
+ "include": ["index.ts", "src"]
16
+ }