@growgroup/visual-editor 0.1.6 → 0.2.0

package/src/editor/components/EditorContextMenu.tsx

@@ -5,7 +5,8 @@
  * 右クリックで要素操作メニューを表示
  */
 
-import { useCallback, useEffect, useRef } from 'react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../components/ui/dropdown-menu';
+import { useEditorContext } from '../EditorContext';
 import {
   Copy,
   Scissors,
@@ -56,6 +57,12 @@ export interface ContextMenuProps {
   // コンポーネント状態
   isComponentInstance?: boolean;
   hasOverrides?: boolean;
+  // 部品(HTML template)状態
+  /** io.loadParts が渡されている(「コンポーネントを作成」が「部品として保存」になる) */
+  partsMode?: boolean;
+  isPartInstance?: boolean;
+  /** 「名前 vN」 */
+  partLabel?: string;
   // アクション
   /** 画像の変更(選択が<img>のときのみ渡される) */
   onReplaceImageFromFile?: () => void;
@@ -93,6 +100,9 @@ export interface ContextMenuProps {
   onDetachInstance?: () => void;
   onResetOverrides?: () => void;
   onPushOverridesToMain?: () => void;
+  // 部品操作
+  onDetachPart?: () => void;
+  onUpdatePart?: () => void;
 }
 
 interface MenuItemProps {
@@ -106,7 +116,7 @@ interface MenuItemProps {
 
 function MenuItem({ icon, label, shortcut, onClick, disabled, danger }: MenuItemProps) {
   return (
-    <button
+    <DropdownMenuItem
       className={`
         w-full flex items-center gap-2 px-3 py-1.5 text-xs
         ${disabled 
@@ -117,7 +127,7 @@ function MenuItem({ icon, label, shortcut, onClick, disabled, danger }: MenuItem
         }
         transition-colors
       `}
-      onClick={(e) => {
+      onSelect={(e) => {
         e.stopPropagation();
         if (!disabled && onClick) onClick();
       }}
@@ -128,7 +138,7 @@ function MenuItem({ icon, label, shortcut, onClick, disabled, danger }: MenuItem
       {shortcut && (
         <span className="text-[10px] text-gray-500">{shortcut}</span>
       )}
-    </button>
+    </DropdownMenuItem>
   );
 }
 
@@ -145,6 +155,11 @@ export function EditorContextMenu({
   hasStyleInClipboard,
   isComponentInstance,
   hasOverrides,
+  partsMode,
+  isPartInstance,
+  partLabel,
+  onDetachPart,
+  onUpdatePart,
   onCopy,
   onCut,
   onPaste,
@@ -176,63 +191,7 @@ export function EditorContextMenu({
   onResetOverrides,
   onPushOverridesToMain,
 }: ContextMenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // メニュー外クリックで閉じる
-  useEffect(() => {
-    if (!position) return;
-
-    const handleClickOutside = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    // 次のフレームでリスナーを追加（右クリックイベントの完了を待つ）
-    requestAnimationFrame(() => {
-      document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('keydown', handleEscape);
-    });
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [position, onClose]);
-
-  // メニュー位置の調整（画面外にはみ出さないように）
-  const getMenuStyle = useCallback(() => {
-    if (!position) return {};
-    
-    const menuWidth = 200;
-    const menuHeight = 320;
-    const padding = 8;
-    
-    let x = position.x;
-    let y = position.y;
-    
-    // 右端チェック
-    if (x + menuWidth > window.innerWidth - padding) {
-      x = window.innerWidth - menuWidth - padding;
-    }
-    
-    // 下端チェック
-    if (y + menuHeight > window.innerHeight - padding) {
-      y = window.innerHeight - menuHeight - padding;
-    }
-    
-    return {
-      left: `${x}px`,
-      top: `${y}px`,
-    };
-  }, [position]);
-
+  const { restoreFocus } = useEditorContext();
   if (!position) return null;
 
   const handleAction = (action?: () => void) => {
@@ -243,12 +202,12 @@ export function EditorContextMenu({
   };
 
   return (
-    <div
-      ref={menuRef}
-      className="fixed z-[60] bg-[#2c2c2c] border border-[#444444] rounded-lg shadow-xl py-1 min-w-[180px]"
-      style={getMenuStyle()}
-      onClick={(e) => e.stopPropagation()}
-    >
+    <DropdownMenu open onOpenChange={(open) => { if (!open) onClose(); }}>
+      <DropdownMenuTrigger asChild>
+        <button tabIndex={-1} aria-label="要素の操作" style={{ position: 'fixed', left: position.x, top: position.y, width: 1, height: 1, opacity: 0, pointerEvents: 'none' }} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" sideOffset={0} collisionPadding={8} className="w-60"
+        onCloseAutoFocus={(e) => { e.preventDefault(); restoreFocus(); }}>
       {/* クリップボード操作 */}
       <MenuItem
         icon={<Copy className="w-3.5 h-3.5" />}
@@ -471,11 +430,33 @@ export function EditorContextMenu({
       {hasSelection && selectionCount === 1 && (
         <>
           <MenuDivider />
-          {/* 通常要素の場合: コンポーネント作成 */}
-          {!isComponentInstance && (
+          {/* 部品(data-part)のインスタンス: 更新・切り離し */}
+          {isPartInstance && (
+            <>
+              <MenuItem
+                icon={<Component className="w-3.5 h-3.5 text-purple-400" />}
+                label={`部品: ${partLabel ?? ''}`}
+                disabled
+              />
+              {onUpdatePart && (
+                <MenuItem
+                  icon={<ArrowUpFromLine className="w-3.5 h-3.5" />}
+                  label="この姿で部品を更新"
+                  onClick={() => handleAction(onUpdatePart)}
+                />
+              )}
+              <MenuItem
+                icon={<Unlink className="w-3.5 h-3.5" />}
+                label="部品から切り離す"
+                onClick={() => handleAction(onDetachPart)}
+              />
+            </>
+          )}
+          {/* 通常要素の場合: コンポーネント作成(部品モードでは「部品として保存」) */}
+          {!isComponentInstance && !isPartInstance && (
             <MenuItem
               icon={<Component className="w-3.5 h-3.5 text-purple-400" />}
-              label="コンポーネントを作成"
+              label={partsMode ? '部品として保存' : 'コンポーネントを作成'}
               onClick={() => handleAction(onCreateComponent)}
             />
           )}
@@ -510,6 +491,7 @@ export function EditorContextMenu({
           )}
         </>
       )}
-    </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }

package/src/editor/components/EditorFooter.tsx

@@ -1,80 +1,46 @@
 'use client';
 
+import { Keyboard } from 'lucide-react';
 import { useEditorContext } from '../EditorContext';
 import { BreakpointSelector } from './BreakpointSelector';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
 
-/**
- * エディタのフッター（ショートカットヘルプ表示 + ブレイクポイントセレクター）
- */
 export function EditorFooter() {
-  const { activeTool, editorMode } = useEditorContext();
-
+  const { activeTool, editorMode, selectedElement, selectedElementIds } = useEditorContext();
+  const cmd = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘' : 'Ctrl+';
+  const hint = activeTool === 'move' ? 'ドラッグで紙面を移動 · V で選択に戻る'
+    : activeTool === 'scale' ? 'ドラッグで拡大・縮小 · V で選択に戻る'
+    : activeTool !== 'select' ? 'ドラッグで追加 · Esc でキャンセル'
+    : selectedElement || selectedElementIds.length ? 'ダブルクリックで文字を編集 · Esc で選択を解除'
+    : 'クリックで選択 · Space＋ドラッグで紙面を移動';
+  const shortcuts = [
+    ['選択 / 移動 / 拡大・縮小', 'V / H / K'],
+    ['元に戻す / やり直し', `${cmd}Z / ${cmd}⇧Z`],
+    ['保存', `${cmd}S`], ['複製', `${cmd}D`],
+    ['全体表示 / 100% / 選択範囲', `${cmd}0 / ${cmd}1 / ${cmd}2`],
+    ['複数選択', 'Shift＋クリック'], ['最下層の要素を選択', `${cmd}クリック`],
+    ['選択・入力を終了', 'Esc'],
+  ];
   return (
-    <div className="px-4 py-2 bg-[#2c2c2c] border-t border-[#444444]">
-      <div className="flex items-center justify-between text-xs text-gray-500">
-        {/* 左側: ショートカットヘルプ */}
-        <div className="flex items-center gap-4">
-          {activeTool === 'select' ? (
-            <>
-              <span>
-                <kbd className="px-1 py-0.5 bg-[#444444] rounded text-gray-400">
-                  クリック
-                </kbd>{' '}
-                選択 & 編集
-              </span>
-              <span>
-                <kbd className="px-1 py-0.5 bg-[#444444] rounded text-gray-400">
-                  Enter
-                </kbd>{' '}
-                確定
-              </span>
-              <span>
-                <kbd className="px-1 py-0.5 bg-[#444444] rounded text-gray-400">
-                  Esc
-                </kbd>{' '}
-                キャンセル
-              </span>
-            </>
-          ) : (
-            <>
-              <span>
-                <kbd className="px-1 py-0.5 bg-[#444444] rounded text-gray-400">
-                  ドラッグ
-                </kbd>{' '}
-                描画
-              </span>
-              <span>
-                <kbd className="px-1 py-0.5 bg-[#444444] rounded text-gray-400">
-                  V
-                </kbd>{' '}
-                選択ツールに戻る
-              </span>
-            </>
-          )}
-        </div>
-
-        {/* 中央: ブレイクポイントセレクター（webpageモードのみ） */}
-        {editorMode === 'webpage' && (
-          <div className="flex items-center">
-            <BreakpointSelector />
-          </div>
-        )}
-
-        {/* 右側: Undo/Redoショートカット */}
-        <div className="flex items-center gap-4">
-          <span>
-            <kbd className="px-1 py-0.5 bg-[#444444] rounded text-gray-400">
-              ⌘Z
-            </kbd>{' '}
-            元に戻す
-          </span>
-          <span>
-            <kbd className="px-1 py-0.5 bg-[#444444] rounded text-gray-400">
-              ⌘⇧Z
-            </kbd>{' '}
-            やり直し
-          </span>
-        </div>
+    <div className="ed-footer">
+      <span className="ed-footer-hint">{hint}</span>
+      <div className="flex shrink-0 items-center gap-4">
+        {editorMode === 'webpage' && <BreakpointSelector />}
+        <Popover>
+          <PopoverTrigger asChild>
+            <button className="flex items-center gap-2 rounded px-2 py-1" aria-label="キーボードショートカット">
+              <Keyboard className="h-4 w-4" />ショートカット
+            </button>
+          </PopoverTrigger>
+          <PopoverContent side="top" align="end" className="w-[400px]">
+            <h2 className="mb-4 text-sm font-semibold">キーボードショートカット</h2>
+            <dl className="space-y-3">
+              {shortcuts.map(([label, key]) => <div key={label} className="flex items-center justify-between gap-4 text-xs">
+                <dt>{label}</dt><dd className="m-0"><kbd className="rounded bg-muted px-2 py-1">{key}</kbd></dd>
+              </div>)}
+            </dl>
+          </PopoverContent>
+        </Popover>
       </div>
     </div>
   );

package/src/editor/components/EditorHeader.tsx

@@ -22,9 +22,10 @@ import {
   FolderArchive,
   ChevronDown,
   MoreHorizontal,
-  MessageSquare,
+  MessageSquare, PanelLeft, Sun, Moon, Ruler,
 } from "lucide-react";
 import { useEditorContext } from "../EditorContext";
+import { ConfirmDialog } from "./shell/ConfirmDialog";
 import { EditorTopBar } from "./shell/EditorTopBar";
 import { MIN_ZOOM, MAX_ZOOM, editorZoomApiRef } from "../hooks/useCanvasControls";
 import { generateEditableHtml } from "../utils/html-utils";
@@ -38,6 +39,12 @@ import {
 import { can } from "../../io";
 
 interface EditorHeaderProps {
+  theme?: "light" | "dark";
+  onToggleTheme?: () => void;
+  layersOpen?: boolean;
+  onToggleLayers?: () => void;
+  guidesOpen?: boolean;
+  onToggleGuides?: () => void;
   /** コメントパネルの開閉(Figma風にもPowerPoint同等のコメントを出す) */
   comments?: { open: boolean; toggle: () => void; page: number };
   /** PowerPoint風UIへの切り替え(任意) */
@@ -69,6 +76,7 @@ interface EditorHeaderProps {
 }
 
 export function EditorHeader({
+  theme, onToggleTheme, layersOpen, onToggleLayers, guidesOpen, onToggleGuides,
   onSwitchUi,
   onSave,
   onSaveSettings,
@@ -108,6 +116,8 @@ export function EditorHeader({
     editorMode,
   } = useEditorContext();
 
+  const [resetOpen, setResetOpen] = useState(false);
+
   // 保存・共有・プレビュー・閉じるは共通トップバー(EditorTopBar)が持つ。
   // ここに実装を残すと、PowerPoint風UIと2本の保存経路ができてしまう
 
@@ -289,6 +299,7 @@ export function EditorHeader({
   };
 
   return (
+    <>
     <EditorTopBar
       variant="figma"
       /* 一覧・PPT風UIはスライドのデッキが前提。Webページでは出さない */
@@ -302,7 +313,11 @@ export function EditorHeader({
       isCanvasEditing={isCanvasEditing}
       onSwitchUi={editorMode === "webpage" ? undefined : onSwitchUi}
       /* 利用側の導線。一覧へ戻る/UI切替が出ない使い方では左端が空くので、そこに並ぶ */
-      leftExtra={headerExtra}
+      leftExtra={<>{headerExtra}{onToggleLayers && (
+        <button className="ed-button" onClick={onToggleLayers} aria-pressed={layersOpen} title="左パネルの表示を切り替え">
+          <PanelLeft className="h-4 w-4" />レイヤー
+        </button>
+      )}</>}
       /* Figma風の固有機能: ズームコントロール */
       rightExtra={
         <div className="flex items-center gap-1">
@@ -319,7 +334,7 @@ export function EditorHeader({
             onClick={handleZoomOut}
             disabled={!canZoomOut}
             title={canZoomOut ? "縮小" : `これ以上縮小できません（下限 ${MIN_ZOOM}%）`}
-            className="h-7 w-7 text-gray-400 hover:text-white hover:bg-[#444444] disabled:opacity-30"
+            className="h-8 w-8 text-gray-400 hover:text-white hover:bg-[#444444] disabled:opacity-30"
           >
             <ZoomOut className="h-4 w-4" />
           </Button>
@@ -411,7 +426,7 @@ export function EditorHeader({
             onClick={handleZoomIn}
             disabled={!canZoomIn}
             title={canZoomIn ? "拡大" : `これ以上拡大できません（上限 ${MAX_ZOOM}%）`}
-            className="h-7 w-7 text-gray-400 hover:text-white hover:bg-[#444444] disabled:opacity-30"
+            className="h-8 w-8 text-gray-400 hover:text-white hover:bg-[#444444] disabled:opacity-30"
           >
             <ZoomIn className="h-4 w-4" />
           </Button>
@@ -420,7 +435,7 @@ export function EditorHeader({
             size="icon"
             data-zoom-fit
             onClick={handleFitZoom}
-            className="h-7 w-7 text-gray-400 hover:text-white hover:bg-[#444444]"
+            className="h-8 w-8 text-gray-400 hover:text-white hover:bg-[#444444]"
             title="全体を表示（⌘0）"
           >
             <Maximize className="h-4 w-4" />
@@ -440,14 +455,22 @@ export function EditorHeader({
               variant="ghost"
               size="icon"
               data-header-more
-              className="h-7 w-7 text-gray-400 hover:bg-[#444444] hover:text-white"
+              className="h-8 w-8 text-gray-400 hover:bg-[#444444] hover:text-white"
               title="その他の操作"
             >
               <MoreHorizontal className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-52 bg-[#2c2c2c] border-[#444444]">
-            <DropdownMenuItem onClick={handleReset} className="cursor-pointer gap-2 text-gray-300 hover:bg-[#444444] hover:text-white">
+            {onToggleTheme && <DropdownMenuItem onSelect={onToggleTheme} className="gap-2">
+              {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+              {theme === 'dark' ? 'ライト表示にする' : 'ダーク表示にする'}
+            </DropdownMenuItem>}
+            {editorMode === 'webpage' && onToggleGuides && <DropdownMenuItem onSelect={onToggleGuides} className="gap-2">
+              <Ruler className="h-4 w-4" />{guidesOpen ? '幅のガイドを隠す' : '幅のガイドを表示'}
+            </DropdownMenuItem>}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onSelect={() => setResetOpen(true)} className="cursor-pointer gap-2 text-gray-300 hover:bg-[#444444] hover:text-white">
               <RotateCcw className="h-4 w-4" />
               変更をリセット
             </DropdownMenuItem>
@@ -493,6 +516,8 @@ export function EditorHeader({
         </DropdownMenu>
       }
     />
+    <ConfirmDialog open={resetOpen} onOpenChange={setResetOpen} title="変更をリセットしますか？" description="最後に保存した内容に戻ります。未保存の変更は失われます。" confirmLabel="リセットする" onConfirm={handleReset} />
+    </>
   );
 }
 
@@ -511,19 +536,11 @@ function CommentToggleButton({
   const deck = useDeck();
   const count = unresolvedCount(deck.slides[page - 1]?.comments);
   return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={onToggle}
-      title="コメントパネルの表示/非表示"
-      className={`relative h-8 w-8 hover:bg-[#444444] ${open ? "text-[#4fb8ff]" : "text-gray-400 hover:text-white"}`}
-    >
+    <button className="ed-button" data-comment-toggle onClick={onToggle} aria-pressed={open}
+      aria-expanded={open} title="このページのコメントを確認・追加">
       <MessageSquare className="h-4 w-4" />
-      {count > 0 && (
-        <span className="absolute -right-0.5 -top-0.5 rounded-full bg-[#0d99ff] px-1 text-[9px] font-bold leading-[14px] text-white">
-          {count}
-        </span>
-      )}
-    </Button>
+      コメント
+      {count > 0 && <span className="tabular-nums" aria-label={`未解決${count}件`}>{count}</span>}
+    </button>
   );
 }

package/src/editor/components/EditorLayerPanel.tsx

@@ -610,7 +610,7 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
   }, [getIframeDoc]);
 
   // ノードクリックハンドラ
-  const handleNodeClick = useCallback((e: React.MouseEvent, nodeId: string) => {
+  const handleNodeClick = useCallback((e: React.MouseEvent | React.KeyboardEvent, nodeId: string) => {
     e.stopPropagation(); // バブリング防止
 
     let newSelectedIds: string[] = [];
@@ -1096,7 +1096,7 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
 
   return (
     <div
-      className="bg-[#2c2c2c] border-r border-[#444444] flex flex-col relative flex-shrink-0"
+      className="ed-layer-panel min-h-0 flex-1 bg-[#2c2c2c] flex flex-col relative"
       // 2段構成(ページ+レイヤー)に埋め込まれているときは幅を親(LeftPanel)が持つ。
       // ここで固定幅を持つと上下の段で幅が食い違い、リサイズも二重になる
       style={hideSlideList ? { width: '100%' } : { width: `${width}px` }}
@@ -1119,8 +1119,9 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
           <Input
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="要素を検索..."
-            className="h-7 text-xs pl-7 bg-[#383838] border-[#444444] text-white placeholder:text-gray-500"
+            placeholder="文字や要素名で検索"
+            aria-label="レイヤーを検索"
+            className="h-8 text-xs pl-7 bg-[#383838] border-[#444444] text-white placeholder:text-gray-500"
           />
         </div>
       </div>
@@ -1194,15 +1195,12 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
           ) : (
             // スライドがない場合は従来のレイヤー表示
             <>
-              <div className="flex items-center gap-2 text-xs text-gray-400 font-medium p-2">
-                <Layers className="w-3.5 h-3.5" />
-                レイヤー
-              </div>
+              <p className="px-3 py-2 text-xs text-gray-400">クリックで選択・ドラッグで並べ替え</p>
               {filteredDomTree.length > 0 ? (
                 filteredDomTree.map((node) => renderTreeNode(node))
               ) : (
                 <div className="text-xs text-gray-500 text-center py-4">
-                  {searchQuery ? '検索結果がありません' : 'レイヤーがありません'}
+                  {searchQuery ? '一致する要素がありません。別の言葉でお試しください。' : 'このページには編集できる要素がありません。'}
                 </div>
               )}
             </>