style(storybook): group overlay, disclosure and navigation story pages

- Sheet + Drawer, Tooltip + Hover Card, Accordion + Collapsible,
  Dialog + Alert Dialog, Dropdown Menu + Context Menu on one page each
  (specimens moved to *-examples.tsx; absorbed Stories keep their IDs)
- Popover, Tabs content spacing, Breadcrumb, Menubar and Command tidied
- Component docs updated to the new representative pages

src/components/accordion.stories.tsx

@@ -1,8 +1,16 @@
 import type { ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@hm-design/ui"
-import { StateBoard, type BoardState } from "@/components/story-board"
+import { StateBoard } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import {
+  ClosedSpecimen as CollapsibleClosed,
+  ControlledSpecimen as CollapsibleControlled,
+  DisabledSpecimen as CollapsibleDisabled,
+  LongSpecimen as CollapsibleLong,
+  OpenSpecimen as CollapsibleOpen,
+} from "./collapsible-examples"
+import "./accordion-story.css"
 
 // The representative "Accordion" Story puts each Radix mode on one page with real, clickable items. The same sections also exist
 // as Stories tagged `verification`, which the sidebar hides by default (see .storybook/main.ts). Modes use the Radix API
@@ -102,45 +110,44 @@ function LongSpecimen() {
   )
 }
 
-const sections = [
-  { id: "single", label: "Single", node: <SingleSpecimen /> },
-  { id: "collapsible-single", label: "Collapsible Single", node: <CollapsibleSingleSpecimen /> },
-  { id: "multiple", label: "Multiple", node: <MultipleSpecimen /> },
-  { id: "disabled", label: "Disabled Item", node: <DisabledSpecimen /> },
-  { id: "long", label: "Long Content", node: <LongSpecimen /> },
-]
-
 // No `component` here: Accordion props are a union (single | multiple), so Stories without args would not type-check.
 const meta = { title: "Components/Disclosure/Accordion", parameters: { layout: "padded" } } satisfies Meta
 export default meta
 type Story = StoryObj<typeof meta>
 
-// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
-// below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so the title, divider and
-// specimen start line up, unused columns stay empty and `items-start` lets an opened item grow without touching its neighbors.
-function StateGrid({ states, cols }: { states: BoardState[]; cols: 2 | 3 }) {
-  return (
-    <div className={`grid grid-cols-1 items-start gap-6 ${cols === 3 ? "min-[1000px]:grid-cols-3" : "min-[1000px]:grid-cols-2"}`}>
-      {states.map((state) => (
-        <StateBoard key={state.id} min={10000} states={[state]} />
-      ))}
-    </div>
-  )
-}
-
-const board = (cols: 2 | 3, ...ids: string[]) => (
-  <StateGrid cols={cols} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
-)
-
-// Representative Story: the common Story page; the sections group the same specimens.
+// The combined disclosure page uses the same specimens as the separate verification Stories.
 export const All: Story = {
   name: "Accordion",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
-    <StoryPage>
+    <StoryPage className="sb-accordion-story">
       <StoryPageHeader title="Accordion" />
-      <StorySection title="Variants">{board(3, "single", "collapsible-single", "multiple")}</StorySection>
-      <StorySection title="States">{board(3, "disabled", "long")}</StorySection>
+      <StorySection title="Variants">
+        <StateBoard states={[
+          { id: "single", label: "Single", children: <SingleSpecimen /> },
+          { id: "collapsible-single", label: "Collapsible Single", children: <CollapsibleSingleSpecimen /> },
+          { id: "multiple", label: "Multiple", children: <MultipleSpecimen /> },
+        ]} />
+      </StorySection>
+      <StorySection title="States">
+        <StateBoard states={[
+          { id: "disabled", label: "Disabled Item", children: <DisabledSpecimen /> },
+        ]} />
+      </StorySection>
+      <StorySection title="Collapsible · States">
+        <StateBoard states={[
+          { id: "collapsible-closed", label: "Closed", children: <CollapsibleClosed /> },
+          { id: "collapsible-open", label: "Open", children: <CollapsibleOpen /> },
+          { id: "collapsible-disabled", label: "Disabled", children: <CollapsibleDisabled /> },
+        ]} />
+      </StorySection>
+      <StorySection title="Content · Usage">
+        <StateBoard states={[
+          { id: "long", label: "Accordion · Long Content", children: <LongSpecimen /> },
+          { id: "collapsible-long", label: "Collapsible · Long Content", children: <CollapsibleLong /> },
+          { id: "collapsible-controlled", label: "Button trigger", children: <CollapsibleControlled /> },
+        ]} />
+      </StorySection>
     </StoryPage>
   ),
 }