feat(org-chart): support external CSS themes and align documentation

examples/org-chart-react/p11.tsx

@@ -0,0 +1,34 @@
+// Isolated consumer fixture; no Storybook registration or production controls.
+import { createRoot } from 'react-dom/client';
+import { OrgChart } from '@hm-design/org-chart-react';
+import { createOrgChart, JsonOrgChartDataSource } from '@hm-design/org-chart';
+import coreUrl from '@hm-design/org-chart/style.css?url';
+import engineUrl from '@hm-design/org-chart/engine.css?url';
+import externalThemeUrl from './external-theme.css?url';
+import hostThemeUrl from './host-theme.css?url';
+import groupThemeUrl from './external-group-theme.css?url';
+import autoData from '../org-chart/data-expanded-small.json';
+import allCompanies from '../org-chart/data-expanded-large.json';
+import fixedData from '../org-chart/data-p1.json';
+
+const query = new URLSearchParams(location.search);
+const mode = query.get('mode') ?? 'auto';
+const data = structuredClone(mode === 'auto' ? query.has('all') ? allCompanies : autoData : fixedData);
+if (mode === 'auto' && query.has('statuses')) {
+  data.employees.filter(employee => !data.organizations.some(org => org.leaderId === employee.id)).slice(0, 2).forEach((employee, index) => { employee.workStatus = index ? 'onLeave' : 'dispatched'; });
+}
+const options = {
+  dataSource: new JsonOrgChartDataSource(data),
+  dragDropEnabled: query.has('drag'),
+  stylesheetUrls: { core: query.has('groups') ? groupThemeUrl : query.has('theme') ? externalThemeUrl : coreUrl, engine: engineUrl },
+  ...(mode === 'auto' ? { layoutMode: 'auto' as const, presentationMode: 'chart-only' as const, initialView: 'fit' as const, wheelZoom: 'direct' as const } : { displayMode: mode === 'fixed' ? 'readOnly' as const : 'interactive' as const }),
+};
+document.body.style.margin = '0';
+Object.assign(window, { p11HostThemeUrl: hostThemeUrl });
+const container = document.getElementById('root')!;
+container.style.height = '850px';
+if (query.get('runtime') === 'vanilla') {
+  const chart = createOrgChart({ container, ...options });
+  void chart.mount();
+  Object.assign(window, { p11Chart: chart });
+} else createRoot(container).render(<OrgChart {...options} />);