@exegia/corpora-ui 3.0.0 → 4.0.0

package/src/components/composed/chat/flowchart/hooks.tsx

@@ -1,347 +0,0 @@
-import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
-import type { TEdge, TEdgeEnd, IFlowchartProps, TStepNode } from "./types";
-import { anchors, bezier, canvasH, curve, cw, edgePoints, place, rowH, rows, rowYs, type THeights, type TLayout, type TOffsets, type TPoint } from "./utils";
-import { EST_H, SNAP_RADIUS } from "./constant";
-import { toastManager } from "@/components/ui/toast";
-
-export const ZOOM_MIN = 0.25;
-export const ZOOM_MAX = 2;
-
-type TOptions = Pick<IFlowchartProps, "edges" | "readOnly" | "zoomable" | "onDrag" | "onAdd" | "onRemove" | "onEdgeRemove" | "onEdgeConnect" | "onEdgeChange" | "onRename" | "onDuplicate"> & {
-  steps: TStepNode[];
-  canvasRef: React.RefObject<HTMLDivElement | null>;
-};
-
-/** A connector end being dragged towards a new card; `snap` is the card whose anchor is in range. */
-export type TEdgeDrag = { id: string; end: TEdgeEnd; point: TPoint; snap?: string };
-
-/** Pill text: explicit name, else the kind label, else "Node n" (conditions always count). */
-export const nodeLabel = (node: TStepNode, index: number) =>
-  node.name ?? (node.condition || !node.kind ? `Node ${index + 1}` : node.kind.label);
-
-/** Default connectors: a chain through the steps in order. */
-export const chainEdges = (steps: TStepNode[]): TEdge[] =>
-  steps.slice(1).map((n, i) => ({ id: `${steps[i].id}->${n.id}`, source: steps[i].id, target: n.id }));
-
-export const useFlowchart = ({ steps, edges: edgesProp, readOnly = false, zoomable = false, onDrag, onAdd, onRemove, onEdgeRemove, onEdgeConnect, onEdgeChange, onRename, onDuplicate, canvasRef }: TOptions) => {
-  /** Visible canvas box; the world behind it is twice this size. */
-  const [frame, setFrame] = useState({ w: 0, h: 0 });
-  const [heights, setHeights] = useState<THeights>(EST_H);
-  const [selected, setSelected] = useState<string | null>(null);
-  const [offsets, setOffsets] = useState<TOffsets>({});
-  /** Zoom and pan of the world inside the frame (pan in frame px). */
-  const [view, setView] = useState({ scale: 1, x: 0, y: 0 });
-  const scale = view.scale;
-  const pan = useRef<{ startX: number; startY: number; baseX: number; baseY: number; moved: boolean } | null>(null);
-  const [pendingRemove, setPendingRemove] = useState<{ id: string; orphans: string[] } | null>(null);
-  const [selectedEdge, setSelectedEdge] = useState<string | null>(null);
-  const [edgeDrag, setEdgeDrag] = useState<TEdgeDrag | null>(null);
-  /** Card highlighted while the user browses "Connect to…" in the context menu. */
-  const [previewNode, setPreviewNode] = useState<string | null>(null);
-  const drag = useRef<{
-    id: string;
-    startX: number;
-    startY: number;
-    baseDx: number;
-    baseDy: number;
-    moved: boolean;
-  } | null>(null);
-
-  const edges = useMemo(() => edgesProp ?? chainEdges(steps), [edgesProp, steps]);
-  const rowHeight = useMemo(() => rowH(steps, heights), [heights, steps]);
-  // The world is twice the frame so there is always hidden canvas to drag into view.
-  const width = frame.w * 2;
-  const layout = useMemo<TLayout>(() => {
-    const _rows = rows(steps);
-    return { width, offsets, rows: _rows, rowY: rowYs(rowHeight), heights };
-  }, [steps, width, offsets, rowHeight, heights]);
-  const canvasHeight = useMemo(() => canvasH(layout.rowY, rowHeight), [layout.rowY, rowHeight]);
-  const connectorWidth = cw(width);
-  const worldHeight = Math.max(canvasHeight, frame.h * 2);
-
-  /** Keep the world covering the frame: clamp when it is larger, centre it when smaller. */
-  const clampPan = useCallback(
-    (x: number, y: number, s: number, f = frame) => {
-      const fit = (offset: number, visible: number, content: number) =>
-        content <= visible ? (visible - content) / 2 : Math.min(0, Math.max(visible - content, offset));
-      return { x: fit(x, f.w, connectorWidth * s), y: fit(y, f.h, worldHeight * s) };
-    },
-    [frame, connectorWidth, worldHeight],
-  );
-
-  const updateHeights = useCallback((callback: (prev: THeights) => THeights) => setHeights(callback), []);
-  const updateFrame = useCallback((w: number, h: number) => {
-    setFrame((prev) => (prev.w === w && prev.h === h ? prev : { w, h }));
-    // First measurement centres the world horizontally, top-aligned; later
-    // width changes scale the pan so the view stays put as the world resizes.
-    const prevW = frame.w;
-    setView((v) => {
-      if (w <= 0 || w === prevW) return v;
-      return prevW === 0 ? { ...v, x: (w - w * 2 * v.scale) / 2, y: 0 } : { ...v, x: (v.x * w) / prevW };
-    });
-  }, [frame.w]);
-  const updateSelected = (id: string | null) => {
-    setSelected((prev) => (prev === id ? prev : id));
-    if (id !== null) setSelectedEdge(null);
-  };
-  const editableEdges = !readOnly && Boolean(onEdgeRemove || onEdgeConnect || onEdgeChange);
-  const selectEdge = (id: string | null) => {
-    if (!editableEdges) return;
-    setSelectedEdge(id);
-    if (id !== null) setSelected(null);
-  };
-  /** Zoom about the frame centre so what is in the middle stays there. */
-  const zoomTo = useCallback(
-    (next: number) =>
-      setView((v) => {
-        const s = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, +next.toFixed(3)));
-        const cx = frame.w / 2;
-        const cy = frame.h / 2;
-        const k = s / v.scale;
-        return { scale: s, ...clampPan(cx - (cx - v.x) * k, cy - (cy - v.y) * k, s) };
-      }),
-    [frame, clampPan],
-  );
-  const zoomBy = useCallback((factor: number) => zoomTo(scale * factor), [zoomTo, scale]);
-  const resetZoom = useCallback(() => zoomTo(1), [zoomTo]);
-
-  /** Dragging empty canvas pans the world; a still click clears the selection. */
-  const onCanvasPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
-    if (event.button !== 0) return;
-    const target = event.target as Element;
-    if (target.closest("[data-node], [data-ui], [data-edge-handle], [data-edge]")) return;
-    pan.current = { startX: event.clientX, startY: event.clientY, baseX: view.x, baseY: view.y, moved: false };
-    event.currentTarget.setPointerCapture(event.pointerId);
-  };
-  const onCanvasPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
-    const p = pan.current;
-    if (!p) return;
-    const dx = event.clientX - p.startX;
-    const dy = event.clientY - p.startY;
-    if (!p.moved && Math.hypot(dx, dy) < 3) return;
-    p.moved = true;
-    setView((v) => ({ ...v, ...clampPan(p.baseX + dx, p.baseY + dy, v.scale) }));
-  };
-  const onCanvasPointerUp = () => {
-    const p = pan.current;
-    pan.current = null;
-    if (p && !p.moved) {
-      setSelected(null);
-      setSelectedEdge(null);
-    }
-  };
-  const isPanning = () => pan.current?.moved === true;
-
-  const onPointerDown = (node: TStepNode) => (event: React.PointerEvent<HTMLDivElement>) => {
-    // Left button only: a right-press belongs to the context menu.
-    if (readOnly || event.button !== 0) return;
-    if ((event.target as Element).closest("[data-ui]")) return;
-    const off = offsets[node.id];
-    drag.current = {
-      id: node.id,
-      startX: event.clientX,
-      startY: event.clientY,
-      baseDx: off?.dx ?? 0,
-      baseDy: off?.dy ?? 0,
-      moved: false,
-    };
-    // Capture only once a drag starts; capturing a still press retargets
-    // its click to the wrapper instead of the node selection button.
-  };
-
-  const onPointerMove = (node: TStepNode) => (event: React.PointerEvent<HTMLDivElement>) => {
-    const d = drag.current;
-    if (!d || d.id !== node.id) return;
-    const dx = d.baseDx + (event.clientX - d.startX) / scale;
-    const dy = d.baseDy + (event.clientY - d.startY) / scale;
-    if (!d.moved && Math.hypot(dx - d.baseDx, dy - d.baseDy) < 3) return;
-    if (!d.moved) event.currentTarget.setPointerCapture(event.pointerId);
-    d.moved = true;
-
-    // keep the card inside the canvas
-    const { w } = place(node, layout);
-    const h = heights[node.id] ?? 90;
-    const baseCx = node.x * connectorWidth;
-    const baseTop = layout.rowY[layout.rows.indexOf(node.row)] ?? 0;
-    const cx = Math.min(Math.max(baseCx + dx, w / 2 + 8), connectorWidth - w / 2 - 8);
-    const top = Math.min(Math.max(baseTop + dy, 8), worldHeight - h - 8);
-    setOffsets((current) => ({ ...current, [node.id]: { dx: cx - baseCx, dy: top - baseTop } }));
-  };
-
-  const onPointerUp = (node: TStepNode) => () => {
-    const d = drag.current;
-    if (d?.id !== node.id) return;
-    if (d.moved) {
-      onDrag?.(node.id, offsets[node.id] ?? { dx: 0, dy: 0 });
-      // a real drag shouldn't also toggle selection
-      setTimeout(() => (drag.current = null), 0);
-    } else drag.current = null;
-  };
-
-  const wasDragged = () => drag.current?.moved === true;
-  const isLit = (edge: TEdge) => selected === edge.source || selected === edge.target || selectedEdge === edge.id;
-
-  /** Client → unscaled canvas coordinates. */
-  const toCanvas = (clientX: number, clientY: number): TPoint => {
-    const rect = canvasRef.current?.getBoundingClientRect();
-    return { x: (clientX - (rect?.left ?? 0) - view.x) / scale, y: (clientY - (rect?.top ?? 0) - view.y) / scale };
-  };
-  const edgeEnds = (edge: TEdge) => edgePoints({ from: edge.source, to: edge.target }, steps, layout);
-
-  const onEdgeHandleDown = (edge: TEdge, end: TEdgeEnd) => (event: React.PointerEvent<SVGElement>) => {
-    if (!onEdgeConnect) return;
-    event.stopPropagation();
-    (event.currentTarget as Element).setPointerCapture(event.pointerId);
-    setEdgeDrag({ id: edge.id, end, point: toCanvas(event.clientX, event.clientY) });
-  };
-  /** Nearest anchor of another card within SNAP_RADIUS: top anchors for a target end, bottom for a source end. */
-  const snapCandidate = (edge: TEdge, end: TEdgeEnd, point: TPoint) => {
-    const other = end === "source" ? edge.target : edge.source;
-    let best: { id: string; d: number } | null = null;
-    for (const node of steps) {
-      if (node.id === other) continue;
-      const a = anchors(node, layout);
-      const p = end === "source" ? a.bottom : a.top;
-      const d = Math.hypot(p.x - point.x, p.y - point.y);
-      if (d <= SNAP_RADIUS && (!best || d < best.d)) best = { id: node.id, d };
-    }
-    return best?.id;
-  };
-  const onEdgeHandleMove = (event: React.PointerEvent<SVGElement>) => {
-    if (!edgeDrag) return;
-    const point = toCanvas(event.clientX, event.clientY);
-    const edge = edges.find((e) => e.id === edgeDrag.id);
-    const snap = edge ? snapCandidate(edge, edgeDrag.end, point) : undefined;
-    setEdgeDrag({ ...edgeDrag, point, snap });
-  };
-  const onEdgeHandleUp = (event: React.PointerEvent<SVGElement>) => {
-    if (!edgeDrag) return;
-    const edge = edges.find((e) => e.id === edgeDrag.id);
-    const card = document.elementFromPoint(event.clientX, event.clientY)?.closest<HTMLElement>("[data-node]");
-    const target = edgeDrag.snap ?? card?.dataset.node;
-    setEdgeDrag(null);
-    if (!edge || !target) return;
-    const other = edgeDrag.end === "source" ? edge.target : edge.source;
-    if (target === other || target === edge[edgeDrag.end]) return;
-    onEdgeConnect?.({ ...edge, [edgeDrag.end]: target });
-  };
-  /** Path of the connector being re-routed, following the pointer. */
-  const ghostCurve = () => {
-    if (!edgeDrag) return "";
-    const edge = edges.find((e) => e.id === edgeDrag.id);
-    const pts = edge && edgeEnds(edge);
-    if (!pts) return "";
-    const snapNode = edgeDrag.snap ? steps.find((n) => n.id === edgeDrag.snap) : undefined;
-    const point = snapNode ? anchors(snapNode, layout)[edgeDrag.end === "source" ? "bottom" : "top"] : edgeDrag.point;
-    return edgeDrag.end === "source" ? curve(point, pts.to) : curve(pts.from, point);
-  };
-  /** "Connect to…": a new connector from `source` to `target`, unless one exists. */
-  const connectTo = (source: string, target: string) => {
-    if (source === target || edges.some((e) => e.source === source && e.target === target)) return;
-    onEdgeConnect?.({ id: `${source}->${target}`, source, target });
-  };
-  const renameNode = (id: string, name: string) => {
-    onRename?.(id, name);
-    toastManager.add({ title: "Node renamed", description: name, type: "success" });
-  };
-  const duplicateNode = (id: string) => onDuplicate?.(id);
-  const snapTarget = edgeDrag?.snap ?? null;
-  const removeEdge = (id: string) => {
-    setSelectedEdge(null);
-    onEdgeRemove?.(id);
-  };
-  const bezierCurve = (edge: TEdge) => bezier({ from: edge.source, to: edge.target }, steps, layout);
-  const handlePlace = (node: TStepNode) => place(node, layout);
-
-  /** Children that would lose their only parent if `id` were removed. */
-  const orphansOf = (id: string) =>
-    edges
-      .filter((e) => e.source === id)
-      .map((e) => e.target)
-      .filter((child) => !edges.some((e) => e.target === child && e.source !== id));
-
-  const commitRemove = (id: string) => {
-    if (selected === id) setSelected(null);
-    setPendingRemove(null);
-    onRemove?.(id);
-  };
-
-  /** Removes outright, or parks the id in `pendingRemove` for Root's AlertDialog when children would be orphaned. */
-  const removeNode = (id: string) => {
-    const orphans = orphansOf(id);
-    if (orphans.length) setPendingRemove({ id, orphans });
-    else commitRemove(id);
-  };
-  const cancelRemove = () => setPendingRemove(null);
-
-  return {
-    steps,
-    edges,
-    readOnly,
-    zoomable,
-    scale,
-    view,
-    zoomBy,
-    resetZoom,
-    onCanvasPointerDown,
-    onCanvasPointerMove,
-    onCanvasPointerUp,
-    isPanning,
-    frame,
-    worldHeight,
-    onAdd,
-    removeNode,
-    commitRemove,
-    cancelRemove,
-    pendingRemove,
-    orphansOf,
-    updateHeights,
-    offsets,
-    width,
-    selected,
-    drag,
-    updateSelected,
-    updateFrame,
-    onPointerDown,
-    onPointerMove,
-    onPointerUp,
-    wasDragged,
-    isLit,
-    editableEdges,
-    selectedEdge,
-    selectEdge,
-    edgeDrag,
-    edgeEnds,
-    onEdgeHandleDown,
-    onEdgeHandleMove,
-    onEdgeHandleUp,
-    ghostCurve,
-    removeEdge,
-    onEdgeChange,
-    snapTarget,
-    previewNode,
-    setPreviewNode,
-    connectTo,
-    renameNode,
-    duplicateNode,
-    canRename: Boolean(onRename),
-    canDuplicate: Boolean(onDuplicate),
-    canConnect: Boolean(onEdgeConnect),
-    rowHeight,
-    canvasHeight,
-    connectorWidth,
-    bezierCurve,
-    handlePlace,
-  };
-};
-
-export type TFlowchartController = ReturnType<typeof useFlowchart>;
-
-/** Root owns the one `useFlowchart` instance; nodes read it from here. */
-export const FlowchartContext = createContext<TFlowchartController | null>(null);
-
-export const useFlowchartContext = () => {
-  const ctx = useContext(FlowchartContext);
-  if (!ctx) throw new Error("Flowchart.ChartNode must render inside Flowchart.Root");
-  return ctx;
-};

