@growgroup/visual-editor 0.9.1 → 0.11.0

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/hooks/useKeyboardShortcuts.ts

@@ -17,6 +17,13 @@
 
 import { useCallback } from 'react';
 import { refreshSelectionOverlay, getArtboardContent } from '../utils/dom-utils';
+import { useEditorContext } from '../EditorContext';
+import { COALESCE_WINDOW_MS } from '../utils/history-timing';
+import { alignElements, distributeElements, mirrorPositions, type AlignMode, type DistributeAxis } from '../utils/align-elements';
+import { applyTailwindStyles } from '../utils/tailwind-utils';
+import { extractElementInfo } from '../utils/style-utils';
+import type { ShortcutCallbacks } from '../../types/editor';
+import { LOCK_ATTR, isLockedEl, withoutLocked } from '../utils/lock';
 
 interface UseKeyboardShortcutsOptions {
   /** グループ化関数 */
@@ -91,6 +98,8 @@ export function selectAllSiblingsIn(
       return !ancestor || !artboard.contains(ancestor);
     });
   }
+  // ロック中の要素は紙面からは選ばない(⌘A。Figma の Select all もロック中を飛ばす。記憶)
+  siblings = siblings.filter((el) => !isLockedEl(el));
   if (siblings.length === 0) return { ids: [], elements: [] };
 
   iframeDoc.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'));
@@ -152,6 +161,8 @@ export function selectSiblingIn(
       return !ancestor || !artboard.contains(ancestor);
     });
   }
+  // Tab の巡回もロック中の要素を飛ばす
+  siblings = siblings.filter((el) => !isLockedEl(el));
   if (siblings.length === 0) return null;
 
   const index = current ? siblings.indexOf(current) : -1;
@@ -214,3 +225,479 @@ export function useKeyboardShortcuts(
 
   return { setupKeyboardShortcuts };
 }
