@lemonriver/core 0.1.0 → 0.2.0

package/src/app/components/panel/resize-handle.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState } from 'react';
+import { clamp, cn } from '@/lib/utils';
+
+export function useStoredWidth(key: string, fallback: number, min: number, max: number) {
+  const [width, setWidth] = useState<number>(() => {
+    try {
+      const parsed = Number(window.localStorage.getItem(key) ?? Number.NaN);
+      return Number.isFinite(parsed) ? clamp(parsed, min, max) : fallback;
+    } catch {
+      return fallback;
+    }
+  });
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(key, String(width));
+    } catch {}
+  }, [key, width]);
+  return [width, setWidth] as const;
+}
+
+// A vertical splitter on one edge of a panel. `edge` is the side of the panel
+// it sits on, so dragging away from the panel always makes it wider.
+export function ResizeHandle({
+  width,
+  min,
+  max,
+  defaultWidth,
+  edge,
+  label,
+  onResize,
+  onResizingChange,
+  className,
+}: {
+  width: number;
+  min: number;
+  max: number;
+  defaultWidth: number;
+  edge: 'left' | 'right';
+  label: string;
+  onResize: (width: number) => void;
+  onResizingChange?: (resizing: boolean) => void;
+  className?: string;
+}) {
+  const [resizing, setResizing] = useState(false);
+  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
+  const direction = edge === 'right' ? 1 : -1;
+
+  useEffect(() => {
+    onResizingChange?.(resizing);
+    if (!resizing) return;
+    const prev = {
+      cursor: document.body.style.cursor,
+      userSelect: document.body.style.userSelect,
+    };
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    return () => {
+      document.body.style.cursor = prev.cursor;
+      document.body.style.userSelect = prev.userSelect;
+    };
+  }, [resizing, onResizingChange]);
+
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragRef.current = { startX: e.clientX, startWidth: width };
+    setResizing(true);
+  };
+
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragRef.current) return;
+    const delta = (e.clientX - dragRef.current.startX) * direction;
+    onResize(clamp(dragRef.current.startWidth + delta, min, max));
+  };
+
+  const onPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    dragRef.current = null;
+    setResizing(false);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const step = (e.shiftKey ? 32 : 8) * direction;
+    let next: number | null = null;
+    if (e.key === 'ArrowLeft') next = width - step;
+    else if (e.key === 'ArrowRight') next = width + step;
+    else if (e.key === 'Home') next = defaultWidth;
+    if (next === null) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onResize(clamp(next, min, max));
+  };
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: focusable resize handle (splitter pattern), not a static <hr>
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={label}
+      aria-valuenow={width}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      tabIndex={0}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      onKeyDown={onKeyDown}
+      onDoubleClick={() => onResize(defaultWidth)}
+      className={cn(
+        'group/resize absolute inset-y-0 z-20 w-1.5 cursor-col-resize touch-none outline-none',
+        'focus-visible:bg-brand/20',
+        className,
+      )}
+    >
+      <span
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute inset-y-0 w-px bg-brand opacity-0 transition-opacity duration-150',
+          edge === 'right' ? 'left-1/2 -translate-x-1/2' : 'left-0',
+          'group-hover/resize:opacity-100 group-focus-visible/resize:opacity-100',
+          resizing && 'opacity-100',
+        )}
+      />
+    </div>
+  );
+}

package/src/app/components/player.tsx

@@ -402,7 +402,6 @@ export function Player({
         controls && 'select-none',
         controls && (hideCursor ? 'cursor-none' : 'cursor-default'),
       )}
