@webiny/app-website-builder 6.0.0-alpha.0

package/sdk/PreviewDocument.js

@@ -0,0 +1,35 @@
+import { getHeadersProvider } from "./headersProvider";
+export class PreviewDocument {
+  constructor(prefix, query) {
+    this.props = {};
+    query.forEach((value, key) => {
+      if (key.startsWith(prefix + ".")) {
+        const strippedKey = key.slice(prefix.length + 1); // +1 for the dot
+        this.props[strippedKey] = value;
+      }
+    });
+  }
+  static createFromWindow() {
+    const query = new URLSearchParams(window.location.search);
+    return new PreviewDocument("wb", query);
+  }
+  static async createFromHeaders() {
+    const headersProvider = getHeadersProvider();
+    const headers = await headersProvider();
+    const previewFromHeaders = headers.get("X-Preview-Params");
+    return new PreviewDocument("wb", new URLSearchParams(previewFromHeaders ?? ""));
+  }
+  matches(params) {
+    for (const [key, value] of Object.entries(params)) {
+      if (this.props[key] !== value) {
+        return false;
+      }
+    }
+    return true;
+  }
+  getId() {
+    return this.props.id;
+  }
+}
+
+//# sourceMappingURL=PreviewDocument.js.map

package/sdk/PreviewDocument.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getHeadersProvider","PreviewDocument","constructor","prefix","query","props","forEach","value","key","startsWith","strippedKey","slice","length","createFromWindow","URLSearchParams","window","location","search","createFromHeaders","headersProvider","headers","previewFromHeaders","get","matches","params","Object","entries","getId","id"],"sources":["PreviewDocument.ts"],"sourcesContent":["import { getHeadersProvider } from \"./headersProvider\";\n\nexport class PreviewDocument {\n    public readonly props: Record<string, string>;\n\n    private constructor(prefix: string, query: URLSearchParams) {\n        this.props = {};\n        query.forEach((value, key) => {\n            if (key.startsWith(prefix + \".\")) {\n                const strippedKey = key.slice(prefix.length + 1); // +1 for the dot\n                this.props[strippedKey] = value as string;\n            }\n        });\n    }\n\n    static createFromWindow(): PreviewDocument {\n        const query = new URLSearchParams(window.location.search);\n        return new PreviewDocument(\"wb\", query);\n    }\n\n    static async createFromHeaders(): Promise<PreviewDocument> {\n        const headersProvider = getHeadersProvider();\n        const headers = await headersProvider();\n        const previewFromHeaders = headers.get(\"X-Preview-Params\");\n\n        return new PreviewDocument(\"wb\", new URLSearchParams(previewFromHeaders ?? \"\"));\n    }\n\n    matches(params: Record<string, string>) {\n        for (const [key, value] of Object.entries(params)) {\n            if (this.props[key] !== value) {\n                return false;\n            }\n        }\n        return true;\n    }\n\n    getId() {\n        return this.props.id;\n    }\n}\n"],"mappings":"AAAA,SAASA,kBAAkB;AAE3B,OAAO,MAAMC,eAAe,CAAC;EAGjBC,WAAWA,CAACC,MAAc,EAAEC,KAAsB,EAAE;IACxD,IAAI,CAACC,KAAK,GAAG,CAAC,CAAC;IACfD,KAAK,CAACE,OAAO,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;MAC1B,IAAIA,GAAG,CAACC,UAAU,CAACN,MAAM,GAAG,GAAG,CAAC,EAAE;QAC9B,MAAMO,WAAW,GAAGF,GAAG,CAACG,KAAK,CAACR,MAAM,CAACS,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAClD,IAAI,CAACP,KAAK,CAACK,WAAW,CAAC,GAAGH,KAAe;MAC7C;IACJ,CAAC,CAAC;EACN;EAEA,OAAOM,gBAAgBA,CAAA,EAAoB;IACvC,MAAMT,KAAK,GAAG,IAAIU,eAAe,CAACC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;IACzD,OAAO,IAAIhB,eAAe,CAAC,IAAI,EAAEG,KAAK,CAAC;EAC3C;EAEA,aAAac,iBAAiBA,CAAA,EAA6B;IACvD,MAAMC,eAAe,GAAGnB,kBAAkB,CAAC,CAAC;IAC5C,MAAMoB,OAAO,GAAG,MAAMD,eAAe,CAAC,CAAC;IACvC,MAAME,kBAAkB,GAAGD,OAAO,CAACE,GAAG,CAAC,kBAAkB,CAAC;IAE1D,OAAO,IAAIrB,eAAe,CAAC,IAAI,EAAE,IAAIa,eAAe,CAACO,kBAAkB,IAAI,EAAE,CAAC,CAAC;EACnF;EAEAE,OAAOA,CAACC,MAA8B,EAAE;IACpC,KAAK,MAAM,CAAChB,GAAG,EAAED,KAAK,CAAC,IAAIkB,MAAM,CAACC,OAAO,CAACF,MAAM,CAAC,EAAE;MAC/C,IAAI,IAAI,CAACnB,KAAK,CAACG,GAAG,CAAC,KAAKD,KAAK,EAAE;QAC3B,OAAO,KAAK;MAChB;IACJ;IACA,OAAO,IAAI;EACf;EAEAoB,KAAKA,CAAA,EAAG;IACJ,OAAO,IAAI,CAACtB,KAAK,CAACuB,EAAE;EACxB;AACJ","ignoreList":[]}

