docs(sw): AI rules, example E, tests and evidence for the popup / footer / header changes

AI documents (packages/sw/ai)
- SWPopupPropertyRow, SWSelect, SWSlider in the catalog, usage table,
  composition patterns and design rules; SWViewerSlider noted as SWSlider panel.
- Rule: the SWHeader layer / color dropdowns are header-only; popup layer /
  color / line style use SWPopupPropertyRow (property window pickers).
- Footer rules: gra-border-orange surfaces, Model / Layout text unchanged on
  hover, side button hover, vacant surface limited to the slot row.
- Header rules: measured More growing behavior (hysteresis fix A).
- Example E (custom popup) uses SWPopupPropertyRow, SWSelect and SWSlider
  instead of SWHeaderLayerMenu in the popup.

Tests (packages/sw/tests)
- New footer-popup-viewer-refinement.browser.mjs (47 checks: footer stories,
  hover / gradient / tab text / pocket, popup pickers vs property window rows,
  SWSlider, unit SWSelect parity, Popup B, header trace, viewer title art).
- integrated-popup / integrated-consumer: popup pickers and SWSelect instead of
  the header dropdown and the HM UI Select (same overlay / callback / Escape
  requirements).
- integrated-improvement: default sections skip the retired SW/Tool story
  ('tool' still runs by name); storybook-inventory / simplification record the
  retired footer IDs; theme-inheritance widths use sw-footer--full-footer.

Docs (docs/sw)
- sw-footer-popup-viewer-refinement-2026-10-20.md: causes, decisions (the
  first-pass "header dropdown in popup" change is marked withdrawn),
  verification and baseline failures; evidence footer-popup-viewer-refinement-qa
  (47/47). Footer mapping document updated for the removed sections.

Baseline failures (unchanged by this work): home-menu-integration 1,
storybook-unused-removal 5 (10-19 snapshot comparisons), range-cross-browser and
property-panel-comparison open stories retired on 2026-10-19.
This commit is contained in:
shkim4 committed 2026-10-20 15:20:27 +09:00
1 parent 126a35d60d
commit 454472d344
24 files changed
+1211 -52

No files matched your search

