woby-tooltip 1.0.9 → 1.0.11

package/build/index.es.js

@@ -2529,16 +2529,16 @@ const tooltipDef = `text-left border-b-[#666] border-b border-dotted
 const tooltip = `inline-block relative 
 [&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100
 `;
-const topDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const topDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
 const top = `absolute z-[99999999] left-2/4 -top-5 `;
 const top_i = `absolute overflow-hidden top-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:rotate-45 after:left-2/4 `;
-const rightDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const rightDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
 const right = `absolute z-[99999999] ml-5 left-full top-2/4 `;
 const right_i = `absolute overflow-hidden right-full after:content-[''] after:absolute after:translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `;
-const bottomDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const bottomDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
 const bottom = `absolute z-[99999999] left-2/4 top-10 `;
 const bottom_i = `absolute overflow-hidden bottom-full after:content-[''] after:absolute after:-translate-x-2/4 after:translate-y-2/4 after:rotate-45 after:left-2/4 `;
-const leftDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const leftDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
 const left = `absolute z-[99999999] mr-5 right-full top-2/4 `;
 const left_i = `absolute overflow-hidden left-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `;
 const Tooltip = ({ children, class: cls = tooltipDef, className, ...props }) => {

package/build/style.css

@@ -650,6 +650,11 @@ video {
   min-width: 400px;
 }
 
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+
 .-translate-y-2\/4 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/dist/index.es.js

@@ -47,6 +47,29 @@ ${strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(""
 }
 const styled = Styled().styled;
 createContext();
+function useLocation() {
+  const location = $(window.location);
+  useEffect(() => {
+    const handleLocationChange = () => location({ ...window.location });
+    window.addEventListener("popstate", handleLocationChange);
+    const originalPushState = window.history.pushState;
+    const originalReplaceState = window.history.replaceState;
+    window.history.pushState = function(...args) {
+      originalPushState.apply(window.history, args);
+      handleLocationChange();
+    };
+    window.history.replaceState = function(...args) {
+      originalReplaceState.apply(window.history, args);
+      handleLocationChange();
+    };
+    return () => {
+      window.removeEventListener("popstate", handleLocationChange);
+      window.history.pushState = originalPushState;
+      window.history.replaceState = originalReplaceState;
+    };
+  });
+  return location;
+}
 function useComputedStyle(target, patterns = []) {
   const styles = $({});
   useEffect(() => {
@@ -83,22 +106,24 @@ function useComputedStyle(target, patterns = []) {
   });
   return styles;
 }
-const tooltipDef = `text-left border-b-[#666] border-b border-dotted 
+const l = useLocation();
+useMemo(() => $$(l).host.toLowerCase().includes("localhost"));
+const tooltipDef = `
 [&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100
 `;
 const tooltip = `inline-block relative 
 [&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100
 `;
-const topDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const topDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
 const top = `absolute z-[99999999] left-2/4 -top-5 `;
 const top_i = `absolute overflow-hidden top-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:rotate-45 after:left-2/4 `;
-const rightDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const rightDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
 const right = `absolute z-[99999999] ml-5 left-full top-2/4 `;
 const right_i = `absolute overflow-hidden right-full after:content-[''] after:absolute after:translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `;
-const bottomDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const bottomDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
 const bottom = `absolute z-[99999999] left-2/4 top-10 `;
 const bottom_i = `absolute overflow-hidden bottom-full after:content-[''] after:absolute after:-translate-x-2/4 after:translate-y-2/4 after:rotate-45 after:left-2/4 `;
-const leftDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
+const leftDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `;
 const left = `absolute z-[99999999] mr-5 right-full top-2/4 `;
 const left_i = `absolute overflow-hidden left-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `;
 const Tooltip = ({ children, class: cls = tooltipDef, className, ...props }) => {

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../node_modules/.pnpm/nanoid@3.3.7/node_modules/nanoid/index.browser.js","../../woby-styled/dist/index.es.js","../../use-woby/dist/index.es.js","../src/Tooltip.tsx"],"sourcesContent":["import { urlAlphabet } from './url-alphabet/index.js'\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n  let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      let j = step\n      while (j--) {\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length === size) return id\n      }\n    }\n  }\n}\nlet customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size, random)\nlet nanoid = (size = 21) =>\n  crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n    byte &= 63\n    if (byte < 36) {\n      id += byte.toString(36)\n    } else if (byte < 62) {\n      id += (byte - 26).toString(36).toUpperCase()\n    } else if (byte > 62) {\n      id += '-'\n    } else {\n      id += '_'\n    }\n    return id\n  }, '')\nexport { nanoid, customAlphabet, customRandom, urlAlphabet, random }\n","import { useMemo, $$, useEffect } from \"woby\";\nimport { jsx } from \"woby/jsx-runtime\";\nimport { nanoid } from \"nanoid\";\nconst isTemp = (s) => !!s.raw;\nconst extract = (C, props, classNames) => {\n  const { className, ...p } = props;\n  const cls = p.class;\n  delete p.class;\n  return /* @__PURE__ */ jsx(C, { class: [classNames, cls, className], ...p });\n};\nfunction style$1(comp) {\n  function tw2(strings, ...values) {\n    if (isTemp(strings)) {\n      const C = comp;\n      const r = useMemo(() => strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\"));\n      return C ? (props) => extract(C, props, r) : r;\n    }\n    return style$1(strings).tw;\n  }\n  return { comp, tw: tw2 };\n}\nconst tw = style$1().tw;\nfunction style(comp) {\n  function css2(strings, ...values) {\n    if (isTemp(strings)) {\n      const C = comp;\n      const r = useMemo(() => strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\"));\n      return C ? (props) => /* @__PURE__ */ jsx(C, { style: r, ...props }) : r;\n    }\n    return style(strings).css;\n  }\n  return { comp, css: css2 };\n}\nconst css = style().css;\nconst append = (child, parent) => {\n  return useEffect(() => {\n    const [c, p] = [$$($$(child)), $$($$(parent))];\n    p.appendChild(c);\n    const um = () => p.removeChild(c);\n    return um;\n  });\n};\nfunction Styled(comp) {\n  function styled2(strings, ...values) {\n    if (isTemp(strings)) {\n      const C = comp;\n      const N = \"_\" + nanoid(10);\n      useEffect(() => {\n        const r = `.${N} {\n${strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\")}\n}`;\n        return append(/* @__PURE__ */ jsx(\"style\", { id: N, children: r }), document.head);\n      });\n      return C ? (props) => extract(C, props, N) : N;\n    }\n    return Styled(strings).styled;\n  }\n  return { comp, styled: styled2 };\n}\nconst styled = Styled().styled;\nfunction kf(name, id = false) {\n  function keyframes2(strings, ...values) {\n    if (isTemp(strings)) {\n      const N = name ?? \"_\" + nanoid(10);\n      useEffect(() => {\n        const r = `@keyframes ${N} {\n${strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\")}\n}`;\n        return append(/* @__PURE__ */ jsx(\"style\", { id: id ? N : void 0, children: r }), document.head);\n      });\n      return N;\n    }\n    return kf(strings);\n  }\n  return keyframes2;\n}\nconst keyframes = kf();\nexport {\n  append,\n  css,\n  keyframes,\n  styled,\n  tw\n};\n//# sourceMappingURL=index.es.js.map\n","import { $, $$, useEffect, useMemo, store, isStore, isObservable, createContext, useContext, isArray as isArray$1, setRef } from \"woby\";\nimport { jsx } from \"woby/jsx-runtime\";\nfunction useBoolean(defaultValue) {\n  const value = $(!!$$(defaultValue));\n  const setTrue = () => value(true);\n  const setFalse = () => value(false);\n  const toggle = () => value((x) => !x);\n  return { value, setTrue, setFalse, toggle };\n}\nfunction useEventListener(element, eventName, handler, options) {\n  const savedHandler = $(handler);\n  useEffect(() => {\n    const targetElement = $$(element) ?? window;\n    if (!(targetElement && targetElement.addEventListener)) return void 0;\n    const listener = (event) => savedHandler()(event);\n    targetElement.addEventListener(eventName.toLowerCase(), listener, options);\n    return () => {\n      targetElement.removeEventListener(eventName.toLowerCase(), listener, options);\n    };\n  });\n}\nfunction useClickAnyWhere(handler) {\n  useEventListener(window, \"click\", (event) => {\n    handler(event);\n  });\n}\nfunction useCopyToClipboard() {\n  const copiedText = $(null);\n  const copy = async (text) => {\n    if (!(navigator == null ? void 0 : navigator.clipboard)) {\n      console.warn(\"Clipboard not supported\");\n      return false;\n    }\n    try {\n      await navigator.clipboard.writeText(text);\n      copiedText(text);\n      return true;\n    } catch (error) {\n      console.warn(\"Copy failed\", error);\n      copiedText(null);\n      return false;\n    }\n  };\n  return [copiedText, copy];\n}\nfunction useCounter(initialValue) {\n  const count = $($$(initialValue) || 0);\n  const increment = () => count((x) => x + 1);\n  const decrement = () => count((x) => x - 1);\n  const reset = () => count($$(initialValue) || 0);\n  return {\n    count,\n    increment,\n    decrement,\n    reset\n  };\n}\nfunction useInterval(callback, delay) {\n  const savedCallback = $(callback);\n  useEffect(() => {\n    if (!$$(delay) && $$(delay) !== 0) {\n      return void 0;\n    }\n    const id = setInterval(() => savedCallback()(), $$(delay));\n    return () => clearInterval(id);\n  });\n}\nfunction useCountdown(countdownOption) {\n  let isDeprecated = false;\n  let countStart, intervalMs, isIncrement, countStop;\n  if (\"seconds\" in countdownOption) {\n    console.warn(\n      \"[useCountdown:DEPRECATED] new interface is already available (see https://use-woby.com/react-hook/use-countdown), the old version will retire on use-woby@3.\"\n    );\n    isDeprecated = true;\n    countStart = countdownOption.seconds;\n    intervalMs = countdownOption.interval;\n    isIncrement = countdownOption.isIncrement;\n  } else {\n    ({ countStart, intervalMs, isIncrement, countStop } = countdownOption);\n  }\n  intervalMs = intervalMs ?? 1e3;\n  isIncrement = isIncrement ?? false;\n  countStop = countStop ?? 0;\n  const {\n    count,\n    increment,\n    decrement,\n    reset: resetCounter\n  } = useCounter(countStart);\n  const {\n    value: isCountdownRunning,\n    setTrue: startCountdown,\n    setFalse: stopCountdown\n  } = useBoolean(false);\n  const resetCountdown = () => {\n    stopCountdown();\n    resetCounter();\n  };\n  const countdownCallback = () => {\n    if (count() === $$(countStop)) {\n      stopCountdown();\n      return;\n    }\n    if ($$(isIncrement)) {\n      increment();\n    } else {\n      decrement();\n    }\n  };\n  const delay = useMemo(() => $$(isCountdownRunning) ? $$(intervalMs) : null);\n  useInterval(countdownCallback, delay);\n  return isDeprecated ? [\n    count,\n    {\n      start: startCountdown,\n      stop: stopCountdown,\n      reset: resetCountdown\n    }\n  ] : [\n    count,\n    {\n      startCountdown,\n      stopCountdown,\n      resetCountdown\n    }\n  ];\n}\nconst localStoreDic = {};\nfunction useLocalStorage(key, initialValue) {\n  if (localStoreDic[key])\n    return localStoreDic[key];\n  const readValue = () => {\n    if (typeof window === \"undefined\") {\n      return $$(initialValue);\n    }\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? parseJSON$1(item) : $$(initialValue);\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return $$(initialValue);\n    }\n  };\n  const storedValue = $(readValue());\n  localStoreDic[key] = storedValue;\n  useEffect(() => {\n    if (typeof window === \"undefined\") {\n      console.warn(\n        `Tried setting localStorage key “${key}” even though environment is not a client`\n      );\n    }\n    try {\n      const newValue = storedValue();\n      window.localStorage.setItem(key, JSON.stringify(newValue));\n      window.dispatchEvent(new Event(\"local-storage\"));\n    } catch (error) {\n      console.warn(`Error setting localStorage key “${key}”:`, error);\n    }\n  });\n  const handleStorageChange = (event) => {\n    if ((event == null ? void 0 : event.key) && event.key !== key) {\n      return;\n    }\n    storedValue(readValue());\n  };\n  useEventListener(window, \"storage\", handleStorageChange);\n  useEventListener(window, \"local-storage\", handleStorageChange);\n  return storedValue;\n}\nfunction parseJSON$1(value) {\n  try {\n    return value === \"undefined\" ? void 0 : JSON.parse(value ?? \"\");\n  } catch {\n    console.log(\"parsing error on\", { value });\n    return void 0;\n  }\n}\nfunction useMediaQuery(query) {\n  const getMatches = (query2) => {\n    if (typeof window !== \"undefined\") {\n      return window.matchMedia(query2).matches;\n    }\n    return false;\n  };\n  const matches = $(getMatches(query));\n  function handleChange() {\n    matches(getMatches(query));\n  }\n  useEffect(() => {\n    const matchMedia = window.matchMedia(query);\n    handleChange();\n    if (matchMedia.addListener) {\n      matchMedia.addListener(handleChange);\n    } else {\n      matchMedia.addEventListener(\"change\", handleChange);\n    }\n    return () => {\n      if (matchMedia.removeListener) {\n        matchMedia.removeListener(handleChange);\n      } else {\n        matchMedia.removeEventListener(\"change\", handleChange);\n      }\n    };\n  });\n  return matches;\n}\nconst COLOR_SCHEME_QUERY$1 = \"(prefers-color-scheme: dark)\";\nfunction useDarkMode(defaultValue) {\n  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY$1);\n  const darkmode = useLocalStorage(\n    \"useVoby-ts-dark-mode\",\n    $$(defaultValue) ?? isDarkOS() ?? false\n  );\n  useEffect(() => {\n    darkmode(isDarkOS());\n  });\n  return {\n    darkmode,\n    toggle: () => darkmode((prev) => !prev),\n    enable: () => darkmode(true),\n    disable: () => darkmode(false)\n  };\n}\nfunction useDebounce(value, delay) {\n  const debouncedValue = $($$(value));\n  useEffect(() => {\n    const timer = setTimeout(() => debouncedValue($$(value)), $$(delay) || 500);\n    return () => {\n      clearTimeout(timer);\n    };\n  });\n  return debouncedValue;\n}\nconst useIsomorphicLayoutEffect = useEffect;\nfunction useDocumentTitle(title) {\n  useIsomorphicLayoutEffect(() => {\n    window.document.title = $$(title);\n  });\n}\nfunction useElementSize() {\n  const ref = $(null);\n  const size = $({\n    width: 0,\n    height: 0\n  });\n  const handleSize = () => {\n    var _a, _b;\n    size({\n      width: ((_a = ref()) == null ? void 0 : _a.offsetWidth) || 0,\n      height: ((_b = ref()) == null ? void 0 : _b.offsetHeight) || 0\n    });\n  };\n  useEffect(() => {\n    console.log(ref());\n  });\n  useEventListener(ref, \"resize\", handleSize);\n  return [ref, size];\n}\nfunction useEventCallback(fn) {\n  const ref = $(() => {\n    throw new Error(\"Cannot call an event handler while rendering.\");\n  });\n  useIsomorphicLayoutEffect(() => {\n    ref(fn);\n  });\n  return (...args) => ref()(...args);\n}\nfunction useFetch(url, options) {\n  const cache = $({});\n  const cancelRequest = $(false);\n  const state = store({\n    error: void 0,\n    data: void 0,\n    loading: function() {\n      return this;\n    },\n    fetched: function(data) {\n      this.data = data;\n    },\n    Error: function(error) {\n      this.error = error;\n    }\n  });\n  useEffect(() => {\n    const u = $$(url);\n    if (!u) return void cancelRequest(false);\n    const fetchData = async () => {\n      state.loading();\n      if (cache()[u]) {\n        state.fetched(cache()[u]);\n        return;\n      }\n      try {\n        const response = await fetch(u, options);\n        if (!response.ok) {\n          throw new Error(response.statusText);\n        }\n        const data = await response.json();\n        cache()[u] = data;\n        if (cancelRequest()) return;\n        state.fetched(data);\n      } catch (error) {\n        if (cancelRequest()) return;\n        state.Error(error);\n      }\n    };\n    void fetchData();\n    return () => {\n      cancelRequest(true);\n    };\n  });\n  return state;\n}\nfunction useHover(elementRef) {\n  const value = $(false);\n  const handleMouseEnter = () => value(true);\n  const handleMouseLeave = () => value(false);\n  useEventListener(elementRef, \"mouseenter\", handleMouseEnter);\n  useEventListener(elementRef, \"mouseleave\", handleMouseLeave);\n  return value;\n}\nfunction useImageOnLoad() {\n  const isLoaded = $(false);\n  const handleImageOnLoad = () => {\n    isLoaded(true);\n  };\n  const css = useMemo(() => ({\n    // Thumbnail style.\n    thumbnail: {\n      visibility: isLoaded() ? \"hidden\" : \"visible\",\n      filter: \"blur(8px)\",\n      transition: \"visibility 0ms ease-out 500ms\"\n    },\n    // Full image style.\n    fullSize: {\n      opacity: isLoaded() ? 1 : 0,\n      transition: \"opacity 500ms ease-in 0ms\"\n    }\n  }));\n  return { handleImageOnLoad, css };\n}\nfunction useIntersectionObserver(elementRef, {\n  threshold = 0,\n  root = null,\n  rootMargin = \"0%\",\n  freezeOnceVisible = false\n}) {\n  var _a;\n  const entry = $();\n  const frozen = ((_a = entry()) == null ? void 0 : _a.isIntersecting) && freezeOnceVisible;\n  const updateEntry = ([e]) => {\n    entry(e);\n  };\n  useEffect(() => {\n    const node = elementRef();\n    const hasIOSupport = !!window.IntersectionObserver;\n    if (!hasIOSupport || frozen || !node)\n      return;\n    const observerParams = { threshold, root, rootMargin };\n    const observer = new IntersectionObserver(updateEntry, observerParams);\n    observer.observe(node);\n    return () => observer.disconnect();\n  });\n  return entry;\n}\nfunction useLockedBody(initialLocked = false, rootId = \"___gatsby\") {\n  const locked = $(initialLocked);\n  useIsomorphicLayoutEffect(() => {\n    if (!locked()) {\n      return;\n    }\n    const originalOverflow = document.body.style.overflow;\n    const originalPaddingRight = document.body.style.paddingRight;\n    document.body.style.overflow = \"hidden\";\n    const root = document.getElementById(rootId);\n    const scrollBarWidth = root ? root.offsetWidth - root.scrollWidth : 0;\n    if (scrollBarWidth) {\n      document.body.style.paddingRight = `${scrollBarWidth}px`;\n    }\n    return () => {\n      document.body.style.overflow = originalOverflow;\n      if (scrollBarWidth) {\n        document.body.style.paddingRight = originalPaddingRight;\n      }\n    };\n  });\n  useEffect(() => {\n    if (locked() !== initialLocked) {\n      locked(initialLocked);\n    }\n  });\n  return locked;\n}\nfunction isPrimitive$1(test) {\n  return test !== Object(test);\n}\nfunction useMap(initialState) {\n  function addElements(entries) {\n    const map2 = {};\n    if (entries instanceof Map) {\n      entries.forEach((value, key) => {\n        map2[key] = value;\n      });\n    } else if (Array.isArray(entries)) {\n      for (let value of entries) {\n        map2[value[0]] = value[1];\n      }\n    } else if (isPrimitive$1(entries) == true) {\n      return store({});\n    } else {\n      Object.assign(map2, entries);\n    }\n    return store(map2);\n  }\n  const map = initialState instanceof Map || Array.isArray(initialState) || isPrimitive$1(initialState) ? addElements(initialState) : isStore(initialState) ? initialState : store(initialState);\n  const actions = {\n    set: function(key, value) {\n      map[key] = value;\n    },\n    setAll: function(entries) {\n      this.reset();\n      if (entries instanceof Map) {\n        entries.forEach((value, key) => {\n          map[key] = value;\n        });\n      } else if (Array.isArray(entries)) {\n        for (let value of entries) {\n          map[value[0]] = value[1];\n        }\n      } else if (isPrimitive$1(entries) == true) {\n        return;\n      } else {\n        this.reset();\n        Object.assign(map, entries);\n      }\n    },\n    remove: (key) => delete map[key],\n    reset: function() {\n      Object.getOwnPropertyNames(map).forEach((prop) => delete map[prop]);\n    },\n    entries: () => Object.entries(map)\n  };\n  return [map, actions];\n}\nfunction useOnClickOutside(ref, handler, mouseEvent = \"mousedown\") {\n  useEventListener(window, mouseEvent, (event) => {\n    const el = ref();\n    if (!el || el.contains(event.target)) {\n      return;\n    }\n    handler(event);\n  });\n}\nfunction useReadLocalStorage(key) {\n  if (localStoreDic[key])\n    return localStoreDic[key];\n  const readValue = () => {\n    if (typeof window === \"undefined\") {\n      return null;\n    }\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : null;\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return null;\n    }\n  };\n  const storedValue = $(readValue());\n  localStoreDic[key] = storedValue;\n  useEffect(() => {\n    storedValue(readValue());\n  });\n  const handleStorageChange = (event) => {\n    if ((event == null ? void 0 : event.key) && event.key !== key) {\n      return;\n    }\n    storedValue(readValue());\n  };\n  useEventListener(window, \"storage\", handleStorageChange);\n  useEventListener(window, \"local-storage\", handleStorageChange);\n  return storedValue;\n}\nfunction useScreen() {\n  const getScreen = () => {\n    if (typeof window !== \"undefined\" && window.screen) {\n      return window.screen;\n    }\n    return void 0;\n  };\n  const screen = $(getScreen());\n  function handleSize() {\n    screen(getScreen());\n  }\n  useEventListener(window, \"resize\", handleSize);\n  useIsomorphicLayoutEffect(() => {\n    handleSize();\n  });\n  return screen;\n}\nconst cachedScriptStatuses = {};\nfunction getScriptNode(src) {\n  const node = document.querySelector(\n    `script[src=\"${src}\"]`\n  );\n  const status = node == null ? void 0 : node.getAttribute(\"data-status\");\n  return {\n    node,\n    status\n  };\n}\nfunction useScript(src, options) {\n  const status = $((() => {\n    if (!src || (options == null ? void 0 : options.shouldPreventLoad)) {\n      return \"idle\";\n    }\n    if (typeof window === \"undefined\") {\n      return \"loading\";\n    }\n    return cachedScriptStatuses[src] ?? \"loading\";\n  })());\n  useEffect(() => {\n    if (!src || (options == null ? void 0 : options.shouldPreventLoad)) {\n      return;\n    }\n    const cachedScriptStatus = cachedScriptStatuses[src];\n    if (cachedScriptStatus === \"ready\" || cachedScriptStatus === \"error\") {\n      status(cachedScriptStatus);\n      return;\n    }\n    const script = getScriptNode(src);\n    let scriptNode = script.node;\n    if (!scriptNode) {\n      scriptNode = document.createElement(\"script\");\n      scriptNode.src = src;\n      scriptNode.async = true;\n      scriptNode.setAttribute(\"data-status\", \"loading\");\n      document.body.appendChild(scriptNode);\n      const setAttributeFromEvent = (event) => {\n        const scriptStatus = event.type === \"load\" ? \"ready\" : \"error\";\n        scriptNode == null ? void 0 : scriptNode.setAttribute(\"data-status\", scriptStatus);\n      };\n      scriptNode.addEventListener(\"load\", setAttributeFromEvent);\n      scriptNode.addEventListener(\"error\", setAttributeFromEvent);\n    } else {\n      status(script.status ?? cachedScriptStatus ?? \"loading\");\n    }\n    const setStateFromEvent = (event) => {\n      const newStatus = event.type === \"load\" ? \"ready\" : \"error\";\n      status(newStatus);\n      cachedScriptStatuses[src] = newStatus;\n    };\n    scriptNode.addEventListener(\"load\", setStateFromEvent);\n    scriptNode.addEventListener(\"error\", setStateFromEvent);\n    return () => {\n      if (scriptNode) {\n        scriptNode.removeEventListener(\"load\", setStateFromEvent);\n        scriptNode.removeEventListener(\"error\", setStateFromEvent);\n      }\n      if (scriptNode && (options == null ? void 0 : options.removeOnUnmount)) {\n        scriptNode.remove();\n      }\n    };\n  });\n  return status;\n}\nconst sessionStorageDic = {};\nfunction useSessionStorage(key, initialValue) {\n  if (sessionStorageDic[key])\n    return sessionStorageDic[key];\n  const readValue = () => {\n    if (typeof window === \"undefined\") {\n      return initialValue;\n    }\n    try {\n      const item = window.sessionStorage.getItem(key);\n      return item ? parseJSON(item) : initialValue;\n    } catch (error) {\n      console.warn(`Error reading sessionStorage key “${key}”:`, error);\n      return initialValue;\n    }\n  };\n  const storedValue = $(readValue());\n  useEffect(() => {\n    if (typeof window == \"undefined\") {\n      console.warn(\n        `Tried setting sessionStorage key “${key}” even though environment is not a client`\n      );\n    }\n    try {\n      const newValue = storedValue();\n      window.sessionStorage.setItem(key, JSON.stringify(newValue));\n      window.dispatchEvent(new Event(\"session-storage\"));\n    } catch (error) {\n      console.warn(`Error setting sessionStorage key “${key}”:`, error);\n    }\n  });\n  const handleStorageChange = (event) => {\n    if ((event == null ? void 0 : event.key) && event.key !== key) {\n      return;\n    }\n    storedValue(readValue());\n  };\n  useEventListener(window, \"storage\", handleStorageChange);\n  useEventListener(window, \"session-storage\", handleStorageChange);\n  return storedValue;\n}\nfunction parseJSON(value) {\n  try {\n    return value === \"undefined\" ? void 0 : JSON.parse(value ?? \"\");\n  } catch {\n    console.log(\"parsing error on\", { value });\n    return void 0;\n  }\n}\nfunction useSsr() {\n  const isDOM = typeof window !== \"undefined\" && window.document && window.document.documentElement;\n  return {\n    isBrowser: isDOM,\n    isServer: !isDOM\n  };\n}\nfunction useStep(maxStep) {\n  const ms = $$(maxStep);\n  const currentStep = $(1);\n  const canGoToNextStep = useMemo(() => currentStep() + 1 <= ms);\n  const canGoToPrevStep = useMemo(() => currentStep() - 1 >= 1);\n  const setStep = (step) => {\n    const newStep = step instanceof Function ? step(currentStep()) : step;\n    if (newStep >= 1 && newStep <= ms) {\n      currentStep(newStep);\n      return;\n    }\n    throw new Error(\"Step not valid\");\n  };\n  const goToNextStep = () => {\n    if (canGoToNextStep) {\n      currentStep((step) => step + 1);\n    }\n  };\n  const goToPrevStep = () => {\n    if (canGoToPrevStep) {\n      currentStep((step) => step - 1);\n    }\n  };\n  const reset = () => {\n    currentStep(1);\n  };\n  return [\n    currentStep,\n    {\n      goToNextStep,\n      goToPrevStep,\n      canGoToNextStep,\n      canGoToPrevStep,\n      setStep,\n      reset\n    }\n  ];\n}\nconst COLOR_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\nfunction useTernaryDarkMode() {\n  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);\n  const ternaryDarkMode = useLocalStorage(\"use-woby-ternary-dark-mode\", \"system\");\n  const isDarkMode = $(isDarkOS());\n  useEffect(() => {\n    if (ternaryDarkMode() === \"system\") {\n      isDarkMode(isDarkOS());\n    }\n  });\n  useEffect(() => {\n    switch (ternaryDarkMode()) {\n      case \"light\":\n        isDarkMode(false);\n        break;\n      case \"system\":\n        isDarkMode(isDarkOS);\n        break;\n      case \"dark\":\n        isDarkMode(true);\n        break;\n    }\n  });\n  function toggleTernaryDarkMode() {\n    const toggleDict = {\n      light: \"system\",\n      system: \"dark\",\n      dark: \"light\"\n    };\n    ternaryDarkMode((prevMode) => toggleDict[prevMode]);\n  }\n  return {\n    isDarkMode,\n    ternaryDarkMode,\n    toggleTernaryDarkMode\n  };\n}\nfunction useTimeout(callback, delay) {\n  const savedCallback = $(callback);\n  useEffect(() => {\n    if (!delay && delay !== 0) {\n      return;\n    }\n    const id = setTimeout(() => savedCallback()(), delay);\n    return () => clearTimeout(id);\n  });\n}\nfunction useToggle(defaultValue) {\n  const value = $(!!$$(defaultValue));\n  const toggle = () => value((x) => !x);\n  return [value, toggle];\n}\nfunction useWindowSize() {\n  const width = $(0);\n  const height = $(0);\n  const handleSize = () => {\n    width(window.innerWidth);\n    height(window.innerHeight);\n  };\n  useEventListener(window, \"resize\", handleSize);\n  useIsomorphicLayoutEffect(() => {\n    handleSize();\n  });\n  return { width, height };\n}\nfunction useViewportSize() {\n  const width = $(0);\n  const height = $(0);\n  const offsetLeft = $(0);\n  const offsetTop = $(0);\n  const pageLeft = $(0);\n  const pageTop = $(0);\n  const scale = $(0);\n  const handleSize = () => {\n    width(visualViewport.width);\n    height(visualViewport.height);\n    offsetLeft(visualViewport.offsetLeft);\n    offsetTop(visualViewport.offsetTop);\n    pageLeft(visualViewport.pageLeft);\n    pageTop(visualViewport.pageTop);\n    scale(visualViewport.scale);\n  };\n  useEventListener(visualViewport, \"resize\", handleSize);\n  useEventListener(visualViewport, \"scroll\", handleSize);\n  useEventListener(window, \"pointermove\", handleSize);\n  useIsomorphicLayoutEffect(() => {\n    handleSize();\n  });\n  return {\n    width,\n    height,\n    offsetLeft,\n    offsetTop,\n    pageLeft,\n    pageTop,\n    scale\n  };\n}\nfunction useAspect() {\n  const { width, height } = useWindowSize();\n  return useMemo(() => $$(width) / $$(height));\n}\nconst isPrimitive = (value) => {\n  const t = typeof value;\n  return !(t === \"object\" || t === \"function\");\n};\nfunction mv(target, source) {\n  const targetValue = target;\n  const sourceValue = source;\n  if (typeof targetValue === \"string\" && typeof sourceValue === \"string\")\n    return `${targetValue} ${sourceValue}`.trim();\n  else if (typeof targetValue === \"object\" && typeof sourceValue === \"object\")\n    return { ...targetValue, ...sourceValue };\n  return source;\n}\nconst set = (target, source, merge) => {\n  if (merge)\n    target(mv($$(target), $$(source)));\n  else\n    target($$(source));\n};\nconst assign = (target, source, options) => {\n  if (!source) return target;\n  const { condition: method = \"all\", copyByRef = true, keepTargetNoObservable = false, track = false, merge = [] } = options ?? {};\n  const m = merge.reduce((acc, item) => (acc[item] = true, acc), {});\n  const keys = (() => {\n    switch (method) {\n      case \"new\":\n        return Object.keys(source).filter((key) => !(key in target));\n      case \"old\":\n        return Object.keys(target).filter((key) => key in source);\n      case \"empty\":\n        return Object.keys(source).filter((key) => {\n          const targetValue = target[key];\n          const sourceValue = source[key];\n          const isTargetEmpty = targetValue === void 0 || targetValue === null || targetValue === 0 || isNaN(targetValue) || targetValue === \"\" || Array.isArray(targetValue) && targetValue.length === 0;\n          const isSourceNonEmpty = !(sourceValue === void 0 || sourceValue === null || sourceValue === 0 || isNaN(sourceValue) || sourceValue === \"\" || Array.isArray(sourceValue) && sourceValue.length === 0);\n          return isTargetEmpty && isSourceNonEmpty;\n        });\n      default:\n        return Object.keys(source);\n    }\n  })();\n  keys.forEach((key) => {\n    if (copyByRef) {\n      if (isObservable(target[key])) {\n        set(target[key], source[key], m[key]);\n        if (track && isObservable(source[key]))\n          useEffect(() => set(target[key], source[key], m[key]));\n      } else {\n        const temp = $$(target[key]);\n        target[key] = isObservable(source[key]) ? source[key] : $(source[key]);\n        if (m[key])\n          target[key](mv(temp, $$(source[key])));\n      }\n    } else {\n      if (typeof $$(source[key]) === \"object\") {\n        if (isObservable(target[key])) {\n          if (typeof $$(target[key]) === \"object\")\n            assign($$(target[key]), $$(source[key]), options);\n          else {\n            target[key](assign({}, $$(source[key]), options));\n            if (track && isObservable(source[key]))\n              useEffect(() => {\n                target[key](assign({}, $$(source[key]), options));\n              });\n          }\n        } else {\n          const temp = target[key];\n          target[key] = keepTargetNoObservable ? assign(m[key] ? temp : {}, $$(source[key]), options) : $(assign(m[key] ? temp : {}, $$(source[key]), options));\n          if (track && isObservable(target[key]) && isObservable(source[key]))\n            useEffect(() => {\n              target[key](assign(m[key] ? temp : {}, $$(source[key]), options));\n            });\n        }\n      } else {\n        if (isObservable(target[key])) {\n          set(target[key], source[key], m[key]);\n          const temp = $$(target[key]);\n          if (track && isObservable(source[key]))\n            useEffect(() => target[key](m[key] ? mv(temp, $$(source[key])) : $$(source[key])));\n        } else {\n          const temp = target[key];\n          target[key] = keepTargetNoObservable ? source[key] : target[key] = isObservable(source[key]) ? source[key] : $(source[key]);\n          if (m[key])\n            target[key](mv(temp, $$(source[key])));\n          if (track && isObservable(target[key]) && isObservable(source[key])) {\n            if (target[key] !== source[key])\n              useEffect(() => target[key](m[key] ? mv(temp, $$(source[key])) : $$(source[key])));\n          }\n        }\n      }\n    }\n  });\n  return target;\n};\nconst clone = (source, deepClone = false) => {\n  const newObject = {};\n  Object.keys(source).forEach((key) => {\n    if (typeof source[key] === \"function\" && !isObservable(source[key]))\n      newObject[key] = source[key];\n    else if (isObservable(source[key]))\n      newObject[key] = $($$(source[key]));\n    else if (typeof source[key] == \"object\" && deepClone) {\n      const innerObject = clone(source[key]);\n      newObject[key] = innerObject;\n    } else\n      newObject[key] = source[key];\n  });\n  return newObject;\n};\nconst clear = (o) => Object.keys(o).forEach((k) => {\n  var _a;\n  return (_a = o[k]) == null ? void 0 : _a.call(o);\n});\nconst make = (obj, inplace = false) => {\n  const o = inplace ? obj : { ...obj };\n  Object.keys(o).forEach((k) => o[k] = typeof o[k] !== \"function\" ? $(o[k]) : o[k]);\n  return o;\n};\nconst $$$ = (obj, ...keys) => {\n  const ro = $$(obj);\n  if (isPrimitive(ro) || typeof ro === \"undefined\" || ro === null) return ro;\n  const no = {};\n  try {\n    (keys && keys.length ? keys : Object.keys(ro)).forEach(\n      (k) => no[k] = isObservable(ro[k]) ? $$(ro[k]) : ro[k]\n    );\n  } catch (ex) {\n    console.error(ex);\n  }\n  return no;\n};\nconst $$$$ = (obj, ...keys) => {\n  const ro = $$(obj);\n  if (isPrimitive(ro) || typeof ro === \"undefined\" || ro === null) return ro;\n  const no = {};\n  try {\n    (keys && keys.length ? keys : Object.keys(ro)).forEach(\n      (k) => no[k] = isObservable(ro[k]) ? $$$$(ro[k]) : ro[k]\n    );\n  } catch (ex) {\n    console.error(ex);\n  }\n  return no;\n};\nfunction useClickAway(ref, clickEvent) {\n  useEffect(() => {\n    const handleClickOutside = (event) => {\n      if ($$(ref) && !$$(ref).contains(event.target))\n        clickEvent();\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  });\n}\nconst ClickAwayWrapper = ({ clickEvent, children, ...props }) => {\n  const wrapperRef = $(null);\n  useClickAway(wrapperRef, clickEvent);\n  return /* @__PURE__ */ jsx(\"div\", { ref: wrapperRef, children });\n};\nconst useInvert = (ori) => {\n  const inv = $(!$$(ori));\n  useEffect(() => {\n    if (isObservable(ori))\n      ori(!$$(inv));\n  });\n  useEffect(() => {\n    inv(!$$(ori));\n  });\n  return inv;\n};\nfunction isArray(value) {\n  return Array.isArray(value);\n}\nconst useDestruct = (o, ...keys) => {\n  if (isArray($$(o))) {\n    const r = [];\n    $$(o).forEach((k, index) => r[index] = useMemo(() => $$(o)[index]));\n    return r;\n  } else {\n    const r = {};\n    keys.forEach((k) => r[k] = useMemo(() => {\n      var _a;\n      return (_a = $$(o)) == null ? void 0 : _a[k];\n    }));\n    return r;\n  }\n};\nconst usePause = (delay) => new Promise((resolve) => setTimeout(() => resolve(), delay));\nconst Timeout = ({ children, timeout = 1 }) => {\n  const r = $();\n  setTimeout(() => r(children), timeout);\n  return useMemo(() => $$(r));\n};\nconst useTimer = (startImmediately = true) => {\n  const startTime = $(startImmediately ? Date.now() : null);\n  const pauseTime = $(null);\n  const laps = $([]);\n  const total = $(0);\n  const start = () => startTime(Date.now());\n  const pause = () => {\n    if ($$(startTime) !== null && $$(pauseTime) === null)\n      pauseTime(Date.now());\n  };\n  const split = (message) => {\n    if ($$(startTime) !== null) {\n      const currentTime = Date.now();\n      const elapsedMs = currentTime - $$(startTime);\n      laps([...$$(laps), { message: message ?? $$(laps).length.toString(), ms: elapsedMs }]);\n      startTime(currentTime);\n    }\n  };\n  const stop = (message) => {\n    if ($$(startTime) !== null) {\n      const endTimeValue = $$(pauseTime) !== null ? $$(pauseTime) : Date.now();\n      const elapsedMs = endTimeValue - $$(startTime) - ($$(pauseTime) !== null ? Date.now() - $$(pauseTime) : 0);\n      laps([...$$(laps), { message: message ?? \"Stop\", ms: elapsedMs }]);\n      total($$(total) + elapsedMs);\n      startTime(null);\n      pauseTime(null);\n    }\n  };\n  useEffect(() => () => stop());\n  return {\n    start,\n    pause,\n    split,\n    stop,\n    total,\n    reset: () => {\n      total(0);\n      startTime(null);\n      pauseTime(null);\n      laps([]);\n    },\n    laps\n  };\n};\nconst ArrayContext = createContext();\nfunction useArray() {\n  const context = useContext(ArrayContext);\n  return context;\n}\nconst array = ({ children, arrayContext, itemContext, ref, ...props }) => {\n  if (!children) return [];\n  const childs = isArray$1(children) ? children : [children];\n  const array2 = arrayContext == null ? void 0 : arrayContext(childs);\n  setRef(array2, ref);\n  return childs.map((item, index) => /* @__PURE__ */ jsx(ArrayContext.Provider, { value: { ...array2, ...(itemContext == null ? void 0 : itemContext(item, index, array2)) ?? {}, index, item }, children: item }));\n};\nconst Array$1 = (props) => array(props);\nconst DefaultArray = ({ children }) => /* @__PURE__ */ jsx(Array$1, { arrayContext: (children2) => ({ refs: children2.map((c) => $()) }), itemContext: (item, index, ctx) => ({ ref: ctx.refs[index] }), children });\nconst useDefaultArray = () => useArray();\nconst useRatio = () => {\n  const context = useContext(ArrayContext);\n  return context;\n};\nconst Ratio = ({ children, multiple = false, group = false, ref }) => {\n  return /* @__PURE__ */ jsx(\n    Array$1,\n    {\n      ref,\n      arrayContext: (children2) => ({ refs: children2.map((_c) => $()), actives: Object.assign(children2.map((_c) => $(false)), { updated: $(0) }) }),\n      itemContext: (item, index, ctx) => {\n        return {\n          ref: ctx.refs[\n            /* base + */\n            index\n          ],\n          //flaten array index\n          active: ctx.actives[index],\n          item,\n          index: (\n            /* base +  */\n            index\n          ),\n          // childIndex: index,\n          toggle: (val) => {\n            const v = val === void 0 ? !$$(ctx.actives[index]) : val;\n            if ($$(group))\n              ctx.actives.forEach((act, i) => act(v));\n            else if ($$(multiple))\n              ctx.actives[index](v);\n            else if (v)\n              ctx.actives.forEach((act, i) => act(i === index));\n            else\n              ctx.actives[index](v);\n            ctx.actives.updated(Math.random());\n            return v;\n          }\n        };\n      },\n      children\n    }\n  );\n};\nfunction useLocation() {\n  const location = $(window.location);\n  useEffect(() => {\n    const handleLocationChange = () => location({ ...window.location });\n    window.addEventListener(\"popstate\", handleLocationChange);\n    const originalPushState = window.history.pushState;\n    const originalReplaceState = window.history.replaceState;\n    window.history.pushState = function(...args) {\n      originalPushState.apply(window.history, args);\n      handleLocationChange();\n    };\n    window.history.replaceState = function(...args) {\n      originalReplaceState.apply(window.history, args);\n      handleLocationChange();\n    };\n    return () => {\n      window.removeEventListener(\"popstate\", handleLocationChange);\n      window.history.pushState = originalPushState;\n      window.history.replaceState = originalReplaceState;\n    };\n  });\n  return location;\n}\nconst useScreenOrientation = () => {\n  const angle = $(0);\n  const type = $();\n  const handleResize = () => {\n    const { angle: a, type: t } = window.screen.orientation;\n    angle(a);\n    type(t);\n  };\n  useEventListener(window.screen.orientation, \"change\", handleResize);\n  const { dispatchEvent, unlock } = window.screen.orientation;\n  return { angle, type, dispatchEvent, unlock };\n};\nfunction useComputedStyle(target, patterns = []) {\n  const styles = $({});\n  useEffect(() => {\n    if (!$$(target)) return () => {\n    };\n    const getMatchingStyles = () => {\n      const computedStyle = window.getComputedStyle($$(target));\n      const matchedStyles = {};\n      for (const property of computedStyle) {\n        if (patterns.some(\n          (pattern) => typeof pattern === \"string\" ? property === pattern : pattern.test(property)\n        )) {\n          matchedStyles[property] = computedStyle.getPropertyValue(property);\n        }\n      }\n      return matchedStyles;\n    };\n    styles(getMatchingStyles());\n    const observer = new MutationObserver(() => {\n      const updatedStyles = getMatchingStyles();\n      styles((prevStyles) => {\n        const hasChanges = Object.keys(updatedStyles).some(\n          (key) => updatedStyles[key] !== prevStyles[key]\n        );\n        return hasChanges ? updatedStyles : prevStyles;\n      });\n    });\n    observer.observe($$(target), {\n      attributes: true,\n      attributeFilter: [\"style\", \"class\"],\n      subtree: false\n    });\n    return () => observer.disconnect();\n  });\n  return styles;\n}\nexport {\n  $$$,\n  $$$$,\n  Array$1 as Array,\n  ArrayContext,\n  ClickAwayWrapper,\n  DefaultArray,\n  Ratio,\n  Timeout,\n  array,\n  assign,\n  clear,\n  clone,\n  localStoreDic,\n  make,\n  sessionStorageDic,\n  useArray,\n  useAspect,\n  useBoolean,\n  useClickAnyWhere,\n  useClickAway,\n  useComputedStyle,\n  useCopyToClipboard,\n  useCountdown,\n  useCounter,\n  useDarkMode,\n  useDebounce,\n  useDefaultArray,\n  useDestruct,\n  useDocumentTitle,\n  useElementSize,\n  useEventCallback,\n  useEventListener,\n  useFetch,\n  useHover,\n  useImageOnLoad,\n  useIntersectionObserver,\n  useInterval,\n  useInvert,\n  useIsomorphicLayoutEffect,\n  useLocalStorage,\n  useLocation,\n  useLockedBody,\n  useMap,\n  useMediaQuery,\n  useOnClickOutside,\n  usePause,\n  useRatio,\n  useReadLocalStorage,\n  useScreen,\n  useScreenOrientation,\n  useScript,\n  useSessionStorage,\n  useSsr,\n  useStep,\n  useTernaryDarkMode,\n  useTimeout,\n  useTimer,\n  useToggle,\n  useViewportSize,\n  useWindowSize\n};\n//# sourceMappingURL=index.es.js.map\n","import { $$, $, useEffect, ObservableMaybe, Observable, isObservable, useMemo, getMeta, type JSX } from 'woby'\r\n\r\n//https://www.menucool.com/tooltip/css-tooltip\r\n\r\n\r\nimport { styled } from 'woby-styled'\r\nimport { useComputedStyle, useInvert } from 'use-woby'\r\n\r\nconst tooltipDef = `text-left border-b-[#666] border-b border-dotted \r\n[&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100\r\n`\r\n\r\nconst tooltip = `inline-block relative \r\n[&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100\r\n`\r\n\r\nconst topDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst top = `absolute z-[99999999] left-2/4 -top-5 `\r\n\r\nconst top_i = `absolute overflow-hidden top-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:rotate-45 after:left-2/4 `\r\n\r\nconst rightDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst right = `absolute z-[99999999] ml-5 left-full top-2/4 `\r\nconst right_i = `absolute overflow-hidden right-full after:content-[''] after:absolute after:translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `\r\n\r\nconst bottomDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst bottom = `absolute z-[99999999] left-2/4 top-10 `\r\nconst bottom_i = `absolute overflow-hidden bottom-full after:content-[''] after:absolute after:-translate-x-2/4 after:translate-y-2/4 after:rotate-45 after:left-2/4 `\r\n\r\nconst leftDef = `bg-[#eeeeee] min-w-[200px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst left = `absolute z-[99999999] mr-5 right-full top-2/4 `\r\nconst left_i = `absolute overflow-hidden left-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `\r\n\r\n\r\nexport const Tooltip = ({ children, class: cls = tooltipDef, className, ...props }: JSX.HTMLAttributes<HTMLDivElement>) => {\r\n    return <div class={[tooltip, cls, className]} >\r\n        {children}\r\n    </div>\r\n}\r\n\r\nfunction cssMultiply(value: ObservableMaybe<string | number>, multiplier: number): string {\r\n    const match = ($$(value) + '').match(/^(-?\\d*\\.?\\d+)([a-z%]*)$/);\r\n\r\n    if (!match)\r\n        throw new Error(`Invalid CSS unit: ${$$(value)}`);\r\n\r\n    const [, numericValue, unit] = match\r\n    const result = +numericValue * multiplier\r\n\r\n    return `${result}${unit}`\r\n}\r\n\r\nconst x2 = (value: ObservableMaybe<string | number>) => cssMultiply(value, 2)\r\n\r\nconst translate = (x: ObservableMaybe<string>, y: ObservableMaybe<string>) => `translate(${$$(x)}, ${$$(y)})`\r\n\r\nexport type PositionType = 'top' | 'right' | 'bottom' | 'left'\r\nexport const TooltipContent = ({ children, style, class: cls = $(), className, static: st, position = 'top', arrowLocation = '50%', arrowSize = '12px', ...props }: JSX.HTMLAttributes<HTMLDivElement> &\r\n{\r\n    position?: ObservableMaybe<PositionType>,\r\n    arrowLocation?: ObservableMaybe<string | number>,\r\n    arrowSize?: ObservableMaybe<string | number>,\r\n    static?: ObservableMaybe<boolean>,\r\n}) => {\r\n    const setDef = () => {\r\n        if (!$$(cls))\r\n            switch ($$(position)) {\r\n                case 'top': (cls as Observable<string>)(topDef)\r\n                case 'left': (cls as Observable<string>)(leftDef)\r\n                case 'right': (cls as Observable<string>)(rightDef)\r\n                case 'bottom': (cls as Observable<string>)(bottomDef)\r\n            }\r\n    }\r\n    useEffect(setDef)\r\n    setDef()\r\n\r\n    const pos = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'top': return top\r\n            case 'right': return right\r\n            case 'bottom': return bottom\r\n            case 'left': return left\r\n        }\r\n    })\r\n    const transform = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'top': return translate('-' + $$(arrowLocation), '-100%')\r\n            case 'left':\r\n            case 'right': return translate('0', '-' + $$(arrowLocation))\r\n            case 'bottom': return translate('-' + $$(arrowLocation), '0')\r\n        }\r\n    })\r\n    const ali = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'bottom':\r\n            case 'top': return { left: arrowLocation }\r\n            case 'left':\r\n            case 'right': return { top: arrowLocation }\r\n        }\r\n    })\r\n    const ii = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'top': return top_i + styled`  \r\n                margin-left:-${$$(arrowSize)};\r\n                width:${x2(arrowSize)};\r\n                height:${$$(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n            case 'right': return right_i + styled`  \r\n                margin-top:-${$$(arrowSize)};\r\n                width:${$$(arrowSize)};\r\n                height:${x2(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n            case 'bottom': return bottom_i + styled`  \r\n                margin-left:-${$$(arrowSize)};\r\n                width:${x2(arrowSize)};\r\n                height:${$$(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n            case 'left': return left_i + styled`  \r\n                margin-top:-${$$(arrowSize)};\r\n                width:${$$(arrowSize)};\r\n                height:${x2(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n        }\r\n    })\r\n\r\n    const tp = $<HTMLDivElement>()\r\n    const ir = $<HTMLElement>()\r\n\r\n    const sty = useComputedStyle(tp, ['background-color', /^border-(?!.*-radius$)/, 'box-shadow'])\r\n    // useEffect(() => console.log($$(sty)))\r\n    return <div ref={tp} class={[pos, cls, () => $$(st) ? '' : 'invisible opacity-0', className, 'tpcontents']} style={[style, { transform }]} {...props}>\r\n        {children}\r\n        {() => <i ref={ir} class={[ii, styled`\r\n                &::after{\r\n                    ${Object.keys($$(sty)).map(k => `${k}:${$$(sty)[k]};\\n`).join('')}\r\n                }\r\n            `]} style={ali}></i>}\r\n    </div>\r\n}\r\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.es.js","sources":["../../../node_modules/.pnpm/nanoid@3.3.7/node_modules/nanoid/index.browser.js","../../woby-styled/dist/index.es.js","../../use-woby/dist/index.es.js","../src/Tooltip.tsx"],"sourcesContent":["import { urlAlphabet } from './url-alphabet/index.js'\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n  let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      let j = step\n      while (j--) {\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length === size) return id\n      }\n    }\n  }\n}\nlet customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size, random)\nlet nanoid = (size = 21) =>\n  crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n    byte &= 63\n    if (byte < 36) {\n      id += byte.toString(36)\n    } else if (byte < 62) {\n      id += (byte - 26).toString(36).toUpperCase()\n    } else if (byte > 62) {\n      id += '-'\n    } else {\n      id += '_'\n    }\n    return id\n  }, '')\nexport { nanoid, customAlphabet, customRandom, urlAlphabet, random }\n","import { useMemo, $$, useEffect } from \"woby\";\nimport { jsx } from \"woby/jsx-runtime\";\nimport { nanoid } from \"nanoid\";\nconst isTemp = (s) => !!s.raw;\nconst extract = (C, props, classNames) => {\n  const { className, ...p } = props;\n  const cls = p.class;\n  delete p.class;\n  return /* @__PURE__ */ jsx(C, { class: [classNames, cls, className], ...p });\n};\nfunction style$1(comp) {\n  function tw2(strings, ...values) {\n    if (isTemp(strings)) {\n      const C = comp;\n      const r = useMemo(() => strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\"));\n      return C ? (props) => extract(C, props, r) : r;\n    }\n    return style$1(strings).tw;\n  }\n  return { comp, tw: tw2 };\n}\nconst tw = style$1().tw;\nfunction style(comp) {\n  function css2(strings, ...values) {\n    if (isTemp(strings)) {\n      const C = comp;\n      const r = useMemo(() => strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\"));\n      return C ? (props) => /* @__PURE__ */ jsx(C, { style: r, ...props }) : r;\n    }\n    return style(strings).css;\n  }\n  return { comp, css: css2 };\n}\nconst css = style().css;\nconst append = (child, parent) => {\n  return useEffect(() => {\n    const [c, p] = [$$($$(child)), $$($$(parent))];\n    p.appendChild(c);\n    const um = () => p.removeChild(c);\n    return um;\n  });\n};\nfunction Styled(comp) {\n  function styled2(strings, ...values) {\n    if (isTemp(strings)) {\n      const C = comp;\n      const N = \"_\" + nanoid(10);\n      useEffect(() => {\n        const r = `.${N} {\n${strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\")}\n}`;\n        return append(/* @__PURE__ */ jsx(\"style\", { id: N, children: r }), document.head);\n      });\n      return C ? (props) => extract(C, props, N) : N;\n    }\n    return Styled(strings).styled;\n  }\n  return { comp, styled: styled2 };\n}\nconst styled = Styled().styled;\nfunction kf(name, id = false) {\n  function keyframes2(strings, ...values) {\n    if (isTemp(strings)) {\n      const N = name ?? \"_\" + nanoid(10);\n      useEffect(() => {\n        const r = `@keyframes ${N} {\n${strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\")}\n}`;\n        return append(/* @__PURE__ */ jsx(\"style\", { id: id ? N : void 0, children: r }), document.head);\n      });\n      return N;\n    }\n    return kf(strings);\n  }\n  return keyframes2;\n}\nconst keyframes = kf();\nexport {\n  append,\n  css,\n  keyframes,\n  styled,\n  tw\n};\n//# sourceMappingURL=index.es.js.map\n","import { $, $$, useEffect, useMemo, store, isStore, isObservable, createContext, useContext, isArray as isArray$1, setRef } from \"woby\";\nimport { jsx } from \"woby/jsx-runtime\";\nfunction useBoolean(defaultValue) {\n  const value = $(!!$$(defaultValue));\n  const setTrue = () => value(true);\n  const setFalse = () => value(false);\n  const toggle = () => value((x) => !x);\n  return { value, setTrue, setFalse, toggle };\n}\nfunction useEventListener(element, eventName, handler, options) {\n  const savedHandler = $(handler);\n  useEffect(() => {\n    const targetElement = $$(element) ?? window;\n    if (!(targetElement && targetElement.addEventListener)) return void 0;\n    const listener = (event) => savedHandler()(event);\n    targetElement.addEventListener(eventName.toLowerCase(), listener, options);\n    return () => {\n      targetElement.removeEventListener(eventName.toLowerCase(), listener, options);\n    };\n  });\n}\nfunction useClickAnyWhere(handler) {\n  useEventListener(window, \"click\", (event) => {\n    handler(event);\n  });\n}\nfunction useCopyToClipboard() {\n  const copiedText = $(null);\n  const copy = async (text) => {\n    if (!(navigator == null ? void 0 : navigator.clipboard)) {\n      console.warn(\"Clipboard not supported\");\n      return false;\n    }\n    try {\n      await navigator.clipboard.writeText(text);\n      copiedText(text);\n      return true;\n    } catch (error) {\n      console.warn(\"Copy failed\", error);\n      copiedText(null);\n      return false;\n    }\n  };\n  return [copiedText, copy];\n}\nfunction useCounter(initialValue) {\n  const count = $($$(initialValue) || 0);\n  const increment = () => count((x) => x + 1);\n  const decrement = () => count((x) => x - 1);\n  const reset = () => count($$(initialValue) || 0);\n  return {\n    count,\n    increment,\n    decrement,\n    reset\n  };\n}\nfunction useInterval(callback, delay) {\n  const savedCallback = $(callback);\n  useEffect(() => {\n    if (!$$(delay) && $$(delay) !== 0) {\n      return void 0;\n    }\n    const id = setInterval(() => savedCallback()(), $$(delay));\n    return () => clearInterval(id);\n  });\n}\nfunction useCountdown(countdownOption) {\n  let isDeprecated = false;\n  let countStart, intervalMs, isIncrement, countStop;\n  if (\"seconds\" in countdownOption) {\n    console.warn(\n      \"[useCountdown:DEPRECATED] new interface is already available (see https://use-woby.com/react-hook/use-countdown), the old version will retire on use-woby@3.\"\n    );\n    isDeprecated = true;\n    countStart = countdownOption.seconds;\n    intervalMs = countdownOption.interval;\n    isIncrement = countdownOption.isIncrement;\n  } else {\n    ({ countStart, intervalMs, isIncrement, countStop } = countdownOption);\n  }\n  intervalMs = intervalMs ?? 1e3;\n  isIncrement = isIncrement ?? false;\n  countStop = countStop ?? 0;\n  const {\n    count,\n    increment,\n    decrement,\n    reset: resetCounter\n  } = useCounter(countStart);\n  const {\n    value: isCountdownRunning,\n    setTrue: startCountdown,\n    setFalse: stopCountdown\n  } = useBoolean(false);\n  const resetCountdown = () => {\n    stopCountdown();\n    resetCounter();\n  };\n  const countdownCallback = () => {\n    if (count() === $$(countStop)) {\n      stopCountdown();\n      return;\n    }\n    if ($$(isIncrement)) {\n      increment();\n    } else {\n      decrement();\n    }\n  };\n  const delay = useMemo(() => $$(isCountdownRunning) ? $$(intervalMs) : null);\n  useInterval(countdownCallback, delay);\n  return isDeprecated ? [\n    count,\n    {\n      start: startCountdown,\n      stop: stopCountdown,\n      reset: resetCountdown\n    }\n  ] : [\n    count,\n    {\n      startCountdown,\n      stopCountdown,\n      resetCountdown\n    }\n  ];\n}\nconst localStoreDic = {};\nfunction useLocalStorage(key, initialValue) {\n  if (localStoreDic[key])\n    return localStoreDic[key];\n  const readValue = () => {\n    if (typeof window === \"undefined\") {\n      return $$(initialValue);\n    }\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? parseJSON$1(item) : $$(initialValue);\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return $$(initialValue);\n    }\n  };\n  const storedValue = $(readValue());\n  localStoreDic[key] = storedValue;\n  useEffect(() => {\n    if (typeof window === \"undefined\") {\n      console.warn(\n        `Tried setting localStorage key “${key}” even though environment is not a client`\n      );\n    }\n    try {\n      const newValue = storedValue();\n      window.localStorage.setItem(key, JSON.stringify(newValue));\n      window.dispatchEvent(new Event(\"local-storage\"));\n    } catch (error) {\n      console.warn(`Error setting localStorage key “${key}”:`, error);\n    }\n  });\n  const handleStorageChange = (event) => {\n    if ((event == null ? void 0 : event.key) && event.key !== key) {\n      return;\n    }\n    storedValue(readValue());\n  };\n  useEventListener(window, \"storage\", handleStorageChange);\n  useEventListener(window, \"local-storage\", handleStorageChange);\n  return storedValue;\n}\nfunction parseJSON$1(value) {\n  try {\n    return value === \"undefined\" ? void 0 : JSON.parse(value ?? \"\");\n  } catch {\n    console.log(\"parsing error on\", { value });\n    return void 0;\n  }\n}\nfunction useMediaQuery(query) {\n  const getMatches = (query2) => {\n    if (typeof window !== \"undefined\") {\n      return window.matchMedia(query2).matches;\n    }\n    return false;\n  };\n  const matches = $(getMatches(query));\n  function handleChange() {\n    matches(getMatches(query));\n  }\n  useEffect(() => {\n    const matchMedia = window.matchMedia(query);\n    handleChange();\n    if (matchMedia.addListener) {\n      matchMedia.addListener(handleChange);\n    } else {\n      matchMedia.addEventListener(\"change\", handleChange);\n    }\n    return () => {\n      if (matchMedia.removeListener) {\n        matchMedia.removeListener(handleChange);\n      } else {\n        matchMedia.removeEventListener(\"change\", handleChange);\n      }\n    };\n  });\n  return matches;\n}\nconst COLOR_SCHEME_QUERY$1 = \"(prefers-color-scheme: dark)\";\nfunction useDarkMode(defaultValue) {\n  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY$1);\n  const darkmode = useLocalStorage(\n    \"useVoby-ts-dark-mode\",\n    $$(defaultValue) ?? isDarkOS() ?? false\n  );\n  useEffect(() => {\n    darkmode(isDarkOS());\n  });\n  return {\n    darkmode,\n    toggle: () => darkmode((prev) => !prev),\n    enable: () => darkmode(true),\n    disable: () => darkmode(false)\n  };\n}\nfunction useDebounce(value, delay) {\n  const debouncedValue = $($$(value));\n  useEffect(() => {\n    const timer = setTimeout(() => debouncedValue($$(value)), $$(delay) || 500);\n    return () => {\n      clearTimeout(timer);\n    };\n  });\n  return debouncedValue;\n}\nconst useIsomorphicLayoutEffect = useEffect;\nfunction useDocumentTitle(title) {\n  useIsomorphicLayoutEffect(() => {\n    window.document.title = $$(title);\n  });\n}\nfunction useElementSize() {\n  const ref = $(null);\n  const size = $({\n    width: 0,\n    height: 0\n  });\n  useEffect(() => {\n    const element = $$(ref);\n    if (!element) return () => {\n    };\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const { width, height } = entry.contentRect;\n        size({ width, height });\n      }\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  });\n  return [ref, size];\n}\nfunction useEventCallback(fn) {\n  const ref = $(() => {\n    throw new Error(\"Cannot call an event handler while rendering.\");\n  });\n  useIsomorphicLayoutEffect(() => {\n    ref(fn);\n  });\n  return (...args) => ref()(...args);\n}\nfunction useFetch(url, options) {\n  const cache = $({});\n  const cancelRequest = $(false);\n  const state = store({\n    error: void 0,\n    data: void 0,\n    loading: function() {\n      return this;\n    },\n    fetched: function(data) {\n      this.data = data;\n    },\n    Error: function(error) {\n      this.error = error;\n    }\n  });\n  useEffect(() => {\n    const u = $$(url);\n    if (!u) return void cancelRequest(false);\n    const fetchData = async () => {\n      state.loading();\n      if (cache()[u]) {\n        state.fetched(cache()[u]);\n        return;\n      }\n      try {\n        const response = await fetch(u, options);\n        if (!response.ok) {\n          throw new Error(response.statusText);\n        }\n        const data = await response.json();\n        cache()[u] = data;\n        if (cancelRequest()) return;\n        state.fetched(data);\n      } catch (error) {\n        if (cancelRequest()) return;\n        state.Error(error);\n      }\n    };\n    void fetchData();\n    return () => {\n      cancelRequest(true);\n    };\n  });\n  return state;\n}\nfunction useHover(elementRef) {\n  const value = $(false);\n  const handleMouseEnter = () => value(true);\n  const handleMouseLeave = () => value(false);\n  useEventListener(elementRef, \"mouseenter\", handleMouseEnter);\n  useEventListener(elementRef, \"mouseleave\", handleMouseLeave);\n  return value;\n}\nfunction useImageOnLoad() {\n  const isLoaded = $(false);\n  const handleImageOnLoad = () => {\n    isLoaded(true);\n  };\n  const css = useMemo(() => ({\n    // Thumbnail style.\n    thumbnail: {\n      visibility: isLoaded() ? \"hidden\" : \"visible\",\n      filter: \"blur(8px)\",\n      transition: \"visibility 0ms ease-out 500ms\"\n    },\n    // Full image style.\n    fullSize: {\n      opacity: isLoaded() ? 1 : 0,\n      transition: \"opacity 500ms ease-in 0ms\"\n    }\n  }));\n  return { handleImageOnLoad, css };\n}\nfunction useIntersectionObserver(elementRef, {\n  threshold = 0,\n  root = null,\n  rootMargin = \"0%\",\n  freezeOnceVisible = false\n}) {\n  var _a;\n  const entry = $();\n  const frozen = ((_a = entry()) == null ? void 0 : _a.isIntersecting) && freezeOnceVisible;\n  const updateEntry = ([e]) => {\n    entry(e);\n  };\n  useEffect(() => {\n    const node = elementRef();\n    const hasIOSupport = !!window.IntersectionObserver;\n    if (!hasIOSupport || frozen || !node)\n      return;\n    const observerParams = { threshold, root, rootMargin };\n    const observer = new IntersectionObserver(updateEntry, observerParams);\n    observer.observe(node);\n    return () => observer.disconnect();\n  });\n  return entry;\n}\nfunction useLockedBody(initialLocked = false, rootId = \"___gatsby\") {\n  const locked = $(initialLocked);\n  useIsomorphicLayoutEffect(() => {\n    if (!locked()) {\n      return;\n    }\n    const originalOverflow = document.body.style.overflow;\n    const originalPaddingRight = document.body.style.paddingRight;\n    document.body.style.overflow = \"hidden\";\n    const root = document.getElementById(rootId);\n    const scrollBarWidth = root ? root.offsetWidth - root.scrollWidth : 0;\n    if (scrollBarWidth) {\n      document.body.style.paddingRight = `${scrollBarWidth}px`;\n    }\n    return () => {\n      document.body.style.overflow = originalOverflow;\n      if (scrollBarWidth) {\n        document.body.style.paddingRight = originalPaddingRight;\n      }\n    };\n  });\n  useEffect(() => {\n    if (locked() !== initialLocked) {\n      locked(initialLocked);\n    }\n  });\n  return locked;\n}\nfunction isPrimitive$1(test) {\n  return test !== Object(test);\n}\nfunction useMap(initialState) {\n  function addElements(entries) {\n    const map2 = {};\n    if (entries instanceof Map) {\n      entries.forEach((value, key) => {\n        map2[key] = value;\n      });\n    } else if (Array.isArray(entries)) {\n      for (let value of entries) {\n        map2[value[0]] = value[1];\n      }\n    } else if (isPrimitive$1(entries) == true) {\n      return store({});\n    } else {\n      Object.assign(map2, entries);\n    }\n    return store(map2);\n  }\n  const map = initialState instanceof Map || Array.isArray(initialState) || isPrimitive$1(initialState) ? addElements(initialState) : isStore(initialState) ? initialState : store(initialState);\n  const actions = {\n    set: function(key, value) {\n      map[key] = value;\n    },\n    setAll: function(entries) {\n      this.reset();\n      if (entries instanceof Map) {\n        entries.forEach((value, key) => {\n          map[key] = value;\n        });\n      } else if (Array.isArray(entries)) {\n        for (let value of entries) {\n          map[value[0]] = value[1];\n        }\n      } else if (isPrimitive$1(entries) == true) {\n        return;\n      } else {\n        this.reset();\n        Object.assign(map, entries);\n      }\n    },\n    remove: (key) => delete map[key],\n    reset: function() {\n      Object.getOwnPropertyNames(map).forEach((prop) => delete map[prop]);\n    },\n    entries: () => Object.entries(map)\n  };\n  return [map, actions];\n}\nfunction useOnClickOutside(ref, handler, mouseEvent = \"mousedown\") {\n  useEventListener(window, mouseEvent, (event) => {\n    const el = ref();\n    if (!el || el.contains(event.target)) {\n      return;\n    }\n    handler(event);\n  });\n}\nfunction useReadLocalStorage(key) {\n  if (localStoreDic[key])\n    return localStoreDic[key];\n  const readValue = () => {\n    if (typeof window === \"undefined\") {\n      return null;\n    }\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : null;\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return null;\n    }\n  };\n  const storedValue = $(readValue());\n  localStoreDic[key] = storedValue;\n  useEffect(() => {\n    storedValue(readValue());\n  });\n  const handleStorageChange = (event) => {\n    if ((event == null ? void 0 : event.key) && event.key !== key) {\n      return;\n    }\n    storedValue(readValue());\n  };\n  useEventListener(window, \"storage\", handleStorageChange);\n  useEventListener(window, \"local-storage\", handleStorageChange);\n  return storedValue;\n}\nfunction useScreen() {\n  const getScreen = () => {\n    if (typeof window !== \"undefined\" && window.screen) {\n      return window.screen;\n    }\n    return void 0;\n  };\n  const screen = $(getScreen());\n  function handleSize() {\n    screen(getScreen());\n  }\n  useEventListener(window, \"resize\", handleSize);\n  useIsomorphicLayoutEffect(() => {\n    handleSize();\n  });\n  return screen;\n}\nconst cachedScriptStatuses = {};\nfunction getScriptNode(src) {\n  const node = document.querySelector(\n    `script[src=\"${src}\"]`\n  );\n  const status = node == null ? void 0 : node.getAttribute(\"data-status\");\n  return {\n    node,\n    status\n  };\n}\nfunction useScript(src, options) {\n  const status = $((() => {\n    if (!src || (options == null ? void 0 : options.shouldPreventLoad)) {\n      return \"idle\";\n    }\n    if (typeof window === \"undefined\") {\n      return \"loading\";\n    }\n    return cachedScriptStatuses[src] ?? \"loading\";\n  })());\n  useEffect(() => {\n    if (!src || (options == null ? void 0 : options.shouldPreventLoad)) {\n      return;\n    }\n    const cachedScriptStatus = cachedScriptStatuses[src];\n    if (cachedScriptStatus === \"ready\" || cachedScriptStatus === \"error\") {\n      status(cachedScriptStatus);\n      return;\n    }\n    const script = getScriptNode(src);\n    let scriptNode = script.node;\n    if (!scriptNode) {\n      scriptNode = document.createElement(\"script\");\n      scriptNode.src = src;\n      scriptNode.async = true;\n      scriptNode.setAttribute(\"data-status\", \"loading\");\n      document.body.appendChild(scriptNode);\n      const setAttributeFromEvent = (event) => {\n        const scriptStatus = event.type === \"load\" ? \"ready\" : \"error\";\n        scriptNode == null ? void 0 : scriptNode.setAttribute(\"data-status\", scriptStatus);\n      };\n      scriptNode.addEventListener(\"load\", setAttributeFromEvent);\n      scriptNode.addEventListener(\"error\", setAttributeFromEvent);\n    } else {\n      status(script.status ?? cachedScriptStatus ?? \"loading\");\n    }\n    const setStateFromEvent = (event) => {\n      const newStatus = event.type === \"load\" ? \"ready\" : \"error\";\n      status(newStatus);\n      cachedScriptStatuses[src] = newStatus;\n    };\n    scriptNode.addEventListener(\"load\", setStateFromEvent);\n    scriptNode.addEventListener(\"error\", setStateFromEvent);\n    return () => {\n      if (scriptNode) {\n        scriptNode.removeEventListener(\"load\", setStateFromEvent);\n        scriptNode.removeEventListener(\"error\", setStateFromEvent);\n      }\n      if (scriptNode && (options == null ? void 0 : options.removeOnUnmount)) {\n        scriptNode.remove();\n      }\n    };\n  });\n  return status;\n}\nconst sessionStorageDic = {};\nfunction useSessionStorage(key, initialValue) {\n  if (sessionStorageDic[key])\n    return sessionStorageDic[key];\n  const readValue = () => {\n    if (typeof window === \"undefined\") {\n      return initialValue;\n    }\n    try {\n      const item = window.sessionStorage.getItem(key);\n      return item ? parseJSON(item) : initialValue;\n    } catch (error) {\n      console.warn(`Error reading sessionStorage key “${key}”:`, error);\n      return initialValue;\n    }\n  };\n  const storedValue = $(readValue());\n  useEffect(() => {\n    if (typeof window == \"undefined\") {\n      console.warn(\n        `Tried setting sessionStorage key “${key}” even though environment is not a client`\n      );\n    }\n    try {\n      const newValue = storedValue();\n      window.sessionStorage.setItem(key, JSON.stringify(newValue));\n      window.dispatchEvent(new Event(\"session-storage\"));\n    } catch (error) {\n      console.warn(`Error setting sessionStorage key “${key}”:`, error);\n    }\n  });\n  const handleStorageChange = (event) => {\n    if ((event == null ? void 0 : event.key) && event.key !== key) {\n      return;\n    }\n    storedValue(readValue());\n  };\n  useEventListener(window, \"storage\", handleStorageChange);\n  useEventListener(window, \"session-storage\", handleStorageChange);\n  return storedValue;\n}\nfunction parseJSON(value) {\n  try {\n    return value === \"undefined\" ? void 0 : JSON.parse(value ?? \"\");\n  } catch {\n    console.log(\"parsing error on\", { value });\n    return void 0;\n  }\n}\nfunction useSsr() {\n  const isDOM = typeof window !== \"undefined\" && window.document && window.document.documentElement;\n  return {\n    isBrowser: isDOM,\n    isServer: !isDOM\n  };\n}\nfunction useStep(maxStep) {\n  const ms = $$(maxStep);\n  const currentStep = $(1);\n  const canGoToNextStep = useMemo(() => currentStep() + 1 <= ms);\n  const canGoToPrevStep = useMemo(() => currentStep() - 1 >= 1);\n  const setStep = (step) => {\n    const newStep = step instanceof Function ? step(currentStep()) : step;\n    if (newStep >= 1 && newStep <= ms) {\n      currentStep(newStep);\n      return;\n    }\n    throw new Error(\"Step not valid\");\n  };\n  const goToNextStep = () => {\n    if (canGoToNextStep) {\n      currentStep((step) => step + 1);\n    }\n  };\n  const goToPrevStep = () => {\n    if (canGoToPrevStep) {\n      currentStep((step) => step - 1);\n    }\n  };\n  const reset = () => {\n    currentStep(1);\n  };\n  return [\n    currentStep,\n    {\n      goToNextStep,\n      goToPrevStep,\n      canGoToNextStep,\n      canGoToPrevStep,\n      setStep,\n      reset\n    }\n  ];\n}\nconst COLOR_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\nfunction useTernaryDarkMode() {\n  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);\n  const ternaryDarkMode = useLocalStorage(\"use-woby-ternary-dark-mode\", \"system\");\n  const isDarkMode = $(isDarkOS());\n  useEffect(() => {\n    if (ternaryDarkMode() === \"system\") {\n      isDarkMode(isDarkOS());\n    }\n  });\n  useEffect(() => {\n    switch (ternaryDarkMode()) {\n      case \"light\":\n        isDarkMode(false);\n        break;\n      case \"system\":\n        isDarkMode(isDarkOS);\n        break;\n      case \"dark\":\n        isDarkMode(true);\n        break;\n    }\n  });\n  function toggleTernaryDarkMode() {\n    const toggleDict = {\n      light: \"system\",\n      system: \"dark\",\n      dark: \"light\"\n    };\n    ternaryDarkMode((prevMode) => toggleDict[prevMode]);\n  }\n  return {\n    isDarkMode,\n    ternaryDarkMode,\n    toggleTernaryDarkMode\n  };\n}\nfunction useTimeout(callback, delay) {\n  const savedCallback = $(callback);\n  useEffect(() => {\n    if (!delay && delay !== 0) {\n      return;\n    }\n    const id = setTimeout(() => savedCallback()(), delay);\n    return () => clearTimeout(id);\n  });\n}\nfunction useToggle(defaultValue) {\n  const value = $(!!$$(defaultValue));\n  const toggle = () => value((x) => !x);\n  return [value, toggle];\n}\nfunction useWindowSize() {\n  const width = $(0);\n  const height = $(0);\n  const handleSize = () => {\n    width(window.innerWidth);\n    height(window.innerHeight);\n  };\n  useEventListener(window, \"resize\", handleSize);\n  useIsomorphicLayoutEffect(() => {\n    handleSize();\n  });\n  return { width, height };\n}\nfunction useViewportSize() {\n  const width = $(0);\n  const height = $(0);\n  const offsetLeft = $(0);\n  const offsetTop = $(0);\n  const pageLeft = $(0);\n  const pageTop = $(0);\n  const scale = $(0);\n  const handleSize = () => {\n    width(visualViewport.width);\n    height(visualViewport.height);\n    offsetLeft(visualViewport.offsetLeft);\n    offsetTop(visualViewport.offsetTop);\n    pageLeft(visualViewport.pageLeft);\n    pageTop(visualViewport.pageTop);\n    scale(visualViewport.scale);\n  };\n  useEventListener(visualViewport, \"resize\", handleSize);\n  useEventListener(window, \"pointermove\", handleSize);\n  useEventListener(document, \"wheel\", handleSize);\n  useEventListener(document, \"scroll\", handleSize);\n  useIsomorphicLayoutEffect(() => {\n    handleSize();\n  });\n  return {\n    width,\n    height,\n    offsetLeft,\n    offsetTop,\n    pageLeft,\n    pageTop,\n    scale\n  };\n}\nfunction useAspect() {\n  const { width, height } = useWindowSize();\n  return useMemo(() => $$(width) / $$(height));\n}\nconst isPrimitive = (value) => {\n  const t = typeof value;\n  return !(t === \"object\" || t === \"function\");\n};\nfunction mv(target, source) {\n  const targetValue = target;\n  const sourceValue = source;\n  if (typeof targetValue === \"string\" && typeof sourceValue === \"string\")\n    return `${targetValue} ${sourceValue}`.trim();\n  else if (typeof targetValue === \"object\" && typeof sourceValue === \"object\")\n    return { ...targetValue, ...sourceValue };\n  return source;\n}\nconst set = (target, source, merge) => {\n  if (merge)\n    target(mv($$(target), $$(source)));\n  else\n    target($$(source));\n};\nconst assign = (target, source, options) => {\n  if (!source) return target;\n  const { condition: method = \"all\", copyByRef = true, keepTargetNoObservable = false, track = false, merge = [] } = options ?? {};\n  const m = merge.reduce((acc, item) => (acc[item] = true, acc), {});\n  const keys = (() => {\n    switch (method) {\n      case \"new\":\n        return Object.keys(source).filter((key) => !(key in target));\n      case \"old\":\n        return Object.keys(target).filter((key) => key in source);\n      case \"empty\":\n        return Object.keys(source).filter((key) => {\n          const targetValue = target[key];\n          const sourceValue = source[key];\n          const isTargetEmpty = targetValue === void 0 || targetValue === null || targetValue === 0 || isNaN(targetValue) || targetValue === \"\" || Array.isArray(targetValue) && targetValue.length === 0;\n          const isSourceNonEmpty = !(sourceValue === void 0 || sourceValue === null || sourceValue === 0 || isNaN(sourceValue) || sourceValue === \"\" || Array.isArray(sourceValue) && sourceValue.length === 0);\n          return isTargetEmpty && isSourceNonEmpty;\n        });\n      default:\n        return Object.keys(source);\n    }\n  })();\n  keys.forEach((key) => {\n    if (copyByRef) {\n      if (isObservable(target[key])) {\n        set(target[key], source[key], m[key]);\n        if (track && isObservable(source[key]))\n          useEffect(() => set(target[key], source[key], m[key]));\n      } else {\n        const temp = $$(target[key]);\n        target[key] = isObservable(source[key]) ? source[key] : $(source[key]);\n        if (m[key])\n          target[key](mv(temp, $$(source[key])));\n      }\n    } else {\n      if (typeof $$(source[key]) === \"object\") {\n        if (isObservable(target[key])) {\n          if (typeof $$(target[key]) === \"object\")\n            assign($$(target[key]), $$(source[key]), options);\n          else {\n            target[key](assign({}, $$(source[key]), options));\n            if (track && isObservable(source[key]))\n              useEffect(() => {\n                target[key](assign({}, $$(source[key]), options));\n              });\n          }\n        } else {\n          const temp = target[key];\n          target[key] = keepTargetNoObservable ? assign(m[key] ? temp : {}, $$(source[key]), options) : $(assign(m[key] ? temp : {}, $$(source[key]), options));\n          if (track && isObservable(target[key]) && isObservable(source[key]))\n            useEffect(() => {\n              target[key](assign(m[key] ? temp : {}, $$(source[key]), options));\n            });\n        }\n      } else {\n        if (isObservable(target[key])) {\n          set(target[key], source[key], m[key]);\n          const temp = $$(target[key]);\n          if (track && isObservable(source[key]))\n            useEffect(() => target[key](m[key] ? mv(temp, $$(source[key])) : $$(source[key])));\n        } else {\n          const temp = target[key];\n          target[key] = keepTargetNoObservable ? source[key] : target[key] = isObservable(source[key]) ? source[key] : $(source[key]);\n          if (m[key])\n            target[key](mv(temp, $$(source[key])));\n          if (track && isObservable(target[key]) && isObservable(source[key])) {\n            if (target[key] !== source[key])\n              useEffect(() => target[key](m[key] ? mv(temp, $$(source[key])) : $$(source[key])));\n          }\n        }\n      }\n    }\n  });\n  return target;\n};\nconst clone = (source, deepClone = false) => {\n  const newObject = {};\n  Object.keys(source).forEach((key) => {\n    if (typeof source[key] === \"function\" && !isObservable(source[key]))\n      newObject[key] = source[key];\n    else if (isObservable(source[key]))\n      newObject[key] = $($$(source[key]));\n    else if (typeof source[key] == \"object\" && deepClone) {\n      const innerObject = clone(source[key]);\n      newObject[key] = innerObject;\n    } else\n      newObject[key] = source[key];\n  });\n  return newObject;\n};\nconst clear = (o) => Object.keys(o).forEach((k) => {\n  var _a;\n  return (_a = o[k]) == null ? void 0 : _a.call(o);\n});\nconst make = (obj, inplace = false) => {\n  const o = inplace ? obj : { ...obj };\n  Object.keys(o).forEach((k) => o[k] = typeof o[k] !== \"function\" ? $(o[k]) : o[k]);\n  return o;\n};\nconst $$$ = (obj, ...keys) => {\n  const ro = $$(obj);\n  if (isPrimitive(ro) || typeof ro === \"undefined\" || ro === null) return ro;\n  const no = {};\n  try {\n    (keys && keys.length ? keys : Object.keys(ro)).forEach(\n      (k) => no[k] = isObservable(ro[k]) ? $$(ro[k]) : ro[k]\n    );\n  } catch (ex) {\n    console.error(ex);\n  }\n  return no;\n};\nconst $$$$ = (obj, ...keys) => {\n  const ro = $$(obj);\n  if (isPrimitive(ro) || typeof ro === \"undefined\" || ro === null) return ro;\n  const no = {};\n  try {\n    (keys && keys.length ? keys : Object.keys(ro)).forEach(\n      (k) => no[k] = isObservable(ro[k]) ? $$$$(ro[k]) : ro[k]\n    );\n  } catch (ex) {\n    console.error(ex);\n  }\n  return no;\n};\nfunction useClickAway(ref, clickEvent) {\n  useEffect(() => {\n    const handleClickOutside = (event) => {\n      if ($$(ref) && !$$(ref).contains(event.target))\n        clickEvent();\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  });\n}\nconst ClickAwayWrapper = ({ clickEvent, children, ...props }) => {\n  const wrapperRef = $(null);\n  useClickAway(wrapperRef, clickEvent);\n  return /* @__PURE__ */ jsx(\"div\", { ref: wrapperRef, children });\n};\nconst useInvert = (ori) => {\n  const inv = $(!$$(ori));\n  useEffect(() => {\n    if (isObservable(ori))\n      ori(!$$(inv));\n  });\n  useEffect(() => {\n    inv(!$$(ori));\n  });\n  return inv;\n};\nfunction isArray(value) {\n  return Array.isArray(value);\n}\nconst useDestruct = (o, ...keys) => {\n  if (isArray($$(o))) {\n    const r = [];\n    if (isObservable(o))\n      $$(o).forEach((k, index) => r[index] = useMemo(() => $$($$(o)[index])));\n    else\n      o.forEach((k, index) => r[index] = o[index]);\n    return r;\n  } else {\n    const r = {};\n    if (keys.length === 0)\n      keys = Object.keys($$(o));\n    if (isObservable(o))\n      keys.forEach((k) => r[k] = useMemo(() => {\n        var _a;\n        return $$((_a = $$(o)) == null ? void 0 : _a[k]);\n      }));\n    else\n      keys.forEach((k) => r[k] = o == null ? void 0 : o[k]);\n    return r;\n  }\n};\nconst usePause = (delay) => new Promise((resolve) => setTimeout(() => resolve(), delay));\nconst Timeout = ({ children, timeout = 1 }) => {\n  const r = $();\n  setTimeout(() => r(children), timeout);\n  return useMemo(() => $$(r));\n};\nconst useTimer = (startImmediately = true) => {\n  const startTime = $(startImmediately ? Date.now() : null);\n  const pauseTime = $(null);\n  const laps = $([]);\n  const total = $(0);\n  const start = () => startTime(Date.now());\n  const pause = () => {\n    if ($$(startTime) !== null && $$(pauseTime) === null)\n      pauseTime(Date.now());\n  };\n  const split = (message) => {\n    if ($$(startTime) !== null) {\n      const currentTime = Date.now();\n      const elapsedMs = currentTime - $$(startTime);\n      laps([...$$(laps), { message: message ?? $$(laps).length.toString(), ms: elapsedMs }]);\n      startTime(currentTime);\n    }\n  };\n  const stop = (message) => {\n    if ($$(startTime) !== null) {\n      const endTimeValue = $$(pauseTime) !== null ? $$(pauseTime) : Date.now();\n      const elapsedMs = endTimeValue - $$(startTime) - ($$(pauseTime) !== null ? Date.now() - $$(pauseTime) : 0);\n      laps([...$$(laps), { message: message ?? \"Stop\", ms: elapsedMs }]);\n      total($$(total) + elapsedMs);\n      startTime(null);\n      pauseTime(null);\n    }\n  };\n  useEffect(() => () => stop());\n  return {\n    start,\n    pause,\n    split,\n    stop,\n    total,\n    reset: () => {\n      total(0);\n      startTime(null);\n      pauseTime(null);\n      laps([]);\n    },\n    laps\n  };\n};\nconst ArrayContext = createContext();\nfunction useArray() {\n  const context = useContext(ArrayContext);\n  return context;\n}\nconst array = ({ children, arrayContext, itemContext, ref, ...props }) => {\n  if (!children) return [];\n  const childs = isArray$1(children) ? children : [children];\n  const array2 = arrayContext == null ? void 0 : arrayContext(childs);\n  setRef(array2, ref);\n  return childs.map((item, index) => /* @__PURE__ */ jsx(ArrayContext.Provider, { value: { ...array2, ...(itemContext == null ? void 0 : itemContext(item, index, array2)) ?? {}, index, item }, children: item }));\n};\nconst Array$1 = (props) => array(props);\nconst DefaultArray = ({ children }) => /* @__PURE__ */ jsx(Array$1, { arrayContext: (children2) => ({ refs: children2.map((c) => $()) }), itemContext: (item, index, ctx) => ({ ref: ctx.refs[index] }), children });\nconst useDefaultArray = () => useArray();\nconst useRatio = () => {\n  const context = useContext(ArrayContext);\n  return context;\n};\nconst Ratio = ({ children, multiple = false, group = false, ref, arrayContext, itemContext, ...props }) => {\n  return /* @__PURE__ */ jsx(\n    Array$1,\n    {\n      ref,\n      arrayContext: (children2) => Object.assign({ refs: children2.map((_c) => $()), actives: Object.assign(children2.map((_c) => $(false)), { updated: $(0) }) }, (arrayContext == null ? void 0 : arrayContext(children2)) ?? {}),\n      itemContext: (item, index, ctx) => {\n        return Object.assign({\n          ref: ctx.refs[\n            /* base + */\n            index\n          ],\n          //flaten array index\n          active: ctx.actives[index],\n          item,\n          index: (\n            /* base +  */\n            index\n          ),\n          // childIndex: index,\n          toggle: (val) => {\n            const v = val === void 0 ? !$$(ctx.actives[index]) : val;\n            if ($$(group))\n              ctx.actives.forEach((act, i) => act(v));\n            else if ($$(multiple))\n              ctx.actives[index](v);\n            else if (v)\n              ctx.actives.forEach((act, i) => act(i === index));\n            else\n              ctx.actives[index](v);\n            ctx.actives.updated(Math.random());\n            return v;\n          }\n        }, (itemContext == null ? void 0 : itemContext(item, index, ctx)) ?? {});\n      },\n      children\n    }\n  );\n};\nfunction useLocation() {\n  const location = $(window.location);\n  useEffect(() => {\n    const handleLocationChange = () => location({ ...window.location });\n    window.addEventListener(\"popstate\", handleLocationChange);\n    const originalPushState = window.history.pushState;\n    const originalReplaceState = window.history.replaceState;\n    window.history.pushState = function(...args) {\n      originalPushState.apply(window.history, args);\n      handleLocationChange();\n    };\n    window.history.replaceState = function(...args) {\n      originalReplaceState.apply(window.history, args);\n      handleLocationChange();\n    };\n    return () => {\n      window.removeEventListener(\"popstate\", handleLocationChange);\n      window.history.pushState = originalPushState;\n      window.history.replaceState = originalReplaceState;\n    };\n  });\n  return location;\n}\nconst useScreenOrientation = () => {\n  const angle = $(0);\n  const type = $();\n  const handleResize = () => {\n    const { angle: a, type: t } = window.screen.orientation;\n    angle(a);\n    type(t);\n  };\n  useEventListener(window.screen.orientation, \"change\", handleResize);\n  const { dispatchEvent, unlock } = window.screen.orientation;\n  return { angle, type, dispatchEvent, unlock };\n};\nfunction useComputedStyle(target, patterns = []) {\n  const styles = $({});\n  useEffect(() => {\n    if (!$$(target)) return () => {\n    };\n    const getMatchingStyles = () => {\n      const computedStyle = window.getComputedStyle($$(target));\n      const matchedStyles = {};\n      for (const property of computedStyle) {\n        if (patterns.some(\n          (pattern) => typeof pattern === \"string\" ? property === pattern : pattern.test(property)\n        )) {\n          matchedStyles[property] = computedStyle.getPropertyValue(property);\n        }\n      }\n      return matchedStyles;\n    };\n    styles(getMatchingStyles());\n    const observer = new MutationObserver(() => {\n      const updatedStyles = getMatchingStyles();\n      styles((prevStyles) => {\n        const hasChanges = Object.keys(updatedStyles).some(\n          (key) => updatedStyles[key] !== prevStyles[key]\n        );\n        return hasChanges ? updatedStyles : prevStyles;\n      });\n    });\n    observer.observe($$(target), {\n      attributes: true,\n      attributeFilter: [\"style\", \"class\"],\n      subtree: false\n    });\n    return () => observer.disconnect();\n  });\n  return styles;\n}\nfunction useGpsLocation({ enableHighAccuracy = true, timeout = 1e4, maximumAge = 0 } = {}) {\n  const location = $(null);\n  const error = $(null);\n  useEffect(() => {\n    if (!navigator.geolocation) {\n      error(\"Geolocation is not supported by your browser.\");\n      return () => {\n      };\n    }\n    const handleSuccess = (position) => {\n      const { latitude, longitude } = position.coords;\n      location({ latitude, longitude });\n    };\n    const handleError = (err) => error(err.message);\n    const watcherId = navigator.geolocation.watchPosition(\n      handleSuccess,\n      handleError,\n      { enableHighAccuracy, timeout, maximumAge }\n    );\n    return () => navigator.geolocation.clearWatch(watcherId);\n  });\n  return { location, error };\n}\nconst useTry = (fn, final) => {\n  let result;\n  let error;\n  try {\n    result = fn();\n  } catch (e) {\n    error = e;\n  } finally {\n    final == null ? void 0 : final();\n  }\n  return [result, error];\n};\nconst l = useLocation();\nconst isLocalhost = useMemo(() => $$(l).host.toLowerCase().includes(\"localhost\"));\nexport {\n  $$$,\n  $$$$,\n  Array$1 as Array,\n  ArrayContext,\n  ClickAwayWrapper,\n  DefaultArray,\n  Ratio,\n  Timeout,\n  array,\n  assign,\n  clear,\n  clone,\n  isLocalhost,\n  localStoreDic,\n  make,\n  sessionStorageDic,\n  useArray,\n  useAspect,\n  useBoolean,\n  useClickAnyWhere,\n  useClickAway,\n  useComputedStyle,\n  useCopyToClipboard,\n  useCountdown,\n  useCounter,\n  useDarkMode,\n  useDebounce,\n  useDefaultArray,\n  useDestruct,\n  useDocumentTitle,\n  useElementSize,\n  useEventCallback,\n  useEventListener,\n  useFetch,\n  useGpsLocation,\n  useHover,\n  useImageOnLoad,\n  useIntersectionObserver,\n  useInterval,\n  useInvert,\n  useIsomorphicLayoutEffect,\n  useLocalStorage,\n  useLocation,\n  useLockedBody,\n  useMap,\n  useMediaQuery,\n  useOnClickOutside,\n  usePause,\n  useRatio,\n  useReadLocalStorage,\n  useScreen,\n  useScreenOrientation,\n  useScript,\n  useSessionStorage,\n  useSsr,\n  useStep,\n  useTernaryDarkMode,\n  useTimeout,\n  useTimer,\n  useToggle,\n  useTry,\n  useViewportSize,\n  useWindowSize\n};\n//# sourceMappingURL=index.es.js.map\n","import { $$, $, useEffect, ObservableMaybe, Observable, isObservable, useMemo, getMeta, type JSX } from 'woby'\r\n\r\n//https://www.menucool.com/tooltip/css-tooltip\r\n\r\n\r\nimport { styled } from 'woby-styled'\r\nimport { useComputedStyle, useInvert } from 'use-woby'\r\n\r\n// text-left border-b-[#666] border-b border-dotted \r\nconst tooltipDef = `\r\n[&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100\r\n`\r\n\r\nconst tooltip = `inline-block relative \r\n[&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100\r\n`\r\n\r\nconst topDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst top = `absolute z-[99999999] left-2/4 -top-5 `\r\n\r\nconst top_i = `absolute overflow-hidden top-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:rotate-45 after:left-2/4 `\r\n\r\nconst rightDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst right = `absolute z-[99999999] ml-5 left-full top-2/4 `\r\nconst right_i = `absolute overflow-hidden right-full after:content-[''] after:absolute after:translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `\r\n\r\nconst bottomDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst bottom = `absolute z-[99999999] left-2/4 top-10 `\r\nconst bottom_i = `absolute overflow-hidden bottom-full after:content-[''] after:absolute after:-translate-x-2/4 after:translate-y-2/4 after:rotate-45 after:left-2/4 `\r\n\r\nconst leftDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst left = `absolute z-[99999999] mr-5 right-full top-2/4 `\r\nconst left_i = `absolute overflow-hidden left-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `\r\n\r\n\r\nexport const Tooltip = ({ children, class: cls = tooltipDef, className, ...props }: JSX.HTMLAttributes<HTMLDivElement>) => {\r\n    return <div class={[tooltip, cls, className]} >\r\n        {children}\r\n    </div>\r\n}\r\n\r\nfunction cssMultiply(value: ObservableMaybe<string | number>, multiplier: number): string {\r\n    const match = ($$(value) + '').match(/^(-?\\d*\\.?\\d+)([a-z%]*)$/);\r\n\r\n    if (!match)\r\n        throw new Error(`Invalid CSS unit: ${$$(value)}`);\r\n\r\n    const [, numericValue, unit] = match\r\n    const result = +numericValue * multiplier\r\n\r\n    return `${result}${unit}`\r\n}\r\n\r\nconst x2 = (value: ObservableMaybe<string | number>) => cssMultiply(value, 2)\r\n\r\nconst translate = (x: ObservableMaybe<string>, y: ObservableMaybe<string>) => `translate(${$$(x)}, ${$$(y)})`\r\n\r\nexport type PositionType = 'top' | 'right' | 'bottom' | 'left'\r\nexport const TooltipContent = ({ children, style, class: cls = $(), className, static: st, position = 'top', arrowLocation = '50%', arrowSize = '12px', ...props }: JSX.HTMLAttributes<HTMLDivElement> &\r\n{\r\n    position?: ObservableMaybe<PositionType>,\r\n    arrowLocation?: ObservableMaybe<string | number>,\r\n    arrowSize?: ObservableMaybe<string | number>,\r\n    static?: ObservableMaybe<boolean>,\r\n}) => {\r\n    const setDef = () => {\r\n        if (!$$(cls))\r\n            switch ($$(position)) {\r\n                case 'top': (cls as Observable<string>)(topDef)\r\n                case 'left': (cls as Observable<string>)(leftDef)\r\n                case 'right': (cls as Observable<string>)(rightDef)\r\n                case 'bottom': (cls as Observable<string>)(bottomDef)\r\n            }\r\n    }\r\n    useEffect(setDef)\r\n    setDef()\r\n\r\n    const pos = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'top': return top\r\n            case 'right': return right\r\n            case 'bottom': return bottom\r\n            case 'left': return left\r\n        }\r\n    })\r\n    const transform = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'top': return translate('-' + $$(arrowLocation), '-100%')\r\n            case 'left':\r\n            case 'right': return translate('0', '-' + $$(arrowLocation))\r\n            case 'bottom': return translate('-' + $$(arrowLocation), '0')\r\n        }\r\n    })\r\n    const ali = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'bottom':\r\n            case 'top': return { left: arrowLocation }\r\n            case 'left':\r\n            case 'right': return { top: arrowLocation }\r\n        }\r\n    })\r\n    const ii = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'top': return top_i + styled`  \r\n                margin-left:-${$$(arrowSize)};\r\n                width:${x2(arrowSize)};\r\n                height:${$$(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n            case 'right': return right_i + styled`  \r\n                margin-top:-${$$(arrowSize)};\r\n                width:${$$(arrowSize)};\r\n                height:${x2(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n            case 'bottom': return bottom_i + styled`  \r\n                margin-left:-${$$(arrowSize)};\r\n                width:${x2(arrowSize)};\r\n                height:${$$(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n            case 'left': return left_i + styled`  \r\n                margin-top:-${$$(arrowSize)};\r\n                width:${$$(arrowSize)};\r\n                height:${x2(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n        }\r\n    })\r\n\r\n    const tp = $<HTMLDivElement>()\r\n    const ir = $<HTMLElement>()\r\n\r\n    const sty = useComputedStyle(tp, ['background-color', /^border-(?!.*-radius$)/, 'box-shadow'])\r\n    // useEffect(() => console.log($$(sty)))\r\n    return <div ref={tp} class={[pos, cls, () => $$(st) ? '' : 'invisible opacity-0', className, 'tpcontents']} style={[style, { transform }]} {...props}>\r\n        {children}\r\n        {() => <i ref={ir} class={[ii, styled`\r\n                &::after{\r\n                    ${Object.keys($$(sty)).map(k => `${k}:${$$(sty)[k]};\\n`).join('')}\r\n                }\r\n            `]} style={ali}></i>}\r\n    </div>\r\n}\r\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}

package/dist/output.css

@@ -107,7 +107,7 @@
 }
 
 /*
-! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -650,6 +650,11 @@ video {
   min-width: 400px;
 }
 
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+
 .-translate-y-2\/4 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -694,32 +699,32 @@ video {
 
 .border-\[\#000000\] {
   --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 
 .border-b-\[\#666\] {
   --tw-border-opacity: 1;
-  border-bottom-color: rgb(102 102 102 / var(--tw-border-opacity));
+  border-bottom-color: rgb(102 102 102 / var(--tw-border-opacity, 1));
 }
 
 .bg-\[\#009cdc\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 156 220 / var(--tw-bg-opacity));
+  background-color: rgb(0 156 220 / var(--tw-bg-opacity, 1));
 }
 
 .bg-\[\#444444\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(68 68 68 / var(--tw-bg-opacity));
+  background-color: rgb(68 68 68 / var(--tw-bg-opacity, 1));
 }
 
 .bg-\[\#eeeeee\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(238 238 238 / var(--tw-bg-opacity));
+  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
 }
 
 .bg-gray-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
 .p-5 {
@@ -750,12 +755,12 @@ video {
 
 .text-\[\#EEEEEE\] {
   --tw-text-opacity: 1;
-  color: rgb(238 238 238 / var(--tw-text-opacity));
+  color: rgb(238 238 238 / var(--tw-text-opacity, 1));
 }
 
 .text-\[white\] {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
 .opacity-0 {

package/dist/types/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,eAAe,EAA8C,KAAK,GAAG,EAAE,MAAM,MAAM,CAAA;AAkC9G,eAAO,MAAM,OAAO,kDAAgE,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,cAIrH,CAAA;AAkBD,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAC9D,eAAO,MAAM,cAAc,yGAAyI,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,GACtM;IACI,QAAQ,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CACrC,cA+FA,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,eAAe,EAA8C,KAAK,GAAG,EAAE,MAAM,MAAM,CAAA;AAmC9G,eAAO,MAAM,OAAO,kDAAgE,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,cAIrH,CAAA;AAkBD,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAC9D,eAAO,MAAM,cAAc,yGAAyI,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,GACtM;IACI,QAAQ,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CACrC,cA+FA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "woby-tooltip",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "A powerful tooltip and menu component library for woby.",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -15,16 +15,16 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "woby-styled": "1.0.13",
-    "use-woby": "0.0.16",
-    "woby": "0.58.7"
+    "use-woby": "0.0.17",
+    "woby": "0.58.7",
+    "woby-styled": "1.0.14"
   },
   "devDependencies": {
-    "concurrently": "^9.0.1",
-    "puppeteer": "^23.6.0",
+    "concurrently": "^9.1.0",
+    "puppeteer": "^23.11.1",
     "style-loader": "^4.0.0",
-    "tailwindcss": "^3.4.14",
-    "vite": "^5.4.10",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.5",
     "vite-plugin-tsconfig": "^1.0.5"
   },
   "author": "Chi Chong <wongchichong@gmail.com>",
@@ -34,7 +34,7 @@
     "url": "git@github.com:wongchichong/woby-tooltip.git"
   },
   "dependencies": {
-    "typescript": "5.6.3"
+    "typescript": "5.7.2"
   },
   "scripts": {
     "git": "git add . && git commit -m \"Bump version\" && git push",

package/tsconfig.json.bak.vite-plugin-tsconfig

@@ -0,0 +1,62 @@
+// GENERATED via 'vite-plugin-tsconfig' - this should be automatically created and deleted inside the build process. 
+{
+    "compilerOptions": {
+        "allowJs": false,
+        "allowSyntheticDefaultImports": true,
+        "allowUnreachableCode": false,
+        "allowUnusedLabels": false,
+        "alwaysStrict": true,
+        "declaration": true,
+        "declarationDir": "./dist/types",
+        "disableSizeLimit": true,
+        "esModuleInterop": false,
+        "forceConsistentCasingInFileNames": true,
+        // "importsNotUsedAsValues": "error",
+        "inlineSourceMap": false,
+        "inlineSources": false,
+        // "isolatedModules": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "woby",
+        "lib": [
+            "dom",
+            "esnext",
+            "WebWorker"
+        ],
+        "module": "esnext",
+        "moduleResolution": "node",
+        "newLine": "lf",
+        "noEmitOnError": false,
+        "noImplicitThis": true,
+        "noPropertyAccessFromIndexSignature": false,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "outDir": "dist",
+        "pretty": true,
+        "skipDefaultLibCheck": true,
+        "skipLibCheck": true,
+        "sourceMap": false,
+        "strict": true,
+        "strictBindCallApply": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": false,
+        "target": "es2020",
+        "useDefineForClassFields": false,
+        "useUnknownInCatchVariables": true,
+        "noImplicitAny": false,
+        "noUncheckedIndexedAccess": false,
+        "baseUrl": ".",
+        "rootDir": "./src",
+        "typeRoots": [
+            "types",
+            "voby/dist/types/jsx"
+        ],
+        // "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo",
+        // "composite": true,
+    },
+    "exclude": [
+        "node_modules",
+        "vite.*.*ts",
+        "dist*",
+        "svgx"
+    ]
+}

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/tooltip.tsx","./src/index.tsx","./src/docs/index.tsx"],"version":"5.6.3"}
+{"root":["./src/tooltip.tsx","./src/index.tsx","./src/docs/index.tsx"],"version":"5.7.2"}