@k2b/ui 0.2.0 → 0.4.0

package/dist/ssr/content/ChartExplorerControls.js

@@ -0,0 +1,105 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
+  _tmpl$2 = ["<span class=\"k2b-sr-only\">", " \xB7 ", ": ", "</span>"],
+  _tmpl$3 = ["<div class=\"k2b-chart-explorer__header\"><strong>", "</strong><div class=\"k2b-chart-explorer__actions\"><span class=\"k2b-chart-group-controls__loading\"", " role=\"status\"", ">", "</span>", "</div></div>"],
+  _tmpl$4 = "<i class=\"ti ti-x\" aria-hidden=\"true\"></i>",
+  _tmpl$5 = ["<div class=\"k2b-chart-explorer__actions\" aria-live=\"polite\">", "", "</div>"],
+  _tmpl$6 = "<span aria-hidden=\"true\">\u25CF</span>",
+  _tmpl$7 = "<span aria-hidden=\"true\">\u25CB</span>";
+import { Show } from "solid-js";
+import { Button } from "../actions/Button";
+import { useUiMessages } from "../intl/messages";
+import { Paper } from "../surfaces/Paper";
+import { StatusBadge } from "../surfaces/StatusBadge";
+import { ChartFilterControls } from "./ChartFilterControls";
+export function ChartExplorerControls(props) {
+  const messages = useUiMessages();
+  const label = key => props.steps?.find(step => step.key === key)?.label ?? key ?? "";
+  return _$createComponent(Paper, {
+    "class": "k2b-chart-group-controls",
+    get children() {
+      return [_$ssr(_tmpl$3, _$escape(props.title), _$ssrAttribute("data-loading", _$escape(props.explorer.loading() || undefined, true), false), _$ssrAttribute("title", props.explorer.loading() ? `${_$escape(messages().loading, true)} · ${_$escape(messages().chartPreviousData, true)}: ${_$escape(label(props.explorer.snapshot().request.step), true)}` : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.explorer.loading();
+        },
+        get children() {
+          return [_$ssr(_tmpl$), _$ssr(_tmpl$2, _$escape(messages().loading), _$escape(messages().chartPreviousData), _$escape(label(props.explorer.snapshot().request.step)))];
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.steps?.length && props.explorer.snapshot().request.step !== undefined;
+        },
+        get children() {
+          return [_$createComponent(Show, {
+            get when() {
+              return props.explorer.desired().referenceStep;
+            },
+            children: reference => _$createComponent(Button, {
+              size: "sm",
+              variant: "secondary",
+              onClick: () => void props.explorer.clearReference(),
+              get ["aria-label"]() {
+                return `${messages().chartRemoveComparison}: ${label(reference())}`;
+              },
+              get children() {
+                return [messages().chartReference, ": ", label(reference()), " ", _$ssr(_tmpl$4)];
+              }
+            })
+          }), _$createComponent(Button, {
+            size: "sm",
+            variant: "secondary",
+            get disabled() {
+              return props.explorer.loading() || props.explorer.error() !== null || props.explorer.desired().referenceStep === props.explorer.snapshot().request.step;
+            },
+            onClick: () => void props.explorer.pinReference(),
+            get children() {
+              return messages().chartPinReference;
+            }
+          })];
+        }
+      }))), _$createComponent(ChartFilterControls, {
+        get request() {
+          return props.explorer.desired();
+        },
+        get displayedRequest() {
+          return props.explorer.snapshot().request;
+        },
+        get steps() {
+          return props.steps;
+        },
+        get series() {
+          return props.series;
+        },
+        get dimensionLabel() {
+          return props.dimensionLabel;
+        },
+        get failed() {
+          return props.explorer.error() !== null;
+        },
+        onRequest: request => void props.explorer.setRequest(request),
+        onRetry: () => void props.explorer.retry()
+      }), _$createComponent(Show, {
+        get when() {
+          return props.explorer.snapshot().request.referenceStep;
+        },
+        children: reference => _$ssr(_tmpl$5, _$escape(_$createComponent(StatusBadge, {
+          tone: "neutral",
+          icon: null,
+          get label() {
+            return [_$ssr(_tmpl$6), " ", messages().chartCurrent, ": ", label(props.explorer.snapshot().request.step)];
+          }
+        })), _$escape(_$createComponent(StatusBadge, {
+          tone: "neutral",
+          icon: null,
+          get label() {
+            return [_$ssr(_tmpl$7), " ", messages().chartReference, ": ", label(reference())];
+          }
+        })))
+      })];
+    }
+  });
+}
+//# sourceMappingURL=ChartExplorerControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Show","Button","useUiMessages","Paper","StatusBadge","ChartFilterControls","ChartExplorerControls","props","messages","label","key","steps","find","step","_$createComponent","children","_$ssr","_tmpl$3","_$escape","title","_$ssrAttribute","explorer","loading","undefined","chartPreviousData","snapshot","request","when","_tmpl$","_tmpl$2","length","desired","referenceStep","reference","size","variant","onClick","clearReference","aria-label","chartRemoveComparison","chartReference","_tmpl$4","disabled","error","pinReference","chartPinReference","displayedRequest","series","dimensionLabel","failed","onRequest","setRequest","onRetry","retry","_tmpl$5","tone","icon","_tmpl$6","chartCurrent","_tmpl$7"],"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":";;;;;;;;;;;AAAA,SAASA,IAAI,QAAQ,UAAU;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AACzC,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,mBAAmB,QAAuC,uBAAuB;AAW1F,OAAO,SAASC,qBAAqBA,CAAgCC,KAAoC,EAAE;EACzG,MAAMC,QAAQ,GAAGN,aAAa,CAAC,CAAC;EAChC,MAAMO,KAAK,GAAIC,GAAuB,IAAKH,KAAK,CAACI,KAAK,EAAEC,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACH,GAAG,KAAKA,GAAG,CAAC,EAAED,KAAK,IAAIC,GAAG,IAAI,EAAE;EAC5G,OAAAI,iBAAA,CACGX,KAAK;IAAA;IAAA,IAAAY,SAAA;MAAA,QAAAC,KAAA,CAAAC,OAAA,EAAAC,QAAA,CAEOX,KAAK,CAACY,KAAK,GAAAC,cAAA,iBAAAF,QAAA,CAIFX,KAAK,CAACc,QAAQ,CAACC,OAAO,CAAC,CAAC,IAAIC,SAAS,iBAAAH,cAAA,UAGjDb,KAAK,CAACc,QAAQ,CAACC,OAAO,CAAC,CAAC,GACpB,GAAAJ,QAAA,CAAGV,QAAQ,CAAC,CAAC,CAACc,OAAO,aAAAJ,QAAA,CAAMV,QAAQ,CAAC,CAAC,CAACgB,iBAAiB,YAAAN,QAAA,CAAKT,KAAK,CAACF,KAAK,CAACc,QAAQ,CAACI,QAAQ,CAAC,CAAC,CAACC,OAAO,CAACb,IAAI,CAAC,SAAE,GAAAK,QAAA,CAC3GK,SAAS,iBAAAL,QAAA,CAAAJ,iBAAA,CAGdd,IAAI;QAAA,IAAC2B,IAAIA,CAAA;UAAA,OAAEpB,KAAK,CAACc,QAAQ,CAACC,OAAO,CAAC,CAAC;QAAA;QAAA,IAAAP,SAAA;UAAA,QAAAC,KAAA,CAAAY,MAAA,GAAAZ,KAAA,CAAAa,OAAA,EAAAX,QAAA,CAG/BV,QAAQ,CAAC,CAAC,CAACc,OAAO,GAAAJ,QAAA,CAAKV,QAAQ,CAAC,CAAC,CAACgB,iBAAiB,GAAAN,QAAA,CAAIT,KAAK,CAACF,KAAK,CAACc,QAAQ,CAACI,QAAQ,CAAC,CAAC,CAACC,OAAO,CAACb,IAAI,CAAC;QAAA;MAAA,KAAAK,QAAA,CAAAJ,iBAAA,CAI1Gd,IAAI;QAAA,IAAC2B,IAAIA,CAAA;UAAA,OAAEpB,KAAK,CAACI,KAAK,EAAEmB,MAAM,IAAIvB,KAAK,CAACc,QAAQ,CAACI,QAAQ,CAAC,CAAC,CAACC,OAAO,CAACb,IAAI,KAAKU,SAAS;QAAA;QAAA,IAAAR,SAAA;UAAA,QAAAD,iBAAA,CACpFd,IAAI;YAAA,IAAC2B,IAAIA,CAAA;cAAA,OAAEpB,KAAK,CAACc,QAAQ,CAACU,OAAO,CAAC,CAAC,CAACC,aAAa;YAAA;YAAAjB,QAAA,EAC9CkB,SAAS,IAAAnB,iBAAA,CACRb,MAAM;cACLiC,IAAI;cACJC,OAAO;cACPC,OAAO,EAAEA,CAAA,KAAM,KAAK7B,KAAK,CAACc,QAAQ,CAACgB,cAAc,CAAC,CAAC;cAAA,kBAAAC,CAAA;gBAAA,OACvC,GAAG9B,QAAQ,CAAC,CAAC,CAAC+B,qBAAqB,KAAK9B,KAAK,CAACwB,SAAS,CAAC,CAAC,CAAC,EAAE;cAAA;cAAA,IAAAlB,SAAA;gBAAA,QAEvEP,QAAQ,CAAC,CAAC,CAACgC,cAAc,QAAI/B,KAAK,CAACwB,SAAS,CAAC,CAAC,CAAC,OAAAjB,KAAA,CAAAyB,OAAA;cAAA;YAAA;UAEnD,IAAA3B,iBAAA,CAEFb,MAAM;YACLiC,IAAI;YACJC,OAAO;YAAA,IACPO,QAAQA,CAAA;cAAA,OACNnC,KAAK,CAACc,QAAQ,CAACC,OAAO,CAAC,CAAC,IACxBf,KAAK,CAACc,QAAQ,CAACsB,KAAK,CAAC,CAAC,KAAK,IAAI,IAC/BpC,KAAK,CAACc,QAAQ,CAACU,OAAO,CAAC,CAAC,CAACC,aAAa,KAAKzB,KAAK,CAACc,QAAQ,CAACI,QAAQ,CAAC,CAAC,CAACC,OAAO,CAACb,IAAI;YAAA;YAEnFuB,OAAO,EAAEA,CAAA,KAAM,KAAK7B,KAAK,CAACc,QAAQ,CAACuB,YAAY,CAAC,CAAC;YAAA,IAAA7B,SAAA;cAAA,OAEhDP,QAAQ,CAAC,CAAC,CAACqC,iBAAiB;YAAA;UAAA;QAAA;MAAA,MAAA/B,iBAAA,CAKpCT,mBAAmB;QAAA,IAClBqB,OAAOA,CAAA;UAAA,OAAEnB,KAAK,CAACc,QAAQ,CAACU,OAAO,CAAC,CAAC;QAAA;QAAA,IACjCe,gBAAgBA,CAAA;UAAA,OAAEvC,KAAK,CAACc,QAAQ,CAACI,QAAQ,CAAC,CAAC,CAACC,OAAO;QAAA;QAAA,IACnDf,KAAKA,CAAA;UAAA,OAAEJ,KAAK,CAACI,KAAK;QAAA;QAAA,IAClBoC,MAAMA,CAAA;UAAA,OAAExC,KAAK,CAACwC,MAAM;QAAA;QAAA,IACpBC,cAAcA,CAAA;UAAA,OAAEzC,KAAK,CAACyC,cAAc;QAAA;QAAA,IACpCC,MAAMA,CAAA;UAAA,OAAE1C,KAAK,CAACc,QAAQ,CAACsB,KAAK,CAAC,CAAC,KAAK,IAAI;QAAA;QACvCO,SAAS,EAAGxB,OAAO,IAAK,KAAKnB,KAAK,CAACc,QAAQ,CAAC8B,UAAU,CAACzB,OAAO,CAAC;QAC/D0B,OAAO,EAAEA,CAAA,KAAM,KAAK7C,KAAK,CAACc,QAAQ,CAACgC,KAAK,CAAC;MAAC,IAAAvC,iBAAA,CAE3Cd,IAAI;QAAA,IAAC2B,IAAIA,CAAA;UAAA,OAAEpB,KAAK,CAACc,QAAQ,CAACI,QAAQ,CAAC,CAAC,CAACC,OAAO,CAACM,aAAa;QAAA;QAAAjB,QAAA,EACvDkB,SAAS,IAAAjB,KAAA,CAAAsC,OAAA,EAAApC,QAAA,CAAAJ,iBAAA,CAENV,WAAW;UACVmD,IAAI;UACJC,IAAI,EAAE,IAAI;UAAA,IACV/C,KAAKA,CAAA;YAAA,QAAAO,KAAA,CAAAyC,OAAA,QAEkCjD,QAAQ,CAAC,CAAC,CAACkD,YAAY,QAAIjD,KAAK,CAACF,KAAK,CAACc,QAAQ,CAACI,QAAQ,CAAC,CAAC,CAACC,OAAO,CAACb,IAAI,CAAC;UAAA;QAAA,KAAAK,QAAA,CAAAJ,iBAAA,CAIhHV,WAAW;UACVmD,IAAI;UACJC,IAAI,EAAE,IAAI;UAAA,IACV/C,KAAKA,CAAA;YAAA,QAAAO,KAAA,CAAA2C,OAAA,QAEkCnD,QAAQ,CAAC,CAAC,CAACgC,cAAc,QAAI/B,KAAK,CAACwB,SAAS,CAAC,CAAC,CAAC;UAAA;QAAA;MAK3F;IAAA;EAAA;AAIT","ignoreList":[]}

