@webiny/app-website-builder 6.6.0-alpha.0 → 6.6.0-alpha.2

package/BaseEditor/commandHandlers/CloneElement.d.ts

@@ -0,0 +1 @@
+export declare const CloneElement: () => null;

package/BaseEditor/commandHandlers/CloneElement.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { useDocumentEditor } from "../../DocumentEditor/index.js";
+import { Commands } from "../index.js";
+import { $cloneElement } from "../../editorSdk/utils/index.js";
+const CloneElement = ()=>{
+    const editor = useDocumentEditor();
+    useEffect(()=>editor.registerCommandHandler(Commands.CloneElement, (payload)=>{
+            const newId = $cloneElement(editor, payload.id);
+            if (newId) editor.executeCommand(Commands.SelectElement, {
+                id: newId
+            });
+        }), []);
+    return null;
+};
+export { CloneElement };
+
+//# sourceMappingURL=CloneElement.js.map

package/BaseEditor/commandHandlers/CloneElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/commandHandlers/CloneElement.js","sources":["../../../src/BaseEditor/commandHandlers/CloneElement.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { $cloneElement } from \"~/editorSdk/utils/index.js\";\n\nexport const CloneElement = () => {\n    const editor = useDocumentEditor();\n\n    useEffect(() => {\n        return editor.registerCommandHandler(Commands.CloneElement, payload => {\n            const newId = $cloneElement(editor, payload.id);\n            if (newId) {\n                editor.executeCommand(Commands.SelectElement, { id: newId });\n            }\n        });\n    }, []);\n\n    return null;\n};\n"],"names":["CloneElement","editor","useDocumentEditor","useEffect","Commands","payload","newId","$cloneElement"],"mappings":";;;;AAKO,MAAMA,eAAe;IACxB,MAAMC,SAASC;IAEfC,UAAU,IACCF,OAAO,sBAAsB,CAACG,SAAS,YAAY,EAAEC,CAAAA;YACxD,MAAMC,QAAQC,cAAcN,QAAQI,QAAQ,EAAE;YAC9C,IAAIC,OACAL,OAAO,cAAc,CAACG,SAAS,aAAa,EAAE;gBAAE,IAAIE;YAAM;QAElE,IACD,EAAE;IAEL,OAAO;AACX"}

package/BaseEditor/commandHandlers/index.js

@@ -1,11 +1,12 @@
 import react from "react";
+import { CloneElement } from "./CloneElement.js";
 import { CreateElement } from "./CreateElement.js";
 import { DeleteElement } from "./DeleteElement.js";
 import { MoveElement } from "./MoveElement.js";
 import { DeselectElement } from "./DeselectElement.js";
 import { SelectElement } from "./SelectElement.js";
 import { HighlightElement } from "./HighlightElement.js";
-const CommandHandlers = /*#__PURE__*/ react.memo(()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CreateElement, null), /*#__PURE__*/ react.createElement(DeleteElement, null), /*#__PURE__*/ react.createElement(MoveElement, null), /*#__PURE__*/ react.createElement(DeselectElement, null), /*#__PURE__*/ react.createElement(SelectElement, null), /*#__PURE__*/ react.createElement(HighlightElement, null)));
+const CommandHandlers = /*#__PURE__*/ react.memo(()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CloneElement, null), /*#__PURE__*/ react.createElement(CreateElement, null), /*#__PURE__*/ react.createElement(DeleteElement, null), /*#__PURE__*/ react.createElement(MoveElement, null), /*#__PURE__*/ react.createElement(DeselectElement, null), /*#__PURE__*/ react.createElement(SelectElement, null), /*#__PURE__*/ react.createElement(HighlightElement, null)));
 CommandHandlers.displayName = "CommandHandlers";
 export { CommandHandlers };
 

package/BaseEditor/commandHandlers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/commandHandlers/index.js","sources":["../../../src/BaseEditor/commandHandlers/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { CreateElement } from \"./CreateElement.js\";\nimport { DeleteElement } from \"./DeleteElement.js\";\nimport { MoveElement } from \"./MoveElement.js\";\nimport { DeselectElement } from \"./DeselectElement.js\";\nimport { SelectElement } from \"./SelectElement.js\";\nimport { HighlightElement } from \"./HighlightElement.js\";\n\nexport const CommandHandlers = React.memo(() => {\n    return (\n        <>\n            <CreateElement />\n            <DeleteElement />\n            <MoveElement />\n            <DeselectElement />\n            <SelectElement />\n            <HighlightElement />\n        </>\n    );\n});\n\nCommandHandlers.displayName = \"CommandHandlers\";\n"],"names":["CommandHandlers","React","CreateElement","DeleteElement","MoveElement","DeselectElement","SelectElement","HighlightElement"],"mappings":";;;;;;;AAQO,MAAMA,kBAAkB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IAC/B,WAAP,GACI,wDACI,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,aAAWA,OAAAA,WAAAA,GACZ,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,kBAAgBA;AAK7BP,gBAAgB,WAAW,GAAG"}
+{"version":3,"file":"BaseEditor/commandHandlers/index.js","sources":["../../../src/BaseEditor/commandHandlers/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { CloneElement } from \"./CloneElement.js\";\nimport { CreateElement } from \"./CreateElement.js\";\nimport { DeleteElement } from \"./DeleteElement.js\";\nimport { MoveElement } from \"./MoveElement.js\";\nimport { DeselectElement } from \"./DeselectElement.js\";\nimport { SelectElement } from \"./SelectElement.js\";\nimport { HighlightElement } from \"./HighlightElement.js\";\n\nexport const CommandHandlers = React.memo(() => {\n    return (\n        <>\n            <CloneElement />\n            <CreateElement />\n            <DeleteElement />\n            <MoveElement />\n            <DeselectElement />\n            <SelectElement />\n            <HighlightElement />\n        </>\n    );\n});\n\nCommandHandlers.displayName = \"CommandHandlers\";\n"],"names":["CommandHandlers","React","CloneElement","CreateElement","DeleteElement","MoveElement","DeselectElement","SelectElement","HighlightElement"],"mappings":";;;;;;;;AASO,MAAMA,kBAAkB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IAC/B,WAAP,GACI,wDACI,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,aAAWA,OAAAA,WAAAA,GACZ,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,kBAAgBA;AAK7BR,gBAAgB,WAAW,GAAG"}

package/BaseEditor/commands.d.ts

