@nordcraft/runtime 1.0.77 → 1.0.79

package/dist/src/utils/getThemeSignal.js

@@ -0,0 +1,53 @@
+import { applyFormula, } from '@nordcraft/core/dist/formula/formula';
+import { THEME_COOKIE_NAME } from '@nordcraft/core/dist/styling/theme.const';
+import { isDefined } from '@nordcraft/core/dist/utils/util';
+import { signal } from '../signal/signal';
+export const getThemeSignal = (component, dataSignal, env) => {
+    const theme = component.route?.info?.theme;
+    const themeFormula = theme?.formula;
+    const dynamicTheme = themeFormula && themeFormula.type !== 'value';
+    if (dynamicTheme) {
+        const sig = dataSignal.map(() => applyFormula(themeFormula, {
+            data: dataSignal.get(),
+            component,
+            root: document,
+            package: undefined,
+            toddle: window.toddle,
+            env,
+        }));
+        return sig;
+    }
+    else if (isDefined(themeFormula)) {
+        // Set static theme value
+        return signal(themeFormula.value);
+    }
+    else {
+        // This is the standard theme resolution logic, if not overridden:
+        // 1. Check for 'nc-theme' cookie
+        // 2. Default to null
+        //    2.1 No theme set explicitly will default to system preference
+        //    2.2 Default theme (or initial value) is handled in CSS
+        const initialThemeValue = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(`${THEME_COOKIE_NAME}=`))
+            ?.split('=')[1] ?? null;
+        const sig = signal(initialThemeValue);
+        // Listen to cookie store API changes for 'nc-theme'
+        if ('cookieStore' in window) {
+            cookieStore.addEventListener('change', (event) => {
+                for (const change of event.changed) {
+                    if (change.name === THEME_COOKIE_NAME) {
+                        sig.set(change.value ?? null);
+                    }
+                }
+                for (const removal of event.deleted) {
+                    if (removal.name === THEME_COOKIE_NAME) {
+                        sig.set(null);
+                    }
+                }
+            });
+        }
+        return sig;
+    }
+};
+//# sourceMappingURL=getThemeSignal.js.map

package/dist/src/utils/getThemeSignal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getThemeSignal.js","sourceRoot":"","sources":["../../../src/utils/getThemeSignal.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,YAAY,GAEb,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAe,MAAM,kBAAkB,CAAA;AAEtD,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,SAAoB,EACpB,UAAiC,EACjC,GAAc,EACd,EAAE,CAAC;IACH,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAA;IAC1C,MAAM,YAAY,GAAG,KAAK,EAAE,OAAO,CAAA;IACnC,MAAM,YAAY,GAAG,YAAY,IAAI,YAAY,CAAC,IAAI,KAAK,OAAO,CAAA;IAClE,IAAI,YAAY,EAAE,CAAC;QACjB,MAAM,GAAG,GAAG,UAAU,CAAC,GAAG,CAAgB,GAAG,EAAE,CAC7C,YAAY,CAAC,YAAY,EAAE;YACzB,IAAI,EAAE,UAAU,CAAC,GAAG,EAAE;YACtB,SAAS;YACT,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,GAAG;SACJ,CAAC,CACH,CAAA;QAED,OAAO,GAAG,CAAA;IACZ,CAAC;SAAM,IAAI,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;QACnC,yBAAyB;QACzB,OAAO,MAAM,CAAgB,YAAY,CAAC,KAAsB,CAAC,CAAA;IACnE,CAAC;SAAM,CAAC;QACN,kEAAkE;QAClE,iCAAiC;QACjC,qBAAqB;QACrB,mEAAmE;QACnE,4DAA4D;QAC5D,MAAM,iBAAiB,GACrB,QAAQ,CAAC,MAAM;aACZ,KAAK,CAAC,IAAI,CAAC;aACX,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,iBAAiB,GAAG,CAAC,CAAC;YACvD,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAA;QAE3B,MAAM,GAAG,GAAG,MAAM,CAAgB,iBAAkC,CAAC,CAAA;QACrE,oDAAoD;QACpD,IAAI,aAAa,IAAI,MAAM,EAAE,CAAC;YAC5B,WAAW,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC;gBAChD,KAAK,MAAM,MAAM,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;oBACnC,IAAI,MAAM,CAAC,IAAI,KAAK,iBAAiB,EAAE,CAAC;wBACtC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,CAAA;oBAC/B,CAAC;gBACH,CAAC;gBACD,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;oBACpC,IAAI,OAAO,CAAC,IAAI,KAAK,iBAAiB,EAAE,CAAC;wBACvC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;oBACf,CAAC;gBACH,CAAC;YAAA,CACF,CAAC,CAAA;QACJ,CAAC;QAED,OAAO,GAAG,CAAA;IACZ,CAAC;AAAA,CACF,CAAA"}

