@alm.world/dao-bagua-diagram

Animated I Ching / Bagua (八卦) Dao diagrams, taiji deal animations, and flow charts as React components.

Install

npm install @alm.world/dao-bagua-diagram
# peer + runtime deps
npm install react animejs @dagrejs/dagre

Requires React 19+. animejs and @dagrejs/dagre are runtime dependencies and are installed automatically.

Usage

import { DaoBaguaDiagram, IChingDaoDiagram, FlowDiagram } from '@alm.world/dao-bagua-diagram';
// Import the stylesheet once, anywhere in your app entry:
import '@alm.world/dao-bagua-diagram/style.css';

export function App() {
    return <DaoBaguaDiagram />;
}

The style.css import is required: it carries the SCSS-module styles (BaguaSectionCard, IChingDaoDiagram) and the neutral fallback theme tokens (see below). If you skip it those pieces render unstyled.

Theming

The flow charts (FlowDiagram, DealFlowChart) inherit your app's semantic theme tokens when they exist — the shadcn/ui + Tailwind convention:

| Token | Used for | |------------------|-----------------------| | --foreground | node / body text | | --background | canvas backdrop | | --muted | node / pill surfaces | | --border | node / pill borders | | --meta-color | secondary text |

You don't have to define these. When they're absent the package falls back to its own --dbd-* tokens (shipped in style.css, auto light/dark via prefers-color-scheme), so the chart is always legible standalone.

If your app uses a different naming convention, just alias yours onto the package's contract on any ancestor element:

.my-app {
    --foreground: var(--ink-0);
    --background: var(--bg-0);
    --muted:      var(--bg-1);
    --border:     var(--line);
    --meta-color: var(--ink-1);
}

Or override the package tokens directly (--dbd-foreground, --dbd-background, --dbd-muted, --dbd-border, --dbd-muted-foreground).

Exports

See src/index.ts for the full list. Highlights:

• DaoBaguaDiagram (default) — the full animated bagua diagram
• IChingDiagram, IChingDaoDiagram — taiji + heart center piece
• BaguaSectionCard, InfoPanel
• FlowDiagram, DealFlowChart — DUKI flow charts
• TaijiDeal, HalfTaijiYangMaker, HalfTaijiYinTaker
• getLocaleData + locale types

Build

pnpm build   # → dist/index.js, dist/index.d.ts, dist/style.css

Publishing

pnpm publish --access public

pnpm rewrites the package entry points to dist/ on publish (via the publishConfig field), so in-repo consumers keep using the TypeScript source with HMR while npm consumers get the compiled bundle.