@silvery/examples 0.17.4 → 0.17.5

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 (62) hide show
  1. package/dist/_banner-A70_y2Vi.mjs +43 -0
  2. package/dist/{ansi-CCE2pVS0.mjs → ansi-0VXlUmNn.mjs} +7 -7
  3. package/dist/apng-B0gRaDVT.mjs +3 -0
  4. package/dist/{apng-HhhBjRGt.mjs → apng-BTRDTfDW.mjs} +2 -2
  5. package/dist/apps/aichat/index.mjs +69 -70
  6. package/dist/apps/app-todo.mjs +19 -20
  7. package/dist/apps/async-data.mjs +40 -41
  8. package/dist/apps/cli-wizard.mjs +51 -52
  9. package/dist/apps/clipboard.mjs +26 -27
  10. package/dist/apps/components.mjs +189 -190
  11. package/dist/apps/data-explorer.mjs +52 -53
  12. package/dist/apps/dev-tools.mjs +39 -40
  13. package/dist/apps/explorer.mjs +73 -74
  14. package/dist/apps/gallery.mjs +61 -62
  15. package/dist/apps/inline-bench.mjs +1 -1
  16. package/dist/apps/kanban.mjs +22 -23
  17. package/dist/apps/layout-ref.mjs +27 -28
  18. package/dist/apps/outline.mjs +35 -36
  19. package/dist/apps/paste-demo.mjs +33 -34
  20. package/dist/apps/scroll.mjs +11 -12
  21. package/dist/apps/search-filter.mjs +23 -24
  22. package/dist/apps/selection.mjs +30 -31
  23. package/dist/apps/spatial-focus-demo.mjs +32 -33
  24. package/dist/apps/task-list.mjs +25 -26
  25. package/dist/apps/terminal-caps-demo.mjs +30 -31
  26. package/dist/apps/terminal.mjs +157 -158
  27. package/dist/apps/text-selection-demo.mjs +62 -63
  28. package/dist/apps/textarea.mjs +21 -22
  29. package/dist/apps/theme.mjs +142 -143
  30. package/dist/apps/transform.mjs +25 -26
  31. package/dist/apps/virtual-10k.mjs +52 -53
  32. package/dist/{backends-Bahh9mKN.mjs → backends-Dj-11kZF.mjs} +1 -1
  33. package/dist/backends-U3QwStfO.mjs +3 -0
  34. package/dist/components/counter.mjs +6 -7
  35. package/dist/components/hello.mjs +5 -6
  36. package/dist/components/progress-bar.mjs +10 -11
  37. package/dist/components/select-list.mjs +8 -9
  38. package/dist/components/spinner.mjs +10 -11
  39. package/dist/components/text-input.mjs +8 -9
  40. package/dist/components/virtual-list.mjs +7 -8
  41. package/dist/{flexily-zero-adapter-UB-ra8fR.mjs → flexily-zero-adapter-ByVzLTFP.mjs} +1 -1
  42. package/dist/gif-B6NGH5gs.mjs +3 -0
  43. package/dist/{gif-BtnXuxLF.mjs → gif-CfkOF-iG.mjs} +2 -2
  44. package/dist/layout/dashboard.mjs +197 -198
  45. package/dist/layout/live-resize.mjs +44 -45
  46. package/dist/layout/overflow.mjs +16 -17
  47. package/dist/layout/text-layout.mjs +67 -68
  48. package/dist/{plugins-D1KtkT4a.mjs → plugins-CT0DdV_E.mjs} +12 -13
  49. package/dist/{src-BTEVGpd9.mjs → src-jO3Zuzjj.mjs} +3 -3
  50. package/dist/{yoga-adapter-BVtQ5OJR.mjs → yoga-adapter-BSQHuMV9.mjs} +1 -1
  51. package/package.json +4 -2
  52. package/dist/_banner-DLPxCqVy.mjs +0 -44
  53. package/dist/apng-mwUQbTTF.mjs +0 -3
  54. package/dist/backends-CCtCDQ94.mjs +0 -3
  55. package/dist/gif-BZaqPPVX.mjs +0 -3
  56. package/dist/jsx-runtime-dMs_8fNu.mjs +0 -241
  57. /package/dist/{UPNG-Cy7ViL8f.mjs → UPNG-ShUlaTDh.mjs} +0 -0
  58. /package/dist/{__vite-browser-external-2447137e-BML7CYau.mjs → __vite-browser-external-2447137e-Bopa5BFR.mjs} +0 -0
  59. /package/dist/{gifenc-CLRW41dk.mjs → gifenc-BI4ihP_T.mjs} +0 -0
  60. /package/dist/{node-NuJ94BWl.mjs → node-nsrAOjH4.mjs} +0 -0
  61. /package/dist/{resvg-js-C_8Wps1F.mjs → resvg-js-Cnk2o49d.mjs} +0 -0
  62. /package/dist/{src-CzfRafCQ.mjs → src-9ZhfQyzD.mjs} +0 -0
package/dist/apps/components.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
2
- import { t as require_jsx_runtime } from "../jsx-runtime-dMs_8fNu.mjs";
3
- import { t as ExampleBanner } from "../_banner-DLPxCqVy.mjs";
2
+ import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
4
3
  import { useCallback, useState } from "react";
