@gunkin/uiify 0.0.3-alpha → 0.0.4-alpha

package/dist/components/internal/chart-scrollbar/use-scrollbar-reserve.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/internal/chart-scrollbar/use-scrollbar-reserve.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, type RefObject } from \"react\";\n\n/**\n * Publishes the horizontal scrollbar thickness of a chart's\n * `[data-part=\"scroll-viewport\"]` as `variable` on the chart element, so the\n * plot grid can reserve that height below the time axis. A classic scrollbar\n * otherwise takes its height from the scroll viewport, and the flexible\n * candle row absorbs it, misaligning the value axis. Overlay scrollbars\n * measure 0. Read from ResizeObserver box sizes: no forced layout.\n */\nexport function useScrollbarReserve(\n  chartRef: RefObject<HTMLElement | null>,\n  variable: `--${string}`,\n): void {\n  useEffect(() => {\n    const chart = chartRef.current;\n    const scroller = chart?.querySelector<HTMLElement>('[data-part=\"scroll-viewport\"]');\n    if (!chart || !scroller || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(([entry]) => {\n      const border = entry?.borderBoxSize[0]?.blockSize;\n      const content = entry?.contentBoxSize[0]?.blockSize;\n      if (border === undefined || content === undefined) return;\n      // The scroll viewport has no padding or border, so the difference is the scrollbar.\n      chart.style.setProperty(variable, `${Math.max(0, border - content)}px`);\n    });\n    observer.observe(scroller);\n    return () => observer.disconnect();\n  }, [chartRef, variable]);\n}\n"],"mappings":";AAEA,SAAS,iBAAiC;AAUnC,SAAS,oBACd,UACA,UACM;AACN,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,UAAM,WAAW,OAAO,cAA2B,+BAA+B;AAClF,QAAI,CAAC,SAAS,CAAC,YAAY,OAAO,mBAAmB,YAAa;AAClE,UAAM,WAAW,IAAI,eAAe,CAAC,CAAC,KAAK,MAAM;AAC/C,YAAM,SAAS,OAAO,cAAc,CAAC,GAAG;AACxC,YAAM,UAAU,OAAO,eAAe,CAAC,GAAG;AAC1C,UAAI,WAAW,UAAa,YAAY,OAAW;AAEnD,YAAM,MAAM,YAAY,UAAU,GAAG,KAAK,IAAI,GAAG,SAAS,OAAO,CAAC,IAAI;AAAA,IACxE,CAAC;AACD,aAAS,QAAQ,QAAQ;AACzB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,QAAQ,CAAC;AACzB;","names":[]}

