@alpaca-editor/core 1.0.3959 → 1.0.3962

package/src/editor/PictureEditor.tsx

@@ -1,10 +1,4 @@
-import {
-  MouseEventHandler,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useEditContext } from "./client/editContext";
 import { PictureCropper } from "./PictureCropper";
 import { PictureField, PictureRawValue } from "./fieldTypes";
@@ -15,12 +9,7 @@ import {
   FieldActionsOverlay,
   FieldActionsOverlayRef,
 } from "./FieldActionsOverlay";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../components/ui/dropdown-menu";
+import { ImageEditButton, MenuAction } from "./ImageEditButton";
 
 export function PictureEditor({
   field,
@@ -35,7 +24,6 @@ export function PictureEditor({
   forwardScrollevents?: boolean;
   isPageEditor?: boolean;
 }) {
-  const [showMenu, setShowMenu] = useState(false);
   const [showCropper, setShowCropper] = useState(false);
   const [fieldButtons, setFieldButtons] = useState<FieldButton[]>([]);
   const fieldActionsOverlay = useRef<FieldActionsOverlayRef>(null);
@@ -159,6 +147,63 @@ export function PictureEditor({
 
   const notEmpty = variant?.mediaId;
 
+  // Build actions for the dropdown menu
+  const menuActions: MenuAction[] = [
+    {
+      id: "select",
+      label: "Select",
+      icon: "pi pi-image",
+      onClick: () => selectMedia("images"),
+    },
+    ...(field.value?.allowVideos
+      ? [
+          {
+            id: "video",
+            label: "Video",
+            icon: "pi pi-video",
+            onClick: () => selectVideo(),
+          },
+        ]
+      : []),
+    ...(notEmpty
+      ? [
+          {
+            id: "crop",
+            label: "Crop",
+            icon: "pi pi-expand",
+            onClick: () => setShowCropper(true),
+          },
+        ]
+      : []),
+    ...(rawVariant
+      ? [
+          {
+            id: "reset",
+            label: "Reset",
+            icon: "pi pi-times",
+            onClick: () => reset(),
+          },
+        ]
+      : []),
+    ...fieldButtons.map((button) => ({
+      id: button.id,
+      label: button.label,
+      icon: button.isGenerator
+        ? "pi pi-cog"
+        : button.icon && button.icon.trim() !== ""
+          ? button.icon
+          : "pi pi-bolt",
+      onClick: (e?: React.MouseEvent) => {
+        if (button.parameters && button.parameters.length > 0) {
+          fieldActionsOverlay.current?.show(e, button);
+        } else {
+          handleActionClick(button);
+        }
+      },
+      parameters: button.parameters,
+    })),
+  ];
+
   return (
     <div
       className="absolute inset-0 flex items-center justify-center"
@@ -187,92 +232,7 @@ export function PictureEditor({
       style={style}
       data-testid="select-media"
     >
-      {/* Dropdown menu with button in bottom right corner */}
-      <DropdownMenu open={showMenu} onOpenChange={setShowMenu}>
-        <DropdownMenuTrigger asChild>
-          <button
-            className="absolute right-2 bottom-2 flex h-8 w-8 items-center justify-center rounded-full border bg-gray-500 text-white opacity-70 shadow-lg transition-opacity hover:opacity-85"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            data-testid="menu-toggle-button"
-          >
-            <i className="pi pi-ellipsis-v text-xs" />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" side="top" sideOffset={8}>
-          <DropdownMenuItem
-            onClick={() => {
-              selectMedia("images");
-              setShowMenu(false);
-            }}
-          >
-            <i className="pi pi-image" />
-            Select
-          </DropdownMenuItem>
-
-          {field.value?.allowVideos && (
-            <DropdownMenuItem
-              onClick={() => {
-                selectVideo();
-                setShowMenu(false);
-              }}
-            >
-              <i className="pi pi-video" />
-              Video
-            </DropdownMenuItem>
-          )}
-
-          {notEmpty && (
-            <DropdownMenuItem
-              onClick={() => {
-                setShowCropper(true);
-                setShowMenu(false);
-              }}
-            >
-              <i className="pi pi-expand" />
-              Crop
-            </DropdownMenuItem>
-          )}
-
-          {rawVariant && (
-            <DropdownMenuItem
-              onClick={() => {
-                reset();
-                setShowMenu(false);
-              }}
-            >
-              <i className="pi pi-times" />
-              Reset
-            </DropdownMenuItem>
-          )}
-
-          {fieldButtons.map((button) => (
-            <DropdownMenuItem
-              key={button.id}
-              onClick={(e) => {
-                if (button.parameters && button.parameters.length > 0) {
-                  fieldActionsOverlay.current?.show(e, button);
-                } else {
-                  handleActionClick(button);
-                }
-                setShowMenu(false);
-              }}
-            >
-              <i
-                className={
-                  button.isGenerator
-                    ? "pi pi-cog"
-                    : button.icon && button.icon.trim() !== ""
-                      ? button.icon
-                      : "pi pi-bolt"
-                }
-              />
-              {button.label}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <ImageEditButton actions={menuActions} compact={true} />
 
       {showCropper && (
         <PictureCropper
@@ -294,37 +254,3 @@ export function PictureEditor({
     </div>
   );
 }
-
-function Btn({
-  label,
-  icon,
-  onClick,
-  testId,
-  className,
-}: {
-  label: string;
-  icon: string;
-  onClick: MouseEventHandler<HTMLButtonElement>;
-  testId?: string;
-  className?: string;
-}) {
-  const isImageUrl =
-    icon.startsWith("http://") ||
-    icon.startsWith("https://") ||
-    icon.startsWith("/");
-
-  return (
-    <button
-      className={`btn flex cursor-pointer items-center gap-1.5 rounded-lg border bg-gray-500 p-1.5 text-white opacity-70 hover:opacity-85 ${className} text-2xs`}
-      onClick={onClick}
-      data-testid={testId}
-    >
-      {isImageUrl ? (
-        <img src={icon} alt="" className="h-3 w-3" />
-      ) : (
-        <i className={icon} />
-      )}{" "}
-      {label}
-    </button>
-  );
-}

package/src/editor/client/EditorClient.tsx

@@ -408,8 +408,6 @@ export function EditorClient({
   }, [currentView]);
 
   const sendClientInfo = async () => {
-    const socket = (globalThis as any).editorSocket;
-
     const clientInfoMessage = {
       type: "client-info",
       sessionId: sessionId,
@@ -423,12 +421,14 @@ export function EditorClient({
         : null,
     };
 
-    if (socket.readyState !== WebSocket.OPEN) {
-      const url = "/alpaca/editor/client";
-      await post(url, clientInfoMessage);
-    } else {
-      socket.send(JSON.stringify(clientInfoMessage));
-    }
+    //        const socket = (globalThis as any).editorSocket;
+
+    //if (socket.readyState !== WebSocket.OPEN) {
+    const url = "/alpaca/editor/client";
+    await post(url, clientInfoMessage);
+    //} else {
+    //  socket.send(JSON.stringify(clientInfoMessage));
+    //}
   };
 
   const startTour = () => {

package/src/editor/context-menu/InsertMenu.tsx

@@ -3,7 +3,7 @@ import { ItemTreeNodeData } from "../services/contentService";
 import { useEditContext } from "../../client-components";
 import { useRef, useState, useEffect } from "react";
 import { FullItem } from "../pageModel";
-import { InputText } from "primereact/inputtext";
+import { FilterInput, highlightMatch } from "../../components/FilterInput";
 import { ScrollingContentTree } from "../ScrollingContentTree";
 import { SimpleTabs, Tab } from "../ui/SimpleTabs";
 import ItemSearch, { ResultItem } from "../ui/ItemSearch";
@@ -127,11 +127,12 @@ export const InsertMenuTemplate = ({
       label: "Options",
       content: (
         <div className="flex h-full flex-col gap-2">
-          <InputText
+          <FilterInput
             ref={filterRef}
             className="w-full text-sm"
             placeholder="Filter"
-            onChange={(e) => setFilter(e.target.value)}
+            value={filter}
+            onChange={setFilter}
           />
           <div className="relative flex-1">
             <div className="absolute inset-0 overflow-auto">
@@ -152,17 +153,7 @@ export const InsertMenuTemplate = ({
                   >
                     {option.icon}
                     <span className="flex-1">
-                      {option.label
-                        .split(new RegExp(`(${filter})`, "i"))
-                        .map((part: string, i: number) =>
-                          part.toLowerCase() === filter.toLowerCase() ? (
-                            <u className="font-bold" key={i}>
-                              {part}
-                            </u>
-                          ) : (
-                            part
-                          ),
-                        )}
+                      {highlightMatch(option.label, filter)}
                     </span>
                   </div>
                 ))}

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

@@ -60,7 +60,7 @@ export function DropListEditor({
       optionLabel="name"
       optionValue="name"
       placeholder="Select"
-      className="w-full md:w-14rem"
+      className="md:w-14rem bg-gray-5 w-full"
       virtualScrollerOptions={{
         lazy: true,
         onLazyLoad: onLazyLoad,

package/src/editor/menubar/VersionSelector.tsx

@@ -92,7 +92,7 @@ export function VersionSelector({
       </PopoverTrigger>
       <PopoverContent className="w-64 p-0" align="start">
         <Command>
-          <CommandList className="max-h-[50vh]">
+          <CommandList className="max-h-[30vh]">
             <CommandEmpty>No versions available</CommandEmpty>
             <CommandGroup>
               {versions.length > 0 && (
@@ -132,34 +132,34 @@ export function VersionSelector({
                 </CommandItem>
               ))}
             </CommandGroup>
-            {!readOnly && (
-              <>
-                <CommandSeparator />
-                <CommandGroup>
-                  <CommandItem
-                    onSelect={handleCreateVersion}
-                    className="flex items-center gap-2 px-2 py-2"
-                  >
-                    <Plus className="h-4 w-4" />
-                    <span>Add Version</span>
-                  </CommandItem>
-                  <CommandItem
-                    onSelect={handleDeleteVersion}
-                    disabled={versions.length === 0}
-                    className={cn(
-                      "flex items-center gap-2 px-2 py-2",
-                      versions.length === 0
-                        ? "cursor-not-allowed opacity-50"
-                        : "text-red-600 hover:text-red-700",
-                    )}
-                  >
-                    <X className="h-4 w-4" />
-                    <span>Delete Version</span>
-                  </CommandItem>
-                </CommandGroup>
-              </>
-            )}
           </CommandList>
+          {!readOnly && (
+            <>
+              <div className="border-t border-gray-200" />
+              <div className="p-1">
+                <CommandItem
+                  onSelect={handleCreateVersion}
+                  className="flex items-center gap-2 px-2 py-2"
+                >
+                  <Plus className="h-4 w-4" />
+                  <span>Add Version</span>
+                </CommandItem>
+                <CommandItem
+                  onSelect={handleDeleteVersion}
+                  disabled={versions.length === 0}
+                  className={cn(
+                    "flex items-center gap-2 px-2 py-2",
+                    versions.length === 0
+                      ? "cursor-not-allowed opacity-50"
+                      : "text-red-600 hover:text-red-700",
+                  )}
+                >
+                  <X className="h-4 w-4" />
+                  <span>Delete Version</span>
+                </CommandItem>
+              </div>
+            </>
+          )}
         </Command>
       </PopoverContent>
     </Popover>

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

@@ -252,12 +252,12 @@ export function FrameMenu({
     <>
       <div
         className={cn(
-          "pointer-events-none absolute inset-0 rounded-b-sm border-2",
+          "pointer-events-none absolute inset-0 rounded-b-xs border-2",
           colorVariants[color],
           "tour-frame-menu opacity-70 hover:opacity-100",
           !isMultiSelected && isHeaderWiderThanComponent && "border-t-0",
-          !isMultiSelected && !isHeaderWiderThanComponent && "rounded-tl-sm",
-          isMultiSelected && "rounded-t-sm",
+          !isMultiSelected && !isHeaderWiderThanComponent && "rounded-tl-xs",
+          isMultiSelected && "rounded-t-xs",
         )}
         style={{
           left: componentRect.x,

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

@@ -2,10 +2,8 @@ import { PageViewContext } from "./pageViewContext";
 import { EditorForm } from "./EditorForm";
 import { PageViewerFrame } from "./PageViewerFrame";
 import { useEffect, useState } from "react";
-import { useRef } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { useEditContext } from "../client/editContext";
-import { useDebouncedCallback } from "use-debounce";
 import { Ellipsis, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Splitter, SplitterPanel } from "../ui/Splitter";
@@ -32,6 +30,12 @@ export function PageViewer({
 
   if (!pageViewContext) return null;
 
+  useEffect(() => {
+    if (editContext?.insertMode) {
+      setFormEditorCollapsed(false);
+    }
+  }, [editContext?.insertMode]);
+
   useEffect(() => {
     if (
       followEdits &&
@@ -79,7 +83,7 @@ export function PageViewer({
       defaultSize: 300,
       collapsible: true,
       content: (
-        <div className="h-full w-full p-2 pl-1">
+        <div className="h-full w-full py-2 pl-2">
           <div className="border-gray-3 flex h-full w-full flex-col rounded-2xl border bg-white">
             <div className="flex-1">
               <EditorForm
@@ -134,7 +138,7 @@ export function PageViewer({
     <div className={cn("h-full w-full", className)}>
       <Splitter
         panels={panels}
-        splitterClassName="bg-transparent -ml-1"
+        splitterClassName="bg-transparent -mr-2 md:w-[8px]"
         direction={editContext?.isMobile ? "vertical" : "horizontal"}
         localStorageKey={`editor.pageViewer.${name}`}
       />

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

@@ -803,7 +803,7 @@ export function PageViewerFrame({
       : pageViewContext.deviceHeight || 640;
 
   return (
-    <div className="relative mt-2 flex h-full w-full flex-col items-center select-none">
+    <div className="relative mt-2 mr-2 ml-2 flex h-full w-full flex-col items-center select-none">
       {!editContext.pageView.fullscreen && (
         <EditorWarnings item={pageViewContext.page?.item} />
       )}

package/src/editor/sidebar/ComponentPalette.tsx

@@ -6,7 +6,7 @@ import { classNames } from "primereact/utils";
 import { InsertOption } from "../../types";
 
 import { useEditContext } from "../client/editContext";
-import { InputText } from "primereact/inputtext";
+import { FilterInput, highlightMatch } from "../../components/FilterInput";
 import { useState, useRef } from "react";
 
 export function ComponentPalette({}: {}) {
@@ -31,25 +31,13 @@ export function ComponentPalette({}: {}) {
   return (
     <div className="tour-component-palette relative flex h-full flex-col">
       <div className="p-4">
-        <div className="relative flex items-center">
-          <input
-            ref={filterRef}
-            type="text"
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-            className="w-full rounded border border-gray-300 px-2 py-1 pr-6 text-xs focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none"
-            placeholder="Filter..."
-          />
-          {!filter && (
-            <i className="pi pi-search absolute right-2 text-xs text-gray-400" />
-          )}
-          {filter && (
-            <i
-              className="pi pi-times absolute right-2 cursor-pointer text-xs text-gray-400 hover:text-gray-600"
-              onClick={() => setFilter("")}
-            />
-          )}
-        </div>
+        <FilterInput
+          ref={filterRef}
+          value={filter}
+          onChange={setFilter}
+          className="border-gray-300"
+          placeholder="Filter..."
+        />
       </div>
       <div className="relative flex-1">
         <div className="absolute inset-0 overflow-y-auto">
@@ -127,18 +115,7 @@ export function ComponentPalette({}: {}) {
                           )}
 
                           <div className="text-xs">
-                            {option.name
-                              .split(new RegExp(`(${filter})`, "i"))
-                              .map((part: string, i: number) =>
-                                part.toLowerCase() === filter.toLowerCase() &&
-                                part ? (
-                                  <u className="font-bold" key={i}>
-                                    {part}
-                                  </u>
-                                ) : (
-                                  part && <span key={i}>{part}</span>
-                                ),
-                              )}
+                            {highlightMatch(option.name, filter)}
                           </div>
 
                           {option.isInvalid && (

package/src/editor/sidebar/Insert.tsx

@@ -27,7 +27,7 @@ export function Insert() {
     <SimpleTabs
       key="insert-tabs"
       tabs={tabs}
-      className="flex items-center justify-center gap-4 border-b border-gray-200 py-3 text-sm"
+      className="border-gray-3 flex items-center justify-center gap-4 border-b pt-3 text-xs"
       activeTab={activeTab}
       setActiveTab={(index) => setActiveTab(index)}
     />

package/src/editor/sidebar/SidebarView.tsx

@@ -60,11 +60,11 @@ export function SidebarView({
     if (!panel) return <div className="hidden h-full" />;
 
     return (
-      <div className={cn("h-full", detached ? "border-gray-3 border p-2" : "")}>
+      <div className={cn("h-full", detached ? "p-2" : "")}>
         <div
           className={cn(
             "flex h-full flex-col bg-white",
-            detached ? "rounded-xl" : "",
+            detached ? "border-gray-3 rounded-xl border" : "",
           )}
         >
           {getHeader(panel, 0)}

package/src/editor/ui/Icons.tsx

@@ -715,7 +715,29 @@ export function Logo({ className }: { className?: string }) {
     </svg>
   );
 }
+
 export function MagicEditIcon() {
+  return (
+    <svg
+      width="21"
+      height="17"
+      viewBox="0 0 21 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.4141 5.70117C20.7921 5.32317 21.0001 4.82117 21.0001 4.28717C21.0001 3.75317 20.7921 3.25117 20.4141 2.87317L18.8281 1.28717C18.4501 0.909172 17.9481 0.701172 17.4141 0.701172C16.8801 0.701172 16.3781 0.909172 16.0011 1.28617L5.36914 11.8852V16.3002H9.78214L20.4141 5.70117ZM7.36914 14.3002V12.7152L14.4091 5.69717L15.9951 7.28317L8.95614 14.3002H7.36914Z"
+        fill="white"
+      />
+      <path
+        d="M0.376146 4.6906C0.63534 4.62716 0.873518 4.56373 1.1117 4.50029C1.39891 4.42276 1.69313 4.35932 1.97334 4.26064C3.05916 3.85183 3.74567 3.0765 4.03989 1.9558C4.14497 1.54699 4.25005 1.13818 4.35513 0.736414C4.35513 0.722317 4.35513 0.715269 4.37615 0.701172C4.39716 0.771656 4.41117 0.842141 4.43219 0.912625C4.54427 1.34258 4.63534 1.77254 4.77545 2.19544C5.15373 3.3232 5.93131 4.04919 7.07317 4.36637C7.47947 4.47915 7.89278 4.57782 8.29909 4.6906C8.3201 4.6906 8.33411 4.69765 8.36914 4.71174C8.21502 4.75403 8.07492 4.78928 7.92781 4.82452C7.54953 4.93025 7.16424 5.00778 6.79296 5.13465C5.71415 5.52232 5.02063 6.2906 4.7124 7.40426C4.59331 7.83421 4.48823 8.26417 4.36214 8.70117C4.36214 8.68003 4.34813 8.65888 4.34112 8.63774C4.22904 8.20073 4.13096 7.76373 3.99786 7.33377C3.64059 6.14258 2.85601 5.3743 1.65811 5.04302C1.2518 4.93025 0.845498 4.83157 0.439193 4.72584C0.418178 4.72584 0.404167 4.71879 0.369141 4.7047L0.376146 4.6906Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function MagicEditImageIcon({ className }: { className?: string }) {
   return (
     <svg
       width="15"
@@ -724,6 +746,7 @@ export function MagicEditIcon() {
       fill="none"
       strokeWidth={1}
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <path
         d="M9.49999 13.915H14M5 13.915H5.83727C6.08186 13.915 6.20416 13.915 6.31925 13.886C6.42128 13.8602 6.51883 13.8178 6.6083 13.7601C6.70922 13.6951 6.79569 13.6042 6.96865 13.4224L13.25 6.81862C13.6642 6.38315 13.6642 5.67711 13.25 5.24164C12.8358 4.80617 12.1642 4.80617 11.75 5.24164L5.46863 11.8454C5.29568 12.0272 5.2092 12.1181 5.14736 12.2242C5.09253 12.3183 5.05213 12.4208 5.02763 12.5281C5 12.6491 5 12.7777 5 13.0348V13.915Z"

package/src/editor/ui/ItemSearch.tsx

@@ -1,4 +1,3 @@
-import { InputText } from "primereact/inputtext";
 import { useEffect, useRef, useState } from "react";
 import { useEditContext } from "../client/editContext";
 import { executeSearch } from "../services/aiService";
@@ -7,6 +6,7 @@ import { ProgressSpinner } from "primereact/progressspinner";
 import { ItemDescriptor } from "../pageModel";
 import { getItemDescriptor } from "../utils";
 import { ItemList } from "./ItemList";
+import { FilterInput } from "../../components/FilterInput";
 
 export type ResultItem = {
   id: string;
@@ -117,28 +117,15 @@ export const ItemSearch: React.FC<SearchProps> = ({
   return (
     <>
       <div className="relative">
-        <div className="flex items-center">
-          <InputText
-            className="w-full rounded border border-gray-300 px-2 py-1 pr-6 text-xs focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none"
-            onChange={(e) => setQuery(e.target.value)}
-            value={query}
-            ref={inputRef}
-          />
-          {!loading && !query && (
-            <i className="pi pi-search px-3 text-gray-500" />
-          )}
-          {!loading && query && (
-            <i
-              className="pi pi-times cursor-pointer px-3 text-gray-500"
-              onClick={() => setQuery("")}
-            />
-          )}
-          {loading && (
-            <ProgressSpinner
-              style={{ width: "24px", height: "24px", margin: "0 12px" }}
-            />
-          )}
-        </div>
+        <FilterInput
+          className="focus:border-blue-400 focus:ring-blue-400"
+          onChange={setQuery}
+          value={query}
+          ref={inputRef}
+          autoFocus={autoFocus}
+          placeholder="Search..."
+          loading={loading}
+        />
       </div>
       {results.length > 0 && (
         <ItemList

package/src/editor/ui/SimpleTabs.tsx

@@ -31,12 +31,12 @@ export function SimpleTabs({
 
   return (
     <>
-      <div className={twMerge("flex gap-4", className)}>
+      <div className={twMerge("flex flex-wrap gap-2", className)}>
         {tabs.map((tab, index) => (
           <button
             id={tab.id}
             className={twMerge(
-              "flex cursor-pointer items-center gap-2 px-6 pb-2",
+              "flex min-w-0 flex-shrink cursor-pointer items-center gap-2 px-3 pb-2 whitespace-nowrap",
               activeTab === index ? "active-tab" : "",
             )}
             key={tab.id}
@@ -50,7 +50,7 @@ export function SimpleTabs({
             }}
           >
             {tab.icon && <i className={tab.icon} />}
-            {tab.label}
+            <span className="truncate">{tab.label}</span>
           </button>
         ))}
       </div>

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3959";
-export const buildDate = "2025-06-22 17:51:55";
+export const version = "1.0.3962";
+export const buildDate = "2025-06-23 12:43:13";