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

package/PreviewSdk.d.ts

@@ -2,7 +2,8 @@ import type { IContentSdk, IDataProvider, ListPagesOptions, ListPagesResult, Pub
 export declare class PreviewSdk implements IContentSdk {
     private liveSdk;
     private dataProvider;
-    constructor(dataProvider: IDataProvider, liveSdk: IContentSdk);
+    private previewParams;
+    constructor(dataProvider: IDataProvider, liveSdk: IContentSdk, previewParams?: string);
     getPage(path: string): Promise<PublicPage | null>;
     listPages(options?: ListPagesOptions): Promise<ListPagesResult>;
 }

package/PreviewSdk.js

@@ -1,22 +1,24 @@
 import { PreviewDocument } from "./PreviewDocument.js";
-export class PreviewSdk {
-  constructor(dataProvider, liveSdk) {
-    this.liveSdk = liveSdk;
-    this.dataProvider = dataProvider;
-  }
-  async getPage(path) {
-    const previewDocument = await PreviewDocument.createFromHeaders();
-    if (!previewDocument.matches({
-      type: "page",
-      path
-    })) {
-      return this.liveSdk.getPage(path);
+import { environment } from "./Environment.js";
+class PreviewSdk {
+    constructor(dataProvider, liveSdk, previewParams){
+        this.liveSdk = liveSdk;
+        this.dataProvider = dataProvider;
+        this.previewParams = previewParams;
+    }
+    async getPage(path) {
+        let previewDocument;
+        previewDocument = this.previewParams ? PreviewDocument.createFromParams(this.previewParams) : environment.isClient() ? PreviewDocument.createFromWindow() : await PreviewDocument.createFromHeaders();
+        if (!previewDocument.matches({
+            type: "page",
+            path
+        })) return this.liveSdk.getPage(path);
+        return this.dataProvider.getPageById(previewDocument.getId());
+    }
+    async listPages(options) {
+        return this.liveSdk.listPages(options);
     }
-    return this.dataProvider.getPageById(previewDocument.getId());
-  }
-  async listPages(options) {
-    return this.liveSdk.listPages(options);
-  }
 }
+export { PreviewSdk };
 
 //# sourceMappingURL=PreviewSdk.js.map

package/PreviewSdk.js.map

@@ -1 +1 @@
-{"version":3,"names":["PreviewDocument","PreviewSdk","constructor","dataProvider","liveSdk","getPage","path","previewDocument","createFromHeaders","matches","type","getPageById","getId","listPages","options"],"sources":["PreviewSdk.ts"],"sourcesContent":["import type {\n    IContentSdk,\n    IDataProvider,\n    ListPagesOptions,\n    ListPagesResult,\n    PublicPage\n} from \"~/types.js\";\nimport { PreviewDocument } from \"~/PreviewDocument.js\";\n\nexport class PreviewSdk implements IContentSdk {\n    private liveSdk: IContentSdk;\n    private dataProvider: IDataProvider;\n\n    constructor(dataProvider: IDataProvider, liveSdk: IContentSdk) {\n        this.liveSdk = liveSdk;\n        this.dataProvider = dataProvider;\n    }\n\n    async getPage(path: string): Promise<PublicPage | null> {\n        const previewDocument = await PreviewDocument.createFromHeaders();\n        if (!previewDocument.matches({ type: \"page\", path })) {\n            return this.liveSdk.getPage(path);\n        }\n        return this.dataProvider.getPageById(previewDocument.getId());\n    }\n\n    async listPages(options?: ListPagesOptions): Promise<ListPagesResult> {\n        return this.liveSdk.listPages(options);\n    }\n}\n"],"mappings":"AAOA,SAASA,eAAe;AAExB,OAAO,MAAMC,UAAU,CAAwB;EAI3CC,WAAWA,CAACC,YAA2B,EAAEC,OAAoB,EAAE;IAC3D,IAAI,CAACA,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACD,YAAY,GAAGA,YAAY;EACpC;EAEA,MAAME,OAAOA,CAACC,IAAY,EAA8B;IACpD,MAAMC,eAAe,GAAG,MAAMP,eAAe,CAACQ,iBAAiB,CAAC,CAAC;IACjE,IAAI,CAACD,eAAe,CAACE,OAAO,CAAC;MAAEC,IAAI,EAAE,MAAM;MAAEJ;IAAK,CAAC,CAAC,EAAE;MAClD,OAAO,IAAI,CAACF,OAAO,CAACC,OAAO,CAACC,IAAI,CAAC;IACrC;IACA,OAAO,IAAI,CAACH,YAAY,CAACQ,WAAW,CAACJ,eAAe,CAACK,KAAK,CAAC,CAAC,CAAC;EACjE;EAEA,MAAMC,SAASA,CAACC,OAA0B,EAA4B;IAClE,OAAO,IAAI,CAACV,OAAO,CAACS,SAAS,CAACC,OAAO,CAAC;EAC1C;AACJ","ignoreList":[]}
+{"version":3,"file":"PreviewSdk.js","sources":["../src/PreviewSdk.ts"],"sourcesContent":["import type {\n    IContentSdk,\n    IDataProvider,\n    ListPagesOptions,\n    ListPagesResult,\n    PublicPage\n} from \"~/types.js\";\nimport { PreviewDocument } from \"~/PreviewDocument.js\";\nimport { environment } from \"./Environment.js\";\n\nexport class PreviewSdk implements IContentSdk {\n    private liveSdk: IContentSdk;\n    private dataProvider: IDataProvider;\n    private previewParams: string | undefined;\n\n    constructor(dataProvider: IDataProvider, liveSdk: IContentSdk, previewParams?: string) {\n        this.liveSdk = liveSdk;\n        this.dataProvider = dataProvider;\n        this.previewParams = previewParams;\n    }\n\n    async getPage(path: string): Promise<PublicPage | null> {\n        let previewDocument: PreviewDocument;\n\n        if (this.previewParams) {\n            // Params were passed directly via init config (server-side SSR path).\n            previewDocument = PreviewDocument.createFromParams(this.previewParams);\n        } else if (environment.isClient()) {\n            previewDocument = PreviewDocument.createFromWindow();\n        } else {\n            previewDocument = await PreviewDocument.createFromHeaders();\n        }\n\n        if (!previewDocument.matches({ type: \"page\", path })) {\n            return this.liveSdk.getPage(path);\n        }\n        return this.dataProvider.getPageById(previewDocument.getId());\n    }\n\n    async listPages(options?: ListPagesOptions): Promise<ListPagesResult> {\n        return this.liveSdk.listPages(options);\n    }\n}\n"],"names":["PreviewSdk","dataProvider","liveSdk","previewParams","path","previewDocument","PreviewDocument","environment","options"],"mappings":";;AAUO,MAAMA;IAKT,YAAYC,YAA2B,EAAEC,OAAoB,EAAEC,aAAsB,CAAE;QACnF,IAAI,CAAC,OAAO,GAAGD;QACf,IAAI,CAAC,YAAY,GAAGD;QACpB,IAAI,CAAC,aAAa,GAAGE;IACzB;IAEA,MAAM,QAAQC,IAAY,EAA8B;QACpD,IAAIC;QAIAA,kBAFA,IAAI,CAAC,aAAa,GAEAC,gBAAgB,gBAAgB,CAAC,IAAI,CAAC,aAAa,IAC9DC,YAAY,QAAQ,KACTD,gBAAgB,gBAAgB,KAEhC,MAAMA,gBAAgB,iBAAiB;QAG7D,IAAI,CAACD,gBAAgB,OAAO,CAAC;YAAE,MAAM;YAAQD;QAAK,IAC9C,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAACA;QAEhC,OAAO,IAAI,CAAC,YAAY,CAAC,WAAW,CAACC,gBAAgB,KAAK;IAC9D;IAEA,MAAM,UAAUG,OAA0B,EAA4B;QAClE,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAACA;IAClC;AACJ"}

package/PreviewViewport.js

@@ -1,68 +1,56 @@
 import { viewportManager } from "./ViewportManager.js";
-export class PreviewViewport {
-  getBoxes() {
-    const elementBoxes = {};
-
-    // Collect positions for all elements
-    const elements = document.querySelectorAll("[data-element-id]");
-    elements.forEach(element => {
-      const id = element.getAttribute("data-element-id");
-      const depth = element.getAttribute("data-depth");
-      if (id) {
-        // Get the bounding box relative to the viewport
-        const rect = element.firstElementChild?.getBoundingClientRect();
-        if (!rect) {
-          return;
-        }
-
-        // Convert DOMRect to a plain object to ensure it can be serialized
-        elementBoxes[id] = {
-          type: "element",
-          depth: parseInt(depth ?? "0"),
-          parentId: element.getAttribute("data-parent-id"),
-          parentSlot: element.getAttribute("data-parent-slot"),
-          parentIndex: parseInt(element.getAttribute("data-parent-index") ?? "0"),
-          top: rect.top,
-          left: rect.left,
-          width: rect.width,
-          height: rect.height
+class PreviewViewport {
+    getBoxes() {
+        const elementBoxes = {};
+        const elements = document.querySelectorAll("[data-element-id]");
+        elements.forEach((element)=>{
+            const id = element.getAttribute("data-element-id");
+            const depth = element.getAttribute("data-depth");
+            if (id) {
+                const rect = element.firstElementChild?.getBoundingClientRect();
+                if (!rect) return;
+                elementBoxes[id] = {
+                    type: "element",
+                    depth: parseInt(depth ?? "0"),
+                    parentId: element.getAttribute("data-parent-id"),
+                    parentSlot: element.getAttribute("data-parent-slot"),
+                    parentIndex: parseInt(element.getAttribute("data-parent-index") ?? "0"),
+                    top: rect.top,
+                    left: rect.left,
+                    width: rect.width,
+                    height: rect.height
+                };
+            }
+        });
+        const slotBoxes = {};
+        const elementSlots = document.querySelectorAll("[data-role='element-slot']");
+        elementSlots.forEach((element)=>{
+            const parentId = element.getAttribute("data-parent-id");
+            const slot = element.getAttribute("data-parent-slot");
+            const depth = element.getAttribute("data-depth");
+            const rect = element.getBoundingClientRect();
+            slotBoxes[`${parentId}:${slot}`] = {
+                type: "element-slot",
+                depth: parseInt(depth ?? "0"),
+                parentId: element.getAttribute("data-parent-id"),
+                parentSlot: element.getAttribute("data-parent-slot"),
+                parentIndex: parseInt(element.getAttribute("data-parent-index") ?? "0"),
+                top: rect.top,
+                left: rect.left,
+                width: rect.width,
+                height: rect.height
+            };
+        });
+        return {
+            ...elementBoxes,
+            ...slotBoxes
         };
-      }
-    });
-
-    // Collect positions for all element slots
-    const slotBoxes = {};
-    const elementSlots = document.querySelectorAll("[data-role='element-slot']");
-    elementSlots.forEach(element => {
-      const parentId = element.getAttribute("data-parent-id");
-      const slot = element.getAttribute("data-parent-slot");
-      const depth = element.getAttribute("data-depth");
-
-      // Get the bounding box relative to the viewport
-      const rect = element.getBoundingClientRect();
-
-      // Convert DOMRect to a plain object to ensure it can be serialized
-      slotBoxes[`${parentId}:${slot}`] = {
-        type: "element-slot",
-        depth: parseInt(depth ?? "0"),
-        parentId: element.getAttribute("data-parent-id"),
-        parentSlot: element.getAttribute("data-parent-slot"),
-        parentIndex: parseInt(element.getAttribute("data-parent-index") ?? "0"),
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height
-      };
-    });
-    return {
-      ...elementBoxes,
-      ...slotBoxes
-    };
-  }
-  getViewport() {
-    return viewportManager.getViewport();
-  }
-  destroy() {}
+    }
+    getViewport() {
+        return viewportManager.getViewport();
+    }
+    destroy() {}
 }
+export { PreviewViewport };
 
 //# sourceMappingURL=PreviewViewport.js.map

package/PreviewViewport.js.map

@@ -1 +1 @@
-{"version":3,"names":["viewportManager","PreviewViewport","getBoxes","elementBoxes","elements","document","querySelectorAll","forEach","element","id","getAttribute","depth","rect","firstElementChild","getBoundingClientRect","type","parseInt","parentId","parentSlot","parentIndex","top","left","width","height","slotBoxes","elementSlots","slot","getViewport","destroy"],"sources":["PreviewViewport.ts"],"sourcesContent":["import type { ElementBoxData, ElementSlotBoxData } from \"~/types.js\";\nimport { viewportManager } from \"./ViewportManager.js\";\n\nexport class PreviewViewport {\n    getBoxes() {\n        const elementBoxes: Record<string, ElementBoxData> = {};\n\n        // Collect positions for all elements\n        const elements = document.querySelectorAll(\"[data-element-id]\");\n\n        elements.forEach(element => {\n            const id = element.getAttribute(\"data-element-id\");\n            const depth = element.getAttribute(\"data-depth\");\n            if (id) {\n                // Get the bounding box relative to the viewport\n                const rect = element.firstElementChild?.getBoundingClientRect();\n\n                if (!rect) {\n                    return;\n                }\n\n                // Convert DOMRect to a plain object to ensure it can be serialized\n                elementBoxes[id] = {\n                    type: \"element\",\n                    depth: parseInt(depth ?? \"0\"),\n                    parentId: element.getAttribute(\"data-parent-id\")!,\n                    parentSlot: element.getAttribute(\"data-parent-slot\")!,\n                    parentIndex: parseInt(element.getAttribute(\"data-parent-index\") ?? \"0\"),\n                    top: rect.top,\n                    left: rect.left,\n                    width: rect.width,\n                    height: rect.height\n                };\n            }\n        });\n\n        // Collect positions for all element slots\n        const slotBoxes: Record<string, ElementSlotBoxData> = {};\n\n        const elementSlots = document.querySelectorAll(\"[data-role='element-slot']\");\n\n        elementSlots.forEach(element => {\n            const parentId = element.getAttribute(\"data-parent-id\");\n            const slot = element.getAttribute(\"data-parent-slot\");\n            const depth = element.getAttribute(\"data-depth\");\n\n            // Get the bounding box relative to the viewport\n            const rect = element.getBoundingClientRect();\n\n            // Convert DOMRect to a plain object to ensure it can be serialized\n            slotBoxes[`${parentId}:${slot}`] = {\n                type: \"element-slot\",\n                depth: parseInt(depth ?? \"0\"),\n                parentId: element.getAttribute(\"data-parent-id\")!,\n                parentSlot: element.getAttribute(\"data-parent-slot\")!,\n                parentIndex: parseInt(element.getAttribute(\"data-parent-index\") ?? \"0\"),\n                top: rect.top,\n                left: rect.left,\n                width: rect.width,\n                height: rect.height\n            };\n        });\n\n        return { ...elementBoxes, ...slotBoxes };\n    }\n\n    getViewport() {\n        return viewportManager.getViewport();\n    }\n\n    destroy(): void {}\n}\n"],"mappings":"AACA,SAASA,eAAe;AAExB,OAAO,MAAMC,eAAe,CAAC;EACzBC,QAAQA,CAAA,EAAG;IACP,MAAMC,YAA4C,GAAG,CAAC,CAAC;;IAEvD;IACA,MAAMC,QAAQ,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,mBAAmB,CAAC;IAE/DF,QAAQ,CAACG,OAAO,CAACC,OAAO,IAAI;MACxB,MAAMC,EAAE,GAAGD,OAAO,CAACE,YAAY,CAAC,iBAAiB,CAAC;MAClD,MAAMC,KAAK,GAAGH,OAAO,CAACE,YAAY,CAAC,YAAY,CAAC;MAChD,IAAID,EAAE,EAAE;QACJ;QACA,MAAMG,IAAI,GAAGJ,OAAO,CAACK,iBAAiB,EAAEC,qBAAqB,CAAC,CAAC;QAE/D,IAAI,CAACF,IAAI,EAAE;UACP;QACJ;;QAEA;QACAT,YAAY,CAACM,EAAE,CAAC,GAAG;UACfM,IAAI,EAAE,SAAS;UACfJ,KAAK,EAAEK,QAAQ,CAACL,KAAK,IAAI,GAAG,CAAC;UAC7BM,QAAQ,EAAET,OAAO,CAACE,YAAY,CAAC,gBAAgB,CAAE;UACjDQ,UAAU,EAAEV,OAAO,CAACE,YAAY,CAAC,kBAAkB,CAAE;UACrDS,WAAW,EAAEH,QAAQ,CAACR,OAAO,CAACE,YAAY,CAAC,mBAAmB,CAAC,IAAI,GAAG,CAAC;UACvEU,GAAG,EAAER,IAAI,CAACQ,GAAG;UACbC,IAAI,EAAET,IAAI,CAACS,IAAI;UACfC,KAAK,EAAEV,IAAI,CAACU,KAAK;UACjBC,MAAM,EAAEX,IAAI,CAACW;QACjB,CAAC;MACL;IACJ,CAAC,CAAC;;IAEF;IACA,MAAMC,SAA6C,GAAG,CAAC,CAAC;IAExD,MAAMC,YAAY,GAAGpB,QAAQ,CAACC,gBAAgB,CAAC,4BAA4B,CAAC;IAE5EmB,YAAY,CAAClB,OAAO,CAACC,OAAO,IAAI;MAC5B,MAAMS,QAAQ,GAAGT,OAAO,CAACE,YAAY,CAAC,gBAAgB,CAAC;MACvD,MAAMgB,IAAI,GAAGlB,OAAO,CAACE,YAAY,CAAC,kBAAkB,CAAC;MACrD,MAAMC,KAAK,GAAGH,OAAO,CAACE,YAAY,CAAC,YAAY,CAAC;;MAEhD;MACA,MAAME,IAAI,GAAGJ,OAAO,CAACM,qBAAqB,CAAC,CAAC;;MAE5C;MACAU,SAAS,CAAC,GAAGP,QAAQ,IAAIS,IAAI,EAAE,CAAC,GAAG;QAC/BX,IAAI,EAAE,cAAc;QACpBJ,KAAK,EAAEK,QAAQ,CAACL,KAAK,IAAI,GAAG,CAAC;QAC7BM,QAAQ,EAAET,OAAO,CAACE,YAAY,CAAC,gBAAgB,CAAE;QACjDQ,UAAU,EAAEV,OAAO,CAACE,YAAY,CAAC,kBAAkB,CAAE;QACrDS,WAAW,EAAEH,QAAQ,CAACR,OAAO,CAACE,YAAY,CAAC,mBAAmB,CAAC,IAAI,GAAG,CAAC;QACvEU,GAAG,EAAER,IAAI,CAACQ,GAAG;QACbC,IAAI,EAAET,IAAI,CAACS,IAAI;QACfC,KAAK,EAAEV,IAAI,CAACU,KAAK;QACjBC,MAAM,EAAEX,IAAI,CAACW;MACjB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO;MAAE,GAAGpB,YAAY;MAAE,GAAGqB;IAAU,CAAC;EAC5C;EAEAG,WAAWA,CAAA,EAAG;IACV,OAAO3B,eAAe,CAAC2B,WAAW,CAAC,CAAC;EACxC;EAEAC,OAAOA,CAAA,EAAS,CAAC;AACrB","ignoreList":[]}
+{"version":3,"file":"PreviewViewport.js","sources":["../src/PreviewViewport.ts"],"sourcesContent":["import type { ElementBoxData, ElementSlotBoxData } from \"~/types.js\";\nimport { viewportManager } from \"./ViewportManager.js\";\n\nexport class PreviewViewport {\n    getBoxes() {\n        const elementBoxes: Record<string, ElementBoxData> = {};\n\n        // Collect positions for all elements\n        const elements = document.querySelectorAll(\"[data-element-id]\");\n\n        elements.forEach(element => {\n            const id = element.getAttribute(\"data-element-id\");\n            const depth = element.getAttribute(\"data-depth\");\n            if (id) {\n                // Get the bounding box relative to the viewport\n                const rect = element.firstElementChild?.getBoundingClientRect();\n\n                if (!rect) {\n                    return;\n                }\n\n                // Convert DOMRect to a plain object to ensure it can be serialized\n                elementBoxes[id] = {\n                    type: \"element\",\n                    depth: parseInt(depth ?? \"0\"),\n                    parentId: element.getAttribute(\"data-parent-id\")!,\n                    parentSlot: element.getAttribute(\"data-parent-slot\")!,\n                    parentIndex: parseInt(element.getAttribute(\"data-parent-index\") ?? \"0\"),\n                    top: rect.top,\n                    left: rect.left,\n                    width: rect.width,\n                    height: rect.height\n                };\n            }\n        });\n\n        // Collect positions for all element slots\n        const slotBoxes: Record<string, ElementSlotBoxData> = {};\n\n        const elementSlots = document.querySelectorAll(\"[data-role='element-slot']\");\n\n        elementSlots.forEach(element => {\n            const parentId = element.getAttribute(\"data-parent-id\");\n            const slot = element.getAttribute(\"data-parent-slot\");\n            const depth = element.getAttribute(\"data-depth\");\n\n            // Get the bounding box relative to the viewport\n            const rect = element.getBoundingClientRect();\n\n            // Convert DOMRect to a plain object to ensure it can be serialized\n            slotBoxes[`${parentId}:${slot}`] = {\n                type: \"element-slot\",\n                depth: parseInt(depth ?? \"0\"),\n                parentId: element.getAttribute(\"data-parent-id\")!,\n                parentSlot: element.getAttribute(\"data-parent-slot\")!,\n                parentIndex: parseInt(element.getAttribute(\"data-parent-index\") ?? \"0\"),\n                top: rect.top,\n                left: rect.left,\n                width: rect.width,\n                height: rect.height\n            };\n        });\n\n        return { ...elementBoxes, ...slotBoxes };\n    }\n\n    getViewport() {\n        return viewportManager.getViewport();\n    }\n\n    destroy(): void {}\n}\n"],"names":["PreviewViewport","elementBoxes","elements","document","element","id","depth","rect","parseInt","slotBoxes","elementSlots","parentId","slot","viewportManager"],"mappings":";AAGO,MAAMA;IACT,WAAW;QACP,MAAMC,eAA+C,CAAC;QAGtD,MAAMC,WAAWC,SAAS,gBAAgB,CAAC;QAE3CD,SAAS,OAAO,CAACE,CAAAA;YACb,MAAMC,KAAKD,QAAQ,YAAY,CAAC;YAChC,MAAME,QAAQF,QAAQ,YAAY,CAAC;YACnC,IAAIC,IAAI;gBAEJ,MAAME,OAAOH,QAAQ,iBAAiB,EAAE;gBAExC,IAAI,CAACG,MACD;gBAIJN,YAAY,CAACI,GAAG,GAAG;oBACf,MAAM;oBACN,OAAOG,SAASF,SAAS;oBACzB,UAAUF,QAAQ,YAAY,CAAC;oBAC/B,YAAYA,QAAQ,YAAY,CAAC;oBACjC,aAAaI,SAASJ,QAAQ,YAAY,CAAC,wBAAwB;oBACnE,KAAKG,KAAK,GAAG;oBACb,MAAMA,KAAK,IAAI;oBACf,OAAOA,KAAK,KAAK;oBACjB,QAAQA,KAAK,MAAM;gBACvB;YACJ;QACJ;QAGA,MAAME,YAAgD,CAAC;QAEvD,MAAMC,eAAeP,SAAS,gBAAgB,CAAC;QAE/CO,aAAa,OAAO,CAACN,CAAAA;YACjB,MAAMO,WAAWP,QAAQ,YAAY,CAAC;YACtC,MAAMQ,OAAOR,QAAQ,YAAY,CAAC;YAClC,MAAME,QAAQF,QAAQ,YAAY,CAAC;YAGnC,MAAMG,OAAOH,QAAQ,qBAAqB;YAG1CK,SAAS,CAAC,GAAGE,SAAS,CAAC,EAAEC,MAAM,CAAC,GAAG;gBAC/B,MAAM;gBACN,OAAOJ,SAASF,SAAS;gBACzB,UAAUF,QAAQ,YAAY,CAAC;gBAC/B,YAAYA,QAAQ,YAAY,CAAC;gBACjC,aAAaI,SAASJ,QAAQ,YAAY,CAAC,wBAAwB;gBACnE,KAAKG,KAAK,GAAG;gBACb,MAAMA,KAAK,IAAI;gBACf,OAAOA,KAAK,KAAK;gBACjB,QAAQA,KAAK,MAAM;YACvB;QACJ;QAEA,OAAO;YAAE,GAAGN,YAAY;YAAE,GAAGQ,SAAS;QAAC;IAC3C;IAEA,cAAc;QACV,OAAOI,gBAAgB,WAAW;IACtC;IAEA,UAAgB,CAAC;AACrB"}

package/ResizeObserver.js

@@ -1,41 +1,34 @@
 let resizeQueue = {};
 const onChangeListeners = [];
-const flushResizeQueue = () => {
-  if (Object.entries(resizeQueue).length > 0) {
-    onChangeListeners.forEach(entry => {
-      entry();
+const flushResizeQueue = ()=>{
+    if (Object.entries(resizeQueue).length > 0) onChangeListeners.forEach((entry)=>{
+        entry();
     });
-  }
-  resizeQueue = {};
+    resizeQueue = {};
 };
 let observer;
-if (typeof window === "undefined") {
-  observer = {
-    observe: () => {},
-    unobserve: () => {}
-  };
-} else {
-  observer = new ResizeObserver(entries => {
-    for (const entry of entries) {
-      const el = entry.target;
-      const id = el.getAttribute("data-element-id");
-      if (id) {
-        resizeQueue[id] = el.getBoundingClientRect();
-      }
+observer = "u" < typeof ResizeObserver ? {
+    observe: ()=>{},
+    unobserve: ()=>{}
+} : new ResizeObserver((entries)=>{
+    for (const entry of entries){
+        const el = entry.target;
+        const id = el.getAttribute("data-element-id");
+        if (id) resizeQueue[id] = el.getBoundingClientRect();
     }
     requestAnimationFrame(flushResizeQueue);
-  });
-}
-export const resizeObserver = {
-  observe: element => {
-    observer.observe(element);
-  },
-  unobserve: element => {
-    observer.unobserve(element);
-  },
-  onChange: cb => {
-    onChangeListeners.push(cb);
-  }
+});
+const resizeObserver = {
+    observe: (element)=>{
+        observer.observe(element);
+    },
+    unobserve: (element)=>{
+        observer.unobserve(element);
+    },
+    onChange: (cb)=>{
+        onChangeListeners.push(cb);
+    }
 };
+export { resizeObserver };
 
 //# sourceMappingURL=ResizeObserver.js.map

package/ResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"names":["resizeQueue","onChangeListeners","flushResizeQueue","Object","entries","length","forEach","entry","observer","window","observe","unobserve","ResizeObserver","el","target","id","getAttribute","getBoundingClientRect","requestAnimationFrame","resizeObserver","element","onChange","cb","push"],"sources":["ResizeObserver.ts"],"sourcesContent":["let resizeQueue: Record<string, DOMRect> = {};\nconst onChangeListeners: Array<() => void> = [];\n\nconst flushResizeQueue = () => {\n    if (Object.entries(resizeQueue).length > 0) {\n        onChangeListeners.forEach(entry => {\n            entry();\n        });\n    }\n    resizeQueue = {};\n};\n\nlet observer: any;\n\nif (typeof window === \"undefined\") {\n    observer = {\n        observe: () => {},\n        unobserve: () => {}\n    };\n} else {\n    observer = new ResizeObserver(entries => {\n        for (const entry of entries) {\n            const el = entry.target as HTMLElement;\n            const id = el.getAttribute(\"data-element-id\");\n            if (id) {\n                resizeQueue[id] = el.getBoundingClientRect();\n            }\n        }\n        requestAnimationFrame(flushResizeQueue);\n    });\n}\n\nexport const resizeObserver = {\n    observe: (element: HTMLElement) => {\n        observer.observe(element);\n    },\n    unobserve: (element: HTMLElement) => {\n        observer.unobserve(element);\n    },\n    onChange: (cb: () => void) => {\n        onChangeListeners.push(cb);\n    }\n};\n"],"mappings":"AAAA,IAAIA,WAAoC,GAAG,CAAC,CAAC;AAC7C,MAAMC,iBAAoC,GAAG,EAAE;AAE/C,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAC3B,IAAIC,MAAM,CAACC,OAAO,CAACJ,WAAW,CAAC,CAACK,MAAM,GAAG,CAAC,EAAE;IACxCJ,iBAAiB,CAACK,OAAO,CAACC,KAAK,IAAI;MAC/BA,KAAK,CAAC,CAAC;IACX,CAAC,CAAC;EACN;EACAP,WAAW,GAAG,CAAC,CAAC;AACpB,CAAC;AAED,IAAIQ,QAAa;AAEjB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;EAC/BD,QAAQ,GAAG;IACPE,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAC;IACjBC,SAAS,EAAEA,CAAA,KAAM,CAAC;EACtB,CAAC;AACL,CAAC,MAAM;EACHH,QAAQ,GAAG,IAAII,cAAc,CAACR,OAAO,IAAI;IACrC,KAAK,MAAMG,KAAK,IAAIH,OAAO,EAAE;MACzB,MAAMS,EAAE,GAAGN,KAAK,CAACO,MAAqB;MACtC,MAAMC,EAAE,GAAGF,EAAE,CAACG,YAAY,CAAC,iBAAiB,CAAC;MAC7C,IAAID,EAAE,EAAE;QACJf,WAAW,CAACe,EAAE,CAAC,GAAGF,EAAE,CAACI,qBAAqB,CAAC,CAAC;MAChD;IACJ;IACAC,qBAAqB,CAAChB,gBAAgB,CAAC;EAC3C,CAAC,CAAC;AACN;AAEA,OAAO,MAAMiB,cAAc,GAAG;EAC1BT,OAAO,EAAGU,OAAoB,IAAK;IAC/BZ,QAAQ,CAACE,OAAO,CAACU,OAAO,CAAC;EAC7B,CAAC;EACDT,SAAS,EAAGS,OAAoB,IAAK;IACjCZ,QAAQ,CAACG,SAAS,CAACS,OAAO,CAAC;EAC/B,CAAC;EACDC,QAAQ,EAAGC,EAAc,IAAK;IAC1BrB,iBAAiB,CAACsB,IAAI,CAACD,EAAE,CAAC;EAC9B;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"ResizeObserver.js","sources":["../src/ResizeObserver.ts"],"sourcesContent":["let resizeQueue: Record<string, DOMRect> = {};\nconst onChangeListeners: Array<() => void> = [];\n\nconst flushResizeQueue = () => {\n    if (Object.entries(resizeQueue).length > 0) {\n        onChangeListeners.forEach(entry => {\n            entry();\n        });\n    }\n    resizeQueue = {};\n};\n\nlet observer: any;\n\nif (typeof ResizeObserver === \"undefined\") {\n    observer = {\n        observe: () => {},\n        unobserve: () => {}\n    };\n} else {\n    observer = new ResizeObserver(entries => {\n        for (const entry of entries) {\n            const el = entry.target as HTMLElement;\n            const id = el.getAttribute(\"data-element-id\");\n            if (id) {\n                resizeQueue[id] = el.getBoundingClientRect();\n            }\n        }\n        requestAnimationFrame(flushResizeQueue);\n    });\n}\n\nexport const resizeObserver = {\n    observe: (element: HTMLElement) => {\n        observer.observe(element);\n    },\n    unobserve: (element: HTMLElement) => {\n        observer.unobserve(element);\n    },\n    onChange: (cb: () => void) => {\n        onChangeListeners.push(cb);\n    }\n};\n"],"names":["resizeQueue","onChangeListeners","flushResizeQueue","Object","entry","observer","ResizeObserver","entries","el","id","requestAnimationFrame","resizeObserver","element","cb"],"mappings":"AAAA,IAAIA,cAAuC,CAAC;AAC5C,MAAMC,oBAAuC,EAAE;AAE/C,MAAMC,mBAAmB;IACrB,IAAIC,OAAO,OAAO,CAACH,aAAa,MAAM,GAAG,GACrCC,kBAAkB,OAAO,CAACG,CAAAA;QACtBA;IACJ;IAEJJ,cAAc,CAAC;AACnB;AAEA,IAAIK;AAGAA,WADA,AAA0B,MAA1B,OAAOC,iBACI;IACP,SAAS,KAAO;IAChB,WAAW,KAAO;AACtB,IAEW,IAAIA,eAAeC,CAAAA;IAC1B,KAAK,MAAMH,SAASG,QAAS;QACzB,MAAMC,KAAKJ,MAAM,MAAM;QACvB,MAAMK,KAAKD,GAAG,YAAY,CAAC;QAC3B,IAAIC,IACAT,WAAW,CAACS,GAAG,GAAGD,GAAG,qBAAqB;IAElD;IACAE,sBAAsBR;AAC1B;AAGG,MAAMS,iBAAiB;IAC1B,SAAS,CAACC;QACNP,SAAS,OAAO,CAACO;IACrB;IACA,WAAW,CAACA;QACRP,SAAS,SAAS,CAACO;IACvB;IACA,UAAU,CAACC;QACPZ,kBAAkB,IAAI,CAACY;IAC3B;AACJ"}

package/StylesBindingsProcessor.d.ts

@@ -1,4 +1,4 @@
-import type { DocumentElementBindings, DocumentElementStyleBindings } from "./types.js";
+import type { DocumentElementBindings, DocumentElementStyleBindings, TokenReference } from "./types.js";
 import { StylesUpdater } from "./StylesUpdater.js";
 type DeepBindings = Record<string, any>;
 export type ElementStylesBindings = {
@@ -20,13 +20,23 @@ export declare class StylesBindingsProcessor {
     constructor(elementId: string, breakpoints: string[], rawBindings: DocumentElementBindings);
     /**
      * Converts flat style bindings into deep styles object (removes `.static`).
+     *
+     * A token reference yields its `var(--wby-…)` form, so the editor preview renders the themed
+     * value. Use {@link toTokenMap} alongside this when you need to know that a value came from a
+     * token rather than a literal — a picker has to show which token is selected.
      */
     toDeepStyles(styles?: DocumentElementBindings["styles"]): DeepBindings;
+    /** The token references among these bindings, keyed by CSS property. */
+    toTokenMap(styles?: DocumentElementBindings["styles"]): Record<string, TokenReference>;
     /**
      * Flattens deep styles object into flat bindings with `.static` wrappers.
      * Skips overrides where the value matches inherited parent breakpoint.
+     *
+     * @param tokens Properties in this map are written as token references instead of literals.
+     *               A property absent from it is written as `static`, which is what clears a
+     *               reference when someone picks a free value over a token.
      */
-    createUpdate(styles: DeepBindings, currentBreakpoint: string): StylesUpdater;
+    createUpdate(styles: DeepBindings, currentBreakpoint: string, tokens?: Record<string, TokenReference>): StylesUpdater;
     private getBaseStyles;
     private isBaseBreakpoint;
 }

package/StylesBindingsProcessor.js

@@ -1,91 +1,74 @@
 import set from "lodash/set.js";
 import unset from "lodash/unset.js";
+import { toJS } from "mobx";
 import { InheritedValueResolver } from "./InheritedValueResolver.js";
 import { StylesUpdater } from "./StylesUpdater.js";
-/**
- * Handles deep-to-flat and flat-to-deep conversion of style bindings,
- * with breakpoint inheritance awareness.
- */
-export class StylesBindingsProcessor {
-  constructor(elementId, breakpoints, rawBindings) {
-    this.elementId = elementId;
-    this.breakpoints = breakpoints;
-    this.rawBindings = rawBindings;
-  }
-
-  /**
-   * Converts flat style bindings into deep styles object (removes `.static`).
-   */
-  toDeepStyles(styles = {}) {
-    const result = {};
-    Object.keys(styles).forEach(key => {
-      // @ts-expect-error Style keys cannot be indexed with a string.
-      result[key] = styles[key].static;
-    });
-    return result;
-  }
-
-  /**
-   * Flattens deep styles object into flat bindings with `.static` wrappers.
-   * Skips overrides where the value matches inherited parent breakpoint.
-   */
-  createUpdate(styles, currentBreakpoint) {
-    const rebuilt = this.getBaseStyles();
-    const valueResolver = new InheritedValueResolver(this.breakpoints, breakpoint => {
-      if (this.isBaseBreakpoint(breakpoint)) {
-        return this.rawBindings.styles;
-      }
-      return this.rawBindings?.overrides?.[breakpoint]?.styles;
-    });
-
-    // Collect original keys for the breakpoint
-    const originalStyles = this.isBaseBreakpoint(currentBreakpoint) ? this.rawBindings.styles || {} : this.rawBindings?.overrides?.[currentBreakpoint]?.styles || {};
-    const newKeys = new Set(Object.keys(styles));
-    const originalKeys = Object.keys(originalStyles);
-
-    // Remove keys that no longer exist
-    for (const key of originalKeys) {
-      if (!newKeys.has(key)) {
-        if (this.isBaseBreakpoint(currentBreakpoint)) {
-          unset(rebuilt, `styles.${key}`);
-        } else {
-          unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);
-        }
-      }
+import { isTokenBinding, tokenToCssValue } from "./tokenBinding.js";
+class StylesBindingsProcessor {
+    constructor(elementId, breakpoints, rawBindings){
+        this.elementId = elementId;
+        this.breakpoints = breakpoints;
+        this.rawBindings = rawBindings;
     }
-    for (const [key, value] of Object.entries(styles)) {
-      if (this.isBaseBreakpoint(currentBreakpoint)) {
-        set(rebuilt, `styles.${key}.static`, value);
-      } else {
-        const inheritedValue = valueResolver.getInheritedValue(key, currentBreakpoint);
-        if (value !== inheritedValue) {
-          set(rebuilt, `overrides.${currentBreakpoint}.styles.${key}.static`, value);
-        } else {
-          unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);
+    toDeepStyles(styles = {}) {
+        const result = {};
+        Object.keys(styles).forEach((key)=>{
+            const binding = styles[key];
+            result[key] = isTokenBinding(binding) ? tokenToCssValue(binding.token) : binding.static;
+        });
+        return result;
+    }
+    toTokenMap(styles = {}) {
+        const result = {};
+        Object.keys(styles).forEach((key)=>{
+            const binding = styles[key];
+            if (isTokenBinding(binding)) result[key] = binding.token;
+        });
+        return result;
+    }
+    createUpdate(styles, currentBreakpoint, tokens = {}) {
+        const rebuilt = this.getBaseStyles();
+        const valueResolver = new InheritedValueResolver(this.breakpoints, (breakpoint)=>{
+            if (this.isBaseBreakpoint(breakpoint)) return this.rawBindings.styles;
+            return this.rawBindings?.overrides?.[breakpoint]?.styles;
+        });
+        const originalStyles = this.isBaseBreakpoint(currentBreakpoint) ? this.rawBindings.styles || {} : this.rawBindings?.overrides?.[currentBreakpoint]?.styles || {};
+        const newKeys = new Set(Object.keys(styles));
+        const originalKeys = Object.keys(originalStyles);
+        for (const key of originalKeys)if (!newKeys.has(key)) this.isBaseBreakpoint(currentBreakpoint) ? unset(rebuilt, `styles.${key}`) : unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);
+        for (const [key, value] of Object.entries(styles)){
+            const token = tokens[key];
+            if (this.isBaseBreakpoint(currentBreakpoint)) if (token) {
+                unset(rebuilt, `styles.${key}`);
+                set(rebuilt, `styles.${key}.token`, token);
+            } else {
+                unset(rebuilt, `styles.${key}`);
+                set(rebuilt, `styles.${key}.static`, value);
+            }
+            else {
+                const inheritedValue = valueResolver.getInheritedValue(key, currentBreakpoint);
+                if (value !== inheritedValue) {
+                    unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);
+                    token ? set(rebuilt, `overrides.${currentBreakpoint}.styles.${key}.token`, token) : set(rebuilt, `overrides.${currentBreakpoint}.styles.${key}.static`, value);
+                } else unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);
+            }
         }
-      }
+        return new StylesUpdater(this.elementId, rebuilt);
     }
-    return new StylesUpdater(this.elementId, rebuilt);
-  }
-  getBaseStyles() {
-    const baseStyles = {
-      styles: structuredClone(this.rawBindings.styles) ?? {},
-      overrides: {}
-    };
-
-    // Clone existing overrides if present, to avoid losing breakpoint overrides
-    if (this.rawBindings.overrides) {
-      for (const [bp, overrides] of Object.entries(this.rawBindings.overrides)) {
-        if (overrides.styles) {
-          set(baseStyles, `overrides.${bp}.styles`, structuredClone(this.rawBindings.overrides[bp].styles));
+    getBaseStyles() {
+        const baseStyles = {
+            styles: structuredClone(toJS(this.rawBindings.styles)) ?? {},
+            overrides: {}
+        };
+        if (this.rawBindings.overrides) {
+            for (const [bp, overrides] of Object.entries(this.rawBindings.overrides))if (overrides.styles) set(baseStyles, `overrides.${bp}.styles`, structuredClone(toJS(this.rawBindings.overrides[bp].styles)));
         }
-      }
+        return baseStyles;
+    }
+    isBaseBreakpoint(name) {
+        return 0 === this.breakpoints.indexOf(name);
     }
-    return baseStyles;
-  }
-  isBaseBreakpoint(name) {
-    return this.breakpoints.indexOf(name) === 0;
-  }
 }
+export { StylesBindingsProcessor };
 
 //# sourceMappingURL=StylesBindingsProcessor.js.map

package/StylesBindingsProcessor.js.map

@@ -1 +1 @@
-{"version":3,"names":["set","unset","InheritedValueResolver","StylesUpdater","StylesBindingsProcessor","constructor","elementId","breakpoints","rawBindings","toDeepStyles","styles","result","Object","keys","forEach","key","static","createUpdate","currentBreakpoint","rebuilt","getBaseStyles","valueResolver","breakpoint","isBaseBreakpoint","overrides","originalStyles","newKeys","Set","originalKeys","has","value","entries","inheritedValue","getInheritedValue","baseStyles","structuredClone","bp","name","indexOf"],"sources":["StylesBindingsProcessor.ts"],"sourcesContent":["import set from \"lodash/set.js\";\nimport unset from \"lodash/unset.js\";\nimport type { DocumentElementBindings, DocumentElementStyleBindings } from \"~/types.js\";\nimport { InheritedValueResolver } from \"~/InheritedValueResolver.js\";\nimport { StylesUpdater } from \"./StylesUpdater.js\";\n\ntype DeepBindings = Record<string, any>;\n\nexport type ElementStylesBindings = {\n    styles: DocumentElementStyleBindings;\n    overrides: {\n        [breakpoint: string]: {\n            styles: DocumentElementStyleBindings;\n        };\n    };\n};\n\n/**\n * Handles deep-to-flat and flat-to-deep conversion of style bindings,\n * with breakpoint inheritance awareness.\n */\nexport class StylesBindingsProcessor {\n    private breakpoints: string[];\n    private rawBindings: DocumentElementBindings;\n    private elementId: string;\n\n    constructor(elementId: string, breakpoints: string[], rawBindings: DocumentElementBindings) {\n        this.elementId = elementId;\n        this.breakpoints = breakpoints;\n        this.rawBindings = rawBindings;\n    }\n\n    /**\n     * Converts flat style bindings into deep styles object (removes `.static`).\n     */\n    public toDeepStyles(styles: DocumentElementBindings[\"styles\"] = {}): DeepBindings {\n        const result: DeepBindings = {};\n        Object.keys(styles).forEach(key => {\n            // @ts-expect-error Style keys cannot be indexed with a string.\n            result[key] = styles[key].static;\n        });\n        return result;\n    }\n\n    /**\n     * Flattens deep styles object into flat bindings with `.static` wrappers.\n     * Skips overrides where the value matches inherited parent breakpoint.\n     */\n    public createUpdate(styles: DeepBindings, currentBreakpoint: string) {\n        const rebuilt = this.getBaseStyles();\n        const valueResolver = new InheritedValueResolver(this.breakpoints, breakpoint => {\n            if (this.isBaseBreakpoint(breakpoint)) {\n                return this.rawBindings.styles;\n            }\n            return this.rawBindings?.overrides?.[breakpoint]?.styles;\n        });\n\n        // Collect original keys for the breakpoint\n        const originalStyles = this.isBaseBreakpoint(currentBreakpoint)\n            ? this.rawBindings.styles || {}\n            : this.rawBindings?.overrides?.[currentBreakpoint]?.styles || {};\n\n        const newKeys = new Set(Object.keys(styles));\n        const originalKeys = Object.keys(originalStyles);\n\n        // Remove keys that no longer exist\n        for (const key of originalKeys) {\n            if (!newKeys.has(key)) {\n                if (this.isBaseBreakpoint(currentBreakpoint)) {\n                    unset(rebuilt, `styles.${key}`);\n                } else {\n                    unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);\n                }\n            }\n        }\n\n        for (const [key, value] of Object.entries(styles)) {\n            if (this.isBaseBreakpoint(currentBreakpoint)) {\n                set(rebuilt, `styles.${key}.static`, value);\n            } else {\n                const inheritedValue = valueResolver.getInheritedValue(key, currentBreakpoint);\n\n                if (value !== inheritedValue) {\n                    set(rebuilt, `overrides.${currentBreakpoint}.styles.${key}.static`, value);\n                } else {\n                    unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);\n                }\n            }\n        }\n\n        return new StylesUpdater(this.elementId, rebuilt);\n    }\n\n    private getBaseStyles(): ElementStylesBindings {\n        const baseStyles: ElementStylesBindings = {\n            styles: structuredClone(this.rawBindings.styles) ?? {},\n            overrides: {}\n        };\n\n        // Clone existing overrides if present, to avoid losing breakpoint overrides\n        if (this.rawBindings.overrides) {\n            for (const [bp, overrides] of Object.entries(this.rawBindings.overrides)) {\n                if (overrides.styles) {\n                    set(\n                        baseStyles,\n                        `overrides.${bp}.styles`,\n                        structuredClone(this.rawBindings.overrides[bp].styles)\n                    );\n                }\n            }\n        }\n\n        return baseStyles;\n    }\n\n    private isBaseBreakpoint(name: string): boolean {\n        return this.breakpoints.indexOf(name) === 0;\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"StylesBindingsProcessor.js","sources":["../src/StylesBindingsProcessor.ts"],"sourcesContent":["import set from \"lodash/set.js\";\nimport unset from \"lodash/unset.js\";\nimport { toJS } from \"mobx\";\nimport type {\n    DocumentElementBindings,\n    DocumentElementStyleBindings,\n    TokenReference\n} from \"~/types.js\";\nimport { InheritedValueResolver } from \"~/InheritedValueResolver.js\";\nimport { StylesUpdater } from \"./StylesUpdater.js\";\nimport { isTokenBinding, tokenToCssValue } from \"./tokenBinding.js\";\n\ntype DeepBindings = Record<string, any>;\n\nexport type ElementStylesBindings = {\n    styles: DocumentElementStyleBindings;\n    overrides: {\n        [breakpoint: string]: {\n            styles: DocumentElementStyleBindings;\n        };\n    };\n};\n\n/**\n * Handles deep-to-flat and flat-to-deep conversion of style bindings,\n * with breakpoint inheritance awareness.\n */\nexport class StylesBindingsProcessor {\n    private breakpoints: string[];\n    private rawBindings: DocumentElementBindings;\n    private elementId: string;\n\n    constructor(elementId: string, breakpoints: string[], rawBindings: DocumentElementBindings) {\n        this.elementId = elementId;\n        this.breakpoints = breakpoints;\n        this.rawBindings = rawBindings;\n    }\n\n    /**\n     * Converts flat style bindings into deep styles object (removes `.static`).\n     *\n     * A token reference yields its `var(--wby-…)` form, so the editor preview renders the themed\n     * value. Use {@link toTokenMap} alongside this when you need to know that a value came from a\n     * token rather than a literal — a picker has to show which token is selected.\n     */\n    public toDeepStyles(styles: DocumentElementBindings[\"styles\"] = {}): DeepBindings {\n        const result: DeepBindings = {};\n        Object.keys(styles).forEach(key => {\n            // @ts-expect-error Style keys cannot be indexed with a string.\n            const binding = styles[key];\n            result[key] = isTokenBinding(binding) ? tokenToCssValue(binding.token) : binding.static;\n        });\n        return result;\n    }\n\n    /** The token references among these bindings, keyed by CSS property. */\n    public toTokenMap(\n        styles: DocumentElementBindings[\"styles\"] = {}\n    ): Record<string, TokenReference> {\n        const result: Record<string, TokenReference> = {};\n        Object.keys(styles).forEach(key => {\n            // @ts-expect-error Style keys cannot be indexed with a string.\n            const binding = styles[key];\n            if (isTokenBinding(binding)) {\n                result[key] = binding.token;\n            }\n        });\n        return result;\n    }\n\n    /**\n     * Flattens deep styles object into flat bindings with `.static` wrappers.\n     * Skips overrides where the value matches inherited parent breakpoint.\n     *\n     * @param tokens Properties in this map are written as token references instead of literals.\n     *               A property absent from it is written as `static`, which is what clears a\n     *               reference when someone picks a free value over a token.\n     */\n    public createUpdate(\n        styles: DeepBindings,\n        currentBreakpoint: string,\n        tokens: Record<string, TokenReference> = {}\n    ) {\n        const rebuilt = this.getBaseStyles();\n        const valueResolver = new InheritedValueResolver(this.breakpoints, breakpoint => {\n            if (this.isBaseBreakpoint(breakpoint)) {\n                return this.rawBindings.styles;\n            }\n            return this.rawBindings?.overrides?.[breakpoint]?.styles;\n        });\n\n        // Collect original keys for the breakpoint\n        const originalStyles = this.isBaseBreakpoint(currentBreakpoint)\n            ? this.rawBindings.styles || {}\n            : this.rawBindings?.overrides?.[currentBreakpoint]?.styles || {};\n\n        const newKeys = new Set(Object.keys(styles));\n        const originalKeys = Object.keys(originalStyles);\n\n        // Remove keys that no longer exist\n        for (const key of originalKeys) {\n            if (!newKeys.has(key)) {\n                if (this.isBaseBreakpoint(currentBreakpoint)) {\n                    unset(rebuilt, `styles.${key}`);\n                } else {\n                    unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);\n                }\n            }\n        }\n\n        for (const [key, value] of Object.entries(styles)) {\n            const token = tokens[key];\n\n            if (this.isBaseBreakpoint(currentBreakpoint)) {\n                if (token) {\n                    // A binding holds either a reference or a literal, never both — leaving a stale\n                    // `static` behind would make the stored value ambiguous.\n                    unset(rebuilt, `styles.${key}`);\n                    set(rebuilt, `styles.${key}.token`, token);\n                } else {\n                    unset(rebuilt, `styles.${key}`);\n                    set(rebuilt, `styles.${key}.static`, value);\n                }\n            } else {\n                const inheritedValue = valueResolver.getInheritedValue(key, currentBreakpoint);\n\n                if (value !== inheritedValue) {\n                    unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);\n                    if (token) {\n                        set(rebuilt, `overrides.${currentBreakpoint}.styles.${key}.token`, token);\n                    } else {\n                        set(rebuilt, `overrides.${currentBreakpoint}.styles.${key}.static`, value);\n                    }\n                } else {\n                    unset(rebuilt, `overrides.${currentBreakpoint}.styles.${key}`);\n                }\n            }\n        }\n\n        return new StylesUpdater(this.elementId, rebuilt);\n    }\n\n    private getBaseStyles(): ElementStylesBindings {\n        const baseStyles: ElementStylesBindings = {\n            styles: structuredClone(toJS(this.rawBindings.styles)) ?? {},\n            overrides: {}\n        };\n\n        // Clone existing overrides if present, to avoid losing breakpoint overrides\n        if (this.rawBindings.overrides) {\n            for (const [bp, overrides] of Object.entries(this.rawBindings.overrides)) {\n                if (overrides.styles) {\n                    set(\n                        baseStyles,\n                        `overrides.${bp}.styles`,\n                        structuredClone(toJS(this.rawBindings.overrides[bp].styles))\n                    );\n                }\n            }\n        }\n\n        return baseStyles;\n    }\n\n    private isBaseBreakpoint(name: string): boolean {\n        return this.breakpoints.indexOf(name) === 0;\n    }\n}\n"],"names":["StylesBindingsProcessor","elementId","breakpoints","rawBindings","styles","result","Object","key","binding","isTokenBinding","tokenToCssValue","currentBreakpoint","tokens","rebuilt","valueResolver","InheritedValueResolver","breakpoint","originalStyles","newKeys","Set","originalKeys","unset","value","token","set","inheritedValue","StylesUpdater","baseStyles","structuredClone","toJS","bp","overrides","name"],"mappings":";;;;;;AA2BO,MAAMA;IAKT,YAAYC,SAAiB,EAAEC,WAAqB,EAAEC,WAAoC,CAAE;QACxF,IAAI,CAAC,SAAS,GAAGF;QACjB,IAAI,CAAC,WAAW,GAAGC;QACnB,IAAI,CAAC,WAAW,GAAGC;IACvB;IASO,aAAaC,SAA4C,CAAC,CAAC,EAAgB;QAC9E,MAAMC,SAAuB,CAAC;QAC9BC,OAAO,IAAI,CAACF,QAAQ,OAAO,CAACG,CAAAA;YAExB,MAAMC,UAAUJ,MAAM,CAACG,IAAI;YAC3BF,MAAM,CAACE,IAAI,GAAGE,eAAeD,WAAWE,gBAAgBF,QAAQ,KAAK,IAAIA,QAAQ,MAAM;QAC3F;QACA,OAAOH;IACX;IAGO,WACHD,SAA4C,CAAC,CAAC,EAChB;QAC9B,MAAMC,SAAyC,CAAC;QAChDC,OAAO,IAAI,CAACF,QAAQ,OAAO,CAACG,CAAAA;YAExB,MAAMC,UAAUJ,MAAM,CAACG,IAAI;YAC3B,IAAIE,eAAeD,UACfH,MAAM,CAACE,IAAI,GAAGC,QAAQ,KAAK;QAEnC;QACA,OAAOH;IACX;IAUO,aACHD,MAAoB,EACpBO,iBAAyB,EACzBC,SAAyC,CAAC,CAAC,EAC7C;QACE,MAAMC,UAAU,IAAI,CAAC,aAAa;QAClC,MAAMC,gBAAgB,IAAIC,uBAAuB,IAAI,CAAC,WAAW,EAAEC,CAAAA;YAC/D,IAAI,IAAI,CAAC,gBAAgB,CAACA,aACtB,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM;YAElC,OAAO,IAAI,CAAC,WAAW,EAAE,WAAW,CAACA,WAAW,EAAE;QACtD;QAGA,MAAMC,iBAAiB,IAAI,CAAC,gBAAgB,CAACN,qBACvC,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,CAAC,IAC5B,IAAI,CAAC,WAAW,EAAE,WAAW,CAACA,kBAAkB,EAAE,UAAU,CAAC;QAEnE,MAAMO,UAAU,IAAIC,IAAIb,OAAO,IAAI,CAACF;QACpC,MAAMgB,eAAed,OAAO,IAAI,CAACW;QAGjC,KAAK,MAAMV,OAAOa,aACd,IAAI,CAACF,QAAQ,GAAG,CAACX,MACT,IAAI,CAAC,gBAAgB,CAACI,qBACtBU,MAAMR,SAAS,CAAC,OAAO,EAAEN,KAAK,IAE9Bc,MAAMR,SAAS,CAAC,UAAU,EAAEF,kBAAkB,QAAQ,EAAEJ,KAAK;QAKzE,KAAK,MAAM,CAACA,KAAKe,MAAM,IAAIhB,OAAO,OAAO,CAACF,QAAS;YAC/C,MAAMmB,QAAQX,MAAM,CAACL,IAAI;YAEzB,IAAI,IAAI,CAAC,gBAAgB,CAACI,oBACtB,IAAIY,OAAO;gBAGPF,MAAMR,SAAS,CAAC,OAAO,EAAEN,KAAK;gBAC9BiB,IAAIX,SAAS,CAAC,OAAO,EAAEN,IAAI,MAAM,CAAC,EAAEgB;YACxC,OAAO;gBACHF,MAAMR,SAAS,CAAC,OAAO,EAAEN,KAAK;gBAC9BiB,IAAIX,SAAS,CAAC,OAAO,EAAEN,IAAI,OAAO,CAAC,EAAEe;YACzC;iBACG;gBACH,MAAMG,iBAAiBX,cAAc,iBAAiB,CAACP,KAAKI;gBAE5D,IAAIW,UAAUG,gBAAgB;oBAC1BJ,MAAMR,SAAS,CAAC,UAAU,EAAEF,kBAAkB,QAAQ,EAAEJ,KAAK;oBACzDgB,QACAC,IAAIX,SAAS,CAAC,UAAU,EAAEF,kBAAkB,QAAQ,EAAEJ,IAAI,MAAM,CAAC,EAAEgB,SAEnEC,IAAIX,SAAS,CAAC,UAAU,EAAEF,kBAAkB,QAAQ,EAAEJ,IAAI,OAAO,CAAC,EAAEe;gBAE5E,OACID,MAAMR,SAAS,CAAC,UAAU,EAAEF,kBAAkB,QAAQ,EAAEJ,KAAK;YAErE;QACJ;QAEA,OAAO,IAAImB,cAAc,IAAI,CAAC,SAAS,EAAEb;IAC7C;IAEQ,gBAAuC;QAC3C,MAAMc,aAAoC;YACtC,QAAQC,gBAAgBC,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,MAAM,CAAC;YAC3D,WAAW,CAAC;QAChB;QAGA,IAAI,IAAI,CAAC,WAAW,CAAC,SAAS,EAC1B;YAAA,KAAK,MAAM,CAACC,IAAIC,UAAU,IAAIzB,OAAO,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,EACnE,IAAIyB,UAAU,MAAM,EAChBP,IACIG,YACA,CAAC,UAAU,EAAEG,GAAG,OAAO,CAAC,EACxBF,gBAAgBC,KAAK,IAAI,CAAC,WAAW,CAAC,SAAS,CAACC,GAAG,CAAC,MAAM;QAGtE;QAGJ,OAAOH;IACX;IAEQ,iBAAiBK,IAAY,EAAW;QAC5C,OAAO,AAAmC,MAAnC,IAAI,CAAC,WAAW,CAAC,OAAO,CAACA;IACpC;AACJ"}

package/StylesUpdater.js

@@ -1,34 +1,29 @@
 import { jsonPatch } from "./jsonPatch.js";
 import set from "lodash/set.js";
-export class StylesUpdater {
-  constructor(elementId, bindings) {
-    this.elementId = elementId;
-    this.bindings = bindings;
-  }
-  applyToDocument(document) {
-    if (this.bindings.styles) {
-      document.bindings[this.elementId].styles = this.bindings.styles;
+class StylesUpdater {
+    constructor(elementId, bindings){
+        this.elementId = elementId;
+        this.bindings = bindings;
     }
-    if (this.bindings.overrides) {
-      for (const [bp, overrides] of Object.entries(this.bindings.overrides)) {
-        if (overrides.styles) {
-          set(document.bindings, `${this.elementId}.overrides.${bp}.styles`, structuredClone(this.bindings.overrides[bp].styles));
+    applyToDocument(document) {
+        if (this.bindings.styles) document.bindings[this.elementId].styles = this.bindings.styles;
+        if (this.bindings.overrides) {
+            for (const [bp, overrides] of Object.entries(this.bindings.overrides))if (overrides.styles) set(document.bindings, `${this.elementId}.overrides.${bp}.styles`, structuredClone(this.bindings.overrides[bp].styles));
         }
-      }
     }
-  }
-  createJsonPatch(bindings) {
-    const toCompare = {
-      ...this.bindings
-    };
-    if (Object.keys(toCompare.overrides ?? {}).length === 0) {
-      delete toCompare.overrides;
+    createJsonPatch(bindings) {
+        const toCompare = {
+            ...this.bindings
+        };
+        if (0 === Object.keys(toCompare.overrides ?? {}).length) delete toCompare.overrides;
+        const ignore = [
+            "/inputs",
+            "/overrides/inputs",
+            "/metadata"
+        ];
+        return jsonPatch.compare(bindings, toCompare).filter((op)=>!ignore.some((prefix)=>op.path.startsWith(prefix)));
     }
-    const ignore = ["/inputs", "/overrides/inputs", "/metadata"];
-    return jsonPatch.compare(bindings, toCompare).filter(op => {
-      return !ignore.some(prefix => op.path.startsWith(prefix));
-    });
-  }
 }
+export { StylesUpdater };
 
 //# sourceMappingURL=StylesUpdater.js.map