@open-slide/core 1.7.0 → 1.8.0

package/dist/{build-tLrkKUHr.js → build-CCZDC8eF.js}

@@ -1,5 +1,5 @@
 import "./design-cpzS8aud.js";
-import { createViteConfig } from "./config-PwUHqZ_X.js";
+import { createViteConfig } from "./config-C7sZtiY2.js";
 import path from "node:path";
 import { build as build$1, mergeConfig } from "vite";
 

package/dist/cli/bin.js

@@ -57,15 +57,15 @@ async function run(argv) {
 	program.name("open-slide").description("Author slides — we handle the Vite/React stack.").version(version, "-v, --version", "print version").helpOption("-h, --help", "show help").showHelpAfterError(chalk.dim("(run `open-slide --help` for usage)"));
 	program.command("dev").description("Start the dev server").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").option("--no-skills-check", "skip the built-in skills drift check").action(async (flags) => {
 		if (flags.skillsCheck !== false) await runSkillsDriftCheck(resolveBuiltinSkillsDir());
-		const { dev } = await import("../dev-DpCIRbhT.js");
+		const { dev } = await import("../dev-kLS_4CAI.js");
 		await dev(flags);
 	});
 	program.command("build").description("Build a static site").option("--out-dir <dir>", "output directory (defaults to `dist`)").action(async (flags) => {
-		const { build } = await import("../build-tLrkKUHr.js");
+		const { build } = await import("../build-CCZDC8eF.js");
 		await build(flags);
 	});
 	program.command("preview").description("Preview the production build").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").action(async (flags) => {
