juxscript 1.1.341 → 1.1.343

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 (96) hide show
  1. package/dist/components/sidebar.d.ts.map +1 -0
  2. package/dist/components/{blocks/sidebar.js → sidebar.js} +4 -4
  3. package/dist/components/sidebar.js.map +1 -0
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
  9. package/dist/components/blocks/menu.d.ts +0 -62
  10. package/dist/components/blocks/menu.d.ts.map +0 -1
  11. package/dist/components/blocks/menu.js +0 -149
  12. package/dist/components/blocks/menu.js.map +0 -1
  13. package/dist/components/blocks/sidebar.d.ts.map +0 -1
  14. package/dist/components/blocks/sidebar.js.map +0 -1
  15. package/dist/lib/components/blocks/menu.d.ts +0 -40
  16. package/dist/lib/components/blocks/menu.d.ts.map +0 -1
  17. package/dist/lib/components/blocks/menu.js +0 -136
  18. package/dist/lib/components/button.d.ts +0 -33
  19. package/dist/lib/components/button.d.ts.map +0 -1
  20. package/dist/lib/components/button.js +0 -107
  21. package/dist/lib/components/checkbox.d.ts +0 -62
  22. package/dist/lib/components/checkbox.d.ts.map +0 -1
  23. package/dist/lib/components/checkbox.js +0 -178
  24. package/dist/lib/components/container.d.ts +0 -58
  25. package/dist/lib/components/container.d.ts.map +0 -1
  26. package/dist/lib/components/container.js +0 -151
  27. package/dist/lib/components/data.d.ts +0 -58
  28. package/dist/lib/components/data.d.ts.map +0 -1
  29. package/dist/lib/components/data.js +0 -130
  30. package/dist/lib/components/grid.d.ts +0 -58
  31. package/dist/lib/components/grid.d.ts.map +0 -1
  32. package/dist/lib/components/grid.js +0 -127
  33. package/dist/lib/components/include.d.ts +0 -86
  34. package/dist/lib/components/include.d.ts.map +0 -1
  35. package/dist/lib/components/include.js +0 -238
  36. package/dist/lib/components/input.d.ts +0 -58
  37. package/dist/lib/components/input.d.ts.map +0 -1
  38. package/dist/lib/components/input.js +0 -161
  39. package/dist/lib/components/link.d.ts +0 -35
  40. package/dist/lib/components/link.d.ts.map +0 -1
  41. package/dist/lib/components/link.js +0 -135
  42. package/dist/lib/components/list.d.ts +0 -48
  43. package/dist/lib/components/list.d.ts.map +0 -1
  44. package/dist/lib/components/list.js +0 -178
  45. package/dist/lib/components/nav.d.ts +0 -46
  46. package/dist/lib/components/nav.d.ts.map +0 -1
  47. package/dist/lib/components/nav.js +0 -189
  48. package/dist/lib/components/radio.d.ts +0 -40
  49. package/dist/lib/components/radio.d.ts.map +0 -1
  50. package/dist/lib/components/radio.js +0 -112
  51. package/dist/lib/components/select.d.ts +0 -41
  52. package/dist/lib/components/select.d.ts.map +0 -1
  53. package/dist/lib/components/select.js +0 -111
  54. package/dist/lib/components/store.d.ts +0 -78
  55. package/dist/lib/components/store.d.ts.map +0 -1
  56. package/dist/lib/components/store.js +0 -248
  57. package/dist/lib/components/style.d.ts +0 -27
  58. package/dist/lib/components/style.d.ts.map +0 -1
  59. package/dist/lib/components/style.js +0 -52
  60. package/dist/lib/components/table.d.ts +0 -56
  61. package/dist/lib/components/table.d.ts.map +0 -1
  62. package/dist/lib/components/table.js +0 -199
  63. package/dist/lib/components/tabs.d.ts +0 -52
  64. package/dist/lib/components/tabs.d.ts.map +0 -1
  65. package/dist/lib/components/tabs.js +0 -206
  66. package/dist/lib/components/tag.d.ts +0 -41
  67. package/dist/lib/components/tag.d.ts.map +0 -1
  68. package/dist/lib/components/tag.js +0 -103
  69. package/dist/lib/devtools/devtools.d.ts +0 -3
  70. package/dist/lib/devtools/devtools.d.ts.map +0 -1
  71. package/dist/lib/devtools/devtools.js +0 -181
  72. package/dist/lib/index.d.ts +0 -70
  73. package/dist/lib/index.d.ts.map +0 -1
  74. package/dist/lib/index.js +0 -65
  75. package/dist/lib/state/pageState.d.ts +0 -19
  76. package/dist/lib/state/pageState.d.ts.map +0 -1
  77. package/dist/lib/state/pageState.js +0 -360
  78. package/dist/lib/utils/codeHighlight.d.ts +0 -7
  79. package/dist/lib/utils/codeHighlight.d.ts.map +0 -1
  80. package/dist/lib/utils/codeHighlight.js +0 -105
  81. package/dist/lib/utils/codeparser.d.ts +0 -29
  82. package/dist/lib/utils/codeparser.d.ts.map +0 -1
  83. package/dist/lib/utils/codeparser.js +0 -384
  84. package/dist/lib/utils/fetch.d.ts +0 -176
  85. package/dist/lib/utils/fetch.d.ts.map +0 -1
  86. package/dist/lib/utils/fetch.js +0 -427
  87. package/dist/lib/utils/formatId.d.ts +0 -16
  88. package/dist/lib/utils/formatId.d.ts.map +0 -1
  89. package/dist/lib/utils/formatId.js +0 -27
  90. package/dist/lib/utils/idgen.d.ts +0 -2
  91. package/dist/lib/utils/idgen.d.ts.map +0 -1
  92. package/dist/lib/utils/idgen.js +0 -4
  93. package/dist/lib/utils/niceName.d.ts +0 -14
  94. package/dist/lib/utils/niceName.d.ts.map +0 -1
  95. package/dist/lib/utils/niceName.js +0 -22
  96. /package/dist/components/{blocks/sidebar.d.ts → sidebar.d.ts} +0 -0
