juxscript 1.0.3 → 1.0.4

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 (71) hide show
  1. package/README.md +37 -92
  2. package/bin/cli.js +57 -56
  3. package/lib/components/alert.ts +240 -0
  4. package/lib/components/app.ts +216 -82
  5. package/lib/components/badge.ts +164 -0
  6. package/lib/components/button.ts +188 -53
  7. package/lib/components/card.ts +75 -61
  8. package/lib/components/chart.ts +17 -15
  9. package/lib/components/checkbox.ts +228 -0
  10. package/lib/components/code.ts +66 -152
  11. package/lib/components/container.ts +104 -208
  12. package/lib/components/data.ts +1 -3
  13. package/lib/components/datepicker.ts +226 -0
  14. package/lib/components/dialog.ts +258 -0
  15. package/lib/components/docs-data.json +1697 -388
  16. package/lib/components/dropdown.ts +244 -0
  17. package/lib/components/element.ts +271 -0
  18. package/lib/components/fileupload.ts +319 -0
  19. package/lib/components/footer.ts +37 -18
  20. package/lib/components/header.ts +53 -33
  21. package/lib/components/heading.ts +119 -0
  22. package/lib/components/helpers.ts +34 -0
  23. package/lib/components/hero.ts +57 -31
  24. package/lib/components/include.ts +292 -0
  25. package/lib/components/input.ts +166 -78
  26. package/lib/components/layout.ts +144 -18
  27. package/lib/components/list.ts +83 -74
  28. package/lib/components/loading.ts +263 -0
  29. package/lib/components/main.ts +43 -17
  30. package/lib/components/menu.ts +108 -24
  31. package/lib/components/modal.ts +50 -21
  32. package/lib/components/nav.ts +60 -18
  33. package/lib/components/paragraph.ts +111 -0
  34. package/lib/components/progress.ts +276 -0
  35. package/lib/components/radio.ts +236 -0
  36. package/lib/components/req.ts +300 -0
  37. package/lib/components/script.ts +33 -74
  38. package/lib/components/select.ts +247 -0
  39. package/lib/components/sidebar.ts +86 -36
  40. package/lib/components/style.ts +47 -70
  41. package/lib/components/switch.ts +261 -0
  42. package/lib/components/table.ts +47 -24
  43. package/lib/components/tabs.ts +105 -63
  44. package/lib/components/theme-toggle.ts +361 -0
  45. package/lib/components/token-calculator.ts +380 -0
  46. package/lib/components/tooltip.ts +244 -0
  47. package/lib/components/view.ts +36 -20
  48. package/lib/components/write.ts +284 -0
  49. package/lib/globals.d.ts +21 -0
  50. package/lib/jux.ts +172 -68
  51. package/lib/presets/notion.css +521 -0
  52. package/lib/presets/notion.jux +27 -0
  53. package/lib/reactivity/state.ts +364 -0
  54. package/machinery/compiler.js +126 -38
  55. package/machinery/generators/html.js +2 -3
  56. package/machinery/server.js +2 -2
  57. package/package.json +29 -3
  58. package/lib/components/import.ts +0 -430
  59. package/lib/components/node.ts +0 -200
  60. package/lib/components/reactivity.js +0 -104
  61. package/lib/components/theme.ts +0 -97
  62. package/lib/layouts/notion.css +0 -258
  63. package/lib/styles/base-theme.css +0 -186
  64. package/lib/styles/dark-theme.css +0 -144
  65. package/lib/styles/light-theme.css +0 -144
  66. package/lib/styles/tokens/dark.css +0 -86
  67. package/lib/styles/tokens/light.css +0 -86
  68. package/lib/templates/index.juxt +0 -33
  69. package/lib/themes/dark.css +0 -86
  70. package/lib/themes/light.css +0 -86
  71. /package/lib/{styles → presets}/global.css +0 -0
package/lib/jux.ts CHANGED
@@ -3,11 +3,11 @@
3
3
  * Imports all components and provides the jux global object
4
4
  */
5
5
 
6
- import { Reactive } from './components/reactivity.js';
6
+ import { state } from './reactivity/state.js';
7
7
  import { Data, data } from './components/data.js';
8
8
  import { table, Table, type TableOptions, type TableColumn } from './components/table.js';
9
9
  import { hero, Hero, type HeroOptions } from './components/hero.js';
10
- import { card, Card, type CardOptions, type CardAction } from './components/card.js';
10
+ import { card, Card, type CardOptions } from './components/card.js';
11
11
  import { button, Button, type ButtonOptions } from './components/button.js';
12
12
  import { header, Header, type HeaderOptions } from './components/header.js';
13
13
  import { footer, Footer, type FooterOptions } from './components/footer.js';
@@ -23,13 +23,33 @@ import { chart, Chart, type ChartOptions } from './components/chart.js';
23
23
  import { view, View, type ViewOptions } from './components/view.js';
24
24
  import { code, Code, type CodeOptions } from './components/code.js';
25
25
  import { input, Input, type InputOptions } from './components/input.js';
