@webiny/app-website-builder 6.5.0-beta.1 → 6.5.0-beta.10

package/BaseEditor/config/Sidebar/Tab.d.ts

@@ -1,8 +1,4 @@
 import React from "react";
-export declare const TabContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface TabProps {
     name: string;
     label: string;

package/BaseEditor/config/Sidebar/Tab.js

@@ -1,31 +1,15 @@
 import react from "react";
-import styled from "@emotion/styled";
-import { SegmentedControl } from "@webiny/admin-ui";
-const TabContainer = styled("div")({
-    display: "flex",
-    position: "relative",
-    flexDirection: "column",
-    height: "calc(100vh - 44px - 49px)",
-    overflowY: "auto",
-    "&::-webkit-scrollbar": {
-        width: 1
-    },
-    "&::-webkit-scrollbar-track": {
-        boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)"
-    },
-    "&::-webkit-scrollbar-thumb": {
-        backgroundColor: "darkgrey",
-        outline: "1px solid slategrey"
-    }
-});
+import { FillViewportHeight, ScrollArea, SegmentedControl } from "@webiny/admin-ui";
 const Tab = ({ name, label, icon, disabled, element, visible })=>/*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
         value: name,
         trigger: label,
         icon: icon,
         disabled: disabled,
         visible: visible,
-        content: /*#__PURE__*/ react.createElement(TabContainer, null, element)
+        content: /*#__PURE__*/ react.createElement(FillViewportHeight, null, /*#__PURE__*/ react.createElement(ScrollArea, {
+            className: "h-full"
+        }, element))
     });
-export { Tab, TabContainer };
+export { Tab };
 
 //# sourceMappingURL=Tab.js.map

package/BaseEditor/config/Sidebar/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/config/Sidebar/Tab.js","sources":["../../../../src/BaseEditor/config/Sidebar/Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\n\nexport const TabContainer = styled(\"div\")({\n    display: \"flex\",\n    position: \"relative\",\n    flexDirection: \"column\",\n    height: \"calc(100vh - 44px - 49px)\", // Subtract top-bar and tab-header height\n    overflowY: \"auto\",\n    // Style scrollbar\n    \"&::-webkit-scrollbar\": {\n        width: 1\n    },\n    \"&::-webkit-scrollbar-track\": {\n        boxShadow: \"inset 0 0 6px rgba(0, 0, 0, 0.3)\"\n    },\n    \"&::-webkit-scrollbar-thumb\": {\n        backgroundColor: \"darkgrey\",\n        outline: \"1px solid slategrey\"\n    }\n});\n\nexport interface TabProps {\n    name: string;\n    label: string;\n    icon?: React.ReactElement;\n    element: React.JSX.Element;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\nexport const Tab = ({ name, label, icon, disabled, element, visible }: TabProps) => {\n    return (\n        <SegmentedControl.Tabs.Tab\n            value={name}\n            trigger={label}\n            icon={icon}\n            disabled={disabled}\n            visible={visible}\n            content={<TabContainer>{element}</TabContainer>}\n        />\n    );\n};\n"],"names":["TabContainer","styled","Tab","name","label","icon","disabled","element","visible","SegmentedControl"],"mappings":";;;AAIO,MAAMA,eAAeC,OAAO,OAAO;IACtC,SAAS;IACT,UAAU;IACV,eAAe;IACf,QAAQ;IACR,WAAW;IAEX,wBAAwB;QACpB,OAAO;IACX;IACA,8BAA8B;QAC1B,WAAW;IACf;IACA,8BAA8B;QAC1B,iBAAiB;QACjB,SAAS;IACb;AACJ;AAWO,MAAMC,MAAM,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAY,GACpE,WAAP,GACI,oBAACC,iBAAiB,IAAI,CAAC,GAAG;QACtB,OAAON;QACP,SAASC;QACT,MAAMC;QACN,UAAUC;QACV,SAASE;QACT,uBAAS,oBAACR,cAAYA,MAAEO"}
+{"version":3,"file":"BaseEditor/config/Sidebar/Tab.js","sources":["../../../../src/BaseEditor/config/Sidebar/Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport { FillViewportHeight, ScrollArea, SegmentedControl } from \"@webiny/admin-ui\";\n\nexport interface TabProps {\n    name: string;\n    label: string;\n    icon?: React.ReactElement;\n    element: React.JSX.Element;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\nexport const Tab = ({ name, label, icon, disabled, element, visible }: TabProps) => {\n    return (\n        <SegmentedControl.Tabs.Tab\n            value={name}\n            trigger={label}\n            icon={icon}\n            disabled={disabled}\n            visible={visible}\n            // Same pattern as the Insert panel: FillViewportHeight sizes the region to the space\n            // from its own top edge down to the viewport bottom (no hardcoded offsets), and the\n            // ScrollArea scrolls the content within it.\n            content={\n                <FillViewportHeight>\n                    <ScrollArea className={\"h-full\"}>{element}</ScrollArea>\n                </FillViewportHeight>\n            }\n        />\n    );\n};\n"],"names":["Tab","name","label","icon","disabled","element","visible","SegmentedControl","FillViewportHeight","ScrollArea"],"mappings":";;AAYO,MAAMA,MAAM,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAY,GACpE,WAAP,GACI,oBAACC,iBAAiB,IAAI,CAAC,GAAG;QACtB,OAAON;QACP,SAASC;QACT,MAAMC;QACN,UAAUC;QACV,SAASE;QAIT,uBACI,oBAACE,oBAAkBA,MAAAA,WAAAA,GACf,oBAACC,YAAUA;YAAC,WAAW;WAAWJ"}

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