package/dist/components/internal/live-chart/types.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode, RefObject } from "react";
+import type { VirtualScrollHandle, VirtualScrollRangeChange } from "../../virtual-scroll/types.js";
+export interface LiveChartAxisLabel {
+    readonly label: ReactNode;
+    /** Position across the whole scrolled content, as a percentage from 0 to 100. */
+    readonly position: number;
+}
+export interface UseLiveChartWindowOptions {
+    /** Total number of items (candles or points) in the chart. */
+    readonly count: number;
+    /** Items that fill the viewport; `undefined` or `0` turns live mode off. */
+    readonly visibleCount: number | undefined;
+    /** Measured width of one item slot, in CSS pixels. */
+    readonly itemWidth: number;
+    /** Measured content height of the chart `<figure>`, once known. */
+    readonly figureHeight: number | undefined;
+    /** Custom property that receives the scroll offset, e.g. `--candle-scroll-x`. */
+    readonly scrollVariable: `--${string}`;
+}
+export interface UseLiveChartWindowResult {
+    readonly live: boolean;
+    /** Pass to the chart's VirtualScroll `scrollRef`. */
+    readonly scrollRef: RefObject<VirtualScrollHandle | null>;
+    /** Merge into the chart `<figure>` ref; the scroll offset variable is written there. */
+    readonly chartRef: RefObject<HTMLElement | null>;
+    /** Pass to the chart's VirtualScroll `onRangeChange`. */
+    readonly onRangeChange: (range: VirtualScrollRangeChange) => void;
+    /** Visible slice `[sliceStart, sliceEnd)` that drives the scale, readout, and table. */
+    readonly sliceStart: number;
+    readonly sliceEnd: number;
+    /** Width of all item slots, in CSS pixels. */
+    readonly contentSize: number;
+    /** Block size of the item viewport, in CSS pixels. */
+    readonly plotHeight: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/internal/live-chart/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/live-chart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAEnG,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,iFAAiF;IACjF,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,yBAAyB;IACxC,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,4EAA4E;IAC5E,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,sDAAsD;IACtD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,mEAAmE;IACnE,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,iFAAiF;IACjF,QAAQ,CAAC,cAAc,EAAE,KAAK,MAAM,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IAC1D,wFAAwF;IACxF,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACjD,yDAAyD;IACzD,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAClE,wFAAwF;IACxF,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,sDAAsD;IACtD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B"}

package/dist/components/internal/live-chart/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/internal/live-chart/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/internal/live-chart/use-live-chart-window.d.ts

@@ -0,0 +1,18 @@
+import type { LiveChartAxisLabel, UseLiveChartWindowOptions, UseLiveChartWindowResult } from "./types.js";
+/**
+ * Time ticks pinned to absolute item indices and positioned at slot centers
+ * across the whole scrolled content, so labels scroll with their items. Only
+ * ticks near the visible slice are returned.
+ */
+export declare function liveTimeAxis(data: readonly {
+    readonly time: string | number;
+}[], start: number, end: number, visibleCount: number): LiveChartAxisLabel[];
+/**
+ * Live chart window over a horizontal VirtualScroll: follows appends while the
+ * reader is at the newest item, leaves a scrolled-back reader in place, and
+ * reports the visible slice. The chart pins the scroll position itself rather
+ * than using VirtualScroll's `anchor`, and publishes the offset as a CSS
+ * variable so axes and crosshairs scroll without re-rendering.
+ */
+export declare function useLiveChartWindow(options: UseLiveChartWindowOptions): UseLiveChartWindowResult;
+//# sourceMappingURL=use-live-chart-window.d.ts.map

package/dist/components/internal/live-chart/use-live-chart-window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-live-chart-window.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/live-chart/use-live-chart-window.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,kBAAkB,EAClB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,YAAY,CAAC;AAQpB;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,SAAS;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,EACnD,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,MAAM,GACnB,kBAAkB,EAAE,CAYtB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,wBAAwB,CAqE/F"}

package/dist/components/internal/live-chart/use-live-chart-window.js

@@ -0,0 +1,75 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../../../hooks/use-isomorphic-layout-effect.js";
+const TIME_AXIS_ROW_HEIGHT = 24;
+const MIN_PLOT_HEIGHT = 288;
+const LIVE_TIME_TICKS = 4;
+function liveTimeAxis(data, start, end, visibleCount) {
+  const step = Math.max(1, Math.ceil(visibleCount / LIVE_TIME_TICKS));
+  const labels = [];
+  const first = Math.max(0, Math.floor(start / step) - 1) * step;
+  const last = Math.min(data.length, end + step);
+  for (let index = first; index < last; index += step) {
+    labels.push({
+      label: String(data[index]?.time),
+      position: (index + 0.5) / data.length * 100
+    });
+  }
+  return labels;
+}
+function useLiveChartWindow(options) {
+  const { count, visibleCount = 0, itemWidth, figureHeight, scrollVariable } = options;
+  const live = visibleCount > 0;
+  const scrollRef = useRef(null);
+  const chartRef = useRef(null);
+  const [visibleRange, setVisibleRange] = useState(null);
+  const [following, setFollowing] = useState(true);
+  const contentSize = count * itemWidth;
+  const viewportWidth = itemWidth * visibleCount;
+  const layoutRef = useRef({ contentSize, itemWidth, viewportWidth });
+  layoutRef.current = { contentSize, itemWidth, viewportWidth };
+  useEffect(() => {
+    if (!live) return;
+    const element = scrollRef.current?.element;
+    const chart = chartRef.current;
+    if (!element || !chart) return;
+    const onScroll = () => {
+      const offset = element.scrollLeft;
+      chart.style.setProperty(scrollVariable, `${offset}px`);
+      const layout = layoutRef.current;
+      setFollowing(
+        offset + layout.viewportWidth >= layout.contentSize - Math.max(1, layout.itemWidth)
+      );
+    };
+    element.addEventListener("scroll", onScroll, { passive: true });
+    return () => element.removeEventListener("scroll", onScroll);
+  }, [live, scrollVariable]);
+  useIsomorphicLayoutEffect(() => {
+    if (!live || !following) return;
+    const element = scrollRef.current?.element;
+    const chart = chartRef.current;
+    if (!element || !chart) return;
+    const end = Math.max(0, contentSize - viewportWidth);
+    element.scrollLeft = end;
+    chart.style.setProperty(scrollVariable, `${end}px`);
+  }, [live, following, contentSize, viewportWidth, scrollVariable]);
+  const tail = following || !visibleRange;
+  const sliceStart = tail ? Math.max(0, count - visibleCount) : Math.min(visibleRange.startIndex, Math.max(0, count - 1));
+  const sliceEnd = tail ? count : Math.min(count, Math.max(sliceStart + 1, visibleRange.endIndex + 1));
+  const plotHeight = figureHeight === void 0 ? MIN_PLOT_HEIGHT : Math.max(MIN_PLOT_HEIGHT, figureHeight - TIME_AXIS_ROW_HEIGHT);
+  return {
+    live,
+    scrollRef,
+    chartRef,
+    onRangeChange: setVisibleRange,
+    sliceStart,
+    sliceEnd,
+    contentSize,
+    plotHeight
+  };
+}
+export {
+  liveTimeAxis,
+  useLiveChartWindow
+};
+//# sourceMappingURL=use-live-chart-window.js.map

package/dist/components/internal/live-chart/use-live-chart-window.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/internal/live-chart/use-live-chart-window.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../../../hooks/use-isomorphic-layout-effect.js\";\nimport type { VirtualScrollHandle, VirtualScrollRangeChange } from \"../../virtual-scroll/types.js\";\nimport type {\n  LiveChartAxisLabel,\n  UseLiveChartWindowOptions,\n  UseLiveChartWindowResult,\n} from \"./types.js\";\n\n/** The plot's 1.5rem time-axis row below the item viewport (candle-chart.css, line-chart.css). */\nconst TIME_AXIS_ROW_HEIGHT = 24;\n/** The item viewport's 18rem minimum block size, used until the figure is measured. */\nconst MIN_PLOT_HEIGHT = 288;\nconst LIVE_TIME_TICKS = 4;\n\n/**\n * Time ticks pinned to absolute item indices and positioned at slot centers\n * across the whole scrolled content, so labels scroll with their items. Only\n * ticks near the visible slice are returned.\n */\nexport function liveTimeAxis(\n  data: readonly { readonly time: string | number }[],\n  start: number,\n  end: number,\n  visibleCount: number,\n): LiveChartAxisLabel[] {\n  const step = Math.max(1, Math.ceil(visibleCount / LIVE_TIME_TICKS));\n  const labels: LiveChartAxisLabel[] = [];\n  const first = Math.max(0, Math.floor(start / step) - 1) * step;\n  const last = Math.min(data.length, end + step);\n  for (let index = first; index < last; index += step) {\n    labels.push({\n      label: String(data[index]?.time),\n      position: ((index + 0.5) / data.length) * 100,\n    });\n  }\n  return labels;\n}\n\n/**\n * Live chart window over a horizontal VirtualScroll: follows appends while the\n * reader is at the newest item, leaves a scrolled-back reader in place, and\n * reports the visible slice. The chart pins the scroll position itself rather\n * than using VirtualScroll's `anchor`, and publishes the offset as a CSS\n * variable so axes and crosshairs scroll without re-rendering.\n */\nexport function useLiveChartWindow(options: UseLiveChartWindowOptions): UseLiveChartWindowResult {\n  const { count, visibleCount = 0, itemWidth, figureHeight, scrollVariable } = options;\n  const live = visibleCount > 0;\n  const scrollRef = useRef<VirtualScrollHandle>(null);\n  const chartRef = useRef<HTMLElement | null>(null);\n  const [visibleRange, setVisibleRange] = useState<VirtualScrollRangeChange | null>(null);\n  // True while the reader sits at the newest item; appends then keep it in view.\n  const [following, setFollowing] = useState(true);\n  const contentSize = count * itemWidth;\n  const viewportWidth = itemWidth * visibleCount;\n  const layoutRef = useRef({ contentSize, itemWidth, viewportWidth });\n  layoutRef.current = { contentSize, itemWidth, viewportWidth };\n\n  // Publish the scroll offset (a CSS variable, so scrolling re-renders nothing)\n  // and track whether the reader is at the end.\n  useEffect(() => {\n    if (!live) return;\n    const element = scrollRef.current?.element;\n    const chart = chartRef.current;\n    if (!element || !chart) return;\n    const onScroll = (): void => {\n      const offset = element.scrollLeft; // banned-read-ok: scroll position drives the axis offset.\n      chart.style.setProperty(scrollVariable, `${offset}px`);\n      const layout = layoutRef.current;\n      // Within one item of the end counts: an item appended while the reader\n      // scrolls there moves the end by exactly one item width.\n      setFollowing(\n        offset + layout.viewportWidth >= layout.contentSize - Math.max(1, layout.itemWidth),\n      );\n    };\n    element.addEventListener(\"scroll\", onScroll, { passive: true });\n    return () => element.removeEventListener(\"scroll\", onScroll);\n  }, [live, scrollVariable]);\n\n  // Keep the newest item in view while following: on appends, resizes, and once measured.\n  useIsomorphicLayoutEffect(() => {\n    if (!live || !following) return;\n    const element = scrollRef.current?.element;\n    const chart = chartRef.current;\n    if (!element || !chart) return;\n    const end = Math.max(0, contentSize - viewportWidth);\n    element.scrollLeft = end; // banned-read-ok: pin the newest item before paint.\n    chart.style.setProperty(scrollVariable, `${end}px`);\n  }, [live, following, contentSize, viewportWidth, scrollVariable]);\n\n  // While following, the slice is the tail, so an append rescales in the same\n  // commit that adds the item.\n  const tail = following || !visibleRange;\n  const sliceStart = tail\n    ? Math.max(0, count - visibleCount)\n    : Math.min(visibleRange.startIndex, Math.max(0, count - 1));\n  const sliceEnd = tail\n    ? count\n    : Math.min(count, Math.max(sliceStart + 1, visibleRange.endIndex + 1));\n  const plotHeight =\n    figureHeight === undefined\n      ? MIN_PLOT_HEIGHT\n      : Math.max(MIN_PLOT_HEIGHT, figureHeight - TIME_AXIS_ROW_HEIGHT);\n\n  return {\n    live,\n    scrollRef,\n    chartRef,\n    onRangeChange: setVisibleRange,\n    sliceStart,\n    sliceEnd,\n    contentSize,\n    plotHeight,\n  };\n}\n"],"mappings":";AAEA,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,iCAAiC;AAS1C,MAAM,uBAAuB;AAE7B,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAOjB,SAAS,aACd,MACA,OACA,KACA,cACsB;AACtB,QAAM,OAAO,KAAK,IAAI,GAAG,KAAK,KAAK,eAAe,eAAe,CAAC;AAClE,QAAM,SAA+B,CAAC;AACtC,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,IAAI;AAC1D,QAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,MAAM,IAAI;AAC7C,WAAS,QAAQ,OAAO,QAAQ,MAAM,SAAS,MAAM;AACnD,WAAO,KAAK;AAAA,MACV,OAAO,OAAO,KAAK,KAAK,GAAG,IAAI;AAAA,MAC/B,WAAY,QAAQ,OAAO,KAAK,SAAU;AAAA,IAC5C,CAAC;AAAA,EACH;AACA,SAAO;AACT;AASO,SAAS,mBAAmB,SAA8D;AAC/F,QAAM,EAAE,OAAO,eAAe,GAAG,WAAW,cAAc,eAAe,IAAI;AAC7E,QAAM,OAAO,eAAe;AAC5B,QAAM,YAAY,OAA4B,IAAI;AAClD,QAAM,WAAW,OAA2B,IAAI;AAChD,QAAM,CAAC,cAAc,eAAe,IAAI,SAA0C,IAAI;AAEtF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,cAAc,QAAQ;AAC5B,QAAM,gBAAgB,YAAY;AAClC,QAAM,YAAY,OAAO,EAAE,aAAa,WAAW,cAAc,CAAC;AAClE,YAAU,UAAU,EAAE,aAAa,WAAW,cAAc;AAI5D,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,UAAU,UAAU,SAAS;AACnC,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,WAAW,CAAC,MAAO;AACxB,UAAM,WAAW,MAAY;AAC3B,YAAM,SAAS,QAAQ;AACvB,YAAM,MAAM,YAAY,gBAAgB,GAAG,MAAM,IAAI;AACrD,YAAM,SAAS,UAAU;AAGzB;AAAA,QACE,SAAS,OAAO,iBAAiB,OAAO,cAAc,KAAK,IAAI,GAAG,OAAO,SAAS;AAAA,MACpF;AAAA,IACF;AACA,YAAQ,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AAC9D,WAAO,MAAM,QAAQ,oBAAoB,UAAU,QAAQ;AAAA,EAC7D,GAAG,CAAC,MAAM,cAAc,CAAC;AAGzB,4BAA0B,MAAM;AAC9B,QAAI,CAAC,QAAQ,CAAC,UAAW;AACzB,UAAM,UAAU,UAAU,SAAS;AACnC,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,WAAW,CAAC,MAAO;AACxB,UAAM,MAAM,KAAK,IAAI,GAAG,cAAc,aAAa;AACnD,YAAQ,aAAa;AACrB,UAAM,MAAM,YAAY,gBAAgB,GAAG,GAAG,IAAI;AAAA,EACpD,GAAG,CAAC,MAAM,WAAW,aAAa,eAAe,cAAc,CAAC;AAIhE,QAAM,OAAO,aAAa,CAAC;AAC3B,QAAM,aAAa,OACf,KAAK,IAAI,GAAG,QAAQ,YAAY,IAChC,KAAK,IAAI,aAAa,YAAY,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC;AAC5D,QAAM,WAAW,OACb,QACA,KAAK,IAAI,OAAO,KAAK,IAAI,aAAa,GAAG,aAAa,WAAW,CAAC,CAAC;AACvE,QAAM,aACJ,iBAAiB,SACb,kBACA,KAAK,IAAI,iBAAiB,eAAe,oBAAoB;AAEnE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/components/line-chart/LineChart.d.ts