5
4
  import { Blockquote, Box, Button, Code, CodeBlock, Em, H1, H2, H3, HR, Kbd, LI, Lead, ModalDialog, Muted, OL, P, ProgressBar, SelectList, Small, Spinner, Strong, Text, TextArea, TextInput, Toggle, UL, createTerm, render, useApp, useInput } from "silvery";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
6
  //#region apps/components.tsx
7
7
  /**
8
8
  * Components Showcase
@@ -12,7 +12,6 @@ import { Blockquote, Box, Button, Code, CodeBlock, Em, H1, H2, H3, HR, Kbd, LI,
12
12
  * - Inputs: TextInput, TextArea, SelectList, Toggle with focus cycling
13
13
  * - Display: ProgressBar, Spinner, Badge, border styles, ModalDialog
14
14
  */
15
- var import_jsx_runtime = require_jsx_runtime();
16
15
  const meta = {
17
16
  name: "Components",
18
17
  description: "UI component gallery with typography, inputs, and dialogs",
@@ -27,7 +26,7 @@ const meta = {
27
26
  ]
28
27
  };
29
28
  function TypographyTab({ scrollOffset }) {
30
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
29
+ return /* @__PURE__ */ jsxs(Box, {
31
30
  flexDirection: "column",
32
31
  gap: 1,
33
32
  paddingX: 1,
@@ -35,177 +34,177 @@ function TypographyTab({ scrollOffset }) {
35
34
  scrollOffset,
36
35
  flexGrow: 1,
37
36
  children: [
38
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
37
+ /* @__PURE__ */ jsxs(Box, {
39
38
  flexDirection: "column",
40
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, { children: "Getting Started with Silvery" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lead, { children: "Build modern terminal UIs with React — layout feedback, semantic theming, and 30+ components." })]
39
+ children: [/* @__PURE__ */ jsx(H1, { children: "Getting Started with Silvery" }), /* @__PURE__ */ jsx(Lead, { children: "Build modern terminal UIs with React — layout feedback, semantic theming, and 30+ components." })]
41
40
  }),
42
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
43
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
41
+ /* @__PURE__ */ jsx(HR, {}),
42
+ /* @__PURE__ */ jsxs(Box, {
44
43
  flexDirection: "row",
45
44
  gap: 2,
46
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
45
+ children: [/* @__PURE__ */ jsxs(Box, {
47
46
  flexDirection: "column",
48
47
  flexGrow: 1,
49
48
  flexBasis: 0,
50
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Typography" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
49
+ children: [/* @__PURE__ */ jsx(H2, { children: "Typography" }), /* @__PURE__ */ jsxs(Box, {
51
50
  flexDirection: "column",
52
51
  children: [
53
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
52
+ /* @__PURE__ */ jsx(Text, {
54
53
  bold: true,
55
54
  color: "$primary",
56
55
  children: "H1 — Page Title (bold, $primary)"
57
56
  }),
58
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
57
+ /* @__PURE__ */ jsx(Text, {
59
58
  bold: true,
60
59
  color: "$accent",
61
60
  children: "H2 — Section Heading (bold, $accent)"
62
61
  }),
63
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
62
+ /* @__PURE__ */ jsx(Text, {
64
63
  color: "$primary",
65
64
  children: "H3 — Group Heading ($primary)"
66
65
  }),
67
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(P, { children: "P — Body paragraph text" }),
68
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lead, { children: "Lead — Introductory italic text" }),
69
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Muted — Secondary information" }),
70
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: "Small — Fine print and captions" })
66
+ /* @__PURE__ */ jsx(P, { children: "P — Body paragraph text" }),
67
+ /* @__PURE__ */ jsx(Lead, { children: "Lead — Introductory italic text" }),
68
+ /* @__PURE__ */ jsx(Muted, { children: "Muted — Secondary information" }),
69
+ /* @__PURE__ */ jsx(Small, { children: "Small — Fine print and captions" })
71
70
  ]
72
71
  })]
73
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
72
+ }), /* @__PURE__ */ jsxs(Box, {
74
73
  flexDirection: "column",
75
74
  flexGrow: 1,
76
75
  flexBasis: 0,
77
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Inline Styles" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
76
+ children: [/* @__PURE__ */ jsx(H2, { children: "Inline Styles" }), /* @__PURE__ */ jsxs(Box, {
78
77
  flexDirection: "column",
79
78
  children: [
80
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Strong" }), " — bold emphasis"] }),
81
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Em, { children: "Em" }), " — italic emphasis"] }),
82
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [
83
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Em, { children: "Strong + Em" }) }),
79
+ /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Strong, { children: "Strong" }), " — bold emphasis"] }),
80
+ /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Em, { children: "Em" }), " — italic emphasis"] }),
81
+ /* @__PURE__ */ jsxs(Text, { children: [
82
+ /* @__PURE__ */ jsx(Strong, { children: /* @__PURE__ */ jsx(Em, { children: "Strong + Em" }) }),
84
83
  " ",
85
84
  "— bold italic"
86
85
  ] }),
87
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
86
+ /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
88
87
  underline: true,
89
88
  children: "Underline"
90
89
  }), " — underlined text"] }),
91
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
90
+ /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
92
91
  strikethrough: true,
93
92
  children: "Strikethrough"
94
93
  }), " — deleted text"] }),
