@open-slide/core 1.0.6 → 1.1.0

package/dist/{build-4wOJF1l4.js → build-DSqSio-T.js}

@@ -1,5 +1,5 @@
 import "./design-C13iz9_4.js";
-import { createViteConfig } from "./config-evLWCV1-.js";
+import { createViteConfig } from "./config-KdiYeWtK.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-BUr0S-Ij.js");
+		const { dev } = await import("../dev-B_GVbr11.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-4wOJF1l4.js");
+		const { build } = await import("../build-DSqSio-T.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-DP_gIphz.js");
+		const { preview } = await import("../preview-D_mxhj7w.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-D2y1AXaN.d.ts → config-C7vMYzFD.d.ts}

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

package/dist/{config-evLWCV1-.js → config-KdiYeWtK.js}

@@ -647,8 +647,11 @@ function planReplacePlaceholder(ast, element, assetPath) {
 	const { identifier, importSplice } = planAssetImport(ast, assetPath);
 	const styleParts = [];
 	if (width != null) styleParts.push(`width: ${width}`);
+	else if (height != null) styleParts.push(`width: '100%'`);
 	if (height != null) styleParts.push(`height: ${height}`);
+	else if (width != null) styleParts.push(`height: '100%'`);
 	styleParts.push(`objectFit: 'cover'`);
+	styleParts.push(`objectPosition: '50% 50%'`);
 	const replacement = `<img src={${identifier}} alt=${jsString$1(hint)} style={{ ${styleParts.join(", ")} }} />`;
 	return {
 		importSplice,
@@ -1521,6 +1524,84 @@ function updateMetaTitleInSource(source, title) {
 	const insertion = `export const meta: SlideMeta = { title: ${newLiteral} };\n\n`;
 	return source.slice(0, exportDefaultIdx) + insertion + source.slice(exportDefaultIdx);
 }
+function findDefaultExportArray(source) {
+	let ast;
+	try {
+		ast = parse(source, {
+			sourceType: "module",
+			plugins: ["typescript", "jsx"],
+			errorRecovery: true
+		});
+	} catch {
+		return null;
+	}
+	const body = ast.program?.body ?? [];
+	for (const node of body) {
+		if (node.type !== "ExportDefaultDeclaration") continue;
+		let inner = node.declaration;
+		while (inner && (inner.type === "TSAsExpression" || inner.type === "TSSatisfiesExpression")) inner = inner.expression;
+		if (!inner || inner.type !== "ArrayExpression") return null;
+		const arrayStart = inner.start;
+		const arrayEnd = inner.end;
+		const rawElements = inner.elements ?? [];
+		const elements = [];
+		for (const el of rawElements) {
+			if (!el || typeof el.start !== "number" || typeof el.end !== "number") return null;
+			elements.push({
+				start: el.start,
+				end: el.end
+			});
+		}
+		return {
+			elements,
+			arrayStart,
+			arrayEnd
+		};
+	}
+	return null;
+}
+/**
+* Rewrite `export default [...]` so its elements appear in the requested order.
+*
+* `order[i]` is the original index that should land at new position `i`. The
+* function preserves each element's exact source slice (including any inline
+* comments that hug an identifier) and keeps the inter-element separator slots
+* in their original positions, so a 3-page array `[A, B, C]` reordered to
+* `[2, 0, 1]` becomes `[C, A, B]` with the same indentation and trailing
+* commas the author wrote.
+*
+* Returns `null` when the file's default export isn't an array literal, or the
+* order is not a valid permutation of `[0, n-1]`.
+*/
+function reorderDefaultExportPagesInSource(source, order) {
+	const found = findDefaultExportArray(source);
+	if (!found) return null;
+	const { elements, arrayStart, arrayEnd } = found;
+	const n = elements.length;
+	if (order.length !== n) return null;
+	const seen = new Set();
+	for (const idx of order) {
+		if (!Number.isInteger(idx) || idx < 0 || idx >= n) return null;
+		if (seen.has(idx)) return null;
+		seen.add(idx);
+	}
+	if (n === 0) return source;
+	let identity = true;
+	for (let i = 0; i < n; i++) if (order[i] !== i) {
+		identity = false;
+		break;
+	}
+	if (identity) return source;
+	const prefix = source.slice(arrayStart, elements[0].start);
+	const suffix = source.slice(elements[n - 1].end, arrayEnd);
+	const separators = [];
+	for (let i = 0; i < n - 1; i++) separators.push(source.slice(elements[i].end, elements[i + 1].start));
+	const elementText = elements.map((el) => source.slice(el.start, el.end));
+	let rebuilt = prefix + elementText[order[0]];
+	for (let i = 1; i < n; i++) rebuilt += separators[i - 1] + elementText[order[i]];
+	rebuilt += suffix;
+	return source.slice(0, arrayStart) + rebuilt + source.slice(arrayEnd);
+}
 function validateIcon(v) {
 	if (!v || typeof v !== "object") return null;
 	const icon = v;
@@ -1577,6 +1658,34 @@ function filesPlugin(opts) {
 				const url = new URL(req.url ?? "/", "http://local");
 				const method = req.method ?? "GET";
 				try {
+					const reorderMatch = url.pathname.match(/^\/([^/]+)\/reorder$/);
+					if (reorderMatch && method === "PUT") {
+						const slideId$1 = reorderMatch[1];
+						if (!SLIDE_ID_RE.test(slideId$1)) return json(res, 400, { error: "invalid slideId" });
+						const body = await readBody(req);
+						if (!Array.isArray(body.order)) return json(res, 400, { error: "invalid order" });
+						const order = [];
+						for (const v of body.order) {
+							if (!Number.isInteger(v)) return json(res, 400, { error: "invalid order" });
+							order.push(v);
+						}
+						const entry = resolveSlideEntry(slidesRoot, slideId$1);
+						if (!entry) return json(res, 400, { error: "invalid slideId" });
+						let source;
+						try {
+							source = await fs.readFile(entry, "utf8");
+						} catch {
+							return json(res, 404, { error: "slide not found" });
+						}
+						const updated = reorderDefaultExportPagesInSource(source, order);
+						if (updated === null) return json(res, 422, { error: "could not reorder pages — order must be a permutation of the existing array" });
+						if (updated !== source) await fs.writeFile(entry, updated, "utf8");
+						return json(res, 200, {
+							ok: true,
+							slideId: slideId$1,
+							order
+						});
+					}
 					const idMatch = url.pathname.match(/^\/([^/]+)$/);
 					if (!idMatch) return next();
 					const slideId = idMatch[1];

package/dist/{dev-BUr0S-Ij.js → dev-B_GVbr11.js}

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

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Locale, Plural } from "./types-BVvl_xup.js";
-import { OpenSlideConfig } from "./config-D2y1AXaN.js";
+import { Locale, Plural } from "./types-DYgVpIGo.js";
+import { OpenSlideConfig } from "./config-C7vMYzFD.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { CSSProperties, ComponentType, HTMLAttributes } from "react";
 

package/dist/locale/index.d.ts

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

package/dist/locale/index.js

@@ -177,6 +177,13 @@ const en = {
 		pickerLoading: "Loading…",
 		pickerEmpty: "No images in this slide's assets folder yet. Add some from the Assets tab.",
 		placeholderHintLabel: "Hint:",
+		crop: "Crop…",
+		cropDialogTitle: "Crop image",
+		cropDialogDescription: "Drag the frame to choose what stays visible.",
+		cropFitCover: "Fill",
+		cropFitContain: "Fit",
+		cropApply: "Apply",
+		cropResetAria: "Reset crop",
 		noteForAgent: "Note for the agent",
 		noteAgentPlaceholder: "Describe a change for the agent…",
 		noteShortcutHint: "⌘↵ to send",
@@ -214,7 +221,9 @@ const en = {
 		radiusLabel: "Radius",
 		designToggle: "Design",
 		designToggleTitle: "Design tokens",
-		fontPresetCustom: "Custom…"
+		fontPresetCustom: "Custom…",
+		shuffleAria: "Shuffle design",
+		shuffleTitle: "Shuffle for inspiration"
 	},
 	asset: {
 		devOnlyMessage: "Asset management is only available in dev mode.",
@@ -483,6 +492,13 @@ const ja = {
 		pickerLoading: "読み込み中…",
 		pickerEmpty: "このスライドのアセットフォルダにまだ画像がありません。「アセット」タブから追加してください。",
 		placeholderHintLabel: "ヒント:",
+		crop: "トリミング…",
+		cropDialogTitle: "画像をトリミング",
+		cropDialogDescription: "枠をドラッグして表示する範囲を選択します。",
+		cropFitCover: "塗りつぶす",
+		cropFitContain: "全体表示",
+		cropApply: "適用",
+		cropResetAria: "トリミングをリセット",
 		noteForAgent: "エージェントへのメモ",
 		noteAgentPlaceholder: "エージェントに依頼する変更を記述…",
 		noteShortcutHint: "⌘↵ で送信",
@@ -520,7 +536,9 @@ const ja = {
 		radiusLabel: "角丸",
 		designToggle: "デザイン",
 		designToggleTitle: "デザイントークン",
-		fontPresetCustom: "カスタム…"
+		fontPresetCustom: "カスタム…",
+		shuffleAria: "デザインをシャッフル",
+		shuffleTitle: "シャッフルしてインスピレーションを得る"
 	},
 	asset: {
 		devOnlyMessage: "アセット管理は開発モードでのみ利用できます。",
@@ -777,6 +795,13 @@ const zhCN = {
 		pickerLoading: "加载中…",
 		pickerEmpty: "该幻灯片的素材文件夹中尚无图片。请从「素材」标签页添加。",
 		placeholderHintLabel: "提示:",
+		crop: "裁剪…",
+		cropDialogTitle: "裁剪图片",
+		cropDialogDescription: "拖动框线决定要保留的可见区域。",
+		cropFitCover: "填满",
+		cropFitContain: "完整显示",
+		cropApply: "应用",
+		cropResetAria: "重置裁剪",
 		noteForAgent: "给代理的备注",
 		noteAgentPlaceholder: "描述你希望代理执行的更改…",
 		noteShortcutHint: "⌘↵ 发送",
@@ -814,7 +839,9 @@ const zhCN = {
 		radiusLabel: "圆角",
 		designToggle: "设计",
 		designToggleTitle: "设计样式",
-		fontPresetCustom: "自定义…"
+		fontPresetCustom: "自定义…",
+		shuffleAria: "随机设计",
+		shuffleTitle: "随机配色获取灵感"
 	},
 	asset: {
 		devOnlyMessage: "素材管理仅在开发模式下可用。",
@@ -1071,6 +1098,13 @@ const zhTW = {
 		pickerLoading: "載入中…",
 		pickerEmpty: "此投影片的素材資料夾尚未有圖片。請從「素材」分頁加入。",
 		placeholderHintLabel: "提示：",
+		crop: "裁切…",
+		cropDialogTitle: "裁切圖片",
+		cropDialogDescription: "拖曳框線決定要保留的可見範圍。",
+		cropFitCover: "填滿",
+		cropFitContain: "完整顯示",
+		cropApply: "套用",
+		cropResetAria: "重設裁切",
 		noteForAgent: "給代理的備註",
 		noteAgentPlaceholder: "描述你希望代理進行的修改…",
 		noteShortcutHint: "⌘↵ 送出",
@@ -1108,7 +1142,9 @@ const zhTW = {
 		radiusLabel: "圓角",
 		designToggle: "設計",
 		designToggleTitle: "設計樣式",
-		fontPresetCustom: "自訂…"
+		fontPresetCustom: "自訂…",
+		shuffleAria: "隨機設計",
+		shuffleTitle: "隨機配色獲取靈感"
 	},
 	asset: {
 		devOnlyMessage: "素材管理僅在開發模式下可用。",

package/dist/{preview-DP_gIphz.js → preview-D_mxhj7w.js}

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

package/dist/{types-BVvl_xup.d.ts → types-DYgVpIGo.d.ts}

@@ -187,6 +187,13 @@ type Locale = {
     pickerLoading: string;
     pickerEmpty: string;
     placeholderHintLabel: string;
+    crop: string;
+    cropDialogTitle: string;
+    cropDialogDescription: string;
+    cropFitCover: string;
+    cropFitContain: string;
+    cropApply: string;
+    cropResetAria: string;
     noteForAgent: string;
     noteAgentPlaceholder: string;
     noteShortcutHint: string;
@@ -223,6 +230,8 @@ type Locale = {
     designToggle: string;
     designToggleTitle: string;
     fontPresetCustom: string;
+    shuffleAria: string;
+    shuffleTitle: string;
   };
   asset: {
     devOnlyMessage: string;

package/dist/vite/index.d.ts

@@ -1,5 +1,5 @@
-import "../types-BVvl_xup.js";
-import { OpenSlideConfig } from "../config-D2y1AXaN.js";
+import "../types-DYgVpIGo.js";
+import { OpenSlideConfig } from "../config-C7vMYzFD.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-evLWCV1-.js";
+import { createViteConfig } from "../config-KdiYeWtK.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {
@@ -53,6 +53,9 @@
   "dependencies": {
     "@babel/parser": "^7.29.2",
     "@babel/types": "^7.29.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/geist": "^5.2.8",
     "@tailwindcss/vite": "^4.2.2",
     "@vitejs/plugin-react": "^4.3.3",
@@ -68,6 +71,7 @@
     "radix-ui": "^1.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-image-crop": "^11.0.10",
     "react-router-dom": "^6.26.2",
     "shadcn": "^4.3.0",
     "sonner": "^2.0.7",

package/src/app/components/inspector/image-crop-dialog.tsx

@@ -0,0 +1,168 @@
+import { type SyntheticEvent, useEffect, useRef, useState } from 'react';
+import ReactCrop, { type Crop, type PercentCrop } from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useLocale } from '@/lib/use-locale';
+
+export type ImageCropResult = {
+  fit: 'cover' | 'contain';
+  x: number;
+  y: number;
+};
+
+export function ImageCropDialog({
+  src,
+  targetWidth,
+  targetHeight,
+  initialFit,
+  initialPosition,
+  onClose,
+  onApply,
+}: {
+  src: string;
+  targetWidth: number;
+  targetHeight: number;
+  initialFit: 'cover' | 'contain';
+  initialPosition: { x: number; y: number };
+  onClose: () => void;
+  onApply: (result: ImageCropResult) => void;
+}) {
+  const t = useLocale();
+  const [fit, setFit] = useState<'cover' | 'contain'>(initialFit);
+  const aspect = targetWidth > 0 && targetHeight > 0 ? targetWidth / targetHeight : 1;
+  const [crop, setCrop] = useState<Crop | undefined>(undefined);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  const onImageLoad = (e: SyntheticEvent<HTMLImageElement>) => {
+    const im = e.currentTarget;
+    setCrop(makeMaxSizeCrop(im.naturalWidth, im.naturalHeight, aspect, initialPosition));
+  };
+
+  useEffect(() => {
+    const im = imgRef.current;
+    if (!im || !im.complete || !im.naturalWidth || !im.naturalHeight) return;
+    setCrop((prev) => {
+      const pos = prev ? deriveObjectPosition(prev as PercentCrop) : initialPosition;
+      return makeMaxSizeCrop(im.naturalWidth, im.naturalHeight, aspect, pos);
+    });
+  }, [aspect, initialPosition]);
+
+  const onApplyClick = () => {
+    if (fit === 'contain') {
+      onApply({ fit, x: 50, y: 50 });
+      return;
+    }
+    const pos =
+      crop && crop.unit === '%' ? deriveObjectPosition(crop as PercentCrop) : { x: 50, y: 50 };
+    onApply({ fit, x: round2(pos.x), y: round2(pos.y) });
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{t.inspector.cropDialogTitle}</DialogTitle>
+          <DialogDescription>{t.inspector.cropDialogDescription}</DialogDescription>
+        </DialogHeader>
+        <div className="flex justify-center">
+          <ToggleGroup
+            type="single"
+            value={fit}
+            onValueChange={(v) => {
+              if (v === 'cover' || v === 'contain') setFit(v);
+            }}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="cover" className="text-xs">
+              {t.inspector.cropFitCover}
+            </ToggleGroupItem>
+            <ToggleGroupItem value="contain" className="text-xs">
+              {t.inspector.cropFitContain}
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <div className="flex h-[420px] w-full items-center justify-center overflow-hidden rounded-md border bg-[repeating-conic-gradient(theme(colors.muted)_0_25%,transparent_0_50%)] bg-[length:12px_12px]">
+          {fit === 'cover' ? (
+            <ReactCrop
+              crop={crop}
+              onChange={(_, percentCrop) => setCrop(percentCrop)}
+              aspect={aspect}
+              keepSelection
+              locked
+              className="max-h-full"
+            >
+              <img
+                ref={imgRef}
+                src={src}
+                alt=""
+                style={{ maxHeight: 420, maxWidth: '100%' }}
+                onLoad={onImageLoad}
+              />
+            </ReactCrop>
+          ) : (
+            <img src={src} alt="" className="max-h-full max-w-full object-contain" />
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {t.common.cancel}
+          </Button>
+          <Button onClick={onApplyClick}>{t.inspector.cropApply}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function makeMaxSizeCrop(
+  naturalW: number,
+  naturalH: number,
+  aspect: number,
+  position: { x: number; y: number },
+): PercentCrop {
+  if (naturalW <= 0 || naturalH <= 0) {
+    return { unit: '%', x: 0, y: 0, width: 100, height: 100 };
+  }
+  const sourceAspect = naturalW / naturalH;
+  let width = 100;
+  let height = 100;
+  if (aspect >= sourceAspect) {
+    width = 100;
+    height = (sourceAspect / aspect) * 100;
+  } else {
+    height = 100;
+    width = (aspect / sourceAspect) * 100;
+  }
+  const slackX = 100 - width;
+  const slackY = 100 - height;
+  const x = clamp((position.x / 100) * slackX, 0, slackX);
+  const y = clamp((position.y / 100) * slackY, 0, slackY);
+  return { unit: '%', x, y, width, height };
+}
+
+function deriveObjectPosition(crop: PercentCrop): { x: number; y: number } {
+  const slackX = 100 - crop.width;
+  const slackY = 100 - crop.height;
+  return {
+    x: slackX > 0 ? clamp((crop.x / slackX) * 100, 0, 100) : 50,
+    y: slackY > 0 ? clamp((crop.y / slackY) * 100, 0, 100) : 50,
+  };
+}
+
+function clamp(v: number, lo: number, hi: number) {
+  return v < lo ? lo : v > hi ? hi : v;
+}
+
+function round2(n: number): number {
+  return Math.round(n * 100) / 100;
+}

package/src/app/components/inspector/inspect-overlay.tsx

@@ -12,7 +12,7 @@ const FRAME_MORPH_MS = 180;
 const LAYOUT_TRACK_MS = PANEL_TRANSITION_MS + FRAME_MORPH_MS;
 
 export function InspectOverlay() {
-  const { active, slideId, selected, setSelected, cancel } = useInspector();
+  const { active, slideId, selected, setSelected, cancel, openCrop } = useInspector();
   const overlayRef = useRef<HTMLDivElement>(null);
   const [hover, setHover] = useState<Highlight | null>(null);
 
@@ -50,15 +50,30 @@ export function InspectOverlay() {
       setHover({ hit });
     };
 
+    const onDblClick = (e: MouseEvent) => {
+      if (e.target instanceof Element && e.target.closest('[data-inspector-ui]')) return;
+      const el = pickElement(e.clientX, e.clientY);
+      if (!el) return;
+      const hit = findSlideSource(el, slideId, { hostOnly: true });
+      if (!hit) return;
+      if (!(hit.anchor instanceof HTMLImageElement)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setSelected({ line: hit.line, column: hit.column, anchor: hit.anchor });
+      openCrop(hit.anchor);
+    };
+
     window.addEventListener('pointermove', onMove, true);
     window.addEventListener('click', onClick, true);
+    window.addEventListener('dblclick', onDblClick, true);
     window.addEventListener('keydown', onKey, true);
     return () => {
       window.removeEventListener('pointermove', onMove, true);
       window.removeEventListener('click', onClick, true);
+      window.removeEventListener('dblclick', onDblClick, true);
       window.removeEventListener('keydown', onKey, true);
     };
-  }, [active, slideId, setSelected, cancel]);
+  }, [active, slideId, setSelected, cancel, openCrop]);
 
   return (
     <FrameOverlay

package/src/app/components/inspector/inspector-panel.tsx

@@ -202,7 +202,12 @@ export function InspectorPanel() {
         <>
           <Separator />
           <Section title={t.inspector.imageSection}>
-            <ImageField slideId={slideId} src={pinSnapshot.imageSrc} apply={apply} />
+            <ImageField
+              slideId={slideId}
+              src={pinSnapshot.imageSrc}
+              anchor={pinSelected.anchor}
+              apply={apply}
+            />
           </Section>
         </>
       )}
@@ -587,14 +592,18 @@ function ColorField({
 function ImageField({
   slideId,
   src,
+  anchor,
   apply,
 }: {
   slideId: string;
   src: string;
+  anchor: HTMLElement;
   apply: (ops: EditOp[]) => void;
 }) {
   const [open, setOpen] = useState(false);
   const t = useLocale();
+  const { openCrop } = useInspector();
+  const isImage = anchor.tagName === 'IMG';
   return (
     <div className="space-y-2">
       <div className="flex items-center gap-3">
@@ -609,16 +618,29 @@ function ImageField({
             }}
           />
         </div>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className="flex-1"
-          onClick={() => setOpen(true)}
-        >
-          <ImageIcon className="size-3.5" />
-          {t.inspector.replace}
-        </Button>
+        <div className="flex flex-1 gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => setOpen(true)}
+          >
+            <ImageIcon className="size-3.5" />
+            {t.inspector.replace}
+          </Button>
+          {isImage && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="flex-1"
+              onClick={() => openCrop(anchor as HTMLImageElement)}
+            >
+              {t.inspector.crop}
+            </Button>
+          )}
+        </div>
       </div>
       {open && (
         <AssetPickerDialog
@@ -626,14 +648,25 @@ function ImageField({
           onClose={() => setOpen(false)}
           onPick={(asset) => {
             setOpen(false);
-            apply([
+            const ops: EditOp[] = [
               {
                 kind: 'set-attr-asset',
                 attr: 'src',
                 assetPath: `./assets/${asset.name}`,
                 previewUrl: asset.url,
               },
-            ]);
+            ];
+            if (isImage) {
+              const cs = window.getComputedStyle(anchor);
+              if (cs.objectFit !== 'cover' && cs.objectFit !== 'contain') {
+                ops.push({ kind: 'set-style', key: 'objectFit', value: 'cover' });
+              }
+              const op = cs.objectPosition.trim();
+              if (!op || op === '0% 0%' || op === 'auto') {
+                ops.push({ kind: 'set-style', key: 'objectPosition', value: '50% 50%' });
+              }
+            }
+            apply(ops);
           }}
         />
       )}