@@ -1,6 +1,9 @@
 import type { ElementFactoryCreateElementParams } from "@webiny/website-builder-sdk";
 import type { WebsiteBuilderTheme } from "@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js";
 export declare const Commands: {
+    CloneElement: import("~/editorSdk/createCommand.js").Command<{
+        id: string;
+    }>;
     CreateElement: import("~/editorSdk/createCommand.js").Command<{
         componentName: string;
         parentId: string;

package/BaseEditor/commands.js

@@ -1,6 +1,7 @@
 import { createCommand } from "../editorSdk/createCommand.js";
 const CreateElement = createCommand("CREATE_ELEMENT");
 const MoveElement = createCommand("MOVE_ELEMENT");
+const CloneElement = createCommand("CLONE_ELEMENT");
 const DeleteElement = createCommand("DELETE_ELEMENT");
 const SelectElement = createCommand("SELECT_ELEMENT");
 const HighlightElement = createCommand("HIGHLIGHT_ELEMENT");
@@ -10,6 +11,7 @@ const RefreshPreview = createCommand("REFRESH_PREVIEW");
 const PreviewPatchElement = createCommand("PREVIEW_PATCH_ELEMENT");
 const SendPreviewMessage = createCommand("SEND_PREVIEW_MESSAGE");
 const Commands = {
+    CloneElement: CloneElement,
     CreateElement: CreateElement,
     DeleteElement: DeleteElement,
     MoveElement: MoveElement,

package/BaseEditor/commands.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/commands.js","sources":["../../src/BaseEditor/commands.ts"],"sourcesContent":["import { createCommand } from \"~/editorSdk/createCommand.js\";\nimport type { ElementFactoryCreateElementParams } from \"@webiny/website-builder-sdk\";\nimport type { WebsiteBuilderTheme } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nconst CreateElement = createCommand<{\n    // Name of the component to use.\n    componentName: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot. Omit to append at the end.\n    index?: number;\n    // Bindings\n    bindings?: ElementFactoryCreateElementParams[\"bindings\"];\n}>(\"CREATE_ELEMENT\");\n\nconst MoveElement = createCommand<{\n    // ID of the element to move.\n    elementId: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot.\n    index: number;\n}>(\"MOVE_ELEMENT\");\n\nconst DeleteElement = createCommand<{\n    id: string;\n}>(\"DELETE_ELEMENT\");\n\nconst SelectElement = createCommand<{ id: string }>(\"SELECT_ELEMENT\");\n\nconst HighlightElement = createCommand<{ id: string }>(\"HIGHLIGHT_ELEMENT\");\n\nconst SetTheme = createCommand<{ theme: WebsiteBuilderTheme }>(\"SET_THEME\");\n\nconst DeselectElement = createCommand<never>(\"DESELECT_ELEMENT\");\n\nconst RefreshPreview = createCommand<never>(\"REFRESH_PREVIEW\");\n\nconst PreviewPatchElement = createCommand<{ elementId: string; patch: any[] }>(\n    \"PREVIEW_PATCH_ELEMENT\"\n);\n\nconst SendPreviewMessage = createCommand<{ type: string; payload?: any }>(\"SEND_PREVIEW_MESSAGE\");\n\nexport const Commands = {\n    CreateElement,\n    DeleteElement,\n    MoveElement,\n    SelectElement,\n    DeselectElement,\n    HighlightElement,\n    RefreshPreview,\n    PreviewPatchElement,\n    SendPreviewMessage,\n    SetTheme\n};\n"],"names":["CreateElement","createCommand","MoveElement","DeleteElement","SelectElement","HighlightElement","SetTheme","DeselectElement","RefreshPreview","PreviewPatchElement","SendPreviewMessage","Commands"],"mappings":";AAIA,MAAMA,gBAAgBC,cAWnB;AAEH,MAAMC,cAAcD,cASjB;AAEH,MAAME,gBAAgBF,cAEnB;AAEH,MAAMG,gBAAgBH,cAA8B;AAEpD,MAAMI,mBAAmBJ,cAA8B;AAEvD,MAAMK,WAAWL,cAA8C;AAE/D,MAAMM,kBAAkBN,cAAqB;AAE7C,MAAMO,iBAAiBP,cAAqB;AAE5C,MAAMQ,sBAAsBR,cACxB;AAGJ,MAAMS,qBAAqBT,cAA+C;AAEnE,MAAMU,WAAW;IACpBX,eAAAA;IACAG,eAAAA;IACAD,aAAAA;IACAE,eAAAA;IACAG,iBAAAA;IACAF,kBAAAA;IACAG,gBAAAA;IACAC,qBAAAA;IACAC,oBAAAA;IACAJ,UAAAA;AACJ"}
+{"version":3,"file":"BaseEditor/commands.js","sources":["../../src/BaseEditor/commands.ts"],"sourcesContent":["import { createCommand } from \"~/editorSdk/createCommand.js\";\nimport type { ElementFactoryCreateElementParams } from \"@webiny/website-builder-sdk\";\nimport type { WebsiteBuilderTheme } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nconst CreateElement = createCommand<{\n    // Name of the component to use.\n    componentName: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot. Omit to append at the end.\n    index?: number;\n    // Bindings\n    bindings?: ElementFactoryCreateElementParams[\"bindings\"];\n}>(\"CREATE_ELEMENT\");\n\nconst MoveElement = createCommand<{\n    // ID of the element to move.\n    elementId: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot.\n    index: number;\n}>(\"MOVE_ELEMENT\");\n\nconst CloneElement = createCommand<{ id: string }>(\"CLONE_ELEMENT\");\n\nconst DeleteElement = createCommand<{\n    id: string;\n}>(\"DELETE_ELEMENT\");\n\nconst SelectElement = createCommand<{ id: string }>(\"SELECT_ELEMENT\");\n\nconst HighlightElement = createCommand<{ id: string }>(\"HIGHLIGHT_ELEMENT\");\n\nconst SetTheme = createCommand<{ theme: WebsiteBuilderTheme }>(\"SET_THEME\");\n\nconst DeselectElement = createCommand<never>(\"DESELECT_ELEMENT\");\n\nconst RefreshPreview = createCommand<never>(\"REFRESH_PREVIEW\");\n\nconst PreviewPatchElement = createCommand<{ elementId: string; patch: any[] }>(\n    \"PREVIEW_PATCH_ELEMENT\"\n);\n\nconst SendPreviewMessage = createCommand<{ type: string; payload?: any }>(\"SEND_PREVIEW_MESSAGE\");\n\nexport const Commands = {\n    CloneElement,\n    CreateElement,\n    DeleteElement,\n    MoveElement,\n    SelectElement,\n    DeselectElement,\n    HighlightElement,\n    RefreshPreview,\n    PreviewPatchElement,\n    SendPreviewMessage,\n    SetTheme\n};\n"],"names":["CreateElement","createCommand","MoveElement","CloneElement","DeleteElement","SelectElement","HighlightElement","SetTheme","DeselectElement","RefreshPreview","PreviewPatchElement","SendPreviewMessage","Commands"],"mappings":";AAIA,MAAMA,gBAAgBC,cAWnB;AAEH,MAAMC,cAAcD,cASjB;AAEH,MAAME,eAAeF,cAA8B;AAEnD,MAAMG,gBAAgBH,cAEnB;AAEH,MAAMI,gBAAgBJ,cAA8B;AAEpD,MAAMK,mBAAmBL,cAA8B;AAEvD,MAAMM,WAAWN,cAA8C;AAE/D,MAAMO,kBAAkBP,cAAqB;AAE7C,MAAMQ,iBAAiBR,cAAqB;AAE5C,MAAMS,sBAAsBT,cACxB;AAGJ,MAAMU,qBAAqBV,cAA+C;AAEnE,MAAMW,WAAW;IACpBT,cAAAA;IACAH,eAAAA;IACAI,eAAAA;IACAF,aAAAA;IACAG,eAAAA;IACAG,iBAAAA;IACAF,kBAAAA;IACAG,gBAAAA;IACAC,qBAAAA;IACAC,oBAAAA;IACAJ,UAAAA;AACJ"}

package/BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.js

@@ -18,7 +18,10 @@ const usePreviewLink = ()=>{
         url.searchParams.set("wb.path", path);
         return url.toString();
     }, [
-        iframeUrl
+        iframeUrl,
+        id,
+        path,
+        documentType
     ]);
 };
 export { usePreviewLink };

