@radicool/throughline 0.25.0 → 0.26.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.
- package/README.md +6 -4
- package/adapters/codex/AGENTS.md +1 -0
- package/adapters/codex/prompts/component-builder.md +5 -3
- package/adapters/codex/prompts/compose-figma.md +59 -0
- package/adapters/codex/prompts/document-component.md +3 -2
- package/adapters/cursor/.cursor/commands/compose-figma.md +59 -0
- package/adapters/cursor/.cursor/commands/document-component.md +3 -2
- package/adapters/cursor/.cursor/rules/component-builder.mdc +5 -3
- package/adapters/generic/AGENTS.md +1 -0
- package/adapters/generic/commands/compose-figma.md +59 -0
- package/adapters/generic/commands/document-component.md +3 -2
- package/adapters/generic/skills/component-builder/SKILL.md +5 -3
- package/package.json +1 -1
- package/references/doc-card-builder.md +62 -15
- package/references/figma-adherence.md +21 -0
- package/references/figma-compose.md +896 -0
- package/scripts/README.md +7 -4
- package/scripts/build-doc-card-builder.mjs +16 -0
- package/scripts/build-figma-checks.mjs +89 -2
- package/scripts/doc-card-payload.mjs +115 -0
- package/scripts/install.mjs +4 -2
- package/scripts/lib/doc-card-plan.mjs +37 -0
- package/scripts/lib/doc-card-render.figma.js +9 -15
- package/scripts/lib/figma-adherence-read.figma.js +21 -0
- package/scripts/lib/figma-compose.figma.js +326 -0
- package/scripts/lib/figma-compose.mjs +317 -0
- package/scripts/lib/fixtures/figma-compose/casing-and-suffix.json +8 -0
- package/scripts/lib/fixtures/figma-compose/fill-in-unlaid-slot.json +7 -0
- package/scripts/lib/fixtures/figma-compose/hug-on-fixed-component.json +34 -0
- package/scripts/lib/fixtures/figma-compose/inventory.json +295 -0
- package/scripts/lib/fixtures/figma-compose/many-errors.json +8 -0
- package/scripts/lib/fixtures/figma-compose/missing-component.json +7 -0
- package/scripts/lib/fixtures/figma-compose/name-taken.json +6 -0
- package/scripts/lib/fixtures/figma-compose/padding-sides.json +23 -0
- package/scripts/lib/fixtures/figma-compose/radius-kind.json +27 -0
- package/scripts/lib/fixtures/figma-compose/raw-number.json +5 -0
- package/scripts/lib/fixtures/figma-compose/sign-in-ok.json +16 -0
- package/scripts/lib/fixtures/figma-compose/slot-ok.json +9 -0
- package/scripts/lib/fixtures/figma-compose/unknown-prop-and-option.json +7 -0
- package/scripts/lib/fixtures/figma-compose/wrong-kind.json +5 -0
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "hug on a component without auto layout would throw in Figma, so it is rejected; fill is fine",
|
|
3
|
+
"description": {
|
|
4
|
+
"screen": "X",
|
|
5
|
+
"page": "Screens",
|
|
6
|
+
"width": 390,
|
|
7
|
+
"root": {
|
|
8
|
+
"layout": "vertical",
|
|
9
|
+
"children": [
|
|
10
|
+
{
|
|
11
|
+
"component": "Spinner",
|
|
12
|
+
"sizing": {
|
|
13
|
+
"horizontal": "hug"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"component": "Spinner",
|
|
18
|
+
"sizing": {
|
|
19
|
+
"horizontal": "fill"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"component": "Spinner"
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"expected": {
|
|
29
|
+
"ok": false,
|
|
30
|
+
"errors": [
|
|
31
|
+
"invalid"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "the shared inventory every case resolves against, modelled on the sample file (2026-10-13)",
|
|
3
|
+
"sets": [
|
|
4
|
+
{
|
|
5
|
+
"name": "Button",
|
|
6
|
+
"id": "10:1",
|
|
7
|
+
"page": "Components",
|
|
8
|
+
"props": [
|
|
9
|
+
{
|
|
10
|
+
"key": "label#10:273",
|
|
11
|
+
"name": "label",
|
|
12
|
+
"type": "TEXT"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"key": "hasTrailing#10:455",
|
|
16
|
+
"name": "hasTrailing",
|
|
17
|
+
"type": "BOOLEAN"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"key": "trailingIcon#11:91",
|
|
21
|
+
"name": "trailingIcon",
|
|
22
|
+
"type": "INSTANCE_SWAP"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"key": "variant",
|
|
26
|
+
"name": "variant",
|
|
27
|
+
"type": "VARIANT",
|
|
28
|
+
"options": [
|
|
29
|
+
"default",
|
|
30
|
+
"secondary",
|
|
31
|
+
"outline",
|
|
32
|
+
"ghost",
|
|
33
|
+
"link",
|
|
34
|
+
"destructive"
|
|
35
|
+
]
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"key": "size",
|
|
39
|
+
"name": "size",
|
|
40
|
+
"type": "VARIANT",
|
|
41
|
+
"options": [
|
|
42
|
+
"sm",
|
|
43
|
+
"md",
|
|
44
|
+
"lg"
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"key": "state",
|
|
49
|
+
"name": "state",
|
|
50
|
+
"type": "VARIANT",
|
|
51
|
+
"options": [
|
|
52
|
+
"Default",
|
|
53
|
+
"Hover",
|
|
54
|
+
"Focus",
|
|
55
|
+
"Disabled",
|
|
56
|
+
"Loading",
|
|
57
|
+
"Active"
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
]
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "Input",
|
|
64
|
+
"id": "12:1",
|
|
65
|
+
"page": "Components",
|
|
66
|
+
"props": [
|
|
67
|
+
{
|
|
68
|
+
"key": "placeholder#12:200",
|
|
69
|
+
"name": "placeholder",
|
|
70
|
+
"type": "TEXT"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"key": "size",
|
|
74
|
+
"name": "size",
|
|
75
|
+
"type": "VARIANT",
|
|
76
|
+
"options": [
|
|
77
|
+
"sm",
|
|
78
|
+
"md",
|
|
79
|
+
"lg"
|
|
80
|
+
]
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"key": "state",
|
|
84
|
+
"name": "state",
|
|
85
|
+
"type": "VARIANT",
|
|
86
|
+
"options": [
|
|
87
|
+
"Default",
|
|
88
|
+
"Focus",
|
|
89
|
+
"Disabled",
|
|
90
|
+
"Error",
|
|
91
|
+
"Hover",
|
|
92
|
+
"Active"
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"name": "Checkbox",
|
|
99
|
+
"id": "13:1",
|
|
100
|
+
"page": "Components",
|
|
101
|
+
"props": [
|
|
102
|
+
{
|
|
103
|
+
"key": "state",
|
|
104
|
+
"name": "state",
|
|
105
|
+
"type": "VARIANT",
|
|
106
|
+
"options": [
|
|
107
|
+
"Disabled",
|
|
108
|
+
"Default",
|
|
109
|
+
"Hover",
|
|
110
|
+
"Focus",
|
|
111
|
+
"Active"
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"key": "checked",
|
|
116
|
+
"name": "checked",
|
|
117
|
+
"type": "VARIANT",
|
|
118
|
+
"options": [
|
|
119
|
+
"false",
|
|
120
|
+
"true",
|
|
121
|
+
"indeterminate"
|
|
122
|
+
]
|
|
123
|
+
}
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"name": "Select Menu Item",
|
|
128
|
+
"id": "23:1",
|
|
129
|
+
"page": "Components",
|
|
130
|
+
"props": [
|
|
131
|
+
{
|
|
132
|
+
"key": "Label#23:242",
|
|
133
|
+
"name": "Label",
|
|
134
|
+
"type": "TEXT"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"key": "State",
|
|
138
|
+
"name": "State",
|
|
139
|
+
"type": "VARIANT",
|
|
140
|
+
"options": [
|
|
141
|
+
"Default",
|
|
142
|
+
"Hover",
|
|
143
|
+
"Focused",
|
|
144
|
+
"Selected",
|
|
145
|
+
"Disabled"
|
|
146
|
+
]
|
|
147
|
+
}
|
|
148
|
+
]
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"name": "Panel",
|
|
152
|
+
"id": "40:1",
|
|
153
|
+
"page": "Components",
|
|
154
|
+
"props": [
|
|
155
|
+
{
|
|
156
|
+
"key": "Body#40:2",
|
|
157
|
+
"name": "Body",
|
|
158
|
+
"type": "SLOT",
|
|
159
|
+
"slotLayout": "VERTICAL"
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"key": "title#40:3",
|
|
163
|
+
"name": "title",
|
|
164
|
+
"type": "TEXT"
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"name": "Sheet",
|
|
170
|
+
"id": "41:1",
|
|
171
|
+
"page": "Components",
|
|
172
|
+
"props": [
|
|
173
|
+
{
|
|
174
|
+
"key": "Content#41:2",
|
|
175
|
+
"name": "Content",
|
|
176
|
+
"type": "SLOT",
|
|
177
|
+
"slotLayout": "NONE"
|
|
178
|
+
}
|
|
179
|
+
]
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"name": "Spinner",
|
|
183
|
+
"id": "30:1",
|
|
184
|
+
"page": "Components",
|
|
185
|
+
"autoLayout": false,
|
|
186
|
+
"props": [
|
|
187
|
+
{
|
|
188
|
+
"key": "size",
|
|
189
|
+
"name": "size",
|
|
190
|
+
"type": "VARIANT",
|
|
191
|
+
"options": [
|
|
192
|
+
"sm",
|
|
193
|
+
"md",
|
|
194
|
+
"lg"
|
|
195
|
+
]
|
|
196
|
+
}
|
|
197
|
+
]
|
|
198
|
+
}
|
|
199
|
+
],
|
|
200
|
+
"components": [
|
|
201
|
+
{
|
|
202
|
+
"name": "icon/arrow-right",
|
|
203
|
+
"id": "6:553",
|
|
204
|
+
"page": "Icons"
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"name": "icon/check",
|
|
208
|
+
"id": "6:560",
|
|
209
|
+
"page": "Icons"
|
|
210
|
+
}
|
|
211
|
+
],
|
|
212
|
+
"variables": [
|
|
213
|
+
{
|
|
214
|
+
"name": "color/bg/canvas",
|
|
215
|
+
"id": "V:1",
|
|
216
|
+
"kinds": [
|
|
217
|
+
"colour"
|
|
218
|
+
]
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"name": "color/text/primary",
|
|
222
|
+
"id": "V:2",
|
|
223
|
+
"kinds": [
|
|
224
|
+
"colour"
|
|
225
|
+
]
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"name": "color/border/default",
|
|
229
|
+
"id": "V:3",
|
|
230
|
+
"kinds": [
|
|
231
|
+
"colour"
|
|
232
|
+
]
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"name": "space/gap/md",
|
|
236
|
+
"id": "V:4",
|
|
237
|
+
"kinds": [
|
|
238
|
+
"gap"
|
|
239
|
+
]
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"name": "space/inset/lg",
|
|
243
|
+
"id": "V:5",
|
|
244
|
+
"kinds": [
|
|
245
|
+
"gap"
|
|
246
|
+
]
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
"name": "space/4",
|
|
250
|
+
"id": "V:6",
|
|
251
|
+
"kinds": [
|
|
252
|
+
"gap"
|
|
253
|
+
]
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"name": "radius/md",
|
|
257
|
+
"id": "V:7",
|
|
258
|
+
"kinds": [
|
|
259
|
+
"radius"
|
|
260
|
+
]
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"name": "font/size/400",
|
|
264
|
+
"id": "V:8",
|
|
265
|
+
"kinds": []
|
|
266
|
+
}
|
|
267
|
+
],
|
|
268
|
+
"textStyles": [
|
|
269
|
+
{
|
|
270
|
+
"name": "Heading/L",
|
|
271
|
+
"id": "S:1"
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
"name": "Body/Default",
|
|
275
|
+
"id": "S:2"
|
|
276
|
+
}
|
|
277
|
+
],
|
|
278
|
+
"collections": [
|
|
279
|
+
{
|
|
280
|
+
"name": "Color / Semantic",
|
|
281
|
+
"id": "C:1",
|
|
282
|
+
"modes": [
|
|
283
|
+
{
|
|
284
|
+
"name": "Dark",
|
|
285
|
+
"id": "M:1"
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"name": "Light",
|
|
289
|
+
"id": "M:2"
|
|
290
|
+
}
|
|
291
|
+
]
|
|
292
|
+
}
|
|
293
|
+
],
|
|
294
|
+
"target": null
|
|
295
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "every problem is reported in one pass",
|
|
3
|
+
"description": { "screen": "X", "page": "Screens", "width": 390, "modes": { "Color / Semantic": "Sepia" }, "root": { "layout": "diagonal", "children": [
|
|
4
|
+
{ "text": "Hi", "style": "Heading/XXL", "color": "color/text/primary" },
|
|
5
|
+
{ "component": "Carousel" }
|
|
6
|
+
] } },
|
|
7
|
+
"expected": { "ok": false, "errors": ["unknown-mode", "invalid", "unknown-text-style", "missing-component"] }
|
|
8
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "a component the file lacks is a gap, with the nearest names",
|
|
3
|
+
"description": { "screen": "Booking", "page": "Screens", "width": 390, "root": { "layout": "vertical", "children": [
|
|
4
|
+
{ "component": "DatePicker" }
|
|
5
|
+
] } },
|
|
6
|
+
"expected": { "ok": false, "errors": ["missing-component"] }
|
|
7
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "an unmarked frame already named like the screen stops the build",
|
|
3
|
+
"description": { "screen": "Sign up", "page": "Screens", "width": 390, "root": { "layout": "vertical" } },
|
|
4
|
+
"target": { "screen": "unmarked", "wip": null },
|
|
5
|
+
"expected": { "ok": false, "errors": ["name-taken"] }
|
|
6
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "per-side padding: a side that doesn't exist and a side bound to a colour",
|
|
3
|
+
"description": {
|
|
4
|
+
"screen": "X",
|
|
5
|
+
"page": "Screens",
|
|
6
|
+
"width": 390,
|
|
7
|
+
"root": {
|
|
8
|
+
"layout": "vertical",
|
|
9
|
+
"padding": {
|
|
10
|
+
"top": "space/4",
|
|
11
|
+
"middle": "space/4",
|
|
12
|
+
"left": "color/bg/canvas"
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"expected": {
|
|
17
|
+
"ok": false,
|
|
18
|
+
"errors": [
|
|
19
|
+
"invalid",
|
|
20
|
+
"variable-kind"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "a radius bound to a spacing variable is the wrong kind; a radius variable is fine",
|
|
3
|
+
"description": {
|
|
4
|
+
"screen": "X",
|
|
5
|
+
"page": "Screens",
|
|
6
|
+
"width": 390,
|
|
7
|
+
"root": {
|
|
8
|
+
"layout": "vertical",
|
|
9
|
+
"children": [
|
|
10
|
+
{
|
|
11
|
+
"layout": "vertical",
|
|
12
|
+
"radius": "space/4"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"layout": "vertical",
|
|
16
|
+
"radius": "radius/md"
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"expected": {
|
|
22
|
+
"ok": false,
|
|
23
|
+
"errors": [
|
|
24
|
+
"variable-kind"
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "frames, styled text, Button with a variant, text, boolean and icon swap, Input, Checkbox and a mode resolve",
|
|
3
|
+
"description": {
|
|
4
|
+
"screen": "Sign in", "page": "Screens", "width": 390, "modes": { "Color / Semantic": "Light" },
|
|
5
|
+
"root": { "layout": "vertical", "gap": "space/gap/md", "padding": "space/inset/lg", "fill": "color/bg/canvas", "children": [
|
|
6
|
+
{ "text": "Sign in", "style": "Heading/L", "color": "color/text/primary" },
|
|
7
|
+
{ "component": "Input", "props": { "placeholder": "Email" }, "sizing": { "horizontal": "fill" } },
|
|
8
|
+
{ "component": "Input", "props": { "placeholder": "Password" }, "sizing": { "horizontal": "fill" } },
|
|
9
|
+
{ "layout": "horizontal", "gap": "space/4", "align": { "main": "space-between", "cross": "center" }, "sizing": { "horizontal": "fill" }, "children": [
|
|
10
|
+
{ "component": "Checkbox", "props": { "checked": "true" } },
|
|
11
|
+
{ "component": "Button", "props": { "variant": "secondary", "size": "lg", "label": "Sign in", "hasTrailing": true, "trailingIcon": "icon/arrow-right" } }
|
|
12
|
+
] }
|
|
13
|
+
] }
|
|
14
|
+
},
|
|
15
|
+
"expected": { "ok": true, "errors": [] }
|
|
16
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "content in a slot with auto layout resolves, fill included",
|
|
3
|
+
"description": { "screen": "Panel", "page": "Screens", "width": 390, "root": { "layout": "vertical", "children": [
|
|
4
|
+
{ "component": "Panel", "props": { "title": "Account" }, "slots": { "Body": [
|
|
5
|
+
{ "text": "Hello", "style": "Body/Default", "color": "color/text/primary", "sizing": { "horizontal": "fill" } }
|
|
6
|
+
] } }
|
|
7
|
+
] } },
|
|
8
|
+
"expected": { "ok": true, "errors": [] }
|
|
9
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "a prop the set lacks and an option the variant lacks",
|
|
3
|
+
"description": { "screen": "X", "page": "Screens", "width": 390, "root": { "layout": "vertical", "children": [
|
|
4
|
+
{ "component": "Button", "props": { "colour": "red", "size": "xl" } }
|
|
5
|
+
] } },
|
|
6
|
+
"expected": { "ok": false, "errors": ["unknown-prop", "unknown-option"] }
|
|
7
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "a gap bound to a font size and a fill bound to a spacing variable",
|
|
3
|
+
"description": { "screen": "X", "page": "Screens", "width": 390, "root": { "layout": "vertical", "gap": "font/size/400", "fill": "space/4" } },
|
|
4
|
+
"expected": { "ok": false, "errors": ["variable-kind", "variable-kind"] }
|
|
5
|
+
}
|