sibujs 4.6.0 → 4.7.0

package/dist/index.d.cts

@@ -1,5 +1,7 @@
-import { N as NodeChild, a as NodeChildren, T as TagProps, D as DerivedAccessor } from './tagFactory-DFstCLQV.cjs';
-export { b as Dispose, S as SVG_NS, d as derived, t as tagFactory } from './tagFactory-DFstCLQV.cjs';
+import { a as NodeChild, C as Component, N as NodeChildren } from './types-CJFViL6Q.cjs';
+export { D as Dispose } from './types-CJFViL6Q.cjs';
+import { T as TagProps, a as TagFunction, D as DerivedAccessor } from './tagFactory-8qL9LCIx.cjs';
+export { S as SVG_NS, b as StyleMap, c as StyleObject, d as TagEventHandlers, e as derived, t as tagFactory } from './tagFactory-8qL9LCIx.cjs';
 import { A as Accessor } from './signal-EotCj4hS.cjs';
 export { D as DisposableAccessor, E as ExternalSource, S as SignalOptions, e as external, s as signal } from './signal-EotCj4hS.cjs';
 export { T as TrustedHTML, t as trustHTML } from './ssr-Bli9XRW5.cjs';
@@ -603,7 +605,6 @@ declare function replaceChildrenSafely(parent: ParentNode, ...next: Node[]): voi
  */
 declare function checkLeaks(warnThreshold?: number): number;
 
-type Component$1 = () => HTMLElement;
 /**
  * Register a component by name for dynamic resolution.
  *
@@ -616,7 +617,7 @@ type Component$1 = () => HTMLElement;
  * registerComponent("AdminPanel", AdminPanel);
  * ```
  */
-declare function registerComponent(name: string, component: Component$1): void;
+declare function registerComponent(name: string, component: Component): void;
 /**
  * Unregister a previously registered component.
  */
@@ -625,8 +626,12 @@ declare function unregisterComponent(name: string): void;
  * Resolve and render a dynamically registered component by name.
  * Returns a placeholder if the component is not found.
  *
+ * The registry is keyed by name, so it cannot know which root a component
+ * renders: `El` states it, like `querySelector<E>()`. It defaults to
+ * `HTMLElement`; pass `Element` (or `SVGSVGElement`, …) for an SVG component.
+ *
  * @param name Component name to resolve
- * @returns The rendered HTMLElement or a fallback
+ * @returns The rendered root element or a fallback
  *
  * @example
  * ```ts
@@ -634,7 +639,7 @@ declare function unregisterComponent(name: string): void;
  * div([resolveComponent("Widget")]);
  * ```
  */
-declare function resolveComponent(name: string): HTMLElement;
+declare function resolveComponent<El extends Element = HTMLElement>(name: string): El;
 /**
  * Dynamic component that reactively switches between components
  * based on a reactive getter returning a component name or function.
@@ -650,7 +655,7 @@ declare function resolveComponent(name: string): HTMLElement;
  * setView("grid"); // Swaps to registered "grid" component
  * ```
  */