package/BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\n\nexport const usePreviewLink = () => {\n    const iframeUrl = useIframeUrl();\n    const id = useSelectFromDocument(document => document.id);\n    const path = useSelectFromDocument(document => document.properties.path);\n    const documentType = useSelectFromDocument(document => document.metadata.documentType);\n\n    return useMemo(() => {\n        if (!iframeUrl) {\n            return \"\";\n        }\n        const url = new URL(iframeUrl);\n\n        // Remove all `wb.` params\n        url.searchParams.forEach((_, key) => {\n            if (key.startsWith(\"wb.\")) {\n                url.searchParams.delete(key);\n            }\n        });\n\n        // Add preview params\n        url.searchParams.set(\"wb.preview\", \"true\");\n        url.searchParams.set(\"wb.type\", documentType);\n        url.searchParams.set(\"wb.id\", String(id));\n        url.searchParams.set(\"wb.path\", path);\n        return url.toString();\n    }, [iframeUrl]);\n};\n"],"names":["usePreviewLink","iframeUrl","useIframeUrl","id","useSelectFromDocument","document","path","documentType","useMemo","url","URL","_","key","String"],"mappings":";;;AAIO,MAAMA,iBAAiB;IAC1B,MAAMC,YAAYC;IAClB,MAAMC,KAAKC,sBAAsBC,CAAAA,WAAYA,SAAS,EAAE;IACxD,MAAMC,OAAOF,sBAAsBC,CAAAA,WAAYA,SAAS,UAAU,CAAC,IAAI;IACvE,MAAME,eAAeH,sBAAsBC,CAAAA,WAAYA,SAAS,QAAQ,CAAC,YAAY;IAErF,OAAOG,QAAQ;QACX,IAAI,CAACP,WACD,OAAO;QAEX,MAAMQ,MAAM,IAAIC,IAAIT;QAGpBQ,IAAI,YAAY,CAAC,OAAO,CAAC,CAACE,GAAGC;YACzB,IAAIA,IAAI,UAAU,CAAC,QACfH,IAAI,YAAY,CAAC,MAAM,CAACG;QAEhC;QAGAH,IAAI,YAAY,CAAC,GAAG,CAAC,cAAc;QACnCA,IAAI,YAAY,CAAC,GAAG,CAAC,WAAWF;QAChCE,IAAI,YAAY,CAAC,GAAG,CAAC,SAASI,OAAOV;QACrCM,IAAI,YAAY,CAAC,GAAG,CAAC,WAAWH;QAChC,OAAOG,IAAI,QAAQ;IACvB,GAAG;QAACR;KAAU;AAClB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/usePreviewLink.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\n\nexport const usePreviewLink = () => {\n    const iframeUrl = useIframeUrl();\n    const id = useSelectFromDocument(document => document.id);\n    const path = useSelectFromDocument(document => document.properties.path);\n    const documentType = useSelectFromDocument(document => document.metadata.documentType);\n    // // Set when the edited document is an A/B variant (see variantDocument.ts). When present, the\n    // // preview must open the variant's draft — not the page the document borrows its identity from.\n    // const previewVariantId = useSelectFromDocument(\n    //     document =>\n    //         (document.metadata as Record<string, any>).wbVariantPreviewId as string | undefined\n    // );\n\n    return useMemo(() => {\n        if (!iframeUrl) {\n            return \"\";\n        }\n        const url = new URL(iframeUrl);\n\n        // Remove all `wb.` params\n        url.searchParams.forEach((_, key) => {\n            if (key.startsWith(\"wb.\")) {\n                url.searchParams.delete(key);\n            }\n        });\n\n        // if (previewVariantId) {\n        //     // Variant draft preview — the site renders this variant's draft content on its page.\n        //     url.searchParams.set(\"wb-variant-draft\", previewVariantId);\n        //     return url.toString();\n        // }\n\n        // Add preview params\n        url.searchParams.set(\"wb.preview\", \"true\");\n        url.searchParams.set(\"wb.type\", documentType);\n        url.searchParams.set(\"wb.id\", String(id));\n        url.searchParams.set(\"wb.path\", path);\n        return url.toString();\n    }, [iframeUrl, id, path, documentType /*previewVariantId*/]);\n};\n"],"names":["usePreviewLink","iframeUrl","useIframeUrl","id","useSelectFromDocument","document","path","documentType","useMemo","url","URL","_","key","String"],"mappings":";;;AAIO,MAAMA,iBAAiB;IAC1B,MAAMC,YAAYC;IAClB,MAAMC,KAAKC,sBAAsBC,CAAAA,WAAYA,SAAS,EAAE;IACxD,MAAMC,OAAOF,sBAAsBC,CAAAA,WAAYA,SAAS,UAAU,CAAC,IAAI;IACvE,MAAME,eAAeH,sBAAsBC,CAAAA,WAAYA,SAAS,QAAQ,CAAC,YAAY;IAQrF,OAAOG,QAAQ;QACX,IAAI,CAACP,WACD,OAAO;QAEX,MAAMQ,MAAM,IAAIC,IAAIT;QAGpBQ,IAAI,YAAY,CAAC,OAAO,CAAC,CAACE,GAAGC;YACzB,IAAIA,IAAI,UAAU,CAAC,QACfH,IAAI,YAAY,CAAC,MAAM,CAACG;QAEhC;QASAH,IAAI,YAAY,CAAC,GAAG,CAAC,cAAc;QACnCA,IAAI,YAAY,CAAC,GAAG,CAAC,WAAWF;QAChCE,IAAI,YAAY,CAAC,GAAG,CAAC,SAASI,OAAOV;QACrCM,IAAI,YAAY,CAAC,GAAG,CAAC,WAAWH;QAChC,OAAOG,IAAI,QAAQ;IACvB,GAAG;QAACR;QAAWE;QAAIG;QAAMC;KAAkC;AAC/D"}

package/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.ts"],"sourcesContent":["import type { Box } from \"./Box.js\";\n\ntype DropPosition = number | null;\ntype MatchChangeCallback = (hasMatch: boolean) => void;\n\nexport interface DropZoneProximity {\n    box: Box;\n    position: DropPosition;\n}\n\ninterface DropzoneEntry {\n    id: string;\n    box: Box;\n    canAccept?: () => boolean;\n    onProximityChange: (proximity: DropZoneProximity | null) => void;\n}\n\nexport class DropZoneManager {\n    private zones = new Map<string, DropzoneEntry>();\n    private currentTargetId: string | null = null;\n    private currentPosition: DropPosition = null;\n    private animationFrame: number | null = null;\n    private currentBox: Box | null = null;\n    private matchCallbacks = new Set<MatchChangeCallback>();\n\n    constructor(private mouse: { x: number; y: number }) {}\n\n    register(entry: DropzoneEntry) {\n        if (entry.id === \"root\") {\n            return;\n        }\n\n        this.zones.set(entry.id, entry);\n    }\n\n    unregister(id: string) {\n        this.zones.delete(id);\n    }\n\n    subscribeToMatchChange(cb: MatchChangeCallback): () => void {\n        this.matchCallbacks.add(cb);\n        return () => this.matchCallbacks.delete(cb);\n    }\n\n    start() {\n        const runDropzoneLoop = () => {\n            this.tick();\n            this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n        };\n        this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n    }\n\n    stop() {\n        if (this.animationFrame) {\n            cancelAnimationFrame(this.animationFrame);\n        }\n    }\n\n    getLastMatchedPosition() {\n        if (!this.currentBox) {\n            return null;\n        }\n\n        return {\n            parentId: this.currentBox.parentId,\n            slot: this.currentBox.parentSlot,\n            index: this.currentBox.parentIndex + (this.currentPosition ?? 0)\n        };\n    }\n\n    tick() {\n        const scrollYOffset = this.getScrollOffset();\n        const threshold = 10;\n        const mouseX = this.mouse.x;\n        const mouseY = this.mouse.y + scrollYOffset;\n\n        let matchedId: string | null = null;\n        let matchedPosition: DropPosition = null;\n        let matchedBox: Box | null = null;\n\n        // Collect all candidate matches with their canAccept callback.\n        const candidates: { id: string; box: Box; position: number; canAccept?: () => boolean }[] =\n            [];\n\n        for (const [id, { box, canAccept }] of this.zones) {\n            const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n            if (!isWithinX) {\n                continue;\n            }\n\n            if (Math.abs(mouseY - box.top) <= threshold) {\n                candidates.push({ id, box, position: 0, canAccept });\n            }\n\n            if (Math.abs(mouseY - box.bottom) <= threshold) {\n                candidates.push({ id, box, position: 1, canAccept });\n            }\n        }\n\n        if (candidates.length > 0) {\n            // Filter to only eligible candidates.\n            const eligible = candidates.filter(c => !c.canAccept || c.canAccept());\n\n            if (eligible.length > 0) {\n                const uniqueDepths = [...new Set(eligible.map(c => c.box.depth))].sort(\n                    (a, b) => b - a\n                );\n\n                if (uniqueDepths.length === 1) {\n                    const winner = eligible[0];\n                    matchedId = winner.id;\n                    matchedPosition = winner.position;\n                    matchedBox = winner.box;\n                } else {\n                    // Use X position to select depth band among eligible candidates only.\n                    let rangeLeft = Infinity;\n                    let rangeRight = -Infinity;\n                    for (const c of eligible) {\n                        rangeLeft = Math.min(rangeLeft, c.box.left);\n                        rangeRight = Math.max(rangeRight, c.box.right);\n                    }\n\n                    const centerX = (rangeLeft + rangeRight) / 2;\n                    const halfWidth = (rangeRight - rangeLeft) / 2;\n\n                    // 0 at center, 1 at edges.\n                    const distFromCenter =\n                        halfWidth > 0 ? Math.abs(mouseX - centerX) / halfWidth : 0;\n\n                    // Map distance to depth index: center → 0 (deepest), edges → last (shallowest).\n                    const depthIndex = Math.min(\n                        Math.floor(distFromCenter * uniqueDepths.length),\n                        uniqueDepths.length - 1\n                    );\n\n                    const winner = eligible.find(c => c.box.depth === uniqueDepths[depthIndex]);\n                    if (winner) {\n                        matchedId = winner.id;\n                        matchedPosition = winner.position;\n                        matchedBox = winner.box;\n                    }\n                }\n            }\n        }\n\n        if (matchedId !== this.currentTargetId || matchedPosition !== this.currentPosition) {\n            this.currentTargetId = matchedId;\n            this.currentPosition = matchedPosition;\n            this.currentBox = matchedBox;\n\n            this.matchCallbacks.forEach(cb => cb(matchedId !== null));\n\n            for (const [id, entry] of this.zones) {\n                const isTarget = id === matchedId;\n                entry.onProximityChange(\n                    isTarget ? { box: matchedBox!, position: matchedPosition } : null\n                );\n            }\n        }\n    }\n\n    private getScrollOffset() {\n        const container = document.getElementById(\"preview-container\");\n        if (!container) {\n            return 0;\n        }\n\n        return container.scrollTop;\n    }\n}\n"],"names":["DropZoneManager","mouse","Map","Set","entry","id","cb","runDropzoneLoop","requestAnimationFrame","cancelAnimationFrame","scrollYOffset","threshold","mouseX","mouseY","matchedId","matchedPosition","matchedBox","candidates","box","canAccept","isWithinX","Math","eligible","c","uniqueDepths","a","b","winner","rangeLeft","Infinity","rangeRight","centerX","halfWidth","distFromCenter","depthIndex","isTarget","container","document"],"mappings":"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"}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.ts"],"sourcesContent":["import type { Box } from \"./Box.js\";\n\ntype DropPosition = number | null;\ntype MatchChangeCallback = (hasMatch: boolean) => void;\n\nexport interface DropZoneProximity {\n    box: Box;\n    position: DropPosition;\n}\n\ninterface DropzoneEntry {\n    id: string;\n    box: Box;\n    canAccept?: () => boolean;\n    onProximityChange: (proximity: DropZoneProximity | null) => void;\n}\n\nexport class DropZoneManager {\n    private zones = new Map<string, DropzoneEntry>();\n    private currentTargetId: string | null = null;\n    private currentPosition: DropPosition = null;\n    private animationFrame: number | null = null;\n    private currentBox: Box | null = null;\n    private matchCallbacks = new Set<MatchChangeCallback>();\n\n    constructor(private mouse: { x: number; y: number }) {}\n\n    register(entry: DropzoneEntry) {\n        if (entry.id === \"root\") {\n            return;\n        }\n\n        this.zones.set(entry.id, entry);\n    }\n\n    unregister(id: string) {\n        this.zones.delete(id);\n    }\n\n    subscribeToMatchChange(cb: MatchChangeCallback): () => void {\n        this.matchCallbacks.add(cb);\n        return () => this.matchCallbacks.delete(cb);\n    }\n\n    start() {\n        const runDropzoneLoop = () => {\n            this.tick();\n            this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n        };\n        this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n    }\n\n    stop() {\n        if (this.animationFrame) {\n            cancelAnimationFrame(this.animationFrame);\n        }\n    }\n\n    getLastMatchedPosition() {\n        if (!this.currentBox) {\n            return null;\n        }\n\n        return {\n            parentId: this.currentBox.parentId,\n            slot: this.currentBox.parentSlot,\n            index: this.currentBox.parentIndex + (this.currentPosition ?? 0)\n        };\n    }\n\n    tick() {\n        const scrollYOffset = this.getScrollOffset();\n        const threshold = 10;\n        const mouseX = this.mouse.x;\n        const mouseY = this.mouse.y + scrollYOffset;\n\n        let matchedId: string | null = null;\n        let matchedPosition: DropPosition = null;\n        let matchedBox: Box | null = null;\n\n        // Collect all candidate matches with their canAccept callback.\n        const candidates: { id: string; box: Box; position: number; canAccept?: () => boolean }[] =\n            [];\n\n        for (const [id, { box, canAccept }] of this.zones) {\n            const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n            if (!isWithinX) {\n                continue;\n            }\n\n            if (Math.abs(mouseY - box.top) <= threshold) {\n                candidates.push({ id, box, position: 0, canAccept });\n            }\n\n            if (Math.abs(mouseY - box.bottom) <= threshold) {\n                candidates.push({ id, box, position: 1, canAccept });\n            }\n        }\n\n        if (candidates.length > 0) {\n            // Filter to only eligible candidates.\n            const eligible = candidates.filter(c => !c.canAccept || c.canAccept());\n\n            if (eligible.length > 0) {\n                const uniqueDepths = [...new Set(eligible.map(c => c.box.depth))].sort(\n                    (a, b) => b - a\n                );\n\n                if (uniqueDepths.length === 1) {\n                    const winner = eligible[0];\n                    matchedId = winner.id;\n                    matchedPosition = winner.position;\n                    matchedBox = winner.box;\n                } else {\n                    // Use X position to select depth band among eligible candidates only.\n                    let rangeLeft = Infinity;\n                    let rangeRight = -Infinity;\n                    for (const c of eligible) {\n                        rangeLeft = Math.min(rangeLeft, c.box.left);\n                        rangeRight = Math.max(rangeRight, c.box.right);\n                    }\n\n                    const centerX = (rangeLeft + rangeRight) / 2;\n                    const halfWidth = (rangeRight - rangeLeft) / 2;\n\n                    // 0 at center, 1 at edges.\n                    const distFromCenter =\n                        halfWidth > 0 ? Math.abs(mouseX - centerX) / halfWidth : 0;\n\n                    // Map distance to depth index: center → 0 (deepest), edges → last (shallowest).\n                    const depthIndex = Math.min(\n                        Math.floor(distFromCenter * uniqueDepths.length),\n                        uniqueDepths.length - 1\n                    );\n\n                    const winner = eligible.find(c => c.box.depth === uniqueDepths[depthIndex]);\n                    if (winner) {\n                        matchedId = winner.id;\n                        matchedPosition = winner.position;\n                        matchedBox = winner.box;\n                    }\n                }\n            }\n        }\n\n        if (matchedId !== this.currentTargetId || matchedPosition !== this.currentPosition) {\n            this.currentTargetId = matchedId;\n            this.currentPosition = matchedPosition;\n            this.currentBox = matchedBox;\n\n            this.matchCallbacks.forEach(cb => cb(matchedId !== null));\n\n            for (const [id, entry] of this.zones) {\n                const isTarget = id === matchedId;\n                entry.onProximityChange(\n                    isTarget ? { box: matchedBox!, position: matchedPosition } : null\n                );\n            }\n        }\n    }\n\n    private getScrollOffset() {\n        const container = document.getElementById(\"preview-container\");\n        if (!container) {\n            return 0;\n        }\n\n        return container.scrollTop;\n    }\n}\n"],"names":["DropZoneManager","mouse","Map","Set","entry","id","cb","runDropzoneLoop","requestAnimationFrame","cancelAnimationFrame","scrollYOffset","threshold","mouseX","mouseY","matchedId","matchedPosition","matchedBox","candidates","box","canAccept","isWithinX","Math","eligible","c","uniqueDepths","a","b","winner","rangeLeft","Infinity","rangeRight","centerX","halfWidth","distFromCenter","depthIndex","isTarget","container","document"],"mappings":"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"}

