@k2b/ui 0.21.0 → 0.23.0

package/dist/browser/content/ChartExplorer.js

@@ -1,22 +1,26 @@
 import { template as _$template } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<div>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<span role=alert>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__details aria-live=polite>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<section><header class=k2b-chart-explorer__header><div><h3></h3><!$><!/></div><div class=k2b-chart-explorer__actions><!$><!/><!$><!/></div></header><!$><!/><div class=k2b-chart-explorer__viewport></div><!$><!/>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-chart__empty>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-chart-explorer__sort-icon aria-hidden=true>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__detail-header><span></span><!$><!/>`);
-import { createEffect, createMemo, createSignal, createUniqueId, Show } from "solid-js";
+  _tmpl$3 = /*#__PURE__*/_$template(`<ul class=k2b-chart-legend>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__details aria-live=polite>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<section><header class=k2b-chart-explorer__header><div><!$><!/><!$><!/></div><div class=k2b-chart-explorer__actions><!$><!/><!$><!/></div></header><!$><!/><!$><!/><div class=k2b-chart-explorer__viewport></div><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-chart__empty>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<p class=k2b-chart-explorer__note>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<li><span class=k2b-chart-legend__swatch aria-hidden=true></span><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__detail-header><span></span><!$><!/>`);
+import { createEffect, createMemo, createSignal, createUniqueId, For, Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import { Button, IconButton } from "../actions/Button";
 import { CopyButton } from "../actions/CopyButton";
 import { SelectChip } from "../inputs/SelectChip";
@@ -26,10 +30,18 @@ import { DescriptionList } from "../surfaces/DescriptionList";
 import { Paper } from "../surfaces/Paper";
 import { ChartSnapshotView } from "./ChartSnapshotView";
 import { validateChartExplorerData } from "./chart-explorer";
+import { useChartMessages } from "./chart-messages";
 import DataTable from "./DataTable";
-const tsvCell = value => /[\t\r\n"]/.test(value) ? `"${value.replaceAll('"', '""')}"` : value;
+
+/** One legend entry; `color` is the palette index the renderer gave the series (0 is `--stdlib-chart-c1`). */
+
+const tsvCell = (value, numeric = false) => {
+  const safe = !numeric && /^[=+\-@\t\r]/.test(value) ? `'${value}` : value;
+  return /[\t\r\n"]/.test(safe) ? `"${safe.replaceAll('"', '""')}"` : safe;
+};
 export function ChartExplorer(props) {
   const messages = useUiMessages();
+  const chartMessages = useChartMessages();
   const locale = useLocale();
   const id = `k2b-chart-explorer-${createUniqueId()}`;
   const data = () => props.data;
@@ -82,43 +94,75 @@ export function ChartExplorer(props) {
       return order.direction === "asc" ? comparison : -comparison;
     });
   });