package/dist/src/utils/isElementInViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isElementInViewport.js","sourceRoot":"","sources":["../../../src/utils/isElementInViewport.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,mBAAmB,CACjC,OAAoB,EACpB,WAAW,GAAG,CAAC,EACN;IACT,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAA;IAC5C,MAAM,cAAc,GAClB,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAA;IAC7D,MAAM,aAAa,GACjB,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAA;IAE3D,OAAO,CACL,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,WAAW;QAC3B,IAAI,CAAC,IAAI,IAAI,CAAC,GAAG,WAAW;QAC5B,IAAI,CAAC,MAAM,IAAI,cAAc,GAAG,WAAW;QAC3C,IAAI,CAAC,KAAK,IAAI,aAAa,GAAG,WAAW,CAC1C,CAAA;AAAA,CACF"}

package/dist/src/utils/nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodes.js","sourceRoot":"","sources":["../../../src/utils/nodes.ts"],"names":[],"mappings":"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"}

package/dist/src/utils/omitStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"omitStyle.js","sourceRoot":"","sources":["../../../src/utils/omitStyle.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,4BAA4B,CAC1C,SAAY,EACT;IACH,MAAM,KAAK,GAAG,eAAe,CAAC,SAAS,CAAC,CAAA;IACxC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;QAC7D,IACE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC;YACtD,MAAM,KAAK,MAAM,EACjB,CAAC;YACD,OAAO,IAAI,CAAC,KAAK,CAAA;YACjB,OAAO,IAAI,CAAC,UAAU,CAAA;YACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,CAChC,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CACvB,CAAC;gBACC,gBAAgB;aACjB,CAAiB,CACrB,CAAA;QACH,CAAC;IAAA,CACF,CAAC,CAAA;IAEF,OAAO,KAAK,CAAA;AAAA,CACb"}

package/dist/src/utils/rectHasPoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rectHasPoint.js","sourceRoot":"","sources":["../../../src/utils/rectHasPoint.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,YAAY,CAAC,IAAa,EAAE,EAAE,CAAC,EAAE,CAAC,EAAS,EAAE;IAC3D,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,CAAA;AAAA,CAC9E"}

package/dist/src/utils/setAttribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setAttribute.js","sourceRoot":"","sources":["../../../src/utils/setAttribute.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAA;AAEtE;;GAEG;AACH,MAAM,UAAU,YAAY,CAC1B,IAA8C,EAC9C,IAAY,EACZ,KAAU,EACV;IACA,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,WAAW,CAAC;QACjB,KAAK,KAAK;YACR,IAAI,IAAI,YAAY,gBAAgB,EAAE,CAAC;gBACrC,CAAC;gBAAC,IAAY,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;YAC9B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;YACxC,CAAC;YACD,MAAK;QACP,KAAK,OAAO,CAAC;QACb,KAAK,MAAM,EAAE,CAAC;YACZ,IAAI,IAAI,YAAY,UAAU,EAAE,CAAC;gBAC/B,0EAA0E;gBAC1E,sEAAsE;gBACtE,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;oBACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;gBACxC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,GAAG,GAAG,KAAK,CAAA;gBACf,IAAI,IAAI,YAAY,mBAAmB,EAAE,CAAC;oBACxC,uGAAuG;oBACvG,yFAAyF;oBACzF,8FAA8F;oBAC9F,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;wBACzD,GAAG,GAAG,CAAC,CAAA;oBACT,CAAC;gBACH,CAAC;gBACD,CAAC;gBAAC,IAAY,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YACjE,CAAC;YACD,MAAK;QACP,CAAC;QACD,KAAK,OAAO,CAAC;QACb,KAAK,UAAU;YACb,IAAI,IAAI,YAAY,gBAAgB,EAAE,CAAC;gBACrC,CAAC;gBAAC,IAAY,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;YACzC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;YACxC,CAAC;YACD,MAAK;QACP;YACE,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;gBACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;gBACtC;gBACE,8CAA8C;gBAC9C,IAAI,KAAK,WAAW;oBACpB,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,QAAQ,EACpD,CAAC;oBACD,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAA;gBACrC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;IACL,CAAC;AAAA,CACF"}

