@umamichi-ui/common-components 0.3.1 → 0.3.3

package/dist/menu/computeFloatingMenuGeometry.js

@@ -1,3 +1,21 @@
+function readUnconstrainedMenuHeight(menu) {
+  const previousMaxHeight = menu.style.maxHeight;
+  const previousOverflowY = menu.style.overflowY;
+  menu.style.maxHeight = "none";
+  menu.style.overflowY = "visible";
+  const height = menu.offsetHeight;
+  menu.style.maxHeight = previousMaxHeight;
+  menu.style.overflowY = previousOverflowY;
+  return height;
+}
+function resolveMaxHeight(available, minScrollHeight, vh, pad) {
+  const viewportCap = Math.max(0, vh - 2 * pad);
+  const usable = Math.max(0, Math.min(available, viewportCap));
+  if (usable > 0) {
+    return usable;
+  }
+  return Math.min(minScrollHeight, viewportCap);
+}
 function computeFloatingMenuGeometry(trigger, menu, options = {}) {
   const pad = options.pad ?? 8;
   const gap = options.gap ?? 4;
@@ -6,23 +24,34 @@ function computeFloatingMenuGeometry(trigger, menu, options = {}) {
   const vw = window.innerWidth;
   const vh = window.innerHeight;
   const menuWidth = menu.offsetWidth;
-  const menuHeight = menu.offsetHeight;
+  const contentHeight = readUnconstrainedMenuHeight(menu);
   let left = rect.right - menuWidth;
   if (left < pad) {
     left = rect.left;
   }
   left = Math.max(pad, Math.min(left, vw - menuWidth - pad));
-  let top = rect.bottom + gap;
-  let maxHeight;
-  if (top + menuHeight > vh - pad) {
-    const topIfAbove = rect.top - gap - menuHeight;
-    if (topIfAbove >= pad) {
-      top = topIfAbove;
-    } else {
-      maxHeight = Math.max(minScrollHeight, vh - pad - top);
-    }
+  const topBelow = rect.bottom + gap;
+  const spaceBelow = vh - pad - topBelow;
+  const spaceAbove = rect.top - gap - pad;
+  if (contentHeight <= spaceBelow) {
+    return { top: topBelow, left };
+  }
+  if (contentHeight <= spaceAbove) {
+    return { top: rect.top - gap - contentHeight, left };
+  }
+  if (spaceBelow >= spaceAbove) {
+    return {
+      top: topBelow,
+      left,
+      maxHeight: resolveMaxHeight(spaceBelow, minScrollHeight, vh, pad)
+    };
   }
-  return { top, left, maxHeight };
+  const maxHeight = resolveMaxHeight(spaceAbove, minScrollHeight, vh, pad);
+  return {
+    top: Math.max(pad, rect.top - gap - maxHeight),
+    left,
+    maxHeight
+  };
 }
 export {
   computeFloatingMenuGeometry

package/dist/menu/computeFloatingMenuGeometry.js.map

@@ -1 +1 @@
-{"version":3,"file":"computeFloatingMenuGeometry.js","sources":["../../src/menu/computeFloatingMenuGeometry.ts"],"sourcesContent":["export type FloatingMenuGeometry = {\n  top: number;\n  left: number;\n  maxHeight?: number;\n};\n\nexport type ComputeFloatingMenuGeometryOptions = {\n  pad?: number;\n  gap?: number;\n  minScrollHeight?: number;\n};\n\nexport function computeFloatingMenuGeometry(\n  trigger: HTMLElement,\n  menu: HTMLElement,\n  options: ComputeFloatingMenuGeometryOptions = {},\n): FloatingMenuGeometry {\n  const pad = options.pad ?? 8;\n  const gap = options.gap ?? 4;\n  const minScrollHeight = options.minScrollHeight ?? 120;\n  const rect = trigger.getBoundingClientRect();\n  const vw = window.innerWidth;\n  const vh = window.innerHeight;\n  const menuWidth = menu.offsetWidth;\n  const menuHeight = menu.offsetHeight;\n\n  let left = rect.right - menuWidth;\n  if (left < pad) {\n    left = rect.left;\n  }\n  left = Math.max(pad, Math.min(left, vw - menuWidth - pad));\n\n  let top = rect.bottom + gap;\n  let maxHeight: number | undefined;\n  if (top + menuHeight > vh - pad) {\n    const topIfAbove = rect.top - gap - menuHeight;\n    if (topIfAbove >= pad) {\n      top = topIfAbove;\n    } else {\n      maxHeight = Math.max(minScrollHeight, vh - pad - top);\n    }\n  }\n  return { top, left, maxHeight };\n}\n"],"names":[],"mappings":"AAYO,SAAS,4BACd,SACA,MACA,UAA8C,CAAA,GACxB;AACtB,QAAM,MAAM,QAAQ,OAAO;AAC3B,QAAM,MAAM,QAAQ,OAAO;AAC3B,QAAM,kBAAkB,QAAQ,mBAAmB;AACnD,QAAM,OAAO,QAAQ,sBAAA;AACrB,QAAM,KAAK,OAAO;AAClB,QAAM,KAAK,OAAO;AAClB,QAAM,YAAY,KAAK;AACvB,QAAM,aAAa,KAAK;AAExB,MAAI,OAAO,KAAK,QAAQ;AACxB,MAAI,OAAO,KAAK;AACd,WAAO,KAAK;AAAA,EACd;AACA,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,MAAM,KAAK,YAAY,GAAG,CAAC;AAEzD,MAAI,MAAM,KAAK,SAAS;AACxB,MAAI;AACJ,MAAI,MAAM,aAAa,KAAK,KAAK;AAC/B,UAAM,aAAa,KAAK,MAAM,MAAM;AACpC,QAAI,cAAc,KAAK;AACrB,YAAM;AAAA,IACR,OAAO;AACL,kBAAY,KAAK,IAAI,iBAAiB,KAAK,MAAM,GAAG;AAAA,IACtD;AAAA,EACF;AACA,SAAO,EAAE,KAAK,MAAM,UAAA;AACtB;"}
+{"version":3,"file":"computeFloatingMenuGeometry.js","sources":["../../src/menu/computeFloatingMenuGeometry.ts"],"sourcesContent":["export type FloatingMenuGeometry = {\r\n  top: number;\r\n  left: number;\r\n  maxHeight?: number;\r\n};\r\n\r\nexport type ComputeFloatingMenuGeometryOptions = {\r\n  pad?: number;\r\n  gap?: number;\r\n  minScrollHeight?: number;\r\n};\r\n\r\n/** Read full content height even if the panel is currently height-constrained. */\r\nfunction readUnconstrainedMenuHeight(menu: HTMLElement): number {\r\n  const previousMaxHeight = menu.style.maxHeight;\r\n  const previousOverflowY = menu.style.overflowY;\r\n  menu.style.maxHeight = 'none';\r\n  menu.style.overflowY = 'visible';\r\n  const height = menu.offsetHeight;\r\n  menu.style.maxHeight = previousMaxHeight;\r\n  menu.style.overflowY = previousOverflowY;\r\n  return height;\r\n}\r\n\r\n/**\r\n * Cap scrollable panel height to the chosen side's available space (never past the viewport pad).\r\n * `minScrollHeight` is only used when available space collapses to ~0.\r\n */\r\nfunction resolveMaxHeight(available: number, minScrollHeight: number, vh: number, pad: number): number {\r\n  const viewportCap = Math.max(0, vh - 2 * pad);\r\n  const usable = Math.max(0, Math.min(available, viewportCap));\r\n  if (usable > 0) {\r\n    return usable;\r\n  }\r\n  return Math.min(minScrollHeight, viewportCap);\r\n}\r\n\r\nexport function computeFloatingMenuGeometry(\r\n  trigger: HTMLElement,\r\n  menu: HTMLElement,\r\n  options: ComputeFloatingMenuGeometryOptions = {},\r\n): FloatingMenuGeometry {\r\n  const pad = options.pad ?? 8;\r\n  const gap = options.gap ?? 4;\r\n  const minScrollHeight = options.minScrollHeight ?? 120;\r\n  const rect = trigger.getBoundingClientRect();\r\n  const vw = window.innerWidth;\r\n  const vh = window.innerHeight;\r\n  const menuWidth = menu.offsetWidth;\r\n  const contentHeight = readUnconstrainedMenuHeight(menu);\r\n\r\n  let left = rect.right - menuWidth;\r\n  if (left < pad) {\r\n    left = rect.left;\r\n  }\r\n  left = Math.max(pad, Math.min(left, vw - menuWidth - pad));\r\n\r\n  const topBelow = rect.bottom + gap;\r\n  const spaceBelow = vh - pad - topBelow;\r\n  const spaceAbove = rect.top - gap - pad;\r\n\r\n  if (contentHeight <= spaceBelow) {\r\n    return { top: topBelow, left };\r\n  }\r\n\r\n  if (contentHeight <= spaceAbove) {\r\n    return { top: rect.top - gap - contentHeight, left };\r\n  }\r\n\r\n  // Content taller than both sides — open toward the larger side and scroll inside.\r\n  if (spaceBelow >= spaceAbove) {\r\n    return {\r\n      top: topBelow,\r\n      left,\r\n      maxHeight: resolveMaxHeight(spaceBelow, minScrollHeight, vh, pad),\r\n    };\r\n  }\r\n\r\n  const maxHeight = resolveMaxHeight(spaceAbove, minScrollHeight, vh, pad);\r\n  return {\r\n    top: Math.max(pad, rect.top - gap - maxHeight),\r\n    left,\r\n    maxHeight,\r\n  };\r\n}\r\n"],"names":[],"mappings":"AAaA,SAAS,4BAA4B,MAA2B;AAC9D,QAAM,oBAAoB,KAAK,MAAM;AACrC,QAAM,oBAAoB,KAAK,MAAM;AACrC,OAAK,MAAM,YAAY;AACvB,OAAK,MAAM,YAAY;AACvB,QAAM,SAAS,KAAK;AACpB,OAAK,MAAM,YAAY;AACvB,OAAK,MAAM,YAAY;AACvB,SAAO;AACT;AAMA,SAAS,iBAAiB,WAAmB,iBAAyB,IAAY,KAAqB;AACrG,QAAM,cAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG;AAC5C,QAAM,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,WAAW,WAAW,CAAC;AAC3D,MAAI,SAAS,GAAG;AACd,WAAO;AAAA,EACT;AACA,SAAO,KAAK,IAAI,iBAAiB,WAAW;AAC9C;AAEO,SAAS,4BACd,SACA,MACA,UAA8C,CAAA,GACxB;AACtB,QAAM,MAAM,QAAQ,OAAO;AAC3B,QAAM,MAAM,QAAQ,OAAO;AAC3B,QAAM,kBAAkB,QAAQ,mBAAmB;AACnD,QAAM,OAAO,QAAQ,sBAAA;AACrB,QAAM,KAAK,OAAO;AAClB,QAAM,KAAK,OAAO;AAClB,QAAM,YAAY,KAAK;AACvB,QAAM,gBAAgB,4BAA4B,IAAI;AAEtD,MAAI,OAAO,KAAK,QAAQ;AACxB,MAAI,OAAO,KAAK;AACd,WAAO,KAAK;AAAA,EACd;AACA,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,MAAM,KAAK,YAAY,GAAG,CAAC;AAEzD,QAAM,WAAW,KAAK,SAAS;AAC/B,QAAM,aAAa,KAAK,MAAM;AAC9B,QAAM,aAAa,KAAK,MAAM,MAAM;AAEpC,MAAI,iBAAiB,YAAY;AAC/B,WAAO,EAAE,KAAK,UAAU,KAAA;AAAA,EAC1B;AAEA,MAAI,iBAAiB,YAAY;AAC/B,WAAO,EAAE,KAAK,KAAK,MAAM,MAAM,eAAe,KAAA;AAAA,EAChD;AAGA,MAAI,cAAc,YAAY;AAC5B,WAAO;AAAA,MACL,KAAK;AAAA,MACL;AAAA,MACA,WAAW,iBAAiB,YAAY,iBAAiB,IAAI,GAAG;AAAA,IAAA;AAAA,EAEpE;AAEA,QAAM,YAAY,iBAAiB,YAAY,iBAAiB,IAAI,GAAG;AACvE,SAAO;AAAA,IACL,KAAK,KAAK,IAAI,KAAK,KAAK,MAAM,MAAM,SAAS;AAAA,IAC7C;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/menu/useFloatingMenuGeometry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingMenuGeometry.d.ts","sourceRoot":"","sources":["../../src/menu/useFloatingMenuGeometry.ts"],"names":[],"mappings":"AACA,OAAO,EAA+B,KAAK,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAEvG,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,WAAW,EACX,kBAAkB,GACnB,EAAE,8BAA8B;;;;EA8ChC"}
+{"version":3,"file":"useFloatingMenuGeometry.d.ts","sourceRoot":"","sources":["../../src/menu/useFloatingMenuGeometry.ts"],"names":[],"mappings":"AACA,OAAO,EAA+B,KAAK,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAEvG,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,WAAW,EACX,kBAAkB,GACnB,EAAE,8BAA8B;;;;EAwDhC"}

package/dist/menu/useFloatingMenuGeometry.js

@@ -21,6 +21,14 @@ function useFloatingMenuGeometry({
       }
       setMenuGeometry(computeFloatingMenuGeometry(trigger, menu));
     };
+    const onScroll = (event) => {
+      const menu = menuPanelRef.current;
+      const target = event.target;
+      if (menu && target instanceof Node && menu.contains(target)) {
+        return;
+      }
+      update();
+    };
     update();
     const scrollRoots = [];
     if (scrollRootSelector) {
@@ -30,15 +38,15 @@ function useFloatingMenuGeometry({
       }
     }
     window.addEventListener("resize", update);
-    window.addEventListener("scroll", update, true);
+    window.addEventListener("scroll", onScroll, true);
     for (const root of scrollRoots) {
-      root.addEventListener("scroll", update, { passive: true });
+      root.addEventListener("scroll", onScroll, { passive: true });
     }
     return () => {
       window.removeEventListener("resize", update);
-      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("scroll", onScroll, true);
       for (const root of scrollRoots) {
-        root.removeEventListener("scroll", update);
+        root.removeEventListener("scroll", onScroll);
       }
     };
   }, [menuOpen, menuMounted, scrollRootSelector]);

package/dist/menu/useFloatingMenuGeometry.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingMenuGeometry.js","sources":["../../src/menu/useFloatingMenuGeometry.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { computeFloatingMenuGeometry, type FloatingMenuGeometry } from './computeFloatingMenuGeometry';\n\nexport type UseFloatingMenuGeometryOptions = {\n  menuOpen: boolean;\n  menuMounted: boolean;\n  /** 额外监听 scroll 的容器选择器（如 `.app-main`） */\n  scrollRootSelector?: string;\n};\n\nexport function useFloatingMenuGeometry({\n  menuOpen,\n  menuMounted,\n  scrollRootSelector,\n}: UseFloatingMenuGeometryOptions) {\n  const menuPanelRef = useRef<HTMLUListElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const [menuGeometry, setMenuGeometry] = useState<FloatingMenuGeometry | null>(null);\n\n  useLayoutEffect(() => {\n    if (!menuOpen || !menuMounted) {\n      setMenuGeometry(null);\n      return;\n    }\n\n    const update = () => {\n      const trigger = triggerRef.current;\n      const menu = menuPanelRef.current;\n      if (!trigger || !menu) {\n        return;\n      }\n      setMenuGeometry(computeFloatingMenuGeometry(trigger, menu));\n    };\n\n    update();\n\n    const scrollRoots: HTMLElement[] = [];\n    if (scrollRootSelector) {\n      const root = document.querySelector<HTMLElement>(scrollRootSelector);\n      if (root) {\n        scrollRoots.push(root);\n      }\n    }\n\n    window.addEventListener('resize', update);\n    window.addEventListener('scroll', update, true);\n    for (const root of scrollRoots) {\n      root.addEventListener('scroll', update, { passive: true });\n    }\n\n    return () => {\n      window.removeEventListener('resize', update);\n      window.removeEventListener('scroll', update, true);\n      for (const root of scrollRoots) {\n        root.removeEventListener('scroll', update);\n      }\n    };\n  }, [menuOpen, menuMounted, scrollRootSelector]);\n\n  return { menuPanelRef, triggerRef, menuGeometry };\n}\n"],"names":[],"mappings":";;AAUO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,eAAe,OAAgC,IAAI;AACzD,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAsC,IAAI;AAElF,kBAAgB,MAAM;AACpB,QAAI,CAAC,YAAY,CAAC,aAAa;AAC7B,sBAAgB,IAAI;AACpB;AAAA,IACF;AAEA,UAAM,SAAS,MAAM;AACnB,YAAM,UAAU,WAAW;AAC3B,YAAM,OAAO,aAAa;AAC1B,UAAI,CAAC,WAAW,CAAC,MAAM;AACrB;AAAA,MACF;AACA,sBAAgB,4BAA4B,SAAS,IAAI,CAAC;AAAA,IAC5D;AAEA,WAAA;AAEA,UAAM,cAA6B,CAAA;AACnC,QAAI,oBAAoB;AACtB,YAAM,OAAO,SAAS,cAA2B,kBAAkB;AACnE,UAAI,MAAM;AACR,oBAAY,KAAK,IAAI;AAAA,MACvB;AAAA,IACF;AAEA,WAAO,iBAAiB,UAAU,MAAM;AACxC,WAAO,iBAAiB,UAAU,QAAQ,IAAI;AAC9C,eAAW,QAAQ,aAAa;AAC9B,WAAK,iBAAiB,UAAU,QAAQ,EAAE,SAAS,MAAM;AAAA,IAC3D;AAEA,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,MAAM;AAC3C,aAAO,oBAAoB,UAAU,QAAQ,IAAI;AACjD,iBAAW,QAAQ,aAAa;AAC9B,aAAK,oBAAoB,UAAU,MAAM;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,aAAa,kBAAkB,CAAC;AAE9C,SAAO,EAAE,cAAc,YAAY,aAAA;AACrC;"}
+{"version":3,"file":"useFloatingMenuGeometry.js","sources":["../../src/menu/useFloatingMenuGeometry.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\r\nimport { computeFloatingMenuGeometry, type FloatingMenuGeometry } from './computeFloatingMenuGeometry';\r\n\r\nexport type UseFloatingMenuGeometryOptions = {\r\n  menuOpen: boolean;\r\n  menuMounted: boolean;\r\n  /** 额外监听 scroll 的容器选择器（如 `.app-main`） */\r\n  scrollRootSelector?: string;\r\n};\r\n\r\nexport function useFloatingMenuGeometry({\r\n  menuOpen,\r\n  menuMounted,\r\n  scrollRootSelector,\r\n}: UseFloatingMenuGeometryOptions) {\r\n  const menuPanelRef = useRef<HTMLUListElement | null>(null);\r\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\r\n  const [menuGeometry, setMenuGeometry] = useState<FloatingMenuGeometry | null>(null);\r\n\r\n  useLayoutEffect(() => {\r\n    if (!menuOpen || !menuMounted) {\r\n      setMenuGeometry(null);\r\n      return;\r\n    }\r\n\r\n    const update = () => {\r\n      const trigger = triggerRef.current;\r\n      const menu = menuPanelRef.current;\r\n      if (!trigger || !menu) {\r\n        return;\r\n      }\r\n      setMenuGeometry(computeFloatingMenuGeometry(trigger, menu));\r\n    };\r\n\r\n    const onScroll = (event: Event) => {\r\n      const menu = menuPanelRef.current;\r\n      const target = event.target;\r\n      // Ignore the panel's own scrolling so geometry does not thrash / reset maxHeight.\r\n      if (menu && target instanceof Node && menu.contains(target)) {\r\n        return;\r\n      }\r\n      update();\r\n    };\r\n\r\n    update();\r\n\r\n    const scrollRoots: HTMLElement[] = [];\r\n    if (scrollRootSelector) {\r\n      const root = document.querySelector<HTMLElement>(scrollRootSelector);\r\n      if (root) {\r\n        scrollRoots.push(root);\r\n      }\r\n    }\r\n\r\n    window.addEventListener('resize', update);\r\n    window.addEventListener('scroll', onScroll, true);\r\n    for (const root of scrollRoots) {\r\n      root.addEventListener('scroll', onScroll, { passive: true });\r\n    }\r\n\r\n    return () => {\r\n      window.removeEventListener('resize', update);\r\n      window.removeEventListener('scroll', onScroll, true);\r\n      for (const root of scrollRoots) {\r\n        root.removeEventListener('scroll', onScroll);\r\n      }\r\n    };\r\n  }, [menuOpen, menuMounted, scrollRootSelector]);\r\n\r\n  return { menuPanelRef, triggerRef, menuGeometry };\r\n}\r\n"],"names":[],"mappings":";;AAUO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,eAAe,OAAgC,IAAI;AACzD,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAsC,IAAI;AAElF,kBAAgB,MAAM;AACpB,QAAI,CAAC,YAAY,CAAC,aAAa;AAC7B,sBAAgB,IAAI;AACpB;AAAA,IACF;AAEA,UAAM,SAAS,MAAM;AACnB,YAAM,UAAU,WAAW;AAC3B,YAAM,OAAO,aAAa;AAC1B,UAAI,CAAC,WAAW,CAAC,MAAM;AACrB;AAAA,MACF;AACA,sBAAgB,4BAA4B,SAAS,IAAI,CAAC;AAAA,IAC5D;AAEA,UAAM,WAAW,CAAC,UAAiB;AACjC,YAAM,OAAO,aAAa;AAC1B,YAAM,SAAS,MAAM;AAErB,UAAI,QAAQ,kBAAkB,QAAQ,KAAK,SAAS,MAAM,GAAG;AAC3D;AAAA,MACF;AACA,aAAA;AAAA,IACF;AAEA,WAAA;AAEA,UAAM,cAA6B,CAAA;AACnC,QAAI,oBAAoB;AACtB,YAAM,OAAO,SAAS,cAA2B,kBAAkB;AACnE,UAAI,MAAM;AACR,oBAAY,KAAK,IAAI;AAAA,MACvB;AAAA,IACF;AAEA,WAAO,iBAAiB,UAAU,MAAM;AACxC,WAAO,iBAAiB,UAAU,UAAU,IAAI;AAChD,eAAW,QAAQ,aAAa;AAC9B,WAAK,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM;AAAA,IAC7D;AAEA,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,MAAM;AAC3C,aAAO,oBAAoB,UAAU,UAAU,IAAI;AACnD,iBAAW,QAAQ,aAAa;AAC9B,aAAK,oBAAoB,UAAU,QAAQ;AAAA,MAC7C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,aAAa,kBAAkB,CAAC;AAE9C,SAAO,EAAE,cAAc,YAAY,aAAA;AACrC;"}

package/dist/overlay/OverlayStackProvider.d.ts

@@ -11,7 +11,7 @@ type OverlayStackContextValue = {
 };
 export declare function OverlayStackProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function useOverlayStack(): OverlayStackContextValue;
 export {};
 //# sourceMappingURL=OverlayStackProvider.d.ts.map

package/dist/overlay/OverlayStackProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStackProvider.d.ts","sourceRoot":"","sources":["../../src/overlay/OverlayStackProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAwB,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEnF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/B,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,2BAA2B,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,4BAA4B,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD,CAAC;AAiBF,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAuHzE;AAED,wBAAgB,eAAe,6BAQ9B"}
+{"version":3,"file":"OverlayStackProvider.d.ts","sourceRoot":"","sources":["../../src/overlay/OverlayStackProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAwB,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEnF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/B,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,2BAA2B,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,4BAA4B,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD,CAAC;AAiBF,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAuHzE;AAED,wBAAgB,eAAe,6BAQ9B"}

package/dist/overlay/OverlayStackProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStackProvider.js","sources":["../../src/overlay/OverlayStackProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { pushOverlayHistoryState } from './overlayHistory';\nimport { computeOverlayZIndex, type OverlayStackEntry } from './overlayStackTypes';\n\ntype OverlayStackContextValue = {\n  register: (entry: OverlayStackEntry) => void;\n  unregister: (id: string) => void;\n  isTop: (id: string) => boolean;\n  getZIndex: (id: string) => number;\n  pushOverlayHistory: (id: string) => void;\n  syncOverlayHistoryOnUiClose: (id: string) => void;\n  acknowledgeOverlayHistoryPop: (id: string) => void;\n};\n\nconst OverlayStackContext = createContext<OverlayStackContextValue | null>(null);\n\nconst isEditableTarget = (target: EventTarget | null) => {\n  if (!(target instanceof HTMLElement)) {\n    return false;\n  }\n\n  return (\n    target instanceof HTMLInputElement ||\n    target instanceof HTMLTextAreaElement ||\n    target instanceof HTMLSelectElement ||\n    target.isContentEditable\n  );\n};\n\nexport function OverlayStackProvider({ children }: { children: ReactNode }) {\n  const entriesRef = useRef(new Map<string, OverlayStackEntry>());\n  const orderRef = useRef<string[]>([]);\n  const historyActiveIdsRef = useRef(new Set<string>());\n  const ignoreNextPopstateRef = useRef(false);\n  const [order, setOrder] = useState<string[]>([]);\n\n  orderRef.current = order;\n\n  const register = useCallback((entry: OverlayStackEntry) => {\n    entriesRef.current.set(entry.id, entry);\n    setOrder((prev) => {\n      const without = prev.filter((entryId) => entryId !== entry.id);\n      return [...without, entry.id];\n    });\n  }, []);\n\n  const unregister = useCallback((id: string) => {\n    entriesRef.current.delete(id);\n    setOrder((prev) => prev.filter((entryId) => entryId !== id));\n  }, []);\n\n  const pushOverlayHistory = useCallback((id: string) => {\n    if (historyActiveIdsRef.current.has(id)) {\n      return;\n    }\n\n    historyActiveIdsRef.current.add(id);\n    pushOverlayHistoryState(id);\n  }, []);\n\n  const syncOverlayHistoryOnUiClose = useCallback((id: string) => {\n    if (!historyActiveIdsRef.current.has(id)) {\n      return;\n    }\n\n    historyActiveIdsRef.current.delete(id);\n    ignoreNextPopstateRef.current = true;\n    history.back();\n  }, []);\n\n  const acknowledgeOverlayHistoryPop = useCallback((id: string) => {\n    historyActiveIdsRef.current.delete(id);\n  }, []);\n\n  const topId = order[order.length - 1] ?? null;\n\n  const value = useMemo<OverlayStackContextValue>(\n    () => ({\n      register,\n      unregister,\n      isTop: (id) => topId === id,\n      getZIndex: (id) => {\n        const index = order.indexOf(id);\n        return computeOverlayZIndex(index < 0 ? 0 : index);\n      },\n      pushOverlayHistory,\n      syncOverlayHistoryOnUiClose,\n      acknowledgeOverlayHistoryPop,\n    }),\n    [\n      acknowledgeOverlayHistoryPop,\n      order,\n      pushOverlayHistory,\n      register,\n      syncOverlayHistoryOnUiClose,\n      topId,\n      unregister,\n    ],\n  );\n\n  useEffect(() => {\n    const onPopState = () => {\n      if (ignoreNextPopstateRef.current) {\n        ignoreNextPopstateRef.current = false;\n        return;\n      }\n\n      const top = orderRef.current[orderRef.current.length - 1];\n\n      if (!top) {\n        return;\n      }\n\n      const entry = entriesRef.current.get(top);\n\n      if (!entry) {\n        return;\n      }\n\n      acknowledgeOverlayHistoryPop(top);\n      entry.onDismiss();\n    };\n\n    window.addEventListener('popstate', onPopState);\n    return () => window.removeEventListener('popstate', onPopState);\n  }, [acknowledgeOverlayHistoryPop]);\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape' || isEditableTarget(event.target)) {\n        return;\n      }\n\n      const top = topId ? entriesRef.current.get(topId) : undefined;\n\n      if (!top || top.dismissOnEscape === false) {\n        return;\n      }\n\n      event.preventDefault();\n      top.onDismiss();\n    };\n\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [topId]);\n\n  return <OverlayStackContext.Provider value={value}>{children}</OverlayStackContext.Provider>;\n}\n\nexport function useOverlayStack() {\n  const context = useContext(OverlayStackContext);\n\n  if (!context) {\n    throw new Error('useOverlayStack must be used within OverlayStackProvider');\n  }\n\n  return context;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OverlayStackProvider.js","sources":["../../src/overlay/OverlayStackProvider.tsx"],"sourcesContent":["import {\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n  type ReactNode,\r\n} from 'react';\r\nimport { pushOverlayHistoryState } from './overlayHistory';\r\nimport { computeOverlayZIndex, type OverlayStackEntry } from './overlayStackTypes';\r\n\r\ntype OverlayStackContextValue = {\r\n  register: (entry: OverlayStackEntry) => void;\r\n  unregister: (id: string) => void;\r\n  isTop: (id: string) => boolean;\r\n  getZIndex: (id: string) => number;\r\n  pushOverlayHistory: (id: string) => void;\r\n  syncOverlayHistoryOnUiClose: (id: string) => void;\r\n  acknowledgeOverlayHistoryPop: (id: string) => void;\r\n};\r\n\r\nconst OverlayStackContext = createContext<OverlayStackContextValue | null>(null);\r\n\r\nconst isEditableTarget = (target: EventTarget | null) => {\r\n  if (!(target instanceof HTMLElement)) {\r\n    return false;\r\n  }\r\n\r\n  return (\r\n    target instanceof HTMLInputElement ||\r\n    target instanceof HTMLTextAreaElement ||\r\n    target instanceof HTMLSelectElement ||\r\n    target.isContentEditable\r\n  );\r\n};\r\n\r\nexport function OverlayStackProvider({ children }: { children: ReactNode }) {\r\n  const entriesRef = useRef(new Map<string, OverlayStackEntry>());\r\n  const orderRef = useRef<string[]>([]);\r\n  const historyActiveIdsRef = useRef(new Set<string>());\r\n  const ignoreNextPopstateRef = useRef(false);\r\n  const [order, setOrder] = useState<string[]>([]);\r\n\r\n  orderRef.current = order;\r\n\r\n  const register = useCallback((entry: OverlayStackEntry) => {\r\n    entriesRef.current.set(entry.id, entry);\r\n    setOrder((prev) => {\r\n      const without = prev.filter((entryId) => entryId !== entry.id);\r\n      return [...without, entry.id];\r\n    });\r\n  }, []);\r\n\r\n  const unregister = useCallback((id: string) => {\r\n    entriesRef.current.delete(id);\r\n    setOrder((prev) => prev.filter((entryId) => entryId !== id));\r\n  }, []);\r\n\r\n  const pushOverlayHistory = useCallback((id: string) => {\r\n    if (historyActiveIdsRef.current.has(id)) {\r\n      return;\r\n    }\r\n\r\n    historyActiveIdsRef.current.add(id);\r\n    pushOverlayHistoryState(id);\r\n  }, []);\r\n\r\n  const syncOverlayHistoryOnUiClose = useCallback((id: string) => {\r\n    if (!historyActiveIdsRef.current.has(id)) {\r\n      return;\r\n    }\r\n\r\n    historyActiveIdsRef.current.delete(id);\r\n    ignoreNextPopstateRef.current = true;\r\n    history.back();\r\n  }, []);\r\n\r\n  const acknowledgeOverlayHistoryPop = useCallback((id: string) => {\r\n    historyActiveIdsRef.current.delete(id);\r\n  }, []);\r\n\r\n  const topId = order[order.length - 1] ?? null;\r\n\r\n  const value = useMemo<OverlayStackContextValue>(\r\n    () => ({\r\n      register,\r\n      unregister,\r\n      isTop: (id) => topId === id,\r\n      getZIndex: (id) => {\r\n        const index = order.indexOf(id);\r\n        return computeOverlayZIndex(index < 0 ? 0 : index);\r\n      },\r\n      pushOverlayHistory,\r\n      syncOverlayHistoryOnUiClose,\r\n      acknowledgeOverlayHistoryPop,\r\n    }),\r\n    [\r\n      acknowledgeOverlayHistoryPop,\r\n      order,\r\n      pushOverlayHistory,\r\n      register,\r\n      syncOverlayHistoryOnUiClose,\r\n      topId,\r\n      unregister,\r\n    ],\r\n  );\r\n\r\n  useEffect(() => {\r\n    const onPopState = () => {\r\n      if (ignoreNextPopstateRef.current) {\r\n        ignoreNextPopstateRef.current = false;\r\n        return;\r\n      }\r\n\r\n      const top = orderRef.current[orderRef.current.length - 1];\r\n\r\n      if (!top) {\r\n        return;\r\n      }\r\n\r\n      const entry = entriesRef.current.get(top);\r\n\r\n      if (!entry) {\r\n        return;\r\n      }\r\n\r\n      acknowledgeOverlayHistoryPop(top);\r\n      entry.onDismiss();\r\n    };\r\n\r\n    window.addEventListener('popstate', onPopState);\r\n    return () => window.removeEventListener('popstate', onPopState);\r\n  }, [acknowledgeOverlayHistoryPop]);\r\n\r\n  useEffect(() => {\r\n    const onKeyDown = (event: KeyboardEvent) => {\r\n      if (event.key !== 'Escape' || isEditableTarget(event.target)) {\r\n        return;\r\n      }\r\n\r\n      const top = topId ? entriesRef.current.get(topId) : undefined;\r\n\r\n      if (!top || top.dismissOnEscape === false) {\r\n        return;\r\n      }\r\n\r\n      event.preventDefault();\r\n      top.onDismiss();\r\n    };\r\n\r\n    window.addEventListener('keydown', onKeyDown);\r\n    return () => window.removeEventListener('keydown', onKeyDown);\r\n  }, [topId]);\r\n\r\n  return <OverlayStackContext.Provider value={value}>{children}</OverlayStackContext.Provider>;\r\n}\r\n\r\nexport function useOverlayStack() {\r\n  const context = useContext(OverlayStackContext);\r\n\r\n  if (!context) {\r\n    throw new Error('useOverlayStack must be used within OverlayStackProvider');\r\n  }\r\n\r\n  return context;\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/overlay/overlayHistory.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlayHistory.js","sources":["../../src/overlay/overlayHistory.ts"],"sourcesContent":["/** `history.state` 上标记叠层条目的键，用于区分站内叠层与正常导航。 */\nexport const OVERLAY_HISTORY_STATE_KEY = 'overlayStack' as const;\n\nexport type OverlayHistoryState = {\n  [OVERLAY_HISTORY_STATE_KEY]: string;\n};\n\nexport function isOverlayHistoryState(state: unknown): state is OverlayHistoryState {\n  return (\n    typeof state === 'object' &&\n    state !== null &&\n    OVERLAY_HISTORY_STATE_KEY in state &&\n    typeof (state as OverlayHistoryState)[OVERLAY_HISTORY_STATE_KEY] === 'string'\n  );\n}\n\nexport function pushOverlayHistoryState(overlayId: string) {\n  const next: OverlayHistoryState = { [OVERLAY_HISTORY_STATE_KEY]: overlayId };\n  history.pushState(next, '', window.location.href);\n}\n"],"names":[],"mappings":"AACO,MAAM,4BAA4B;AAMlC,SAAS,sBAAsB,OAA8C;AAClF,SACE,OAAO,UAAU,YACjB,UAAU,QACV,6BAA6B,SAC7B,OAAQ,MAA8B,yBAAyB,MAAM;AAEzE;AAEO,SAAS,wBAAwB,WAAmB;AACzD,QAAM,OAA4B,EAAE,CAAC,yBAAyB,GAAG,UAAA;AACjE,UAAQ,UAAU,MAAM,IAAI,OAAO,SAAS,IAAI;AAClD;"}
+{"version":3,"file":"overlayHistory.js","sources":["../../src/overlay/overlayHistory.ts"],"sourcesContent":["/** `history.state` 上标记叠层条目的键，用于区分站内叠层与正常导航。 */\r\nexport const OVERLAY_HISTORY_STATE_KEY = 'overlayStack' as const;\r\n\r\nexport type OverlayHistoryState = {\r\n  [OVERLAY_HISTORY_STATE_KEY]: string;\r\n};\r\n\r\nexport function isOverlayHistoryState(state: unknown): state is OverlayHistoryState {\r\n  return (\r\n    typeof state === 'object' &&\r\n    state !== null &&\r\n    OVERLAY_HISTORY_STATE_KEY in state &&\r\n    typeof (state as OverlayHistoryState)[OVERLAY_HISTORY_STATE_KEY] === 'string'\r\n  );\r\n}\r\n\r\nexport function pushOverlayHistoryState(overlayId: string) {\r\n  const next: OverlayHistoryState = { [OVERLAY_HISTORY_STATE_KEY]: overlayId };\r\n  history.pushState(next, '', window.location.href);\r\n}\r\n"],"names":[],"mappings":"AACO,MAAM,4BAA4B;AAMlC,SAAS,sBAAsB,OAA8C;AAClF,SACE,OAAO,UAAU,YACjB,UAAU,QACV,6BAA6B,SAC7B,OAAQ,MAA8B,yBAAyB,MAAM;AAEzE;AAEO,SAAS,wBAAwB,WAAmB;AACzD,QAAM,OAA4B,EAAE,CAAC,yBAAyB,GAAG,UAAA;AACjE,UAAQ,UAAU,MAAM,IAAI,OAAO,SAAS,IAAI;AAClD;"}

package/dist/overlay/overlayStackTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlayStackTypes.js","sources":["../../src/overlay/overlayStackTypes.ts"],"sourcesContent":["/** 叠层 z-index：1010 + 栈内序号 × 10（序号从 0 起） */\nexport const OVERLAY_Z_BASE = 1010;\nexport const OVERLAY_Z_STEP = 10;\n\nexport type OverlayStackEntry = {\n  id: string;\n  onDismiss: () => void;\n  dismissOnEscape: boolean;\n};\n\nexport const computeOverlayZIndex = (stackIndex: number) => OVERLAY_Z_BASE + stackIndex * OVERLAY_Z_STEP;\n"],"names":[],"mappings":"AACO,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AAQvB,MAAM,uBAAuB,CAAC,eAAuB,iBAAiB,aAAa;"}
+{"version":3,"file":"overlayStackTypes.js","sources":["../../src/overlay/overlayStackTypes.ts"],"sourcesContent":["/** 叠层 z-index：1010 + 栈内序号 × 10（序号从 0 起） */\r\nexport const OVERLAY_Z_BASE = 1010;\r\nexport const OVERLAY_Z_STEP = 10;\r\n\r\nexport type OverlayStackEntry = {\r\n  id: string;\r\n  onDismiss: () => void;\r\n  dismissOnEscape: boolean;\r\n};\r\n\r\nexport const computeOverlayZIndex = (stackIndex: number) => OVERLAY_Z_BASE + stackIndex * OVERLAY_Z_STEP;\r\n"],"names":[],"mappings":"AACO,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AAQvB,MAAM,uBAAuB,CAAC,eAAuB,iBAAiB,aAAa;"}

package/dist/overlay/useOverlayStackEntry.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverlayStackEntry.js","sources":["../../src/overlay/useOverlayStackEntry.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useOverlayStack } from './OverlayStackProvider';\n\nexport type UseOverlayStackEntryOptions = {\n  id: string;\n  open: boolean;\n  onDismiss: () => void;\n  dismissOnEscape?: boolean;\n};\n\nexport function useOverlayStackEntry({\n  id,\n  open,\n  onDismiss,\n  dismissOnEscape = true,\n}: UseOverlayStackEntryOptions) {\n  const {\n    register,\n    unregister,\n    isTop,\n    getZIndex,\n    pushOverlayHistory,\n    syncOverlayHistoryOnUiClose,\n  } = useOverlayStack();\n  const onDismissRef = useRef(onDismiss);\n  const openRef = useRef(open);\n  onDismissRef.current = onDismiss;\n  openRef.current = open;\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    register({\n      id,\n      onDismiss: () => onDismissRef.current(),\n      dismissOnEscape,\n    });\n\n    return () => {\n      unregister(id);\n    };\n  }, [dismissOnEscape, id, open, register, unregister]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    pushOverlayHistory(id);\n\n    return () => {\n      queueMicrotask(() => {\n        if (!openRef.current) {\n          syncOverlayHistoryOnUiClose(id);\n        }\n      });\n    };\n  }, [id, open, pushOverlayHistory, syncOverlayHistoryOnUiClose]);\n\n  return {\n    isBackdropActive: open && isTop(id),\n    zIndex: getZIndex(id),\n  };\n}\n"],"names":[],"mappings":";;AAUO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,GAAgC;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAA;AACJ,QAAM,eAAe,OAAO,SAAS;AACrC,QAAM,UAAU,OAAO,IAAI;AAC3B,eAAa,UAAU;AACvB,UAAQ,UAAU;AAElB,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,aAAS;AAAA,MACP;AAAA,MACA,WAAW,MAAM,aAAa,QAAA;AAAA,MAC9B;AAAA,IAAA,CACD;AAED,WAAO,MAAM;AACX,iBAAW,EAAE;AAAA,IACf;AAAA,EACF,GAAG,CAAC,iBAAiB,IAAI,MAAM,UAAU,UAAU,CAAC;AAEpD,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,uBAAmB,EAAE;AAErB,WAAO,MAAM;AACX,qBAAe,MAAM;AACnB,YAAI,CAAC,QAAQ,SAAS;AACpB,sCAA4B,EAAE;AAAA,QAChC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,IAAI,MAAM,oBAAoB,2BAA2B,CAAC;AAE9D,SAAO;AAAA,IACL,kBAAkB,QAAQ,MAAM,EAAE;AAAA,IAClC,QAAQ,UAAU,EAAE;AAAA,EAAA;AAExB;"}
+{"version":3,"file":"useOverlayStackEntry.js","sources":["../../src/overlay/useOverlayStackEntry.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\r\nimport { useOverlayStack } from './OverlayStackProvider';\r\n\r\nexport type UseOverlayStackEntryOptions = {\r\n  id: string;\r\n  open: boolean;\r\n  onDismiss: () => void;\r\n  dismissOnEscape?: boolean;\r\n};\r\n\r\nexport function useOverlayStackEntry({\r\n  id,\r\n  open,\r\n  onDismiss,\r\n  dismissOnEscape = true,\r\n}: UseOverlayStackEntryOptions) {\r\n  const {\r\n    register,\r\n    unregister,\r\n    isTop,\r\n    getZIndex,\r\n    pushOverlayHistory,\r\n    syncOverlayHistoryOnUiClose,\r\n  } = useOverlayStack();\r\n  const onDismissRef = useRef(onDismiss);\r\n  const openRef = useRef(open);\r\n  onDismissRef.current = onDismiss;\r\n  openRef.current = open;\r\n\r\n  useEffect(() => {\r\n    if (!open) {\r\n      return;\r\n    }\r\n\r\n    register({\r\n      id,\r\n      onDismiss: () => onDismissRef.current(),\r\n      dismissOnEscape,\r\n    });\r\n\r\n    return () => {\r\n      unregister(id);\r\n    };\r\n  }, [dismissOnEscape, id, open, register, unregister]);\r\n\r\n  useEffect(() => {\r\n    if (!open) {\r\n      return;\r\n    }\r\n\r\n    pushOverlayHistory(id);\r\n\r\n    return () => {\r\n      queueMicrotask(() => {\r\n        if (!openRef.current) {\r\n          syncOverlayHistoryOnUiClose(id);\r\n        }\r\n      });\r\n    };\r\n  }, [id, open, pushOverlayHistory, syncOverlayHistoryOnUiClose]);\r\n\r\n  return {\r\n    isBackdropActive: open && isTop(id),\r\n    zIndex: getZIndex(id),\r\n  };\r\n}\r\n"],"names":[],"mappings":";;AAUO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,GAAgC;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAA;AACJ,QAAM,eAAe,OAAO,SAAS;AACrC,QAAM,UAAU,OAAO,IAAI;AAC3B,eAAa,UAAU;AACvB,UAAQ,UAAU;AAElB,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,aAAS;AAAA,MACP;AAAA,MACA,WAAW,MAAM,aAAa,QAAA;AAAA,MAC9B;AAAA,IAAA,CACD;AAED,WAAO,MAAM;AACX,iBAAW,EAAE;AAAA,IACf;AAAA,EACF,GAAG,CAAC,iBAAiB,IAAI,MAAM,UAAU,UAAU,CAAC;AAEpD,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,uBAAmB,EAAE;AAErB,WAAO,MAAM;AACX,qBAAe,MAAM;AACnB,YAAI,CAAC,QAAQ,SAAS;AACpB,sCAA4B,EAAE;AAAA,QAChC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,IAAI,MAAM,oBAAoB,2BAA2B,CAAC;AAE9D,SAAO;AAAA,IACL,kBAAkB,QAAQ,MAAM,EAAE;AAAA,IAClC,QAAQ,UAAU,EAAE;AAAA,EAAA;AAExB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umamichi-ui/common-components",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Reusable React UI components for Umamichi sites (overlay stack, dialogs, menus)",
   "type": "module",
   "license": "MIT",
@@ -70,7 +70,7 @@
   "devDependencies": {
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "@umamichi-ui/common-css": "^0.16.0",
+    "@umamichi-ui/common-css": "^0.18.0",
     "@vitejs/plugin-react": "^5.1.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

package/src/styles/about-dialog.css

@@ -1,122 +1,122 @@
-.about-dialog {
-  width: min(calc(100vw - 48px), 36rem);
-  max-width: min(calc(100vw - 48px), 36rem);
-}
-
-.about-dialog-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.about-dialog-product {
-  text-align: center;
-}
-
-.about-dialog-app-name {
-  margin: 0 0 6px;
-  font-size: 1.05rem;
-  font-weight: var(--site-weight-regular);
-  line-height: 1.35;
-}
-
-.about-dialog-version {
-  margin: 0 0 10px;
-  color: var(--site-muted-fg);
-  font-size: 0.875rem;
-  font-weight: var(--site-weight-regular);
-  line-height: 1.4;
-}
-
-.about-dialog-channel {
-  color: var(--site-subtle-fg);
-}
-
-.about-dialog-tagline {
-  margin: 0;
-  color: var(--site-content-fg);
-  font-size: 0.9rem;
-  font-weight: var(--site-weight-regular);
-  line-height: 1.55;
-}
-
-.about-dialog-copyright {
-  margin: 14px 0 0;
-  text-align: center;
-  color: var(--site-muted-fg);
-  font-size: 0.86rem;
-  font-weight: var(--site-weight-regular);
-}
-
-.about-dialog-divider {
-  margin: 16px 0;
-  border: 0;
-  border-top: 1px solid var(--site-border);
-}
-
-.about-dialog-section + .about-dialog-section {
-  margin-top: 14px;
-}
-
-.about-dialog-section-title {
-  margin: 0 0 6px;
-  font-size: 0.82rem;
-  font-weight: var(--site-weight-semibold);
-  letter-spacing: 0.04em;
-  color: var(--site-subtle-fg);
-  text-transform: uppercase;
-}
-
-.about-dialog-section-text {
-  margin: 0;
-  font-size: 0.9rem;
-  font-weight: var(--site-weight-regular);
-  line-height: 1.55;
-  color: var(--site-content-fg);
-}
-
-.about-dialog-meta {
-  margin: 14px 0 0;
-}
-
-.about-dialog-meta-row {
-  display: grid;
-  grid-template-columns: 5.5rem minmax(0, 1fr);
-  gap: 8px 12px;
-  align-items: baseline;
-  font-size: 0.875rem;
-  font-weight: var(--site-weight-regular);
-  line-height: 1.45;
-}
-
-.about-dialog-meta-row + .about-dialog-meta-row {
-  margin-top: 8px;
-}
-
-.about-dialog-meta dt {
-  margin: 0;
-  color: var(--site-muted-fg);
-}
-
-.about-dialog-meta dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.about-dialog-meta-row:first-child dd a {
-  white-space: nowrap;
-}
-
-@media (max-width: 560px) {
-  .about-dialog-meta-row:first-child dd a {
-    white-space: normal;
-  }
-}
-
-.about-dialog-actions {
-  justify-content: center;
-}
-
-.about-dialog-actions .primary-button {
-  min-width: 6.5rem;
-}
+.about-dialog {
+  width: min(calc(100vw - 48px), 36rem);
+  max-width: min(calc(100vw - 48px), 36rem);
+}
+
+.about-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.about-dialog-product {
+  text-align: center;
+}
+
+.about-dialog-app-name {
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+  font-weight: var(--site-weight-regular);
+  line-height: 1.35;
+}
+
+.about-dialog-version {
+  margin: 0 0 10px;
+  color: var(--site-muted-fg);
+  font-size: 0.875rem;
+  font-weight: var(--site-weight-regular);
+  line-height: 1.4;
+}
+
+.about-dialog-channel {
+  color: var(--site-subtle-fg);
+}
+
+.about-dialog-tagline {
+  margin: 0;
+  color: var(--site-content-fg);
+  font-size: 0.9rem;
+  font-weight: var(--site-weight-regular);
+  line-height: 1.55;
+}
+
+.about-dialog-copyright {
+  margin: 14px 0 0;
+  text-align: center;
+  color: var(--site-muted-fg);
+  font-size: 0.86rem;
+  font-weight: var(--site-weight-regular);
+}
+
+.about-dialog-divider {
+  margin: 16px 0;
+  border: 0;
+  border-top: 1px solid var(--site-border);
+}
+
+.about-dialog-section + .about-dialog-section {
+  margin-top: 14px;
+}
+
+.about-dialog-section-title {
+  margin: 0 0 6px;
+  font-size: 0.82rem;
+  font-weight: var(--site-weight-semibold);
+  letter-spacing: 0.04em;
+  color: var(--site-subtle-fg);
+  text-transform: uppercase;
+}
+
+.about-dialog-section-text {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: var(--site-weight-regular);
+  line-height: 1.55;
+  color: var(--site-content-fg);
+}
+
+.about-dialog-meta {
+  margin: 14px 0 0;
+}
+
+.about-dialog-meta-row {
+  display: grid;
+  grid-template-columns: 5.5rem minmax(0, 1fr);
+  gap: 8px 12px;
+  align-items: baseline;
+  font-size: 0.875rem;
+  font-weight: var(--site-weight-regular);
+  line-height: 1.45;
+}
+
+.about-dialog-meta-row + .about-dialog-meta-row {
+  margin-top: 8px;
+}
+
+.about-dialog-meta dt {
+  margin: 0;
+  color: var(--site-muted-fg);
+}
+
+.about-dialog-meta dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.about-dialog-meta-row:first-child dd a {
+  white-space: nowrap;
+}
+
+@media (max-width: 560px) {
+  .about-dialog-meta-row:first-child dd a {
+    white-space: normal;
+  }
+}
+
+.about-dialog-actions {
+  justify-content: center;
+}
+
+.about-dialog-actions .primary-button {
+  min-width: 6.5rem;
+}

package/src/styles/index.css

@@ -1,3 +1,3 @@
-@import './overlay.css';
-@import './mobile-action-sheet.css';
-@import './about-dialog.css';
+@import './overlay.css';
+@import './mobile-action-sheet.css';
+@import './about-dialog.css';