feat(chart): add @hm-design/chart package with Bar, Line, Donut, Pie, Radar, Area and Radial charts

- new workspace package packages/chart (shadcn/ui Chart + Recharts, HM Theme tokens), examples entry with sample data
- Storybook Chart group (src/chart), consumer example (examples/chart), build:chart / build:chart-example scripts
- README rewritten as the AI usage guide (install, CSS wiring, chart selection, data rules, verification)
- docs: package count/list, Submodule guide (chart workspace, React dedupe), shared AI_GUIDE row, MAINTAINING, story inventory

docs/guidelines/external-install-submodule.md

@@ -1,6 +1,6 @@
 # 외부 프로젝트 설치 — Git Submodule + npm Workspace
 
-> 2026-10-20 작성, 2026-10-23 갱신(저장소 주소 `shkim4`, HM 패키지 npm Registry 미사용 명시). 현재 HMDesign을 다른 React 프로젝트에서 쓰는 공식 방식입니다. npm Registry publish 없이 Git 저장소를 Submodule로 연결하고, HMDesign 안에서 패키지를 빌드한 뒤 소비 프로젝트의 npm Workspace로 연결합니다.
+> 2026-10-20 작성, 2026-10-23 갱신(저장소 주소 `shkim4`, HM 패키지 npm Registry 미사용 명시), 2026-11-06 갱신(`@hm-design/chart` 연결·React 중복 해석 방지 추가). 현재 HMDesign을 다른 React 프로젝트에서 쓰는 공식 방식입니다. npm Registry publish 없이 Git 저장소를 Submodule로 연결하고, HMDesign 안에서 패키지를 빌드한 뒤 소비 프로젝트의 npm Workspace로 연결합니다.
 > 실제 적용 근거: 외부 DWG/DXF Viewer(React 19, `@hm-design/ui` + `@hm-design/sw`)가 이 절차로 연결되었습니다. 패키지 tarball 소비 검증은 `packages/sw/tests/integrated-consumer.mjs`가 별도로 수행합니다.
 
 ## 1. 전제