package/src/components/composed/chat/flowchart/index.ts

@@ -1,14 +0,0 @@
-import Root from "./default"
-import { Connector } from "./connector"
-import { ChartNode } from "./chart-node"
-
-export type * from "./types"
-export * from "./hooks"
-
-export const Flowchart = {
-  Root,
-  Connector,
-  ChartNode,
-}
-
-export default Root

package/src/components/composed/chat/flowchart/step-body.tsx

@@ -1,82 +0,0 @@
-import { useState } from "react";
-import { SelectChip, SourceChip } from "@/components/atoms/chip";
-import { FLAVORS, PROPERTIES, TOPPINGS } from "./constant";
-import type { TStepNode } from "./types";
-import { mix } from "./utils";
-
-/* ── icons ── */
-function ConeIcon({ size = 16 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-      <path d="m7 11 4.08 10.35a1 1 0 0 0 1.84 0L17 11" />
-      <path d="M17 7A5 5 0 0 0 7 7" />
-      <path d="M17 7a2 2 0 0 1 0 4H7a2 2 0 0 1 0-4" />
-    </svg>
-  );
-}
-
-export function StepBody({ node }: { node: TStepNode }) {
-  const hue = node.hue ?? "var(--accent-default)";
-  return (
-    <div className="flex items-center gap-2.5 p-2.5">
-      {node.image ? (
-        <img
-          alt={node.image.alt ?? ""}
-          className="size-9 shrink-0 rounded-[8px] object-cover"
-          src={node.image.src}
-          style={{ boxShadow: `0 0 0 1px ${mix(hue, 20)}` }}
-        />
-      ) : (
-        <span
-          className="flex size-9 shrink-0 items-center justify-center rounded-[8px] [&>svg]:size-4"
-          style={{
-            background: mix(hue, 12),
-            color: hue,
-            boxShadow: `0 0 0 1px ${mix(hue, 20)}`,
-          }}
-        >
-          {node.icon ?? <ConeIcon />}
-        </span>
-      )}
-      <span className="min-w-0 text-left">
-        <span className="block truncate text-[13px] font-semibold leading-tight text-ink">{node.title}</span>
-        <span className="mt-0.5 block text-[12px] leading-snug text-ink-2">{node.caption}</span>
-      </span>
-    </div>
-  );
-}
-
-/** Default If/Else card body: two chip rows. Picking a value is a TODO until SelectChip's menu lands. */
-export function ConditionBody() {
-  const [open, setOpen] = useState<string | null>(null);
-  const values: Record<string, string> = {
-    prop1: "flavor",
-    val1: "Rocky Road",
-    prop2: "topping",
-    val2: "Brown butter bourbon brittle crunch",
-  };
-  const toggle = (id: string) => setOpen((current) => (current === id ? null : id));
-  const pick = () => setOpen(null);
-  const chip = (id: string, items: { name: string; tag?: string }[], width: string, extra?: object) => (
-    <SelectChip id={id} value={values[id]} items={items} width={width} open={open === id} onToggle={toggle} onPick={pick} {...extra} />
-  );
-
-  return (
-    <div className="flex flex-col gap-1.5 px-3 py-2.5">
-      <div className="flex min-w-0 items-center gap-1.5">
-        <span className="w-7 text-[12.5px] text-ink-2">If</span>
-        <SourceChip />
-        {chip("prop1", PROPERTIES.map((name) => ({ name })), "w-36")}
-        <span className="text-[12.5px] text-ink-2">is</span>
-        {chip("val1", FLAVORS, "w-44", { dot: true, align: "right" })}
-      </div>
-      <div className="flex min-w-0 flex-wrap items-center gap-1.5">
-        <span className="w-7 text-[12.5px] text-ink-2">and</span>
-        <SourceChip />
-        {chip("prop2", PROPERTIES.map((name) => ({ name })), "w-36")}
-        <span className="text-[12.5px] text-ink-2">is</span>
-        {chip("val2", TOPPINGS, "w-64", { dot: true })}
-      </div>
-    </div>
-  );
-}

