@epoch32/visage 1.3.1 → 1.3.2

package/dist/devtools/index.js

@@ -4,8 +4,8 @@ import {
   highlightElement2,
   VisageDevTools2,
   connectDevTools2
-} from "../index-ptj8rt6b.js";
-import"../index-b7emqmej.js";
+} from "../index-dz6n88aq.js";
+import"../index-kykzcs7p.js";
 import"../index-enc8cmea.js";
 import"../index-3y73zgbk.js";
 import"../index-xby428n5.js";

package/dist/{index-ptj8rt6b.js → index-dz6n88aq.js}

@@ -16,7 +16,7 @@ import {
   Tabs2,
   Tooltip3,
   Switch2
-} from "./index-b7emqmej.js";
+} from "./index-kykzcs7p.js";
 import {
   Style2
 } from "./index-enc8cmea.js";

package/dist/{index-0qat98zs.js → index-k7zd3awa.js}

@@ -167,7 +167,16 @@ function Routes2(props) {
 }
 function Link2(props) {
   const router = useContext2(RouterContext);
-  const { href, class: className, activeClass = "active", replace, children, ...rest } = props;
+  const {
+    href,
+    class: classProp,
+    className: classNameProp,
+    activeClass = "active",
+    replace,
+    children,
+    ...rest
+  } = props;
+  const rawClass = classProp ?? classNameProp;
   const handleClick = (e) => {
     if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0) {
       return;
@@ -186,7 +195,7 @@ function Link2(props) {
     return current === href || href !== "/" && current.startsWith(href);
   });
   const computedClass = computed2(() => {
-    const baseCls = typeof className === "function" ? className() : className ?? "";
+    const baseCls = typeof rawClass === "function" ? rawClass() : rawClass ?? "";
     if (activeClass && isActive()) {
       return baseCls ? `${baseCls} ${activeClass}` : activeClass;
     }

package/dist/{index-b7emqmej.js → index-kykzcs7p.js}

@@ -69,7 +69,8 @@ function onClickOutside2(elements, handler) {
     const target = event.target;
     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) {
       handler(event);

package/dist/{index-aagpn02x.js → index-vbsc8z8h.js}

@@ -21,7 +21,7 @@ import {
   createControllableSignal2,
   trapFocus2,
   onClickOutside2
-} from "./index-b7emqmej.js";
+} from "./index-kykzcs7p.js";
 
 // src/ui/accordion.tsx
 var AccordionContext = createContext2(null);
@@ -539,6 +539,67 @@ var BottomBar2 = Object.assign(BottomBarRoot2, {
   Badge: BottomBarBadge2,
   Separator: BottomBarSeparator2
 });
+// src/ui/overlay.ts
+function useDismiss2(element, options) {
+  const isEnabled = () => {
+    if (typeof options.enabled === "function")
+      return options.enabled();
+    return options.enabled ?? true;
+  };
+  const handleKeyDown = (e) => {
+    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) {
+        trapFocus2(el, e);
+      }
+    }
+  };
+  const handleClick = (e) => {
+    if (!isEnabled() || e.defaultPrevented)
+      return;
+    if (options.closeSelector) {
+      const target = e.target;
+      if (target?.closest(options.closeSelector)) {
+        options.onDismiss();
+      }
+    }
+  };
+  if (typeof document !== "undefined") {
+    const unbind = onClickOutside2(() => {
+      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();
+      }
+    });
+    onCleanup2(unbind);
+  }
+  return {
+    handleKeyDown,
+    handleClick
+  };
+}
+
 // src/ui/command-dialog.tsx
 function CommandDialog2(props) {
   const [open, setOpen] = createControllableSignal2({
@@ -546,6 +607,13 @@ function CommandDialog2(props) {
     defaultValue: props.defaultOpen ?? false,
     onChange: props.onOpenChange
   });
+  const contentRef = { current: null };
+  const dismiss = useDismiss2(() => contentRef.current, {
+    enabled: () => open(),
+    onDismiss: () => setOpen(false),
+    escapeKey: true,
+    outsidePointer: false
+  });
   const { overlayClass, contentClass, style, ...rest } = props;
   return /* @__PURE__ */ jsx2(Portal2, {
     children: /* @__PURE__ */ jsx2("div", {
@@ -565,7 +633,11 @@ function CommandDialog2(props) {
         if (e.target === e.currentTarget)
           setOpen(false);
       },
+      onKeyDown: dismiss.handleKeyDown,
       children: /* @__PURE__ */ jsx2("div", {
+        ref: (el) => {
+          contentRef.current = el;
+        },
         style: { width: "100%", maxWidth: "560px" },
         class: contentClass,
         children: /* @__PURE__ */ jsx2(CommandRoot, {
@@ -1251,27 +1323,27 @@ function DialogOverlay2(props) {
 }
 function DialogContent2(props) {
   const ctx = useContext2(DialogContext);
+  const dismiss = useDismiss2(() => ctx?.contentRef.current, {
+    enabled: () => ctx?.open() ?? false,
+    onDismiss: () => ctx?.setOpen(false),
+    escapeKey: true,
+    trapFocus: true,
+    outsidePointer: false,
+    closeSelector: "[data-dialog-close]",
+    onEscapeKeyDown: (e) => {
+      if (props.onKeyDown)
+        props.onKeyDown(e);
+    }
+  });
   const handleKeyDown = (e) => {
     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) {
-      trapFocus2(ctx.contentRef.current, e);
-    }
+    dismiss.handleKeyDown(e);
   };
   const handleClick = (e) => {
     if (props.onClick)
       props.onClick(e);
-    if (e.defaultPrevented)
-      return;
-    const target = e.target;
-    if (target?.closest("[data-dialog-close]")) {
-      ctx?.setOpen(false);
-    }
+    dismiss.handleClick(e);
   };
   const {
     as: Tag = "div",
@@ -1502,6 +1574,18 @@ function DropdownMenuPortal2(props) {
 }
 function DropdownMenuContent2(props) {
   const ctx = useContext2(DropdownMenuContext);
+  const dismiss = useDismiss2(() => 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) => {
     if (props.onKeyDown)
       props.onKeyDown(e);
@@ -1528,10 +1612,7 @@ function DropdownMenuContent2(props) {
       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)
@@ -1552,14 +1633,6 @@ function DropdownMenuContent2(props) {
     ref: (el) => {
       if (ctx) {
         ctx.contentRef.current = el;
-        if (el) {
-          const cleanup = onClickOutside2([ctx.triggerRef.current, el], () => {
-            if (ctx.open()) {
-              ctx.setOpen(false);
-            }
-          });
-          onCleanup2(cleanup);
-        }
       }
     },
     id: ctx?.menuId,
@@ -1776,26 +1849,30 @@ function PopoverPortal2(props) {
 }
 function PopoverContent2(props) {
   const ctx = useContext2(PopoverContext);
+  const dismiss = useDismiss2(() => 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) => {
     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) => {
     if (props.onClick)
       props.onClick(e);
-    if (e.defaultPrevented)
-      return;
-    const target = e.target;
-    if (target?.closest("[data-popover-close]")) {
-      ctx?.setOpen(false);
-    }
+    dismiss.handleClick(e);
   };
   const {
     as: Tag = "div",
@@ -1812,14 +1889,6 @@ function PopoverContent2(props) {
     ref: (el) => {
       if (ctx) {
         ctx.contentRef.current = el;
-        if (el) {
-          const cleanup = onClickOutside2([ctx.triggerRef.current, el], () => {
-            if (ctx.open()) {
-              ctx.setOpen(false);
-            }
-          });
-          onCleanup2(cleanup);
-        }
       }
     },
     id: ctx?.contentId,
@@ -2034,4 +2103,4 @@ var Toast2 = Object.assign(ToastRoot, {
   Description: ToastDescription2,
   Close: ToastClose2
 });
-export { useAccordionContext2, useAccordionItemContext2, AccordionItem2, AccordionTrigger2, AccordionContent2, Accordion2, BottomBarAction2, BottomBarBadge2, useBottomBarContext2, BottomBarItem2, BottomBarRoot2, BottomBarSeparator2, BottomBar2, CommandDialog2, useCommandContext2, CommandInput2, CommandList2, CommandEmpty2, CommandGroup2, CommandItem2, Command2, DataTable2, useDialogContext2, DialogTrigger2, DialogPortal2, DialogOverlay2, DialogContent2, DialogTitle2, DialogDescription2, DialogClose2, Dialog2, useDropdownMenuContext2, DropdownMenuTrigger2, DropdownMenuPortal2, DropdownMenuContent2, DropdownMenuItem2, DropdownMenuSeparator2, DropdownMenu2, createIcon2, usePopoverContext2, PopoverTrigger2, PopoverPortal2, PopoverContent2, PopoverClose2, Popover2, createToastManager2, defaultToastManager2, toast2, useToast2, ToastProvider2, ToastViewport2, ToastTitle2, ToastDescription2, ToastClose2, Toast2 };
+export { useAccordionContext2, useAccordionItemContext2, AccordionItem2, AccordionTrigger2, AccordionContent2, Accordion2, BottomBarAction2, BottomBarBadge2, useBottomBarContext2, BottomBarItem2, BottomBarRoot2, BottomBarSeparator2, BottomBar2, useDismiss2, CommandDialog2, useCommandContext2, CommandInput2, CommandList2, CommandEmpty2, CommandGroup2, CommandItem2, Command2, DataTable2, useDialogContext2, DialogTrigger2, DialogPortal2, DialogOverlay2, DialogContent2, DialogTitle2, DialogDescription2, DialogClose2, Dialog2, useDropdownMenuContext2, DropdownMenuTrigger2, DropdownMenuPortal2, DropdownMenuContent2, DropdownMenuItem2, DropdownMenuSeparator2, DropdownMenu2, createIcon2, usePopoverContext2, PopoverTrigger2, PopoverPortal2, PopoverContent2, PopoverClose2, Popover2, createToastManager2, defaultToastManager2, toast2, useToast2, ToastProvider2, ToastViewport2, ToastTitle2, ToastDescription2, ToastClose2, Toast2 };

package/dist/index.d.ts

@@ -11,5 +11,5 @@ export { hydrate, renderChildToString, renderToStream, renderToString, type Stre
 export { batch, type CleanupFn, Computed, type Context, computed, createContext, createEffect, createMemo, createRoot, createSignal, createStore, type Dependency, Effect, effect, getActiveScope, isSignal, mutateStore, onCleanup, type ReadonlySignal, runInScope, Scope, Signal, type Store, type Subscriber, signal, untrack, unwrapStore, useContext, type WritableSignal } from "./signals";
 export { type BaseLayoutProps, Center, type CenterProps, type ClassValue, createStyle, css, cx, DIMENSION_KEYWORDS, em, extractStyleTags, fluid, formatStyleProp, type GlassOptions, Grid, type GridProps, getScopeId, glass, hashString, hasReactiveClass, normalizeClass, px, type RadiusVariant, Row, type RowProps, radius, rem, type ScopeOptions, type ShadowVariant, Spacer, type SpacerProps, Stack, type StackProps, Style, type StyleClasses, StyleManager, type StyleProps, scopeCSS, scopeSelector, shadow, space, styleManager, UNITLESS_PROPERTIES, useStyle } from "./style";
 export { html, template } from "./template";
-export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionMultipleProps, type AccordionProps, type AccordionSingleProps, AccordionTrigger, BottomBar, BottomBarAction, type BottomBarActionProps, BottomBarBadge, type BottomBarBadgeProps, type BottomBarContextValue, BottomBarItem, type BottomBarItemConfig, type BottomBarItemProps, type BottomBarProps, BottomBarRoot, BottomBarSeparator, type BottomBarSeparatorProps, type ColumnDef, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupData, CommandInput, type CommandInputProps, CommandItem, type CommandItemData, type CommandItemProps, CommandList, type CommandProps, type CreateTabsOptions, createControllableSignal, createIcon, createId, createTabs, createToastManager, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuSeparator, DropdownMenuTrigger, defaultToastManager, type IconNode, type IconProps, onClickOutside, Popover, PopoverClose, PopoverContent, type PopoverContentProps, PopoverPortal, type PopoverProps, PopoverTrigger, type SortDirection, type SortState, Switch, type SwitchProps, SwitchThumb, type SwitchThumbProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, Toast, ToastClose, type ToastData, ToastDescription, type ToastManager, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, ToastTitle, type ToastVariant, ToastViewport, type ToastViewportProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipPortal, type TooltipProps, TooltipTrigger, toast, trapFocus, useAccordionContext, useAccordionItemContext, useBottomBarContext, useCommandContext, useDialogContext, useDropdownMenuContext, usePopoverContext, useTabsContext, useToast, useTooltipContext } from "./ui";
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionMultipleProps, type AccordionProps, type AccordionSingleProps, AccordionTrigger, BottomBar, BottomBarAction, type BottomBarActionProps, BottomBarBadge, type BottomBarBadgeProps, type BottomBarContextValue, BottomBarItem, type BottomBarItemConfig, type BottomBarItemProps, type BottomBarProps, BottomBarRoot, BottomBarSeparator, type BottomBarSeparatorProps, type ColumnDef, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupData, CommandInput, type CommandInputProps, CommandItem, type CommandItemData, type CommandItemProps, CommandList, type CommandProps, type CreateTabsOptions, createControllableSignal, createIcon, createId, createTabs, createToastManager, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuSeparator, DropdownMenuTrigger, defaultToastManager, type IconNode, type IconProps, onClickOutside, Popover, PopoverClose, PopoverContent, type PopoverContentProps, PopoverPortal, type PopoverProps, PopoverTrigger, type SortDirection, type SortState, Switch, type SwitchProps, SwitchThumb, type SwitchThumbProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, Toast, ToastClose, type ToastData, ToastDescription, type ToastManager, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, ToastTitle, type ToastVariant, ToastViewport, type ToastViewportProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipPortal, type TooltipProps, TooltipTrigger, toast, trapFocus, type UseDismissOptions, useAccordionContext, useAccordionItemContext, useBottomBarContext, useCommandContext, useDialogContext, useDismiss, useDropdownMenuContext, usePopoverContext, useTabsContext, useToast, useTooltipContext } from "./ui";
 export { createVirtualizer, VirtualGrid, type VirtualGridProps, type VirtualItem, type Virtualizer, type VirtualizerOptions, VirtualList, type VirtualListProps } from "./virtual";

package/dist/index.js

@@ -63,7 +63,7 @@ import {
   highlightElement2,
   VisageDevTools2,
   connectDevTools2
-} from "./index-ptj8rt6b.js";
+} from "./index-dz6n88aq.js";
 import {
   createForm2
 } from "./index-1jcd8gjf.js";
@@ -77,7 +77,7 @@ import {
   useNavigate2,
   useParams2,
   useSearchParams2
-} from "./index-0qat98zs.js";
+} from "./index-k7zd3awa.js";
 import {
   createClient2,
   RouterImpl2,
@@ -110,6 +110,7 @@ import {
   BottomBarRoot2,
   BottomBarSeparator2,
   BottomBar2,
+  useDismiss2,
   CommandDialog2,
   useCommandContext2,
   CommandInput2,
@@ -152,7 +153,7 @@ import {
   ToastDescription2,
   ToastClose2,
   Toast2
-} from "./index-aagpn02x.js";
+} from "./index-vbsc8z8h.js";
 import {
   createVirtualizer2,
   VirtualList2,
@@ -198,7 +199,7 @@ import {
   Tooltip3,
   SwitchThumb2,
   Switch2
-} from "./index-b7emqmej.js";
+} from "./index-kykzcs7p.js";
 import {
   ERROR_CODE_TO_STATUS2,
   STATUS_TO_ERROR_CODE2,
@@ -459,6 +460,7 @@ export {
   useCommandContext2 as useCommandContext,
   useContext2 as useContext,
   useDialogContext2 as useDialogContext,
+  useDismiss2 as useDismiss,
   useDropdownMenuContext2 as useDropdownMenuContext,
   useLocation2 as useLocation,
   useNavigate2 as useNavigate,

package/dist/router/index.js

@@ -7,7 +7,7 @@ import {
   useNavigate2,
   useParams2,
   useSearchParams2
-} from "../index-0qat98zs.js";
+} from "../index-k7zd3awa.js";
 import"../index-3y73zgbk.js";
 import {
   lazy2

package/dist/router/router.d.ts

@@ -58,6 +58,7 @@ export declare function Routes(props: RoutesProps): Child;
 export interface LinkProps {
     href: string;
     class?: string | (() => string);
+    className?: string | (() => string);
     activeClass?: string;
     replace?: boolean;
     children: Child;

package/dist/ui/dropdown-menu.d.ts

@@ -1,5 +1,5 @@
 import type { Child } from "../dom/render";
-import { type ReadonlySignal } from "../signals";
+import type { ReadonlySignal } from "../signals";
 export interface DropdownMenuContextValue {
     open: ReadonlySignal<boolean>;
     setOpen: (open: boolean) => void;

package/dist/ui/index.d.ts

@@ -6,6 +6,7 @@ export { Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDesc
 export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuSeparator, DropdownMenuTrigger, useDropdownMenuContext } from "./dropdown-menu";
 export { createIcon, type IconNode, type IconProps } from "./icon";
 export { type BaseLayoutProps, Center, type CenterProps, Grid, type GridProps, Row, type RowProps, Spacer, type SpacerProps, Stack, type StackProps } from "./layout";
+export { type UseDismissOptions, useDismiss } from "./overlay";
 export { Popover, PopoverClose, PopoverContent, type PopoverContentProps, PopoverPortal, type PopoverProps, PopoverTrigger, usePopoverContext } from "./popover";
 export { Switch, type SwitchProps, SwitchThumb, type SwitchThumbProps } from "./switch";
 export { type CreateTabsOptions, createTabs, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, useTabsContext } from "./tabs";

package/dist/ui/index.js

@@ -12,6 +12,7 @@ import {
   BottomBarRoot2,
   BottomBarSeparator2,
   BottomBar2,
+  useDismiss2,
   CommandDialog2,
   useCommandContext2,
   CommandInput2,
@@ -54,7 +55,7 @@ import {
   ToastDescription2,
   ToastClose2,
   Toast2
-} from "../index-aagpn02x.js";
+} from "../index-vbsc8z8h.js";
 import {
   createId2,
   createControllableSignal2,
@@ -73,7 +74,7 @@ import {
   Tooltip3,
   SwitchThumb2,
   Switch2
-} from "../index-b7emqmej.js";
+} from "../index-kykzcs7p.js";
 import {
   Stack2,
   Row2,
@@ -158,6 +159,7 @@ export {
   useBottomBarContext2 as useBottomBarContext,
   useCommandContext2 as useCommandContext,
   useDialogContext2 as useDialogContext,
+  useDismiss2 as useDismiss,
   useDropdownMenuContext2 as useDropdownMenuContext,
   usePopoverContext2 as usePopoverContext,
   useTabsContext2 as useTabsContext,

package/dist/ui/overlay.d.ts

@@ -0,0 +1,53 @@
+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 declare function useDismiss(element: () => HTMLElement | null | undefined, options: UseDismissOptions): {
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleClick: (e: MouseEvent) => void;
+};

package/dist/ui/popover.d.ts

@@ -1,5 +1,5 @@
 import type { Child } from "../dom/render";
-import { type ReadonlySignal } from "../signals";
+import type { ReadonlySignal } from "../signals";
 export interface PopoverContextValue {
     open: ReadonlySignal<boolean>;
     setOpen: (open: boolean) => void;

package/dist/ui/utils.d.ts

@@ -18,4 +18,4 @@ export declare function trapFocus(container: HTMLElement, event: KeyboardEvent):
 /**
  * Listen for click outside a target element
  */
-export declare function onClickOutside(elements: Array<HTMLElement | null | undefined> | HTMLElement | null | undefined, handler: (event: MouseEvent | TouchEvent) => void): () => void;
+export declare function onClickOutside(elements: Array<HTMLElement | null | undefined> | HTMLElement | null | undefined | (() => Array<HTMLElement | null | undefined>), handler: (event: MouseEvent | TouchEvent) => void): () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epoch32/visage",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Lightning-fast, zero-VDOM, fine-grained reactive UI library with full TypeScript support",
   "type": "module",
   "main": "./dist/index.js",

package/src/index.ts

@@ -405,11 +405,13 @@ export {
   TooltipTrigger,
   toast,
   trapFocus,
+  type UseDismissOptions,
   useAccordionContext,
   useAccordionItemContext,
   useBottomBarContext,
   useCommandContext,
   useDialogContext,
+  useDismiss,
   useDropdownMenuContext,
   usePopoverContext,
   useTabsContext,

package/src/router/router.tsx

@@ -253,6 +253,7 @@ export function Routes(props: RoutesProps): Child {
 export interface LinkProps {
   href: string;
   class?: string | (() => string);
+  className?: string | (() => string);
   activeClass?: string;
   replace?: boolean;
   children: Child;
@@ -264,7 +265,16 @@ export interface LinkProps {
  */
 export function Link(props: LinkProps): Child {
   const router = useContext(RouterContext);
-  const { href, class: className, activeClass = "active", replace, children, ...rest } = props;
+  const {
+    href,
+    class: classProp,
+    className: classNameProp,
+    activeClass = "active",
+    replace,
+    children,
+    ...rest
+  } = props;
+  const rawClass = classProp ?? classNameProp;
 
   const handleClick = (e: MouseEvent) => {
     if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0) {
@@ -286,7 +296,7 @@ export function Link(props: LinkProps): Child {
   });
 
   const computedClass = computed(() => {
-    const baseCls = typeof className === "function" ? className() : (className ?? "");
+    const baseCls = typeof rawClass === "function" ? rawClass() : (rawClass ?? "");
     if (activeClass && isActive()) {
       return baseCls ? `${baseCls} ${activeClass}` : activeClass;
     }

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) {