@growgroup/visual-editor 0.1.6 → 0.2.1

package/src/editor/components/EditorPropertyPanel.tsx

@@ -21,6 +21,8 @@ import {
 } from "react";
 import { useEditorComponents } from "../EditorContext";
 import { InstanceOverrideSection } from "./property-panel/InstanceOverrideSection";
+import { Component as PartIcon } from "lucide-react";
+import { detachPart, partInfoOf, unlockPartDescendants } from "../parts";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
@@ -813,6 +815,7 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
     getIframeDoc,
     notifyIframeChange,
     iframeReady,
+    setSelectedElement,
   } = useEditorContext();
   const {
     updateElementStyle,
@@ -833,6 +836,8 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
     resetAllOverrides,
     detachInstance,
     navigateToMasterComponent,
+    getPartDef,
+    updatePartFromElement,
   } = useEditorComponents();
 
   // Check if selected element is a component instance
@@ -841,6 +846,39 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
     return getInstanceByDomId(selectedElement.id);
   }, [selectedElement?.id, getInstanceByDomId]);
 
+  // 部品(data-part)のインスタンスか(DOM の属性で判定)
+  const selectedPart = useMemo(() => {
+    if (!selectedElement?.id) return null;
+    const doc = getIframeDoc();
+    return partInfoOf(doc?.querySelector(`[data-element-id="${selectedElement.id}"]`));
+  }, [selectedElement, getIframeDoc]);
+  const selectedPartLabel = useMemo(() => {
+    if (!selectedPart) return "";
+    const def = getPartDef(selectedPart.id);
+    return `${def?.name || selectedPart.id} v${selectedPart.version}`;
+  }, [selectedPart, getPartDef]);
+  const handleUpdatePartFromPanel = useCallback(async () => {
+    if (!selectedElement?.id) return;
+    const doc = getIframeDoc();
+    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement | null;
+    if (!el) return;
+    const def = await updatePartFromElement(el);
+    if (def) notifyIframeChange(true);
+  }, [selectedElement?.id, getIframeDoc, updatePartFromElement, notifyIframeChange]);
+  const handleDetachPartFromPanel = useCallback(() => {
+    if (!selectedElement?.id) return;
+    const doc = getIframeDoc();
+    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement | null;
+    if (!doc || !el || !partInfoOf(el)) return;
+    detachPart(el);
+    unlockPartDescendants(el);
+    notifyIframeChange(true);
+    void import("../utils/style-utils").then(({ extractElementInfo }) => {
+      const info = extractElementInfo(el, doc);
+      if (info) setSelectedElement(info);
+    });
+  }, [selectedElement?.id, getIframeDoc, notifyIframeChange, setSelectedElement]);
+
   const selectedMaster = useMemo(() => {
     if (!selectedInstance) return null;
     return getMasterComponent(selectedInstance.masterComponentId);
@@ -882,15 +920,15 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
 
   // リサイズ可能なパネル
   const { width, isDragging, resizeHandleProps } = useResizablePanel({
-    initialWidth: 288, // w-72 = 18rem = 288px
-    minWidth: 240,
+    initialWidth: 304,
+    minWidth: 280,
     maxWidth: 480,
     direction: 'left', // 左端をドラッグしてリサイズ
     storageKey: 'editor-property-panel-width',
   });
 
   const [openSections, setOpenSections] = useState<PanelSections>({
-    position: true, // 位置セクション
+    position: editorMode !== "webpage", // 流し込みのページでは詳細操作として畳む
     layout: true, // レイアウトセクション
     appearance: true, // 外見セクション
     image: false, // 塗りに統合されたため非表示
@@ -1141,9 +1179,11 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
         iframeReady={iframeReady}
       >
         <div
+          data-property-panel
           className="flex-shrink-0 bg-[#2c2c2c] border-l border-[#444444] flex flex-col overflow-hidden relative"
           style={{ width: `${width}px` }}
         >
+          <div className="ed-panel-heading">要素の編集</div>
           {/* リサイズハンドル */}
           <div {...resizeHandleProps} />
 
@@ -1164,11 +1204,12 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
               </div>
             </ScrollArea>
           ) : (
-            <div className="flex-1 flex items-center justify-center p-4">
-              <div className="text-center text-gray-500 text-xs">
-                <MousePointer2 className="w-8 h-8 mx-auto mb-2 opacity-50" />
-                <p>要素を選択してください</p>
-              </div>
+            <div className="ed-empty">
+              <MousePointer2 className="h-8 w-8" />
+              <strong>編集する要素を選択</strong>
+              <p>紙面の文字や画像をクリックすると、色・大きさ・余白を調整できます。</p>
+              <p>文字はダブルクリックで直接編集できます。</p>
+              <span className="text-xs">Shift＋クリックで複数選択</span>
             </div>
           )}
         </div>
@@ -1187,6 +1228,10 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
       className="flex-shrink-0 bg-[#2c2c2c] border-l border-[#444444] flex flex-col overflow-hidden relative"
       style={{ width: `${width}px` }}
     >
+      <div className="ed-panel-heading">
+        <span>要素の編集</span>
+        <span className="ml-auto truncate text-xs font-normal text-gray-400">{isMultiSelection ? `${selectedElementIds.length}個を選択` : selectedElement.text?.trim().slice(0, 28) || selectedElement.tagName.toLowerCase()}</span>
+      </div>
       {/* リサイズハンドル */}
       <div {...resizeHandleProps} />
 
@@ -1240,6 +1285,37 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
             />
           )}
 
