@alpaca-editor/core 1.0.4064 → 1.0.4065

package/src/editor/page-viewer/PageViewerFrame.tsx

@@ -406,13 +406,69 @@ export function PageViewerFrame({
 
       if (editContextRef.current?.isRefreshing) return;
 
-      const componentId = findNearestEditableComponentId(target as HTMLElement);
+      let componentId = findNearestEditableComponentId(target as HTMLElement);
+
+      // If layout components are hidden, block selection on layout components
+      if (
+        componentId &&
+        editContextRef.current &&
+        editContextRef.current.page &&
+        editContextRef.current.showLayoutComponents === false
+      ) {
+        const comp = getComponentById(componentId, editContextRef.current.page);
+        if (comp?.layoutId) {
+          componentId = undefined;
+        }
+      }
       if (editContextRef.current?.currentOverlay)
         editContextRef.current?.setCurrentOverlay(undefined);
 
       if (componentId) {
-        if (event.ctrlKey) {
-          const currentSelection = editContextRef.current?.selection || [];
+        const currentSelection = editContextRef.current?.selection || [];
+
+        if (event.shiftKey && currentSelection.length > 0) {
+          const page = pageViewContextRef.current?.page;
+          if (page) {
+            // Build ordered list of visible component ids by DOM order
+            const doc = iframeRef.current?.contentDocument;
+            const orderedIds: string[] = [];
+            if (doc) {
+              const all = Array.from(
+                doc.querySelectorAll("[data-component-id]"),
+              ) as HTMLElement[];
+              for (const el of all) {
+                const id = el.getAttribute("data-component-id");
+                if (!id) continue;
+                // Skip layout components when hidden
+                if (
+                  editContextRef.current?.showLayoutComponents === false &&
+                  getComponentById(id, page)?.layoutId
+                )
+                  continue;
+                orderedIds.push(id);
+              }
+            }
+
+            const anchorId = currentSelection[currentSelection.length - 1]!;
+            const aIdx = orderedIds.indexOf(anchorId);
+            const bIdx = orderedIds.indexOf(componentId);
+            if (aIdx !== -1 && bIdx !== -1) {
+              const start = Math.min(aIdx, bIdx);
+              const end = Math.max(aIdx, bIdx);
+              const range = orderedIds.slice(start, end + 1);
+              if (event.ctrlKey) {
+                const union = new Set<string>([...currentSelection, ...range]);
+                editContextRef.current?.select(Array.from(union));
+              } else {
+                editContextRef.current?.select(range);
+              }
+            } else {
+              editContextRef.current?.select([componentId]);
+            }
+          } else {
+            editContextRef.current?.select([componentId]);
+          }
+        } else if (event.ctrlKey) {
           if (currentSelection.indexOf(componentId) === -1)
             editContextRef.current?.select([...currentSelection, componentId]);
         } else {
@@ -488,7 +544,19 @@ export function PageViewerFrame({
       event.preventDefault();
       event.stopPropagation();
 
-      const componentId = findNearestEditableComponentId(target as HTMLElement);
+      let componentId = findNearestEditableComponentId(target as HTMLElement);
+
+      if (
+        componentId &&
+        editContextRef.current &&
+        editContextRef.current.page &&
+        editContextRef.current.showLayoutComponents === false
+      ) {
+        const comp = getComponentById(componentId, editContextRef.current.page);
+        if (comp?.layoutId) {
+          componentId = undefined;
+        }
+      }
 
       if (componentId) {
         // Only change selection if right-clicking on a component that's not in the current selection
@@ -511,6 +579,14 @@ export function PageViewerFrame({
         .map((id) => getComponentById(id, pageViewContextRef.current!.page!))
         .filter((x) => x) as Component[];
 
+      // If layout components are hidden, do not show context menu for them
+      if (
+        editContextRef.current?.showLayoutComponents === false &&
+        selectedComponents.some((c) => c.layoutId)
+      ) {
+        return;
+      }
+
       const iframeRect = iframe.getBoundingClientRect();
       const adjustedEvent = new MouseEvent("contextmenu", {
         bubbles: true,

package/src/editor/reviews/CommentEditor.tsx

@@ -42,13 +42,13 @@ export function CommentEditor({
 
   React.useEffect(() => {
     if (autoFocus && textareaRef.current) {
-      // Focus after a short delay to ensure the component is mounted
+      // Focus after a longer delay to ensure the component is fully mounted, especially for dynamically created popovers
       const timer = setTimeout(() => {
         textareaRef.current?.focus();
         // Move cursor to end
         const len = textareaRef.current?.value.length || 0;
         textareaRef.current?.setSelectionRange(len, len);
-      }, 100);
+      }, 200);
       return () => clearTimeout(timer);
     }
   }, [autoFocus]);

package/src/editor/reviews/Reviews.tsx

@@ -169,6 +169,7 @@ export function Reviews() {
         <SimpleIconButton
           label="Add Reviewer"
           icon="pi pi-plus"
+          data-testid="add-reviewer-button"
           onClick={(x) => {
             overlayPanelRef.current?.toggle(x);
             setTimeout(() => {
@@ -230,6 +231,7 @@ export function Reviews() {
               label="Add Reviewer"
               disabled={waiting}
               icon="pi pi-plus"
+              data-testid="add-reviewer-submit-button"
               onClick={async () => {
                 if (!editContext?.contentEditorItem) return;
                 setShowErrors(true);

package/src/editor/sidebar/ComponentTree.tsx

@@ -13,7 +13,7 @@ import { PerfectTree, TreeNode } from "../ui/PerfectTree";
 
 import { isValidPlaceholder } from "../componentTreeHelper";
 import { getAbsoluteIconUrl } from "../utils";
-import { Plus, EyeIcon, EyeOff, Pentagon } from "lucide-react";
+import { Plus, LayoutTemplate, Pentagon } from "lucide-react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 
 type CustomTreeNode = TreeNode<Component | Placeholder> & {
@@ -171,14 +171,15 @@ export function ComponentTree({}) {
       tags: [],
     };
 
-    if (editContext?.hideNonEditableComponents) {
-      // Flatten the tree: collect all editable descendants directly
-      const flattenedComponents: CustomTreeNode[] = [];
-      for (const component of p.components) {
-        const editableNodes = getEditableDescendants(component, node);
-        flattenedComponents.push(...editableNodes);
-      }
-      node.children = flattenedComponents;
+    if (!editContext?.showLayoutComponents) {
+      // Map components and filter out layout components when hidden
+      const mappedComponents = p.components.map((c) =>
+        mapComponentNode(c, node),
+      );
+      node.children = mappedComponents.filter((componentNode) => {
+        const component = componentNode.data as Component;
+        return !component.layoutId;
+      });
     } else {
       // Always map components, but filter based on editability and descendants
       const mappedComponents = p.components.map((c) =>
@@ -201,36 +202,20 @@ export function ComponentTree({}) {
       return [];
     }
 
-    if (editContext?.hideNonEditableComponents) {
-      // Flatten the tree: collect all editable descendants from all placeholders
-      const flattenedNodes: CustomTreeNode[] = [];
-
+    if (!editContext?.showLayoutComponents) {
+      // Show only non-layout components
+      const nodes: CustomTreeNode[] = [];
       for (const placeholder of c.placeholders) {
-        if (placeholder.editable) {
-          //If placeholder is editable, include it normally
-          if (c.placeholders.length > 1 || !c.editable) {
-            // Multiple placeholders - show placeholder node
-            const placeholderNode = mapPlaceholderNode(placeholder, parent);
-            flattenedNodes.push(placeholderNode);
-          } else {
-            //  Single placeholder - map components directly
-            for (const component of placeholder.components) {
-              const editableNodes = getEditableDescendants(component, parent);
-              flattenedNodes.push(...editableNodes);
-            }
-          }
-        } else {
-          // Placeholder is not editable - collect editable descendants from its components
-          for (const component of placeholder.components) {
-            const editableNodes = getEditableDescendants(component, parent);
-            flattenedNodes.push(...editableNodes);
+        for (const component of placeholder.components) {
+          if (!component.layoutId) {
+            const componentNode = mapComponentNode(component, parent);
+            nodes.push(componentNode);
           }
         }
       }
-
-      return flattenedNodes;
+      return nodes;
     } else {
-      // Original logic for when hideNonEditableComponents is false
+      // Original logic for when showing layout components
       // Filter placeholders based on editable descendants
       let placeholdersToShow = c.placeholders.filter((p) => {
         // Show placeholder if it's editable or has editable descendants
@@ -424,22 +409,72 @@ export function ComponentTree({}) {
 
     setRootNodes(finalNodes);
     setNodeDictionary(dict);
-  }, [page, editContext?.hideNonEditableComponents]);
+  }, [page, editContext?.showLayoutComponents]);
 
   const handleTreeSelection = useCallback(
     (key: string, event: React.MouseEvent) => {
-      let newKeys = [key];
-      if (event.ctrlKey) {
+      let newKeys: string[] = [];
+
+      // Helper: gather visible component keys using current tree data and expanded state
+      const getVisibleComponentKeys = (): string[] => {
+        const keys: string[] = [];
+        const visit = (nodes: CustomTreeNode[]) => {
+          for (const n of nodes) {
+            if (n.type === "component") keys.push(n.key);
+            if (n.children && expandedKeys.includes(n.key)) {
+              visit(n.children as CustomTreeNode[]);
+            }
+          }
+        };
+        visit(rootNodes as CustomTreeNode[]);
+        return keys;
+      };
+
+      if (event.shiftKey) {
+        const anchorKey =
+          selectedKeys && selectedKeys.length > 0
+            ? selectedKeys[selectedKeys.length - 1]!
+            : undefined;
+        const orderedKeys = getVisibleComponentKeys();
+        const aIdx = anchorKey ? orderedKeys.indexOf(anchorKey) : -1;
+        const bIdx = orderedKeys.indexOf(key);
+
+        if (aIdx !== -1 && bIdx !== -1) {
+          const start = Math.min(aIdx, bIdx);
+          const end = Math.max(aIdx, bIdx);
+          const rangeKeys = orderedKeys.slice(start, end + 1);
+          if (event.ctrlKey) {
+            const union = new Set<string>([
+              ...selectedKeys.filter(
+                (k) => nodeDictionary[k]?.type === "component",
+              ),
+              ...rangeKeys,
+            ]);
+            newKeys = Array.from(union);
+          } else {
+            newKeys = rangeKeys;
+          }
+        } else {
+          // Fallback to single selection when anchor or target not found
+          newKeys = [key];
+        }
+      } else if (event.ctrlKey) {
         if (selectedKeys.includes(key)) {
           newKeys = selectedKeys.filter((x) => x !== key);
         } else {
           newKeys = [...selectedKeys, key];
         }
+      } else {
+        newKeys = [key];
       }
 
-      const selectedComponentIds = newKeys
-        .filter((key) => nodeDictionary[key])
-        .map((key) => nodeDictionary[key]!.componentId!);
+      const selectedComponentIds = Array.from(
+        new Set(
+          newKeys
+            .filter((k) => nodeDictionary[k]?.type === "component")
+            .map((k) => nodeDictionary[k]!.componentId!),
+        ),
+      );
 
       editContextRef.current?.select(selectedComponentIds);
 
@@ -597,6 +632,102 @@ export function ComponentTree({}) {
     return null;
   };
 
+  // Resolve placeholder and correct index for drop zones even when placeholders are hidden/flattened
+  const getSiblingsForParent = (
+    parent: CustomTreeNode | null,
+  ): CustomTreeNode[] => {
+    if (!parent) return (rootNodes as CustomTreeNode[]) || [];
+    const parentNode = nodeDictionary[parent.key];
+    return ((parentNode?.children as CustomTreeNode[]) ||
+      []) as CustomTreeNode[];
+  };
+
+  const findNearestComponentNeighbor = (
+    siblings: CustomTreeNode[],
+    index: number,
+  ): CustomTreeNode | null => {
+    // Prefer right neighbor
+    for (let i = index; i < siblings.length; i++) {
+      if (siblings[i]?.type === "component") return siblings[i]!;
+    }
+    // Fallback to left neighbor
+    for (let j = index - 1; j >= 0; j--) {
+      if (siblings[j]?.type === "component") return siblings[j]!;
+    }
+    return null;
+  };
+
+  const resolveDropContext = (
+    dragOverParent: CustomTreeNode | null,
+    index: number,
+  ): { placeholder: Placeholder | null; indexInPlaceholder: number } => {
+    // Direct placeholder parent
+    if (dragOverParent && dragOverParent.type === "placeholder") {
+      const placeholder = dragOverParent.data as Placeholder;
+      return {
+        placeholder: placeholder.editable ? placeholder : null,
+        indexInPlaceholder: Math.max(0, index),
+      };
+    }
+
+    // Single editable placeholder on a component
+    if (dragOverParent && dragOverParent.type === "component") {
+      const component = dragOverParent.data as Component;
+      const editablePlaceholders = (component.placeholders || []).filter(
+        (p) => p.editable,
+      );
+      const siblings = getSiblingsForParent(dragOverParent);
+      if (editablePlaceholders.length === 1) {
+        const ph = editablePlaceholders[0]!;
+        // Count how many siblings in this placeholder appear before the zone
+        const indexInPlaceholder = siblings
+          .slice(0, Math.max(0, index))
+          .filter(
+            (n) =>
+              n.type === "component" &&
+              (n.data as Component)?.parentPlaceholder?.key === ph.key,
+          ).length;
+        return { placeholder: ph, indexInPlaceholder };
+      }
+
+      // Multiple placeholders: infer from nearest neighbor component
+      const neighbor = findNearestComponentNeighbor(
+        siblings,
+        Math.max(0, index),
+      );
+      const ph = (neighbor?.data as Component | undefined)?.parentPlaceholder;
+      if (ph && ph.editable) {
+        const indexInPlaceholder = siblings
+          .slice(0, Math.max(0, index))
+          .filter(
+            (n) =>
+              n.type === "component" &&
+              (n.data as Component)?.parentPlaceholder?.key === ph.key,
+          ).length;
+        return { placeholder: ph, indexInPlaceholder };
+      }
+
+      return { placeholder: null, indexInPlaceholder: 0 };
+    }
+
+    // Root-level (no parent): infer from neighbors among root nodes
+    const siblings = getSiblingsForParent(null);
+    const neighbor = findNearestComponentNeighbor(siblings, Math.max(0, index));
+    const ph = (neighbor?.data as Component | undefined)?.parentPlaceholder;
+    if (ph && ph.editable) {
+      const indexInPlaceholder = siblings
+        .slice(0, Math.max(0, index))
+        .filter(
+          (n) =>
+            n.type === "component" &&
+            (n.data as Component)?.parentPlaceholder?.key === ph.key,
+        ).length;
+      return { placeholder: ph, indexInPlaceholder };
+    }
+
+    return { placeholder: null, indexInPlaceholder: 0 };
+  };
+
   // Handle drag over node
   const handleDragOverZone = (
     dragOverNode: CustomTreeNode | null,
@@ -604,9 +735,9 @@ export function ComponentTree({}) {
     event: React.DragEvent,
   ): boolean => {
     if (!editContext?.dragObject) return false;
-    const placeholder = getPlaceholder(dragOverNode);
+    const { placeholder } = resolveDropContext(dragOverNode, index);
     if (!placeholder) return false;
-    var isValid = isValidPlaceholder(placeholder, editContext.dragObject);
+    const isValid = isValidPlaceholder(placeholder, editContext.dragObject);
     event.dataTransfer.dropEffect = isValid ? "move" : "none";
     return isValid;
   };
@@ -617,10 +748,20 @@ export function ComponentTree({}) {
     index: number,
     event: React.DragEvent,
   ): void => {
-    const placeholder = getPlaceholder(droppedOnNode);
-    if (!placeholder) return;
+    // When dropping on a node (index < 0), use legacy behavior
+    if (index < 0) {
+      const placeholder = getPlaceholder(droppedOnNode);
+      if (!placeholder) return;
+      editContext!.droppedInPlaceholder(placeholder.key, index);
+      return;
+    }
 
-    editContext!.droppedInPlaceholder(placeholder.key, index);
+    const { placeholder, indexInPlaceholder } = resolveDropContext(
+      droppedOnNode,
+      index,
+    );
+    if (!placeholder) return;
+    editContext!.droppedInPlaceholder(placeholder.key, indexInPlaceholder);
   };
 
   if (!page)
@@ -630,35 +771,45 @@ export function ComponentTree({}) {
       </div>
     );
 
-  // Use the PerfectTree component
   return (
     <div className="flex h-full flex-col">
       {/* Toolbar */}
       <div className="flex items-center justify-between border-b border-gray-200 px-2 py-1">
-        <SimpleIconButton
-          icon={
-            editContext?.hideNonEditableComponents ? (
-              <EyeOff className="h-4 w-4" strokeWidth={1.5} />
-            ) : (
-              <EyeIcon className="h-4 w-4" strokeWidth={1.5} />
-            )
-          }
-          label={
-            editContext?.hideNonEditableComponents
-              ? "Show non-editable components"
-              : "Hide non-editable components"
-          }
-          size="small"
-          selected={editContext?.hideNonEditableComponents}
-          onClick={() =>
-            editContext?.setHideNonEditableComponents(
-              !editContext.hideNonEditableComponents,
-            )
-          }
-        />
+        <div className="flex items-center gap-1">
+          <SimpleIconButton
+            icon={<Plus strokeWidth={1} className="h-4 w-4" />}
+            label="Add component"
+            size="small"
+            data-testid="component-tree-add-component"
+            onClick={(event) => {
+              if (
+                !editContext ||
+                editContext.readonly ||
+                editContext.mode !== "edit"
+              )
+                return;
+
+              editContext.setInsertMode(true);
+            }}
+          />
+        </div>
+        <div className="flex items-center gap-1">
+          <SimpleIconButton
+            icon={<LayoutTemplate strokeWidth={1} className="h-4 w-4" />}
+            label={
+              editContext?.showLayoutComponents ? "Hide layout" : "Show layout"
+            }
+            size="small"
+            selected={editContext?.showLayoutComponents}
+            onClick={() =>
+              editContext?.setShowLayoutComponents(
+                !editContext.showLayoutComponents,
+              )
+            }
+          />
+        </div>
       </div>
 
-      {/* Tree content */}
       <div className="flex-1 p-2" ref={treeRef} data-testid="component-tree">
         <PerfectTree
           nodes={rootNodes}
@@ -673,7 +824,10 @@ export function ComponentTree({}) {
             handleDragOverZone(parent as CustomTreeNode | null, index, event)
           }
           isValidDropZone={(parent, index) => {
-            const placeholder = getPlaceholder(parent as CustomTreeNode | null);
+            const { placeholder } = resolveDropContext(
+              parent as CustomTreeNode | null,
+              index,
+            );
             if (!placeholder) return false;
             if (!editContext?.dragObject) return false;
             const result = isValidPlaceholder(

package/src/editor/sidebar/Debug.tsx

@@ -106,7 +106,7 @@ export function Debug({}: {}) {
         tabs={tabs}
         activeTab={activeTab}
         setActiveTab={setActiveTab}
-        className="alpaceditor-tabs border-gray-3 flex border-b px-2 pt-2 text-sm"
+        className="border-gray-3 flex border-b px-2 pt-2 text-xs"
       />
 
       <div className="absolute top-2 right-1 h-4 w-4">

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4064";
-export const buildDate = "2025-08-25 01:54:20";
+export const version = "1.0.4065";
+export const buildDate = "2025-08-25 11:33:32";

package/src/types.ts

@@ -169,7 +169,7 @@ export type UserPreferences = {
   showViewNames?: boolean;
   showComponentNavigator?: boolean;
   showAgentsPanel?: boolean;
-  hideNonEditableComponents?: boolean;
+  showLayoutComponents?: boolean;
 };
 
 export type HistoryEntry = {

package/styles.css

@@ -426,11 +426,6 @@ body {
     background-color: unset;
   }
 
-  .alpaceditor-tabs {
-    display: flex;
-    flex-direction: column;
-  }
-
   .alpaca-no-border {
     border: none !important;
   }