-      style={design ? { background: design.palette.bg } : undefined}
     >
       <SlideCanvas flat design={design}>
         {/* Keyed per deck so a presenter-driven deck switch cuts instead of

package/src/app/components/preview-step-host.tsx

@@ -0,0 +1,16 @@
+import { type ReactNode, useRef } from 'react';
+import { type StepController, StepHost } from '../lib/step-context';
+
+export 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>
+  );
+}

package/src/app/components/sidebar/sidebar.tsx

@@ -1,7 +1,7 @@
 import { Plus, Search } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import logo from '@/assets/open-slide.png';
+import logo from '@/assets/open-slide.svg';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import type { Folder, FolderIcon } from '@/lib/sdk';
 import { format, useLocale } from '@/lib/use-locale';
@@ -135,7 +135,7 @@ export function Sidebar({
           alt=""
           aria-hidden
           draggable={false}
-          className="size-6 shrink-0 select-none rounded-[6px] ring-1 ring-foreground/10"
+          className="size-6 shrink-0 select-none"
         />
         <h1 className="font-heading text-[13.5px] font-semibold tracking-tight">
           {t.home.appTitle}

package/src/app/components/style-panel/style-panel.tsx

@@ -197,12 +197,13 @@ export function DesignToggleButton({
       size="sm"
       variant={active ? 'default' : 'ghost'}
       onClick={onToggle}
+      aria-label={t.stylePanel.designToggle}
       data-design-ui
       title={t.stylePanel.designToggleTitle}
     >
       <Palette className="size-3.5" />
-      <span className="hidden md:inline">{t.stylePanel.designToggle}</span>
-      <kbd className="ml-1 hidden rounded-[3px] bg-foreground/10 px-1 font-mono text-[9.5px] tracking-[0.04em] md:inline">
+      <span className="hidden lg:inline">{t.stylePanel.designToggle}</span>
+      <kbd className="ml-1 hidden rounded-[3px] bg-foreground/10 px-1 font-mono text-[9.5px] tracking-[0.04em] lg:inline">
         D
       </kbd>
     </Button>

package/src/app/components/thumbnail-rail.tsx

@@ -27,6 +27,7 @@ import {
   Workflow,
 } from 'lucide-react';
 import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useOptionalInspector } from '@/components/inspector/inspector-provider';
 import { Button } from '@/components/ui/button';
 import {
   ContextMenu,
@@ -37,7 +38,7 @@ import {
 } from '@/components/ui/context-menu';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { format, useLocale } from '@/lib/use-locale';
+import { format, plural, useLocale } from '@/lib/use-locale';
 import { cn, pad2 } from '@/lib/utils';
 import type { DesignSystem } from '../lib/design';
 import { SlidePageProvider } from '../lib/page-context';
@@ -77,6 +78,36 @@ type Props = {
   onBoard?: () => void;
 };
 
+// Per-page pending comment counts, shown on the rail only while the
+// comment tool is active.
+function usePageCommentCounts(): Map<number, number> | null {
+  const inspector = useOptionalInspector();
+  if (!inspector?.commentMode) return null;
+  const counts = new Map<number, number>();
+  for (const comment of inspector.comments) {
+    if (comment.page === undefined) continue;
+    counts.set(comment.page, (counts.get(comment.page) ?? 0) + 1);
+  }
+  return counts;
+}
+
+function CommentCountBadge({ count, className }: { count: number; className?: string }) {
+  const t = useLocale();
+  return (
+    <span
+      role="img"
+      aria-label={format(plural(count, t.inspector.commentsCount), { count })}
+      data-page-comments={count}
+      className={cn(
+        'flex h-4 min-w-4 items-center justify-center rounded-full bg-brand px-1 font-mono text-[9.5px] font-semibold leading-none text-brand-foreground tabular-nums',
+        className,
+      )}
+    >
+      {count}
+    </span>
+  );
+}
+
 const DEFAULT_VERTICAL_THUMB_WIDTH = 184;
 const VERTICAL_RAIL_CHROME = 80;
 const MIN_VERTICAL_THUMB_WIDTH = 120;
@@ -107,6 +138,7 @@ export function ThumbnailRail({
   const virtualListRef = useRef<HTMLDivElement | null>(null);
   const verticalViewportRef = useRef<HTMLElement | null>(null);
   const focusCurrentAfterScrollRef = useRef(false);
+  const focusAfterArrowRef = useRef(false);
   const [currentPosition, setCurrentPosition] = useState<ThumbnailOffscreenDirection>(null);
   const t = useLocale();
 
@@ -176,6 +208,32 @@ export function ThumbnailRail({
     return () => cancelAnimationFrame(frame);
   }, [currentPosition]);
 
+  useLayoutEffect(() => {
+    if (!focusAfterArrowRef.current || !activeRef.current) return;
+    activeRef.current.focus({ preventScroll: true });
+    focusAfterArrowRef.current = false;
+  });
+
+  const onThumbnailArrowKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing) return;
+      const direction =
+        event.key === 'ArrowRight' || event.key === 'ArrowDown'
+          ? 1
+          : event.key === 'ArrowLeft' || event.key === 'ArrowUp'
+            ? -1
+            : 0;
+      if (!direction) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const next = Math.min(Math.max(index + direction, 0), pages.length - 1);
+      if (next === index) return;
+      focusAfterArrowRef.current = true;
+      onSelect(next);
+    },
+    [onSelect, pages.length],
+  );
+
   const renderThumb = useCallback(
     (PageComp: Page, i: number) => {
       const active = i === current;
@@ -199,6 +257,7 @@ export function ThumbnailRail({
           active={active}
           activeRef={active ? activeRef : undefined}
           onSelect={() => onSelect(i)}
+          onArrowKeyDown={(event) => onThumbnailArrowKeyDown(event, i)}
           ariaLabel={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
         >
           {inner}
@@ -208,6 +267,7 @@ export function ThumbnailRail({
           type="button"
           ref={active ? activeRef : undefined}
           onClick={() => onSelect(i)}
+          onKeyDown={(event) => onThumbnailArrowKeyDown(event, i)}
           aria-label={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
           aria-current={active ? 'page' : undefined}
           className={thumbButtonClass(active)}
@@ -239,6 +299,7 @@ export function ThumbnailRail({
       moduleTransition,
       onReorder,
       onSelect,
+      onThumbnailArrowKeyDown,
       pages.length,
       scale,
       thumbWidth,
@@ -260,6 +321,7 @@ export function ThumbnailRail({
             actions={actions}
             activeRef={activeRef}
             onSelect={onSelect}
+            onArrowKeyDown={onThumbnailArrowKeyDown}
             scale={scale}
             thumbWidth={horizontalWidth}
           />
@@ -438,6 +500,7 @@ function HorizontalVirtualThumbList({
   actions,
   activeRef,
   onSelect,
+  onArrowKeyDown,
   scale,
   thumbWidth,
 }: {
@@ -447,6 +510,7 @@ function HorizontalVirtualThumbList({
   actions?: ThumbnailActions;
   activeRef: React.MutableRefObject<HTMLButtonElement | null>;
   onSelect: (index: number) => void;
+  onArrowKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => void;
   scale: number;
   thumbWidth: number;
 }) {
@@ -516,15 +580,18 @@ function HorizontalVirtualThumbList({
   }, [current, itemWidth, pages.length, thumbWidth]);
 
   const visibleRange = clampVisibleRange(range, current, pages.length);
+  const commentCounts = usePageCommentCounts();
   const visible = [];
   for (let i = visibleRange.start; i < visibleRange.end; i++) {
     const PageComp = pages[i];
     const active = i === current;
+    const commentCount = commentCounts?.get(i) ?? 0;
     const button = (
       <button
         type="button"
         ref={active ? activeRef : undefined}
         onClick={() => onSelect(i)}
+        onKeyDown={(event) => onArrowKeyDown(event, i)}
         aria-label={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
         aria-current={active ? 'page' : undefined}
         className={cn(
@@ -555,6 +622,9 @@ function HorizontalVirtualThumbList({
             </SlidePageProvider>
           </SlideCanvas>
         </div>
+        {commentCount > 0 && (
+          <CommentCountBadge count={commentCount} className="absolute -top-0.5 -right-1" />
+        )}
       </button>
     );
 
@@ -791,6 +861,7 @@ function ThumbContents({
   }, [PageComp]);
 
   const hasTransition = Boolean(PageComp.transition ?? moduleTransition);
+  const commentCount = usePageCommentCounts()?.get(index) ?? 0;
 
   return (
     <>
@@ -803,6 +874,7 @@ function ThumbContents({
         >
           {pad2(index + 1)}
         </span>
+        {commentCount > 0 && <CommentCountBadge count={commentCount} />}
         {(hasTransition || hasSteps) && (
           <div className="flex flex-col items-end gap-0.5">
             {hasTransition && (
@@ -948,6 +1020,7 @@ function SortableThumb({
   active,
   activeRef,
   onSelect,
+  onArrowKeyDown,
   ariaLabel,
   children,
   ...rest
@@ -956,6 +1029,7 @@ function SortableThumb({
   active: boolean;
   activeRef: React.MutableRefObject<HTMLButtonElement | null> | undefined;
   onSelect: () => void;
+  onArrowKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;
   ariaLabel: string;
   children: React.ReactNode;
 } & Omit<
@@ -980,6 +1054,7 @@ function SortableThumb({
       ref={setRef}
       type="button"
       onClick={onSelect}
+      onKeyDownCapture={isDragging ? undefined : onArrowKeyDown}
       aria-label={ariaLabel}
       aria-current={active ? 'page' : undefined}
       style={{

package/src/app/favicon.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="none">
+  <defs>
+    <linearGradient id="tile" x1="256" y1="16" x2="256" y2="496" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FFFFFF"/>
+      <stop offset="1" stop-color="#EFEBE6"/>
+    </linearGradient>
+    <linearGradient id="tile-edge" x1="256" y1="16" x2="256" y2="496" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FFFFFF"/>
+      <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0"/>
+      <stop offset="1" stop-color="#000000" stop-opacity="0.08"/>
+    </linearGradient>
+    <linearGradient id="slide" x1="256" y1="172" x2="256" y2="340" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FF8A5E"/>
+      <stop offset="0.45" stop-color="#FE5226"/>
+      <stop offset="1" stop-color="#EE4316"/>
+    </linearGradient>
+    <linearGradient id="slide-edge" x1="256" y1="172" x2="256" y2="340" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.55"/>
+      <stop offset="0.35" stop-color="#FFFFFF" stop-opacity="0"/>
+      <stop offset="0.8" stop-color="#B8300C" stop-opacity="0"/>
+      <stop offset="1" stop-color="#B8300C" stop-opacity="0.5"/>
+    </linearGradient>
+    <radialGradient id="slide-sheen" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(196 184) rotate(32) scale(200 110)">
+      <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.26"/>
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="lift" x="60" y="140" width="392" height="260" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="18" stdDeviation="16" flood-color="#FE5226" flood-opacity="0.32"/>
+      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#8A2306" flood-opacity="0.22"/>
+    </filter>
+  </defs>
+  <rect x="16" y="16" width="480" height="480" rx="112" fill="url(#tile)"/>
+  <rect x="17.5" y="17.5" width="477" height="477" rx="110.5" stroke="url(#tile-edge)" stroke-width="3"/>
+  <g filter="url(#lift)">
+    <rect x="112" y="172" width="288" height="168" rx="34" fill="url(#slide)"/>
+  </g>
+  <rect x="112" y="172" width="288" height="168" rx="34" fill="url(#slide-sheen)"/>
+  <rect x="113.5" y="173.5" width="285" height="165" rx="32.5" stroke="url(#slide-edge)" stroke-width="3"/>
+</svg>

package/src/app/index.html

@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="./favicon.ico" />
+    <link rel="icon" href="./favicon.ico" sizes="32x32" />
+    <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LemonRiver</title>
     <style>