elements-kit 0.0.12 → 0.0.14

package/dist/builder/dom.mjs

@@ -1,205 +0,0 @@
-import { builder } from "./index.mjs";
-//#region src/builder/dom.ts
-const a = () => builder(document.createElement("a"));
-const abbr = () => builder(document.createElement("abbr"));
-const address = () => builder(document.createElement("address"));
-const area = () => builder(document.createElement("area"));
-const article = () => builder(document.createElement("article"));
-const aside = () => builder(document.createElement("aside"));
-const audio = () => builder(document.createElement("audio"));
-const b = () => builder(document.createElement("b"));
-const base = () => builder(document.createElement("base"));
-const bdi = () => builder(document.createElement("bdi"));
-const bdo = () => builder(document.createElement("bdo"));
-const blockquote = () => builder(document.createElement("blockquote"));
-const body = () => builder(document.createElement("body"));
-const br = () => builder(document.createElement("br"));
-const button = () => builder(document.createElement("button"));
-const canvas = () => builder(document.createElement("canvas"));
-const caption = () => builder(document.createElement("caption"));
-const cite = () => builder(document.createElement("cite"));
-const code = () => builder(document.createElement("code"));
-const col = () => builder(document.createElement("col"));
-const colgroup = () => builder(document.createElement("colgroup"));
-const data = () => builder(document.createElement("data"));
-const datalist = () => builder(document.createElement("datalist"));
-const dd = () => builder(document.createElement("dd"));
-const del = () => builder(document.createElement("del"));
-const details = () => builder(document.createElement("details"));
-const dfn = () => builder(document.createElement("dfn"));
-const dialog = () => builder(document.createElement("dialog"));
-const div = () => builder(document.createElement("div"));
-const dl = () => builder(document.createElement("dl"));
-const dt = () => builder(document.createElement("dt"));
-const em = () => builder(document.createElement("em"));
-const embed = () => builder(document.createElement("embed"));
-const fieldset = () => builder(document.createElement("fieldset"));
-const figcaption = () => builder(document.createElement("figcaption"));
-const figure = () => builder(document.createElement("figure"));
-const footer = () => builder(document.createElement("footer"));
-const form = () => builder(document.createElement("form"));
-const h1 = () => builder(document.createElement("h1"));
-const h2 = () => builder(document.createElement("h2"));
-const h3 = () => builder(document.createElement("h3"));
-const h4 = () => builder(document.createElement("h4"));
-const h5 = () => builder(document.createElement("h5"));
-const h6 = () => builder(document.createElement("h6"));
-const head = () => builder(document.createElement("head"));
-const header = () => builder(document.createElement("header"));
-const hgroup = () => builder(document.createElement("hgroup"));
-const hr = () => builder(document.createElement("hr"));
-const html = () => builder(document.createElement("html"));
-const i = () => builder(document.createElement("i"));
-const iframe = () => builder(document.createElement("iframe"));
-const img = () => builder(document.createElement("img"));
-const input = () => builder(document.createElement("input"));
-const ins = () => builder(document.createElement("ins"));
-const kbd = () => builder(document.createElement("kbd"));
-const label = () => builder(document.createElement("label"));
-const legend = () => builder(document.createElement("legend"));
-const li = () => builder(document.createElement("li"));
-const link = () => builder(document.createElement("link"));
-const main = () => builder(document.createElement("main"));
-const map = () => builder(document.createElement("map"));
-const mark = () => builder(document.createElement("mark"));
-const menu = () => builder(document.createElement("menu"));
-const meta = () => builder(document.createElement("meta"));
-const meter = () => builder(document.createElement("meter"));
-const nav = () => builder(document.createElement("nav"));
-const noscript = () => builder(document.createElement("noscript"));
-const object = () => builder(document.createElement("object"));
-const ol = () => builder(document.createElement("ol"));
-const optgroup = () => builder(document.createElement("optgroup"));
-const option = () => builder(document.createElement("option"));
-const output = () => builder(document.createElement("output"));
-const p = () => builder(document.createElement("p"));
-const picture = () => builder(document.createElement("picture"));
-const pre = () => builder(document.createElement("pre"));
-const progress = () => builder(document.createElement("progress"));
-const q = () => builder(document.createElement("q"));
-const rp = () => builder(document.createElement("rp"));
-const rt = () => builder(document.createElement("rt"));
-const ruby = () => builder(document.createElement("ruby"));
-const s = () => builder(document.createElement("s"));
-const samp = () => builder(document.createElement("samp"));
-const script = () => builder(document.createElement("script"));
-const search = () => builder(document.createElement("search"));
-const section = () => builder(document.createElement("section"));
-const select = () => builder(document.createElement("select"));
-const slot = () => builder(document.createElement("slot"));
-const small = () => builder(document.createElement("small"));
-const source = () => builder(document.createElement("source"));
-const span = () => builder(document.createElement("span"));
-const strong = () => builder(document.createElement("strong"));
-const style = () => builder(document.createElement("style"));
-const sub = () => builder(document.createElement("sub"));
-const summary = () => builder(document.createElement("summary"));
-const sup = () => builder(document.createElement("sup"));
-const table = () => builder(document.createElement("table"));
-const tbody = () => builder(document.createElement("tbody"));
-const td = () => builder(document.createElement("td"));
-const template = () => builder(document.createElement("template"));
-const textarea = () => builder(document.createElement("textarea"));
-const tfoot = () => builder(document.createElement("tfoot"));
-const th = () => builder(document.createElement("th"));
-const thead = () => builder(document.createElement("thead"));
-const time = () => builder(document.createElement("time"));
-const title = () => builder(document.createElement("title"));
-const tr = () => builder(document.createElement("tr"));
-const track = () => builder(document.createElement("track"));
-const u = () => builder(document.createElement("u"));
-const ul = () => builder(document.createElement("ul"));
-const mathVar = () => builder(document.createElement("var"));
-const video = () => builder(document.createElement("video"));
-const wbr = () => builder(document.createElement("wbr"));
-const animate = () => builder(document.createElement("animate"));
-const animateMotion = () => builder(document.createElement("animateMotion"));
-const animateTransform = () => builder(document.createElement("animateTransform"));
-const circle = () => builder(document.createElement("circle"));
-const clipPath = () => builder(document.createElement("clipPath"));
-const defs = () => builder(document.createElement("defs"));
-const desc = () => builder(document.createElement("desc"));
-const ellipse = () => builder(document.createElement("ellipse"));
-const feBlend = () => builder(document.createElement("feBlend"));
-const feColorMatrix = () => builder(document.createElement("feColorMatrix"));
-const feComponentTransfer = () => builder(document.createElement("feComponentTransfer"));
-const feComposite = () => builder(document.createElement("feComposite"));
-const feConvolveMatrix = () => builder(document.createElement("feConvolveMatrix"));
-const feDiffuseLighting = () => builder(document.createElement("feDiffuseLighting"));
-const feDisplacementMap = () => builder(document.createElement("feDisplacementMap"));
-const feDistantLight = () => builder(document.createElement("feDistantLight"));
-const feDropShadow = () => builder(document.createElement("feDropShadow"));
-const feFlood = () => builder(document.createElement("feFlood"));
-const feFuncA = () => builder(document.createElement("feFuncA"));
-const feFuncB = () => builder(document.createElement("feFuncB"));
-const feFuncG = () => builder(document.createElement("feFuncG"));
-const feFuncR = () => builder(document.createElement("feFuncR"));
-const feGaussianBlur = () => builder(document.createElement("feGaussianBlur"));
-const feImage = () => builder(document.createElement("feImage"));
-const feMerge = () => builder(document.createElement("feMerge"));
-const feMergeNode = () => builder(document.createElement("feMergeNode"));
-const feMorphology = () => builder(document.createElement("feMorphology"));
-const feOffset = () => builder(document.createElement("feOffset"));
-const fePointLight = () => builder(document.createElement("fePointLight"));
-const feSpecularLighting = () => builder(document.createElement("feSpecularLighting"));
-const feSpotLight = () => builder(document.createElement("feSpotLight"));
-const feTile = () => builder(document.createElement("feTile"));
-const feTurbulence = () => builder(document.createElement("feTurbulence"));
-const filter = () => builder(document.createElement("filter"));
-const foreignObject = () => builder(document.createElement("foreignObject"));
-const g = () => builder(document.createElement("g"));
-const image = () => builder(document.createElement("image"));
-const line = () => builder(document.createElement("line"));
-const linearGradient = () => builder(document.createElement("linearGradient"));
-const marker = () => builder(document.createElement("marker"));
-const mask = () => builder(document.createElement("mask"));
-const metadata = () => builder(document.createElement("metadata"));
-const mpath = () => builder(document.createElement("mpath"));
-const path = () => builder(document.createElement("path"));
-const pattern = () => builder(document.createElement("pattern"));
-const polygon = () => builder(document.createElement("polygon"));
-const polyline = () => builder(document.createElement("polyline"));
-const radialGradient = () => builder(document.createElement("radialGradient"));
-const rect = () => builder(document.createElement("rect"));
-const set = () => builder(document.createElement("set"));
-const stop = () => builder(document.createElement("stop"));
-const svg = () => builder(document.createElement("svg"));
-const svgSwitch = () => builder(document.createElement("switch"));
-const symbol = () => builder(document.createElement("symbol"));
-const text = () => builder(document.createElement("text"));
-const textPath = () => builder(document.createElement("textPath"));
-const tspan = () => builder(document.createElement("tspan"));
-const use = () => builder(document.createElement("use"));
-const view = () => builder(document.createElement("view"));
-const annotation = () => builder(document.createElement("annotation"));
-const annotationXml = () => builder(document.createElement("annotation-xml"));
-const maction = () => builder(document.createElement("maction"));
-const math = () => builder(document.createElement("math"));
-const merror = () => builder(document.createElement("merror"));
-const mfrac = () => builder(document.createElement("mfrac"));
-const mi = () => builder(document.createElement("mi"));
-const mmultiscripts = () => builder(document.createElement("mmultiscripts"));
-const mn = () => builder(document.createElement("mn"));
-const mo = () => builder(document.createElement("mo"));
-const mover = () => builder(document.createElement("mover"));
-const mpadded = () => builder(document.createElement("mpadded"));
-const mphantom = () => builder(document.createElement("mphantom"));
-const mprescripts = () => builder(document.createElement("mprescripts"));
-const mroot = () => builder(document.createElement("mroot"));
-const mrow = () => builder(document.createElement("mrow"));
-const ms = () => builder(document.createElement("ms"));
-const mspace = () => builder(document.createElement("mspace"));
-const msqrt = () => builder(document.createElement("msqrt"));
-const mstyle = () => builder(document.createElement("mstyle"));
-const msub = () => builder(document.createElement("msub"));
-const msubsup = () => builder(document.createElement("msubsup"));
-const msup = () => builder(document.createElement("msup"));
-const mtable = () => builder(document.createElement("mtable"));
-const mtd = () => builder(document.createElement("mtd"));
-const mtext = () => builder(document.createElement("mtext"));
-const mtr = () => builder(document.createElement("mtr"));
-const munder = () => builder(document.createElement("munder"));
-const munderover = () => builder(document.createElement("munderover"));
-const semantics = () => builder(document.createElement("semantics"));
-//#endregion
-export { a, abbr, address, animate, animateMotion, animateTransform, annotation, annotationXml, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, data, datalist, dd, defs, del, desc, details, dfn, dialog, div, dl, dt, ellipse, em, embed, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, g, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, image, img, input, ins, kbd, label, legend, li, line, linearGradient, link, maction, main, map, mark, marker, mask, math, mathVar, menu, merror, meta, metadata, meter, mfrac, mi, mmultiscripts, mn, mo, mover, mpadded, mpath, mphantom, mprescripts, mroot, mrow, ms, mspace, msqrt, mstyle, msub, msubsup, msup, mtable, mtd, mtext, mtr, munder, munderover, nav, noscript, object, ol, optgroup, option, output, p, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, search, section, select, semantics, set, slot, small, source, span, stop, strong, style, sub, summary, sup, svg, svgSwitch, symbol, table, tbody, td, template, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, video, view, wbr };

