Initial commit: HMDesignSystem baseline

.storybook/main.ts

@@ -0,0 +1,30 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+import { readFileSync } from "node:fs"
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: [],
+  // In dev, Vite serves both raw /themes JSON and JSON module imports (?import).
+  // Storybook's static middleware would intercept the imports with application/json.
+  staticDirs: (_, { configType }) => [
+    { from: "../public/fonts", to: "/fonts" },
+    ...(configType === "PRODUCTION" ? [{ from: "../themes", to: "/themes" }] : []),
+  ],
+  managerHead: (head) => `${head}<link rel="icon" href="data:," /><style id="hm-manager-style">${readFileSync(new URL("./manager.css", import.meta.url), "utf8")}</style>`,
+  // changeDetection off: no "new and modified stories" filter or status badges in the sidebar.
+  features: { sidebarOnboardingChecklist: false, changeDetection: false },
+  // Verification Stories (the same sections as a component's representative Story) stay out of the sidebar by default.
+  // They keep their Story IDs and stay reachable by direct URL and the sidebar tag filter.
+  tags: { verification: { defaultFilterSelection: "exclude" } },
+  // Storybook replaces vite.config's `server`, so watcher excludes go here.
+  // _local/ (gitignored work copies, ~20k files) would otherwise make the Vite watcher stall the dev server.
+  viteFinal: (config) => {
+    config.server ??= {}
+    config.server.watch = { ...config.server.watch, ignored: ["**/_local/**", "**/storybook-static/**"] }
+    return config
+  },
+  framework: "@storybook/react-vite",
+}
+
+export default config
+

.storybook/manager-navigation.js

@@ -0,0 +1,70 @@
+export function decorateHanmacNavigation(api) {
+  let frame;
+  const write = (node, key, value) => {
+    const next = String(value);
+    if (node.getAttribute(key) !== next) node.setAttribute(key, next);
+  };
+  const ancestors = (entry, refId) => {
+    const result = [];
+    const seen = new Set();
+    while (entry?.parent && !seen.has(entry.parent)) {
+      seen.add(entry.parent);
+      entry = api.resolveStory(entry.parent, refId);
+      if (entry) result.push(entry);
+    }
+    return result;
+  };
+  const decorate = () => {
+    frame = undefined;
+    const tree = document.querySelector('#storybook-explorer-tree');
+    if (!tree) return;
+    const selected = api.getCurrentStoryData();
+    const currentParents = new Set(ancestors(selected, selected?.refId).map((item) => item.id));
+    const rows = [...tree.querySelectorAll('[data-item-id]')];
+    const rendered = new Set(rows.map((row) => `${row.dataset.refId}:${row.dataset.itemId}`));
+    const groups = new Map();
+    let section = 0;
+    for (const row of rows) {
+      const refId = row.dataset.refId === 'storybook_internal' ? undefined : row.dataset.refId;
+      const entry = api.resolveStory(row.dataset.itemId, refId);
+      if (!entry) continue;
+      // Visual depth = rendered ancestors. A component with a single story of its own name is hoisted by Storybook (the
+      // story replaces it at depth 1), while the API still reports the story at depth 2.
+      write(row, 'data-hm-depth', ancestors(entry, refId).filter((item) => rendered.has(`${row.dataset.refId}:${item.id}`)).length);
+      write(row, 'data-hm-current-parent', currentParents.has(entry.id) && refId === selected?.refId);
+      if (entry.type === 'root') {
+        write(row, 'data-hm-section', section++);
+        continue;
+      }
+      // A single overlay covers the whole expanded branch, including deeper rows.
+      const branch = [...ancestors(entry, refId).reverse(), entry].find((item) => item.type !== 'root');
+      const owner = rows.find((candidate) => candidate.dataset.itemId === branch?.id && candidate.dataset.refId === row.dataset.refId);
+      const expanded = owner?.querySelector(':scope > button[aria-expanded="true"]');
+      write(row, 'data-hm-group', !!expanded);
+      write(row, 'data-hm-group-start', false);
+      write(row, 'data-hm-group-end', false);
+      if (expanded) {
+        const key = `${row.dataset.refId}:${branch.id}`;
+        if (!groups.has(key)) groups.set(key, []);
+        groups.get(key).push(row);
+      }
+    }
+    for (const members of groups.values()) {
+      write(members[0], 'data-hm-group-start', true);
+      write(members.at(-1), 'data-hm-group-end', true);
+    }
+  };
+  const schedule = () => { if (frame === undefined) frame = requestAnimationFrame(decorate); };
+  const observer = new MutationObserver(schedule);
+  observer.observe(document.body, {
+    childList: true, subtree: true, attributes: true,
+    attributeFilter: ['data-selected', 'aria-expanded', 'data-item-id'],
+  });
+  schedule();
+  window.addEventListener('pagehide', () => {
+    observer.disconnect();
+    if (frame !== undefined) cancelAnimationFrame(frame);
+  }, { once: true });
+}
+
+

.storybook/manager.css

