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

package/messenger/Messenger.js.map

@@ -1 +1 @@
-{"version":3,"names":["micromatch","logger","ignored","Messenger","listeners","Map","constructor","source","target","pattern","prefixGlob","replace","handleMessage","bind","window","addEventListener","event","type","payload","data","matches","isMatch","logicalType","stripPrefix","isIgnored","debug","getTime","origin","handlers","get","forEach","fn","fullType","startsWith","slice","length","includes","on","handler","has","set","Set","add","delete","send","postMessage","dispose","removeEventListener","clear","date","Date","getHours","getMinutes","getSeconds","getMilliseconds"],"sources":["Messenger.ts"],"sourcesContent":["import micromatch from \"micromatch\";\nimport type { MessageOrigin } from \"./MessageOrigin.js\";\nimport { logger } from \"../Logger.js\";\n\nexport type Message<T = any> = {\n    type: string;\n    payload: T;\n};\n\ntype Handler<T = any> = (payload: T, logicalType: string, wildcardMatch?: string) => void;\n\nconst ignored = [\n    \"preview.mouse.move\",\n    \"preview.component.register\",\n    \"preview.scroll\",\n    \"preview.viewport\",\n    \"preview.viewport.change.start\",\n    \"preview.viewport.change.end\"\n];\n\nexport class Messenger {\n    private listeners = new Map<string, Set<Handler>>();\n    private readonly pattern: string;\n    private readonly prefixGlob: string;\n\n    constructor(\n        private source: MessageOrigin,\n        private target: MessageOrigin,\n        // Pattern to filter events this Messenger handles.\n        pattern: string\n    ) {\n        this.pattern = pattern;\n        this.prefixGlob = pattern.replace(/\\*+$/, \"\");\n        this.handleMessage = this.handleMessage.bind(this);\n        this.source.window.addEventListener(\"message\", this.handleMessage);\n    }\n\n    private handleMessage(event: MessageEvent) {\n        const { type, payload } = event.data || {};\n        if (!this.target.matches(event)) {\n            return;\n        }\n\n        if (!type || !micromatch.isMatch(type, this.pattern)) {\n            return;\n        }\n\n        const logicalType = this.stripPrefix(type);\n\n        if (!this.isIgnored(logicalType)) {\n            logger.debug(`${this.getTime()} --> [${this.source.origin}][${logicalType}]`, {\n                type,\n                payload\n            });\n        }\n\n        const handlers = this.listeners.get(logicalType);\n        if (handlers) {\n            handlers.forEach(fn => fn(payload, logicalType));\n        }\n    }\n\n    private stripPrefix(fullType: string): string {\n        return fullType.startsWith(this.prefixGlob)\n            ? fullType.slice(this.prefixGlob.length)\n            : fullType;\n    }\n\n    private isIgnored(logicalType: string): boolean {\n        return ignored.includes(logicalType);\n    }\n\n    on<T = any>(logicalType: string, handler: Handler<T>) {\n        if (!this.listeners.has(logicalType)) {\n            this.listeners.set(logicalType, new Set());\n        }\n        this.listeners.get(logicalType)!.add(handler);\n        return () => {\n            const listeners = this.listeners.get(logicalType);\n            if (listeners) {\n                listeners.delete(handler);\n            }\n        };\n    }\n\n    send<T = any>(logicalType: string, payload?: T) {\n        const fullType = this.prefixGlob + logicalType;\n\n        if (!this.isIgnored(logicalType)) {\n            logger.debug(`${this.getTime()} <-- [${this.source.origin}][${logicalType}]`, {\n                type: fullType,\n                payload\n            });\n        }\n\n        this.target.window.postMessage({ type: fullType, payload }, this.target.origin);\n    }\n\n    dispose() {\n        this.source.window.removeEventListener(\"message\", this.handleMessage);\n        this.listeners.clear();\n    }\n\n    getTime() {\n        const date = new Date();\n        return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}.${date.getMilliseconds()}`;\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"messenger/Messenger.js","sources":["../../src/messenger/Messenger.ts"],"sourcesContent":["import { isMatch } from \"matcher\";\nimport type { MessageOrigin } from \"./MessageOrigin.js\";\nimport { logger } from \"../Logger.js\";\n\nexport type Message<T = any> = {\n    type: string;\n    payload: T;\n};\n\ntype Handler<T = any> = (payload: T, logicalType: string, wildcardMatch?: string) => void;\n\nconst ignored = [\n    \"preview.mouse.move\",\n    \"preview.component.register\",\n    \"preview.scroll\",\n    \"preview.viewport\",\n    \"preview.viewport.change.start\",\n    \"preview.viewport.change.end\"\n];\n\nexport class Messenger {\n    private listeners = new Map<string, Set<Handler>>();\n    private readonly pattern: string;\n    private readonly prefixGlob: string;\n\n    constructor(\n        private source: MessageOrigin,\n        private target: MessageOrigin,\n        // Pattern to filter events this Messenger handles.\n        pattern: string\n    ) {\n        this.pattern = pattern;\n        this.prefixGlob = pattern.replace(/\\*+$/, \"\");\n        this.handleMessage = this.handleMessage.bind(this);\n        this.source.window.addEventListener(\"message\", this.handleMessage);\n    }\n\n    private handleMessage(event: MessageEvent) {\n        const { type, payload } = event.data || {};\n        if (!this.target.matches(event)) {\n            return;\n        }\n\n        if (!type || !isMatch(type, this.pattern)) {\n            return;\n        }\n\n        const logicalType = this.stripPrefix(type);\n\n        if (!this.isIgnored(logicalType)) {\n            logger.debug(\n                {\n                    type,\n                    payload\n                },\n                `${this.getTime()} --> [${this.source.origin}][${logicalType}]`\n            );\n        }\n\n        const handlers = this.listeners.get(logicalType);\n        if (handlers) {\n            handlers.forEach(fn => fn(payload, logicalType));\n        }\n    }\n\n    private stripPrefix(fullType: string): string {\n        return fullType.startsWith(this.prefixGlob)\n            ? fullType.slice(this.prefixGlob.length)\n            : fullType;\n    }\n\n    private isIgnored(logicalType: string): boolean {\n        return ignored.includes(logicalType);\n    }\n\n    on<T = any>(logicalType: string, handler: Handler<T>) {\n        if (!this.listeners.has(logicalType)) {\n            this.listeners.set(logicalType, new Set());\n        }\n        this.listeners.get(logicalType)!.add(handler);\n        return () => {\n            const listeners = this.listeners.get(logicalType);\n            if (listeners) {\n                listeners.delete(handler);\n            }\n        };\n    }\n\n    send<T = any>(logicalType: string, payload?: T) {\n        const fullType = this.prefixGlob + logicalType;\n\n        if (!this.isIgnored(logicalType)) {\n            logger.debug(\n                {\n                    type: fullType,\n                    payload\n                },\n                `${this.getTime()} <-- [${this.source.origin}][${logicalType}]`\n            );\n        }\n\n        this.target.window.postMessage({ type: fullType, payload }, this.target.origin);\n    }\n\n    dispose() {\n        this.source.window.removeEventListener(\"message\", this.handleMessage);\n        this.listeners.clear();\n    }\n\n    getTime() {\n        const date = new Date();\n        return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}.${date.getMilliseconds()}`;\n    }\n}\n"],"names":["ignored","Messenger","source","target","pattern","Map","event","type","payload","isMatch","logicalType","logger","handlers","fn","fullType","handler","Set","listeners","date","Date"],"mappings":";;AAWA,MAAMA,UAAU;IACZ;IACA;IACA;IACA;IACA;IACA;CACH;AAEM,MAAMC;IAKT,YACYC,MAAqB,EACrBC,MAAqB,EAE7BC,OAAe,CACjB;aAJUF,MAAM,GAANA;aACAC,MAAM,GAANA;aANJ,SAAS,GAAG,IAAIE;QAUpB,IAAI,CAAC,OAAO,GAAGD;QACf,IAAI,CAAC,UAAU,GAAGA,QAAQ,OAAO,CAAC,QAAQ;QAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI;QACjD,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,IAAI,CAAC,aAAa;IACrE;IAEQ,cAAcE,KAAmB,EAAE;QACvC,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGF,MAAM,IAAI,IAAI,CAAC;QACzC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAACA,QACrB;QAGJ,IAAI,CAACC,QAAQ,CAACE,QAAQF,MAAM,IAAI,CAAC,OAAO,GACpC;QAGJ,MAAMG,cAAc,IAAI,CAAC,WAAW,CAACH;QAErC,IAAI,CAAC,IAAI,CAAC,SAAS,CAACG,cAChBC,OAAO,KAAK,CACR;YACIJ;YACAC;QACJ,GACA,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAEE,YAAY,CAAC,CAAC;QAIvE,MAAME,WAAW,IAAI,CAAC,SAAS,CAAC,GAAG,CAACF;QACpC,IAAIE,UACAA,SAAS,OAAO,CAACC,CAAAA,KAAMA,GAAGL,SAASE;IAE3C;IAEQ,YAAYI,QAAgB,EAAU;QAC1C,OAAOA,SAAS,UAAU,CAAC,IAAI,CAAC,UAAU,IACpCA,SAAS,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,IACrCA;IACV;IAEQ,UAAUJ,WAAmB,EAAW;QAC5C,OAAOV,QAAQ,QAAQ,CAACU;IAC5B;IAEA,GAAYA,WAAmB,EAAEK,OAAmB,EAAE;QAClD,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAACL,cACpB,IAAI,CAAC,SAAS,CAAC,GAAG,CAACA,aAAa,IAAIM;QAExC,IAAI,CAAC,SAAS,CAAC,GAAG,CAACN,aAAc,GAAG,CAACK;QACrC,OAAO;YACH,MAAME,YAAY,IAAI,CAAC,SAAS,CAAC,GAAG,CAACP;YACrC,IAAIO,WACAA,UAAU,MAAM,CAACF;QAEzB;IACJ;IAEA,KAAcL,WAAmB,EAAEF,OAAW,EAAE;QAC5C,MAAMM,WAAW,IAAI,CAAC,UAAU,GAAGJ;QAEnC,IAAI,CAAC,IAAI,CAAC,SAAS,CAACA,cAChBC,OAAO,KAAK,CACR;YACI,MAAMG;YACNN;QACJ,GACA,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAEE,YAAY,CAAC,CAAC;QAIvE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;YAAE,MAAMI;YAAUN;QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM;IAClF;IAEA,UAAU;QACN,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,IAAI,CAAC,aAAa;QACpE,IAAI,CAAC,SAAS,CAAC,KAAK;IACxB;IAEA,UAAU;QACN,MAAMU,OAAO,IAAIC;QACjB,OAAO,GAAGD,KAAK,QAAQ,GAAG,CAAC,EAAEA,KAAK,UAAU,GAAG,CAAC,EAAEA,KAAK,UAAU,GAAG,CAAC,EAAEA,KAAK,eAAe,IAAI;IACnG;AACJ"}

