@growgroup/visual-editor 0.1.6 → 0.2.0

package/src/editor/contexts/EditorComponentsContext.tsx

@@ -43,6 +43,76 @@ import {
   deleteComponentInstance,
   getPageComponentInstances,
 } from '../../lib/firebase/editor-components';
+import { io } from '../../io';
+import type { EditorPartDef, EditorPartsLibrary } from '../../io';
+import {
+  materializePart,
+  partDefFromElement,
+  partInfoOf,
+  stampAsInstance,
+  stripEditorAttrs,
+  toPartId,
+} from '../parts';
+
+// ============================================================
+// Parts (HTML template) helpers
+// ============================================================
+
+/** 分類の無い部品が入る既定のカテゴリ */
+const DEFAULT_PART_CATEGORY = 'parts';
+
+/**
+ * 部品の定義(HTML)を、既存のパネル・ドラッグ経路が読める MasterComponent に写す。
+ * id は部品 id をそのまま使う(ドロップ時の componentId がそのまま部品 id になる)。
+ */
+function masterFromPartDef(part: EditorPartDef, parser: DOMParser, websiteId: string): MasterComponent | null {
+  const doc = parser.parseFromString(`<!doctype html><body>${part.html}</body>`, 'text/html');
+  const root = doc.body.firstElementChild as HTMLElement | null;
+  if (!root) return null;
+  const rootElement = htmlElementToComponentElement(root);
+  const now = new Date().toISOString();
+  const variant: ComponentVariant = { id: 'default', name: 'Default', rootElement, isDefault: true };
+  return {
+    id: part.id,
+    name: part.name || part.id,
+    description: part.description,
+    categoryId: part.category || DEFAULT_PART_CATEGORY,
+    tags: [],
+    variants: [variant],
+    defaultVariantId: 'default',
+    exposedProperties: [],
+    createdAt: now,
+    updatedAt: now,
+    websiteId,
+    version: part.version,
+  };
+}
+
+/** 部品の分類をパネルのカテゴリにする。宣言された順 → 宣言に無い分類の順 */
+function categoriesFromParts(
+  lib: EditorPartsLibrary,
+  masters: Map<string, MasterComponent>,
+): ComponentLibraryCategory[] {
+  const ids = new Map<string, string[]>();
+  for (const m of masters.values()) {
+    if (!ids.has(m.categoryId)) ids.set(m.categoryId, []);
+    ids.get(m.categoryId)!.push(m.id);
+  }
+  const cats: ComponentLibraryCategory[] = (lib.categories ?? []).map((c, i) => ({
+    id: c.id,
+    name: c.name,
+    description: c.description,
+    componentIds: ids.get(c.id) ?? [],
+    order: i + 1,
+  }));
+  const known = new Set(cats.map((c) => c.id));
+  let order = cats.length;
+  for (const [id, componentIds] of ids) {
+    if (known.has(id)) continue;
+    cats.push({ id, name: id === DEFAULT_PART_CATEGORY ? '部品' : id, componentIds, order: ++order });
+  }
+  return cats;
+}
 
 // ============================================================
 // Context Creation