package/BaseEditor/defaultConfig/Content/Preview/Iframe.d.ts

@@ -8,7 +8,7 @@ interface IframeProps {
     viewportManager: ViewportManager;
     onConnected: (messenger: Messenger) => void;
 }
-export declare const Iframe: (({ url, timestamp, ...props }: IframeProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const Iframe: (({ url, timestamp, ...props }: IframeProps) => React.JSX.Element) & React.NamedExoticComponent<IframeProps> & {
+    readonly type: ({ url, timestamp, ...props }: IframeProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Content/Preview/Overlays/ElementOverlays.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const ElementOverlays: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const ElementOverlays: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/DefaultEditorConfig.js

@@ -10,6 +10,8 @@ import { CommandHandlers } from "../commandHandlers/index.js";
 import { ElementSettings } from "./Sidebar/ElementSettings/ElementSettings.js";
 import { ElementInputRenderers } from "./ElementInputRenderers.js";
 import { ContentPreviewConfig } from "./Content/ContentPreviewConfig.js";
+import { CloneElementAction } from "./Sidebar/ElementActions/CloneElementAction.js";
+import { DeleteElementAction } from "./Sidebar/ElementActions/DeleteElementAction.js";
 const { Ui: Ui } = EditorConfig;
 const ClickToActivate = ()=>/*#__PURE__*/ react.createElement(Ui.NoActiveElement, null, /*#__PURE__*/ react.createElement(SidebarEmptyState, {
         message: "Select an element in the canvas to edit properties."
@@ -44,6 +46,13 @@ const DefaultEditorConfig = /*#__PURE__*/ react.memo(()=>/*#__PURE__*/ react.cre
         name: "elementSettings",
         group: "element",
         element: /*#__PURE__*/ react.createElement(Ui.OnActiveElement, null, /*#__PURE__*/ react.createElement(ElementSettings, null))
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementAction, {
+        name: "cloneElement",
+        element: /*#__PURE__*/ react.createElement(CloneElementAction, null)
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementAction, {
+        name: "deleteElement",
+        element: /*#__PURE__*/ react.createElement(DeleteElementAction, null),
+        after: "cloneElement"
     }))));
 DefaultEditorConfig.displayName = "DefaultEditorConfig";
 export { DefaultEditorConfig };

package/BaseEditor/defaultConfig/DefaultEditorConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/DefaultEditorConfig.js","sources":["../../../src/BaseEditor/defaultConfig/DefaultEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/config/index.js\";\nimport { SidebarEmptyState } from \"./Sidebar/SidebarEmptyState.js\";\nimport { StyleSettingsGroup } from \"./Sidebar/StyleSettings/StyleSettingsGroup.js\";\nimport { StyleProperties } from \"./Sidebar/StyleSettings/StyleProperties.js\";\nimport { ElementSettingsGroup } from \"./Sidebar/ElementSettings/ElementSettingsGroup.js\";\nimport { InsertElementsTab } from \"./Toolbar/InsertElements/InsertElementsTab.js\";\nimport { NavigatorTab } from \"./Toolbar/Navigator/NavigatorTab.js\";\nimport { CommandHandlers } from \"~/BaseEditor/commandHandlers/index.js\";\nimport { ElementSettings } from \"./Sidebar/ElementSettings/ElementSettings.js\";\nimport { ElementInputRenderers } from \"./ElementInputRenderers.js\";\nimport { ContentPreviewConfig } from \"./Content/ContentPreviewConfig.js\";\n\nconst { Ui } = EditorConfig;\n\nconst ClickToActivate = () => {\n    return (\n        <Ui.NoActiveElement>\n            <SidebarEmptyState message={\"Select an element in the canvas to edit properties.\"} />\n        </Ui.NoActiveElement>\n    );\n};\n\nexport const DefaultEditorConfig = React.memo(() => {\n    return (\n        <>\n            <CommandHandlers />\n            <EditorConfig>\n                <ElementInputRenderers />\n                <ContentPreviewConfig />\n                <Ui.Toolbar.Element\n                    name={\"insertElements\"}\n                    group={\"tabs\"}\n                    element={<InsertElementsTab />}\n                />\n                <Ui.Toolbar.Element name={\"navigator\"} group={\"tabs\"} element={<NavigatorTab />} />\n                {/* Sidebar Groups */}\n                <Ui.Sidebar.Group name={\"element\"} element={<ElementSettingsGroup />} />\n                <Ui.Sidebar.Group name={\"style\"} element={<StyleSettingsGroup />} />\n                {/* Style Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"styleSettings\"}\n                    group={\"style\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <StyleProperties />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                <Ui.Sidebar.Element\n                    name={\"styleInactive\"}\n                    group={\"style\"}\n                    element={<ClickToActivate />}\n                />\n                {/* Element Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"elementInactive\"}\n                    group={\"element\"}\n                    element={<ClickToActivate />}\n                />\n                {/* This element renders element properties. */}\n                <Ui.Sidebar.Element\n                    name={\"elementSettings\"}\n                    group={\"element\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <ElementSettings />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                {/*<Ui.Sidebar.Element\n                    name={\"stateEditor\"}\n                    group={\"element\"}\n                    element={<DocumentStateEditor />}\n                />*/}\n            </EditorConfig>\n        </>\n    );\n});\n\nDefaultEditorConfig.displayName = \"DefaultEditorConfig\";\n"],"names":["Ui","EditorConfig","ClickToActivate","SidebarEmptyState","DefaultEditorConfig","React","CommandHandlers","ElementInputRenderers","ContentPreviewConfig","InsertElementsTab","NavigatorTab","ElementSettingsGroup","StyleSettingsGroup","StyleProperties","ElementSettings"],"mappings":";;;;;;;;;;;;AAaA,MAAM,EAAEA,IAAAA,EAAE,EAAE,GAAGC;AAEf,MAAMC,kBAAkB,IACb,WAAP,GACI,oBAACF,GAAG,eAAe,sBACf,oBAACG,mBAAiBA;QAAC,SAAS;;AAKjC,MAAMC,sBAAsB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IACnC,WAAP,GACI,wDACI,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACL,cAAYA,MAAAA,WAAAA,GACT,oBAACM,uBAAqBA,OAAAA,WAAAA,GACtB,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACR,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACS,mBAAiBA;sBAE/B,oBAACT,GAAG,OAAO,CAAC,OAAO;QAAC,MAAM;QAAa,OAAO;QAAQ,uBAAS,oBAACU,cAAYA;sBAE5E,oBAACV,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAW,uBAAS,oBAACW,sBAAoBA;sBACjE,oBAACX,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAS,uBAAS,oBAACY,oBAAkBA;sBAE7D,oBAACZ,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACa,iBAAeA;sBAI5B,oBAACb,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACc,iBAAeA;;AAc5CV,oBAAoB,WAAW,GAAG"}
+{"version":3,"file":"BaseEditor/defaultConfig/DefaultEditorConfig.js","sources":["../../../src/BaseEditor/defaultConfig/DefaultEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/config/index.js\";\nimport { SidebarEmptyState } from \"./Sidebar/SidebarEmptyState.js\";\nimport { StyleSettingsGroup } from \"./Sidebar/StyleSettings/StyleSettingsGroup.js\";\nimport { StyleProperties } from \"./Sidebar/StyleSettings/StyleProperties.js\";\nimport { ElementSettingsGroup } from \"./Sidebar/ElementSettings/ElementSettingsGroup.js\";\nimport { InsertElementsTab } from \"./Toolbar/InsertElements/InsertElementsTab.js\";\nimport { NavigatorTab } from \"./Toolbar/Navigator/NavigatorTab.js\";\nimport { CommandHandlers } from \"~/BaseEditor/commandHandlers/index.js\";\nimport { ElementSettings } from \"./Sidebar/ElementSettings/ElementSettings.js\";\nimport { ElementInputRenderers } from \"./ElementInputRenderers.js\";\nimport { ContentPreviewConfig } from \"./Content/ContentPreviewConfig.js\";\nimport { CloneElementAction } from \"./Sidebar/ElementActions/CloneElementAction.js\";\nimport { DeleteElementAction } from \"./Sidebar/ElementActions/DeleteElementAction.js\";\n\nconst { Ui } = EditorConfig;\n\nconst ClickToActivate = () => {\n    return (\n        <Ui.NoActiveElement>\n            <SidebarEmptyState message={\"Select an element in the canvas to edit properties.\"} />\n        </Ui.NoActiveElement>\n    );\n};\n\nexport const DefaultEditorConfig = React.memo(() => {\n    return (\n        <>\n            <CommandHandlers />\n            <EditorConfig>\n                <ElementInputRenderers />\n                <ContentPreviewConfig />\n                <Ui.Toolbar.Element\n                    name={\"insertElements\"}\n                    group={\"tabs\"}\n                    element={<InsertElementsTab />}\n                />\n                <Ui.Toolbar.Element name={\"navigator\"} group={\"tabs\"} element={<NavigatorTab />} />\n                {/* Sidebar Groups */}\n                <Ui.Sidebar.Group name={\"element\"} element={<ElementSettingsGroup />} />\n                <Ui.Sidebar.Group name={\"style\"} element={<StyleSettingsGroup />} />\n                {/* Style Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"styleSettings\"}\n                    group={\"style\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <StyleProperties />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                <Ui.Sidebar.Element\n                    name={\"styleInactive\"}\n                    group={\"style\"}\n                    element={<ClickToActivate />}\n                />\n                {/* Element Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"elementInactive\"}\n                    group={\"element\"}\n                    element={<ClickToActivate />}\n                />\n                {/* This element renders element properties. */}\n                <Ui.Sidebar.Element\n                    name={\"elementSettings\"}\n                    group={\"element\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <ElementSettings />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                {/*<Ui.Sidebar.Element\n                    name={\"stateEditor\"}\n                    group={\"element\"}\n                    element={<DocumentStateEditor />}\n                />*/}\n                {/* Element Actions (dropdown menu items) */}\n                <EditorConfig.ElementAction\n                    name={\"cloneElement\"}\n                    element={<CloneElementAction />}\n                />\n                <EditorConfig.ElementAction\n                    name={\"deleteElement\"}\n                    element={<DeleteElementAction />}\n                    after={\"cloneElement\"}\n                />\n            </EditorConfig>\n        </>\n    );\n});\n\nDefaultEditorConfig.displayName = \"DefaultEditorConfig\";\n"],"names":["Ui","EditorConfig","ClickToActivate","SidebarEmptyState","DefaultEditorConfig","React","CommandHandlers","ElementInputRenderers","ContentPreviewConfig","InsertElementsTab","NavigatorTab","ElementSettingsGroup","StyleSettingsGroup","StyleProperties","ElementSettings","CloneElementAction","DeleteElementAction"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,EAAEA,IAAAA,EAAE,EAAE,GAAGC;AAEf,MAAMC,kBAAkB,IACb,WAAP,GACI,oBAACF,GAAG,eAAe,sBACf,oBAACG,mBAAiBA;QAAC,SAAS;;AAKjC,MAAMC,sBAAsB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IACnC,WAAP,GACI,wDACI,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACL,cAAYA,MAAAA,WAAAA,GACT,oBAACM,uBAAqBA,OAAAA,WAAAA,GACtB,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACR,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACS,mBAAiBA;sBAE/B,oBAACT,GAAG,OAAO,CAAC,OAAO;QAAC,MAAM;QAAa,OAAO;QAAQ,uBAAS,oBAACU,cAAYA;sBAE5E,oBAACV,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAW,uBAAS,oBAACW,sBAAoBA;sBACjE,oBAACX,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAS,uBAAS,oBAACY,oBAAkBA;sBAE7D,oBAACZ,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACa,iBAAeA;sBAI5B,oBAACb,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACc,iBAAeA;sBAU5B,oBAACb,aAAa,aAAa;QACvB,MAAM;QACN,uBAAS,oBAACc,oBAAkBA;sBAEhC,oBAACd,aAAa,aAAa;QACvB,MAAM;QACN,uBAAS,oBAACe,qBAAmBA;QAC7B,OAAO;;AAO3BZ,oBAAoB,WAAW,GAAG"}

package/BaseEditor/defaultConfig/DocumentStateEditor/DocumentStateEditor.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const DocumentStateEditor: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const DocumentStateEditor: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/ElementInputRenderers.js

@@ -12,6 +12,7 @@ import { SelectInputRenderer } from "../../inputRenderers/SelectInput.js";
 import { FileInputRenderer } from "../../inputRenderers/FileInput.js";
 import { FragmentSelectorInputRenderer } from "../../inputRenderers/FragmentSelectorInput.js";
 import { ObjectInputRenderer } from "../../inputRenderers/ObjectInput/ObjectInputRenderer.js";
+import { ColorPickerInputRenderer } from "../../inputRenderers/ColorPickerInput.js";
 const ElementInputRenderers = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Slot",
         component: SlotInputRenderer
@@ -45,6 +46,9 @@ const ElementInputRenderers = ()=>/*#__PURE__*/ react.createElement(react.Fragme
     }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Object",
         component: ObjectInputRenderer
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
+        name: "Webiny/ColorPicker",
+        component: ColorPickerInputRenderer
     }));
 export { ElementInputRenderers };
 

package/BaseEditor/defaultConfig/ElementInputRenderers.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/ElementInputRenderers.js","sources":["../../../src/BaseEditor/defaultConfig/ElementInputRenderers.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { TextInputRenderer } from \"~/inputRenderers/TextInput.js\";\nimport { NumberInputRenderer } from \"~/inputRenderers/NumberInput.js\";\nimport { BooleanInputRenderer } from \"~/inputRenderers/BooleanInput.js\";\nimport { TextareaInputRenderer } from \"~/inputRenderers/TextareaInput.js\";\nimport { LexicalInputRenderer } from \"~/inputRenderers/LexicalInput/LexicalInput.js\";\nimport { DefaultLexicalConfig } from \"~/inputRenderers/LexicalInput/DefaultLexicalConfig.js\";\nimport { SlotInputRenderer } from \"~/inputRenderers/SlotInput.js\";\nimport { GridLayoutInputRenderer } from \"~/inputRenderers/GridLayoutInput.js\";\nimport { SelectInputRenderer } from \"~/inputRenderers/SelectInput.js\";\nimport { FileInputRenderer } from \"~/inputRenderers/FileInput.js\";\nimport { FragmentSelectorInputRenderer } from \"~/inputRenderers/FragmentSelectorInput.js\";\nimport { ObjectInputRenderer } from \"~/inputRenderers/ObjectInput/ObjectInputRenderer.js\";\n\nexport const ElementInputRenderers = () => {\n    return (\n        <>\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Slot\"}\n                component={SlotInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Input\"}\n                component={TextInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Select\"}\n                component={SelectInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Textarea\"}\n                component={TextareaInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Number\"}\n                component={NumberInputRenderer}\n            />\n            {/* Configure Lexical Editor*/}\n            <DefaultLexicalConfig />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Lexical\"}\n                component={LexicalInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Switch\"}\n                component={BooleanInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/GridLayout\"}\n                component={GridLayoutInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/FileManager\"}\n                component={FileInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/FragmentSelector\"}\n                component={FragmentSelectorInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Object\"}\n                component={ObjectInputRenderer}\n            />\n        </>\n    );\n};\n"],"names":["ElementInputRenderers","EditorConfig","SlotInputRenderer","TextInputRenderer","SelectInputRenderer","TextareaInputRenderer","NumberInputRenderer","DefaultLexicalConfig","LexicalInputRenderer","BooleanInputRenderer","GridLayoutInputRenderer","FileInputRenderer","FragmentSelectorInputRenderer","ObjectInputRenderer"],"mappings":";;;;;;;;;;;;;;AAeO,MAAMA,wBAAwB,IAC1B,WAAP,GACI,wDACI,oBAACC,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWC;sBAEf,oBAACD,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWE;sBAEf,oBAACF,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWG;sBAEf,oBAACH,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWI;sBAEf,oBAACJ,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWK;sBAGf,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACN,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWO;sBAEf,oBAACP,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWQ;sBAEf,oBAACR,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWS;sBAEf,oBAACT,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWU;sBAEf,oBAACV,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWW;sBAEf,oBAACX,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWY"}
+{"version":3,"file":"BaseEditor/defaultConfig/ElementInputRenderers.js","sources":["../../../src/BaseEditor/defaultConfig/ElementInputRenderers.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/index.js\";\nimport { TextInputRenderer } from \"~/inputRenderers/TextInput.js\";\nimport { NumberInputRenderer } from \"~/inputRenderers/NumberInput.js\";\nimport { BooleanInputRenderer } from \"~/inputRenderers/BooleanInput.js\";\nimport { TextareaInputRenderer } from \"~/inputRenderers/TextareaInput.js\";\nimport { LexicalInputRenderer } from \"~/inputRenderers/LexicalInput/LexicalInput.js\";\nimport { DefaultLexicalConfig } from \"~/inputRenderers/LexicalInput/DefaultLexicalConfig.js\";\nimport { SlotInputRenderer } from \"~/inputRenderers/SlotInput.js\";\nimport { GridLayoutInputRenderer } from \"~/inputRenderers/GridLayoutInput.js\";\nimport { SelectInputRenderer } from \"~/inputRenderers/SelectInput.js\";\nimport { FileInputRenderer } from \"~/inputRenderers/FileInput.js\";\nimport { FragmentSelectorInputRenderer } from \"~/inputRenderers/FragmentSelectorInput.js\";\nimport { ObjectInputRenderer } from \"~/inputRenderers/ObjectInput/ObjectInputRenderer.js\";\nimport { ColorPickerInputRenderer } from \"~/inputRenderers/ColorPickerInput.js\";\n\nexport const ElementInputRenderers = () => {\n    return (\n        <>\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Slot\"}\n                component={SlotInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Input\"}\n                component={TextInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Select\"}\n                component={SelectInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Textarea\"}\n                component={TextareaInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Number\"}\n                component={NumberInputRenderer}\n            />\n            {/* Configure Lexical Editor*/}\n            <DefaultLexicalConfig />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Lexical\"}\n                component={LexicalInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Switch\"}\n                component={BooleanInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/GridLayout\"}\n                component={GridLayoutInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/FileManager\"}\n                component={FileInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/FragmentSelector\"}\n                component={FragmentSelectorInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Object\"}\n                component={ObjectInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/ColorPicker\"}\n                component={ColorPickerInputRenderer}\n            />\n        </>\n    );\n};\n"],"names":["ElementInputRenderers","EditorConfig","SlotInputRenderer","TextInputRenderer","SelectInputRenderer","TextareaInputRenderer","NumberInputRenderer","DefaultLexicalConfig","LexicalInputRenderer","BooleanInputRenderer","GridLayoutInputRenderer","FileInputRenderer","FragmentSelectorInputRenderer","ObjectInputRenderer","ColorPickerInputRenderer"],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAMA,wBAAwB,IAC1B,WAAP,GACI,wDACI,oBAACC,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWC;sBAEf,oBAACD,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWE;sBAEf,oBAACF,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWG;sBAEf,oBAACH,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWI;sBAEf,oBAACJ,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWK;sBAGf,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACN,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWO;sBAEf,oBAACP,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWQ;sBAEf,oBAACR,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWS;sBAEf,oBAACT,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWU;sBAEf,oBAACV,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWW;sBAEf,oBAACX,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWY;sBAEf,oBAACZ,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWa"}

package/BaseEditor/defaultConfig/Sidebar/ElementActions/CloneElementAction.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CloneElementAction: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/ElementActions/CloneElementAction.js

@@ -0,0 +1,25 @@
+import react, { useCallback } from "react";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/content_copy.svg";
+import { useActiveElement } from "../../../hooks/useActiveElement.js";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { Commands } from "../../../index.js";
+const CloneElementAction = ()=>{
+    const [element] = useActiveElement();
+    const editor = useDocumentEditor();
+    const onClick = useCallback(()=>{
+        if (element) editor.executeCommand(Commands.CloneElement, {
+            id: element.id
+        });
+    }, [
+        element?.id
+    ]);
+    return /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: "Clone",
+        onClick: onClick
+    });
+};
+export { CloneElementAction };
+
+//# sourceMappingURL=CloneElementAction.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementActions/CloneElementAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementActions/CloneElementAction.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementActions/CloneElementAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as ContentCopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const CloneElementAction = () => {\n    const [element] = useActiveElement();\n    const editor = useDocumentEditor();\n\n    const onClick = useCallback(() => {\n        if (element) {\n            editor.executeCommand(Commands.CloneElement, { id: element.id });\n        }\n    }, [element?.id]);\n\n    return <DropdownMenu.Item icon={<ContentCopyIcon />} text={\"Clone\"} onClick={onClick} />;\n};\n"],"names":["CloneElementAction","element","useActiveElement","editor","useDocumentEditor","onClick","useCallback","Commands","DropdownMenu","ContentCopyIcon"],"mappings":";;;;;;AAOO,MAAMA,qBAAqB;IAC9B,MAAM,CAACC,QAAQ,GAAGC;IAClB,MAAMC,SAASC;IAEf,MAAMC,UAAUC,YAAY;QACxB,IAAIL,SACAE,OAAO,cAAc,CAACI,SAAS,YAAY,EAAE;YAAE,IAAIN,QAAQ,EAAE;QAAC;IAEtE,GAAG;QAACA,SAAS;KAAG;IAEhB,OAAO,WAAP,GAAO,oBAACO,aAAa,IAAI;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,MAAM;QAAS,SAASJ;;AACjF"}

