@almadar/std 13.4.0 → 13.6.0

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.
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "std-tabs",
3
- "version": "1.0.0",
4
- "description": "std-tabs as a Function",
3
+ "version": "2.0.0",
4
+ "description": "std-tabs — embeddable tab-navigation atom. Drop into a layout\nmolecule to give the user a tabs strip that swaps which trait fills\nthe active tab's slot. Each tab points at a sibling trait via a\n@trait.X content reference; clicking a tab updates the atom's own\n@entity.activeTab and re-renders so only the matching trait's\noutput shows. Events remap at the call site (TAB_CHANGED -> Y) so\nthe host molecule can listen for routing, persistence, analytics.\n\nEach entry in `tabs` (all but `id` and `label` optional):\n- id string! stable tab id (used as activeTab key)\n- label string! visible tab text\n- icon string lucide icon name\n- badge string small badge in the tab strip (e.g. unread count)\n- content string @trait.X reference for the panel body. The host\n molecule binds a sibling trait there; only the\n active tab's content renders at any time. Omit\n to leave the panel empty.\n\nConfig:\n- tabs [TabSpec] = []\n- defaultTab string = '' id of the initial active tab.\n Falls back to tabs[0].id if blank.\n- variant default|pills|underline = default visual style\n- orientation horizontal|vertical = horizontal tab strip orientation\n\nCompiler statically unrolls array/map over @config.tabs so every\nTabSpec field is fully baked into the emitted props at codegen\ntime.",
5
5
  "orbitals": [
6
6
  {
7
- "name": "TabContentOrbital",
7
+ "name": "TabsItemOrbital",
8
8
  "entity": {
9
- "name": "TabContent",
9
+ "name": "TabsItem",
10
10
  "persistence": "runtime",
11
11
  "fields": [
12
12
  {
@@ -15,59 +15,56 @@
15
15
  "required": true
16
16
  },
17
17
  {
18
- "name": "name",
18
+ "name": "activeTab",
19
19
  "type": "string",
20
- "required": true
21
- },
22
- {
23
- "name": "description",
24
- "type": "string"
25
- },
26
- {
27
- "name": "status",
28
- "type": "string",
29
- "default": "active",
30
- "values": [
31
- "active",
32
- "inactive",
33
- "pending"
34
- ]
20
+ "default": ""
35
21
  },
36
22
  {
37
- "name": "createdAt",
38
- "type": "string"
23
+ "name": "items",
24
+ "type": "array",
25
+ "default": [],
26
+ "items": {
27
+ "type": "object",
28
+ "properties": {
29
+ "label": {
30
+ "name": "label",
31
+ "type": "string"
32
+ },
33
+ "icon": {
34
+ "name": "icon",
35
+ "type": "string"
36
+ },
37
+ "id": {
38
+ "name": "id",
39
+ "type": "string"
40
+ },
41
+ "content": {
42
+ "name": "content",
43
+ "type": "string"
44
+ },
45
+ "badge": {
46
+ "name": "badge",
47
+ "type": "string"
48
+ }
49
+ }
50
+ }
39
51
  }
40
52
  ]
41
53
  },
42
54
  "traits": [
43
55
  {
44
- "name": "TabContentTabs",
56
+ "name": "TabsItemTabs",
45
57
  "category": "interaction",
46
- "linkedEntity": "TabContent",
58
+ "linkedEntity": "TabsItem",
47
59
  "emits": [
48
60
  {
49
- "event": "TabContentLoaded",
50
- "description": "Fired when TabContent finishes loading; payload.data holds the list",
51
- "scope": "internal",
61
+ "event": "TAB_CHANGED",
62
+ "scope": "external",
52
63
  "payloadSchema": [
53
64
  {
54
- "name": "data",
55
- "type": "[TabContent]"
56
- }
57
- ]
58
- },
59
- {
60
- "event": "TabContentLoadFailed",
61
- "description": "Fired when TabContent fails to load",
62
- "scope": "internal",
63
- "payloadSchema": [
64
- {
65
- "name": "error",
66
- "type": "string"
67
- },
68
- {
69
- "name": "code",
70
- "type": "string"
65
+ "name": "tabId",
66
+ "type": "string",
67
+ "required": true
71
68
  }
72
69
  ]
73
70
  }
@@ -75,14 +72,8 @@
75
72
  "stateMachine": {
76
73
  "states": [
77
74
  {
78
- "name": "loading",
75
+ "name": "idle",
79
76
  "isInitial": true
80
- },
81
- {
82
- "name": "idle"
83
- },
84
- {
85
- "name": "error"
86
77
  }
87
78
  ],
88
79
  "events": [
@@ -91,35 +82,11 @@
91
82
  "name": "Initialize"
92
83
  },
93
84
  {
94
- "key": "TabContentLoaded",
95
- "name": "TabContent loaded",
85
+ "key": "TAB_CHANGED",
86
+ "name": "Tab Changed",
96
87
  "payloadSchema": [
97
88
  {
98
- "name": "data",
99
- "type": "[TabContent]"
100
- }
101
- ]
102
- },
103
- {
104
- "key": "TabContentLoadFailed",
105
- "name": "TabContent load failed",
106
- "payloadSchema": [
107
- {
108
- "name": "error",
109
- "type": "string"
110
- },
111
- {
112
- "name": "code",
113
- "type": "string"
114
- }
115
- ]
116
- },
117
- {
118
- "key": "SELECT_TAB",
119
- "name": "Select Tab",
120
- "payloadSchema": [
121
- {
122
- "name": "tab",
89
+ "name": "tabId",
123
90
  "type": "string",
124
91
  "required": true
125
92
  }
@@ -128,243 +95,92 @@
128
95
  ],
129
96
  "transitions": [
130
97
  {
131
- "from": "loading",
132
- "to": "loading",
98
+ "from": "idle",
99
+ "to": "idle",
133
100
  "event": "INIT",
134
101
  "effects": [
135
102
  [
136
- "fetch",
137
- "TabContent",
138
- {
139
- "emit": {
140
- "failure": "TabContentLoadFailed",
141
- "success": "TabContentLoaded"
142
- }
143
- }
103
+ "set",
104
+ "@entity.items",
105
+ "@config.tabs"
144
106
  ],
145
107
  [
146
- "render-ui",
147
- "main",
148
- {
149
- "direction": "vertical",
150
- "align": "center",
151
- "className": "py-12",
152
- "children": [
153
- {
154
- "type": "spinner"
155
- },
156
- {
157
- "variant": "caption",
158
- "color": "muted",
159
- "type": "typography",
160
- "content": "Loading…"
161
- }
162
- ],
163
- "type": "stack",
164
- "gap": "md"
165
- }
166
- ]
167
- ]
168
- },
169
- {
170
- "from": "loading",
171
- "to": "idle",
172
- "event": "TabContentLoaded",
173
- "effects": [
174
- [
175
- "render-ui",
176
- "main",
177
- {
178
- "type": "stack",
179
- "direction": "vertical",
180
- "children": [
181
- {
182
- "align": "center",
183
- "children": [
184
- {
185
- "name": "layout-grid",
186
- "type": "icon"
187
- },
188
- {
189
- "type": "typography",
190
- "content": "TabContents",
191
- "variant": "h2"
192
- }
193
- ],
194
- "type": "stack",
195
- "gap": "sm",
196
- "direction": "horizontal"
197
- },
198
- {
199
- "type": "divider"
200
- },
201
- {
202
- "type": "tabs",
203
- "onTabChange": "SELECT_TAB",
204
- "defaultActiveTab": "name",
205
- "tabs": [
206
- {
207
- "label": "Name",
208
- "id": "name"
209
- },
210
- {
211
- "label": "Description",
212
- "id": "description"
213
- },
214
- {
215
- "id": "status",
216
- "label": "Status"
217
- },
218
- {
219
- "label": "CreatedAt",
220
- "id": "createdAt"
221
- }
222
- ]
223
- },
224
- {
225
- "type": "divider"
226
- },
227
- {
228
- "className": "transition-shadow hover:shadow-md cursor-pointer",
229
- "renderItem": [
230
- "fn",
231
- "item",
232
- {
233
- "direction": "vertical",
234
- "gap": "sm",
235
- "children": [
236
- {
237
- "type": "typography",
238
- "variant": "h4",
239
- "content": "@item.name"
240
- },
241
- {
242
- "content": "@item.description",
243
- "color": "muted",
244
- "type": "typography",
245
- "variant": "caption"
246
- }
247
- ],
248
- "type": "stack"
249
- }
250
- ],
251
- "fields": [],
252
- "entity": "@payload.data",
253
- "type": "data-grid"
254
- }
255
- ],
256
- "gap": "lg"
257
- }
258
- ]
259
- ]
260
- },
261
- {
262
- "from": "loading",
263
- "to": "error",
264
- "event": "TabContentLoadFailed",
265
- "effects": [
266
- [
267
- "render-ui",
268
- "main",
269
- {
270
- "align": "center",
271
- "className": "py-12",
272
- "children": [
273
- {
274
- "name": "alert-triangle",
275
- "color": "destructive",
276
- "type": "icon"
277
- },
278
- {
279
- "type": "typography",
280
- "variant": "h3",
281
- "content": "Failed to load"
282
- },
283
- {
284
- "type": "typography",
285
- "content": "@payload.error",
286
- "variant": "body",
287
- "color": "muted"
288
- },
289
- {
290
- "type": "button",
291
- "variant": "primary",
292
- "label": "Retry",
293
- "action": "INIT",
294
- "icon": "rotate-ccw"
295
- }
296
- ],
297
- "type": "stack",
298
- "gap": "md",
299
- "direction": "vertical"
300
- }
301
- ]
302
- ]
303
- },
304
- {
305
- "from": "idle",
306
- "to": "loading",
307
- "event": "SELECT_TAB",
308
- "effects": [
309
- [
310
- "fetch",
311
- "TabContent",
312
- {
313
- "emit": {
314
- "failure": "TabContentLoadFailed",
315
- "success": "TabContentLoaded"
316
- }
317
- }
108
+ "set",
109
+ "@entity.activeTab",
110
+ "@config.defaultTab"
318
111
  ],
319
112
  [
320
113
  "render-ui",
321
114
  "main",
322
115
  {
323
- "type": "spinner"
116
+ "tabChangeEvent": "TAB_CHANGED",
117
+ "type": "tabs",
118
+ "items": "@entity.items",
119
+ "variant": "@config.variant",
120
+ "orientation": "@config.orientation",
121
+ "activeTab": "@entity.activeTab"
324
122
  }
325
123
  ]
326
124
  ]
327
125
  },
328
126
  {
329
- "from": "error",
330
- "to": "loading",
331
- "event": "INIT",
127
+ "from": "idle",
128
+ "to": "idle",
129
+ "event": "TAB_CHANGED",
332
130
  "effects": [
333
131
  [
334
- "fetch",
335
- "TabContent",
336
- {
337
- "emit": {
338
- "failure": "TabContentLoadFailed",
339
- "success": "TabContentLoaded"
340
- }
341
- }
132
+ "set",
133
+ "@entity.activeTab",
134
+ "@payload.tabId"
342
135
  ],
343
136
  [
344
137
  "render-ui",
345
138
  "main",
346
139
  {
347
- "type": "spinner"
140
+ "items": "@entity.items",
141
+ "variant": "@config.variant",
142
+ "type": "tabs",
143
+ "orientation": "@config.orientation",
144
+ "tabChangeEvent": "TAB_CHANGED",
145
+ "activeTab": "@entity.activeTab"
348
146
  }
349
147
  ]
350
148
  ]
351
149
  }
352
150
  ]
353
151
  },
354
- "scope": "collection"
152
+ "config": {
153
+ "variant": {
154
+ "type": "string",
155
+ "default": "default"
156
+ },
157
+ "tabs": {
158
+ "type": "[object]",
159
+ "default": []
160
+ },
161
+ "orientation": {
162
+ "type": "string",
163
+ "default": "horizontal"
164
+ },
165
+ "defaultTab": {
166
+ "type": "string",
167
+ "default": ""
168
+ }
169
+ },
170
+ "scope": "instance"
355
171
  }
356
172
  ],
357
173
  "pages": [
358
174
  {
359
- "name": "TabContentTabsPage",
360
- "path": "/tabcontents",
175
+ "name": "TabsItemTabsPage",
176
+ "path": "/tabsitems",
361
177
  "traits": [
362
178
  {
363
- "ref": "TabContentTabs"
179
+ "ref": "TabsItemTabs"
364
180
  }
365
181
  ]
366
182
  }
367
183
  ]
368
184
  }
369
185
  ]
370
- }
186
+ }
@@ -66,14 +66,18 @@
66
66
  "config": {
67
67
  "metrics": [
68
68
  {
69
- "format": "number",
70
- "aggregation": "count",
71
69
  "label": "Total Items",
72
70
  "icon": "list",
73
- "variant": "primary"
71
+ "aggregation": "count",
72
+ "variant": "primary",
73
+ "format": "number"
74
74
  },
75
75
  {
76
76
  "aggregation": "count",
77
+ "label": "Active",
78
+ "icon": "check-circle",
79
+ "variant": "success",
80
+ "format": "number",
77
81
  "filter": [
78
82
  "fn",
79
83
  "row",
@@ -82,29 +86,25 @@
82
86
  "@row.status",
83
87
  "active"
84
88
  ]
85
- ],
86
- "icon": "check-circle",
87
- "variant": "success",
88
- "format": "number",
89
- "label": "Active"
89
+ ]
90
90
  },
