juxscript 1.1.102 → 1.1.104

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 (13) hide show
  1. package/dom-structure-map.json +1 -1
  2. package/machinery/compiler3.js +0 -1
  3. package/package.json +1 -1
  4. package/lib/layouts/VStack.d.ts +0 -1
  5. package/lib/layouts/VStack.d.ts.map +0 -1
  6. package/lib/layouts/VStack.js +0 -1
  7. package/lib/layouts/VStack.ts +0 -0
  8. package/lib/layouts/ZStack.d.ts +0 -1
  9. package/lib/layouts/ZStack.d.ts.map +0 -1
  10. package/lib/layouts/ZStack.js +0 -1
  11. package/lib/layouts/ZStack.ts +0 -0
  12. package/lib/layouts/default.css +0 -260
  13. package/lib/layouts/figma.css +0 -334
package/dom-structure-map.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "totalComponents": 63,
3
- "generatedAt": "2026-02-12T21:12:55.361Z",
3
+ "generatedAt": "2026-02-12T21:26:28.939Z",
4
4
  "components": [
5
5
  {
6
6
  "file": "alert.js",
package/machinery/compiler3.js CHANGED
@@ -624,7 +624,6 @@ navigate(location.pathname);
624
624
  <meta charset="UTF-8">
625
625
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
626
626
  <title>JUX App</title>
627
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/juxscript@latest/lib/layouts/default.css">
628
627
  </head>
629
628
  <body>
630
629
  <div id="app"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.1.102",
3
+ "version": "1.1.104",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "index.js",
package/lib/layouts/VStack.d.ts DELETED
@@ -1 +0,0 @@
1
- //# sourceMappingURL=VStack.d.ts.map
package/lib/layouts/VStack.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["VStack.ts"],"names":[],"mappings":""}
package/lib/layouts/VStack.js DELETED
@@ -1 +0,0 @@
1
- "use strict";
package/lib/layouts/VStack.ts DELETED
File without changes
package/lib/layouts/ZStack.d.ts DELETED
@@ -1 +0,0 @@
1
- //# sourceMappingURL=ZStack.d.ts.map
package/lib/layouts/ZStack.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ZStack.d.ts","sourceRoot":"","sources":["ZStack.ts"],"names":[],"mappings":""}
package/lib/layouts/ZStack.js DELETED
@@ -1 +0,0 @@
1
- "use strict";
package/lib/layouts/ZStack.ts DELETED
File without changes
package/lib/layouts/default.css DELETED
@@ -1,260 +0,0 @@
1
- /* Default Layout Grid (Notion-style) */
2
-
3
- #app {
4
-
5
- display: grid;
6
- grid-template-areas:
7
- "header header"
8
- "sidebar main"
9
- "footer footer";
10
- grid-template-columns: 250px 1fr;
11
- grid-template-rows: auto 1fr auto;
12
- min-height: 100vh;
13
- }
14
-
15
- /* Header */
16
- #appheader {
17
- grid-area: header;
18
- position: sticky;
19
- top: 0;
20
- z-index: 100;
21
- background: var(--color-surface-elevated);
22
- border-bottom: var(--border-width) solid var(--color-border);
23
- display: flex;
24
- align-items: center;
25
- padding: var(--space-md) var(--space-lg);
26
- gap: var(--space-lg);
27
- }
28
-
29
- #appheader-logo {
30
- flex-shrink: 0;
31
- }
32
-
33
- #appheader-nav {
34
- flex: 1;
35
- display: flex;
36
- gap: var(--space-md);
37
- }
38
-
39
- #appheader-actions {
40
- flex-shrink: 0;
41
- display: flex;
42
- gap: var(--space-sm);
43
- }
44
-
45
- /* Subheader - Hidden in default layout */
46
- #appsubheader {
47
- display: none;
48
- }
49
-
50
- #appsubheader-breadcrumbs,
51
- #appsubheader-tabs,
52
- #appsubheader-actions {
53
- display: none;
54
- }
55
-
56
- /* Sidebar */
57
- #appsidebar {
58
- grid-area: sidebar;
59
- overflow-y: auto;
60
- background: var(--color-surface-base);
61
- border-right: var(--border-width) solid var(--color-border);
62
- transition: transform var(--transition-base);
63
- display: flex;
64
- flex-direction: column;
65
- }
66
-
67
- #appsidebar-header {
68
- padding: var(--space-md);
69
- border-bottom: var(--border-width) solid var(--color-border);
70
- flex-shrink: 0;
71
- }
72
-
73
- #appsidebar-content {
74
- flex: 1;
75
- overflow-y: auto;
76
- padding: var(--space-sm);
77
- }
78
-
79
- #appsidebar-footer {
80
- padding: var(--space-md);
81
- border-top: var(--border-width) solid var(--color-border);
82
- flex-shrink: 0;
83
- }
84
-
85
- /* Main */
86
- #appmain {
87
- grid-area: main;
88
- overflow-y: auto;
89
- padding: var(--space-xl);
90
- background: var(--color-background);
91
- }
92
-
93
- /* Aside - Hidden in default layout */
94
- #appaside {
95
- display: none;
96
- }
97
-
98
- #appaside-header,
99
- #appaside-content,
100
- #appaside-footer {
101
- display: none;
102
- }
103
-
104
- /* Footer */
105
- #appfooter {
106
- grid-area: footer;
107
- background: var(--color-surface-elevated);
108
- border-top: var(--border-width) solid var(--color-border);
109
- padding: var(--space-lg) var(--space-xl);
110
- display: flex;
111
- justify-content: space-between;
112
- align-items: center;
113
- }
114
-
115
- #appfooter-content {
116
- flex: 1;
117
- }
118
-
119
- #appfooter-legal {
120
- flex-shrink: 0;
121
- font-size: var(--font-size-sm);
122
- color: var(--color-text-secondary);
123
- }
124
-
125
- /* Modal */
126
- #appmodal {
127
- position: fixed;
128
- top: 0;
129
- left: 0;
130
- right: 0;
131
- bottom: 0;
132
- z-index: 2000;
133
- display: none;
134
- }
135
-
136
- #appmodal[aria-hidden="false"] {
137
- display: flex;
138
- align-items: center;
139
- justify-content: center;
140
- }
141
-
142
- #appmodal-backdrop {
143
- position: absolute;
144
- inset: 0;
145
- background: rgba(0, 0, 0, 0.6);
146
- backdrop-filter: blur(4px);
147
- }
148
-
149
- #appmodal-container {
150
- position: relative;
151
- background: var(--color-surface-elevated);
152
- border-radius: var(--radius-lg);
153
- box-shadow: var(--shadow-2xl);
154
- max-width: 90vw;
155
- max-height: 90vh;
156
- display: flex;
157
- flex-direction: column;
158
- overflow: hidden;
159
- }
160
-
161
- #appmodal-header {
162
- padding: var(--space-lg);
163
- border-bottom: var(--border-width) solid var(--color-border);
164
- flex-shrink: 0;
165
- }
166
-
167
- #appmodal-content {
168
- flex: 1;
169
- overflow-y: auto;
170
- padding: var(--space-lg);
171
- }
172
-
173
- #appmodal-footer {
174
- padding: var(--space-lg);
175
- border-top: var(--border-width) solid var(--color-border);
176
- flex-shrink: 0;
177
- display: flex;
178
- gap: var(--space-sm);
179
- justify-content: flex-end;
180
- }
181
-
182
- /* Tablet (portrait) */
183
- @media (max-width: 1024px) {
184
- #app {
185
- grid-template-columns: 200px 1fr;
186
- }
187
-
188
- #appmain {
189
- padding: var(--space-lg);
190
- }
191
-
192
- #appheader {
193
- padding: var(--space-sm) var(--space-md);
194
- gap: var(--space-md);
195
- }
196
- }
197
-
198
- /* Mobile */
199
- @media (max-width: 768px) {
200
- #app {
201
- grid-template-areas:
202
- "header"
203
- "main"
204
- "footer";
205
- grid-template-columns: 1fr;
206
- }
207
-
208
- #appsidebar {
209
- position: fixed;
210
- top: 60px;
211
- left: 0;
212
- bottom: 0;
213
- width: 280px;
214
- max-width: 80vw;
215
- z-index: 99;
216
- transform: translateX(-100%);
217
- box-shadow: var(--shadow-xl);
218
- }
219
-
220
- #appsidebar.visible {
221
- transform: translateX(0);
222
- }
223
-
224
- #appmain {
225
- padding: var(--space-md);
226
- }
227
-
228
- #appheader {
229
- padding: var(--space-xs) var(--space-md);
230
- }
231
-
232
- #appfooter {
233
- padding: var(--space-md) var(--space-lg);
234
- flex-direction: column;
235
- gap: var(--space-sm);
236
- text-align: center;
237
- }
238
- }
239
-
240
- /* Small mobile */
241
- @media (max-width: 480px) {
242
- #appsidebar {
243
- width: 100%;
244
- max-width: 100vw;
245
- }
246
-
247
- #appmain {
248
- padding: var(--space-sm);
249
- }
250
-
251
- #appfooter {
252
- padding: var(--space-sm) var(--space-md);
253
- font-size: var(--font-size-sm);
254
- }
255
-
256
- #appmodal-container {
257
- max-width: 95vw;
258
- max-height: 95vh;
259
- }
260
- }
package/lib/layouts/figma.css DELETED
@@ -1,334 +0,0 @@
1
- /* Figma Layout: All 7 containers */
2
- #app {
3
- display: grid;
4
- grid-template-areas:
5
- "header header header"
6
- "subheader subheader subheader"
7
- "sidebar main aside"
8
- "footer footer footer";
9
- grid-template-columns: 250px 1fr 300px;
10
- grid-template-rows: 60px auto 1fr 60px;
11
- min-height: 100vh;
12
- }
13
-
14
- /* Header */
15
- #appheader {
16
- grid-area: header;
17
- background: var(--color-surface-elevated);
18
- border-bottom: var(--border-width) solid var(--color-border);
19
- display: flex;
20
- align-items: center;
21
- padding: var(--space-sm) var(--space-lg);
22
- gap: var(--space-lg);
23
- }
24
-
25
- #appheader-logo {
26
- flex-shrink: 0;
27
- }
28
-
29
- #appheader-nav {
30
- flex: 1;
31
- display: flex;
32
- gap: var(--space-md);
33
- }
34
-
35
- #appheader-actions {
36
- flex-shrink: 0;
37
- display: flex;
38
- gap: var(--space-sm);
39
- }
40
-
41
- /* Subheader */
42
- #appsubheader {
43
- grid-area: subheader;
44
- background: var(--color-surface-base);
45
- border-bottom: var(--border-width) solid var(--color-border);
46
- padding: var(--space-sm) var(--space-md);
47
- display: flex;
48
- align-items: center;
49
- gap: var(--space-lg);
50
- }
51
-
52
- #appsubheader-breadcrumbs {
53
- flex: 0 0 auto;
54
- display: flex;
55
- align-items: center;
56
- gap: var(--space-xs);
57
- }
58
-
59
- #appsubheader-tabs {
60
- flex: 1;
61
- display: flex;
62
- gap: var(--space-sm);
63
- }
64
-
65
- #appsubheader-actions {
66
- flex-shrink: 0;
67
- display: flex;
68
- gap: var(--space-sm);
69
- }
70
-
71
- /* Sidebar */
72
- #appsidebar {
73
- grid-area: sidebar;
74
- overflow-y: auto;
75
- background: var(--color-surface-base);
76
- border-right: var(--border-width) solid var(--color-border);
77
- transition: transform var(--transition-base);
78
- display: flex;
79
- flex-direction: column;
80
- }
81
-
82
- #appsidebar-header {
83
- padding: var(--space-md);
84
- border-bottom: var(--border-width) solid var(--color-border);
85
- flex-shrink: 0;
86
- }
87
-
88
- #appsidebar-content {
89
- flex: 1;
90
- overflow-y: auto;
91
- padding: var(--space-sm);
92
- }
93
-
94
- #appsidebar-footer {
95
- padding: var(--space-md);
96
- border-top: var(--border-width) solid var(--color-border);
97
- flex-shrink: 0;
98
- }
99
-
100
- /* Main */
101
- #appmain {
102
- grid-area: main;
103
- overflow: auto;
104
- background: var(--color-background);
105
- padding: var(--space-xl);
106
- }
107
-
108
- /* Aside (Right Sidebar) */
109
- #appaside {
110
- grid-area: aside;
111
- overflow-y: auto;
112
- background: var(--color-surface-base);
113
- border-left: var(--border-width) solid var(--color-border);
114
- transition: transform var(--transition-base);
115
- display: flex;
116
- flex-direction: column;
117
- }
118
-
119
- #appaside-header {
120
- padding: var(--space-md);
121
- border-bottom: var(--border-width) solid var(--color-border);
122
- flex-shrink: 0;
123
- }
124
-
125
- #appaside-content {
126
- flex: 1;
127
- overflow-y: auto;
128
- padding: var(--space-md);
129
- }
130
-
131
- #appaside-footer {
132
- padding: var(--space-md);
133
- border-top: var(--border-width) solid var(--color-border);
134
- flex-shrink: 0;
135
- }
136
-
137
- /* Footer */
138
- #appfooter {
139
- grid-area: footer;
140
- background: var(--color-surface-elevated);
141
- border-top: var(--border-width) solid var(--color-border);
142
- padding: var(--space-sm) var(--space-md);
143
- display: flex;
144
- justify-content: space-between;
145
- align-items: center;
146
- }
147
-
148
- #appfooter-content {
149
- flex: 1;
150
- }
151
-
152
- #appfooter-legal {
153
- flex-shrink: 0;
154
- font-size: var(--font-size-sm);
155
- color: var(--color-text-secondary);
156
- }
157
-
158
- /* Modal */
159
- #appmodal {
160
- position: fixed;
161
- top: 0;
162
- left: 0;
163
- right: 0;
164
- bottom: 0;
165
- z-index: 2000;
166
- display: none;
167
- }
168
-
169
- #appmodal[aria-hidden="false"] {
170
- display: flex;
171
- align-items: center;
172
- justify-content: center;
173
- }
174
-
175
- #appmodal-backdrop {
176
- position: absolute;
177
- inset: 0;
178
- background: rgba(0, 0, 0, 0.6);
179
- backdrop-filter: blur(4px);
180
- }
181
-
182
- #appmodal-container {
183
- position: relative;
184
- background: var(--color-surface-elevated);
185
- border-radius: var(--radius-lg);
186
- box-shadow: var(--shadow-2xl);
187
- max-width: 90vw;
188
- max-height: 90vh;
189
- display: flex;
190
- flex-direction: column;
191
- overflow: hidden;
192
- }
193
-
194
- #appmodal-header {
195
- padding: var(--space-lg);
196
- border-bottom: var(--border-width) solid var(--color-border);
197
- flex-shrink: 0;
198
- }
199
-
200
- #appmodal-content {
201
- flex: 1;
202
- overflow-y: auto;
203
- padding: var(--space-lg);
204
- }
205
-
206
- #appmodal-footer {
207
- padding: var(--space-lg);
208
- border-top: var(--border-width) solid var(--color-border);
209
- flex-shrink: 0;
210
- display: flex;
211
- gap: var(--space-sm);
212
- justify-content: flex-end;
213
- }
214
-
215
- /* Tablet (landscape) */
216
- @media (max-width: 1280px) {
217
- #app {
218
- grid-template-columns: 200px 1fr 250px;
219
- }
220
- }
221
-
222
- /* Tablet (portrait) - hide aside */
223
- @media (max-width: 1024px) {
224
- #app {
225
- grid-template-areas:
226
- "header header"
227
- "subheader subheader"
228
- "sidebar main"
229
- "footer footer";
230
- grid-template-columns: 200px 1fr;
231
- }
232
-
233
- #appaside {
234
- position: fixed;
235
- top: 120px;
236
- right: 0;
237
- bottom: 60px;
238
- width: 280px;
239
- z-index: 98;
240
- transform: translateX(100%);
241
- box-shadow: var(--shadow-xl);
242
- }
243
-
244
- #appaside.visible {
245
- transform: translateX(0);
246
- }
247
-
248
- #appsubheader {
249
- padding: var(--space-xs) var(--space-sm);
250
- gap: var(--space-md);
251
- }
252
- }
253
-
254
- /* Mobile */
255
- @media (max-width: 768px) {
256
- #app {
257
- grid-template-areas:
258
- "header"
259
- "subheader"
260
- "main"
261
- "footer";
262
- grid-template-columns: 1fr;
263
- grid-template-rows: 60px auto 1fr 60px;
264
- }
265
-
266
- #appsidebar {
267
- position: fixed;
268
- top: 60px;
269
- left: 0;
270
- bottom: 60px;
271
- width: 280px;
272
- max-width: 80vw;
273
- z-index: 99;
274
- transform: translateX(-100%);
275
- box-shadow: var(--shadow-xl);
276
- }
277
-
278
- #appsidebar.visible {
279
- transform: translateX(0);
280
- }
281
-
282
- #appaside {
283
- top: 60px;
284
- width: 280px;
285
- max-width: 80vw;
286
- }
287
-
288
- #appmain {
289
- padding: var(--space-md);
290
- }
291
-
292
- #appheader {
293
- padding: var(--space-xs) var(--space-md);
294
- gap: var(--space-md);
295
- }
296
-
297
- #appsubheader {
298
- padding: var(--space-xs) var(--space-sm);
299
- font-size: var(--font-size-sm);
300
- flex-wrap: wrap;
301
- }
302
-
303
- #appfooter {
304
- padding: var(--space-xs) var(--space-sm);
305
- font-size: var(--font-size-sm);
306
- flex-direction: column;
307
- gap: var(--space-xs);
308
- text-align: center;
309
- }
310
- }
311
-
312
- /* Small mobile */
313
- @media (max-width: 480px) {
314
- #appsidebar,
315
- #appaside {
316
- width: 100%;
317
- max-width: 100vw;
318
- }
319
-
320
- #appmain {
321
- padding: var(--space-sm);
322
- }
323
-
324
- #appheader,
325
- #appsubheader,
326
- #appfooter {
327
- padding: var(--space-xs) var(--space-sm);
328
- }
329
-
330
- #appmodal-container {
331
- max-width: 95vw;
332
- max-height: 95vh;
333
- }
334
- }