{"_id":"@alm.world/dao-bagua-diagram","_rev":"3-e9310dcc49f36fef345f77bd3f504388","name":"@alm.world/dao-bagua-diagram","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@alm.world/dao-bagua-diagram","version":"0.0.1","keywords":["react","bagua","iching","taiji","dao","diagram","animation"],"license":"MIT","_id":"@alm.world/dao-bagua-diagram@0.0.1","maintainers":[{"name":"kindkang","email":"kindkang2024@gmail.com"}],"dist":{"shasum":"d116a78dc6377de2b160ba341f3129d6a58e7b2f","tarball":"https://registry.npmjs.org/@alm.world/dao-bagua-diagram/-/dao-bagua-diagram-0.0.1.tgz","fileCount":38,"integrity":"sha512-titcI//LIwerlCWSqDmBfDC7FFvEw1jeqVi2HEIdsN5r5AxAB4aenJ4Fz5Oa0jPf7rtt7FZa1zRzljQMXQ9UXA==","signatures":[{"sig":"MEUCIQDuEO9uhJPC2M7qOD3wACjxw6gvUYV9M26lrusHyO7duwIgFLXC/stfJqANfY2UpyzXSUr44NnY05TVsQtbhlJ+SPc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":367195},"main":"./dist/index.js","type":"module","_from":"file:alm.world-dao-bagua-diagram-0.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"scripts":{"build":"vite build"},"_npmUser":{"name":"kindkang","email":"kindkang2024@gmail.com"},"_resolved":"/private/tmp/claude-501/a1a4c36ee327b0f4069a060536ee856f/alm.world-dao-bagua-diagram-0.0.1.tgz","_integrity":"sha512-titcI//LIwerlCWSqDmBfDC7FFvEw1jeqVi2HEIdsN5r5AxAB4aenJ4Fz5Oa0jPf7rtt7FZa1zRzljQMXQ9UXA==","_npmVersion":"10.9.2","description":"Animated I Ching / Bagua (八卦) Dao diagrams and flow charts as React components.","directories":{},"sideEffects":["**/*.css","**/*.scss"],"_nodeVersion":"22.14.0","dependencies":{"animejs":"^4.3.6","@dagrejs/dagre":"^1.1.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.80.0","vite":"^7.1.7","react":"^19.2.0","@types/react":"^19.0.0","vite-plugin-dts":"^4.5.4","@vitejs/plugin-react":"^5.0.4"},"peerDependencies":{"react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dao-bagua-diagram_0.0.1_1780384066138_0.8391445870694312","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@alm.world/dao-bagua-diagram","version":"0.0.2","keywords":["react","bagua","iching","taiji","dao","diagram","animation"],"license":"MIT","_id":"@alm.world/dao-bagua-diagram@0.0.2","maintainers":[{"name":"kindkang","email":"kindkang2024@gmail.com"}],"dist":{"shasum":"0113db5115b342af4e5a08e01f7cf907aae6f36e","tarball":"https://registry.npmjs.org/@alm.world/dao-bagua-diagram/-/dao-bagua-diagram-0.0.2.tgz","fileCount":38,"integrity":"sha512-XvUZmEFTtsEL8LumhyFxe2foK/Y7paeOtsoRu246p9TTO3dZB3Nm+YJNX7yKf8J3fIiGJsPleBb41dlPrO9pYA==","signatures":[{"sig":"MEQCICvpbycuLp5xw6JHlMoJnL+XdmbZjBwhMA37yTIUTGSaAiB0NVsul1HEdztX1dkffmCrkN6i56oo1IRe2P6fkVX7fg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":370152},"main":"./dist/index.js","type":"module","_from":"file:alm.world-dao-bagua-diagram-0.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"scripts":{"build":"vite build","release":"set -a; . ../../.env 2>/dev/null; set +a; pnpm publish --access public --no-git-checks","release:major":"npm version major && pnpm run release","release:minor":"npm version minor && pnpm run release","release:patch":"npm version patch && pnpm run release"},"_npmUser":{"name":"kindkang","email":"kindkang2024@gmail.com"},"_resolved":"/private/tmp/claude-501/62ba0dbcd579e2f3a607d060885e7779/alm.world-dao-bagua-diagram-0.0.2.tgz","_integrity":"sha512-XvUZmEFTtsEL8LumhyFxe2foK/Y7paeOtsoRu246p9TTO3dZB3Nm+YJNX7yKf8J3fIiGJsPleBb41dlPrO9pYA==","_npmVersion":"10.9.2","description":"Animated I Ching / Bagua (八卦) Dao diagrams and flow charts as React components.","directories":{},"sideEffects":["**/*.css","**/*.scss"],"_nodeVersion":"22.14.0","dependencies":{"animejs":"^4.3.6","@dagrejs/dagre":"^1.1.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.80.0","vite":"^7.1.7","react":"^19.2.0","@types/react":"^19.0.0","vite-plugin-dts":"^4.5.4","@vitejs/plugin-react":"^5.0.4"},"peerDependencies":{"react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dao-bagua-diagram_0.0.2_1780385886947_0.15156703235550983","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@alm.world/dao-bagua-diagram","version":"0.0.3","description":"Animated I Ching / Bagua (八卦) Dao diagrams and flow charts as React components.","license":"MIT","type":"module","sideEffects":["**/*.css","**/*.scss"],"main":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"keywords":["react","bagua","iching","taiji","dao","diagram","animation"],"peerDependencies":{"react":"^19.0.0"},"dependencies":{"animejs":"^4.3.6","@dagrejs/dagre":"^1.1.4"},"devDependencies":{"@types/react":"^19.0.0","@vitejs/plugin-react":"^5.0.4","react":"^19.2.0","sass":"^1.80.0","vite":"^7.1.7","vite-plugin-dts":"^4.5.4"},"publishConfig":{"access":"public"},"scripts":{"build":"vite build","release":"set -a; . ../../.env 2>/dev/null; set +a; pnpm publish --access public --no-git-checks","release:patch":"npm version patch && pnpm run release","release:minor":"npm version minor && pnpm run release","release:major":"npm version major && pnpm run release"},"module":"./dist/index.js","types":"./dist/index.d.ts","_id":"@alm.world/dao-bagua-diagram@0.0.3","_integrity":"sha512-7hl/u0e474XSFiLX3FfOOu86gU/2EnxcUpEGUx7CXjPomx2N66HPH71n+XLP6ygJDDa3UPuSo5IDDLjPQHqkkA==","_resolved":"/private/tmp/claude-501/c48ff6aa7946fa45c141b17abc366848/alm.world-dao-bagua-diagram-0.0.3.tgz","_from":"file:alm.world-dao-bagua-diagram-0.0.3.tgz","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-7hl/u0e474XSFiLX3FfOOu86gU/2EnxcUpEGUx7CXjPomx2N66HPH71n+XLP6ygJDDa3UPuSo5IDDLjPQHqkkA==","shasum":"01575133e5a136b64b466113a46aa6ac7271316f","tarball":"https://registry.npmjs.org/@alm.world/dao-bagua-diagram/-/dao-bagua-diagram-0.0.3.tgz","fileCount":40,"unpackedSize":407629,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDxAszhVahriNgcYKVLPLapgC7jue+bN8UrWz6i7xDRHAiEA3rqkoj7N7TZL43jw2M3Hk8K7yF+sLSrIf5RM1tmVJn4="}]},"_npmUser":{"name":"kindkang","email":"kindkang2024@gmail.com"},"directories":{},"maintainers":[{"name":"kindkang","email":"kindkang2024@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dao-bagua-diagram_0.0.3_1780454339466_0.3644521848646509"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-02T07:07:46.000Z","modified":"2026-06-03T02:38:59.742Z","0.0.1":"2026-06-02T07:07:46.267Z","0.0.2":"2026-06-02T07:38:07.167Z","0.0.3":"2026-06-03T02:38:59.615Z"},"license":"MIT","keywords":["react","bagua","iching","taiji","dao","diagram","animation"],"description":"Animated I Ching / Bagua (八卦) Dao diagrams and flow charts as React components.","maintainers":[{"name":"kindkang","email":"kindkang2024@gmail.com"}],"readme":"# @alm.world/dao-bagua-diagram\n\nAnimated I Ching / Bagua (八卦) Dao diagrams, taiji deal animations, and flow\ncharts as React components.\n\n## Install\n\n```bash\nnpm install @alm.world/dao-bagua-diagram\n# peer + runtime deps\nnpm install react animejs @dagrejs/dagre\n```\n\n> Requires **React 19+**. `animejs` and `@dagrejs/dagre` are runtime\n> dependencies and are installed automatically.\n\n## Usage\n\n```tsx\nimport { DaoBaguaDiagram, IChingDaoDiagram, FlowDiagram } from '@alm.world/dao-bagua-diagram';\n// Import the stylesheet once, anywhere in your app entry:\nimport '@alm.world/dao-bagua-diagram/style.css';\n\nexport function App() {\n    return <DaoBaguaDiagram />;\n}\n```\n\nThe `style.css` import is required: it carries the SCSS-module styles\n(`BaguaSectionCard`, `IChingDaoDiagram`) **and** the neutral fallback theme\ntokens (see below). If you skip it those pieces render unstyled.\n\n## Theming\n\nThe flow charts (`FlowDiagram`, `DealFlowChart`) **inherit your app's semantic\ntheme tokens** when they exist — the shadcn/ui + Tailwind convention:\n\n| Token            | Used for              |\n|------------------|-----------------------|\n| `--foreground`   | node / body text      |\n| `--background`   | canvas backdrop       |\n| `--muted`        | node / pill surfaces  |\n| `--border`       | node / pill borders   |\n| `--meta-color`   | secondary text        |\n\nYou don't have to define these. When they're absent the package falls back to\nits own `--dbd-*` tokens (shipped in `style.css`, auto light/dark via\n`prefers-color-scheme`), so the chart is always legible standalone.\n\nIf your app uses a **different** naming convention, just alias yours onto the\npackage's contract on any ancestor element:\n\n```css\n.my-app {\n    --foreground: var(--ink-0);\n    --background: var(--bg-0);\n    --muted:      var(--bg-1);\n    --border:     var(--line);\n    --meta-color: var(--ink-1);\n}\n```\n\nOr override the package tokens directly (`--dbd-foreground`, `--dbd-background`,\n`--dbd-muted`, `--dbd-border`, `--dbd-muted-foreground`).\n\n## Exports\n\nSee [`src/index.ts`](src/index.ts) for the full list. Highlights:\n\n- `DaoBaguaDiagram` (default) — the full animated bagua diagram\n- `IChingDiagram`, `IChingDaoDiagram` — taiji + heart center piece\n- `BaguaSectionCard`, `InfoPanel`\n- `FlowDiagram`, `DealFlowChart` — DUKI flow charts\n- `TaijiDeal`, `HalfTaijiYangMaker`, `HalfTaijiYinTaker`\n- `getLocaleData` + locale types\n\n## Build\n\n```bash\npnpm build   # → dist/index.js, dist/index.d.ts, dist/style.css\n```\n\n## Publishing\n\n```bash\npnpm publish --access public\n```\n\n`pnpm` rewrites the package entry points to `dist/` on publish (via the\n`publishConfig` field), so in-repo consumers keep using the TypeScript source\nwith HMR while npm consumers get the compiled bundle.\n","readmeFilename":"README.md"}