@vanduo-oss/vd3-cbun 1.4.1 → 1.4.2

package/CHANGELOG.md

@@ -4,6 +4,62 @@ All notable changes to `@vanduo-oss/vd3-cbun` are documented here. This file
 tracks the PACKAGE only — never docs-site content. Per-component VERSION
 constants are listed alongside each bundle release.
 
+## 1.4.2 — 2026-09-13
+
+Patch release: resolves all 14 Kilo review findings on PR #13 plus two adjacent
+gesture-cancel bugs. The reviewed fixes include additive charts core `role` /
+Vue `svgRole` options and four strengthened tests. Additive and
+backward-compatible; **no
+per-component VERSION constant changes** (no serialization change, no new
+load-bearing default).
+
+### Fixed
+
+- **draw** — the rendered DOM paint order now always matches document order.
+  Reorders (`bringToFront` / `sendToBack` / `bringForward` / `sendBackward`),
+  undo/redo, and `load()` previously updated the model but could leave the SVG
+  element order stale, so the visually topmost shape could disagree with
+  `toJSON().shapes`. Paint order is normalized inside the incremental render pass.
+  A second pointer contacting the canvas now cancels the active gesture
+  coherently: an in-progress erase keeps the model intact and restores the shapes
+  it had hidden, an in-progress move/resize restores the pre-drag geometry in the
+  model and DOM, and an in-progress pan clears `.vd-draw-panning` (also cleared
+  when a pinch ends). `setReadonly(false)` rebuilds the toolbar/style panel only
+  when it was never built and now syncs their state. The select-mode move cursor
+  rule targets the real `.vd-draw-shapes` layer instead of the non-existent
+  `.vd-draw-shape-layer`. `VD_DRAW_VERSION` stays `1.1.0`.
+
+- **charts** — a visible data table no longer feeds back into responsive sizing.
+  The measured height and the `ResizeObserver` comparison now exclude the table's
+  layout contribution (hidden `.vd-chart-sr-only` tables contribute zero), so
+  growing the table no longer triggers a resize re-render loop, while genuine
+  container changes still resize. Multi-series line/area data tables now match
+  each row's x value by the same normalized key as the x scale (timestamp /
+  number / string) instead of strict reference equality, so per-series `Date` or
+  object x values no longer produce blank cells. Adds an additive core `role`
+  option and Vue `svgRole` prop (`string`, overrides the default
+  `graphics-document document`); the distinct Vue name preserves standard root
+  `role` attribute fallthrough. `dataTable`, `ariaRoleDescription`, and
+  `svgRole` react after mount. `VD_CHARTS_VERSION` stays `1.1.0`.
+
+- **hex-grid** — fast blit frames now report `total`, `visible`, and `drawn: 0`
+  in `getRenderStats()` instead of leaving the previous sharp frame's counts, so
+  stats stay consistent with the transform in effect during a gesture.
+  `VD_HEX_VERSION` stays `1.1.0`.
+
+- **tests** — the z-order test now asserts DOM order (and covers reorder,
+  undo/redo, send-to-back/forward/backward); the `canUndo` test builds real
+  history before disabling it; `autoClose: false` asserts the textarea is
+  unchanged with an `autoClose: true` pair-insert control; the pressure-default
+  smoothing test blends both missing directions at factor 0.5; the DPR test
+  rejects any transform carrying the device ratio; the fast-frame test pins
+  `visible` / `drawn`. New coverage: gesture cancellation, per-series `Date` data
+  tables, responsive table-growth, and Vue reactivity for `svgRole` /
+  `ariaRoleDescription` / `dataTable`.
+
+Component versions in this release: **charts 1.1.0, code-editor 1.1.0, draw
+1.1.0, flowchart 1.2.0, hex-grid 1.1.0, music-player 1.0.1**.
+
 ## 1.4.1 — 2026-09-12
 
 Patch release: hex-grid adaptive rendering, draw vector polish, charts

package/README.md

