@k2b/ui 0.2.0 → 0.4.0

package/dist/ssr/chat/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["chat/types.ts"],"sourcesContent":["export type ChatRole = \"user\" | \"assistant\" | \"system\" | \"tool\";\n\nexport type ChatMessageStatus = \"pending\" | \"streaming\" | \"complete\" | \"error\";\n\nexport type ChatActivityTone = \"neutral\" | \"ai\" | \"success\" | \"danger\";\n\ntype ChatActionBase = {\n  id: string;\n  label: string;\n  icon?: string;\n  variant?: \"danger\";\n  disabled?: boolean;\n  /** Toggle state for persistent message actions such as feedback. */\n  pressed?: boolean;\n  /** Semantic foreground for selected feedback actions, without a persistent background. */\n  pressedTone?: \"success\" | \"danger\";\n};\n\n/** Exactly one executable behavior for every chat action. */\nexport type ChatAction = ChatActionBase &\n  ({ onSelect: () => void | Promise<void>; copyText?: never } | { copyText: string; onSelect?: never });\n\nexport type ChatAttachment = {\n  id: string;\n  name: string;\n  size?: number;\n  kind?: \"file\" | \"image\" | \"resource\";\n  icon?: string;\n  previewUrl?: string;\n  alt?: string;\n  /** Optional destination represented by this attachment. */\n  href?: string;\n  /** Opaque application-owned payload returned unchanged with ChatSubmitInput. */\n  data?: unknown;\n  /** Optional application-owned action presented below the attachment label. */\n  action?: ChatAction;\n};\n\nexport type ChatUsage = {\n  input?: number;\n  output?: number;\n  total?: number;\n};\n\nexport type ChatContextUsageData = {\n  usage?: ChatUsage | null;\n  loopUsage?: ChatUsage | null;\n  contextWindow?: number;\n  modelLabel?: string;\n};\n\nexport type ChatModelOption = {\n  id: string;\n  label: string;\n  description?: string;\n  image?: string;\n  icon?: string;\n  capabilities?: readonly string[];\n};\n\nexport type ChatComposerState = \"idle\" | \"submitting\" | \"running\" | \"stopping\";\n\nexport type ChatSubmitIntent = \"send\" | \"steer\" | \"queue\";\n\nexport type ChatSubmitInput = {\n  intent: ChatSubmitIntent;\n  text: string;\n  attachments: readonly ChatAttachment[];\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["chat/types.ts"],"sourcesContent":["export type ChatRole = \"user\" | \"assistant\" | \"system\" | \"tool\";\n\nexport type ChatMessageStatus = \"pending\" | \"streaming\" | \"complete\" | \"error\";\n\nexport type ChatActivityTone = \"neutral\" | \"ai\" | \"success\" | \"danger\";\n\ntype ChatActionBase = {\n  id: string;\n  label: string;\n  icon?: string;\n  variant?: \"danger\";\n  disabled?: boolean;\n  /** Toggle state for persistent message actions such as feedback. */\n  pressed?: boolean;\n  /** Semantic foreground for selected feedback actions, without a persistent background. */\n  pressedTone?: \"success\" | \"danger\";\n};\n\n/** Exactly one executable behavior for every chat action. */\nexport type ChatAction = ChatActionBase &\n  ({ onSelect: () => void | Promise<void>; copyText?: never } | { copyText: string; onSelect?: never });\n\nexport type ChatAttachment = {\n  id: string;\n  name: string;\n  size?: number;\n  kind?: \"file\" | \"image\" | \"resource\";\n  icon?: string;\n  previewUrl?: string;\n  alt?: string;\n  /** Optional destination represented by this attachment. */\n  href?: string;\n  /** Opaque application-owned payload returned unchanged with ChatSubmitInput. */\n  data?: unknown;\n  /** Optional application-owned action presented below the attachment label. */\n  action?: ChatAction;\n};\n\nexport type ChatUsage = {\n  input?: number;\n  output?: number;\n  total?: number;\n};\n\nexport type ChatContextUsageData = {\n  usage?: ChatUsage | null;\n  loopUsage?: ChatUsage | null;\n  contextWindow?: number;\n  modelLabel?: string;\n};\n\nexport type ChatModelOption = {\n  id: string;\n  label: string;\n  description?: string;\n  image?: string;\n  icon?: string;\n  capabilities?: readonly string[];\n};\n\nexport type ChatComposerState = \"idle\" | \"submitting\" | \"running\" | \"stopping\";\n\nexport type ChatSubmitIntent = \"send\" | \"steer\" | \"queue\";\n\nexport type ChatSubmitInput = {\n  intent: ChatSubmitIntent;\n  text: string;\n  attachments: readonly ChatAttachment[];\n  mentions?: readonly ChatMention[];\n};\n\n/** Ranges use UTF-16 offsets into the untrimmed composer text. Payloads stay application-owned. */\nexport type ChatMention = { start: number; end: number; attachment: ChatAttachment };\n"],"mappings":"","ignoreList":[]}

package/dist/ssr/content/Chart.js

@@ -1,19 +1,24 @@
 import { createComponent as _$createComponent } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
 import { ssrStyle as _$ssrStyle } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = "<span class=\"k2b-chart__anchor\" aria-hidden=\"true\"></span>",
