@exegia/corpora-ui 3.0.0 → 4.0.0

package/src/components/composed/chat/flowchart/chart-node.tsx

@@ -1,162 +0,0 @@
-import { useState } from "react";
-import { Copy, Link2, Plus, Sparkles, Trash2 } from "lucide-react";
-import type { IChartNodeProps } from "./types";
-import { ConditionBody, StepBody } from "./step-body";
-import { nodeLabel, useFlowchartContext } from "./hooks";
-import { mix } from "./utils";
-import {
-  ContextMenu,
-  ContextMenuItem,
-  ContextMenuPopup,
-  ContextMenuSeparator,
-  ContextMenuSub,
-  ContextMenuSubPopup,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import { cn } from "@/lib/utils";
-
-export function ChartNode({ node, index = 0, onRef, children }: IChartNodeProps) {
-  const {
-    steps, selected, updateSelected, onPointerDown, onPointerMove, onPointerUp, handlePlace, wasDragged, drag, readOnly, onAdd, removeNode,
-    snapTarget, previewNode, setPreviewNode, connectTo, renameNode, duplicateNode, canRename, canDuplicate, canConnect,
-  } = useFlowchartContext();
-  const { w, cx, top } = handlePlace(node);
-  const active = selected === node.id;
-  const label = nodeLabel(node, index);
-  const [draft, setDraft] = useState<string | null>(null);
-  const body = children ?? node.children ?? (node.condition ? <ConditionBody /> : <StepBody node={node} />);
-  const custom = children !== undefined || node.children !== undefined || node.condition;
-  // Previewed: a connector end snapped here, or the user is hovering it in "Connect to…".
-  const previewed = snapTarget === node.id || previewNode === node.id;
-  const dimmed = previewNode !== null && !previewed;
-  const toggle = () => {
-    if (wasDragged()) return;
-    updateSelected(active ? null : node.id);
-  };
-  const commitRename = () => {
-    const next = draft?.trim();
-    setDraft(null);
-    if (next && next !== label) renameNode(node.id, next);
-  };
-  const cardClass = cn(
-    "w-full rounded-[18px] bg-surface text-left outline-none transition-[box-shadow,opacity] duration-150",
-    active ? "shadow-[0_0_0_1.5px_var(--accent-default),0_2px_10px_rgba(0,0,0,0.045)]" : "shadow-card hover:shadow-raised",
-    previewed && "shadow-[0_0_0_2px_var(--accent-default),0_2px_10px_rgba(0,0,0,0.045)]",
-  );
-  const card = custom ? (
-    <div
-      role="button"
-      tabIndex={0}
-      aria-pressed={active}
-      onClick={(event) => {
-        if ((event.target as Element).closest("[data-ui]")) return;
-        toggle();
-      }}
-      className={cn(cardClass, "focus-visible:shadow-[0_0_0_1.5px_var(--accent-default)]")}
-    >
-      {body}
-    </div>
-  ) : (
-    <button type="button" onClick={toggle} aria-pressed={active} className={cn(cardClass, "cursor-pointer focus-visible:shadow-[0_0_0_1.5px_var(--accent-default)]")}>
-      {body}
-    </button>
-  );
-  const others = steps.filter((n) => n.id !== node.id);
-
-  return (
-    <div
-      ref={onRef}
-      data-node={node.id}
-      data-preview={previewed || undefined}
-      onPointerDown={onPointerDown(node)}
-      onPointerMove={onPointerMove(node)}
-      onPointerUp={onPointerUp(node)}
-      onKeyDown={(event) => {
-        if (readOnly || !active || (event.key !== "Delete" && event.key !== "Backspace")) return;
-        if ((event.target as Element).closest("[data-ui]")) return;
-        event.preventDefault();
-        removeNode(node.id);
-      }}
-      className={cn(
-        "group absolute flex -translate-x-1/2 touch-none flex-col items-start gap-1.5 transition-opacity duration-150",
-        previewed && "opacity-70",
-        dimmed && "opacity-40",
-      )}
-      style={{ left: cx, top, width: w, zIndex: drag.current?.id === node.id ? 2 : 1 }}
-    >
-      {node.kind || node.condition ? (
-        draft !== null ? (
-          <input
-            data-ui
-            aria-label="Node name"
-            autoFocus
-            className="h-6 w-32 rounded-[6px] border border-accent-default bg-surface px-2 text-[11.5px] font-medium text-ink outline-none"
-            onBlur={commitRename}
-            onChange={(event) => setDraft(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") commitRename();
-              if (event.key === "Escape") setDraft(null);
-            }}
-            value={draft}
-          />
-        ) : (
-          <span
-            data-ui
-            data-slot="node-pill"
-            title={canRename && !readOnly ? "Double-click to rename" : undefined}
-            onDoubleClick={() => {
-              if (canRename && !readOnly) setDraft(label);
-            }}
-            className={cn("inline-flex h-6 items-center rounded-[6px] px-2 text-[11.5px] font-medium", canRename && !readOnly && "cursor-text")}
-            style={{
-              background: mix(node.kind?.hue ?? "var(--accent-default)", 14, "var(--page)"),
-              color: mix(node.kind?.hue ?? "var(--accent-default)", 80, "var(--ink)"),
-            }}
-          >
-            {label}
-          </span>
-        )
-      ) : null}
-      {readOnly ? (
-        <div className="relative w-full">{card}</div>
-      ) : (
-        <ContextMenu onOpenChange={(open) => { if (!open) setPreviewNode(null); }}>
-          <ContextMenuTrigger className="relative w-full">{card}</ContextMenuTrigger>
-          <ContextMenuPopup className="w-52">
-            <ContextMenuSub>
-              <ContextMenuSubTrigger disabled={!canConnect || others.length === 0}>
-                <Link2 /> Connect to…
-              </ContextMenuSubTrigger>
-              <ContextMenuSubPopup className="w-48">
-                {others.map((other, i) => (
-                  <ContextMenuItem
-                    key={other.id}
-                    onClick={() => connectTo(node.id, other.id)}
-                    onMouseEnter={() => setPreviewNode(other.id)}
-                    onMouseLeave={() => setPreviewNode(null)}
-                  >
-                    {other.title ?? nodeLabel(other, steps.indexOf(other) >= 0 ? steps.indexOf(other) : i)}
-                  </ContextMenuItem>
-                ))}
-              </ContextMenuSubPopup>
-            </ContextMenuSub>
-            <ContextMenuItem disabled={!onAdd} onClick={() => onAdd?.(node.id, "bottom")}>
-              <Plus /> Add child
-            </ContextMenuItem>
-            <ContextMenuItem disabled>
-              <Sparkles /> Ask Exegia…
-            </ContextMenuItem>
-            <ContextMenuSeparator />
-            <ContextMenuItem disabled={!canDuplicate} onClick={() => duplicateNode(node.id)}>
-              <Copy /> Duplicate
-            </ContextMenuItem>
-            <ContextMenuItem variant="destructive" onClick={() => removeNode(node.id)}>
-              <Trash2 /> Delete
-            </ContextMenuItem>
-          </ContextMenuPopup>
-        </ContextMenu>
-      )}
-    </div>
-  );
-}

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

@@ -1,32 +0,0 @@
-import type { IConnectorProps } from "./types"
-
-export function Connector({ edge, isLit, selected, onPick, strokeWidth, ...props }: IConnectorProps) {
-  const width = strokeWidth ?? edge.strokeWidth ?? 1.25
-  const stroke = isLit ? "var(--accent-default)" : (edge.color ?? "var(--line-strong)")
-  return (
-    <g data-selected={selected || undefined}>
-      <path
-        data-edge={edge.id}
-        fill="none"
-        stroke={stroke}
-        strokeWidth={selected ? width + 0.75 : width}
-        className="transition-[stroke,stroke-width] duration-150"
-        {...props}
-      />
-      {onPick ? (
-        // Wide invisible twin so a 1px line is clickable.
-        <path
-          d={props.d}
-          fill="none"
-          stroke="transparent"
-          strokeWidth={14}
-          className="pointer-events-auto cursor-pointer"
-          onClick={(event) => {
-            event.stopPropagation()
-            onPick(edge.id)
-          }}
-        />
-      ) : null}
-    </g>
-  )
-}

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

@@ -1,26 +0,0 @@
-/* ── layout constants ── */
-export const PAD_Y = 24;
-export const ROW_GAP = 64;
-export const PILL_OFFSET = 30; // kind pill + gap above a card
-/* a dragged connector end snaps to an anchor inside this radius (canvas px) */
-export const SNAP_RADIUS = 40;
-
-export const PURPLE = "#9a5cff";
-export const AMBER = "#f09a2f";
-
-/* estimated heights for the first paint; measured immediately after */
-export const EST_H: Record<string, number> = { trigger: 92, cond: 134 };
-
-export const PROPERTIES = ["flavor", "topping", "size", "scoops"];
-export const FLAVORS = [
-  { name: "Rocky Road", tag: "Classic" },
-  { name: "Mint Chip", tag: "Classic" },
-  { name: "Pistachio", tag: "Seasonal" },
-  { name: "Bubblegum", tag: "Retro" },
-];
-export const TOPPINGS = [
-  { name: "Brown butter bourbon brittle crunch" },
-  { name: "Rainbow sprinkles" },
-  { name: "Hot fudge" },
-  { name: "Candied pecans" },
-];

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

@@ -1,230 +0,0 @@
-"use client"
-
-import { useEffect, useLayoutEffect, useRef, useState } from "react"
-import { Minus, Plus } from "lucide-react"
-import type { IFlowchartProps, TStepNode } from "./types"
-import { FlowchartContext, useFlowchart } from "./hooks"
-import { AMBER, PURPLE } from "./constant"
-import { Connector } from "./connector"
-import { ChartNode } from "./chart-node"
-import { EdgeToolbar } from "./edge-toolbar"
-import { midpoint } from "./utils"
-import { IconButton } from "@/components/ui/chat"
-import { Button } from "@/components/ui/button"
-import {
-  AlertDialog,
-  AlertDialogClose,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogPopup,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { cn } from "@/lib/utils"
-
-const NODES: TStepNode[] = [
-  {
-    id: "trigger",
-    row: 0,
-    x: 0.5,
-    w: 300,
-    kind: { label: "Trigger", hue: PURPLE },
-    hue: PURPLE,
-    title: "Iliad corpus loaded",
-    caption: "Homer · Greek epic corpus",
-  },
-  {
-    id: "cond",
-    row: 1,
-    x: 0.5,
-    w: 356,
-    kind: { label: "Text node", hue: AMBER },
-    hue: AMBER,
-    title: "μῆνιν ἄειδε, θεά",
-    caption: "Iliad 1.1 · 18 characters",
-  },
-]
-
-/**
- * Dot-grid canvas of draggable, selectable step cards joined by bezier connectors.
- *
- * @sketch "Component / Flowchart"
- */
-export default function Flowchart({ steps = NODES, edges, readOnly, zoomable, height, onDrag, onAdd, onRemove, onEdgeRemove, onEdgeConnect, onEdgeChange, onRename, onDuplicate, className, children }: IFlowchartProps) {
-  const canvasRef = useRef<HTMLDivElement>(null)
-  const nodeRefs = useRef(new Map<string, HTMLElement>())
-  const chart = useFlowchart({ steps, edges, readOnly, zoomable, onDrag, onAdd, onRemove, onEdgeRemove, onEdgeConnect, onEdgeChange, onRename, onDuplicate, canvasRef })
-  const {
-    updateHeights, updateFrame, canvasHeight, worldHeight, isLit, bezierCurve, connectorWidth, scale, view, zoomBy, resetZoom, pendingRemove, commitRemove, cancelRemove,
-    onCanvasPointerDown, onCanvasPointerMove, onCanvasPointerUp, isPanning,
-    editableEdges, selectedEdge, selectEdge, edgeDrag, edgeEnds, onEdgeHandleDown, onEdgeHandleMove, onEdgeHandleUp, ghostCurve, removeEdge,
-  } = chart
-  // The canvas fills its parent; its floor is the content height it loaded with
-  // (or `height`), so zooming out or removing a card never collapses it.
-  const [floor, setFloor] = useState<number | null>(null)
-  if (floor === null && chart.frame.w > 0) setFloor(canvasHeight)
-  const minHeight = height ?? floor ?? canvasHeight
-  const selectedEdgeObj = chart.edges.find((e) => e.id === selectedEdge)
-  const selectedEnds = selectedEdgeObj ? edgeEnds(selectedEdgeObj) : null
-
-  useLayoutEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
-
-    const measure = () => {
-      updateFrame(canvas.clientWidth, canvas.clientHeight)
-      updateHeights((prev) => {
-        const next = { ...prev }
-        let changed = false
-        nodeRefs.current.forEach((el, id) => {
-          const h = el.offsetHeight
-          if (h && Math.abs(h - (next[id] ?? 0)) > 0.5) {
-            next[id] = h
-            changed = true
-          }
-        })
-        return changed ? next : prev
-      })
-    }
-
-    measure()
-    if (typeof ResizeObserver === "undefined") return
-    const observer = new ResizeObserver(measure)
-    observer.observe(canvas)
-    nodeRefs.current.forEach((el) => observer.observe(el))
-    return () => observer.disconnect()
-  }, [updateHeights, updateFrame, steps])
-
-  // React's onWheel is passive, so preventDefault (no page scroll while zooming) needs a native listener.
-  useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas || !zoomable) return
-    const onWheel = (event: WheelEvent) => {
-      if (!event.ctrlKey && !event.metaKey) return
-      event.preventDefault()
-      zoomBy(event.deltaY < 0 ? 1.1 : 1 / 1.1)
-    }
-    canvas.addEventListener("wheel", onWheel, { passive: false })
-    return () => canvas.removeEventListener("wheel", onWheel)
-  }, [zoomable, zoomBy])
-
-  return (
-    <FlowchartContext.Provider value={chart}>
-      <div
-        ref={canvasRef}
-        data-slot="flowchart"
-        data-readonly={readOnly || undefined}
-        className={cn(
-          "rounded-card bg-page shadow-hairline relative h-full w-full touch-none overflow-hidden select-none",
-          "transition-[background-size,background-position] duration-300 ease-[var(--ease-out-strong)] motion-reduce:transition-none",
-          isPanning() ? "cursor-grabbing" : "cursor-grab",
-          className,
-        )}
-        onPointerDown={onCanvasPointerDown}
-        onPointerMove={onCanvasPointerMove}
-        onPointerUp={onCanvasPointerUp}
-        onPointerCancel={onCanvasPointerUp}
-        style={{
-          minHeight,
-          backgroundImage: "radial-gradient(var(--line-strong) 1px, transparent 1.25px)",
-          backgroundSize: `${22 * scale}px ${22 * scale}px`,
-          backgroundPosition: `${view.x}px ${view.y}px`,
-        }}
-      >
-        {children}
-        <div
-          data-slot="flowchart-world"
-          className={cn("absolute top-0 left-0 origin-top-left", !isPanning() && "transition-transform duration-300 ease-[var(--ease-out-strong)] motion-reduce:transition-none")}
-          style={{ width: connectorWidth, height: worldHeight, transform: `translate(${view.x}px, ${view.y}px) scale(${scale})` }}
-        >
-          <svg width={connectorWidth} height={worldHeight} className="pointer-events-none absolute inset-0 overflow-visible">
-            {chart.edges.map((edge) => (
-              <Connector
-                key={edge.id}
-                edge={edge}
-                isLit={isLit(edge)}
-                selected={selectedEdge === edge.id}
-                onPick={editableEdges ? selectEdge : undefined}
-                d={bezierCurve(edge)}
-              />
-            ))}
-          </svg>
-          {selectedEdgeObj && selectedEnds ? (
-            <EdgeToolbar
-              edge={selectedEdgeObj}
-              at={midpoint(selectedEnds.from, selectedEnds.to)}
-              onChange={onEdgeChange}
-              onRemove={onEdgeRemove ? removeEdge : undefined}
-            />
-          ) : null}
-          {steps.map((node, index) => (
-            <ChartNode
-              key={node.id}
-              index={index}
-              node={node}
-              onRef={(el) => {
-                if (el) nodeRefs.current.set(node.id, el)
-                else nodeRefs.current.delete(node.id)
-              }}
-            />
-          ))}
-          {/* Above the cards, so the grab handles are reachable at a card's edge. */}
-          <svg width={connectorWidth} height={worldHeight} className="pointer-events-none absolute inset-0 z-10 overflow-visible">
-            {edgeDrag ? (
-              <path data-edge-ghost fill="none" stroke="var(--accent-default)" strokeWidth={1.5} strokeDasharray="4 3" d={ghostCurve()} />
-            ) : null}
-            {selectedEdgeObj && selectedEnds && onEdgeConnect
-              ? (["source", "target"] as const).map((end) => {
-                  const p = end === "source" ? selectedEnds.from : selectedEnds.to
-                  return (
-                    <g key={end}>
-                      <circle cx={p.x} cy={p.y} r={5} fill="var(--surface)" stroke="var(--accent-default)" strokeWidth={1.5} />
-                      {/* Generous invisible grab target over the 5px dot. */}
-                      <circle
-                        data-edge-handle={end}
-                        cx={p.x}
-                        cy={p.y}
-                        r={12}
-                        fill="transparent"
-                        className="pointer-events-auto cursor-grab touch-none active:cursor-grabbing"
-                        onPointerDown={onEdgeHandleDown(selectedEdgeObj, end)}
-                        onPointerMove={onEdgeHandleMove}
-                        onPointerUp={onEdgeHandleUp}
-                      />
-                    </g>
-                  )
-                })
-              : null}
-          </svg>
-        </div>
-        {zoomable ? (
-          <div data-ui className="absolute right-2 bottom-2 flex items-center gap-0.5 rounded-md bg-surface p-0.5 shadow-btn">
-            <IconButton aria-label="Zoom out" onClick={() => zoomBy(1 / 1.25)}><Minus /></IconButton>
-            <button type="button" onClick={resetZoom} className="min-w-10 text-center text-[11px] tabular-nums text-ink-2">
-              {Math.round(scale * 100)}%
-            </button>
-            <IconButton aria-label="Zoom in" onClick={() => zoomBy(1.25)}><Plus /></IconButton>
-          </div>
-        ) : null}
-      </div>
-      <AlertDialog open={pendingRemove !== null} onOpenChange={(open) => { if (!open) cancelRemove() }}>
-        <AlertDialogPopup>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete this node?</AlertDialogTitle>
-            <AlertDialogDescription>
-              {pendingRemove?.orphans.length === 1
-                ? "One child node has no other parent and will be left orphaned."
-                : `${pendingRemove?.orphans.length ?? 0} child nodes have no other parent and will be left orphaned.`}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogClose render={<Button variant="ghost" />}>Cancel</AlertDialogClose>
-            <Button variant="destructive" onClick={() => pendingRemove && commitRemove(pendingRemove.id)}>
-              Delete anyway
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogPopup>
-      </AlertDialog>
-    </FlowchartContext.Provider>
-  )
-}

