@k2b/ui 0.50.0 → 0.51.0

package/dist/browser/content/Chart.js

@@ -1,625 +1,9 @@
-import { template as _$template } from "solid-js/web";
-import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-import { setProperty as _$setProperty } from "solid-js/web";
-import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
-import { style as _$style } from "solid-js/web";
-import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
-import { getNextMarker as _$getNextMarker } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { addEventListener as _$addEventListener } from "solid-js/web";
-import { use as _$use } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-import { getNextElement as _$getNextElement } from "solid-js/web";
-import { className as _$className } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-chart__legend role=group tabindex=0>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-chart__controls><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div data-interactive=true role=group tabindex=0><!$><!/><div class=k2b-chart__svg></div><span class=k2b-chart__anchor aria-hidden=true></span><span role=tooltip popover=manual data-instant=true class="k2b-tooltip k2b-chart__tooltip"></span><!$><!/>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<b data-chart-legend-value>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-chart__legend-item><svg viewBox="0 0 10 10"width=10 height=10 aria-hidden=true><rect x=1 y=1 width=8 height=8 rx=2 stroke=none></rect></svg><span></span><!$><!/>`);
-import { createEffect, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, splitProps, untrack } from "solid-js";
-import { isServer } from "solid-js/web";
-import { IconButton } from "../actions/Button";
-import { calendarLayout } from "../charts/core/calendar";
+import { mergeProps } from "solid-js";
 import { chartKinds } from "../charts/core/registry";
-import { chartRenderHeight, preservesAspectRatio, renderChartSvg } from "../charts/core/render";
-import { suppressTextSelection } from "../internal/text-selection";
-import { useLocale } from "../intl/locale";
-import { useUiMessages } from "../intl/messages";
-import { calendarInspectionNavigation, mountCalendarScroll } from "./chart-calendar";
-import { createChartInspection } from "./chart-inspection";
-import { closeChartInspectionOnOutside } from "./chart-inspection-core";
-import { DEFAULT_MAP_VIEWPORT, normalizeMapViewport, panMapViewport, zoomMapViewport } from "./chart-map-viewport";
-import { resolveChartMessages, useChartMessages } from "./chart-messages";
-import { panStateTimelineViewport, stateTimelineDomain, stateTimelineHeight, zoomStateTimelineViewport } from "./chart-state-timeline";
-import { selectedChartSvg } from "./chart-svg";
-import { useViewportMessages } from "./viewport-messages";
-
-/**
- * Chart — Solid interaction and sizing around the portable UI chart core.
- *
- * **Live-update story.** `charts.<kind>(opts)` returns an SVG string;
- * Solid's `innerHTML` is reactive, so any time a prop (signal, store
- * slice, derived value) changes, the SVG re-renders. No manual
- * subscription, no imperative DOM patching. Trade-off: every change
- * is a full SVG re-build, not a diff — fine for dashboard cadences
- * (poll, websocket, store updates). Don't use this for 60fps streaming.
- *
- * **Sizing.** The server and browser render the same logical viewBox. CSS
- * fits Cartesian plots to the container and preserves text/marker sizes;
- * maps fit the whole world and zoom uniformly across the full plot; pies, donuts and gauges retain
- * their aspect ratio. No measurement
- * or hydration redraw is needed. The caller sizes the wrapper, for example
- * `style={{ height: "14rem" }}`. State timelines derive their default height
- * from the row count and legend via `stateTimelineHeight()`.
- *
- * **Why so thin.** The props are a discriminated union over each
- * registered core chart renderer — `kind: "line"` brings in exactly the params
- * `charts.line` expects, `kind: "bar"` brings in `charts.bar`'s, etc.
- * Options stay aligned with the core renderer without renaming. Every chart provides
- * renderer-owned inspection, tooltips and optional selection by default.
- * `interactive` adds bounded pan / zoom and reset controls to maps and state timelines.
- * When a core renderer gains an option, it is automatically available at every
- * callsite.
- *
- * **Theming.** The core renderers use `currentColor` for axes / ticks /
- * tick labels — set the wrapping element's `color` and everything
- * inherits. Series colors come from `--stdlib-chart-c1..c8` CSS
- * custom properties; override on the parent for per-chart palettes.
- *
- * ```tsx
- * <Chart kind="line" style={{ height: "12rem" }}
- *        series={[{ data: points() }]}
- *        yAxis={{ format: v => `€${v}k` }} />
- *
- * <Chart kind="donut" style={{ height: "12rem" }} data={slices()} />
- *
- * <Chart kind="sparkline" style={{ width: "6rem", height: "1.5rem" }} data={trend()} />
- *
- * <Chart kind="map" style={{ height: "16rem" }} series={locations()} interactive />
- * ```
- */
-
-/** All registered chart kinds. */
-
-/**
- * Per-kind props: `kind` discriminator + the exact options that
- * `charts.<kind>` accepts, **minus** `width` / `height` (the wrapper
- * owns those — CSS fits a stable coordinate space to the box). Solid's
- * component model handles discriminated unions natively, so callsites
- * get full type safety.
- */
-
+import { renderChartSvg } from "../charts/core/render";
+import { renderChartRoot } from "./ChartRoot";
 export { chartRenderHeight, renderChartSvg } from "../charts/core/render";
-
-/** Empty-data short-circuit. Kept per-kind because each renderer's payload
- *  key differs (series vs data vs groups). We're conservative: only
- *  block on truly empty inputs; partially-filled series get rendered
- *  as-is and the core handles the gaps. */
-const isEmpty = props => {
-  if (props.kind === "area") return !props.x.length || !props.series.length || props.x.every((_, i) => props.series.some(s => s.data[i] === null) || props.normalize && props.series.every(s => s.data[i] === 0));
-  if (props.kind === "line" || props.kind === "scatter") {
-    return !props.series?.length || props.series.every(s => !s.data.length);
-  }
-  if (props.kind === "bar" || props.kind === "donut" || props.kind === "pie") {
-    return !props.data?.length;
-  }
-  if (props.kind === "histogram" || props.kind === "sparkline") {
-    return !props.data?.length;
-  }
-  if (props.kind === "boxplot") {
-    return !props.groups?.length;
-  }
-  if (props.kind === "stateTimeline") {
-    return !props.rows?.length || props.rows.every(row => !row.intervals.length);
-  }
-  return false;
-};
-const ChartRoot = props => {
-  const [, drawingProps] = splitProps(props, ["class", "style", "labels", "interactive", "selected", "onSelect", "tooltip", "cursor"]);
-  const messages = useUiMessages();
-  const chartMessages = useChartMessages();
-  const viewportMessages = useViewportMessages();
-  const locale = useLocale();
-  let containerRef;
-  let chartTooltipRef;
-  let lineAnchorRef;
-  // One deterministic coordinate space on the server and client. CSS fits the
-  // SVG to its box; hydration must never replace it with measured geometry.
-  const calendar = () => props.kind === "heatmap" && props.layout === "calendar" ? calendarLayout({
-    ...props,
-    locale: props.locale ?? locale()
-  }) : undefined;
-  const size = () => ({
-    width: calendar()?.width ?? 480,
-    height: chartRenderHeight(props)
-  });
-  const topLegend = () => props.kind === "area" ? props.legend !== false : props.kind === "line" && props.legend === true && props.legendPlacement === "top-start";
-  const legendSeries = () => props.kind === "line" || props.kind === "area" ? props.series : [];
-  const legendValue = index => {
-    if (props.kind !== "area") return "";
-    const last = props.x.length - 1;
-    const amount = props.series[index]?.data[last];
-    const values = props.series.map(s => s.data[last]);
-    const total = values.reduce((sum, value) => sum + (value ?? 0), 0);
-    if (amount == null || values.some(v => v == null) || props.normalize && total === 0) return "—";
-    return props.normalize ? new Intl.NumberFormat(locale(), {
-      style: "percent",
-      minimumFractionDigits: 1,
-      maximumFractionDigits: 1
-    }).format(amount / total) : props.format?.(amount) ?? new Intl.NumberFormat(locale(), {
-      maximumFractionDigits: 2
-    }).format(amount);
-  };
-  const dimensions = () => containerRef?.getBoundingClientRect() ?? size();
-  const initialMapViewport = props.kind === "map" ? normalizeMapViewport(props.viewport) : DEFAULT_MAP_VIEWPORT;
-  const [mapViewport, setMapViewport] = createSignal(initialMapViewport);
-  const initialTimelineViewport = props.kind === "stateTimeline" ? stateTimelineDomain(props.rows, props.domain) : [0, 1];
-  const [timelineViewport, setTimelineViewport] = createSignal(initialTimelineViewport);
-  const [dragging, setDragging] = createSignal(false);
-  const chartTooltipId = `k2b-chart-tooltip-${createUniqueId()}`;
-  let timelineViewportLocallyChanged = false;
-  let drag;
-  let timelineDrag;
-  let pointerFrame;
-  let pendingPointer;
-  const interactiveMap = () => props.kind === "map" && props.interactive === true;
-  const interactiveTimeline = () => props.kind === "stateTimeline" && props.interactive === true;
-  const draggable = () => interactiveMap() || interactiveTimeline();
-  const labels = () => props.labels ?? {};
-  const accessibleName = () => {
-    const override = props.kind === "map" ? labels().interactiveMap : props.kind === "stateTimeline" ? labels().interactiveTimeline : props.kind === "line" ? labels().interactiveLine : labels().interactiveChart;
-    const title = "title" in props && typeof props.title === "string" && props.title.trim() ? props.title : undefined;
-    const valueLabel = (props.kind === "stat" || props.kind === "gauge") && props.label?.trim() ? props.label : undefined;
-    const fallback = props.kind === "map" ? chartMessages().interactiveMap : props.kind === "stateTimeline" ? chartMessages().interactiveTimeline : props.kind === "line" ? chartMessages().interactiveLineChart : chartMessages().interactiveChart;
-    return override ?? title ?? valueLabel ?? fallback;
-  };
-  const timelineFullDomain = () => props.kind === "stateTimeline" ? stateTimelineDomain(props.rows, props.domain) : [0, 1];
-  createEffect(() => {
-    if (props.kind === "map") {
-      setMapViewport(normalizeMapViewport(props.viewport));
-    }
-  });
-  createEffect(() => {
-    if (props.kind === "stateTimeline" && !timelineViewportLocallyChanged) {
-      setTimelineViewport(timelineFullDomain());
-    }
-  });
-  const updateTimelineViewport = update => {
-    timelineViewportLocallyChanged = true;
-    setTimelineViewport(update);
-  };
-  const mapDimensions = () => {
-    const viewportElement = containerRef?.querySelector(".stdlib-chart-map-viewport");
-    const matrix = viewportElement?.getScreenCTM?.();
-    const box = viewportElement?.viewBox?.baseVal;
-    if (matrix && box?.width && box.height) {
-      return {
-        width: box.width * Math.hypot(matrix.a, matrix.b),
-        height: box.height * Math.hypot(matrix.c, matrix.d)
-      };
-    }
-    const rect = viewportElement?.getBoundingClientRect();
-    if (rect && rect.width > 0 && rect.height > 0) {
-      return {
-        width: rect.width,
-        height: rect.height
-      };
-    }
-    return dimensions();
-  };
-  const zoom = delta => {
-    closeChartTooltip();
-    if (interactiveMap()) {
-      setMapViewport(current => zoomMapViewport(current, delta, props.kind === "map" ? props.zoomFocus : undefined));
-    } else if (interactiveTimeline()) {
-      updateTimelineViewport(current => zoomStateTimelineViewport(current, timelineFullDomain(), delta));
-    }
-  };
-  const reset = () => {
-    closeChartTooltip();
-    if (interactiveMap() && props.kind === "map") {
-      setMapViewport(normalizeMapViewport(props.viewport));
-    }
-    if (interactiveTimeline()) {
-      timelineViewportLocallyChanged = false;
-      setTimelineViewport(timelineFullDomain());
-    }
-  };
-  const handlePointerDown = event => {
-    inspection.down(event);
-    if (!draggable() || event.button !== 0 || event.target.closest("button, a")) {
-      return;
-    }
-    closeChartTooltip();
-    // The pointer's own pointerup or pointercancel ends the hold.
-    suppressTextSelection(event.pointerId);
-    if (interactiveTimeline()) {
-      timelineDrag = {
-        pointerId: event.pointerId,
-        x: event.clientX,
-        width: Math.max(1, event.currentTarget.getBoundingClientRect().width),
-        viewport: timelineViewport()
-      };
-      event.currentTarget.setPointerCapture(event.pointerId);
-      setDragging(true);
-      return;
-    }
-    const dimensions = mapDimensions();
-    drag = {
-      pointerId: event.pointerId,
-      x: event.clientX,
-      y: event.clientY,
-      width: dimensions.width,
-      height: dimensions.height,
-      viewport: mapViewport()
-    };
-    event.currentTarget.setPointerCapture(event.pointerId);
-    setDragging(true);
-  };
-  const flushPointerMove = () => {
-    if (pointerFrame !== undefined) {
-      cancelAnimationFrame(pointerFrame);
-      pointerFrame = undefined;
-    }
-    const sample = pendingPointer;
-    pendingPointer = undefined;
-    if (!sample) return;
-    const start = timelineDrag ?? drag;
-    if (start && Math.hypot(sample.clientX - start.x, sample.clientY - ("y" in start ? start.y : sample.clientY)) <= 6) return;
-    const activeTimelineDrag = timelineDrag;
-    if (activeTimelineDrag?.pointerId === sample.pointerId) {
-      updateTimelineViewport(() => panStateTimelineViewport(activeTimelineDrag.viewport, timelineFullDomain(), sample.clientX - activeTimelineDrag.x, activeTimelineDrag.width));
-      return;
-    }
-    if (!drag || drag.pointerId !== sample.pointerId) return;
-    setMapViewport(panMapViewport(drag.viewport, sample.clientX - drag.x, sample.clientY - drag.y, drag.width, drag.height));
-  };
-  const handlePointerMove = event => {
-    inspection.move(event);
-    if (timelineDrag?.pointerId !== event.pointerId && drag?.pointerId !== event.pointerId) return;
-    pendingPointer = {
-      pointerId: event.pointerId,
-      clientX: event.clientX,
-      clientY: event.clientY
-    };
-    if (pointerFrame !== undefined) return;
-    pointerFrame = requestAnimationFrame(flushPointerMove);
-  };
-  const stopDragging = event => {
-    inspection.up();
-    if (pendingPointer?.pointerId === event.pointerId) flushPointerMove();
-    if (timelineDrag?.pointerId === event.pointerId) {
-      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-        event.currentTarget.releasePointerCapture(event.pointerId);
-      }
-      timelineDrag = undefined;
-      setDragging(false);
-      return;
-    }
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-    drag = undefined;
-    setDragging(false);
-  };
-  const handleWheel = event => {
-    if (interactiveMap() && (event.ctrlKey || event.metaKey)) {
-      event.preventDefault();
-      zoom(event.deltaY < 0 ? 1 : -1);
-      return;
-    }
-    if (!interactiveTimeline()) return;
-    if (event.ctrlKey || event.metaKey) {
-      event.preventDefault();
-      const rect = event.currentTarget.getBoundingClientRect();
-      const anchor = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0.5;
-      updateTimelineViewport(current => zoomStateTimelineViewport(current, timelineFullDomain(), event.deltaY < 0 ? 1 : -1, anchor));
-    } else if (event.shiftKey) {
-      event.preventDefault();
-      updateTimelineViewport(current => panStateTimelineViewport(current, timelineFullDomain(), -event.deltaY, event.currentTarget.getBoundingClientRect().width));
-    }
-  };
-  const handleKeyDown = event => {
-    if (inspection.key(event)) return;
-    if (!draggable() || event.target !== containerRef) return;
-    if (event.key === "+" || event.key === "=") {
-      event.preventDefault();
-      zoom(1);
-      return;
-    }
-    if (event.key === "-" || event.key === "_") {
-      event.preventDefault();
-      zoom(-1);
-      return;
-    }
-    if (event.key === "0" || event.key === "Home") {
-      event.preventDefault();
-      reset();
-      return;
-    }
-    if (interactiveTimeline() && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
-      event.preventDefault();
-      updateTimelineViewport(current => panStateTimelineViewport(current, timelineFullDomain(), event.key === "ArrowLeft" ? 80 : -80, event.currentTarget.getBoundingClientRect().width));
-      return;
-    }
-    const delta = {
-      ArrowLeft: [40, 0],
-      ArrowRight: [-40, 0],
-      ArrowUp: [0, 40],
-      ArrowDown: [0, -40]
-    }[event.key];
-    if (!delta) return;
-    event.preventDefault();
-    const dimensions = mapDimensions();
-    setMapViewport(current => panMapViewport(current, delta[0], delta[1], dimensions.width, dimensions.height));
-  };
-  const inspection = createChartInspection({
-    container: () => containerRef,
-    locale,
-    cursor: () => props.cursor,
-    tooltip: () => chartTooltipRef,
-    anchor: () => lineAnchorRef,
-    kind: () => props.kind,
-    nav: () => props.kind === "heatmap" && props.layout === "calendar" ? calendarInspectionNavigation : undefined,
-    enabled: () => !isEmpty(props),
-    select: selection => props.onSelect?.(selection),
-    format: selection => {
-      if (props.tooltip) return props.tooltip(selection);
-      const fields = props.kind === "heatmap" && props.layout === "calendar" ? resolveChartMessages(props.locale ?? locale()).chartFields : chartMessages().chartFields;
-      if (selection.kind === "area" && props.kind === "area") {
-        const amount = selection.datum.values.find(f => f.key === "value");
-        const share = selection.datum.values.find(f => f.key === "percent");
-        return {
-          title: selection.datum.values.find(f => f.key === "x")?.formatted ?? "",
-          rows: [{
-            label: selection.datum.label ?? chartMessages().series,
-            value: `${share ? `${share.formatted} · ` : ""}${amount.formatted}`
-          }]
-        };
-      }
-      const format = new Intl.NumberFormat(locale(), {
-        maximumFractionDigits: 6
-      });
-      return {
-        title: selection.datum.label ?? (selection.datum.seriesIndex !== undefined ? `${labels().series ?? chartMessages().series} ${selection.datum.seriesIndex + 1}` : undefined),
-        rows: selection.datum.values.map(field => ({
-          label: props.kind === "heatmap" && props.layout === "calendar" && field.key === "value" && props.label ? props.label : selection.kind === "line" && field.key === "y" ? selection.datum.label ?? labels().series ?? chartMessages().series : fields({
-            key: field.key
-          }),
-          value: field.formatted ?? (field.key === "upperInclusive" ? field.value === "true" ? messages().yes : messages().no : typeof field.value === "number" ? `${format.format(field.value)}${field.key === "percent" ? "%" : ""}` : field.value)
-        }))
-      };
-    }
-  });
-  const closeChartTooltip = () => inspection.close();
-  const svgMarkup = createMemo(() => renderChartSvg(props.kind === "heatmap" && props.layout === "calendar" ? {
-    ...props,
-    locale: props.locale ?? locale()
-  } : drawingProps, size().width, size().height, interactiveMap() ? mapViewport() : undefined, interactiveTimeline() ? timelineViewport() : undefined, locale()));
-  createEffect(() => {
-    svgMarkup();
-    inspection.invalidate();
-    untrack(() => inspection.selectDatum(props.selected));
-  });
-  createEffect(() => inspection.selectDatum(props.selected));
-  onCleanup(() => {
-    inspection.close();
-    if (pointerFrame !== undefined) cancelAnimationFrame(pointerFrame);
-    pointerFrame = undefined;
-    pendingPointer = undefined;
-  });
-  onMount(() => {
-    if (!containerRef) return;
-    if (props.kind === "heatmap" && props.layout === "calendar") onCleanup(mountCalendarScroll(containerRef));
-    onCleanup(closeChartInspectionOnOutside({
-      container: () => containerRef,
-      tooltip: () => chartTooltipRef,
-      close: closeChartTooltip,
-      keepScroll: () => props.kind === "heatmap" && props.layout === "calendar"
-    }));
-  });
-  const chartStyle = () => props.style ?? (props.kind === "stateTimeline" ? {
-    height: `${stateTimelineHeight(props.rows.length, props.legend !== false)}px`
-  } : undefined);
-  const control = (label, shortcut, icon, action) => _$createComponent(IconButton, {
-    variant: "secondary",
-    label: label,
-    tooltip: `${label} (${shortcut})`,
-    onClick: action,
-    get children() {
-      var _el$ = _$getNextElement(_tmpl$);
-      _$className(_el$, `ti ${icon}`);
-      return _el$;
-    }
-  });
-  return _$createComponent(Show, {
-    get when() {
-      return !isEmpty(props);
-    },
-    get fallback() {
-      return (() => {
-        var _el$16 = _$getNextElement(_tmpl$5);
-        var _ref$4 = containerRef;
-        typeof _ref$4 === "function" ? _$use(_ref$4, _el$16) : containerRef = _el$16;
-        _$insert(_el$16, () => labels().empty ?? messages().noData);
-        _$effect(_p$ => {
-          var _v$13 = `k2b-chart k2b-chart__empty ${props.class ?? ""}`,
-            _v$14 = chartStyle();
-          _v$13 !== _p$.e && _$className(_el$16, _p$.e = _v$13);
-          _p$.t = _$style(_el$16, _v$14, _p$.t);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        return _el$16;
-      })();
-    },
-    get children() {
-      var _el$2 = _$getNextElement(_tmpl$4),
-        _el$12 = _el$2.firstChild,
-        [_el$13, _co$4] = _$getNextMarker(_el$12.nextSibling),
-        _el$4 = _el$13.nextSibling,
-        _el$5 = _el$4.nextSibling,
-        _el$6 = _el$5.nextSibling,
-        _el$14 = _el$6.nextSibling,
-        [_el$15, _co$5] = _$getNextMarker(_el$14.nextSibling);
-      _el$2.$$keydown = handleKeyDown;
-      _el$2.addEventListener("wheel", handleWheel);
-      _el$2.$$focusout = closeChartTooltip;
-      _$addEventListener(_el$2, "focusin", inspection.focus, true);
-      _$addEventListener(_el$2, "pointerleave", inspection.leave);
-      _$addEventListener(_el$2, "click", inspection.click, true);
-      _el$2.addEventListener("pointercancel", stopDragging);
-      _el$2.$$pointerup = stopDragging;
-      _el$2.$$pointermove = handlePointerMove;
-      _el$2.$$pointerdown = handlePointerDown;
-      var _ref$ = containerRef;
-      typeof _ref$ === "function" ? _$use(_ref$, _el$2) : containerRef = _el$2;
-      _$insert(_el$2, _$createComponent(Show, {
-        get when() {
-          return topLegend();
-        },
-        get children() {
-          var _el$3 = _$getNextElement(_tmpl$2);
-          _$insert(_el$3, _$createComponent(For, {
-            get each() {
-              return legendSeries();
-            },
-            children: (series, index) => (() => {
-              var _el$17 = _$getNextElement(_tmpl$7),
-                _el$18 = _el$17.firstChild,
-                _el$19 = _el$18.firstChild,
-                _el$20 = _el$18.nextSibling,
-                _el$22 = _el$20.nextSibling,
-                [_el$23, _co$6] = _$getNextMarker(_el$22.nextSibling);
-              _$insert(_el$20, (() => {
-                var _c$ = _$memo(() => !!(series.label && series.label.length > 0));
-                return () => _c$() ? series.label : `${chartMessages().series} ${index() + 1}`;
-              })());
-              _$insert(_el$17, _$createComponent(Show, {
-                get when() {
-                  return props.kind === "area";
-                },
-                get children() {
-                  var _el$21 = _$getNextElement(_tmpl$6);
-                  _$insert(_el$21, () => legendValue(index()));
-                  _$effect(_p$ => {
-                    var _v$15 = index(),
-                      _v$16 = props.kind === "area" && props.normalize ? "percent" : "value",
-                      _v$17 = legendValue(index());
-                    _v$15 !== _p$.e && _$setAttribute(_el$21, "data-series-index", _p$.e = _v$15);
-                    _v$16 !== _p$.t && _$setAttribute(_el$21, "data-field", _p$.t = _v$16);
-                    _v$17 !== _p$.a && _$setAttribute(_el$21, "data-default", _p$.a = _v$17);
-                    return _p$;
-                  }, {
-                    e: undefined,
-                    t: undefined,
-                    a: undefined
-                  });
-                  return _el$21;
-                }
-              }), _el$23, _co$6);
-              _$effect(_p$ => {
-                var _v$18 = `stdlib-chart k2b-chart__legend-swatch ${props.kind === "line" ? props.className ?? "" : ""}`,
-                  _v$19 = `stdlib-chart-series-${index() % 8}`,
-                  _v$20 = `var(--stdlib-chart-c${index() % 8 + 1}, ${["#2563eb", "#16a34a", "#d97706", "#dc2626", "#a855f7", "#0891b2", "#db2777", "#65a30d"][index() % 8]})`;
-                _v$18 !== _p$.e && _$setAttribute(_el$18, "class", _p$.e = _v$18);
-                _v$19 !== _p$.t && _$setAttribute(_el$19, "class", _p$.t = _v$19);
-                _v$20 !== _p$.a && _$setAttribute(_el$19, "fill", _p$.a = _v$20);
-                return _p$;
-              }, {
-                e: undefined,
-                t: undefined,
-                a: undefined
-              });
-              return _el$17;
-            })()
-          }));
-          _$effect(() => _$setAttribute(_el$3, "aria-label", chartMessages().chartLegend));
-          return _el$3;
-        }
-      }), _el$13, _co$4);
-      var _ref$2 = lineAnchorRef;
-      typeof _ref$2 === "function" ? _$use(_ref$2, _el$5) : lineAnchorRef = _el$5;
-      var _ref$3 = chartTooltipRef;
-      typeof _ref$3 === "function" ? _$use(_ref$3, _el$6) : chartTooltipRef = _el$6;
-      _$setAttribute(_el$6, "id", chartTooltipId);
-      _$insert(_el$2, _$createComponent(Show, {
-        get when() {
-          return draggable();
-        },
-        get children() {
-          var _el$7 = _$getNextElement(_tmpl$3),
-            _el$8 = _el$7.firstChild,
-            [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling),
-            _el$0 = _el$9.nextSibling,
-            [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling),
-            _el$10 = _el$1.nextSibling,
-            [_el$11, _co$3] = _$getNextMarker(_el$10.nextSibling);
-          _$insert(_el$7, () => control(labels().zoomIn ?? viewportMessages().zoomIn, "+", "ti-plus", () => zoom(1)), _el$9, _co$);
-          _$insert(_el$7, () => control(labels().zoomOut ?? viewportMessages().zoomOut, "-", "ti-minus", () => zoom(-1)), _el$1, _co$2);
-          _$insert(_el$7, () => control(interactiveMap() ? labels().resetMap ?? chartMessages().resetMapView : labels().resetTimeline ?? chartMessages().resetTimelineView, "0", "ti-focus-centered", reset), _el$11, _co$3);
-          return _el$7;
-        }
-      }), _el$15, _co$5);
-      _$effect(_p$ => {
-        var _v$ = `k2b-chart ${props.class ?? ""}`,
-          _v$2 = props.kind,
-          _v$3 = topLegend() ? "top-start" : undefined,
-          _v$4 = draggable() ? dragging() ? "active" : "idle" : undefined,
-          _v$5 = !draggable() && props.kind === "line" ? "true" : undefined,
-          _v$6 = chartStyle(),
-          _v$7 = accessibleName(),
-          _v$8 = accessibleName() !== chartMessages().interactiveChart ? chartMessages().interactiveChart : undefined,
-          _v$9 = !calendar() && !preservesAspectRatio(props.kind) ? "true" : undefined,
-          _v$0 = calendar() ? `${calendar().minWidth}px` : undefined,
-          _v$1 = `${size().width}px`,
-          _v$10 = `${size().height}px`,
-          _v$11 = `${size().width} / ${size().height}`,
-          _v$12 = isServer ? selectedChartSvg(svgMarkup(), props.selected) : svgMarkup();
-        _v$ !== _p$.e && _$className(_el$2, _p$.e = _v$);
-        _v$2 !== _p$.t && _$setAttribute(_el$2, "data-chart-kind", _p$.t = _v$2);
-        _v$3 !== _p$.a && _$setAttribute(_el$2, "data-legend-placement", _p$.a = _v$3);
-        _v$4 !== _p$.o && _$setAttribute(_el$2, "data-drag", _p$.o = _v$4);
-        _v$5 !== _p$.i && _$setAttribute(_el$2, "data-crosshair", _p$.i = _v$5);
-        _p$.n = _$style(_el$2, _v$6, _p$.n);
-        _v$7 !== _p$.s && _$setAttribute(_el$2, "aria-label", _p$.s = _v$7);
-        _v$8 !== _p$.h && _$setAttribute(_el$2, "aria-description", _p$.h = _v$8);
-        _v$9 !== _p$.r && _$setAttribute(_el$4, "data-stretch", _p$.r = _v$9);
-        _v$0 !== _p$.d && _$setStyleProperty(_el$4, "min-width", _p$.d = _v$0);
-        _v$1 !== _p$.l && _$setStyleProperty(_el$4, "--k2b-chart-width", _p$.l = _v$1);
-        _v$10 !== _p$.u && _$setStyleProperty(_el$4, "--k2b-chart-height", _p$.u = _v$10);
-        _v$11 !== _p$.c && _$setStyleProperty(_el$4, "aspect-ratio", _p$.c = _v$11);
-        _v$12 !== _p$.w && _$setProperty(_el$4, "innerHTML", _p$.w = _v$12);
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined,
-        a: undefined,
-        o: undefined,
-        i: undefined,
-        n: undefined,
-        s: undefined,
-        h: undefined,
-        r: undefined,
-        d: undefined,
-        l: undefined,
-        u: undefined,
-        c: undefined,
-        w: undefined
-      });
-      _$runHydrationEvents();
-      return _el$2;
-    }
-  });
-};
+const ChartRoot = props => renderChartRoot(props, renderChartSvg);
 // Add a renderer to charts/core/registry.ts; its key defines the namespace member and discriminator.
 // Both entry styles share ChartRoot, preserving the same owner, markup and reactive props.
 const chartComponent = kind => props =>
@@ -627,13 +11,15 @@ const chartComponent = kind => props =>
 ChartRoot(mergeProps(props, {
   kind
 }));
-const components = Object.fromEntries(Object.entries(chartKinds).map(([name, kind]) => [name, chartComponent(kind)]));
-const Chart = Object.assign(ChartRoot, components, {
-  Calendar: props => ChartRoot(mergeProps(props, {
-    kind: "heatmap",
-    layout: "calendar"
-  }))
-});
+const createChart = () => {
+  const components = Object.fromEntries(Object.entries(chartKinds).map(([name, kind]) => [name, chartComponent(kind)]));
+  return Object.assign(ChartRoot, components, {
+    Calendar: props => ChartRoot(mergeProps(props, {
+      kind: "heatmap",
+      layout: "calendar"
+    }))
+  });
+};
+const Chart = /* @__PURE__ */createChart();
 export default Chart;
-_$delegateEvents(["pointerdown", "pointermove", "pointerup", "click", "focusin", "focusout", "keydown"]);
 //# sourceMappingURL=Chart.js.map