95
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "Code" }), " — inline code span"] }),
96
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Kbd" }), " — keyboard shortcut"] })
94
+ /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Code, { children: "Code" }), " — inline code span"] }),
95
+ /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Kbd, { children: "Kbd" }), " — keyboard shortcut"] })
97
96
  ]
98
97
  })]
99
98
  })]
100
99
  }),
101
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
102
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Semantic Colors" }),
103
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
100
+ /* @__PURE__ */ jsx(HR, {}),
101
+ /* @__PURE__ */ jsx(H2, { children: "Semantic Colors" }),
102
+ /* @__PURE__ */ jsxs(Box, {
104
103
  flexDirection: "column",
105
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
104
+ children: [/* @__PURE__ */ jsxs(Box, {
106
105
  gap: 1,
107
106
  children: [
108
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
107
+ /* @__PURE__ */ jsx(Text, {
109
108
  backgroundColor: "$primary",
110
109
  color: "$primary-fg",
111
110
  bold: true,
112
111
  children: " $primary "
113
112
  }),
114
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
113
+ /* @__PURE__ */ jsx(Text, {
115
114
  backgroundColor: "$accent",
116
115
  color: "$accent-fg",
117
116
  bold: true,
118
117
  children: " $accent "
119
118
  }),
120
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
119
+ /* @__PURE__ */ jsx(Text, {
121
120
  backgroundColor: "$success",
122
121
  color: "$success-fg",
123
122
  bold: true,
124
123
  children: " $success "
125
124
  }),
126
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
125
+ /* @__PURE__ */ jsx(Text, {
127
126
  backgroundColor: "$warning",
128
127
  color: "$warning-fg",
129
128
  bold: true,
130
129
  children: " $warning "
131
130
  }),
132
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
131
+ /* @__PURE__ */ jsx(Text, {
133
132
  backgroundColor: "$error",
134
133
  color: "$error-fg",
135
134
  bold: true,
136
135
  children: " $error "
137
136
  })
138
137
  ]
139
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
138
+ }), /* @__PURE__ */ jsxs(Box, {
140
139
  gap: 1,
141
140
  marginTop: 1,
142
141
  children: [
143
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
142
+ /* @__PURE__ */ jsxs(Text, {
144
143
  color: "$primary",
145
144
  children: ["████", " primary"]
146
145
  }),
147
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
146
+ /* @__PURE__ */ jsxs(Text, {
148
147
  color: "$accent",
149
148
  children: ["████", " accent"]
150
149
  }),
151
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
150
+ /* @__PURE__ */ jsxs(Text, {
152
151
  color: "$success",
153
152
  children: ["████", " success"]
154
153
  }),
155
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
154
+ /* @__PURE__ */ jsxs(Text, {
156
155
  color: "$warning",
157
156
  children: ["████", " warning"]
158
157
  }),
159
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
158
+ /* @__PURE__ */ jsxs(Text, {
160
159
  color: "$error",
161
160
  children: ["████", " error"]
162
161
  }),
163
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
162
+ /* @__PURE__ */ jsxs(Text, {
164
163
  color: "$muted",
165
164
  children: ["████", " muted"]
166
165
  })
167
166
  ]
168
167
  })]
169
168
  }),
170
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
171
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Block Elements" }),
172
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Blockquote, { children: "The best color code is no color code — most components already use the right semantic tokens." }),
173
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeBlock, { children: "bun add silvery # install\nbun run dev # start dev server" }),
174
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Lists" }),
175
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
169
+ /* @__PURE__ */ jsx(HR, {}),
170
+ /* @__PURE__ */ jsx(H2, { children: "Block Elements" }),
171
+ /* @__PURE__ */ jsx(Blockquote, { children: "The best color code is no color code — most components already use the right semantic tokens." }),
172
+ /* @__PURE__ */ jsx(CodeBlock, { children: "bun add silvery # install\nbun run dev # start dev server" }),
173
+ /* @__PURE__ */ jsx(H2, { children: "Lists" }),
174
+ /* @__PURE__ */ jsxs(Box, {
176
175
  flexDirection: "row",
177
176
  gap: 4,
178
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
177
+ children: [/* @__PURE__ */ jsxs(Box, {
179
178
  flexDirection: "column",
180
179
  flexGrow: 1,
181
180
  flexBasis: 0,
182
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H3, { children: "Unordered" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(UL, { children: [
183
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "SelectList" }), " — j/k navigation, scroll"] }),
184
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "TextInput" }), " — full readline support"] }),
185
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "ModalDialog" }), " — overlay with input blocking"] }),
186
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "ProgressBar" }), " — determinate + indeterminate"] })
181
+ children: [/* @__PURE__ */ jsx(H3, { children: "Unordered" }), /* @__PURE__ */ jsxs(UL, { children: [
182
+ /* @__PURE__ */ jsxs(LI, { children: [/* @__PURE__ */ jsx(Strong, { children: "SelectList" }), " — j/k navigation, scroll"] }),
183
+ /* @__PURE__ */ jsxs(LI, { children: [/* @__PURE__ */ jsx(Strong, { children: "TextInput" }), " — full readline support"] }),
184
+ /* @__PURE__ */ jsxs(LI, { children: [/* @__PURE__ */ jsx(Strong, { children: "ModalDialog" }), " — overlay with input blocking"] }),
185
+ /* @__PURE__ */ jsxs(LI, { children: [/* @__PURE__ */ jsx(Strong, { children: "ProgressBar" }), " — determinate + indeterminate"] })
187
186
  ] })]
