@pushwoosh/kit-charts 0.0.25 → 0.1.0

package/ai-documentation.md

@@ -266,9 +266,9 @@ It therefore carries none of the application-template configuration — no
 reads one), no `.browserslistrc` and no `.stylelintrc`. Only what something
 actually reads is here: `tsconfig.json`, `playground/tsconfig.json`,
 `eslint.config.mjs` (the engine's config plus this project's two rules),
-`pushwoosh.config.js`, and `jest.config.js`.
+`pushwoosh.config.js`, and `vitest.config.mts`.
 
-`jest.config.js` is hand-written because the engine has no test runner. The
+`vitest.config.mts` is hand-written because the engine has no test runner. The
 `playground` script runs the command `lib:command:playground` prints (backticks, like the
 engine's `app:command:*`): since engine 3.1.3 it names webpack-dev-server and the playground
 config by absolute paths inside the engine, so the package needs no webpack of its own.
@@ -337,7 +337,7 @@ Two mechanisms, chosen by the shape being moved.
 
 **CSS transitions** carry shapes whose geometry interpolates correctly component by
 component: the vertices of a line or an area, and the `x`/`y`/`width`/`height` of a
-column. `SeriesLayer` in `Chart.styles.ts` owns those.
+column. `SeriesLayer` in `Chart/styles.ts` owns those.
 
 **A frame-by-frame tween** (`useTweenedNumbers`) carries shapes that are *generated*
 from numbers, where blending the drawing instructions is not the same as blending
@@ -416,7 +416,7 @@ Golden cases: `tooltip/callout`, `tooltip/shared-formatter`.
 ## Styling
 
 The library ships no inline styles: everything visual is either an SVG
-presentation attribute or a styled-component in `*.styles.ts`. Every layout
+presentation attribute or a styled-component in `styles.ts`. Every layout
 distance — label gaps, axis gutters, legend rows, tooltip padding — is a named
 constant in `src/core/layout/metrics.ts`, not a number typed at the point of use;
 that is what keeps the chrome consistent across components. Fonts, greys and

package/core/Chart/Chart.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Grid, XAxis, XAxisLine, YAxis } from './Axes';
-import { Canvas, Centred, Container, PinnedAxes, ResetZoom, ScrollBox, SeriesLayer, TooltipCell, TooltipDivider, TooltipHeadCell, TooltipName, TooltipRow, TooltipSeriesCell, TooltipSeriesInner, TooltipSwatch, TooltipTable, TooltipTitle, TooltipValue, ZoomBand } from './Chart.styles';
 import { ChartErrorBoundary } from './ChartErrorBoundary';
 import { Legend } from './Legend';
 import { PlotDecorations } from './PlotDecorations';
 import { StackLabels } from './StackLabels';
+import { Canvas, Centred, Container, PinnedAxes, ResetZoom, ScrollBox, SeriesLayer, TooltipCell, TooltipDivider, TooltipHeadCell, TooltipName, TooltipRow, TooltipSeriesCell, TooltipSeriesInner, TooltipSwatch, TooltipTable, TooltipTitle, TooltipValue, ZoomBand } from './styles';
 import { Titles } from './Titles';
 import { Tooltip } from './Tooltip';
 import { useSize } from './useSize';

package/core/Chart/Legend.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LegendItemBox } from './Chart.styles';
+import { LegendItemBox } from './styles';
 import { layoutLegend } from '../layout/legend-layout';
 import { measureText, DEFAULT_FONT_SIZE } from '../layout/measure-text';
 import { TEXT_BASELINE_SHIFT } from '../layout/metrics';

package/core/Chart/Titles.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HintIcon } from './Chart.styles';
 import { Hinted } from './Hinted';
+import { HintIcon } from './styles';
 import { DEFAULT_FONT_SIZE } from '../layout/measure-text';
 import { HINT_ICON_RADIUS, HINT_ICON_SIZE } from '../layout/metrics';
 import { DEFAULT_MUTED_TEXT_COLOR, DEFAULT_TEXT_COLOR } from '../model/palette';