+          {/* 部品(data-part)のインスタンス */}
+          {selectedPart && (
+            <div className="space-y-2 rounded border border-[#444444] bg-[#2a2a2a] p-2 text-xs text-gray-300">
+              <div className="flex items-center gap-2">
+                <PartIcon className="h-3.5 w-3.5 text-purple-400" />
+                <span className="truncate font-medium">部品: {selectedPartLabel}</span>
+              </div>
+              <p className="text-[10px] leading-snug text-gray-500">
+                スロット(data-slot)の中だけ編集できます。「この姿で部品を更新」で定義が変わり、他ページへの反映は利用側(savePart)が行います。
+              </p>
+              <div className="flex gap-1">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-6 px-2 text-[10px]"
+                  onClick={() => void handleUpdatePartFromPanel()}
+                >
+                  この姿で更新
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-6 px-2 text-[10px]"
+                  onClick={handleDetachPartFromPanel}
+                >
+                  切り離す
+                </Button>
+              </div>
+            </div>
+          )}
+
           {/* コンポーネントインスタンスセクション */}
           {selectedInstance && selectedMaster && (
             <InstanceOverrideSection

package/src/editor/components/LayerTreeItem.tsx

@@ -113,7 +113,7 @@ export interface LayerTreeItemProps {
   // Event handlers
   onToggleExpand: (nodeId: string) => void;
   onToggleVisibility: (nodeId: string) => void;
-  onNodeClick: (e: React.MouseEvent, nodeId: string) => void;
+  onNodeClick: (e: React.MouseEvent | React.KeyboardEvent, nodeId: string) => void;
   /** 行ホバー開始（キャンバス側をハイライトする） */
   onRowMouseEnter: (nodeId: string) => void;
   /** 行ホバー終了 */
@@ -195,9 +195,30 @@ export const LayerTreeItem = memo(function LayerTreeItem({
         <ContextMenuTrigger asChild>
           <div
             ref={nodeRef}
-            className={`flex items-center gap-1 py-0.5 px-1 rounded cursor-pointer text-xs group transition-colors ${
+            data-layer-row={node.id}
+            role="button"
+            tabIndex={0}
+            aria-label={`${label}（${node.tagName}）`}
+            aria-pressed={isSelected}
+            aria-expanded={hasChildren ? isExpanded : undefined}
+            onKeyDown={(e) => {
+              if (e.target !== e.currentTarget) return;
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault(); onNodeClick(e, node.id);
+              } else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+                e.preventDefault(); e.stopPropagation();
+                if (hasChildren && isExpanded !== (e.key === 'ArrowRight')) onToggleExpand(node.id);
+              } else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
+                e.preventDefault(); e.stopPropagation();
+                const rows = Array.from(e.currentTarget.closest('.ed-layer-panel')?.querySelectorAll<HTMLElement>('[data-layer-row]') ?? []);
+                const index = rows.indexOf(e.currentTarget);
+                const next = e.key === 'Home' ? 0 : e.key === 'End' ? rows.length - 1 : index + (e.key === 'ArrowDown' ? 1 : -1);
+                rows[Math.max(0, Math.min(rows.length - 1, next))]?.focus();
+              }
+            }}
+            className={`flex items-center gap-1 min-h-8 py-1 px-1 rounded cursor-pointer text-xs group transition-colors ${
               isSelected
-                ? 'bg-[#0d99ff] text-white'
+                ? 'ed-layer-selected bg-[#0d99ff]/15 text-[#4fb8ff]'
                 : isHovered
                 ? // キャンバス側のホバーと連動した薄いハイライト
                   'text-gray-100 bg-[#37373d] ring-1 ring-inset ring-[#0d99ff]/50'
@@ -233,7 +254,7 @@ export const LayerTreeItem = memo(function LayerTreeItem({
           >
             {/* ドラッグハンドル */}
             <GripVertical
-              className={`w-3 h-3 opacity-0 group-hover:opacity-100 cursor-grab ${
+              className={`w-3 h-3 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 cursor-grab ${
                 isSelected ? 'text-white' : 'text-gray-500'
               }`}
             />
@@ -241,6 +262,7 @@ export const LayerTreeItem = memo(function LayerTreeItem({
             {/* 展開/折りたたみ */}
             {hasChildren ? (
               <button
+                aria-label={isExpanded ? "子要素を折り畳む" : "子要素を表示"}
                 onClick={(e) => {
                   e.stopPropagation();
                   onToggleExpand(node.id);
@@ -261,6 +283,7 @@ export const LayerTreeItem = memo(function LayerTreeItem({
 
             {/* 表示/非表示アイコン */}
             <button
+              aria-label={isHidden ? "要素を表示" : "要素を非表示"}
               onClick={(e) => {
                 e.stopPropagation();
                 onToggleVisibility(node.id);
@@ -271,7 +294,7 @@ export const LayerTreeItem = memo(function LayerTreeItem({
                   : isSelected
                   ? 'text-white'
                   : 'text-gray-400'
-              } opacity-0 group-hover:opacity-100 ${
+              } opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 ${
                 isSelected ? 'hover:bg-[#0d99ff]' : 'hover:bg-gray-600'
               }`}
             >

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

@@ -198,7 +198,7 @@ export function ComponentPanel({
       {isDragging && <div className="fixed inset-0 z-50 cursor-col-resize" />}
 
       {/* Header */}
-      <div className="flex items-center justify-between p-3 border-b border-[#444444]">
+      <div className="ed-panel-heading justify-between">
         <div className="flex items-center gap-2">
           <Component className="w-4 h-4 text-gray-400" />
           <span className="text-sm font-medium text-white">コンポーネント</span>
@@ -207,7 +207,7 @@ export function ComponentPanel({
           <Button
             variant="ghost"
             size="icon"
-            className="h-6 w-6 text-gray-400 hover:text-white hover:bg-[#444444]"
+            className="h-8 w-8 text-gray-400 hover:text-white hover:bg-[#444444]"
             onClick={onClose}
             aria-label="コンポーネントパネルを閉じる"
           >
@@ -237,8 +237,9 @@ export function ComponentPanel({
               <p className="text-xs text-gray-500">
                 {searchQuery
                   ? '検索に一致するコンポーネントがありません'
-                  : 'コンポーネントがありません'}
+                  : '登録されたコンポーネントはありません'}
               </p>
+              {!searchQuery && <p className="mt-2 px-4 text-xs text-gray-400">要素を右クリックして「コンポーネントを作成」から登録できます。</p>}
             </div>
           ) : (
             visibleCategories.map((category) => (