package/dist/ssr/content/ChartFilterControls.js

@@ -0,0 +1,139 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<div class=\"k2b-chart-explorer__dimension\" role=\"group\"", ">", "<output class=\"k2b-chart-explorer__dimension-value\" for=\"", "\">", "</output><div id=\"", "\" class=\"k2b-chart-explorer__steps\">", "</div></div>"],
+  _tmpl$2 = ["<div class=\"k2b-chart-explorer__legend\">", "<div class=\"k2b-chart-explorer__status\" role=\"status\">", "", "</div></div>"],
+  _tmpl$3 = ["<span", ">", "</span>"];
+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";
+/** Shared controls for a standalone explorer or an atomic group of charts. */
+export function ChartFilterControls(props) {
+  const validateOptions = () => {
+    for (const items of [props.steps, props.series]) {
+      const keys = items?.map(item => item.key) ?? [];
+      if (keys.some(key => !key) || new Set(keys).size !== keys.length) throw new Error("Chart control options require nonempty unique keys");
+    }
+  };
+  validateOptions();
+  createEffect(validateOptions);
+  const messages = useUiMessages();
+  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 ?? "";
+  return [_$createComponent(Show, {
+    get when() {
+      return props.steps?.length;
+    },
+    get children() {
+      return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.dimensionLabel ?? messages().range, true), false) + _$ssrAttribute("data-keyboard", keyboardSteps() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Slider, {
+        id: `${id}-dimension`,
+        showValue: false,
+        "aria-describedby": `${id}-steps`,
+        get label() {
+          return props.dimensionLabel ?? messages().range;
+        },
+        min: 0,
+        get max() {
+          return Math.max(0, (props.steps?.length ?? 1) - 1);
+        },
+        step: 1,
+        get value() {
+          return Math.max(0, props.steps?.findIndex(step => step.key === props.request.step) ?? 0);
+        },
+        get disabled() {
+          return props.disabled || (props.steps?.length ?? 0) < 2;
+        },
+        formatValue: index => props.steps?.[index]?.label ?? "",
+        get ["aria-valuetext"]() {
+          return stepLabel(props.request.step);
+        },
+        onValueChange: index => {
+          const step = props.steps?.[index];
+          if (step) props.onRequest({
+            ...props.request,
+            step: step.key
+          });
+        }
+      })), `${_$escape(id, true)}-dimension`, _$escape(stepLabel(props.request.step)), `${_$escape(id, true)}-steps`, _$escape(_$createComponent(For, {
+        get each() {
+          return props.steps;
+        },
+        children: step => _$ssr(_tmpl$3, _$ssrAttribute("data-current", step.key === props.request.step ? "true" : _$escape(undefined, true), false), _$escape(step.label))
+      })));
+    }
+  }), _$ssr(_tmpl$2, _$escape(_$createComponent(Show, {
+    get when() {
+      return props.series?.length;
+    },
+    get children() {
+      return _$createComponent(FilterChip, {
+        get label() {
+          return messages().chartSeries;
+        },
+        icon: "ti ti-chart-dots",
+        get disabled() {
+          return props.disabled;
+        },
+        get value() {
+          return props.request.visibleKeys ?? props.series?.map(item => item.key) ?? [];
+        },
+        get defaultValue() {
+          return props.series?.map(item => item.key) ?? [];
+        },
+        get isActive() {
+          return props.request.visibleKeys !== undefined && props.request.visibleKeys.length !== props.series?.length;
+        },
+        get options() {
+          return [{
+            multiple: true,
+            options: (props.series ?? []).map(item => ({
+              value: item.key,
+              label: item.label,
+              color: item.color
+            }))
+          }];
+        },
+        onValueChange: visibleKeys => props.onRequest({
+          ...props.request,
+          visibleKeys
+        })
+      });
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.failed;
+    },
+    get children() {
+      return [messages().couldNotLoadData, " ", _$createComponent(Button, {
+        variant: "text",
+        size: "sm",
+        get onClick() {
+          return props.onRetry;
+        },
+        get children() {
+          return messages().retry;
+        }
+      })];
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.failed;
+    },
+    get children() {
+      return ["\xB7 ", messages().chartPreviousData, _$createComponent(Show, {
+        get when() {
+          return props.steps?.length;
+        },
+        get children() {
+          return [": ", stepLabel(props.displayedRequest.step)];
+        }
+      })];
+    }
+  })))];
+}
+//# sourceMappingURL=ChartFilterControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createEffect","createSignal","createUniqueId","For","Show","Button","FilterChip","Slider","useUiMessages","ChartFilterControls","props","validateOptions","items","steps","series","keys","map","item","key","some","Set","size","length","Error","messages","id","keyboardSteps","setKeyboardSteps","pointerFocus","stepLabel","find","step","label","_$createComponent","when","children","_$ssr","_tmpl$","_$ssrAttribute","_$escape","dimensionLabel","range","undefined","showValue","min","max","Math","value","findIndex","request","disabled","formatValue","index","aria-valuetext","onValueChange","onRequest","each","_tmpl$3","_tmpl$2","chartSeries","icon","visibleKeys","defaultValue","isActive","options","multiple","color","failed","couldNotLoadData","variant","onClick","onRetry","retry","chartPreviousData","displayedRequest"],"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":[]}

