@alpaca-editor/core 1.0.4110 → 1.0.4112

package/src/components/ui/dialog.tsx

@@ -50,13 +50,15 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
+  overlayClassName,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
+  overlayClassName?: string;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
+      <DialogOverlay className={overlayClassName} />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(

package/src/editor/ContextMenu.tsx

@@ -203,7 +203,7 @@ export const EditContextMenu = forwardRef<
       try {
         // Close Radix ContextMenu by sending Escape to the document
         document.dispatchEvent(
-          new KeyboardEvent("keydown", { key: "Escape", bubbles: true })
+          new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
         );
       } catch {}
     },
@@ -239,6 +239,12 @@ export const EditContextMenu = forwardRef<
               <div
                 key={index}
                 className={cn("px-2 py-1.5 hover:bg-gray-100", item.className)}
+                onPointerDownCapture={(e) => e.stopPropagation()}
+                onMouseDownCapture={(e) => e.stopPropagation()}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                }}
               >
                 {item.template}
               </div>
@@ -284,6 +290,8 @@ export const EditContextMenu = forwardRef<
                             e.stopPropagation();
                             e.preventDefault();
                           }}
+                          onPointerDownCapture={(e) => e.stopPropagation()}
+                          onMouseDownCapture={(e) => e.stopPropagation()}
                         >
                           {subItem.template}
                         </div>

package/src/editor/MainLayout.tsx