-  const copyText = () => [props.columns.map(c => tsvCell(c.label)).join("\t"), ...rows().map(row => props.columns.map(c => tsvCell(c.value(row))).join("\t"))].join("\n");
+  const shownRows = () => props.tableRows === undefined ? rows() : rows().slice(0, props.tableRows);
+  // Chart ids are data; a prefix keeps one named "table" apart from the table entry.
+  const switcherValue = () => view() === "table" || !props.charts?.length ? view() : `chart:${props.chart ?? props.charts[0]?.id}`;
+  const switcherOptions = () => props.charts?.length ? [...props.charts.map(chart => ({
+    value: `chart:${chart.id}`,
+    label: chart.label
+  })), {
+    value: "table",
+    label: chartMessages().chartData
+  }] : [{
+    value: "chart",
+    label: chartMessages().chartDiagram
+  }, {
+    value: "table",
+    label: chartMessages().chartData
+  }];
+  const pick = value => {
+    if (value === "table" || value === "chart") return setView(value);
+    setView("chart");
+    props.onChartChange?.(value.slice("chart:".length));
+  };
+  const copyText = () => [props.columns.map(c => tsvCell(c.label)).join("\t"), ...rows().map(row => props.columns.map(c => tsvCell(c.value(row), typeof c.sortValue?.(row) === "number")).join("\t"))].join("\n");
   return (() => {
-    var _el$ = _$getNextElement(_tmpl$4),
+    var _el$ = _$getNextElement(_tmpl$5),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.firstChild,
-      _el$4 = _el$3.firstChild,
-      _el$6 = _el$4.nextSibling,
-      [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
-      _el$8 = _el$3.nextSibling,
-      _el$9 = _el$8.firstChild,
-      [_el$0, _co$2] = _$getNextMarker(_el$9.nextSibling),
-      _el$1 = _el$0.nextSibling,
-      [_el$10, _co$3] = _$getNextMarker(_el$1.nextSibling),
-      _el$14 = _el$2.nextSibling,
-      [_el$15, _co$4] = _$getNextMarker(_el$14.nextSibling),
-      _el$12 = _el$15.nextSibling,
-      _el$16 = _el$12.nextSibling,
-      [_el$17, _co$5] = _$getNextMarker(_el$16.nextSibling);
+      _el$5 = _el$3.firstChild,
+      [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
+      _el$7 = _el$6.nextSibling,
+      [_el$8, _co$2] = _$getNextMarker(_el$7.nextSibling),
+      _el$9 = _el$3.nextSibling,
+      _el$0 = _el$9.firstChild,
+      [_el$1, _co$3] = _$getNextMarker(_el$0.nextSibling),
+      _el$10 = _el$1.nextSibling,
+      [_el$11, _co$4] = _$getNextMarker(_el$10.nextSibling),
+      _el$16 = _el$2.nextSibling,
+      [_el$17, _co$5] = _$getNextMarker(_el$16.nextSibling),
+      _el$18 = _el$17.nextSibling,
+      [_el$19, _co$6] = _$getNextMarker(_el$18.nextSibling),
+      _el$13 = _el$19.nextSibling,
+      _el$20 = _el$13.nextSibling,
+      [_el$21, _co$7] = _$getNextMarker(_el$20.nextSibling);
     _$setAttribute(_el$, "aria-labelledby", id);
-    _$setAttribute(_el$4, "id", id);
-    _$insert(_el$4, () => props.title);
+    _$insert(_el$3, _$createComponent(Dynamic, {
+      get component() {
+        return `h${props.headingLevel ?? 3}`;
+      },
+      id: id,
+      "class": "k2b-chart-explorer__title",
+      get children() {
+        return props.title;
+      }
+    }), _el$6, _co$);
     _$insert(_el$3, _$createComponent(Show, {
       get when() {
         return props.description;
       },
       get children() {
-        var _el$5 = _$getNextElement(_tmpl$);
-        _$insert(_el$5, () => props.description);
-        return _el$5;
+        var _el$4 = _$getNextElement(_tmpl$);
+        _$insert(_el$4, () => props.description);
+        return _el$4;
       }
-    }), _el$7, _co$);
-    _$insert(_el$8, _$createComponent(CopyButton, {
+    }), _el$8, _co$2);
+    _$insert(_el$9, _$createComponent(CopyButton, {
       get text() {
         return copyText();
       },
       get label() {
-        return messages().chartCopyData;
+        return chartMessages().chartCopyData;
       },
       iconOnly: true,
       size: "sm",
@@ -128,44 +172,39 @@ export function ChartExplorer(props) {
       },
       onCopyError: () => setCopyFailed(true),
       onCopied: () => setCopyFailed(false)
-    }), _el$0, _co$2);
-    _$insert(_el$8, _$createComponent(SelectChip, {
+    }), _el$1, _co$3);
+    _$insert(_el$9, _$createComponent(SelectChip, {
       get value() {
-        return view();
+        return switcherValue();
       },
-      onValueChange: setView,
+      onValueChange: pick,
       get ["aria-label"]() {
-        return messages().chartView;
+        return chartMessages().chartView;
       },
       get options() {
-        return [{
-          value: "chart",
-          label: messages().chartDiagram
-        }, {
-          value: "table",
-          label: messages().chartData
-        }];
+        return switcherOptions();
       }
-    }), _el$10, _co$3);
+    }), _el$11, _co$4);
     _$insert(_el$, _$createComponent(Show, {
       get when() {
         return copyFailed();
       },
       get children() {
-        var _el$11 = _$getNextElement(_tmpl$2);
-        _$insert(_el$11, () => messages().chartCopyFailed);
-        return _el$11;
+        var _el$12 = _$getNextElement(_tmpl$2);
+        _$insert(_el$12, () => chartMessages().chartCopyFailed);
+        return _el$12;
       }
-    }), _el$15, _co$4);
-    _$insert(_el$12, _$createComponent(Show, {
+    }), _el$17, _co$5);
+    _$insert(_el$, () => props.controls, _el$19, _co$6);
+    _$insert(_el$13, _$createComponent(Show, {
       get when() {
         return data().rows.length > 0;
       },
       get fallback() {
         return (() => {
-          var _el$18 = _$getNextElement(_tmpl$5);
-          _$insert(_el$18, () => messages().noData);
-          return _el$18;
+          var _el$22 = _$getNextElement(_tmpl$6);
+          _$insert(_el$22, () => props.empty ?? messages().noData);
+          return _el$22;
         })();
       },
       get children() {
@@ -174,9 +213,9 @@ export function ChartExplorer(props) {
             return view() === "chart";
           },
           get fallback() {
-            return _$createComponent(DataTable, {
+            return [_$createComponent(DataTable, {
               get rows() {
-                return rows();
+                return shownRows();
               },
               get columns() {
                 return props.columns.map(column => ({
@@ -206,7 +245,7 @@ export function ChartExplorer(props) {
               }) => {
                 const custom = props.columns.find(column => column.id === col.id)?.render;
                 const cell = () => custom ? custom(row) : render(value);
-                return col.id === props.columns[0]?.id ? _$createComponent(Button, {
+                return !custom && col.id === props.columns[0]?.id ? _$createComponent(Button, {
                   variant: "text",
                   size: "sm",
                   onClick: () => select(row.key),
@@ -226,20 +265,38 @@ export function ChartExplorer(props) {
                   direction: sort()?.key === col.id && sort()?.direction === "asc" ? "desc" : "asc"
                 }),
                 get children() {
-                  return [_$memo(() => props.columns.find(column => column.id === col.id)?.label), " ", (() => {
-                    var _el$19 = _$getNextElement(_tmpl$6);
-                    _$insert(_el$19, (() => {
-                      var _c$ = _$memo(() => sort()?.key === col.id);
-                      return () => _c$() ? sort()?.direction === "asc" ? "↑" : "↓" : "↕";
-                    })());
-                    return _el$19;
+                  return [_$memo(() => props.columns.find(column => column.id === col.id)?.label), (() => {
+                    var _el$24 = _$getNextElement(_tmpl$8);
+                    _$effect(_p$ => {
+                      var _v$5 = `k2b-data-table__sort-icon ti ${sort()?.key === col.id && sort()?.direction === "asc" ? "ti-arrow-up" : "ti-arrow-down"}`,
+                        _v$6 = sort()?.key === col.id ? "true" : undefined;
+                      _v$5 !== _p$.e && _$className(_el$24, _p$.e = _v$5);
+                      _v$6 !== _p$.t && _$setAttribute(_el$24, "data-active", _p$.t = _v$6);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined
+                    });
+                    return _el$24;
                   })()];
                 }
               }) : render()
-            });
+            }), _$createComponent(Show, {
+              get when() {
+                return shownRows().length < rows().length;
+              },
+              get children() {
+                var _el$23 = _$getNextElement(_tmpl$7);
+                _$insert(_el$23, () => chartMessages().chartRowsShown({
+                  shown: new Intl.NumberFormat(locale()).format(shownRows().length),
+                  total: new Intl.NumberFormat(locale()).format(rows().length)
+                }));
+                return _el$23;
+              }
+            })];
           },
           get children() {
-            return _$createComponent(ChartSnapshotView, {
+            return [_$createComponent(ChartSnapshotView, {
               get cursor() {
                 return props.cursor;
               },
@@ -250,10 +307,47 @@ export function ChartExplorer(props) {
                 return selected();
               },
               onSelect: select,
-              style: {
-                height: "100%"
+              get style() {
+                return props.legend?.length ? undefined : {
+                  height: "100%"
+                };
+              }
+            }), _$createComponent(Show, {
+              get when() {
+                return props.legend?.length;
+              },
+              get children() {
+                var _el$14 = _$getNextElement(_tmpl$3);
+                _$insert(_el$14, _$createComponent(For, {
+                  get each() {
+                    return props.legend;
+                  },
+                  children: entry => (() => {
+                    var _el$25 = _$getNextElement(_tmpl$9),
+                      _el$26 = _el$25.firstChild,
+                      _el$27 = _el$26.nextSibling,
+                      [_el$28, _co$8] = _$getNextMarker(_el$27.nextSibling);
+                    _$insert(_el$25, () => entry.label, _el$28, _co$8);
+                    _$effect(_p$ => {
+                      var _v$7 = entry.style && entry.style !== "solid" ? entry.style : undefined,
+                        _v$8 = entry.reference ? "true" : undefined,
+                        _v$9 = `var(--stdlib-chart-c${Math.abs(Math.trunc(entry.color)) % 8 + 1})`;
+                      _v$7 !== _p$.e && _$setAttribute(_el$26, "data-style", _p$.e = _v$7);
+                      _v$8 !== _p$.t && _$setAttribute(_el$26, "data-reference", _p$.t = _v$8);
+                      _v$9 !== _p$.a && _$setStyleProperty(_el$26, "--k2b-chart-legend-color", _p$.a = _v$9);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined,
+                      a: undefined
+                    });
+                    return _el$25;
+                  })()
+                }));
+                _$effect(() => _$setAttribute(_el$14, "aria-label", chartMessages().chartLegend));
+                return _el$14;
               }
-            });
+            })];
           }
         });
       }
@@ -263,8 +357,8 @@ export function ChartExplorer(props) {
         return props.renderDetails !== false;
       },
       get children() {
-        var _el$13 = _$getNextElement(_tmpl$3);
-        _$insert(_el$13, _$createComponent(Show, {
+        var _el$15 = _$getNextElement(_tmpl$4);
+        _$insert(_el$15, _$createComponent(Show, {
           get when() {
             return selectedRow();
           },
@@ -272,12 +366,12 @@ export function ChartExplorer(props) {
             "class": "k2b-chart-explorer__detail-paper",
             get children() {
               return [(() => {
-                var _el$20 = _$getNextElement(_tmpl$8),
-                  _el$21 = _el$20.firstChild,
-                  _el$23 = _el$21.nextSibling,
-                  [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling);
-                _$insert(_el$21, () => messages().chartSelectedDatum);
-                _$insert(_el$20, _$createComponent(IconButton, {
+                var _el$29 = _$getNextElement(_tmpl$1),
+                  _el$30 = _el$29.firstChild,
+                  _el$32 = _el$30.nextSibling,
+                  [_el$33, _co$9] = _$getNextMarker(_el$32.nextSibling);
+                _$insert(_el$30, () => chartMessages().chartSelectedDatum);
+                _$insert(_el$29, _$createComponent(IconButton, {
                   variant: "text",
                   size: "sm",
                   get label() {
@@ -285,10 +379,10 @@ export function ChartExplorer(props) {
                   },
                   onClick: () => select(null),
                   get children() {
-                    return _$getNextElement(_tmpl$7);
+                    return _$getNextElement(_tmpl$0);
                   }
-                }), _el$24, _co$6);
-                return _el$20;
+                }), _el$33, _co$9);
+                return _el$29;
               })(), _$memo(() => _$memo(() => !!props.renderDetails)() ? props.renderDetails(row()) : _$createComponent(DescriptionList, {
                 columns: 3,
                 size: "sm",
@@ -302,18 +396,24 @@ export function ChartExplorer(props) {
             }
           })
         }));
-        return _el$13;
+        return _el$15;
       }
-    }), _el$17, _co$5);
+    }), _el$21, _co$7);
     _$effect(_p$ => {
       var _v$ = `k2b-chart-explorer ${props.class ?? ""}`,
-        _v$2 = props.height ?? "18rem";
+        _v$2 = view() === "chart" && props.legend?.length && data().rows.length > 0 ? "true" : undefined,
+        _v$3 = view() === "table" && shownRows().length < rows().length ? "true" : undefined,
+        _v$4 = props.height ?? "18rem";
       _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && _$setStyleProperty(_el$12, "height", _p$.t = _v$2);
+      _v$2 !== _p$.t && _$setAttribute(_el$13, "data-legend", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$13, "data-capped", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setStyleProperty(_el$13, "height", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined,
+      o: undefined
     });
     return _el$;
   })();

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/ChartExplorer.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, createUniqueId, type JSX, Show } from \"solid-js\";\nimport { Button, IconButton } from \"../actions/Button\";\nimport { CopyButton } from \"../actions/CopyButton\";\nimport { SelectChip } from \"../inputs/SelectChip\";\nimport { useLocale } from \"../intl/locale\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { DescriptionList } from \"../surfaces/DescriptionList\";\nimport { Paper } from \"../surfaces/Paper\";\nimport { ChartSnapshotView } from \"./ChartSnapshotView\";\nimport type { ChartCursor } from \"./chart-cursor\";\nimport { type ChartExplorerData, type ChartExplorerRow, validateChartExplorerData } from \"./chart-explorer\";\nimport DataTable, { type DataTableSort } from \"./DataTable\";\n\nexport type ChartExplorerColumn<T> = {\n  id: string;\n  label: string;\n  value: (row: T) => string;\n  /** Optional table cell presentation; value remains the plain text used for copy/details. */\n  render?: (row: T) => JSX.Element;\n  /** Explicit comparable value. Omit to leave the column unsortable. */\n  sortValue?: (row: T) => string | number | null;\n  align?: \"left\" | \"center\" | \"right\";\n};\nexport type ChartExplorerProps<T extends ChartExplorerRow> = {\n  cursor?: ChartCursor;\n  title: string;\n  description?: JSX.Element;\n  data: ChartExplorerData<T>;\n  columns: readonly ChartExplorerColumn<T>[];\n  view?: \"chart\" | \"table\";\n  defaultView?: \"chart\" | \"table\";\n  onViewChange?: (view: \"chart\" | \"table\") => void;\n  sort?: DataTableSort | null;\n  defaultSort?: DataTableSort | null;\n  onSortChange?: (sort: DataTableSort | null) => void;\n  selectedKey?: string | null;\n  onSelectedKeyChange?: (key: string | null) => void;\n  /** false hides the complete local detail area for a shared selection panel. */\n  renderDetails?: false | ((row: T) => JSX.Element);\n  height?: string;\n  class?: string;\n};\n\nconst tsvCell = (value: string) => (/[\\t\\r\\n\"]/.test(value) ? `\"${value.replaceAll('\"', '\"\"')}\"` : value);\n\nexport function ChartExplorer<T extends ChartExplorerRow>(props: ChartExplorerProps<T>) {\n  const messages = useUiMessages();\n  const locale = useLocale();\n  const id = `k2b-chart-explorer-${createUniqueId()}`;\n  const data = () => props.data;\n  const [copyFailed, setCopyFailed] = createSignal(false);\n  const [localSelection, setLocalSelection] = createSignal<string | null>(null);\n  const [localView, setLocalView] = createSignal(props.defaultView ?? \"chart\");\n  const [localSort, setLocalSort] = createSignal<DataTableSort | null>(props.defaultSort ?? null);\n  const view = () => props.view ?? localView();\n  const sort = () => (props.sort === undefined ? localSort() : props.sort);\n  const setView = (value: \"chart\" | \"table\") => {\n    if (props.view === undefined) setLocalView(value);\n    props.onViewChange?.(value);\n  };\n  const setSort = (value: DataTableSort | null) => {\n    if (props.sort === undefined) setLocalSort(value);\n    props.onSortChange?.(value);\n  };\n  const rowsByKey = createMemo(() => new Map(data().rows.map((row) => [row.key, row])));\n  const rawSelected = () => (props.selectedKey !== undefined ? props.selectedKey : localSelection());\n  const selected = () => (rowsByKey().has(rawSelected() ?? \"\") ? rawSelected() : null);\n  const selectedRow = () => rowsByKey().get(selected() ?? \"\");\n  const select = (key: string | null) => {\n    if (key !== null && !rowsByKey().has(key)) return;\n    setLocalSelection(key);\n    props.onSelectedKeyChange?.(key);\n  };\n  if (\n    !props.columns.length ||\n    props.columns.some((column) => !column.id) ||\n    new Set(props.columns.map((column) => column.id)).size !== props.columns.length\n  ) {\n    throw new Error(\"Chart columns require unique nonempty IDs and at least one column\");\n  }\n  validateChartExplorerData(data());\n  createEffect(() => validateChartExplorerData(data()));\n  createEffect(() => {\n    if (props.selectedKey === undefined && rawSelected() !== null && selected() === null) select(null);\n  });\n  const rows = createMemo(() => {\n    const result = [...data().rows];\n    const order = sort();\n    const column = props.columns.find((c) => c.id === order?.key);\n    const value = column?.sortValue;\n    if (!order || !value) return result;\n    const collator = new Intl.Collator(locale(), { numeric: true });\n    return result.sort((a, b) => {\n      const av = value(a),\n        bv = value(b);\n      if (av === null) return bv === null ? 0 : 1;\n      if (bv === null) return -1;\n      const comparison = typeof av === \"number\" && typeof bv === \"number\" ? av - bv : collator.compare(String(av), String(bv));\n      return order.direction === \"asc\" ? comparison : -comparison;\n    });\n  });\n  const copyText = () =>\n    [\n      props.columns.map((c) => tsvCell(c.label)).join(\"\\t\"),\n      ...rows().map((row) => props.columns.map((c) => tsvCell(c.value(row))).join(\"\\t\")),\n    ].join(\"\\n\");\n  return (\n    <section class={`k2b-chart-explorer ${props.class ?? \"\"}`} aria-labelledby={id}>\n      <header class=\"k2b-chart-explorer__header\">\n        <div>\n          <h3 id={id}>{props.title}</h3>\n          <Show when={props.description}>\n            <div>{props.description}</div>\n          </Show>\n        </div>\n        <div class=\"k2b-chart-explorer__actions\">\n          <CopyButton\n            text={copyText()}\n            label={messages().chartCopyData}\n            iconOnly\n            size=\"sm\"\n            variant=\"ghost\"\n            disabled={!rows().length}\n            onCopyError={() => setCopyFailed(true)}\n            onCopied={() => setCopyFailed(false)}\n          />\n          <SelectChip<\"chart\" | \"table\">\n            value={view()}\n            onValueChange={setView}\n            aria-label={messages().chartView}\n            options={[\n              { value: \"chart\", label: messages().chartDiagram },\n              { value: \"table\", label: messages().chartData },\n            ]}\n          />\n        </div>\n      </header>\n      <Show when={copyFailed()}>\n        <span role=\"alert\">{messages().chartCopyFailed}</span>\n      </Show>\n      <div class=\"k2b-chart-explorer__viewport\" style={{ height: props.height ?? \"18rem\" }}>\n        <Show when={data().rows.length > 0} fallback={<div class=\"k2b-chart__empty\">{messages().noData}</div>}>\n          <Show\n            when={view() === \"chart\"}\n            fallback={\n              <DataTable\n                rows={rows()}\n                columns={props.columns.map((column) => ({\n                  id: column.id,\n                  header: column.label,\n                  value: column.value,\n                  align: column.align,\n                  sortable: Boolean(column.sortValue),\n                }))}\n                ariaLabelledBy={id}\n                getRowId={(row) => row.key}\n                selectedRowId={selected()}\n                sort={sort()}\n                fillHeight\n                surface=\"paper\"\n                onRowClick={(row) => select(row.key)}\n                renderCell={({ row, col, value, render }) => {\n                  const custom = props.columns.find((column) => column.id === col.id)?.render;\n                  const cell = () => (custom ? custom(row) : render(value));\n                  return col.id === props.columns[0]?.id ? (\n                    <Button variant=\"text\" size=\"sm\" onClick={() => select(row.key)}>\n                      {cell()}\n                    </Button>\n                  ) : (\n                    cell()\n                  );\n                }}\n                renderHeader={({ col, render }) =>\n                  col.sortable ? (\n                    <Button\n                      variant=\"text\"\n                      size=\"sm\"\n                      onClick={() =>\n                        setSort({\n                          key: col.id,\n                          direction: sort()?.key === col.id && sort()?.direction === \"asc\" ? \"desc\" : \"asc\",\n                        })\n                      }\n                    >\n                      {props.columns.find((column) => column.id === col.id)?.label}{\" \"}\n                      <span class=\"k2b-chart-explorer__sort-icon\" aria-hidden=\"true\">\n                        {sort()?.key === col.id ? (sort()?.direction === \"asc\" ? \"↑\" : \"↓\") : \"↕\"}\n                      </span>\n                    </Button>\n                  ) : (\n                    render()\n                  )\n                }\n              />\n            }\n          >\n            <ChartSnapshotView\n              cursor={props.cursor}\n              snapshot={data().chart}\n              selectedKey={selected()}\n              onSelect={select}\n              style={{ height: \"100%\" }}\n            />\n          </Show>\n        </Show>\n      </div>\n      <Show when={props.renderDetails !== false}>\n        <div class=\"k2b-chart-explorer__details\" aria-live=\"polite\">\n          <Show when={selectedRow()}>\n            {(row) => (\n              <Paper class=\"k2b-chart-explorer__detail-paper\">\n                <div class=\"k2b-chart-explorer__detail-header\">\n                  <span>{messages().chartSelectedDatum}</span>\n                  <IconButton variant=\"text\" size=\"sm\" label={messages().clearSelection} onClick={() => select(null)}>\n                    <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                  </IconButton>\n                </div>\n                {props.renderDetails ? (\n                  props.renderDetails(row())\n                ) : (\n                  <DescriptionList\n                    columns={3}\n                    size=\"sm\"\n                    items={props.columns.map((column) => ({\n                      term: column.label,\n                      description: column.value(row()),\n                    }))}\n                  />\n                )}\n              </Paper>\n            )}\n          </Show>\n        </div>\n      </Show>\n    </section>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/ChartExplorer.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, createUniqueId, For, type JSX, Show } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Button, IconButton } from \"../actions/Button\";\nimport { CopyButton } from \"../actions/CopyButton\";\nimport { SelectChip } from \"../inputs/SelectChip\";\nimport { useLocale } from \"../intl/locale\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { DescriptionList } from \"../surfaces/DescriptionList\";\nimport { Paper } from \"../surfaces/Paper\";\nimport { ChartSnapshotView } from \"./ChartSnapshotView\";\nimport type { ChartCursor } from \"./chart-cursor\";\nimport { type ChartExplorerData, type ChartExplorerRow, validateChartExplorerData } from \"./chart-explorer\";\nimport { useChartMessages } from \"./chart-messages\";\nimport DataTable, { type DataTableSort } from \"./DataTable\";\n\nexport type ChartExplorerColumn<T> = {\n  id: string;\n  label: string;\n  value: (row: T) => string;\n  /** Optional table cell presentation; value remains the plain text used for copy/details. */\n  render?: (row: T) => JSX.Element;\n  /**\n   * Explicit comparable value. Omit to leave the column unsortable.\n   * Returning a number also exempts the cell from spreadsheet formula guarding on copy.\n   */\n  sortValue?: (row: T) => string | number | null;\n  align?: \"left\" | \"center\" | \"right\";\n};\n/** One legend entry; `color` is the palette index the renderer gave the series (0 is `--stdlib-chart-c1`). */\nexport type ChartLegendEntry = {\n  label: string;\n  color: number;\n  /** Line pattern of a line series; a solid series shows a filled swatch. */\n  style?: \"solid\" | \"dashed\" | \"dotted\";\n  /** A comparison series, drawn hollow like its marks. */\n  reference?: boolean;\n};\nexport type ChartExplorerProps<T extends ChartExplorerRow> = {\n  cursor?: ChartCursor;\n  title: string;\n  /** Level of the title heading. Defaults to 3; a chart inside a titled group of charts sits one level below it. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  description?: JSX.Element;\n  data: ChartExplorerData<T>;\n  columns: readonly ChartExplorerColumn<T>[];\n  view?: \"chart\" | \"table\";\n  defaultView?: \"chart\" | \"table\";\n  onViewChange?: (view: \"chart\" | \"table\") => void;\n  /**\n   * Several charts of the same rows. The switcher then lists each chart and the table; `chart` names the one `data`\n   * holds, and `onChartChange` reports a pick, so the owner passes the matching data.\n   */\n  charts?: readonly { id: string; label: string }[];\n  chart?: string;\n  onChartChange?: (id: string) => void;\n  /** Filter controls between the header and the viewport, such as ChartFilterControls. */\n  controls?: JSX.Element;\n  /** The table renders at most this many rows of the sorted order; sorting and Copy data use every row. */\n  tableRows?: number;\n  sort?: DataTableSort | null;\n  defaultSort?: DataTableSort | null;\n  onSortChange?: (sort: DataTableSort | null) => void;\n  selectedKey?: string | null;\n  onSelectedKeyChange?: (key: string | null) => void;\n  /** false hides the complete local detail area for a shared selection panel. */\n  renderDetails?: false | ((row: T) => JSX.Element);\n  height?: string;\n  /**\n   * Series names below the chart, wrapping inside the fixed viewport height. Use it instead of the renderer's legend,\n   * which draws in one row and runs out of narrow columns.\n   */\n  legend?: readonly ChartLegendEntry[];\n  /** What the viewport shows without rows, for example while they load; defaults to \"No data\". */\n  empty?: JSX.Element;\n  class?: string;\n};\n\nconst tsvCell = (value: string, numeric = false) => {\n  const safe = !numeric && /^[=+\\-@\\t\\r]/.test(value) ? `'${value}` : value;\n  return /[\\t\\r\\n\"]/.test(safe) ? `\"${safe.replaceAll('\"', '\"\"')}\"` : safe;\n};\n\nexport function ChartExplorer<T extends ChartExplorerRow>(props: ChartExplorerProps<T>) {\n  const messages = useUiMessages();\n  const chartMessages = useChartMessages();\n  const locale = useLocale();\n  const id = `k2b-chart-explorer-${createUniqueId()}`;\n  const data = () => props.data;\n  const [copyFailed, setCopyFailed] = createSignal(false);\n  const [localSelection, setLocalSelection] = createSignal<string | null>(null);\n  const [localView, setLocalView] = createSignal(props.defaultView ?? \"chart\");\n  const [localSort, setLocalSort] = createSignal<DataTableSort | null>(props.defaultSort ?? null);\n  const view = () => props.view ?? localView();\n  const sort = () => (props.sort === undefined ? localSort() : props.sort);\n  const setView = (value: \"chart\" | \"table\") => {\n    if (props.view === undefined) setLocalView(value);\n    props.onViewChange?.(value);\n  };\n  const setSort = (value: DataTableSort | null) => {\n    if (props.sort === undefined) setLocalSort(value);\n    props.onSortChange?.(value);\n  };\n  const rowsByKey = createMemo(() => new Map(data().rows.map((row) => [row.key, row])));\n  const rawSelected = () => (props.selectedKey !== undefined ? props.selectedKey : localSelection());\n  const selected = () => (rowsByKey().has(rawSelected() ?? \"\") ? rawSelected() : null);\n  const selectedRow = () => rowsByKey().get(selected() ?? \"\");\n  const select = (key: string | null) => {\n    if (key !== null && !rowsByKey().has(key)) return;\n    setLocalSelection(key);\n    props.onSelectedKeyChange?.(key);\n  };\n  if (\n    !props.columns.length ||\n    props.columns.some((column) => !column.id) ||\n    new Set(props.columns.map((column) => column.id)).size !== props.columns.length\n  ) {\n    throw new Error(\"Chart columns require unique nonempty IDs and at least one column\");\n  }\n  validateChartExplorerData(data());\n  createEffect(() => validateChartExplorerData(data()));\n  createEffect(() => {\n    if (props.selectedKey === undefined && rawSelected() !== null && selected() === null) select(null);\n  });\n  const rows = createMemo(() => {\n    const result = [...data().rows];\n    const order = sort();\n    const column = props.columns.find((c) => c.id === order?.key);\n    const value = column?.sortValue;\n    if (!order || !value) return result;\n    const collator = new Intl.Collator(locale(), { numeric: true });\n    return result.sort((a, b) => {\n      const av = value(a),\n        bv = value(b);\n      if (av === null) return bv === null ? 0 : 1;\n      if (bv === null) return -1;\n      const comparison = typeof av === \"number\" && typeof bv === \"number\" ? av - bv : collator.compare(String(av), String(bv));\n      return order.direction === \"asc\" ? comparison : -comparison;\n    });\n  });\n  const shownRows = () => (props.tableRows === undefined ? rows() : rows().slice(0, props.tableRows));\n  // Chart ids are data; a prefix keeps one named \"table\" apart from the table entry.\n  const switcherValue = () => (view() === \"table\" || !props.charts?.length ? view() : `chart:${props.chart ?? props.charts[0]?.id}`);\n  const switcherOptions = () =>\n    props.charts?.length\n      ? [\n          ...props.charts.map((chart) => ({ value: `chart:${chart.id}`, label: chart.label })),\n          { value: \"table\", label: chartMessages().chartData },\n        ]\n      : [\n          { value: \"chart\", label: chartMessages().chartDiagram },\n          { value: \"table\", label: chartMessages().chartData },\n        ];\n  const pick = (value: string) => {\n    if (value === \"table\" || value === \"chart\") return setView(value);\n    setView(\"chart\");\n    props.onChartChange?.(value.slice(\"chart:\".length));\n  };\n  const copyText = () =>\n    [\n      props.columns.map((c) => tsvCell(c.label)).join(\"\\t\"),\n      ...rows().map((row) => props.columns.map((c) => tsvCell(c.value(row), typeof c.sortValue?.(row) === \"number\")).join(\"\\t\")),\n    ].join(\"\\n\");\n  return (\n    <section class={`k2b-chart-explorer ${props.class ?? \"\"}`} aria-labelledby={id}>\n      <header class=\"k2b-chart-explorer__header\">\n        <div>\n          <Dynamic component={`h${props.headingLevel ?? 3}`} id={id} class=\"k2b-chart-explorer__title\">\n            {props.title}\n          </Dynamic>\n          <Show when={props.description}>\n            <div>{props.description}</div>\n          </Show>\n        </div>\n        <div class=\"k2b-chart-explorer__actions\">\n          <CopyButton\n            text={copyText()}\n            label={chartMessages().chartCopyData}\n            iconOnly\n            size=\"sm\"\n            variant=\"ghost\"\n            disabled={!rows().length}\n            onCopyError={() => setCopyFailed(true)}\n            onCopied={() => setCopyFailed(false)}\n          />\n          <SelectChip<string>\n            value={switcherValue()}\n            onValueChange={pick}\n            aria-label={chartMessages().chartView}\n            options={switcherOptions()}\n          />\n        </div>\n      </header>\n      <Show when={copyFailed()}>\n        <span role=\"alert\">{chartMessages().chartCopyFailed}</span>\n      </Show>\n      {props.controls}\n      <div\n        class=\"k2b-chart-explorer__viewport\"\n        data-legend={view() === \"chart\" && props.legend?.length && data().rows.length > 0 ? \"true\" : undefined}\n        data-capped={view() === \"table\" && shownRows().length < rows().length ? \"true\" : undefined}\n        style={{ height: props.height ?? \"18rem\" }}\n      >\n        <Show when={data().rows.length > 0} fallback={<div class=\"k2b-chart__empty\">{props.empty ?? messages().noData}</div>}>\n          <Show\n            when={view() === \"chart\"}\n            fallback={\n              <>\n                <DataTable\n                  rows={shownRows()}\n                  columns={props.columns.map((column) => ({\n                    id: column.id,\n                    header: column.label,\n                    value: column.value,\n                    align: column.align,\n                    sortable: Boolean(column.sortValue),\n                  }))}\n                  ariaLabelledBy={id}\n                  getRowId={(row) => row.key}\n                  selectedRowId={selected()}\n                  sort={sort()}\n                  fillHeight\n                  surface=\"paper\"\n                  onRowClick={(row) => select(row.key)}\n                  renderCell={({ row, col, value, render }) => {\n                    const custom = props.columns.find((column) => column.id === col.id)?.render;\n                    const cell = () => (custom ? custom(row) : render(value));\n                    return !custom && col.id === props.columns[0]?.id ? (\n                      <Button variant=\"text\" size=\"sm\" onClick={() => select(row.key)}>\n                        {cell()}\n                      </Button>\n                    ) : (\n                      cell()\n                    );\n                  }}\n                  renderHeader={({ col, render }) =>\n                    col.sortable ? (\n                      <Button\n                        variant=\"text\"\n                        size=\"sm\"\n                        onClick={() =>\n                          setSort({\n                            key: col.id,\n                            direction: sort()?.key === col.id && sort()?.direction === \"asc\" ? \"desc\" : \"asc\",\n                          })\n                        }\n                      >\n                        {props.columns.find((column) => column.id === col.id)?.label}\n                        {/* The data table's own marker: inactive columns keep a dimmed arrow so the header reads as sortable. */}\n                        <i\n                          class={`k2b-data-table__sort-icon ti ${sort()?.key === col.id && sort()?.direction === \"asc\" ? \"ti-arrow-up\" : \"ti-arrow-down\"}`}\n                          data-active={sort()?.key === col.id ? \"true\" : undefined}\n                          aria-hidden=\"true\"\n                        />\n                      </Button>\n                    ) : (\n                      render()\n                    )\n                  }\n                />\n                <Show when={shownRows().length < rows().length}>\n                  <p class=\"k2b-chart-explorer__note\">\n                    {chartMessages().chartRowsShown({\n                      shown: new Intl.NumberFormat(locale()).format(shownRows().length),\n                      total: new Intl.NumberFormat(locale()).format(rows().length),\n                    })}\n                  </p>\n                </Show>\n              </>\n            }\n          >\n            <ChartSnapshotView\n              cursor={props.cursor}\n              snapshot={data().chart}\n              selectedKey={selected()}\n              onSelect={select}\n              style={props.legend?.length ? undefined : { height: \"100%\" }}\n            />\n            <Show when={props.legend?.length}>\n              <ul class=\"k2b-chart-legend\" aria-label={chartMessages().chartLegend}>\n                <For each={props.legend}>\n                  {(entry) => (\n                    <li>\n                      <span\n                        class=\"k2b-chart-legend__swatch\"\n                        data-style={entry.style && entry.style !== \"solid\" ? entry.style : undefined}\n                        data-reference={entry.reference ? \"true\" : undefined}\n                        style={{ \"--k2b-chart-legend-color\": `var(--stdlib-chart-c${(Math.abs(Math.trunc(entry.color)) % 8) + 1})` }}\n                        aria-hidden=\"true\"\n                      />\n                      {entry.label}\n                    </li>\n                  )}\n                </For>\n              </ul>\n            </Show>\n          </Show>\n        </Show>\n      </div>\n      <Show when={props.renderDetails !== false}>\n        <div class=\"k2b-chart-explorer__details\" aria-live=\"polite\">\n          <Show when={selectedRow()}>\n            {(row) => (\n              <Paper class=\"k2b-chart-explorer__detail-paper\">\n                <div class=\"k2b-chart-explorer__detail-header\">\n                  <span>{chartMessages().chartSelectedDatum}</span>\n                  <IconButton variant=\"text\" size=\"sm\" label={messages().clearSelection} onClick={() => select(null)}>\n                    <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                  </IconButton>\n                </div>\n                {props.renderDetails ? (\n                  props.renderDetails(row())\n                ) : (\n                  <DescriptionList\n                    columns={3}\n                    size=\"sm\"\n                    items={props.columns.map((column) => ({\n                      term: column.label,\n                      description: column.value(row()),\n                    }))}\n                  />\n                )}\n              </Paper>\n            )}\n          </Show>\n        </div>\n      </Show>\n    </section>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/ChartExplorerControls.js

@@ -19,8 +19,10 @@ import { useUiMessages } from "../intl/messages";
 import { Paper } from "../surfaces/Paper";
 import { StatusBadge } from "../surfaces/StatusBadge";
 import { ChartFilterControls } from "./ChartFilterControls";
+import { useChartMessages } from "./chart-messages";
 export function ChartExplorerControls(props) {
   const messages = useUiMessages();
+  const chartMessages = useChartMessages();
   const label = key => props.steps?.find(step => step.key === key)?.label ?? key ?? "";
   return _$createComponent(Paper, {
     "class": "k2b-chart-group-controls",
@@ -49,7 +51,7 @@ export function ChartExplorerControls(props) {
                 _el$11 = _el$8.nextSibling,
                 [_el$12, _co$3] = _$getNextMarker(_el$11.nextSibling);
               _$insert(_el$6, () => messages().loading, _el$0, _co$);
-              _$insert(_el$6, () => messages().chartPreviousData, _el$10, _co$2);
+              _$insert(_el$6, () => chartMessages().chartPreviousData, _el$10, _co$2);
               _$insert(_el$6, () => label(props.explorer.snapshot().request.step), _el$12, _co$3);
               return _el$6;
             })()];
@@ -69,10 +71,10 @@ export function ChartExplorerControls(props) {
                 variant: "secondary",
                 onClick: () => void props.explorer.clearReference(),
                 get ["aria-label"]() {
-                  return `${messages().chartRemoveComparison}: ${label(reference())}`;
+                  return `${chartMessages().chartRemoveComparison}: ${label(reference())}`;
                 },
                 get children() {
-                  return [_$memo(() => messages().chartReference), ": ", _$memo(() => label(reference())), " ", _$getNextElement(_tmpl$4)];
+                  return [_$memo(() => chartMessages().chartReference), ": ", _$memo(() => label(reference())), " ", _$getNextElement(_tmpl$4)];
                 }
               })
             }), _$createComponent(Button, {
@@ -83,14 +85,14 @@ export function ChartExplorerControls(props) {
               },
               onClick: () => void props.explorer.pinReference(),
               get children() {
-                return messages().chartPinReference;
+                return chartMessages().chartPinReference;
               }
             })];
           }
         }), _el$14, _co$4);
         _$effect(_p$ => {
           var _v$ = props.explorer.loading() || undefined,
-            _v$2 = props.explorer.loading() ? `${messages().loading} · ${messages().chartPreviousData}: ${label(props.explorer.snapshot().request.step)}` : undefined;
+            _v$2 = props.explorer.loading() ? `${messages().loading} · ${chartMessages().chartPreviousData}: ${label(props.explorer.snapshot().request.step)}` : undefined;
           _v$ !== _p$.e && _$setAttribute(_el$4, "data-loading", _p$.e = _v$);
           _v$2 !== _p$.t && _$setAttribute(_el$4, "title", _p$.t = _v$2);
           return _p$;
@@ -134,14 +136,14 @@ export function ChartExplorerControls(props) {
             tone: "neutral",
             icon: null,
             get label() {
-              return [_$getNextElement(_tmpl$6), " ", _$memo(() => messages().chartCurrent), ": ", _$memo(() => label(props.explorer.snapshot().request.step))];
+              return [_$getNextElement(_tmpl$6), " ", _$memo(() => chartMessages().chartCurrent), ": ", _$memo(() => label(props.explorer.snapshot().request.step))];
             }
           }), _el$18, _co$5);
           _$insert(_el$16, _$createComponent(StatusBadge, {
             tone: "neutral",
             icon: null,
             get label() {
-              return [_$getNextElement(_tmpl$7), " ", _$memo(() => messages().chartReference), ": ", _$memo(() => label(reference()))];
+              return [_$getNextElement(_tmpl$7), " ", _$memo(() => chartMessages().chartReference), ": ", _$memo(() => label(reference()))];
             }
           }), _el$20, _co$6);
           return _el$16;

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/ChartExplorerControls.tsx"],"sourcesContent":["import { Show } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Paper } from \"../surfaces/Paper\";\nimport { StatusBadge } from \"../surfaces/StatusBadge\";\nimport { ChartFilterControls, type ChartFilterControlsProps } from \"./ChartFilterControls\";\nimport type { ChartExplorerCharts, ChartExplorerController } from \"./chart-explorer\";\n\nexport type ChartExplorerControlsProps<C extends ChartExplorerCharts> = {\n  explorer: ChartExplorerController<C>;\n  title: string;\n  steps?: ChartFilterControlsProps[\"steps\"];\n  series?: ChartFilterControlsProps[\"series\"];\n  dimensionLabel?: string;\n};\n\nexport function ChartExplorerControls<C extends ChartExplorerCharts>(props: ChartExplorerControlsProps<C>) {\n  const messages = useUiMessages();\n  const label = (key: string | undefined) => props.steps?.find((step) => step.key === key)?.label ?? key ?? \"\";\n  return (\n    <Paper class=\"k2b-chart-group-controls\">\n      <div class=\"k2b-chart-explorer__header\">\n        <strong>{props.title}</strong>\n        <div class=\"k2b-chart-explorer__actions\">\n          <span\n            class=\"k2b-chart-group-controls__loading\"\n            data-loading={props.explorer.loading() || undefined}\n            role=\"status\"\n            title={\n              props.explorer.loading()\n                ? `${messages().loading} · ${messages().chartPreviousData}: ${label(props.explorer.snapshot().request.step)}`\n                : undefined\n            }\n          >\n            <Show when={props.explorer.loading()}>\n              <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n              <span class=\"k2b-sr-only\">\n                {messages().loading} · {messages().chartPreviousData}: {label(props.explorer.snapshot().request.step)}\n              </span>\n            </Show>\n          </span>\n          <Show when={props.steps?.length && props.explorer.snapshot().request.step !== undefined}>\n            <Show when={props.explorer.desired().referenceStep}>\n              {(reference) => (\n                <Button\n                  size=\"sm\"\n                  variant=\"secondary\"\n                  onClick={() => void props.explorer.clearReference()}\n                  aria-label={`${messages().chartRemoveComparison}: ${label(reference())}`}\n                >\n                  {messages().chartReference}: {label(reference())} <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                </Button>\n              )}\n            </Show>\n            <Button\n              size=\"sm\"\n              variant=\"secondary\"\n              disabled={\n                props.explorer.loading() ||\n                props.explorer.error() !== null ||\n                props.explorer.desired().referenceStep === props.explorer.snapshot().request.step\n              }\n              onClick={() => void props.explorer.pinReference()}\n            >\n              {messages().chartPinReference}\n            </Button>\n          </Show>\n        </div>\n      </div>\n      <ChartFilterControls\n        request={props.explorer.desired()}\n        displayedRequest={props.explorer.snapshot().request}\n        steps={props.steps}\n        series={props.series}\n        dimensionLabel={props.dimensionLabel}\n        failed={props.explorer.error() !== null}\n        onRequest={(request) => void props.explorer.setRequest(request)}\n        onRetry={() => void props.explorer.retry()}\n      />\n      <Show when={props.explorer.snapshot().request.referenceStep}>\n        {(reference) => (\n          <div class=\"k2b-chart-explorer__actions\" aria-live=\"polite\">\n            <StatusBadge\n              tone=\"neutral\"\n              icon={null}\n              label={\n                <>\n                  <span aria-hidden=\"true\">●</span> {messages().chartCurrent}: {label(props.explorer.snapshot().request.step)}\n                </>\n              }\n            />\n            <StatusBadge\n              tone=\"neutral\"\n              icon={null}\n              label={\n                <>\n                  <span aria-hidden=\"true\">○</span> {messages().chartReference}: {label(reference())}\n                </>\n              }\n            />\n          </div>\n        )}\n      </Show>\n    </Paper>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/ChartExplorerControls.tsx"],"sourcesContent":["import { Show } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Paper } from \"../surfaces/Paper\";\nimport { StatusBadge } from \"../surfaces/StatusBadge\";\nimport { ChartFilterControls, type ChartFilterControlsProps } from \"./ChartFilterControls\";\nimport type { ChartExplorerCharts, ChartExplorerController } from \"./chart-explorer\";\nimport { useChartMessages } from \"./chart-messages\";\n\nexport type ChartExplorerControlsProps<C extends ChartExplorerCharts> = {\n  explorer: ChartExplorerController<C>;\n  title: string;\n  steps?: ChartFilterControlsProps[\"steps\"];\n  series?: ChartFilterControlsProps[\"series\"];\n  dimensionLabel?: string;\n};\n\nexport function ChartExplorerControls<C extends ChartExplorerCharts>(props: ChartExplorerControlsProps<C>) {\n  const messages = useUiMessages();\n  const chartMessages = useChartMessages();\n  const label = (key: string | undefined) => props.steps?.find((step) => step.key === key)?.label ?? key ?? \"\";\n  return (\n    <Paper class=\"k2b-chart-group-controls\">\n      <div class=\"k2b-chart-explorer__header\">\n        <strong>{props.title}</strong>\n        <div class=\"k2b-chart-explorer__actions\">\n          <span\n            class=\"k2b-chart-group-controls__loading\"\n            data-loading={props.explorer.loading() || undefined}\n            role=\"status\"\n            title={\n              props.explorer.loading()\n                ? `${messages().loading} · ${chartMessages().chartPreviousData}: ${label(props.explorer.snapshot().request.step)}`\n                : undefined\n            }\n          >\n            <Show when={props.explorer.loading()}>\n              <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n              <span class=\"k2b-sr-only\">\n                {messages().loading} · {chartMessages().chartPreviousData}: {label(props.explorer.snapshot().request.step)}\n              </span>\n            </Show>\n          </span>\n          <Show when={props.steps?.length && props.explorer.snapshot().request.step !== undefined}>\n            <Show when={props.explorer.desired().referenceStep}>\n              {(reference) => (\n                <Button\n                  size=\"sm\"\n                  variant=\"secondary\"\n                  onClick={() => void props.explorer.clearReference()}\n                  aria-label={`${chartMessages().chartRemoveComparison}: ${label(reference())}`}\n                >\n                  {chartMessages().chartReference}: {label(reference())} <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                </Button>\n              )}\n            </Show>\n            <Button\n              size=\"sm\"\n              variant=\"secondary\"\n              disabled={\n                props.explorer.loading() ||\n                props.explorer.error() !== null ||\n                props.explorer.desired().referenceStep === props.explorer.snapshot().request.step\n              }\n              onClick={() => void props.explorer.pinReference()}\n            >\n              {chartMessages().chartPinReference}\n            </Button>\n          </Show>\n        </div>\n      </div>\n      <ChartFilterControls\n        request={props.explorer.desired()}\n        displayedRequest={props.explorer.snapshot().request}\n        steps={props.steps}\n        series={props.series}\n        dimensionLabel={props.dimensionLabel}\n        failed={props.explorer.error() !== null}\n        onRequest={(request) => void props.explorer.setRequest(request)}\n        onRetry={() => void props.explorer.retry()}\n      />\n      <Show when={props.explorer.snapshot().request.referenceStep}>\n        {(reference) => (\n          <div class=\"k2b-chart-explorer__actions\" aria-live=\"polite\">\n            <StatusBadge\n              tone=\"neutral\"\n              icon={null}\n              label={\n                <>\n                  <span aria-hidden=\"true\">●</span> {chartMessages().chartCurrent}: {label(props.explorer.snapshot().request.step)}\n                </>\n              }\n            />\n            <StatusBadge\n              tone=\"neutral\"\n              icon={null}\n              label={\n                <>\n                  <span aria-hidden=\"true\">○</span> {chartMessages().chartReference}: {label(reference())}\n                </>\n              }\n            />\n          </div>\n        )}\n      </Show>\n    </Paper>\n  );\n}\n"],"mappings":"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","ignoreList":[]}