juxscript 1.1.325 → 1.1.334

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 (115) hide show
  1. package/dist/components/blocks/menu.d.ts +62 -0
  2. package/dist/components/blocks/menu.d.ts.map +1 -0
  3. package/dist/components/blocks/menu.js +149 -0
  4. package/dist/components/blocks/menu.js.map +1 -0
  5. package/dist/components/button.d.ts +33 -0
  6. package/dist/components/button.d.ts.map +1 -0
  7. package/dist/components/button.js +108 -0
  8. package/dist/components/button.js.map +1 -0
  9. package/dist/components/checkbox.d.ts +62 -0
  10. package/dist/components/checkbox.d.ts.map +1 -0
  11. package/dist/components/checkbox.js +179 -0
  12. package/dist/components/checkbox.js.map +1 -0
  13. package/dist/components/container.d.ts +58 -0
  14. package/dist/components/container.d.ts.map +1 -0
  15. package/dist/components/container.js +152 -0
  16. package/dist/components/container.js.map +1 -0
  17. package/dist/components/data.d.ts +58 -0
  18. package/dist/components/data.d.ts.map +1 -0
  19. package/dist/components/data.js +131 -0
  20. package/dist/components/data.js.map +1 -0
  21. package/dist/components/grid.d.ts +58 -0
  22. package/dist/components/grid.d.ts.map +1 -0
  23. package/dist/components/grid.js +128 -0
  24. package/dist/components/grid.js.map +1 -0
  25. package/dist/components/include.d.ts +86 -0
  26. package/dist/components/include.d.ts.map +1 -0
  27. package/dist/components/include.js +239 -0
  28. package/dist/components/include.js.map +1 -0
  29. package/dist/components/input.d.ts +58 -0
  30. package/dist/components/input.d.ts.map +1 -0
  31. package/dist/components/input.js +162 -0
  32. package/dist/components/input.js.map +1 -0
  33. package/dist/components/link.d.ts +35 -0
  34. package/dist/components/link.d.ts.map +1 -0
  35. package/dist/components/link.js +136 -0
  36. package/dist/components/link.js.map +1 -0
  37. package/dist/components/list.d.ts +48 -0
  38. package/dist/components/list.d.ts.map +1 -0
  39. package/dist/components/list.js +179 -0
  40. package/dist/components/list.js.map +1 -0
  41. package/dist/components/nav.d.ts +46 -0
  42. package/dist/components/nav.d.ts.map +1 -0
  43. package/dist/components/nav.js +190 -0
  44. package/dist/components/nav.js.map +1 -0
  45. package/dist/components/radio.d.ts +40 -0
  46. package/dist/components/radio.d.ts.map +1 -0
  47. package/dist/components/radio.js +113 -0
  48. package/dist/components/radio.js.map +1 -0
  49. package/dist/components/select.d.ts +41 -0
  50. package/dist/components/select.d.ts.map +1 -0
  51. package/dist/components/select.js +112 -0
  52. package/dist/components/select.js.map +1 -0
  53. package/dist/components/store.d.ts +78 -0
  54. package/dist/components/store.d.ts.map +1 -0
  55. package/dist/components/store.js +249 -0
  56. package/dist/components/store.js.map +1 -0
  57. package/dist/components/style.d.ts +27 -0
  58. package/dist/components/style.d.ts.map +1 -0
  59. package/dist/components/style.js +53 -0
  60. package/dist/components/style.js.map +1 -0
  61. package/dist/components/table.d.ts +56 -0
  62. package/dist/components/table.d.ts.map +1 -0
  63. package/dist/components/table.js +200 -0
  64. package/dist/components/table.js.map +1 -0
  65. package/dist/components/tabs.d.ts +52 -0
  66. package/dist/components/tabs.d.ts.map +1 -0
  67. package/dist/components/tabs.js +207 -0
  68. package/dist/components/tabs.js.map +1 -0
  69. package/dist/components/tag.d.ts +41 -0
  70. package/dist/components/tag.d.ts.map +1 -0
  71. package/dist/components/tag.js +104 -0
  72. package/dist/components/tag.js.map +1 -0
  73. package/dist/devtools/devtools.d.ts +3 -0
  74. package/dist/devtools/devtools.d.ts.map +1 -0
  75. package/dist/devtools/devtools.js +182 -0
  76. package/dist/devtools/devtools.js.map +1 -0
  77. package/dist/index.d.ts +71 -0
  78. package/dist/index.d.ts.map +1 -0
  79. package/dist/index.js +66 -0
  80. package/dist/index.js.map +1 -0
  81. package/dist/lib/components/blocks/menu.d.ts +40 -0
  82. package/dist/lib/components/blocks/menu.d.ts.map +1 -0
  83. package/dist/lib/components/blocks/menu.js +136 -0
  84. package/dist/lib/index.d.ts +2 -0
  85. package/dist/lib/index.d.ts.map +1 -1
  86. package/dist/lib/index.js +3 -1
  87. package/dist/state/pageState.d.ts +19 -0
  88. package/dist/state/pageState.d.ts.map +1 -0
  89. package/dist/state/pageState.js +361 -0
  90. package/dist/state/pageState.js.map +1 -0
  91. package/dist/utils/codeHighlight.d.ts +7 -0
  92. package/dist/utils/codeHighlight.d.ts.map +1 -0
  93. package/dist/utils/codeHighlight.js +106 -0
  94. package/dist/utils/codeHighlight.js.map +1 -0
  95. package/dist/utils/codeparser.d.ts +29 -0
  96. package/dist/utils/codeparser.d.ts.map +1 -0
  97. package/dist/utils/codeparser.js +385 -0
  98. package/dist/utils/codeparser.js.map +1 -0
  99. package/dist/utils/fetch.d.ts +176 -0
  100. package/dist/utils/fetch.d.ts.map +1 -0
  101. package/dist/utils/fetch.js +428 -0
  102. package/dist/utils/fetch.js.map +1 -0
  103. package/dist/utils/formatId.d.ts +16 -0
  104. package/dist/utils/formatId.d.ts.map +1 -0
  105. package/dist/utils/formatId.js +28 -0
  106. package/dist/utils/formatId.js.map +1 -0
  107. package/dist/utils/idgen.d.ts +2 -0
  108. package/dist/utils/idgen.d.ts.map +1 -0
  109. package/dist/utils/idgen.js +5 -0
  110. package/dist/utils/idgen.js.map +1 -0
  111. package/dist/utils/niceName.d.ts +14 -0
  112. package/dist/utils/niceName.d.ts.map +1 -0
  113. package/dist/utils/niceName.js +23 -0
  114. package/dist/utils/niceName.js.map +1 -0
  115. package/package.json +1 -1
