@alpaca-editor/core 1.0.4093 → 1.0.4094

package/src/editor/field-types/TreeListEditor.tsx

@@ -1,4 +1,7 @@
-import { Splitter, SplitterPanel } from "primereact/splitter";
+import {
+  Splitter,
+  SplitterPanel as InternalSplitterPanel,
+} from "../ui/Splitter";
 import { useEditContext } from "../client/editContext";
 import { useEffect, useState } from "react";
 
@@ -8,6 +11,7 @@ import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { normalizeGuid } from "../utils";
 import ItemSearch from "../ui/ItemSearch";
 import { Button } from "../../components/ui/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import {
   Tooltip,
   TooltipContent,
@@ -193,9 +197,154 @@ export default function TreeListEditor({
     setDraggedIndex(null);
   };
 
+  const panels: InternalSplitterPanel[] = [
+    {
+      name: "tree",
+      defaultSize: "auto",
+      className: "relative",
+      content: (
+        <div
+          className={`absolute inset-0 overflow-auto ${readOnly ? "bg-gray-5" : ""}`}
+        >
+          <ContentTree
+            expandIdPath={hoveredItem?.idPath}
+            language={editContext.currentItemDescriptor?.language ?? "en"}
+            onDoubleClick={(node) => {
+              if (!readOnly) addToList([node]);
+            }}
+            selectionMode="multiple"
+            selectedItemIds={
+              selectedItemNodesInTree.length
+                ? selectedItemNodesInTree.map((x) => x.id)
+                : hoveredItemId
+                  ? [hoveredItemId]
+                  : []
+            }
+            onSelectionChange={(e) => {
+              setSelectedItemNodesInTree(e as ItemData[]);
+            }}
+            rootItemIds={rootItemIds}
+            includeItemPath={true}
+          />
+        </div>
+      ),
+    },
+    {
+      name: "selectedList",
+      defaultSize: "auto",
+      className: "relative",
+      content: (
+        <div className="relative h-full w-full">
+          <div
+            className={`absolute inset-0 overflow-auto text-xs ${readOnly ? "bg-gray-5" : "bg-white"}`}
+          >
+            {values.length === 0 ? (
+              <div className="p-3 text-center text-gray-500">None selected</div>
+            ) : (
+              values.map((option, index) => (
+                <Tooltip key={`${option.id}-${index}`} delayDuration={1000}>
+                  <TooltipTrigger asChild>
+                    <div
+                      draggable={!readOnly}
+                      onDragStart={(e) => handleDragStart(e, index)}
+                      onDragOver={handleDragOver}
+                      onDrop={(e) => handleDrop(e, index)}
+                      onDragEnd={handleDragEnd}
+                      className={`group relative flex cursor-pointer items-center gap-1.5 border-b border-gray-100 p-1 select-none last:border-b-0 hover:bg-gray-50 ${
+                        selectedFromList.includes(option) ? "bg-blue-100" : ""
+                      } ${draggedIndex === index ? "opacity-50" : ""} ${
+                        !readOnly ? "cursor-move" : ""
+                      }`}
+                      onClick={(e) => {
+                        if (e.shiftKey && lastClickedIndex !== null) {
+                          const startIndex = Math.min(lastClickedIndex, index);
+                          const endIndex = Math.max(lastClickedIndex, index);
+                          const rangeItems = values.slice(
+                            startIndex,
+                            endIndex + 1,
+                          );
+                          setSelectedFromList(rangeItems);
+                        } else if (e.ctrlKey) {
+                          if (selectedFromList.includes(option)) {
+                            setSelectedFromList(
+                              selectedFromList.filter(
+                                (item) => item !== option,
+                              ),
+                            );
+                          } else {
+                            setSelectedFromList([...selectedFromList, option]);
+                          }
+                          setLastClickedIndex(index);
+                        } else {
+                          if (
+                            selectedFromList.length === 1 &&
+                            selectedFromList.includes(option)
+                          ) {
+                            setSelectedFromList([]);
+                            setLastClickedIndex(null);
+                          } else {
+                            setSelectedFromList([option]);
+                            setLastClickedIndex(index);
+                          }
+                        }
+                      }}
+                      onMouseEnter={async () => {
+                        setHoveredItemId(option.id);
+                        setSelectedItemNodesInTree([
+                          {
+                            id: option.id,
+                            path: option.path,
+                            name: option.name,
+                            icon: option.icon,
+                            idPath: option.idPath || "",
+                          },
+                        ]);
+                      }}
+                      onDoubleClick={() => {
+                        if (!readOnly) removeFromList([option]);
+                      }}
+                    >
+                      <img src={option.icon} className="h-4 w-4" />
+                      {trimPath(option.path)}{" "}
+                      {activeOpenButtonId === option.id ? (
+                        <Button
+                          className="h-4 p-1"
+                          size="sm"
+                          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                            e.stopPropagation();
+                            editContext.loadItem(option.id);
+                            setActiveOpenButtonId("");
+                          }}
+                        >
+                          Open
+                        </Button>
+                      ) : (
+                        <button
+                          className="cursor-pointer opacity-0 transition-opacity group-hover:opacity-100"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setActiveOpenButtonId(option.id);
+                          }}
+                          title="Open"
+                        >
+                          <i className="pi pi-arrow-up-right text-xs text-gray-500" />
+                        </button>
+                      )}
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>{option.path}</TooltipContent>
+                </Tooltip>
+              ))
+            )}
+          </div>
+        </div>
+      ),
+    },
+  ];
+
   return (
     <div
-      className={`focus-shadow border border-gray-200 ${readOnly ? "bg-gray-5" : ""}`}
+      className={`focus-shadow rounded-sm border border-gray-200 ${readOnly ? "bg-gray-5" : ""}`}
     >
       <div
         className={`border-b border-gray-200 p-2 ${readOnly ? "bg-gray-5" : "bg-gray-5"}`}
@@ -216,183 +365,34 @@ export default function TreeListEditor({
           }}
         />
       </div>
-      <Splitter className="h-60">
-        <SplitterPanel size={50} className="relative">
-          <div
-            className={`absolute inset-0 overflow-auto ${readOnly ? "bg-gray-5" : ""}`}
-          >
-            <ContentTree
-              expandIdPath={hoveredItem?.idPath}
-              language={editContext.currentItemDescriptor?.language ?? "en"}
-              onDoubleClick={(node) => {
-                if (!readOnly) addToList([node]);
-              }}
-              selectionMode="multiple"
-              selectedItemIds={
-                selectedItemNodesInTree.length
-                  ? selectedItemNodesInTree.map((x) => x.id)
-                  : hoveredItemId
-                    ? [hoveredItemId]
-                    : []
-              }
-              onSelectionChange={(e) => {
-                setSelectedItemNodesInTree(e as ItemData[]);
-              }}
-              rootItemIds={rootItemIds}
-              includeItemPath={true}
-            />
-          </div>
-        </SplitterPanel>
-        <SplitterPanel>
-          <div className="relative h-full w-full">
-            <div className="absolute inset-0 flex">
-              <div
-                className={`flex flex-col justify-center gap-1 p-1 ${readOnly ? "bg-gray-5" : "bg-gray-100"}`}
-              >
-                <SimpleIconButton
-                  label="Add"
-                  icon="pi pi-angle-right"
-                  onClick={() => addToList(selectedItemNodesInTree)}
-                  disabled={readOnly}
-                />
-                <SimpleIconButton
-                  label="Remove"
-                  icon="pi pi-angle-left"
-                  onClick={() => removeFromList(selectedFromList)}
-                  disabled={readOnly}
-                />
-              </div>
-              <div className="relative h-full flex-1">
-                <div
-                  className={`absolute inset-0 overflow-auto text-xs ${readOnly ? "bg-gray-5" : "bg-white"}`}
-                >
-                  {values.length === 0 ? (
-                    <div className="p-3 text-center text-gray-500">
-                      None selected
-                    </div>
-                  ) : (
-                    values.map((option, index) => (
-                      <Tooltip
-                        key={`${option.id}-${index}`}
-                        delayDuration={1000}
-                      >
-                        <TooltipTrigger asChild>
-                          <div
-                            draggable={!readOnly}
-                            onDragStart={(e) => handleDragStart(e, index)}
-                            onDragOver={handleDragOver}
-                            onDrop={(e) => handleDrop(e, index)}
-                            onDragEnd={handleDragEnd}
-                            className={`group relative flex cursor-pointer items-center gap-1.5 border-b border-gray-100 p-1 select-none last:border-b-0 hover:bg-gray-50 ${
-                              selectedFromList.includes(option)
-                                ? "bg-blue-100"
-                                : ""
-                            } ${draggedIndex === index ? "opacity-50" : ""} ${
-                              !readOnly ? "cursor-move" : ""
-                            }`}
-                            onClick={(e) => {
-                              if (e.shiftKey && lastClickedIndex !== null) {
-                                // Range selection mode when Shift is pressed
-                                const startIndex = Math.min(
-                                  lastClickedIndex,
-                                  index,
-                                );
-                                const endIndex = Math.max(
-                                  lastClickedIndex,
-                                  index,
-                                );
-                                const rangeItems = values.slice(
-                                  startIndex,
-                                  endIndex + 1,
-                                );
-                                setSelectedFromList(rangeItems);
-                              } else if (e.ctrlKey) {
-                                // Multi-select mode when Ctrl is pressed
-                                if (selectedFromList.includes(option)) {
-                                  setSelectedFromList(
-                                    selectedFromList.filter(
-                                      (item) => item !== option,
-                                    ),
-                                  );
-                                } else {
-                                  setSelectedFromList([
-                                    ...selectedFromList,
-                                    option,
-                                  ]);
-                                }
-                                setLastClickedIndex(index);
-                              } else {
-                                // Single-select mode when Ctrl is not pressed
-                                if (
-                                  selectedFromList.length === 1 &&
-                                  selectedFromList.includes(option)
-                                ) {
-                                  // Deselect if this is the only selected item
-                                  setSelectedFromList([]);
-                                  setLastClickedIndex(null);
-                                } else {
-                                  // Replace selection with just this item
-                                  setSelectedFromList([option]);
-                                  setLastClickedIndex(index);
-                                }
-                              }
-                            }}
-                            onMouseEnter={async () => {
-                              setHoveredItemId(option.id);
-                              setSelectedItemNodesInTree([
-                                {
-                                  id: option.id,
-                                  path: option.path,
-                                  name: option.name,
-                                  icon: option.icon,
-                                  idPath: option.idPath || "",
-                                },
-                              ]);
-                            }}
-                            onDoubleClick={() => {
-                              if (!readOnly) removeFromList([option]);
-                            }}
-                          >
-                            <img src={option.icon} className="h-4 w-4" />
-                            {trimPath(option.path)}{" "}
-                            {activeOpenButtonId === option.id ? (
-                              <Button
-                                className="h-4 p-1"
-                                size="sm"
-                                onClick={(
-                                  e: React.MouseEvent<HTMLButtonElement>,
-                                ) => {
-                                  e.stopPropagation();
-                                  editContext.loadItem(option.id);
-                                  setActiveOpenButtonId("");
-                                }}
-                              >
-                                Open
-                              </Button>
-                            ) : (
-                              <button
-                                className="cursor-pointer opacity-0 transition-opacity group-hover:opacity-100"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setActiveOpenButtonId(option.id);
-                                }}
-                                title="Open"
-                              >
-                                <i className="pi pi-arrow-up-right text-xs text-gray-500" />
-                              </button>
-                            )}
-                          </div>
-                        </TooltipTrigger>
-                        <TooltipContent>{option.path}</TooltipContent>
-                      </Tooltip>
-                    ))
-                  )}
-                </div>
-              </div>
+      <Splitter
+        className="h-60"
+        panels={panels}
+        handleContent={(index) =>
+          index === 0 ? (
+            <div
+              className={`flex flex-col items-center gap-1 rounded bg-gray-100 py-1 ${readOnly ? "opacity-50" : ""}`}
+            >
+              <SimpleIconButton
+                label="Add"
+                icon={<ChevronRight size={14} strokeWidth={1} />}
+                onClick={() => addToList(selectedItemNodesInTree)}
+                disabled={readOnly}
+                showTooltip={false}
+                className="px-0"
+              />
+              <SimpleIconButton
+                label="Remove"
+                icon={<ChevronLeft size={14} strokeWidth={1} />}
+                onClick={() => removeFromList(selectedFromList)}
+                disabled={readOnly}
+                showTooltip={false}
+                className="px-0"
+              />
             </div>
-          </div>
-        </SplitterPanel>
-      </Splitter>
+          ) : null
+        }
+      />
     </div>
   );
 }