@@ -0,0 +1,317 @@
+/* Initial Storybook manager mapping from ui_viz. Manager-only; not runtime theme tokens. */
+:root {
+  --font-family-base: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+  --hm-green-default: #123328;
+  --hm-green-light-1: #205241;
+  --hm-green-light-2: #266651;
+  --hm-green-light-3: #249473;
+  --hm-fg-on-green-secondary: #BDDFD4;
+  --color-fg-on-green-primary: #FFFFFF;
+  --color-action-primary: #123328;
+  --color-action-accent-on-green: #FFC600;
+  --color-bg-content: #F5F0E5;
+  --color-bg-surface: #FFFFFF;
+  --effect-text-border-color: rgba(0, 0, 0, .3);
+  --overlay-black-20: rgba(0, 0, 0, .2);
+  --overlay-black-30: rgba(0, 0, 0, .3);
+}
+/* Storybook 10.6 manager only. Source: docs/patterns/dashboard-composition.md §6.
+   The 18px join / inset geometry follows the current LNB specimen, not a new token. */
+@font-face {
+  font-family: 'Hanmac Manager Noto Sans KR';
+  src: url('/fonts/NotoSansKR-variable.ttf') format('truetype');
+  font-weight: 100 900;
+  font-display: swap;
+}
+/* Manager-only alias of the bundled Noto Sans KR asset, followed by the
+   Foundation fallback chain (typography.css) instead of a bare sans-serif. */
+:root {
+  --hm-manager-font: 'Hanmac Manager Noto Sans KR', var(--font-family-base);
+}
+
+/* The Storybook layout panel, outside the sidebar landmark, has a separate
+   border. Removing only the landmark's border leaves a one-device-pixel seam. */
+#root div:has(> div > #storybook-sidebar-region) {
+  border-right: 0;
+}
+
+#storybook-sidebar-region {
+  --hm-manager-join: 18px;
+  color: var(--color-fg-on-green-primary);
+  background: linear-gradient(90deg,
+    var(--hm-green-default) 0%, var(--hm-green-light-1) 30%,
+    var(--hm-green-light-2) 50%, var(--hm-green-light-3) 90%,
+    var(--hm-green-light-2) 100%);
+  border-right: 0;
+  font-family: var(--hm-manager-font);
+}
+#storybook-sidebar-region [data-radix-scroll-area-content] > div {
+  padding: 28px 0 28px 20px;
+}
+/* Keep the native draggable scrollbar in the unused left gutter. The selected
+   item must reach the content edge without a scroll thumb crossing its curves.
+   Radix supplies left/right inline, so only those two positions need priority. */
+#storybook-sidebar-region > [scrollbarsize] > [data-orientation='vertical'] {
+  left: 4px !important;
+  right: auto !important;
+  width: 6px;
+  padding: 0;
+}
+#storybook-sidebar-region > [scrollbarsize] > [data-orientation='vertical'] > div {
+  background: var(--hm-fg-on-green-secondary);
+}
+#storybook-sidebar-region .sidebar-header {
+  margin: 0 20px 24px 0;
+  padding: 0;
+  color: var(--color-fg-on-green-primary);
+}
+#storybook-sidebar-region .sidebar-header > div a {
+  color: var(--color-fg-on-green-primary);
+  font: 700 20px/30px var(--hm-manager-font);
+  white-space: normal;
+  /* §6 Text Border: brand title keeps the original 1px (no shadow). */
+  -webkit-text-stroke: 1px var(--effect-text-border-color);
+  paint-order: stroke fill;
+}
+#storybook-sidebar-region .sidebar-header button {
+  color: inherit;
+}
+#storybook-sidebar-region [role='search'] {
+  margin-right: 20px;
+  margin-bottom: 24px;
+}
+#storybook-sidebar-region .search-field {
+  min-height: 44px;
+  border: 1px solid var(--hm-fg-on-green-secondary);
+  border-radius: 4px;
+  background: var(--color-bg-surface);
+  color: var(--color-action-primary);
+}
+#storybook-explorer-searchfield {
+  color: var(--color-action-primary);
+  font-family: inherit;
+  font-size: 14px;
+}
+#storybook-sidebar-region [role='search'] > button {
+  color: var(--color-fg-on-green-primary);
+  background: transparent;
+  border-color: var(--hm-fg-on-green-secondary);
+  min-width: 32px;
+  height: 44px;
+}
+#storybook-sidebar-region [role='search'] > button:hover {
+  background: rgba(0, 0, 0, .10);
+}
+
+#storybook-explorer-tree .sidebar-subheading {
+  position: relative;
+  margin: 0;
+  padding: 0 20px 0 0;
+  min-height: 56px;
+  color: var(--hm-fg-on-green-secondary);
+}
+#storybook-explorer-tree .sidebar-subheading[data-hm-section]:not([data-hm-section='0']) {
+  margin-top: 40px;
+}
+#storybook-explorer-tree .sidebar-subheading[data-hm-section]:not([data-hm-section='0'])::before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  left: 0;
+  right: 20px;
+  height: 2px;
+  background: linear-gradient(var(--overlay-black-30) 0 50%, rgba(255,255,255,.4) 50% 100%);
+  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
+}
+#storybook-explorer-tree .sidebar-subheading > button {
+  min-height: 56px;
+  color: inherit;
+  font: 700 16px/28px var(--hm-manager-font);
+  letter-spacing: 0;
+  text-transform: none;
+}
+#storybook-explorer-tree .sidebar-item {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  min-height: 56px;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-fg-on-green-primary);
+}
+#storybook-explorer-tree .sidebar-item[data-hm-group='true'] {
+  background: var(--overlay-black-20);
+  box-shadow: inset 1px 0 var(--hm-green-light-2);
+}
+#storybook-explorer-tree .sidebar-item[data-hm-group-start='true'] {
+  border-radius: 8px 0 0 0;
+  box-shadow: inset 1px 1px var(--hm-green-light-2);
+}
+#storybook-explorer-tree .sidebar-item[data-hm-group-end='true'] {
+  border-radius: 0 0 0 8px;
+  padding-bottom: 8px;
+  box-shadow: inset 1px -1px var(--hm-green-light-2);
+}
+#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 56px;
+  height: auto;
+  width: 100%;
+  margin: 0;
+  padding: 14px 32px 14px 18px;
+  border: 0;
+  border-radius: 4px 0 0 4px;
+  background: transparent;
+  color: inherit;
+  font: 700 18px/28px var(--hm-manager-font);
+  text-align: left;
+  text-decoration: none;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+#storybook-explorer-tree .sidebar-item[data-hm-depth='2'] > :is(a[id], button[id]:not([data-testid])) {
+  margin-left: 32px;
+  width: calc(100% - 32px);
+}
+#storybook-explorer-tree .sidebar-item[data-hm-depth='3'] > :is(a[id], button[id]:not([data-testid])),
+#storybook-explorer-tree .sidebar-item[data-hm-depth='4'] > :is(a[id], button[id]:not([data-testid])) {
+  margin-left: 44px;
+  width: calc(100% - 44px);
+}
+#storybook-explorer-tree .hm-manager-label {
+  min-width: 0;
+  white-space: normal;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+  overflow: visible;
+  text-overflow: clip;
+}
+/* D-093 D-014 (§6 Text Border): non-selected labels, including hover and the
+   yellow current parent, use the specimen's 1.5px border plus lower shadow.
+   Thickness and offset are REVIEW VALUEs. Selected labels carry no effect. */
+#storybook-explorer-tree .sidebar-item[data-selected='false'] .hm-manager-label {
+  -webkit-text-stroke: 1.5px var(--effect-text-border-color);
+  paint-order: stroke fill;
+  text-shadow: 1px 2px 1px var(--effect-text-border-color);
+}
+/* The group chevron carries the same lower shadow (specimen .ref-sidebar-chevron). */
+#storybook-explorer-tree .sidebar-item[data-selected='false'] > button[id]:not([data-testid]) > div:first-child > div > svg {
+  filter: drop-shadow(1px 2px 1px var(--effect-text-border-color));
+}
+#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child {
+  position: static;
+  flex: 0 0 auto;
+  margin: 0;
+  gap: 8px;
+}
+/* Storybook 10.6.1: the leading wrapper has a direct svg[type] for every
+   menu type (group/component/story/docs), plus a nested untyped chevron
+   only on expandable rows. Remove type glyphs at every depth. */
+#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child > svg[type] {
+  display: none;
+}
+/* Leaves have no chevron. Remove the now-empty wrapper as a flex item so
+   neither its width nor the row's flex gap reserves an icon slot.
+   The existing depth margins and row padding still supply hierarchy indent. */
+#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child:has(> svg[type]):not(:has(> div > svg)) {
+  display: none;
+}
+/* First-depth leaves still sit inside their root label after losing the icon
+   slot. Deeper rows retain their existing 32px / 44px depth margins. */
+#storybook-explorer-tree .sidebar-item[data-hm-depth='1'] > :is(a[id], button[id]:not([data-testid])):has(> div:first-child > svg[type]):not(:has(> div:first-child > div > svg)) {
+  padding-left: 32px;
+}
+#storybook-explorer-tree .sidebar-item[data-hm-current-parent='true'],
+#storybook-explorer-tree .sidebar-subheading[data-hm-current-parent='true'] {
+  color: var(--color-action-accent-on-green);
+}
+#storybook-explorer-tree .sidebar-item[data-selected='false'] > :is(a[id], button[id]:not([data-testid])):hover {
+  background: rgba(0, 0, 0, .10);
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true'] > a[id] {
+  z-index: 1;
+  background: var(--color-bg-content);
+  color: var(--color-action-primary);
+  border-radius: 8px 0 0 8px;
+}
+/* Keep the keyboard skip link without reserving a 1px flex column.
+   That column exposed the green branch background at the selected item's end. */
+#storybook-explorer-tree .sidebar-item > a[href='#storybook-preview-wrapper'] {
+  position: absolute;
+  right: 0;
+  z-index: 4;
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true'] > a[id]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: inset 6px 0 8px -5px var(--overlay-black-30),
+    inset 0 3px 5px -3px var(--overlay-black-20),
+    inset 0 -2px 4px -3px var(--overlay-black-20);
+  mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true']::before,
+#storybook-explorer-tree .sidebar-item[data-selected='true']::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  width: var(--hm-manager-join);
+  height: var(--hm-manager-join);
+  z-index: 2;
+  pointer-events: none;
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true']::before {
+  bottom: 100%;
+  background: radial-gradient(circle at top left, transparent calc(var(--hm-manager-join) - .5px), var(--color-bg-content) var(--hm-manager-join));
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true']::after {
+  top: 100%;
+  background: radial-gradient(circle at bottom left, transparent calc(var(--hm-manager-join) - .5px), var(--color-bg-content) var(--hm-manager-join));
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true'][data-hm-group-end='true']::after {
+  top: calc(100% - 8px);
+}
+/* Auxiliary status/create actions are separate from selected row geometry.
+   Hide only these controls; the Story link and native group toggles stay intact. */
+#storybook-explorer-tree .sidebar-item[data-selected='true'] > :is([data-testid='tree-change-status-button'], [data-testid='context-menu']) {
+  display: none;
+}
+#storybook-explorer-tree [data-testid='context-menu'] {
+  color: inherit;
+  right: 4px;
+}
+/* Storybook gives utility buttons an opaque background and a 5px halo.
+   Keep their native behavior, with the same transparent / black-10% LNB states. */
+#storybook-explorer-tree :is([data-testid='context-menu'], .sidebar-subheading-action) {
+  background: transparent;
+  box-shadow: none;
+}
+#storybook-explorer-tree :is([data-testid='context-menu'], .sidebar-subheading-action):is(:hover, [aria-expanded='true']) {
+  background: rgba(0, 0, 0, .10);
+  box-shadow: none;
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true'] > [data-testid='context-menu'] {
+  z-index: 3;
+  color: var(--color-action-primary);
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true'] > [data-testid='context-menu'] svg {
+  color: var(--color-action-primary);
+}
+/* Keep the manager preview frame flush without consuming iframe width. */
+main:has(#storybook-preview-wrapper) {
+  border-left: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #storybook-sidebar-region * { scroll-behavior: auto; }
+}
+
+

