@k2b/ui 0.27.0 → 0.28.0

package/dist/ssr/content/ReactionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["content/ReactionBar.tsx"],"sourcesContent":["import { type Accessor, createEffect, createMemo, createSignal, For, type JSX, on, onCleanup, onMount, Show } from \"solid-js\";\nimport { IconButton } from \"../actions/Button\";\nimport { useChatMessages } from \"../chat/chat-messages\";\nimport { positionTooltipSurface } from \"../feedback/tooltip-position\";\nimport { ScrollArea } from \"../layout/ScrollArea\";\n\nexport type ReactionBarItem = {\n  /** Stable identity of the reaction, passed to `onToggle`. */\n  key: string;\n  emoji: string;\n  count: number;\n  /** The reader reacted this way; the chip shows pressed. */\n  own?: boolean;\n  /** Who reacted, for example from `reactionPeople`. Read by screen readers and shown in the names hint. */\n  label?: string;\n  /** A change of the reader's own reaction is still being saved; the chip carries `aria-busy`. */\n  busy?: boolean;\n};\nexport type ReactionBarProps = {\n  reactions: readonly ReactionBarItem[];\n  /** Called with a reaction's key when the reader presses its chip. Without it, the chips are not controls. */\n  onToggle?: (key: string) => void;\n  /** Called by \"Add reaction\" with the button to anchor a picker to, such as `EmojiPicker.Popover`. Without it there is no button. */\n  onAdd?: (anchor: HTMLElement) => void;\n  /** \"default\": 26 px chips (chat, item detail). \"compact\": 24 px chips (cards). */\n  density?: \"default\" | \"compact\";\n  /** \"scroll\" (default): one line of fixed height that scrolls sideways. \"wrap\": every chip shows, lines wrap. */\n  overflow?: \"scroll\" | \"wrap\";\n  /** Shows at most this many chips and then \"+n\", n being the number of further emoji. The shown chips do not scroll. */\n  max?: number;\n  /** Screen-reader text of \"+n\"; defaults to \"{n} more reactions\". */\n  moreLabel?: (count: number) => string;\n  /** \"always\" (default) or \"progressive\": shown on hover and focus with a mouse or trackpad (k2b-progressive-action, inside the caller's k2b-progressive-row), kept while its picker is open, hidden on touch. Its place stays reserved. */\n  add?: \"always\" | \"progressive\";\n  class?: string;\n};\n\nconst HOVER_MS = 250;\nconst HOLD_MS = 500;\nconst MOVE_TOLERANCE = 8;\n\nexport function ReactionBar(props: ReactionBarProps): JSX.Element {\n  const chatMessages = useChatMessages();\n  // A max uses the wrapping layout, so the shown chips, +n, and add button wrap together.\n  const overflow = () => (props.max !== undefined ? \"wrap\" : (props.overflow ?? \"scroll\"));\n  const shown = createMemo(() => (props.max === undefined ? props.reactions : props.reactions.slice(0, props.max)));\n  const keys = createMemo(() => shown().map((reaction) => reaction.key));\n  const byKey = createMemo(() => new Map(shown().map((reaction) => [reaction.key, reaction])));\n  const more = () => props.reactions.length - shown().length;\n  /** The reaction whose names the hint shows; it follows that reaction while the caller updates it. */\n  const [hintKey, setHintKey] = createSignal<string>();\n  const hinted = () => {\n    const key = hintKey();\n    const reaction = key === undefined ? undefined : byKey().get(key);\n    return reaction?.label?.trim() ? reaction : undefined;\n  };\n  const hint = () => {\n    const reaction = hinted();\n    return reaction ? `${reaction.emoji} ${reaction.label}` : \"\";\n  };\n  const [touch, setTouch] = createSignal(false);\n  let root: HTMLDivElement | undefined;\n  let surface: HTMLSpanElement | undefined;\n\n  onMount(() => {\n    if (!root || !surface) return;\n    const bar = root;\n    const tooltip = surface;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let openChip: HTMLElement | undefined;\n    let swallowClick = false;\n    let press: { chip: HTMLElement; id: number; x: number; y: number; held: boolean; moved: boolean } | undefined;\n\n    const chipOf = (target: EventTarget | null): HTMLElement | undefined => {\n      const chip = target instanceof Element ? target.closest<HTMLElement>(\"[data-reaction-key]\") : null;\n      return chip && chip.closest(\".k2b-reaction-bar\") === bar ? chip : undefined;\n    };\n    const clearTimer = () => {\n      clearTimeout(timer);\n      timer = undefined;\n    };\n    const close = () => {\n      clearTimer();\n      openChip = undefined;\n      try {\n        tooltip.hidePopover();\n      } catch {\n        /* The surface may already be disconnected. */\n      }\n      document.removeEventListener(\"pointerdown\", dismiss, true);\n      document.removeEventListener(\"keydown\", escape);\n      window.removeEventListener(\"scroll\", close, true);\n      window.removeEventListener(\"resize\", close);\n    };\n    const dismiss = () => close();\n    const escape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") close();\n    };\n    /** Opens the names hint over a chip; false when the chip has no names to show. */\n    const open = (chip: HTMLElement, fromTouch: boolean): boolean => {\n      clearTimer();\n      const reaction = byKey().get(chip.dataset.reactionKey ?? \"\");\n      if (!reaction?.label?.trim() || !chip.isConnected) return false;\n      setHintKey(reaction.key);\n      setTouch(fromTouch);\n      if (!tooltip.matches(\":popover-open\")) {\n        try {\n          tooltip.showPopover();\n        } catch {\n          return false;\n        }\n      }\n      openChip = chip;\n      positionTooltipSurface(tooltip, chip, \"top\");\n      document.addEventListener(\"pointerdown\", dismiss, true);\n      document.addEventListener(\"keydown\", escape);\n      window.addEventListener(\"scroll\", close, true);\n      window.addEventListener(\"resize\", close);\n      return true;\n    };\n    // An open hint follows its reaction: new names show at once, and it closes when the reaction, its names, or its\n    // chip go away.\n    createEffect(\n      on(hinted, (reaction) => {\n        if (!openChip) return;\n        if (!reaction || !openChip.isConnected) close();\n        else positionTooltipSurface(tooltip, openChip, \"top\");\n      }),\n    );\n    const delayed = (chip: HTMLElement) => {\n      if (touch() && openChip) return;\n      if (\n        !byKey()\n          .get(chip.dataset.reactionKey ?? \"\")\n          ?.label?.trim()\n      ) {\n        close();\n        return;\n      }\n      clearTimer();\n      if (openChip) open(chip, false);\n      else timer = setTimeout(() => open(chip, false), HOVER_MS);\n    };\n    const enter = (event: PointerEvent) => {\n      const chip = chipOf(event.target);\n      if (chip && event.target === chip && event.pointerType !== \"touch\") delayed(chip);\n    };\n    const leave = (event: PointerEvent) => {\n      if (event.target !== chipOf(event.target) || (touch() && openChip)) return;\n      // Moving directly to another chip keeps an open hint available for its immediate update.\n      const next = chipOf(event.relatedTarget);\n      if (\n        !next ||\n        !byKey()\n          .get(next.dataset.reactionKey ?? \"\")\n          ?.label?.trim()\n      )\n        close();\n    };\n    const focusIn = (event: FocusEvent) => {\n      const chip = chipOf(event.target);\n      if (chip?.matches(\":focus-visible\")) delayed(chip);\n    };\n    const focusOut = (event: FocusEvent) => {\n      if (chipOf(event.target) && !chipOf(event.relatedTarget) && !(touch() && openChip)) close();\n    };\n    const resetSwallow = () => {\n      swallowClick = false;\n      document.removeEventListener(\"pointerdown\", resetSwallow, true);\n    };\n    const endPress = () => {\n      clearTimer();\n      press = undefined;\n      document.removeEventListener(\"pointermove\", move, true);\n      document.removeEventListener(\"pointerup\", up, true);\n      document.removeEventListener(\"pointercancel\", cancel, true);\n    };\n    const down = (event: PointerEvent) => {\n      resetSwallow();\n      close();\n      endPress();\n      const chip = chipOf(event.target);\n      if (!chip || (event.pointerType !== \"touch\" && event.pointerType !== \"pen\")) return;\n      press = { chip, id: event.pointerId, x: event.clientX, y: event.clientY, held: false, moved: false };\n      timer = setTimeout(() => {\n        timer = undefined;\n        if (!press || press.moved) return;\n        // Only a hold that shows names takes the press; on a chip without names it stays an ordinary press.\n        press.held = open(press.chip, true);\n      }, HOLD_MS);\n      document.addEventListener(\"pointermove\", move, true);\n      document.addEventListener(\"pointerup\", up, true);\n      document.addEventListener(\"pointercancel\", cancel, true);\n    };\n    const move = (event: PointerEvent) => {\n      if (!press || event.pointerId !== press.id) return;\n      if (Math.hypot(event.clientX - press.x, event.clientY - press.y) > MOVE_TOLERANCE) {\n        press.moved = true;\n        clearTimer();\n      }\n    };\n    const up = (event: PointerEvent) => {\n      if (!press || event.pointerId !== press.id) return;\n      if (press.held) {\n        swallowClick = true;\n        // Some browsers send no click after a hold. Never consume the next real tap.\n        document.addEventListener(\"pointerdown\", resetSwallow, true);\n      } else if (!press.moved && !props.onToggle) open(press.chip, true);\n      endPress();\n    };\n    const cancel = (event: PointerEvent) => {\n      if (event.pointerId === press?.id) endPress();\n    };\n    const touchEnd = (event: TouchEvent) => {\n      if (!swallowClick || !event.cancelable) return;\n      // A cancelled touchend sends no click, so nothing is left to swallow.\n      event.preventDefault();\n      resetSwallow();\n    };\n    // Only the click of the held finger or pen is swallowed; a keyboard's click has no detail and always goes through.\n    const click = (event: MouseEvent) => {\n      if (!swallowClick || event.detail === 0) return;\n      event.preventDefault();\n      event.stopPropagation();\n      resetSwallow();\n    };\n    const contextMenu = (event: MouseEvent) => {\n      if (chipOf(event.target) && (press || swallowClick || (touch() && openChip))) event.preventDefault();\n    };\n\n    bar.addEventListener(\"pointerenter\", enter, true);\n    bar.addEventListener(\"pointerleave\", leave, true);\n    bar.addEventListener(\"focusin\", focusIn);\n    bar.addEventListener(\"focusout\", focusOut);\n    bar.addEventListener(\"pointerdown\", down);\n    bar.addEventListener(\"touchend\", touchEnd, { passive: false });\n    bar.addEventListener(\"click\", click, true);\n    bar.addEventListener(\"contextmenu\", contextMenu);\n    onCleanup(() => {\n      close();\n      endPress();\n      resetSwallow();\n      bar.removeEventListener(\"pointerenter\", enter, true);\n      bar.removeEventListener(\"pointerleave\", leave, true);\n      bar.removeEventListener(\"focusin\", focusIn);\n      bar.removeEventListener(\"focusout\", focusOut);\n      bar.removeEventListener(\"pointerdown\", down);\n      bar.removeEventListener(\"touchend\", touchEnd);\n      bar.removeEventListener(\"click\", click, true);\n      bar.removeEventListener(\"contextmenu\", contextMenu);\n    });\n  });\n\n  const chip = (key: string, reaction: Accessor<ReactionBarItem>) => {\n    const label = (own: boolean) =>\n      chatMessages().messageReaction({ emoji: reaction().emoji, count: reaction().count, names: reaction().label, own });\n    return (\n      <Show\n        when={props.onToggle}\n        fallback={\n          <span\n            class=\"k2b-reaction-bar__chip\"\n            role=\"img\"\n            aria-label={label(Boolean(reaction().own))}\n            aria-busy={reaction().busy ? \"true\" : undefined}\n            data-own={reaction().own ? \"\" : undefined}\n            data-reaction-key={key}\n            data-gesture-ignore\n          >\n            <span aria-hidden=\"true\">{reaction().emoji}</span>\n            <span aria-hidden=\"true\">{reaction().count}</span>\n          </span>\n        }\n      >\n        {(toggle) => (\n          <button\n            type=\"button\"\n            class=\"k2b-reaction-bar__chip\"\n            aria-pressed={reaction().own ? \"true\" : \"false\"}\n            aria-label={label(false)}\n            aria-busy={reaction().busy ? \"true\" : undefined}\n            data-own={reaction().own ? \"\" : undefined}\n            data-reaction-key={key}\n            onClick={() => toggle()(key)}\n          >\n            <span aria-hidden=\"true\">{reaction().emoji}</span>\n            <span aria-hidden=\"true\">{reaction().count}</span>\n          </button>\n        )}\n      </Show>\n    );\n  };\n  const chips = () => <For each={keys()}>{(key) => <Show when={byKey().get(key)}>{(reaction) => chip(key, reaction)}</Show>}</For>;\n\n  return (\n    <div\n      ref={root}\n      class={props.class ? `k2b-reaction-bar ${props.class}` : \"k2b-reaction-bar\"}\n      role=\"group\"\n      aria-label={chatMessages().messageReactions}\n      data-density={props.density ?? \"default\"}\n      data-overflow={overflow()}\n      data-add={props.onAdd ? (props.add ?? \"always\") : undefined}\n      data-empty={props.reactions.length === 0 ? \"\" : undefined}\n    >\n      <Show when={overflow() === \"scroll\"} fallback={<div class=\"k2b-reaction-bar__list\">{chips()}</div>}>\n        <Show when={shown().length > 0}>\n          <ScrollArea orientation=\"horizontal\" class=\"k2b-reaction-bar__scroll\" tabindex={props.onToggle ? undefined : 0}>\n            {chips()}\n          </ScrollArea>\n        </Show>\n      </Show>\n      <Show when={more() > 0}>\n        <span class=\"k2b-reaction-bar__more\">\n          <span aria-hidden=\"true\">+{more()}</span>\n          <span class=\"k2b-sr-only\">{props.moreLabel?.(more()) ?? chatMessages().moreReactions({ count: more() })}</span>\n        </span>\n      </Show>\n      <Show when={props.onAdd}>\n        {(add) => (\n          <span class={`k2b-reaction-bar__add${props.add === \"progressive\" ? \" k2b-progressive-action\" : \"\"}`}>\n            <IconButton\n              label={chatMessages().messageAddReaction}\n              size=\"xs\"\n              class=\"k2b-reaction-bar__add-button\"\n              onClick={(event) => add()(event.currentTarget)}\n            >\n              <i class=\"ti ti-mood-plus\" aria-hidden=\"true\" />\n            </IconButton>\n          </span>\n        )}\n      </Show>\n      <span\n        ref={surface}\n        class=\"k2b-tooltip k2b-reaction-bar__hint\"\n        popover=\"manual\"\n        role=\"tooltip\"\n        aria-hidden=\"true\"\n        data-touch={touch() ? \"\" : undefined}\n      >\n        {hint()}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/content/chart-inspection-core.js

@@ -0,0 +1,557 @@
+import { positionTooltipSurface } from "../feedback/tooltip-position";
+export const sameChartDatum = (a, b) => a.role === b.role && a.index === b.index && a.seriesIndex === b.seriesIndex;
+const object = value => typeof value === "object" && value !== null;
+const pair = value => Array.isArray(value) && value.length === 2 && value.every(n => typeof n === "number" && Number.isFinite(n));
+const roles = new Set(["point", "item", "bin", "box", "outlier", "value", "cell", "interval"]);
+export function isChartDatum(value) {
+  return object(value) && Number.isInteger(value.index) && typeof value.index === "number" && value.index >= 0 && (value.seriesIndex === undefined || typeof value.seriesIndex === "number" && Number.isInteger(value.seriesIndex) && value.seriesIndex >= 0) && typeof value.role === "string" && roles.has(value.role) && pair(value.anchor) && (value.grid === undefined || pair(value.grid)) && (value.label === undefined || typeof value.label === "string") && Array.isArray(value.values) && value.values.every(field => object(field) && typeof field.key === "string" && (typeof field.value === "string" || typeof field.value === "number" && Number.isFinite(field.value)) && (field.formatted === undefined || typeof field.formatted === "string"));
+}
+
+/** Adds or removes only the tooltip id, keeping descriptions the host put on the container. */
+const describe = (container, id, on) => {
+  const ids = (container.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(token => token && token !== id);
+  if (on) ids.push(id);
+  if (ids.length) container.setAttribute("aria-describedby", ids.join(" "));else container.removeAttribute("aria-describedby");
+};
+
+/** Enhances existing SVG nodes. Pointer/focus changes never rebuild the chart. */
+export function createChartInspector(options) {
+  const source = Symbol("chart cursor");
+  let entries;
+  let sortedPoints = [];
+  const byElement = new Map();
+  let active;
+  let highlighted = [];
+  let pinned = false;
+  let pointerStart;
+  let moved = false;
+  let pending;
+  let frame;
+  // The cursor this chart is subscribed to. Closing reads it instead of the cursor prop: a chart also closes
+  // while it unmounts, when a parent `<Show>` may already have dropped the value the prop came from.
+  let linkedCursor;
+  const records = () => {
+    if (!entries || entries.length > 0 && !entries[0].element.isConnected) {
+      entries = [];
+      byElement.clear();
+      sortedPoints = [];
+      for (const element of Array.from(options.container()?.querySelectorAll("[data-chart-datum]") ?? [])) {
+        try {
+          const value = JSON.parse(element.getAttribute("data-chart-datum") ?? "null");
+          if (isChartDatum(value)) {
+            const entry = {
+              element,
+              datum: value
+            };
+            entries.push(entry);
+            byElement.set(element, entry);
+          }
+        } catch {
+          /* Only valid renderer metadata participates in inspection. */
+        }
+      }
+      sortedPoints = entries.filter(entry => entry.datum.role === "point").sort((a, b) => a.datum.anchor[0] - b.datum.anchor[0]);
+    }
+    return entries;
+  };
+  const highlightColor = item => {
+    // Read the actual paint before applying inspection styles, including
+    // custom series and threshold colors. Invisible points use their line.
+    const point = item.element.querySelector(".stdlib-chart-inspection-point");
+    const source = point ? options.container()?.querySelector(options.kind() === "line" ? `.stdlib-chart-line.stdlib-chart-series-${(item.datum.seriesIndex ?? 0) % 8}` : ".stdlib-chart-sparkline, .stdlib-chart-stat-sparkline") : item.element.querySelector(".stdlib-chart-bar-gauge-fill, .stdlib-chart-gauge-fill, .stdlib-chart-stat-value") ?? item.element.querySelector("rect, path, circle");
+    const paint = source ? source.ownerDocument.defaultView?.getComputedStyle(source) : undefined;
+    const color = (point || item.element.hasAttribute("data-chart-reference") ? paint?.stroke : paint?.fill) || `var(--stdlib-chart-c${(item.datum.seriesIndex ?? 0) % 8 + 1})`;
+    return `color-mix(in srgb, ${color} 72%, var(--k2b-chart-highlight-mix))`;
+  };
+  const selectData = selected => {
+    for (const entry of records()) {
+      const matches = selected.some(datum => sameChartDatum(datum, entry.datum));
+      if (matches) entry.element.style.setProperty("--k2b-chart-selection-color", highlightColor(entry));else entry.element.style.removeProperty("--k2b-chart-selection-color");
+      entry.element.toggleAttribute("data-selected", matches);
+    }
+  };
+  const screenPoint = entry => {
+    const matrix = entry.element.getScreenCTM?.();
+    const [x, y] = entry.datum.anchor;
+    if (matrix) return {
+      x: matrix.a * x + matrix.c * y + matrix.e,
+      y: matrix.b * x + matrix.d * y + matrix.f
+    };
+    const rect = entry.element.getBoundingClientRect();
+    return {
+      x: rect.x + rect.width / 2,
+      y: rect.y + rect.height / 2
+    };
+  };
+  const visibleRecords = () => {
+    const nodes = records();
+    if (options.kind() !== "map") return nodes;
+    const viewport = options.container()?.querySelector(".stdlib-chart-map-viewport");
+    if (!viewport?.getScreenCTM?.()) return nodes;
+    const root = viewport.ownerSVGElement?.getBoundingClientRect();
+    if (!root?.width || !root.height) return nodes;
+    const width = viewport?.width?.baseVal.value;
+    const height = viewport?.height?.baseVal.value;
+    if (!width || !height) return nodes;
+    const left = root.left + viewport.x.baseVal.value;
+    const top = root.top + viewport.y.baseVal.value;
+    const clip = {
+      left,
+      top,
+      right: left + width,
+      bottom: top + height
+    };
+    return nodes.filter(entry => {
+      const point = screenPoint(entry);
+      return point.x >= clip.left && point.x <= clip.right && point.y >= clip.top && point.y <= clip.bottom;
+    });
+  };
+  const rawX = entry => entry.datum.values.find(field => field.key === "x")?.value;
+  const seriesChart = () => options.kind() === "line" || options.kind() === "sparkline";
+  const clearHighlight = () => {
+    for (const entry of highlighted) {
+      entry.element.removeAttribute("data-inspected");
+      entry.element.style.removeProperty("--k2b-chart-inspection-color");
+      if (!entry.element.getAttribute("style")) entry.element.removeAttribute("style");
+    }
+    highlighted = [];
+  };
+  const close = (broadcast = true, cancelPending = true) => {
+    const state = linkedCursor?.read();
+    if (broadcast && state && state.source !== source) return;
+    if (broadcast) linkedCursor?.clear(source);
+    options.container()?.removeAttribute("data-cursor-source");
+    pinned = false;
+    active = undefined;
+    clearHighlight();
+    const container = options.container(),
+      id = options.tooltip()?.id;
+    if (container && id) describe(container, id, false);
+    options.container()?.removeAttribute("data-inspecting");
+    const tooltip = options.tooltip();
+    if (tooltip) {
+      try {
+        if (tooltip.matches(":popover-open")) tooltip.hidePopover();
+      } catch {
+        /* Detached during navigation. */
+      }
+    }
+    if (cancelPending) {
+      if (frame !== undefined) cancelAnimationFrame(frame);
+      frame = undefined;
+      pending = undefined;
+    }
+  };
+  const invalidate = () => {
+    options.cursor?.()?.clear(source);
+    close(false);
+    entries = undefined;
+    sortedPoints = [];
+    byElement.clear();
+    receive(options.cursor?.()?.read() ?? null);
+  };
+  const show = (entry, broadcast = true) => {
+    const x = rawX(entry);
+    if (broadcast && options.kind() === "line" && typeof x === "number") options.cursor?.()?.move(source, x);
+    const tooltip = options.tooltip(),
+      anchor = options.anchor(),
+      container = options.container();
+    if (!tooltip || !anchor || !container || !options.enabled()) return;
+    if (active === entry && tooltip.matches(":popover-open")) return;
+    clearHighlight();
+    active = entry;
+    highlighted = options.kind() === "line" ? records().filter(candidate => rawX(candidate) === rawX(entry)) : [entry];
+    for (const item of highlighted) {
+      item.element.style.setProperty("--k2b-chart-inspection-color", highlightColor(item));
+      item.element.setAttribute("data-inspected", "true");
+    }
+    const document = tooltip.ownerDocument;
+    const contents = highlighted.map(item => ({
+      item,
+      content: options.format({
+        kind: options.kind(),
+        datum: item.datum
+      }),
+      missing: false
+    }));
+    if (options.cursor?.() && options.kind() === "line") {
+      const present = new Set(highlighted.map(item => item.datum.seriesIndex));
+      for (const item of records()) {
+        if (present.has(item.datum.seriesIndex)) continue;
+        present.add(item.datum.seriesIndex);
+        contents.push({
+          item,
+          content: options.format({
+            kind: options.kind(),
+            datum: item.datum
+          }),
+          missing: true
+        });
+      }
+      contents.sort((a, b) => (a.item.datum.seriesIndex ?? 0) - (b.item.datum.seriesIndex ?? 0));
+    }
+    tooltip.replaceChildren();
+    const sharedTitle = typeof x === "number" ? options.cursor?.()?.formatX?.(x) : undefined;
+    const commonTitle = sharedTitle ?? (contents.every(({
+      content
+    }) => content.title === contents[0]?.content.title) ? contents[0]?.content.title : undefined);
+    if (commonTitle) {
+      const title = document.createElement("strong");
+      title.className = "k2b-chart__tooltip-title";
+      title.textContent = commonTitle;
+      tooltip.append(title);
+    }
+    for (const {
+      item,
+      content,
+      missing
+    } of contents) {
+      if (content.title && !commonTitle) {
+        const title = document.createElement("strong");
+        title.className = "k2b-chart__tooltip-title";
+        title.textContent = content.title;
+        tooltip.append(title);
+      }
+      for (const row of content.rows) {
+        const line = document.createElement("span");
+        line.className = "k2b-chart__tooltip-row";
+        if (options.kind() === "line") {
+          const swatch = document.createElement("i");
+          swatch.setAttribute("aria-hidden", "true");
+          const series = container.querySelector(`.stdlib-chart-line.stdlib-chart-series-${(item.datum.seriesIndex ?? 0) % 8}`);
+          swatch.style.background = series ? getComputedStyle(series).stroke : `var(--stdlib-chart-c${(item.datum.seriesIndex ?? 0) % 8 + 1})`;
+          line.append(swatch);
+        }
+        const label = document.createElement("span");
+        label.textContent = `${row.label}: `;
+        const value = document.createElement("b");
+        value.textContent = missing ? "—" : row.value;
+        line.append(label, value);
+        tooltip.append(line);
+      }
+    }
+    const rect = container.getBoundingClientRect(),
+      point = screenPoint(entry);
+    anchor.style.left = `${point.x - rect.left}px`;
+    anchor.style.top = `${point.y - rect.top}px`;
+    updatePlotBounds();
+    container.style.setProperty("--k2b-chart-inspection-x", `${point.x - rect.left}px`);
+    container.setAttribute("data-inspecting", seriesChart() ? "series" : "datum");
+    describe(container, tooltip.id, true);
+    try {
+      if (!tooltip.matches(":popover-open")) tooltip.showPopover();
+      positionTooltipSurface(tooltip, anchor);
+    } catch {
+      /* SVG titles remain available without the Popover API. */
+    }
+  };
+  const updatePlotBounds = () => {
+    const container = options.container();
+    if (!container) return;
+    const axes = Array.from(container.querySelectorAll(".stdlib-chart-axis")).map(axis => axis.getBoundingClientRect());
+    if (axes.length < 2) return;
+    const left = Math.min(...axes.map(a => a.left)),
+      right = Math.max(...axes.map(a => a.right));
+    const top = Math.min(...axes.map(a => a.top)),
+      bottom = Math.max(...axes.map(a => a.bottom));
+    if (right <= left || bottom <= top) return;
+    const rect = container.getBoundingClientRect();
+    for (const [name, value] of Object.entries({
+      left: left - rect.left,
+      right: rect.right - right,
+      top: top - rect.top,
+      bottom: rect.bottom - bottom
+    })) container.style.setProperty(`--k2b-chart-plot-${name}`, `${value}px`);
+    return {
+      left,
+      right,
+      top,
+      bottom
+    };
+  };
+  const receive = state => {
+    if (state?.source === source) return;
+    close(false, false);
+    if (!state || options.kind() !== "line") return;
+    const entry = records().find(item => rawX(item) === state.x);
+    if (entry) show(entry, false);
+  };
+  const linkCursor = cursor => {
+    linkedCursor = cursor;
+    const unsubscribe = cursor?.subscribe(receive);
+    return () => {
+      unsubscribe?.();
+      cursor?.clear(source);
+      linkedCursor = undefined;
+    };
+  };
+  const nearest = (x, y, target) => {
+    if (target?.closest("button,a") && !target.closest("[data-chart-datum]")) return;
+    const nodes = visibleRecords();
+    // A mark wins before the plot bounds: the first and last points of a line sit on the plot's edges, so half of
+    // their hit area lies outside it.
+    const direct = target?.closest("[data-chart-datum]");
+    const hit = direct ? byElement.get(direct) : undefined;
+    if (hit && nodes.includes(hit)) return hit;
+    if (seriesChart()) {
+      const plot = updatePlotBounds();
+      if (plot && (x < plot.left || x > plot.right || y < plot.top || y > plot.bottom)) return;
+    }
+    // Exact shapes win. A small physical hit radius also reaches tiny or
+    // zero-sized marks; distant whitespace leaves the chart unselected.
+    const points = seriesChart() ? sortedPoints : nodes;
+    if (seriesChart() && points.length) {
+      const matrix = points[0].element.getScreenCTM?.();
+      if (matrix) {
+        const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
+        if (!determinant) return;
+        const targetX = ((x - matrix.e) * matrix.d - (y - matrix.f) * matrix.c) / determinant;
+        let low = 0,
+          high = points.length - 1;
+        while (low < high) {
+          const mid = Math.floor((low + high) / 2);
+          if (points[mid].datum.anchor[0] < targetX) low = mid + 1;else high = mid;
+        }
+        const previous = Math.max(0, low - 1);
+        return Math.abs(points[previous].datum.anchor[0] - targetX) <= Math.abs(points[low].datum.anchor[0] - targetX) ? points[previous] : points[low];
+      }
+    }
+    const matrices = new Map();
+    let best,
+      distance = Infinity;
+    for (const entry of points) {
+      const svg = entry.element.ownerSVGElement;
+      if (svg && !matrices.has(svg)) matrices.set(svg, svg.getScreenCTM?.() ?? null);
+      const matrix = svg ? matrices.get(svg) : null;
+      const [ax, ay] = entry.datum.anchor;
+      const point = matrix ? {
+        x: matrix.a * ax + matrix.c * ay + matrix.e,
+        y: matrix.b * ax + matrix.d * ay + matrix.f
+      } : screenPoint(entry);
+      const dx = point.x - x,
+        dy = point.y - y;
+      const next = seriesChart() ? Math.abs(dx) : Math.hypot(dx, dy);
+      if (next < distance) {
+        distance = next;
+        best = entry;
+      }
+    }
+    return seriesChart() || distance <= 24 ? best : undefined;
+  };
+  const move = event => {
+    if (event.target instanceof Node && options.tooltip()?.contains(event.target)) return;
+    if (pointerStart && Math.hypot(event.clientX - pointerStart.x, event.clientY - pointerStart.y) > 6) moved = true;
+    if (!options.enabled() || pinned || event.pointerType === "touch" || event.buttons) return;
+    pending = {
+      x: event.clientX,
+      y: event.clientY,
+      target: event.target instanceof Element ? event.target : null
+    };
+    if (frame !== undefined) return;
+    frame = requestAnimationFrame(() => {
+      frame = undefined;
+      const sample = pending;
+      pending = undefined;
+      if (!sample) return;
+      const entry = nearest(sample.x, sample.y, sample.target);
+      if (entry) {
+        show(entry);
+        if (seriesChart()) {
+          const container = options.container();
+          container?.setAttribute("data-cursor-source", "true");
+          container?.style.setProperty("--k2b-chart-inspection-y", `${sample.y - container.getBoundingClientRect().top}px`);
+        }
+      } else close();
+    });
+  };
+  const down = event => {
+    pointerStart = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    moved = false;
+  };
+  const click = event => {
+    if (!options.enabled() || moved || event.target instanceof Element && event.target.closest("button,a")) return;
+    const entry = nearest(event.clientX, event.clientY, event.target instanceof Element ? event.target : null);
+    if (!entry) {
+      close();
+      return;
+    }
+    pinned = true;
+    show(entry);
+    options.select({
+      kind: options.kind(),
+      datum: entry.datum
+    });
+  };
+  const focus = event => {
+    if (event.target !== options.container() || !options.enabled()) return;
+    const nodes = visibleRecords();
+    const first = options.kind() === "line" ? sortedPoints.at(-1) : nodes[0];
+    if (first) show(first);
+  };
+  const key = event => {
+    if (!options.enabled() || event.target !== options.container()) return false;
+    if (event.key === "Escape") {
+      close();
+      return true;
+    }
+    if (event.key === "Enter" && active) {
+      if (options.kind() === "map" && !visibleRecords().includes(active)) {
+        close();
+        return true;
+      }
+      event.preventDefault();
+      pinned = true;
+      const link = active.element.closest("a");
+      if (link) link.dispatchEvent(new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      }));else options.select({
+        kind: options.kind(),
+        datum: active.datum
+      });
+      return true;
+    }
+    const navigationChart = options.kind() === "map" || options.kind() === "stateTimeline";
+    if (navigationChart && !event.altKey) return false;
+    if (!["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return false;
+    let nodes = visibleRecords();
+    if (seriesChart()) nodes = [...nodes].sort((a, b) => a.datum.anchor[0] - b.datum.anchor[0]);
+    if (options.kind() === "line") {
+      const seen = new Set();
+      nodes = nodes.filter(entry => {
+        const x = rawX(entry);
+        if (seen.has(x)) return false;
+        seen.add(x);
+        return true;
+      });
+    }
+    if (!nodes.length) return false;
+    event.preventDefault();
+    pinned = false;
+    let index = active ? options.kind() === "line" ? nodes.findIndex(entry => rawX(entry) === rawX(active)) : nodes.indexOf(active) : -1;
+    if (event.key === "Home") index = 0;else if (event.key === "End") index = nodes.length - 1;else if (active?.datum.grid && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+      const [x, y] = active.datum.grid;
+      const dx = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0;
+      const dy = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+      const next = nodes.filter(entry => entry.datum.grid && (dx ? entry.datum.grid[1] === y && (entry.datum.grid[0] - x) * dx > 0 : entry.datum.grid[0] === x && (entry.datum.grid[1] - y) * dy > 0)).sort((a, b) => Math.abs(a.datum.grid[0] - x) + Math.abs(a.datum.grid[1] - y) - Math.abs(b.datum.grid[0] - x) - Math.abs(b.datum.grid[1] - y))[0];
+      if (next) index = nodes.indexOf(next);
+    } else index += event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
+    show(nodes[Math.max(0, Math.min(nodes.length - 1, index))]);
+    return true;
+  };
+  return {
+    selectDatum: selected => selectData(selected ? [selected] : []),
+    selectData,
+    linkCursor,
+    destroy: () => close(false),
+    move,
+    down,
+    click,
+    focus,
+    key,
+    close: () => close(),
+    invalidate,
+    leave: () => {
+      if (!pinned) close();
+    }
+  };
+}
+
+/** Dismiss inspection on outside interaction, but allow the tooltip itself to scroll. */
+export function closeChartInspectionOnOutside(options) {
+  const outside = event => {
+    if (event.target instanceof Node && !options.container()?.contains(event.target)) options.close();
+  };
+  const scroll = event => {
+    if (event.target instanceof Node && options.tooltip()?.contains(event.target)) return;
+    options.close();
+  };
+  window.addEventListener("pointerdown", outside);
+  window.addEventListener("scroll", scroll, true);
+  window.addEventListener("resize", options.close);
+  return () => {
+    window.removeEventListener("pointerdown", outside);
+    window.removeEventListener("scroll", scroll, true);
+    window.removeEventListener("resize", options.close);
+  };
+}
+let tooltipId = 0;
+
+/** Attach inspection to stdlib SVG rendered with inspect: true, without a framework. */
+export function inspectChart(container, options) {
+  const document = container.ownerDocument;
+  const anchor = document.createElement("span");
+  anchor.className = "k2b-chart__anchor";
+  anchor.setAttribute("aria-hidden", "true");
+  const tooltip = document.createElement("span");
+  tooltip.className = "k2b-tooltip k2b-chart__tooltip";
+  tooltip.setAttribute("role", "tooltip");
+  tooltip.setAttribute("popover", "manual");
+  tooltip.setAttribute("data-instant", "true");
+  do {
+    tooltip.id = `k2b-chart-tooltip-${++tooltipId}`;
+  } while (document.getElementById(tooltip.id));
+  container.append(anchor, tooltip);
+  const addedTabindex = !container.hasAttribute("tabindex");
+  if (addedTabindex) container.setAttribute("tabindex", "0");
+  const inspector = createChartInspector({
+    container: () => container,
+    cursor: () => options.cursor,
+    tooltip: () => tooltip,
+    anchor: () => anchor,
+    kind: () => options.kind,
+    enabled: () => true,
+    format: options.format,
+    select: selection => options.select?.(selection)
+  });
+  container.addEventListener("pointerdown", inspector.down);
+  container.addEventListener("pointermove", inspector.move);
+  container.addEventListener("click", inspector.click);
+  container.addEventListener("pointerleave", inspector.leave);
+  container.addEventListener("focusin", inspector.focus);
+  container.addEventListener("focusout", inspector.close);
+  container.addEventListener("keydown", inspector.key);
+  const removeOutside = closeChartInspectionOnOutside({
+    container: () => container,
+    tooltip: () => tooltip,
+    close: inspector.close
+  });
+  const unlinkCursor = inspector.linkCursor(options.cursor);
+  let destroyed = false;
+  return {
+    invalidate: () => {
+      if (!destroyed) inspector.invalidate();
+    },
+    close: () => {
+      if (!destroyed) inspector.close();
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      container.removeEventListener("pointerdown", inspector.down);
+      container.removeEventListener("pointermove", inspector.move);
+      container.removeEventListener("click", inspector.click);
+      container.removeEventListener("pointerleave", inspector.leave);
+      container.removeEventListener("focusin", inspector.focus);
+      container.removeEventListener("focusout", inspector.close);
+      container.removeEventListener("keydown", inspector.key);
+      removeOutside();
+      unlinkCursor();
+      inspector.destroy();
+      for (const element of container.querySelectorAll("[data-chart-datum]")) {
+        element.removeAttribute("data-inspected");
+        element.style.removeProperty("--k2b-chart-inspection-color");
+        if (!element.getAttribute("style")) element.removeAttribute("style");
+      }
+      // Inspection geometry the inspector wrote onto the host container.
+      for (const name of ["inspection-x", "inspection-y", "plot-left", "plot-right", "plot-top", "plot-bottom"]) container.style.removeProperty(`--k2b-chart-${name}`);
+      anchor.remove();
+      tooltip.remove();
+      if (addedTabindex) container.removeAttribute("tabindex");
+    }
+  };
+}
+//# sourceMappingURL=chart-inspection-core.js.map