-declare function DynamicComponent(is: () => string | Component$1): HTMLElement;
+declare function DynamicComponent(is: () => string | Component): HTMLDivElement;
 
 /**
  * Renders a list of nodes efficiently with key-based diffing and
@@ -704,12 +709,17 @@ declare function each<T>(getArray: () => T[], render: (item: () => T, index: ()
  * Fragment groups multiple nodes without adding a wrapper DOM element.
  * Returns a DocumentFragment that can be appended to any parent.
  *
+ * A function child is reactive, exactly as it is inside a tag factory: it is
+ * rendered after a placeholder comment and re-rendered when the signals it reads
+ * change. The binding is owned by that placeholder, so disposing the parent the
+ * fragment was appended to (or unmounting a mounted fragment) stops it.
+ *
  * @example
  * ```ts
  * div([
  *   Fragment([
  *     p("First"),
- *     p("Second"),
+ *     () => `Count: ${count()}`,
  *   ])
  * ]);
  * ```
@@ -733,9 +743,9 @@ declare function Fragment(nodes: NodeChildren[]): DocumentFragment;
 declare function html(strings: TemplateStringsArray, ...values: unknown[]): Element;
 
 type reactive<T> = T | (() => T);
-interface AnchorProps extends TagProps {
+interface AnchorProps extends TagProps<HTMLAnchorElement> {
     href?: reactive<string>;
-    target?: "_self" | "_blank" | "_parent" | "_top" | (string & {});
+    target?: reactive<"_self" | "_blank" | "_parent" | "_top" | (string & {})>;
     rel?: reactive<string>;
     download?: reactive<string | boolean>;
     hreflang?: reactive<string>;
@@ -743,8 +753,8 @@ interface AnchorProps extends TagProps {
     ping?: reactive<string>;
 }
 type InputType = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
-interface InputProps extends TagProps {
-    type?: InputType | (string & {});
+interface InputProps extends TagProps<HTMLInputElement> {
+    type?: reactive<InputType | (string & {})>;
     name?: reactive<string>;
     value?: reactive<string | number>;
     placeholder?: reactive<string>;
@@ -767,7 +777,7 @@ interface InputProps extends TagProps {
     list?: reactive<string>;
     inputmode?: reactive<"none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url">;
 }
-interface ImgProps extends TagProps {
+interface ImgProps extends TagProps<HTMLImageElement> {
     src?: reactive<string>;
     alt?: reactive<string>;
     width?: reactive<number | string>;
@@ -779,7 +789,7 @@ interface ImgProps extends TagProps {
     crossorigin?: reactive<"anonymous" | "use-credentials">;
     referrerpolicy?: reactive<string>;
 }
-interface ButtonProps extends TagProps {
+interface ButtonProps extends TagProps<HTMLButtonElement> {
     type?: reactive<"button" | "submit" | "reset">;
     name?: reactive<string>;
     value?: reactive<string>;
@@ -792,7 +802,7 @@ interface ButtonProps extends TagProps {
     formtarget?: reactive<string>;
     autofocus?: reactive<boolean>;
 }
-interface FormProps extends TagProps {
+interface FormProps extends TagProps<HTMLFormElement> {
     action?: reactive<string>;
     method?: reactive<"get" | "post" | "dialog">;
     enctype?: reactive<"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain">;
@@ -802,7 +812,7 @@ interface FormProps extends TagProps {
     autocomplete?: reactive<"on" | "off">;
     acceptcharset?: reactive<string>;
 }
-interface SelectProps extends TagProps {
+interface SelectProps extends TagProps<HTMLSelectElement> {
     name?: reactive<string>;
     value?: reactive<string>;
     disabled?: reactive<boolean>;
@@ -813,7 +823,7 @@ interface SelectProps extends TagProps {
     autofocus?: reactive<boolean>;
     form?: reactive<string>;
 }
-interface TextareaProps extends TagProps {
+interface TextareaProps extends TagProps<HTMLTextAreaElement> {
     name?: reactive<string>;
     value?: reactive<string>;
     placeholder?: reactive<string>;
@@ -830,17 +840,17 @@ interface TextareaProps extends TagProps {
     form?: reactive<string>;
     spellcheck?: reactive<boolean>;
 }
-interface LabelProps extends TagProps {
+interface LabelProps extends TagProps<HTMLLabelElement> {
     for?: reactive<string>;
     form?: reactive<string>;
 }
-interface OptionProps extends TagProps {
+interface OptionProps extends TagProps<HTMLOptionElement> {
     value?: reactive<string | number>;
     selected?: reactive<boolean>;
     disabled?: reactive<boolean>;
     label?: reactive<string>;
 }
-interface MediaProps extends TagProps {
+interface MediaProps<El extends HTMLMediaElement = HTMLMediaElement> extends TagProps<El> {
     src?: reactive<string>;
     autoplay?: reactive<boolean>;
     controls?: reactive<boolean>;
@@ -849,152 +859,151 @@ interface MediaProps extends TagProps {
     preload?: reactive<"none" | "metadata" | "auto">;
     crossorigin?: reactive<"anonymous" | "use-credentials">;
 }
-interface VideoProps extends MediaProps {
+interface VideoProps extends MediaProps<HTMLVideoElement> {
     poster?: reactive<string>;
     width?: reactive<number | string>;
     height?: reactive<number | string>;
     playsinline?: reactive<boolean>;
 }
-type AudioProps = MediaProps;
+type AudioProps = MediaProps<HTMLAudioElement>;
+type TypedTagFunction<Props extends TagProps<El>, El extends Element> = TagFunction<El, Props>;
 
-type TypedTagFunction<Props extends TagProps, El extends Element> = (first?: Props | NodeChildren, second?: NodeChildren) => El;
-
-declare const head: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const body: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const title: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const div: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const span: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const section: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const article: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const header: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const footer: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const nav: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const main: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const aside: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const address: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const p: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h1: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h2: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h3: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h4: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h5: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h6: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const blockquote: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const dd: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const dl: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const dt: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const figcaption: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const figure: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const hr: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const li: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const ol: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const ul: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const pre: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const head: TagFunction<HTMLHeadElement, TagProps<HTMLHeadElement>>;
+declare const body: TagFunction<HTMLBodyElement, TagProps<HTMLBodyElement>>;
+declare const title: TagFunction<HTMLTitleElement, TagProps<HTMLTitleElement>>;
+declare const div: TagFunction<HTMLDivElement, TagProps<HTMLDivElement>>;
+declare const span: TagFunction<HTMLSpanElement, TagProps<HTMLSpanElement>>;
+declare const section: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const article: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const header: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const footer: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const nav: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const main: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const aside: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const address: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const p: TagFunction<HTMLParagraphElement, TagProps<HTMLParagraphElement>>;
+declare const h1: TagFunction<HTMLHeadingElement, TagProps<HTMLHeadingElement>>;
+declare const h2: TagFunction<HTMLHeadingElement, TagProps<HTMLHeadingElement>>;
+declare const h3: TagFunction<HTMLHeadingElement, TagProps<HTMLHeadingElement>>;
+declare const h4: TagFunction<HTMLHeadingElement, TagProps<HTMLHeadingElement>>;
+declare const h5: TagFunction<HTMLHeadingElement, TagProps<HTMLHeadingElement>>;
+declare const h6: TagFunction<HTMLHeadingElement, TagProps<HTMLHeadingElement>>;
+declare const blockquote: TagFunction<HTMLQuoteElement, TagProps<HTMLQuoteElement>>;
+declare const dd: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const dl: TagFunction<HTMLDListElement, TagProps<HTMLDListElement>>;
+declare const dt: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const figcaption: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const figure: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const hr: TagFunction<HTMLHRElement, TagProps<HTMLHRElement>>;
+declare const li: TagFunction<HTMLLIElement, TagProps<HTMLLIElement>>;
+declare const ol: TagFunction<HTMLOListElement, TagProps<HTMLOListElement>>;
+declare const ul: TagFunction<HTMLUListElement, TagProps<HTMLUListElement>>;
+declare const pre: TagFunction<HTMLPreElement, TagProps<HTMLPreElement>>;
 declare const a: TypedTagFunction<AnchorProps, HTMLAnchorElement>;
-declare const abbr: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const b: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const bdi: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const bdo: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const br: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const cite: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const code: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const data: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const dfn: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const em: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const i: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const kbd: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const mark: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const q: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const rp: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const rt: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const ruby: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const s: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const samp: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const small: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const strong: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const sub: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const sup: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const time: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const u: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const var_: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const area: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const abbr: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const b: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const bdi: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const bdo: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const br: TagFunction<HTMLBRElement, TagProps<HTMLBRElement>>;
+declare const cite: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const code: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const data: TagFunction<HTMLDataElement, TagProps<HTMLDataElement>>;
+declare const dfn: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const em: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const i: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const kbd: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const mark: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const q: TagFunction<HTMLQuoteElement, TagProps<HTMLQuoteElement>>;
+declare const rp: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const rt: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const ruby: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const s: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const samp: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const small: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const strong: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const sub: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const sup: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const time: TagFunction<HTMLTimeElement, TagProps<HTMLTimeElement>>;
+declare const u: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const var_: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const area: TagFunction<HTMLAreaElement, TagProps<HTMLAreaElement>>;
 declare const audio: TypedTagFunction<AudioProps, HTMLAudioElement>;
 declare const img: TypedTagFunction<ImgProps, HTMLImageElement>;
-declare const map: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const track$1: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const map: TagFunction<HTMLMapElement, TagProps<HTMLMapElement>>;
+declare const track$1: TagFunction<HTMLTrackElement, TagProps<HTMLTrackElement>>;
 declare const video: TypedTagFunction<VideoProps, HTMLVideoElement>;
-declare const embed: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const iframe: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const object: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const param: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const picture: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const portal: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const source: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const svg: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const math: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const canvas: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const noscript: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const script: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const del: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const ins: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const caption: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const col: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const colgroup: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const table: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const tbody: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const td: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const tfoot: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const th: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const thead: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const tr: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const embed: TagFunction<HTMLEmbedElement, TagProps<HTMLEmbedElement>>;
+declare const iframe: TagFunction<HTMLIFrameElement, TagProps<HTMLIFrameElement>>;
+declare const object: TagFunction<HTMLObjectElement, TagProps<HTMLObjectElement>>;
+declare const param: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const picture: TagFunction<HTMLPictureElement, TagProps<HTMLPictureElement>>;
+declare const portal: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const source: TagFunction<HTMLSourceElement, TagProps<HTMLSourceElement>>;
+declare const svg: TagFunction<SVGSVGElement, TagProps<SVGSVGElement>>;
+declare const math: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const canvas: TagFunction<HTMLCanvasElement, TagProps<HTMLCanvasElement>>;
+declare const noscript: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const script: TagFunction<HTMLScriptElement, TagProps<HTMLScriptElement>>;
+declare const del: TagFunction<HTMLModElement, TagProps<HTMLModElement>>;
+declare const ins: TagFunction<HTMLModElement, TagProps<HTMLModElement>>;
+declare const caption: TagFunction<HTMLTableCaptionElement, TagProps<HTMLTableCaptionElement>>;
+declare const col: TagFunction<HTMLTableColElement, TagProps<HTMLTableColElement>>;
+declare const colgroup: TagFunction<HTMLTableColElement, TagProps<HTMLTableColElement>>;
+declare const table: TagFunction<HTMLTableElement, TagProps<HTMLTableElement>>;
+declare const tbody: TagFunction<HTMLTableSectionElement, TagProps<HTMLTableSectionElement>>;
+declare const td: TagFunction<HTMLTableCellElement, TagProps<HTMLTableCellElement>>;
+declare const tfoot: TagFunction<HTMLTableSectionElement, TagProps<HTMLTableSectionElement>>;
+declare const th: TagFunction<HTMLTableCellElement, TagProps<HTMLTableCellElement>>;
+declare const thead: TagFunction<HTMLTableSectionElement, TagProps<HTMLTableSectionElement>>;
+declare const tr: TagFunction<HTMLTableRowElement, TagProps<HTMLTableRowElement>>;
 declare const button: TypedTagFunction<ButtonProps, HTMLButtonElement>;
-declare const datalist: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const fieldset: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const datalist: TagFunction<HTMLDataListElement, TagProps<HTMLDataListElement>>;
+declare const fieldset: TagFunction<HTMLFieldSetElement, TagProps<HTMLFieldSetElement>>;
 declare const form: TypedTagFunction<FormProps, HTMLFormElement>;
 declare const input: TypedTagFunction<InputProps, HTMLInputElement>;
 declare const label: TypedTagFunction<LabelProps, HTMLLabelElement>;
-declare const legend: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const meter: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const optgroup: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const legend: TagFunction<HTMLLegendElement, TagProps<HTMLLegendElement>>;
+declare const meter: TagFunction<HTMLMeterElement, TagProps<HTMLMeterElement>>;
+declare const optgroup: TagFunction<HTMLOptGroupElement, TagProps<HTMLOptGroupElement>>;
 declare const option: TypedTagFunction<OptionProps, HTMLOptionElement>;
-declare const output: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const progress: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const output: TagFunction<HTMLOutputElement, TagProps<HTMLOutputElement>>;
+declare const progress: TagFunction<HTMLProgressElement, TagProps<HTMLProgressElement>>;
 declare const select: TypedTagFunction<SelectProps, HTMLSelectElement>;
 declare const textarea: TypedTagFunction<TextareaProps, HTMLTextAreaElement>;
-declare const details: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const dialog: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const menu: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const summary: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const slot: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const template: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const base: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const link: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const meta: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const style: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const circle: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const ellipse: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const g: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const line: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const path: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const polygon: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const polyline: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const rect: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const text: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const tspan: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const defs: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const clipPath: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const mask: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const pattern: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const linearGradient: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const radialGradient: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const stop: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const use: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const symbol: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const marker: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const center: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const font: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const marquee: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const customElement: (tagName: string) => (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const details: TagFunction<HTMLDetailsElement, TagProps<HTMLDetailsElement>>;
+declare const dialog: TagFunction<HTMLDialogElement, TagProps<HTMLDialogElement>>;
+declare const menu: TagFunction<HTMLMenuElement, TagProps<HTMLMenuElement>>;
+declare const summary: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const slot: TagFunction<HTMLSlotElement, TagProps<HTMLSlotElement>>;
+declare const template: TagFunction<HTMLTemplateElement, TagProps<HTMLTemplateElement>>;
+declare const base: TagFunction<HTMLBaseElement, TagProps<HTMLBaseElement>>;
+declare const link: TagFunction<HTMLLinkElement, TagProps<HTMLLinkElement>>;
+declare const meta: TagFunction<HTMLMetaElement, TagProps<HTMLMetaElement>>;
+declare const style: TagFunction<HTMLStyleElement, TagProps<HTMLStyleElement>>;
+declare const circle: TagFunction<SVGCircleElement, TagProps<SVGCircleElement>>;
+declare const ellipse: TagFunction<SVGEllipseElement, TagProps<SVGEllipseElement>>;
+declare const g: TagFunction<SVGGElement, TagProps<SVGGElement>>;
+declare const line: TagFunction<SVGLineElement, TagProps<SVGLineElement>>;
+declare const path: TagFunction<SVGPathElement, TagProps<SVGPathElement>>;
+declare const polygon: TagFunction<SVGPolygonElement, TagProps<SVGPolygonElement>>;
+declare const polyline: TagFunction<SVGPolylineElement, TagProps<SVGPolylineElement>>;
+declare const rect: TagFunction<SVGRectElement, TagProps<SVGRectElement>>;
+declare const text: TagFunction<SVGTextElement, TagProps<SVGTextElement>>;
+declare const tspan: TagFunction<SVGTSpanElement, TagProps<SVGTSpanElement>>;
+declare const defs: TagFunction<SVGDefsElement, TagProps<SVGDefsElement>>;
+declare const clipPath: TagFunction<SVGClipPathElement, TagProps<SVGClipPathElement>>;
+declare const mask: TagFunction<SVGMaskElement, TagProps<SVGMaskElement>>;
+declare const pattern: TagFunction<SVGPatternElement, TagProps<SVGPatternElement>>;
+declare const linearGradient: TagFunction<SVGLinearGradientElement, TagProps<SVGLinearGradientElement>>;
+declare const radialGradient: TagFunction<SVGRadialGradientElement, TagProps<SVGRadialGradientElement>>;
+declare const stop: TagFunction<SVGStopElement, TagProps<SVGStopElement>>;
+declare const use: TagFunction<SVGUseElement, TagProps<SVGUseElement>>;
+declare const symbol: TagFunction<SVGSymbolElement, TagProps<SVGSymbolElement>>;
+declare const marker: TagFunction<SVGMarkerElement, TagProps<SVGMarkerElement>>;
+declare const center: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const font: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const marquee: TagFunction<HTMLElement, TagProps<HTMLElement>>;
+declare const customElement: (tagName: string) => TagFunction<HTMLElement, TagProps<HTMLElement>>;
 
 /**
  * Options for KeepAlive.
@@ -1044,10 +1053,6 @@ declare function KeepAlive(activeKey: () => string, cases: Record<string, () =>
  * @returns The pending error, or `undefined` when there is none.
  */
 declare function takePendingError(node: Element): Error | undefined;
