@open-slide/core 1.2.0 → 1.4.0

package/dist/{preview-Cunm-f4i.js → preview-DT9hJvzM.js}

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

package/dist/sync-j9_QPovT.js

@@ -0,0 +1,3 @@
+import { detectSkillsDrift, syncSkills } from "./sync-BCJDRIqo.js";
+
+export { syncSkills };

package/dist/{types-CRHIeoNq.d.ts → types-QCpkHkiS.d.ts}

@@ -38,6 +38,8 @@ type Locale = {
   home: {
     appTitle: string;
     draft: string;
+    themes: string;
+    assets: string;
     folders: string;
     newFolder: string;
     folderName: string;
@@ -52,7 +54,6 @@ type Locale = {
     nothingMatchesSuffix: string;
     noSlidesYet: string;
     createSlideHintPrefix: string;
-    createSlideHintMid: string;
     createSlideHintSuffix: string;
     folderEmptyTitle: string;
     folderEmptyHint: string;
@@ -87,11 +88,18 @@ type Locale = {
     backToHome: string;
     agentConnected: string;
     agentConnectedTooltip: string;
+    agentDisconnected: string;
+    agentDisconnectedTooltip: string;
     download: string;
     exportAsHtml: string;
     exportAsPdf: string;
     pdfExportFailed: string;
+    pdfExportSafariUnsupported: string;
     present: string;
+    presentMenuAria: string;
+    presentInWindow: string;
+    presentFullscreen: string;
+    presentPresenter: string;
     slidesTab: string;
     assetsTab: string;
     renameSlide: string;
@@ -134,6 +142,8 @@ type Locale = {
     whiteoutAria: string;
     laserAria: string;
     presenterAria: string;
+    enterFullscreenAria: string;
+    exitFullscreenAria: string;
     helpAria: string;
     exitAria: string;
     elapsedTime: string;
@@ -161,6 +171,8 @@ type Locale = {
     deselect: string;
     agentWatching: string;
     agentWatchingTooltip: string;
+    agentNotWatching: string;
+    agentNotWatchingTooltip: string;
     contentSection: string;
     typographySection: string;
     colorSection: string;
@@ -241,6 +253,8 @@ type Locale = {
     devOnlyMessage: string;
     sectionAria: string;
     eyebrow: string;
+    scopeSlide: string;
+    scopeGlobal: string;
     /** templates: "{count} file" / "{count} files" */
     fileCount: Plural;
     searchLogos: string;
@@ -259,7 +273,7 @@ type Locale = {
     renameMenuItem: string;
     deleteMenuItem: string;
     conflictTitle: string;
-    /** template: "{name} is already in this slide's assets folder." */
+    /** template: "{name} is already in the assets folder." */
     conflictDescription: string;
     conflictReplace: string;
     conflictRenameCopy: string;
@@ -314,6 +328,7 @@ type Locale = {
     toastDeleted: string;
     toastDuplicateFailed: string;
     toastDeleteFailed: string;
+    resizeRail: string;
   };
   pdfToast: {
     title: string;
@@ -333,6 +348,11 @@ type Locale = {
     prevAria: string;
     nextAria: string;
   };
+  imagePlaceholder: {
+    dropOverlay: string;
+    uploading: string;
+    uploadFailed: string;
+  };
   notesDrawer: {
     toggle: string;
     /** template: "page {n}/{total}" */
@@ -343,5 +363,25 @@ type Locale = {
     /** template: "Save failed: {msg}" */
     statusError: string;
   };
+  themes: {
+    title: string;
+    noThemesTitle: string;
+    noThemesHintPrefix: string;
+    noThemesHintSuffix: string;
+    noDemoYet: string;
+    noDemoHintPrefix: string;
+    noDemoHintSuffix: string;
+    backToGallery: string;
+    /** template: "page {n}/{total}" */
+    pageOf: string;
+    nextPageAria: string;
+    prevPageAria: string;
+    /** template: "Open theme {name}" */
+    openThemeAria: string;
+    usedBy: string;
+    usedByEmpty: string;
+    expandPromptAria: string;
+    collapsePromptAria: string;
+  };
 }; //#endregion
 export { Locale, Plural };

package/dist/vite/index.d.ts

@@ -1,5 +1,5 @@
-import "../types-CRHIeoNq.js";
-import { OpenSlideConfig } from "../config-CtT8K4VF.js";
+import "../types-QCpkHkiS.js";
+import { OpenSlideConfig } from "../config-s0YUbmUe.js";
 import { InlineConfig } from "vite";
 
 //#region src/vite/config.d.ts

package/dist/vite/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {
@@ -42,11 +42,19 @@
     "vite"
   ],
   "license": "MIT",
+  "author": {
+    "name": "1weiho",
+    "url": "https://github.com/1weiho"
+  },
+  "homepage": "https://open-slide.dev",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/1weiho/open-slide.git",
     "directory": "packages/core"
   },
+  "bugs": {
+    "url": "https://github.com/1weiho/open-slide/issues"
+  },
   "publishConfig": {
     "access": "public"
   },

package/skills/create-slide/SKILL.md

@@ -13,7 +13,7 @@ You only write files under `slides/<id>/`. Never modify `package.json`, `open-sl
 
 List files under `themes/`. If any theme markdown files exist (anything other than `README.md`), call `AskUserQuestion` with each theme id as an option plus a final **"no theme — design from scratch"** option.
 
-- If the user picks a theme: read `themes/<id>.md` end-to-end. The theme's palette, typography, layout, and Title/Footer components are now authoritative — copy them directly into the slide. In Step 2, skip the **aesthetic direction** question (the theme already commits to one direction); you still need the topic itself, so confirm it before moving on. Page count, text density, and motion are independent of theme — ask those normally.
+- If the user picks a theme: read `themes/<id>.md` end-to-end. The theme's palette, typography, layout, and Title/Footer components are now authoritative — copy them directly into the slide. **Also set `theme: '<theme-id>'` on the `meta` export in `index.tsx`** (e.g. `export const meta: SlideMeta = { title: '…', theme: '<theme-id>' };`) so the slide back-links to the theme (chip on the slide card + listing on `/themes/<id>`). In Step 2, skip the **aesthetic direction** question (the theme already commits to one direction); you still need the topic itself, so confirm it before moving on. Page count, text density, and motion are independent of theme — ask those normally.
 - If the user picks "no theme", or `themes/` is empty (or contains only `README.md`): proceed to Step 2 unchanged.
 
 If you skip the aesthetic question because a theme was picked, restate the theme name in Step 2 so the user can correct course before you start writing.

package/skills/create-theme/SKILL.md

@@ -1,15 +1,20 @@
 ---
 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 a single markdown file under `themes/<id>.md` describing palette, typography, layout, fixed Title/Footer components, and motion philosophy. Do NOT use for editing slides themselves — only for authoring `themes/<id>.md`.
+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
 
-This skill produces one markdown file under `themes/<id>.md` that describes a reusable visual identity for slides — palette, typography, layout, fixed Title/Footer/Eyebrow components, motion. Themes are agent-facing documentation, not executable runtime: a slide author reads the theme markdown and applies it when writing `slides/<id>/index.tsx`.
+This skill produces a **theme bundle** under `themes/`: two paired files that together describe a reusable visual identity.
 
-A theme is **distinct from a slide's `design` const**. The theme markdown is authoring-time aesthetic direction (read by `create-slide`, copied into slide source). A per-slide `const design: DesignSystem = { … }` (declared at the top of `slides/<id>/index.tsx`) is the runtime tokens object the user can tweak from the Design panel in the dev UI. Both can coexist: the markdown theme commits the *direction*, the per-slide `design` const makes the slide *tweakable*. This skill only writes the markdown.
+1. `themes/<id>.md` — agent-facing documentation: palette, typography, layout, fixed Title/Footer/Eyebrow components, motion. This is what `create-slide` reads when an author picks the theme.
+2. `themes/<id>.demo.tsx` — a runnable mini-slide (a normal slide module: `export default Page[]`) that demonstrates the theme on 2–3 pages. The dev UI's **Themes panel** loads this file and renders it as the theme's live preview.
 
-You only write a single file under `themes/`. Never modify slides or other configuration. The canvas / type-scale defaults that themes can override live in the **`slide-authoring`** skill — read it before writing the theme so your overrides are stated explicitly.
+Both files share the same stem so the runtime can pair them automatically.
+
+A theme is **distinct from a slide's `design` const**. The theme markdown is authoring-time aesthetic direction (copied into a real slide's source by `create-slide`). The demo `.tsx` is a self-contained preview, not a real slide — it does not appear in the slides list. A per-slide `const design: DesignSystem = { … }` (declared at the top of `slides/<id>/index.tsx`) is the runtime tokens object the user can tweak from the Design panel. The markdown commits the *direction*; the per-slide `design` const makes the slide *tweakable*; the demo `.tsx` makes the theme *previewable*.
+
+You only write files under `themes/<id>.md` and `themes/<id>.demo.tsx`. Never modify real slides or other configuration. The canvas / type-scale defaults that themes can override live in the **`slide-authoring`** skill — read it before writing the theme so your overrides are stated explicitly.
 
 ## Step 1 — Identify the input source
 
@@ -47,7 +52,6 @@ Produce a file with this exact section order. Section bodies adapt to the theme;
 ---
 name: <Human title, e.g. "Editorial Noir">
 description: <one-line elevator pitch>
-mode: light | dark | system
 ---
 
 # <Theme name>
@@ -163,6 +167,46 @@ const Cover: Page = () => (
 ```
 ````
 
+## Step 4b — Write `themes/<id>.demo.tsx`
+
+The demo is a normal slide module — same shape as `slides/<id>/index.tsx`, just sitting under `themes/` so the runtime knows it's preview-only. The dev-UI Themes panel imports it and renders it inside `SlideCanvas` (1920×1080).
+
+Contract:
+
+- `import type { Page } from '@open-slide/core';`
+- Inline the **same** `Title`, `Footer`, `Eyebrow` components defined in the theme markdown — verbatim, no abstractions, no imports from elsewhere. The demo and the markdown must stay in lockstep so what the user sees in the panel matches what `create-slide` will paste into a real slide.
+- Export 2–3 `Page` components and a default array. Aim for: a Cover (Eyebrow + Title + subtitle), one Content page exercising body type + accent, and a Closer or "End" card. The "Example usage" block at the bottom of the markdown is a good starting point — extend it.
+- If the theme has runtime-tweakable tokens worth surfacing in the Design panel later, also `export const design: DesignSystem = {...}`.
+- No external assets, no `import` from `@/`, no slides-only helpers (e.g. `WindowShell` from a real slide). Demo files must be self-contained.
+
+Skeleton:
+
+```tsx
+import type { Page } from '@open-slide/core';
+
+const Title = ({ children }: { children: React.ReactNode }) => (
+  // …same JSX as in themes/<id>.md
+);
+const Footer = ({ pageNum, total }: { pageNum: number; total: number }) => (
+  // …
+);
+const Eyebrow = ({ children }: { children: React.ReactNode }) => (
+  // …
+);
+
+const Cover: Page = () => (
+  // …
+);
+const Content: Page = () => (
+  // …
+);
+const Closer: Page = () => (
+  // …
+);
+
+export default [Cover, Content, Closer];
+```
+
 ## Step 5 — Self-review
 
 Run this checklist before finishing:
@@ -172,23 +216,27 @@ Run this checklist before finishing:
 - [ ] At least Title and Footer are defined as paste-ready React with concrete inline styles.
 - [ ] Motion section commits to one of static / subtle / rich.
 - [ ] Aesthetic paragraph names a single coherent direction.
-- [ ] File lives at `themes/<id>.md` and only that file was created — no slide changes, no config changes.
-- [ ] Frontmatter `mode` is one of `light`, `dark`, `system`.
+- [ ] Both files written: `themes/<id>.md` and `themes/<id>.demo.tsx`. No slide changes, no config changes.
+- [ ] Demo `.tsx` exports 2–3 pages and inlines the same Title/Footer/Eyebrow components defined in the markdown.
+- [ ] Demo opens cleanly in the **Themes** panel of the dev UI — re-checked by you only by reading the file (do not start a server).
 
 ## Step 6 — Hand off
 
 Tell the user:
 
-- The theme id and file path.
-- That `/create-slide` will list it as a picker option on its next run.
+- The theme id and the two file paths (`themes/<id>.md` + `themes/<id>.demo.tsx`).
+- That the demo will appear in the dev UI's **Themes** panel as a live card and detail view (HMR — no restart needed).
+- That `/create-slide` will list the theme as a picker option on its next run.
 - A one-line summary of the look (palette + aesthetic).
 
-Do not run the dev server. Do not modify slides — even to demonstrate the theme; that is the user's next move.
+Do not run the dev server. Do not modify real slides — even to demonstrate the theme; the demo `.tsx` is the demonstration.
 
 ## Anti-patterns
 
-- ❌ Writing executable code in `themes/<id>.md` outside the labeled component snippets — the file is documentation.
-- ❌ Producing more than one file. One theme = one `themes/<id>.md`.
+- ❌ Writing executable code in `themes/<id>.md` outside the labeled component snippets — the markdown is documentation.
+- ❌ Producing only the markdown without the demo, or only the demo without the markdown. A theme is the **bundle** — both files, every time.
+- ❌ Treating `themes/<id>.demo.tsx` as a real slide. It is preview-only and lives outside the slides list; never put it under `slides/`.
+- ❌ Importing from `@/` or any slide-specific helper inside the demo. The demo is self-contained.
 - ❌ Inventing palette / fonts when the user supplied images or an existing slide. Extract, don't fabricate.
 - ❌ Editing `slides/`, `packages/`, `package.json`, or `open-slide.config.ts`.
 - ❌ Skipping the Fixed components section. Title and Footer are the most common reuse target — they must be paste-ready.

package/skills/slide-authoring/SKILL.md

@@ -38,6 +38,17 @@ export default [Cover, Body] satisfies Page[];
 - `export default` is a **non-empty array of zero-prop React components**, one per page, in order.
 - `meta.title` (optional) shows in the slide header. Default is the folder name.
 - The slide id is the kebab-case folder name. Pick something short and descriptive (`q2-roadmap`, `team-offsite-2026`).
+- `meta.theme` (optional) marks the slide as built from a theme under `themes/`. The id must match a `<id>.md` basename. Surfaces a back-link chip on the slide card and lists the slide on `/themes/<id>`. Omit if the slide isn't derived from a registered theme.
+
+## Editing an existing slide
+
+A finished slide commonly runs 1000–1800 lines. When you only need to touch one page, **don't read the whole file** — locate the page first, then read just that range:
+
+```bash
+grep -n ": Page = " slides/<id>/index.tsx
+```
+
+This lists every `const Foo: Page = …` declaration with its line number. Read the target page with `Read` using `offset` + `limit` (~150 lines is usually enough to capture one page plus its helper components). Read the whole file only when you need cross-page context (palette audit, reordering, design const tweaks).
 
 ## Canvas
 
@@ -231,7 +242,7 @@ export default [Cover, Content] satisfies Page[];
 
 ## Assets
 
-Place files under `slides/<id>/assets/`. Import them as ES modules:
+**Slide-local assets** live under `slides/<id>/assets/` — anything one-off to a single slide. Import them as ES modules:
 
 ```tsx
 import hero from './assets/hero.jpg';
@@ -245,6 +256,14 @@ For URL-only access:
 const videoUrl = new URL('./assets/intro.mp4', import.meta.url).href;
 ```
 
+**Global assets** — anything reused across decks or themes (company logos, presenter avatars, recurring icons) — live in the project root `assets/` folder. Import them via the `@assets` alias:
+
+```tsx
+import logo from '@assets/logos/acme.svg';
+```
+
+A `themes/*.md` file may name an asset path in its prose (e.g. "use `@assets/logos/acme.svg` in the title slot"); the slide imports it explicitly.
+
 Skip the `assets/` folder entirely for pure-text slides.
 
 ## Image placeholders
@@ -328,7 +347,7 @@ This applies whenever the *visual element* repeats, not whenever the *data* does
 - [ ] Slide declares a top-level `export const design: DesignSystem = { … }` and references the values via `var(--osd-X)` (use `design.X` only when you need a JS number for arithmetic). Only omit the `design` const for a one-off slide whose palette is intentionally locked.
 - [ ] One idea per page.
 - [ ] Visually repeated elements (cards, tiles, logo rows) are rendered as explicit `<Component />` instances, not via `array.map` over a data list.
-- [ ] All imported assets exist on disk under `slides/<id>/assets/`.
+- [ ] All imported assets exist on disk — slide-local under `slides/<id>/assets/`, or global under `assets/` (imported via `@assets/...`).
 - [ ] Every `<ImagePlaceholder>` corresponds to a real image the user must supply — not decorative filler. If it could be replaced by typography or layout, it should be.
 - [ ] Nothing outside `slides/<id>/` was edited.
 

package/src/app/app.tsx

@@ -2,15 +2,27 @@ import config from 'virtual:open-slide/config';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Toaster } from './components/ui/sonner';
 import { useLocale } from './lib/use-locale';
+import { AssetsPage } from './routes/assets';
 import { Home } from './routes/home';
+import { HomeShell } from './routes/home-shell';
 import { Presenter } from './routes/presenter';
 import { Slide } from './routes/slide';
+import { ThemeDetailPage, ThemesGalleryPage } from './routes/themes';
 
 export function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={config.build.showSlideBrowser ? <Home /> : <NotFound />} />
+        {config.build.showSlideBrowser ? (
+          <Route element={<HomeShell />}>
+            <Route path="/" element={<Home />} />
+            <Route path="/themes" element={<ThemesGalleryPage />} />
+            <Route path="/themes/:themeId" element={<ThemeDetailPage />} />
+            <Route path="/assets" element={<AssetsPage />} />
+          </Route>
+        ) : (
+          <Route path="/" element={<NotFound />} />
+        )}
         <Route path="/s/:slideId" element={<Slide />} />
         <Route path="/s/:slideId/presenter" element={<Presenter />} />
         <Route path="*" element={<NotFound />} />

package/src/app/components/asset-view.tsx

@@ -30,9 +30,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   type AssetEntry,
   fetchSvgAsFile,
+  renamedCopy,
   type SvglItem,
   searchSvgl,
   useAssets,
@@ -40,7 +42,11 @@ import {
 import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 
-type Props = { slideId: string };
+type Props = { slideId: string | null };
+
+type Scope = 'slide' | 'global';
+
+const GLOBAL_SLIDE_ID = '@global';
 
 type ConflictState = {
   file: File;
@@ -48,7 +54,10 @@ type ConflictState = {
 };
 
 export function AssetView({ slideId }: Props) {
-  const { assets, loading, available, upload, rename, remove } = useAssets(slideId);
+  const lockedToGlobal = slideId === null;
+  const [scope, setScope] = useState<Scope>(lockedToGlobal ? 'global' : 'slide');
+  const effectiveSlideId = scope === 'global' || slideId === null ? GLOBAL_SLIDE_ID : slideId;
+  const { assets, loading, available, upload, rename, remove } = useAssets(effectiveSlideId);
   const [dragActive, setDragActive] = useState(false);
   const [conflict, setConflict] = useState<ConflictState | null>(null);
   const [preview, setPreview] = useState<AssetEntry | null>(null);
@@ -132,10 +141,21 @@ export function AssetView({ slideId }: Props) {
       }}
     >
       <div className="flex shrink-0 items-center justify-between gap-3 border-b border-hairline bg-sidebar px-6 py-3">
-        <div className="min-w-0">
-          <span className="eyebrow">{t.asset.eyebrow}</span>
-          <p className="mt-0.5 truncate text-[12px] text-muted-foreground">
-            <span className="font-mono text-[11.5px]">slides/{slideId}/assets/</span>
+        <div className="flex min-w-0 items-center gap-3">
+          {lockedToGlobal ? (
+            <span className="eyebrow">{t.asset.eyebrow}</span>
+          ) : (
+            <Tabs value={scope} onValueChange={(next) => setScope(next as Scope)}>
+              <TabsList>
+                <TabsTrigger value="slide">{t.asset.scopeSlide}</TabsTrigger>
+                <TabsTrigger value="global">{t.asset.scopeGlobal}</TabsTrigger>
+              </TabsList>
+            </Tabs>
+          )}
+          <p className="min-w-0 truncate text-[12px] text-muted-foreground">
+            <span className="font-mono text-[11.5px]">
+              {scope === 'global' ? 'assets/' : `slides/${slideId}/assets/`}
+            </span>
             {!loading && (
               <>
                 <span className="mx-2 opacity-50">·</span>
@@ -273,7 +293,7 @@ export function AssetView({ slideId }: Props) {
         />
       )}
 
-      {preview && <PreviewDialog asset={preview} onClose={() => setPreview(null)} />}
+      {preview && <PreviewDialog asset={preview} scope={scope} onClose={() => setPreview(null)} />}
 
       {logoSearchOpen && (
         <LogoSearchDialog
@@ -315,19 +335,6 @@ function hasFiles(e: React.DragEvent): boolean {
   return false;
 }
 
-function renamedCopy(file: File, taken: Set<string>): File {
-  const dot = file.name.lastIndexOf('.');
-  const stem = dot > 0 ? file.name.slice(0, dot) : file.name;
-  const ext = dot > 0 ? file.name.slice(dot) : '';
-  let i = 1;
-  let next = `${stem}-${i}${ext}`;
-  while (taken.has(next)) {
-    i += 1;
-    next = `${stem}-${i}${ext}`;
-  }
-  return new File([file], next, { type: file.type, lastModified: file.lastModified });
-}
-
 function AssetCard({
   asset,
   onPreview,
@@ -554,9 +561,17 @@ function NoResultsMessage({ query, t }: { query: string; t: ReturnType<typeof us
   );
 }
 
-function PreviewDialog({ asset, onClose }: { asset: AssetEntry; onClose: () => void }) {
+function PreviewDialog({
+  asset,
+  scope,
+  onClose,
+}: {
+  asset: AssetEntry;
+  scope: Scope;
+  onClose: () => void;
+}) {
   const isImage = asset.mime.startsWith('image/');
-  const importPath = `./assets/${asset.name}`;
+  const importPath = scope === 'global' ? `@assets/${asset.name}` : `./assets/${asset.name}`;
   const t = useLocale();
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>

package/src/app/components/image-placeholder.tsx

@@ -1,4 +1,7 @@
-import type { CSSProperties, HTMLAttributes } from 'react';
+import { type CSSProperties, type HTMLAttributes, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { uploadWithAutoRename } from '@/lib/assets';
+import { useLocale } from '@/lib/use-locale';
 
 export type ImagePlaceholderProps = {
   hint: string;
@@ -17,9 +20,56 @@ export function ImagePlaceholder({
   ...rest
 }: ImagePlaceholderProps) {
   const dims = width && height ? `${width} × ${height}` : null;
+  const [dragActive, setDragActive] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const dragDepth = useRef(0);
+  const t = useLocale();
+
+  const dndProps = import.meta.env.DEV
+    ? {
+        onDragEnter: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          dragDepth.current += 1;
+          setDragActive(true);
+        },
+        onDragOver: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = 'copy';
+        },
+        onDragLeave: () => {
+          dragDepth.current = Math.max(0, dragDepth.current - 1);
+          if (dragDepth.current === 0) setDragActive(false);
+        },
+        onDrop: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          dragDepth.current = 0;
+          setDragActive(false);
+          const file = pickImageFile(e.dataTransfer.files);
+          if (!file) return;
+          const root = e.currentTarget;
+          const slideId = root.closest<HTMLElement>('[data-slide-id]')?.dataset.slideId;
+          const loc = root.dataset.slideLoc;
+          if (!slideId || !loc) return;
+          const idx = loc.indexOf(':');
+          if (idx <= 0) return;
+          const line = Number(loc.slice(0, idx));
+          const column = Number(loc.slice(idx + 1));
+          if (!Number.isFinite(line) || !Number.isFinite(column)) return;
+          setUploading(true);
+          handleDrop(slideId, file, line, column)
+            .catch(() => toast.error(t.imagePlaceholder.uploadFailed))
+            .finally(() => setUploading(false));
+        },
+      }
+    : null;
+
   return (
     <div
       {...rest}
+      {...dndProps}
       data-slide-placeholder={hint}
       data-placeholder-w={width}
       data-placeholder-h={height}
@@ -93,10 +143,82 @@ export function ImagePlaceholder({
           </span>
         )}
       </div>
+      {import.meta.env.DEV && (dragActive || uploading) && (
+        <DropOverlay
+          label={uploading ? t.imagePlaceholder.uploading : t.imagePlaceholder.dropOverlay}
+        />
+      )}
+    </div>
+  );
+}
+
+function DropOverlay({ label }: { label: string }) {
+  return (
+    <div
+      aria-hidden
+      style={{
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+        borderRadius: 12,
+        border: '2px dashed oklch(0.62 0.18 250)',
+        background: 'oklch(0.62 0.18 250 / 0.08)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <span
+        style={{
+          fontSize: 12,
+          fontWeight: 600,
+          letterSpacing: '0.02em',
+          color: 'oklch(0.45 0.16 250)',
+          background: 'rgba(255,255,255,0.92)',
+          padding: '6px 10px',
+          borderRadius: 6,
+          boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
+        }}
+      >
+        {label}
+      </span>
     </div>
   );
 }
 
+function hasImageFile(e: React.DragEvent): boolean {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i] === 'Files') return true;
+  }
+  return false;
+}
+
+function pickImageFile(files: FileList): File | null {
+  for (let i = 0; i < files.length; i++) {
+    const f = files[i];
+    if (f.type.startsWith('image/')) return f;
+  }
+  return null;
+}
+
+async function handleDrop(slideId: string, file: File, line: number, column: number) {
+  const { ok, entry } = await uploadWithAutoRename(slideId, file);
+  if (!ok || !entry) throw new Error('upload failed');
+  const res = await fetch('/__edit', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({
+      slideId,
+      line,
+      column,
+      ops: [{ kind: 'replace-placeholder-with-image', assetPath: `./assets/${entry.name}` }],
+    }),
+  });
+  if (!res.ok) throw new Error(`edit failed (${res.status})`);
+}
+
 function PlaceholderIcon() {
   return (
     <svg