package/sdk/PreviewSdk.d.ts

@@ -0,0 +1,8 @@
+import type { IContentSdk, IDataProvider, PublicPage } from "./types.js";
+export declare class PreviewSdk implements IContentSdk {
+    private liveSdk;
+    private dataProvider;
+    constructor(dataProvider: IDataProvider, liveSdk: IContentSdk);
+    getPage(path: string): Promise<PublicPage | null>;
+    listPages(): Promise<PublicPage[]>;
+}

package/sdk/PreviewSdk.js

@@ -0,0 +1,22 @@
+import { PreviewDocument } from "./PreviewDocument";
+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);
+    }
+    return this.dataProvider.getPageById(previewDocument.getId());
+  }
+  async listPages() {
+    return this.liveSdk.listPages();
+  }
+}
+
+//# sourceMappingURL=PreviewSdk.js.map

package/sdk/PreviewSdk.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PreviewDocument","PreviewSdk","constructor","dataProvider","liveSdk","getPage","path","previewDocument","createFromHeaders","matches","type","getPageById","getId","listPages"],"sources":["PreviewSdk.ts"],"sourcesContent":["import type { IContentSdk, IDataProvider, PublicPage } from \"~/sdk/types.js\";\nimport { PreviewDocument } from \"~/sdk/PreviewDocument\";\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(): Promise<PublicPage[]> {\n        return this.liveSdk.listPages();\n    }\n}\n"],"mappings":"AACA,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,CAAA,EAA0B;IACrC,OAAO,IAAI,CAACT,OAAO,CAACS,SAAS,CAAC,CAAC;EACnC;AACJ","ignoreList":[]}

package/sdk/PreviewViewport.d.ts

@@ -0,0 +1,16 @@
+import { ElementBoxData, ElementSlotBoxData } from "./types.js";
+export declare class PreviewViewport {
+    private viewportManager;
+    constructor();
+    getBoxes(): {
+        [x: string]: ElementBoxData | ElementSlotBoxData;
+    };
+    getViewport(): import("./ViewportManager").ViewportInfo | {
+        width: number;
+        height: number;
+        scrollX: number;
+        scrollY: number;
+    };
+    getVisibleBoxes(): Record<string, ElementBoxData | ElementSlotBoxData>;
+    destroy(): void;
+}

package/sdk/PreviewViewport.js

@@ -0,0 +1,103 @@
+import { ViewportManager } from "./ViewportManager";
+export class PreviewViewport {
+  viewportManager = null;
+  constructor() {
+    this.viewportManager = new ViewportManager();
+  }
+  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
+        };
+      }
+    });
+
+    // 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() {
+    const viewport = this.viewportManager ? this.viewportManager.getViewport() : {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      scrollX: window.scrollX,
+      scrollY: window.scrollY
+    };
+    return viewport;
+  }
+  getVisibleBoxes() {
+    const allBoxes = this.getBoxes();
+    const viewport = this.getViewport();
+    const visibleBoxes = {};
+    for (const [id, box] of Object.entries(allBoxes)) {
+      const {
+        top,
+        left,
+        width,
+        height
+      } = box;
+      const bottom = top + height;
+      const right = left + width;
+      const isVisible = bottom > 0 && right > 0 && top < viewport.height && left < viewport.width;
+      if (isVisible) {
+        visibleBoxes[id] = box;
+      }
+    }
+    return visibleBoxes;
+  }
+  destroy() {
+    if (this.viewportManager) {
+      this.viewportManager.destroy();
+      this.viewportManager = null;
+    }
+  }
+}
+
+//# sourceMappingURL=PreviewViewport.js.map

