@k2b/ui 0.21.0 → 0.23.0

package/dist/browser/content/ChartFilterControls.js

@@ -8,14 +8,17 @@ import { insert as _$insert } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__dimension role=group><!$><!/><output class=k2b-chart-explorer__dimension-value></output><div class=k2b-chart-explorer__steps>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__legend><!$><!/><div class=k2b-chart-explorer__status role=status><!$><!/><!$><!/>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<span>`);
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__dimension role=group><!$><!/><output class=k2b-chart-explorer__dimension-value><span aria-hidden=true></span><span></span></output><div class=k2b-chart-explorer__steps>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i class="ti ti-pin"aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__legend><!$><!/><!$><!/><div class=k2b-chart-explorer__status role=status><!$><!/><!$><!/>`);
 import { createEffect, createSignal, createUniqueId, For, Show } from "solid-js";
 import { Button } from "../actions/Button";
 import { FilterChip } from "../actions/FilterChip";
 import { Slider } from "../inputs/ChoiceInputs";
 import { useUiMessages } from "../intl/messages";
+import { useChartMessages } from "./chart-messages";
 /** Shared controls for a standalone explorer or an atomic group of charts. */
 export function ChartFilterControls(props) {
   const validateOptions = () => {
@@ -27,20 +30,25 @@ export function ChartFilterControls(props) {
   validateOptions();
   createEffect(validateOptions);
   const messages = useUiMessages();
+  const chartMessages = useChartMessages();
   const id = `k2b-chart-controls-${createUniqueId()}`;
   const [keyboardSteps, setKeyboardSteps] = createSignal(false);
   let pointerFocus = false;
   const stepLabel = key => props.steps?.find(step => step.key === key)?.label ?? key ?? "";
+  // The step name reserves the width of the longest one, so stepping never resizes the slider under the finger.
+  const widestStep = () => props.steps?.reduce((widest, step) => [...step.label].length > [...widest].length ? step.label : widest, "") ?? "";
   return [_$createComponent(Show, {
     get when() {
       return props.steps?.length;
     },
     get children() {
       var _el$ = _$getNextElement(_tmpl$),
-        _el$4 = _el$.firstChild,
-        [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling),
-        _el$2 = _el$5.nextSibling,
-        _el$3 = _el$2.nextSibling;
+        _el$6 = _el$.firstChild,
+        [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
+        _el$2 = _el$7.nextSibling,
+        _el$3 = _el$2.firstChild,
+        _el$4 = _el$3.nextSibling,
+        _el$5 = _el$2.nextSibling;
       _el$.$$focusout = () => {
         pointerFocus = false;
         setKeyboardSteps(false);
@@ -85,51 +93,57 @@ export function ChartFilterControls(props) {
             step: step.key
           });
         }
-      }), _el$5, _co$);
+      }), _el$7, _co$);
       _$setAttribute(_el$2, "for", `${id}-dimension`);
-      _$insert(_el$2, () => stepLabel(props.request.step));
-      _$setAttribute(_el$3, "id", `${id}-steps`);
-      _$insert(_el$3, _$createComponent(For, {
+      _$insert(_el$3, widestStep);
+      _$insert(_el$4, () => stepLabel(props.request.step));
+      _$setAttribute(_el$5, "id", `${id}-steps`);
+      _$insert(_el$5, _$createComponent(For, {
         get each() {
           return props.steps;
         },
         children: step => (() => {
-          var _el$12 = _$getNextElement(_tmpl$3);
-          _$insert(_el$12, () => step.label);
-          _$effect(() => _$setAttribute(_el$12, "data-current", step.key === props.request.step ? "true" : undefined));
-          return _el$12;
+          var _el$19 = _$getNextElement(_tmpl$3);
+          _$insert(_el$19, () => step.label);
+          _$effect(() => _$setAttribute(_el$19, "data-current", step.key === props.request.step ? "true" : undefined));
+          return _el$19;
         })()
       }));
       _$effect(_p$ => {
         var _v$ = props.dimensionLabel ?? messages().range,
-          _v$2 = keyboardSteps() ? "true" : undefined;
+          _v$2 = keyboardSteps() ? "true" : undefined,
+          _v$3 = stepLabel(props.request.step);
         _v$ !== _p$.e && _$setAttribute(_el$, "aria-label", _p$.e = _v$);
         _v$2 !== _p$.t && _$setAttribute(_el$, "data-keyboard", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setAttribute(_el$2, "title", _p$.a = _v$3);
         return _p$;
       }, {
         e: undefined,
-        t: undefined
+        t: undefined,
+        a: undefined
       });
       _$runHydrationEvents();
       return _el$;
     }
   }), (() => {
-    var _el$6 = _$getNextElement(_tmpl$2),
-      _el$10 = _el$6.firstChild,
-      [_el$11, _co$4] = _$getNextMarker(_el$10.nextSibling),
-      _el$7 = _el$11.nextSibling,
-      _el$8 = _el$7.firstChild,
-      [_el$9, _co$2] = _$getNextMarker(_el$8.nextSibling),
-      _el$0 = _el$9.nextSibling,
-      [_el$1, _co$3] = _$getNextMarker(_el$0.nextSibling);
-    _$insert(_el$6, _$createComponent(Show, {
+    var _el$8 = _$getNextElement(_tmpl$5),
+      _el$15 = _el$8.firstChild,
+      [_el$16, _co$4] = _$getNextMarker(_el$15.nextSibling),
+      _el$17 = _el$16.nextSibling,
+      [_el$18, _co$5] = _$getNextMarker(_el$17.nextSibling),
+      _el$10 = _el$18.nextSibling,
+      _el$11 = _el$10.firstChild,
+      [_el$12, _co$2] = _$getNextMarker(_el$11.nextSibling),
+      _el$13 = _el$12.nextSibling,
+      [_el$14, _co$3] = _$getNextMarker(_el$13.nextSibling);
+    _$insert(_el$8, _$createComponent(Show, {
       get when() {
         return props.series?.length;
       },
       get children() {
         return _$createComponent(FilterChip, {
           get label() {
-            return messages().chartSeries;
+            return props.seriesLabel ?? chartMessages().chartSeries;
           },
           icon: "ti ti-chart-dots",
           get disabled() {
@@ -160,8 +174,53 @@ export function ChartFilterControls(props) {
           })
         });
       }
-    }), _el$11, _co$4);
-    _$insert(_el$7, _$createComponent(Show, {
+    }), _el$16, _co$4);
+    _$insert(_el$8, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!props.compare)() && props.steps?.length;
+      },
+      get children() {
+        return _$createComponent(Button, {
+          variant: "secondary",
+          "class": "k2b-chart-explorer__pin",
+          get disabled() {
+            return props.disabled || props.request.referenceStep === undefined && props.request.step === undefined;
+          },
+          get ["aria-label"]() {
+            return _$memo(() => props.request.referenceStep === undefined)() ? undefined : `${chartMessages().chartRemoveComparison}: ${stepLabel(props.request.referenceStep)}`;
+          },
+          onClick: () => props.onRequest({
+            ...props.request,
+            referenceStep: props.request.referenceStep === undefined ? props.request.step : undefined
+          }),
+          get children() {
+            return [_$createComponent(Show, {
+              get when() {
+                return props.request.referenceStep === undefined;
+              },
+              get children() {
+                return _$getNextElement(_tmpl$2);
+              }
+            }), (() => {
+              var _el$0 = _$getNextElement(_tmpl$3);
+              _$insert(_el$0, (() => {
+                var _c$ = _$memo(() => props.request.referenceStep === undefined);
+                return () => _c$() ? chartMessages().chartPinReference : `${chartMessages().chartReference}: ${stepLabel(props.request.referenceStep)}`;
+              })());
+              return _el$0;
+            })(), _$createComponent(Show, {
+              get when() {
+                return props.request.referenceStep !== undefined;
+              },
+              get children() {
+                return _$getNextElement(_tmpl$4);
+              }
+            })];
+          }
+        });
+      }
+    }), _el$18, _co$5);
+    _$insert(_el$10, _$createComponent(Show, {
       get when() {
         return props.failed;
       },
@@ -177,13 +236,13 @@ export function ChartFilterControls(props) {
           }
         })];
       }
-    }), _el$9, _co$2);
-    _$insert(_el$7, _$createComponent(Show, {
+    }), _el$12, _co$2);
+    _$insert(_el$10, _$createComponent(Show, {
       get when() {
         return props.failed;
       },
       get children() {
-        return ["· ", _$memo(() => messages().chartPreviousData), _$createComponent(Show, {
+        return ["· ", _$memo(() => chartMessages().chartPreviousData), _$createComponent(Show, {
           get when() {
             return props.steps?.length;
           },
@@ -192,8 +251,8 @@ export function ChartFilterControls(props) {
           }
         })];
       }
-    }), _el$1, _co$3);
-    return _el$6;
+    }), _el$14, _co$3);
+    return _el$8;
   })()];
 }
 _$delegateEvents(["pointerdown", "keydown", "focusin", "focusout"]);