package/BaseEditor/defaultConfig/Sidebar/ElementActions/DeleteElementAction.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DeleteElementAction: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/ElementActions/DeleteElementAction.js

@@ -0,0 +1,26 @@
+import react, { useCallback } from "react";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { useActiveElement } from "../../../hooks/useActiveElement.js";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { Commands } from "../../../index.js";
+const DeleteElementAction = ()=>{
+    const [element] = useActiveElement();
+    const editor = useDocumentEditor();
+    const onClick = useCallback(()=>{
+        if (element) editor.executeCommand(Commands.DeleteElement, {
+            id: element.id
+        });
+    }, [
+        element?.id
+    ]);
+    return /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        className: "text-destructive-primary [&_svg]:fill-destructive",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: "Delete",
+        onClick: onClick
+    });
+};
+export { DeleteElementAction };
+
+//# sourceMappingURL=DeleteElementAction.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementActions/DeleteElementAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementActions/DeleteElementAction.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementActions/DeleteElementAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const DeleteElementAction = () => {\n    const [element] = useActiveElement();\n    const editor = useDocumentEditor();\n\n    const onClick = useCallback(() => {\n        if (element) {\n            editor.executeCommand(Commands.DeleteElement, { id: element.id });\n        }\n    }, [element?.id]);\n\n    return (\n        <DropdownMenu.Item\n            className={\"text-destructive-primary [&_svg]:fill-destructive\"}\n            icon={<DeleteIcon />}\n            text={\"Delete\"}\n            onClick={onClick}\n        />\n    );\n};\n"],"names":["DeleteElementAction","element","useActiveElement","editor","useDocumentEditor","onClick","useCallback","Commands","DropdownMenu","DeleteIcon"],"mappings":";;;;;;AAOO,MAAMA,sBAAsB;IAC/B,MAAM,CAACC,QAAQ,GAAGC;IAClB,MAAMC,SAASC;IAEf,MAAMC,UAAUC,YAAY;QACxB,IAAIL,SACAE,OAAO,cAAc,CAACI,SAAS,aAAa,EAAE;YAAE,IAAIN,QAAQ,EAAE;QAAC;IAEvE,GAAG;QAACA,SAAS;KAAG;IAEhB,OAAO,WAAP,GACI,oBAACO,aAAa,IAAI;QACd,WAAW;QACX,oBAAM,oBAACC,gBAAUA;QACjB,MAAM;QACN,SAASJ;;AAGrB"}

