@growgroup/visual-editor 0.1.5 → 0.2.0

package/src/editor/hooks/useComponentEditMode.ts

@@ -4,6 +4,7 @@ import { htmlElementToComponentElement } from '../contexts/EditorComponentsConte
 import { renderComponentElement } from '../utils/component-renderer';
 import { propagateMasterChanges } from '../utils/component-sync';
 import { buildDomTree } from '../utils/dom-utils';
+import { applyLockInside, detachPart, partInfoOf, unlockPartDescendants } from '../parts';
 import { toast } from 'sonner';
 import type { MasterComponent, ComponentInstance } from '../../types/editor-components';
 
@@ -37,6 +38,10 @@ interface UseComponentEditModeReturn {
   selectedElementInstance: ComponentInstance | null;
   isComponentInstance: boolean;
   hasOverrides: boolean;
+  /** 選択要素が部品(data-part)のインスタンスか */
+  isPartInstance: boolean;
+  /** 「名前 vN」。インスタンスでなければ空 */
+  partLabel: string;
   // Handlers
   handleCreateComponent: () => void;
   handleConfirmCreateComponent: () => Promise<void>;
@@ -49,6 +54,10 @@ interface UseComponentEditModeReturn {
   handleDetachInstance: () => void;
   handleResetOverrides: () => Promise<void>;
   handlePushOverridesToMain: () => void;
+  /** 部品から切り離す(出自の記録を外して普通の HTML にする) */
+  handleDetachPart: () => void;
+  /** インスタンスの今の姿で定義を更新する(版 +1) */
+  handleUpdatePart: () => Promise<void>;
 }
 
 /**
@@ -86,6 +95,10 @@ export function useComponentEditMode({
     deleteMasterComponent,
     pendingNavigationTarget,
     clearNavigationRequest,
+    partsMode,
+    getPartDef,
+    savePartFromElement,
+    updatePartFromElement,
   } = useEditorComponents();
 
   // コンポーネントパネル状態
@@ -128,6 +141,20 @@ export function useComponentEditMode({
     return selectedElementInstance.overrides.length > 0;
   }, [selectedElementInstance]);
 
+  // 部品(data-part)のインスタンスか。状態は持たず、その時点の DOM の属性で決める
+  const selectedPart = useMemo(() => {
+    if (!selectedElement?.id) return null;
+    const doc = getIframeDoc();
+    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`);
+    return partInfoOf(el);
+  }, [selectedElement, getIframeDoc]);
+  const isPartInstance = !!selectedPart;
+  const partLabel = useMemo(() => {
+    if (!selectedPart) return '';
+    const def = getPartDef(selectedPart.id);
+    return `${def?.name || selectedPart.id} v${selectedPart.version}`;
+  }, [selectedPart, getPartDef]);
+
   // Create component from selected element
   const handleCreateComponent = useCallback(() => {
     if (!selectedElement?.id || !iframeRef.current) return;
@@ -149,6 +176,29 @@ export function useComponentEditMode({
     const element = iframeDoc.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement;
     if (!element) return;
 
+    // 部品モード: 選択要素を HTML の定義として利用側へ保存し、その場でインスタンスにする
+    if (partsMode) {
+      try {
+        const def = await savePartFromElement(element, {
+          name: newComponentName.trim(),
+          category: newComponentCategory || undefined,
+        });
+        applyLockInside(element);
+        notifyIframeChange(true);
+        setCreateComponentDialogOpen(false);
+        setNewComponentName('');
+        setNewComponentCategory('');
+        closeContextMenu();
+        toast.success(`部品「${def.name ?? def.id}」として保存しました`, {
+          description: `parts/${def.id}.html。スロット(data-slot)の外は編集できなくなります(切り離すと戻ります)`,
+        });
+      } catch (error) {
+        console.error('Failed to save part:', error);
+        toast.error('部品の保存に失敗しました');
+      }
+      return;
+    }
+
     try {
       // Debug: Log the original element
       console.log('[handleConfirmCreateComponent] Original element:', {
@@ -243,7 +293,7 @@ export function useComponentEditMode({
       console.error('Failed to create component:', error);
       toast.error('コンポーネントの作成に失敗しました');
     }
-  }, [selectedElement?.id, iframeRef, newComponentName, newComponentCategory, createMasterComponent, createInstance, contentId, notifyIframeChange, closeContextMenu, setSelectedElement, setSelectedElementIds]);
+  }, [selectedElement?.id, iframeRef, newComponentName, newComponentCategory, createMasterComponent, createInstance, contentId, notifyIframeChange, closeContextMenu, setSelectedElement, setSelectedElementIds, partsMode, savePartFromElement]);
 
   // Open master component editor
   const handleEditMasterComponent = useCallback((masterId: string) => {
@@ -617,6 +667,46 @@ export function useComponentEditMode({
     toast.info('この機能は現在開発中です');
   }, [selectedElementInstance, closeContextMenu]);
 
+  // 部品から切り離す: 出自の記録(data-part)だけ外し、ロックされていた子孫を編集できるようにする
+  const handleDetachPart = useCallback(() => {
+    if (!selectedElement?.id) return;
+    const doc = getIframeDoc();
+    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement | null;
+    if (!doc || !el || !partInfoOf(el)) return;
+    detachPart(el);
+    unlockPartDescendants(el);
+    notifyIframeChange(true);
+    // 部品バッジを消すため、選択情報を作り直す
+    void import('../utils/style-utils').then(({ extractElementInfo }) => {
+      const info = extractElementInfo(el, doc);
+      if (info) setSelectedElement(info);
+    });
+    closeContextMenu();
+    toast.success('部品から切り離しました', {
+      description: 'この要素は普通の HTML になり、parts:sync の対象から外れます',
+    });
+  }, [selectedElement?.id, getIframeDoc, notifyIframeChange, setSelectedElement, closeContextMenu]);
+
+  // インスタンスの今の姿で定義を更新する(版 +1)。他ページへは利用側の parts:sync で反映する
+  const handleUpdatePart = useCallback(async () => {
+    if (!selectedElement?.id) return;
+    const doc = getIframeDoc();
+    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement | null;
+    if (!el) return;
+    try {
+      const def = await updatePartFromElement(el);
+      if (!def) return;
+      notifyIframeChange(true);
+      closeContextMenu();
+      toast.success(`部品「${def.name ?? def.id}」を v${def.version} に更新しました`, {
+        description: '他のページのインスタンスへは parts:sync で反映します',
+      });
+    } catch (error) {
+      console.error('Failed to update part:', error);
+      toast.error('部品の更新に失敗しました');
+    }
+  }, [selectedElement?.id, getIframeDoc, updatePartFromElement, notifyIframeChange, closeContextMenu]);
+
   return {
     // Panel state
     isComponentPanelOpen,
@@ -642,6 +732,8 @@ export function useComponentEditMode({
     selectedElementInstance,
     isComponentInstance,
     hasOverrides,
+    isPartInstance,
+    partLabel,
     // Handlers
     handleCreateComponent,
     handleConfirmCreateComponent,
@@ -654,5 +746,7 @@ export function useComponentEditMode({
     handleDetachInstance,
     handleResetOverrides,
     handlePushOverridesToMain,
+    handleDetachPart,
+    handleUpdatePart,
   };
 }

package/src/editor/hooks/useDragResize.ts

@@ -31,6 +31,8 @@ import {
 } from '../utils/geometry';
 import {
   shouldReorder,
+  planSlideReorder,
+  resolveWebpageDrag,
   startReorder,
   computeInsertIndex,
   drawInsertIndicator,
@@ -290,7 +292,7 @@ const ROTATION_SNAP_DEG = 15;
 export function useDragResize(
   options: UseDragResizeOptions
 ): UseDragResizeReturn {
-  const { setShowLayoutHint, zoom } = useEditorContext();
+  const { setShowLayoutHint, zoom, editorMode } = useEditorContext();
 
   const {
     dragStateRef,
@@ -326,11 +328,26 @@ export function useDragResize(
   const reorderRef = useRef<ReorderSession | null>(null);
   const reorderIndexRef = useRef<number>(-1);
 
+  // 「並べ替えたいが相手がいない」ドラッグ。座標も DOM も一切書かずに空振りさせる。
+  // ここを立てずに素通りさせると convertDragTargetsToAbsolute が走って版面が崩れ、
+  // さらに mouseup が「動いた」と見なして履歴を1段積んでしまう
+  const dragBlockedRef = useRef(false);
+  // 案内はセッション中1回だけ。ドラッグのたびに帯が出ると操作の邪魔になる
+  const reorderHintShownRef = useRef(false);
+
+  // editorMode も zoom と同じ理由で ref に写す。
+  // iframe に張ったリスナーのクロージャは古い値を掴んだままになるため
+  const editorModeRef = useRef(editorMode);
+
   // zoomが変更されたらrefを更新
   useEffect(() => {
     zoomRef.current = zoom;
   }, [zoom]);
 
+  useEffect(() => {
+    editorModeRef.current = editorMode;
+  }, [editorMode]);
+
   // 最新のsetShowLayoutHintをrefに同期
   useEffect(() => {
     setShowLayoutHintRef.current = setShowLayoutHint;
@@ -360,6 +377,7 @@ export function useDragResize(
     dragBaseRectRef.current = null;
     reorderRef.current = null;
     reorderIndexRef.current = -1;
+    dragBlockedRef.current = false;
   }, [dragStateRef]);
 
   /**
@@ -556,9 +574,15 @@ export function useDragResize(
 
         // 位置を書けるのは「フローから外れている要素」だけ。
         // 絶対配置モードなら従来通り static → absolute へ倒して位置を持たせる。
+        //
+        // [webpage は倒さない] webpage は流し込みを保つ約束(README)。ここで倒すと
+        // 要素が流れから抜けて後続が詰め上がり、ページ高さが変わって紙面が飛ぶ。
+        // 大きさを変えるのに position は要らないので width/height だけ書く。
         const position = win?.getComputedStyle(el).position;
         const outOfFlow = isOutOfFlowPosition(position);
-        const canWritePosition = outOfFlow || layoutModeRef.current === 'absolute';
+        const canWritePosition =
+          outOfFlow ||
+          (layoutModeRef.current === 'absolute' && editorModeRef.current !== 'webpage');
 
         if (canWritePosition) {
           // すでにフロー外なら position は触らない（fixed を absolute に落とさない）
@@ -908,24 +932,50 @@ export function useDragResize(
         const targets = getDragTargets(dragState);
         const movingElements = targets.map((t) => t.element);
         const componentEdit = iframeDoc.body.classList.contains('component-edit-mode');
+        const isWebpage = editorModeRef.current === 'webpage';
 
         // Cmd/Ctrl は「並べ替えから抜けて自由に動かす」逃げ道。
         // スナップの無効化と同じキーに揃える(押している間は座標がそのまま通る)
         const wantsFreeMove = e.metaKey || e.ctrlKey;
 
-        if (
+        if (isWebpage) {
+          // ── webpage ──
+          // フロー内の要素を絶対配置へ倒すと、カラムが流れから抜けてページ高さが
+          // 潰れ、artboard が縮んで紙面が中央寄せで飛ぶ(実測 2424→679px)。
+          // README の設計原則どおり倒さず、同一親の並べ替えだけで動かす。
+          if (!componentEdit && !wantsFreeMove) {
+            const decision = resolveWebpageDrag(movingElements, iframeDoc);
+            if (decision.kind === 'reorder') {
+              reorderRef.current = startReorder(decision.plan, iframeDoc, {
+                restoreFlow: false,
+              });
+              reorderIndexRef.current = -1;
+            } else if (decision.kind !== 'free') {
+              // 並べ替える相手がいない/群がバラバラ。倒さず、動かさず、案内だけ出す
+              dragBlockedRef.current = true;
+              if (!reorderHintShownRef.current) {
+                reorderHintShownRef.current = true;
+                setShowLayoutHintRef.current(true);
+              }
+            }
+          }
+        } else if (
           !componentEdit &&
           !wantsFreeMove &&
           dragState.element &&
           shouldReorder(dragState.element, iframeDoc, movingElements.length)
         ) {
+          // ── slide ──
           // 並べ替え: 絶対配置へ倒さない。倒した瞬間にフレックスの設定が
           // 効かなくなり、右パネルのレイアウト指定が無意味になる
-          reorderRef.current = startReorder(dragState.element, iframeDoc);
-          reorderIndexRef.current = -1;
+          const plan = planSlideReorder(dragState.element, iframeDoc);
+          if (plan) {
+            reorderRef.current = startReorder(plan, iframeDoc, { restoreFlow: true });
+            reorderIndexRef.current = -1;
+          }
         }
 
-        if (!reorderRef.current) {
+        if (!reorderRef.current && !dragBlockedRef.current) {
           // in-flow の要素はここで初めて絶対配置へ変換する。
           // mousedown 時に変換すると、選んだだけで後続の兄弟が詰め上がって版面が動く。
           // コンポーネント編集中は変換しない(部品本来の並びを保つため)
@@ -941,6 +991,14 @@ export function useDragResize(
         }
       }
 
+      // ── 空振りモード ──
+      // 「並べ替えたいが相手がいない」ドラッグ。座標も DOM も書かない。
+      // hasMoved を立てないことが肝で、立てると mouseup が Tailwind 変換と
+      // SLIDE_CONTENT_CHANGED を走らせ、何も変えていないのに履歴が1段積まれる
+      if (dragBlockedRef.current) {
+        return true;
+      }
+
       dragState.hasMoved = true;
 
       // ── 並べ替えモード ──
@@ -1051,6 +1109,16 @@ export function useDragResize(
         return true;
       }
 
+      // 空振り中の取り消し: 座標も DOM も書いていないので戻すものが無い
+      if (dragBlockedRef.current) {
+        getDragTargets(dragState).forEach(({ element }) =>
+          element.classList.remove('dragging'),
+        );
+        resetDragState();
+        refreshSelectionOverlay(doc);
+        return true;
+      }
+
       if (autoLayoutDragStateRef.current) {
         // ゴースト並べ替え中：DOMの並びは変えずにゴーストだけ畳む
         cancelAutoLayoutDrag(autoLayoutDragStateRef.current, doc);
@@ -1222,6 +1290,18 @@ export function useDragResize(
         clearSmartGuides(iframeDoc);
         setOverlayLabel(null);
 
+        // ── 空振りの後始末 ──
+        // 何も書いていないので履歴も送らない。掴んだ見た目だけ戻す
+        if (dragBlockedRef.current) {
+          getDragTargets(dragState).forEach(({ element }) =>
+            element.classList.remove('dragging'),
+          );
+          refreshSelectionOverlay(iframeDoc);
+          sendElementInfo(dragState.element, iframeDoc);
+          resetDragState();
+          return true;
+        }
+
         // ── 並べ替えの確定 ──
         // 座標(left/top)は書いていないので Tailwind への変換は通さない。
         // 変わったのは DOM の順番だけで、それは innerHTML にそのまま出る

package/src/editor/hooks/useDrawingMode.ts

@@ -6,7 +6,7 @@
 
 import { useEffect } from 'react';
 import { useEditorContext } from '../EditorContext';
-import { generateElementId } from '../utils/dom-utils';
+import { generateElementId, lockCaretScroll } from '../utils/dom-utils';
 import { inkStyle } from '../utils/ink-style';
 import { pendingShape, shapeStyles as shapeLibStyles } from '../utils/shape-library';
 
@@ -205,7 +205,9 @@ export function useDrawingMode() {
           artboard.appendChild(textEl);
         }
 
-        textEl.focus();
+        // 置いた場所は見えているので、フォーカスやキャレット追従で紙面を動かさない
+        lockCaretScroll(textEl, iframeDoc);
+        textEl.focus({ preventScroll: true });
         textEl.classList.add('selected', 'editing');
 
         const range = iframeDoc.createRange();

package/src/editor/hooks/useElementActions.ts

@@ -15,6 +15,11 @@ import {
   hasEditableChildren,
   prepareElementDragOrigin,
 } from '../utils/dom-utils';
+import {
+  resolveWebpageDrag,
+  realChildren,
+  applyReorder,
+} from '../utils/flex-reorder';
 import { extractElementInfo } from '../utils/style-utils';
 import { applyTailwindStyles, convertInlineStylesToTailwind } from '../utils/tailwind-utils';
 import { copyElementsToFigma, isFigmaExportAvailable } from '../utils/figma-export';
@@ -152,6 +157,42 @@ export interface MoveElementResult {
   blocked: null | 'no-selection' | 'flow';
 }
 
+/**
+ * webpage モードの矢印キー = 「並べ替えを1段動かす」
+ *
+ * webpage はフロー内の要素を絶対配置へ倒さない(README の設計原則)。
+ * 倒すと版面が固定pxに固まり、後続の要素が詰め上がってページ高さが変わる。
+ * そこで矢印キーは座標ではなく **並び順** を1つ動かす。
+ * ↑/← = ひとつ前へ / ↓/→ = ひとつ後ろへ(Shift 付きでも1段。並びに10段の意味は無い)。
+ *
+ * @returns null なら「並べ替えの対象ではない」= 呼び出し側の座標移動へ落とす
+ */
+function reorderSelectionByStep(
+  elements: HTMLElement[],
+  step: -1 | 1,
+  iframeDoc: Document,
+): MoveElementResult | null {
+  const decision = resolveWebpageDrag(elements, iframeDoc);
+  // すでに絶対配置(Cmd+ドラッグで自由配置にした要素など)は従来どおり座標で動かす
+  if (decision.kind === 'free') return null;
+  // 相手がいない / 群がバラバラ。ドラッグと同じ理由で何もしない
+  if (decision.kind !== 'reorder') return { moved: 0, blocked: 'flow' };
+
+  const { elements: block, parent } = decision.plan;
+  const children = realChildren(parent);
+  const moving = new Set(block);
+  const siblings = children.filter((c) => !moving.has(c));
+  const originalIndex = children.indexOf(block[0]);
+  if (originalIndex < 0) return { moved: 0, blocked: 'flow' };
+
+  const next = originalIndex + step;
+  // 端に着いている。黙って止まるのが正しい(案内は出さない)
+  if (next < 0 || next > siblings.length) return { moved: 0, blocked: null };
+
+  const changed = applyReorder(parent, block, siblings, originalIndex, next);
+  return { moved: changed ? block.length : 0, blocked: null };
+}
+
 /**
  * 最後に使用したスタイルをキャプチャ
  */
@@ -1326,6 +1367,24 @@ export function useElementActions() {
       .filter((el): el is HTMLElement => el !== null);
     if (elements.length === 0) return { moved: 0, blocked: 'no-selection' };
 
+    // webpage はフロー内の要素を倒さない。矢印キーは並べ替えを1段動かす
+    if (editorMode === 'webpage') {
+      const step: -1 | 1 = dx < 0 || dy < 0 ? -1 : 1;
+      const reordered = reorderSelectionByStep(elements, step, iframeDoc);
+      if (reordered) {
+        if (reordered.moved > 0) {
+          notifyIframeChange();
+          refreshSelectionOverlay(iframeDoc);
+          const anchor = selectedElement
+            ? getIframeElement(iframeDoc, selectedElement.id) ?? elements[0]
+            : elements[0];
+          const info = extractElementInfo(anchor, iframeDoc);
+          if (info) setSelectedElement(info);
+        }
+        return reordered;
+      }
+    }
+
     // [モード廃止] フロー内の要素は「動かせない」で終わらせず、その要素だけを
     // 絶対配置へ変換してから動かす(ドラッグと同じ遅延変換)。
     // 以前はここで弾いていたため、矢印キーが無反応になっていた。
@@ -1350,7 +1409,7 @@ export function useElementActions() {
     if (info) setSelectedElement(info);
 
     return { moved: elements.length, blocked: null };
-  }, [selectedElement, selectedElementIds, getIframeDoc, notifyIframeChange, setSelectedElement]);
+  }, [selectedElement, selectedElementIds, getIframeDoc, notifyIframeChange, setSelectedElement, editorMode]);
 
   /**
    * 選択中の全要素の寸法を変える(キーボードリサイズ用)。

package/src/editor/hooks/useElementSelection.ts

@@ -19,6 +19,7 @@ import {
   getArtboardScale,
   refreshSelectionOverlay,
   syncSelectionOverlayRects,
+  lockCaretScroll,
 } from "../utils/dom-utils";
 import { extractElementInfo } from "../utils/style-utils";
 import { MARQUEE_DRAG_THRESHOLD } from "../constants";
@@ -1093,11 +1094,14 @@ export function useElementSelection(
         const rawTarget = e.target as HTMLElement;
         const existingIds = selectedElementIdsRef.current;
 
-        // selection-boxをクリックした場合、対象要素のドラッグを開始
+        // selection-boxをクリックした場合、対象要素のドラッグを開始。
+        // Cmd/Ctrl(最下層を選ぶ)と Shift(追加/解除)は下の判別器に任せる。
+        // 以前は Cmd でもここで掴んでいたため、選択中の器の上で Cmd+クリックしても
+        // 中の要素を選べなかった(Figmaでは選べる)
         const selectionBox = rawTarget.closest(
           ".selection-box",
         ) as HTMLElement | null;
-        if (selectionBox && !e.shiftKey) {
+        if (selectionBox && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
           const forElementId = selectionBox.getAttribute("data-for-element");
           if (forElementId) {
             const targetEl = iframeDoc.querySelector(
@@ -1158,15 +1162,30 @@ export function useElementSelection(
         // ============================================================
 
         // ---- ① ヒットテスト ----
-        const hit = getEditableElement(e.target, iframeDoc);
+        // 選択枠(オーバーレイ)の上で押した場合、e.target は枠なので紙面の要素が分からない。
+        // 枠の下にある要素を elementsFromPoint で拾い、それを押した点として扱う
+        // (Cmd+クリックの最下層選択、Shift+クリックの追加/解除がここを通る)
+        let hitSource: Element | null = rawTarget;
+        if (selectionBox && typeof iframeDoc.elementsFromPoint === "function") {
+          hitSource =
+            iframeDoc
+              .elementsFromPoint(e.clientX, e.clientY)
+              .find(
+                (el) =>
+                  !el.closest(
+                    ".selection-box,.marquee-selection-box,[data-editor-overlay],#gg-smart-guides,#gg-measure-layer",
+                  ),
+              ) ?? null;
+        }
+        const hit = getEditableElement(hitSource, iframeDoc);
         // 空白＝押した点の祖先に編集可能要素がまったく無い状態。
         // #artboard / 紙面と同じ大きさの器 / #artboard-wrapper / #canvas-container は
         // initializeEditableElements が意図的に data-editable を付けないので
         // ここで自然に「空白」と判定される（IDの白リストは不要）。
         const isBlank =
           !hit &&
-          !(typeof rawTarget?.closest === "function"
-            ? rawTarget.closest('[data-editable="true"]')
+          !(hitSource && typeof hitSource.closest === "function"
+            ? hitSource.closest('[data-editable="true"]')
             : null);
 
         // ---- ② 役割決定 ----
@@ -1211,7 +1230,10 @@ export function useElementSelection(
         // 押した点を含む「選択済み要素」。あればそれを掴んだものとして扱う。
         // （コンテキスト解決で祖先へ引き上げると、掴んだ要素と選択済み要素が
         //   食い違って群が壊れる）
-        const selectedHit = findSelectedHit(rawTarget, iframeDoc);
+        const selectedHit = findSelectedHit(
+          (hitSource as HTMLElement | null) ?? rawTarget,
+          iframeDoc,
+        );
 
         let target: HTMLElement;
         if (meta) {
@@ -1370,8 +1392,13 @@ export function useElementSelection(
           .querySelectorAll(".selection-box")
           .forEach((box) => box.remove());
 
-        // フォーカスを設定
-        element.focus();
+        // 紙面が飛ぶのを防ぐ(キャレット追従のスクロールを打ち消す)。
+        // 祖先のスクロール位置は focus の前に覚える必要があるので、フォーカスより先に張る
+        lockCaretScroll(element, iframeDoc);
+
+        // preventScroll: ダブルクリックした場所は既に見えているので、フォーカスでの
+        // スクロールは要らない(あると編集に入った瞬間に紙面が動く)
+        element.focus({ preventScroll: true });
 
         // テキスト全体を選択（オプション）
         const selection = iframeDoc.getSelection();

package/src/editor/hooks/useIframeSetup.ts

@@ -10,6 +10,7 @@ import { useCallback, useRef, useEffect } from 'react';
 import { useEditorContext } from '../EditorContext';
 import { buildDomTree, isInlineElement } from '../utils/dom-utils';
 import { EDITOR_IFRAME_STYLES } from '../constants';
+import { isLockedInsidePart } from '../parts';
 
 interface UseIframeSetupReturn {
   /**
@@ -111,6 +112,15 @@ export function useIframeSetup(): UseIframeSetupReturn {
       // selection-boxの子孫要素をすべてスキップ（念のため）
       if (element.closest('.selection-box')) return;
 
+      // 部品のインスタンス(data-part)の中で、スロット(data-slot)の外にある要素は編集対象にしない。
+      // ルート自身とスロットの中は通常どおり(src/editor/parts.ts)。
+      // 保存 HTML には data-editable が残らないので、古い保存物には効かない = 既存の挙動は変わらない
+      if (isLockedInsidePart(element)) {
+        element.removeAttribute('data-editable');
+        element.removeAttribute('data-element-id');
+        return;
+      }
+
       // 既にIDがある場合はスキップ
       if (!element.getAttribute('data-element-id')) {
         const elementId = `el-${Date.now()}-${elementIndex++}`;

package/src/editor/hooks/useKeyboardShortcuts.ts

@@ -16,7 +16,7 @@
  */
 
 import { useCallback } from 'react';
