@growgroup/visual-editor 0.1.5 → 0.2.0

package/src/editor/FrontendVisualEditor.tsx

@@ -11,7 +11,7 @@
  * 汎用的なHTML編集エディタとして、スライド、ページ、コンポーネント等で利用可能
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useEditorShortcuts } from '../hooks/useEditorShortcuts';
 import {
   editorCancelDragRef,
@@ -32,7 +32,10 @@ import { useAuth } from '../components/auth/AuthProvider';
 import { findSlideRoot, findInsertionParent } from './utils/slide-root';
 import { registerAutoSaveFlush } from './autosave';
 import { getCleanHtml } from './utils/html-utils';
-import './editor-skin.css';
+import { EditorAppearanceContext, useEditorTheme } from './contexts/EditorAppearanceContext';
+import { CanvasAppearance } from './components/shell/CanvasAppearance';
+import { can, io } from '../io';
+import { insertIntoFlow } from './parts';
 import type { Slide } from '../types/slide';
 import {
   useEditorMessages,
@@ -55,16 +58,9 @@ import {
   EditorFooter,
   EditorContextMenu,
   AiPromptPopover,
-  HtmlEditorDialog,
-  HtmlImportDialog,
-  CssEditorDialog,
-  JsEditorDialog,
-  PageSettingsDialog,
-  MediaLibraryDialog,
   EditorCanvas,
   VariablesPanel,
   ComponentPanel,
-  MasterComponentEditor,
 } from './components';
 import { useEditorVariables, useEditorComponents } from './EditorContext';
 import type { CSSVariableDefinition } from '../types/css-variables';
@@ -102,6 +98,13 @@ import { cn } from '../lib/utils';
  * 打鍵やドラッグのたびに保存(=原本TSXへの書き戻しジョブ)が走ることはない。
  */
 const AUTO_SAVE_DELAY_MS = 2000;
+const MasterComponentEditor = lazy(() => import('./components/MasterComponentEditor').then((m) => ({ default: m.MasterComponentEditor })));
+const MediaLibraryDialog = lazy(() => import('./components/MediaLibraryDialog').then((m) => ({ default: m.MediaLibraryDialog })));
+const PageSettingsDialog = lazy(() => import('./components/PageSettingsDialog').then((m) => ({ default: m.PageSettingsDialog })));
+const JsEditorDialog = lazy(() => import('./components/JsEditorDialog').then((m) => ({ default: m.JsEditorDialog })));
+const CssEditorDialog = lazy(() => import('./components/CssEditorDialog').then((m) => ({ default: m.CssEditorDialog })));
+const HtmlImportDialog = lazy(() => import('./components/HtmlImportDialog').then((m) => ({ default: m.HtmlImportDialog })));
+const HtmlEditorDialog = lazy(() => import('./components/HtmlEditorDialog').then((m) => ({ default: m.HtmlEditorDialog })));
 
 /**
  * 保存の状態表示。エディタの殻(Figma風ヘッダー / PowerPoint風タイトルバー)で共通に使う。
@@ -285,6 +288,8 @@ function FrontendVisualEditorInner({
     componentLibrary,
     createInstance,
     getMasterComponent,
+    partsMode,
+    materializePartInstance,
   } = useEditorComponents();
 
   const { getIdToken } = useAuth();
@@ -332,15 +337,14 @@ function FrontendVisualEditorInner({
     try { localStorage.setItem('gg-editor:ui-mode', mode); } catch { /* 記憶できなくても動作は継続 */ }
   };
   // PowerPoint風UIのテーマ(OS設定に追従・切替は記憶)とサムネイル検索
-  const [pptTheme, setPptTheme] = useState<PptTheme>(() => initialPptTheme());
-  const togglePptTheme = () => {
-    const next: PptTheme = pptTheme === 'dark' ? 'light' : 'dark';
-    setPptTheme(next);
-    try { localStorage.setItem('gg-editor:ppt-theme', next); } catch { /* 続行 */ }
-  };
+  const { theme: pptTheme, toggleTheme: togglePptTheme } = useEditorTheme();
+  const [layersOpen, setLayersOpen] = useState(editorMode !== 'webpage' || !!pagesPanel);
+  const [guidesOpen, setGuidesOpen] = useState(false);
   const [pptSearch, setPptSearch] = useState('');
   // コメントパネル(PowerPoint風UIのみ)。フォーカス合図はカウンタで送る
   const [pptCommentsOpen, setPptCommentsOpen] = useState(false);