package/messenger/index.js

@@ -1,4 +1,2 @@
 export * from "./MessageOrigin.js";
 export * from "./Messenger.js";
-
-//# sourceMappingURL=index.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@webiny/website-builder-sdk",
-	"version": "0.0.0-unstable.eb196ccd2f",
-	"main": "index.js",
+	"version": "0.0.0-unstable.eb81deee7e",
+	"type": "module",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -12,36 +12,31 @@
 	"author": "Pavel Denisjuk",
 	"license": "MIT",
 	"dependencies": {
-		"csstype": "3.1.1",
+		"@webiny/sdk": "0.0.0-unstable.eb81deee7e",
+		"@webiny/theme-common": "0.0.0-unstable.eb81deee7e",
+		"csstype": "3.2.3",
 		"deep-equal": "2.2.3",
 		"deepmerge": "4.3.1",
 		"fast-json-patch": "3.1.1",
 		"fast-json-stable-stringify": "2.1.0",
 		"is-hotkey": "0.2.0",
-		"lexical": "0.23.1",
-		"lodash": "4.17.21",
-		"micromatch": "4.0.8",
-		"mobx": "6.9.0",
-		"nanoid": "3.3.8",
-		"nanoid-dictionary": "4.3.0",
-		"pino": "8.21.0",
-		"pino-pretty": "9.4.0"
+		"lodash": "4.18.1",
+		"matcher": "6.0.0",
+		"mobx": "7.0.3",
+		"nanoid": "6.0.1",
+		"nanoid-dictionary": "5.0.0",
+		"pino": "10.3.1",
+		"pino-pretty": "13.1.3"
 	},
 	"devDependencies": {
 		"@types/deep-equal": "1.0.4",
 		"@types/is-hotkey": "0.1.10",
-		"@types/micromatch": "4.0.9",
-		"@webiny/cli": "0.0.0-unstable.eb196ccd2f",
-		"@webiny/project-utils": "0.0.0-unstable.eb196ccd2f",
-		"typescript": "5.3.3"
+		"@webiny/build-tools": "0.0.0-unstable.eb81deee7e",
+		"typescript": "7.0.2",
+		"vitest": "4.1.11"
 	},
 	"publishConfig": {
-		"access": "public",
-		"directory": "dist"
-	},
-	"scripts": {
-		"build": "yarn webiny run build",
-		"watch": "yarn webiny run watch"
+		"access": "public"
 	},
 	"adio": {
 		"ignore": {
@@ -50,5 +45,7 @@
 			]
 		}
 	},
