@k2b/ui 0.1.1 → 0.3.0

package/dist/browser/content/Chart.js

@@ -1,6 +1,8 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { style as _$style } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
@@ -10,19 +12,23 @@ import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-chart__anchor aria-hidden=true>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<span role=tooltip popover=manual class=k2b-tooltip>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span role=tooltip popover=manual data-instant=true class="k2b-tooltip k2b-chart__tooltip">`),
   _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-chart__controls><button type=button class="k2b-button k2b-icon-button"data-variant=secondary><i class="ti ti-plus"aria-hidden=true></i></button><button type=button class="k2b-button k2b-icon-button"data-variant=secondary><i class="ti ti-minus"aria-hidden=true></i></button><button type=button class="k2b-button k2b-icon-button"data-variant=secondary><i class="ti ti-focus-centered"aria-hidden=true>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<div role=group><div class=k2b-chart__svg></div><!$><!/><!$><!/>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<div>`);
+import { lineGapsSvg } from "./chart-line-gaps";
 import { charts } from "@k2b/stdlib";
-import { createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, Show } from "solid-js";
-import { positionTooltipSurface } from "../feedback/tooltip-position";
+import { createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, Show, splitProps, untrack } from "solid-js";
+import { createChartInspection } from "./chart-inspection";
+import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { DEFAULT_MAP_VIEWPORT, normalizeMapViewport, panMapViewport, zoomMapViewport } from "./chart-map-viewport";
 import { panStateTimelineViewport, renderStateTimelineSvg, stateTimelineDomain, stateTimelineHeight, zoomStateTimelineViewport } from "./chart-state-timeline";
+import { isServer } from "solid-js/web";
+import { responsiveChartSvg, responsiveMapSvg, selectedChartSvg } from "./chart-svg";
 
 /**
  * Chart — minimal Solid wrapper around `stdlib.charts`.
@@ -34,31 +40,20 @@ import { panStateTimelineViewport, renderStateTimelineSvg, stateTimelineDomain,
  * is a full SVG re-build, not a diff — fine for dashboard cadences
  * (poll, websocket, store updates). Don't use this for 60fps streaming.
  *
- * **Sizing.** stdlib emits `<svg viewBox="0 0 W H">` with no width/
- * height attributes, so the SVG would otherwise fall back to the
- * browser's replaced-element default (300×150) and either overflow
- * or look squished. We measure the wrapping `<div>` with a
- * ResizeObserver and pass the actual pixel dimensions to stdlib —
- * the viewBox matches the container, no aspect distortion, no
- * letterboxing. Sizing the wrapper itself is the caller's job
- * (`style={{ height: "14rem" }}`, an app class, a flex child, …).
- * On SSR (no observer)
- * the chart renders at stdlib's default size; the first client-side
- * frame re-measures and re-renders.
- *
- * One documented exception: `kind: "stateTimeline"` derives its own
- * initial height from the row count and legend via
- * `stateTimelineHeight()`, because a timeline's height is a function of
- * how many rows it has rather than of the layout around it. Every other
- * kind starts at 280px until the observer reports the real box. Layout
- * code that sizes charts uniformly must account for this.
+ * **Sizing.** The server and browser render the same logical viewBox. CSS
+ * fits Cartesian plots to the container and preserves text/marker sizes;
+ * maps fit the whole world and zoom uniformly across the full plot; pies, donuts and gauges retain
+ * their aspect ratio. No measurement
+ * or hydration redraw is needed. The caller sizes the wrapper, for example
+ * `style={{ height: "14rem" }}`. State timelines derive their default height
+ * from the row count and legend via `stateTimelineHeight()`.
  *
  * **Why so thin.** The props are a discriminated union over each
  * stdlib chart function — `kind: "line"` brings in exactly the params
  * `charts.line` expects, `kind: "bar"` brings in `charts.bar`'s, etc.
  * Options stay aligned with stdlib without renaming. Shared interactive
  * layers add bounded pan / zoom controls to maps and state timelines, plus
- * nearest-point hover and keyboard inspection for line charts.
+ * renderer-owned inspection, tooltips and optional selection for all chart kinds.
  * If stdlib gains a new option, it's automatically available at every
  * callsite.
  *
@@ -85,45 +80,68 @@ import { panStateTimelineViewport, renderStateTimelineSvg, stateTimelineDomain,
 /**
  * Per-kind props: `kind` discriminator + the exact options that
  * `charts.<kind>` accepts, **minus** `width` / `height` (the wrapper
- * owns those — they're derived from container measurement). Solid's
+ * owns those — CSS fits a stable coordinate space to the box). Solid's
  * component model handles discriminated unions natively, so callsites
  * get full type safety.
  */
 