-  _tmpl$2 = ["<span", " role=\"tooltip\" popover=\"manual\" class=\"k2b-tooltip\"></span>"],
+  _tmpl$2 = ["<span", " role=\"tooltip\" popover=\"manual\" data-instant=\"true\" class=\"k2b-tooltip k2b-chart__tooltip\"></span>"],
   _tmpl$3 = ["<div class=\"k2b-chart__controls\"><button type=\"button\" class=\"k2b-button k2b-icon-button\" data-variant=\"secondary\"", " title=\"", "\"><i class=\"ti ti-plus\" aria-hidden=\"true\"></i></button><button type=\"button\" class=\"k2b-button k2b-icon-button\" data-variant=\"secondary\"", " title=\"", "\"><i class=\"ti ti-minus\" aria-hidden=\"true\"></i></button><button type=\"button\" class=\"k2b-button k2b-icon-button\" data-variant=\"secondary\"", " title=\"", "\"><i class=\"ti ti-focus-centered\" aria-hidden=\"true\"></i></button></div>"],
-  _tmpl$4 = ["<div class=\"", "\"", " style=\"", "\" role=\"group\"", "><div class=\"k2b-chart__svg\">", "</div>", "", "</div>"],
+  _tmpl$4 = ["<div class=\"", "\"", " style=\"", "\" role=\"group\"", "><div class=\"k2b-chart__svg\"", " style=\"", "\">", "</div>", "", "</div>"],
   _tmpl$5 = ["<div class=\"", "\" style=\"", "\">", "</div>"];
 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 { isServer } from "solid-js/web";
+import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
+import { createChartInspection } from "./chart-inspection";
+import { lineGapsSvg } from "./chart-line-gaps";
 import { DEFAULT_MAP_VIEWPORT, normalizeMapViewport, panMapViewport, zoomMapViewport } from "./chart-map-viewport";
 import { panStateTimelineViewport, renderStateTimelineSvg, stateTimelineDomain, stateTimelineHeight, zoomStateTimelineViewport } from "./chart-state-timeline";
+import { responsiveChartSvg, responsiveMapSvg, selectedChartSvg } from "./chart-svg";
 
 /**
  * Chart — minimal Solid wrapper around `stdlib.charts`.
@@ -25,31 +30,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.
  *
@@ -76,45 +70,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
@@ -139,25 +156,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;
@@ -168,7 +183,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];
@@ -188,6 +203,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 {
@@ -195,16 +218,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));
     }
@@ -214,6 +239,7 @@ const Chart = props => {
     }
   };
   const handlePointerDown = event => {
+    inspection.down(event);
     if (!draggable() || event.button !== 0 || event.target.closest("button, a")) {
       return;
     }
@@ -249,10 +275,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));
@@ -262,7 +286,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,
@@ -306,20 +331,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);
@@ -351,171 +364,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);
     });
   });
@@ -530,9 +432,9 @@ const Chart = props => {
       return _$ssr(_tmpl$5, `k2b-chart k2b-chart__empty ${_$escape(props.class ?? "", true)}`, _$ssrStyle(chartStyle()), _$escape(labels().empty ?? messages().noData));
     },
     get children() {
-      return _$ssr(_tmpl$4, `k2b-chart ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-chart-kind", _$escape(props.kind, true), false) + _$ssrAttribute("data-drag", draggable() ? dragging() ? "active" : "idle" : _$escape(undefined, true), false) + _$ssrAttribute("data-crosshair", !draggable() && interactiveLine() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", interactive() ? "true" : _$escape(undefined, true), false), _$ssrStyle(chartStyle()), _$ssrAttribute("aria-describedby", interactiveLine() && lineInspectionActive() ? _$escape(chartTooltipId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", interactiveMap() ? _$escape(labels().interactiveMap ?? messages().interactiveMap, true) : interactiveTimeline() ? _$escape(labels().interactiveTimeline ?? messages().interactiveTimeline, true) : interactiveLine() ? _$escape(labels().interactiveLine ?? messages().interactiveLineChart, true) : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", interactive() ? 0 : _$escape(undefined, true), false), renderSvg(props, size().width, size().height, interactiveMap() ? mapViewport() : undefined, interactiveTimeline() ? timelineViewport() : undefined), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$4, `k2b-chart ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-chart-kind", _$escape(props.kind, true), false) + _$ssrAttribute("data-drag", draggable() ? dragging() ? "active" : "idle" : _$escape(undefined, true), false) + _$ssrAttribute("data-crosshair", !draggable() && interactiveLine() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", interactive() ? "true" : _$escape(undefined, true), false), _$ssrStyle(chartStyle()), _$ssrAttribute("aria-label", interactiveMap() ? _$escape(labels().interactiveMap ?? messages().interactiveMap, true) : interactiveTimeline() ? _$escape(labels().interactiveTimeline ?? messages().interactiveTimeline, true) : interactiveLine() ? _$escape(labels().interactiveLine ?? messages().interactiveLineChart, true) : interactive() ? _$escape(labels().interactiveChart ?? messages().interactiveChart, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-description", interactive() ? _$escape(messages().interactiveChart, true) : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", interactive() ? 0 : _$escape(undefined, true), false), _$ssrAttribute("data-stretch", !preservesAspectRatio(props.kind) ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-chart-width:", `${_$escape(size().width, true)}px`) + _$ssrStyleProperty(";--k2b-chart-height:", `${_$escape(size().height, true)}px`) + _$ssrStyleProperty(";aspect-ratio:", `${_$escape(size().width, true)} / ${_$escape(size().height, true)}`), isServer ? selectedChartSvg(svgMarkup(), props.selected) : svgMarkup(), _$escape(_$createComponent(Show, {
         get when() {
-          return interactiveTimeline() || interactiveLine();
+          return interactive();
         },
         get children() {
           return [_$ssr(_tmpl$), _$ssr(_tmpl$2, _$ssrAttribute("id", _$escape(chartTooltipId, true), false))];