package/dist/builder/index.d.mts

@@ -1,88 +0,0 @@
-import { t as PrimitiveNodeType } from "../lib-BYJ5jPTG.mjs";
-//#region src/builder/index.d.ts
-declare const DISPOSABLES: unique symbol;
-declare const DISPOSE: symbol;
-declare const VALUE: unique symbol;
-declare const EFFECT: unique symbol;
-declare class ElementBuilder<T extends Element = Element> {
-  /** Dispose the reactive element and run all cleanup functions */
-  [DISPOSE]: () => void;
-  /** The underlying DOM element */
-  private [VALUE];
-  /** A set of cleanup functions to run when disposing the element */
-  private [DISPOSABLES];
-  [EFFECT](fn: () => void): this;
-  private constructor();
-  static create<T extends Element>(el: T): ReactiveElement<T>;
-  children(...children: ValueOrReactive<ElementBuilder | Node | string | number>[]): T;
-  ref(): T;
-  ref(apply: (ref: T) => void | (() => void)): this;
-  on<K extends keyof HTMLElementEventMap>(eventType: K, listener: (ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): this;
-}
-declare function toNode(c: ElementBuilder | PrimitiveNodeType): Node;
-declare function builder<T extends Element>(el: T): ReactiveElementOf<T>;
-/**
- * Callable overloads matching the Proxy apply trap → ref() behavior.
- * Calling a reactive element as a function delegates to ref():
- *   el()            → returns the raw DOM element
- *   el((ref) => {}) → applies a side-effect, returns the builder for chaining
- */
-interface RefCallable<T extends Element> {
-  (): T;
-  (apply: (ref: T) => void | (() => void)): this;
-}
-type ReactiveElement<T extends Element> = ElementBuilder<T> & RefCallable<T>;
-type ValueOrReactive<T> = (() => T) | T;
-type ValueOrReactiveArray<T extends any[]> = { [K in keyof T]: ValueOrReactive<T[K]> | T[K] };
-/**
- * Filter keys that are writable (exclude readonly and getter-only).
- */
-type WritableKeys<T> = { [K in keyof T]: (<U>() => U extends { [Q in K]: T[K] } ? 1 : 2) extends (<U>() => U extends { readonly [Q in K]: T[K] } ? 1 : 2) ? never : K }[keyof T];
-/**
- * Extracts the object chaining part of ReactiveBuilder.
- * Used for properties like `style` where you can do both:
- *   .style("padding: 20px;")     // setter
- *   .style.padding("20px")       // sub-property chaining
- */
-type Chain<R, T> = T extends object ? { [K in WritableKeys<T>]: Builder<R, T[K]> } : {};
-type Builder<R, T = R> = T extends ((...args: infer U) => unknown) ? (...value: ValueOrReactiveArray<U>) => R : (value?: ValueOrReactive<T>) => R;
-/**
- * Types eligible for sub-property chaining (e.g., `.style.padding("20px")`).
- */
-type ChainableType = CSSStyleDeclaration | DOMTokenList | DOMStringMap | StylePropertyMap;
-/**
- * Filters keys to only writable data properties.
- * Excludes methods (function-valued properties) and event handlers (`on*`).
- */
-type DataPropertyKeys<T> = { [K in keyof T]: K extends `on${string}` ? never : T[K] extends ((...args: any[]) => any) ? never : K }[keyof T];
-/**
- * Reactive setter for a single property.
- * Chainable types (CSSStyleDeclaration, DOMTokenList, etc.) get both
- * sub-property chaining and direct setter support.
- */
-type ReactiveSetter<R, T> = T extends ChainableType ? Chain<R, T> & ((value: ValueOrReactive<T>) => R) : (value: ValueOrReactive<T>) => R;
-/**
- * A fully-typed reactive element builder for any Element type.
- * Automatically maps all writable data properties into reactive setters.
- *
- * Use this for custom elements instead of needing generated builder interfaces.
- *
- * @example
- * ```ts
- * import { reactive, type ReactiveElementOf } from "elements-kit";
- *
- * class MyElement extends HTMLElement {
- *   greeting = "hello";
- * }
- * customElements.define("my-element", MyElement);
- *
- * const myEl = () =>
- *   reactive(document.createElement("my-element") as MyElement);
- *
- * // Full type support for both own and inherited properties:
- * myEl().greeting("world").style.padding("20px").id("main");
- * ```
- */
-type ReactiveElementOf<T extends Element> = ElementBuilder<T> & { [K in WritableKeys<T> & DataPropertyKeys<T> & keyof T]: ReactiveSetter<ReactiveElementOf<T>, T[K]> };
-//#endregion
-export { Builder, Chain, DISPOSABLES, DISPOSE, EFFECT, ElementBuilder, ReactiveElement, ReactiveElementOf, VALUE, ValueOrReactive, builder, toNode };

package/dist/builder/index.mjs

@@ -1,114 +0,0 @@
-import { o as effect, t as isReactive } from "../signals-DcgXhkU2.mjs";
-import "../polyfill-B1lNNcum.mjs";
-import { i as resolveNode, n as Slot } from "../slot-Cydy7-0L.mjs";
-//#region src/builder/index.ts
-const DISPOSABLES = Symbol("disposables");
-const DISPOSE = Symbol.dispose;
-const VALUE = Symbol("value");
-const EFFECT = Symbol("effect");
-var ElementBuilder = class ElementBuilder {
-	/** The underlying DOM element */
-	[VALUE];
-	/** A set of cleanup functions to run when disposing the element */
-	[DISPOSABLES] = /* @__PURE__ */ new Set();
-	/** Dispose the reactive element and run all cleanup functions */
-	[DISPOSE]() {
-		this[DISPOSABLES].forEach((dispose) => dispose());
-		this[DISPOSABLES].clear();
-	}
-	[EFFECT](fn) {
-		this[DISPOSABLES].add(effect(fn));
-		return this;
-	}
-	constructor(el) {
-		this[VALUE] = el;
-	}
-	static create(el) {
-		const builder = new ElementBuilder(el);
-		return new Proxy(builder.ref, {
-			apply(_target, _thisArg, argArray) {
-				return Reflect.apply(builder.ref, builder, argArray);
-			},
-			get(_target, key, receiver) {
-				const el = builder[VALUE];
-				if (key in builder) return Reflect.get(builder, key, receiver);
-				return setterOrValue(receiver, el, key);
-			}
-		});
-	}
-	children(...children) {
-		const el = this[VALUE];
-		if (children.length === 0) return el;
-		children.forEach((child) => {
-			if (isReactive(child)) {
-				const slot = Slot.new();
-				el.appendChild(slot());
-				return this[EFFECT](() => {
-					const value = toNode(child());
-					slot.set(value);
-				});
-			}
-			el.appendChild(toNode(child));
-		});
-		return el;
-	}
-	ref(apply) {
-		if (!apply) return this[VALUE];
-		const result = apply(this[VALUE]);
-		if (typeof result === "function") this[DISPOSABLES].add(result);
-		return this;
-	}
-	on(eventType, listener, options) {
-		this[VALUE].addEventListener(eventType, listener, options);
-		this[DISPOSABLES].add(() => {
-			this[VALUE].removeEventListener(eventType, listener, options);
-		});
-		return this;
-	}
-};
-var ChainContext = class {
-	builder;
-	chain;
-	key;
-	constructor(builder, chain, key) {
-		this.builder = builder;
-		this.chain = chain;
-		this.key = key;
-	}
-	setter(value) {
-		const chain = this.chain;
-		if (isReactive(value)) {
-			this.builder[DISPOSABLES].add(effect(() => {
-				chain[this.key] = value();
-			}));
-			return this.builder;
-		}
-		chain[this.key] = value;
-		return this.builder;
-	}
-};
-function setterOrValue(builder, chainParent, key) {
-	const chain = chainParent[key];
-	const context = new ChainContext(builder, chainParent, key);
-	return new Proxy(context.setter.bind(context), {
-		apply(target, _thisArg, argArray) {
-			return target(argArray[0]);
-		},
-		get(_, subkey) {
-			if (isObject(chain)) return setterOrValue(builder, chain, subkey);
-			return chain[subkey];
-		}
-	});
-}
-function toNode(c) {
-	if (c instanceof ElementBuilder) return c.ref();
-	return resolveNode(c);
-}
-function isObject(v) {
-	return typeof v === "object" && v !== null && !Array.isArray(v);
-}
-function builder(el) {
-	return ElementBuilder.create(el);
-}
-//#endregion
-export { DISPOSABLES, DISPOSE, EFFECT, ElementBuilder, VALUE, builder, toNode };