@growgroup/visual-editor 0.1.0

package/src/editor/components/property-panel/FillSection.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Button } from '../../../components/ui/button';
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../../../components/ui/collapsible';
+import { Palette, ChevronRight, EyeOff } from 'lucide-react';
+import { rgbToHex } from '../../utils/style-utils';
+import type { SelectedElementInfo } from '../../types';
+
+interface FillSectionProps {
+  selectedElement: SelectedElementInfo;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onStyleChange: (styles: Record<string, string>) => void;
+}
+
+export function FillSection({
+  selectedElement,
+  open,
+  onOpenChange,
+  onStyleChange,
+}: FillSectionProps) {
+  return (
+    <Collapsible open={open} onOpenChange={onOpenChange}>
+      <CollapsibleTrigger className="flex items-center justify-between w-full py-2 text-xs font-medium text-gray-300 hover:text-white border-t border-[#444444]">
+        <span className="flex items-center gap-2">
+          <Palette className="w-3.5 h-3.5" />
+          塗り
+        </span>
+        <ChevronRight
+          className={`w-3.5 h-3.5 transition-transform ${open ? 'rotate-90' : ''}`}
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent className="space-y-2 pb-3">
+        <div>
+          <Label className="text-[10px] text-gray-500">背景色</Label>
+          <div className="flex items-center gap-2 mt-1">
+            <input
+              type="color"
+              value={rgbToHex(selectedElement.backgroundColor)}
+              onChange={(e) => onStyleChange({ backgroundColor: e.target.value })}
+              className="w-8 h-7 rounded border border-[#444444] bg-transparent cursor-pointer"
+            />
+            <Input
+              type="text"
+              value={rgbToHex(selectedElement.backgroundColor)}
+              onChange={(e) => onStyleChange({ backgroundColor: e.target.value })}
+              className="flex-1 h-7 text-xs bg-[#383838] border-[#444444] text-white font-mono"
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => onStyleChange({ backgroundColor: 'transparent' })}
+              className="h-7 w-7 text-gray-400 hover:text-white hover:bg-[#4a4a4a]"
+              title="透明にする"
+            >
+              <EyeOff className="w-3.5 h-3.5" />
+            </Button>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/editor/components/property-panel/GoogleFontPicker.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Input } from '../../../components/ui/input';
+import { Button } from '../../../components/ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../../../components/ui/popover';
+import { ScrollArea } from '../../../components/ui/scroll-area';
+import { ChevronDown, Search, Check, Loader2 } from 'lucide-react';
+import {
+  useGoogleFonts,
+  useFilteredFonts,
+  FONT_CATEGORIES,
+  type FontCategory,
+  type GoogleFont,
+} from '../../hooks/useGoogleFonts';
+
+interface GoogleFontPickerProps {
+  value: string;
+  onChange: (fontFamily: string) => void;
+  iframeDoc?: Document | null;
+  className?: string;
+}
+
+/**
+ * Google Fontsフォントピッカー
+ * 検索、カテゴリフィルター、プレビュー付きのフォント選択コンポーネント
+ */
+export function GoogleFontPicker({
+  value,
+  onChange,
+  iframeDoc,
+  className = '',
+}: GoogleFontPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [category, setCategory] = useState<FontCategory>('all');
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const { fonts, isLoading, loadFontInIframe, getFontPreviewStyle } = useGoogleFonts();
+  const filteredFonts = useFilteredFonts(fonts, searchQuery, category);
+
+  // ポップオーバーが開いたら検索フィールドにフォーカス
+  useEffect(() => {
+    if (open && searchInputRef.current) {
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 100);
+    }
+  }, [open]);
+
+  // フォント選択ハンドラー
+  const handleSelectFont = useCallback((font: GoogleFont) => {
+    // デバイスフォントはOSで名前が違うので、スタックごと書き込む
+    onChange(font.stack ?? font.family);
+
+    // iframeにフォントをロード
+    if (iframeDoc) {
+      loadFontInIframe(font.family, iframeDoc, font.variants);
+    }
+
+    setOpen(false);
+    setSearchQuery('');
+  }, [onChange, iframeDoc, loadFontInIframe]);
+
+  // プレビュー用にフォントをロード（ホバー時）
+  const handleFontHover = useCallback((font: GoogleFont) => {
+    // プレビュー用のlinkタグをメインドキュメントに追加
+    const existingLink = document.querySelector(`link[data-font-preview="${font.family}"]`);
+    if (existingLink) return;
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(font.family)}:wght@400&display=swap`;
+    link.dataset.fontPreview = font.family;
+    document.head.appendChild(link);
+  }, []);
+
+  // 表示する現在のフォント名
+  const displayValue = value || 'フォントを選択';
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={`h-7 justify-between text-xs bg-[#383838] border-[#444444] text-white hover:bg-[#4c4c4c] hover:text-white ${className}`}
+        >
+          <span
+            className="truncate"
+            style={{
+              // スタック(カンマ入り)が入っているときは二重引用しない
+              fontFamily: value ? (value.includes(',') ? value : `"${value}", sans-serif`) : 'inherit',
+            }}
+          >
+            {displayValue}
+          </span>
+          <ChevronDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-72 p-0 bg-[#2c2c2c] border-[#444444]"
+        align="start"
+      >
+        {/* 検索フィールド */}
+        <div className="p-2 border-b border-[#444444]">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-500" />
+            <Input
+              ref={searchInputRef}
+              placeholder="フォントを検索..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="h-7 pl-8 text-xs bg-[#383838] border-[#444444] text-white"
+            />
+          </div>
+        </div>
+
+        {/* カテゴリタブ */}
+        <div className="flex gap-1 p-2 border-b border-[#444444] overflow-x-auto">
+          {FONT_CATEGORIES.map((cat) => (
+            <Button
+              key={cat.value}
+              variant="ghost"
+              size="sm"
+              onClick={() => setCategory(cat.value)}
+              className={`h-6 px-2 text-[10px] whitespace-nowrap ${
+                category === cat.value
+                  ? 'bg-[#0d99ff] text-white hover:bg-[#0c8ce9]'
+                  : 'text-gray-400 hover:text-white hover:bg-[#383838]'
+              }`}
+            >
+              {cat.label}
+            </Button>
+          ))}
+        </div>
+
+        {/* フォントリスト */}
+        <ScrollArea className="h-64">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-32">
+              <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
+            </div>
+          ) : filteredFonts.length === 0 ? (
+            <div className="flex items-center justify-center h-32 text-xs text-gray-500">
+              フォントが見つかりません
+            </div>
+          ) : (
+            <div className="p-1">
+              {filteredFonts.map((font) => (
+                <button
+                  key={font.family}
+                  onClick={() => handleSelectFont(font)}
+                  onMouseEnter={() => handleFontHover(font)}
+                  className={`w-full flex items-center justify-between px-2 py-1.5 text-xs rounded transition-colors ${
+                    value === font.family
+                      ? 'bg-[#0d99ff] text-white'
+                      : 'text-gray-300 hover:bg-[#383838] hover:text-white'
+                  }`}
+                >
+                  <span
+                    className="truncate"
+                    style={getFontPreviewStyle(font.family)}
+                  >
+                    {font.family}
+                  </span>
+                  {value === font.family && (
+                    <Check className="h-3.5 w-3.5 shrink-0 ml-2" />
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+
+        {/* フッター情報 */}
+        <div className="p-2 border-t border-[#444444]">
+          <p className="text-[10px] text-gray-500 text-center">
+            {filteredFonts.length}件のフォント
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default GoogleFontPicker;

package/src/editor/components/property-panel/ImageSection.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { Button } from '../../../components/ui/button';
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import { Slider } from '../../../components/ui/slider';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../../components/ui/select';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../../../components/ui/collapsible';
+import { Image, ChevronRight, Upload, Trash2 } from 'lucide-react';
+import { IMAGE_FILL_MODES } from '../../constants';
+import {
+  getBackgroundSizeFromFillMode,
+  getBackgroundRepeatFromFillMode,
+} from '../../utils/style-utils';
+import type { SelectedElementInfo, ImageFillMode } from '../../types';
+
+interface ImageSectionProps {
+  selectedElement: SelectedElementInfo;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onStyleChange: (styles: Record<string, string>) => void;
+}
+
+export function ImageSection({
+  selectedElement,
+  open,
+  onOpenChange,
+  onStyleChange,
+}: ImageSectionProps) {
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const dataUrl = event.target?.result as string;
+      onStyleChange({
+        backgroundImage: `url(${dataUrl})`,
+        backgroundSize: getBackgroundSizeFromFillMode(selectedElement.imageFillMode),
+        backgroundPosition: `${selectedElement.imagePositionX}% ${selectedElement.imagePositionY}%`,
+        backgroundRepeat: getBackgroundRepeatFromFillMode(selectedElement.imageFillMode),
+      });
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleClearImage = () => {
+    onStyleChange({
+      backgroundImage: 'none',
+      backgroundSize: 'auto',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+    });
+  };
+
+  const handleFillModeChange = (value: ImageFillMode) => {
+    onStyleChange({
+      backgroundSize: getBackgroundSizeFromFillMode(value),
+      backgroundRepeat: getBackgroundRepeatFromFillMode(value),
+    });
+  };
+
+  return (
+    <Collapsible open={open} onOpenChange={onOpenChange}>
+      <CollapsibleTrigger className="flex items-center justify-between w-full py-2 text-xs font-medium text-gray-300 hover:text-white border-t border-[#444444]">
+        <span className="flex items-center gap-2">
+          <Image className="w-3.5 h-3.5" />
+          画像
+        </span>
+        <ChevronRight
+          className={`w-3.5 h-3.5 transition-transform ${open ? 'rotate-90' : ''}`}
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent className="space-y-2 pb-3">
+        {/* 画像アップロード */}
+        <div>
+          <Label className="text-[10px] text-gray-500">背景画像</Label>
+          <div className="flex items-center gap-2 mt-1">
+            <label className="flex-1 flex items-center justify-center gap-2 h-7 text-xs bg-[#383838] border border-[#444444] text-white rounded cursor-pointer hover:bg-[#4a4a4a]">
+              <Upload className="h-3 w-3" />
+              画像を選択
+              <input
+                type="file"
+                accept="image/*"
+                onChange={handleImageUpload}
+                className="hidden"
+              />
+            </label>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 hover:bg-[#4a4a4a]"
+              onClick={handleClearImage}
+            >
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+
+        {/* フィルモード選択 */}
+        {selectedElement.hasBackgroundImage && (
+          <>
+            <div>
+              <Label className="text-[10px] text-gray-500">フィルモード</Label>
+              <Select
+                value={selectedElement.imageFillMode}
+                onValueChange={handleFillModeChange}
+              >
+                <SelectTrigger className="h-7 text-xs bg-[#383838] border-[#444444] text-white">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {IMAGE_FILL_MODES.map((mode) => (
+                    <SelectItem key={mode.value} value={mode.value}>
+                      {mode.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 位置調整（タイルモード以外） */}
+            {selectedElement.imageFillMode !== 'tile' && (
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <Label className="text-[10px] text-gray-500">X位置</Label>
+                  <div className="flex items-center gap-2">
+                    <Slider
+                      value={[selectedElement.imagePositionX]}
+                      onValueChange={([value]) => {
+                        onStyleChange({
+                          backgroundPosition: `${value}% ${selectedElement.imagePositionY}%`,
+                        });
+                      }}
+                      min={0}
+                      max={100}
+                      step={1}
+                      className="flex-1"
+                    />
+                    <span className="text-xs text-gray-400 w-8">
+                      {selectedElement.imagePositionX}%
+                    </span>
+                  </div>
+                </div>
+                <div>
+                  <Label className="text-[10px] text-gray-500">Y位置</Label>
+                  <div className="flex items-center gap-2">
+                    <Slider
+                      value={[selectedElement.imagePositionY]}
+                      onValueChange={([value]) => {
+                        onStyleChange({
+                          backgroundPosition: `${selectedElement.imagePositionX}% ${value}%`,
+                        });
+                      }}
+                      min={0}
+                      max={100}
+                      step={1}
+                      className="flex-1"
+                    />
+                    <span className="text-xs text-gray-400 w-8">
+                      {selectedElement.imagePositionY}%
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* スケール（タイルモードのみ） */}
+            {selectedElement.imageFillMode === 'tile' && (
+              <div>
+                <Label className="text-[10px] text-gray-500">スケール</Label>
+                <div className="flex items-center gap-2">
+                  <Slider
+                    value={[selectedElement.imageScale]}
+                    onValueChange={([value]) => {
+                      onStyleChange({
+                        backgroundSize: `${value}%`,
+                      });
+                    }}
+                    min={10}
+                    max={200}
+                    step={1}
+                    className="flex-1"
+                  />
+                  <span className="text-xs text-gray-400 w-10">
+                    {selectedElement.imageScale}%
+                  </span>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/editor/components/property-panel/ImgSrcSection.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useRef, useState } from 'react';
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../../../components/ui/collapsible';
+import { Image as ImageIcon, ChevronRight, Upload } from 'lucide-react';
+import { uploadEditorImage } from '../../../lib/firebase/storage';
+import type { SelectedElementInfo } from '../../types';
+
+interface ImgSrcSectionProps {
+  selectedElement: SelectedElementInfo;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAttributeChange: (attrs: Record<string, string>) => void;
+  /** 選択中要素の現在のsrc(iframeから取得済みのもの) */
+  currentSrc?: string;
+}
+
+/**
+ * [移植時の追加] <img> 要素の src を差し替えるセクション。
+ * ファイル選択でアップロード(public/media/uploads/ に実ファイル保存)するか、
+ * URLを直接指定できる。既存の ImageSection は「背景画像」用で <img> は扱えなかった。
+ */
+export function ImgSrcSection({
+  selectedElement,
+  open,
+  onOpenChange,
+  onAttributeChange,
+  currentSrc = '',
+}: ImgSrcSectionProps) {
+  const [urlValue, setUrlValue] = useState(currentSrc);
+  const [uploading, setUploading] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  // 選択要素が変わったとき / メディアライブラリなど外部から src が差し替わったときに追従する
+  // （ローカルstateのままだとプレビューとURL欄が古い画像を指し続ける）
+  useEffect(() => {
+    setUrlValue(currentSrc);
+  }, [currentSrc, selectedElement.id]);
+
+  if (selectedElement.tagName?.toUpperCase() !== 'IMG') return null;
+
+  const applySrc = (src: string) => {
+    if (!src) return;
+    onAttributeChange({ src });
+    setUrlValue(src);
+  };
+
+  const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    try {
+      const { storageUrl } = await uploadEditorImage(file, { fileName: file.name });
+      applySrc(storageUrl);
+    } catch (err) {
+      console.error('[ImgSrcSection] 画像の差し替えに失敗:', err);
+      alert(`画像の差し替えに失敗しました: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setUploading(false);
+      if (fileRef.current) fileRef.current.value = '';
+    }
+  };
+
+  return (
+    <Collapsible open={open} onOpenChange={onOpenChange}>
+      <CollapsibleTrigger className="flex items-center justify-between w-full py-2 text-xs font-medium text-gray-300 hover:text-white border-t border-[#444444]">
+        <span className="flex items-center gap-2">
+          <ImageIcon className="w-3.5 h-3.5" />
+          画像の差し替え
+        </span>
+        <ChevronRight
+          className={`w-3.5 h-3.5 transition-transform ${open ? 'rotate-90' : ''}`}
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent className="space-y-2 pb-3">
+        {/* プレビュー */}
+        {urlValue && (
+          <div className="flex items-center justify-center rounded border border-[#444444] bg-[#2c2c2c] p-2">
+            <img
+              src={urlValue}
+              alt=""
+              className="max-h-24 max-w-full object-contain"
+            />
+          </div>
+        )}
+
+        {/* ファイル選択 */}
+        <div>
+          <Label className="text-[10px] text-gray-500">ファイルから差し替え</Label>
+          <label className="mt-1 flex h-7 cursor-pointer items-center justify-center gap-2 rounded border border-[#444444] bg-[#383838] text-xs text-white hover:bg-[#4a4a4a]">
+            <Upload className="h-3 w-3" />
+            {uploading ? 'アップロード中…' : '画像を選択'}
+            <input
+              ref={fileRef}
+              type="file"
+              accept="image/*"
+              onChange={handleFile}
+              className="hidden"
+              disabled={uploading}
+            />
+          </label>
+        </div>
+
+        {/* URL直接指定 */}
+        <div>
+          <Label className="text-[10px] text-gray-500">画像のURL / パス</Label>
+          <Input
+            value={urlValue}
+            onChange={(e) => setUrlValue(e.target.value)}
+            onBlur={() => applySrc(urlValue)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') applySrc(urlValue);
+            }}
+            placeholder="/media/xxx.png"
+            className="mt-1 h-7 border-[#444444] bg-[#383838] text-xs text-white"
+          />
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}