package/sdk/PreviewViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ViewportManager","PreviewViewport","viewportManager","constructor","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","viewport","window","innerWidth","innerHeight","scrollX","scrollY","getVisibleBoxes","allBoxes","visibleBoxes","box","Object","entries","bottom","right","isVisible","destroy"],"sources":["PreviewViewport.ts"],"sourcesContent":["import { ElementBoxData, ElementSlotBoxData } from \"~/sdk/types.js\";\nimport { ViewportManager } from \"./ViewportManager\";\n\nexport class PreviewViewport {\n    private viewportManager: ViewportManager | null = null;\n\n    constructor() {\n        this.viewportManager = new ViewportManager();\n    }\n\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        const viewport = this.viewportManager\n            ? this.viewportManager.getViewport()\n            : {\n                  width: window.innerWidth,\n                  height: window.innerHeight,\n                  scrollX: window.scrollX,\n                  scrollY: window.scrollY\n              };\n\n        return viewport;\n    }\n\n    getVisibleBoxes(): Record<string, ElementBoxData | ElementSlotBoxData> {\n        const allBoxes = this.getBoxes();\n        const viewport = this.getViewport();\n\n        const visibleBoxes: Record<string, ElementBoxData | ElementSlotBoxData> = {};\n\n        for (const [id, box] of Object.entries(allBoxes)) {\n            const { top, left, width, height } = box;\n\n            const bottom = top + height;\n            const right = left + width;\n\n            const isVisible =\n                bottom > 0 && right > 0 && top < viewport.height && left < viewport.width;\n\n            if (isVisible) {\n                visibleBoxes[id] = box;\n            }\n        }\n\n        return visibleBoxes;\n    }\n\n    destroy(): void {\n        if (this.viewportManager) {\n            this.viewportManager.destroy();\n            this.viewportManager = null;\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/sdk/ResizeObserver.d.ts

@@ -0,0 +1,5 @@
+export declare const resizeObserver: {
+    observe: (element: HTMLElement) => void;
+    unobserve: (element: HTMLElement) => void;
+    onChange: (cb: () => void) => void;
+};

package/sdk/ResizeObserver.js

@@ -0,0 +1,41 @@
+let resizeQueue = {};
+const onChangeListeners = [];
+const flushResizeQueue = () => {
+  if (Object.entries(resizeQueue).length > 0) {
+    onChangeListeners.forEach(entry => {
+      entry();
+    });
+  }
+  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();
+      }
+    }
+    requestAnimationFrame(flushResizeQueue);
+  });
+}
+export const resizeObserver = {
+  observe: element => {
+    observer.observe(element);
+  },
+  unobserve: element => {
+    observer.unobserve(element);
+  },
+  onChange: cb => {
+    onChangeListeners.push(cb);
+  }
+};
+
+//# sourceMappingURL=ResizeObserver.js.map

package/sdk/ResizeObserver.js.map

@@ -0,0 +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":[]}

package/sdk/StylesBindingsProcessor.d.ts

@@ -0,0 +1,33 @@
+import type { DocumentElementBindings, DocumentElementStyleBindings } from "./types";
+import { StylesUpdater } from "./StylesUpdater";
+type DeepBindings = Record<string, any>;
+export type ElementStylesBindings = {
+    styles: DocumentElementStyleBindings;
+    overrides: {
+        [breakpoint: string]: {
+            styles: DocumentElementStyleBindings;
+        };
+    };
+};
+/**
+ * Handles deep-to-flat and flat-to-deep conversion of style bindings,
+ * with breakpoint inheritance awareness.
+ */
+export declare class StylesBindingsProcessor {
+    private breakpoints;
+    private rawBindings;
+    private elementId;
+    constructor(elementId: string, breakpoints: string[], rawBindings: DocumentElementBindings);
+    /**
+     * Converts flat style bindings into deep styles object (removes `.static`).
+     */
+    toDeepStyles(styles?: DocumentElementBindings["styles"]): DeepBindings;
+    /**
+     * Flattens deep styles object into flat bindings with `.static` wrappers.
+     * Skips overrides where the value matches inherited parent breakpoint.
+     */
+    createUpdate(styles: DeepBindings, currentBreakpoint: string): StylesUpdater;
+    private getBaseStyles;
+    private isBaseBreakpoint;
+}
+export {};

