style(storybook): refine disclosure story layout

src/components/accordion.stories.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // The representative "Accordion" Story puts each Radix mode on one page with real, clickable items. The same sections also exist
@@ -115,8 +115,21 @@ const meta = { title: "Components/Disclosure/Accordion", parameters: { layout: "
 export default meta
 type Story = StoryObj<typeof meta>
 
-const board = (...ids: string[]) => (
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
-  <StateBoard min={360} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+// 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.
@@ -126,12 +139,8 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Accordion" />
-      <StorySection title="Overview">{board("single")}</StorySection>
+      <StorySection title="Variants">{board(3, "single", "collapsible-single", "multiple")}</StorySection>
-      <StorySection title="Variants">
+      <StorySection title="States">{board(3, "disabled", "long")}</StorySection>
-        {board("collapsible-single", "multiple")}
-      </StorySection>
-      <StorySection title="States">{board("disabled")}</StorySection>
-      <StorySection title="Usage">{board("long")}</StorySection>
     </StoryPage>
   ),
 }

src/components/collapsible.stories.tsx

@@ -2,7 +2,7 @@ import { useState, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { ChevronDownIcon } from "lucide-react"
 import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // The representative "Collapsible" Story shows one independent disclosure per state with real, clickable triggers. The same
@@ -70,8 +70,21 @@ const meta = { title: "Components/Disclosure/Collapsible", component: Collapsibl
 export default meta
 type Story = StoryObj<typeof meta>
 
-const board = (...ids: string[]) => (
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
-  <StateBoard min={360} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+// 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.
@@ -81,9 +94,8 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Collapsible" />
-      <StorySection title="Overview">{board("closed")}</StorySection>
+      <StorySection title="States">{board(3, "closed", "open", "disabled")}</StorySection>
-      <StorySection title="States">{board("open", "disabled")}</StorySection>
+      <StorySection title="Usage">{board(3, "long", "controlled")}</StorySection>
-      <StorySection title="Usage">{board("long", "controlled")}</StorySection>
     </StoryPage>
   ),
 }

src/components/resizable.stories.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // The representative Story shows real, draggable layouts; the same specimens also exist as Stories tagged `verification` (hidden
@@ -99,8 +99,21 @@ const meta = { title: "Components/Disclosure/Resizable", component: ResizablePan
 export default meta
 type Story = StoryObj<typeof meta>
 
-const board = (...ids: string[]) => (
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
-  <StateBoard min={580} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+// 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 and unused columns stay empty. The frames keep their own size (max 560px wide).
+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.
@@ -112,9 +125,8 @@ export const All: Story = {
       <StoryPageHeader
         title="Resizable"
       />
-      <StorySection title="Overview">{board("horizontal")}</StorySection>
+      <StorySection title="Variants">{board(3, "horizontal", "handle", "vertical")}</StorySection>
-      <StorySection title="Variants">{board("vertical", "handle")}</StorySection>
+      <StorySection title="Usage">{board(3, "minmax", "collapsible")}</StorySection>
-      <StorySection title="Usage">{board("minmax", "collapsible")}</StorySection>
     </StoryPage>
   ),
 }