26
- import { node, Node, type NodeOptions } from './components/node.js';
27
- import { App } from './components/app.js';
28
- import { Style } from './components/style.js';
29
- import { Script } from './components/script.js';
30
- import { Layout } from './components/layout.js';
26
+ import { app, App, AppOptions } from './components/app.js';
27
+ import { style, Style } from './components/style.js';
28
+ import { script, Script } from './components/script.js';
29
+ import { layout, Layout } from './components/layout.js';
31
30
  import { ErrorHandler } from './components/error-handler.js';
32
- import { theme, Theme } from './components/theme.js';
31
+ import { include, Include } from './components/include.js';
32
+ import { themeToggle, ThemeToggle, type ThemeToggleOptions, type Theme } from './components/theme-toggle.js';
33
+ import { tokenCalculator, TokenCalculator, type TokenCalculatorOptions } from './components/token-calculator.js';
34
+ import { write, Write, type WriteOptions } from './components/write.js';
35
+ import { element, Element, type ElementOptions } from './components/element.js';
36
+ import { alert, Alert, type AlertOptions } from './components/alert.js';
37
+ import { loading, Loading, type LoadingOptions } from './components/loading.js';
38
+ import { checkbox, Checkbox, type CheckboxOptions } from './components/checkbox.js';
39
+ import { select, Select, type SelectOptions, type SelectOption } from './components/select.js';
40
+ import { radio, Radio, type RadioOptions, type RadioOption } from './components/radio.js';
41
+ import { switchComponent, Switch, type SwitchOptions } from './components/switch.js';
42
+ import { badge, Badge, type BadgeOptions } from './components/badge.js';
43
+ import { progress, Progress, type ProgressOptions } from './components/progress.js';
44
+ import { tooltip, Tooltip, type TooltipOptions } from './components/tooltip.js';
45
+ import { dialog, Dialog, type DialogOptions } from './components/dialog.js';
46
+ import { dropdown, Dropdown, type DropdownOptions, type DropdownItem } from './components/dropdown.js';
47
+ import { datepicker, DatePicker, type DatePickerOptions } from './components/datepicker.js';
48
+ import { fileupload, FileUpload, type FileUploadOptions } from './components/fileupload.js';
49
+ import { req, Req, type RequestInfo } from './components/req.js';
50
+ import { heading, Heading, type HeadingOptions } from './components/heading.js';
51
+ import { paragraph, Paragraph, type ParagraphOptions } from './components/paragraph.js';
52
+
33
53
 
34
54
  /* -------------------------
35
55
  * Type Exports
@@ -58,9 +78,32 @@ export type {
58
78
  ChartOptions,
59
79
  CodeOptions,
60
80
  InputOptions,
61
- NodeOptions,
62
81
  CardOptions,
63
- CardAction
82
+ AppOptions,
83
+ ThemeToggleOptions,
84
+ Theme,
85
+ TokenCalculatorOptions,
86
+ WriteOptions,
87
+ ElementOptions,
88
+ AlertOptions,
89
+ LoadingOptions,
90
+ CheckboxOptions,
91
+ SelectOptions,
92
+ SelectOption,
93
+ RadioOptions,
94
+ RadioOption,
95
+ SwitchOptions,
96
+ BadgeOptions,
97
+ ProgressOptions,
98
+ TooltipOptions,
99
+ DialogOptions,
100
+ DropdownOptions,
101
+ DropdownItem,
102
+ DatePickerOptions,
103
+ FileUploadOptions,
104
+ RequestInfo,
105
+ HeadingOptions,
106
+ ParagraphOptions
64
107
  };
65
108
 
66
109
  /* -------------------------
@@ -68,7 +111,6 @@ export type {
68
111
  * ------------------------- */
69
112
 
