npm - @webiny/app-website-builder - Versions diffs - 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2 - Mend

@webiny/app-website-builder 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (364) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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'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"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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":"AAiBO,MAAMA;IAQT,YAAoBC,KAA+B,CAAE;aAAjCA,KAAK,GAALA;aAPZ,KAAK,GAAG,IAAIC;aACZ,eAAe,GAAkB;aACjC,eAAe,GAAiB;aAChC,cAAc,GAAkB;aAChC,UAAU,GAAe;aACzB,cAAc,GAAG,IAAIC;IAEyB;IAEtD,SAASC,KAAoB,EAAE;QAC3B,IAAIA,AAAa,WAAbA,MAAM,EAAE,EACR;QAGJ,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA,MAAM,EAAE,EAAEA;IAC7B;IAEA,WAAWC,EAAU,EAAE;QACnB,IAAI,CAAC,KAAK,CAAC,MAAM,CAACA;IACtB;IAEA,uBAAuBC,EAAuB,EAAc;QACxD,IAAI,CAAC,cAAc,CAAC,GAAG,CAACA;QACxB,OAAO,IAAM,IAAI,CAAC,cAAc,CAAC,MAAM,CAACA;IAC5C;IAEA,QAAQ;QACJ,MAAMC,kBAAkB;YACpB,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,cAAc,GAAGC,sBAAsBD;QAChD;QACA,IAAI,CAAC,cAAc,GAAGC,sBAAsBD;IAChD;IAEA,OAAO;QACH,IAAI,IAAI,CAAC,cAAc,EACnBE,qBAAqB,IAAI,CAAC,cAAc;IAEhD;IAEA,yBAAyB;QACrB,IAAI,CAAC,IAAI,CAAC,UAAU,EAChB,OAAO;QAGX,OAAO;YACH,UAAU,IAAI,CAAC,UAAU,CAAC,QAAQ;YAClC,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU;YAChC,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,GAAI,KAAI,CAAC,eAAe,IAAI;QAClE;IACJ;IAEA,OAAO;QACH,MAAMC,gBAAgB,IAAI,CAAC,eAAe;QAC1C,MAAMC,YAAY;QAClB,MAAMC,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,MAAMC,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,GAAGH;QAE9B,IAAII,YAA2B;QAC/B,IAAIC,kBAAgC;QACpC,IAAIC,aAAyB;QAG7B,MAAMC,aACF,EAAE;QAEN,KAAK,MAAM,CAACZ,IAAI,EAAEa,GAAG,EAAEC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAE;YAC/C,MAAMC,YAAYR,UAAUM,IAAI,IAAI,IAAIN,UAAUM,IAAI,KAAK;YAE3D,IAAKE;gBAIL,IAAIC,KAAK,GAAG,CAACR,SAASK,IAAI,GAAG,KAAKP,WAC9BM,WAAW,IAAI,CAAC;oBAAEZ;oBAAIa;oBAAK,UAAU;oBAAGC;gBAAU;gBAGtD,IAAIE,KAAK,GAAG,CAACR,SAASK,IAAI,MAAM,KAAKP,WACjCM,WAAW,IAAI,CAAC;oBAAEZ;oBAAIa;oBAAK,UAAU;oBAAGC;gBAAU;;QAE1D;QAEA,IAAIF,WAAW,MAAM,GAAG,GAAG;YAEvB,MAAMK,WAAWL,WAAW,MAAM,CAACM,CAAAA,IAAK,CAACA,EAAE,SAAS,IAAIA,EAAE,SAAS;YAEnE,IAAID,SAAS,MAAM,GAAG,GAAG;gBACrB,MAAME,eAAe;uBAAI,IAAIrB,IAAImB,SAAS,GAAG,CAACC,CAAAA,IAAKA,EAAE,GAAG,CAAC,KAAK;iBAAG,CAAC,IAAI,CAClE,CAACE,GAAGC,IAAMA,IAAID;gBAGlB,IAAID,AAAwB,MAAxBA,aAAa,MAAM,EAAQ;oBAC3B,MAAMG,SAASL,QAAQ,CAAC,EAAE;oBAC1BR,YAAYa,OAAO,EAAE;oBACrBZ,kBAAkBY,OAAO,QAAQ;oBACjCX,aAAaW,OAAO,GAAG;gBAC3B,OAAO;oBAEH,IAAIC,YAAYC;~~oBAChB~~,IAAIC,aAAa,~~CAACD~~;~~oBAClB~~,KAAK,~~MAAMN~~,KAAKD,SAAU;wBACtBM,YAAYP,KAAK,GAAG,CAACO,WAAWL,EAAE,GAAG,CAAC,IAAI;wBAC1CO,aAAaT,KAAK,GAAG,CAACS,YAAYP,EAAE,GAAG,CAAC,KAAK;oBACjD;oBAEA,MAAMQ,UAAWH,AAAAA,CAAAA,YAAYE,UAAS,IAAK;oBAC3C,MAAME,YAAaF,AAAAA,CAAAA,aAAaF,SAAQ,IAAK;oBAG7C,MAAMK,iBACFD,YAAY,IAAIX,KAAK,GAAG,CAACT,SAASmB,WAAWC,YAAY;oBAG7D,MAAME,aAAab,KAAK,GAAG,CACvBA,KAAK,KAAK,CAACY,iBAAiBT,aAAa,MAAM,GAC/CA,aAAa,MAAM,GAAG;oBAG1B,MAAMG,SAASL,SAAS,IAAI,CAACC,CAAAA,IAAKA,EAAE,GAAG,CAAC,KAAK,KAAKC,YAAY,CAACU,WAAW;oBAC1E,IAAIP,QAAQ;wBACRb,YAAYa,OAAO,EAAE;wBACrBZ,kBAAkBY,OAAO,QAAQ;wBACjCX,aAAaW,OAAO,GAAG;oBAC3B;gBACJ;YACJ;QACJ;QAEA,IAAIb,cAAc,IAAI,CAAC,eAAe,IAAIC,oBAAoB,IAAI,CAAC,eAAe,EAAE;YAChF,IAAI,CAAC,eAAe,GAAGD;YACvB,IAAI,CAAC,eAAe,GAAGC;YACvB,IAAI,CAAC,UAAU,GAAGC;YAElB,IAAI,CAAC,cAAc,CAAC,OAAO,CAACV,CAAAA,KAAMA,GAAGQ,AAAc,SAAdA;YAErC,KAAK,MAAM,CAACT,IAAID,MAAM,IAAI,IAAI,CAAC,KAAK,CAAE;gBAClC,MAAM+B,WAAW9B,OAAOS;gBACxBV,MAAM,iBAAiB,CACnB+B,WAAW;oBAAE,KAAKnB;oBAAa,UAAUD;gBAAgB,IAAI;YAErE;QACJ;IACJ;IAEQ,kBAAkB;QACtB,MAAMqB,YAAYC,SAAS,cAAc,CAAC;QAC1C,IAAI,CAACD,WACD,OAAO;QAGX,OAAOA,UAAU,SAAS;IAC9B;AACJ"}
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":"AAiBO,MAAMA;IAQT,YAAoBC,KAA+B,CAAE;aAAjCA,KAAK,GAALA;aAPZ,KAAK,GAAG,IAAIC;aACZ,eAAe,GAAkB;aACjC,eAAe,GAAiB;aAChC,cAAc,GAAkB;aAChC,UAAU,GAAe;aACzB,cAAc,GAAG,IAAIC;IAEyB;IAEtD,SAASC,KAAoB,EAAE;QAC3B,IAAIA,AAAa,WAAbA,MAAM,EAAE,EACR;QAGJ,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA,MAAM,EAAE,EAAEA;IAC7B;IAEA,WAAWC,EAAU,EAAE;QACnB,IAAI,CAAC,KAAK,CAAC,MAAM,CAACA;IACtB;IAEA,uBAAuBC,EAAuB,EAAc;QACxD,IAAI,CAAC,cAAc,CAAC,GAAG,CAACA;QACxB,OAAO,IAAM,IAAI,CAAC,cAAc,CAAC,MAAM,CAACA;IAC5C;IAEA,QAAQ;QACJ,MAAMC,kBAAkB;YACpB,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,cAAc,GAAGC,sBAAsBD;QAChD;QACA,IAAI,CAAC,cAAc,GAAGC,sBAAsBD;IAChD;IAEA,OAAO;QACH,IAAI,IAAI,CAAC,cAAc,EACnBE,qBAAqB,IAAI,CAAC,cAAc;IAEhD;IAEA,yBAAyB;QACrB,IAAI,CAAC,IAAI,CAAC,UAAU,EAChB,OAAO;QAGX,OAAO;YACH,UAAU,IAAI,CAAC,UAAU,CAAC,QAAQ;YAClC,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU;YAChC,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,GAAI,KAAI,CAAC,eAAe,IAAI;QAClE;IACJ;IAEA,OAAO;QACH,MAAMC,gBAAgB,IAAI,CAAC,eAAe;QAC1C,MAAMC,YAAY;QAClB,MAAMC,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,MAAMC,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,GAAGH;QAE9B,IAAII,YAA2B;QAC/B,IAAIC,kBAAgC;QACpC,IAAIC,aAAyB;QAG7B,MAAMC,aACF,EAAE;QAEN,KAAK,MAAM,CAACZ,IAAI,EAAEa,GAAG,EAAEC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAE;YAC/C,MAAMC,YAAYR,UAAUM,IAAI,IAAI,IAAIN,UAAUM,IAAI,KAAK;YAE3D,IAAKE;gBAIL,IAAIC,KAAK,GAAG,CAACR,SAASK,IAAI,GAAG,KAAKP,WAC9BM,WAAW,IAAI,CAAC;oBAAEZ;oBAAIa;oBAAK,UAAU;oBAAGC;gBAAU;gBAGtD,IAAIE,KAAK,GAAG,CAACR,SAASK,IAAI,MAAM,KAAKP,WACjCM,WAAW,IAAI,CAAC;oBAAEZ;oBAAIa;oBAAK,UAAU;oBAAGC;gBAAU;;QAE1D;QAEA,IAAIF,WAAW,MAAM,GAAG,GAAG;YAEvB,MAAMK,WAAWL,WAAW,MAAM,CAACM,CAAAA,IAAK,CAACA,EAAE,SAAS,IAAIA,EAAE,SAAS;YAEnE,IAAID,SAAS,MAAM,GAAG,GAAG;gBACrB,MAAME,eAAe;uBAAI,IAAIrB,IAAImB,SAAS,GAAG,CAACC,CAAAA,IAAKA,EAAE,GAAG,CAAC,KAAK;iBAAG,CAAC,IAAI,CAClE,CAACE,GAAGC,IAAMA,IAAID;gBAGlB,IAAID,AAAwB,MAAxBA,aAAa,MAAM,EAAQ;oBAC3B,MAAMG,SAASL,QAAQ,CAAC,EAAE;oBAC1BR,YAAYa,OAAO,EAAE;oBACrBZ,kBAAkBY,OAAO,QAAQ;oBACjCX,aAAaW,OAAO,GAAG;gBAC3B,OAAO;oBAEH,IAAIC,YAAYC,KAAQ;oBACxB,IAAIC,aAAa,MAAS;oBAC1B,KAAK,MAAMP,KAAKD,SAAU;wBACtBM,YAAYP,KAAK,GAAG,CAACO,WAAWL,EAAE,GAAG,CAAC,IAAI;wBAC1CO,aAAaT,KAAK,GAAG,CAACS,YAAYP,EAAE,GAAG,CAAC,KAAK;oBACjD;oBAEA,MAAMQ,UAAWH,AAAAA,CAAAA,YAAYE,UAAS,IAAK;oBAC3C,MAAME,YAAaF,AAAAA,CAAAA,aAAaF,SAAQ,IAAK;oBAG7C,MAAMK,iBACFD,YAAY,IAAIX,KAAK,GAAG,CAACT,SAASmB,WAAWC,YAAY;oBAG7D,MAAME,aAAab,KAAK,GAAG,CACvBA,KAAK,KAAK,CAACY,iBAAiBT,aAAa,MAAM,GAC/CA,aAAa,MAAM,GAAG;oBAG1B,MAAMG,SAASL,SAAS,IAAI,CAACC,CAAAA,IAAKA,EAAE,GAAG,CAAC,KAAK,KAAKC,YAAY,CAACU,WAAW;oBAC1E,IAAIP,QAAQ;wBACRb,YAAYa,OAAO,EAAE;wBACrBZ,kBAAkBY,OAAO,QAAQ;wBACjCX,aAAaW,OAAO,GAAG;oBAC3B;gBACJ;YACJ;QACJ;QAEA,IAAIb,cAAc,IAAI,CAAC,eAAe,IAAIC,oBAAoB,IAAI,CAAC,eAAe,EAAE;YAChF,IAAI,CAAC,eAAe,GAAGD;YACvB,IAAI,CAAC,eAAe,GAAGC;YACvB,IAAI,CAAC,UAAU,GAAGC;YAElB,IAAI,CAAC,cAAc,CAAC,OAAO,CAACV,CAAAA,KAAMA,GAAGQ,AAAc,SAAdA;YAErC,KAAK,MAAM,CAACT,IAAID,MAAM,IAAI,IAAI,CAAC,KAAK,CAAE;gBAClC,MAAM+B,WAAW9B,OAAOS;gBACxBV,MAAM,iBAAiB,CACnB+B,WAAW;oBAAE,KAAKnB;oBAAa,UAAUD;gBAAgB,IAAI;YAErE;QACJ;IACJ;IAEQ,kBAAkB;QACtB,MAAMqB,YAAYC,SAAS,cAAc,CAAC;QAC1C,IAAI,CAACD,WACD,OAAO;QAGX,OAAOA,UAAU,SAAS;IAC9B;AACJ"}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 \"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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";
@@ -12,6 +15,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";
 import { ContentEntryInputRenderer } from "../../inputRenderers/ContentEntryInput.js";
 const ElementInputRenderers = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/Slot",
@@ -22,9 +26,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
@@ -46,6 +59,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
     }), /*#__PURE__*/ react.createElement(EditorConfig.ElementInput.Renderer, {
         name: "Webiny/ContentEntry",
         component: ContentEntryInputRenderer

package/BaseEditor/defaultConfig/ElementInputRenderers.js.map CHANGED Viewed

	@@ -1 +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~~"}
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 { 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 { ColorPickerInputRenderer } from \"~/inputRenderers/ColorPickerInput.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/ColorPicker\"}\n component={ColorPickerInputRenderer}\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","ColorPickerInputRenderer","ContentEntryInputRenderer"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBO,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;sBAEf,oBAAChB,aAAa,YAAY,CAAC,QAAQ;QAC/B,MAAM;QACN,WAAWiB"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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\";\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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/ElementSettings/ElementSettingsGroup.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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\";\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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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