npm - @growgroup/visual-editor - Versions diffs - 0.1.0 - Mend

@growgroup/visual-editor 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (219) hide show

package/LICENSE +21 -0
package/NOTICE +52 -0
package/README.md +143 -0
package/dist/editor.css +2 -0
package/package.json +94 -0
package/src/components/DeckSlideRender.tsx +21 -0
package/src/components/SaveNote.tsx +21 -0
package/src/components/auth/AuthProvider.tsx +44 -0
package/src/components/ui/accordion.tsx +57 -0
package/src/components/ui/alert-dialog.tsx +141 -0
package/src/components/ui/badge.tsx +36 -0
package/src/components/ui/button.tsx +56 -0
package/src/components/ui/card.tsx +76 -0
package/src/components/ui/checkbox.tsx +30 -0
package/src/components/ui/collapsible.tsx +11 -0
package/src/components/ui/context-menu.tsx +200 -0
package/src/components/ui/dialog.tsx +122 -0
package/src/components/ui/dropdown-menu.tsx +201 -0
package/src/components/ui/input.tsx +22 -0
package/src/components/ui/label.tsx +26 -0
package/src/components/ui/popover.tsx +33 -0
package/src/components/ui/scroll-area.tsx +48 -0
package/src/components/ui/scrubbable-label.tsx +95 -0
package/src/components/ui/select.tsx +159 -0
package/src/components/ui/separator.tsx +31 -0
package/src/components/ui/slider.tsx +28 -0
package/src/components/ui/switch.tsx +29 -0
package/src/components/ui/tabs.tsx +55 -0
package/src/components/ui/textarea.tsx +22 -0
package/src/components/ui/tooltip.tsx +32 -0
package/src/components/viewer/useDeck.ts +58 -0
package/src/editor/EditorContext.tsx +632 -0
package/src/editor/EditorToolbar.tsx +446 -0
package/src/editor/FrontendVisualEditor.tsx +2595 -0
package/src/editor/autosave.ts +34 -0
package/src/editor/components/AiPromptPopover.tsx +378 -0
package/src/editor/components/BreakpointGuides.tsx +323 -0
package/src/editor/components/BreakpointSelector.tsx +180 -0
package/src/editor/components/ComponentPropertyEditor.tsx +426 -0
package/src/editor/components/CssEditorDialog.tsx +168 -0
package/src/editor/components/EditorCanvas.tsx +987 -0
package/src/editor/components/EditorContextMenu.tsx +515 -0
package/src/editor/components/EditorFooter.tsx +81 -0
package/src/editor/components/EditorHeader.tsx +524 -0
package/src/editor/components/EditorLayerPanel.tsx +1197 -0
package/src/editor/components/EditorPropertyPanel.tsx +2996 -0
package/src/editor/components/EditorSidebar.tsx +226 -0
package/src/editor/components/FigmaColorPicker.tsx +1577 -0
package/src/editor/components/HtmlEditorDialog.tsx +71 -0
package/src/editor/components/HtmlImportDialog.tsx +346 -0
package/src/editor/components/JsEditorDialog.tsx +175 -0
package/src/editor/components/LayerTreeItem.tsx +494 -0
package/src/editor/components/MasterComponentEditor.tsx +846 -0
package/src/editor/components/MediaLibraryDialog.tsx +447 -0
package/src/editor/components/PageSettingsDialog.tsx +776 -0
package/src/editor/components/VariablePicker.tsx +355 -0
package/src/editor/components/VariablesDialog.tsx +564 -0
package/src/editor/components/VariantEditor.tsx +687 -0
package/src/editor/components/VariantMatrix.tsx +507 -0
package/src/editor/components/component-panel/CategoryAccordion.tsx +139 -0
package/src/editor/components/component-panel/ComponentGrid.tsx +51 -0
package/src/editor/components/component-panel/ComponentItem.tsx +368 -0
package/src/editor/components/component-panel/ComponentPanel.tsx +275 -0
package/src/editor/components/component-panel/ComponentSearch.tsx +82 -0
package/src/editor/components/component-panel/VariantList.tsx +260 -0
package/src/editor/components/component-panel/index.ts +12 -0
package/src/editor/components/index.ts +48 -0
package/src/editor/components/multi-page/CanvasZoomControls.tsx +71 -0
package/src/editor/components/multi-page/InfiniteCanvas.tsx +95 -0
package/src/editor/components/multi-page/MultiPageCanvasView.tsx +1404 -0
package/src/editor/components/multi-page/PageFrameOverlay.tsx +76 -0
package/src/editor/components/multi-page/PageLabel.tsx +34 -0
package/src/editor/components/multi-page/PageLivePreview.tsx +242 -0
package/src/editor/components/multi-page/PageThumbnail.tsx +59 -0
package/src/editor/components/multi-page/index.ts +7 -0
package/src/editor/components/ppt/PptChrome.tsx +2508 -0
package/src/editor/components/ppt/PptComments.tsx +589 -0
package/src/editor/components/ppt/PptDesignProposals.tsx +275 -0
package/src/editor/components/ppt/PptFormatPane.tsx +320 -0
package/src/editor/components/ppt/PptNotes.tsx +246 -0
package/src/editor/components/property-panel/AlignmentPanel.tsx +110 -0
package/src/editor/components/property-panel/AutoLayoutPanel.tsx +615 -0
package/src/editor/components/property-panel/BorderSection.tsx +104 -0
package/src/editor/components/property-panel/CompactNumberInput.tsx +237 -0
package/src/editor/components/property-panel/CompactSizeInput.tsx +148 -0
package/src/editor/components/property-panel/EffectSection.tsx +157 -0
package/src/editor/components/property-panel/FillSection.tsx +69 -0
package/src/editor/components/property-panel/GoogleFontPicker.tsx +192 -0
package/src/editor/components/property-panel/ImageSection.tsx +206 -0
package/src/editor/components/property-panel/ImgSrcSection.tsx +125 -0
package/src/editor/components/property-panel/InstanceOverrideSection.tsx +413 -0
package/src/editor/components/property-panel/LayoutSection.tsx +105 -0
package/src/editor/components/property-panel/LinkSection.tsx +103 -0
package/src/editor/components/property-panel/PropertyVariablePicker.tsx +311 -0
package/src/editor/components/property-panel/ScalePanel.tsx +212 -0
package/src/editor/components/property-panel/TypographySection.tsx +230 -0
package/src/editor/components/property-panel/UnitAwareNumberInput.tsx +238 -0
package/src/editor/components/property-panel/VariableAwareColorInput.tsx +477 -0
package/src/editor/components/property-panel/VariableAwareInput.tsx +606 -0
package/src/editor/components/property-panel/VariableAwareSizeInput.tsx +588 -0
package/src/editor/components/property-panel/VariableAwareUnitInput.tsx +546 -0
package/src/editor/components/property-panel/index.ts +24 -0
package/src/editor/components/property-panel/unit-utils.ts +261 -0
package/src/editor/components/shell/EditorTopBar.tsx +392 -0
package/src/editor/components/shell/LeftPanel.tsx +47 -0
package/src/editor/components/shell/PagesPanel.tsx +118 -0
package/src/editor/components/variables-panel/ColorValueCell.tsx +165 -0
package/src/editor/components/variables-panel/TextValueCell.tsx +116 -0
package/src/editor/components/variables-panel/VariablesPanel.tsx +518 -0
package/src/editor/components/variables-panel/index.ts +7 -0
package/src/editor/constants.ts +468 -0
package/src/editor/contexts/EditorArtboardContext.tsx +229 -0
package/src/editor/contexts/EditorComponentsContext.tsx +1320 -0
package/src/editor/contexts/EditorDocumentContext.tsx +113 -0
package/src/editor/contexts/EditorHistoryContext.tsx +516 -0
package/src/editor/contexts/EditorRefsContext.tsx +204 -0
package/src/editor/contexts/EditorSelectionContext.tsx +54 -0
package/src/editor/contexts/EditorToolContext.tsx +58 -0
package/src/editor/contexts/EditorUIStateContext.tsx +122 -0
package/src/editor/contexts/EditorVariablesContext.tsx +397 -0
package/src/editor/contexts/EditorViewContext.tsx +101 -0
package/src/editor/contexts/MultiPageCanvasContext.tsx +498 -0
package/src/editor/contexts/index.ts +17 -0
package/src/editor/editor-skin.css +122 -0
package/src/editor/hooks/index.ts +38 -0
package/src/editor/hooks/useAiReplace.ts +397 -0
package/src/editor/hooks/useAltMeasure.ts +67 -0
package/src/editor/hooks/useBrowserZoomPrevention.ts +121 -0
package/src/editor/hooks/useCanvasControls.ts +1222 -0
package/src/editor/hooks/useComponentEditMode.ts +658 -0
package/src/editor/hooks/useComponentInstances.ts +515 -0
package/src/editor/hooks/useContextMenuHandler.ts +157 -0
package/src/editor/hooks/useCoordinateTransform.ts +207 -0
package/src/editor/hooks/useDragResize.ts +1317 -0
package/src/editor/hooks/useDrawingMode.ts +472 -0
package/src/editor/hooks/useEditorColors.ts +144 -0
package/src/editor/hooks/useEditorMessages.ts +108 -0
package/src/editor/hooks/useElementActions.ts +1754 -0
package/src/editor/hooks/useElementSelection.ts +1573 -0
package/src/editor/hooks/useFocusManagement.ts +249 -0
package/src/editor/hooks/useGoogleFonts.ts +305 -0
package/src/editor/hooks/useIframeInitializer.ts +584 -0
package/src/editor/hooks/useIframeSetup.ts +360 -0
package/src/editor/hooks/useImageUpload.ts +270 -0
package/src/editor/hooks/useInfiniteCanvas.ts +301 -0
package/src/editor/hooks/useKeyboardShortcuts.ts +205 -0
package/src/editor/hooks/useMarqueeSelection.ts +388 -0
package/src/editor/hooks/useMediaLibrary.ts +129 -0
package/src/editor/hooks/usePageSettingsManager.ts +739 -0
package/src/editor/hooks/useResizablePanel.ts +163 -0
package/src/editor/hooks/useRichPaste.ts +255 -0
package/src/editor/hooks/useTouchGestures.ts +197 -0
package/src/editor/index.ts +27 -0
package/src/editor/types/page-settings.ts +513 -0
package/src/editor/types.ts +382 -0
package/src/editor/utils/align-elements.ts +169 -0
package/src/editor/utils/api-json.ts +21 -0
package/src/editor/utils/aspect-lock.ts +50 -0
package/src/editor/utils/component-renderer.ts +702 -0
package/src/editor/utils/component-sync.ts +845 -0
package/src/editor/utils/crop-mode.ts +265 -0
package/src/editor/utils/dom-utils.ts +2238 -0
package/src/editor/utils/element-effects.ts +218 -0
package/src/editor/utils/eyedropper.ts +35 -0
package/src/editor/utils/figma-export.ts +560 -0
package/src/editor/utils/figma-kiwi-decoder.ts +722 -0
package/src/editor/utils/figma-kiwi-encoder.ts +583 -0
package/src/editor/utils/figma-paste.ts +2262 -0
package/src/editor/utils/flex-reorder.ts +231 -0
package/src/editor/utils/flex-utils.ts +1230 -0
package/src/editor/utils/geometry.ts +232 -0
package/src/editor/utils/grid-layout.ts +210 -0
package/src/editor/utils/html-utils.ts +470 -0
package/src/editor/utils/index.ts +11 -0
package/src/editor/utils/ink-style.ts +57 -0
package/src/editor/utils/inline-format.ts +236 -0
package/src/editor/utils/measure-distance.ts +120 -0
package/src/editor/utils/override-apply.ts +526 -0
package/src/editor/utils/override-detection.ts +613 -0
package/src/editor/utils/paste-processors.ts +609 -0
package/src/editor/utils/paste-sanitizer.ts +244 -0
package/src/editor/utils/restore-flow.ts +188 -0
package/src/editor/utils/shape-library.ts +171 -0
package/src/editor/utils/slide-root.ts +29 -0
package/src/editor/utils/smart-guides.ts +218 -0
package/src/editor/utils/style-utils.ts +685 -0
package/src/editor/utils/table-edit.ts +151 -0
package/src/editor/utils/tailwind-mappings.ts +778 -0
package/src/editor/utils/tailwind-utils.ts +804 -0
package/src/editor/utils/text-highlight.ts +216 -0
package/src/editor/utils/theme-to-variables.ts +341 -0
package/src/editor/utils/variant-resolver.ts +456 -0
package/src/editor/utils/viewport-utils.ts +295 -0
package/src/hooks/useEditorHistory.ts +195 -0
package/src/hooks/useEditorShortcuts.ts +260 -0
package/src/index.ts +40 -0
package/src/io.ts +134 -0
package/src/lib/agent/slide-agent/types.ts +547 -0
package/src/lib/agent/website-agent/types.ts +805 -0
package/src/lib/api/auth-fetch.ts +58 -0
package/src/lib/deck.ts +69 -0
package/src/lib/export.ts +47 -0
package/src/lib/firebase/config.ts +29 -0
package/src/lib/firebase/css-variables.ts +378 -0
package/src/lib/firebase/editor-components.ts +677 -0
package/src/lib/firebase/storage.ts +469 -0
package/src/lib/utils.ts +6 -0
package/src/styles/editor.css +52 -0
package/src/styles/skin.css +122 -0
package/src/types/css-variables.ts +645 -0
package/src/types/editor-components.ts +944 -0
package/src/types/editor.ts +420 -0
package/src/types/page-master.ts +197 -0
package/src/types/page.ts +419 -0
package/src/types/slide.ts +402 -0
package/src/types/website-theme.ts +788 -0
package/src/types/website.ts +374 -0
package/src/vendor/firebase-firestore.ts +13 -0
package/src/vendor/firebase-functions.ts +17 -0

