@mateosuarezdev/flash 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -598,3 +598,899 @@ 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;
+
+// =============================================================================
+// Hybrid - allows static value or reactive function
+// =============================================================================
+
+type Hybrid<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?: 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?: Hybrid<
+    "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"
+  >;
+  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}`]: Hybrid<string | number | boolean>;
+}
+
+// =============================================================================
+// Tag-specific props
+// =============================================================================
+
+type TagSpecificProps<K extends keyof HTMLElementTagNameMap> =
+  K extends keyof TagExtraProps ? TagExtraProps[K] : {};
+
+interface TagExtraProps {
+  a: {
+    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?: 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?: Hybrid<string>;
+    target?: Hybrid<string>;
+  };
+  blockquote: {
+    cite?: Hybrid<string>;
+  };
+  button: {
+    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?: Hybrid<number | string>;
+    height?: Hybrid<number | string>;
+  };
+  col: {
+    span?: Hybrid<number>;
+  };
+  colgroup: {
+    span?: Hybrid<number>;
+  };
+  del: {
+    cite?: Hybrid<string>;
+    datetime?: Hybrid<string>;
+  };
+  details: {
+    open?: Hybrid<boolean>;
+    onToggle?: EventHandler<Event>;
+  };
+  dialog: {
+    open?: Hybrid<boolean>;
+    onClose?: EventHandler<Event>;
+    onCancel?: EventHandler<Event>;
+  };
+  embed: {
+    height?: Hybrid<number | string>;
+    src?: Hybrid<string>;
+    type?: Hybrid<string>;
+    width?: Hybrid<number | string>;
+  };
+  fieldset: {
+    disabled?: Hybrid<boolean>;
+    form?: Hybrid<string>;
+    name?: Hybrid<string>;
+  };
+  form: {
+    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?: Hybrid<string>;
+  };
+  iframe: {
+    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?: 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?: 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"
+      | "date"
+      | "datetime-local"
+      | "email"
+      | "file"
+      | "hidden"
+      | "image"
+      | "month"
+      | "number"
+      | "password"
+      | "radio"
+      | "range"
+      | "reset"
+      | "search"
+      | "submit"
+      | "tel"
+      | "text"
+      | "time"
+      | "url"
+      | "week"
+    >;
+    value?: Hybrid<string | number | readonly string[]>;
+    width?: Hybrid<number | string>;
+  };
+  ins: {
+    cite?: Hybrid<string>;
+    datetime?: Hybrid<string>;
+  };
+  label: {
+    for?: Hybrid<string>;
+  };
+  li: {
+    value?: Hybrid<number>;
+  };
+  link: {
+    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?: Hybrid<string>;
+  };
+  meta: {
+    charset?: Hybrid<string>;
+    content?: Hybrid<string>;
+    "http-equiv"?: Hybrid<string>;
+    name?: Hybrid<string>;
+    media?: Hybrid<string>;
+    property?: Hybrid<string>; // Open Graph
+  };
+  meter: {
+    high?: Hybrid<number>;
+    low?: Hybrid<number>;
+    max?: Hybrid<number>;
+    min?: Hybrid<number>;
+    optimum?: Hybrid<number>;
+    value?: Hybrid<number>;
+  };
+  object: {
+    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?: Hybrid<boolean>;
+    start?: Hybrid<number>;
+    type?: Hybrid<"1" | "a" | "A" | "i" | "I">;
+  };
+  optgroup: {
+    disabled?: Hybrid<boolean>;
+    label?: Hybrid<string>;
+  };
+  option: {
+    disabled?: Hybrid<boolean>;
+    label?: Hybrid<string>;
+    selected?: Hybrid<boolean>;
+    value?: Hybrid<string | number>;
+  };
+  output: {
+    for?: Hybrid<string>;
+    form?: Hybrid<string>;
+    name?: Hybrid<string>;
+  };
+  progress: {
+    max?: Hybrid<number>;
+    value?: Hybrid<number>;
+  };
+  q: {
+    cite?: Hybrid<string>;
+  };
+  script: {
+    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?: 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?: Hybrid<string>;
+  };
+  source: {
+    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?: Hybrid<string>;
+    scoped?: Hybrid<boolean>;
+  };
+  table: {
+    cellpadding?: Hybrid<number | string>;
+    cellspacing?: Hybrid<number | string>;
+  };
+  td: TableCellProps;
+  textarea: {
+    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?: Hybrid<"row" | "col" | "rowgroup" | "colgroup">;
+    abbr?: Hybrid<string>;
+  };
+  time: {
+    datetime?: Hybrid<string>;
+  };
+  track: {
+    default?: Hybrid<boolean>;
+    kind?: Hybrid<
+      "subtitles" | "captions" | "descriptions" | "chapters" | "metadata"
+    >;
+    label?: Hybrid<string>;
+    src?: Hybrid<string>;
+    srclang?: Hybrid<string>;
+  };
+  video: MediaProps & {
+    height?: Hybrid<number | string>;
+    playsinline?: Hybrid<boolean>;
+    poster?: Hybrid<string>;
+    width?: Hybrid<number | string>;
+    disablepictureinpicture?: Hybrid<boolean>;
+    disableremoteplayback?: Hybrid<boolean>;
+  };
+}
+
+interface MediaProps {
+  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>;
+  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?: Hybrid<number>;
+  headers?: Hybrid<string>;
+  rowspan?: Hybrid<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?: Hybrid<string>;
+  class?: Hybrid<string>;
+  className?: Hybrid<string>;
+  style?: Hybrid<string | CSSProperties>;
+  tabindex?: Hybrid<number>;
+  lang?: Hybrid<string>;
+
+  // Presentation attributes
+  "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?: 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?: Hybrid<string>;
+  pathLength?: Hybrid<number>;
+
+  // Circle/Ellipse
+  cx?: Hybrid<number | string>;
+  cy?: Hybrid<number | string>;
+  r?: Hybrid<number | string>;
+  rx?: Hybrid<number | string>;
+  ry?: Hybrid<number | string>;
+
+  // Line
+  x1?: Hybrid<number | string>;
+  y1?: Hybrid<number | string>;
+  x2?: Hybrid<number | string>;
+  y2?: Hybrid<number | string>;
+
+  // Polygon/Polyline
+  points?: Hybrid<string>;
+
+  // Text
+  dx?: Hybrid<number | string>;
+  dy?: Hybrid<number | string>;
+  textLength?: Hybrid<number | string>;
+  lengthAdjust?: Hybrid<"spacing" | "spacingAndGlyphs">;
+
+  // Use/Image
+  href?: Hybrid<string>;
+  "xlink:href"?: Hybrid<string>;
+
+  // Gradient
+  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?: 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?: 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?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
+  maskUnits?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
+  maskContentUnits?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
+
+  // Pattern
+  patternUnits?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
+  patternContentUnits?: Hybrid<"userSpaceOnUse" | "objectBoundingBox">;
+  patternTransform?: Hybrid<string>;
+
+  // Animation
+  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;
+}
+