@alpaca-editor/core 1.0.4111 → 1.0.4114

package/dist/revision.js

@@ -1,3 +1,3 @@
-export const version = "1.0.4111";
-export const buildDate = "2025-09-25 09:06:17";
+export const version = "1.0.4114";
+export const buildDate = "2025-09-25 14:12:59";
 //# sourceMappingURL=revision.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.4111",
+  "version": "1.0.4114",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ui/context-menu.tsx

@@ -64,10 +64,13 @@ function ContextMenu({ children }: { children: React.ReactNode }) {
     window.addEventListener("keydown", handleKeyDown, true);
     // Use bubble phase so capture-phase handlers inside the menu can stop propagation
     window.addEventListener("pointerdown", handlePointerDown as any);
+    // Also listen for click events so synthetic clicks (e.g., forwarded from iframes) close the menu
+    window.addEventListener("click", handlePointerDown as any);
     window.addEventListener("contextmenu", handlePointerDown as any);
     return () => {
       window.removeEventListener("keydown", handleKeyDown, true);
       window.removeEventListener("pointerdown", handlePointerDown as any);
+      window.removeEventListener("click", handlePointerDown as any);
       window.removeEventListener("contextmenu", handlePointerDown as any);
     };
   }, [isOpen, close]);
@@ -161,13 +164,15 @@ function ContextMenuContent({
 }: React.HTMLAttributes<HTMLDivElement>) {
   const { isOpen, position, close, registerContainer, unregisterContainer } =
     useContextMenuRoot();
-  const contentRef = React.useRef<HTMLDivElement | null>(null);
 
-  React.useEffect(() => {
-    const el = contentRef.current;
-    registerContainer(el);
-    return () => unregisterContainer(el);
-  }, [registerContainer, unregisterContainer]);
+  const contentRefCallback = React.useCallback(
+    (el: HTMLDivElement | null) => {
+      if (el) {
+        registerContainer(el);
+      }
+    },
+    [registerContainer],
+  );
 
   if (!isOpen || !position) return null;
 
@@ -177,7 +182,7 @@ function ContextMenuContent({
 
   const node = (
     <div
-      ref={contentRef}
+      ref={contentRefCallback}
       data-slot="context-menu-content"
       data-testid="context-menu-content"
       className={cn(
@@ -220,12 +225,42 @@ function ContextMenuItem({
 }: ItemCommonProps) {
   const { close } = useContextMenuRoot();
   const disabled = rest.disabled ?? false;
+  const executedRef = React.useRef(false);
 
-  const handle = (e: React.MouseEvent<HTMLDivElement>) => {
+  const performAction = (e: React.MouseEvent<HTMLDivElement>) => {
     if (disabled) return;
-    if (onClick) onClick(e);
-    if (onSelect) onSelect(e);
-    close();
+    if (executedRef.current) return;
+    executedRef.current = true;
+    try {
+      if (onClick) onClick(e);
+      if (onSelect) onSelect(e);
+      close();
+    } finally {
+      // Reset in next tick so a subsequent distinct click can trigger again
+      setTimeout(() => {
+        executedRef.current = false;
+      }, 0);
+    }
+  };
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    // Trigger on primary-button press for snappier UX and to avoid external handlers interfering
+    if (e.button === 0) {
+      performAction(e);
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    // Fallback in case mousedown didn't fire
+    performAction(e);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      // Cast to any to reuse performAction signature
+      performAction(e as unknown as React.MouseEvent<HTMLDivElement>);
+    }
   };
   return (
     <div
@@ -239,7 +274,9 @@ function ContextMenuItem({
         "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
-      onClick={handle}
+      onMouseDown={handleMouseDown}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
       {...rest}
     />
   );
@@ -466,13 +503,21 @@ function ContextMenuSubContent({
 }: React.HTMLAttributes<HTMLDivElement>) {
   const { isOpen, setOpen, triggerRef } = useSubmenu();
   const { registerContainer, unregisterContainer } = useContextMenuRoot();
-  const ref = React.useRef<HTMLDivElement | null>(null);
 
   const [coords, setCoords] = React.useState<{ left: number; top: number }>({
     left: 0,
     top: 0,
   });
 
+  const subContentRefCallback = React.useCallback(
+    (el: HTMLDivElement | null) => {
+      if (el) {
+        registerContainer(el);
+      }
+    },
+    [registerContainer],
+  );
+
   React.useEffect(() => {
     const trig = triggerRef.current;
     if (!trig) return;
@@ -480,17 +525,11 @@ function ContextMenuSubContent({
     setCoords({ left: rect.right, top: rect.top });
   }, [triggerRef.current, isOpen]);
 
-  React.useEffect(() => {
-    const el = ref.current;
-    registerContainer(el);
-    return () => unregisterContainer(el);
-  }, [registerContainer, unregisterContainer]);
-
   if (!isOpen) return null;
 
   const node = (
     <div
-      ref={ref}
+      ref={subContentRefCallback}
       data-slot="context-menu-sub-content"
       data-testid="context-menu-sub-content"
       className={cn(
@@ -500,8 +539,6 @@ function ContextMenuSubContent({
       style={{ position: "fixed", left: coords.left, top: coords.top }}
       onMouseLeave={() => setOpen(false)}
       onMouseEnter={() => setOpen(true)}
-      onMouseDownCapture={(e) => e.stopPropagation()}
-      onClick={(e) => e.stopPropagation()}
     >
       {children}
     </div>

package/src/config/config.tsx

@@ -577,14 +577,14 @@ export const getConfiguration = (): EditorConfiguration => {
                 name: "comments",
                 title: "Comments & Suggestions",
                 content: <Comments />,
-                initialSize: 100,
+                initialSize: 65,
                 noOverflow: true,
               },
               {
                 name: "latest-feedback",
                 title: "Latest Feedback",
                 content: <LatestFeedback />,
-                initialSize: 50,
+                initialSize: 35,
               },
             ],
           },

package/src/editor/ContextMenu.tsx

@@ -380,8 +380,6 @@ export const EditContextMenu = forwardRef<
                 }
                 // default Radix behavior closes menu on item click
               }}
-              onMouseDownCapture={(e) => e.stopPropagation()}
-              onMouseUpCapture={(e) => e.stopPropagation()}
               disabled={item.disabled}
               className={cn("cursor-pointer", item.className)}
             >

package/src/editor/client/EditorShell.tsx

@@ -137,11 +137,12 @@ import { useQuota } from "./hooks/useQuota";
 import { useEditorUrlSync } from "./hooks/useEditorUrlSync";
 
 import { useMediaQuery } from "./hooks/useMediaQuery";
-import { useGlobalEditorEvents } from "./hooks/useGlobalEditorEvents";
+
 import { FullscreenControls } from "./ui/FullscreenControls";
 import { EditorChrome } from "./ui/EditorChrome";
 import { useWorkbox } from "./hooks/useWorkbox";
 import { useMediaSelector } from "./hooks/useMediaSelector";
+import { useGlobalEditorKeyDown } from "./hooks/useGlobalEditorKeyDown";
 
 export type FieldAction = {
   field: FieldDescriptor;
@@ -1525,10 +1526,7 @@ export function EditorShell({
     executeCommand,
   });
 
-  useGlobalEditorEvents({
-    onKeyDown: handleKeyDown,
-    onWindowClick: () => contextMenuRef.current?.close({}),
-  });
+  useGlobalEditorKeyDown(handleKeyDown);
 
   useEffect(() => {
     const handleGlobalBlur = () => {

package/src/editor/client/hooks/useGlobalEditorKeyDown.ts

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+export function useGlobalEditorKeyDown(onKeyDown: (ev: KeyboardEvent) => void) {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [onKeyDown]);
+}

package/src/editor/reviews/CommentView.tsx

@@ -86,23 +86,47 @@ export function CommentView({
     const componentName = isComponentDifferent ? comment.itemName : undefined;
     const fieldName = comment.fieldName;
 
-    const segments = [pageName, componentName, fieldName].filter(
-      (x): x is string => !!x && x.length > 0,
-    );
+    const hasPageName = !!pageName && pageName.length > 0;
+    const hasComponentName = !!componentName && componentName.length > 0;
+    const hasFieldName = !!fieldName && fieldName.length > 0;
 
-    if (segments.length === 0) return null;
+    if (!hasPageName && !hasComponentName && !hasFieldName) return null;
 
     return (
       <div
         className={`${compact ? "mt-2" : "mt-3"} flex items-center border-t pt-${compact ? "2" : "3"} text-xs`}
         data-testid="comment-context-info"
       >
-        {segments.map((seg, idx) => (
-          <React.Fragment key={idx}>
-            {idx > 0 && <div className="text-2xs mx-2 text-gray-500">&gt;</div>}
-            <div className="text-2xs text-gray-500">{seg}</div>
-          </React.Fragment>
-        ))}
+        {hasPageName && (
+          <div
+            className="text-2xs text-gray-500"
+            data-testid="comment-page-name"
+          >
+            {pageName}
+          </div>
+        )}
+        {hasPageName && (hasComponentName || hasFieldName) && (
+          <div className="text-2xs mx-2 text-gray-500">&gt;</div>
+        )}
+        {hasComponentName && (
+          <div
+            className="text-2xs text-gray-500"
+            data-testid="comment-component-name"
+          >
+            {componentName}
+          </div>
+        )}
+        {hasComponentName && hasFieldName && (
+          <div className="text-2xs mx-2 text-gray-500">&gt;</div>
+        )}
+        {hasFieldName && (
+          <div
+            className="text-2xs text-gray-500"
+            data-testid="comment-field-name"
+          >
+            {fieldName}
+          </div>
+        )}
       </div>
     );
   };

package/src/editor/sidebar/SidebarView.tsx

@@ -93,8 +93,10 @@ export function SidebarView({
   // Multiple panels - use existing Splitter component
   const splitterPanels: SplitterPanel[] = resolvedPanels.map(
     (panel, index) => ({
-      name: `panel-${index}`,
-      defaultSize: index === 0 ? panel.initialSize || 300 : "auto",
+      // Use stable names so persisted sizes map correctly per panel
+      name: panel.name || `panel-${index}`,
+      // Respect each panel's initialSize (treat as proportional weight)
+      defaultSize: panel.initialSize,
       content: (
         <div className="flex h-full flex-col bg-white">
           {getHeader(panel, index)}
@@ -117,7 +119,10 @@ export function SidebarView({
     <Splitter
       panels={splitterPanels}
       direction="vertical"
-      localStorageKey={`sidebar-${sidebar.panels.length}-panels`}
+      // Key per view and panel composition to avoid cross-view collisions
+      localStorageKey={`sidebar-${editContext.viewName}-${splitterPanels
+        .map((p) => p.name)
+        .join("-")}`}
       className={cn(detached ? "p-2" : "", !active ? "hidden" : "")}
     />
   );

package/src/editor/ui/Splitter.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
 import { flushSync } from "react-dom";
 import { cn } from "../../lib/utils";
 export type SplitterPanel = {
@@ -68,19 +68,104 @@ export const Splitter: React.FC<SplitterProps> = ({
 
   const [isResizing, setIsResizing] = useState(false);
 
-  useEffect(() => {
-    if (!panelSizes && splitterRef.current) {
-      const initialSizes: PanelSizes = {};
+  useLayoutEffect(() => {
+    if (panelSizes || !splitterRef.current) return;
 
-      panels.forEach((panel) => {
-        initialSizes[panel.name] = panel.defaultSize;
-      });
+    const container = splitterRef.current;
+    const isHorizontal = direction === "horizontal";
+
+    const computeAndSet = (containerSize: number) => {
+      const visiblePanels = panels.filter((p) => !p.hidden);
+      if (visiblePanels.length === 0) return;
+
+      const minPanelSize = 50;
+
+      const fixedPanels = visiblePanels.filter(
+        (p) => typeof p.defaultSize === "number",
+      );
+      const autoPanels = visiblePanels.filter((p) => p.defaultSize === "auto");
+
+      const sumFixed = fixedPanels.reduce((sum, p) => {
+        const size = p.defaultSize as number;
+        return sum + (typeof size === "number" ? size : 0);
+      }, 0);
 
-      setPanelSizes(initialSizes);
+      const updated: PanelSizes = {};
+
+      if (autoPanels.length === 0) {
+        const scale =
+          containerSize > 0 && sumFixed > 0 ? containerSize / sumFixed : 1;
+        visiblePanels.forEach((p) => {
+          updated[p.name] = Math.max(
+            minPanelSize,
+            Math.round((p.defaultSize as number) * scale),
+          );
+        });
+      } else if (containerSize > 0) {
+        const minAutoTotal = autoPanels.length * minPanelSize;
+        const remainder = containerSize - sumFixed;
+
+        if (remainder >= minAutoTotal) {
+          const per = Math.floor(remainder / autoPanels.length);
+          fixedPanels.forEach((p) => {
+            updated[p.name] = p.defaultSize as number;
+          });
+          autoPanels.forEach((p) => {
+            updated[p.name] = per;
+          });
+        } else {
+          const availableForFixed = Math.max(0, containerSize - minAutoTotal);
+          const scale = sumFixed > 0 ? availableForFixed / sumFixed : 0;
+
+          fixedPanels.forEach((p) => {
+            updated[p.name] = Math.max(
+              minPanelSize,
+              Math.round((p.defaultSize as number) * scale),
+            );
+          });
+          autoPanels.forEach((p) => {
+            updated[p.name] = minPanelSize;
+          });
+        }
+      } else {
+        // Fallback when container size is 0
+        fixedPanels.forEach((p) => {
+          updated[p.name] = p.defaultSize as number;
+        });
+        autoPanels.forEach((p) => {
+          updated[p.name] = minPanelSize;
+        });
+      }
+
+      setPanelSizes(updated);
+    };
+
+    const initialSize = isHorizontal
+      ? container.clientWidth
+      : container.clientHeight;
+
+    if (initialSize > 0) {
+      computeAndSet(initialSize);
+      return;
     }
-  }, [panels]);
 
-  // No container size tracking needed with fractional sizing
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const size = isHorizontal
+          ? entry.contentRect.width
+          : entry.contentRect.height;
+        if (size > 0) {
+          computeAndSet(size);
+          ro.disconnect();
+          break;
+        }
+      }
+    });
+    ro.observe(container);
+    return () => {
+      ro.disconnect();
+    };
+  }, [panels, panelSizes, direction]);
 
   useEffect(() => {
     if (panelSizes) {

package/src/editor/utils/keyboardNavigation.ts

@@ -49,6 +49,7 @@ export function useKeyboardNavigation(deps: KeyboardNavigationDependencies) {
         await operations.redo();
       }
       if (event.ctrlKey && event.key === "F11") {
+        console.log("F11 pressed");
         event.preventDefault();
         if (!configuration.forceFullscreen) {
           pageViewContext.setFullscreen(false);

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4111";
-export const buildDate = "2025-09-25 09:06:17";
+export const version = "1.0.4114";
+export const buildDate = "2025-09-25 14:12:59";

package/dist/editor/client/hooks/useGlobalEditorEvents.d.ts

@@ -1,4 +0,0 @@
-export declare function useGlobalEditorEvents(params: {
-    onKeyDown: (ev: KeyboardEvent) => void;
-    onWindowClick: () => void;
-}): void;

package/dist/editor/client/hooks/useGlobalEditorEvents.js

@@ -1,25 +0,0 @@
-import { useEffect } from "react";
-export function useGlobalEditorEvents(params) {
-    const { onKeyDown, onWindowClick } = params;
-    useEffect(() => {
-        if (typeof window === "undefined")
-            return;
-        window.addEventListener("keydown", onKeyDown, true);
-        const onClickCapture = (ev) => {
-            const target = ev.target;
-            // Ignore clicks inside context menu UI; let the menu manage its own lifecycle
-            if (target &&
-                (target.closest('[data-slot^="context-menu-"]') ||
-                    target.closest('[data-testid^="context-menu-" ]'))) {
-                return;
-            }
-            onWindowClick();
-        };
-        window.addEventListener("click", onClickCapture, true);
-        return () => {
-            window.removeEventListener("keydown", onKeyDown, true);
-            window.removeEventListener("click", onClickCapture, true);
-        };
-    }, [onKeyDown, onWindowClick]);
-}
-//# sourceMappingURL=useGlobalEditorEvents.js.map

package/dist/editor/client/hooks/useGlobalEditorEvents.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGlobalEditorEvents.js","sourceRoot":"","sources":["../../../../src/editor/client/hooks/useGlobalEditorEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,UAAU,qBAAqB,CAAC,MAGrC;IACC,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,MAAM,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAC1C,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACpD,MAAM,cAAc,GAAG,CAAC,EAAc,EAAE,EAAE;YACxC,MAAM,MAAM,GAAG,EAAE,CAAC,MAA4B,CAAC;YAC/C,8EAA8E;YAC9E,IACE,MAAM;gBACN,CAAC,MAAM,CAAC,OAAO,CAAC,8BAA8B,CAAC;oBAC7C,MAAM,CAAC,OAAO,CAAC,iCAAiC,CAAC,CAAC,EACpD,CAAC;gBACD,OAAO;YACT,CAAC;YACD,aAAa,EAAE,CAAC;QAClB,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;YACvD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;AACjC,CAAC"}

package/src/editor/client/hooks/useGlobalEditorEvents.ts

@@ -1,30 +0,0 @@
-import { useEffect } from "react";
-
-export function useGlobalEditorEvents(params: {
-  onKeyDown: (ev: KeyboardEvent) => void;
-  onWindowClick: () => void;
-}) {
-  const { onKeyDown, onWindowClick } = params;
-
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    window.addEventListener("keydown", onKeyDown, true);
-    const onClickCapture = (ev: MouseEvent) => {
-      const target = ev.target as HTMLElement | null;
-      // Ignore clicks inside context menu UI; let the menu manage its own lifecycle
-      if (
-        target &&
-        (target.closest('[data-slot^="context-menu-"]') ||
-          target.closest('[data-testid^="context-menu-" ]'))
-      ) {
-        return;
-      }
-      onWindowClick();
-    };
-    window.addEventListener("click", onClickCapture, true);
-    return () => {
-      window.removeEventListener("keydown", onKeyDown, true);
-      window.removeEventListener("click", onClickCapture, true);
-    };
-  }, [onKeyDown, onWindowClick]);
-}