package/sdk/StylesBindingsProcessor.js

@@ -0,0 +1,91 @@
+import set from "lodash/set";
+import unset from "lodash/unset";
+import { InheritedValueResolver } from "./InheritedValueResolver";
+import { StylesUpdater } from "./StylesUpdater";
+/**
+ * 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}`);
+        }
+      }
+    }
+    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}`);
+        }
+      }
+    }
+    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));
+        }
+      }
+    }
+    return baseStyles;
+  }
+  isBaseBreakpoint(name) {
+    return this.breakpoints.indexOf(name) === 0;
+  }
+}
+
+//# sourceMappingURL=StylesBindingsProcessor.js.map

package/sdk/StylesBindingsProcessor.js.map

@@ -0,0 +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\";\nimport unset from \"lodash/unset\";\nimport type { DocumentElementBindings, DocumentElementStyleBindings } from \"~/sdk/types\";\nimport { InheritedValueResolver } from \"~/sdk/InheritedValueResolver\";\nimport { StylesUpdater } from \"./StylesUpdater\";\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":[]}

package/sdk/StylesUpdater.d.ts

@@ -0,0 +1,10 @@
+import type { Document, DocumentElementBindings } from "./types";
+import type { IBindingsUpdater } from "./IBindingsUpdater";
+import type { ElementStylesBindings } from "./StylesBindingsProcessor";
+export declare class StylesUpdater implements IBindingsUpdater {
+    private readonly bindings;
+    private elementId;
+    constructor(elementId: string, bindings: ElementStylesBindings);
+    applyToDocument(document: Document): void;
+    createJsonPatch(bindings: DocumentElementBindings): import("fast-json-patch/module/core").Operation[];
+}

package/sdk/StylesUpdater.js

@@ -0,0 +1,34 @@
+import { jsonPatch } from "./jsonPatch";
+import set from "lodash/set";
+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;
+    }
+    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;
+    }
+    const ignore = ["/inputs", "/overrides/inputs", "/metadata"];
+    return jsonPatch.compare(bindings, toCompare).filter(op => {
+      return !ignore.some(prefix => op.path.startsWith(prefix));
+    });
+  }
+}
+
+//# sourceMappingURL=StylesUpdater.js.map

package/sdk/StylesUpdater.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsonPatch","set","StylesUpdater","constructor","elementId","bindings","applyToDocument","document","styles","overrides","bp","Object","entries","structuredClone","createJsonPatch","toCompare","keys","length","ignore","compare","filter","op","some","prefix","path","startsWith"],"sources":["StylesUpdater.ts"],"sourcesContent":["import { jsonPatch } from \"~/sdk/jsonPatch\";\nimport set from \"lodash/set\";\nimport type { Document, DocumentElementBindings } from \"./types\";\nimport type { IBindingsUpdater } from \"./IBindingsUpdater\";\nimport type { ElementStylesBindings } from \"./StylesBindingsProcessor\";\n\nexport class StylesUpdater implements IBindingsUpdater {\n    private readonly bindings: ElementStylesBindings;\n    private elementId: string;\n\n    constructor(elementId: string, bindings: ElementStylesBindings) {\n        this.elementId = elementId;\n        this.bindings = bindings;\n    }\n\n    applyToDocument(document: Document) {\n        if (this.bindings.styles) {\n            document.bindings[this.elementId].styles = this.bindings.styles;\n        }\n\n        if (this.bindings.overrides) {\n            for (const [bp, overrides] of Object.entries(this.bindings.overrides)) {\n                if (overrides.styles) {\n                    set(\n                        document.bindings,\n                        `${this.elementId}.overrides.${bp}.styles`,\n                        structuredClone(this.bindings.overrides[bp].styles)\n                    );\n                }\n            }\n        }\n    }\n\n    createJsonPatch(bindings: DocumentElementBindings) {\n        const toCompare: Partial<DocumentElementBindings> = { ...this.bindings };\n        if (Object.keys(toCompare.overrides ?? {}).length === 0) {\n            delete toCompare.overrides;\n        }\n\n        const ignore = [\"/inputs\", \"/overrides/inputs\", \"/metadata\"];\n\n        return jsonPatch.compare(bindings, toCompare).filter(op => {\n            return !ignore.some(prefix => op.path.startsWith(prefix));\n        });\n    }\n}\n"],"mappings":"AAAA,SAASA,SAAS;AAClB,OAAOC,GAAG,MAAM,YAAY;AAK5B,OAAO,MAAMC,aAAa,CAA6B;EAInDC,WAAWA,CAACC,SAAiB,EAAEC,QAA+B,EAAE;IAC5D,IAAI,CAACD,SAAS,GAAGA,SAAS;IAC1B,IAAI,CAACC,QAAQ,GAAGA,QAAQ;EAC5B;EAEAC,eAAeA,CAACC,QAAkB,EAAE;IAChC,IAAI,IAAI,CAACF,QAAQ,CAACG,MAAM,EAAE;MACtBD,QAAQ,CAACF,QAAQ,CAAC,IAAI,CAACD,SAAS,CAAC,CAACI,MAAM,GAAG,IAAI,CAACH,QAAQ,CAACG,MAAM;IACnE;IAEA,IAAI,IAAI,CAACH,QAAQ,CAACI,SAAS,EAAE;MACzB,KAAK,MAAM,CAACC,EAAE,EAAED,SAAS,CAAC,IAAIE,MAAM,CAACC,OAAO,CAAC,IAAI,CAACP,QAAQ,CAACI,SAAS,CAAC,EAAE;QACnE,IAAIA,SAAS,CAACD,MAAM,EAAE;UAClBP,GAAG,CACCM,QAAQ,CAACF,QAAQ,EACjB,GAAG,IAAI,CAACD,SAAS,cAAcM,EAAE,SAAS,EAC1CG,eAAe,CAAC,IAAI,CAACR,QAAQ,CAACI,SAAS,CAACC,EAAE,CAAC,CAACF,MAAM,CACtD,CAAC;QACL;MACJ;IACJ;EACJ;EAEAM,eAAeA,CAACT,QAAiC,EAAE;IAC/C,MAAMU,SAA2C,GAAG;MAAE,GAAG,IAAI,CAACV;IAAS,CAAC;IACxE,IAAIM,MAAM,CAACK,IAAI,CAACD,SAAS,CAACN,SAAS,IAAI,CAAC,CAAC,CAAC,CAACQ,MAAM,KAAK,CAAC,EAAE;MACrD,OAAOF,SAAS,CAACN,SAAS;IAC9B;IAEA,MAAMS,MAAM,GAAG,CAAC,SAAS,EAAE,mBAAmB,EAAE,WAAW,CAAC;IAE5D,OAAOlB,SAAS,CAACmB,OAAO,CAACd,QAAQ,EAAEU,SAAS,CAAC,CAACK,MAAM,CAACC,EAAE,IAAI;MACvD,OAAO,CAACH,MAAM,CAACI,IAAI,CAACC,MAAM,IAAIF,EAAE,CAACG,IAAI,CAACC,UAAU,CAACF,MAAM,CAAC,CAAC;IAC7D,CAAC,CAAC;EACN;AACJ","ignoreList":[]}

package/sdk/ViewportManager.d.ts

@@ -0,0 +1,31 @@
+import { Breakpoint } from "./types";
+export interface ViewportInfo {
+    width: number;
+    height: number;
+    scrollX: number;
+    scrollY: number;
+    breakpoint: string;
+    breakpoints: Breakpoint[];
+}
+export declare class ViewportManager {
+    private readonly changeTimeout;
+    private readonly changeStartSubscribers;
+    private readonly changeEndSubscribers;
+    private isChanging;
+    private changeTimer;
+    private breakpoints;
+    constructor(timeout?: number);
+    onViewportChangeStart(callback: (info: ViewportInfo) => void): () => void;
+    onViewportChangeEnd(callback: (info: ViewportInfo) => void): () => void;
+    /**
+     * Get the current viewport information
+     */
+    getViewport(): ViewportInfo;
+    destroy(): void;
+    private handleScroll;
+    private handleResize;
+    private handleViewportChange;
+    private getViewportInfo;
+    private notifySubscribers;
+}
+export declare const viewportManager: ViewportManager;

