@webiny/app-website-builder 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.js

@@ -0,0 +1,45 @@
+import react, { useState } from "react";
+import { Collapsible } from "radix-ui";
+import { ReactComponent } from "@webiny/icons/keyboard_arrow_down.svg";
+import { Icon } from "@webiny/admin-ui";
+const StyleAccordionItem = ({ title, icon, defaultOpen = false, noPadding = false, children })=>{
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    return /*#__PURE__*/ react.createElement(Collapsible.Root, {
+        defaultOpen: defaultOpen,
+        onOpenChange: setIsOpen
+    }, /*#__PURE__*/ react.createElement(Collapsible.Trigger, {
+        asChild: true
+    }, /*#__PURE__*/ react.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        className: "w-full flex items-center justify-between py-sm px-sm cursor-pointer select-none rounded-lg " + (isOpen ? "" : "bg-neutral-subtle"),
+        onKeyDown: (e)=>{
+            if ("Enter" === e.key || " " === e.key) {
+                e.preventDefault();
+                e.currentTarget.click();
+            }
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm"
+    }, icon && /*#__PURE__*/ react.createElement(Icon, {
+        icon: icon,
+        label: title,
+        size: "md",
+        color: isOpen ? "accent" : "neutral-light"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text-md text-neutral-primary " + (isOpen ? "font-semibold" : "")
+    }, title)), /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Toggle",
+        size: "md",
+        color: "neutral-strong",
+        className: "transition-transform " + (isOpen ? "rotate-180" : "")
+    }))), /*#__PURE__*/ react.createElement(Collapsible.Content, {
+        className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: noPadding ? "px-sm pt-sm pb-lg" : "px-md pt-sm pb-lg"
+    }, children)));
+};
+export { StyleAccordionItem };
+
+//# sourceMappingURL=StyleAccordionItem.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Collapsible } from \"radix-ui\";\nimport { ReactComponent as ChevronIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { Icon } from \"@webiny/admin-ui\";\n\nexport interface StyleAccordionItemProps {\n    title: string;\n    icon?: React.ReactElement;\n    defaultOpen?: boolean;\n    noPadding?: boolean;\n    children: React.ReactNode;\n}\n\nexport const StyleAccordionItem = ({\n    title,\n    icon,\n    defaultOpen = false,\n    noPadding = false,\n    children\n}: StyleAccordionItemProps) => {\n    const [isOpen, setIsOpen] = useState(defaultOpen);\n\n    return (\n        <Collapsible.Root defaultOpen={defaultOpen} onOpenChange={setIsOpen}>\n            <Collapsible.Trigger asChild>\n                <div\n                    role=\"button\"\n                    tabIndex={0}\n                    className={\n                        \"w-full flex items-center justify-between py-sm px-sm cursor-pointer select-none rounded-lg \" +\n                        (isOpen ? \"\" : \"bg-neutral-subtle\")\n                    }\n                    onKeyDown={e => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            e.currentTarget.click();\n                        }\n                    }}\n                >\n                    <div className={\"flex items-center gap-sm\"}>\n                        {icon && (\n                            <Icon\n                                icon={icon}\n                                label={title}\n                                size={\"md\"}\n                                color={isOpen ? \"accent\" : \"neutral-light\"}\n                            />\n                        )}\n                        <span\n                            className={\n                                \"text-md text-neutral-primary \" + (isOpen ? \"font-semibold\" : \"\")\n                            }\n                        >\n                            {title}\n                        </span>\n                    </div>\n                    <Icon\n                        icon={<ChevronIcon />}\n                        label={\"Toggle\"}\n                        size={\"md\"}\n                        color={\"neutral-strong\"}\n                        className={\"transition-transform \" + (isOpen ? \"rotate-180\" : \"\")}\n                    />\n                </div>\n            </Collapsible.Trigger>\n            <Collapsible.Content\n                className={\n                    \"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\"\n                }\n            >\n                <div className={noPadding ? \"px-sm pt-sm pb-lg\" : \"px-md pt-sm pb-lg\"}>\n                    {children}\n                </div>\n            </Collapsible.Content>\n        </Collapsible.Root>\n    );\n};\n"],"names":["StyleAccordionItem","title","icon","defaultOpen","noPadding","children","isOpen","setIsOpen","useState","Collapsible","e","Icon","ChevronIcon"],"mappings":";;;;AAaO,MAAMA,qBAAqB,CAAC,EAC/BC,KAAK,EACLC,IAAI,EACJC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,QAAQ,EACc;IACtB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASL;IAErC,OAAO,WAAP,GACI,oBAACM,YAAY,IAAI;QAAC,aAAaN;QAAa,cAAcI;qBACtD,oBAACE,YAAY,OAAO;QAAC;qBACjB,oBAAC;QACG,MAAK;QACL,UAAU;QACV,WACI,gGACCH,CAAAA,SAAS,KAAK,mBAAkB;QAErC,WAAWI,CAAAA;YACP,IAAIA,AAAU,YAAVA,EAAE,GAAG,IAAgBA,AAAU,QAAVA,EAAE,GAAG,EAAU;gBACpCA,EAAE,cAAc;gBAChBA,EAAE,aAAa,CAAC,KAAK;YACzB;QACJ;qBAEA,oBAAC;QAAI,WAAW;OACXR,QAAQ,WAARA,GACG,oBAACS,MAAIA;QACD,MAAMT;QACN,OAAOD;QACP,MAAM;QACN,OAAOK,SAAS,WAAW;sBAGnC,oBAAC;QACG,WACI,kCAAmCA,CAAAA,SAAS,kBAAkB,EAAC;OAGlEL,SAAAA,WAAAA,GAGT,oBAACU,MAAIA;QACD,oBAAM,oBAACC,gBAAWA;QAClB,OAAO;QACP,MAAM;QACN,OAAO;QACP,WAAW,0BAA2BN,CAAAA,SAAS,eAAe,EAAC;wBAI3E,oBAACG,YAAY,OAAO;QAChB,WACI;qBAGJ,oBAAC;QAAI,WAAWL,YAAY,sBAAsB;OAC7CC;AAKrB"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js

