@lemonriver/core 0.1.1 → 0.2.0

package/src/app/lib/print-ready.ts

@@ -11,27 +11,30 @@ export async function waitForFonts(): Promise<void> {
   await document.fonts.ready;
 }
 
+// Resolves false when any target was still missing at the deadline.
 export async function waitForDataWaitfor(
   root: HTMLElement,
   timeoutMs = DEFAULT_WAITFOR_TIMEOUT_MS,
-): Promise<void> {
+): Promise<boolean> {
   const targets = Array.from(root.querySelectorAll<HTMLElement>('[data-waitfor]'));
-  if (targets.length === 0) return;
+  if (targets.length === 0) return true;
   const deadline = performance.now() + timeoutMs;
-  await Promise.all(
+  const results = await Promise.all(
     targets.map(async (el) => {
       const selector = el.getAttribute('data-waitfor');
-      if (!selector) return;
+      if (!selector) return true;
       while (performance.now() < deadline) {
         try {
-          if (el.querySelector(selector)) return;
+          if (el.querySelector(selector)) return true;
         } catch {
-          return; // invalid selector — skip rather than hang
+          return true; // invalid selector — skip rather than hang
         }
         await nextFrame();
       }
+      return false;
     }),
   );
+  return results.every(Boolean);
 }
 
 export function isFrameAnimationSettled(frame: Element): boolean {

package/src/app/lib/use-auto-grow.ts

@@ -0,0 +1,15 @@
+import { type RefObject, useLayoutEffect } from 'react';
+
+export function useAutoGrow(
+  ref: RefObject<HTMLTextAreaElement | null>,
+  value: string,
+  max: number,
+): void {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-measure whenever the text changes
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    node.style.height = '0px';
+    node.style.height = `${Math.min(max, Math.max(40, node.scrollHeight))}px`;
+  }, [ref, value, max]);
+}

package/src/app/lib/utils.ts

@@ -9,6 +9,10 @@ export function round2(n: number): number {
   return Math.round(n * 100) / 100;
 }
 
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
 export function pad2(n: number): string {
   return n.toString().padStart(2, '0');
 }

package/src/app/routes/board.tsx

@@ -1,11 +1,12 @@
 import { ChevronLeft } from 'lucide-react';
-import { lazy, Suspense, useCallback } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { useDocumentTitle } from '@/lib/use-document-title';
 import { format, useLocale } from '@/lib/use-locale';
 import { pad2 } from '@/lib/utils';
 import { columnStarts } from '../../files/board-structure';
+import { useBoardCards } from '../components/board/use-board-cards';
 import { useBoardColumns } from '../components/board/use-board-columns';
 import { usePageOrder } from '../components/board/use-page-order';
 import type { Page } from '../lib/sdk';
@@ -17,6 +18,20 @@ const BoardCanvas = lazy(() => import('../components/board/board-canvas'));
 // the deck module is still loading.
 const NO_PAGES: Page[] = [];
 