-		const { preview } = await import("../preview-BSGlM6Se.js");
+		const { preview } = await import("../preview-DUkOjOx8.js");
 		await preview(flags);
 	});
 	program.command("sync:skills").description("Sync built-in skills from @open-slide/core into this workspace").option("--dry-run", "show what would change without writing").action(async (flags) => {

package/dist/{config-PwUHqZ_X.js → config-C7sZtiY2.js}

@@ -1157,21 +1157,20 @@ function findReferencedAssets(source, assetPaths) {
 	if (!ast) return referenced;
 	const wanted = new Set(assetPaths);
 	const identToPath = new Map();
+	const importLocals = new Set();
 	for (const imp of findImports$1(ast)) {
 		if (!imp.defaultIdent) continue;
-		if (wanted.has(imp.source)) identToPath.set(imp.defaultIdent, imp.source);
+		if (!wanted.has(imp.source)) continue;
+		identToPath.set(imp.defaultIdent, imp.source);
+		for (const spec of imp.node.specifiers) if (t$3.isImportDefaultSpecifier(spec) && spec.local.name === imp.defaultIdent) importLocals.add(spec.local);
 	}
 	if (identToPath.size === 0) return referenced;
-	walkJsx(ast, (n) => {
-		if (!t$3.isJSXElement(n)) return;
-		const opening = n.openingElement;
-		if (!t$3.isJSXIdentifier(opening.name) || opening.name.name !== "img") return;
-		const src = findJsxAttr(opening, "src");
-		if (!src?.value || !t$3.isJSXExpressionContainer(src.value)) return;
-		const expr = src.value.expression;
-		if (!t$3.isIdentifier(expr)) return;
-		const p = identToPath.get(expr.name);
-		if (p) referenced.add(p);
+	walkAll(ast, (n) => {
+		if (!t$3.isIdentifier(n)) return;
+		const p = identToPath.get(n.name);
+		if (!p) return;
+		if (importLocals.has(n)) return;
+		referenced.add(p);
 	});
 	return referenced;
 }
@@ -2446,6 +2445,19 @@ function validateName(v) {
 	if (trimmed.length < 1 || trimmed.length > 40) return null;
 	return trimmed;
 }
+function validateReorder(v, current) {
+	if (!Array.isArray(v) || v.length !== current.length) return null;
+	const known = new Set(current.map((f) => f.id));
+	const seen = new Set();
+	const out = [];
+	for (const id of v) {
+		if (typeof id !== "string" || !FOLDER_ID_RE.test(id)) return null;
+		if (!known.has(id) || seen.has(id)) return null;
+		seen.add(id);
+		out.push(id);
+	}
+	return out;
+}
 function validateIcon(v) {
 	if (!v || typeof v !== "object") return null;
 	const icon = v;
@@ -2513,6 +2525,18 @@ function registerFolderRoutes(server, ctx) {
 				await writeManifest(ctx.manifestPath, manifest);
 				return json$2(res, 200, { ok: true });
 			}
+			if (method === "PUT" && url.pathname === "/reorder") {
+				const requestCheck = validateMutationRequest(req, { requireJsonBody: true });
+				if (!requestCheck.ok) return json$2(res, requestCheck.status, { error: requestCheck.error });
+				const body = await readBody$2(req);
+				const manifest = await readManifest(ctx.manifestPath);
+				const ids = validateReorder(body.ids, manifest.folders);
+				if (!ids) return json$2(res, 400, { error: "invalid ids" });
+				const byId = new Map(manifest.folders.map((f) => [f.id, f]));
+				manifest.folders = ids.map((id) => byId.get(id));
+				await writeManifest(ctx.manifestPath, manifest);
+				return json$2(res, 200, { ok: true });
+			}
 			const idMatch = url.pathname.match(/^\/([^/]+)$/);
 			if (idMatch) {
 				const id = idMatch[1];
@@ -3334,19 +3358,22 @@ function injectLocTags(code) {
 	for (const ins of insertions) next = next.slice(0, ins.offset) + ins.text + next.slice(ins.offset);
 	return next;
 }
+function isSlideSourceFile(id, slidesRootPosix) {
+	const filePath = id.split(/[?#]/)[0].replace(/\\/g, "/");
+	if (!filePath.startsWith(`${slidesRootPosix}/`)) return false;
+	if (!filePath.endsWith(".tsx")) return false;
+	if (filePath.endsWith(".d.ts") || filePath.endsWith(".test.tsx")) return false;
+	const rel = filePath.slice(slidesRootPosix.length + 1);
+	return rel.includes("/");
+}
 function locTagsPlugin(opts) {
-	const slidesRoot = path.resolve(opts.userCwd, opts.slidesDir ?? "slides");
+	const slidesRoot = path.resolve(opts.userCwd, opts.slidesDir ?? "slides").replace(/\\/g, "/");
 	return {
 		name: "open-slide:loc-tags",
 		apply: "serve",
 		enforce: "pre",
 		transform(code, id) {
-			const filePath = id.split("?")[0];
-			if (!filePath.startsWith(slidesRoot + path.sep)) return null;
-			if (!filePath.endsWith(".tsx")) return null;
-			if (filePath.endsWith(".d.ts") || filePath.endsWith(".test.tsx")) return null;
-			const rel = filePath.slice(slidesRoot.length + path.sep.length);
-			if (!rel.includes(path.sep)) return null;
+			if (!isSlideSourceFile(id, slidesRoot)) return null;
 			const next = injectLocTags(code);
 			if (next === null) return null;
 			return {

package/dist/{config-CfMThYN9.d.ts → config-D1bANimZ.d.ts}

@@ -1,4 +1,4 @@
-import { Locale } from "./types-B-KrjgX8.js";
+import { Locale } from "./types-Bvk1pM70.js";
 
 //#region src/config.d.ts
 type OpenSlideBuildConfig = {

package/dist/{dev-DpCIRbhT.js → dev-kLS_4CAI.js}

@@ -1,5 +1,5 @@
 import "./design-cpzS8aud.js";
-import { createViteConfig } from "./config-PwUHqZ_X.js";
+import { createViteConfig } from "./config-C7sZtiY2.js";
 import { createServer, mergeConfig } from "vite";
 
 //#region src/cli/dev.ts

package/dist/{en-BDnM5zKJ.js → en-hyGpmL1O.js}

@@ -82,6 +82,7 @@ const en = {
 		toastSlideMoveFailed: "Failed to move slide",
 		toastFolderDeleted: "Deleted folder “{name}”",
 		toastFolderDeleteFailed: "Failed to delete folder",
+		toastFolderReorderFailed: "Failed to reorder folders",
 		pickIcon: "Pick icon"
 	},
 	slide: {
@@ -337,10 +338,6 @@ const en = {
 		dark: "Dark",
 		system: "System"
 	},
-	clickNav: {
-		prevAria: "Previous page",
-		nextAria: "Next page"
-	},
 	imagePlaceholder: {
 		dropOverlay: "Drop image to use here",
 		uploading: "Uploading…",

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Locale, Plural } from "./types-B-KrjgX8.js";
-import { OpenSlideConfig } from "./config-CfMThYN9.js";
+import { Locale, Plural } from "./types-Bvk1pM70.js";
+import { OpenSlideConfig } from "./config-D1bANimZ.js";
 import { CSSProperties, ComponentType, HTMLAttributes } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/index.js

@@ -1,4 +1,4 @@
-import { en } from "./en-BDnM5zKJ.js";
+import { en } from "./en-hyGpmL1O.js";
 import { cssVarsToString, defaultDesign, designToCssVars } from "./design-cpzS8aud.js";
 import { createContext, useContext, useRef, useState } from "react";
 import { toast } from "sonner";

package/dist/locale/index.d.ts

@@ -1,4 +1,4 @@
-import { Locale, Plural } from "../types-B-KrjgX8.js";
+import { Locale, Plural } from "../types-Bvk1pM70.js";
 
 //#region src/locale/en.d.ts
 declare const en: Locale;

package/dist/locale/index.js

@@ -1,4 +1,4 @@
-import { en } from "../en-BDnM5zKJ.js";
+import { en } from "../en-hyGpmL1O.js";
 
 //#region src/locale/format.ts
 function format(template, vars) {
@@ -96,6 +96,7 @@ const ja = {
 		toastSlideMoveFailed: "スライドの移動に失敗しました",
 		toastFolderDeleted: "フォルダ「{name}」を削除しました",
 		toastFolderDeleteFailed: "フォルダの削除に失敗しました",
+		toastFolderReorderFailed: "フォルダの並び替えに失敗しました",
 		pickIcon: "アイコンを選択"
 	},
 	slide: {
@@ -351,10 +352,6 @@ const ja = {
 		dark: "ダーク",
 		system: "システム"
 	},
-	clickNav: {
-		prevAria: "前のページ",
-		nextAria: "次のページ"
-	},
 	imagePlaceholder: {
 		dropOverlay: "ここにドロップして使用",
 		uploading: "アップロード中…",
@@ -473,6 +470,7 @@ const zhCN = {
 		toastSlideMoveFailed: "移动幻灯片失败",
 		toastFolderDeleted: "已删除文件夹\"{name}\"",
 		toastFolderDeleteFailed: "删除文件夹失败",
+		toastFolderReorderFailed: "文件夹排序失败",
 		pickIcon: "选择图标"
 	},
 	slide: {
@@ -728,10 +726,6 @@ const zhCN = {
 		dark: "深色",
 		system: "系统"
 	},
-	clickNav: {
-		prevAria: "上一页",
-		nextAria: "下一页"
-	},
 	imagePlaceholder: {
 		dropOverlay: "拖入图片以使用",
 		uploading: "上传中…",
@@ -850,6 +844,7 @@ const zhTW = {
 		toastSlideMoveFailed: "移動投影片失敗",
 		toastFolderDeleted: "已刪除資料夾「{name}」",
 		toastFolderDeleteFailed: "刪除資料夾失敗",
+		toastFolderReorderFailed: "資料夾排序失敗",
 		pickIcon: "選擇圖示"
 	},
 	slide: {
@@ -1105,10 +1100,6 @@ const zhTW = {
 		dark: "深色",
 		system: "系統"
 	},
-	clickNav: {
-		prevAria: "上一頁",
-		nextAria: "下一頁"
-	},
 	imagePlaceholder: {
 		dropOverlay: "拖入圖片以使用",
 		uploading: "上傳中…",

package/dist/{preview-BSGlM6Se.js → preview-DUkOjOx8.js}

@@ -1,5 +1,5 @@
 import "./design-cpzS8aud.js";
-import { createViteConfig } from "./config-PwUHqZ_X.js";
+import { createViteConfig } from "./config-C7sZtiY2.js";
 import { mergeConfig, preview as preview$1 } from "vite";
 
 //#region src/cli/preview.ts

package/dist/{types-B-KrjgX8.d.ts → types-Bvk1pM70.d.ts}

@@ -90,6 +90,7 @@ type Locale = {
     /** template: "Deleted folder “{name}”" */
     toastFolderDeleted: string;
     toastFolderDeleteFailed: string;
+    toastFolderReorderFailed: string;
     pickIcon: string;
   };
   slide: {
@@ -365,10 +366,6 @@ type Locale = {
     dark: string;
     system: string;
   };
-  clickNav: {
-    prevAria: string;
-    nextAria: string;
-  };
   imagePlaceholder: {
     dropOverlay: string;
     uploading: string;

package/dist/vite/index.d.ts

@@ -1,5 +1,5 @@
-import "../types-B-KrjgX8.js";
-import { OpenSlideConfig } from "../config-CfMThYN9.js";
+import "../types-Bvk1pM70.js";
+import { OpenSlideConfig } from "../config-D1bANimZ.js";
 import { InlineConfig } from "vite";
 
 //#region src/vite/config.d.ts

package/dist/vite/index.js

@@ -1,4 +1,4 @@
 import "../design-cpzS8aud.js";
-import { createViteConfig } from "../config-PwUHqZ_X.js";
+import { createViteConfig } from "../config-C7sZtiY2.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {

package/skills/create-theme/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: create-theme
-description: Use this skill when the user wants to create, draft, author, or extract a slide theme in this open-slide repo. Triggers on phrases like "create a theme", "make a theme called X", "extract a theme from <slide>", "build a theme from these images". Produces two paired files under `themes/`: `<id>.md` (palette, typography, layout, fixed Title/Footer components, motion) and `<id>.demo.tsx` (a runnable demo slide that the dev-UI Themes panel previews). Do NOT use for editing real slides — only for authoring the theme bundle.
+description: Use this skill when the user wants to create, draft, author, or extract a slide theme in this open-slide repo. Triggers on phrases like "create a theme", "make a theme called X", "extract a theme from <slide>", "build a theme from these images". Produces two paired files under `themes/` — `<id>.md` (palette, typography, layout, fixed Title/Footer components, motion) and `<id>.demo.tsx` (a runnable demo slide that the dev-UI Themes panel previews). Do NOT use for editing real slides — only for authoring the theme bundle.
 ---
 
 # Create a slide theme

package/src/app/components/inspector/comment-widget.tsx

@@ -1,5 +1,5 @@
 import { MessageSquare, Trash2, X } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { format, plural, useLocale } from '@/lib/use-locale';
 import { useInspector } from './inspector-provider';
 
@@ -8,9 +8,23 @@ export function CommentWidget() {
   const { comments, remove, error } = useInspector();
   const [open, setOpen] = useState(false);
   const count = comments.length;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (!ref.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [open]);
 
   return (
-    <div data-inspector-ui className="absolute right-4 bottom-4 z-20 flex flex-col items-end gap-2">
+    <div
+      ref={ref}
+      data-inspector-ui
+      className="absolute right-4 bottom-4 z-20 flex flex-col items-end gap-2"
+    >
       {open && (
         <div className="w-80 rounded-md border bg-card shadow-xl animate-in fade-in-0 slide-in-from-bottom-2 duration-200">
           <div className="flex items-center justify-between border-b px-3 py-2">

package/src/app/components/player.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useClickPageNavigation } from '@/lib/use-click-page-navigation';
 import { useWheelPageNavigation } from '@/lib/use-wheel-page-navigation';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../lib/design';
@@ -92,6 +93,15 @@ export function Player({
 
   const overlayActive = controls && (overviewOpen || helpOpen);
 
+  useClickPageNavigation({
+    ref: rootRef,
+    enabled: !overlayActive,
+    canPrev,
+    canNext,
+    onPrev: goPrev,
+    onNext: goNext,
+  });
+
   useWheelPageNavigation({
     ref: rootRef,
     enabled: !overlayActive,
@@ -308,23 +318,8 @@ export function Player({
         />
       </SlideCanvas>
 
-      <button
-        type="button"
-        aria-label="Previous page"
-        onClick={goPrev}
-        disabled={!canPrev}
-        className={cn('absolute inset-y-0 left-0 z-10 w-[30%]', hideCursor && 'cursor-none')}
-      />
-      <button
-        type="button"
-        aria-label="Next page"
-        onClick={goNext}
-        disabled={!canNext}
-        className={cn('absolute inset-y-0 right-0 z-10 w-[30%]', hideCursor && 'cursor-none')}
-      />
-
       {controls && (
-        <>
+        <div data-osd-chrome style={{ display: 'contents' }}>
           <PresentProgressBar index={index} total={pages.length} visible={chromeVisible} />
           <PresentBlackoutOverlay mode={blackout} />
           <PresentJumpInput pageCount={pages.length} onJump={onIndexChange} />
@@ -358,7 +353,7 @@ export function Player({
             onSelect={onIndexChange}
           />
           <PresentHelpOverlay open={helpOpen} onOpenChange={setHelpOpen} container={rootEl} />
-        </>
+        </div>
       )}
     </div>
   );

package/src/app/components/sidebar/folder-item.tsx

@@ -181,9 +181,14 @@ export function FolderItem({
           </PopoverContent>
         </Popover>
       ) : (
-        <span className="flex size-5 shrink-0 items-center justify-center">
+        <button
+          type="button"
+          onClick={onSelect}
+          aria-label={label}
+          className="flex size-5 shrink-0 items-center justify-center"
+        >
           <FolderIconChip icon={icon} />
-        </span>
+        </button>
       )}
 
       {renaming && row.kind === 'folder' ? (

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

@@ -5,6 +5,7 @@ import { ThemeToggle } from '@/components/theme-toggle';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import type { Folder, FolderIcon } from '@/lib/sdk';
 import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
 import { FolderIconChip, FolderItem } from './folder-item';
 import { IconPicker, PRESET_COLORS } from './icon-picker';
 
@@ -12,6 +13,8 @@ export const DRAFT_ID = 'draft';
 export const THEMES_ID = '__themes__';
 export const ASSETS_ID = '__assets__';
 
+export const FOLDER_DND_MIME = 'application/x-folder-id';
+
 export function Sidebar({
   folders,
   countFor,
@@ -25,6 +28,7 @@ export function Sidebar({
   onDelete,
   onDropToFolder,
   onDropToDraft,
+  onReorder,
 }: {
   folders: Folder[];
   countFor: (folderId: string | null) => number;
@@ -38,7 +42,23 @@ export function Sidebar({
   onDelete: (id: string) => void;
   onDropToFolder: (folderId: string, slideId: string) => void;
   onDropToDraft: (slideId: string) => void;
+  onReorder: (ids: string[]) => void;
 }) {
+  const [dragId, setDragId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<{ id: string; before: boolean } | null>(null);
+
+  const finishReorder = (toId: string, before: boolean) => {
+    const fromId = dragId;
+    setDragId(null);
+    setDropTarget(null);
+    if (!fromId || fromId === toId) return;
+    const ids = folders.map((f) => f.id);
+    if (!ids.includes(fromId) || !ids.includes(toId)) return;
+    const next = ids.filter((id) => id !== fromId);
+    next.splice(next.indexOf(toId) + (before ? 0 : 1), 0, fromId);
+    if (next.every((id, i) => id === ids[i])) return;
+    onReorder(next);
+  };
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState('');
   const [newIcon, setNewIcon] = useState<FolderIcon>(() => ({
@@ -139,22 +159,73 @@ export function Sidebar({
       </div>
 
       <div className="flex-1 overflow-y-auto px-2 pb-2">
-        {folders.map((folder) => (
-          <FolderItem
-            key={folder.id}
-            row={{
-              kind: 'folder',
-              folder,
-              onRename: (name) => onRename(folder.id, name),
-              onChangeIcon: (icon) => onChangeIcon(folder.id, icon),
-              onDelete: () => onDelete(folder.id),
-            }}
-            count={countFor(folder.id)}
-            selected={selectedId === folder.id}
-            onSelect={() => onSelect(folder.id)}
-            onDropSlide={(slideId) => onDropToFolder(folder.id, slideId)}
-          />
-        ))}
+        {folders.map((folder) => {
+          const isDropTarget = dropTarget?.id === folder.id;
+          const before = isDropTarget && dropTarget.before;
+          const after = isDropTarget && !dropTarget.before;
+          return (
+            // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop handle wraps the row
+            <div
+              key={folder.id}
+              className={cn(
+                'relative',
+                before &&
+                  'before:absolute before:inset-x-2 before:-top-px before:h-[2px] before:rounded-full before:bg-brand',
+                after &&
+                  'after:absolute after:inset-x-2 after:-bottom-px after:h-[2px] after:rounded-full after:bg-brand',
+                dragId === folder.id && 'opacity-50',
+              )}
+              draggable={import.meta.env.DEV}
+              onDragStart={(e) => {
+                if (!import.meta.env.DEV) return;
+                e.dataTransfer.setData(FOLDER_DND_MIME, folder.id);
+                e.dataTransfer.effectAllowed = 'move';
+                setDragId(folder.id);
+              }}
+              onDragEnd={() => {
+                setDragId(null);
+                setDropTarget(null);
+              }}
+              onDragOver={(e) => {
+                if (!e.dataTransfer.types.includes(FOLDER_DND_MIME)) return;
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+                const rect = e.currentTarget.getBoundingClientRect();
+                const isBefore = e.clientY < rect.top + rect.height / 2;
+                if (!dropTarget || dropTarget.id !== folder.id || dropTarget.before !== isBefore) {
+                  setDropTarget({ id: folder.id, before: isBefore });
+                }
+              }}
+              onDragLeave={(e) => {
+                if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
+                if (dropTarget?.id === folder.id) setDropTarget(null);
+              }}
+              onDrop={(e) => {
+                const fromId = e.dataTransfer.getData(FOLDER_DND_MIME);
+                if (!fromId) return;
+                e.preventDefault();
+                e.stopPropagation();
+                const rect = e.currentTarget.getBoundingClientRect();
+                const isBefore = e.clientY < rect.top + rect.height / 2;
+                finishReorder(folder.id, isBefore);
+              }}
+            >
+              <FolderItem
+                row={{
+                  kind: 'folder',
+                  folder,
+                  onRename: (name) => onRename(folder.id, name),
+                  onChangeIcon: (icon) => onChangeIcon(folder.id, icon),
+                  onDelete: () => onDelete(folder.id),
+                }}
+                count={countFor(folder.id)}
+                selected={selectedId === folder.id}
+                onSelect={() => onSelect(folder.id)}
+                onDropSlide={(slideId) => onDropToFolder(folder.id, slideId)}
+              />
+            </div>
+          );
+        })}
 
         {import.meta.env.DEV &&
           (creating ? (

package/src/app/lib/folders.ts

@@ -88,12 +88,22 @@ async function putAssign(slideId: string, folderId: string | null): Promise<void
   if (!res.ok) throw new Error(`PUT /__folders/assign ${res.status}`);
 }
 
+async function putReorder(ids: string[]): Promise<void> {
+  const res = await fetch('/__folders/reorder', {
+    method: 'PUT',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ ids }),
+  });
+  if (!res.ok) throw new Error(`PUT /__folders/reorder ${res.status}`);
+}
+
 export type UseFoldersResult = {
   manifest: FoldersManifest;
   loading: boolean;
   create: (name: string, icon: FolderIcon) => Promise<Folder>;
   update: (id: string, patch: { name?: string; icon?: FolderIcon }) => Promise<void>;
   remove: (id: string) => Promise<void>;
+  reorder: (ids: string[]) => Promise<void>;
   assign: (slideId: string, folderId: string | null) => Promise<void>;
   renameSlide: (slideId: string, name: string) => Promise<void>;
   duplicateSlide: (slideId: string, newId?: string) => Promise<string>;
@@ -163,6 +173,23 @@ export function useFolders(): UseFoldersResult {
     [refresh],
   );
 
+  const reorder = useCallback(
+    async (ids: string[]) => {
+      const prev = manifest;
+      const byId = new Map(prev.folders.map((f) => [f.id, f]));
+      const next = ids.map((id) => byId.get(id)).filter((f): f is Folder => Boolean(f));
+      if (next.length !== prev.folders.length) return;
+      setManifest({ ...prev, folders: next });
+      try {
+        await putReorder(ids);
+      } catch (err) {
+        setManifest(prev);
+        throw err;
+      }
+    },
+    [manifest],
+  );
+
   const assign = useCallback(
     async (slideId: string, folderId: string | null) => {
       await putAssign(slideId, folderId);
@@ -202,6 +229,7 @@ export function useFolders(): UseFoldersResult {
     create,
     update,
     remove,
+    reorder,
     assign,
     renameSlide,
     duplicateSlide,

package/src/app/lib/inspector/fiber.test.ts

@@ -0,0 +1,154 @@
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { findSlideSource } from './fiber.ts';
+
+class FakeHTMLElement {
+  dataset: Record<string, string> = {};
+  private closestSelf: FakeHTMLElement | null = null;
+  setClosestSelfForSlideLoc() {
+    this.closestSelf = this;
+  }
+  closest(selector: string): FakeHTMLElement | null {
+    if (selector === '[data-slide-loc]') return this.closestSelf;
+    return null;
+  }
+}
+
+type DebugSource = { fileName?: string; lineNumber?: number; columnNumber?: number };
+type FakeFiber = {
+  return: FakeFiber | null;
+  stateNode?: unknown;
+  _debugSource?: DebugSource;
+};
+
+function makeEl(opts: { slideLoc?: string; fiber?: FakeFiber } = {}): FakeHTMLElement {
+  const el = new FakeHTMLElement();
+  if (opts.slideLoc) {
+    el.dataset.slideLoc = opts.slideLoc;
+    el.setClosestSelfForSlideLoc();
+  }
+  if (opts.fiber) {
+    (el as unknown as Record<string, FakeFiber>).__reactFiber$test = opts.fiber;
+  }
+  return el;
+}
+
+function makeFiber(opts: {
+  fileName?: string;
+  line?: number;
+  column?: number;
+  host?: boolean;
+  parent?: FakeFiber | null;
+}): FakeFiber {
+  const source: DebugSource | undefined =
+    opts.fileName !== undefined
+      ? { fileName: opts.fileName, lineNumber: opts.line, columnNumber: opts.column }
+      : undefined;
+  return {
+    return: opts.parent ?? null,
+    stateNode: opts.host ? new FakeHTMLElement() : undefined,
+    _debugSource: source,
+  };
+}
+
+beforeAll(() => {
+  vi.stubGlobal('HTMLElement', FakeHTMLElement);
+});
+
+afterAll(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('findSlideSource primary path', () => {
+  it('reads line:column from data-slide-loc', () => {
+    const el = makeEl({ slideLoc: '42:7' });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(42);
+    expect(hit?.column).toBe(7);
+    expect(hit?.anchor).toBe(el as unknown as HTMLElement);
+  });
+});
+
+describe('findSlideSource fallback', () => {
+  it('matches a POSIX fileName', () => {
+    const fiber = makeFiber({
+      fileName: '/repo/slides/cover/index.tsx',
+      line: 10,
+      column: 4,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(10);
+    expect(hit?.column).toBe(4);
+  });
+
+  it('matches a Windows-backslash fileName', () => {
+    const fiber = makeFiber({
+      fileName: 'C:\\repo\\slides\\cover\\index.tsx',
+      line: 11,
+      column: 2,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(11);
+    expect(hit?.column).toBe(2);
+  });
+
+  it('matches a fileName carrying an HMR ?t= query', () => {
+    const fiber = makeFiber({
+      fileName: '/repo/slides/cover/index.tsx?t=1700000000000',
+      line: 12,
+      column: 0,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(12);
+  });
+
+  it('matches a Windows fileName with an HMR query', () => {
+    const fiber = makeFiber({
+      fileName: 'C:\\repo\\slides\\cover\\index.tsx?t=1700000000000',
+      line: 13,
+      column: 1,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(13);
+    expect(hit?.column).toBe(1);
+  });
+
+  it('returns null when the fiber fileName points at a different slideId', () => {
+    const fiber = makeFiber({
+      fileName: '/repo/slides/other/index.tsx',
+      line: 10,
+      column: 4,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).toBeNull();
+  });
+
+  it('walks up the fiber chain until it finds a matching source', () => {
+    const parent = makeFiber({
+      fileName: '/repo/slides/cover/index.tsx',
+      line: 99,
+      column: 3,
+      host: true,
+    });
+    const leaf = makeFiber({ parent, host: true });
+    const el = makeEl({ fiber: leaf });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(99);
+    expect(hit?.column).toBe(3);
+  });
+});

package/src/app/lib/inspector/fiber.ts

@@ -28,6 +28,12 @@ function getSource(fiber: FiberLike) {
   return fiber._debugSource ?? fiber.memoizedProps?.__source;
 }
 
+// `_debugSource.fileName` may carry Vite's HMR query (`?t=…`) and, on
+// Windows, backslash separators. Both break the naive `endsWith` match.
+function normalizeDebugFileName(fileName: string): string {
+  return fileName.split(/[?#]/)[0].replace(/\\/g, '/');
+}
+
 export function findSlideSource(
   el: HTMLElement,
   slideId: string,
@@ -58,7 +64,12 @@ export function findSlideSource(
   while (fiber) {
     const src = getSource(fiber);
     const isHost = fiber.stateNode instanceof HTMLElement;
-    if (src?.fileName?.endsWith(needle) && src.lineNumber && (!opts?.hostOnly || isHost)) {
+    if (
+      src?.fileName &&
+      normalizeDebugFileName(src.fileName).endsWith(needle) &&
+      src.lineNumber &&
+      (!opts?.hostOnly || isHost)
+    ) {
       return {
         line: src.lineNumber,
         column: src.columnNumber ?? 0,

package/src/app/lib/use-click-page-navigation.ts

@@ -0,0 +1,52 @@
+import { type RefObject, useEffect } from 'react';
+
+// Clicks that land on (or inside) these never navigate — interactive slide
+// content keeps its click, and present chrome is excluded via data-osd-chrome.
+// Authors can opt any element out with a data-osd-interactive attribute.
+const NAV_PASSTHROUGH =
+  'a, button, input, textarea, select, label, summary, iframe, video, audio, embed, object, [role="button"], [role="link"], [contenteditable="true"], [data-osd-interactive], [data-osd-chrome]';
+
+type UseClickPageNavigationOptions<T extends HTMLElement> = {
+  ref: RefObject<T>;
+  enabled?: boolean;
+  /** Fraction of the width on each side that navigates; the center is inert. */
+  edgeRatio?: number;
+  canPrev: boolean;
+  canNext: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+};
+
+export function useClickPageNavigation<T extends HTMLElement>({
+  ref,
+  enabled = true,
+  edgeRatio = 0.3,
+  canPrev,
+  canNext,
+  onPrev,
+  onNext,
+}: UseClickPageNavigationOptions<T>) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+
+    const onClick = (event: MouseEvent) => {
+      if (event.button !== 0 || event.defaultPrevented) return;
+      const target = event.target;
+      if (target instanceof HTMLElement && target.closest(NAV_PASSTHROUGH)) return;
+      if (window.getSelection()?.toString()) return;
+
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const x = (event.clientX - rect.left) / rect.width;
+      if (x < edgeRatio) {
+        if (canPrev) onPrev();
+      } else if (x > 1 - edgeRatio) {
+        if (canNext) onNext();
+      }
+    };
+
+    el.addEventListener('click', onClick);
+    return () => el.removeEventListener('click', onClick);
+  }, [ref, enabled, edgeRatio, canPrev, canNext, onPrev, onNext]);
+}

package/src/app/lib/use-is-mobile.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+// Matches Tailwind's `md` breakpoint — below it the slide viewer hides desktop
+// navigation chrome and relies on tap-to-navigate instead.
+const QUERY = '(max-width: 767.98px)';
+
+export function useIsMobile(): boolean {
+  const [mobile, setMobile] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(QUERY).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const onChange = (e: MediaQueryListEvent) => setMobile(e.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return mobile;
+}

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,10 +39,11 @@ 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';
@@ -348,7 +348,7 @@ export function Slide() {
         <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="flex h-12 shrink-0 items-center gap-2 border-b border-hairline bg-sidebar/85 px-2 backdrop-blur-md md:px-3">
+          <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}>
@@ -382,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="flex min-w-0 flex-1 justify-center px-2">
-              <div className="min-w-0 max-w-[34rem]">
+            {/* 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 shrink-0 items-center gap-1">
+            <div className="ml-auto flex shrink-0 items-center gap-1">
               {view === 'slides' && (
                 <button
                   type="button"
@@ -581,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)}
@@ -597,12 +597,6 @@ export function Slide() {
                         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 />}
@@ -814,7 +808,7 @@ function SelectionReporter() {
   return null;
 }
 
-function SlideWheelNavigation({
+function SlideViewportNavigation({
   targetRef,
   onPrev,
   onNext,
@@ -828,6 +822,7 @@ function SlideWheelNavigation({
   canNext: boolean;
 }) {
   const { active } = useInspector();
+  const isMobile = useIsMobile();
 
   useWheelPageNavigation({
     ref: targetRef,
@@ -838,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;
 }
 
@@ -890,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"
-      />
-    </>
-  );
-}