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>

src/org-chart/org-chart-page-previews.tsx

@@ -19,8 +19,8 @@ export function CompositionPreview() {
   const host = useRef<HTMLElement>(null);
   useLayoutEffect(() => centerCompositionPreview(host.current!), []);
   return <StoryPage className="hm-orgchart-story-page">
-    <StoryPageHeader title="Full Composition" description="Workdesk 기반 고정형 조직도" />
-    <StorySection title="고정형 조직도" description="직원 카드를 눌러 정보 확인 · 미리보기 폭에 맞춰 비례 축소">
+    <StoryPageHeader title="Full Composition" />
+    <StorySection title="고정형 조직도">
       <section ref={host} className="hm-orgchart-story hm-orgchart-story-full" aria-label="Full Composition">
         <OrgChart dataSource={compositionSource} stylesheetUrls={compositionStylesheets} displayMode="readOnly" className="hm-orgchart-story-chart" />
       </section>
@@ -39,14 +39,14 @@ export function DepartmentTypographyPreview() {
 
 export function OverviewPreview() {
   return <StoryPage className="hm-orgchart-story-page">
-    <StoryPageHeader title="Overview" description="회사 로고와 인원 현황 · 가상 데이터" />
-    <StorySection title="관계사·회사 로고" description="회사 로고와 기준 안내">
+    <StoryPageHeader title="Overview" />
+    <StorySection title="관계사·회사 로고">
       <div className="hm-orgchart-story-preview"><CoreComponentPreview kind="Logo" hideLogoHeading /></div>
     </StorySection>
-    <StorySection title="조직·직위별 인원 현황" description="가상 데이터 조직·직위별 집계">
+    <StorySection title="조직·직위별 인원 현황">
       <div className="hm-orgchart-story-preview"><CoreComponentPreview kind="PositionSummary" presentation="workdesk" /></div>
     </StorySection>
-    <StorySection title="관계사별 인원 현황" description="관계사별 · 실제 운영 인원수 아님">
+    <StorySection title="관계사별 인원 현황">
       <div className="hm-orgchart-story-preview"><CoreComponentPreview kind="AffiliationSummary" presentation="workdesk" /></div>
     </StorySection>
   </StoryPage>;