nuclo 0.2.23 → 0.2.25

package/dist/when/runtime.d.ts

@@ -1,6 +1,6 @@
 import type { UpdateScope } from "../update/scope";
 export type WhenCondition = boolean | (() => boolean);
-export type WhenContent<TTagName extends ElementTagName = ElementTagName> = NodeMod<TTagName> | NodeModFn<TTagName>;
+export type WhenContent<TTagName extends ElementTagName = ElementTagName> = NodeModLike<TTagName>;
 export interface WhenGroup<TTagName extends ElementTagName = ElementTagName> {
     condition: WhenCondition;
     content: WhenContent<TTagName>[];

package/dist/when/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/when/runtime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;AACtD,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,cAAc,GAAG,cAAc,IACtE,OAAO,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAE1C,MAAM,WAAW,SAAS,CAAC,QAAQ,SAAS,cAAc,GAAG,cAAc;IACzE,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,WAAW,CAAC,QAAQ,SAAS,cAAc,GAAG,cAAc;IAC3E,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC;IAC9B,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC;IACrC;;;;;OAKG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,IAAI,IAAI,CAAC;CAChB;AAmBD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,SAAS,cAAc,EACrE,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,EAC1C,WAAW,EAAE,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,GAChD,MAAM,GAAG,IAAI,CAOf;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,cAAc,EAC/D,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC7B,IAAI,CAoBN;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,SAAS,cAAc,EACjE,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC7B,IAAI,CAKN;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CA0C5D;AA8BD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,SAAS,cAAc,EAChE,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,EAC3C,IAAI,EAAE,eAAe,CAAC,QAAQ,CAAC,EAC/B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,OAAO,GACjB,IAAI,EAAE,CASR"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/when/runtime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;AACtD,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,cAAc,GAAG,cAAc,IACtE,WAAW,CAAC,QAAQ,CAAC,CAAC;AAExB,MAAM,WAAW,SAAS,CAAC,QAAQ,SAAS,cAAc,GAAG,cAAc;IACzE,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,WAAW,CAAC,QAAQ,SAAS,cAAc,GAAG,cAAc;IAC3E,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC;IAC9B,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC;IACrC;;;;;OAKG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,IAAI,IAAI,CAAC;CAChB;AAmBD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,SAAS,cAAc,EACrE,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,EAC1C,WAAW,EAAE,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,GAChD,MAAM,GAAG,IAAI,CAOf;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,cAAc,EAC/D,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC7B,IAAI,CAoBN;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,SAAS,cAAc,EACjE,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC7B,IAAI,CAKN;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CA0C5D;AA8BD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,SAAS,cAAc,EAChE,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,EAC3C,IAAI,EAAE,eAAe,CAAC,QAAQ,CAAC,EAC/B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,OAAO,GACjB,IAAI,EAAE,CASR"}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "nuclo",
 	"private": false,
-	"version": "0.2.23",
+	"version": "0.2.25",
 	"description": "Lightweight, type-safe DOM library with plain mutable state and explicit updates — global tag builders, SSR, hydration, and typed CSS, no virtual DOM, no compiler.",
 	"license": "MIT",
 	"author": "Danilo Celestino de Castro (https://github.com/dan2dev)",
@@ -68,7 +68,7 @@
 		"@eslint/markdown": "^8.0.3",
 		"@types/node": "^25.9.5",
 		"@vitest/coverage-v8": "4.1.7",
-		"eslint": "^10.8.0",
+		"eslint": "^10.8.1",
 		"globals": "^17.9.0",
 		"jiti": "^2.7.0",
 		"jsdom": "^29.1.1",

package/types/core/base.d.ts

@@ -1,4 +1,17 @@
+import "./events";
 