@@ -1,6 +1,7 @@
-import React, { useCallback } from "react";
-import { Accordion } from "@webiny/admin-ui";
+import react, { useCallback } from "react";
+import { StyleAccordion } from "./StyleAccordion.js";
 import { useActiveElement } from "../../../hooks/useActiveElement.js";
+import { ElementPreview } from "../ElementPreview.js";
 import { Background } from "./Groups/Background.js";
 import { Border } from "./Groups/Border.js";
 import { MarginPadding } from "./Groups/MarginPadding.js";
@@ -8,35 +9,36 @@ import { VisibilityGroup } from "./Groups/VisibilityGroup.js";
 import { useElementComponentManifest } from "../../Content/Preview/useElementComponentManifest.js";
 import { StyleSettings } from "@webiny/website-builder-sdk";
 import { Layout } from "./Groups/Layout.js";
-export const StyleProperties = () => {
-  const [element] = useActiveElement();
-  if (!element) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(ElementStyleProperties, {
-    element: element
-  });
+const StyleProperties = ()=>{
+    const [element] = useActiveElement();
+    if (!element) return null;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "pt-md mb-md px-sm"
+    }, /*#__PURE__*/ react.createElement(ElementPreview, {
+        element: element
+    })), /*#__PURE__*/ react.createElement(ElementStyleProperties, {
+        element: element
+    }));
 };
 const defaultHidden = [];
