@exegia/corpora-ui 1.0.0 → 3.0.0

package/src/components/composed/chat/composer/command-menu.tsx

@@ -1,41 +1,46 @@
+import { useState } from "react"
 import type { IComposerMenuProps } from "../type"
 import { Popover, PopoverPopup, PopoverTrigger } from "@/components/ui/popover"
-import {
-  CommandItem,
-  CommandPanel,
-  CommandShortcut,
-} from "@/components/ui/command"
+import { MenuCommandList } from "@/components/ui/menu-command"
 import { AddButton } from "./add-button"
 
+/** Compatibility slot for apps that provide their own attachment commands. */
 export function CommandMenu({
   items = [],
   onCommand,
+  onAttach,
+  disabled,
 }: IComposerMenuProps): React.ReactElement {
+  const [open, setOpen] = useState(false)
   return (
-    <Popover>
+    <Popover open={open && !disabled} onOpenChange={setOpen}>
       <PopoverTrigger
+        disabled={disabled}
         render={(props, state) => <AddButton {...props} state={state} />}
       />
-      <PopoverPopup className="w-80">
-        <div className="mb-2">
-          <CommandPanel>
-            {items &&
-              items.map((item, index) => (
-                <CommandItem
-                  key={index}
-                  value={item.id}
-                  onClick={() => onCommand?.(item)}
-                >
-                  <div>
-                    {item.icon}
-                    {item.label}
-                  </div>
-                  <div>{item.description}</div>
-                  <CommandShortcut>{item.trailing}</CommandShortcut>
-                </CommandItem>
-              ))}
-          </CommandPanel>
-        </div>
+      <PopoverPopup
+        side="top"
+        align="start"
+        className="w-80 [&_[data-slot=popover-viewport]]:p-0"
+      >
+        <MenuCommandList
+          items={
+            onAttach
+              ? [
+                  {
+                    id: "attach",
+                    label: "Add photos & files",
+                    onSelect: onAttach,
+                  },
+                  ...items,
+                ]
+              : items
+          }
+          onSelect={(item) => {
+            onCommand?.(item)
+            setOpen(false)
+          }}
+        />
       </PopoverPopup>
     </Popover>
   )

package/src/components/composed/chat/composer/hooks.ts

@@ -1,7 +1,7 @@
 import { useAtomValue, useSetAtom } from "jotai"
 import { useCallback } from "react"
 
-import type { ComposerAttachment } from "../type"
+import type { TComposerAttachment } from "../type"
 import {
   addComposerAttachmentAtom,
   clearComposerAttachmentsAtom,
@@ -12,7 +12,7 @@ import {
 /** Read the tray of one composer. */
 export function useComposerAttachments(
   composerId: string
-): ComposerAttachment[] {
+): TComposerAttachment[] {
   return useAtomValue(composerAttachmentsAtom(composerId))
 }
 
@@ -22,7 +22,7 @@ export function useComposerAttachmentActions(composerId: string) {
   const remove = useSetAtom(removeComposerAttachmentAtom(composerId))
   const clear = useSetAtom(clearComposerAttachmentsAtom(composerId))
   return {
-    add: useCallback((item: ComposerAttachment) => add(item), [add]),
+    add: useCallback((item: TComposerAttachment) => add(item), [add]),
     remove: useCallback((itemId: string) => remove(itemId), [remove]),
     clear: useCallback(() => clear(), [clear]),
   }

package/src/components/composed/chat/composer/send-button.tsx

@@ -1,44 +1,36 @@
-import { Button } from "@/components/ui/button"
-import type { ButtonProps } from "@/components/ui/button"
-import type { IComposerSubmitButtonProps } from "../type"
-import { ArrowUp, Squircle } from "lucide"
+import { ArrowUp, Square } from "lucide-react"
 import { cn } from "@/lib/utils"
-import { MorphIcon } from "morphicons/react"
+import type { IComposerSubmitButtonProps } from "../type"
+import type * as React from "react"
 
 export function SendButton({
   isStreaming,
-  isExpanded,
+  isExpanded: _isExpanded,
   disabled,
   onStop,
+  className,
   ...props
-}: IComposerSubmitButtonProps & ButtonProps): React.ReactElement {
+}: IComposerSubmitButtonProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement {
   return (
-    <Button
+    <button
       {...props}
-      aria-hidden={!isExpanded}
+      type={isStreaming ? "button" : "submit"}
       aria-label={isStreaming ? "Stop" : "Send message"}
-      // Not streaming, the button is type="submit" and the form's onSubmit
-      // owns the send; the click handler only carries the stop.
+      data-cuelume-press=""
+      data-cuelume-release=""
+      disabled={disabled}
       onClick={isStreaming ? onStop : undefined}
       className={cn(
-        "shrink-0 justify-self-center",
-        !isExpanded && "pointer-events-none"
+        "size-7 flex shrink-0 items-center justify-center rounded-lg bg-foreground text-background transition-colors hover:opacity-90 focus-visible:outline-2 focus-visible:outline-ring disabled:bg-foreground/10 disabled:text-muted-foreground disabled:opacity-60",
+        className
       )}
-      // Empty-draft must NOT disable: the disabled:opacity-50! rule would
-      // pin Motion's inline opacity at 0.5 and break the fade. send() guards
-      // empty drafts, and the collapsed button is pointer-events-none.
-      disabled={disabled && !isStreaming}
-      size="icon-lg"
-      tabIndex={isExpanded ? 0 : -1}
-      type={isStreaming ? "button" : "submit"}
     >
-      <MorphIcon
-        className={cn(
-          "size-4 rounded-full",
-          isStreaming ? "animate-pulse fill-current" : "stroke-2"
-        )}
-        icon={isStreaming ? Squircle : ArrowUp}
-      />
-    </Button>
+      {isStreaming ? (
+        <Square aria-hidden className="size-3 fill-current" />
+      ) : (
+        <ArrowUp aria-hidden className="size-4 stroke-[2.4]" />
+      )}
+    </button>
   )
 }

package/src/components/composed/chat/composer/suggestions.tsx

@@ -1,5 +1,5 @@
 import { isValidElement, useId, useState } from "react"
-import type { SuggestedPromptsProps } from "../type"
+import type { ISuggestedPromptsProps } from "../type"
 import { useReducedMotion, motion, AnimatePresence } from "motion/react"
 import { flattenChildren, ITEM_VARIANTS, LIST_VARIANTS } from "./utils"
 import { cn } from "@/lib/utils"
@@ -20,7 +20,7 @@ export function SuggestedPrompts({
   onOpenChange,
   className,
   ...props
-}: SuggestedPromptsProps): React.ReactElement | null {
+}: ISuggestedPromptsProps): React.ReactElement | null {
   const panelId = useId()
   const reduceMotion = useReducedMotion()
   const [internalOpen, setInternalOpen] = useState(defaultOpen)

package/src/components/composed/chat/composer/use-dictation.ts

@@ -0,0 +1,123 @@
+"use client"
+
+import { useEffect, useRef, useState, useSyncExternalStore } from "react"
+
+type RecognitionResult = { isFinal: boolean; 0: { transcript: string } }
+interface Recognition {
+  continuous: boolean
+  interimResults: boolean
+  lang: string
+  onresult:
+    | ((event: {
+        resultIndex: number
+        results: ArrayLike<RecognitionResult>
+      }) => void)
+    | null
+  onerror: ((event: { error: string }) => void) | null
+  onend: (() => void) | null
+  start(): void
+  stop(): void
+  abort(): void
+}
+function recognitionConstructor() {
+  if (typeof window === "undefined") return undefined
+  const browser = window as unknown as {
+    SpeechRecognition?: new () => Recognition
+    webkitSpeechRecognition?: new () => Recognition
+  }
+  return browser.SpeechRecognition ?? browser.webkitSpeechRecognition
+}
+const subscribe = () => () => {}
+const getSupported = () => Boolean(recognitionConstructor())
+const getServerSupported = () => false
+
+/** Uses the browser's recognizer only after an explicit microphone click. */
+export function useDictation(
+  onTranscript: (text: string) => void,
+  disabled: boolean
+) {
+  const supported = useSyncExternalStore(
+    subscribe,
+    getSupported,
+    getServerSupported
+  )
+  const [listening, setListening] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const recognition = useRef<Recognition | null>(null)
+  const receive = useRef(onTranscript)
+  useEffect(() => {
+    receive.current = onTranscript
+  })
+  useEffect(() => {
+    return () => {
+      const current = recognition.current
+      if (current) {
+        current.onresult = null
+        current.onerror = null
+        current.onend = null
+        current.abort()
+      }
+    }
+  }, [])
+  useEffect(() => {
+    const current = recognition.current
+    if (disabled && current) {
+      current.onresult = null
+      current.abort()
+    }
+  }, [disabled])
+  const cancel = () => {
+    const current = recognition.current
+    if (!current) return
+    current.onresult = null
+    current.onerror = null
+    current.onend = null
+    recognition.current = null
+    current.abort()
+    setListening(false)
+  }
+  const toggle = () => {
+    if (disabled) return
+    if (recognition.current) {
+      recognition.current.stop()
+      return
+    }
+    const Constructor = recognitionConstructor()
+    if (!Constructor) return
+    const current = new Constructor()
+    current.continuous = true
+    current.interimResults = false
+    current.lang = document.documentElement.lang || navigator.language
+    current.onresult = (event) => {
+      const text = Array.from(event.results)
+        .slice(event.resultIndex)
+        .filter((result) => result.isFinal)
+        .map((result) => result[0].transcript)
+        .join(" ")
+      if (text) receive.current(text)
+    }
+    current.onerror = (event) => {
+      if (event.error !== "aborted")
+        setError(
+          event.error === "not-allowed"
+            ? "Microphone access was denied."
+            : "Dictation stopped. Please try again."
+        )
+    }
+    current.onend = () => {
+      recognition.current = null
+      setListening(false)
+    }
+    recognition.current = current
+    setError(null)
+    try {
+      current.start()
+      setListening(true)
+    } catch {
+      recognition.current = null
+      setListening(false)
+      setError("Dictation is unavailable. Please try again.")
+    }
+  }
+  return { supported, listening, error, toggle, cancel }
+}

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

@@ -3,7 +3,7 @@
  * so an app can add or remove chips without holding the component.
  */
 import { createKeyedFamilies } from "@/lib/keyed-atom"
-import type { ComposerAttachment } from "../type"
+import type { TComposerAttachment } from "../type"
 import { Children, Fragment, isValidElement } from "react";
 import type { Variants } from "motion";
 import { EASE_IN_OUT, SPRING_PANEL } from "@/lib/ease";
@@ -11,16 +11,16 @@ import { EASE_IN_OUT, SPRING_PANEL } from "@/lib/ease";
 const { stateFamily, actionFamily, removeInstance } =
   createKeyedFamilies("composer")
 
-const NO_ITEMS: ComposerAttachment[] = []
+const NO_ITEMS: TComposerAttachment[] = []
 
-export const composerAttachmentsAtom = stateFamily<ComposerAttachment[]>(
+export const composerAttachmentsAtom = stateFamily<TComposerAttachment[]>(
   "attachments",
   NO_ITEMS
 )
 
 export const addComposerAttachmentAtom = actionFamily(
   "add",
-  (get, set, id, item: ComposerAttachment) => {
+  (get, set, id, item: TComposerAttachment) => {
     const items = get(composerAttachmentsAtom(id))
     if (items.some((i) => i.id === item.id)) return
     set(composerAttachmentsAtom(id), [...items, item])

package/src/components/composed/chat/context-cards.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 import { Card, CardPanel } from "@/components/ui/card"
 import { FileTypeBadge, Pill } from "@/components/ui/chat"
 
-export interface ContextCard {
+export interface IContextCard {
   id?: string
   title: React.ReactNode
   /** "290 characters" */
@@ -16,12 +16,12 @@ export interface ContextCard {
   icon?: React.ReactNode
 }
 
-export interface ContextCardsProps extends React.ComponentPropsWithoutRef<"div"> {
+export interface IContextCardsProps extends React.ComponentPropsWithoutRef<"div"> {
   header?: React.ReactNode
-  cards: ContextCard[]
+  cards: IContextCard[]
   /** Count pill; defaults to `cards.length`. */
   count?: React.ReactNode
-  onOpen?: (card: ContextCard, index: number) => void
+  onOpen?: (card: IContextCard, index: number) => void
 }
 
 /**
@@ -30,7 +30,7 @@ export interface ContextCardsProps extends React.ComponentPropsWithoutRef<"div">
  *
  * @sketch "Component / Context Cards"
  */
-export function ContextCards({ header = "All chunks", cards, count, onOpen, className, ...props }: ContextCardsProps): React.ReactElement {
+export function ContextCards({ header = "All chunks", cards, count, onOpen, className, ...props }: IContextCardsProps): React.ReactElement {
   return (
     <div data-slot="context-cards" className={cn("flex w-[380px] max-w-full flex-col gap-2", className)} {...props}>
       <div className="flex items-center gap-2.5 px-0.5">

package/src/components/composed/chat/filter-table.tsx

@@ -5,7 +5,7 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 import { Card } from "@/components/ui/card"
 import { createKeyedFamilies } from "@/lib/keyed-atom"
-import { Dot, type DotTone } from "@/components/ui/chat"
+import { Dot, type TDotTone } from "@/components/ui/chat"
 
 const { stateFamily, removeInstance } = createKeyedFamilies("filterTable")
 
@@ -13,22 +13,22 @@ const { stateFamily, removeInstance } = createKeyedFamilies("filterTable")
 export const filterTableFilterAtom = stateFamily<string | null>("filter", null)
 export const removeFilterTableInstance = removeInstance
 
-export interface FilterTableStatus {
+export interface IFilterTableStatus {
   id: string
   label: React.ReactNode
-  tone: DotTone
+  tone: TDotTone
 }
 
-export interface FilterTableColumn<Row> {
+export interface IFilterTableColumn<Row> {
   key: keyof Row & string
   header: React.ReactNode
   className?: string
 }
 
-export interface FilterTableProps<Row extends { id: string; status: string }> extends React.ComponentPropsWithoutRef<"div"> {
+export interface IFilterTableProps<Row extends { id: string; status: string }> extends React.ComponentPropsWithoutRef<"div"> {
   tableId?: string
-  statuses: FilterTableStatus[]
-  columns: FilterTableColumn<Row>[]
+  statuses: IFilterTableStatus[]
+  columns: IFilterTableColumn<Row>[]
   /** Column key rendered with the status dot (defaults to "status"). */
   statusKey?: keyof Row & string
   rows: Row[]
@@ -44,7 +44,7 @@ export interface FilterTableProps<Row extends { id: string; status: string }> ex
  */
 export function FilterTable<Row extends { id: string; status: string }>({
   tableId, statuses, columns, statusKey = "status" as keyof Row & string, rows, allLabel = "All", filter, onFilterChange, className, ...props
-}: FilterTableProps<Row>): React.ReactElement {
+}: IFilterTableProps<Row>): React.ReactElement {
   const generatedId = React.useId()
   const id = tableId ?? generatedId
   const [stored, setStored] = useAtom(filterTableFilterAtom(id))

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

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Copy, Link2, Plus, Sparkles, Trash2 } from "lucide-react";
-import type { ChartNodeProps } from "./types";
+import type { IChartNodeProps } from "./types";
 import { ConditionBody, StepBody } from "./step-body";
 import { nodeLabel, useFlowchartContext } from "./hooks";
 import { mix } from "./utils";
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/context-menu";
 import { cn } from "@/lib/utils";
 
-export function ChartNode({ node, index = 0, onRef, children }: ChartNodeProps) {
+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,

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

@@ -1,6 +1,6 @@
-import type { ConnectorProps } from "./types"
+import type { IConnectorProps } from "./types"
 
-export function Connector({ edge, isLit, selected, onPick, strokeWidth, ...props }: ConnectorProps) {
+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 (

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

@@ -2,7 +2,7 @@
 
 import { useEffect, useLayoutEffect, useRef, useState } from "react"
 import { Minus, Plus } from "lucide-react"
-import type { FlowchartProps, StepNode } from "./types"
+import type { IFlowchartProps, TStepNode } from "./types"
 import { FlowchartContext, useFlowchart } from "./hooks"
 import { AMBER, PURPLE } from "./constant"
 import { Connector } from "./connector"
@@ -22,7 +22,7 @@ import {
 } from "@/components/ui/alert-dialog"
 import { cn } from "@/lib/utils"
 
-const NODES: StepNode[] = [
+const NODES: TStepNode[] = [
   {
     id: "trigger",
     row: 0,
@@ -50,7 +50,7 @@ const NODES: StepNode[] = [
  *
  * @sketch "Component / Flowchart"
  */
-export default function Flowchart({ steps = NODES, edges, readOnly, zoomable, height, onDrag, onAdd, onRemove, onEdgeRemove, onEdgeConnect, onEdgeChange, onRename, onDuplicate, className, children }: FlowchartProps) {
+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 })

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

@@ -1,8 +1,8 @@
 import { Unlink } from "lucide-react"
 import { IconButton } from "@/components/ui/chat"
 import { cn } from "@/lib/utils"
-import type { Edge } from "./types"
-import type { Point } from "./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)"]
@@ -14,9 +14,9 @@ export function EdgeToolbar({
   onChange,
   onRemove,
 }: {
-  edge: Edge
-  at: Point
-  onChange?: (id: string, patch: Pick<Edge, "strokeWidth" | "color">) => void
+  edge: TEdge
+  at: TPoint
+  onChange?: (id: string, patch: Pick<TEdge, "strokeWidth" | "color">) => void
   onRemove?: (id: string) => void
 }) {
   const width = edge.strokeWidth ?? 1.25

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

@@ -1,41 +1,41 @@
 import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
-import type { Edge, EdgeEnd, FlowchartProps, StepNode } from "./types";
-import { anchors, bezier, canvasH, curve, cw, edgePoints, place, rowH, rows, rowYs, type Heights, type Layout, type Offsets, type Point } from "./utils";
+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 Options = Pick<FlowchartProps, "edges" | "readOnly" | "zoomable" | "onDrag" | "onAdd" | "onRemove" | "onEdgeRemove" | "onEdgeConnect" | "onEdgeChange" | "onRename" | "onDuplicate"> & {
-  steps: StepNode[];
+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 EdgeDrag = { id: string; end: EdgeEnd; point: Point; snap?: string };
+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: StepNode, index: number) =>
+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: StepNode[]): Edge[] =>
+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 }: Options) => {
+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<Heights>(EST_H);
+  const [heights, setHeights] = useState<THeights>(EST_H);
   const [selected, setSelected] = useState<string | null>(null);
-  const [offsets, setOffsets] = useState<Offsets>({});
+  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<EdgeDrag | 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<{
@@ -51,7 +51,7 @@ export const useFlowchart = ({ steps, edges: edgesProp, readOnly = false, zoomab
   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<Layout>(() => {
+  const layout = useMemo<TLayout>(() => {
     const _rows = rows(steps);
     return { width, offsets, rows: _rows, rowY: rowYs(rowHeight), heights };
   }, [steps, width, offsets, rowHeight, heights]);
@@ -69,7 +69,7 @@ export const useFlowchart = ({ steps, edges: edgesProp, readOnly = false, zoomab
     [frame, connectorWidth, worldHeight],
   );
 
-  const updateHeights = useCallback((callback: (prev: Heights) => Heights) => setHeights(callback), []);
+  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
@@ -132,7 +132,7 @@ export const useFlowchart = ({ steps, edges: edgesProp, readOnly = false, zoomab
   };
   const isPanning = () => pan.current?.moved === true;
 
-  const onPointerDown = (node: StepNode) => (event: React.PointerEvent<HTMLDivElement>) => {
+  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;
@@ -145,15 +145,17 @@ export const useFlowchart = ({ steps, edges: edgesProp, readOnly = false, zoomab
       baseDy: off?.dy ?? 0,
       moved: false,
     };
-    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+    // 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: StepNode) => (event: React.PointerEvent<HTMLDivElement>) => {
+  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
@@ -166,7 +168,7 @@ export const useFlowchart = ({ steps, edges: edgesProp, readOnly = false, zoomab
     setOffsets((current) => ({ ...current, [node.id]: { dx: cx - baseCx, dy: top - baseTop } }));
   };
 
-  const onPointerUp = (node: StepNode) => () => {
+  const onPointerUp = (node: TStepNode) => () => {
     const d = drag.current;
     if (d?.id !== node.id) return;
     if (d.moved) {
@@ -177,23 +179,23 @@ export const useFlowchart = ({ steps, edges: edgesProp, readOnly = false, zoomab
   };
 
   const wasDragged = () => drag.current?.moved === true;
-  const isLit = (edge: Edge) => selected === edge.source || selected === edge.target || selectedEdge === edge.id;
+  const isLit = (edge: TEdge) => selected === edge.source || selected === edge.target || selectedEdge === edge.id;
 
   /** Client → unscaled canvas coordinates. */
-  const toCanvas = (clientX: number, clientY: number): Point => {
+  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: Edge) => edgePoints({ from: edge.source, to: edge.target }, steps, layout);
+  const edgeEnds = (edge: TEdge) => edgePoints({ from: edge.source, to: edge.target }, steps, layout);
 
-  const onEdgeHandleDown = (edge: Edge, end: EdgeEnd) => (event: React.PointerEvent<SVGElement>) => {
+  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: Edge, end: EdgeEnd, point: Point) => {
+  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) {
@@ -248,8 +250,8 @@ export const useFlowchart = ({ steps, edges: edgesProp, readOnly = false, zoomab
     setSelectedEdge(null);
     onEdgeRemove?.(id);
   };
-  const bezierCurve = (edge: Edge) => bezier({ from: edge.source, to: edge.target }, steps, layout);
-  const handlePlace = (node: StepNode) => place(node, layout);
+  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) =>
@@ -333,10 +335,10 @@ export const useFlowchart = ({ steps, edges: edgesProp, readOnly = false, zoomab
   };
 };
 
-export type FlowchartController = ReturnType<typeof useFlowchart>;
+export type TFlowchartController = ReturnType<typeof useFlowchart>;
 
 /** Root owns the one `useFlowchart` instance; nodes read it from here. */
-export const FlowchartContext = createContext<FlowchartController | null>(null);
+export const FlowchartContext = createContext<TFlowchartController | null>(null);
 
 export const useFlowchartContext = () => {
   const ctx = useContext(FlowchartContext);