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

package/InheritanceProcessor.test.js

@@ -1,192 +1,192 @@
+import { describe, expect, it } from "vitest";
 import { InheritanceProcessor } from "./InheritanceProcessor.js";
-// Mock AST for inputs
-const inputsAst = [{
-  name: "rowGap",
-  type: "text",
-  list: false,
-  path: "rowGap",
-  children: [],
-  input: {
-    type: "text",
-    responsive: true,
-    name: "rowGap"
-  }
-}, {
-  name: "title",
-  type: "text",
-  list: false,
-  path: "title",
-  children: [],
-  input: {
-    type: "text",
-    responsive: false,
-    name: "title"
-  }
-}];
-describe("InheritanceProcessor", () => {
-  const breakpoints = ["desktop", "tablet", "mobile"];
-  const processor = new InheritanceProcessor(breakpoints, inputsAst);
-  it("should correctly compute inheritance info for responsive inputs and styles", () => {
-    const bindings = {
-      inputs: {
-        rowGap: {
-          static: "20px"
-        },
-        title: {
-          static: "Default Title"
+const inputsAst = [
+    {
+        name: "rowGap",
+        type: "text",
+        list: false,
+        path: "rowGap",
+        children: [],
+        input: {
+            type: "text",
+            responsive: true,
+            name: "rowGap"
         }
-      },
-      styles: {
-        paddingTop: {
-          static: "10px"
-        },
-        color: {
-          static: "red"
+    },
+    {
+        name: "title",
+        type: "text",
+        list: false,
+        path: "title",
+        children: [],
+        input: {
+            type: "text",
+            responsive: false,
+            name: "title"
         }
-      },
-      overrides: {
-        tablet: {
-          styles: {
-            paddingTop: {
-              static: "5px"
-            }
-          }
-        },
-        mobile: {
-          inputs: {
-            rowGap: {
-              static: "10px"
-            }
-          },
-          styles: {
-            paddingTop: {
-              static: "2px"
+    }
+];
+describe("InheritanceProcessor", ()=>{
+    const breakpoints = [
+        "desktop",
+        "tablet",
+        "mobile"
+    ];
+    const processor = new InheritanceProcessor(breakpoints, inputsAst);
+    it("should correctly compute inheritance info for responsive inputs and styles", ()=>{
+        const bindings = {
+            inputs: {
+                rowGap: {
+                    static: "20px"
+                },
+                title: {
+                    static: "Default Title"
+                }
+            },
+            styles: {
+                paddingTop: {
+                    static: "10px"
+                },
+                color: {
+                    static: "red"
+                }
             },
-            color: {
-              static: "blue"
+            overrides: {
+                tablet: {
+                    styles: {
+                        paddingTop: {
+                            static: "5px"
+                        }
+                    }
+                },
+                mobile: {
+                    inputs: {
+                        rowGap: {
+                            static: "10px"
+                        }
+                    },
+                    styles: {
+                        paddingTop: {
+                            static: "2px"
+                        },
+                        color: {
+                            static: "blue"
+                        }
+                    }
+                }
             }
-          }
-        }
-      }
-    };
-
-    // desktop breakpoint
-    const desktopResult = processor.getInheritanceMap(bindings, "desktop");
-    expect(desktopResult.inputs["rowGap"]).toEqual({
-      overridden: true,
-      inheritedFrom: undefined
-    });
-    expect(desktopResult.inputs["title"]).toBeUndefined(); // not responsive
-    expect(desktopResult.styles["paddingTop"]).toEqual({
-      overridden: true,
-      inheritedFrom: undefined
-    });
-    expect(desktopResult.styles["color"]).toEqual({
-      overridden: true,
-      inheritedFrom: undefined
-    });
-
-    // tablet breakpoint
-    const tabletResult = processor.getInheritanceMap(bindings, "tablet");
-    expect(tabletResult.inputs["rowGap"]).toEqual({
-      overridden: false,
-      inheritedFrom: "desktop"
-    });
-    expect(tabletResult.styles["paddingTop"]).toEqual({
-      overridden: true,
-      inheritedFrom: "desktop"
-    });
-    expect(tabletResult.styles["color"]).toEqual({
-      overridden: false,
-      inheritedFrom: "desktop"
-    });
-
-    // mobile breakpoint
-    const mobileResult = processor.getInheritanceMap(bindings, "mobile");
-    expect(mobileResult.inputs["rowGap"]).toEqual({
-      overridden: true,
-      inheritedFrom: "desktop"
-    });
-    expect(mobileResult.styles["paddingTop"]).toEqual({
-      overridden: true,
-      inheritedFrom: "tablet"
-    });
-    expect(mobileResult.styles["color"]).toEqual({
-      overridden: true,
-      inheritedFrom: "desktop"
-    });
-  });
-  it("should skip non-responsive inputs in inheritance info", () => {
-    const bindings = {
-      inputs: {
-        title: {
-          static: "Static Title"
-        }
-      },
-      styles: {},
-      overrides: {}
-    };
-    const result = processor.getInheritanceMap(bindings, "desktop");
-    expect(result.inputs["title"]).toBeUndefined();
-  });
-  it("should handle missing overrides gracefully", () => {
-    const bindings = {
-      inputs: {
-        rowGap: {
-          static: "20px"
-        }
-      },
-      styles: {
-        paddingTop: {
-          static: "10px"
-        }
-      }
-      // no overrides
-    };
-    const result = processor.getInheritanceMap(bindings, "mobile");
-    expect(result.inputs["rowGap"]).toEqual({
-      overridden: false,
-      inheritedFrom: "desktop"
+        };
+        const desktopResult = processor.getInheritanceMap(bindings, "desktop");
+        expect(desktopResult.inputs["rowGap"]).toEqual({
+            overridden: true,
+            inheritedFrom: void 0
+        });
+        expect(desktopResult.inputs["title"]).toBeUndefined();
+        expect(desktopResult.styles["paddingTop"]).toEqual({
+            overridden: true,
+            inheritedFrom: void 0
+        });
+        expect(desktopResult.styles["color"]).toEqual({
+            overridden: true,
+            inheritedFrom: void 0
+        });
+        const tabletResult = processor.getInheritanceMap(bindings, "tablet");
+        expect(tabletResult.inputs["rowGap"]).toEqual({
+            overridden: false,
+            inheritedFrom: "desktop"
+        });
+        expect(tabletResult.styles["paddingTop"]).toEqual({
+            overridden: true,
+            inheritedFrom: "desktop"
+        });
+        expect(tabletResult.styles["color"]).toEqual({
+            overridden: false,
+            inheritedFrom: "desktop"
+        });
+        const mobileResult = processor.getInheritanceMap(bindings, "mobile");
+        expect(mobileResult.inputs["rowGap"]).toEqual({
+            overridden: true,
+            inheritedFrom: "desktop"
+        });
+        expect(mobileResult.styles["paddingTop"]).toEqual({
+            overridden: true,
+            inheritedFrom: "tablet"
+        });
+        expect(mobileResult.styles["color"]).toEqual({
+            overridden: true,
+            inheritedFrom: "desktop"
+        });
     });
-    expect(result.styles["paddingTop"]).toEqual({
-      overridden: false,
-      inheritedFrom: "desktop"
+    it("should skip non-responsive inputs in inheritance info", ()=>{
+        const bindings = {
+            inputs: {
+                title: {
+                    static: "Static Title"
+                }
+            },
+            styles: {},
+            overrides: {}
+        };
+        const result = processor.getInheritanceMap(bindings, "desktop");
+        expect(result.inputs["title"]).toBeUndefined();
     });
-  });
-  it("should handle missing ancestor values gracefully", () => {
-    const bindings = {
-      inputs: {},
-      styles: {
-        backgroundColor: {
-          static: "#ec8787"
-        }
-      },
-      overrides: {
-        tablet: {
-          styles: {}
-        },
-        mobile: {
-          styles: {
-            backgroundColor: {
-              static: "#50e3c2"
+    it("should handle missing overrides gracefully", ()=>{
+        const bindings = {
+            inputs: {
+                rowGap: {
+                    static: "20px"
+                }
             },
-            marginTop: {
-              static: "122px"
+            styles: {
+                paddingTop: {
+                    static: "10px"
+                }
             }
-          }
-        }
-      }
-    };
-    const result = processor.getInheritanceMap(bindings, "mobile");
-    expect(result.styles["backgroundColor"]).toEqual({
-      overridden: true,
-      inheritedFrom: "desktop"
+        };
+        const result = processor.getInheritanceMap(bindings, "mobile");
+        expect(result.inputs["rowGap"]).toEqual({
+            overridden: false,
+            inheritedFrom: "desktop"
+        });
+        expect(result.styles["paddingTop"]).toEqual({
+            overridden: false,
+            inheritedFrom: "desktop"
+        });
     });
-    expect(result.styles["marginTop"]).toEqual({
-      overridden: true,
-      inheritedFrom: "desktop"
+    it("should handle missing ancestor values gracefully", ()=>{
+        const bindings = {
+            inputs: {},
+            styles: {
+                backgroundColor: {
+                    static: "#ec8787"
+                }
+            },
+            overrides: {
+                tablet: {
+                    styles: {}
+                },
+                mobile: {
+                    styles: {
+                        backgroundColor: {
+                            static: "#50e3c2"
+                        },
+                        marginTop: {
+                            static: "122px"
+                        }
+                    }
+                }
+            }
+        };
+        const result = processor.getInheritanceMap(bindings, "mobile");
+        expect(result.styles["backgroundColor"]).toEqual({
+            overridden: true,
+            inheritedFrom: "desktop"
+        });
+        expect(result.styles["marginTop"]).toEqual({
+            overridden: true,
+            inheritedFrom: "desktop"
+        });
     });
-  });
 });
 
 //# sourceMappingURL=InheritanceProcessor.test.js.map

package/InheritanceProcessor.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["InheritanceProcessor","inputsAst","name","type","list","path","children","input","responsive","describe","breakpoints","processor","it","bindings","inputs","rowGap","static","title","styles","paddingTop","color","overrides","tablet","mobile","desktopResult","getInheritanceMap","expect","toEqual","overridden","inheritedFrom","undefined","toBeUndefined","tabletResult","mobileResult","result","backgroundColor","marginTop"],"sources":["InheritanceProcessor.test.ts"],"sourcesContent":["import { InheritanceProcessor } from \"./InheritanceProcessor.js\";\nimport type { InputAstNode } from \"~/ComponentManifestToAstConverter.js\";\n\n// Mock AST for inputs\nconst inputsAst: InputAstNode[] = [\n    {\n        name: \"rowGap\",\n        type: \"text\",\n        list: false,\n        path: \"rowGap\",\n        children: [],\n        input: { type: \"text\", responsive: true, name: \"rowGap\" }\n    },\n    {\n        name: \"title\",\n        type: \"text\",\n        list: false,\n        path: \"title\",\n        children: [],\n        input: { type: \"text\", responsive: false, name: \"title\" }\n    }\n];\n\ndescribe(\"InheritanceProcessor\", () => {\n    const breakpoints = [\"desktop\", \"tablet\", \"mobile\"];\n    const processor = new InheritanceProcessor(breakpoints, inputsAst);\n\n    it(\"should correctly compute inheritance info for responsive inputs and styles\", () => {\n        const bindings = {\n            inputs: {\n                rowGap: { static: \"20px\" },\n                title: { static: \"Default Title\" }\n            },\n            styles: {\n                paddingTop: { static: \"10px\" },\n                color: { static: \"red\" }\n            },\n            overrides: {\n                tablet: {\n                    styles: {\n                        paddingTop: { static: \"5px\" }\n                    }\n                },\n                mobile: {\n                    inputs: {\n                        rowGap: { static: \"10px\" }\n                    },\n                    styles: {\n                        paddingTop: { static: \"2px\" },\n                        color: { static: \"blue\" }\n                    }\n                }\n            }\n        };\n\n        // desktop breakpoint\n        const desktopResult = processor.getInheritanceMap(bindings as any, \"desktop\");\n\n        expect(desktopResult.inputs[\"rowGap\"]).toEqual({\n            overridden: true,\n            inheritedFrom: undefined\n        });\n        expect(desktopResult.inputs[\"title\"]).toBeUndefined(); // not responsive\n        expect(desktopResult.styles[\"paddingTop\"]).toEqual({\n            overridden: true,\n            inheritedFrom: undefined\n        });\n        expect(desktopResult.styles[\"color\"]).toEqual({\n            overridden: true,\n            inheritedFrom: undefined\n        });\n\n        // tablet breakpoint\n        const tabletResult = processor.getInheritanceMap(bindings as any, \"tablet\");\n\n        expect(tabletResult.inputs[\"rowGap\"]).toEqual({\n            overridden: false,\n            inheritedFrom: \"desktop\"\n        });\n        expect(tabletResult.styles[\"paddingTop\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"desktop\"\n        });\n        expect(tabletResult.styles[\"color\"]).toEqual({\n            overridden: false,\n            inheritedFrom: \"desktop\"\n        });\n\n        // mobile breakpoint\n        const mobileResult = processor.getInheritanceMap(bindings as any, \"mobile\");\n\n        expect(mobileResult.inputs[\"rowGap\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"desktop\"\n        });\n        expect(mobileResult.styles[\"paddingTop\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"tablet\"\n        });\n        expect(mobileResult.styles[\"color\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"desktop\"\n        });\n    });\n\n    it(\"should skip non-responsive inputs in inheritance info\", () => {\n        const bindings = {\n            inputs: {\n                title: { static: \"Static Title\" }\n            },\n            styles: {},\n            overrides: {}\n        };\n\n        const result = processor.getInheritanceMap(bindings as any, \"desktop\");\n        expect(result.inputs[\"title\"]).toBeUndefined();\n    });\n\n    it(\"should handle missing overrides gracefully\", () => {\n        const bindings = {\n            inputs: {\n                rowGap: { static: \"20px\" }\n            },\n            styles: {\n                paddingTop: { static: \"10px\" }\n            }\n            // no overrides\n        };\n\n        const result = processor.getInheritanceMap(bindings as any, \"mobile\");\n        expect(result.inputs[\"rowGap\"]).toEqual({ overridden: false, inheritedFrom: \"desktop\" });\n        expect(result.styles[\"paddingTop\"]).toEqual({\n            overridden: false,\n            inheritedFrom: \"desktop\"\n        });\n    });\n\n    it(\"should handle missing ancestor values gracefully\", () => {\n        const bindings = {\n            inputs: {},\n            styles: {\n                backgroundColor: {\n                    static: \"#ec8787\"\n                }\n            },\n            overrides: {\n                tablet: {\n                    styles: {}\n                },\n                mobile: {\n                    styles: {\n                        backgroundColor: {\n                            static: \"#50e3c2\"\n                        },\n                        marginTop: {\n                            static: \"122px\"\n                        }\n                    }\n                }\n            }\n        };\n\n        const result = processor.getInheritanceMap(bindings as any, \"mobile\");\n        expect(result.styles[\"backgroundColor\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"desktop\"\n        });\n\n        expect(result.styles[\"marginTop\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"desktop\"\n        });\n    });\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"InheritanceProcessor.test.js","sources":["../src/InheritanceProcessor.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport { InheritanceProcessor } from \"./InheritanceProcessor.js\";\nimport type { InputAstNode } from \"~/ComponentManifestToAstConverter.js\";\n\n// Mock AST for inputs\nconst inputsAst: InputAstNode[] = [\n    {\n        name: \"rowGap\",\n        type: \"text\",\n        list: false,\n        path: \"rowGap\",\n        children: [],\n        input: { type: \"text\", responsive: true, name: \"rowGap\" }\n    },\n    {\n        name: \"title\",\n        type: \"text\",\n        list: false,\n        path: \"title\",\n        children: [],\n        input: { type: \"text\", responsive: false, name: \"title\" }\n    }\n];\n\ndescribe(\"InheritanceProcessor\", () => {\n    const breakpoints = [\"desktop\", \"tablet\", \"mobile\"];\n    const processor = new InheritanceProcessor(breakpoints, inputsAst);\n\n    it(\"should correctly compute inheritance info for responsive inputs and styles\", () => {\n        const bindings = {\n            inputs: {\n                rowGap: { static: \"20px\" },\n                title: { static: \"Default Title\" }\n            },\n            styles: {\n                paddingTop: { static: \"10px\" },\n                color: { static: \"red\" }\n            },\n            overrides: {\n                tablet: {\n                    styles: {\n                        paddingTop: { static: \"5px\" }\n                    }\n                },\n                mobile: {\n                    inputs: {\n                        rowGap: { static: \"10px\" }\n                    },\n                    styles: {\n                        paddingTop: { static: \"2px\" },\n                        color: { static: \"blue\" }\n                    }\n                }\n            }\n        };\n\n        // desktop breakpoint\n        const desktopResult = processor.getInheritanceMap(bindings as any, \"desktop\");\n\n        expect(desktopResult.inputs[\"rowGap\"]).toEqual({\n            overridden: true,\n            inheritedFrom: undefined\n        });\n        expect(desktopResult.inputs[\"title\"]).toBeUndefined(); // not responsive\n        expect(desktopResult.styles[\"paddingTop\"]).toEqual({\n            overridden: true,\n            inheritedFrom: undefined\n        });\n        expect(desktopResult.styles[\"color\"]).toEqual({\n            overridden: true,\n            inheritedFrom: undefined\n        });\n\n        // tablet breakpoint\n        const tabletResult = processor.getInheritanceMap(bindings as any, \"tablet\");\n\n        expect(tabletResult.inputs[\"rowGap\"]).toEqual({\n            overridden: false,\n            inheritedFrom: \"desktop\"\n        });\n        expect(tabletResult.styles[\"paddingTop\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"desktop\"\n        });\n        expect(tabletResult.styles[\"color\"]).toEqual({\n            overridden: false,\n            inheritedFrom: \"desktop\"\n        });\n\n        // mobile breakpoint\n        const mobileResult = processor.getInheritanceMap(bindings as any, \"mobile\");\n\n        expect(mobileResult.inputs[\"rowGap\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"desktop\"\n        });\n        expect(mobileResult.styles[\"paddingTop\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"tablet\"\n        });\n        expect(mobileResult.styles[\"color\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"desktop\"\n        });\n    });\n\n    it(\"should skip non-responsive inputs in inheritance info\", () => {\n        const bindings = {\n            inputs: {\n                title: { static: \"Static Title\" }\n            },\n            styles: {},\n            overrides: {}\n        };\n\n        const result = processor.getInheritanceMap(bindings as any, \"desktop\");\n        expect(result.inputs[\"title\"]).toBeUndefined();\n    });\n\n    it(\"should handle missing overrides gracefully\", () => {\n        const bindings = {\n            inputs: {\n                rowGap: { static: \"20px\" }\n            },\n            styles: {\n                paddingTop: { static: \"10px\" }\n            }\n            // no overrides\n        };\n\n        const result = processor.getInheritanceMap(bindings as any, \"mobile\");\n        expect(result.inputs[\"rowGap\"]).toEqual({ overridden: false, inheritedFrom: \"desktop\" });\n        expect(result.styles[\"paddingTop\"]).toEqual({\n            overridden: false,\n            inheritedFrom: \"desktop\"\n        });\n    });\n\n    it(\"should handle missing ancestor values gracefully\", () => {\n        const bindings = {\n            inputs: {},\n            styles: {\n                backgroundColor: {\n                    static: \"#ec8787\"\n                }\n            },\n            overrides: {\n                tablet: {\n                    styles: {}\n                },\n                mobile: {\n                    styles: {\n                        backgroundColor: {\n                            static: \"#50e3c2\"\n                        },\n                        marginTop: {\n                            static: \"122px\"\n                        }\n                    }\n                }\n            }\n        };\n\n        const result = processor.getInheritanceMap(bindings as any, \"mobile\");\n        expect(result.styles[\"backgroundColor\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"desktop\"\n        });\n\n        expect(result.styles[\"marginTop\"]).toEqual({\n            overridden: true,\n            inheritedFrom: \"desktop\"\n        });\n    });\n});\n"],"names":["inputsAst","describe","breakpoints","processor","InheritanceProcessor","it","bindings","desktopResult","expect","undefined","tabletResult","mobileResult","result"],"mappings":";;AAKA,MAAMA,YAA4B;IAC9B;QACI,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,UAAU,EAAE;QACZ,OAAO;YAAE,MAAM;YAAQ,YAAY;YAAM,MAAM;QAAS;IAC5D;IACA;QACI,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,UAAU,EAAE;QACZ,OAAO;YAAE,MAAM;YAAQ,YAAY;YAAO,MAAM;QAAQ;IAC5D;CACH;AAEDC,SAAS,wBAAwB;IAC7B,MAAMC,cAAc;QAAC;QAAW;QAAU;KAAS;IACnD,MAAMC,YAAY,IAAIC,qBAAqBF,aAAaF;IAExDK,GAAG,8EAA8E;QAC7E,MAAMC,WAAW;YACb,QAAQ;gBACJ,QAAQ;oBAAE,QAAQ;gBAAO;gBACzB,OAAO;oBAAE,QAAQ;gBAAgB;YACrC;YACA,QAAQ;gBACJ,YAAY;oBAAE,QAAQ;gBAAO;gBAC7B,OAAO;oBAAE,QAAQ;gBAAM;YAC3B;YACA,WAAW;gBACP,QAAQ;oBACJ,QAAQ;wBACJ,YAAY;4BAAE,QAAQ;wBAAM;oBAChC;gBACJ;gBACA,QAAQ;oBACJ,QAAQ;wBACJ,QAAQ;4BAAE,QAAQ;wBAAO;oBAC7B;oBACA,QAAQ;wBACJ,YAAY;4BAAE,QAAQ;wBAAM;wBAC5B,OAAO;4BAAE,QAAQ;wBAAO;oBAC5B;gBACJ;YACJ;QACJ;QAGA,MAAMC,gBAAgBJ,UAAU,iBAAiB,CAACG,UAAiB;QAEnEE,OAAOD,cAAc,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC;YAC3C,YAAY;YACZ,eAAeE;QACnB;QACAD,OAAOD,cAAc,MAAM,CAAC,QAAQ,EAAE,aAAa;QACnDC,OAAOD,cAAc,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC;YAC/C,YAAY;YACZ,eAAeE;QACnB;QACAD,OAAOD,cAAc,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC1C,YAAY;YACZ,eAAeE;QACnB;QAGA,MAAMC,eAAeP,UAAU,iBAAiB,CAACG,UAAiB;QAElEE,OAAOE,aAAa,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC;YAC1C,YAAY;YACZ,eAAe;QACnB;QACAF,OAAOE,aAAa,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC;YAC9C,YAAY;YACZ,eAAe;QACnB;QACAF,OAAOE,aAAa,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC;YACzC,YAAY;YACZ,eAAe;QACnB;QAGA,MAAMC,eAAeR,UAAU,iBAAiB,CAACG,UAAiB;QAElEE,OAAOG,aAAa,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC;YAC1C,YAAY;YACZ,eAAe;QACnB;QACAH,OAAOG,aAAa,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC;YAC9C,YAAY;YACZ,eAAe;QACnB;QACAH,OAAOG,aAAa,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC;YACzC,YAAY;YACZ,eAAe;QACnB;IACJ;IAEAN,GAAG,yDAAyD;QACxD,MAAMC,WAAW;YACb,QAAQ;gBACJ,OAAO;oBAAE,QAAQ;gBAAe;YACpC;YACA,QAAQ,CAAC;YACT,WAAW,CAAC;QAChB;QAEA,MAAMM,SAAST,UAAU,iBAAiB,CAACG,UAAiB;QAC5DE,OAAOI,OAAO,MAAM,CAAC,QAAQ,EAAE,aAAa;IAChD;IAEAP,GAAG,8CAA8C;QAC7C,MAAMC,WAAW;YACb,QAAQ;gBACJ,QAAQ;oBAAE,QAAQ;gBAAO;YAC7B;YACA,QAAQ;gBACJ,YAAY;oBAAE,QAAQ;gBAAO;YACjC;QAEJ;QAEA,MAAMM,SAAST,UAAU,iBAAiB,CAACG,UAAiB;QAC5DE,OAAOI,OAAO,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC;YAAE,YAAY;YAAO,eAAe;QAAU;QACtFJ,OAAOI,OAAO,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC;YACxC,YAAY;YACZ,eAAe;QACnB;IACJ;IAEAP,GAAG,oDAAoD;QACnD,MAAMC,WAAW;YACb,QAAQ,CAAC;YACT,QAAQ;gBACJ,iBAAiB;oBACb,QAAQ;gBACZ;YACJ;YACA,WAAW;gBACP,QAAQ;oBACJ,QAAQ,CAAC;gBACb;gBACA,QAAQ;oBACJ,QAAQ;wBACJ,iBAAiB;4BACb,QAAQ;wBACZ;wBACA,WAAW;4BACP,QAAQ;wBACZ;oBACJ;gBACJ;YACJ;QACJ;QAEA,MAAMM,SAAST,UAAU,iBAAiB,CAACG,UAAiB;QAC5DE,OAAOI,OAAO,MAAM,CAAC,kBAAkB,EAAE,OAAO,CAAC;YAC7C,YAAY;YACZ,eAAe;QACnB;QAEAJ,OAAOI,OAAO,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC;YACvC,YAAY;YACZ,eAAe;QACnB;IACJ;AACJ"}

package/InheritedValueResolver.d.ts

@@ -6,5 +6,22 @@ export declare class InheritedValueResolver {
     private readonly breakpoints;
     private readonly getBindings;
     constructor(breakpoints: string[], getBindings: GetBreakpointBindings);
-    getInheritedValue(key: string, breakpoint: string): ValueBinding | undefined;
+    /**
+     * The literal inherited from the nearest ancestor breakpoint.
+     *
+     * Returns the `static` value, not a binding — the declared return type used to say `ValueBinding`,
+     * which was simply wrong and made the token work below look impossible when it is not.
+     */
+    getInheritedValue(key: string, breakpoint: string): unknown;
+    /**
+     * The whole binding inherited from the nearest ancestor breakpoint.
+     *
+     * Needed because a token reference has no `static` value: read through `getInheritedValue` alone, a
+     * property whose parent breakpoint holds a token looks unset, so an override would be written even
+     * when it matches what it inherits — and the theme would then stop reaching that breakpoint.
+     *
+     * A binding counts as present if it carries either a literal or a token, which is exactly the
+     * invariant `ValueBinding` maintains: one or the other, never both.
+     */
+    getInheritedBinding(key: string, breakpoint: string): ValueBinding | undefined;
 }

package/InheritedValueResolver.js

@@ -1,24 +1,22 @@
-export class InheritedValueResolver {
-  constructor(breakpoints, getBindings) {
-    this.breakpoints = breakpoints;
-    this.getBindings = getBindings;
-  }
-  getInheritedValue(key, breakpoint) {
-    const currentIndex = this.breakpoints.indexOf(breakpoint);
-    // Walk backwards from currentIndex - 1 to 0
-    for (let i = currentIndex - 1; i >= 0; i--) {
-      const bp = this.breakpoints[i];
-      const bindings = this.getBindings(bp);
-      if (!bindings) {
-        continue;
-      }
-      const value = bindings[key]?.static;
-      if (value !== undefined) {
-        return value;
-      }
+class InheritedValueResolver {
+    constructor(breakpoints, getBindings){
+        this.breakpoints = breakpoints;
+        this.getBindings = getBindings;
+    }
+    getInheritedValue(key, breakpoint) {
+        return this.getInheritedBinding(key, breakpoint)?.static;
+    }
+    getInheritedBinding(key, breakpoint) {
+        const currentIndex = this.breakpoints.indexOf(breakpoint);
+        for(let i = currentIndex - 1; i >= 0; i--){
+            const bp = this.breakpoints[i];
+            const bindings = this.getBindings(bp);
+            if (!bindings) continue;
+            const binding = bindings[key];
+            if (binding?.static !== void 0 || binding?.token !== void 0) return binding;
+        }
     }
-    return undefined;
-  }
 }
+export { InheritedValueResolver };
 
 //# sourceMappingURL=InheritedValueResolver.js.map

package/InheritedValueResolver.js.map

@@ -1 +1 @@
-{"version":3,"names":["InheritedValueResolver","constructor","breakpoints","getBindings","getInheritedValue","key","breakpoint","currentIndex","indexOf","i","bp","bindings","value","static","undefined"],"sources":["InheritedValueResolver.ts"],"sourcesContent":["import type { ValueBinding } from \"~/types.js\";\n\nexport interface GetBreakpointBindings {\n    (breakpoint: string): Record<string, ValueBinding> | undefined;\n}\n\nexport class InheritedValueResolver {\n    private readonly breakpoints: string[];\n    private readonly getBindings: GetBreakpointBindings;\n\n    constructor(breakpoints: string[], getBindings: GetBreakpointBindings) {\n        this.breakpoints = breakpoints;\n        this.getBindings = getBindings;\n    }\n\n    getInheritedValue(key: string, breakpoint: string): ValueBinding | undefined {\n        const currentIndex = this.breakpoints.indexOf(breakpoint);\n        // Walk backwards from currentIndex - 1 to 0\n        for (let i = currentIndex - 1; i >= 0; i--) {\n            const bp = this.breakpoints[i];\n            const bindings = this.getBindings(bp);\n\n            if (!bindings) {\n                continue;\n            }\n\n            const value = bindings[key]?.static;\n            if (value !== undefined) {\n                return value;\n            }\n        }\n        return undefined;\n    }\n}\n"],"mappings":"AAMA,OAAO,MAAMA,sBAAsB,CAAC;EAIhCC,WAAWA,CAACC,WAAqB,EAAEC,WAAkC,EAAE;IACnE,IAAI,CAACD,WAAW,GAAGA,WAAW;IAC9B,IAAI,CAACC,WAAW,GAAGA,WAAW;EAClC;EAEAC,iBAAiBA,CAACC,GAAW,EAAEC,UAAkB,EAA4B;IACzE,MAAMC,YAAY,GAAG,IAAI,CAACL,WAAW,CAACM,OAAO,CAACF,UAAU,CAAC;IACzD;IACA,KAAK,IAAIG,CAAC,GAAGF,YAAY,GAAG,CAAC,EAAEE,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;MACxC,MAAMC,EAAE,GAAG,IAAI,CAACR,WAAW,CAACO,CAAC,CAAC;MAC9B,MAAME,QAAQ,GAAG,IAAI,CAACR,WAAW,CAACO,EAAE,CAAC;MAErC,IAAI,CAACC,QAAQ,EAAE;QACX;MACJ;MAEA,MAAMC,KAAK,GAAGD,QAAQ,CAACN,GAAG,CAAC,EAAEQ,MAAM;MACnC,IAAID,KAAK,KAAKE,SAAS,EAAE;QACrB,OAAOF,KAAK;MAChB;IACJ;IACA,OAAOE,SAAS;EACpB;AACJ","ignoreList":[]}
+{"version":3,"file":"InheritedValueResolver.js","sources":["../src/InheritedValueResolver.ts"],"sourcesContent":["import type { ValueBinding } from \"~/types.js\";\n\nexport interface GetBreakpointBindings {\n    (breakpoint: string): Record<string, ValueBinding> | undefined;\n}\n\nexport class InheritedValueResolver {\n    private readonly breakpoints: string[];\n    private readonly getBindings: GetBreakpointBindings;\n\n    constructor(breakpoints: string[], getBindings: GetBreakpointBindings) {\n        this.breakpoints = breakpoints;\n        this.getBindings = getBindings;\n    }\n\n    /**\n     * The literal inherited from the nearest ancestor breakpoint.\n     *\n     * Returns the `static` value, not a binding — the declared return type used to say `ValueBinding`,\n     * which was simply wrong and made the token work below look impossible when it is not.\n     */\n    getInheritedValue(key: string, breakpoint: string): unknown {\n        return this.getInheritedBinding(key, breakpoint)?.static;\n    }\n\n    /**\n     * The whole binding inherited from the nearest ancestor breakpoint.\n     *\n     * Needed because a token reference has no `static` value: read through `getInheritedValue` alone, a\n     * property whose parent breakpoint holds a token looks unset, so an override would be written even\n     * when it matches what it inherits — and the theme would then stop reaching that breakpoint.\n     *\n     * A binding counts as present if it carries either a literal or a token, which is exactly the\n     * invariant `ValueBinding` maintains: one or the other, never both.\n     */\n    getInheritedBinding(key: string, breakpoint: string): ValueBinding | undefined {\n        const currentIndex = this.breakpoints.indexOf(breakpoint);\n        // Walk backwards from currentIndex - 1 to 0\n        for (let i = currentIndex - 1; i >= 0; i--) {\n            const bp = this.breakpoints[i];\n            const bindings = this.getBindings(bp);\n\n            if (!bindings) {\n                continue;\n            }\n\n            const binding = bindings[key];\n            if (binding?.static !== undefined || binding?.token !== undefined) {\n                return binding;\n            }\n        }\n        return undefined;\n    }\n}\n"],"names":["InheritedValueResolver","breakpoints","getBindings","key","breakpoint","currentIndex","i","bp","bindings","binding","undefined"],"mappings":"AAMO,MAAMA;IAIT,YAAYC,WAAqB,EAAEC,WAAkC,CAAE;QACnE,IAAI,CAAC,WAAW,GAAGD;QACnB,IAAI,CAAC,WAAW,GAAGC;IACvB;IAQA,kBAAkBC,GAAW,EAAEC,UAAkB,EAAW;QACxD,OAAO,IAAI,CAAC,mBAAmB,CAACD,KAAKC,aAAa;IACtD;IAYA,oBAAoBD,GAAW,EAAEC,UAAkB,EAA4B;QAC3E,MAAMC,eAAe,IAAI,CAAC,WAAW,CAAC,OAAO,CAACD;QAE9C,IAAK,IAAIE,IAAID,eAAe,GAAGC,KAAK,GAAGA,IAAK;YACxC,MAAMC,KAAK,IAAI,CAAC,WAAW,CAACD,EAAE;YAC9B,MAAME,WAAW,IAAI,CAAC,WAAW,CAACD;YAElC,IAAI,CAACC,UACD;YAGJ,MAAMC,UAAUD,QAAQ,CAACL,IAAI;YAC7B,IAAIM,SAAS,WAAWC,UAAaD,SAAS,UAAUC,QACpD,OAAOD;QAEf;IAEJ;AACJ"}

package/InputBindingsProcessor.d.ts

@@ -1,4 +1,4 @@
-import type { DocumentElementBindings, DocumentElementInputBindings } from "./types.js";
+import type { DocumentElementBindings, DocumentElementInputBindings, TokenReference } from "./types.js";
 import type { InputAstNode } from "./ComponentManifestToAstConverter.js";
 import type { ElementFactory } from "./ElementFactory.js";
 import { InputsUpdater } from "./InputsUpdater.js";
@@ -23,15 +23,36 @@ export declare class InputsBindingsProcessor {
     private inputsAst;
     private elementReferences;
     constructor(elementId: string, inputsAst: InputAstNode[], breakpoints: string[], rawBindings: DocumentElementBindings, elementFactory: ElementFactory);
+    /**
+     * The token references among these bindings, keyed by flat binding path.
+     *
+     * The counterpart to {@link toDeepInputs}: that resolves a reference to the CSS value so the preview
+     * renders it, this reports *that it was a reference* so a picker can show which token is selected and
+     * so {@link createUpdate} can write it back as one.
+     *
+     * Callers must seed their token map from this before editing. `createUpdate` treats an absent key as
+     * "make this a literal", which is what clears a reference when someone picks a free value — so an
+     * incomplete map silently converts every other token on the element into a frozen literal.
+     */
+    toTokenMap(flat?: NonNullable<DocumentElementBindings["inputs"]>): Record<string, TokenReference>;
     /**
      * Converts flat input bindings into deep inputs object (removes `.static` wrappers).
+     *
+     * A token reference yields its `var(--wby-…)` form, so an input bound to a theme colour renders the
+     * themed value in the editor exactly as it will on the site. Use {@link toTokenMap} alongside this
+     * when you need to know a value came from a token rather than a literal.
      */
     toDeepInputs(flat: NonNullable<DocumentElementBindings["inputs"]>): DeepBindings;
     /**
      * Flattens deep inputs object into flat bindings with `.static` wrappers,
      * skipping overrides that match inherited parent breakpoint values.
+     *
+     * @param tokens Flat binding paths in this map are written as token references instead of literals.
+     *               A path absent from it is written as `static`, which is what clears a reference when
+     *               someone picks a free value over a token — so callers must seed the map from
+     *               {@link toTokenMap} rather than passing only the path they changed.
      */
-    createUpdate(inputs: DeepBindings, breakpoint: string): InputsUpdater;
+    createUpdate(inputs: DeepBindings, breakpoint: string, tokens?: Record<string, TokenReference>): InputsUpdater;
     private getElementReferences;
     private isBaseBreakpoint;
 }