-const ElementStyleProperties = ({
-  element
-}) => {
-  const componentManifest = useElementComponentManifest(element.id);
-  const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;
-  const isHidden = useCallback(name => {
-    return hideStyles.includes(name);
-  }, [hideStyles]);
-  return /*#__PURE__*/React.createElement(Accordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/React.createElement(Layout, {
-    elementId: element.id
-  }), isHidden(StyleSettings.MarginPadding) ? null : /*#__PURE__*/React.createElement(MarginPadding, {
-    elementId: element.id
-  }), isHidden(StyleSettings.Border) ? null : /*#__PURE__*/React.createElement(Border, {
-    elementId: element.id
-  }), isHidden(StyleSettings.Background) ? null : /*#__PURE__*/React.createElement(Background, {
-    elementId: element.id
-  }), isHidden(StyleSettings.Visibility) ? null : /*#__PURE__*/React.createElement(VisibilityGroup, {
-    elementId: element.id
-  }));
+const ElementStyleProperties = ({ element })=>{
+    const componentManifest = useElementComponentManifest(element.id);
+    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;
+    const isHidden = useCallback((name)=>hideStyles.includes(name), [
+        hideStyles
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(StyleAccordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/ react.createElement(Layout, {
+        elementId: element.id
+    }), isHidden(StyleSettings.MarginPadding) ? null : /*#__PURE__*/ react.createElement(MarginPadding, {
+        elementId: element.id
+    }), isHidden(StyleSettings.Border) ? null : /*#__PURE__*/ react.createElement(Border, {
+        elementId: element.id
+    }), isHidden(StyleSettings.Background) ? null : /*#__PURE__*/ react.createElement(Background, {
+        elementId: element.id
+    }), isHidden(StyleSettings.Visibility) ? null : /*#__PURE__*/ react.createElement(VisibilityGroup, {
+        elementId: element.id
+    })));
 };
+export { StyleProperties };
 
 //# sourceMappingURL=StyleProperties.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","Accordion","useActiveElement","Background","Border","MarginPadding","VisibilityGroup","useElementComponentManifest","StyleSettings","Layout","StyleProperties","element","createElement","ElementStyleProperties","defaultHidden","componentManifest","id","hideStyles","hideStyleSettings","isHidden","name","includes","elementId","Visibility"],"sources":["StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { Background } from \"./Groups/Background.js\";\nimport { Border } from \"./Groups/Border.js\";\nimport { MarginPadding } from \"./Groups/MarginPadding.js\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout.js\";\n\nexport const StyleProperties = () => {\n    const [element] = useActiveElement();\n    if (!element) {\n        return null;\n    }\n\n    return <ElementStyleProperties element={element} />;\n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n    const componentManifest = useElementComponentManifest(element.id);\n    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n    const isHidden = useCallback(\n        (name: string) => {\n            return hideStyles.includes(name);\n        },\n        [hideStyles]\n    );\n\n    return (\n        <Accordion>\n            {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n            {isHidden(StyleSettings.MarginPadding) ? null : (\n                <MarginPadding elementId={element.id} />\n            )}\n            {isHidden(StyleSettings.Border) ? null : <Border elementId={element.id} />}\n            {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n            {isHidden(StyleSettings.Visibility) ? null : <VisibilityGroup elementId={element.id} />}\n        </Accordion>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,gBAAgB;AAEzB,SAASC,UAAU;AACnB,SAASC,MAAM;AACf,SAASC,aAAa;AACtB,SAASC,eAAe;AACxB,SAASC,2BAA2B;AACpC,SAASC,aAAa,QAAQ,6BAA6B;AAC3D,SAASC,MAAM;AAEf,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,OAAO,CAAC,GAAGT,gBAAgB,CAAC,CAAC;EACpC,IAAI,CAACS,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,oBAAOZ,KAAA,CAAAa,aAAA,CAACC,sBAAsB;IAACF,OAAO,EAAEA;EAAQ,CAAE,CAAC;AACvD,CAAC;AAED,MAAMG,aAAuB,GAAG,EAAE;AAElC,MAAMD,sBAAsB,GAAGA,CAAC;EAAEF;AAAsC,CAAC,KAAK;EAC1E,MAAMI,iBAAiB,GAAGR,2BAA2B,CAACI,OAAO,CAACK,EAAE,CAAC;EACjE,MAAMC,UAAU,GAAGF,iBAAiB,EAAEG,iBAAiB,IAAIJ,aAAa;EAExE,MAAMK,QAAQ,GAAGnB,WAAW,CACvBoB,IAAY,IAAK;IACd,OAAOH,UAAU,CAACI,QAAQ,CAACD,IAAI,CAAC;EACpC,CAAC,EACD,CAACH,UAAU,CACf,CAAC;EAED,oBACIlB,KAAA,CAAAa,aAAA,CAACX,SAAS,QACLkB,QAAQ,CAACX,aAAa,CAACC,MAAM,CAAC,GAAG,IAAI,gBAAGV,KAAA,CAAAa,aAAA,CAACH,MAAM;IAACa,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACzEG,QAAQ,CAACX,aAAa,CAACH,aAAa,CAAC,GAAG,IAAI,gBACzCN,KAAA,CAAAa,aAAA,CAACP,aAAa;IAACiB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAC1C,EACAG,QAAQ,CAACX,aAAa,CAACJ,MAAM,CAAC,GAAG,IAAI,gBAAGL,KAAA,CAAAa,aAAA,CAACR,MAAM;IAACkB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACzEG,QAAQ,CAACX,aAAa,CAACL,UAAU,CAAC,GAAG,IAAI,gBAAGJ,KAAA,CAAAa,aAAA,CAACT,UAAU;IAACmB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACjFG,QAAQ,CAACX,aAAa,CAACe,UAAU,CAAC,GAAG,IAAI,gBAAGxB,KAAA,CAAAa,aAAA,CAACN,eAAe;IAACgB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAC/E,CAAC;AAEpB,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { StyleAccordion } from \"./StyleAccordion.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { ElementPreview } from \"~/BaseEditor/defaultConfig/Sidebar/ElementPreview.js\";\nimport { Background } from \"./Groups/Background.js\";\nimport { Border } from \"./Groups/Border.js\";\nimport { MarginPadding } from \"./Groups/MarginPadding.js\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout.js\";\n\nexport const StyleProperties = () => {\n    const [element] = useActiveElement();\n    if (!element) {\n        return null;\n    }\n\n    return (\n        <>\n            <div className={\"pt-md mb-md px-sm\"}>\n                <ElementPreview element={element} />\n            </div>\n            <ElementStyleProperties element={element} />\n        </>\n    );\n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n    const componentManifest = useElementComponentManifest(element.id);\n    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n    const isHidden = useCallback(\n        (name: string) => {\n            return hideStyles.includes(name);\n        },\n        [hideStyles]\n    );\n\n    return (\n        <>\n            <StyleAccordion>\n                {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n                {isHidden(StyleSettings.MarginPadding) ? null : (\n                    <MarginPadding elementId={element.id} />\n                )}\n                {isHidden(StyleSettings.Border) ? null : <Border elementId={element.id} />}\n                {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n                {isHidden(StyleSettings.Visibility) ? null : (\n                    <VisibilityGroup elementId={element.id} />\n                )}\n            </StyleAccordion>\n        </>\n    );\n};\n"],"names":["StyleProperties","element","useActiveElement","ElementPreview","ElementStyleProperties","defaultHidden","componentManifest","useElementComponentManifest","hideStyles","isHidden","useCallback","name","StyleAccordion","StyleSettings","Layout","MarginPadding","Border","Background","VisibilityGroup"],"mappings":";;;;;;;;;;;AAaO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAClB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,gBAAcA;QAAC,SAASF;uBAE7B,oBAACG,wBAAsBA;QAAC,SAASH;;AAG7C;AAEA,MAAMI,gBAA0B,EAAE;AAElC,MAAMD,yBAAyB,CAAC,EAAEH,OAAO,EAAgC;IACrE,MAAMK,oBAAoBC,4BAA4BN,QAAQ,EAAE;IAChE,MAAMO,aAAaF,mBAAmB,qBAAqBD;IAE3D,MAAMI,WAAWC,YACb,CAACC,OACUH,WAAW,QAAQ,CAACG,OAE/B;QAACH;KAAW;IAGhB,OAAO,WAAP,GACI,wDACI,oBAACI,gBAAcA,MACVH,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACC,QAAMA;QAAC,WAAWb,QAAQ,EAAE;QACrEQ,SAASI,cAAc,aAAa,IAAI,OAAO,WAAP,GACrC,oBAACE,eAAaA;QAAC,WAAWd,QAAQ,EAAE;QAEvCQ,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACG,QAAMA;QAAC,WAAWf,QAAQ,EAAE;QACrEQ,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACI,YAAUA;QAAC,WAAWhB,QAAQ,EAAE;QAC7EQ,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAClC,oBAACK,iBAAeA;QAAC,WAAWjB,QAAQ,EAAE;;AAK1D"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js

@@ -1,19 +1,21 @@
-import React from "react";
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/select_all.svg";
 import { Sidebar } from "../../../config/Sidebar/Sidebar.js";
 import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
-import { useActiveElement } from "../../../hooks/useActiveElement.js";
-export const StyleSettingsGroup = () => {
-  const [element] = useActiveElement();
-  return /*#__PURE__*/React.createElement(ScrollableContainer, {
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(Sidebar.Group.Tab, {
-    name: "style",
-    label: "Style",
-    element: /*#__PURE__*/React.createElement(Sidebar.Elements, {
-      group: "style"
-    }),
-    noPadding: element ? true : false
-  }));
-};
+const StyleSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableContainer, {
+        tabIndex: -1
+    }, /*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
+        name: "style",
+        label: "Style",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Style"
+        }),
+        element: /*#__PURE__*/ react.createElement(Sidebar.Elements, {
+            group: "style"
+        })
+    }));
+export { StyleSettingsGroup };
 
 //# sourceMappingURL=StyleSettingsGroup.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Sidebar","ScrollableContainer","useActiveElement","StyleSettingsGroup","element","createElement","tabIndex","Group","Tab","name","label","Elements","group","noPadding"],"sources":["StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\n\nexport const StyleSettingsGroup = () => {\n    const [element] = useActiveElement();\n\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"style\"}\n                label={\"Style\"}\n                element={<Sidebar.Elements group={\"style\"} />}\n                noPadding={element ? true : false}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,mBAAmB;AAC5B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM,CAACC,OAAO,CAAC,GAAGF,gBAAgB,CAAC,CAAC;EAEpC,oBACIH,KAAA,CAAAM,aAAA,CAACJ,mBAAmB;IAACK,QAAQ,EAAE,CAAC;EAAE,gBAC9BP,KAAA,CAAAM,aAAA,CAACL,OAAO,CAACO,KAAK,CAACC,GAAG;IACdC,IAAI,EAAE,OAAQ;IACdC,KAAK,EAAE,OAAQ;IACfN,OAAO,eAAEL,KAAA,CAAAM,aAAA,CAACL,OAAO,CAACW,QAAQ;MAACC,KAAK,EAAE;IAAQ,CAAE,CAAE;IAC9CC,SAAS,EAAET,OAAO,GAAG,IAAI,GAAG;EAAM,CACrC,CACgB,CAAC;AAE9B,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as SelectAllIcon } from \"@webiny/icons/select_all.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\n\nexport const StyleSettingsGroup = () => {\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"style\"}\n                label={\"Style\"}\n                icon={<Icon icon={<SelectAllIcon />} label={\"Style\"} />}\n                element={<Sidebar.Elements group={\"style\"} />}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"names":["StyleSettingsGroup","ScrollableContainer","Sidebar","Icon","SelectAllIcon"],"mappings":";;;;;AAMO,MAAMA,qBAAqB,IACvB,WAAP,GACI,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAaA;YAAK,OAAO;;QAC5C,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.d.ts