@@ -0,0 +1,58 @@
1
+ interface ContainerOptions {
2
+ layout?: 'flex' | 'grid' | 'block';
3
+ direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
4
+ wrap?: boolean;
5
+ gap?: string;
6
+ padding?: string;
7
+ align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
8
+ justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
9
+ columns?: number | string;
10
+ width?: string;
11
+ height?: string;
12
+ maxWidth?: string;
13
+ minHeight?: string;
14
+ class?: string;
15
+ style?: string;
16
+ target?: string;
17
+ tag?: string;
18
+ content?: string;
19
+ [key: string]: any;
20
+ }
21
+ declare class Container {
22
+ id: string;
23
+ opts: ContainerOptions;
24
+ private _element;
25
+ constructor(id: string, options?: ContainerOptions);
26
+ private _buildStyles;
27
+ getValue(): string;
28
+ getContent(): string;
29
+ setValue(val: string): this;
30
+ setContent(val: string): this;
31
+ setClass(val: string): this;
32
+ setStyle(val: string): this;
33
+ setInnerHTML(val: string): this;
34
+ getElement(): HTMLElement;
35
+ }
36
+ /**
37
+ * Create a layout container.
38
+ *
39
+ * @example
40
+ * // Flex column (default)
41
+ * jux.container('main', { gap: '16px', padding: '24px' });
42
+ *
43
+ * // Flex row
44
+ * jux.container('toolbar', { direction: 'row', gap: '8px', align: 'center' });
45
+ *
46
+ * // Grid
47
+ * jux.container('grid', { layout: 'grid', columns: 3, gap: '16px' });
48
+ *
49
+ * // Centered page wrapper
50
+ * jux.container('page', { maxWidth: '960px', padding: '24px 16px', align: 'center' });
51
+ *
52
+ * // Nested
53
+ * jux.container('card', { gap: '8px', padding: '16px', target: 'grid' });
54
+ */
55
+ export declare function container(id: string, options?: ContainerOptions): Container;
56
+ export { Container, ContainerOptions };
57
+ export default container;
58
+ //# sourceMappingURL=container.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../lib/components/container.ts"],"names":[],"mappings":"AAGA,UAAU,gBAAgB;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAmBD,cAAM,SAAS;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,CAAC,QAAQ,CAAc;gBAElB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IA6CtD,OAAO,CAAC,YAAY;IAoCpB,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAM3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK/B,UAAU,IAAI,WAAW;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAI/E;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACvC,eAAe,SAAS,CAAC"}
@@ -0,0 +1,152 @@
1
+ import generateId from '../utils/idgen.js';
2
+ import { pageState } from '../state/pageState.js';
3
+ const JUSTIFY_MAP = {
4
+ start: 'flex-start',
5
+ center: 'center',
6
+ end: 'flex-end',
7
+ between: 'space-between',
8
+ around: 'space-around',
9
+ evenly: 'space-evenly'
10
+ };
11
+ const ALIGN_MAP = {
12
+ start: 'flex-start',
13
+ center: 'center',
14
+ end: 'flex-end',
15
+ stretch: 'stretch',
16
+ baseline: 'baseline'
17
+ };
18
+ class Container {
19
+ constructor(id, options = {}) {
20
+ this.id = id || generateId();
21
+ this.opts = {
22
+ layout: 'flex',
23
+ direction: 'column',
24
+ tag: 'div',
25
+ ...options
26
+ };
27
+ this._element = document.createElement(this.opts.tag);
28
+ this._element.id = this.id;
29
+ // Classes
30
+ if (this.opts.class)
31
+ this._element.className = this.opts.class;
32
+ // Build computed style from layout options
33
+ const styles = this._buildStyles();
34
+ if (this.opts.style)
35
+ styles.push(this.opts.style);
36
+ if (styles.length)
37
+ this._element.setAttribute('style', styles.join(';'));
38
+ // Content (rare for containers, but supported)
39
+ if (this.opts.content)
40
+ this._element.textContent = this.opts.content;
41
+ // Extra attributes
42
+ for (const [key, value] of Object.entries(this.opts)) {
43
+ if ([
44
+ 'layout', 'direction', 'wrap', 'gap', 'padding', 'align', 'justify',
45
+ 'columns', 'width', 'height', 'maxWidth', 'minHeight',
46
+ 'class', 'style', 'target', 'tag', 'content'
47
+ ].includes(key))
48
+ continue;
49
+ this._element.setAttribute(`data-${key}`, String(value));
50
+ }
51
+ // Mount
52
+ const resolvedTarget = this.opts.target;
53
+ const parent = resolvedTarget
54
+ ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
55
+ : document.getElementById('app');
56
+ parent?.appendChild(this._element);
57
+ }
58
+ // ═══════════════════════════════════════════════════════════
59
+ // LAYOUT HELPERS
60
+ // ═══════════════════════════════════════════════════════════
61
+ _buildStyles() {
62
+ const s = [];
63
+ const o = this.opts;
64
+ if (o.layout === 'grid') {
65
+ s.push('display:grid');
66
+ if (o.columns) {
67
+ const cols = typeof o.columns === 'number'
68
+ ? `repeat(${o.columns}, 1fr)`
69
+ : o.columns;
70
+ s.push(`grid-template-columns:${cols}`);
71
+ }
72
+ }
73
+ else if (o.layout === 'flex') {
74
+ s.push('display:flex');
75
+ if (o.direction)
76
+ s.push(`flex-direction:${o.direction}`);
77
+ if (o.wrap)
78
+ s.push('flex-wrap:wrap');
79
+ }
80
+ else {
81
+ s.push('display:block');
82
+ }
83
+ if (o.gap)
84
+ s.push(`gap:${o.gap}`);
85
+ if (o.padding)
86
+ s.push(`padding:${o.padding}`);
87
+ if (o.align)
88
+ s.push(`align-items:${ALIGN_MAP[o.align] || o.align}`);
89
+ if (o.justify)
90
+ s.push(`justify-content:${JUSTIFY_MAP[o.justify] || o.justify}`);
91
+ if (o.width)
92
+ s.push(`width:${o.width}`);
93
+ if (o.height)
94
+ s.push(`height:${o.height}`);
95
+ if (o.maxWidth)
96
+ s.push(`max-width:${o.maxWidth}`);
97
+ if (o.minHeight)
98
+ s.push(`min-height:${o.minHeight}`);
99
+ return s;
100
+ }
101
+ // ═══════════════════════════════════════════════════════════
102
+ // PAGESTATE INTEGRATION
103
+ // ═══════════════════════════════════════════════════════════
104
+ getValue() { return this._element.textContent ?? ''; }
105
+ getContent() { return this._element.textContent ?? this.opts.content ?? ''; }
106
+ setValue(val) {
107
+ this.opts.content = val;
108
+ this._element.textContent = val;
109
+ return this;
110
+ }
111
+ setContent(val) { return this.setValue(val); }
112
+ setClass(val) {
113
+ this._element.className = val;
114
+ return this;
115
+ }
116
+ setStyle(val) {
117
+ this._element.setAttribute('style', val);
118
+ return this;
119
+ }
120
+ setInnerHTML(val) {
121
+ this._element.innerHTML = val;
122
+ return this;
123
+ }
124
+ getElement() { return this._element; }
125
+ }
126
+ /**
127
+ * Create a layout container.
128
+ *
129
+ * @example
130
+ * // Flex column (default)
131
+ * jux.container('main', { gap: '16px', padding: '24px' });
132
+ *
133
+ * // Flex row
134
+ * jux.container('toolbar', { direction: 'row', gap: '8px', align: 'center' });
135
+ *
136
+ * // Grid
137
+ * jux.container('grid', { layout: 'grid', columns: 3, gap: '16px' });
138
+ *
139
+ * // Centered page wrapper
140
+ * jux.container('page', { maxWidth: '960px', padding: '24px 16px', align: 'center' });
141
+ *
142
+ * // Nested
143
+ * jux.container('card', { gap: '8px', padding: '16px', target: 'grid' });
144
+ */
145
+ export function container(id, options = {}) {
146
+ const c = new Container(id, options);
147
+ pageState.__register(c);
148
+ return c;
149
+ }
150
+ export { Container };
151
+ export default container;
152
+ //# sourceMappingURL=container.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"container.js","sourceRoot":"","sources":["../../lib/components/container.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,58 @@
1
+ interface DataOptions {
2
+ url?: string;
3
+ method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
4
+ headers?: Record<string, string>;
5
+ body?: any;
6
+ transform?: (raw: any) => any;
7
+ auto?: boolean;
8
+ }
9
+ declare class Data {
10
+ id: string;
11
+ options: DataOptions;
12
+ private _value;
13
+ private _loading;
14
+ private _error;
15
+ private _onChange;
16
+ constructor(id: string, options?: DataOptions);
17
+ url(value: string): this;
18
+ method(value: DataOptions['method']): this;
19
+ headers(value: Record<string, string>): this;
20
+ body(value: any): this;
21
+ transform(fn: (raw: any) => any): this;
22
+ onChange(fn: (value: any) => void): this;
23
+ getValue(): any;
24
+ getLoading(): boolean;
25
+ getError(): string | null;
26
+ setValue(val: any): this;
27
+ /**
28
+ * Re-fetch the data and notify pageState.
29
+ * Triggers all watchers that depend on this data's value.
30
+ */
31
+ refresh(): Promise<any>;
32
+ fetch(urlOverride?: string): Promise<any>;
33
+ }
34
+ /**
35
+ * Create a data source that integrates with pageState.
36
+ *
37
+ * @example
38
+ * // Auto-fetch on creation
39
+ * const api = await jux.data('api', { url: '/api/test' });
40
+ * // pageState['api'].value → { users: [...], posts: [...] }
41
+ *
42
+ * // With transform
43
+ * const users = await jux.data('users', {
44
+ * url: '/api/test',
45
+ * transform: raw => raw.users
46
+ * });
47
+ * // pageState['users'].value → [{ id: 1, name: 'Alice' }, ...]
48
+ *
49
+ * // Manual fetch
50
+ * const manual = jux.data('manual', { url: '/api/test', auto: false });
51
+ * await manual.fetch(); // fetch later
52
+ *
53
+ * // Re-fetch
54
+ * await pageState['api'].refresh();
55
+ */
56
+ export declare function data(id: string, options?: DataOptions): Promise<Data>;
57
+ export { Data, DataOptions };
58
+ //# sourceMappingURL=data.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../lib/components/data.ts"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAuC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAMjD,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACxB,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI;IAC1C,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAC5C,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IACtB,SAAS,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI;IAEtC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAAG,IAAI;IAMxC,QAAQ,IAAI,GAAG;IACf,UAAU,IAAI,OAAO;IACrB,QAAQ,IAAI,MAAM,GAAG,IAAI;IAEzB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAMxB;;;OAGG;IACG,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC;IAQvB,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;CA+DlD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAW/E;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC"}
@@ -0,0 +1,131 @@
1
+ import generateId from '../utils/idgen.js';
2
+ import { pageState } from '../state/pageState.js';
3
+ class Data {
4
+ constructor(id, options = {}) {
5
+ this._value = null;
6
+ this._loading = false;
7
+ this._error = null;
8
+ this._onChange = null;
9
+ this.id = id || generateId();
10
+ this.options = { method: 'GET', auto: true, ...options };
11
+ }
12
+ // Fluent API
13
+ url(value) { this.options.url = value; return this; }
14
+ method(value) { this.options.method = value; return this; }
15
+ headers(value) { this.options.headers = value; return this; }
16
+ body(value) { this.options.body = value; return this; }
17
+ transform(fn) { this.options.transform = fn; return this; }
18
+ onChange(fn) {
19
+ this._onChange = fn;
20
+ return this;
21
+ }
22
+ // Getters for pageState integration
23
+ getValue() { return this._value; }
24
+ getLoading() { return this._loading; }
25
+ getError() { return this._error; }
26
+ setValue(val) {
27
+ this._value = val;
28
+ if (this._onChange)
29
+ this._onChange(val);
30
+ return this;
31
+ }
32
+ /**
33
+ * Re-fetch the data and notify pageState.
34
+ * Triggers all watchers that depend on this data's value.
35
+ */
36
+ async refresh() {
37
+ const result = await this.fetch();
38
+ // Notify pageState so watchers re-run
39
+ pageState.__notify(`${this.id}.value`);
40
+ pageState.__notify(`${this.id}.loading`);
41
+ return result;
42
+ }
43
+ async fetch(urlOverride) {
44
+ const fetchUrl = urlOverride || this.options.url;
45
+ if (!fetchUrl) {
46
+ this._error = 'No URL provided';
47
+ return null;
48
+ }
49
+ this._loading = true;
50
+ this._error = null;
51
+ // Notify pageState of loading change
52
+ if (pageState.__notify) {
53
+ pageState.__notify(`${this.id}.loading`);
54
+ }
55
+ try {
56
+ const fetchOptions = {
57
+ method: this.options.method,
58
+ headers: this.options.headers,
59
+ };
60
+ if (this.options.body && this.options.method !== 'GET') {
61
+ fetchOptions.body = typeof this.options.body === 'string'
62
+ ? this.options.body
63
+ : JSON.stringify(this.options.body);
64
+ if (!this.options.headers?.['Content-Type']) {
65
+ fetchOptions.headers = {
66
+ 'Content-Type': 'application/json',
67
+ ...fetchOptions.headers
68
+ };
69
+ }
70
+ }
71
+ const res = await globalThis.fetch(fetchUrl, fetchOptions);
72
+ if (!res.ok) {
73
+ throw new Error(`HTTP ${res.status}: ${res.statusText}`);
74
+ }
75
+ const contentType = res.headers.get('content-type') || '';
76
+ let raw;
77
+ if (contentType.includes('application/json')) {
78
+ raw = await res.json();
79
+ }
80
+ else {
81
+ raw = await res.text();
82
+ }
83
+ this._value = this.options.transform ? this.options.transform(raw) : raw;
84
+ this._loading = false;
85
+ this._error = null;
86
+ if (this._onChange)
87
+ this._onChange(this._value);
88
+ return this._value;
89
+ }
90
+ catch (err) {
91
+ this._loading = false;
92
+ this._error = err.message || 'Fetch failed';
93
+ console.error(`❌ jux.data('${this.id}') fetch error:`, err.message);
94
+ return null;
95
+ }
96
+ }
97
+ }
98
+ /**
99
+ * Create a data source that integrates with pageState.
100
+ *
101
+ * @example
102
+ * // Auto-fetch on creation
103
+ * const api = await jux.data('api', { url: '/api/test' });
104
+ * // pageState['api'].value → { users: [...], posts: [...] }
105
+ *
106
+ * // With transform
107
+ * const users = await jux.data('users', {
108
+ * url: '/api/test',
109
+ * transform: raw => raw.users
110
+ * });
111
+ * // pageState['users'].value → [{ id: 1, name: 'Alice' }, ...]
112
+ *
113
+ * // Manual fetch
114
+ * const manual = jux.data('manual', { url: '/api/test', auto: false });
115
+ * await manual.fetch(); // fetch later
116
+ *
117
+ * // Re-fetch
118
+ * await pageState['api'].refresh();
119
+ */
120
+ export async function data(id, options = {}) {
121
+ const d = new Data(id, options);
122
+ pageState.__register(d);
123
+ if (options.auto !== false && options.url) {
124
+ await d.fetch();
125
+ // Re-register so pageState picks up the fetched value
126
+ pageState.__register(d);
127
+ }
128
+ return d;
129
+ }
130
+ export { Data };
131
+ //# sourceMappingURL=data.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"data.js","sourceRoot":"","sources":["../../lib/components/data.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,58 @@
1
+ type GridDensity = 'dense' | 'normal' | 'inflated';
2
+ interface GridColumn {
3
+ name: string;
4
+ width?: string;
5
+ }
6
+ interface GridOptions {
7
+ rows?: number;
8
+ cols?: number | GridColumn[];
9
+ density?: GridDensity;
10
+ class?: string;
11
+ style?: string;
12
+ target?: string;
13
+ [key: string]: any;
14
+ }
15
+ declare class Grid {
16
+ id: string;
17
+ opts: GridOptions;
18
+ private _element;
19
+ private _columns;
20
+ constructor(id: string, options?: GridOptions);
21
+ getValue(): string;
22
+ getContent(): string;
23
+ setContent(val: string): this;
24
+ setClass(val: string): this;
25
+ setStyle(val: string): this;
26
+ setInnerHTML(val: string): this;
27
+ getElement(): HTMLElement;
28
+ /** Get a named column cell element */
29
+ getColumn(name: string): HTMLElement | null;
30
+ getColumns(): GridColumn[];
31
+ }
32
+ /**
33
+ * Create a CSS grid layout container.
34
+ *
35
+ * @example
36
+ * // Simple: 3 equal columns
37
+ * jux.grid('cards', { cols: 3 });
38
+ *
39
+ * // Named columns with custom widths
40
+ * jux.grid('layout', {
41
+ * cols: [
42
+ * { name: 'sidebar', width: '260px' },
43
+ * { name: 'content', width: '3fr' },
44
+ * { name: 'aside', width: '1fr' },
45
+ * ]
46
+ * });
47
+ * // Then target into them:
48
+ * jux.nav('main-nav', { target: 'sidebar' });
49
+ * jux.h1('title', { content: 'Hello', target: 'content' });
50
+ *
51
+ * // Density options
52
+ * jux.grid('tight', { cols: 4, density: 'dense' });
53
+ * jux.grid('spacious', { cols: 2, density: 'inflated' });
54
+ */
55
+ export declare function grid(id: string, options?: GridOptions): Grid;
56
+ export { Grid, GridOptions, GridColumn, GridDensity };
57
+ export default grid;
58
+ //# sourceMappingURL=grid.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../lib/components/grid.ts"],"names":[],"mappings":"AAGA,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnD,UAAU,UAAU;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,WAAW;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAQD,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,QAAQ,CAAoB;gBAExB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoEjD,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK/B,UAAU,IAAI,WAAW;IAEzB,sCAAsC;IACtC,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI3C,UAAU,IAAI,UAAU,EAAE;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AACtD,eAAe,IAAI,CAAC"}
@@ -0,0 +1,128 @@
1
+ import generateId from '../utils/idgen.js';
2
+ import { pageState } from '../state/pageState.js';
3
+ const DENSITY_MAP = {
4
+ dense: { gap: '4px', padding: '4px' },
5
+ normal: { gap: '12px', padding: '12px' },
6
+ inflated: { gap: '24px', padding: '24px' },
7
+ };
8
+ class Grid {
9
+ constructor(id, options = {}) {
10
+ this._columns = [];
11
+ this.id = id || generateId();
12
+ this.opts = {
13
+ cols: 2,
14
+ density: 'normal',
15
+ ...options
16
+ };
17
+ this._element = document.createElement('div');
18
+ this._element.id = this.id;
19
+ if (this.opts.class)
20
+ this._element.className = this.opts.class;
21
+ // Resolve columns
22
+ const cols = this.opts.cols;
23
+ let templateCols;
24
+ if (cols && typeof cols === 'object' && Array.isArray(cols)) {
25
+ this._columns = cols.map(c => ({
26
+ name: c.name,
27
+ width: c.width || '1fr'
28
+ }));
29
+ templateCols = this._columns.map(c => c.width).join(' ');
30
+ }
31
+ else {
32
+ const count = typeof cols === 'number' ? cols : 2;
33
+ templateCols = `repeat(${count}, 1fr)`;
34
+ }
35
+ const d = DENSITY_MAP[this.opts.density] || DENSITY_MAP.normal;
36
+ const parts = [
37
+ 'display:grid',
38
+ `grid-template-columns:${templateCols}`,
39
+ `gap:${d.gap}`,
40
+ `padding:${d.padding}`,
41
+ ];
42
+ if (this.opts.rows) {
43
+ parts.push(`grid-template-rows:repeat(${this.opts.rows}, auto)`);
44
+ }
45
+ if (this.opts.style)
46
+ parts.push(this.opts.style);
47
+ this._element.setAttribute('style', parts.join(';'));
48
+ // Extra attributes
49
+ for (const [key, value] of Object.entries(this.opts)) {
50
+ if (['rows', 'cols', 'density', 'class', 'style', 'target'].includes(key))
51
+ continue;
52
+ this._element.setAttribute(`data-${key}`, String(value));
53
+ }
54
+ // Mount
55
+ const resolvedTarget = this.opts.target;
56
+ const parent = resolvedTarget
57
+ ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
58
+ : document.getElementById('app');
59
+ parent?.appendChild(this._element);
60
+ // Create named column cells if using array cols
61
+ if (this._columns.length > 0) {
62
+ for (const col of this._columns) {
63
+ const cell = document.createElement('div');
64
+ cell.id = col.name;
65
+ cell.setAttribute('data-grid-col', col.name);
66
+ this._element.appendChild(cell);
67
+ }
68
+ }
69
+ }
70
+ // ═══════════════════════════════════════════════════════════
71
+ // PAGESTATE INTEGRATION
72
+ // ═══════════════════════════════════════════════════════════
73
+ getValue() { return ''; }
74
+ getContent() { return this._element.textContent ?? ''; }
75
+ setContent(val) {
76
+ this._element.textContent = val;
77
+ return this;
78
+ }
79
+ setClass(val) {
80
+ this._element.className = val;
81
+ return this;
82
+ }
83
+ setStyle(val) {
84
+ this._element.setAttribute('style', val);
85
+ return this;
86
+ }
87
+ setInnerHTML(val) {
88
+ this._element.innerHTML = val;
89
+ return this;
90
+ }
91
+ getElement() { return this._element; }
92
+ /** Get a named column cell element */
93
+ getColumn(name) {
94
+ return this._element.querySelector(`[data-grid-col="${name}"]`);
95
+ }
96
+ getColumns() { return [...this._columns]; }
97
+ }
98
+ /**
99
+ * Create a CSS grid layout container.
100
+ *
101
+ * @example
102
+ * // Simple: 3 equal columns
103
+ * jux.grid('cards', { cols: 3 });
104
+ *
105
+ * // Named columns with custom widths
106
+ * jux.grid('layout', {
107
+ * cols: [
108
+ * { name: 'sidebar', width: '260px' },
109
+ * { name: 'content', width: '3fr' },
110
+ * { name: 'aside', width: '1fr' },
111
+ * ]
112
+ * });
113
+ * // Then target into them:
114
+ * jux.nav('main-nav', { target: 'sidebar' });
115
+ * jux.h1('title', { content: 'Hello', target: 'content' });
116
+ *
117
+ * // Density options
118
+ * jux.grid('tight', { cols: 4, density: 'dense' });
119
+ * jux.grid('spacious', { cols: 2, density: 'inflated' });
120
+ */
121
+ export function grid(id, options = {}) {
122
+ const g = new Grid(id, options);
123
+ pageState.__register(g);
124
+ return g;
125
+ }
126
+ export { Grid };
127
+ export default grid;
128
+ //# sourceMappingURL=grid.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../lib/components/grid.ts"],"names":[],"mappings":"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"}