package/dist/browser/content/ChartFilterControls.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/ChartFilterControls.tsx"],"sourcesContent":["import { createEffect, createSignal, createUniqueId, For, Show } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { FilterChip } from \"../actions/FilterChip\";\nimport { Slider } from \"../inputs/ChoiceInputs\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ChartExplorerRequest } from \"./chart-explorer\";\n\nexport type ChartFilterControlsProps = {\n  request: ChartExplorerRequest;\n  displayedRequest: ChartExplorerRequest;\n  steps?: readonly { key: string; label: string }[];\n  series?: readonly { key: string; label: string; color: string }[];\n  dimensionLabel?: string;\n  disabled?: boolean;\n  failed?: boolean;\n  onRequest: (request: ChartExplorerRequest) => void;\n  onRetry?: () => void;\n};\n\n/** Shared controls for a standalone explorer or an atomic group of charts. */\nexport function ChartFilterControls(props: ChartFilterControlsProps) {\n  const validateOptions = () => {\n    for (const items of [props.steps, props.series]) {\n      const keys = items?.map((item) => item.key) ?? [];\n      if (keys.some((key) => !key) || new Set(keys).size !== keys.length)\n        throw new Error(\"Chart control options require nonempty unique keys\");\n    }\n  };\n  validateOptions();\n  createEffect(validateOptions);\n  const messages = useUiMessages();\n  const id = `k2b-chart-controls-${createUniqueId()}`;\n  const [keyboardSteps, setKeyboardSteps] = createSignal(false);\n  let pointerFocus = false;\n  const stepLabel = (key: string | undefined) => props.steps?.find((step) => step.key === key)?.label ?? key ?? \"\";\n  return (\n    <>\n      <Show when={props.steps?.length}>\n        <div\n          class=\"k2b-chart-explorer__dimension\"\n          role=\"group\"\n          aria-label={props.dimensionLabel ?? messages().range}\n          data-keyboard={keyboardSteps() ? \"true\" : undefined}\n          onPointerDown={() => {\n            pointerFocus = true;\n            setKeyboardSteps(false);\n          }}\n          onKeyDown={() => {\n            pointerFocus = false;\n            setKeyboardSteps(true);\n          }}\n          onFocusIn={(event) => {\n            if (!pointerFocus && event.target.matches(\":focus-visible\")) setKeyboardSteps(true);\n          }}\n          onFocusOut={() => {\n            pointerFocus = false;\n            setKeyboardSteps(false);\n          }}\n        >\n          <Slider\n            id={`${id}-dimension`}\n            showValue={false}\n            aria-describedby={`${id}-steps`}\n            label={props.dimensionLabel ?? messages().range}\n            min={0}\n            max={Math.max(0, (props.steps?.length ?? 1) - 1)}\n            step={1}\n            value={Math.max(0, props.steps?.findIndex((step) => step.key === props.request.step) ?? 0)}\n            disabled={props.disabled || (props.steps?.length ?? 0) < 2}\n            formatValue={(index) => props.steps?.[index]?.label ?? \"\"}\n            aria-valuetext={stepLabel(props.request.step)}\n            onValueChange={(index) => {\n              const step = props.steps?.[index];\n              if (step) props.onRequest({ ...props.request, step: step.key });\n            }}\n          />\n          <output class=\"k2b-chart-explorer__dimension-value\" for={`${id}-dimension`}>\n            {stepLabel(props.request.step)}\n          </output>\n          <div id={`${id}-steps`} class=\"k2b-chart-explorer__steps\">\n            <For each={props.steps}>\n              {(step) => <span data-current={step.key === props.request.step ? \"true\" : undefined}>{step.label}</span>}\n            </For>\n          </div>\n        </div>\n      </Show>\n      <div class=\"k2b-chart-explorer__legend\">\n        <Show when={props.series?.length}>\n          <FilterChip\n            label={messages().chartSeries}\n            icon=\"ti ti-chart-dots\"\n            disabled={props.disabled}\n            value={props.request.visibleKeys ?? props.series?.map((item) => item.key) ?? []}\n            defaultValue={props.series?.map((item) => item.key) ?? []}\n            isActive={props.request.visibleKeys !== undefined && props.request.visibleKeys.length !== props.series?.length}\n            options={[\n              { multiple: true, options: (props.series ?? []).map((item) => ({ value: item.key, label: item.label, color: item.color })) },\n            ]}\n            onValueChange={(visibleKeys) => props.onRequest({ ...props.request, visibleKeys })}\n          />\n        </Show>\n        <div class=\"k2b-chart-explorer__status\" role=\"status\">\n          <Show when={props.failed}>\n            {messages().couldNotLoadData}{\" \"}\n            <Button variant=\"text\" size=\"sm\" onClick={props.onRetry}>\n              {messages().retry}\n            </Button>\n          </Show>\n          <Show when={props.failed}>\n            · {messages().chartPreviousData}\n            <Show when={props.steps?.length}>: {stepLabel(props.displayedRequest.step)}</Show>\n          </Show>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/ChartFilterControls.tsx"],"sourcesContent":["import { createEffect, createSignal, createUniqueId, For, Show } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { FilterChip } from \"../actions/FilterChip\";\nimport { Slider } from \"../inputs/ChoiceInputs\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ChartExplorerRequest } from \"./chart-explorer\";\nimport { useChartMessages } from \"./chart-messages\";\n\nexport type ChartFilterControlsProps = {\n  request: ChartExplorerRequest;\n  displayedRequest: ChartExplorerRequest;\n  steps?: readonly { key: string; label: string }[];\n  /** Series to filter; `color` shows a swatch and belongs only to series the chart colors that way. */\n  series?: readonly { key: string; label: string; color?: string }[];\n  dimensionLabel?: string;\n  /** Label of the series filter, such as the column the series come from; defaults to the inherited series label. */\n  seriesLabel?: string;\n  /** Offer pinning the current step as a reference for comparison. */\n  compare?: boolean;\n  disabled?: boolean;\n  failed?: boolean;\n  onRequest: (request: ChartExplorerRequest) => void;\n  onRetry?: () => void;\n};\n\n/** Shared controls for a standalone explorer or an atomic group of charts. */\nexport function ChartFilterControls(props: ChartFilterControlsProps) {\n  const validateOptions = () => {\n    for (const items of [props.steps, props.series]) {\n      const keys = items?.map((item) => item.key) ?? [];\n      if (keys.some((key) => !key) || new Set(keys).size !== keys.length)\n        throw new Error(\"Chart control options require nonempty unique keys\");\n    }\n  };\n  validateOptions();\n  createEffect(validateOptions);\n  const messages = useUiMessages();\n  const chartMessages = useChartMessages();\n  const id = `k2b-chart-controls-${createUniqueId()}`;\n  const [keyboardSteps, setKeyboardSteps] = createSignal(false);\n  let pointerFocus = false;\n  const stepLabel = (key: string | undefined) => props.steps?.find((step) => step.key === key)?.label ?? key ?? \"\";\n  // The step name reserves the width of the longest one, so stepping never resizes the slider under the finger.\n  const widestStep = () =>\n    props.steps?.reduce((widest, step) => ([...step.label].length > [...widest].length ? step.label : widest), \"\") ?? \"\";\n  return (\n    <>\n      <Show when={props.steps?.length}>\n        <div\n          class=\"k2b-chart-explorer__dimension\"\n          role=\"group\"\n          aria-label={props.dimensionLabel ?? messages().range}\n          data-keyboard={keyboardSteps() ? \"true\" : undefined}\n          onPointerDown={() => {\n            pointerFocus = true;\n            setKeyboardSteps(false);\n          }}\n          onKeyDown={() => {\n            pointerFocus = false;\n            setKeyboardSteps(true);\n          }}\n          onFocusIn={(event) => {\n            if (!pointerFocus && event.target.matches(\":focus-visible\")) setKeyboardSteps(true);\n          }}\n          onFocusOut={() => {\n            pointerFocus = false;\n            setKeyboardSteps(false);\n          }}\n        >\n          <Slider\n            id={`${id}-dimension`}\n            showValue={false}\n            aria-describedby={`${id}-steps`}\n            label={props.dimensionLabel ?? messages().range}\n            min={0}\n            max={Math.max(0, (props.steps?.length ?? 1) - 1)}\n            step={1}\n            value={Math.max(0, props.steps?.findIndex((step) => step.key === props.request.step) ?? 0)}\n            disabled={props.disabled || (props.steps?.length ?? 0) < 2}\n            formatValue={(index) => props.steps?.[index]?.label ?? \"\"}\n            aria-valuetext={stepLabel(props.request.step)}\n            onValueChange={(index) => {\n              const step = props.steps?.[index];\n              if (step) props.onRequest({ ...props.request, step: step.key });\n            }}\n          />\n          <output class=\"k2b-chart-explorer__dimension-value\" for={`${id}-dimension`} title={stepLabel(props.request.step)}>\n            <span aria-hidden=\"true\">{widestStep()}</span>\n            <span>{stepLabel(props.request.step)}</span>\n          </output>\n          <div id={`${id}-steps`} class=\"k2b-chart-explorer__steps\">\n            <For each={props.steps}>\n              {(step) => <span data-current={step.key === props.request.step ? \"true\" : undefined}>{step.label}</span>}\n            </For>\n          </div>\n        </div>\n      </Show>\n      <div class=\"k2b-chart-explorer__legend\">\n        <Show when={props.series?.length}>\n          <FilterChip\n            label={props.seriesLabel ?? chartMessages().chartSeries}\n            icon=\"ti ti-chart-dots\"\n            disabled={props.disabled}\n            value={props.request.visibleKeys ?? props.series?.map((item) => item.key) ?? []}\n            defaultValue={props.series?.map((item) => item.key) ?? []}\n            isActive={props.request.visibleKeys !== undefined && props.request.visibleKeys.length !== props.series?.length}\n            options={[\n              { multiple: true, options: (props.series ?? []).map((item) => ({ value: item.key, label: item.label, color: item.color })) },\n            ]}\n            onValueChange={(visibleKeys) => props.onRequest({ ...props.request, visibleKeys })}\n          />\n        </Show>\n        <Show when={props.compare && props.steps?.length}>\n          <Button\n            variant=\"secondary\"\n            class=\"k2b-chart-explorer__pin\"\n            disabled={props.disabled || (props.request.referenceStep === undefined && props.request.step === undefined)}\n            aria-label={\n              props.request.referenceStep === undefined\n                ? undefined\n                : `${chartMessages().chartRemoveComparison}: ${stepLabel(props.request.referenceStep)}`\n            }\n            onClick={() =>\n              props.onRequest({\n                ...props.request,\n                referenceStep: props.request.referenceStep === undefined ? props.request.step : undefined,\n              })\n            }\n          >\n            <Show when={props.request.referenceStep === undefined}>\n              <i class=\"ti ti-pin\" aria-hidden=\"true\" />\n            </Show>\n            <span>\n              {props.request.referenceStep === undefined\n                ? chartMessages().chartPinReference\n                : `${chartMessages().chartReference}: ${stepLabel(props.request.referenceStep)}`}\n            </span>\n            <Show when={props.request.referenceStep !== undefined}>\n              <i class=\"ti ti-x\" aria-hidden=\"true\" />\n            </Show>\n          </Button>\n        </Show>\n        <div class=\"k2b-chart-explorer__status\" role=\"status\">\n          <Show when={props.failed}>\n            {messages().couldNotLoadData}{\" \"}\n            <Button variant=\"text\" size=\"sm\" onClick={props.onRetry}>\n              {messages().retry}\n            </Button>\n          </Show>\n          <Show when={props.failed}>\n            · {chartMessages().chartPreviousData}\n            <Show when={props.steps?.length}>: {stepLabel(props.displayedRequest.step)}</Show>\n          </Show>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/ChartSnapshotView.js

@@ -12,13 +12,13 @@ import { use as _$use } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-chart data-interactive=true role=group tabindex=0><div class=k2b-chart__svg></div><span class=k2b-chart__anchor aria-hidden=true></span><span class="k2b-chart__tooltip k2b-tooltip"role=tooltip popover=manual data-instant=true>`);
 import { createEffect, createUniqueId, onCleanup, onMount } from "solid-js";
 import { isServer } from "solid-js/web";
-import { useUiMessages } from "../intl/messages";
 import { createChartInspection, sameChartDatum } from "./chart-inspection";
+import { useChartMessages } from "./chart-messages";
 import { selectedChartSvg } from "./chart-svg";
 
 /** Internal display for server-prepared geometry. Viewports are snapshot-owned. */
 export function ChartSnapshotView(props) {
-  const messages = useUiMessages();
+  const chartMessages = useChartMessages();
   let container;
   let tooltip;
   let anchor;
@@ -81,7 +81,7 @@ export function ChartSnapshotView(props) {
     _$effect(_p$ => {
       var _v$ = props.snapshot.kind,
         _v$2 = props.style,
-        _v$3 = messages().interactiveChart,
+        _v$3 = chartMessages().interactiveChart,
         _v$4 = props.snapshot.stretch ? "true" : undefined,
         _v$5 = `${props.snapshot.width}px`,
         _v$6 = `${props.snapshot.height}px`,

package/dist/browser/content/ChartSnapshotView.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/ChartSnapshotView.tsx"],"sourcesContent":["import { createEffect, createUniqueId, type JSX, onCleanup, onMount } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ChartCursor } from \"./chart-cursor\";\nimport { createChartInspection, sameChartDatum } from \"./chart-inspection\";\nimport type { ChartSnapshot } from \"./chart-snapshot\";\nimport { selectedChartSvg } from \"./chart-svg\";\n\n/** Internal display for server-prepared geometry. Viewports are snapshot-owned. */\nexport function ChartSnapshotView(props: {\n  snapshot: ChartSnapshot;\n  cursor?: ChartCursor;\n  selectedKey: string | null;\n  onSelect: (key: string) => void;\n  style?: JSX.CSSProperties;\n}) {\n  const messages = useUiMessages();\n  let container: HTMLDivElement | undefined;\n  let tooltip: HTMLSpanElement | undefined;\n  let anchor: HTMLSpanElement | undefined;\n  const id = `k2b-chart-tooltip-${createUniqueId()}`;\n  const inspection = createChartInspection({\n    container: () => container,\n    cursor: () => props.cursor,\n    tooltip: () => tooltip,\n    anchor: () => anchor,\n    kind: () => props.snapshot.kind,\n    enabled: () => true,\n    format: ({ datum }) => props.snapshot.marks.find((m) => sameChartDatum(m.datum, datum))?.tooltip ?? { rows: [] },\n    select: ({ datum }) => {\n      const mark = props.snapshot.marks.find((m) => sameChartDatum(m.datum, datum));\n      if (mark) props.onSelect(mark.rowKey);\n    },\n  });\n  createEffect(() => {\n    props.snapshot;\n    inspection.invalidate();\n  });\n  createEffect(() => inspection.selectData(props.snapshot.marks.filter((m) => m.rowKey === props.selectedKey).map((m) => m.datum)));\n  onMount(() => {\n    const outside = (event: Event) => {\n      if (event.target instanceof Node && !container?.contains(event.target)) inspection.close();\n    };\n    window.addEventListener(\"pointerdown\", outside);\n    window.addEventListener(\"scroll\", inspection.close, true);\n    onCleanup(() => {\n      window.removeEventListener(\"pointerdown\", outside);\n      window.removeEventListener(\"scroll\", inspection.close, true);\n    });\n  });\n  onCleanup(inspection.close);\n  return (\n    <div\n      ref={container}\n      class=\"k2b-chart\"\n      data-chart-kind={props.snapshot.kind}\n      data-interactive=\"true\"\n      style={props.style}\n      role=\"group\"\n      aria-label={messages().interactiveChart}\n      tabIndex={0}\n      onPointerDown={inspection.down}\n      onPointerMove={inspection.move}\n      onClick={inspection.click}\n      onPointerLeave={inspection.leave}\n      onFocusIn={inspection.focus}\n      onFocusOut={inspection.close}\n      onKeyDown={inspection.key}\n    >\n      <div\n        class=\"k2b-chart__svg\"\n        data-stretch={props.snapshot.stretch ? \"true\" : undefined}\n        style={{\n          \"--k2b-chart-width\": `${props.snapshot.width}px`,\n          \"--k2b-chart-height\": `${props.snapshot.height}px`,\n          \"aspect-ratio\": `${props.snapshot.width}/${props.snapshot.height}`,\n        }}\n        innerHTML={\n          isServer\n            ? selectedChartSvg(\n                props.snapshot.svg,\n                props.snapshot.marks.filter((m) => m.rowKey === props.selectedKey).map((m) => m.datum),\n              )\n            : props.snapshot.svg\n        }\n      />\n      <span ref={anchor} class=\"k2b-chart__anchor\" aria-hidden=\"true\" />\n      <span ref={tooltip} id={id} class=\"k2b-chart__tooltip k2b-tooltip\" role=\"tooltip\" popover=\"manual\" data-instant=\"true\" />\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/ChartSnapshotView.tsx"],"sourcesContent":["import { createEffect, createUniqueId, type JSX, onCleanup, onMount } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport type { ChartCursor } from \"./chart-cursor\";\nimport { createChartInspection, sameChartDatum } from \"./chart-inspection\";\nimport { useChartMessages } from \"./chart-messages\";\nimport type { ChartSnapshot } from \"./chart-snapshot\";\nimport { selectedChartSvg } from \"./chart-svg\";\n\n/** Internal display for server-prepared geometry. Viewports are snapshot-owned. */\nexport function ChartSnapshotView(props: {\n  snapshot: ChartSnapshot;\n  cursor?: ChartCursor;\n  selectedKey: string | null;\n  onSelect: (key: string) => void;\n  style?: JSX.CSSProperties;\n}) {\n  const chartMessages = useChartMessages();\n  let container: HTMLDivElement | undefined;\n  let tooltip: HTMLSpanElement | undefined;\n  let anchor: HTMLSpanElement | undefined;\n  const id = `k2b-chart-tooltip-${createUniqueId()}`;\n  const inspection = createChartInspection({\n    container: () => container,\n    cursor: () => props.cursor,\n    tooltip: () => tooltip,\n    anchor: () => anchor,\n    kind: () => props.snapshot.kind,\n    enabled: () => true,\n    format: ({ datum }) => props.snapshot.marks.find((m) => sameChartDatum(m.datum, datum))?.tooltip ?? { rows: [] },\n    select: ({ datum }) => {\n      const mark = props.snapshot.marks.find((m) => sameChartDatum(m.datum, datum));\n      if (mark) props.onSelect(mark.rowKey);\n    },\n  });\n  createEffect(() => {\n    props.snapshot;\n    inspection.invalidate();\n  });\n  createEffect(() => inspection.selectData(props.snapshot.marks.filter((m) => m.rowKey === props.selectedKey).map((m) => m.datum)));\n  onMount(() => {\n    const outside = (event: Event) => {\n      if (event.target instanceof Node && !container?.contains(event.target)) inspection.close();\n    };\n    window.addEventListener(\"pointerdown\", outside);\n    window.addEventListener(\"scroll\", inspection.close, true);\n    onCleanup(() => {\n      window.removeEventListener(\"pointerdown\", outside);\n      window.removeEventListener(\"scroll\", inspection.close, true);\n    });\n  });\n  onCleanup(inspection.close);\n  return (\n    <div\n      ref={container}\n      class=\"k2b-chart\"\n      data-chart-kind={props.snapshot.kind}\n      data-interactive=\"true\"\n      style={props.style}\n      role=\"group\"\n      aria-label={chartMessages().interactiveChart}\n      tabIndex={0}\n      onPointerDown={inspection.down}\n      onPointerMove={inspection.move}\n      onClick={inspection.click}\n      onPointerLeave={inspection.leave}\n      onFocusIn={inspection.focus}\n      onFocusOut={inspection.close}\n      onKeyDown={inspection.key}\n    >\n      <div\n        class=\"k2b-chart__svg\"\n        data-stretch={props.snapshot.stretch ? \"true\" : undefined}\n        style={{\n          \"--k2b-chart-width\": `${props.snapshot.width}px`,\n          \"--k2b-chart-height\": `${props.snapshot.height}px`,\n          \"aspect-ratio\": `${props.snapshot.width}/${props.snapshot.height}`,\n        }}\n        innerHTML={\n          isServer\n            ? selectedChartSvg(\n                props.snapshot.svg,\n                props.snapshot.marks.filter((m) => m.rowKey === props.selectedKey).map((m) => m.datum),\n              )\n            : props.snapshot.svg\n        }\n      />\n      <span ref={anchor} class=\"k2b-chart__anchor\" aria-hidden=\"true\" />\n      <span ref={tooltip} id={id} class=\"k2b-chart__tooltip k2b-tooltip\" role=\"tooltip\" popover=\"manual\" data-instant=\"true\" />\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}