@mateosuarezdev/flash 0.0.5 → 0.0.10

package/dist/index.d.ts

@@ -449,6 +449,11 @@ export declare function link<T>(toBind: HybridSignal<T> | HybridReactive<T>): Hy
  */
 export declare function onBeforeExit(callback: (token: CancelToken) => void | Promise<void>): void;
 
+/**
+ * Register a callback to run when the component is mounted.
+ */
+export declare function onMount(callback: () => void): void;
+
 /**
  * This code will run after page loads
  * on client side only, way before any flash
@@ -465,18 +470,14 @@ export declare function onBeforeExit(callback: (token: CancelToken) => void | Pr
  * with vanilla js integrations
  *
  * @example
- * onLoad(() => {
- *  const someEl = document.getElementById("element-id")
+ * onPageLoad(() => {
+ *  const el = document.getElementById("element-id")
  *
- *  fancyCriticalEnterAnimation(someEL)
+ *  someVanillaOnlyScripting(el)
+ *  fancyCriticalEnterAnimation(el)
  * })
  */
-export declare function onLoad(cb: VoidFunction): void;
-
-/**
- * Register a callback to run when the component is mounted.
- */
-export declare function onMount(callback: () => void): void;
+export declare function onPageLoad(cb: VoidFunction): void;
 
 /**
  * Register a callback to run when the component is unmounted.
@@ -662,10 +663,10 @@ declare global {
 type Ref<T extends Element = Element> = (el: T) => void;
 
 // =============================================================================
-// Reactive wrapper - allows T or () => T for reactive props
+// Hybrid - allows static value or reactive function
 // =============================================================================
 
-type MaybeReactive<T> = T | (() => T);
+type Hybrid<T> = T | (() => T);
 
 // =============================================================================
 // Event Handlers
@@ -860,43 +861,43 @@ interface HTMLAttributes<T extends Element = Element>
   innerHTML?: string | object;
 
   // Standard HTML attributes
-  id?: MaybeReactive<string>;
-  class?: MaybeReactive<string>;
-  className?: MaybeReactive<string>;
-  style?: MaybeReactive<string | CSSProperties>;
-  title?: MaybeReactive<string>;
-  tabIndex?: MaybeReactive<number>;
-  lang?: MaybeReactive<string>;
-  dir?: MaybeReactive<"ltr" | "rtl" | "auto">;
-  hidden?: MaybeReactive<boolean>;
-  draggable?: MaybeReactive<boolean>;
-  spellcheck?: MaybeReactive<boolean>;
-  contentEditable?: MaybeReactive<boolean | "true" | "false" | "inherit">;
-  translate?: MaybeReactive<"yes" | "no">;
-  slot?: MaybeReactive<string>;
-  accessKey?: MaybeReactive<string>;
-  autoCapitalize?: MaybeReactive<string>;
-  autoFocus?: MaybeReactive<boolean>;
-  enterKeyHint?: MaybeReactive<
+  id?: Hybrid<string>;
+  class?: Hybrid<string>;
+  className?: Hybrid<string>;
+  style?: Hybrid<string | CSSProperties>;
+  title?: Hybrid<string>;
+  tabindex?: Hybrid<number>;
+  lang?: Hybrid<string>;
+  dir?: Hybrid<"ltr" | "rtl" | "auto">;
+  hidden?: Hybrid<boolean>;
+  draggable?: Hybrid<boolean>;
+  spellcheck?: Hybrid<boolean>;
+  contenteditable?: Hybrid<boolean | "true" | "false" | "inherit">;
+  translate?: Hybrid<"yes" | "no">;
+  slot?: Hybrid<string>;
+  accesskey?: Hybrid<string>;
+  autocapitalize?: Hybrid<string>;
+  autofocus?: Hybrid<boolean>;
+  enterkeyhint?: Hybrid<
     "enter" | "done" | "go" | "next" | "previous" | "search" | "send"
   >;
-  inputMode?: MaybeReactive<
+  inputmode?: Hybrid<
     "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"
   >;
-  is?: MaybeReactive<string>;
-  itemId?: MaybeReactive<string>;
-  itemProp?: MaybeReactive<string>;
-  itemRef?: MaybeReactive<string>;
-  itemScope?: MaybeReactive<boolean>;
-  itemType?: MaybeReactive<string>;
-  nonce?: MaybeReactive<string>;
-  part?: MaybeReactive<string>;
-  popover?: MaybeReactive<"auto" | "manual">;
-  popoverTarget?: MaybeReactive<string>;
-  popoverTargetAction?: MaybeReactive<"hide" | "show" | "toggle">;
+  is?: Hybrid<string>;
+  itemid?: Hybrid<string>;
+  itemprop?: Hybrid<string>;
+  itemref?: Hybrid<string>;
+  itemscope?: Hybrid<boolean>;
+  itemtype?: Hybrid<string>;
+  nonce?: Hybrid<string>;
+  part?: Hybrid<string>;
+  popover?: Hybrid<"auto" | "manual">;
+  popovertarget?: Hybrid<string>;
+  popovertargetaction?: Hybrid<"hide" | "show" | "toggle">;
 
   // Data attributes
-  [key: `data-${string}`]: MaybeReactive<string | number | boolean>;
+  [key: `data-${string}`]: Hybrid<string | number | boolean>;
 }
 
 // =============================================================================
@@ -908,152 +909,152 @@ type TagSpecificProps<K extends keyof HTMLElementTagNameMap> =
 
 interface TagExtraProps {
   a: {
-    href?: MaybeReactive<string>;
-    target?: MaybeReactive<"_blank" | "_self" | "_parent" | "_top" | string>;
-    rel?: MaybeReactive<string>;
-    download?: MaybeReactive<boolean | string>;
-    hreflang?: MaybeReactive<string>;
-    ping?: MaybeReactive<string>;
-    referrerPolicy?: MaybeReactive<ReferrerPolicy>;
-    type?: MaybeReactive<string>;
+    href?: Hybrid<string>;
+    target?: Hybrid<"_blank" | "_self" | "_parent" | "_top" | string>;
+    rel?: Hybrid<string>;
+    download?: Hybrid<boolean | string>;
+    hreflang?: Hybrid<string>;
+    ping?: Hybrid<string>;
+    referrerpolicy?: Hybrid<ReferrerPolicy>;
+    type?: Hybrid<string>;
   };
   area: {
-    alt?: MaybeReactive<string>;
-    coords?: MaybeReactive<string>;
-    download?: MaybeReactive<boolean | string>;
-    href?: MaybeReactive<string>;
-    hreflang?: MaybeReactive<string>;
-    ping?: MaybeReactive<string>;
-    referrerPolicy?: MaybeReactive<ReferrerPolicy>;
-    rel?: MaybeReactive<string>;
-    shape?: MaybeReactive<"rect" | "circle" | "poly" | "default">;
-    target?: MaybeReactive<string>;
+    alt?: Hybrid<string>;
+    coords?: Hybrid<string>;
+    download?: Hybrid<boolean | string>;
+    href?: Hybrid<string>;
+    hreflang?: Hybrid<string>;
+    ping?: Hybrid<string>;
+    referrerpolicy?: Hybrid<ReferrerPolicy>;
+    rel?: Hybrid<string>;
+    shape?: Hybrid<"rect" | "circle" | "poly" | "default">;
+    target?: Hybrid<string>;
   };
   audio: MediaProps;
   base: {
-    href?: MaybeReactive<string>;
-    target?: MaybeReactive<string>;
+    href?: Hybrid<string>;
+    target?: Hybrid<string>;
   };
   blockquote: {
-    cite?: MaybeReactive<string>;
+    cite?: Hybrid<string>;
   };
   button: {
-    type?: MaybeReactive<"button" | "submit" | "reset">;
-    disabled?: MaybeReactive<boolean>;
-    form?: MaybeReactive<string>;
-    formAction?: MaybeReactive<string>;
-    formEncType?: MaybeReactive<string>;
-    formMethod?: MaybeReactive<string>;
-    formNoValidate?: MaybeReactive<boolean>;
-    formTarget?: MaybeReactive<string>;
-    name?: MaybeReactive<string>;
-    value?: MaybeReactive<string>;
-    popoverTarget?: MaybeReactive<string>;
-    popoverTargetAction?: MaybeReactive<"hide" | "show" | "toggle">;
+    type?: Hybrid<"button" | "submit" | "reset">;
+    disabled?: Hybrid<boolean>;
+    form?: Hybrid<string>;
+    formaction?: Hybrid<string>;
+    formenctype?: Hybrid<string>;
+    formmethod?: Hybrid<string>;
+    formnovalidate?: Hybrid<boolean>;
+    formtarget?: Hybrid<string>;
+    name?: Hybrid<string>;
+    value?: Hybrid<string>;
+    popovertarget?: Hybrid<string>;
+    popovertargetaction?: Hybrid<"hide" | "show" | "toggle">;
   };
   canvas: {
-    width?: MaybeReactive<number | string>;
-    height?: MaybeReactive<number | string>;
+    width?: Hybrid<number | string>;
+    height?: Hybrid<number | string>;
   };
   col: {
-    span?: MaybeReactive<number>;
+    span?: Hybrid<number>;
   };
   colgroup: {
-    span?: MaybeReactive<number>;
+    span?: Hybrid<number>;
   };
   del: {
-    cite?: MaybeReactive<string>;
-    dateTime?: MaybeReactive<string>;
+    cite?: Hybrid<string>;
+    datetime?: Hybrid<string>;
   };
   details: {
-    open?: MaybeReactive<boolean>;
+    open?: Hybrid<boolean>;
     onToggle?: EventHandler<Event>;
   };
   dialog: {
-    open?: MaybeReactive<boolean>;
+    open?: Hybrid<boolean>;
     onClose?: EventHandler<Event>;
     onCancel?: EventHandler<Event>;
   };
   embed: {
-    height?: MaybeReactive<number | string>;
-    src?: MaybeReactive<string>;
-    type?: MaybeReactive<string>;
-    width?: MaybeReactive<number | string>;
+    height?: Hybrid<number | string>;
+    src?: Hybrid<string>;
+    type?: Hybrid<string>;
+    width?: Hybrid<number | string>;
   };
   fieldset: {
-    disabled?: MaybeReactive<boolean>;
-    form?: MaybeReactive<string>;
-    name?: MaybeReactive<string>;
+    disabled?: Hybrid<boolean>;
+    form?: Hybrid<string>;
+    name?: Hybrid<string>;
   };
   form: {
-    action?: MaybeReactive<string>;
-    method?: MaybeReactive<"get" | "post" | "dialog">;
-    encType?: MaybeReactive<string>;
-    target?: MaybeReactive<string>;
-    autoComplete?: MaybeReactive<"on" | "off">;
-    noValidate?: MaybeReactive<boolean>;
-    name?: MaybeReactive<string>;
-    acceptCharset?: MaybeReactive<string>;
-    rel?: MaybeReactive<string>;
+    action?: Hybrid<string>;
+    method?: Hybrid<"get" | "post" | "dialog">;
+    enctype?: Hybrid<string>;
+    target?: Hybrid<string>;
+    autocomplete?: Hybrid<"on" | "off">;
+    novalidate?: Hybrid<boolean>;
+    name?: Hybrid<string>;
+    "accept-charset"?: Hybrid<string>;
+    rel?: Hybrid<string>;
   };
   html: {
-    manifest?: MaybeReactive<string>;
+    manifest?: Hybrid<string>;
   };
   iframe: {
-    allow?: MaybeReactive<string>;
-    allowFullScreen?: MaybeReactive<boolean>;
-    height?: MaybeReactive<number | string>;
-    loading?: MaybeReactive<"eager" | "lazy">;
-    name?: MaybeReactive<string>;
-    referrerPolicy?: MaybeReactive<ReferrerPolicy>;
-    sandbox?: MaybeReactive<string>;
-    src?: MaybeReactive<string>;
-    srcdoc?: MaybeReactive<string>;
-    width?: MaybeReactive<number | string>;
+    allow?: Hybrid<string>;
+    allowfullscreen?: Hybrid<boolean>;
+    height?: Hybrid<number | string>;
+    loading?: Hybrid<"eager" | "lazy">;
+    name?: Hybrid<string>;
+    referrerpolicy?: Hybrid<ReferrerPolicy>;
+    sandbox?: Hybrid<string>;
+    src?: Hybrid<string>;
+    srcdoc?: Hybrid<string>;
+    width?: Hybrid<number | string>;
   };
   img: {
-    alt?: MaybeReactive<string>;
-    crossOrigin?: MaybeReactive<"anonymous" | "use-credentials" | "">;
-    decoding?: MaybeReactive<"async" | "auto" | "sync">;
-    height?: MaybeReactive<number | string>;
-    loading?: MaybeReactive<"eager" | "lazy">;
-    referrerPolicy?: MaybeReactive<ReferrerPolicy>;
-    sizes?: MaybeReactive<string>;
-    src?: MaybeReactive<string>;
-    srcSet?: MaybeReactive<string>;
-    useMap?: MaybeReactive<string>;
-    width?: MaybeReactive<number | string>;
-    fetchPriority?: MaybeReactive<"high" | "low" | "auto">;
+    alt?: Hybrid<string>;
+    crossorigin?: Hybrid<boolean | "anonymous" | "use-credentials" | "">;
+    decoding?: Hybrid<"async" | "auto" | "sync">;
+    height?: Hybrid<number | string>;
+    loading?: Hybrid<"eager" | "lazy">;
+    referrerpolicy?: Hybrid<ReferrerPolicy>;
+    sizes?: Hybrid<string>;
+    src?: Hybrid<string>;
+    srcset?: Hybrid<string>;
+    usemap?: Hybrid<string>;
+    width?: Hybrid<number | string>;
+    fetchpriority?: Hybrid<"high" | "low" | "auto">;
   };
   input: {
-    accept?: MaybeReactive<string>;
-    alt?: MaybeReactive<string>;
-    autoComplete?: MaybeReactive<string>;
-    capture?: MaybeReactive<boolean | "user" | "environment">;
-    checked?: MaybeReactive<boolean>;
-    disabled?: MaybeReactive<boolean>;
-    form?: MaybeReactive<string>;
-    formAction?: MaybeReactive<string>;
-    formEncType?: MaybeReactive<string>;
-    formMethod?: MaybeReactive<string>;
-    formNoValidate?: MaybeReactive<boolean>;
-    formTarget?: MaybeReactive<string>;
-    height?: MaybeReactive<number | string>;
-    list?: MaybeReactive<string>;
-    max?: MaybeReactive<number | string>;
-    maxLength?: MaybeReactive<number>;
-    min?: MaybeReactive<number | string>;
-    minLength?: MaybeReactive<number>;
-    multiple?: MaybeReactive<boolean>;
-    name?: MaybeReactive<string>;
-    pattern?: MaybeReactive<string>;
-    placeholder?: MaybeReactive<string>;
-    readOnly?: MaybeReactive<boolean>;
-    required?: MaybeReactive<boolean>;
-    size?: MaybeReactive<number>;
-    src?: MaybeReactive<string>;
-    step?: MaybeReactive<number | string>;
-    type?: MaybeReactive<
+    accept?: Hybrid<string>;
+    alt?: Hybrid<string>;
+    autocomplete?: Hybrid<string>;
+    capture?: Hybrid<boolean | "user" | "environment">;
+    checked?: Hybrid<boolean>;
+    disabled?: Hybrid<boolean>;
+    form?: Hybrid<string>;
+    formaction?: Hybrid<string>;
+    formenctype?: Hybrid<string>;
+    formmethod?: Hybrid<string>;
+    formnovalidate?: Hybrid<boolean>;
+    formtarget?: Hybrid<string>;
+    height?: Hybrid<number | string>;
+    list?: Hybrid<string>;
+    max?: Hybrid<number | string>;
+    maxlength?: Hybrid<number>;
+    min?: Hybrid<number | string>;
+    minlength?: Hybrid<number>;
+    multiple?: Hybrid<boolean>;
+    name?: Hybrid<string>;
+    pattern?: Hybrid<string>;
+    placeholder?: Hybrid<string>;
+    readonly?: Hybrid<boolean>;
+    required?: Hybrid<boolean>;
+    size?: Hybrid<number>;
+    src?: Hybrid<string>;
+    step?: Hybrid<number | string>;
+    type?: Hybrid<
       | "button"
       | "checkbox"
       | "color"
@@ -1077,182 +1078,181 @@ interface TagExtraProps {
       | "url"
       | "week"
     >;
-    value?: MaybeReactive<string | number | readonly string[]>;
-    width?: MaybeReactive<number | string>;
+    value?: Hybrid<string | number | readonly string[]>;
+    width?: Hybrid<number | string>;
   };
   ins: {
-    cite?: MaybeReactive<string>;
-    dateTime?: MaybeReactive<string>;
+    cite?: Hybrid<string>;
+    datetime?: Hybrid<string>;
   };
   label: {
-    for?: MaybeReactive<string>;
-    htmlFor?: MaybeReactive<string>;
+    for?: Hybrid<string>;
   };
   li: {
-    value?: MaybeReactive<number>;
+    value?: Hybrid<number>;
   };
   link: {
-    as?: MaybeReactive<string>;
-    crossOrigin?: MaybeReactive<"anonymous" | "use-credentials" | "">;
-    disabled?: MaybeReactive<boolean>;
-    href?: MaybeReactive<string>;
-    hreflang?: MaybeReactive<string>;
-    imageSizes?: MaybeReactive<string>;
-    imageSrcSet?: MaybeReactive<string>;
-    integrity?: MaybeReactive<string>;
-    media?: MaybeReactive<string>;
-    referrerPolicy?: MaybeReactive<ReferrerPolicy>;
-    rel?: MaybeReactive<string>;
-    sizes?: MaybeReactive<string>;
-    type?: MaybeReactive<string>;
-    fetchPriority?: MaybeReactive<"high" | "low" | "auto">;
+    as?: Hybrid<string>;
+    crossorigin?: Hybrid<boolean | "anonymous" | "use-credentials" | "">;
+    disabled?: Hybrid<boolean>;
+    href?: Hybrid<string>;
+    hreflang?: Hybrid<string>;
+    imagesizes?: Hybrid<string>;
+    imagesrcset?: Hybrid<string>;
+    integrity?: Hybrid<string>;
+    media?: Hybrid<string>;
+    referrerpolicy?: Hybrid<ReferrerPolicy>;
+    rel?: Hybrid<string>;
+    sizes?: Hybrid<string>;
+    type?: Hybrid<string>;
+    fetchpriority?: Hybrid<"high" | "low" | "auto">;
   };
   map: {
-    name?: MaybeReactive<string>;
+    name?: Hybrid<string>;
   };
   meta: {
-    charSet?: MaybeReactive<string>;
-    content?: MaybeReactive<string>;
-    httpEquiv?: MaybeReactive<string>;
-    name?: MaybeReactive<string>;
-    media?: MaybeReactive<string>;
+    charset?: Hybrid<string>;
+    content?: Hybrid<string>;
+    "http-equiv"?: Hybrid<string>;
+    name?: Hybrid<string>;
+    media?: Hybrid<string>;
+    property?: Hybrid<string>; // Open Graph
   };
   meter: {
-    high?: MaybeReactive<number>;
-    low?: MaybeReactive<number>;
-    max?: MaybeReactive<number>;
-    min?: MaybeReactive<number>;
-    optimum?: MaybeReactive<number>;
-    value?: MaybeReactive<number>;
+    high?: Hybrid<number>;
+    low?: Hybrid<number>;
+    max?: Hybrid<number>;
+    min?: Hybrid<number>;
+    optimum?: Hybrid<number>;
+    value?: Hybrid<number>;
   };
   object: {
-    data?: MaybeReactive<string>;
-    form?: MaybeReactive<string>;
-    height?: MaybeReactive<number | string>;
-    name?: MaybeReactive<string>;
-    type?: MaybeReactive<string>;
-    useMap?: MaybeReactive<string>;
-    width?: MaybeReactive<number | string>;
+    data?: Hybrid<string>;
+    form?: Hybrid<string>;
+    height?: Hybrid<number | string>;
+    name?: Hybrid<string>;
+    type?: Hybrid<string>;
+    usemap?: Hybrid<string>;
+    width?: Hybrid<number | string>;
   };
   ol: {
-    reversed?: MaybeReactive<boolean>;
-    start?: MaybeReactive<number>;
-    type?: MaybeReactive<"1" | "a" | "A" | "i" | "I">;
+    reversed?: Hybrid<boolean>;
+    start?: Hybrid<number>;
+    type?: Hybrid<"1" | "a" | "A" | "i" | "I">;
   };
   optgroup: {
-    disabled?: MaybeReactive<boolean>;
-    label?: MaybeReactive<string>;
+    disabled?: Hybrid<boolean>;
+    label?: Hybrid<string>;
   };
   option: {
-    disabled?: MaybeReactive<boolean>;
-    label?: MaybeReactive<string>;
-    selected?: MaybeReactive<boolean>;
-    value?: MaybeReactive<string | number>;
+    disabled?: Hybrid<boolean>;
+    label?: Hybrid<string>;
+    selected?: Hybrid<boolean>;
+    value?: Hybrid<string | number>;
   };
   output: {
-    for?: MaybeReactive<string>;
-    htmlFor?: MaybeReactive<string>;
-    form?: MaybeReactive<string>;
-    name?: MaybeReactive<string>;
+    for?: Hybrid<string>;
+    form?: Hybrid<string>;
+    name?: Hybrid<string>;
   };
   progress: {
-    max?: MaybeReactive<number>;
-    value?: MaybeReactive<number>;
+    max?: Hybrid<number>;
+    value?: Hybrid<number>;
   };
   q: {
-    cite?: MaybeReactive<string>;
+    cite?: Hybrid<string>;
   };
   script: {
-    async?: MaybeReactive<boolean>;
-    crossOrigin?: MaybeReactive<"anonymous" | "use-credentials" | "">;
-    defer?: MaybeReactive<boolean>;
-    integrity?: MaybeReactive<string>;
-    noModule?: MaybeReactive<boolean>;
-    referrerPolicy?: MaybeReactive<ReferrerPolicy>;
-    src?: MaybeReactive<string>;
-    type?: MaybeReactive<string>;
-    fetchPriority?: MaybeReactive<"high" | "low" | "auto">;
+    async?: Hybrid<boolean>;
+    crossorigin?: Hybrid<boolean | "anonymous" | "use-credentials" | "">;
+    defer?: Hybrid<boolean>;
+    integrity?: Hybrid<string>;
+    nomodule?: Hybrid<boolean>;
+    referrerpolicy?: Hybrid<ReferrerPolicy>;
+    src?: Hybrid<string>;
+    type?: Hybrid<string>;
+    fetchpriority?: Hybrid<"high" | "low" | "auto">;
   };
   select: {
-    autoComplete?: MaybeReactive<string>;
-    disabled?: MaybeReactive<boolean>;
-    form?: MaybeReactive<string>;
-    multiple?: MaybeReactive<boolean>;
-    name?: MaybeReactive<string>;
-    required?: MaybeReactive<boolean>;
-    size?: MaybeReactive<number>;
-    value?: MaybeReactive<string | number | readonly string[]>;
+    autocomplete?: Hybrid<string>;
+    disabled?: Hybrid<boolean>;
+    form?: Hybrid<string>;
+    multiple?: Hybrid<boolean>;
+    name?: Hybrid<string>;
+    required?: Hybrid<boolean>;
+    size?: Hybrid<number>;
+    value?: Hybrid<string | number | readonly string[]>;
   };
   slot: {
-    name?: MaybeReactive<string>;
+    name?: Hybrid<string>;
   };
   source: {
-    height?: MaybeReactive<number | string>;
-    media?: MaybeReactive<string>;
-    sizes?: MaybeReactive<string>;
-    src?: MaybeReactive<string>;
-    srcSet?: MaybeReactive<string>;
-    type?: MaybeReactive<string>;
-    width?: MaybeReactive<number | string>;
+    height?: Hybrid<number | string>;
+    media?: Hybrid<string>;
+    sizes?: Hybrid<string>;
+    src?: Hybrid<string>;
+    srcset?: Hybrid<string>;
+    type?: Hybrid<string>;
+    width?: Hybrid<number | string>;
   };
   style: {
-    media?: MaybeReactive<string>;
-    scoped?: MaybeReactive<boolean>;
+    media?: Hybrid<string>;
+    scoped?: Hybrid<boolean>;
   };
   table: {
-    cellPadding?: MaybeReactive<number | string>;
-    cellSpacing?: MaybeReactive<number | string>;
+    cellpadding?: Hybrid<number | string>;
+    cellspacing?: Hybrid<number | string>;
   };
   td: TableCellProps;
   textarea: {
-    autoComplete?: MaybeReactive<string>;
-    cols?: MaybeReactive<number>;
-    disabled?: MaybeReactive<boolean>;
-    form?: MaybeReactive<string>;
-    maxLength?: MaybeReactive<number>;
-    minLength?: MaybeReactive<number>;
-    name?: MaybeReactive<string>;
-    placeholder?: MaybeReactive<string>;
-    readOnly?: MaybeReactive<boolean>;
-    required?: MaybeReactive<boolean>;
-    rows?: MaybeReactive<number>;
-    value?: MaybeReactive<string>;
-    wrap?: MaybeReactive<"hard" | "soft" | "off">;
+    autocomplete?: Hybrid<string>;
+    cols?: Hybrid<number>;
+    disabled?: Hybrid<boolean>;
+    form?: Hybrid<string>;
+    maxlength?: Hybrid<number>;
+    minlength?: Hybrid<number>;
+    name?: Hybrid<string>;
+    placeholder?: Hybrid<string>;
+    readonly?: Hybrid<boolean>;
+    required?: Hybrid<boolean>;
+    rows?: Hybrid<number>;
+    value?: Hybrid<string>;
+    wrap?: Hybrid<"hard" | "soft" | "off">;
   };
   th: TableCellProps & {
-    scope?: MaybeReactive<"row" | "col" | "rowgroup" | "colgroup">;
-    abbr?: MaybeReactive<string>;
+    scope?: Hybrid<"row" | "col" | "rowgroup" | "colgroup">;
+    abbr?: Hybrid<string>;
   };
   time: {
-    dateTime?: MaybeReactive<string>;
+    datetime?: Hybrid<string>;
   };
   track: {
-    default?: MaybeReactive<boolean>;
-    kind?: MaybeReactive<
+    default?: Hybrid<boolean>;
+    kind?: Hybrid<
       "subtitles" | "captions" | "descriptions" | "chapters" | "metadata"
     >;
-    label?: MaybeReactive<string>;
-    src?: MaybeReactive<string>;
-    srclang?: MaybeReactive<string>;
+    label?: Hybrid<string>;
+    src?: Hybrid<string>;
+    srclang?: Hybrid<string>;
   };
   video: MediaProps & {
-    height?: MaybeReactive<number | string>;
-    playsInline?: MaybeReactive<boolean>;
-    poster?: MaybeReactive<string>;
-    width?: MaybeReactive<number | string>;
-    disablePictureInPicture?: MaybeReactive<boolean>;
-    disableRemotePlayback?: MaybeReactive<boolean>;
+    height?: Hybrid<number | string>;
+    playsinline?: Hybrid<boolean>;
+    poster?: Hybrid<string>;
+    width?: Hybrid<number | string>;
+    disablepictureinpicture?: Hybrid<boolean>;
+    disableremoteplayback?: Hybrid<boolean>;
   };
 }
 
 interface MediaProps {
-  autoPlay?: MaybeReactive<boolean>;
-  controls?: MaybeReactive<boolean>;
-  crossOrigin?: MaybeReactive<"anonymous" | "use-credentials" | "">;
-  loop?: MaybeReactive<boolean>;
-  muted?: MaybeReactive<boolean>;
-  preload?: MaybeReactive<"none" | "metadata" | "auto" | "">;
-  src?: MaybeReactive<string>;
+  autoplay?: Hybrid<boolean>;
+  controls?: Hybrid<boolean>;
+  crossorigin?: Hybrid<boolean | "anonymous" | "use-credentials" | "">;
+  loop?: Hybrid<boolean>;
+  muted?: Hybrid<boolean>;
+  preload?: Hybrid<"none" | "metadata" | "auto" | "">;
+  src?: Hybrid<string>;
   onAbort?: EventHandler<Event>;
   onCanPlay?: EventHandler<Event>;
   onCanPlayThrough?: EventHandler<Event>;
@@ -1277,9 +1277,9 @@ interface MediaProps {
 }
 
 interface TableCellProps {
-  colSpan?: MaybeReactive<number>;
-  headers?: MaybeReactive<string>;
-  rowSpan?: MaybeReactive<number>;
+  colspan?: Hybrid<number>;
+  headers?: Hybrid<string>;
+  rowspan?: Hybrid<number>;
 }
 
 // =============================================================================
@@ -1295,201 +1295,201 @@ interface SVGAttributes<T extends SVGElement = SVGElement>
   innerHTML?: string | object;
 
   // Core SVG attributes
-  id?: MaybeReactive<string>;
-  class?: MaybeReactive<string>;
-  className?: MaybeReactive<string>;
-  style?: MaybeReactive<string | CSSProperties>;
-  tabIndex?: MaybeReactive<number>;
-  lang?: MaybeReactive<string>;
+  id?: Hybrid<string>;
+  class?: Hybrid<string>;
+  className?: Hybrid<string>;
+  style?: Hybrid<string | CSSProperties>;
+  tabindex?: Hybrid<number>;
+  lang?: Hybrid<string>;
 
   // Presentation attributes
-  "alignment-baseline"?: MaybeReactive<string>;
-  "baseline-shift"?: MaybeReactive<string>;
-  clip?: MaybeReactive<string>;
-  "clip-path"?: MaybeReactive<string>;
-  "clip-rule"?: MaybeReactive<"nonzero" | "evenodd" | "inherit">;
-  color?: MaybeReactive<string>;
-  "color-interpolation"?: MaybeReactive<string>;
-  "color-interpolation-filters"?: MaybeReactive<string>;
-  cursor?: MaybeReactive<string>;
-  direction?: MaybeReactive<string>;
-  display?: MaybeReactive<string>;
-  "dominant-baseline"?: MaybeReactive<string>;
-  fill?: MaybeReactive<string>;
-  "fill-opacity"?: MaybeReactive<number | string>;
-  "fill-rule"?: MaybeReactive<"nonzero" | "evenodd" | "inherit">;
-  filter?: MaybeReactive<string>;
-  "flood-color"?: MaybeReactive<string>;
-  "flood-opacity"?: MaybeReactive<number | string>;
-  "font-family"?: MaybeReactive<string>;
-  "font-size"?: MaybeReactive<string>;
-  "font-size-adjust"?: MaybeReactive<string>;
-  "font-stretch"?: MaybeReactive<string>;
-  "font-style"?: MaybeReactive<string>;
-  "font-variant"?: MaybeReactive<string>;
-  "font-weight"?: MaybeReactive<string>;
-  "glyph-orientation-horizontal"?: MaybeReactive<string>;
-  "glyph-orientation-vertical"?: MaybeReactive<string>;
-  "image-rendering"?: MaybeReactive<string>;
-  kerning?: MaybeReactive<string>;
-  "letter-spacing"?: MaybeReactive<string>;
-  "lighting-color"?: MaybeReactive<string>;
-  "marker-end"?: MaybeReactive<string>;
-  "marker-mid"?: MaybeReactive<string>;
-  "marker-start"?: MaybeReactive<string>;
-  mask?: MaybeReactive<string>;
-  opacity?: MaybeReactive<number | string>;
-  overflow?: MaybeReactive<string>;
-  "pointer-events"?: MaybeReactive<string>;
-  "shape-rendering"?: MaybeReactive<string>;
-  "stop-color"?: MaybeReactive<string>;
-  "stop-opacity"?: MaybeReactive<number | string>;
-  stroke?: MaybeReactive<string>;
-  "stroke-dasharray"?: MaybeReactive<string>;
-  "stroke-dashoffset"?: MaybeReactive<number | string>;
-  "stroke-linecap"?: MaybeReactive<"butt" | "round" | "square" | "inherit">;
-  "stroke-linejoin"?: MaybeReactive<"miter" | "round" | "bevel" | "inherit">;
-  "stroke-miterlimit"?: MaybeReactive<number | string>;
-  "stroke-opacity"?: MaybeReactive<number | string>;
-  "stroke-width"?: MaybeReactive<number | string>;
-  "text-anchor"?: MaybeReactive<"start" | "middle" | "end" | "inherit">;
-  "text-decoration"?: MaybeReactive<string>;
-  "text-rendering"?: MaybeReactive<string>;
-  transform?: MaybeReactive<string>;
-  "transform-origin"?: MaybeReactive<string>;
-  "unicode-bidi"?: MaybeReactive<string>;
-  "vector-effect"?: MaybeReactive<string>;
-  visibility?: MaybeReactive<string>;
-  "word-spacing"?: MaybeReactive<string>;
-  "writing-mode"?: MaybeReactive<string>;
+  "alignment-baseline"?: Hybrid<string>;
+  "baseline-shift"?: Hybrid<string>;
+  clip?: Hybrid<string>;
+  "clip-path"?: Hybrid<string>;
+  "clip-rule"?: Hybrid<"nonzero" | "evenodd" | "inherit">;
+  color?: Hybrid<string>;
+  "color-interpolation"?: Hybrid<string>;
+  "color-interpolation-filters"?: Hybrid<string>;
+  cursor?: Hybrid<string>;
+  direction?: Hybrid<string>;
+  display?: Hybrid<string>;
+  "dominant-baseline"?: Hybrid<string>;
+  fill?: Hybrid<string>;
+  "fill-opacity"?: Hybrid<number | string>;
+  "fill-rule"?: Hybrid<"nonzero" | "evenodd" | "inherit">;
+  filter?: Hybrid<string>;
+  "flood-color"?: Hybrid<string>;
+  "flood-opacity"?: Hybrid<number | string>;
+  "font-family"?: Hybrid<string>;
+  "font-size"?: Hybrid<string>;
+  "font-size-adjust"?: Hybrid<string>;
+  "font-stretch"?: Hybrid<string>;
+  "font-style"?: Hybrid<string>;
+  "font-variant"?: Hybrid<string>;
+  "font-weight"?: Hybrid<string>;
+  "glyph-orientation-horizontal"?: Hybrid<string>;
+  "glyph-orientation-vertical"?: Hybrid<string>;
+  "image-rendering"?: Hybrid<string>;
+  kerning?: Hybrid<string>;
+  "letter-spacing"?: Hybrid<string>;
+  "lighting-color"?: Hybrid<string>;
+  "marker-end"?: Hybrid<string>;
+  "marker-mid"?: Hybrid<string>;
+  "marker-start"?: Hybrid<string>;
+  mask?: Hybrid<string>;
+  opacity?: Hybrid<number | string>;
+  overflow?: Hybrid<string>;
+  "pointer-events"?: Hybrid<string>;
+  "shape-rendering"?: Hybrid<string>;
+  "stop-color"?: Hybrid<string>;
+  "stop-opacity"?: Hybrid<number | string>;
+  stroke?: Hybrid<string>;
+  "stroke-dasharray"?: Hybrid<string>;
+  "stroke-dashoffset"?: Hybrid<number | string>;
+  "stroke-linecap"?: Hybrid<"butt" | "round" | "square" | "inherit">;
+  "stroke-linejoin"?: Hybrid<"miter" | "round" | "bevel" | "inherit">;
+  "stroke-miterlimit"?: Hybrid<number | string>;
+  "stroke-opacity"?: Hybrid<number | string>;
+  "stroke-width"?: Hybrid<number | string>;
+  "text-anchor"?: Hybrid<"start" | "middle" | "end" | "inherit">;
+  "text-decoration"?: Hybrid<string>;
+  "text-rendering"?: Hybrid<string>;
+  transform?: Hybrid<string>;
+  "transform-origin"?: Hybrid<string>;
+  "unicode-bidi"?: Hybrid<string>;
+  "vector-effect"?: Hybrid<string>;
+  visibility?: Hybrid<string>;
+  "word-spacing"?: Hybrid<string>;
+  "writing-mode"?: Hybrid<string>;
 
   // Common SVG element attributes
-  x?: MaybeReactive<number | string>;
-  y?: MaybeReactive<number | string>;
-  width?: MaybeReactive<number | string>;
-  height?: MaybeReactive<number | string>;
-  viewBox?: MaybeReactive<string>;
-  preserveAspectRatio?: MaybeReactive<string>;
-  xmlns?: MaybeReactive<string>;
-  "xmlns:xlink"?: MaybeReactive<string>;
+  x?: Hybrid<number | string>;
+  y?: Hybrid<number | string>;
+  width?: Hybrid<number | string>;
+  height?: Hybrid<number | string>;
+  viewBox?: Hybrid<string>;
+  preserveAspectRatio?: Hybrid<string>;
+  xmlns?: Hybrid<string>;
+  "xmlns:xlink"?: Hybrid<string>;
 
   // Path
-  d?: MaybeReactive<string>;
-  pathLength?: MaybeReactive<number>;
+  d?: Hybrid<string>;
+  pathLength?: Hybrid<number>;
 
   // Circle/Ellipse
-  cx?: MaybeReactive<number | string>;
-  cy?: MaybeReactive<number | string>;
-  r?: MaybeReactive<number | string>;
-  rx?: MaybeReactive<number | string>;
-  ry?: MaybeReactive<number | string>;
+  cx?: Hybrid<number | string>;
+  cy?: Hybrid<number | string>;
+  r?: Hybrid<number | string>;
+  rx?: Hybrid<number | string>;
+  ry?: Hybrid<number | string>;
 
   // Line
-  x1?: MaybeReactive<number | string>;
-  y1?: MaybeReactive<number | string>;
-  x2?: MaybeReactive<number | string>;
-  y2?: MaybeReactive<number | string>;
+  x1?: Hybrid<number | string>;
+  y1?: Hybrid<number | string>;
+  x2?: Hybrid<number | string>;
+  y2?: Hybrid<number | string>;
 
   // Polygon/Polyline
-  points?: MaybeReactive<string>;
+  points?: Hybrid<string>;
 
   // Text
-  dx?: MaybeReactive<number | string>;
-  dy?: MaybeReactive<number | string>;
-  textLength?: MaybeReactive<number | string>;
-  lengthAdjust?: MaybeReactive<"spacing" | "spacingAndGlyphs">;
+  dx?: Hybrid<number | string>;
+  dy?: Hybrid<number | string>;
+  textLength?: Hybrid<number | string>;
+  lengthAdjust?: Hybrid<"spacing" | "spacingAndGlyphs">;
 
   // Use/Image
-  href?: MaybeReactive<string>;
-  "xlink:href"?: MaybeReactive<string>;
+  href?: Hybrid<string>;
+  "xlink:href"?: Hybrid<string>;
 
   // Gradient
-  gradientUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
-  gradientTransform?: MaybeReactive<string>;
-  spreadMethod?: MaybeReactive<"pad" | "reflect" | "repeat">;
-  fx?: MaybeReactive<number | string>;
-  fy?: MaybeReactive<number | string>;
-  offset?: MaybeReactive<number | string>;
+  gradientUnits?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
+  gradientTransform?: Hybrid<string>;
+  spreadMethod?: Hybrid<"pad" | "reflect" | "repeat">;
+  fx?: Hybrid<number | string>;
+  fy?: Hybrid<number | string>;
+  offset?: Hybrid<number | string>;
 
   // Filter
-  result?: MaybeReactive<string>;
-  in?: MaybeReactive<string>;
-  in2?: MaybeReactive<string>;
-  mode?: MaybeReactive<string>;
-  values?: MaybeReactive<string>;
-  type?: MaybeReactive<string>;
-  tableValues?: MaybeReactive<string>;
-  slope?: MaybeReactive<number | string>;
-  intercept?: MaybeReactive<number | string>;
-  amplitude?: MaybeReactive<number | string>;
-  exponent?: MaybeReactive<number | string>;
-  stdDeviation?: MaybeReactive<number | string>;
-  baseFrequency?: MaybeReactive<number | string>;
-  numOctaves?: MaybeReactive<number>;
-  seed?: MaybeReactive<number>;
-  stitchTiles?: MaybeReactive<"stitch" | "noStitch">;
-  scale?: MaybeReactive<number>;
-  xChannelSelector?: MaybeReactive<"R" | "G" | "B" | "A">;
-  yChannelSelector?: MaybeReactive<"R" | "G" | "B" | "A">;
-  azimuth?: MaybeReactive<number>;
-  elevation?: MaybeReactive<number>;
-  surfaceScale?: MaybeReactive<number>;
-  diffuseConstant?: MaybeReactive<number>;
-  specularConstant?: MaybeReactive<number>;
-  specularExponent?: MaybeReactive<number>;
-  kernelUnitLength?: MaybeReactive<number | string>;
-  order?: MaybeReactive<number | string>;
-  kernelMatrix?: MaybeReactive<string>;
-  divisor?: MaybeReactive<number>;
-  bias?: MaybeReactive<number>;
-  targetX?: MaybeReactive<number>;
-  targetY?: MaybeReactive<number>;
-  edgeMode?: MaybeReactive<"duplicate" | "wrap" | "none">;
-  preserveAlpha?: MaybeReactive<boolean>;
-  radius?: MaybeReactive<number | string>;
-  k1?: MaybeReactive<number>;
-  k2?: MaybeReactive<number>;
-  k3?: MaybeReactive<number>;
-  k4?: MaybeReactive<number>;
-  operator?: MaybeReactive<string>;
+  result?: Hybrid<string>;
+  in?: Hybrid<string>;
+  in2?: Hybrid<string>;
+  mode?: Hybrid<string>;
+  values?: Hybrid<string>;
+  type?: Hybrid<string>;
+  tableValues?: Hybrid<string>;
+  slope?: Hybrid<number | string>;
+  intercept?: Hybrid<number | string>;
+  amplitude?: Hybrid<number | string>;
+  exponent?: Hybrid<number | string>;
+  stdDeviation?: Hybrid<number | string>;
+  baseFrequency?: Hybrid<number | string>;
+  numOctaves?: Hybrid<number>;
+  seed?: Hybrid<number>;
+  stitchTiles?: Hybrid<"stitch" | "noStitch">;
+  scale?: Hybrid<number>;
+  xChannelSelector?: Hybrid<"R" | "G" | "B" | "A">;
+  yChannelSelector?: Hybrid<"R" | "G" | "B" | "A">;
+  azimuth?: Hybrid<number>;
+  elevation?: Hybrid<number>;
+  surfaceScale?: Hybrid<number>;
+  diffuseConstant?: Hybrid<number>;
+  specularConstant?: Hybrid<number>;
+  specularExponent?: Hybrid<number>;
+  kernelUnitLength?: Hybrid<number | string>;
+  order?: Hybrid<number | string>;
+  kernelMatrix?: Hybrid<string>;
+  divisor?: Hybrid<number>;
+  bias?: Hybrid<number>;
+  targetX?: Hybrid<number>;
+  targetY?: Hybrid<number>;
+  edgeMode?: Hybrid<"duplicate" | "wrap" | "none">;
+  preserveAlpha?: Hybrid<boolean>;
+  radius?: Hybrid<number | string>;
+  k1?: Hybrid<number>;
+  k2?: Hybrid<number>;
+  k3?: Hybrid<number>;
+  k4?: Hybrid<number>;
+  operator?: Hybrid<string>;
 
   // Marker
-  markerWidth?: MaybeReactive<number | string>;
-  markerHeight?: MaybeReactive<number | string>;
-  refX?: MaybeReactive<number | string>;
-  refY?: MaybeReactive<number | string>;
-  orient?: MaybeReactive<string>;
-  markerUnits?: MaybeReactive<"strokeWidth" | "userSpaceOnUse">;
+  markerWidth?: Hybrid<number | string>;
+  markerHeight?: Hybrid<number | string>;
+  refX?: Hybrid<number | string>;
+  refY?: Hybrid<number | string>;
+  orient?: Hybrid<string>;
+  markerUnits?: Hybrid<"strokeWidth" | "userSpaceOnUse">;
 
   // ClipPath/Mask
-  clipPathUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
-  maskUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
-  maskContentUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
+  clipPathUnits?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
+  maskUnits?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
+  maskContentUnits?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
 
   // Pattern
-  patternUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
-  patternContentUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
-  patternTransform?: MaybeReactive<string>;
+  patternUnits?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
+  patternContentUnits?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
+  patternTransform?: Hybrid<string>;
 
   // Animation
-  attributeName?: MaybeReactive<string>;
-  attributeType?: MaybeReactive<string>;
-  begin?: MaybeReactive<string>;
-  dur?: MaybeReactive<string>;
-  end?: MaybeReactive<string>;
-  min?: MaybeReactive<string>;
-  max?: MaybeReactive<string>;
-  restart?: MaybeReactive<"always" | "whenNotActive" | "never">;
-  repeatCount?: MaybeReactive<number | "indefinite">;
-  repeatDur?: MaybeReactive<string>;
-  calcMode?: MaybeReactive<"discrete" | "linear" | "paced" | "spline">;
-  keyTimes?: MaybeReactive<string>;
-  keySplines?: MaybeReactive<string>;
-  from?: MaybeReactive<string>;
-  to?: MaybeReactive<string>;
-  by?: MaybeReactive<string>;
-  additive?: MaybeReactive<"replace" | "sum">;
-  accumulate?: MaybeReactive<"none" | "sum">;
+  attributeName?: Hybrid<string>;
+  attributeType?: Hybrid<string>;
+  begin?: Hybrid<string>;
+  dur?: Hybrid<string>;
+  end?: Hybrid<string>;
+  min?: Hybrid<string>;
+  max?: Hybrid<string>;
+  restart?: Hybrid<"always" | "whenNotActive" | "never">;
+  repeatCount?: Hybrid<number | "indefinite">;
+  repeatDur?: Hybrid<string>;
+  calcMode?: Hybrid<"discrete" | "linear" | "paced" | "spline">;
+  keyTimes?: Hybrid<string>;
+  keySplines?: Hybrid<string>;
+  from?: Hybrid<string>;
+  to?: Hybrid<string>;
+  by?: Hybrid<string>;
+  additive?: Hybrid<"replace" | "sum">;
+  accumulate?: Hybrid<"none" | "sum">;
 
   // Allow any other attributes
   [key: string]: any;