@@ -1,8 +1,11 @@
 import type { IMetadata } from "../../../../BaseEditor/metadata/index.js";
 import type { Editor } from "../../../../editorSdk/Editor.js";
 import { type InheritanceInfo } from "@webiny/website-builder-sdk";
+import { type TokenReference } from "@webiny/website-builder-sdk";
 export type ElementBreakpointStyles = {
     styles: Record<string, any>;
+    /** Which CSS properties are bound to a design token rather than a literal. */
+    tokens: Record<string, TokenReference>;
     metadata: IMetadata;
     inheritanceMap: InheritanceInfo["styles"];
 };
@@ -13,6 +16,7 @@ export declare class StylesStore {
     private stylesProcessor;
     private elementMetadata;
     private devFriendlyStyles;
+    private tokenBindings;
     private localPreviewStyles;
     private currentBreakpoint;
     private inheritanceMap;
@@ -33,8 +37,20 @@ export declare class StylesStore {
 }
 export declare class StylesValueObject {
     private readonly value;
-    constructor(value?: any);
+    private readonly tokens;
+    constructor(value?: any, tokens?: Record<string, TokenReference>);
+    /**
+     * Sets a literal. This also clears any token binding on the same property: picking a free
+     * colour is how you stop following a token.
+     */
     set(key: string, value: any): void;
+    /**
+     * Binds a property to a design token. The resolved value is stored too, so the editor preview
+     * renders and the reference carries a fallback for when no theme is active.
+     */
+    setToken(key: string, token: TokenReference, resolvedValue: string): void;
+    getToken(key: string): TokenReference | undefined;
+    getTokens(): Record<string, TokenReference>;
     get(key: string): any;
     getAll(): Record<string, any>;
     unset(key: string): void;

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js

@@ -1,112 +1,124 @@
-import { StylesBindingsProcessor } from "@webiny/website-builder-sdk";
+import { BindingsProcessor, ComponentManifestToAstConverter, InheritanceProcessor, StylesBindingsProcessor } from "@webiny/website-builder-sdk";
 import { BreakpointElementMetadata, ElementMetadata, NullMetadata, StylesMetadata } from "../../../metadata/index.js";
 import { Commands } from "../../../index.js";
-import { autorun, makeAutoObservable, runInAction } from "mobx";
-import { InheritanceProcessor } from "@webiny/website-builder-sdk";
-import { BindingsProcessor } from "@webiny/website-builder-sdk";
+import { autorun, makeAutoObservable, runInAction, toJS } from "mobx";
 import { $getComponentManifestByElementId } from "../../../../editorSdk/utils/index.js";
-import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
 import { BASE_BREAKPOINT } from "../../../../constants.js";
-export class StylesStore {
-  elementMetadata = new NullMetadata();
-  devFriendlyStyles = {};
-  localPreviewStyles = undefined;
-  inheritanceMap = {};
-  rawBindings = {};
-  constructor(editor, elementId, breakpointNames) {
-    this.editor = editor;
-    this.elementId = elementId;
-    this.breakpointNames = breakpointNames;
-    const manifest = $getComponentManifestByElementId(editor, elementId ?? "");
-    const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);
-    this.bindingsProcessor = new BindingsProcessor(breakpointNames);
-    this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);
-    const document = this.editor.getDocumentState().read();
-    const editorState = this.editor.getEditorState().read();
-    const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
-    this.currentBreakpoint = breakpoint;
-
-    // Initial setup.
-    this.calculateStuff(document, breakpoint);
-    autorun(() => {
-      const document = this.editor.getDocumentState().read();
-      const editorState = this.editor.getEditorState().read();
-      const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
-      runInAction(() => {
+class StylesStore {
+    constructor(editor, elementId, breakpointNames){
+        this.elementMetadata = new NullMetadata();
+        this.devFriendlyStyles = {};
+        this.tokenBindings = {};
+        this.localPreviewStyles = void 0;
+        this.inheritanceMap = {};
+        this.rawBindings = {};
+        this.onChange = (cb)=>{
+            if (!this.stylesProcessor) return;
+            const styles = new StylesValueObject(this.devFriendlyStyles, {
+                ...this.tokenBindings
+            });
+            cb({
+                styles,
+                metadata: this.elementMetadata
+            });
+            const finalStyles = styles.getAll();
+            const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint, styles.getTokens());
+            this.editor.updateDocument((document)=>{
+                updatedStyles.applyToDocument(document);
+                this.elementMetadata.applyToDocument(document);
+            });
+            this.localPreviewStyles = void 0;
+        };
+        this.onPreviewChange = (cb)=>{
+            if (!this.stylesProcessor) return;
+            const styles = new StylesValueObject(structuredClone(toJS(this.devFriendlyStyles)), {
+                ...this.tokenBindings
+            });
+            cb({
+                styles,
+                metadata: this.elementMetadata
+            });
+            const finalStyles = styles.getAll();
+            this.localPreviewStyles = finalStyles;
+            const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint, styles.getTokens());
+            this.editor.executeCommand(Commands.PreviewPatchElement, {
+                elementId: this.elementId,
+                patch: updatedStyles.createJsonPatch(this.rawBindings)
+            });
+        };
+        this.editor = editor;
+        this.elementId = elementId;
+        this.breakpointNames = breakpointNames;
+        const manifest = $getComponentManifestByElementId(editor, elementId ?? "");
+        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);
+        this.bindingsProcessor = new BindingsProcessor(breakpointNames);
+        this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);
+        const document = this.editor.getDocumentState().read();
+        const editorState = this.editor.getEditorState().read();
+        const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
         this.currentBreakpoint = breakpoint;
         this.calculateStuff(document, breakpoint);
-      });
-    });
-    makeAutoObservable(this);
-  }
-  get vm() {
-    return {
-      styles: this.localPreviewStyles ?? this.devFriendlyStyles,
-      metadata: this.elementMetadata,
-      inheritanceMap: this.inheritanceMap
-    };
-  }
-  onChange = cb => {
-    if (!this.stylesProcessor) {
-      return;
+        autorun(()=>{
+            const document = this.editor.getDocumentState().read();
+            const editorState = this.editor.getEditorState().read();
+            const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
+            runInAction(()=>{
+                this.currentBreakpoint = breakpoint;
+                this.calculateStuff(document, breakpoint);
+            });
+        });
+        makeAutoObservable(this);
+    }
+    get vm() {
+        return {
+            styles: this.localPreviewStyles ?? this.devFriendlyStyles,
+            tokens: this.tokenBindings,
+            metadata: this.elementMetadata,
+            inheritanceMap: this.inheritanceMap
+        };
     }
-    const styles = new StylesValueObject(this.devFriendlyStyles);
-    cb({
-      styles,
-      metadata: this.elementMetadata
-    });
-    const finalStyles = styles.getAll();
-    const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint);
-    this.editor.updateDocument(document => {
-      updatedStyles.applyToDocument(document);
-      this.elementMetadata.applyToDocument(document);
-    });
-    this.localPreviewStyles = undefined;
-  };
-  onPreviewChange = cb => {
-    if (!this.stylesProcessor) {
-      return;
+    calculateStuff(document, breakpoint) {
+        const bindings = document.bindings[this.elementId] ?? {};
+        this.rawBindings = bindings;
+        const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);
+        const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);
+        this.inheritanceMap = inheritanceMap.styles;
+        this.stylesProcessor = new StylesBindingsProcessor(this.elementId, this.breakpointNames, bindings);
+        this.elementMetadata = new StylesMetadata(new BreakpointElementMetadata(this.breakpointNames, breakpoint, new ElementMetadata(this.elementId, bindings.metadata)));
+        this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);
+        this.tokenBindings = this.stylesProcessor.toTokenMap(resolvedBindings.styles);
     }
