@exegia/corpora-ui 3.0.0 → 4.0.0

package/src/components/composed/chat/chart/evilcharts/echarts-brush.tsx

@@ -1,233 +0,0 @@
-import { withAlpha, type ResolvedColors } from "./echarts-chart";
-import type { DataZoomComponentOption } from "echarts/components";
-import type { FC } from "react";
-import * as echarts from "echarts/core";
-
-type EChartsInstance = ReturnType<typeof echarts.init>;
-
-const BRUSH_BORDER_OPACITY = 1; // brush frame, × border alpha (evil-brush uses the full token)
-
-export { BRUSH_BORDER_OPACITY };
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Brush marker — the declarative `<Chart.Brush/>` child. Rendering nothing, its
-// PRESENCE turns the brush on (replacing the old showBrush prop) and its props
-// carry the brush's height, handle-label formatter, and range callback. Shared
-// so every cartesian chart attaches the SAME component to its root.
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface BrushProps {
-  height?: number; // brush preview strip height in px (default 56)
-  formatLabel?: (value: string, index: number) => string; // formats the range-handle labels
-  onChange?: (range: { startIndex: number; endIndex: number }) => void; // fires as the range moves
-}
-
-/** Declares the zoom brush below the chart. Presence renders it; renders nothing itself. */
-export const Brush: FC<BrushProps> = () => null;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Brush overlays — the evil-brush look: a rounded border around the SELECTED
-// range, dimmed unselected sides, centered grip-dot handle pills, and range
-// label pills below the frame. None of that is a dataZoom capability. They are
-// raw zrender elements updated imperatively — routing them through setOption
-// re-renders the dataZoom component mid-drag, resetting its drag anchor (the
-// handle progressively lags the pointer).
-// ─────────────────────────────────────────────────────────────────────────────
-
-export type BrushRange = { start: number; end: number };
-export type BrushGeometry = { bottom: number; height: number };
-
-export type BrushOverlayParams = {
-  range: BrushRange;
-  geom: BrushGeometry;
-  size: { width: number; height: number };
-  tokens: ResolvedColors["tokens"];
-  labels: { start: string; end: string } | null;
-  showLabels: boolean;
-  hover: { left: boolean; right: boolean };
-};
-
-type ZrRect = InstanceType<typeof echarts.graphic.Rect>;
-type ZrCircle = InstanceType<typeof echarts.graphic.Circle>;
-type ZrText = InstanceType<typeof echarts.graphic.Text>;
-
-export type BrushOverlayElements = {
-  dimLeft: ZrRect;
-  dimRight: ZrRect;
-  frame: ZrRect;
-  pillLeft: ZrRect;
-  pillRight: ZrRect;
-  grips: ZrCircle[]; // 3 left + 3 right
-  labelStart: ZrText;
-  labelEnd: ZrText;
-};
-
-export function syncBrushOverlay(
-  chart: EChartsInstance,
-  store: { brushOverlay: BrushOverlayElements | null },
-  params: BrushOverlayParams | null,
-) {
-  const zr = chart.getZr();
-  if (!zr) return;
-
-  if (!params) {
-    if (store.brushOverlay) {
-      const { grips, ...rest } = store.brushOverlay;
-      [...Object.values(rest), ...grips].forEach((el) => zr.remove(el));
-      store.brushOverlay = null;
-    }
-    return;
-  }
-
-  if (!store.brushOverlay) {
-    const rect = (z: number) => new echarts.graphic.Rect({ silent: true, z, shape: {} });
-    const els: BrushOverlayElements = {
-      dimLeft: rect(100),
-      dimRight: rect(100),
-      frame: rect(101),
-      pillLeft: rect(102),
-      pillRight: rect(102),
-      grips: Array.from(
-        { length: 6 },
-        () => new echarts.graphic.Circle({ silent: true, z: 103, shape: {} }),
-      ),
-      labelStart: new echarts.graphic.Text({ silent: true, z: 104 }),
-      labelEnd: new echarts.graphic.Text({ silent: true, z: 104 }),
-    };
-    const { grips, ...rest } = els;
-    [...Object.values(rest), ...grips].forEach((el) => zr.add(el));
-    store.brushOverlay = els;
-  }
-
-  const els = store.brushOverlay;
-  const { range, geom, size, tokens, labels, showLabels, hover } = params;
-
-  const trackLeft = 8;
-  const trackRight = Math.max(size.width - 8, trackLeft);
-  const trackWidth = trackRight - trackLeft;
-  const top = size.height - geom.bottom - geom.height;
-  const centerY = top + geom.height / 2;
-  const selectionLeft = trackLeft + (trackWidth * range.start) / 100;
-  const selectionRight = trackLeft + (trackWidth * range.end) / 100;
-
-  const dimFill = withAlpha(tokens.background, 0.7);
-  els.dimLeft.setShape({
-    x: trackLeft,
-    y: top,
-    width: Math.max(selectionLeft - trackLeft, 0),
-    height: geom.height,
-  });
-  els.dimLeft.setStyle({ fill: dimFill });
-  els.dimRight.setShape({
-    x: selectionRight,
-    y: top,
-    width: Math.max(trackRight - selectionRight, 0),
-    height: geom.height,
-  });
-  els.dimRight.setStyle({ fill: dimFill });
-
-  els.frame.setShape({
-    x: selectionLeft,
-    y: top,
-    width: Math.max(selectionRight - selectionLeft, 0),
-    height: geom.height,
-    r: 6,
-  });
-  els.frame.setStyle({
-    fill: "none",
-    stroke: withAlpha(tokens.border, BRUSH_BORDER_OPACITY),
-    lineWidth: 1,
-  });
-
-  // Handle pills: evil-brush's 6×16 grip pill, centered on the selection edge,
-  // brightening to foreground on hover/drag.
-  const pill = (el: ZrRect, x: number, hovered: boolean) => {
-    el.setShape({ x: x - 3, y: centerY - 8, width: 6, height: 16, r: 3 });
-    el.setStyle({ fill: hovered ? tokens.foreground : tokens.mutedForeground });
-  };
-  pill(els.pillLeft, selectionLeft, hover.left);
-  pill(els.pillRight, selectionRight, hover.right);
-
-  const gripFill = withAlpha(tokens.background, 0.7);
-  [-4, 0, 4].forEach((offset, i) => {
-    els.grips[i].setShape({ cx: selectionLeft, cy: centerY + offset, r: 1 });
-    els.grips[i].setStyle({ fill: gripFill });
-    els.grips[i + 3].setShape({ cx: selectionRight, cy: centerY + offset, r: 1 });
-    els.grips[i + 3].setStyle({ fill: gripFill });
-  });
-
-  // Range label pills straddle the frame's bottom line — an overlay, so they
-  // occupy no layout space; half the pill sits above the line, half below. Each
-  // pill grows INWARD from its handle with a small inset, like the Recharts
-  // labels, instead of hanging past the frame edge.
-  const label = (el: ZrText, text: string, x: number, align: "left" | "right") => {
-    el.setStyle({
-      text,
-      x: align === "left" ? Math.max(x + 6, trackLeft + 2) : Math.min(x - 6, trackRight - 2),
-      y: top + geom.height,
-      align,
-      verticalAlign: "middle",
-      fill: tokens.background,
-      backgroundColor: tokens.foreground,
-      padding: [2, 5],
-      borderRadius: 4,
-      font: "500 9px system-ui, sans-serif",
-    });
-    el.attr("invisible", !showLabels || !text);
-  };
-  label(els.labelStart, labels?.start ?? "", selectionLeft, "left");
-  label(els.labelEnd, labels?.end ?? "", selectionRight, "right");
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// dataZoom slider — the transparent drag layer laid over the mini chart. Fully
-// chart-agnostic: the visible frame/handles/labels are the graphic overlays
-// above; this provides interaction only. Both zoom entries target only the MAIN
-// x-axis (index 0), so the mini chart never filters itself. The per-chart
-// mini-series (which differ per chart type) are built by the chart, not here.
-// ─────────────────────────────────────────────────────────────────────────────
-
-export function buildBrushDataZoom(params: {
-  brushBottom: number;
-  brushHeight: number;
-  brushRange: BrushRange;
-  fillerColor: string;
-}): DataZoomComponentOption[] {
-  const { brushBottom, brushHeight, brushRange, fillerColor } = params;
-
-  return [
-    {
-      type: "slider",
-      show: true,
-      xAxisIndex: [0],
-      left: 8,
-      right: 8,
-      bottom: brushBottom,
-      height: brushHeight,
-      // Carry the live range through every rebuild — a notMerge push
-      // without start/end would reset the zoom to the full extent.
-      start: brushRange.start,
-      end: brushRange.end,
-      brushSelect: false,
-      // Range labels are overlay pills below the frame (see
-      // syncBrushOverlay) — the native detail text renders INSIDE the
-      // track, which is not the evil-brush look.
-      showDetail: false,
-      backgroundColor: "transparent",
-      // The visible frame is the graphic overlay riding the selection —
-      // the component's own static border stays hidden.
-      borderColor: "transparent",
-      fillerColor,
-      dataBackground: { lineStyle: { opacity: 0 }, areaStyle: { opacity: 0 } },
-      selectedDataBackground: { lineStyle: { opacity: 0 }, areaStyle: { opacity: 0 } },
-      // Interaction only — the visible pills are graphic overlays (see
-      // syncBrushOverlay). Kept generous for an easy grab target.
-      handleIcon: "path://M -3 -5 L -3 5 A 3 3 0 0 0 3 5 L 3 -5 A 3 3 0 0 0 -3 -5 Z",
-      handleSize: "35%",
-      handleStyle: { opacity: 0 },
-      moveHandleSize: 0,
-      emphasis: { handleStyle: { opacity: 0 } },
-    },
-    { type: "inside", xAxisIndex: [0] },
-  ];
-}

package/src/components/composed/chat/chart/evilcharts/echarts-chart.tsx

@@ -1,214 +0,0 @@
-import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
-import type { ComponentType, ReactNode } from "react";
-import * as echarts from "echarts/core";
-
-export const ECHARTS_RENDERERS = {
-  canvas: "canvas",
-  svg: "svg",
-} as const;
-
-export type EChartsRenderer = (typeof ECHARTS_RENDERERS)[keyof typeof ECHARTS_RENDERERS];
-
-export const DEFAULT_ECHARTS_RENDERER = ECHARTS_RENDERERS.canvas;
-
-// Renderer registration is shared by every modular ECharts chart. Individual
-// chart modules only register the series and components they use.
-echarts.use([CanvasRenderer, SVGRenderer]);
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Theme keys + config — replicated from the repo's <ChartStyle> so the ECharts
-// charts stay self-contained (no recharts ui imports). Shared by every ECharts
-// chart and the tooltip/legend/brush ui modules.
-// ─────────────────────────────────────────────────────────────────────────────
-
-// Theme selectors mirror the repo's <ChartStyle>: light is the bare root, dark is `.dark`.
-export const THEMES = { light: "", dark: ".dark" } as const;
-export type ThemeKey = keyof typeof THEMES;
-export const THEME_KEYS = Object.keys(THEMES) as ThemeKey[];
-
-// Require at least one theme key — identical constraint to the repo's ChartConfig.
-export type AtLeastOneThemeColor =
-  | { light: string[]; dark?: string[] }
-  | { light?: string[]; dark: string[] };
-
-export type ChartConfig = Record<
-  string,
-  {
-    label?: ReactNode;
-    icon?: ComponentType;
-    colors?: AtLeastOneThemeColor;
-  }
->;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Color plumbing — replicated from the repo's <ChartStyle> so the charts stay
-// self-contained (no ./recharts imports).
-// ─────────────────────────────────────────────────────────────────────────────
-
-// Max slots a key needs = longest color array across themes (min 1). Both themes
-// always emit the same number of `--color-{key}-{n}` vars.
-export function getColorsCount(item: ChartConfig[string]): number {
-  if (!item.colors) return 1;
-  const counts = THEME_KEYS.map((theme) => item.colors?.[theme]?.length ?? 0);
-  return Math.max(...counts, 1);
-}
-
-// Distribute colors evenly across slots; extra slots go to the LAST color(s).
-// 2 colors / 4 slots → [c0, c0, c1, c1]; 3 colors / 4 slots → [c0, c1, c2, c2].
-export function distributeColors(colors: string[], maxCount: number): string[] {
-  const available = colors.length;
-  if (available >= maxCount) return colors.slice(0, maxCount);
-
-  const result: string[] = [];
-  const baseSlots = Math.floor(maxCount / available);
-  const extraSlots = maxCount % available;
-
-  for (let i = 0; i < available; i++) {
-    const isExtra = i >= available - extraSlots;
-    const slots = baseSlots + (isExtra ? 1 : 0);
-    for (let j = 0; j < slots; j++) result.push(colors[i]);
-  }
-
-  return result;
-}
-
-// Emits the same CSS <ChartStyle> would: `--color-{key}-{n}` scoped to
-// `[data-chart={id}]` (light) and `.dark [data-chart={id}]` (dark).
-export function buildChartCss(id: string, config: ChartConfig): string {
-  const colorConfig = Object.entries(config).filter(([, item]) => item.colors);
-  if (!colorConfig.length) return "";
-
-  const varsFor = (theme: ThemeKey) =>
-    colorConfig
-      .flatMap(([key, item]) => {
-        const authored = item.colors?.[theme];
-        if (!authored || authored.length === 0) return [];
-        return distributeColors(authored, getColorsCount(item)).map(
-          (color, index) => `  --color-${key.replace(/[^a-zA-Z0-9_-]/g, character => "\\" + character.codePointAt(0)!.toString(16) + " ")}-${index}: ${color};`,
-        );
-      })
-      .join("\n");
-
-  return Object.entries(THEMES)
-    .map(([theme, prefix]) => `${prefix} [data-chart=${id}] {\n${varsFor(theme as ThemeKey)}\n}`)
-    .join("\n");
-}
-
-// A single reusable 1×1 canvas normalizes ANY CSS color (hex, named, oklch, …)
-// to a concrete rgba string by painting it and reading the pixel back.
-let normalizerCtx: CanvasRenderingContext2D | null = null;
-export function normalizeColor(value: string): string {
-  const raw = value.trim();
-  if (!raw || typeof document === "undefined") return raw;
-
-  if (!normalizerCtx) {
-    const canvas = document.createElement("canvas");
-    canvas.width = 1;
-    canvas.height = 1;
-    normalizerCtx = canvas.getContext("2d", { willReadFrequently: true });
-  }
-  if (!normalizerCtx) return raw;
-
-  normalizerCtx.clearRect(0, 0, 1, 1);
-  normalizerCtx.fillStyle = "#000";
-  normalizerCtx.fillStyle = raw; // invalid values leave the sentinel in place
-  normalizerCtx.fillRect(0, 0, 1, 1);
-  const [r, g, b, a] = normalizerCtx.getImageData(0, 0, 1, 1).data;
-  return `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`;
-}
-
-// Scales the alpha of a normalized `rgba(r, g, b, a)` string. Multiplying (not
-// replacing) keeps translucent theme tokens honest: a border that is 10%-white
-// at `withAlpha(border, 0.5)` lands at 5%, matching Tailwind's `border/50`.
-export function withAlpha(color: string, alpha: number): string {
-  const match = color.match(/rgba?\(([^)]+)\)/);
-  if (!match) return color;
-  const [r, g, b, a] = match[1].split(",").map((p) => p.trim());
-  const base = a === undefined ? 1 : Number.parseFloat(a) || 0;
-  return `rgba(${r}, ${g}, ${b}, ${(base * alpha).toFixed(3)})`;
-}
-
-export type ResolvedColors = {
-  series: Record<string, string[]>; // normalized `--color-{key}-{n}` slots per key
-  tokens: {
-    mutedForeground: string;
-    border: string;
-    foreground: string;
-    background: string;
-  };
-};
-
-// Reads the injected CSS vars + theme tokens from the live DOM. Series slots come
-// from `getComputedStyle` on the container; tokens are read off a throwaway probe
-// carrying the matching Tailwind class (robust to the var naming a theme uses).
-export function resolveColors(
-  container: HTMLElement,
-  config: ChartConfig,
-  seriesKeys: string[],
-): ResolvedColors {
-  const computed = getComputedStyle(container);
-  const series: Record<string, string[]> = {};
-
-  for (const key of seriesKeys) {
-    const count = getColorsCount(config[key] ?? {});
-    const slots: string[] = [];
-    for (let n = 0; n < count; n++) {
-      const raw = computed.getPropertyValue(`--color-${key}-${n}`).trim();
-      slots.push(raw ? normalizeColor(raw) : "rgba(120, 120, 120, 1)");
-    }
-    series[key] = slots;
-  }
-
-  const probe = document.createElement("span");
-  probe.style.cssText = "position:absolute;width:0;height:0;visibility:hidden;pointer-events:none;";
-  container.appendChild(probe);
-  const readToken = (className: string) => {
-    probe.className = className;
-    return normalizeColor(getComputedStyle(probe).color);
-  };
-  const tokens = {
-    mutedForeground: readToken("text-muted-foreground"),
-    border: readToken("text-border"),
-    foreground: readToken("text-foreground"),
-    background: readToken("text-background"),
-  };
-  container.removeChild(probe);
-
-  return { series, tokens };
-}
-
-// Horizontal multi-stop color for a series — a solid string when there is only
-// one color, else an evenly-distributed left→right LinearGradient. Reused for the
-// stroke, symbol fills, and as the base tint for the area fill.
-export function seriesPaint(slots: string[]): string | echarts.graphic.LinearGradient {
-  if (slots.length <= 1) return slots[0] ?? "rgba(120, 120, 120, 1)";
-  const stops = slots.map((color, i) => ({ offset: i / (slots.length - 1), color }));
-  return new echarts.graphic.LinearGradient(0, 0, 1, 0, stops);
-}
-
-// Solid var / gradient of vars for a series indicator — mirrors getIndicatorColorStyle.
-// Used by BOTH the tooltip rows and the legend indicators.
-export function indicatorBackground(key: string, colorsCount: number): string {
-  if (colorsCount <= 1) return `var(--color-${key}-0)`;
-  const stops = Array.from({ length: colorsCount }, (_, i) => {
-    const offset = (i / (colorsCount - 1)) * 100;
-    return `var(--color-${key}-${i}) ${offset}%`;
-  }).join(", ");
-  return `linear-gradient(to right, ${stops})`;
-}
-
-// Composites a translucent color over an opaque base into a FLAT color. The
-// tick dots need this: a translucent stroke double-paints where its round caps
-// overlap the line body, which reads as two stacked colors.
-export function flattenColor(color: string, base: string): string {
-  const parse = (value: string) =>
-    value
-      .match(/rgba?\(([^)]+)\)/)?.[1]
-      .split(",")
-      .map((part) => Number.parseFloat(part)) ?? [0, 0, 0, 1];
-  const [r, g, b, a = 1] = parse(color);
-  const [baseR, baseG, baseB] = parse(base);
-  const mix = (channel: number, baseChannel: number) =>
-    Math.round(channel * a + baseChannel * (1 - a));
-  return `rgb(${mix(r, baseR)}, ${mix(g, baseG)}, ${mix(b, baseB)})`;
-}

