@pyreon/hooks 0.11.4 → 0.11.6

package/src/useDialog.ts

@@ -1,4 +1,4 @@
-import { onCleanup, signal } from "@pyreon/reactivity"
+import { onCleanup, signal } from '@pyreon/reactivity'
 
 export interface UseDialogResult {
   /** Whether the dialog is currently open. */
@@ -60,7 +60,7 @@ export function useDialog(options?: { onClose?: () => void }): UseDialogResult {
   const ref = (el: HTMLDialogElement) => {
     // Clean up previous element if ref is called again
     if (dialogEl && closeHandler) {
-      dialogEl.removeEventListener("close", closeHandler)
+      dialogEl.removeEventListener('close', closeHandler)
     }
 
     dialogEl = el
@@ -70,12 +70,12 @@ export function useDialog(options?: { onClose?: () => void }): UseDialogResult {
       options?.onClose?.()
     }
 
-    el.addEventListener("close", closeHandler)
+    el.addEventListener('close', closeHandler)
   }
 
   onCleanup(() => {
     if (dialogEl && closeHandler) {
-      dialogEl.removeEventListener("close", closeHandler)
+      dialogEl.removeEventListener('close', closeHandler)
     }
   })
 

package/src/useElementSize.ts

@@ -1,5 +1,5 @@
-import { onMount, onUnmount } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import { onMount, onUnmount } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
 
 export interface Size {
   width: number

package/src/useEventListener.ts

@@ -1,4 +1,4 @@
-import { onCleanup } from "@pyreon/reactivity"
+import { onCleanup } from '@pyreon/reactivity'
 
 /**
  * Attach an event listener with automatic cleanup on unmount.
@@ -22,7 +22,7 @@ export function useEventListener<K extends keyof WindowEventMap>(
   options?: boolean | AddEventListenerOptions,
   target?: () => EventTarget | null | undefined,
 ): void {
-  const isBrowser = typeof window !== "undefined"
+  const isBrowser = typeof window !== 'undefined'
   if (!isBrowser) return
 
   const el = target?.() ?? window

package/src/useFocus.ts

@@ -1,4 +1,4 @@
-import { signal } from "@pyreon/reactivity"
+import { signal } from '@pyreon/reactivity'
 
 export interface UseFocusResult {
   focused: () => boolean

package/src/useFocusTrap.ts

@@ -1,4 +1,4 @@
-import { onMount, onUnmount } from "@pyreon/core"
+import { onMount, onUnmount } from '@pyreon/core'
 
 const FOCUSABLE =
   'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
@@ -8,7 +8,7 @@ const FOCUSABLE =
  */
 export function useFocusTrap(getEl: () => HTMLElement | null): void {
   const listener = (e: KeyboardEvent) => {
-    if (e.key !== "Tab") return
+    if (e.key !== 'Tab') return
     const el = getEl()
     if (!el) return
 
@@ -32,11 +32,11 @@ export function useFocusTrap(getEl: () => HTMLElement | null): void {
   }
 
   onMount(() => {
-    document.addEventListener("keydown", listener)
+    document.addEventListener('keydown', listener)
     return undefined
   })
 
   onUnmount(() => {
-    document.removeEventListener("keydown", listener)
+    document.removeEventListener('keydown', listener)
   })
 }

package/src/useHover.ts

@@ -1,4 +1,4 @@
-import { signal } from "@pyreon/reactivity"
+import { signal } from '@pyreon/reactivity'
 
 export interface UseHoverResult {
   /** Reactive boolean — true when element is hovered */

package/src/useInfiniteScroll.ts

@@ -1,4 +1,4 @@
-import { onCleanup, signal } from "@pyreon/reactivity"
+import { onCleanup, signal } from '@pyreon/reactivity'
 
 export interface UseInfiniteScrollOptions {
   /** Distance from bottom (px) to trigger load. Default: 100 */
@@ -8,7 +8,7 @@ export interface UseInfiniteScrollOptions {
   /** Whether there's more data to load. Default: true */
   hasMore?: () => boolean
   /** Scroll direction. Default: "down" */
-  direction?: "up" | "down"
+  direction?: 'up' | 'down'
 }
 
 export interface UseInfiniteScrollResult {
@@ -48,7 +48,7 @@ export function useInfiniteScroll(
   options?: UseInfiniteScrollOptions,
 ): UseInfiniteScrollResult {
   const threshold = options?.threshold ?? 100
-  const direction = options?.direction ?? "down"
+  const direction = options?.direction ?? 'down'
   const triggered = signal(false)
   let observer: IntersectionObserver | null = null
   let sentinel: HTMLDivElement | null = null
@@ -72,13 +72,13 @@ export function useInfiniteScroll(
     containerEl = el
 
     // Create an invisible sentinel element at the scroll boundary
-    sentinel = document.createElement("div")
-    sentinel.style.height = "1px"
-    sentinel.style.width = "100%"
-    sentinel.style.pointerEvents = "none"
-    sentinel.setAttribute("aria-hidden", "true")
+    sentinel = document.createElement('div')
+    sentinel.style.height = '1px'
+    sentinel.style.width = '100%'
+    sentinel.style.pointerEvents = 'none'
+    sentinel.setAttribute('aria-hidden', 'true')
 
-    if (direction === "down") {
+    if (direction === 'down') {
       el.appendChild(sentinel)
     } else {
       el.insertBefore(sentinel, el.firstChild)
@@ -87,7 +87,7 @@ export function useInfiniteScroll(
     observer = new IntersectionObserver(handleIntersect, {
       root: el,
       rootMargin:
-        direction === "down" ? `0px 0px ${threshold}px 0px` : `${threshold}px 0px 0px 0px`,
+        direction === 'down' ? `0px 0px ${threshold}px 0px` : `${threshold}px 0px 0px 0px`,
       threshold: 0,
     })
     observer.observe(sentinel)

package/src/useIntersection.ts

@@ -1,5 +1,5 @@
-import { onMount, onUnmount } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import { onMount, onUnmount } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
 
 /**
  * Observe element intersection reactively.

package/src/useInterval.ts

@@ -1,19 +1,18 @@
-import { onUnmount } from "@pyreon/core"
+import { onUnmount } from '@pyreon/core'
 
 export type UseInterval = (callback: () => void, delay: number | null) => void
 
 /**
  * Declarative `setInterval` with auto-cleanup.
  * Pass `null` as `delay` to pause the interval.
- * Always calls the latest callback (no stale closures).
+ * In Pyreon, components run once — callback is captured at setup time.
  */
 export const useInterval: UseInterval = (callback, delay) => {
-  const currentCallback = callback
   let intervalId: ReturnType<typeof setInterval> | null = null
 
   const start = () => {
     if (delay === null) return
-    intervalId = setInterval(() => currentCallback(), delay)
+    intervalId = setInterval(() => callback(), delay)
   }
 
   const stop = () => {

package/src/useIsomorphicLayoutEffect.ts

@@ -1,4 +1,4 @@
-import { onMount } from "@pyreon/core"
+import { onMount } from '@pyreon/core'
 
 /**
  * In Pyreon there is no SSR warning distinction between effect and
@@ -14,6 +14,6 @@ import { onMount } from "@pyreon/core"
 export type UseIsomorphicLayoutEffect = typeof onMount
 
 const useIsomorphicLayoutEffect: UseIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? onMount : onMount
+  typeof window !== 'undefined' ? onMount : onMount
 
 export default useIsomorphicLayoutEffect

package/src/useKeyboard.ts

@@ -1,4 +1,4 @@
-import { onMount, onUnmount } from "@pyreon/core"
+import { onMount, onUnmount } from '@pyreon/core'
 
 /**
  * Listen for a specific key press.
@@ -6,9 +6,9 @@ import { onMount, onUnmount } from "@pyreon/core"
 export function useKeyboard(
   key: string,
   handler: (event: KeyboardEvent) => void,
-  options?: { event?: "keydown" | "keyup"; target?: EventTarget },
+  options?: { event?: 'keydown' | 'keyup'; target?: EventTarget },
 ): void {
-  const eventName = options?.event ?? "keydown"
+  const eventName = options?.event ?? 'keydown'
 
   const listener = (e: Event) => {
     const ke = e as KeyboardEvent

package/src/useMediaQuery.ts

@@ -1,5 +1,5 @@
-import { onMount, onUnmount } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import { onMount, onUnmount } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
 
 /**
  * Subscribe to a CSS media query, returns a reactive boolean.
@@ -15,12 +15,12 @@ export function useMediaQuery(query: string): () => boolean {
   onMount(() => {
     mql = window.matchMedia(query)
     matches.set(mql.matches)
-    mql.addEventListener("change", onChange)
+    mql.addEventListener('change', onChange)
     return undefined
   })
 
   onUnmount(() => {
-    mql?.removeEventListener("change", onChange)
+    mql?.removeEventListener('change', onChange)
   })
 
   return matches

package/src/useMergedRef.ts

@@ -12,7 +12,7 @@ export const useMergedRef = <T>(...refs: (Ref<T> | undefined)[]): ((node: T | nu
   return (node: T | null) => {
     for (const ref of refs) {
       if (!ref) continue
-      if (typeof ref === "function") {
+      if (typeof ref === 'function') {
         ref(node)
       } else {
         ;(ref as RefObject<unknown>).current = node

package/src/useOnline.ts

@@ -1,4 +1,4 @@
-import { onCleanup, signal } from "@pyreon/reactivity"
+import { onCleanup, signal } from '@pyreon/reactivity'
 
 /**
  * Reactive online/offline status.
@@ -13,17 +13,17 @@ import { onCleanup, signal } from "@pyreon/reactivity"
  * ```
  */
 export function useOnline(): () => boolean {
-  const isBrowser = typeof window !== "undefined"
+  const isBrowser = typeof window !== 'undefined'
   const online = signal(isBrowser ? navigator.onLine : true)
 
   if (isBrowser) {
     const setOnline = () => online.set(true)
     const setOffline = () => online.set(false)
-    window.addEventListener("online", setOnline)
-    window.addEventListener("offline", setOffline)
+    window.addEventListener('online', setOnline)
+    window.addEventListener('offline', setOffline)
     onCleanup(() => {
-      window.removeEventListener("online", setOnline)
-      window.removeEventListener("offline", setOffline)
+      window.removeEventListener('online', setOnline)
+      window.removeEventListener('offline', setOffline)
     })
   }
 

package/src/usePrevious.ts

@@ -1,4 +1,4 @@
-import { effect, signal } from "@pyreon/reactivity"
+import { effect, signal } from '@pyreon/reactivity'
 
 /**
  * Track the previous value of a reactive getter.

package/src/useReducedMotion.ts

@@ -1,8 +1,8 @@
-import { useMediaQuery } from "./useMediaQuery"
+import { useMediaQuery } from './useMediaQuery'
 
 /**
  * Returns true when the user prefers reduced motion.
  */
 export function useReducedMotion(): () => boolean {
-  return useMediaQuery("(prefers-reduced-motion: reduce)")
+  return useMediaQuery('(prefers-reduced-motion: reduce)')
 }

package/src/useRootSize.ts

@@ -1,4 +1,4 @@
-import { useTheme } from "@pyreon/styler"
+import { useTheme } from '@pyreon/styler'
 
 type RootSizeResult = {
   rootSize: number

package/src/useScrollLock.ts

@@ -1,7 +1,7 @@
-import { onUnmount } from "@pyreon/core"
+import { onUnmount } from '@pyreon/core'
 
 let lockCount = 0
-let savedOverflow = ""
+let savedOverflow = ''
 
 /**
  * Lock page scroll. Uses reference counting for concurrent locks.
@@ -15,7 +15,7 @@ export function useScrollLock(): { lock: () => void; unlock: () => void } {
     isLocked = true
     if (lockCount === 0) {
       savedOverflow = document.body.style.overflow
-      document.body.style.overflow = "hidden"
+      document.body.style.overflow = 'hidden'
     }
     lockCount++
   }

package/src/useSpacing.ts

@@ -1,4 +1,4 @@
-import useRootSize from "./useRootSize"
+import useRootSize from './useRootSize'
 
 export type UseSpacing = (base?: number | undefined) => (multiplier: number) => string
 

package/src/useThemeValue.ts

@@ -1,5 +1,5 @@
-import { useTheme } from "@pyreon/styler"
-import { get } from "@pyreon/ui-core"
+import { useTheme } from '@pyreon/styler'
+import { get } from '@pyreon/ui-core'
 
 export type UseThemeValue = <T = unknown>(path: string) => T | undefined
 

package/src/useThrottledCallback.ts

@@ -1,5 +1,5 @@
-import { onUnmount } from "@pyreon/core"
-import { throttle } from "@pyreon/ui-core"
+import { onUnmount } from '@pyreon/core'
+import { throttle } from '@pyreon/ui-core'
 
 type ThrottledFn<T extends (...args: any[]) => any> = {
   (...args: Parameters<T>): void

package/src/useTimeAgo.ts

@@ -1,6 +1,6 @@
-import { onCleanup, signal } from "@pyreon/reactivity"
+import { onCleanup, signal } from '@pyreon/reactivity'
 
-type TimeUnit = "second" | "minute" | "hour" | "day" | "week" | "month" | "year"
+type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'
 
 interface TimeInterval {
   unit: TimeUnit
@@ -8,13 +8,13 @@ interface TimeInterval {
 }
 
 const INTERVALS: TimeInterval[] = [
-  { unit: "year", seconds: 31536000 },
-  { unit: "month", seconds: 2592000 },
-  { unit: "week", seconds: 604800 },
-  { unit: "day", seconds: 86400 },
-  { unit: "hour", seconds: 3600 },
-  { unit: "minute", seconds: 60 },
-  { unit: "second", seconds: 1 },
+  { unit: 'year', seconds: 31536000 },
+  { unit: 'month', seconds: 2592000 },
+  { unit: 'week', seconds: 604800 },
+  { unit: 'day', seconds: 86400 },
+  { unit: 'hour', seconds: 3600 },
+  { unit: 'minute', seconds: 60 },
+  { unit: 'second', seconds: 1 },
 ]
 
 /**
@@ -40,7 +40,7 @@ export interface UseTimeAgoOptions {
  */
 const defaultFormatter = (() => {
   const rtf =
-    typeof Intl !== "undefined" ? new Intl.RelativeTimeFormat("en", { numeric: "auto" }) : undefined
+    typeof Intl !== 'undefined' ? new Intl.RelativeTimeFormat('en', { numeric: 'auto' }) : undefined
 
   return (value: number, unit: TimeUnit, isPast: boolean): string => {
     if (rtf) return rtf.format(isPast ? -value : value, unit)
@@ -58,19 +58,19 @@ function computeTimeAgo(
   formatter: (value: number, unit: TimeUnit, isPast: boolean) => string,
 ): string {
   const now = Date.now()
-  const target = typeof date === "number" ? date : date.getTime()
+  const target = typeof date === 'number' ? date : date.getTime()
   const diff = Math.abs(now - target)
   const diffSeconds = Math.floor(diff / 1000)
   const isPast = target < now
 
-  if (diffSeconds < 5) return "just now"
+  if (diffSeconds < 5) return 'just now'
 
   for (const { unit, seconds } of INTERVALS) {
     const value = Math.floor(diffSeconds / seconds)
     if (value >= 1) return formatter(value, unit, isPast)
   }
 
-  return "just now"
+  return 'just now'
 }
 
 /**
@@ -99,7 +99,7 @@ export function useTimeAgo(
   options?: UseTimeAgoOptions,
 ): () => string {
   const formatter = options?.formatter ?? defaultFormatter
-  const resolveDate = typeof date === "function" ? date : () => date
+  const resolveDate = typeof date === 'function' ? date : () => date
 
   const result = signal(computeTimeAgo(resolveDate(), formatter))
 
@@ -116,7 +116,7 @@ export function useTimeAgo(
     result.set(computeTimeAgo(d, formatter))
 
     // Schedule next update with adaptive interval
-    const target = typeof d === "number" ? d : d.getTime()
+    const target = typeof d === 'number' ? d : d.getTime()
     const diffSeconds = Math.floor(Math.abs(Date.now() - target) / 1000)
     const interval = options?.interval ?? getRefreshInterval(diffSeconds)
     timer = setTimeout(tick, interval)

package/src/useTimeout.ts

@@ -1,4 +1,4 @@
-import { onUnmount } from "@pyreon/core"
+import { onUnmount } from '@pyreon/core'
 
 export type UseTimeout = (
   callback: () => void,
@@ -8,10 +8,9 @@ export type UseTimeout = (
 /**
  * Declarative `setTimeout` with auto-cleanup.
  * Pass `null` as `delay` to disable. Returns `reset` and `clear` controls.
- * Always calls the latest callback (no stale closures).
+ * In Pyreon, components run once — callback is captured at setup time.
  */
 export const useTimeout: UseTimeout = (callback, delay) => {
-  const currentCallback = callback
   let timer: ReturnType<typeof setTimeout> | null = null
 
   const clear = () => {
@@ -26,7 +25,7 @@ export const useTimeout: UseTimeout = (callback, delay) => {
     if (delay !== null) {
       timer = setTimeout(() => {
         timer = null
-        currentCallback()
+        callback()
       }, delay)
     }
   }

package/src/useToggle.ts

@@ -1,4 +1,4 @@
-import { signal } from "@pyreon/reactivity"
+import { signal } from '@pyreon/reactivity'
 
 export interface UseToggleResult {
   value: () => boolean

package/src/useUpdateEffect.ts

@@ -1,5 +1,5 @@
-import { onUnmount } from "@pyreon/core"
-import { watch } from "@pyreon/reactivity"
+import { onUnmount } from '@pyreon/core'
+import { watch } from '@pyreon/reactivity'
 
 export type UseUpdateEffect = <T>(
   source: () => T,

package/src/useWindowResize.ts

@@ -1,5 +1,5 @@
-import { onMount, onUnmount } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import { onMount, onUnmount } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
 
 export interface WindowSize {
   width: number
@@ -11,8 +11,8 @@ export interface WindowSize {
  */
 export function useWindowResize(throttleMs = 200): () => WindowSize {
   const size = signal<WindowSize>({
-    width: typeof window !== "undefined" ? window.innerWidth : 0,
-    height: typeof window !== "undefined" ? window.innerHeight : 0,
+    width: typeof window !== 'undefined' ? window.innerWidth : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight : 0,
   })
 
   let timer: ReturnType<typeof setTimeout> | undefined
@@ -26,12 +26,12 @@ export function useWindowResize(throttleMs = 200): () => WindowSize {
   }
 
   onMount(() => {
-    window.addEventListener("resize", onResize)
+    window.addEventListener('resize', onResize)
     return undefined
   })
 
   onUnmount(() => {
-    window.removeEventListener("resize", onResize)
+    window.removeEventListener('resize', onResize)
     if (timer !== undefined) clearTimeout(timer)
   })