-	"gitHead": "eb196ccd2f32296e10f7add6dd7220d4e3abece4"
+	"webiny": {
+		"publishFrom": "dist"
+	}
 }

package/registerComponentGroup.js

@@ -1,10 +1,9 @@
 import { contentSdk } from "./ContentSdk.js";
-export const registerComponentGroup = group => {
-  const editingSdk = contentSdk.getEditingSdk();
-  if (!editingSdk) {
-    return;
-  }
-  editingSdk.registerComponentGroup(group);
+const registerComponentGroup = (group)=>{
+    const editingSdk = contentSdk.getEditingSdk();
+    if (!editingSdk) return;
+    editingSdk.registerComponentGroup(group);
 };
+export { registerComponentGroup };
 
 //# sourceMappingURL=registerComponentGroup.js.map

package/registerComponentGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["contentSdk","registerComponentGroup","group","editingSdk","getEditingSdk"],"sources":["registerComponentGroup.ts"],"sourcesContent":["import type { ComponentGroup } from \"./types.js\";\nimport { contentSdk } from \"./ContentSdk.js\";\n\nexport const registerComponentGroup = (group: ComponentGroup) => {\n    const editingSdk = contentSdk.getEditingSdk();\n\n    if (!editingSdk) {\n        return;\n    }\n\n    editingSdk.registerComponentGroup(group);\n};\n"],"mappings":"AACA,SAASA,UAAU;AAEnB,OAAO,MAAMC,sBAAsB,GAAIC,KAAqB,IAAK;EAC7D,MAAMC,UAAU,GAAGH,UAAU,CAACI,aAAa,CAAC,CAAC;EAE7C,IAAI,CAACD,UAAU,EAAE;IACb;EACJ;EAEAA,UAAU,CAACF,sBAAsB,CAACC,KAAK,CAAC;AAC5C,CAAC","ignoreList":[]}
+{"version":3,"file":"registerComponentGroup.js","sources":["../src/registerComponentGroup.ts"],"sourcesContent":["import type { ComponentGroup } from \"./types.js\";\nimport { contentSdk } from \"./ContentSdk.js\";\n\nexport const registerComponentGroup = (group: ComponentGroup) => {\n    const editingSdk = contentSdk.getEditingSdk();\n\n    if (!editingSdk) {\n        return;\n    }\n\n    editingSdk.registerComponentGroup(group);\n};\n"],"names":["registerComponentGroup","group","editingSdk","contentSdk"],"mappings":";AAGO,MAAMA,yBAAyB,CAACC;IACnC,MAAMC,aAAaC,WAAW,aAAa;IAE3C,IAAI,CAACD,YACD;IAGJA,WAAW,sBAAsB,CAACD;AACtC"}