package/src/components/composed/chat/flowchart/types.ts

@@ -1,89 +0,0 @@
-import type { SVGProps } from "react"
-
-export type TFlowchartSide = "top" | "right" | "bottom" | "left"
-
-export interface IFlowchartProps {
-  /** Cards to lay out. Defaults to the Trigger → If / Else sample. */
-  steps?: TStepNode[]
-  /** Connectors. Defaults to a chain through `steps` in order. */
-  edges?: TEdge[]
-  /** No drag, no add / remove buttons. Selection still works. */
-  readOnly?: boolean
-  /** Ctrl/⌘ + wheel and the +/− buttons scale the canvas. */
-  zoomable?: boolean
-  /** A card was dragged; `offset` is its displacement from the laid-out position. */
-  onDrag?: (id: string, offset: { dx: number; dy: number }) => void
-  /** The add button on one side of a card was pressed. */
-  onAdd?: (id: string, side: TFlowchartSide) => void
-  /** The remove button was pressed (already confirmed when children would be orphaned). */
-  onRemove?: (id: string) => void
-  /**
-   * Canvas min-height in px. The canvas fills its parent; without this it
-   * floors at the content height it loaded with, so zooming out or removing
-   * a card never collapses it.
-   */
-  height?: number
-  /** Disconnect was pressed on a selected connector. Enables connector editing. */
-  onEdgeRemove?: (id: string) => void
-  /** A connector end was dropped on another card; `edge` carries the new source / target. */
-  onEdgeConnect?: (edge: TEdge) => void
-  /** Stroke width or colour picked from the connector toolbar. */
-  onEdgeChange?: (id: string, patch: Pick<TEdge, "strokeWidth" | "color">) => void
-  /** The pill was renamed inline (double-click, then click away or Enter). */
-  onRename?: (id: string, name: string) => void
-  /** "Duplicate" in the context menu: copy the card to a new node on its right. */
-  onDuplicate?: (id: string) => void
-  variant?: string
-  children?: React.ReactNode
-  className?: string
-}
-
-export type TStepNode = {
-  id: string
-  row: number
-  x: number // 0–1 center of the node
-  w: number
-  kind?: { label: string; hue: string }
-  /** Pill text; defaults to the kind label, or "Node n" for conditions. */
-  name?: string
-  hue?: string
-  title?: string
-  caption?: string
-  /** Replaces the icon tile — a person, a manuscript, a corpus cover. */
-  image?: { src: string; alt?: string }
-  /** Custom tile icon when there is no image. */
-  icon?: React.ReactNode
-  condition?: boolean // renders the if/else chip rows instead
-  /** Custom card body; replaces the default title / caption body. */
-  children?: React.ReactNode
-}
-
-export type TEdge = {
-  id: string
-  source: string
-  target: string
-  bezierCurve?: boolean
-  strokeWidth?: number
-  /** Any CSS colour; defaults to the line token, accent when lit. */
-  color?: string
-}
-
-export type TEdgeEnd = "source" | "target"
-
-export interface IConnectorProps extends Omit<SVGProps<SVGPathElement>, "strokeWidth"> {
-  edge: TEdge
-  isLit: boolean
-  strokeWidth?: number
-  /** Selected for editing: bolder hit, toolbar and end handles render in Root. */
-  selected?: boolean
-  /** Enables the wide click target; called with the edge id. */
-  onPick?: (id: string) => void
-}
-
-export interface IChartNodeProps {
-  node: TStepNode
-  /** Position in `steps`, for the generated "Node n" label. */
-  index?: number
-  onRef: (el: HTMLDivElement | null) => void
-  children?: React.ReactNode
-}