package/src/components/composed/chat/chart/evilcharts/echarts-dot.tsx

@@ -1,111 +0,0 @@
-import type * as echarts from "echarts/core";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Dots — map the resting/active variants onto ECharts symbols. Shared by every
-// ECharts chart that draws point markers.
-// ─────────────────────────────────────────────────────────────────────────────
-
-export type DotVariant = "none" | "default" | "border" | "colored-border" | "ping";
-
-// Dot marker paint — structurally assignable to BOTH the series-level and the
-// per-datum itemStyle (the per-datum variant forbids callback color paints, so
-// the broader LineSeriesOption["itemStyle"] cannot be reused for it).
-export type DotItemStyleOption = {
-  color?: string | echarts.graphic.LinearGradient;
-  borderColor?: string | echarts.graphic.LinearGradient;
-  borderWidth?: number;
-  opacity?: number;
-};
-
-export type DotStyle = { size: number; itemStyle: DotItemStyleOption };
-
-// Re-color a solid paint at a given alpha (hex #rgb/#rrggbb or rgb/rgba in, rgba
-// out; named colors pass through). Used for the translucent "ping" halo ring.
-function withAlpha(color: string, alpha: number): string {
-  if (color.startsWith("#")) {
-    let hex = color.slice(1);
-    if (hex.length === 3)
-      hex = hex
-        .split("")
-        .map((c) => c + c)
-        .join("");
-    const n = parseInt(hex, 16);
-    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
-  }
-  const m = color.match(/rgba?\(([^)]+)\)/);
-  if (m) {
-    const [r, g, b] = m[1].split(",").map((s) => parseFloat(s));
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-  }
-  return color;
-}
-
-export function dotItemStyle(
-  variant: DotVariant,
-  paint: string | echarts.graphic.LinearGradient,
-  background: string,
-): DotItemStyleOption {
-  switch (variant) {
-    case "border":
-      // Series-colored core with a thick background halo (Recharts r6 / sw5).
-      return { color: paint, borderColor: background, borderWidth: 2 };
-    case "colored-border":
-      // Background-filled core with a thin colored ring (Recharts r3 / sw1).
-      return { color: background, borderColor: paint, borderWidth: 1 };
-    case "ping": {
-      // Solid core wrapped in a wide, translucent same-color ring — a static
-      // "ping". The ring is the symbol's BORDER (a stroke ~1.25× the core
-      // radius), which fills out to a soft halo disc; a genuinely large symbol
-      // would silently fail to render on a category-axis line, so we stroke a
-      // small one instead.
-      const halo = typeof paint === "string" ? withAlpha(paint, 0.28) : paint;
-      return { color: paint, borderColor: halo, borderWidth: 10 };
-    }
-    case "default":
-      return { color: paint, borderWidth: 0 };
-    default:
-      return {};
-  }
-}
-
-// Sizes mirror the Recharts markers: default r3, border r6 (mostly halo), and
-// colored-border r3+ring. Flattening these to one size makes the hover ring read
-// LARGER than a haloed resting dot — the opposite of the Recharts twin.
-export const DOT_SIZES: Record<DotVariant, number> = {
-  none: 0,
-  default: 6,
-  border: 8,
-  "colored-border": 6,
-  ping: 8,
-};
-
-export function dotStyle(
-  variant: DotVariant,
-  paint: string | echarts.graphic.LinearGradient,
-  background: string,
-): DotStyle {
-  return { size: DOT_SIZES[variant], itemStyle: dotItemStyle(variant, paint, background) };
-}
-
-// The color the horizontal series gradient shows at position t ∈ [0, 1]. ECharts
-// paints a gradient itemStyle relative to each symbol's own bounding box — a full
-// rainbow inside every dot — while the Recharts dots clip a chart-wide gradient,
-// so each takes the gradient's color at its x-position. Sampling reproduces that.
-export function sampleGradient(slots: string[], t: number): string {
-  if (slots.length <= 1) return slots[0] ?? "rgba(120, 120, 120, 1)";
-
-  const parse = (color: string) =>
-    color
-      .match(/rgba?\(([^)]+)\)/)?.[1]
-      .split(",")
-      .map(Number) ?? [120, 120, 120, 1];
-
-  const position = t * (slots.length - 1);
-  const index = Math.min(Math.floor(position), slots.length - 2);
-  const fraction = position - index;
-  const [r1, g1, b1, a1 = 1] = parse(slots[index]);
-  const [r2, g2, b2, a2 = 1] = parse(slots[index + 1]);
-  const lerp = (from: number, to: number) => from + (to - from) * fraction;
-
-  return `rgba(${Math.round(lerp(r1, r2))}, ${Math.round(lerp(g1, g2))}, ${Math.round(lerp(b1, b2))}, ${lerp(a1, a2).toFixed(3)})`;
-}