@symbo.ls/scratch 2.34.27 → 2.34.30

package/dist/cjs/index.js

@@ -1710,6 +1710,46 @@ ${element}` : ""
       }
       return element;
     };
+    function getRootState(param) {
+      var _a, _b;
+      let state2 = null;
+      const hasRootState = (obj) => {
+        var _a2;
+        return obj.__element && ((_a2 = obj.root) == null ? void 0 : _a2.isRootState);
+      };
+      if (!this) {
+        state2 = window.platformState || ((_a = window.smblsApp) == null ? void 0 : _a.state);
+      } else if (hasRootState(this)) {
+        state2 = this.root;
+      } else if (this.__ref && this.__ref.path) {
+        const hasPlatformState = this.state && hasRootState(this.state);
+        const hasPlatformStateOnParent = this.call("isFunction", this.state) && this.parent.state && hasRootState(this.parent.state);
+        if (hasPlatformState || hasPlatformStateOnParent) {
+          state2 = this.state.root || this.parent.state.root;
+        }
+      }
+      if (!state2) {
+        state2 = window.platformState || ((_b = window.smblsApp) == null ? void 0 : _b.state);
+      }
+      return param ? state2[param] : state2;
+    }
+    function getRoot(key) {
+      var _a;
+      const rootElem = (_a = this.getRootState()) == null ? void 0 : _a.__element;
+      return rootElem && Object.keys(rootElem).length > 0 && key ? rootElem[key] : rootElem;
+    }
+    function getRootData(key) {
+      return this.getRoot("data") && Object.keys(this.getRoot("data")).length > 0 && key ? this.getRoot("data")[key] : this.getRoot("data");
+    }
+    function getRootContext(key) {
+      var _a;
+      const ctx = (_a = this.getRoot()) == null ? void 0 : _a.context;
+      return key ? ctx[key] : ctx;
+    }
+    function getContext(key) {
+      const ctx = this.context;
+      return key ? ctx[key] : ctx;
+    }
     var ROOT = {
       key: ":root",
       node: document22 ? document22.body : report("DocumentNotDefined", document22)
@@ -2000,6 +2040,11 @@ ${element}` : ""
       "getRef",
       "getChildren",
       "getPath",
+      "getRootState",
+      "getRoot",
+      "getRootData",
+      "getRootContext",
+      "getContext",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -3118,6 +3163,11 @@ ${element}` : ""
         lookdown,
         lookdownAll,
         getRef,
+        getRootState,
+        getRoot,
+        getRootData,
+        getRootContext,
+        getContext,
         getPath,
         setNodeStyles,
         spotByPath,
@@ -4048,6 +4098,7 @@ __export(index_exports, {
   hexToRgbArray: () => hexToRgbArray,
   hexToRgba: () => hexToRgba,
   hslToRgb: () => hslToRgb,
+  isGoogleFontsUrl: () => isGoogleFontsUrl,
   isScalingUnit: () => isScalingUnit,
   mixTwoColors: () => mixTwoColors,
   mixTwoRgb: () => mixTwoRgb,
@@ -4069,6 +4120,7 @@ __export(index_exports, {
   setEach: () => setEach,
   setFont: () => setFont,
   setFontFamily: () => setFontFamily,
+  setFontImport: () => setFontImport,
   setGradient: () => setGradient,
   setInCustomFontMedia: () => setInCustomFontMedia,
   setMediaTheme: () => setMediaTheme,
@@ -4129,6 +4181,7 @@ __export(utils_exports, {
   hexToRgbArray: () => hexToRgbArray,
   hexToRgba: () => hexToRgba,
   hslToRgb: () => hslToRgb,
+  isGoogleFontsUrl: () => isGoogleFontsUrl,
   isScalingUnit: () => isScalingUnit,
   mixTwoColors: () => mixTwoColors,
   mixTwoRgb: () => mixTwoRgb,
@@ -4141,6 +4194,7 @@ __export(utils_exports, {
   rgbToHex: () => rgbToHex,
   setCustomFont: () => setCustomFont,
   setCustomFontMedia: () => setCustomFontMedia,
+  setFontImport: () => setFontImport,
   setInCustomFontMedia: () => setInCustomFontMedia,
   setScalingVar: () => setScalingVar,
   setSubScalingVar: () => setSubScalingVar,
@@ -4534,15 +4588,26 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
 var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
-var setCustomFont = (name, url, weight) => `
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -4556,6 +4621,15 @@ var getFontFace = (LIBRARY) => {
   return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
 };
 var getFontFaceEachString = (name, weights) => {
+  if (weights && weights.isVariable) {
+    if (isGoogleFontsUrl(weights.url)) {
+      return setFontImport(weights.url);
+    }
+    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      fontStretch: weights.fontStretch,
+      fontDisplay: weights.fontDisplay || "swap"
+    });
+  }
   const isArr = weights[0];
   if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
   return setCustomFontMedia(name, weights.url);