@@ -38,19 +38,15 @@ export default function MainLayout(props: MainLayoutProps) {
       name: "leftSidebar",
       defaultSize: props.view.leftSidebar ? 350 : 0,
       hidden: !props.view.leftSidebar,
-      content: (
-        <div className="relative h-full w-full" style={{ wordBreak: "normal" }}>
-          {viewsWithLeftSidebar.map((v) => (
-            <SidebarView
-              key={v.name}
-              sidebar={v.leftSidebar!}
-              editContext={editContext}
-              active={props.view.name === v.name && !!v.leftSidebar}
-              onClose={() => editContext.switchView("page-editor")}
-            />
-          ))}
-        </div>
-      ),
+      content: viewsWithLeftSidebar.map((v) => (
+        <SidebarView
+          key={v.name}
+          sidebar={v.leftSidebar!}
+          editContext={editContext}
+          active={props.view.name === v.name && !!v.leftSidebar}
+          onClose={() => editContext.switchView("page-editor")}
+        />
+      )),
     });
   }
   panels.push({

package/src/editor/client/EditorShell.tsx

@@ -137,7 +137,7 @@ 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";
@@ -1525,11 +1525,6 @@ export function EditorShell({
     executeCommand,
   });
 
-  useGlobalEditorEvents({
-    onKeyDown: handleKeyDown,
-    onWindowClick: () => contextMenuRef.current?.close({}),
-  });
-
   useEffect(() => {
     const handleGlobalBlur = () => {
       operations.onFieldBlur?.();

package/src/editor/commands/itemCommands.tsx

@@ -164,18 +164,17 @@ export const insertItemCommand: ItemCommand = {
       },
     );
     if (name) {
-      // const result = await context.editContext.operations.createItem(
-      //   parentItem.descriptor,
-      //   templateId,
-      //   name,
-      // );
-
-      // if (result) {
-      //   context.editContext.loadItem(result);
-      // }
-      console.log("name", name);
-
-   //   return result;
+      const result = await context.editContext.operations.createItem(
+        parentItem.descriptor,
+        templateId,
+        name,
+      );
+
+      if (result) {
+        context.editContext.loadItem(result);
+      }
+
+      return result;
     }
   },
 };

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

@@ -44,6 +44,7 @@ export const InsertMenuTemplate = ({
 
   const hideTimeoutRef = useRef<NodeJS.Timeout>(undefined);
   const opRef = useRef<HTMLDivElement>(null);
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
 
   useEffect(() => {
     const loadRecentItems = async () => {
@@ -372,19 +373,32 @@ export const InsertMenuTemplate = ({
         if (hideTimeoutRef.current) {
           clearTimeout(hideTimeoutRef.current);
         }
-        opRef.current && (opRef.current.style.display = "block");
+        setIsPanelOpen(true);
         // Do not focus immediately to avoid interfering with outer menu focus handling
         setTimeout(() => filterRef.current && filterRef.current.focus(), 0);
       }}
       onMouseLeave={() => {
         hideTimeoutRef.current = setTimeout(() => {
-          opRef.current && (opRef.current.style.display = "none");
+          setIsPanelOpen(false);
         }, 200);
       }}
       onClick={(ev) => {
         ev.stopPropagation();
         ev.preventDefault();
       }}
+      onPointerDownCapture={(ev) => {
+        // Keep parent context menu open when interacting with the insert panel
+        ev.stopPropagation();
+      }}
+      onMouseDownCapture={(ev) => {
+        ev.stopPropagation();
+      }}
+      onPointerUpCapture={(ev) => {
+        ev.stopPropagation();
+      }}
+      onMouseUpCapture={(ev) => {
+        ev.stopPropagation();
+      }}
     >
       <Plus strokeWidth={1} size={16} className="text-gray-2" />
       <span>Insert</span>
@@ -398,8 +412,24 @@ export const InsertMenuTemplate = ({
         onKeyUpCapture={(ev) => {
           ev.stopPropagation();
         }}
+        onPointerDownCapture={(ev) => {
+          ev.stopPropagation();
+        }}
+        onMouseDownCapture={(ev) => {
+          ev.stopPropagation();
+        }}
+        onPointerUpCapture={(ev) => {
+          ev.stopPropagation();
+        }}
+        onMouseUpCapture={(ev) => {
+          ev.stopPropagation();
+        }}
+        onClick={(ev) => {
+          // Prevent bubbling to parent menu container
+          ev.stopPropagation();
+        }}
         style={{
-          display: opRef.current ? "block" : "none",
+          display: isPanelOpen ? "block" : "none",
           top: "-50px",
           left: "100%",
           minWidth: "450px",

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

@@ -505,7 +505,12 @@ export function PageViewerFrame({
         currentOverlayName.endsWith("_generators")
       );
 
-      if (editContextRef.current?.currentOverlay && !isGeneratorOverlay)
+      // Don't close context-menu overlay on mousedown - let it handle its own closing
+      if (
+        editContextRef.current?.currentOverlay &&
+        !isGeneratorOverlay &&
+        editContextRef.current.currentOverlay !== "context-menu"
+      )
         editContextRef.current?.setCurrentOverlay(undefined);
 
       if (componentId) {

package/src/editor/sidebar/SidebarView.tsx

@@ -114,14 +114,11 @@ export function SidebarView({
   );
 
   return (
-    <div
-      className={cn("h-full", detached ? "p-2" : "", !active ? "hidden" : "")}
-    >
-      <Splitter
-        panels={splitterPanels}
-        direction="vertical"
-        localStorageKey={`sidebar-${sidebar.panels.length}-panels`}
-      />
-    </div>
+    <Splitter
+      panels={splitterPanels}
+      direction="vertical"
+      localStorageKey={`sidebar-${sidebar.panels.length}-panels`}
+      className={cn(detached ? "p-2" : "", !active ? "hidden" : "")}
+    />
   );
 }

package/src/editor/ui/ItemNameDialogNew.tsx

@@ -105,20 +105,10 @@ export function ItemNameDialog(
   };
 
   return (
-    <Dialog
-      open={true}
-    >
+    <Dialog open={true}>
       <DialogContent
+        overlayClassName="pointer-events-none"
         style={{ width: "400px" }}
-        onInteractOutside={(e) => {
-          // Prevent outside interactions from closing while we stabilize focus
-          e.preventDefault();
-        }}
-        onEscapeKeyDown={(e) => {
-          // Avoid accidental escape propagation from prior overlays
-          e.preventDefault();
-        }}
-        showCloseButton={false}
       >
         <DialogHeader>
           <DialogTitle>{props?.title ?? "Name"}</DialogTitle>

package/src/editor/ui/SimpleMenu.tsx

@@ -1,4 +1,3 @@
-import { ReactNode } from "react";
 import { MenuItem } from "../../config/types";
 export function SimpleMenu({
   items,

package/src/editor/ui/Splitter.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
 import { flushSync } from "react-dom";
-
+import { cn } from "../../lib/utils";
 export type SplitterPanel = {
   defaultSize: number | "auto";
   name: string;
@@ -68,17 +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);
+
+      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;
 
-      setPanelSizes(initialSizes);
+    if (initialSize > 0) {
+      computeAndSet(initialSize);
+      return;
     }
-  }, [panels]);
+
+    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) {
@@ -191,23 +278,22 @@ export const Splitter: React.FC<SplitterProps> = ({
   const isLastResizer = (index: number) => index === panels.length - 2;
 
   const getFlexBasis = (index: number): string => {
-    if (!panelSizes) return "1fr"; // Or a default like "1fr"
+    // Fractional sizing: always use 0 basis so flex-grow weights control size
+    return "0px";
+  };
 
+  const getFlexGrow = (index: number): number => {
     const panelName = panels[index]!.name;
-    const size =
+    const raw =
       index === panels.length - 1 &&
       isLastPanelCollapsed &&
       lastPanelCollapsible
         ? 0
-        : panelSizes[panelName] || panels[index]!.defaultSize;
-
-    if (typeof size === "number") {
-      return `${size}px`;
-    } else if (size === "auto") {
-      return "auto";
-    }
+        : (panelSizes?.[panelName] ?? panels[index]!.defaultSize);
 
-    return "1fr"; //default
+    if (raw === "auto") return 1;
+    if (typeof raw === "number") return Math.max(0, raw);
+    return 1;
   };
 
   const getExpandButton = () => {
@@ -455,7 +541,7 @@ export const Splitter: React.FC<SplitterProps> = ({
 
   return (
     <div
-      className={`flex ${
+      className={`flex items-stretch justify-stretch ${
         direction === "horizontal" ? "flex-row" : "flex-col"
       } ${
         className && /(^|\s)h-/.test(className) ? "" : "h-full"
@@ -468,11 +554,9 @@ export const Splitter: React.FC<SplitterProps> = ({
             ref={(el) => {
               panelRefs.current[index] = el;
             }}
-            className={`relative ${panel.className || ""}`}
+            className={cn(`relative ${panel.className || ""}`)}
             style={{
-              flex: `${panel.defaultSize === "auto" ? 1 : 0} 1 ${getFlexBasis(
-                index,
-              )}`,
+              flex: `${getFlexGrow(index)} 1 ${getFlexBasis(index)}`,
               zIndex: panels.length - index,
               minWidth: direction === "horizontal" ? 0 : undefined,
               minHeight: direction === "vertical" ? 0 : undefined,

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4110";
-export const buildDate = "2025-09-25 02:03:12";
+export const version = "1.0.4112";
+export const buildDate = "2025-09-25 12:32:26";

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,15 +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);
-        window.addEventListener("click", onWindowClick, true);
-        return () => {
-            window.removeEventListener("keydown", onKeyDown, true);
-            window.removeEventListener("click", onWindowClick, 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,gBAAgB,CAAC,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;YACvD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;AACjC,CAAC"}

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

@@ -1,18 +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);
-    window.addEventListener("click", onWindowClick, true);
-    return () => {
-      window.removeEventListener("keydown", onKeyDown, true);
-      window.removeEventListener("click", onWindowClick, true);
-    };
-  }, [onKeyDown, onWindowClick]);
-}