+/** Pure renderer options: component layout, events and inspection are configured elsewhere. */
+
+/** Keep the fixed 28-unit bar-gauge rows inside the shared SSR/browser coordinate space. */
+export const chartRenderHeight = props => {
+  if (props.kind === "stateTimeline") return stateTimelineHeight(props.rows.length, props.legend !== false);
+  if (props.kind === "barGauge") return Math.max(280, (props.title || props.subtitle ? 42 : 16) + props.data.length * 28 + 14);
+  return 280;
+};
+
 /**
  * Internal — strips wrapper-only keys from props and forwards the
- * rest (plus measured size) to `charts[kind]`. The `any` is the
- * price for dispatching one function call across 8 different option
+ * rest (plus logical size) to `charts[kind]`. The `any` is the
+ * price for dispatching one function call across 14 different option
  * types; an explicit per-kind switch would type it but balloon the
  * component for no runtime benefit.
  */
-const renderSvg = (props, width, height, mapViewport, timelineViewport) => {
+export const renderChartSvg = (props, width, height, mapViewport, timelineViewport) => {
   const {
     kind,
     class: _class,
     style: _style,
     labels: _labels,
     interactive: _interactive,
+    onSelect: _onSelect,
+    selected: _selected,
+    tooltip: _tooltip,
+    cursor: _cursor,
+    zoomFocus: _zoomFocus,
     ...opts
   } = props;
   if (kind === "stateTimeline") {
-    return renderStateTimelineSvg({
+    return responsiveChartSvg(renderStateTimelineSvg({
       ...opts,
       width,
       height,
-      viewport: timelineViewport
-    });
+      viewport: timelineViewport,
+      interactive: props.interactive
+    }));
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return charts[kind]({
+  let svg = charts[kind]({
     ...opts,
-    ...(kind === "map" && mapViewport ? {
-      viewport: mapViewport
+    ...(kind === "map" ? {
+      viewport: DEFAULT_MAP_VIEWPORT
     } : {}),
     width,
-    height
+    height,
+    inspect: props.interactive === true || props.kind === "line" && props.maxGap !== undefined
   });
+  if (props.kind === "line" && props.maxGap !== undefined) {
+    if (props.area || props.errorBand) throw new Error("Chart maxGap does not support area or errorBand fills");
+    svg = lineGapsSvg(svg, props.maxGap, props);
+  }
+  if (props.kind === "map") return responsiveMapSvg(svg, width, height, normalizeMapViewport(mapViewport ?? props.viewport));
+  return preservesAspectRatio(kind) ? svg : responsiveChartSvg(svg);
 };
+const preservesAspectRatio = kind => kind === "map" || kind === "pie" || kind === "donut" || kind === "gauge";
 
 /** Empty-data short-circuit. Kept per-kind because stdlib's payload
  *  key differs (series vs data vs groups). We're conservative: only
@@ -148,25 +166,23 @@ const isEmpty = props => {
   return false;
 };
 const Chart = props => {
+  const [, drawingProps] = splitProps(props, ["selected", "onSelect", "tooltip", "cursor"]);
   const messages = useUiMessages();
+  const locale = useLocale();
   let containerRef;
   let chartTooltipRef;
   let lineAnchorRef;
-  let chartTooltipTriggerRef;
-  // Initial size matches stdlib's chart-function defaults so the SSR
-  // render is sensible. The observer updates this on the first
-  // client-side frame; the SVG re-renders reactively via innerHTML.
-  const initialHeight = props.kind === "stateTimeline" ? stateTimelineHeight(props.rows.length, props.legend !== false) : 280;
-  const [size, setSize] = createSignal({
+  // One deterministic coordinate space on the server and client. CSS fits the
+  // SVG to its box; hydration must never replace it with measured geometry.
+  const size = () => ({
     width: 480,
-    height: initialHeight
+    height: chartRenderHeight(props)
   });
+  const dimensions = () => containerRef?.getBoundingClientRect() ?? size();
   const initialMapViewport = props.kind === "map" ? normalizeMapViewport(props.viewport) : DEFAULT_MAP_VIEWPORT;
   const [mapViewport, setMapViewport] = createSignal(initialMapViewport);
   const initialTimelineViewport = props.kind === "stateTimeline" ? stateTimelineDomain(props.rows, props.domain) : [0, 1];
   const [timelineViewport, setTimelineViewport] = createSignal(initialTimelineViewport);
-  const [linePointIndex, setLinePointIndex] = createSignal(0);
-  const [lineInspectionActive, setLineInspectionActive] = createSignal(false);
   const [dragging, setDragging] = createSignal(false);
   const chartTooltipId = `k2b-chart-tooltip-${createUniqueId()}`;
   let timelineViewportLocallyChanged = false;
@@ -177,7 +193,7 @@ const Chart = props => {
   const interactiveMap = () => props.kind === "map" && props.interactive === true;
   const interactiveTimeline = () => props.kind === "stateTimeline" && props.interactive === true;
   const interactiveLine = () => props.kind === "line" && props.interactive === true;
-  const interactive = () => interactiveMap() || interactiveTimeline() || interactiveLine();
+  const interactive = () => props.interactive === true;
   const draggable = () => interactiveMap() || interactiveTimeline();
   const labels = () => props.labels ?? {};
   const timelineFullDomain = () => props.kind === "stateTimeline" ? stateTimelineDomain(props.rows, props.domain) : [0, 1];
@@ -197,6 +213,14 @@ const Chart = props => {
   };
   const mapDimensions = () => {
     const viewportElement = containerRef?.querySelector(".stdlib-chart-map-viewport");
+    const matrix = viewportElement?.getScreenCTM?.();
+    const box = viewportElement?.viewBox?.baseVal;
+    if (matrix && box?.width && box.height) {
+      return {
+        width: box.width * Math.hypot(matrix.a, matrix.b),
+        height: box.height * Math.hypot(matrix.c, matrix.d)
+      };
+    }
     const rect = viewportElement?.getBoundingClientRect();
     if (rect && rect.width > 0 && rect.height > 0) {
       return {
@@ -204,16 +228,18 @@ const Chart = props => {
         height: rect.height
       };
     }
-    return size();
+    return dimensions();
   };
   const zoom = delta => {
+    closeChartTooltip();
     if (interactiveMap()) {
-      setMapViewport(current => zoomMapViewport(current, delta));
+      setMapViewport(current => zoomMapViewport(current, delta, props.kind === "map" ? props.zoomFocus : undefined));
     } else if (interactiveTimeline()) {
       updateTimelineViewport(current => zoomStateTimelineViewport(current, timelineFullDomain(), delta));
     }
   };
   const reset = () => {
+    closeChartTooltip();
     if (interactiveMap() && props.kind === "map") {
       setMapViewport(normalizeMapViewport(props.viewport));
     }
@@ -223,6 +249,7 @@ const Chart = props => {
     }
   };
   const handlePointerDown = event => {
+    inspection.down(event);
     if (!draggable() || event.button !== 0 || event.target.closest("button, a")) {
       return;
     }
@@ -258,10 +285,8 @@ const Chart = props => {
     const sample = pendingPointer;
     pendingPointer = undefined;
     if (!sample) return;
-    if (interactiveLine()) {
-      showLineTooltip(sample.clientX, sample.clientY);
-      return;
-    }
+    const start = timelineDrag ?? drag;
+    if (start && Math.hypot(sample.clientX - start.x, sample.clientY - ("y" in start ? start.y : sample.clientY)) <= 6) return;
     const activeTimelineDrag = timelineDrag;
     if (activeTimelineDrag?.pointerId === sample.pointerId) {
       updateTimelineViewport(() => panStateTimelineViewport(activeTimelineDrag.viewport, timelineFullDomain(), sample.clientX - activeTimelineDrag.x, activeTimelineDrag.width));
@@ -271,7 +296,8 @@ const Chart = props => {
     setMapViewport(panMapViewport(drag.viewport, sample.clientX - drag.x, sample.clientY - drag.y, drag.width, drag.height));
   };
   const handlePointerMove = event => {
-    if (!interactiveLine() && timelineDrag?.pointerId !== event.pointerId && drag?.pointerId !== event.pointerId) return;
+    inspection.move(event);
+    if (timelineDrag?.pointerId !== event.pointerId && drag?.pointerId !== event.pointerId) return;
     pendingPointer = {
       pointerId: event.pointerId,
       clientX: event.clientX,
@@ -315,20 +341,8 @@ const Chart = props => {
     }
   };
   const handleKeyDown = event => {
-    if (!interactive()) return;
-    if (interactiveLine()) {
-      const values = lineXValues();
-      if (values.length === 0) return;
-      if (event.key === "Escape") {
-        closeChartTooltip();
-        return;
-      }
-      const next = event.key === "Home" ? 0 : event.key === "End" ? values.length - 1 : event.key === "ArrowLeft" ? Math.max(0, linePointIndex() - 1) : event.key === "ArrowRight" ? Math.min(values.length - 1, linePointIndex() + 1) : null;
-      if (next === null) return;
-      event.preventDefault();
-      showLinePoint(next);
-      return;
-    }
+    if (inspection.key(event)) return;
+    if (!draggable() || event.target !== containerRef) return;
     if (event.key === "+" || event.key === "=") {
       event.preventDefault();
       zoom(1);
@@ -360,171 +374,60 @@ const Chart = props => {
     const dimensions = mapDimensions();
     setMapViewport(current => panMapViewport(current, delta[0], delta[1], dimensions.width, dimensions.height));
   };
-  const closeChartTooltip = () => {
-    if (interactiveLine()) {
-      if (pointerFrame !== undefined) cancelAnimationFrame(pointerFrame);
-      pointerFrame = undefined;
-      pendingPointer = undefined;
-    }
-    chartTooltipTriggerRef?.removeAttribute("aria-describedby");
-    chartTooltipTriggerRef = undefined;
-    setLineInspectionActive(false);
-    if (!chartTooltipRef) return;
-    try {
-      if (chartTooltipRef.matches(":popover-open")) chartTooltipRef.hidePopover();
-    } catch {
-      // A disconnect can race with the Popover API.
-    }
-  };
-  const showTimelineTooltip = target => {
-    if (!interactiveTimeline() || !chartTooltipRef) return;
-    const trigger = target?.closest("[data-chart-tooltip]");
-    const content = trigger?.dataset.chartTooltip;
-    if (!trigger || !content) return;
-    chartTooltipTriggerRef?.removeAttribute("aria-describedby");
-    chartTooltipTriggerRef = trigger;
-    trigger.setAttribute("aria-describedby", chartTooltipId);
-    chartTooltipRef.textContent = content;
-    try {
-      if (!chartTooltipRef.matches(":popover-open")) chartTooltipRef.showPopover();
-      positionTooltipSurface(chartTooltipRef, trigger);
-    } catch {
-      // SVG <title> remains as the fallback on browsers without Popover.
-    }
-  };
-  const lineInspection = createMemo(() => {
-    if (props.kind !== "line") {
+  const inspection = createChartInspection({
+    container: () => containerRef,
+    cursor: () => props.cursor,
+    tooltip: () => chartTooltipRef,
+    anchor: () => lineAnchorRef,
+    kind: () => props.kind,
+    enabled: interactive,
+    select: selection => props.onSelect?.(selection),
+    format: selection => {
+      if (props.tooltip) return props.tooltip(selection);
+      const fields = messages().chartFields;
+      const format = new Intl.NumberFormat(locale(), {
+        maximumFractionDigits: 6
+      });
       return {
-        values: [],
-        series: []
+        title: selection.datum.label ?? (selection.datum.seriesIndex !== undefined ? `${labels().series ?? messages().series} ${selection.datum.seriesIndex + 1}` : undefined),
+        rows: selection.datum.values.map(field => ({
+          label: selection.kind === "line" && field.key === "y" ? selection.datum.label ?? labels().series ?? messages().series : fields({
+            key: field.key
+          }),
+          value: field.formatted ?? (field.key === "upperInclusive" ? field.value === "true" ? messages().yes : messages().no : typeof field.value === "number" ? `${format.format(field.value)}${field.key === "percent" ? "%" : ""}` : field.value)
+        }))
       };
     }
-    const values = new Set();
-    const series = props.series.map(entry => {
-      const points = new Map();
-      for (const point of entry.data) {
-        if (!Number.isFinite(point.x)) continue;
-        values.add(point.x);
-        if (Number.isFinite(point.y) && !points.has(point.x)) points.set(point.x, point);
-      }
-      return {
-        label: entry.label ?? labels().series ?? messages().series,
-        points
-      };
-    });
-    return {
-      values: [...values].sort((left, right) => left - right),
-      series
-    };
   });
-  const lineXValues = () => lineInspection().values;
-  const linePlotBounds = () => {
-    if (props.kind !== "line") return {
-      left: 0,
-      right: size().width
-    };
-    const padding = props.padding;
-    const left = (typeof padding === "number" ? padding : padding?.left) ?? 40;
-    const rightInset = (typeof padding === "number" ? padding : padding?.right) ?? 16;
-    return {
-      left: left + (props.yAxis?.label ? 14 : 0),
-      right: Math.max(left + 1, size().width - rightInset)
-    };
-  };
-  const showLinePoint = (index, pointerY) => {
-    if (props.kind !== "line" || !chartTooltipRef || !lineAnchorRef) return;
-    const inspection = lineInspection();
-    const values = inspection.values;
-    const pointIndex = Math.min(values.length - 1, Math.max(0, index));
-    const x = values[pointIndex];
-    if (x === undefined) return;
-    const points = inspection.series.map(series => {
-      const point = series.points.get(x);
-      return point ? {
-        label: series.label,
-        point
-      } : null;
-    }).filter(entry => entry !== null);
-    if (points.length === 0) return;
-    const xFormat = props.xAxis?.format ?? String;
-    const yFormat = props.yAxis?.format ?? String;
-    chartTooltipRef.textContent = [xFormat(x), ...points.map(entry => `${entry.label}: ${yFormat(entry.point.y)}`)].join(" · ");
-    const [min, max] = [values[0] ?? x, values.at(-1) ?? x];
-    const bounds = linePlotBounds();
-    const ratio = max === min ? 0.5 : (x - min) / (max - min);
-    lineAnchorRef.style.left = `${bounds.left + ratio * (bounds.right - bounds.left)}px`;
-    lineAnchorRef.style.top = `${Math.min(size().height - 8, Math.max(8, pointerY ?? 24))}px`;
-    setLinePointIndex(pointIndex);
-    setLineInspectionActive(true);
-    try {
-      if (!chartTooltipRef.matches(":popover-open")) chartTooltipRef.showPopover();
-      positionTooltipSurface(chartTooltipRef, lineAnchorRef);
-    } catch {
-      // The chart remains readable on browsers without Popover support.
-    }
-  };
-  const showLineTooltip = (clientX, clientY) => {
-    const values = lineXValues();
-    if (values.length === 0) return;
-    const rect = containerRef?.getBoundingClientRect();
-    if (!rect) return;
-    const bounds = linePlotBounds();
-    const localX = clientX - rect.left;
-    const ratio = Math.min(1, Math.max(0, (localX - bounds.left) / Math.max(1, bounds.right - bounds.left)));
-    const target = (values[0] ?? 0) + ratio * ((values.at(-1) ?? 0) - (values[0] ?? 0));
-    let low = 0;
-    let high = values.length - 1;
-    while (low < high) {
-      const middle = Math.floor((low + high) / 2);
-      if (values[middle] < target) low = middle + 1;else high = middle;
-    }
-    const previous = Math.max(0, low - 1);
-    const index = Math.abs(values[previous] - target) <= Math.abs(values[low] - target) ? previous : low;
-    showLinePoint(index, clientY - rect.top);
-  };
+  const closeChartTooltip = () => inspection.close();
+  const svgMarkup = createMemo(() => renderChartSvg(drawingProps, size().width, size().height, interactiveMap() ? mapViewport() : undefined, interactiveTimeline() ? timelineViewport() : undefined));
+  createEffect(() => {
+    svgMarkup();
+    inspection.invalidate();
+    untrack(() => inspection.selectDatum(props.selected));
+  });
+  createEffect(() => inspection.selectDatum(props.selected));
   onCleanup(() => {
+    inspection.close();
     if (pointerFrame !== undefined) cancelAnimationFrame(pointerFrame);
     pointerFrame = undefined;
     pendingPointer = undefined;
   });
   onMount(() => {
     if (!containerRef) return;
-    // Seed immediately from layout — avoids one wasted re-render in
-    // the case where the container already has its final size at
-    // mount time (the common case for dashboard widgets).
-    const rect = containerRef.getBoundingClientRect();
-    if (rect.width > 0 && rect.height > 0) {
-      setSize({
-        width: Math.round(rect.width),
-        height: Math.round(rect.height)
-      });
-    }
-    const ro = new ResizeObserver(entries => {
-      const entry = entries[0];
-      if (!entry) return;
-      const {
-        width,
-        height
-      } = entry.contentRect;
-      // Floor to integer pixels; sub-pixel jitter would trigger an
-      // SVG re-render on every scroll/zoom otherwise.
-      if (width > 0 && height > 0) {
-        setSize(prev => {
-          const w = Math.round(width);
-          const h = Math.round(height);
-          return prev.width === w && prev.height === h ? prev : {
-            width: w,
-            height: h
-          };
-        });
-      }
-    });
-    ro.observe(containerRef);
-    window.addEventListener("scroll", closeChartTooltip, true);
+    const outside = event => {
+      if (event.target instanceof Node && !containerRef?.contains(event.target)) closeChartTooltip();
+    };
+    window.addEventListener("pointerdown", outside);
+    const scroll = event => {
+      if (event.target instanceof Node && chartTooltipRef?.contains(event.target)) return;
+      closeChartTooltip();
+    };
+    window.addEventListener("scroll", scroll, true);
     window.addEventListener("resize", closeChartTooltip);
     onCleanup(() => {
-      ro.disconnect();
-      window.removeEventListener("scroll", closeChartTooltip, true);
+      window.removeEventListener("pointerdown", outside);
+      window.removeEventListener("scroll", scroll, true);
       window.removeEventListener("resize", closeChartTooltip);
     });
   });
@@ -542,10 +445,10 @@ const Chart = props => {
         typeof _ref$4 === "function" ? _$use(_ref$4, _el$11) : containerRef = _el$11;
         _$insert(_el$11, () => labels().empty ?? messages().noData);
         _$effect(_p$ => {
-          var _v$15 = `k2b-chart k2b-chart__empty ${props.class ?? ""}`,
-            _v$16 = chartStyle();
-          _v$15 !== _p$.e && _$className(_el$11, _p$.e = _v$15);
-          _p$.t = _$style(_el$11, _v$16, _p$.t);
+          var _v$19 = `k2b-chart k2b-chart__empty ${props.class ?? ""}`,
+            _v$20 = chartStyle();
+          _v$19 !== _p$.e && _$className(_el$11, _p$.e = _v$19);
+          _p$.t = _$style(_el$11, _v$20, _p$.t);
           return _p$;
         }, {
           e: undefined,
@@ -564,15 +467,9 @@ const Chart = props => {
       _el$.$$keydown = handleKeyDown;
       _el$.addEventListener("wheel", handleWheel);
       _el$.$$focusout = closeChartTooltip;
-      _el$.$$focusin = event => {
-        if (interactiveLine()) showLinePoint(lineXValues().length - 1);else showTimelineTooltip(event.target);
-      };
-      _el$.addEventListener("pointerleave", closeChartTooltip);
-      _el$.$$pointerout = event => {
-        const trigger = event.target.closest("[data-chart-tooltip]");
-        if (trigger && !trigger.contains(event.relatedTarget)) closeChartTooltip();
-      };
-      _el$.$$pointerover = event => showTimelineTooltip(event.target);
+      _$addEventListener(_el$, "focusin", inspection.focus, true);
+      _$addEventListener(_el$, "pointerleave", inspection.leave);
+      _$addEventListener(_el$, "click", inspection.click, true);
       _el$.addEventListener("pointercancel", stopDragging);
       _el$.$$pointerup = stopDragging;
       _el$.$$pointermove = handlePointerMove;
@@ -581,7 +478,7 @@ const Chart = props => {
       typeof _ref$ === "function" ? _$use(_ref$, _el$) : containerRef = _el$;
       _$insert(_el$, _$createComponent(Show, {
         get when() {
-          return interactiveTimeline() || interactiveLine();
+          return interactive();
         },
         get children() {
           return [(() => {
@@ -643,20 +540,28 @@ const Chart = props => {
           _v$0 = !draggable() && interactiveLine() ? "true" : undefined,
           _v$1 = interactive() ? "true" : undefined,
           _v$10 = chartStyle(),
-          _v$11 = interactiveLine() && lineInspectionActive() ? chartTooltipId : undefined,
-          _v$12 = interactiveMap() ? labels().interactiveMap ?? messages().interactiveMap : interactiveTimeline() ? labels().interactiveTimeline ?? messages().interactiveTimeline : interactiveLine() ? labels().interactiveLine ?? messages().interactiveLineChart : undefined,
+          _v$11 = interactiveMap() ? labels().interactiveMap ?? messages().interactiveMap : interactiveTimeline() ? labels().interactiveTimeline ?? messages().interactiveTimeline : interactiveLine() ? labels().interactiveLine ?? messages().interactiveLineChart : interactive() ? labels().interactiveChart ?? messages().interactiveChart : undefined,
+          _v$12 = interactive() ? messages().interactiveChart : undefined,
           _v$13 = interactive() ? 0 : undefined,
-          _v$14 = renderSvg(props, size().width, size().height, interactiveMap() ? mapViewport() : undefined, interactiveTimeline() ? timelineViewport() : undefined);
+          _v$14 = !preservesAspectRatio(props.kind) ? "true" : undefined,
+          _v$15 = `${size().width}px`,
+          _v$16 = `${size().height}px`,
+          _v$17 = `${size().width} / ${size().height}`,
+          _v$18 = isServer ? selectedChartSvg(svgMarkup(), props.selected) : svgMarkup();
         _v$7 !== _p$.e && _$className(_el$, _p$.e = _v$7);
         _v$8 !== _p$.t && _$setAttribute(_el$, "data-chart-kind", _p$.t = _v$8);
         _v$9 !== _p$.a && _$setAttribute(_el$, "data-drag", _p$.a = _v$9);
         _v$0 !== _p$.o && _$setAttribute(_el$, "data-crosshair", _p$.o = _v$0);
         _v$1 !== _p$.i && _$setAttribute(_el$, "data-interactive", _p$.i = _v$1);
         _p$.n = _$style(_el$, _v$10, _p$.n);
-        _v$11 !== _p$.s && _$setAttribute(_el$, "aria-describedby", _p$.s = _v$11);
-        _v$12 !== _p$.h && _$setAttribute(_el$, "aria-label", _p$.h = _v$12);
+        _v$11 !== _p$.s && _$setAttribute(_el$, "aria-label", _p$.s = _v$11);
+        _v$12 !== _p$.h && _$setAttribute(_el$, "aria-description", _p$.h = _v$12);
         _v$13 !== _p$.r && _$setAttribute(_el$, "tabindex", _p$.r = _v$13);
-        _v$14 !== _p$.d && _$setProperty(_el$2, "innerHTML", _p$.d = _v$14);
+        _v$14 !== _p$.d && _$setAttribute(_el$2, "data-stretch", _p$.d = _v$14);
+        _v$15 !== _p$.l && _$setStyleProperty(_el$2, "--k2b-chart-width", _p$.l = _v$15);
+        _v$16 !== _p$.u && _$setStyleProperty(_el$2, "--k2b-chart-height", _p$.u = _v$16);
+        _v$17 !== _p$.c && _$setStyleProperty(_el$2, "aspect-ratio", _p$.c = _v$17);
+        _v$18 !== _p$.w && _$setProperty(_el$2, "innerHTML", _p$.w = _v$18);
         return _p$;
       }, {
         e: undefined,
@@ -668,7 +573,11 @@ const Chart = props => {
         s: undefined,
         h: undefined,
         r: undefined,
-        d: undefined
+        d: undefined,
+        l: undefined,
+        u: undefined,
+        c: undefined,
+        w: undefined
       });
       _$runHydrationEvents();
       return _el$;
@@ -676,5 +585,5 @@ const Chart = props => {
   });
 };
 export default Chart;
-_$delegateEvents(["pointerdown", "pointermove", "pointerup", "pointerover", "pointerout", "focusin", "focusout", "keydown", "click"]);
+_$delegateEvents(["pointerdown", "pointermove", "pointerup", "click", "focusin", "focusout", "keydown"]);
 //# sourceMappingURL=Chart.js.map