@epoch32/visage 1.3.0 → 1.3.2

package/src/ui/command-dialog.tsx

@@ -2,6 +2,7 @@ import { Portal } from "../dom/control-flow";
 import type { Child } from "../dom/render";
 import type { CommandProps } from "./command";
 import { CommandRoot } from "./command";
+import { useDismiss } from "./overlay";
 import { createControllableSignal } from "./utils";
 
 export interface CommandDialogProps extends CommandProps {
@@ -19,6 +20,15 @@ export function CommandDialog(props: CommandDialogProps): Child {
     onChange: props.onOpenChange
   });
 
+  const contentRef: { current: HTMLElement | null } = { current: null };
+
+  const dismiss = useDismiss(() => contentRef.current, {
+    enabled: () => open(),
+    onDismiss: () => setOpen(false),
+    escapeKey: true,
+    outsidePointer: false
+  });
+
   const { overlayClass, contentClass, style, ...rest } = props;
 
   return (
@@ -39,8 +49,15 @@ export function CommandDialog(props: CommandDialogProps): Child {
         onClick={(e: MouseEvent) => {
           if (e.target === e.currentTarget) setOpen(false);
         }}
+        onKeyDown={dismiss.handleKeyDown}
       >
-        <div style={{ width: "100%", maxWidth: "560px" }} class={contentClass}>
+        <div
+          ref={(el: HTMLElement | null) => {
+            contentRef.current = el;
+          }}
+          style={{ width: "100%", maxWidth: "560px" }}
+          class={contentClass}
+        >
           <CommandRoot {...rest} />
         </div>
       </div>

package/src/ui/dialog.tsx

@@ -2,7 +2,8 @@ import { Portal } from "../dom/control-flow";
 import type { Child } from "../dom/render";
 import type { ReadonlySignal } from "../signals";
 import { createContext, useContext } from "../signals/context";
-import { createControllableSignal, createId, trapFocus } from "./utils";
+import { useDismiss } from "./overlay";
+import { createControllableSignal, createId } from "./utils";
 
 export interface DialogContextValue {
   open: ReadonlySignal<boolean>;
@@ -207,25 +208,26 @@ export interface DialogContentProps {
 export function DialogContent(props: DialogContentProps): Child {
   const ctx = useContext(DialogContext);
 
+  const dismiss = useDismiss(() => ctx?.contentRef.current, {
+    enabled: () => ctx?.open() ?? false,
+    onDismiss: () => ctx?.setOpen(false),
+    escapeKey: true,
+    trapFocus: true,
+    outsidePointer: false, // backdrop clicks are handled by DialogOverlay
+    closeSelector: "[data-dialog-close]",
+    onEscapeKeyDown: (e) => {
+      if (props.onKeyDown) props.onKeyDown(e);
+    }
+  });
+
   const handleKeyDown = (e: KeyboardEvent) => {
     if (props.onKeyDown) props.onKeyDown(e);
-    if (e.defaultPrevented) return;
-
-    if (e.key === "Escape") {
-      ctx?.setOpen(false);
-      e.stopPropagation();
-    } else if (e.key === "Tab" && ctx?.contentRef.current) {
-      trapFocus(ctx.contentRef.current, e);
-    }
+    dismiss.handleKeyDown(e);
   };
 
   const handleClick = (e: MouseEvent) => {
     if (props.onClick) props.onClick(e);
-    if (e.defaultPrevented) return;
-    const target = e.target as HTMLElement | null;
-    if (target?.closest("[data-dialog-close]")) {
-      ctx?.setOpen(false);
-    }
+    dismiss.handleClick(e);
   };
 
   const {

package/src/ui/dropdown-menu.tsx

@@ -1,8 +1,9 @@
 import { Portal } from "../dom/control-flow";
 import type { Child } from "../dom/render";
-import { onCleanup, type ReadonlySignal } from "../signals";
+import type { ReadonlySignal } from "../signals";
 import { createContext, useContext } from "../signals/context";
-import { createControllableSignal, createId, onClickOutside } from "./utils";
+import { useDismiss } from "./overlay";
+import { createControllableSignal, createId } from "./utils";
 
 export interface DropdownMenuContextValue {
   open: ReadonlySignal<boolean>;
@@ -207,6 +208,19 @@ export interface DropdownMenuContentProps {
 export function DropdownMenuContent(props: DropdownMenuContentProps): Child {
   const ctx = useContext(DropdownMenuContext);
 
+  const dismiss = useDismiss(() => ctx?.contentRef.current, {
+    enabled: () => ctx?.open() ?? false,
+    onDismiss: () => {
+      if (ctx) {
+        ctx.setOpen(false);
+        ctx.triggerRef.current?.focus();
+      }
+    },
+    escapeKey: true,
+    outsidePointer: true,
+    outsideIgnore: () => [ctx?.triggerRef.current]
+  });
+
   const handleKeyDown = (e: KeyboardEvent) => {
     if (props.onKeyDown) props.onKeyDown(e);
     if (e.defaultPrevented) return;
@@ -233,10 +247,7 @@ export function DropdownMenuContent(props: DropdownMenuContentProps): Child {
       items[items.length - 1]?.focus();
       e.preventDefault();
     } else if (e.key === "Escape") {
-      if (ctx) {
-        ctx.setOpen(false);
-        ctx.triggerRef.current?.focus();
-      }
+      dismiss.handleKeyDown(e);
       e.preventDefault();
     } else if (e.key === "Tab") {
       if (ctx) ctx.setOpen(false);
@@ -259,14 +270,6 @@ export function DropdownMenuContent(props: DropdownMenuContentProps): Child {
       ref={(el: HTMLElement | null) => {
         if (ctx) {
           ctx.contentRef.current = el;
-          if (el) {
-            const cleanup = onClickOutside([ctx.triggerRef.current, el], () => {
-              if (ctx.open()) {
-                ctx.setOpen(false);
-              }
-            });
-            onCleanup(cleanup);
-          }
         }
       }}
       id={ctx?.menuId}

package/src/ui/index.ts

@@ -91,6 +91,10 @@ export {
   Stack,
   type StackProps
 } from "./layout";
+export {
+  type UseDismissOptions,
+  useDismiss
+} from "./overlay";
 export {
   Popover,
   PopoverClose,

package/src/ui/overlay.ts

@@ -0,0 +1,130 @@
+import { onCleanup } from "../signals";
+import { onClickOutside, trapFocus } from "./utils";
+
+export interface UseDismissOptions {
+  /**
+   * Whether dismiss listeners are active.
+   * Defaults to true.
+   */
+  enabled?: boolean | (() => boolean);
+  /**
+   * Callback fired when dismissal is requested (Escape, click outside, or close button).
+   */
+  onDismiss: () => void;
+  /**
+   * Close on 'Escape' key press.
+   * Defaults to true.
+   */
+  escapeKey?: boolean;
+  /**
+   * Close on pointer interaction outside the target element(s).
+   * Defaults to true.
+   */
+  outsidePointer?: boolean;
+  /**
+   * Additional element(s) to exclude from outside click detection (e.g. trigger button).
+   */
+  outsideIgnore?:
+    | Array<HTMLElement | null | undefined>
+    | HTMLElement
+    | null
+    | undefined
+    | (() => Array<HTMLElement | null | undefined>);
+  /**
+   * Trap keyboard focus inside the container when Tab / Shift+Tab is pressed.
+   * Defaults to false.
+   */
+  trapFocus?: boolean;
+  /**
+   * Close selector for click events bubbling inside the container (e.g. '[data-dialog-close]').
+   */
+  closeSelector?: string;
+  /**
+   * Callback fired when an outside pointer interaction occurs.
+   */
+  onOutsidePointer?: (event: MouseEvent | TouchEvent) => void;
+  /**
+   * Callback fired when an Escape keydown occurs.
+   */
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+}
+
+/**
+ * Headless hook to manage overlay dismissal:
+ * - Outside pointer dismissal (click outside)
+ * - Escape key dismissal
+ * - Keyboard focus trapping (Tab cycle)
+ * - Close button selector dismissal delegation
+ */
+export function useDismiss(
+  element: () => HTMLElement | null | undefined,
+  options: UseDismissOptions
+): {
+  handleKeyDown: (e: KeyboardEvent) => void;
+  handleClick: (e: MouseEvent) => void;
+} {
+  const isEnabled = () => {
+    if (typeof options.enabled === "function") return options.enabled();
+    return options.enabled ?? true;
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isEnabled() || e.defaultPrevented) return;
+
+    if (e.key === "Escape" && (options.escapeKey ?? true)) {
+      if (options.onEscapeKeyDown) {
+        options.onEscapeKeyDown(e);
+      }
+      if (!e.defaultPrevented) {
+        options.onDismiss();
+        e.stopPropagation();
+      }
+    } else if (e.key === "Tab" && options.trapFocus) {
+      const el = element();
+      if (el) {
+        trapFocus(el, e);
+      }
+    }
+  };
+
+  const handleClick = (e: MouseEvent) => {
+    if (!isEnabled() || e.defaultPrevented) return;
+    if (options.closeSelector) {
+      const target = e.target as HTMLElement | null;
+      if (target?.closest(options.closeSelector)) {
+        options.onDismiss();
+      }
+    }
+  };
+
+  // Setup outside pointer listener
+  if (typeof document !== "undefined") {
+    const unbind = onClickOutside(
+      () => {
+        const el = element();
+        const rawIgnores =
+          typeof options.outsideIgnore === "function"
+            ? options.outsideIgnore()
+            : options.outsideIgnore;
+        const ignores = Array.isArray(rawIgnores) ? rawIgnores : rawIgnores ? [rawIgnores] : [];
+        return [el, ...ignores];
+      },
+      (event) => {
+        if (!isEnabled()) return;
+        if (options.outsidePointer === false) return;
+        if (options.onOutsidePointer) {
+          options.onOutsidePointer(event);
+        }
+        if (!event.defaultPrevented) {
+          options.onDismiss();
+        }
+      }
+    );
+    onCleanup(unbind);
+  }
+
+  return {
+    handleKeyDown,
+    handleClick
+  };
+}

package/src/ui/popover.tsx

@@ -1,8 +1,9 @@
 import { Portal } from "../dom/control-flow";
 import type { Child } from "../dom/render";
-import { onCleanup, type ReadonlySignal } from "../signals";
+import type { ReadonlySignal } from "../signals";
 import { createContext, useContext } from "../signals/context";
-import { createControllableSignal, createId, onClickOutside } from "./utils";
+import { useDismiss } from "./overlay";
+import { createControllableSignal, createId } from "./utils";
 
 export interface PopoverContextValue {
   open: ReadonlySignal<boolean>;
@@ -138,24 +139,29 @@ export interface PopoverContentProps {
 export function PopoverContent(props: PopoverContentProps): Child {
   const ctx = useContext(PopoverContext);
 
+  const dismiss = useDismiss(() => ctx?.contentRef.current, {
+    enabled: () => ctx?.open() ?? false,
+    onDismiss: () => ctx?.setOpen(false),
+    escapeKey: true,
+    outsidePointer: true,
+    outsideIgnore: () => [ctx?.triggerRef.current],
+    closeSelector: "[data-popover-close]",
+    onEscapeKeyDown: (e) => {
+      if (props.onKeyDown) props.onKeyDown(e);
+      if (!e.defaultPrevented) {
+        ctx?.triggerRef.current?.focus();
+      }
+    }
+  });
+
   const handleKeyDown = (e: KeyboardEvent) => {
     if (props.onKeyDown) props.onKeyDown(e);
-    if (e.defaultPrevented) return;
-
-    if (e.key === "Escape" && ctx) {
-      ctx.setOpen(false);
-      ctx.triggerRef.current?.focus();
-      e.stopPropagation();
-    }
+    dismiss.handleKeyDown(e);
   };
 
   const handleClick = (e: MouseEvent) => {
     if (props.onClick) props.onClick(e);
-    if (e.defaultPrevented) return;
-    const target = e.target as HTMLElement | null;
-    if (target?.closest("[data-popover-close]")) {
-      ctx?.setOpen(false);
-    }
+    dismiss.handleClick(e);
   };
 
   const {
@@ -175,14 +181,6 @@ export function PopoverContent(props: PopoverContentProps): Child {
       ref={(el: HTMLElement | null) => {
         if (ctx) {
           ctx.contentRef.current = el;
-          if (el) {
-            const cleanup = onClickOutside([ctx.triggerRef.current, el], () => {
-              if (ctx.open()) {
-                ctx.setOpen(false);
-              }
-            });
-            onCleanup(cleanup);
-          }
         }
       }}
       id={ctx?.contentId}

package/src/ui/utils.ts

@@ -79,14 +79,20 @@ export function trapFocus(container: HTMLElement, event: KeyboardEvent) {
  * Listen for click outside a target element
  */
 export function onClickOutside(
-  elements: Array<HTMLElement | null | undefined> | HTMLElement | null | undefined,
+  elements:
+    | Array<HTMLElement | null | undefined>
+    | HTMLElement
+    | null
+    | undefined
+    | (() => Array<HTMLElement | null | undefined>),
   handler: (event: MouseEvent | TouchEvent) => void
 ): () => void {
   const listener = (event: MouseEvent | TouchEvent) => {
     const target = event.target as Node | null;
     if (!target) return;
 
-    const list = Array.isArray(elements) ? elements : [elements];
+    const raw = typeof elements === "function" ? elements() : elements;
+    const list = Array.isArray(raw) ? raw : [raw];
     const isInside = list.some((el) => el?.contains(target));
 
     if (!isInside) {

package/src/virtual/virtualizer.ts

@@ -56,30 +56,41 @@ export function createVirtualizer(options: VirtualizerOptions): Virtualizer {
     return getItemHeight(index);
   };
 
-  // Compute prefix offsets for fast range calculation
-  const totalSize = computed(() => {
-    const count = getCount();
-    if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
-      return count * options.itemHeight;
-    }
-    let total = 0;
-    for (let i = 0; i < count; i++) {
-      total += getItemSize(i);
-    }
-    return total;
-  });
+  // Cached prefix offsets for O(1) offset lookups and true O(log N) binary search
+  const offsetsCache: number[] = [0];
+  let offsetsValidUpTo = 0;
+
+  const invalidateOffsetsFrom = (index: number) => {
+    offsetsValidUpTo = Math.min(offsetsValidUpTo, index);
+  };
 
   const getOffsetForIndex = (targetIndex: number): number => {
+    if (targetIndex <= 0) return 0;
     if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
       return targetIndex * options.itemHeight;
     }
-    let offset = 0;
-    for (let i = 0; i < targetIndex; i++) {
-      offset += getItemSize(i);
+    if (targetIndex <= offsetsValidUpTo) {
+      return offsetsCache[targetIndex]!;
     }
-    return offset;
+    for (let i = offsetsValidUpTo; i < targetIndex; i++) {
+      offsetsCache[i + 1] = (offsetsCache[i] ?? 0) + getItemSize(i);
+    }
+    offsetsValidUpTo = targetIndex;
+    return offsetsCache[targetIndex]!;
   };
 
+  const measurementVersion = signal(0, { internal: true });
+
+  // Compute prefix offsets for fast range calculation
+  const totalSize = computed(() => {
+    measurementVersion();
+    const count = getCount();
+    if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
+      return count * options.itemHeight;
+    }
+    return getOffsetForIndex(count);
+  });
+
   const findIndexAtOffset = (offset: number): number => {
     const count = getCount();
     if (count === 0) return 0;
@@ -110,12 +121,14 @@ export function createVirtualizer(options: VirtualizerOptions): Virtualizer {
   };
 
   const startIndex = computed(() => {
+    measurementVersion();
     const offset = scrollOffset();
     const rawStart = findIndexAtOffset(offset);
     return Math.max(0, rawStart - overscan);
   });
 
   const endIndex = computed(() => {
+    measurementVersion();
     const count = getCount();
     if (count === 0) return 0;
     const endOffset = scrollOffset() + (containerSize() || 500);
@@ -255,8 +268,8 @@ export function createVirtualizer(options: VirtualizerOptions): Virtualizer {
       : element.getBoundingClientRect().height;
     if (measuredSize > 0 && dynamicSizeCache.get(index) !== measuredSize) {
       dynamicSizeCache.set(index, measuredSize);
-      // Force recalculation by touching scrollOffset
-      scrollOffset.update((o) => o);
+      invalidateOffsetsFrom(index);
+      measurementVersion.update((v) => v + 1);
     }
   };