@@ -5584,7 +5658,21 @@ var import_utils11 = __toESM(require_cjs(), 1);
 var setFont = (val, key) => {
   const CSSvar = `--font-${key}`;
   if (!val || isArray(val) && !val[0]) return;
-  const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
+  let fontFace;
+  if (val.isVariable) {
+    if (isGoogleFontsUrl(val.url)) {
+      fontFace = setFontImport(val.url);
+    } else {
+      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontStretch: val.fontStretch,
+        fontDisplay: val.fontDisplay || "swap"
+      });
+    }
+  } else if (val[0]) {
+    fontFace = getFontFaceEach(key, val);
+  } else {
+    fontFace = setCustomFontMedia(key, val.url);
+  }
   return { var: CSSvar, value: val, fontFace };
 };
 var getFontFamily = (key, factory) => {

package/dist/cjs/set.js

@@ -1710,6 +1710,46 @@ ${element}` : ""
       }
       return element;
     };
+    function getRootState(param) {
+      var _a, _b;
+      let state2 = null;
+      const hasRootState = (obj) => {
+        var _a2;
+        return obj.__element && ((_a2 = obj.root) == null ? void 0 : _a2.isRootState);
+      };
+      if (!this) {
+        state2 = window.platformState || ((_a = window.smblsApp) == null ? void 0 : _a.state);
+      } else if (hasRootState(this)) {
+        state2 = this.root;
+      } else if (this.__ref && this.__ref.path) {
+        const hasPlatformState = this.state && hasRootState(this.state);
+        const hasPlatformStateOnParent = this.call("isFunction", this.state) && this.parent.state && hasRootState(this.parent.state);
+        if (hasPlatformState || hasPlatformStateOnParent) {
+          state2 = this.state.root || this.parent.state.root;
+        }
+      }
+      if (!state2) {
+        state2 = window.platformState || ((_b = window.smblsApp) == null ? void 0 : _b.state);
+      }
+      return param ? state2[param] : state2;
+    }
+    function getRoot(key) {
+      var _a;
+      const rootElem = (_a = this.getRootState()) == null ? void 0 : _a.__element;
+      return rootElem && Object.keys(rootElem).length > 0 && key ? rootElem[key] : rootElem;
+    }
+    function getRootData(key) {
+      return this.getRoot("data") && Object.keys(this.getRoot("data")).length > 0 && key ? this.getRoot("data")[key] : this.getRoot("data");
+    }
+    function getRootContext(key) {
+      var _a;
+      const ctx = (_a = this.getRoot()) == null ? void 0 : _a.context;
+      return key ? ctx[key] : ctx;
+    }
+    function getContext(key) {
+      const ctx = this.context;
+      return key ? ctx[key] : ctx;
+    }
     var ROOT = {
       key: ":root",
       node: document22 ? document22.body : report("DocumentNotDefined", document22)
@@ -2000,6 +2040,11 @@ ${element}` : ""
       "getRef",
       "getChildren",
       "getPath",
+      "getRootState",
+      "getRoot",
+      "getRootData",
+      "getRootContext",
+      "getContext",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -3118,6 +3163,11 @@ ${element}` : ""
         lookdown,
         lookdownAll,
         getRef,
+        getRootState,
+        getRoot,
+        getRootData,
+        getRootContext,
+        getContext,
         getPath,
         setNodeStyles,
         spotByPath,
@@ -4506,14 +4556,25 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
-var setCustomFont = (name, url, weight) => `
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -5186,7 +5247,21 @@ var import_utils11 = __toESM(require_cjs(), 1);
 var setFont = (val, key) => {
   const CSSvar = `--font-${key}`;
   if (!val || isArray(val) && !val[0]) return;
-  const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
+  let fontFace;
+  if (val.isVariable) {
+    if (isGoogleFontsUrl(val.url)) {
+      fontFace = setFontImport(val.url);
+    } else {
+      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontStretch: val.fontStretch,
+        fontDisplay: val.fontDisplay || "swap"
+      });
+    }
+  } else if (val[0]) {
+    fontFace = getFontFaceEach(key, val);
+  } else {
+    fontFace = setCustomFontMedia(key, val.url);
+  }
   return { var: CSSvar, value: val, fontFace };
 };
 var setFontFamily = (val, key) => {

package/dist/cjs/system/color.js

@@ -1710,6 +1710,46 @@ ${element}` : ""
       }
       return element;
     };
+    function getRootState(param) {
+      var _a, _b;
+      let state2 = null;
+      const hasRootState = (obj) => {
+        var _a2;
+        return obj.__element && ((_a2 = obj.root) == null ? void 0 : _a2.isRootState);
+      };
+      if (!this) {
+        state2 = window.platformState || ((_a = window.smblsApp) == null ? void 0 : _a.state);
+      } else if (hasRootState(this)) {
+        state2 = this.root;
+      } else if (this.__ref && this.__ref.path) {
+        const hasPlatformState = this.state && hasRootState(this.state);
+        const hasPlatformStateOnParent = this.call("isFunction", this.state) && this.parent.state && hasRootState(this.parent.state);
+        if (hasPlatformState || hasPlatformStateOnParent) {
+          state2 = this.state.root || this.parent.state.root;
+        }
+      }
+      if (!state2) {
+        state2 = window.platformState || ((_b = window.smblsApp) == null ? void 0 : _b.state);
+      }
+      return param ? state2[param] : state2;
+    }
+    function getRoot(key) {
+      var _a;
+      const rootElem = (_a = this.getRootState()) == null ? void 0 : _a.__element;
+      return rootElem && Object.keys(rootElem).length > 0 && key ? rootElem[key] : rootElem;
+    }
+    function getRootData(key) {
+      return this.getRoot("data") && Object.keys(this.getRoot("data")).length > 0 && key ? this.getRoot("data")[key] : this.getRoot("data");
+    }
+    function getRootContext(key) {
+      var _a;
+      const ctx = (_a = this.getRoot()) == null ? void 0 : _a.context;
+      return key ? ctx[key] : ctx;
+    }
+    function getContext(key) {
+      const ctx = this.context;
+      return key ? ctx[key] : ctx;
+    }
     var ROOT = {
       key: ":root",
       node: document22 ? document22.body : report("DocumentNotDefined", document22)
@@ -2000,6 +2040,11 @@ ${element}` : ""
       "getRef",
       "getChildren",
       "getPath",
+      "getRootState",
+      "getRoot",
+      "getRootData",
+      "getRootContext",
+      "getContext",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -3118,6 +3163,11 @@ ${element}` : ""
         lookdown,
         lookdownAll,
         getRef,
+        getRootState,
+        getRoot,
+        getRootData,
+        getRootContext,
+        getContext,
         getPath,
         setNodeStyles,
         spotByPath,

package/dist/cjs/system/document.js

@@ -1710,6 +1710,46 @@ ${element}` : ""
       }
       return element;
     };