-import { refreshSelectionOverlay } from '../utils/dom-utils';
+import { refreshSelectionOverlay, getArtboardContent } from '../utils/dom-utils';
 
 interface UseKeyboardShortcutsOptions {
   /** グループ化関数 */
@@ -186,6 +186,17 @@ export function exitTextEditingIn(iframeDoc: Document): boolean {
 
   // 選択ボックスを再表示（1要素ずつ作り直すと他の枠を巻き込んで壊すため全体を再構築）
   refreshSelectionOverlay(iframeDoc);
+
+  // [確定を履歴に積む]
+  // フォーカスが外れて確定する経路(EditorCanvas の focusout)は、contenteditable が
+  // まだ付いている要素からのイベントでだけ内容変更を通知する。ここは先に属性を
+  // 外すので focusout 経路が黙り、Escape で確定した編集が履歴にも自動保存にも
+  // 乗らなかった(Cmd+Z で戻らない・保存されないまま閉じられる)。
+  // 同じ内容なら履歴側で重複扱いになるので、変わっていなくても送ってよい
+  window.postMessage(
+    { type: 'SLIDE_CONTENT_CHANGED', html: getArtboardContent(iframeDoc) },
+    '*',
+  );
   return true;
 }
 

package/src/editor/hooks/useMediaLibrary.ts

@@ -9,6 +9,7 @@
  * 同時オープン時のリクエスト重複も in-flight promise で防ぐ。
  */
 
+import { io, notProvided } from '../../io';
 import { useCallback, useEffect, useState } from 'react';
 
 export interface MediaItem {
@@ -48,11 +49,9 @@ function normalizeItem(raw: unknown): MediaItem | null {
 }
 
 async function fetchMediaItems(): Promise<MediaItem[]> {
-  const res = await fetch('/__media');
-  if (!res.ok) {
-    throw new Error(`メディア一覧の取得に失敗しました (HTTP ${res.status})`);
-  }
-  const data = (await res.json()) as MediaResponse;
+  const fetchCatalog = io().apiFetch;
+  if (!fetchCatalog) throw notProvided('apiFetch');
+  const data = await fetchCatalog('/__media') as MediaResponse;
   const items = Array.isArray(data.items) ? data.items : [];
   return items.map(normalizeItem).filter((i): i is MediaItem => i !== null);
 }