@growgroup/visual-editor 0.9.0 → 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.0",
+  "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/comments/CommentBoard.tsx

@@ -24,7 +24,7 @@ import { useState } from 'react';
 import { Check, CornerUpLeft, Crosshair, ExternalLink, MapPin, MessageSquare, RotateCcw, Send, Trash2 } from 'lucide-react';
 import type { Deck, SlideComment } from '../../../lib/deck';
 import { PPT_PALETTES, type PptTheme } from '../ppt/PptChrome';
-import { describeRect, fmtTime, unresolvedCount } from '../ppt/PptComments';
+import { anchorRectOf, describeRect, fmtTime, unresolvedCount } from '../ppt/PptComments';
 
 /**
  * アンカー・返信のリンク色。
@@ -371,14 +371,14 @@ function BoardCard({
       {/* 何に対する指摘か。範囲 > 要素 > ページ全体 */}
       <div
         className="mt-1.5 flex items-center gap-1 text-[10px]"
-        style={{ color: comment.anchorRect || comment.anchorSrc ? accent : pal.sub }}
+        style={{ color: anchorRectOf(comment) || comment.anchorSrc ? accent : pal.sub }}
         title={comment.anchorSrc}
       >
-        {comment.anchorRect ? <Crosshair className="h-3 w-3 shrink-0" /> : <MapPin className="h-3 w-3 shrink-0" />}
+        {anchorRectOf(comment) ? <Crosshair className="h-3 w-3 shrink-0" /> : <MapPin className="h-3 w-3 shrink-0" />}
         <span className="truncate">
           {comment.seq != null && <span className="mr-1 tabular-nums">#{comment.seq}</span>}
-          {comment.anchorRect
-            ? describeRect(comment.anchorRect)
+          {anchorRectOf(comment)
+            ? describeRect(anchorRectOf(comment)!)
             : comment.anchorSrc ? (comment.anchorLabel ? `「${comment.anchorLabel}」` : '要素に添付') : 'ページ全体'}
         </span>
       </div>

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';
@@ -223,6 +223,26 @@ export function fitRect(rect: CommentRect, artboard: HTMLElement): CommentRect {
   return { x: rect.x * sx, y: rect.y, width: rect.width * sx, height: rect.height };
 }
 
+/**
+ * コメントの範囲。anchorRect が無くても、表示用の文言(「範囲 (x, y) w×h」「点 (x, y)」)から戻す。
+ *
+ * 【なぜ文言から戻すか】
+ * 範囲コメント(0.4.0)より前の提案書・構成ラフの殻は、コメントの保存で anchorRect と seq を捨て、
+ * anchorLabel だけを残す(殻の vite-plugin の許可リストに無いため)。そのままだと範囲を指定して投稿しても
+ * 紙面に枠が出ず、「範囲が表示されない」になる。文言はエディタが describeRect で書いた形なので、そこから戻せる。
+ * 要素に付けたコメント(anchorSrc)の anchorLabel は要素の文字なので読まない
+ */
+export function anchorRectOf(c: Pick<SlideComment, 'anchorRect' | 'anchorLabel' | 'anchorSrc'>): CommentRect | undefined {
+  if (c.anchorRect) return c.anchorRect;
+  if (c.anchorSrc || !c.anchorLabel) return undefined;
+  const num = '(-?\\d+(?:\\.\\d+)?)';
+  const range = c.anchorLabel.match(new RegExp(`^範囲 \\(${num}, ${num}\\) ${num}×${num}$`));
+  if (range) return { x: +range[1], y: +range[2], width: +range[3], height: +range[4] };
+  const point = c.anchorLabel.match(new RegExp(`^点 \\(${num}, ${num}\\)$`));
+  if (point) return { x: +point[1], y: +point[2], width: 0, height: 0 };
+  return undefined;
+}
+
 /** 矩形を人が読む形に(「範囲 (120, 840) 600×240」「点 (120, 840)」) */
 export function describeRect(r: CommentRect): string {
   const n = (v: number) => String(Math.round(v));
@@ -282,7 +302,7 @@ export function useCommentMarkers({
       const artboard = doc?.getElementById('artboard');
       if (!doc || !artboard) return;
       const layer = ensureCommentLayer(doc, artboard);
-      const shown = comments.filter((c) => (c.anchorRect || c.anchorSrc) && !c.resolved);
+      const shown = comments.filter((c) => (anchorRectOf(c) || c.anchorSrc) && !c.resolved);
       const wanted = new Set(shown.map((c) => c.id));
       layer.querySelectorAll<HTMLElement>('[data-comment-id]').forEach((el) => {
         if (!wanted.has(el.dataset.commentId!)) el.remove();
@@ -318,8 +338,9 @@ export function useCommentMarkers({
         const isActive = c.id === activeThreadId;
         let x = 0;
         let y = 0;
-        if (c.anchorRect) {
-          const r = fitRect(c.anchorRect, artboard);
+        const anchorRect = anchorRectOf(c);
+        if (anchorRect) {
+          const r = fitRect(anchorRect, artboard);
           if (isPointRect(r)) {
             layer.querySelector(`[data-comment-id="${CSS.escape(c.id)}"][data-comment-rect]`)?.remove();
             x = r.x - size / 2;
@@ -404,7 +425,7 @@ export function useCommentMarkers({
   }, [
     active, page, getIframeDoc, outerZoom, activeThreadId,
     JSON.stringify(draftRect),
-    JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.anchorRect, c.seq, c.resolved, c.author, c.text])),
+    JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.anchorRect, c.anchorLabel, c.seq, c.resolved, c.author, c.text])),
   ]);
 }
 
@@ -675,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();
@@ -770,10 +861,10 @@ export function PptCommentsPanel({
         </button>
       </div>
 
-      {c.anchorRect ? (
+      {anchorRectOf(c) ? (
         <div className="mt-1.5 flex items-center gap-1 text-[10px]" style={{ color: 'var(--ed-accent)' }} data-comment-rect-label>
           <Crosshair className="h-3 w-3" />
-          {describeRect(c.anchorRect)}
+          {describeRect(anchorRectOf(c)!)}
         </div>
       ) : c.anchorSrc && (
         <div className="mt-1.5 flex items-center gap-1 text-[10px]" style={{ color: 'var(--ed-accent)' }}>
@@ -830,6 +921,8 @@ export function PptCommentsPanel({
         </div>
       )}
 
+      {renderThreadActions(c)}
+
       {replyFor === c.id ? (
         <div className="mt-2 flex items-end gap-1.5">
           <textarea
@@ -911,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 },