@growgroup/visual-editor 0.1.0

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -0,0 +1,498 @@
+'use client';
+
+/**
+ * MultiPageCanvasContext
+ *
+ * マルチページ無限キャンバスの状態管理Context
+ * 全ページを常にキャンバス上に表示し、クリックで即座にページ切替
+ * Figmaライクな統合ビュー（モード切替なし）
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+  useEffect,
+} from 'react';
+import { useEditorArtboard } from './EditorArtboardContext';
+import { useEditorHistory } from './EditorHistoryContext';
+import { useEditorRefs } from './EditorRefsContext';
+import { generateEditableHtml } from '../utils/html-utils';
+
+// ============================================================
+// 定数
+// ============================================================
+
+/** ウェブページの標準幅 (px) */
+export const WEBPAGE_WIDTH = 1440;
+/** ウェブページの最小高さ (px) */
+export const WEBPAGE_MIN_HEIGHT = 900;
+/** ページ間の水平間隔 (px) */
+const LAYOUT_GAP_X = 100;
+/** ズーム範囲 */
+const MIN_ZOOM = 0.02;
+const MAX_ZOOM = 2.0;
+
+// ============================================================
+// 型定義
+// ============================================================
+
+export interface PageFrame {
+  id: string;
+  title: string;
+  position: { x: number; y: number };
+  size: { width: number; height: number };
+  thumbnailHtml: string;
+  thumbnailDataUrl: string | null;
+  isDirty: boolean;
+  html: string;
+}
+
+export interface CanvasViewState {
+  canvasOffset: { x: number; y: number };
+  canvasZoom: number;
+  activePageId: string | null;
+}
+
+export interface MultiPageCanvasContextValue {
+  // ページフレーム管理
+  pages: PageFrame[];
+  getPage: (id: string) => PageFrame | undefined;
+  updatePageFrame: (id: string, updates: Partial<PageFrame>) => void;
+
+  // ビュー状態
+  viewState: CanvasViewState;
+  setCanvasOffset: (offset: { x: number; y: number }) => void;
+  setCanvasZoom: (zoom: number) => void;
+
+  // ページ切替（Figmaスタイル: モード切替なし）
+  switchPage: (id: string) => void;
+
+  // 軽量ページフォーカス（iframe再読込なし、activePageId + contentId更新のみ）
+  focusPage: (id: string) => void;
+
+  // ページ配置
+  autoLayoutPages: () => void;
+
+  // ズーム操作
+  zoomToFit: (containerWidth: number, containerHeight: number) => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
+
+  // サムネイル更新
+  updateThumbnail: (id: string, dataUrl: string) => void;
+
+  // 有効化フラグ
+  isEnabled: boolean;
+
+  // グローバルUndo/Redoハンドラー (MultiPageCanvasViewから登録される)
+  undo: () => void;
+  redo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  registerUndoHandlers: (handlers: { undo: () => void; redo: () => void; canUndo: () => boolean; canRedo: () => boolean }) => void;
+}
+
+// ============================================================
+// Context
+// ============================================================
+
+const MultiPageCanvasContext = createContext<MultiPageCanvasContextValue | null>(null);
+
+export function useMultiPageCanvas(): MultiPageCanvasContextValue {
+  const context = useContext(MultiPageCanvasContext);
+  if (!context) {
+    throw new Error('useMultiPageCanvas must be used within MultiPageCanvasProvider');
+  }
+  return context;
+}
+
+/**
+ * マルチページキャンバスが有効な場合のみ値を返す（オプショナル使用用）
+ */
+export function useMultiPageCanvasOptional(): MultiPageCanvasContextValue | null {
+  return useContext(MultiPageCanvasContext);
+}
+
+// ============================================================
+// レイアウト計算ユーティリティ
+// ============================================================
+
+function calculateAutoLayout(pages: PageFrame[]): PageFrame[] {
+  return pages.map((page, index) => ({
+    ...page,
+    position: {
+      x: index * (WEBPAGE_WIDTH + LAYOUT_GAP_X),
+      y: 0,
+    },
+    size: { width: WEBPAGE_WIDTH, height: page.size.height || WEBPAGE_MIN_HEIGHT },
+  }));
+}
+
+function calculateFitZoom(
+  pages: PageFrame[],
+  containerWidth: number,
+  containerHeight: number
+): { zoom: number; offset: { x: number; y: number } } {
+  if (pages.length === 0) return { zoom: 0.5, offset: { x: 0, y: 0 } };
+
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  pages.forEach(p => {
+    minX = Math.min(minX, p.position.x);
+    minY = Math.min(minY, p.position.y);
+    maxX = Math.max(maxX, p.position.x + p.size.width);
+    maxY = Math.max(maxY, p.position.y + p.size.height);
+  });
+
+  const totalWidth = maxX - minX;
+  const totalHeight = maxY - minY;
+  const padding = 80;
+
+  const scaleX = (containerWidth - padding * 2) / totalWidth;
+  const scaleY = (containerHeight - padding * 2) / totalHeight;
+  const zoom = Math.min(scaleX, scaleY, 1);
+
+  const offset = {
+    x: (containerWidth - totalWidth * zoom) / 2 - minX * zoom,
+    y: (containerHeight - totalHeight * zoom) / 2 - minY * zoom,
+  };
+
+  return { zoom: Math.max(zoom, MIN_ZOOM), offset };
+}
+
+// ============================================================
+// Provider
+// ============================================================
+
+interface MultiPageCanvasProviderProps {
+  children: React.ReactNode;
+  enabled: boolean;
+}
+
+export function MultiPageCanvasProvider({
+  children,
+  enabled,
+}: MultiPageCanvasProviderProps) {
+  const artboard = useEditorArtboard();
+  const history = useEditorHistory();
+  const refs = useEditorRefs();
+
+  // ページフレーム状態
+  const [pagesMap, setPagesMap] = useState<Map<string, PageFrame>>(new Map());
+  const [isLayoutInitialized, setIsLayoutInitialized] = useState(false);
+
+  // ビュー状態（モードなし — 常に統合ビュー）
+  const [viewState, setViewState] = useState<CanvasViewState>({
+    canvasOffset: { x: 0, y: 0 },
+    canvasZoom: 0.15,
+    activePageId: null,
+  });
+
+  // contentListからページフレームを同期
+  const prevContentListRef = useRef<string>('');
+  useEffect(() => {
+    if (!enabled) return;
+
+    const contentListKey = artboard.contentList.map(c => c.id).join(',');
+    if (contentListKey === prevContentListRef.current) return;
+    prevContentListRef.current = contentListKey;
+
+    setPagesMap(prev => {
+      const newMap = new Map<string, PageFrame>();
+      artboard.contentList.forEach(content => {
+        const existing = prev.get(content.id);
+        if (existing) {
+          newMap.set(content.id, {
+            ...existing,
+            title: content.title,
+            html: content.thumbnailHtml || existing.html,
+            thumbnailHtml: content.thumbnailHtml || existing.thumbnailHtml,
+          });
+        } else {
+          newMap.set(content.id, {
+            id: content.id,
+            title: content.title,
+            position: { x: 0, y: 0 },
+            size: { width: WEBPAGE_WIDTH, height: WEBPAGE_MIN_HEIGHT },
+            thumbnailHtml: content.thumbnailHtml || '',
+            thumbnailDataUrl: null,
+            isDirty: false,
+            html: content.thumbnailHtml || '',
+          });
+        }
+      });
+      return newMap;
+    });
+    setIsLayoutInitialized(false);
+  }, [enabled, artboard.contentList]);
+
+  // 初期レイアウト
+  useEffect(() => {
+    if (!enabled || isLayoutInitialized || pagesMap.size === 0) return;
+    setPagesMap(prev => {
+      const pages = Array.from(prev.values());
+      const laid = calculateAutoLayout(pages);
+      const newMap = new Map<string, PageFrame>();
+      laid.forEach(p => newMap.set(p.id, p));
+      return newMap;
+    });
+    setIsLayoutInitialized(true);
+  }, [enabled, isLayoutInitialized, pagesMap.size]);
+
+  // 初回: 最初のページを自動アクティブ化
+  useEffect(() => {
+    if (!enabled || viewState.activePageId) return;
+    if (artboard.contentList.length > 0) {
+      const firstId = artboard.contentList[0].id;
+      setViewState(prev => ({ ...prev, activePageId: firstId }));
+    }
+  }, [enabled, artboard.contentList, viewState.activePageId]);
+
+  // ページ配列（順序付き）
+  const pages = useMemo(() => {
+    const contentOrder = artboard.contentList.map(c => c.id);
+    return Array.from(pagesMap.values()).sort(
+      (a, b) => contentOrder.indexOf(a.id) - contentOrder.indexOf(b.id)
+    );
+  }, [pagesMap, artboard.contentList]);
+
+  // --- コールバック ---
+
+  const getPage = useCallback((id: string) => pagesMap.get(id), [pagesMap]);
+
+  const updatePageFrame = useCallback((id: string, updates: Partial<PageFrame>) => {
+    setPagesMap(prev => {
+      const existing = prev.get(id);
+      if (!existing) return prev;
+      const newMap = new Map(prev);
+      newMap.set(id, { ...existing, ...updates });
+      return newMap;
+    });
+  }, []);
+
+  const setCanvasOffset = useCallback((offset: { x: number; y: number }) => {
+    setViewState(prev => ({ ...prev, canvasOffset: offset }));
+  }, []);
+
+  const setCanvasZoom = useCallback((zoom: number) => {
+    setViewState(prev => ({
+      ...prev,
+      canvasZoom: Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom)),
+    }));
+  }, []);
+
+  // Stale closure回避用ref
+  const activePageIdRef = useRef<string | null>(null);
+  activePageIdRef.current = viewState.activePageId;
+  const pagesMapRef = useRef(pagesMap);
+  pagesMapRef.current = pagesMap;
+
+  /**
+   * ページ切替（Figmaスタイル）
+   * 1. 現在のページのHTMLをサムネイルに保存
+   * 2. 新しいページのキャッシュHTMLをiframeにロード
+   * 3. 履歴クリア
+   * 4. activePageId更新
+   * 5. API経由で最新HTML非同期取得
+   */
+  const switchPage = useCallback((id: string) => {
+    const currentPagesMap = pagesMapRef.current;
+    const page = currentPagesMap.get(id);
+    if (!page) {
+      console.warn('[MultiPageCanvas] switchPage: page not found:', id);
+      return;
+    }
+
+    const currentActiveId = activePageIdRef.current;
+    if (currentActiveId === id) return; // 同じページなら何もしない
+
+    // 1. 現在のページのHTMLをサムネイルに保存
+    if (currentActiveId) {
+      const currentEditHtml = history.html;
+      if (currentEditHtml) {
+        updatePageFrame(currentActiveId, { thumbnailHtml: currentEditHtml });
+      }
+    }
+
+    // 2. 新しいページのHTMLをセット
+    const newHtml = page.thumbnailHtml || '';
+    history.setHtml(newHtml);
+    history.clearHistory();
+
+    // 3. iframeを新しいHTMLでリロード
+    const iframe = refs.iframeRef.current;
+    if (iframe) {
+      refs.setIframeReady(false);
+      const blob = new Blob([generateEditableHtml(newHtml, 'webpage')], { type: 'text/html' });
+      iframe.src = URL.createObjectURL(blob);
+    }
+
+    // 4. activePageId更新
+    setViewState(prev => ({ ...prev, activePageId: id }));
+
+    // 5. API経由で最新HTMLを非同期取得
+    if (artboard.onContentChange && id !== artboard.currentContentId) {
+      artboard.onContentChange(id);
+    }
+
+    console.log('[MultiPageCanvas] switchPage:', currentActiveId, '→', id);
+  }, [history, refs, artboard, updatePageFrame]);
+
+  /**
+   * 軽量ページフォーカス（キャンバスモード専用）
+   * iframeを再読込せず、activePageIdとcontentIdのみ更新
+   * → レイヤーパネル・CSS/JS・ページ設定が正しいページに切り替わる
+   */
+  const focusPage = useCallback((id: string) => {
+    const currentActiveId = activePageIdRef.current;
+    if (currentActiveId === id) return;
+
+    // activePageId更新 → レイヤーパネルが正しいページを表示
+    setViewState(prev => ({ ...prev, activePageId: id }));
+
+    // contentId更新 → CSS/JS/ページ設定が正しいページから読み込まれる
+    if (artboard.onContentChange && id !== artboard.currentContentId) {
+      artboard.onContentChange(id);
+    }
+
+    console.log('[MultiPageCanvas] focusPage:', currentActiveId, '→', id);
+  }, [artboard]);
+
+  const autoLayoutPages = useCallback(() => {
+    setPagesMap(prev => {
+      const pageArray = Array.from(prev.values());
+      const laid = calculateAutoLayout(pageArray);
+      const newMap = new Map<string, PageFrame>();
+      laid.forEach(p => newMap.set(p.id, p));
+      return newMap;
+    });
+  }, []);
+
+  const zoomToFit = useCallback((containerWidth: number, containerHeight: number) => {
+    const pageArray = Array.from(pagesMap.values());
+    const { zoom, offset } = calculateFitZoom(pageArray, containerWidth, containerHeight);
+    setViewState(prev => ({
+      ...prev,
+      canvasZoom: zoom,
+      canvasOffset: offset,
+    }));
+  }, [pagesMap]);
+
+  const zoomIn = useCallback(() => {
+    setViewState(prev => ({
+      ...prev,
+      canvasZoom: Math.min(MAX_ZOOM, prev.canvasZoom * 1.25),
+    }));
+  }, []);
+
+  const zoomOut = useCallback(() => {
+    setViewState(prev => ({
+      ...prev,
+      canvasZoom: Math.max(MIN_ZOOM, prev.canvasZoom * 0.8),
+    }));
+  }, []);
+
+  const updateThumbnail = useCallback((id: string, dataUrl: string) => {
+    setPagesMap(prev => {
+      const existing = prev.get(id);
+      if (!existing) return prev;
+      const newMap = new Map(prev);
+      newMap.set(id, { ...existing, thumbnailDataUrl: dataUrl });
+      return newMap;
+    });
+  }, []);
+
+  // --- グローバルUndo/Redoハンドラー用のState ---
+  const [undoHandlers, setUndoHandlers] = useState({
+    undo: () => {},
+    redo: () => {},
+    canUndo: false,
+    canRedo: false,
+  });
+
+  const registerUndoHandlers = useCallback((handlers: { undo: () => void; redo: () => void; canUndo: () => boolean; canRedo: () => boolean }) => {
+    // 参照を保持し、再レンダリングをトリガーするためにはcanUndo()の状態を追跡する必要があるが、
+    // ここでは簡易的に関数のみ登録し、判定は都度させる（必要に応じてフラグ化）
+    setUndoHandlers({
+      undo: handlers.undo,
+      redo: handlers.redo,
+      // React state is not ideal for this real-time check inside Toolbar, but we pass getters for now
+      canUndo: handlers.canUndo(),
+      canRedo: handlers.canRedo(),
+    });
+
+    // To dynamically update Toolbar when stacks change, we'd need MultiPageCanvasView to call this repeatedly, 
+    // or expose them as refs. For now, Toolbar evaluates button state on render or we expose static getters.
+    // Let's modify the interface to use getters/setters properly if needed, but for now just pass the object.
+  }, []);
+
+  // --- Context値 ---
+
+  const value = useMemo<MultiPageCanvasContextValue>(() => ({
+    pages,
+    getPage,
+    updatePageFrame,
+    viewState,
+    setCanvasOffset,
+    setCanvasZoom,
+    switchPage,
+    focusPage,
+    autoLayoutPages,
+    zoomToFit,
+    zoomIn,
+    zoomOut,
+    updateThumbnail,
+    isEnabled: enabled,
+    undo: undoHandlers.undo,
+    redo: undoHandlers.redo,
+    canUndo: undoHandlers.canUndo,
+    canRedo: undoHandlers.canRedo,
+    registerUndoHandlers,
+  }), [
+    pages,
+    getPage,
+    updatePageFrame,
+    viewState,
+    setCanvasOffset,
+    setCanvasZoom,
+    switchPage,
+    focusPage,
+    autoLayoutPages,
+    zoomToFit,
+    zoomIn,
+    zoomOut,
+    updateThumbnail,
+    enabled,
+    undoHandlers,
+    registerUndoHandlers,
+  ]);
+
+  return (
+    <MultiPageCanvasContext.Provider value={value}>
+      {children}
+    </MultiPageCanvasContext.Provider>
+  );
+}
+
+/**
+ * 条件付きProvider: enabledがfalseの場合はchildrenをそのまま返す
+ */
+export function ConditionalMultiPageProvider({
+  enabled,
+  children,
+}: {
+  enabled: boolean;
+  children: React.ReactNode;
+}) {
+  if (!enabled) {
+    return <>{children}</>;
+  }
+  return (
+    <MultiPageCanvasProvider enabled={enabled}>
+      {children}
+    </MultiPageCanvasProvider>
+  );
+}

