@growgroup/visual-editor 0.9.1 → 0.11.0

package/src/editor/components/canvas-guides/CanvasGuides.tsx

@@ -0,0 +1,247 @@
+'use client';
+
+/**
+ * 定規から引くガイド(Figma の「定規からドラッグしてガイドを作る」)。
+ *
+ * - 上の定規から下へドラッグ → 横のガイド、左の定規から右へドラッグ → 縦のガイド
+ * - ガイドはドラッグで動かせる。定規の上へ戻して離すと消える
+ * - クリックで選ぶ(青くなる)。選んだまま Delete / Backspace で消える。Esc か外をクリックで選択を外す
+ * - 位置は編集中のページの紙面の座標(px)で持ち、要素の移動・リサイズの吸着の相手になる
+ * - 保存しない(ページごとにメモリで持つ。読み込み直すと消える)
+ *
+ * CanvasRulers の中(定規と同じ重ね合わせの層)に置く。座標の換算は定規と同じ:
+ * 画面 = canvasOffset + (ページの位置 + 紙面の px) × canvasZoom
+ */
+
+import { memo, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { RULER_SIZE, useCanvasViewState, useMultiPageCanvas } from '../../contexts/MultiPageCanvasContext';
+import {
+  getPageGuides,
+  setActiveGuidePage,
+  setPageGuides,
+  subscribeGuides,
+  type PageGuides,
+} from '../../utils/canvas-guides';
+
+/** Figma のガイドに近い赤 */
+const GUIDE_COLOR = '#f24822';
+/** 選んでいるガイドの色 */
+const GUIDE_SELECTED_COLOR = '#0d99ff';
+/** これより動かなければクリック(選ぶだけ)とみなす(画面 px) */
+const CLICK_SLOP = 2;
+/** ガイドをつかめる幅(画面 px) */
+const HIT = 7;
+
+type Axis = 'x' | 'y';
+
+interface Drag {
+  axis: Axis;
+  /** 動かしている既存のガイドの番号(新しく引いているときは null) */
+  index: number | null;
+  /** いまの位置(紙面の px) */
+  value: number;
+  /** ポインタが定規の上にある(離すと消える) */
+  overRuler: boolean;
+}
+
+export const CanvasGuides = memo(function CanvasGuides() {
+  const { pages } = useMultiPageCanvas();
+  const { canvasOffset, canvasZoom, activePageId } = useCanvasViewState();
+  const active = pages.find((p) => p.id === activePageId) ?? null;
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [drag, setDrag] = useState<Drag | null>(null);
+  const [selected, setSelected] = useState<{ axis: Axis; index: number } | null>(null);
+  // ドラッグ中に window へ張ったリスナーを外す関数。アンマウント・ページ切り替えで残さない
+  const detachRef = useRef<(() => void) | null>(null);
+  useEffect(() => () => detachRef.current?.(), []);
+
+  const guides = useSyncExternalStore(
+    subscribeGuides,
+    () => getPageGuides(activePageId),
+    () => getPageGuides(null),
+  );
+
+  // 吸着が見るページ。定規(= この部品)が消えたら外す
+  useEffect(() => {
+    setActiveGuidePage(activePageId);
+    setSelected(null);
+    // ページが替わったら引いている途中のドラッグも捨てる(前のページへ書き込まない)
+    detachRef.current?.();
+    setDrag(null);
+    return () => setActiveGuidePage(null);
+  }, [activePageId]);
+
+  if (!active) return null;
+
+  const originX = canvasOffset.x + active.position.x * canvasZoom;
+  const originY = canvasOffset.y + active.position.y * canvasZoom;
+  const toScreen = (axis: Axis, v: number) => (axis === 'x' ? originX : originY) + v * canvasZoom;
+
+  /** ドラッグを始める。終わり(離したとき)にガイドを足す・動かす・消す */
+  const begin = (e: React.PointerEvent, axis: Axis, index: number | null) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const root = rootRef.current;
+    if (!root) return;
+    const box = root.getBoundingClientRect();
+    const read = (ev: PointerEvent | React.PointerEvent): Drag => {
+      const sx = ev.clientX - box.left;
+      const sy = ev.clientY - box.top;
+      const screen = axis === 'x' ? sx : sy;
+      const value = Math.round((screen - (axis === 'x' ? originX : originY)) / canvasZoom);
+      // 縦のガイドは左の定規、横のガイドは上の定規へ戻すと消える
+      const overRuler = axis === 'x' ? sx < RULER_SIZE : sy < RULER_SIZE;
+      return { axis, index, value, overRuler };
+    };
+    const startX = e.clientX;
+    const startY = e.clientY;
+    let moved = false;
+    let current = read(e);
+    // 既存のガイドは、動かし始めるまでは線を出したまま(クリックで選ぶだけのときにちらつかない)
+    if (index === null) setDrag(current);
+    const onMove = (ev: PointerEvent) => {
+      if (!moved && Math.abs(ev.clientX - startX) <= CLICK_SLOP && Math.abs(ev.clientY - startY) <= CLICK_SLOP) return;
+      moved = true;
+      current = read(ev);
+      setDrag(current);
+    };
+    const detach = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      if (detachRef.current === detach) detachRef.current = null;
+    };
+    const onUp = () => {
+      detach();
+      setDrag(null);
+      // 既存のガイドをクリックしただけ → 選ぶ(Delete で消せるように、キー入力をこの線に向ける)
+      if (index !== null && !moved) {
+        setSelected({ axis, index });
+        return;
+      }
+      const now = getPageGuides(active.id);
+      const list = [...(axis === 'x' ? now.xs : now.ys)];
+      let nextIndex: number | null = null;
+      if (index !== null && current.overRuler) list.splice(index, 1);
+      else if (index !== null) {
+        list[index] = current.value;
+        nextIndex = index;
+      } else if (!current.overRuler) {
+        list.push(current.value);
+        nextIndex = list.length - 1;
+      }
+      const next: PageGuides = axis === 'x' ? { xs: list, ys: now.ys } : { xs: now.xs, ys: list };
+      setPageGuides(active.id, next);
+      setSelected(nextIndex === null ? null : { axis, index: nextIndex });
+    };
+    detachRef.current?.();
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+    detachRef.current = detach;
+  };
+
+  /** 選んでいるガイドを消す(Delete / Backspace) */
+  const removeSelected = () => {
+    if (!selected) return;
+    const now = getPageGuides(active.id);
+    const list = [...(selected.axis === 'x' ? now.xs : now.ys)];
+    list.splice(selected.index, 1);
+    setPageGuides(active.id, selected.axis === 'x' ? { xs: list, ys: now.ys } : { xs: now.xs, ys: list });
+    setSelected(null);
+  };
+
+  const pageW = active.size.width * canvasZoom;
+  const pageH = active.size.height * canvasZoom;
+
+  const renderLine = (axis: Axis, v: number, key: string, index: number | null, ghost: boolean) => {
+    const pos = toScreen(axis, v);
+    const vertical = axis === 'x';
+    // 置いたガイドは編集中のページの範囲に引く(ページごとのガイドなので)。引いている最中は画面いっぱい
+    const style: React.CSSProperties = vertical
+      ? { left: pos - HIT / 2, width: HIT, top: ghost ? RULER_SIZE : originY, height: ghost ? undefined : pageH, bottom: ghost ? 0 : undefined, cursor: 'ew-resize' }
+      : { top: pos - HIT / 2, height: HIT, left: ghost ? RULER_SIZE : originX, width: ghost ? undefined : pageW, right: ghost ? 0 : undefined, cursor: 'ns-resize' };
+    const isSelected = !ghost && index !== null && selected?.axis === axis && selected.index === index;
+    const color = isSelected ? GUIDE_SELECTED_COLOR : GUIDE_COLOR;
+    return (
+      <div
+        key={key}
+        data-canvas-guide={axis}
+        data-selected={isSelected || undefined}
+        className="absolute"
+        style={{ ...style, pointerEvents: ghost ? 'none' : 'auto', outline: 'none' }}
+        // 選んだガイドにフォーカスを当て、Delete を紙面(要素の削除)ではなくこの線で受ける
+        tabIndex={isSelected ? -1 : undefined}
+        ref={isSelected ? (el) => el?.focus({ preventScroll: true }) : undefined}
+        onPointerDown={ghost || index === null ? undefined : (e) => begin(e, axis, index)}
+        onKeyDown={
+          isSelected
+            ? (e) => {
+                if (e.key === 'Delete' || e.key === 'Backspace') {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  removeSelected();
+                } else if (e.key === 'Escape') {
+                  e.stopPropagation();
+                  setSelected(null);
+                }
+              }
+            : undefined
+        }
+        onBlur={isSelected ? () => setSelected(null) : undefined}
+      >
+        <div
+          className="absolute"
+          style={
+            vertical
+              ? { left: HIT / 2 - 0.5, top: 0, bottom: 0, width: 1, background: color }
+              : { top: HIT / 2 - 0.5, left: 0, right: 0, height: 1, background: color }
+          }
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div ref={rootRef} className="absolute inset-0" data-canvas-guides>
+      {guides.xs.map((v, i) => (drag && drag.axis === 'x' && drag.index === i ? null : renderLine('x', v, `x${i}`, i, false)))}
+      {guides.ys.map((v, i) => (drag && drag.axis === 'y' && drag.index === i ? null : renderLine('y', v, `y${i}`, i, false)))}
+
+      {/* 定規の上の、ガイドを引き出す当たり(上 = 横のガイド、左 = 縦のガイド) */}
+      <div
+        className="absolute"
+        data-ruler-hit="top"
+        style={{ left: RULER_SIZE, right: 0, top: 0, height: RULER_SIZE, pointerEvents: 'auto', cursor: 'ns-resize' }}
+        onPointerDown={(e) => begin(e, 'y', null)}
+      />
+      <div
+        className="absolute"
+        data-ruler-hit="left"
+        style={{ top: RULER_SIZE, bottom: 0, left: 0, width: RULER_SIZE, pointerEvents: 'auto', cursor: 'ew-resize' }}
+        onPointerDown={(e) => begin(e, 'x', null)}
+      />
+
+      {drag && (
+        <>
+          {/* 引いている間は紙面(iframe)にポインタを取られないよう全面を覆う */}
+          <div className="fixed inset-0" style={{ pointerEvents: 'auto', cursor: drag.axis === 'x' ? 'ew-resize' : 'ns-resize', zIndex: 1 }} />
+          {!drag.overRuler && renderLine(drag.axis, drag.value, 'ghost', null, true)}
+          {!drag.overRuler && (
+            <div
+              className="absolute rounded px-1 text-[10px] tabular-nums text-white"
+              style={{
+                background: GUIDE_COLOR,
+                left: drag.axis === 'x' ? toScreen('x', drag.value) + 4 : RULER_SIZE + 4,
+                top: drag.axis === 'y' ? toScreen('y', drag.value) + 4 : RULER_SIZE + 4,
+                pointerEvents: 'none',
+              }}
+            >
+              {drag.value}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});

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

@@ -8,6 +8,7 @@
 
 import { memo, useEffect, useRef } from 'react';
 import { RULER_SIZE, useMultiPageCanvas, useCanvasViewState } from '../../contexts/MultiPageCanvasContext';
+import { CanvasGuides } from '../canvas-guides/CanvasGuides';
 
 /** 目盛りの候補(紙面の px)。画面上で 60px 以上離れる最小のものを選ぶ */
 const STEPS = [1, 2, 5, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000, 10000];
@@ -142,6 +143,8 @@ export const CanvasRulers = memo(function CanvasRulers({ theme }: { theme: 'ligh
         className="absolute left-0 top-0"
         style={{ width: RULER_SIZE, height: RULER_SIZE, background: 'var(--ed-panel)', borderRight: '1px solid var(--ed-line)', borderBottom: '1px solid var(--ed-line)' }}
       />
+      {/* 定規から引くガイド(定規の当たりとガイドの線だけが押せる。ほかは下のキャンバスへ素通し) */}
+      <CanvasGuides />
     </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/PptChrome.tsx

@@ -55,6 +55,7 @@ import { Popover, PopoverTrigger, PopoverContent } from '../../../components/ui/
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../components/ui/dropdown-menu';
 import { useResizablePanel } from '../../hooks/useResizablePanel';
 import { ConfirmDialog } from '../shell/ConfirmDialog';
+import { useRowsNearViewport } from '../shell/useRowsNearViewport';
 import { can, io } from '../../../io';
 import { MIN_ZOOM, MAX_ZOOM, editorZoomApiRef } from '../../hooks/useCanvasControls';
 import { toast } from 'sonner';
@@ -2301,14 +2302,17 @@ export function PptThumbnails({ page, theme, search }: { page: number; theme: Pp
   const q = search.trim().toLocaleLowerCase();
   const slides = deck.slides.map((slide, i) => ({ slide, n: i + 1 })).filter(({ slide, n }) => !q || slide.title.toLocaleLowerCase().includes(q) || String(n) === q);
   const hasMenu = !!(ops?.move || ops?.duplicate || ops?.remove || ops?.updateMeta);
+  // 画面に近づいた行だけ紙面を描く(一度描いた行は残す)。描かない行も同じ大きさの白い枠・番号・題名は出す
+  const listRef = useRef<HTMLDivElement>(null);
+  const nearRows = useRowsNearViewport(listRef, slides.map(({ slide }) => slide.id), deck.slides.slice(page - 1, page).map((s) => s.id));
 
   return (
     <aside data-ppt-thumbnails aria-label="スライド一覧" className="relative flex shrink-0 flex-col border-r" style={{ width, backgroundColor: pal.rail, borderColor: pal.border }}>
       <div className="ed-panel-heading">スライド<span className="ml-auto text-xs font-normal text-gray-400">{page} / {deck.slides.length}</span></div>
-      <div className="min-h-0 flex-1 overflow-y-auto py-2">
+      <div ref={listRef} className="min-h-0 flex-1 overflow-y-auto py-2">
         {slides.length === 0 && <p className="ed-empty">{q ? '一致するスライドがありません。' : 'スライドがありません。'}</p>}
         {slides.map(({ slide: s, n }) => <div key={s.id} className="relative px-2 py-2" style={{ opacity: dragFrom === n ? .5 : 1 }}>
-          <button ref={n === page ? currentRef : undefined} data-page-thumb={n} aria-current={n === page ? 'page' : undefined}
+          <button ref={n === page ? currentRef : undefined} data-page-thumb={n} data-row-key={s.id} aria-current={n === page ? 'page' : undefined}
             disabled={busy} draggable={!!ops?.move && !busy}
             onDragStart={(e) => { setDragFrom(n); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', String(n)); }}
             onDragOver={(e) => { if (dragFrom === null || !ops?.move) return; e.preventDefault(); const r = e.currentTarget.getBoundingClientRect(); setDropAt(e.clientY < r.top + r.height / 2 ? n : n + 1); }}
@@ -2319,9 +2323,9 @@ export function PptThumbnails({ page, theme, search }: { page: number; theme: Pp
             <span className="min-w-0 flex-1">
               {can('renderContent') && <span className="relative block aspect-video overflow-hidden rounded bg-white"
                 style={{ width: thumbWidth, boxShadow: n === page ? `0 0 0 2px ${PPT_ACCENT}` : `0 0 0 1px ${pal.border}`, opacity: s.hidden ? .5 : 1 }}>
-                <span data-editor-preview className="pointer-events-none absolute left-0 top-0 origin-top-left" style={{ width: 1920, height: 1080, transform: `scale(${thumbWidth / 1920})` }}>
+                {nearRows.has(s.id) && <span data-editor-preview className="pointer-events-none absolute left-0 top-0 origin-top-left" style={{ width: 1920, height: 1080, transform: `scale(${thumbWidth / 1920})` }}>
                   <MemoSlideRender page={n} template={s.template} edited={s.edited} />
-                </span>
+                </span>}
               </span>}
               <span className="mt-2 block truncate pr-6 text-xs" style={{ color: pal.text }}>{s.title || '無題'}{s.hidden ? '（非表示）' : ''}</span>
               {can('commentAction') && unresolvedCount(s.comments) > 0 && <span className="mt-1 block text-xs" style={{ color: pal.sub }}>未解決 {unresolvedCount(s.comments)}件</span>}

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/components/shell/LeftPanel.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, type ReactNode } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
+import { RENAME_LAYER_EVENT } from '../../hooks/useKeyboardShortcuts';
 import { Layers, Files } from 'lucide-react';
 import { useEditorContext } from '../../EditorContext';
 import { useResizablePanel } from '../../hooks/useResizablePanel';
@@ -16,6 +17,12 @@ export function LeftPanel({ page, pagesSlot }: { page: number; pagesSlot?: React
     initialWidth: 264, minWidth: 224, maxWidth: 440, direction: 'right', storageKey: 'gg-editor:left-panel-width',
   });
   const [tab, setTab] = useState(showPages ? 'pages' : 'layers');
+  // ⌘R(レイヤー名の変更)はレイヤーのタブで名前を入力させるので、ページのタブを開いていたら切り替える
+  useEffect(() => {
+    const toLayers = () => setTab('layers');
+    window.addEventListener(RENAME_LAYER_EVENT, toLayers);
+    return () => window.removeEventListener(RENAME_LAYER_EVENT, toLayers);
+  }, []);
   return (
     <aside data-left-panel aria-label="ページとレイヤー" className="relative flex shrink-0 flex-col overflow-hidden border-r border-[#444444] bg-[#2c2c2c]" style={{ width }}>
       {showPages ? (

package/src/editor/components/shell/PagesPanel.tsx

@@ -18,6 +18,7 @@ import { DeckSlideRender } from '../../../components/DeckSlideRender';
 import { flushAutoSave } from '../../autosave';
 import { useMultiPageCanvasOptional } from '../../contexts/MultiPageCanvasContext';
 import { CollabPageDots } from '../../collab/CollabPresence';
+import { useRowsNearViewport } from './useRowsNearViewport';
 
 /**
  * スライド描画はメモ化する。パネル幅の変更や他ページの選択で親が再レンダーしても、
@@ -50,6 +51,10 @@ export function PagesPanel({ page, height = '33vh' }: { page: number; height?: s
     return () => observer.disconnect();
   }, []);
 
+  // 画面に近づいた行だけ紙面を描く(一度描いた行は残す)。行の大きさは幅が決まってから決まるので、それまでは見ない
+  const rowKeys = deck.slides.map((s) => s.id);
+  const nearRows = useRowsNearViewport(rootRef, rowKeys, rowKeys.slice(page - 1, page), thumbWidth > 0);
+
   // 編集中のページが視界の外にあると「今どこか」が分からないので追う
   useEffect(() => {
     currentRef.current?.scrollIntoView({ block: 'nearest' });
@@ -91,6 +96,7 @@ export function PagesPanel({ page, height = '33vh' }: { page: number; height?: s
             key={s.id}
             ref={current ? currentRef : undefined}
             data-page-thumb={n}
+            data-row-key={s.id}
             aria-current={current ? "page" : undefined}
             onClick={() => void goto(n)}
             className="flex w-full shrink-0 items-start gap-1.5 px-2 py-1 text-left"
@@ -111,7 +117,7 @@ export function PagesPanel({ page, height = '33vh' }: { page: number; height?: s
                 opacity: s.hidden ? 0.45 : 1,
               }}
             >
-              {thumbWidth > 0 && (
+              {thumbWidth > 0 && nearRows.has(s.id) && (
                 <span
                   data-editor-preview className="pointer-events-none absolute left-0 top-0 origin-top-left"
                   style={{ width: 1920, height: 1080, transform: `scale(${thumbWidth / 1920})` }}

package/src/editor/components/shell/useRowsNearViewport.ts

@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect, useState, type RefObject } from 'react';
+
+/** 先読みの幅。上下 1.5 画面分(速くスクロールしても白い枠が見えにくい) */
+const NEAR_MARGIN = '150% 0px';
+
+/**
+ * スクロールする一覧で、画面に近づいた行のキーを集める(一度入ったキーは外さない)。
+ *
+ * サムネイルの一覧(PagesPanel・PptThumbnails)は 150 枚すべてを DeckSlideRender で描くと、
+ * 読み込み直後の DOM 13,124 のうち 10,224・img 554 枚が一覧になり、利用側の io も 150 枚分の
+ * 本文とテンプレートを取りに行く(ヘッドレス実測)。近い行だけ描けば済む。
+ * 描かない行も同じ大きさの枠は呼び出し側で置くので、スクロールの高さと位置は変わらない。
+ *
+ * 行は `[data-row-key]` の要素で見分ける。並べ替えでも描いた行が描き直されないよう、キーはページ番号でなく slide の id にする。
+ *
+ * @param rootRef スクロールする箱
+ * @param rowKeys 今並んでいる行のキー(増減・並べ替えで見直す)
+ * @param initialKeys 最初から描く行(編集中のページ)
+ * @param enabled false の間は見ない(行の大きさが決まる前に見ると遠くの行まで「近い」と出る)
+ */
+export function useRowsNearViewport(
+  rootRef: RefObject<HTMLElement | null>,
+  rowKeys: readonly string[],
+  initialKeys: readonly string[],
+  enabled = true,
+): ReadonlySet<string> {
+  const [near, setNear] = useState<ReadonlySet<string>>(() => new Set(initialKeys));
+  const keysSignature = rowKeys.join('\n');
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!enabled) return;
+    if (!root || typeof IntersectionObserver === 'undefined') {
+      setNear(new Set(keysSignature.split('\n')));
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const keys = entries.filter((e) => e.isIntersecting).map((e) => (e.target as HTMLElement).dataset.rowKey ?? '');
+        if (keys.length === 0) return;
+        setNear((prev) => {
+          if (keys.every((k) => prev.has(k))) return prev;
+          const next = new Set(prev);
+          keys.forEach((k) => next.add(k));
+          return next;
+        });
+      },
+      { root, rootMargin: NEAR_MARGIN },
+    );
+    // 見始めるのはレイアウトが落ち着いてから(読み込み直後は箱の高さが決まっておらず、すぐ見ると
+    // 150 行中 70〜79 行が「近い」と出た。2 フレーム後なら 26 行)
+    let raf = requestAnimationFrame(() => {
+      raf = requestAnimationFrame(() => root.querySelectorAll<HTMLElement>('[data-row-key]').forEach((el) => observer.observe(el)));
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+    };
+  }, [rootRef, keysSignature, enabled]);
+
+  return near;
+}

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 },
@@ -207,6 +216,16 @@ export const EDITOR_IFRAME_STYLES = `
     pointer-events: auto !important;
     cursor: pointer;
   }
+  /*
+   * ロックした要素(⌘⇧L で data-gg-locked="true")は紙面のクリック・ドラッグ・ホバーを素通しする。
+   * Figma と同じく「下の要素を掴める」状態にし、選択はレイヤーパネルから行う。
+   * 親をロックすると中の要素もまとめてロックされる(Figma と同じ)。
+   * 上の pointer-events:auto !important より詳細度を高くするため、同じ :not() を重ねている
+   */
+  body:not(.draw-mode):not(.text-mode):not(.move-mode):not(.comment-mode) [data-editable="true"][data-gg-locked="true"],
+  body:not(.draw-mode):not(.text-mode):not(.move-mode):not(.comment-mode) [data-gg-locked="true"] [data-editable="true"] {
+    pointer-events: none !important;
+  }
   .drawing-preview {
     position: absolute;
     pointer-events: none;
@@ -400,6 +419,12 @@ export const EDITOR_IFRAME_STYLES = `
    * ルートを選んだら枠・ハンドル・サイズラベルが紫、中のスロットを選んだら枠は青のまま
    * 「部品の中」の札だけ出す。札はパンくず(上 -22px)の左上に重ならないよう、その上に置く
    */
+  /* ロック中(⌘⇧L)の要素: 枠は出すが、大きさ・回転・角丸のハンドルは出さない */
+  .selection-box.selection-locked .resize-handle,
+  .selection-box.selection-locked .rotation-handle,
+  .selection-box.selection-locked .border-radius-handle {
+    display: none !important;
+  }
   .selection-box.selection-part .selection-outline { box-shadow: 0 0 0 var(--outline-w) #7b61ff; }
   .selection-box.selection-part .resize-handle::after { border-color: #7b61ff; }
   .selection-box.selection-part .size-label { background: #7b61ff; }