70
113
  export {
71
- Reactive,
72
114
  Data,
73
115
  Hero,
74
116
  Card,
@@ -88,22 +130,99 @@ export {
88
130
  Code,
89
131
  Input,
90
132
  View,
91
- Node,
92
133
  App,
93
134
  Style,
94
135
  Script,
95
136
  Layout,
96
- Theme
137
+ Include,
138
+ ThemeToggle,
139
+ TokenCalculator,
140
+ Write,
141
+ Element,
142
+ Alert,
143
+ Loading,
144
+ Checkbox,
145
+ Select,
146
+ Radio,
147
+ Switch,
148
+ Badge,
149
+ Progress,
150
+ Tooltip,
151
+ Dialog,
152
+ Dropdown,
153
+ DatePicker,
154
+ FileUpload,
155
+ Req,
156
+ Heading,
157
+ Paragraph
97
158
  };
98
159
 
160
+ /* -------------------------
161
+ * Jux API Interface
162
+ * ------------------------- */
163
+
164
+ export interface JuxAPI {
165
+ // Utility methods
166
+ apiUrl: string;
167
+ param(name: string): string | null;
168
+ req: typeof req;
169
+
170
+ // Component factories
171
+ data: typeof data;
172
+ table: typeof table;
173
+ hero: typeof hero;
174
+ card: typeof card;
175
+ button: typeof button;
176
+ header: typeof header;
177
+ footer: typeof footer;
178
+ main: typeof main;
179
+ sidebar: typeof sidebar;
180
+ container: typeof container;
181
+ modal: typeof modal;
182
+ tabs: typeof tabs;
183
+ list: typeof list;
184
+ menu: typeof menu;
185
+ nav: typeof nav;
186
+ chart: typeof chart;
187
+ code: typeof code;
188
+ input: typeof input;
189
+ view: typeof view;
190
+ app: typeof app;
191
+ style: typeof style;
192
+ script: typeof script;
193
+ layout: typeof layout;
194
+ include: typeof include;
195
+ themeToggle: typeof themeToggle;
196
+ tokenCalculator: typeof tokenCalculator;
197
+ write: typeof write;
198
+ element: typeof element;
199
+ alert: typeof alert;
200
+ loading: typeof loading;
201
+ checkbox: typeof checkbox;
202
+ select: typeof select;
203
+ radio: typeof radio;
204
+ switch: typeof switchComponent;
205
+ badge: typeof badge;
206
+ progress: typeof progress;
207
+ tooltip: typeof tooltip;
208
+ dialog: typeof dialog;
209
+ dropdown: typeof dropdown;
210
+ datepicker: typeof datepicker;
211
+ fileupload: typeof fileupload;
212
+ heading: typeof heading;
213
+ paragraph: typeof paragraph;
214
+ }
215
+
99
216
  /* -------------------------
100
217
  * Jux Singleton
101
218
  * ------------------------- */
102
219
 
103
- class Jux {
220
+ class Jux implements JuxAPI {
104
221
  apiUrl: string = '/api/query';
105
222
 
106
- // Utility methods
223
+ /**
224
+ * Get URL parameter or juxContext value
225
+ */
107
226
  param(name: string): string | null {
108
227
  if (typeof window !== 'undefined' && (window as any).juxContext?.[name] !== undefined) {
109
228
  return (window as any).juxContext[name];
@@ -117,7 +236,10 @@ class Jux {
117
236
  return null;
118
237
  }
119
238
 
120
- // Component methods
239
+ // Request utilities
240
+ req = req;
241
+
242
+ // Component factory methods
121
243
  data = data;
122
244
  table = table;
123
245
  hero = hero;
@@ -135,69 +257,51 @@ class Jux {
135
257
  code = code;
136
258
  nav = nav;
137
259
  input = input;
138
- node = node;
139
260
  view = view;
140
261
  chart = chart;
141
- theme = theme;
142
-
143
- // App-level configuration methods
144
- app(): App {
145
- return new App();
146
- }
147
-
148
- style(contentOrUrl: string): Style {
149
- return new Style(contentOrUrl);
150
- }
151
-
152
- script(contentOrSrc: string): Script {
153
- return new Script(contentOrSrc);
154
- }
155
-
156
- layout(juxFile: string): Layout {
157
- return new Layout(juxFile);
158
- }
262
+ app = app;
263
+ include = include;
264
+ style = style;
265
+ script = script;
266
+ layout = layout;
267
+ themeToggle = themeToggle;
268
+ tokenCalculator = tokenCalculator;
269
+ write = write;
270
+ element = element;
271
+ alert = alert;
272
+ loading = loading;
273
+ checkbox = checkbox;
274
+ select = select;
275
+ radio = radio;
276
+ switch = switchComponent;
277
+ badge = badge;
278
+ progress = progress;
279
+ tooltip = tooltip;
280
+ dialog = dialog;
281
+ dropdown = dropdown;
282
+ datepicker = datepicker;
283
+ fileupload = fileupload;
284
+ heading = heading;
285
+ paragraph = paragraph;
159
286
  }
160
287
 
288
+ /**
289
+ * Global jux singleton instance
290
+ */
161
291
  const jux = new Jux();
162
292
 
293
+ // Make jux available globally in browser
294
+ if (typeof window !== 'undefined') {
295
+ (window as any).jux = jux;
296
+ }
297
+
163
298
  /* -------------------------
164
299
  * Exports
165
- *
166
- * ⚠️ IMPORTANT: When adding a new component:
167
- * 1. Import it at the top
168
- * 2. Add to Jux class as a method
169
- * 3. Export as $ alias below
170
- * 4. Update machinery/compiler → COMPONENT_ALIASES array
171
300
  * ------------------------- */
172
301
 
173
302
  export {
174
303
  jux,
175
- // $ aliases - just re-export the factory functions
176
- table as $table,
177
- hero as $hero,
178
- card as $card,
179
- button as $button,
180
- header as $header,
181
- footer as $footer,
182
- main as $main,
183
- sidebar as $sidebar,
184
- container as $container,
185
- modal as $modal,
186
- tabs as $tabs,
187
- list as $list,
188
- menu as $menu,
189
- code as $code,
190
- nav as $nav,
191
- input as $input,
192
- node as $node,
193
- view as $view,
194
- chart as $chart,
195
- data as $data,
196
- App as $app,
197
- Style as $style,
198
- Script as $script,
199
- Layout as $layout,
200
- theme as $theme,
201
-
304
+ state,
305
+ req,
202
306
  ErrorHandler
203
307
  };