package/tokenBinding.d.ts

@@ -0,0 +1,26 @@
+import type { TokenReference, ValueBinding } from "./types.js";
+/**
+ * Design token references in element styles — see the Theme design brief, section 7.1.
+ *
+ * Content stores a *structured* reference, never a resolved value and never a raw CSS variable
+ * string. Storing `var(--wby-color-surface-page)` would bake the naming convention into customer
+ * data, making a prefix change a data migration; and Admin needs the structured form to show which
+ * token is selected when a picker is reopened.
+ *
+ * The renderer converts a reference to `var(--wby-…)` at output time. That conversion lives here so
+ * there is exactly one place that knows the mapping.
+ */
+export declare const isTokenBinding: (binding: ValueBinding | undefined) => binding is ValueBinding & {
+    token: TokenReference;
+};
+/**
+ * Emits the CSS value for a reference.
+ *
+ * The stored fallback is emitted as the `var()` second argument. That matters when no theme is
+ * active — a variable that resolves to nothing makes the browser drop the whole declaration, so
+ * content authored under a theme would visibly lose its colour the moment the theme is deactivated.
+ * With a fallback it keeps rendering the value it had when it was picked.
+ */
+export declare const tokenToCssValue: (reference: TokenReference) => string;
+/** Builds a reference, capturing the currently resolved value as the fallback. */
+export declare const createTokenReference: (path: string, fallback?: string) => TokenReference;

package/tokenBinding.js

