@derivesome/tree-web 0.1.1

package/src/jsx-globals.ts

@@ -0,0 +1,861 @@
+/**
+ * JSX type definitions and global ambient declarations for @derivesome/tree-web.
+ *
+ * A prop value can be:
+ *   - Static:   T
+ *   - Reactive: Reference<T>  (from @derivesome/core)
+ *   - Computed: () => T
+ *
+ * Event handler props (onClick, onInput, …) are always static functions and
+ * are NOT wrapped in Reactive<T>.
+ */
+import {
+  Component,
+  createNode,
+  TreeNodeProps,
+  type TreeNode,
+} from "@derivesome/tree";
+import { Derived, Reference } from "@derivesome/core";
+import { CSSProperties } from "./css";
+
+/**
+ * A prop value that may be static, a reactive reference, or a computed function.
+ *
+ * Uses `ReadonlyReference<T>` (bivariant `observe`, covariant `get`/`peek`) rather than
+ * `Reference<T>` (invariant due to `set`) so that e.g. `ref(0)` (`Reference<number>`) is
+ * accepted wherever `Reactive<string | number>` is expected.
+ */
+export type Reactive<T> = T | Reference<T> | Derived<T> | (() => T);
+
+export type Child = unknown | TreeNode | TreeNode[];
+
+// ── Event handlers ────────────────────────────────────────────────────────────
+
+export interface DOMEventHandlers<Target = HTMLElement> {
+  // Mouse
+  onClick?: (e: MouseEvent & { target: Target }) => void;
+  onDblClick?: (e: MouseEvent & { target: Target }) => void;
+  onMouseDown?: (e: MouseEvent & { target: Target }) => void;
+  onMouseUp?: (e: MouseEvent & { target: Target }) => void;
+  onMouseMove?: (e: MouseEvent & { target: Target }) => void;
+  onMouseEnter?: (e: MouseEvent & { target: Target }) => void;
+  onMouseLeave?: (e: MouseEvent & { target: Target }) => void;
+  onMouseOver?: (e: MouseEvent & { target: Target }) => void;
+  onMouseOut?: (e: MouseEvent & { target: Target }) => void;
+  onContextMenu?: (e: MouseEvent & { target: Target }) => void;
+  // Keyboard
+  onKeyDown?: (e: KeyboardEvent & { target: Target }) => void;
+  onKeyUp?: (e: KeyboardEvent & { target: Target }) => void;
+  onKeyPress?: (e: KeyboardEvent & { target: Target }) => void;
+  // Input / form
+  onInput?: (e: InputEvent & { target: Target }) => void;
+  onChange?: (e: Event & { target: Target }) => void;
+  onSubmit?: (e: SubmitEvent & { target: Target }) => void;
+  onReset?: (e: Event & { target: Target }) => void;
+  onFocus?: (e: FocusEvent & { target: Target }) => void;
+  onBlur?: (e: FocusEvent & { target: Target }) => void;
+  onSelect?: (e: Event & { target: Target }) => void;
+  // Pointer
+  onPointerDown?: (e: PointerEvent & { target: Target }) => void;
+  onPointerUp?: (e: PointerEvent & { target: Target }) => void;
+  onPointerMove?: (e: PointerEvent & { target: Target }) => void;
+  onPointerEnter?: (e: PointerEvent & { target: Target }) => void;
+  onPointerLeave?: (e: PointerEvent & { target: Target }) => void;
+  onPointerCancel?: (e: PointerEvent & { target: Target }) => void;
+  onPointerOver?: (e: PointerEvent & { target: Target }) => void;
+  onPointerOut?: (e: PointerEvent & { target: Target }) => void;
+  onGotPointerCapture?: (e: PointerEvent & { target: Target }) => void;
+  onLostPointerCapture?: (e: PointerEvent & { target: Target }) => void;
+  // Touch
+  onTouchStart?: (e: TouchEvent & { target: Target }) => void;
+  onTouchEnd?: (e: TouchEvent & { target: Target }) => void;
+  onTouchMove?: (e: TouchEvent & { target: Target }) => void;
+  onTouchCancel?: (e: TouchEvent & { target: Target }) => void;
+  // Wheel / scroll
+  onWheel?: (e: WheelEvent & { target: Target }) => void;
+  onScroll?: (e: Event & { target: Target }) => void;
+  onScrollEnd?: (e: Event & { target: Target }) => void;
+  // Clipboard
+  onCopy?: (e: ClipboardEvent & { target: Target }) => void;
+  onCut?: (e: ClipboardEvent & { target: Target }) => void;
+  onPaste?: (e: ClipboardEvent & { target: Target }) => void;
+  // Drag
+  onDrag?: (e: DragEvent & { target: Target }) => void;
+  onDragStart?: (e: DragEvent & { target: Target }) => void;
+  onDragEnd?: (e: DragEvent & { target: Target }) => void;
+  onDragEnter?: (e: DragEvent & { target: Target }) => void;
+  onDragOver?: (e: DragEvent & { target: Target }) => void;
+  onDragLeave?: (e: DragEvent & { target: Target }) => void;
+  onDrop?: (e: DragEvent & { target: Target }) => void;
+  // Animation / transition
+  onAnimationStart?: (e: AnimationEvent & { target: Target }) => void;
+  onAnimationEnd?: (e: AnimationEvent & { target: Target }) => void;
+  onAnimationIteration?: (e: AnimationEvent & { target: Target }) => void;
+  onAnimationCancel?: (e: AnimationEvent & { target: Target }) => void;
+  onTransitionStart?: (e: TransitionEvent & { target: Target }) => void;
+  onTransitionEnd?: (e: TransitionEvent & { target: Target }) => void;
+  onTransitionCancel?: (e: TransitionEvent & { target: Target }) => void;
+  // Load
+  onLoad?: (e: Event & { target: Target }) => void;
+  onError?: (e: Event & { target: Target }) => void;
+  onAbort?: (e: Event & { target: Target }) => void;
+  // Misc
+  onResize?: (e: UIEvent & { target: Target }) => void;
+  onBeforeInput?: (e: InputEvent & { target: Target }) => void;
+  onCompositionStart?: (e: CompositionEvent & { target: Target }) => void;
+  onCompositionUpdate?: (e: CompositionEvent & { target: Target }) => void;
+  onCompositionEnd?: (e: CompositionEvent & { target: Target }) => void;
+}
+
+// ── Base HTML attributes ──────────────────────────────────────────────────────
+
+export interface HTMLAttributes<
+  Target = HTMLElement,
+> extends DOMEventHandlers<Target> {
+  /** Child nodes passed between JSX tags. */
+  children?: Child;
+  /** Reconciliation key for list rendering. */
+  key?: string | number;
+  /** Callback ref — called with the DOM element after it is inserted into the parent. */
+  ref?: (el: Element) => void;
+  // Global HTML attributes
+  id?: Reactive<string>;
+  class?: Reactive<string>;
+  className?: Reactive<string>;
+  style?: Reactive<string | CSSProperties>;
+  title?: Reactive<string>;
+  lang?: Reactive<string>;
+  dir?: Reactive<"ltr" | "rtl" | "auto">;
+  tabIndex?: Reactive<number>;
+  hidden?: Reactive<boolean>;
+  draggable?: Reactive<boolean | "true" | "false">;
+  spellCheck?: Reactive<boolean>;
+  translate?: Reactive<"yes" | "no">;
+  contentEditable?: Reactive<
+    boolean | "true" | "false" | "inherit" | "plaintext-only"
+  >;
+  slot?: Reactive<string>;
+  part?: Reactive<string>;
+  exportparts?: Reactive<string>;
+  // ARIA
+  role?: Reactive<string>;
+  "aria-label"?: Reactive<string>;
+  "aria-labelledby"?: Reactive<string>;
+  "aria-describedby"?: Reactive<string>;
+  "aria-details"?: Reactive<string>;
+  "aria-hidden"?: Reactive<boolean | "true" | "false">;
+  "aria-expanded"?: Reactive<boolean | "true" | "false">;
+  "aria-checked"?: Reactive<boolean | "true" | "false" | "mixed">;
+  "aria-selected"?: Reactive<boolean | "true" | "false">;
+  "aria-disabled"?: Reactive<boolean | "true" | "false">;
+  "aria-required"?: Reactive<boolean | "true" | "false">;
+  "aria-readonly"?: Reactive<boolean | "true" | "false">;
+  "aria-invalid"?: Reactive<
+    boolean | "true" | "false" | "grammar" | "spelling"
+  >;
+  "aria-current"?: Reactive<
+    boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"
+  >;
+  "aria-live"?: Reactive<"off" | "assertive" | "polite">;
+  "aria-atomic"?: Reactive<boolean | "true" | "false">;
+  "aria-relevant"?: Reactive<
+    "additions" | "additions text" | "all" | "removals" | "text"
+  >;
+  "aria-busy"?: Reactive<boolean | "true" | "false">;
+  "aria-controls"?: Reactive<string>;
+  "aria-owns"?: Reactive<string>;
+  "aria-flowto"?: Reactive<string>;
+  "aria-activedescendant"?: Reactive<string>;
+  "aria-colcount"?: Reactive<number>;
+  "aria-colindex"?: Reactive<number>;
+  "aria-colspan"?: Reactive<number>;
+  "aria-rowcount"?: Reactive<number>;
+  "aria-rowindex"?: Reactive<number>;
+  "aria-rowspan"?: Reactive<number>;
+  "aria-posinset"?: Reactive<number>;
+  "aria-setsize"?: Reactive<number>;
+  "aria-level"?: Reactive<number>;
+  "aria-multiline"?: Reactive<boolean | "true" | "false">;
+  "aria-multiselectable"?: Reactive<boolean | "true" | "false">;
+  "aria-orientation"?: Reactive<"horizontal" | "vertical">;
+  "aria-haspopup"?: Reactive<
+    boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog"
+  >;
+  "aria-sort"?: Reactive<"none" | "ascending" | "descending" | "other">;
+  "aria-valuemin"?: Reactive<number>;
+  "aria-valuemax"?: Reactive<number>;
+  "aria-valuenow"?: Reactive<number>;
+  "aria-valuetext"?: Reactive<string>;
+  "aria-autocomplete"?: Reactive<"none" | "inline" | "list" | "both">;
+  "aria-keyshortcuts"?: Reactive<string>;
+  "aria-roledescription"?: Reactive<string>;
+  "aria-placeholder"?: Reactive<string>;
+  // data-* catch-all
+  [key: `data-${string}`]: Reactive<string | number | boolean | undefined>;
+}
+
+// ── Element-specific attributes ───────────────────────────────────────────────
+
+export interface AnchorAttributes extends HTMLAttributes<HTMLAnchorElement> {
+  href?: Reactive<string>;
+  target?: Reactive<"_blank" | "_self" | "_parent" | "_top" | (string & {})>;
+  rel?: Reactive<string>;
+  download?: Reactive<string | boolean>;
+  hrefLang?: Reactive<string>;
+  type?: Reactive<string>;
+  ping?: Reactive<string>;
+  referrerPolicy?: Reactive<ReferrerPolicy>;
+}
+
+export interface ButtonAttributes extends HTMLAttributes<HTMLButtonElement> {
+  type?: Reactive<"button" | "submit" | "reset">;
+  disabled?: Reactive<boolean>;
+  name?: Reactive<string>;
+  value?: Reactive<string>;
+  form?: Reactive<string>;
+  formAction?: Reactive<string>;
+  formMethod?: Reactive<"get" | "post">;
+  formEncType?: Reactive<string>;
+  formNoValidate?: Reactive<boolean>;
+  formTarget?: Reactive<string>;
+  autoFocus?: Reactive<boolean>;
+  popoverTarget?: Reactive<string>;
+  popoverTargetAction?: Reactive<"show" | "hide" | "toggle">;
+}
+
+export interface InputAttributes extends HTMLAttributes<HTMLInputElement> {
+  type?: Reactive<
+    | "text"
+    | "password"
+    | "email"
+    | "number"
+    | "tel"
+    | "url"
+    | "search"
+    | "date"
+    | "time"
+    | "datetime-local"
+    | "month"
+    | "week"
+    | "color"
+    | "file"
+    | "checkbox"
+    | "radio"
+    | "range"
+    | "hidden"
+    | "submit"
+    | "reset"
+    | "button"
+    | "image"
+  >;
+  value?: Reactive<string | number>;
+  defaultValue?: Reactive<string | number>;
+  checked?: Reactive<boolean>;
+  defaultChecked?: Reactive<boolean>;
+  placeholder?: Reactive<string>;
+  disabled?: Reactive<boolean>;
+  readOnly?: Reactive<boolean>;
+  required?: Reactive<boolean>;
+  multiple?: Reactive<boolean>;
+  min?: Reactive<string | number>;
+  max?: Reactive<string | number>;
+  step?: Reactive<string | number>;
+  minLength?: Reactive<number>;
+  maxLength?: Reactive<number>;
+  accept?: Reactive<string>;
+  autoComplete?: Reactive<string>;
+  autoFocus?: Reactive<boolean>;
+  name?: Reactive<string>;
+  pattern?: Reactive<string>;
+  size?: Reactive<number>;
+  src?: Reactive<string>;
+  width?: Reactive<number | string>;
+  height?: Reactive<number | string>;
+  list?: Reactive<string>;
+  form?: Reactive<string>;
+  capture?: Reactive<"user" | "environment">;
+  indeterminate?: Reactive<boolean>;
+}
+
+export interface SelectAttributes extends HTMLAttributes<HTMLSelectElement> {
+  value?: Reactive<string | number | string[]>;
+  defaultValue?: Reactive<string | number | string[]>;
+  disabled?: Reactive<boolean>;
+  multiple?: Reactive<boolean>;
+  name?: Reactive<string>;
+  required?: Reactive<boolean>;
+  size?: Reactive<number>;
+  autoFocus?: Reactive<boolean>;
+  form?: Reactive<string>;
+}
+
+export interface TextareaAttributes extends HTMLAttributes<HTMLTextAreaElement> {
+  value?: Reactive<string>;
+  defaultValue?: Reactive<string>;
+  disabled?: Reactive<boolean>;
+  readOnly?: Reactive<boolean>;
+  required?: Reactive<boolean>;
+  placeholder?: Reactive<string>;
+  rows?: Reactive<number>;
+  cols?: Reactive<number>;
+  minLength?: Reactive<number>;
+  maxLength?: Reactive<number>;
+  name?: Reactive<string>;
+  wrap?: Reactive<"hard" | "soft">;
+  autoFocus?: Reactive<boolean>;
+  autoComplete?: Reactive<string>;
+  form?: Reactive<string>;
+  spellCheck?: Reactive<boolean>;
+  resize?: Reactive<"none" | "both" | "horizontal" | "vertical">;
+}
+
+export interface FormAttributes extends HTMLAttributes<HTMLFormElement> {
+  action?: Reactive<string>;
+  method?: Reactive<"get" | "post" | "dialog">;
+  encType?: Reactive<string>;
+  noValidate?: Reactive<boolean>;
+  target?: Reactive<string>;
+  name?: Reactive<string>;
+  autoComplete?: Reactive<"on" | "off">;
+}
+
+export interface LabelAttributes extends HTMLAttributes<HTMLLabelElement> {
+  for?: Reactive<string>;
+  htmlFor?: Reactive<string>;
+  form?: Reactive<string>;
+}
+
+export interface FieldsetAttributes extends HTMLAttributes<HTMLFieldSetElement> {
+  disabled?: Reactive<boolean>;
+  name?: Reactive<string>;
+  form?: Reactive<string>;
+}
+
+export interface OptionAttributes extends HTMLAttributes<HTMLOptionElement> {
+  value?: Reactive<string | number>;
+  selected?: Reactive<boolean>;
+  disabled?: Reactive<boolean>;
+  label?: Reactive<string>;
+}
+
+export interface OptGroupAttributes extends HTMLAttributes<HTMLOptGroupElement> {
+  label?: Reactive<string>;
+  disabled?: Reactive<boolean>;
+}
+
+export interface ImgAttributes extends HTMLAttributes<HTMLImageElement> {
+  src?: Reactive<string>;
+  alt?: Reactive<string>;
+  width?: Reactive<number | string>;
+  height?: Reactive<number | string>;
+  loading?: Reactive<"eager" | "lazy">;
+  decoding?: Reactive<"auto" | "async" | "sync">;
+  crossOrigin?: Reactive<"anonymous" | "use-credentials">;
+  srcSet?: Reactive<string>;
+  sizes?: Reactive<string>;
+  referrerPolicy?: Reactive<ReferrerPolicy>;
+  fetchPriority?: Reactive<"high" | "low" | "auto">;
+  isMap?: Reactive<boolean>;
+  useMap?: Reactive<string>;
+}
+
+export interface MediaAttributes<
+  Target = HTMLMediaElement,
+> extends HTMLAttributes<Target> {
+  src?: Reactive<string>;
+  autoPlay?: Reactive<boolean>;
+  controls?: Reactive<boolean>;
+  loop?: Reactive<boolean>;
+  muted?: Reactive<boolean>;
+  preload?: Reactive<"auto" | "metadata" | "none">;
+  crossOrigin?: Reactive<"anonymous" | "use-credentials">;
+  width?: Reactive<number | string>;
+  height?: Reactive<number | string>;
+  onPlay?: (e: Event) => void;
+  onPause?: (e: Event) => void;
+  onEnded?: (e: Event) => void;
+  onTimeUpdate?: (e: Event) => void;
+  onLoadedData?: (e: Event) => void;
+  onLoadedMetadata?: (e: Event) => void;
+  onCanPlay?: (e: Event) => void;
+  onCanPlayThrough?: (e: Event) => void;
+  onVolumeChange?: (e: Event) => void;
+  onSeeked?: (e: Event) => void;
+  onSeeking?: (e: Event) => void;
+  onDurationChange?: (e: Event) => void;
+  onProgress?: (e: Event) => void;
+  onWaiting?: (e: Event) => void;
+  onStalled?: (e: Event) => void;
+  onSuspend?: (e: Event) => void;
+  onRateChange?: (e: Event) => void;
+  onEmptied?: (e: Event) => void;
+}
+
+export interface VideoAttributes extends MediaAttributes<HTMLVideoElement> {
+  poster?: Reactive<string>;
+  playsInline?: Reactive<boolean>;
+}
+
+export interface CanvasAttributes extends HTMLAttributes<HTMLCanvasElement> {
+  width?: Reactive<number | string>;
+  height?: Reactive<number | string>;
+}
+
+export interface IframeAttributes extends HTMLAttributes<HTMLIFrameElement> {
+  src?: Reactive<string>;
+  srcdoc?: Reactive<string>;
+  name?: Reactive<string>;
+  width?: Reactive<number | string>;
+  height?: Reactive<number | string>;
+  allow?: Reactive<string>;
+  allowFullScreen?: Reactive<boolean>;
+  loading?: Reactive<"eager" | "lazy">;
+  sandbox?: Reactive<string>;
+  referrerPolicy?: Reactive<ReferrerPolicy>;
+}
+
+export interface SourceAttributes extends HTMLAttributes<HTMLSourceElement> {
+  src?: Reactive<string>;
+  srcSet?: Reactive<string>;
+  media?: Reactive<string>;
+  type?: Reactive<string>;
+  sizes?: Reactive<string>;
+  width?: Reactive<number | string>;
+  height?: Reactive<number | string>;
+}
+
+export interface TrackAttributes extends HTMLAttributes<HTMLTrackElement> {
+  src?: Reactive<string>;
+  kind?: Reactive<
+    "subtitles" | "captions" | "descriptions" | "chapters" | "metadata"
+  >;
+  srcLang?: Reactive<string>;
+  label?: Reactive<string>;
+  default?: Reactive<boolean>;
+}
+
+export interface LinkAttributes extends HTMLAttributes<HTMLLinkElement> {
+  href?: Reactive<string>;
+  rel?: Reactive<string>;
+  type?: Reactive<string>;
+  media?: Reactive<string>;
+  crossOrigin?: Reactive<"anonymous" | "use-credentials">;
+  as?: Reactive<string>;
+  integrity?: Reactive<string>;
+  hrefLang?: Reactive<string>;
+  sizes?: Reactive<string>;
+  fetchPriority?: Reactive<"high" | "low" | "auto">;
+}
+
+export interface MetaAttributes extends HTMLAttributes<HTMLMetaElement> {
+  name?: Reactive<string>;
+  content?: Reactive<string>;
+  charset?: Reactive<string>;
+  httpEquiv?: Reactive<string>;
+  property?: Reactive<string>;
+}
+
+export interface ScriptAttributes extends HTMLAttributes<HTMLScriptElement> {
+  src?: Reactive<string>;
+  type?: Reactive<string>;
+  async?: Reactive<boolean>;
+  defer?: Reactive<boolean>;
+  crossOrigin?: Reactive<"anonymous" | "use-credentials">;
+  integrity?: Reactive<string>;
+  noModule?: Reactive<boolean>;
+  nonce?: Reactive<string>;
+}
+
+export interface StyleAttributes extends HTMLAttributes<HTMLStyleElement> {
+  media?: Reactive<string>;
+  nonce?: Reactive<string>;
+  scoped?: Reactive<boolean>;
+}
+
+export interface TableCellAttributes extends HTMLAttributes<HTMLTableCellElement> {
+  colSpan?: Reactive<number>;
+  rowSpan?: Reactive<number>;
+  headers?: Reactive<string>;
+  scope?: Reactive<"col" | "colgroup" | "row" | "rowgroup">;
+  abbr?: Reactive<string>;
+}
+
+export interface ColAttributes extends HTMLAttributes<HTMLTableColElement> {
+  span?: Reactive<number>;
+}
+
+export interface DetailsAttributes extends HTMLAttributes<HTMLDetailsElement> {
+  open?: Reactive<boolean>;
+}
+
+export interface DialogAttributes extends HTMLAttributes<HTMLDialogElement> {
+  open?: Reactive<boolean>;
+  onClose?: (e: Event) => void;
+  onCancel?: (e: Event) => void;
+}
+
+export interface ProgressAttributes extends HTMLAttributes<HTMLProgressElement> {
+  value?: Reactive<number>;
+  max?: Reactive<number>;
+}
+
+export interface MeterAttributes extends HTMLAttributes<HTMLMeterElement> {
+  value?: Reactive<number>;
+  min?: Reactive<number>;
+  max?: Reactive<number>;
+  low?: Reactive<number>;
+  high?: Reactive<number>;
+  optimum?: Reactive<number>;
+}
+
+export interface OutputAttributes extends HTMLAttributes {
+  for?: Reactive<string>;
+  htmlFor?: Reactive<string>;
+  form?: Reactive<string>;
+  name?: Reactive<string>;
+}
+
+export interface ObjectAttributes extends HTMLAttributes {
+  data?: Reactive<string>;
+  type?: Reactive<string>;
+  name?: Reactive<string>;
+  width?: Reactive<number | string>;
+  height?: Reactive<number | string>;
+  form?: Reactive<string>;
+}
+
+export interface BlockquoteAttributes extends HTMLAttributes {
+  cite?: Reactive<string>;
+}
+
+export interface TimeAttributes extends HTMLAttributes<HTMLTimeElement> {
+  dateTime?: Reactive<string>;
+}
+
+export interface QAttributes extends HTMLAttributes {
+  cite?: Reactive<string>;
+}
+
+export interface OlAttributes extends HTMLAttributes<HTMLOListElement> {
+  reversed?: Reactive<boolean>;
+  start?: Reactive<number>;
+  type?: Reactive<"1" | "a" | "A" | "i" | "I">;
+}
+
+export interface LiAttributes extends HTMLAttributes<HTMLLIElement> {
+  value?: Reactive<number>;
+}
+
+// ── SVG attributes ────────────────────────────────────────────────────────────
+
+export interface SVGAttributes<
+  Target = SVGElement,
+> extends DOMEventHandlers<Target> {
+  children?: Child;
+  /** Callback ref — called with the SVG element after it is inserted into the parent. */
+  ref?: (el: Element) => void;
+  // Allow key for reconciliation
+  id?: Reactive<string>;
+  class?: Reactive<string>;
+  className?: Reactive<string>;
+  style?: Reactive<string | CSSProperties>;
+  tabIndex?: Reactive<number>;
+  // Presentation
+  fill?: Reactive<string>;
+  fillOpacity?: Reactive<number | string>;
+  "fill-opacity"?: Reactive<number | string>;
+  fillRule?: Reactive<"nonzero" | "evenodd" | "inherit">;
+  "fill-rule"?: Reactive<"nonzero" | "evenodd" | "inherit">;
+  stroke?: Reactive<string>;
+  strokeWidth?: Reactive<number | string>;
+  "stroke-width"?: Reactive<number | string>;
+  strokeOpacity?: Reactive<number | string>;
+  "stroke-opacity"?: Reactive<number | string>;
+  strokeLinecap?: Reactive<"butt" | "round" | "square">;
+  "stroke-linecap"?: Reactive<"butt" | "round" | "square">;
+  strokeLinejoin?: Reactive<
+    "arcs" | "bevel" | "miter" | "miter-clip" | "round"
+  >;
+  "stroke-linejoin"?: Reactive<
+    "arcs" | "bevel" | "miter" | "miter-clip" | "round"
+  >;
+  strokeDasharray?: Reactive<string | number>;
+  "stroke-dasharray"?: Reactive<string | number>;
+  strokeDashoffset?: Reactive<string | number>;
+  "stroke-dashoffset"?: Reactive<string | number>;
+  opacity?: Reactive<number | string>;
+  // Geometry
+  x?: Reactive<number | string>;
+  y?: Reactive<number | string>;
+  x1?: Reactive<number | string>;
+  y1?: Reactive<number | string>;
+  x2?: Reactive<number | string>;
+  y2?: Reactive<number | string>;
+  cx?: Reactive<number | string>;
+  cy?: Reactive<number | string>;
+  r?: Reactive<number | string>;
+  rx?: Reactive<number | string>;
+  ry?: Reactive<number | string>;
+  d?: Reactive<string>;
+  points?: Reactive<string>;
+  width?: Reactive<number | string>;
+  height?: Reactive<number | string>;
+  // Transform / layout
+  transform?: Reactive<string>;
+  viewBox?: Reactive<string>;
+  preserveAspectRatio?: Reactive<string>;
+  // Text
+  "text-anchor"?: Reactive<"start" | "middle" | "end">;
+  textAnchor?: Reactive<"start" | "middle" | "end">;
+  "dominant-baseline"?: Reactive<string>;
+  dominantBaseline?: Reactive<string>;
+  "font-size"?: Reactive<string | number>;
+  fontSize?: Reactive<string | number>;
+  "font-family"?: Reactive<string>;
+  fontFamily?: Reactive<string>;
+  "font-weight"?: Reactive<string | number>;
+  fontWeight?: Reactive<string | number>;
+  "font-style"?: Reactive<string>;
+  fontStyle?: Reactive<string>;
+  // Misc
+  mask?: Reactive<string>;
+  "clip-path"?: Reactive<string>;
+  clipPath?: Reactive<string>;
+  filter?: Reactive<string>;
+  href?: Reactive<string>;
+  "xlink:href"?: Reactive<string>;
+  xmlns?: string;
+  [key: `data-${string}`]: Reactive<string | number | boolean | undefined>;
+}
+
+export interface SVGSvgAttributes extends SVGAttributes<SVGSVGElement> {
+  xmlns?: string;
+  version?: Reactive<string>;
+}
+
+export interface SVGStopAttributes extends SVGAttributes<SVGStopElement> {
+  offset?: Reactive<string | number>;
+  "stop-color"?: Reactive<string>;
+  stopColor?: Reactive<string>;
+  "stop-opacity"?: Reactive<number | string>;
+  stopOpacity?: Reactive<number | string>;
+}
+
+// ── Intrinsic elements map (defined once, shared by module and global JSX) ────
+
+export interface IntrinsicElementsMap {
+  // ── Content sectioning ──────────────────────────────────────────────────
+  div: HTMLAttributes;
+  span: HTMLAttributes;
+  p: HTMLAttributes;
+  h1: HTMLAttributes;
+  h2: HTMLAttributes;
+  h3: HTMLAttributes;
+  h4: HTMLAttributes;
+  h5: HTMLAttributes;
+  h6: HTMLAttributes;
+  header: HTMLAttributes;
+  footer: HTMLAttributes;
+  main: HTMLAttributes;
+  nav: HTMLAttributes;
+  aside: HTMLAttributes;
+  article: HTMLAttributes;
+  section: HTMLAttributes;
+  address: HTMLAttributes;
+  hgroup: HTMLAttributes;
+  search: HTMLAttributes;
+  // ── Text content ────────────────────────────────────────────────────────
+  ul: HTMLAttributes;
+  ol: OlAttributes;
+  li: LiAttributes;
+  dl: HTMLAttributes;
+  dt: HTMLAttributes;
+  dd: HTMLAttributes;
+  figure: HTMLAttributes;
+  figcaption: HTMLAttributes;
+  hr: HTMLAttributes;
+  pre: HTMLAttributes;
+  blockquote: BlockquoteAttributes;
+  // ── Inline text ─────────────────────────────────────────────────────────
+  a: AnchorAttributes;
+  abbr: HTMLAttributes;
+  b: HTMLAttributes;
+  bdi: HTMLAttributes;
+  bdo: HTMLAttributes;
+  br: HTMLAttributes;
+  cite: HTMLAttributes;
+  code: HTMLAttributes;
+  data: HTMLAttributes;
+  dfn: HTMLAttributes;
+  em: HTMLAttributes;
+  i: HTMLAttributes;
+  kbd: HTMLAttributes;
+  mark: HTMLAttributes;
+  q: QAttributes;
+  rp: HTMLAttributes;
+  rt: HTMLAttributes;
+  ruby: HTMLAttributes;
+  s: HTMLAttributes;
+  samp: HTMLAttributes;
+  small: HTMLAttributes;
+  strong: HTMLAttributes;
+  sub: HTMLAttributes;
+  sup: HTMLAttributes;
+  time: TimeAttributes;
+  u: HTMLAttributes;
+  var: HTMLAttributes;
+  wbr: HTMLAttributes;
+  // ── Forms ────────────────────────────────────────────────────────────────
+  form: FormAttributes;
+  input: InputAttributes;
+  button: ButtonAttributes;
+  select: SelectAttributes;
+  textarea: TextareaAttributes;
+  label: LabelAttributes;
+  fieldset: FieldsetAttributes;
+  legend: HTMLAttributes;
+  datalist: HTMLAttributes;
+  optgroup: OptGroupAttributes;
+  option: OptionAttributes;
+  output: OutputAttributes;
+  progress: ProgressAttributes;
+  meter: MeterAttributes;
+  // ── Interactive ──────────────────────────────────────────────────────────
+  details: DetailsAttributes;
+  summary: HTMLAttributes;
+  dialog: DialogAttributes;
+  menu: HTMLAttributes;
+  // ── Embedded content ─────────────────────────────────────────────────────
+  img: ImgAttributes;
+  picture: HTMLAttributes;
+  source: SourceAttributes;
+  iframe: IframeAttributes;
+  embed: HTMLAttributes;
+  object: ObjectAttributes;
+  map: HTMLAttributes;
+  area: HTMLAttributes;
+  canvas: CanvasAttributes;
+  // ── Media ────────────────────────────────────────────────────────────────
+  audio: MediaAttributes;
+  video: VideoAttributes;
+  track: TrackAttributes;
+  // ── Scripting ────────────────────────────────────────────────────────────
+  script: ScriptAttributes;
+  noscript: HTMLAttributes;
+  template: HTMLAttributes;
+  slot: HTMLAttributes;
+  // ── Table ────────────────────────────────────────────────────────────────
+  table: HTMLAttributes;
+  caption: HTMLAttributes;
+  colgroup: HTMLAttributes;
+  col: ColAttributes;
+  thead: HTMLAttributes;
+  tbody: HTMLAttributes;
+  tfoot: HTMLAttributes;
+  tr: HTMLAttributes;
+  td: TableCellAttributes;
+  th: TableCellAttributes;
+  // ── Metadata ─────────────────────────────────────────────────────────────
+  head: HTMLAttributes;
+  title: HTMLAttributes;
+  base: HTMLAttributes;
+  link: LinkAttributes;
+  meta: MetaAttributes;
+  style: StyleAttributes;
+  // ── Root ─────────────────────────────────────────────────────────────────
+  html: HTMLAttributes;
+  body: HTMLAttributes;
+  // ── SVG ──────────────────────────────────────────────────────────────────
+  svg: SVGSvgAttributes;
+  path: SVGAttributes;
+  circle: SVGAttributes;
+  rect: SVGAttributes;
+  ellipse: SVGAttributes;
+  line: SVGAttributes;
+  polyline: SVGAttributes;
+  polygon: SVGAttributes;
+  text: SVGAttributes;
+  tspan: SVGAttributes;
+  g: SVGAttributes;
+  defs: SVGAttributes;
+  use: SVGAttributes;
+  symbol: SVGAttributes;
+  marker: SVGAttributes;
+  clipPath: SVGAttributes;
+  mask: SVGAttributes;
+  pattern: SVGAttributes;
+  linearGradient: SVGAttributes;
+  radialGradient: SVGAttributes;
+  stop: SVGStopAttributes;
+  image: SVGAttributes;
+  filter: SVGAttributes;
+  feBlend: SVGAttributes;
+  feColorMatrix: SVGAttributes;
+  feComponentTransfer: SVGAttributes;
+  feComposite: SVGAttributes;
+  feConvolveMatrix: SVGAttributes;
+  feDiffuseLighting: SVGAttributes;
+  feDisplacementMap: SVGAttributes;
+  feFlood: SVGAttributes;
+  feGaussianBlur: SVGAttributes;
+  feImage: SVGAttributes;
+  feMerge: SVGAttributes;
+  feMorphology: SVGAttributes;
+  feOffset: SVGAttributes;
+  feSpecularLighting: SVGAttributes;
+  feTile: SVGAttributes;
+  feTurbulence: SVGAttributes;
+  foreignObject: SVGAttributes;
+  animate: SVGAttributes;
+  animateMotion: SVGAttributes;
+  animateTransform: SVGAttributes;
+  mpath: SVGAttributes;
+  set: SVGAttributes;
+}
+
+export interface UnknownElementsMap extends IntrinsicElementsMap {
+  [key: string | symbol]: TreeNodeProps;
+}
+
+// ── Global ambient declarations ───────────────────────────────────────────────
+
+declare global {
+  export namespace JSX {
+    export type Element = any;
+
+    /** Tells TypeScript which prop holds children. */
+    export interface ElementChildrenAttribute {
+      children: unknown;
+    }
+
+    export interface IntrinsicElements extends UnknownElementsMap {}
+
+    export type IntrinsicAttributes =
+      IntrinsicElements[keyof IntrinsicElements];
+    export type Attributes = IntrinsicElements[keyof IntrinsicElements];
+
+    export type ElementType =
+      | keyof IntrinsicElements
+      | Component
+      | null
+      | undefined
+      | false
+      | true
+      | boolean
+      | string
+      | (string & {})
+      | string[]
+      | (string & {})[]
+      | {};
+  }
+
+  export var React: typeof createNode;
+  export var ds_jsx: typeof createNode;
+  export var Fragment: typeof createNode;
+}
+
+globalThis.ds_jsx = createNode;
+globalThis.React = createNode;
+globalThis.Fragment = createNode;
+
+export {};