91
91
  {
92
- "label": "Total Revenue",
93
92
  "variant": "info",
94
- "aggregation": "sum",
95
- "format": "currency",
96
93
  "field": "amount",
97
94
  "target": 10000.0,
98
- "icon": "dollar-sign"
95
+ "aggregation": "sum",
96
+ "icon": "dollar-sign",
97
+ "label": "Total Revenue",
98
+ "format": "currency"
99
99
  },
100
100
  {
101
- "icon": "trending-up",
101
+ "label": "Avg Units",
102
+ "field": "units",
102
103
  "aggregation": "avg",
103
104
  "variant": "default",
104
- "format": "number",
105
- "field": "units",
106
- "label": "Avg Units",
107
- "suffix": " units"
105
+ "suffix": " units",
106
+ "icon": "trending-up",
107
+ "format": "number"
108
108
  }
109
109
  ],
110
110
  "title": "Summary"
@@ -124,13 +124,13 @@
124
124
  "ref": "Graphs.traits.GraphItemGraph",
125
125
  "name": "DashboardCategoryChart",
126
126
  "config": {
127
- "categoryField": "category",
128
- "aggregation": "count",
129
- "height": 280.0,
130
127
  "showLegend": false,
131
- "subtitle": "Count across categories",
132
128
  "title": "Items by Category",
133
- "chartType": "bar"
129
+ "subtitle": "Count across categories",
130
+ "chartType": "bar",
131
+ "aggregation": "count",
132
+ "height": 280.0,
133
+ "categoryField": "category"
134
134
  },