@@ -39,7 +39,7 @@ cd ..
 ```
 
 - `npm ci`는 HMDesign 자체 빌드 도구(Vite·TypeScript·Tailwind 등)를 `HMDesign/node_modules`에 설치합니다. 패키지 빌드 스크립트가 이 위치의 도구를 사용하므로 생략할 수 없습니다.
-- `build:packages`는 `org-chart → ui → center-graphic → org-chart-react → sw` 순서로 5개 패키지의 `dist/`를 만듭니다. 필요한 패키지만 빌드할 때는 `npm run build:ui`, `npm run build:sw`를 쓸 수 있고, `org-chart-react`는 `org-chart`를 먼저 빌드해야 합니다.
+- `build:packages`는 `org-chart → ui → center-graphic → chart → org-chart-react → sw` 순서로 6개 패키지의 `dist/`를 만듭니다. 필요한 패키지만 빌드할 때는 `npm run build:ui`, `npm run build:chart`, `npm run build:sw`를 쓸 수 있고, `org-chart-react`는 `org-chart`를 먼저 빌드해야 합니다. `@hm-design/chart`는 `@hm-design/ui`의 `theme.css`(토큰·글꼴)를 소비 앱이 연결해야 하므로 `build:ui`도 함께 실행합니다.
 
 ## 4. 소비 프로젝트 Workspace 연결
 
@@ -63,6 +63,8 @@ npm install
 
 - `npm install` 후 `node_modules/@hm-design/<패키지>`는 `HMDesign/packages/<패키지>`를 가리키는 링크입니다. Import는 패키지 `exports`의 공개 진입점만 사용합니다(`dist`·`src` 내부 경로 금지).
 - OrgChart를 쓰면 `HMDesign/packages/org-chart`(와 React에서는 `HMDesign/packages/org-chart-react`)를 추가합니다.
+- 차트를 쓰면 `HMDesign/packages/chart`와 **`HMDesign/packages/ui`를 함께** Workspace·dependency에 추가합니다(`@hm-design/chart`의 peer이며 CSS 토큰용입니다). `recharts` 등 차트 dependency는 `npm install`이 설치합니다.
+- **React 중복 해석 방지(차트에서 확인).** Submodule 안의 `HMDesign/node_modules`에도 `react`가 설치되어 있어, 소비 프로젝트의 Vite가 패키지 `dist`의 `react` import를 그쪽으로 해석하면 React가 둘이 되어 렌더링이 실패합니다(`Cannot read properties of null (reading useId)`). 소비 프로젝트 `vite.config`에 `resolve: { dedupe: ["react", "react-dom"] }`를 지정합니다. 임시 소비 프로젝트(Vite 7)에서 `dedupe` 없이는 차트가 비었고, 지정 후 렌더링됨을 확인했습니다.
 - Vite 소비 프로젝트는 HMDesign 저장소 안의 예제·Export용 HTML을 의존성 스캔에서 제외하도록 `optimizeDeps.entries: ['index.html']`를 지정합니다(외부 Viewer에서 확인된 설정).
 
 ## 5. CSS Import
@@ -71,6 +73,7 @@ npm install
 |---|---|
 | Web `@hm-design/ui` | CSS entry에서 `@import "tailwindcss";` → `@import "@hm-design/ui/tailwind.css";` → `@import "@hm-design/ui/theme.css";`. Tailwind 검색 범위는 [Runtime portability](./runtime-portability.md#21-tailwind-v4-소비자-검색-범위)를 따릅니다. |
 | SW `@hm-design/sw` | `import "@hm-design/sw/styles.css"`를 한 번. JS import만으로 CSS가 들어오지 않습니다. 글꼴 파일은 포함하지 않습니다(기본 Noto Sans KR). |
+| Chart `@hm-design/chart` | CSS entry에서 `@import "tailwindcss" source("./");` → `@import "@hm-design/ui/tailwind.css";` → `@import "@hm-design/chart/tailwind.css";` → `@import "@hm-design/ui/theme.css";`. 차트 스타일은 JS import가 자동으로 불러옵니다. 상세는 [`packages/chart/README.md`](../../packages/chart/README.md). |
 | OrgChart | Core CSS 두 개(`@hm-design/org-chart/engine.css`, `@hm-design/org-chart/style.css`)를 URL로 해석해 `stylesheetUrls`에 전달합니다(Shadow DOM). 문서에 import하는 것만으로는 적용되지 않습니다. |
 
 Web과 SW를 함께 쓰면 두 CSS의 순서는 서로의 계산 스타일을 바꾸지 않습니다(`integrated-consumer` 검증 항목).
@@ -79,6 +82,7 @@ Web과 SW를 함께 쓰면 두 CSS의 순서는 서로의 계산 스타일을
 
 - 소비 프로젝트의 AI 코딩 도구는 `node_modules/@hm-design/<패키지>/ai/`(= `HMDesign/packages/<패키지>/ai/`)를 읽습니다. 진입점은 각 폴더의 `AI_GUIDE.md`이며 사용 유형(Web / SW 일반·뷰어 / OrgChart / 혼합)을 먼저 정합니다.
 - 루트 `AGENTS.md`·`CLAUDE.md`는 자동으로 연결되지 않습니다. `ai/AGENTS_SNIPPET.md`의 문구를 소비 프로젝트 루트 지침에 붙입니다(방법은 `AI_GUIDE.md`의 "소비 프로젝트 설정").
+- `@hm-design/chart`에는 `ai/` 폴더가 없습니다. 차트 사용 지침은 `node_modules/@hm-design/chart/README.md`(= `HMDesign/packages/chart/README.md`)이며, 소비 프로젝트 루트 지침에서 이 README를 명시적으로 가리킵니다(`AI_GUIDE.md`의 "소비 프로젝트 설정").
 - HMDesign 저장소 루트의 `AGENTS.md`·`CLAUDE.md`는 HMDesign을 개발하는 AI용이며 소비 프로젝트 지침이 아닙니다.
 
 ## 7. HMDesign 버전 갱신