-type Component = () => HTMLElement;
-type LazyImport = () => Promise<{
-    default: Component;
-}>;
 /**
  * lazy() enables code-splitting by deferring the import of a component
  * until it is first rendered. Returns a wrapper component that shows a
@@ -1067,10 +1072,16 @@ type LazyImport = () => Promise<{
  * LazyDashboard();
  * ```
  *
+ * The returned component renders either the loading container (a `div`) or,
+ * once loaded, the component's own root — its return type is the union, so an
+ * SVG component stays usable without a cast.
+ *
  * @param importFn Dynamic import function returning `{ default: Component }`
  * @returns A component function that lazy-loads on first call
  */
-declare function lazy(importFn: LazyImport): Component;
+declare function lazy<R extends Node = HTMLElement>(importFn: () => Promise<{
+    default: Component<void, R>;
+}>): Component<void, R | HTMLDivElement>;
 /**
  * Suspense provides a fallback UI while lazy or async nodes are loading.
  *
@@ -1084,11 +1095,13 @@ declare function lazy(importFn: LazyImport): Component;
  *
  * @param props.nodes Function that returns the async/lazy component
  * @param props.fallback Function that returns the loading UI
- * @returns An HTMLElement that swaps from fallback to content when ready
+ * @returns A container element that swaps from fallback to content when ready
  */
 interface SuspenseProps {
-    nodes: () => HTMLElement;
-    fallback: () => HTMLElement;
+    /** The content's root must be an element (HTML or SVG): its loading state is read from it. */
+    nodes: () => Element;
+    /** Any node, including a text node or fragment. */
+    fallback: () => Node;
 }
 /**
  * Render `fallback` until the async `nodes` factory resolves, then swap it for
@@ -1102,7 +1115,7 @@ interface SuspenseProps {
  * the fallback are discarded. That is usually harmless (a spinner rarely holds
  * focus) but matters for a skeleton form; see the note on `when`.
  */
