@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/charts/stock-chart/stock-plot.js

@@ -0,0 +1,1005 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useId, useMemo, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { DECORATIVE } from "../core/a11y.js";
+import { AxisBottom, AxisRight, estimateTextWidth, GridLines } from "../core/axes.js";
+import { ChartBrush } from "../core/cartesian/brush.js";
+import { buildCategoryAxis, fullCategoryLabel } from "../core/category-axis.js";
+import {
+  formatNumber,
+  formatPercent,
+  resolveAxisFormat
+} from "../core/format.js";
+import { EASE_OUT, fadeIn, revealClip, useEntryAnimation } from "../core/motion.js";
+import { DIRECTION_COLORS, TONE_COLORS } from "../core/palette.js";
+import { areaPath, linePath } from "../core/path.js";
+import { PlotOverlay } from "../core/plot-overlay.js";
+import { linearScale } from "../core/scales/linear.js";
+import { ChartTooltip } from "../core/tooltip.js";
+import {
+  DrawingInput,
+  DrawingShape,
+  hitDrawing,
+  MeasureShape
+} from "./stock-drawing-layer.js";
+import {
+  rebaseFrom,
+  sameDay
+} from "./stock-model.js";
+const MARGIN = { top: 12, bottom: 28, left: 0 };
+const NAVIGATOR_HEIGHT = 44;
+const NAVIGATOR_GAP = 12;
+const PANE_GAP = 22;
+const UP = DIRECTION_COLORS.up;
+const DOWN = DIRECTION_COLORS.down;
+const MAIN_COLOR = "var(--accent-word)";
+const OSCILLATOR_COLOR = "var(--chart-cat-5)";
+const SIGNAL_COLOR = "var(--chart-cat-6)";
+const signedPercent = (value) => `${value > 0 ? "+" : ""}${formatPercent(value)}`;
+function finite(values) {
+  const out = [];
+  for (const value of values) if (value != null && Number.isFinite(value)) out.push(value);
+  return out;
+}
+const Candles = memo(function Candles2({
+  bars,
+  positions,
+  width,
+  y,
+  ohlc
+}) {
+  return /* @__PURE__ */ jsx("g", { ...DECORATIVE, children: bars.map((bar, i) => {
+    const x = positions[i];
+    const color = bar.close >= bar.open ? UP : DOWN;
+    if (ohlc) {
+      const tick = Math.max(2, width / 2);
+      return /* @__PURE__ */ jsxs(
+        "g",
+        {
+          "data-bar": "",
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          style: { stroke: color, transformBox: "fill-box", transformOrigin: "center" },
+          children: [
+            /* @__PURE__ */ jsx("line", { x1: x, x2: x, y1: y(bar.high), y2: y(bar.low) }),
+            /* @__PURE__ */ jsx("line", { x1: x - tick, x2: x, y1: y(bar.open), y2: y(bar.open) }),
+            /* @__PURE__ */ jsx("line", { x1: x, x2: x + tick, y1: y(bar.close), y2: y(bar.close) })
+          ]
+        },
+        i
+      );
+    }
+    const top = y(Math.max(bar.open, bar.close));
+    const bottom = y(Math.min(bar.open, bar.close));
+    return /* @__PURE__ */ jsxs(
+      "g",
+      {
+        "data-bar": "",
+        style: { transformBox: "fill-box", transformOrigin: "center" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: x,
+              x2: x,
+              y1: y(bar.high),
+              y2: y(bar.low),
+              strokeWidth: 1.25,
+              style: { stroke: color }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: x - width / 2,
+              y: top,
+              width,
+              height: Math.max(1.25, bottom - top),
+              rx: Math.min(2, width / 3),
+              style: { fill: color }
+            }
+          )
+        ]
+      },
+      i
+    );
+  }) });
+});
+function points(values, positions, y) {
+  return values.map(
+    (value, i) => value == null ? null : { x: positions[i], y: y(value) }
+  );
+}
+function StockPlot({
+  width,
+  height,
+  title,
+  data,
+  range,
+  onRangeChange,
+  seriesType,
+  showVolume,
+  tool,
+  onToolChange,
+  drawings,
+  selectedId,
+  onSelect,
+  onCreate,
+  onDelete,
+  pins,
+  pinnable,
+  onTogglePin,
+  overlays,
+  middles,
+  comparisons,
+  oscillator,
+  flags,
+  lastPrice,
+  navigator,
+  fmt,
+  vfmt,
+  valueFormat,
+  axisRoom,
+  grid,
+  tooltip,
+  animate,
+  texts,
+  labels
+}) {
+  const svgRef = useRef(null);
+  const [active, setActive] = useState(null);
+  const [pointerY, setPointerY] = useState(null);
+  const [draft, setDraft] = useState(
+    null
+  );
+  const [measured, setMeasured] = useState(null);
+  const clipId = useId();
+  const [from, to] = range;
+  const view = useMemo(() => data.slice(from, to + 1), [data, from, to]);
+  const percent = comparisons.length > 0;
+  const innerWidth = Math.max(60, width - MARGIN.left - axisRoom);
+  const innerHeight = Math.max(80, height - MARGIN.top - MARGIN.bottom);
+  const lowerHeight = oscillator ? Math.round((innerHeight - PANE_GAP) * 0.27) : 0;
+  const priceHeight = oscillator ? innerHeight - PANE_GAP - lowerHeight : innerHeight;
+  const lowerTop = priceHeight + PANE_GAP;
+  const volumeHeight = showVolume && !percent ? Math.round(priceHeight * 0.2) : 0;
+  const narrow = width < 440;
+  const model = useMemo(() => {
+    const axis2 = buildCategoryAxis(
+      view.map((bar) => bar.date),
+      innerWidth,
+      { mode: "band", paddingInner: 0.3 }
+    );
+    const slice = (values) => values.slice(from, to + 1);
+    const main2 = percent ? rebaseFrom(
+      data.map((bar) => bar.close),
+      from
+    ).slice(from, to + 1) : null;
+    const compared2 = comparisons.map((comparison) => ({
+      ...comparison,
+      view: rebaseFrom(comparison.values, from).slice(from, to + 1)
+    }));
+    const lines2 = percent ? [] : overlays.map((line) => ({
+      ...line,
+      view: slice(line.values),
+      lowerView: line.lower ? slice(line.lower) : void 0,
+      middleView: middles.get(line.id) ? slice(middles.get(line.id)) : void 0
+    }));
+    const pool = percent ? finite([...main2 ?? [], ...compared2.flatMap((c) => c.view)]) : finite([
+      ...view.flatMap(
+        (bar) => seriesType === "candle" || seriesType === "ohlc" ? [bar.low, bar.high] : [bar.close]
+      ),
+      ...lines2.flatMap((line) => [...line.view, ...line.lowerView ?? []])
+    ]);
+    const lo = Math.min(...pool);
+    const hi = Math.max(...pool);
+    const pad = (hi - lo || Math.abs(hi) || 1) * 0.08;
+    const priceBottom = priceHeight - (volumeHeight ? volumeHeight * 0.6 : 0);
+    const y2 = linearScale({
+      domain: [lo - pad, hi + pad],
+      range: [priceBottom, 0],
+      tickCount: Math.max(3, Math.round(priceHeight / 56))
+    });
+    const axisFormat2 = percent ? signedPercent : resolveAxisFormat(valueFormat);
+    const yTicks2 = y2.ticks().filter((tick) => y2.map(tick) >= 0 && y2.map(tick) <= priceHeight).map((tick) => ({ key: tick, position: y2.map(tick), label: axisFormat2(tick) }));
+    const maxVolume2 = Math.max(0, ...view.map((bar) => bar.volume ?? 0));
+    let lower2 = null;
+    if (oscillator) {
+      const mainView = slice(oscillator.main);
+      const signalView = oscillator.signal ? slice(oscillator.signal) : void 0;
+      const histogramView = oscillator.histogram ? slice(oscillator.histogram) : void 0;
+      if (oscillator.type === "rsi") {
+        const ly = linearScale({ domain: [0, 100], range: [lowerHeight, 0], nice: false });
+        lower2 = {
+          y: ly,
+          ticks: [30, 70].map((tick) => ({
+            key: tick,
+            position: ly.map(tick),
+            label: String(tick)
+          })),
+          main: mainView
+        };
+      } else {
+        const values = finite([...mainView, ...signalView ?? [], ...histogramView ?? []]);
+        const bound = Math.max(1e-9, ...values.map(Math.abs));
+        const ly = linearScale({ domain: [-bound, bound], range: [lowerHeight, 0], nice: false });
+        lower2 = {
+          y: ly,
+          ticks: [{ key: 0, position: ly.map(0), label: "0" }],
+          main: mainView,
+          signal: signalView,
+          histogram: histogramView
+        };
+      }
+    }
+    return { axis: axis2, main: main2, compared: compared2, lines: lines2, y: y2, yTicks: yTicks2, maxVolume: maxVolume2, lower: lower2, axisFormat: axisFormat2 };
+  }, [
+    view,
+    innerWidth,
+    data,
+    from,
+    to,
+    percent,
+    comparisons,
+    overlays,
+    middles,
+    seriesType,
+    priceHeight,
+    volumeHeight,
+    valueFormat,
+    oscillator,
+    lowerHeight
+  ]);
+  const { axis, main, compared, lines, y, yTicks, maxVolume, lower, axisFormat } = model;
+  const positions = axis.positions;
+  const xTicks = axis.ticks.filter(
+    (tick) => tick.position - estimateTextWidth(tick.label) / 2 >= -MARGIN.left && tick.position + estimateTextWidth(tick.label) / 2 <= innerWidth + axisRoom
+  );
+  const barWidth = Math.max(1.5, Math.min(14, axis.bandwidth));
+  useEntryAnimation(
+    svgRef,
+    (root) => {
+      const bars = root.querySelectorAll("[data-bar]");
+      const per = Math.min(8, 400 / Math.max(1, bars.length));
+      bars.forEach((bar, i) => {
+        bar.animate(
+          [
+            { transform: "scaleY(0.2)", opacity: 0 },
+            { transform: "scaleY(1)", opacity: 1 }
+          ],
+          { duration: 420, delay: i * per, easing: EASE_OUT, fill: "backwards" }
+        );
+      });
+      for (const node of root.querySelectorAll("[data-reveal]")) revealClip(node, 900);
+      for (const node of root.querySelectorAll("[data-fade]")) fadeIn(node, 360, 400);
+    },
+    { disabled: !animate }
+  );
+  const flagMarks = useMemo(() => {
+    const stacks = /* @__PURE__ */ new Map();
+    return flags.flatMap((flag) => {
+      const index = view.findIndex((bar) => sameDay(bar.date, flag.date));
+      if (index < 0) return [];
+      const level = stacks.get(index) ?? 0;
+      stacks.set(index, level + 1);
+      return [{ flag, index, level }];
+    });
+  }, [flags, view]);
+  const current = active != null ? view[active] : void 0;
+  const previous = active != null && active > 0 ? view[active - 1] : data[from - 1];
+  const last = view[view.length - 1];
+  const beforeLast = view.length > 1 ? view[view.length - 2] : data[from - 1];
+  const lastUp = !last || !beforeLast || last.close >= beforeLast.close;
+  const flagsAt = (index) => flagMarks.filter((mark) => mark.index === index).map((mark) => mark.flag);
+  const changeOf = (bar, before) => {
+    const base = before?.close ?? bar.open;
+    return base ? (bar.close - base) / Math.abs(base) : 0;
+  };
+  const valueText = (() => {
+    if (!current || active == null) return labels.explore;
+    const parts = [fullCategoryLabel(current.date)];
+    if (percent) {
+      parts.push(`${texts.price} ${signedPercent(main?.[active] ?? 0)}`);
+      for (const c of compared) {
+        const value = c.view[active];
+        if (value != null) parts.push(`${c.name} ${signedPercent(value)}`);
+      }
+    } else if (seriesType === "candle" || seriesType === "ohlc") {
+      parts.push(
+        `${texts.open} ${fmt(current.open)}, ${texts.high} ${fmt(current.high)}, ${texts.low} ${fmt(current.low)}, ${texts.close} ${fmt(current.close)}`
+      );
+    } else parts.push(`${texts.close} ${fmt(current.close)}`);
+    parts.push(`${texts.change} ${signedPercent(changeOf(current, previous))}`);
+    if (current.volume != null && showVolume) parts.push(`${texts.volume} ${vfmt(current.volume)}`);
+    for (const line of lines) {
+      const value = line.view[active];
+      if (value != null) parts.push(`${line.name} ${fmt(value)}`);
+    }
+    if (oscillator && lower) {
+      const value = lower.main[active];
+      if (value != null)
+        parts.push(`${oscillator.name} ${formatNumber(value, { maximumFractionDigits: 2 })}`);
+    }
+    for (const flag of flagsAt(active)) parts.push(flag.text);
+    return parts.join(". ");
+  })();
+  const rowsAt = (at) => {
+    const active2 = at;
+    const current2 = view[at];
+    const previous2 = at > 0 ? view[at - 1] : data[from - 1];
+    if (!current2) return [];
+    const rows = [];
+    if (percent) {
+      rows.push({
+        id: "main",
+        name: texts.price,
+        value: signedPercent(main?.[active2] ?? 0),
+        color: MAIN_COLOR,
+        shape: "line"
+      });
+      for (const c of compared) {
+        const value = c.view[active2];
+        if (value != null) {
+          rows.push({
+            id: c.id,
+            name: c.name,
+            value: signedPercent(value),
+            color: c.color ?? "",
+            shape: "line"
+          });
+        }
+      }
+    } else if (seriesType === "candle" || seriesType === "ohlc") {
+      const color = current2.close >= current2.open ? UP : DOWN;
+      rows.push(
+        {
+          id: "open",
+          name: texts.open,
+          value: fmt(current2.open),
+          color: "var(--ink-3)",
+          shape: "dot"
+        },
+        {
+          id: "high",
+          name: texts.high,
+          value: fmt(current2.high),
+          color: "var(--ink-3)",
+          shape: "dot"
+        },
+        {
+          id: "low",
+          name: texts.low,
+          value: fmt(current2.low),
+          color: "var(--ink-3)",
+          shape: "dot"
+        },
+        { id: "close", name: texts.close, value: fmt(current2.close), color, shape: "square" }
+      );
+    } else {
+      rows.push({
+        id: "close",
+        name: texts.close,
+        value: fmt(current2.close),
+        color: MAIN_COLOR,
+        shape: "line"
+      });
+    }
+    if (!percent) {
+      rows.push({
+        id: "change",
+        name: texts.change,
+        value: signedPercent(changeOf(current2, previous2)),
+        color: "transparent"
+      });
+    }
+    if (current2.volume != null && showVolume && !percent) {
+      rows.push({
+        id: "volume",
+        name: texts.volume,
+        value: vfmt(current2.volume),
+        color: "var(--ink-3)",
+        shape: "dot"
+      });
+    }
+    for (const line of lines) {
+      const value = line.view[active2];
+      if (value != null)
+        rows.push({
+          id: line.id,
+          name: line.name,
+          value: fmt(value),
+          color: line.color,
+          shape: "line"
+        });
+    }
+    if (oscillator && lower) {
+      const value = lower.main[active2];
+      if (value != null) {
+        rows.push({
+          id: "osc",
+          name: oscillator.name,
+          value: formatNumber(value, { maximumFractionDigits: 2 }),
+          color: OSCILLATOR_COLOR,
+          shape: "line"
+        });
+      }
+      const signal = lower.signal?.[active2];
+      if (signal != null) {
+        rows.push({
+          id: "signal",
+          name: texts.signal,
+          value: formatNumber(signal, { maximumFractionDigits: 2 }),
+          color: SIGNAL_COLOR,
+          shape: "line"
+        });
+      }
+    }
+    for (const [i, flag] of flagsAt(active2).entries()) {
+      rows.push({
+        id: `flag-${i}`,
+        name: flag.label,
+        value: flag.text,
+        color: "transparent",
+        emphasis: true
+      });
+    }
+    return rows;
+  };
+  const mainPath = useMemo(() => {
+    if (percent) return linePath(points(main ?? [], positions, y.map), "linear");
+    if (seriesType !== "line" && seriesType !== "area") return "";
+    return linePath(
+      points(
+        view.map((bar) => bar.close),
+        positions,
+        y.map
+      ),
+      "linear"
+    );
+  }, [percent, main, positions, y, seriesType, view]);
+  const mainArea = useMemo(() => {
+    if (percent || seriesType !== "area") return "";
+    const top = points(
+      view.map((bar) => bar.close),
+      positions,
+      y.map
+    );
+    const base = top.map((point, i) => ({
+      x: point?.x ?? positions[i],
+      y: y.map(y.domain[0])
+    }));
+    return areaPath(top, base, "linear");
+  }, [percent, seriesType, view, positions, y]);
+  const navigatorSeries = useMemo(() => {
+    const floor = Math.min(...data.map((bar) => bar.close));
+    return [{ id: "close", color: MAIN_COLOR, data: data.map((bar) => bar.close - floor) }];
+  }, [data]);
+  const crossX = active != null ? positions[active] : null;
+  const drawable = !percent;
+  const geometry = useMemo(
+    () => ({
+      times: data.map((bar) => +bar.date),
+      from,
+      x0: positions[0] ?? 0,
+      step: positions.length > 1 ? (positions[positions.length - 1] - positions[0]) / (positions.length - 1) : innerWidth,
+      innerWidth,
+      priceHeight,
+      y: y.map,
+      invert: y.invert
+    }),
+    [data, from, positions, innerWidth, priceHeight, y]
+  );
+  const pinned = pins.flatMap((time) => {
+    const index = view.findIndex((bar) => +bar.date === time);
+    return index < 0 ? [] : [index];
+  });
+  const lastValue = last ? percent ? main?.[view.length - 1] ?? 0 : last.close : null;
+  const tagColor = percent ? MAIN_COLOR : lastUp ? UP : DOWN;
+  const hoverValue = pointerY != null && pointerY >= 0 && pointerY <= priceHeight ? y.invert(pointerY) : null;
+  const navExtra = navigator ? NAVIGATOR_HEIGHT + NAVIGATOR_GAP : 0;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", style: { width, height: height + navExtra }, children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref: svgRef,
+        role: "img",
+        "aria-label": title,
+        width,
+        height,
+        className: "block overflow-visible",
+        children: /* @__PURE__ */ jsxs("g", { transform: `translate(${MARGIN.left},${MARGIN.top})`, children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: innerWidth, height: priceHeight }) }) }),
+          grid ? /* @__PURE__ */ jsx(GridLines, { ticks: yTicks, direction: "horizontal", length: innerWidth }) : null,
+          /* @__PURE__ */ jsx(AxisRight, { ticks: yTicks, offset: innerWidth }),
+          /* @__PURE__ */ jsx(AxisBottom, { ticks: xTicks, offset: innerHeight }),
+          volumeHeight > 0 ? /* @__PURE__ */ jsx("g", { ...DECORATIVE, transform: `translate(0,${priceHeight - volumeHeight})`, children: view.map((bar, i) => {
+            if (bar.volume == null || maxVolume === 0) return null;
+            const h = Math.max(1, bar.volume / maxVolume * volumeHeight);
+            return /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: positions[i] - barWidth / 2,
+                y: volumeHeight - h,
+                width: barWidth,
+                height: h,
+                style: {
+                  fill: bar.close >= bar.open ? UP : DOWN,
+                  fillOpacity: active === i ? 0.55 : 0.22
+                }
+              },
+              i
+            );
+          }) }) : null,
+          lines.map(
+            (line) => line.lowerView ? /* @__PURE__ */ jsxs("g", { ...DECORATIVE, "data-fade": "", children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: areaPath(
+                    points(line.view, positions, y.map),
+                    points(line.lowerView, positions, y.map).map(
+                      (point, i) => point ?? { x: positions[i], y: 0 }
+                    ),
+                    "linear"
+                  ),
+                  style: { fill: line.color, fillOpacity: 0.08 }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: linePath(points(line.lowerView, positions, y.map)),
+                  fill: "none",
+                  strokeWidth: 1.25,
+                  style: { stroke: line.color, strokeOpacity: 0.8 }
+                }
+              ),
+              line.middleView ? /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: linePath(points(line.middleView, positions, y.map)),
+                  fill: "none",
+                  strokeWidth: 1,
+                  strokeDasharray: "4 3",
+                  style: { stroke: line.color, strokeOpacity: 0.7 }
+                }
+              ) : null
+            ] }, `${line.id}-band`) : null
+          ),
+          seriesType === "area" && !percent ? /* @__PURE__ */ jsx("path", { d: mainArea, "data-fade": "", style: { fill: MAIN_COLOR, fillOpacity: 0.12 } }) : null,
+          /* @__PURE__ */ jsx("g", { "data-reveal": "", style: { transformBox: "fill-box", transformOrigin: "left" }, children: !percent && (seriesType === "candle" || seriesType === "ohlc") ? /* @__PURE__ */ jsx(
+            Candles,
+            {
+              bars: view,
+              positions,
+              width: barWidth,
+              y: y.map,
+              ohlc: seriesType === "ohlc"
+            }
+          ) : null }),
+          !percent && seriesType === "column" ? /* @__PURE__ */ jsx(
+            "g",
+            {
+              ...DECORATIVE,
+              "data-reveal": "",
+              style: { transformBox: "fill-box", transformOrigin: "left" },
+              children: view.map((bar, i) => {
+                const before = i > 0 ? view[i - 1].close : data[from - 1]?.close ?? bar.open;
+                const top = y.map(bar.close);
+                const base = y.map(y.domain[0]);
+                return /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    "data-bar": "",
+                    x: positions[i] - barWidth / 2,
+                    y: top,
+                    width: barWidth,
+                    height: Math.max(1, base - top),
+                    rx: Math.min(2, barWidth / 3),
+                    style: {
+                      fill: bar.close >= before ? UP : DOWN,
+                      fillOpacity: active === i ? 1 : 0.8,
+                      transformBox: "fill-box",
+                      transformOrigin: "bottom"
+                    }
+                  },
+                  i
+                );
+              })
+            }
+          ) : null,
+          mainPath ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              "data-reveal": "",
+              d: mainPath,
+              fill: "none",
+              strokeWidth: 2,
+              strokeLinejoin: "round",
+              style: { stroke: MAIN_COLOR }
+            }
+          ) : null,
+          compared.map((c) => /* @__PURE__ */ jsx(
+            "path",
+            {
+              "data-reveal": "",
+              d: linePath(points(c.view, positions, y.map)),
+              fill: "none",
+              strokeWidth: 1.75,
+              strokeLinejoin: "round",
+              style: { stroke: c.color }
+            },
+            c.id
+          )),
+          lines.map((line) => /* @__PURE__ */ jsx(
+            "path",
+            {
+              "data-reveal": "",
+              d: linePath(points(line.view, positions, y.map)),
+              fill: "none",
+              strokeWidth: line.lowerView ? 1.25 : 1.5,
+              style: { stroke: line.color, strokeOpacity: line.lowerView ? 0.8 : 1 }
+            },
+            line.id
+          )),
+          flagMarks.map(({ flag, index, level }) => {
+            const bar = view[index];
+            const x = positions[index];
+            const anchor = percent ? y.map(main?.[index] ?? 0) : y.map(bar.high);
+            const top = Math.max(2, anchor - 30 - level * 22);
+            const tone = TONE_COLORS[flag.tone ?? "accent"];
+            return /* @__PURE__ */ jsxs("g", { ...DECORATIVE, "data-fade": "", children: [
+              /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: x,
+                  x2: x,
+                  y1: top + 16,
+                  y2: anchor - 4,
+                  strokeWidth: 1,
+                  style: { stroke: tone.ink }
+                }
+              ),
+              /* @__PURE__ */ jsx("rect", { x, y: top, width: 16, height: 16, rx: 4, style: { fill: tone.ink } }),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: x + 8,
+                  y: top + 8,
+                  dy: "0.34em",
+                  textAnchor: "middle",
+                  className: "font-bold text-[10px]",
+                  style: { fill: "var(--surface)" },
+                  children: flag.label
+                }
+              )
+            ] }, `${index}-${level}-${flag.label}`);
+          }),
+          lower && oscillator ? /* @__PURE__ */ jsxs("g", { transform: `translate(0,${lowerTop})`, children: [
+            /* @__PURE__ */ jsxs("text", { ...DECORATIVE, x: 0, y: -7, className: "fill-ink-3 font-semibold text-[10.5px]", children: [
+              oscillator.name,
+              (() => {
+                const index = active ?? view.length - 1;
+                const value = lower.main[index];
+                return value == null ? "" : ` \xB7 ${formatNumber(value, { maximumFractionDigits: 2 })}`;
+              })()
+            ] }),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                x2: innerWidth,
+                y1: 0,
+                y2: 0,
+                shapeRendering: "crispEdges",
+                style: { stroke: "var(--line)" }
+              }
+            ),
+            oscillator.type === "rsi" ? /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: 0,
+                y: lower.y.map(70),
+                width: innerWidth,
+                height: lower.y.map(30) - lower.y.map(70),
+                style: { fill: "var(--surface-2)", fillOpacity: 0.7 }
+              }
+            ) : null,
+            lower.ticks.map((tick) => /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                x2: innerWidth,
+                y1: tick.position,
+                y2: tick.position,
+                strokeDasharray: "3 3",
+                shapeRendering: "crispEdges",
+                style: { stroke: "var(--line-strong)" }
+              },
+              tick.key
+            )),
+            /* @__PURE__ */ jsx(AxisRight, { ticks: lower.ticks, offset: innerWidth }),
+            lower.histogram ? lower.histogram.map((value, i) => {
+              if (value == null) return null;
+              const zero = lower.y.map(0);
+              const end = lower.y.map(value);
+              return /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  ...DECORATIVE,
+                  x: positions[i] - barWidth / 2,
+                  y: Math.min(zero, end),
+                  width: barWidth,
+                  height: Math.max(0.5, Math.abs(end - zero)),
+                  style: { fill: value >= 0 ? UP : DOWN, fillOpacity: 0.45 }
+                },
+                i
+              );
+            }) : null,
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                "data-reveal": "",
+                d: linePath(points(lower.main, positions, lower.y.map)),
+                fill: "none",
+                strokeWidth: 1.5,
+                style: { stroke: OSCILLATOR_COLOR }
+              }
+            ),
+            lower.signal ? /* @__PURE__ */ jsx(
+              "path",
+              {
+                "data-reveal": "",
+                d: linePath(points(lower.signal, positions, lower.y.map)),
+                fill: "none",
+                strokeWidth: 1.25,
+                style: { stroke: SIGNAL_COLOR }
+              }
+            ) : null
+          ] }) : null,
+          drawable && (drawings.length > 0 || draft || measured) ? /* @__PURE__ */ jsxs("g", { clipPath: `url(#${clipId})`, className: "pointer-events-none", children: [
+            drawings.map((drawing) => /* @__PURE__ */ jsx(
+              DrawingShape,
+              {
+                drawing,
+                geometry,
+                selected: drawing.id === selectedId,
+                fmt
+              },
+              drawing.id
+            )),
+            draft && draft.tool !== "measure" && draft.tool !== "cursor" && draft.tool !== "horizontal" ? /* @__PURE__ */ jsx(
+              DrawingShape,
+              {
+                drawing: { id: "draft", type: draft.tool, a: draft.a, b: draft.b },
+                geometry,
+                selected: false,
+                fmt,
+                draft: true
+              }
+            ) : null,
+            draft?.tool === "measure" ? /* @__PURE__ */ jsx(MeasureShape, { a: draft.a, b: draft.b, geometry, texts }) : measured && tool === "measure" ? /* @__PURE__ */ jsx(MeasureShape, { a: measured.a, b: measured.b, geometry, texts }) : null
+          ] }) : null,
+          pinned.map((index) => /* @__PURE__ */ jsxs("g", { ...DECORATIVE, className: "pointer-events-none", children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: positions[index],
+                x2: positions[index],
+                y1: 0,
+                y2: priceHeight,
+                style: { stroke: "var(--ink-3)", strokeOpacity: 0.6 },
+                strokeDasharray: "2 3"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: positions[index],
+                cy: y.map(view[index].close),
+                r: 4,
+                strokeWidth: 2,
+                style: { fill: "var(--surface)", stroke: "var(--ink)" }
+              }
+            )
+          ] }, `pin-${index}`)),
+          crossX != null ? /* @__PURE__ */ jsxs("g", { ...DECORATIVE, className: "pointer-events-none", children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: crossX,
+                x2: crossX,
+                y1: 0,
+                y2: innerHeight,
+                strokeDasharray: "3 3",
+                style: { stroke: "var(--chart-crosshair)" }
+              }
+            ),
+            hoverValue != null && pointerY != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: 0,
+                  x2: innerWidth,
+                  y1: pointerY,
+                  y2: pointerY,
+                  strokeDasharray: "3 3",
+                  style: { stroke: "var(--chart-crosshair)" }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AxisTag,
+                {
+                  x: innerWidth,
+                  y: pointerY,
+                  width: axisRoom,
+                  color: "var(--ink)",
+                  text: axisFormat(hoverValue)
+                }
+              )
+            ] }) : null
+          ] }) : null,
+          lastPrice && lastValue != null ? /* @__PURE__ */ jsxs("g", { ...DECORATIVE, "data-fade": "", className: "pointer-events-none", children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                x2: innerWidth,
+                y1: y.map(lastValue),
+                y2: y.map(lastValue),
+                strokeDasharray: "2 3",
+                shapeRendering: "crispEdges",
+                style: { stroke: tagColor, strokeOpacity: 0.75 }
+              }
+            ),
+            !(hoverValue != null && pointerY != null && Math.abs(pointerY - y.map(lastValue)) < 16) ? /* @__PURE__ */ jsx(
+              AxisTag,
+              {
+                x: innerWidth,
+                y: y.map(lastValue),
+                width: axisRoom,
+                color: tagColor,
+                text: percent ? signedPercent(lastValue) : fmt(lastValue)
+              }
+            ) : null
+          ] }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { display: "contents" },
+        onPointerDownCapture: (event) => {
+          if (tool !== "cursor" || !drawable) return;
+          const rect = event.target.getBoundingClientRect();
+          const point = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+          const hit = point.y <= priceHeight ? hitDrawing(drawings, geometry, point) : null;
+          onSelect(hit);
+          if (hit || !pinnable || !view.length) return;
+          const bar = view[axis.indexAt(point.x)];
+          if (bar) onTogglePin(+bar.date);
+        },
+        children: /* @__PURE__ */ jsx(
+          PlotOverlay,
+          {
+            left: MARGIN.left,
+            top: MARGIN.top,
+            width: innerWidth,
+            height: innerHeight,
+            label: labels.explore,
+            count: view.length,
+            active,
+            valueText,
+            onActiveChange: (index) => {
+              setActive(index);
+              if (index == null) setPointerY(null);
+            },
+            indexAt: ({ x, y: py }) => {
+              setPointerY(py);
+              return view.length ? axis.indexAt(x) : null;
+            },
+            onKey: (event) => {
+              if (selectedId && (event.key === "Delete" || event.key === "Backspace")) {
+                onDelete(selectedId);
+                return true;
+              }
+              if (pinnable && active != null && (event.key === "Enter" || event.key === " ")) {
+                const bar = view[active];
+                if (bar) onTogglePin(+bar.date);
+                return true;
+              }
+              if (event.key === "Escape") onSelect(null);
+              return false;
+            }
+          }
+        )
+      }
+    ),
+    drawable && tool !== "cursor" ? /* @__PURE__ */ jsx(
+      DrawingInput,
+      {
+        tool,
+        geometry,
+        left: MARGIN.left,
+        top: MARGIN.top,
+        label: texts.drawingLayer,
+        onCreate: (drawing) => {
+          onCreate(drawing);
+          onSelect(drawing.id);
+        },
+        onDone: () => onToolChange("cursor"),
+        onDraft: setDraft,
+        onMeasure: setMeasured
+      }
+    ) : null,
+    pinnable ? pinned.map((index) => /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        x: MARGIN.left + positions[index],
+        y: MARGIN.top + y.map(view[index].close),
+        containerWidth: width - axisRoom,
+        title: fullCategoryLabel(view[index].date),
+        rows: rowsAt(index),
+        className: cn("max-w-[50cqw] opacity-95", !narrow && "max-w-[260px]")
+      },
+      `pin-${index}`
+    )) : null,
+    tooltip && current && crossX != null ? /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        x: MARGIN.left + crossX,
+        y: MARGIN.top + (pointerY ?? y.map(current.close)),
+        containerWidth: width - axisRoom,
+        title: fullCategoryLabel(current.date),
+        rows: active != null ? rowsAt(active) : [],
+        className: narrow ? "max-w-[50cqw]" : void 0
+      }
+    ) : null,
+    navigator && data.length > 3 ? /* @__PURE__ */ jsx("div", { style: { marginTop: NAVIGATOR_GAP }, children: /* @__PURE__ */ jsx(
+      ChartBrush,
+      {
+        count: data.length,
+        series: navigatorSeries,
+        range,
+        onChange: onRangeChange,
+        width,
+        left: MARGIN.left,
+        right: axisRoom,
+        height: NAVIGATOR_HEIGHT,
+        label: labels.brush,
+        valueText: `${fullCategoryLabel(data[from].date)} \u2013 ${fullCategoryLabel(data[to].date)}`
+      }
+    ) }) : null
+  ] });
+}
+function AxisTag({
+  x,
+  y,
+  width,
+  color,
+  text
+}) {
+  return /* @__PURE__ */ jsxs("g", { transform: `translate(${x + 3},${y})`, children: [
+    /* @__PURE__ */ jsx("rect", { x: 0, y: -9, width: width - 4, height: 18, rx: 5, style: { fill: color } }),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: (width - 4) / 2,
+        y: 0,
+        dy: "0.34em",
+        textAnchor: "middle",
+        className: "font-bold text-[10.5px] tabular-nums",
+        style: { fill: "var(--surface)" },
+        children: text
+      }
+    )
+  ] });
+}
+export {
+  MARGIN,
+  NAVIGATOR_GAP,
+  NAVIGATOR_HEIGHT,
+  StockPlot
+};