+    function getRootState(param) {
+      var _a, _b;
+      let state2 = null;
+      const hasRootState = (obj) => {
+        var _a2;
+        return obj.__element && ((_a2 = obj.root) == null ? void 0 : _a2.isRootState);
+      };
+      if (!this) {
+        state2 = window.platformState || ((_a = window.smblsApp) == null ? void 0 : _a.state);
+      } else if (hasRootState(this)) {
+        state2 = this.root;
+      } else if (this.__ref && this.__ref.path) {
+        const hasPlatformState = this.state && hasRootState(this.state);
+        const hasPlatformStateOnParent = this.call("isFunction", this.state) && this.parent.state && hasRootState(this.parent.state);
+        if (hasPlatformState || hasPlatformStateOnParent) {
+          state2 = this.state.root || this.parent.state.root;
+        }
+      }
+      if (!state2) {
+        state2 = window.platformState || ((_b = window.smblsApp) == null ? void 0 : _b.state);
+      }
+      return param ? state2[param] : state2;
+    }
+    function getRoot(key) {
+      var _a;
+      const rootElem = (_a = this.getRootState()) == null ? void 0 : _a.__element;
+      return rootElem && Object.keys(rootElem).length > 0 && key ? rootElem[key] : rootElem;
+    }
+    function getRootData(key) {
+      return this.getRoot("data") && Object.keys(this.getRoot("data")).length > 0 && key ? this.getRoot("data")[key] : this.getRoot("data");
+    }
+    function getRootContext(key) {
+      var _a;
+      const ctx = (_a = this.getRoot()) == null ? void 0 : _a.context;
+      return key ? ctx[key] : ctx;
+    }
+    function getContext(key) {
+      const ctx = this.context;
+      return key ? ctx[key] : ctx;
+    }
     var ROOT = {
       key: ":root",
       node: document22 ? document22.body : report("DocumentNotDefined", document22)
@@ -2000,6 +2040,11 @@ ${element}` : ""
       "getRef",
       "getChildren",
       "getPath",
+      "getRootState",
+      "getRoot",
+      "getRootData",
+      "getRootContext",
+      "getContext",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -3118,6 +3163,11 @@ ${element}` : ""
         lookdown,
         lookdownAll,
         getRef,
+        getRootState,
+        getRoot,
+        getRootData,
+        getRootContext,
+        getContext,
         getPath,
         setNodeStyles,
         spotByPath,

package/dist/cjs/system/font.js

@@ -1710,6 +1710,46 @@ ${element}` : ""
       }
       return element;
     };
+    function getRootState(param) {
+      var _a, _b;
+      let state2 = null;
+      const hasRootState = (obj) => {
+        var _a2;
+        return obj.__element && ((_a2 = obj.root) == null ? void 0 : _a2.isRootState);
+      };
+      if (!this) {
+        state2 = window.platformState || ((_a = window.smblsApp) == null ? void 0 : _a.state);
+      } else if (hasRootState(this)) {
+        state2 = this.root;
+      } else if (this.__ref && this.__ref.path) {
+        const hasPlatformState = this.state && hasRootState(this.state);
+        const hasPlatformStateOnParent = this.call("isFunction", this.state) && this.parent.state && hasRootState(this.parent.state);
+        if (hasPlatformState || hasPlatformStateOnParent) {
+          state2 = this.state.root || this.parent.state.root;
+        }
+      }
+      if (!state2) {
+        state2 = window.platformState || ((_b = window.smblsApp) == null ? void 0 : _b.state);
+      }
+      return param ? state2[param] : state2;
+    }
+    function getRoot(key) {
+      var _a;
+      const rootElem = (_a = this.getRootState()) == null ? void 0 : _a.__element;
+      return rootElem && Object.keys(rootElem).length > 0 && key ? rootElem[key] : rootElem;
+    }
+    function getRootData(key) {
+      return this.getRoot("data") && Object.keys(this.getRoot("data")).length > 0 && key ? this.getRoot("data")[key] : this.getRoot("data");
+    }
+    function getRootContext(key) {
+      var _a;
+      const ctx = (_a = this.getRoot()) == null ? void 0 : _a.context;
+      return key ? ctx[key] : ctx;
+    }
+    function getContext(key) {
+      const ctx = this.context;
+      return key ? ctx[key] : ctx;
+    }
     var ROOT = {
       key: ":root",
       node: document22 ? document22.body : report("DocumentNotDefined", document22)
@@ -2000,6 +2040,11 @@ ${element}` : ""
       "getRef",
       "getChildren",
       "getPath",
+      "getRootState",
+      "getRoot",
+      "getRootData",
+      "getRootContext",
+      "getContext",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -3118,6 +3163,11 @@ ${element}` : ""
         lookdown,
         lookdownAll,
         getRef,
+        getRootState,
+        getRoot,
+        getRootData,
+        getRootContext,
+        getContext,
         getPath,
         setNodeStyles,
         spotByPath,
@@ -4321,14 +4371,25 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
-var setCustomFont = (name, url, weight) => `
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -4348,7 +4409,21 @@ var isDev = isNotProduction();
 var setFont = (val, key) => {
   const CSSvar = `--font-${key}`;
   if (!val || isArray(val) && !val[0]) return;
-  const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
+  let fontFace;
+  if (val.isVariable) {
+    if (isGoogleFontsUrl(val.url)) {
+      fontFace = setFontImport(val.url);
+    } else {
+      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontStretch: val.fontStretch,
+        fontDisplay: val.fontDisplay || "swap"
+      });
+    }
+  } else if (val[0]) {
+    fontFace = getFontFaceEach(key, val);
+  } else {
+    fontFace = setCustomFontMedia(key, val.url);
+  }
   return { var: CSSvar, value: val, fontFace };
 };
 var getFontFamily = (key, factory) => {