@@ -0,0 +1,15 @@
+import { toCssVariableName } from "@webiny/theme-common/naming/cssVariable.js";
+const isTokenBinding = (binding)=>Boolean(binding?.token?.path);
+const tokenToCssValue = (reference)=>{
+    const variable = toCssVariableName(reference.path);
+    return reference.fallback ? `var(${variable}, ${reference.fallback})` : `var(${variable})`;
+};
+const createTokenReference = (path, fallback)=>fallback ? {
+        path,
+        fallback
+    } : {
+        path
+    };
+export { createTokenReference, isTokenBinding, tokenToCssValue };
+
+//# sourceMappingURL=tokenBinding.js.map

package/tokenBinding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenBinding.js","sources":["../src/tokenBinding.ts"],"sourcesContent":["import { toCssVariableName } from \"@webiny/theme-common/naming/cssVariable.js\";\nimport type { TokenReference, ValueBinding } from \"~/types.js\";\n\n/**\n * Design token references in element styles — see the Theme design brief, section 7.1.\n *\n * Content stores a *structured* reference, never a resolved value and never a raw CSS variable\n * string. Storing `var(--wby-color-surface-page)` would bake the naming convention into customer\n * data, making a prefix change a data migration; and Admin needs the structured form to show which\n * token is selected when a picker is reopened.\n *\n * The renderer converts a reference to `var(--wby-…)` at output time. That conversion lives here so\n * there is exactly one place that knows the mapping.\n */\n\nexport const isTokenBinding = (\n    binding: ValueBinding | undefined\n): binding is ValueBinding & { token: TokenReference } => {\n    return Boolean(binding?.token?.path);\n};\n\n/**\n * Emits the CSS value for a reference.\n *\n * The stored fallback is emitted as the `var()` second argument. That matters when no theme is\n * active — a variable that resolves to nothing makes the browser drop the whole declaration, so\n * content authored under a theme would visibly lose its colour the moment the theme is deactivated.\n * With a fallback it keeps rendering the value it had when it was picked.\n */\nexport const tokenToCssValue = (reference: TokenReference): string => {\n    const variable = toCssVariableName(reference.path);\n\n    return reference.fallback ? `var(${variable}, ${reference.fallback})` : `var(${variable})`;\n};\n\n/** Builds a reference, capturing the currently resolved value as the fallback. */\nexport const createTokenReference = (path: string, fallback?: string): TokenReference => {\n    return fallback ? { path, fallback } : { path };\n};\n"],"names":["isTokenBinding","binding","Boolean","tokenToCssValue","reference","variable","toCssVariableName","createTokenReference","path","fallback"],"mappings":";AAeO,MAAMA,iBAAiB,CAC1BC,UAEOC,QAAQD,SAAS,OAAO;AAW5B,MAAME,kBAAkB,CAACC;IAC5B,MAAMC,WAAWC,kBAAkBF,UAAU,IAAI;IAEjD,OAAOA,UAAU,QAAQ,GAAG,CAAC,IAAI,EAAEC,SAAS,EAAE,EAAED,UAAU,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAEC,SAAS,CAAC,CAAC;AAC9F;AAGO,MAAME,uBAAuB,CAACC,MAAcC,WACxCA,WAAW;QAAED;QAAMC;IAAS,IAAI;QAAED;IAAK"}

package/tokenBinding.test.d.ts

@@ -0,0 +1 @@
+export {};

package/tokenBinding.test.js

