@alpaca-editor/core 1.0.4114 → 1.0.4120

package/src/editor/sidebar/SEOInfo.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Button } from "primereact/button";
+import { Button } from "../../components/ui/button";
+import { Search } from "lucide-react";
 import { Divider } from "primereact/divider";
 import { useEditContext } from "../client/editContext";
 import { toast } from "sonner";
@@ -193,13 +194,14 @@ Focus on actionable insights for improving search engine visibility.`;
     <div className="space-y-4 p-4">
       {/* Analysis Button */}
       <Button
-        label="Run SEO Analysis"
-        icon="pi pi-search"
+        size="sm"
         onClick={runSEOAnalysis}
-        loading={isAnalyzing}
-        className="w-full"
-        severity="success"
-      />
+        disabled={isAnalyzing}
+        className="w-full bg-green-600 text-white hover:bg-green-700"
+      >
+        <Search className="mr-2 h-4 w-4" />
+        Run SEO Analysis
+      </Button>
 
       <Divider />
 

package/src/editor/sidebar/SidebarView.tsx

@@ -1,8 +1,7 @@
 import { EditContextType } from "../client/editContext";
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 import { Sidebar } from "../../config/types";
 import { Splitter, SplitterPanel } from "../ui/Splitter";
-import { cn } from "../../lib/utils";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { X } from "lucide-react";
 
@@ -35,7 +34,7 @@ export function SidebarView({
       <div className="border-gray-3 relative flex items-center border-b p-2 text-xs text-gray-500 uppercase">
         {panel.icon &&
           (typeof panel.icon === "string" ? (
-            <i className={classNames(panel.icon, "pi mr-1.5")}></i>
+            <i className={cn(panel.icon, "pi mr-1.5")}></i>
           ) : (
             <div className="mr-2">{panel.icon}</div>
           ))}
@@ -77,7 +76,7 @@ export function SidebarView({
           {getHeader(panel, 0)}
           <div className="relative flex-1 overflow-hidden">
             <div
-              className={classNames(
+              className={cn(
                 "absolute inset-0",
                 panel.noOverflow ? "" : "overflow-y-auto",
               )}
@@ -102,7 +101,7 @@ export function SidebarView({
           {getHeader(panel, index)}
           <div className="relative flex-1 overflow-hidden">
             <div
-              className={classNames(
+              className={cn(
                 "absolute inset-0",
                 panel.noOverflow ? "" : "overflow-y-auto",
               )}
@@ -123,7 +122,10 @@ export function SidebarView({
       localStorageKey={`sidebar-${editContext.viewName}-${splitterPanels
         .map((p) => p.name)
         .join("-")}`}
-      className={cn(detached ? "p-2" : "", !active ? "hidden" : "")}
+      className={cn(
+        detached ? "p-2" : "border-gray-3 border-r",
+        !active ? "hidden" : "",
+      )}
     />
   );
 }

package/src/editor/sidebar/Translations.tsx

@@ -13,7 +13,7 @@ import { TranslationStatus } from "../../config/types";
 import { ProgressBar } from "primereact/progressbar";
 import { Checkbox } from "primereact/checkbox";
 import { confirmCreateVersion } from "../utils/itemutils";
-import { Dropdown } from "primereact/dropdown";
+import { Select } from "../../components/ui/select";
 
 export function Translation() {
   const editContext = useEditContext();
@@ -182,10 +182,14 @@ export function Translation() {
   return (
     <div className="flex h-full flex-col gap-2">
       <div className="flex w-full flex-wrap items-center justify-end gap-2 bg-gray-50 p-3">
-        <Dropdown
-          options={translationProviders || []}
-          onChange={(e) => setTranslationProvider(e.value)}
-          value={translationProvider}
+        <Select
+          options={(translationProviders || []).map((provider) => ({
+            value: provider,
+            label: provider,
+          }))}
+          onValueChange={(value) => setTranslationProvider(value)}
+          value={translationProvider || undefined}
+          placeholder="Select translation provider"
         />
         {item && (
           <Button

package/src/editor/sidebar/Validation.tsx

@@ -1,4 +1,4 @@
-import { ProgressSpinner } from "primereact/progressspinner";
+import { Loader2 } from "lucide-react";
 import { SingleValidatorResult } from "../../types";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { SimpleTable } from "../ui/SimpleTable";
@@ -66,7 +66,7 @@ export function Validation() {
     <div>
       {editContext?.validating && (
         <div className="p-3 text-center">
-          <ProgressSpinner style={{ width: "20px", height: "20px" }} />
+          <Loader2 className="h-5 w-5 animate-spin" />
         </div>
       )}
       {!editContext?.validating && (

package/src/editor/sidebar/ViewSelector.tsx

@@ -1,9 +1,13 @@
-import React, { useState, useMemo, useCallback } from "react";
-import { classNames } from "primereact/utils";
+import React, {
+  useState,
+  useMemo,
+  useCallback,
+  useRef,
+  useEffect,
+} from "react";
+import { cn } from "../../lib/utils";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
 import { useEditContext } from "../client/editContext";
-import { cn } from "../../lib/utils";
 import { VerticalDotsIcon, ViewToggleIcon } from "../ui/Icons";
 import {
   Popover,
@@ -59,6 +63,17 @@ function ViewSelectorComponent() {
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
+  const [disableMoreViewsTooltip, setDisableMoreViewsTooltip] = useState(false);
+  const tooltipReenableTimer = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (tooltipReenableTimer.current) {
+        window.clearTimeout(tooltipReenableTimer.current);
+        tooltipReenableTimer.current = null;
+      }
+    };
+  }, []);
 
   const views = useMemo(() => {
     return (
@@ -138,6 +153,14 @@ function ViewSelectorComponent() {
   const handleViewClickAndClosePopover = useCallback(
     (viewName: string) => {
       contextValues.switchView?.(viewName);
+      if (tooltipReenableTimer.current) {
+        window.clearTimeout(tooltipReenableTimer.current);
+      }
+      setDisableMoreViewsTooltip(true);
+      tooltipReenableTimer.current = window.setTimeout(() => {
+        setDisableMoreViewsTooltip(false);
+        tooltipReenableTimer.current = null;
+      }, 800);
       setIsPopoverOpen(false);
     },
     [contextValues.switchView],
@@ -229,7 +252,7 @@ function ViewSelectorComponent() {
               <ContextMenuTrigger asChild>
                 <TooltipTrigger asChild>
                   <div
-                    className={classNames(
+                    className={cn(
                       contextValues.viewName === view.name
                         ? "active bg-theme-secondary-light text-theme-secondary rounded-sm"
                         : "text-dark hover:bg-gray-5",
@@ -282,7 +305,10 @@ function ViewSelectorComponent() {
       {views.length > 0 && (
         <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
           {!isPopoverOpen ? (
-            <Tooltip delayDuration={500}>
+            <Tooltip
+              delayDuration={disableMoreViewsTooltip ? 100000 : 500}
+              open={disableMoreViewsTooltip ? false : undefined}
+            >
               <TooltipTrigger asChild>
                 <PopoverTrigger asChild>
                   <Button

package/src/editor/sidebar/Workbox.tsx

@@ -1,10 +1,19 @@
 import { useEditContext } from "../client/editContext";
-import { Tooltip } from "primereact/tooltip";
-import { Button } from "primereact/button";
-import { useRef, useState } from "react";
-
-import { OverlayPanel } from "primereact/overlaypanel";
-import { classNames } from "primereact/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
+import { Button } from "../../components/ui/button";
+import { useState } from "react";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { cn } from "../../lib/utils";
+import { Check } from "lucide-react";
 
 import { SimpleTable } from "../ui/SimpleTable";
 import { WorkboxItem } from "../../types";
@@ -12,6 +21,7 @@ import { WorkboxItem } from "../../types";
 export function Workbox() {
   const [validationOverlayItem, setValidationOverlayItem] =
     useState<WorkboxItem>();
+  const [isValidationOpen, setIsValidationOpen] = useState(false);
 
   const editContext = useEditContext();
 
@@ -19,12 +29,10 @@ export function Workbox() {
 
   if (!editContext) return null;
 
-  const validationOverlay = useRef<OverlayPanel>(null);
-
   const nameBodyTemplate = (wbItem: WorkboxItem) => {
     const id = wbItem.item.id + wbItem.item.language + wbItem.item.version;
     return (
-      <div className="flex gap-2 items-center">
+      <div className="flex items-center gap-2">
         {/* {(wbItem.lockedBy || wbItem.hasLock) && (
           <>
             <i
@@ -52,16 +60,20 @@ export function Workbox() {
           />
         )} */}
 
-        <span
-          className={`name-tooltip-${id} break-all`}
-          style={{ position: "relative" }}
-        >
-          {wbItem.name}{" "}
-          <span className="text-gray-500">
-            ({wbItem.item.language}, {wbItem.item.version})
-          </span>
-          <Tooltip target={`.a-name-tooltip-${id}`} content={wbItem.path} />
-        </span>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span
+              className="cursor-help break-all"
+              style={{ position: "relative" }}
+            >
+              {wbItem.name}{" "}
+              <span className="text-gray-500">
+                ({wbItem.item.language}, {wbItem.item.version})
+              </span>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>{wbItem.path}</TooltipContent>
+        </Tooltip>
       </div>
     );
   };
@@ -90,16 +102,17 @@ export function Workbox() {
             return (
               <Button
                 key={action.id}
-                label={action.name}
-                className="text-xs p-1"
+                className="p-1 text-xs"
                 onClick={() =>
                   editContext.operations.executeWorkflowCommand(
                     item.item,
-                    action.id
+                    action.id,
                   )
                 }
-                size="small"
-              />
+                size="sm"
+              >
+                {action.name}
+              </Button>
             );
           })}
       </div>
@@ -111,23 +124,23 @@ export function Workbox() {
       (x) =>
         x.item.id === item.item.id &&
         x.item.language === item.item.language &&
-        x.item.version === item.item.version
+        x.item.version === item.item.version,
     );
     if (!validator || !validator.results.length) return null;
     return (
       <div
-        className={classNames(
+        className={cn(
           "cursor-pointer",
           getValidationErrorLevelClass(
             validator.results.reduce(
               (prev, curr) => Math.max(prev, curr.result),
-              0
-            )
-          )
+              0,
+            ),
+          ),
         )}
-        onClick={(ev) => {
+        onClick={() => {
           setValidationOverlayItem(item);
-          validationOverlay.current?.toggle(ev);
+          setIsValidationOpen(true);
         }}
       >
         {validator.results.length}
@@ -141,7 +154,7 @@ export function Workbox() {
     (x) =>
       x.item.id === validationOverlayItem?.item.id &&
       x.item.language === validationOverlayItem?.item.language &&
-      x.item.version === validationOverlayItem?.item.version
+      x.item.version === validationOverlayItem?.item.version,
   );
 
   const getValidationErrorLevelClass = (level: number) => {
@@ -167,43 +180,48 @@ export function Workbox() {
     {
       body: validationTemplate,
       align: "center",
-      header: <i className="pi pi-check" />,
+      header: <Check className="h-4 w-4" />,
     },
   ];
 
   return (
     <>
       <SimpleTable items={editContext.workboxItems} columns={columns} />
-      <OverlayPanel ref={validationOverlay}>
-        <table className="text-xs border-spacing-1 border-separate m-3">
-          <thead>
-            <tr>
-              <th className="text-left">Item</th>
-              <th className="text-left">Field</th>
-              <th className="text-left">Validator</th>
-              <th className="text-left">Message</th>
-            </tr>
-          </thead>
-          <tbody>
-            {overlayResult &&
-              overlayResult.results.map((x) => (
-                <tr key={x.fieldId + x.itemId}>
-                  <td>{x.itemName}</td>
-                  <td>{x.fieldName}</td>
-                  <td>{x.validator}</td>
-                  <td
-                    className={classNames(
-                      "text-xs break-all max-w-48",
-                      getValidationErrorLevelClass(x.result)
-                    )}
-                  >
-                    {x.message}
-                  </td>
-                </tr>
-              ))}
-          </tbody>
-        </table>
-      </OverlayPanel>
+      <Popover open={isValidationOpen} onOpenChange={setIsValidationOpen}>
+        <PopoverTrigger asChild>
+          <div style={{ display: "none" }} />
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0">
+          <table className="m-3 border-separate border-spacing-1 text-xs">
+            <thead>
+              <tr>
+                <th className="text-left">Item</th>
+                <th className="text-left">Field</th>
+                <th className="text-left">Validator</th>
+                <th className="text-left">Message</th>
+              </tr>
+            </thead>
+            <tbody>
+              {overlayResult &&
+                overlayResult.results.map((x) => (
+                  <tr key={x.fieldId + x.itemId}>
+                    <td>{x.itemName}</td>
+                    <td>{x.fieldName}</td>
+                    <td>{x.validator}</td>
+                    <td
+                      className={cn(
+                        "max-w-48 text-xs break-all",
+                        getValidationErrorLevelClass(x.result),
+                      )}
+                    >
+                      {x.message}
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </PopoverContent>
+      </Popover>
     </>
   );
 }

package/src/editor/ui/DragPreview.tsx

@@ -4,12 +4,18 @@ import React from "react";
  * Lightweight React component for consistent multi-select drag previews.
  * Use with renderToString or by creating a DOM node and setting innerHTML.
  */
-export function DragMultiSelectPreview({ count }: { count: number }) {
+export function DragMultiSelectPreview({
+  count,
+  noun = "items",
+}: {
+  count: number;
+  noun?: string;
+}) {
   return (
     <div className="rounded-md border border-gray-300 bg-white px-4 py-2 pl-8 text-sm shadow-md">
       <div className="flex items-center">
         <span className="mr-1 font-bold">{count}</span>
-        <span>components</span>
+        <span>{noun}</span>
       </div>
     </div>
   );
@@ -22,16 +28,15 @@ export function DragMultiSelectPreview({ count }: { count: number }) {
 export function setMultiDragImage(
   event: React.DragEvent<any>,
   count: number,
+  noun: string = "items",
 ): () => void {
   const temp = document.createElement("div");
   temp.className =
     "bg-white shadow-md rounded-md border border-gray-300 px-4 pl-8 py-2 text-sm absolute top-[-1000px] left-[-1000px]";
-  temp.innerHTML = `<div class="flex items-center"><span class="font-bold mr-1">${count}</span> components</div>`;
+  temp.innerHTML = `<div class="flex items-center"><span class="font-bold mr-1">${count}</span> ${noun}</div>`;
   document.body.appendChild(temp);
   try {
     event.dataTransfer.setDragImage(temp, 15, 15);
-    event.dataTransfer.dropEffect = "move";
-    event.dataTransfer.effectAllowed = "move";
   } catch {}
   const cleanup = () => {
     try {

package/src/editor/ui/ItemNameDialogNew.tsx

@@ -8,7 +8,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import DialogButtons from "./DialogButtons";
 import { Button } from "../../components/ui/button";
-import { InputText } from "primereact/inputtext";
+import { Input } from "../../components/ui/input";
 import { DialogProps } from "../client/editContext";
 import { ItemDescriptor } from "../pageModel";
 import { useEditContext } from "../client/editContext";
@@ -117,7 +117,7 @@ export function ItemNameDialog(
           <div className="my-2 text-sm">
             {props.message || "Enter a name for the new item:"}
           </div>
-          <InputText
+          <Input
             ref={nameRef}
             value={name}
             className="bg-gray-5 w-full text-sm"

package/src/editor/ui/PerfectTree.tsx

@@ -7,7 +7,7 @@ import React, {
   useState,
 } from "react";
 
-import { ProgressSpinner } from "primereact/progressspinner";
+import { Loader2 } from "lucide-react";
 import { ChevronRight } from "lucide-react";
 import { setMultiDragImage } from "../ui/DragPreview";
 export interface TreeNode<T = any> {
@@ -86,6 +86,8 @@ export interface TreeProps<T = any> {
   searchClearDelay?: number;
   /** Whether to disable automatic selection when expanding nodes (even during search) */
   disableAutoSelectOnExpand?: boolean;
+  /** Noun used in multi-select drag preview (e.g., "items", "components"). Default: "items" */
+  multiDragNoun?: string;
 }
 
 /**
@@ -363,6 +365,7 @@ const NodeContent = memo(
     selectedKeys,
     isDragging,
     searchTerm = "",
+    multiDragNoun,
   }: {
     node: TreeNode<any>;
     isExpanded: boolean;
@@ -392,6 +395,7 @@ const NodeContent = memo(
     selectedKeys?: string[];
     isDragging: boolean;
     searchTerm?: string;
+    multiDragNoun?: string;
   }) => {
     const [isDragOver, setIsDragOver] = React.useState(false);
 
@@ -407,7 +411,12 @@ const NodeContent = memo(
           isSelected && selectedKeys && selectedKeys.length > 1;
 
         // Set drag preview for multiple items if applicable
-        if (isMultiSelect) setMultiDragImage(event, selectedKeys.length);
+        if (isMultiSelect)
+          setMultiDragImage(
+            event,
+            selectedKeys.length,
+            multiDragNoun || "items",
+          );
         if (onStartDrag) {
           onStartDrag({ node, event, isMultiSelect: isMultiSelect ?? false });
         }
@@ -485,10 +494,7 @@ const NodeContent = memo(
       if (node.hasChildren && node.children === null) {
         return (
           <div className="flex h-[23px] w-[24px] items-center justify-center">
-            <ProgressSpinner
-              style={{ width: "16px", height: "16px" }}
-              className="text-gray-500"
-            />
+            <Loader2 className="h-4 w-4 animate-spin text-gray-500" />
           </div>
         );
       }
@@ -573,6 +579,7 @@ export const PerfectTree = <T,>({
   enableKeyboardSearch = false,
   searchClearDelay = 1500,
   disableAutoSelectOnExpand = false,
+  multiDragNoun = "items",
 }: TreeProps<T>) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [isFocused, setIsFocused] = useState(false);
@@ -905,6 +912,7 @@ export const PerfectTree = <T,>({
                     selectedKeys={selectedKeys}
                     isDragging={isDragging}
                     searchTerm={searchTerm}
+                    multiDragNoun={multiDragNoun}
                   />
                   {isExpanded && (
                     <>

package/src/editor/ui/Section.tsx

@@ -1,4 +1,4 @@
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 import { useCollapsedSections } from "../utils";
 import { ChevronDown } from "lucide-react";
 
@@ -15,7 +15,7 @@ export function Section({
   return (
     <div>
       <div
-        className={classNames(
+        className={cn(
           open
             ? "border-blue-500 bg-gray-600"
             : "border-gray-400 bg-gray-400 hover:border-gray-300 hover:bg-gray-500",
@@ -25,14 +25,14 @@ export function Section({
       >
         {title}
         <ChevronDown
-          className={classNames(
+          className={cn(
             "size-4 transition-transform duration-200 ease-in-out",
             open ? "rotate-180" : "",
           )}
         />
       </div>
       <div
-        className={classNames(
+        className={cn(
           "grid overflow-hidden transition-[grid-template-rows] duration-300 ease-out",
           open ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
         )}

package/src/editor/ui/SimpleTable.tsx

@@ -1,4 +1,4 @@
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 
 export function SimpleTable<T>({
   items,
@@ -35,7 +35,7 @@ export function SimpleTable<T>({
       <tbody>
         {items.map((item, index) => (
           <tr
-            className={classNames(
+            className={cn(
               "border-b border-neutral-200",
               onRowClick ? "cursor-pointer hover:bg-neutral-100" : "",
               rowClassName ? rowClassName(item) : "",
@@ -48,7 +48,7 @@ export function SimpleTable<T>({
             key={index}
           >
             {columns.map((col, index) => (
-              <td className={classNames("p-2", col.className)} key={index}>
+              <td className={cn("p-2", col.className)} key={index}>
                 {col.body(item)}
               </td>
             ))}

package/src/editor/ui/Splitter.tsx

@@ -284,15 +284,21 @@ export const Splitter: React.FC<SplitterProps> = ({
 
   const getFlexGrow = (index: number): number => {
     const panelName = panels[index]!.name;
-    const raw =
+
+    // Preserve explicit collapse behavior for the last collapsible panel
+    const isCollapsedLastPanel =
       index === panels.length - 1 &&
       isLastPanelCollapsed &&
-      lastPanelCollapsible
-        ? 0
-        : (panelSizes?.[panelName] ?? panels[index]!.defaultSize);
+      lastPanelCollapsible;
+    if (isCollapsedLastPanel) return 0;
+
+    const raw = panelSizes?.[panelName] ?? panels[index]!.defaultSize;
 
     if (raw === "auto") return 1;
-    if (typeof raw === "number") return Math.max(0, raw);
+
+    // Guard against invalid or zero stored sizes that could hide panels
+    if (typeof raw === "number") return Math.max(1, raw);
+
     return 1;
   };
 

package/src/editor/views/ItemEditor.tsx

@@ -1,4 +1,4 @@
-import { Button } from "primereact/button";
+import { Button } from "../../components/ui/button";
 import { EditorWarnings } from "../EditorWarnings";
 import { FieldList } from "../FieldList";
 import { ItemInfo } from "../ItemInfo";

package/src/index.ts

@@ -25,6 +25,12 @@ export { defaultTranslateAll } from "./editor/commands/localizeItem/LocalizeItem
 
 export { Card } from "./components/ui/card";
 export { Button } from "./components/ui/button";
+export {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "./components/ui/dialog";
 
 export {
   getFilteredInputData,