# OrgChart React public-package consumer

## P3 follow-up

`p1.html?mode=readOnly` uses the updated common Core with the position matrix,
group links and employee information dialog. No navigation URLs are preset.
The development-only `window.OrgChartP1React.setOptions({ organizationLinks,
onEmployeeClick })` helper applies public React props to the current fixture;
it is not a new Core handle method. `setData` remains available.

After building Core/Wrapper and both examples, run the focused
`node examples/org-chart/verify-p3.mjs`. Evidence goes to
`test-results/org-chart-p3`; prior P1/P2 scripts and results remain unchanged.

This independent Vite consumer imports the built public entries of
`@hm-design/org-chart-react`, `@hm-design/org-chart` and `@hm-design/ui/theme.css`.
It imports the original Vanilla v1/v2 JSON files directly. It is a verification
example, with fictitious data and a `window.OrgChartReactDemo` inspection seam;
it has no server/login integration or production business controls.

From the repository root, build packages before the consumer:

```sh
npm run build:packages
npm run build:org-chart-react-example
npm run dev:org-chart-react-example
```

Development URL: `http://127.0.0.1:6026/` (strict port). Strict Mode effect replay
is checked in development. The production output has its own HTTP browser smoke
and update checks. This ESM output is for HTTP deployment; it is not a direct-open
`file://` artifact. The existing Vanilla `examples/org-chart/dist/classic.html`
remains the direct-open example.

Core CSS URL imports become deployment assets and are passed into each Shadow DOM.
The public HM Theme import emits its existing font assets. Grid/flex consumers
must allow their chart-containing items to shrink (`min-width: 0`); horizontal
overflow belongs to the Core viewport rather than the document.

Browser tooling is supplied by the verification environment, not added to the
package dependencies. Configure `ORGCHART_PLAYWRIGHT_MODULE` and optionally
`ORGCHART_CHROME`, using absolute paths. Start the separate Storybook server on
6025 and consumer on 6026, then:

```sh
# Set these environment variables using your shell's syntax:
# ORGCHART_CONSUMER_URL=http://127.0.0.1:6026
# ORGCHART_STORYBOOK_URL=http://127.0.0.1:6025
npm run test:org-chart-react-browser
node examples/org-chart-react/verify-boundaries.mjs
```

`verify.mjs` inspects real Core DOM, compares Vanilla/React snapshots, exercises
React and Storybook lifecycles and records screenshots/metrics at four widths.
`verify-boundaries.mjs` checks production updates, source identity semantics,
actual horizontal scrolling, global CSS isolation and direct-open Vanilla smoke.
Both write evidence under ignored `test-results/org-chart-react/`.

To check the actual package archive and declarations without another build:

```sh
npm pack -w @hm-design/org-chart --ignore-scripts --pack-destination test-results
npm pack -w @hm-design/org-chart-react --ignore-scripts --pack-destination test-results
node examples/org-chart-react/verify-package.mjs
```

The tarball test uses extracted Core/Wrapper packages with the environment's
React/compiler; it does not establish a fresh remote-registry installation.

## P2 read-only Full Composition

Open `p1.html?mode=readOnly` to use the same read-only Core composition as the
Vanilla example and Storybook `orgchart--full-composition`. Plain `p1.html`
retains the existing interactive mode. The query changes presentation only.
All displayed names are `홍 길 동`; the employee fixture and aggregation remain
unchanged. Department leaders use card assets by actual ancestry depth.

After building the Core, preparing the HTML example and building this consumer,
run `node examples/org-chart/verify-p2.mjs` from the repository root. Set
`ORGCHART_STORYBOOK_URL` to the current Storybook server when checking dev.
The focused verifier records screenshots and measurements in
`test-results/org-chart-p2`; it preserves existing v0/P1 test expectations.