package/src/editor/components/multi-page/PageFrameOverlay.tsx ADDED Viewed

@@ -0,0 +1,76 @@
+'use client';
+import { memo, useCallback } from 'react';
+import { cn } from '../../../lib/utils';
+import type { PageFrame } from '../../contexts/MultiPageCanvasContext';
+import { PageLabel } from './PageLabel';
+import { PageThumbnail } from './PageThumbnail';
+interface PageFrameOverlayProps {
+  page: PageFrame;
+  isActive?: boolean;
+  onDoubleClick?: (pageId: string) => void;
+  onClick?: (pageId: string) => void;
+}
+/**
+ * ページフレームオーバーレイ: 無限キャンバス上の各ページ表示
+ * - ページ名ラベル（Figma風、上部）
+ * - サムネイルプレビュー
+ * - ホバー時のリング表示
+ * - ダブルクリックでページフォーカス（Phase 2で完全実装）
+ */
+export const PageFrameOverlay = memo(function PageFrameOverlay({
+  page,
+  isActive = false,
+  onDoubleClick,
+  onClick,
+}: PageFrameOverlayProps) {
+  const handleDoubleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDoubleClick?.(page.id);
+  }, [onDoubleClick, page.id]);
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClick?.(page.id);
+  }, [onClick, page.id]);
+  return (
+    <div
+      className="absolute cursor-pointer group"
+      style={{
+        left: page.position.x,
+        top: page.position.y,
+        width: page.size.width,
+        height: page.size.height,
+      }}
+      onDoubleClick={handleDoubleClick}
+      onClick={handleClick}
+    >
+      {/* ページ名ラベル */}
+      <PageLabel
+        title={page.title}
+        isDirty={page.isDirty}
+        isActive={isActive}
+      />
+      {/* サムネイルコンテナ */}
+      <div
+        className={cn(
+          'w-full h-full bg-white rounded-sm shadow-lg overflow-hidden',
+          'ring-2 transition-all duration-150',
+          isActive
+            ? 'ring-[#0d99ff] shadow-blue-500/20'
+            : 'ring-transparent group-hover:ring-[#0d99ff]/50'
+        )}
+      >
+        <PageThumbnail
+          html={page.thumbnailHtml}
+          dataUrl={page.thumbnailDataUrl}
+          size={page.size}
+        />
+      </div>
+    </div>
+  );
+});

