@exegia/corpora-ui 0.28.0 → 1.0.0

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

@@ -0,0 +1,44 @@
+import { Button } from "@/components/ui/button"
+import type { ButtonProps } from "@/components/ui/button"
+import type { IComposerSubmitButtonProps } from "../type"
+import { ArrowUp, Squircle } from "lucide"
+import { cn } from "@/lib/utils"
+import { MorphIcon } from "morphicons/react"
+
+export function SendButton({
+  isStreaming,
+  isExpanded,
+  disabled,
+  onStop,
+  ...props
+}: IComposerSubmitButtonProps & ButtonProps): React.ReactElement {
+  return (
+    <Button
+      {...props}
+      aria-hidden={!isExpanded}
+      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.
+      onClick={isStreaming ? onStop : undefined}
+      className={cn(
+        "shrink-0 justify-self-center",
+        !isExpanded && "pointer-events-none"
+      )}
+      // 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>
+  )
+}

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

@@ -0,0 +1,115 @@
+import { isValidElement, useId, useState } from "react"
+import type { SuggestedPromptsProps } from "../type"
+import { useReducedMotion, motion, AnimatePresence } from "motion/react"
+import { flattenChildren, ITEM_VARIANTS, LIST_VARIANTS } from "./utils"
+import { cn } from "@/lib/utils"
+import { EASE_IN_OUT, SPRING_PANEL } from "@/lib/ease"
+import { ChevronDown, Sparkles } from "lucide-react"
+
+/**
+ * The "Suggestions (n)" disclosure above the composer: a chevron that swings
+ * from left (folded) to down (open) and a panel of prompts that fans out
+ * beneath it, its bottom edge tucked behind the composer pill.
+ */
+export function SuggestedPrompts({
+  children,
+  count,
+  label = (n) => `Suggestions (${n})`,
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  className,
+  ...props
+}: SuggestedPromptsProps): React.ReactElement | null {
+  const panelId = useId()
+  const reduceMotion = useReducedMotion()
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
+  const open = openProp ?? internalOpen
+  const items = flattenChildren(children)
+
+  const setOpen = (next: boolean): void => {
+    if (openProp === undefined) setInternalOpen(next)
+    onOpenChange?.(next)
+  }
+
+  // Picking the last prompt empties `children`. Collapsing the whole block on
+  // height rather than returning null keeps the header from blinking out in a
+  // single frame while that last row is still flying to its bubble.
+  return (
+    <motion.div
+      animate={{
+        height: items.length ? "auto" : 0,
+        opacity: items.length ? 1 : 0,
+      }}
+      className={cn("mx-auto flex w-11/12 flex-col overflow-hidden", className)}
+      data-slot="suggested-prompts"
+      initial={false}
+      transition={
+        reduceMotion ? { duration: 0 } : { duration: 0.32, ease: EASE_IN_OUT }
+      }
+      {...props}
+    >
+      <motion.button
+        aria-controls={panelId}
+        aria-expanded={open}
+        className="mx-auto flex w-full cursor-pointer items-center gap-2 px-4 py-1 text-xs text-muted-foreground transition-colors duration-150 ease-smooth-out outline-none hover:text-foreground focus-visible:text-foreground"
+        data-slot="suggested-prompts-trigger"
+        onClick={() => setOpen(!open)}
+        type="button"
+        whileTap={reduceMotion ? undefined : { scale: 0.97 }}
+      >
+        <Sparkles aria-hidden="true" className="size-3.5 stroke-[1.5]" />
+        <span className="flex-1 text-left">{label(count ?? items.length)}</span>
+        <motion.span
+          animate={{ rotate: open ? 0 : 90 }}
+          className="inline-flex"
+          initial={false}
+          transition={reduceMotion ? { duration: 0 } : SPRING_PANEL}
+        >
+          <ChevronDown aria-hidden="true" className="size-4 stroke-2" />
+        </motion.span>
+      </motion.button>
+
+      <AnimatePresence initial={false}>
+        {open ? (
+          <motion.div
+            animate={{ height: "auto", opacity: 1 }}
+            // A plain height tween, deliberately not a `layout` projection —
+            // the composer shell below animates its own scale, and a second
+            // projection over the same box breaks its scale correction.
+            className="overflow-hidden"
+            exit={{ height: 0, opacity: 0 }}
+            id={panelId}
+            initial={{ height: 0, opacity: 0 }}
+            transition={
+              reduceMotion
+                ? { duration: 0 }
+                : { duration: 0.32, ease: EASE_IN_OUT }
+            }
+          >
+            <motion.div
+              animate="visible"
+              // The bottom padding is what the composer pill sits over, so the
+              // panel reads as tucked behind it rather than stacked on it.
+              className="mt-1 -mb-5 flex flex-col gap-0.5 rounded-md border-t border-t-border bg-secondary p-1.5 pb-6"
+              exit="hidden"
+              initial={reduceMotion ? false : "hidden"}
+              variants={LIST_VARIANTS}
+            >
+              {items.map((item, index) => (
+                <motion.div
+                  key={
+                    isValidElement(item) && item.key != null ? item.key : index
+                  }
+                  variants={reduceMotion ? undefined : ITEM_VARIANTS}
+                >
+                  {item}
+                </motion.div>
+              ))}
+            </motion.div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </motion.div>
+  )
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Per-instance attachment tray for `Composer`, keyed by composer id
+ * so an app can add or remove chips without holding the component.
+ */
+import { createKeyedFamilies } from "@/lib/keyed-atom"
+import type { ComposerAttachment } from "../type"
+import { Children, Fragment, isValidElement } from "react";
+import type { Variants } from "motion";
+import { EASE_IN_OUT, SPRING_PANEL } from "@/lib/ease";
+
+const { stateFamily, actionFamily, removeInstance } =
+  createKeyedFamilies("composer")
+
+const NO_ITEMS: ComposerAttachment[] = []
+
+export const composerAttachmentsAtom = stateFamily<ComposerAttachment[]>(
+  "attachments",
+  NO_ITEMS
+)
+
+export const addComposerAttachmentAtom = actionFamily(
+  "add",
+  (get, set, id, item: ComposerAttachment) => {
+    const items = get(composerAttachmentsAtom(id))
+    if (items.some((i) => i.id === item.id)) return
+    set(composerAttachmentsAtom(id), [...items, item])
+  }
+)
+
+export const removeComposerAttachmentAtom = actionFamily(
+  "remove",
+  (get, set, id, itemId: string) => {
+    set(
+      composerAttachmentsAtom(id),
+      get(composerAttachmentsAtom(id)).filter((i) => i.id !== itemId)
+    )
+  }
+)
+
+export const clearComposerAttachmentsAtom = actionFamily(
+  "clear",
+  (_get, set, id) => {
+    set(composerAttachmentsAtom(id), NO_ITEMS)
+  }
+)
+
+export const removeComposerInstance = removeInstance
+
+/** Children.toArray, but looking through fragments so `<>{a}{b}</>` counts two. */
+export function flattenChildren(children: React.ReactNode): React.ReactNode[] {
+  return Children.toArray(children).flatMap((child) =>
+    isValidElement<{ children?: React.ReactNode }>(child) && child.type === Fragment
+      ? flattenChildren(child.props.children)
+      : [child]
+  )
+}
+
+// The suggestions fan-out: the list holds the stagger, each item springs up
+// into place. Shared by `AiMessage`'s disclosure and `SuggestedPrompts`, so
+// both fan out with the same rhythm.
+export const LIST_VARIANTS: Variants = {
+  hidden: { transition: { staggerChildren: 0.04, staggerDirection: -1 } },
+  visible: { transition: { staggerChildren: 0.07, delayChildren: 0.05 } },
+}
+
+export const ITEM_VARIANTS: Variants = {
+  hidden: {
+    opacity: 0,
+    y: 14,
+    scale: 0.97,
+    transition: { duration: 0.18, ease: EASE_IN_OUT },
+  },
+  visible: { opacity: 1, y: 0, scale: 1, transition: SPRING_PANEL },
+}

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

@@ -0,0 +1,63 @@
+"use client"
+
+import { AlignLeft, ExternalLink, FileText } from "lucide-react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Card, CardPanel } from "@/components/ui/card"
+import { FileTypeBadge, Pill } from "@/components/ui/chat"
+
+export interface ContextCard {
+  id?: string
+  title: React.ReactNode
+  /** "290 characters" */
+  meta?: React.ReactNode
+  snippet: React.ReactNode
+  file?: { name: React.ReactNode; type: string }
+  icon?: React.ReactNode
+}
+
+export interface ContextCardsProps extends React.ComponentPropsWithoutRef<"div"> {
+  header?: React.ReactNode
+  cards: ContextCard[]
+  /** Count pill; defaults to `cards.length`. */
+  count?: React.ReactNode
+  onOpen?: (card: ContextCard, index: number) => void
+}
+
+/**
+ * Retrieved chunks: header with a count pill, then one card per chunk with
+ * title, character count, snippet and the source file pill.
+ *
+ * @sketch "Component / Context Cards"
+ */
+export function ContextCards({ header = "All chunks", cards, count, onOpen, className, ...props }: ContextCardsProps): 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">
+        <span className="text-[13px] font-semibold leading-4 text-text-primary">{header}</span>
+        <Pill>{count ?? cards.length}</Pill>
+      </div>
+      {cards.map((card, i) => (
+        <Card key={card.id ?? i}><CardPanel className="flex flex-col gap-2 p-3">
+          <div className="flex items-center gap-1.5">
+            <span className="text-icon [&_svg]:size-3">{card.icon ?? (i % 2 ? <AlignLeft /> : <FileText />)}</span>
+            <span className="flex-1 truncate text-[13px] font-semibold leading-4 text-text-primary">{card.title}</span>
+            {card.meta ? <span className="text-[11px] text-text-muted">{card.meta}</span> : null}
+          </div>
+          <p className="line-clamp-2 text-[12px] leading-[14px] text-text-secondary">{card.snippet}</p>
+          {card.file ? (
+            <button
+              type="button"
+              onClick={() => onOpen?.(card, i)}
+              className="inline-flex h-6 w-fit max-w-full items-center gap-1.5 rounded-md bg-surface-subtle pl-2 pr-2 text-[11.5px] font-medium text-text-primary outline-none hover:bg-black/8 focus-visible:ring-2 focus-visible:ring-ring dark:hover:bg-white/10 [&_svg]:size-2.5 [&_svg]:text-text-muted"
+            >
+              <FileTypeBadge className="min-w-0 px-1">{card.file.type}</FileTypeBadge>
+              <span className="truncate">{card.file.name}</span>
+              <ExternalLink />
+            </button>
+          ) : null}
+        </CardPanel></Card>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,119 @@
+"use client"
+
+import { useAtom } from "jotai"
+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"
+
+const { stateFamily, removeInstance } = createKeyedFamilies("filterTable")
+
+/** Active filter id, keyed by `tableId`; `null` means "All". */
+export const filterTableFilterAtom = stateFamily<string | null>("filter", null)
+export const removeFilterTableInstance = removeInstance
+
+export interface FilterTableStatus {
+  id: string
+  label: React.ReactNode
+  tone: DotTone
+}
+
+export interface FilterTableColumn<Row> {
+  key: keyof Row & string
+  header: React.ReactNode
+  className?: string
+}
+
+export interface FilterTableProps<Row extends { id: string; status: string }> extends React.ComponentPropsWithoutRef<"div"> {
+  tableId?: string
+  statuses: FilterTableStatus[]
+  columns: FilterTableColumn<Row>[]
+  /** Column key rendered with the status dot (defaults to "status"). */
+  statusKey?: keyof Row & string
+  rows: Row[]
+  allLabel?: React.ReactNode
+  filter?: string | null
+  onFilterChange?: (filter: string | null) => void
+}
+
+/**
+ * Status filter pills over a compact task table.
+ *
+ * @sketch "Component / Filter Table"
+ */
+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 {
+  const generatedId = React.useId()
+  const id = tableId ?? generatedId
+  const [stored, setStored] = useAtom(filterTableFilterAtom(id))
+  const current = filter === undefined ? stored : filter
+  const select = (next: string | null) => {
+    if (filter === undefined) setStored(next)
+    onFilterChange?.(next)
+  }
+  React.useEffect(() => {
+    if (tableId) return
+    return () => removeFilterTableInstance(id)
+  }, [tableId, id])
+
+  const visible = current ? rows.filter((r) => r.status === current) : rows
+  const byStatus = (s: string) => rows.filter((r) => r.status === s).length
+  const statusOf = (s: string) => statuses.find((x) => x.id === s)
+
+  const pill = (active: boolean) =>
+    cn(
+      "flex h-[26px] items-center gap-1.5 rounded-full px-2.5 text-[12.5px] leading-none outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+      active ? "bg-surface-subtle font-medium text-text-primary" : "text-text-secondary hover:text-text-primary"
+    )
+
+  return (
+    <div data-slot="filter-table" className={cn("flex w-[450px] max-w-full flex-col gap-2.5", className)} {...props}>
+      <div role="tablist" className="flex flex-wrap items-center gap-1">
+        <button type="button" role="tab" aria-selected={current === null} onClick={() => select(null)} className={pill(current === null)}>
+          {allLabel}
+          <span className="rounded-full bg-black/8 px-1.5 py-0.5 text-[10.5px] text-text-secondary dark:bg-white/10">{rows.length}</span>
+        </button>
+        {statuses.map((s) => (
+          <button key={s.id} type="button" role="tab" aria-selected={current === s.id} onClick={() => select(s.id)} className={pill(current === s.id)}>
+            <Dot tone={s.tone} size={6} />
+            {s.label}
+            <span className="text-[10.5px] text-text-muted">{byStatus(s.id)}</span>
+          </button>
+        ))}
+      </div>
+      <Card className="overflow-x-auto">
+        <table className="w-full border-collapse text-left">
+          <thead>
+            <tr className="border-b border-border-default">
+              {columns.map((c) => (
+                <th key={c.key} className={cn("px-3 py-2.5 text-[11px] font-medium leading-3 text-text-secondary", c.className)}>{c.header}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {visible.map((row) => (
+              <tr key={row.id} className="border-b border-border-default last:border-b-0">
+                {columns.map((c) => {
+                  const value = row[c.key] as React.ReactNode
+                  const status = c.key === statusKey ? statusOf(String(value)) : undefined
+                  return (
+                    <td key={c.key} className={cn("whitespace-nowrap px-3 py-2.5 text-[13px] leading-4 text-text-primary", c.className)}>
+                      {status ? (
+                        <span className="flex items-center gap-1.5 text-[12.5px] text-text-secondary"><Dot tone={status.tone} size={6} />{status.label}</span>
+                      ) : value}
+                    </td>
+                  )
+                })}
+              </tr>
+            ))}
+            {visible.length === 0 ? (
+              <tr><td colSpan={columns.length} className="px-3 py-4 text-center text-[12px] text-text-muted">No rows</td></tr>
+            ) : null}
+          </tbody>
+        </table>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,162 @@
+import { useState } from "react";
+import { Copy, Link2, Plus, Sparkles, Trash2 } from "lucide-react";
+import type { ChartNodeProps } 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 }: ChartNodeProps) {
+  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

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

@@ -0,0 +1,26 @@
+/* ── 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" },
+];