.storybook/manager.js

@@ -0,0 +1,55 @@
+import { createElement } from 'react'
+import { addons } from 'storybook/manager-api'
+import { create } from 'storybook/theming'
+import { decorateHanmacNavigation } from './manager-navigation.js'
+
+// Match the measured Manager content background via its existing CSS variable.
+// Keep mobile navigation, addon tabs,
+// portalled menus and the preview iframe outside this toolbar scope.
+const toolbarStyle = document.createElement('style')
+toolbarStyle.id = 'hm-manager-toolbar-style'
+toolbarStyle.textContent = `
+  .sb-bar[data-testid="sb-preview-toolbar"] {
+    background: var(--color-bg-content);
+    color: #000000;
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"], label, span, p, svg) {
+    color: inherit;
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):hover {
+    background: rgba(0, 0, 0, 0.10);
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):is([aria-checked="true"], [aria-expanded="true"], [aria-selected="true"]) {
+    background: rgba(0, 0, 0, 0.20);
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):focus-visible {
+    outline-color: currentColor;
+  }
+`
+document.head.appendChild(toolbarStyle)
+
+addons.setConfig({
+  layout: {
+    showPanel: false,
+  },
+  theme: create({
+    base: 'light',
+    brandTitle: 'HM Design System',
+    brandUrl: './',
+    brandTarget: '_self',
+    fontBase: "'Hanmac Manager Noto Sans KR', 'Noto Sans KR', 'Malgun Gothic', sans-serif",
+    colorPrimary: '#123328',
+    colorSecondary: '#123328',
+    appBg: '#F5F0E5',
+    appContentBg: '#FFFFFF',
+    appPreviewBg: '#FFFFFF',
+    textColor: '#123328',
+    textInverseColor: '#FFFFFF',
+    barSelectedColor: '#123328',
+  }),
+  sidebar: {
+    renderLabel: (item) => createElement('span', { className: 'hm-manager-label' }, item.name),
+  },
+})
+
+addons.register('hm/manager-navigation-style', decorateHanmacNavigation)

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<!-- Match the manager favicon and avoid the browser's implicit /favicon.ico request. -->
+<link rel="icon" href="data:," />

.storybook/preview.tsx