@@ -1,80 +1,20 @@
-import react, { useCallback, useEffect, useState } from "react";
-import { ReactComponent } from "@webiny/icons/language.svg";
-import { Button, DropdownMenu, IconButton, Input, Separator, cn } from "@webiny/admin-ui";
+import react, { useEffect } from "react";
+import { PreviewDomainMenu } from "@webiny/frontend-settings/exports/admin.js";
 import { usePreviewDomain } from "../usePreviewDomain.js";
-import { Bind, Form } from "@webiny/form";
-import { validation } from "@webiny/validation";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { Commands } from "../../../index.js";
 const PreviewDomain = ()=>{
     const editor = useDocumentEditor();
-    const [isOpen, setIsOpen] = useState(false);
-    const { previewDomain, isOverridden, unsetPreviewDomain, setPreviewDomain } = usePreviewDomain();
-    const commitValue = useCallback((data)=>{
-        const value = data.previewDomain;
-        if (value.length > 0) setPreviewDomain(value);
-        else unsetPreviewDomain();
-        setIsOpen(false);
-    }, []);
-    const resetDomain = useCallback(()=>{
-        unsetPreviewDomain();
-        setIsOpen(false);
-    }, []);
+    const { previewDomain } = usePreviewDomain();
     useEffect(()=>{
         if (!previewDomain) return;
         editor.executeCommand(Commands.RefreshPreview);
     }, [
         previewDomain
     ]);
-    const classNames = cn("absolute left-0 top-0", isOverridden ? "fill-accent-default" : "");
-    return /*#__PURE__*/ react.createElement(DropdownMenu, {
-        open: isOpen,
-        align: "center",
-        side: "bottom",
-        className: "shadow-lg",
-        onOpenChange: setIsOpen,
-        trigger: /*#__PURE__*/ react.createElement(IconButton, {
-            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-            size: "md",
-            onClick: ()=>{},
-            variant: "ghost",
-            className: classNames
-        })
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: "p-sm text-sm",
-        style: {
-            width: 300
-        }
-    }, /*#__PURE__*/ react.createElement(Form, {
-        data: {
-            previewDomain
-        },
-        onSubmit: commitValue
-    }, (form)=>/*#__PURE__*/ react.createElement(Bind, {
-            name: "previewDomain",
-            validators: [
-                validation.create("url")
-            ]
-        }, /*#__PURE__*/ react.createElement(Input, {
-            autoFocus: true,
-            label: "Preview Domain",
-            description: /*#__PURE__*/ react.createElement(react.Fragment, null, "Set a custom preview domain for your session.", /*#__PURE__*/ react.createElement("br", null), "This doesn't affect other users."),
-            size: "md",
-            onBlur: ()=>form.submit(),
-            onEnter: ()=>form.submit(),
-            note: 'Hit "Enter" or click outside the menu to apply.'
-        }))), isOverridden ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, {
-        variant: "dimmed",
-        margin: "lg"
-    }), /*#__PURE__*/ react.createElement(Button, {
-        variant: "primary",
-        onClick: resetDomain,
-        text: "Reset Domain",
-        size: "sm"
-    }), /*#__PURE__*/ react.createElement(Separator, {
-        variant: "dimmed",
-        margin: "lg"
-    }), "Resetting will revert to using the default preview domain.") : null));
+    return /*#__PURE__*/ react.createElement(PreviewDomainMenu, {
+        className: "absolute left-0 top-0"
+    });
 };
 export { PreviewDomain };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/language.svg\";\nimport { Button, DropdownMenu, IconButton, Separator, Input, cn } from \"@webiny/admin-ui\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\nimport type { GenericFormData } from \"@webiny/form\";\nimport { Bind, Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const PreviewDomain = () => {\n    const editor = useDocumentEditor();\n    const [isOpen, setIsOpen] = useState(false);\n\n    const { previewDomain, isOverridden, unsetPreviewDomain, setPreviewDomain } =\n        usePreviewDomain();\n\n    const commitValue = useCallback((data: GenericFormData) => {\n        const value = data.previewDomain;\n        if (value.length > 0) {\n            setPreviewDomain(value);\n        } else {\n            unsetPreviewDomain();\n        }\n        setIsOpen(false);\n    }, []);\n\n    const resetDomain = useCallback(() => {\n        unsetPreviewDomain();\n        setIsOpen(false);\n    }, []);\n\n    useEffect(() => {\n        if (!previewDomain) {\n            return;\n        }\n\n        editor.executeCommand(Commands.RefreshPreview);\n    }, [previewDomain]);\n\n    const classNames = cn(\"absolute left-0 top-0\", isOverridden ? \"fill-accent-default\" : \"\");\n\n    return (\n        <DropdownMenu\n            open={isOpen}\n            align=\"center\"\n            side=\"bottom\"\n            className={\"shadow-lg\"}\n            onOpenChange={setIsOpen}\n            trigger={\n                <IconButton\n                    icon={<GlobeIcon />}\n                    size=\"md\"\n                    onClick={() => {}}\n                    variant={\"ghost\"}\n                    className={classNames}\n                />\n            }\n        >\n            <div className={\"p-sm text-sm\"} style={{ width: 300 }}>\n                <Form data={{ previewDomain }} onSubmit={commitValue}>\n                    {form => (\n                        <Bind name={\"previewDomain\"} validators={[validation.create(\"url\")]}>\n                            <Input\n                                autoFocus={true}\n                                label={\"Preview Domain\"}\n                                description={\n                                    <>\n                                        Set a custom preview domain for your session.\n                                        <br />\n                                        This doesn&apos;t affect other users.\n                                    </>\n                                }\n                                size={\"md\"}\n                                onBlur={() => form.submit()}\n                                onEnter={() => form.submit()}\n                                note={`Hit \"Enter\" or click outside the menu to apply.`}\n                            />\n                        </Bind>\n                    )}\n                </Form>\n                {isOverridden ? (\n                    <>\n                        <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                        <Button\n                            variant={\"primary\"}\n                            onClick={resetDomain}\n                            text={\"Reset Domain\"}\n                            size={\"sm\"}\n                        />\n                        <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                        Resetting will revert to using the default preview domain.\n                    </>\n                ) : null}\n            </div>\n        </DropdownMenu>\n    );\n};\n"],"names":["PreviewDomain","editor","useDocumentEditor","isOpen","setIsOpen","useState","previewDomain","isOverridden","unsetPreviewDomain","setPreviewDomain","usePreviewDomain","commitValue","useCallback","data","value","resetDomain","useEffect","Commands","classNames","cn","DropdownMenu","IconButton","GlobeIcon","Form","form","Bind","validation","Input","Separator","Button"],"mappings":";;;;;;;;AAUO,MAAMA,gBAAgB;IACzB,MAAMC,SAASC;IACf,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IAErC,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAEC,gBAAgB,EAAE,GACvEC;IAEJ,MAAMC,cAAcC,YAAY,CAACC;QAC7B,MAAMC,QAAQD,KAAK,aAAa;QAChC,IAAIC,MAAM,MAAM,GAAG,GACfL,iBAAiBK;aAEjBN;QAEJJ,UAAU;IACd,GAAG,EAAE;IAEL,MAAMW,cAAcH,YAAY;QAC5BJ;QACAJ,UAAU;IACd,GAAG,EAAE;IAELY,UAAU;QACN,IAAI,CAACV,eACD;QAGJL,OAAO,cAAc,CAACgB,SAAS,cAAc;IACjD,GAAG;QAACX;KAAc;IAElB,MAAMY,aAAaC,GAAG,yBAAyBZ,eAAe,wBAAwB;IAEtF,OAAO,WAAP,GACI,oBAACa,cAAYA;QACT,MAAMjB;QACN,OAAM;QACN,MAAK;QACL,WAAW;QACX,cAAcC;QACd,uBACI,oBAACiB,YAAUA;YACP,oBAAM,oBAACC,gBAASA;YAChB,MAAK;YACL,SAAS,KAAO;YAChB,SAAS;YACT,WAAWJ;;qBAInB,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;qBAChD,oBAACK,MAAIA;QAAC,MAAM;YAAEjB;QAAc;QAAG,UAAUK;OACpCa,CAAAA,OAAAA,WAAAA,GACG,oBAACC,MAAIA;YAAC,MAAM;YAAiB,YAAY;gBAACC,WAAW,MAAM,CAAC;aAAO;yBAC/D,oBAACC,OAAKA;YACF,WAAW;YACX,OAAO;YACP,2BACI,0CAAE,+DAEE,oBAAC,aAAK;YAId,MAAM;YACN,QAAQ,IAAMH,KAAK,MAAM;YACzB,SAAS,IAAMA,KAAK,MAAM;YAC1B,MAAM;cAKrBjB,eAAe,WAAfA,GACG,wDACI,oBAACqB,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,QAAMA;QACH,SAAS;QACT,SAASd;QACT,MAAM;QACN,MAAM;sBAEV,oBAACa,WAASA;QAAC,SAAS;QAAU,QAAQ;QAAQ,gEAGlD;AAIpB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/PreviewDomain.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { PreviewDomainMenu } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\nexport const PreviewDomain = () => {\n    const editor = useDocumentEditor();\n    const { previewDomain } = usePreviewDomain();\n\n    useEffect(() => {\n        if (!previewDomain) {\n            return;\n        }\n\n        editor.executeCommand(Commands.RefreshPreview);\n    }, [previewDomain]);\n\n    return <PreviewDomainMenu className={\"absolute left-0 top-0\"} />;\n};\n"],"names":["PreviewDomain","editor","useDocumentEditor","previewDomain","usePreviewDomain","useEffect","Commands","PreviewDomainMenu"],"mappings":";;;;;AAMO,MAAMA,gBAAgB;IACzB,MAAMC,SAASC;IACf,MAAM,EAAEC,aAAa,EAAE,GAAGC;IAE1BC,UAAU;QACN,IAAI,CAACF,eACD;QAGJF,OAAO,cAAc,CAACK,SAAS,cAAc;IACjD,GAAG;QAACH;KAAc;IAElB,OAAO,WAAP,GAAO,oBAACI,mBAAiBA;QAAC,WAAW;;AACzC"}

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/Content/Preview/PreviewContainer.js