package/dist/ssr/content/ChartSnapshotView.js

@@ -0,0 +1,58 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { ssrStyle as _$ssrStyle } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<div class=\"k2b-chart\"", " data-interactive=\"true\" style=\"", "\" role=\"group\"", " tabindex=\"0\"><div class=\"k2b-chart__svg\"", " style=\"", "\">", "</div><span class=\"k2b-chart__anchor\" aria-hidden=\"true\"></span><span", " class=\"k2b-chart__tooltip k2b-tooltip\" role=\"tooltip\" popover=\"manual\" data-instant=\"true\"></span></div>"];
+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 { selectedChartSvg } from "./chart-svg";
+
+/** Internal display for server-prepared geometry. Viewports are snapshot-owned. */
+export function ChartSnapshotView(props) {
+  const messages = useUiMessages();
+  let container;
+  let tooltip;
+  let anchor;
+  const id = `k2b-chart-tooltip-${createUniqueId()}`;
+  const inspection = createChartInspection({
+    container: () => container,
+    cursor: () => props.cursor,
+    tooltip: () => tooltip,
+    anchor: () => anchor,
+    kind: () => props.snapshot.kind,
+    enabled: () => true,
+    format: ({
+      datum
+    }) => props.snapshot.marks.find(m => sameChartDatum(m.datum, datum))?.tooltip ?? {
+      rows: []
+    },
+    select: ({
+      datum
+    }) => {
+      const mark = props.snapshot.marks.find(m => sameChartDatum(m.datum, datum));
+      if (mark) props.onSelect(mark.rowKey);
+    }
+  });
+  createEffect(() => {
+    props.snapshot;
+    inspection.invalidate();
+  });
+  createEffect(() => inspection.selectData(props.snapshot.marks.filter(m => m.rowKey === props.selectedKey).map(m => m.datum)));
+  onMount(() => {
+    const outside = event => {
+      if (event.target instanceof Node && !container?.contains(event.target)) inspection.close();
+    };
+    window.addEventListener("pointerdown", outside);
+    window.addEventListener("scroll", inspection.close, true);
+    onCleanup(() => {
+      window.removeEventListener("pointerdown", outside);
+      window.removeEventListener("scroll", inspection.close, true);
+    });
+  });
+  onCleanup(inspection.close);
+  return _$ssr(_tmpl$, _$ssrAttribute("data-chart-kind", _$escape(props.snapshot.kind, true), false), _$ssrStyle(props.style), _$ssrAttribute("aria-label", _$escape(messages().interactiveChart, true), false), _$ssrAttribute("data-stretch", props.snapshot.stretch ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-chart-width:", `${_$escape(props.snapshot.width, true)}px`) + _$ssrStyleProperty(";--k2b-chart-height:", `${_$escape(props.snapshot.height, true)}px`) + _$ssrStyleProperty(";aspect-ratio:", `${_$escape(props.snapshot.width, true)}/${_$escape(props.snapshot.height, true)}`), isServer ? selectedChartSvg(props.snapshot.svg, props.snapshot.marks.filter(m => m.rowKey === props.selectedKey).map(m => m.datum)) : props.snapshot.svg, _$ssrAttribute("id", _$escape(id, true), false));
+}
+//# sourceMappingURL=ChartSnapshotView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createEffect","createUniqueId","onCleanup","onMount","isServer","useUiMessages","createChartInspection","sameChartDatum","selectedChartSvg","ChartSnapshotView","props","messages","container","tooltip","anchor","id","inspection","cursor","kind","snapshot","enabled","format","datum","marks","find","m","rows","select","mark","onSelect","rowKey","invalidate","selectData","filter","selectedKey","map","outside","event","target","Node","contains","close","window","addEventListener","removeEventListener","_$ssr","_tmpl$","_$ssrAttribute","_$escape","_$ssrStyle","style","interactiveChart","stretch","undefined","_$ssrStyleProperty","width","height","svg"],"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":[]}

package/dist/ssr/content/DataTable.js

@@ -22,8 +22,8 @@ var _tmpl$ = ["<span class=\"k2b-data-table__header-title\">", "</span>"],
   _tmpl$15 = ["<footer class=\"", "\">", "</footer>"];
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, useContext } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import { useUiMessages } from "../intl/messages";
 import { useLocale } from "../intl/locale";
+import { useUiMessages } from "../intl/messages";
 import { PanelHeader } from "../layout/PanelHeader";
 import { Paper } from "../surfaces/Paper";
 import Placeholder from "../surfaces/Placeholder";
@@ -42,7 +42,7 @@ const renderColumnPart = (part, col) => {
   });
   return part;
 };