+const LINKS_KEY = 'open-slide:board-links-visible';
+
+function useLinksVisible() {
+  const [visible, setVisible] = useState(() => {
+    if (typeof window === 'undefined') return true;
+    return window.localStorage.getItem(LINKS_KEY) !== '0';
+  });
+  useEffect(() => {
+    window.localStorage.setItem(LINKS_KEY, visible ? '1' : '0');
+  }, [visible]);
+  const toggle = useCallback(() => setVisible((v) => !v), []);
+  return [visible, toggle] as const;
+}
+
 export function Board() {
   const { slideId = '' } = useParams();
   const navigate = useNavigate();
@@ -36,15 +51,24 @@ export function Board() {
     pages,
     columnTitle,
   );
+  const { ready, cards, pairs, patch, link, unlink, beginOp } = useBoardCards(
+    slideId,
+    modulePages,
+    pages.length,
+  );
+  const [showLinks, toggleLinks] = useLinksVisible();
 
-  // Order and structure move together: every path that reorders a deck goes
-  // through here, so the columns can never drift out of step with the pages.
+  // Order, structure and the board's own card data move together: every path
+  // that changes the deck's pages goes through here, so none of them can drift
+  // out of step with the pages.
   const movePage = useCallback(
     (from: number, to: number) => {
+      if (from === to) return;
+      const settle = beginOp({ kind: 'move', from, to });
       moveBetweenColumns(from, to);
-      void reorder(from, to);
+      void reorder(from, to).then(settle);
     },
-    [moveBetweenColumns, reorder],
+    [beginOp, moveBetweenColumns, reorder],
   );
 
   const openPage = useCallback(
@@ -56,10 +80,11 @@ export function Board() {
 
   const duplicatePage = useCallback(
     (index: number) => {
+      const settle = beginOp({ kind: 'duplicate', index });
       resizeColumnAt(index, 1);
-      void duplicate(index);
+      void duplicate(index).then(settle);
     },
-    [duplicate, resizeColumnAt],
+    [beginOp, duplicate, resizeColumnAt],
   );
 
   // A new page lands at the end of the column whose + was clicked.
@@ -69,10 +94,12 @@ export function Board() {
       const starts = columnStarts(columns);
       const start = starts[columnIndex];
       const size = columns[columnIndex].size;
+      const at = size > 0 ? start + size : start;
+      const settle = beginOp({ kind: 'insert', index: at });
       growColumn(columnIndex, 1);
-      void insert(size > 0 ? start + size : start);
+      void insert(at).then(settle);
     },
-    [columns, growColumn, insert],
+    [beginOp, columns, growColumn, insert],
   );
 
   const moveToEnd = useCallback(
@@ -82,10 +109,12 @@ export function Board() {
 
   const deletePage = useCallback(
     (index: number) => {
+      if (pages.length <= 1) return;
+      const settle = beginOp({ kind: 'delete', index });
       resizeColumnAt(index, -1);
-      void remove(index);
+      void remove(index).then(settle);
     },
-    [remove, resizeColumnAt],
+    [beginOp, pages.length, remove, resizeColumnAt],
   );
 
   return (
@@ -123,6 +152,10 @@ export function Board() {
               slideId={slideId}
               pages={pages}
               notes={slide?.notes}
+              cards={cards}
+              cardsReady={ready}
+              links={pairs}
+              showLinks={showLinks}
               columns={columns}
               design={slide?.design}
               onOpenPage={openPage}
@@ -132,6 +165,10 @@ export function Board() {
               onDuplicate={duplicatePage}
               onDelete={deletePage}
               onMoveToEnd={moveToEnd}
+              onPatchCard={patch}
+              onLink={link}
+              onUnlink={unlink}
+              onToggleLinks={toggleLinks}
             />
           </Suspense>
         )}

package/src/app/routes/home.tsx

@@ -8,6 +8,7 @@ import {
   MoreHorizontal,
   Palette,
   Pencil,
+  Plus,
   Search,
   Trash2,
   X,
@@ -30,8 +31,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { useAgentStatus, useCreateDeck } from '@/lib/agent/use-agent';
 import { format, useLocale } from '@/lib/use-locale';
 import { cn, pad2 } from '@/lib/utils';
+import { ProviderLogo } from '../components/agent/provider-logo';
 import { FolderIconChip, SLIDE_DND_MIME, SystemViewIcon } from '../components/sidebar/folder-item';
 import { ALL_SLIDES_ID, DRAFT_ID } from '../components/sidebar/sidebar';
 import { SlideCanvas } from '../components/slide-canvas';
@@ -193,6 +196,7 @@ export function Home() {
           <div className="ml-auto flex w-full items-center gap-2 md:w-auto">
             <SortControl value={sortKey} onChange={setSortKey} />
             <SearchInput value={query} onChange={setQuery} />
+            {import.meta.env.DEV && <NewDeckButton />}
           </div>
         </div>
       </header>
@@ -319,6 +323,30 @@ function SortControl({ value, onChange }: { value: SortKey; onChange: (next: Sor
   );
 }
 
+function useCreateDeckWithAgent() {
+  const { provider } = useAgentStatus();
+  const start = useCreateDeck();
+  if (!provider) return null;
+  return { provider, start };
+}
+
+function NewDeckButton() {
+  const t = useLocale();
+  const agent = useCreateDeckWithAgent();
+  if (!agent) return null;
+  return (
+    <Button
+      size="sm"
+      className="h-8 shrink-0"
+      onClick={agent.start}
+      title={format(t.agent.createDeckWith, { provider: agent.provider.name })}
+    >
+      <Plus />
+      {t.agent.createDeck}
+    </Button>
+  );
+}
+
 function HomeLoading() {
   const t = useLocale();
   return (
@@ -360,6 +388,7 @@ function NoResultsState({ query, onClear }: { query: string; onClear: () => void
 
 function EmptyState({ isDraft, folderName }: { isDraft: boolean; folderName?: string }) {
   const t = useLocale();
+  const agent = useCreateDeckWithAgent();
   const folderEmptyTitle = t.home.folderEmptyTitle.replace(
     '{name}',
     folderName ?? t.home.folderEmptyTitle,
@@ -373,13 +402,20 @@ function EmptyState({ isDraft, folderName }: { isDraft: boolean; folderName?: st
             <p className="mt-4 font-heading text-[14px] font-semibold tracking-tight">
               {t.home.noSlidesYet}
             </p>
-            <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
-              {t.home.createSlideHintPrefix}
-              <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
-                /create-slide
-              </code>
-              {t.home.createSlideHintSuffix}
-            </p>
+            {agent ? (
+              <Button size="sm" className="mt-4" onClick={agent.start}>
+                <ProviderLogo provider={agent.provider.id} />
+                {format(t.agent.createDeckWith, { provider: agent.provider.name })}
+              </Button>
+            ) : (
+              <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+                {t.home.createSlideHintPrefix}
+                <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
+                  /create-slide
+                </code>
+                {t.home.createSlideHintSuffix}
+              </p>
+            )}
           </>
         ) : (
           <>

package/src/app/routes/presenter.tsx

@@ -11,7 +11,6 @@ import {
 } from 'lucide-react';
 import {
   type KeyboardEvent as ReactKeyboardEvent,
-  type ReactNode,
   useCallback,
   useEffect,
   useRef,
@@ -29,12 +28,12 @@ import {
   type PresenterState,
   usePresenterChannel,
 } from '../components/present/use-presenter-channel';
+import { PreviewStepHost } from '../components/preview-step-host';
 import { SlideCanvas } from '../components/slide-canvas';
 import { isDeckWarmed, markDeckWarmed, SlidePreloadLayer } from '../components/slide-preload-layer';
 import { SlidePageProvider } from '../lib/page-context';
 import { CANVAS_HEIGHT, CANVAS_WIDTH, type SlideModule } from '../lib/sdk';
 import { loadSlide, slideIds } from '../lib/slides';
-import { type StepController, StepHost } from '../lib/step-context';
 import { useSlideModule } from '../lib/use-slide-module';
 
 export function Presenter() {
@@ -653,20 +652,6 @@ function SectionLabel({ children }: { children: React.ReactNode }) {
   return <span className="eyebrow">{children}</span>;
 }
 
-function PreviewStepHost({ revealed, children }: { revealed: number; children: ReactNode }) {
-  const noopControllerRef = useRef<StepController | null>(null);
-  return (
-    <StepHost
-      isActivePage={false}
-      entryDirection="jump"
-      controllerRef={noopControllerRef}
-      controlledRevealed={revealed}
-    >
-      {children}
-    </StepHost>
-  );
-}
-
 function Clock() {
   const [now, setNow] = useState(() => new Date());
   const t = useLocale();

package/src/app/routes/preview.tsx

@@ -0,0 +1,169 @@
+import { Component, type ReactNode, useEffect, useRef, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { useDocumentTitle } from '@/lib/use-document-title';
+import { PreviewStepHost } from '../components/preview-step-host';
+import { SlideCanvas } from '../components/slide-canvas';
+import { nextPaint, sleep } from '../lib/dom';
+import { SlidePageProvider } from '../lib/page-context';
+import { isFrameAnimationSettled, waitForDataWaitfor, waitForFonts } from '../lib/print-ready';
+import { useSlideModule } from '../lib/use-slide-module';
+
+const SETTLE_TIMEOUT_MS = 10_000;
+const POLL_INTERVAL_MS = 50;
+
+type Settle = { status: 'loading' } | { status: 'ready' } | { status: 'error'; message: string };
+
+function parseIntParam(raw: string | null): number | null {
+  if (raw === null || raw.trim() === '') return null;
+  const n = Number(raw);
+  return Number.isInteger(n) ? n : Number.NaN;
+}
+
+function settlesWithin(promise: Promise<unknown>, ms: number): Promise<boolean> {
+  return Promise.race([promise.then(() => true), sleep(ms).then(() => false)]);
+}
+
+function decodeImages(root: HTMLElement): Promise<unknown> {
+  const images = Array.from(root.querySelectorAll('img'));
+  return Promise.all(images.map((img) => img.decode().catch(() => {})));
+}
+
+type PageErrorBoundaryProps = {
+  resetKey: unknown;
+  onError: (error: unknown) => void;
+  children: ReactNode;
+};
+
+class PageErrorBoundary extends Component<PageErrorBoundaryProps, { failed: boolean }> {
+  state = { failed: false };
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  componentDidCatch(error: unknown) {
+    this.props.onError(error);
+  }
+
+  componentDidUpdate(prev: PageErrorBoundaryProps) {
+    if (this.state.failed && prev.resetKey !== this.props.resetKey) {
+      this.setState({ failed: false });
+    }
+  }
+
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+
+export function Preview() {
+  const { slideId = '' } = useParams();
+  const [searchParams] = useSearchParams();
+  const { slide, error: loadError } = useSlideModule(slideId);
+  const frameRef = useRef<HTMLDivElement>(null);
+  const [settle, setSettle] = useState<Settle>({ status: 'loading' });
+  const [renderError, setRenderError] = useState<{ page: unknown; message: string } | null>(null);
+
+  const pageParam = parseIntParam(searchParams.get('p'));
+  const stepParam = parseIntParam(searchParams.get('step'));
+  const pages = slide?.default ?? [];
+  const pageNumber = pageParam ?? 1;
+  const Page = pages[pageNumber - 1];
+
+  let inputError = loadError;
+  if (!inputError && slide) {
+    if (pages.length === 0) inputError = `Slide "${slideId}" has no pages.`;
+    else if (!Page) {
+      inputError = `Page ${searchParams.get('p')} is out of range (1–${pages.length}).`;
+    } else if (stepParam !== null && (Number.isNaN(stepParam) || stepParam < 0)) {
+      inputError = `Invalid step "${searchParams.get('step')}" — expected a non-negative integer.`;
+    }
+  }
+
+  useDocumentTitle(slide ? `${slide.meta?.title ?? slideId} · ${pageNumber}` : undefined);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: a new step reveals content that has to settle again
+  useEffect(() => {
+    setSettle({ status: 'loading' });
+    if (!Page || inputError) return;
+    let cancelled = false;
+    (async () => {
+      await nextPaint();
+      const frame = frameRef.current;
+      if (!frame) return;
+      const deadline = performance.now() + SETTLE_TIMEOUT_MS;
+      const remaining = () => Math.max(0, deadline - performance.now());
+      const fontsLoaded = await settlesWithin(waitForFonts(), remaining());
+      const targetsFound = await waitForDataWaitfor(frame, remaining());
+      const imagesDecoded = await settlesWithin(decodeImages(frame), remaining());
+      while (!cancelled && !isFrameAnimationSettled(frame) && remaining() > 0) {
+        await sleep(POLL_INTERVAL_MS);
+      }
+      const animationsSettled = isFrameAnimationSettled(frame);
+      await nextPaint();
+      if (cancelled) return;
+      const pending = [
+        !fontsLoaded && 'fonts to load',
+        !targetsFound && 'a [data-waitfor] target to appear',
+        !imagesDecoded && 'images to decode',
+        !animationsSettled && 'animations to finish',
+      ].filter(Boolean);
+      setSettle(
+        pending.length > 0
+          ? { status: 'error', message: `Timed out waiting for ${pending.join(', ')}.` }
+          : { status: 'ready' },
+      );
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [Page, inputError, stepParam]);
+
+  const pageError = renderError && renderError.page === Page ? renderError.message : null;
+  const error = inputError ?? pageError ?? (settle.status === 'error' ? settle.message : null);
+  const state = error ? 'error' : settle.status;
+
+  return (
+    <div
+      ref={frameRef}
+      data-osd-preview={state}
+      data-osd-preview-page={Page ? pageNumber : undefined}
+      data-osd-preview-total={slide ? pages.length : undefined}
+      className="h-screen w-screen overflow-hidden bg-black"
+    >
+      {error ? (
+        <pre
+          data-osd-preview-error
+          className="m-0 p-6 font-mono text-[14px] whitespace-pre-wrap text-red-400"
+        >
+          {error}
+        </pre>
+      ) : (
+        slide &&
+        Page && (
+          <SlideCanvas flat freezeMotion design={slide.design}>
+            <SlidePageProvider index={pageNumber - 1} total={pages.length}>
+              <PageErrorBoundary
+                resetKey={Page}
+                onError={(e) =>
+                  setRenderError({
+                    page: Page,
+                    message: `Page ${pageNumber} threw while rendering:\n${e instanceof Error ? (e.stack ?? e.message) : String(e)}`,
+                  })
+                }
+              >
+                {stepParam === null ? (
+                  <Page />
+                ) : (
+                  <PreviewStepHost revealed={stepParam}>
+                    <Page />
+                  </PreviewStepHost>
+                )}
+              </PageErrorBoundary>
+            </SlidePageProvider>
+          </SlideCanvas>
+        )
+      )}
+    </div>
+  );
+}