package/BaseEditor/defaultConfig/Sidebar/ElementPreview.js

@@ -1,10 +1,14 @@
 import react from "react";
 import { useComponent } from "../../hooks/useComponent.js";
-import { Icon } from "@webiny/admin-ui";
+import { DropdownMenu, Icon, IconButton } from "@webiny/admin-ui";
 import { InlineSvg } from "../Toolbar/InsertElements/InlineSvg.js";
+import { ReactComponent } from "@webiny/icons/more_vert.svg";
+import { ElementActions } from "../../config/ElementAction.js";
 const ElementPreview = ({ element })=>{
     const component = useComponent(element.component.name);
     return /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between"
+    }, /*#__PURE__*/ react.createElement("div", {
         className: "flex items-center gap-sm"
     }, /*#__PURE__*/ react.createElement("div", {
         className: "fill-accent-default"
@@ -16,7 +20,13 @@ const ElementPreview = ({ element })=>{
         label: component.label ?? element.component.name
     })), /*#__PURE__*/ react.createElement("span", {
         className: "text-md font-semibold text-neutral-primary"
-    }, component.label ?? element.component.name));
+    }, component.label ?? element.component.name)), /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            size: "sm",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        })
+    }, /*#__PURE__*/ react.createElement(ElementActions, null)));
 };
 export { ElementPreview };
 

