@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/ui/SimpleIconButton.tsx

@@ -0,0 +1,54 @@
+import { classNames } from "primereact/utils";
+import { MouseEventHandler } from "react";
+
+export function SimpleIconButton({
+  onClick,
+  className,
+  icon,
+  label,
+  disabled,
+  size,
+  id,
+  selected,
+  dark = false,
+}: {
+  onClick: MouseEventHandler;
+  className?: string;
+  icon?: React.ReactNode;
+  label: string;
+  disabled?: boolean;
+  id?: string;
+  size?: "large" | "small";
+  selected?: boolean;
+  dark?: boolean;
+}) {
+  const color = disabled
+    ? "text-gray-300"
+    : dark
+      ? "text-gray-400"
+      : "text-gray-600";
+
+  return (
+    <button
+      id={id}
+      disabled={disabled}
+      className={classNames(
+        typeof icon === "string" ? icon + " p-[6px]" : "p-[2px]",
+        "rounded-full",
+        color,
+        disabled
+          ? "cursor-none"
+          : "cursor-pointer hover:bg-gray-200 hover:text-gray-600",
+        className,
+        size === "large" ? "text-lg" : "text-xs",
+        selected ? "bg-gray-200 text-gray-600" : "",
+      )}
+      onClick={(ev) => {
+        if (!disabled) onClick(ev);
+      }}
+      title={label}
+    >
+      {typeof icon !== "string" && icon}
+    </button>
+  );
+}

