smbls 3.4.3 → 3.4.5

package/dist/esm/dynamic.json

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

package/dist/esm/package.json

@@ -0,0 +1 @@
+{"name":"smbls","version":"3.4.4"}

package/dist/iife/index.js

@@ -38,15 +38,15 @@ var Smbls = (() => {
   // index.js
   var index_exports = {};
   __export(index_exports, {
-    DEFAULT_CONTEXT: () => DEFAULT_CONTEXT,
-    DESIGN_SYSTEM_OPTIONS: () => DESIGN_SYSTEM_OPTIONS,
+    DEFAULT_CONTEXT: () => DEFAULT_CONTEXT2,
+    DESIGN_SYSTEM_OPTIONS: () => DESIGN_SYSTEM_OPTIONS2,
     DYNAMIC_JSON: () => import_dynamic.default,
-    ROUTER_OPTIONS: () => ROUTER_OPTIONS,
+    ROUTER_OPTIONS: () => ROUTER_OPTIONS2,
     applyCSS: () => applyCSS,
-    create: () => create,
-    createAsync: () => createAsync,
-    createSkeleton: () => createSkeleton,
-    createSync: () => createSync,
+    create: () => create2,
+    createAsync: () => createAsync2,
+    createSkeleton: () => createSkeleton2,
+    createSync: () => createSync2,
     init: () => init,
     reinit: () => reinit,
     setClass: () => setClass,
@@ -62,7 +62,7 @@ var Smbls = (() => {
   __reExport(index_exports, __require("@symbo.ls/smbls-utils"));
 
   // src/index.js
-  var import_utils7 = __require("@domql/utils");
+  var import_utils14 = __require("@domql/utils");
 
   // src/utilImports.js
   var utilImports_exports = {};
@@ -173,7 +173,148 @@ var Smbls = (() => {
   __reExport(utilImports_exports, __require("@domql/router"));
 
   // src/router.js
+  var import_utils9 = __require("@domql/utils");
+  var import_router4 = __require("@domql/router");
+
+  // dist/esm/index.js
+  var esm_exports = {};
+  __export(esm_exports, {
+    DEFAULT_CONTEXT: () => DEFAULT_CONTEXT,
+    DESIGN_SYSTEM_OPTIONS: () => DESIGN_SYSTEM_OPTIONS,
+    DYNAMIC_JSON: () => import_dynamic2.default,
+    ROUTER_OPTIONS: () => ROUTER_OPTIONS,
+    applyCSS: () => applyCSS2,
+    create: () => create,
+    createAsync: () => createAsync,
+    createSkeleton: () => createSkeleton,
+    createSync: () => createSync,
+    init: () => init2,
+    reinit: () => reinit2,
+    setClass: () => setClass2,
+    updateVars: () => updateVars2
+  });
+  __reExport(esm_exports, __require("@domql/utils"));
+  __reExport(esm_exports, __require("attrs-in-props"));
+  __reExport(esm_exports, __require("css-in-props"));
+  __reExport(esm_exports, __require("@symbo.ls/default-config"));
+  __reExport(esm_exports, __require("@symbo.ls/emotion"));
+  __reExport(esm_exports, __require("@symbo.ls/scratch"));
+  __reExport(esm_exports, __require("@symbo.ls/uikit"));
+  __reExport(esm_exports, __require("@symbo.ls/smbls-utils"));
+
+  // dist/esm/src/index.js
+  var import_utils8 = __require("@domql/utils");
+
+  // dist/esm/src/utilImports.js
+  var utilImports_exports2 = {};
+  __export(utilImports_exports2, {
+    applyCSS: () => applyCSS2,
+    init: () => init2,
+    reinit: () => reinit2,
+    scratchSystem: () => import_scratch4.scratchSystem,
+    scratchUtils: () => import_scratch4.scratchUtils,
+    set: () => import_scratch4.set
+  });
+  var import_scratch4 = __require("@symbo.ls/scratch");
+  __reExport(utilImports_exports2, __require("@domql/utils"));
+  __reExport(utilImports_exports2, __require("@symbo.ls/smbls-utils"));
+
+  // dist/esm/src/init.js
+  var import_scratch3 = __require("@symbo.ls/scratch");
   var import_utils2 = __require("@domql/utils");
+  var import_emotion2 = __require("@symbo.ls/emotion");
+  var import_dynamic2 = __toESM(__require("../dynamic.json"));
+  var CONFIG2 = (0, import_scratch3.getActiveConfig)();
+  var mergeWithLocalFile2 = (config = CONFIG2, options) => {
+    const rcfile = (0, import_utils2.isObject)(options.localFile) ? options.localFile : import_dynamic2.default || {};
+    const clonedFile = (0, import_utils2.deepClone)(rcfile.designSystem || {});
+    return (0, import_utils2.deepMerge)(config, clonedFile);
+  };
+  var SET_OPTIONS2 = {
+    emotion: import_emotion2.emotion,
+    useVariable: true,
+    useReset: true,
+    useFontImport: true,
+    useIconSprite: true,
+    useDocumentTheme: true,
+    useSvgSprite: true
+  };
+  var init2 = (config, options = SET_OPTIONS2) => {
+    const emotion = options.emotion || import_emotion2.emotion;
+    const resultConfig = mergeWithLocalFile2(config || {}, options);
+    const conf = (0, import_scratch3.set)(
+      {
+        verbose: options.verbose,
+        useReset: options.useReset,
+        useFontImport: options.useFontImport,
+        useVariable: options.useVariable,
+        useSvgSprite: options.useSvgSprite,
+        useDocumentTheme: options.useDocumentTheme,
+        useIconSprite: options.useIconSprite,
+        useDefaultConfig: options.useDefaultConfig,
+        globalTheme: options.globalTheme,
+        ...resultConfig
+      },
+      { newConfig: options.newConfig }
+    );
+    const FontFace = (0, import_scratch3.getFontFaceString)(conf.font || conf.FONT);
+    const useReset = conf.useReset;
+    const useVariable = conf.useVariable;
+    const useFontImport = conf.useFontImport;
+    const useSvgSprite = conf.useSvgSprite;
+    const hasSvgs = config.svg || config.SVG;
+    const useIconSprite = conf.useIconSprite;
+    const hasIcons = config.icons || config.ICONS;
+    if (useFontImport) emotion.injectGlobal(FontFace);
+    if (useVariable) emotion.injectGlobal({ ":root": conf.CSS_VARS });
+    if (useReset) emotion.injectGlobal(conf.reset || conf.RESET);
+    const animations = conf.animation || conf.ANIMATION;
+    if (animations) {
+      const keyframesCSS = {};
+      for (const name in animations) {
+        keyframesCSS[`@keyframes ${name}`] = animations[name];
+      }
+      emotion.injectGlobal(keyframesCSS);
+    }
+    if (hasSvgs || useSvgSprite)
+      (0, import_scratch3.appendSVGSprite)(conf.svg || conf.SVG, { document: options.document });
+    if (hasIcons || useIconSprite)
+      (0, import_scratch3.appendSvgIconsSprite)(conf.icons || conf.ICONS, { document: options.document });
+    return conf;
+  };
+  var UPDATE_OPTIONS2 = {
+    emotion: import_emotion2.emotion
+  };
+  var reinit2 = (config, options = UPDATE_OPTIONS2) => {
+    const emotion = options.emotion || import_emotion2.emotion;
+    const resultConfig = mergeWithLocalFile2(config || {}, options);
+    const conf = (0, import_scratch3.set)({
+      verbose: false,
+      ...resultConfig
+    });
+    if (!options.preventInject) {
+      emotion.injectGlobal({ ":root": conf.CSS_VARS });
+      emotion.injectGlobal(conf.RESET);
+    }
+    return conf;
+  };
+  var applyCSS2 = (styles, options = UPDATE_OPTIONS2) => {
+    const emotion = options.emotion || import_emotion2.emotion;
+    emotion.injectGlobal(styles);
+  };
+  var updateVars2 = (config, options = UPDATE_OPTIONS2) => {
+    const emotion = options.emotion || import_emotion2.emotion;
+    emotion.injectGlobal({ ":root": config.CSS_VARS });
+  };
+  var setClass2 = (props, options = UPDATE_OPTIONS2) => {
+  };
+
+  // dist/esm/src/utilImports.js
+  __reExport(utilImports_exports2, __require("@domql/report"));
+  __reExport(utilImports_exports2, __require("@domql/router"));
+
+  // dist/esm/src/router.js
+  var import_utils3 = __require("@domql/utils");
   var import_router = __require("@domql/router");
   var DEFAULT_ROUTING_OPTIONS = {
     initRouter: true,
@@ -183,14 +324,14 @@ var Smbls = (() => {
   var initRouter = (element, context) => {
     if (context.router === false) return;
     else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS;
-    else context.router = (0, import_utils2.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS);
+    else context.router = (0, import_utils3.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS);
     const routerOptions = context.router;
     const onRouterRenderDefault = async (el, s) => {
-      const { pathname, search, hash } = import_utils2.window.location;
+      const { pathname, search, hash } = import_utils3.window.location;
       const url = pathname + search + hash;
       if (el.routes) await (0, import_router.router)(url, el, {}, { initialRender: true });
     };
-    const hasRenderRouter = element.on && !(0, import_utils2.isUndefined)(element.on.renderRouter) || !(0, import_utils2.isUndefined)(element.onRenderRouter);
+    const hasRenderRouter = element.on && !(0, import_utils3.isUndefined)(element.on.renderRouter) || !(0, import_utils3.isUndefined)(element.onRenderRouter);
     if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
       if (element.on) {
         element.on.renderRouter = onRouterRenderDefault;
@@ -210,8 +351,8 @@ var Smbls = (() => {
     const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS;
     if (!routerOptions.popState) return;
     const router = context.utils && context.utils.router ? context.utils.router : import_router.router;
-    import_utils2.window.onpopstate = async (e) => {
-      const { pathname, search, hash } = import_utils2.window.location;
+    import_utils3.window.onpopstate = async (e) => {
+      const { pathname, search, hash } = import_utils3.window.location;
       const url = pathname + search + hash;
       await element.call(
         "router",
@@ -225,15 +366,15 @@ var Smbls = (() => {
   var injectRouterInLinkComponent = (context, routerOptions) => {
     const { components } = context;
     if (routerOptions && routerOptions.injectRouterInLinkComponent) {
-      return (0, import_utils2.deepMerge)(
+      return (0, import_utils3.deepMerge)(
         components["Link"] || components["smbls.Link"],
         components["RouterLink"] || components["smbls.RouterLink"]
       );
     }
   };
 
-  // src/fetchOnCreate.js
-  var import_utils3 = __require("@domql/utils");
+  // dist/esm/src/fetchOnCreate.js
+  var import_utils4 = __require("@domql/utils");
   var import_fetch = __require("@symbo.ls/fetch");
   var fetchSync = async (key, options) => {
     if (key && options.editor) {
@@ -250,10 +391,10 @@ var Smbls = (() => {
         if (options.editor.async) {
           (0, import_fetch.fetchProjectAsync)(key, options, callback || ((data) => {
             const designSystem = data.designSystem;
-            if ((0, import_utils3.isObject)(designSystem)) {
+            if ((0, import_utils4.isObject)(designSystem)) {
               options.utils.init(designSystem);
             }
-            if ((0, import_utils3.isObject)(data.state)) {
+            if ((0, import_utils4.isObject)(data.state)) {
               app.state.set(data.state);
             }
           }));
@@ -264,24 +405,24 @@ var Smbls = (() => {
     }
   };
 
-  // src/define.js
+  // dist/esm/src/define.js
   var defaultDefine = {
     routes: (param) => param,
     // deps: (param, el) => param || el.parent.deps,
     $router: async (param, el) => {
       if (!param) return;
       const obj = { tag: "fragment", ...param };
-      const set3 = async () => {
+      const set5 = async () => {
         await el.set(obj, { preventDefineUpdate: "$router" });
       };
       if (el.props && el.props.lazyLoad) {
-        window.requestAnimationFrame(set3);
-      } else await set3();
+        window.requestAnimationFrame(set5);
+      } else await set5();
       return obj;
     }
   };
 
-  // src/options.js
+  // dist/esm/src/options.js
   var import_package = __require("../package.json");
   var DESIGN_SYSTEM_OPTIONS = {
     useReset: true,
@@ -312,28 +453,28 @@ var Smbls = (() => {
   };
   var options_default = CREATE_OPTIONS;
 
-  // src/index.js
-  var import_dynamic2 = __toESM(__require("../dynamic.json"), 1);
+  // dist/esm/src/index.js
+  var import_dynamic3 = __toESM(__require("../dynamic.json"));
 
-  // src/createDomql.js
-  var import_domql = __toESM(__require("domql"), 1);
-  var uikit2 = __toESM(__require("@symbo.ls/uikit"), 1);
+  // dist/esm/src/createDomql.js
+  var import_domql = __toESM(__require("domql"));
+  var uikit2 = __toESM(__require("@symbo.ls/uikit"));
   var import_css_in_props = __require("css-in-props");
-  var import_utils6 = __require("@domql/utils");
+  var import_utils7 = __require("@domql/utils");
   var import_element = __require("@domql/element");
 
-  // src/syncExtend.js
-  var import_utils4 = __require("@domql/utils");
+  // dist/esm/src/syncExtend.js
+  var import_utils5 = __require("@domql/utils");
   var import_sync = __require("@symbo.ls/sync");
   var initializeExtend = (app, ctx) => {
-    return (0, import_utils4.isObjectLike)(app.extends) ? app.extends : [];
+    return (0, import_utils5.isObjectLike)(app.extends) ? app.extends : [];
   };
   var initializeSync = (app, ctx) => {
     const { editor } = ctx;
     if (!editor) return;
-    const liveSync = (0, import_utils4.isUndefined)(editor.liveSync) ? (0, import_utils4.isDevelopment)() : editor.liveSync;
+    const liveSync = (0, import_utils5.isUndefined)(editor.liveSync) ? (0, import_utils5.isDevelopment)() : editor.liveSync;
     if (liveSync) {
-      if ((0, import_utils4.isArray)(app.extends)) app.extends.push(import_sync.SyncComponent);
+      if ((0, import_utils5.isArray)(app.extends)) app.extends.push(import_sync.SyncComponent);
       else if (app.extends) {
         app.extends = [app.extends, import_sync.SyncComponent];
       } else {
@@ -344,9 +485,9 @@ var Smbls = (() => {
   var initializeNotifications = (app, ctx) => {
     const { editor } = ctx;
     if (!editor) return;
-    const verbose = (0, import_utils4.isUndefined)(editor.verbose) ? (0, import_utils4.isDevelopment)() || ctx.verbose : editor.verbose;
+    const verbose = (0, import_utils5.isUndefined)(editor.verbose) ? (0, import_utils5.isDevelopment)() || ctx.verbose : editor.verbose;
     if (verbose) {
-      if ((0, import_utils4.isArray)(app.extends)) app.extends.push(import_sync.Notifications);
+      if ((0, import_utils5.isArray)(app.extends)) app.extends.push(import_sync.Notifications);
       else if (app.extends) {
         app.extends = [app.extends, import_sync.Notifications];
       } else {
@@ -355,11 +496,11 @@ var Smbls = (() => {
     }
   };
 
-  // src/prepare.js
-  var import_utils5 = __require("@domql/utils");
-  var import_emotion2 = __require("@symbo.ls/emotion");
-  var uikit = __toESM(__require("@symbo.ls/uikit"), 1);
-  var routerUtils = __toESM(__require("@domql/router"), 1);
+  // dist/esm/src/prepare.js
+  var import_utils6 = __require("@domql/utils");
+  var import_emotion3 = __require("@symbo.ls/emotion");
+  var uikit = __toESM(__require("@symbo.ls/uikit"));
+  var routerUtils = __toESM(__require("@domql/router"));
   var prepareWindow = (context) => {
     if (typeof window === "undefined") window = globalThis || {};
     if (typeof document === "undefined") {
@@ -376,27 +517,27 @@ var Smbls = (() => {
   var CDN_PROVIDERS = {
     skypack: {
       url: "https://cdn.skypack.dev",
-      formatUrl: (pkg, version2) => `${CDN_PROVIDERS.skypack.url}/${pkg}${version2 !== "latest" ? `@${version2}` : ""}`
+      formatUrl: (pkg, version3) => `${CDN_PROVIDERS.skypack.url}/${pkg}${version3 !== "latest" ? `@${version3}` : ""}`
     },
     esmsh: {
       url: "https://esm.sh",
-      formatUrl: (pkg, version2) => `${CDN_PROVIDERS.esmsh.url}/${pkg}${version2 !== "latest" ? `@${version2}` : ""}`
+      formatUrl: (pkg, version3) => `${CDN_PROVIDERS.esmsh.url}/${pkg}${version3 !== "latest" ? `@${version3}` : ""}`
     },
     unpkg: {
       url: "https://unpkg.com",
-      formatUrl: (pkg, version2) => `${CDN_PROVIDERS.unpkg.url}/${pkg}${version2 !== "latest" ? `@${version2}` : ""}?module`
+      formatUrl: (pkg, version3) => `${CDN_PROVIDERS.unpkg.url}/${pkg}${version3 !== "latest" ? `@${version3}` : ""}?module`
     },
     jsdelivr: {
       url: "https://cdn.jsdelivr.net/npm",
-      formatUrl: (pkg, version2) => `${CDN_PROVIDERS.jsdelivr.url}/${pkg}${version2 !== "latest" ? `@${version2}` : ""}/+esm`
+      formatUrl: (pkg, version3) => `${CDN_PROVIDERS.jsdelivr.url}/${pkg}${version3 !== "latest" ? `@${version3}` : ""}/+esm`
     },
     symbols: {
       url: "https://pkg.symbo.ls",
-      formatUrl: (pkg, version2) => {
-        if (pkg.split("/").length > 2 || !onlyDotsAndNumbers(version2)) {
+      formatUrl: (pkg, version3) => {
+        if (pkg.split("/").length > 2 || !onlyDotsAndNumbers(version3)) {
           return `${CDN_PROVIDERS.symbols.url}/${pkg}`;
         }
-        return `${CDN_PROVIDERS.symbols.url}/${pkg}/${version2}.js`;
+        return `${CDN_PROVIDERS.symbols.url}/${pkg}/${version3}.js`;
       }
     }
   };
@@ -411,15 +552,15 @@ var Smbls = (() => {
     const { packageManager } = symbolsConfig;
     return PACKAGE_MANAGER_TO_CDN[packageManager] || null;
   };
-  var getCDNUrl = (packageName, version2 = "latest", provider = "esmsh") => {
+  var getCDNUrl = (packageName, version3 = "latest", provider = "esmsh") => {
     const cdnConfig = CDN_PROVIDERS[provider] || CDN_PROVIDERS.esmsh;
-    return cdnConfig.formatUrl(packageName, version2);
+    return cdnConfig.formatUrl(packageName, version3);
   };
   var UIkitWithPrefix = (prefix = "smbls") => {
     const newObj = {};
     for (const key in uikit) {
       if (Object.prototype.hasOwnProperty.call(uikit, key)) {
-        if ((0, import_utils5.matchesComponentNaming)(key)) {
+        if ((0, import_utils6.matchesComponentNaming)(key)) {
           newObj[`smbls.${key}`] = uikit[key];
         } else {
           newObj[key] = uikit[key];
@@ -433,9 +574,9 @@ var Smbls = (() => {
   };
   var prepareUtils = (context) => {
     return {
-      ...utilImports_exports,
+      ...utilImports_exports2,
       ...routerUtils,
-      ...import_scratch2.scratchUtils,
+      ...import_scratch4.scratchUtils,
       ...context.utils,
       ...context.snippets,
       ...context.functions
@@ -470,22 +611,22 @@ var Smbls = (() => {
     }
     if (!hasAny) return null;
     for (const dependency in dependencies) {
-      const version2 = dependencies[dependency];
+      const version3 = dependencies[dependency];
       if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
         continue;
       }
-      const random = (0, import_utils5.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
-      const url = getCDNUrl(dependency, version2, cdnProvider) + random;
+      const random = (0, import_utils6.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
+      const url = getCDNUrl(dependency, version3, cdnProvider) + random;
       try {
         if (cachedDeps[dependency]) return;
         cachedDeps[dependency] = true;
-        await utilImports_exports.loadRemoteScript(url, { document: document2, type: "module" });
+        await utilImports_exports2.loadRemoteScript(url, { document: document2, type: "module" });
       } catch (e) {
         console.error(`Failed to load ${dependency} from ${cdnProvider}:`, e);
         if (cdnProvider !== "symbols") {
           try {
-            const fallbackUrl = getCDNUrl(dependency, version2, "symbols") + random;
-            await utilImports_exports.loadRemoteScript(fallbackUrl, { document: document2 });
+            const fallbackUrl = getCDNUrl(dependency, version3, "symbols") + random;
+            await utilImports_exports2.loadRemoteScript(fallbackUrl, { document: document2 });
             console.log(
               `Successfully loaded ${dependency} from fallback (symbols.ls)`
             );
@@ -514,10 +655,10 @@ var Smbls = (() => {
       const documentOpts = ctx2.document || document;
       const windowOpts2 = ctx2.window || window;
       if (!windowOpts2.packages[key]) {
-        const random = (0, import_utils5.isDevelopment)() ? `?${Math.random()}` : "";
+        const random = (0, import_utils6.isDevelopment)() ? `?${Math.random()}` : "";
         if (dependenciesOnDemand && dependenciesOnDemand[key]) {
-          const version2 = dependenciesOnDemand[key];
-          const url = getCDNUrl(key, version2, provider) + random;
+          const version3 = dependenciesOnDemand[key];
+          const url = getCDNUrl(key, version3, provider) + random;
           try {
             await ctx2.utils.loadRemoteScript(url, {
               window: windowOpts2,
@@ -526,7 +667,7 @@ var Smbls = (() => {
           } catch (e) {
             console.error(`Failed to load ${key} from ${provider}:`, e);
             if (provider !== "symbols") {
-              const fallbackUrl = getCDNUrl(key, version2, "symbols") + random;
+              const fallbackUrl = getCDNUrl(key, version3, "symbols") + random;
               await ctx2.utils.loadRemoteScript(fallbackUrl, {
                 window: windowOpts2,
                 document: documentOpts
@@ -556,7 +697,7 @@ var Smbls = (() => {
       return await windowOpts2.require(key, provider);
     };
     if (windowOpts.packages) {
-      windowOpts.packages = (0, import_utils5.merge)(windowOpts.packages, packages);
+      windowOpts.packages = (0, import_utils6.merge)(windowOpts.packages, packages);
     } else {
       windowOpts.packages = packages;
     }
@@ -570,19 +711,19 @@ var Smbls = (() => {
     }
   };
   var prepareDesignSystem = (key, context) => {
-    const [scratcDesignhSystem, emotion, registry] = (0, import_emotion2.initEmotion)(key, context);
+    const [scratcDesignhSystem, emotion, registry] = (0, import_emotion3.initEmotion)(key, context);
     return [scratcDesignhSystem, emotion, registry];
   };
   var prepareState = (app, context) => {
     const state = {};
-    if (context.state) utilImports_exports.deepMerge(state, context.state);
-    if (app && app.state) (0, import_utils5.deepMerge)(state, app.state);
+    if (context.state) utilImports_exports2.deepMerge(state, context.state);
+    if (app && app.state) (0, import_utils6.deepMerge)(state, app.state);
     state.isRootState = true;
-    return (0, import_utils5.deepClone)(state);
+    return (0, import_utils6.deepClone)(state);
   };
   var preparePages = (app, context) => {
-    if ((0, import_utils5.isObject)(app.routes) && (0, import_utils5.isObject)(context.pages)) {
-      (0, import_utils5.merge)(app.routes, context.pages);
+    if ((0, import_utils6.isObject)(app.routes) && (0, import_utils6.isObject)(context.pages)) {
+      (0, import_utils6.merge)(app.routes, context.pages);
     }
     const pages = app.routes || context.pages || {};
     for (const v in pages) {
@@ -599,16 +740,16 @@ var Smbls = (() => {
       const sharedLib = sharedLibraries[i];
       if (context.type === "template") {
         overwriteShallow(context.designSystem, sharedLib.designSystem);
-        (0, import_utils5.deepMerge)(context, sharedLib, ["designSystem"], 1);
+        (0, import_utils6.deepMerge)(context, sharedLib, ["designSystem"], 1);
       } else {
-        (0, import_utils5.deepMerge)(context, sharedLib, [], 1);
+        (0, import_utils6.deepMerge)(context, sharedLib, [], 1);
       }
     }
   };
 
-  // src/createDomql.js
+  // dist/esm/src/createDomql.js
   var prepareContext = async (app, context = {}) => {
-    const key = context.key = context.key || ((0, import_utils6.isString)(app) ? app : "smblsapp");
+    const key = context.key = context.key || ((0, import_utils7.isString)(app) ? app : "smblsapp");
     context.define = context.define || defaultDefine;
     context.cssPropsRegistry = import_css_in_props.CSS_PROPS_REGISTRY;
     context.window = prepareWindow(context);
@@ -638,14 +779,14 @@ var Smbls = (() => {
     return context;
   };
   var createDomqlElement = async (app, ctx) => {
-    if (!(0, import_utils6.isObject)(ctx)) ctx = {};
-    if ((0, import_utils6.isNode)(app)) {
+    if (!(0, import_utils7.isObject)(ctx)) ctx = {};
+    if ((0, import_utils7.isNode)(app)) {
       app = {};
       ctx.parent = app;
-    } else if ((0, import_utils6.isString)(app)) {
+    } else if ((0, import_utils7.isString)(app)) {
       app = {};
       ctx.key = app;
-    } else if (!(0, import_utils6.isObject)(app)) {
+    } else if (!(0, import_utils7.isObject)(app)) {
       app = {};
     }
     await prepareContext(app, ctx);
@@ -675,15 +816,15 @@ var Smbls = (() => {
     return smblsApp;
   };
 
-  // src/index.js
-  var mergeWithLocalFile2 = (options, optionsExternalFile) => (0, import_utils7.deepMerge)(
+  // dist/esm/src/index.js
+  var mergeWithLocalFile3 = (options, optionsExternalFile) => (0, import_utils8.deepMerge)(
     options,
-    (0, import_utils7.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic2.default || {}
+    (0, import_utils8.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic3.default || {}
   );
   var create = (App, options = options_default, optionsExternalFile) => {
     const redefinedOptions = {
       ...options_default,
-      ...mergeWithLocalFile2(options, optionsExternalFile)
+      ...mergeWithLocalFile3(options, optionsExternalFile)
     };
     const domqlApp = createDomqlElement(App, redefinedOptions).then((App2) => {
       onpopstateRouter(App2, redefinedOptions);
@@ -701,16 +842,16 @@ var Smbls = (() => {
     const domqlApp = create(App, options, optionsExternalFile);
     const redefinedOptions = {
       ...options_default,
-      ...mergeWithLocalFile2(options, optionsExternalFile)
+      ...mergeWithLocalFile3(options, optionsExternalFile)
     };
     const key = redefinedOptions.key;
-    fetchAsync(domqlApp, key, { utils: utilImports_exports, ...redefinedOptions });
+    fetchAsync(domqlApp, key, { utils: utilImports_exports2, ...redefinedOptions });
     return domqlApp;
   };
   var createSync = async (App, options = options_default, optionsExternalFile) => {
     const redefinedOptions = {
       ...options_default,
-      ...mergeWithLocalFile2(options, optionsExternalFile)
+      ...mergeWithLocalFile3(options, optionsExternalFile)
     };
     const key = options.key;
     await fetchSync(key, redefinedOptions);
@@ -727,10 +868,571 @@ var Smbls = (() => {
   var createSkeleton = (App = {}, options = options_default, optionsExternalFile) => {
     return create(
       {
-        deps: { isUndefined: import_utils7.isUndefined },
+        deps: { isUndefined: import_utils8.isUndefined },
+        ...App
+      },
+      (0, import_utils8.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
+      optionsExternalFile
+    );
+  };
+
+  // src/router.js
+  var DEFAULT_ROUTING_OPTIONS2 = {
+    initRouter: true,
+    injectRouterInLinkComponent: true,
+    popState: true
+  };
+  var initRouter2 = (element, context) => {
+    if (context.router === false) return;
+    else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS2;
+    else context.router = (0, import_utils9.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS2);
+    const routerOptions = context.router;
+    const onRouterRenderDefault = async (el, s) => {
+      const { pathname, search, hash } = import_utils9.window.location;
+      const url = pathname + search + hash;
+      if (el.routes) await (0, import_router4.router)(url, el, {}, { initialRender: true });
+    };
+    const hasRenderRouter = element.on && !(0, import_utils9.isUndefined)(element.on.renderRouter) || !(0, import_utils9.isUndefined)(element.onRenderRouter);
+    if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
+      if (element.on) {
+        element.on.renderRouter = onRouterRenderDefault;
+      } else {
+        element.on = {
+          renderRouter: onRouterRenderDefault
+        };
+      }
+    }
+    injectRouterInLinkComponent2(context, routerOptions);
+    return routerOptions;
+  };
+  var popStateFired2;
+  var onpopstateRouter2 = (element, context) => {
+    if (popStateFired2) return;
+    popStateFired2 = true;
+    const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS2;
+    if (!routerOptions.popState) return;
+    const router = context.utils && context.utils.router ? context.utils.router : import_router4.router;
+    import_utils9.window.onpopstate = async (e) => {
+      const { pathname, search, hash } = import_utils9.window.location;
+      const url = pathname + search + hash;
+      await element.call(
+        "router",
+        url,
+        element,
+        {},
+        { pushState: false, scrollToTop: false, level: 0, event: e }
+      );
+    };
+  };
+  var injectRouterInLinkComponent2 = (context, routerOptions) => {
+    const { components } = context;
+    if (routerOptions && routerOptions.injectRouterInLinkComponent) {
+      return (0, import_utils9.deepMerge)(
+        components["Link"] || components["smbls.Link"],
+        components["RouterLink"] || components["smbls.RouterLink"]
+      );
+    }
+  };
+
+  // src/fetchOnCreate.js
+  var import_utils10 = __require("@domql/utils");
+  var import_fetch2 = __require("@symbo.ls/fetch");
+  var fetchSync2 = async (key, options) => {
+    if (key && options.editor) {
+      try {
+        if (!options.editor.async) await (0, import_fetch2.fetchProject)(key, options);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+  var fetchAsync2 = (app, key, options, callback) => {
+    if (key && options.editor) {
+      try {
+        if (options.editor.async) {
+          (0, import_fetch2.fetchProjectAsync)(key, options, callback || ((data) => {
+            const designSystem = data.designSystem;
+            if ((0, import_utils10.isObject)(designSystem)) {
+              options.utils.init(designSystem);
+            }
+            if ((0, import_utils10.isObject)(data.state)) {
+              app.state.set(data.state);
+            }
+          }));
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
+  // src/define.js
+  var defaultDefine2 = {
+    routes: (param) => param,
+    // deps: (param, el) => param || el.parent.deps,
+    $router: async (param, el) => {
+      if (!param) return;
+      const obj = { tag: "fragment", ...param };
+      const set5 = async () => {
+        await el.set(obj, { preventDefineUpdate: "$router" });
+      };
+      if (el.props && el.props.lazyLoad) {
+        window.requestAnimationFrame(set5);
+      } else await set5();
+      return obj;
+    }
+  };
+
+  // src/options.js
+  var import_package2 = __require("../package.json");
+  var DESIGN_SYSTEM_OPTIONS2 = {
+    useReset: true,
+    useVariable: true,
+    useIconSprite: true,
+    useSvgSprite: true,
+    useDocumentTheme: true,
+    useDefaultIcons: true,
+    useFontImport: true,
+    useDefaultConfig: true
+  };
+  var ROUTER_OPTIONS2 = {
+    initRouter: true,
+    popState: true,
+    injectRouterInLinkComponent: true
+  };
+  var DEFAULT_CONTEXT2 = {
+    ...DESIGN_SYSTEM_OPTIONS2,
+    router: ROUTER_OPTIONS2,
+    version: import_package2.version
+  };
+  var CREATE_OPTIONS2 = {
+    state: {},
+    pages: {},
+    components: {},
+    router: ROUTER_OPTIONS2,
+    define: defaultDefine2
+  };
+  var options_default2 = CREATE_OPTIONS2;
+
+  // src/index.js
+  var import_dynamic4 = __toESM(__require("../dynamic.json"), 1);
+
+  // src/createDomql.js
+  var import_domql2 = __toESM(__require("domql"), 1);
+  var uikit4 = __toESM(__require("@symbo.ls/uikit"), 1);
+  var import_css_in_props2 = __require("css-in-props");
+  var import_utils13 = __require("@domql/utils");
+  var import_element2 = __require("@domql/element");
+
+  // src/syncExtend.js
+  var import_utils11 = __require("@domql/utils");
+  var import_sync2 = __require("@symbo.ls/sync");
+  var initializeExtend2 = (app, ctx) => {
+    return (0, import_utils11.isObjectLike)(app.extends) ? app.extends : [];
+  };
+  var initializeSync2 = (app, ctx) => {
+    const { editor } = ctx;
+    if (!editor) return;
+    const liveSync = (0, import_utils11.isUndefined)(editor.liveSync) ? (0, import_utils11.isDevelopment)() : editor.liveSync;
+    if (liveSync) {
+      if ((0, import_utils11.isArray)(app.extends)) app.extends.push(import_sync2.SyncComponent);
+      else if (app.extends) {
+        app.extends = [app.extends, import_sync2.SyncComponent];
+      } else {
+        app.extends = [import_sync2.SyncComponent];
+      }
+    }
+  };
+  var initializeNotifications2 = (app, ctx) => {
+    const { editor } = ctx;
+    if (!editor) return;
+    const verbose = (0, import_utils11.isUndefined)(editor.verbose) ? (0, import_utils11.isDevelopment)() || ctx.verbose : editor.verbose;
+    if (verbose) {
+      if ((0, import_utils11.isArray)(app.extends)) app.extends.push(import_sync2.Notifications);
+      else if (app.extends) {
+        app.extends = [app.extends, import_sync2.Notifications];
+      } else {
+        app.extends = [import_sync2.Notifications];
+      }
+    }
+  };
+
+  // src/prepare.js
+  var import_utils12 = __require("@domql/utils");
+  var import_emotion4 = __require("@symbo.ls/emotion");
+  var uikit3 = __toESM(__require("@symbo.ls/uikit"), 1);
+  var routerUtils2 = __toESM(__require("@domql/router"), 1);
+  var prepareWindow2 = (context) => {
+    if (typeof window === "undefined") window = globalThis || {};
+    if (typeof document === "undefined") {
+      if (!window.document) window.document = globalThis.document || { body: {} };
+      document = window.document;
+    }
+    context.document = context.document || document;
+    context.window = context.window || window;
+    return context.window;
+  };
+  function onlyDotsAndNumbers2(str) {
+    return /^[0-9.]+$/.test(str) && str !== "";
+  }
+  var CDN_PROVIDERS2 = {
+    skypack: {
+      url: "https://cdn.skypack.dev",
+      formatUrl: (pkg, version3) => `${CDN_PROVIDERS2.skypack.url}/${pkg}${version3 !== "latest" ? `@${version3}` : ""}`
+    },
+    esmsh: {
+      url: "https://esm.sh",
+      formatUrl: (pkg, version3) => `${CDN_PROVIDERS2.esmsh.url}/${pkg}${version3 !== "latest" ? `@${version3}` : ""}`
+    },
+    unpkg: {
+      url: "https://unpkg.com",
+      formatUrl: (pkg, version3) => `${CDN_PROVIDERS2.unpkg.url}/${pkg}${version3 !== "latest" ? `@${version3}` : ""}?module`
+    },
+    jsdelivr: {
+      url: "https://cdn.jsdelivr.net/npm",
+      formatUrl: (pkg, version3) => `${CDN_PROVIDERS2.jsdelivr.url}/${pkg}${version3 !== "latest" ? `@${version3}` : ""}/+esm`
+    },
+    symbols: {
+      url: "https://pkg.symbo.ls",
+      formatUrl: (pkg, version3) => {
+        if (pkg.split("/").length > 2 || !onlyDotsAndNumbers2(version3)) {
+          return `${CDN_PROVIDERS2.symbols.url}/${pkg}`;
+        }
+        return `${CDN_PROVIDERS2.symbols.url}/${pkg}/${version3}.js`;
+      }
+    }
+  };
+  var PACKAGE_MANAGER_TO_CDN2 = {
+    "esm.sh": "esmsh",
+    "unpkg": "unpkg",
+    "skypack": "skypack",
+    "jsdelivr": "jsdelivr",
+    "pkg.symbo.ls": "symbols"
+  };
+  var getCdnProviderFromConfig2 = (symbolsConfig = {}) => {
+    const { packageManager } = symbolsConfig;
+    return PACKAGE_MANAGER_TO_CDN2[packageManager] || null;
+  };
+  var getCDNUrl2 = (packageName, version3 = "latest", provider = "esmsh") => {
+    const cdnConfig = CDN_PROVIDERS2[provider] || CDN_PROVIDERS2.esmsh;
+    return cdnConfig.formatUrl(packageName, version3);
+  };
+  var UIkitWithPrefix2 = (prefix = "smbls") => {
+    const newObj = {};
+    for (const key in uikit3) {
+      if (Object.prototype.hasOwnProperty.call(uikit3, key)) {
+        if ((0, import_utils12.matchesComponentNaming)(key)) {
+          newObj[`smbls.${key}`] = uikit3[key];
+        } else {
+          newObj[key] = uikit3[key];
+        }
+      }
+    }
+    return newObj;
+  };
+  var prepareComponents2 = (context) => {
+    return context.components ? { ...UIkitWithPrefix2(), ...context.components } : UIkitWithPrefix2();
+  };
+  var prepareUtils2 = (context) => {
+    return {
+      ...utilImports_exports,
+      ...routerUtils2,
+      ...import_scratch2.scratchUtils,
+      ...context.utils,
+      ...context.snippets,
+      ...context.functions
+    };
+  };
+  var prepareMethods2 = (context) => {
+    return {
+      ...context.methods || {},
+      require: context.utils.require,
+      requireOnDemand: context.utils.requireOnDemand,
+      router: context.utils.router
+    };
+  };
+  var cachedDeps2 = {};
+  var prepareDependencies2 = async ({
+    dependencies,
+    dependenciesOnDemand,
+    document: document2,
+    preventCaching = false,
+    cdnProvider,
+    packageManager,
+    symbolsConfig
+  }) => {
+    if (!cdnProvider) {
+      cdnProvider = PACKAGE_MANAGER_TO_CDN2[packageManager] || getCdnProviderFromConfig2(symbolsConfig) || "esmsh";
+    }
+    if (!dependencies) return null;
+    let hasAny = false;
+    for (const _k in dependencies) {
+      hasAny = true;
+      break;
+    }
+    if (!hasAny) return null;
+    for (const dependency in dependencies) {
+      const version3 = dependencies[dependency];
+      if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
+        continue;
+      }
+      const random = (0, import_utils12.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
+      const url = getCDNUrl2(dependency, version3, cdnProvider) + random;
+      try {
+        if (cachedDeps2[dependency]) return;
+        cachedDeps2[dependency] = true;
+        await utilImports_exports.loadRemoteScript(url, { document: document2, type: "module" });
+      } catch (e) {
+        console.error(`Failed to load ${dependency} from ${cdnProvider}:`, e);
+        if (cdnProvider !== "symbols") {
+          try {
+            const fallbackUrl = getCDNUrl2(dependency, version3, "symbols") + random;
+            await utilImports_exports.loadRemoteScript(fallbackUrl, { document: document2 });
+            console.log(
+              `Successfully loaded ${dependency} from fallback (symbols.ls)`
+            );
+          } catch (fallbackError) {
+            console.error(
+              `Failed to load ${dependency} from fallback:`,
+              fallbackError
+            );
+          }
+        }
+      }
+    }
+    return dependencies;
+  };
+  var prepareRequire2 = async (packages, ctx) => {
+    const windowOpts = ctx.window || window;
+    const defaultProvider = ctx.cdnProvider || getCdnProviderFromConfig2(ctx.symbolsConfig) || "esmsh";
+    const initRequire = async (ctx2) => async (key, provider) => {
+      const windowOpts2 = ctx2.window || window;
+      const pkg = windowOpts2.packages[key];
+      if (typeof pkg === "function") return pkg();
+      return pkg;
+    };
+    const initRequireOnDemand = async (ctx2) => async (key, provider = defaultProvider) => {
+      const { dependenciesOnDemand } = ctx2;
+      const documentOpts = ctx2.document || document;
+      const windowOpts2 = ctx2.window || window;
+      if (!windowOpts2.packages[key]) {
+        const random = (0, import_utils12.isDevelopment)() ? `?${Math.random()}` : "";
+        if (dependenciesOnDemand && dependenciesOnDemand[key]) {
+          const version3 = dependenciesOnDemand[key];
+          const url = getCDNUrl2(key, version3, provider) + random;
+          try {
+            await ctx2.utils.loadRemoteScript(url, {
+              window: windowOpts2,
+              document: documentOpts
+            });
+          } catch (e) {
+            console.error(`Failed to load ${key} from ${provider}:`, e);
+            if (provider !== "symbols") {
+              const fallbackUrl = getCDNUrl2(key, version3, "symbols") + random;
+              await ctx2.utils.loadRemoteScript(fallbackUrl, {
+                window: windowOpts2,
+                document: documentOpts
+              });
+            }
+          }
+        } else {
+          const url = getCDNUrl2(key, "latest", provider) + random;
+          try {
+            await ctx2.utils.loadRemoteScript(url, {
+              window: windowOpts2,
+              document: documentOpts
+            });
+          } catch (e) {
+            console.error(`Failed to load ${key} from ${provider}:`, e);
+            if (provider !== "symbols") {
+              const fallbackUrl = getCDNUrl2(key, "latest", "symbols") + random;
+              await ctx2.utils.loadRemoteScript(fallbackUrl, {
+                window: windowOpts2,
+                document: documentOpts
+              });
+            }
+          }
+          windowOpts2.packages[key] = "loadedOnDeman";
+        }
+      }
+      return await windowOpts2.require(key, provider);
+    };
+    if (windowOpts.packages) {
+      windowOpts.packages = (0, import_utils12.merge)(windowOpts.packages, packages);
+    } else {
+      windowOpts.packages = packages;
+    }
+    if (!windowOpts.require) {
+      ctx.utils.require = await initRequire(ctx);
+      windowOpts.require = ctx.utils.require;
+    }
+    if (!windowOpts.requireOnDemand) {
+      ctx.utils.requireOnDemand = await initRequireOnDemand(ctx);
+      windowOpts.requireOnDemand = ctx.utils.requireOnDemand;
+    }
+  };
+  var prepareDesignSystem2 = (key, context) => {
+    const [scratcDesignhSystem, emotion, registry] = (0, import_emotion4.initEmotion)(key, context);
+    return [scratcDesignhSystem, emotion, registry];
+  };
+  var prepareState2 = (app, context) => {
+    const state = {};
+    if (context.state) utilImports_exports.deepMerge(state, context.state);
+    if (app && app.state) (0, import_utils12.deepMerge)(state, app.state);
+    state.isRootState = true;
+    return (0, import_utils12.deepClone)(state);
+  };
+  var preparePages2 = (app, context) => {
+    if ((0, import_utils12.isObject)(app.routes) && (0, import_utils12.isObject)(context.pages)) {
+      (0, import_utils12.merge)(app.routes, context.pages);
+    }
+    const pages = app.routes || context.pages || {};
+    for (const v in pages) {
+      if (v.charCodeAt(0) === 47) continue;
+      const index = v === "index" ? "" : v;
+      pages["/" + index] = pages[v];
+      delete pages[v];
+    }
+    return pages;
+  };
+  var prepareSharedLibs2 = (context) => {
+    const sharedLibraries = context.sharedLibraries;
+    for (let i = 0; i < sharedLibraries.length; i++) {
+      const sharedLib = sharedLibraries[i];
+      if (context.type === "template") {
+        overwriteShallow(context.designSystem, sharedLib.designSystem);
+        (0, import_utils12.deepMerge)(context, sharedLib, ["designSystem"], 1);
+      } else {
+        (0, import_utils12.deepMerge)(context, sharedLib, [], 1);
+      }
+    }
+  };
+
+  // src/createDomql.js
+  var prepareContext2 = async (app, context = {}) => {
+    const key = context.key = context.key || ((0, import_utils13.isString)(app) ? app : "smblsapp");
+    context.define = context.define || defaultDefine2;
+    context.cssPropsRegistry = import_css_in_props2.CSS_PROPS_REGISTRY;
+    context.window = prepareWindow2(context);
+    if (context.sharedLibraries && context.sharedLibraries.length) {
+      prepareSharedLibs2(context);
+    }
+    const [scratcDesignSystem, emotion, registry] = prepareDesignSystem2(
+      key,
+      context
+    );
+    context.designSystem = scratcDesignSystem;
+    context.registry = registry;
+    context.emotion = emotion;
+    const state = prepareState2(app, context);
+    context.state = state;
+    context.pages = preparePages2(app, context);
+    context.components = prepareComponents2(context);
+    context.utils = prepareUtils2(context);
+    if (PACKAGE_MANAGER_TO_CDN2[context.packageManager]) {
+      context.dependencies = await prepareDependencies2(context);
+    }
+    context.methods = prepareMethods2(context);
+    context.routerOptions = initRouter2(app, context);
+    context.defaultExtends = [uikit4.Box];
+    context.snippets = context.snippets || {};
+    context.functions = context.functions || {};
+    return context;
+  };
+  var createDomqlElement2 = async (app, ctx) => {
+    if (!(0, import_utils13.isObject)(ctx)) ctx = {};
+    if ((0, import_utils13.isNode)(app)) {
+      app = {};
+      ctx.parent = app;
+    } else if ((0, import_utils13.isString)(app)) {
+      app = {};
+      ctx.key = app;
+    } else if (!(0, import_utils13.isObject)(app)) {
+      app = {};
+    }
+    await prepareContext2(app, ctx);
+    app.extends = initializeExtend2(app, ctx);
+    app.routes = ctx.pages;
+    app.state = ctx.state;
+    app.context = ctx;
+    app.data = app.data || {};
+    app.data.frameListeners = (0, import_element2.initAnimationFrame)(ctx);
+    await prepareRequire2(
+      {
+        functions: ctx.functions,
+        utils: ctx.utils,
+        snippets: ctx.snippets,
+        ...ctx.files
+      },
+      ctx
+    );
+    initializeSync2(app, ctx);
+    initializeNotifications2(app, ctx);
+    const parentNode = ctx.parent || ctx.document.body;
+    const domqlCreate = import_domql2.default.default && import_domql2.default.default.create || import_domql2.default.create;
+    const smblsApp = await domqlCreate(app, parentNode, ctx.key, {
+      verbose: ctx.verbose,
+      ...ctx.domqlOptions
+    });
+    return smblsApp;
+  };
+
+  // src/index.js
+  var mergeWithLocalFile4 = (options, optionsExternalFile) => (0, import_utils14.deepMerge)(
+    options,
+    (0, import_utils14.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic4.default || {}
+  );
+  var create2 = (App, options = options_default2, optionsExternalFile) => {
+    const redefinedOptions = {
+      ...options_default2,
+      ...mergeWithLocalFile4(options, optionsExternalFile)
+    };
+    const domqlApp = createDomqlElement2(App, redefinedOptions).then((App2) => {
+      onpopstateRouter2(App2, redefinedOptions);
+      if (redefinedOptions.on && redefinedOptions.on.create)
+        redefinedOptions.on.create(
+          domqlApp,
+          domqlApp.state,
+          domqlApp.context,
+          redefinedOptions
+        );
+    });
+    return domqlApp;
+  };
+  var createAsync2 = (App, options = options_default2, optionsExternalFile) => {
+    const domqlApp = create2(App, options, optionsExternalFile);
+    const redefinedOptions = {
+      ...options_default2,
+      ...mergeWithLocalFile4(options, optionsExternalFile)
+    };
+    const key = redefinedOptions.key;
+    fetchAsync2(domqlApp, key, { utils: utilImports_exports, ...redefinedOptions });
+    return domqlApp;
+  };
+  var createSync2 = async (App, options = options_default2, optionsExternalFile) => {
+    const redefinedOptions = {
+      ...options_default2,
+      ...mergeWithLocalFile4(options, optionsExternalFile)
+    };
+    const key = options.key;
+    await fetchSync2(key, redefinedOptions);
+    const domqlApp = await createDomqlElement2(App, redefinedOptions);
+    if (redefinedOptions.on && redefinedOptions.on.create)
+      await redefinedOptions.on.create(
+        domqlApp,
+        domqlApp.state,
+        domqlApp.context,
+        redefinedOptions
+      );
+    return domqlApp;
+  };
+  var createSkeleton2 = (App = {}, options = options_default2, optionsExternalFile) => {
+    return create2(
+      {
+        deps: { isUndefined: import_utils14.isUndefined },
         ...App
       },
-      (0, import_utils7.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
+      (0, import_utils14.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
       optionsExternalFile
     );
   };

package/dynamic.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smbls",
-  "version": "3.4.3",
+  "version": "3.4.5",
   "license": "MIT",
   "repository": "https://github.com/symbo-ls/smbls",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
@@ -24,28 +24,29 @@
     "bin",
     "dist",
     "*.js",
+    "*.json",
     "src"
   ],
   "dependencies": {
-    "@symbo.ls/emotion": "^3.4.3",
-    "@domql/report": "^3.4.3",
-    "@domql/router": "^3.4.3",
-    "@domql/utils": "^3.4.3",
-    "@symbo.ls/cli": "^3.4.3",
-    "@symbo.ls/default-config": "^3.4.3",
-    "@symbo.ls/fetch": "^3.4.3",
-    "@symbo.ls/scratch": "^3.4.3",
-    "@symbo.ls/sync": "^3.4.3",
-    "@symbo.ls/uikit": "^3.4.3",
-    "@symbo.ls/smbls-utils": "^3.4.3",
-    "attrs-in-props": "^3.4.3",
-    "css-in-props": "^3.4.3",
-    "domql": "^3.4.3"
+    "@symbo.ls/emotion": "^3.4.5",
+    "@domql/report": "^3.4.5",
+    "@domql/router": "^3.4.5",
+    "@domql/utils": "^3.4.5",
+    "@symbo.ls/cli": "^3.4.5",
+    "@symbo.ls/default-config": "^3.4.5",
+    "@symbo.ls/fetch": "^3.4.5",
+    "@symbo.ls/scratch": "^3.4.5",
+    "@symbo.ls/sync": "^3.4.5",
+    "@symbo.ls/uikit": "^3.4.5",
+    "@symbo.ls/smbls-utils": "^3.4.5",
+    "attrs-in-props": "^3.4.5",
+    "css-in-props": "^3.4.5",
+    "domql": "^3.4.5"
   },
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild *.js src/*.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild *.js src/*.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV && cp dynamic.json dist/esm/dynamic.json && node -e \"const p=require('./package.json');require('fs').writeFileSync('dist/esm/package.json',JSON.stringify({name:p.name,version:p.version}));\"",
     "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild *.js src/*.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
     "build": "node ../../build/build.js",
     "prepublish": "npm run build && npm run copy:package:cjs",