package/dist/src/utils/storeScrollState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storeScrollState.js","sourceRoot":"","sources":["../../../src/utils/storeScrollState.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,GAAG,GAAW,EAAE,EAChB,aAAa,GAAG,WAAW,EAC3B,UAAU,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAC5D,EAAE,CAAC;IACH,MAAM,eAAe,GAAoB,EAAE,CAAA;IAC3C,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAc,aAAa,CAAC,CAAC,CAAC,OAAO,CACvE,CAAC,IAAI,EAAE,EAAE,CAAC;QACR,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;QAC/B,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YAClD,eAAe,CAAC,MAAM,CAAC,GAAG;gBACxB,CAAC,EAAE,IAAI,CAAC,SAAS;gBACjB,CAAC,EAAE,IAAI,CAAC,UAAU;aACnB,CAAA;QACH,CAAC;IAAA,CACF,CACF,CAAA;IAED,8CAA8C;IAC9C,eAAe,CAAC,UAAU,CAAC,GAAG;QAC5B,CAAC,EAAE,MAAM,CAAC,OAAO;QACjB,CAAC,EAAE,MAAM,CAAC,OAAO;KAClB,CAAA;IAED,cAAc,CAAC,OAAO,CACpB,mBAAmB,GAAG,GAAG,EACzB,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAChC,CAAA;IAED,OAAO,sBAAsB,CAAC,GAAG,CAAC,CAAA;AAAA,CACnC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GACjC,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC,UAA8C,EAAE,EAAE,CAAC;IACnE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CACtC,cAAc,CAAC,OAAO,CAAC,mBAAmB,GAAG,GAAG,CAAC,IAAI,IAAI,CACvC,CAAA;IACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAM;IACR,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,cAAc,CAAC,EAAE,EAAE,CAAC;QACzD,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,CAAA;QAClC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QAED,IAAI,cAAc,EAAE,CAAC,EAAE,CAAC;YACtB,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,CAAC,CAAA;QACtC,CAAC;QACD,IAAI,cAAc,EAAE,CAAC,EAAE,CAAC;YACtB,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC,CAAC,CAAA;QACvC,CAAC;IAAA,CACF,CAAC,CAAA;IAEF,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;AAAA,CACxC,CAAA"}

package/dist/src/utils/subscribeCustomProperty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subscribeCustomProperty.js","sourceRoot":"","sources":["../../../src/utils/subscribeCustomProperty.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAA;AAG1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAA;AAE7E,IAAI,0BAAgE,CAAA;AAEpE,MAAM,UAAU,uBAAuB,CAAC,EACtC,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,GAQR,EAAE;IACD,0BAA0B,KAAK,IAAI,wBAAwB,CACzD,IAAI,EAEF,IAAI,CAAC,cAAc,CAAC,+BAA+B,CAGpD,EAAE,KAAK,CACT,CAAA;IAED,MAAM,CAAC,SAAS,CACd,0BAA0B,CAAC,gBAAgB,CACzC,QAAQ,EACR,kBAAkB,EAClB,OAAO,CACR,EACD;QACE,OAAO,EAAE,GAAG,EAAE,CAAC;YACb,0BAA0B,EAAE,kBAAkB,CAC5C,QAAQ,EACR,kBAAkB,EAClB;gBACE,SAAS,EAAE,OAAO,KAAK,SAAS;gBAChC,UAAU,EAAE,OAAO,EAAE,UAAU;gBAC/B,aAAa,EAAE,OAAO,EAAE,aAAa;aACtC,CACF,CAAA;QAAA,CACF;KACF,CACF,CAAA;AAAA,CACF"}

