@alpaca-editor/core 1.0.4114 → 1.0.4120

package/dist/styles.css

@@ -7,6 +7,7 @@
     --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-100: oklch(93.6% 0.032 17.717);
     --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-300: oklch(80.8% 0.114 19.571);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
@@ -38,6 +39,7 @@
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-200: oklch(92.5% 0.084 155.995);
+    --color-green-300: oklch(87.1% 0.15 154.449);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
@@ -243,9 +245,6 @@
   .top-\[-5px\] {
     top: -5px;
   }
-  .top-\[-12px\] {
-    top: -12px;
-  }
   .top-\[-18px\] {
     top: -18px;
   }
@@ -273,18 +272,12 @@
   .right-1 {
     right: calc(var(--spacing) * 1);
   }
-  .right-1\.5 {
-    right: calc(var(--spacing) * 1.5);
-  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
-  .right-\[-12px\] {
-    right: -12px;
-  }
   .right-\[-18px\] {
     right: -18px;
   }
@@ -417,9 +410,6 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
-  .mt-1\.5 {
-    margin-top: calc(var(--spacing) * 1.5);
-  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -589,10 +579,6 @@
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
-  .size-full {
-    width: 100%;
-    height: 100%;
-  }
   .h-\(--cell-size\) {
     height: var(--cell-size);
   }
@@ -686,6 +672,9 @@
   .h-\[16px\] {
     height: 16px;
   }
+  .h-\[18px\] {
+    height: 18px;
+  }
   .h-\[23px\] {
     height: 23px;
   }
@@ -902,6 +891,9 @@
   .w-\[12px\] {
     width: 12px;
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
   .w-\[24px\] {
     width: 24px;
   }
@@ -953,6 +945,9 @@
   .max-w-\[240px\] {
     max-width: 240px;
   }
+  .max-w-\[320px\] {
+    max-width: 320px;
+  }
   .max-w-\[450px\] {
     max-width: 450px;
   }
@@ -1341,13 +1336,6 @@
       margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-  .space-x-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .space-x-3 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1591,6 +1579,9 @@
   .border-green-200 {
     border-color: var(--color-green-200);
   }
+  .border-green-300 {
+    border-color: var(--color-green-300);
+  }
   .border-green-500 {
     border-color: var(--color-green-500);
   }
@@ -1618,6 +1609,9 @@
   .border-red-200 {
     border-color: var(--color-red-200);
   }
+  .border-red-300 {
+    border-color: var(--color-red-300);
+  }
   .border-red-400 {
     border-color: var(--color-red-400);
   }
@@ -2068,9 +2062,6 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .py-\[7px\] {
-    padding-block: 7px;
-  }
   .py-\[9px\] {
     padding-block: 9px;
   }
@@ -2116,6 +2107,9 @@
   .pr-7 {
     padding-right: calc(var(--spacing) * 7);
   }
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
@@ -2272,6 +2266,9 @@
   .text-amber-600 {
     color: var(--color-amber-600);
   }
+  .text-amber-700 {
+    color: var(--color-amber-700);
+  }
   .text-amber-900 {
     color: var(--color-amber-900);
   }
@@ -2512,6 +2509,10 @@
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-0 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3358,6 +3359,31 @@
       }
     }
   }