package/core/Chart/Tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { DEFAULTS, Tail, TooltipBox } from './Chart.styles';
+import { DEFAULTS, Tail, TooltipBox } from './styles';
 import { TOOLTIP_ANCHOR_GAP, TOOLTIP_CURSOR_OFFSET, TOOLTIP_PADDING, TOOLTIP_RADIUS, TOOLTIP_TAIL_HEIGHT, TOOLTIP_TAIL_WIDTH, VIEWPORT_MARGIN } from '../layout/metrics';
 const SHADOW_COLOR = 'rgba(0, 0, 0, 0.12)';
 const DEFAULT_SHADOW = `0 2px 8px ${SHADOW_COLOR}`;

package/core/Chart/styles.d.ts

@@ -0,0 +1,159 @@
+export interface ContainerProps {
+    $width: string;
+    $height: string;
+    $autoHeight: boolean;
+    $background: string | undefined;
+    $fontFamily: string;
+    $fontSize: string;
+}
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, ContainerProps>> & string;
+export declare const ScrollBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $scrolls: boolean;
+}>> & string;
+/**
+ * The y axes of a horizontally scrolling chart, drawn in their own layer over
+ * the scroll box so the plot slides under them instead of taking them with it —
+ * a row-label column is useless once it has scrolled off. Highcharts does the
+ * same with a second, fixed SVG.
+ */
+export declare const PinnedAxes: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").SVGProps<SVGSVGElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const Canvas: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").SVGProps<SVGSVGElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $clickable?: boolean;
+}>> & string;
+/**
+ * One series. Hiding it never drops it from the tree, so the change can play: the
+ * geometry transitions carry every shape to where the renderer put it — collapsed
+ * onto its own baseline, or rescaled by the axis the remaining series left behind —
+ * and the opacity mops up the rest. `d` is animatable in Chromium; the attribute
+ * transitions cover columns, cells and markers everywhere.
+ */
+export declare const SeriesLayer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").SVGProps<SVGGElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $hidden: boolean;
+    $collapse: boolean;
+    $selfAnimated: boolean;
+    /** Opacity while another series is hovered, from `states.inactive`. */
+    $inactive?: number;
+    /** `series.opacity`: the whole series faded, border and labels included. */
+    $opacity?: number;
+    /** `series.animation`; the chart clock unless this series asked for its own. */
+    $motionMs: number;
+    $cursor: string;
+}>> & string;
+export declare const LegendItemBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").SVGProps<SVGGElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $off: boolean;
+    $interactive: boolean;
+    $hoverColor?: string;
+    $hoverWeight?: string;
+}>> & string;
+/** The hint badge beside a title: a light square with a blue glyph, as in the CP. */
+export declare const HintIcon: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").SVGProps<SVGGElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const Centred: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export interface TooltipBoxProps {
+    $x: number;
+    $y: number;
+    $padding: number;
+    $radius: number;
+    $borderColor: string;
+    $background: string;
+    $color: string;
+    $fontFamily: string;
+    $fontSize: string;
+    $whiteSpace: string;
+    $shadow: string;
+}
+export declare const TooltipBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, TooltipBoxProps>> & string;
+/** Edge of the box the beak sits on, named after that edge. */
+export type TailSide = 'top' | 'right' | 'bottom' | 'left';
+export interface TailProps {
+    $offset: number;
+    $width: number;
+    $height: number;
+    $side: TailSide;
+}
+/** The callout beak; an SVG, so it can carry the box border and cut it at the base. */
+export declare const Tail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").SVGProps<SVGSVGElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, TailProps>> & string;
+export declare const TooltipTitle: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const TooltipRow: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const TooltipSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $color: string;
+    $round?: boolean;
+}>> & string;
+export declare const TooltipName: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const TooltipValue: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const DEFAULTS: {
+    fontFamily: string;
+    fontSize: string;
+    border: string;
+    surface: string;
+    text: string;
+    tooltipSurface: string;
+    tooltipText: string;
+};
+/**
+ * The table layout of the tooltip. A heading row plus one row per series, so a
+ * count and its share line up in columns instead of running together on one line.
+ */
+export declare const TooltipTable: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const TooltipHeadCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $align: "left" | "right";
+}>> & string;
+export declare const TooltipCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $align: "left" | "right";
+    $muted?: boolean;
+}>> & string;
+export declare const TooltipSeriesCell: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+/** Keeps the swatch on the baseline of the series name inside a table cell. */
+export declare const TooltipSeriesInner: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+/** Separates the header line from the table under it. */
+export declare const TooltipDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $color: string;
+}>> & string;
+/** The rectangle dragged out over the plot before the zoom is applied. */
+export declare const ZoomBand: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").SVGProps<SVGRectElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const ResetZoom: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/core/Chart/{Chart.styles.js → styles.js}