@@ -8,12 +8,16 @@ tree-shakeable subpath exports. It replaces the four per-repo publishes
 (`@vanduo-oss/charts`, `@vanduo-oss/flowchart`, `@vanduo-oss/hex-grid`,
 `@vanduo-oss/music-player`) of the old line.
 
-**Status: 1.4.1.** Six Vue3-only component families — charts, code-editor, draw,
+**Status: 1.4.2.** Six Vue3-only component families — charts, code-editor, draw,
 flowchart, hex-grid, music-player — each on its own tree-shakeable subpath, with
-the esbuild metafile isolation guard in place. (1.4.1 adds hex-grid DPR/culling,
-draw vector polish and multi-touch, charts WAI-ARIA + keyboard + data table, and
-a wrap-mode scrollbar guard; 1.4.0 the snippet-safe `./code-editor/highlight`
-tokenizer; see the [changelog](./CHANGELOG.md).)
+the esbuild metafile isolation guard in place. (1.4.2 is a review-fix patch: draw
+paint-order and gesture-cancel correctness, charts responsive-table and
+per-series data-table fixes plus additive core `role` / Vue `svgRole` options,
+hex-grid fast-frame stats, and test hardening; 1.4.1 added hex-grid DPR/culling,
+draw vector polish
+and multi-touch, charts WAI-ARIA + keyboard + data table, and a wrap-mode
+scrollbar guard; 1.4.0 the snippet-safe `./code-editor/highlight` tokenizer; see
+the [changelog](./CHANGELOG.md).)
 
 ## Install
 

package/SKILL.md

@@ -46,7 +46,9 @@ the scales (`scaleLinear`, `scaleTime`, `scaleBand`, `scalePoint`,
 CSS ships at `@vanduo-oss/vd3-cbun/charts/css`. Charts expose WAI-ARIA Graphics
 roles, arrow-key mark navigation, and an accessible data table (`dataTable`:
 `true` / `false` / `'visible'`; `ariaRoleDescription` overrides the SVG
-description). `VD_CHARTS_VERSION` is `1.1.0`.
+description; core `role` / Vue `svgRole` override the default
+`graphics-document document` role without consuming the Vue root `role`
+attribute). `VD_CHARTS_VERSION` is `1.1.0`.
 
 ## Code-editor
 

package/dist/charts/core.d.ts

@@ -109,6 +109,8 @@ export interface BaseChartOptions<T = Row> {
   dataTable?: boolean | 'visible';
   /** Custom ARIA role description override for the chart root (defaults to `${kind} chart`). */
   ariaRoleDescription?: string;
+  /** Override the SVG WAI-ARIA graphics role (defaults to `graphics-document document`). */
+  role?: string;
 }
 
 export interface CartesianChartOptions<T = Row> extends BaseChartOptions<T> {

package/dist/charts/index.cjs

@@ -180,9 +180,22 @@ function normalizeMargin(value, fallback = DEFAULT_MARGIN) {
     left: Number(value?.left ?? fallback.left)
   };
 }
+function dataTableContribution(target) {
+  if (!isElement(target) || typeof target.querySelectorAll !== "function") return 0;
+  let total = 0;
+  target.querySelectorAll(".vd-chart-data-table:not(.vd-chart-sr-only)").forEach((table) => {
+    const style = typeof getComputedStyle === "function" ? getComputedStyle(table) : null;
+    const marginTop = style ? parseFloat(style.marginTop) || 0 : 0;
+    const marginBottom = style ? parseFloat(style.marginBottom) || 0 : 0;
+    total += (table.offsetHeight || 0) + marginTop + marginBottom;
+  });
+  return total;
+}
 function measureTarget(target, options) {
   const width = Number(options.width) || Math.round(target.clientWidth) || DEFAULT_WIDTH;
-  const height = Number(options.height) || Math.round(target.clientHeight) || DEFAULT_HEIGHT;
+  const targetHeight = Math.round(Number(target.clientHeight));
+  const availableHeight = Math.max(0, targetHeight - dataTableContribution(target));
+  const height = Number(options.height) || (targetHeight > 0 ? availableHeight : DEFAULT_HEIGHT);
   return {
     width: Math.max(160, width),
     height: Math.max(140, height)
@@ -1464,12 +1477,22 @@ function renderMultiLineChart(instance, mode) {
     }
   });
   setupKeyboardNavigation(svg, markGroup);
