@lemonriver/core 0.1.0 → 0.2.0

package/src/app/components/board/page-node.tsx

@@ -1,21 +1,33 @@
 import { Handle, type NodeProps, Position } from '@xyflow/react';
 import { Copy, MoveRight, Trash2 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
   ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
   ContextMenuTrigger,
 } from '@/components/ui/context-menu';
 import { format, useLocale } from '@/lib/use-locale';
 import { cn, pad2 } from '@/lib/utils';
+import {
+  type BoardCard,
+  CARD_STATUSES,
+  type CardPatch,
+  type CardStatus,
+  isCardStatus,
+} from '../../../files/board-cards';
 import type { DesignSystem } from '../../lib/design';
 import { useNotes } from '../../lib/inspector/use-notes';
 import { SlidePageProvider } from '../../lib/page-context';
 import { CANVAS_WIDTH, type Page } from '../../lib/sdk';
 import { SlideCanvas } from '../slide-canvas';
-import { CARD_H, CARD_W, NOTE_H } from './layout';
+import { CARD_H, CARD_W, MEMO_H, NOTE_H } from './layout';
 
 export type PageNodeData = {
   slideId: string;
@@ -23,15 +35,38 @@ export type PageNodeData = {
   index: number;
   total: number;
   note?: string;
+  card?: BoardCard;
+  /** False until the board's own data has loaded, so nothing can be written over it. */
+  cardsReady: boolean;
+  /** Whether a link can be drawn from this card right now. */
+  canLink: boolean;
   design?: DesignSystem;
   canDelete: boolean;
   onDuplicate: (index: number) => void;
   onDelete: (index: number) => void;
   onMoveToEnd: (index: number) => void;
+  onPatchCard: (index: number, patch: CardPatch) => void;
 };
 
 const hiddenHandle = { opacity: 0, width: 1, height: 1, minWidth: 1, minHeight: 1 } as const;
 
+const STATUS_STYLE: Record<CardStatus, { dot: string; ring: string }> = {
+  todo: { dot: 'bg-muted-foreground/50', ring: 'ring-muted-foreground/35' },
+  doing: { dot: 'bg-blue-500', ring: 'ring-blue-500/70' },
+  review: { dot: 'bg-amber-500', ring: 'ring-amber-500/75' },
+  done: { dot: 'bg-emerald-500', ring: 'ring-emerald-500/70' },
+};
+
+export function useStatusLabels(): Record<CardStatus, string> {
+  const t = useLocale();
+  return {
+    todo: t.board.statusTodo,
+    doing: t.board.statusDoing,
+    review: t.board.statusReview,
+    done: t.board.statusDone,
+  };
+}
+
 export function PageNode({ data, selected, dragging }: NodeProps) {
   const {
     slideId,
@@ -39,18 +74,31 @@ export function PageNode({ data, selected, dragging }: NodeProps) {
     index,
     total,
     note,
+    card,
+    cardsReady,
+    canLink,
     design,
     canDelete,
     ...actions
   } = data as unknown as PageNodeData;
   const t = useLocale();
+  const labels = useStatusLabels();
+  const status = card?.status;
+  const [renaming, setRenaming] = useState(false);
+  // A menu hands focus back to the card as it closes, which would pull the caret
+  // straight out of the name field "Rename" just opened.
+  const renameFromMenu = useRef(false);
 
-  const card = (
+  const view = (
     <div
       className={cn(
-        'osd-board-card group/card flex flex-col gap-2 rounded-[8px] bg-card p-1.5 ring-1',
+        'osd-board-card group/card flex flex-col gap-2 rounded-[8px] bg-card p-1.5',
         'motion-safe:transition-[box-shadow,ring-color,scale]',
-        selected ? 'ring-2 ring-brand' : 'ring-hairline hover:ring-muted-foreground/30',
+        selected
+          ? 'ring-2 ring-brand'
+          : status
+            ? cn('ring-2', STATUS_STYLE[status].ring)
+            : 'ring-1 ring-hairline hover:ring-muted-foreground/30',
         dragging ? 'cursor-grabbing' : 'cursor-grab',
       )}
       style={{ width: CARD_W + 12 }}
@@ -59,18 +107,32 @@ export function PageNode({ data, selected, dragging }: NodeProps) {
         className="relative overflow-hidden rounded-[4px] bg-white ring-1 ring-hairline"
         style={{ width: CARD_W, height: CARD_H }}
       >
-        <SlideCanvas scale={CARD_W / CANVAS_WIDTH} center={false} flat freezeMotion design={design}>
-          <SlidePageProvider index={index} total={total}>
-            <PageComp />
-          </SlidePageProvider>
-        </SlideCanvas>
+        <PagePreview page={PageComp} index={index} total={total} design={design} />
       </div>
-      <div className="flex h-4 items-center justify-between px-0.5">
+      <div className="flex h-6 items-center gap-2 px-0.5">
         <span className="font-mono text-[10.5px] tracking-[0.08em] tabular-nums text-muted-foreground/70">
           {pad2(index + 1)}
         </span>
+        <CardTitle
+          title={card?.title}
+          editing={renaming}
+          disabled={!cardsReady}
+          onEditingChange={setRenaming}
+          onCommit={(title) => actions.onPatchCard(index, { title })}
+        />
+        {status && (
+          <span className="ml-auto flex shrink-0 items-center gap-1.5 text-[11px] text-muted-foreground">
+            <span className={cn('size-2 rounded-full', STATUS_STYLE[status].dot)} />
+            {labels[status]}
+          </span>
+        )}
       </div>
       <NoteStrip slideId={slideId} index={index} initial={note} />
+      <MemoStrip
+        memo={card?.memo}
+        disabled={!cardsReady}
+        onCommit={(memo) => actions.onPatchCard(index, { memo })}
+      />
     </div>
   );
 
@@ -87,9 +149,47 @@ export function PageNode({ data, selected, dragging }: NodeProps) {
       <ContextMenu>
         <ContextMenuTrigger
           aria-label={format(t.thumbnailRail.pageActionsAria, { n: index + 1 })}
-          render={card}
+          render={view}
         />
-        <ContextMenuContent className="min-w-[180px]">
+        <ContextMenuContent
+          className="min-w-[180px]"
+          finalFocus={() => {
+            const keep = !renameFromMenu.current;
+            renameFromMenu.current = false;
+            return keep;
+          }}
+        >
+          <ContextMenuItem
+            disabled={!cardsReady}
+            onClick={() => {
+              renameFromMenu.current = true;
+              setRenaming(true);
+            }}
+          >
+            {t.board.renameCard}
+          </ContextMenuItem>
+          <ContextMenuSub>
+            <ContextMenuSubTrigger disabled={!cardsReady}>{t.board.status}</ContextMenuSubTrigger>
+            <ContextMenuSubContent className="min-w-[150px]">
+              <ContextMenuRadioGroup
+                value={status ?? ''}
+                onValueChange={(value: unknown) =>
+                  actions.onPatchCard(index, { status: isCardStatus(value) ? value : null })
+                }
+              >
+                <ContextMenuRadioItem value="" closeOnClick>
+                  {t.board.statusNone}
+                </ContextMenuRadioItem>
+                {CARD_STATUSES.map((value) => (
+                  <ContextMenuRadioItem key={value} value={value} closeOnClick>
+                    <span className={cn('size-2 rounded-full', STATUS_STYLE[value].dot)} />
+                    {labels[value]}
+                  </ContextMenuRadioItem>
+                ))}
+              </ContextMenuRadioGroup>
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+          <ContextMenuSeparator />
           <ContextMenuItem onClick={() => actions.onDuplicate(index)}>
             <Copy />
             {t.thumbnailRail.duplicatePage}
@@ -122,10 +222,112 @@ export function PageNode({ data, selected, dragging }: NodeProps) {
         style={hiddenHandle}
         isConnectable={false}
       />
+      <Handle
+        type="source"
+        id="link"
+        position={Position.Right}
+        title={t.board.linkHandle}
+        className={cn('osd-board-link-handle', !canLink && 'hidden')}
+        isConnectableStart={canLink}
+        isConnectableEnd={false}
+      />
     </>
   );
 }
 
+/**
+ * The live page, kept apart so editing a card's title, status or memo does not
+ * re-render a page that can carry thousands of elements.
+ */
+const PagePreview = memo(function PagePreview({
+  page: PageComp,
+  index,
+  total,
+  design,
+}: {
+  page: Page;
+  index: number;
+  total: number;
+  design?: DesignSystem;
+}) {
+  return (
+    <SlideCanvas scale={CARD_W / CANVAS_WIDTH} center={false} flat freezeMotion design={design}>
+      <SlidePageProvider index={index} total={total}>
+        <PageComp />
+      </SlidePageProvider>
+    </SlideCanvas>
+  );
+});
+
+/** The card's own name, which the deck never sees. Empty until someone names it. */
+function CardTitle({
+  title,
+  editing,
+  disabled,
+  onEditingChange,
+  onCommit,
+}: {
+  title?: string;
+  editing: boolean;
+  disabled: boolean;
+  onEditingChange: (editing: boolean) => void;
+  onCommit: (title: string) => void;
+}) {
+  const t = useLocale();
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  // Opened from the context menu, the field mounts while the menu is still
+  // handing focus back; waiting a frame keeps the caret here.
+  useEffect(() => {
+    if (!editing) return;
+    const frame = requestAnimationFrame(() => ref.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [editing]);
+
+  if (editing) {
+    return (
+      <input
+        ref={ref}
+        defaultValue={title ?? ''}
+        aria-label={t.board.renameCard}
+        placeholder={t.board.cardTitlePlaceholder}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+          if (e.key === 'Enter') e.currentTarget.blur();
+          if (e.key === 'Escape') {
+            e.currentTarget.value = title ?? '';
+            e.currentTarget.blur();
+          }
+        }}
+        onBlur={(e) => {
+          onEditingChange(false);
+          const next = e.currentTarget.value.trim();
+          if (next !== (title ?? '')) onCommit(next);
+        }}
+        className="nodrag nopan min-w-0 flex-1 rounded-[4px] bg-muted/60 px-1.5 py-0.5 text-[12.5px] font-medium text-foreground outline-none ring-1 ring-brand/40"
+      />
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={() => onEditingChange(true)}
+      aria-label={t.board.renameCard}
+      className={cn(
+        'nodrag nopan min-w-0 truncate rounded-[4px] px-1.5 py-0.5 text-left text-[12.5px]',
+        'motion-safe:transition-[background-color,opacity] hover:bg-muted/60 disabled:pointer-events-none',
+        title
+          ? 'font-medium text-foreground'
+          : 'text-muted-foreground/45 opacity-0 group-hover/card:opacity-100',
+      )}
+    >
+      {title || t.board.cardTitlePlaceholder}
+    </button>
+  );
+}
+
 /**
  * The deck's own speaker notes, edited on the card. Writes go through the same
  * debounced route the notes drawer uses, so the board and the editor never hold
@@ -202,3 +404,75 @@ function NoteStrip({
     </div>
   );
 }
+
+/**
+ * A memo for whoever is building the deck — "Q3 numbers still missing". It is
+ * board data, so it never reaches the deck, the presenter view or an export,
+ * and it is tinted so it cannot be mistaken for the script above it.
+ */
+function MemoStrip({
+  memo,
+  disabled,
+  onCommit,
+}: {
+  memo?: string;
+  disabled: boolean;
+  onCommit: (memo: string) => void;
+}) {
+  const t = useLocale();
+  const [draft, setDraft] = useState<string | null>(null);
+  const ref = useRef<HTMLTextAreaElement | null>(null);
+  const editing = draft !== null;
+
+  useEffect(() => {
+    if (editing) ref.current?.focus();
+  }, [editing]);
+
+  const shared = 'w-full rounded-[4px] px-1.5 py-1 text-left text-[11px] leading-[1.45]';
+
+  return (
+    <div className="nodrag nopan" style={{ height: MEMO_H }}>
+      {editing ? (
+        <textarea
+          ref={ref}
+          value={draft}
+          aria-label={t.board.memoPlaceholder}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={() => {
+            const next = draft.trim();
+            setDraft(null);
+            if (next !== (memo ?? '')) onCommit(next);
+          }}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === 'Escape') e.currentTarget.blur();
+          }}
+          placeholder={t.board.memoPlaceholder}
+          className={cn(
+            shared,
+            'nowheel h-full resize-none bg-amber-500/10 text-foreground outline-none',
+            'ring-1 ring-amber-500/50 placeholder:text-muted-foreground/50',
+          )}
+        />
+      ) : (
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => setDraft(memo ?? '')}
+          className={cn(
+            shared,
+            'h-full overflow-hidden disabled:pointer-events-none',
+            'motion-safe:transition-[background-color,opacity]',
+            memo
+              ? 'bg-amber-500/10 text-amber-900 hover:bg-amber-500/15 dark:text-amber-200'
+              : 'text-muted-foreground/45 opacity-0 hover:bg-amber-500/10 group-hover/card:opacity-100',
+          )}
+        >
+          <span className="line-clamp-2 whitespace-pre-wrap">
+            {memo || t.board.memoPlaceholder}
+          </span>
+        </button>
+      )}
+    </div>
+  );
+}

package/src/app/components/board/use-board-cards.ts

@@ -0,0 +1,210 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { useLocale } from '@/lib/use-locale';
+import {
+  adoptEntries,
+  type BoardCard,
+  type BoardCards,
+  type BoardLink,
+  type CardPatch,
+  carryCards,
+  entriesAfter,
+  isSettledKey,
+  linkCards,
+  linkedPairs,
+  originAfter,
+  type PageOp,
+  pageKeys,
+  patchCard,
+  sanitizeCards,
+  sanitizeLinks,
+  unlinkCards,
+} from '../../../files/board-cards';
+import type { Page } from '../../lib/sdk';
+
+type BoardState = {
+  cards: BoardCards;
+  links: BoardLink[];
+  /** `undefined` until read, `null` when the deck is keyed by position. */
+  entries: string[] | null | undefined;
+  loaded: boolean;
+};
+
+const INITIAL: BoardState = { cards: {}, links: [], entries: undefined, loaded: false };
+
+const countAfter = (op: PageOp, count: number) =>
+  op.kind === 'move' ? count : op.kind === 'delete' ? count - 1 : count + 1;
+
+/**
+ * Titles, statuses, work memos and links: board-only data that never reaches
+ * the deck. Each card is keyed by its page's entry in the deck source, so the
+ * data stays on its page however and wherever the deck is reordered.
+ */
+export function useBoardCards(slideId: string, modulePages: Page[], count: number) {
+  const t = useLocale();
+  const [board, setBoard] = useState<BoardState>(INITIAL);
+  const boardRef = useRef(board);
+  const countRef = useRef(count);
+  countRef.current = count;
+  const saveQueue = useRef<Promise<void>>(Promise.resolve());
+  const opsInFlight = useRef(0);
+  const entrySeq = useRef(0);
+
+  const save = useCallback(
+    (next: BoardState) => {
+      const body = JSON.stringify({ slideId, cards: next.cards, links: next.links });
+      // One write at a time, so a slow earlier save never lands after a later one.
+      saveQueue.current = saveQueue.current.then(async () => {
+        try {
+          const res = await fetch('/__board/cards', {
+            method: 'PUT',
+            headers: { 'content-type': 'application/json' },
+            body,
+          });
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        } catch (err) {
+          toast.error(`${t.board.saveFailed}: ${String((err as Error).message ?? err)}`);
+        }
+      });
+    },
+    [slideId, t.board],
+  );
+
+  const commit = useCallback(
+    (next: BoardState, persist: boolean) => {
+      boardRef.current = next;
+      setBoard(next);
+      if (persist && next.loaded) save(next);
+    },
+    [save],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    commit(INITIAL, false);
+    (async () => {
+      try {
+        const res = await fetch(`/__board/cards?slideId=${encodeURIComponent(slideId)}`);
+        if (!res.ok || cancelled) return;
+        const body = (await res.json()) as { cards?: unknown; links?: unknown };
+        if (cancelled) return;
+        commit(
+          {
+            ...boardRef.current,
+            cards: sanitizeCards(body.cards),
+            links: sanitizeLinks(body.links),
+            loaded: true,
+          },
+          false,
+        );
+      } catch {
+        // Left unloaded, so nothing written from here can overwrite cards that
+        // were never read.
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [slideId, commit]);
+
+  // An answer read while a page operation is still being written describes a
+  // deck that is about to change again, so it is dropped; the operation reads
+  // the entries afresh once it settles.
+  const refreshEntries = useCallback(async () => {
+    if (opsInFlight.current > 0) return;
+    const seq = ++entrySeq.current;
+    let fetched: string[] | null;
+    try {
+      const res = await fetch(`/__board/entries?slideId=${encodeURIComponent(slideId)}`);
+      if (!res.ok) return;
+      fetched = ((await res.json()) as { entries: string[] | null }).entries;
+    } catch {
+      return;
+    }
+    if (seq !== entrySeq.current || opsInFlight.current > 0) return;
+    const current = boardRef.current;
+    const adopted = adoptEntries(current, current.entries, fetched);
+    commit({ ...current, ...adopted, entries: fetched }, adopted !== current);
+  }, [slideId, commit]);
+
+  // The deck module reloads after every write to its source, ours or anyone else's.
+  useEffect(() => {
+    if (modulePages.length > 0) void refreshEntries();
+  }, [modulePages, refreshEntries]);
+
+  /**
+   * Moves the board's data along with a page operation, before the deck itself
+   * changes. Call the returned function once the deck write settles; a refused
+   * write puts the cards back as they were.
+   */
+  const beginOp = useCallback(
+    (op: PageOp) => {
+      const snapshot = boardRef.current;
+      const count = countRef.current;
+      opsInFlight.current += 1;
+      entrySeq.current += 1;
+
+      const before = pageKeys(snapshot.entries, count);
+      const entries = entriesAfter(op, snapshot.entries, count);
+      if (before.every(isSettledKey)) {
+        const after = pageKeys(entries, countAfter(op, count));
+        const carried = carryCards(snapshot, before, after, originAfter(op, count));
+        commit({ ...snapshot, ...carried, entries }, true);
+      } else {
+        commit({ ...snapshot, entries }, false);
+      }
+
+      return (ok: boolean) => {
+        opsInFlight.current -= 1;
+        if (!ok) {
+          commit({ ...boardRef.current, cards: snapshot.cards, links: snapshot.links }, true);
+        }
+        void refreshEntries();
+      };
+    },
+    [commit, refreshEntries],
+  );
+
+  const keyAt = useCallback((index: number): string | null => {
+    const current = boardRef.current;
+    const key = pageKeys(current.entries, countRef.current)[index];
+    return current.loaded && key && isSettledKey(key) ? key : null;
+  }, []);
+
+  const patch = useCallback(
+    (index: number, change: CardPatch) => {
+      const key = keyAt(index);
+      if (!key) return;
+      const current = boardRef.current;
+      commit({ ...current, cards: patchCard(current.cards, key, change) }, true);
+    },
+    [keyAt, commit],
+  );
+
+  const setLink = useCallback(
+    (a: number, b: number, linked: boolean) => {
+      const from = keyAt(a);
+      const to = keyAt(b);
+      if (!from || !to) return;
+      const current = boardRef.current;
+      const links = linked
+        ? linkCards(current.links, from, to)
+        : unlinkCards(current.links, from, to);
+      if (links !== current.links) commit({ ...current, links }, true);
+    },
+    [keyAt, commit],
+  );
+
+  const link = useCallback((a: number, b: number) => setLink(a, b, true), [setLink]);
+  const unlink = useCallback((a: number, b: number) => setLink(a, b, false), [setLink]);
+
+  const keys = useMemo(() => pageKeys(board.entries, count), [board.entries, count]);
+  const ready = board.loaded && keys.every(isSettledKey);
+  const cards = useMemo<(BoardCard | undefined)[]>(
+    () => keys.map((key) => (isSettledKey(key) ? board.cards[key] : undefined)),
+    [keys, board.cards],
+  );
+  const pairs = useMemo(() => linkedPairs(keys, board.links), [keys, board.links]);
+
+  return { ready, cards, pairs, patch, link, unlink, beginOp };
+}

package/src/app/components/board/use-page-order.ts

@@ -25,10 +25,10 @@ export function usePageOrder(slideId: string, modulePages: Page[]) {
   }, []);
 
   const reorder = useCallback(
-    async (from: number, to: number) => {
-      if (from === to || from < 0 || to < 0) return;
+    async (from: number, to: number): Promise<boolean> => {
+      if (from === to || from < 0 || to < 0) return false;
       const before = pages;
-      if (from >= before.length || to >= before.length) return;
+      if (from >= before.length || to >= before.length) return false;
 
       const next = [...before];
       const [moved] = next.splice(from, 1);
@@ -45,18 +45,20 @@ export function usePageOrder(slideId: string, modulePages: Page[]) {
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ order }),
         });
+        return true;
       } catch (err) {
         setPages(before);
         toast.error(`${t.board.reorderFailed}: ${String((err as Error).message ?? err)}`);
+        return false;
       }
     },
     [pages, slideId, send, t.board],
   );
 
   const duplicate = useCallback(
-    async (i: number) => {
+    async (i: number): Promise<boolean> => {
       const before = pages;
-      if (i < 0 || i >= before.length) return;
+      if (i < 0 || i >= before.length) return false;
       const next = [...before];
       next.splice(i + 1, 0, before[i]);
       setPages(next);
@@ -65,20 +67,22 @@ export function usePageOrder(slideId: string, modulePages: Page[]) {
           method: 'POST',
         });
         toast.success(format(t.thumbnailRail.toastDuplicated, { n: i + 1 }));
+        return true;
       } catch (err) {
         setPages(before);
         toast.error(
           `${t.thumbnailRail.toastDuplicateFailed}: ${String((err as Error).message ?? err)}`,
         );
+        return false;
       }
     },
     [pages, slideId, send, t.thumbnailRail],
   );
 
   const insert = useCallback(
-    async (i: number) => {
+    async (i: number): Promise<boolean> => {
       const before = pages;
-      if (i < 0 || i > before.length) return;
+      if (i < 0 || i > before.length) return false;
       // The blank page has no component here yet; the server writes one and the
       // deck reloads through HMR, so the local list only has to hold its slot.
       const next = [...before];
@@ -89,27 +93,31 @@ export function usePageOrder(slideId: string, modulePages: Page[]) {
           method: 'POST',
         });
         toast.success(format(t.board.toastInserted, { n: i + 1 }));
+        return true;
       } catch (err) {
         setPages(before);
         toast.error(`${t.board.insertFailed}: ${String((err as Error).message ?? err)}`);
+        return false;
       }
     },
     [pages, slideId, send, t.board],
   );
 
   const remove = useCallback(
-    async (i: number) => {
+    async (i: number): Promise<boolean> => {
       const before = pages;
-      if (i < 0 || i >= before.length || before.length <= 1) return;
+      if (i < 0 || i >= before.length || before.length <= 1) return false;
       setPages(before.slice(0, i).concat(before.slice(i + 1)));
       try {
         await send(`/__slides/${encodeURIComponent(slideId)}/pages/${i}`, { method: 'DELETE' });
         toast.success(format(t.thumbnailRail.toastDeleted, { n: i + 1 }));
+        return true;
       } catch (err) {
         setPages(before);
         toast.error(
           `${t.thumbnailRail.toastDeleteFailed}: ${String((err as Error).message ?? err)}`,
         );
+        return false;
       }
     },
     [pages, slideId, send, t.thumbnailRail],