@@ -8,7 +8,7 @@ const TOOLTIP_MAX_WIDTH = '360px';
 const TOOLTIP_Z_INDEX = 2147483000;
 export const Container = styled.div.withConfig({
   displayName: "Container",
-  componentId: "sc-1pit1b9-0"
+  componentId: "sc-1qn3vlx-0"
 })(["position:relative;width:", ";height:", ";min-width:0;overflow:hidden;min-height:", ";background:", ";font-family:", ";font-size:", ";"], ({
   $width
 }) => $width, ({
@@ -24,7 +24,7 @@ export const Container = styled.div.withConfig({
 }) => $fontSize);
 export const ScrollBox = styled.div.withConfig({
   displayName: "ScrollBox",
-  componentId: "sc-1pit1b9-1"
+  componentId: "sc-1qn3vlx-1"
 })(["", ""], ({
   $scrolls
 }) => $scrolls ? css(["overflow-x:auto;overflow-y:hidden;"]) : '');
@@ -36,11 +36,11 @@ export const ScrollBox = styled.div.withConfig({
  */
 export const PinnedAxes = styled.svg.withConfig({
   displayName: "PinnedAxes",
-  componentId: "sc-1pit1b9-2"
+  componentId: "sc-1qn3vlx-2"
 })(["position:absolute;top:0;left:0;pointer-events:none;"]);
 export const Canvas = styled.svg.withConfig({
   displayName: "Canvas",
-  componentId: "sc-1pit1b9-3"
+  componentId: "sc-1qn3vlx-3"
 })(["display:block;touch-action:none;cursor:", ";"], ({
   $clickable
 }) => $clickable ? 'pointer' : 'default');
@@ -53,7 +53,7 @@ export const Canvas = styled.svg.withConfig({
  */
 export const SeriesLayer = styled.g.withConfig({
   displayName: "SeriesLayer",
-  componentId: "sc-1pit1b9-4"
+  componentId: "sc-1qn3vlx-4"
 })(["opacity:", ";pointer-events:", ";cursor:", ";transition:opacity ", "ms ", ";", " @media (prefers-reduced-motion:reduce){transition:none;path,rect,circle,text{transition:none;}}"], ({
   $hidden,
   $inactive,
@@ -75,7 +75,7 @@ export const SeriesLayer = styled.g.withConfig({
 }) => $selfAnimated ? '' : css(["path,rect,circle,text{transition:d ", "ms ", ",x ", "ms ", ",y ", "ms ", ",width ", "ms ", ",height ", "ms ", ",cx ", "ms ", ",cy ", "ms ", ",opacity ", "ms ", ";}"], $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING));
 export const LegendItemBox = styled.g.withConfig({
   displayName: "LegendItemBox",
-  componentId: "sc-1pit1b9-5"
+  componentId: "sc-1qn3vlx-5"
 })(["cursor:", ";opacity:", ";transition:opacity ", "ms ", ";&:hover{opacity:", ";", "}&:focus{outline:none;}&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], ({
   $interactive
 }) => $interactive ? 'pointer' : 'default', ({
@@ -95,15 +95,15 @@ export const LegendItemBox = styled.g.withConfig({
 /** The hint badge beside a title: a light square with a blue glyph, as in the CP. */
 export const HintIcon = styled.g.withConfig({
   displayName: "HintIcon",
-  componentId: "sc-1pit1b9-6"
+  componentId: "sc-1qn3vlx-6"
 })(["cursor:help;rect{fill:", ";transition:fill ", "ms ", ";}text{fill:", ";font-weight:700;transition:fill ", "ms ", ";}&:hover rect,&:focus-visible rect{fill:", ";}&:hover text,&:focus-visible text{fill:", ";}&:focus{outline:none;}&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], Color.BRIGHT_LIGHT, HOVER_MS, MOTION_EASING, Color.PRIMARY, HOVER_MS, MOTION_EASING, Color.PRIMARY, DEFAULT_SURFACE_COLOR, Color.PRIMARY);
 export const Centred = styled.div.withConfig({
   displayName: "Centred",
-  componentId: "sc-1pit1b9-7"
+  componentId: "sc-1qn3vlx-7"
 })(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:", ";color:", ";"], DEFAULT_FONT_SIZE, DEFAULT_MUTED_TEXT_COLOR);
 export const TooltipBox = styled.div.withConfig({
   displayName: "TooltipBox",
-  componentId: "sc-1pit1b9-8"
+  componentId: "sc-1qn3vlx-8"
 })(["position:fixed;z-index:", ";top:", ";left:", ";max-width:", ";padding:", ";border:1px solid ", ";border-radius:", ";background:", ";box-shadow:", ";font-family:", ";font-size:", ";line-height:1.45;color:", ";white-space:", ";pointer-events:none;"], TOOLTIP_Z_INDEX, ({
   $y
 }) => `${$y}px`, ({
@@ -140,19 +140,19 @@ function tailAnchor({
 /** The callout beak; an SVG, so it can carry the box border and cut it at the base. */
 export const Tail = styled.svg.withConfig({
   displayName: "Tail",
-  componentId: "sc-1pit1b9-9"
+  componentId: "sc-1qn3vlx-9"
 })(["position:absolute;", ";overflow:visible;"], tailAnchor);
 export const TooltipTitle = styled.div.withConfig({
   displayName: "TooltipTitle",
-  componentId: "sc-1pit1b9-10"
+  componentId: "sc-1qn3vlx-10"
 })(["margin:0 0 4px;font-weight:600;"]);
 export const TooltipRow = styled.div.withConfig({
   displayName: "TooltipRow",
-  componentId: "sc-1pit1b9-11"
+  componentId: "sc-1qn3vlx-11"
 })(["display:flex;align-items:center;gap:6px;"]);
 export const TooltipSwatch = styled.span.withConfig({
   displayName: "TooltipSwatch",
-  componentId: "sc-1pit1b9-12"
+  componentId: "sc-1qn3vlx-12"
 })(["display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:", ";background:", ";"], ({
   $round
 }) => $round ? '50%' : '2px', ({
@@ -160,11 +160,11 @@ export const TooltipSwatch = styled.span.withConfig({
 }) => $color);
 export const TooltipName = styled.span.withConfig({
   displayName: "TooltipName",
-  componentId: "sc-1pit1b9-13"
+  componentId: "sc-1qn3vlx-13"
 })(["opacity:0.7;"]);
 export const TooltipValue = styled.span.withConfig({
   displayName: "TooltipValue",
-  componentId: "sc-1pit1b9-14"
+  componentId: "sc-1qn3vlx-14"
 })(["margin-left:auto;font-weight:600;"]);
 export const DEFAULTS = {
   fontFamily: DEFAULT_FONT_FAMILY,
@@ -181,17 +181,17 @@ export const DEFAULTS = {
  */
 export const TooltipTable = styled.table.withConfig({
   displayName: "TooltipTable",
-  componentId: "sc-1pit1b9-15"
+  componentId: "sc-1qn3vlx-15"
 })(["border-collapse:collapse;width:100%;"]);
 export const TooltipHeadCell = styled.th.withConfig({
   displayName: "TooltipHeadCell",
-  componentId: "sc-1pit1b9-16"
+  componentId: "sc-1qn3vlx-16"
 })(["padding:0 0 6px;text-align:", ";font-weight:400;white-space:nowrap;opacity:0.6;&:not(:first-child){padding-left:16px;}"], ({
   $align
 }) => $align);
 export const TooltipCell = styled.td.withConfig({
   displayName: "TooltipCell",
-  componentId: "sc-1pit1b9-17"
+  componentId: "sc-1qn3vlx-17"
 })(["padding:3px 0 0;text-align:", ";white-space:nowrap;opacity:", ";&:not(:first-child){padding-left:16px;}"], ({
   $align
 }) => $align, ({
@@ -199,26 +199,26 @@ export const TooltipCell = styled.td.withConfig({
 }) => $muted ? 0.6 : 1);
 export const TooltipSeriesCell = styled.td.withConfig({
   displayName: "TooltipSeriesCell",
-  componentId: "sc-1pit1b9-18"
+  componentId: "sc-1qn3vlx-18"
 })(["padding:3px 0 0;white-space:nowrap;"]);
 /** Keeps the swatch on the baseline of the series name inside a table cell. */
 export const TooltipSeriesInner = styled.span.withConfig({
   displayName: "TooltipSeriesInner",
-  componentId: "sc-1pit1b9-19"
+  componentId: "sc-1qn3vlx-19"
 })(["display:inline-flex;align-items:center;gap:6px;"]);
 /** Separates the header line from the table under it. */
 export const TooltipDivider = styled.div.withConfig({
   displayName: "TooltipDivider",
-  componentId: "sc-1pit1b9-20"
+  componentId: "sc-1qn3vlx-20"
 })(["height:1px;margin:8px 0;background:", ";opacity:0.5;"], ({
   $color
 }) => $color);
 /** The rectangle dragged out over the plot before the zoom is applied. */
 export const ZoomBand = styled.rect.withConfig({
   displayName: "ZoomBand",
-  componentId: "sc-1pit1b9-21"
+  componentId: "sc-1qn3vlx-21"
 })(["fill:", ";fill-opacity:0.12;pointer-events:none;"], Color.PRIMARY);
 export const ResetZoom = styled.button.withConfig({
   displayName: "ResetZoom",
-  componentId: "sc-1pit1b9-22"
+  componentId: "sc-1qn3vlx-22"
 })(["position:absolute;top:8px;right:8px;padding:4px 10px;border:1px solid ", ";border-radius:4px;background:", ";font-family:inherit;font-size:", ";color:", ";cursor:pointer;&:hover{border-color:", ";color:", ";}&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], DEFAULT_GRID_COLOR, DEFAULT_SURFACE_COLOR, DEFAULT_FONT_SIZE, DEFAULT_TEXT_COLOR, Color.PRIMARY, Color.PRIMARY, Color.PRIMARY);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.25",
+  "version": "0.1.0",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {
@@ -26,25 +26,22 @@
     "directory": "dist"
   },
   "dependencies": {
-    "@pushwoosh/kit-constants": "^2.1.0"
+    "@pushwoosh/kit-constants": "^2.1.1"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.1.3",
+    "@pushwoosh/frontend-builder-engine": "^3.1.4",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/jest": "^30.0.0",
-    "@types/node": "^26.1.1",
+    "@types/node": "^24.19.1",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
-    "@types/styled-components": "^5.1.34",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
+    "jsdom": "^26.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "styled-components": "^5.3.11",
-    "ts-jest": "^29.4.6",
-    "typescript": "^6.0.3"
+    "styled-components": "^6.5.3",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -61,6 +58,6 @@
     "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src ./playground ./tests",
     "check:lint-fix": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src ./playground ./tests --fix",
     "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types && tsc --noEmit -p tsconfig.json",
-    "test": "jest"
+    "test": "vitest run"
   }
 }

package/core/Chart/Chart.styles.d.ts

@@ -1,113 +0,0 @@
-export interface ContainerProps {
-    $width: string;
-    $height: string;
-    $autoHeight: boolean;
-    $background: string | undefined;
-    $fontFamily: string;
-    $fontSize: string;
-}
-export declare const Container: import("styled-components").StyledComponent<"div", any, ContainerProps, never>;
-export declare const ScrollBox: import("styled-components").StyledComponent<"div", any, {
-    $scrolls: boolean;
-}, never>;
-/**
- * The y axes of a horizontally scrolling chart, drawn in their own layer over
- * the scroll box so the plot slides under them instead of taking them with it —
- * a row-label column is useless once it has scrolled off. Highcharts does the
- * same with a second, fixed SVG.
- */
-export declare const PinnedAxes: import("styled-components").StyledComponent<"svg", any, {}, never>;
-export declare const Canvas: import("styled-components").StyledComponent<"svg", any, {
-    $clickable?: boolean;
-}, never>;
-/**
- * One series. Hiding it never drops it from the tree, so the change can play: the
- * geometry transitions carry every shape to where the renderer put it — collapsed
- * onto its own baseline, or rescaled by the axis the remaining series left behind —
- * and the opacity mops up the rest. `d` is animatable in Chromium; the attribute
- * transitions cover columns, cells and markers everywhere.
- */
-export declare const SeriesLayer: import("styled-components").StyledComponent<"g", any, {
-    $hidden: boolean;
-    $collapse: boolean;
-    $selfAnimated: boolean;
-    /** Opacity while another series is hovered, from `states.inactive`. */
-    $inactive?: number;
-    /** `series.opacity`: the whole series faded, border and labels included. */
-    $opacity?: number;
-    /** `series.animation`; the chart clock unless this series asked for its own. */
-    $motionMs: number;
-    $cursor: string;
-}, never>;
-export declare const LegendItemBox: import("styled-components").StyledComponent<"g", any, {
-    $off: boolean;
-    $interactive: boolean;
-    $hoverColor?: string;
-    $hoverWeight?: string;
-}, never>;
-/** The hint badge beside a title: a light square with a blue glyph, as in the CP. */
-export declare const HintIcon: import("styled-components").StyledComponent<"g", any, {}, never>;
-export declare const Centred: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface TooltipBoxProps {
-    $x: number;
-    $y: number;
-    $padding: number;
-    $radius: number;
-    $borderColor: string;
-    $background: string;
-    $color: string;
-    $fontFamily: string;
-    $fontSize: string;
-    $whiteSpace: string;
-    $shadow: string;
-}
-export declare const TooltipBox: import("styled-components").StyledComponent<"div", any, TooltipBoxProps, never>;
-/** Edge of the box the beak sits on, named after that edge. */
-export type TailSide = 'top' | 'right' | 'bottom' | 'left';
-export interface TailProps {
-    $offset: number;
-    $width: number;
-    $height: number;
-    $side: TailSide;
-}
-/** The callout beak; an SVG, so it can carry the box border and cut it at the base. */
-export declare const Tail: import("styled-components").StyledComponent<"svg", any, TailProps, never>;
-export declare const TooltipTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TooltipRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TooltipSwatch: import("styled-components").StyledComponent<"span", any, {
-    $color: string;
-    $round?: boolean;
-}, never>;
-export declare const TooltipName: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const TooltipValue: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const DEFAULTS: {
-    fontFamily: string;
-    fontSize: string;
-    border: string;
-    surface: string;
-    text: string;
-    tooltipSurface: string;
-    tooltipText: string;
-};
-/**
- * The table layout of the tooltip. A heading row plus one row per series, so a
- * count and its share line up in columns instead of running together on one line.
- */
-export declare const TooltipTable: import("styled-components").StyledComponent<"table", any, {}, never>;
-export declare const TooltipHeadCell: import("styled-components").StyledComponent<"th", any, {
-    $align: "left" | "right";
-}, never>;
-export declare const TooltipCell: import("styled-components").StyledComponent<"td", any, {
-    $align: "left" | "right";
-    $muted?: boolean;
-}, never>;
-export declare const TooltipSeriesCell: import("styled-components").StyledComponent<"td", any, {}, never>;
-/** Keeps the swatch on the baseline of the series name inside a table cell. */
-export declare const TooltipSeriesInner: import("styled-components").StyledComponent<"span", any, {}, never>;
-/** Separates the header line from the table under it. */
-export declare const TooltipDivider: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
-}, never>;
-/** The rectangle dragged out over the plot before the zoom is applied. */
-export declare const ZoomBand: import("styled-components").StyledComponent<"rect", any, {}, never>;
-export declare const ResetZoom: import("styled-components").StyledComponent<"button", any, {}, never>;