@djangocfg/ui-core 2.1.541 → 2.1.542

package/src/components/specialized/flag/flag-map.ts

@@ -12,11 +12,18 @@ import type * as React from 'react';
 import * as Flags from 'country-flag-icons/react/3x2';
 
 /**
- * `country-flag-icons` types its components against `HTMLSVGElement`
- * (their custom intersection of HTMLElement + SVGElement). We treat them
- * as opaque components — call sites use `<Flag />` rather than touching
- * the DOM type directly.
+ * `country-flag-icons` declares its components against `HTMLSVGElement` — its
+ * own `HTMLElement & SVGElement` intersection, which no DOM node satisfies. Its
+ * event-handler props are consequently uncallable with a real SVG event, so
+ * `FlagProps` exposes only the presentational attributes `Flag` forwards; a
+ * handler would have to be typed against an element that cannot exist.
  */
-export type FlagSvgComponent = (props: React.SVGProps<SVGSVGElement> & React.HTMLAttributes<SVGSVGElement>) => React.JSX.Element;
+export type FlagSvgComponent = (typeof Flags)[keyof typeof Flags];
 
-export const FLAG_COMPONENTS = Flags as unknown as Record<string, FlagSvgComponent>;
+/**
+ * Keyed by country code rather than indexed off the namespace object, because
+ * the lookup code is a runtime string and a module namespace admits only its
+ * literal export names.
+ */
+export const FLAG_COMPONENTS: Record<string, FlagSvgComponent> =
+  Object.fromEntries(Object.entries(Flags));

package/src/components/specialized/image-with-fallback/index.tsx

@@ -24,9 +24,12 @@ export interface ImageWithFallbackProps extends Omit<React.ImgHTMLAttributes<HTM
   placeholder?: string;
   blurDataURL?: string;
   
-  // Callbacks
-  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  // Callbacks. Fired from two sources with different event shapes: the
+  // preloader (`useImageLoader`) passes a DOM `Event` from a detached
+  // `new Image()`, the rendered <img> passes a React synthetic event. Narrow
+  // before touching anything beyond `type`/`target`.
+  onLoad?: (event: Event | React.SyntheticEvent<HTMLImageElement>) => void;
+  onError?: (event: Event | React.SyntheticEvent<HTMLImageElement>) => void;
   onLoadStart?: () => void;
   
   // Performance
@@ -55,7 +58,9 @@ export const ImageWithFallback = forwardRef<HTMLImageElement, ImageWithFallbackP
   
   // Performance
   priority = false,
-  unoptimized = false,
+  // Accepted for next/image API parity; a plain <img> has nothing to
+  // optimize. Destructured so it never reaches the DOM as an attribute.
+  unoptimized: _unoptimized = false,
   
   // Standard img attributes
   width,

package/src/components/specialized/presence/index.tsx

