@internetstiftelsen/charts 0.14.3 → 0.16.0

package/dist/types.d.ts

@@ -9,7 +9,7 @@ export type GroupedDataGroup = {
     data: DataItem[];
 };
 export type ChartData = DataItem[] | GroupedDataGroup[];
-export type ExportFormat = 'svg' | 'json' | 'csv' | 'xlsx' | 'png' | 'jpg' | 'pdf';
+export type ExportFormat = 'svg' | 'json' | 'csv' | 'xlsx' | 'png' | 'jpg';
 export type ExportOptions = {
     download?: boolean;
     filename?: string;
@@ -21,7 +21,6 @@ export type ExportOptions = {
     pixelRatio?: number;
     backgroundColor?: string;
     sheetName?: string;
-    pdfMargin?: number;
 };
 export type ExportRenderContext = {
     format: ExportFormat;
@@ -270,6 +269,8 @@ export type XAxisConfigBase = {
     groupLabelKey?: string;
     showGroupLabels?: boolean;
     groupLabelGap?: number;
+    groupLabelMaxWidth?: number;
+    groupLabelOversizedBehavior?: LabelOversizedBehavior;
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
     oversizedBehavior?: LabelOversizedBehavior;

package/dist/x-axis.d.ts

@@ -9,6 +9,8 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     readonly groupLabelKey?: string;
     readonly showGroupLabels: boolean;
     readonly groupLabelGap: number;
+    private readonly groupLabelMaxWidth?;
+    private readonly groupLabelOversizedBehavior;
     private readonly rotatedLabels;
     private readonly tickPadding;
     private fontSize;
@@ -16,6 +18,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private readonly oversizedBehavior;
     private readonly tickFormat;
     private wrapLineCount;
+    private groupLabelWrapLineCount;
     private estimatedHeight;
     private estimatedTickLabelVerticalFootprint;
     private readonly autoHideOverlapping;
@@ -31,7 +34,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
      * Returns the space required by the x-axis
      */
     getRequiredSpace(): ComponentSpace;
-    estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement): void;
+    estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement, data?: DataItem[], estimatedXAxisRangeWidth?: number): void;
     clearEstimatedSpace(): void;
     private getTickLabelVerticalFootprint;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number, data?: DataItem[]): void;
@@ -39,15 +42,22 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private renderGroupLabels;
     private buildGroupRanges;
     private applyLabelConstraints;
+    private applyGroupLabelConstraints;
+    private resolveGroupLabelMaxWidth;
     private wrapTextElement;
     private addTitleTooltip;
     private applyAutoHiding;
     private measureLabel;
+    private estimateGroupLabelWrapLineCount;
+    private buildGroupLabelEstimates;
+    private resolveEstimatedGroupLabelMaxWidth;
+    private getLabelBlockHeight;
     private setEstimatedDimensions;
     private createAxisGenerator;
     private applyAxisTextConstraints;
     private applyLabelRotation;
     private resolveGroupRangeInput;
+    private resolveGroupLabelKey;
     private collectAutoHideLabels;
     private measureMaxAutoHideLabelWidth;
     private applyAutoHideVisibility;

package/dist/x-axis.js

