@mateosuarezdev/flash 0.0.3 → 0.0.5

package/dist/index.d.ts

@@ -598,3 +598,900 @@ declare interface VNode {
 export declare function withViewTransition(mutate: () => void, elements?: HTMLElement[], options?: ViewTransitionOptions): void;
 
 export { }
+
+
+// JSX Types
+// =============================================================================
+// JSX Element type - what JSX expressions return
+// =============================================================================
+
+export type JSXElement =
+  | IntrinsicVNode
+  | VNode
+  | ReactiveVNode
+  | string
+  | number
+  | boolean
+  | null
+  | undefined;
+
+// =============================================================================
+// Component types
+// =============================================================================
+
+export type Component<P = {}> = (props: P) => JSXElement;
+
+export type ParentComponent<P = {}> = (
+  props: P & { children?: Children },
+) => JSXElement;
+
+// =============================================================================
+// JSX Namespace
+// =============================================================================
+
+declare global {
+  namespace JSX {
+    type Element = JSXElement;
+
+    interface ElementAttributesProperty {
+      props: {};
+    }
+
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+
+    // -------------------------------------------------------------------------
+    // Intrinsic elements (HTML + SVG)
+    // -------------------------------------------------------------------------
+    type IntrinsicElements = {
+      [K in keyof HTMLElementTagNameMap]: HTMLAttributes<
+        HTMLElementTagNameMap[K]
+      > &
+        TagSpecificProps<K>;
+    } & {
+      [K in keyof SVGElementTagNameMap]: SVGAttributes<SVGElementTagNameMap[K]>;
+    };
+  }
+}
+
+// =============================================================================
+// Ref type
+// =============================================================================
+
+type Ref<T extends Element = Element> = (el: T) => void;
+
+// =============================================================================
+// Reactive wrapper - allows T or () => T for reactive props
+// =============================================================================
+
+type MaybeReactive<T> = T | (() => T);
+
+// =============================================================================
+// Event Handlers
+// =============================================================================
+
+type EventHandler<E extends Event = Event> = (event: E) => void;
+
+interface DOMEventHandlers<T extends Element = Element> {
+  // Mouse events
+  onClick?: EventHandler<MouseEvent>;
+  onDblClick?: EventHandler<MouseEvent>;
+  onMouseDown?: EventHandler<MouseEvent>;
+  onMouseUp?: EventHandler<MouseEvent>;
+  onMouseEnter?: EventHandler<MouseEvent>;
+  onMouseLeave?: EventHandler<MouseEvent>;
+  onMouseMove?: EventHandler<MouseEvent>;
+  onMouseOver?: EventHandler<MouseEvent>;
+  onMouseOut?: EventHandler<MouseEvent>;
+  onContextMenu?: EventHandler<MouseEvent>;
+
+  // Keyboard events
+  onKeyDown?: EventHandler<KeyboardEvent>;
+  onKeyUp?: EventHandler<KeyboardEvent>;
+  onKeyPress?: EventHandler<KeyboardEvent>;
+
+  // Focus events
+  onFocus?: EventHandler<FocusEvent>;
+  onBlur?: EventHandler<FocusEvent>;
+  onFocusIn?: EventHandler<FocusEvent>;
+  onFocusOut?: EventHandler<FocusEvent>;
+
+  // Form events
+  onInput?: EventHandler<InputEvent>;
+  onChange?: EventHandler<Event>;
+  onSubmit?: EventHandler<SubmitEvent>;
+  onReset?: EventHandler<Event>;
+  onInvalid?: EventHandler<Event>;
+
+  // Touch events
+  onTouchStart?: EventHandler<TouchEvent>;
+  onTouchEnd?: EventHandler<TouchEvent>;
+  onTouchMove?: EventHandler<TouchEvent>;
+  onTouchCancel?: EventHandler<TouchEvent>;
+
+  // Pointer events
+  onPointerDown?: EventHandler<PointerEvent>;
+  onPointerUp?: EventHandler<PointerEvent>;
+  onPointerMove?: EventHandler<PointerEvent>;
+  onPointerEnter?: EventHandler<PointerEvent>;
+  onPointerLeave?: EventHandler<PointerEvent>;
+  onPointerOver?: EventHandler<PointerEvent>;
+  onPointerOut?: EventHandler<PointerEvent>;
+  onPointerCancel?: EventHandler<PointerEvent>;
+
+  // Drag events
+  onDrag?: EventHandler<DragEvent>;
+  onDragStart?: EventHandler<DragEvent>;
+  onDragEnd?: EventHandler<DragEvent>;
+  onDragEnter?: EventHandler<DragEvent>;
+  onDragLeave?: EventHandler<DragEvent>;
+  onDragOver?: EventHandler<DragEvent>;
+  onDrop?: EventHandler<DragEvent>;
+
+  // Clipboard events
+  onCopy?: EventHandler<ClipboardEvent>;
+  onCut?: EventHandler<ClipboardEvent>;
+  onPaste?: EventHandler<ClipboardEvent>;
+
+  // Scroll/Wheel events
+  onScroll?: EventHandler<Event>;
+  onWheel?: EventHandler<WheelEvent>;
+
+  // Animation events
+  onAnimationStart?: EventHandler<AnimationEvent>;
+  onAnimationEnd?: EventHandler<AnimationEvent>;
+  onAnimationIteration?: EventHandler<AnimationEvent>;
+
+  // Transition events
+  onTransitionStart?: EventHandler<TransitionEvent>;
+  onTransitionEnd?: EventHandler<TransitionEvent>;
+  onTransitionRun?: EventHandler<TransitionEvent>;
+  onTransitionCancel?: EventHandler<TransitionEvent>;
+
+  // Media events
+  onLoad?: EventHandler<Event>;
+  onError?: EventHandler<Event>;
+}
+
+// =============================================================================
+// CSS Properties (for style prop)
+// =============================================================================
+
+type CSSProperties = {
+  [K in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[K] | number;
+} & {
+  // Allow CSS custom properties
+  [key: `--${string}`]: string | number;
+};
+
+// =============================================================================
+// ARIA attributes
+// =============================================================================
+
+interface AriaAttributes {
+  role?: string;
+  "aria-activedescendant"?: string;
+  "aria-atomic"?: boolean | "true" | "false";
+  "aria-autocomplete"?: "none" | "inline" | "list" | "both";
+  "aria-busy"?: boolean | "true" | "false";
+  "aria-checked"?: boolean | "true" | "false" | "mixed";
+  "aria-colcount"?: number;
+  "aria-colindex"?: number;
+  "aria-colspan"?: number;
+  "aria-controls"?: string;
+  "aria-current"?:
+    | boolean
+    | "true"
+    | "false"
+    | "page"
+    | "step"
+    | "location"
+    | "date"
+    | "time";
+  "aria-describedby"?: string;
+  "aria-details"?: string;
+  "aria-disabled"?: boolean | "true" | "false";
+  "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup";
+  "aria-errormessage"?: string;
+  "aria-expanded"?: boolean | "true" | "false";
+  "aria-flowto"?: string;
+  "aria-grabbed"?: boolean | "true" | "false";
+  "aria-haspopup"?:
+    | boolean
+    | "true"
+    | "false"
+    | "menu"
+    | "listbox"
+    | "tree"
+    | "grid"
+    | "dialog";
+  "aria-hidden"?: boolean | "true" | "false";
+  "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
+  "aria-keyshortcuts"?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-level"?: number;
+  "aria-live"?: "off" | "assertive" | "polite";
+  "aria-modal"?: boolean | "true" | "false";
+  "aria-multiline"?: boolean | "true" | "false";
+  "aria-multiselectable"?: boolean | "true" | "false";
+  "aria-orientation"?: "horizontal" | "vertical";
+  "aria-owns"?: string;
+  "aria-placeholder"?: string;
+  "aria-posinset"?: number;
+  "aria-pressed"?: boolean | "true" | "false" | "mixed";
+  "aria-readonly"?: boolean | "true" | "false";
+  "aria-relevant"?:
+    | "additions"
+    | "additions removals"
+    | "additions text"
+    | "all"
+    | "removals"
+    | "removals additions"
+    | "removals text"
+    | "text"
+    | "text additions"
+    | "text removals";
+  "aria-required"?: boolean | "true" | "false";
+  "aria-roledescription"?: string;
+  "aria-rowcount"?: number;
+  "aria-rowindex"?: number;
+  "aria-rowspan"?: number;
+  "aria-selected"?: boolean | "true" | "false";
+  "aria-setsize"?: number;
+  "aria-sort"?: "none" | "ascending" | "descending" | "other";
+  "aria-valuemax"?: number;
+  "aria-valuemin"?: number;
+  "aria-valuenow"?: number;
+  "aria-valuetext"?: string;
+}
+
+// =============================================================================
+// HTML Attributes
+// =============================================================================
+
+interface HTMLAttributes<T extends Element = Element>
+  extends AriaAttributes, DOMEventHandlers<T> {
+  // Flash-specific
+  ref?: Ref<T>;
+  key?: string | number;
+  children?: Children;
+  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<
+    "enter" | "done" | "go" | "next" | "previous" | "search" | "send"
+  >;
+  inputMode?: MaybeReactive<
+    "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">;
+
+  // Data attributes
+  [key: `data-${string}`]: MaybeReactive<string | number | boolean>;
+}
+
+// =============================================================================
+// Tag-specific props
+// =============================================================================
+
+type TagSpecificProps<K extends keyof HTMLElementTagNameMap> =
+  K extends keyof TagExtraProps ? TagExtraProps[K] : {};
+
+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>;
+  };
+  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>;
+  };
+  audio: MediaProps;
+  base: {
+    href?: MaybeReactive<string>;
+    target?: MaybeReactive<string>;
+  };
+  blockquote: {
+    cite?: MaybeReactive<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">;
+  };
+  canvas: {
+    width?: MaybeReactive<number | string>;
+    height?: MaybeReactive<number | string>;
+  };
+  col: {
+    span?: MaybeReactive<number>;
+  };
+  colgroup: {
+    span?: MaybeReactive<number>;
+  };
+  del: {
+    cite?: MaybeReactive<string>;
+    dateTime?: MaybeReactive<string>;
+  };
+  details: {
+    open?: MaybeReactive<boolean>;
+    onToggle?: EventHandler<Event>;
+  };
+  dialog: {
+    open?: MaybeReactive<boolean>;
+    onClose?: EventHandler<Event>;
+    onCancel?: EventHandler<Event>;
+  };
+  embed: {
+    height?: MaybeReactive<number | string>;
+    src?: MaybeReactive<string>;
+    type?: MaybeReactive<string>;
+    width?: MaybeReactive<number | string>;
+  };
+  fieldset: {
+    disabled?: MaybeReactive<boolean>;
+    form?: MaybeReactive<string>;
+    name?: MaybeReactive<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>;
+  };
+  html: {
+    manifest?: MaybeReactive<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>;
+  };
+  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">;
+  };
+  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<
+      | "button"
+      | "checkbox"
+      | "color"
+      | "date"
+      | "datetime-local"
+      | "email"
+      | "file"
+      | "hidden"
+      | "image"
+      | "month"
+      | "number"
+      | "password"
+      | "radio"
+      | "range"
+      | "reset"
+      | "search"
+      | "submit"
+      | "tel"
+      | "text"
+      | "time"
+      | "url"
+      | "week"
+    >;
+    value?: MaybeReactive<string | number | readonly string[]>;
+    width?: MaybeReactive<number | string>;
+  };
+  ins: {
+    cite?: MaybeReactive<string>;
+    dateTime?: MaybeReactive<string>;
+  };
+  label: {
+    for?: MaybeReactive<string>;
+    htmlFor?: MaybeReactive<string>;
+  };
+  li: {
+    value?: MaybeReactive<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">;
+  };
+  map: {
+    name?: MaybeReactive<string>;
+  };
+  meta: {
+    charSet?: MaybeReactive<string>;
+    content?: MaybeReactive<string>;
+    httpEquiv?: MaybeReactive<string>;
+    name?: MaybeReactive<string>;
+    media?: MaybeReactive<string>;
+  };
+  meter: {
+    high?: MaybeReactive<number>;
+    low?: MaybeReactive<number>;
+    max?: MaybeReactive<number>;
+    min?: MaybeReactive<number>;
+    optimum?: MaybeReactive<number>;
+    value?: MaybeReactive<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>;
+  };
+  ol: {
+    reversed?: MaybeReactive<boolean>;
+    start?: MaybeReactive<number>;
+    type?: MaybeReactive<"1" | "a" | "A" | "i" | "I">;
+  };
+  optgroup: {
+    disabled?: MaybeReactive<boolean>;
+    label?: MaybeReactive<string>;
+  };
+  option: {
+    disabled?: MaybeReactive<boolean>;
+    label?: MaybeReactive<string>;
+    selected?: MaybeReactive<boolean>;
+    value?: MaybeReactive<string | number>;
+  };
+  output: {
+    for?: MaybeReactive<string>;
+    htmlFor?: MaybeReactive<string>;
+    form?: MaybeReactive<string>;
+    name?: MaybeReactive<string>;
+  };
+  progress: {
+    max?: MaybeReactive<number>;
+    value?: MaybeReactive<number>;
+  };
+  q: {
+    cite?: MaybeReactive<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">;
+  };
+  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[]>;
+  };
+  slot: {
+    name?: MaybeReactive<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>;
+  };
+  style: {
+    media?: MaybeReactive<string>;
+    scoped?: MaybeReactive<boolean>;
+  };
+  table: {
+    cellPadding?: MaybeReactive<number | string>;
+    cellSpacing?: MaybeReactive<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">;
+  };
+  th: TableCellProps & {
+    scope?: MaybeReactive<"row" | "col" | "rowgroup" | "colgroup">;
+    abbr?: MaybeReactive<string>;
+  };
+  time: {
+    dateTime?: MaybeReactive<string>;
+  };
+  track: {
+    default?: MaybeReactive<boolean>;
+    kind?: MaybeReactive<
+      "subtitles" | "captions" | "descriptions" | "chapters" | "metadata"
+    >;
+    label?: MaybeReactive<string>;
+    src?: MaybeReactive<string>;
+    srclang?: MaybeReactive<string>;
+  };
+  video: MediaProps & {
+    height?: MaybeReactive<number | string>;
+    playsInline?: MaybeReactive<boolean>;
+    poster?: MaybeReactive<string>;
+    width?: MaybeReactive<number | string>;
+    disablePictureInPicture?: MaybeReactive<boolean>;
+    disableRemotePlayback?: MaybeReactive<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>;
+  onAbort?: EventHandler<Event>;
+  onCanPlay?: EventHandler<Event>;
+  onCanPlayThrough?: EventHandler<Event>;
+  onDurationChange?: EventHandler<Event>;
+  onEmptied?: EventHandler<Event>;
+  onEnded?: EventHandler<Event>;
+  onLoadedData?: EventHandler<Event>;
+  onLoadedMetadata?: EventHandler<Event>;
+  onLoadStart?: EventHandler<Event>;
+  onPause?: EventHandler<Event>;
+  onPlay?: EventHandler<Event>;
+  onPlaying?: EventHandler<Event>;
+  onProgress?: EventHandler<Event>;
+  onRateChange?: EventHandler<Event>;
+  onSeeked?: EventHandler<Event>;
+  onSeeking?: EventHandler<Event>;
+  onStalled?: EventHandler<Event>;
+  onSuspend?: EventHandler<Event>;
+  onTimeUpdate?: EventHandler<Event>;
+  onVolumeChange?: EventHandler<Event>;
+  onWaiting?: EventHandler<Event>;
+}
+
+interface TableCellProps {
+  colSpan?: MaybeReactive<number>;
+  headers?: MaybeReactive<string>;
+  rowSpan?: MaybeReactive<number>;
+}
+
+// =============================================================================
+// SVG Attributes
+// =============================================================================
+
+interface SVGAttributes<T extends SVGElement = SVGElement>
+  extends AriaAttributes, DOMEventHandlers<T> {
+  // Flash-specific
+  ref?: Ref<T>;
+  key?: string | number;
+  children?: Children;
+  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>;
+
+  // 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>;
+
+  // 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>;
+
+  // Path
+  d?: MaybeReactive<string>;
+  pathLength?: MaybeReactive<number>;
+
+  // Circle/Ellipse
+  cx?: MaybeReactive<number | string>;
+  cy?: MaybeReactive<number | string>;
+  r?: MaybeReactive<number | string>;
+  rx?: MaybeReactive<number | string>;
+  ry?: MaybeReactive<number | string>;
+
+  // Line
+  x1?: MaybeReactive<number | string>;
+  y1?: MaybeReactive<number | string>;
+  x2?: MaybeReactive<number | string>;
+  y2?: MaybeReactive<number | string>;
+
+  // Polygon/Polyline
+  points?: MaybeReactive<string>;
+
+  // Text
+  dx?: MaybeReactive<number | string>;
+  dy?: MaybeReactive<number | string>;
+  textLength?: MaybeReactive<number | string>;
+  lengthAdjust?: MaybeReactive<"spacing" | "spacingAndGlyphs">;
+
+  // Use/Image
+  href?: MaybeReactive<string>;
+  "xlink:href"?: MaybeReactive<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>;
+
+  // 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>;
+
+  // Marker
+  markerWidth?: MaybeReactive<number | string>;
+  markerHeight?: MaybeReactive<number | string>;
+  refX?: MaybeReactive<number | string>;
+  refY?: MaybeReactive<number | string>;
+  orient?: MaybeReactive<string>;
+  markerUnits?: MaybeReactive<"strokeWidth" | "userSpaceOnUse">;
+
+  // ClipPath/Mask
+  clipPathUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
+  maskUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
+  maskContentUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
+
+  // Pattern
+  patternUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
+  patternContentUnits?: MaybeReactive<"userSpaceOnUse" | "objectBoundingBox">;
+  patternTransform?: MaybeReactive<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">;
+
+  // Allow any other attributes
+  [key: string]: any;
+}
+