@@ -0,0 +1,165 @@
+import { describe, expect, it } from "vitest";
+import { BindingsResolver } from "./BindingsResolver.js";
+import { StylesBindingsProcessor } from "./StylesBindingsProcessor.js";
+import { createTokenReference, isTokenBinding, tokenToCssValue } from "./tokenBinding.js";
+describe("token bindings", ()=>{
+    it("recognises a token binding and nothing else", ()=>{
+        expect(isTokenBinding({
+            token: {
+                path: "color.surface.page"
+            }
+        })).toBe(true);
+        expect(isTokenBinding({
+            static: "#fff"
+        })).toBe(false);
+        expect(isTokenBinding({
+            expression: "$state.x"
+        })).toBe(false);
+        expect(isTokenBinding(void 0)).toBe(false);
+    });
+    it("derives the CSS variable from the token path", ()=>{
+        expect(tokenToCssValue({
+            path: "color.action.primary.background"
+        })).toBe("var(--wby-color-action-primary-background)");
+    });
+    it("emits the stored fallback, so content survives the theme being deactivated", ()=>{
+        expect(tokenToCssValue({
+            path: "color.surface.page",
+            fallback: "#F8FAFC"
+        })).toBe("var(--wby-color-surface-page, #F8FAFC)");
+    });
+    it("captures the resolved value as the fallback when a reference is created", ()=>{
+        expect(createTokenReference("color.surface.page", "#F8FAFC")).toEqual({
+            path: "color.surface.page",
+            fallback: "#F8FAFC"
+        });
+        expect(createTokenReference("color.surface.page")).toEqual({
+            path: "color.surface.page"
+        });
+    });
+});
+describe("BindingsResolver with token bindings", ()=>{
+    const resolve = (bindings)=>{
+        const resolver = new BindingsResolver({});
+        const [resolved] = resolver.resolveElement({
+            element: {
+                type: "Webiny/Element",
+                id: "el-1",
+                component: {
+                    name: "Test"
+                }
+            },
+            elementBindings: bindings,
+            inputAst: []
+        });
+        return resolved;
+    };
+    it("renders a token reference as a CSS variable", ()=>{
+        const resolved = resolve({
+            styles: {
+                backgroundColor: {
+                    token: {
+                        path: "color.surface.page"
+                    }
+                }
+            }
+        });
+        expect(resolved.styles.backgroundColor).toBe("var(--wby-color-surface-page)");
+    });
+    it("renders a literal unchanged", ()=>{
+        const resolved = resolve({
+            styles: {
+                backgroundColor: {
+                    static: "#123456"
+                }
+            }
+        });
+        expect(resolved.styles.backgroundColor).toBe("#123456");
+    });
+    it("renders references and literals side by side in the same element", ()=>{
+        const resolved = resolve({
+            styles: {
+                backgroundColor: {
+                    token: {
+                        path: "color.surface.page",
+                        fallback: "#FFF"
+                    }
+                },
+                borderTopColor: {
+                    static: "#123456"
+                }
+            }
+        });
+        expect(resolved.styles.backgroundColor).toBe("var(--wby-color-surface-page, #FFF)");
+        expect(resolved.styles.borderTopColor).toBe("#123456");
+    });
+});
+describe("StylesBindingsProcessor with token bindings", ()=>{
+    const bindings = {
+        styles: {
+            backgroundColor: {
+                token: {
+                    path: "color.surface.page",
+                    fallback: "#FFF"
+                }
+            },
+            borderTopColor: {
+                static: "#123456"
+            }
+        }
+    };
+    const processor = ()=>new StylesBindingsProcessor("el-1", [
+            "desktop",
+            "mobile"
+        ], bindings);
+    it("flattens a token binding to its CSS variable so the preview renders", ()=>{
+        expect(processor().toDeepStyles(bindings.styles)).toEqual({
+            backgroundColor: "var(--wby-color-surface-page, #FFF)",
+            borderTopColor: "#123456"
+        });
+    });
+    it("reports which properties came from tokens", ()=>{
+        expect(processor().toTokenMap(bindings.styles)).toEqual({
+            backgroundColor: {
+                path: "color.surface.page",
+                fallback: "#FFF"
+            }
+        });
+    });
+    it("writes a token reference rather than a literal when one is supplied", ()=>{
+        const update = processor().createUpdate({
+            backgroundColor: "var(--wby-color-surface-raised)"
+        }, "desktop", {
+            backgroundColor: {
+                path: "color.surface.raised"
+            }
+        });
+        const document = {
+            bindings: {
+                "el-1": {}
+            }
+        };
+        update.applyToDocument(document);
+        expect(document.bindings["el-1"].styles.backgroundColor).toEqual({
+            token: {
+                path: "color.surface.raised"
+            }
+        });
+    });
+    it("replaces a reference with a literal when no token is supplied", ()=>{
+        const update = processor().createUpdate({
+            backgroundColor: "#00FF00"
+        }, "desktop");
+        const document = {
+            bindings: {
+                "el-1": {}
+            }
+        };
+        update.applyToDocument(document);
+        expect(document.bindings["el-1"].styles.backgroundColor).toEqual({
+            static: "#00FF00"
+        });
+    });
+});
+
+//# sourceMappingURL=tokenBinding.test.js.map