package/sdk/ViewportManager.js

@@ -0,0 +1,111 @@
+import { environment } from "./Environment";
+export class ViewportManager {
+  breakpoints = [{
+    name: "desktop",
+    minWidth: 0,
+    maxWidth: 4000
+  }, {
+    name: "tablet",
+    minWidth: 0,
+    maxWidth: 991
+  }, {
+    name: "mobile",
+    minWidth: 0,
+    maxWidth: 767
+  }];
+  constructor(timeout = 150) {
+    this.changeTimeout = timeout;
+    this.changeStartSubscribers = new Set();
+    this.changeEndSubscribers = new Set();
+    this.isChanging = false;
+    this.changeTimer = null;
+    this.handleViewportChange = this.handleViewportChange.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+    if (environment.isClient()) {
+      window.addEventListener("scroll", this.handleScroll, {
+        passive: true
+      });
+      window.addEventListener("resize", this.handleResize, {
+        passive: true
+      });
+    }
+  }
+  onViewportChangeStart(callback) {
+    this.changeStartSubscribers.add(callback);
+    return () => this.changeStartSubscribers.delete(callback);
+  }
+  onViewportChangeEnd(callback) {
+    this.changeEndSubscribers.add(callback);
+    return () => this.changeEndSubscribers.delete(callback);
+  }
+
+  /**
+   * Get the current viewport information
+   */
+  getViewport() {
+    return this.getViewportInfo();
+  }
+  destroy() {
+    if (environment.isClient()) {
+      window.removeEventListener("scroll", this.handleScroll);
+      window.removeEventListener("resize", this.handleResize);
+      if (this.changeTimer !== null) {
+        clearTimeout(this.changeTimer);
+      }
+      this.changeStartSubscribers.clear();
+      this.changeEndSubscribers.clear();
+    }
+  }
+  handleScroll() {
+    this.handleViewportChange();
+  }
+  handleResize() {
+    this.handleViewportChange();
+  }
+  handleViewportChange() {
+    const viewportInfo = this.getViewportInfo();
+    if (!this.isChanging) {
+      this.isChanging = true;
+      this.notifySubscribers(this.changeStartSubscribers, viewportInfo);
+    }
+    if (this.changeTimer !== null) {
+      clearTimeout(this.changeTimer);
+    }
+    this.changeTimer = window.setTimeout(() => {
+      this.isChanging = false;
+      this.notifySubscribers(this.changeEndSubscribers, viewportInfo);
+    }, this.changeTimeout);
+  }
+  getViewportInfo() {
+    const modes = [...this.breakpoints].reverse();
+    const viewport = environment.isClient() ? {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      scrollX: window.scrollX,
+      scrollY: window.scrollY
+    } : {
+      // During SSR or Next.js build, viewport is not available.
+      height: 0,
+      width: 2000,
+      scrollX: 0,
+      scrollY: 0
+    };
+    const [breakpoint] = modes.filter(mode => mode.maxWidth >= viewport.width);
+    return {
+      ...viewport,
+      breakpoint: breakpoint.name,
+      breakpoints: this.breakpoints
+    };
+  }
+  notifySubscribers(subscribers, viewportInfo) {
+    subscribers.forEach(callback => {
+      if (typeof callback === "function") {
+        callback(viewportInfo);
+      }
+    });
+  }
+}
+export const viewportManager = new ViewportManager();
+
+//# sourceMappingURL=ViewportManager.js.map

