@lemonriver/core 0.1.0 → 0.2.0

package/src/app/components/board/board-canvas.tsx

@@ -2,33 +2,44 @@ import {
   applyNodeChanges,
   Background,
   BackgroundVariant,
+  BaseEdge,
   type Edge,
+  EdgeLabelRenderer,
+  type EdgeProps,
+  type EdgeTypes,
+  type InternalNode,
   MarkerType,
   MiniMap,
   type Node,
   type NodeChange,
   type NodeProps,
   type NodeTypes,
+  type OnConnectEnd,
   type OnNodeDrag,
   Panel,
   ReactFlow,
   ReactFlowProvider,
+  useInternalNode,
   useReactFlow,
 } from '@xyflow/react';
-import { Maximize2, Minus, Plus } from 'lucide-react';
+import { Link2, Link2Off, Maximize2, Minus, Plus, X } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { useLocale } from '@/lib/use-locale';
 import { cn, pad2 } from '@/lib/utils';
+import type { BoardCard, CardPatch } from '../../../files/board-cards';
 import { type BoardColumn, columnsAfterMove } from '../../../files/board-structure';
 import type { DesignSystem } from '../../lib/design';
 import type { Page } from '../../lib/sdk';
 import {
   type BoardLayout,
+  type Box,
   CARD_BOX_H,
   CARD_BOX_W,
+  cardAtPoint,
   identityOrder,
   layoutBoard,
+  linkCurve,
   orderAfterMove,
   slotAtPoint,
 } from './layout';
