- Story page frame: H2 16/24/700 -> 12px -> divider -> 16px -> content, sections 28px apart;
StorySectionGrid keeps its 24px column gap
- Content indent (--sb-page-indent 16px, 12px at 640px and below): .sb-page-indent for information
blocks; group boards (StateBoard / CardBoard, data-sb-board) indented once per section block so
per-column boards keep their 24px gap
- Input / Select / Toggle Sizes grids take the same indent; field Labels unchanged
- Full-width Pattern previews (GNB, LNB, Loading Screen, Page Header) opt out with indent={false}
- Foundation/폰트: Text Colors name / usage / HEX levels, Font Family and Font Weight token lines,
Specimens row spacing and indent; specimen values unchanged
- Guideline and WORKING_CONTEXT updated
StoryPageHeader no longer shows the page title, kicker, description or the SW group notice; it renders only a visually hidden H1 with the Story title, so the preview keeps a page heading for screen readers while the first section starts at the top gutter (unchanged position).
- OrgChart verify-p8 / p9 / p9-1 / p9-2-composition wait for the first visible StoryPage content block and read the page H1 instead of .sb-page-title; existing expectations are unchanged.
- SW overview browser test clicks the page gutter as its outside-click target.
- Drop the unused .sb-page-description from the SW Storybook hide rules.
- Update the Storybook page frame rule in the project guideline.
Add nine component tokens declared on the outermost SW scope. Each
defaults to the token or literal it replaces, so the default look and
header theme inheritance are unchanged; setting one changes its
component alone.
- Viewer Header menus (logo menu, header dropdowns, More):
--hm-sw-viewer-header-menu-background / -border-color / -shadow /
-item-hover-background (default: --hm-sw-header-more-*)
- SWHeader K guide: --hm-sw-header-k-guide-border-color
(default var(--hm-sw-property-border)) / -background (#0e3c2e)
- Popup value color: --hm-sw-popup-value-color
(default var(--hm-sw-header-input-color)); the property bar keeps
the header token
- Footer command history scrollbar:
--hm-sw-footer-command-scrollbar-thumb (#574b30) / -track (transparent)
Footer focus ring, side shadow, shared text color and dividers stay
shared. Docs (DESIGN_RULES, AI_USAGE, VIEWER, header design spec) and
theme-inheritance section 1d updated.
- Adopt the official LNB desktop spec as package defaults: 240px column,
14px menu text, 48px 1-depth rows and 42px 2/3-depth rows, with new
item/subitem padding-block and profile min-height tokens.
- Match --hm-lnb-current-depth to the Storybook Manager selected item:
sampled soft inset falloff (left/top/bottom) and a fade over the last
quarter, keeping the concave corners and content join.
- Drop the size overrides from the LNB Story CSS and update the LNB, GNB
and Dashboard docs, AI guides and the theme verification baseline.
Replace the old Green Default #123328 and Dark steps in the component docs,
brand color steps, runtime theme contract, token guide, loading screen doc and
the @hm-design/ui AI design rules. check:ai-docs passes. Remaining references
elsewhere are left for the final documentation consistency pass.
- Manager LNB: 246px width, 16px brand title, 14px/700 menu and section
titles, depth1 48px / depth2+ 42px rows, 24px section gap
- Foundation: rename Color to HM Color (Story ID foundation-color--all kept),
remove Company Colors subtitle and the page-title bottom border
- Patterns/Layout/LNB: Storybook-only overrides in lnb.stories.css
(240px column, 212px min width, 14px menu, 48/42px rows, profile text,
group dividers); representative board dividers per section
- Sync story inventory and docs (brand-color-steps, lnb); shared package
defaults and tokens are unchanged
Add Foundation > Company Colors as a separate Storybook menu placed right
after Color. It shows the 7 affiliates and 14 colors from the existing
companyColorPresets (main first, then secondary) with the Color chip styles
and the Default emphasis reused for the main color. Theme tokens, public API
and the existing Color story are unchanged.
- Foundation sort order: Color, Company Colors, Typography, Layout
- Company chip width rule scoped to the company rows
- Document the menu in brand-color-steps.md
- Add the new story to the Story Inventory records
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.
When no official public icon export covers a requested icon, the AI guides now
require asking the user first: approval to use the Storybook icon or an SVG asset
(3-A), or an asset / replacement choice when HMDesign has none (3-B). Creating,
copying, replacing or finally omitting the icon before the answer is not allowed.
Consumer-project use approval is kept separate from official package export
registration. AI_GUIDE shared copies synced.
- 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 53s
- sw-header-usage: 3-column Property Panel comparison and the Overview
panel clamped to the preview Stage (no Stage scrollbar)
- center-graphic README: CompactFacilityConnection segmentShape and the
AdministrativeLabel trailing letter-spacing fix
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 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.
Drop page / section descriptions, state notes and repeated captions from
the representative Stories of 44 components, the Patterns, Center
Graphic and OrgChart pages. Value readouts, spec lists and captions hide
only on the representative page; hidden verification Stories keep them.
Tabs Default API and the Filter Bar draft / applied counts move to the
hidden DefaultApi and DraftApplied Stories; Center Overview is hidden
with its direct URL kept. Story IDs are unchanged.
Align the component, pattern and OrgChart docs with the pages, point the
quality reference check at the DraftApplied Story, and make the P8
styles check expect no section header on the preview-only Expanded page.
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 59s
Remove the data, layout, interaction and employee-popup setting panels
from the Expanded OrgChart Story. The chart now renders a fixed sample
(7 companies x 20, TB, all expanded, collapse/zoom/pan on, Drag & Drop
off, HM Dialog) right under the page title. Story ID, OrgChart packages
and public API are unchanged.
Align the Story browser checks (P7, P8, P9, P9.2-P9.5, geometry, popup
parity, hierarchy, HM Story) with the preview: setting-only scenarios
are removed, chart rendering, collapse, Zoom/Pan/Fit and HM Dialog checks
run on the fixed state. Move/Drag & Drop coverage stays in the Vanilla
Core checks (verify-p9-3-core, verify-p9-4-core).
Verified: tsc, test:guard 94/94, node --check on 11 scripts, changed
browser sections PASS. Pre-existing P7 story-menu, P8 Department
long-name, P9 Expanded tb/runner failures remain separate issues.
verify-p9-5-popup-parity was not run (needs the Vanilla example server).
Deploy Storybook / deploy (push) Successful in 54s
- Expanded OrgChart: the chart moves right under the page title; data, layout
and interaction settings stay below it. Setting notes, section descriptions,
hidden legends and the Drag & Drop ON/OFF text are removed; the example
counts stay only as a hidden data hook for the OrgChart browser checks, and
the pending note shows only while the employee count differs.
- Tabs: drop the text-only Do / Don't section (rules live in tabs.md §16).
- Button: the representative page hides the Brand / Standard state notes
(story-only showNote); the hidden States Stories keep them.
- Report: the follow-up simplification and its verification.
Drop the category kicker from the 83 sidebar Stories (kicker is now optional;
hidden verification Stories keep it) and shorten or remove repeated, obvious
or internal page/section descriptions. Required specs, limits, virtual-data
and undecided-value notices stay. Story IDs, exports, fixtures, shared state
notes and package code are unchanged. Record: docs/reports/storybook-ui-simplification-2026-10-22.md
shkim4