shkim4
db03e155dd
- 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
@hm-design/ui
React 19 UI components and the HM default theme. Published entrypoints contain ESM JavaScript and TypeScript declarations.
import { Button, Input } from "@hm-design/ui"
import { applyRuntimeTheme, resetRuntimeTheme } from "@hm-design/ui/theme"
With Tailwind CSS 4, import these styles in order in the application's CSS entrypoint:
@import "tailwindcss";
@import "@hm-design/ui/tailwind.css";
@import "@hm-design/ui/theme.css";
Process this entrypoint with the application's Tailwind CSS 4 integration. The package registers its compiled component classes as Tailwind sources and includes the required shadcn CSS without installing the shadcn CLI. React and React DOM are peer dependencies and are not bundled.
The default theme, Noto Sans KR font and its OFL license are included. External theme JSON and a Theme CDN are optional and are not included in this package. The runtime theme API remains available from @hm-design/ui/theme.
For Dashboard work status colors, explicitly load the optional status stylesheet after the theme:
@import "tailwindcss";
@import "@hm-design/ui/tailwind.css";
@import "@hm-design/ui/theme.css";
@import "@hm-design/ui/dashboard-status.css";
The status stylesheet defines only --hm-dashboard-status-active, --hm-dashboard-status-hold, --hm-dashboard-status-done and --hm-dashboard-status-issue. It does not automatically style Badge, buttons or data-status attributes. Consumers must map these variables to their existing component styles; the repository's docs/patterns/dashboard-layout.md shows the Badge mapping. done resolves the existing white palette token in each :root / [data-hm-theme] scope. The other colors preserve the approved Dashboard values and are not additional Runtime Theme tokens.
From the HMDesignSystem repository, run npm run build -w @hm-design/ui. npm pack runs this build automatically. Only dist/, ai/, this README and the package manifest are packed; source and Storybook files are excluded.
AI coding tools
AI coding tools should read ai/AI_GUIDE.md first (shared HMDesign entry point: choose Web / SW / OrgChart / mixed, then reuse → props → composition → minimal custom). Web-specific rules: ai/AI_USAGE.md, ai/COMPONENT_CATALOG.md, ai/DESIGN_RULES.md, ai/COMPOSITION_PATTERNS.md. To make a consumer project pick them up automatically, copy ai/AGENTS_SNIPPET.md into its root AGENTS.md (see AI_GUIDE.md §9).