@growgroup/visual-editor 0.1.0

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

@@ -0,0 +1,104 @@
+'use client';
+
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../../components/ui/select';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../../../components/ui/collapsible';
+import { Circle, ChevronRight } from 'lucide-react';
+import { rgbToHex } from '../../utils/style-utils';
+import { BORDER_STYLES } from '../../constants';
+import type { SelectedElementInfo } from '../../types';
+
+interface BorderSectionProps {
+  selectedElement: SelectedElementInfo;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onStyleChange: (styles: Record<string, string>) => void;
+}
+
+export function BorderSection({
+  selectedElement,
+  open,
+  onOpenChange,
+  onStyleChange,
+}: BorderSectionProps) {
+  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">
+          <Circle 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 className="grid grid-cols-2 gap-2">
+          <div>
+            <Label className="text-[10px] text-gray-500">線幅</Label>
+            <Input
+              type="number"
+              value={Math.round(selectedElement.borderWidth)}
+              onChange={(e) =>
+                onStyleChange({
+                  borderWidth: `${e.target.value}px`,
+                  borderStyle:
+                    selectedElement.borderStyle === 'none'
+                      ? 'solid'
+                      : selectedElement.borderStyle,
+                })
+              }
+              className="h-7 text-xs bg-[#383838] border-[#444444] text-white"
+            />
+          </div>
+          <div>
+            <Label className="text-[10px] text-gray-500">スタイル</Label>
+            <Select
+              value={selectedElement.borderStyle}
+              onValueChange={(value) => onStyleChange({ borderStyle: value })}
+            >
+              <SelectTrigger className="h-7 text-xs bg-[#383838] border-[#444444] text-white">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {BORDER_STYLES.map((style) => (
+                  <SelectItem key={style.value} value={style.value}>
+                    {style.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div>
+          <Label className="text-[10px] text-gray-500">線色</Label>
+          <div className="flex items-center gap-2 mt-1">
+            <input
+              type="color"
+              value={rgbToHex(selectedElement.borderColor)}
+              onChange={(e) => onStyleChange({ borderColor: e.target.value })}
+              className="w-8 h-7 rounded border border-[#444444] bg-transparent cursor-pointer"
+            />
+            <Input
+              type="text"
+              value={rgbToHex(selectedElement.borderColor)}
+              onChange={(e) => onStyleChange({ borderColor: e.target.value })}
+              className="flex-1 h-7 text-xs bg-[#383838] border-[#444444] text-white font-mono"
+            />
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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

@@ -0,0 +1,237 @@
+"use client";
+
+/**
+ * CompactNumberInput - Figmaライクな数値入力コンポーネント
+ *
+ * 特徴:
+ * - コンパクトなサイズでオーバーフローしない
+ * - 空値も許容（削除可能）
+ * - フォーカス時のみ編集可能、非フォーカス時は値表示
+ * - 上下矢印キーで値を増減
+ */
+
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { cn } from "../../../lib/utils";
+
+interface CompactNumberInputProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  suffix?: string;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function CompactNumberInput({
+  value,
+  onChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  suffix,
+  placeholder = "0",
+  className,
+  disabled = false,
+}: CompactNumberInputProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [inputValue, setInputValue] = useState(String(value));
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const isScrubbing = useRef(false);
+  const hasMoved = useRef(false);
+  const startX = useRef(0);
+  const startValue = useRef(0);
+
+  // 外部値が変更されたら入力値を更新
+  useEffect(() => {
+    if (!isEditing && !isScrubbing.current) {
+      setInputValue(String(value));
+    }
+  }, [value, isEditing]);
+
+  // 値をクランプして変更を通知
+  const commitValue = useCallback(
+    (val: string) => {
+      const parsed = parseFloat(val);
+      if (isNaN(parsed)) {
+        // 空の場合は0にリセット
+        onChange(0);
+        setInputValue("0");
+      } else {
+        const clamped = Math.max(min, Math.min(max, parsed));
+        onChange(clamped);
+        setInputValue(String(clamped));
+      }
+    },
+    [onChange, min, max],
+  );
+
+  const handleFocus = () => {
+    if (isScrubbing.current) return;
+    setIsEditing(true);
+    setInputValue(String(value));
+    // 全選択
+    setTimeout(() => {
+      inputRef.current?.select();
+    }, 0);
+  };
+
+  const handleBlur = () => {
+    if (isScrubbing.current) return;
+    setIsEditing(false);
+    commitValue(inputValue);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    // 数値、マイナス、小数点のみ許可
+    if (val === "" || val === "-" || /^-?\d*\.?\d*$/.test(val)) {
+      setInputValue(val);
+      // 有効な数値ならリアルタイムで反映
+      const parsed = parseFloat(val);
+      if (!isNaN(parsed)) {
+        const clamped = Math.max(min, Math.min(max, parsed));
+        onChange(clamped);
+      }
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      commitValue(inputValue);
+      inputRef.current?.blur();
+    } else if (e.key === "Escape") {
+      setInputValue(String(value));
+      inputRef.current?.blur();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const amount = e.shiftKey ? step * 10 : step;
+      const newVal = (parseFloat(inputValue) || 0) + amount;
+      const clamped = Math.max(min, Math.min(max, newVal));
+      setInputValue(String(clamped));
+      onChange(clamped);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const amount = e.shiftKey ? step * 10 : step;
+      const newVal = (parseFloat(inputValue) || 0) - amount;
+      const clamped = Math.max(min, Math.min(max, newVal));
+      setInputValue(String(clamped));
+      onChange(clamped);
+    }
+  };
+
+  // スクラブ操作のハンドラ
+  const handleMouseDown = (e: React.MouseEvent) => {
+    // 入力中はスクラブさせない
+    if (isEditing) return;
+
+    e.preventDefault();
+    isScrubbing.current = true;
+    hasMoved.current = false;
+    startX.current = e.clientX;
+    startValue.current = value;
+
+    document.body.style.cursor = "ew-resize";
+
+    const handleMouseMove = (mmEvent: MouseEvent) => {
+      if (!isScrubbing.current) return;
+
+      const delta = mmEvent.clientX - startX.current;
+      // 小さな移動は無視（クリック判定のため）
+      if (Math.abs(delta) < 3) return;
+
+      hasMoved.current = true;
+
+      // Shiftキーで10倍、Altキーで0.1倍
+      let multiplier = 1;
+      if (mmEvent.shiftKey) multiplier = 10;
+      if (mmEvent.altKey) multiplier = 0.1;
+
+      const change = Math.round(delta * step * multiplier);
+      const newVal = startValue.current + change;
+      const clamped = Math.max(min, Math.min(max, newVal));
+
+      setInputValue(String(clamped));
+      onChange(clamped);
+    };
+
+    const handleMouseUp = () => {
+      const didMove = hasMoved.current;
+      isScrubbing.current = false;
+      hasMoved.current = false;
+      document.body.style.cursor = "";
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+
+      // ドラッグしていなければ編集モードに入る（クリック扱い）
+      if (!didMove) {
+        setIsEditing(true);
+        setInputValue(String(value));
+        setTimeout(() => {
+          inputRef.current?.focus();
+          inputRef.current?.select();
+        }, 0);
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+
+  // ダブルクリックで編集モードに入る
+  const handleDoubleClick = (e: React.MouseEvent) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsEditing(true);
+    setInputValue(String(value));
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }, 0);
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative flex items-center bg-[#383838] rounded border border-[#444444] h-5 group",
+        disabled && "opacity-50 cursor-not-allowed",
+        !isEditing && !disabled && "cursor-ew-resize hover:border-[#555]",
+        className,
+      )}
+      onMouseDown={!disabled ? handleMouseDown : undefined}
+      onDoubleClick={!disabled ? handleDoubleClick : undefined}
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        inputMode="numeric"
+        value={inputValue}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        className={cn(
+          "w-full h-full bg-transparent text-white text-center text-[10px] px-1 outline-none",
+          "focus:ring-1 focus:ring-[#0d99ff] rounded",
+          !isEditing &&
+            !disabled &&
+            "cursor-ew-resize selection:bg-transparent", // スクラブ中はカーソル変更＆選択無効
+          suffix && "pr-4",
+        )}
+      />
+      {suffix && (
+        <span className="absolute right-1 text-[9px] text-gray-500 pointer-events-none">
+          {suffix}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default CompactNumberInput;

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

@@ -0,0 +1,148 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from '../../../components/ui/dropdown-menu';
+import { CompactNumberInput } from './CompactNumberInput';
+
+export type SizeMode = 'fixed' | 'fill' | 'hug';
+
+interface CompactSizeInputProps {
+  value: number;
+  mode: SizeMode;
+  onChangeValue: (value: number) => void;
+  onChangeMode: (mode: SizeMode) => void;
+  label?: React.ReactNode; // W or H label component
+  disabled?: boolean;
+  min?: number;
+  max?: number;
+  canFill?: boolean; // "Fill container" is available
+  canHug?: boolean;  // "Hug contents" is available
+}
+
+export function CompactSizeInput({
+  value,
+  mode,
+  onChangeValue,
+  onChangeMode,
+  label,
+  disabled = false,
+  min = 0,
+  max,
+  canFill = false,
+  canHug = false,
+}: CompactSizeInputProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // 表示するコンテンツの決定
+  const renderContent = () => {
+    if (mode === 'fixed') {
+      return (
+        <CompactNumberInput
+          value={value}
+          onChange={onChangeValue}
+          min={min}
+          max={max}
+          className="flex-1 border-0 bg-transparent h-full"
+          disabled={disabled}
+        />
+      );
+    } else if (mode === 'fill') {
+      return (
+        <span className="flex-1 text-[9px] text-gray-400 px-1 truncate select-none flex items-center">
+          コンテナに合わせて拡大
+        </span>
+      );
+    } else if (mode === 'hug') {
+      return (
+        <span className="flex-1 text-[9px] text-gray-400 px-1 truncate select-none flex items-center">
+          コンテンツを内包
+        </span>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="flex items-center gap-1 group/size-input">
+      {/* Label area (W/H) */}
+      {label && <div className="shrink-0">{label}</div>}
+
+      {/* Input / Display area + Dropdown trigger */}
+      <div 
+        className={cn(
+          "flex-1 flex items-center h-7 bg-[#383838] border border-[#444444] rounded relative",
+          disabled && "opacity-50 cursor-not-allowed",
+          isOpen && "ring-1 ring-[#0d99ff] border-[#0d99ff]"
+        )}
+      >
+        {/* Main Content */}
+        <div className="flex-1 min-w-0 h-full flex flex-col justify-center">
+          {renderContent()}
+        </div>
+
+        {/* Dropdown Trigger */}
+        <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+          <DropdownMenuTrigger asChild disabled={disabled}>
+            <button 
+              className={cn(
+                "h-full px-1 flex items-center justify-center text-gray-500 hover:text-white transition-colors focus:outline-none",
+                // Fixedモードの時はホバー時のみ表示、それ以外は常時表示っぽく見せるが、
+                // デザイン的には右端に常に矢印があったほうがわかりやすいかも
+              )}
+            >
+              <ChevronDown className="h-3 w-3" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48 bg-[#2c2c2c] border-[#444444] text-white">
+            <DropdownMenuLabel className="text-[10px] text-gray-500 font-normal">
+              リサイズ戦略
+            </DropdownMenuLabel>
+            
+            <DropdownMenuSeparator className="bg-[#444444]" />
+
+            <DropdownMenuItem 
+              className="text-xs focus:bg-[#383838] focus:text-white cursor-pointer flex justify-between"
+              onClick={() => onChangeMode('fixed')}
+            >
+              <span>幅を固定 (Fixed)</span>
+              {mode === 'fixed' && <span className="text-[#4fb8ff]">✓</span>}
+            </DropdownMenuItem>
+
+            <DropdownMenuItem 
+              className={cn(
+                "text-xs focus:bg-[#383838] focus:text-white cursor-pointer flex justify-between",
+                !canFill && "opacity-50 cursor-not-allowed text-gray-500"
+              )}
+              disabled={!canFill}
+              onClick={() => canFill && onChangeMode('fill')}
+            >
+              <span>コンテナに合わせて拡大 (Fill)</span>
+              {mode === 'fill' && <span className="text-[#4fb8ff]">✓</span>}
+            </DropdownMenuItem>
+
+            <DropdownMenuItem 
+              className={cn(
+                "text-xs focus:bg-[#383838] focus:text-white cursor-pointer flex justify-between",
+                !canHug && "opacity-50 cursor-not-allowed text-gray-500"
+              )}
+              disabled={!canHug}
+              onClick={() => canHug && onChangeMode('hug')}
+            >
+              <span>コンテンツを内包 (Hug)</span>
+              {mode === 'hug' && <span className="text-[#4fb8ff]">✓</span>}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,157 @@
+'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 { Circle, ChevronRight } from 'lucide-react';
+import { buildBoxShadow } from '../../utils/style-utils';
+import { DEFAULT_SHADOW } from '../../constants';
+import type { SelectedElementInfo } from '../../types';
+
+interface EffectSectionProps {
+  selectedElement: SelectedElementInfo;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onStyleChange: (styles: Record<string, string>) => void;
+}
+
+export function EffectSection({
+  selectedElement,
+  open,
+  onOpenChange,
+  onStyleChange,
+}: EffectSectionProps) {
+  const toggleShadow = () => {
+    if (selectedElement.hasShadow) {
+      onStyleChange({ boxShadow: 'none' });
+    } else {
+      onStyleChange({
+        boxShadow: buildBoxShadow(
+          DEFAULT_SHADOW.color,
+          DEFAULT_SHADOW.x,
+          DEFAULT_SHADOW.y,
+          DEFAULT_SHADOW.blur,
+          DEFAULT_SHADOW.spread
+        ),
+      });
+    }
+  };
+
+  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">
+          <Circle 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>
+          <div className="flex items-center justify-between">
+            <Label className="text-[10px] text-gray-500">ドロップシャドウ</Label>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={toggleShadow}
+              className="h-5 text-[10px] text-gray-400 hover:text-white"
+            >
+              {selectedElement.hasShadow ? '削除' : '追加'}
+            </Button>
+          </div>
+          {selectedElement.hasShadow && (
+            <div className="space-y-2 mt-2">
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <Label className="text-[10px] text-gray-500">X</Label>
+                  <Input
+                    type="number"
+                    value={selectedElement.shadowX}
+                    onChange={(e) => {
+                      onStyleChange({
+                        boxShadow: buildBoxShadow(
+                          selectedElement.shadowColor,
+                          parseInt(e.target.value) || 0,
+                          selectedElement.shadowY,
+                          selectedElement.shadowBlur,
+                          selectedElement.shadowSpread
+                        ),
+                      });
+                    }}
+                    className="h-7 text-xs bg-[#383838] border-[#444444] text-white"
+                  />
+                </div>
+                <div>
+                  <Label className="text-[10px] text-gray-500">Y</Label>
+                  <Input
+                    type="number"
+                    value={selectedElement.shadowY}
+                    onChange={(e) => {
+                      onStyleChange({
+                        boxShadow: buildBoxShadow(
+                          selectedElement.shadowColor,
+                          selectedElement.shadowX,
+                          parseInt(e.target.value) || 0,
+                          selectedElement.shadowBlur,
+                          selectedElement.shadowSpread
+                        ),
+                      });
+                    }}
+                    className="h-7 text-xs bg-[#383838] border-[#444444] text-white"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <Label className="text-[10px] text-gray-500">ぼかし</Label>
+                  <Input
+                    type="number"
+                    value={selectedElement.shadowBlur}
+                    onChange={(e) => {
+                      onStyleChange({
+                        boxShadow: buildBoxShadow(
+                          selectedElement.shadowColor,
+                          selectedElement.shadowX,
+                          selectedElement.shadowY,
+                          parseInt(e.target.value) || 0,
+                          selectedElement.shadowSpread
+                        ),
+                      });
+                    }}
+                    className="h-7 text-xs bg-[#383838] border-[#444444] text-white"
+                  />
+                </div>
+                <div>
+                  <Label className="text-[10px] text-gray-500">広がり</Label>
+                  <Input
+                    type="number"
+                    value={selectedElement.shadowSpread}
+                    onChange={(e) => {
+                      onStyleChange({
+                        boxShadow: buildBoxShadow(
+                          selectedElement.shadowColor,
+                          selectedElement.shadowX,
+                          selectedElement.shadowY,
+                          selectedElement.shadowBlur,
+                          parseInt(e.target.value) || 0
+                        ),
+                      });
+                    }}
+                    className="h-7 text-xs bg-[#383838] border-[#444444] text-white"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}