@@ -41,6 +52,11 @@ type Props = {
   pages: Page[];
   columns: BoardColumn[];
   notes?: (string | undefined)[];
+  cards: (BoardCard | undefined)[];
+  cardsReady: boolean;
+  /** Linked pages, as deck positions. */
+  links: [number, number][];
+  showLinks: boolean;
   design?: DesignSystem;
   onOpenPage: (index: number) => void;
   onMovePage: (from: number, to: number) => void;
@@ -49,6 +65,10 @@ type Props = {
   onDuplicate: (index: number) => void;
   onDelete: (index: number) => void;
   onMoveToEnd: (index: number) => void;
+  onPatchCard: (index: number, patch: CardPatch) => void;
+  onLink: (a: number, b: number) => void;
+  onUnlink: (a: number, b: number) => void;
+  onToggleLinks: () => void;
 };
 
 type ColumnLabelData = {
@@ -129,6 +149,52 @@ function DropSlot() {
 
 const nodeTypes: NodeTypes = { page: PageNode, columnLabel: ColumnLabel, dropSlot: DropSlot };
 
+type LinkEdgeData = { a: number; b: number; onUnlink: (a: number, b: number) => void };
+
+function boxOf(node: InternalNode | undefined): Box | null {
+  if (!node) return null;
+  const { x, y } = node.internals.positionAbsolute;
+  return {
+    x,
+    y,
+    width: node.measured.width ?? CARD_BOX_W,
+    height: node.measured.height ?? CARD_BOX_H,
+  };
+}
+
+/**
+ * A loose association between two pages. It is drawn thin and dashed so it can
+ * never be read as the deck's order, and it follows the cards as they move.
+ */
+function LinkEdge({ id, source, target, data }: EdgeProps) {
+  const t = useLocale();
+  const { a, b, onUnlink } = data as unknown as LinkEdgeData;
+  const from = boxOf(useInternalNode(source));
+  const to = boxOf(useInternalNode(target));
+  if (!from || !to) return null;
+  const curve = linkCurve(from, to);
+
+  return (
+    <>
+      <BaseEdge id={id} path={curve.path} className="osd-board-link" interactionWidth={14} />
+      <EdgeLabelRenderer>
+        <button
+          type="button"
+          aria-label={t.board.removeLink}
+          title={t.board.removeLink}
+          onClick={() => onUnlink(a, b)}
+          className="osd-board-link-remove nodrag nopan"
+          style={{ transform: `translate(-50%, -50%) translate(${curve.x}px, ${curve.y}px)` }}
+        >
+          <X className="size-3" strokeWidth={2.2} />
+        </button>
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+const edgeTypes: EdgeTypes = { link: LinkEdge };
+
 const edgeStyle = { stroke: 'var(--osd-board-line)', strokeWidth: 1.5 } as const;
 const marker = {
   type: MarkerType.ArrowClosed,
@@ -137,6 +203,12 @@ const marker = {
   color: 'var(--osd-board-line)',
 };
 
+const linkDraftStyle = {
+  stroke: 'var(--osd-board-link)',
+  strokeWidth: 1.5,
+  strokeDasharray: '5 4',
+} as const;
+
 const pageIndexOf = (id: string) => Number(id.replace('page-', ''));
 
 type BuildArgs = {
@@ -146,8 +218,10 @@ type BuildArgs = {
   slideId: string;
   pages: Page[];
   notes?: (string | undefined)[];
+  cards: (BoardCard | undefined)[];
+  cardsReady: boolean;
   design?: DesignSystem;
-  actions: Pick<PageNodeData, 'onDuplicate' | 'onDelete' | 'onMoveToEnd'>;
+  actions: Pick<PageNodeData, 'onDuplicate' | 'onDelete' | 'onMoveToEnd' | 'onPatchCard'>;
   columnActions: {
     onRename: (index: number, title: string) => void;
     onAddPage: (index: number) => void;
@@ -164,6 +238,8 @@ function buildNodes({
   slideId,
   pages,
   notes,
+  cards,
+  cardsReady,
   design,
   actions,
   columnActions,
@@ -199,7 +275,7 @@ function buildNodes({
     hidden: true,
     data: {},
   };
-  const cards: Node[] = layout.slots.map((slot) => {
+  const pageNodes: Node[] = layout.slots.map((slot) => {
     const pageIndex = order[slot.index] ?? slot.index;
     return {
       id: `page-${pageIndex}`,
@@ -211,6 +287,9 @@ function buildNodes({
         slideId,
         page: pages[pageIndex],
         note: notes?.[pageIndex],
+        card: cards[pageIndex],
+        cardsReady,
+        canLink: cardsReady && pages.length > 1,
         index: pageIndex,
         total: pages.length,
         design,
@@ -219,7 +298,7 @@ function buildNodes({
       } satisfies PageNodeData as unknown as Record<string, unknown>,
     };
   });
-  return [...labels, drop, ...cards];
+  return [...labels, drop, ...pageNodes];
 }
 
 function BoardFlow({
@@ -227,6 +306,10 @@ function BoardFlow({
   pages,
   columns,
   notes,
+  cards,
+  cardsReady,
+  links,
+  showLinks,
   design,
   onOpenPage,
   onMovePage,
@@ -235,15 +318,19 @@ function BoardFlow({
   onDuplicate,
   onDelete,
   onMoveToEnd,
+  onPatchCard,
+  onLink,
+  onUnlink,
+  onToggleLinks,
 }: Props) {
   const t = useLocale();
-  const { fitView, zoomIn, zoomOut } = useReactFlow();
+  const { fitView, zoomIn, zoomOut, screenToFlowPosition } = useReactFlow();
 
   const layout = useMemo(() => layoutBoard(columns), [columns]);
 
   const actions = useMemo(
-    () => ({ onDuplicate, onDelete, onMoveToEnd }),
-    [onDuplicate, onDelete, onMoveToEnd],
+    () => ({ onDuplicate, onDelete, onMoveToEnd, onPatchCard }),
+    [onDuplicate, onDelete, onMoveToEnd, onPatchCard],
   );
 
   const columnActions = useMemo(
@@ -259,11 +346,13 @@ function BoardFlow({
         slideId,
         pages,
         notes,
+        cards,
+        cardsReady,
         design,
         actions,
         columnActions,
       }),
-    [layout, slideId, pages, notes, design, actions, columnActions],
+    [layout, slideId, pages, notes, cards, cardsReady, design, actions, columnActions],
   );
 
   const [nodes, setNodes] = useState<Node[]>(baseNodes);
@@ -299,6 +388,8 @@ function BoardFlow({
         slideId,
         pages,
         notes,
+        cards,
+        cardsReady,
         design,
         actions,
         columnActions,
@@ -319,7 +410,7 @@ function BoardFlow({
         });
       });
     },
-    [layout, columns, slideId, pages, notes, design, actions, columnActions],
+    [layout, columns, slideId, pages, notes, cards, cardsReady, design, actions, columnActions],
   );
 
   const handleDragStop = useCallback<OnNodeDrag>(
@@ -358,7 +449,7 @@ function BoardFlow({
 
   const edges = useMemo<Edge[]>(() => {
     const byIndex = new Map(layout.slots.map((slot) => [slot.index, slot]));
-    return pages.slice(0, -1).map((_, i) => {
+    const mainLine: Edge[] = pages.slice(0, -1).map((_, i) => {
       const sameColumn = byIndex.get(i)?.column === byIndex.get(i + 1)?.column;
       return {
         id: `line-${i}`,
@@ -373,20 +464,50 @@ function BoardFlow({
         focusable: false,
       };
     });
-  }, [layout, pages]);
+    if (!showLinks) return mainLine;
+    const linkLines: Edge[] = links.map(([a, b]) => ({
+      id: `link-${Math.min(a, b)}-${Math.max(a, b)}`,
+      source: `page-${a}`,
+      target: `page-${b}`,
+      type: 'link',
+      data: { a, b, onUnlink } satisfies LinkEdgeData,
+      selectable: false,
+      focusable: false,
+    }));
+    return [...mainLine, ...linkLines];
+  }, [layout, pages, links, showLinks, onUnlink]);
+
+  // A link is drawn by dragging a card's dot onto another card. The whole card is
+  // the target rather than a handle on it, because a handle is too small to hit
+  // at the zoom a long deck is read at.
+  const handleConnectEnd = useCallback<OnConnectEnd>(
+    (event, state) => {
+      const from = state.fromNode;
+      if (from?.type !== 'page') return;
+      const point = 'changedTouches' in event ? event.changedTouches[0] : event;
+      if (!point) return;
+      const at = screenToFlowPosition({ x: point.clientX, y: point.clientY });
+      const target = cardAtPoint(layout, at.x, at.y);
+      const source = pageIndexOf(from.id);
+      if (target !== null && target !== source) onLink(source, target);
+    },
+    [layout, screenToFlowPosition, onLink],
+  );
 
   return (
     <ReactFlow
       nodes={nodes}
       edges={edges}
       nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
       onNodesChange={onNodesChange}
       onNodeDrag={handleDrag}
       onNodeDragStop={handleDragStop}
       onNodeDoubleClick={(_, node) => {
         if (node.type === 'page') onOpenPage(pageIndexOf(node.id));
       }}
-      nodesConnectable={false}
+      onConnectEnd={handleConnectEnd}
+      connectionLineStyle={linkDraftStyle}
       edgesFocusable={false}
       onlyRenderVisibleElements
       onInit={frameStart}
@@ -425,6 +546,16 @@ function BoardFlow({
         <Button variant="outline" size="icon-sm" aria-label={t.board.fitView} onClick={fitAll}>
           <Maximize2 />
         </Button>
+        <Button
+          variant="outline"
+          size="icon-sm"
+          aria-label={showLinks ? t.board.hideLinks : t.board.showLinks}
+          aria-pressed={showLinks}
+          title={showLinks ? t.board.hideLinks : t.board.showLinks}
+          onClick={onToggleLinks}
+        >
+          {showLinks ? <Link2 /> : <Link2Off />}
+        </Button>
       </Panel>
     </ReactFlow>
   );

package/src/app/components/board/board.css

@@ -4,6 +4,7 @@
   --osd-board-line: color-mix(in oklab, var(--color-muted-foreground) 45%, transparent);
   --osd-board-mask: color-mix(in oklab, var(--color-background) 82%, transparent);
   --osd-board-minimap-node: color-mix(in oklab, var(--color-foreground) 28%, transparent);
+  --osd-board-link: color-mix(in oklab, var(--color-brand) 55%, transparent);
   background: var(--color-background);
 }
 
@@ -73,3 +74,53 @@
 .osd-board .react-flow__attribution a {
   color: color-mix(in oklab, var(--color-muted-foreground) 60%, transparent);
 }
+
+/* Links are loose associations, so they stay thin, dashed and quiet next to the
+   solid main line that carries the deck's order. */
+.osd-board .osd-board-link {
+  stroke: var(--osd-board-link);
+  stroke-width: 1.25;
+  stroke-dasharray: 5 4;
+}
+
+.osd-board-link-remove {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  border: 1px solid var(--color-border);
+  background: var(--color-card);
+  color: var(--color-muted-foreground);
+  pointer-events: all;
+  opacity: 0.7;
+  transition:
+    opacity 120ms ease,
+    color 120ms ease;
+}
+
+.osd-board-link-remove:hover,
+.osd-board-link-remove:focus-visible {
+  opacity: 1;
+  color: var(--color-destructive);
+}
+
+/* The dot a link is dragged from. It only shows on the card under the pointer,
+   so a board at rest carries no extra chrome. */
+.osd-board .osd-board-link-handle {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  border: 2px solid var(--color-card);
+  background: var(--color-brand);
+  cursor: crosshair;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.osd-board .react-flow__node-page:hover .osd-board-link-handle,
+.osd-board .osd-board-link-handle.connectingfrom {
+  opacity: 1;
+}

package/src/app/components/board/layout.test.ts

@@ -1,6 +1,17 @@
 import { describe, expect, it } from 'vitest';
 import type { Page } from '../../lib/sdk';
-import { CARD_H, CARD_W, layoutBoard, orderAfterMove, seedColumns, slotAtPoint } from './layout';
+import {
+  CARD_BOX_H,
+  CARD_BOX_W,
+  CARD_H,
+  CARD_W,
+  cardAtPoint,
+  layoutBoard,
+  linkCurve,
+  orderAfterMove,
+  seedColumns,
+  slotAtPoint,
+} from './layout';
 
 /** Pages are identified by their component name, so the fixtures need real names. */
 function named(name: string): Page {
@@ -107,3 +118,44 @@ describe('orderAfterMove', () => {
     expect(orderAfterMove(5, 2, 2)).toEqual([0, 1, 2, 3, 4]);
   });
 });
+
+describe('cardAtPoint', () => {
+  const layout = layoutBoard([
+    { title: 'Cover', size: 2 },
+    { title: 'Chapter One', size: 2 },
+  ]);
+
+  it('finds the card under a point anywhere inside it', () => {
+    const slot = layout.slots[3];
+    expect(cardAtPoint(layout, slot.x + CARD_BOX_W - 1, slot.y + CARD_BOX_H - 1)).toBe(3);
+  });
+
+  it('reports empty canvas between cards as no card', () => {
+    const [a, b] = [layout.slots[0], layout.slots[1]];
+    expect(cardAtPoint(layout, a.x + 10, (a.y + CARD_BOX_H + b.y) / 2)).toBeNull();
+    expect(cardAtPoint(layout, a.x + CARD_BOX_W + 20, a.y + 10)).toBeNull();
+  });
+});
+
+describe('linkCurve', () => {
+  const box = (x: number, y: number) => ({ x, y, width: 100, height: 60 });
+
+  it('bows a link between cards in one column out to the right of the column', () => {
+    const curve = linkCurve(box(0, 0), box(0, 400));
+    expect(curve.x).toBeGreaterThan(100);
+    expect(curve.path.startsWith('M 100,18')).toBe(true);
+  });
+
+  it('never ends where the main line does, at the middle of a card side', () => {
+    const curve = linkCurve(box(0, 0), box(300, 0));
+    expect(curve.path).not.toContain(',30');
+  });
+
+  it('joins cards in different columns between their facing sides, whichever is first', () => {
+    const forward = linkCurve(box(0, 0), box(300, 200));
+    const backward = linkCurve(box(300, 200), box(0, 0));
+    expect(forward.path).toBe(backward.path);
+    expect(forward.path.startsWith('M 100,18')).toBe(true);
+    expect(forward.path.endsWith('300,218')).toBe(true);
+  });
+});

package/src/app/components/board/layout.ts

@@ -7,9 +7,11 @@ export const CARD_W = 480;
 export const CARD_H = (CARD_W * CANVAS_HEIGHT) / CANVAS_WIDTH;
 /** Height of the card's speaker-note strip. */
 export const NOTE_H = 52;
-/** Card box = preview plus the card's padding, number row and note strip. */
+/** Height of the card's work-memo strip. */
+export const MEMO_H = 40;
+/** Card box = preview plus the card's padding, title row, note strip and memo strip. */
 export const CARD_BOX_W = CARD_W + 12;
-export const CARD_BOX_H = CARD_H + 36 + NOTE_H;
+export const CARD_BOX_H = CARD_H + 60 + NOTE_H + MEMO_H;
 /** Gap between columns, and between cards inside a column. */
 const COL_GAP = 88;
 const ROW_GAP = 52;
@@ -122,6 +124,52 @@ export function slotAtPoint(layout: BoardLayout, x: number, y: number, dragged:
   return best;
 }
 
+/** Deck position of the card under a point, or null over empty canvas. */
+export function cardAtPoint(layout: BoardLayout, x: number, y: number): number | null {
+  for (const slot of layout.slots) {
+    if (x >= slot.x && x <= slot.x + CARD_BOX_W && y >= slot.y && y <= slot.y + CARD_BOX_H) {
+      return slot.index;
+    }
+  }
+  return null;
+}
+
+export type Box = { x: number; y: number; width: number; height: number };
+
+const LINK_ANCHOR = 0.3;
+
+/**
+ * A link's curve and the point its remove button sits on. Cards in one column
+ * are joined by an arc bowing into the gap on their right, which the main line
+ * never uses; cards in different columns by a curve between their facing sides.
+ */
+export function linkCurve(a: Box, b: Box): { path: string; x: number; y: number } {
+  // The main line enters and leaves a card at its vertical middle; links attach
+  // higher up so the two never share an end.
+  const ay = a.y + a.height * LINK_ANCHOR;
+  const by = b.y + b.height * LINK_ANCHOR;
+  if (Math.abs(a.x - b.x) < a.width / 2) {
+    const sx = a.x + a.width;
+    const tx = b.x + b.width;
+    // Stays inside the gap between columns, so the arc never slips behind the next column.
+    const bow = 56 + Math.min(Math.abs(by - ay) / 8, 36);
+    return {
+      path: `M ${sx},${ay} C ${sx + bow},${ay} ${tx + bow},${by} ${tx},${by}`,
+      x: (sx + tx) / 2 + 0.75 * bow,
+      y: (ay + by) / 2,
+    };
+  }
+  const [left, right, ly, ry] = a.x < b.x ? [a, b, ay, by] : [b, a, by, ay];
+  const sx = left.x + left.width;
+  const tx = right.x;
+  const reach = Math.max((tx - sx) / 2, 40);
+  return {
+    path: `M ${sx},${ly} C ${sx + reach},${ly} ${tx - reach},${ry} ${tx},${ry}`,
+    x: (sx + tx) / 2,
+    y: (ly + ry) / 2,
+  };
+}
+
 export const identityOrder = (total: number) => Array.from({ length: total }, (_, i) => i);
 
 /** The deck's order once the card at `from` lands on `to`, as original page indexes. */