@nativele/ts-dom 0.0.0-stage → 0.2.1

package/dist/index.mjs

@@ -0,0 +1,728 @@
+import { a as attrNameOf, i as RESERVED_NAMES, r as holeName, t as HOLE_ANY } from "./holes-DTBtTZF_.mjs";
+// src/lib/slots.ts
+const slotOf = (n) => n instanceof Element ? n.getAttribute("slot") ?? "" : n instanceof Text && !n.data.trim() ? null : "";
+/**
+* <slot> for Light DOM: at creation time the user's child nodes are placed into the matching positions;
+* afterwards a MutationObserver handles new children added directly to the element and removal of assigned nodes.
+*/
+var LightSlots = class {
+	host;
+	onChange;
+	#slots = [];
+	#own = /* @__PURE__ */ new Set();
+	#observer;
+	constructor(host, onChange) {
+		this.host = host;
+		this.onChange = onChange;
+		this.#observer = new MutationObserver((records) => this.#flush(records));
+	}
+	project(frag, given) {
+		for (const n of frag.childNodes) this.#own.add(n);
+		for (const el of frag.querySelectorAll("slot")) {
+			const name = el.getAttribute("name") ?? "";
+			const nodes = given.filter((n) => slotOf(n) === name);
+			const start = document.createComment(`slot:${name}`);
+			const end = document.createComment(`/slot:${name}`);
+			this.#own.add(start).add(end);
+			const fallback = [...el.childNodes];
+			el.replaceWith(start, ...nodes.length ? nodes : fallback, end);
+			this.#slots.push({
+				name,
+				end,
+				fallback,
+				assigned: new Set(nodes)
+			});
+		}
+	}
+	/** Like the native slot.assignedNodes(): the nodes currently assigned to the slot (fallback content excluded). */
+	assigned(name) {
+		const slot = this.#slots.find((x) => x.name === name);
+		return slot ? [...slot.assigned] : [];
+	}
+	observe() {
+		this.#observer.observe(this.host, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["slot"]
+		});
+	}
+	disconnect() {
+		this.#flush(this.#observer.takeRecords());
+		this.#observer.disconnect();
+	}
+	/** Put a node into its slot; with no matching slot it is not rendered, like the native behavior. */
+	#assign(n, changed) {
+		const target = this.#slots.find((s) => s.name === slotOf(n));
+		if (!target) {
+			if (slotOf(n) !== null) n.parentNode?.removeChild(n);
+			return;
+		}
+		if (target.assigned.size === 0) for (const f of target.fallback) f.parentNode?.removeChild(f);
+		target.assigned.add(n);
+		target.end.before(n);
+		changed.add(target);
+	}
+	#unassign(n, slot, changed) {
+		slot.assigned.delete(n);
+		changed.add(slot);
+		if (slot.assigned.size === 0) for (const f of slot.fallback) slot.end.before(f);
+	}
+	#flush(records) {
+		const changed = /* @__PURE__ */ new Set();
+		for (const r of records) {
+			if (r.type === "attributes") {
+				const n = r.target;
+				const current = this.#slots.find((s) => s.assigned.has(n));
+				if (!current || current.name === slotOf(n)) continue;
+				this.#unassign(n, current, changed);
+				this.#assign(n, changed);
+				continue;
+			}
+			for (const n of r.removedNodes) {
+				if (n.parentNode) continue;
+				for (const s of this.#slots) if (s.assigned.has(n)) this.#unassign(n, s, changed);
+			}
+			if (r.target !== this.host) continue;
+			for (const n of r.addedNodes) {
+				if (this.#own.has(n) || this.#slots.some((s) => s.assigned.has(n))) continue;
+				this.#assign(n, changed);
+			}
+		}
+		for (const s of changed) this.onChange(s.name);
+	}
+};
+// src/lib/style.ts
+/** Limit scoped styles to a tag: use the native @scope when available, otherwise fall back to CSS nesting. */
+function scopeCss(css, tag) {
+	if (typeof CSSScopeRule !== "undefined") return `@scope (${tag}) {\n${css}\n}`;
+	return `${tag} {\n${css.replaceAll(":scope", "&")}\n}`;
+}
+/** Take the template's top-level <style> elements out of the template (they are removed from it). */
+function extractSheets(content) {
+	const sheets = [];
+	for (const child of [...content.children]) {
+		if (child.localName !== "style") continue;
+		sheets.push({
+			css: child.textContent ?? "",
+			scoped: child.hasAttribute("scoped")
+		});
+		child.remove();
+	}
+	return sheets;
+}
+/** Inject every stylesheet only once per document. */
+function createInjector(sheets) {
+	const injected = /* @__PURE__ */ new WeakMap();
+	return (host) => {
+		if (!sheets.length) return;
+		const doc = host.ownerDocument;
+		const done = injected.get(doc) ?? /* @__PURE__ */ new Set();
+		injected.set(doc, done);
+		const tag = host.localName;
+		for (const [i, { css, scoped }] of sheets.entries()) {
+			const key = scoped ? `${tag}#${i}` : `#${i}`;
+			if (done.has(key)) continue;
+			done.add(key);
+			if (!scoped && css.includes(":host")) console.warn(`<${tag}>: [host-in-light-dom] :host has no effect in Light DOM. Fix: select the element by its tag name (${tag} { ... }) or use <style scoped> with :scope, or opt into Shadow DOM with { shadow: true }.`);
+			const el = doc.createElement("style");
+			el.dataset.tsDom = scoped ? tag : "";
+			el.textContent = scoped ? scopeCss(css, tag) : css;
+			doc.head.append(el);
+		}
+	};
+}
+// src/lib/cond.ts
+/** Collect the data-if elements of a subtree, leaving a comment as placeholder. */
+function mountConds(root) {
+	const map = /* @__PURE__ */ new Map();
+	for (const el of root.querySelectorAll("[data-if]")) {
+		const name = el.getAttribute("data-if");
+		const anchor = document.createComment(`if:${name}`);
+		el.before(anchor);
+		map.set(name, [...map.get(name) ?? [], {
+			el,
+			anchor
+		}]);
+	}
+	const show = (name, on) => {
+		for (const { el, anchor } of map.get(name) ?? []) if (on) {
+			if (!el.isConnected && el.parentNode === null) anchor.after(el);
+		} else el.remove();
+	};
+	return {
+		names: new Set(map.keys()),
+		show,
+		hideAll() {
+			for (const name of map.keys()) show(name, false);
+		}
+	};
+}
+// src/lib/text.ts
+/** Split every {{ name }} in a subtree into its own Text node and return a writable `text` object. */
+function mountHoles(root) {
+	const nodes = /* @__PURE__ */ new Map();
+	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+	const targets = [];
+	for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+		const parent = n.parentElement;
+		if (parent && /^(style|script)$/i.test(parent.localName)) continue;
+		if (n.data.includes("{{")) targets.push(n);
+	}
+	for (const t of targets) {
+		const src = t.data;
+		const parts = [];
+		let last = 0;
+		for (const m of src.matchAll(HOLE_ANY)) {
+			const name = holeName(m[1] ?? "");
+			if (!name) continue;
+			if (m.index > last) parts.push(document.createTextNode(src.slice(last, m.index)));
+			const hole = document.createTextNode("");
+			parts.push(hole);
+			nodes.set(name, [...nodes.get(name) ?? [], hole]);
+			last = m.index + m[0].length;
+		}
+		if (last === 0 && parts.length === 0) continue;
+		if (last < src.length) parts.push(document.createTextNode(src.slice(last)));
+		t.replaceWith(...parts);
+	}
+	const values = /* @__PURE__ */ new Map();
+	const text = {};
+	for (const [name, list] of nodes) Object.defineProperty(text, name, {
+		enumerable: true,
+		get: () => values.get(name),
+		set(v) {
+			values.set(name, v);
+			const s = v == null || v === false ? "" : String(v);
+			for (const node of list) if (node.data !== s) node.data = s;
+		}
+	});
+	return text;
+}
+// src/lib/list.ts
+/**
+* A one-dimensional keyed list. Reordering uses `moveBefore` where the browser has it, so a moved item (a component, a playing video, a focused input) is not disconnected. It only compares keys, never subtrees;
+* the content of an item is written explicitly by the user's update callback.
+*/
+var List = class {
+	anchor;
+	proto;
+	onCreate;
+	#items = /* @__PURE__ */ new Map();
+	#byEl = /* @__PURE__ */ new WeakMap();
+	constructor(anchor, proto, onCreate) {
+		this.anchor = anchor;
+		this.proto = proto;
+		this.onCreate = onCreate;
+	}
+	/** From any node inside an item, find the key and data of the item it belongs to (used by event handlers). */
+	itemOf(node) {
+		for (let n = node; n; n = n.parentNode) {
+			const hit = n instanceof Element ? this.#byEl.get(n) : void 0;
+			if (hit) return hit;
+		}
+	}
+	get size() {
+		return this.#items.size;
+	}
+	has(key) {
+		return this.#items.has(key);
+	}
+	get(key) {
+		return this.#items.get(key);
+	}
+	#create(key) {
+		const el = this.proto.cloneNode(true);
+		const holder = document.createDocumentFragment();
+		holder.append(el);
+		const conds = mountConds(holder);
+		const text = mountHoles(holder);
+		conds.hideAll();
+		const show = conds.show;
+		el.remove();
+		const refs = {};
+		for (const n of [el, ...el.querySelectorAll("[data-ref]")]) {
+			const name = n.getAttribute("data-ref");
+			if (name) refs[name] = n;
+		}
+		this.onCreate?.(el);
+		const entry = {
+			el,
+			refs,
+			text,
+			show,
+			item: void 0,
+			fresh: true
+		};
+		this.#byEl.set(el, {
+			key,
+			item: void 0
+		});
+		return entry;
+	}
+	/** Add or update a single item; a new item is appended at the end. */
+	upsert(key, item, update) {
+		let entry = this.#items.get(key);
+		if (!entry) {
+			entry = this.#create(key);
+			this.#items.set(key, entry);
+			this.anchor.parentNode?.insertBefore(entry.el, this.anchor);
+		}
+		this.#run(entry, key, item, update);
+	}
+	#run(entry, key, item, update, skip = false) {
+		if (skip && !entry.fresh && Object.is(entry.item, item)) return;
+		entry.item = item;
+		entry.fresh = false;
+		this.#byEl.set(entry.el, {
+			key,
+			item
+		});
+		update(item, entry);
+	}
+	remove(key) {
+		const entry = this.#items.get(key);
+		if (!entry) return false;
+		entry.el.remove();
+		this.#items.delete(key);
+		return true;
+	}
+	clear() {
+		for (const { el } of this.#items.values()) el.remove();
+		this.#items.clear();
+	}
+	/** Keyed reconciliation: remove extra items, create missing ones, reorder, and call update() for every item. */
+	replace(items, key, update, opts = {}) {
+		const next = /* @__PURE__ */ new Set();
+		for (const it of items) {
+			const k = key(it);
+			if (next.has(k)) throw new Error(`[duplicate-key] replace() received two items with the key ${String(k)}, so one element cannot show both. Fix: make key() return a unique value for each item.`);
+			next.add(k);
+		}
+		for (const k of this.#items.keys()) if (!next.has(k)) this.remove(k);
+		const parent = this.anchor.parentNode;
+		let after = this.anchor;
+		for (let i = items.length - 1; i >= 0; i--) {
+			const it = items[i];
+			const k = key(it);
+			let entry = this.#items.get(k);
+			if (!entry) {
+				entry = this.#create(k);
+				this.#items.set(k, entry);
+			}
+			if (entry.el.nextSibling !== after || entry.el.parentNode !== parent) {
+				if (entry.el.parentNode === parent && parent?.moveBefore) parent.moveBefore(entry.el, after);
+				else parent?.insertBefore(entry.el, after);
+			}
+			after = entry.el;
+			this.#run(entry, k, it, update, opts.skipUnchanged);
+		}
+	}
+};
+// src/lib/mount.ts
+/**
+* Wire up a built template: `data-each` lists, `data-ref` elements, `data-if` conditions and `{{ }}` holes.
+* Conditions stay where they are until the caller runs `conds.hideAll()`, so a caller that still moves nodes around (slots) can do that first.
+*/
+function mountTemplate(frag, onItem) {
+	const lists = {};
+	for (const t of frag.querySelectorAll("template[data-each]")) {
+		const name = t.getAttribute("data-each");
+		const proto = t.content.firstElementChild;
+		if (!proto) throw new Error(`[each-root-count] data-each="${name}" needs exactly one root element. Fix: wrap the item content in a single element such as <li>.`);
+		const anchor = document.createComment(`each:${name}`);
+		t.replaceWith(anchor);
+		lists[name] = new List(anchor, proto, onItem);
+	}
+	const refs = {};
+	for (const el of frag.querySelectorAll("[data-ref]")) refs[el.getAttribute("data-ref")] = el;
+	return {
+		refs,
+		lists,
+		text: mountHoles(frag),
+		conds: mountConds(frag)
+	};
+}
+// src/lib/component.ts
+function event(opts = {}) {
+	return { bubbles: opts.bubbles };
+}
+const NON_BUBBLING = /* @__PURE__ */ new Set([
+	"focus",
+	"blur",
+	"mouseenter",
+	"mouseleave",
+	"pointerenter",
+	"pointerleave",
+	"load",
+	"error",
+	"scroll",
+	"toggle"
+]);
+function Component(tpl, opts = {}) {
+	const shadow = opts.shadow === true;
+	const hasState = opts.state !== void 0 || opts.props !== void 0 || opts.derive !== void 0;
+	const propDefaults = opts.props ?? {};
+	const propKeys = Object.keys(propDefaults);
+	const stateKeys = Object.keys(opts.state ?? {});
+	for (const k of propKeys) {
+		if (k in HTMLElement.prototype || RESERVED_NAMES.has(k)) throw new Error(`[reserved-prop] props.${k} has the same name as a member of HTMLElement or ts-dom, which it would shadow. Fix: rename the prop (e.g. ${k}Text).`);
+		if (stateKeys.includes(k)) throw new Error(`[conflicting-keys] "${k}" is declared in both state and props. Data must have exactly one owner. Fix: keep it in props (the parent owns it) or in state (the component owns it), not both.`);
+	}
+	for (const k of Object.keys(opts.derive ?? {})) if (stateKeys.includes(k) || propKeys.includes(k)) throw new Error(`[conflicting-keys] derive.${k} has the same name as a state or props field. Fix: rename the derived value.`);
+	for (const k of Object.keys(opts.emits ?? {})) if (`on${k}` in HTMLElement.prototype) throw new Error(`[native-event-name] emits.${k} has the same name as a native DOM event. Fix: rename the event (for example with a prefix such as "field-${k}").`);
+	const attrProps = /* @__PURE__ */ new Map();
+	for (const k of propKeys) {
+		const t = typeof propDefaults[k];
+		if (t === "string" || t === "number" || t === "boolean") attrProps.set(attrNameOf(k), {
+			key: k,
+			kind: t
+		});
+	}
+	const content = tpl.build();
+	const injectStyles = createInjector(shadow ? [] : extractSheets(content));
+	const eventTypes = /* @__PURE__ */ new Set();
+	const methodNames = /* @__PURE__ */ new Set();
+	(function scan(root) {
+		for (const el of root.querySelectorAll("*")) {
+			for (const a of el.attributes) {
+				if (!a.name.startsWith("data-on-")) continue;
+				eventTypes.add(a.name.slice(8));
+				methodNames.add(a.value.trim());
+			}
+			if (el instanceof HTMLTemplateElement) scan(el.content);
+		}
+	})(content);
+	const eventSelector = [...eventTypes].map((t) => `[data-on-${t}]`).join(",");
+	class Base extends HTMLElement {
+		refs = {};
+		lists = {};
+		text = {};
+		root;
+		#show = () => {};
+		#condNames = /* @__PURE__ */ new Set();
+		#slots = null;
+		#cleanups = [];
+		#owned = /* @__PURE__ */ new WeakMap();
+		#built = false;
+		#started = false;
+		#state = { ...opts.state };
+		#props = { ...propDefaults };
+		#derived = {};
+		#ready = false;
+		#dirtyFrom = null;
+		#batchDepth = 0;
+		#rendering = false;
+		static {
+			for (const k of propKeys) Object.defineProperty(this.prototype, k, {
+				configurable: true,
+				enumerable: true,
+				get() {
+					return this.#props[k];
+				},
+				set(v) {
+					this.#setProp(k, v);
+				}
+			});
+		}
+		static get observedAttributes() {
+			return [...attrProps.keys()];
+		}
+		constructor() {
+			super();
+			for (const k of propKeys) if (Object.hasOwn(this, k)) {
+				const v = this[k];
+				delete this[k];
+				this.#props[k] = v;
+			}
+			this.root = shadow ? this.attachShadow({ mode: "open" }) : this;
+			if (shadow) this.#build();
+		}
+		#build() {
+			if (this.#built) return;
+			this.#built = true;
+			if (!shadow) injectStyles(this);
+			const given = shadow ? [] : [...this.childNodes];
+			if (!shadow) this.replaceChildren();
+			const frag = content.cloneNode(true);
+			const mounted = mountTemplate(frag, (el) => this.#register(el));
+			this.lists = mounted.lists;
+			this.refs = mounted.refs;
+			this.#register(frag);
+			const conds = mounted.conds;
+			this.#show = conds.show;
+			this.#condNames = conds.names;
+			this.text = mounted.text;
+			if (!shadow) {
+				this.#slots = new LightSlots(this, (name) => this.slotchange(name));
+				this.#slots.project(frag, given);
+			}
+			conds.hideAll();
+			this.root.append(frag);
+			for (const type of eventTypes) {
+				const nativeBubbling = `on${type}` in HTMLElement.prototype && !NON_BUBBLING.has(type);
+				this.root.addEventListener(type, (e) => this.#dispatch(e), !nativeBubbling);
+			}
+		}
+		/** Register the data-on-* attributes in a subtree (only elements from our own template count, not user slot content). */
+		#register(root) {
+			if (!eventSelector) return;
+			const els = root.querySelectorAll(eventSelector);
+			for (const el of root instanceof Element && root.matches(eventSelector) ? [root, ...els] : els) {
+				const map = /* @__PURE__ */ new Map();
+				for (const a of el.attributes) if (a.name.startsWith("data-on-")) map.set(a.name.slice(8), a.value.trim());
+				this.#owned.set(el, map);
+			}
+		}
+		#dispatch(e) {
+			const bubbling = e.bubbles;
+			for (let n = e.target; n && n !== this.root; n = n.parentNode) {
+				if (n instanceof Element) {
+					const method = this.#owned.get(n)?.get(e.type);
+					if (method) {
+						const fn = this[method];
+						if (typeof fn !== "function") throw new Error(`<${this.localName}>: [missing-handler] data-on-${e.type}="${method}" refers to a method this component does not have. Fix: add a public method ${method}(e, hit) to the class.`);
+						let hit;
+						for (const l of Object.values(this.lists)) if (hit = l.itemOf(n)) break;
+						fn.call(this, e, {
+							el: n,
+							key: hit?.key,
+							item: hit?.item
+						});
+						if (e.cancelBubble) return;
+					}
+				}
+				if (!bubbling) return;
+			}
+		}
+		get state() {
+			return this.#state;
+		}
+		get props() {
+			return this.#props;
+		}
+		emit(name, detail) {
+			const decl = opts.emits?.[name];
+			if (!decl) throw new Error(`<${this.localName}>: [undeclared-event] emit("${name}") was called but the event is not declared. Fix: add it to the emits option: emits: { "${name}": event<Detail>() }.`);
+			this.dispatchEvent(new CustomEvent(name, {
+				detail,
+				bubbles: decl.bubbles === true,
+				composed: false
+			}));
+		}
+		set(patch) {
+			const p = typeof patch === "function" ? patch(this.#state) : patch;
+			let next = this.#state;
+			for (const k of Object.keys(p)) {
+				if (Object.hasOwn(this.#props, k)) throw new Error(`<${this.localName}>: [props-mutation] "${k}" is a prop controlled by the parent, so set() cannot change it. Fix: emit an event so the parent changes it, or declare it in state instead.`);
+				if (Object.is(next[k], p[k])) continue;
+				if (next === this.#state) next = { ...next };
+				next[k] = p[k];
+			}
+			if (next === this.#state) return;
+			this.#dirtyFrom ??= this.#merged();
+			this.#state = next;
+			this.#flushIfIdle();
+		}
+		#merged() {
+			return {
+				...this.#state,
+				...this.#props
+			};
+		}
+		#setProp(key, value) {
+			if (Object.is(this.#props[key], value)) return;
+			this.#dirtyFrom ??= this.#merged();
+			this.#props = {
+				...this.#props,
+				[key]: value
+			};
+			this.#flushIfIdle();
+		}
+		attributeChangedCallback(attr, _old, value) {
+			const p = attrProps.get(attr);
+			if (!p) return;
+			const def = propDefaults[p.key];
+			let v;
+			if (p.kind === "boolean") v = value !== null && value !== "false";
+			else if (p.kind === "number") {
+				v = value === null ? def : Number(value);
+				if (Number.isNaN(v)) {
+					console.warn(`<${this.localName}>: [invalid-prop-value] the attribute ${attr}="${value}" is not a number; using the default value instead. Fix: write a numeric value such as ${attr}="5".`);
+					v = def;
+				}
+			} else v = value ?? def;
+			this.#setProp(p.key, v);
+		}
+		batch(fn) {
+			this.#batchDepth++;
+			try {
+				fn();
+			} finally {
+				this.#batchDepth--;
+				this.#flushIfIdle();
+			}
+		}
+		#flushIfIdle() {
+			if (this.#ready && this.#batchDepth === 0 && !this.#rendering) this.#flush();
+		}
+		#flush() {
+			for (let guard = 0; this.#dirtyFrom; guard++) {
+				if (guard >= 50) {
+					this.#dirtyFrom = null;
+					throw new Error(`<${this.localName}>: [render-loop] render() keeps calling set() and the state never settles (50 passes). Fix: only call set() inside render() when the value actually changes, or move the logic into derive.`);
+				}
+				const from = this.#dirtyFrom;
+				this.#dirtyFrom = null;
+				this.#rendering = true;
+				try {
+					this.#apply(from, this.#merged());
+				} finally {
+					this.#rendering = false;
+				}
+			}
+		}
+		/** Bind same-named {{ holes }} and data-if automatically, then call render(). `from` is null for the first render (all fields). */
+		#apply(from, to) {
+			const keys = from ? [.../* @__PURE__ */ new Set([...Object.keys(from), ...Object.keys(to)])].filter((k) => !Object.is(from[k], to[k])) : Object.keys(to);
+			if (!keys.length) return;
+			const bindName = (name, value) => {
+				if (Object.hasOwn(this.text, name)) this.text[name] = value;
+				if (this.#condNames.has(name)) this.#show(name, Boolean(value));
+			};
+			for (const k of keys) bindName(k, to[k]);
+			const derived = {};
+			for (const [name, fn] of Object.entries(opts.derive ?? {})) {
+				const v = fn(to);
+				derived[name] = v;
+				if (!from || !Object.is(this.#derived[name], v)) bindName(name, v);
+			}
+			this.#derived = derived;
+			this.render({
+				...to,
+				...derived
+			}, new Set(keys));
+		}
+		show(name, on) {
+			this.#show(name, on);
+		}
+		bind(store, fn) {
+			fn(store.get());
+			this.#cleanups.push(store.subscribe(fn));
+		}
+		on(target, type, fn, opts) {
+			const l = fn;
+			target.addEventListener(type, l, opts);
+			const off = () => target.removeEventListener(type, l, opts);
+			this.#cleanups.push(off);
+			return off;
+		}
+		onCleanup(fn) {
+			this.#cleanups.push(fn);
+		}
+		connectedCallback() {
+			if (!shadow && !this.#built && document.readyState === "loading") {
+				document.addEventListener("DOMContentLoaded", () => this.isConnected && this.#start(), { once: true });
+				return;
+			}
+			this.#start();
+		}
+		#start() {
+			this.#build();
+			if (!this.#started) {
+				this.#started = true;
+				for (const m of methodNames) if (typeof this[m] !== "function") throw new Error(`<${this.localName}>: [missing-handler] the HTML refers to the method ${m} (data-on-*), but the component does not have it. Fix: add a public method ${m}(e, hit) to the class.`);
+				if (hasState) {
+					this.#ready = true;
+					this.#dirtyFrom = null;
+					this.#rendering = true;
+					try {
+						this.#apply(null, this.#merged());
+					} finally {
+						this.#rendering = false;
+					}
+					this.#flush();
+				}
+			}
+			this.#slots?.observe();
+			this.connected();
+		}
+		/** Opts in to atomic moves (`moveBefore`): a moved component stays connected, keeping its state, focus and subscriptions. */
+		connectedMoveCallback() {}
+		disconnectedCallback() {
+			this.#slots?.disconnect();
+			for (const fn of this.#cleanups.splice(0)) fn();
+			this.disconnected();
+		}
+		connected() {}
+		disconnected() {}
+		slotchange(_name) {}
+		render(_view, _changed) {}
+		assignedNodes(name) {
+			if (this.#slots) return this.#slots.assigned(name);
+			const sel = name ? `slot[name="${name.replaceAll("\"", "\\\"")}"]` : "slot:not([name])";
+			return this.shadowRoot?.querySelector(sel)?.assignedNodes() ?? [];
+		}
+	}
+	return Base;
+}
+/**
+* Register a custom element. Also checks types: every method name referenced by data-on-* in the HTML must exist on the
+* component as a public method, otherwise tsc reports an error that lists the missing names (`missingHandlers`).
+*/
+function define(name, ctor) {
+	if (!customElements.get(name)) customElements.define(name, ctor);
+}
+// src/lib/store.ts
+/** A tiny store: no dependency tracking, only get / set / subscribe. */
+function createStore(initial) {
+	let value = initial;
+	const subs = /* @__PURE__ */ new Set();
+	return {
+		get: () => value,
+		set(next) {
+			const v = typeof next === "function" ? next(value) : next;
+			if (Object.is(v, value)) return;
+			value = v;
+			for (const fn of [...subs]) fn(value);
+		},
+		subscribe(fn) {
+			subs.add(fn);
+			return () => void subs.delete(fn);
+		}
+	};
+}
+// src/lib/template.ts
+function template(nodes) {
+	return {
+		build: () => buildNodes(nodes),
+		instantiate() {
+			const root = buildNodes(nodes);
+			const { refs, lists, text, conds } = mountTemplate(root);
+			conds.hideAll();
+			return {
+				root,
+				refs,
+				lists,
+				text,
+				show: conds.show
+			};
+		}
+	};
+}
+function buildNodes(nodes) {
+	const frag = document.createDocumentFragment();
+	for (const node of nodes) frag.append(buildNode(node));
+	return frag;
+}
+function buildNode(node) {
+	if (typeof node === "string") return document.createTextNode(node);
+	if (node[0] === "#comment") return document.createComment(node[1]);
+	const [tag, attrs, children, ns] = node;
+	const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+	for (const name in attrs) el.setAttribute(name, attrs[name]);
+	const into = el instanceof HTMLTemplateElement ? el.content : el;
+	for (const child of children) into.append(buildNode(child));
+	return el;
+}
+export { Component, List, createStore, define, event, template };