+  const [commentsMounted, setCommentsMounted] = useState(false);
+  useEffect(() => { if (pptCommentsOpen) setCommentsMounted(true); }, [pptCommentsOpen]);
   // PowerPoint風UIの右ペイン「図の書式設定」(影・反射・光彩・ぼかし)
   const [pptFormatPaneOpen, setPptFormatPaneOpen] = useState(false);
   const [pptCommentFocus, setPptCommentFocus] = useState(0);
@@ -534,6 +538,10 @@ function FrontendVisualEditorInner({
     selectedElementInstance,
     isComponentInstance,
     hasOverrides,
+    isPartInstance,
+    partLabel,
+    handleDetachPart,
+    handleUpdatePart,
     handleCreateComponent,
     handleConfirmCreateComponent,
     handleEditMasterComponent,
@@ -817,6 +825,17 @@ function FrontendVisualEditorInner({
   /** ページ切替(サムネイル・新しいスライド)の直前に、殻から保存を呼べるようにする */
   useEffect(() => registerAutoSaveFlush(() => saveIfDirtyRef.current()), []);
 
+  /**
+   * この編集画面が消えるとき(ページ切替で key が変わる・閉じる)、保存待ちの変更を捨てない。
+   *
+   * 自動保存は2秒のデバウンス。編集して2秒以内にページを切り替えると、タイマーごと
+   * 捨てられて編集が消えていた(構成ラフで実測: 見出しを直して隣のページへ移ると失われる)。
+   * useLayoutEffect の後始末は iframe がまだ DOM にある間に走るので、ここで
+   * 本文を読み取って保存を始める。onSave はこの画面のもの(古い閉包)なので、
+   * 切替先ではなく編集していたページへ正しく保存される。
+   */
+  useLayoutEffect(() => () => { void saveIfDirtyRef.current(); }, []);
+
   /** ページが変わったら「保存済みの本文」の記憶も切り替える */
   useEffect(() => {
     savedPayloadRef.current = null;
@@ -1080,7 +1099,35 @@ function FrontendVisualEditorInner({
           try {
             const { componentId } = JSON.parse(componentData);
             console.log('[FrontendVisualEditor] Parsed componentId:', componentId);
-            if (componentId) {
+            if (componentId && partsMode) {
+              // 部品モード: 実体化してフローへ(iframe 内の座標がそのまま来る)
+              const iframeDoc = iframeRef.current?.contentDocument;
+              const element = iframeDoc ? materializePartInstance(componentId, iframeDoc) : null;
+              if (iframeDoc && element) {
+                if (editorMode === 'webpage') {
+                  insertIntoFlow(iframeDoc, element, x || 0, y || 0);
+                } else {
+                  element.style.position = 'absolute';
+                  element.style.left = `${x || 100}px`;
+                  element.style.top = `${y || 100}px`;
+                  findInsertionParent(iframeDoc).appendChild(element);
+                }
+                if (!element.getAttribute('data-element-id')) {
+                  element.setAttribute('data-editable', 'true');
+                  element.setAttribute('data-element-id', `el-${Date.now()}-part`);
+                }
+                notifyIframeChange(true);
+                const { extractElementInfo } = await import('./utils/style-utils');
+                const elementInfo = extractElementInfo(element, iframeDoc);
+                if (elementInfo) {
+                  setSelectedElement(elementInfo);
+                  setSelectedElementIds([element.getAttribute('data-element-id')!]);
+                  element.classList.add('selected');
+                }
+              } else {
+                console.error('[FrontendVisualEditor] 部品が見つかりません:', componentId);
+              }
+            } else if (componentId) {
               // インスタンスを作成
               const instance = createInstance(componentId, undefined, contentId);
               console.log('[FrontendVisualEditor] Created instance:', instance);
@@ -1133,7 +1180,7 @@ function FrontendVisualEditorInner({
 
     window.addEventListener('message', handleMessage);
     return () => window.removeEventListener('message', handleMessage);
-  }, [uploadFromFile, contentId, createInstance, getMasterComponent, iframeRef, notifyIframeChange, setSelectedElement, setSelectedElementIds]);
+  }, [uploadFromFile, contentId, createInstance, getMasterComponent, iframeRef, notifyIframeChange, setSelectedElement, setSelectedElementIds, partsMode, materializePartInstance, editorMode]);
 
   // ドラッグ&ドロップハンドラ
   const handleDragEnter = useCallback((e: React.DragEvent) => {
@@ -1210,6 +1257,38 @@ function FrontendVisualEditorInner({
               y = (e.clientY - iframeRect.top) / dropScale;
             }
 
+            // 部品モード: 定義を実体化してそのまま置く(JSON のインスタンスは作らない)。
+            // webpage はフローに差し込み、slide は従来どおり絶対配置
+            if (partsMode) {
+              const element = materializePartInstance(componentId, iframeDoc);
+              if (!element) {
+                console.error('[FrontendVisualEditor] 部品が見つかりません:', componentId);
+                return;
+              }
+              if (editorMode === 'webpage') {
+                insertIntoFlow(iframeDoc, element, e.clientX - iframeRect.left, e.clientY - iframeRect.top);
+              } else {
+                element.style.position = 'absolute';
+                element.style.left = `${x}px`;
+                element.style.top = `${y}px`;
+                (slideRoot ?? iframeDoc.body).appendChild(element);
+              }
+              // MutationObserver が id を付けるのは非同期なので、選択できるよう先に付ける
+              if (!element.getAttribute('data-element-id')) {
+                element.setAttribute('data-editable', 'true');
+                element.setAttribute('data-element-id', `el-${Date.now()}-part`);
+              }
+              notifyIframeChange(true);
+              const { extractElementInfo } = await import('./utils/style-utils');
+              const elementInfo = extractElementInfo(element, iframeDoc);
+              if (elementInfo) {
+                setSelectedElement(elementInfo);
+                setSelectedElementIds([element.getAttribute('data-element-id')!]);
+                element.classList.add('selected');
+              }
+              return;
+            }
+
             // インスタンスを作成（バリアントIDが指定されていれば使用）
             // Pass position directly to createInstance to avoid React state batching race condition
             console.log('[FrontendVisualEditor] Creating instance for component:', componentId, 'variant:', variantId);
@@ -1287,7 +1366,7 @@ function FrontendVisualEditorInner({
         }
       }
     }
-  }, [containerRef, uploadFromFiles, createInstance, getMasterComponent, setSelectedElement, contentId, pushHistory, iframeRef, zoom]);
+  }, [containerRef, uploadFromFiles, createInstance, getMasterComponent, setSelectedElement, contentId, pushHistory, iframeRef, zoom, partsMode, materializePartInstance, editorMode, notifyIframeChange, setSelectedElementIds]);
 
   // クリップボードからのペースト処理（画像、HTML、Excel、Word、SVG）
   // 同じpasteイベントを二度処理しないための記録。
@@ -1814,18 +1893,22 @@ function FrontendVisualEditorInner({
   // ================= UIモード(Figma風 / PowerPoint風) =================
   // ベース(キャンバス・選択・保存・書き戻し)は完全共通で、切り替わるのは殻だけ。
   // 選択はlocalStorageに記憶する
-  const isPpt = uiMode === 'ppt' && !isMultiPageCanvas;
+  const isPpt = uiMode === 'ppt' && editorMode === 'slide' && !isMultiPageCanvas;
 
   return (
+    <EditorAppearanceContext.Provider value={pptTheme}>
     <div
+      data-editor-theme={pptTheme}
+      data-editor-mode={editorMode}
       className={cn(
         // [移植時の修正] gg-editor-skin でビューアと同じ配色に揃える(editor-skin.css)
-        "gg-editor-skin flex flex-col",
+        "gg-editor-skin gg-editor-ui flex flex-col",
         isMultiPageCanvas ? "absolute inset-0 z-40" : "fixed inset-0 z-50"
       )}
       data-frontend-visual-editor="true"
-      style={{ touchAction: 'none', backgroundColor: isPpt ? PPT_PALETTES[pptTheme].chrome : '#1e1e1e' }}
+      style={{ backgroundColor: 'var(--ed-bg)' }}
     >
+      <CanvasAppearance theme={pptTheme} />
       {/* ヘッダー(UIモードで切り替え) */}
       {isPpt ? (
         <>
@@ -1902,6 +1985,12 @@ function FrontendVisualEditorInner({
         </>
       ) : (
       <EditorHeader
+        theme={pptTheme}
+        onToggleTheme={togglePptTheme}
+        layersOpen={layersOpen}
+        onToggleLayers={() => setLayersOpen((v) => !v)}
+        guidesOpen={guidesOpen}
+        onToggleGuides={() => setGuidesOpen((v) => !v)}
         comments={{
           open: pptCommentsOpen,
           toggle: () =>
@@ -1918,13 +2007,13 @@ function FrontendVisualEditorInner({
         saveStatus={saveStatus}
         isCanvasEditing={isMultiPageCanvas}
         onImport={() => setIsImportDialogOpen(true)}
-        onCssEdit={handleOpenCssEditor}
+        onCssEdit={can('apiFetch') ? handleOpenCssEditor : undefined}
         hasCss={!!importedCss}
-        onJsEdit={handleOpenJsEditor}
+        onJsEdit={can('apiFetch') ? handleOpenJsEditor : undefined}
         hasJs={!!importedJs}
-        onPageSettings={handleOpenPageSettings}
+        onPageSettings={can('apiFetch') ? handleOpenPageSettings : undefined}
         hasPageSettings={!!(pageSettings.title || pageSettings.description || pageSettings.ogp?.image)}
-        onExport={parentId && contentId ? handleExport : undefined}
+        onExport={can('apiFetch') && parentId && contentId ? handleExport : undefined}
         contextNumber={Number(currentContentId ?? contentId) || undefined}
         contextTitle={contentList.find((c) => c.id === (currentContentId ?? contentId))?.title}
         headerExtra={headerExtra}
@@ -1940,7 +2029,9 @@ function FrontendVisualEditorInner({
         ) : isMultiPageCanvas ? (
           <EditorLayerPanel />
         ) : (
-          <LeftPanel page={Number(currentContentId ?? contentId) || 1} pagesSlot={pagesPanel} />
+          <div className={layersOpen && !isComponentPanelOpen ? "flex min-h-0" : "hidden"}>
+            <LeftPanel page={Number(currentContentId ?? contentId) || 1} pagesSlot={pagesPanel} />
+          </div>
         )}
 
         {/* コンポーネントパネル（左側、レイヤーパネルの隣） */}
@@ -1978,10 +2069,10 @@ function FrontendVisualEditorInner({
             <>
               <EditorCanvas />
               {/* ブレイクポイントガイド（webpageモード用） */}
-              <BreakpointGuides
+              {guidesOpen && <BreakpointGuides
                 containerWidth={canvasAreaSize.width}
                 containerHeight={canvasAreaSize.height}
-              />
+              />}
             </>
           )}
 
@@ -2035,9 +2126,9 @@ function FrontendVisualEditorInner({
             onBringToFront={selectedElement ? bringToFront : undefined}
             onSendToBack={selectedElement ? sendToBack : undefined}
             onImageUpload={() => openFilePicker({ x: 100, y: 100 })}
-            onOpenMediaLibrary={() => setIsMediaLibraryOpen(true)}
+            onOpenMediaLibrary={can('apiFetch') ? () => setIsMediaLibraryOpen(true) : undefined}
             isMediaReplaceMode={isImageSelected}
-            onAiRegenerate={selectedElement && selectedElementIds.length <= 1 ? openAiPrompt : undefined}
+            onAiRegenerate={can('apiFetch') && selectedElement && selectedElementIds.length <= 1 ? openAiPrompt : undefined}
             onOpenVariables={() => setIsVariablesPanelOpen(true)}
             hasVariables={hasVariables}
             onOpenComponents={() => setIsComponentPanelOpen(true)}
@@ -2078,8 +2169,8 @@ function FrontendVisualEditorInner({
         {/* 右パネルは同時に1つだけ出す。
             コメントを開いている間はプロパティ(詳細編集)を引っ込め、閉じると戻る。
             2つ並ぶと「いまどちらを操作しているのか」が分からなくなるため */}
-        {!isPpt && !pptCommentsOpen && <EditorPropertyPanel />}
-        {!isMultiPageCanvas && (
+        {!isPpt && !pptCommentsOpen && (editorMode === 'slide' || selectedElement || selectedElementIds.length > 0 || activeTool === 'scale') && <EditorPropertyPanel />}
+        {!isMultiPageCanvas && can('commentAction') && (
           <PptCommentMarkers
             page={Number(currentContentId ?? contentId) || 1}
             onOpenThread={(id) => {
@@ -2091,23 +2182,25 @@ function FrontendVisualEditorInner({
         {isPpt && pptFormatPaneOpen && (
           <PptFormatPane theme={pptTheme} onClose={() => setPptFormatPaneOpen(false)} />
         )}
-        {!isMultiPageCanvas && pptCommentsOpen && (
+        {!isMultiPageCanvas && can('commentAction') && (pptCommentsOpen || commentsMounted) && (
+          <div className={pptCommentsOpen ? 'flex min-h-0' : 'hidden'}>
           <PptCommentsPanel
             page={Number(currentContentId ?? contentId) || 1}
-            theme={isPpt ? pptTheme : 'dark'}
+            theme={pptTheme}
             onClose={() => setPptCommentsOpen(false)}
             focusSignal={pptCommentFocus}
             activeThreadId={pptActiveThread}
             onActiveThread={setPptActiveThread}
           />
+          </div>
         )}
       </div>
 
       {/* ノート欄(トークスクリプト)。PowerPoint風・Figma風の両方に出す。
           Figma風はダーク配色で固定(スキンと馴染む) */}
       {/* ノート欄は発表原稿。Webページには無い概念なので出さない */}
-      {!isMultiPageCanvas && editorMode !== 'webpage' && (
-        <PptNotes page={Number(currentContentId ?? contentId) || 1} theme={isPpt ? pptTheme : 'dark'} />
+      {!isMultiPageCanvas && editorMode !== 'webpage' && can('apiFetch') && (
+        <PptNotes page={Number(currentContentId ?? contentId) || 1} theme={pptTheme} />
       )}
 
       {/* フッター(Figma風) / ステータスバー(PowerPoint風) */}
@@ -2127,13 +2220,18 @@ function FrontendVisualEditorInner({
         hasStyleInClipboard={hasStyleInClipboard()}
         isComponentInstance={isComponentInstance}
         hasOverrides={hasOverrides}
+        partsMode={partsMode}
+        isPartInstance={isPartInstance}
+        partLabel={partLabel}
+        onDetachPart={handleDetachPart}
+        onUpdatePart={can('savePart') ? handleUpdatePart : undefined}
         onCopy={selectedElement ? copyElements : undefined}
         onCut={selectedElement ? cutElements : undefined}
         onPaste={pasteElements}
         onDelete={selectedElement ? deleteElement : undefined}
         onDuplicate={selectedElement ? duplicateElement : undefined}
         onReplaceImageFromFile={isImageSelected ? replaceImageFromFile : undefined}
-        onReplaceImageFromLibrary={isImageSelected ? () => setIsMediaLibraryOpen(true) : undefined}
+        onReplaceImageFromLibrary={can('apiFetch') && isImageSelected ? () => setIsMediaLibraryOpen(true) : undefined}
         onReplaceImageFromClipboard={isImageSelected ? () => void replaceImageFromClipboard() : undefined}
         onCopyStyle={selectedElement ? copyStyle : undefined}
         onPasteStyle={selectedElement ? pasteStyle : undefined}
@@ -2150,7 +2248,7 @@ function FrontendVisualEditorInner({
         onDeleteRow={tableActions?.deleteRow}
         onDeleteColumn={tableActions?.deleteColumn}
         onEditLink={selectedElement ? handleEditLink : undefined}
-        onAiRegenerate={selectedElement && selectedElementIds.length <= 1 ? openAiPrompt : undefined}
+        onAiRegenerate={can('apiFetch') && selectedElement && selectedElementIds.length <= 1 ? openAiPrompt : undefined}
         onEditHtml={selectedElement ? handleEditHtml : undefined}
         onCreateComponent={handleCreateComponent}
         onGoToMainComponent={handleGoToMainComponent}
@@ -2170,6 +2268,7 @@ function FrontendVisualEditorInner({
       />
 
       {/* HTML編集ダイアログ */}
+      {htmlEditorState.isOpen && <Suspense fallback={<div role="status" className="absolute bottom-16 left-4 rounded bg-[#2c2c2c] p-3">読み込み中…</div>}>
       <HtmlEditorDialog
         isOpen={htmlEditorState.isOpen}
         onClose={() => {
@@ -2182,8 +2281,10 @@ function FrontendVisualEditorInner({
         onSave={handleSaveHtml}
         initialHtml={htmlEditorState.initialHtml}
       />
+      </Suspense>}
 
       {/* HTMLインポートダイアログ */}
+      {isImportDialogOpen && <Suspense fallback={<div role="status" className="absolute bottom-16 left-4 rounded bg-[#2c2c2c] p-3">読み込み中…</div>}>
       <HtmlImportDialog
         isOpen={isImportDialogOpen}
         onClose={() => {
@@ -2197,8 +2298,10 @@ function FrontendVisualEditorInner({
         presentationId={parentId}
         slideId={contentId}
       />
+      </Suspense>}
 
       {/* CSS編集ダイアログ */}
+      {isCssEditorOpen && <Suspense fallback={<div role="status" className="absolute bottom-16 left-4 rounded bg-[#2c2c2c] p-3">読み込み中…</div>}>
       <CssEditorDialog
         isOpen={isCssEditorOpen}
         onClose={() => {
@@ -2212,8 +2315,10 @@ function FrontendVisualEditorInner({
         onSave={handleSaveCss}
         onClear={handleClearCss}
       />
+      </Suspense>}
 
       {/* JS編集ダイアログ */}
+      {isJsEditorOpen && <Suspense fallback={<div role="status" className="absolute bottom-16 left-4 rounded bg-[#2c2c2c] p-3">読み込み中…</div>}>
       <JsEditorDialog
         isOpen={isJsEditorOpen}
         onClose={() => {
@@ -2227,8 +2332,10 @@ function FrontendVisualEditorInner({
         onSave={handleSaveJs}
         onClear={handleClearJs}
       />
+      </Suspense>}
 
       {/* ページ設定ダイアログ */}
+      {isPageSettingsOpen && <Suspense fallback={<div role="status" className="absolute bottom-16 left-4 rounded bg-[#2c2c2c] p-3">読み込み中…</div>}>
       <PageSettingsDialog
         isOpen={isPageSettingsOpen}
         onClose={() => {
@@ -2243,8 +2350,10 @@ function FrontendVisualEditorInner({
         onSave={handleSavePageSettings}
         onUploadImage={handleUploadOgpImage}
       />
+      </Suspense>}
 
       {/* メディアライブラリ */}
+      {isMediaLibraryOpen && <Suspense fallback={<div role="status" className="absolute bottom-16 left-4 rounded bg-[#2c2c2c] p-3">読み込み中…</div>}>
       <MediaLibraryDialog
         isOpen={isMediaLibraryOpen}
         onClose={() => {
@@ -2258,6 +2367,7 @@ function FrontendVisualEditorInner({
         mode={isImageSelected ? 'replace' : 'insert'}
         currentSrc={selectedImageSrc}
       />
+      </Suspense>}
 
       {/* CSS変数パネル */}
       <VariablesPanel
@@ -2282,7 +2392,7 @@ function FrontendVisualEditorInner({
       <Dialog open={createComponentDialogOpen} onOpenChange={setCreateComponentDialogOpen}>
         <DialogContent className="bg-[#2c2c2c] border-[#444444] text-white">
           <DialogHeader>
-            <DialogTitle>コンポーネントを作成</DialogTitle>
+            <DialogTitle>{partsMode ? '部品として保存' : 'コンポーネントを作成'}</DialogTitle>
           </DialogHeader>
           <div className="space-y-4 py-4">
             <div className="space-y-2">
@@ -2323,6 +2433,7 @@ function FrontendVisualEditorInner({
       </Dialog>
 
       {/* マスターコンポーネントエディタ */}
+      {isMasterEditorOpen && <Suspense fallback={<div role="status" className="absolute bottom-16 left-4 rounded bg-[#2c2c2c] p-3">読み込み中…</div>}>
       <MasterComponentEditor
         master={editingMasterComponent}
         open={isMasterEditorOpen}
@@ -2340,6 +2451,7 @@ function FrontendVisualEditorInner({
           name: c.name,
         }))}
       />
+      </Suspense>}
 
       {/* レイアウトモード切替ヒントトースト。
           Webページでは絶対配置に倒さないので、それを勧めるこの導線も出さない */}
@@ -2384,7 +2496,29 @@ function FrontendVisualEditorInner({
           </div>
         </div>
       )}
+
+      {/* Webページ用の案内。
+          Webページでは「絶対配置モードに切り替える」を勧めない(版面が固定pxに固まる)ので、
+          代わりに逃げ道だけを伝える。sonner の Toaster はアプリ側に無く toast() が
+          表示されないため、既存のこの帯を流用している */}
+      {showLayoutHint && editorMode === 'webpage' && (
+        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] animate-in fade-in slide-in-from-bottom-2 duration-300">
+          <div className="bg-black/90 text-white px-4 py-3 rounded-lg shadow-xl flex items-center gap-4">
+            <span className="text-sm">
+              並べ替える相手がありません。Cmd/Ctrl+ドラッグで自由配置、ダブルクリックで中に入れます
+            </span>
+            <button
+              onClick={() => setShowLayoutHint(false)}
+              className="text-gray-400 hover:text-white text-lg leading-none ml-1"
+              aria-label="閉じる"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      )}
     </div>
+    </EditorAppearanceContext.Provider>
   );
 }
 
@@ -2430,9 +2564,11 @@ export function FrontendVisualEditor({
   const [initialVariables, setInitialVariables] = useState<CSSVariableDefinition[]>([]);
   const [isVariablesLoaded, setIsVariablesLoaded] = useState(false);
 
-  // CSS変数をロード（webpageモード・slideモード両対応）
+  // CSS変数をロード（webpageモード・slideモード両対応）。
+  // 利用側が io.loadVariables を渡していればそれ(ファイル等)から、無ければブラウザ内(localStorage)から
   useEffect(() => {
-    if (!effectiveParentId) {
+    const fromIo = io().loadVariables;
+    if (!effectiveParentId && !fromIo) {
       setIsVariablesLoaded(true);
       return;
     }
@@ -2441,9 +2577,11 @@ export function FrontendVisualEditor({
       try {
         // editorModeに応じてスコープを決定
         const scope: CSSVariableScope = editorMode === 'webpage' ? 'website' : 'presentation';
-        const variables = await getCSSVariablesList(effectiveParentId, scope);
+        const variables = fromIo
+          ? await fromIo()
+          : await getCSSVariablesList(effectiveParentId!, scope);
         setInitialVariables(variables);
-        console.log(`[FrontendVisualEditor] Loaded CSS variables (${scope}):`, variables.length);
+        console.log(`[FrontendVisualEditor] Loaded CSS variables (${fromIo ? 'io' : scope}):`, variables.length);
       } catch (error) {
         console.error('[FrontendVisualEditor] Failed to load CSS variables:', error);
       } finally {
@@ -2456,6 +2594,12 @@ export function FrontendVisualEditor({
 
   // CSS変数を保存するコールバック
   const handleSaveVariables = useCallback(async (variables: CSSVariableDefinition[]) => {
+    const toIo = io().saveVariables;
+    if (toIo) {
+      await toIo(variables);
+      console.log('[FrontendVisualEditor] Saved CSS variables (io):', variables.length);
+      return;
+    }
     if (!effectiveParentId) {
       throw new Error('Parent ID is required to save CSS variables');
     }
@@ -2467,6 +2611,8 @@ export function FrontendVisualEditor({
 
   // CSS変数をロードするコールバック
   const handleLoadVariables = useCallback(async (resourceId: string) => {
+    const fromIo = io().loadVariables;
+    if (fromIo) return fromIo();
     // editorModeに応じてスコープを決定
     const scope: CSSVariableScope = editorMode === 'webpage' ? 'website' : 'presentation';
     return getCSSVariablesList(resourceId, scope);

package/src/editor/components/EditorCanvas.tsx

@@ -318,14 +318,19 @@ export function EditorCanvas() {
     if (!container) return;
 
     const scrollLeft = (container.scrollWidth - container.clientWidth) / 2;
-    const scrollTop = (container.scrollHeight - container.clientHeight) / 2;
+    // webpage は上端固定(紙面は #canvas-scroll-area で flex-start)。
+    // 初期表示もページの先頭から見えるべきで、縦の中央へ飛ばさない
+    const scrollTop =
+      editorMode === "webpage"
+        ? 0
+        : (container.scrollHeight - container.clientHeight) / 2;
 
     container.scrollTo({
       left: scrollLeft,
       top: scrollTop,
       behavior: "instant",
     });
-  }, [containerRef]);
+  }, [containerRef, editorMode]);
 
   useEffect(() => {
     if (isInMultiPageMode) return; // マルチページモードではキャンバスがスクロールを管理
@@ -973,7 +978,7 @@ export function EditorCanvas() {
       ref={containerRef}
       className="h-full w-full"
       style={{
-        backgroundColor: isInMultiPageMode ? "transparent" : "#1a1a1a",
+        backgroundColor: isInMultiPageMode ? "transparent" : "var(--ed-bg)",
       }}
     >
       <iframe