188
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
187
+ }), /* @__PURE__ */ jsxs(Box, {
189
188
  flexDirection: "column",
190
189
  flexGrow: 1,
191
190
  flexBasis: 0,
192
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H3, { children: "Ordered" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(OL, { children: [
193
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: ["Install with ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "bun add silvery" })] }),
194
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [
191
+ children: [/* @__PURE__ */ jsx(H3, { children: "Ordered" }), /* @__PURE__ */ jsxs(OL, { children: [
192
+ /* @__PURE__ */ jsxs(LI, { children: ["Install with ", /* @__PURE__ */ jsx(Code, { children: "bun add silvery" })] }),
193
+ /* @__PURE__ */ jsxs(LI, { children: [
195
194
  "Use ",
196
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "$tokens" }),
195
+ /* @__PURE__ */ jsx(Code, { children: "$tokens" }),
197
196
  " for semantic colors"
198
197
  ] }),
199
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [
198
+ /* @__PURE__ */ jsxs(LI, { children: [
200
199
  "Layout with ",
201
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "flexbox" }),
200
+ /* @__PURE__ */ jsx(Code, { children: "flexbox" }),
202
201
  " via Flexily"
203
202
  ] }),
204
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: ["Test with ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "createTermless()" })] })
203
+ /* @__PURE__ */ jsxs(LI, { children: ["Test with ", /* @__PURE__ */ jsx(Code, { children: "createTermless()" })] })
205
204
  ] })]
206
205
  })]
207
206
  }),
208
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: "silvery v0.0.1 — 38 palettes, 30+ components — silvery.dev" })
207
+ /* @__PURE__ */ jsx(Small, { children: "silvery v0.0.1 — 38 palettes, 30+ components — silvery.dev" })
209
208
  ]
210
209
  });
211
210
  }
@@ -253,24 +252,24 @@ function InputsTab() {
253
252
  setNotifications(false);
254
253
  setAutoSave(true);
255
254
  }, []);