-    const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));
-    cb({
-      styles,
-      metadata: this.elementMetadata
-    });
-    const finalStyles = styles.getAll();
-    this.localPreviewStyles = finalStyles;
-    const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint);
-    this.editor.executeCommand(Commands.PreviewPatchElement, {
-      elementId: this.elementId,
-      patch: updatedStyles.createJsonPatch(this.rawBindings)
-    });
-  };
-  calculateStuff(document, breakpoint) {
-    const bindings = document.bindings[this.elementId] ?? {};
-    this.rawBindings = bindings;
-    const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);
-    const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);
-    this.inheritanceMap = inheritanceMap.styles;
-    this.stylesProcessor = new StylesBindingsProcessor(this.elementId, this.breakpointNames, bindings);
-    this.elementMetadata = new StylesMetadata(new BreakpointElementMetadata(this.breakpointNames, breakpoint, new ElementMetadata(this.elementId, bindings.metadata)));
-    this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);
-  }
 }
-export class StylesValueObject {
-  constructor(value = {}) {
-    this.value = value;
-  }
-  set(key, value) {
-    this.value[key] = value;
-  }
-  get(key) {
-    return this.value[key];
-  }
-  getAll() {
-    return this.value;
-  }
-  unset(key) {
-    delete this.value[key];
-  }
+class StylesValueObject {
+    constructor(value = {}, tokens = {}){
+        this.value = value;
+        this.tokens = tokens;
+    }
+    set(key, value) {
+        this.value[key] = value;
+        delete this.tokens[key];
+    }
+    setToken(key, token, resolvedValue) {
+        this.value[key] = resolvedValue;
+        this.tokens[key] = token;
+    }
+    getToken(key) {
+        return this.tokens[key];
+    }
+    getTokens() {
+        return this.tokens;
+    }
+    get(key) {
+        return this.value[key];
+    }
+    getAll() {
+        return this.value;
+    }
+    unset(key) {
+        delete this.value[key];
+        delete this.tokens[key];
+    }
 }
+export { StylesStore, StylesValueObject };
 
 //# sourceMappingURL=StylesStore.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js.map

@@ -1 +1 @@
-{"version":3,"names":["StylesBindingsProcessor","BreakpointElementMetadata","ElementMetadata","NullMetadata","StylesMetadata","Commands","autorun","makeAutoObservable","runInAction","InheritanceProcessor","BindingsProcessor","$getComponentManifestByElementId","ComponentManifestToAstConverter","BASE_BREAKPOINT","StylesStore","elementMetadata","devFriendlyStyles","localPreviewStyles","undefined","inheritanceMap","rawBindings","constructor","editor","elementId","breakpointNames","manifest","inputsAst","convert","inputs","bindingsProcessor","inheritanceProcessor","document","getDocumentState","read","editorState","getEditorState","breakpoint","currentBreakpoint","calculateStuff","vm","styles","metadata","onChange","cb","stylesProcessor","StylesValueObject","finalStyles","getAll","updatedStyles","createUpdate","updateDocument","applyToDocument","onPreviewChange","structuredClone","executeCommand","PreviewPatchElement","patch","createJsonPatch","bindings","resolvedBindings","getBindings","getInheritanceMap","toDeepStyles","value","set","key","get","unset"],"sources":["StylesStore.ts"],"sourcesContent":["import type { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    NullMetadata,\n    StylesMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { autorun, makeAutoObservable, runInAction } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"@webiny/website-builder-sdk\";\nimport {\n    BindingsProcessor,\n    type DocumentElementBindings,\n    type Document\n} from \"@webiny/website-builder-sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\n\nexport type ElementBreakpointStyles = {\n    styles: Record<string, any>;\n    metadata: IMetadata;\n    inheritanceMap: InheritanceInfo[\"styles\"];\n};\n\nexport class StylesStore {\n    private editor: ReturnType<typeof useDocumentEditor>;\n    private elementId: string;\n    private breakpointNames: string[];\n    private stylesProcessor: StylesBindingsProcessor | undefined;\n    private elementMetadata: IMetadata = new NullMetadata();\n    private devFriendlyStyles: Record<string, any> = {};\n    private localPreviewStyles: Record<string, any> | undefined = undefined;\n    private currentBreakpoint: string;\n    private inheritanceMap: InheritanceInfo[\"styles\"] = {};\n    private rawBindings: DocumentElementBindings = {};\n    private bindingsProcessor: BindingsProcessor;\n    private inheritanceProcessor: InheritanceProcessor;\n    constructor(editor: Editor, elementId: string, breakpointNames: string[]) {\n        this.editor = editor;\n        this.elementId = elementId;\n        this.breakpointNames = breakpointNames;\n\n        const manifest = $getComponentManifestByElementId(editor, elementId ?? \"\");\n        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);\n\n        this.bindingsProcessor = new BindingsProcessor(breakpointNames);\n        this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n        const document = this.editor.getDocumentState().read();\n        const editorState = this.editor.getEditorState().read();\n        const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n        this.currentBreakpoint = breakpoint;\n\n        // Initial setup.\n        this.calculateStuff(document, breakpoint);\n\n        autorun(() => {\n            const document = this.editor.getDocumentState().read();\n            const editorState = this.editor.getEditorState().read();\n            const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n\n            runInAction(() => {\n                this.currentBreakpoint = breakpoint;\n                this.calculateStuff(document, breakpoint);\n            });\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): ElementBreakpointStyles {\n        return {\n            styles: this.localPreviewStyles ?? this.devFriendlyStyles,\n            metadata: this.elementMetadata,\n            inheritanceMap: this.inheritanceMap\n        };\n    }\n\n    onChange = (cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(this.devFriendlyStyles);\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.updateDocument(document => {\n            updatedStyles.applyToDocument(document);\n            this.elementMetadata.applyToDocument(document);\n        });\n\n        this.localPreviewStyles = undefined;\n    };\n\n    onPreviewChange = (\n        cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void\n    ) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));\n\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        this.localPreviewStyles = finalStyles;\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.executeCommand(Commands.PreviewPatchElement, {\n            elementId: this.elementId,\n            patch: updatedStyles.createJsonPatch(this.rawBindings)\n        });\n    };\n\n    private calculateStuff(document: Document, breakpoint: string) {\n        const bindings = document.bindings[this.elementId] ?? {};\n\n        this.rawBindings = bindings;\n        const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);\n\n        const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);\n\n        this.inheritanceMap = inheritanceMap.styles;\n\n        this.stylesProcessor = new StylesBindingsProcessor(\n            this.elementId,\n            this.breakpointNames,\n            bindings\n        );\n\n        this.elementMetadata = new StylesMetadata(\n            new BreakpointElementMetadata(\n                this.breakpointNames,\n                breakpoint,\n                new ElementMetadata(this.elementId, bindings.metadata)\n            )\n        );\n\n        this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);\n    }\n}\n\nexport class StylesValueObject {\n    private readonly value: Record<string, any>;\n\n    constructor(value: any = {}) {\n        this.value = value;\n    }\n\n    set(key: string, value: any) {\n        this.value[key] = value;\n    }\n\n    get(key: string) {\n        return this.value[key];\n    }\n\n    getAll() {\n        return this.value;\n    }\n\n    unset(key: string) {\n        delete this.value[key];\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.ts"],"sourcesContent":["import type { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    NullMetadata,\n    StylesMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { autorun, makeAutoObservable, runInAction, toJS } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"@webiny/website-builder-sdk\";\nimport {\n    BindingsProcessor,\n    type DocumentElementBindings,\n    type Document,\n    type TokenReference\n} from \"@webiny/website-builder-sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\n\nexport type ElementBreakpointStyles = {\n    styles: Record<string, any>;\n    /** Which CSS properties are bound to a design token rather than a literal. */\n    tokens: Record<string, TokenReference>;\n    metadata: IMetadata;\n    inheritanceMap: InheritanceInfo[\"styles\"];\n};\n\nexport class StylesStore {\n    private editor: ReturnType<typeof useDocumentEditor>;\n    private elementId: string;\n    private breakpointNames: string[];\n    private stylesProcessor: StylesBindingsProcessor | undefined;\n    private elementMetadata: IMetadata = new NullMetadata();\n    private devFriendlyStyles: Record<string, any> = {};\n    private tokenBindings: Record<string, TokenReference> = {};\n    private localPreviewStyles: Record<string, any> | undefined = undefined;\n    private currentBreakpoint: string;\n    private inheritanceMap: InheritanceInfo[\"styles\"] = {};\n    private rawBindings: DocumentElementBindings = {};\n    private bindingsProcessor: BindingsProcessor;\n    private inheritanceProcessor: InheritanceProcessor;\n    constructor(editor: Editor, elementId: string, breakpointNames: string[]) {\n        this.editor = editor;\n        this.elementId = elementId;\n        this.breakpointNames = breakpointNames;\n\n        const manifest = $getComponentManifestByElementId(editor, elementId ?? \"\");\n        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);\n\n        this.bindingsProcessor = new BindingsProcessor(breakpointNames);\n        this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n        const document = this.editor.getDocumentState().read();\n        const editorState = this.editor.getEditorState().read();\n        const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n        this.currentBreakpoint = breakpoint;\n\n        // Initial setup.\n        this.calculateStuff(document, breakpoint);\n\n        autorun(() => {\n            const document = this.editor.getDocumentState().read();\n            const editorState = this.editor.getEditorState().read();\n            const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n\n            runInAction(() => {\n                this.currentBreakpoint = breakpoint;\n                this.calculateStuff(document, breakpoint);\n            });\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): ElementBreakpointStyles {\n        return {\n            styles: this.localPreviewStyles ?? this.devFriendlyStyles,\n            tokens: this.tokenBindings,\n            metadata: this.elementMetadata,\n            inheritanceMap: this.inheritanceMap\n        };\n    }\n\n    onChange = (cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(this.devFriendlyStyles, { ...this.tokenBindings });\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint,\n            styles.getTokens()\n        );\n\n        this.editor.updateDocument(document => {\n            updatedStyles.applyToDocument(document);\n            this.elementMetadata.applyToDocument(document);\n        });\n\n        this.localPreviewStyles = undefined;\n    };\n\n    onPreviewChange = (\n        cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void\n    ) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(structuredClone(toJS(this.devFriendlyStyles)), {\n            ...this.tokenBindings\n        });\n\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        this.localPreviewStyles = finalStyles;\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint,\n            styles.getTokens()\n        );\n\n        this.editor.executeCommand(Commands.PreviewPatchElement, {\n            elementId: this.elementId,\n            patch: updatedStyles.createJsonPatch(this.rawBindings)\n        });\n    };\n\n    private calculateStuff(document: Document, breakpoint: string) {\n        const bindings = document.bindings[this.elementId] ?? {};\n\n        this.rawBindings = bindings;\n        const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);\n\n        const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);\n\n        this.inheritanceMap = inheritanceMap.styles;\n\n        this.stylesProcessor = new StylesBindingsProcessor(\n            this.elementId,\n            this.breakpointNames,\n            bindings\n        );\n\n        this.elementMetadata = new StylesMetadata(\n            new BreakpointElementMetadata(\n                this.breakpointNames,\n                breakpoint,\n                new ElementMetadata(this.elementId, bindings.metadata)\n            )\n        );\n\n        this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);\n        this.tokenBindings = this.stylesProcessor.toTokenMap(resolvedBindings.styles);\n    }\n}\n\nexport class StylesValueObject {\n    private readonly value: Record<string, any>;\n    private readonly tokens: Record<string, TokenReference>;\n\n    constructor(value: any = {}, tokens: Record<string, TokenReference> = {}) {\n        this.value = value;\n        this.tokens = tokens;\n    }\n\n    /**\n     * Sets a literal. This also clears any token binding on the same property: picking a free\n     * colour is how you stop following a token.\n     */\n    set(key: string, value: any) {\n        this.value[key] = value;\n        delete this.tokens[key];\n    }\n\n    /**\n     * Binds a property to a design token. The resolved value is stored too, so the editor preview\n     * renders and the reference carries a fallback for when no theme is active.\n     */\n    setToken(key: string, token: TokenReference, resolvedValue: string) {\n        this.value[key] = resolvedValue;\n        this.tokens[key] = token;\n    }\n\n    getToken(key: string): TokenReference | undefined {\n        return this.tokens[key];\n    }\n\n    getTokens() {\n        return this.tokens;\n    }\n\n    get(key: string) {\n        return this.value[key];\n    }\n\n    getAll() {\n        return this.value;\n    }\n\n    unset(key: string) {\n        delete this.value[key];\n        delete this.tokens[key];\n    }\n}\n"],"names":["StylesStore","editor","elementId","breakpointNames","NullMetadata","undefined","cb","styles","StylesValueObject","finalStyles","updatedStyles","document","structuredClone","toJS","Commands","manifest","$getComponentManifestByElementId","inputsAst","ComponentManifestToAstConverter","BindingsProcessor","InheritanceProcessor","editorState","breakpoint","BASE_BREAKPOINT","autorun","runInAction","makeAutoObservable","bindings","resolvedBindings","inheritanceMap","StylesBindingsProcessor","StylesMetadata","BreakpointElementMetadata","ElementMetadata","value","tokens","key","token","resolvedValue"],"mappings":"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"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValue.js

@@ -1,41 +1,41 @@
-export class UnitValue {
-  keywords = ["auto", "unset", "inherit"];
-  constructor(valueWithUnit = "") {
-    const [, value, unit = "px"] = valueWithUnit.match(/(\d+)?(\S+)?/) ?? [];
-    if (this.isAKeyword(unit)) {
-      this.value = unit;
-    } else {
-      this.value = value;
-    }
-    this.unit = unit;
-  }
-  static from(value) {
-    return new UnitValue(value);
-  }
-  static isKeyword(unit) {
-    return new UnitValue(unit).isKeyword();
-  }
-  isKeyword() {
-    return this.keywords.includes(String(this.value));
-  }
-  getValue(defaultValue) {
-    return this.value ? this.value.toString() : defaultValue ?? "";
-  }
-  setUnit(unit) {
-    if (this.isKeyword()) {
-      this.value = "0";
-    }
-    this.unit = unit;
-  }
-  getUnit() {
-    return this.unit;
-  }
-  toString() {
-    return `${this.value}${this.unit}`;
-  }
-  isAKeyword(str) {
-    return this.keywords.includes(str);
-  }
+class UnitValue {
+    constructor(valueWithUnit = ""){
+        this.keywords = [
+            "auto",
+            "unset",
+            "inherit"
+        ];
+        const [, value, unit = "px"] = valueWithUnit.match(/(\d+)?(\S+)?/) ?? [];
+        if (this.isAKeyword(unit)) this.value = unit;
+        else this.value = value;
+        this.unit = unit;
+    }
+    static from(value) {
+        return new UnitValue(value);
+    }
+    static isKeyword(unit) {
+        return new UnitValue(unit).isKeyword();
+    }
+    isKeyword() {
+        return this.keywords.includes(String(this.value));
+    }
+    getValue(defaultValue) {
+        return this.value ? this.value.toString() : defaultValue ?? "";
+    }
+    setUnit(unit) {
+        if (this.isKeyword()) this.value = "0";
+        this.unit = unit;
+    }
+    getUnit() {
+        return this.unit;
+    }
+    toString() {
+        return `${this.value}${this.unit}`;
+    }
+    isAKeyword(str) {
+        return this.keywords.includes(str);
+    }
 }
+export { UnitValue };
 
 //# sourceMappingURL=UnitValue.js.map