@voila.dev/chart 4.0.0

package/dist/react/chart.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import type { ChartDefinition } from "../core/define-chart.js";
+import type { ChartPoint } from "../core/types.js";
+import { type ChartBrush } from "./brush-contract.js";
+import { type ChartTooltipRenderProps } from "./chart-tooltip.js";
+import type { ChartRenderer } from "./renderer.js";
+interface Props extends Omit<React.ComponentProps<"div">, "children" | "onSelect" | "title"> {
+    readonly definition: ChartDefinition;
+    /** What the chart shows, in a sentence: the screen reader's name for it. Required. */
+    readonly ariaLabel: string;
+    /** The takeaway, when the label alone does not carry it. */
+    readonly ariaDescription?: string;
+    /** Pixels. Ignored when `aspectRatio` is set. */
+    readonly height?: number;
+    /** Height as a share of the width: `0.5` is twice as wide as tall. */
+    readonly aspectRatio?: number;
+    /** Width used on the server and for the first client render, before the container is measured. */
+    readonly initialWidth?: number;
+    readonly renderer?: ChartRenderer;
+    /** `false` turns the tooltip off; a function replaces its content. */
+    readonly tooltip?: boolean | ((props: ChartTooltipRenderProps) => React.ReactNode);
+    /** Shown by default when there is more than one series. */
+    readonly legend?: boolean;
+    /** The visually hidden table of the values. On by default; turn it off only when the page shows the same table. */
+    readonly dataTable?: boolean;
+    /** Tween a data update, in milliseconds; `false` snaps. Reduced motion always snaps. */
+    readonly animate?: boolean | number;
+    /**
+     * Zoom a continuous x: the wheel while the chart has focus, + and −,
+     * Shift and the arrows to pan, a drag to pan when zoomed, 0 to reset.
+     */
+    readonly zoom?: boolean;
+    /** Select a range of x by dragging or from the keyboard: `brushX({ onBrush })` from `@voila.dev/chart/brush`. */
+    readonly brush?: ChartBrush;
+    readonly onFocusChange?: (point: ChartPoint | null) => void;
+    readonly onSelect?: (point: ChartPoint | null) => void;
+}
+/**
+ * Draws a definition. Everything a reader needs beyond the picture comes with
+ * it: keyboard focus on every value, a live region that reads the focused
+ * value, a legend that toggles series, and the values as a hidden table.
+ */
+export declare function Chart({ definition, ariaLabel, ariaDescription, height, aspectRatio, initialWidth, renderer: Renderer, tooltip, legend, dataTable, animate, zoom, brush: brushBehavior, onFocusChange, onSelect, style, ...props }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=chart.d.ts.map

package/dist/react/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/react/chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EACN,KAAK,UAAU,EAGf,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAGN,KAAK,uBAAuB,EAC5B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA6BzD,UAAU,KACT,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAC5E,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC;IACrC,sFAAsF;IACtF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,4DAA4D;IAC5D,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,iDAAiD;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,sEAAsE;IACtE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,kGAAkG;IAClG,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;IAClC,sEAAsE;IACtE,QAAQ,CAAC,OAAO,CAAC,EACd,OAAO,GACP,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,mHAAmH;IACnH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,wFAAwF;IACxF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,iHAAiH;IACjH,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;CACvD;AAOD;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACrB,UAAU,EACV,SAAS,EACT,eAAe,EACf,MAAuB,EACvB,WAAW,EACX,YAAoC,EACpC,QAAQ,EAAE,QAAsB,EAChC,OAAc,EACd,MAAM,EACN,SAAgB,EAChB,OAAc,EACd,IAAY,EACZ,KAAK,EAAE,aAAa,EACpB,aAAa,EACb,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EAAE,KAAK,qBAwXP"}

package/dist/react/chart.js

@@ -0,0 +1,383 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { compileChart } from "../core/compile.js";
+import { findNearest, focusStops } from "../core/nearest.js";
+import { toNumber } from "../core/scales/continuous.js";
+import {
+  ordered
+} from "./brush-contract.js";
+import { ChartDataTable } from "./chart-data-table.js";
+import { ChartColorRamp, ChartLegend } from "./chart-legend.js";
+import {
+  ChartTooltip,
+  ChartTooltipContent
+} from "./chart-tooltip.js";
+import { FocusOverlay } from "./focus-overlay.js";
+import { messagesFor } from "./messages.js";
+import { SR_ONLY } from "./sr-only.js";
+import { SvgRenderer } from "./svg-renderer.js";
+import { useAnimatedScene } from "./use-animated-scene.js";
+import { useChartFocus } from "./use-chart-focus.js";
+import { useChartWidth } from "./use-chart-width.js";
+import { useChartZoom } from "./use-chart-zoom.js";
+import { useTextMeasurer } from "./use-text-measurer.js";
+const DEFAULT_HEIGHT = 300;
+const DEFAULT_INITIAL_WIDTH = 640;
+const DEFAULT_DURATION = 300;
+const CHART_CSS = `
+[data-slot="chart-surface"]:focus-visible{outline:2px solid var(--ring,Highlight);outline-offset:2px;border-radius:4px}
+@media (forced-colors:active){
+[data-slot="chart-svg"] [data-role="axis"],[data-slot="chart-svg"] [data-role="axis-title"]{fill:CanvasText}
+[data-slot="chart-svg"] [data-role="grid"]{stroke:GrayText}
+[data-slot="chart-focus-ring"]{stroke:Highlight}
+[data-slot="chart-tooltip"]{border-color:CanvasText}
+}
+@media (prefers-reduced-motion:no-preference){
+[data-slot="chart-tooltip"]{transition:transform 80ms ease-out}
+}
+`;
+const DRAG_THRESHOLD = 3;
+const ZOOM_STEP = 0.8;
+const PAN_SHARE = 0.1;
+function Chart({
+  definition,
+  ariaLabel,
+  ariaDescription,
+  height = DEFAULT_HEIGHT,
+  aspectRatio,
+  initialWidth = DEFAULT_INITIAL_WIDTH,
+  renderer: Renderer = SvgRenderer,
+  tooltip = true,
+  legend,
+  dataTable = true,
+  animate = true,
+  zoom = false,
+  brush: brushBehavior,
+  onFocusChange,
+  onSelect,
+  style,
+  ...props
+}) {
+  const chartId = React.useId().replaceAll(":", "");
+  const { ref, width, node } = useChartWidth(initialWidth);
+  const measureText = useTextMeasurer(node);
+  const [hidden, setHidden] = React.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const chartHeight = aspectRatio === void 0 ? height : Math.round(width * aspectRatio);
+  const baseScene = React.useMemo(
+    () => compileChart(definition, {
+      width,
+      height: chartHeight,
+      measureText,
+      hiddenSeries: hidden
+    }),
+    [definition, width, chartHeight, measureText, hidden]
+  );
+  const baseX = baseScene.scales.x;
+  const fullX = React.useMemo(
+    () => baseX && baseX.kind !== "band" && baseX.kind !== "point" ? [toNumber(baseX.domain[0]), toNumber(baseX.domain[1])] : void 0,
+    [baseX]
+  );
+  const viewport = useChartZoom(zoom ? fullX : void 0, definition);
+  const scene = React.useMemo(
+    () => viewport.domain === null ? baseScene : compileChart(definition, {
+      width,
+      height: chartHeight,
+      measureText,
+      hiddenSeries: hidden,
+      xDomain: viewport.domain
+    }),
+    [
+      baseScene,
+      viewport.domain,
+      definition,
+      width,
+      chartHeight,
+      measureText,
+      hidden
+    ]
+  );
+  const [brush, setBrush] = React.useState(null);
+  const [zoomAnnouncement, setZoomAnnouncement] = React.useState("");
+  const drag = React.useRef(null);
+  const stops = React.useMemo(() => focusStops(scene), [scene]);
+  const animationTrigger = React.useMemo(
+    () => [definition, hidden],
+    [definition, hidden]
+  );
+  const shown = useAnimatedScene(
+    scene,
+    animationTrigger,
+    animate === false ? 0 : animate === true ? DEFAULT_DURATION : animate
+  );
+  const messages = messagesFor(scene.locale);
+  const { active, handlers } = useChartFocus({
+    stops,
+    order: scene.focusOrder,
+    hitTest: (x, y) => findNearest(scene, stops, x, y),
+    onFocusChange,
+    onSelect
+  });
+  const xScale = scene.scales.x;
+  const xContinuous = xScale !== void 0 && xScale.kind !== "band" && xScale.kind !== "point";
+  function updateBrush(range) {
+    setBrush(range);
+    brushBehavior?.onBrush(range);
+  }
+  function localX(event) {
+    return event.clientX - event.currentTarget.getBoundingClientRect().left;
+  }
+  function onPointerDown(event) {
+    if (!brushBehavior && !(zoom && viewport.domain !== null)) {
+      return;
+    }
+    event.currentTarget.setPointerCapture(event.pointerId);
+    handlers.onPointerLeave();
+    drag.current = {
+      startX: localX(event),
+      domain: viewport.domain,
+      moved: false
+    };
+  }
+  function onPointerMove(event) {
+    const current = drag.current;
+    if (current === null || xScale === void 0) {
+      handlers.onPointerMove(event);
+      return;
+    }
+    const x = localX(event);
+    if (Math.abs(x - current.startX) > DRAG_THRESHOLD) {
+      current.moved = true;
+    }
+    if (!current.moved) return;
+    if (brushBehavior) {
+      updateBrush(
+        ordered(xScale, [xScale.invert(current.startX), xScale.invert(x)])
+      );
+    } else if (current.domain !== null) {
+      const [from, to] = current.domain;
+      const perPixel = (to - from) / Math.max(1, scene.plot.width);
+      viewport.pan(
+        (current.startX - x) * perPixel - ((viewport.domain?.[0] ?? from) - from)
+      );
+    }
+  }
+  function onPointerUp(event) {
+    if (drag.current !== null && event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  }
+  function onClick(event) {
+    const dragged = drag.current?.moved === true;
+    drag.current = null;
+    if (!dragged) {
+      handlers.onClick(event);
+    }
+  }
+  function announceViewport(next) {
+    if (xScale === void 0) return;
+    const [from, to] = next ?? fullX ?? [0, 0];
+    const asValue = (value) => xScale.kind === "time" ? new Date(value) : value;
+    setZoomAnnouncement(
+      messages.showing(
+        xScale.format(asValue(from)),
+        xScale.format(asValue(to))
+      )
+    );
+  }
+  function onKeyDown(event) {
+    if (zoom && xContinuous && fullX !== void 0) {
+      const focused = active?.point.xValue;
+      const [from, to] = viewport.domain ?? fullX;
+      const center = focused === void 0 ? (from + to) / 2 : toNumber(focused);
+      if (event.key === "+" || event.key === "=") {
+        event.preventDefault();
+        viewport.zoomAround(center, ZOOM_STEP);
+        return;
+      }
+      if (event.key === "-" || event.key === "_") {
+        event.preventDefault();
+        viewport.zoomAround(center, 1 / ZOOM_STEP);
+        return;
+      }
+      if (event.key === "0") {
+        event.preventDefault();
+        viewport.reset();
+        return;
+      }
+      if (event.shiftKey && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+        event.preventDefault();
+        viewport.pan(
+          (event.key === "ArrowRight" ? 1 : -1) * viewport.span() * PAN_SHARE
+        );
+        return;
+      }
+    }
+    handlers.onKeyDown(event);
+  }
+  const activeKey = active?.point.key;
+  React.useEffect(() => {
+    setZoomAnnouncement("");
+  }, [activeKey]);
+  const viewportKey = viewport.domain?.join(":") ?? "full";
+  const previousViewport = React.useRef(viewportKey);
+  React.useEffect(() => {
+    if (previousViewport.current !== viewportKey) {
+      previousViewport.current = viewportKey;
+      announceViewport(viewport.domain);
+    }
+  }, [viewportKey]);
+  const zoomRef = React.useRef({
+    viewport,
+    xScale,
+    enabled: zoom && xContinuous
+  });
+  zoomRef.current = { viewport, xScale, enabled: zoom && xContinuous };
+  React.useEffect(() => {
+    if (node === null) return;
+    function onWheel(event) {
+      const { viewport: current, xScale: scale, enabled } = zoomRef.current;
+      if (!enabled || scale === void 0 || document.activeElement !== node || node === null)
+        return;
+      event.preventDefault();
+      const x = event.clientX - node.getBoundingClientRect().left;
+      current.zoomAround(
+        toNumber(scale.invert(x)),
+        event.deltaY > 0 ? 1 / ZOOM_STEP : ZOOM_STEP
+      );
+    }
+    node.addEventListener("wheel", onWheel, { passive: false });
+    return () => node.removeEventListener("wheel", onWheel);
+  }, [node]);
+  const announcement = active?.source === "keyboard" ? `${active.point.title} : ${(active.stop.points.length > 1 ? active.stop.points : [active.point]).map((point) => `${point.seriesLabel ?? scene.yLabel} ${point.value}`).join(", ")}` : "";
+  const showLegend = legend ?? scene.legend.length > 1;
+  const descriptionId = `${chartId}-description`;
+  const renderTooltip = typeof tooltip === "function" ? tooltip : ChartTooltipContent;
+  function toggle(key) {
+    setHidden((current) => {
+      const next = new Set(current);
+      if (!next.delete(key)) {
+        next.add(key);
+      }
+      return next;
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      style: { display: "grid", gap: 8, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("style", { href: "voila-chart", precedence: "default", children: CHART_CSS }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "chart-frame",
+            style: { position: "relative", height: chartHeight },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref,
+                  role: "img",
+                  "aria-roledescription": messages.roleDescription,
+                  "aria-label": ariaLabel,
+                  "aria-describedby": descriptionId,
+                  tabIndex: 0,
+                  "data-slot": "chart-surface",
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    touchAction: brushBehavior || zoom ? "none" : "pan-y",
+                    // Dragging across the plot brushes or pans; without this it
+                    // also selected the tick labels and the tooltip as text.
+                    ...brushBehavior || zoom ? { userSelect: "none", WebkitUserSelect: "none" } : {}
+                  },
+                  ...handlers,
+                  onKeyDown,
+                  onPointerDown,
+                  onPointerMove,
+                  onPointerUp,
+                  onClick,
+                  children: [
+                    /* @__PURE__ */ jsx(Renderer, { scene: shown, chartId }),
+                    /* @__PURE__ */ jsx(FocusOverlay, { scene, active, theme: scene.theme }),
+                    tooltip !== false && active !== null ? /* @__PURE__ */ jsx(
+                      ChartTooltip,
+                      {
+                        active,
+                        scene,
+                        render: renderTooltip
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              brushBehavior && xScale ? /* @__PURE__ */ jsx(
+                brushBehavior.Layer,
+                {
+                  scale: xScale,
+                  plot: scene.plot,
+                  range: brush,
+                  messages,
+                  onChange: updateBrush
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { id: descriptionId, style: SR_ONLY, children: [
+          ariaDescription ? `${ariaDescription} ` : "",
+          messages.keyboardHint,
+          zoom && xContinuous ? messages.zoomHint : ""
+        ] }),
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-atomic": "true", style: SR_ONLY, children: zoomAnnouncement || announcement }),
+        viewport.domain !== null ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "chart-reset-zoom",
+            onClick: () => viewport.reset(),
+            style: {
+              justifySelf: "end",
+              border: "1px solid var(--border, color-mix(in oklab, currentColor 20%, transparent))",
+              borderRadius: 6,
+              background: "transparent",
+              color: "inherit",
+              font: "inherit",
+              fontSize: 12,
+              padding: "2px 8px",
+              cursor: "pointer"
+            },
+            children: messages.resetZoom
+          }
+        ) : null,
+        showLegend && scene.legend.length > 0 ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: scene.legend,
+            hidden,
+            label: messages.legend,
+            onToggle: toggle
+          }
+        ) : null,
+        scene.colorRamp && legend !== false ? /* @__PURE__ */ jsx(ChartColorRamp, { ramp: scene.colorRamp, label: messages.legend }) : null,
+        dataTable ? /* @__PURE__ */ jsx(
+          ChartDataTable,
+          {
+            scene,
+            stops,
+            caption: messages.dataTable(ariaLabel),
+            seriesHeading: messages.series
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  Chart
+};
+//# sourceMappingURL=chart.js.map

package/dist/react/chart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/chart.tsx"],
+  "sourcesContent": ["import * as React from \"react\";\nimport { compileChart } from \"#/core/compile.ts\";\nimport type { ChartDefinition } from \"#/core/define-chart.ts\";\nimport { findNearest, focusStops } from \"#/core/nearest.ts\";\nimport { toNumber } from \"#/core/scales/continuous.ts\";\nimport type { ChartPoint } from \"#/core/types.ts\";\nimport {\n\ttype ChartBrush,\n\ttype ChartBrushRange,\n\tordered,\n} from \"#/react/brush-contract.ts\";\nimport { ChartDataTable } from \"#/react/chart-data-table.tsx\";\nimport { ChartColorRamp, ChartLegend } from \"#/react/chart-legend.tsx\";\nimport {\n\tChartTooltip,\n\tChartTooltipContent,\n\ttype ChartTooltipRenderProps,\n} from \"#/react/chart-tooltip.tsx\";\nimport { FocusOverlay } from \"#/react/focus-overlay.tsx\";\nimport { messagesFor } from \"#/react/messages.ts\";\nimport type { ChartRenderer } from \"#/react/renderer.ts\";\nimport { SR_ONLY } from \"#/react/sr-only.ts\";\nimport { SvgRenderer } from \"#/react/svg-renderer.tsx\";\nimport { useAnimatedScene } from \"#/react/use-animated-scene.ts\";\nimport { useChartFocus } from \"#/react/use-chart-focus.ts\";\nimport { useChartWidth } from \"#/react/use-chart-width.ts\";\nimport { useChartZoom } from \"#/react/use-chart-zoom.ts\";\nimport { useTextMeasurer } from \"#/react/use-text-measurer.ts\";\n\nconst DEFAULT_HEIGHT = 300;\nconst DEFAULT_INITIAL_WIDTH = 640;\nconst DEFAULT_DURATION = 300;\n\n/** Focus ring, forced colours and reduced motion: what inline styles cannot say. */\nconst CHART_CSS = `\n[data-slot=\"chart-surface\"]:focus-visible{outline:2px solid var(--ring,Highlight);outline-offset:2px;border-radius:4px}\n@media (forced-colors:active){\n[data-slot=\"chart-svg\"] [data-role=\"axis\"],[data-slot=\"chart-svg\"] [data-role=\"axis-title\"]{fill:CanvasText}\n[data-slot=\"chart-svg\"] [data-role=\"grid\"]{stroke:GrayText}\n[data-slot=\"chart-focus-ring\"]{stroke:Highlight}\n[data-slot=\"chart-tooltip\"]{border-color:CanvasText}\n}\n@media (prefers-reduced-motion:no-preference){\n[data-slot=\"chart-tooltip\"]{transition:transform 80ms ease-out}\n}\n`;\n\n// `title` would put a native tooltip on the whole chart; the props carry the\n// accessible name as `ariaLabel` instead.\ninterface Props\n\textends Omit<React.ComponentProps<\"div\">, \"children\" | \"onSelect\" | \"title\"> {\n\treadonly definition: ChartDefinition;\n\t/** What the chart shows, in a sentence: the screen reader's name for it. Required. */\n\treadonly ariaLabel: string;\n\t/** The takeaway, when the label alone does not carry it. */\n\treadonly ariaDescription?: string;\n\t/** Pixels. Ignored when `aspectRatio` is set. */\n\treadonly height?: number;\n\t/** Height as a share of the width: `0.5` is twice as wide as tall. */\n\treadonly aspectRatio?: number;\n\t/** Width used on the server and for the first client render, before the container is measured. */\n\treadonly initialWidth?: number;\n\treadonly renderer?: ChartRenderer;\n\t/** `false` turns the tooltip off; a function replaces its content. */\n\treadonly tooltip?:\n\t\t| boolean\n\t\t| ((props: ChartTooltipRenderProps) => React.ReactNode);\n\t/** Shown by default when there is more than one series. */\n\treadonly legend?: boolean;\n\t/** The visually hidden table of the values. On by default; turn it off only when the page shows the same table. */\n\treadonly dataTable?: boolean;\n\t/** Tween a data update, in milliseconds; `false` snaps. Reduced motion always snaps. */\n\treadonly animate?: boolean | number;\n\t/**\n\t * Zoom a continuous x: the wheel while the chart has focus, + and \u2212,\n\t * Shift and the arrows to pan, a drag to pan when zoomed, 0 to reset.\n\t */\n\treadonly zoom?: boolean;\n\t/** Select a range of x by dragging or from the keyboard: `brushX({ onBrush })` from `@voila.dev/chart/brush`. */\n\treadonly brush?: ChartBrush;\n\treadonly onFocusChange?: (point: ChartPoint | null) => void;\n\treadonly onSelect?: (point: ChartPoint | null) => void;\n}\n\n/** A pointer that moved less than this between down and up clicked rather than dragged. */\nconst DRAG_THRESHOLD = 3;\nconst ZOOM_STEP = 0.8;\nconst PAN_SHARE = 0.1;\n\n/**\n * Draws a definition. Everything a reader needs beyond the picture comes with\n * it: keyboard focus on every value, a live region that reads the focused\n * value, a legend that toggles series, and the values as a hidden table.\n */\nexport function Chart({\n\tdefinition,\n\tariaLabel,\n\tariaDescription,\n\theight = DEFAULT_HEIGHT,\n\taspectRatio,\n\tinitialWidth = DEFAULT_INITIAL_WIDTH,\n\trenderer: Renderer = SvgRenderer,\n\ttooltip = true,\n\tlegend,\n\tdataTable = true,\n\tanimate = true,\n\tzoom = false,\n\tbrush: brushBehavior,\n\tonFocusChange,\n\tonSelect,\n\tstyle,\n\t...props\n}: Props) {\n\tconst chartId = React.useId().replaceAll(\":\", \"\");\n\tconst { ref, width, node } = useChartWidth(initialWidth);\n\tconst measureText = useTextMeasurer(node);\n\tconst [hidden, setHidden] = React.useState<ReadonlySet<string>>(\n\t\t() => new Set(),\n\t);\n\tconst chartHeight =\n\t\taspectRatio === undefined ? height : Math.round(width * aspectRatio);\n\n\tconst baseScene = React.useMemo(\n\t\t() =>\n\t\t\tcompileChart(definition, {\n\t\t\t\twidth,\n\t\t\t\theight: chartHeight,\n\t\t\t\tmeasureText,\n\t\t\t\thiddenSeries: hidden,\n\t\t\t}),\n\t\t[definition, width, chartHeight, measureText, hidden],\n\t);\n\tconst baseX = baseScene.scales.x;\n\tconst fullX = React.useMemo<readonly [number, number] | undefined>(\n\t\t() =>\n\t\t\tbaseX && baseX.kind !== \"band\" && baseX.kind !== \"point\"\n\t\t\t\t? [toNumber(baseX.domain[0]), toNumber(baseX.domain[1])]\n\t\t\t\t: undefined,\n\t\t[baseX],\n\t);\n\tconst viewport = useChartZoom(zoom ? fullX : undefined, definition);\n\tconst scene = React.useMemo(\n\t\t() =>\n\t\t\tviewport.domain === null\n\t\t\t\t? baseScene\n\t\t\t\t: compileChart(definition, {\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\theight: chartHeight,\n\t\t\t\t\t\tmeasureText,\n\t\t\t\t\t\thiddenSeries: hidden,\n\t\t\t\t\t\txDomain: viewport.domain,\n\t\t\t\t\t}),\n\t\t[\n\t\t\tbaseScene,\n\t\t\tviewport.domain,\n\t\t\tdefinition,\n\t\t\twidth,\n\t\t\tchartHeight,\n\t\t\tmeasureText,\n\t\t\thidden,\n\t\t],\n\t);\n\tconst [brush, setBrush] = React.useState<ChartBrushRange | null>(null);\n\tconst [zoomAnnouncement, setZoomAnnouncement] = React.useState(\"\");\n\tconst drag = React.useRef<{\n\t\treadonly startX: number;\n\t\treadonly domain: readonly [number, number] | null;\n\t\tmoved: boolean;\n\t} | null>(null);\n\tconst stops = React.useMemo(() => focusStops(scene), [scene]);\n\tconst animationTrigger = React.useMemo(\n\t\t() => [definition, hidden],\n\t\t[definition, hidden],\n\t);\n\tconst shown = useAnimatedScene(\n\t\tscene,\n\t\tanimationTrigger,\n\t\tanimate === false ? 0 : animate === true ? DEFAULT_DURATION : animate,\n\t);\n\tconst messages = messagesFor(scene.locale);\n\tconst { active, handlers } = useChartFocus({\n\t\tstops,\n\t\torder: scene.focusOrder,\n\t\thitTest: (x, y) => findNearest(scene, stops, x, y),\n\t\tonFocusChange,\n\t\tonSelect,\n\t});\n\n\tconst xScale = scene.scales.x;\n\tconst xContinuous =\n\t\txScale !== undefined && xScale.kind !== \"band\" && xScale.kind !== \"point\";\n\n\tfunction updateBrush(range: ChartBrushRange | null) {\n\t\tsetBrush(range);\n\t\tbrushBehavior?.onBrush(range);\n\t}\n\n\tfunction localX(event: React.PointerEvent<HTMLElement>): number {\n\t\treturn event.clientX - event.currentTarget.getBoundingClientRect().left;\n\t}\n\n\tfunction onPointerDown(event: React.PointerEvent<HTMLDivElement>) {\n\t\tif (!brushBehavior && !(zoom && viewport.domain !== null)) {\n\t\t\treturn;\n\t\t}\n\t\tevent.currentTarget.setPointerCapture(event.pointerId);\n\t\t// A drag selects a range, not a value: the hover tooltip gives way.\n\t\thandlers.onPointerLeave();\n\t\tdrag.current = {\n\t\t\tstartX: localX(event),\n\t\t\tdomain: viewport.domain,\n\t\t\tmoved: false,\n\t\t};\n\t}\n\n\tfunction onPointerMove(event: React.PointerEvent<HTMLDivElement>) {\n\t\tconst current = drag.current;\n\t\tif (current === null || xScale === undefined) {\n\t\t\thandlers.onPointerMove(event);\n\t\t\treturn;\n\t\t}\n\t\tconst x = localX(event);\n\t\tif (Math.abs(x - current.startX) > DRAG_THRESHOLD) {\n\t\t\tcurrent.moved = true;\n\t\t}\n\t\tif (!current.moved) return;\n\t\tif (brushBehavior) {\n\t\t\tupdateBrush(\n\t\t\t\tordered(xScale, [xScale.invert(current.startX), xScale.invert(x)]),\n\t\t\t);\n\t\t} else if (current.domain !== null) {\n\t\t\tconst [from, to] = current.domain;\n\t\t\tconst perPixel = (to - from) / Math.max(1, scene.plot.width);\n\t\t\tviewport.pan(\n\t\t\t\t(current.startX - x) * perPixel -\n\t\t\t\t\t((viewport.domain?.[0] ?? from) - from),\n\t\t\t);\n\t\t}\n\t}\n\n\tfunction onPointerUp(event: React.PointerEvent<HTMLDivElement>) {\n\t\tif (\n\t\t\tdrag.current !== null &&\n\t\t\tevent.currentTarget.hasPointerCapture(event.pointerId)\n\t\t) {\n\t\t\tevent.currentTarget.releasePointerCapture(event.pointerId);\n\t\t}\n\t}\n\n\tfunction onClick(event: React.MouseEvent<HTMLDivElement>) {\n\t\tconst dragged = drag.current?.moved === true;\n\t\tdrag.current = null;\n\t\tif (!dragged) {\n\t\t\thandlers.onClick(event);\n\t\t}\n\t}\n\n\tfunction announceViewport(next: readonly [number, number] | null) {\n\t\tif (xScale === undefined) return;\n\t\tconst [from, to] = next ?? fullX ?? [0, 0];\n\t\tconst asValue = (value: number) =>\n\t\t\txScale.kind === \"time\" ? new Date(value) : value;\n\t\tsetZoomAnnouncement(\n\t\t\tmessages.showing(\n\t\t\t\txScale.format(asValue(from)),\n\t\t\t\txScale.format(asValue(to)),\n\t\t\t),\n\t\t);\n\t}\n\n\tfunction onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n\t\tif (zoom && xContinuous && fullX !== undefined) {\n\t\t\tconst focused = active?.point.xValue;\n\t\t\tconst [from, to] = viewport.domain ?? fullX;\n\t\t\tconst center =\n\t\t\t\tfocused === undefined ? (from + to) / 2 : toNumber(focused);\n\t\t\tif (event.key === \"+\" || event.key === \"=\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.zoomAround(center, ZOOM_STEP);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key === \"-\" || event.key === \"_\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.zoomAround(center, 1 / ZOOM_STEP);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key === \"0\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.reset();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tevent.shiftKey &&\n\t\t\t\t(event.key === \"ArrowLeft\" || event.key === \"ArrowRight\")\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.pan(\n\t\t\t\t\t(event.key === \"ArrowRight\" ? 1 : -1) * viewport.span() * PAN_SHARE,\n\t\t\t\t);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\thandlers.onKeyDown(event);\n\t}\n\n\t// Moving the focus says the new value; the last zoom's message gives way.\n\tconst activeKey = active?.point.key;\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: clears on a change of focused point only\n\tReact.useEffect(() => {\n\t\tsetZoomAnnouncement(\"\");\n\t}, [activeKey]);\n\n\tconst viewportKey = viewport.domain?.join(\":\") ?? \"full\";\n\tconst previousViewport = React.useRef(viewportKey);\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: announce a change of viewport, once\n\tReact.useEffect(() => {\n\t\tif (previousViewport.current !== viewportKey) {\n\t\t\tpreviousViewport.current = viewportKey;\n\t\t\tannounceViewport(viewport.domain);\n\t\t}\n\t}, [viewportKey]);\n\n\t// The wheel zooms only while the chart has focus: scrolling past a chart\n\t// must keep scrolling the page.\n\tconst zoomRef = React.useRef({\n\t\tviewport,\n\t\txScale,\n\t\tenabled: zoom && xContinuous,\n\t});\n\tzoomRef.current = { viewport, xScale, enabled: zoom && xContinuous };\n\tReact.useEffect(() => {\n\t\tif (node === null) return;\n\t\tfunction onWheel(event: WheelEvent) {\n\t\t\tconst { viewport: current, xScale: scale, enabled } = zoomRef.current;\n\t\t\tif (\n\t\t\t\t!enabled ||\n\t\t\t\tscale === undefined ||\n\t\t\t\tdocument.activeElement !== node ||\n\t\t\t\tnode === null\n\t\t\t)\n\t\t\t\treturn;\n\t\t\tevent.preventDefault();\n\t\t\tconst x = event.clientX - node.getBoundingClientRect().left;\n\t\t\tcurrent.zoomAround(\n\t\t\t\ttoNumber(scale.invert(x)),\n\t\t\t\tevent.deltaY > 0 ? 1 / ZOOM_STEP : ZOOM_STEP,\n\t\t\t);\n\t\t}\n\t\tnode.addEventListener(\"wheel\", onWheel, { passive: false });\n\t\treturn () => node.removeEventListener(\"wheel\", onWheel);\n\t}, [node]);\n\n\tconst announcement =\n\t\tactive?.source === \"keyboard\"\n\t\t\t? `${active.point.title} : ${(active.stop.points.length > 1\n\t\t\t\t\t? active.stop.points\n\t\t\t\t\t: [active.point]\n\t\t\t\t)\n\t\t\t\t\t.map((point) => `${point.seriesLabel ?? scene.yLabel} ${point.value}`)\n\t\t\t\t\t.join(\", \")}`\n\t\t\t: \"\";\n\tconst showLegend = legend ?? scene.legend.length > 1;\n\tconst descriptionId = `${chartId}-description`;\n\tconst renderTooltip =\n\t\ttypeof tooltip === \"function\" ? tooltip : ChartTooltipContent;\n\n\tfunction toggle(key: string) {\n\t\tsetHidden((current) => {\n\t\t\tconst next = new Set(current);\n\t\t\tif (!next.delete(key)) {\n\t\t\t\tnext.add(key);\n\t\t\t}\n\t\t\treturn next;\n\t\t});\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"chart\"\n\t\t\tstyle={{ display: \"grid\", gap: 8, ...style }}\n\t\t\t{...props}\n\t\t>\n\t\t\t<style href=\"voila-chart\" precedence=\"default\">\n\t\t\t\t{CHART_CSS}\n\t\t\t</style>\n\t\t\t<div\n\t\t\t\tdata-slot=\"chart-frame\"\n\t\t\t\tstyle={{ position: \"relative\", height: chartHeight }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\taria-roledescription={messages.roleDescription}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-describedby={descriptionId}\n\t\t\t\t\t// The chart is one focus stop; the arrow keys move inside it, the way\n\t\t\t\t\t// a reader walks the values. role=\"img\" keeps it a single named\n\t\t\t\t\t// graphic, the live region speaks the focused value.\n\t\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveTabindex: keyboard exploration of the values\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tdata-slot=\"chart-surface\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tinset: 0,\n\t\t\t\t\t\ttouchAction: brushBehavior || zoom ? \"none\" : \"pan-y\",\n\t\t\t\t\t\t// Dragging across the plot brushes or pans; without this it\n\t\t\t\t\t\t// also selected the tick labels and the tooltip as text.\n\t\t\t\t\t\t...(brushBehavior || zoom\n\t\t\t\t\t\t\t? { userSelect: \"none\", WebkitUserSelect: \"none\" }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t}}\n\t\t\t\t\t{...handlers}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\tonPointerDown={onPointerDown}\n\t\t\t\t\tonPointerMove={onPointerMove}\n\t\t\t\t\tonPointerUp={onPointerUp}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t>\n\t\t\t\t\t<Renderer scene={shown} chartId={chartId} />\n\t\t\t\t\t<FocusOverlay scene={scene} active={active} theme={scene.theme} />\n\t\t\t\t\t{tooltip !== false && active !== null ? (\n\t\t\t\t\t\t<ChartTooltip\n\t\t\t\t\t\t\tactive={active}\n\t\t\t\t\t\t\tscene={scene}\n\t\t\t\t\t\t\trender={renderTooltip}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{brushBehavior && xScale ? (\n\t\t\t\t\t<brushBehavior.Layer\n\t\t\t\t\t\tscale={xScale}\n\t\t\t\t\t\tplot={scene.plot}\n\t\t\t\t\t\trange={brush}\n\t\t\t\t\t\tmessages={messages}\n\t\t\t\t\t\tonChange={updateBrush}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t<div id={descriptionId} style={SR_ONLY}>\n\t\t\t\t{ariaDescription ? `${ariaDescription} ` : \"\"}\n\t\t\t\t{messages.keyboardHint}\n\t\t\t\t{zoom && xContinuous ? messages.zoomHint : \"\"}\n\t\t\t</div>\n\t\t\t<div aria-live=\"polite\" aria-atomic=\"true\" style={SR_ONLY}>\n\t\t\t\t{zoomAnnouncement || announcement}\n\t\t\t</div>\n\t\t\t{viewport.domain !== null ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-slot=\"chart-reset-zoom\"\n\t\t\t\t\tonClick={() => viewport.reset()}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tjustifySelf: \"end\",\n\t\t\t\t\t\tborder:\n\t\t\t\t\t\t\t\"1px solid var(--border, color-mix(in oklab, currentColor 20%, transparent))\",\n\t\t\t\t\t\tborderRadius: 6,\n\t\t\t\t\t\tbackground: \"transparent\",\n\t\t\t\t\t\tcolor: \"inherit\",\n\t\t\t\t\t\tfont: \"inherit\",\n\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\tpadding: \"2px 8px\",\n\t\t\t\t\t\tcursor: \"pointer\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{messages.resetZoom}\n\t\t\t\t</button>\n\t\t\t) : null}\n\t\t\t{showLegend && scene.legend.length > 0 ? (\n\t\t\t\t<ChartLegend\n\t\t\t\t\titems={scene.legend}\n\t\t\t\t\thidden={hidden}\n\t\t\t\t\tlabel={messages.legend}\n\t\t\t\t\tonToggle={toggle}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{scene.colorRamp && legend !== false ? (\n\t\t\t\t<ChartColorRamp ramp={scene.colorRamp} label={messages.legend} />\n\t\t\t) : null}\n\t\t\t{dataTable ? (\n\t\t\t\t<ChartDataTable\n\t\t\t\t\tscene={scene}\n\t\t\t\t\tstops={stops}\n\t\t\t\t\tcaption={messages.dataTable(ariaLabel)}\n\t\t\t\t\tseriesHeading={messages.series}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/react/focus-overlay.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+import type { ChartScene, ChartTheme } from "../core/types.js";
+import type { ActiveFocus } from "./use-chart-focus.js";
+/**
+ * The focus layer, drawn over the marks whichever renderer drew them: the
+ * column or row band under the pointer, and a ring on the focused point.
+ * Hidden from assistive tech: the live region says what it shows.
+ */
+export declare function FocusOverlay({ scene, active, theme, }: {
+    scene: ChartScene;
+    active: ActiveFocus | null;
+    theme: ChartTheme;
+}): React.JSX.Element | null;
+//# sourceMappingURL=focus-overlay.d.ts.map

package/dist/react/focus-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-overlay.d.ts","sourceRoot":"","sources":["../../src/react/focus-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAc,UAAU,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AA+D9D;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,GACL,EAAE;IACF,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;CAClB,4BAoFA"}

package/dist/react/focus-overlay.js

@@ -0,0 +1,147 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { arcPath, roundedBarPath } from "../core/paths.js";
+const RING_RADIUS = 4.5;
+const RING_OUTSET = 2;
+function PointRing({
+  point,
+  keyboard,
+  theme
+}) {
+  const ring = keyboard ? "var(--ring, Highlight)" : theme.background;
+  if (point.hit?.kind === "rect" && point.hit.rect.width > RING_RADIUS * 4) {
+    if (!keyboard) {
+      return null;
+    }
+    const { rect } = point.hit;
+    return /* @__PURE__ */ jsx(
+      "path",
+      {
+        "data-slot": "chart-focus-ring",
+        d: roundedBarPath({
+          x: rect.x - RING_OUTSET,
+          y: rect.y - RING_OUTSET,
+          width: rect.width + RING_OUTSET * 2,
+          height: rect.height + RING_OUTSET * 2,
+          radius: 4
+        }),
+        fill: "none",
+        stroke: ring,
+        strokeWidth: 2
+      }
+    );
+  }
+  if (point.hit?.kind === "arc") {
+    return /* @__PURE__ */ jsx(
+      "path",
+      {
+        "data-slot": "chart-focus-ring",
+        d: arcPath({
+          ...point.hit,
+          outerRadius: point.hit.outerRadius + RING_OUTSET
+        }),
+        fill: "none",
+        stroke: keyboard ? ring : theme.foreground,
+        strokeWidth: 2
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "circle",
+    {
+      "data-slot": "chart-focus-ring",
+      cx: point.x,
+      cy: point.y,
+      r: RING_RADIUS,
+      fill: point.color,
+      stroke: ring,
+      strokeWidth: 2
+    }
+  );
+}
+function FocusOverlay({
+  scene,
+  active,
+  theme
+}) {
+  if (active === null) {
+    return null;
+  }
+  const { focusOrder, scales } = scene;
+  const plot = scene.cells?.find((cell) => cell.key === active.point.facet)?.plot ?? scene.plot;
+  const keyboard = active.source === "keyboard";
+  const along = focusOrder === "y" ? scales.y : scales.x;
+  const band = along?.kind === "band" ? along.bandwidth : 0;
+  let cursor = null;
+  if (focusOrder !== "point") {
+    cursor = band > 0 ? /* @__PURE__ */ jsx(
+      "rect",
+      {
+        "data-slot": "chart-cursor",
+        ...focusOrder === "y" ? {
+          x: plot.x,
+          y: active.stop.at - band / 2,
+          width: plot.width,
+          height: band
+        } : {
+          x: active.stop.at - band / 2,
+          y: plot.y,
+          width: band,
+          height: plot.height
+        },
+        fill: "currentColor",
+        opacity: 0.06
+      }
+    ) : /* @__PURE__ */ jsx(
+      "line",
+      {
+        "data-slot": "chart-cursor",
+        ...focusOrder === "y" ? {
+          x1: plot.x,
+          x2: plot.x + plot.width,
+          y1: active.stop.at,
+          y2: active.stop.at
+        } : {
+          x1: active.stop.at,
+          x2: active.stop.at,
+          y1: plot.y,
+          y2: plot.y + plot.height
+        },
+        stroke: theme.muted,
+        strokeWidth: 1,
+        strokeDasharray: "3 3"
+      }
+    );
+  }
+  const ringed = focusOrder === "point" || keyboard && active.stop.points.length > 1 ? [active.point] : active.stop.points;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      "data-slot": "chart-focus",
+      width: scene.width,
+      height: scene.height,
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "visible",
+        pointerEvents: "none"
+      },
+      children: [
+        cursor,
+        ringed.map((point) => /* @__PURE__ */ jsx(
+          PointRing,
+          {
+            point,
+            keyboard,
+            theme
+          },
+          point.key
+        ))
+      ]
+    }
+  );
+}
+export {
+  FocusOverlay
+};
+//# sourceMappingURL=focus-overlay.js.map