+  .focus-visible\:outline {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .focus-visible\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus-visible\:-outline-offset-2 {
+    &:focus-visible {
+      outline-offset: calc(2px * -1);
+    }
+  }
+  .focus-visible\:outline-ring\/70 {
+    &:focus-visible {
+      outline-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        outline-color: color-mix(in oklab, var(--ring) 70%, transparent);
+      }
+    }
+  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.4114",
+  "version": "1.0.4120",
   "publishConfig": {
     "access": "public"
   },

package/src/components/FilterInput.tsx

@@ -1,6 +1,6 @@
-import { InputText } from "primereact/inputtext";
-import { ProgressSpinner } from "primereact/progressspinner";
 import { forwardRef } from "react";
+import { Search, X, Loader2 } from "lucide-react";
+import { Input } from "./ui/input";
 import { cn } from "../lib/utils";
 
 export interface FilterInputProps {
@@ -45,36 +45,33 @@ export const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(
 
     return (
       <div className={cn("relative flex items-center", className)}>
-        <InputText
+        <Input
           ref={ref}
           type="text"
           value={value}
           onChange={(e) => onChange(e.target.value)}
           className={cn(
-            "border-gray-3 w-full rounded border px-2 py-1 pr-6 text-xs focus:ring-1 focus:outline-none",
-            size === "sm" && "py-1",
-            size === "md" && "py-[7px]",
+            "pr-8 text-xs",
+            size === "sm" && "h-7",
+            size === "md" && "h-8",
+            size === "lg" && "h-9",
           )}
           placeholder={placeholder}
           disabled={disabled}
           autoFocus={autoFocus}
         />
         {loading && (
-          <ProgressSpinner
-            className="absolute right-1.5"
-            style={{
-              width: "18px",
-              height: "18px",
-              ...spinnerStyle,
-            }}
+          <Loader2
+            className="absolute right-2 h-4 w-4 animate-spin text-gray-400"
+            style={spinnerStyle}
           />
         )}
         {!loading && !value && showSearchIcon && (
-          <i className="pi pi-search absolute right-2 text-xs text-gray-400" />
+          <Search className="absolute right-2 h-4 w-4 text-gray-400" />
         )}
         {!loading && value && showClearIcon && (
-          <i
-            className="pi pi-times absolute right-2 cursor-pointer text-xs text-gray-400 hover:text-gray-600"
+          <X
+            className="absolute right-2 h-4 w-4 cursor-pointer text-gray-400 hover:text-gray-600"
             onClick={handleClear}
           />
         )}

package/src/components/ui/input.tsx

@@ -8,8 +8,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent p-1 px-3 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-xs file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-xs",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent p-1 px-3 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-xs file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-xs",
+        // Use outline for focus instead of ring (box-shadow) so it doesn't override .focus-shadow
+        "focus-visible:border-ring focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/70",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,
       )}

package/src/components/ui/textarea.tsx

@@ -11,7 +11,9 @@ const Textarea = React.forwardRef<
       ref={ref}
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input placeholder:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        // Use outline for focus instead of ring (box-shadow) so it doesn't override .focus-shadow
+        "focus-visible:border-ring focus-visible:outline-ring/70 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2",
         className,
       )}
       {...props}

package/src/config/config.tsx

