@alpaca-editor/core 1.0.4103 → 1.0.4104

package/src/editor/client/EditorShell.tsx

@@ -1621,6 +1621,16 @@ export function EditorShell({
 
   const editContext = useMemo<EditContextType>(() => {
     // console.log('🔄 EditContext useMemo is being recalculated');
+    // Simple registry for per-view context factories (e.g., GraphQL context)
+    // Stored outside the EditContext object via ref to avoid re-renders
+    if (!(globalThis as any).__editorContextFactoriesRef) {
+      (globalThis as any).__editorContextFactoriesRef = {
+        map: new Map<string, () => Promise<any> | any>(),
+      };
+    }
+    const factoriesRef = (globalThis as any).__editorContextFactoriesRef as {
+      map: Map<string, () => Promise<any> | any>;
+    };
     const context = {
       operations: operationsContext.ops,
       itemsRepository,
@@ -2069,6 +2079,27 @@ export function EditorShell({
       setCurrentWizardId,
       favorites,
       loadFavorites,
+      // Context factory registry methods
+      registerContextFactory: (
+        name: string,
+        factory: () => Promise<any> | any,
+      ) => {
+        try {
+          factoriesRef.map.set(name, factory);
+        } catch {}
+      },
+      unregisterContextFactory: (name: string) => {
+        try {
+          factoriesRef.map.delete(name);
+        } catch {}
+      },
+      getContextFactory: (name: string) => {
+        try {
+          return factoriesRef.map.get(name);
+        } catch {
+          return undefined;
+        }
+      },
     };
 
     return context as unknown as EditContextType;

package/src/editor/client/editContext.ts

@@ -176,7 +176,9 @@ export type EditContextType = {
   showToast: (message: string) => void;
   sessionId: string;
   openSplashScreen: () => void;
-  getComponentCommands: (components: Component[]) => Promise<ComponentCommand[]>;
+  getComponentCommands: (
+    components: Component[],
+  ) => Promise<ComponentCommand[]>;
   selectMedia: ({
     selectedIdPath,
     mode,
@@ -372,6 +374,15 @@ export type EditContextType = {
   loadFavorites: () => Promise<void>;
   currentWizardId: string | null;
   setCurrentWizardId: (wizardId: string | null) => void;
+
+  // Context factory registry (optional): panels can register named factories
+  // that produce structured context objects for agent prompts.
+  registerContextFactory?: (
+    name: string,
+    factory: () => Promise<any> | any,
+  ) => void;
+  unregisterContextFactory?: (name: string) => void;
+  getContextFactory?: (name: string) => (() => Promise<any> | any) | undefined;
 };
 
 const EditContext = React.createContext<EditContextType | undefined>(undefined);

package/src/editor/commands/agentCommands.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Command, CommandContext } from "./commands";
+import { Wand2 } from "lucide-react";
+
+export type CreateAgentCommandData = {
+  profileName?: string;
+  profileId?: string;
+  contextFactory?: string;
+  initialPrompt?: string;
+  additionalData?: Record<string, any>;
+};
+
+export const createAgentCommand: Command<CreateAgentCommandData> = {
+  id: "createAgent",
+  label: "Start Agent",
+  icon: <Wand2 strokeWidth={1} className="text-violet-600" />,
+  execute: async (context: CommandContext<CreateAgentCommandData>) => {
+    const edit = context.editContext;
+    try {
+      edit.setShowAgentsPanel?.(true);
+
+      const {
+        profileName,
+        profileId,
+        contextFactory,
+        initialPrompt,
+        additionalData,
+      } = context.data || {};
+
+      const metadata = {
+        profile: profileName,
+        additionalData: {
+          ...(additionalData || {}),
+          profileName,
+          profileId,
+          contextFactory,
+          initialPrompt,
+        },
+      } as any;
+
+      window.dispatchEvent(
+        new CustomEvent("editor:addNewAgent", { detail: { metadata } }),
+      );
+    } catch (e) {
+      console.error("Failed to start agent", e);
+    }
+  },
+  disabled: () => false,
+};

package/src/editor/commands/itemCommands.tsx

@@ -16,7 +16,19 @@ import {
 } from "../ui/CopyMoveTargetSelectorDialog";
 import { defaultTranslateAll } from "./localizeItem/LocalizeItemUtils";
 import { TranslationStatus } from "../../config/types";
-import { TriangleAlert } from "lucide-react";
+import {
+  TriangleAlert,
+  Trash2,
+  Pencil,
+  Plus,
+  ArrowRight,
+  Copy,
+  UploadCloud,
+  Download,
+  Upload,
+  Globe,
+  CopyPlus,
+} from "lucide-react";
 
 export type ItemCommandData = CommandData & {
   items: FullItem[];
@@ -29,7 +41,7 @@ export type ItemCommand = Command<ItemCommandData>;
 export const deleteItemCommand: ItemCommand = {
   id: "deleteItem",
   label: "Delete",
-  icon: "pi pi-times",
+  icon: <Trash2 strokeWidth={1} />,
   disabled: (context: ItemCommandContext) =>
     !context.data?.items || !context.data?.items[0]?.canDelete || false,
   execute: async (context: ItemCommandContext) => {
@@ -81,7 +93,7 @@ export const deleteItemCommand: ItemCommand = {
 export const renameItemCommand: ItemCommand = {
   id: "renameItem",
   label: "Rename",
-  icon: "pi pi-pencil",
+  icon: <Pencil strokeWidth={1} />,
   keyBinding: "F2",
   disabled: (context: ItemCommandContext) =>
     !context.data?.items ||
@@ -118,7 +130,7 @@ export type InsertItemCommand = Command<InsertItemCommandData>;
 export const insertItemCommand: ItemCommand = {
   id: "insertItem",
   label: "Insert Item",
-  icon: "pi pi-plus",
+  icon: <Plus strokeWidth={1} />,
   disabled: (context: ItemCommandContext) =>
     !context.data?.items ||
     context.data.items.length !== 1 ||
@@ -175,7 +187,7 @@ export type MoveCopyItemsCommand = Command<MoveCopyItemsCommandData>;
 export const moveItemsCommand: MoveCopyItemsCommand = {
   id: "moveItems",
   label: "Move Item(s)",
-  icon: "pi pi-arrow-right",
+  icon: <ArrowRight strokeWidth={1} />,
   disabled: (context: MoveCopyItemsCommandContext) =>
     !context.data?.items ||
     context.data.items.some((x) => !x.canDelete) ||
@@ -215,7 +227,7 @@ export const moveItemsCommand: MoveCopyItemsCommand = {
 export const copyItemsCommand: MoveCopyItemsCommand = {
   id: "copyItems",
   label: "Copy Item(s)",
-  icon: "pi pi-copy",
+  icon: <Copy strokeWidth={1} />,
   disabled: (context: MoveCopyItemsCommandContext) =>
     !context.data?.items || false,
   execute: async (context: MoveCopyItemsCommandContext) => {
@@ -259,7 +271,7 @@ export const copyItemsCommand: MoveCopyItemsCommand = {
 export const duplicateItemCommand: MoveCopyItemsCommand = {
   id: "duplicateItem",
   label: "Duplicate Item",
-  icon: "pi pi-clone",
+  icon: <CopyPlus strokeWidth={1} />,
   disabled: (context: MoveCopyItemsCommandContext) =>
     !context.data?.items || context.data.items.length !== 1 || false,
   execute: async (context: MoveCopyItemsCommandContext) => {
@@ -316,7 +328,7 @@ export type LocalizeItemCommand = Command<LocalizeItemCommandData>;
 export const localizeItemCommand: LocalizeItemCommand = {
   id: "localizeItem",
   label: "Localize",
-  icon: "pi pi-globe",
+  icon: <Globe strokeWidth={1} />,
   disabled: (context: LocalizeItemCommandContext) =>
     !context.data?.items || context.data.items.length === 0 || false,
   execute: async (context: LocalizeItemCommandContext) => {
@@ -344,7 +356,7 @@ export const localizeItemCommand: LocalizeItemCommand = {
 export const publishItemCommand: ItemCommand = {
   id: "publishItem",
   label: "Publish",
-  icon: "pi pi-cloud-upload",
+  icon: <UploadCloud strokeWidth={1} />,
   disabled: (context: ItemCommandContext) =>
     !context.data?.items ||
     context.data.items.length !== 1 ||
@@ -360,7 +372,7 @@ export const publishItemCommand: ItemCommand = {
 export const exportItemsCommand: ItemCommand = {
   id: "exportItem",
   label: "Export",
-  icon: "pi pi-download",
+  icon: <Download strokeWidth={1} />,
   disabled: (context: ItemCommandContext) =>
     !context.data?.items || context.data.items.length === 0 || false,
   execute: async (context: ItemCommandContext) => {
@@ -393,7 +405,7 @@ export const exportItemsCommand: ItemCommand = {
             </div>
           ),
           header: "Export Items",
-          icon: "pi pi-download",
+          icon: <Download strokeWidth={1} />,
           accept: () => {
             const language =
               (document.getElementById("export-language") as HTMLSelectElement)
@@ -456,7 +468,7 @@ export const exportItemsCommand: ItemCommand = {
               </div>
             ),
             header: "Export Results",
-            icon: "pi pi-copy",
+            icon: <Copy strokeWidth={1} />,
             accept: () => {},
             rejectLabel: "Close",
             showCancel: false,
@@ -478,7 +490,7 @@ export const exportItemsCommand: ItemCommand = {
 export const importItemsCommand: ItemCommand = {
   id: "importItems",
   label: "Import",
-  icon: "pi pi-upload",
+  icon: <Upload strokeWidth={1} />,
   disabled: (context: ItemCommandContext) =>
     !context.data?.items ||
     context.data.items.length !== 1 ||
@@ -547,7 +559,7 @@ export const importItemsCommand: ItemCommand = {
         context.editContext.confirm({
           message: dialogContent,
           header: "Import Items",
-          icon: "pi pi-upload",
+          icon: <Upload strokeWidth={1} />,
           accept: () => {
             const textarea = document.getElementById(
               "yaml-input",

package/src/editor/component-designer/aiContext.ts

@@ -1,4 +1,4 @@
-import { AiContext } from "../ai/AiTerminal";
+import { AiContext } from "../ai/types";
 //import { configuration } from "../config/config";
 import { EditContextType } from "../client/editContext";
 import { getItemDescriptor } from "../utils";

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

@@ -9,15 +9,18 @@ import { SimpleTabs, Tab } from "../ui/SimpleTabs";
 import ItemSearch, { ResultItem } from "../ui/ItemSearch";
 import { templatesRootItemId } from "../../config/config";
 import { Wizard } from "../../page-wizard/PageWizard";
+import { ArrowRight, Plus } from "lucide-react";
 
 export const InsertMenuTemplate = ({
   insertOptions,
   item,
   commandCallback,
+  mode = "overlay",
 }: {
   insertOptions: ItemTreeNodeData[];
   item: FullItem;
   commandCallback?: (command: ItemCommand, result: any) => void;
+  mode?: "overlay" | "inline";
 }) => {
   const editContext = useEditContext();
   const [filter, setFilter] = useState("");
@@ -155,7 +158,6 @@ export const InsertMenuTemplate = ({
             id: x.id,
             icon: (
               <img
-                className="p-menuitem-icon"
                 src={x.icon}
                 style={{ height: "16px" }}
                 width="16"
@@ -171,38 +173,47 @@ export const InsertMenuTemplate = ({
       label: "Options",
       content: (
         <div className="flex h-full flex-col gap-2">
-          <FilterInput
-            ref={filterRef}
-            className="w-full text-sm"
-            placeholder="Filter"
-            value={filter}
-            onChange={setFilter}
-          />
-          <div className="relative flex-1">
-            <div className="absolute inset-0 overflow-auto">
-              {options
-                ?.filter(
-                  (x) =>
-                    x.label.toLowerCase().indexOf(filter.toLowerCase()) > -1,
-                )
-                .map((option: any) => (
-                  <div
-                    key={option.id}
-                    className="flex cursor-pointer items-center gap-2 p-1 text-xs hover:bg-gray-100"
-                    onClick={(ev) => {
-                      ev.stopPropagation();
-                      ev.preventDefault();
-                      option.command(ev);
-                    }}
-                  >
-                    {option.icon}
-                    <span className="flex-1">
-                      {highlightMatch(option.label, filter)}
-                    </span>
-                  </div>
-                ))}
+          {options ? (
+            <>
+              <FilterInput
+                ref={filterRef}
+                className="w-full text-xs"
+                placeholder="Filter"
+                value={filter}
+                onChange={setFilter}
+              />
+              <div className="relative flex-1">
+                <div className="absolute inset-0 overflow-auto">
+                  {options
+                    .filter(
+                      (x) =>
+                        x.label.toLowerCase().indexOf(filter.toLowerCase()) >
+                        -1,
+                    )
+                    .map((option: any) => (
+                      <div
+                        key={option.id}
+                        className="flex cursor-pointer items-center gap-2 p-1 text-xs hover:bg-gray-100"
+                        onClick={(ev) => {
+                          ev.stopPropagation();
+                          ev.preventDefault();
+                          option.command(ev);
+                        }}
+                      >
+                        {option.icon}
+                        <span className="flex-1">
+                          {highlightMatch(option.label, filter)}
+                        </span>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="p-2 text-xs text-gray-500">
+              No options available.
             </div>
-          </div>
+          )}
         </div>
       ),
       id: "options",
@@ -212,7 +223,7 @@ export const InsertMenuTemplate = ({
       content: (
         <div className="flex h-full flex-col">
           {recentItems.length === 0 ? (
-            <div className="p-2 text-sm text-gray-500">No recent templates</div>
+            <div className="p-2 text-xs text-gray-500">No recent templates</div>
           ) : (
             recentItems.map((template) => (
               <div
@@ -225,7 +236,6 @@ export const InsertMenuTemplate = ({
                 }}
               >
                 <img
-                  className="p-menuitem-icon"
                   src={template.icon}
                   style={{ height: "16px" }}
                   width="16"
@@ -311,7 +321,6 @@ export const InsertMenuTemplate = ({
               }}
             >
               <img
-                className="p-menuitem-icon"
                 src={wizard.icon}
                 style={{ height: "16px" }}
                 width="16"
@@ -329,9 +338,25 @@ export const InsertMenuTemplate = ({
 
   const isAnyTabLoading = isLoadingRecent || isLoadingWizards;
 
+  if (mode === "inline") {
+    return (
+      <div className="min-h-[380px] min-w-[450px] p-2">
+        <div className="flex flex-col text-xs">
+          <SimpleTabs
+            className="border-gray-3 mb-2 border-b"
+            tabs={tabs}
+            setActiveTab={setActiveTab}
+            activeTab={activeTab}
+            isLoading={isAnyTabLoading}
+          />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
-      className="p-2"
+      className="flex items-center gap-2 text-xs"
       style={{ display: "flex", alignItems: "center", cursor: "pointer" }}
       onMouseEnter={() => {
         if (hideTimeoutRef.current) {
@@ -350,9 +375,9 @@ export const InsertMenuTemplate = ({
         ev.preventDefault();
       }}
     >
-      <i className="pi pi-plus mr-2"></i>
-      <span className="p-menuitem-text">Insert</span>
-      {/* The OverlayPanel will appear on hover or click. */}
+      <Plus strokeWidth={1} size={16} className="text-gray-2" />
+      <span>Insert</span>
+      <ArrowRight strokeWidth={1} size={16} className="text-gray-2 ml-auto" />
       <div
         ref={opRef}
         className="absolute z-50 rounded-md bg-white p-2 shadow-lg"

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

@@ -0,0 +1,197 @@
+"use client";
+
+import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
+import { EnhancedNameValueListField, KeyValuePair } from "../fieldTypes";
+
+type Props = {
+  field: EnhancedNameValueListField;
+  readOnly?: boolean;
+};
+
+function parseUrlEncoded(raw?: string | null): KeyValuePair[] {
+  if (!raw) return [];
+  const parts = raw.split("&").filter((p) => p.length > 0);
+  const pairs: KeyValuePair[] = [];
+  for (const part of parts) {
+    const eqIndex = part.indexOf("=");
+    const rawKey = eqIndex >= 0 ? part.substring(0, eqIndex) : part;
+    const rawValue = eqIndex >= 0 ? part.substring(eqIndex + 1) : "";
+    // Convert + to space before decode to align with Sitecore's HttpUtility behavior
+    const key = decodeURIComponent(rawKey.replace(/\+/g, " "));
+    const value = decodeURIComponent(rawValue.replace(/\+/g, " "));
+    pairs.push({ key, value });
+  }
+  return pairs;
+}
+
+function toUrlEncoded(pairs: KeyValuePair[]): string {
+  const filtered = pairs.filter((p) => (p.key || "").trim().length > 0);
+  const segments = filtered.map((p) => {
+    const encKey = encodeURIComponent(p.key);
+    const encValue = encodeURIComponent(p.value || "");
+    // Replace %20 with + for compatibility with typical form encoding in Sitecore tools
+    return `${encKey.replace(/%20/g, "+")}=${encValue.replace(/%20/g, "+")}`;
+  });
+  return segments.join("&");
+}
+
+export function NameValueListEditor({ field, readOnly }: Props) {
+  const editContext = useEditContext();
+  const [pairs, setPairs] = useState<KeyValuePair[]>([]);
+
+  useEffect(() => {
+    // Prefer typed value, fallback to raw
+    const fromValue = (
+      Array.isArray(field.value) ? (field.value as KeyValuePair[]) : undefined
+    ) as KeyValuePair[] | undefined;
+    if (fromValue && fromValue.length >= 0) {
+      setPairs(
+        fromValue.map((x) => ({ key: x.key || "", value: x.value || "" })),
+      );
+    } else {
+      setPairs(parseUrlEncoded(field.rawValue));
+    }
+  }, [field.value, field.rawValue, field.descriptor.item.id, field.id]);
+
+  if (!editContext) return null;
+
+  const commit = async (next: KeyValuePair[]) => {
+    const cleaned = next.filter((p) => (p.key || "").trim().length > 0);
+    const raw = toUrlEncoded(cleaned);
+    setPairs(next);
+    await editContext.operations.editField({
+      field: field.descriptor,
+      value: cleaned,
+      rawValue: raw,
+      refresh: "waitForQuietPeriod",
+    });
+  };
+
+  const addRow = async () => {
+    if (readOnly) return;
+    const next = [...pairs, { key: "", value: "" }];
+    setPairs(next);
+  };
+
+  const updateKey = async (index: number, key: string) => {
+    if (readOnly) return;
+    const next = pairs.map((p, i) => (i === index ? { ...p, key } : p));
+    setPairs(next);
+    await commit(next);
+  };
+
+  const updateValue = async (index: number, value: string) => {
+    if (readOnly) return;
+    const next = pairs.map((p, i) => (i === index ? { ...p, value } : p));
+    setPairs(next);
+    await commit(next);
+  };
+
+  const removeRow = async (index: number) => {
+    if (readOnly) return;
+    const next = pairs.filter((_, i) => i !== index);
+    await commit(next);
+  };
+
+  const moveRow = async (index: number, offset: number) => {
+    if (readOnly) return;
+    const newIndex = index + offset;
+    if (newIndex < 0 || newIndex >= pairs.length) return;
+    const next = [...pairs];
+    const [item] = next.splice(index, 1);
+    next.splice(newIndex, 0, item);
+    await commit(next);
+  };
+
+  return (
+    <div
+      className={`focus-shadow rounded-sm border border-gray-200 ${readOnly ? "bg-gray-5" : "bg-white"}`}
+    >
+      <div className="flex items-center justify-between border-b border-gray-200 px-2 py-1.5">
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          disabled={readOnly}
+          onClick={addRow}
+          className="h-7 px-2"
+          aria-label="Add entry"
+        >
+          <Plus className="h-4 w-4" strokeWidth={1} />
+        </Button>
+      </div>
+      <div>
+        {pairs.length === 0 && (
+          <div className="p-2 text-center text-xs text-gray-500">
+            No entries
+          </div>
+        )}
+        {pairs.map((pair, index) => (
+          <div
+            key={index}
+            className="flex items-center gap-1 border-b border-gray-100 p-1 last:border-b-0"
+          >
+            <Input
+              value={pair.key}
+              placeholder="Name"
+              disabled={readOnly}
+              className="bg-gray-5 h-7 p-1 text-xs"
+              onChange={(e) => updateKey(index, e.target.value)}
+            />
+            <span className="px-1 text-gray-400">=</span>
+            <Input
+              value={pair.value}
+              placeholder="Value"
+              disabled={readOnly}
+              className="bg-gray-5 h-7 p-1 text-xs"
+              onChange={(e) => updateValue(index, e.target.value)}
+            />
+            <div className="ml-auto flex items-center gap-0.5">
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                disabled={readOnly || index === 0}
+                onClick={() => moveRow(index, -1)}
+                className="h-7 w-7"
+                aria-label="Move up"
+                title="Move up"
+              >
+                <ArrowUp className="h-4 w-4" strokeWidth={1} />
+              </Button>
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                disabled={readOnly || index === pairs.length - 1}
+                onClick={() => moveRow(index, 1)}
+                className="h-7 w-7"
+                aria-label="Move down"
+                title="Move down"
+              >
+                <ArrowDown className="h-4 w-4" strokeWidth={1} />
+              </Button>
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                disabled={readOnly}
+                onClick={() => removeRow(index)}
+                className="h-7 w-7 text-red-600 hover:text-red-700"
+                aria-label="Delete"
+                title="Delete"
+              >
+                <Trash2 className="h-4 w-4" strokeWidth={1} />
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/editor/fieldTypes.ts

@@ -95,7 +95,7 @@ export interface KeyValuePair {
   value: string;
 }
 
-export type EnhancedNameValueListField = {
+export type EnhancedNameValueListField = Field & {
   value: KeyValuePair[];
 };