@growgroup/visual-editor 0.10.0 → 0.11.0

package/src/editor/utils/history-timing.ts

@@ -0,0 +1,9 @@
+/**
+ * 履歴が「同じ要素への続けての変更」を1つにまとめる間隔(ms)。
+ * EditorHistoryContext と、数字キーの不透明度(2桁入力)の両方が使う。
+ *
+ * EditorHistoryContext.tsx から直接 export しないのは、コンポーネント以外の値を export すると
+ * React Fast Refresh がそのファイルを差し替えられず、編集のたびにページ全体が読み込み直される
+ * (開いている編集の ⌘Z 履歴が消える)ため。
+ */
+export const COALESCE_WINDOW_MS = 400;

package/src/editor/utils/html-utils.ts

@@ -371,6 +371,10 @@ export function getCleanHtml(doc: Document): string {
   // ドラッグ中の整列ガイド(表示専用)も保存しない
   tempContainer.querySelectorAll('#gg-smart-guides').forEach(el => el.remove());
 
+  // レイヤーパネルの行に乗せたときの紙面側の強調(表示専用)。
+  // 行の目・鍵のボタンを押すと、マウスが行に乗ったまま保存が走るので、ここで外さないと HTML に残る(実測)
+  tempContainer.querySelectorAll('[data-layer-hover]').forEach(el => el.removeAttribute('data-layer-hover'));
+
   // トリミングモードのUI(枠・ハンドル)。確定/中断で消えるが、保険で除去
   tempContainer.querySelectorAll('.gg-crop-ui').forEach(el => el.remove());
 

package/src/editor/utils/lock.ts

@@ -0,0 +1,24 @@
+/**
+ * ユーザーのロック(⌘⇧L・レイヤーパネルの鍵)。
+ *
+ * 属性名は `data-gg-locked`。部品定義の `element.locked` が以前から `data-locked="true"` を
+ * 付けている(component-renderer.ts)ので、同じ名前にするとロックの CSS(pointer-events:none)や
+ * 鍵の印が部品にまで効いてしまう。`data-gg-*` は部品の定義を作るとき(parts.ts の stripEditorAttrs)に
+ * 落ちるので、ロックが部品の定義に持ち込まれることもない。
+ *
+ * ロック中(本人か祖先がロック)の要素は、選ぶことはできるが(レイヤーパネル・Figma と同じ)、
+ * 位置・大きさ・見た目を変える操作の対象からは一律に外す(isLockedEl / withoutLocked)。
+ */
+
+export const LOCK_ATTR = 'data-gg-locked';
+export const LOCK_SELECTOR = `[${LOCK_ATTR}="true"]`;
+
+/** 本人か祖先がロックされているか */
+export function isLockedEl(el: Element): boolean {
+  return typeof el.closest === 'function' && !!el.closest(LOCK_SELECTOR);
+}
+
+/** 編集の対象からロック中の要素を外す */
+export function withoutLocked<T extends Element>(els: T[]): T[] {
+  return els.filter((el) => !isLockedEl(el));
+}

package/src/editor/utils/smart-duplicate.ts

@@ -0,0 +1,51 @@
+/**
+ * ⌘D の「直前のずれを繰り返す」複製(Figma の Duplicate / PowerPoint の Ctrl+D と同じ作法)。
+ *
+ * Figma(help.figma.com「Copy and paste objects」): ⌘D は元の真上に複製する(最上位フレームを除く)。
+ * ⌥ドラッグで複製したあとに ⌘D を続けると、同じ距離で複製を続ける。
+ * ⌘D で複製 → 動かす → ⌘D でも、同じずれを繰り返す(PowerPoint の Ctrl+D と同じ)。
+ *
+ * 「どの要素を、どこから複製したか」を1組だけ覚え、次の ⌘D で選択がその要素のままなら
+ * 「今の位置 − 複製元の位置」をずれとして使う。選択が変わっていれば真上(ずれ 0)。
+ */
+
+interface Point {
+  left: number;
+  top: number;
+}
+
+let memory: { key: string; from: Point } | null = null;
+
+const keyOf = (ids: string[]) => [...ids].sort().join(',');
+
+/** 位置指定の要素の left/top(使用値)。フロー要素など読めないときは null */
+export function readPosition(el: HTMLElement): Point | null {
+  const view = el.ownerDocument.defaultView;
+  if (!view) return null;
+  const cs = view.getComputedStyle(el);
+  if (cs.position !== 'absolute' && cs.position !== 'fixed') return null;
+  const left = parseFloat(cs.left);
+  const top = parseFloat(cs.top);
+  return Number.isFinite(left) && Number.isFinite(top) ? { left, top } : null;
+}
+
+/** 複製した(または ⌥ドラッグで複製を置いた)要素と、その複製元の位置を覚える */
+export function rememberDuplicate(ids: string[], from: Point | null): void {
+  memory = ids.length && from ? { key: keyOf(ids), from } : null;
+}
+
+export function forgetDuplicate(): void {
+  memory = null;
+}
+
+/**
+ * 次の ⌘D のずれ。覚えた要素が今も選ばれていて、動いていればそのずれ。それ以外は 0
+ * @param ids 今の選択
+ * @param first 今の選択の先頭の要素(位置を読む)
+ */
+export function repeatOffsetFor(ids: string[], first: HTMLElement | null): { dx: number; dy: number } {
+  if (!memory || !first || memory.key !== keyOf(ids)) return { dx: 0, dy: 0 };
+  const now = readPosition(first);
+  if (!now) return { dx: 0, dy: 0 };
+  return { dx: now.left - memory.from.left, dy: now.top - memory.from.top };
+}

package/src/editor/utils/smart-guides.ts

@@ -13,10 +13,13 @@
  * ソート済み配列への二分探索3本(x)と3本(y)だけで、要素数が数百でも一定時間で終わる。
  */
 
+import { getActiveCanvasGuides } from './canvas-guides';
 import { getOverlayRect } from './dom-utils';
 
 const LAYER_ID = 'gg-smart-guides';
 const RED = '#f24822'; // Figmaの計測色(measure-distance.ts と揃える)
+/** 等間隔の表示色(Figma の等間隔ガイドのピンク。記憶にもとづく近似色) */
+const PINK = '#ff3ebf';
 
 /** 吸着する距離。画面上のpxで定義し、使う側でズーム倍率を割り戻す */
 export const SNAP_THRESHOLD_SCREEN_PX = 4;
@@ -31,6 +34,8 @@ const OVERLAY_SELECTOR =
 export interface GuideCandidates {
   xs: number[];
   ys: number[];
+  /** 兄弟の矩形(等間隔の判定に使う)。アートボード座標 */
+  rects?: MovingRect[];
 }
 
 /** アートボード座標の矩形 */
@@ -49,6 +54,18 @@ export interface SnapResult {
   guideX: number | null;
   /** 揃った横線のy座標 */
   guideY: number | null;
+  /** 等間隔に吸着したときの間隔の表示(軸ごと)。吸着していない軸は入らない */
+  spacing?: SpacingMark[];
+}
+
+/**
+ * 等間隔の表示 1 本。axis='x' なら from〜to は x 座標で、at(y)の高さに横向きの線を引く
+ */
+export interface SpacingMark {
+  axis: 'x' | 'y';
+  from: number;
+  to: number;
+  at: number;
 }
 
 /** 昇順ソート + 近い値の重複除去(0.5px以内は同じ線とみなす) */
@@ -96,9 +113,14 @@ export function collectGuideCandidates(
   // アートボードの端と中央(スライドの版面に対する整列)
   const xs: number[] = [0, width / 2, width];
   const ys: number[] = [0, height / 2, height];
+  // 定規から引いたガイド(キャンバス表示・編集中のページのもの)も吸着の相手
+  const ruled = getActiveCanvasGuides();
+  xs.push(...ruled.xs);
+  ys.push(...ruled.ys);
 
   const movingSet = new Set<HTMLElement>(moving);
   const seen = new Set<HTMLElement>();
+  const rects: MovingRect[] = [];
 
   for (const el of moving) {
     const parent = el.parentElement;
@@ -120,10 +142,105 @@ export function collectGuideCandidates(
 
       xs.push(r.left, r.left + r.width / 2, r.left + r.width);
       ys.push(r.top, r.top + r.height / 2, r.top + r.height);
+      rects.push({ left: r.left, top: r.top, width: r.width, height: r.height });
     }
   }
 
-  return { xs: normalize(xs), ys: normalize(ys) };
+  return { xs: normalize(xs), ys: normalize(ys), rects };
+}
+
+/** 軸に沿って見た矩形。s〜e が軸方向、cs〜ce が直交方向 */
+interface AxisSpan {
+  s: number;
+  e: number;
+  cs: number;
+  ce: number;
+}
+
+function toAxis(r: MovingRect, axis: 'x' | 'y'): AxisSpan {
+  return axis === 'x'
+    ? { s: r.left, e: r.left + r.width, cs: r.top, ce: r.top + r.height }
+    : { s: r.top, e: r.top + r.height, cs: r.left, ce: r.left + r.width };
+}
+
+/** 2つの矩形の直交方向の重なりの中央(間隔の線を引く高さ) */
+function crossMid(a: AxisSpan, b: AxisSpan): number {
+  const lo = Math.max(a.cs, b.cs);
+  const hi = Math.min(a.ce, b.ce);
+  return lo <= hi ? (lo + hi) / 2 : (a.cs + a.ce) / 2;
+}
+
+/**
+ * 等間隔への吸着(Figma の等間隔ガイド)。
+ *
+ * 動かしている矩形と直交方向に重なる兄弟だけを「同じ列」とみなし、次の 3 通りを試す。
+ * 1. 前と後ろの兄弟のちょうど中間(両側の隙間が同じ)
+ * 2. 前の 2 つと同じ間隔で後ろに続ける(3 枚目のカードを並べるとき)
+ * 3. 後ろの 2 つと同じ間隔で前に置く
+ * いちばん近いものが threshold 以内なら、その補正量と表示する線を返す。
+ */
+function snapToSpacing(
+  rects: MovingRect[],
+  rect: MovingRect,
+  axis: 'x' | 'y',
+  threshold: number,
+): { diff: number; marks: SpacingMark[] } | null {
+  const m = toAxis(rect, axis);
+  const size = m.e - m.s;
+  const mid = (m.s + m.e) / 2;
+  const row = rects.map((r) => toAxis(r, axis)).filter((o) => o.cs < m.ce && o.ce > m.cs);
+  // 前 = 終わりが自分の中央より手前、後ろ = 始まりが自分の中央より先。重なっているものは数えない
+  const before = row.filter((o) => o.e <= mid && o.s < m.s).sort((a, b) => b.e - a.e);
+  const after = row.filter((o) => o.s >= mid && o.e > m.e).sort((a, b) => a.s - b.s);
+  const prev = before[0];
+  const next = after[0];
+
+  type Option = { target: number; marks: SpacingMark[] };
+  const options: Option[] = [];
+  const mark = (from: number, to: number, at: number): SpacingMark => ({ axis, from, to, at });
+
+  if (prev && next) {
+    const gap = (next.s - prev.e - size) / 2;
+    if (gap >= 0) {
+      const t = prev.e + gap;
+      const at = (crossMid(prev, m) + crossMid(next, m)) / 2;
+      options.push({ target: t, marks: [mark(prev.e, t, at), mark(t + size, next.s, at)] });
+    }
+  }
+  if (prev) {
+    // prev の手前にある、prev と同じ列の兄弟
+    const prev2 = row
+      .filter((o) => o !== prev && o.e <= prev.s + 0.5 && o.cs < prev.ce && o.ce > prev.cs)
+      .sort((a, b) => b.e - a.e)[0];
+    if (prev2) {
+      const gap = prev.s - prev2.e;
+      const t = prev.e + gap;
+      options.push({
+        target: t,
+        marks: [mark(prev2.e, prev.s, crossMid(prev2, prev)), mark(prev.e, t, crossMid(prev, m))],
+      });
+    }
+  }
+  if (next) {
+    const next2 = row
+      .filter((o) => o !== next && o.s >= next.e - 0.5 && o.cs < next.ce && o.ce > next.cs)
+      .sort((a, b) => a.s - b.s)[0];
+    if (next2) {
+      const gap = next2.s - next.e;
+      const t = next.s - gap - size;
+      options.push({
+        target: t,
+        marks: [mark(t + size, next.s, crossMid(next, m)), mark(next.e, next2.s, crossMid(next, next2))],
+      });
+    }
+  }
+
+  let best: Option | null = null;
+  for (const o of options) {
+    const d = Math.abs(o.target - m.s);
+    if (d <= threshold && (!best || d < Math.abs(best.target - m.s))) best = o;
+  }
+  return best ? { diff: best.target - m.s, marks: best.marks } : null;
 }
 
 /**
@@ -166,6 +283,29 @@ export function snapToGuides(
     }
   }
 
+  // 等間隔。端・中央の吸着より近ければ、その軸は等間隔を優先する
+  if (candidates.rects?.length) {
+    const spacing: SpacingMark[] = [];
+    // 同じ位置で端の整列とも揃うなら(中央に置いた矢印など)、両方の線を出す
+    const SAME = 0.5;
+    const sx = snapToSpacing(candidates.rects, rect, 'x', threshold);
+    if (sx && (result.guideX === null || Math.abs(sx.diff) <= Math.abs(result.dx) + SAME)) {
+      if (result.guideX !== null && Math.abs(sx.diff - result.dx) > SAME) result.guideX = null;
+      result.dx = sx.diff;
+      spacing.push(...sx.marks);
+    }
+    const sy = snapToSpacing(candidates.rects, rect, 'y', threshold);
+    if (sy && (result.guideY === null || Math.abs(sy.diff) <= Math.abs(result.dy) + SAME)) {
+      if (result.guideY !== null && Math.abs(sy.diff - result.dy) > SAME) result.guideY = null;
+      result.dy = sy.diff;
+      spacing.push(...sy.marks);
+    }
+    if (spacing.length) {
+      // 等間隔の線は吸着後の位置で引く(x の線の高さは y の補正の影響を受けない近似で十分)
+      result.spacing = spacing;
+    }
+  }
+
   return result;
 }
 
@@ -182,9 +322,10 @@ export function drawSmartGuides(
   doc: Document,
   guideX: number | null,
   guideY: number | null,
+  spacing: SpacingMark[] = [],
 ): void {
   clearSmartGuides(doc);
-  if (guideX === null && guideY === null) return;
+  if (guideX === null && guideY === null && spacing.length === 0) return;
 
   const artboard = doc.getElementById('artboard');
   if (!artboard) return;
@@ -214,5 +355,94 @@ export function drawSmartGuides(
     layer.appendChild(line);
   }
 
+  // 等間隔: 隙間ごとにピンクの線と間隔の数値(Figma の等間隔ガイド)
+  for (const sp of spacing) {
+    const len = sp.to - sp.from;
+    if (len <= 0) continue;
+    const seg = doc.createElement('div');
+    seg.dataset.guide = 'spacing';
+    seg.style.cssText =
+      sp.axis === 'x'
+        ? `position:absolute;left:${sp.from}px;width:${len}px;top:${sp.at}px;height:${w};margin-top:calc(${half} * -1);background:${PINK};`
+        : `position:absolute;top:${sp.from}px;height:${len}px;left:${sp.at}px;width:${w};margin-left:calc(${half} * -1);background:${PINK};`;
+    const label = doc.createElement('div');
+    label.textContent = String(Math.round(len));
+    label.style.cssText =
+      `position:absolute;${sp.axis === 'x' ? 'left:50%;top:0' : 'top:50%;left:0'};transform:translate(-50%,-50%);` +
+      `padding:calc(1px * var(--overlay-scale, 1)) calc(4px * var(--overlay-scale, 1));` +
+      `border-radius:calc(2px * var(--overlay-scale, 1));background:${PINK};color:#fff;` +
+      `font:600 calc(11px * var(--overlay-scale, 1))/1.2 system-ui,sans-serif;white-space:nowrap;`;
+    seg.appendChild(label);
+    layer.appendChild(seg);
+  }
+
   artboard.appendChild(layer);
 }
+
+/** リサイズの吸着の結果。dx/dy は「マウスの移動量(アートボード px)に足す補正量」 */
+export interface ResizeSnapResult {
+  dx: number;
+  dy: number;
+  guideX: number | null;
+  guideY: number | null;
+}
+
+/**
+ * リサイズ中の吸着(Figma と同じく、動いている辺だけが相手の端・中央・定規のガイドに吸い付く)
+ *
+ * rect は生の移動量で計算したリサイズ後の矩形(アートボード座標)。
+ * 掴んだ辺は、左右・上下どちらのハンドルでも移動量と同じだけ同じ向きに動く
+ * (Alt の中心固定でも同じ。そのとき対辺は逆向きに同じだけ動く)。
+ * なので「辺の位置の差」がそのまま移動量の補正になり、対辺で揃えるときだけ符号を反転する。
+ *
+ * axes で吸着させる軸を選ぶ。Shift(縦横比固定)のときは呼び出し側が主に動いている軸だけを渡し、
+ * もう片方は比から出す。
+ */
+export function snapResizeEdges(
+  candidates: GuideCandidates,
+  rect: MovingRect,
+  dir: { x: -1 | 0 | 1; y: -1 | 0 | 1 },
+  opts: { alt: boolean; axes: { x: boolean; y: boolean } },
+  threshold: number,
+): ResizeSnapResult {
+  const result: ResizeSnapResult = { dx: 0, dy: 0, guideX: null, guideY: null };
+
+  const pick = (
+    list: number[],
+    start: number,
+    end: number,
+    d: -1 | 1,
+  ): { delta: number; guide: number } | null => {
+    // 掴んだ辺(+1)。Alt なら対辺も動くので候補に入れる(-1)
+    const edges: Array<[number, 1 | -1]> = [[d > 0 ? end : start, 1]];
+    if (opts.alt) edges.push([d > 0 ? start : end, -1]);
+    let best: { delta: number; guide: number } | null = null;
+    let bestDist = threshold;
+    for (const [edge, sign] of edges) {
+      const target = nearest(list, edge);
+      if (target === null) continue;
+      const diff = target - edge;
+      if (Math.abs(diff) <= bestDist) {
+        bestDist = Math.abs(diff);
+        best = { delta: diff * sign, guide: target };
+      }
+    }
+    return best;
+  };
+
+  if (opts.axes.x && dir.x !== 0) {
+    const s = pick(candidates.xs, rect.left, rect.left + rect.width, dir.x);
+    if (s) {
+      result.dx = s.delta;
+      result.guideX = s.guide;
+    }
+  }
+  if (opts.axes.y && dir.y !== 0) {
+    const s = pick(candidates.ys, rect.top, rect.top + rect.height, dir.y);
+    if (s) {
+      result.dy = s.delta;
+      result.guideY = s.guide;
+    }
+  }
+  return result;
+}

package/src/hooks/useEditorShortcuts.ts

@@ -51,6 +51,11 @@ function keyFromCode(code: string | undefined): string | undefined {
   if (digit) return digit[1];
   const bracket = code === 'BracketLeft' ? '[' : code === 'BracketRight' ? ']' : undefined;
   if (bracket) return bracket;
+  // ⌘⇧> / ⌘⇧<(文字の大きさ)。JIS 配列などで e.key が '>' '<' にならないときの引き直し
+  if (code === 'Period') return '.';
+  // ⌘\(UI を隠す)。JIS 配列の ¥ キー(IntlYen)も同じ位置づけ
+  if (code === 'Backslash' || code === 'IntlYen' || code === 'IntlRo') return '\\';
+  if (code === 'Comma') return ',';
   return undefined;
 }
 
@@ -122,7 +127,24 @@ function isAllowedInEditableContext(action: ShortcutAction | undefined): boolean
  * ヘッダーやパネルのボタンをキーボードだけで辿れなくなるため、
  * 紙面を触っている間だけ「兄弟要素の巡回」に使う。
  */
-const CANVAS_ONLY: ShortcutAction[] = ['selectNextSibling', 'selectPrevSibling'];
+const CANVAS_ONLY: ShortcutAction[] = [
+  'selectNextSibling',
+  'selectPrevSibling',
+  // Enter はボタンの押下・ダイアログの確定でもある。UI にフォーカスがあるときは奪わない
+  'selectChildren',
+  'selectParent',
+  // 数字キーは右パネルの数値入力以外(スライダー・セレクト等)でも既定の意味を持つことがある
+  'opacity1',
+  'opacity2',
+  'opacity3',
+  'opacity4',
+  'opacity5',
+  'opacity6',
+  'opacity7',
+  'opacity8',
+  'opacity9',
+  'opacity0',
+];
 
 /**
  * このイベントがキャンバス(iframe)側の操作か。
@@ -130,6 +152,13 @@ const CANVAS_ONLY: ShortcutAction[] = ['selectNextSibling', 'selectPrevSibling']
  * - 親側から来た場合は、body か iframe 自身にフォーカスがあるときだけキャンバス扱い
  *   （ボタンや入力にフォーカスがあるなら、それはUIの操作中）
  */
+/**
+ * 押す相手が無い(選択が無い)ときでも、キャンバスにフォーカスがあればブラウザ既定に通さないキー。
+ * ⌘R(レイヤー名の変更)をそのまま通すとページが読み込み直され、⌘Z の履歴が消える。
+ * UI 側にフォーカスがあるときは既定どおり(読み込み直し)
+ */
+const SWALLOW_ON_CANVAS: ShortcutAction[] = ['renameLayer'];
+
 function isCanvasEvent(event: KeyboardEvent): boolean {
   const doc = (event.target as HTMLElement | null)?.ownerDocument ?? null;
   if (doc && typeof document !== 'undefined' && doc !== document) return true;
@@ -173,9 +202,21 @@ export function useEditorShortcuts(
       if (!enabledRef.current) return;
       const keyboardEvent = event as KeyboardEvent;
 
+      // 日本語入力の変換中(Enter での確定・数字での候補選択など)は一切奪わない。
+      // keyCode 229 は Safari/Chrome が変換中のキーに付ける値で、isComposing が
+      // まだ false の最初の1打もこれで拾える
+      if (keyboardEvent.isComposing || keyboardEvent.keyCode === 229) return;
+
       const action = resolveAction(keyboardEvent);
       if (!action) return;
 
+      // 数字キー(不透明度)は押しっぱなしのキーリピートを捨てる。2 桁入力(5→5 で 55%)と
+      // 混ざって 50% と 55% を行き来してしまうため。既定の動作(数字の入力)も止める
+      if (keyboardEvent.repeat && action.startsWith('opacity')) {
+        if (callbacksRef.current[action]) keyboardEvent.preventDefault();
+        return;
+      }
+
       // イベント発生元 or そのドキュメントのフォーカスがテキスト編集中か
       const doc = (keyboardEvent.target as HTMLElement | null)?.ownerDocument ?? null;
       const inEditableContext =
@@ -191,7 +232,10 @@ export function useEditorShortcuts(
       }
 
       const callback = callbacksRef.current[action];
-      if (!callback) return;
+      if (!callback) {
+        if (SWALLOW_ON_CANVAS.includes(action) && isCanvasEvent(keyboardEvent)) keyboardEvent.preventDefault();
+        return;
+      }
 
       keyboardEvent.preventDefault();
       keyboardEvent.stopPropagation();

package/src/styles/skin.css

@@ -387,3 +387,8 @@
 .gg-editor-ui .ed-frame-skeleton-note { font-size: 40px; color: #9aa3b2; }
 /* 定規の下に来る部分は透けないように */
 .gg-editor-ui [data-canvas-rulers] canvas { display: block; }
+
+/* ⌘\ で UI を隠す(Figma の Hide/Show UI)。紙面の行だけ残し、上の帯・左右のパネル・発表者ノート・下の帯・道具箱を隠す */
+.gg-editor-ui.gg-ui-hidden > :not(.flex-1),
+.gg-editor-ui.gg-ui-hidden > .flex-1 > :not(.flex-1),
+.gg-editor-ui.gg-ui-hidden .ed-toolbar { display: none !important; }

package/src/types/editor.ts

@@ -51,6 +51,11 @@ export interface SerializedElement {
   style: string;
   innerHTML: string;
   attributes: Record<string, string>;
+  /**
+   * コピーした時点の位置と大きさ(親の中の left/top。絶対配置の要素だけ)。
+   * 器を選んで貼るとき、同じ位置に入りきるか(入らなければ中央)の判定に使う
+   */
+  box?: { left: number; top: number; width: number; height: number };
 }
 
 // Clipboard data structure
@@ -151,7 +156,51 @@ export type ShortcutAction =
   | 'bringForward'
   | 'sendBackward'
   | 'bringToFront'
-  | 'sendToBack';
+  | 'sendToBack'
+  // 選択の階層移動(Figma: Enter で子へ / Shift+Enter で親へ)
+  | 'selectChildren'
+  | 'selectParent'
+  // 整列(Figma: ⌥A/⌥D/⌥W/⌥S/⌥H/⌥V)と等間隔(⌃⌥H/⌃⌥V)
+  | 'alignLeft'
+  | 'alignRight'
+  | 'alignTop'
+  | 'alignBottom'
+  | 'alignHCenter'
+  | 'alignVCenter'
+  | 'distributeH'
+  | 'distributeV'
+  // 表示/ロックの切り替え(Figma: ⌘⇧H / ⌘⇧L)
+  | 'toggleHidden'
+  | 'toggleLocked'
+  // 数字キーで不透明度(Figma: 1=10% … 9=90%, 0=100%)
+  | 'opacity1'
+  | 'opacity2'
+  | 'opacity3'
+  | 'opacity4'
+  | 'opacity5'
+  | 'opacity6'
+  | 'opacity7'
+  | 'opacity8'
+  | 'opacity9'
+  | 'opacity0'
+  // 文字の太字/斜体/下線を要素ごと切り替える(文字編集中はブラウザ既定に任せる)
+  | 'toggleBold'
+  | 'toggleItalic'
+  | 'toggleUnderline'
+  // 文字の大きさを 1px 上げる/下げる(Figma・PowerPoint: ⌘⇧> / ⌘⇧<)
+  | 'fontSizeUp'
+  | 'fontSizeDown'
+  // ⌘⇧V: その場に貼る(Figma の Paste over selection)
+  | 'pasteInPlace'
+  // ⇧H / ⇧V: 左右反転・上下反転(Figma と同じキー)
+  | 'flipH'
+  | 'flipV'
+  // ⌘R: レイヤー名を変える(Figma の Rename)
+  | 'renameLayer'
+  // ⌘\: UI を隠す / 出す(Figma の Hide/Show UI)
+  | 'toggleUi'
+  // ⌘⇧O: アウトライン表示(Figma の Show outlines。塗りを消して枠線だけにする)
+  | 'toggleOutline';
 
 // Shortcut callbacks interface
 export type ShortcutCallbacks = Partial<Record<ShortcutAction, () => void>>;
@@ -324,6 +373,76 @@ export const KEYBOARD_SHORTCUTS: Record<string, ShortcutAction> = {
   'ctrl+shift+]': 'bringToFront',
   'meta+shift+[': 'sendToBack',
   'ctrl+shift+[': 'sendToBack',
+  // Figma の Mac 割り当ては ⌥⌘] / ⌥⌘[(Windows は Ctrl+Shift+] / [)。
+  // ⌘⇧] / ⌘⇧[ は PowerPoint(Mac) と同じなので両方残す
+  'meta+alt+]': 'bringToFront',
+  'meta+alt+[': 'sendToBack',
+
+  // 選択の階層移動(Figma: Enter=子を選ぶ / Shift+Enter=親を選ぶ)
+  'enter': 'selectChildren',
+  'shift+enter': 'selectParent',
+
+  // 整列(Figma: Alt+A/D/W/S/H/V)。Mac の Option 併用で e.key が特殊文字になっても
+  // useEditorShortcuts の keyFromCode が event.code から引き直す
+  'alt+a': 'alignLeft',
+  'alt+d': 'alignRight',
+  'alt+w': 'alignTop',
+  'alt+s': 'alignBottom',
+  'alt+h': 'alignHCenter',
+  'alt+v': 'alignVCenter',
+  // 等間隔。Figma は Mac ⌃⌥H / ⌃⌥V、Windows Alt+Shift+H / V(記憶にもとづく・未確認)。
+  // ⌃⌥V は Windows の「スタイルをペースト」(Ctrl+Alt+V)と同じキーになるので、縦は ⇧⌥V に寄せ、横も揃えて ⇧⌥H を持つ
+  'ctrl+alt+h': 'distributeH',
+  'shift+alt+h': 'distributeH',
+  'shift+alt+v': 'distributeV',
+
+  // 表示/ロック(Figma: ⌘⇧H / ⌘⇧L)
+  'meta+shift+h': 'toggleHidden',
+  'ctrl+shift+h': 'toggleHidden',
+  'meta+shift+l': 'toggleLocked',
+  'ctrl+shift+l': 'toggleLocked',
+
+  // 不透明度(Figma: 1〜9 で 10〜90%、0 で 100%)
+  '1': 'opacity1',
+  '2': 'opacity2',
+  '3': 'opacity3',
+  '4': 'opacity4',
+  '5': 'opacity5',
+  '6': 'opacity6',
+  '7': 'opacity7',
+  '8': 'opacity8',
+  '9': 'opacity9',
+  '0': 'opacity0',
+
+  // 文字の書式(要素を選んだ状態で要素全体に効かせる。編集中は横取りしない)
+  'meta+b': 'toggleBold',
+  'ctrl+b': 'toggleBold',
+  'meta+i': 'toggleItalic',
+  'ctrl+i': 'toggleItalic',
+  'meta+u': 'toggleUnderline',
+  'ctrl+u': 'toggleUnderline',
+
+  // 文字の大きさ。US 配列の Shift+. は '>'、Shift+, は '<'。配列で e.key が違うときは code から引く('.' / ',')
+  'meta+shift+>': 'fontSizeUp',
+  'meta+shift+.': 'fontSizeUp',
+  'ctrl+shift+>': 'fontSizeUp',
+  'ctrl+shift+.': 'fontSizeUp',
+  'meta+shift+<': 'fontSizeDown',
+  'meta+shift+,': 'fontSizeDown',
+  'ctrl+shift+<': 'fontSizeDown',
+  'ctrl+shift+,': 'fontSizeDown',
+
+  'meta+shift+v': 'pasteInPlace',
+  'ctrl+shift+v': 'pasteInPlace',
+
+  'shift+h': 'flipH',
+  'shift+v': 'flipV',
+  'meta+r': 'renameLayer',
+  'ctrl+r': 'renameLayer',
+  'meta+\\': 'toggleUi',
+  'ctrl+\\': 'toggleUi',
+  'meta+shift+o': 'toggleOutline',
+  'ctrl+shift+o': 'toggleOutline',
 };
 
 // Movement amounts in pixels

package/src/version.ts

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