@open-slide/core 1.1.0 → 1.2.0

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

@@ -2,6 +2,7 @@ import {
   closestCenter,
   DndContext,
   type DragEndEvent,
+  type DragStartEvent,
   KeyboardSensor,
   PointerSensor,
   useSensor,
@@ -14,7 +15,15 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { useEffect, useRef } from 'react';
+import { Copy, Trash2 } from 'lucide-react';
+import { Fragment, useEffect, useRef } from 'react';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from '@/components/ui/context-menu';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
@@ -25,12 +34,18 @@ import { SlideCanvas } from './slide-canvas';
 
 type Orientation = 'vertical' | 'horizontal';
 
+export type ThumbnailActions = {
+  onDuplicate: (index: number) => void;
+  onDelete: (index: number) => void;
+};
+
 type Props = {
   pages: Page[];
   design?: DesignSystem;
   current: number;
   onSelect: (index: number) => void;
   onReorder?: (from: number, to: number) => void;
+  actions?: ThumbnailActions;
   orientation?: Orientation;
 };
 
@@ -43,6 +58,7 @@ export function ThumbnailRail({
   current,
   onSelect,
   onReorder,
+  actions,
   orientation = 'vertical',
 }: Props) {
   const activeRef = useRef<HTMLButtonElement | null>(null);
@@ -68,7 +84,7 @@ export function ThumbnailRail({
           <div className="flex items-center gap-2 px-3 py-2.5">
             {pages.map((PageComp, i) => {
               const active = i === current;
-              return (
+              const button = (
                 <button
                   // biome-ignore lint/suspicious/noArrayIndexKey: pages list is render-stable
                   key={i}
@@ -102,6 +118,19 @@ export function ThumbnailRail({
                   </div>
                 </button>
               );
+              if (!actions) return button;
+              return (
+                <ThumbContextMenu
+                  // biome-ignore lint/suspicious/noArrayIndexKey: pages list is render-stable
+                  key={i}
+                  index={i}
+                  actions={actions}
+                  pageCount={pages.length}
+                  ariaLabel={format(t.thumbnailRail.pageActionsAria, { n: i + 1 })}
+                >
+                  {button}
+                </ThumbContextMenu>
+              );
             })}
           </div>
         </div>
@@ -125,24 +154,18 @@ export function ThumbnailRail({
       />
     );
 
-    if (onReorder) {
-      return (
-        <SortableThumb
-          key={i}
-          index={i}
-          active={active}
-          activeRef={active ? activeRef : undefined}
-          onSelect={() => onSelect(i)}
-          ariaLabel={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
-        >
-          {inner}
-        </SortableThumb>
-      );
-    }
-
-    return (
+    const node = onReorder ? (
+      <SortableThumb
+        index={i}
+        active={active}
+        activeRef={active ? activeRef : undefined}
+        onSelect={() => onSelect(i)}
+        ariaLabel={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
+      >
+        {inner}
+      </SortableThumb>
+    ) : (
       <button
-        key={i}
         type="button"
         ref={active ? activeRef : undefined}
         onClick={() => onSelect(i)}
@@ -153,6 +176,21 @@ export function ThumbnailRail({
         {inner}
       </button>
     );
+
+    if (!actions) {
+      return <Fragment key={i}>{node}</Fragment>;
+    }
+    return (
+      <ThumbContextMenu
+        key={i}
+        index={i}
+        actions={actions}
+        pageCount={pages.length}
+        ariaLabel={format(t.thumbnailRail.pageActionsAria, { n: i + 1 })}
+      >
+        {node}
+      </ThumbContextMenu>
+    );
   };
 
   const list = (
@@ -171,7 +209,7 @@ export function ThumbnailRail({
 
   return (
     <ScrollArea className="h-full border-r border-hairline bg-sidebar">
-      <SortableRail pages={pages} onReorder={onReorder}>
+      <SortableRail pages={pages} onReorder={onReorder} onSelect={onSelect}>
         {list}
       </SortableRail>
     </ScrollArea>
@@ -234,13 +272,56 @@ function ThumbContents({
   );
 }
 
+function ThumbContextMenu({
+  index,
+  actions,
+  pageCount,
+  ariaLabel,
+  children,
+}: {
+  index: number;
+  actions: ThumbnailActions;
+  pageCount: number;
+  ariaLabel: string;
+  children: React.ReactNode;
+}) {
+  const t = useLocale();
+  const canDelete = pageCount > 1;
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild aria-label={ariaLabel}>
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent className="min-w-[180px]">
+        <ContextMenuItem onSelect={() => actions.onDuplicate(index)}>
+          <Copy />
+          {t.thumbnailRail.duplicatePage}
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          variant="destructive"
+          disabled={!canDelete}
+          onSelect={() => {
+            if (canDelete) actions.onDelete(index);
+          }}
+        >
+          <Trash2 />
+          {t.thumbnailRail.deletePage}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
 function SortableRail({
   pages,
   onReorder,
+  onSelect,
   children,
 }: {
   pages: Page[];
   onReorder: (from: number, to: number) => void;
+  onSelect: (index: number) => void;
   children: React.ReactNode;
 }) {
   const sensors = useSensors(
@@ -250,6 +331,11 @@ function SortableRail({
 
   const items = pages.map((_, i) => i + 1);
 
+  const handleDragStart = (event: DragStartEvent) => {
+    const i = (event.active.id as number) - 1;
+    if (i >= 0) onSelect(i);
+  };
+
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
     if (!over || active.id === over.id) return;
@@ -260,7 +346,12 @@ function SortableRail({
   };
 
   return (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
       <SortableContext items={items} strategy={verticalListSortingStrategy}>
         {children}
       </SortableContext>
@@ -275,6 +366,7 @@ function SortableThumb({
   onSelect,
   ariaLabel,
   children,
+  ...rest
 }: {
   index: number;
   active: boolean;
@@ -282,7 +374,10 @@ function SortableThumb({
   onSelect: () => void;
   ariaLabel: string;
   children: React.ReactNode;
-}) {
+} & Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'onClick' | 'aria-label' | 'aria-current' | 'type' | 'style' | 'className' | 'ref' | 'children'
+>) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: index + 1,
   });
@@ -296,6 +391,7 @@ function SortableThumb({
 
   return (
     <button
+      {...rest}
       ref={setRef}
       type="button"
       onClick={onSelect}
@@ -308,8 +404,7 @@ function SortableThumb({
       }}
       className={cn(
         thumbButtonClass(active),
-        'cursor-grab active:cursor-grabbing',
-        isDragging && 'z-10 opacity-60 shadow-edge ring-1 ring-brand',
+        isDragging && 'z-10 cursor-grabbing opacity-60 shadow-edge ring-1 ring-brand',
       )}
       {...attributes}
       {...listeners}

package/src/app/components/ui/context-menu.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
+}
+
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'flex cursor-default items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12.5px] outline-hidden select-none focus:bg-foreground focus:text-background data-[inset]:pl-8 data-[state=open]:bg-muted',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-3.5 opacity-60" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        'z-50 min-w-[9rem] overflow-hidden rounded-[8px] border border-border bg-popover p-1 text-popover-foreground shadow-floating',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          'z-50 max-h-(--radix-context-menu-content-available-height) min-w-[9rem] origin-(--radix-context-menu-content-transform-origin)',
+          'overflow-x-hidden overflow-y-auto rounded-[8px] border border-border bg-popover p-1 text-popover-foreground shadow-floating',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        'relative flex cursor-default items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12.5px] outline-hidden select-none transition-colors',
+        'focus:bg-foreground focus:text-background',
+        'data-[active=true]:bg-muted data-[active=true]:text-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[inset]:pl-8',
+        'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive data-[variant=destructive]:focus:text-white',
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-current [&_svg]:opacity-80",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        'relative flex cursor-default items-center gap-2 rounded-[5px] py-1.5 pr-2 pl-8 text-[12.5px] outline-hidden select-none focus:bg-foreground focus:text-background data-[disabled]:pointer-events-none data-[disabled]:opacity-45',
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-3.5" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        'relative flex cursor-default items-center gap-2 rounded-[5px] py-1.5 pr-2 pl-8 text-[12.5px] outline-hidden select-none focus:bg-foreground focus:text-background data-[disabled]:pointer-events-none data-[disabled]:opacity-45',
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn('eyebrow px-2 py-1.5 data-[inset]:pl-8', className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('-mx-1 my-1 h-px bg-hairline', className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        'ml-auto font-mono text-[10.5px] tracking-[0.06em] text-muted-foreground/80',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

package/src/app/lib/inspector/use-notes.ts

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export type NoteSaveStatus =
+  | { kind: 'idle' }
+  | { kind: 'saving' }
+  | { kind: 'saved' }
+  | { kind: 'error'; message: string };
+
+const DEBOUNCE_MS = 600;
+
+type Target = { slideId: string; index: number };
+
+// HMR is suppressed for our writes, so the cached slide module's `notes`
+// stays stale across navigation. Cache last-saved text per target so
+// switching slides and back doesn't surface the old value.
+const sessionCache = new Map<string, string>();
+const cacheKey = (slideId: string, index: number) => `${slideId}:${index}`;
+
+// Remap the per-target cache after a reorder. `order[i]` is the original
+// page index that lands at new position `i`, matching the contract used by
+// the `/__slides/:id/reorder` endpoint.
+export function remapNotesSessionCacheAfterReorder(slideId: string, order: number[]): void {
+  const prev = new Map<number, string>();
+  for (let i = 0; i < order.length; i++) {
+    const cached = sessionCache.get(cacheKey(slideId, i));
+    if (cached !== undefined) prev.set(i, cached);
+    sessionCache.delete(cacheKey(slideId, i));
+  }
+  for (let newIdx = 0; newIdx < order.length; newIdx++) {
+    const oldIdx = order[newIdx];
+    const text = prev.get(oldIdx);
+    if (text !== undefined) sessionCache.set(cacheKey(slideId, newIdx), text);
+  }
+}
+
+export function useNotes(slideId: string, index: number, initial: string | undefined) {
+  const initialText = sessionCache.get(cacheKey(slideId, index)) ?? initial ?? '';
+  const [value, setValueState] = useState(initialText);
+  const [status, setStatus] = useState<NoteSaveStatus>({ kind: 'idle' });
+
+  const lastSavedRef = useRef(initialText);
+  const dirtyRef = useRef(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const inflightRef = useRef<AbortController | null>(null);
+  const targetRef = useRef<Target>({ slideId, index });
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const cancelTimer = useCallback(() => {
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const persist = useCallback(async (target: Target, text: string) => {
+    inflightRef.current?.abort();
+    const ctl = new AbortController();
+    inflightRef.current = ctl;
+    setStatus({ kind: 'saving' });
+    try {
+      const res = await fetch('/__notes', {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ slideId: target.slideId, index: target.index, text }),
+        signal: ctl.signal,
+      });
+      const body = (await res.json().catch(() => ({}))) as { error?: string };
+      if (!res.ok) throw new Error(body.error ?? `PUT /__notes → ${res.status}`);
+      sessionCache.set(cacheKey(target.slideId, target.index), text);
+      if (inflightRef.current !== ctl) return;
+      lastSavedRef.current = text;
+      dirtyRef.current = false;
+      setStatus({ kind: 'saved' });
+    } catch (err) {
+      if ((err as { name?: string }).name === 'AbortError') return;
+      setStatus({ kind: 'error', message: String((err as Error).message ?? err) });
+    } finally {
+      if (inflightRef.current === ctl) inflightRef.current = null;
+    }
+  }, []);
+
+  const flush = useCallback(async () => {
+    cancelTimer();
+    if (!dirtyRef.current) return;
+    const target = targetRef.current;
+    await persist(target, valueRef.current);
+  }, [cancelTimer, persist]);
+
+  // When the (slideId, index) target changes, flush pending edits for the
+  // previous target before adopting the new initial text.
+  useEffect(() => {
+    const prev = targetRef.current;
+    const targetChanged = prev.slideId !== slideId || prev.index !== index;
+    if (targetChanged && dirtyRef.current) {
+      cancelTimer();
+      const pending = valueRef.current;
+      if (lastSavedRef.current !== pending) void persist(prev, pending);
+    }
+    targetRef.current = { slideId, index };
+    cancelTimer();
+    setValueState(initialText);
+    lastSavedRef.current = initialText;
+    dirtyRef.current = false;
+    setStatus({ kind: 'idle' });
+  }, [slideId, index, initialText, persist, cancelTimer]);
+
+  useEffect(() => {
+    return () => {
+      cancelTimer();
+      inflightRef.current?.abort();
+    };
+  }, [cancelTimer]);
+
+  const setValue = useCallback(
+    (next: string) => {
+      setValueState(next);
+      dirtyRef.current = next !== lastSavedRef.current;
+      cancelTimer();
+      if (!dirtyRef.current) {
+        setStatus({ kind: 'idle' });
+        return;
+      }
+      const target = targetRef.current;
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        void persist(target, next);
+      }, DEBOUNCE_MS);
+    },
+    [persist, cancelTimer],
+  );
+
+  return { value, setValue, status, flush };
+}