@alpaca-editor/core 1.0.4114 → 1.0.4120

package/src/editor/ai/ContextInfoBar.tsx

@@ -516,6 +516,7 @@ export function ContextInfoBar({
         onClick={() => setIsCollapsed(!isCollapsed)}
         role="button"
         aria-label={isCollapsed ? "Expand context" : "Collapse context"}
+        data-testid="context-toggle"
       >
         <div className="min-w-0 flex-1">
           <div className="text-2xs text-gray-1">Context</div>
@@ -537,11 +538,18 @@ export function ContextInfoBar({
         />
       </div>
       {!isCollapsed && (
-        <div className="flex items-center justify-between text-xs text-gray-600">
-          <div className="flex flex-wrap items-center gap-2">{chips}</div>
-          <div className="ml-2 flex flex-col items-end gap-1">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between text-xs text-gray-600">
+            <div className="flex flex-wrap items-center gap-2">{chips}</div>
+          </div>
+          <div className="flex flex-col items-start gap-1">
             {canAddPage && (
-              <Button size="xs" variant="outline" onClick={addPagesToContext}>
+              <Button
+                size="xs"
+                variant="outline"
+                onClick={addPagesToContext}
+                data-testid="add-current-item"
+              >
                 <Plus className="mr-1 h-3 w-3" strokeWidth={1} /> Add current
                 item
               </Button>
@@ -556,9 +564,9 @@ export function ContextInfoBar({
                 components
               </Button>
             )}
-            <div className="text-2xs text-gray-400">
-              Tip: Drag items or components here to add them
-            </div>
+          </div>
+          <div className="text-2xs text-gray-400">
+            Tip: Drag items or components here to add them
           </div>
         </div>
       )}

package/src/editor/client/EditorShell.tsx

@@ -1903,6 +1903,9 @@ export function EditorShell({
         contextMenuRef.current?.show(event, items);
         setCurrentOverlay("context-menu");
       },
+      updateContextMenu: (items: MenuItem[]) => {
+        contextMenuRef.current?.update(items);
+      },
 
       showFieldEditorPopup: (fields: Field[], sections: string[], ev: any) => {
         setCurrentOverlay("fields");

package/src/editor/client/GenericDialog.tsx

@@ -1,5 +1,9 @@
-import { Dialog } from "primereact/dialog";
-
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
 import { forwardRef, useImperativeHandle, useState } from "react";
 
 export interface GenericDialogHandle {
@@ -38,13 +42,13 @@ export const GenericDialog = forwardRef<GenericDialogHandle>((_, ref) => {
   }));
 
   return (
-    <Dialog
-      onHide={() => setVisible(false)}
-      visible={visible}
-      header={title}
-      style={{ width, height }}
-    >
-      {content}
+    <Dialog open={visible} onOpenChange={(open) => !open && setVisible(false)}>
+      <DialogContent className="max-w-none" style={{ width, height }}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 overflow-auto p-6">{content}</div>
+      </DialogContent>
     </Dialog>
   );
 });

package/src/editor/client/editContext.ts

@@ -15,7 +15,7 @@ import type {
   WebSocketMessage,
 } from "./EditorShell";
 import type { QuotaInfo } from "./hooks/useQuota";
-import { MenuItem } from "primereact/menuitem";
+import { MenuItem } from "../../config/types";
 import { Command, CommandData } from "../commands/commands";
 import { ComponentDetails } from "../services/componentDesignerService";
 import { PageViewContext } from "../page-viewer/pageViewContext";
@@ -248,6 +248,7 @@ export type EditContextType = {
   dismissFieldAction: (field: FieldDescriptor) => void;
   activeFieldActions: FieldAction[];
   showContextMenu(e: any, menuItems: MenuItem[]): void;
+  updateContextMenu(menuItems: MenuItem[]): void;
   setCurrentOverlay: React.Dispatch<React.SetStateAction<any>>;
   currentOverlay?: any;
 

package/src/editor/client/ui/EditorChrome.tsx

@@ -34,7 +34,7 @@ export function EditorChrome(props: {
       centerPanelView={centerPanelView}
       rightSidebar={
         currentView.rightSidebar &&
-        editContext.page &&
+        (editContext.page || editContext.contentEditorItem?.hasLayout) &&
         showComponentNavigator && (
           <SidebarView
             sidebar={currentView.rightSidebar}
@@ -49,9 +49,13 @@ export function EditorChrome(props: {
       farRightSidebar={
         showAgentsPanel &&
         !editContext.currentWizardId &&
-        !["splash-screen", "open-page", "new-page", "page-wizard", "control-center"].includes(
-          viewName,
-        ) && (
+        ![
+          "splash-screen",
+          "open-page",
+          "new-page",
+          "page-wizard",
+          "control-center",
+        ].includes(viewName) && (
           <SidebarView
             sidebar={{
               title: "Agents",

package/src/editor/commands/localizeItem/LocalizeItemDialog.tsx

@@ -1,5 +1,10 @@
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../../../components/ui/dialog";
 import { useEffect, useState } from "react";
 import DialogButtons from "../../ui/DialogButtons";
 import { DialogProps } from "../../client/editContext";
@@ -119,7 +124,9 @@ export function LocalizeItemDialog(
             </div>
           )}
           <DialogButtons>
-            <Button onClick={() => props.onClose?.(null)} label="Close" />
+            <Button onClick={() => props.onClose?.(null)} size="sm">
+              Close
+            </Button>
           </DialogButtons>
         </div>
       );
@@ -179,8 +186,12 @@ export function LocalizeItemDialog(
           </div>
         </div>
         <DialogButtons>
-          <Button onClick={startLocalization} label="Start" />
-          <Button onClick={() => props.onClose?.(null)} label="Cancel" />
+          <Button onClick={startLocalization} size="sm">
+            Start
+          </Button>
+          <Button onClick={() => props.onClose?.(null)} size="sm">
+            Cancel
+          </Button>
         </DialogButtons>
       </div>
     );
@@ -188,14 +199,22 @@ export function LocalizeItemDialog(
 
   return (
     <Dialog
-      visible={true}
-      onHide={() => {
-        props.onClose?.(null);
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) {
+          props.onClose?.(null);
+        }
       }}
-      style={{ width: "75vw", height: "75vh" }}
-      header="Localize"
     >
-      {dialogContent}
+      <DialogContent
+        className="max-w-none"
+        style={{ width: "75vw", height: "75vh" }}
+      >
+        <DialogHeader>
+          <DialogTitle>Localize</DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 overflow-auto">{dialogContent}</div>
+      </DialogContent>
     </Dialog>
   );
 }

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

@@ -3,7 +3,7 @@ import { useEditContext } from "../client/editContext";
 import { MoveCopyItemsCommand } from "../commands/itemCommands";
 import { FullItem, ItemDescriptor } from "../pageModel";
 import { ScrollingContentTree } from "../ScrollingContentTree";
-import { Button } from "primereact/button";
+import { Button } from "../../components/ui/button";
 
 export const CopyMoveMenuTemplate = ({
   items,
@@ -85,7 +85,7 @@ export const CopyMoveMenuTemplate = ({
           </div>
           <div className="flex justify-end">
             <Button
-              label={mode === "copy" ? "Copy" : "Move"}
+              size="sm"
               onClick={() => {
                 if (!selectedItem) return;
                 const result = editContext?.executeCommand({
@@ -94,7 +94,9 @@ export const CopyMoveMenuTemplate = ({
                 });
                 commandCallback?.(command, result);
               }}
-            />
+            >
+              {mode === "copy" ? "Copy" : "Move"}
+            </Button>
           </div>
         </div>
       </div>

package/src/editor/control-center/IndexOverview.tsx

@@ -9,7 +9,7 @@ import {
   Trash2,
 } from "lucide-react";
 import { Button } from "../../components/ui/button";
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 import { formatDateOnly, formatDateTime } from "../utils";
 import {
   IndexStatus,
@@ -201,7 +201,6 @@ export function IndexOverview() {
     editContext?.switchView("control-center");
   }, [editContext]);
 
-
   const getIndexStatusInfo = (
     isCollecting: boolean,
     isSubmitting: boolean,
@@ -212,33 +211,55 @@ export function IndexOverview() {
     const batches = indexStatus?.batches || [];
     const inProgress = batches.some((b) => {
       const s = (b.status || "").toLowerCase();
-      return (
-        s === "submitted" || s === "processing" || s === "queued"
-      );
+      return s === "submitted" || s === "processing" || s === "queued";
     });
 
     if (isCollecting) {
-      return { statusLabel: "Collecting items", statusClass: "text-indigo-600", hasSettingsIssue: false};
+      return {
+        statusLabel: "Collecting items",
+        statusClass: "text-indigo-600",
+        hasSettingsIssue: false,
+      };
     } else if (isSubmitting || inProgress) {
-      return { statusLabel: "Generating Embeddings", statusClass: "text-blue-600", hasSettingsIssue: false };
-    }  else if (importStatus?.isImporting) {
-      return { 
-        statusLabel: importStatus.status || "Importing embeddings", 
+      return {
+        statusLabel: "Generating Embeddings",
+        statusClass: "text-blue-600",
+        hasSettingsIssue: false,
+      };
+    } else if (importStatus?.isImporting) {
+      return {
+        statusLabel: importStatus.status || "Importing embeddings",
         statusClass: "text-purple-600",
-        hasSettingsIssue: false
+        hasSettingsIssue: false,
       };
     } else if (centroidsStatus?.isPopulating) {
-      return { 
-        statusLabel: centroidsStatus.status || "Populating centroids", 
+      return {
+        statusLabel: centroidsStatus.status || "Populating centroids",
         statusClass: "text-pink-600",
-        hasSettingsIssue: false
+        hasSettingsIssue: false,
       };
     } else if (indexStatus?.rebuilding) {
-      return { statusLabel: "Rebuilding", statusClass: "text-orange-600", hasSettingsIssue: false };
-    } else if (indexStatus?.messages != null && indexStatus.messages.length > 0 && indexStatus.messages[0]?.message){
-      return { statusLabel: indexStatus.messages[0].message, statusClass: "text-red-600", hasSettingsIssue: true };
-    }else {
-      return { statusLabel: "Ready", statusClass: "text-green-600", hasSettingsIssue: false };
+      return {
+        statusLabel: "Rebuilding",
+        statusClass: "text-orange-600",
+        hasSettingsIssue: false,
+      };
+    } else if (
+      indexStatus?.messages != null &&
+      indexStatus.messages.length > 0 &&
+      indexStatus.messages[0]?.message
+    ) {
+      return {
+        statusLabel: indexStatus.messages[0].message,
+        statusClass: "text-red-600",
+        hasSettingsIssue: true,
+      };
+    } else {
+      return {
+        statusLabel: "Ready",
+        statusClass: "text-green-600",
+        hasSettingsIssue: false,
+      };
     }
   };
 
@@ -281,7 +302,7 @@ export function IndexOverview() {
                     <button
                       onClick={handleSubmitStaged}
                       disabled={isSubmitting || stagedCount === 0}
-                      className={classNames(
+                      className={cn(
                         "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
                         {
                           "bg-amber-600 text-white hover:bg-amber-700":
@@ -299,7 +320,7 @@ export function IndexOverview() {
                     <button
                       onClick={handleStartDirect}
                       disabled={isStartingDirect || stagedCount === 0}
-                      className={classNames(
+                      className={cn(
                         "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
                         {
                           "bg-rose-600 text-white hover:bg-rose-700":
@@ -321,7 +342,7 @@ export function IndexOverview() {
                   <button
                     onClick={handleFinalize}
                     disabled={isFinalizing}
-                    className={classNames(
+                    className={cn(
                       "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
                       {
                         "bg-green-600 text-white hover:bg-green-700":
@@ -340,7 +361,7 @@ export function IndexOverview() {
                 <button
                   onClick={handleCollectAndUpload}
                   disabled={isCollecting}
-                  className={classNames(
+                  className={cn(
                     "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
                     {
                       "bg-indigo-600 text-white hover:bg-indigo-700":
@@ -369,7 +390,7 @@ export function IndexOverview() {
               <button
                 onClick={handlePopulateCentroids}
                 disabled={centroidsStatus?.isPopulating || isPopulating}
-                className={classNames(
+                className={cn(
                   "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
                   {
                     "bg-purple-500 text-white hover:bg-purple-600":
@@ -387,7 +408,7 @@ export function IndexOverview() {
               <button
                 onClick={handleCleanup}
                 disabled={isCleaning}
-                className={classNames(
+                className={cn(
                   "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
                   {
                     "bg-gray-100 text-gray-700 hover:bg-gray-200": !isCleaning,
@@ -427,20 +448,28 @@ export function IndexOverview() {
               <div className="rounded bg-gray-50 p-3">
                 <div className="text-sm text-gray-600">Status</div>
                 {(() => {
-                  const { statusLabel, statusClass, hasSettingsIssue } = getIndexStatusInfo(
-                    isCollecting,
-                    isSubmitting,
-                    indexStatus,
-                    importStatus,
-                    centroidsStatus,
-                  );
+                  const { statusLabel, statusClass, hasSettingsIssue } =
+                    getIndexStatusInfo(
+                      isCollecting,
+                      isSubmitting,
+                      indexStatus,
+                      importStatus,
+                      centroidsStatus,
+                    );
                   return (
                     <div
-                      className={classNames("text-sm font-medium flex items-center gap-2", statusClass)}
+                      className={cn(
+                        "flex items-center gap-2 text-sm font-medium",
+                        statusClass,
+                      )}
                     >
                       {statusLabel}
                       {hasSettingsIssue && (
-                        <Button size="sm" variant="outline" onClick={goToSettings}>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={goToSettings}
+                        >
                           <ExternalLink className="h-4 w-4" strokeWidth={1} />
                           Settings
                         </Button>

package/src/editor/control-center/setup-steps/SettingsSetupStep.tsx

@@ -99,11 +99,16 @@ export function SettingsSetupStep() {
       setCreatingSettings(true);
       setSettingsError(null);
 
-      const parentDescriptor: ItemDescriptor = {
-        id: "{2DE1F76B-39F0-49A0-8589-8F360E0B3F7E}",
-        language: userLang,
-        version: 0,
-      } as any;
+      // Resolve /sitecore/content/Settings to get the current parent ID (do not rely on fixed GUID)
+      const settingsParent = await resolvePathUnderContent(["Settings"]);
+      if (!settingsParent) {
+        setSettingsState("error");
+        setSettingsError(
+          "Settings parent not found at /sitecore/content/Settings",
+        );
+        return;
+      }
+      const parentDescriptor: ItemDescriptor = settingsParent;
 
       const branchOrTemplateId = "f133cae9-8fbc-4cdf-868e-321a533dec5b";
 
@@ -126,7 +131,7 @@ export function SettingsSetupStep() {
     } finally {
       setCreatingSettings(false);
     }
-  }, [editContext, userLang]);
+  }, [editContext, userLang, resolvePathUnderContent]);
 
   React.useEffect(() => {
     checkSettingsItem();

package/src/editor/field-types/CheckboxEditor.tsx

@@ -4,7 +4,7 @@ import { useEditContext } from "../client/editContext";
 
 import { Checkbox } from "../../components/ui/checkbox";
 import { useEffect, useState } from "react";
-import { ProgressSpinner } from "primereact/progressspinner";
+import { Loader2 } from "lucide-react";
 import { CheckboxField } from "../fieldTypes";
 
 export function CheckboxEditor({
@@ -26,7 +26,7 @@ export function CheckboxEditor({
   if (!fieldItem) return;
 
   if (isUpdating) {
-    return <ProgressSpinner style={{ width: "18px", height: "18px" }} />;
+    return <Loader2 className="h-[18px] w-[18px] animate-spin" />;
   }
 
   return (

package/src/editor/field-types/DateFieldEditor.tsx

@@ -13,7 +13,7 @@ import {
 } from "../../components/ui/popover";
 import { Calendar } from "../../components/ui/calendar";
 import { useEffect, useState } from "react";
-import { ProgressSpinner } from "primereact/progressspinner";
+import { Loader2 } from "lucide-react";
 import { DateField, DateFieldValue } from "../fieldTypes";
 
 // Helper function to format date to compact ISO format: YYYYMMDDTHHMMSSZ
@@ -79,7 +79,7 @@ export function DateFieldEditor({
   if (!fieldItem) return null;
 
   if (isUpdating) {
-    return <ProgressSpinner style={{ width: "18px", height: "18px" }} />;
+    return <Loader2 className="h-[18px] w-[18px] animate-spin" />;
   }
 
   const handleDateSelect = async (selectedDate: Date | undefined) => {

package/src/editor/field-types/DateTimeFieldEditor.tsx

@@ -14,7 +14,6 @@ import {
 import { Calendar } from "../../components/ui/calendar";
 import { Input } from "../../components/ui/input";
 import { useEffect, useState } from "react";
-import { ProgressSpinner } from "primereact/progressspinner";
 import { DateTimeField, DateTimeFieldValue } from "../fieldTypes";
 
 // Helper function to format date to compact ISO format: YYYYMMDDTHHMMSSZ

package/src/editor/field-types/ImageFieldEditor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEditContext } from "../client/editContext";
-import { InputText } from "primereact/inputtext";
+import { Input } from "../../components/ui/input";
 import { ImageField } from "../fieldTypes";
 import { useEffect, useState } from "react";
 import { ImageEditor } from "../ImageEditor";
@@ -43,12 +43,11 @@ export function ImageFieldEditor({
       </div>
       <div className="mt-2">
         <div className="mb-1">Alt Text</div>
-        <InputText
+        <Input
           key={item!.id + field.id + item!.language + item!.version}
           value={altText}
           disabled={readOnly}
-          className="focus-shadow bg-gray-5 p-1.5 text-xs"
-          style={{ width: "100%" }}
+          className="focus-shadow bg-gray-5 w-full p-1.5 text-xs"
           onChange={(e) => {
             setAltText(e.target.value);
             if (field.value) field.value.alt = e.target.value;

package/src/editor/field-types/InternalLinkFieldEditor.tsx

@@ -9,7 +9,7 @@ import { ScrollingContentTree } from "../ScrollingContentTree";
 
 import { InternalLinkField } from "../fieldTypes";
 import { getLookupSources } from "../services/editService";
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 import ItemSearch from "../ui/ItemSearch";
 import { normalizeGuid } from "../utils";
 import {
@@ -120,7 +120,7 @@ export function InternalLinkFieldEditor({
       <Popover open={showTree} onOpenChange={setShowTree}>
         <PopoverTrigger asChild disabled={readOnly}>
           <div
-            className={classNames(
+            className={cn(
               "justiy-between focus-shadow bg-gray-5 flex cursor-pointer justify-between rounded-sm border p-1.5 text-xs",
               readOnly ? "cursor-default bg-gray-100" : "",
             )}

package/src/editor/field-types/LinkFieldEditor.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { Link, LinkEditorDialog } from "../LinkEditorDialog";
 import { useEditContext } from "../client/editContext";
 import { LinkField } from "../fieldTypes";
-import { classNames } from "primereact/utils";
+import { cn } from "../../lib/utils";
 import { Link as LinkIcon } from "lucide-react";
 
 export function LinkFieldEditor({
@@ -27,6 +27,7 @@ export function LinkFieldEditor({
       type: field.value.type,
       itemId: field.value.targetItemLongId?.split("/").pop(),
       queryString: field.value.queryString,
+      text: field.value.text,
     });
   }, [field]);
   if (!field.value) return;
@@ -34,7 +35,7 @@ export function LinkFieldEditor({
   return (
     <>
       <div
-        className={classNames(
+        className={cn(
           "focus-shadow border-gray-3 bg-gray-5 flex justify-between rounded-sm border p-1.5",
           readOnly ? "bg-gray-100" : "cursor-pointer",
         )}
@@ -50,11 +51,14 @@ export function LinkFieldEditor({
       {showDialog && (
         <LinkEditorDialog
           linkValue={link || { type: "internal" }}
+          showText={true}
           onOk={(link) => {
             const xml =
               link.type == "internal"
                 ? '<link linktype="internal" querystring="' +
                   (link.queryString ?? "") +
+                  '" text="' +
+                  (link.text ?? "") +
                   '" id="' +
                   link.itemId +
                   '" target="' +
@@ -62,6 +66,8 @@ export function LinkFieldEditor({
                   '" />'
                 : '<link linktype="external" querystring="' +
                   (link.queryString ?? "") +
+                  '" text="' +
+                  (link.text ?? "") +
                   '" url="' +
                   link.url +
                   '" target="' +

package/src/editor/field-types/MultiLineText.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { InputTextarea } from "primereact/inputtextarea";
+import { Textarea } from "../../components/ui/textarea";
 import {
   useEditContextRef,
   useFieldsEditContextRef,
@@ -68,15 +68,14 @@ export function MultiLineText({
   }, [fieldsContextRef.current?.focusedField]);
 
   return (
-    <InputTextarea
+    <Textarea
       ref={inputRef}
       key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
       value={value}
       disabled={readOnly}
-      className="focus-shadow bg-gray-5 p-2 text-xs"
-      style={{ width: "100%" }}
+      className="focus-shadow bg-gray-5 w-full p-2 text-xs"
       rows={12}
-      onChange={(e) => {
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
         setValue(e.target.value);
         updateFieldValue(e.target.value as string);
       }}

package/src/editor/field-types/PictureFieldEditor.tsx

@@ -2,12 +2,13 @@
 
 import { useEditContext } from "../client/editContext";
 
-import { InputText } from "primereact/inputtext";
+import { Input } from "../../components/ui/input";
 
 import { PictureEditor } from "../PictureEditor";
 import { PictureField, PictureRawValue } from "../fieldTypes";
 import { useEffect, useState } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { Trash } from "lucide-react";
 
 export function PictureFieldEditor({
   field,
@@ -83,7 +84,7 @@ export function PictureFieldEditor({
                       refresh: "immediate",
                     });
                   }}
-                  icon="pi pi-trash"
+                  icon={<Trash className="h-4 w-4" />}
                   label="Remove"
                 />
               </div>
@@ -93,12 +94,11 @@ export function PictureFieldEditor({
       </div>
       <div className="mt-2">
         <div className="mb-1">Alt Text</div>
-        <InputText
+        <Input
           key={item!.id + field.id + item!.language + item!.version}
           value={altText}
           disabled={readOnly}
-          className="focus-shadow bg-gray-5 p-1.5 text-xs"
-          style={{ width: "100%" }}
+          className="focus-shadow bg-gray-5 w-full p-1.5 text-xs"
           onChange={(e) => {
             setAltText(e.target.value);
             const raw = field?.rawValue