@growgroup/visual-editor 0.1.0

package/src/editor/components/shell/PagesPanel.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+/**
+ * Figma風UIの左パネル上段: プレビュー付きのページ切替。
+ *
+ * レイヤーツリーだけの左パネルでは「今どのページを触っているのか」「隣に何があるのか」が
+ * 分からず、ページを移るのに一覧まで戻る必要があった。
+ * PowerPoint風UIのサムネイルレール(PptThumbnails)と同じ考え方で、
+ * デッキ(useDeck)の中身を DeckSlideRender で縮小描画する。
+ *
+ * 並べ替え・複製・削除まではここに載せない(PowerPoint風UIのレールが持つ)。
+ * ここが担うのは「今のページの把握」と「ページの切替」だけ。
+ */
+
+import { memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useDeck } from '../../../components/viewer/useDeck';
+import { DeckSlideRender } from '../../../components/DeckSlideRender';
+import { flushAutoSave } from '../../autosave';
+
+/**
+ * スライド描画はメモ化する。パネル幅の変更や他ページの選択で親が再レンダーしても、
+ * (page, template, edited) が同じReactツリーを組み直さないため
+ */
+const MemoSlideRender = memo(DeckSlideRender);
+
+/** 行の内訳: 左右padding(8+8) + 番号列(16) + 間隔(6)。残りがサムネイルの実効幅 */
+const ROW_CHROME_PX = 8 + 8 + 16 + 6;
+
+export function PagesPanel({ page, height = '33vh' }: { page: number; height?: string }) {
+  const deck = useDeck();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const currentRef = useRef<HTMLButtonElement>(null);
+  /**
+   * サムネイルの実効幅。左パネルは幅を変えられるので、
+   * 固定値で縮小すると幅を変えるたびに右と下へ隙間が出る。実測してから縮小率を決める
+   */
+  const [thumbWidth, setThumbWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    // プレビューはパネル幅いっぱいだと大きすぎる。上限を設けて余白はページ番号側に
+    const measure = () => setThumbWidth(Math.min(128, Math.max(0, el.clientWidth - ROW_CHROME_PX)));
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  // 編集中のページが視界の外にあると「今どこか」が分からないので追う
+  useEffect(() => {
+    currentRef.current?.scrollIntoView({ block: 'nearest' });
+  }, [page, deck.slides.length]);
+
+  /** ページ切替。未保存があれば黙って保存してから移る(失敗したときだけ確認する) */
+  const goto = async (n: number) => {
+    if (n === page) return;
+    if (!(await flushAutoSave())) {
+      if (!window.confirm('保存に失敗しました。変更を破棄して移動しますか?')) return;
+    }
+    window.location.hash = `#/edit/${n}`;
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      data-pages-panel
+      className="flex shrink-0 flex-col overflow-y-auto border-b border-[#444444] bg-[#2c2c2c]"
+      style={{ height }}
+    >
+      <div className="sticky top-0 z-10 flex items-center justify-between bg-[#2c2c2c] px-2 py-1.5 text-[11px] font-medium text-gray-400">
+        ページ
+        <span className="tabular-nums text-gray-500">
+          {page} / {deck.slides.length || '—'}
+        </span>
+      </div>
+      {deck.slides.map((s, i) => {
+        const n = i + 1;
+        const current = n === page;
+        return (
+          <button
+            key={s.id}
+            ref={current ? currentRef : undefined}
+            data-page-thumb={n}
+            onClick={() => void goto(n)}
+            className="flex w-full shrink-0 items-start gap-1.5 px-2 py-1 text-left"
+            title={s.title ? `${n}. ${s.title}` : `${n}枚目`}
+          >
+            <span
+              className="mt-0.5 w-4 shrink-0 text-right text-[10px] tabular-nums"
+              style={{ color: current ? '#4fb8ff' : '#6b7280', fontWeight: current ? 700 : 400 }}
+            >
+              {n}
+            </span>
+            <span
+              className="relative block aspect-video overflow-hidden rounded-[3px] bg-white"
+              // w-full だとパネル幅に比例して巨大化する。実測幅(上限128px)で固定
+              style={{
+                width: thumbWidth || undefined,
+                boxShadow: current ? '0 0 0 2px #0d99ff' : '0 0 0 1px #444444',
+                opacity: s.hidden ? 0.45 : 1,
+              }}
+            >
+              {thumbWidth > 0 && (
+                <span
+                  className="pointer-events-none absolute left-0 top-0 origin-top-left"
+                  style={{ width: 1920, height: 1080, transform: `scale(${thumbWidth / 1920})` }}
+                >
+                  <MemoSlideRender page={n} template={s.template} edited={s.edited} />
+                </span>
+              )}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/editor/components/variables-panel/ColorValueCell.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+/**
+ * カラー値セル
+ * インラインでカラーピッカーを表示
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../../../components/ui/popover';
+import { Input } from '../../../components/ui/input';
+import { cn } from '../../../lib/utils';
+
+interface ColorValueCellProps {
+  value: string;
+  isEditing: boolean;
+  isInherited?: boolean;
+  onStartEdit: () => void;
+  onFinishEdit: () => void;
+  onValueChange: (value: string) => void;
+}
+
+// シンプルなカラーピッカー（後でFigmaColorPickerに置き換え可能）
+function SimpleColorPicker({
+  color,
+  onChange,
+}: {
+  color: string;
+  onChange: (color: string) => void;
+}) {
+  const [inputValue, setInputValue] = useState(color);
+
+  useEffect(() => {
+    setInputValue(color);
+  }, [color]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
+      onChange(value);
+    }
+  };
+
+  return (
+    <div className="p-2 space-y-2">
+      {/* カラーパレット */}
+      <input
+        type="color"
+        value={color.startsWith('#') ? color : '#000000'}
+        onChange={(e) => {
+          setInputValue(e.target.value);
+          onChange(e.target.value);
+        }}
+        className="w-full h-24 rounded cursor-pointer border border-[#444444]"
+      />
+
+      {/* HEX入力 */}
+      <Input
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        placeholder="#000000"
+        className="h-7 text-xs font-mono bg-[#383838] border-[#444444] text-white"
+      />
+
+      {/* プリセットカラー */}
+      <div className="grid grid-cols-8 gap-1">
+        {[
+          '#ef4444', '#f97316', '#eab308', '#22c55e',
+          '#14b8a6', '#3b82f6', '#8b5cf6', '#ec4899',
+          '#1f2937', '#374151', '#6b7280', '#9ca3af',
+          '#d1d5db', '#e5e7eb', '#f3f4f6', '#ffffff',
+        ].map((preset) => (
+          <button
+            key={preset}
+            onClick={() => {
+              setInputValue(preset);
+              onChange(preset);
+            }}
+            className={cn(
+              'w-5 h-5 rounded border border-[#444444] cursor-pointer hover:ring-2 hover:ring-[#0d99ff]',
+              color === preset && 'ring-2 ring-[#0d99ff]'
+            )}
+            style={{ backgroundColor: preset }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function ColorValueCell({
+  value,
+  isEditing,
+  isInherited = false,
+  onStartEdit,
+  onFinishEdit,
+  onValueChange,
+}: ColorValueCellProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpenChange = useCallback((open: boolean) => {
+    setIsOpen(open);
+    if (open) {
+      onStartEdit();
+    } else {
+      onFinishEdit();
+    }
+  }, [onStartEdit, onFinishEdit]);
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 h-7 group cursor-pointer',
+        isInherited && 'opacity-50'
+      )}
+    >
+      {/* カラースウォッチ */}
+      <Popover open={isOpen} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <button
+            className={cn(
+              'w-5 h-5 rounded border border-[#444444] flex-shrink-0',
+              'hover:ring-2 hover:ring-[#0d99ff] transition-shadow',
+              isOpen && 'ring-2 ring-[#0d99ff]'
+            )}
+            style={{ backgroundColor: value }}
+          />
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-48 p-0 bg-[#2c2c2c] border-[#444444]"
+          align="start"
+          side="bottom"
+        >
+          <SimpleColorPicker
+            color={value}
+            onChange={onValueChange}
+          />
+        </PopoverContent>
+      </Popover>
+
+      {/* HEX値 */}
+      <span
+        className={cn(
+          'font-mono text-xs truncate',
+          isInherited ? 'text-gray-500 italic' : 'text-gray-300'
+        )}
+        onClick={() => handleOpenChange(true)}
+      >
+        {value}
+      </span>
+
+      {/* 継承インジケーター */}
+      {isInherited && (
+        <span className="text-[10px] text-gray-600 ml-auto">継承</span>
+      )}
+    </div>
+  );
+}
+
+export default ColorValueCell;

package/src/editor/components/variables-panel/TextValueCell.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+/**
+ * テキスト値セル
+ * インラインで編集可能なテキストセル
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Input } from '../../../components/ui/input';
+import { cn } from '../../../lib/utils';
+
+interface TextValueCellProps {
+  value: string;
+  isEditing: boolean;
+  isInherited?: boolean;
+  onStartEdit: () => void;
+  onFinishEdit: () => void;
+  onValueChange: (value: string) => void;
+  className?: string;
+  prefix?: React.ReactNode;
+}
+
+export function TextValueCell({
+  value,
+  isEditing,
+  isInherited = false,
+  onStartEdit,
+  onFinishEdit,
+  onValueChange,
+  className,
+  prefix,
+}: TextValueCellProps) {
+  const [inputValue, setInputValue] = useState(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // 外部の値が変わったら内部の値も更新
+  useEffect(() => {
+    if (!isEditing) {
+      setInputValue(value);
+    }
+  }, [value, isEditing]);
+
+  // 編集開始時にフォーカス
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      onValueChange(inputValue);
+      onFinishEdit();
+    } else if (e.key === 'Escape') {
+      setInputValue(value);
+      onFinishEdit();
+    }
+  }, [inputValue, value, onValueChange, onFinishEdit]);
+
+  const handleBlur = useCallback(() => {
+    if (inputValue !== value) {
+      onValueChange(inputValue);
+    }
+    onFinishEdit();
+  }, [inputValue, value, onValueChange, onFinishEdit]);
+
+  if (isEditing) {
+    return (
+      <div className="flex items-center gap-2 h-7">
+        {prefix}
+        <Input
+          ref={inputRef}
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className={cn(
+            'h-7 text-xs bg-[#383838] border-[#444444] text-white flex-1',
+            className
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 h-7 cursor-pointer group',
+        'hover:bg-[#444444]/50 rounded px-1 -mx-1',
+        isInherited && 'opacity-50'
+      )}
+      onClick={onStartEdit}
+    >
+      {prefix}
+      <span
+        className={cn(
+          'truncate text-xs',
+          isInherited ? 'text-gray-500 italic' : 'text-gray-300',
+          className
+        )}
+      >
+        {value || <span className="text-gray-600">空</span>}
+      </span>
+
+      {/* 継承インジケーター */}
+      {isInherited && (
+        <span className="text-[10px] text-gray-600 ml-auto">継承</span>
+      )}
+    </div>
+  );
+}
+
+export default TextValueCell;