-declare function Suspense({ nodes, fallback }: SuspenseProps): HTMLElement;
+declare function Suspense({ nodes, fallback }: SuspenseProps): HTMLDivElement;
 
 /**
  * Lifecycle hooks for SibuJS components.
@@ -1135,18 +1148,18 @@ type CleanupFn = () => void;
  * (if you also use onUnmount, prefer that for explicit cleanup).
  *
  * @param callback Function to run after mount. May return a cleanup function.
- * @param element Optional element to observe; if provided, waits until it's connected.
+ * @param element Optional element to observe (HTML or SVG); if provided, waits until it's connected.
  */
-declare function onMount(callback: () => undefined | CleanupFn, element?: HTMLElement): void;
+declare function onMount(callback: () => undefined | CleanupFn, element?: Element): void;
 /**
  * Runs a callback when the given element is removed from the DOM.
  * Uses a shared MutationObserver to watch for disconnection, plus
  * `registerDisposer` so explicit dispose() paths also trigger the callback.
  *
  * @param callback Function to run on unmount
- * @param element The element to watch for removal
+ * @param element The element to watch for removal (HTML or SVG)
  */
-declare function onUnmount(callback: CleanupFn, element: HTMLElement): void;
+declare function onUnmount(callback: CleanupFn, element: Element): void;
 /**
  * Register a cleanup callback that runs when the given element is disposed.
  * Integrates with `when()`, `match()`, and `each()` which call `dispose()`
@@ -1169,14 +1182,25 @@ declare function onCleanup(callback: CleanupFn, element: Node): void;
 
 /**
  * Mounts a root component into a DOM element.
- * Supports both function components and pre-created HTMLElements.
+ * Supports both function components and pre-created nodes.
+ *
+ * A component function runs as a render transaction: if it throws — or the
+ * append fails — every binding and listener it registered is released before
+ * the error reaches the caller, so a failed mount leaves nothing subscribed.
+ * A pre-built node belongs to its caller and is never rolled back.
+ *
+ * A `DocumentFragment` root (from `Fragment()`) empties itself into the
+ * container, so the mount tracks the range it filled instead: `unmount()`
+ * disposes and removes everything in that range, including nodes a reactive
+ * child rendered after mounting.
  *
- * @param component Component function, or an already-built Element/Node.
+ * @param component Component function (any root node, HTML or SVG element or
+ * fragment), or an already-built Element/Node.
  * @param container Element to mount into.
  * @returns `{ node, unmount }` — the live root node, and a teardown that
  * disposes the tree and removes it.
  */
