@sentropic/design-system-vue 0.36.36 → 0.36.39

package/dist/DecompositionTreeChart.d.ts

@@ -0,0 +1,81 @@
+export type DecompositionTreeNode = {
+    label: string;
+    value: number;
+    parent?: string;
+};
+export type DecompositionTreeLevel = {
+    dimension: string;
+    nodes: DecompositionTreeNode[];
+};
+export type DecompositionTreeData = {
+    measure: string;
+    levels: DecompositionTreeLevel[];
+};
+export type DecompositionTreeChartProps = {
+    data: DecompositionTreeData;
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    class?: string;
+};
+export declare const DecompositionTreeChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => DecompositionTreeData;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => DecompositionTreeData;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: number;
+    class: string;
+    label: string;
+    height: number;
+    width: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=DecompositionTreeChart.d.ts.map

package/dist/DecompositionTreeChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecompositionTreeChart.d.ts","sourceRoot":"","sources":["../src/DecompositionTreeChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,qBAAqB,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,sBAAsB,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuDF,eAAO,MAAM,sBAAsB;;cAGP,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;cAA3B,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAiPrD,CAAC"}

package/dist/DecompositionTreeChart.js

@@ -0,0 +1,206 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+import { chartDataList } from "./chartScale.js";
+const MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };
+const BAR_H = 22;
+const BAR_GAP = 10;
+const COL_GAP = 36;
+const BAR_W = 110;
+const toneForLevel = (level) => `category${(level % 8) + 1}`;
+// Truncate a label to the bar width (approx. by char count).
+function ellipsize(text, maxChars) {
+    if (text.length <= maxChars)
+        return text;
+    if (maxChars <= 1)
+        return "…";
+    return `${text.slice(0, maxChars - 1)}…`;
+}
+function formatValue(v) {
+    if (Math.abs(v) >= 1000)
+        return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k`;
+    if (Number.isInteger(v))
+        return String(v);
+    return v.toFixed(1);
+}
+const charsFor = (w) => Math.max(0, Math.floor((w - 8) / 6.6));
+function linkPath(link) {
+    const x1 = link.from.x + link.from.barWidth;
+    const y1 = link.from.cy;
+    const x2 = link.to.x;
+    const y2 = link.to.cy;
+    const mid = (x1 + x2) / 2;
+    return `M ${x1} ${y1} C ${mid} ${y1}, ${mid} ${y2}, ${x2} ${y2}`;
+}
+export const DecompositionTreeChart = defineComponent({
+    name: "DecompositionTreeChart",
+    props: {
+        data: { type: Object, required: true },
+        label: { type: String, default: undefined },
+        width: { type: Number, default: undefined },
+        height: { type: Number, default: 320 },
+        size: { type: Number, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        const hoveredKey = ref(null);
+        function handleLeave() {
+            hoveredKey.value = null;
+        }
+        function handlePointerMove(event) {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                hoveredKey.value = null;
+                return;
+            }
+            hoveredKey.value = target.getAttribute("data-chart-key");
+        }
+        return () => {
+            const data = props.data;
+            const label = props.label;
+            const height = props.height ?? 320;
+            const resolvedWidth = props.width ?? props.size ?? 640;
+            const colX = (level) => MARGIN.left + level * (BAR_W + COL_GAP);
+            // Build the columns: root (column 0 = total measure), then one column per
+            // level; a bar width is ∝ value relative to its level max.
+            const cells = [];
+            const links = [];
+            if (data && typeof data.measure === "string") {
+                const plotTop = MARGIN.top;
+                const levels = (data.levels ?? []).filter((lvl) => lvl && typeof lvl.dimension === "string");
+                const firstLevelTotal = levels[0]
+                    ? levels[0].nodes
+                        .filter((n) => n && Number.isFinite(n.value))
+                        .reduce((s, n) => s + Math.max(n.value, 0), 0)
+                    : 0;
+                const rootValue = firstLevelTotal > 0 ? firstLevelTotal : 1;
+                const rootCell = {
+                    key: "root",
+                    label: data.measure,
+                    dimension: data.measure,
+                    value: rootValue,
+                    level: 0,
+                    x: colX(0),
+                    y: plotTop,
+                    barWidth: BAR_W,
+                    tone: toneForLevel(0),
+                    cx: colX(0) + BAR_W / 2,
+                    cy: plotTop + BAR_H / 2,
+                    parentKey: null,
+                };
+                cells.push(rootCell);
+                let prevColumn = [rootCell];
+                levels.forEach((lvl, li) => {
+                    const level = li + 1;
+                    const nodes = (lvl.nodes ?? []).filter((n) => n && typeof n.label === "string" && Number.isFinite(n.value));
+                    const levelMax = nodes.reduce((m, n) => Math.max(m, Math.max(n.value, 0)), 0) || 1;
+                    const x = colX(level);
+                    const column = [];
+                    nodes.forEach((n, ni) => {
+                        const y = plotTop + ni * (BAR_H + BAR_GAP);
+                        const barWidth = Math.max((Math.max(n.value, 0) / levelMax) * BAR_W, 2);
+                        const parentCell = (n.parent !== undefined && prevColumn.find((p) => p.label === n.parent)) ||
+                            prevColumn[0] ||
+                            null;
+                        const cell = {
+                            key: `${level}-${ni}`,
+                            label: n.label,
+                            dimension: lvl.dimension,
+                            value: n.value,
+                            level,
+                            x,
+                            y,
+                            barWidth,
+                            tone: toneForLevel(level),
+                            cx: x + barWidth / 2,
+                            cy: y + BAR_H / 2,
+                            parentKey: parentCell ? parentCell.key : null,
+                        };
+                        cells.push(cell);
+                        column.push(cell);
+                        if (parentCell) {
+                            links.push({ key: `${parentCell.key}>${cell.key}`, from: parentCell, to: cell });
+                        }
+                    });
+                    if (column.length > 0)
+                        prevColumn = column;
+                });
+            }
+            const computedHeight = cells.length === 0
+                ? height
+                : Math.max(height, cells.reduce((m, c) => Math.max(m, c.y + BAR_H), MARGIN.top) + MARGIN.bottom);
+            const computedWidth = cells.length === 0
+                ? resolvedWidth
+                : Math.max(resolvedWidth, cells.reduce((m, c) => Math.max(m, c.x + BAR_W), MARGIN.left) + MARGIN.right);
+            const dataValueItems = cells.map((c) => `${"·".repeat(c.level)}${c.label}: ${c.value}`);
+            const svgChildren = [];
+            // smoothed parent→child links
+            for (const link of links) {
+                const isDim = hoveredKey.value !== null &&
+                    hoveredKey.value !== link.from.key &&
+                    hoveredKey.value !== link.to.key;
+                svgChildren.push(h("path", {
+                    key: link.key,
+                    class: classNames("st-decompositionTreeChart__link", isDim ? "st-decompositionTreeChart__link--dim" : undefined),
+                    d: linkPath(link),
+                }));
+            }
+            // one column per level: horizontal bar whose width ∝ value
+            for (const cell of cells) {
+                const chars = charsFor(cell.barWidth);
+                const isDim = hoveredKey.value !== null && hoveredKey.value !== cell.key;
+                const nodeChildren = [
+                    h("rect", {
+                        class: classNames("st-decompositionTreeChart__bar", `st-decompositionTreeChart__bar--${cell.tone}`, isDim ? "st-decompositionTreeChart__bar--dim" : undefined),
+                        x: cell.x,
+                        y: cell.y,
+                        width: Math.max(cell.barWidth, 2),
+                        height: BAR_H,
+                        rx: 2,
+                        "data-chart-key": cell.key,
+                    }),
+                ];
+                if (chars >= 2) {
+                    nodeChildren.push(h("text", {
+                        class: "st-decompositionTreeChart__label",
+                        x: cell.x + 4,
+                        y: cell.y + BAR_H / 2,
+                        "dominant-baseline": "central",
+                    }, ellipsize(cell.label, chars)));
+                }
+                svgChildren.push(h("g", { key: cell.key, class: "st-decompositionTreeChart__node" }, nodeChildren));
+            }
+            const hoveredCell = hoveredKey.value !== null ? cells.find((c) => c.key === hoveredKey.value) ?? null : null;
+            const children = [
+                h("div", {
+                    class: "st-decompositionTreeChart__visual",
+                    role: "img",
+                    "aria-label": label,
+                    onPointermove: handlePointerMove,
+                    onPointerleave: handleLeave,
+                }, [
+                    h("svg", {
+                        viewBox: `0 0 ${computedWidth} ${computedHeight}`,
+                        preserveAspectRatio: "xMidYMid meet",
+                        width: "100%",
+                        height: "100%",
+                        focusable: "false",
+                        "aria-hidden": "true",
+                    }, svgChildren),
+                ]),
+                chartDataList(label ?? "decomposition tree", dataValueItems),
+            ];
+            if (hoveredCell) {
+                children.push(h("div", {
+                    class: "st-decompositionTreeChart__tooltip",
+                    role: "presentation",
+                    style: `left:${(hoveredCell.cx / computedWidth) * 100}%;top:${(hoveredCell.cy / computedHeight) * 100}%`,
+                }, [
+                    h("span", { class: "st-decompositionTreeChart__tooltipLabel" }, `${hoveredCell.dimension} · ${hoveredCell.label}`),
+                    h("span", { class: "st-decompositionTreeChart__tooltipValue" }, formatValue(hoveredCell.value)),
+                ]));
+            }
+            return h("div", { ...attrs, class: classNames("st-decompositionTreeChart", props.class) }, children);
+        };
+    },
+});
+//# sourceMappingURL=DecompositionTreeChart.js.map

package/dist/DecompositionTreeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecompositionTreeChart.js","sourceRoot":"","sources":["../src/DecompositionTreeChart.ts"],"names":[],"mappings":"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"}

package/dist/Density2DChart.d.ts

@@ -0,0 +1,85 @@
+export type Density2DTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type Density2DPoint = {
+    x: number;
+    y: number;
+    weight?: number;
+};
+export type Density2DChartProps = {
+    data: Density2DPoint[];
+    bins?: number;
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    class?: string;
+};
+export declare const Density2DChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => Density2DPoint[];
+        default: () => never[];
+    };
+    bins: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => Density2DPoint[];
+        default: () => never[];
+    };
+    bins: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: number;
+    class: string;
+    data: Density2DPoint[];
+    label: string;
+    height: number;
+    width: number;
+    bins: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=Density2DChart.d.ts.map

package/dist/Density2DChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Density2DChart.d.ts","sourceRoot":"","sources":["../src/Density2DChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuEF,eAAO,MAAM,cAAc;;cAGA,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAtB,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgR/C,CAAC"}

package/dist/Density2DChart.js

@@ -0,0 +1,254 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+import { chartDataList } from "./chartScale.js";
+const MARGIN = { top: 16, right: 18, bottom: 36, left: 48 };
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+// Continuous scale: density normalised 0..max → category1..8 (shared with
+// HeatmapChart). max ≤ 0 or non-finite density → category1 (floor intensity).
+function toneForDensity(density, densityMax) {
+    if (!Number.isFinite(density) || densityMax <= 0)
+        return "category1";
+    const ratio = Math.max(0, Math.min(1, density / densityMax));
+    const index = Math.max(0, Math.min(TONES.length - 1, Math.floor(ratio * TONES.length)));
+    return TONES[index];
+}
+function niceTicks(min, max, target = 5) {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
+        return [Number.isFinite(max) ? max : 0];
+    }
+    const range = max - min;
+    const rough = range / Math.max(target - 1, 1);
+    const pow = Math.pow(10, Math.floor(Math.log10(rough)));
+    const norm = rough / pow;
+    let step;
+    if (norm < 1.5)
+        step = pow;
+    else if (norm < 3)
+        step = 2 * pow;
+    else if (norm < 7)
+        step = 5 * pow;
+    else
+        step = 10 * pow;
+    const start = Math.floor(min / step) * step;
+    const end = Math.ceil(max / step) * step;
+    const ticks = [];
+    for (let v = start; v <= end + step / 2; v += step)
+        ticks.push(Number(v.toFixed(10)));
+    return ticks;
+}
+function scaleLinear(v, d0, d1, r0, r1) {
+    if (d1 === d0)
+        return r0;
+    return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+}
+function formatTick(v) {
+    if (Math.abs(v) >= 1000)
+        return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k`;
+    return Number.isInteger(v) ? String(v) : v.toFixed(1);
+}
+export const Density2DChart = defineComponent({
+    name: "Density2DChart",
+    props: {
+        data: { type: Array, default: () => [] },
+        bins: { type: Number, default: 12 },
+        label: { type: String, default: undefined },
+        width: { type: Number, default: undefined },
+        height: { type: Number, default: 320 },
+        size: { type: Number, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        const hoveredKey = ref(null);
+        function handleLeave() {
+            hoveredKey.value = null;
+        }
+        function handlePointerMove(event) {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                hoveredKey.value = null;
+                return;
+            }
+            hoveredKey.value = target.getAttribute("data-chart-key");
+        }
+        return () => {
+            const data = props.data ?? [];
+            const label = props.label;
+            const height = props.height ?? 320;
+            const resolvedWidth = props.width ?? props.size ?? 640;
+            const plotWidth = Math.max(resolvedWidth - MARGIN.left - MARGIN.right, 1);
+            const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            // Effective bin count: integer ≥ 1, capped to stay legible.
+            const binCount = Math.max(1, Math.min(40, Math.floor(Number.isFinite(props.bins) ? props.bins : 12)));
+            // Normalise: keep only finite-coordinate points.
+            const validData = data.filter((d) => d && Number.isFinite(d.x) && Number.isFinite(d.y));
+            // Extent [minX,maxX]×[minY,maxY] + nice ticks for the axes.
+            const xs = validData.map((d) => d.x);
+            const ys = validData.map((d) => d.y);
+            const xTicks = niceTicks(xs.length ? Math.min(...xs) : 0, xs.length ? Math.max(...xs) : 1);
+            const yTicks = niceTicks(ys.length ? Math.min(...ys) : 0, ys.length ? Math.max(...ys) : 1);
+            const xMin = xTicks[0];
+            const xMax = xTicks[xTicks.length - 1];
+            const yMin = yTicks[0];
+            const yMax = yTicks[yTicks.length - 1];
+            // Regular binning: binCount×binCount grid over the extent; each point
+            // falls into a cell, whose density = sum of weights (default 1).
+            let densityMax = 0;
+            const binCells = [];
+            if (validData.length > 0 && xMax !== xMin && yMax !== yMin) {
+                const counts = new Float64Array(binCount * binCount);
+                const idx = (ix, iy) => iy * binCount + ix;
+                for (const d of validData) {
+                    const fx = (d.x - xMin) / (xMax - xMin);
+                    const fy = (d.y - yMin) / (yMax - yMin);
+                    const ix = Math.max(0, Math.min(binCount - 1, Math.floor(fx * binCount)));
+                    const iy = Math.max(0, Math.min(binCount - 1, Math.floor(fy * binCount)));
+                    const w = typeof d.weight === "number" && Number.isFinite(d.weight) ? d.weight : 1;
+                    counts[idx(ix, iy)] += w;
+                }
+                for (let i = 0; i < counts.length; i++)
+                    densityMax = Math.max(densityMax, counts[i]);
+                const cellW = plotWidth / binCount;
+                const cellH = plotHeight / binCount;
+                for (let iy = 0; iy < binCount; iy++) {
+                    for (let ix = 0; ix < binCount; ix++) {
+                        const density = counts[idx(ix, iy)];
+                        if (density <= 0)
+                            continue;
+                        const x = MARGIN.left + ix * cellW;
+                        const y = MARGIN.top + (binCount - 1 - iy) * cellH;
+                        binCells.push({
+                            key: `${ix}-${iy}`,
+                            ix,
+                            iy,
+                            density,
+                            x,
+                            y,
+                            width: Math.max(cellW - 1, 1),
+                            height: Math.max(cellH - 1, 1),
+                            cx: x + cellW / 2,
+                            cy: y + cellH / 2,
+                            x0: xMin + (ix / binCount) * (xMax - xMin),
+                            x1: xMin + ((ix + 1) / binCount) * (xMax - xMin),
+                            y0: yMin + (iy / binCount) * (yMax - yMin),
+                            y1: yMin + ((iy + 1) / binCount) * (yMax - yMin),
+                            tone: toneForDensity(density, densityMax),
+                        });
+                    }
+                }
+            }
+            const xAxisTicks = xTicks.map((t) => ({
+                value: t,
+                x: MARGIN.left + scaleLinear(t, xMin, xMax, 0, plotWidth),
+            }));
+            const yAxisTicks = yTicks.map((t) => ({
+                value: t,
+                y: MARGIN.top + scaleLinear(t, yMin, yMax, plotHeight, 0),
+            }));
+            const dataValueItems = binCells.map((b) => `[${formatTick(b.x0)}–${formatTick(b.x1)}] × [${formatTick(b.y0)}–${formatTick(b.y1)}]: ${b.density}`);
+            const legendItems = TONES.map((tone) => ({ tone }));
+            const hasLegend = binCells.length > 0;
+            const svgChildren = [];
+            // tick labels (Y axis)
+            for (const tick of yAxisTicks) {
+                svgChildren.push(h("text", {
+                    key: `y${tick.value}`,
+                    class: "st-density2DChart__tickLabel",
+                    x: MARGIN.left - 8,
+                    y: tick.y,
+                    "text-anchor": "end",
+                    "dominant-baseline": "middle",
+                }, formatTick(tick.value)));
+            }
+            // tick labels (X axis)
+            for (const tick of xAxisTicks) {
+                svgChildren.push(h("text", {
+                    key: `x${tick.value}`,
+                    class: "st-density2DChart__tickLabel",
+                    x: tick.x,
+                    y: height - MARGIN.bottom + 16,
+                    "text-anchor": "middle",
+                }, formatTick(tick.value)));
+            }
+            // axes
+            svgChildren.push(h("line", {
+                class: "st-density2DChart__axis",
+                x1: MARGIN.left,
+                x2: MARGIN.left,
+                y1: MARGIN.top,
+                y2: height - MARGIN.bottom,
+            }));
+            svgChildren.push(h("line", {
+                class: "st-density2DChart__axis",
+                x1: MARGIN.left,
+                x2: resolvedWidth - MARGIN.right,
+                y1: height - MARGIN.bottom,
+                y2: height - MARGIN.bottom,
+            }));
+            // density cells (binCount×binCount grid, color ∝ density)
+            for (const cell of binCells) {
+                const isDim = hoveredKey.value !== null && hoveredKey.value !== cell.key;
+                svgChildren.push(h("rect", {
+                    key: cell.key,
+                    class: classNames("st-density2DChart__cell", `st-density2DChart__cell--${cell.tone}`, isDim ? "st-density2DChart__cell--dim" : undefined),
+                    x: cell.x,
+                    y: cell.y,
+                    width: cell.width,
+                    height: cell.height,
+                    rx: 1,
+                    "data-chart-key": cell.key,
+                }));
+            }
+            const hoveredCell = hoveredKey.value !== null ? binCells.find((b) => b.key === hoveredKey.value) ?? null : null;
+            const children = [
+                h("div", {
+                    class: "st-density2DChart__visual",
+                    role: "img",
+                    "aria-label": label,
+                    onPointermove: handlePointerMove,
+                    onPointerleave: handleLeave,
+                }, [
+                    h("svg", {
+                        viewBox: `0 0 ${resolvedWidth} ${height}`,
+                        preserveAspectRatio: "xMidYMid meet",
+                        width: "100%",
+                        height: "100%",
+                        focusable: "false",
+                        "aria-hidden": "true",
+                    }, svgChildren),
+                ]),
+            ];
+            if (hasLegend) {
+                children.push(h("div", { class: "st-density2DChart__legend", "aria-hidden": "true" }, [
+                    h("span", { class: "st-density2DChart__legendText" }, "Low"),
+                    h("span", { class: "st-density2DChart__legendRamp" }, legendItems.map((item) => h("span", {
+                        key: item.tone,
+                        class: `st-density2DChart__legendSwatch st-density2DChart__legendSwatch--${item.tone}`,
+                    }))),
+                    h("span", { class: "st-density2DChart__legendText" }, "High"),
+                ]));
+            }
+            children.push(chartDataList(label ?? "density 2d", dataValueItems));
+            if (hoveredCell) {
+                children.push(h("div", {
+                    class: "st-density2DChart__tooltip",
+                    role: "presentation",
+                    style: `left:${(hoveredCell.cx / resolvedWidth) * 100}%;top:${(hoveredCell.cy / height) * 100}%`,
+                }, [
+                    h("span", { class: "st-density2DChart__tooltipLabel" }, `[${formatTick(hoveredCell.x0)}–${formatTick(hoveredCell.x1)}] × [${formatTick(hoveredCell.y0)}–${formatTick(hoveredCell.y1)}]`),
+                    h("span", { class: "st-density2DChart__tooltipValue" }, `${hoveredCell.density}`),
+                ]));
+            }
+            return h("div", { ...attrs, class: classNames("st-density2DChart", props.class) }, children);
+        };
+    },
+});
+//# sourceMappingURL=Density2DChart.js.map