256
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
255
+ return /* @__PURE__ */ jsx(Box, {
257
256
  flexDirection: "column",
258
257
  gap: 1,
259
258
  paddingX: 1,
260
259
  overflow: "scroll",
261
260
  flexGrow: 1,
262
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
261
+ children: /* @__PURE__ */ jsxs(Box, {
263
262
  flexDirection: "row",
264
263
  gap: 2,
265
264
  flexGrow: 1,
266
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
265
+ children: [/* @__PURE__ */ jsxs(Box, {
267
266
  flexDirection: "column",
268
267
  gap: 1,
269
268
  flexGrow: 1,
270
269
  flexBasis: 0,
271
270
  children: [
272
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Text Input" }),
273
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextInput, {
271
+ /* @__PURE__ */ jsx(H2, { children: "Text Input" }),
272
+ /* @__PURE__ */ jsx(TextInput, {
274
273
  value: textValue,
275
274
  onChange: setTextValue,
276
275
  onSubmit: () => setTextValue(""),
@@ -279,8 +278,8 @@ function InputsTab() {
279
278
  borderStyle: "round",
280
279
  isActive: focusIndex === 0
281
280
  }),
282
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Text Area" }),
283
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextArea, {
281
+ /* @__PURE__ */ jsx(H2, { children: "Text Area" }),
282
+ /* @__PURE__ */ jsx(TextArea, {
284
283
  value: areaValue,
285
284
  onChange: setAreaValue,
286
285
  placeholder: "Write your thoughts...",
@@ -288,12 +287,12 @@ function InputsTab() {
288
287
  borderStyle: "round",
289
288
  isActive: focusIndex === 1
290
289
  }),
291
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Select List" }),
292
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
290
+ /* @__PURE__ */ jsx(H2, { children: "Select List" }),
291
+ /* @__PURE__ */ jsx(Box, {
293
292
  borderStyle: "round",
294
293
  borderColor: focusIndex === 2 ? "$focusborder" : "$border",
295
294
  paddingX: 1,
296
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectList, {
295
+ children: /* @__PURE__ */ jsx(SelectList, {
297
296
  items: frameworkItems,
298
297
  highlightedIndex: selectedFramework,
299
298
  onHighlight: setSelectedFramework,
@@ -301,14 +300,14 @@ function InputsTab() {
301
300
  })
302
301
  })
303
302
  ]
304
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
303
+ }), /* @__PURE__ */ jsxs(Box, {
305
304
  flexDirection: "column",
306
305
  gap: 1,
307
306
  flexGrow: 1,
308
307
  flexBasis: 0,
309
308
  children: [
310
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Toggles" }),
311
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
309
+ /* @__PURE__ */ jsx(H2, { children: "Toggles" }),
310
+ /* @__PURE__ */ jsxs(Box, {
312
311
  flexDirection: "column",
313
312
  borderStyle: "round",
314
313
  borderColor: focusIndex === 3 ? "$focusborder" : "$border",
@@ -316,19 +315,19 @@ function InputsTab() {
316
315
  paddingY: 1,
317
316
  gap: 1,
318
317
  children: [
319
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
318
+ /* @__PURE__ */ jsx(Toggle, {
320
319
  value: darkMode,
321
320
  onChange: setDarkMode,
322
321
  label: "Dark mode",
323
322
  isActive: focusIndex === 3
324
323
  }),
325
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
324
+ /* @__PURE__ */ jsx(Toggle, {
326
325
  value: notifications,
327
326
  onChange: setNotifications,
328
327
  label: "Notifications",
329
328
  isActive: false
330
329
  }),
331
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
330
+ /* @__PURE__ */ jsx(Toggle, {
332
331
  value: autoSave,
333
332
  onChange: setAutoSave,
334
333
  label: "Auto-save",
@@ -336,65 +335,65 @@ function InputsTab() {
336
335
  })
337
336
  ]
338
337
  }),
339
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Button" }),
340
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
338
+ /* @__PURE__ */ jsx(H2, { children: "Button" }),
339
+ /* @__PURE__ */ jsx(Button, {
341
340
  label: "Reset All",
342
341
  onPress: resetAll,
343
342
  isActive: focusIndex === 4
344
343
  }),
345
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
346
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Current Values" }),
347
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
344
+ /* @__PURE__ */ jsx(HR, {}),
345
+ /* @__PURE__ */ jsx(H2, { children: "Current Values" }),
346
+ /* @__PURE__ */ jsxs(Box, {
348
347
  flexDirection: "column",
349
348
  backgroundColor: "$surfacebg",
350
349
  paddingX: 1,
351
350
  paddingY: 1,
352
351
  borderStyle: "round",
353
352
  children: [
354
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
353
+ /* @__PURE__ */ jsxs(Text, {
355
354
  color: "$surface",
356
355
  children: [
357
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Text:" }),
356
+ /* @__PURE__ */ jsx(Strong, { children: "Text:" }),
358
357
  " ",
359
- textValue || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "(empty)" })
358
+ textValue || /* @__PURE__ */ jsx(Muted, { children: "(empty)" })
360
359
  ]
361
360
  }),
362
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
361
+ /* @__PURE__ */ jsxs(Text, {
363
362
  color: "$surface",
364
363
  children: [
365
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Area:" }),
364
+ /* @__PURE__ */ jsx(Strong, { children: "Area:" }),
366
365
  " ",
367
- areaValue ? areaValue.split("\n")[0] + (areaValue.includes("\n") ? "..." : "") : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "(empty)" })
366
+ areaValue ? areaValue.split("\n")[0] + (areaValue.includes("\n") ? "..." : "") : /* @__PURE__ */ jsx(Muted, { children: "(empty)" })
368
367
  ]
369
368
  }),
370
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
369
+ /* @__PURE__ */ jsxs(Text, {
371
370
  color: "$surface",
372
371
  children: [
373
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Framework:" }),
372
+ /* @__PURE__ */ jsx(Strong, { children: "Framework:" }),
374
373
  " ",
375
374
  frameworkItems[selectedFramework]?.label
376
375
  ]
377
376
  }),
378
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
377
+ /* @__PURE__ */ jsxs(Text, {
379
378
  color: "$surface",
380
379
  children: [
381
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Dark mode:" }),
380
+ /* @__PURE__ */ jsx(Strong, { children: "Dark mode:" }),
382
381
  " ",
383
382
  darkMode ? "on" : "off"
384
383
  ]
385
384
  }),
386
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
385
+ /* @__PURE__ */ jsxs(Text, {
387
386
  color: "$surface",
388
387
  children: [
389
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Notifications:" }),
388
+ /* @__PURE__ */ jsx(Strong, { children: "Notifications:" }),
390
389
  " ",
391
390
  notifications ? "on" : "off"
392
391
  ]
393
392
  }),
394
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
393
+ /* @__PURE__ */ jsxs(Text, {
395
394
  color: "$surface",
396
395
  children: [
397
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Auto-save:" }),
396
+ /* @__PURE__ */ jsx(Strong, { children: "Auto-save:" }),
398
397
  " ",
399
398
  autoSave ? "on" : "off"
400
399
  ]
@@ -432,111 +431,111 @@ function DisplayTab({ scrollOffset }) {
432
431
  flexDirection: "column",
433
432
  gap: 1
434
433
  };
435
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
434
+ return /* @__PURE__ */ jsxs(Box, {
436
435
  flexDirection: "column",
437
436
  gap: 1,
438
437
  paddingX: 1,
439
438
  children: [
440
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
439
+ /* @__PURE__ */ jsxs(Box, {
441
440
  flexDirection: "row",
442
441
  gap: 1,
443
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
442
+ children: [/* @__PURE__ */ jsxs(Box, {
444
443
  ...cell,
445
444
  children: [
446
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
445
+ /* @__PURE__ */ jsx(Text, {
447
446
  color: "$primary",
448
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Progress Bars" })
447
+ children: /* @__PURE__ */ jsx(Strong, { children: "Progress Bars" })
449
448
  }),
450
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
449
+ /* @__PURE__ */ jsxs(Box, {
451
450
  flexDirection: "column",
452
451
  children: [
453
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
452
+ /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
454
453
  color: "$muted",
455
454
  children: "Build "
456
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
455
+ }), /* @__PURE__ */ jsx(Box, {
457
456
  flexGrow: 1,
458
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressBar, {
457
+ children: /* @__PURE__ */ jsx(ProgressBar, {
459
458
  value: 1,
460
459
  label: "✓"
461
460
  })
462
461
  })] }),
463
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
462
+ /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
464
463
  color: "$muted",
465
464
  children: "Test "
466
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
465
+ }), /* @__PURE__ */ jsx(Box, {
467
466
  flexGrow: 1,
468
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressBar, { value: .73 })
467
+ children: /* @__PURE__ */ jsx(ProgressBar, { value: .73 })
469
468
  })] }),
470
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
469
+ /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
471
470
  color: "$muted",
472
471
  children: "Deploy "
473
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
472
+ }), /* @__PURE__ */ jsx(Box, {
474
473
  flexGrow: 1,
475
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressBar, { value: .35 })
474
+ children: /* @__PURE__ */ jsx(ProgressBar, { value: .35 })
476
475
  })] }),
477
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
476
+ /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
478
477
  color: "$muted",
479
478
  children: "Install "
480
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
479
+ }), /* @__PURE__ */ jsx(Box, {
481
480
  flexGrow: 1,
482
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressBar, {})
481
+ children: /* @__PURE__ */ jsx(ProgressBar, {})
483
482
  })] })
484
483
  ]
485
484
  }),
486
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
485
+ /* @__PURE__ */ jsxs(Box, {
487
486
  flexDirection: "column",
488
487
  children: [
489
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {
488
+ /* @__PURE__ */ jsx(Spinner, {
490
489
  type: "dots",
491
490
  label: "Loading packages..."
492
491
  }),
493
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {
492
+ /* @__PURE__ */ jsx(Spinner, {
494
493
  type: "line",
495
494
  label: "Compiling..."
496
495
  }),
497
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {
496
+ /* @__PURE__ */ jsx(Spinner, {
498
497
  type: "arc",
499
498
  label: "Optimizing bundle..."
500
499
  })
501
500
  ]
502
501
  })
503
502
  ]
504
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
503
+ }), /* @__PURE__ */ jsxs(Box, {
505
504
  ...cell,
506
505
  children: [
507
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
506
+ /* @__PURE__ */ jsx(Text, {
508
507
  color: "$primary",
509
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Input Controls" })
508
+ children: /* @__PURE__ */ jsx(Strong, { children: "Input Controls" })
510
509
  }),
511
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
510
+ /* @__PURE__ */ jsxs(Box, {
512
511
  flexDirection: "column",
513
512
  gap: 1,
514
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
513
+ children: [/* @__PURE__ */ jsxs(Box, {
515
514
  gap: 1,
516
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Search:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
515
+ children: [/* @__PURE__ */ jsx(Muted, { children: "Search:" }), /* @__PURE__ */ jsx(Box, {
517
516
  flexGrow: 1,
518
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextInput, {
517
+ children: /* @__PURE__ */ jsx(TextInput, {
519
518
  value: "flutter widgets",
520
519
  onChange: () => {},
521
520
  showUnderline: true,
522
521
  underlineWidth: 25
523
522
  })
524
523
  })]
525
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
524
+ }), /* @__PURE__ */ jsxs(Box, {
526
525
  gap: 2,
527
526
  wrap: "truncate",
528
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
527
+ children: [/* @__PURE__ */ jsx(Toggle, {
529
528
  label: "Dark mode",
530
529
  value: true,
531
530
  onChange: () => {}
532
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
531
+ }), /* @__PURE__ */ jsx(Toggle, {
533
532
  label: "Notifications",
534
533
  value: false,
535
534
  onChange: () => {}
536
535
  })]
537
536
  })]
538
537
  }),
539
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectList, {
538
+ /* @__PURE__ */ jsx(SelectList, {
540
539
  items: [
541
540
  {
542
541
  label: "React",
@@ -562,25 +561,25 @@ function DisplayTab({ scrollOffset }) {
562
561
  ]
563
562
  })]
564
563
  }),
565
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
564
+ /* @__PURE__ */ jsxs(Box, {
566
565
  flexDirection: "row",
567
566
  gap: 1,
568
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
567
+ children: [/* @__PURE__ */ jsxs(Box, {
569
568
  flexDirection: "column",
570
569
  gap: 1,
571
570
  flexGrow: 1,
572
571
  flexBasis: 0,
573
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
572
+ children: [/* @__PURE__ */ jsxs(Box, {
574
573
  ...cell,
575
574
  flexGrow: 1,
576
575
  flexBasis: 0,
577
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
576
+ children: [/* @__PURE__ */ jsx(Text, {
578
577
  color: "$primary",
579
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Border Styles" })
580
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
578
+ children: /* @__PURE__ */ jsx(Strong, { children: "Border Styles" })
579
+ }), /* @__PURE__ */ jsx(Box, {
581
580
  flexDirection: "column",
582
581
  gap: 0,
583
- children: borderStyles.map((style, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
582
+ children: borderStyles.map((style, i) => /* @__PURE__ */ jsx(Box, {
584
583
  borderStyle: style,
585
584
  borderColor: i === selectedBorder ? "$primary" : "$border",
586
585
  borderLeft: true,
@@ -588,27 +587,27 @@ function DisplayTab({ scrollOffset }) {
588
587
  borderTop: i === 0,
589
588
  borderBottom: true,
590
589
  paddingX: 1,
591
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
590
+ children: /* @__PURE__ */ jsxs(Text, {
592
591
  bold: i === selectedBorder,
593
592
  children: [i === selectedBorder ? "▸ " : " ", style]
594
593
  })
595
594
  }, style))
596
595
  })]
597
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
596
+ }), /* @__PURE__ */ jsxs(Box, {
598
597
  ...cell,
599
598
  flexGrow: 1,
600
599
  flexBasis: 0,
601
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
600
+ children: [/* @__PURE__ */ jsx(Text, {
602
601
  color: "$primary",
603
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Design Tokens" })
604
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
602
+ children: /* @__PURE__ */ jsx(Strong, { children: "Design Tokens" })
603
+ }), /* @__PURE__ */ jsxs(Box, {
605
604
  flexDirection: "row",
606
605
  gap: 2,
607
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
606
+ children: [/* @__PURE__ */ jsxs(Box, {
608
607
  flexDirection: "column",
609
608
  width: 14,
610
609
  children: [
611
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
610
+ /* @__PURE__ */ jsxs(Text, {
612
611
  color: "$success",
613
612
  children: [
614
613
  "●",
@@ -616,7 +615,7 @@ function DisplayTab({ scrollOffset }) {
616
615
  "$success".padEnd(10)
617
616
  ]
618
617
  }),
619
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
618
+ /* @__PURE__ */ jsxs(Text, {
620
619
  color: "$warning",
621
620
  children: [
622
621
  "●",
@@ -624,7 +623,7 @@ function DisplayTab({ scrollOffset }) {
624
623
  "$warning".padEnd(10)
625
624
  ]
626
625
  }),
627
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
626
+ /* @__PURE__ */ jsxs(Text, {
628
627
  color: "$error",
629
628
  children: [
630
629
  "●",
@@ -632,7 +631,7 @@ function DisplayTab({ scrollOffset }) {
632
631
  "$error".padEnd(10)
633
632
  ]
634
633
  }),
635
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
634
+ /* @__PURE__ */ jsxs(Text, {
636
635
  color: "$info",
637
636
  children: [
638
637
  "●",
@@ -640,7 +639,7 @@ function DisplayTab({ scrollOffset }) {
640
639
  "$info".padEnd(10)
641
640
  ]
642
641
  }),
643
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
642
+ /* @__PURE__ */ jsxs(Text, {
644
643
  color: "$primary",
645
644
  children: [
646
645
  "●",
@@ -648,31 +647,31 @@ function DisplayTab({ scrollOffset }) {
648
647
  "$primary".padEnd(10)
649
648
  ]
650
649
  }),
651
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
650
+ /* @__PURE__ */ jsxs(Muted, { children: [
652
651
  "●",
653
652
  " ",
654
653
  "$muted".padEnd(10)
655
654
  ] })
656
655
  ]
657
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
656
+ }), /* @__PURE__ */ jsxs(Box, {
658
657
  flexDirection: "column",
659
658
  children: [
660
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
659
+ /* @__PURE__ */ jsx(Text, {
661
660
  backgroundColor: "$primary",
662
661
  color: "$primary-fg",
663
662
  children: " $primary "
664
663
  }),
665
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
664
+ /* @__PURE__ */ jsx(Text, {
666
665
  backgroundColor: "$fg",
667
666
  color: "$bg",
668
667
  children: " $inverse "
669
668
  }),
670
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
669
+ /* @__PURE__ */ jsx(Text, {
671
670
  backgroundColor: "$muted-bg",
672
671
  color: "$fg",
673
672
  children: " $surface "
674
673
  }),
675
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
674
+ /* @__PURE__ */ jsx(Text, {
676
675
  backgroundColor: "$surfacebg",
677
676
  color: "$surface",
678
677
  children: " $surfacebg "
@@ -681,27 +680,27 @@ function DisplayTab({ scrollOffset }) {
681
680
  })]
682
681
  })]
683
682
  })]
684
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
683
+ }), /* @__PURE__ */ jsxs(Box, {
685
684
  ...cell,
686
685
  backgroundColor: "$surfacebg",
687
686
  paddingRight: 2,
688
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
687
+ children: [/* @__PURE__ */ jsxs(Box, {
689
688
  justifyContent: "space-between",
690
689
  paddingBottom: 1,
691
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
690
+ children: [/* @__PURE__ */ jsx(Text, {
692
691
  color: "$primary",
693
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Modal Dialog" })
694
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, {
692
+ children: /* @__PURE__ */ jsx(Strong, { children: "Modal Dialog" })
693
+ }), /* @__PURE__ */ jsx(Small, {
695
694
  color: "$muted",
696
695
  children: "Esc to close"
697
696
  })]
698
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
697
+ }), /* @__PURE__ */ jsxs(Box, {
699
698
  flexDirection: "column",
700
699
  gap: 1,
701
700
  children: [
702
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
701
+ /* @__PURE__ */ jsxs(Box, {
703
702
  gap: 1,
704
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Branch:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextInput, {
703
+ children: [/* @__PURE__ */ jsx(Muted, { children: "Branch:" }), /* @__PURE__ */ jsx(TextInput, {
705
704
  value: "main",
706
705
  onChange: () => {},
707
706
  showUnderline: true,
@@ -709,34 +708,34 @@ function DisplayTab({ scrollOffset }) {
709
708
  isActive: true
710
709
  })]
711
710
  }),
712
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
711
+ /* @__PURE__ */ jsxs(Box, {
713
712
  flexDirection: "column",
714
713
  children: [
715
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
714
+ /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
716
715
  color: "$success",
717
716
  children: "✓"
718
717
  }), " All checks passed"] }),
719
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
718
+ /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
720
719
  color: "$success",
721
720
  children: "✓"
722
721
  }), " Tests: 247 passed"] }),
723
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
722
+ /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
724
723
  color: "$warning",
725
724
  children: "⚠"
726
725
  }), " 2 deprecation warnings"] }),
727
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
726
+ /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
728
727
  color: "$muted",
729
728
  children: "ℹ"
730
729
  }), " Deploy target: us-east-1"] })
731
730
  ]
732
731
  }),
733
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
732
+ /* @__PURE__ */ jsxs(Box, {
734
733
  gap: 2,
735
- children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
734
+ children: [/* @__PURE__ */ jsx(Text, {
736
735
  backgroundColor: "$primary",
737
736
  color: "$primary-fg",
738
737
  children: " Deploy "
739
- }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
738
+ }), /* @__PURE__ */ jsx(Text, {
740
739
  backgroundColor: "$muted-bg",
741
740
  color: "$fg",
742
741
  children: " Cancel "
@@ -746,47 +745,47 @@ function DisplayTab({ scrollOffset }) {
746
745
  })]
747
746
  })]
748
747
  }),
749
- showModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
748
+ showModal && /* @__PURE__ */ jsx(Box, {
750
749
  position: "absolute",
751
750
  display: "flex",
752
751
  justifyContent: "center",
753
752
  alignItems: "center",
754
753
  width: "100%",
755
754
  height: "100%",
756
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalDialog, {
755
+ children: /* @__PURE__ */ jsx(ModalDialog, {
757
756
  title: "Component Gallery",
758
757
  width: 50,
759
758
  footer: "ESC or q to close",
760
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
759
+ children: /* @__PURE__ */ jsxs(Box, {
761
760
  flexDirection: "column",
762
761
  gap: 1,
763
762
  children: [
764
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(P, { children: [
763
+ /* @__PURE__ */ jsxs(P, { children: [
765
764
  "This gallery demonstrates ",
766
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "silvery" }),
765
+ /* @__PURE__ */ jsx(Strong, { children: "silvery" }),
767
766
  "'s built-in UI components. Every component uses semantic theme tokens — they adapt to any of the 38 built-in palettes automatically."
768
767
  ] }),
769
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
770
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
768
+ /* @__PURE__ */ jsx(HR, {}),
769
+ /* @__PURE__ */ jsxs(Box, {
771
770
  flexDirection: "column",
772
771
  children: [
773
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
772
+ /* @__PURE__ */ jsx(Text, {
774
773
  color: "$success",
775
774
  children: "✓ Typography presets (H1-H3, Lead, Muted, Code)"
776
775
  }),
777
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
776
+ /* @__PURE__ */ jsx(Text, {
778
777
  color: "$success",
779
778
  children: "✓ Input components (TextInput, TextArea, SelectList)"
780
779
  }),
781
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
780
+ /* @__PURE__ */ jsx(Text, {
782
781
  color: "$success",
783
782
  children: "✓ Display widgets (ProgressBar, Spinner, Badge)"
784
783
  }),
785
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
784
+ /* @__PURE__ */ jsx(Text, {
786
785
  color: "$success",
787
786
  children: "✓ Layout primitives (Box, Divider, border styles)"
788
787
  }),
789
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
788
+ /* @__PURE__ */ jsx(Text, {
790
789
  color: "$success",
791
790
  children: "✓ Dialog system (ModalDialog with input blocking)"
792
791
  })
@@ -832,14 +831,14 @@ function ComponentsApp() {
832
831
  if (key.end || activeTab === "typography" && input === "G") setScrollOffset(999);
833
832
  }
834
833
  });
835
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
834
+ return /* @__PURE__ */ jsxs(Box, {
836
835
  flexDirection: "column",
837
836
  flexGrow: 1,
838
837
  padding: 1,
839
838
  children: [
840
- activeTab === "display" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DisplayTab, { scrollOffset }),
841
- activeTab === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputsTab, {}),
842
- activeTab === "typography" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypographyTab, { scrollOffset })
839
+ activeTab === "display" && /* @__PURE__ */ jsx(DisplayTab, { scrollOffset }),
840
+ activeTab === "inputs" && /* @__PURE__ */ jsx(InputsTab, {}),
841
+ activeTab === "typography" && /* @__PURE__ */ jsx(TypographyTab, { scrollOffset })
843
842
  ]
844
843
  });
845
844
  }
@@ -847,10 +846,10 @@ async function main() {
847
846
  try {
848
847
  var _usingCtx$1 = _usingCtx();
849
848
  const term = _usingCtx$1.u(createTerm());
850
- const { waitUntilExit } = await render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExampleBanner, {
849
+ const { waitUntilExit } = await render(/* @__PURE__ */ jsx(ExampleBanner, {
851
850
  meta,
852
851
  controls: "h/l tab Tab cycle inputs j/k navigate Enter modal Esc/q quit",
853
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComponentsApp, {})
852
+ children: /* @__PURE__ */ jsx(ComponentsApp, {})
854
853
  }), term);
855
854
  await waitUntilExit();
856
855
  } catch (_) {