@@ -569,7 +569,7 @@ export const getConfiguration = (): EditorConfiguration => {
         },
         {
           name: "comments",
-          title: "Comments",
+          title: "Feedback",
           icon: <MessageCircleMore strokeWidth={1} />,
           leftSidebar: {
             panels: [

package/src/editor/AspectRatioSelector.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { classNames } from "primereact/utils";
+import { cn } from "../lib/utils";
 
 export interface AspectRatioOption {
   label: string;
@@ -46,7 +46,7 @@ export function AspectRatioSelector({
       : ratiosToShow;
 
   return (
-    <div className={classNames("space-y-2", className)}>
+    <div className={cn("space-y-2", className)}>
       <div className="text-sm font-medium">Aspect Ratio</div>
       <div className="flex flex-wrap gap-2">
         {finalRatios.map((option) => (
@@ -119,7 +119,7 @@ function AspectRatioTile({
       <button
         onClick={onClick}
         disabled={disabled}
-        className={classNames(
+        className={cn(
           "relative rounded border-2 transition-all",
           "hover:border-theme-secondary/50 focus:ring-theme-secondary/20 flex items-center justify-center focus:ring-2 focus:outline-none",
           {

package/src/editor/ContentTree.tsx

@@ -480,6 +480,10 @@ export default function ContentTree({
     event: React.DragEvent;
     isMultiSelect: boolean;
   }): void {
+    try {
+      // Allow both copy and move operations when dragging items
+      data.event.dataTransfer.effectAllowed = "copyMove";
+    } catch {}
     const items = data.isMultiSelect
       ? selectedItemIds
           ?.map((x) => nodeDictionary.current[x]?.data)
@@ -593,6 +597,10 @@ export default function ContentTree({
       let itemIds = selectedItemIds;
       if (!enableContextMenu) return;
 
+      // Always block the native context menu immediately
+      originalEvent.preventDefault();
+      originalEvent.stopPropagation();
+
       if (!itemIds || !itemIds.includes(key as string)) {
         if (onSelectionChange && selectionMode === "single") {
           onSelectionChange([node.data as ItemTreeNodeData]);
@@ -600,6 +608,33 @@ export default function ContentTree({
         itemIds = [key as string];
       }
 
+      // Prepare a synthetic event for later use (to avoid React event pooling)
+      const { clientX, clientY, shiftKey, altKey, ctrlKey } = originalEvent;
+      const syntheticEvent = new MouseEvent("contextmenu", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        clientX,
+        clientY,
+        shiftKey,
+        altKey,
+        ctrlKey,
+      });
+
+      // Only show a spinner if work takes longer than 100ms
+      let loadingShown = false;
+      const loadingTimer = setTimeout(() => {
+        loadingShown = true;
+        editContext?.showContextMenu(syntheticEvent, [
+          {
+            id: "loading",
+            label: "Loading…",
+            disabled: true,
+            icon: <Spinner size="sm" className="mr-2" />,
+          },
+        ]);
+      }, 100);
+
       const items = await editContext?.itemsRepository.getItems(
         itemIds.map((x) => ({
           id: x,
@@ -608,7 +643,16 @@ export default function ContentTree({
         })),
       );
 
-      if (!items || items.length === 0) return;
+      // Build the final menu, then either show or update depending on whether loading is visible
+      if (!items || items.length === 0) {
+        clearTimeout(loadingTimer);
+        const emptyMenu = [
+          { id: "empty", label: "No actions available", disabled: true },
+        ];
+        if (loadingShown) editContext?.updateContextMenu(emptyMenu);
+        else editContext?.showContextMenu(syntheticEvent, emptyMenu);
+        return;
+      }
 
       const menuItems =
         await editContext?.configuration.editor.contentTree.contextMenu.factory(
@@ -626,7 +670,11 @@ export default function ContentTree({
             },
           },
         );
-      if (menuItems) editContext?.showContextMenu(originalEvent, menuItems);
+      if (menuItems && menuItems.length > 0) {
+        clearTimeout(loadingTimer);
+        if (loadingShown) editContext?.updateContextMenu(menuItems);
+        else editContext?.showContextMenu(syntheticEvent, menuItems);
+      }
     },
     [
       itemCommands,
@@ -775,6 +823,7 @@ export default function ContentTree({
           selectedKeys={selectedKeys}
           onContextMenu={onContextMenu}
           enableDragAndDrop={enableDragAndDrop}
+          multiDragNoun={"items"}
           onStartDrag={handleDragStart}
           onDragOverZone={handleDragOverZone}
           onDragEnd={handleDragEnd}

package/src/editor/ContextMenu.tsx

@@ -70,7 +70,7 @@ import { cn } from "../lib/utils";
 //   };
 // }
 
-export async function showComponentContextMenu(
+export async function buildComponentContextMenuItems(
   components: Component[],
   editContext: EditContextType,
   field?: FieldDescriptor,
@@ -81,13 +81,13 @@ export async function showComponentContextMenu(
     allFieldButtons: FieldButton[],
     event: any,
   ) => void,
-) {
+): Promise<MenuItem[]> {
   const componentCommandMenuItems = await getComponentMenuItems(
     editContext,
     components,
   );
 
-  const menuItems = componentCommandMenuItems;
+  const menuItems = [...componentCommandMenuItems];
 
   // Only show field actions when a single component is selected
   if (
@@ -107,17 +107,13 @@ export async function showComponentContextMenu(
         id: button.id,
         label: button.label,
         command: async (event) => {
-          // Check if the button has parameters
           if (button.parameters && button.parameters.length > 0) {
-            // If we have a parameterized action handler, use it
             if (onParameterizedAction) {
               onParameterizedAction(field, button, fieldButtons, event);
             } else {
-              // Fallback: execute without parameters (might not work well)
               editContext!.triggerFieldAction(field, button);
             }
           } else {
-            // For simple actions, execute directly
             editContext!.triggerFieldAction(field, button);
           }
         },
@@ -161,10 +157,32 @@ export async function showComponentContextMenu(
     }
   }
 
+  return menuItems;
+}
+
+export async function showComponentContextMenu(
+  components: Component[],
+  editContext: EditContextType,
+  field?: FieldDescriptor,
+  fieldButtons?: FieldButton[],
+  onParameterizedAction?: (
+    field: FieldDescriptor,
+    action: FieldButton,
+    allFieldButtons: FieldButton[],
+    event: any,
+  ) => void,
+) {
+  const menuItems = await buildComponentContextMenuItems(
+    components,
+    editContext,
+    field,
+    fieldButtons,
+    onParameterizedAction,
+  );
+
   return (e: any) => {
     if (!e.shiftKey && !e.altKey) {
       if (menuItems.length) {
-        //        editContext.select([component.id]);
         editContext!.showContextMenu(e, menuItems);
       }
 
@@ -176,6 +194,7 @@ export async function showComponentContextMenu(
 
 export interface EditContextMenuRef {
   show: (event: any, menuItems: MenuItem[]) => void;
+  update: (menuItems: MenuItem[]) => void;
   close: (event: any) => void;
 }
 
@@ -199,6 +218,9 @@ export const EditContextMenu = forwardRef<
         });
       }
     },
+    update: (items: MenuItem[]) => {
+      setMenuItems(items);
+    },
     close: (event: any) => {
       try {
         // Close Radix ContextMenu by sending Escape to the document

package/src/editor/EditorWarning.tsx

@@ -1,4 +1,4 @@
-import { classNames } from "primereact/utils";
+import { cn } from "../lib/utils";
 
 export function EditorWarning({
   title,
@@ -13,16 +13,16 @@ export function EditorWarning({
     severity === "info"
       ? "bg-blue-100"
       : severity === "error"
-      ? "bg-red-100"
-      : "bg-yellow-100";
+        ? "bg-red-100"
+        : "bg-yellow-100";
   return (
     <div
-      className={classNames(
+      className={cn(
         background,
-        "text-sm text-gray-500 border-b border-yellow-300 flex gap-2 items-stretch"
+        "flex items-stretch gap-2 border-b border-yellow-300 text-sm text-gray-500",
       )}
     >
-      <div className="bg-yellow-200 px-4 flex items-center text-gray-900">
+      <div className="flex items-center bg-yellow-200 px-4 text-gray-900">
         <span className="pi pi-exclamation-triangle text-2xl" />
       </div>
       <div className="p-2">

package/src/editor/FieldEditorPopup.tsx

@@ -1,13 +1,17 @@
 "use client";
 
-import { OverlayPanel } from "primereact/overlaypanel";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../components/ui/popover";
 import {
   SyntheticEvent,
   forwardRef,
   useImperativeHandle,
-  useRef,
   useState,
 } from "react";
+import { X } from "lucide-react";
 
 import { FieldList } from "./FieldList";
 import { Field } from "./pageModel";
@@ -23,8 +27,7 @@ export const FieldEditorPopup = forwardRef<
   FieldEditorPopupRef,
   FieldEditorPopupProps
 >((_, ref) => {
-  const overlayRef = useRef<OverlayPanel>(null);
-
+  const [isOpen, setIsOpen] = useState(false);
   const [sections, setSections] = useState<string[]>([]);
   const [fields, setFields] = useState<Field[]>([]);
 
@@ -32,34 +35,41 @@ export const FieldEditorPopup = forwardRef<
     show: (fields: Field[], sections: string[], ev: SyntheticEvent) => {
       setFields(fields);
       setSections(sections);
-      overlayRef.current?.toggle(ev, ev.target);
+      setIsOpen(true);
     },
     close: () => {
-      overlayRef.current?.hide();
+      setIsOpen(false);
     },
   }));
 
   return (
-    <OverlayPanel ref={overlayRef}>
-      <div
-        className="w-96 h-96 flex flex-col gap-2 overflow-auto"
-        onClick={(ev) => ev.stopPropagation()}
-      >
-        <div className="flex justify-end p-3">
-          <i
-            className="pi pi-times cursor-pointer"
-            onClick={() => overlayRef?.current?.hide()}
-          />
-        </div>
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <div style={{ display: "none" }} />
+      </PopoverTrigger>
+      <PopoverContent className="h-96 w-96">
+        <div
+          className="flex flex-col gap-2 overflow-auto"
+          onClick={(ev) => ev.stopPropagation()}
+        >
+          <div className="flex justify-end p-3">
+            <X
+              className="h-4 w-4 cursor-pointer"
+              onClick={() => setIsOpen(false)}
+            />
+          </div>
 
-        {fields && (
-          <FieldList
-            fields={[{ fields }]}
-            sections={sections}
-            validators={[]}
-          />
-        )}
-      </div>
-    </OverlayPanel>
+          {fields && (
+            <FieldList
+              fields={[{ fields }]}
+              sections={sections}
+              validators={[]}
+            />
+          )}
+
+          <div className="p-2 text-xs text-gray-500">TEST</div>
+        </div>
+      </PopoverContent>
+    </Popover>
   );
 });

package/src/editor/FieldHistory.tsx

@@ -8,6 +8,7 @@ import { useEditContext } from "./client/editContext";
 import { formatDate } from "./utils";
 import { SimpleTable } from "./ui/SimpleTable";
 import { SimpleIconButton } from "./ui/SimpleIconButton";
+import { Undo } from "lucide-react";
 
 export function FieldHistory({
   field,
@@ -54,7 +55,7 @@ export function FieldHistory({
               header: "Revert",
               body: (x) => (
                 <SimpleIconButton
-                  icon="pi pi-undo"
+                  icon={<Undo className="h-4 w-4" />}
                   onClick={async () => {
                     await editContext.operations.editField({
                       field: field.descriptor,

package/src/editor/FieldListField.tsx

@@ -270,14 +270,14 @@ export default function FieldListField({
               </PopoverTrigger>
               <PopoverContent className="w-56 p-1" align="start" side="bottom">
                 <button
-                  className="flex w-full items-center gap-2 rounded px-3 py-2 text-sm transition-colors hover:bg-gray-100"
+                  className="flex w-full items-center gap-2 rounded px-3 py-2 text-xs transition-colors hover:bg-gray-100"
                   onClick={handleOpenFieldItem}
                 >
                   <ExternalLink strokeWidth={1} className="h-4 w-4" />
                   Open Field Item
                 </button>
                 <button
-                  className="flex w-full items-center gap-2 rounded px-3 py-2 text-sm transition-colors hover:bg-gray-100"
+                  className="flex w-full items-center gap-2 rounded px-3 py-2 text-xs transition-colors hover:bg-gray-100"
                   onClick={handleShowFieldJson}
                 >
                   <span className="font-mono text-sm">{"{}"}</span>