+declare const anyParentNodeModifierTag: unique symbol;
+
+type NativeElementAttributes<TTagName extends ElementTagName> = {
+  [K in keyof HTMLElementTagNameMap[TTagName] as K extends `on${string}` ? never : K]?:
+    K extends "style"
+      ? ValueOrFactory<CSSStyleObject>
+      : ValueOrFactory<HTMLElementTagNameMap[TTagName][K]>;
+};
+
+type LowercaseEventAttributes<TTagName extends ElementTagName> = {
+  [K in Extract<keyof HTMLElementTagNameMap[TTagName], `on${string}`>]?: never;
+};
 
 declare global {
   export type Primitive = string | number | bigint | boolean | symbol | null | undefined;
@@ -27,22 +40,27 @@ declare global {
   // Core element attribute types
   export type ExpandedElementAttributes<
     TTagName extends ElementTagName = ElementTagName,
-  > = {
-    [K in keyof HTMLElementTagNameMap[TTagName]]?:
-      K extends "style"
-        ? ValueOrFactory<CSSStyleObject>
-        : ValueOrFactory<HTMLElementTagNameMap[TTagName][K]>;
-  } & {
-    // Allow custom attributes (data-*, aria-*, etc.)
-    [key: string]: ValueOrFactory<unknown>;
-  };
+  > = NativeElementAttributes<TTagName>
+    & CamelCaseEventAttributes<TTagName>
+    & LowercaseEventAttributes<TTagName>
+    & {
+      // Allow custom attributes (data-*, aria-*, etc.)
+      [key: string]: ValueOrFactory<unknown>;
+    };
 
   export type DetachedExpandedElementFactory<
     TTagName extends ElementTagName = ElementTagName,
   > = NodeModFn<TTagName> & ((
     parent?: ExpandedElement<TTagName>,
     index?: number,
-  ) => ExpandedElement<TTagName>);
+  ) => ExpandedElement<TTagName>) & {
+    readonly [anyParentNodeModifierTag]: true;
+  };
+
+  /** Type-only marker for modifiers whose runtime accepts any parent tag. */
+  export type AnyParentNodeModifier = {
+    readonly [anyParentNodeModifierTag]: true;
+  };
 
   // Core element type
   export type ExpandedElement<