-  const uniqueX = unique(allRows.map((r) => r.x));
-  const tableRows = uniqueX.map((xVal) => {
+  const xKey = (value) => String(xInfo.mapValue(value));
+  const uniqueX = /* @__PURE__ */ new Map();
+  for (const row of allRows) {
+    const key = xKey(row.x);
+    if (!uniqueX.has(key)) uniqueX.set(key, row.x);
+  }
+  const seriesValues = seriesList.map((s) => {
+    const byX = /* @__PURE__ */ new Map();
+    for (const row of s.rows) byX.set(xKey(row.x), row.y);
+    return byX;
+  });
+  const tableRows = [...uniqueX.entries()].map(([key, xVal]) => {
     const rowCells = [formatCategory(xVal)];
-    seriesList.forEach((s) => {
-      const match = s.rows.find((r) => r.x === xVal);
-      rowCells.push(match && isFiniteNumber(match.y) ? formatNumber(match.y) : "");
+    seriesValues.forEach((byX) => {
+      const y = byX.get(key);
+      rowCells.push(isFiniteNumber(y) ? formatNumber(y) : "");
     });
     return rowCells;
   });
@@ -1751,7 +1774,11 @@ var ChartInstance = class {
   }
   render() {
     if (this.destroyed) return this;
+    const tableHeight = dataTableContribution(this.target);
     this.renderer(this);
+    if (!Number(this.options.height) && dataTableContribution(this.target) !== tableHeight) {
+      this.renderer(this);
+    }
     return this;
   }
   update(nextOptions = {}) {
@@ -1765,11 +1792,12 @@ var ChartInstance = class {
   setupResizeObserver() {
     if (this.options.responsive === false || !hasWindow() || typeof ResizeObserver === "undefined")
       return;
+    const chartHeight = () => Math.max(0, this.target.clientHeight - dataTableContribution(this.target));
     let lastWidth = this.target.clientWidth;
-    let lastHeight = this.target.clientHeight;
+    let lastHeight = chartHeight();
     this.resizeObserver = new ResizeObserver(() => {
       const width = this.target.clientWidth;
-      const height = this.target.clientHeight;
+      const height = chartHeight();
       if (width === lastWidth && height === lastHeight) return;
       lastWidth = width;
       lastHeight = height;
@@ -1887,7 +1915,9 @@ var CHART_PROPS = {
   // Accessible data table: `true` (sr-only, default) / `false` / `'visible'`.
   dataTable: { type: [Boolean, String], default: void 0 },
   // Override the SVG `aria-roledescription` (defaults to `${kind} chart`).
-  ariaRoleDescription: { type: String, default: void 0 }
+  ariaRoleDescription: { type: String, default: void 0 },
+  // Avoid colliding with the standard root `role` fallthrough attribute.
+  svgRole: { type: String, default: void 0 }
 };
 function optionsFrom(target, props, emit) {
   return {
@@ -1923,6 +1953,7 @@ function optionsFrom(target, props, emit) {
     yAxis: props.yAxis,
     dataTable: props.dataTable,
     ariaRoleDescription: props.ariaRoleDescription,
+    role: props.svgRole,
     // Forward the core's mark-click callbacks as the Vue emit family. Passing
     // all three unconditionally is safe: the core only fires the callback
     // relevant to the rendered chart type (bars → onBarClick, points →
@@ -1981,7 +2012,10 @@ var VdChart = (0, import_vue.defineComponent)({
         props.xFormat,
         props.yFormat,
         props.xAxis,
-        props.yAxis
+        props.yAxis,
+        props.dataTable,
+        props.ariaRoleDescription,
+        props.svgRole
       ],
       () => {
         if (!instance) return;