@alpaca-editor/core 1.0.3897 → 1.0.3899

package/src/editor/ui/Icons.tsx

@@ -649,14 +649,13 @@ export function SparkleIconSmall() {
   );
 }
 
-export function Logo() {
+export function Logo({ className }: { className?: string }) {
   return (
     <svg
-      width="24"
-      height="20"
       viewBox="0 0 24 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <path
         d="M7.71353 0C7.73963 0.00378493 7.76608 0.00642148 7.79201 0.0113365C7.86015 0.024234 7.95193 0.0488096 7.998 0.109835C8.21766 0.400198 8.38583 1.46152 8.49531 1.8789C8.79625 3.0269 9.23224 4.23342 9.98756 5.15412C11.0528 6.45252 12.6475 7.04661 14.2042 7.46575C14.5871 7.56885 15.0161 7.6151 15.3852 7.75313C15.4998 7.79595 15.566 7.84973 15.6318 7.95303C15.6283 8.09636 15.6446 8.13548 15.5229 8.22926C15.2738 8.4212 14.166 8.62279 13.7938 8.73221C12.8975 8.9957 11.9165 9.31878 11.1416 9.86464C9.58345 10.9624 8.8537 12.6603 8.40842 14.4905C8.2837 15.003 8.20996 15.6192 7.93599 16.0676L7.7342 16.0256C7.61999 15.9408 7.58356 15.8477 7.54257 15.7141C7.45183 15.4172 7.4133 15.1006 7.3357 14.7987C7.04597 13.6713 6.70631 12.5076 6.0934 11.5164C4.88351 9.55969 2.77887 8.93227 0.701726 8.42803C0.453688 8.36782 0.142061 8.30641 0 8.06956C0.0136631 7.91174 0.050277 7.90952 0.187784 7.84447C0.61607 7.64192 1.11302 7.54975 1.5681 7.42643C2.59441 7.1483 3.72075 6.77163 4.59974 6.14502C6.14245 5.0454 6.83664 3.2587 7.28157 1.45485C7.39683 0.987436 7.45078 0.408109 7.71353 0Z"

package/src/editor/ui/SimpleTabs.tsx

@@ -30,7 +30,7 @@ export function SimpleTabs({
 
   return (
     <>
-      <div className={twMerge("flex gap-4 pb-3", className)}>
+      <div className={twMerge("flex gap-4 pb-1 md:pb-3", className)}>
         {tabs.map((tab, index) => (
           <button
             id={tab.id}

package/src/editor/ui/Splitter.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import { flushSync } from "react-dom";
+
 export type SplitterPanel = {
   defaultSize: number | "auto";
   name: string;
@@ -13,6 +14,7 @@ interface SplitterProps {
   localStorageKey?: string;
   expandLabel?: React.ReactNode;
   growablePanelIndex?: number; // Index of the panel that grows/shrinks
+  direction?: "horizontal" | "vertical"; // New prop for direction
 }
 
 type StoredSizes = { panels: PanelSizes; lastCollapsed: boolean };
@@ -22,6 +24,7 @@ export const Splitter: React.FC<SplitterProps> = ({
   panels,
   localStorageKey = "splitter-sizes",
   expandLabel = "Expand",
+  direction = "horizontal", // Default to horizontal for backward compatibility
 }) => {
   const totalPanels = panels.length;
 
@@ -86,79 +89,6 @@ export const Splitter: React.FC<SplitterProps> = ({
     }
   };
 
-  const handleResize = useCallback(
-    (index: number, event: React.MouseEvent<HTMLDivElement>) => {
-      event.preventDefault();
-
-      const iframes = splitterRef.current?.querySelectorAll("iframe");
-      iframes?.forEach((iframe) => {
-        iframe.classList.add("pointer-events-none");
-      });
-
-      const startX = event.clientX;
-      // create a copy with the panel name
-      const initialSizes = panelSizes ? { ...panelSizes } : {};
-
-      const panelElement = panelRefs.current[index];
-      const nextPanelElement = panelRefs.current[index + 1];
-
-      if (!panelElement || !nextPanelElement || !splitterRef.current) {
-        return;
-      }
-
-      const panelWidth = panelElement.offsetWidth;
-      const nextPanelWidth = nextPanelElement.offsetWidth;
-
-      setIsResizing(true);
-
-      const onMouseMove = (moveEvent: MouseEvent) => {
-        const delta = moveEvent.clientX - startX;
-        const newPanelWidth = panelWidth + delta;
-        const newNextPanelWidth = nextPanelWidth - delta;
-
-        const minPanelWidth = 50;
-        const minNextPanelWidth = 50;
-
-        if (
-          newNextPanelWidth < minPanelWidth &&
-          index == panels.length - 2 &&
-          lastPanelCollapsible
-        ) {
-          setIsLastPanelCollapsed(true);
-          setPanelSizes(initialSizes);
-        }
-
-        if (
-          newPanelWidth < minPanelWidth ||
-          newNextPanelWidth < minNextPanelWidth
-        ) {
-          return;
-        }
-
-        const updatedSizes: PanelSizes = { ...initialSizes };
-        updatedSizes[panels[index]!.name] = newPanelWidth;
-        updatedSizes[panels[index + 1]!.name] = newNextPanelWidth;
-        setPanelSizes(updatedSizes);
-      };
-
-      const onMouseUp = () => {
-        setTimeout(() => {
-          setIsResizing(false);
-        }, 100);
-        iframes?.forEach((iframe) => {
-          iframe.classList.remove("pointer-events-none");
-        });
-
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp, true);
-      };
-
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp, true);
-    },
-    [panels, panelSizes],
-  );
-
   const isLastResizer = (index: number) => index === panels.length - 2;
 
   const getFlexBasis = (index: number): string => {
@@ -182,11 +112,16 @@ export const Splitter: React.FC<SplitterProps> = ({
   };
 
   const getExpandButton = () => {
+    const isHorizontal = direction === "horizontal";
+
     return (
       <div
         onClick={!isResizing ? toggleLastPanelCollapse : undefined}
         className="flex cursor-pointer items-center justify-center bg-gray-200 p-1 text-gray-500 select-none hover:bg-blue-700 hover:text-white"
-        style={{ writingMode: "vertical-rl", userSelect: "none" }}
+        style={{
+          writingMode: isHorizontal ? "vertical-rl" : "horizontal-tb",
+          userSelect: "none",
+        }}
       >
         {expandLabel}
       </div>
@@ -194,27 +129,162 @@ export const Splitter: React.FC<SplitterProps> = ({
   };
 
   const getSplitter = (index: number) => {
+    const isHorizontal = direction === "horizontal";
+
+    const handleDragStart = (
+      clientX: number,
+      clientY: number,
+      event: React.MouseEvent | React.TouchEvent,
+    ) => {
+      const rect = (event.target as HTMLElement).getBoundingClientRect();
+      const relativeY = clientY - rect.top;
+
+      event.stopPropagation();
+      event.preventDefault();
+
+      const isHorizontal = direction === "horizontal";
+      const startCoord = isHorizontal ? clientX : clientY;
+      const initialSizes = panelSizes ? { ...panelSizes } : {};
+
+      const panelElement = panelRefs.current[index];
+      const nextPanelElement = panelRefs.current[index + 1];
+
+      if (!panelElement || !nextPanelElement) {
+        return;
+      }
+
+      const panelSize = isHorizontal
+        ? panelElement.offsetWidth
+        : panelElement.offsetHeight;
+      const nextPanelSize = isHorizontal
+        ? nextPanelElement.offsetWidth
+        : nextPanelElement.offsetHeight;
+
+      setIsResizing(true);
+
+      // Disable pointer events on panel content during drag
+      const allPanels = splitterRef.current?.querySelectorAll(".relative");
+      allPanels?.forEach((panel) => {
+        (panel as HTMLElement).style.pointerEvents = "none";
+        // Also disable on all child elements that might capture events
+        const childElements = panel.querySelectorAll("*");
+        childElements.forEach((child) => {
+          (child as HTMLElement).style.pointerEvents = "none";
+        });
+      });
+
+      let isDragging = true;
+
+      const handleMove = (moveClientX: number, moveClientY: number) => {
+        if (!isDragging) return;
+
+        const currentCoord = isHorizontal ? moveClientX : moveClientY;
+        const delta = currentCoord - startCoord;
+        const newPanelSize = panelSize + delta;
+        const newNextPanelSize = nextPanelSize - delta;
+
+        const minPanelSize = 50;
+        if (newPanelSize < minPanelSize || newNextPanelSize < minPanelSize) {
+          return;
+        }
+
+        const updatedSizes: PanelSizes = { ...initialSizes };
+        updatedSizes[panels[index]!.name] = newPanelSize;
+        updatedSizes[panels[index + 1]!.name] = newNextPanelSize;
+        setPanelSizes(updatedSizes);
+      };
+
+      const handleEnd = () => {
+        isDragging = false;
+        setIsResizing(false);
+
+        // Re-enable pointer events on panel content
+        allPanels?.forEach((panel) => {
+          (panel as HTMLElement).style.pointerEvents = "";
+          // Also re-enable on all child elements
+          const childElements = panel.querySelectorAll("*");
+          childElements.forEach((child) => {
+            (child as HTMLElement).style.pointerEvents = "";
+          });
+        });
+
+        // Remove all event listeners
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+        window.removeEventListener("touchmove", onTouchMove);
+        window.removeEventListener("touchend", onTouchEnd);
+      };
+
+      const onMouseMove = (moveEvent: MouseEvent) => {
+        handleMove(moveEvent.clientX, moveEvent.clientY);
+      };
+
+      const onMouseUp = () => {
+        handleEnd();
+      };
+
+      const onTouchMove = (moveEvent: TouchEvent) => {
+        if (moveEvent.touches.length === 1) {
+          const touch = moveEvent.touches[0];
+          if (touch) {
+            handleMove(touch.clientX, touch.clientY);
+          }
+        }
+      };
+
+      const onTouchEnd = () => {
+        handleEnd();
+      };
+
+      // Add both mouse and touch event listeners
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("touchmove", onTouchMove, { passive: false });
+      window.addEventListener("touchend", onTouchEnd);
+    };
+
     if (lastPanelCollapsible && isLastPanelCollapsed && isLastResizer(index)) {
       return getExpandButton();
     }
 
     return (
       <div
-        className={
-          "relative z-1000 flex w-[4px] cursor-ew-resize items-center justify-center bg-gray-200 select-none hover:bg-blue-700"
-        }
+        className={`relative flex ${
+          isHorizontal
+            ? "h-full w-[4px] w-[12px] cursor-ew-resize md:w-[4px]"
+            : "h-[12px] h-[20px] w-full cursor-ns-resize md:h-[12px]"
+        } shrink-0 items-center justify-center bg-gray-300 select-none hover:bg-gray-400`}
+        style={{
+          touchAction: "none",
+          minHeight: isHorizontal ? undefined : "12px",
+          minWidth: isHorizontal ? "4px" : undefined,
+          boxSizing: "border-box",
+          userSelect: "none",
+          zIndex: 9999, // Ensure we're above any nested splitters
+        }}
         onDoubleClick={
           isLastResizer(index) ? toggleLastPanelCollapse : undefined
         }
         onMouseDown={(event) => {
-          handleResize(index, event);
+          handleDragStart(event.clientX, event.clientY, event);
+        }}
+        onTouchStart={(event) => {
+          if (event.touches.length === 1) {
+            const touch = event.touches[0];
+            if (touch) {
+              handleDragStart(touch.clientX, touch.clientY, event);
+            }
+          }
         }}
       ></div>
     );
   };
 
   return (
-    <div className="flex h-full w-full overflow-hidden" ref={splitterRef}>
+    <div
+      className={`flex ${direction === "horizontal" ? "flex-row" : "flex-col"} h-full w-full overflow-hidden`}
+      ref={splitterRef}
+    >
       {panels.map((panel, index) => (
         <React.Fragment key={panel.name}>
           <div
@@ -227,7 +297,8 @@ export const Splitter: React.FC<SplitterProps> = ({
                 index,
               )}`,
 
-              minWidth: 0,
+              minWidth: direction === "horizontal" ? 0 : undefined,
+              minHeight: direction === "vertical" ? 0 : undefined,
               display:
                 (panel.collapsible &&
                   isLastPanelCollapsed &&
@@ -241,6 +312,7 @@ export const Splitter: React.FC<SplitterProps> = ({
           </div>
           {index < panels.length - 1 &&
             !panels[index]?.hidden &&
+            !panels[index + 1]?.hidden &&
             getSplitter(index)}
         </React.Fragment>
       ))}

package/src/fonts/index.ts

@@ -0,0 +1,10 @@
+import { Inter } from "next/font/google";
+
+export const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+export const fonts = {
+  inter,
+};

package/src/index.ts

@@ -8,8 +8,16 @@ export { configureForUser } from "./config/config";
 
 export type { DialogProps } from "./editor/client/editContext";
 
-export type { LocalizeItemCommand, LocalizeItemCommandContext, LocalizeItemCommandData } from "./editor/commands/itemCommands";
+export type {
+  LocalizeItemCommand,
+  LocalizeItemCommandContext,
+  LocalizeItemCommandData,
+} from "./editor/commands/itemCommands";
 
 export { requestTranslation } from "./editor/services/translationService";
 
 export { defaultTranslateAll } from "./editor/commands/localizeItem/LocalizeItemUtils";
+
+export * from "./fonts";
+
+export { Card } from "./components/ui/card";

package/src/page-wizard/WizardBox.tsx

@@ -1,40 +1,4 @@
-import { cn } from "../lib/utils";
+import { Card } from "../components/ui/card";
 
-export function WizardBox({
-  children,
-  icon,
-  title,
-  description,
-  className,
-  noPadding,
-}: {
-  children: React.ReactNode;
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  className?: string;
-  noPadding?: boolean;
-}) {
-  return (
-    <div
-      className={cn(
-        "flex h-full flex-col gap-2 rounded-md bg-white",
-        className,
-      )}
-    >
-      <div className="flex flex-col justify-between gap-1 p-6">
-        <div className="flex items-center gap-2">
-          <div className="text-theme-secondary flex h-4 w-4 items-center justify-center rounded-full">
-            {icon}
-          </div>
-          <div className="text-base font-bold text-neutral-800">{title}</div>
-        </div>
-        <div className="mb-2 text-xs text-neutral-500">{description}</div>
-      </div>
-
-      <div className={cn("flex-1", noPadding ? "" : "p-6 pt-0", className)}>
-        {children}
-      </div>
-    </div>
-  );
-}
+// Re-export Card as WizardBox for backward compatibility
+export const WizardBox = Card;