135
135
  "listens": [
136
136
  {
@@ -147,12 +147,12 @@
147
147
  "ref": "Graphs.traits.GraphItemGraph",
148
148
  "name": "DashboardStatusChart",
149
149
  "config": {
150
- "height": 280.0,
151
- "categoryField": "status",
152
150
  "title": "Status Mix",
153
- "showLegend": true,
154
151
  "chartType": "donut",
155
- "aggregation": "count"
152
+ "aggregation": "count",
153
+ "showLegend": true,
154
+ "categoryField": "status",
155
+ "height": 280.0
156
156
  },
157
157
  "listens": [
158
158
  {
@@ -171,7 +171,6 @@
171
171
  "linkedEntity": "DashboardItem",
172
172
  "config": {
173
173
  "displayPageSize": 5.0,
174
- "pageSize": 100.0,
175
174
  "fields": [
176
175
  {
177
176
  "name": "name",
@@ -184,16 +183,17 @@
184
183
  "variant": "caption"
185
184
  },
186
185
  {
187
- "variant": "badge",
188
186
  "name": "status",
187
+ "variant": "badge",
189
188
  "label": "Status"
190
189
  },
191
190
  {
192
- "variant": "caption",
193
191
  "label": "Amount",
194
- "name": "amount"
192
+ "name": "amount",
193
+ "variant": "caption"
195
194
  }
196
- ]
195
+ ],
196
+ "pageSize": 100.0
197
197
  }
198
198
  },
199
199
  {
@@ -274,8 +274,8 @@
274
274
  "DashboardItem",
275
275
  {
276
276
  "emit": {
277
- "failure": "DashboardItemLoadFailed",
278
- "success": "DashboardItemLoaded"
277
+ "success": "DashboardItemLoaded",
278
+ "failure": "DashboardItemLoadFailed"
279
279
  }
280
280
  }
281
281
  ],
@@ -283,50 +283,50 @@
283
283
  "render-ui",
284
284
  "main",
285
285
  {
286
- "type": "stack",
287
- "className": "max-w-6xl mx-auto w-full p-4",
288
286
  "children": [
289
287
  {
288
+ "align": "center",
289
+ "type": "stack",
290
+ "direction": "horizontal",
291
+ "gap": "sm",
290
292
  "children": [
291
293
  {
292
294
  "name": "bar-chart-2",
293
295
  "type": "icon"
294
296
  },
295
297
  {
296
- "type": "typography",
297
298
  "variant": "h2",
299
+ "type": "typography",
298
300
  "content": "Dashboard"
299
301
  }
300
- ],
301
- "direction": "horizontal",
302
- "type": "stack",
303
- "gap": "sm",
304
- "align": "center"
302
+ ]
305
303
  },
306
304
  {
307
305
  "type": "divider"
308
306
  },
309
307
  "@trait.DashboardSummary",
310
308
  {
311
- "type": "simple-grid",
309
+ "cols": 2.0,
310
+ "gap": "md",
312
311
  "children": [
313
312
  "@trait.DashboardCategoryChart",
314
313
  "@trait.DashboardStatusChart"
315
314
  ],
316
- "cols": 2.0,
317
- "gap": "md"
315
+ "type": "simple-grid"
318
316
  },
319
317
  {
320
318
  "type": "divider"
321
319
  },
322
320
  {
323
- "variant": "h3",
324
321
  "type": "typography",
322
+ "variant": "h3",
325
323
  "content": "Recent Items"
326
324
  },
327
325
  "@trait.DashboardItemBrowse"
328
326
  ],
329
327
  "gap": "lg",
328
+ "className": "max-w-6xl mx-auto w-full p-4",
329
+ "type": "stack",
330
330
  "direction": "vertical"
331
331
  }
332
332
  ]