package/src/editor/components/multi-page/PageLabel.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+'use client';
+import { memo } from 'react';
+import { cn } from '../../../lib/utils';
+interface PageLabelProps {
+  title: string;
+  isDirty?: boolean;
+  isActive?: boolean;
+}
+/**
+ * ページ名ラベル（Figma風: フレーム上部に表示）
+ */
+export const PageLabel = memo(function PageLabel({
+  title,
+  isDirty = false,
+  isActive = false,
+}: PageLabelProps) {
+  return (
+    <div
+      className={cn(
+        'absolute -top-7 left-0 px-1.5 py-0.5 text-[11px] font-medium truncate max-w-[200px]',
+        'select-none pointer-events-none',
+        'text-gray-400'
+      )}
+    >
+      {title}
+      {isDirty && (
+        <span className="ml-1 text-orange-400">*</span>
+      )}
+    </div>
+  );
+});

package/src/editor/components/multi-page/PageLivePreview.tsx ADDED Viewed

@@ -0,0 +1,242 @@
+'use client';
+import { memo, useRef, useEffect } from 'react';
+interface PageLivePreviewProps {
+  html: string;
+  pageId: string;
+  /** iframe読み込み完了時にiframe要素を親に通知 */
+  onIframeLoad?: (pageId: string, iframe: HTMLIFrameElement) => void;
+}
+/**
+ * Multi-page canvas用のシンプルHTML生成
+ * body > #artboard > content のフラット構造
+ */
+function generateCanvasPageHtml(content: string): string {
+  const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
+  const scriptUrl = baseUrl
+    ? `${baseUrl}/vendor/tailwindcss-browser.js`
+    : 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4';
+  return `<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+  <script src="${scriptUrl}"></script>
+  <style type="text/tailwindcss">
+    @layer base {}
+    @theme { --font-sans: 'Noto Sans JP', system-ui, sans-serif; }
+  </style>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
+  <style>
+    * { box-sizing: border-box; }
+    html { margin: 0; padding: 0; touch-action: none; }
+    body { margin: 0; padding: 0; width: 100%; background: white; font-family: 'Noto Sans JP', system-ui, sans-serif; overflow: hidden; touch-action: none; }
+    #artboard { position: relative; }
+  </style>
+</head>
+<body>
+  <div id="artboard">${content}</div>
+</body>
+</html>`;
+}
+/**
+ * 全ページ同時編集可能なライブiframeプレビュー
+ * - シンプルHTML構造（ラッパーなし）
+ * - コンテンツ高さ自動測定 → 親にpostMessage
+ * - 編集ロジックは親(MultiPageCanvasView)が管理
+ */
+export const PageLivePreview = memo(function PageLivePreview({
+  html,
+  pageId,
+  onIframeLoad,
+}: PageLivePreviewProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const isLoadedRef = useRef(false);
+  // HTML初回読み込み（一度だけ）
+  // 初回ロード後はDOM操作で直接編集されるため、html prop変更でのiframe再読込は不要
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    if (!html?.trim()) return;
+    if (isLoadedRef.current) return;
+    isLoadedRef.current = true;
+    const fullHtml = generateCanvasPageHtml(html);
+    const blob = new Blob([fullHtml], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+    iframe.src = url;
+    return () => URL.revokeObjectURL(url);
+  }, [html]);
+  // 最小限のスクリプト注入（ID付与・高さ測定・イベント転送のみ）
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const injectMinimalScripts = (doc: Document) => {
+      if (doc.querySelector('[data-canvas-init]')) return;
+      const script = doc.createElement('script');
+      script.setAttribute('data-canvas-init', 'true');
+      script.textContent = `(function(){
+        var PAGE_ID = ${JSON.stringify(pageId)};
+        var artboard = document.getElementById('artboard');
+        if (!artboard) return;
+        // === Assign data-element-id + data-editable to ALL elements ===
+        var idCounter = 0;
+        function assignElementIds(parent, isArtboardChild) {
+          for (var i = 0; i < parent.children.length; i++) {
+            var child = parent.children[i];
+            if (child.nodeType !== 1) continue;
+            if (child.tagName === 'SCRIPT' || child.tagName === 'STYLE') continue;
+            if (!child.getAttribute('data-element-id')) {
+              child.setAttribute('data-element-id', 'el-' + (idCounter++));
+            }
+            // artboard直下の子要素にdata-editableを付与（レイアウトモード変換で必要）
+            if (isArtboardChild && !child.hasAttribute('data-editable')) {
+              child.setAttribute('data-editable', 'true');
+            }
+            assignElementIds(child, false);
+          }
+        }
+        assignElementIds(artboard, true);
+        // === Height measurement (one-shot) ===
+        var heightReported = false;
+        function reportHeight() {
+          if (heightReported) return;
+          var h = artboard.scrollHeight || document.body.scrollHeight;
+          if (h > 0) {
+            h = Math.min(h, 8000);
+            heightReported = true;
+            window.parent.postMessage({ type: 'PAGE_CONTENT_HEIGHT', pageId: PAGE_ID, height: h }, '*');
+          }
+        }
+        setTimeout(reportHeight, 500);
+        setTimeout(reportHeight, 1500);
+        // === Disable trackpad/keyboard zoom natively ===
+        var preventZoom = function(e) {
+          if (e.ctrlKey || e.metaKey) {
+            e.preventDefault();
+          }
+        };
+        window.addEventListener('wheel', preventZoom, { passive: false, capture: true });
+        document.addEventListener('wheel', preventZoom, { passive: false, capture: true });
+        var preventShortcuts = function(e) {
+          if ((e.ctrlKey || e.metaKey) && (e.key === '+' || e.key === '=' || e.key === '-' || e.key === '0')) {
+            e.preventDefault();
+          }
+        };
+        window.addEventListener('keydown', preventShortcuts, { passive: false, capture: true });
+        document.addEventListener('keydown', preventShortcuts, { passive: false, capture: true });
+        // === Prevent Safari gesture event native behavior ===
+        var preventGesture = function(e) {
+          e.preventDefault();
+        };
+        window.addEventListener('gesturestart', preventGesture, { passive: false, capture: true });
+        window.addEventListener('gesturechange', preventGesture, { passive: false, capture: true });
+        window.addEventListener('gestureend', preventGesture, { passive: false, capture: true });
+        document.addEventListener('gesturestart', preventGesture, { passive: false, capture: true });
+        document.addEventListener('gesturechange', preventGesture, { passive: false, capture: true });
+        document.addEventListener('gestureend', preventGesture, { passive: false, capture: true });
+        // === Wheel forwarding ===
+        window.addEventListener('wheel', function(e) {
+          window.parent.postMessage({
+            type: 'PAGE_PREVIEW_WHEEL',
+            deltaX: e.deltaX, deltaY: e.deltaY,
+            ctrlKey: e.ctrlKey, metaKey: e.metaKey
+          }, '*');
+        }, { passive: false });
+        // === Touch forwarding for pinch zoom ===
+        var lastTouches = null;
+        document.addEventListener('touchstart', function(e) {
+          if (e.touches.length >= 2) {
+            e.preventDefault();
+            lastTouches = [];
+            for (var i = 0; i < e.touches.length; i++) {
+              lastTouches.push({ clientX: e.touches[i].clientX, clientY: e.touches[i].clientY });
+            }
+          }
+        }, { passive: false });
+        document.addEventListener('touchmove', function(e) {
+          if (e.touches.length >= 2) {
+            e.preventDefault();
+            var touches = [];
+            for (var i = 0; i < e.touches.length; i++) {
+              touches.push({ clientX: e.touches[i].clientX, clientY: e.touches[i].clientY });
+            }
+            window.parent.postMessage({
+              type: 'PAGE_PREVIEW_TOUCH',
+              touchType: 'move',
+              touches: touches,
+              prevTouches: lastTouches
+            }, '*');
+            lastTouches = touches;
+          }
+        }, { passive: false });
+        document.addEventListener('touchend', function() {
+          lastTouches = null;
+        });
+        document.addEventListener('touchcancel', function() {
+          lastTouches = null;
+        });
+        // === Prevent link navigation ===
+        document.addEventListener('click', function(e) {
+          var a = e.target.closest('a');
+          if (a) e.preventDefault();
+        }, true);
+      })();`;
+      doc.body.appendChild(script);
+    };
+    try {
+      const doc = iframe.contentDocument;
+      if (doc && doc.readyState === 'complete' && doc.body) injectMinimalScripts(doc);
+    } catch { /* cross-origin */ }
+    const handleLoad = () => {
+      try {
+        const doc = iframe.contentDocument;
+        if (doc) injectMinimalScripts(doc);
+      } catch { /* cross-origin */ }
+      if (onIframeLoad && iframe) onIframeLoad(pageId, iframe);
+    };
+    iframe.addEventListener('load', handleLoad);
+    return () => iframe.removeEventListener('load', handleLoad);
+  }, [pageId, onIframeLoad]);
+  if (!html?.trim()) {
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-gray-100">
+        <span className="text-gray-400 text-sm">Empty Page</span>
+      </div>
+    );
+  }
+  return (
+    <iframe
+      ref={iframeRef}
+      className="w-full h-full border-0"
+      style={{ touchAction: 'none', overscrollBehavior: 'none' }}
+      sandbox="allow-same-origin allow-scripts"
+      title={`Page ${pageId}`}
+    />
+  );
+});

