@open-slide/core 1.0.6 → 1.2.0

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

@@ -1,4 +1,29 @@
-import { useEffect, useRef } from 'react';
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  type DragStartEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+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';
@@ -9,11 +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;
 };
 
@@ -25,6 +57,8 @@ export function ThumbnailRail({
   design,
   current,
   onSelect,
+  onReorder,
+  actions,
   orientation = 'vertical',
 }: Props) {
   const activeRef = useRef<HTMLButtonElement | null>(null);
@@ -50,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}
@@ -84,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>
@@ -93,61 +140,276 @@ export function ThumbnailRail({
 
   const scale = VERTICAL_THUMB_WIDTH / CANVAS_WIDTH;
   const height = CANVAS_HEIGHT * scale;
+
+  const renderThumb = (PageComp: Page, i: number) => {
+    const active = i === current;
+    const inner = (
+      <ThumbContents
+        index={i}
+        active={active}
+        page={PageComp}
+        design={design}
+        scale={scale}
+        height={height}
+      />
+    );
+
+    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
+        type="button"
+        ref={active ? activeRef : undefined}
+        onClick={() => onSelect(i)}
+        aria-label={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
+        aria-current={active ? 'true' : undefined}
+        className={thumbButtonClass(active)}
+      >
+        {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 = (
+    <aside className="flex flex-col gap-2 px-3 py-3">
+      <div className="flex items-baseline justify-between px-1 pb-1">
+        <span className="eyebrow">{t.thumbnailRail.pages}</span>
+        <span className="folio">{pages.length.toString().padStart(2, '0')}</span>
+      </div>
+      {pages.map(renderThumb)}
+    </aside>
+  );
+
+  if (!onReorder) {
+    return <ScrollArea className="h-full border-r border-hairline bg-sidebar">{list}</ScrollArea>;
+  }
+
   return (
     <ScrollArea className="h-full border-r border-hairline bg-sidebar">
-      <aside className="flex flex-col gap-2 px-3 py-3">
-        <div className="flex items-baseline justify-between px-1 pb-1">
-          <span className="eyebrow">{t.thumbnailRail.pages}</span>
-          <span className="folio">{pages.length.toString().padStart(2, '0')}</span>
-        </div>
-        {pages.map((PageComp, i) => {
-          const active = i === current;
-          return (
-            <button
-              // biome-ignore lint/suspicious/noArrayIndexKey: pages list is render-stable
-              key={i}
-              type="button"
-              ref={active ? activeRef : undefined}
-              onClick={() => onSelect(i)}
-              aria-label={`Go to page ${i + 1}`}
-              aria-current={active ? 'true' : undefined}
-              className={cn(
-                'group/thumb flex items-start gap-2.5 rounded-[6px] p-1.5 text-left motion-safe:transition-colors',
-                'hover:bg-muted/60',
-                active && 'bg-muted',
-              )}
-            >
-              <span
-                className={cn(
-                  'mt-1.5 w-7 shrink-0 text-right font-mono text-[10px] font-medium tracking-[0.06em] tabular-nums uppercase',
-                  active ? 'text-brand' : 'text-muted-foreground/70',
-                )}
-              >
-                {(i + 1).toString().padStart(2, '0')}
-              </span>
-              <div
-                className={cn(
-                  'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
-                  active
-                    ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
-                    : 'border-hairline group-hover/thumb:border-foreground/25',
-                )}
-                style={{ width: VERTICAL_THUMB_WIDTH, height }}
-              >
-                <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
-                  <PageComp />
-                </SlideCanvas>
-                {active && (
-                  <span
-                    aria-hidden
-                    className="pointer-events-none absolute inset-y-0 left-0 w-[2px] bg-brand"
-                  />
-                )}
-              </div>
-            </button>
-          );
-        })}
-      </aside>
+      <SortableRail pages={pages} onReorder={onReorder} onSelect={onSelect}>
+        {list}
+      </SortableRail>
     </ScrollArea>
   );
 }
+
+function thumbButtonClass(active: boolean): string {
+  return cn(
+    'group/thumb flex w-full items-start gap-2.5 rounded-[6px] p-1.5 text-left motion-safe:transition-colors',
+    'hover:bg-muted/60',
+    active && 'bg-muted',
+  );
+}
+
+function ThumbContents({
+  index,
+  active,
+  page: PageComp,
+  design,
+  scale,
+  height,
+}: {
+  index: number;
+  active: boolean;
+  page: Page;
+  design?: DesignSystem;
+  scale: number;
+  height: number;
+}) {
+  return (
+    <>
+      <span
+        className={cn(
+          'mt-1.5 w-7 shrink-0 text-right font-mono text-[10px] font-medium tracking-[0.06em] tabular-nums uppercase',
+          active ? 'text-brand' : 'text-muted-foreground/70',
+        )}
+      >
+        {(index + 1).toString().padStart(2, '0')}
+      </span>
+      <div
+        className={cn(
+          'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
+          active
+            ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
+            : 'border-hairline group-hover/thumb:border-foreground/25',
+        )}
+        style={{ width: VERTICAL_THUMB_WIDTH, height }}
+      >
+        <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
+          <PageComp />
+        </SlideCanvas>
+        {active && (
+          <span
+            aria-hidden
+            className="pointer-events-none absolute inset-y-0 left-0 w-[2px] bg-brand"
+          />
+        )}
+      </div>
+    </>
+  );
+}
+
+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(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  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;
+    const from = (active.id as number) - 1;
+    const to = (over.id as number) - 1;
+    if (from < 0 || to < 0 || from === to) return;
+    onReorder(from, to);
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        {children}
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+function SortableThumb({
+  index,
+  active,
+  activeRef,
+  onSelect,
+  ariaLabel,
+  children,
+  ...rest
+}: {
+  index: number;
+  active: boolean;
+  activeRef: React.MutableRefObject<HTMLButtonElement | null> | undefined;
+  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,
+  });
+
+  const setRef = (node: HTMLButtonElement | null) => {
+    setNodeRef(node);
+    if (activeRef) activeRef.current = node;
+  };
+
+  const yOnlyTransform = transform ? { ...transform, x: 0 } : transform;
+
+  return (
+    <button
+      {...rest}
+      ref={setRef}
+      type="button"
+      onClick={onSelect}
+      aria-label={ariaLabel}
+      aria-current={active ? 'true' : undefined}
+      style={{
+        transform: CSS.Transform.toString(yOnlyTransform),
+        transition,
+        touchAction: 'none',
+      }}
+      className={cn(
+        thumbButtonClass(active),
+        isDragging && 'z-10 cursor-grabbing opacity-60 shadow-edge ring-1 ring-brand',
+      )}
+      {...attributes}
+      {...listeners}
+    >
+      {children}
+    </button>
+  );
+}

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,
+};