@webiny/app-website-builder 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

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/buildDefaultObject.d.ts

@@ -0,0 +1,10 @@
+import type { InputAstNode } from "@webiny/website-builder-sdk";
+/**
+ * Builds a default value for a single input node, falling back to a type-based empty when no
+ * explicit `defaultValue` is configured. Nested objects are built recursively.
+ */
+export declare function buildDefaultValue(node: InputAstNode): any;
+/**
+ * Builds a default object for an object field from its child input nodes.
+ */
+export declare function buildDefaultObject(children: InputAstNode[]): Record<string, any>;

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

@@ -0,0 +1,29 @@
+function emptyValueForType(type, list) {
+    if (list) return [];
+    switch(type){
+        case "number":
+            return 0;
+        case "boolean":
+            return false;
+        case "slot":
+            return;
+        default:
+            return "";
+    }
+}
+function buildDefaultValue(node) {
+    if ("object" === node.type) {
+        if (node.list) return node.input.defaultValue ?? [];
+        return buildDefaultObject(node.children);
+    }
+    if (void 0 !== node.input.defaultValue) return node.input.defaultValue;
+    return emptyValueForType(node.type, node.list);
+}
+function buildDefaultObject(children) {
+    const result = {};
+    for (const child of children)result[child.name] = buildDefaultValue(child);
+    return result;
+}
+export { buildDefaultObject, buildDefaultValue };
+
+//# sourceMappingURL=buildDefaultObject.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/buildDefaultObject.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/buildDefaultObject.ts"],"sourcesContent":["import type { InputAstNode } from \"@webiny/website-builder-sdk\";\n\n/**\n * Returns a sensible empty value for a leaf input type. This guarantees that a freshly added\n * list item has at least one defined leaf binding - without it, an \"empty\" item produces no\n * bindings at all and would silently disappear on the next render (the item count is derived\n * from the flat leaf bindings).\n */\nfunction emptyValueForType(type: string, list: boolean): any {\n    if (list) {\n        return [];\n    }\n\n    switch (type) {\n        case \"number\":\n            return 0;\n        case \"boolean\":\n            return false;\n        case \"slot\":\n            return undefined;\n        default:\n            return \"\";\n    }\n}\n\n/**\n * Builds a default value for a single input node, falling back to a type-based empty when no\n * explicit `defaultValue` is configured. Nested objects are built recursively.\n */\nexport function buildDefaultValue(node: InputAstNode): any {\n    if (node.type === \"object\") {\n        if (node.list) {\n            return node.input.defaultValue ?? [];\n        }\n\n        return buildDefaultObject(node.children);\n    }\n\n    if (node.input.defaultValue !== undefined) {\n        return node.input.defaultValue;\n    }\n\n    return emptyValueForType(node.type, node.list);\n}\n\n/**\n * Builds a default object for an object field from its child input nodes.\n */\nexport function buildDefaultObject(children: InputAstNode[]): Record<string, any> {\n    const result: Record<string, any> = {};\n\n    for (const child of children) {\n        result[child.name] = buildDefaultValue(child);\n    }\n\n    return result;\n}\n"],"names":["emptyValueForType","type","list","buildDefaultValue","node","buildDefaultObject","undefined","children","result","child"],"mappings":"AAQA,SAASA,kBAAkBC,IAAY,EAAEC,IAAa;IAClD,IAAIA,MACA,OAAO,EAAE;IAGb,OAAQD;QACJ,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD;QACJ;YACI,OAAO;IACf;AACJ;AAMO,SAASE,kBAAkBC,IAAkB;IAChD,IAAIA,AAAc,aAAdA,KAAK,IAAI,EAAe;QACxB,IAAIA,KAAK,IAAI,EACT,OAAOA,KAAK,KAAK,CAAC,YAAY,IAAI,EAAE;QAGxC,OAAOC,mBAAmBD,KAAK,QAAQ;IAC3C;IAEA,IAAIA,AAA4BE,WAA5BF,KAAK,KAAK,CAAC,YAAY,EACvB,OAAOA,KAAK,KAAK,CAAC,YAAY;IAGlC,OAAOJ,kBAAkBI,KAAK,IAAI,EAAEA,KAAK,IAAI;AACjD;AAKO,SAASC,mBAAmBE,QAAwB;IACvD,MAAMC,SAA8B,CAAC;IAErC,KAAK,MAAMC,SAASF,SAChBC,MAAM,CAACC,MAAM,IAAI,CAAC,GAAGN,kBAAkBM;IAG3C,OAAOD;AACX"}

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