@@ -11,7 +11,7 @@ const PreviewContainer = ({ children })=>{
         style: {
             height: `calc(100vh - ${uiHeight}px)`
         },
-        className: "bg-neutral-subtle relative flex flex-col items-center w-full overflow-auto p-[24px]"
+        className: "fill-grid bg-neutral-subtle relative flex flex-col items-center w-full overflow-auto p-[24px]"
     }, children), isDragging && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
         className: "absolute z-50 pointer-events-none animate-fade-in top-0 left-0 right-0 h-2 bg-[#f9d8ce]"
     }), /*#__PURE__*/ react.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/PreviewContainer.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/PreviewContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { useIsDragging } from \"./useIsDragging.js\";\n\ninterface PreviewContainerProps {\n    children: React.ReactNode;\n}\n\nexport const PreviewContainer = ({ children }: PreviewContainerProps) => {\n    const uiHeight = useSelectFromEditor(state => state.uiReservedSpace.height);\n    const isDragging = useIsDragging();\n\n    return (\n        <>\n            <div className={\"relative\"}>\n                <div\n                    id={\"preview-container\"}\n                    style={{ height: `calc(100vh - ${uiHeight}px)` }}\n                    className={\n                        \"bg-neutral-subtle relative flex flex-col items-center w-full overflow-auto p-[24px]\"\n                    }\n                >\n                    {children}\n                </div>\n                {isDragging && (\n                    <>\n                        <div\n                            className={\n                                \"absolute z-50 pointer-events-none animate-fade-in top-0 left-0 right-0 h-2 bg-[#f9d8ce]\"\n                            }\n                        />\n                        <div\n                            className={\n                                \"absolute z-50 pointer-events-none animate-fade-in bottom-0 left-0 right-0 h-2 bg-[#f9d8ce]\"\n                            }\n                        />\n                        <div\n                            className={\n                                \"absolute z-50 pointer-events-none animate-fade-in top-0 left-0 bottom-0 w-2 bg-[#f9d8ce]\"\n                            }\n                        />\n                        <div\n                            className={\n                                \"absolute z-50 pointer-events-none animate-fade-in top-0 right-0 bottom-0 w-2 bg-[#f9d8ce]\"\n                            }\n                        />\n                    </>\n                )}\n            </div>\n        </>\n    );\n};\n"],"names":["PreviewContainer","children","uiHeight","useSelectFromEditor","state","isDragging","useIsDragging"],"mappings":";;;AAQO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAyB;IAChE,MAAMC,WAAWC,oBAAoBC,CAAAA,QAASA,MAAM,eAAe,CAAC,MAAM;IAC1E,MAAMC,aAAaC;IAEnB,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,IAAI;QACJ,OAAO;YAAE,QAAQ,CAAC,aAAa,EAAEJ,SAAS,GAAG,CAAC;QAAC;QAC/C,WACI;OAGHD,WAEJI,cAAc,WAAdA,GACG,wDACI,oBAAC;QACG,WACI;sBAGR,oBAAC;QACG,WACI;sBAGR,oBAAC;QACG,WACI;sBAGR,oBAAC;QACG,WACI;;AAQhC"}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/Preview/PreviewContainer.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/Preview/PreviewContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { useIsDragging } from \"./useIsDragging.js\";\n\ninterface PreviewContainerProps {\n    children: React.ReactNode;\n}\n\nexport const PreviewContainer = ({ children }: PreviewContainerProps) => {\n    const uiHeight = useSelectFromEditor(state => state.uiReservedSpace.height);\n    const isDragging = useIsDragging();\n\n    return (\n        <>\n            <div className={\"relative\"}>\n                <div\n                    id={\"preview-container\"}\n                    style={{ height: `calc(100vh - ${uiHeight}px)` }}\n                    className={\n                        \"fill-grid bg-neutral-subtle relative flex flex-col items-center w-full overflow-auto p-[24px]\"\n                    }\n                >\n                    {children}\n                </div>\n                {isDragging && (\n                    <>\n                        <div\n                            className={\n                                \"absolute z-50 pointer-events-none animate-fade-in top-0 left-0 right-0 h-2 bg-[#f9d8ce]\"\n                            }\n                        />\n                        <div\n                            className={\n                                \"absolute z-50 pointer-events-none animate-fade-in bottom-0 left-0 right-0 h-2 bg-[#f9d8ce]\"\n                            }\n                        />\n                        <div\n                            className={\n                                \"absolute z-50 pointer-events-none animate-fade-in top-0 left-0 bottom-0 w-2 bg-[#f9d8ce]\"\n                            }\n                        />\n                        <div\n                            className={\n                                \"absolute z-50 pointer-events-none animate-fade-in top-0 right-0 bottom-0 w-2 bg-[#f9d8ce]\"\n                            }\n                        />\n                    </>\n                )}\n            </div>\n        </>\n    );\n};\n"],"names":["PreviewContainer","children","uiHeight","useSelectFromEditor","state","isDragging","useIsDragging"],"mappings":";;;AAQO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAyB;IAChE,MAAMC,WAAWC,oBAAoBC,CAAAA,QAASA,MAAM,eAAe,CAAC,MAAM;IAC1E,MAAMC,aAAaC;IAEnB,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,IAAI;QACJ,OAAO;YAAE,QAAQ,CAAC,aAAa,EAAEJ,SAAS,GAAG,CAAC;QAAC;QAC/C,WACI;OAGHD,WAEJI,cAAc,WAAdA,GACG,wDACI,oBAAC;QACG,WACI;sBAGR,oBAAC;QACG,WACI;sBAGR,oBAAC;QACG,WACI;sBAGR,oBAAC;QACG,WACI;;AAQhC"}