@@ -1,10 +1,12 @@
 import { axisBottom } from 'd3';
 import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
 import { GROUPED_CATEGORY_ID_KEY, GROUPED_CATEGORY_LABEL_KEY, GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
+const GROUP_LABEL_HORIZONTAL_PADDING = 4;
 const DEFAULT_X_AXIS_CONFIG = {
     display: true,
     showGroupLabels: false,
     groupLabelGap: 10,
+    groupLabelOversizedBehavior: 'truncate',
     rotatedLabels: false,
     oversizedBehavior: 'truncate',
     tickFormat: null,
@@ -81,6 +83,18 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "groupLabelMaxWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "groupLabelOversizedBehavior", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "rotatedLabels", {
             enumerable: true,
             configurable: true,
@@ -123,6 +137,12 @@ export class XAxis {
             writable: true,
             value: 1
         });
+        Object.defineProperty(this, "groupLabelWrapLineCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 1
+        });
         Object.defineProperty(this, "estimatedHeight", {
             enumerable: true,
             configurable: true,
@@ -169,6 +189,9 @@ export class XAxis {
         this.groupLabelKey = resolvedConfig.groupLabelKey;
         this.showGroupLabels = resolvedConfig.showGroupLabels;
         this.groupLabelGap = resolvedConfig.groupLabelGap;
+        this.groupLabelMaxWidth = resolvedConfig.groupLabelMaxWidth;
+        this.groupLabelOversizedBehavior =
+            resolvedConfig.groupLabelOversizedBehavior;
         this.rotatedLabels = resolvedConfig.rotatedLabels;
         this.maxLabelWidth = resolvedConfig.maxLabelWidth;
         this.oversizedBehavior = resolvedConfig.oversizedBehavior;
@@ -186,6 +209,8 @@ export class XAxis {
             groupLabelKey: this.groupLabelKey,
             showGroupLabels: this.showGroupLabels,
             groupLabelGap: this.groupLabelGap,
+            groupLabelMaxWidth: this.groupLabelMaxWidth,
+            groupLabelOversizedBehavior: this.groupLabelOversizedBehavior,
             rotatedLabels: this.rotatedLabels,
             maxLabelWidth: this.maxLabelWidth,
             oversizedBehavior: this.oversizedBehavior,
@@ -231,7 +256,10 @@ export class XAxis {
             height += (this.wrapLineCount - 1) * this.fontSize * 1.2;
         }
         if (this.showGroupLabels) {
-            height += this.groupLabelGap + this.fontSize + 5;
+            height +=
+                this.groupLabelGap +
+                    this.getLabelBlockHeight(this.fontSize, this.groupLabelWrapLineCount) +
+                    5;
         }
         return {
             width: 0, // X-axis spans full width
@@ -239,11 +267,12 @@ export class XAxis {
             position: 'bottom',
         };
     }
-    estimateLayoutSpace(labels, theme, svg) {
+    estimateLayoutSpace(labels, theme, svg, data = [], estimatedXAxisRangeWidth) {
         if (!labels.length) {
             this.estimatedHeight = null;
             this.estimatedTickLabelVerticalFootprint = null;
             this.wrapLineCount = 1;
+            this.groupLabelWrapLineCount = 1;
             return;
         }
         this.fontSize = this.resolveFontSizeValue(theme.axis.fontSize, this.fontSize);
@@ -261,12 +290,14 @@ export class XAxis {
             maxLines = Math.max(maxLines, measurement.lines);
             maxWidth = Math.max(maxWidth, measurement.width);
         }
+        this.groupLabelWrapLineCount = this.estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth);
         this.setEstimatedDimensions(maxWidth, maxLines, theme);
         this.wrapLineCount = maxLines;
     }
     clearEstimatedSpace() {
         this.estimatedHeight = null;
         this.estimatedTickLabelVerticalFootprint = null;
+        this.groupLabelWrapLineCount = 1;
     }
     getTickLabelVerticalFootprint() {
         if (this.estimatedTickLabelVerticalFootprint !== null) {
@@ -345,6 +376,7 @@ export class XAxis {
             .attr('font-weight', groupLabelStyle.fontWeight)
             .attr('fill', groupLabelStyle.color)
             .text((range) => range.label);
+        this.applyGroupLabelConstraints(groupLayer.selectAll('text'), svg.node(), groupLabelStyle);
     }
     buildGroupRanges(scale, data) {
         const input = this.resolveGroupRangeInput(scale, data);
@@ -422,12 +454,55 @@ export class XAxis {
             }
         });
     }
-    wrapTextElement(textEl, lines, originalText) {
+    applyGroupLabelConstraints(groupLabels, svg, groupLabelStyle) {
+        groupLabels.each((range, i, nodes) => {
+            const textEl = nodes[i];
+            const maxWidth = this.resolveGroupLabelMaxWidth(range);
+            if (maxWidth <= 0) {
+                textEl.style.visibility = 'hidden';
+                return;
+            }
+            const originalText = textEl.textContent || '';
+            const textWidth = measureTextWidth(originalText, groupLabelStyle.fontSize, groupLabelStyle.fontFamily, groupLabelStyle.fontWeight, svg);
+            if (textWidth <= maxWidth) {
+                return;
+            }
+            switch (this.groupLabelOversizedBehavior) {
+                case 'truncate': {
+                    const result = truncateText(originalText, maxWidth, groupLabelStyle.fontSize, groupLabelStyle.fontFamily, groupLabelStyle.fontWeight, svg);
+                    textEl.textContent = result.text;
+                    if (result.truncated) {
+                        this.addTitleTooltip(textEl, originalText);
+                    }
+                    break;
+                }
+                case 'wrap': {
+                    const lines = wrapText(originalText, maxWidth, groupLabelStyle.fontSize, groupLabelStyle.fontFamily, groupLabelStyle.fontWeight, svg);
+                    this.wrapTextElement(textEl, lines, originalText, groupLabelStyle.fontSize, false);
+                    break;
+                }
+                case 'hide': {
+                    textEl.style.visibility = 'hidden';
+                    break;
+                }
+            }
+        });
+    }
+    resolveGroupLabelMaxWidth(range) {
+        if (this.groupLabelMaxWidth !== undefined) {
+            return this.groupLabelMaxWidth;
+        }
+        const rangeWidth = Math.abs(range.end - range.start);
+        return Math.max(0, rangeWidth - GROUP_LABEL_HORIZONTAL_PADDING * 2);
+    }
+    wrapTextElement(textEl, lines, originalText, fontSize = this.fontSize, updateWrapLineCount = true) {
         // Clear existing content
         textEl.textContent = '';
-        const lineHeight = this.fontSize * 1.2;
+        const lineHeight = fontSize * 1.2;
         // Update wrap line count for height calculation
-        this.wrapLineCount = Math.max(this.wrapLineCount, lines.length);
+        if (updateWrapLineCount) {
+            this.wrapLineCount = Math.max(this.wrapLineCount, lines.length);
+        }
         lines.forEach((line, i) => {
             const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
             tspan.textContent = line;
@@ -482,6 +557,66 @@ export class XAxis {
             lines: 1,
         };
     }
+    estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth) {
+        if (!this.showGroupLabels ||
+            this.groupLabelOversizedBehavior !== 'wrap') {
+            return 1;
+        }
+        const groupLabels = this.buildGroupLabelEstimates(data);
+        if (groupLabels.length === 0) {
+            return 1;
+        }
+        const groupLabelStyle = this.resolveGroupLabelStyle(theme);
+        const totalItemCount = data.length;
+        return groupLabels.reduce((maxLines, groupLabel) => {
+            const maxWidth = this.groupLabelMaxWidth ??
+                this.resolveEstimatedGroupLabelMaxWidth(groupLabel.itemCount, totalItemCount, estimatedXAxisRangeWidth);
+            if (maxWidth === undefined || maxWidth <= 0) {
+                return maxLines;
+            }
+            const lines = wrapText(groupLabel.label, maxWidth, groupLabelStyle.fontSize, groupLabelStyle.fontFamily, groupLabelStyle.fontWeight, svg);
+            return Math.max(maxLines, lines.length || 1);
+        }, 1);
+    }
+    buildGroupLabelEstimates(data) {
+        const groupLabelKey = this.resolveGroupLabelKey();
+        if (!this.dataKey || !groupLabelKey || data.length === 0) {
+            return [];
+        }
+        const labels = [];
+        let previousLabel = null;
+        let currentEstimate = null;
+        data.forEach((row) => {
+            const label = String(row[groupLabelKey] ?? '');
+            if (label === previousLabel) {
+                if (currentEstimate) {
+                    currentEstimate.itemCount += 1;
+                }
+                return;
+            }
+            previousLabel = label;
+            if (label.trim() !== '') {
+                currentEstimate = { label, itemCount: 1 };
+                labels.push(currentEstimate);
+                return;
+            }
+            currentEstimate = null;
+        });
+        return labels;
+    }
+    resolveEstimatedGroupLabelMaxWidth(itemCount, totalItemCount, estimatedXAxisRangeWidth) {
+        if (estimatedXAxisRangeWidth === undefined ||
+            totalItemCount <= 0 ||
+            itemCount <= 0) {
+            return undefined;
+        }
+        const groupWidth = (estimatedXAxisRangeWidth * itemCount) / totalItemCount;
+        return Math.max(0, groupWidth - GROUP_LABEL_HORIZONTAL_PADDING * 2);
+    }
+    getLabelBlockHeight(fontSize, lineCount) {
+        const lineHeight = fontSize * 1.2;
+        return fontSize + Math.max(0, lineCount - 1) * lineHeight;
+    }
     setEstimatedDimensions(maxWidth, maxLines, theme) {
         const lineHeight = this.fontSize * 1.2;
         const textHeight = lineHeight * maxLines;
@@ -500,7 +635,9 @@ export class XAxis {
         if (this.showGroupLabels) {
             const groupLabelStyle = this.resolveGroupLabelStyle(theme);
             this.estimatedHeight +=
-                this.groupLabelGap + groupLabelStyle.fontSize + 5;
+                this.groupLabelGap +
+                    this.getLabelBlockHeight(groupLabelStyle.fontSize, this.groupLabelWrapLineCount) +
+                    5;
         }
     }
     createAxisGenerator(x, labelLookup) {
@@ -548,10 +685,7 @@ export class XAxis {
             typeof scale.bandwidth !== 'function') {
             return null;
         }
-        const groupLabelKey = this.groupLabelKey ??
-            (this.dataKey === GROUPED_CATEGORY_ID_KEY
-                ? GROUPED_GROUP_LABEL_KEY
-                : undefined);
+        const groupLabelKey = this.resolveGroupLabelKey();
         if (!groupLabelKey) {
             return null;
         }
@@ -570,6 +704,12 @@ export class XAxis {
             groupLookup,
         };
     }
+    resolveGroupLabelKey() {
+        return (this.groupLabelKey ??
+            (this.dataKey === GROUPED_CATEGORY_ID_KEY
+                ? GROUPED_GROUP_LABEL_KEY
+                : undefined));
+    }
     collectAutoHideLabels(axisGroup) {
         return axisGroup
             .selectAll('.tick')

package/dist/xy-chart.d.ts

@@ -26,6 +26,7 @@ export declare class XYChart extends BaseChart {
     update(data: ChartData): void;
     protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
     protected prepareLayout(context: BaseLayoutContext): void;
+    private getEstimatedXAxisRangeWidth;
     private getYAxisEstimateLabels;
     private createContinuousScaleForLayoutEstimate;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;

package/dist/xy-chart.js

@@ -155,6 +155,9 @@ export class XYChart extends BaseChart {
         super.prepareLayout(context);
         this.xAxis?.clearEstimatedSpace?.();
         this.yAxis?.clearEstimatedSpace?.();
+        if (this.yAxis) {
+            this.yAxis.estimateLayoutSpace?.(this.getYAxisEstimateLabels(), this.renderTheme, context.svgNode);
+        }
         if (this.xAxis) {
             const xKey = this.getXKey();
             const labelKey = this.xAxis.labelKey;
@@ -164,12 +167,15 @@ export class XYChart extends BaseChart {
                 }
                 return item[xKey];
             });
-            this.xAxis.estimateLayoutSpace?.(labels, this.renderTheme, context.svgNode);
-        }
-        if (this.yAxis) {
-            this.yAxis.estimateLayoutSpace?.(this.getYAxisEstimateLabels(), this.renderTheme, context.svgNode);
+            this.xAxis.estimateLayoutSpace?.(labels, this.renderTheme, context.svgNode, this.data, this.getEstimatedXAxisRangeWidth());
         }
     }
+    getEstimatedXAxisRangeWidth() {
+        const yAxisWidth = this.yAxis?.getRequiredSpace().width ?? 0;
+        const { left, right } = this.renderTheme.margins;
+        const xScalePadding = 10;
+        return Math.max(0, this.width - left - right - yAxisWidth - xScalePadding);
+    }
     getYAxisEstimateLabels() {
         if (!this.yAxis) {
             return [];

package/docs/chart-group.md

@@ -219,7 +219,6 @@ group.onLegendChange(() => {
 await group.export('svg');
 await group.export('png');
 await group.export('jpg');
-await group.export('pdf');
 ```
 
 - Export width can be overridden with `options.width`

package/docs/components.md

@@ -14,6 +14,8 @@ new XAxis({
     groupLabelKey?: string,   // Optional key used for second-row grouped labels
     showGroupLabels?: boolean, // Show second-row grouped labels (default: false)
     groupLabelGap?: number,   // Vertical gap between tick row and grouped row
+    groupLabelMaxWidth?: number, // Optional cap for grouped-label width
+    groupLabelOversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Defaults to truncate
     rotatedLabels?: boolean,  // Rotate tick labels -45deg
     maxLabelWidth?: number,   // Optional cap for tick-label width
     oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Only applies when maxLabelWidth is set
@@ -24,7 +26,11 @@ new XAxis({
 })
 ```
 
-Grouped label styles come from `theme.axis.groupLabel` and are bold by default.
+Grouped label styles come from `theme.axis.groupLabel` and are bold by
+default. When `groupLabelMaxWidth` is omitted, grouped labels are automatically
+capped to their rendered group range so adjacent group labels do not collide.
+Use `groupLabelOversizedBehavior` to truncate, wrap, or hide labels that exceed
+that cap.
 
 ### Example
 
@@ -143,27 +149,18 @@ Tooltip modes:
 - `shared` - One tooltip per hovered category/value group
 - `split` - Default. One tooltip per visible series at the hovered category/value group
 
-Split tooltip positions:
+Shared tooltips omit series whose value is `null` or `undefined` for the hovered
+data point. Shared `customFormatter` callbacks receive that filtered series list.
 
-- `side` - Default. Place split tooltips to the side of each data point
-- `vertical` - Place split tooltips above or below each data point
+Use `position: 'side' | 'vertical'` for split tooltip placement. For bars,
+`barAnchorPosition` controls whether connectors point to the `top` or `middle`
+of each bar.
 
-When `split` mode is active, `customFormatter` receives the current series only for
-that tooltip box instead of the full visible series list. Split tooltips include
-directional arrows and avoid overlapping on the same side of the chart when
-possible.
+Tooltips default to a `280px` max width. Set `transition.show: true` to fade and
+slide tooltips between hovered positions. Tooltip colors use `theme.tooltip`.
 
-For bars, `barAnchorPosition` controls whether split tooltips point to the `top`
-or `middle` of each bar.
-
-Tooltips default to a `280px` max width so longer content wraps. Set `maxWidth`
-to choose a different cap in pixels.
-
-Set `transition.show: true` to fade tooltips in and out. Tooltip position and
-connector geometry update immediately; only opacity and the small entrance
-offset transition.
-
-Tooltip box, text, connector, and arrow colors use `theme.tooltip`.
+`defaultResponsiveConfig` switches tooltip components to `mode: 'shared'` at
+the `sm` breakpoint so compact XY charts use one grouped tooltip by default.
 
 Formatter, label formatter, and custom formatter output is inserted as HTML.
 Only return trusted content or sanitize user-provided strings before returning
@@ -344,7 +341,7 @@ new Text({
 
 Components can provide `exportHooks` to adjust export-only settings or mutate
 the exported SVG right before serialization. Hooks run only for visual exports
-(`svg`, `png`, `jpg`, `pdf`) and never touch the live chart instance. Use
+(`svg`, `png`, `jpg`) and never touch the live chart instance. Use
 `beforeRender` to return config overrides and `before` to mutate the export
 SVG.
 
@@ -403,24 +400,21 @@ breakpoints in chart constructor config (see
 - `xlsx` (lazy-loads optional `write-excel-file`)
 - `png`
 - `jpg`
-- `pdf` (lazy-loads optional `jspdf`)
 
 ```typescript
 await chart.export('png', { download: true });
 await chart.export('csv', { download: true, delimiter: ';' });
 await chart.export('xlsx', { download: true, sheetName: 'Data' });
-await chart.export('pdf', { download: true, pdfMargin: 16 });
 ```
 
 Export option highlights:
 
 - `columns`: choose specific columns for `csv` and `xlsx`
 - `delimiter`: CSV delimiter (default `,`)
-- `pixelRatio`: render scale for `png`, `jpg`, `pdf`
-- `backgroundColor`: defaults transparent for `png`, white for `jpg`/`pdf`
+- `pixelRatio`: render scale for `png` and `jpg`
+- `backgroundColor`: defaults transparent for `png` and white for `jpg`
 - `jpegQuality`: JPEG quality for `jpg` (default `0.92`)
 - `sheetName`: sheet name for `xlsx` (default `Sheet1`)
-- `pdfMargin`: page margin for `pdf` (default `0`)
 
 `json` export returns only the chart data payload
 

package/docs/xy-chart.md

@@ -78,6 +78,7 @@ Rules for grouped datasets:
 - Remaining keys are treated as metric columns.
 - Each `group` must be a non-empty string.
 - Group labels are rendered on a second x-axis row when `XAxis.showGroupLabels` is enabled.
+- Group labels are capped to their rendered group range by default. Set `XAxis.groupLabelMaxWidth` and `XAxis.groupLabelOversizedBehavior` to override truncation, wrapping, or hiding.
 - CSV/XLSX exports use spreadsheet-style grouped rows (blank first two headers, blank continuation group cells, no spacer rows).
 
 ### Scale Options
@@ -514,16 +515,8 @@ Bar charts support different stacking modes:
 - `percent` - 100% stacked bars
 - `layer` - Overlapping bars
 
-XY charts use split tooltips by default, rendering one tooltip per visible
-series at the hovered category. Use
-`new Tooltip({ mode: 'shared' | 'split', position: 'side' | 'vertical' })`
-to override the grouping and split-tooltip placement.
-For bars, set `barAnchorPosition: 'top' | 'middle'` to choose whether split
-tooltips point to the top or middle of each bar.
-Tooltips default to a `280px` max width. Set `maxWidth` to choose a different
-cap in pixels.
-Use `transition: { show: true, duration: 120, easing: 'ease-out' }` to opt in
-to softer tooltip opacity transitions without delaying position updates.
+Add `new Tooltip()` for hover and focus tooltips. XY charts use split tooltips
+by default; see the [Tooltip component](./components.md#tooltip) for options.
 
 Use `barStack.reverseSeries: true` to reverse bar series display order for
 rendering, legend entries, and split tooltip ordering without changing data

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.14.3",
+    "version": "0.16.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -38,48 +38,47 @@
         "d3-cloud": "^1.2.9"
     },
     "optionalDependencies": {
-        "jspdf": "^4.2.1",
-        "write-excel-file": "^4.0.7"
+        "write-excel-file": "^4.1.1"
     },
     "devDependencies": {
         "@eslint/js": "^10.0.1",
         "@handsontable/react-wrapper": "^17.1.0",
         "@internetstiftelsen/styleguide": "^5.1.27",
-        "@radix-ui/react-label": "^2.1.8",
-        "@radix-ui/react-select": "^2.2.6",
-        "@radix-ui/react-switch": "^1.2.6",
-        "@radix-ui/react-tabs": "^1.1.13",
-        "@speed-highlight/core": "^1.2.15",
-        "@tailwindcss/vite": "^4.3.0",
+        "@radix-ui/react-label": "^2.1.9",
+        "@radix-ui/react-select": "^2.3.0",
+        "@radix-ui/react-switch": "^1.3.0",
+        "@radix-ui/react-tabs": "^1.1.14",
+        "@speed-highlight/core": "^1.2.17",
+        "@tailwindcss/vite": "^4.3.1",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@types/d3": "^7.4.3",
         "@types/d3-cloud": "^1.2.9",
-        "@types/node": "^25.9.1",
-        "@types/react": "^19.2.16",
+        "@types/node": "^25.9.3",
+        "@types/react": "^19.2.17",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react-swc": "^4.3.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "eslint": "^10.4.1",
+        "eslint": "^10.5.0",
         "eslint-plugin-react-hooks": "^7.1.1",
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.6.0",
         "handsontable": "^17.1.0",
         "jsdom": "^29.1.1",
-        "lucide-react": "^1.17.0",
-        "prettier": "3.8.3",
-        "radix-ui": "^1.4.3",
+        "lucide-react": "^1.18.0",
+        "prettier": "3.8.4",
+        "radix-ui": "^1.5.0",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
-        "sass": "^1.100.0",
+        "sass": "^1.101.0",
         "tailwind-merge": "^3.6.0",
-        "tailwindcss": "^4.3.0",
+        "tailwindcss": "^4.3.1",
         "tsc-alias": "^1.8.17",
         "tw-animate-css": "^1.4.0",
         "typescript": "~6.0.3",
-        "typescript-eslint": "^8.60.1",
+        "typescript-eslint": "^8.61.0",
         "vite": "^8.0.16",
         "vitest": "^4.1.8"
     }

package/dist/export-pdf.d.ts

@@ -1,8 +0,0 @@
-type JsPdfLoader = () => Promise<unknown>;
-export type PDFExportOptions = {
-    width: number;
-    height: number;
-    margin: number;
-};
-export declare function exportPDFBlob(imageBlob: Blob, options: PDFExportOptions, loader?: JsPdfLoader): Promise<Blob>;
-export {};

package/dist/export-pdf.js

@@ -1,67 +0,0 @@
-function isObject(value) {
-    return typeof value === 'object' && value !== null;
-}
-function resolveJsPdfConstructor(moduleValue) {
-    if (!isObject(moduleValue)) {
-        throw new Error('Invalid "jspdf" module export');
-    }
-    const moduleCandidate = moduleValue;
-    const defaultCandidate = moduleCandidate.default;
-    let ctor = moduleCandidate.jsPDF;
-    if (!ctor && isObject(defaultCandidate)) {
-        ctor = defaultCandidate.jsPDF;
-    }
-    if (!ctor && typeof defaultCandidate === 'function') {
-        ctor = defaultCandidate;
-    }
-    if (typeof ctor !== 'function') {
-        throw new Error('Invalid "jspdf" module export');
-    }
-    return ctor;
-}
-async function defaultJsPdfLoader() {
-    return import('jspdf');
-}
-function blobToDataUrl(blob) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result));
-        reader.onerror = () => reject(new Error('Failed to create PDF image data'));
-        reader.readAsDataURL(blob);
-    });
-}
-export async function exportPDFBlob(imageBlob, options, loader = defaultJsPdfLoader) {
-    let jsPdfModule;
-    try {
-        jsPdfModule = await loader();
-    }
-    catch {
-        throw new Error('PDF export requires optional dependency "jspdf". Install optional dependency "jspdf".');
-    }
-    const JsPdfCtor = resolveJsPdfConstructor(jsPdfModule);
-    const margin = Math.max(0, options.margin);
-    const pageWidth = Math.max(1, options.width + margin * 2);
-    const pageHeight = Math.max(1, options.height + margin * 2);
-    const orientation = pageWidth >= pageHeight ? 'landscape' : 'portrait';
-    const pdf = new JsPdfCtor({
-        unit: 'px',
-        format: [pageWidth, pageHeight],
-        orientation,
-        hotfixes: ['px_scaling'],
-    });
-    const actualPageWidth = pdf.internal.pageSize.getWidth();
-    const actualPageHeight = pdf.internal.pageSize.getHeight();
-    const availableWidth = actualPageWidth - margin * 2;
-    const availableHeight = actualPageHeight - margin * 2;
-    if (availableWidth <= 0 || availableHeight <= 0) {
-        throw new Error('Invalid PDF margin: no drawable area remains');
-    }
-    const imageDataUrl = await blobToDataUrl(imageBlob);
-    const scale = Math.min(availableWidth / options.width, availableHeight / options.height);
-    const drawWidth = options.width * scale;
-    const drawHeight = options.height * scale;
-    const x = (actualPageWidth - drawWidth) / 2;
-    const y = (actualPageHeight - drawHeight) / 2;
-    pdf.addImage(imageDataUrl, 'PNG', x, y, drawWidth, drawHeight);
-    return pdf.output('blob');
-}