@growgroup/visual-editor 0.9.1 → 0.10.0

package/README.md

@@ -116,9 +116,73 @@ setEditorIO({
 
 `onSave` には `contentId` が付くので、どのページの本文かはそれで見分けてください。
 `contentId` プロップを変えると、エディタがそのページへ移ります。
-操作(⌘+ホイールで拡大縮小、Space+ドラッグで移動、⇧1 全体、⇧2 編集中のページ、⇧R 定規)と仕組みは
+操作(⌘+ホイール・ピンチで拡大縮小、Space+ドラッグで移動、⇧1 全体、⇧2 編集中のページ、⇧R 定規)と仕組みは
 [docs/multi-frame-canvas-2026-09.md](docs/multi-frame-canvas-2026-09.md)。
 
+### キャンバスの拡大縮小を Figma にそろえる・紙面の外の領域(0.10.0)
+
+- **Safari・WKWebView のトラックパッドのピンチでも拡大縮小します**。WebKit はピンチを `gesturestart` / `gesturechange` で送る
+  (Chrome・Edge・Electron は ctrl 付きの wheel)。以前は止めるだけで何も起きませんでした。紙面(iframe)の上のピンチも効きます。
+  どの経路(ホイール・ピンチ・タッチ)もカーソル位置を中心にします
+- IME の変換中のキー(⌘+ や Space 等)は奪いません
+- `canvasZoomOptions` で拡大縮小の設定を変えられます。**省略時は従来の挙動のまま**です
+  - `min` / `max`: 倍率の範囲(省略時 2%〜400%)
+  - `steps`: ⌘+ / ⌘− とヘッダーの +/− の刻み。`'ratio'`(1.25 倍ずつ。省略時)か `'powers-of-two'`(…50% → 100% → 200%…。Figma)
+  - `fitShortcut`: ⌘2 / ⇧2 の合わせ先。`'page'`(編集中のページ。省略時)か `'selection'`(選んでいる要素。無ければページ。Figma。倍率メニューに「選択範囲に合わせる」も出る)
+- 紙面(`#artboard`)の外、上下に利用側が表示だけの領域(サイトの共通のヘッダー・フッター等)を並べるときは、
+  その要素に `FRAME_REGION_ATTRIBUTE`(`data-editor-frame-region`)を付けるとフレームの高さに入ります(付けないと紙面の高さで切れます)。
+  保存・共同編集が送るのは `#artboard` の中身だけなので、本文には混ざりません
+- 仕組みと確かめたことは [docs/figma-zoom-2026-09.md](docs/figma-zoom-2026-09.md) と [docs/frame-regions-2026-09.md](docs/frame-regions-2026-09.md)
+
+```tsx
+<VisualEditor
+  enableMultiPageCanvas
+  // Figma にそろえる(省略時は 2%〜400%・1.25 倍ずつ・⌘2 は編集中のページ)
+  canvasZoomOptions={{ min: 0.02, max: 256, steps: "powers-of-two", fitShortcut: "selection" }}
+  /* … */
+/>
+```
+
+### コメントに操作を足す(0.10.0)
+
+- `io.commentActions` で、コメントパネルの**各スレッド**と**パネル上部(いま開いているページ)**に利用側のボタンを足せます。
+  何をするか(返信を足す・外部に依頼する・別画面を開く など)は利用側が決め、エディタは
+  ボタンを出す・押している間の表示(二重押しの防止)・失敗の表示・戻り値の deck の反映だけを受け持ちます
+- **渡さなければ見た目も挙動も 0.9 系と同じ**です。コメントパネルは `commentAction` がある場合だけ出るので、
+  `commentActions` だけ渡しても出ません
+- スレッドの操作は既定で**未解決のスレッドにだけ**、パネルの操作は既定で**そのページに未解決が 1 件以上あるときだけ**出ます(`when` で変えられます)
+- `run` が `{ deck }` を返せば一覧に反映し、`{ message }` を返せば押した場所の下に出します。投げたエラーも同じ場所に出します
+- 走っている間も他のコメント操作(投稿・返信・解決)は止めません
+- `apiFetch` を渡している利用側に出る「AIで修正」「すべてAIで修正」(`/__comment-fix`)は今までどおりで、これとは別物です
+- 出すのは編集画面の右のコメントパネルだけです(`CommentBoard` / `CommentBoardPanel` には出しません)
+
+```ts
+setEditorIO({
+  loadDeck,
+  commentAction,
+  commentActions: {
+    thread: [{
+      id: "ask-fix",
+      label: "直してもらう",
+      run: async ({ page, comment }) => {
+        await requestFix(page, comment.id);          // 利用側の処理
+        return { message: "依頼しました" };           // 押した場所の下に出る
+      },
+    }],
+    panel: [{
+      id: "ask-fix-all",
+      label: "未解決をまとめて直してもらう",
+      run: async ({ page, comments }) => {
+        await requestFix(page, comments.filter((c) => !c.resolved).map((c) => c.id));
+        return { message: "依頼しました" };
+      },
+    }],
+  },
+});
+```
+
+- 仕組みと確かめたことは [docs/comment-actions-2026-09.md](docs/comment-actions-2026-09.md)
+
 ### リアルタイム共同編集(Figma 風、0.6.0)
 
 `io.collab` を渡すと、同じページを複数人が同時に編集できます。渡さなければ今までどおり
@@ -233,6 +297,7 @@ setEditorIO({
 |---|---|
 | `loadDeck` | 一覧は空として振る舞う |
 | `commentAction` | コメント UI を出さない |
+| `commentActions` | コメントパネルに利用側の操作を足さない（0.9 系と同じ見た目） |
 | `deckOps` | 並び替え・複製・削除を出さない |
 | `apiFetch` | ページ設定・AI 機能は「未提供」として既定値へ落ちる |
 | `uploadImage` | 画像は data URL のまま本文に埋め込む |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growgroup/visual-editor",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "HTMLをブラウザ上で直接編集するビジュアルエディタ。スライド(固定サイズ)とWebページ(可変高さ)の両方に使え、保存先はアダプタで差し替えられます。",
   "keywords": [
     "visual-editor",

package/src/editor/EditorContext.tsx

@@ -80,6 +80,7 @@ import {
   useMultiPageCanvasOptional,
 } from './contexts/MultiPageCanvasContext';
 import type { CSSVariableDefinition } from '../types/css-variables';
+import type { CanvasZoomOptions } from './utils/canvas-gestures';
 import { debugLog } from './utils/debug';
 
 // 型の再エクスポート
@@ -284,6 +285,8 @@ interface EditorProviderProps {
   enableMultiPageCanvas?: boolean;
   /** キャンバスの表示位置(倍率・スクロール)を記憶するキー */
   canvasStorageKey?: string | null;
+  /** マルチフレームのキャンバスの拡大縮小の設定(範囲・刻み・⌘2 の合わせ先。省略時は従来の挙動) — 0.10.0 */
+  canvasZoomOptions?: CanvasZoomOptions;
   /** @deprecated Use contentList instead */
   slides?: ContentListItem[];
   /** @deprecated Use currentContentId instead */
@@ -541,6 +544,7 @@ export function EditorProvider({
   // Multi-page canvas
   enableMultiPageCanvas = false,
   canvasStorageKey,
+  canvasZoomOptions,
   // deprecated props
   slides,
   currentSlideId,
@@ -568,7 +572,7 @@ export function EditorProvider({
                       currentSlideId={currentSlideId}
                       onSlideChange={onSlideChange}
                     >
-                      <ConditionalMultiPageProvider enabled={enableMultiPageCanvas} storageKey={canvasStorageKey}>
+                      <ConditionalMultiPageProvider enabled={enableMultiPageCanvas} storageKey={canvasStorageKey} zoomOptions={canvasZoomOptions}>
                         <EditorUIStateProviderWrapper>
                           <EditorVariablesProviderWrapper
                             initialVariables={initialVariables}

package/src/editor/FrontendVisualEditor.tsx

@@ -22,6 +22,7 @@ import {
 import type { MoveElementResult } from './hooks/useElementActions';
 import { EditorProvider, useEditorContext, type ContentListItem, type EditorMode } from './EditorContext';
 import type { DocumentAttributes } from './contexts/EditorArtboardContext';
+import type { CanvasZoomOptions } from './utils/canvas-gestures';
 import { PptTitleBar, PptRibbon, PptThumbnails, PptStatusBar, initialPptTheme, PPT_PALETTES, type PptTheme } from './components/ppt/PptChrome';
 import { LeftPanel } from './components/shell/LeftPanel';
 import { useAltMeasure } from './hooks/useAltMeasure';
@@ -187,6 +188,11 @@ export interface FrontendVisualEditorProps {
   onContentChange?: (contentId: string) => void;
   /** キャンバスの表示位置(倍率・スクロール)を記憶するキー。省略時は parentId */
   canvasStorageKey?: string;
+  /**
+   * マルチフレームのキャンバスの拡大縮小の設定(0.10.0)。省略時は従来の挙動(2%〜400%・1.25 倍ずつ・⌘2 は編集中のページ)。
+   * Figma にそろえるなら `{ min: 0.02, max: 256, steps: 'powers-of-two', fitShortcut: 'selection' }`
+   */
+  canvasZoomOptions?: CanvasZoomOptions;
   /**
    * 外部から渡すコンテンツリスト（指定時はAPI取得をスキップ）。
    * parentId を渡すとキャンバスが階層のツリーで並び、href を渡すと「別タブで開く」が付き、
@@ -3071,6 +3077,7 @@ export function FrontendVisualEditor({
   headerExtra,
   onContentChange: onContentChangeProp,
   canvasStorageKey,
+  canvasZoomOptions,
   documentAttributes,
 }: FrontendVisualEditorProps) {
   const { getIdToken } = useAuth();
@@ -3363,6 +3370,7 @@ export function FrontendVisualEditor({
       websiteId={effectiveParentId}
       enableMultiPageCanvas={enableMultiPageCanvas}
       canvasStorageKey={canvasStorageKey ?? effectiveParentId ?? null}
+      canvasZoomOptions={canvasZoomOptions}
     >
       <FrontendVisualEditorInner
         onSave={onSave}

package/src/editor/components/EditorCanvas.tsx

@@ -17,6 +17,7 @@ import {
   SLIDE_WIDTH,
   SLIDE_HEIGHT,
   WEBPAGE_MIN_HEIGHT,
+  FRAME_REGION_ATTRIBUTE,
 } from "../constants";
 import {
   applyCanvasZoomDom,
@@ -344,6 +345,13 @@ export function EditorCanvas() {
       }
     });
 
+    // 利用側が紙面(#artboard)の外、上下に並べた表示だけの領域(サイトの共通のヘッダー・フッター等)も
+    // フレームの高さに入れる。目印は FRAME_REGION_ATTRIBUTE(0.10.0。docs/frame-regions-2026-09.md)
+    iframeDoc.querySelectorAll(`[${FRAME_REGION_ATTRIBUTE}]`).forEach((el) => {
+      const bottom = (el as HTMLElement).getBoundingClientRect().bottom;
+      if (bottom > maxBottom) maxBottom = bottom;
+    });
+
     const scrollHeight = targetElement.scrollHeight;
     const computedHeight = Math.max(scrollHeight, maxBottom);
     // 埋め込み(マルチフレーム)ではフレーム = 紙面そのもの。下の余白は付けず、
@@ -949,6 +957,9 @@ export function EditorCanvas() {
           updateContentHeightRef.current();
         });
         resizeObserver.observe(artboardEl);
+        // 紙面の外の領域の大きさが変わったときも測り直す(#artboard-wrapper はそれらを含む)
+        const artboardWrapperEl = iframeDoc.getElementById("artboard-wrapper");
+        if (artboardWrapperEl) resizeObserver.observe(artboardWrapperEl);
         cleanupFunctions.push(() => resizeObserver.disconnect());
 
         debugLog(

package/src/editor/components/EditorHeader.tsx

@@ -124,8 +124,11 @@ export function EditorHeader({
   const canvas = useMultiPageCanvasOptional();
   const canvasView = useCanvasViewStateOptional();
   const zoom = canvas && canvasView ? canvasView.canvasZoom * 100 : singleZoom;
-  const minZoom = canvas ? CANVAS_MIN_ZOOM * 100 : MIN_ZOOM;
-  const maxZoom = canvas ? CANVAS_MAX_ZOOM * 100 : MAX_ZOOM;
+  // キャンバスの範囲は利用側が変えられる(canvasZoomOptions)。表示と +/− の可否も同じ範囲で
+  const minZoom = canvas ? (canvas.zoomOptions?.min ?? CANVAS_MIN_ZOOM) * 100 : MIN_ZOOM;
+  const maxZoom = canvas ? (canvas.zoomOptions?.max ?? CANVAS_MAX_ZOOM) * 100 : MAX_ZOOM;
+  // ⇧2 の合わせ先(canvasZoomOptions.fitShortcut)。'selection' のときだけ「選択範囲に合わせる」を出す
+  const fitsSelection = canvas?.zoomOptions?.fitShortcut === 'selection';
   const setZoom = (value: number) => {
     if (canvas) canvas.zoomTo(value / 100, { animate: true });
     else setSingleZoom(value);
@@ -420,6 +423,16 @@ export function EditorHeader({
                   className="cursor-pointer justify-between text-gray-300 hover:bg-[#444444] hover:text-white"
                 >
                   編集中のページに合わせる
+                  {!fitsSelection && <span className="text-[10px] text-gray-500">⇧2</span>}
+                </DropdownMenuItem>
+              )}
+              {canvas && fitsSelection && (
+                <DropdownMenuItem
+                  data-zoom-preset="selection"
+                  onClick={() => editorZoomApiRef.current?.selection()}
+                  className="cursor-pointer justify-between text-gray-300 hover:bg-[#444444] hover:text-white"
+                >
+                  選択範囲に合わせる
                   <span className="text-[10px] text-gray-500">⇧2</span>
                 </DropdownMenuItem>
               )}

package/src/editor/components/multi-page/MultiPageCanvasView.tsx

@@ -45,6 +45,7 @@ import { useEditorContext } from '../../EditorContext';
 import { useInfiniteCanvas } from '../../hooks/useInfiniteCanvas';
 import { useCanvasMarquee } from '../../hooks/useCanvasMarquee';
 import { editorZoomApiRef } from '../../hooks/useCanvasControls';
+import { selectionCanvasRect } from '../../utils/canvas-gestures';
 import { EditorAppearanceContext } from '../../contexts/EditorAppearanceContext';
 import { EditorCanvas } from '../EditorCanvas';
 import { PageFramePreview } from './PageFramePreview';
@@ -226,7 +227,7 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
   // 倍率・位置は購読しない(ホイール 1 段ごとにキャンバス全体が React を通ってしまう)。
   // 描画に要る「粗い倍率」だけを下の useLayoutEffect が間引いて渡す
   const activePageId = useCanvasActivePageId();
-  const { setZoom, setFitZoom, activeTool, iframeReady } = useEditorContext();
+  const { setZoom, setFitZoom, activeTool, iframeReady, iframeRef } = useEditorContext();
   const theme = useContext(EditorAppearanceContext) ?? 'light';
   const containerRef = useRef<HTMLDivElement>(null);
   const layerRef = useRef<HTMLDivElement>(null);
@@ -339,20 +340,27 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     setFitZoom(100);
   }, [setZoom, setFitZoom]);
 
-  // Cmd+0 / Cmd+1 / Cmd+2 とヘッダーの「全体表示」「100%」をキャンバスに向ける
+  // Cmd+0 / Cmd+1 / Cmd+2 とヘッダーの「全体表示」「100%」をキャンバスに向ける。
+  // ⌘2 / ⇧2 は既定で編集中のページ。`canvasZoomOptions.fitShortcut: 'selection'` なら Figma と同じく
+  // 選んでいる要素があればそこへ、無ければ編集中のページへ(0.10.0)
+  const { zoomToRect, zoomOptions } = canvas;
+  const fitsSelection = zoomOptions.fitShortcut === 'selection';
   useEffect(() => {
     editorZoomApiRef.current = {
       fit: () => zoomToFit({ animate: true }),
       actual: () => zoomToActual(),
       selection: () => {
-        if (activePageId) zoomToPage(activePageId, { animate: true });
+        const frame = pages.find((page) => page.id === activePageId);
+        const rect = fitsSelection ? selectionCanvasRect(iframeRef.current, frame?.position) : null;
+        if (rect) zoomToRect(rect, { animate: true });
+        else if (activePageId) zoomToPage(activePageId, { animate: true });
         else zoomToFit({ animate: true });
       },
     };
     return () => {
       editorZoomApiRef.current = null;
     };
-  }, [zoomToFit, zoomToActual, zoomToPage, activePageId]);
+  }, [zoomToFit, zoomToActual, zoomToPage, zoomToRect, fitsSelection, activePageId, pages, iframeRef]);
 
   // 初回の表示: 容器の大きさとフレームの並びが揃ったところで 1 回(決め方は applyInitialView)
   useEffect(() => {

package/src/editor/components/ppt/PptComments.tsx

@@ -21,7 +21,7 @@ import { useEditorContext } from '../../EditorContext';
 import { useCanvasViewStateOptional } from '../../contexts/MultiPageCanvasContext';
 import { useDeck, applyDeck } from '../../../components/viewer/useDeck';
 import { commentAction, type SlideComment } from '../../../lib/deck';
-import { can, io, type CommentRect, type EditorDeck } from '../../../io';
+import { can, io, type CommentRect, type EditorCommentActionResult, type EditorDeck } from '../../../io';
 import { useResizablePanel } from '../../hooks/useResizablePanel';
 import { readStorage, writeStorage } from '../../utils/storage';
 import { ConfirmDialog } from '../shell/ConfirmDialog';
@@ -696,6 +696,76 @@ export function PptCommentsPanel({
     }
   }, []);
 
+  /**
+   * 利用側が足した操作(io.commentActions)の進行状況。キーは `スレッド操作id:コメントid` /
+   * `パネル操作id:@page`。
+   *
+   * 共通の run() には載せない(「AIで修正」と同じ理由): 利用側の操作は外部に依頼して長くかかりうるので、
+   * 走らせている間ほかのコメント操作まで止めない。結果と失敗は押した場所の下に出す。
+   */
+  const [hostActions, setHostActions] = useState<Record<string, { running: boolean; message?: string; error?: string }>>({});
+  const hostRunning = useRef(new Set<string>());
+  const runHostAction = useCallback(async (key: string, fn: () => Promise<EditorCommentActionResult | void>) => {
+    if (hostRunning.current.has(key)) return;
+    hostRunning.current.add(key);
+    setHostActions((prev) => ({ ...prev, [key]: { running: true } }));
+    try {
+      const result = await fn();
+      if (result?.deck) applyDeck(result.deck);
+      setHostActions((prev) => ({ ...prev, [key]: { running: false, message: result?.message } }));
+    } catch (e) {
+      setHostActions((prev) => ({ ...prev, [key]: { running: false, error: String(e instanceof Error ? e.message : e).slice(0, 200) } }));
+    } finally {
+      hostRunning.current.delete(key);
+    }
+  }, []);
+
+  /** 押した場所の下に出す知らせ・失敗(利用側の操作) */
+  const renderHostActionStatus = (key: string) => {
+    const state = hostActions[key];
+    if (!state || state.running || (!state.message && !state.error)) return null;
+    return (
+      <p key={`${key}:status`} role={state.error ? 'alert' : 'status'} className="w-full text-[11px] leading-snug" style={{ color: state.error ? '#d13438' : pal.sub }}>
+        {state.error ?? state.message}
+      </p>
+    );
+  };
+
+  /** 利用側がスレッドに足した操作。渡されていなければ何も出さない */
+  const renderThreadActions = (c: SlideComment) => {
+    const shown = (io().commentActions?.thread ?? []).filter((action) => (action.when ? action.when(c, { page }) : !c.resolved));
+    if (shown.length === 0) return null;
+    return (
+      <div className="mt-2 flex flex-wrap items-center gap-1.5" data-comment-actions>
+        {shown.map((action) => {
+          const key = `${action.id}:${c.id}`;
+          const running = hostActions[key]?.running === true;
+          return (
+            <button
+              key={action.id}
+              type="button"
+              data-comment-action={action.id}
+              disabled={running}
+              aria-busy={running}
+              onClick={(e) => { e.stopPropagation(); void runHostAction(key, () => action.run({ page, comment: c })); }}
+              title={action.title}
+              className="flex items-center gap-1 rounded border px-1.5 py-1 text-[11px] transition-colors"
+              style={{ borderColor: pal.border, color: 'var(--ed-accent)' }}
+            >
+              {running ? <Loader2 className="h-3 w-3 animate-spin" /> : action.icon}
+              {action.label}
+            </button>
+          );
+        })}
+        {shown.map((action) => renderHostActionStatus(`${action.id}:${c.id}`))}
+      </div>
+    );
+  };
+
+  /** 利用側がパネル上部に足した、いまのページ全体への操作 */
+  const panelActions = (io().commentActions?.panel ?? []).filter((action) =>
+    action.when ? action.when({ page, comments }) : unresolvedCount(comments) > 0);
+
   /** 選択中の要素からアンカーを拾う(選択なしならページ全体へのコメント) */
   const currentAnchor = useMemo(() => {
     const doc = getIframeDoc();
@@ -851,6 +921,8 @@ export function PptCommentsPanel({
         </div>
       )}
 
+      {renderThreadActions(c)}
+
       {replyFor === c.id ? (
         <div className="mt-2 flex items-end gap-1.5">
           <textarea
@@ -932,6 +1004,31 @@ export function PptCommentsPanel({
             すべてAIで修正({unresolvedTotal})
           </button>
         )}
+        {panelActions.length > 0 && (
+          <div className="my-2 flex flex-wrap items-center gap-1.5" data-comment-panel-actions>
+            {panelActions.map((action) => {
+              const key = `${action.id}:@${page}`;
+              const running = hostActions[key]?.running === true;
+              return (
+                <button
+                  key={action.id}
+                  type="button"
+                  data-comment-panel-action={action.id}
+                  disabled={running}
+                  aria-busy={running}
+                  onClick={() => void runHostAction(key, () => action.run({ page, comments }))}
+                  title={action.title}
+                  className="flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px]"
+                  style={{ borderColor: pal.border, color: pal.text }}
+                >
+                  {running ? <Loader2 className="h-3 w-3 animate-spin" /> : action.icon}
+                  {action.label}
+                </button>
+              );
+            })}
+            {panelActions.map((action) => renderHostActionStatus(`${action.id}:@${page}`))}
+          </div>
+        )}
       </div>
       {(fixAll?.running || fixAll?.error) && (
         <div className="border-b px-3 py-1.5 text-[11px]" style={{ borderColor: pal.border, color: fixAll.error ? '#f66' : pal.sub }}>

package/src/editor/constants.ts

@@ -10,6 +10,15 @@ export const SLIDE_HEIGHT = 1080;
 export const WEBPAGE_WIDTH = 1440;
 export const WEBPAGE_MIN_HEIGHT = 900; // 最小高さ
 
+/**
+ * 紙面(#artboard)の外、上下に利用側が並べる「表示だけの領域」の目印(0.10.0)。
+ * 生きているエディタの文書で #artboard の兄弟(#artboard-wrapper の中)に置いた要素にこの属性を付けると、
+ * マルチフレームのキャンバスのフレームの高さに入る(付けないと紙面の高さで切れる)。
+ * 保存・共同編集が送るのは #artboard の中身だけなので、ここに置いたものは本文に混ざらない。
+ * 使い方は docs/frame-regions-2026-09.md
+ */
+export const FRAME_REGION_ATTRIBUTE = 'data-editor-frame-region';
+
 // レスポンシブブレイクポイントプリセット（webpageモード用）
 export const BREAKPOINT_PRESETS = [
   { id: 'default', name: 'デフォルト', width: 1400, icon: 'monitor', minRange: 1190, maxRange: 1920 },

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -42,6 +42,7 @@ import { SLIDE_HEIGHT, SLIDE_WIDTH, WEBPAGE_WIDTH } from '../constants';
 import type { EditorMode } from './EditorToolContext';
 import { io, type PreviewStyle } from '../../io';
 import { readStorage, writeStorage } from '../utils/storage';
+import { nextZoomLevel, type CanvasZoomOptions, type ResolvedCanvasZoomOptions } from '../utils/canvas-gestures';
 
 // ============================================================
 // 定数
@@ -51,10 +52,13 @@ import { readStorage, writeStorage } from '../utils/storage';
 export { WEBPAGE_WIDTH };
 /** 高さが未測定の webpage フレームに仮に与える高さ */
 export const WEBPAGE_MIN_HEIGHT = 1200;
-/** ズーム範囲(Figma は 2%〜25600%。紙面の編集で要るのはこの範囲) */
+/**
+ * ズーム範囲の既定(Figma は 2%〜25600%。紙面の編集で要るのはこの範囲)。
+ * 利用側は `canvasZoomOptions` で範囲・刻み・⌘2 の合わせ先を変えられる(0.10.0)
+ */
 export const MIN_ZOOM = 0.02;
 export const MAX_ZOOM = 4;
-/** ホイール 1 段のズーム倍率(ボタン・キー操作) */
+/** ボタン・キー操作の 1 段の倍率(`steps: 'ratio'`、既定) */
 const ZOOM_STEP = 1.25;
 /** 全体表示・ページ表示のときの余白(px、画面上) */
 const FIT_PADDING = 72;
@@ -225,6 +229,10 @@ export interface MultiPageCanvasContextValue {
   zoomToFit: (options?: { animate?: boolean }) => void;
   zoomToPage: (id: string, options?: { animate?: boolean }) => void;
   zoomToActual: () => void;
+  /** キャンバスの座標の矩形を、余白を取って画面に収める(100% を超えてもよい。選択範囲に合わせる等) — 0.10.0 */
+  zoomToRect: (rect: CanvasBounds, options?: { animate?: boolean }) => void;
+  /** 拡大縮小の設定(`canvasZoomOptions` を省略時の値で埋めたもの) — 0.10.0 */
+  zoomOptions: ResolvedCanvasZoomOptions;
   /** 指定のフレームが画面に入っていなければ、見える位置まで寄せる(倍率は変えない) */
   revealPage: (id: string) => void;
   /**
@@ -484,7 +492,17 @@ function fitView(
   };
 }
 
-const clampZoom = (z: number) => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, z));
+/** 利用側が渡した設定を省略時の値で埋める(範囲は片方だけ・逆転・0 以下を既定へ) */
+export function resolveCanvasZoomOptions(options?: CanvasZoomOptions | null): ResolvedCanvasZoomOptions {
+  const min = Number.isFinite(options?.min) && (options?.min as number) > 0 ? (options?.min as number) : MIN_ZOOM;
+  const max = Number.isFinite(options?.max) && (options?.max as number) > 0 ? (options?.max as number) : MAX_ZOOM;
+  const range = min <= max ? { min, max } : { min: MIN_ZOOM, max: MAX_ZOOM };
+  return {
+    ...range,
+    steps: options?.steps === 'powers-of-two' ? 'powers-of-two' : 'ratio',
+    fitShortcut: options?.fitShortcut === 'selection' ? 'selection' : 'page',
+  };
+}
 const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
 const prefersReducedMotion = () =>
   typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -518,6 +536,8 @@ interface MultiPageCanvasProviderProps {
   enabled: boolean;
   /** 見えている範囲を保存するキー(利用側の parentId 等)。無ければ保存しない */
   storageKey?: string | null;
+  /** 拡大縮小の設定(範囲・刻み・⌘2 の合わせ先)。省略時は従来の挙動(0.10.0) */
+  zoomOptions?: CanvasZoomOptions;
 }
 
 type PersistedView = {
@@ -546,7 +566,15 @@ function readPersistedView(key: string | null | undefined): PersistedView | null
   }
 }
 
-export function MultiPageCanvasProvider({ children, enabled, storageKey }: MultiPageCanvasProviderProps) {
+export function MultiPageCanvasProvider({ children, enabled, storageKey, zoomOptions: zoomOptionsProp }: MultiPageCanvasProviderProps) {
+  // 拡大縮小の設定。倍率はどの経路(ホイール・ピンチ・キー・ボタン・全体表示)も clampZoom で範囲に収める
+  const zoomOptions = useMemo<ResolvedCanvasZoomOptions>(
+    () => resolveCanvasZoomOptions(zoomOptionsProp),
+    [zoomOptionsProp?.min, zoomOptionsProp?.max, zoomOptionsProp?.steps, zoomOptionsProp?.fitShortcut],
+  );
+  const zoomOptionsRef = useRef(zoomOptions);
+  zoomOptionsRef.current = zoomOptions;
+  const clampZoom = useCallback((z: number) => Math.max(zoomOptionsRef.current.min, Math.min(zoomOptionsRef.current.max, z)), []);
   const artboard = useEditorArtboard();
   const { editorMode } = useEditorTool();
   const { viewportWidth } = useEditorView();
@@ -864,8 +892,17 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [setView, viewStore],
   );
 
-  const zoomIn = useCallback(() => zoomTo(viewStore.get().canvasZoom * ZOOM_STEP, { animate: true }), [zoomTo, viewStore]);
-  const zoomOut = useCallback(() => zoomTo(viewStore.get().canvasZoom / ZOOM_STEP, { animate: true }), [zoomTo, viewStore]);
+  // 刻みは既定で 1.25 倍ずつ。`steps: 'powers-of-two'` なら 2 の累乗の段(Figma。…50% → 100% → 200%…。段の間からは向きの側の段へ)
+  const stepZoom = useCallback((direction: 1 | -1) => {
+    const current = viewStore.get().canvasZoom;
+    const options = zoomOptionsRef.current;
+    const next = options.steps === 'powers-of-two'
+      ? nextZoomLevel(current, direction, options)
+      : current * (direction > 0 ? ZOOM_STEP : 1 / ZOOM_STEP);
+    zoomTo(next, { animate: true });
+  }, [zoomTo, viewStore]);
+  const zoomIn = useCallback(() => stepZoom(1), [stepZoom]);
+  const zoomOut = useCallback(() => stepZoom(-1), [stepZoom]);
   const zoomToActual = useCallback(() => zoomTo(1, { animate: true }), [zoomTo]);
 
   const zoomToFit = useCallback<MultiPageCanvasContextValue['zoomToFit']>(
@@ -876,6 +913,14 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [setView],
   );
 
+  // 選択範囲に合わせる等。全体表示と違って 100% で止めない(小さい要素は大きく見せる。Figma と同じ)
+  const zoomToRect = useCallback<MultiPageCanvasContextValue['zoomToRect']>(
+    (rect, options) => {
+      setView(fitView(rect, containerSize(), { padding: FIT_PADDING, maxZoom: zoomOptionsRef.current.max, rulers: rulersRef.current }), options);
+    },
+    [setView],
+  );
+
   const zoomToPage = useCallback<MultiPageCanvasContextValue['zoomToPage']>(
     (id, options) => {
       const page = pagesRef.current.find((p) => p.id === id);
@@ -1223,6 +1268,8 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       zoomToFit,
       zoomToPage,
       zoomToActual,
+      zoomToRect,
+      zoomOptions,
       revealPage,
       focusPage,
       activatePage,
@@ -1244,7 +1291,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [
       enabled, editorMode, pages, bounds, layout, getPage, updatePageFrame, setPageHtml, invalidatePages, artboard.documentAttributes,
       setPageHeight, ensurePageHtml, previewStyles, viewStore, setCanvasOffset, shiftView, setCanvasZoom, setView, zoomAt, zoomTo, zoomIn, zoomOut, zoomToFit, zoomToPage,
-      zoomToActual, revealPage, focusPage, activatePage, activatingPageId, registerContainer, isInteracting, markInteracting,
+      zoomToActual, zoomToRect, zoomOptions, revealPage, focusPage, activatePage, activatingPageId, registerContainer, isInteracting, markInteracting,
       persisted, applyInitialView, rulersVisible, toggleRulers, requestPreviewSlot, releasePreviewSlot,
       getPreviewImageZoomCap, reportThumbnailWidth, previewImageCapVersion,
     ],
@@ -1259,17 +1306,19 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
 export function ConditionalMultiPageProvider({
   enabled,
   storageKey,
+  zoomOptions,
   children,
 }: {
   enabled: boolean;
   storageKey?: string | null;
+  zoomOptions?: CanvasZoomOptions;
   children: React.ReactNode;
 }) {
   if (!enabled) {
     return <>{children}</>;
   }
   return (
-    <MultiPageCanvasProvider enabled={enabled} storageKey={storageKey}>
+    <MultiPageCanvasProvider enabled={enabled} storageKey={storageKey} zoomOptions={zoomOptions}>
       {children}
     </MultiPageCanvasProvider>
   );

package/src/editor/hooks/useBrowserZoomPrevention.ts

@@ -31,11 +31,11 @@ export function useBrowserZoomPrevention(): void {
       }
     };
 
-    // Safari/WebKitのジェスチャーイベントを防止
+    // Safari/WebKitのジェスチャーイベント(ピンチ)でのブラウザ拡大を防止
+    // 注: 伝播は止めない(0.10.0)。キャンバス(useInfiniteCanvas)がピンチを拡大縮小に使う。
+    //     以前は stopImmediatePropagation で握りつぶしていて、Safari・WKWebView ではピンチしても何も起きなかった
     const preventGesture = (e: Event) => {
       e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
       return false;
     };
 

package/src/editor/hooks/useCanvasControls.ts

@@ -610,12 +610,9 @@ export function useCanvasControls() {
     window.addEventListener('wheel', handleWheel, { passive: false, capture: true });
     document.addEventListener('wheel', handleWheel, { passive: false, capture: true });
 
+    // ブラウザの拡大だけを止める。伝播は止めない(0.10.0。キャンバスがピンチを拡大縮小に使う)
     const handleGesture = (e: Event) => {
-      if (isEditorOpen()) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-      }
+      if (isEditorOpen()) e.preventDefault();
     };
 
     window.addEventListener('gesturestart', handleGesture, { passive: false, capture: true });

package/src/editor/hooks/useInfiniteCanvas.ts

@@ -7,9 +7,13 @@
  * - ホイール: パン(2 本指スクロール)。Shift で横
  * - Ctrl/Cmd + ホイール、トラックパッドのピンチ: カーソル位置を固定してズーム
  * - Space + ドラッグ / 中ボタンドラッグ: パン
- * - Cmd/Ctrl + / - : 段階ズーム。Shift+0 = 100%、Shift+1 = 全体、Shift+2 = 編集中のページ、Shift+R = 定規
+ * - Safari・WKWebView のトラックパッドのピンチ(gesturestart / gesturechange): カーソル位置を固定してズーム(0.10.0)
+ * - Cmd/Ctrl + / - : 段階ズーム(既定 1.25 倍。canvasZoomOptions.steps で 2 の累乗の段)。Shift+0 = 100%、Shift+1 = 全体、
+ *   Shift+2 = 編集中のページ(canvasZoomOptions.fitShortcut: 'selection' なら選んでいる要素)、Shift+R = 定規
  *   (Cmd+0 / 1 / 2 は既存のディスパッチャ(editorZoomApiRef)が受ける)
  * - 2 本指タッチ: ピンチズーム / 1 本指: パン
+ * - 拡大縮小はどの経路も zoomAt(カーソル位置が中心)に集める。キーとボタンは画面の中心
+ * - IME の変換中のキーは奪わない
  *
  * [iframe から来る操作]
  * 生きているエディタ(EditorCanvas)と見るだけの紙面は iframe なので、その上で起きた
@@ -21,7 +25,8 @@
 
 import { useEffect, useRef, useState, type RefObject } from 'react';
 import { useMultiPageCanvasOptional, MIN_ZOOM, MAX_ZOOM } from '../contexts/MultiPageCanvasContext';
-import { isSpaceActivatedControl } from './useCanvasControls';
+import { isSpaceActivatedControl, editorZoomApiRef } from './useCanvasControls';
+import { listenCanvasGestures, isImeKeyEvent } from '../utils/canvas-gestures';
 
 /** iframe 側が転送してくるメッセージ */
 export type EmbeddedCanvasMessage =
@@ -29,12 +34,12 @@ export type EmbeddedCanvasMessage =
   | { type: 'EMBEDDED_PINCH'; coords?: 'parent'; previousDistance: number; currentDistance: number; centerX: number; centerY: number }
   | { type: 'EMBEDDED_PAN_START'; coords?: 'parent'; clientX: number; clientY: number }
   | { type: 'EMBEDDED_KEY'; kind: 'down' | 'up'; key: string; code: string; metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean };
+// ピンチ(GestureEvent)の転送 EMBEDDED_GESTURE は listenCanvasGestures が受ける(utils/canvas-gestures.ts)
 
 /** ホイール 1 目盛りのズーム係数。トラックパッド(小さい delta が連続)と、マウスホイール(大きい delta)で分ける */
 const PINCH_K = 0.01;
 const WHEEL_K = 0.0025;
 const MAX_STEP = 1.25;
-const KEY_STEP = 1.25;
 
 function wheelFactor(deltaY: number): number {
   const k = Math.abs(deltaY) < 50 ? PINCH_K : WHEEL_K;
@@ -87,10 +92,23 @@ export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>
       return { clientX: rect.left + x * scale, clientY: rect.top + y * scale };
     };
 
+    // ---- Safari・WKWebView のピンチ(容器の上で起きたものと、紙面の iframe から転送されたもの)
+    const gestures = listenCanvasGestures({
+      win: window,
+      container,
+      target: () => ({
+        getZoom: () => c().viewStore.get().canvasZoom,
+        zoomAt: (zoom, clientX, clientY) => c().zoomAt(zoom, toContainerPoint(clientX, clientY)),
+        markInteracting: () => c().markInteracting(),
+      }),
+    });
+
     // ---- ズーム/パンの実処理(ホイールと転送メッセージで共通)
     const applyWheel = (deltaX: number, deltaY: number, clientX: number, clientY: number, zoomGesture: boolean, shiftKey: boolean) => {
       c().markInteracting();
       if (zoomGesture) {
+        // ピンチ(GestureEvent)の最中に ctrl 付き wheel も届く環境で二重に拡大しない
+        if (gestures.active) return;
         const { canvasZoom } = c().viewStore.get();
         c().zoomAt(canvasZoom * wheelFactor(deltaY), toContainerPoint(clientX, clientY));
         return;
@@ -129,7 +147,8 @@ export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>
     };
 
     // ---- キー
-    const stepZoom = (dir: 1 | -1) => c().zoomTo(c().viewStore.get().canvasZoom * (dir > 0 ? KEY_STEP : 1 / KEY_STEP), { animate: true });
+    // ヘッダーの +/− と同じ zoomIn / zoomOut(刻みは canvasZoomOptions.steps)
+    const stepZoom = (dir: 1 | -1) => (dir > 0 ? c().zoomIn() : c().zoomOut());
     const handleKey = (kind: 'down' | 'up', key: string, code: string, mods: { metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean }, preventDefault: () => void, typing: boolean) => {
       if (code === 'Space') {
         if (typing) return;
@@ -155,8 +174,11 @@ export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>
         if (key === '0' || code === 'Digit0') { preventDefault(); c().zoomToActual(); return; }
         if (key === '1' || code === 'Digit1') { preventDefault(); c().zoomToFit({ animate: true }); return; }
         if (key === '2' || code === 'Digit2') {
+          // ⌘2 と同じ合わせ先(既定は編集中のページ。fitShortcut: 'selection' なら選んでいる要素)
+          preventDefault();
+          if (editorZoomApiRef.current) { editorZoomApiRef.current.selection(); return; }
           const id = c().viewStore.get().activePageId;
-          if (id) { preventDefault(); c().zoomToPage(id, { animate: true }); }
+          if (id) c().zoomToPage(id, { animate: true });
           return;
         }
         if (key.toLowerCase() === 'r' || code === 'KeyR') { preventDefault(); c().toggleRulers(); return; }
@@ -167,6 +189,7 @@ export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>
     const spaceBelongsToControl = (e: KeyboardEvent) =>
       e.code === 'Space' && (isSpaceActivatedControl(e.target) || isSpaceActivatedControl(document.activeElement));
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (isImeKeyEvent(e)) return; // IME の変換中のキーは奪わない
       if (spaceBelongsToControl(e)) return;
       if (e.repeat && e.code === 'Space') { if (!isTypingTarget(e.target)) e.preventDefault(); return; }
       handleKey('down', e.key, e.code, e, () => e.preventDefault(), isTypingTarget(e.target));
@@ -284,6 +307,7 @@ export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>
     container.addEventListener('touchcancel', handleTouchEnd);
 
     return () => {
+      gestures.dispose();
       window.removeEventListener('wheel', preventNativeZoom, { capture: true });
       document.removeEventListener('wheel', preventNativeZoom, { capture: true });
       container.removeEventListener('wheel', handleWheel);

package/src/editor/utils/canvas-gestures.ts

@@ -0,0 +1,210 @@
+/**
+ * マルチフレームのキャンバスの拡大縮小を Figma にそろえる部品(0.10.0)。
+ *
+ * - Safari・WKWebView のトラックパッドのピンチは gesturestart / gesturechange / gestureend で届く
+ *   (Chrome・Edge・Electron は ctrl 付きの wheel で届く)。以前は止めるだけで拡大縮小に使っていなかった。
+ *   scale は gesturestart からの累積なので、始まりの倍率に掛ける。紙面(iframe)の中で起きたものは親へ転送する
+ * - ⌘+ / ⌘− とヘッダーの +/− は 2 の累乗の段(…50% → 100% → 200%…。段の間からは向きの側の段へ)
+ * - IME の変換中のキーは奪わない
+ * - 選んでいる要素に合わせる(⌘2 / ⇧2)ための矩形
+ *
+ * DOM と数値だけを扱い、React やキャンバスの Context には触らない(受け手が zoomAt 等を渡す)。
+ */
+
+export interface ZoomRange {
+  min: number;
+  max: number;
+}
+
+/**
+ * マルチフレームのキャンバスの拡大縮小の設定(`canvasZoomOptions`)。どれも省略時は従来の挙動。
+ * Figma にそろえるなら `{ min: 0.02, max: 256, steps: 'powers-of-two', fitShortcut: 'selection' }`
+ */
+export interface CanvasZoomOptions {
+  /** 倍率の下限(省略時 0.02 = 2%) */
+  min?: number;
+  /** 倍率の上限(省略時 4 = 400%。Figma は 256 = 25600%) */
+  max?: number;
+  /** ⌘+ / ⌘− とヘッダーの +/− の刻み。'ratio' = 1.25 倍ずつ(省略時)、'powers-of-two' = 2 の累乗の段(Figma) */
+  steps?: 'ratio' | 'powers-of-two';
+  /** ⌘2 / ⇧2 の合わせ先。'page' = 編集中のページ(省略時)、'selection' = 選んでいる要素(無ければページ。Figma) */
+  fitShortcut?: 'page' | 'selection';
+}
+export type ResolvedCanvasZoomOptions = ZoomRange & Required<Pick<CanvasZoomOptions, 'steps' | 'fitShortcut'>>;
+
+const clamp = (zoom: number, range: ZoomRange) => Math.max(range.min, Math.min(range.max, zoom));
+
+/** ⌘+ / ⌘− の次の倍率。2 の累乗の段へ寄せる(今が段の上なら 1 段、段の間なら向きの側の段へ) */
+export function nextZoomLevel(current: number, direction: 1 | -1, range: ZoomRange): number {
+  if (!Number.isFinite(current) || current <= 0) return clamp(1, range);
+  const exponent = Math.log2(current);
+  const EPSILON = 1e-6;
+  const next = direction > 0 ? Math.floor(exponent + EPSILON) + 1 : Math.ceil(exponent - EPSILON) - 1;
+  return clamp(2 ** next, range);
+}
+
+/** IME の変換中のキーか(Safari・Chrome は変換中の keydown に keyCode 229 を出す) */
+export function isImeKeyEvent(event: KeyboardEvent): boolean {
+  return event.isComposing === true || event.keyCode === 229;
+}
+
+// ------------------------------------------------------------------ ピンチ(GestureEvent)
+
+/** WebKit の GestureEvent(型定義は標準の lib に無い) */
+export type CanvasGestureEvent = Event & { scale?: number; clientX?: number; clientY?: number };
+export type CanvasGesturePhase = 'start' | 'change' | 'end';
+export interface EmbeddedGestureMessage {
+  type: 'EMBEDDED_GESTURE';
+  coords: 'parent';
+  phase: CanvasGesturePhase;
+  scale: number;
+  clientX: number;
+  clientY: number;
+}
+
+export interface GestureZoomTarget {
+  getZoom: () => number;
+  /** client 座標の点を動かさずに倍率を変える(倍率の範囲は受け手が収める) */
+  zoomAt: (zoom: number, clientX: number, clientY: number) => void;
+  markInteracting?: () => void;
+}
+
+/** これだけピンチの続きが来なければ、終わったものとみなす(ms) */
+const GESTURE_IDLE_MS = 1000;
+const PHASES: Array<[CanvasGesturePhase, string]> = [['start', 'gesturestart'], ['change', 'gesturechange'], ['end', 'gestureend']];
+const LISTEN = { passive: false, capture: true } as const;
+
+/**
+ * ピンチの状態。始まりの倍率を覚え、scale(累積)を掛ける。
+ * `active` の間は ctrl 付き wheel での拡大をしない(両方届く環境で二重に拡大しない)。
+ * end を取りこぼしたまま止まったら GESTURE_IDLE_MS で解く(ctrl 付き wheel の拡大が戻らなくならない)
+ */
+export function createGestureZoom(target: () => GestureZoomTarget | null, now: () => number = () => Date.now()) {
+  let base: number | null = null;
+  let lastAt = 0;
+  const isLive = () => base !== null && now() - lastAt < GESTURE_IDLE_MS;
+  return {
+    get active() { return isLive(); },
+    handle(phase: CanvasGesturePhase, scale: number, clientX: number, clientY: number) {
+      const canvas = target();
+      if (!canvas) return;
+      if (phase === 'start') { base = canvas.getZoom(); lastAt = now(); return; }
+      // start を取りこぼしても(iframe の読み込み直し等)、今の倍率を始まりにして続ける
+      const start = isLive() && base !== null ? base : canvas.getZoom();
+      base = start;
+      lastAt = now();
+      if (Number.isFinite(scale) && scale > 0) {
+        canvas.markInteracting?.();
+        canvas.zoomAt(start * scale, clientX, clientY);
+      }
+      if (phase === 'end') base = null;
+    },
+  };
+}
+
+/**
+ * 親(キャンバスの容器がある文書)でピンチを受ける。容器の上で起きたものと、紙面の iframe から転送されてきたもの。
+ * 容器の外(ヘッダー・パネル)のピンチは拡大しない(ブラウザ自体の拡大は useBrowserZoomPrevention が止める)。
+ * GestureEvent に座標が無い環境では、最後にポインタがあった所を中心にする。
+ */
+export function listenCanvasGestures(input: {
+  win: Window;
+  container: HTMLElement;
+  target: () => GestureZoomTarget | null;
+}): { readonly active: boolean; dispose: () => void } {
+  const { win, container } = input;
+  const zoom = createGestureZoom(input.target);
+  let pointer: { x: number; y: number } | null = null;
+  const onPointer = (event: MouseEvent) => { pointer = { x: event.clientX, y: event.clientY }; };
+  const pointOf = (event: CanvasGestureEvent) => {
+    if (Number.isFinite(event.clientX) && Number.isFinite(event.clientY)) return { x: event.clientX as number, y: event.clientY as number };
+    if (pointer) return pointer;
+    const rect = container.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  };
+  const handlers = PHASES.map(([phase, type]) => {
+    const handler = (event: Event) => {
+      const target = event.target as Node | null;
+      if (!target || typeof target.nodeType !== 'number' || !container.contains(target)) return;
+      event.preventDefault();
+      const gesture = event as CanvasGestureEvent;
+      const point = pointOf(gesture);
+      zoom.handle(phase, Number(gesture.scale ?? 1), point.x, point.y);
+    };
+    return [type, handler] as const;
+  });
+  const onMessage = (event: MessageEvent) => {
+    const data = event.data as Partial<EmbeddedGestureMessage> | null;
+    if (!data || typeof data !== 'object' || data.type !== 'EMBEDDED_GESTURE' || data.coords !== 'parent') return;
+    if (data.phase !== 'start' && data.phase !== 'change' && data.phase !== 'end') return;
+    zoom.handle(data.phase, Number(data.scale), Number(data.clientX), Number(data.clientY));
+  };
+  for (const [type, handler] of handlers) win.addEventListener(type, handler, LISTEN);
+  win.addEventListener('mousemove', onPointer, { passive: true });
+  win.addEventListener('message', onMessage);
+  return {
+    get active() { return zoom.active; },
+    dispose() {
+      for (const [type, handler] of handlers) win.removeEventListener(type, handler, LISTEN);
+      win.removeEventListener('mousemove', onPointer);
+      win.removeEventListener('message', onMessage);
+    },
+  };
+}
+
+/**
+ * 紙面(生きているエディタの iframe)で起きたピンチを親へ転送する。座標は送る前に親の座標へ直す
+ * (親の realm で作った関数なので、受け手からは送り元の iframe が分からない。ホイールの転送と同じ)。
+ */
+export function forwardEmbeddedGestures(input: {
+  doc: Document;
+  toParent: (x: number, y: number) => { clientX: number; clientY: number };
+  post: (message: EmbeddedGestureMessage) => void;
+}): () => void {
+  const { doc } = input;
+  let pointer: { x: number; y: number } | null = null;
+  const onPointer = (event: MouseEvent) => { pointer = { x: event.clientX, y: event.clientY }; };
+  const handlers = PHASES.map(([phase, type]) => {
+    const handler = (event: Event) => {
+      const gesture = event as CanvasGestureEvent;
+      event.preventDefault();
+      event.stopPropagation();
+      const hasPoint = Number.isFinite(gesture.clientX) && Number.isFinite(gesture.clientY);
+      const local = hasPoint
+        ? { x: gesture.clientX as number, y: gesture.clientY as number }
+        : pointer ?? { x: (doc.defaultView?.innerWidth ?? 0) / 2, y: (doc.defaultView?.innerHeight ?? 0) / 2 };
+      input.post({ type: 'EMBEDDED_GESTURE', coords: 'parent', phase, scale: Number(gesture.scale ?? 1), ...input.toParent(local.x, local.y) });
+    };
+    return [type, handler] as const;
+  });
+  for (const [type, handler] of handlers) doc.addEventListener(type, handler, LISTEN);
+  doc.addEventListener('mousemove', onPointer, { passive: true, capture: true });
+  return () => {
+    for (const [type, handler] of handlers) doc.removeEventListener(type, handler, LISTEN);
+    doc.removeEventListener('mousemove', onPointer, { capture: true });
+  };
+}
+
+// ------------------------------------------------------------------ 選択範囲に合わせる
+
+/**
+ * 紙面で選んでいる要素(#artboard の .selected)を囲む矩形を、キャンバスの座標で返す。無ければ null。
+ * 埋め込みの紙面は iframe の中では等倍なので、iframe の中の矩形にフレームの位置を足せばよい。
+ */
+export function selectionCanvasRect(
+  iframe: HTMLIFrameElement | null | undefined,
+  framePosition: { x: number; y: number } | null | undefined,
+): { minX: number; minY: number; maxX: number; maxY: number } | null {
+  const doc = iframe?.contentDocument;
+  if (!doc || !framePosition) return null;
+  const rects = Array.from(doc.querySelectorAll<HTMLElement>('#artboard .selected'))
+    .map((element) => element.getBoundingClientRect())
+    .filter((rect) => rect.width > 0 || rect.height > 0);
+  if (!rects.length) return null;
+  return {
+    minX: framePosition.x + Math.min(...rects.map((rect) => rect.left)),
+    minY: framePosition.y + Math.min(...rects.map((rect) => rect.top)),
+    maxX: framePosition.x + Math.max(...rects.map((rect) => rect.right)),
+    maxY: framePosition.y + Math.max(...rects.map((rect) => rect.bottom)),
+  };
+}

package/src/editor/utils/embedded-canvas-bridge.ts

@@ -8,6 +8,8 @@
  * 座標は iframe の座標のまま送る(受け手が送り元 iframe の実測矩形で親の座標へ直す)
  */
 
+import { forwardEmbeddedGestures, isImeKeyEvent } from './canvas-gestures';
+
 const ZOOM_KEYS = new Set(['=', '+', '-', '_', ';']);
 
 function isTypingTarget(target: EventTarget | null): boolean {
@@ -50,11 +52,8 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
     );
   };
 
-  // ---- Safari の gesture(ピンチ)はブラウザ拡大を止めるだけ
-  const handleGesture = (e: Event) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
+  // ---- Safari・WKWebView の gesture(ピンチ)も外へ(親が拡大縮小する。ブラウザの拡大は止める)
+  const disposeGestures = forwardEmbeddedGestures({ doc: iframeDoc, toParent, post: (message) => parent.postMessage(message, '*') });
 
   // ---- 2 本指タッチ = ピンチ
   let lastDistance: number | null = null;
@@ -90,6 +89,7 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
 
   // ---- キー: Space(パン)、Cmd+/- (ズーム)、Shift+0/1/2(100%・全体・このページ)、Shift+R(定規)
   const forwardKey = (kind: 'down' | 'up') => (e: KeyboardEvent) => {
+    if (isImeKeyEvent(e)) return; // IME の変換中のキーは奪わない
     const cmd = e.metaKey || e.ctrlKey;
     const typing = isTypingTarget(e.target);
     const isSpace = e.code === 'Space';
@@ -128,9 +128,6 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
 
   const options: AddEventListenerOptions = { passive: false, capture: true };
   iframeDoc.addEventListener('wheel', handleWheel, options);
-  iframeDoc.addEventListener('gesturestart', handleGesture, options);
-  iframeDoc.addEventListener('gesturechange', handleGesture, options);
-  iframeDoc.addEventListener('gestureend', handleGesture, options);
   iframeDoc.addEventListener('touchstart', handleTouchStart, options);
   iframeDoc.addEventListener('touchmove', handleTouchMove, options);
   iframeDoc.addEventListener('touchend', handleTouchEnd, options);
@@ -140,10 +137,8 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
   iframeDoc.addEventListener('mousedown', handleMouseDown, options);
 
   return () => {
+    disposeGestures();
     iframeDoc.removeEventListener('wheel', handleWheel, options);
-    iframeDoc.removeEventListener('gesturestart', handleGesture, options);
-    iframeDoc.removeEventListener('gesturechange', handleGesture, options);
-    iframeDoc.removeEventListener('gestureend', handleGesture, options);
     iframeDoc.removeEventListener('touchstart', handleTouchStart, options);
     iframeDoc.removeEventListener('touchmove', handleTouchMove, options);
     iframeDoc.removeEventListener('touchend', handleTouchEnd, options);

package/src/index.ts

@@ -25,7 +25,7 @@ export type { ContentListItem, EditorMode } from "./editor/EditorContext";
 export type { DocumentAttributes } from "./editor/contexts/EditorArtboardContext";
 export { computeContentDepths } from "./editor/contexts/EditorArtboardContext";
 
-export { WEBPAGE_WIDTH, WEBPAGE_MIN_HEIGHT, SLIDE_WIDTH, SLIDE_HEIGHT, BREAKPOINT_PRESETS } from "./editor/constants";
+export { WEBPAGE_WIDTH, WEBPAGE_MIN_HEIGHT, SLIDE_WIDTH, SLIDE_HEIGHT, BREAKPOINT_PRESETS, FRAME_REGION_ATTRIBUTE } from "./editor/constants";
 
 export { registerAutoSaveFlush, flushAutoSave } from "./editor/autosave";
 
@@ -55,6 +55,10 @@ export type {
   EditorContent,
   EditorComment,
   CommentAction,
+  EditorCommentActions,
+  EditorCommentThreadAction,
+  EditorCommentPanelAction,
+  EditorCommentActionResult,
   ExportFormat,
   UploadResult,
   EditorPartDef,

package/src/io.ts

@@ -81,6 +81,54 @@ export type CommentAction =
   | { action: "resolve"; commentId: string; resolved: boolean }
   | { action: "delete"; commentId: string };
 
+/**
+ * コメントに利用側が足す操作(0.10.0)。コメントパネルの各スレッドと、パネル上部(いま開いているページ)に
+ * ボタンを出す。何をするか(返信を足す・外部に依頼する・別画面を開く など)はエディタの関心事ではない。
+ *
+ * エディタが受け持つのは、ボタンを出す・押している間の表示(二重押しの防止)・失敗の表示・
+ * 戻り値の deck の反映だけ。`run` が投げたエラーは押した場所の下にそのまま出す。
+ */
+export type EditorCommentActionResult = {
+  /** 一覧とコメントの最新。渡せばパネルに反映する(返信を足した操作など) */
+  deck?: EditorDeck;
+  /** 押した場所の下に出す短い知らせ(「依頼しました」など)。無ければ何も出さない */
+  message?: string;
+};
+
+export type EditorCommentThreadAction = {
+  /** 識別子。コメントパネルの中で一意にする(`data-comment-action` 属性にも出る) */
+  id: string;
+  label: string;
+  /** ツールチップ */
+  title?: string;
+  /** ラベルの前に出すアイコン */
+  icon?: ReactNode;
+  /** 出す条件。無ければ未解決のスレッドにだけ出す。`page` はいま開いているページの番号 */
+  when?: (comment: EditorComment, ctx: { page: number }) => boolean;
+  run: (ctx: { page: number; comment: EditorComment }) => Promise<EditorCommentActionResult | void>;
+};
+
+export type EditorCommentPanelAction = {
+  /** 識別子。コメントパネルの中で一意にする(`data-comment-panel-action` 属性にも出る) */
+  id: string;
+  label: string;
+  /** ツールチップ */
+  title?: string;
+  /** ラベルの前に出すアイコン */
+  icon?: ReactNode;
+  /** 出す条件。無ければ、いまのページに未解決のコメントが 1 件以上あるときだけ出す */
+  when?: (ctx: { page: number; comments: EditorComment[] }) => boolean;
+  /** `comments` はいまのページのコメント全部(解決済みも含む。絞るのは利用側) */
+  run: (ctx: { page: number; comments: EditorComment[] }) => Promise<EditorCommentActionResult | void>;
+};
+
+export type EditorCommentActions = {
+  /** 各スレッドに出す操作 */
+  thread?: EditorCommentThreadAction[];
+  /** パネル上部に出す、いまのページ全体への操作 */
+  panel?: EditorCommentPanelAction[];
+};
+
 export type ExportFormat = "pdf" | "pdf-lite" | "pptx" | "pptx-edit";
 
 export type UploadResult = { url: string; width?: number; height?: number };
@@ -176,6 +224,12 @@ export type EditorIO = {
   /** コメントの追加・返信・解決・削除。無ければコメントUIを出さない */
   commentAction?: (page: number, action: CommentAction) => Promise<EditorDeck>;
 
+  /**
+   * コメントに足す操作(スレッドごと・パネル上部)。無ければ何も足さない(0.10.0)。
+   * コメントパネルは commentAction がある場合だけ出るので、これだけ渡しても出ない
+   */
+  commentActions?: EditorCommentActions;
+
   /** 並び替え・複製・削除など、一覧を編集する操作。無ければその操作を出さない */
   deckOps?: {
     move?: (from: number, to: number) => Promise<EditorDeck>;

package/src/version.ts

@@ -6,4 +6,4 @@
  * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
  * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
  */
-export const EDITOR_VERSION = '0.9.1';
+export const EDITOR_VERSION = '0.10.0';