Files
shkim4andClaude Opus 5.5 0029cef60c feat(sw): implement property field interaction variants
- Property panel rows follow Figma 26:12388 ~ 26:12649: 28px fields with
  Default / Hover border / numeric editing On (#0F0D0A) / dropdown On (#211D13)
- Layer, line style and color fields open the shared header dropdown contents
  (SWHeaderLayerRows, SWHeaderLineStyleColumns, SWHeaderColorPanelBody)
- Additive API: property.picker, property.decimals, panel menus
- Property Fields story and browser test (77 checks)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-19 09:38:31 +09:00

813 lines
19 KiB
JSON

{
"label": "run4",
"checks": [
{
"name": "Default layer-mixed: 200 x 28, radius 2, no border / surface",
"status": "PASS",
"data": {
"x": 97,
"y": 371.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"borderTopLeftRadius": "2px"
}
},
{
"name": "Default layer: 200 x 28, radius 2, no border / surface",
"status": "PASS",
"data": {
"x": 97,
"y": 403.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"borderTopLeftRadius": "2px"
}
},
{
"name": "Default color: 200 x 28, radius 2, no border / surface",
"status": "PASS",
"data": {
"x": 97,
"y": 435.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"borderTopLeftRadius": "2px"
}
},
{
"name": "Default line: 200 x 28, radius 2, no border / surface",
"status": "PASS",
"data": {
"x": 97,
"y": 467.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"borderTopLeftRadius": "2px"
}
},
{
"name": "Default scale: 200 x 28, radius 2, no border / surface",
"status": "PASS",
"data": {
"x": 97,
"y": 531.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"borderTopLeftRadius": "2px"
}
},
{
"name": "Default link: 200 x 28, radius 2, no border / surface",
"status": "PASS",
"data": {
"x": 97,
"y": 595.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"borderTopLeftRadius": "2px"
}
},
{
"name": "Default thickness: 200 x 28, radius 2, no border / surface",
"status": "PASS",
"data": {
"x": 97,
"y": 627.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"borderTopLeftRadius": "2px"
}
},
{
"name": "Default material: 200 x 28, radius 2, no border / surface",
"status": "PASS",
"data": {
"x": 97,
"y": 659.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"borderTopLeftRadius": "2px"
}
},
{
"name": "Default weight: compact 28px hug field (pl 6 / pr 4 incl. border), no border",
"status": "PASS",
"data": {
"x": 97,
"y": 499.5,
"w": 39.23,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"paddingLeft": "5px",
"paddingRight": "3px"
}
},
{
"name": "Default opacity: compact 28px hug field (pl 6 / pr 4 incl. border), no border",
"status": "PASS",
"data": {
"x": 97,
"y": 563.5,
"w": 39.23,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"paddingLeft": "5px",
"paddingRight": "3px"
}
},
{
"name": "Typography: value #E60403 14px, unit #000 12px",
"status": "PASS",
"data": {
"value": [
"rgb(230, 4, 3)",
"14px"
],
"unit": [
"rgb(0, 0, 0)",
"12px"
]
}
},
{
"name": "Hover layer-mixed: rgba(33,29,19,.4) border, 28px kept, value not moved",
"status": "PASS",
"data": {
"x": 97,
"y": 371.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(33, 29, 19, 0.4)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"before": [
105,
377.5
],
"after": [
105,
377.5
]
}
},
{
"name": "Mouse Leave layer-mixed: back to Default",
"status": "PASS",
"data": {
"x": 97,
"y": 371.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)"
}
},
{
"name": "Hover layer: rgba(33,29,19,.4) border, 28px kept, value not moved",
"status": "PASS",
"data": {
"x": 97,
"y": 403.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(33, 29, 19, 0.4)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"before": [
105,
409.5
],
"after": [
105,
409.5
]
}
},
{
"name": "Mouse Leave layer: back to Default",
"status": "PASS",
"data": {
"x": 97,
"y": 403.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)"
}
},
{
"name": "Hover color: rgba(33,29,19,.4) border, 28px kept, value not moved, divider shown",
"status": "PASS",
"data": {
"x": 98,
"y": 436.5,
"w": 114,
"h": 26,
"borderTopColor": "rgba(33, 29, 19, 0.4)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"before": [
105,
436.5
],
"after": [
105,
436.5
],
"borderRightColor": "rgba(33, 29, 19, 0.4)"
}
},
{
"name": "Mouse Leave color: back to Default",
"status": "PASS",
"data": {
"x": 97,
"y": 435.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)"
}
},
{
"name": "Hover line: rgba(33,29,19,.4) border, 28px kept, value not moved",
"status": "PASS",
"data": {
"x": 97,
"y": 467.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(33, 29, 19, 0.4)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"before": [
105,
473.5
],
"after": [
105,
473.5
]
}
},
{
"name": "Mouse Leave line: back to Default",
"status": "PASS",
"data": {
"x": 97,
"y": 467.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)"
}
},
{
"name": "Hover scale: rgba(33,29,19,.4) border, 28px kept, value not moved",
"status": "PASS",
"data": {
"x": 97,
"y": 531.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(33, 29, 19, 0.4)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"before": [
105,
532.5
],
"after": [
105,
532.5
]
}
},
{
"name": "Mouse Leave scale: back to Default",
"status": "PASS",
"data": {
"x": 97,
"y": 531.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)"
}
},
{
"name": "Hover link: rgba(33,29,19,.4) border, 28px kept, value not moved",
"status": "PASS",
"data": {
"x": 97,
"y": 595.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(33, 29, 19, 0.4)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"before": [
105,
596.5
],
"after": [
105,
596.5
]
}
},
{
"name": "Mouse Leave link: back to Default",
"status": "PASS",
"data": {
"x": 97,
"y": 595.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)"
}
},
{
"name": "Hover thickness: rgba(33,29,19,.4) border, 28px kept, value not moved",
"status": "PASS",
"data": {
"x": 97,
"y": 627.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(33, 29, 19, 0.4)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"before": [
105,
628.5
],
"after": [
105,
628.5
]
}
},
{
"name": "Mouse Leave thickness: back to Default",
"status": "PASS",
"data": {
"x": 97,
"y": 627.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)"
}
},
{
"name": "Hover material: rgba(33,29,19,.4) border, 28px kept, value not moved",
"status": "PASS",
"data": {
"x": 97,
"y": 659.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(33, 29, 19, 0.4)",
"backgroundColor": "rgba(0, 0, 0, 0)",
"before": [
105,
660.5
],
"after": [
105,
660.5
]
}
},
{
"name": "Mouse Leave material: back to Default",
"status": "PASS",
"data": {
"x": 97,
"y": 659.5,
"w": 200,
"h": 28,
"borderTopColor": "rgba(0, 0, 0, 0)"
}
},
{
"name": "Hover / Leave weight compact",
"status": "PASS",
"data": {
"hover": "rgba(33, 29, 19, 0.4)",
"leave": "rgba(0, 0, 0, 0)"
}
},
{
"name": "Hover / Leave opacity compact",
"status": "PASS",
"data": {
"hover": "rgba(33, 29, 19, 0.4)",
"leave": "rgba(0, 0, 0, 0)"
}
},
{
"name": "On(편집) scale: #0F0D0A, border, unit #FFF, focused input with red caret + outline",
"status": "PASS",
"data": {
"x": 97,
"y": 531.5,
"w": 200,
"h": 28,
"backgroundColor": "rgb(15, 13, 10)",
"borderTopColor": "rgba(33, 29, 19, 0.4)",
"unit": "rgb(255, 255, 255)",
"focused": true,
"caret": "rgb(230, 4, 3)",
"shadow": true
}
},
{
"name": "On(편집) thickness: #0F0D0A, border, unit #FFF, focused input with red caret + outline",
"status": "PASS",
"data": {
"x": 97,
"y": 627.5,
"w": 200,
"h": 28,
"backgroundColor": "rgb(15, 13, 10)",
"borderTopColor": "rgba(33, 29, 19, 0.4)",
"unit": "rgb(255, 255, 255)",
"focused": true,
"caret": "rgb(230, 4, 3)",
"shadow": true
}
},
{
"name": "Enter: 선축적 2 → validated, 4 decimals committed",
"status": "PASS",
"data": "property(scale, 2.0000)"
},
{
"name": "Escape: draft cancelled (2.0000 restored, no callback)",
"status": "PASS",
"data": "2.0000"
},
{
"name": "On(편집) 선가중치 compact: #0F0D0A",
"status": "PASS",
"data": {
"x": 97,
"y": 499.5,
"w": 43.03,
"h": 28,
"backgroundColor": "rgb(15, 13, 10)"
}
},
{
"name": "Invalid 선가중치 -1 (min 0): restored, no callback",
"status": "PASS",
"data": "0.25"
},
{
"name": "선가중치 0.5 committed",
"status": "PASS",
"data": "property(scale, 2.0000) → property(weight, 0.5)"
},
{
"name": "하이퍼링크 focus: no On surface (Figma has no On), editable",
"status": "PASS",
"data": {
"x": 97,
"y": 595.5,
"w": 200,
"h": 28,
"backgroundColor": "rgba(0, 0, 0, 0)",
"borderTopColor": "rgba(33, 29, 19, 0.4)"
}
},
{
"name": "하이퍼링크 commit via host callback",
"status": "PASS",
"data": "property(scale, 2.0000) → property(weight, 0.5) → property(link, http://a)"
},
{
"name": "재료: read-only, no On",
"status": "PASS",
"data": {
"x": 97,
"y": 659.5,
"w": 200,
"h": 28,
"backgroundColor": "rgba(0, 0, 0, 0)"
}
},
{
"name": "Layer On: #211D13 field, 234 wide list, right edges meet, starts at field bottom",
"status": "PASS",
"data": {
"f": {
"x": 97,
"y": 403.5,
"w": 200,
"h": 28,
"backgroundColor": "rgb(33, 29, 19)",
"borderTopColor": "rgba(33, 29, 19, 0.4)"
},
"d": {
"x": 63,
"y": 431.5,
"w": 234,
"h": 250
}
}
},
{
"name": "Layer list rows 30px, footer 40px, height = rows*30+40",
"status": "PASS",
"data": {
"rows": 7,
"row": 30,
"footer": 40,
"h": 250
}
},
{
"name": "Layer current row marked (0_Layer_Cludmark)",
"status": "PASS",
"data": null
},
{
"name": "Bulb toggle: callback only, list stays open, row not selected",
"status": "PASS",
"data": "property(scale, 2.0000) → property(weight, 0.5) → property(link, http://a) → layer.visible(Sample-Wall, true)"
},
{
"name": "Row select: property(layer, CC-D GNL), closes, field shows value",
"status": "PASS",
"data": "property(scale, 2.0000) → property(weight, 0.5) → property(link, http://a) → layer.visible(Sample-Wall, true) → property(layer, CC-D GNL)"
},
{
"name": "Close keeps the value and focus returns to the field",
"status": "PASS",
"data": null
},
{
"name": "다양함: text 다양함, no current row in list",
"status": "PASS",
"data": null
},
{
"name": "Escape closes the layer list; panel stays",
"status": "PASS",
"data": null
},
{
"name": "Host data: 다양함 → 단일 값 (0_Layer_Cludmark)",
"status": "PASS",
"data": "0_Layer_Cludmark"
},
{
"name": "External value change shown (CC-D GNL)",
"status": "PASS",
"data": null
},
{
"name": "Keyboard: ArrowDown opens + focuses list, Escape closes to trigger",
"status": "PASS",
"data": null
},
{
"name": "Outside click closes",
"status": "PASS",
"data": null
},
{
"name": "Line style On: #211D13, (ByL) #D4CBBD, 3 columns, right edges meet (or shifted to the 4px screen edge when no room)",
"status": "PASS",
"data": {
"f": {
"x": 97,
"y": 485.5,
"w": 200,
"h": 28,
"backgroundColor": "rgb(33, 29, 19)"
},
"d": {
"x": 4,
"y": 513.5,
"w": 471.19,
"h": 190
},
"cols": [
187.19,
142,
142
]
}
},
{
"name": "Line style drop 466 x 190 (type column grows only for wider font names)",
"status": "PASS",
"data": {
"w": 471.19,
"h": 190,
"cols": [
187.19,
142,
142
]
}
},
{
"name": "Weight column: callback only, stays open",
"status": "PASS",
"data": "property(scale, 2.0000) → property(weight, 0.5) → property(link, http://a) → layer.visible(Sample-Wall, true) → property(layer, CC-D GNL) → lineWeight(w-byblock)"
},
{
"name": "Line type select: property(line, CENTER), closes, preview = CENTER pattern (4 segments)",
"status": "PASS",
"data": {
"segs": 4
}
},
{
"name": "Figma sample 255,259,0 shown as host text, swatch from host",
"status": "PASS",
"data": null
},
{
"name": "Color On: dropdown 192 wide, left edges meet, RGB area #211D13 + divider",
"status": "PASS",
"data": {
"f": {
"x": 97,
"y": 435.5,
"w": 200,
"h": 28
},
"d": {
"x": 97,
"y": 463.5,
"w": 192,
"h": 158
},
"left": {
"x": 98,
"y": 436.5,
"w": 114,
"h": 26,
"backgroundColor": "rgb(33, 29, 19)",
"borderRightColor": "rgba(33, 29, 19, 0.4)"
}
}
},
{
"name": "Color dropdown height 158 (Figma)",
"status": "PASS",
"data": 158
},
{
"name": "ByBlock: callback, required single choice (ByBlock pressed, ByLayer not)",
"status": "PASS",
"data": null
},
{
"name": "Clicking the pressed mode is a no-op",
"status": "PASS",
"data": null
},
{
"name": "Chip: property(color, 241,4,4)",
"status": "PASS",
"data": "property(scale, 2.0000) → property(weight, 0.5) → property(link, http://a) → layer.visible(Sample-Wall, true) → property(layer, CC-D GNL) → lineWeight(w-byblock) → property(line, CENTER) → colorMode(byBlock) → property(color, 241,4,4)"
},
{
"name": "Out-of-range 255,259,0 rejected (no callback, restored)",
"status": "PASS",
"data": "241,4,4"
},
{
"name": "Valid RGB committed normalized (1,2,3)",
"status": "PASS",
"data": "property(scale, 2.0000) → property(weight, 0.5) → property(link, http://a) → layer.visible(Sample-Wall, true) → property(layer, CC-D GNL) → lineWeight(w-byblock) → property(line, CENTER) → colorMode(byBlock) → property(color, 241,4,4) → property(color, 1,2,3)"
},
{
"name": "btn_colorize: host callback, dropdown closes",
"status": "PASS",
"data": null
},
{
"name": "Field RGB 300,0,0 rejected",
"status": "PASS",
"data": "1,2,3"
},
{
"name": "Escape #1 cancels draft, dropdown still open",
"status": "PASS",
"data": null
},
{
"name": "Escape #2 closes the dropdown, panel stays",
"status": "PASS",
"data": null
},
{
"name": "ReadOnly 두께: no On; ReadOnly 레이어: no dropdown",
"status": "PASS",
"data": {
"x": 97,
"y": 647,
"w": 200,
"h": 28,
"backgroundColor": "rgba(0, 0, 0, 0)"
}
},
{
"name": "ReadOnly keeps Hover border",
"status": "PASS",
"data": null
},
{
"name": "Disabled 색상: no dropdown; Disabled 선축적: no hover border",
"status": "PASS",
"data": null
},
{
"name": "External value / unit props: 선축적 2.5000, 두께 cm",
"status": "PASS",
"data": null
},
{
"name": "Dynamic rows: added at the end, removed row gone, order kept",
"status": "PASS",
"data": [
"layer-mixed",
"layer",
"color",
"line",
"weight",
"scale",
"opacity",
"thickness",
"material",
"extra-10"
]
},
{
"name": "Without menus: line types from options only (1 column), no crash",
"status": "PASS",
"data": 1
},
{
"name": "Pinned Hover specimen uses the same border",
"status": "PASS",
"data": "rgba(33, 29, 19, 0.4)"
},
{
"name": "4 panel states: 314 x 256 / 361 / 658 / 754",
"status": "PASS",
"data": [
[
"none",
314,
256
],
[
"all",
314,
361
],
[
"circle",
314,
658
],
[
"expanded",
314,
754
]
]
},
{
"name": "Header-hosted panel: layer list attached; Escape closes list only",
"status": "PASS",
"data": {
"hosted": {
"right": 0,
"top": 0,
"panelOpen": true
},
"stillOpen": 1
}
},
{
"name": "no console / page errors",
"status": "PASS",
"data": []
}
],
"errors": []
}