@growgroup/visual-editor 0.10.0 → 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/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/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

@@ -216,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;
@@ -409,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; }

package/src/editor/contexts/EditorHistoryContext.tsx

@@ -38,6 +38,7 @@ import React, {
   useState,
 } from 'react';
 import { MAX_HISTORY_SIZE } from '../../types/editor';
+import { COALESCE_WINDOW_MS } from '../utils/history-timing';
 import { useEditorRefs } from './EditorRefsContext';
 
 export interface EditorHistoryContextValue {
@@ -77,8 +78,8 @@ export function useEditorHistory(): EditorHistoryContextValue {
  * - 矢印キーのキーリピート(約30ms間隔)・テキスト入力・プロパティ入力が1エントリにまとまる
  * - 意図的に間を空けた操作(400ms超)は別エントリのまま残る
  * ドラッグ/リサイズはmouseupで1回しかpushされないため、この窓に依存せず元から1エントリ。
+ * 値は utils/history-timing.ts の COALESCE_WINDOW_MS(数字キーの2桁入力と共有)。
  */
-const COALESCE_WINDOW_MS = 400;
 
 /**
  * 履歴に残してはいけないエディタUIのノード。
@@ -156,6 +157,10 @@ function normalizeSnapshot(rawHtml: string): { html: string; signature: string }
         node.classList.remove(cls);
       });
     });
+    // レイヤーパネルの行のホバー強調(属性)も一時状態。焼き付けると ⌘Z で強調が戻ってくる
+    template.content.querySelectorAll('[data-layer-hover]').forEach((node) => {
+      node.removeAttribute('data-layer-hover');
+    });
     // 空になったclass属性は落とす。
     // 「元から空」と「剥がして空になった」が同じ表記になるようにして、
     // 見た目が同じなのに別状態と判定される（＝何も起きないUndoが増える）のを防ぐ。

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -76,6 +76,14 @@ export const RULER_SIZE = 20;
 const VIEW_ANIMATION_MS = 240;
 /** 見るだけの紙面を同時に読む枚数 */
 const PREVIEW_PARALLEL = 4;
+
+/** 主スレッドが空いたときに 1 回呼ぶ(requestIdleCallback が無い環境は次のタスク)。待つのは最大 200ms */
+function scheduleIdle(cb: () => void): void {
+  const w = typeof window !== 'undefined' ? (window as Window & { requestIdleCallback?: (cb: () => void, o?: { timeout: number }) => number }) : null;
+  if (w?.requestIdleCallback) w.requestIdleCallback(cb, { timeout: 200 });
+  else setTimeout(cb, 16);
+}
+
 /**
  * 見るだけの紙面を画像で描く倍率の **上限の最大値**。これ以上に拡大されていれば、
  * どんなに解像度の高い画像でも iframe で描く(画像は文字を選べない・検索できないため)。
@@ -1131,6 +1139,8 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey, zoomOpt
   // 保存と読み込みは利用側(FrontendVisualEditor.handleContentChange)が 1 か所で行う。
   // ここでは「どこへ移ろうとしているか」を持ち、リングを先に動かして押した手応えを返す
   const [activatingPageId, setActivatingPageId] = useState<string | null>(null);
+  // 移っている最中の数。activatePage が重なっても、全部が終わるまで 0 に戻らない(boolean だと先に終わった側が戻してしまう)
+  const activatingCountRef = useRef(0);
   const onContentChangeRef = useRef(artboard.onContentChange);
   onContentChangeRef.current = artboard.onContentChange;
   const activatePage = useCallback<MultiPageCanvasContextValue['activatePage']>(
@@ -1146,14 +1156,19 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey, zoomOpt
       // この切替は終わっているので、state ではなく ref で残す
       editorInitiatedPageIdRef.current = id;
       setActivatingPageId(id);
-      if (options?.reveal) revealPage(id);
       let moved = false;
+      // 移る先の本文を読むあいだは、見るだけの紙面を新しく載せない(編集するページを先に出す)。
+      // 数を上げるのは try の直前。ここから先で例外が出ても finally で必ず下がる(下がらないと紙面が二度と載らない)
+      activatingCountRef.current += 1;
       try {
+        if (options?.reveal) revealPage(id);
         const result = await (notify as (contentId: string) => unknown)(id);
         moved = result !== false;
         return moved;
       } finally {
         setActivatingPageId((v) => (v === id ? null : v));
+        activatingCountRef.current -= 1;
+        pumpAfterInteractionRef.current();
         // 移れなかったら印を消す(残すと、あとで同じページへホスト発で移るときに視点が動かない)。
         // 別のページへ移ったあとなら消さない ── その印はそちらの切替のもの
         if (!moved && editorInitiatedPageIdRef.current === id) editorInitiatedPageIdRef.current = null;
@@ -1165,10 +1180,22 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey, zoomOpt
   // ---- 操作状態
   const [isInteracting, setIsInteracting] = useState(false);
   const interactingTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // パン・ズームの最中は見るだけの紙面を新しく載せない(下の pumpPreviewSlots)。
+  // iframe を載せると本文の解析・スタイル・レイアウトがその段のフレームに乗り、
+  // ズームアウトの途中で 50〜200ms のフレームが混じる(ヘッドレス 150 枚で実測)。
+  // 止まったら(160ms 後)編集中のページに近い順に、空いた時間に 1 枚ずつ載せる。
+  // それまでは骨組み(または画像)が見える。止まらずにパンし続けると、その間は 1 枚も増えない
+  const interactingRef = useRef(false);
+  const pumpAfterInteractionRef = useRef<() => void>(() => undefined);
   const markInteracting = useCallback(() => {
+    interactingRef.current = true;
     setIsInteracting(true);
     if (interactingTimer.current) clearTimeout(interactingTimer.current);
-    interactingTimer.current = setTimeout(() => setIsInteracting(false), 160);
+    interactingTimer.current = setTimeout(() => {
+      interactingRef.current = false;
+      setIsInteracting(false);
+      pumpAfterInteractionRef.current();
+    }, 160);
   }, []);
   useEffect(() => () => { if (interactingTimer.current) clearTimeout(interactingTimer.current); }, []);
 
@@ -1177,21 +1204,32 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey, zoomOpt
   // ---- 見るだけの紙面の読み込み枠(同時に PREVIEW_PARALLEL 枚まで。編集中のページに近い順)
   const slotQueueRef = useRef<{ id: string; grant: () => void }[]>([]);
   const slotHoldersRef = useRef(new Set<string>());
+  // 枠は 1 回に 1 枚だけ、主スレッドが空いたとき(requestIdleCallback)に渡す。
+  // iframe を載せると本文の解析・スタイル・レイアウト・初回のラスタが同じ主スレッドに乗る。
+  // 4 枚を同じフレームで渡すと 1 フレームに 4 枚分が積まれ、編集中のページの読み込みや
+  // 直後のクリック・ページ移動の描画を押し出す(ヘッドレス 150 枚のページ移動で 30〜60ms のフレームが続いた)
+  const pumpScheduledRef = useRef(false);
   const pumpPreviewSlots = useCallback(() => {
     const holders = slotHoldersRef.current;
-    const queue = slotQueueRef.current;
-    if (holders.size >= PREVIEW_PARALLEL || queue.length === 0) return;
-    const indexById = new Map(pagesRef.current.map((p) => [p.id, p.index] as const));
-    const indexOf = (id: string) => indexById.get(id) ?? 0;
-    const activeId = viewStore.get().activePageId;
-    const activeIndex = activeId ? indexOf(activeId) : 0;
-    queue.sort((a, b) => Math.abs(indexOf(a.id) - activeIndex) - Math.abs(indexOf(b.id) - activeIndex));
-    while (holders.size < PREVIEW_PARALLEL && queue.length > 0) {
+    if (pumpScheduledRef.current) return;
+    if (holders.size >= PREVIEW_PARALLEL || slotQueueRef.current.length === 0 || interactingRef.current || activatingCountRef.current > 0) return;
+    pumpScheduledRef.current = true;
+    scheduleIdle(() => {
+      pumpScheduledRef.current = false;
+      const queue = slotQueueRef.current;
+      if (holders.size >= PREVIEW_PARALLEL || queue.length === 0 || interactingRef.current || activatingCountRef.current > 0) return;
+      const indexById = new Map(pagesRef.current.map((p) => [p.id, p.index] as const));
+      const indexOf = (id: string) => indexById.get(id) ?? 0;
+      const activeId = viewStore.get().activePageId;
+      const activeIndex = activeId ? indexOf(activeId) : 0;
+      queue.sort((a, b) => Math.abs(indexOf(a.id) - activeIndex) - Math.abs(indexOf(b.id) - activeIndex));
       const next = queue.shift()!;
       holders.add(next.id);
       next.grant();
-    }
+      pumpAfterInteractionRef.current();
+    });
   }, [viewStore]);
+  pumpAfterInteractionRef.current = pumpPreviewSlots;
   const requestPreviewSlot = useCallback<MultiPageCanvasContextValue['requestPreviewSlot']>(
     (id, grant) => {
       if (slotHoldersRef.current.has(id)) {