package/tokenBinding.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenBinding.test.js","sources":["../src/tokenBinding.test.ts"],"sourcesContent":["import { describe, expect, it } from \"vitest\";\nimport { BindingsResolver } from \"./BindingsResolver.js\";\nimport { StylesBindingsProcessor } from \"./StylesBindingsProcessor.js\";\nimport { createTokenReference, isTokenBinding, tokenToCssValue } from \"./tokenBinding.js\";\nimport type { DocumentElementBindings } from \"./types.js\";\n\ndescribe(\"token bindings\", () => {\n    it(\"recognises a token binding and nothing else\", () => {\n        expect(isTokenBinding({ token: { path: \"color.surface.page\" } })).toBe(true);\n        expect(isTokenBinding({ static: \"#fff\" })).toBe(false);\n        expect(isTokenBinding({ expression: \"$state.x\" })).toBe(false);\n        expect(isTokenBinding(undefined)).toBe(false);\n    });\n\n    it(\"derives the CSS variable from the token path\", () => {\n        expect(tokenToCssValue({ path: \"color.action.primary.background\" })).toBe(\n            \"var(--wby-color-action-primary-background)\"\n        );\n    });\n\n    it(\"emits the stored fallback, so content survives the theme being deactivated\", () => {\n        expect(tokenToCssValue({ path: \"color.surface.page\", fallback: \"#F8FAFC\" })).toBe(\n            \"var(--wby-color-surface-page, #F8FAFC)\"\n        );\n    });\n\n    it(\"captures the resolved value as the fallback when a reference is created\", () => {\n        expect(createTokenReference(\"color.surface.page\", \"#F8FAFC\")).toEqual({\n            path: \"color.surface.page\",\n            fallback: \"#F8FAFC\"\n        });\n        expect(createTokenReference(\"color.surface.page\")).toEqual({\n            path: \"color.surface.page\"\n        });\n    });\n});\n\ndescribe(\"BindingsResolver with token bindings\", () => {\n    const resolve = (bindings: DocumentElementBindings) => {\n        const resolver = new BindingsResolver({});\n        const [resolved] = resolver.resolveElement({\n            element: {\n                type: \"Webiny/Element\",\n                id: \"el-1\",\n                component: { name: \"Test\" } as never\n            },\n            elementBindings: bindings,\n            inputAst: []\n        });\n        return resolved;\n    };\n\n    it(\"renders a token reference as a CSS variable\", () => {\n        const resolved = resolve({\n            styles: { backgroundColor: { token: { path: \"color.surface.page\" } } }\n        });\n\n        expect(resolved.styles.backgroundColor).toBe(\"var(--wby-color-surface-page)\");\n    });\n\n    it(\"renders a literal unchanged\", () => {\n        const resolved = resolve({ styles: { backgroundColor: { static: \"#123456\" } } });\n\n        expect(resolved.styles.backgroundColor).toBe(\"#123456\");\n    });\n\n    it(\"renders references and literals side by side in the same element\", () => {\n        const resolved = resolve({\n            styles: {\n                backgroundColor: { token: { path: \"color.surface.page\", fallback: \"#FFF\" } },\n                borderTopColor: { static: \"#123456\" }\n            }\n        });\n\n        expect(resolved.styles.backgroundColor).toBe(\"var(--wby-color-surface-page, #FFF)\");\n        expect(resolved.styles.borderTopColor).toBe(\"#123456\");\n    });\n});\n\ndescribe(\"StylesBindingsProcessor with token bindings\", () => {\n    const bindings: DocumentElementBindings = {\n        styles: {\n            backgroundColor: { token: { path: \"color.surface.page\", fallback: \"#FFF\" } },\n            borderTopColor: { static: \"#123456\" }\n        }\n    };\n\n    const processor = () => new StylesBindingsProcessor(\"el-1\", [\"desktop\", \"mobile\"], bindings);\n\n    it(\"flattens a token binding to its CSS variable so the preview renders\", () => {\n        expect(processor().toDeepStyles(bindings.styles)).toEqual({\n            backgroundColor: \"var(--wby-color-surface-page, #FFF)\",\n            borderTopColor: \"#123456\"\n        });\n    });\n\n    it(\"reports which properties came from tokens\", () => {\n        expect(processor().toTokenMap(bindings.styles)).toEqual({\n            backgroundColor: { path: \"color.surface.page\", fallback: \"#FFF\" }\n        });\n    });\n\n    it(\"writes a token reference rather than a literal when one is supplied\", () => {\n        const update = processor().createUpdate(\n            { backgroundColor: \"var(--wby-color-surface-raised)\" },\n            \"desktop\",\n            { backgroundColor: { path: \"color.surface.raised\" } }\n        );\n\n        const document = { bindings: { \"el-1\": {} } } as never;\n        update.applyToDocument(document);\n\n        expect((document as any).bindings[\"el-1\"].styles.backgroundColor).toEqual({\n            token: { path: \"color.surface.raised\" }\n        });\n    });\n\n    it(\"replaces a reference with a literal when no token is supplied\", () => {\n        const update = processor().createUpdate({ backgroundColor: \"#00FF00\" }, \"desktop\");\n\n        const document = { bindings: { \"el-1\": {} } } as never;\n        update.applyToDocument(document);\n\n        // No stale `token` left behind — a binding holds one or the other, never both.\n        expect((document as any).bindings[\"el-1\"].styles.backgroundColor).toEqual({\n            static: \"#00FF00\"\n        });\n    });\n});\n"],"names":["describe","it","expect","isTokenBinding","undefined","tokenToCssValue","createTokenReference","resolve","bindings","resolver","BindingsResolver","resolved","processor","StylesBindingsProcessor","update","document"],"mappings":"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"}