package/dist/src/utils/tryStartViewTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tryStartViewTransition.js","sourceRoot":"","sources":["../../../src/utils/tryStartViewTransition.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,sBAAsB,CACpC,cAA0B,EAC1B,OAEC,EAGD;IACA,MAAM,mBAAmB,GAAI,QAAuC;SACjE,mBAAmB,CAAA;IAEtB,IACE,CAAC,mBAAmB;QACpB,CAAC,OAAO,EAAE,6BAA6B,KAAK,IAAI;YAC9C,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC,EAChE,CAAC;QACD,cAAc,EAAE,CAAA;QAChB,OAAO;YACL,QAAQ,EAAE,OAAO,CAAC,OAAO,EAAE;SAC5B,CAAA;IACH,CAAC;IAED,OAAO,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;AAAA,CAC1D"}

package/dist/src/utils/url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.js","sourceRoot":"","sources":["../../../src/utils/url.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAGxC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,GACK,EAAE,EAAE,CAAC;IACd,IAAI,IAAY,CAAA;IAChB,IAAI,KAAK,EAAE,CAAC;QACV,MAAM,YAAY,GAAa,EAAE,CAAA;QACjC,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACjC,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC9B,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;YACjC,CAAC;iBAAM,CAAC;gBACN,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;gBACzC,IAAI,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;oBAC5B,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;gBACjC,CAAC;qBAAM,CAAC;oBACN,6DAA6D;oBAC7D,MAAK;gBACP,CAAC;YACH,CAAC;QACH,CAAC;QACD,IAAI,GAAG,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACrC,CAAC;SAAM,CAAC;QACN,IAAI,GAAG,OAAO,CAAC,IAAc,EAAE,EAAE,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;IACxE,CAAC;IACD,MAAM,UAAU,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAA;IACtE,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SACtC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC;SAC9B,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QACrB,OAAO,GAAG,kBAAkB,CAC1B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,IAAI,GAAG,CAC/B,IAAI,kBAAkB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAA;IAAA,CACzC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,OAAO,GAAG,IAAI,GAAG,UAAU,GACzB,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC,CAAC,EAC/C,EAAE,CAAA;AAAA,CACH,CAAA"}

package/package.json

@@ -3,15 +3,17 @@
 "license": "Apache-2.0",
 "type": "module",
 "homepage": "https://github.com/nordcraftengine/nordcraft",
+"repository": {
+"type": "git",
+"url": "git+https://github.com/nordcraftengine/nordcraft.git",
+"directory": "packages/runtime"
+},
 "dependencies": {
-"@nordcraft/core": "1.0.77",
-"@nordcraft/std-lib": "1.0.77",
+"@nordcraft/core": "1.0.79",
+"@nordcraft/std-lib": "1.0.79",
 "fast-deep-equal": "3.1.3",
 "path-to-regexp": "6.3.0"
 },
-"devDependencies": {
-"@happy-dom/global-registrator": "20.0.11"
-},
 "scripts": {
 "build": "tsgo && bun scripts/build.js",
 "npm-publish": "bun run build && bun publish --access public",
@@ -21,5 +23,5 @@
 "files": ["dist", "src"],
 "main": "dist/page.main.js",
 "types": "dist/page.main.d.ts",
-"version": "1.0.77"
+"version": "1.0.79"
 }

package/src/components/createComponent.ts

@@ -310,6 +310,17 @@ export function createComponent({
     })
   }
 