+
+// ============================================================
+// Figma の作法に合わせたキャンバス操作(Enter / Shift+Enter / 整列 / 表示・ロック / 不透明度 / 書式)
+// ============================================================
+
+/** 選択枠などオーバーレイの中の要素は「紙面の要素」として数えない */
+function isOverlayNode(el: Element): boolean {
+  return !!el.closest('.selection-box, #gg-smart-guides, #gg-measure-layer');
+}
+
+/**
+ * el の「1段内側」の要素。編集できない包み(レイアウト用の div 等)は透過して、
+ * 枝ごとに最初に当たる編集可能な要素を拾う(Figma のレイヤーパネルの1段下と同じ見え方)
+ */
+export function editableChildrenOf(el: HTMLElement): HTMLElement[] {
+  const out: HTMLElement[] = [];
+  const walk = (node: Element) => {
+    for (const child of Array.from(node.children)) {
+      if (isOverlayNode(child)) continue;
+      if (child.getAttribute('data-editable') === 'true' && child.getAttribute('data-element-id')) {
+        out.push(child as HTMLElement);
+      } else {
+        walk(child);
+      }
+    }
+  };
+  walk(el);
+  return out;
+}
+
+/** el の1段外側の編集可能な要素。紙面(#artboard)の外へは出ない */
+export function editableParentOf(el: HTMLElement): HTMLElement | null {
+  const artboard = el.ownerDocument.getElementById('artboard');
+  const parent = el.parentElement?.closest<HTMLElement>('[data-editable="true"][data-element-id]') ?? null;
+  if (!parent || !artboard || parent === artboard || !artboard.contains(parent)) return null;
+  // 紙面いっぱいのルート(スライドの面)は「親」として選ばない。
+  // 選べても全体が青くなるだけで、最上位の要素から Esc で抜けられなくなる
+  if (
+    parent.parentElement === artboard &&
+    parent.offsetWidth >= artboard.offsetWidth &&
+    parent.offsetHeight >= artboard.offsetHeight
+  ) {
+    return null;
+  }
+  return parent;
+}
+
+/**
+ * 文字を直に持つ要素か(Enter で「子を選ぶ」ではなく「文字の編集に入る」対象)。
+ * <p>本文<span>強調</span></p> のような段落は、中の span を子として選ぶより
+ * 文字の編集に入るほうが Figma のテキストレイヤーの感覚に近い
+ */
+function hasOwnText(el: HTMLElement): boolean {
+  return Array.from(el.childNodes).some(
+    (n) => n.nodeType === 3 && (n.textContent ?? '').trim().length > 0,
+  );
+}
+
+function selectedEls(doc: Document, ids: string[]): HTMLElement[] {
+  return ids
+    .map((id) => doc.querySelector<HTMLElement>(`[data-element-id="${id}"]`))
+    .filter((el): el is HTMLElement => !!el && !isOverlayNode(el));
+}
+
+/** DOM の選択表示を els に揃える(クラスと枠)。React 側の状態は呼び出し側で合わせる */
+function markSelected(doc: Document, els: HTMLElement[]): void {
+  doc.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'));
+  els.forEach((el) => el.classList.add('selected'));
+  refreshSelectionOverlay(doc);
+}
+
+/** 文字の編集に入る。既存のダブルクリック処理(選択済み+文字要素→編集)をそのまま通す */
+function startTextEditingViaDblClick(el: HTMLElement): void {
+  const view = el.ownerDocument.defaultView;
+  if (!view) return;
+  const r = el.getBoundingClientRect();
+  el.dispatchEvent(
+    new view.MouseEvent('dblclick', {
+      bubbles: true,
+      cancelable: true,
+      clientX: r.left + Math.min(8, r.width / 2),
+      clientY: r.top + r.height / 2,
+      detail: 2,
+    }),
+  );
+}
+
+/**
+ * 数字を2つ続けて押したとみなす間隔(ms)。Figma の「4→5 で 45%」(記憶にもとづく・未確認)。
+ * 履歴が同じ要素への続けての変更を1つにまとめる間隔と揃える。こうすると2打目が1打目の履歴を
+ * 置き換え、⌘Z 1回で「押す前」に戻る(間隔がずれると1打目だけが別の履歴として残る)
+ */
+const OPACITY_TWO_DIGIT_MS = COALESCE_WINDOW_MS;
+let lastOpacityDigit: { digit: number; at: number } | null = null;
+
+/**
+ * transform の中の scaleX(-1) / scaleY(-1) を付け外しする。rotate など他の関数は順序ごと残す。
+ * 回転のドラッグ(useDragResize の setTransformFn)は scaleX / scaleY を消さないので両立する
+ */
+export function toggleFlipIn(transform: string, axis: 'x' | 'y'): string {
+  const fn = axis === 'x' ? 'scaleX(-1)' : 'scaleY(-1)';
+  const pattern = axis === 'x' ? /\s*scaleX\(-1\)/g : /\s*scaleY\(-1\)/g;
+  // 回転している要素は、画面の軸で鏡写しにする(Figma と同じ見え方)。
+  // 鏡写し × rotate(a) = rotate(-a) × 鏡写し なので、角度の符号を反転してから反転を付け外しする
+  const mirrored = transform.replace(/rotate\((-?[\d.]+)deg\)/, (_, deg: string) => {
+    const next = -Number(deg);
+    return `rotate(${Object.is(next, -0) ? 0 : next}deg)`;
+  });
+  const cleaned = mirrored.replace(pattern, '').trim();
+  if (cleaned !== mirrored.trim()) return cleaned;
+  return cleaned ? `${cleaned} ${fn}` : fn;
+}
+
+/** ⌘R でレイヤー名の入力を開く合図。レイヤーパネル(と左パネルのタブ)が受け取る */
+export const RENAME_LAYER_EVENT = 'gg:rename-layer';
+
+/** ⌘\ で UI を隠すときにエディタの外枠に付けるクラス(skin.css が見る) */
+const UI_HIDDEN_CLASS = 'gg-ui-hidden';
+
+/** 文字を直に持つ要素(テキストノードの子がある要素)。⌘⇧> / ⌘⇧< の対象 */
+function textBearers(root: HTMLElement): HTMLElement[] {
+  const all = [root, ...Array.from(root.querySelectorAll<HTMLElement>('*'))];
+  return all.filter(
+    (el) =>
+      !el.closest('.selection-box') &&
+      Array.from(el.childNodes).some((n) => n.nodeType === 3 && (n.textContent ?? '').trim()),
+  );
+}
+
+/**
+ * ⌘\: エディタの外枠(.gg-editor-ui)にクラスを付け外しして、上の帯・左右のパネル・下の帯・道具箱を隠す。
+ * 紙面(キャンバス)だけが残る。もう一度 ⌘\ で戻る(Figma の Hide/Show UI)
+ */
+function toggleEditorUi(): void {
+  const shell = document.querySelector('.gg-editor-ui');
+  if (!shell) return;
+  shell.classList.toggle(UI_HIDDEN_CLASS);
+}
+
+/** ⌘⇧O のアウトライン表示。iframe の <html> にクラスを付ける(保存は #artboard の中身だけなので本文には残らない) */
+const OUTLINE_CLASS = 'gg-outline-mode';
+const OUTLINE_STYLE_ID = 'gg-outline-mode-style';
+/**
+ * 輪郭表示でも消さないエディタの飾り(選択枠・ハンドル・寸法・吸着ガイド・計測など)。
+ * #artboard の中に描かれているので、除外しないと一緒に透明になって選択枠や寸法が見えなくなる
+ */
+const OUTLINE_KEEP =
+  '.selection-box,.marquee-selection-box,.resize-handle,.rotation-handle,.size-label,.element-breadcrumb,' +
+  '#gg-smart-guides,#gg-measure-layer,.gg-comment-layer,.gg-collab-layer,.gg-crop-ui';
+const OUTLINE_TARGET = `html.${OUTLINE_CLASS} #artboard *:not(:is(${OUTLINE_KEEP})):not(:is(${OUTLINE_KEEP}) *)`;
+const OUTLINE_CSS = `
+html.${OUTLINE_CLASS} #artboard {
+  background: #fff !important;
+}
+${OUTLINE_TARGET} {
+  background: transparent !important;
+  box-shadow: none !important;
+  border-color: transparent !important;
+  outline: 1px solid rgba(0, 0, 0, 0.55) !important;
+  outline-offset: -1px;
+  -webkit-text-fill-color: transparent !important;
+  -webkit-text-stroke: 0.8px #222 !important;
+}
+${OUTLINE_TARGET}:is(img, video), ${OUTLINE_TARGET}:is(svg *) {
+  opacity: 0 !important;
+}
+`;
+
+/**
+ * ⌘⇧O: 紙面の塗り・画像を消して、各要素の枠と文字の輪郭だけを見せる(Figma の Show outlines)。
+ * 重なって見えない要素や、透明な器の大きさを確かめるのに使う。もう一度押すと戻る
+ */
+function toggleOutlineIn(doc: Document): void {
+  if (!doc.getElementById(OUTLINE_STYLE_ID)) {
+    const style = doc.createElement('style');
+    style.id = OUTLINE_STYLE_ID;
+    style.textContent = OUTLINE_CSS;
+    doc.head.appendChild(style);
+  }
+  doc.documentElement.classList.toggle(OUTLINE_CLASS);
+}
+
+const OPACITY_KEYS = ['opacity1', 'opacity2', 'opacity3', 'opacity4', 'opacity5', 'opacity6', 'opacity7', 'opacity8', 'opacity9', 'opacity0'] as const;
+
+/**
+ * Figma 準拠のキャンバス操作をショートカットのコールバック表として返す。
+ * FrontendVisualEditor の shortcutCallbacks に展開して使う。
+ * 選択が無いときは undefined を返し、キーをブラウザ既定に通す(何も奪わない)。
+ */
+export function useCanvasShortcutActions(): ShortcutCallbacks {
+  const {
+    getIframeDoc,
+    selectedElement,
+    selectedElementIds,
+    setSelectedElement,
+    setSelectedElementIds,
+    notifyIframeChange,
+    restoreFocus,
+  } = useEditorContext();
+
+  const ids = selectedElementIds.length ? selectedElementIds : selectedElement ? [selectedElement.id] : [];
+  const hasSelection = ids.length > 0;
+
+  /** DOM の選択を React 側へ反映する(右パネル・レイヤーパネルが追従する) */
+  const commit = useCallback(
+    (doc: Document, els: HTMLElement[]) => {
+      markSelected(doc, els);
+      setSelectedElementIds(els.map((el) => el.getAttribute('data-element-id') || '').filter(Boolean));
+      const info = els[0] ? extractElementInfo(els[0], doc) : null;
+      setSelectedElement(info ?? null);
+      restoreFocus();
+    },
+    [setSelectedElementIds, setSelectedElement, restoreFocus],
+  );
+
+  /** 書き換えたあとの後始末(履歴へ積み、枠と右パネルを描き直す) */
+  const afterChange = useCallback(
+    (doc: Document, changed: HTMLElement[]) => {
+      if (!changed.length) return;
+      notifyIframeChange();
+      requestAnimationFrame(() => refreshSelectionOverlay(doc));
+      const first = selectedEls(doc, ids)[0];
+      const info = first ? extractElementInfo(first, doc) : null;
+      if (info) setSelectedElement(info);
+    },
+    // ids は毎レンダー作り直すので文字列で比べる
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [notifyIframeChange, setSelectedElement, ids.join(',')],
+  );
+
+  /** Enter: 子を選ぶ。文字を直に持つ要素なら文字の編集に入る */
+  const selectChildren = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const els = selectedEls(doc, ids);
+    if (els.length === 1 && hasOwnText(els[0])) {
+      startTextEditingViaDblClick(els[0]);
+      return;
+    }
+    const children = els.flatMap(editableChildrenOf);
+    if (children.length === 0) {
+      // 子が無い葉(画像・図形・文字だけの要素)。文字を持つなら編集に入る
+      if (els.length === 1 && (els[0].textContent ?? '').trim()) startTextEditingViaDblClick(els[0]);
+      return;
+    }
+    commit(doc, children);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getIframeDoc, commit, ids.join(',')]);
+
+  /** Shift+Enter: 親を選ぶ(複数選択なら各要素の親をまとめて)。最上位では何もしない */
+  const selectParent = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const parents = Array.from(
+      new Set(selectedEls(doc, ids).map(editableParentOf).filter((p): p is HTMLElement => !!p)),
+    );
+    if (parents.length === 0) return;
+    commit(doc, parents);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getIframeDoc, commit, ids.join(',')]);
+
+  const runAlign = useCallback(
+    (mode: AlignMode) => {
+      const doc = getIframeDoc();
+      if (!doc) return;
+      afterChange(doc, alignElements(withoutLocked(selectedEls(doc, ids)), mode));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  const runDistribute = useCallback(
+    (axis: DistributeAxis) => {
+      const doc = getIframeDoc();
+      if (!doc) return;
+      afterChange(doc, distributeElements(withoutLocked(selectedEls(doc, ids)), axis));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  /**
+   * ⌘⇧H: 隠す/表示する。書き方はレイヤーパネルの目のアイコンと同じ
+   * (visibility:hidden + opacity:0)にそろえる。違う書き方にすると、
+   * 片方で隠したものがもう片方で「表示中」に見える
+   */
+  const toggleHidden = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const els = selectedEls(doc, ids);
+    const allHidden = els.length > 0 && els.every((el) => el.style.visibility === 'hidden');
+    els.forEach((el) => {
+      el.style.visibility = allHidden ? '' : 'hidden';
+      el.style.opacity = allHidden ? '' : '0';
+    });
+    afterChange(doc, els);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getIframeDoc, afterChange, ids.join(',')]);
+
+  /**
+   * ⌘⇧L: ロック/解除。data-gg-locked="true" を付けると、紙面のクリックが下の要素へ
+   * 素通りする(constants.ts の EDITOR_STYLES)。選択はレイヤーパネルから行える(Figma と同じ)
+   */
+  const toggleLocked = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const els = selectedEls(doc, ids);
+    const allLocked = els.length > 0 && els.every((el) => el.getAttribute(LOCK_ATTR) === 'true');
+    els.forEach((el) => {
+      if (allLocked) el.removeAttribute(LOCK_ATTR);
+      else el.setAttribute(LOCK_ATTR, 'true');
+    });
+    afterChange(doc, els);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getIframeDoc, afterChange, ids.join(',')]);
+
+  /** 数字キー: 不透明度(1=10% … 9=90%, 0=100%) */
+  const setOpacity = useCallback(
+    (digit: number) => {
+      const doc = getIframeDoc();
+      if (!doc) return;
+      const els = withoutLocked(selectedEls(doc, ids));
+      // 素早く2つ続けたら2桁(4→5 で 45%、0→0 で 0%)。1つだけなら 1=10% … 9=90%、0=100%
+      const now = Date.now();
+      const prev = lastOpacityDigit && now - lastOpacityDigit.at < OPACITY_TWO_DIGIT_MS ? lastOpacityDigit : null;
+      let value: string;
+      if (prev) {
+        value = String((prev.digit * 10 + digit) / 100);
+        lastOpacityDigit = null;
+      } else {
+        value = digit === 0 ? '1' : String(digit / 10);
+        lastOpacityDigit = { digit, at: now };
+      }
+      els.forEach((el) => applyTailwindStyles(el, { opacity: value }));
+      afterChange(doc, els);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  /**
+   * ⇧H / ⇧V: 左右反転・上下反転(help.figma.com「Adjust alignment, rotation, position, and dimensions」の
+   * Flip layers と同じキー)。複数選択は Figma と同じく選択全体を 1 つの塊として反転する
+   * (各要素の位置を選択群の中心で鏡写しにし、各要素にも反転を付ける)。履歴は 1 回分
+   */
+  const flip = useCallback(
+    (axis: 'x' | 'y') => {
+      const doc = getIframeDoc();
+      if (!doc) return;
+      const els = withoutLocked(selectedEls(doc, ids));
+      // 複数選択は塊として鏡写し: 位置を選択群の中心で反転してから、各要素にも反転を付ける
+      if (els.length > 1) mirrorPositions(els, axis);
+      els.forEach((el) => {
+        const next = toggleFlipIn(el.style.transform || '', axis);
+        if (next) el.style.transform = next;
+        else el.style.removeProperty('transform');
+      });
+      afterChange(doc, els);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  /**
+   * ⌘⇧> / ⌘⇧<: 文字の大きさを 1px 上げる/下げる。
+   * 刻みは記憶にもとづく(help.figma.com「Explore text properties」はキーだけで刻みを書いていない)。
+   * 選んだ要素の中で文字を直に持つ要素それぞれを、今の大きさから同じ量だけ動かす
+   * (見出しと本文の大きさの差は保つ)。複数選択でも1回の変更 = ⌘Z 1回で戻る。
+   */
+  const stepFontSize = useCallback(
+    (delta: number) => {
+      const doc = getIframeDoc();
+      const view = doc?.defaultView;
+      if (!doc || !view) return;
+      const els = withoutLocked(selectedEls(doc, ids));
+      const targets = Array.from(new Set(els.flatMap(textBearers)));
+      if (!targets.length) return;
+      // 先に全部の今の大きさを読む(親を書き換えてから子を読むと継承で値が変わる)
+      const sizes = targets.map((el) => parseFloat(view.getComputedStyle(el).fontSize));
+      targets.forEach((el, i) => {
+        if (!Number.isFinite(sizes[i])) return;
+        const next = Math.max(1, Math.round(sizes[i]) + delta);
+        // tailwind-merge は text-[Npx] を入れると leading-* を消す(文字の大きさが行の高さも決めるため)。
+        // 行の高さは変えたくないので、付いていた leading-* を戻す
+        const leading = Array.from(el.classList).filter((c) => /^leading-/.test(c));
+        applyTailwindStyles(el, { fontSize: `${next}px` });
+        leading.forEach((c) => el.classList.add(c));
+      });
+      afterChange(doc, els);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  /**
+   * ⌘B / ⌘I / ⌘U: 要素の文字全体の書式を切り替える。
+   * 複数選択なら「全部が ON なら OFF、それ以外は全部 ON」(Figma と同じ揃え方)
+   */
+  const toggleTextStyle = useCallback(
+    (kind: 'bold' | 'italic' | 'underline') => {
+      const doc = getIframeDoc();
+      const view = doc?.defaultView;
+      if (!doc || !view) return;
+      const els = withoutLocked(selectedEls(doc, ids)).filter((el) => (el.textContent ?? '').trim());
+      if (!els.length) return;
+      // ホバー中の文字要素にはエディタが青い下線(.text-editable-hover)を引いている。
+      // そのまま測ると「下線あり」と読んで ⌘U が毎回 OFF 側に倒れるので、外して測る
+      const HOVER_CLASSES = ['text-editable-hover', 'hover-preview'];
+      const isOn = (el: HTMLElement) => {
+        const had = HOVER_CLASSES.filter((c) => el.classList.contains(c));
+        el.classList.remove(...had);
+        const cs = view.getComputedStyle(el);
+        const on =
+          kind === 'bold'
+            ? (parseInt(cs.fontWeight, 10) || 400) >= 600
+            : kind === 'italic'
+              ? cs.fontStyle === 'italic'
+              : cs.textDecorationLine.includes('underline');
+        el.classList.add(...had);
+        return on;
+      };
+      const turnOn = !els.every(isOn);
+      const styles: Record<string, string> =
+        kind === 'bold'
+          ? { fontWeight: turnOn ? '700' : '400' }
+          : kind === 'italic'
+            ? { fontStyle: turnOn ? 'italic' : 'normal' }
+            : { textDecoration: turnOn ? 'underline' : 'none' };
+      els.forEach((el) => applyTailwindStyles(el, styles));
+      afterChange(doc, els);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  // ⌘\ は選択が無くても効く(UI を隠したまま選択を外しても戻せるように)
+  const always: ShortcutCallbacks = {
+    toggleUi: toggleEditorUi,
+    toggleOutline: () => {
+      const doc = getIframeDoc();
+      if (doc) toggleOutlineIn(doc);
+    },
+  };
+  if (!hasSelection) return always;
+
+  const callbacks: ShortcutCallbacks = {
+    ...always,
+    flipH: () => flip('x'),
+    flipV: () => flip('y'),
+    renameLayer: () => {
+      const id = ids[0] ?? selectedElement?.id;
+      if (id) window.dispatchEvent(new CustomEvent(RENAME_LAYER_EVENT, { detail: { id } }));
+    },
+    selectChildren,
+    selectParent,
+    alignLeft: () => runAlign('left'),
+    alignRight: () => runAlign('right'),
+    alignTop: () => runAlign('top'),
+    alignBottom: () => runAlign('bottom'),
+    alignHCenter: () => runAlign('hcenter'),
+    alignVCenter: () => runAlign('vcenter'),
+    distributeH: () => runDistribute('h'),
+    distributeV: () => runDistribute('v'),
+    toggleHidden,
+    toggleLocked,
+    toggleBold: () => toggleTextStyle('bold'),
+    toggleItalic: () => toggleTextStyle('italic'),
+    toggleUnderline: () => toggleTextStyle('underline'),
+    fontSizeUp: () => stepFontSize(1),
+    fontSizeDown: () => stepFontSize(-1),
+  };
+  OPACITY_KEYS.forEach((key, i) => {
+    callbacks[key] = () => setOpacity(i === 9 ? 0 : i + 1);
+  });
+  return callbacks;
+}

package/src/editor/hooks/useMarqueeSelection.ts

@@ -19,6 +19,7 @@ import { extractElementInfo } from '../utils/style-utils';
 import { MARQUEE_DRAG_THRESHOLD } from '../constants';
 import type { MarqueeState } from '../types';
 import { debugLog } from '../utils/debug';
+import { isLockedEl } from '../utils/lock';
 
 interface UseMarqueeSelectionOptions {
   /** マーキー選択の開始保留フラグ */
@@ -54,7 +55,10 @@ export function findElementsIntersectingMarquee(
       el.classList.contains('selection-box') ||
       el.classList.contains('marquee-selection-box') ||
       el.classList.contains('drawing-preview') ||
-      el.closest('.selection-box')
+      el.closest('.selection-box') ||
+      // ロック中(⌘⇧L)・非表示(⌘⇧H / 目のアイコン)は範囲選択でも拾わない(Figma と同じ)
+      isLockedEl(el) ||
+      el.style.visibility === 'hidden'
     ) {
       return;
     }