@@ -0,0 +1,782 @@
{
"date": "2026-10-20T05:51:47.090Z",
"checks": [
{
"n": "Footer: 기본 Footer / States removed, full-footer + figma-variants kept",
"ok": true,
"d": [
"sw-footer--full-footer",
"sw-footer--tool-groups",
"sw-footer--figma-variants",
"sw-footer--custom-content",
"sw-footer--responsive",
"sw-footer--parts"
]
},
{
"n": "Footer: full-footer keeps only 실제 Footer 조합 (3 sections removed)",
"ok": true,
"d": {
"sections": [
"실제 Footer 조합 (동작)"
],
"errors": []
}
},
{
"n": "Footer: one live footer, no Figma / reference image",
"ok": true,
"d": 1
},
{
"n": "Footer: category change keeps the command slot position",
"ok": true,
"d": {
"before": [
1389,
817,
12
],
"after": [
1389,
817,
12
]
}
},
{
"n": "Footer: 보조기능 전체보기 hover = both lines accent + orange ring, 74 × 71",
"ok": true,
"d": {
"title": "rgb(255, 92, 0)",
"sub": "rgb(255, 92, 0)",
"ring": "1",
"w": 74,
"h": 71
}
},
{
"n": "Footer: 명령어 전체보기 hover = both lines accent + orange ring, 74 × 71",
"ok": true,
"d": {
"title": "rgb(255, 92, 0)",
"sub": "rgb(255, 92, 0)",
"ring": "1",
"w": 74,
"h": 71
}
},
{
"n": "Footer: side button default unchanged (subtitle #F6F4F2, no ring)",
"ok": true,
"d": [
"rgb(246, 244, 242)",
"0"
]
},
{
"n": "Footer: category + hover = orange + (menu-add-hover, #FF5C00), 28px",
"ok": true,
"d": "url(\"data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'"
},
{
"n": "Footer: Layout + hover = gra-border-orange surface with the +, 24px",
"ok": true,
"d": "url(\"data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='28'%20height='12'%20viewBox='0%200%2028%20"
},
{
"n": "Footer: Model (selected) = gra-border-orange surface, black #161410 text without outline, 73 × 22",
"ok": true,
"d": {
"bg": "none",
"before": "linear-gradient(rgb(218, 104, 19) 8.52%, rgb(255, 187, 137) 37.93%, rgb(229, 105, 13) 71.85%, rgb(174, 54, 7) 92.77%)",
"color": "rgb(22, 20, 16)",
"size": "12px",
"weight": "400",
"shadow": "none",
"text": "220,40",
"w": 73,
"h": 22
}
},
{
"n": "Footer: Layout 02 hover = Model surface; text identical to Default (black, size, weight, place, box)",
"ok": true,
"d": {
"l02": {
"bg": "linear-gradient(rgb(218, 104, 19) 8.52%, rgb(255, 187, 137) 37.93%, rgb(229, 105, 13) 71.85%, rgb(174, 54, 7) 92.77%)",
"before": "none",
"color": "rgb(22, 20, 16)",
"size": "12px",
"weight": "400",
"shadow": "none",
"text": "80,40",
"w": 85,
"h": 22
},
"l02d": {
"bg": "none",
"before": "none",
"color": "rgb(22, 20, 16)",
"size": "12px",
"weight": "400",
"shadow": "none",
"text": "80,40",
"w": 85,
"h": 22
}
}
},
{
"n": "Footer: Layout 01 hover = Model surface (slanted); text identical to Default",
"ok": true,
"d": {
"l01": {
"bg": "none",
"before": "linear-gradient(rgb(218, 104, 19) 8.52%, rgb(255, 187, 137) 37.93%, rgb(229, 105, 13) 71.85%, rgb(174, 54, 7) 92.77%)",
"color": "rgb(22, 20, 16)",
"size": "12px",
"weight": "400",
"shadow": "none",
"text": "80,40",
"w": 97,
"h": 22
},
"l01d": {
"bg": "none",
"before": "url(\"data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='97'%20height='22'%20viewBox='0%200%2097%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='bg'%3e%3cg%20filter='url(%23filter0_i_0_83)'%3e%3cpath%20d='M13.6039%203.29463C15.1093%201.22467%2017.5143%200%2020.0738%200H93C95.2091%200%2097%201.79086%2097%204V22H0L13.6039%203.29463Z'%20fill='%23C3B79E'/%3e%3c/g%3e%3cpath%20d='M20.0742%200.5H93C94.933%200.5%2096.5%202.067%2096.5%204V21.5H0.981445L14.0078%203.58887C15.4191%201.64829%2017.6747%200.5%2020.0742%200.5Z'%20stroke='url(%23paint0_linear_0_83)'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_i_0_83'%20x='0'%20y='-3'%20width='97'%20height='25'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='-3'/%3e%3cfeGaussianBlur%20stdDeviation='2'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='arithmetic'%20k2='-1'%20k3='1'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.219608%200%200%200%200%200.188235%200%200%200%200%200.121569%200%200%200%200.25%200'/%3e%3cfeBlend%20mode='multiply'%20in2='shape'%20result='effect1_innerShadow_0_83'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_0_83'%20x1='56'%20y1='0'%20x2='56'%20y2='22'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0.05'/%3e%3cstop%20offset='1'%20stop-opacity='0.3'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e\")",
"color": "rgb(22, 20, 16)",
"size": "12px",
"weight": "400",
"shadow": "none",
"text": "80,40",
"w": 97,
"h": 22
}
}
},
{
"n": "Footer: Layout tabs return to their default look after hover",
"ok": true,
"d": {
"bg": "none",
"before": "url(\"data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='97'%20height='22'%20viewBox='0%200%2097%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='bg'%3e%3cg%20filter='url(%23filter0_i_0_83)'%3e%3cpath%20d='M13.6039%203.29463C15.1093%201.22467%2017.5143%200%2020.0738%200H93C95.2091%200%2097%201.79086%2097%204V22H0L13.6039%203.29463Z'%20fill='%23C3B79E'/%3e%3c/g%3e%3cpath%20d='M20.0742%200.5H93C94.933%200.5%2096.5%202.067%2096.5%204V21.5H0.981445L14.0078%203.58887C15.4191%201.64829%2017.6747%200.5%2020.0742%200.5Z'%20stroke='url(%23paint0_linear_0_83)'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_i_0_83'%20x='0'%20y='-3'%20width='97'%20height='25'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='-3'/%3e%3cfeGaussianBlur%20stdDeviation='2'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='arithmetic'%20k2='-1'%20k3='1'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.219608%200%200%200%200%200.188235%200%200%200%200%200.121569%200%200%200%200.25%200'/%3e%3cfeBlend%20mode='multiply'%20in2='shape'%20result='effect1_innerShadow_0_83'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_0_83'%20x1='56'%20y1='0'%20x2='56'%20y2='22'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0.05'/%3e%3cstop%20offset='1'%20stop-opacity='0.3'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e\")",
"color": "rgb(22, 20, 16)",
"size": "12px",
"weight": "400",
"shadow": "none",
"text": "80,40",
"w": 97,
"h": 22
}
},
{
"n": "Footer: category pocket surface is the same across the whole tab for 1st · 2nd · 3rd · 4th tab",
"ok": true,
"d": [
[
"도형",
"hm-sw-footer__group",
"hm-sw-footer__group",
"hm-sw-footer__group"
],
[
"수정",
"hm-sw-footer__group",
"hm-sw-footer__group",
"hm-sw-footer__group"
],
[
"편집",
"hm-sw-footer__group",
"hm-sw-footer__group",
"hm-sw-footer__group"
],
[
"문자",
"hm-sw-footer__group",
"hm-sw-footer__group",
"hm-sw-footer__group"
]
]
},
{
"n": "Footer: vacant surface covers the slot row only (46px)",
"ok": true,
"d": 46
},
{
"n": "Footer: a selected Layout keeps its own (brown) selected surface, distinct from hover",
"ok": true,
"d": [
"on",
"linear-gradient(0deg, rgb(124, 108, 76) 0.48%, rgb(124, 108, 76) 85.07%, rgb(166, 148, 111) 100%)"
]
},
{
"n": "Footer: aux Figma comparison lives in figma-variants (6 rows)",
"ok": true,
"d": []
},
{
"n": "Footer: responsive 860px row renders with an overflow ▲ control",
"ok": true,
"d": {
"panelOrder": "명령 더보기 (7개)",
"errors": []
}
},
{
"n": "Footer: 화면 폭 변화 keeps the 6 widths, 참고 좁은 화면 + Figma 기본 구성 removed",
"ok": true,
"d": [
"실제 조합 (바 안 명령창, command)"
]
},
{
"n": "Header: layer field keeps the header design (#F6F4F2, 38px, value 700)",
"ok": true,
"d": "rgb(246, 244, 242)|38px|rgb(246, 244, 242)|700"
},
{
"n": "Popup: 도면 설정 layer = 속성창 layer picker (value, trigger, label computed look)",
"ok": true,
"d": {
"a": "rgb(0, 0, 0),rgba(0, 0, 0, 0),none,rgba(0, 0, 0, 0),28px,14px,400,none / rgb(230, 4, 3),rgba(0, 0, 0, 0),none,rgb(230, 4, 3),26px,14px,400,none / rgb(0, 0, 0),rgba(0, 0, 0, 0),none,rgb(154, 146, 132),16px,14px,700,none / layer",
"b": "rgb(0, 0, 0),rgba(0, 0, 0, 0),none,rgba(0, 0, 0, 0),28px,14px,400,none / rgb(230, 4, 3),rgba(0, 0, 0, 0),none,rgb(230, 4, 3),26px,14px,400,none / rgb(0, 0, 0),rgba(0, 0, 0, 0),none,rgb(154, 146, 132),16px,14px,700,none / layer"
}
},
{
"n": "Popup: 도면 설정 color = 속성창 color picker (value, trigger, label computed look)",
"ok": true,
"d": {
"a": "rgb(0, 0, 0),rgba(0, 0, 0, 0),none,rgba(0, 0, 0, 0),28px,14px,400,none / rgb(230, 4, 3),rgba(0, 0, 0, 0),none,rgb(230, 4, 3),26px,14px,500,none / rgb(0, 0, 0),rgba(0, 0, 0, 0),none,rgb(154, 146, 132),16px,14px,700,none / color",
"b": "rgb(0, 0, 0),rgba(0, 0, 0, 0),none,rgba(0, 0, 0, 0),28px,14px,400,none / rgb(230, 4, 3),rgba(0, 0, 0, 0),none,rgb(230, 4, 3),26px,14px,500,none / rgb(0, 0, 0),rgba(0, 0, 0, 0),none,rgb(154, 146, 132),16px,14px,700,none / color"
}
},
{
"n": "Popup: no SWHeader field dropdown inside any popup",
"ok": true
},
{
"n": "Popup: layer picker opens (fixed overlay), selects and closes",
"ok": true,
"d": "Callback: layer=hatch"
},
{
"n": "Popup: color picker chip commits the RGB value",
"ok": true,
"d": "Callback: layer=hatch → color=0,0,255"
},
{
"n": "Popup: frame / title / close unchanged (3 popups in the main section)",
"ok": true
},
{
"n": "Slider: A = panel (18px, no property paint), B = property (16px, property paint), same fill",
"ok": true,
"d": [
{
"look": "panel",
"h": 18,
"fill": "0.4",
"paint": false,
"range": "#266651"
},
{
"look": "property",
"h": 16,
"fill": "0.4",
"paint": true,
"range": "#266651"
},
{
"look": "panel",
"h": 18,
"fill": "0.4",
"paint": false,
"range": "#266651"
}
]
},
{
"n": "Slider: one shared value; keyboard change on B commits through onValueCommit",
"ok": true,
"d": {
"log": "Callback: layer=hatch → color=0,0,255 → opacity(property)=50",
"afterB": [
"50",
"50",
"50"
]
}
},
{
"n": "Slider: appearance selection switches the look only",
"ok": true,
"d": "property"
},
{
"n": "Slider: disabled 40%",
"ok": true,
"d": {
"d": true,
"o": "0.4"
}
},
{
"n": "Slider: property window gauge keeps 86 × 16 and its paint",
"ok": true,
"d": [
86,
16,
true
]
},
{
"n": "Select: Popup 도면 설정 단위 = Viewer 축척 지정 단위 (default · hover · focus computed look)",
"ok": true,
"d": {
"ps": {
"d": "appearance=auto;height=28px;paddingLeft=8px;paddingRight=8px;borderTopWidth=1px;borderTopColor=rgb(148, 136, 113);borderTopStyle=solid;borderRadius=4px;backgroundColor=rgb(241, 236, 225);color=rgb(0, 0, 0);fontSize=12px;fontWeight=400;lineHeight=normal;outlineStyle=none;outlineColor=oklab(0.462622 -0.0726663 0.0150061 / 0.5);outlineWidth=3px;opacity=1;cursor=default;class=hm-sw-select;tag=SELECT",
"h": "appearance=auto;height=28px;paddingLeft=8px;paddingRight=8px;borderTopWidth=1px;borderTopColor=rgb(148, 136, 113);borderTopStyle=solid;borderRadius=4px;backgroundColor=rgb(241, 236, 225);color=rgb(0, 0, 0);fontSize=12px;fontWeight=400;lineHeight=normal;outlineStyle=none;outlineColor=oklab(0.462622 -0.0726663 0.0150061 / 0.5);outlineWidth=3px;opacity=1;cursor=default;class=hm-sw-select;tag=SELECT",
"f": "appearance=auto;height=28px;paddingLeft=8px;paddingRight=8px;borderTopWidth=1px;borderTopColor=rgb(148, 136, 113);borderTopStyle=solid;borderRadius=4px;backgroundColor=rgb(241, 236, 225);color=rgb(0, 0, 0);fontSize=12px;fontWeight=400;lineHeight=normal;outlineStyle=solid;outlineColor=rgb(166, 125, 3);outlineWidth=2px;opacity=1;cursor=default;class=hm-sw-select;tag=SELECT"
},
"vs": {
"d": "appearance=auto;height=28px;paddingLeft=8px;paddingRight=8px;borderTopWidth=1px;borderTopColor=rgb(148, 136, 113);borderTopStyle=solid;borderRadius=4px;backgroundColor=rgb(241, 236, 225);color=rgb(0, 0, 0);fontSize=12px;fontWeight=400;lineHeight=normal;outlineStyle=none;outlineColor=oklab(0.462622 -0.0726663 0.0150061 / 0.5);outlineWidth=3px;opacity=1;cursor=default;class=hm-sw-select;tag=SELECT",
"h": "appearance=auto;height=28px;paddingLeft=8px;paddingRight=8px;borderTopWidth=1px;borderTopColor=rgb(148, 136, 113);borderTopStyle=solid;borderRadius=4px;backgroundColor=rgb(241, 236, 225);color=rgb(0, 0, 0);fontSize=12px;fontWeight=400;lineHeight=normal;outlineStyle=none;outlineColor=oklab(0.462622 -0.0726663 0.0150061 / 0.5);outlineWidth=3px;opacity=1;cursor=default;class=hm-sw-select;tag=SELECT",
"f": "appearance=auto;height=28px;paddingLeft=8px;paddingRight=8px;borderTopWidth=1px;borderTopColor=rgb(148, 136, 113);borderTopStyle=solid;borderRadius=4px;backgroundColor=rgb(241, 236, 225);color=rgb(0, 0, 0);fontSize=12px;fontWeight=400;lineHeight=normal;outlineStyle=solid;outlineColor=rgb(166, 125, 3);outlineWidth=2px;opacity=1;cursor=default;class=hm-sw-select;tag=SELECT"
}
}
},
{
"n": "Select: options and selection kept (Popup mm/cm/m, Viewer mm/m), change events",
"ok": true,
"d": {
"popupOptions": [
"mm",
"cm",
"m"
],
"viewerOptions": [
"mm",
"m"
],
"popupPicked": [
true,
"m"
]
}
},
{
"n": "Header: Open returns once while growing 520 → 1080 and stays",
"ok": true,
"d": [
[
520,
0,
""
],
[
560,
0,
""
],
[
600,
1,
""
],
[
640,
1,
"actions"
],
[
680,
1,
"actions"
],
[
720,
1,
""
],
[
760,
1,
""
],
[
820,
1,
""
],
[
900,
1,
"color"
],
[
1080,
1,
"color"
]
]
},
{
"n": "Header: at 1920 every part is back and Open is shown",
"ok": true,
"d": [
[
1440,
1,
""
],
[
1920,
1,
""
]
]
},
{
"n": "Header: shrinking, Open moves into More first (1800) and stays there",
"ok": true,
"d": [
[
1800,
0,
"dimensionStyle"
],
[
1440,
0,
""
],
[
1080,
0,
""
],
[
900,
0,
""
],
[
640,
0,
""
],
[
520,
0,
""
]
]
},
{
"n": "Header: regrowing after a shrink, Open returns once and stays",
"ok": true,
"d": [
[
560,
0,
""
],
[
600,
1,
""
],
[
640,
1,
"actions"
],
[
680,
1,
"actions"
],
[
720,
1,
""
],
[
900,
1,
"color"
],
[
1080,
1,
"color"
],
[
1920,
1,
""
]
]
},
{
"n": "Popup B: same frame as Popup A",
"ok": true,
"d": [
"314|rgb(228, 219, 201)|rgb(166, 125, 3)|rgb(255, 198, 0)|700",
"314|rgb(228, 219, 201)|rgb(166, 125, 3)|rgb(255, 198, 0)|700"
]
},
{
"n": "Popup B: popup layer picker (no SWHeader field)",
"ok": true
},
{
"n": "Popup B: layer selection callback and field value",
"ok": true,
"d": "Callback: b.layer=dim"
},
{
"n": "Popup B: 375px, no page overflow and the popup inside the viewport",
"ok": true,
"d": {
"sw": 375,
"vw": 375,
"b": [
32,
343
]
}
},
{
"n": "Viewer: 250 × auto title art keeps 308px and paints from the left edge (no gap)",
"ok": true,
"d": {
"w": 250,
"h": 142,
"artW": 308,
"gap": 0
}
},
{
"n": "Viewer: 320 / 480 popups unchanged (no gap)",
"ok": true,
"d": [
{
"w": 250,
"h": 142,
"artW": 308,
"gap": 0
},
{
"w": 320,
"h": 420,
"artW": 308,
"gap": 0
},
{
"w": 480,
"h": 300,
"artW": 308,
"gap": 0
}
]
},
{
"n": "Viewer: 250 × auto collapses to the title bar and expands back to auto height",
"ok": true,
"d": {
"h0": 142,
"h1": 32
}
},
{
"n": "Viewer: 250 × auto drags by its title bar",
"ok": true,
"d": {
"dx": 60,
"dy": 30
}
},
{
"n": "Viewer: content variants (incl. 300px) title art has no gap",
"ok": true,
"d": [
{
"w": 314,
"h": 420,
"artW": 308,
"gap": 0
},
{
"w": 314,
"h": 420,
"artW": 308,
"gap": 0
},
{
"w": 300,
"h": 239,
"artW": 308,
"gap": 0
}
]
},
{
"n": "Viewer: SWViewerSlider = SWSlider panel with viewer tokens (#266651 / #e4dbc9)",
"ok": true,
"d": {
"cls": "hm-sw-slider hm-sw-viewer-slider",
"look": "panel",
"h": 18,
"range": "#266651",
"track": "#e4dbc9"
}
}
],
"report": {
"header": {
"grow": [
[
520,
0,
""
],
[
560,
0,
""
],
[
600,
1,
""
],
[
640,
1,
"actions"
],
[
680,
1,
"actions"
],
[
720,
1,
""
],
[
760,
1,
""
],
[
820,
1,
""
],
[
900,
1,
"color"
],
[
1080,
1,
"color"
]
],
"wide": [
[
1440,
1,
""
],
[
1920,
1,
""
]
],
"shrink": [
[
1800,
0,
"dimensionStyle"
],
[
1440,
0,
""
],
[
1080,
0,
""
],
[
900,
0,
""
],
[
640,
0,
""
],
[
520,
0,
""
]
],
"regrow": [
[
560,
0,
""
],
[
600,
1,
""
],
[
640,
1,
"actions"
],
[
680,
1,
"actions"
],
[
720,
1,
""
],
[
900,
1,
"color"
],
[
1080,
1,
"color"
],
[
1920,
1,
""
]
]
}
}
}