@@ -72,7 +90,8 @@ declare global {
 
   export type NodeModLike<TTagName extends ElementTagName = ElementTagName> =
     | NodeMod<TTagName>
-    | NodeModFn<TTagName>;
+    | NodeModFn<TTagName>
+    | AnyParentNodeModifier;
 
   export type InferExpandedElement<TValue> =
     TValue extends ExpandedElement<infer TTagName>

package/types/core/events.d.ts

@@ -0,0 +1,223 @@
+declare global {
+  export type TypedEventListener<
+    TElement extends EventTarget,
+    TEvent extends Event = Event,
+  > = (this: TElement, event: TEvent & { currentTarget: TElement }) => unknown;
+
+  /** Public camel-cased attribute name to native DOM event name. */
+  export interface HTMLElementEventAttributeNameMap {
+    onAbort: "abort";
+    onAnimationCancel: "animationcancel";
+    onAnimationEnd: "animationend";
+    onAnimationIteration: "animationiteration";
+    onAnimationStart: "animationstart";
+    onAuxClick: "auxclick";
+    onBeforeInput: "beforeinput";
+    onBeforeMatch: "beforematch";
+    onBeforeToggle: "beforetoggle";
+    onBlur: "blur";
+    onCancel: "cancel";
+    onCanPlay: "canplay";
+    onCanPlayThrough: "canplaythrough";
+    onChange: "change";
+    onClick: "click";
+    onClose: "close";
+    onCommand: "command";
+    onCompositionEnd: "compositionend";
+    onCompositionStart: "compositionstart";
+    onCompositionUpdate: "compositionupdate";
+    onContextLost: "contextlost";
+    onContextMenu: "contextmenu";
+    onContextRestored: "contextrestored";
+    onCopy: "copy";
+    onCueChange: "cuechange";
+    onCut: "cut";
+    onDblClick: "dblclick";
+    onDoubleClick: "dblclick";
+    onDrag: "drag";
+    onDragEnd: "dragend";
+    onDragEnter: "dragenter";
+    onDragLeave: "dragleave";
+    onDragOver: "dragover";
+    onDragStart: "dragstart";
+    onDrop: "drop";
+    onDurationChange: "durationchange";
+    onEmptied: "emptied";
+    onEnded: "ended";
+    onError: "error";
+    onFocus: "focus";
+    onFocusIn: "focusin";
+    onFocusOut: "focusout";
+    onFormData: "formdata";
+    onFullscreenChange: "fullscreenchange";
+    onFullscreenError: "fullscreenerror";
+    onGotPointerCapture: "gotpointercapture";
+    onInput: "input";
+    onInvalid: "invalid";
+    onKeyDown: "keydown";
+    onKeyPress: "keypress";
+    onKeyUp: "keyup";
+    onLoad: "load";
+    onLoadedData: "loadeddata";
+    onLoadedMetadata: "loadedmetadata";
+    onLoadStart: "loadstart";
+    onLostPointerCapture: "lostpointercapture";
+    onMouseDown: "mousedown";
+    onMouseEnter: "mouseenter";
+    onMouseLeave: "mouseleave";
+    onMouseMove: "mousemove";
+    onMouseOut: "mouseout";
+    onMouseOver: "mouseover";
+    onMouseUp: "mouseup";
+    onPaste: "paste";
+    onPause: "pause";
+    onPlay: "play";
+    onPlaying: "playing";
+    onPointerCancel: "pointercancel";
+    onPointerDown: "pointerdown";
+    onPointerEnter: "pointerenter";
+    onPointerLeave: "pointerleave";
+    onPointerMove: "pointermove";
+    onPointerOut: "pointerout";
+    onPointerOver: "pointerover";
+    onPointerRawUpdate: "pointerrawupdate";
+    onPointerUp: "pointerup";
+    onProgress: "progress";
+    onRateChange: "ratechange";
+    onReset: "reset";
+    onResize: "resize";
+    onScroll: "scroll";
+    onScrollEnd: "scrollend";
+    onSecurityPolicyViolation: "securitypolicyviolation";
+    onSeeked: "seeked";
+    onSeeking: "seeking";
+    onSelect: "select";
+    onSelectionChange: "selectionchange";
+    onSelectStart: "selectstart";
+    onSlotChange: "slotchange";
+    onStalled: "stalled";
+    onSubmit: "submit";
+    onSuspend: "suspend";
+    onTimeUpdate: "timeupdate";
+    onToggle: "toggle";
+    onTouchCancel: "touchcancel";
+    onTouchEnd: "touchend";
+    onTouchMove: "touchmove";
+    onTouchStart: "touchstart";
+    onTransitionCancel: "transitioncancel";
+    onTransitionEnd: "transitionend";
+    onTransitionRun: "transitionrun";
+    onTransitionStart: "transitionstart";
+    onVolumeChange: "volumechange";
+    onWaiting: "waiting";
+    onWebkitAnimationEnd: "webkitanimationend";
+    onWebkitAnimationIteration: "webkitanimationiteration";
+    onWebkitAnimationStart: "webkitanimationstart";
+    onWebkitTransitionEnd: "webkittransitionend";
+    onWheel: "wheel";
+    onEncrypted: "encrypted";
+    onWaitingForKey: "waitingforkey";
+    onEnterPictureInPicture: "enterpictureinpicture";
+    onLeavePictureInPicture: "leavepictureinpicture";
+    onAfterPrint: "afterprint";
+    onBeforePrint: "beforeprint";
+    onBeforeUnload: "beforeunload";
+    onGamepadConnected: "gamepadconnected";
+    onGamepadDisconnected: "gamepaddisconnected";
+    onHashChange: "hashchange";
+    onLanguageChange: "languagechange";
+    onMessage: "message";
+    onMessageError: "messageerror";
+    onOffline: "offline";
+    onOnline: "online";
+    onPageHide: "pagehide";
+    onPageReveal: "pagereveal";
+    onPageShow: "pageshow";
+    onPageSwap: "pageswap";
+    onPopState: "popstate";
+    onRejectionHandled: "rejectionhandled";
+    onStorage: "storage";
+    onUnhandledRejection: "unhandledrejection";
+    onUnload: "unload";
+  }
+
+}
+
+type EventMapForElement<TElement> =
+  TElement extends HTMLVideoElement
+    ? HTMLVideoElementEventMap
+    : TElement extends HTMLMediaElement
+      ? HTMLMediaElementEventMap
+      : TElement extends HTMLBodyElement
+        ? HTMLBodyElementEventMap
+        : HTMLElementEventMap;
+
+type NativeHTMLElementEventName =
+  | keyof HTMLElementEventMap
+  | keyof HTMLMediaElementEventMap
+  | keyof HTMLVideoElementEventMap
+  | keyof HTMLBodyElementEventMap;
+
+type NativeHTMLElementTagNameForEvent<TEventName extends NativeHTMLElementEventName> =
+  TEventName extends keyof HTMLElementEventMap
+    ? ElementTagName
+    : TEventName extends keyof HTMLMediaElementEventMap
+      ? "audio" | "video"
+      : TEventName extends keyof HTMLVideoElementEventMap
+        ? "video"
+        : TEventName extends keyof HTMLBodyElementEventMap
+          ? "body"
+          : never;
+
+type NativeHTMLElementEventForName<TEventName extends NativeHTMLElementEventName> =
+  TEventName extends keyof HTMLElementEventMap
+    ? HTMLElementEventMap[TEventName]
+    : TEventName extends keyof HTMLMediaElementEventMap
+      ? HTMLMediaElementEventMap[TEventName]
+      : TEventName extends keyof HTMLVideoElementEventMap
+        ? HTMLVideoElementEventMap[TEventName]
+        : TEventName extends keyof HTMLBodyElementEventMap
+          ? HTMLBodyElementEventMap[TEventName]
+          : never;
+
+type EventForAttribute<
+  TElement,
+  TAttribute extends keyof HTMLElementEventAttributeNameMap,
+> = HTMLElementEventAttributeNameMap[TAttribute] extends infer TEventName extends keyof EventMapForElement<TElement>
+  ? EventMapForElement<TElement>[TEventName]
+  : never;
+
+type EventAttributeValue<
+  TElement extends EventTarget,
+  TAttribute extends keyof HTMLElementEventAttributeNameMap,
+> = [EventForAttribute<TElement, TAttribute>] extends [never]
+  ? never
+  : EventForAttribute<TElement, TAttribute> extends infer TEvent extends Event
+    ? TypedEventListener<TElement, TEvent>
+    : never;
+
+declare global {
+  /** Every standard event name exposed by an HTML element event map. */
+  export type NucloHTMLElementEventName = NativeHTMLElementEventName;
+
+  /** HTML tag names on which a standard event is available. */
+  export type NucloHTMLElementTagNameForEvent<
+    TEventName extends NucloHTMLElementEventName,
+  > = NativeHTMLElementTagNameForEvent<TEventName>;
+
+  /** The native event object inferred from a standard event name. */
+  export type NucloHTMLElementEventForName<
+    TEventName extends NucloHTMLElementEventName,
+  > = NativeHTMLElementEventForName<TEventName>;
+
+  export type CamelCaseEventAttributes<
+    TTagName extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap,
+  > = {
+    [TAttribute in keyof HTMLElementEventAttributeNameMap]?: EventAttributeValue<
+      HTMLElementTagNameMap[TTagName],
+      TAttribute
+    >;
+  };
+}
+
+export {};

package/types/features/on.d.ts

@@ -5,22 +5,17 @@
  *   button(
  *     "Click me",
  *     on("click", (e) => {
- *       // e is a MouseEvent (e.g., e.clientX is available)
+ *       // e and currentTarget come from the native event map
  *       // example: console.log(e.clientX);
  *     })
  *   );
  *
  * Overloads:
- * 1. DOM standard events (strongly typed via HTMLElementEventMap)
+ * 1. DOM standard events (strongly typed via the tag's native event map)
  * 2. Custom / arbitrary event names with user-specified event type
  */
 
 declare global {
-  export type TypedEventListener<
-    TElement extends EventTarget,
-    TEvent extends Event = Event,
-  > = (this: TElement, ev: TEvent & { currentTarget: TElement }) => unknown;
-
   /**
    * Add a strongly typed DOM event listener as a View Craft modifier.
    *
@@ -31,11 +26,14 @@ declare global {
    * @param options Native addEventListener options.
    */
   function on<
-    K extends keyof HTMLElementEventMap,
-    TTagName extends ElementTagName = ElementTagName,
+    K extends NucloHTMLElementEventName,
+    TTagName extends NucloHTMLElementTagNameForEvent<K> = NucloHTMLElementTagNameForEvent<K>,
   >(
     type: K,
-    listener: TypedEventListener<HTMLElementTagNameMap[TTagName], HTMLElementEventMap[K]>,
+    listener: TypedEventListener<
+      HTMLElementTagNameMap[TTagName],
+      NucloHTMLElementEventForName<K>
+    >,
     options?: boolean | AddEventListenerOptions
   ): NodeModFn<TTagName>;
 

package/types/features/when.d.ts

@@ -1,18 +1,19 @@
 declare global {
   // When/conditional rendering types
   export type WhenCondition = boolean | (() => boolean);
-  export type WhenContent<TTagName extends ElementTagName = ElementTagName> = 
-    NodeMod<TTagName> | NodeModFn<TTagName>;
-  
-  export interface WhenBuilder<TTagName extends ElementTagName = ElementTagName> extends NodeModFn<TTagName> {
+  export type WhenContent<TTagName extends ElementTagName = ElementTagName> =
+    NodeModLike<TTagName>;
+
+  export interface WhenBuilder<TTagName extends ElementTagName = ElementTagName>
+    extends NodeModFn<TTagName>, AnyParentNodeModifier {
     when(condition: WhenCondition, ...content: WhenContent<TTagName>[]): WhenBuilder<TTagName>;
     else(...content: WhenContent<TTagName>[]): WhenBuilder<TTagName>;
   }
-  
+
   export function when<TTagName extends ElementTagName = ElementTagName>(
-    condition: WhenCondition, 
+    condition: WhenCondition,
     ...content: WhenContent<TTagName>[]
   ): WhenBuilder<TTagName>;
 }
 
-export {};
+export {};

package/types/index.d.ts

@@ -74,9 +74,15 @@ export function hydrate<TTagName extends ElementTagName = ElementTagName>(
 ): ExpandedElement<TTagName>;
 
 // on() helper (same overloads as the global)
-export function on<K extends keyof HTMLElementEventMap, TTagName extends ElementTagName = ElementTagName>(
+export function on<
+  K extends NucloHTMLElementEventName,
+  TTagName extends NucloHTMLElementTagNameForEvent<K> = NucloHTMLElementTagNameForEvent<K>,
+>(
   type: K,
-  listener: TypedEventListener<HTMLElementTagNameMap[TTagName], HTMLElementEventMap[K]>,
+  listener: TypedEventListener<
+    HTMLElementTagNameMap[TTagName],
+    NucloHTMLElementEventForName<K>
+  >,
   options?: boolean | AddEventListenerOptions
 ): NodeModFn<TTagName>;
 export function on<K extends string, E extends Event = Event, TTagName extends ElementTagName = ElementTagName>(