@nordcraft/runtime 1.0.33 → 1.0.35

package/dist/styles/CustomPropertyStyleSheet.d.ts

@@ -11,7 +11,7 @@ import type { MediaQuery } from '@nordcraft/core/dist/component/component.types'
 export declare class CustomPropertyStyleSheet {
     private styleSheet;
     private ruleMap;
-    constructor(styleSheet?: CSSStyleSheet | null);
+    constructor(root: Document | ShadowRoot, styleSheet?: CSSStyleSheet | null);
     /**
      * @returns A function to update the property value efficiently.
      */
@@ -22,6 +22,7 @@ export declare class CustomPropertyStyleSheet {
     unregisterProperty(selector: string, name: string, options?: {
         mediaQuery?: MediaQuery;
         startingStyle?: boolean;
+        deepClean?: boolean;
     }): void;
     getStyleSheet(): CSSStyleSheet;
     /**

package/dist/styles/CustomPropertyStyleSheet.js

@@ -11,13 +11,13 @@ export class CustomPropertyStyleSheet {
     styleSheet;
     // Selector to rule index mapping
     ruleMap;
-    constructor(styleSheet) {
+    constructor(root, styleSheet) {
         if (styleSheet) {
             this.styleSheet = styleSheet;
         }
         else {
             this.styleSheet = new CSSStyleSheet();
-            document.adoptedStyleSheets.push(this.getStyleSheet());
+            root.adoptedStyleSheets.push(this.getStyleSheet());
         }
     }
     /**
@@ -29,7 +29,7 @@ export class CustomPropertyStyleSheet {
         // Check if the selector already exists
         let rule = this.ruleMap.get(fullSelector);
         if (!rule) {
-            const ruleIndex = this.styleSheet.insertRule(fullSelector);
+            const ruleIndex = this.styleSheet.insertRule(fullSelector, this.styleSheet.cssRules.length);
             let newRule = this.styleSheet.cssRules[ruleIndex];
             // We are only interested in the dynamic style, so get the actual style rule, not media or other nested rules. Loop until we are at the bottom most rule.
             while (newRule.cssRules &&
@@ -48,8 +48,17 @@ export class CustomPropertyStyleSheet {
             return;
         }
         const fullSelector = CustomPropertyStyleSheet.getFullSelector(selector, options);
-        // We only clean up the property, as we assume that the rule will be reused.
-        this.ruleMap.get(fullSelector)?.style.removeProperty(name);
+        const rule = this.ruleMap.get(fullSelector);
+        if (!rule) {
+            return;
+        }
+        rule.style.removeProperty(name);
+        // Cleaning up empty selectors is probably not necessary in production and may have performance implications.
+        // However, it is required for the editor-preview as it is a dynamic environment and things may get reordered and canvas reused.
+        if (options?.deepClean && rule.style.length === 0) {
+            this.styleSheet.deleteRule(Array.from(this.ruleMap.keys()).indexOf(fullSelector));
+            this.ruleMap.delete(fullSelector);
+        }
     }
     getStyleSheet() {
         return this.styleSheet;

package/dist/styles/CustomPropertyStyleSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomPropertyStyleSheet.js","sourceRoot":"","sources":["../../src/styles/CustomPropertyStyleSheet.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,MAAM,OAAO,wBAAwB;IAC3B,UAAU,CAAe;IAEjC,iCAAiC;IACzB,OAAO,CAA+D;IAE9E,YAAY,UAAiC;QAC3C,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;QAC9B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,GAAG,IAAI,aAAa,EAAE,CAAA;YACrC,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;QACxD,CAAC;IACH,CAAC;IAED;;OAEG;IACI,gBAAgB,CACrB,QAAgB,EAChB,IAAY,EACZ,OAGC;QAED,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,eAAe,EAAE,CAAA;QACvC,MAAM,YAAY,GAAG,wBAAwB,CAAC,eAAe,CAC3D,QAAQ,EACR,OAAO,CACR,CAAA;QAED,uCAAuC;QACvC,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAA;QACzC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,YAAY,CAAC,CAAA;YAC1D,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;YAEjD,yJAAyJ;YACzJ,OACG,OAAe,CAAC,QAAQ;gBACxB,OAA2B,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAChD,CAAC;gBACD,OAAO,GAAI,OAA2B,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YACpD,CAAC;YACD,IAAI,GAAG,OAA+C,CAAA;YACtD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,CAAA;QACtC,CAAC;QAED,OAAO,CAAC,KAAa,EAAE,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;QACrC,CAAC,CAAA;IACH,CAAC;IAEM,kBAAkB,CACvB,QAAgB,EAChB,IAAY,EACZ,OAGC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,MAAM,YAAY,GAAG,wBAAwB,CAAC,eAAe,CAC3D,QAAQ,EACR,OAAO,CACR,CAAA;QAED,4EAA4E;QAC5E,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IAC5D,CAAC;IAEM,aAAa;QAClB,OAAO,IAAI,CAAC,UAAU,CAAA;IACxB,CAAC;IAED;;;OAGG;IACK,eAAe;QACrB,MAAM,SAAS,GAA8B,IAAI,GAAG,EAAE,CAAA;QACtD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzD,IAAI,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YACtC,MAAM,QAAQ,GAAG,wBAAwB,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAA;YACnE,mFAAmF;YACnF,OACG,IAAwB,CAAC,QAAQ;gBACjC,IAAwB,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAC7C,CAAC;gBACD,IAAI,GAAI,IAAwB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YAC9C,CAAC;YAED,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAoB,CAAC,CAAA;QAC/C,CAAC;QACD,OAAO,SAAS,CAAA;IAClB,CAAC;IAEO,MAAM,CAAC,mBAAmB,CAAC,IAAa;QAC9C,QAAQ,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YAC9B,KAAK,cAAc;gBACjB,oFAAoF;gBACpF,OAAO,GAAI,IAAqB,CAAC,YAAY,MAAM,KAAK,CAAC,IAAI,CAC1D,IAAqB,CAAC,QAAQ,CAChC;qBACE,GAAG,CAAC,wBAAwB,CAAC,mBAAmB,CAAC;qBACjD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;YAClB,KAAK,sBAAsB;gBACzB,OAAO,qBAAqB,KAAK,CAAC,IAAI,CACnC,IAA6B,CAAC,QAAQ,CACxC;qBACE,GAAG,CAAC,wBAAwB,CAAC,mBAAmB,CAAC;qBACjD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;YAClB,KAAK,cAAc;gBACjB,OAAO,UAAW,IAAqB,CAAC,KAAK,CAAC,SAAS,MAAM,KAAK,CAAC,IAAI,CACpE,IAAqB,CAAC,QAAQ,CAChC;qBACE,GAAG,CAAC,wBAAwB,CAAC,mBAAmB,CAAC;qBACjD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;YAClB,KAAK,uBAAuB;gBAC1B,OAAO,EAAE,CAAA;YACX;gBACE,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CACV,8BAA8B,IAAI,CAAC,WAAW,CAAC,IAAI,6BAA6B,CACjF,CAAA;gBACD,OAAO,EAAE,CAAA;QACb,CAAC;IACH,CAAC;IAEO,MAAM,CAAC,eAAe,CAC5B,QAAgB,EAChB,OAGC;QAED,IAAI,MAAM,GACR,QAAQ,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;QAC1E,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC;YACxB,MAAM,GAAG,WAAW,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC;iBACnD,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,KAAK,EAAE,CAAC;iBACzC,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,SAAS,CAAC,OAAO,MAAM,GAAG,CAAA;QACpC,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;CACF"}
+{"version":3,"file":"CustomPropertyStyleSheet.js","sourceRoot":"","sources":["../../src/styles/CustomPropertyStyleSheet.ts"],"names":[],"mappings":"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"}

package/dist/styles/CustomPropertyStyleSheet.test.js

@@ -2,18 +2,18 @@ import { describe, expect, test } from 'bun:test';
 import { CustomPropertyStyleSheet } from './CustomPropertyStyleSheet';
 describe('CustomPropertyStyleSheet', () => {
     test('it creates a new stylesheet', () => {
-        const instance = new CustomPropertyStyleSheet();
+        const instance = new CustomPropertyStyleSheet(document);
         expect(instance).toBeInstanceOf(CustomPropertyStyleSheet);
         expect(instance.getStyleSheet().cssRules).toHaveLength(0);
     });
     test('it adds a property definition', () => {
-        const instance = new CustomPropertyStyleSheet();
+        const instance = new CustomPropertyStyleSheet(document);
         instance.registerProperty('.my-class', '--my-property');
         expect(instance.getStyleSheet().cssRules.length).toBe(1);
         expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class {  }');
     });
     test('it puts different selectors in different rules', () => {
-        const instance = new CustomPropertyStyleSheet();
+        const instance = new CustomPropertyStyleSheet(document);
         instance.registerProperty('.my-class', '--my-property')('256px');
         instance.registerProperty('.my-other-class', '--my-property')('256px');
         expect(instance.getStyleSheet().cssRules.length).toBe(2);
@@ -21,7 +21,7 @@ describe('CustomPropertyStyleSheet', () => {
         expect(instance.getStyleSheet().cssRules[1].cssText).toBe('.my-other-class { --my-property: 256px; }');
     });
     test('it can update properties', () => {
-        const instance = new CustomPropertyStyleSheet();
+        const instance = new CustomPropertyStyleSheet(document);
         const setter = instance.registerProperty('.my-class', '--my-property');
         setter('256px');
         expect(instance.getStyleSheet().cssRules.length).toBe(1);
@@ -30,7 +30,7 @@ describe('CustomPropertyStyleSheet', () => {
         expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class { --my-property: inherit; }');
     });
     test('it works with media queries', () => {
-        const instance = new CustomPropertyStyleSheet();
+        const instance = new CustomPropertyStyleSheet(document);
         instance.registerProperty('.my-class', '--my-property', {
             mediaQuery: { 'max-width': '600px' },
         })('256px');
@@ -38,7 +38,7 @@ describe('CustomPropertyStyleSheet', () => {
         expect(instance.getStyleSheet().cssRules[0].cssText).toBe('@media (max-width: 600px) { .my-class { --my-property: 256px; } }');
     });
     test('it unregisters a property', () => {
-        const instance = new CustomPropertyStyleSheet();
+        const instance = new CustomPropertyStyleSheet(document);
         const setter = instance.registerProperty('.my-class', '--my-property');
         setter('256px');
         const setter2 = instance.registerProperty('.my-class', '--my-other-property');
@@ -50,7 +50,7 @@ describe('CustomPropertyStyleSheet', () => {
         expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class {  }');
     });
     test('it unregisters a property with media queries', () => {
-        const instance = new CustomPropertyStyleSheet();
+        const instance = new CustomPropertyStyleSheet(document);
         const setter = instance.registerProperty('.my-class-with-media', '--my-property-with-media', {
             mediaQuery: { 'max-width': '600px' },
         });

package/dist/styles/CustomPropertyStyleSheet.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomPropertyStyleSheet.test.js","sourceRoot":"","sources":["../../src/styles/CustomPropertyStyleSheet.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAErE,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,IAAI,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACvC,MAAM,QAAQ,GAAG,IAAI,wBAAwB,EAAE,CAAA;QAC/C,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC,wBAAwB,CAAC,CAAA;QACzD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;IAC3D,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACzC,MAAM,QAAQ,GAAG,IAAI,wBAAwB,EAAE,CAAA;QAC/C,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;QACvD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACxD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC7E,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,gDAAgD,EAAE,GAAG,EAAE;QAC1D,MAAM,QAAQ,GAAG,IAAI,wBAAwB,EAAE,CAAA;QAC/C,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC,OAAO,CAAC,CAAA;QAChE,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,OAAO,CAAC,CAAA;QACtE,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACxD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CACvD,qCAAqC,CACtC,CAAA;QACD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CACvD,2CAA2C,CAC5C,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACpC,MAAM,QAAQ,GAAG,IAAI,wBAAwB,EAAE,CAAA;QAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;QACtE,MAAM,CAAC,OAAO,CAAC,CAAA;QACf,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACxD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CACvD,qCAAqC,CACtC,CAAA;QAED,MAAM,CAAC,SAAS,CAAC,CAAA;QACjB,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CACvD,uCAAuC,CACxC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACvC,MAAM,QAAQ,GAAG,IAAI,wBAAwB,EAAE,CAAA;QAC/C,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE;YACtD,UAAU,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE;SACrC,CAAC,CAAC,OAAO,CAAC,CAAA;QACX,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACxD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CACvD,mEAAmE,CACpE,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACrC,MAAM,QAAQ,GAAG,IAAI,wBAAwB,EAAE,CAAA;QAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;QACtE,MAAM,CAAC,OAAO,CAAC,CAAA;QACf,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CACvC,WAAW,EACX,qBAAqB,CACtB,CAAA;QACD,OAAO,CAAC,OAAO,CAAC,CAAA;QAChB,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CACvD,iEAAiE,CAClE,CAAA;QAED,QAAQ,CAAC,kBAAkB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;QACzD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CACvD,2CAA2C,CAC5C,CAAA;QACD,QAAQ,CAAC,kBAAkB,CAAC,WAAW,EAAE,qBAAqB,CAAC,CAAA;QAC/D,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC7E,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACxD,MAAM,QAAQ,GAAG,IAAI,wBAAwB,EAAE,CAAA;QAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CACtC,sBAAsB,EACtB,0BAA0B,EAC1B;YACE,UAAU,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE;SACrC,CACF,CAAA;QACD,MAAM,CAAC,OAAO,CAAC,CAAA;QACf,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACxD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CACvD,yFAAyF,CAC1F,CAAA;QAED,QAAQ,CAAC,kBAAkB,CACzB,sBAAsB,EACtB,0BAA0B,EAC1B;YACE,UAAU,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE;SACrC,CACF,CAAA;QACD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CACvD,yDAAyD,CAC1D,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"CustomPropertyStyleSheet.test.js","sourceRoot":"","sources":["../../src/styles/CustomPropertyStyleSheet.test.ts"],"names":[],"mappings":"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"}

package/dist/utils/subscribeCustomProperty.d.ts

@@ -1,8 +1,11 @@
 import type { StyleVariant } from '@nordcraft/core/dist/component/component.types';
 import type { Signal } from '../signal/signal';
-export declare function subscribeCustomProperty({ selector, customPropertyName, signal, variant, }: {
+import type { Runtime } from '@nordcraft/core/dist/types';
+export declare function subscribeCustomProperty({ selector, customPropertyName, signal, variant, root, runtime, }: {
     selector: string;
     customPropertyName: string;
     signal: Signal<string>;
     variant?: StyleVariant;
+    root: Document | ShadowRoot;
+    runtime: Runtime;
 }): void;

package/dist/utils/subscribeCustomProperty.js

@@ -1,9 +1,16 @@
 import { CUSTOM_PROPERTIES_STYLESHEET_ID } from '@nordcraft/core/dist/styling/theme.const';
 import { CustomPropertyStyleSheet } from '../styles/CustomPropertyStyleSheet';
-const CUSTOM_PROPERTIES_STYLESHEET = new CustomPropertyStyleSheet(document.getElementById(CUSTOM_PROPERTIES_STYLESHEET_ID)?.sheet);
-export function subscribeCustomProperty({ selector, customPropertyName, signal, variant, }) {
-    signal.subscribe(CUSTOM_PROPERTIES_STYLESHEET.registerProperty(selector, customPropertyName, variant), {
-        destroy: () => CUSTOM_PROPERTIES_STYLESHEET.unregisterProperty(selector, customPropertyName, variant),
+let customPropertiesStylesheet;
+export function subscribeCustomProperty({ selector, customPropertyName, signal, variant, root, runtime, }) {
+    customPropertiesStylesheet ??= new CustomPropertyStyleSheet(root, root.getElementById(CUSTOM_PROPERTIES_STYLESHEET_ID)?.sheet);
+    signal.subscribe(customPropertiesStylesheet.registerProperty(selector, customPropertyName, variant), {
+        destroy: () => {
+            customPropertiesStylesheet?.unregisterProperty(selector, customPropertyName, {
+                deepClean: runtime === 'preview',
+                mediaQuery: variant?.mediaQuery,
+                startingStyle: variant?.startingStyle,
+            });
+        },
     });
 }
 //# sourceMappingURL=subscribeCustomProperty.js.map

package/dist/utils/subscribeCustomProperty.js.map

@@ -1 +1 @@
-{"version":3,"file":"subscribeCustomProperty.js","sourceRoot":"","sources":["../../src/utils/subscribeCustomProperty.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAA;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAA;AAE7E,MAAM,4BAA4B,GAAG,IAAI,wBAAwB,CAE7D,QAAQ,CAAC,cAAc,CAAC,+BAA+B,CAGxD,EAAE,KAAK,CACT,CAAA;AAED,MAAM,UAAU,uBAAuB,CAAC,EACtC,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,OAAO,GAMR;IACC,MAAM,CAAC,SAAS,CACd,4BAA4B,CAAC,gBAAgB,CAC3C,QAAQ,EACR,kBAAkB,EAClB,OAAO,CACR,EACD;QACE,OAAO,EAAE,GAAG,EAAE,CACZ,4BAA4B,CAAC,kBAAkB,CAC7C,QAAQ,EACR,kBAAkB,EAClB,OAAO,CACR;KACJ,CACF,CAAA;AACH,CAAC"}
+{"version":3,"file":"subscribeCustomProperty.js","sourceRoot":"","sources":["../../src/utils/subscribeCustomProperty.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAA;AAE1F,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;IACC,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;YACZ,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;QACH,CAAC;KACF,CACF,CAAA;AACH,CAAC"}

package/package.json

@@ -4,8 +4,8 @@
 "type": "module",
 "homepage": "https://github.com/nordcraftengine/nordcraft",
 "dependencies": {
-"@nordcraft/core": "1.0.33",
-"@nordcraft/std-lib": "1.0.33",
+"@nordcraft/core": "1.0.35",
+"@nordcraft/std-lib": "1.0.35",
 "fast-deep-equal": "3.1.3",
 "path-to-regexp": "6.3.0"
 },
@@ -21,5 +21,5 @@
 "files": ["dist", "src"],
 "main": "dist/page.main.js",
 "types": "dist/page.main.d.ts",
-"version": "1.0.33"
+"version": "1.0.35"
 }

package/src/components/createComponent.ts

@@ -89,6 +89,8 @@ export function createComponent({
           })
         }),
         customPropertyName,
+        root: ctx.root,
+        runtime: ctx.env.runtime,
       }),
   )
   node.variants?.forEach((variant) => {
@@ -113,6 +115,8 @@ export function createComponent({
           ),
           customPropertyName,
           variant,
+          root: ctx.root,
+          runtime: ctx.env.runtime,
         }),
     )
   })

package/src/components/createElement.ts

@@ -154,7 +154,12 @@ export function createElement({
     ([customPropertyName, { formula }]) =>
       subscribeCustomProperty({
         customPropertyName,
-        selector: getNodeSelector(path),
+        selector:
+          ctx.env.runtime === 'custom-element' &&
+          ctx.isRootComponent &&
+          path === '0'
+            ? `${getNodeSelector(path)}, :host`
+            : getNodeSelector(path),
         signal: dataSignal.map((data) =>
           applyFormula(formula, {
             data,
@@ -166,6 +171,8 @@ export function createElement({
             env: ctx.env,
           }),
         ),
+        root: ctx.root,
+        runtime: ctx.env.runtime,
       }),
   )
 
@@ -189,6 +196,8 @@ export function createElement({
               env: ctx.env,
             }),
           ),
+          root: ctx.root,
+          runtime: ctx.env.runtime,
         })
       },
     )

package/src/components/createNode.ts

@@ -121,14 +121,14 @@ export function createNode({
 
         if (!parentElement || ctx.root.contains(parentElement) === false) {
           console.error(
-            `Conditional: Parent element does not exist for "${path}" This is likely due to the DOM being modified outside of toddle.`,
+            `Conditional: Parent element does not exist for "${path}" This is likely due to the DOM being modified outside of Nordcraft.`,
           )
           return
         }
 
         if (parentElement.querySelector(`[data-id="${path}"]`)) {
           console.warn(
-            `Conditional: Element with data-id="${path}" already exists. This is likely due to the DOM being modified outside of toddle`,
+            `Conditional: Element with data-id="${path}" already exists. This is likely due to the DOM being modified outside of Nordcraft`,
           )
           return
         }
@@ -315,7 +315,7 @@ export function createNode({
 
         if (!parentElement || ctx.root.contains(parentElement) === false) {
           console.error(
-            `Repeat: Parent element does not exist for ${path}. This is likely due to the DOM being modified outside of toddle.`,
+            `Repeat: Parent element does not exist for ${path}. This is likely due to the DOM being modified outside of Nordcraft.`,
           )
           return
         }

package/src/debug/panicScreen.ts

@@ -0,0 +1,37 @@
+export const createPanicScreen = ({
+  name,
+  message,
+  isPage,
+  cause,
+}: {
+  name: string
+  message: string
+  isPage?: boolean
+  cause?: unknown
+}) => {
+  let content = getContent(name, message, isPage)
+
+  // Easter egg for RangeError
+  if (cause instanceof RangeError) {
+    for (let i = 0; i < 10; i++) {
+      content += `<div style="transform-origin: 15% 15%; scale: ${1 / (i * 0.225 + 1.225)}; font-size: ${22 / ((i * 0.6) ** 2 + 1)}px">${getContent(name, message, isPage)}</div>`
+    }
+  }
+
+  return document.createRange().createContextualFragment(`
+      <main style="background-color: blue; color: white; font-family: 'Courier New', monospace; font-weight: 100; display: flex; justify-content: flex-start; align-items: flex-start; margin: 0px; padding: 0px;">
+        <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 100vh;">
+          <div style="display: flex; flex-direction: column; gap: 20px; padding: 80px; font-size: 22px;">
+            ${content}
+          </div>
+        </div>
+        <div style="position:fixed; pointer-events: none; width: 100vw; height: 100vh; background-image: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.33) 25%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.33) 100%); background-size: 4px 4px;"></div>
+        <div style="position:fixed; pointer-events: none; width: 100vw; height: 100vh; background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%);"></div>
+      </main>
+  `)
+}
+
+const getContent = (name: string, message: string, isPage?: boolean) => `
+  <h1 style="display: inline; font-size: 1em; background: white; color: blue; padding: 0.4em 0.8em;">${name}</h1>
+  <p style="font-size: 0.8em;">The ${isPage ? 'page' : 'component'} could not be rendered. Fix the issue and try again. Join our <a style="color:white" href="https://discord.gg/nordcraft" target="_blank">Discord</a> for help.</p>
+  <p style="font-size: 0.81em;">Error Message: ${message}</p>`

package/src/debug/sendEditorToast.ts

@@ -0,0 +1,19 @@
+export function sendEditorToast(
+  title: string,
+  message: string,
+  {
+    type = 'neutral',
+  }: {
+    type?: 'neutral' | 'warning' | 'critical'
+  },
+) {
+  window.parent?.postMessage(
+    {
+      type: 'emitToast',
+      toastType: type,
+      title,
+      message,
+    },
+    '*',
+  )
+}

package/src/editor/graphql.ts

@@ -0,0 +1,167 @@
+import {
+  createApiRequest,
+  HttpMethodsWithAllowedBody,
+} from '@nordcraft/core/dist/api/api'
+import { ApiMethod, type ApiRequest } from '@nordcraft/core/dist/api/apiTypes'
+import type { FormulaContext } from '@nordcraft/core/dist/formula/formula'
+import { PROXY_URL_HEADER } from '@nordcraft/core/dist/utils/url'
+
+const INTROSPECTION_QUERY = `\
+query IntrospectionQuery {
+  __schema {
+    queryType { ...FullType }
+    mutationType { ...FullType }
+    subscriptionType { ...FullType }
+    types {
+      ...FullType
+    }
+    directives {
+      name
+      description
+      locations
+      args {
+        ...InputValue
+      }
+    }
+  }
+}
+fragment FullType on __Type {
+  kind
+  name
+  description
+  fields(includeDeprecated: true) {
+    name
+    description
+    args {
+      ...InputValue
+    }
+    type {
+      ...TypeRef
+    }
+    isDeprecated
+    deprecationReason
+  }
+  inputFields {
+    ...InputValue
+  }
+  interfaces {
+    ...TypeRef
+  }
+  enumValues(includeDeprecated: true) {
+    name
+    description
+    isDeprecated
+    deprecationReason
+  }
+  possibleTypes {
+    ...TypeRef
+  }
+}
+fragment InputValue on __InputValue {
+  name
+  description
+  type { ...TypeRef }
+  defaultValue
+}
+fragment TypeRef on __Type {
+  kind
+  name
+  ofType {
+    kind
+    name
+    ofType {
+      kind
+      name
+      ofType {
+        kind
+        name
+        ofType {
+          kind
+          name
+          ofType {
+            kind
+            name
+            ofType {
+              kind
+              name
+              ofType {
+                kind
+                name
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}`
+
+/**
+ * Run an introspection query for an existing API
+ * The introspection will usually be a POST request, but we use the method
+ * from the original API to support other methods.
+ */
+export const introspectApiRequest = async ({
+  api,
+  componentName,
+  formulaContext,
+}: {
+  api: ApiRequest
+  componentName: string
+  formulaContext: FormulaContext
+}) => {
+  const { url, requestSettings } = createApiRequest({
+    api: {
+      ...(api as ApiRequest),
+      // Default to a POST request if the method of the original API doesn't support a body
+      // The introspection query should never be initiated in that case though
+      method: HttpMethodsWithAllowedBody.includes(api.method ?? ApiMethod.POST)
+        ? api.method
+        : ApiMethod.POST,
+      // Overwrite the body with a default introspection query (in a value formula)
+      body: {
+        type: 'value',
+        value: { query: INTROSPECTION_QUERY },
+      },
+    },
+    baseUrl: window.origin,
+    defaultHeaders: undefined,
+    formulaContext,
+  })
+  // We must proxy to be able to include cookies
+  const proxyUrl = `/.toddle/omvej/components/${encodeURIComponent(
+    componentName,
+  )}/apis/${encodeURIComponent(componentName)}:${encodeURIComponent(api.name)}`
+  const headers = new Headers(requestSettings.headers)
+  headers.set(
+    PROXY_URL_HEADER,
+    decodeURIComponent(url.href.replace(/\+/g, ' ')),
+  )
+  requestSettings.headers = headers
+  const response = await fetch(proxyUrl, {
+    ...requestSettings,
+    // Set credentials to what was set on the original API
+    credentials:
+      api.client?.credentials &&
+      ['include', 'same-origin', 'omit'].includes(api.client.credentials)
+        ? api.client.credentials
+        : // Default to same-origin
+          undefined,
+  })
+  try {
+    const data = await response.json()
+    if (response.ok) {
+      return data
+    } else {
+      // eslint-disable-next-line no-console
+      console.error('Failed to introspect API:', api.name, data)
+      // Return a generic error message if introspection failed
+      return { error: data?.message ?? 'Failed to parse introspection result' }
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to parses API response:', api.name, e)
+    // Return a generic error message if introspection failed
+    return { error: `Failed to introspect API: ${api.name}` }
+  }
+}