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 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).
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.
- R1 sw COMPONENT_CATALOG §9: SWViewerHeaderButton is 32 x 48 in the trailing strip, 32 x 40 inside custom items
- R2 sw COMPOSITION_PATTERNS §7: open icon has only its own black outline, no frame border or face
- R3 sw VIEWER §2: open icon area 16 x 16 and button padding 0 12px 0 24px
- R4 docs/ai/MAINTAINING §1: sw ai files incl. FOOTER.md and examples A-J (G, I)
- R5 docs/ai/AI_GUIDE: center-graphic entries /reference and /style.css, synced to 4 package copies
- AI_USAGE.md §0.4: viewer hover changes only text and icon to #FFC600 (no #266651 face)
- AI_USAGE.md §0.2: file open is the onDocumentOpen button next to the logo, samples are documents
- COMPONENT_CATALOG.md §9: SWViewerHeader open button position, logoMenu marked compatibility only
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.
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.
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.
- Merge SW / Home Menu Stories into SW / Header (sidebar: Home Menu; others verification-tagged)
- Home On: logo hover ring and header top/bottom #5F4B0F lines while the menu is open
- Measured More in SWHeader; home menu narrow widths use a More (...) section with a grouped
text menu instead of horizontal scroll, placed right after the last visible section
- Action tiles no longer stay on after a click; 최근파일 stays Active only while its list is open
- More dropdown and recent files list never open together; list top joins the accent line
- Recent files preview falls back left / over the list at narrow widths (390px)
- Update Storybook, browser tests, docs, AI guides and QA evidence
Integrate the SW home (logo) menu into SWHeader for SW general mode only.
SW viewer mode code and stories are unchanged.
- Resolve conflicts: keep both sw-home-menu and sw-viewer exports;
renumber AI docs (catalog viewer 8->9, patterns home menu 7->8,
design rules home menu 11->12)
- SWHeader: start the home menu after the file name when it sits
inside controls, so the file name stays visible
- AI guides: mark home menu as general-mode only; forbid it in viewer
mode (AI_USAGE, catalog, design rules, patterns, VIEWER.md, AI_GUIDE)
- Tests: ignore wildcard identifiers in ai-docs check; update expected
Storybook SW titles (SW/Tool removed, SW/Viewer added)
- Add merge QA report docs/sw/sw-home-menu-merge-2026-10-19.md
With anchorRef the frame renders visibility:hidden until useSWHeaderOverlay
places it, and the focus effect ran in that same commit, so focus() on the
hidden element was ignored. Focus now runs once the frame is placed; the
previous element is still captured first, so Escape / close return focus.
Align the SWPopup autoFocus default doc (true with anchorRef) and catalog.
(cherry picked from commit 65bc0dbd5df059ead06f10a3f95f2bd2734fbf2f)
- Usage types are now Web / SW (general mode, viewer mode) / OrgChart / mixed.
Shared AI_GUIDE step 1 asks for the SW mode only when the request or the
project setting (HMDesign 사용 유형: SW 일반 | SW 뷰어) leaves it open;
examples B0/B1/B2 cover "HMDesign SW로 화면을 만들어 주세요", general and viewer.
- Missing-component handling in three steps (reuse in the chosen type/mode ->
build with that mode's tokens -> HMDesign-consistent style, reported as
"AI 구성 값 — 디자인 확인 필요"), plus SW general/viewer separation rules.
- sw/ai: AI_USAGE §0 mode selection, catalog §8 lists all 33 SWViewer* exports,
DESIGN_RULES §11 viewer tokens, PATTERNS 7 viewer composition; examples B/F
marked as general mode. ui/ai and org-chart/ai aligned with the new types.
- AGENTS_SNIPPET, AGENTS.md and MAINTAINING updated; copies synced.
- scripts/ai-docs.mjs: shared-copy check ignores CRLF/LF (core.autocrlf=true
checks out packages/sw as LF and the rest as CRLF).
- Verification record updated (code samples typechecked, built and rendered).
- Shared entry point docs/ai/AI_GUIDE.md (type selection Web / SW / OrgChart / mixed,
steps 1-7, package style separation, report format, examples A-D) and
AGENTS_SNIPPET.md, copied into every package ai/ folder
- New ai/ docs for @hm-design/ui and @hm-design/org-chart (+ org-chart-react pointer):
AI_USAGE, COMPONENT_CATALOG, DESIGN_RULES, COMPOSITION_PATTERNS
- SW ai/ linked to the shared guide; catalog lists every Props type explicitly
- "ai" added to package files of ui, org-chart, org-chart-react
- scripts/ai-docs.mjs: sync:ai-docs / check:ai-docs (copies, files, catalog <-> exports, links)
- Maintenance guide and verification record under docs/ai
Combine Task A (e8409ef, SW 0.2.0 integrated improvement) with Task B
(396539d, Figma-based SWHomeMenu / SWHomeMenuSection / SWHomeMenuItem /
SWRecentFiles). Task B's 84 new files are taken unchanged except for the
public-import Storybook update and joining the popup Escape stack.
- Export the home menu from @hm-design/sw
- SWHeader homeMenu / homeMenuOpen / defaultHomeMenuOpen /
onHomeMenuOpenChange: hidden by default, the logo toggles it (onHomeClick
is not called while homeMenu is set), placed from the measured header,
closes with / closes the document and field dropdowns
- Logo aria-expanded / aria-controls; menu layer CSS (z-index 20)
- AI catalog / patterns / design rules, example G, README, usage guide
- Storybook SW/Home Menu uses @hm-design/sw; integration story
Verified: SW typecheck, tsc -b, SW build, Storybook build, AI docs 22/22,
28/28 existing SW shots pixel-identical, regression 96 PASS / 0 FAIL,
home menu checks 22/22. Not run: tarball consumer install.
SW package 0.2.0 integrated improvement (Task A, steps 1-8). All new props are
optional; existing SW Stories are pixel-identical to the previous build (28/28).
- Build reproducibility: dist text normalized to LF, dist/build-info.json
(commit, dirty, tool versions, no timestamp), packages/sw/.gitattributes
(eol=lf). LF checkouts give identical dist and tarball.
- SWHeader: documentOpenPlacement ("menu" default | "header": Open right of
the logo in the existing document-button look, reusing onDocumentOpen and
documentOpenLabel, no duplicate Open in the dropdown), leading slot,
hiddenControls sub-items documentNew / documentOpen / layerFreeze /
layerLock. Open moves into More on measured overflow (with hysteresis).
- showNew / showOpen (SWHeaderDocumentTitle), showFreeze / showLock (layer
menu, field, property window list).
- SWToolButton (text / pill / document) and SWToolGroup (radio selection),
reusing the existing toggle, pill and file-name looks.
- SWPopup / SWPopupSection / SWPopupRow on the shared property window frame;
SWHeaderPropertyPanel gains children, title, autoFocus and optional
selection / properties / groups. Escape stack for several popups.
- Field dropdowns inside a popup use the shared fixed overlay
(useSWFixedDropdownPosition), so the scrolling body no longer clips them.
- AI guide, examples E/F, README, Storybook (SW/Header/Options, SW/Tool,
SW/Popup) and verification record docs/sw/sw-integrated-improvement-2026-10-19.md.
- Regression scripts rescoped for the intended changes (unused-removal 81/81,
overview 52/54 with the two pre-existing historical assertions).
Known limitation (unresolved): tools / leading content (incl. SWToolGroup)
does not move into More. With a wide tool bar the configured fields shrink
instead; in Example F the document name and layer field reach 0px at 390px.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Ship an AI guide in the package (ai/: usage rules, component catalog,
design rules, composition patterns) via package.json files.
- Add examples A-D that import only public exports: default header,
viewer header, feature header, and a consumer-side search extension
that reuses SWHeaderInput and the public SW tokens.
- Add SW-only checks: docs/API consistency, tarball consumer project
(React 19 + TS + Vite typecheck/build) and a browser check (27/27).
- No runtime source or public API change; README gains a pointer section.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
shkim4