-const rowInteractiveSelector = ["a[href]", "button", "input", "select", "textarea", "summary", "[contenteditable]", "[role='button']", "[role='checkbox']", "[role='link']", "[role='menuitem']", "[role='option']", "[role='radio']", "[role='switch']", "[role='tab']", "[tabindex]"].join(",");
+const rowInteractiveSelector = ["a[href]", "button", "input", "label", "select", "textarea", "summary", "[contenteditable]", "[role='button']", "[role='checkbox']", "[role='link']", "[role='menuitem']", "[role='option']", "[role='radio']", "[role='switch']", "[role='tab']", "[tabindex]"].join(",");
 const isNestedRowControl = event => event.target instanceof Element && event.target.closest(rowInteractiveSelector) !== event.currentTarget;
 const scrollbarMetrics = (viewportSize, contentSize, scrollOffset) => {
   if (viewportSize <= 0 || contentSize <= viewportSize + 1) return {
@@ -90,7 +90,7 @@ function DataTableRoot(props) {
   let previousLoadingMore = !!props.loadingMore;
   let previousHasMore = !!props.hasMore;
   const rowId = row => props.getRowId?.(row);
-  const isInteractive = () => !!props.onRowClick || !!props.onRowDoubleClick;
+  const isInteractive = () => !!props.selection || !!props.onRowClick || !!props.onRowDoubleClick;
   const shouldHoverRows = () => props.hoverRows ?? isInteractive();
   const shouldRenderLoadMoreSentinel = () => !!props.onLoadMore;
   const labelledBy = () => props.ariaLabelledBy ?? (panel?.hasHeading() ? panel.headingId : undefined);
@@ -211,9 +211,9 @@ function DataTableRoot(props) {
 
   /** Only a sortable column carries a sort state; the rest carry none at all. */
   const ariaSortFor = col => {
-    const sort = sortLinkFor(col);
-    if (!sort) return undefined;
-    if (!sort.active) return "none";
+    const key = sortKeyOf(col);
+    if (!key || !props.sortHref && !props.renderHeader) return undefined;
+    if (props.sort?.key !== key) return "none";
     return props.sort?.direction === "asc" ? "ascending" : "descending";
   };
   const renderHeaderDefault = col => {
@@ -234,12 +234,16 @@ function DataTableRoot(props) {
   const onRowKeyDown = (event, row) => {
     if (!isInteractive()) return;
     if (isNestedRowControl(event)) return;
+    const id = rowId(row);
+    if (id !== undefined && props.selection?.keyDown(event, id)) return;
     if (event.key !== "Enter" && event.key !== " ") return;
     event.preventDefault();
-    (props.onRowClick ?? props.onRowDoubleClick)?.(row);
+    (props.selection ? props.onRowDoubleClick : props.onRowClick ?? props.onRowDoubleClick)?.(row);
   };
   const onRowClick = (event, row) => {
     if (isNestedRowControl(event)) return;
+    const id = rowId(row);
+    if (id !== undefined) props.selection?.select(id, event);
     props.onRowClick?.(row);
   };
   const onRowDoubleClick = (event, row) => {
@@ -354,8 +358,8 @@ function DataTableRoot(props) {
                 },
                 children: row => {
                   const id = () => rowId(row);
-                  const isSelected = () => props.selectedRowId && id() === props.selectedRowId;
-                  return _$ssr(_tmpl$0, `k2b-data-table__row ${_$escape(rowClass(row), true)}`, _$ssrAttribute("data-hover", shouldHoverRows() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-clickable", shouldHoverRows() && isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", isSelected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", isInteractive() ? 0 : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
+                  const isSelected = () => props.selection ? props.selection.selected().has(id() ?? "") : props.selectedRowId && id() === props.selectedRowId;
+                  return _$ssr(_tmpl$0, `k2b-data-table__row ${_$escape(rowClass(row), true)}`, _$ssrAttribute("data-hover", shouldHoverRows() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-clickable", shouldHoverRows() && isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", isSelected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-selected", props.selection ? !!isSelected() : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
                     get each() {
                       return props.columns;
                     },