package/BaseEditor/defaultConfig/Content/usePreviewDomain.d.ts

@@ -1,6 +1 @@
-export declare const usePreviewDomain: () => {
-    previewDomain: string;
-    setPreviewDomain: (domain: string) => void;
-    unsetPreviewDomain: () => void;
-    isOverridden: boolean;
-};
+export { usePreviewDomain } from "@webiny/frontend-settings/exports/admin.js";

package/BaseEditor/defaultConfig/Content/usePreviewDomain.js

@@ -1,26 +1 @@
-import { useCallback } from "react";
-import { useLocalStorage } from "@webiny/app";
-import { usePreviewDomain } from "@webiny/frontend-settings/exports/admin.js";
-const CUSTOM_PREVIEW_DOMAIN = "custom_preview_domain";
-const usePreviewDomain_usePreviewDomain = ()=>{
-    const { previewDomain, isOverridden } = usePreviewDomain();
-    const localStorage = useLocalStorage();
-    const setPreviewDomain = useCallback((domain)=>{
-        if (domain === previewDomain) localStorage.remove(CUSTOM_PREVIEW_DOMAIN);
-        else localStorage.set(CUSTOM_PREVIEW_DOMAIN, domain);
-    }, [
-        previewDomain
-    ]);
-    const unsetPreviewDomain = useCallback(()=>{
-        localStorage.remove(CUSTOM_PREVIEW_DOMAIN);
-    }, []);
-    return {
-        previewDomain,
-        setPreviewDomain,
-        unsetPreviewDomain,
-        isOverridden
-    };
-};
-export { usePreviewDomain_usePreviewDomain as usePreviewDomain };
-
-//# sourceMappingURL=usePreviewDomain.js.map
+export { usePreviewDomain } from "@webiny/frontend-settings/exports/admin.js";

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