package/src/editor/ui/SimpleMenu.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { MenuItem } from "../../config/types";
+export function SimpleMenu({
+  items,
+  activeItemKey,
+  onItemClick,
+}: {
+  items: MenuItem[];
+  activeItemKey: string | null;
+  onItemClick: (item: MenuItem) => void;
+}) {
+  return (
+    <div className="flex h-full flex-col p-1">
+      {items.map((item, index) => (
+        <div key={index} className="flex flex-col gap-1 p-2">
+          <div className="flex flex-row items-center gap-2 border-b border-gray-200 pb-1 pl-2">
+            {item.icon && item.icon}
+            {item.label}
+          </div>
+          {item.items?.map((subItem, subIndex) => (
+            <div
+              key={subIndex}
+              className={`flex cursor-pointer flex-col p-1 px-4 hover:bg-gray-100 ${
+                activeItemKey === subItem.id ? "bg-gray-100" : ""
+              }`}
+              onClick={() => {
+                onItemClick(subItem);
+              }}
+            >
+              <div className="flex flex-row items-center gap-2 text-sm">
+                {subItem.icon && subItem.icon}
+                {subItem.label}
+              </div>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/editor/ui/SimpleTable.tsx

@@ -0,0 +1,60 @@
+import { classNames } from "primereact/utils";
+
+export function SimpleTable<T>({
+  items,
+  columns,
+  onRowHover,
+  onRowClick,
+  rowClassName,
+}: {
+  items: T[];
+  columns: {
+    header: React.ReactNode;
+    body: (item: T) => React.ReactNode;
+    className?: string;
+  }[];
+
+  onRowClick?: (data: {
+    item: T;
+    event: React.MouseEvent<HTMLTableRowElement>;
+  }) => void;
+  onRowHover?: (item: T | undefined) => void;
+  rowClassName?: (item: T) => string;
+}) {
+  return (
+    <table className="text-surface min-w-full table-auto text-left text-xs font-light">
+      <thead className="border-b border-neutral-200 font-medium">
+        <tr>
+          {columns.map((col, index) => (
+            <th key={index} className="px-1.5 py-1.5">
+              {col.header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {items.map((item, index) => (
+          <tr
+            className={classNames(
+              "border-b border-neutral-200",
+              onRowClick ? "cursor-pointer hover:bg-neutral-100" : "",
+              rowClassName ? rowClassName(item) : "",
+            )}
+            onClick={(ev) => {
+              if (onRowClick) onRowClick({ item, event: ev });
+            }}
+            onMouseOver={() => onRowHover?.(item)}
+            onMouseLeave={() => onRowHover?.(undefined)}
+            key={index}
+          >
+            {columns.map((col, index) => (
+              <td className={classNames("p-2", col.className)} key={index}>
+                {col.body(item)}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/editor/ui/SimpleTabs.tsx

@@ -0,0 +1,60 @@
+import { twMerge } from "tailwind-merge";
+
+export type Tab = {
+  label: string;
+  content: React.ReactNode;
+  id: string;
+  testId?: string;
+  icon?: string; // PrimeReact icon class name (e.g., "pi pi-search")
+};
+
+export function SimpleTabs({
+  tabs,
+  setActiveTab,
+  activeTab,
+  className,
+}: {
+  tabs: Tab[];
+  setActiveTab: (index: number) => void;
+  activeTab: number;
+  className?: string;
+}) {
+  if (activeTab > tabs.length - 1) {
+    activeTab = 0;
+  }
+
+  if (activeTab < 0) {
+    activeTab = 0;
+  }
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <>
+      <div className={twMerge("flex gap-4 pb-2", className)}>
+        {tabs.map((tab, index) => (
+          <button
+            id={tab.id}
+            className={twMerge(
+              "flex cursor-pointer items-center gap-2",
+              activeTab === index ? "active-tab" : "",
+            )}
+            key={tab.id}
+            data-testid={tab.testId}
+            onClick={() => setActiveTab(index)}
+            style={{
+              fontWeight: index === activeTab ? "bold" : "normal",
+              borderBottom: index === activeTab ? "3px solid black" : "none",
+              marginBottom: index === activeTab ? "0" : "3px",
+              color: index === activeTab ? "black" : "gray",
+            }}
+          >
+            {tab.icon && <i className={tab.icon} />}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      {tabs[activeTab]?.content}
+    </>
+  );
+}

package/src/editor/ui/SimpleToolbar.tsx

@@ -0,0 +1,7 @@
+export function SimpleToolbar({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex gap-2 p-2 items-center bg-gray-50 rounded-md border-b border-gray-200 text-gray-500 text-sm">
+      {children}
+    </div>
+  );
+}

package/src/editor/ui/Spinner.tsx

@@ -0,0 +1,9 @@
+export function Spinner({
+  size = "4xl",
+}: {
+  size?: "2xl" | "3xl" | "4xl" | "5xl";
+}) {
+  return (
+    <i className={`pi pi-cog pi-spin text-${size} text-theme-secondary/40`}></i>
+  );
+}

package/src/editor/ui/Splitter.tsx

@@ -0,0 +1,420 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { flushSync } from "react-dom";
+
+export type SplitterPanel = {
+  defaultSize: number | "auto";
+  name: string;
+  content: React.ReactNode;
+  collapsible?: boolean;
+  hidden?: boolean;
+};
+
+interface SplitterProps {
+  panels: SplitterPanel[];
+  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 };
+type PanelSizes = { [name: string]: number | "auto" };
+
+export const Splitter: React.FC<SplitterProps> = ({
+  panels,
+  localStorageKey = "splitter-sizes",
+  expandLabel = "Expand",
+  direction = "horizontal", // Default to horizontal for backward compatibility
+}) => {
+  const totalPanels = panels.length;
+
+  const [panelSizes, setPanelSizes] = useState<PanelSizes | null>(() => {
+    // Load sizes from local storage on initial render
+    const storedSizes = localStorage.getItem(localStorageKey);
+    if (storedSizes) {
+      try {
+        const parsedSizes = JSON.parse(storedSizes);
+        return (parsedSizes as StoredSizes).panels;
+      } catch (error) {
+        return null; // Or fallback to default if parsing fails
+      }
+    }
+    return null; // No stored sizes, initial render will handle defaults
+  });
+
+  const panelRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const splitterRef = useRef<HTMLDivElement | null>(null);
+  const lastPanelCollapsible = panels[panels.length - 1]?.collapsible;
+
+  const [isLastPanelCollapsed, setIsLastPanelCollapsed] = useState(() => {
+    const storedSizes = localStorage.getItem(localStorageKey);
+    if (storedSizes) {
+      const parsedSizes = JSON.parse(storedSizes);
+      return (parsedSizes as StoredSizes).lastCollapsed;
+    }
+    return true;
+  });
+
+  const [isResizing, setIsResizing] = useState(false);
+
+  useEffect(() => {
+    if (!panelSizes && splitterRef.current) {
+      const initialSizes: PanelSizes = {};
+
+      panels.forEach((panel) => {
+        initialSizes[panel.name] = panel.defaultSize;
+      });
+
+      setPanelSizes(initialSizes);
+    }
+  }, [panels]);
+
+  useEffect(() => {
+    if (panelSizes) {
+      const storedSizes: StoredSizes = {
+        panels: panelSizes,
+        lastCollapsed: isLastPanelCollapsed ?? false,
+      };
+      localStorage.setItem(localStorageKey, JSON.stringify(storedSizes));
+    }
+  }, [panelSizes, localStorageKey, isLastPanelCollapsed]);
+
+  const toggleLastPanelCollapse = () => {
+    if (lastPanelCollapsible) {
+      document.startViewTransition(() => {
+        flushSync(() => {
+          setIsLastPanelCollapsed((prev) => {
+            const newCollapsed = !prev;
+
+            // When expanding, restore default sizes if needed
+            if (!newCollapsed && panelSizes) {
+              const lastPanelName = panels[panels.length - 1]?.name;
+              const lastPanelDefaultSize =
+                panels[panels.length - 1]?.defaultSize;
+
+              if (
+                lastPanelName &&
+                lastPanelDefaultSize &&
+                typeof lastPanelDefaultSize === "number"
+              ) {
+                // Only restore size if the panel doesn't have a stored size
+                if (
+                  !panelSizes[lastPanelName] ||
+                  panelSizes[lastPanelName] === 0
+                ) {
+                  const updatedSizes: PanelSizes = { ...panelSizes };
+                  updatedSizes[lastPanelName] = lastPanelDefaultSize;
+
+                  // Adjust the previous panel to make room
+                  const prevPanelName = panels[panels.length - 2]?.name;
+                  if (
+                    prevPanelName &&
+                    typeof panelSizes[prevPanelName] === "number"
+                  ) {
+                    const prevSize = panelSizes[prevPanelName] as number;
+                    updatedSizes[prevPanelName] = Math.max(
+                      50,
+                      prevSize - lastPanelDefaultSize,
+                    );
+                  }
+
+                  setPanelSizes(updatedSizes);
+                }
+              }
+            }
+
+            return newCollapsed;
+          });
+        });
+      });
+    }
+  };
+
+  const isLastResizer = (index: number) => index === panels.length - 2;
+
+  const getFlexBasis = (index: number): string => {
+    if (!panelSizes) return "1fr"; // Or a default like "1fr"
+
+    const panelName = panels[index]!.name;
+    const size =
+      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";
+    }
+
+    return "1fr"; //default
+  };
+
+  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: isHorizontal ? "vertical-rl" : "horizontal-tb",
+          userSelect: "none",
+        }}
+      >
+        {expandLabel}
+      </div>
+    );
+  };
+
+  const getSplitter = (index: number) => {
+    const isHorizontal = direction === "horizontal";
+
+    const handleDragStart = (clientX: number, clientY: number) => {
+      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;
+
+      // Disable pointer events on all iframes to prevent event loss when hovering over them
+      const iframes = document.querySelectorAll("iframe");
+      const originalPointerEvents = new Map<HTMLIFrameElement, string>();
+      iframes.forEach((iframe) => {
+        originalPointerEvents.set(iframe, iframe.style.pointerEvents || "auto");
+        iframe.style.pointerEvents = "none";
+      });
+
+      setIsResizing(true);
+
+      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;
+
+        // Check if the next panel (which could be the last panel) should be collapsed
+        const isNextPanelLast = index + 1 === panels.length - 1;
+        const isNextPanelCollapsible = panels[index + 1]?.collapsible;
+
+        if (
+          newNextPanelSize < minPanelSize &&
+          isNextPanelLast &&
+          isNextPanelCollapsible
+        ) {
+          // Auto-collapse the last panel when it reaches minimum size
+          // Update sizes to ensure the remaining panel gets the full space
+          const updatedSizes: PanelSizes = { ...initialSizes };
+          updatedSizes[panels[index]!.name] = panelSize + nextPanelSize;
+          // Don't set a size for the collapsed panel - let it be handled by the collapsed state
+          setPanelSizes(updatedSizes);
+          setIsLastPanelCollapsed(true);
+          return;
+        }
+
+        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);
+
+        // Restore pointer events on all iframes
+        originalPointerEvents.forEach((originalValue, iframe) => {
+          iframe.style.pointerEvents = originalValue;
+        });
+
+        // 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 flex ${
+          isHorizontal
+            ? "h-full w-[12px] cursor-ew-resize md:w-[5px]"
+            : "h-[12px] 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) => {
+          handleDragStart(event.clientX, event.clientY);
+        }}
+        onTouchStart={(event) => {
+          if (event.touches.length === 1) {
+            const touch = event.touches[0];
+            if (touch) {
+              handleDragStart(touch.clientX, touch.clientY);
+            }
+          }
+        }}
+      >
+        {/* Visual indicator line for mobile splitters */}
+        <div
+          className={`${
+            isHorizontal
+              ? "h-8 w-[2px] bg-gray-500 md:hidden"
+              : "h-[2px] w-8 bg-gray-500 md:hidden"
+          }`}
+        />
+
+        {/* Small collapse button for collapsible panels */}
+        {lastPanelCollapsible &&
+          !isLastPanelCollapsed &&
+          isLastResizer(index) && (
+            <div
+              className={`absolute top-1/2 left-1/2 flex h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm text-gray-800 opacity-70 hover:bg-gray-700 hover:text-white hover:opacity-100`}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (!isResizing) {
+                  toggleLastPanelCollapse();
+                }
+              }}
+              onMouseDown={(e) => {
+                e.stopPropagation(); // Prevent drag from starting
+              }}
+              title="Collapse panel"
+            >
+              <svg
+                width="6"
+                height="6"
+                viewBox="0 0 6 6"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                {isHorizontal ? (
+                  // Right arrow for horizontal collapse
+                  <path
+                    d="M1.5 0.5L4.5 3L1.5 5.5"
+                    stroke="currentColor"
+                    strokeWidth="0.8"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                ) : (
+                  // Down arrow for vertical collapse
+                  <path
+                    d="M0.5 1.5L3 4.5L5.5 1.5"
+                    stroke="currentColor"
+                    strokeWidth="0.8"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                )}
+              </svg>
+            </div>
+          )}
+      </div>
+    );
+  };
+
+  return (
+    <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
+            ref={(el) => {
+              panelRefs.current[index] = el;
+            }}
+            className="relative"
+            style={{
+              flex: `${panel.defaultSize === "auto" ? 1 : 0} 1 ${getFlexBasis(
+                index,
+              )}`,
+
+              minWidth: direction === "horizontal" ? 0 : undefined,
+              minHeight: direction === "vertical" ? 0 : undefined,
+              display:
+                (panel.collapsible &&
+                  isLastPanelCollapsed &&
+                  index === totalPanels - 1) ||
+                panel.hidden
+                  ? "none"
+                  : "block",
+            }}
+          >
+            {panel.content}
+          </div>
+          {index < panels.length - 1 &&
+            !panels[index]?.hidden &&
+            !panels[index + 1]?.hidden &&
+            getSplitter(index)}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};