-declare function mount(component: (() => Element) | Element | Node, container: Element | null): {
+declare function mount(component: Component<void, Node> | Node, container: Element | null): {
     node: Node;
     unmount: () => void;
 };
@@ -1189,7 +1213,8 @@ declare function mount(component: (() => Element) | Element | Node, container: E
  * are properly torn down when the anchor is disposed by `when()`, `match()`,
  * `each()`, or manual `dispose(anchor)`.
  *
- * @param nodes Function that returns the content to render
+ * @param nodes Function that returns the content to render — any element,
+ * HTML or SVG (a `Component` fits)
  * @param target Target DOM element (defaults to document.body)
  * @returns A Comment anchor node in the original position
  *
@@ -1203,7 +1228,7 @@ declare function mount(component: (() => Element) | Element | Node, container: E
  * Portal(() => div("Tooltip"), overlay);
  * ```
  */
-declare function Portal(nodes: () => HTMLElement, target?: HTMLElement): Comment;
+declare function Portal(nodes: () => Element, target?: Element): Comment;
 
 type SlotFn = () => Element | string | number | null | undefined;
 type Slots = Record<string, SlotFn>;
@@ -2196,4 +2221,4 @@ declare const untracked: ReactiveApi["untracked"];
 declare const retrack: ReactiveApi["retrack"];
 declare const setMaxDrainIterations: ReactiveApi["setMaxDrainIterations"];
 
-export { Accessor, type ActionFn, type AnchorProps, type ArrayActions, type AsyncDerivedContext, type AsyncDerivedState, type AudioProps, type ButtonProps, type Context, DerivedAccessor, DynamicComponent, type EachBindings, type EachEventBindings, type EffectBody, type EffectOptions, type EnhanceContext, type EnhanceSetup, ErrorBoundary, type ErrorBoundaryOptions, type ErrorBoundaryProps, ErrorDisplay, type ErrorDisplayProps, type ErrorSeverity, type FormProps, Fragment, type ImgProps, type InputProps, type InputType, type IslandLoader, type IslandRegistration, type IslandStrategy, KeepAlive, type KeepAliveOptions, type LabelProps, type LazyIslandLoader, Loading, type LoadingProps, type LongPressOptions, MAX_DRAIN_TEARDOWNS, type MediaProps, type MountIslandsOptions, NodeChild, NodeChildren, type OnCleanup, type OptionProps, Portal, type Ref, type RuntimeErrorContext, type RuntimeErrorHandler, type RuntimeErrorPhase, type SSRStore, type SelectProps, type SlotFn, type Slots, type StoreActions, Suspense, type SuspenseProps, TagProps, type TextareaProps, type TypedTagFunction, type VideoProps, __resetIdCounter, a, abbr, action, address, area, array, article, aside, asyncDerived, audio, autoResize, b, base, batch, bdi, bdo, bindDynamic, blockquote, body, br, button, canvas, caption, catchError, catchErrorAsync, center, checkLeaks, circle, cite, clickOutside, clipPath, code, col, colgroup, context, copyOnClick, createId, customElement, data, datalist, dd, deepEqual, deepSignal, defer, defs, del, details, dfn, dialog, disableSSR, dispose, div, dl, dt, each, effect, ellipse, em, embed, enableSSR, enhance, enhanceAll, enqueueBatchedSignal, fieldset, figcaption, figure, font, footer, form, g, getAction, getRequestScopedCache, getRuntimeErrorHandler, getSSRStore, getSlot, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, iframe, img, input, ins, isBatching, isSSR, kbd, label, lazy, lazyIsland, legend, li, line, linearGradient, link, longPress, main, map, mark, marker, marquee, mask, match, math, menu, meta, meter, mount, mountIslands, nav, nextTick, noscript, object, ol, on, onCleanup, onMount, onUnmount, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, portal, pre, progress, q, radialGradient, reactiveArray, rect, ref, registerAction, registerComponent, registerDisposer, registerIsland, replaceChildrenSafely, reportDrainRunaway, reportError, resolveComponent, retrack, rp, rt, ruby, runInSSRContext, s, samp, script, section, select, setGlobalErrorHandler, setMaxDrainIterations, setRuntimeErrorHandler, show, slot, small, source, span, stop, store, strict, strictEffect, strong, style, sub, summary, sup, svg, symbol, table, takePendingError, tbody, td, template, text, textarea, tfoot, th, thead, time, title, tr, track$1 as track, transition, trapFocus, tspan, u, ul, unregisterComponent, unregisterDisposer, unregisterIsland, untracked, use, var_, video, watch, when, withSSR, writable };
+export { Accessor, type ActionFn, type AnchorProps, type ArrayActions, type AsyncDerivedContext, type AsyncDerivedState, type AudioProps, type ButtonProps, Component, type Context, DerivedAccessor, DynamicComponent, type EachBindings, type EachEventBindings, type EffectBody, type EffectOptions, type EnhanceContext, type EnhanceSetup, ErrorBoundary, type ErrorBoundaryOptions, type ErrorBoundaryProps, ErrorDisplay, type ErrorDisplayProps, type ErrorSeverity, type FormProps, Fragment, type ImgProps, type InputProps, type InputType, type IslandLoader, type IslandRegistration, type IslandStrategy, KeepAlive, type KeepAliveOptions, type LabelProps, type LazyIslandLoader, Loading, type LoadingProps, type LongPressOptions, MAX_DRAIN_TEARDOWNS, type MediaProps, type MountIslandsOptions, NodeChild, NodeChildren, type OnCleanup, type OptionProps, Portal, type Ref, type RuntimeErrorContext, type RuntimeErrorHandler, type RuntimeErrorPhase, type SSRStore, type SelectProps, type SlotFn, type Slots, type StoreActions, Suspense, type SuspenseProps, TagFunction, TagProps, type TextareaProps, type TypedTagFunction, type VideoProps, __resetIdCounter, a, abbr, action, address, area, array, article, aside, asyncDerived, audio, autoResize, b, base, batch, bdi, bdo, bindDynamic, blockquote, body, br, button, canvas, caption, catchError, catchErrorAsync, center, checkLeaks, circle, cite, clickOutside, clipPath, code, col, colgroup, context, copyOnClick, createId, customElement, data, datalist, dd, deepEqual, deepSignal, defer, defs, del, details, dfn, dialog, disableSSR, dispose, div, dl, dt, each, effect, ellipse, em, embed, enableSSR, enhance, enhanceAll, enqueueBatchedSignal, fieldset, figcaption, figure, font, footer, form, g, getAction, getRequestScopedCache, getRuntimeErrorHandler, getSSRStore, getSlot, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, iframe, img, input, ins, isBatching, isSSR, kbd, label, lazy, lazyIsland, legend, li, line, linearGradient, link, longPress, main, map, mark, marker, marquee, mask, match, math, menu, meta, meter, mount, mountIslands, nav, nextTick, noscript, object, ol, on, onCleanup, onMount, onUnmount, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, portal, pre, progress, q, radialGradient, reactiveArray, rect, ref, registerAction, registerComponent, registerDisposer, registerIsland, replaceChildrenSafely, reportDrainRunaway, reportError, resolveComponent, retrack, rp, rt, ruby, runInSSRContext, s, samp, script, section, select, setGlobalErrorHandler, setMaxDrainIterations, setRuntimeErrorHandler, show, slot, small, source, span, stop, store, strict, strictEffect, strong, style, sub, summary, sup, svg, symbol, table, takePendingError, tbody, td, template, text, textarea, tfoot, th, thead, time, title, tr, track$1 as track, transition, trapFocus, tspan, u, ul, unregisterComponent, unregisterDisposer, unregisterIsland, untracked, use, var_, video, watch, when, withSSR, writable };