@@ -4,6 +4,9 @@ import { TextInputRenderer } from "../../inputRenderers/TextInput.js";
 import { NumberInputRenderer } from "../../inputRenderers/NumberInput.js";
 import { BooleanInputRenderer } from "../../inputRenderers/BooleanInput.js";
 import { TextareaInputRenderer } from "../../inputRenderers/TextareaInput.js";
+import { TagsInputRenderer } from "../../inputRenderers/TagsInput.js";
+import { DateTimeInputRenderer } from "../../inputRenderers/DateTimeInput.js";
+import { RadioInputRenderer } from "../../inputRenderers/RadioInput.js";
 import { LexicalInputRenderer } from "../../inputRenderers/LexicalInput/LexicalInput.js";
 import { DefaultLexicalConfig } from "../../inputRenderers/LexicalInput/DefaultLexicalConfig.js";
 import { SlotInputRenderer } from "../../inputRenderers/SlotInput.js";
@@ -22,9 +25,18 @@ const ElementInputRenderers = ()=>/*#__PURE__*/ react.createElement(react.Fragme
     }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Select",
         component: SelectInputRenderer
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
+        name: "Webiny/RadioGroup",
+        component: RadioInputRenderer
     }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Textarea",
         component: TextareaInputRenderer
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
+        name: "Webiny/Tags",
+        component: TagsInputRenderer
+    }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
+        name: "Webiny/DateTime",
+        component: DateTimeInputRenderer
     }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Number",
         component: NumberInputRenderer

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\";\nimport { ContentEntryInputRenderer } from \"~/inputRenderers/ContentEntryInput.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/ContentEntry\"}\n                component={ContentEntryInputRenderer}\n            />\n        </>\n    );\n};\n"],"names":["ElementInputRenderers","EditorConfig","SlotInputRenderer","TextInputRenderer","SelectInputRenderer","TextareaInputRenderer","NumberInputRenderer","DefaultLexicalConfig","LexicalInputRenderer","BooleanInputRenderer","GridLayoutInputRenderer","FileInputRenderer","FragmentSelectorInputRenderer","ObjectInputRenderer","ContentEntryInputRenderer"],"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"}
+{"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 { TagsInputRenderer } from \"~/inputRenderers/TagsInput.js\";\nimport { DateTimeInputRenderer } from \"~/inputRenderers/DateTimeInput.js\";\nimport { RadioInputRenderer } from \"~/inputRenderers/RadioInput.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 { ContentEntryInputRenderer } from \"~/inputRenderers/ContentEntryInput.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/RadioGroup\"}\n                component={RadioInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Textarea\"}\n                component={TextareaInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Tags\"}\n                component={TagsInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/DateTime\"}\n                component={DateTimeInputRenderer}\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/ContentEntry\"}\n                component={ContentEntryInputRenderer}\n            />\n        </>\n    );\n};\n"],"names":["ElementInputRenderers","EditorConfig","SlotInputRenderer","TextInputRenderer","SelectInputRenderer","RadioInputRenderer","TextareaInputRenderer","TagsInputRenderer","DateTimeInputRenderer","NumberInputRenderer","DefaultLexicalConfig","LexicalInputRenderer","BooleanInputRenderer","GridLayoutInputRenderer","FileInputRenderer","FragmentSelectorInputRenderer","ObjectInputRenderer","ContentEntryInputRenderer"],"mappings":";;;;;;;;;;;;;;;;;;AAmBO,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;sBAEf,oBAACL,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWM;sBAEf,oBAACN,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWO;sBAEf,oBAACP,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWQ;sBAGf,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,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;sBAEf,oBAACb,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,WAAWgB"}

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

@@ -2,10 +2,7 @@ import react from "react";
 import { Icon } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/notes.svg";
 import { Sidebar } from "../../../config/Sidebar/Sidebar.js";
