@growgroup/visual-editor 0.1.0

package/src/editor/components/component-panel/ComponentSearch.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+/**
+ * ComponentSearch - Search input with filter for components
+ *
+ * Provides a search input field with a search icon and clear button.
+ * Matches the dark theme of the editor.
+ */
+
+import React, { useRef, useCallback } from 'react';
+import { Search, X } from 'lucide-react';
+import { Input } from '../../../components/ui/input';
+import { Button } from '../../../components/ui/button';
+
+interface ComponentSearchProps {
+  /** Current search value */
+  value: string;
+  /** Callback when search value changes */
+  onChange: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Auto-focus the input on mount */
+  autoFocus?: boolean;
+}
+
+/**
+ * Search input component for filtering components.
+ * Supports keyboard navigation (Escape to clear).
+ */
+export function ComponentSearch({
+  value,
+  onChange,
+  placeholder = 'コンポーネントを検索...',
+  autoFocus = false,
+}: ComponentSearchProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleClear = useCallback(() => {
+    onChange('');
+    inputRef.current?.focus();
+  }, [onChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Escape' && value) {
+        e.stopPropagation();
+        handleClear();
+      }
+    },
+    [value, handleClear]
+  );
+
+  return (
+    <div className="relative">
+      <Search className="w-3.5 h-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none" />
+      <Input
+        ref={inputRef}
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        className="h-7 text-xs pl-7 pr-7 bg-[#383838] border-[#444444] text-white placeholder:text-gray-500 focus-visible:ring-1 focus-visible:ring-[#0d99ff]"
+        aria-label="コンポーネントを検索"
+      />
+      {value && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute right-1 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500 hover:text-white hover:bg-transparent"
+          onClick={handleClear}
+          aria-label="検索をクリア"
+        >
+          <X className="w-3 h-3" />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export default ComponentSearch;

package/src/editor/components/component-panel/VariantList.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+/**
+ * VariantList - Display variants of a component
+ *
+ * Shows all variants of a component with thumbnails.
+ * Each variant can be dragged to the canvas separately.
+ */
+
+import React, { useCallback, useRef, useEffect, useState } from 'react';
+import { Layers } from 'lucide-react';
+import type { MasterComponent, VariantDefinition } from '../../../types/editor-components';
+import { createDOMElement } from '../../utils/component-renderer';
+
+interface VariantListProps {
+  /** The component containing the variants */
+  component: MasterComponent;
+  /** Whether the variant list is expanded */
+  isExpanded: boolean;
+}
+
+/**
+ * Calculate the scale factor to fit the element within the container
+ */
+function calculateScale(
+  elementWidth: number,
+  elementHeight: number,
+  containerWidth: number,
+  containerHeight: number,
+  padding: number = 4
+): number {
+  const availableWidth = containerWidth - padding * 2;
+  const availableHeight = containerHeight - padding * 2;
+
+  const scaleX = availableWidth / elementWidth;
+  const scaleY = availableHeight / elementHeight;
+
+  return Math.min(scaleX, scaleY, 1);
+}
+
+/**
+ * VariantThumbnail - Renders a preview of a specific variant
+ */
+function VariantThumbnail({
+  variant,
+  componentId,
+}: {
+  variant: VariantDefinition;
+  componentId: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    if (!containerRef.current || !variant.rootElement) return;
+
+    setIsReady(false);
+    const container = containerRef.current;
+    container.innerHTML = '';
+
+    try {
+      const domElement = createDOMElement(variant.rootElement);
+
+      const wrapper = document.createElement('div');
+      wrapper.style.cssText = `
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        pointer-events: none;
+      `;
+
+      const scaleContainer = document.createElement('div');
+      scaleContainer.style.cssText = `
+        transform-origin: center center;
+        transition: transform 0.15s ease;
+      `;
+
+      domElement.style.position = 'relative';
+      domElement.style.left = 'auto';
+      domElement.style.top = 'auto';
+      domElement.style.transform = 'none';
+      domElement.style.margin = '0';
+
+      scaleContainer.appendChild(domElement);
+      wrapper.appendChild(scaleContainer);
+      container.appendChild(wrapper);
+
+      requestAnimationFrame(() => {
+        const containerRect = container.getBoundingClientRect();
+        const elementRect = domElement.getBoundingClientRect();
+
+        if (elementRect.width > 0 && elementRect.height > 0) {
+          const scale = calculateScale(
+            elementRect.width,
+            elementRect.height,
+            containerRect.width,
+            containerRect.height,
+            2
+          );
+          scaleContainer.style.transform = `scale(${scale})`;
+        }
+
+        setIsReady(true);
+      });
+    } catch (error) {
+      console.error('[VariantThumbnail] Error:', error);
+    }
+
+    return () => {
+      if (container) container.innerHTML = '';
+    };
+  }, [variant, componentId]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`w-full h-full bg-white transition-opacity duration-200 ${
+        isReady ? 'opacity-100' : 'opacity-0'
+      }`}
+      style={{
+        background: 'linear-gradient(45deg, #f8f8f8 25%, transparent 25%), linear-gradient(-45deg, #f8f8f8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f8f8f8 75%), linear-gradient(-45deg, transparent 75%, #f8f8f8 75%)',
+        backgroundSize: '6px 6px',
+        backgroundPosition: '0 0, 0 3px, 3px -3px, -3px 0px',
+      }}
+    />
+  );
+}
+
+/**
+ * VariantItem - Single variant item with drag support
+ */
+function VariantItem({
+  component,
+  variant,
+  isDefault,
+}: {
+  component: MasterComponent;
+  variant: VariantDefinition;
+  isDefault: boolean;
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragStart = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      setIsDragging(true);
+
+      e.dataTransfer.setData(
+        'application/x-editor-component',
+        JSON.stringify({
+          type: 'component',
+          componentId: component.id,
+          componentName: component.name,
+          variantId: variant.id,
+          variantName: variant.name,
+        })
+      );
+      e.dataTransfer.effectAllowed = 'copy';
+
+      // Custom drag image
+      const dragImage = document.createElement('div');
+      dragImage.className =
+        'bg-[#2c2c2c] border border-purple-500 rounded px-2 py-1 text-xs text-white shadow-lg';
+      dragImage.textContent = `${component.name} - ${variant.name}`;
+      dragImage.style.position = 'absolute';
+      dragImage.style.top = '-1000px';
+      document.body.appendChild(dragImage);
+      e.dataTransfer.setDragImage(dragImage, 0, 0);
+
+      setTimeout(() => {
+        document.body.removeChild(dragImage);
+      }, 0);
+    },
+    [component, variant]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  // Get variant property values display
+  const propertyDisplay = variant.propertyValues
+    ? Object.entries(variant.propertyValues)
+        .map(([key, value]) => `${value}`)
+        .join(', ')
+    : null;
+
+  return (
+    <div
+      className={`
+        flex items-center gap-2 p-1.5 rounded border cursor-grab
+        transition-all duration-150
+        ${isDragging
+          ? 'opacity-50 border-purple-500 bg-purple-500/10'
+          : 'border-[#444444] bg-[#2a2a2a] hover:border-gray-500 hover:bg-[#333]'
+        }
+      `}
+      draggable
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      title={`${variant.name}${variant.description ? `: ${variant.description}` : ''}`}
+    >
+      {/* Thumbnail */}
+      <div className="w-10 h-8 rounded overflow-hidden flex-shrink-0 border border-[#444444]">
+        <VariantThumbnail variant={variant} componentId={component.id} />
+      </div>
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-1">
+          <span className="text-[9px] text-gray-300 truncate">
+            {variant.name}
+          </span>
+          {isDefault && (
+            <span className="text-[7px] text-[#4fb8ff] bg-[#0d99ff]/20 px-1 rounded">
+              デフォルト
+            </span>
+          )}
+        </div>
+        {propertyDisplay && (
+          <p className="text-[8px] text-gray-500 truncate">
+            {propertyDisplay}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * VariantList displays all variants of a component
+ */
+export function VariantList({ component, isExpanded }: VariantListProps) {
+  if (!isExpanded || component.variants.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="mt-1 space-y-1 animate-in fade-in slide-in-from-top-1 duration-200">
+      <div className="flex items-center gap-1 px-1 text-[9px] text-gray-500">
+        <Layers className="w-3 h-3" />
+        <span>バリアント</span>
+      </div>
+      <div className="space-y-1">
+        {component.variants.map((variant) => (
+          <VariantItem
+            key={variant.id}
+            component={component}
+            variant={variant}
+            isDefault={variant.id === component.defaultVariantId}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default VariantList;

package/src/editor/components/component-panel/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Component Panel exports
+ *
+ * Provides a Figma-like component panel for the frontend editor.
+ */
+
+export { ComponentPanel, default } from './ComponentPanel';
+export { ComponentSearch } from './ComponentSearch';
+export { ComponentGrid } from './ComponentGrid';
+export { ComponentItem } from './ComponentItem';
+export { CategoryAccordion } from './CategoryAccordion';
+export { VariantList } from './VariantList';

package/src/editor/components/index.ts

@@ -0,0 +1,48 @@
+/**
+ * エディタコンポーネントのエクスポート
+ */
+
+export { EditorHeader } from './EditorHeader';
+export { EditorCanvas } from './EditorCanvas';
+export { EditorLayerPanel } from './EditorLayerPanel';
+export { EditorPropertyPanel } from './EditorPropertyPanel';
+export { EditorFooter } from './EditorFooter';
+export { BreakpointSelector } from './BreakpointSelector';
+export { BreakpointGuides } from './BreakpointGuides';
+export { FigmaColorPicker, fillConfigToCss, parseCssToFillConfig } from './FigmaColorPicker';
+export type { FillConfig, FillType, GradientStop } from './FigmaColorPicker';
+export { EditorContextMenu } from './EditorContextMenu';
+export type { ContextMenuPosition, ContextMenuProps } from './EditorContextMenu';
+export { AiPromptPopover } from './AiPromptPopover';
+export type { AiPromptPopoverProps } from './AiPromptPopover';
+export { HtmlEditorDialog } from './HtmlEditorDialog';
+export { HtmlImportDialog } from './HtmlImportDialog';
+export type { HtmlImportDialogProps, HtmlImportResult } from './HtmlImportDialog';
+export { CssEditorDialog } from './CssEditorDialog';
+export type { CssEditorDialogProps } from './CssEditorDialog';
+export { JsEditorDialog } from './JsEditorDialog';
+export type { JsEditorDialogProps } from './JsEditorDialog';
+export { PageSettingsDialog } from './PageSettingsDialog';
+export type { PageSettingsDialogProps } from './PageSettingsDialog';
+export { MediaLibraryDialog } from './MediaLibraryDialog';
+export type { MediaLibraryDialogProps, MediaLibraryMode } from './MediaLibraryDialog';
+export { VariablesDialog } from './VariablesDialog';
+export { VariablePicker, VariableLinkButton } from './VariablePicker';
+export { VariablesPanel } from './variables-panel';
+export { ComponentPanel } from './component-panel';
+export { MasterComponentEditor } from './MasterComponentEditor';
+// 旧サイドバー（互換性のため残す）
+export { EditorSidebar } from './EditorSidebar';
+
+/** @deprecated Use EditorHeader instead */
+export { EditorHeader as SlideEditorHeader } from './EditorHeader';
+/** @deprecated Use EditorCanvas instead */
+export { EditorCanvas as SlideEditorCanvas } from './EditorCanvas';
+/** @deprecated Use EditorLayerPanel instead */
+export { EditorLayerPanel as SlideEditorLayerPanel } from './EditorLayerPanel';
+/** @deprecated Use EditorPropertyPanel instead */
+export { EditorPropertyPanel as SlideEditorPropertyPanel } from './EditorPropertyPanel';
+/** @deprecated Use EditorFooter instead */
+export { EditorFooter as SlideEditorFooter } from './EditorFooter';
+/** @deprecated Use EditorSidebar instead */
+export { EditorSidebar as SlideEditorSidebar } from './EditorSidebar';

package/src/editor/components/multi-page/CanvasZoomControls.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { memo, useCallback, useRef } from 'react';
+import { Minus, Plus, Maximize } from 'lucide-react';
+import { Button } from '../../../components/ui/button';
+import { useMultiPageCanvas } from '../../contexts/MultiPageCanvasContext';
+
+/**
+ * ズームコントロール（右下固定）
+ * - ズームイン/アウトボタン
+ * - ズーム値表示
+ * - フィットボタン (全ページを表示)
+ */
+export const CanvasZoomControls = memo(function CanvasZoomControls() {
+  const { viewState, zoomIn, zoomOut, zoomToFit } = useMultiPageCanvas();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const handleFitToView = useCallback(() => {
+    // 親のInfiniteCanvasコンテナサイズを取得
+    const canvas = containerRef.current?.closest('[data-infinite-canvas]');
+    if (canvas) {
+      const rect = canvas.getBoundingClientRect();
+      zoomToFit(rect.width, rect.height);
+    }
+  }, [zoomToFit]);
+
+  const zoomPercent = Math.round(viewState.canvasZoom * 100);
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute bottom-4 right-4 z-10 flex items-center gap-1 bg-[#2a2a2a] border border-[#404040] rounded-lg px-1 py-1 shadow-lg"
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 w-7 p-0 text-gray-400 hover:text-white hover:bg-[#404040]"
+        onClick={zoomOut}
+        title="ズームアウト"
+      >
+        <Minus className="w-3.5 h-3.5" />
+      </Button>
+
+      <span className="text-xs text-gray-300 min-w-[40px] text-center tabular-nums select-none">
+        {zoomPercent}%
+      </span>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 w-7 p-0 text-gray-400 hover:text-white hover:bg-[#404040]"
+        onClick={zoomIn}
+        title="ズームイン"
+      >
+        <Plus className="w-3.5 h-3.5" />
+      </Button>
+
+      <div className="w-px h-4 bg-[#404040] mx-0.5" />
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 w-7 p-0 text-gray-400 hover:text-white hover:bg-[#404040]"
+        onClick={handleFitToView}
+        title="全体にフィット (Ctrl+0)"
+      >
+        <Maximize className="w-3.5 h-3.5" />
+      </Button>
+    </div>
+  );
+});

package/src/editor/components/multi-page/InfiniteCanvas.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { memo, useRef, useEffect, useCallback } from 'react';
+import { useMultiPageCanvas } from '../../contexts/MultiPageCanvasContext';
+import { useInfiniteCanvas } from '../../hooks/useInfiniteCanvas';
+import { PageFrameOverlay } from './PageFrameOverlay';
+import { CanvasZoomControls } from './CanvasZoomControls';
+
+/**
+ * InfiniteCanvas: 無限キャンバスコンテナ（レガシー）
+ *
+ * 全ページをフレームとして表示し、CSS transformでズーム/パンを実現。
+ * Note: マルチページ統合ビューはMultiPageCanvasViewを使用。
+ * このコンポーネントはサムネイル表示のみ（編集iframe含まず）。
+ */
+export const InfiniteCanvas = memo(function InfiniteCanvas() {
+  const {
+    viewState,
+    pages,
+    switchPage,
+    zoomToFit,
+  } = useMultiPageCanvas();
+  const { canvasOffset, canvasZoom, activePageId } = viewState;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 無限キャンバスのズーム/パン操作
+  useInfiniteCanvas(containerRef);
+
+  // 初回表示時にフィットズーム
+  const hasInitialFitRef = useRef(false);
+  useEffect(() => {
+    if (hasInitialFitRef.current || pages.length === 0) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const timer = setTimeout(() => {
+      const rect = container.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) {
+        zoomToFit(rect.width, rect.height);
+        hasInitialFitRef.current = true;
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [pages.length, zoomToFit]);
+
+  const handlePageClick = useCallback((pageId: string) => {
+    switchPage(pageId);
+  }, [switchPage]);
+
+  return (
+    <div
+      ref={containerRef}
+      data-infinite-canvas="true"
+      className="absolute inset-0 overflow-hidden select-none"
+      style={{ backgroundColor: '#1a1a1a' }}
+    >
+      {/* ドットグリッド背景 */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px)`,
+          backgroundSize: `${24 * canvasZoom}px ${24 * canvasZoom}px`,
+          backgroundPosition: `${canvasOffset.x % (24 * canvasZoom)}px ${canvasOffset.y % (24 * canvasZoom)}px`,
+        }}
+      />
+
+      {/* CSS transform による無限キャンバス */}
+      <div
+        className="canvas-transform-layer"
+        style={{
+          transform: `translate(${canvasOffset.x}px, ${canvasOffset.y}px) scale(${canvasZoom})`,
+          transformOrigin: '0 0',
+          willChange: 'transform',
+        }}
+      >
+        {pages.map(page => (
+          <PageFrameOverlay
+            key={page.id}
+            page={page}
+            isActive={page.id === activePageId}
+            onClick={handlePageClick}
+          />
+        ))}
+      </div>
+
+      {/* ズームコントロール */}
+      <CanvasZoomControls />
+
+      {/* ページ数表示 */}
+      <div className="absolute top-4 left-4 z-10 text-xs text-gray-500 select-none">
+        {pages.length} pages
+      </div>
+    </div>
+  );
+});