@open-slide/core 1.1.0 → 1.3.0

package/src/app/components/themes/themes-gallery.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useState } from 'react';
+import { format, useLocale } from '@/lib/use-locale';
+import { loadThemeDemo, type Theme, type ThemeDemoModule, themes } from '../../lib/themes';
+import { SlideCanvas } from '../slide-canvas';
+
+export function ThemesGallery({ onOpen }: { onOpen: (id: string) => void }) {
+  const t = useLocale();
+
+  if (themes.length === 0) {
+    return <ThemesEmptyState />;
+  }
+
+  return (
+    <ul className="grid grid-cols-[repeat(auto-fill,minmax(min(240px,100%),1fr))] gap-x-6 gap-y-9 md:grid-cols-[repeat(auto-fill,minmax(340px,1fr))]">
+      {themes.map((theme) => (
+        <li key={theme.id}>
+          <ThemeCard
+            theme={theme}
+            onOpen={() => onOpen(theme.id)}
+            ariaLabel={format(t.themes.openThemeAria, { name: theme.name })}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function ThemeCard({
+  theme,
+  onOpen,
+  ariaLabel,
+}: {
+  theme: Theme;
+  onOpen: () => void;
+  ariaLabel: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      aria-label={ariaLabel}
+      className="group block w-full text-left focus-visible:outline-none"
+    >
+      <div className="relative aspect-video overflow-hidden rounded-[6px] border border-hairline bg-card shadow-edge ring-1 ring-foreground/[0.04] group-hover:shadow-floating group-hover:ring-foreground/20 motion-safe:transition-[box-shadow,--tw-ring-color] motion-safe:duration-200">
+        <ThemePreview theme={theme} />
+      </div>
+      <div className="mt-3">
+        <h3 className="min-w-0 truncate font-heading text-[14px] font-medium tracking-tight">
+          {theme.name}
+        </h3>
+      </div>
+      {theme.description ? (
+        <p className="mt-1 line-clamp-2 text-[12px] leading-snug text-muted-foreground">
+          {theme.description}
+        </p>
+      ) : null}
+    </button>
+  );
+}
+
+function ThemePreview({ theme }: { theme: Theme }) {
+  const t = useLocale();
+  const demo = useThemeDemo(theme);
+
+  if (!theme.hasDemo) {
+    return <NoDemoState />;
+  }
+  if (!demo) {
+    return (
+      <div className="grid h-full w-full place-items-center text-[10px] tracking-[0.16em] uppercase text-muted-foreground/60">
+        {t.common.loading}
+      </div>
+    );
+  }
+  const FirstPage = demo.default[0];
+  if (!FirstPage) return <NoDemoState />;
+
+  return (
+    <div className="h-full w-full motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]">
+      <SlideCanvas flat freezeMotion design={demo.design}>
+        <FirstPage />
+      </SlideCanvas>
+    </div>
+  );
+}
+
+function NoDemoState() {
+  const t = useLocale();
+  return (
+    <div className="grid h-full w-full place-items-center bg-muted/40 px-6 text-center">
+      <div>
+        <p className="font-heading text-[12px] font-semibold tracking-tight text-foreground/80">
+          {t.themes.noDemoYet}
+        </p>
+        <p className="mt-1 text-[10.5px] leading-snug text-muted-foreground">
+          {t.themes.noDemoHintPrefix}
+          <code className="rounded-[3px] bg-card px-1 py-0.5 font-mono text-[10px] text-foreground">
+            /create-theme
+          </code>
+          {t.themes.noDemoHintSuffix}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function ThemesEmptyState() {
+  const t = useLocale();
+  return (
+    <div className="rounded-[10px] border border-dashed border-border bg-card/60 px-8 py-20">
+      <div className="mx-auto flex max-w-md flex-col items-center text-center">
+        <div className="text-2xl">🎨</div>
+        <p className="mt-3 font-heading text-[15px] font-semibold tracking-tight">
+          {t.themes.noThemesTitle}
+        </p>
+        <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
+          {t.themes.noThemesHintPrefix}
+          <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
+            /create-theme
+          </code>
+          {t.themes.noThemesHintSuffix}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function useThemeDemo(theme: Theme): ThemeDemoModule | null {
+  const [demo, setDemo] = useState<ThemeDemoModule | null>(null);
+  useEffect(() => {
+    if (!theme.hasDemo) {
+      setDemo(null);
+      return;
+    }
+    let cancelled = false;
+    loadThemeDemo(theme.id)
+      .then((mod) => {
+        if (!cancelled) setDemo(mod);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [theme.id, theme.hasDemo]);
+  return demo;
+}

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,16 +34,26 @@ 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;
+  /** Vertical-only: total rail width in px. Thumbnails scale to fit. */
+  width?: number;
 };
 
-const VERTICAL_THUMB_WIDTH = 184;
+const DEFAULT_VERTICAL_THUMB_WIDTH = 184;
+const VERTICAL_RAIL_CHROME = 80;
+const MIN_VERTICAL_THUMB_WIDTH = 120;
 const HORIZONTAL_THUMB_HEIGHT = 64;
 
 export function ThumbnailRail({
@@ -43,7 +62,9 @@ export function ThumbnailRail({
   current,
   onSelect,
   onReorder,
+  actions,
   orientation = 'vertical',
+  width,
 }: Props) {
   const activeRef = useRef<HTMLButtonElement | null>(null);
   const t = useLocale();
@@ -68,7 +89,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}
@@ -89,7 +110,7 @@ export function ThumbnailRail({
                   </span>
                   <div
                     className={cn(
-                      'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
+                      'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-[border-color,box-shadow]',
                       active
                         ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
                         : 'border-hairline group-hover/thumb:border-foreground/25',
@@ -102,6 +123,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>
@@ -109,7 +143,11 @@ export function ThumbnailRail({
     );
   }
 
-  const scale = VERTICAL_THUMB_WIDTH / CANVAS_WIDTH;
+  const thumbWidth =
+    width != null
+      ? Math.max(MIN_VERTICAL_THUMB_WIDTH, width - VERTICAL_RAIL_CHROME)
+      : DEFAULT_VERTICAL_THUMB_WIDTH;
+  const scale = thumbWidth / CANVAS_WIDTH;
   const height = CANVAS_HEIGHT * scale;
 
   const renderThumb = (PageComp: Page, i: number) => {
@@ -121,28 +159,23 @@ export function ThumbnailRail({
         page={PageComp}
         design={design}
         scale={scale}
+        thumbWidth={thumbWidth}
         height={height}
       />
     );
 
-    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 +186,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 +219,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>
@@ -192,6 +240,7 @@ function ThumbContents({
   page: PageComp,
   design,
   scale,
+  thumbWidth,
   height,
 }: {
   index: number;
@@ -199,6 +248,7 @@ function ThumbContents({
   page: Page;
   design?: DesignSystem;
   scale: number;
+  thumbWidth: number;
   height: number;
 }) {
   return (
@@ -213,12 +263,12 @@ function ThumbContents({
       </span>
       <div
         className={cn(
-          'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
+          'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-[border-color,box-shadow]',
           active
             ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
             : 'border-hairline group-hover/thumb:border-foreground/25',
         )}
-        style={{ width: VERTICAL_THUMB_WIDTH, height }}
+        style={{ width: thumbWidth, height }}
       >
         <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
           <PageComp />
@@ -234,13 +284,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 +343,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 +358,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 +378,7 @@ function SortableThumb({
   onSelect,
   ariaLabel,
   children,
+  ...rest
 }: {
   index: number;
   active: boolean;
@@ -282,7 +386,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 +403,7 @@ function SortableThumb({
 
   return (
     <button
+      {...rest}
       ref={setRef}
       type="button"
       onClick={onSelect}
@@ -308,8 +416,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}