package/src/components/composed/chat/flowchart/edge-toolbar.tsx

@@ -1,73 +0,0 @@
-import { Unlink } from "lucide-react"
-import { IconButton } from "@/components/ui/chat"
-import { cn } from "@/lib/utils"
-import type { TEdge } from "./types"
-import type { TPoint } from "./utils"
-
-const WIDTHS = [1.25, 2, 3]
-const COLORS = ["var(--line-strong)", "var(--tag-purple-text)", "var(--tag-amber-text)", "var(--tag-blue-text)", "var(--tag-green-text)"]
-
-/** Floats at a selected connector's midpoint: stroke widths, colours, disconnect. */
-export function EdgeToolbar({
-  edge,
-  at,
-  onChange,
-  onRemove,
-}: {
-  edge: TEdge
-  at: TPoint
-  onChange?: (id: string, patch: Pick<TEdge, "strokeWidth" | "color">) => void
-  onRemove?: (id: string) => void
-}) {
-  const width = edge.strokeWidth ?? 1.25
-  const color = edge.color ?? COLORS[0]
-  return (
-    <div
-      data-ui
-      data-slot="edge-toolbar"
-      role="toolbar"
-      aria-label="Connector"
-      onClick={(event) => event.stopPropagation()}
-      className="absolute z-20 flex -translate-x-1/2 -translate-y-1/2 items-center gap-1 rounded-md bg-surface p-1 shadow-btn"
-      style={{ left: at.x, top: at.y }}
-    >
-      {onChange
-        ? WIDTHS.map((w) => (
-            <button
-              key={w}
-              type="button"
-              aria-label={`Stroke ${w}`}
-              aria-pressed={width === w}
-              onClick={() => onChange(edge.id, { strokeWidth: w })}
-              className={cn("flex size-6 items-center justify-center rounded-sm hover:bg-hover-2", width === w && "bg-hover-2")}
-            >
-              <span className="w-3.5 rounded-full bg-ink" style={{ height: w }} />
-            </button>
-          ))
-        : null}
-      {onChange ? <span aria-hidden className="mx-0.5 h-4 w-px bg-line" /> : null}
-      {onChange
-        ? COLORS.map((c) => (
-            <button
-              key={c}
-              type="button"
-              aria-label={`Colour ${c}`}
-              aria-pressed={color === c}
-              onClick={() => onChange(edge.id, { color: c })}
-              className={cn("flex size-6 items-center justify-center rounded-sm hover:bg-hover-2", color === c && "bg-hover-2")}
-            >
-              <span className="size-3 rounded-full" style={{ background: c }} />
-            </button>
-          ))
-        : null}
-      {onRemove ? (
-        <>
-          {onChange ? <span aria-hidden className="mx-0.5 h-4 w-px bg-line" /> : null}
-          <IconButton aria-label="Disconnect" onClick={() => onRemove(edge.id)}>
-            <Unlink />
-          </IconButton>
-        </>
-      ) : null}
-    </div>
-  )
-}