@mantou/gem 1.7.8 → 1.7.10

package/dist/gem.es.js

@@ -874,7 +874,11 @@ function addMicrotaskToStack(func) {
 }
 function absoluteLocation(currentPath = "", relativePath = "") {
   const { pathname, search, hash } = new URL(relativePath, location.origin + currentPath);
-  return pathname + search + hash;
+  return pathname + search + decodeURIComponent(hash);
+}
+function addListener(target, type, listener, options) {
+  target.addEventListener(type, listener, options);
+  return () => target.removeEventListener(type, listener, options);
 }
 class LinkedList extends EventTarget {
   constructor() {
@@ -1049,12 +1053,10 @@ function createCSSSheet(rules, mediaQuery2 = "") {
   sheet[SheetToken] = styleSheet;
   return sheet;
 }
-function randomStr(number = 5, origin = "0123456789abcdefghijklmnopqrstuvwxyz") {
-  const len = origin.length;
-  let str = "";
-  for (let i = 0; i < number; i++) {
-    str += origin[Math.floor(Math.random() * len)];
-  }
+function randomStr(len = 5) {
+  const str = Math.random().toString(36).slice(2).slice(0, len);
+  if (str.length < len)
+    return str + randomStr(len - str.length);
   return str;
 }
 const nestingRuleRegExp = new RegExp("&.*{((.|\n)*)}", "g");
@@ -1175,7 +1177,7 @@ function disconnect(store2, func) {
   const listeners = StoreListenerMap.get(store2);
   listeners == null ? void 0 : listeners.delete(func);
 }
-const version = "1.7.8";
+const version = "1.7.10";
 var VersionExports = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   version
@@ -1390,7 +1392,7 @@ var __privateSet$1 = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var _final, _renderRoot, _internals, _isAppendReason, _isMounted, _isAsync, _effectList, _memoList, _unmountCallback, _exec, _execEffect, _execMemo, _initEffect, _render, _shouldUpdate, _updateCallback, _update, _updated, _disconnectStore, _connectedCallback, _filterEffect;
+var _final, _renderRoot, _internals, _isAppendReason, _isMounted, _isAsync, _effectList, _memoList, _unmountCallback, _exec, _execEffect, _execMemo, _initEffect, _render, _shouldUpdate, _updateCallback, _update, _updated, _disconnectStore, _connectedCallback, _clearEffect;
 function emptyFunction() {
 }
 function execCallback(fun) {
@@ -1411,7 +1413,7 @@ const constructorSymbol = Symbol("constructor");
 const initSymbol = Symbol("init");
 const updateSymbol = Symbol("update");
 const _GemElement = class extends HTMLElement {
-  constructor({ isAsync, isLight, delegatesFocus, slotAssignment } = {}) {
+  constructor(options = {}) {
     super();
     __privateAdd$1(this, _renderRoot, void 0);
     __privateAdd$1(this, _internals, void 0);
@@ -1481,8 +1483,8 @@ const _GemElement = class extends HTMLElement {
     });
     __privateAdd$1(this, _render, () => {
       __privateGet$1(this, _execMemo).call(this);
-      const isLight2 = __privateGet$1(this, _renderRoot) === this;
-      const temp = this.render ? this.render() : isLight2 ? void 0 : html`<slot></slot>`;
+      const isLight = __privateGet$1(this, _renderRoot) === this;
+      const temp = this.render ? this.render() : isLight ? void 0 : html`<slot></slot>`;
       if (temp === void 0)
         return;
       render(temp, __privateGet$1(this, _renderRoot));
@@ -1530,9 +1532,12 @@ const _GemElement = class extends HTMLElement {
         throw new GemError(`not allow current root type`);
       }
     });
-    __privateAdd$1(this, _filterEffect, (e) => {
-      e.initialized = false;
-      return e.inConstructor;
+    __privateAdd$1(this, _clearEffect, (list) => {
+      return list == null ? void 0 : list.filter((e) => {
+        execCallback(e.preCallback);
+        e.initialized = false;
+        return e.inConstructor;
+      });
     });
     addMicrotask(() => Reflect.set(this, initSymbol, false));
     Reflect.set(this, constructorSymbol, true);
@@ -1542,8 +1547,29 @@ const _GemElement = class extends HTMLElement {
         addMicrotask(__privateGet$1(this, _update));
       }
     });
-    __privateSet$1(this, _isAsync, isAsync);
-    __privateSet$1(this, _renderRoot, isLight ? this : this.attachShadow({ mode: "open", delegatesFocus, slotAssignment }));
+    __privateSet$1(this, _isAsync, options.isAsync);
+    __privateSet$1(this, _renderRoot, options.isLight ? this : this.attachShadow({
+      mode: options.mode || "open",
+      delegatesFocus: options.delegatesFocus,
+      slotAssignment: options.slotAssignment
+    }));
+    let hasInitTabIndex;
+    this.effect(
+      ([disabled = false]) => {
+        if (hasInitTabIndex === void 0)
+          hasInitTabIndex = this.hasAttribute("tabindex");
+        this.internals.ariaDisabled = String(disabled);
+        if (options.focusable && !hasInitTabIndex) {
+          this.tabIndex = -Number(disabled);
+        }
+        if ((options.focusable || options.delegatesFocus) && disabled) {
+          return addListener(this, "click", (e) => e.isTrusted && e.stopImmediatePropagation(), {
+            capture: true
+          });
+        }
+      },
+      () => [Reflect.get(this, "disabled")]
+    );
     const { adoptedStyleSheets } = new.target;
     if (adoptedStyleSheets) {
       const sheets = adoptedStyleSheets.map((item) => item[SheetToken] || item);
@@ -1617,7 +1643,7 @@ const _GemElement = class extends HTMLElement {
     return __privateGet$1(_GemElement, _final);
   }
   disconnectedCallback() {
-    var _a2, _b2, _c, _d, _e;
+    var _a2, _b2;
     if (this.isConnected) {
       __privateSet$1(this, _isAppendReason, true);
       return;
@@ -1626,9 +1652,8 @@ const _GemElement = class extends HTMLElement {
     (_a2 = __privateGet$1(this, _disconnectStore)) == null ? void 0 : _a2.forEach((disconnect2) => disconnect2());
     execCallback(__privateGet$1(this, _unmountCallback));
     (_b2 = this.unmounted) == null ? void 0 : _b2.call(this);
-    (_c = __privateGet$1(this, _effectList)) == null ? void 0 : _c.forEach(({ preCallback }) => execCallback(preCallback));
-    __privateSet$1(this, _effectList, (_d = __privateGet$1(this, _effectList)) == null ? void 0 : _d.filter(__privateGet$1(this, _filterEffect)));
-    __privateSet$1(this, _memoList, (_e = __privateGet$1(this, _memoList)) == null ? void 0 : _e.filter(__privateGet$1(this, _filterEffect)));
+    __privateSet$1(this, _effectList, __privateGet$1(this, _clearEffect).call(this, __privateGet$1(this, _effectList)));
+    __privateSet$1(this, _memoList, __privateGet$1(this, _clearEffect).call(this, __privateGet$1(this, _memoList)));
     return __privateGet$1(_GemElement, _final);
   }
 };
@@ -1653,7 +1678,7 @@ _update = /* @__PURE__ */ new WeakMap();
 _updated = /* @__PURE__ */ new WeakMap();
 _disconnectStore = /* @__PURE__ */ new WeakMap();
 _connectedCallback = /* @__PURE__ */ new WeakMap();
-_filterEffect = /* @__PURE__ */ new WeakMap();
+_clearEffect = /* @__PURE__ */ new WeakMap();
 __privateAdd$1(GemElement, _final, Symbol());
 const gemElementProxyMap = new PropProxyMap();
 function defineAttribute(target, prop, attr) {
@@ -1739,9 +1764,7 @@ function defineRef(target, prop, ref) {
             return ref;
           },
           get element() {
-            const gemReflects = [...ele.querySelectorAll("[data-gem-reflect]")].map(
-              (e) => e.target
-            );
+            const gemReflects = [...ele.querySelectorAll("[data-gem-reflect]")].map((e) => e.target);
             for (const e of [ele, ...gemReflects]) {
               const result = e.querySelector(`[ref=${ref}]`);
               if (result)
@@ -1907,14 +1930,20 @@ function getInternalPath(urlBarPath) {
     return "/";
   return urlBarPath.replace(new RegExp(`^${gemHistory.basePath}/`), "/");
 }
+function dispatchBeforeChangeEvent() {
+  gemHistory.dispatchEvent(new CustomEvent("beforechange"));
+}
 function normalizeParams(params) {
-  const current = paramsMap.get(store.$key) || {};
+  var _a2, _b2;
+  const current = paramsMap.get(store.$key) || { path: getInternalPath(location.pathname), query: new QueryString() };
   const path = params.path ? absoluteLocation(current.path, params.path) : getInternalPath(location.pathname);
-  const query = new QueryString(params.query || (params.path ? "" : location.search));
-  const pathChanged = params.path && params.path !== current.path || params.query && String(params.query) !== String(current.query);
-  const title = params.title || (pathChanged ? "" : document.title);
+  const newQueryObject = new QueryString((_a2 = params.query) != null ? _a2 : params.path ? "" : location.search);
+  const queryChanged = String(newQueryObject) !== String(current.query);
+  const query = queryChanged ? newQueryObject : current.query;
+  const urlChanged = path !== current.path || queryChanged;
+  const title = params.title || (urlChanged ? "" : document.title);
   const statusChanged = params.close || params.data || params.open || params.shouldClose;
-  const hash = params.hash || (!pathChanged && statusChanged ? decodeURIComponent(location.hash) : "");
+  const hash = decodeURIComponent((_b2 = params.hash) != null ? _b2 : !urlChanged && statusChanged ? location.hash : "");
   return { ...params, title, path, query, hash };
 }
 function updateHistory(p, native) {
@@ -1930,6 +1959,7 @@ function updateHistory(p, native) {
     ...data
   };
   paramsMap.set(state2.$key, params);
+  dispatchBeforeChangeEvent();
   cleanObject(store);
   updateHistoryStore(state2);
   const url = getUrlBarPath(path) + new QueryString(query) + hash;
@@ -1948,6 +1978,7 @@ function updateHistoryByNative(data, title, originUrl, native) {
   const { pathname, search, hash } = new URL(originUrl, location.origin + location.pathname);
   const params = normalizeParams({ path: pathname, query: new QueryString(search), hash, title, data });
   paramsMap.set(state2.$key, params);
+  dispatchBeforeChangeEvent();
   cleanObject(store);
   updateHistoryStore(state2);
   const url = getUrlBarPath(pathname) + params.query + hash;
@@ -1959,10 +1990,13 @@ function updateHistoryByNative(data, title, originUrl, native) {
 const [gemBasePathStore, updateBasePathStore] = useStore({
   basePath: ""
 });
-class GemHistory {
+class GemHistory extends EventTarget {
   get store() {
     return store;
   }
+  get currentKey() {
+    return store.$key;
+  }
   get basePath() {
     return gemBasePathStore.basePath;
   }
@@ -2012,7 +2046,7 @@ if (!window._GEMHISTORY) {
   };
   window.addEventListener("hashchange", ({ isTrusted }) => {
     if (isTrusted) {
-      gemHistory.replace({ hash: decodeURIComponent(location.hash) });
+      gemHistory.replace({ hash: location.hash });
     }
   });
   if (!nativeHistory.state) {
@@ -2059,7 +2093,7 @@ if (!window._GEMHISTORY) {
       paramsMap.set(newState.$key, {
         path: pathname,
         query: new QueryString(search),
-        hash,
+        hash: decodeURIComponent(hash),
         title: newState.$title,
         data: newState
       });
@@ -2086,6 +2120,7 @@ if (!window._GEMHISTORY) {
         }
       }
     }
+    dispatchBeforeChangeEvent();
     cleanObject(store);
     updateHistoryStore(newState);
   });
@@ -2120,19 +2155,18 @@ var __privateSet2 = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var _lastLoader, _updateLocationStore, _setContent;
+var _lastLoader, _scrollContainer, scrollContainer_get, _updateLocationStore, _updateScrollContainerPosition, _setContent;
+const UNNAMED_PARAM_PREFIX = "_";
 class ParamsRegExp extends RegExp {
   constructor(pattern) {
-    const namePosition = {};
     let i = 0;
     super(
-      `^${pattern.replace(/:([^/$]+)/g, (_m, name) => {
-        namePosition[name] = i++;
-        return `([^/]+)`;
-      }).replace("*", ".*")}$`,
-      "i"
+      `^${pattern.replace(/((:[^/$]+)|(\*))/g, (_m, name) => {
+        if (name === "*")
+          return `(?<${UNNAMED_PARAM_PREFIX}${i++}>.*)`;
+        return `(?<${name.slice(1)}>[^/]+)`;
+      })}$`
     );
-    this.namePosition = namePosition;
   }
 }
 function matchPath(pattern, path) {
@@ -2148,9 +2182,9 @@ function matchPath(pattern, path) {
   if (!matchResult)
     return null;
   const params = {};
-  if (matchResult) {
-    Object.keys(reg.namePosition).forEach((name) => {
-      params[name] = matchResult[reg.namePosition[name] + 1];
+  if (matchResult.groups) {
+    Object.entries(matchResult.groups).forEach(([key2, value]) => {
+      params[key2.startsWith(UNNAMED_PARAM_PREFIX) ? key2.slice(1) : key2] = value;
     });
   }
   return params;
@@ -2172,87 +2206,120 @@ function createHistoryParams(route, options) {
     ...options
   };
 }
-let GemRouteElement = class extends GemElement {
+const scrollPositionMap = /* @__PURE__ */ new Map();
+const _GemRouteElement = class extends GemElement {
   constructor({ isLight, routes } = {}) {
     super({ isLight });
+    __privateAdd2(this, _scrollContainer);
+    this.trigger = history;
     this.currentParams = {};
     __privateAdd2(this, _lastLoader, void 0);
     this.state = {
       content: void 0
     };
     __privateAdd2(this, _updateLocationStore, () => {
-      if (this.locationStore) {
-        const { path, query, data } = history.getParams();
-        updateStore(this.locationStore, {
-          path,
-          params: this.currentParams,
-          query,
-          data
-        });
+      if (!this.locationStore)
+        return;
+      const { path, query, hash, data } = history.getParams();
+      updateStore(this.locationStore, {
+        path,
+        params: this.currentParams,
+        query,
+        hash,
+        data
+      });
+    });
+    __privateAdd2(this, _updateScrollContainerPosition, () => {
+      if (!__privateGet2(this, _scrollContainer, scrollContainer_get))
+        return;
+      const scrollTop = scrollPositionMap.get(history.currentKey);
+      if (scrollTop) {
+        __privateGet2(this, _scrollContainer, scrollContainer_get).scroll(0, scrollTop);
+      } else if (this.scrollIgnoreHash || !history.getParams().hash) {
+        __privateGet2(this, _scrollContainer, scrollContainer_get).scroll(0, 0);
       }
     });
     __privateAdd2(this, _setContent, (route, params, content) => {
+      this.beforeroutechange(route);
       __privateSet2(this, _lastLoader, void 0);
       this.currentRoute = route;
       this.currentParams = params;
-      const changeContent = () => {
+      const changeContent = async () => {
         this.setState({ content });
-        this.routechange(this.currentRoute);
         __privateGet2(this, _updateLocationStore).call(this);
+        await Promise.resolve();
+        __privateGet2(this, _updateScrollContainerPosition).call(this);
+        this.routechange(this.currentRoute);
       };
       if (this.transition && "startViewTransition" in document) {
-        document.startViewTransition(() => {
-          changeContent();
-          return Promise.resolve();
-        });
+        document.startViewTransition(() => changeContent());
       } else {
         changeContent();
       }
     });
+    this.update = () => {
+      const { route, params = {} } = _GemRouteElement.findRoute(this.routes, this.trigger.getParams().path);
+      const { redirect, content, getContent } = route || {};
+      if (redirect) {
+        this.trigger.replace({
+          path: createPath({ pattern: redirect }, { params })
+        });
+        return;
+      }
+      if (this.trigger === history) {
+        updateStore(titleStore, { title: route == null ? void 0 : route.title });
+      }
+      const contentOrLoader = content || (getContent == null ? void 0 : getContent(params));
+      this.loading(route);
+      if (contentOrLoader instanceof Promise) {
+        __privateSet2(this, _lastLoader, contentOrLoader);
+        const isSomeLoader = () => __privateGet2(this, _lastLoader) === contentOrLoader;
+        contentOrLoader.then((content2) => {
+          if (isSomeLoader())
+            __privateGet2(this, _setContent).call(this, route, params, content2);
+        }).catch((err) => {
+          if (isSomeLoader())
+            this.error(err);
+        });
+        return;
+      }
+      __privateGet2(this, _setContent).call(this, route, params, contentOrLoader);
+    };
     this.routes = routes;
   }
   mounted() {
+    this.effect(
+      () => {
+        if (!__privateGet2(this, _scrollContainer, scrollContainer_get))
+          return;
+        return addListener(
+          history,
+          "beforechange",
+          () => scrollPositionMap.set(history.currentKey, __privateGet2(this, _scrollContainer, scrollContainer_get).scrollTop)
+        );
+      },
+      () => [this.scrollContainer]
+    );
+    this.effect(
+      () => connect(this.trigger.store, () => this.setState({})),
+      () => [this.trigger]
+    );
     this.effect(
       ([key2, path], old) => {
         if (old && key2 === old[0] && path === old[1]) {
           __privateGet2(this, _updateLocationStore).call(this);
           return;
         }
-        const { route, params = {} } = GemRouteElement.findRoute(this.routes, path);
-        const { redirect, content, getContent } = route || {};
-        if (redirect) {
-          history.replace({ path: redirect });
-          return;
-        }
-        const title = route == null ? void 0 : route.title;
-        if (title)
-          updateStore(titleStore, { title });
-        const contentOrLoader = content || (getContent == null ? void 0 : getContent(params));
-        if (contentOrLoader instanceof Promise) {
-          this.loading(route);
-          __privateSet2(this, _lastLoader, contentOrLoader);
-          const isSomeLoader = () => __privateGet2(this, _lastLoader) === contentOrLoader;
-          contentOrLoader.then((content2) => {
-            if (isSomeLoader())
-              __privateGet2(this, _setContent).call(this, route, params, content2);
-          }).catch((err) => {
-            if (isSomeLoader())
-              this.error(err);
-          });
-          return;
-        }
-        __privateGet2(this, _setContent).call(this, route, params, contentOrLoader);
+        this.update();
       },
       () => {
-        const { path } = history.getParams();
-        return [this.key, path, location.search];
+        const { path, query, hash } = this.trigger.getParams();
+        return [this.key, path, query, hash];
       }
     );
   }
   shouldUpdate() {
-    if (this.inert)
-      return false;
-    return true;
+    return this.inert ? false : true;
   }
   render() {
     const { content } = this.state;
@@ -2269,12 +2336,18 @@ let GemRouteElement = class extends GemElement {
     `;
   }
 };
+let GemRouteElement = _GemRouteElement;
 _lastLoader = /* @__PURE__ */ new WeakMap();
+_scrollContainer = /* @__PURE__ */ new WeakSet();
+scrollContainer_get = function() {
+  return typeof this.scrollContainer === "function" ? this.scrollContainer() : this.scrollContainer;
+};
 _updateLocationStore = /* @__PURE__ */ new WeakMap();
+_updateScrollContainerPosition = /* @__PURE__ */ new WeakMap();
 _setContent = /* @__PURE__ */ new WeakMap();
 GemRouteElement.createLocationStore = () => {
-  const { path, query, data } = history.getParams();
-  return createStore({ path, query, data, params: {} });
+  const { path, query, hash, data } = history.getParams();
+  return createStore({ path, query, hash, data, params: {} });
 };
 GemRouteElement.findRoute = (target = [], path) => {
   let defaultRoute = null;
@@ -2310,16 +2383,25 @@ __decorateClass$6([
 ], GemRouteElement.prototype, "key", 2);
 __decorateClass$6([
   emitter
-], GemRouteElement.prototype, "routechange", 2);
+], GemRouteElement.prototype, "loading", 2);
 __decorateClass$6([
   emitter
-], GemRouteElement.prototype, "loading", 2);
+], GemRouteElement.prototype, "beforeroutechange", 2);
+__decorateClass$6([
+  emitter
+], GemRouteElement.prototype, "routechange", 2);
 __decorateClass$6([
   emitter
 ], GemRouteElement.prototype, "error", 2);
-GemRouteElement = __decorateClass$6([
-  connectStore(history.store)
-], GemRouteElement);
+__decorateClass$6([
+  property
+], GemRouteElement.prototype, "scrollContainer", 2);
+__decorateClass$6([
+  property
+], GemRouteElement.prototype, "scrollIgnoreHash", 2);
+__decorateClass$6([
+  property
+], GemRouteElement.prototype, "trigger", 2);
 class GemLightRouteElement extends GemRouteElement {
   constructor(options = {}) {
     super({ ...options, isLight: true });
@@ -2341,7 +2423,7 @@ function isExternal(path) {
 }
 let GemLinkElement = (_a = class extends GemElement {
   constructor() {
-    super();
+    super({ focusable: true });
     __privateAdd(this, _routeOptions);
     __privateAdd(this, _hint);
     __privateAdd(this, _onClick, void 0);
@@ -2387,7 +2469,12 @@ let GemLinkElement = (_a = class extends GemElement {
           title: this.docTitle
         });
       } else {
-        history.pushIgnoreCloseHandle({ path: this.path, query: this.query, hash: this.hash, title: this.docTitle });
+        history.pushIgnoreCloseHandle({
+          path: this.path,
+          query: this.query,
+          hash: this.hash,
+          title: this.docTitle
+        });
       }
     });
     __privateSet(this, _preventDefault, (e) => {
@@ -2397,7 +2484,6 @@ let GemLinkElement = (_a = class extends GemElement {
       const locationString = this.getLocationString();
       return isExternal(locationString) ? locationString : new URL(history.basePath + locationString, location.origin).toString();
     });
-    this.tabIndex = 0;
     this.addEventListener("click", __privateGet(this, _onClick));
   }
   render() {
@@ -2525,15 +2611,18 @@ var __decorateClass$4 = (decorators, target, key2, kind) => {
   return result;
 };
 const defaultTitle = document.title;
+let documentTitle = "";
+const setTitle = () => document.title = documentTitle;
 function setDocumentTitle(str, prefix = "", suffix = "") {
   const title = titleStore.title || str;
   if (title && title !== defaultTitle) {
     GemTitleElement.title = title;
-    document.title = prefix + GemTitleElement.title + suffix;
+    documentTitle = prefix + GemTitleElement.title + suffix;
   } else {
     GemTitleElement.title = defaultTitle;
-    document.title = GemTitleElement.title;
+    documentTitle = GemTitleElement.title;
   }
+  addMicrotask(setTitle);
 }
 connect(titleStore, setDocumentTitle);
 const PREFIX = `${defaultTitle} | `;
@@ -2549,6 +2638,7 @@ const _GemTitleElement = class extends GemElement {
     };
     new MutationObserver(() => this.update()).observe(this, {
       characterData: true,
+      childList: true,
       subtree: true
     });
   }
@@ -2693,22 +2783,43 @@ var __decorateClass$1 = (decorators, target, key2, kind) => {
     __defProp$1(target, key2, result);
   return result;
 };
+const START = "gem-reflect-start";
+const END = "gem-reflect-end";
+const createReflectFragmentTag = (tag) => new Comment(tag);
+const getReflectFragment = (startNode) => {
+  const result = [];
+  let node = startNode;
+  while (node) {
+    result.push(node);
+    if (node.nodeValue === END)
+      break;
+    node = node.nextSibling;
+  }
+  return result;
+};
 class GemReflectElement extends GemElement {
   constructor() {
     super({ isLight: true });
     this.target = document.head;
-    this.hidden = true;
-    this.dataset.gemReflect = "";
     this.effect(
       () => {
-        const childNodes = [...this.childNodes];
-        childNodes.forEach((node) => {
-          if (node instanceof HTMLElement) {
-            node.dataset.reflect = "";
-          }
-          this.target.append(node);
-        });
+        this.hidden = true;
+        this.dataset.gemReflect = "";
+      },
+      () => []
+    );
+    const startNode = createReflectFragmentTag(START);
+    const endNode = createReflectFragmentTag(END);
+    let childNodes;
+    this.effect(
+      () => {
+        if (!childNodes) {
+          [startNode, ...this.childNodes, endNode].forEach((node) => this.target.append(node));
+        } else {
+          childNodes.forEach((node) => this.target.append(node));
+        }
         return () => {
+          childNodes = getReflectFragment(startNode);
           childNodes.forEach((node) => node.remove());
         };
       },
@@ -2839,7 +2950,10 @@ let GemDialogBaseElement = (_b = class extends GemElement {
       setTimeout(this.close, 100);
       return final;
     };
-    this.inert = true;
+    this.effect(
+      () => this.inert = true,
+      () => []
+    );
     this.internals.role = "dialog";
     this.internals.ariaModal = "true";
   }
@@ -2896,6 +3010,21 @@ function useTheme(themeObj) {
   const theme = createTheme(themeObj);
   return [theme, (newThemeObj) => updateTheme(theme, newThemeObj)];
 }
+class Logger {
+  constructor(type) {
+    this.info = (...args) => {
+      console.log(`[${this._type}]:`, ...args);
+    };
+    this.warn = (...args) => {
+      console.warn(`[${this._type}]:`, ...args);
+    };
+    this.error = (...args) => {
+      console.error(`[${this._type}]:`, ...args);
+    };
+    this._type = type;
+  }
+}
+const logger = new Logger("GEM");
 const splitReg = /\$\d(?:<[^>]*>)?/;
 const matchReg = /\$(\d)(<([^>]*)>)?/g;
 const matchStrIndex = 3;
@@ -2920,6 +3049,10 @@ const _I18n = class {
     __privateAdd(this, _isMain);
     __privateAdd(this, _lang);
     this.cachePrefix = "gem-i18n";
+    this.replace = ({ path }) => {
+      this.setLanguage(path);
+    };
+    this.getParams = () => ({ path: this.currentLanguage });
     if (!options.resources[options.fallbackLanguage]) {
       throw new GemError("i18n: fallbackLanguage invalid");
     }
@@ -2968,7 +3101,7 @@ const _I18n = class {
     let pack;
     const data = this.resources[lang];
     if (!data) {
-      console.warn(`${this.cachePrefix}: not found \`${lang}\``);
+      logger.warn(`${this.cachePrefix}: not found \`${lang}\``);
       return this.resetLanguage();
     }
     if (typeof data === "string") {
@@ -3001,7 +3134,7 @@ const _I18n = class {
       pack = data;
     }
     this.resources[lang] = pack;
-    updateStore(this.store, {});
+    updateStore(this.store);
     if (lang !== this.currentLanguage) {
       __privateSet(this, _lang, lang, lang_set);
     }
@@ -3187,4 +3320,4 @@ const mediaQuery = {
     return match(this.WIDTHSCREEN);
   }
 };
-export { GemActiveLinkElement, GemDialogBaseElement, GemElement, GemError, GemLightRouteElement, GemLinkElement, GemReflectElement, GemRouteElement, GemTitleElement, GemUnsafeElement, GemUseElement, I18n, LinkedList, PREFIX, PropProxyMap, QueryString, SUFFIX, SVGTemplateResult, SheetToken, StoreListenerMap, TemplateResult, absoluteLocation, addMicrotask, addMicrotaskToStack, adoptedStyle, attribute, basePathStore, boolattribute, camelToKebabCase, classMap, cleanObject, connect, connectStore, createCSSSheet, createHistoryParams, createModalClass, createPath, createStore, createTheme, css, customElement, defaultReqInit, defineAttribute, defineCSSState, defineProperty, defineRef, del, directive, disconnect, emitter, exportPartsMap, get, getThemeProps, getThemeStore, globalemitter, guard, history, html, ifDefined, isArrayChange, kebabToCamelCase, matchPath, mediaQuery, nativeDefineElement, numattribute, objectMapToString, part, partMap, post, property, put, randomStr, raw, refobject, removeItems, render, repeat, request, rootElement, slot, splice, state, styleMap, styled, svg, titleStore, updateStore, updateTheme, useStore, useTheme, version };
+export { GemActiveLinkElement, GemDialogBaseElement, GemElement, GemError, GemLightRouteElement, GemLinkElement, GemReflectElement, GemRouteElement, GemTitleElement, GemUnsafeElement, GemUseElement, I18n, LinkedList, PREFIX, PropProxyMap, QueryString, SUFFIX, SVGTemplateResult, SheetToken, StoreListenerMap, TemplateResult, absoluteLocation, addListener, addMicrotask, addMicrotaskToStack, adoptedStyle, attribute, basePathStore, boolattribute, camelToKebabCase, classMap, cleanObject, connect, connectStore, createCSSSheet, createHistoryParams, createModalClass, createPath, createStore, createTheme, css, customElement, defaultReqInit, defineAttribute, defineCSSState, defineProperty, defineRef, del, directive, disconnect, emitter, exportPartsMap, get, getThemeProps, getThemeStore, globalemitter, guard, history, html, ifDefined, isArrayChange, kebabToCamelCase, matchPath, mediaQuery, nativeDefineElement, numattribute, objectMapToString, part, partMap, post, property, put, randomStr, raw, refobject, removeItems, render, repeat, request, rootElement, slot, splice, state, styleMap, styled, svg, titleStore, updateStore, updateTheme, useStore, useTheme, version };