@vanduo-oss/vd3-cbun 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +50 -0
- package/LICENSE +22 -0
- package/README.md +160 -0
- package/SKILL.md +119 -0
- package/dist/charts/core.d.ts +273 -0
- package/dist/charts/index.cjs +1828 -0
- package/dist/charts/index.cjs.map +7 -0
- package/dist/charts/index.d.ts +65 -0
- package/dist/charts/index.js +1805 -0
- package/dist/charts/index.js.map +7 -0
- package/dist/charts/vd3-charts.css +51 -0
- package/dist/charts/vue.d.ts +86 -0
- package/dist/flowchart/core.d.ts +288 -0
- package/dist/flowchart/index.cjs +3447 -0
- package/dist/flowchart/index.cjs.map +7 -0
- package/dist/flowchart/index.d.ts +54 -0
- package/dist/flowchart/index.js +3424 -0
- package/dist/flowchart/index.js.map +7 -0
- package/dist/flowchart/vd3-flowchart.css +600 -0
- package/dist/flowchart/vue.d.ts +66 -0
- package/dist/hex-grid/core.d.ts +200 -0
- package/dist/hex-grid/hex-math.cjs +162 -0
- package/dist/hex-grid/hex-math.cjs.map +7 -0
- package/dist/hex-grid/hex-math.d.ts +119 -0
- package/dist/hex-grid/hex-math.js +141 -0
- package/dist/hex-grid/hex-math.js.map +7 -0
- package/dist/hex-grid/index.cjs +915 -0
- package/dist/hex-grid/index.cjs.map +7 -0
- package/dist/hex-grid/index.d.ts +15 -0
- package/dist/hex-grid/index.js +894 -0
- package/dist/hex-grid/index.js.map +7 -0
- package/dist/hex-grid/vue.d.ts +14 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +11 -0
- package/dist/index.js.map +7 -0
- package/dist/meta.json +551 -0
- package/dist/music-player/core.d.ts +88 -0
- package/dist/music-player/index.cjs +1227 -0
- package/dist/music-player/index.cjs.map +7 -0
- package/dist/music-player/index.d.ts +12 -0
- package/dist/music-player/index.js +1204 -0
- package/dist/music-player/index.js.map +7 -0
- package/dist/music-player/vd3-music-player.css +829 -0
- package/dist/music-player/vue.d.ts +32 -0
- package/package.json +105 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to `@vanduo-oss/vd3-cbun` are documented here. This file
|
|
4
|
+
tracks the PACKAGE only — never docs-site content. Per-component VERSION
|
|
5
|
+
constants are listed alongside each bundle release.
|
|
6
|
+
|
|
7
|
+
## 1.0.0 — 2026-07-14
|
|
8
|
+
|
|
9
|
+
First public release of `@vanduo-oss/vd3-cbun` — the Vanduo **components bundle**
|
|
10
|
+
for the vd3 line: Vue3-only charts, flowchart, hex-grid, and music-player
|
|
11
|
+
consolidated into ONE package with tree-shakeable subpath exports, replacing the
|
|
12
|
+
four old-line per-repo publishes (`@vanduo-oss/charts`, `@vanduo-oss/flowchart`,
|
|
13
|
+
`@vanduo-oss/hex-grid`, `@vanduo-oss/music-player`). Sole peer: `vue >=3.3` — no
|
|
14
|
+
IIFE runtime and no `./vue` subpaths (the Vue bindings ARE the subpath exports;
|
|
15
|
+
framework-agnostic cores are re-exported alongside them). The bullets below roll
|
|
16
|
+
up the development history that makes up 1.0.0 (scaffold → consolidation →
|
|
17
|
+
tests). Publish prep (`cbun-publish-prep`) set the first public version, added
|
|
18
|
+
`publishConfig.access: "public"` and a build-before-publish `release` script
|
|
19
|
+
(the hardened `.npmrc ignore-scripts=true` skips `prepack` at publish time, so
|
|
20
|
+
the release must build explicitly), relaxed `engines.node` `>=24` → `>=20.19.0`
|
|
21
|
+
for LTS consumers, and finished the README/SKILL to the house standard
|
|
22
|
+
(`Install`, `Theming`, `Security`).
|
|
23
|
+
|
|
24
|
+
Component versions in this release: **charts 1.0.0, flowchart 1.2.0, hex-grid
|
|
25
|
+
1.0.0, music-player 1.0.0** — the bundle's own semver is decoupled from the
|
|
26
|
+
per-component `VERSION` constants (tracked in `component-versions.json` and
|
|
27
|
+
asserted against the exported `VD3_CBUN_VERSIONS` map). `VD_FLOWCHART_VERSION`
|
|
28
|
+
continues the old-line `1.2.0` lineage because it is serialized into user
|
|
29
|
+
documents via `toJSON().version`; resetting it would mislabel documents saved by
|
|
30
|
+
the old line.
|
|
31
|
+
|
|
32
|
+
- Component consolidation (`cbun-consolidation`) + test suites (`cbun-tests`):
|
|
33
|
+
- All four components ported Vue3-only from their standalone repos, vanilla
|
|
34
|
+
auto-init/window-global layers excised: `./charts`, `./flowchart`,
|
|
35
|
+
`./hex-grid` (+ `./hex-grid/hex-math`), `./music-player`, with per-component
|
|
36
|
+
`./…/css` where applicable (hex-grid is canvas-rendered, no CSS).
|
|
37
|
+
- Multi-entry esbuild build (esm+cjs per subpath, `vue` external) with
|
|
38
|
+
post-build guards: all 20 export targets verified on disk, subpath
|
|
39
|
+
tree-shake isolation, vue-externality.
|
|
40
|
+
- Newly authored hex-grid core type declarations (`index.d.ts`,
|
|
41
|
+
`hex-math.d.ts`); music-player types moved into `src/music-player/`.
|
|
42
|
+
- Tests: 15 vitest files / 261 tests (core logic + Vue wrapper mounts),
|
|
43
|
+
tsc type-test harness (`test:types`), Playwright real-canvas smoke
|
|
44
|
+
(`test:e2e`, charts + hex-grid).
|
|
45
|
+
- Music-player keeps DOM CustomEvents (`musicplayer:*`) in v1 by design.
|
|
46
|
+
- Repo scaffold (`init-cbun-scaffold`): package metadata with the full subpath
|
|
47
|
+
exports contract, hardened pnpm install policy, Phase-0 esbuild harness (root
|
|
48
|
+
entry only), `component-versions.json` manifest (charts 1.0.0, flowchart
|
|
49
|
+
1.2.0, hex-grid 1.0.0, music-player 1.0.0), version-consistency smoke test,
|
|
50
|
+
CI, and doc stubs.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Vanduo Open Source Foundation
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
22
|
+
|
package/README.md
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
# @vanduo-oss/vd3-cbun
|
|
2
|
+
|
|
3
|
+
[](./LICENSE)
|
|
4
|
+
|
|
5
|
+
The Vanduo **components bundle** for the vd3 line: Vue3-only charts, flowchart,
|
|
6
|
+
hex-grid, and music-player consolidated into ONE package with tree-shakeable
|
|
7
|
+
subpath exports. It replaces the four per-repo publishes (`@vanduo-oss/charts`,
|
|
8
|
+
`@vanduo-oss/flowchart`, `@vanduo-oss/hex-grid`, `@vanduo-oss/music-player`)
|
|
9
|
+
of the old line.
|
|
10
|
+
|
|
11
|
+
**Status: 1.0.0 — first public release.** All four component families are
|
|
12
|
+
consolidated Vue3-only (vanilla auto-init/window-global layers excised), each on
|
|
13
|
+
its own tree-shakeable subpath, with the esbuild metafile isolation guard in
|
|
14
|
+
place.
|
|
15
|
+
|
|
16
|
+
## Install
|
|
17
|
+
|
|
18
|
+
```sh
|
|
19
|
+
pnpm add @vanduo-oss/vd3-cbun
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
`vue >=3.3.0` is a **required** peer dependency (the only runtime dep) — install
|
|
23
|
+
it alongside if your project does not already depend on Vue. For correct
|
|
24
|
+
theming, also provide the Vanduo `--vd-*` design tokens (see
|
|
25
|
+
[Theming](#theming)).
|
|
26
|
+
|
|
27
|
+
## Subpath-import model
|
|
28
|
+
|
|
29
|
+
Each component lives on its own subpath — importing one never pulls in another:
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
import { VdChart } from '@vanduo-oss/vd3-cbun/charts';
|
|
33
|
+
import '@vanduo-oss/vd3-cbun/charts/css';
|
|
34
|
+
|
|
35
|
+
import { VdFlowchart } from '@vanduo-oss/vd3-cbun/flowchart';
|
|
36
|
+
import '@vanduo-oss/vd3-cbun/flowchart/css';
|
|
37
|
+
|
|
38
|
+
import { VdHexGrid } from '@vanduo-oss/vd3-cbun/hex-grid';
|
|
39
|
+
import { hexToPixel } from '@vanduo-oss/vd3-cbun/hex-grid/hex-math';
|
|
40
|
+
|
|
41
|
+
import { VdMusicPlayer } from '@vanduo-oss/vd3-cbun/music-player';
|
|
42
|
+
import '@vanduo-oss/vd3-cbun/music-player/css';
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
The root import exposes only the per-component VERSION-constants map:
|
|
46
|
+
|
|
47
|
+
```js
|
|
48
|
+
import { VD3_CBUN_VERSIONS } from '@vanduo-oss/vd3-cbun';
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Each subpath entry (`dist/<component>/index.js`) re-exports **both** the Vue
|
|
52
|
+
component and its framework-agnostic core (the core aliased with a `Core`
|
|
53
|
+
suffix where the names collide — `VdFlowchartCore`, `VdHexGridCore`). Isolation
|
|
54
|
+
is not a convention but a build guard: `scripts/build.js` bundles every entry
|
|
55
|
+
separately with `vue` external, emits an esbuild metafile (`dist/meta.json`),
|
|
56
|
+
and **fails the build** if any component entry's inputs reach outside its own
|
|
57
|
+
`src/<component>/` directory or if anything but `vue` is externalized. The
|
|
58
|
+
package declares `sideEffects: ["**/*.css"]`, so bundlers may drop any unused
|
|
59
|
+
JS export while preserving the CSS side-effect imports. Inspect `dist/meta.json`
|
|
60
|
+
to confirm tree-shaking downstream.
|
|
61
|
+
|
|
62
|
+
Notes:
|
|
63
|
+
|
|
64
|
+
- `vue >=3.3.0` is a **required** peer dependency (the only runtime dep; never
|
|
65
|
+
bundled — it stays external in both the esm and cjs outputs).
|
|
66
|
+
- Named exports only — no default exports on any subpath.
|
|
67
|
+
- No IIFE builds and no `./vue` subpaths — the Vue bindings ARE the subpath
|
|
68
|
+
exports; framework-agnostic cores stay exported alongside them.
|
|
69
|
+
- hex-grid ships no CSS (canvas-based; it reads `--vd-*` tokens via
|
|
70
|
+
`getComputedStyle`).
|
|
71
|
+
|
|
72
|
+
## Per-component version policy
|
|
73
|
+
|
|
74
|
+
The bundle's own semver (`package.json` version) is decoupled from the
|
|
75
|
+
components inside it. Each component carries a VERSION constant tracked in
|
|
76
|
+
`component-versions.json` at the repo root and asserted in tests against the
|
|
77
|
+
exported `VD3_CBUN_VERSIONS` map. At bundle launch, charts, hex-grid, and
|
|
78
|
+
music-player reset to `1.0.0`; **flowchart continues its old-line lineage at
|
|
79
|
+
`1.2.0`** because `VD_FLOWCHART_VERSION` is load-bearing — it is serialized
|
|
80
|
+
into user documents via `toJSON().version`.
|
|
81
|
+
|
|
82
|
+
## Theming
|
|
83
|
+
|
|
84
|
+
All four components render against Vanduo's `--vd-*` design tokens — the same
|
|
85
|
+
tokens `@vanduo-oss/vd3` defines. charts, flowchart, and hex-grid carry built-in
|
|
86
|
+
fallbacks and degrade gracefully without them; **music-player expects the tokens**
|
|
87
|
+
and renders with unset colors/backgrounds if none are provided. For correct
|
|
88
|
+
theming, supply the tokens on an ancestor element — the simplest way is to ship
|
|
89
|
+
the vd3 stylesheet:
|
|
90
|
+
|
|
91
|
+
```js
|
|
92
|
+
import '@vanduo-oss/vd3/css'; // full tokens + component CSS
|
|
93
|
+
// …or the tokens-only layer:
|
|
94
|
+
import '@vanduo-oss/vd3/css/core';
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
The tokens consumed include `--vd-bg-primary`, `--vd-bg-secondary`,
|
|
98
|
+
`--vd-text-primary`, `--vd-text-muted`, `--vd-border-color`, and
|
|
99
|
+
`--vd-color-primary`. hex-grid reads them off the host element via
|
|
100
|
+
`getComputedStyle`; the CSS-based components resolve them through `var(--vd-*)`.
|
|
101
|
+
(vd3 is not a package dependency of the bundle — any provider of the `--vd-*`
|
|
102
|
+
tokens works — but it is the canonical source.)
|
|
103
|
+
|
|
104
|
+
## Security
|
|
105
|
+
|
|
106
|
+
- **One runtime dependency** — the `vue >=3.3.0` peer; nothing else is bundled
|
|
107
|
+
or required (`vue` stays external in every esm/cjs output, and the build fails
|
|
108
|
+
if any other module is externalized or any `node_modules` input is bundled).
|
|
109
|
+
- **Hardened `.npmrc`:** `ignore-scripts`, `minimum-release-age`, `save-exact`,
|
|
110
|
+
`strict-peer-dependencies`, `trust-policy=no-downgrade`,
|
|
111
|
+
`block-exotic-subdeps`, and an explicit `registry`.
|
|
112
|
+
- **MIT** licensed ([LICENSE](./LICENSE)); the bundle vendors no third-party
|
|
113
|
+
runtime code.
|
|
114
|
+
|
|
115
|
+
## Exports
|
|
116
|
+
|
|
117
|
+
| Export | Contents |
|
|
118
|
+
| ----------------------------------------- | ------------------------------------------------------------ |
|
|
119
|
+
| `@vanduo-oss/vd3-cbun` | Root — the `VD3_CBUN_VERSIONS` per-component version map |
|
|
120
|
+
| `@vanduo-oss/vd3-cbun/charts` | `VdChart` + typed chart wrappers, factories, scales, `resolveTheme` |
|
|
121
|
+
| `@vanduo-oss/vd3-cbun/charts/css` | Charts stylesheet (`dist/charts/vd3-charts.css`) |
|
|
122
|
+
| `@vanduo-oss/vd3-cbun/flowchart` | `VdFlowchart` + `VdFlowchartCore`, `computeLayout`, `FLOWCHART_*` |
|
|
123
|
+
| `@vanduo-oss/vd3-cbun/flowchart/css` | Flowchart stylesheet (`dist/flowchart/vd3-flowchart.css`) |
|
|
124
|
+
| `@vanduo-oss/vd3-cbun/hex-grid` | `VdHexGrid` + `VdHexGridCore`, `VD_HEX_VERSION` |
|
|
125
|
+
| `@vanduo-oss/vd3-cbun/hex-grid/hex-math` | Pure coordinate/terrain math (`hexToPixel`, `TerrainType`, …) |
|
|
126
|
+
| `@vanduo-oss/vd3-cbun/music-player` | `VdMusicPlayer` + `MusicPlayer` core |
|
|
127
|
+
| `@vanduo-oss/vd3-cbun/music-player/css` | Music-player stylesheet (`dist/music-player/vd3-music-player.css`) |
|
|
128
|
+
|
|
129
|
+
## Development
|
|
130
|
+
|
|
131
|
+
```sh
|
|
132
|
+
pnpm install
|
|
133
|
+
pnpm lint # eslint
|
|
134
|
+
pnpm format:check # prettier
|
|
135
|
+
pnpm test # vitest unit/wrapper suites (jsdom + node)
|
|
136
|
+
pnpm build # esbuild harness → dist/
|
|
137
|
+
pnpm test:types # tsc --noEmit over tests/types (needs dist/ — run build first)
|
|
138
|
+
pnpm test:e2e # Playwright canvas smoke, Chromium (needs dist/ — run build first)
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
`test:types` and `test:e2e` both consume the built `dist/` output, so **run
|
|
142
|
+
`pnpm build` first** (CI orders them after the build step). The type harness
|
|
143
|
+
type-checks the shipped declarations by resolving the package's own `exports`
|
|
144
|
+
map (self-reference → `dist/<component>/*.d.ts`); the Playwright fixtures
|
|
145
|
+
(`tests/e2e/fixtures/*.html`) import the built ESM entries directly and are
|
|
146
|
+
served over a dependency-free `python3 -m http.server` (the `vue` external is
|
|
147
|
+
resolved to the locally installed browser build via an import map). Chromium
|
|
148
|
+
must be installed once: `pnpm exec playwright install chromium`.
|
|
149
|
+
|
|
150
|
+
The published package declares a consumer-friendly `engines.node >=20.19.0`; the
|
|
151
|
+
dev/CI toolchain pins Node 24 via `packageManager` + `.github/workflows/ci.yml`.
|
|
152
|
+
|
|
153
|
+
## Documentation
|
|
154
|
+
|
|
155
|
+
- Agent / LLM reference — [SKILL.md](./SKILL.md)
|
|
156
|
+
- Changelog — [CHANGELOG.md](./CHANGELOG.md)
|
|
157
|
+
|
|
158
|
+
## License
|
|
159
|
+
|
|
160
|
+
[MIT](./LICENSE) © Vanduo Open Source Foundation
|
package/SKILL.md
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: vanduo-vd3-cbun
|
|
3
|
+
description: Use when adding Vanduo vd3 components with @vanduo-oss/vd3-cbun — the Vue 3 components bundle (charts, flowchart, hex-grid, music-player) with tree-shakeable subpath exports. Covers install, per-subpath imports, CSS, theming, and per-component versioning.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# @vanduo-oss/vd3-cbun
|
|
7
|
+
|
|
8
|
+
One bundle, four Vue 3 components, each on its own tree-shakeable subpath
|
|
9
|
+
(`./charts`, `./flowchart`, `./hex-grid`, `./music-player`). `vue >=3.3.0` is a
|
|
10
|
+
required peer. The root import exposes only `VD3_CBUN_VERSIONS` — the per-
|
|
11
|
+
component VERSION map. Every subpath re-exports the Vue wrapper AND the
|
|
12
|
+
framework-agnostic core alongside it (the core aliased with a `Core` suffix
|
|
13
|
+
where the names collide).
|
|
14
|
+
|
|
15
|
+
## Install
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
pnpm add @vanduo-oss/vd3-cbun
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
`vue >=3.3.0` is a required peer. Import each component from its own subpath
|
|
22
|
+
(below); nothing registers globally. For correct theming, provide the Vanduo
|
|
23
|
+
`--vd-*` design tokens (see [Theming](#theming) at the end).
|
|
24
|
+
|
|
25
|
+
## Charts
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import {
|
|
29
|
+
VdChart, // generic; pick the type via the `type` prop
|
|
30
|
+
VdBarChart,
|
|
31
|
+
VdLineChart,
|
|
32
|
+
VdAreaChart,
|
|
33
|
+
VdScatterChart,
|
|
34
|
+
VdDonutChart,
|
|
35
|
+
VdPieChart,
|
|
36
|
+
} from '@vanduo-oss/vd3-cbun/charts';
|
|
37
|
+
import '@vanduo-oss/vd3-cbun/charts/css';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
The same subpath re-exports the framework-agnostic core: the chart factories
|
|
41
|
+
(`BarChart`, `LineChart`, `AreaChart`, `ScatterChart`, `DonutChart`, `PieChart`),
|
|
42
|
+
the scales (`scaleLinear`, `scaleTime`, `scaleBand`, `scalePoint`,
|
|
43
|
+
`scaleOrdinal`), accessor/tick helpers (`createAccessor`, `ticks`,
|
|
44
|
+
`niceDomain`), the path builders (`linePath`, `areaPath`, `arcPath`), and
|
|
45
|
+
`resolveTheme`. No name collision, so the core factories keep their own names.
|
|
46
|
+
CSS ships at `@vanduo-oss/vd3-cbun/charts/css`. `VD_CHARTS_VERSION` is `1.0.0`.
|
|
47
|
+
|
|
48
|
+
## Flowchart
|
|
49
|
+
|
|
50
|
+
```js
|
|
51
|
+
import { VdFlowchart, VdFlowchartCore } from '@vanduo-oss/vd3-cbun/flowchart';
|
|
52
|
+
import '@vanduo-oss/vd3-cbun/flowchart/css';
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
`VdFlowchart` is the Vue 3 wrapper; the framework-agnostic editor core is the
|
|
56
|
+
same class name upstream, so it is re-exported as `VdFlowchartCore`. The subpath
|
|
57
|
+
also re-exports `computeLayout`, `LAYOUT_MODES`, and the `FLOWCHART_*` constant
|
|
58
|
+
tables (`FLOWCHART_NODE_TYPES`, `FLOWCHART_PORTS`, `FLOWCHART_EDGE_MARKERS`,
|
|
59
|
+
`FLOWCHART_EDGE_ROUTES`) plus `VD_FLOWCHART_VERSION`. CSS ships at
|
|
60
|
+
`@vanduo-oss/vd3-cbun/flowchart/css`. `VD_FLOWCHART_VERSION` is `1.2.0` — it
|
|
61
|
+
continues the old-line lineage (never reset to `1.0.0`) because the value is
|
|
62
|
+
serialized into user documents via `toJSON().version`; resetting it would
|
|
63
|
+
mislabel documents saved by the old line.
|
|
64
|
+
|
|
65
|
+
## Hex-grid
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
import { VdHexGrid, VdHexGridCore } from '@vanduo-oss/vd3-cbun/hex-grid';
|
|
69
|
+
import {
|
|
70
|
+
hexToPixel,
|
|
71
|
+
pixelToHex,
|
|
72
|
+
axialRound,
|
|
73
|
+
getHexCorners,
|
|
74
|
+
getAdjacentHexes,
|
|
75
|
+
hexDistance,
|
|
76
|
+
TerrainType,
|
|
77
|
+
} from '@vanduo-oss/vd3-cbun/hex-grid/hex-math';
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
`VdHexGrid` is the Vue wrapper; the framework-agnostic canvas core class shares
|
|
81
|
+
the name upstream, so it is re-exported as `VdHexGridCore` alongside
|
|
82
|
+
`VD_HEX_VERSION`. The pure math module lives on its own `./hex-grid/hex-math`
|
|
83
|
+
subpath (coordinate transforms, rotation, distance, plus the terrain tables:
|
|
84
|
+
`TerrainType`, `TERRAIN_COLORS`, `TERRAIN_YIELDS`, `TERRAIN_MOVEMENT_COSTS`,
|
|
85
|
+
and the `isPassable` / `getMovementCost` / `getTerrainYields` / `getTerrainColor`
|
|
86
|
+
helpers). Hex-grid ships **no CSS** — it renders to a canvas and reads `--vd-*`
|
|
87
|
+
theme tokens off the host element via `getComputedStyle`. `VD_HEX_VERSION` is
|
|
88
|
+
`1.0.0`.
|
|
89
|
+
|
|
90
|
+
## Music-player
|
|
91
|
+
|
|
92
|
+
```js
|
|
93
|
+
import { VdMusicPlayer, MusicPlayer } from '@vanduo-oss/vd3-cbun/music-player';
|
|
94
|
+
import '@vanduo-oss/vd3-cbun/music-player/css';
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
`VdMusicPlayer` is the Vue 3 wrapper; `MusicPlayer` is the framework-agnostic
|
|
98
|
+
core (no name collision, so it keeps its own name) re-exported alongside
|
|
99
|
+
`VD_MUSIC_PLAYER_VERSION`. The core still dispatches its v1 DOM `CustomEvent`s
|
|
100
|
+
(`musicplayer:play`, `musicplayer:pause`, `musicplayer:trackchange`,
|
|
101
|
+
`musicplayer:volumechange`, `musicplayer:repeatchange`, `musicplayer:ended`,
|
|
102
|
+
`musicplayer:detach`, `musicplayer:attach`, `musicplayer:minimize`,
|
|
103
|
+
`musicplayer:expand`); the wrapper re-emits each as a Vue event (`@play`,
|
|
104
|
+
`@trackchange`, …, plus `@ready`) carrying `event.detail`. CSS ships at
|
|
105
|
+
`@vanduo-oss/vd3-cbun/music-player/css`. `VD_MUSIC_PLAYER_VERSION` is `1.0.0`.
|
|
106
|
+
|
|
107
|
+
## Theming
|
|
108
|
+
|
|
109
|
+
All four components render against Vanduo's `--vd-*` design tokens — the same
|
|
110
|
+
tokens `@vanduo-oss/vd3` defines. charts, flowchart, and hex-grid ship built-in
|
|
111
|
+
fallbacks and degrade gracefully without them; **music-player expects the tokens**
|
|
112
|
+
and renders with unset colors/backgrounds if none are present. Provide them on an
|
|
113
|
+
ancestor element — simplest is to import the vd3 stylesheet (`@vanduo-oss/vd3/css`,
|
|
114
|
+
or the tokens-only `@vanduo-oss/vd3/css/core`). Tokens consumed include
|
|
115
|
+
`--vd-bg-primary`, `--vd-bg-secondary`, `--vd-text-primary`, `--vd-text-muted`,
|
|
116
|
+
`--vd-border-color`, and `--vd-color-primary`. vd3 is **not** a package dependency
|
|
117
|
+
of the bundle — any provider of the `--vd-*` tokens works; vd3 is just the
|
|
118
|
+
canonical source. hex-grid reads the tokens off the host element via
|
|
119
|
+
`getComputedStyle`; the CSS-based components resolve them through `var(--vd-*)`.
|
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Type declarations for the vd3-cbun charts core (the framework-agnostic
|
|
3
|
+
* factory API). The Vue wrappers have their own `vue.d.ts`; both surfaces are
|
|
4
|
+
* re-exported by the `./charts` entry's `index.d.ts`.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
export type Row = Record<string, unknown>;
|
|
8
|
+
|
|
9
|
+
/** A field name (supports dotted paths) or an extractor function. */
|
|
10
|
+
export type Accessor<T = Row, R = unknown> = string | ((row: T) => R);
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Color option:
|
|
14
|
+
* - a CSS color string applied to every mark, OR a field name whose distinct
|
|
15
|
+
* values map to the theme's ordinal palette;
|
|
16
|
+
* - a function returning a CSS color per datum (e.g. `(row) => '#40c057'`).
|
|
17
|
+
*/
|
|
18
|
+
export type ColorOption<T = Row> = string | ((row: T) => string);
|
|
19
|
+
|
|
20
|
+
export interface ChartTheme {
|
|
21
|
+
fontFamily: string;
|
|
22
|
+
textColor: string;
|
|
23
|
+
mutedTextColor: string;
|
|
24
|
+
gridColor: string;
|
|
25
|
+
axisColor: string;
|
|
26
|
+
backgroundColor: string;
|
|
27
|
+
colors: string[];
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface AxisOptions {
|
|
31
|
+
label?: string;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/** Context object passed to a function `tooltip`. */
|
|
35
|
+
export interface TooltipContext<T = Row> {
|
|
36
|
+
datum: T;
|
|
37
|
+
x?: unknown;
|
|
38
|
+
y?: number;
|
|
39
|
+
/** Numeric value of the mark (y for cartesian, slice value for pie/donut). */
|
|
40
|
+
value?: number;
|
|
41
|
+
/** Category label (bar x, pie/donut slice label). */
|
|
42
|
+
label?: unknown;
|
|
43
|
+
index?: number;
|
|
44
|
+
/** Present for multi-series charts. */
|
|
45
|
+
seriesIndex?: number;
|
|
46
|
+
seriesName?: string;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export type TooltipOption<T = Row> =
|
|
50
|
+
string | false | ((datum: T, context: TooltipContext<T>) => string | false);
|
|
51
|
+
|
|
52
|
+
/** One series in a multi-series cartesian chart (bar / line / area). */
|
|
53
|
+
export interface Series<T = Row> {
|
|
54
|
+
name: string;
|
|
55
|
+
/** y accessor for this series (falls back to the chart-level `y`). */
|
|
56
|
+
y?: Accessor<T, number>;
|
|
57
|
+
/** Per-series data (falls back to the chart-level `data`). */
|
|
58
|
+
data?: T[];
|
|
59
|
+
/** Explicit color; defaults to the next theme palette slot. */
|
|
60
|
+
color?: string;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
export interface LegendOptions {
|
|
64
|
+
position?: 'top' | 'right';
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export interface DataLabelsOption {
|
|
68
|
+
/** Format the value shown (defaults to the chart's number formatting). */
|
|
69
|
+
format?: (value: number) => string;
|
|
70
|
+
color?: string;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export interface Annotation {
|
|
74
|
+
/** Horizontal reference line at this y value. */
|
|
75
|
+
y?: number;
|
|
76
|
+
/** Vertical reference line at this x value (numeric or category). */
|
|
77
|
+
x?: number | string;
|
|
78
|
+
label?: string;
|
|
79
|
+
color?: string;
|
|
80
|
+
/** Dashed by default; set `false` for a solid line. */
|
|
81
|
+
dash?: boolean;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export interface ClickEvent<T = Row> {
|
|
85
|
+
event: Event;
|
|
86
|
+
datum: T;
|
|
87
|
+
index: number;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
export interface BaseChartOptions<T = Row> {
|
|
91
|
+
/** Element or CSS selector to render into. */
|
|
92
|
+
target: string | Element;
|
|
93
|
+
data?: T[];
|
|
94
|
+
title?: string;
|
|
95
|
+
description?: string;
|
|
96
|
+
ariaLabel?: string;
|
|
97
|
+
width?: number;
|
|
98
|
+
height?: number;
|
|
99
|
+
margin?: number | { top?: number; right?: number; bottom?: number; left?: number };
|
|
100
|
+
theme?: Partial<ChartTheme>;
|
|
101
|
+
tooltip?: TooltipOption<T>;
|
|
102
|
+
/** Re-render on container resize (default true). */
|
|
103
|
+
responsive?: boolean;
|
|
104
|
+
/** Show a legend. Multi-series charts show one by default; pass `false` to hide. */
|
|
105
|
+
legend?: boolean | LegendOptions;
|
|
106
|
+
/** Draw value labels on each mark. */
|
|
107
|
+
dataLabels?: boolean | DataLabelsOption;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
export interface CartesianChartOptions<T = Row> extends BaseChartOptions<T> {
|
|
111
|
+
x?: Accessor<T>;
|
|
112
|
+
y?: Accessor<T, number>;
|
|
113
|
+
color?: ColorOption<T>;
|
|
114
|
+
xScale?: 'linear' | 'time' | 'point';
|
|
115
|
+
xFormat?: (value: unknown) => string;
|
|
116
|
+
yFormat?: (value: number) => string;
|
|
117
|
+
xAxis?: AxisOptions;
|
|
118
|
+
yAxis?: AxisOptions;
|
|
119
|
+
/** Pin axis bounds (otherwise auto-scaled to the data). */
|
|
120
|
+
xMin?: number;
|
|
121
|
+
xMax?: number;
|
|
122
|
+
yMin?: number;
|
|
123
|
+
yMax?: number;
|
|
124
|
+
/** Target number of y ticks (default 5). */
|
|
125
|
+
yTickCount?: number;
|
|
126
|
+
/** Force 0 into the y domain. */
|
|
127
|
+
yIncludeZero?: boolean;
|
|
128
|
+
/** Multiple series (bar → grouped, line/area → one path each). */
|
|
129
|
+
series?: Series<T>[];
|
|
130
|
+
/** Reference lines drawn across the plot. */
|
|
131
|
+
annotations?: Annotation[];
|
|
132
|
+
onPointClick?: (e: ClickEvent<T>) => void;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
export interface BarChartOptions<T = Row> extends CartesianChartOptions<T> {
|
|
136
|
+
/** Band padding between bars/groups (default 0.18). */
|
|
137
|
+
barPadding?: number;
|
|
138
|
+
onBarClick?: (e: ClickEvent<T>) => void;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
export interface LineChartOptions<T = Row> extends CartesianChartOptions<T> {
|
|
142
|
+
stroke?: string;
|
|
143
|
+
strokeWidth?: number;
|
|
144
|
+
points?: boolean;
|
|
145
|
+
pointRadius?: number;
|
|
146
|
+
pointFill?: string;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
export interface AreaChartOptions<T = Row> extends LineChartOptions<T> {
|
|
150
|
+
fill?: string;
|
|
151
|
+
fillOpacity?: number;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
export interface ScatterChartOptions<T = Row> extends CartesianChartOptions<T> {
|
|
155
|
+
pointRadius?: number;
|
|
156
|
+
pointOpacity?: number;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
export interface PieChartOptions<T = Row> extends BaseChartOptions<T> {
|
|
160
|
+
label?: Accessor<T>;
|
|
161
|
+
value?: Accessor<T, number>;
|
|
162
|
+
innerRadiusRatio?: number;
|
|
163
|
+
centerLabel?: string | false;
|
|
164
|
+
centerSubLabel?: string;
|
|
165
|
+
onSliceClick?: (e: ClickEvent<T>) => void;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
export interface ChartInstance {
|
|
169
|
+
kind: string;
|
|
170
|
+
options: Record<string, unknown>;
|
|
171
|
+
target: Element;
|
|
172
|
+
render(): ChartInstance;
|
|
173
|
+
update(options?: Record<string, unknown>): ChartInstance;
|
|
174
|
+
resize(): ChartInstance;
|
|
175
|
+
destroy(): void;
|
|
176
|
+
showTooltip(content: string, event?: Event): void;
|
|
177
|
+
hideTooltip(): void;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
export function BarChart<T = Row>(options: BarChartOptions<T>): ChartInstance;
|
|
181
|
+
export function LineChart<T = Row>(options: LineChartOptions<T>): ChartInstance;
|
|
182
|
+
export function AreaChart<T = Row>(options: AreaChartOptions<T>): ChartInstance;
|
|
183
|
+
export function ScatterChart<T = Row>(options: ScatterChartOptions<T>): ChartInstance;
|
|
184
|
+
export function DonutChart<T = Row>(options: PieChartOptions<T>): ChartInstance;
|
|
185
|
+
export function PieChart<T = Row>(options: PieChartOptions<T>): ChartInstance;
|
|
186
|
+
|
|
187
|
+
// --- scales & helpers ---
|
|
188
|
+
|
|
189
|
+
export interface LinearScale {
|
|
190
|
+
(value: number): number | null;
|
|
191
|
+
domain(): [number, number];
|
|
192
|
+
range(): [number, number];
|
|
193
|
+
ticks(count?: number): number[];
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
export interface BandScale {
|
|
197
|
+
(value: unknown): number | null;
|
|
198
|
+
domain(): string[];
|
|
199
|
+
range(): [number, number];
|
|
200
|
+
bandwidth(): number;
|
|
201
|
+
step(): number;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
export interface PointScale {
|
|
205
|
+
(value: unknown): number | null;
|
|
206
|
+
domain(): string[];
|
|
207
|
+
range(): [number, number];
|
|
208
|
+
bandwidth(): number;
|
|
209
|
+
step(): number;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
export interface TimeScale {
|
|
213
|
+
(value: unknown): number | null;
|
|
214
|
+
domain(): Date[];
|
|
215
|
+
range(): [number, number];
|
|
216
|
+
ticks(count?: number): Date[];
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
export type OrdinalScale = ((value: unknown) => string) & {
|
|
220
|
+
domain(): string[];
|
|
221
|
+
range(): string[];
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
export function scaleLinear(config?: {
|
|
225
|
+
domain?: [number, number];
|
|
226
|
+
range?: [number, number];
|
|
227
|
+
}): LinearScale;
|
|
228
|
+
export function scaleTime(config?: { domain?: unknown[]; range?: [number, number] }): TimeScale;
|
|
229
|
+
export function scaleBand(config?: {
|
|
230
|
+
domain?: unknown[];
|
|
231
|
+
range?: [number, number];
|
|
232
|
+
padding?: number;
|
|
233
|
+
paddingInner?: number;
|
|
234
|
+
paddingOuter?: number;
|
|
235
|
+
}): BandScale;
|
|
236
|
+
export function scalePoint(config?: {
|
|
237
|
+
domain?: unknown[];
|
|
238
|
+
range?: [number, number];
|
|
239
|
+
padding?: number;
|
|
240
|
+
}): PointScale;
|
|
241
|
+
export function scaleOrdinal(config?: { domain?: unknown[]; range?: string[] }): OrdinalScale;
|
|
242
|
+
|
|
243
|
+
export function createAccessor<T = Row, R = unknown>(
|
|
244
|
+
accessor: Accessor<T, R> | undefined,
|
|
245
|
+
fallback?: Accessor<T, R>,
|
|
246
|
+
): (row: T) => R;
|
|
247
|
+
|
|
248
|
+
export function resolveTheme(target: Element | null, overrides?: Partial<ChartTheme>): ChartTheme;
|
|
249
|
+
|
|
250
|
+
export function ticks(min: number, max: number, count?: number): number[];
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Compute a "nice" [min, max] domain. Pass a boolean for the legacy
|
|
254
|
+
* `includeZero` shorthand, or an options object; an explicit `min`/`max`
|
|
255
|
+
* pins that bound exactly.
|
|
256
|
+
*/
|
|
257
|
+
export function niceDomain(
|
|
258
|
+
values: unknown[],
|
|
259
|
+
options?: boolean | { includeZero?: boolean; min?: number; max?: number; tickCount?: number },
|
|
260
|
+
): [number, number];
|
|
261
|
+
|
|
262
|
+
export function linePath(points: Array<{ x: number; y: number }>): string;
|
|
263
|
+
export function areaPath(points: Array<{ x: number; y: number }>, baselineY: number): string;
|
|
264
|
+
export function arcPath(
|
|
265
|
+
cx: number,
|
|
266
|
+
cy: number,
|
|
267
|
+
outerRadius: number,
|
|
268
|
+
innerRadius: number,
|
|
269
|
+
startAngle: number,
|
|
270
|
+
endAngle: number,
|
|
271
|
+
): string;
|
|
272
|
+
|
|
273
|
+
export const VD_CHARTS_VERSION: string;
|