-import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
-const ElementSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableContainer, {
-        tabIndex: -1
-    }, /*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
+const ElementSettingsGroup = ()=>/*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
         name: "element",
         label: "Element",
         icon: /*#__PURE__*/ react.createElement(Icon, {
@@ -15,7 +12,7 @@ const ElementSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableCon
         element: /*#__PURE__*/ react.createElement(Sidebar.Elements, {
             group: "element"
         })
-    }));
+    });
 export { ElementSettingsGroup };
 
 //# sourceMappingURL=ElementSettingsGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as NotesIcon } from \"@webiny/icons/notes.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\n\nexport const ElementSettingsGroup = () => (\n    <ScrollableContainer tabIndex={-1}>\n        <Sidebar.Group.Tab\n            name={\"element\"}\n            label={\"Element\"}\n            icon={<Icon icon={<NotesIcon />} label={\"Element\"} />}\n            element={<Sidebar.Elements group={\"element\"} />}\n        />\n    </ScrollableContainer>\n);\n"],"names":["ElementSettingsGroup","ScrollableContainer","Sidebar","Icon","NotesIcon"],"mappings":";;;;;AAMO,MAAMA,uBAAuB,kBAChC,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAASA;YAAK,OAAO;;QACxC,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as NotesIcon } from \"@webiny/icons/notes.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\n\nexport const ElementSettingsGroup = () => (\n    <Sidebar.Group.Tab\n        name={\"element\"}\n        label={\"Element\"}\n        icon={<Icon icon={<NotesIcon />} label={\"Element\"} />}\n        element={<Sidebar.Elements group={\"element\"} />}\n    />\n);\n"],"names":["ElementSettingsGroup","Sidebar","Icon","NotesIcon"],"mappings":";;;;AAKO,MAAMA,uBAAuB,kBAChC,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAASA;YAAK,OAAO;;QACxC,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.d.ts

@@ -0,0 +1,22 @@
+import type { DocumentElementBindings, JsonPatchOperation } from "@webiny/website-builder-sdk";
+interface IBindingsUpdate {
+    createJsonPatch(bindings: DocumentElementBindings): JsonPatchOperation[];
+}
+/**
+ * Tracks what the preview currently shows for one element, so preview patches can be computed
+ * against it.
+ *
+ * The preview applies each patch on top of its own copy of the element's bindings. Computing a patch
+ * against the committed bindings instead goes wrong as soon as one preview patch has been applied:
+ * going back to the committed value (OS undo, or deleting what was just typed) diffs to an empty
+ * patch, and the preview keeps showing the last previewed value.
+ *
+ * The tracked copy is tied to the committed bindings it started from. Once those change, the editor
+ * has sent the preview the committed state, so tracking starts over from it.
+ */
+export declare class PreviewedBindings {
+    private source;
+    private bindings;
+    createPatch(update: IBindingsUpdate, committed: DocumentElementBindings): JsonPatchOperation[];
+}
+export {};

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