@@ -424,6 +494,10 @@ export function EditorComponentsProvider({
   const [error, setError] = useState<string | null>(null);
   const [pendingNavigationTarget, setPendingNavigationTarget] = useState<string | null>(null);
 
+  // 部品(HTML template)モード。io.loadParts が渡されていれば、JSON コンポーネントではなく部品を使う
+  const partsMode = typeof io().loadParts === 'function';
+  const [partDefs, setPartDefs] = useState<Map<string, EditorPartDef>>(new Map());
+
   // ============================================================
   // Navigation
   // ============================================================
@@ -508,6 +582,30 @@ export function EditorComponentsProvider({
         `[EditorComponentsContext] Loading components for website: ${targetWebsiteId}`
       );
 
+      // 部品モード: 利用側の loadParts から HTML の定義を読む(localStorage は見ない)
+      const loadParts = io().loadParts;
+      if (loadParts) {
+        const lib = await loadParts();
+        const parser = new DOMParser();
+        const defs = new Map<string, EditorPartDef>();
+        const componentsMap = new Map<string, MasterComponent>();
+        for (const part of lib.parts) {
+          const master = masterFromPartDef(part, parser, targetWebsiteId);
+          if (!master) {
+            console.warn(`[EditorComponentsContext] 部品 ${part.id} の HTML にルート要素がありません`);
+            continue;
+          }
+          defs.set(part.id, part);
+          componentsMap.set(master.id, master);
+        }
+        setPartDefs(defs);
+        setMasterComponents(componentsMap);
+        setComponentLibrary(categoriesFromParts(lib, componentsMap));
+        setComponentInstances(new Map());
+        console.log(`[EditorComponentsContext] Loaded ${defs.size} parts`);
+        return;
+      }
+
       // Load master components from Firestore
       const components = await getAllMasterComponents(targetWebsiteId);
       console.log(`[EditorComponentsContext] Loaded ${components.length} components`);
@@ -550,22 +648,25 @@ export function EditorComponentsProvider({
   // Initialize on mount or when websiteId changes
   const loadedWebsiteIdRef = useRef<string | null>(null);
   useEffect(() => {
+    // 部品モードは websiteId が無くても読む(部品の置き場は利用側が知っている)
+    const key = websiteId || (partsMode ? '__parts__' : '');
     // Only load if websiteId exists and is different from the last loaded one
-    if (websiteId && websiteId !== loadedWebsiteIdRef.current) {
-      loadedWebsiteIdRef.current = websiteId;
-      loadComponents(websiteId);
-    } else if (!websiteId) {
+    if (key && key !== loadedWebsiteIdRef.current) {
+      loadedWebsiteIdRef.current = key;
+      loadComponents(key);
+    } else if (!key) {
       // Reset to default categories if no websiteId
       setComponentLibrary(defaultCategories);
       setMasterComponents(new Map());
       loadedWebsiteIdRef.current = null;
     }
-  }, [websiteId, loadComponents, defaultCategories]);
+  }, [websiteId, partsMode, loadComponents, defaultCategories]);
 
   // Load instances when pageId changes
   const loadedPageIdRef = useRef<string | null>(null);
   useEffect(() => {
-    if (!websiteId || !pageId) {
+    // 部品モードではインスタンスを別に持たない(ページの HTML そのものがインスタンス)
+    if (partsMode || !websiteId || !pageId) {
       setComponentInstances(new Map());
       loadedPageIdRef.current = null;
       return;
@@ -597,7 +698,7 @@ export function EditorComponentsProvider({
     };
 
     loadInstances();
-  }, [websiteId, pageId]);
+  }, [websiteId, pageId, partsMode]);
 
   // ============================================================
   // Master Component Operations
@@ -650,7 +751,7 @@ export function EditorComponentsProvider({
       );
 
       // Save to Firestore asynchronously
-      if (websiteId) {
+      if (websiteId && !partsMode) {
         saveToFirestore(websiteId, masterComponent).catch((err) => {
           console.error('[EditorComponentsContext] Failed to save component to Firestore:', err);
           setError('Failed to save component');
@@ -662,7 +763,116 @@ export function EditorComponentsProvider({
       );
       return masterComponent;
     },
-    [websiteId]
+    [websiteId, partsMode]
+  );
+
+  // ============================================================
+  // Parts (HTML template) Operations
+  // ============================================================
+
+  const getPartDef = useCallback(
+    (id: string): EditorPartDef | null => partDefs.get(id) ?? null,
+    [partDefs]
+  );
+
+  const materializePartInstance = useCallback(
+    (id: string, doc: Document): HTMLElement | null => {
+      const def = partDefs.get(id);
+      return def ? materializePart(def, doc) : null;
+    },
+    [partDefs]
+  );
+
+  /** 定義を状態に入れる(新規・更新の両方)。パネルの分類も揃える */
+  const upsertPartDef = useCallback((def: EditorPartDef) => {
+    const master = masterFromPartDef(def, new DOMParser(), websiteId || '');
+    if (!master) return;
+    setPartDefs((prev) => {
+      const next = new Map(prev);
+      next.set(def.id, def);
+      return next;
+    });
+    setMasterComponents((prev) => {
+      const next = new Map(prev);
+      next.set(master.id, master);
+      return next;
+    });
+    setComponentLibrary((prev) => {
+      const categoryId = master.categoryId;
+      const cleared = prev.map((cat) => ({
+        ...cat,
+        componentIds: cat.componentIds.filter((cid) => cid !== master.id),
+      }));
+      const found = cleared.find((cat) => cat.id === categoryId);
+      if (found) {
+        return cleared.map((cat) =>
+          cat.id === categoryId ? { ...cat, componentIds: [...cat.componentIds, master.id] } : cat
+        );
+      }
+      return [
+        ...cleared,
+        {
+          id: categoryId,
+          name: categoryId === DEFAULT_PART_CATEGORY ? '部品' : categoryId,
+          componentIds: [master.id],
+          order: cleared.length + 1,
+        },
+      ];
+    });
+  }, [websiteId]);
+
+  const savePartFromElement = useCallback(
+    async (
+      el: HTMLElement,
+      meta: { name: string; category?: string; description?: string }
+    ): Promise<EditorPartDef> => {
+      const save = io().savePart;
+      let id = toPartId(meta.name);
+      // 同名の部品があれば番号を足す(既存の定義を黙って上書きしない)
+      if (partDefs.has(id)) {
+        let n = 2;
+        while (partDefs.has(`${id}-${n}`)) n++;
+        id = `${id}-${n}`;
+      }
+      const def = partDefFromElement(
+        el,
+        {
+          id,
+          name: meta.name,
+          category: meta.category || DEFAULT_PART_CATEGORY,
+          description: meta.description,
+          version: 1,
+        },
+        { inferSlots: true },
+      );
+      const saved = (save ? await save(def) : undefined) ?? def;
+      upsertPartDef(saved);
+      stampAsInstance(el, saved, el.ownerDocument);
+      return saved;
+    },
+    [partDefs, upsertPartDef]
+  );
+
+  const updatePartFromElement = useCallback(
+    async (el: HTMLElement): Promise<EditorPartDef | null> => {
+      const info = partInfoOf(el);
+      if (!info) return null;
+      const current = partDefs.get(info.id);
+      if (!current) return null;
+      const next = partDefFromElement(el, {
+        id: current.id,
+        name: current.name,
+        category: current.category,
+        description: current.description,
+        version: current.version + 1,
+      });
+      const save = io().savePart;
+      const saved = (save ? await save(next) : undefined) ?? next;
+      upsertPartDef(saved);
+      el.setAttribute('data-part-v', String(saved.version));
+      return saved;
+    },
+    [partDefs, upsertPartDef]
   );
 
   const updateMasterComponent = useCallback(
@@ -687,7 +897,7 @@ export function EditorComponentsProvider({
         next.set(id, updatedComponent);
 
         // Save to Firestore asynchronously
-        if (websiteId) {
+        if (websiteId && !partsMode) {
           updateMasterComponentInFirestore(websiteId, id, updates).catch((err) => {
             console.error('[EditorComponentsContext] Failed to update component in Firestore:', err);
             setError('Failed to save component changes');
@@ -696,8 +906,38 @@ export function EditorComponentsProvider({
 
         return next;
       });
+
+      // 部品モード: 名前・説明・分類・(エディタで直した)構造を定義に写して利用側へ保存する
+      if (partsMode) {
+        const current = partDefs.get(id);
+        if (current) {
+          let html = current.html;
+          const rootElement = updates.variants?.[0]?.rootElement;
+          if (rootElement) {
+            const rendered = componentElementToHtml(rootElement, document);
+            stripEditorAttrs(rendered);
+            html = rendered.outerHTML;
+          }
+          const next: EditorPartDef = {
+            ...current,
+            name: updates.name ?? current.name,
+            description: updates.description ?? current.description,
+            category: updates.categoryId ?? current.category,
+            html,
+          };
+          setPartDefs((prev) => {
+            const m = new Map(prev);
+            m.set(id, next);
+            return m;
+          });
+          io().savePart?.(next).catch((err) => {
+            console.error('[EditorComponentsContext] 部品の保存に失敗:', err);
+            setError('部品の保存に失敗しました');
+          });
+        }
+      }
     },
-    [websiteId]
+    [websiteId, partsMode, partDefs]
   );
 
   const deleteMasterComponent = useCallback((id: string) => {
@@ -727,14 +967,24 @@ export function EditorComponentsProvider({
     });
 
     // Delete from Firestore asynchronously
-    if (websiteId) {
+    if (websiteId && !partsMode) {
       deleteFromFirestore(websiteId, id).catch((err) => {
         console.error('[EditorComponentsContext] Failed to delete component from Firestore:', err);
       });
     }
+    if (partsMode) {
+      setPartDefs((prev) => {
+        const next = new Map(prev);
+        next.delete(id);
+        return next;
+      });
+      io().deletePart?.(id).catch((err) => {
+        console.error('[EditorComponentsContext] 部品の削除に失敗:', err);
+      });
+    }
 
     console.log(`[EditorComponentsContext] Deleted master component: ${id}`);
-  }, [websiteId]);
+  }, [websiteId, partsMode]);
 
   const getMasterComponent = useCallback(
     (id: string): MasterComponent | null => {
@@ -798,8 +1048,8 @@ export function EditorComponentsProvider({
         return next;
       });
 
-      // Save to Firestore asynchronously
-      if (websiteId && effectivePageId) {
+      // Save to Firestore asynchronously(部品モードではインスタンスを別に持たない)
+      if (websiteId && effectivePageId && !partsMode) {
         saveComponentInstance(websiteId, effectivePageId, instance).catch((err) => {
           console.error('[EditorComponentsContext] Failed to save instance to Firestore:', err);
           setError('Failed to save component instance');
@@ -811,7 +1061,7 @@ export function EditorComponentsProvider({
       );
       return instance;
     },
-    [masterComponents, websiteId, pageId]
+    [masterComponents, websiteId, pageId, partsMode]
   );
 
   const updateInstance = useCallback(
@@ -1280,6 +1530,13 @@ export function EditorComponentsProvider({
       resolveInstance,
       navigateToMasterComponent,
       clearNavigationRequest,
+
+      // Parts
+      partsMode,
+      getPartDef,
+      materializePartInstance,
+      savePartFromElement,
+      updatePartFromElement,
     }),
     [
       masterComponents,
@@ -1307,6 +1564,11 @@ export function EditorComponentsProvider({
       resolveInstance,
       navigateToMasterComponent,
       clearNavigationRequest,
+      partsMode,
+      getPartDef,
+      materializePartInstance,
+      savePartFromElement,
+      updatePartFromElement,
     ]
   );
 

package/src/editor/editor-skin.css

@@ -1,122 +1,2 @@
-/**
- * [移植時の追加] エディタの配色スキン。配色の正本はこの1ファイル。
- *
- * 移植元のエディタはVS Code風のグレーが47ファイルに直書きされている。
- * 全ファイルを書き換えるとマージが破綻するので、エディタのルートに `.gg-editor-skin` を付け、
- * その配下でだけ元のクラスが指す色を差し替える。
- *
- * 意匠はFigmaデスクトップ(ダーク)の実測値:
- *   キャンバス=#1e1e1e / パネル=#2c2c2c / 入力=#383838 / 罫線=white 10% / アクセント=#0d99ff
- */
-
-.gg-editor-skin {
-  --ed-bg: #1e1e1e; /* キャンバスの地(Figmaのカンバス) */
-  --ed-panel: #2c2c2c; /* パネル・ツールバーの面 */
-  --ed-panel-raised: #2c2c2c; /* Figmaはパネルとカードが同面 */
-  --ed-surface: #383838; /* 入力・ボタンの面 */
-  --ed-surface-hover: #444444;
-  --ed-line: rgba(255, 255, 255, 0.1);
-  --ed-line-strong: rgba(255, 255, 255, 0.16);
-  --ed-accent: #0d99ff; /* Figmaブルー */
-  --ed-accent-strong: #0d99ff;
-  --ed-accent-hover: #0c8ce9;
-}
-
-/* ── 地・面 ───────────────────────────────────────── */
-.gg-editor-skin .bg-\[\#1e1e1e\] {
-  background-color: var(--ed-bg);
-}
-.gg-editor-skin .bg-\[\#2c2c2c\],
-.gg-editor-skin .bg-\[\#2a2a2a\] {
-  background-color: var(--ed-panel);
-}
-.gg-editor-skin .bg-\[\#383838\] {
-  background-color: var(--ed-surface);
-}
-.gg-editor-skin .bg-\[\#444444\],
-.gg-editor-skin .bg-\[\#4a4a4a\],
-.gg-editor-skin .bg-\[\#5d5d5d\] {
-  background-color: var(--ed-surface-hover);
-}
-.gg-editor-skin .hover\:bg-\[\#444444\]:hover,
-.gg-editor-skin .hover\:bg-\[\#383838\]:hover {
-  background-color: rgba(255, 255, 255, 0.08);
-}
-.gg-editor-skin .hover\:bg-\[\#4a4a4a\]:hover {
-  background-color: var(--ed-surface-hover);
-}
-
-/* ── 罫線 ─────────────────────────────────────────── */
-.gg-editor-skin .border-\[\#444444\],
-.gg-editor-skin .border-\[\#383838\],
-.gg-editor-skin .border-\[\#2c2c2c\] {
-  border-color: var(--ed-line);
-}
-.gg-editor-skin .border-\[\#4a4a4a\],
-.gg-editor-skin .border-\[\#5d5d5d\] {
-  border-color: var(--ed-line-strong);
-}
-.gg-editor-skin .hover\:border-\[\#4a4a4a\]:hover,
-.gg-editor-skin .hover\:border-\[\#5d5d5d\]:hover {
-  border-color: rgba(13, 153, 255, 0.6);
-}
-/* 区切り線として使われている塗り */
-.gg-editor-skin .w-px.bg-\[\#444444\],
-.gg-editor-skin .h-px.bg-\[\#444444\] {
-  background-color: var(--ed-line);
-}
-
-/* ── アクセント(選択・保存・共有ボタン等) ─────────── */
-.gg-editor-skin .bg-\[\#0d99ff\],
-.gg-editor-skin .bg-blue-500,
-.gg-editor-skin .bg-blue-600 {
-  background-color: var(--ed-accent-strong);
-}
-.gg-editor-skin .hover\:bg-\[\#0c8ce9\]:hover,
-.gg-editor-skin .hover\:bg-blue-600:hover,
-.gg-editor-skin .hover\:bg-blue-700:hover {
-  background-color: var(--ed-accent-hover);
-}
-.gg-editor-skin .text-\[\#0d99ff\],
-.gg-editor-skin .text-\[\#4fb8ff\],
-.gg-editor-skin .text-blue-400,
-.gg-editor-skin .text-blue-500 {
-  color: var(--ed-accent);
-}
-.gg-editor-skin .border-\[\#0d99ff\],
-.gg-editor-skin .border-blue-500 {
-  border-color: var(--ed-accent);
-}
-.gg-editor-skin .ring-\[\#0d99ff\],
-.gg-editor-skin .ring-blue-500 {
-  --tw-ring-color: var(--ed-accent);
-}
-
-/* ── 文字色(Figmaの白/70%/45%) ────────────────────── */
-.gg-editor-skin .text-gray-300 {
-  color: rgba(255, 255, 255, 0.85);
-}
-.gg-editor-skin .text-gray-400 {
-  color: rgba(255, 255, 255, 0.7);
-}
-.gg-editor-skin .text-gray-500 {
-  color: rgba(255, 255, 255, 0.45);
-}
-
-/* ── 角丸・影(Figmaのメニュー影) ─────────────────── */
-.gg-editor-skin .rounded {
-  border-radius: 0.375rem;
-}
-.gg-editor-skin .shadow-lg,
-.gg-editor-skin .shadow-xl,
-.gg-editor-skin .shadow-2xl {
-  box-shadow: 0 5px 17px rgba(0, 0, 0, 0.35), 0 2px 7px rgba(0, 0, 0, 0.15);
-}
-
-/* ── フォーカスリング(Figmaブルー) ────────────────── */
-.gg-editor-skin input:focus-visible,
-.gg-editor-skin button:focus-visible,
-.gg-editor-skin select:focus-visible {
-  outline: 2px solid var(--ed-accent);
-  outline-offset: 1px;
-}
+/* 配色の正本は src/styles/skin.css。dist/editor.css にビルドして同梱する。 */
+@import "../styles/skin.css";

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,
   };
 }