@@ -3,24 +3,6 @@ export declare const useBindingsForElement: (elementId: string) => {
     resolvedBindings: import("@webiny/website-builder-sdk").DocumentElementBindings & {
         inputs: import("@webiny/website-builder-sdk").DocumentElementInputBindings;
         styles: Partial<{
-            transform?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Transform | undefined> | undefined;
-            zIndex?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ZIndex | undefined> | undefined;
-            opacity?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Opacity | undefined> | undefined;
-            clipPath?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipPath | undefined> | undefined;
-            filter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Filter | undefined> | undefined;
-            mask?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Mask<string | number> | undefined> | undefined;
-            fill?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Fill | undefined> | undefined;
-            height?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Height<string | number> | undefined> | undefined;
-            left?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Left<string | number> | undefined> | undefined;
-            top?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Top<string | number> | undefined> | undefined;
-            width?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Width<string | number> | undefined> | undefined;
-            position?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Position | undefined> | undefined;
-            content?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Content | undefined> | undefined;
-            translate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Translate<string | number> | undefined> | undefined;
-            color?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Color | undefined> | undefined;
-            display?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Display | undefined> | undefined;
-            flexDirection?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexDirection | undefined> | undefined;
-            overflowY?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowY | undefined> | undefined;
             accentColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AccentColor | undefined> | undefined;
             alignContent?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AlignContent | undefined> | undefined;
             alignItems?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AlignItems | undefined> | undefined;
@@ -101,7 +83,9 @@ export declare const useBindingsForElement: (elementId: string) => {
             caretColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CaretColor | undefined> | undefined;
             caretShape?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CaretShape | undefined> | undefined;
             clear?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Clear | undefined> | undefined;
+            clipPath?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipPath | undefined> | undefined;
             clipRule?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipRule | undefined> | undefined;
+            color?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Color | undefined> | undefined;
             colorAdjust?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PrintColorAdjust | undefined> | undefined;
             colorInterpolationFilters?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ColorInterpolationFilters | undefined> | undefined;
             colorScheme?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ColorScheme | undefined> | undefined;
@@ -120,6 +104,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             containIntrinsicWidth?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainIntrinsicWidth<string | number> | undefined> | undefined;
             containerName?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainerName | undefined> | undefined;
             containerType?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContainerType | undefined> | undefined;
+            content?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Content | undefined> | undefined;
             contentVisibility?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ContentVisibility | undefined> | undefined;
             counterIncrement?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CounterIncrement | undefined> | undefined;
             counterReset?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CounterReset | undefined> | undefined;
@@ -129,12 +114,16 @@ export declare const useBindingsForElement: (elementId: string) => {
             cy?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Cy<string | number> | undefined> | undefined;
             d?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.D | undefined> | undefined;
             direction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Direction | undefined> | undefined;
+            display?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Display | undefined> | undefined;
             dominantBaseline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.DominantBaseline | undefined> | undefined;
             emptyCells?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.EmptyCells | undefined> | undefined;
             fieldSizing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FieldSizing | undefined> | undefined;
+            fill?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Fill | undefined> | undefined;
             fillOpacity?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FillOpacity | undefined> | undefined;
             fillRule?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FillRule | undefined> | undefined;
+            filter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Filter | undefined> | undefined;
             flexBasis?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexBasis<string | number> | undefined> | undefined;
+            flexDirection?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexDirection | undefined> | undefined;
             flexGrow?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexGrow | undefined> | undefined;
             flexShrink?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexShrink | undefined> | undefined;
             flexWrap?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexWrap | undefined> | undefined;
@@ -178,6 +167,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             gridTemplateColumns?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.GridTemplateColumns<string | number> | undefined> | undefined;
             gridTemplateRows?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.GridTemplateRows<string | number> | undefined> | undefined;
             hangingPunctuation?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HangingPunctuation | undefined> | undefined;
+            height?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Height<string | number> | undefined> | undefined;
             hyphenateCharacter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HyphenateCharacter | undefined> | undefined;
             hyphenateLimitChars?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.HyphenateLimitChars | undefined> | undefined;
             hyphens?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Hyphens | undefined> | undefined;
@@ -197,6 +187,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             justifyItems?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifyItems | undefined> | undefined;
             justifySelf?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifySelf | undefined> | undefined;
             justifyTracks?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.JustifyTracks | undefined> | undefined;
+            left?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Left<string | number> | undefined> | undefined;
             letterSpacing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LetterSpacing<string | number> | undefined> | undefined;
             lightingColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LightingColor | undefined> | undefined;
             lineBreak?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LineBreak | undefined> | undefined;
@@ -258,6 +249,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             offsetPosition?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OffsetPosition<string | number> | undefined> | undefined;
             offsetRotate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OffsetRotate | undefined> | undefined;
             offsetRotation?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OffsetRotate | undefined> | undefined;
+            opacity?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Opacity | undefined> | undefined;
             order?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Order | undefined> | undefined;
             orphans?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Orphans | undefined> | undefined;
             outlineColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OutlineColor | undefined> | undefined;
@@ -270,6 +262,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             overflowInline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowInline | undefined> | undefined;
             overflowWrap?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowWrap | undefined> | undefined;
             overflowX?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowX | undefined> | undefined;
+            overflowY?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowY | undefined> | undefined;
             overlay?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Overlay | undefined> | undefined;
             overscrollBehaviorBlock?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverscrollBehaviorBlock | undefined> | undefined;
             overscrollBehaviorInline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverscrollBehaviorInline | undefined> | undefined;
@@ -288,6 +281,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             perspective?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Perspective<string | number> | undefined> | undefined;
             perspectiveOrigin?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PerspectiveOrigin<string | number> | undefined> | undefined;
             pointerEvents?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PointerEvents | undefined> | undefined;
+            position?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Position | undefined> | undefined;
             positionAnchor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionAnchor | undefined> | undefined;
             positionArea?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionArea | undefined> | undefined;
             positionTryFallbacks?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PositionTryFallbacks | undefined> | undefined;
@@ -383,7 +377,9 @@ export declare const useBindingsForElement: (elementId: string) => {
             textWrapMode?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TextWrapMode | undefined> | undefined;
             textWrapStyle?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TextWrapStyle | undefined> | undefined;
             timelineScope?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TimelineScope | undefined> | undefined;
+            top?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Top<string | number> | undefined> | undefined;
             touchAction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TouchAction | undefined> | undefined;
+            transform?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Transform | undefined> | undefined;
             transformBox?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformBox | undefined> | undefined;
             transformOrigin?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformOrigin<string | number> | undefined> | undefined;
             transformStyle?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransformStyle | undefined> | undefined;
@@ -392,6 +388,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             transitionDuration?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionDuration<string & {}> | undefined> | undefined;
             transitionProperty?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionProperty | undefined> | undefined;
             transitionTimingFunction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionTimingFunction | undefined> | undefined;
+            translate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Translate<string | number> | undefined> | undefined;
             unicodeBidi?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.UnicodeBidi | undefined> | undefined;
             userSelect?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.UserSelect | undefined> | undefined;
             vectorEffect?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.VectorEffect | undefined> | undefined;
@@ -405,6 +402,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             whiteSpace?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WhiteSpace | undefined> | undefined;
             whiteSpaceCollapse?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WhiteSpaceCollapse | undefined> | undefined;
             widows?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Widows | undefined> | undefined;
+            width?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Width<string | number> | undefined> | undefined;
             willChange?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WillChange | undefined> | undefined;
             wordBreak?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WordBreak | undefined> | undefined;
             wordSpacing?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WordSpacing<string | number> | undefined> | undefined;
@@ -412,6 +410,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             writingMode?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WritingMode | undefined> | undefined;
             x?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.X<string | number> | undefined> | undefined;
             y?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Y<string | number> | undefined> | undefined;
+            zIndex?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ZIndex | undefined> | undefined;
             zoom?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Zoom | undefined> | undefined;
             all?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Globals | undefined> | undefined;
             animationRange?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AnimationRange<string | number> | undefined> | undefined;
@@ -437,6 +436,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             lineClamp?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.LineClamp | undefined> | undefined;
             marginBlock?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.MarginBlock<string | number> | undefined> | undefined;
             marginInline?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.MarginInline<string | number> | undefined> | undefined;
+            mask?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Mask<string | number> | undefined> | undefined;
             maskBorder?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.MaskBorder | undefined> | undefined;
             motion?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Offset<string | number> | undefined> | undefined;
             offset?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Offset<string | number> | undefined> | undefined;

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

@@ -1,4 +1,3 @@
-import type { ValueBinding } from "@webiny/website-builder-sdk";
 import type { InputAstNode } from "@webiny/website-builder-sdk";
 import { type IMetadata } from "../../../../BaseEditor/metadata/index.js";
 export type OnChangeParams = {
@@ -14,7 +13,7 @@ export declare class InputValueObject {
     unset(): void;
 }
 export declare const useInputValue: (elementId: string, node: InputAstNode) => {
-    value: ValueBinding;
+    value: any;
     metadata: IMetadata;
     inheritanceMap: {
         overridden: boolean;

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;
@@ -25,7 +26,12 @@ class InputValueObject {
     }
 }
 function convertBracketPathToDotPath(path) {
-    return path.replace(/\/(\d+)\//g, ".$1");
+    return path.replace(/\//g, ".");
+}
+function getDeepValueAtPath(obj, path) {
+    if (!path) return obj;
+    const keys = path.split("/").map((key)=>/^\d+$/.test(key) ? Number(key) : key);
+    return keys.reduce((acc, key)=>null == acc ? void 0 : acc[key], obj);
 }
 const withTimeout = (cb)=>(...args)=>{
         setTimeout(()=>{
@@ -47,7 +53,17 @@ const useInputValue = (elementId, node)=>{
         elementId,
         rawBindings
     ]);
-    const value = resolvedBindings.inputs[node.path];
+    const value = useMemo(()=>{
+        if (node.children.length > 0) {
+            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+            return getDeepValueAtPath(deepInputs, node.path);
+        }
+        return resolvedBindings.inputs[node.path];
+    }, [
+        resolvedBindings,
+        node.path,
+        inputsProcessor
+    ]);
     const inputMetadata = useMemo(()=>{
         let elementMetadata = new ElementMetadata(elementId, rawBindings.metadata);
         if (node.input.responsive) elementMetadata = new BreakpointElementMetadata(breakpointNames, breakpoint.name, elementMetadata);
@@ -59,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);
@@ -68,7 +87,7 @@ const useInputValue = (elementId, node)=>{
         };
         cb(updaterInput);
         const valuePath = convertBracketPathToDotPath(node.path);
-        const devFriendlyInputs = set(structuredClone(deepInputs), valuePath, valueObject.get());
+        const devFriendlyInputs = set(JSON.parse(JSON.stringify(deepInputs)), valuePath, valueObject.get());
         const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});
         if (node.input.onChange) {
             const callback = functionConverter.deserialize(node.input.onChange);
@@ -114,12 +133,12 @@ const useInputValue = (elementId, node)=>{
         };
         cb(updaterInput);
         const valuePath = convertBracketPathToDotPath(node.path);
-        const devFriendlyInputs = set(structuredClone(deepInputs), valuePath, valueObject.get());
+        const devFriendlyInputs = set(JSON.parse(JSON.stringify(deepInputs)), valuePath, valueObject.get());
         setLocalValue({
             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
@@ -127,7 +146,8 @@ const useInputValue = (elementId, node)=>{
     }, [
         elementId,
         rawBindings,
-        localState
+        localState,
+        previewedBindings
     ]);
     const setBindingType = useCallback((type)=>{
         editor.updateDocument((state)=>{

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { ValueBinding, CreateElementParams } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport {\n    functionConverter,\n    InputsBindingsProcessor,\n    StylesBindingsProcessor,\n    createElement\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"~/editorSdk/utils/executeOnChange.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { useElementFactory } from \"./useElementFactory.js\";\n\nexport type OnChangeParams = {\n    value: InputValueObject;\n    metadata: IMetadata;\n};\n\nexport type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;\n\nexport class InputValueObject {\n    private value: any;\n\n    constructor(value: any) {\n        this.value = value;\n    }\n\n    set(value: any) {\n        this.value = value;\n    }\n\n    get() {\n        return this.value;\n    }\n\n    unset() {\n        this.value = undefined;\n    }\n}\n\nfunction convertBracketPathToDotPath(path: string): string {\n    return path.replace(/\\/(\\d+)\\//g, \".$1\");\n}\n\n/**\n * This makes UI interaction smoother (input blur in particular).\n */\nconst withTimeout = <T extends (...args: any[]) => unknown>(cb: T): T => {\n    return ((...args: Parameters<T>) => {\n        setTimeout(() => {\n            cb(...args);\n        }, 0);\n    }) as unknown as T;\n};\n\nexport const useInputValue = (elementId: string, node: InputAstNode) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const editor = useDocumentEditor();\n    const inputsAst = useElementInputsAst(elementId);\n    const elementFactory = useElementFactory();\n\n    const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);\n\n    // These bindings already include per-breakpoint overrides.\n    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);\n\n    const stylesProcessor = useMemo(() => {\n        return new StylesBindingsProcessor(elementId ?? \"\", breakpointNames, rawBindings);\n    }, [elementId, rawBindings]);\n\n    const inputsProcessor = useMemo(() => {\n        return new InputsBindingsProcessor(\n            elementId ?? \"\",\n            inputsAst,\n            breakpointNames,\n            rawBindings,\n            elementFactory\n        );\n    }, [elementId, rawBindings]);\n\n    // This value is the final calculated breakpoint value.\n    const value = resolvedBindings.inputs[node.path];\n\n    const inputMetadata = useMemo((): IMetadata => {\n        let elementMetadata: IMetadata = new ElementMetadata(elementId, rawBindings.metadata);\n\n        if (node.input.responsive) {\n            elementMetadata = new BreakpointElementMetadata(\n                breakpointNames,\n                breakpoint.name,\n                elementMetadata\n            );\n        }\n\n        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();\n\n        return new InputMetadata(valueId, elementMetadata);\n    }, [elementId, breakpoint.name, rawBindings]);\n\n    const [localState, setLocalValue] = useState<ValueBinding>();\n\n    const onChange = useCallback(\n        withTimeout((cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                structuredClone(deepInputs),\n                valuePath,\n                valueObject.get()\n            );\n\n            const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});\n\n            // Process input's `onChange`.\n            if (node.input.onChange) {\n                const callback = functionConverter.deserialize(\n                    // TODO: we know it's a string, but on the frontend it's a function. Fix types.\n                    node.input.onChange! as any as string\n                );\n\n                // Run onChange callback.\n                const publicApi = {\n                    inputs: devFriendlyInputs,\n                    styles: devFriendlyStyles,\n                    createElement: (params: CreateElementParams) => {\n                        return createElement(params);\n                    }\n                };\n\n                // Run input's `onChange` callback.\n                callback(publicApi, {\n                    breakpoint: breakpoint.name\n                });\n            }\n\n            // Run manifest.onChange + onDescendantChange on ancestors\n            const ancestorUpdates = executeOnChange({\n                editor,\n                elementId,\n                deepInputs: devFriendlyInputs,\n                action: \"update\",\n                breakpointNames,\n                baseBreakpoint: breakpoint.name,\n                elementFactory,\n                deepStyles: devFriendlyStyles\n            });\n\n            editor.updateDocument(document => {\n                const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n                const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);\n\n                inputs.applyToDocument(document);\n                styles.applyToDocument(document);\n\n                inputMetadata.applyToDocument(document);\n\n                applyAncestorUpdates(\n                    document,\n                    ancestorUpdates,\n                    breakpointNames,\n                    breakpoint.name,\n                    elementFactory\n                );\n            });\n\n            // Clear local value\n            setLocalValue(undefined);\n        }),\n        [elementId, resolvedBindings, breakpoint]\n    );\n\n    /**\n     * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.\n     */\n    const onPreviewChange = useCallback(\n        (cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(localState ?? value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                structuredClone(deepInputs),\n                valuePath,\n                valueObject.get()\n            );\n\n            setLocalValue({ static: valueObject.get() });\n\n            const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n            const patch = updatedInputs.createJsonPatch(rawBindings);\n\n            editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n        },\n        [elementId, rawBindings, localState]\n    );\n\n    const setBindingType = useCallback(\n        (type: \"static\" | \"expression\") => {\n            editor.updateDocument(state => {\n                const bindings = state.bindings[elementId];\n                const valueBinding = bindings.inputs![node.path];\n\n                if (type === \"static\") {\n                    // Switching to static bindings means we have to remove the expression binding.\n                    delete valueBinding.expression;\n                } else {\n                    valueBinding.expression = \"$noop\";\n                }\n\n                state.bindings[elementId] = {\n                    ...bindings,\n                    inputs: {\n                        ...bindings.inputs,\n                        [node.path]: valueBinding\n                    }\n                };\n            });\n        },\n        [elementId]\n    );\n\n    const onReset = useCallback(() => {\n        onChange(({ value, metadata }) => {\n            value.unset();\n            metadata.unset();\n        });\n    }, [onChange]);\n\n    return {\n        value: localState ?? value,\n        metadata: inputMetadata,\n        inheritanceMap: inheritanceMap.inputs[node.path],\n        onReset,\n        onChange,\n        onPreviewChange,\n        setBindingType\n    };\n};\n"],"names":["InputValueObject","value","undefined","convertBracketPathToDotPath","path","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","useBreakpoint","editor","useDocumentEditor","inputsAst","useElementInputsAst","elementFactory","useElementFactory","breakpointNames","useMemo","bp","rawBindings","resolvedBindings","inheritanceMap","useBindingsForElement","stylesProcessor","StylesBindingsProcessor","inputsProcessor","InputsBindingsProcessor","inputMetadata","elementMetadata","ElementMetadata","BreakpointElementMetadata","valueId","generateAlphaNumericLowerCaseId","InputMetadata","localState","setLocalValue","useState","onChange","useCallback","deepInputs","valueObject","updaterInput","valuePath","devFriendlyInputs","set","structuredClone","devFriendlyStyles","callback","functionConverter","publicApi","params","createElement","ancestorUpdates","executeOnChange","document","inputs","styles","applyAncestorUpdates","onPreviewChange","updatedInputs","patch","Commands","setBindingType","type","state","bindings","valueBinding","onReset","metadata"],"mappings":"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"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useInputValue.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport set from \"lodash/set.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils/generateId.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport type { ValueBinding, CreateElementParams } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { InputAstNode } from \"@webiny/website-builder-sdk\";\nimport {\n    functionConverter,\n    InputsBindingsProcessor,\n    StylesBindingsProcessor,\n    createElement\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"~/editorSdk/utils/executeOnChange.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    InputMetadata,\n    type IMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { useElementFactory } from \"./useElementFactory.js\";\nimport { PreviewedBindings } from \"./PreviewedBindings.js\";\n\nexport type OnChangeParams = {\n    value: InputValueObject;\n    metadata: IMetadata;\n};\n\nexport type InputBindingOnChange = (cb: (params: OnChangeParams) => void) => void;\n\nexport class InputValueObject {\n    private value: any;\n\n    constructor(value: any) {\n        this.value = value;\n    }\n\n    set(value: any) {\n        this.value = value;\n    }\n\n    get() {\n        return this.value;\n    }\n\n    unset() {\n        this.value = undefined;\n    }\n}\n\nfunction convertBracketPathToDotPath(path: string): string {\n    // Flat binding paths use `/` as the segment separator (e.g. `items/0/label`, `address/city`).\n    // lodash `set`/`get` expect `.`-delimited paths, and treat numeric segments as array indexes,\n    // so a straight `/` -> `.` conversion handles both nested objects and list items.\n    return path.replace(/\\//g, \".\");\n}\n\n/**\n * Reads a value from a deep inputs object using a flat `/`-delimited binding path.\n * Numeric segments are treated as array indexes (e.g. `items/0/label`).\n */\nfunction getDeepValueAtPath(obj: any, path: string): any {\n    if (!path) {\n        return obj;\n    }\n\n    const keys = path.split(\"/\").map(key => (/^\\d+$/.test(key) ? Number(key) : key));\n    return keys.reduce((acc, key) => (acc == null ? undefined : acc[key]), obj);\n}\n\n/**\n * This makes UI interaction smoother (input blur in particular).\n */\nconst withTimeout = <T extends (...args: any[]) => unknown>(cb: T): T => {\n    return ((...args: Parameters<T>) => {\n        setTimeout(() => {\n            cb(...args);\n        }, 0);\n    }) as unknown as T;\n};\n\nexport const useInputValue = (elementId: string, node: InputAstNode) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const editor = useDocumentEditor();\n    const inputsAst = useElementInputsAst(elementId);\n    const elementFactory = useElementFactory();\n\n    const breakpointNames = useMemo(() => breakpoints.map(bp => bp.name), []);\n\n    // These bindings already include per-breakpoint overrides.\n    const { rawBindings, resolvedBindings, inheritanceMap } = useBindingsForElement(elementId);\n\n    const stylesProcessor = useMemo(() => {\n        return new StylesBindingsProcessor(elementId ?? \"\", breakpointNames, rawBindings);\n    }, [elementId, rawBindings]);\n\n    const inputsProcessor = useMemo(() => {\n        return new InputsBindingsProcessor(\n            elementId ?? \"\",\n            inputsAst,\n            breakpointNames,\n            rawBindings,\n            elementFactory\n        );\n    }, [elementId, rawBindings]);\n\n    // This value is the final calculated breakpoint value.\n    // Leaf inputs resolve directly from the flat bindings. Container inputs (object / object-list)\n    // have no flat entry of their own, so we resolve their deep value (object / array) from the\n    // processor - this is what list fields read to render items and to rewrite the whole array.\n    const value = useMemo(() => {\n        if (node.children.length > 0) {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n            return getDeepValueAtPath(deepInputs, node.path);\n        }\n\n        return resolvedBindings.inputs[node.path];\n    }, [resolvedBindings, node.path, inputsProcessor]);\n\n    const inputMetadata = useMemo((): IMetadata => {\n        let elementMetadata: IMetadata = new ElementMetadata(elementId, rawBindings.metadata);\n\n        if (node.input.responsive) {\n            elementMetadata = new BreakpointElementMetadata(\n                breakpointNames,\n                breakpoint.name,\n                elementMetadata\n            );\n        }\n\n        const valueId = value?.id ?? generateAlphaNumericLowerCaseId();\n\n        return new InputMetadata(valueId, elementMetadata);\n    }, [elementId, breakpoint.name, rawBindings]);\n\n    const [localState, setLocalValue] = useState<ValueBinding>();\n\n    // See PreviewedBindings: preview patches are diffed against what the preview shows.\n    const previewedBindings = useMemo(() => new PreviewedBindings(), [elementId]);\n\n    const onChange = useCallback(\n        withTimeout((cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                JSON.parse(JSON.stringify(deepInputs)),\n                valuePath,\n                valueObject.get()\n            );\n\n            const devFriendlyStyles = stylesProcessor.toDeepStyles(rawBindings.styles ?? {});\n\n            // Process input's `onChange`.\n            if (node.input.onChange) {\n                const callback = functionConverter.deserialize(\n                    // TODO: we know it's a string, but on the frontend it's a function. Fix types.\n                    node.input.onChange! as any as string\n                );\n\n                // Run onChange callback.\n                const publicApi = {\n                    inputs: devFriendlyInputs,\n                    styles: devFriendlyStyles,\n                    createElement: (params: CreateElementParams) => {\n                        return createElement(params);\n                    }\n                };\n\n                // Run input's `onChange` callback.\n                callback(publicApi, {\n                    breakpoint: breakpoint.name\n                });\n            }\n\n            // Run manifest.onChange + onDescendantChange on ancestors\n            const ancestorUpdates = executeOnChange({\n                editor,\n                elementId,\n                deepInputs: devFriendlyInputs,\n                action: \"update\",\n                breakpointNames,\n                baseBreakpoint: breakpoint.name,\n                elementFactory,\n                deepStyles: devFriendlyStyles\n            });\n\n            editor.updateDocument(document => {\n                const inputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n                const styles = stylesProcessor.createUpdate(devFriendlyStyles, breakpoint.name);\n\n                inputs.applyToDocument(document);\n                styles.applyToDocument(document);\n\n                inputMetadata.applyToDocument(document);\n\n                applyAncestorUpdates(\n                    document,\n                    ancestorUpdates,\n                    breakpointNames,\n                    breakpoint.name,\n                    elementFactory\n                );\n            });\n\n            // Clear local value\n            setLocalValue(undefined);\n        }),\n        [elementId, resolvedBindings, breakpoint]\n    );\n\n    /**\n     * In preview, we do not update the editor document. Instead, we create a patch and send it to the preview app.\n     */\n    const onPreviewChange = useCallback(\n        (cb: (params: OnChangeParams) => void) => {\n            const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n            const valueObject = new InputValueObject(localState ?? value);\n\n            const updaterInput = {\n                value: valueObject,\n                metadata: inputMetadata\n            };\n\n            // Change the input value (and metadata).\n            cb(updaterInput);\n\n            const valuePath = convertBracketPathToDotPath(node.path);\n            const devFriendlyInputs = set(\n                JSON.parse(JSON.stringify(deepInputs)),\n                valuePath,\n                valueObject.get()\n            );\n\n            setLocalValue({ static: valueObject.get() });\n\n            const updatedInputs = inputsProcessor.createUpdate(devFriendlyInputs, breakpoint.name);\n\n            const patch = previewedBindings.createPatch(updatedInputs, rawBindings);\n\n            editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n        },\n        [elementId, rawBindings, localState, previewedBindings]\n    );\n\n    const setBindingType = useCallback(\n        (type: \"static\" | \"expression\") => {\n            editor.updateDocument(state => {\n                const bindings = state.bindings[elementId];\n                const valueBinding = bindings.inputs![node.path];\n\n                if (type === \"static\") {\n                    // Switching to static bindings means we have to remove the expression binding.\n                    delete valueBinding.expression;\n                } else {\n                    valueBinding.expression = \"$noop\";\n                }\n\n                state.bindings[elementId] = {\n                    ...bindings,\n                    inputs: {\n                        ...bindings.inputs,\n                        [node.path]: valueBinding\n                    }\n                };\n            });\n        },\n        [elementId]\n    );\n\n    const onReset = useCallback(() => {\n        onChange(({ value, metadata }) => {\n            value.unset();\n            metadata.unset();\n        });\n    }, [onChange]);\n\n    return {\n        value: localState ?? value,\n        metadata: inputMetadata,\n        inheritanceMap: inheritanceMap.inputs[node.path],\n        onReset,\n        onChange,\n        onPreviewChange,\n        setBindingType\n    };\n};\n"],"names":["InputValueObject","value","undefined","convertBracketPathToDotPath","path","getDeepValueAtPath","obj","keys","key","Number","acc","withTimeout","cb","args","setTimeout","useInputValue","elementId","node","breakpoint","breakpoints","useBreakpoint","editor","useDocumentEditor","inputsAst","useElementInputsAst","elementFactory","useElementFactory","breakpointNames","useMemo","bp","rawBindings","resolvedBindings","inheritanceMap","useBindingsForElement","stylesProcessor","StylesBindingsProcessor","inputsProcessor","InputsBindingsProcessor","deepInputs","inputMetadata","elementMetadata","ElementMetadata","BreakpointElementMetadata","valueId","generateAlphaNumericLowerCaseId","InputMetadata","localState","setLocalValue","useState","previewedBindings","PreviewedBindings","onChange","useCallback","valueObject","updaterInput","valuePath","devFriendlyInputs","set","JSON","devFriendlyStyles","callback","functionConverter","publicApi","params","createElement","ancestorUpdates","executeOnChange","document","inputs","styles","applyAncestorUpdates","onPreviewChange","updatedInputs","patch","Commands","setBindingType","type","state","bindings","valueBinding","onReset","metadata"],"mappings":"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"}

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.js

@@ -1,7 +1,7 @@
 import react from "react";
 import { Icon, Text } from "@webiny/admin-ui";
 const InfoMessage = ({ message, icon })=>/*#__PURE__*/ react.createElement("div", {
-        className: "bg-neutral-dimmed p-md flex flex-col items-center"
+        className: "bg-neutral-dark/2 rounded-lg p-md flex flex-col items-center w-full"
     }, icon && /*#__PURE__*/ react.createElement(Icon, {
         label: "Select an element",
         size: "lg",
@@ -9,7 +9,7 @@ const InfoMessage = ({ message, icon })=>/*#__PURE__*/ react.createElement("div"
         color: "neutral-light"
     }), /*#__PURE__*/ react.createElement(Text, {
         size: "md",
-        className: "text-center text-neutral-dimmed my-sm"
+        className: "text-center text-neutral-strong my-sm"
     }, message));
 export { InfoMessage };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InfoMessage.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InfoMessage.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Text, Icon } from \"@webiny/admin-ui\";\n\nexport interface InfoMessageProps {\n    message: string;\n    icon?: ReactElement;\n}\n\nexport const InfoMessage = ({ message, icon }: InfoMessageProps) => {\n    return (\n        <div className={\"bg-neutral-dimmed p-md flex flex-col items-center\"}>\n            {icon && (\n                <Icon label=\"Select an element\" size={\"lg\"} icon={icon} color={\"neutral-light\"} />\n            )}\n            <Text size={\"md\"} className={\"text-center text-neutral-dimmed my-sm\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"names":["InfoMessage","message","icon","Icon","Text"],"mappings":";;AASO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAoB,GACpD,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,QAAQ,WAARA,GACG,oBAACC,MAAIA;QAAC,OAAM;QAAoB,MAAM;QAAM,MAAMD;QAAM,OAAO;sBAEnE,oBAACE,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBH"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InfoMessage.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InfoMessage.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Text, Icon } from \"@webiny/admin-ui\";\n\nexport interface InfoMessageProps {\n    message: string;\n    icon?: ReactElement;\n}\n\nexport const InfoMessage = ({ message, icon }: InfoMessageProps) => {\n    return (\n        <div className={\"bg-neutral-dark/2 rounded-lg p-md flex flex-col items-center w-full\"}>\n            {icon && (\n                <Icon label=\"Select an element\" size={\"lg\"} icon={icon} color={\"neutral-light\"} />\n            )}\n            <Text size={\"md\"} className={\"text-center text-neutral-strong my-sm\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"names":["InfoMessage","message","icon","Icon","Text"],"mappings":";;AASO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAoB,GACpD,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,QAAQ,WAARA,GACG,oBAACC,MAAIA;QAAC,OAAM;QAAoB,MAAM;QAAM,MAAMD;QAAM,OAAO;sBAEnE,oBAACE,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBH"}

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js

@@ -21,6 +21,7 @@ const InheritanceLabel = ({ inheritedFrom, isOverridden, text, onReset })=>{
         breakpoints.length
     ]);
     if (isBaseBreakpoint) return /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        className: "mb-0",
         text: text
     });
     return /*#__PURE__*/ react.createElement("div", {
@@ -46,6 +47,7 @@ const InheritanceLabel = ({ inheritedFrom, isOverridden, text, onReset })=>{
         overriddenAt: isOverridden ? breakpoint.name : null,
         onReset: onReset
     }))), /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        className: "mb-0",
         text: text
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n    Text,\n    Tag,\n    Icon,\n    Button,\n    Separator,\n    DropdownMenu,\n    FormComponentLabel\n} from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport type { Breakpoint } from \"@webiny/website-builder-sdk\";\n\nexport interface InheritanceLabelProps {\n    text: React.ReactNode;\n    isOverridden: boolean;\n    onReset: () => void;\n    inheritedFrom?: string;\n}\n\nconst getBreakpointIcon = (breakpoints: Breakpoint[], name: string) => {\n    const bp = breakpoints.find(breakpoint => breakpoint.name === name);\n    return bp ? <InlineSvg src={bp.icon} /> : null;\n};\n\nconst iconClassName = \"cursor-pointer mr-xs mb-xxs\";\n\nexport const InheritanceLabel = ({\n    inheritedFrom,\n    isOverridden,\n    text,\n    onReset\n}: InheritanceLabelProps) => {\n    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();\n    const baseBreakpoint = breakpoints[0];\n\n    const icon = useMemo(() => {\n        const bp = inheritedFrom ?? baseBreakpoint.name;\n        return getBreakpointIcon(breakpoints, bp);\n    }, [inheritedFrom, breakpoint.name, breakpoints.length]);\n\n    if (isBaseBreakpoint) {\n        return <FormComponentLabel text={text} />;\n    }\n\n    return (\n        <div className={\"flex items-center\"}>\n            <DropdownMenu\n                trigger={\n                    <Icon\n                        icon={icon}\n                        label=\"\"\n                        size=\"sm\"\n                        color={isOverridden ? \"accent\" : \"neutral-strong\"}\n                        className={iconClassName}\n                    />\n                }\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wy-p-sm shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    <InheritedFrom\n                        inheritedFrom={inheritedFrom ?? baseBreakpoint.name}\n                        overriddenAt={isOverridden ? breakpoint.name : null}\n                        onReset={onReset}\n                    />\n                </div>\n            </DropdownMenu>\n            <FormComponentLabel text={text} />\n        </div>\n    );\n};\n\ninterface InheritedFromProps {\n    overriddenAt: string | null;\n    inheritedFrom?: string;\n    onReset: () => void;\n}\n\nexport const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => {\n    if (overriddenAt) {\n        return (\n            <div>\n                This value is set on the current breakpoint.\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                <Button variant={\"primary\"} onClick={onReset} text={\"Reset value\"} size={\"sm\"} />\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                Resetting will inherit the value from the{\" \"}\n                <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n            </div>\n        );\n    }\n\n    return (\n        <Text size={\"sm\"}>\n            This value is inherited from the{\" \"}\n            <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n        </Text>\n    );\n};\n"],"names":["getBreakpointIcon","breakpoints","name","bp","breakpoint","InlineSvg","iconClassName","InheritanceLabel","inheritedFrom","isOverridden","text","onReset","isBaseBreakpoint","useBreakpoint","baseBreakpoint","icon","useMemo","FormComponentLabel","DropdownMenu","Icon","InheritedFrom","overriddenAt","Separator","Button","Tag","Text"],"mappings":";;;;AAqBA,MAAMA,oBAAoB,CAACC,aAA2BC;IAClD,MAAMC,KAAKF,YAAY,IAAI,CAACG,CAAAA,aAAcA,WAAW,IAAI,KAAKF;IAC9D,OAAOC,KAAK,WAALA,GAAK,oBAACE,WAASA;QAAC,KAAKF,GAAG,IAAI;SAAO;AAC9C;AAEA,MAAMG,gBAAgB;AAEf,MAAMC,mBAAmB,CAAC,EAC7BC,aAAa,EACbC,YAAY,EACZC,IAAI,EACJC,OAAO,EACa;IACpB,MAAM,EAAEP,UAAU,EAAEH,WAAW,EAAEW,gBAAgB,EAAE,GAAGC;IACtD,MAAMC,iBAAiBb,WAAW,CAAC,EAAE;IAErC,MAAMc,OAAOC,QAAQ;QACjB,MAAMb,KAAKK,iBAAiBM,eAAe,IAAI;QAC/C,OAAOd,kBAAkBC,aAAaE;IAC1C,GAAG;QAACK;QAAeJ,WAAW,IAAI;QAAEH,YAAY,MAAM;KAAC;IAEvD,IAAIW,kBACA,OAAO,WAAP,GAAO,oBAACK,oBAAkBA;QAAC,MAAMP;;IAGrC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACQ,cAAYA;QACT,uBACI,oBAACC,MAAIA;YACD,MAAMJ;YACN,OAAM;YACN,MAAK;YACL,OAAON,eAAe,WAAW;YACjC,WAAWH;;QAGnB,OAAM;QACN,MAAK;QACL,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;qBAChD,oBAACc,eAAaA;QACV,eAAeZ,iBAAiBM,eAAe,IAAI;QACnD,cAAcL,eAAeL,WAAW,IAAI,GAAG;QAC/C,SAASO;wBAIrB,oBAACM,oBAAkBA;QAAC,MAAMP;;AAGtC;AAQO,MAAMU,gBAAgB,CAAC,EAAEC,YAAY,EAAEb,aAAa,EAAEG,OAAO,EAAsB;IACtF,IAAIU,cACA,OAAO,WAAP,GACI,oBAAC,aAAI,8DAED,oBAACC,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,QAAMA;QAAC,SAAS;QAAW,SAASZ;QAAS,MAAM;QAAe,MAAM;sBACzE,oBAACW,WAASA;QAAC,SAAS;QAAU,QAAQ;QAAQ,6CACJ,mBAC1C,oBAACE,KAAGA;QAAC,SAAS;QAAiB,SAAShB;QAAiB;IAKrE,OAAO,WAAP,GACI,oBAACiB,MAAIA;QAAC,MAAM;OAAM,oCACmB,mBACjC,oBAACD,KAAGA;QAAC,SAAS;QAAiB,SAAShB;QAAiB;AAGrE"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n    Text,\n    Tag,\n    Icon,\n    Button,\n    Separator,\n    DropdownMenu,\n    FormComponentLabel\n} from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport type { Breakpoint } from \"@webiny/website-builder-sdk\";\n\nexport interface InheritanceLabelProps {\n    text: React.ReactNode;\n    isOverridden: boolean;\n    onReset: () => void;\n    inheritedFrom?: string;\n}\n\nconst getBreakpointIcon = (breakpoints: Breakpoint[], name: string) => {\n    const bp = breakpoints.find(breakpoint => breakpoint.name === name);\n    return bp ? <InlineSvg src={bp.icon} /> : null;\n};\n\nconst iconClassName = \"cursor-pointer mr-xs mb-xxs\";\n\nexport const InheritanceLabel = ({\n    inheritedFrom,\n    isOverridden,\n    text,\n    onReset\n}: InheritanceLabelProps) => {\n    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();\n    const baseBreakpoint = breakpoints[0];\n\n    const icon = useMemo(() => {\n        const bp = inheritedFrom ?? baseBreakpoint.name;\n        return getBreakpointIcon(breakpoints, bp);\n    }, [inheritedFrom, breakpoint.name, breakpoints.length]);\n\n    if (isBaseBreakpoint) {\n        return <FormComponentLabel className={\"mb-0\"} text={text} />;\n    }\n\n    return (\n        <div className={\"flex items-center\"}>\n            <DropdownMenu\n                trigger={\n                    <Icon\n                        icon={icon}\n                        label=\"\"\n                        size=\"sm\"\n                        color={isOverridden ? \"accent\" : \"neutral-strong\"}\n                        className={iconClassName}\n                    />\n                }\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wy-p-sm shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    <InheritedFrom\n                        inheritedFrom={inheritedFrom ?? baseBreakpoint.name}\n                        overriddenAt={isOverridden ? breakpoint.name : null}\n                        onReset={onReset}\n                    />\n                </div>\n            </DropdownMenu>\n            <FormComponentLabel className={\"mb-0\"} text={text} />\n        </div>\n    );\n};\n\ninterface InheritedFromProps {\n    overriddenAt: string | null;\n    inheritedFrom?: string;\n    onReset: () => void;\n}\n\nexport const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => {\n    if (overriddenAt) {\n        return (\n            <div>\n                This value is set on the current breakpoint.\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                <Button variant={\"primary\"} onClick={onReset} text={\"Reset value\"} size={\"sm\"} />\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                Resetting will inherit the value from the{\" \"}\n                <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n            </div>\n        );\n    }\n\n    return (\n        <Text size={\"sm\"}>\n            This value is inherited from the{\" \"}\n            <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n        </Text>\n    );\n};\n"],"names":["getBreakpointIcon","breakpoints","name","bp","breakpoint","InlineSvg","iconClassName","InheritanceLabel","inheritedFrom","isOverridden","text","onReset","isBaseBreakpoint","useBreakpoint","baseBreakpoint","icon","useMemo","FormComponentLabel","DropdownMenu","Icon","InheritedFrom","overriddenAt","Separator","Button","Tag","Text"],"mappings":";;;;AAqBA,MAAMA,oBAAoB,CAACC,aAA2BC;IAClD,MAAMC,KAAKF,YAAY,IAAI,CAACG,CAAAA,aAAcA,WAAW,IAAI,KAAKF;IAC9D,OAAOC,KAAK,WAALA,GAAK,oBAACE,WAASA;QAAC,KAAKF,GAAG,IAAI;SAAO;AAC9C;AAEA,MAAMG,gBAAgB;AAEf,MAAMC,mBAAmB,CAAC,EAC7BC,aAAa,EACbC,YAAY,EACZC,IAAI,EACJC,OAAO,EACa;IACpB,MAAM,EAAEP,UAAU,EAAEH,WAAW,EAAEW,gBAAgB,EAAE,GAAGC;IACtD,MAAMC,iBAAiBb,WAAW,CAAC,EAAE;IAErC,MAAMc,OAAOC,QAAQ;QACjB,MAAMb,KAAKK,iBAAiBM,eAAe,IAAI;QAC/C,OAAOd,kBAAkBC,aAAaE;IAC1C,GAAG;QAACK;QAAeJ,WAAW,IAAI;QAAEH,YAAY,MAAM;KAAC;IAEvD,IAAIW,kBACA,OAAO,WAAP,GAAO,oBAACK,oBAAkBA;QAAC,WAAW;QAAQ,MAAMP;;IAGxD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACQ,cAAYA;QACT,uBACI,oBAACC,MAAIA;YACD,MAAMJ;YACN,OAAM;YACN,MAAK;YACL,OAAON,eAAe,WAAW;YACjC,WAAWH;;QAGnB,OAAM;QACN,MAAK;QACL,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;qBAChD,oBAACc,eAAaA;QACV,eAAeZ,iBAAiBM,eAAe,IAAI;QACnD,cAAcL,eAAeL,WAAW,IAAI,GAAG;QAC/C,SAASO;wBAIrB,oBAACM,oBAAkBA;QAAC,WAAW;QAAQ,MAAMP;;AAGzD;AAQO,MAAMU,gBAAgB,CAAC,EAAEC,YAAY,EAAEb,aAAa,EAAEG,OAAO,EAAsB;IACtF,IAAIU,cACA,OAAO,WAAP,GACI,oBAAC,aAAI,8DAED,oBAACC,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,QAAMA;QAAC,SAAS;QAAW,SAASZ;QAAS,MAAM;QAAe,MAAM;sBACzE,oBAACW,WAASA;QAAC,SAAS;QAAU,QAAQ;QAAQ,6CACJ,mBAC1C,oBAACE,KAAGA;QAAC,SAAS;QAAiB,SAAShB;QAAiB;IAKrE,OAAO,WAAP,GACI,oBAACiB,MAAIA;QAAC,MAAM;OAAM,oCACmB,mBACjC,oBAACD,KAAGA;QAAC,SAAS;QAAiB,SAAShB;QAAiB;AAGrE"}

package/BaseEditor/defaultConfig/Sidebar/SidebarEmptyState.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const SidebarEmptyState: ({ message }: {
+    message: string;
+}) => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/SidebarEmptyState.js

@@ -0,0 +1,12 @@
+import react from "react";
+import { Text } from "@webiny/admin-ui";
+import { LayoutIllustration } from "../Toolbar/Navigator/LayoutIllustration.js";
+const SidebarEmptyState = ({ message })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center gap-md px-md text-center mt-[200px]"
+    }, /*#__PURE__*/ react.createElement(LayoutIllustration, null), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, message));
+export { SidebarEmptyState };
+
+//# sourceMappingURL=SidebarEmptyState.js.map