package/src/editor/components/multi-page/PageThumbnail.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+'use client';
+import { memo } from 'react';
+import { WEBPAGE_WIDTH, WEBPAGE_MIN_HEIGHT } from '../../contexts/MultiPageCanvasContext';
+interface PageThumbnailProps {
+  html: string;
+  dataUrl: string | null;
+  size: { width: number; height: number };
+}
+/**
+ * ページサムネイル: CSS scaleで縮小描画
+ * dataUrl（高品質キャプチャ）がある場合はそれを表示、
+ * なければHTMLをdangerouslySetInnerHTMLで描画
+ */
+export const PageThumbnail = memo(function PageThumbnail({
+  html,
+  dataUrl,
+  size,
+}: PageThumbnailProps) {
+  // 高品質サムネイルがあればそれを表示
+  if (dataUrl) {
+    return (
+      <img
+        src={dataUrl}
+        alt=""
+        className="w-full h-full object-cover object-top"
+        draggable={false}
+      />
+    );
+  }
+  // HTMLが空の場合はプレースホルダー
+  if (!html?.trim()) {
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-gray-100">
+        <span className="text-gray-400 text-sm">Empty Page</span>
+      </div>
+    );
+  }
+  // HTMLをCSS scaleで縮小描画
+  const scale = size.width / WEBPAGE_WIDTH;
+  return (
+    <div className="w-full h-full overflow-hidden">
+      <div
+        className="origin-top-left pointer-events-none"
+        style={{
+          width: WEBPAGE_WIDTH,
+          height: WEBPAGE_MIN_HEIGHT,
+          transform: `scale(${scale})`,
+        }}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </div>
+  );
+});

package/src/editor/components/multi-page/index.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export { InfiniteCanvas } from './InfiniteCanvas';
+export { MultiPageCanvasView } from './MultiPageCanvasView';
+export { PageFrameOverlay } from './PageFrameOverlay';
+export { PageThumbnail } from './PageThumbnail';
+export { PageLivePreview } from './PageLivePreview';
+export { PageLabel } from './PageLabel';
+export { CanvasZoomControls } from './CanvasZoomControls';