package/src/components/composed/chat/flowchart/utils.ts

@@ -1,78 +0,0 @@
-import { PAD_Y, PILL_OFFSET, ROW_GAP } from "./constant";
-import type { TStepNode } from "./types";
-
-export type TOffsets = Record<string, { dx: number; dy: number }>;
-export type THeights = Record<string, number>;
-
-/** Everything `place`/`bezier` need to position a node, resolved once per render. */
-export type TLayout = {
-  width: number;
-  offsets: TOffsets;
-  rows: number[];
-  rowY: number[];
-  heights: THeights;
-};
-
-/** Distinct row indices, ascending. */
-export const rows = (steps: TStepNode[]) =>
-  [...new Set(steps.map((n) => n.row))].sort((a, b) => a - b);
-
-/** Height of each row = tallest node in it. */
-export const rowH = (steps: TStepNode[], heights: THeights) =>
-  rows(steps).map((r) =>
-    Math.max(...steps.filter((n) => n.row === r).map((n) => heights[n.id] ?? 90)),
-  );
-
-/** Y offset of each row, stacked with ROW_GAP. */
-export const rowYs = (rowH: number[]) =>
-  rowH.map((_, i) => (i === 0 ? PAD_Y : PAD_Y + rowH.slice(0, i).reduce((a, b) => a + b, 0) + i * ROW_GAP));
-
-export const canvasH = (rowY: number[], rowH: number[]) =>
-  (rowY[rowY.length - 1] ?? PAD_Y) + (rowH[rowH.length - 1] ?? 0) + PAD_Y;
-
-export const mix = (hue: string, pct: number, base = "var(--surface)") =>
-  `color-mix(in srgb, ${hue} ${pct}%, ${base})`;
-
-export const cw = (width: number) => width || 480;
-
-export const place = (n: TStepNode, { width, offsets, rows, rowY }: TLayout) => {
-  const w = Math.min(n.w, cw(width) * 0.92);
-  const off = offsets[n.id];
-  return {
-    w,
-    cx: n.x * cw(width) + (off?.dx ?? 0),
-    top: (rowY[rows.indexOf(n.row)] ?? PAD_Y) + (off?.dy ?? 0),
-  };
-};
-
-/** Card anchor points (pills sit above the card, so offset the top). */
-export const anchors = (n: TStepNode, layout: TLayout) => {
-  const { cx, top } = place(n, layout);
-  return {
-    top: { x: cx, y: top + (n.kind ? PILL_OFFSET : 0) },
-    bottom: { x: cx, y: top + (layout.heights[n.id] ?? 90) },
-  };
-};
-
-export type TPoint = { x: number; y: number };
-
-/** Vertical S-curve between two points. */
-export const curve = (from: TPoint, to: TPoint) => {
-  const k = Math.min(Math.max(Math.abs(to.y - from.y) * 0.55, 24), 84);
-  return `M ${from.x} ${from.y} C ${from.x} ${from.y + k}, ${to.x} ${to.y - k}, ${to.x} ${to.y}`;
-};
-
-/** Cubic bezier midpoint, where the connector toolbar sits. */
-export const midpoint = (from: TPoint, to: TPoint): TPoint => ({ x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 });
-
-export const edgePoints = (edge: { from: string; to: string }, steps: TStepNode[], layout: TLayout) => {
-  const a = steps.find((n) => n.id === edge.from);
-  const b = steps.find((n) => n.id === edge.to);
-  if (!a || !b) return null;
-  return { from: anchors(a, layout).bottom, to: anchors(b, layout).top };
-};
-
-export const bezier = (edge: { from: string; to: string }, steps: TStepNode[], layout: TLayout) => {
-  const pts = edgePoints(edge, steps, layout);
-  return pts ? curve(pts.from, pts.to) : "";
-};