@@ -1,5 +1,10 @@
 import type { ElementType, ReactElement } from "react";
-import type { LineChartProps } from "./types.js";
+import type { LineChartPointProps, LineChartProps } from "./types.js";
+/** One point and the segment from its predecessor; shared by the static list and virtual rows. */
+export declare function LineChartPoint({ as: Tag, point, previousPoint, index, count, min, max, interactive, isActive, isSelected, cursorY, onPointClick, onPointPointerLeave, onPointPointerMove, }: LineChartPointProps): ReactElement;
+export declare namespace LineChartPoint {
+    var displayName: string;
+}
 export declare function LineChart<TAs extends ElementType = "figure">(props: LineChartProps<TAs>): ReactElement | null;
 export declare namespace LineChart {
     var displayName: string;

package/dist/components/line-chart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/components/line-chart/LineChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAA+B,YAAY,EAAE,MAAM,OAAO,CAAC;AAcpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,wBAAgB,SAAS,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC1D,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GACzB,YAAY,GAAG,IAAI,CAiKrB;yBAnKe,SAAS"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/components/line-chart/LineChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAA+B,YAAY,EAAE,MAAM,OAAO,CAAC;AAepF,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAsB,MAAM,YAAY,CAAC;AAE1F,kGAAkG;AAClG,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EAAE,GAAG,EACP,KAAK,EACL,aAAa,EACb,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,EACH,WAAW,EACX,QAAQ,EACR,UAAU,EACV,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,GACnB,EAAE,mBAAmB,GAAG,YAAY,CAmCpC;yBAlDe,cAAc;;;AAqD9B,wBAAgB,SAAS,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC1D,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GACzB,YAAY,GAAG,IAAI,CAqJrB;yBAvJe,SAAS"}

package/dist/components/line-chart/LineChart.js

@@ -10,8 +10,59 @@ import {
   monthLabelsFor,
   pointStyle,
   pointsStyle,
+  slotCrosshairStyle,
   valueLabelsFor
 } from "./line-chart-geometry.js";