@@ -1,206 +0,0 @@
1
- import generateId from '../utils/idgen.js';
2
- import { pageState } from '../state/pageState.js';
3
- class Tabs {
4
- constructor(id, options = {}) {
5
- this._items = [];
6
- this._value = null;
7
- this._onChange = null;
8
- this.id = id || generateId();
9
- this.opts = {
10
- tabListClass: 'jux-tabs-list',
11
- tabClass: 'jux-tab',
12
- tabActiveClass: 'jux-tab--active',
13
- panelClass: 'jux-tab-panel',
14
- ...options
15
- };
16
- this._element = document.createElement('div');
17
- this._element.id = this.id;
18
- this._element.setAttribute('data-jux-tabs', '');
19
- if (this.opts.class)
20
- this._element.className = this.opts.class;
21
- if (this.opts.style)
22
- this._element.setAttribute('style', this.opts.style);
23
- // Tab list (the clickable triggers)
24
- this._tabList = document.createElement('div');
25
- this._tabList.className = this.opts.tabListClass;
26
- this._tabList.setAttribute('role', 'tablist');
27
- this._element.appendChild(this._tabList);
28
- // Panel container (the content areas)
29
- this._panelContainer = document.createElement('div');
30
- this._panelContainer.className = 'jux-tabs-panels';
31
- this._element.appendChild(this._panelContainer);
32
- const resolvedTarget = this.opts.target;
33
- const container = resolvedTarget
34
- ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
35
- : document.getElementById('app');
36
- container?.appendChild(this._element);
37
- if (this.opts.items) {
38
- this.addItems(this.opts.items);
39
- }
40
- if (this.opts.defaultTab) {
41
- this.setValue(this.opts.defaultTab);
42
- }
43
- else if (this._items.length > 0) {
44
- this.setValue(this._items[0].id);
45
- }
46
- }
47
- // ═══════════════════════════════════════════════════════════
48
- // STANDARD COLLECTION API
49
- // ═══════════════════════════════════════════════════════════
50
- addItem(item) {
51
- const tabItem = { ...item, id: item.id || `${this.id}-tab-${this._items.length}` };
52
- this._items.push(tabItem);
53
- this._renderTab(tabItem);
54
- this._renderPanel(tabItem);
55
- if (this._items.length === 1)
56
- this.setValue(tabItem.id);
57
- this._dispatchChange();
58
- return this;
59
- }
60
- addItems(items) {
61
- for (const item of items) {
62
- const tabItem = { ...item, id: item.id || `${this.id}-tab-${this._items.length}` };
63
- this._items.push(tabItem);
64
- this._renderTab(tabItem);
65
- this._renderPanel(tabItem);
66
- }
67
- if (this._items.length > 0 && !this._value) {
68
- this.setValue(this._items[0].id);
69
- }
70
- this._dispatchChange();
71
- return this;
72
- }
73
- removeItem(key) {
74
- const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
75
- if (idx > -1) {
76
- const removed = this._items.splice(idx, 1)[0];
77
- this._renderAll();
78
- if (this._value === removed.id && this._items.length > 0) {
79
- this.setValue(this._items[0].id);
80
- }
81
- else if (this._items.length === 0) {
82
- this._value = null;
83
- }
84
- this._dispatchChange();
85
- }
86
- return this;
87
- }
88
- updateItem(key, updates) {
89
- const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
90
- if (idx > -1) {
91
- this._items[idx] = { ...this._items[idx], ...updates };
92
- this._renderAll();
93
- this._updateActiveState();
94
- this._dispatchChange();
95
- }
96
- return this;
97
- }
98
- clearItems() {
99
- this._items = [];
100
- this._value = null;
101
- this._tabList.innerHTML = '';
102
- this._panelContainer.innerHTML = '';
103
- this._dispatchChange();
104
- return this;
105
- }
106
- getItems() { return [...this._items]; }
107
- getCount() { return this._items.length; }
108
- // ═══════════════════════════════════════════════════════════
109
- // PANEL ACCESS (for rendering content into tab panels)
110
- // ═══════════════════════════════════════════════════════════
111
- /** Get the panel element for a tab so you can render jux components into it */
112
- getPanel(tabId) {
113
- return this._panelContainer.querySelector(`[data-tab-panel="${tabId}"]`);
114
- }
115
- // ═══════════════════════════════════════════════════════════
116
- // PAGESTATE INTEGRATION
117
- // ═══════════════════════════════════════════════════════════
118
- getValue() { return this._value; }
119
- setValue(val) {
120
- this._value = val;
121
- this._updateActiveState();
122
- return this;
123
- }
124
- getElement() { return this._element; }
125
- onChange(fn) {
126
- this._onChange = fn;
127
- return this;
128
- }
129
- // ═══════════════════════════════════════════════════════════
130
- // INTERNAL
131
- // ═══════════════════════════════════════════════════════════
132
- _renderTab(item) {
133
- const btn = document.createElement('button');
134
- btn.id = `${item.id}-trigger`;
135
- btn.className = this.opts.tabClass;
136
- btn.setAttribute('role', 'tab');
137
- btn.setAttribute('data-tab-id', item.id);
138
- btn.textContent = item.label;
139
- if (item.disabled) {
140
- btn.disabled = true;
141
- btn.setAttribute('data-disabled', 'true');
142
- }
143
- btn.addEventListener('click', () => {
144
- if (item.disabled)
145
- return;
146
- this._value = item.id;
147
- this._updateActiveState();
148
- if (this._onChange)
149
- this._onChange(this._value);
150
- this._element.dispatchEvent(new Event('change', { bubbles: false }));
151
- });
152
- this._tabList.appendChild(btn);
153
- }
154
- _renderPanel(item) {
155
- const panel = document.createElement('div');
156
- panel.id = `${item.id}-panel`;
157
- panel.className = this.opts.panelClass;
158
- panel.setAttribute('role', 'tabpanel');
159
- panel.setAttribute('data-tab-panel', item.id);
160
- if (item.content)
161
- panel.innerHTML = item.content;
162
- panel.style.display = 'none';
163
- this._panelContainer.appendChild(panel);
164
- }
165
- _renderAll() {
166
- this._tabList.innerHTML = '';
167
- this._panelContainer.innerHTML = '';
168
- for (const item of this._items) {
169
- this._renderTab(item);
170
- this._renderPanel(item);
171
- }
172
- this._updateActiveState();
173
- }
174
- _updateActiveState() {
175
- // Tabs
176
- const tabs = this._tabList.querySelectorAll('[role="tab"]');
177
- tabs.forEach(tab => {
178
- const tabId = tab.getAttribute('data-tab-id');
179
- if (tabId === this._value) {
180
- tab.classList.add(this.opts.tabActiveClass);
181
- tab.setAttribute('aria-selected', 'true');
182
- }
183
- else {
184
- tab.classList.remove(this.opts.tabActiveClass);
185
- tab.setAttribute('aria-selected', 'false');
186
- }
187
- });
188
- // Panels
189
- const panels = this._panelContainer.querySelectorAll('[role="tabpanel"]');
190
- panels.forEach(panel => {
191
- const panelId = panel.getAttribute('data-tab-panel');
192
- panel.style.display = panelId === this._value ? '' : 'none';
193
- });
194
- }
195
- _dispatchChange() {
196
- this._element.setAttribute('data-count', String(this._items.length));
197
- this._element.dispatchEvent(new Event('change', { bubbles: false }));
198
- }
199
- }
200
- export function tabs(id, options = {}) {
201
- const t = new Tabs(id, options);
202
- pageState.__register(t);
203
- return t;
204
- }
205
- export { Tabs };
206
- export default tabs;
@@ -1,41 +0,0 @@
1
- interface TagOptions {
2
- content?: string;
3
- class?: string;
4
- style?: string;
5
- target?: string;
6
- [key: string]: any;
7
- }
8
- declare class Tag {
9
- id: string;
10
- tagName: string;
11
- opts: TagOptions;
12
- private _element;
13
- constructor(id: string, tagName: string, options?: TagOptions);
14
- content(value: string): this;
15
- class(value: string): this;
16
- style(value: string): this;
17
- getValue(): string;
18
- getContent(): string;
19
- setValue(val: string): this;
20
- setContent(val: string): this;
21
- setClass(val: string): this;
22
- setStyle(val: string): this;
23
- setInnerHTML(val: string): this;
24
- getElement(): HTMLElement | null;
25
- render(target?: string | HTMLElement): this;
26
- }
27
- export declare function tag(id: string, tagName: string, options?: TagOptions): Tag;
28
- export declare function div(id: string, options?: TagOptions): Tag;
29
- export declare function span(id: string, options?: TagOptions): Tag;
30
- export declare function p(id: string, options?: TagOptions): Tag;
31
- export declare function code(id: string, options?: TagOptions): Tag;
32
- export declare function pre(id: string, options?: TagOptions): Tag;
33
- export declare function h1(id: string, options?: TagOptions): Tag;
34
- export declare function h2(id: string, options?: TagOptions): Tag;
35
- export declare function h3(id: string, options?: TagOptions): Tag;
36
- export declare function h4(id: string, options?: TagOptions): Tag;
37
- export declare function h5(id: string, options?: TagOptions): Tag;
38
- export declare function h6(id: string, options?: TagOptions): Tag;
39
- export { Tag, TagOptions };
40
- export default tag;
41
- //# sourceMappingURL=tag.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAIA,UAAU,UAAU;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,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;AAED,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe;IAOjE,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAG1B,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IACpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE/B,UAAU,IAAI,WAAW,GAAG,IAAI;IAEhC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW;CAuBvC;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAKxE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAmC;AAEzF,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAqCxD;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAE3F,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC;AAC3B,eAAe,GAAG,CAAC"}
@@ -1,103 +0,0 @@
1
- import generateId from '../utils/idgen.js';
2
- import { pageState } from '../state/pageState.js';
3
- import codeparser from '../utils/codeparser.js';
4
- class Tag {
5
- constructor(id, tagName, options = {}) {
6
- this._element = null;
7
- this.id = id || generateId();
8
- this.tagName = tagName;
9
- this.opts = options;
10
- }
11
- // Fluent API
12
- content(value) { this.opts.content = value; if (this._element)
13
- this._element.textContent = value; return this; }
14
- class(value) { this.opts.class = value; if (this._element)
15
- this._element.className = value; return this; }
16
- style(value) { this.opts.style = value; if (this._element)
17
- this._element.setAttribute('style', value); return this; }
18
- // Getters/Setters for pageState integration
19
- getValue() { return this._element?.textContent ?? this.opts.content ?? ''; }
20
- getContent() { return this._element?.textContent ?? this.opts.content ?? ''; }
21
- setValue(val) { this.opts.content = val; if (this._element)
22
- this._element.textContent = val; return this; }
23
- setContent(val) { return this.setValue(val); }
24
- setClass(val) { this.opts.class = val; if (this._element)
25
- this._element.className = val; return this; }
26
- setStyle(val) { this.opts.style = val; if (this._element)
27
- this._element.setAttribute('style', val); return this; }
28
- setInnerHTML(val) { if (this._element)
29
- this._element.innerHTML = val; return this; }
30
- getElement() { return this._element; }
31
- render(target) {
32
- const el = document.createElement(this.tagName);
33
- el.id = this.id;
34
- if (this.opts.content)
35
- el.textContent = this.opts.content;
36
- if (this.opts.class)
37
- el.className = this.opts.class;
38
- if (this.opts.style)
39
- el.setAttribute('style', this.opts.style);
40
- for (const [key, value] of Object.entries(this.opts)) {
41
- if (['content', 'class', 'style', 'target'].includes(key))
42
- continue;
43
- el.setAttribute(key, String(value));
44
- }
45
- this._element = el;
46
- // Resolve target: param > opts.target > #app
47
- const resolvedTarget = target || this.opts.target;
48
- const container = resolvedTarget
49
- ? (typeof resolvedTarget === 'string' ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget) : resolvedTarget)
50
- : document.getElementById('app');
51
- container?.appendChild(el);
52
- return this;
53
- }
54
- }
55
- export function tag(id, tagName, options = {}) {
56
- const t = new Tag(id, tagName, options);
57
- t.render();
58
- pageState.__register(t);
59
- return t;
60
- }
61
- export function div(id, options = {}) { return tag(id, 'div', options); }
62
- export function span(id, options = {}) { return tag(id, 'span', options); }
63
- export function p(id, options = {}) { return tag(id, 'p', options); }
64
- export function code(id, options = {}) {
65
- // Inject highlight styles once
66
- if (!document.getElementById('__jux-hl-styles')) {
67
- const style = document.createElement('style');
68
- style.id = '__jux-hl-styles';
69
- style.textContent = codeparser.getCSS();
70
- document.head.appendChild(style);
71
- }
72
- // Parse and highlight content
73
- const raw = options.content || '';
74
- const trimmed = raw.replace(/^\n+/, '').replace(/\n+$/, '');
75
- const parsed = codeparser.parse(trimmed);
76
- // Build line-by-line HTML
77
- const linesHtml = parsed.map(line => `<div class="jux-code-line"><span class="jux-code-line-number">${line.lineNumber}</span><span class="jux-code-line-content">${line.html}</span></div>`).join('');
78
- // Create as <pre> with inner code structure
79
- const t = new Tag(id, 'pre', {
80
- ...options,
81
- content: undefined,
82
- class: `jux-code${options.class ? ' ' + options.class : ''}`
83
- });
84
- t.render();
85
- const el = t.getElement();
86
- if (el) {
87
- const codeEl = document.createElement('code');
88
- codeEl.className = 'jux-code-lines';
89
- codeEl.innerHTML = linesHtml;
90
- el.appendChild(codeEl);
91
- }
92
- pageState.__register(t);
93
- return t;
94
- }
95
- export function pre(id, options = {}) { return tag(id, 'pre', options); }
96
- export function h1(id, options = {}) { return tag(id, 'h1', options); }
97
- export function h2(id, options = {}) { return tag(id, 'h2', options); }
98
- export function h3(id, options = {}) { return tag(id, 'h3', options); }
99
- export function h4(id, options = {}) { return tag(id, 'h4', options); }
100
- export function h5(id, options = {}) { return tag(id, 'h5', options); }
101
- export function h6(id, options = {}) { return tag(id, 'h6', options); }
102
- export { Tag };
103
- export default tag;
@@ -1,3 +0,0 @@
1
- export declare function devtools(show?: boolean): void;
2
- export default devtools;
3
- //# sourceMappingURL=devtools.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../../lib/devtools/devtools.ts"],"names":[],"mappings":"AAoJA,wBAAgB,QAAQ,CAAC,IAAI,GAAE,OAAc,GAAG,IAAI,CA0CnD;AAED,eAAe,QAAQ,CAAC"}
@@ -1,181 +0,0 @@
1
- import { pageState } from '../state/pageState.js';
2
- let panel = null;
3
- let interval = null;
4
- const STYLES = `
5
- position: fixed;
6
- bottom: 0;
7
- right: 0;
8
- width: 420px;
9
- max-height: 60vh;
10
- overflow-y: auto;
11
- background: #1e1e2e;
12
- color: #cdd6f4;
13
- font-family: 'SF Mono', 'Fira Code', monospace;
14
- font-size: 11px;
15
- line-height: 1.4;
16
- padding: 0;
17
- border-top-left-radius: 8px;
18
- box-shadow: -2px -2px 12px rgba(0,0,0,0.4);
19
- z-index: 99999;
20
- border: 1px solid #45475a;
21
- `;
22
- const HEADER_STYLES = `
23
- position: sticky;
24
- top: 0;
25
- background: #313244;
26
- padding: 6px 10px;
27
- display: flex;
28
- justify-content: space-between;
29
- align-items: center;
30
- border-bottom: 1px solid #45475a;
31
- cursor: move;
32
- `;
33
- function escapeHtml(str) {
34
- return String(str)
35
- .replace(/&/g, '&amp;')
36
- .replace(/</g, '&lt;')
37
- .replace(/>/g, '&gt;')
38
- .replace(/"/g, '&quot;');
39
- }
40
- function formatValue(val) {
41
- if (val === undefined)
42
- return '<span style="color:#6c7086">undefined</span>';
43
- if (val === null)
44
- return '<span style="color:#6c7086">null</span>';
45
- if (typeof val === 'boolean')
46
- return `<span style="color:#fab387">${val}</span>`;
47
- if (typeof val === 'number')
48
- return `<span style="color:#fab387">${val}</span>`;
49
- if (typeof val === 'string') {
50
- const truncated = val.length > 40 ? escapeHtml(val.slice(0, 40)) + '…' : escapeHtml(val);
51
- return `<span style="color:#a6e3a1">"${truncated}"</span>`;
52
- }
53
- if (Array.isArray(val))
54
- return `<span style="color:#89b4fa">Array[${val.length}]</span>`;
55
- if (typeof val === 'object') {
56
- try {
57
- const keys = Object.keys(val);
58
- return `<span style="color:#89b4fa">{${keys.slice(0, 3).join(', ')}${keys.length > 3 ? '…' : ''}}</span>`;
59
- }
60
- catch {
61
- return '<span style="color:#89b4fa">{…}</span>';
62
- }
63
- }
64
- if (typeof val === 'function')
65
- return '<span style="color:#cba6f7">ƒ()</span>';
66
- return escapeHtml(String(val));
67
- }
68
- function buildContent() {
69
- const keys = pageState.__keys?.() ?? [];
70
- if (keys.length === 0) {
71
- return '<div style="padding:10px;color:#6c7086">No components registered</div>';
72
- }
73
- let html = '';
74
- for (const key of keys) {
75
- const proxy = pageState[key];
76
- if (!proxy)
77
- continue;
78
- // Read known props
79
- const value = proxy.value;
80
- const content = proxy.content;
81
- const checked = proxy.checked;
82
- // Read event flags
83
- const events = [];
84
- for (const evt of ['blur', 'focus', 'click', 'change', 'input', 'hover', 'active', 'focused']) {
85
- try {
86
- if (proxy[evt] === true)
87
- events.push(evt);
88
- }
89
- catch { /* skip */ }
90
- }
91
- // Component type detection
92
- const el = proxy.getElement?.();
93
- let typeLabel = 'unknown';
94
- let typeColor = '#6c7086';
95
- if (el instanceof HTMLElement) {
96
- const tag = el.tagName.toLowerCase();
97
- const isStore = el.getAttribute('data-jux-store');
98
- if (isStore) {
99
- typeLabel = `store:${isStore}`;
100
- typeColor = '#f38ba8';
101
- }
102
- else if (el instanceof HTMLInputElement) {
103
- typeLabel = `input[${el.type}]`;
104
- typeColor = '#89dceb';
105
- }
106
- else if (el instanceof HTMLSelectElement) {
107
- typeLabel = 'select';
108
- typeColor = '#89dceb';
109
- }
110
- else {
111
- typeLabel = tag;
112
- typeColor = '#94e2d5';
113
- }
114
- }
115
- html += `
116
- <div style="border-bottom:1px solid #313244;padding:6px 10px;">
117
- <div style="display:flex;justify-content:space-between;margin-bottom:2px;">
118
- <span style="color:#cba6f7;font-weight:bold;">${escapeHtml(key)}</span>
119
- <span style="color:${typeColor};font-size:10px;">${escapeHtml(typeLabel)}</span>
120
- </div>
121
- <div style="padding-left:8px;">`;
122
- if (value !== undefined) {
123
- html += `<div><span style="color:#74c7ec">value:</span> ${formatValue(value)}</div>`;
124
- }
125
- if (content !== undefined && content !== value) {
126
- html += `<div><span style="color:#74c7ec">content:</span> ${formatValue(content)}</div>`;
127
- }
128
- if (checked !== undefined) {
129
- html += `<div><span style="color:#74c7ec">checked:</span> ${formatValue(checked)}</div>`;
130
- }
131
- if (events.length > 0) {
132
- html += `<div><span style="color:#f9e2af">events:</span> <span style="color:#fab387">${events.join(', ')}</span></div>`;
133
- }
134
- html += `</div></div>`;
135
- }
136
- return html;
137
- }
138
- function refresh() {
139
- if (!panel)
140
- return;
141
- const body = panel.querySelector('[data-devtools-body]');
142
- if (body)
143
- body.innerHTML = buildContent();
144
- }
145
- export function devtools(show = true) {
146
- if (!show) {
147
- if (panel) {
148
- panel.remove();
149
- panel = null;
150
- }
151
- if (interval) {
152
- clearInterval(interval);
153
- interval = null;
154
- }
155
- return;
156
- }
157
- if (panel) {
158
- refresh();
159
- return;
160
- }
161
- panel = document.createElement('div');
162
- panel.id = '__jux-devtools';
163
- panel.setAttribute('style', STYLES);
164
- panel.innerHTML = `
165
- <div style="${HEADER_STYLES}">
166
- <span style="color:#f9e2af;font-weight:bold;">🔧 JUX DevTools</span>
167
- <div>
168
- <button data-devtools-refresh style="background:none;border:1px solid #45475a;color:#cdd6f4;cursor:pointer;padding:2px 6px;border-radius:3px;margin-right:4px;font-size:10px;">↻</button>
169
- <button data-devtools-close style="background:none;border:1px solid #45475a;color:#cdd6f4;cursor:pointer;padding:2px 6px;border-radius:3px;font-size:10px;">✕</button>
170
- </div>
171
- </div>
172
- <div data-devtools-body></div>
173
- `;
174
- document.body.appendChild(panel);
175
- panel.querySelector('[data-devtools-close]')?.addEventListener('click', () => devtools(false));
176
- panel.querySelector('[data-devtools-refresh]')?.addEventListener('click', () => refresh());
177
- refresh();
178
- // Auto-refresh every 500ms to catch async changes
179
- interval = setInterval(refresh, 500);
180
- }
181
- export default devtools;
@@ -1,70 +0,0 @@
1
- import { tag, div, h1, h2, h3, h4, h5, h6, p, span, pre, code } from "./components/tag.js";
2
- import { include } from "./components/include.js";
3
- import { input, email, password, number, tel, url, search, date, time, datetime, color, range, file, hidden } from "./components/input.js";
4
- import { select } from "./components/select.js";
5
- import { radio } from "./components/radio.js";
6
- import { checkbox, checkboxGroup } from "./components/checkbox.js";
7
- import { pageState } from "./state/pageState.js";
8
- import { data } from "./components/data.js";
9
- import { store } from "./components/store.js";
10
- import { devtools } from "./devtools/devtools.js";
11
- import { style } from "./components/style.js";
12
- import { nav } from "./components/nav.js";
13
- import { table } from "./components/table.js";
14
- import { list } from "./components/list.js";
15
- import { tabs } from "./components/tabs.js";
16
- import { button, btn } from "./components/button.js";
17
- import { link, a } from "./components/link.js";
18
- import { container } from "./components/container.js";
19
- import { grid } from "./components/grid.js";
20
- import { menu } from "./components/blocks/menu.js";
21
- export declare const jux: {
22
- tag: typeof tag;
23
- div: typeof div;
24
- h1: typeof h1;
25
- h2: typeof h2;
26
- h3: typeof h3;
27
- h4: typeof h4;
28
- h5: typeof h5;
29
- h6: typeof h6;
30
- p: typeof p;
31
- span: typeof span;
32
- pre: typeof pre;
33
- code: typeof code;
34
- include: typeof include;
35
- input: typeof input;
36
- email: typeof email;
37
- password: typeof password;
38
- number: typeof number;
39
- tel: typeof tel;
40
- url: typeof url;
41
- search: typeof search;
42
- date: typeof date;
43
- time: typeof time;
44
- datetime: typeof datetime;
45
- color: typeof color;
46
- range: typeof range;
47
- file: typeof file;
48
- hidden: typeof hidden;
49
- select: typeof select;
50
- radio: typeof radio;
51
- checkbox: typeof checkbox;
52
- checkboxGroup: typeof checkboxGroup;
53
- data: typeof data;
54
- store: typeof store;
55
- devtools: typeof devtools;
56
- style: typeof style;
57
- nav: typeof nav;
58
- table: typeof table;
59
- list: typeof list;
60
- tabs: typeof tabs;
61
- button: typeof button;
62
- btn: typeof btn;
63
- link: typeof link;
64
- a: typeof a;
65
- container: typeof container;
66
- grid: typeof grid;
67
- menu: typeof menu;
68
- };
69
- export { pageState };
70
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3I,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEnD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Cf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}