refactor(storybook): simplify component and preview examples

Drop page / section descriptions, state notes and repeated captions from
the representative Stories of 44 components, the Patterns, Center
Graphic and OrgChart pages. Value readouts, spec lists and captions hide
only on the representative page; hidden verification Stories keep them.
Tabs Default API and the Filter Bar draft / applied counts move to the
hidden DefaultApi and DraftApplied Stories; Center Overview is hidden
with its direct URL kept. Story IDs are unchanged.

Align the component, pattern and OrgChart docs with the pages, point the
quality reference check at the DraftApplied Story, and make the P8
styles check expect no section header on the preview-only Expanded page.

src/org-chart/org-chart-expanded.stories.tsx

@@ -1,4 +1,4 @@
-import { StrictMode, useMemo, useState } from 'react';
+import { StrictMode, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { OrgChart } from '@hm-design/org-chart-react/hm-dialog';
 import {
@@ -21,22 +21,40 @@ const topNodes = { ptc: { title: '기술총괄', name: '가상책임자 5' } };
 const layout: OrgChartAutoLayoutOptions = { type: 'tb', hybridStartDepth: 2, initialVisibleDepth: 'all' };
 const interactions: OrgChartInteractionOptions = { collapse: true, zoom: true, pan: true };
 
+// Story-only: hides Core's explanatory toolbar text (as-of date, selection count, Drag & Drop guide) on screen.
+// The elements stay in the shadow DOM: the move feedback remains the cards' aria-describedby / live status
+// (visually hidden), and the OrgChart browser checks still read their text.
+const previewText = new CSSStyleSheet();
+previewText.replaceSync(`
+  .hm-orgchart-date, .hm-orgchart-expanded-selection { display: none; }
+  .hm-orgchart-move-feedback { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+`);
+function hidePreviewText(container: HTMLElement): () => void {
+  const adopt = () => {
+    const shadow = container.querySelector('.hm-orgchart-host')?.shadowRoot;
+    if (shadow && !shadow.adoptedStyleSheets.includes(previewText)) shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, previewText];
+  };
+  const observer = new MutationObserver(adopt);
+  observer.observe(container, { childList: true, subtree: true });
+  adopt();
+  return () => observer.disconnect();
+}
+
 /** Existing Expanded Story only: a chart preview without setting panels. */
 function ExpandedPreview() {
   const [error, setError] = useState<string | null>(null);
+  const preview = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => hidePreviewText(preview.current!), []);
   const source = useMemo(() => new JsonOrgChartDataSource(createOrgChartExampleDataset(template, {
     scope: 'per-company', employeeCount: 20, companyIds: allCompanies,
   })), []);
 
   return <StoryPage className="hm-orgchart-story-page hm-orgchart-story-expanded">
-    <StoryPageHeader
-      title="Expanded OrgChart"
-      description="모든 직원은 가상 데이터"
-    />
+    <StoryPageHeader title="Expanded OrgChart" />
     {/* Preview first: the chart sits right under the page title; its own header already names it, so no section header. */}
     <div className="hm-orgchart-story hm-orgchart-story-lead">
       {error ? <p role="alert" className="hm-orgchart-story-note">{error}</p> : null}
-      <div className="hm-orgchart-story-preview sb-center">
+      <div ref={preview} className="hm-orgchart-story-preview sb-center">
         <OrgChart dataSource={source} stylesheetUrls={compositionStylesheets} displayMode="readOnly" layoutMode="auto" autoLayout={layout} interactions={interactions} dragDropEnabled={false} selectedCompanyIds={allCompanies} companyTopNodes={topNodes} employeePopup="hm-dialog" className="hm-orgchart-story-chart" onLifecycleError={cause => setError(cause instanceof Error ? cause.message : '조직도 설정을 적용할 수 없습니다.')} onStateChange={state => { if (state.status === 'error') setError(state.issues.map(issue => issue.message).join(' / ')); }} />
       </div>
     </div>