@@ -34,9 +34,8 @@ Presence.displayName = "Presence";
 
 function usePresence(present: boolean) {
   const [node, setNode] = React.useState<HTMLElement>();
-  const stylesRef = React.useRef<CSSStyleDeclaration>(
-    {} as unknown as CSSStyleDeclaration,
-  );
+  // Undefined until the node mounts; every read below already tolerates that.
+  const stylesRef = React.useRef<CSSStyleDeclaration | undefined>(undefined);
   const prevPresentRef = React.useRef(present);
   const prevAnimationNameRef = React.useRef<string>("none");
   const initialState = present ? "mounted" : "unmounted";

package/src/components/specialized/token-icon/index.tsx

@@ -80,25 +80,36 @@ export async function getTokensByCategory(): Promise<TokenCategory[]> {
 
 export type TokenSymbol = string
 
+/** The only props this file passes to a resolved @web3icons component. */
+type TokenIconComponent = React.ComponentType<{
+  variant?: 'branded' | 'mono'
+  size?: number
+}>
+
 // Dynamic import for @web3icons/react tokens
-const tokenIconCache = new Map<string, React.ComponentType<any>>()
+const tokenIconCache = new Map<string, TokenIconComponent>()
 
-async function getTokenIcon(symbol: string): Promise<React.ComponentType<any> | null> {
+async function getTokenIcon(symbol: string): Promise<TokenIconComponent | null> {
   const normalizedSymbol = symbol.toUpperCase().replace(/[^A-Z0-9]/g, '_')
   const componentName = `Token${normalizedSymbol}`
 
-  if (tokenIconCache.has(componentName)) {
-    return tokenIconCache.get(componentName)!
+  const cached = tokenIconCache.get(componentName)
+  if (cached) {
+    return cached
   }
 
   try {
-    const module = await import('@web3icons/react')
-    const Component = (module as any)[componentName]
-    if (Component) {
-      tokenIconCache.set(componentName, Component)
-      return Component
+    // The export name is computed at runtime, so the module is read as an
+    // untyped key map and the value is proven to be a component (a function)
+    // before it is used.
+    const namespace: Record<string, unknown> = await import('@web3icons/react')
+    const Component = namespace[componentName]
+    if (typeof Component === 'function') {
+      const IconComponent = Component as TokenIconComponent
+      tokenIconCache.set(componentName, IconComponent)
+      return IconComponent
     }
-  } catch (e) {
+  } catch (_e) {
     // Token not found
   }
 
@@ -110,11 +121,13 @@ export function TokenIcon({
   variant = 'branded',
   size = 24,
   className,
-  network,
-  address,
+  // Destructured, not used: these narrow which icon is resolved upstream
+  // and must not fall through `...props` onto the DOM element below.
+  network: _network,
+  address: _address,
   ...props
 }: TokenIconProps) {
-  const [IconComponent, setIconComponent] = React.useState<React.ComponentType<any> | null>(null)
+  const [IconComponent, setIconComponent] = React.useState<TokenIconComponent | null>(null)
   const [_loading, setLoading] = React.useState(true)
 
   React.useEffect(() => {

package/src/hooks/audio/useAudioPrefs.ts

@@ -32,6 +32,11 @@ const clamp01 = (v: number): number => {
  * Per-key registry so repeated calls with the same `storageKey` return
  * the same store instance — necessary for cross-component state sharing
  * (e.g. ChatHeader audio toggle + ChatLauncher bus reading the same key).
+ *
+ * `E` is phantom — nothing at runtime restricts which event names the store
+ * accepts, so one instance serves callers that name different event unions.
+ * The store is therefore built and stored at the widest instantiation, and
+ * every narrower `AudioPrefsState<E>` is assignable from it.
  */
 const registry = new Map<string, UseBoundStore<StoreApi<AudioPrefsState<string>>>>();
 
@@ -39,9 +44,9 @@ export function createAudioPrefsStore<E extends string = string>(
   storageKey: string,
 ): UseBoundStore<StoreApi<AudioPrefsState<E>>> {
   const cached = registry.get(storageKey);
-  if (cached) return cached as unknown as UseBoundStore<StoreApi<AudioPrefsState<E>>>;
+  if (cached) return cached;
 
-  const store = create<AudioPrefsState<E>>()(
+  const store = create<AudioPrefsState<string>>()(
     persist(
       (set) => ({
         volume: 1,
@@ -70,7 +75,7 @@ export function createAudioPrefsStore<E extends string = string>(
     ),
   );
 
-  registry.set(storageKey, store as unknown as UseBoundStore<StoreApi<AudioPrefsState<string>>>);
+  registry.set(storageKey, store);
   return store;
 }
 

package/src/hooks/device/useBrowserDetect.ts

@@ -139,7 +139,11 @@ export function useBrowserDetect(): BrowserInfo {
     const isEdge = ua.includes('edg/') || ua.includes('edge/');
 
     // Brave (check for Brave-specific API)
-    const isBrave = !!(window.navigator as any).brave;
+    // Boundary: `navigator.brave` is a Brave-only extension absent from lib.dom.
+    // Declaring the one optional field we read keeps the probe honest without
+    // asserting anything about the rest of Navigator.
+    const braveAware: Navigator & { brave?: unknown } = window.navigator;
+    const isBrave = braveAware.brave != null;
 
     // Arc (check for Arc-specific markers in UA)
     const isArc = ua.includes('arc/');

package/src/hooks/dom/useImageLoader.ts

@@ -6,7 +6,7 @@
 
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 export interface ImageLoaderState {
   isLoading: boolean;
@@ -16,8 +16,13 @@ export interface ImageLoaderState {
 
 export interface ImageLoaderCallbacks {
   onLoadStart?: () => void;
-  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  /**
+   * Receives the DOM `Event` from a detached `new Image()`, NOT a React
+   * synthetic event: there is no React element behind this load, so
+   * `persist`, `nativeEvent` and `isDefaultPrevented` do not exist on it.
+   */
+  onLoad?: (event: Event) => void;
+  onError?: (event: Event) => void;
 }
 
 export const useImageLoader = (
@@ -30,18 +35,23 @@ export const useImageLoader = (
     hasError: false,
   });
 
+  // Callbacks are read through a ref so they never participate in the deps
+  // below. Callers pass `callbacks` as an inline object literal, so depending on
+  // it would re-run the load effect on every render — refetching the image and
+  // re-firing onLoadStart indefinitely. The ref keeps the latest handlers
+  // without tying image loading to render identity.
+  const callbacksRef = useRef(callbacks);
+  callbacksRef.current = callbacks;
+
   const handleLoad = useCallback((event: Event) => {
     setState({
       isLoading: false,
       isLoaded: true,
       hasError: false,
     });
-    
-    // Call user callback if provided
-    if (callbacks?.onLoad) {
-      callbacks.onLoad(event as unknown as React.SyntheticEvent<HTMLImageElement>);
-    }
-  }, [callbacks?.onLoad]);
+
+    callbacksRef.current?.onLoad?.(event);
+  }, []);
 
   const handleError = useCallback((event: Event) => {
     setState({
@@ -49,12 +59,9 @@ export const useImageLoader = (
       isLoaded: false,
       hasError: true,
     });
-    
-    // Call user callback if provided
-    if (callbacks?.onError) {
-      callbacks.onError(event as unknown as React.SyntheticEvent<HTMLImageElement>);
-    }
-  }, [callbacks?.onError]);
+
+    callbacksRef.current?.onError?.(event);
+  }, []);
 
   useEffect(() => {
     if (!src) {
@@ -72,10 +79,7 @@ export const useImageLoader = (
       hasError: false,
     });
 
-    // Call load start callback
-    if (callbacks?.onLoadStart) {
-      callbacks.onLoadStart();
-    }
+    callbacksRef.current?.onLoadStart?.();
 
     const img = new Image();
     
@@ -89,7 +93,7 @@ export const useImageLoader = (
       img.removeEventListener('load', handleLoad);
       img.removeEventListener('error', handleError);
     };
-  }, [src, handleLoad, handleError, callbacks?.onLoadStart]);
+  }, [src, handleLoad, handleError]);
 
   return state;
 };

package/src/hooks/dom/useScroll.ts

@@ -47,7 +47,7 @@
  *   const direction = useScrollDirection();
  */
 
-import { useCallback, useSyncExternalStore, type RefObject } from 'react';
+import { useCallback, useMemo, useSyncExternalStore, type RefObject } from 'react';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -264,8 +264,9 @@ const getServerSnapshot = (): ScrollSnapshot => SSR_SNAPSHOT;
  * underlying store but let React skip re-renders when other fields change.
  */
 export function useScroll(target?: ScrollTarget): ScrollSnapshot {
-  const subscribe = useCallback(subscribeFactory(target), [target]);
-  const getSnapshot = useCallback(getSnapshotFactory(target), [target]);
+  // useMemo, not useCallback: these are factory RESULTS, not inline functions.
+  const subscribe = useMemo(() => subscribeFactory(target), [target]);
+  const getSnapshot = useMemo(() => getSnapshotFactory(target), [target]);
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 
@@ -274,7 +275,7 @@ export function useScroll(target?: ScrollTarget): ScrollSnapshot {
  * change — direction flips and isScrolling transitions are ignored.
  */
 export function useScrollPosition(target?: ScrollTarget): { x: number; y: number } {
-  const subscribe = useCallback(subscribeFactory(target), [target]);
+  const subscribe = useMemo(() => subscribeFactory(target), [target]);
   const getServerXY = useCallback(() => SSR_XY, []);
   const getXY = useCallback(() => {
     const snap = getSnapshotFactory(target)();
@@ -298,7 +299,7 @@ function cachePosition(snap: ScrollSnapshot): { x: number; y: number } {
  * flips (e.g. user reverses scroll).
  */
 export function useScrollDirection(target?: ScrollTarget): ScrollDirection {
-  const subscribe = useCallback(subscribeFactory(target), [target]);
+  const subscribe = useMemo(() => subscribeFactory(target), [target]);
   const getDirection = useCallback(
     () => getSnapshotFactory(target)().direction,
     [target]
@@ -312,7 +313,7 @@ export function useScrollDirection(target?: ScrollTarget): ScrollDirection {
  * idle gap. Useful for hiding hover overlays while scrolling.
  */
 export function useIsScrolling(target?: ScrollTarget): boolean {
-  const subscribe = useCallback(subscribeFactory(target), [target]);
+  const subscribe = useMemo(() => subscribeFactory(target), [target]);
   const getIsScrolling = useCallback(
     () => getSnapshotFactory(target)().isScrolling,
     [target]

package/src/hooks/events/useEventsBus.ts

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from 'react';
 
-export type FormEvent<T extends string = string, P = any> = {
+export type FormEvent<T extends string = string, P = unknown> = {
     type: T;
     payload?: P;
     timestamp?: number;
@@ -11,7 +11,9 @@ export type FormEvent<T extends string = string, P = any> = {
 type EventListener<T extends FormEvent> = (event: T) => void;
 
 class EventBus {
-    private listeners: Set<EventListener<any>> = new Set();
+    // Subscribers each declare their own event type; the bus only ever hands
+    // them a FormEvent, so it stores the widest listener it can actually call.
+    private listeners: Set<EventListener<FormEvent>> = new Set();
 
     publish<T extends FormEvent>(event: T) {
         this.listeners.forEach(listener => listener({
@@ -20,7 +22,10 @@ class EventBus {
         }));
     }
 
-    subscribe<T extends FormEvent>(listener: EventListener<T>) {
+    // Not generic on purpose: the bus broadcasts EVERY event to EVERY listener,
+    // so a listener declaring a narrower event type would be handed events that
+    // do not match it. Filtering by `type` is the subscriber's job.
+    subscribe(listener: EventListener<FormEvent>) {
         this.listeners.add(listener);
         return () => {
             this.listeners.delete(listener);
@@ -30,9 +35,18 @@ class EventBus {
 
 export const events = new EventBus();
 
-export function useEventListener<T extends string, P>(
+/**
+ * Subscribe to one event type on the bus.
+ *
+ * The payload arrives from an untyped publisher, so it is delivered as
+ * `unknown`: this is the boundary, and the handler narrows it. Callers that
+ * know the publisher's shape should narrow with a type guard rather than
+ * declaring the shape and hoping — nothing at runtime enforces the pairing of
+ * `eventType` and payload.
+ */
+export function useEventListener<T extends string>(
     eventType: T,
-    handler: (payload: P) => void
+    handler: (payload: unknown) => void
 ) {
     const savedHandler = useRef(handler);
 

package/src/hooks/hotkey/useHotkeyChord.ts

@@ -48,12 +48,19 @@ export function useHotkeyChord(
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
 
+  // The listener is rebound on the chord's CONTENTS, not the array's identity:
+  // callers write `useHotkeyChord(['g', 't'], …)` with a fresh literal each
+  // render, which would otherwise tear down and re-add the keydown listener
+  // continuously and reset any chord in progress.
+  const keysKey = keys.join('|');
+  const keysRef = useRef(keys);
+  keysRef.current = keys;
+
   useEffect(() => {
     if (!enabled) return;
     if (typeof window === 'undefined') return;
-    if (!keys.length) return;
-
-    const sequence = keys.map((k) => k.toLowerCase());
+    const sequence = keysRef.current.map((k) => k.toLowerCase());
+    if (!sequence.length) return;
     let progress = 0;
     let timer: ReturnType<typeof setTimeout> | null = null;
 
@@ -92,5 +99,5 @@ export function useHotkeyChord(
       window.removeEventListener('keydown', onKey);
       if (timer) clearTimeout(timer);
     };
-  }, [keys.join('|'), enabled, chordWindow, enableOnFormTags, preventDefault]);
+  }, [keysKey, enabled, chordWindow, enableOnFormTags, preventDefault]);
 }

package/src/hooks/hotkey/useHotkeyHelp.ts

@@ -61,8 +61,13 @@ export function getRegisteredHotkeys(): RegisteredHotkey[] {
  * still want to appear in the cheat sheet).
  */
 export function useRegisterHotkey(entry: RegisteredHotkey | null): void {
+  // Registration is keyed on the entry's FIELDS, not its identity: callers pass
+  // an inline object, so depending on `entry` would unregister and re-register
+  // on every render and notify every cheat-sheet subscriber each time.
+  const { combo, description, scope } = entry ?? {};
+
   useEffect(() => {
-    if (!entry) return;
-    return registerHotkey(entry);
-  }, [entry?.combo, entry?.description, entry?.scope]);
+    if (!combo || !description) return;
+    return registerHotkey({ combo, description, scope });
+  }, [combo, description, scope]);
 }

package/src/hooks/router/adapter.tsx

@@ -113,7 +113,9 @@ export const defaultAdapter: RouterAdapter = Object.freeze({
 // every hook reads another — falling back to the History API, which changes the
 // URL without telling the host router.
 const CONTEXT_KEY = Symbol.for('@djangocfg/ui-core.RouterAdapterContext');
-const globalScope = globalThis as unknown as Record<symbol, unknown>;
+// `typeof globalThis` carries no index signature, but the object genuinely
+// accepts symbol keys — this asserts a property the runtime has.
+const globalScope = globalThis as Record<symbol, unknown>;
 
 export const RouterAdapterContext =
   (globalScope[CONTEXT_KEY] as ReturnType<typeof createContext<RouterAdapter | null>> | undefined) ??

package/src/hooks/state/storage-quota.ts

@@ -0,0 +1,27 @@
+/**
+ * Shared quota detection for the localStorage / sessionStorage hooks.
+ *
+ * Internal — not exported from the package entry point.
+ */
+
+/**
+ * Is this thrown value the browser's "storage is full" signal?
+ *
+ * Boundary: a `catch` binding is `unknown`, and browsers disagree on how they
+ * report a full quota — Chrome/Safari throw `QuotaExceededError`, older engines
+ * use the legacy DOMException code 22, and some report it only in the message.
+ * Each field is therefore probed rather than assumed to exist.
+ */
+export function isQuotaExceededError(error: unknown): boolean {
+  if (typeof error !== 'object' || error === null) return false;
+
+  const { name, code, message } = error as {
+    name?: unknown;
+    code?: unknown;
+    message?: unknown;
+  };
+
+  if (name === 'QuotaExceededError') return true;
+  if (code === 22) return true;
+  return typeof message === 'string' && message.includes('quota');
+}

package/src/hooks/state/useDebouncedCallback.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 /**
  * Creates a debounced version of a callback function.
@@ -9,10 +9,15 @@ import { useCallback, useEffect, useRef } from 'react';
  * @param delay The debounce delay in milliseconds.
  * @returns A debounced callback function.
  */
-export function useDebouncedCallback<T extends (...args: any[]) => any>(
+/** The debounced function, plus the `cancel` handle this hook attaches to it. */
+export type DebouncedCallback<T extends (...args: never[]) => unknown> = ((
+    ...args: Parameters<T>
+) => void) & { cancel: () => void };
+
+export function useDebouncedCallback<T extends (...args: never[]) => unknown>(
     callback: T,
     delay: number
-): (...args: Parameters<T>) => void {
+): DebouncedCallback<T> {
     const callbackRef = useRef(callback);
     const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -30,29 +35,30 @@ export function useDebouncedCallback<T extends (...args: any[]) => any>(
         };
     }, []);
 
-    const debouncedCallback = useCallback(
-        (...args: Parameters<T>) => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-
-            timeoutRef.current = setTimeout(() => {
-                callbackRef.current(...args);
-            }, delay);
-        },
-        [delay]
-    );
-
-    // Add a cancel method to the debounced function
-    // We attach it directly to the function object
-    (debouncedCallback as any).cancel = useCallback(() => {
+    const cancel = useCallback(() => {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
             timeoutRef.current = null;
         }
     }, []);
 
-    return debouncedCallback;
+    // `cancel` is part of the returned type, so it is assembled with the
+    // function rather than bolted on afterwards.
+    return useMemo(() => {
+        const debounced: DebouncedCallback<T> = Object.assign(
+            (...args: Parameters<T>) => {
+                if (timeoutRef.current) {
+                    clearTimeout(timeoutRef.current);
+                }
+
+                timeoutRef.current = setTimeout(() => {
+                    callbackRef.current(...args);
+                }, delay);
+            },
+            { cancel }
+        );
+        return debounced;
+    }, [delay, cancel]);
 }
 
 export default useDebouncedCallback; 

package/src/hooks/state/useLocalStorage.ts

@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import { isQuotaExceededError } from './storage-quota';
+
 /**
  * Storage wrapper format with metadata
  * Used when TTL is specified
@@ -254,7 +256,7 @@ export function useLocalStorage<T>(
   }, [key, parseRaw]);
 
   // Check data size and limit
-  const checkDataSize = (data: any): boolean => {
+  const checkDataSize = (data: unknown): boolean => {
     try {
       const jsonString = JSON.stringify(data);
       const sizeInBytes = new Blob([jsonString]).size;
@@ -338,12 +340,8 @@ export function useLocalStorage<T>(
     (dataToStore: string): void => {
       try {
         window.localStorage.setItem(key, dataToStore);
-      } catch (storageError: any) {
-        if (
-          storageError.name === 'QuotaExceededError' ||
-          storageError.code === 22 ||
-          storageError.message?.includes('quota')
-        ) {
+      } catch (storageError) {
+        if (isQuotaExceededError(storageError)) {
           console.warn('localStorage quota exceeded, clearing old data...');
           clearOldData();
           try {
@@ -481,12 +479,8 @@ export function useLocalStorage<T>(
       if (typeof window !== 'undefined') {
         try {
           window.localStorage.removeItem(key);
-        } catch (removeError: any) {
-          if (
-            removeError.name === 'QuotaExceededError' ||
-            removeError.code === 22 ||
-            removeError.message?.includes('quota')
-          ) {
+        } catch (removeError) {
+          if (isQuotaExceededError(removeError)) {
             console.warn('localStorage quota exceeded during removal, clearing old data...');
             clearOldData();
             try {

package/src/hooks/state/useSessionStorage.ts

@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 
+import { isQuotaExceededError } from './storage-quota';
+
 /**
  * Storage wrapper format with metadata
  * Used when TTL is specified
@@ -131,7 +133,7 @@ export function useSessionStorage<T>(
   });
 
   // Check data size and limit
-  const checkDataSize = (data: any): boolean => {
+  const checkDataSize = (data: unknown): boolean => {
     try {
       const jsonString = JSON.stringify(data);
       const sizeInBytes = new Blob([jsonString]).size;
@@ -236,11 +238,9 @@ export function useSessionStorage<T>(
         // Try to set the value
         try {
           window.sessionStorage.setItem(key, dataToStore);
-        } catch (storageError: any) {
+        } catch (storageError) {
           // If quota exceeded, clear old data and try again
-          if (storageError.name === 'QuotaExceededError' ||
-              storageError.code === 22 ||
-              storageError.message?.includes('quota')) {
+          if (isQuotaExceededError(storageError)) {
             console.warn('sessionStorage quota exceeded, clearing old data...');
             clearOldData();
 
@@ -279,11 +279,9 @@ export function useSessionStorage<T>(
       if (typeof window !== 'undefined') {
         try {
           window.sessionStorage.removeItem(key);
-        } catch (removeError: any) {
+        } catch (removeError) {
           // If removal fails due to quota, try to clear some data first
-          if (removeError.name === 'QuotaExceededError' ||
-              removeError.code === 22 ||
-              removeError.message?.includes('quota')) {
+          if (isQuotaExceededError(removeError)) {
             console.warn('sessionStorage quota exceeded during removal, clearing old data...');
             clearOldData();
 

package/src/lib/compose-event-handlers.ts

@@ -1,6 +1,9 @@
 "use client";
 
-function composeEventHandlers<E>(
+// Constrained to values that actually carry `defaultPrevented` — both DOM
+// events and React synthetic events qualify. Without it the guard below reads a
+// property the type never promised.
+function composeEventHandlers<E extends { defaultPrevented: boolean }>(
   originalEventHandler?: (event: E) => void,
   ourEventHandler?: (event: E) => void,
   { checkForDefaultPrevented = true } = {},
@@ -8,10 +11,7 @@ function composeEventHandlers<E>(
   return function handleEvent(event: E) {
     originalEventHandler?.(event);
 
-    if (
-      checkForDefaultPrevented &&
-      (event as unknown as Event).defaultPrevented
-    ) {
+    if (checkForDefaultPrevented && event.defaultPrevented) {
       return;
     }
 

package/src/lib/dialog-service/getDialog.ts

@@ -30,7 +30,7 @@ export function getDialog(): DialogAPI | null {
   if (!api) {
     if (process.env.NODE_ENV !== 'production' && !warnedMissing) {
       warnedMissing = true;
-      // eslint-disable-next-line no-console
+       
       console.warn(
         '[getDialog] window.dialog is not available — mount <DialogProvider /> at the app root.',
       );