package/types/ShorthandCssProperties.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=ShorthandCssProperties.js.map

package/types/WebsiteBuilderTheme.d.ts

@@ -1,4 +1,3 @@
-import type { LexicalEditorTheme } from "./LexicalEditorTheme.js";
 export type Breakpoint = {
     name: string;
     title: string;
@@ -9,14 +8,12 @@ export type Breakpoint = {
 };
 export type WebsiteBuilderTheme = {
     css?: string;
-    cssVariables?: Record<string, string>;
     fonts?: string[];
     breakpoints: Breakpoint[];
-    styles: {
-        colors: Record<string, any>;
-        typography: Typography;
-    };
-    lexical: LexicalEditorTheme;
+    colors: ColorStyle[];
+    fontSizes?: FontSizes;
+    typography: Typography;
+    allowCustomColors?: boolean;
 };
 type KnownKeys = "desktop" | "tablet" | "mobile";
 type BreakpointBase = Omit<Breakpoint, "name">;
@@ -26,27 +23,33 @@ type Breakpoints = KnownBreakpoints & {
         [K in string as K extends KnownKeys ? never : K]: BreakpointBase;
     };
 };
-export type TypographyType = "headings" | "paragraphs" | "quotes" | "lists" | (string & {});
+export type ColorStyle = {
+    id: string;
+    label: string;
+    value: string;
+};
 export type TypographyStyle = {
     id: string;
-    name: string;
+    label: string;
     tag: string;
     className: string;
 };
-export type Typography = Partial<Record<TypographyType, TypographyStyle[]>>;
+export type Typography = Record<string, TypographyStyle[]>;
+export type FontSizes = string[];
 export type WebsiteBuilderThemeInput = {
     /**
      * CSS to include in the editor.
      */
     css?: string;
-    /**
-     * CSS variables to define in the editor.
-     */
-    cssVariables?: Record<string, string>;
     /**
      * Fonts to load when the editor loads.
      */
     fonts?: string[];
+    /**
+     * Font sizes to use in the editor.
+     * Define this if you want to see a font size dropdown in the editor.
+     */
+    fontSizes?: FontSizes;
     /**
      * {
      *   title: "Desktop",
@@ -57,36 +60,42 @@ export type WebsiteBuilderThemeInput = {
      * }
      */
     breakpoints?: Breakpoints;
-    lexical?: LexicalEditorTheme;
-    styles?: {
-        /**
-         * color1: "#fa5723",
-         * color2: "#00ccb0",
-         */
-        colors?: Record<string, any>;
-        /**
-         * headings: [
-         *   {
-         *     id: "heading1",
-         *     name: "Heading 1",
-         *     tag: "h1"
-         *   },
-         * ],
-         * paragraphs: [
-         *   {
-         *     id: "paragraph1",
-         *     name: "Paragraph 1",
-         *     tag: "p",
-         * ],
-         * quotes: [
-         *   {
-         *     id: "quote",
-         *     name: "Quote",
-         *     tag: "blockquote"
-         *   }
-         * ]
-         */
-        typography?: Typography;
-    };
+    /**
+     * [
+     *   {
+     *     id: "primary",
+     *     label: "Primary",
+     *     value: "#000000"
+     *   },
+     * ]
+     */
+    colors?: ColorStyle[];
+    /**
+     * headings: [
+     *   {
+     *     id: "heading1",
+     *     name: "Heading 1",
+     *     tag: "h1"
+     *   },
+     * ],
+     * paragraphs: [
+     *   {
+     *     id: "paragraph1",
+     *     name: "Paragraph 1",
+     *     tag: "p",
+     * ],
+     * quotes: [
+     *   {
+     *     id: "quote",
+     *     name: "Quote",
+     *     tag: "blockquote"
+     *   }
+     * ]
+     */
+    typography?: Typography;
+    /**
+     * Allow custom color selection (ChromePicker) in the Lexical editor's font color toolbar action.
+     */
+    allowCustomColors?: boolean;
 };
 export {};

package/types/WebsiteBuilderTheme.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=WebsiteBuilderTheme.js.map