package/src/editor/contexts/index.ts

@@ -0,0 +1,17 @@
+/**
+ * エディタContext統合エクスポート
+ *
+ * Phase 1: Context分割によるパフォーマンス最適化
+ * - 51個のstateを8つの専門Contextに分割
+ * - ファサードパターンで後方互換性を維持
+ */
+
+// 個別Context（パフォーマンス最適化用）
+export { EditorRefsProvider, useEditorRefs, type EditorRefsContextValue } from './EditorRefsContext';
+export { EditorSelectionProvider, useEditorSelection, type EditorSelectionContextValue } from './EditorSelectionContext';
+export { EditorToolProvider, useEditorTool, type EditorToolContextValue } from './EditorToolContext';
+export { EditorViewProvider, useEditorView, type EditorViewContextValue } from './EditorViewContext';
+export { EditorHistoryProvider, useEditorHistory, type EditorHistoryContextValue } from './EditorHistoryContext';
+export { EditorDocumentProvider, useEditorDocument, type EditorDocumentContextValue } from './EditorDocumentContext';
+export { EditorArtboardProvider, useEditorArtboard, type EditorArtboardContextValue } from './EditorArtboardContext';
+export { EditorUIStateProvider, useEditorUIState, type EditorUIStateContextValue } from './EditorUIStateContext';

