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.
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.
The merged Settings Popup Story (sw-viewer--content-variants) was 870px tall,
so a full-page capture resized the viewport and the live Properties values
moved (theme-inheritance regression, control run changed the same 9 elements).
The frame is 760px again with Options at the right and the scale popup under
Properties; the four popups do not overlap at the 1200px Storybook column.
VIEWER.md now names the Story SW/Viewer > Settings Popup (was Popup Content
Variants). No component or public API change.
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.
SW AI usage / design rules / composition / viewer docs, example J and the
shared AI_GUIDE (synced to every package with sync:ai-docs) state the
Noto Sans KR default and the 2026-10-20 weight scope.
Chromium and Firefox browser tests (hover position, field text, ellipsis and
tooltip), AI docs and guide, report with the open Firefox Continuous 0.6px
issue and the Figma difference of the home menu hover.
- Common AI_GUIDE (synced copies in ui / sw / org-chart / org-chart-react ai/): mixed-use rule 1 adds the font split
(SW = Dotum, Web = Noto Sans KR, OrgChart keeps its own) and forbids copying one package's font into another area.
- SW AI_USAGE / DESIGN_RULES / VIEWER / COMPOSITION_PATTERNS / Example J: Dotum is the default (no "approval pending"),
SW screens use SWTheme and SW tokens, no Web font copy, synthesized-bold width note; example override = Malgun Gothic.
- README: SW default Dotum, Web default Noto Sans KR.
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
Port the uncommitted HMDesign-SW-Viewer change: SWPopup, SWViewerPanel and
the property window share .hm-sw-property__body, so the body and any
scrolling area inside it now use a thin #9A9284 / #E0DACE scrollbar
(--hm-sw-popup-scrollbar-thumb / -track). Document it in DESIGN_RULES.
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).
Brings SW viewer mode (SWViewerHeader, SWViewerMenu, SWViewerPanel and panel controls,
ai/VIEWER.md, example H) onto the packaged AI guides. ai/AI_USAGE.md keeps both the
shared-guide link and the viewer row.
- 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
- A: SWViewerIcon draws the SWHeader black outline as SVG stroke on a copy behind the icon (no CSS filter)
- B: SWViewerPanel renders the common SWPopup frame (same DOM / CSS) and adds drag, corner resize,
collapse, bounds and modal; SWPopup gains optional titleActions / footer; title art spans any width
- C: shared Story canvas grid (--sw-story-canvas) behind the SW Header work area and dropdown room
- D: SWViewerButton tone="green" for 전체 켜기 / 전체 끄기: default kept, hover = primary (확인) hover
token, pressed = primary face
- AI guide, verification scripts (76 checks, element regression) and evidence updated
- SWViewerHeader: data-driven viewer menu (button / toggle / menu / tabs / switch / custom), More by
collapseBelow, trailing slot, onCommand; SWHeader logo props with no default logo
- SWViewerMenu: dropdown, check / radio, multi-level submenu, context menu at a point
- SWViewerPanel: viewer popup frame with free children / footer, drag, corner resize, collapse, modal
- Panel controls: SWViewerSection / Field / Hint / Switch / Slider / Input / Button / Badge / Status
- SWHeader black text outline tokens on viewer text, matching icon outline (drop-shadow)
- Storybook SW/Viewer stories; remove SW/Tool story (SW/Popup kept)
- AI guide ai/VIEWER.md, example H, verification scripts and evidence
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
