@epoch32/visage 1.3.0 → 1.3.2

package/dist/rpc/index.js

@@ -5,7 +5,7 @@ import {
   query3,
   mutation3,
   subscription3
-} from "../index-df5e614s.js";
+} from "../index-awcrz19g.js";
 import {
   ERROR_CODE_TO_STATUS2,
   STATUS_TO_ERROR_CODE2,
@@ -19,9 +19,9 @@ import {
   validateWithSchema2,
   v2
 } from "../index-2zz0g2n2.js";
-import"../index-y9bq7h9g.js";
-import"../index-a4xns6cc.js";
-import"../index-6kfe1nr4.js";
+import"../index-5jhzwtdz.js";
+import"../index-65j7a9et.js";
+import"../index-1yhbg34h.js";
 export {
   ERROR_CODE_TO_STATUS2 as ERROR_CODE_TO_STATUS,
   RPCError2 as RPCError,

package/dist/server/index.js

@@ -3,8 +3,8 @@ import {
   renderChildToString2,
   renderToString2,
   renderToStream2
-} from "../index-x2rs3vab.js";
-import"../index-6kfe1nr4.js";
+} from "../index-y3nprgn7.js";
+import"../index-1yhbg34h.js";
 export {
   hydrate2 as hydrate,
   renderChildToString2 as renderChildToString,

package/dist/signals/index.js

@@ -24,7 +24,7 @@ import {
   createStore2,
   mutateStore2,
   unwrapStore2
-} from "../index-6kfe1nr4.js";
+} from "../index-1yhbg34h.js";
 export {
   COMPUTED_BRAND2 as COMPUTED_BRAND,
   Computed2 as Computed,

package/dist/signals/system.d.ts

@@ -14,6 +14,8 @@ export declare function setCurrentScope(scope: any): void;
 export declare function getCurrentScope(): any;
 export declare function addPendingEffect(eff: any): void;
 export declare function removePendingEffect(eff: any): void;
+export declare function getBatchDepth(): number;
+export declare function getIsFlushing(): boolean;
 export declare function flushEffects(): void;
 /**
  * Batch multiple signal mutations so downstreams and effects update synchronously once at completion.

package/dist/style/index.js

@@ -16,9 +16,9 @@ import {
   radius2,
   glass2,
   formatStyleProp2
-} from "../index-6kfe1nr4.js";
-import"../index-5s255b3w.js";
-import"../index-9fvarkrx.js";
+} from "../index-1yhbg34h.js";
+import"../index-xby428n5.js";
+import"../index-3y73zgbk.js";
 import {
   hashString2,
   getScopeId2,
@@ -32,15 +32,15 @@ import {
   css2,
   useStyle2,
   Style2
-} from "../index-0madxn60.js";
+} from "../index-enc8cmea.js";
 import {
   Stack2,
   Row2,
   Center2,
   Grid2,
   Spacer2
-} from "../index-1xtrtz1t.js";
-import"../index-a4xns6cc.js";
+} from "../index-dmhmde2z.js";
+import"../index-65j7a9et.js";
 export {
   Center2 as Center,
   DIMENSION_KEYWORDS2 as DIMENSION_KEYWORDS,

package/dist/template/index.js

@@ -1,8 +1,8 @@
 import {
   template2,
   html2
-} from "../index-js199er4.js";
-import"../index-6kfe1nr4.js";
+} from "../index-g1drdx7k.js";
+import"../index-1yhbg34h.js";
 export {
   html2 as html,
   template2 as template

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-dvq5f3s8.js";
+} from "../index-vbsc8z8h.js";
 import {
   createId2,
   createControllableSignal2,
@@ -73,18 +74,18 @@ import {
   Tooltip3,
   SwitchThumb2,
   Switch2
-} from "../index-8x8xz80v.js";
+} from "../index-kykzcs7p.js";
 import {
   Stack2,
   Row2,
   Center2,
   Grid2,
   Spacer2
-} from "../index-1xtrtz1t.js";
-import"../index-9fvarkrx.js";
-import"../index-5s255b3w.js";
-import"../index-a4xns6cc.js";
-import"../index-6kfe1nr4.js";
+} from "../index-dmhmde2z.js";
+import"../index-3y73zgbk.js";
+import"../index-xby428n5.js";
+import"../index-65j7a9et.js";
+import"../index-1yhbg34h.js";
 export {
   Accordion2 as Accordion,
   AccordionContent2 as AccordionContent,
@@ -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/dist/virtual/index.js

@@ -2,11 +2,11 @@ import {
   createVirtualizer2,
   VirtualList2,
   VirtualGrid2
-} from "../index-8czhpea8.js";
-import"../index-9fvarkrx.js";
-import"../index-5s255b3w.js";
-import"../index-a4xns6cc.js";
-import"../index-6kfe1nr4.js";
+} from "../index-x6whpv54.js";
+import"../index-3y73zgbk.js";
+import"../index-xby428n5.js";
+import"../index-65j7a9et.js";
+import"../index-1yhbg34h.js";
 export {
   VirtualGrid2 as VirtualGrid,
   VirtualList2 as VirtualList,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epoch32/visage",
-  "version": "1.3.0",
+  "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/dom/control-flow.ts

@@ -1,4 +1,13 @@
-import { effect, getActiveScope, onCleanup, runInScope, Scope, untrack } from "../signals";
+import {
+  effect,
+  getActiveScope,
+  onCleanup,
+  runInScope,
+  Scope,
+  signal,
+  untrack,
+  type WritableSignal
+} from "../signals";
 import { type Child, insertChild, type ReactiveValue, resolveValue } from "./render";
 
 export interface ShowProps<T> {
@@ -120,7 +129,7 @@ interface ItemRecord<T> {
   item: T;
   scope: Scope;
   nodes: Node[];
-  indexSignal: (val?: number) => number;
+  indexSignal: WritableSignal<number>;
 }
 
 /**
@@ -206,32 +215,31 @@ export function For<T>(props: ForProps<T>): any {
     if (!parent) return;
 
     const newItems: ItemRecord<T>[] = [];
-    const prevMap = new Map<T, ItemRecord<T>>();
+    const prevMap = new Map<T, ItemRecord<T>[]>();
 
     for (const rec of items) {
-      prevMap.set(rec.item, rec);
+      const group = prevMap.get(rec.item);
+      if (group) {
+        group.push(rec);
+      } else {
+        prevMap.set(rec.item, [rec]);
+      }
     }
 
     // Fast-path: map existing or create new item scopes
     for (let i = 0; i < list.length; i++) {
       const item = list[i]!;
-      const existing = prevMap.get(item);
+      const existingGroup = prevMap.get(item);
+      const existing =
+        existingGroup && existingGroup.length > 0 ? existingGroup.shift() : undefined;
 
       if (existing) {
-        existing.indexSignal(i);
+        untrack(() => {
+          existing.indexSignal.set(i);
+        });
         newItems.push(existing);
-        prevMap.delete(item);
       } else {
-        let indexVal = i;
-        const indexSubscribers = new Set<() => void>();
-        const indexSignal = (...args: [number?]): number => {
-          if (args.length > 0 && args[0] !== undefined && args[0] !== indexVal) {
-            indexVal = args[0];
-            for (const sub of Array.from(indexSubscribers)) sub();
-          }
-          return indexVal;
-        };
-
+        const indexSignal = signal(i, { internal: true });
         const itemScope = new Scope(getActiveScope());
         let itemNodes: Node[] = [];
 
@@ -254,10 +262,12 @@ export function For<T>(props: ForProps<T>): any {
     }
 
     // Clean up removed items
-    for (const [, removed] of prevMap) {
-      removed.scope.dispose();
-      for (const node of removed.nodes) {
-        if (node.parentNode) node.parentNode.removeChild(node);
+    for (const [, remainingGroup] of prevMap) {
+      for (const removed of remainingGroup) {
+        removed.scope.dispose();
+        for (const node of removed.nodes) {
+          if (node.parentNode) node.parentNode.removeChild(node);
+        }
       }
     }
 

package/src/form/form.ts

@@ -54,6 +54,32 @@ export function createForm<T extends Record<string, any> = Record<string, any>>(
   const submitCount = signal(0);
   const customErrors = signal<Partial<Record<keyof T, string>>>({});
 
+  const getValues = (): T => {
+    const res: Record<string, any> = {};
+    for (const key in fields) {
+      res[key] = (fields as any)[key].value();
+    }
+    return res as T;
+  };
+
+  const schemaValidation = computed(() => {
+    if (!options.schema) {
+      return { success: true, issuesMap: new Map<string, string>() };
+    }
+    const currentValues = getValues();
+    const res = validateWithSchema(options.schema, currentValues);
+    const issuesMap = new Map<string, string>();
+    if (!res.success && res.issues) {
+      for (const issue of res.issues) {
+        const pathKey = String(issue.path);
+        if (!issuesMap.has(pathKey)) {
+          issuesMap.set(pathKey, issue.message);
+        }
+      }
+    }
+    return { success: res.success, issuesMap };
+  });
+
   for (const key in initialValues) {
     const initVal = initialValues[key];
     const valSignal = signal(initVal);
@@ -74,25 +100,12 @@ export function createForm<T extends Record<string, any> = Record<string, any>>(
 
         if (!options.schema) return null;
 
-        const currentValues = getValues();
-        const res = validateWithSchema(options.schema, currentValues);
-        if (!res.success && res.issues) {
-          const match = res.issues.find((i) => i.path === key || i.path === `${key}`);
-          return match ? match.message : null;
-        }
-        return null;
+        const validation = schemaValidation();
+        return validation.issuesMap.get(key) ?? validation.issuesMap.get(String(key)) ?? null;
       })
     };
   }
 
-  const getValues = (): T => {
-    const res: Record<string, any> = {};
-    for (const key in fields) {
-      res[key] = (fields as any)[key].value();
-    }
-    return res as T;
-  };
-
   const errors = computed<Partial<Record<keyof T, string>>>(() => {
     const errMap: Partial<Record<keyof T, string>> = {};
     for (const key in fields) {
@@ -118,8 +131,7 @@ export function createForm<T extends Record<string, any> = Record<string, any>>(
 
   const validate = (): boolean => {
     if (!options.schema) return true;
-    const res = validateWithSchema(options.schema, getValues());
-    return res.success;
+    return schemaValidation().success;
   };
 
   const handleSubmit = async (e?: Event): Promise<boolean> => {

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/signals/effect.ts

@@ -5,8 +5,8 @@ import { Computed } from "./computed";
 import type { Scope } from "./scope";
 import {
   addPendingEffect,
-  batchDepth,
   flushEffects,
+  getBatchDepth,
   getCurrentScope,
   getCurrentSubscriber,
   removePendingEffect,
@@ -57,7 +57,7 @@ export class Effect implements ISubscriber {
     this.state = targetState;
     addPendingEffect(this);
 
-    if (batchDepth === 0) {
+    if (getBatchDepth() === 0) {
       flushEffects();
     }
   }

package/src/signals/scope.ts

@@ -1,7 +1,7 @@
 /**
  * Visage Reactive Scope & Lifecycle Management
  */
-import { currentScope, currentSubscriber, getCurrentScope, setCurrentScope } from "./system";
+import { getCurrentScope, getCurrentSubscriber, setCurrentScope } from "./system";
 import type { CleanupFn, ISubscriber } from "./types";
 
 /**
@@ -14,7 +14,7 @@ export class Scope {
   isDisposed = false;
   context?: Map<symbol, any>;
 
-  constructor(parent: Scope | null = currentScope) {
+  constructor(parent: Scope | null = getCurrentScope()) {
     this.parent = parent;
     if (parent && !parent.isDisposed) {
       parent.cleanups.push(() => this.dispose());
@@ -72,10 +72,12 @@ export class Scope {
  * ```
  */
 export function onCleanup(fn: CleanupFn): void {
-  if (currentSubscriber && "addCleanup" in currentSubscriber) {
-    (currentSubscriber as any).addCleanup(fn);
-  } else if (currentScope) {
-    currentScope.addCleanup(fn);
+  const curSub = getCurrentSubscriber();
+  const curScope = getCurrentScope();
+  if (curSub && "addCleanup" in curSub) {
+    (curSub as any).addCleanup(fn);
+  } else if (curScope) {
+    curScope.addCleanup(fn);
   }
 }
 
@@ -101,7 +103,7 @@ export function onCleanup(fn: CleanupFn): void {
  * @returns The return value of `fn`
  */
 export function createRoot<T>(fn: (dispose: () => void) => T): T {
-  const prevScope = currentScope;
+  const prevScope = getCurrentScope();
   const scope = new Scope(null);
   setCurrentScope(scope);
   try {
@@ -115,7 +117,7 @@ export function createRoot<T>(fn: (dispose: () => void) => T): T {
  * Run a function with a specified reactive scope active.
  */
 export function runInScope<T>(scope: Scope | null, fn: () => T): T {
-  const prevScope = currentScope;
+  const prevScope = getCurrentScope();
   setCurrentScope(scope);
   try {
     return fn();

package/src/signals/store.ts

@@ -5,6 +5,7 @@ import { isSignal } from "./types";
 const STORE_RAW = Symbol("visage.store.raw");
 const STORE_SIGNALS = Symbol("visage.store.signals");
 const STORE_PROXY = Symbol("visage.store.proxy");
+const STORE_ITERATE = Symbol("visage.store.iterate");
 
 export type Store<T> = T;
 
@@ -61,9 +62,29 @@ function createStoreProxy<T extends object>(target: T): T {
       return value;
     },
 
+    has(target, prop) {
+      if (prop === STORE_RAW || prop === STORE_PROXY) return true;
+      if (typeof prop === "string" || typeof prop === "symbol") {
+        const sig = getOrCreatePropertySignal(target, prop);
+        sig.get();
+      }
+      return Reflect.has(target, prop);
+    },
+
+    ownKeys(target) {
+      const iterSig = getOrCreatePropertySignal(target, STORE_ITERATE);
+      iterSig.get();
+      return Reflect.ownKeys(target);
+    },
+
+    getOwnPropertyDescriptor(target, prop) {
+      return Reflect.getOwnPropertyDescriptor(target, prop);
+    },
+
     set(target, prop, value, receiver) {
+      const hadProp = Reflect.has(target, prop);
       const prevValue = Reflect.get(target, prop, receiver);
-      if (Object.is(prevValue, value)) {
+      if (hadProp && Object.is(prevValue, value)) {
         return true;
       }
 
@@ -72,10 +93,18 @@ function createStoreProxy<T extends object>(target: T): T {
         const sig = getOrCreatePropertySignal(target, prop);
         sig.set(value);
 
+        // If a new property was added, notify key iteration
+        if (!hadProp) {
+          const iterSig = getOrCreatePropertySignal(target, STORE_ITERATE);
+          iterSig.update((prev: number = 0) => prev + 1);
+        }
+
         // If array length or property keys changed, notify length/keys
         if (Array.isArray(target) && prop !== "length") {
           const lenSig = getOrCreatePropertySignal(target, "length");
           lenSig.set(target.length);
+          const iterSig = getOrCreatePropertySignal(target, STORE_ITERATE);
+          iterSig.update((prev: number = 0) => prev + 1);
         }
       }
       return success;
@@ -87,6 +116,8 @@ function createStoreProxy<T extends object>(target: T): T {
       if (hadProp && success) {
         const sig = getOrCreatePropertySignal(target, prop);
         sig.set(undefined);
+        const iterSig = getOrCreatePropertySignal(target, STORE_ITERATE);
+        iterSig.update((prev: number = 0) => prev + 1);
       }
       return success;
     }

package/src/signals/system.ts

@@ -59,6 +59,14 @@ export function removePendingEffect(eff: any): void {
   ctx.pendingEffects.delete(eff);
 }
 
+export function getBatchDepth(): number {
+  return ctx.batchDepth;
+}
+
+export function getIsFlushing(): boolean {
+  return ctx.isFlushing;
+}
+
 const MAX_FLUSH_COUNT = 100;
 
 export function flushEffects(): void {

package/src/template/template.ts

@@ -66,11 +66,22 @@ export function html(
 
   for (const bind of bindings) {
     if (bind.isAttr && bind.attrName) {
-      const targetEl = findElementWithAttributeValue(root, bind.attrName, bind.id);
+      const targetEl = findElementWithAttributeValue(root as HTMLElement, bind.attrName, bind.id);
       if (targetEl) {
         targetEl.removeAttribute(bind.attrName);
         setAttribute(targetEl, bind.attrName, bind.value);
       }
+    } else if (bind.isAttr && !bind.attrName) {
+      const propAttr = `data-visage-prop-${bind.id.replace(MARKER_PREFIX, "")}`;
+      const targetEl = findElementWithAttributeValue(root as HTMLElement, propAttr, bind.id);
+      if (targetEl) {
+        targetEl.removeAttribute(propAttr);
+        if (typeof bind.value === "object" && bind.value !== null) {
+          for (const key of Object.keys(bind.value)) {
+            setAttribute(targetEl, key, bind.value[key]);
+          }
+        }
+      }
     } else if (!bind.isAttr) {
       const commentNode = findCommentNode(root, bind.id);
       if (commentNode?.parentNode) {