package/BaseEditor/defaultConfig/Sidebar/ElementPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementPreview.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/ElementPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\n\ninterface ElementPreviewProps {\n    element: DocumentElement;\n}\n\nexport const ElementPreview = ({ element }: ElementPreviewProps) => {\n    const component = useComponent(element.component.name);\n\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <div className={\"fill-accent-default\"}>\n                {component.image && (\n                    <Icon\n                        icon={<InlineSvg src={component.image} />}\n                        size={\"md\"}\n                        label={component.label ?? element.component.name}\n                    />\n                )}\n            </div>\n            <span className={\"text-md font-semibold text-neutral-primary\"}>\n                {component.label ?? element.component.name}\n            </span>\n        </div>\n    );\n};\n"],"names":["ElementPreview","element","component","useComponent","Icon","InlineSvg"],"mappings":";;;;AAUO,MAAMA,iBAAiB,CAAC,EAAEC,OAAO,EAAuB;IAC3D,MAAMC,YAAYC,aAAaF,QAAQ,SAAS,CAAC,IAAI;IAErD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;OACXC,UAAU,KAAK,IAAI,WAAJ,GACZ,oBAACE,MAAIA;QACD,oBAAM,oBAACC,WAASA;YAAC,KAAKH,UAAU,KAAK;;QACrC,MAAM;QACN,OAAOA,UAAU,KAAK,IAAID,QAAQ,SAAS,CAAC,IAAI;uBAI5D,oBAAC;QAAK,WAAW;OACZC,UAAU,KAAK,IAAID,QAAQ,SAAS,CAAC,IAAI;AAI1D"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementPreview.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/ElementPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { DropdownMenu, Icon, IconButton } from \"@webiny/admin-ui\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ElementActions } from \"~/BaseEditor/config/ElementAction.js\";\n\ninterface ElementPreviewProps {\n    element: DocumentElement;\n}\n\nexport const ElementPreview = ({ element }: ElementPreviewProps) => {\n    const component = useComponent(element.component.name);\n\n    return (\n        <div className={\"flex items-center justify-between\"}>\n            <div className={\"flex items-center gap-sm\"}>\n                <div className={\"fill-accent-default\"}>\n                    {component.image && (\n                        <Icon\n                            icon={<InlineSvg src={component.image} />}\n                            size={\"md\"}\n                            label={component.label ?? element.component.name}\n                        />\n                    )}\n                </div>\n                <span className={\"text-md font-semibold text-neutral-primary\"}>\n                    {component.label ?? element.component.name}\n                </span>\n            </div>\n            <DropdownMenu\n                trigger={<IconButton variant={\"ghost\"} size={\"sm\"} icon={<MoreVerticalIcon />} />}\n            >\n                <ElementActions />\n            </DropdownMenu>\n        </div>\n    );\n};\n"],"names":["ElementPreview","element","component","useComponent","Icon","InlineSvg","DropdownMenu","IconButton","MoreVerticalIcon","ElementActions"],"mappings":";;;;;;AAYO,MAAMA,iBAAiB,CAAC,EAAEC,OAAO,EAAuB;IAC3D,MAAMC,YAAYC,aAAaF,QAAQ,SAAS,CAAC,IAAI;IAErD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;OACXC,UAAU,KAAK,IAAI,WAAJ,GACZ,oBAACE,MAAIA;QACD,oBAAM,oBAACC,WAASA;YAAC,KAAKH,UAAU,KAAK;;QACrC,MAAM;QACN,OAAOA,UAAU,KAAK,IAAID,QAAQ,SAAS,CAAC,IAAI;uBAI5D,oBAAC;QAAK,WAAW;OACZC,UAAU,KAAK,IAAID,QAAQ,SAAS,CAAC,IAAI,kBAGlD,oBAACK,cAAYA;QACT,uBAAS,oBAACC,YAAUA;YAAC,SAAS;YAAS,MAAM;YAAM,oBAAM,oBAACC,gBAAgBA;;qBAE1E,oBAACC,gBAAcA;AAI/B"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js