+function LineChartPoint({
+  as: Tag,
+  point,
+  previousPoint,
+  index,
+  count,
+  min,
+  max,
+  interactive,
+  isActive,
+  isSelected,
+  cursorY,
+  onPointClick,
+  onPointPointerLeave,
+  onPointPointerMove
+}) {
+  const geometry = geometryFor(point, previousPoint, index, count, min, max);
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onPointClick?.(index);
+  };
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      "aria-hidden": interactive ? void 0 : true,
+      "data-part": "point",
+      "data-first": previousPoint === void 0 ? "" : void 0,
+      "data-crosshair-active": interactive && isActive ? "" : void 0,
+      "data-point-selected": interactive && isSelected ? "" : void 0,
+      "data-time": String(point.time),
+      "data-trend": geometry.trend,
+      style: pointStyle(geometry, isActive ? cursorY : void 0),
+      children: interactive ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          "data-part": "point-hit",
+          type: "button",
+          "aria-label": `Point ${String(point.time)}`,
+          "aria-pressed": isSelected,
+          onClick: () => onPointClick?.(index),
+          onKeyDown: handleKeyDown,
+          onPointerLeave: onPointPointerLeave,
+          onPointerMove: (event) => onPointPointerMove?.({ index, offsetY: event.nativeEvent.offsetY })
+        }
+      ) : null
+    }
+  );
+}
+LineChartPoint.displayName = "LineChartPoint";
 function LineChart(props) {
   const {
     as,
@@ -27,6 +78,10 @@ function LineChart(props) {
     onPointPointerLeave,
     onPointPointerMove,
     selectedPointIndex,
+    pointLayer,
+    announceReadout = true,
+    slotCount,
+    slotOffset = 0,
     ...consumerProps
   } = props;
   const { min, max } = getValueBounds(data);
@@ -36,41 +91,27 @@ function LineChart(props) {
   const readoutIndex = activePointIndex ?? selectedPointIndex ?? (data.length > 0 ? data.length - 1 : void 0);
   const readoutPoint = readoutIndex === void 0 ? void 0 : data[readoutIndex];
   const crosshairPoint = activePointIndex === void 0 ? void 0 : data[activePointIndex];
-  const points = data.map((point, index) => {
-    const geometry = geometryFor(point, data[index - 1], index, data.length, min, max);
-    const isActive = activePointIndex === index;
-    const isSelected = selectedPointIndex === index;
-    const handleKeyDown = (event) => {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      onPointClick?.(index);
-    };
-    return /* @__PURE__ */ jsx(
-      "li",
-      {
-        "aria-hidden": interactive ? void 0 : true,
-        "data-crosshair-active": interactive && isActive ? "" : void 0,
-        "data-point-selected": interactive && isSelected ? "" : void 0,
-        "data-time": String(point.time),
-        "data-trend": geometry.trend,
-        style: pointStyle(geometry, isActive ? cursorY : void 0),
-        children: interactive ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            "data-part": "point-hit",
-            type: "button",
-            "aria-label": `Point ${String(point.time)}`,
-            "aria-pressed": isSelected,
-            onClick: () => onPointClick?.(index),
-            onKeyDown: handleKeyDown,
-            onPointerLeave: onPointPointerLeave,
-            onPointerMove: (event) => onPointPointerMove?.({ index, offsetY: event.nativeEvent.offsetY })
-          }
-        ) : null
-      },
-      `${point.time}-${index}`
-    );
-  });
+  const points = pointLayer ?? /* @__PURE__ */ jsx("ol", { "data-part": "points", "aria-label": `${label} points`, style: pointsStyle(data.length), children: data.map((point, index) => /* @__PURE__ */ jsx(
+    LineChartPoint,
+    {
+      as: "li",
+      point,
+      previousPoint: data[index - 1],
+      index,
+      count: data.length,
+      min,
+      max,
+      interactive,
+      isActive: activePointIndex === index,
+      isSelected: selectedPointIndex === index,
+      cursorY,
+      onPointClick,
+      onPointPointerLeave,
+      onPointPointerMove
+    },
+    `${point.time}-${index}`
+  )) });
+  const crosshairFor = (index, y) => slotCount === void 0 ? crosshairStyle(index, data.length, y) : slotCrosshairStyle(slotOffset + index, slotCount, y);
   return useRenderElement({
     as,
     defaultTag: "figure",
@@ -81,28 +122,20 @@ function LineChart(props) {
       "data-interactive": interactive ? "" : void 0,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("figcaption", { children: label }),
-        interactive && readoutPoint ? /* @__PURE__ */ jsxs("div", { "data-part": "readout", "aria-live": "polite", children: [
+        interactive && readoutPoint ? /* @__PURE__ */ jsxs("div", { "data-part": "readout", "aria-live": announceReadout ? "polite" : "off", children: [
           /* @__PURE__ */ jsx("span", { "data-part": "readout-time", children: String(readoutPoint.time) }),
           /* @__PURE__ */ jsx("span", { children: readoutPoint.value })
         ] }) : null,
         /* @__PURE__ */ jsxs("div", { "data-part": "plot", "aria-hidden": interactive ? void 0 : true, children: [
           /* @__PURE__ */ jsx("div", { "data-part": "scroll-viewport", children: /* @__PURE__ */ jsxs("div", { "data-part": "canvas", children: [
             /* @__PURE__ */ jsxs("div", { "data-part": "viewport", children: [
-              /* @__PURE__ */ jsx(
-                "ol",
-                {
-                  "data-part": "points",
-                  "aria-label": `${label} points`,
-                  style: pointsStyle(data.length),
-                  children: points
-                }
-              ),
+              points,
               interactive && crosshairPoint && activePointIndex !== void 0 ? /* @__PURE__ */ jsx(
                 "div",
                 {
                   "data-part": "crosshair",
                   "aria-hidden": "true",
-                  style: crosshairStyle(activePointIndex, data.length, cursorY),
+                  style: crosshairFor(activePointIndex, cursorY),
                   children: /* @__PURE__ */ jsx("span", { "data-part": "crosshair-marker", children: "+" })
                 }
               ) : null
@@ -120,7 +153,7 @@ function LineChart(props) {
                 "li",
                 {
                   "data-part": "crosshair-time",
-                  style: crosshairStyle(activePointIndex, data.length, void 0),
+                  style: crosshairFor(activePointIndex, void 0),
                   children: String(crosshairPoint.time)
                 }
               ) : null
@@ -156,6 +189,7 @@ function LineChart(props) {
 }
 LineChart.displayName = "LineChart";
 export {
-  LineChart
+  LineChart,
+  LineChartPoint
 };
 //# sourceMappingURL=LineChart.js.map

package/dist/components/line-chart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/line-chart/LineChart.tsx"],"sourcesContent":["import type { ElementType, KeyboardEvent, PointerEvent, ReactElement } from \"react\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport {\n  axisLabelsFor,\n  axisStyle,\n  crosshairStyle,\n  cursorStyle,\n  geometryFor,\n  getValueBounds,\n  monthLabelsFor,\n  pointStyle,\n  pointsStyle,\n  valueLabelsFor,\n} from \"./line-chart-geometry.js\";\nimport type { LineChartProps } from \"./types.js\";\n\nexport function LineChart<TAs extends ElementType = \"figure\">(\n  props: LineChartProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    data,\n    xAxis,\n    yAxis,\n    \"aria-label\": ariaLabel,\n    activePointIndex,\n    cursorY,\n    interactive = false,\n    onPointClick,\n    onPointPointerLeave,\n    onPointPointerMove,\n    selectedPointIndex,\n    ...consumerProps\n  } = props as LineChartProps<\"figure\">;\n  const { min, max } = getValueBounds(data);\n  const label = ariaLabel ?? \"Line chart\";\n  const timeLabels = axisLabelsFor(xAxis, monthLabelsFor(data));\n  const valueLabels = axisLabelsFor(yAxis, valueLabelsFor(min, max));\n  const readoutIndex =\n    activePointIndex ?? selectedPointIndex ?? (data.length > 0 ? data.length - 1 : undefined);\n  const readoutPoint = readoutIndex === undefined ? undefined : data[readoutIndex];\n  const crosshairPoint = activePointIndex === undefined ? undefined : data[activePointIndex];\n  const points = data.map((point, index) => {\n    const geometry = geometryFor(point, data[index - 1], index, data.length, min, max);\n    const isActive = activePointIndex === index;\n    const isSelected = selectedPointIndex === index;\n    const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n      if (event.key !== \"Enter\" && event.key !== \" \") return;\n      event.preventDefault();\n      onPointClick?.(index);\n    };\n\n    return (\n      <li\n        key={`${point.time}-${index}`}\n        aria-hidden={interactive ? undefined : true}\n        data-crosshair-active={interactive && isActive ? \"\" : undefined}\n        data-point-selected={interactive && isSelected ? \"\" : undefined}\n        data-time={String(point.time)}\n        data-trend={geometry.trend}\n        style={pointStyle(geometry, isActive ? cursorY : undefined)}\n      >\n        {interactive ? (\n          <button\n            data-part=\"point-hit\"\n            type=\"button\"\n            aria-label={`Point ${String(point.time)}`}\n            aria-pressed={isSelected}\n            onClick={() => onPointClick?.(index)}\n            onKeyDown={handleKeyDown}\n            onPointerLeave={onPointPointerLeave}\n            onPointerMove={(event: PointerEvent<HTMLButtonElement>) =>\n              onPointPointerMove?.({ index, offsetY: event.nativeEvent.offsetY })\n            }\n          />\n        ) : null}\n      </li>\n    );\n  });\n\n  return useRenderElement({\n    as,\n    defaultTag: \"figure\",\n    props: {\n      ...consumerProps,\n      \"aria-label\": label,\n      \"data-uiify-line-chart\": \"\",\n      \"data-interactive\": interactive ? \"\" : undefined,\n      children: (\n        <>\n          <figcaption>{label}</figcaption>\n          {interactive && readoutPoint ? (\n            <div data-part=\"readout\" aria-live=\"polite\">\n              <span data-part=\"readout-time\">{String(readoutPoint.time)}</span>\n              <span>{readoutPoint.value}</span>\n            </div>\n          ) : null}\n          <div data-part=\"plot\" aria-hidden={interactive ? undefined : true}>\n            <div data-part=\"scroll-viewport\">\n              <div data-part=\"canvas\">\n                <div data-part=\"viewport\">\n                  <ol\n                    data-part=\"points\"\n                    aria-label={`${label} points`}\n                    style={pointsStyle(data.length)}\n                  >\n                    {points}\n                  </ol>\n                  {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                    <div\n                      data-part=\"crosshair\"\n                      aria-hidden=\"true\"\n                      style={crosshairStyle(activePointIndex, data.length, cursorY)}\n                    >\n                      <span data-part=\"crosshair-marker\">+</span>\n                    </div>\n                  ) : null}\n                </div>\n                <div data-part=\"time-viewport\">\n                  <ol data-part=\"time-axis\" data-axis=\"time\" aria-label={`${label} dates`}>\n                    {timeLabels.map((axisLabel, index) => (\n                      <li\n                        key={`${axisLabel.position}-${index}`}\n                        style={axisStyle(\"x\", axisLabel.position)}\n                      >\n                        {axisLabel.label}\n                      </li>\n                    ))}\n                    {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                      <li\n                        data-part=\"crosshair-time\"\n                        style={crosshairStyle(activePointIndex, data.length, undefined)}\n                      >\n                        {String(crosshairPoint.time)}\n                      </li>\n                    ) : null}\n                  </ol>\n                </div>\n              </div>\n            </div>\n            <ol data-part=\"value-axis\" data-axis=\"value\" aria-label={`${label} values`}>\n              {valueLabels.map((axisLabel, index) => (\n                <li\n                  key={`${axisLabel.position}-${index}`}\n                  style={axisStyle(\"y\", axisLabel.position)}\n                >\n                  {axisLabel.label}\n                </li>\n              ))}\n              {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                <li data-part=\"crosshair-value\" style={cursorStyle(cursorY)}>\n                  {crosshairPoint.value}\n                </li>\n              ) : null}\n            </ol>\n          </div>\n          <table data-part=\"data\" aria-label={`${label} data`}>\n            <thead>\n              <tr>\n                <th scope=\"col\">Time</th>\n                <th scope=\"col\">Value</th>\n              </tr>\n            </thead>\n            <tbody>\n              {data.map((point, index) => (\n                <tr key={`${point.time}-${index}`}>\n                  <th scope=\"row\">{String(point.time)}</th>\n                  <td>{point.value}</td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </>\n      ),\n    },\n    render,\n    state: {},\n  });\n}\nLineChart.displayName = \"LineChart\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/line-chart/LineChart.tsx"],"sourcesContent":["import type { ElementType, KeyboardEvent, PointerEvent, ReactElement } from \"react\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport {\n  axisLabelsFor,\n  axisStyle,\n  crosshairStyle,\n  cursorStyle,\n  geometryFor,\n  getValueBounds,\n  monthLabelsFor,\n  pointStyle,\n  pointsStyle,\n  slotCrosshairStyle,\n  valueLabelsFor,\n} from \"./line-chart-geometry.js\";\nimport type { LineChartPointProps, LineChartProps, LineChartViewProps } from \"./types.js\";\n\n/** One point and the segment from its predecessor; shared by the static list and virtual rows. */\nexport function LineChartPoint({\n  as: Tag,\n  point,\n  previousPoint,\n  index,\n  count,\n  min,\n  max,\n  interactive,\n  isActive,\n  isSelected,\n  cursorY,\n  onPointClick,\n  onPointPointerLeave,\n  onPointPointerMove,\n}: LineChartPointProps): ReactElement {\n  const geometry = geometryFor(point, previousPoint, index, count, min, max);\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key !== \"Enter\" && event.key !== \" \") return;\n    event.preventDefault();\n    onPointClick?.(index);\n  };\n\n  return (\n    <Tag\n      aria-hidden={interactive ? undefined : true}\n      data-part=\"point\"\n      data-first={previousPoint === undefined ? \"\" : undefined}\n      data-crosshair-active={interactive && isActive ? \"\" : undefined}\n      data-point-selected={interactive && isSelected ? \"\" : undefined}\n      data-time={String(point.time)}\n      data-trend={geometry.trend}\n      style={pointStyle(geometry, isActive ? cursorY : undefined)}\n    >\n      {interactive ? (\n        <button\n          data-part=\"point-hit\"\n          type=\"button\"\n          aria-label={`Point ${String(point.time)}`}\n          aria-pressed={isSelected}\n          onClick={() => onPointClick?.(index)}\n          onKeyDown={handleKeyDown}\n          onPointerLeave={onPointPointerLeave}\n          onPointerMove={(event: PointerEvent<HTMLButtonElement>) =>\n            onPointPointerMove?.({ index, offsetY: event.nativeEvent.offsetY })\n          }\n        />\n      ) : null}\n    </Tag>\n  );\n}\nLineChartPoint.displayName = \"LineChartPoint\";\n\nexport function LineChart<TAs extends ElementType = \"figure\">(\n  props: LineChartProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    data,\n    xAxis,\n    yAxis,\n    \"aria-label\": ariaLabel,\n    activePointIndex,\n    cursorY,\n    interactive = false,\n    onPointClick,\n    onPointPointerLeave,\n    onPointPointerMove,\n    selectedPointIndex,\n    pointLayer,\n    announceReadout = true,\n    slotCount,\n    slotOffset = 0,\n    ...consumerProps\n  } = props as LineChartProps<\"figure\"> & LineChartViewProps;\n  const { min, max } = getValueBounds(data);\n  const label = ariaLabel ?? \"Line chart\";\n  const timeLabels = axisLabelsFor(xAxis, monthLabelsFor(data));\n  const valueLabels = axisLabelsFor(yAxis, valueLabelsFor(min, max));\n  const readoutIndex =\n    activePointIndex ?? selectedPointIndex ?? (data.length > 0 ? data.length - 1 : undefined);\n  const readoutPoint = readoutIndex === undefined ? undefined : data[readoutIndex];\n  const crosshairPoint = activePointIndex === undefined ? undefined : data[activePointIndex];\n  const points = pointLayer ?? (\n    <ol data-part=\"points\" aria-label={`${label} points`} style={pointsStyle(data.length)}>\n      {data.map((point, index) => (\n        <LineChartPoint\n          key={`${point.time}-${index}`}\n          as=\"li\"\n          point={point}\n          previousPoint={data[index - 1]}\n          index={index}\n          count={data.length}\n          min={min}\n          max={max}\n          interactive={interactive}\n          isActive={activePointIndex === index}\n          isSelected={selectedPointIndex === index}\n          cursorY={cursorY}\n          onPointClick={onPointClick}\n          onPointPointerLeave={onPointPointerLeave}\n          onPointPointerMove={onPointPointerMove}\n        />\n      ))}\n    </ol>\n  );\n  const crosshairFor = (index: number, y: number | undefined) =>\n    slotCount === undefined\n      ? crosshairStyle(index, data.length, y)\n      : slotCrosshairStyle(slotOffset + index, slotCount, y);\n\n  return useRenderElement({\n    as,\n    defaultTag: \"figure\",\n    props: {\n      ...consumerProps,\n      \"aria-label\": label,\n      \"data-uiify-line-chart\": \"\",\n      \"data-interactive\": interactive ? \"\" : undefined,\n      children: (\n        <>\n          <figcaption>{label}</figcaption>\n          {interactive && readoutPoint ? (\n            <div data-part=\"readout\" aria-live={announceReadout ? \"polite\" : \"off\"}>\n              <span data-part=\"readout-time\">{String(readoutPoint.time)}</span>\n              <span>{readoutPoint.value}</span>\n            </div>\n          ) : null}\n          <div data-part=\"plot\" aria-hidden={interactive ? undefined : true}>\n            <div data-part=\"scroll-viewport\">\n              <div data-part=\"canvas\">\n                <div data-part=\"viewport\">\n                  {points}\n                  {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                    <div\n                      data-part=\"crosshair\"\n                      aria-hidden=\"true\"\n                      style={crosshairFor(activePointIndex, cursorY)}\n                    >\n                      <span data-part=\"crosshair-marker\">+</span>\n                    </div>\n                  ) : null}\n                </div>\n                <div data-part=\"time-viewport\">\n                  <ol data-part=\"time-axis\" data-axis=\"time\" aria-label={`${label} dates`}>\n                    {timeLabels.map((axisLabel, index) => (\n                      <li\n                        key={`${axisLabel.position}-${index}`}\n                        style={axisStyle(\"x\", axisLabel.position)}\n                      >\n                        {axisLabel.label}\n                      </li>\n                    ))}\n                    {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                      <li\n                        data-part=\"crosshair-time\"\n                        style={crosshairFor(activePointIndex, undefined)}\n                      >\n                        {String(crosshairPoint.time)}\n                      </li>\n                    ) : null}\n                  </ol>\n                </div>\n              </div>\n            </div>\n            <ol data-part=\"value-axis\" data-axis=\"value\" aria-label={`${label} values`}>\n              {valueLabels.map((axisLabel, index) => (\n                <li\n                  key={`${axisLabel.position}-${index}`}\n                  style={axisStyle(\"y\", axisLabel.position)}\n                >\n                  {axisLabel.label}\n                </li>\n              ))}\n              {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                <li data-part=\"crosshair-value\" style={cursorStyle(cursorY)}>\n                  {crosshairPoint.value}\n                </li>\n              ) : null}\n            </ol>\n          </div>\n          <table data-part=\"data\" aria-label={`${label} data`}>\n            <thead>\n              <tr>\n                <th scope=\"col\">Time</th>\n                <th scope=\"col\">Value</th>\n              </tr>\n            </thead>\n            <tbody>\n              {data.map((point, index) => (\n                <tr key={`${point.time}-${index}`}>\n                  <th scope=\"row\">{String(point.time)}</th>\n                  <td>{point.value}</td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </>\n      ),\n    },\n    render,\n    state: {},\n  });\n}\nLineChart.displayName = \"LineChart\";\n"],"mappings":"AAqDQ,SAsFA,UAtFA,KAyFI,YAzFJ;AApDR,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,SAAS,eAAe;AAAA,EAC7B,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,WAAW,YAAY,OAAO,eAAe,OAAO,OAAO,KAAK,GAAG;AACzE,QAAM,gBAAgB,CAAC,UAA4C;AACjE,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IAAK;AAChD,UAAM,eAAe;AACrB,mBAAe,KAAK;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,SAAY;AAAA,MACvC,aAAU;AAAA,MACV,cAAY,kBAAkB,SAAY,KAAK;AAAA,MAC/C,yBAAuB,eAAe,WAAW,KAAK;AAAA,MACtD,uBAAqB,eAAe,aAAa,KAAK;AAAA,MACtD,aAAW,OAAO,MAAM,IAAI;AAAA,MAC5B,cAAY,SAAS;AAAA,MACrB,OAAO,WAAW,UAAU,WAAW,UAAU,MAAS;AAAA,MAEzD,wBACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,MAAK;AAAA,UACL,cAAY,SAAS,OAAO,MAAM,IAAI,CAAC;AAAA,UACvC,gBAAc;AAAA,UACd,SAAS,MAAM,eAAe,KAAK;AAAA,UACnC,WAAW;AAAA,UACX,gBAAgB;AAAA,UAChB,eAAe,CAAC,UACd,qBAAqB,EAAE,OAAO,SAAS,MAAM,YAAY,QAAQ,CAAC;AAAA;AAAA,MAEtE,IACE;AAAA;AAAA,EACN;AAEJ;AACA,eAAe,cAAc;AAEtB,SAAS,UACd,OACqB;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,aAAa;AAAA,IACb,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,KAAK,IAAI,IAAI,eAAe,IAAI;AACxC,QAAM,QAAQ,aAAa;AAC3B,QAAM,aAAa,cAAc,OAAO,eAAe,IAAI,CAAC;AAC5D,QAAM,cAAc,cAAc,OAAO,eAAe,KAAK,GAAG,CAAC;AACjE,QAAM,eACJ,oBAAoB,uBAAuB,KAAK,SAAS,IAAI,KAAK,SAAS,IAAI;AACjF,QAAM,eAAe,iBAAiB,SAAY,SAAY,KAAK,YAAY;AAC/E,QAAM,iBAAiB,qBAAqB,SAAY,SAAY,KAAK,gBAAgB;AACzF,QAAM,SAAS,cACb,oBAAC,QAAG,aAAU,UAAS,cAAY,GAAG,KAAK,WAAW,OAAO,YAAY,KAAK,MAAM,GACjF,eAAK,IAAI,CAAC,OAAO,UAChB;AAAA,IAAC;AAAA;AAAA,MAEC,IAAG;AAAA,MACH;AAAA,MACA,eAAe,KAAK,QAAQ,CAAC;AAAA,MAC7B;AAAA,MACA,OAAO,KAAK;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,qBAAqB;AAAA,MAC/B,YAAY,uBAAuB;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAdK,GAAG,MAAM,IAAI,IAAI,KAAK;AAAA,EAe7B,CACD,GACH;AAEF,QAAM,eAAe,CAAC,OAAe,MACnC,cAAc,SACV,eAAe,OAAO,KAAK,QAAQ,CAAC,IACpC,mBAAmB,aAAa,OAAO,WAAW,CAAC;AAEzD,SAAO,iBAAiB;AAAA,IACtB;AAAA,IACA,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAG;AAAA,MACH,cAAc;AAAA,MACd,yBAAyB;AAAA,MACzB,oBAAoB,cAAc,KAAK;AAAA,MACvC,UACE,iCACE;AAAA,4BAAC,gBAAY,iBAAM;AAAA,QAClB,eAAe,eACd,qBAAC,SAAI,aAAU,WAAU,aAAW,kBAAkB,WAAW,OAC/D;AAAA,8BAAC,UAAK,aAAU,gBAAgB,iBAAO,aAAa,IAAI,GAAE;AAAA,UAC1D,oBAAC,UAAM,uBAAa,OAAM;AAAA,WAC5B,IACE;AAAA,QACJ,qBAAC,SAAI,aAAU,QAAO,eAAa,cAAc,SAAY,MAC3D;AAAA,8BAAC,SAAI,aAAU,mBACb,+BAAC,SAAI,aAAU,UACb;AAAA,iCAAC,SAAI,aAAU,YACZ;AAAA;AAAA,cACA,eAAe,kBAAkB,qBAAqB,SACrD;AAAA,gBAAC;AAAA;AAAA,kBACC,aAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,OAAO,aAAa,kBAAkB,OAAO;AAAA,kBAE7C,8BAAC,UAAK,aAAU,oBAAmB,eAAC;AAAA;AAAA,cACtC,IACE;AAAA,eACN;AAAA,YACA,oBAAC,SAAI,aAAU,iBACb,+BAAC,QAAG,aAAU,aAAY,aAAU,QAAO,cAAY,GAAG,KAAK,UAC5D;AAAA,yBAAW,IAAI,CAAC,WAAW,UAC1B;AAAA,gBAAC;AAAA;AAAA,kBAEC,OAAO,UAAU,KAAK,UAAU,QAAQ;AAAA,kBAEvC,oBAAU;AAAA;AAAA,gBAHN,GAAG,UAAU,QAAQ,IAAI,KAAK;AAAA,cAIrC,CACD;AAAA,cACA,eAAe,kBAAkB,qBAAqB,SACrD;AAAA,gBAAC;AAAA;AAAA,kBACC,aAAU;AAAA,kBACV,OAAO,aAAa,kBAAkB,MAAS;AAAA,kBAE9C,iBAAO,eAAe,IAAI;AAAA;AAAA,cAC7B,IACE;AAAA,eACN,GACF;AAAA,aACF,GACF;AAAA,UACA,qBAAC,QAAG,aAAU,cAAa,aAAU,SAAQ,cAAY,GAAG,KAAK,WAC9D;AAAA,wBAAY,IAAI,CAAC,WAAW,UAC3B;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAO,UAAU,KAAK,UAAU,QAAQ;AAAA,gBAEvC,oBAAU;AAAA;AAAA,cAHN,GAAG,UAAU,QAAQ,IAAI,KAAK;AAAA,YAIrC,CACD;AAAA,YACA,eAAe,kBAAkB,qBAAqB,SACrD,oBAAC,QAAG,aAAU,mBAAkB,OAAO,YAAY,OAAO,GACvD,yBAAe,OAClB,IACE;AAAA,aACN;AAAA,WACF;AAAA,QACA,qBAAC,WAAM,aAAU,QAAO,cAAY,GAAG,KAAK,SAC1C;AAAA,8BAAC,WACC,+BAAC,QACC;AAAA,gCAAC,QAAG,OAAM,OAAM,kBAAI;AAAA,YACpB,oBAAC,QAAG,OAAM,OAAM,mBAAK;AAAA,aACvB,GACF;AAAA,UACA,oBAAC,WACE,eAAK,IAAI,CAAC,OAAO,UAChB,qBAAC,QACC;AAAA,gCAAC,QAAG,OAAM,OAAO,iBAAO,MAAM,IAAI,GAAE;AAAA,YACpC,oBAAC,QAAI,gBAAM,OAAM;AAAA,eAFV,GAAG,MAAM,IAAI,IAAI,KAAK,EAG/B,CACD,GACH;AAAA,WACF;AAAA,SACF;AAAA,IAEJ;AAAA,IACA;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AACA,UAAU,cAAc;","names":[]}

package/dist/components/line-chart/client/LineChartClient.d.ts

@@ -1,6 +1,6 @@
 import type { ElementType, ReactElement } from "react";
-import type { LineChartProps } from "../types.js";
-export declare function LineChartClient<TAs extends ElementType = "figure">(props: LineChartProps<TAs>): ReactElement | null;
+import type { LineChartClientProps } from "../types.js";
+export declare function LineChartClient<TAs extends ElementType = "figure">(props: LineChartClientProps<TAs>): ReactElement | null;
 export declare namespace LineChartClient {
     var displayName: string;
 }

package/dist/components/line-chart/client/LineChartClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChartClient.d.ts","sourceRoot":"","sources":["../../../../src/components/line-chart/client/LineChartClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,WAAW,EAAE,YAAY,EAAO,MAAM,OAAO,CAAC;AAI3E,OAAO,KAAK,EAA4B,cAAc,EAAE,MAAM,aAAa,CAAC;AAgB5E,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GACzB,YAAY,GAAG,IAAI,CA2DrB;yBA7De,eAAe"}
+{"version":3,"file":"LineChartClient.d.ts","sourceRoot":"","sources":["../../../../src/components/line-chart/client/LineChartClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,WAAW,EAAE,YAAY,EAAO,MAAM,OAAO,CAAC;AAY3E,OAAO,KAAK,EACV,oBAAoB,EAKrB,MAAM,aAAa,CAAC;AAwBrB,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,GAC/B,YAAY,GAAG,IAAI,CAqJrB;yBAvJe,eAAe"}

package/dist/components/line-chart/client/LineChartClient.js

@@ -1,13 +1,23 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useChartViewport } from "../../../hooks/use-chart-viewport.js";
 import { useMergedRefs } from "../../../hooks/use-merged-refs.js";
-import { LineChart } from "../LineChart.js";
+import { useResizeObserver } from "../../../hooks/use-resize-observer.js";
+import {
+  liveTimeAxis,
+  useLiveChartWindow
+} from "../../internal/live-chart/use-live-chart-window.js";
+import { useScrollbarReserve } from "../../internal/chart-scrollbar/use-scrollbar-reserve.js";
+import { VirtualScroll } from "../../virtual-scroll/VirtualScroll.js";
+import { LineChart, LineChartPoint } from "../LineChart.js";
+import { getValueBounds } from "../line-chart-geometry.js";
 const Y_AXIS_COLUMN_WIDTH = 72 + 12;
 function LineChartClient(props) {
   const {
     data,
+    visibleCount,
+    xAxis,
     ref: consumerRef,
     style: consumerStyle,
     onPointClick: consumerOnPointClick,
@@ -15,14 +25,27 @@ function LineChartClient(props) {
     onPointPointerMove: consumerOnPointPointerMove,
     ...consumerProps
   } = props;
-  const viewport = useChartViewport({
-    itemCount: data.length,
-    measuredWidthOffset: Y_AXIS_COLUMN_WIDTH,
-    minItemWidth: 24
+  const live = visibleCount !== void 0 && visibleCount > 0;
+  const viewport = useChartViewport(
+    live ? {
+      enabled: false,
+      initialScale: 1,
+      itemCount: visibleCount,
+      measuredWidthOffset: Y_AXIS_COLUMN_WIDTH
+    } : { itemCount: data.length, measuredWidthOffset: Y_AXIS_COLUMN_WIDTH, minItemWidth: 24 }
+  );
+  const figureSize = useResizeObserver(viewport.ref);
+  const liveWindow = useLiveChartWindow({
+    count: data.length,
+    visibleCount,
+    itemWidth: viewport.itemWidth,
+    figureHeight: figureSize?.height,
+    scrollVariable: "--line-scroll-x"
   });
+  useScrollbarReserve(liveWindow.chartRef, "--line-scrollbar-size");
   const [cursor, setCursor] = useState(null);
   const [selectedPointIndex, setSelectedPointIndex] = useState();
-  const chartRef = useMergedRefs(viewport.ref, consumerRef);
+  const chartRef = useMergedRefs(viewport.ref, consumerRef, liveWindow.chartRef);
   const handlePointClick = useCallback(
     (index) => {
       setSelectedPointIndex(index);
@@ -41,22 +64,91 @@ function LineChartClient(props) {
     },
     [consumerOnPointPointerMove]
   );
+  const liveItems = useMemo(
+    () => live ? data.map((point, index) => ({ id: String(index), point })) : [],
+    [data, live]
+  );
   const style = {
     ...consumerStyle,
     "--line-scale": String(viewport.scale)
   };
+  if (!live) {
+    const chartProps2 = {
+      ...consumerProps,
+      ...xAxis ? { xAxis } : {},
+      data,
+      activePointIndex: cursor?.index,
+      cursorY: cursor?.offsetY,
+      interactive: true,
+      onPointClick: handlePointClick,
+      onPointPointerLeave: handlePointPointerLeave,
+      onPointPointerMove: handlePointPointerMove,
+      ref: chartRef,
+      selectedPointIndex,
+      style
+    };
+    return /* @__PURE__ */ jsx(LineChart, { ...chartProps2 });
+  }
+  const { sliceStart, sliceEnd, contentSize, plotHeight } = liveWindow;
+  const slice = data.slice(sliceStart, sliceEnd);
+  const { min, max } = getValueBounds(slice);
+  const toSliceIndex = (index) => index !== void 0 && index >= sliceStart && index < sliceEnd ? index - sliceStart : void 0;
+  const pointLayer = /* @__PURE__ */ jsx(
+    VirtualScroll,
+    {
+      height: plotHeight,
+      items: liveItems,
+      orientation: "horizontal",
+      overscan: 2,
+      rowHeight: viewport.itemWidth,
+      scrollRef: liveWindow.scrollRef,
+      onRangeChange: liveWindow.onRangeChange,
+      renderRow: ({ point }, index) => {
+        const inSlice = index >= sliceStart && index < sliceEnd;
+        const isActive = cursor?.index === index;
+        return /* @__PURE__ */ jsx(
+          LineChartPoint,
+          {
+            as: "div",
+            point,
+            previousPoint: data[index - 1],
+            index,
+            count: data.length,
+            min,
+            max,
+            interactive: inSlice,
+            isActive,
+            isSelected: selectedPointIndex === index,
+            cursorY: isActive ? cursor?.offsetY : void 0,
+            onPointClick: handlePointClick,
+            onPointPointerLeave: handlePointPointerLeave,
+            onPointPointerMove: handlePointPointerMove
+          }
+        );
+      }
+    }
+  );
+  const liveStyle = {
+    ...style,
+    "--line-content-size": `${contentSize}px`,
+    "--line-plot-height": `${plotHeight}px`,
+    // One virtual row: the viewport holds `visibleCount` of them.
+    "--line-run": String(100 / visibleCount)
+  };
   const chartProps = {
     ...consumerProps,
-    data,
-    activePointIndex: cursor?.index,
+    data: slice,
+    xAxis: xAxis ?? liveTimeAxis(data, sliceStart, sliceEnd, visibleCount),
+    activePointIndex: toSliceIndex(cursor?.index),
+    announceReadout: false,
+    pointLayer,
     cursorY: cursor?.offsetY,
     interactive: true,
-    onPointClick: handlePointClick,
-    onPointPointerLeave: handlePointPointerLeave,
-    onPointPointerMove: handlePointPointerMove,
     ref: chartRef,
-    selectedPointIndex,
-    style
+    selectedPointIndex: toSliceIndex(selectedPointIndex),
+    slotCount: data.length,
+    slotOffset: sliceStart,
+    style: liveStyle
   };
   return /* @__PURE__ */ jsx(LineChart, { ...chartProps });
 }