@@ -0,0 +1,17 @@
+import { jsonPatch } from "@webiny/website-builder-sdk";
+class PreviewedBindings {
+    createPatch(update, committed) {
+        const base = this.source === committed && this.bindings ? this.bindings : committed;
+        const patch = update.createJsonPatch(base);
+        this.source = committed;
+        this.bindings = jsonPatch.applyPatch(structuredClone(base), patch, false, true).newDocument;
+        return patch;
+    }
+    constructor(){
+        this.source = null;
+        this.bindings = null;
+    }
+}
+export { PreviewedBindings };
+
+//# sourceMappingURL=PreviewedBindings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.ts"],"sourcesContent":["import { jsonPatch } from \"@webiny/website-builder-sdk\";\nimport type { DocumentElementBindings, JsonPatchOperation } from \"@webiny/website-builder-sdk\";\n\ninterface IBindingsUpdate {\n    createJsonPatch(bindings: DocumentElementBindings): JsonPatchOperation[];\n}\n\n/**\n * Tracks what the preview currently shows for one element, so preview patches can be computed\n * against it.\n *\n * The preview applies each patch on top of its own copy of the element's bindings. Computing a patch\n * against the committed bindings instead goes wrong as soon as one preview patch has been applied:\n * going back to the committed value (OS undo, or deleting what was just typed) diffs to an empty\n * patch, and the preview keeps showing the last previewed value.\n *\n * The tracked copy is tied to the committed bindings it started from. Once those change, the editor\n * has sent the preview the committed state, so tracking starts over from it.\n */\nexport class PreviewedBindings {\n    private source: DocumentElementBindings | null = null;\n    private bindings: DocumentElementBindings | null = null;\n\n    createPatch(update: IBindingsUpdate, committed: DocumentElementBindings): JsonPatchOperation[] {\n        const base = this.source === committed && this.bindings ? this.bindings : committed;\n        const patch = update.createJsonPatch(base);\n\n        this.source = committed;\n        this.bindings = jsonPatch.applyPatch(structuredClone(base), patch, false, true).newDocument;\n\n        return patch;\n    }\n}\n"],"names":["PreviewedBindings","update","committed","base","patch","jsonPatch","structuredClone"],"mappings":";AAmBO,MAAMA;IAIT,YAAYC,MAAuB,EAAEC,SAAkC,EAAwB;QAC3F,MAAMC,OAAO,IAAI,CAAC,MAAM,KAAKD,aAAa,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAGA;QAC1E,MAAME,QAAQH,OAAO,eAAe,CAACE;QAErC,IAAI,CAAC,MAAM,GAAGD;QACd,IAAI,CAAC,QAAQ,GAAGG,UAAU,UAAU,CAACC,gBAAgBH,OAAOC,OAAO,OAAO,MAAM,WAAW;QAE3F,OAAOA;IACX;;aAXQ,MAAM,GAAmC;aACzC,QAAQ,GAAmC;;AAWvD"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import { jsonPatch } from "@webiny/website-builder-sdk";
+import { PreviewedBindings } from "./PreviewedBindings.js";
+const bindingsWithTitle = (title)=>({
+        inputs: {
+            title: {
+                id: "title",
+                type: "text",
+                static: title
+            }
+        }
+    });
+const updateTo = (target)=>({
+        createJsonPatch: (bindings)=>jsonPatch.compare(bindings, target)
+    });
+class FakePreview {
+    constructor(committed){
+        this.bindings = structuredClone(committed);
+    }
+    apply(patch) {
+        jsonPatch.applyPatch(this.bindings, patch, false, true);
+    }
+}
+describe("PreviewedBindings", ()=>{
+    it("brings the preview back when the value returns to the committed one (undo)", ()=>{
+        const committed = bindingsWithTitle("abc");
+        const preview = new FakePreview(committed);
+        const previewed = new PreviewedBindings();
+        preview.apply(previewed.createPatch(updateTo(bindingsWithTitle("abcd")), committed));
+        expect(preview.bindings).toEqual(bindingsWithTitle("abcd"));
+        const patch = previewed.createPatch(updateTo(bindingsWithTitle("abc")), committed);
+        expect(patch).not.toEqual([]);
+        preview.apply(patch);
+        expect(preview.bindings).toEqual(bindingsWithTitle("abc"));
+    });
+    it("follows a run of edits", ()=>{
+        const committed = bindingsWithTitle("");
+        const preview = new FakePreview(committed);
+        const previewed = new PreviewedBindings();
+        for (const value of [
+            "a",
+            "ab",
+            "abc",
+            "ab",
+            "a",
+            ""
+        ]){
+            preview.apply(previewed.createPatch(updateTo(bindingsWithTitle(value)), committed));
+            expect(preview.bindings).toEqual(bindingsWithTitle(value));
+        }
+    });
+    it("starts over from the committed bindings once they change", ()=>{
+        const previewed = new PreviewedBindings();
+        const first = bindingsWithTitle("abc");
+        previewed.createPatch(updateTo(bindingsWithTitle("abcd")), first);
+        const second = bindingsWithTitle("xyz");
+        const preview = new FakePreview(second);
+        const patch = previewed.createPatch(updateTo(bindingsWithTitle("xyz!")), second);
+        preview.apply(patch);
+        expect(preview.bindings).toEqual(bindingsWithTitle("xyz!"));
+    });
+});
+
+//# sourceMappingURL=PreviewedBindings.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.test.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/PreviewedBindings.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport { jsonPatch } from \"@webiny/website-builder-sdk\";\nimport type { DocumentElementBindings } from \"@webiny/website-builder-sdk\";\nimport { PreviewedBindings } from \"./PreviewedBindings.js\";\n\nconst bindingsWithTitle = (title: string): DocumentElementBindings => ({\n    inputs: { title: { id: \"title\", type: \"text\", static: title } }\n});\n\n// Stands in for InputsUpdater: the patch that turns `bindings` into the updated bindings.\nconst updateTo = (target: DocumentElementBindings) => ({\n    createJsonPatch: (bindings: DocumentElementBindings) => jsonPatch.compare(bindings, target)\n});\n\n/**\n * The preview side: like EditingElementRenderer, it applies every patch on top of its own copy.\n */\nclass FakePreview {\n    public bindings: DocumentElementBindings;\n\n    constructor(committed: DocumentElementBindings) {\n        this.bindings = structuredClone(committed);\n    }\n\n    apply(patch: any[]) {\n        jsonPatch.applyPatch(this.bindings, patch, false, true);\n    }\n}\n\ndescribe(\"PreviewedBindings\", () => {\n    it(\"brings the preview back when the value returns to the committed one (undo)\", () => {\n        const committed = bindingsWithTitle(\"abc\");\n        const preview = new FakePreview(committed);\n        const previewed = new PreviewedBindings();\n\n        // Type \"d\".\n        preview.apply(previewed.createPatch(updateTo(bindingsWithTitle(\"abcd\")), committed));\n        expect(preview.bindings).toEqual(bindingsWithTitle(\"abcd\"));\n\n        // Undo back to the committed \"abc\". Diffed against the committed bindings this patch was\n        // empty, and the preview stayed on \"abcd\".\n        const patch = previewed.createPatch(updateTo(bindingsWithTitle(\"abc\")), committed);\n        expect(patch).not.toEqual([]);\n        preview.apply(patch);\n        expect(preview.bindings).toEqual(bindingsWithTitle(\"abc\"));\n    });\n\n    it(\"follows a run of edits\", () => {\n        const committed = bindingsWithTitle(\"\");\n        const preview = new FakePreview(committed);\n        const previewed = new PreviewedBindings();\n\n        for (const value of [\"a\", \"ab\", \"abc\", \"ab\", \"a\", \"\"]) {\n            preview.apply(previewed.createPatch(updateTo(bindingsWithTitle(value)), committed));\n            expect(preview.bindings).toEqual(bindingsWithTitle(value));\n        }\n    });\n\n    it(\"starts over from the committed bindings once they change\", () => {\n        const previewed = new PreviewedBindings();\n\n        const first = bindingsWithTitle(\"abc\");\n        previewed.createPatch(updateTo(bindingsWithTitle(\"abcd\")), first);\n\n        // A commit (here of \"xyz\") reaches the preview as a document update, not through us.\n        const second = bindingsWithTitle(\"xyz\");\n        const preview = new FakePreview(second);\n\n        const patch = previewed.createPatch(updateTo(bindingsWithTitle(\"xyz!\")), second);\n        preview.apply(patch);\n        expect(preview.bindings).toEqual(bindingsWithTitle(\"xyz!\"));\n    });\n});\n"],"names":["bindingsWithTitle","title","updateTo","target","bindings","jsonPatch","FakePreview","committed","structuredClone","patch","describe","it","preview","previewed","PreviewedBindings","expect","value","first","second"],"mappings":";;;AAKA,MAAMA,oBAAoB,CAACC,QAA4C;QACnE,QAAQ;YAAE,OAAO;gBAAE,IAAI;gBAAS,MAAM;gBAAQ,QAAQA;YAAM;QAAE;IAClE;AAGA,MAAMC,WAAW,CAACC,SAAqC;QACnD,iBAAiB,CAACC,WAAsCC,UAAU,OAAO,CAACD,UAAUD;IACxF;AAKA,MAAMG;IAGF,YAAYC,SAAkC,CAAE;QAC5C,IAAI,CAAC,QAAQ,GAAGC,gBAAgBD;IACpC;IAEA,MAAME,KAAY,EAAE;QAChBJ,UAAU,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAEI,OAAO,OAAO;IACtD;AACJ;AAEAC,SAAS,qBAAqB;IAC1BC,GAAG,8EAA8E;QAC7E,MAAMJ,YAAYP,kBAAkB;QACpC,MAAMY,UAAU,IAAIN,YAAYC;QAChC,MAAMM,YAAY,IAAIC;QAGtBF,QAAQ,KAAK,CAACC,UAAU,WAAW,CAACX,SAASF,kBAAkB,UAAUO;QACzEQ,OAAOH,QAAQ,QAAQ,EAAE,OAAO,CAACZ,kBAAkB;QAInD,MAAMS,QAAQI,UAAU,WAAW,CAACX,SAASF,kBAAkB,SAASO;QACxEQ,OAAON,OAAO,GAAG,CAAC,OAAO,CAAC,EAAE;QAC5BG,QAAQ,KAAK,CAACH;QACdM,OAAOH,QAAQ,QAAQ,EAAE,OAAO,CAACZ,kBAAkB;IACvD;IAEAW,GAAG,0BAA0B;QACzB,MAAMJ,YAAYP,kBAAkB;QACpC,MAAMY,UAAU,IAAIN,YAAYC;QAChC,MAAMM,YAAY,IAAIC;QAEtB,KAAK,MAAME,SAAS;YAAC;YAAK;YAAM;YAAO;YAAM;YAAK;SAAG,CAAE;YACnDJ,QAAQ,KAAK,CAACC,UAAU,WAAW,CAACX,SAASF,kBAAkBgB,SAAST;YACxEQ,OAAOH,QAAQ,QAAQ,EAAE,OAAO,CAACZ,kBAAkBgB;QACvD;IACJ;IAEAL,GAAG,4DAA4D;QAC3D,MAAME,YAAY,IAAIC;QAEtB,MAAMG,QAAQjB,kBAAkB;QAChCa,UAAU,WAAW,CAACX,SAASF,kBAAkB,UAAUiB;QAG3D,MAAMC,SAASlB,kBAAkB;QACjC,MAAMY,UAAU,IAAIN,YAAYY;QAEhC,MAAMT,QAAQI,UAAU,WAAW,CAACX,SAASF,kBAAkB,UAAUkB;QACzEN,QAAQ,KAAK,CAACH;QACdM,OAAOH,QAAQ,QAAQ,EAAE,OAAO,CAACZ,kBAAkB;IACvD;AACJ"}

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