@@ -6,7 +6,6 @@ import { InputRenderer } from "./InputRenderer.js";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { InfoMessage } from "../InfoMessage.js";
-import { ElementPreview } from "../ElementPreview.js";
 const ElementInputs = makeDecoratable("ElementInputs", ({ element })=>{
     const component = useComponent(element.component.name);
     const bindings = useSelectFromDocument((document)=>document.bindings[element.id] ?? {
@@ -25,11 +24,7 @@ const ElementInputs = makeDecoratable("ElementInputs", ({ element })=>{
     return /*#__PURE__*/ react.createElement(Grid, {
         gap: "compact",
         className: "pt-md px-sm"
-    }, /*#__PURE__*/ react.createElement(Grid.Column, {
-        span: 12
-    }, /*#__PURE__*/ react.createElement(ElementPreview, {
-        element: element
-    })), hasEditableInputs ? /*#__PURE__*/ react.createElement(react.Fragment, null) : /*#__PURE__*/ react.createElement(Grid.Column, {
+    }, hasEditableInputs ? /*#__PURE__*/ react.createElement(react.Fragment, null) : /*#__PURE__*/ react.createElement(Grid.Column, {
         span: 12
     }, /*#__PURE__*/ react.createElement(InfoMessage, {
         message: "This element has no inputs."

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InputRenderer } from \"./InputRenderer.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage.js\";\nimport { ElementPreview } from \"../ElementPreview.js\";\n\ninterface ElementInputsProps {\n    element: DocumentElement;\n}\n\nexport const ElementInputs = makeDecoratable(\"ElementInputs\", ({ element }: ElementInputsProps) => {\n    const component = useComponent(element.component.name);\n\n    const bindings = useSelectFromDocument(\n        document => {\n            return document.bindings[element.id] ?? { inputs: {} };\n        },\n        [element.id]\n    );\n\n    const inputsAst = useMemo(() => {\n        return ComponentManifestToAstConverter.convert(component.inputs ?? []);\n    }, [component.name, element.id]);\n\n    const hasEditableInputs = useMemo(() => {\n        return inputsAst.filter(input => input.type !== \"slot\").length > 0;\n    }, [inputsAst]);\n\n    if (!element) {\n        return null;\n    }\n\n    return (\n        <Grid gap={\"compact\"} className={\"pt-md px-sm\"}>\n            <Grid.Column span={12}>\n                <ElementPreview element={element} />\n            </Grid.Column>\n            {!hasEditableInputs ? (\n                <Grid.Column span={12}>\n                    <InfoMessage message={\"This element has no inputs.\"} />\n                </Grid.Column>\n            ) : (\n                <></>\n            )}\n\n            <InputRenderer key={element.id} ast={inputsAst} bindings={bindings.inputs} />\n        </Grid>\n    );\n});\n\n// interface ElementInputProps {\n//     element: DocumentElement;\n//     input: ComponentInput;\n// }\n//\n// const ElementInput = ({ element, input }: ElementInputProps) => {\n//     const Renderer = useInputRenderer(input.renderer || \"__unknown__\");\n//\n//     const { value, onChange, onPreviewChange, setBindingType } = useInputValue(element, input);\n//\n//     /*   return (\n//         <Renderer\n//             value={value.static}\n//             input={input}\n//             onChange={onChange}\n//             onPreviewChange={onPreviewChange}\n//         />\n//     );*/\n//     if (value.expression) {\n//         return (\n//             <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n//                 <ExpressionRenderer\n//                     element={element}\n//                     value={value.expression}\n//                     onChange={onChange}\n//                     input={input}\n//                 />\n//             </WithBindingToggle>\n//         );\n//     }\n//\n//     return (\n//         <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n//             <Renderer\n//                 value={value.static}\n//                 input={input}\n//                 onChange={onChange}\n//                 onPreviewChange={onPreviewChange}\n//             />\n//         </WithBindingToggle>\n//     );\n// };\n"],"names":["ElementInputs","makeDecoratable","element","component","useComponent","bindings","useSelectFromDocument","document","inputsAst","useMemo","ComponentManifestToAstConverter","hasEditableInputs","input","Grid","ElementPreview","InfoMessage","InputRenderer"],"mappings":";;;;;;;;;AAeO,MAAMA,gBAAgBC,gBAAgB,iBAAiB,CAAC,EAAEC,OAAO,EAAsB;IAC1F,MAAMC,YAAYC,aAAaF,QAAQ,SAAS,CAAC,IAAI;IAErD,MAAMG,WAAWC,sBACbC,CAAAA,WACWA,SAAS,QAAQ,CAACL,QAAQ,EAAE,CAAC,IAAI;YAAE,QAAQ,CAAC;QAAE,GAEzD;QAACA,QAAQ,EAAE;KAAC;IAGhB,MAAMM,YAAYC,QAAQ,IACfC,gCAAgC,OAAO,CAACP,UAAU,MAAM,IAAI,EAAE,GACtE;QAACA,UAAU,IAAI;QAAED,QAAQ,EAAE;KAAC;IAE/B,MAAMS,oBAAoBF,QAAQ,IACvBD,UAAU,MAAM,CAACI,CAAAA,QAASA,AAAe,WAAfA,MAAM,IAAI,EAAa,MAAM,GAAG,GAClE;QAACJ;KAAU;IAEd,IAAI,CAACN,SACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACW,MAAIA;QAAC,KAAK;QAAW,WAAW;qBAC7B,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,gBAAcA;QAAC,SAASZ;SAE5B,AAACS,oB,cAKE,4CALkB,WAApBA,GACE,oBAACE,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,aAAWA;QAAC,SAAS;SAG1B,cAGJ,oBAACC,eAAaA;QAAC,KAAKd,QAAQ,EAAE;QAAE,KAAKM;QAAW,UAAUH,SAAS,MAAM;;AAGrF"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InputRenderer } from \"./InputRenderer.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage.js\";\n\ninterface ElementInputsProps {\n    element: DocumentElement;\n}\n\nexport const ElementInputs = makeDecoratable(\"ElementInputs\", ({ element }: ElementInputsProps) => {\n    const component = useComponent(element.component.name);\n\n    const bindings = useSelectFromDocument(\n        document => {\n            return document.bindings[element.id] ?? { inputs: {} };\n        },\n        [element.id]\n    );\n\n    const inputsAst = useMemo(() => {\n        return ComponentManifestToAstConverter.convert(component.inputs ?? []);\n    }, [component.name, element.id]);\n\n    const hasEditableInputs = useMemo(() => {\n        return inputsAst.filter(input => input.type !== \"slot\").length > 0;\n    }, [inputsAst]);\n\n    if (!element) {\n        return null;\n    }\n\n    return (\n        <Grid gap={\"compact\"} className={\"pt-md px-sm\"}>\n            {!hasEditableInputs ? (\n                <Grid.Column span={12}>\n                    <InfoMessage message={\"This element has no inputs.\"} />\n                </Grid.Column>\n            ) : (\n                <></>\n            )}\n\n            <InputRenderer key={element.id} ast={inputsAst} bindings={bindings.inputs} />\n        </Grid>\n    );\n});\n\n// interface ElementInputProps {\n//     element: DocumentElement;\n//     input: ComponentInput;\n// }\n//\n// const ElementInput = ({ element, input }: ElementInputProps) => {\n//     const Renderer = useInputRenderer(input.renderer || \"__unknown__\");\n//\n//     const { value, onChange, onPreviewChange, setBindingType } = useInputValue(element, input);\n//\n//     /*   return (\n//         <Renderer\n//             value={value.static}\n//             input={input}\n//             onChange={onChange}\n//             onPreviewChange={onPreviewChange}\n//         />\n//     );*/\n//     if (value.expression) {\n//         return (\n//             <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n//                 <ExpressionRenderer\n//                     element={element}\n//                     value={value.expression}\n//                     onChange={onChange}\n//                     input={input}\n//                 />\n//             </WithBindingToggle>\n//         );\n//     }\n//\n//     return (\n//         <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n//             <Renderer\n//                 value={value.static}\n//                 input={input}\n//                 onChange={onChange}\n//                 onPreviewChange={onPreviewChange}\n//             />\n//         </WithBindingToggle>\n//     );\n// };\n"],"names":["ElementInputs","makeDecoratable","element","component","useComponent","bindings","useSelectFromDocument","document","inputsAst","useMemo","ComponentManifestToAstConverter","hasEditableInputs","input","Grid","InfoMessage","InputRenderer"],"mappings":";;;;;;;;AAcO,MAAMA,gBAAgBC,gBAAgB,iBAAiB,CAAC,EAAEC,OAAO,EAAsB;IAC1F,MAAMC,YAAYC,aAAaF,QAAQ,SAAS,CAAC,IAAI;IAErD,MAAMG,WAAWC,sBACbC,CAAAA,WACWA,SAAS,QAAQ,CAACL,QAAQ,EAAE,CAAC,IAAI;YAAE,QAAQ,CAAC;QAAE,GAEzD;QAACA,QAAQ,EAAE;KAAC;IAGhB,MAAMM,YAAYC,QAAQ,IACfC,gCAAgC,OAAO,CAACP,UAAU,MAAM,IAAI,EAAE,GACtE;QAACA,UAAU,IAAI;QAAED,QAAQ,EAAE;KAAC;IAE/B,MAAMS,oBAAoBF,QAAQ,IACvBD,UAAU,MAAM,CAACI,CAAAA,QAASA,AAAe,WAAfA,MAAM,IAAI,EAAa,MAAM,GAAG,GAClE;QAACJ;KAAU;IAEd,IAAI,CAACN,SACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACW,MAAIA;QAAC,KAAK;QAAW,WAAW;OAC5B,AAACF,oB,cAKE,4CALkB,WAApBA,GACE,oBAACE,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,aAAWA;QAAC,SAAS;SAG1B,cAGJ,oBAACC,eAAaA;QAAC,KAAKb,QAAQ,EAAE;QAAE,KAAKM;QAAW,UAAUH,SAAS,MAAM;;AAGrF"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.js

@@ -1,12 +1,21 @@
 import react from "react";
+import { Grid } from "@webiny/admin-ui";
 import { useActiveElement } from "../../../hooks/useActiveElement.js";
 import { ElementInputs } from "./ElementInputs.js";
+import { ElementPreview } from "../ElementPreview.js";
 const ElementSettings = ()=>{
     const [element] = useActiveElement();
     if (!element) return null;
-    return /*#__PURE__*/ react.createElement(ElementInputs, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Grid, {
+        gap: "compact",
+        className: "pt-md px-sm"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(ElementPreview, {
         element: element
-    });
+    }))), /*#__PURE__*/ react.createElement(ElementInputs, {
+        element: element
+    }));
 };
 export { ElementSettings };
 

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.tsx"],"sourcesContent":["import React from \"react\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { ElementInputs } from \"./ElementInputs.js\";\n\nexport const ElementSettings = () => {\n    const [element] = useActiveElement();\n\n    if (!element) {\n        return null;\n    }\n\n    return <ElementInputs element={element} />;\n};\n"],"names":["ElementSettings","element","useActiveElement","ElementInputs"],"mappings":";;;AAIO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAElB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACE,eAAaA;QAAC,SAASF;;AACnC"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { ElementInputs } from \"./ElementInputs.js\";\nimport { ElementPreview } from \"../ElementPreview.js\";\n\nexport const ElementSettings = () => {\n    const [element] = useActiveElement();\n\n    if (!element) {\n        return null;\n    }\n\n    return (\n        <>\n            <Grid gap={\"compact\"} className={\"pt-md px-sm\"}>\n                <Grid.Column span={12}>\n                    <ElementPreview element={element} />\n                </Grid.Column>\n            </Grid>\n            <ElementInputs element={element} />\n        </>\n    );\n};\n"],"names":["ElementSettings","element","useActiveElement","Grid","ElementPreview","ElementInputs"],"mappings":";;;;;AAMO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAElB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GACI,wDACI,oBAACE,MAAIA;QAAC,KAAK;QAAW,WAAW;qBAC7B,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,gBAAcA;QAAC,SAASH;wBAGjC,oBAACI,eAAaA;QAAC,SAASJ;;AAGpC"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
 export declare const BackgroundColor: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.d.ts

@@ -2,6 +2,10 @@ import React from "react";
 export declare const parseValue: (value: string) => undefined;
 export declare const BackgroundImage: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
 export declare const BackgroundPosition: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
 export declare const BackgroundScaling: (({ elementId }: {
     elementId: string;
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    elementId: string;
+}> & {
+    readonly type: ({ elementId }: {
+        elementId: string;
+    }) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderColorProps {
     elementId: string;
 }
-export declare const BorderColor: (({ elementId }: BorderColorProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const BorderColor: (({ elementId }: BorderColorProps) => React.JSX.Element) & React.NamedExoticComponent<BorderColorProps> & {
+    readonly type: ({ elementId }: BorderColorProps) => React.JSX.Element;
 };
 export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface BorderRadiusProps {
     elementId: string;
 }
-export declare const BorderRadius: (({ elementId }: BorderRadiusProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const BorderRadius: (({ elementId }: BorderRadiusProps) => React.JSX.Element) & React.NamedExoticComponent<BorderRadiusProps> & {
+    readonly type: ({ elementId }: BorderRadiusProps) => React.JSX.Element;
 };
 export {};