@@ -0,0 +1,67 @@
+import type { Preview } from "@storybook/react-vite"
+import { MINIMAL_VIEWPORTS } from "storybook/viewport"
+import { Toaster } from "@hm-design/ui"
+import { ensurePseudoStates } from "./pseudo-states"
+import { DesignerThemePreview } from "../src/theme/designer-preview"
+import "../src/index.css"
+import "../src/hm-theme.css"
+
+const preview: Preview = {
+  parameters: {
+    layout: "centered",
+    viewport: {
+      options: {
+        // HM QA presets come first; keep Storybook's built-in choices available.
+        hmDesktop1280: { name: "HM Desktop · 1280", styles: { width: "1280px", height: "900px" }, type: "desktop" },
+        hmDesktop1024: { name: "HM Desktop Boundary · 1024", styles: { width: "1024px", height: "900px" }, type: "desktop" },
+        hmMobile1023: { name: "HM Mobile Boundary · 1023", styles: { width: "1023px", height: "900px" }, type: "mobile" },
+        hmMobile390: { name: "HM Mobile · 390", styles: { width: "390px", height: "844px" }, type: "mobile" },
+        ...MINIMAL_VIEWPORTS,
+      },
+    },
+    options: {
+      storySort: {
+        order: [
+          "Foundation",
+          ["Color", "Typography", "Layout"],
+          "Components",
+          [
+            "Form",
+            ["Button", "Input", "Textarea", "Select", "Checkbox", "Radio Group", "Switch", "Slider", "Toggle", "Toggle Group", "Label"],
+            "Navigation",
+            ["Tabs", "Breadcrumb", "Pagination", "Navigation Menu", "Menubar"],
+            "Overlay",
+            ["Dialog", "Alert Dialog", "Sheet", "Drawer", "Dropdown Menu", "Context Menu", "Popover", "Tooltip", "Hover Card"],
+            "Data & Display",
+            ["Card", "Table", "Badge", "Avatar", "Progress", "Skeleton", "Separator", "Aspect Ratio", "Carousel", "Scroll Area"],
+            "Disclosure",
+            ["Accordion", "Collapsible", "Resizable"],
+            "Search & Date",
+            ["Command", "Combobox", "Calendar", "Date Picker"],
+            "Feedback",
+            ["Alert", "Sonner"],
+          ],
+          "Patterns",
+          ["Data", ["Data Table", "Filter Bar"], "Layout", ["GNB", "LNB", "Dashboard Layout", "Loading Screen"]],
+          "Center Graphic",
+          "*",
+        ],
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      // Lets state Stories pin hover / pressed with data-sb-hover / data-sb-active.
+      ensurePseudoStates()
+      // One Toaster for every Story, the same way an app mounts it once at its root.
+      return (
+        <DesignerThemePreview enabled={!context.title.startsWith("Theme/Runtime Contract")}>
+          <Story />
+          <Toaster />
+        </DesignerThemePreview>
+      )
+    },
+  ],
+}
+
+export default preview

.storybook/pseudo-states.ts

@@ -0,0 +1,34 @@
+// Pins :hover and :active visuals for state Stories (Storybook only, never loaded by the app).
+// Every rule that uses :hover or :active is cloned right after itself with the pseudo-class swapped for a
+// data attribute, so cascade order and specificity stay the same. No declaration or value is authored here.
+const HOVER = "data-sb-hover"
+const ACTIVE = "data-sb-active"
+const mirrored = new WeakSet<CSSStyleSheet>()
+
+function mirror(list: CSSStyleSheet | CSSGroupingRule) {
+  for (let i = list.cssRules.length - 1; i >= 0; i--) {
+    const rule = list.cssRules[i]
+    if (rule instanceof CSSStyleRule) {
+      if (/:hover\b|:active\b/.test(rule.selectorText)) {
+        list.insertRule(
+          rule.cssText.replace(/:hover\b/g, `[${HOVER}]`).replace(/:active\b/g, `[${ACTIVE}]`),
+          i + 1,
+        )
+      }
+    } else if ("cssRules" in rule) {
+      mirror(rule as CSSGroupingRule)
+    }
+  }
+}
+
+export function ensurePseudoStates() {
+  for (const sheet of document.styleSheets) {
+    if (mirrored.has(sheet)) continue
+    mirrored.add(sheet)
+    try {
+      mirror(sheet)
+    } catch {
+      // Unreadable (cross-origin) sheet: nothing to mirror.
+    }
+  }
+}

.storybook/qa/LAN-PREVIEW-REPORT.md

@@ -0,0 +1,180 @@
+# HMDesignSystem Storybook LAN Preview
+
+Result: **PARTIAL** — same-host LAN Preview is READY. A second physical PC was unavailable, so cross-PC access and cross-PC HMR remain NOT_VERIFIED.
+
+TEMP_STORYBOOK_URL: http://10.13.37.164:6008/
+
+## 1. Worktree
+
+- Path: `D:\디자인시스템\HMDesignSystem-storybook`
+- Branch: `chore/storybook-cleanup`
+- HEAD: `6b4a39e4e9fef7cd706630ffc72b5e97e8696823`
+- Remote: `https://gitea.hmac.kr/b25027/HMDesign.git`
+- Track A Modified: **NO**
+- Track A remains clean on `main`, HEAD `4e2402e6cb3507c4bb5e58549004323db59b66a8`.
+
+## 2. Storybook Server
+
+- Installed binary: Storybook **10.6.1** from Track B node_modules; dependencies already existed, so npm ci was unnecessary.
+- Port: **6008**; Bind: **0.0.0.0**; Server: **RUNNING**
+- LAN listener PID at verification: **23804**
+- Command: `node node_modules/storybook/dist/bin/dispatcher.js dev -p 6008 --host 0.0.0.0 --no-open --disable-telemetry --exact-port`
+- Local: http://localhost:6008/
+- LAN: http://10.13.37.164:6008/
+- Verified current IPv4: **10.13.37.164** (Ethernet 3); this is a temporary LAN address, not a permanent URL.
+- The old LAN process was started on 6007 and had fallen back to 6008. Only that confirmed Track B LAN process was replaced with explicit 6008/exact-port operation. The existing localhost-only Track B process (PID 33604) was preserved; both addresses use the same worktree and matched 289 Story IDs.
+- package.json's official **6007** script was unchanged. Track A and other ports/processes were not stopped.
+- Server stdout/stderr are in ignored `.storybook/qa/lan-preview.*.log` files. PIDs are session observations, not durable shutdown instructions.
+
+## 3. LAN Verification
+
+- localhost: **PASS**, HTTP 200 and Button render
+- LAN IP Same Host: **PASS**, HTTP 200; manager, sidebar, preview, navigation and representative stories loaded
+- SECOND_PHYSICAL_PC: **NOT_VERIFIED**
+- HMR localhost: **PASS**
+- HMR LAN Same Host: **PASS**
+- HMR Second Physical PC: **NOT_VERIFIED**
+- A temporary visible `HM LAN HMR QA` paragraph was inserted into GNB All. Both origins displayed it without reload. Removal was also applied by HMR; the Story file was restored to its exact pre-probe SHA-256. No temporary probe remains.
+- Existing firewall policy was inspected: Public network profile, enabled firewall profiles and pre-existing inbound Node allow rules. Firewall rule additions: **NO**. Network profile changes: **NO**.
+
+## 4. Storybook Chrome
+
+- Top Bar: **#266651 PASS** (`rgb(38, 102, 81)`)
+- Toolbar icon/text: **#FFFFFF PASS** (all sampled button/SVG computed colors were white)
+- Bottom Panel: **DEFAULT_HIDDEN PASS**
+- Alt+A: **PASS**, panel opened with Controls/Actions/Interactions; hidden state restored afterward
+- Preview Rail: **0px PASS**, preview main border-left and padding-left measured 0px
+- Final browser viewport overrides were reset, and a LAN Dashboard tab remains available in Codex.
+
+## 5. Viewports
+
+Measured in Chrome, browser zoom 100%, Storybook zoom 100%, devicePixelRatio 1:
+
+- 1280: **PASS** — iframe / innerWidth 1280; innerHeight 900; GNB nav visible
+- 1024: **PASS** — iframe / innerWidth 1024; innerHeight 900; GNB nav visible; LNB column visible
+- 1023: **PASS** — iframe / innerWidth 1023; innerHeight 900; GNB nav hidden; LNB column hidden and Local mobile bar visible
+- 390: **PASS** — iframe / innerWidth 390; innerHeight 844; mobile UI visible
+- GNB Mobile Menu Open automatically selected 390 × 844 and its Sheet was visible.
+- Existing LNB `hmMobile` preset still selected 390 × 844. Its service-menu Sheet opened successfully, including the nested three-depth menu.
+- **Browser limitation:** the Codex in-app browser had a fractional-width anomaly at the 1023 boundary: rounded innerWidth was 1023 but both max-width 1023 and min-width 1024 media queries returned false. Chrome passed both boundaries. Production CSS and breakpoints were not changed; exact boundary QA should use Chrome.
+
+## 6. Representative Stories
+
+LAN rendering and navigation checks passed for:
+
+- Button: **PASS** — representative variants/sizes/state board
+- GNB: **PASS** — four viewport measurements and mobile menu
+- LNB: **PASS** — representative board, both embedded standalone iframes, desktop/mobile boundary and mobile Sheet
+- Dashboard: **PASS** — current heading, status filter and data table rendered
+- Calendar: **PASS** — single/disabled/range/two-month board
+- Date Picker: **PASS** — empty/selected/format/controlled/size/disabled board
+- Theme Designer: **PASS** — editor/live preview and successful application of `/themes/default.json` and `/themes/service-example.json`; reset to HM Default afterward
+- CENTER: **PASS** — Title compositions and Tunnel reference render
+
+These are targeted rendering/navigation/responsive checks, not a full interaction or accessibility audit of every Story.
+
+## 7. Story Cleanup
+
+- Story Files: **61**; Stories: **289**
+- Hierarchy: **Foundation → Components → Patterns → Center Graphic → Theme**
+- PRIMARY: **65**
+- VERIFICATION: **211**
+- UTILITY: **13** (executable verification, compatibility and playground tools)
+- Proven LEGACY / DUPLICATE: **0**
+- KEEP: **65**; HIDE: **224** through the existing verification filter
+- MERGE_CANDIDATE: **31**, advisory possible overlap with representative boards; all retained
+- DELETE_CANDIDATE: **0**; deleted stories: **0**
+- Full source-defined meta.title, Story export/name and meta/story/custom effective tags: `STORY-INVENTORY.md` and `story-inventory.json`.
+- Framework-injected dev/test/manifest tags are in compiled index.json rather than the source-tag inventory.
+- Before / built / inventory Story IDs: **289 / 289 / 289**, with no missing, added or renamed IDs.
+- LNB `iframe.html?id=patterns-layout-lnb--standalone-desktop` and `--standalone-mobile` references were found and both nested frames rendered.
+- Own Story change: GNB Mobile and Mobile Menu Open now start on global `hmMobile390`. Existing global presets, sorting, verification filtering and LNB 390 configuration were retained.
+
+## 8. Errors
+
+- Console: **no new errors observed** in the representative checks or final LAN tab; no Story not found, manager/addon or HMR errors observed after verification.
+- Network: **no asset 404 observed**. Direct LAN HTTP probes returned 200 for the font, two Theme JSON files, preview CSS, Vite client, manager JS and checked Story modules. LNB nested previews loaded successfully.
+- Known browser warning: Storybook 11 will require PopoverProvider ariaLabel. It was already present in the initial observation.
+- Known build warnings: documentation-example `bg-[var(...)]` CSS optimizer warning, chunks over 500kB, and Vite plugin timing notices. The repository's existing reports already document the CSS/chunk warnings. They did not fail the build.
+- Git emitted LF/CRLF normalization notices; `git diff --check` still passed.
+
+## 9. Validation
+
+- `npm run typecheck`: **PASS**, exit 0; generated Theme defaults matched, both workspace typechecks passed
+- `npm run build-storybook`: **PASS**, exit 0; local ignored `storybook-static/` output only
+- `git diff --check`: **PASS**, exit 0
+- Final integration validation source stability: **PASS**, no TS/TSX/JS/CSS/HTML files changed during the final check window
+- During an earlier validation window, another active task changed Dashboard Story/CSS. Those changes were preserved, and integration checks were rerun against the stable final source state, including the later concurrent changeDetection option in main.ts.
+
+## 10. Parallel Safety
+
+- packages/**: **UNCHANGED** (Production source; git clean for protected paths)
+- themes/**: **UNCHANGED**
+- package.json / package-lock.json: **UNCHANGED**
+- Protected file SHA-256 comparison: **277 files, 0 changes** from this session's baseline
+- Track A: **UNTOUCHED**, clean main and same HEAD
+- Package source edits: **NO**
+- package publish: **NO**; package version changes: **NO**
+- Runtime Theme contract/loader, exports/CSS contract and Gitea CI/CD changes: **NO**
+- Publishing Page QA / Publishing staticDirs / official hosting work: **NOT PERFORMED**
+
+## 11. Git
+
+Own changed/new files:
+
+- `src/patterns/gnb.stories.tsx`
+- `.storybook/qa/generate-inventory.mjs`
+- `.storybook/qa/story-inventory.json`
+- `.storybook/qa/STORY-INVENTORY.md`
+- `.storybook/qa/LAN-PREVIEW.md`
+- `.storybook/qa/LAN-PREVIEW-REPORT.md`
+
+Pre-existing or concurrent changes were preserved: `.storybook/main.ts`, `.storybook/manager.css`, `.storybook/preview.tsx`, `.storybook/preview-head.html`, `src/patterns/dashboard-layout.stories.tsx`, its Story-only CSS, `src/theme/designer-theme.stories.tsx`, and the six files in `src/foundation/`.
+
+- Commit: **NOT CREATED**
+- Merge: **NOT PERFORMED**
+- Rebase / cherry-pick: **NOT PERFORMED**
+- No automatic main integration or push was performed.
+
+## 12. Status
+
+- LAN TEMP PREVIEW: **READY** for Storybook cleanup and same-host LAN QA
+- Official Static Hosting: **NOT CONFIGURED** by this batch
+- This URL is an official deployment URL: **NO**
+- Other physical PCs can be declared verified: **NO**, pending actual cross-PC access
+
+## Required answers
+
+1. Storybook Worktree execution: **YES**, Track B.
+2. Execution on main: **NO**.
+3. 6008 bound to 0.0.0.0: **YES**.
+4. localhost:6008 opens: **YES**.
+5. 10.13.37.164:6008 opens on the same PC: **YES**.
+6. Opens from another physical PC: **NOT_VERIFIED**.
+7. Missing cross-PC verification explicitly marked: **YES**.
+8. Top Bar #266651 maintained: **YES**.
+9. Toolbar icon/text white: **YES**.
+10. Bottom panel default hidden: **YES**.
+11. Preview rail 0px: **YES**.
+12. 1280 preset available and measured: **YES**.
+13. 1024 preset available and measured: **YES**.
+14. 1023 preset available and measured: **YES**.
+15. 390 preset available and measured: **YES**.
+16. GNB/LNB 1024→1023 transition: **PASS in Chrome**, in-app-browser caveat above.
+17. Story HMR works: **YES**.
+18. Same-host LAN receives HMR changes: **YES**; cross-PC HMR **NOT_VERIFIED**.
+19. New console errors observed: **NO**.
+20. Asset 404 observed: **NO** in checked resources/screens.
+21. Track A modified: **NO**.
+22. Package source modified: **NO**.
+23. Package publish repeated: **NO**.
+24. Official deployment URL: **NO**.
+25. Current preview usable for Storybook cleanup: **YES**; second physical PC validation remains outstanding.
+
+## Time tracking (Asia/Seoul)
+
+- Started At: 2026-10-07 15:31:24 KST
+- Completed At: 2026-10-07 15:56:10 KST
+- Actual Duration: 24분 46초
+- Estimated Duration: 35~50분
+- Variance: 예상보다 10분 14초 ~ 25분 14초 짧음

.storybook/qa/LAN-PREVIEW.md

@@ -0,0 +1,78 @@
+# Track B temporary Storybook LAN preview
+
+Purpose: **TEMPORARY INTERNAL LAN PREVIEW / LAN TEMP PREVIEW** for Storybook cleanup. This is a development server with HMR, not official static hosting or a permanent URL.
+
+- Worktree: `D:\디자인시스템\HMDesignSystem-storybook`
+- Branch: `chore/storybook-cleanup`
+- Port: `6008`; bind: `0.0.0.0`
+- TEMP_STORYBOOK_URL: http://10.13.37.164:6008/
+- Local: http://localhost:6008/
+- IPv4 `10.13.37.164` was verified on 2026-10-07. Recheck it before later sharing; do not assume a fixed address.
+
+## Start and inspect
+
+Run from Track B in PowerShell:
+
+```powershell
+Set-Location -LiteralPath 'D:\디자인시스템\HMDesignSystem-storybook'
+git status -sb
+git branch --show-current
+git rev-parse HEAD
+# Only when node_modules is absent:
+# npm ci
+.\node_modules\.bin\storybook.cmd dev -p 6008 --host 0.0.0.0 --no-open --disable-telemetry --exact-port
+```
+
+The installed Storybook binary is version 10.6.1. `--exact-port` prevents silent fallback to another port. The official package.json script stays on 6007. Do not use that script without overriding the port for Track B. If 6008 is occupied, identify its process before stopping or replacing it.
+
+```powershell
+Get-NetIPAddress -AddressFamily IPv4
+Get-NetTCPConnection -State Listen -LocalPort 6008 |
+  Select-Object LocalAddress, LocalPort, OwningProcess
+# For a known PID from the result:
+# Get-CimInstance Win32_Process -Filter 'ProcessId=<PID>' |
+#   Select-Object ProcessId, CommandLine
+```
+
+Keep the server running while the preview is in use. For shutdown, stop only the confirmed Track B listener (Ctrl+C in its owning terminal, or its identified PID). Do not stop other tracks or other Node processes.
+
+The 2026-10-07 session reused an existing localhost-only Track B listener and replaced only the LAN listener with an explicit 6008 command. Thus localhost and LAN may be served by different processes using the same Track B source. Verify both addresses after subsequent changes.
+
+## QA viewports
+
+Use Chrome at browser zoom 100% and Storybook zoom 100%. Select a preset from the toolbar; use enough browser height to avoid clipping the configured iframe height.
+
+- HM Desktop · 1280: 1280 × 900
+- HM Desktop Boundary · 1024: 1024 × 900; Desktop GNB/LNB
+- HM Mobile Boundary · 1023: 1023 × 900; Mobile GNB/LNB
+- HM Mobile · 390: 390 × 844
+
+These are QA presets, not production breakpoint changes. GNB Mobile and Mobile Menu Open start at the shared `hmMobile390` preset. LNB's existing `hmMobile` 390 × 844 preset and direct iframe Story IDs remain intact.
+
+The Codex in-app browser showed a fractional-width boundary anomaly at 1023: `innerWidth` rounded to 1023 while both `(max-width: 1023px)` and `(min-width: 1024px)` were false. Chrome at devicePixelRatio 1 passed the exact boundary. Use Chrome for these two boundary checks; do not compensate by changing Production CSS.
+
+## Hierarchy and classification
+
+The sidebar order remains Foundation → Components → Patterns → Center Graphic → Theme. Existing `verification` filtering hides QA/tool stories by default while preserving direct URLs and tag-filter access.
+
+Refresh the full inventory from Track B:
+
+```powershell
+node .storybook/qa/generate-inventory.mjs
+```
+
+See `STORY-INVENTORY.md` and `story-inventory.json`. The helper uses the installed Storybook 10.6.1 CSF parser and reads every `src/**/*.stories.ts(x)` file. Tags in this inventory are source-defined meta/story tags; framework-generated dev/test/manifest tags are available in Storybook's index.json.
+
+KEEP and HIDE describe current navigation. MERGE_CANDIDATE is an advisory review flag, not a removal decision. The current batch does not delete stories or rename titles/exports/IDs. Confirm equivalent QA coverage and search references before future merging or deletion.
+
+## Preserve the boundary
+
+All edits must stay in Storybook configuration, stories, or Storybook-only helpers/layout/documentation. Do not modify Track A, packages, themes, Runtime Theme contracts/loaders, package exports/CSS contracts, package versions, publishing, CI/CD, staticDirs for Publishing, or official hosting. Do not merge, rebase, or cherry-pick this batch into main.
+
+For each completed cleanup batch, run typecheck, build-storybook, and git diff --check against the final source state. Build outputs are validation artifacts, not a deployment.
+
+## LAN verification
+
+Same-host LAN IP success does not prove access from another physical PC. On a second physical PC, check manager/sidebar/preview, fonts/themes/assets, navigation and HMR. Until then record **SECOND_PHYSICAL_PC: NOT_VERIFIED**.
+
+The current network profile was Public, with firewall profiles enabled and pre-existing inbound Node allow rules. No firewall rule or network profile was changed. If a second PC cannot connect, diagnose routing, client isolation and existing firewall policy; do not automatically add rules or change profiles.

.storybook/qa/STORY-INVENTORY.md

@@ -0,0 +1,614 @@
+# Internal Story inventory (ZIP excluded)
+
+Current references reconciled against the running Storybook index (288 entries). The historical Track B generator is not a recipient tool; this QA record is excluded from the test ZIP.
+
+This is a classification record. No Story IDs, exports or titles are renamed. HIDE uses the existing verification filter, not deletion. MERGE_CANDIDATE is advisory and can coexist with HIDE. Utility includes executable checks and compatibility/playground tools. No legacy or delete candidate is asserted without evidence.
+
+## Summary
+
+- PRIMARY: 65
+- VERIFICATION: 210
+- UTILITY: 13
+- LEGACY / DUPLICATE: 0
+- KEEP: 65
+- HIDE: 223
+- MERGE_CANDIDATE: 31
+- DELETE_CANDIDATE: 0
+- Story files: 61
+- Stories: 288
+- Hierarchy: Foundation → Components → Patterns → Center Graphic → Theme
+
+## Full inventory
+
+### Center Graphic/Facility
+
+Source: `src/center/center-facility.stories.tsx`; meta.tags: []
+
+- Tunnel — 터널; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Bridge — 교량; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Intersection — 교차로; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Junction — 분기점; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Interchange — 나들목; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Roadside — 휴게소 · 졸음쉼터; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Linked — 연계 시설물; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- TunnelPlayground — 직접 테스트 (터널); tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Center Graphic/Information
+
+Source: `src/center/center-information.stories.tsx`; meta.tags: []
+
+- Information — Information; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Center Graphic/Overview
+
+Source: `src/center/center-overview.stories.tsx`; meta.tags: []
+
+- Overview — Overview; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Center Graphic/Spatial
+
+Source: `src/center/center-spatial.stories.tsx`; meta.tags: []
+
+- Spatial — Spatial; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Center Graphic/Title
+
+Source: `src/center/center-title.stories.tsx`; meta.tags: []
+
+- Compositions — Title; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Disclosure/Accordion
+
+Source: `src/components/accordion.stories.tsx`; meta.tags: []
+
+- All — Accordion; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Single — Single; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Multiple — Multiple; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Alert Dialog
+
+Source: `src/components/alert-dialog.stories.tsx`; meta.tags: []
+
+- All — Alert Dialog; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- ConfirmationOpen — Confirmation; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- DestructiveOpen — Destructive; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Feedback/Alert
+
+Source: `src/components/alert.stories.tsx`; meta.tags: []
+
+- All — Alert; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Destructive — Destructive; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Aspect Ratio
+
+Source: `src/components/aspect-ratio.stories.tsx`; meta.tags: []
+
+- All — Aspect Ratio; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Wide — 16:9; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Square — 1:1; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Avatar
+
+Source: `src/components/avatar.stories.tsx`; meta.tags: []
+
+- All — Avatar; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Image — Image; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- FallbackError — Fallback; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Badge
+
+Source: `src/components/badge.stories.tsx`; meta.tags: []
+
+- All — Badge; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Variants — Variants; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Navigation/Breadcrumb
+
+Source: `src/components/breadcrumb.stories.tsx`; meta.tags: []
+
+- All — Breadcrumb; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Basic3 — Basic; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- WithEllipsis — Ellipsis; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongPath — Long Path; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Button
+
+Source: `src/components/button.stories.tsx`; meta.tags: []
+
+- All — Button; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Roles — Roles; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Sizes — Sizes; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- States — Brand States; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- StandardStates — Standard States; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongLabel — Long Label; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- KoreanLabels — Korean Labels; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- IconTextNarrow — Icon Text Narrow; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Destructive — Destructive; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Compatibility — Compatibility; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Search & Date/Calendar
+
+Source: `src/components/calendar.stories.tsx`; meta.tags: []
+
+- All — Calendar; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- SingleSelection — Single; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- DisabledSelection — Disabled Dates; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- RangeSelection — Range; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Card
+
+Source: `src/components/card.stories.tsx`; meta.tags: []
+
+- All — Card; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Surfaces — Surfaces; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Action — Action; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Compatibility — Compatibility; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Carousel
+
+Source: `src/components/carousel.stories.tsx`; meta.tags: []
+
+- All — Carousel; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- BasicCarousel — Basic; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MultipleItems — Multiple Items; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LoopCarousel — Loop; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- VerticalCarousel — Vertical; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Checkbox
+
+Source: `src/components/checkbox.stories.tsx`; meta.tags: []
+
+- All — Checkbox; tags: ["play-fn"]; PRIMARY; KEEP. Representative story or distinct reference page.
+- Unchecked — Unchecked; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Checked — Checked; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Indeterminate — Indeterminate; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Error — Error; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Disclosure/Collapsible
+
+Source: `src/components/collapsible.stories.tsx`; meta.tags: []
+
+- All — Collapsible; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Closed — Closed; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Search & Date/Combobox
+
+Source: `src/components/combobox.stories.tsx`; meta.tags: []
+
+- All — Combobox; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- EmptyCombobox — Empty; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ControlledCombobox — Controlled; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongOption — Long Option; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenBottom — Open Bottom; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenTop — Open Top; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Search & Date/Command
+
+Source: `src/components/command.stories.tsx`; meta.tags: []
+
+- All — Command; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Search — Search; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- GroupedList — Grouped; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Context Menu
+
+Source: `src/components/context-menu.stories.tsx`; meta.tags: []
+
+- All — Context Menu; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Search & Date/Date Picker
+
+Source: `src/components/date-picker.stories.tsx`; meta.tags: []
+
+- All — Date Picker; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- EmptyPicker — Empty; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- InvalidFocus — Invalid Focus; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SelectedPicker — Selected; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ControlledPicker — Controlled; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Dialog
+
+Source: `src/components/dialog.stories.tsx`; meta.tags: []
+
+- All — Dialog; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongContentOpen — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- WideContentOpen — Wide Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- BodyScrollOpen — Body Scroll; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- DeleteConfirmationOpen — Delete Confirmation; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Drawer
+
+Source: `src/components/drawer.stories.tsx`; meta.tags: []
+
+- All — Drawer; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Form — Form; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Dropdown Menu
+
+Source: `src/components/dropdown-menu.stories.tsx`; meta.tags: []
+
+- All — Dropdown Menu; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Hover Card
+
+Source: `src/components/hover-card.stories.tsx`; meta.tags: []
+
+- All — Hover Card; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Input
+
+Source: `src/components/input.stories.tsx`; meta.tags: []
+
+- All — Input; tags: ["play-fn"]; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Focus — Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Error — Error; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- InvalidFocus — Invalid Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ErrorMessage — Error Message; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Required — Required; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Readonly — Readonly; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Sizes — Compare Sizes; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Small — Small; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Medium — Medium; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Large — Large; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Label
+
+Source: `src/components/label.stories.tsx`; meta.tags: []
+
+- All — Label; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Components/Navigation/Menubar
+
+Source: `src/components/menubar.stories.tsx`; meta.tags: []
+
+- All — Menubar; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- TriggerFocus — Trigger Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenFocus — Open Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Navigation/Navigation Menu
+
+Source: `src/components/navigation-menu.stories.tsx`; meta.tags: []
+
+- All — Navigation Menu; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- NoViewport — No Viewport; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- IndicatorAlignment — Indicator Alignment; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Navigation/Pagination
+
+Source: `src/components/pagination.stories.tsx`; meta.tags: []
+
+- All — Pagination; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- FirstPage — First Page; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LastPage — Last Page; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongRange — Long Range; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Popover
+
+Source: `src/components/popover.stories.tsx`; meta.tags: []
+
+- All — Popover; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Progress
+
+Source: `src/components/progress.stories.tsx`; meta.tags: []
+
+- All — Progress; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Zero — Zero; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Middle — Middle; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Full — Full; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- NonDefaultMax — Non Default Max; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Radio Group
+
+Source: `src/components/radio-group.stories.tsx`; meta.tags: []
+
+- All — Radio Group; tags: ["play-fn"]; PRIMARY; KEEP. Representative story or distinct reference page.
+- Vertical — Vertical; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Horizontal — Horizontal; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Error — Error; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Disclosure/Resizable
+
+Source: `src/components/resizable.stories.tsx`; meta.tags: []
+
+- All — Resizable; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- HorizontalLayout — Horizontal; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- VerticalLayout — Vertical; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MinMaxLayout — Min Max; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Scroll Area
+
+Source: `src/components/scroll-area.stories.tsx`; meta.tags: []
+
+- All — Scroll Area; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- VerticalScroll — Vertical; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- HorizontalScroll — Horizontal; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Select
+
+Source: `src/components/select.stories.tsx`; meta.tags: []
+
+- All — Select; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- InvalidFocus — Invalid Focus; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Selected — Selected; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Sizes — Compare Sizes; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Medium — Medium; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Large — Large; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenLargeShort — Open Large Short; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenMediumLong — Open Medium Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenLargeLong — Open Large Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenTop — Open Top; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenTopLong — Open Top Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ListSizeComparison — Medium Trigger / List Size Comparison; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Scroll — Scroll; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Separator
+
+Source: `src/components/separator.stories.tsx`; meta.tags: []
+
+- All — Separator; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Horizontal — Horizontal; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Vertical — Vertical; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+
+### Components/Overlay/Sheet
+
+Source: `src/components/sheet.stories.tsx`; meta.tags: []
+
+- All — Sheet; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Right — Right; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Left — Left; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Top — Top; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Bottom — Bottom; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Form — Form; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Skeleton
+
+Source: `src/components/skeleton.stories.tsx`; meta.tags: []
+
+- All — Skeleton; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Text — Text; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- CardList — Card List; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Slider
+
+Source: `src/components/slider.stories.tsx`; meta.tags: []
+
+- All — Slider; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- SingleValue — Single; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- RangeValue — Range; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- DisabledSlider — Disabled; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Focus — Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Feedback/Sonner
+
+Source: `src/components/sonner.stories.tsx`; meta.tags: []
+
+- All — Sonner; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Components/Form/Switch
+
+Source: `src/components/switch.stories.tsx`; meta.tags: []
+
+- All — Switch; tags: ["play-fn"]; PRIMARY; KEEP. Representative story or distinct reference page.
+- Off — Off; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- On — On; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+
+### Components/Data & Display/Table
+
+Source: `src/components/table.stories.tsx`; meta.tags: []
+
+- All — Table; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Basic — Basic; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Selected — Selected; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- LongText — Long Text; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Overflow — Horizontal Overflow; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Navigation/Tabs
+
+Source: `src/components/tabs.stories.tsx`; meta.tags: []
+
+- All — Tabs; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Secondary — Secondary; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SelectedFirst — Selected First; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SelectedLast — Selected Last; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Focus — Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Overflow — Overflow; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SecondaryOverflow — Secondary Overflow; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongLabel — Long Label; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Textarea
+
+Source: `src/components/textarea.stories.tsx`; meta.tags: []
+
+- All — Textarea; tags: ["play-fn"]; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Focus — Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Error — Error; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- InvalidFocus — Invalid Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ErrorMessage — Error Message; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Required — Required; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Readonly — Readonly; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Toggle Group
+
+Source: `src/components/toggle-group.stories.tsx`; meta.tags: []
+
+- All — Toggle Group; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- SingleSelection — Single; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MultipleSelection — Multiple; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- VerticalGroup — Vertical; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ContentNodes — Content Nodes; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Toggle
+
+Source: `src/components/toggle.stories.tsx`; meta.tags: []
+
+- All — Toggle; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- States — States; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- IconOnly — Icon Only; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- DisabledToggle — Disabled; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ContentNodes — Content Nodes; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Tooltip
+
+Source: `src/components/tooltip.stories.tsx`; meta.tags: []
+
+- All — Tooltip; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Foundation/Color
+
+Source: `src/foundation/color.stories.tsx`; meta.tags: []
+
+- All — Color; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Foundation/Layout
+
+Source: `src/foundation/layout.stories.tsx`; meta.tags: []
+
+- All — Layout; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Foundation/Typography
+
+Source: `src/foundation/typography.stories.tsx`; meta.tags: []
+
+- All — Typography; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Patterns/Layout/Dashboard
+
+Source: `src/patterns/dashboard-layout.stories.tsx`; meta.tags: []
+
+- All — Dashboard; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- WithSidebar — Dashboard Header + Sidebar; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ThirdLevel — Third Level; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SidebarOnly — Dashboard Sidebar; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Loading — Loading; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Empty — Empty; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Framed — Framed; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Patterns/Data/Data Table
+
+Source: `src/patterns/data-table.stories.tsx`; meta.tags: []
+
+- All — Data Table; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- WithFilterBarStory — With Filter Bar; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Loading — Loading; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Empty — Empty; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Patterns/Data/Filter Bar
+
+Source: `src/patterns/filter-bar.stories.tsx`; meta.tags: []
+
+- All — Filter Bar; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Patterns/Layout/GNB
+
+Source: `src/patterns/gnb.stories.tsx`; meta.tags: []
+
+- All — GNB; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Sticky — Sticky; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- NavigationMenuOpen — Navigation Menu Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ShortDepthOpen — Short Depth Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- RightEdgeLongDepth — Right Edge Long Depth; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- FirstDepthShort — First Depth Short; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- FirstDepthLong — First Depth Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MiddleDepthShort — Middle Depth Short; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MiddleDepthLong — Middle Depth Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LastDepthShort — Last Depth Short; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LastDepthLong — Last Depth Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- EdgeFirstLong — Edge First Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- EdgeLastLong — Edge Last Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- UserMenuOpen — User Menu Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongLabels — Long Labels; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- WithLogo — With Logo; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Utilities — Utilities; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Mobile — Mobile; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MobileMenuOpen — Mobile Menu Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Patterns/Layout/LNB
+
+Source: `src/patterns/lnb.stories.tsx`; meta.tags: []
+
+- All — LNB; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Selected — Selected; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Expanded — Expanded; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SelectedChild — Selected Child; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- CollapsedWithSelection — Collapsed With Selection; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- WithLogo — With Logo; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongLabels — Long Labels; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Scroll — Scroll; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ThirdLevel — Third Level; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ThirdLevelLongLabels — Third Level Long Labels; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ThirdLevelScroll — Third Level Scroll; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- WithGNB — With GNB; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- StandaloneDesktop — LNB Standalone Desktop; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LNBProfileMenuOpen — LNB Profile Menu Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- StandaloneMobile — LNB Standalone Mobile; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- StandaloneMobileMenuOpen — LNB Standalone Mobile Menu Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Patterns/Layout/Loading Screen
+
+Source: `src/patterns/loading-screen.stories.tsx`; meta.tags: []
+
+- All — Loading Screen; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Inline — Inline; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Theme/Designer Playground
+
+Source: `src/theme/designer-theme.stories.tsx`; meta.tags: []
+
+- Editor — Designer Playground; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- LiveVerification — Live Verification; tags: ["verification","play-fn"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Theme/Runtime Contract/Loader
+
+Source: `src/theme/runtime-loader.stories.tsx`; meta.tags: ["verification"]
+
+- CdnVerification — Cdn Verification; tags: ["verification","play-fn"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Theme/Runtime Contract
+
+Source: `src/theme/runtime-theme.stories.tsx`; meta.tags: ["verification"]
+
+- Comparison — Comparison; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- GlobalExternal — Global External; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Verification — Verification; tags: ["verification","play-fn"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Dashboard — Dashboard; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.

.storybook/qa/generate-inventory.mjs

@@ -0,0 +1,38 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { loadCsf } from 'storybook/internal/csf-tools'
+
+// Run from the Track B root: node .storybook/qa/generate-inventory.mjs
+// Only writes Storybook documentation; never renames or removes stories.
+const root = process.cwd()
+if (path.basename(root) !== 'HMDesignSystem-storybook') throw new Error('Run only from Track B')
+const walk = dir => fs.readdirSync(dir, { withFileTypes: true }).flatMap(e => e.isDirectory() ? walk(path.join(dir, e.name)) : [path.join(dir, e.name)])
+const files = walk(path.join(root, 'src')).filter(f => /\.stories\.tsx?$/.test(f)).sort()
+const inventory = files.map(file => {
+  const csf = loadCsf(fs.readFileSync(file, 'utf8'), { makeTitle: title => title }).parse()
+  const title = csf.meta.title
+  if (!title) throw new Error(`Missing meta.title: ${file}`)
+  const metaTags = csf.meta.tags ?? []
+  const stories = Object.entries(csf._stories).map(([exportName, story]) => {
+    const storyTags = story.tags ?? []
+    const effectiveTags = [...new Set([...metaTags, ...storyTags])]
+    const utility = /Playground|Compatibility/.test(exportName) || /Verification$/.test(exportName) || exportName === 'Verification'
+    const category = utility ? 'UTILITY' : effectiveTags.includes('verification') ? 'VERIFICATION' : 'PRIMARY'
+    const duplicateCandidate = effectiveTags.includes('verification') && /^(Default|Sizes|Roles|Variants|States|Basic|Selected|Disabled|Horizontal|Vertical)$/.test(exportName)
+    return { id: story.id, exportName, name: story.name, storyTags, effectiveTags, category, decision: effectiveTags.includes('verification') ? 'HIDE' : 'KEEP', candidate: duplicateCandidate ? 'MERGE_CANDIDATE' : null, reason: duplicateCandidate ? 'Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.' : effectiveTags.includes('verification') ? 'Keep direct URL and tag-filter access; excluded from default sidebar.' : 'Representative story or distinct reference page.' }
+  })
+  return { file: path.relative(root, file).replaceAll('\\', '/'), title, metaTags, stories }
+})
+const all = inventory.flatMap(f => f.stories)
+const summary = { storyFiles: files.length, stories: all.length, categories: Object.fromEntries(['PRIMARY', 'VERIFICATION', 'UTILITY', 'LEGACY / DUPLICATE'].map(c => [c, all.filter(s => s.category === c).length])), decisions: Object.fromEntries(['KEEP', 'HIDE', 'MERGE_CANDIDATE', 'DELETE_CANDIDATE'].map(c => [c, all.filter(s => s.decision === c || s.candidate === c).length])), hierarchy: ['Foundation', 'Components', 'Patterns', 'Center Graphic', 'Theme'] }
+const output = path.join(root, '.storybook', 'qa')
+fs.mkdirSync(output, { recursive: true })
+fs.writeFileSync(path.join(output, 'story-inventory.json'), JSON.stringify({ summary, inventory }, null, 2) + '\n')
+const lines = ['# Track B Story inventory', '', 'Generated from every `src/**/*.stories.ts(x)` using the installed Storybook CSF parser. Run `node .storybook/qa/generate-inventory.mjs` from Track B to refresh.', '', 'This is a classification record. No Story IDs, exports or titles are renamed. HIDE uses the existing verification filter, not deletion. MERGE_CANDIDATE is advisory and can coexist with HIDE. Utility includes executable checks and compatibility/playground tools. No legacy or delete candidate is asserted without evidence.', '', '## Summary', '', ...Object.entries(summary.categories).map(([k,v]) => `- ${k}: ${v}`), ...Object.entries(summary.decisions).map(([k,v]) => `- ${k}: ${v}`), `- Story files: ${summary.storyFiles}`, `- Stories: ${summary.stories}`, `- Hierarchy: ${summary.hierarchy.join(' → ')}`, '', '## Full inventory', '']
+for (const f of inventory) {
+  lines.push(`### ${f.title}`, '', `Source: \`${f.file}\`; meta.tags: ${JSON.stringify(f.metaTags)}`, '')
+  for (const s of f.stories) lines.push(`- ${s.exportName} — ${s.name}; tags: ${JSON.stringify(s.effectiveTags)}; ${s.category}; ${s.decision}${s.candidate ? `; ${s.candidate}` : ''}. ${s.reason}`)
+  lines.push('')
+}
+fs.writeFileSync(path.join(output, 'STORY-INVENTORY.md'), lines.join('\n'))
+console.log(JSON.stringify(summary))