feat(org-chart): separate fixed and auto layout previews

packages/org-chart-react/README.md

@@ -44,6 +44,8 @@ Named runtime export: `OrgChart`. Type exports: `OrgChartProps` and the Core's p
 - Required `dataSource`: the same Core `OrgChartDataSource` interface, `load(options?: { signal?: AbortSignal }): Promise<unknown>`.
 - Required `stylesheetUrls`: `{ engine: string; core: string }`, the exact Core asset contract.
 - Optional `displayMode`: `'interactive'` (default) or `'readOnly'`, passed to the Core composition. Changing it recreates the Core handle.
+- Optional `layoutMode`: `'fixed'` (default) or `'auto'`, independent of `displayMode`. Auto is the P5-1A initial-group preview; automatic recursive layout, collapse and Zoom/Pan remain deferred. Changing it recreates the same Core handle.
+- Optional `companyId`: existing Expanded company preset ID (default `hanmac`). Changing it recreates the handle; Fixed ignores company colors. Unknown Auto IDs report a Core construction lifecycle error. All seven IDs and preview limits are documented in the [Core README](../org-chart/README.md#layout-boundary-p5-1a).
 - Optional `organizationLinks`: existing organization-ID-to-URL map, applied only to original 1Depth titles. Missing/blank values retain plain titles. Core validates HTTP(S)/relative URLs and rejects invalid URLs, other schemes and credentials. Treat the map as immutable and memoize it; a new map recreates the handle.
 - Optional `onEmployeeClick(employee, context)`: host-owned information UI, replacing the Core's built-in popup. `context` contains the existing `organization`, `affiliation`, focusable `trigger` card and `originalEvent`. It works in both modes and receives untouched Employee data.
 - Optional `aggregationPolicy`: the Core's `ApprovedAggregationPolicy`.

packages/org-chart-react/src/OrgChart.tsx

@@ -18,6 +18,8 @@ export function OrgChart({
   aggregationPolicy,
   stylesheetUrls,
   displayMode,
+  layoutMode,
+  companyId,
   organizationLinks,
   onEmployeeClick,
   className,
@@ -62,6 +64,8 @@ export function OrgChart({
         aggregationPolicy,
         stylesheetUrls: { engine: engineStylesheetUrl, core: coreStylesheetUrl },
         displayMode,
+        layoutMode,
+        companyId,
         organizationLinks,
         onEmployeeClick: hasEmployeeCallback ? (employee, context) => {
           if (generationRef.current === generation) committedRef.current.onEmployeeClick?.(employee, context);
@@ -101,7 +105,7 @@ export function OrgChart({
         }
       }
     };
-  }, [aggregationPolicy, engineStylesheetUrl, coreStylesheetUrl, displayMode, organizationLinks, hasEmployeeCallback]);
+  }, [aggregationPolicy, engineStylesheetUrl, coreStylesheetUrl, displayMode, layoutMode, companyId, organizationLinks, hasEmployeeCallback]);
 
   useLayoutEffect(() => {
     const instance = instanceRef.current;