package/src/editor/menubar/PageSelector.tsx

@@ -13,7 +13,7 @@ import { ItemTreeNodeData } from "../services/contentService";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { executeSearch } from "../services/searchService";
 import { ItemList } from "../ui/ItemList";
-import { DotsVerticalIcon } from "@radix-ui/react-icons";
+import { History, FolderTree } from "lucide-react";
 import {
   Popover,
   PopoverContent,
@@ -211,14 +211,14 @@ export function PageSelector({
               </div>
               <div className="flex gap-1">
                 <SimpleIconButton
-                  icon="pi pi-sitemap"
+                  icon={<FolderTree className="h-4 w-4" strokeWidth={1} />}
                   label="Search Content"
                   selected={!showHistory}
                   onClick={() => setShowHistory(false)}
                   size="small"
                 />
                 <SimpleIconButton
-                  icon="pi pi-history"
+                  icon={<History className="h-4 w-4" strokeWidth={1} />}
                   label="Filter History"
                   selected={showHistory}
                   onClick={() => setShowHistory(true)}

package/src/editor/page-editor-chrome/FrameMenu.tsx

@@ -241,8 +241,8 @@ export function FrameMenu({
   function getColor() {
     if (isReadonly) return "readonly";
     if (editContext?.mode === "suggestions") return "suggestions";
-    if (isShared) return "shared";
     if (isLayout) return "layout";
+    if (isShared) return "shared";
     if (component.canBeMoved) return "default";
     return "nonMovable";
   }

package/src/editor/page-editor-chrome/InlineEditor.tsx

@@ -12,6 +12,7 @@ import { createPatch } from "diff";
 // import { useDebouncedCallback } from "use-debounce";
 // import { executePrompt } from "../services/aiService";
 import { useInlineAiCompletion } from "./useInlineAICompletion";
+import { getComponentById } from "../componentTreeHelper";
 
 export function InlineEditor({
   pageViewContext,
@@ -112,6 +113,15 @@ export function InlineEditor({
 
       if (!fieldId || !itemId || !language || !version) return;
 
+      // Guard: if layout components are hidden, do not allow editing fields of layout components
+      if (
+        contextRef.current?.showLayoutComponents === false &&
+        contextRef.current?.page
+      ) {
+        const owner = getComponentById(itemId, contextRef.current.page);
+        if (owner?.layoutId) return;
+      }
+
       const fieldDescriptor = getFieldDescriptorFromElement(element);
 
       const hasFielLock =

package/src/editor/page-editor-chrome/PictureEditorOverlay.tsx

@@ -57,6 +57,17 @@ export function PictureEditorOverlay() {
 
         if (component == null) return;
 
+        // Guard: if layout components are hidden, do not show picture editor overlay for layout components
+        if (
+          editContextRef.current?.showLayoutComponents === false &&
+          component.layoutId
+        ) {
+          setField(undefined);
+          setVariantName(undefined);
+          setElement(undefined);
+          return;
+        }
+
         const item = await editContext!.itemsRepository.getItem(
           component.datasourceItem!,
         );

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

@@ -6,6 +6,7 @@ import { useDebouncedCallback } from "use-debounce";
 import { PageViewContext } from "./pageViewContext";
 import { EditorConfiguration } from "../../config/types";
 import { cn } from "../../lib/utils";
+import { Lock, LockOpen } from "lucide-react";
 
 export function DeviceToolbar({
   pageViewContext,
@@ -53,9 +54,15 @@ export function DeviceToolbar({
         onChange={(e) => debouncedSetDeviceHeight(e.value || undefined)}
       />
       <SimpleIconButton
-        icon="pi pi-lock"
+        icon={
+          pageViewContext.lockHeight ? (
+            <Lock className="h-4 w-4" strokeWidth={1} />
+          ) : (
+            <LockOpen className="h-4 w-4" strokeWidth={1} />
+          )
+        }
         className="hover:bg-gray-3"
-        selected={pageViewContext.lockHeight || false}
+        selected={false}
         onClick={() =>
           pageViewContext.setLockHeight(!pageViewContext.lockHeight)
         }

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

@@ -180,13 +180,8 @@ export function EditorForm({
     fullItem.language === item.language &&
     fullItem.version === item.version;
 
-  // While the new full item is loading, render nothing to avoid showing stale content
-  if (hasDatasource && (!item || !fullItemMatchesSelection)) {
-    return <div className="h-full w-full"></div>;
-  }
-
   // Keep showing a spinner only when loading additional component items
-  if (isLoadingComponentItems)
+  if (!fullItemMatchesSelection)
     return (
       <div className="grid h-full w-full items-center justify-center">
         <Spinner />

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

@@ -428,6 +428,19 @@ export function PageViewerFrame({
 
       const range = sel.getRangeAt(0);
 
+      // Guard: if layout components are hidden, do not set focus for fields of layout components
+      if (
+        editContextRef.current?.showLayoutComponents === false &&
+        pageViewContextRef.current?.page
+      ) {
+        const ownerId = fieldElement.getAttribute("data-itemid") || "";
+        const owner = getComponentById(
+          ownerId,
+          pageViewContextRef.current!.page!,
+        );
+        if (owner?.layoutId) return;
+      }
+
       fieldsContextRef.current?.setFocusedField(
         {
           fieldId: fieldId,
@@ -554,6 +567,21 @@ export function PageViewerFrame({
       ) {
         const fieldElement = findParentWithAttribute(target, "data-fieldid");
         if (fieldElement?.hasAttribute("data-itemid")) {
+          // Guard: if layout components are hidden, do not allow editing fields of layout components
+          if (
+            editContextRef.current?.showLayoutComponents === false &&
+            pageViewContextRef.current?.page
+          ) {
+            const owningItemId = fieldElement.getAttribute("data-itemid") || "";
+            const ownerComponent = getComponentById(
+              owningItemId,
+              pageViewContextRef.current!.page!,
+            );
+            if (ownerComponent?.layoutId) {
+              return;
+            }
+          }
+
           blockBlurEventRef.current = Date.now() + 500;
 
           const hasLock =

package/src/editor/pageModel.ts

@@ -67,6 +67,7 @@ export type Field = {
   isFallback?: boolean;
   isStandardValue?: boolean;
   isShared?: boolean;
+  hasValue?: boolean;
   sourceItems: ItemRef[];
   buttons?: FieldButton[];
   fallbackChain?: FieldDescriptor[];

package/src/editor/services/aiService.ts

@@ -18,6 +18,8 @@ export type AiProfile = {
   models: AiModel[]; // Array of model objects with id and name
   prompts: { prompt: string; title: string }[];
   errorMessage?: string;
+  // Whether a new agent should be seeded with current item/selection/field
+  includeEditorContextOnCreate?: boolean;
 };
 
 export async function loadAiProfiles(

package/src/editor/ui/Splitter.tsx

@@ -19,6 +19,9 @@ interface SplitterProps {
   className?: string;
   splitterClassName?: string;
   expandButtonClassName?: string;
+  // Optional render function to inject custom content into a splitter handle.
+  // Receives the handle index (between panel i and i+1). Return null to render nothing.
+  handleContent?: (index: number) => React.ReactNode;
 }
 
 type StoredSizes = { panels: PanelSizes; lastCollapsed: boolean };
@@ -32,6 +35,7 @@ export const Splitter: React.FC<SplitterProps> = ({
   className,
   splitterClassName,
   expandButtonClassName,
+  handleContent,
 }) => {
   const totalPanels = panels.length;
 
@@ -357,7 +361,7 @@ export const Splitter: React.FC<SplitterProps> = ({
           minWidth: isHorizontal ? "4px" : undefined,
           boxSizing: "border-box",
           userSelect: "none",
-          zIndex: 9999, // Ensure we're above any nested splitters
+          zIndex: 1, // Ensure we're above any nested splitters
         }}
         onDoubleClick={
           isLastResizer(index) ? toggleLastPanelCollapse : undefined
@@ -383,6 +387,22 @@ export const Splitter: React.FC<SplitterProps> = ({
           }`}
         />
 
+        {/* Custom handle content */}
+        {handleContent && (
+          <div
+            className="pointer-events-auto flex items-center justify-center"
+            onMouseDown={(e) => {
+              // Prevent starting drag when interacting with handle content
+              e.stopPropagation();
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {handleContent(index)}
+          </div>
+        )}
+
         {/* Small collapse button for collapsible panels */}
         {lastPanelCollapsible &&
           !isLastPanelCollapsed &&
@@ -435,7 +455,11 @@ export const Splitter: React.FC<SplitterProps> = ({
 
   return (
     <div
-      className={`flex ${direction === "horizontal" ? "flex-row" : "flex-col"} h-full w-full overflow-hidden ${className || ""}`}
+      className={`flex ${
+        direction === "horizontal" ? "flex-row" : "flex-col"
+      } ${
+        className && /(^|\s)h-/.test(className) ? "" : "h-full"
+      } ${className && /(^|\s)w-/.test(className) ? "" : "w-full"} overflow-hidden ${className || ""}`}
       ref={splitterRef}
     >
       {panels.map((panel, index) => (

package/src/page-wizard/steps/ComponentTypesSelector.tsx

@@ -171,7 +171,7 @@ export function ComponentTypeSelector({
         {/* Component Types Section */}
         <div className="min-w-0 flex-1 rounded">
           <div className="mb-2 flex items-center justify-between">
-            <h4 className="text-sm font-bold">Component Types</h4>
+            <h4 className="text-sm">Component Types</h4>
           </div>
 
           {/* Selected component tags */}