package/src/components/composed/chat/hint.tsx

@@ -1,59 +0,0 @@
-import { Kbd, KbdGroup } from "@/components/ui/kbd";
-import { SPRING_LAYOUT } from "@/lib/ease";
-import { cn } from "@/lib/utils";
-import { useReducedMotion, motion } from "motion/react";
-
-
-/** "Press ⌘ + ↵ to send message" — the composer's send hint. */
-export function SendHint({
-  className,
-  verbose = true,
-}: {
-  className?: string
-  /** Pin the keycaps to the end and drop the trailing "to send message". */
-  verbose?: boolean
-}): React.ReactElement {
-  const reduceMotion = useReducedMotion()
-  // `justify-content` and `display` are discrete — they snap rather than tween.
-  // A spacer whose flex-grow rises 0 → 1 buys the start → end shift, and it
-  // takes exactly the room the collapsing label gives back, so both halves ride
-  // the same spring.
-  const transition = reduceMotion ? { duration: 0 } : SPRING_LAYOUT
-
-  return (
-    <motion.span
-      className={cn(
-        "flex flex-1 items-center gap-1.5 text-sm whitespace-nowrap text-muted-foreground/60",
-        className
-      )}
-      data-slot="send-hint"
-    >
-      <motion.span
-        aria-hidden="true"
-        animate={{ flexGrow: verbose ? 1 : 0 }}
-        className="inline-flex shrink-0 basis-0 items-center"
-        initial={false}
-        transition={transition}
-      />
-      Press
-      <KbdGroup className="max-h-3 items-center">
-        <Kbd aria-label="Command">⌘</Kbd>
-        <Kbd aria-label="Enter" className="w-8">
-          ↵
-        </Kbd>
-      </KbdGroup>
-      <motion.span
-        animate={{
-          opacity: verbose ? 0 : 1,
-          width: verbose ? 0 : "auto",
-          x: verbose ? -8 : 0,
-        }}
-        className="inline-block shrink-0 overflow-hidden"
-        initial={false}
-        transition={transition}
-      >
-        to send message
-      </motion.span>
-    </motion.span>
-  )
-}