The lit middle group overlay started at the group top, so its dark top band was about twice as thick as the first / last group face. It now starts 4.95px above the group like that face and runs to the bottom edge.
With appearance="multi" and all window controls hidden, the tool group is the last
child of the window area; give it the same 5px right margin as its left margin.
The existing 2px margin stays whenever a window button follows. default and other
headers are unchanged.
- SWProcessHeader appearance="multi": the process base and both end
covers meet the file name and the window area with right angles
(border-radius 0, multi block only). default keeps the Strana top
corners 6 / covers 5; step tabs, arrows, colors and sizes unchanged
- DESIGN_RULES §14 and Step Header spec §9.2 record the multi-only rule
- process-header-states.check.mjs: default 6 / 5 kept, multi 0 (17/17);
build:sw and check:ai-docs pass, Storybook zoom shows square multi ends
- AI_GUIDE stage 5 "Header 전용 스타일의 적용 범위": header-only styles stay
in the header (SW SWHeader / SWProcessHeader / SWViewerHeader, Web GNB /
LNBMobileHeader / DashboardHeader); no header CSS or tokens on body UI,
no global overrides, layout-only joins, package-shared tokens unchanged,
whole-screen use only on explicit request. Synced to the 4 package
copies; referenced from stage 6, SW and Web AI_USAGE §3
- SWProcessHeader: with documentTitle "" the file name keeps #AEDBCC on
hover and a default cursor (root data-document-untitled). The button,
focus and onDocumentClick are kept; a real file name keeps the yellow
hover and pointer. Visual vs. click difference recorded as a UX item
- Step enablement documented as implemented: only an explicit disabled
(step, group, process, header) turns steps off; project / file state
never does; selection is activeStepId + onStepSelect (also for host
previous / next); no activeStepId and empty groups described
- Regression check tests/process-header-states.check.mjs (15/15);
typecheck:sw, build:sw, check:ai-docs pass; public-api keeps its 3
existing failures, none new
- SWToolButton appearance="pill": a non-blank string children is also
the native title; an explicit title wins and title="" turns it off;
numbers, JSX and arrays are never converted. text / document keep
passing only the given title. Accessible name, DOM and classes unchanged
- DESIGN_RULES §15: Header UX principles (ellipsis full text, icon-only
tool buttons, print class shared by pill, font-dependent widths, scope)
- Reference them from DESIGN_RULES §3·§9, COMPONENT_CATALOG §4·§11,
AI_USAGE §5.4, SW Header spec §17 and Step Header spec §12
- SWProcessHeader logoText: at least 58px and as wide as the text,
instead of a fixed 58px place that cut longer words (home >= 106px)
- Align JSDoc (SWHeader, SWViewerHeader, SWProcessHeader) and docs with
the content-width logo slot: DESIGN_RULES §1 common rule and §14,
COMPONENT_CATALOG, VIEWER.md, SW Header / Step Header specs
- No prop or public API change
Deploy Storybook / deploy (push) Successful in 1m13s
The command group and the more panel 1px border now use the same gradient as
the side and auxiliary buttons (--hm-sw-footer-group-border), replacing the
solid #886D35 token --hm-sw-footer-group-border-color.
Deploy Storybook / deploy (push) Successful in 1m16s
- File name: clamp(80px, min(45cqw - 256px, 100cqw - 780px), 360px),
56px below 560px; 1280px and wider unchanged
- Model / Layout tabs narrow (name, then count ellipsized) down to the new
--hm-sw-viewer-tabs-min-width (48px) before anything moves into More;
the measurement counts them at that minimum once every icon step applies
- Switch items get an optional shortLabel shown below 560px (어두운 배경 ->
배경); counts hidden there
- More appears only below about 520px; viewer test and AI guides updated
- Property Panel compare page: from 1080px, none/all stacked in column 1,
circle and expanded side by side (2x2 and 1 column below)
- Overview Stage: the property panel is clamped to the Stage height so the
Stage gets no scrollbar; the panel body scrolls
- Viewer header file name: clamp(140px, calc(45cqw - 256px), 360px) so a
950px header shows no More; 1280px and wider unchanged
Deploy Storybook / deploy (push) Successful in 1m10s
- SW Header: the five field previews hide and return together in one
measured step; from 760 to 1920px the groups from 레이어 to 치수스타일
share the room left before 속성보기, above 1920px they keep the 1920
widths (controls bars and < 760px unchanged)
- SW Viewer Header Model / Layout: long names ellipsize in equal buttons
(minmax(0, 1fr), name counted at --hm-sw-viewer-tab-name-basis) so they
never change the box or the measured steps; green outer outline and its
tokens removed; 378px / 42px, text-shadow and state unchanged
- SWViewerStatus: the label keeps the width of its widest real state text
(idle keeps its icon slot), so a state change never moves the header;
with too little room it ellipsizes after the file name gives way
- Popups: body inset shadow removed, title SVG drop shadow removed, viewer
panel title icons use --hm-sw-viewer-panel-icon-color (#c7bda9)
- Storybook: SW/Viewer › Model / Layout story removed
- AI guide (docs/ai + package copies): design-only changes for every
component, content limits for Submodule consumers (Header excluded),
Submodule usage rules; VIEWER / DESIGN_RULES synced
- viewer.browser.mjs: explicit 1920 / 1440 labels and approved 1280
icon-only expectations
Deploy Storybook / deploy (push) Successful in 1m13s
- Model / Layout tabs follow Figma 7652:40344: gradient faces, gold / green
gradient borders, blurred outline, inner shadow and top gloss, with every
color in its own --hm-sw-viewer-tab(s)-* token (consumer-overridable)
- Box height matches the adjacent field group (42px, from the control height
token); padding 1px 1px 1.5px, button side padding 5px, 1px right margin
for a tabs-only first group; 378px max width, equal buttons and the
measured More steps are unchanged; existing text-shadow kept
- Storybook: SW/Viewer > Model / Layout story (states and token override);
Logo story listed before Responsive More
- AI docs (VIEWER.md, DESIGN_RULES.md) and viewer / text-weight test
expectations updated
Deploy Storybook / deploy (push) Successful in 1m14s
The file-name and object-editing surfaces of SWHeader and SWViewerHeader
now draw the Figma gradient strokes (26:10374, 26:10375, read with the
Plugin API) through a transparent 1px border, so size, radius and text
position are unchanged. New tokens --hm-sw-header-document-border-gradient
and --hm-sw-header-object-border-gradient; the solid border colors stay
for compatibility and for the home, window area, print button and menus.
Update the SW Header design spec, the SW AI design rules and the example
layout CSS to the gradient borders.
Deploy Storybook / deploy (push) Successful in 1m11s
Viewer popup value inputs (number, text) take the property window field: transparent
1px border, radius 2, 7px inset, 14px 500 #E60403; hover / editing border, #0F0D0A
editing face with the outlined value. A field unit (px/mm) sits inside the box and
turns white on the editing face. Layer search, sizes and layout unchanged.
Viewer header labels hide per iconOnlyBelow value instead of one by one: 레이어 /
설정 / 속성 together, 전체 보기 on its own; More collapse unchanged.
Verified in Storybook: Settings Popup editing / unit / gauge sync; Responsive More
at 1920 / 1440 / 1280 / ~1100 / 950, shrink-and-grow restore, no overflow.
Not re-run: viewer browser tests.
Deploy Storybook / deploy (push) Successful in 1m11s
Labels with an icon now go icon-only one item at a time while the header lacks room (Open,
then the panel toggles, 전체 보기 last) instead of all together, and come back as the room
returns; collapse into More is unchanged.
Verified: Responsive More rows (1440 / 1280 keep 전체 보기 text, 950 / 860 icons, 760 / 520
More), shrink-and-grow restore, no overflow. Not re-run: viewer browser tests.
Deploy Storybook / deploy (push) Successful in 1m12s
- SWHeader (760-1799px): pictures hide one at a time by measured room (치수 아이콘, 선 그림,
글꼴명, 색상 칩, 레이어 상태 아이콘), then the file name narrows 310 -> 96px, then values
ellipsize; re-fit after web fonts load. 가중치/스케일 columns grow for longer values.
- Gauge style B / property window range: Figma controll_bar_new 633:77827 colors, ring and
shadow on the previous size (6px track, 14px thumb).
- Property window: editable text values (e.g. 하이퍼링크) get the editing face like numbers.
- SW Header › Logo: same cases, order and layout as SW Viewer › Logo (ID kept).
- Storybook inner: 80vw from 1920px. Responsive More 1920px rows use the page's usable width
(container sw-story-page) and span 1920px when there is room.
- SW/Popup sidebar: Property Panel only; Custom Content / Multiple Popups tagged verification.
- SW Viewer Settings Popup: 축척 지정 demo popup removed, frame 620px.
- Tests: inventory / simplification sidebar expectations, Popup-only unit select check.
Verified: check:ai-docs PASS, changed test syntax, headless Chrome checks of header compaction,
Responsive 1920 rows (1920 hidden / 2560, 3840 shown), Popup sidebar, Settings Popup.
Not verified: integrated-visual baselines (not updated), full regression, changed tests not run.
Deploy Storybook / deploy (push) Successful in 1m11s
- SW Viewer layer popup: search + 전체 레이어 fixed, only the list scrolls; the all-layers
control is the SWLayerVisibilityIcon bulb (role="switch"), one light #d2c8b4 line under it.
- Example H and the layer popup AI docs follow the bulb layout (VIEWER, DESIGN_RULES,
COMPONENT_CATALOG, COMPOSITION_PATTERNS, AI_GUIDE sync).
- Popup toggle switch (Figma toggle_btn_new 633:75188 / 633:75902): one sw.css face for the
HM UI Switch in SWPopup and SWViewerSwitch in SWViewerPanel; SW Header switches unchanged.
- SW Footer stories: no inner scrollers, fluid screens; workspace fits the viewport.
- SW Footer category tabs keep their positions when selected (divider slots kept, pocket
edges drawn over the neighbours' padding).
- Storybook .sb-page-inner: 1440px max from 1920px (was 80vw).
- SW Header equal-split change was cancelled; header CSS unchanged.
Verified: check:ai-docs PASS, viewer test 49 PASS (1 FAIL hover face + timeout pre-existing),
footer-design-review 21 PASS, browser checks of switch/footer/inner.
Not verified: footer-popup-viewer-refinement (needs full Storybook build), text-weight/hover
tests, Switch 37x16 AI docs (deferred).
Deploy Storybook / deploy (push) Successful in 1m10s
The transparent bottom border outside the scrollport of SWViewerPanel bodies
goes from 2px to 8px (padding-bottom stays 0), so scrolled layer, property and
option rows stop 8px above the frame border. Plain SWPopup keeps its 7px
bottom padding.
User-approved 2026-10-22 SW changes (CSS only, public API unchanged).
- Footer Model / Layout tab labels 700 in every state, letter-spacing -5%;
the name-edit input keeps 400.
- Slanted Layout tab and Model tab draw their SVG assets as 9-slice
border-images: 97px / 73px stay the minimum, the slant and corners keep
their size and only the flat middle grows with a longer label (max 12em,
then ellipsis, like the rounded tabs). Hover surfaces use a union mask of
the same asset (no mask-border), so Chromium and Firefox match. The
default width renders pixel-identical to the previous drawing; the 8px
slant / Model joint is unchanged.
- Viewer panel body: the 7px bottom padding (inside the scrollport) becomes
a 2px transparent bottom border, so scrolled rows stop 2px above the
frame border instead of running into it. SWPopup keeps its 7px.
- AI docs: DESIGN_RULES, AI_USAGE, FOOTER, VIEWER updated.
- Tests: text-weight and footer-design-review expect the 700 labels and read
the Model surface from the 9-slice ::before.
User-approved 2026-10-22 change to the SW Viewer layer popup.
- New public export SWLayerVisibilityIcon({ on }) + SWLayerVisibilityIconProps:
the SW Header layer bulb art reused as is (header design and behavior unchanged).
- Layer rows: eye (Eye / EyeOff) icon replaced by the bulb, 24 x 24 button kept.
- All layers: the 전체 켜기 / 전체 끄기 buttons replaced by one SWViewerField +
SWViewerSwitch on top. ON only when every layer is shown; a partial state reads
OFF and a click shows all. Derived from the hidden-layer state, so it stays synced.
- AI docs (VIEWER.md 4.1, catalog, design rules, composition, AI_GUIDE sync) and
example H follow the new rule, replacing the 2026-10-21 eye-icon rule.
- viewer.browser.mjs: layer popup checks moved to the bulb / switch behavior.
User request (2026-10-21): --hm-sw-viewer-button-height back to 34px (16px shrank
other viewer header buttons, e.g. 전체 보기); DESIGN_RULES token table matches.
The open icon keeps its 16 x 16 area (--hm-sw-viewer-icon-size, margin 0) and the open
padding 0 12px 0 24px. No Props, public .d.ts unchanged.
User requests (2026-10-21), CSS and docs only; no Props, public .d.ts unchanged.
- .hm-sw-viewer-header__open-icon: the 16 x 16 icon itself (--hm-sw-viewer-icon-size),
margin 0; the black icon outline (SWViewerIcon) is unchanged.
- .hm-sw-viewer-header__open padding 0 12px 0 24px.
- --hm-sw-viewer-button-height 34px -> 16px (user change, DESIGN_RULES token table
updated with it).
User requests (2026-10-21), CSS and docs only; no Props, public .d.ts unchanged.
- The viewer menu surface ends before the trailing strip like the SWHeader object area:
6px right radius (--hm-sw-header-object-radius), the same face and border, a 2px
header gap. Painted by the first strip segment over the empty group padding + gap
(4px more room below 1180px); heights, edges and button positions unchanged.
- --hm-sw-viewer-background: the Storybook viewer canvas solid #0a0a0b instead of the
gradient (viewer header only; SWHeader, Footer, Popup unchanged).
User-requested SW Viewer changes (2026-10-21); no new Props, public .d.ts unchanged.
- Layer popup visibility: AI docs (VIEWER §4.1, catalog, design rules, patterns,
AI_GUIDE) require the Eye / EyeOff icon button, never a switch; example H now
renders a real layer list with eye buttons; Storybook eye button gets the pointer.
- Viewer header hover: text and icon #FFC600, the #266651 hover face removed; size and
position unchanged. Status stays display only.
- Trailing strip: status, the trailing icon button (info / license) and SWHeader
minimize / close are full-height (48px) segments on the window-area face, no gap, top
and bottom on the object surface border; no line around the license button.
- File name: the measured steps use the file-name basis (header width), not the text
width, so a short and a long name give the same Open / file-name widths.
- File open icon: the black icon outline of every viewer icon (SWViewerIcon), no frame.
User request (2026-10-21): in the all-selection property popup only the object
list on the right (columns 3-4: 원 1, 광선 1, 곡선 10, 호 1, 폴리선 10, 폴리선 2,
문자 1) keeps the #FF5C00 text Hover and the pointer. The summary entries of
columns 1-2 (도형 10, 직선 10, 문자 1 …) stay plain text: no Hover color, no
pointer, no click (none was added). The area is decided by the entry's column,
not by its text; entries without a column keep the Hover as before.
- SWHeaderPropertyPanel: internal data-count-summary on columns 1-2 (no Props
or type change; public .d.ts byte-identical).
- sw.css: hover and pointer selectors skip [data-count-summary].
Count, order, layout (314 x 361) and editing are unchanged.
Documentation and comment-only changes (no component logic, Props or design change):
- VIEWER.md / AI_GUIDE / AI_USAGE / catalog / patterns: the two SWViewerHeader versions
(default, and minimize/close with SWHeaderWindowControls at the end of `trailing`);
the earlier "never mix SWHeader parts" rule now names this approved exception.
- collapseBelow / iconOnlyBelow (types.ts JSDoc, VIEWER.md, AI_GUIDE): measured steps,
the numbers only set the order, not pixel breakpoints. Viewer file open is the
onDocumentOpen button (logoMenu is compatibility only).
- COMPONENT_CATALOG / DESIGN_RULES: recent files show at most 3 rows; preview caption is
previewTitle or path + file name; body is the red no-preview sign on the brown panel;
preview / renderPreview are accepted but not rendered (JSDoc updated to match).
- packages/sw/README.md and sw-header-usage.md: current Story list and counts (40, 14
shown + 26 verification); 760px+ no-More condition; read-only Property Bar values as
<output>.
- SWHeader.tsx comment: titles are kept (not hidden) from 760px up.
- AI_GUIDE synced into the package ai/ copies (npm run sync:ai-docs).
User-approved design review (2026-10-21):
- SW Header: from 760px up nothing moves into More; the five menus stay with their
titles (titles and values ellipsize), file name shrinks to 96px. Open next to the
logo no longer blocks field shrinking above 760px (760/768 overflow fixed, also for
configured `controls` headers). Dropdown yellow ring inside the button, black seam.
- Property Bar values as read-only red text; property popup "=" labels, read-only
black values, per-entry hover with pointer.
- Home Menu recent files (3 rows, path + name caption, empty preview), Footer + slot
guide off by default, Viewer file list without icons, Storybook widths 1920-760.
- Tests: old More expectations (integrated-improvement, keyboard-dismiss,
footer-popup-viewer-refinement, storybook-cleanup-stage1) moved to the new rule;
functional checks kept.
SW Viewer Header (approved optional props, public export names unchanged at 170):
- SWViewerHeader: logoMenu, documents, activeDocumentId, onDocumentSelect,
onDocumentOpen, documentOpenLabel; measured responsive toggles (full ->
icons -> More) with the SWHeader More / file-list styling.
- SW AI guides, ExampleH, viewer/text-weight/theme-inheritance tests and the
logo-document-menu tests with their QA record.
SW Storybook cleanup (Story IDs and test fixtures kept):
- Sidebar: Overview -> "SW Header" (first), 전체 Footer -> "SW Footer",
Footer/Viewer responsive pages -> "Responsive More", Viewer content-variants
-> "Settings Popup" (merges the settings popup page).
- Hidden by the verification tag (direct URL kept): Header Dropdown,
Document Open, Interactive States, Document Dropdown, Hidden Sub Controls,
Home Menu standalone; Footer tool groups / custom content / parts;
SW/Theme; Viewer menu groups / item states / variable size / settings
panel / Header + Dropdown.
- Removed demo UI: Overview size and callback output (demo data and
selection only with &verification), Home Menu Figma node table and width
demo, Header Responsive More reduced to 1440 / 768 / 390, Popup reopen
button, property-panel comparison captions, Viewer context-menu demo
(&verification only).
- Tests: storybook-inventory records the hidden and renamed Stories;
overview / range-cross-browser / viewer open the demo controls with
&verification; integrated-popup reloads the Story instead of the reopen
button; dropdown-consolidation asserts Dropdown is hidden from the sidebar
and still opens by its direct URL.
- components/shared/roving-focus.ts (moveRovingFocus): the same Arrow / Home / End algorithm of SWFooter, SWToolGroup,
the SWViewerHeader tabs and SWHomeMenu; each caller passes its own keys, wrap and select behavior.
- components/shared/use-outside-pointer.ts (useOutsidePointerDown): the same pointerdown effect of the SWHeader
dropdowns, layer menu, document title and More. Escape, focus return and positioning stay in each component.
Both modules are internal: the package entry and the public declarations are unchanged.
Firefox computed the max-content of the flex line-values row 6.4px short and cut "Continuous" in the 284px field.
The row is now a grid with the same tracks (name minmax(28px, auto), weight 38px, scale 38px, gap 12px); Chromium
geometry and pixels are unchanged and the narrow-field ellipsis stays.
User request 2026-10-20: Composed Controls field values, footer side
titles and category tabs, viewer header file name / button labels /
Model-Layout tabs, recent-file path and preview title use 700. SWHeader
field values stay 400. The preview title gets the existing 14px outline
token; sizes, colors and widths are unchanged.
Withdraw the 2026-10-20 Dotum default (user decision). The SW font token
falls back to Malgun Gothic / Apple SD Gothic Neo; the Dotum-only 4px
padding of the drawing-mode cell is restored to 8px.
- --hm-sw-header-font-family: Dotum, "돋움", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif
(one token on the outermost SW scope; no font file, no per-component font-family). Web UI keeps Noto Sans KR.
- Header drawing-mode cell keeps its Figma 90px width; padding 8px -> 4px because Dotum has no bold face and the
synthesized 700 made "그리기모드" (77.8px) overflow the 74px content box.
Components (new public exports, existing APIs unchanged)
- SWPopupPropertyRow: the property window row (layer / color / line style
pickers, Figma 26:12250 / 26:12170) for SWPopup content. The SWHeader field
dropdowns stay header-only; Popup B and 도면 설정 now use the popup pickers.
- SWSelect: native panel select (28px, 1px #948871, radius 4, #F1ECE1, 12px),
used by Popup 도면 설정 단위 and Viewer 축척 지정 단위 (replaces the HM UI
Select there and the story-only .sw-viewer-story-select CSS).
- SWSlider: appearance "panel" (default, the gauge the popup used) or
"property" (the property window gauge), same value / events. Shares the
property gauge CSS; SWViewerSlider renders SWSlider panel with viewer tokens.
Footer
- --hm-sw-footer-gra-border-orange (Figma gra-border-orange; the aux selected
border token now references it): Model selected / hover, Layout hover and
Layout + hover surfaces; 보조기능 / 명령어 전체보기 hover lights both lines
and an orange ring; category + hover in #FF5C00 (menu-add-hover.svg).
- Model / Layout text stays the Default text (#161410, 12px, 400, no outline)
on hover and on the orange surface: only the surface changes.
- bg_vacant covers the slot row only: the open pocket of a category tab no
longer splits where it crosses the last command (e.g. 수정 with one command).
Viewer
- Panel title art keeps 308px (max-width: none against host img resets), so
panels under 312px (250 x auto, 300px) paint the title from the left edge.
Storybook
- SW/Footer: 기본 Footer (sw-footer--default) and States (sw-footer--states)
removed; full-footer keeps the live composition only, responsive keeps the
widths (reference / Figma image sections removed, image files kept); the aux
Figma comparison moved to the verification Story figma-variants.
- SW/Popup: unit SWSelect, SWSlider A / B section, popup pickers, Popup B state.
Hysteresis fix A for the Open placement regression introduced by 170a5c2.
- Growing: a part its breakpoint brings back (print / K, color, the property
block, line / text / dimension style, drawing mode) returns only when the
measured room is there; otherwise it stays in More. Default-layout print / K
are held through data-actions-held (window area keeps its 640px-tier state).
- Open that came back while growing is not pushed into More again by another
part; shrinking still moves Open first, and its return width follows the
narrowest width while it is collapsed.
- Open no longer waits for the parts still in More; the last part leaving More
takes the More button relief into account (measured, never painted).
- A part released at a width is not held again at that width, so the layout
passes always settle (fixes the maximum update depth error found on
sw-header--responsive-more during verification).
Trace 520 -> 1080 (data-width 520 frame): before
[[520,0],[560,0],[600,1],[640,0],[680,0],[720,1],[760,1],[820,1],[900,0],[1080,0]],
after [[520,0],[560,0],[600,1],[640,1],[680,1],[720,1],[760,1],[820,1],[900,1],[1080,1]].
shkim4