package/sdk/ViewportManager.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["environment","ViewportManager","breakpoints","name","minWidth","maxWidth","constructor","timeout","changeTimeout","changeStartSubscribers","Set","changeEndSubscribers","isChanging","changeTimer","handleViewportChange","bind","handleScroll","handleResize","isClient","window","addEventListener","passive","onViewportChangeStart","callback","add","delete","onViewportChangeEnd","getViewport","getViewportInfo","destroy","removeEventListener","clearTimeout","clear","viewportInfo","notifySubscribers","setTimeout","modes","reverse","viewport","width","innerWidth","height","innerHeight","scrollX","scrollY","breakpoint","filter","mode","subscribers","forEach","viewportManager"],"sources":["ViewportManager.ts"],"sourcesContent":["import { Breakpoint } from \"~/sdk/types\";\nimport { environment } from \"~/sdk/Environment\";\n\nexport interface ViewportInfo {\n    width: number;\n    height: number;\n    scrollX: number;\n    scrollY: number;\n    breakpoint: string;\n    breakpoints: Breakpoint[];\n}\n\nexport class ViewportManager {\n    private readonly changeTimeout: number;\n    private readonly changeStartSubscribers: Set<(info: ViewportInfo) => void>;\n    private readonly changeEndSubscribers: Set<(info: ViewportInfo) => void>;\n    private isChanging: boolean;\n    private changeTimer: number | null;\n    private breakpoints: Breakpoint[] = [\n        {\n            name: \"desktop\",\n            minWidth: 0,\n            maxWidth: 4000\n        },\n        {\n            name: \"tablet\",\n            minWidth: 0,\n            maxWidth: 991\n        },\n        {\n            name: \"mobile\",\n            minWidth: 0,\n            maxWidth: 767\n        }\n    ];\n\n    constructor(timeout: number = 150) {\n        this.changeTimeout = timeout;\n        this.changeStartSubscribers = new Set();\n        this.changeEndSubscribers = new Set();\n        this.isChanging = false;\n        this.changeTimer = null;\n\n        this.handleViewportChange = this.handleViewportChange.bind(this);\n        this.handleScroll = this.handleScroll.bind(this);\n        this.handleResize = this.handleResize.bind(this);\n\n        if (environment.isClient()) {\n            window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n            window.addEventListener(\"resize\", this.handleResize, { passive: true });\n        }\n    }\n\n    public onViewportChangeStart(callback: (info: ViewportInfo) => void): () => void {\n        this.changeStartSubscribers.add(callback);\n        return () => this.changeStartSubscribers.delete(callback);\n    }\n\n    public onViewportChangeEnd(callback: (info: ViewportInfo) => void): () => void {\n        this.changeEndSubscribers.add(callback);\n        return () => this.changeEndSubscribers.delete(callback);\n    }\n\n    /**\n     * Get the current viewport information\n     */\n    public getViewport(): ViewportInfo {\n        return this.getViewportInfo();\n    }\n\n    public destroy(): void {\n        if (environment.isClient()) {\n            window.removeEventListener(\"scroll\", this.handleScroll);\n            window.removeEventListener(\"resize\", this.handleResize);\n            if (this.changeTimer !== null) {\n                clearTimeout(this.changeTimer);\n            }\n            this.changeStartSubscribers.clear();\n            this.changeEndSubscribers.clear();\n        }\n    }\n\n    private handleScroll(): void {\n        this.handleViewportChange();\n    }\n\n    private handleResize(): void {\n        this.handleViewportChange();\n    }\n\n    private handleViewportChange(): void {\n        const viewportInfo = this.getViewportInfo();\n\n        if (!this.isChanging) {\n            this.isChanging = true;\n            this.notifySubscribers(this.changeStartSubscribers, viewportInfo);\n        }\n\n        if (this.changeTimer !== null) {\n            clearTimeout(this.changeTimer);\n        }\n\n        this.changeTimer = window.setTimeout(() => {\n            this.isChanging = false;\n            this.notifySubscribers(this.changeEndSubscribers, viewportInfo);\n        }, this.changeTimeout);\n    }\n\n    private getViewportInfo(): ViewportInfo {\n        const modes = [...this.breakpoints].reverse();\n        const viewport = environment.isClient()\n            ? {\n                  width: window.innerWidth,\n                  height: window.innerHeight,\n                  scrollX: window.scrollX,\n                  scrollY: window.scrollY\n              }\n            : {\n                  // During SSR or Next.js build, viewport is not available.\n                  height: 0,\n                  width: 2000,\n                  scrollX: 0,\n                  scrollY: 0\n              };\n\n        const [breakpoint] = modes.filter(mode => mode.maxWidth >= viewport.width);\n\n        return { ...viewport, breakpoint: breakpoint.name, breakpoints: this.breakpoints };\n    }\n\n    private notifySubscribers(\n        subscribers: Set<(info: ViewportInfo) => void>,\n        viewportInfo: ViewportInfo\n    ): void {\n        subscribers.forEach(callback => {\n            if (typeof callback === \"function\") {\n                callback(viewportInfo);\n            }\n        });\n    }\n}\n\nexport const viewportManager = new ViewportManager();\n"],"mappings":"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","ignoreList":[]}