@@ -10,6 +10,7 @@ import { useBindingsForElement } from "./useBindingsForElement.js";
 import { useElementInputsAst } from "../../../hooks/useElementInputsAst.js";
 import { BreakpointElementMetadata, ElementMetadata, InputMetadata } from "../../../metadata/index.js";
 import { useElementFactory } from "./useElementFactory.js";
+import { PreviewedBindings } from "./PreviewedBindings.js";
 class InputValueObject {
     constructor(value){
         this.value = value;
@@ -74,6 +75,9 @@ const useInputValue = (elementId, node)=>{
         rawBindings
     ]);
     const [localState, setLocalValue] = useState();
+    const previewedBindings = useMemo(()=>new PreviewedBindings(), [
+        elementId
+    ]);
     const onChange = useCallback(withTimeout((cb)=>{
         const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
         const valueObject = new InputValueObject(value);
@@ -134,7 +138,7 @@ const useInputValue = (elementId, node)=>{
             static: valueObject.get()
         });
         const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);
-        const patch = updatedInputs.createJsonPatch(rawBindings);
+        const patch = previewedBindings.createPatch(updatedInputs, rawBindings);
         editor.executeCommand(Commands.PreviewPatchElement, {
             elementId,
             patch
@@ -142,7 +146,8 @@ const useInputValue = (elementId, node)=>{
     }, [
         elementId,
         rawBindings,
-        localState
+        localState,
+        previewedBindings
     ]);
     const setBindingType = useCallback((type)=>{
         editor.updateDocument((state)=>{