+  // Subscribe to global stores (currently only theme)
+  ctx.stores.theme.subscribe((value) => {
+    componentDataSignal.update((data) => ({
+      ...data,
+      Page: {
+        ...data.Page,
+        Theme: value,
+      },
+    }))
+  })
+
   attributesSignal.subscribe(
     (Attributes) =>
       componentDataSignal.update((data) => ({
@@ -329,6 +340,7 @@ export function createComponent({
     children,
     formulaCache,
     providers,
+    stores: ctx.stores,
     apis,
     abortSignal: abortController.signal,
     package: node.package ?? ctx.package,

package/src/components/renderComponent.ts

@@ -39,6 +39,9 @@ interface RenderComponentProps {
       ctx: ComponentContext
     }
   >
+  stores: {
+    theme: Signal<string | null>
+  }
   package: string | undefined
   parentElement: Element | ShadowRoot
   instance: Record<string, string>
@@ -63,6 +66,7 @@ export function renderComponent({
   root,
   providers,
   package: packageName,
+  stores,
   parentElement,
   instance,
   toddle,
@@ -81,6 +85,7 @@ export function renderComponent({
     abortSignal,
     root,
     providers,
+    stores,
     package: packageName,
     toddle,
     env,

package/src/custom-element/ToddleComponent.ts

@@ -86,6 +86,11 @@ export class ToddleComponent extends HTMLElement {
       abortSignal: abortController.signal,
       children: {},
       providers: {},
+      stores: {
+        // Note: Theme store is a page-level store, and cannot be used in custom-elements in a meaningful way at the moment.
+        // Users can implement theming by setting data-nc-theme attribute themselves.
+        theme: signal<string | null>(null),
+      },
       package: undefined,
       toddle,
       env,

package/src/editor-preview.main.ts

@@ -31,6 +31,7 @@ import {
   getThemeEntries,
   renderThemeValues,
 } from '@nordcraft/core/dist/styling/theme'
+import { THEME_DATA_ATTRIBUTE } from '@nordcraft/core/dist/styling/theme.const'
 import type { StyleVariant } from '@nordcraft/core/dist/styling/variantSelector'
 import type {
   ActionHandler,
@@ -79,6 +80,7 @@ import type {
   PreviewShowSignal,
 } from './types'
 import { createFormulaCache } from './utils/createFormulaCache'
+import { getThemeSignal } from './utils/getThemeSignal'
 import { getNodeAndAncestors, isNodeOrAncestorConditional } from './utils/nodes'
 import { rectHasPoint } from './utils/rectHasPoint'
 import {
@@ -217,6 +219,7 @@ export const createRoot = (
     displayedNodes: [],
     testMode: false,
   })
+  const themeSignal = signal<string | null>(null)
   window.toddle._preview = { showSignal }
   document.body.setAttribute('data-mode', 'design')
   let components: Component[] | null = null
@@ -1002,7 +1005,7 @@ export const createRoot = (
               }
               cssBlocks.push(
                 renderThemeValues(
-                  `[data-theme~="${theme.key}"]`,
+                  `[${THEME_DATA_ATTRIBUTE}~="${theme.key}"]`,
                   getThemeEntries(theme.value, theme.key),
                 ),
               )
@@ -1052,9 +1055,9 @@ export const createRoot = (
         case 'preview_theme': {
           const { theme } = message.data
           if (theme) {
-            document.body.setAttribute('data-theme', theme)
+            document.body.setAttribute(THEME_DATA_ATTRIBUTE, theme)
           } else {
-            document.body.removeAttribute('data-theme')
+            document.body.removeAttribute(THEME_DATA_ATTRIBUTE)
           }
         }
       }
@@ -1248,7 +1251,8 @@ export const createRoot = (
       fastDeepEqual(
         ctx?.component.route?.info?.meta,
         _component.route?.info?.meta,
-      ) === false
+      ) === false ||
+      !ctx
     ) {
       insertHeadTags(_component.route?.info?.meta ?? {}, {
         component: _component,
@@ -1390,6 +1394,21 @@ export const createRoot = (
       component: _component,
     }
 
+    if (
+      fastDeepEqual(
+        newCtx.component.route?.info?.theme,
+        ctx?.component.route?.info?.theme,
+      ) === false
+    ) {
+      setupThemeSubscription(
+        newCtx.component,
+        newCtx.dataSignal,
+        env,
+      ).subscribe((theme) => {
+        newCtx.stores.theme.set(theme)
+      })
+    }
+
     for (const api in newCtx.component.apis) {
       // check if the api has changed (ignoring onCompleted and onFailed).
       const apiInstance = newCtx.component.apis[api]
@@ -1554,11 +1573,20 @@ export const createRoot = (
       abortSignal: new AbortController().signal,
       formulaCache: createFormulaCache(component),
       providers: {},
+      stores: {
+        theme: themeSignal,
+      },
       package: undefined,
       toddle: window.toddle,
       env,
     }
 
+    setupThemeSubscription(ctx.component, ctx.dataSignal, env).subscribe(
+      (theme) => {
+        ctx.stores.theme.set(theme)
+      },
+    )
+
     if (isContextProvider(component)) {
       // Subscribe to exposed formulas and update the component's data signal
       const formulaDataSignals = Object.fromEntries(
@@ -1672,7 +1700,7 @@ const insertHeadTags = (
     .filter((elem) => !entries[elem.getAttribute('data-meta-id')!])
     .forEach((elem) => elem.remove())
 
-  // Skip anything that is not <link> or <script> tags, as they don't have any influence on the preview
+  // Skip anything that is not <link>, <style> or <script> tags, as they don't have any influence on the preview
   Object.entries(entries).forEach(([id, entry]) => {
     switch (entry.tag) {
       case HeadTagTypes.Link:
@@ -1699,9 +1727,22 @@ const insertHeadTags = (
           ></script>
         `),
         )
+      case HeadTagTypes.Style:
+        return insertOrReplaceHeadNode(
+          id,
+          document.createRange().createContextualFragment(`
+          <style
+            data-meta-id="${id}"
+            ${Object.entries(entry.attrs)
+              .map(([key, value]) => `${key}="${applyFormula(value, context)}"`)
+              .join(' ')}
+          >
+            ${applyFormula(entry.content ?? '', context)}
+          </style>
+        `),
+        )
       default:
-        // TODO: handle style meta tags?
-        break
+        return
     }
   })
 }
@@ -1874,3 +1915,28 @@ const registerFormulas = (
 const postMessageToEditor = (message: EditorPostMessageType) => {
   window.parent?.postMessage(message, '*')
 }
+
+let _themeRootSignal = null as Signal<string | null> | null
+function setupThemeSubscription(
+  component: Component,
+  dataSignal: Signal<ComponentData>,
+  env: ToddleEnv,
+) {
+  _themeRootSignal?.destroy()
+  _themeRootSignal = getThemeSignal(component, dataSignal, env)
+  _themeRootSignal.subscribe((theme) => {
+    if (isDefined(theme)) {
+      document.documentElement.setAttribute(THEME_DATA_ATTRIBUTE, theme)
+    } else {
+      document.documentElement.removeAttribute(THEME_DATA_ATTRIBUTE)
+    }
+    dataSignal.update((data) => ({
+      ...data,
+      Page: {
+        Theme: theme ?? null,
+      },
+    }))
+  })
+
+  return _themeRootSignal
+}

package/src/page.main.ts

@@ -6,6 +6,7 @@ import type {
 import type { ToddleEnv } from '@nordcraft/core/dist/formula/formula'
 import { applyFormula } from '@nordcraft/core/dist/formula/formula'
 import type { PluginFormula } from '@nordcraft/core/dist/formula/formulaTypes'
+import { THEME_DATA_ATTRIBUTE } from '@nordcraft/core/dist/styling/theme.const'
 import type {
   ActionHandler,
   ArgumentInputDataFunction,
@@ -29,6 +30,7 @@ import { initLogState, registerComponentToLogState } from './debug/logState'
 import type { Signal } from './signal/signal'
 import { signal } from './signal/signal'
 import type { ComponentContext, LocationSignal } from './types'
+import { getThemeSignal } from './utils/getThemeSignal'
 
 initLogState()
 
@@ -203,6 +205,9 @@ export const createRoot = (domNode: HTMLElement) => {
     children: {},
     formulaCache: {},
     providers: {},
+    stores: {
+      theme: getThemeSignal(component, dataSignal, env),
+    },
     apis: {},
     toddle: window.toddle,
     triggerEvent: (event: string, data: unknown) =>
@@ -265,6 +270,14 @@ export const createRoot = (domNode: HTMLElement) => {
     }
   }
 
+  ctx.stores.theme.subscribe((newTheme) => {
+    if (isDefined(newTheme)) {
+      document.documentElement.setAttribute(THEME_DATA_ATTRIBUTE, newTheme)
+    } else {
+      document.documentElement.removeAttribute(THEME_DATA_ATTRIBUTE)
+    }
+  })
+
   // We can only setup meta updates after the dataSignal has been initiated with API data etc.
   setupMetaUpdates(component, dataSignal)
 

package/src/styles/CustomPropertyStyleSheet.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, test } from 'bun:test'
+import '../../happydom'
 import { CustomPropertyStyleSheet } from './CustomPropertyStyleSheet'
 
 describe('CustomPropertyStyleSheet', () => {
@@ -57,6 +58,51 @@ describe('CustomPropertyStyleSheet', () => {
     )
   })
 
+  test('it works with prefers-reduced-motion: reduce', () => {
+    const instance = new CustomPropertyStyleSheet(document)
+    instance.registerProperty('.my-class', '--my-property', {
+      mediaQuery: { 'prefers-reduced-motion': 'reduce' },
+    })('256px')
+    expect(instance.getStyleSheet().cssRules.length).toBe(1)
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      `\
+@media (prefers-reduced-motion: reduce) {
+  .my-class { --my-property: 256px; }
+}`,
+    )
+  })
+
+  test('it works with prefers-reduced-motion: no-preference', () => {
+    const instance = new CustomPropertyStyleSheet(document)
+    instance.registerProperty('.my-class', '--my-property', {
+      mediaQuery: { 'prefers-reduced-motion': 'no-preference' },
+    })('256px')
+    expect(instance.getStyleSheet().cssRules.length).toBe(1)
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      `\
+@media (prefers-reduced-motion: no-preference) {
+  .my-class { --my-property: 256px; }
+}`,
+    )
+  })
+
+  test('it combines prefers-reduced-motion with other media queries', () => {
+    const instance = new CustomPropertyStyleSheet(document)
+    instance.registerProperty('.my-class', '--my-property', {
+      mediaQuery: {
+        'prefers-reduced-motion': 'reduce',
+        'max-width': '768px',
+      },
+    })('256px')
+    expect(instance.getStyleSheet().cssRules.length).toBe(1)
+    expect(instance.getStyleSheet().cssRules[0].cssText).toBe(
+      `\
+@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
+  .my-class { --my-property: 256px; }
+}`,
+    )
+  })
+
   test('it unregisters a property', () => {
     const instance = new CustomPropertyStyleSheet(document)
     const setter = instance.registerProperty('.my-class', '--my-property')

package/src/styles/style.test.ts

@@ -0,0 +1,214 @@
+import type { Component } from '@nordcraft/core/dist/component/component.types'
+import { describe, expect, test } from 'bun:test'
+import { insertStyles } from './style'
+
+describe('insertStyles() - prefers-reduced-motion', () => {
+  test('it inserts styles with prefers-reduced-motion: reduce media query', () => {
+    const component: Component = {
+      name: 'TestComponent',
+      nodes: {
+        '0': {
+          type: 'element',
+          tag: 'div',
+          style: {
+            color: 'red',
+          },
+          variants: [
+            {
+              style: {
+                transition: 'none',
+                animation: 'none',
+              },
+              mediaQuery: {
+                'prefers-reduced-motion': 'reduce',
+              },
+            },
+          ],
+          children: [],
+          attrs: {},
+          events: {},
+        },
+      },
+    }
+
+    const parent = document.createElement('div')
+    insertStyles(parent, component, [])
+
+    const styleElement = parent.querySelector('[data-hash]')
+    expect(styleElement).toBeTruthy()
+
+    const styleText = styleElement?.textContent ?? ''
+
+    // Check that the media query for prefers-reduced-motion: reduce is present
+    expect(styleText).toContain('@media (prefers-reduced-motion: reduce)')
+
+    // Check that the variant styles are present
+    expect(styleText).toContain('transition:none')
+    expect(styleText).toContain('animation:none')
+  })
+
+  test('it inserts styles with prefers-reduced-motion: no-preference media query', () => {
+    const component: Component = {
+      name: 'TestComponent',
+      nodes: {
+        '0': {
+          type: 'element',
+          tag: 'div',
+          style: {},
+          variants: [
+            {
+              style: {
+                animation: 'fadeIn 1s',
+              },
+              mediaQuery: {
+                'prefers-reduced-motion': 'no-preference',
+              },
+            },
+          ],
+          children: [],
+          attrs: {},
+          events: {},
+        },
+      },
+    }
+
+    const parent = document.createElement('div')
+    insertStyles(parent, component, [])
+
+    const styleElement = parent.querySelector('[data-hash]')
+    expect(styleElement).toBeTruthy()
+
+    const styleText = styleElement?.textContent ?? ''
+
+    // Check that the media query for prefers-reduced-motion: no-preference is present
+    expect(styleText).toContain(
+      '@media (prefers-reduced-motion: no-preference)',
+    )
+
+    // Check that the animation property is present
+    expect(styleText).toContain('animation:fadeIn 1s')
+  })
+
+  test('it combines prefers-reduced-motion with other media queries', () => {
+    const component: Component = {
+      name: 'TestComponent',
+      nodes: {
+        '0': {
+          type: 'element',
+          tag: 'div',
+          style: {},
+          variants: [
+            {
+              style: {
+                fontSize: '14px',
+              },
+              mediaQuery: {
+                'prefers-reduced-motion': 'reduce',
+                'max-width': '768px',
+              },
+            },
+          ],
+          children: [],
+          attrs: {},
+          events: {},
+        },
+      },
+    }
+
+    const parent = document.createElement('div')
+    insertStyles(parent, component, [])
+
+    const styleElement = parent.querySelector('[data-hash]')
+    expect(styleElement).toBeTruthy()
+
+    const styleText = styleElement?.textContent ?? ''
+
+    // Should combine media queries with 'and'
+    expect(styleText).toMatch(
+      /@media \(prefers-reduced-motion: reduce\) and \(max-width: 768px\)/,
+    )
+  })
+
+  test('it handles multiple variants with different motion preferences', () => {
+    const component: Component = {
+      name: 'TestComponent',
+      nodes: {
+        '0': {
+          type: 'element',
+          tag: 'div',
+          style: {},
+          variants: [
+            {
+              style: { animation: 'none' },
+              mediaQuery: { 'prefers-reduced-motion': 'reduce' },
+            },
+            {
+              style: { animation: 'fadeIn 1s' },
+              mediaQuery: { 'prefers-reduced-motion': 'no-preference' },
+            },
+          ],
+          children: [],
+          attrs: {},
+          events: {},
+        },
+      },
+    }
+
+    const parent = document.createElement('div')
+    insertStyles(parent, component, [])
+
+    const styleElement = parent.querySelector('[data-hash]')
+    expect(styleElement).toBeTruthy()
+
+    const styleText = styleElement?.textContent ?? ''
+
+    // Check that both media queries are present
+    expect(styleText).toContain('@media (prefers-reduced-motion: reduce)')
+    expect(styleText).toContain(
+      '@media (prefers-reduced-motion: no-preference)',
+    )
+
+    // Check that both animation values are present
+    expect(styleText).toContain('animation:none')
+    expect(styleText).toContain('animation:fadeIn 1s')
+  })
+
+  test('it filters out null prefers-reduced-motion values', () => {
+    const component: Component = {
+      name: 'TestComponent',
+      nodes: {
+        '0': {
+          type: 'element',
+          tag: 'div',
+          style: {},
+          variants: [
+            {
+              style: { color: 'red' },
+              mediaQuery: {
+                'prefers-reduced-motion': null,
+                'max-width': '768px',
+              },
+            },
+          ],
+          children: [],
+          attrs: {},
+          events: {},
+        },
+      },
+    }
+
+    const parent = document.createElement('div')
+    insertStyles(parent, component, [])
+
+    const styleElement = parent.querySelector('[data-hash]')
+    expect(styleElement).toBeTruthy()
+
+    const styleText = styleElement?.textContent ?? ''
+
+    // null values should be filtered out
+    expect(styleText).not.toContain('prefers-reduced-motion: null')
+
+    // max-width should still be present
+    expect(styleText).toContain('max-width: 768px')
+  })
+})