feat(sw): refine headers, status label, popups and AI guide rules
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
This commit is contained in:
shkim4 committed 2026-10-23 18:18:17 +09:00
1 parent 325ec25e37
commit db03e155dd
19 files changed
+190 -119

No files matched your search

+2 -39
View File
@@ -1,7 +1,7 @@
import { useRef, useState, type CSSProperties, type ReactNode } from "react"
import { useRef, useState, type ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import {
SWHeader, SWHeaderWindowControls, SWTheme, SWViewerButton, SWViewerHeader, SWViewerHint, SWViewerMenu, SWViewerPanel, SWViewerSection,
SWHeader, SWHeaderWindowControls, SWViewerButton, SWViewerHeader, SWViewerHint, SWViewerMenu, SWViewerPanel, SWViewerSection,
type SWViewerHeaderGroup, type SWViewerMenuEntry,
} from "@hm-design/sw"
import "@hm-design/sw/styles.css"
@@ -175,43 +175,6 @@ export const States: Story = {
},
}
// 2026-10-23 Figma 7652:40344: the Model / Layout tabs alone, each selected state, Disabled and a color token override
// (CSS variables on SWTheme, as a consuming program sets them). Hover / Focus: point at or Tab to a button.
function TabsRow({ initial, disabled = false, style }: { initial: string; disabled?: boolean; style?: CSSProperties }) {
const [value, setValue] = useState(initial)
const groups: SWViewerHeaderGroup[] = [{
id: "space", label: "도면 공간", surface: "field", items: [
{ type: "tabs", id: "space", label: "모델과 배치 선택", value, disabled, onValueChange: setValue, options: [{ value: "model", label: "Model", count: 17377 }, { value: "layout", label: "Layout", count: 7377 }] },
],
}]
const header = <SWViewerHeader documentTitle="Model Layout.dwg" groups={groups} />
// Overrides go on the outermost SW scope (SWTheme), where the package declares the tokens.
return <div className="sw-story-scroller" data-tabs-case={initial + (disabled ? "-disabled" : style ? "-override" : "")}><div style={{ width: 1440 }}>{style ? <SWTheme style={style}>{header}</SWTheme> : header}</div></div>
}
const TAB_OVERRIDE = {
"--hm-sw-viewer-tabs-outline-color": "#4a7fd0",
"--hm-sw-viewer-tabs-glow-color": "rgba(74, 127, 208, 0.6)",
"--hm-sw-viewer-tab-gradient": "linear-gradient(180deg, #0b1830, #16305c 50%, #0b1830)",
"--hm-sw-viewer-tab-active-border": "linear-gradient(180deg, #b35f00, #ffb347 40%, #b35f00)",
"--hm-sw-viewer-tab-active-text": "#ffb347",
"--hm-sw-viewer-tab-inactive-border": "linear-gradient(#3d6bb3, #3d6bb3)",
"--hm-sw-viewer-tab-inactive-text": "#dbe7ff",
"--hm-sw-viewer-tab-highlight-color": "#5b8fe0",
} as CSSProperties
export const ModelLayoutTabs: Story = {
name: "Model / Layout",
render: () => (
<StoryPage>
<StoryPageHeader title="SW Viewer — Model / Layout" />
<StorySection title="Model 선택"><TabsRow initial="model" /></StorySection>
<StorySection title="Layout 선택"><TabsRow initial="layout" /></StorySection>
<StorySection title="Disabled"><TabsRow initial="model" disabled /></StorySection>
<StorySection title="색상 토큰 Override (--hm-sw-viewer-tab(s)-*)"><TabsRow initial="model" style={TAB_OVERRIDE} /></StorySection>
</StoryPage>
),
}
const MENU_ENTRIES: SWViewerMenuEntry[] = [
{ type: "label", id: "l-file", label: "파일" },
{ type: "item", id: "open", label: "파일 열기", icon: <FolderOpen size={16} />, shortcut: "Ctrl+O" },