@symbo.ls/scratch 3.8.8 → 3.14.0

package/dist/iife/index.js

@@ -21,19 +21,21 @@ var SmblsScratch = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-  // ../utils/dist/esm/globals.js
+  // ../utils/globals.js
   var window2, document2;
   var init_globals = __esm({
-    "../utils/dist/esm/globals.js"() {
+    "../utils/globals.js"() {
+      "use strict";
       window2 = globalThis;
       document2 = window2.document;
     }
   });
 
-  // ../utils/dist/esm/node.js
+  // ../utils/node.js
   var isDOMNode;
   var init_node = __esm({
-    "../utils/dist/esm/node.js"() {
+    "../utils/node.js"() {
+      "use strict";
       init_globals();
       isDOMNode = (obj) => {
         return typeof window2 !== "undefined" && (window2.Node && obj instanceof window2.Node || window2.Window && obj instanceof window2.Window || obj === window2 || obj === document);
@@ -41,10 +43,11 @@ var SmblsScratch = (() => {
     }
   });
 
-  // ../utils/dist/esm/types.js
+  // ../utils/types.js
   var isObject, isString, isNumber, isFunction, isArray, isObjectLike, isDefined;
   var init_types = __esm({
-    "../utils/dist/esm/types.js"() {
+    "../utils/types.js"() {
+      "use strict";
       isObject = (arg) => {
         if (arg === null) return false;
         return typeof arg === "object" && arg.constructor === Object;
@@ -61,10 +64,11 @@ var SmblsScratch = (() => {
     }
   });
 
-  // ../utils/dist/esm/array.js
+  // ../utils/array.js
   var unstackArrayOfObjects;
   var init_array = __esm({
-    "../utils/dist/esm/array.js"() {
+    "../utils/array.js"() {
+      "use strict";
       init_object();
       unstackArrayOfObjects = (arr, exclude = []) => {
         return arr.reduce(
@@ -75,16 +79,18 @@ var SmblsScratch = (() => {
     }
   });
 
-  // ../utils/dist/esm/string.js
+  // ../utils/string.js
   var init_string = __esm({
-    "../utils/dist/esm/string.js"() {
+    "../utils/string.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/keys.js
+  // ../utils/keys.js
   var STATE_METHODS, PROPS_METHODS, METHODS, METHODS_EXL;
   var init_keys = __esm({
-    "../utils/dist/esm/keys.js"() {
+    "../utils/keys.js"() {
+      "use strict";
       STATE_METHODS = /* @__PURE__ */ new Set([
         "update",
         "parse",
@@ -154,7 +160,9 @@ var SmblsScratch = (() => {
         "getContext",
         "getQuery",
         "getDB",
-        "getChildren"
+        "getChildren",
+        "preventContentUpdate",
+        "preventContentRecreate"
       ]);
       METHODS_EXL = /* @__PURE__ */ new Set([
         "node",
@@ -169,10 +177,11 @@ var SmblsScratch = (() => {
     }
   });
 
-  // ../utils/dist/esm/object.js
-  var _startsWithDunder, exec, merge, deepMerge, deepClone, overwriteDeep;
+  // ../utils/object.js
+  var _startsWithDunder, exec, merge, deepMerge, _deepMerge, deepClone, overwriteDeep;
   var init_object = __esm({
-    "../utils/dist/esm/object.js"() {
+    "../utils/object.js"() {
+      "use strict";
       init_globals();
       init_types();
       init_array();
@@ -183,20 +192,12 @@ var SmblsScratch = (() => {
         if (isFunction(param)) {
           if (!element) return;
           if (typeof param.call !== "function") return param;
-          const result = param.call(
+          return param.call(
             element,
             element,
             state || element.state,
             context || element.context
           );
-          if (result && typeof result.then === "function") {
-            let resolved;
-            result.then((value) => {
-              resolved = value;
-            });
-            return resolved;
-          }
-          return result;
         }
         if (param != null && element?.context?.plugins && (isArray(param) || isObject(param) && !isDOMNode(param))) {
           const plugins = element.context.plugins;
@@ -224,6 +225,15 @@ var SmblsScratch = (() => {
         return element;
       };
       deepMerge = (element, extend, excludeFrom = METHODS_EXL) => {
+        return _deepMerge(element, extend, excludeFrom, null);
+      };
+      _deepMerge = (element, extend, excludeFrom, ancestors) => {
+        if (element === extend) return element;
+        if (ancestors) {
+          for (let i = 0; i < ancestors.length; i += 2) {
+            if (ancestors[i] === element && ancestors[i + 1] === extend) return element;
+          }
+        }
         const useSet = excludeFrom instanceof Set;
         for (const e in extend) {
           if (!Object.prototype.hasOwnProperty.call(extend, e)) continue;
@@ -232,7 +242,10 @@ var SmblsScratch = (() => {
           const elementProp = element[e];
           const extendProp = extend[e];
           if (isObjectLike(elementProp) && isObjectLike(extendProp)) {
-            deepMerge(elementProp, extendProp, excludeFrom);
+            const stack = ancestors || [];
+            stack.push(element, extend);
+            _deepMerge(elementProp, extendProp, excludeFrom, stack);
+            stack.length -= 2;
           } else if (elementProp === void 0) {
             element[e] = extendProp;
           }
@@ -256,8 +269,8 @@ var SmblsScratch = (() => {
           return visited.get(obj);
         }
         const isArr = isArray(obj);
-        const clone2 = isArr ? [] : {};
-        visited.set(obj, clone2);
+        const clone = isArr ? [] : {};
+        visited.set(obj, clone);
         const excludeSet = exclude instanceof Set ? exclude : exclude.length > 3 ? new Set(exclude) : null;
         for (const key in obj) {
           if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
@@ -267,27 +280,27 @@ var SmblsScratch = (() => {
           if (cleanUndefined && value === void 0) continue;
           if (cleanNull && value === null) continue;
           if (isDOMNode(value)) {
-            clone2[key] = value;
+            clone[key] = value;
             continue;
           }
           if (handleExtends && key === "extends" && isArray(value)) {
-            clone2[key] = unstackArrayOfObjects(value, exclude);
+            clone[key] = unstackArrayOfObjects(value, exclude);
             continue;
           }
-          if (isFunction(value) && options.window) {
-            clone2[key] = contentWindow.eval("(" + value.toString() + ")");
+          if (isFunction(value)) {
+            clone[key] = value;
             continue;
           }
           if (isObjectLike(value)) {
-            clone2[key] = deepClone(value, {
+            clone[key] = deepClone(value, {
               ...options,
               visited
             });
           } else {
-            clone2[key] = value;
+            clone[key] = value;
           }
         }
-        return clone2;
+        return clone;
       };
       overwriteDeep = (obj, params, opts = {}, visited = /* @__PURE__ */ new WeakMap()) => {
         if (!isObjectLike(obj) || !isObjectLike(params) || isDOMNode(obj) || isDOMNode(params)) {
@@ -300,7 +313,8 @@ var SmblsScratch = (() => {
         const forcedExclude = !opts.preventForce;
         for (const e in params) {
           if (!Object.prototype.hasOwnProperty.call(params, e)) continue;
-          if (exclSet && exclSet.has(e) || forcedExclude && _startsWithDunder(e)) continue;
+          if (exclSet && exclSet.has(e) || forcedExclude && _startsWithDunder(e))
+            continue;
           const objProp = obj[e];
           const paramsProp = params[e];
           if (isDOMNode(paramsProp)) {
@@ -316,117 +330,240 @@ var SmblsScratch = (() => {
     }
   });
 
-  // ../utils/dist/esm/key.js
+  // ../utils/key.js
   var init_key = __esm({
-    "../utils/dist/esm/key.js"() {
+    "../utils/key.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/env.js
+  // ../utils/env.js
   var NODE_ENV, isProduction, isNotProduction;
   var init_env = __esm({
-    "../utils/dist/esm/env.js"() {
+    "../utils/env.js"() {
+      "use strict";
       NODE_ENV = process.env.NODE_ENV;
       isProduction = (env = NODE_ENV) => env === "production";
       isNotProduction = (env = NODE_ENV) => !isProduction(env);
     }
   });
 
-  // ../utils/dist/esm/function.js
+  // ../utils/function.js
   var init_function = __esm({
-    "../utils/dist/esm/function.js"() {
+    "../utils/function.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/if.js
+  // ../utils/if.js
   var init_if = __esm({
-    "../utils/dist/esm/if.js"() {
+    "../utils/if.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/log.js
+  // ../utils/log.js
   var init_log = __esm({
-    "../utils/dist/esm/log.js"() {
+    "../utils/log.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/cookie.js
+  // ../utils/cookie.js
   var isMobile;
   var init_cookie = __esm({
-    "../utils/dist/esm/cookie.js"() {
+    "../utils/cookie.js"() {
+      "use strict";
       isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
     }
   });
 
-  // ../utils/dist/esm/tags.js
+  // ../utils/tags.js
   var init_tags = __esm({
-    "../utils/dist/esm/tags.js"() {
+    "../utils/tags.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/extends.js
+  // ../utils/extends.js
   var init_extends = __esm({
-    "../utils/dist/esm/extends.js"() {
+    "../utils/extends.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/component.js
+  // ../utils/component.js
   var init_component = __esm({
-    "../utils/dist/esm/component.js"() {
+    "../utils/component.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/props.js
+  // ../utils/props.js
   var init_props = __esm({
-    "../utils/dist/esm/props.js"() {
+    "../utils/props.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/element.js
+  // ../utils/element.js
   var init_element = __esm({
-    "../utils/dist/esm/element.js"() {
+    "../utils/element.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/state.js
+  // ../utils/state.js
   var init_state = __esm({
-    "../utils/dist/esm/state.js"() {
+    "../utils/state.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/scope.js
+  // ../utils/scope.js
   var init_scope = __esm({
-    "../utils/dist/esm/scope.js"() {
+    "../utils/scope.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/triggerEvent.js
+  // ../utils/triggerEvent.js
   var init_triggerEvent = __esm({
-    "../utils/dist/esm/triggerEvent.js"() {
+    "../utils/triggerEvent.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/cache.js
+  // ../utils/cache.js
   var init_cache = __esm({
-    "../utils/dist/esm/cache.js"() {
+    "../utils/cache.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/methods.js
+  // ../utils/methods.js
   var init_methods = __esm({
-    "../utils/dist/esm/methods.js"() {
+    "../utils/methods.js"() {
+      "use strict";
     }
   });
 
-  // ../utils/dist/esm/update.js
+  // ../utils/update.js
   var init_update = __esm({
-    "../utils/dist/esm/update.js"() {
+    "../utils/update.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/projectKeys.js
+  var init_projectKeys = __esm({
+    "../utils/projectKeys.js"() {
+    }
+  });
+
+  // ../utils/browser.js
+  var init_browser = __esm({
+    "../utils/browser.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/cdn.js
+  var init_cdn = __esm({
+    "../utils/cdn.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/date.js
+  var init_date = __esm({
+    "../utils/date.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/detectHeight.js
+  var init_detectHeight = __esm({
+    "../utils/detectHeight.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/fibonacci.js
+  var init_fibonacci = __esm({
+    "../utils/fibonacci.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/files.js
+  var init_files = __esm({
+    "../utils/files.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/load.js
+  var init_load = __esm({
+    "../utils/load.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/metadata.js
+  var init_metadata = __esm({
+    "../utils/metadata.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/scaling.js
+  var init_scaling = __esm({
+    "../utils/scaling.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/sharedLibraries.js
+  var init_sharedLibraries = __esm({
+    "../utils/sharedLibraries.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/string-extra.js
+  var toCamelCase, toDashCase, arrayzeValue;
+  var init_string_extra = __esm({
+    "../utils/string-extra.js"() {
+      "use strict";
+      init_types();
+      toCamelCase = (str) => {
+        if (typeof str !== "string") str = String(str || "");
+        return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
+          return index === 0 ? word.toLowerCase() : word.toUpperCase();
+        }).replace(/\s+/g, "");
+      };
+      toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+      arrayzeValue = (val) => {
+        if (isArray(val)) return val;
+        if (isString(val)) return val.split(" ");
+        if (isObject(val)) return Object.values(val);
+        if (isNumber(val)) return [val];
+      };
     }
   });
 
-  // ../utils/dist/esm/index.js
-  var init_esm = __esm({
-    "../utils/dist/esm/index.js"() {
+  // ../utils/style.js
+  var init_style = __esm({
+    "../utils/style.js"() {
+      "use strict";
+    }
+  });
+
+  // ../utils/index.js
+  var init_utils = __esm({
+    "../utils/index.js"() {
+      "use strict";
       init_key();
       init_env();
       init_types();
@@ -451,18 +588,28 @@ var SmblsScratch = (() => {
       init_cache();
       init_update();
       init_triggerEvent();
+      init_projectKeys();
+      init_browser();
+      init_cdn();
+      init_date();
+      init_detectHeight();
+      init_fibonacci();
+      init_files();
+      init_load();
+      init_metadata();
+      init_scaling();
+      init_sharedLibraries();
+      init_string_extra();
+      init_style();
     }
   });
 
   // src/index.js
   var index_exports = {};
   __export(index_exports, {
-    CLASS: () => CLASS,
     CONFIG: () => CONFIG,
-    CSS_MEDIA_VARS: () => CSS_MEDIA_VARS,
     CSS_NATIVE_COLOR_REGEX: () => CSS_NATIVE_COLOR_REGEX,
     CSS_UNITS: () => CSS_UNITS,
-    CSS_VARS: () => CSS_VARS,
     FACTORY: () => FACTORY,
     VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
     activateConfig: () => activateConfig,
@@ -482,17 +629,21 @@ var SmblsScratch = (() => {
     changeGlobalTheme: () => changeGlobalTheme,
     changeLightness: () => changeLightness,
     checkIfBoxSize: () => checkIfBoxSize,
+    class: () => defaultProps5,
     color: () => color,
     colorStringToRgbaArray: () => colorStringToRgbaArray,
     convertSvgToSymbol: () => convertSvgToSymbol,
+    createConfig: () => createConfig,
+    cssMediaVars: () => cssMediaVars,
+    cssVars: () => cssVars,
     devices: () => devices,
     document: () => document3,
     findHeadingLetter: () => findHeadingLetter,
     findHeadings: () => findHeadings,
     font: () => font,
-    font_face: () => font_face,
-    font_family: () => font_family,
-    font_family_types: () => font_family_types,
+    fontFace: () => fontFace,
+    fontFamily: () => fontFamily,
+    fontFamilyTypes: () => fontFamilyTypes,
     generateSequence: () => generateSequence,
     generateSequencePosition: () => generateSequencePosition,
     generateSprite: () => generateSprite,
@@ -541,6 +692,8 @@ var SmblsScratch = (() => {
     numToLetterMap: () => numToLetterMap,
     opacify: () => opacify,
     parseColorToken: () => parseColorToken,
+    popConfig: () => popConfig,
+    pushConfig: () => pushConfig,
     reset: () => reset,
     resolveColorsInGradient: () => resolveColorsInGradient,
     resolveFileUrl: () => resolveFileUrl,
@@ -549,9 +702,10 @@ var SmblsScratch = (() => {
     rgbToHSL: () => rgbToHSL,
     rgbToHex: () => rgbToHex,
     runThroughMedia: () => runThroughMedia,
+    scratchDefaultConfig: () => defaultConfig_exports,
     scratchSystem: () => system_exports,
     scratchUtils: () => utils_exports,
-    semantic_icons: () => semantic_icons,
+    semanticIcons: () => semanticIcons,
     sequence: () => sequence,
     set: () => set,
     setActiveConfig: () => setActiveConfig,
@@ -579,10 +733,11 @@ var SmblsScratch = (() => {
     splitTopLevelCommas: () => splitTopLevelCommas,
     splitTransition: () => splitTransition,
     svg: () => svg,
-    svg_data: () => svg_data,
+    svgData: () => svgData,
     templates: () => templates,
     theme: () => theme,
     timing: () => timing,
+    toCamel: () => toCamel,
     transformBackgroundImage: () => transformBackgroundImage,
     transformBorder: () => transformBorder,
     transformBorderRadius: () => transformBorderRadius,
@@ -717,7 +872,7 @@ var SmblsScratch = (() => {
   ];
 
   // src/utils/color.js
-  init_esm();
+  init_utils();
   var colorStringToRgbaArray = (color2) => {
     if (color2 === "") return [0, 0, 0, 0];
     if (color2.toLowerCase() === "transparent") return [0, 0, 0, 0];
@@ -909,6 +1064,7 @@ var SmblsScratch = (() => {
     return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
   };
   var getFontFormat = (url) => {
+    if (typeof url !== "string" || !url) return null;
     const ext = url.split(/[#?]/)[0].split(".").pop().trim();
     if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
     return null;
@@ -917,7 +1073,8 @@ var SmblsScratch = (() => {
   var setFontImport = (url) => `@import url('${url}');`;
   var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
   var setCustomFont = (name, url, weight, options = {}) => {
-    const urls = Array.isArray(url) ? url : [url];
+    const rawUrls = Array.isArray(url) ? url : [url];
+    const urls = rawUrls.filter((u) => typeof u === "string" && u);
     const srcList = urls.map((u) => {
       const format = getFontFormat(u);
       const formatStr = format ? ` format('${format}')` : "";
@@ -971,51 +1128,36 @@ var SmblsScratch = (() => {
   };
 
   // src/utils/sequence.js
-  init_esm();
-
-  // ../smbls-utils/dist/esm/index.js
-  init_esm();
-  var toCamelCase = (str) => {
-    if (typeof str !== "string") str = String(str || "");
-    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
-      return index === 0 ? word.toLowerCase() : word.toUpperCase();
-    }).replace(/\s+/g, "");
-  };
-  var toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-  var arrayzeValue = (val) => {
-    if (isArray(val)) return val;
-    if (isString(val)) return val.split(" ");
-    if (isObject(val)) return Object.values(val);
-    if (isNumber(val)) return [val];
-  };
+  init_utils();
+  init_utils();
 
   // src/factory.js
-  init_esm();
+  init_utils();
 
   // src/defaultConfig/index.js
   var defaultConfig_exports = {};
   __export(defaultConfig_exports, {
-    CLASS: () => CLASS,
     animation: () => animation,
     breakpoints: () => breakpoints,
+    class: () => defaultProps5,
     color: () => color,
     devices: () => devices,
     document: () => document3,
     font: () => font,
-    font_face: () => font_face,
-    font_family: () => font_family,
-    font_family_types: () => font_family_types,
+    fontFace: () => fontFace,
+    fontFamily: () => fontFamily,
+    fontFamilyTypes: () => fontFamilyTypes,
     gradient: () => gradient,
     grid: () => grid,
     icons: () => icons,
     media: () => media,
     reset: () => reset,
-    semantic_icons: () => semantic_icons,
+    semanticIcons: () => semanticIcons,
     sequence: () => sequence,
     shadow: () => shadow,
     spacing: () => spacing,
     svg: () => svg,
-    svg_data: () => svg_data,
+    svgData: () => svgData,
     templates: () => templates,
     theme: () => theme,
     timing: () => timing,
@@ -1080,13 +1222,13 @@ var SmblsScratch = (() => {
   var font = {};
 
   // src/defaultConfig/font-family.js
-  var font_family = {};
-  var font_family_types = {
+  var fontFamily = {};
+  var fontFamilyTypes = {
     "sans-serif": "Helvetica, Arial, sans-serif, --system-default",
     serif: "Times New Roman, Georgia, serif, --system-default",
     monospace: "Courier New, monospace, --system-default"
   };
-  var font_face = {};
+  var fontFace = {};
 
   // src/defaultConfig/media.js
   var media = {
@@ -1123,7 +1265,7 @@ var SmblsScratch = (() => {
 
   // src/defaultConfig/icons.js
   var icons = {};
-  var semantic_icons = {};
+  var semanticIcons = {};
 
   // src/defaultConfig/timing.js
   var defaultProps3 = {
@@ -1176,7 +1318,7 @@ var SmblsScratch = (() => {
 
   // src/defaultConfig/svg.js
   var svg = {};
-  var svg_data = {};
+  var svgData = {};
 
   // src/defaultConfig/templates.js
   var templates = {};
@@ -1187,35 +1329,34 @@ var SmblsScratch = (() => {
 
   // src/defaultConfig/class.js
   var defaultProps5 = {};
-  var CLASS = defaultProps5;
 
   // src/defaultConfig/index.js
   var reset = {};
   var vars = {};
 
   // src/factory.js
-  var CSS_VARS = {};
-  var CSS_MEDIA_VARS = {};
+  var cssVars = {};
+  var cssMediaVars = {};
   var _CONF = defaultConfig_exports;
   var _confLower = {};
   var toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
-  var toUpper = (s) => s.replace(/([A-Z])/g, "_$1").toUpperCase();
   for (const key in _CONF) {
     const lower = key.toLowerCase();
     _confLower[lower] = _CONF[key];
     const camel = toCamel(lower);
     if (camel !== lower) _confLower[camel] = _CONF[key];
     if (lower !== key) _confLower[key] = _CONF[key];
-    const upper = toUpper(key);
-    if (upper !== key) _confLower[upper] = _CONF[key];
   }
   var CONFIG = {
     verbose: false,
     useVariable: true,
     useReset: true,
     globalTheme: "auto",
-    CSS_VARS,
-    CSS_MEDIA_VARS,
+    cssVars,
+    cssMediaVars,
+    CSS_VARS: cssVars,
+    CSS_MEDIA_VARS: cssMediaVars,
+    _scratchConfig: true,
     ..._confLower
   };
   var cachedConfig = deepClone(CONFIG);
@@ -1229,7 +1370,15 @@ var SmblsScratch = (() => {
     }
     return FACTORY[def || FACTORY.active];
   };
+  var configStack = [];
+  var pushConfig = (config) => {
+    if (config && config._scratchConfig) configStack.push(config);
+  };
+  var popConfig = () => {
+    configStack.pop();
+  };
   var getActiveConfig = (def) => {
+    if (configStack.length) return configStack[configStack.length - 1];
     return FACTORY[def || FACTORY.active] || CONFIG;
   };
   var setActiveConfig = (newConfig) => {
@@ -1238,6 +1387,54 @@ var SmblsScratch = (() => {
     FACTORY["1"] = deepMerge(newConfig, deepClone(cachedConfig));
     return newConfig;
   };
+  var APP_FLAGS = [
+    "useReset",
+    "useVariable",
+    "useFontImport",
+    "useIconSprite",
+    "useSvgSprite",
+    "useDocumentTheme",
+    "useDefaultIcons",
+    "useDefaultConfig",
+    "verbose",
+    "globalTheme"
+  ];
+  var ALIAS_GROUPS = [
+    ["fontfamily", "fontFamily", "font_family"],
+    ["fontfamilytypes", "fontFamilyTypes"],
+    ["semanticicons", "semanticIcons"],
+    ["svgdata", "svgData"]
+  ];
+  var aliasCaseVariants = (cfg) => {
+    for (const vs of ALIAS_GROUPS) {
+      let merged;
+      for (const v of vs) {
+        const val = cfg[v];
+        if (!isObject(val)) continue;
+        merged = merged ? deepMerge(val, merged) : val;
+      }
+      if (!merged) continue;
+      for (const v of vs) if (isObject(cfg[v])) cfg[v] = merged;
+    }
+  };
+  var createConfig = (name, overrides, { cleanBase = false } = {}) => {
+    const activeBase = cleanBase ? null : getActiveConfig();
+    const base = deepClone(
+      !cleanBase && activeBase && activeBase._scratchConfig ? activeBase : cachedConfig
+    );
+    for (const flag of APP_FLAGS) {
+      delete base[flag];
+    }
+    const cfg = deepMerge(overrides || {}, base);
+    cfg.cssVars = {};
+    cfg.cssMediaVars = {};
+    cfg.CSS_VARS = cfg.cssVars;
+    cfg.CSS_MEDIA_VARS = cfg.cssMediaVars;
+    cfg._scratchConfig = true;
+    aliasCaseVariants(cfg);
+    if (name) FACTORY[name] = cfg;
+    return cfg;
+  };
 
   // src/utils/sequence.js
   var numToLetterMap = {
@@ -1280,7 +1477,8 @@ var SmblsScratch = (() => {
       variable
     };
     sequenceProps.scales[key] = scaling;
-    sequenceProps.vars[variable] = scaling + sequenceProps.unit;
+    const varUnit = VIEWPORT_UNITS.has(sequenceProps.unit) ? "rem" : sequenceProps.unit;
+    sequenceProps.vars[variable] = scaling + varUnit;
   };
   var getFnPrefixAndValue = (val) => {
     if (!val.includes("(")) return val;
@@ -1288,11 +1486,14 @@ var SmblsScratch = (() => {
     const value = val.slice(val.indexOf("(") + 1, val.lastIndexOf(")"));
     return [prefix, value];
   };
+  var VIEWPORT_UNITS = /* @__PURE__ */ new Set(["vw", "vh", "vmin", "vmax", "svw", "svh", "lvw", "lvh", "dvw", "dvh"]);
   var setScalingVar = (key, sequenceProps) => {
-    const { base, type, unit: unit2 } = sequenceProps;
+    const { base, type, unit: rawUnit } = sequenceProps;
+    const unit2 = VIEWPORT_UNITS.has(rawUnit) ? "rem" : rawUnit;
     const defaultVal = (isScalingUnit(unit2) ? 1 : base) + unit2;
     if (key === 0) return defaultVal;
-    const prefix = "--" + (type && type.replace(".", "-"));
+    const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+    const prefix = "--" + vp + (type && type.replace(".", "-"));
     const ratioVar = `${prefix}-ratio`;
     if (key > 0) {
       const prevLetterKey = numToLetterMap[key - 1];
@@ -1300,6 +1501,12 @@ var SmblsScratch = (() => {
     }
     if (key < 0) {
       const nextLetterKey = numToLetterMap[key + 1];
+      const absKey = Math.abs(key);
+      const phiPow = Math.pow(PHI, 2 * absKey);
+      const prevAscKey = numToLetterMap[absKey];
+      if (prevAscKey) {
+        return `max(calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar})), calc(var(${prefix}-${prevAscKey}) / ${phiPow.toFixed(4)}))`;
+      }
       return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`;
     }
   };
@@ -1307,7 +1514,8 @@ var SmblsScratch = (() => {
     const { type } = sequenceProps;
     const skipMiddle = index === 2 && arr.length === 2;
     const indexMapWithLength = skipMiddle ? index + 1 : index;
-    const prefix = "--" + (type && type.replace(".", "-"));
+    const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+    const prefix = "--" + vp + (type && type.replace(".", "-"));
     const subRatioVarPrefix = `${prefix}-sub-ratio-`;
     return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`;
   };
@@ -1351,13 +1559,19 @@ var SmblsScratch = (() => {
       setSequenceValue(props2, sequenceProps);
     });
   };
+  var PHI = 1.618;
   var switchSequenceOnNegative = (key, base, ratio) => {
-    return base * Math.pow(ratio, key);
+    if (key >= 0) return base * Math.pow(ratio, key);
+    const absKey = Math.abs(key);
+    const current = base * Math.pow(ratio, key);
+    const normalized = base * Math.pow(ratio, absKey) / Math.pow(PHI, 2 * absKey);
+    return Math.max(current, normalized);
   };
   var generateSequence = (sequenceProps) => {
     const { type, base, ratio, range, subSequence } = sequenceProps;
     const n = Math.abs(range[0]) + Math.abs(range[1]);
-    const prefix = "--" + (type && type.replace(".", "-")) + "-";
+    const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+    const prefix = "--" + vp + (type && type.replace(".", "-")) + "-";
     for (let i = 0; i <= n; i++) {
       const key = range[1] - i;
       const letterKey = numToLetterMap[key];
@@ -1398,7 +1612,8 @@ var SmblsScratch = (() => {
     };
     const value = base * Math.pow(ratio, index);
     const scaling = ~~(value / base * 100) / 100;
-    const prefix = "--" + (type && type.replace(".", "-")) + "-";
+    const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+    const prefix = "--" + vp + (type && type.replace(".", "-")) + "-";
     const variable = prefix + letterKey;
     const scalingVariable = setScalingVar(index, sequenceProps);
     const props = {
@@ -1439,7 +1654,8 @@ var SmblsScratch = (() => {
       "revert-layer"
     ];
     if (skipArr.includes(value)) return value;
-    const prefix = `--${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
+    const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+    const prefix = `--${vp}${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
     const letterVal = value.toUpperCase();
     const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
     let absValue = isNegative ? letterVal.slice(1) : letterVal;
@@ -1486,12 +1702,12 @@ var SmblsScratch = (() => {
       (v) => value.includes(v + " ")
     );
     if (!mathArr.length) return value;
-    return mathArr.map((symbol) => {
-      const valuesArr = value.split(symbol + " ").map((v) => v.trim());
-      const transformedValues = valuesArr.map((v) => {
-        return getSequenceValue(v, sequenceProps);
-      });
-      return transformedValues.join(" " + symbol + " ");
+    const symbolRegex = /(\s*[+\-*/,]\s*)/;
+    const tokens = value.split(symbolRegex);
+    return tokens.map((token) => {
+      const trimmed = token.trim();
+      if (!trimmed || ["+", "-", "*", "/", ","].includes(trimmed)) return token;
+      return getSequenceValue(trimmed, sequenceProps);
     }).join("");
   };
   var getSequenceValuePropertyPair = (value, propertyName, sequenceProps, fnPrefix) => {
@@ -1524,13 +1740,13 @@ var SmblsScratch = (() => {
   };
 
   // src/utils/var.js
-  init_esm();
+  init_utils();
   var setVariables = (result, key) => {
     const CONFIG2 = getActiveConfig();
-    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+    const { cssVars: CSS_VARS } = CONFIG2;
     if (isObjectLike(result.value)) {
     } else {
-      CSS_VARS2[result.var] = result.value;
+      CSS_VARS[result.var] = result.value;
     }
   };
   var applySequenceGlobalVars = (vars2, obj, options) => {
@@ -1538,7 +1754,8 @@ var SmblsScratch = (() => {
     const { unit: UNIT } = CONFIG2;
     const unit2 = obj.unit || UNIT.default;
     const { base, ratio, type } = obj;
-    const prefix = "--" + (type && type.replace(".", "-"));
+    const vp = obj.varPrefix ? obj.varPrefix + "-" : "";
+    const prefix = "--" + vp + (type && type.replace(".", "-"));
     vars2[`${prefix}-base`] = base;
     vars2[`${prefix}-unit`] = unit2;
     const ratioVar = `${prefix}-ratio`;
@@ -1548,65 +1765,78 @@ var SmblsScratch = (() => {
     vars2[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
     vars2[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
   };
+  var VIEWPORT_UNITS2 = /* @__PURE__ */ new Set(["vw", "vh", "vmin", "vmax", "svw", "svh", "lvw", "lvh", "dvw", "dvh"]);
   var applySequenceVars = (FACTORY2, options = {}) => {
     const CONFIG2 = getActiveConfig();
-    const { unit: UNIT, timing: TIMING, CSS_VARS: CSS_VARS2 } = CONFIG2;
-    const unit2 = FACTORY2.unit || UNIT.default;
+    const { unit: UNIT, timing: TIMING, cssVars: CSS_VARS } = CONFIG2;
+    const rawUnit = FACTORY2.unit || UNIT.default;
+    const unit2 = VIEWPORT_UNITS2.has(rawUnit) ? "rem" : rawUnit;
     const { mediaRegenerate, sequence: sequence2, scales } = FACTORY2;
     if (!mediaRegenerate) {
-      applySequenceGlobalVars(CSS_VARS2, FACTORY2, options);
+      applySequenceGlobalVars(CSS_VARS, FACTORY2, options);
     }
     for (const key in sequence2) {
       const item = sequence2[key];
       const value = (FACTORY2.type === TIMING.type ? sequence2[key].val : scales[key]) + unit2;
       if (!mediaRegenerate) {
-        CSS_VARS2[item.variable + "_default"] = value;
-        CSS_VARS2[item.variable] = item.scalingVariable;
+        CSS_VARS[item.variable + "_default"] = value;
+        CSS_VARS[item.variable] = item.scalingVariable;
         continue;
       }
       if (options.useDefault === false) {
-        CSS_VARS2[item.variable] = value;
+        CSS_VARS[item.variable] = value;
       } else {
-        CSS_VARS2[item.variable + "_default"] = value;
-        CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
+        CSS_VARS[item.variable + "_default"] = value;
+        CSS_VARS[item.variable] = `var(${item.variable + "_default"})`;
       }
     }
   };
   var applyMediaSequenceVars = (FACTORY2, media2, options = {}) => {
     const CONFIG2 = getActiveConfig();
-    const { unit: UNIT, media: MEDIA, CSS_VARS: CSS_VARS2 } = CONFIG2;
+    const { unit: UNIT, media: MEDIA, cssVars: CSS_VARS } = CONFIG2;
     const mediaName = media2.slice(1);
-    const unit2 = FACTORY2.unit || UNIT.default;
+    const mediaConfig = FACTORY2[media2];
+    const rawMediaUnit = mediaConfig.unit || FACTORY2.unit || UNIT.default;
+    const unit2 = VIEWPORT_UNITS2.has(rawMediaUnit) ? "rem" : rawMediaUnit;
     const { mediaRegenerate } = FACTORY2;
-    const { sequence: sequence2, scales } = FACTORY2[media2];
+    const { sequence: sequence2, scales } = mediaConfig;
     const query = MEDIA[mediaName];
     if (!query && CONFIG2.verbose) console.warn("Can't find media query ", query);
     if (!mediaRegenerate) {
-      let underMediaQuery = CSS_VARS2[`@media ${query}`];
-      if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
-      applySequenceGlobalVars(underMediaQuery, FACTORY2[media2], options);
+      let underMediaQuery = CSS_VARS[`@media ${query}`];
+      if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {};
+      applySequenceGlobalVars(underMediaQuery, mediaConfig, options);
+      const parentUnit = FACTORY2.unit || UNIT.default;
+      if (unit2 !== parentUnit && sequence2) {
+        for (const key in sequence2) {
+          const item = sequence2[key];
+          const value = scales[key] + unit2;
+          underMediaQuery[item.variable + "_default"] = value;
+          underMediaQuery[item.variable] = value;
+        }
+      }
       return;
     }
     for (const key in sequence2) {
       const item = sequence2[key];
       const value = (isScalingUnit(unit2) ? scales[key] : sequence2[key].val) + unit2;
       if (!query && CONFIG2.verbose) console.warn("Can't find query ", query);
-      let underMediaQuery = CSS_VARS2[`@media ${query}`];
-      if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+      let underMediaQuery = CSS_VARS[`@media ${query}`];
+      if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {};
       underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
-      CSS_VARS2[item.variable + "_" + mediaName] = value;
+      CSS_VARS[item.variable + "_" + mediaName] = value;
     }
   };
 
   // src/utils/sprite.js
-  init_esm();
+  init_utils();
   var isDev = isNotProduction();
   var generateSprite = (icons2) => {
     const CONFIG2 = getActiveConfig();
     let sprite = "";
     for (const key in icons2) {
-      if (CONFIG2.__svg_cache[key]) continue;
-      else CONFIG2.__svg_cache[key] = true;
+      if (CONFIG2.__svgCache[key]) continue;
+      else CONFIG2.__svgCache[key] = true;
       sprite += icons2[key];
     }
     return sprite;
@@ -1657,8 +1887,15 @@ var SmblsScratch = (() => {
     symbol = symbol.replace(/width="[^"]*"/, "");
     symbol = symbol.replace(/height="[^"]*"/, "");
     symbol = symbol.replace("</svg", "</symbol");
+    symbol = expandSvgSelfClosing(symbol);
     return symbol;
   };
+  var SVG_VOID_TAGS = "line|circle|ellipse|rect|polyline|polygon|path|stop|use|image";
+  var SVG_SELF_CLOSING_RE = new RegExp(
+    `<(${SVG_VOID_TAGS})\\b([^>]*?)\\s*/>`,
+    "g"
+  );
+  var expandSvgSelfClosing = (str) => str.replace(SVG_SELF_CLOSING_RE, "<$1$2></$1>");
 
   // src/system/index.js
   var system_exports = {};
@@ -1697,7 +1934,7 @@ var SmblsScratch = (() => {
   });
 
   // src/system/color.js
-  init_esm();
+  init_utils();
   var getColor = (value, key, config) => {
     const CONFIG2 = config || getActiveConfig();
     if (!isString(value)) {
@@ -1769,11 +2006,14 @@ var SmblsScratch = (() => {
     const isObj = isObject(val);
     if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
     else if (isObj) {
+      if (CONFIG2.useVariable && val.var) return `var(${val.var})`;
       if (globalTheme) return getColor(value, `@${globalTheme}`, config);
       else {
         const obj = {};
         for (const mediaName in val) {
+          if (mediaName.charCodeAt(0) !== 64) continue;
           const query = CONFIG2.media[mediaName.slice(1)];
+          if (!query) continue;
           const media2 = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
           obj[media2] = getColor(value, mediaName, config);
         }
@@ -1791,7 +2031,11 @@ var SmblsScratch = (() => {
       val = getColor(rawRef);
       if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
         const parts = rawRef.split(" ");
-        const refColor = CONFIG2.color[parts[0]];
+        let refColor = CONFIG2.color[parts[0]];
+        if (refColor && !refColor.value && !refColor.rgb && (isString(refColor) || isArray(refColor) || isObject(refColor))) {
+          CONFIG2.color[parts[0]] = setColor(refColor, parts[0]);
+          refColor = CONFIG2.color[parts[0]];
+        }
         if (refColor && refColor.value) {
           let rgb2 = refColor.rgb;
           const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
@@ -1822,10 +2066,7 @@ var SmblsScratch = (() => {
       }
     }
     if (isArray(val)) {
-      return {
-        "@light": setColor(val[0], key, "light"),
-        "@dark": setColor(val[1], key, "dark")
-      };
+      val = { "@light": val[0], "@dark": val[1] };
     }
     if (isObject(val)) {
       const obj = {};
@@ -1836,16 +2077,71 @@ var SmblsScratch = (() => {
           variant.slice(0, 1) === "@" ? variant.slice(1) : variant
         );
       }
+      if (CONFIG2.useVariable) {
+        const vp2 = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
+        const adaptiveVar = `--${vp2}color-${key}`;
+        let fallbackValue;
+        const schemeValues = {};
+        for (const variant in obj) {
+          if (variant.charCodeAt(0) !== 64) continue;
+          const scheme = variant.slice(1);
+          const entry = obj[variant];
+          const value2 = entry && (entry.value || entry);
+          if (!value2 || typeof value2 !== "string") continue;
+          schemeValues[scheme] = value2;
+          if (scheme === "light" || fallbackValue === void 0) fallbackValue = value2;
+        }
+        if (fallbackValue !== void 0) {
+          CONFIG2.cssVars[adaptiveVar] = fallbackValue;
+          if (!CONFIG2.cssMediaVars) CONFIG2.cssMediaVars = {};
+          for (const scheme in schemeValues) {
+            const sel = `[data-theme="${scheme}"]`;
+            if (!CONFIG2.cssMediaVars[sel]) CONFIG2.cssMediaVars[sel] = {};
+            CONFIG2.cssMediaVars[sel][adaptiveVar] = schemeValues[scheme];
+            if (scheme === "light" || scheme === "dark") {
+              const mq = `@media (prefers-color-scheme: ${scheme})`;
+              if (!CONFIG2.cssMediaVars[mq]) CONFIG2.cssMediaVars[mq] = {};
+              CONFIG2.cssMediaVars[mq][adaptiveVar] = schemeValues[scheme];
+            }
+          }
+          obj.var = adaptiveVar;
+        }
+      }
       return obj;
     }
-    const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
-    const colorArr = colorStringToRgbaArray(val.value || val);
+    const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
+    const CSSVar = `--${vp}color-${key}` + (suffix ? `-${suffix}` : "");
+    let resolvedVal = val.value || val;
+    if (isString(resolvedVal) && resolvedVal.includes(".") && !resolvedVal.includes("(")) {
+      const [colorRef, alphaStr] = resolvedVal.split(".");
+      const refColor = CONFIG2.color[colorRef];
+      if (refColor && refColor.rgb) {
+        resolvedVal = `rgba(${refColor.rgb}, ${parseFloat("0." + alphaStr) || 1})`;
+      }
+    }
+    if (isString(resolvedVal) && !resolvedVal.includes("(") && !resolvedVal.startsWith("#")) {
+      const parsed = parseColorToken(resolvedVal);
+      if (parsed && parsed.name && !parsed.passthrough && !parsed.cssVar) {
+        const refColor = CONFIG2.color[parsed.name];
+        if (refColor && !refColor.value && !refColor.rgb && (isString(refColor) || isArray(refColor) || isObject(refColor))) {
+          CONFIG2.color[parsed.name] = setColor(refColor, parsed.name);
+        }
+        const baseColor = CONFIG2.color[parsed.name];
+        if (baseColor && baseColor.rgb) {
+          let rgb2 = baseColor.rgb;
+          if (parsed.tone) rgb2 = getRgbTone(rgb2, parsed.tone);
+          const alphaVal = parsed.alpha ? parseFloat(parsed.alpha) : 1;
+          resolvedVal = `rgba(${rgb2}, ${alphaVal})`;
+        }
+      }
+    }
+    const colorArr = colorStringToRgbaArray(resolvedVal);
     const [r, g, b, a = 1] = colorArr;
     const alpha = parseFloat(a.toFixed(2));
     const rgb = `${r}, ${g}, ${b}`;
     const value = `rgba(${rgb}, ${alpha})`;
     if (CONFIG2.useVariable) {
-      CONFIG2.CSS_VARS[CSSVar] = value;
+      CONFIG2.cssVars[CSSVar] = value;
     }
     return {
       var: CSSVar,
@@ -1868,9 +2164,10 @@ var SmblsScratch = (() => {
       for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
       return obj;
     }
-    const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
+    const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
+    const CSSVar = `--${vp}gradient-${key}` + (suffix ? `-${suffix}` : "");
     if (CONFIG2.useVariable) {
-      CONFIG2.CSS_VARS[CSSVar] = val.value || val;
+      CONFIG2.cssVars[CSSVar] = val.value || val;
     }
     return {
       var: CSSVar,
@@ -1879,7 +2176,7 @@ var SmblsScratch = (() => {
   };
 
   // src/system/theme.js
-  init_esm();
+  init_utils();
   var CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
     "black",
     "white",
@@ -2037,6 +2334,13 @@ var SmblsScratch = (() => {
     "yellowgreen",
     "rebeccapurple"
   ]);
+  var COLOR_PARAM_TOKENS = ["color", "Color", "background", "Background", "fill", "Fill", "stroke", "Stroke"];
+  var isColorParam = (param) => {
+    for (let i = 0; i < COLOR_PARAM_TOKENS.length; i++) {
+      if (param.includes(COLOR_PARAM_TOKENS[i])) return true;
+    }
+    return false;
+  };
   var setThemeValue = (theme2) => {
     const value = {};
     const { state, media: media2, helpers, ...rest } = theme2;
@@ -2138,16 +2442,17 @@ var SmblsScratch = (() => {
     if (CONFIG2.useVariable) return setMediaTheme(val, key);
     const { state, media: media2, helpers } = val;
     const value = setThemeValue(val, key);
-    const CSSvar = `--theme-${key}`;
+    const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
+    const CSSvar = `--${vp}theme-${key}`;
     setSelectors(val, value);
     setMedia(val, value);
     setHelpers(val, value);
     return { var: CSSvar, value, state, media: media2, helpers };
   };
   var generateAutoVars = (schemes, varPrefix, CONFIG2) => {
-    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
-    if (!CONFIG2.CSS_MEDIA_VARS) CONFIG2.CSS_MEDIA_VARS = {};
-    const MEDIA_VARS = CONFIG2.CSS_MEDIA_VARS;
+    const { cssVars: CSS_VARS } = CONFIG2;
+    if (!CONFIG2.cssMediaVars) CONFIG2.cssMediaVars = {};
+    const MEDIA_VARS = CONFIG2.cssMediaVars;
     const globalTheme = CONFIG2.globalTheme !== void 0 ? CONFIG2.globalTheme : "auto";
     const result = {};
     const allKeys = /* @__PURE__ */ new Set();
@@ -2155,19 +2460,18 @@ var SmblsScratch = (() => {
       if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
     }
     const brokenSchemes = /* @__PURE__ */ new Set();
-    if (globalTheme === "auto") {
-      for (const param of allKeys) {
-        const symb = param.slice(0, 1);
-        if (symb === "@" || symb === "." || symb === ":") continue;
-        for (const scheme in schemes) {
-          if (brokenSchemes.has(scheme)) continue;
-          const val = schemes[scheme]?.[param];
-          if (val === void 0) continue;
-          const color2 = getColor(val, `@${scheme}`);
-          if (color2 === void 0) continue;
-          if (isString(color2) && /^[a-z][a-zA-Z]+$/.test(color2) && !CSS_NAMED_COLORS.has(color2)) {
-            brokenSchemes.add(scheme);
-          }
+    for (const param of allKeys) {
+      const symb = param.slice(0, 1);
+      if (symb === "@" || symb === "." || symb === ":") continue;
+      if (!isColorParam(param)) continue;
+      for (const scheme in schemes) {
+        if (brokenSchemes.has(scheme)) continue;
+        const val = schemes[scheme]?.[param];
+        if (val === void 0) continue;
+        const color2 = getColor(val, `@${scheme}`);
+        if (color2 === void 0) continue;
+        if (isString(color2) && /^[a-z][a-zA-Z]+$/.test(color2) && !CSS_NAMED_COLORS.has(color2)) {
+          brokenSchemes.add(scheme);
         }
       }
     }
@@ -2189,38 +2493,31 @@ var SmblsScratch = (() => {
         }
         result[param] = generateAutoVars(subSchemes, `${varPrefix}-${pseudoName}`, CONFIG2);
       } else if (symb !== "@" && symb !== "." && symb !== ":") {
-        const autoVar = `--theme-${varPrefix}-${param}`;
-        if (globalTheme === "auto") {
-          let fallbackColor;
-          for (const scheme in schemes) {
-            if (brokenSchemes.has(scheme)) continue;
-            const val = schemes[scheme]?.[param];
-            if (val === void 0) continue;
-            const color2 = getColor(val, `@${scheme}`);
-            if (color2 === void 0) continue;
-            if (scheme === "light" || fallbackColor === void 0) {
-              fallbackColor = color2;
-            }
-            const selector = `[data-theme="${scheme}"]`;
-            if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
-            MEDIA_VARS[selector][autoVar] = color2;
-            if (scheme === "dark" || scheme === "light") {
-              const mq = `@media (prefers-color-scheme: ${scheme})`;
-              if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {};
-              MEDIA_VARS[mq][autoVar] = color2;
-            }
-          }
-          if (fallbackColor !== void 0) {
-            CSS_VARS2[autoVar] = fallbackColor;
+        const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
+        const autoVar = `--${vp}theme-${varPrefix}-${param}`;
+        const forced = globalTheme && globalTheme !== "auto" ? String(globalTheme).replace(/^'|'$/g, "") : null;
+        let fallbackColor;
+        for (const scheme in schemes) {
+          if (brokenSchemes.has(scheme)) continue;
+          const val = schemes[scheme]?.[param];
+          if (val === void 0) continue;
+          const color2 = getColor(val, `@${scheme}`);
+          if (color2 === void 0) continue;
+          if (forced && scheme === forced || !forced && (scheme === "light" || fallbackColor === void 0)) {
+            fallbackColor = color2;
           }
-        } else {
-          const forced = String(globalTheme).replace(/^'|'$/g, "");
-          const source = schemes[forced]?.[param];
-          if (source !== void 0) {
-            const color2 = getColor(source, `@${forced}`);
-            if (color2 !== void 0) CSS_VARS2[autoVar] = color2;
+          const selector = `[data-theme="${scheme}"]`;
+          if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
+          MEDIA_VARS[selector][autoVar] = color2;
+          if (scheme === "dark" || scheme === "light") {
+            const mq = `@media (prefers-color-scheme: ${scheme})`;
+            if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {};
+            MEDIA_VARS[mq][autoVar] = color2;
           }
         }
+        if (fallbackColor !== void 0) {
+          CSS_VARS[autoVar] = fallbackColor;
+        }
         result[param] = `var(${autoVar})`;
         result[`.${param}`] = { [param]: result[param] };
       }
@@ -2235,7 +2532,7 @@ var SmblsScratch = (() => {
   };
   var setMediaTheme = (val, key, suffix, prefers) => {
     const CONFIG2 = getActiveConfig();
-    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+    const { cssVars: CSS_VARS } = CONFIG2;
     const theme2 = { value: val };
     const isTopLevel = !suffix && !prefers;
     if (isObjectLike(val)) {
@@ -2261,9 +2558,10 @@ var SmblsScratch = (() => {
           const color2 = getColor(value, prefers);
           const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
           const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
-          const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
+          const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
+          const CSSVar = `--${vp}theme-${key}${varmetaSuffixName}-${param}`;
           if (CONFIG2.useVariable) {
-            if (CONFIG2.useThemeSuffixedVars) CSS_VARS2[CSSVar] = color2;
+            if (CONFIG2.useThemeSuffixedVars) CSS_VARS[CSSVar] = color2;
             theme2[param] = `var(${CSSVar})`;
           } else {
             theme2[param] = color2;
@@ -2336,42 +2634,43 @@ var SmblsScratch = (() => {
   };
 
   // src/system/font.js
-  init_esm();
+  init_utils();
+  init_utils();
   var setFont = (val, key) => {
     const CONFIG2 = getActiveConfig();
     const CSSvar = `--font-${key}`;
     if (!val || isArray(val) && !val[0]) return;
-    let fontFace;
+    let fontFace2;
     if (val.isVariable) {
       const url = resolveFileUrl(val.url, CONFIG2.files) || val.url;
       if (isGoogleFontsUrl(url)) {
-        fontFace = setFontImport(url);
+        fontFace2 = setFontImport(url);
       } else {
-        fontFace = setCustomFontMedia(key, url, val.fontWeight, {
+        fontFace2 = setCustomFontMedia(key, url, val.fontWeight, {
           fontStretch: val.fontStretch,
           fontDisplay: val.fontDisplay || "swap"
         });
       }
     } else if (val[0]) {
-      fontFace = getFontFaceEach(key, val, CONFIG2.files);
+      fontFace2 = getFontFaceEach(key, val, CONFIG2.files);
     } else {
       const url = Array.isArray(val.url) ? val.url.map((u) => resolveFileUrl(u, CONFIG2.files) || u) : resolveFileUrl(val.url, CONFIG2.files) || val.url;
-      fontFace = setCustomFontMedia(key, url, val.fontWeight, {
+      fontFace2 = setCustomFontMedia(key, url, val.fontWeight, {
         fontStyle: val.fontStyle,
         fontDisplay: val.fontDisplay,
         fontStretch: val.fontStretch
       });
     }
-    return { var: CSSvar, value: val, fontFace };
+    return { var: CSSvar, value: val, fontFace: fontFace2 };
   };
   var getFontFamily = (key, factory) => {
     const CONFIG2 = getActiveConfig();
-    const { font_family: FONT_FAMILY } = CONFIG2;
+    const { fontFamily: FONT_FAMILY } = CONFIG2;
     return getDefaultOrFirstKey(factory || FONT_FAMILY, key);
   };
   var setFontFamily = (val, key) => {
     const CONFIG2 = getActiveConfig();
-    const { font_family: FONT_FAMILY, font_family_types: FONT_FAMILY_TYPES } = CONFIG2;
+    const { fontFamily: FONT_FAMILY, fontFamilyTypes: FONT_FAMILY_TYPES } = CONFIG2;
     let { value, type } = val;
     if (val.isDefault) FONT_FAMILY.default = key;
     if (isObject(value)) value = arrayzeValue(value);
@@ -2381,7 +2680,7 @@ var SmblsScratch = (() => {
   };
 
   // src/system/typography.js
-  init_esm();
+  init_utils();
   var runThroughMedia = (FACTORY2) => {
     const CONFIG2 = getActiveConfig();
     const { typography: TYPOGRAPHY, media: MEDIA } = CONFIG2;
@@ -2401,12 +2700,21 @@ var SmblsScratch = (() => {
         h1Matches,
         unit: unit2
       });
+      const VIEWPORT_UNITS3 = /* @__PURE__ */ new Set(["vw", "vh", "vmin", "vmax", "svw", "svh", "lvw", "lvh", "dvw", "dvh"]);
+      const inheritedUnit = mediaValue.unit || unit2;
+      const mediaUnit = !mediaValue.unit && VIEWPORT_UNITS3.has(unit2) ? "rem" : inheritedUnit;
       const query = MEDIA[mediaName];
       const media2 = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
       TYPOGRAPHY.templates[media2] = {
-        fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit2
+        fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + mediaUnit
       };
       if (!mediaRegenerate) {
+        merge(mediaValue, {
+          sequence: {},
+          scales: {},
+          vars: {}
+        });
+        generateSequence(mediaValue);
         applyMediaSequenceVars(FACTORY2, prop);
         continue;
       }
@@ -2454,7 +2762,8 @@ var SmblsScratch = (() => {
   };
 
   // src/system/spacing.js
-  init_esm();
+  init_utils();
+  init_utils();
   var runThroughMedia2 = (FACTORY2) => {
     for (const prop in FACTORY2) {
       const mediaProps = FACTORY2[prop];
@@ -2560,7 +2869,7 @@ var SmblsScratch = (() => {
   };
 
   // src/system/shadow.js
-  init_esm();
+  init_utils();
   var setShadow = (value, key, suffix, prefers) => {
     const CONFIG2 = getActiveConfig();
     if (isArray(value)) {
@@ -2597,9 +2906,10 @@ var SmblsScratch = (() => {
         }).join(" ");
       }).join(", ");
     }
-    const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : "");
+    const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
+    const CSSVar = `--${vp}shadow-${key}` + (suffix ? `-${suffix}` : "");
     if (CONFIG2.useVariable) {
-      CONFIG2.CSS_VARS[CSSVar] = value;
+      CONFIG2.cssVars[CSSVar] = value;
     }
     return {
       var: CSSVar,
@@ -2641,6 +2951,7 @@ var SmblsScratch = (() => {
   };
 
   // src/system/timing.js
+  init_utils();
   var applyTimingSequence = () => {
     const CONFIG2 = getActiveConfig();
     const { timing: TIMING } = CONFIG2;
@@ -2663,10 +2974,10 @@ var SmblsScratch = (() => {
   };
 
   // src/system/document.js
-  init_esm();
+  init_utils();
   var applyDocument = () => {
     const CONFIG2 = getActiveConfig();
-    const { document: DOCUMENT, font_family: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG2;
+    const { document: DOCUMENT, fontFamily: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG2;
     return merge(DOCUMENT, {
       theme: THEME.document,
       fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
@@ -2676,7 +2987,7 @@ var SmblsScratch = (() => {
   };
 
   // src/system/svg.js
-  init_esm();
+  init_utils();
   var DEF_OPTIONS = {
     document: document2
   };
@@ -2694,12 +3005,12 @@ var SmblsScratch = (() => {
   var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
     const CONFIG2 = getActiveConfig();
     const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.svg;
-    for (const key in LIBRARY) lib[key] = CONFIG2.svg[key];
+    for (const key in LIBRARY) lib[key] = LIBRARY[key];
     appendSVG(lib, options);
   };
   var setSvgIcon = (val, key) => {
     const CONFIG2 = getActiveConfig();
-    if (CONFIG2.useIconSprite && !CONFIG2.semantic_icons?.[key]) {
+    if (CONFIG2.useIconSprite && !CONFIG2.semanticIcons?.[key]) {
       return setSVG(val, key);
     }
     return val;
@@ -2707,7 +3018,7 @@ var SmblsScratch = (() => {
   var appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
     const CONFIG2 = getActiveConfig();
     const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.icons;
-    for (const key in LIBRARY) lib[key] = CONFIG2.icons[key];
+    for (const key in LIBRARY) lib[key] = LIBRARY[key];
     appendSVG(lib, options);
   };
   var createSVGSpriteElement = (doc, options = { isRoot: true }) => {
@@ -2722,6 +3033,24 @@ var SmblsScratch = (() => {
     }
     return svgElem;
   };
+  var parseSVGSprite = (doc, svgString) => {
+    const DOMParserCtor = typeof DOMParser !== "undefined" ? DOMParser : null;
+    if (DOMParserCtor) {
+      const wrapped = `<svg xmlns="http://www.w3.org/2000/svg">${svgString}</svg>`;
+      const parser = new DOMParserCtor();
+      const parsed = parser.parseFromString(wrapped, "image/svg+xml");
+      if (parsed.querySelector("parsererror")) return null;
+      return parsed.documentElement;
+    }
+    return null;
+  };
+  var moveChildren = (doc, from, to) => {
+    while (from.firstChild) {
+      const child = from.firstChild;
+      to.appendChild(doc.importNode(child, true));
+      child.remove();
+    }
+  };
   var appendSVG = (lib, options = DEF_OPTIONS) => {
     const CONFIG2 = getActiveConfig();
     const doc = options.document || document2;
@@ -2734,8 +3063,11 @@ var SmblsScratch = (() => {
     const exists = doc.querySelector("#svgSprite");
     const SVGsprite = generateSprite(lib);
     const spriteHtml = `<svg aria-hidden="true" width="0" height="0" style="position:absolute" id="svgSprite">${SVGsprite}</svg>`;
+    const parsed = parseSVGSprite(doc, SVGsprite);
     if (exists) {
-      if (doc.body.insertAdjacentHTML) {
+      if (parsed) {
+        moveChildren(doc, parsed, exists);
+      } else if (doc.body.insertAdjacentHTML) {
         exists.insertAdjacentHTML("beforeend", SVGsprite);
       } else {
         const tempSVG = createSVGSpriteElement(doc, { isRoot: false });
@@ -2743,7 +3075,13 @@ var SmblsScratch = (() => {
         exists.append(...tempSVG.children);
       }
     } else {
-      if (doc.body.insertAdjacentHTML) {
+      if (parsed) {
+        const svgSpriteDOM = createSVGSpriteElement(doc);
+        if (svgSpriteDOM && svgSpriteDOM.nodeType) {
+          moveChildren(doc, parsed, svgSpriteDOM);
+          doc.body.prepend(svgSpriteDOM);
+        }
+      } else if (doc.body.insertAdjacentHTML) {
         doc.body.insertAdjacentHTML("afterbegin", spriteHtml);
       } else {
         const svgSpriteDOM = createSVGSpriteElement(doc);
@@ -2756,7 +3094,7 @@ var SmblsScratch = (() => {
   };
 
   // src/system/reset.js
-  init_esm();
+  init_utils();
   var applyReset = (reset2 = {}) => {
     const CONFIG2 = getActiveConfig();
     const { reset: RESET, typography: TYPOGRAPHY, document: DOCUMENT } = CONFIG2;
@@ -2778,10 +3116,28 @@ var SmblsScratch = (() => {
       const { body, ...templates2 } = TYPOGRAPHY.templates;
       const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document") : {};
       if (RESET.html) overwriteDeep(RESET.html, globalTheme);
+      if (TYPOGRAPHY.unit) {
+        const { media: MEDIA } = CONFIG2;
+        for (const key in TYPOGRAPHY) {
+          if (key.charAt(0) !== "@") continue;
+          const mediaTypo = TYPOGRAPHY[key];
+          if (!mediaTypo) continue;
+          if (mediaTypo.unit === TYPOGRAPHY.unit || !mediaTypo.unit) continue;
+          const mediaUnit = mediaTypo.unit;
+          const mediaBase = mediaTypo.base || TYPOGRAPHY.base;
+          const mediaBrowserDefault = mediaTypo.browserDefault || TYPOGRAPHY.browserDefault;
+          const mediaName = key.slice(1);
+          const query = MEDIA[mediaName];
+          if (!query) continue;
+          const mediaKey = "@media " + (query === "print" ? query : "screen and " + query);
+          if (!RESET[mediaKey]) RESET[mediaKey] = {};
+          if (!RESET[mediaKey].html) RESET[mediaKey].html = {};
+          RESET[mediaKey].html.fontSize = mediaBase / mediaBrowserDefault + mediaUnit;
+        }
+      }
       return deepMerge(merge(RESET, reset2), {
         html: {
           position: "absolute",
-          // overflow: 'hidden',
           width: "100%",
           height: "100%",
           top: "0",
@@ -2790,7 +3146,7 @@ var SmblsScratch = (() => {
           WebkitFontSmoothing: "subpixel-antialiased",
           scrollBehavior: "smooth",
           ...globalTheme,
-          fontSize: TYPOGRAPHY.browserDefault + "px",
+          fontSize: TYPOGRAPHY.unit ? TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + TYPOGRAPHY.unit : TYPOGRAPHY.browserDefault + "px",
           fontFamily: DOCUMENT.fontFamily,
           lineHeight: DOCUMENT.lineHeight
         },
@@ -2806,21 +3162,30 @@ var SmblsScratch = (() => {
         a: {
           color: "currentColor"
         },
-        // form elements
+        button: {
+          color: "inherit",
+          font: "inherit",
+          background: "transparent",
+          border: "none",
+          cursor: "pointer",
+          appearance: "none",
+          WebkitAppearance: "none"
+        },
+        "input, select, textarea": {
+          color: "inherit",
+          font: "inherit"
+        },
         fieldset: {
           border: 0,
           padding: 0,
           margin: 0
-        },
-        "select, input": {
-          fontFamily: DOCUMENT.fontFamily
         }
       });
     }
   };
 
   // src/transforms/index.js
-  init_esm();
+  init_utils();
   var BORDER_STYLES = /* @__PURE__ */ new Set([
     "none",
     "hidden",
@@ -3003,12 +3368,12 @@ var SmblsScratch = (() => {
   };
 
   // src/set.js
-  init_esm();
+  init_utils();
   var setVars = (val, key) => {
     const CONFIG2 = getActiveConfig();
-    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+    const { cssVars: cssVars2 } = CONFIG2;
     const varName = key.startsWith("--") ? key : `--${key}`;
-    CSS_VARS2[varName] = val;
+    cssVars2[varName] = val;
     return val;
   };
   var asIs = (val) => val;
@@ -3016,14 +3381,14 @@ var SmblsScratch = (() => {
     color: setColor,
     gradient: setGradient,
     font: setFont,
-    font_family: setFontFamily,
+    fontFamily: setFontFamily,
     fontfamily: setFontFamily,
     theme: setTheme,
     icons: setSvgIcon,
-    semantic_icons: asIs,
+    semanticIcons: asIs,
     semanticicons: asIs,
     svg: setSVG,
-    svg_data: asIs,
+    svgData: asIs,
     typography: asIs,
     shadow: setShadow,
     spacing: asIs,
@@ -3038,12 +3403,14 @@ var SmblsScratch = (() => {
   };
   var setValue = (factoryName, value, key) => {
     const CONFIG2 = getActiveConfig();
-    const lowerName = factoryName.toLowerCase();
-    const FACTORY2 = CONFIG2[lowerName] || CONFIG2[factoryName];
-    if (VALUE_TRANSFORMERS[lowerName]) {
+    const camelName = toCamel(factoryName);
+    const lowerName = camelName.toLowerCase();
+    const FACTORY2 = CONFIG2[camelName] || CONFIG2[lowerName] || CONFIG2[factoryName];
+    const transformer = VALUE_TRANSFORMERS[camelName] || VALUE_TRANSFORMERS[lowerName];
+    if (transformer) {
       try {
-        const result = VALUE_TRANSFORMERS[lowerName](value, key);
-        FACTORY2[key] = result;
+        const result = transformer(value, key);
+        if (FACTORY2) FACTORY2[key] = result;
         return FACTORY2;
       } catch (error) {
         if (CONFIG2.verbose)
@@ -3056,7 +3423,11 @@ var SmblsScratch = (() => {
   var setEach = (factoryName, props) => {
     const CONFIG2 = getActiveConfig();
     const lowerName = factoryName.toLowerCase();
-    const keys = Object.keys(props);
+    const keys = Object.keys(props).sort((a, b) => {
+      const aComposite = isObject(props[a]) || isArray(props[a]) ? 1 : 0;
+      const bComposite = isObject(props[b]) || isArray(props[b]) ? 1 : 0;
+      return aComposite - bComposite;
+    });
     keys.forEach((key) => {
       try {
         return setValue(lowerName, props[key], key);
@@ -3074,33 +3445,59 @@ var SmblsScratch = (() => {
     });
     return CONFIG2[lowerName] || CONFIG2[factoryName];
   };
-  var changeGlobalTheme = (newTheme) => {
-    const CONFIG2 = getActiveConfig();
+  var changeGlobalTheme = (newTheme, targetConfig) => {
+    const CONFIG2 = targetConfig || getActiveConfig();
     CONFIG2.globalTheme = newTheme;
-    if (typeof document !== "undefined" && newTheme && newTheme !== "auto") {
-      document.documentElement.setAttribute("data-theme", newTheme);
-    }
-    for (const key in CONFIG2.CSS_VARS) {
-      if (key.startsWith("--theme-")) delete CONFIG2.CSS_VARS[key];
+    const configDoc = CONFIG2.document && CONFIG2.document.documentElement ? CONFIG2.document : null;
+    const targetDoc = configDoc || (typeof document !== "undefined" ? document : null);
+    const targetWin = targetDoc && targetDoc.defaultView || (typeof window !== "undefined" ? window : null);
+    if (targetDoc) {
+      const root = CONFIG2.themeRoot || targetDoc.documentElement;
+      const forced = newTheme && newTheme !== "auto";
+      if (forced) {
+        root.setAttribute("data-theme", newTheme);
+        if (newTheme === "dark" || newTheme === "light") {
+          root.style.colorScheme = newTheme;
+        } else {
+          root.style.colorScheme = "light dark";
+        }
+      } else if (targetWin && targetWin.matchMedia) {
+        const apply = (mq2) => {
+          root.setAttribute("data-theme", mq2.matches ? "dark" : "light");
+        };
+        const mq = targetWin.matchMedia("(prefers-color-scheme: dark)");
+        apply(mq);
+        root.style.colorScheme = "light dark";
+        if (!CONFIG2.__prefersListener) {
+          CONFIG2.__prefersListener = apply;
+          try {
+            mq.addEventListener("change", apply);
+          } catch (e) {
+            mq.addListener(apply);
+          }
+        }
+      } else {
+        root.setAttribute("data-theme", "light");
+        root.style.colorScheme = "light";
+      }
     }
-    for (const key in CONFIG2.CSS_MEDIA_VARS) {
-      delete CONFIG2.CSS_MEDIA_VARS[key];
+    const themeVarPrefix = CONFIG2.varPrefix ? `--${CONFIG2.varPrefix}-theme-` : "--theme-";
+    for (const key in CONFIG2.cssVars) {
+      if (key.startsWith(themeVarPrefix)) delete CONFIG2.cssVars[key];
     }
-    const source = CONFIG2._originalTheme || CONFIG2.theme;
-    if (source) {
-      const fresh = JSON.parse(JSON.stringify(source));
-      CONFIG2.theme = fresh;
-      setEach("theme", fresh);
+    for (const key in CONFIG2.cssMediaVars) {
+      delete CONFIG2.cssMediaVars[key];
     }
-    if (typeof document !== "undefined" && CONFIG2.CSS_VARS) {
-      const sheets = document.styleSheets;
+    if (targetDoc && CONFIG2.cssVars) {
+      const targetSelector = CONFIG2.scopeSelector || ":root";
+      const sheets = targetDoc.styleSheets;
       for (let i = 0; i < sheets.length; i++) {
         try {
           const rules = sheets[i].cssRules;
           for (let j = 0; j < rules.length; j++) {
-            if (rules[j].selectorText === ":root") {
-              for (const key in CONFIG2.CSS_VARS) {
-                rules[j].style.setProperty(key, CONFIG2.CSS_VARS[key]);
+            if (rules[j].selectorText === targetSelector) {
+              for (const key in CONFIG2.cssVars) {
+                rules[j].style.setProperty(key, CONFIG2.cssVars[key]);
               }
               return CONFIG2;
             }
@@ -3113,7 +3510,7 @@ var SmblsScratch = (() => {
   };
   var SET_OPTIONS = {};
   var set = (recivedConfig, options = SET_OPTIONS) => {
-    let CONFIG2 = getActiveConfig();
+    let CONFIG2 = options.config || getActiveConfig();
     const {
       version,
       verbose,
@@ -3123,19 +3520,19 @@ var SmblsScratch = (() => {
       useFontImport,
       useIconSprite,
       globalTheme,
+      themeRoot,
       useDocumentTheme,
       useDefaultConfig,
-      semanticIcons,
-      SEMANTIC_ICONS,
-      // deprecated
-      semantic_icons: semantic_icons2,
+      semanticIcons: semanticIcons2,
       files,
+      assets,
       ...config
     } = recivedConfig;
     if (options.newConfig) {
       CONFIG2 = setActiveConfig(options.newConfig);
     }
     if (files !== void 0) CONFIG2.files = files;
+    if (assets !== void 0) CONFIG2.assets = assets;
     if (verbose !== void 0) CONFIG2.verbose = verbose;
     if (useVariable !== void 0) CONFIG2.useVariable = useVariable;
     if (useReset !== void 0) CONFIG2.useReset = useReset;
@@ -3144,20 +3541,46 @@ var SmblsScratch = (() => {
     if (useIconSprite !== void 0) CONFIG2.useIconSprite = useIconSprite;
     if (useDocumentTheme !== void 0) CONFIG2.useDocumentTheme = useDocumentTheme;
     if (globalTheme !== void 0) CONFIG2.globalTheme = globalTheme;
+    if (themeRoot !== void 0) CONFIG2.themeRoot = themeRoot;
     if (recivedConfig.useThemeSuffixedVars !== void 0)
       CONFIG2.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
     if (useDefaultConfig !== void 0) CONFIG2.useDefaultConfig = useDefaultConfig;
-    const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons2;
-    if (_semanticIcons !== void 0) {
-      CONFIG2.semantic_icons = _semanticIcons;
-      CONFIG2.semanticIcons = CONFIG2.semantic_icons;
-      CONFIG2.SEMANTIC_ICONS = CONFIG2.semantic_icons;
-    }
+    if (semanticIcons2 !== void 0) CONFIG2.semanticIcons = semanticIcons2;
     if (CONFIG2.verbose) console.log(CONFIG2);
-    if (typeof document !== "undefined" && CONFIG2.globalTheme && CONFIG2.globalTheme !== "auto") {
-      document.documentElement.setAttribute("data-theme", CONFIG2.globalTheme);
+    const setConfigDoc = CONFIG2.document && CONFIG2.document.documentElement ? CONFIG2.document : null;
+    const setTargetDoc = setConfigDoc || (typeof document !== "undefined" ? document : null);
+    const setTargetWin = setTargetDoc && setTargetDoc.defaultView || (typeof window !== "undefined" ? window : null);
+    const setRoot = setTargetDoc && (CONFIG2.themeRoot || setTargetDoc.documentElement);
+    if (setRoot && typeof setRoot.setAttribute === "function") {
+      const forced = CONFIG2.globalTheme && CONFIG2.globalTheme !== "auto";
+      if (forced) {
+        setRoot.setAttribute("data-theme", CONFIG2.globalTheme);
+        if (CONFIG2.globalTheme === "dark" || CONFIG2.globalTheme === "light") {
+          setRoot.style.colorScheme = CONFIG2.globalTheme;
+        } else {
+          setRoot.style.colorScheme = "light dark";
+        }
+      } else if (setTargetWin && setTargetWin.matchMedia) {
+        const apply = (mq2) => {
+          setRoot.setAttribute("data-theme", mq2.matches ? "dark" : "light");
+        };
+        const mq = setTargetWin.matchMedia("(prefers-color-scheme: dark)");
+        apply(mq);
+        setRoot.style.colorScheme = "light dark";
+        if (!CONFIG2.__prefersListener) {
+          CONFIG2.__prefersListener = apply;
+          try {
+            mq.addEventListener("change", apply);
+          } catch (e) {
+            mq.addListener(apply);
+          }
+        }
+      } else {
+        setRoot.setAttribute("data-theme", "light");
+        setRoot.style.colorScheme = "light";
+      }
     }
-    if (!CONFIG2.__svg_cache) CONFIG2.__svg_cache = {};
+    if (!CONFIG2.__svgCache) CONFIG2.__svgCache = {};
     const keys = Object.keys(config);
     const keySet = new Set(keys);
     keys.forEach((key) => {
@@ -3166,29 +3589,31 @@ var SmblsScratch = (() => {
         deepMerge(config[lower], config[key]);
       }
     });
-    if (config.theme && !CONFIG2._originalTheme) {
-      CONFIG2._originalTheme = JSON.parse(JSON.stringify(config.theme));
-    }
     keys.map((key) => {
       const lower = key.toLowerCase();
       if (lower !== key && keySet.has(lower)) return;
       return setEach(key, config[key]);
     });
-    if (config.typography || config.TYPOGRAPHY) {
+    if (CONFIG2.varPrefix) {
+      if (CONFIG2.typography) CONFIG2.typography.varPrefix = CONFIG2.varPrefix;
+      if (CONFIG2.spacing) CONFIG2.spacing.varPrefix = CONFIG2.varPrefix;
+      if (CONFIG2.timing) CONFIG2.timing.varPrefix = CONFIG2.varPrefix;
+    }
+    if (config.typography) {
       try {
         applyTypographySequence();
       } catch (e) {
         if (CONFIG2.verbose) console.warn("Error applying typography sequence", e);
       }
     }
-    if (config.spacing || config.SPACING) {
+    if (config.spacing) {
       try {
         applySpacingSequence();
       } catch (e) {
         if (CONFIG2.verbose) console.warn("Error applying spacing sequence", e);
       }
     }
-    if (config.timing || config.TIMING) {
+    if (config.timing) {
       try {
         applyTimingSequence();
       } catch (e) {
@@ -3196,7 +3621,8 @@ var SmblsScratch = (() => {
       }
     }
     applyDocument();
-    applyReset();
+    const computedReset = applyReset();
+    if (computedReset) CONFIG2.reset = computedReset;
     return CONFIG2;
   };
   return __toCommonJS(index_exports);