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/dialog.stories.tsx

@@ -6,8 +6,9 @@ import { Input } from "@hm-design/ui"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@hm-design/ui"
 import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { AlertDialogConfirmation, AlertDialogDestructive } from "./alert-dialog-examples"
 
-// Dialog is an overlay (Radix Portal), so it does not fit the StateBoard. The representative Story is a row of triggers that open
+// Dialog is an overlay (Radix Portal): each trigger sits in its own single-column StateBoard (SpecimenGrid) and opens
 // the real Dialog for each ui_viz case (dialog.md §9 Reference Viewer examples); the same cases also exist as separate Stories tagged
 // `verification` that start open. Pseudo-state helpers are not used to fake an open Dialog.
 // Usage: native label below is a preserved Reference fixture. New HM React fields use public Label
@@ -176,16 +177,15 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative Story: the common Story page; every case opens from its trigger. Named after the component, as in ui_viz.
-// It is the only Dialog entry in the default sidebar, so Storybook shows Dialog as a single 1-depth item.
-// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
-// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
-// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
-// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
-function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
+// It is the only Dialog entry in the default sidebar, so Storybook shows Dialog as a single 1-depth item. It also shows the Alert
+// Dialog (confirmation / warning) specimens from ./alert-dialog-examples, so "대화상자" is the one sidebar item for both; the Alert
+// Dialog Stories keep their IDs and direct URLs but are hidden from the sidebar.
+// Keep the board's accessible headings and shared indent, with only the triggers visible in the four-column grid.
+function SpecimenGrid({ states }: { states: BoardState[] }) {
   return (
-    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
+    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] min-[1000px]:grid-cols-4 [&_[data-overview-state]>header]:sr-only">
       {states.map((state) => (
-        <StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
+        <StateBoard key={state.id} min={10000} states={[{ ...state, children: <div className="flex items-start">{state.children}</div> }]} />
       ))}
     </div>
   )
@@ -216,6 +216,14 @@ export const All: Story = {
           ]}
         />
       </StorySection>
+      <StorySection title="Alert Dialog">
+        <SpecimenGrid
+          states={[
+            { id: "alert-confirmation", label: "Confirmation", children: <AlertDialogConfirmation /> },
+            { id: "alert-destructive", label: "Destructive", children: <AlertDialogDestructive /> },
+          ]}
+        />
+      </StorySection>
     </StoryPage>
   ),
 }