package/src/editor/editor-skin.css

@@ -0,0 +1,122 @@
+/**
+ * [移植時の追加] エディタの配色スキン。配色の正本はこの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;
+}

package/src/editor/hooks/index.ts

@@ -0,0 +1,38 @@
+/**
+ * エディタフック群のエクスポート
+ */
+
+// 既存のhooks
+export { useEditorMessages, postEditorMessage } from './useEditorMessages';
+export { useDrawingMode } from './useDrawingMode';
+export { useElementActions } from './useElementActions';
+export { useCanvasControls, editorZoomApiRef } from './useCanvasControls';
+export { useImageUpload } from './useImageUpload';
+export { useMediaLibrary, invalidateMediaLibraryCache, toEditorMediaUrl } from './useMediaLibrary';
+export type { MediaItem } from './useMediaLibrary';
+export { useRichPaste } from './useRichPaste';
+export { useEditorColors } from './useEditorColors';
+export { useAiReplace } from './useAiReplace';
+
+// EditorCanvas.tsx から分割した新規hooks
+export { useTouchGestures } from './useTouchGestures';
+export { useKeyboardShortcuts } from './useKeyboardShortcuts';
+export { useCoordinateTransform } from './useCoordinateTransform';
+export { useElementSelection } from './useElementSelection';
+export { useMarqueeSelection } from './useMarqueeSelection';
+export { useDragResize } from './useDragResize';
+export { useContextMenuHandler } from './useContextMenuHandler';
+export { useIframeSetup } from './useIframeSetup';
+export { useFocusManagement } from './useFocusManagement';
+export { useResizablePanel } from './useResizablePanel';
+
+// Component system hooks
+export { useComponentInstances } from './useComponentInstances';
+
+// FrontendVisualEditorInner から分割した新規hooks
+export { useBrowserZoomPrevention } from './useBrowserZoomPrevention';
+export { usePageSettingsManager } from './usePageSettingsManager';
+export { useComponentEditMode } from './useComponentEditMode';
+
+/** @deprecated Use useEditorColors instead */
+export { useEditorColors as useSlideColors } from './useEditorColors';