@open-slide/core 1.6.0 → 1.8.0

package/src/app/routes/home-shell.tsx

@@ -39,6 +39,7 @@ export function HomeShell() {
     create,
     update,
     remove,
+    reorder,
     assign,
     renameSlide,
     duplicateSlide,
@@ -147,6 +148,13 @@ export function HomeShell() {
           }}
           onDropToFolder={(folderId, slideId) => moveSlideWithToast(slideId, folderId)}
           onDropToDraft={(slideId) => moveSlideWithToast(slideId, null)}
+          onReorder={async (ids) => {
+            try {
+              await reorder(ids);
+            } catch {
+              toast.error(t.home.toastFolderReorderFailed);
+            }
+          }}
         />
       </div>
 

package/src/app/routes/home.tsx

@@ -242,7 +242,7 @@ function SortControl({ value, onChange }: { value: SortKey; onChange: (next: Sor
         <button
           type="button"
           aria-label={`${t.home.sortLabel}: ${labels[value]}`}
-          className="flex h-8 items-center gap-1.5 rounded-[6px] border border-border bg-background pl-2 pr-1.5 text-[12.5px] font-medium text-foreground outline-none hover:bg-muted focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30"
+          className="flex h-8 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-[6px] border border-border bg-background pl-2 pr-1.5 text-[12.5px] font-medium text-foreground outline-none hover:bg-muted focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30"
         >
           <FieldIcon k={value} className="size-3.5 text-muted-foreground" />
           <span>{labels[value]}</span>

package/src/app/routes/slide.tsx

@@ -10,7 +10,6 @@ import {
   Loader2,
   Maximize,
   MonitorSpeaker,
-  Pencil,
   Play,
 } from 'lucide-react';
 import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -40,20 +39,22 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useFolders } from '@/lib/folders';
 import { useAgentSocketConnected } from '@/lib/use-agent-socket';
+import { useClickPageNavigation } from '@/lib/use-click-page-navigation';
+import { useIsMobile } from '@/lib/use-is-mobile';
 import { format, useLocale } from '@/lib/use-locale';
 import { useWheelPageNavigation } from '@/lib/use-wheel-page-navigation';
 import { cn } from '@/lib/utils';
-import { ClickNavZones } from '../components/click-nav-zones';
 import { NotesDrawer } from '../components/notes-drawer';
 import { PdfProgressToast } from '../components/pdf-progress-toast';
 import { openPresenterWindow, Player } from '../components/player';
 import { SlideCanvas } from '../components/slide-canvas';
+import { SlideTransitionLayer } from '../components/slide-transition-layer';
 import { type ThumbnailActions, ThumbnailRail } from '../components/thumbnail-rail';
 import { exportSlideAsHtml } from '../lib/export-html';
 import { exportSlideAsPdf, isSafari } from '../lib/export-pdf';
 import { remapNotesSessionCacheAfterReorder } from '../lib/inspector/use-notes';
-import { SlidePageProvider } from '../lib/page-context';
 import type { SlideModule } from '../lib/sdk';
+import { usePrefersReducedMotion } from '../lib/use-prefers-reduced-motion';
 import { useSlideModule } from '../lib/use-slide-module';
 
 const { showSlideUi, showSlideBrowser, allowHtmlDownload } = config.build;
@@ -76,6 +77,7 @@ export function Slide() {
   const { renameSlide } = useFolders();
   const slideViewportRef = useRef<HTMLElement>(null);
   const t = useLocale();
+  const prefersReducedMotion = usePrefersReducedMotion();
 
   const modulePages = useMemo(() => slide?.default ?? [], [slide]);
   const [pages, setPages] = useState<typeof modulePages>(modulePages);
@@ -237,6 +239,8 @@ export function Slide() {
         goTo(index - 1);
       } else if (e.key === 'f' || e.key === 'F') {
         setPlayMode('fullscreen');
+      } else if (import.meta.env.DEV && (e.key === 'd' || e.key === 'D')) {
+        setDesignOpen((v) => !v);
       }
     };
     window.addEventListener('keydown', onKey);
@@ -325,6 +329,7 @@ export function Slide() {
       <Player
         pages={pages}
         design={slide.design}
+        transition={slide.transition}
         index={index}
         onIndexChange={goTo}
         onExit={() => setPlayMode(null)}
@@ -335,17 +340,16 @@ export function Slide() {
     );
   }
 
-  const CurrentPage = pages[index];
   const title = slide.meta?.title ?? slideId;
 
   return (
     <HistoryProvider>
-      <InspectorProvider slideId={slideId}>
+      <InspectorProvider slideId={slideId} pageIndex={index}>
         <SelectionReporter />
         <div className="flex h-dvh flex-col overflow-hidden bg-background text-foreground">
           {/* Editorial toolbar — three zones, hairline separators, mono-folio center */}
-          <header className="relative flex h-12 shrink-0 items-center justify-between border-b border-hairline bg-sidebar/85 px-2 backdrop-blur-md md:px-3">
-            <div className="flex items-center gap-1.5 md:gap-2">
+          <header className="relative flex h-12 shrink-0 items-center gap-2 border-b border-hairline bg-sidebar/85 px-2 backdrop-blur-md md:px-3">
+            <div className="flex shrink-0 items-center gap-1.5 md:gap-2">
               {showSlideBrowser && (
                 <Button asChild variant="ghost" size="icon-sm" title={t.slide.home}>
                   <Link to="/" aria-label={t.slide.backToHome}>
@@ -378,14 +382,14 @@ export function Slide() {
               {import.meta.env.DEV && <AgentConnectedBadge />}
             </div>
 
-            {/* Centered title — the rail and mobile pill carry the page count. */}
-            <div className="pointer-events-none absolute inset-x-0 top-1/2 flex -translate-y-1/2 justify-center px-2">
-              <div className="pointer-events-auto min-w-0 max-w-[min(34rem,calc(100vw-22rem))]">
+            {/* Title centered to the viewport, not the leftover space between the side groups. */}
+            <div className="pointer-events-none absolute inset-x-0 flex justify-center px-2">
+              <div className="pointer-events-auto min-w-0 max-w-[34rem]">
                 <InlineTitleEditor title={title} onSubmit={(next) => renameSlide(slideId, next)} />
               </div>
             </div>
 
-            <div className="flex items-center gap-1">
+            <div className="ml-auto flex shrink-0 items-center gap-1">
               {view === 'slides' && (
                 <button
                   type="button"
@@ -577,7 +581,7 @@ export function Slide() {
                     data-slide-id={slideId}
                     className="paper relative min-h-0 min-w-0 flex-1 bg-canvas p-2 md:p-10"
                   >
-                    <SlideWheelNavigation
+                    <SlideViewportNavigation
                       targetRef={slideViewportRef}
                       onPrev={() => goTo(index - 1)}
                       onNext={() => goTo(index + 1)}
@@ -585,16 +589,14 @@ export function Slide() {
                       canNext={index < pageCount - 1}
                     />
                     <SlideCanvas design={slide.design}>
-                      <SlidePageProvider index={index} total={pageCount}>
-                        <CurrentPage />
-                      </SlidePageProvider>
+                      <SlideTransitionLayer
+                        pages={pages}
+                        index={index}
+                        total={pageCount}
+                        moduleTransition={slide.transition}
+                        disabled={prefersReducedMotion}
+                      />
                     </SlideCanvas>
-                    <ClickNavZones
-                      onPrev={() => goTo(index - 1)}
-                      onNext={() => goTo(index + 1)}
-                      canPrev={index > 0}
-                      canNext={index < pageCount - 1}
-                    />
                     <InspectOverlay />
                     <SaveBar />
                     {import.meta.env.DEV && <CommentWidget />}
@@ -806,7 +808,7 @@ function SelectionReporter() {
   return null;
 }
 
-function SlideWheelNavigation({
+function SlideViewportNavigation({
   targetRef,
   onPrev,
   onNext,
@@ -820,6 +822,7 @@ function SlideWheelNavigation({
   canNext: boolean;
 }) {
   const { active } = useInspector();
+  const isMobile = useIsMobile();
 
   useWheelPageNavigation({
     ref: targetRef,
@@ -830,6 +833,19 @@ function SlideWheelNavigation({
     onNext,
   });
 
+  // Tap-to-navigate is a touch affordance — desktop has visible prev/next
+  // chrome, so it stays edge-only on small screens (matches the old md:hidden
+  // zones). Interactive slide content keeps its tap via the hook's passthrough.
+  useClickPageNavigation({
+    ref: targetRef,
+    enabled: isMobile && !active,
+    edgeRatio: 0.18,
+    canPrev,
+    canNext,
+    onPrev,
+    onNext,
+  });
+
   return null;
 }
 
@@ -882,49 +898,65 @@ function InlineTitleEditor({
 
   if (editing) {
     return (
-      <div className="flex flex-1 items-center justify-center">
-        <input
-          ref={inputRef}
-          value={value}
-          disabled={saving}
-          onChange={(e) => setValue(e.target.value)}
-          onBlur={() => {
-            if (!saving) commit();
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              commit();
-            } else if (e.key === 'Escape') {
-              e.preventDefault();
-              cancel();
-            }
-          }}
-          maxLength={80}
-          className="min-w-0 max-w-[min(34rem,90%)] rounded-[5px] border border-foreground/30 bg-card px-2 py-0.5 text-center font-heading text-[13px] font-medium tracking-tight outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
-        />
+      <div className="flex min-w-0 flex-1 items-center justify-center">
+        <div className="inline-grid max-w-full items-center">
+          <span
+            aria-hidden
+            className="invisible col-start-1 row-start-1 overflow-hidden whitespace-pre border border-transparent px-2 py-0.5 font-heading text-[13.5px] font-semibold tracking-[-0.01em]"
+          >
+            {value || ' '}
+          </span>
+          <input
+            ref={inputRef}
+            size={1}
+            value={value}
+            disabled={saving}
+            onChange={(e) => setValue(e.target.value)}
+            onBlur={() => {
+              if (!saving) commit();
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                commit();
+              } else if (e.key === 'Escape') {
+                e.preventDefault();
+                cancel();
+              }
+            }}
+            maxLength={80}
+            className="col-start-1 row-start-1 w-full min-w-0 rounded-[5px] border border-foreground/30 bg-card px-2 py-0.5 text-center font-heading text-[13.5px] font-semibold tracking-[-0.01em] outline-none"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (!import.meta.env.DEV) {
+    return (
+      <div className="flex min-w-0 items-baseline justify-center">
+        <h1 className="truncate font-heading text-[13.5px] font-semibold tracking-[-0.01em]">
+          {title}
+        </h1>
       </div>
     );
   }
 
   return (
-    <div className="group/title flex min-w-0 items-baseline justify-center gap-1.5">
-      <h1 className="truncate font-heading text-[13.5px] font-semibold tracking-[-0.01em]">
-        {title}
-      </h1>
-      {import.meta.env.DEV && (
-        <button
-          type="button"
-          onClick={() => setEditing(true)}
-          aria-label={t.slide.renameSlide}
-          className={cn(
-            'flex size-5 shrink-0 items-center justify-center rounded-[4px] text-muted-foreground transition-opacity hover:bg-muted hover:text-foreground',
-            'opacity-0 group-hover/title:opacity-100 focus-visible:opacity-100',
-          )}
-        >
-          <Pencil className="size-3" />
-        </button>
-      )}
+    <div className="flex min-w-0 items-center justify-center">
+      <button
+        type="button"
+        onClick={() => setEditing(true)}
+        aria-label={t.slide.renameSlide}
+        className={cn(
+          'min-w-0 max-w-full cursor-text rounded-[5px] border border-transparent px-2 py-0.5 transition-colors',
+          'hover:border-foreground/30 hover:bg-card focus-visible:border-foreground/30 focus-visible:bg-card focus-visible:outline-none',
+        )}
+      >
+        <h1 className="truncate font-heading text-[13.5px] font-semibold tracking-[-0.01em]">
+          {title}
+        </h1>
+      </button>
     </div>
   );
 }

package/src/locale/en.ts

@@ -86,6 +86,7 @@ export const en: Locale = {
     toastSlideMoveFailed: 'Failed to move slide',
     toastFolderDeleted: 'Deleted folder “{name}”',
     toastFolderDeleteFailed: 'Failed to delete folder',
+    toastFolderReorderFailed: 'Failed to reorder folders',
     pickIcon: 'Pick icon',
   },
 
@@ -352,11 +353,6 @@ export const en: Locale = {
     system: 'System',
   },
 
-  clickNav: {
-    prevAria: 'Previous page',
-    nextAria: 'Next page',
-  },
-
   imagePlaceholder: {
     dropOverlay: 'Drop image to use here',
     uploading: 'Uploading…',

package/src/locale/ja.ts

@@ -86,6 +86,7 @@ export const ja: Locale = {
     toastSlideMoveFailed: 'スライドの移動に失敗しました',
     toastFolderDeleted: 'フォルダ「{name}」を削除しました',
     toastFolderDeleteFailed: 'フォルダの削除に失敗しました',
+    toastFolderReorderFailed: 'フォルダの並び替えに失敗しました',
     pickIcon: 'アイコンを選択',
   },
 
@@ -356,11 +357,6 @@ export const ja: Locale = {
     system: 'システム',
   },
 
-  clickNav: {
-    prevAria: '前のページ',
-    nextAria: '次のページ',
-  },
-
   imagePlaceholder: {
     dropOverlay: 'ここにドロップして使用',
     uploading: 'アップロード中…',

package/src/locale/types.ts

@@ -90,6 +90,7 @@ export type Locale = {
     /** template: "Deleted folder “{name}”" */
     toastFolderDeleted: string;
     toastFolderDeleteFailed: string;
+    toastFolderReorderFailed: string;
     pickIcon: string;
   };
 
@@ -375,11 +376,6 @@ export type Locale = {
     system: string;
   };
 
-  clickNav: {
-    prevAria: string;
-    nextAria: string;
-  };
-
   imagePlaceholder: {
     dropOverlay: string;
     uploading: string;

package/src/locale/zh-cn.ts

@@ -86,6 +86,7 @@ export const zhCN: Locale = {
     toastSlideMoveFailed: '移动幻灯片失败',
     toastFolderDeleted: '已删除文件夹"{name}"',
     toastFolderDeleteFailed: '删除文件夹失败',
+    toastFolderReorderFailed: '文件夹排序失败',
     pickIcon: '选择图标',
   },
 
@@ -351,11 +352,6 @@ export const zhCN: Locale = {
     system: '系统',
   },
 
-  clickNav: {
-    prevAria: '上一页',
-    nextAria: '下一页',
-  },
-
   imagePlaceholder: {
     dropOverlay: '拖入图片以使用',
     uploading: '上传中…',

package/src/locale/zh-tw.ts

@@ -86,6 +86,7 @@ export const zhTW: Locale = {
     toastSlideMoveFailed: '移動投影片失敗',
     toastFolderDeleted: '已刪除資料夾「{name}」',
     toastFolderDeleteFailed: '刪除資料夾失敗',
+    toastFolderReorderFailed: '資料夾排序失敗',
     pickIcon: '選擇圖示',
   },
 
@@ -351,11 +352,6 @@ export const zhTW: Locale = {
     system: '系統',
   },
 
-  clickNav: {
-    prevAria: '上一頁',
-    nextAria: '下一頁',
-  },
-
   imagePlaceholder: {
     dropOverlay: '拖入圖片以使用',
     uploading: '上傳中…',

package/src/app/components/click-nav-zones.tsx

@@ -1,36 +0,0 @@
-import { useLocale } from '@/lib/use-locale';
-import { useInspector } from './inspector/inspector-provider';
-
-type Props = {
-  onPrev: () => void;
-  onNext: () => void;
-  canPrev: boolean;
-  canNext: boolean;
-};
-
-export function ClickNavZones({ onPrev, onNext, canPrev, canNext }: Props) {
-  const { active } = useInspector();
-  const t = useLocale();
-  if (active) return null;
-
-  return (
-    <>
-      <button
-        type="button"
-        aria-label={t.clickNav.prevAria}
-        onClick={onPrev}
-        disabled={!canPrev}
-        data-inspector-ui
-        className="absolute inset-y-0 left-0 z-20 w-[18%] min-w-12 md:hidden"
-      />
-      <button
-        type="button"
-        aria-label={t.clickNav.nextAria}
-        onClick={onNext}
-        disabled={!canNext}
-        data-inspector-ui
-        className="absolute inset-y-0 right-0 z-20 w-[18%] min-w-12 md:hidden"
-      />
-    </>
-  );
-}