@spinjs/components 0.1.0-preview.1 → 0.2.0-alpha.1

package/dist/compiler/emit.js

@@ -0,0 +1,217 @@
+// src/compiler/emit.ts
+const KEYWORDS = /* @__PURE__ */ new Set([
+	"true",
+	"false",
+	"null",
+	"undefined",
+	"this",
+	"typeof",
+	"void",
+	"new",
+	"in",
+	"of",
+	"instanceof",
+	"return",
+	"const",
+	"let",
+	"var",
+	"if",
+	"else",
+	"for",
+	"while",
+	"do",
+	"switch",
+	"case",
+	"break",
+	"continue",
+	"function",
+	"arrow",
+	"async",
+	"await",
+	"try",
+	"catch",
+	"finally",
+	"throw",
+	"class",
+	"extends",
+	"super",
+	"import",
+	"export",
+	"default",
+	"delete",
+	"yield"
+]);
+function freeNames(expr, bound) {
+	const found = [];
+	const re = /[A-Za-z_$][A-Za-z0-9_$]*/g;
+	let m;
+	const stripped = expr.replace(/"[^"]*"|'[^']*'|`[^`]*`/g, "\"\"");
+	while ((m = re.exec(stripped)) !== null) {
+		const name = m[0];
+		if (stripped.slice(Math.max(0, m.index - 1), m.index) === ".") continue;
+		const behind = stripped.slice(0, m.index);
+		const ahead = stripped.slice(m.index + name.length);
+		if (/[{,]\s*$/.test(behind) && /^\s*:/.test(ahead)) continue;
+		if (KEYWORDS.has(name)) continue;
+		if (bound.has(name)) continue;
+		if (!found.includes(name)) found.push(name);
+	}
+	return found;
+}
+/** A static handler's own params: `(event) => ...` binds `event`, so the
+* scope rewrite must leave it alone. Simple identifiers only — a handler
+* with destructured or defaulted params keeps the old (broken) rewrite
+* rather than a cleverer wrong one. */
+function handlerParams(handler) {
+	const arrow = handler.match(/^\s*(?:\(([^()]*)\)|([A-Za-z_$][A-Za-z0-9_$]*))\s*=>/);
+	if (arrow === null) return [];
+	const list = arrow[1] ?? arrow[2] ?? "";
+	const params = list.split(",").map((p) => p.trim()).filter((p) => /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(p));
+	const rawCount = list.trim() === "" ? 0 : list.split(",").length;
+	return params.length === rawCount ? params : [];
+}
+function scopeExpr(expr, bound) {
+	const names = freeNames(expr, bound);
+	if (names.length === 0) return expr;
+	let out = expr;
+	for (const name of names.sort((a, b) => b.length - a.length)) {
+		const re = new RegExp(`(?<![A-Za-z0-9_$."])${name}(?![A-Za-z0-9_$])`, "g");
+		out = out.replace(re, `values.${name}`);
+	}
+	return out;
+}
+const pad = (depth) => "  ".repeat(depth);
+function emit(ir) {
+	let bindings = 0;
+	let seq = 0;
+	const emitNodes = (nodes, depth, host, parts = "parts", bound = /* @__PURE__ */ new Set()) => {
+		const out = [];
+		for (const node of nodes) {
+			if (node.kind === "text") {
+				if (!node.parts.some((part) => part.kind === "expr")) {
+					const text = node.parts.map((part) => part.kind === "static" ? part.value : "").join("");
+					if (text.length === 0) continue;
+					out.push(`${pad(depth)}{ const t = document.createTextNode(${JSON.stringify(text)}); ${host}.appendChild(t); }`);
+				} else {
+					bindings++;
+					const id = `t${seq++}`;
+					const reads = node.parts.map((part) => {
+						if (part.kind === "static") return JSON.stringify(part.value);
+						return `String((${scopeExpr(part.expr, bound)}) ?? "")`;
+					}).join(" + ");
+					out.push(`${pad(depth)}{ const ${id} = document.createTextNode(""); const ${id}Fresh = signal(0); effect(() => { ${id}Fresh(); ${id}.data = (${reads}); }); ${parts}.push(() => ${id}Fresh(${id}Fresh() + 1)); ${host}.appendChild(${id}); }`);
+				}
+				continue;
+			}
+			if (node.kind === "for") {
+				bindings++;
+				const id = `l${seq++}`;
+				const keyScope = /* @__PURE__ */ new Set([
+					...bound,
+					node.binding,
+					"item",
+					"i"
+				]);
+				const withRow = /* @__PURE__ */ new Set([
+					...bound,
+					node.binding,
+					"item",
+					"i"
+				]);
+				const key = node.key !== void 0 ? `(item, i) => (${scopeExpr(node.key, keyScope).replace(new RegExp(`(?<![A-Za-z0-9_$."])${node.binding}(?![A-Za-z0-9_$])`, "g"), "item")})` : `(_item, i) => i`;
+				out.push(`${pad(depth)}{ const ${id} = document.createComment("for"); ${host}.appendChild(${id});`);
+				out.push(`${pad(depth + 1)}const view${id} = bindFor({ anchor: ${id},`);
+				out.push(`${pad(depth + 2)}items: () => ((${scopeExpr(node.source, bound)}) ?? []),`);
+				out.push(`${pad(depth + 2)}key: ${key},`);
+				out.push(`${pad(depth + 2)}render: (item, i) => {`);
+				out.push(`${pad(depth + 3)}let ${node.binding} = item;`);
+				out.push(`${pad(depth + 3)}const rowParts = [];`);
+				out.push(`${pad(depth + 3)}const frag = document.createDocumentFragment();`);
+				for (const line of emitNodes(node.body, depth + 3, "frag", "rowParts", withRow)) out.push(line);
+				out.push(`${pad(depth + 3)}return { nodes: [...frag.childNodes], update(item) { ${node.binding} = item; for (const u of rowParts) u(); } };`);
+				out.push(`${pad(depth + 2)}}});`);
+				out.push(`${pad(depth)}}`);
+				continue;
+			}
+			if (node.tag === "slot") {
+				const nameAttr = node.attrs.find((a) => a.name === "name");
+				const nameExpr = nameAttr === void 0 ? `""` : nameAttr.value.kind === "static" ? JSON.stringify(nameAttr.value.value) : `String((${scopeExpr(nameAttr.value.expr, bound)}) ?? "")`;
+				const anchor = `s${seq++}`;
+				const fragId = `sf${seq++}`;
+				const fb = `f${seq++}`;
+				out.push(`${pad(depth)}{ const ${anchor} = document.createComment("slot"); ${host}.appendChild(${anchor});`);
+				out.push(`${pad(depth + 1)}const ${fragId} = document.createDocumentFragment();`);
+				for (const line of emitNodes(node.children, depth + 1, fragId, parts, bound)) out.push(line);
+				out.push(`${pad(depth + 1)}const ${fb} = [...${fragId}.childNodes];`);
+				out.push(`${pad(depth + 1)}${parts}.push(() => placeSlot(${host}, ${anchor}, (values["@@slots"] || new Map()).get(${nameExpr}), ${fb}));`);
+				out.push(`${pad(depth)}}`);
+				continue;
+			}
+			const el = `e${seq++}`;
+			const showTest = node.kind === "element" && node.show !== void 0 ? `() => ((${scopeExpr(node.show, bound)}) ? 0 : 1)` : void 0;
+			const bid = showTest !== void 0 ? `b${seq++}` : void 0;
+			if (showTest !== void 0) {
+				bindings++;
+				const aid = `a${seq++}`;
+				out.push(`${pad(depth)}{ const ${aid} = document.createComment("show"); ${host}.appendChild(${aid});`);
+				out.push(`${pad(depth + 1)}bindIf({ anchor: ${aid}, test: ${showTest}, branches: [() => {`);
+				out.push(`${pad(depth + 2)}const ${bid}f = document.createDocumentFragment();`);
+				out.push(`${pad(depth + 2)}const ${bid}p = [];`);
+			}
+			const iDepth = showTest !== void 0 ? depth + 2 : depth;
+			const iParts = bid !== void 0 ? `${bid}p` : parts;
+			const inSvg = node.tag === "svg" || bound.has("@@svg");
+			if (node.tag === "host") out.push(`${pad(iDepth)}{ const ${el} = _host;`);
+			else if (inSvg) out.push(`${pad(iDepth)}{ const ${el} = document.createElementNS("http://www.w3.org/2000/svg", ${JSON.stringify(node.tag)});`);
+			else out.push(`${pad(iDepth)}{ const ${el} = document.createElement(${JSON.stringify(node.tag)});`);
+			for (const attr of node.attrs) if (attr.value.kind === "static") out.push(`${pad(iDepth + 1)}${el}.setAttribute(${JSON.stringify(attr.name)}, ${JSON.stringify(attr.value.value)});`);
+			else {
+				bindings++;
+				const merge = attr.name === "class" && /^\s*[\[{]/.test(attr.value.expr) ? "classOf(" : "";
+				const close = merge === "" ? "" : ")";
+				out.push(`${pad(iDepth + 1)}bindAttr(${el}, ${JSON.stringify(attr.name)}, () => (${merge}${scopeExpr(attr.value.expr, bound)}${close}));`);
+			}
+			for (const ev of node.events) {
+				bindings++;
+				const shadowed = /* @__PURE__ */ new Set([...bound, ...handlerParams(ev.handler)]);
+				out.push(`${pad(iDepth + 1)}on(${el}, ${JSON.stringify(ev.event)}, (...args) => (${scopeExpr(ev.handler, shadowed)})(...args));`);
+			}
+			for (const use of node.actions) {
+				bindings++;
+				const param = use.param !== void 0 ? `() => (${scopeExpr(use.param, bound)})` : `undefined`;
+				out.push(`${pad(iDepth + 1)}runAction(${el}, actions[${JSON.stringify(use.name)}], ${param});`);
+			}
+			for (const spread of node.spreads) {
+				bindings++;
+				out.push(`${pad(iDepth + 1)}${iParts}.push(bindSpread(${el}, () => (${scopeExpr(spread.expr, bound)})));`);
+			}
+			const childBound = inSvg ? /* @__PURE__ */ new Set([...bound, "@@svg"]) : bound;
+			for (const line of emitNodes(node.children, iDepth + 1, el, iParts, childBound)) out.push(line);
+			if (node.tag !== "host") out.push(`${pad(iDepth + 1)}${bid !== void 0 ? `${bid}f` : host}.appendChild(${el});`);
+			out.push(`${pad(iDepth)}}`);
+			if (showTest !== void 0 && bid !== void 0) {
+				out.push(`${pad(depth + 2)}for (const u of ${bid}p) u();`);
+				out.push(`${pad(depth + 2)}return { nodes: [...${bid}f.childNodes], update() { for (const u of ${bid}p) u(); } };`);
+				out.push(`${pad(depth + 1)}}, () => ({ nodes: [], update() {} })]});`);
+				out.push(`${pad(depth)}}`);
+			}
+		}
+		return out;
+	};
+	return {
+		js: [
+			`import { runAction, on, bindAttr, bindText, classOf, bindFor, bindIf, bindActionProps, bindSpread, placeSlot, signal, effect } from "@spinjs/components/runtime";`,
+			`export function create(actions, values, _host) {`,
+			`  const parts = [];`,
+			`  const frag = document.createDocumentFragment();`,
+			...emitNodes(ir.nodes, 2, "frag", "parts", /* @__PURE__ */ new Set()),
+			`  for (const u of parts) u();`,
+			`  return { nodes: [...frag.childNodes], update() { for (const u of parts) u(); } };`,
+			`}`
+		].join("\n"),
+		bindings
+	};
+}
+export { emit };
+
+//# sourceMappingURL=emit.js.map

package/dist/compiler/transform.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The pure half of the `.html → define()` transform: markup in, module out.
+ *
+ * No filesystem, no bundler, no project root. The unplugin stage lives
+ * composer-side and calls in with the source it loaded; includes and
+ * actions arrive through injected readers because only the stage knows
+ * where the project keeps them.
+ */
+import { EmitOutput, emit } from "./emit.js";
+/** The virtual module that registers every project component. */
+export declare const SPIN_COMPONENTS_ID = "spin/components";
+/** Read a file's text, or throw naming it. The stage injects the fs. */
+export type ReadFile = (path: string) => Promise<string>;
+/** One action module beside a component: the import line and the registry entry. */
+export interface ActionImports {
+  readonly imports: string;
+  readonly entries: readonly string[];
+}
+declare const sanitizePrefix: (raw: string) => string;
+/** The tag a project file registers, shared by the transform and the type writer. */
+export declare function tagForProjectFile(file: string, componentsDir: string, prefix: string): string;
+/** The body of the virtual registration module: one side-effect import per file. */
+export declare function renderComponentsModule(files: readonly string[]): string;
+/** The project's component tags as JSX types. */
+export declare function renderComponentsDts(tags: readonly string[]): string;
+/**
+ * The includes in a markup: `<include file="./_markup.html" />`.
+ *
+ * A family's markup lives ONCE, and its examples are that markup with
+ * their own parameters. The include is resolved textually, before the
+ * parse, so the parser never sees it: the included file's body is
+ * inlined, and the INCLUDING file's scope decl stands (the included
+ * file's own scope decl is dropped — it is the family's, and the
+ * example's is narrower).
+ */
+export declare function resolveIncludes(source: string, id: string, readFile: ReadFile): Promise<string>;
+/** Everything the transform needs beyond the markup itself. */
+export interface TransformInput {
+  /** The bundler id, `?spin-component` suffix included. */
+  readonly id: string;
+  /** The custom-element tag this module defines. */
+  readonly tag: string;
+  /** The action imports the stage resolved beside the file. */
+  readonly actions: ActionImports;
+}
+/**
+ * Markup to module: strip comments, expand groups, extract the script,
+ * parse, emit, and wrap in `define()`. The stage resolved the tag and
+ * the actions; this assembles them.
+ */
+export declare function transformMarkup(source: string, input: TransformInput): string;
+export { type EmitOutput, emit, sanitizePrefix };

package/dist/compiler/transform.js

@@ -0,0 +1,169 @@
+import { emit } from "./emit.js";
+import { expandVariantGroups, extractScript, parse, stripScript } from "@spinjs/components/runtime";
+// src/compiler/transform.ts
+/**
+* The pure half of the `.html → define()` transform: markup in, module out.
+*
+* No filesystem, no bundler, no project root. The unplugin stage lives
+* composer-side and calls in with the source it loaded; includes and
+* actions arrive through injected readers because only the stage knows
+* where the project keeps them.
+*/
+/** The virtual module that registers every project component. */
+const SPIN_COMPONENTS_ID = "spin/components";
+const sanitizePrefix = (raw) => {
+	let base = raw;
+	const slash = base.lastIndexOf("/");
+	if (slash >= 0) base = base.slice(slash + 1);
+	const out = base.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+	return out === "" || out === "workspace" ? "app" : out;
+};
+/** The tag a project file registers, shared by the transform and the type writer. */
+function tagForProjectFile(file, componentsDir, prefix) {
+	const stem = file.split("/").pop().replace(/\.html$/, "");
+	const parts = file.split("/");
+	const at = parts.lastIndexOf(componentsDir.split("/").pop());
+	const segments = at < 0 ? [] : parts.slice(at + 1, -1);
+	if (stem.startsWith(`${prefix}-`) || stem.startsWith("spin-")) return stem;
+	return [
+		prefix,
+		...segments,
+		stem
+	].join("-");
+}
+/** The body of the virtual registration module: one side-effect import per file. */
+function renderComponentsModule(files) {
+	return files.map((file) => `import "/${file}";`).join("\n") + "\n";
+}
+/** The project's component tags as JSX types. */
+function renderComponentsDts(tags) {
+	const allTags = [...new Set(tags)].sort();
+	return [
+		"/**",
+		" * The project's own components, for TypeScript — every framework, and none.",
+		" *",
+		" * GENERATED by the spin components stage from src/lib/components. Do not edit by hand.",
+		" */",
+		"export {};",
+		"",
+		"declare module \"spin/styles.css\";",
+		"declare module \"spin.css\";",
+		"declare module \"uno.css\";",
+		"declare module \"spin/components\";",
+		"/** What every project component accepts: a ref, common attributes, and machine props. */",
+		"interface SpinProjectComponentAttributes {",
+		"  ref?: HTMLElement | ((el: HTMLElement) => void);",
+		"  class?: string;",
+		"  id?: string;",
+		"  role?: string;",
+		"  title?: string;",
+		"  children?: unknown;",
+		"  [attribute: string]: unknown;",
+		"}",
+		"",
+		"declare global {",
+		"  interface HTMLElementTagNameMap {",
+		allTags.map((tag) => `    "${tag}": HTMLElement & SpinProjectComponentAttributes;`).join("\n"),
+		"  }",
+		"}",
+		"",
+		"declare module \"solid-js\" {",
+		"  namespace JSX {",
+		"    interface IntrinsicElements {",
+		allTags.map((tag) => `      "${tag}": SpinProjectComponentAttributes;`).join("\n"),
+		"    }",
+		"  }",
+		"}",
+		""
+	].join("\n");
+}
+/**
+* The includes in a markup: `<include file="./_markup.html" />`.
+*
+* A family's markup lives ONCE, and its examples are that markup with
+* their own parameters. The include is resolved textually, before the
+* parse, so the parser never sees it: the included file's body is
+* inlined, and the INCLUDING file's scope decl stands (the included
+* file's own scope decl is dropped — it is the family's, and the
+* example's is narrower).
+*/
+async function resolveIncludes(source, id, readFile) {
+	const dir = id.split("?")[0].split("/").slice(0, -1).join("/");
+	let code = source;
+	for (let pass = 0; pass < 8; pass += 1) {
+		const m = /<include\s+file="([^"]+)"\s*\/?>/.exec(code);
+		if (m === null) break;
+		const target = m[1];
+		const resolved = (target.startsWith("/") ? target.slice(1) : `${dir}/${target}`).split("/").reduce((parts, part) => {
+			if (part === "..") return parts.slice(0, -1);
+			if (part === ".") return parts;
+			return [...parts, part];
+		}, []).join("/");
+		let included;
+		try {
+			included = await readFile(resolved);
+		} catch {
+			throw new Error(`spin-components: ${id} includes ${target}, which is not there`);
+		}
+		const body = included.replace(/<script(\s[^>]*)?>[\s\S]*?<\/script>\s*/, "");
+		code = code.replace(m[0], body);
+	}
+	return code;
+}
+/**
+* Markup to module: strip comments, expand groups, extract the script,
+* parse, emit, and wrap in `define()`. The stage resolved the tag and
+* the actions; this assembles them.
+*/
+function transformMarkup(source, input) {
+	const code = expandVariantGroups(source.replace(/<!--[\s\S]*?-->/g, ""));
+	const scriptSource = extractScript(code);
+	const script = scriptSource === void 0 ? void 0 : stripScript(scriptSource);
+	const markup = scriptSource === void 0 ? code : code.replace(/<script(\s[^>]*)?>[\s\S]*?<\/script>\s*/g, "");
+	if (/<!doctype|<style[\s>]/i.test(markup)) throw new Error(`spin-components: ${input.id} looks like a document, not a component`);
+	const ir = parse(markup);
+	const { js } = emit(ir);
+	const scriptBindings = script?.calls ?? [];
+	const body = js.replace(/^export function create\(ctx, actions\) \{/, "export function create(actions, values) {").replace(/void ctx;\n/, "");
+	const scriptImports = [];
+	if (script !== void 0) for (const m of script.module.matchAll(/^\s*import(?:\s|\{|\*)[\s\S]*?from\s*["'][^"']+["']\s*;?/gm)) scriptImports.push(m[0].trim());
+	const scriptCalls = [];
+	if (script !== void 0) {
+		for (const c of script.consumes) scriptCalls.push(`  const ${c.name} = consume(${c.handle});`);
+		for (const binding of scriptBindings) {
+			const bridge = `${binding.name}Bridge`;
+			const component = `${binding.factory}`;
+			scriptCalls.push(`  const ${bridge}Events = Object.fromEntries(Object.entries(${component}.events ?? {}).map(([eventName, contract]) => [contract.on, (details) => { el.dispatchEvent(new CustomEvent(eventName, { detail: contract.detail(details), bubbles: true })); }]));\n  const ${bridge}Script = ${binding.args || "{}"};\n  const ${bridge}Props = () => { const p = { ...${bridge}Script, ...props, ...${bridge}Events }; delete p["@@resolve"]; delete p["@@slots"]; p["@@authored"] = (name) => authored(name) || name in ${bridge}Script; return p; };\n  const ${bridge} = watch(${component}, () => "createBridge" in ${component}\n    ? ${component}.createBridge(${bridge}Props, () => el, bridgeId(el, ${JSON.stringify(input.tag)}, ${JSON.stringify(binding.name)}))\n    : { api: ${component}.attach(el), dispose() {} }, ${component}.commands, ${JSON.stringify(binding.name)});\n  values[${JSON.stringify(binding.name)}] = ${bridge}.api;\n  for (const command of ${component}.commands ?? []) el[command] = (...args) => ${bridge}.api[command](...args);\n`);
+		}
+	}
+	const hasConsume = scriptCalls.length > 0;
+	const hasBindings = scriptBindings.length > 0;
+	const componentRefs = scriptBindings.map((b) => b.factory);
+	const fieldsExpr = hasConsume && componentRefs.length > 0 ? `[...new Set([${componentRefs.map((c) => `...(${c}.fields ?? [])`).join(", ")}])]` : "[]";
+	const buildParams = hasConsume ? "el, props, watch, consume, authored" : "el";
+	const runtimeImport = hasConsume ? `import { define, uniqueId, projectSlots } from "@spinjs/components/runtime";` : `import { define, projectSlots } from "@spinjs/components/runtime";`;
+	const bridgeIdHelper = hasBindings ? "const bridgeId = (el, tag, name) => el.id !== \"\" ? `${el.id}:${name}` : uniqueId(`${tag}-${name}`);" : "";
+	const defineHead = hasConsume ? `define(${JSON.stringify(input.tag)}, { props: ${fieldsExpr}, build({ ${buildParams} }) {` : `define(${JSON.stringify(input.tag)}, { build({ ${buildParams} }) {`;
+	const file = input.id.split("?")[0];
+	return [
+		runtimeImport,
+		input.actions.imports,
+		...scriptImports,
+		`const actions = { ${input.actions.entries.join(", ")} };`,
+		...bridgeIdHelper === "" ? [] : [bridgeIdHelper],
+		body,
+		`/* spin-components v1 ${input.tag} */`,
+		defineHead,
+		`  const values = {};`,
+		...scriptCalls,
+		`  values["@@slots"] = projectSlots(el);`,
+		`  const { nodes } = create(actions, values, el);`,
+		`  for (const node of nodes) el.appendChild(node);`,
+		`} });`,
+		...file.includes("/examples/") ? [`if (import.meta.hot) import.meta.hot.accept(() => import.meta.hot.invalidate());`] : [],
+		`export default ${JSON.stringify(input.tag)};`
+	].join("\n");
+}
+export { SPIN_COMPONENTS_ID, emit, renderComponentsDts, renderComponentsModule, resolveIncludes, sanitizePrefix, tagForProjectFile, transformMarkup };
+
+//# sourceMappingURL=transform.js.map

package/dist/controller.d.ts

@@ -1,4 +1,4 @@
-import { DefinedComponent } from "@spinjs/runtime";
+import { DefinedComponent } from "@spinjs/components/runtime";
 /**
  * The app-controller surface: `{ commands, state, bind, ref }`, for whichever
  * component the host is holding.
@@ -48,5 +48,4 @@ export interface SpinComponentCtl<TCommands extends object = object, TState exte
 /** The ctl for `target` — never nullish; resolution happens at call time. */
 export declare function spinComponentCtl<D extends DefinedComponent<any, any>>(def: D): CtlFor<D>;
 export declare function spinComponentCtl<D extends DefinedComponent<any, any>>(target: ElementTarget, def: D): CtlFor<D>;
-export declare function spinComponentCtl<TCommands extends object = object, TState extends object = Record<string, () => unknown>, TProps extends object = Record<string, unknown>>(target: ElementTarget, handle?: object): SpinComponentCtl<TCommands, TState, TProps>;
-//# sourceMappingURL=controller.d.ts.map
+export declare function spinComponentCtl<TCommands extends object = object, TState extends object = Record<string, () => unknown>, TProps extends object = Record<string, unknown>>(target: ElementTarget, handle?: object): SpinComponentCtl<TCommands, TState, TProps>;

package/dist/controller.js

@@ -1,5 +1,5 @@
 import { bindSpinElement } from "./spin-element.js";
-import { controllerOf, effect, scope, signal } from "@spinjs/runtime";
+import { controllerOf, effect, scope, signal } from "@spinjs/components/runtime";
 // src/controller.ts
 function resolveTarget(target) {
 	if (target === null || target === void 0) return void 0;

package/dist/date-input/date-input.events.d.ts

@@ -1,5 +1,5 @@
 import { DateValue } from "./date-input.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface DateInputEvents {
   "VALUE.SET": {
     value: DateValue | null | string;
@@ -33,5 +33,4 @@ export type DateInputEvent = EventUnion<DateInputEvents>;
 export type DateInputValueChange = {
   readonly value: DateValue | null;
   readonly valueAsString: string;
-};
-//# sourceMappingURL=date-input.events.d.ts.map
+};

package/dist/date-input/date-input.machine.d.ts

@@ -1,6 +1,6 @@
+/** Date-input machine: the field values, the focused segment, and the keys typed into it. */
 import { DateInputArgs, DateInputContext, DateInputState } from "./date-input.state.js";
 import { DateInputEvents } from "./date-input.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { Machine } from "@spinjs/components/fsm";
 export declare function dateInput(args?: DateInputArgs, authored?: (name: string) => boolean): Machine<DateInputContext, DateInputEvents, DateInputState>;
-export type { DateInputState };
-//# sourceMappingURL=date-input.machine.d.ts.map
+export type { DateInputState };

package/dist/date-input/date-input.machine.js

@@ -1,6 +1,6 @@
 import { clearEnteredKeys, initial } from "./date-input.state.js";
 import { adjustSegment, arrowLeft, arrowRight, backspaceClear, backspaceEmpty, backspacePrev, blurSegment, clearValue, endSegment, focusSegment, homeSegment, inputSegment, isSameSegmentFocus, pasteSegment, setHourCycle, setValue } from "./date-input.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/date-input/date-input.machine.ts
 /** Date-input machine: the field values, the focused segment, and the keys typed into it. */
 function dateInput(args = {}, authored = () => false) {

package/dist/date-input/date-input.presentation.d.ts

@@ -1,6 +1,6 @@
 import { DateInputArgs, DateInputContext, DateInputField, DateInputState, DateValue } from "./date-input.state.js";
 import { DateInputEvents, DateInputValueChange } from "./date-input.events.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
 /** One rendered segment: a field the user edits, or a literal between them. */
 export interface DateSegmentView {
   readonly index: number;
@@ -14,10 +14,10 @@ type ScopeLike = ViewFor<DateInputContext, DateInputEvents, DateInputState>;
 /** The component's public state: the names the markup may key on. */
 export declare const def: {
   name: string;
-  machine: (args: DateInputArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<DateInputContext, DateInputEvents, DateInputState>;
+  machine: (args: DateInputArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<DateInputContext, DateInputEvents, DateInputState>;
   start: "idle";
   settled: ({ before, after, focus }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: DateInputContext;
       readonly state: DateInputState;
@@ -31,7 +31,7 @@ export declare const def: {
     readonly id: (part: string, slot?: unknown) => string;
     readonly focus: (part: string, slot?: unknown) => void;
     readonly measure: (part: string, slot?: unknown) => DOMRect | null;
-    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+    readonly send: (event: import("@spinjs/components/runtime").AnyEvent) => void;
   }) => void;
   parts: {
     segment: {
@@ -128,6 +128,5 @@ export declare const def: {
   };
 };
 export type DateInputApi = ApiOf<typeof def>;
-export declare const dateInput: import("@spinjs/runtime").DefinedComponent<DateInputApi, DateInputArgs>;
-export type { DateInputValueChange, DateValue };
-//# sourceMappingURL=date-input.presentation.d.ts.map
+export declare const dateInput: import("@spinjs/components/runtime").DefinedComponent<DateInputApi, DateInputArgs>;
+export type { DateInputValueChange, DateValue };

package/dist/date-input/date-input.presentation.js

@@ -1,6 +1,6 @@
 import { FIELD_LIMITS, clampValue as clampValue$1, daysInMonth, segmentFields, valueAsString } from "./date-input.state.js";
 import { dateInput as dateInput$1 } from "./date-input.machine.js";
-import { ariaDisabled, ariaInvalid, ariaLabelledBy, ariaReadOnly, defineComponent, isRecord, sliderThumb } from "@spinjs/runtime";
+import { ariaDisabled, ariaInvalid, ariaLabelledBy, ariaReadOnly, defineComponent, isRecord, sliderThumb } from "@spinjs/components/runtime";
 // src/date-input/date-input.presentation.ts
 const FIELD_LABELS = {
 	year: "Year",

package/dist/date-input/date-input.state.d.ts

@@ -73,5 +73,4 @@ export declare function commit(next: DateFields, ctx: DateInputContext): Partial
 export declare function advance(next: DateFields, ctx: DateInputContext, index: number, fields: readonly DateInputField[]): Partial<DateInputContext>;
 export declare const setActiveSegment: (_ctx: DateInputContext, e: DateInputEvent) => Partial<DateInputContext>;
 export declare const clearEnteredKeys: () => Partial<DateInputContext>;
-export declare const setPrevSegment: (ctx: DateInputContext) => Partial<DateInputContext>;
-//# sourceMappingURL=date-input.state.d.ts.map
+export declare const setPrevSegment: (ctx: DateInputContext) => Partial<DateInputContext>;

package/dist/date-input/date-input.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/date-input/date-input.state.ts
 const FIELD_LIMITS = {
 	year: {

package/dist/date-input/date-input.transitions.d.ts

@@ -1,6 +1,6 @@
-import { DateInputContext } from "./date-input.state.js";
 import { DateInputEvents } from "./date-input.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { DateInputContext } from "./date-input.state.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type DateInputAssign<K extends keyof DateInputEvents = keyof DateInputEvents> = AssignFor<DateInputContext, DateInputEvents, K>;
 export declare const setValue: DateInputAssign<"VALUE.SET">;
 export declare const clearValue: DateInputAssign<"VALUE.CLEAR">;
@@ -18,5 +18,4 @@ export declare const backspaceClear: DateInputAssign<"SEGMENT.BACKSPACE">;
 export declare const homeSegment: DateInputAssign<"SEGMENT.HOME">;
 export declare const endSegment: DateInputAssign<"SEGMENT.END">;
 export declare const pasteSegment: DateInputAssign<"SEGMENT.PASTE">;
-export {};
-//# sourceMappingURL=date-input.transitions.d.ts.map
+export {};

package/dist/date-input/examples/basic.html

@@ -5,11 +5,11 @@ const machine = dateInput({});
 </script>
 
 <div class="w-fit max-w-full" {...machine.getRootProps()}>
-  <label class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]} {...machine.getLabelProps()}>Date</label>
-  <div class={["flex h-7 items-center gap-1 rounded-md border border-solid border-border bg-surface px-2 text-sm text-text shadow-sm transition-colors duration-fast ease-decelerate", { "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]} {...machine.getControlProps()}>
+  <label class={["block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]} {...machine.getLabelProps()}>Date</label>
+  <div class={["flex h-7 items-center gap-1 rounded-md border bg-surface px-2 type-body shadow-sm transition-colors duration-fast ease-decelerate", { "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]} {...machine.getControlProps()}>
     <template for={machine.getSegments()} as={row} key={row.index}>
       <span
-        class={["rounded-sm px-1 tabular-nums outline-none transition-colors duration-fast ease-decelerate", { "bg-primary text-on-primary": machine.activeSegment === row.fieldIndex, "text-text-muted": row.placeholder }]}
+        class={["rounded-sm px-1 tabular-nums outline-none transition-colors duration-fast ease-decelerate", { "bg-primary text-on-primary": row.field !== null && machine.activeSegment === row.fieldIndex, "px-0 select-none text-muted": row.field === null, "text-muted": row.placeholder }]}
         {...machine.getSegmentProps(row.fieldIndex)}
       >{row.text}</span>
     </template>

package/dist/date-input/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/date-input/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { dateInput } from \"../date-input.presentation.ts\";\n\nconst machine = dateInput({});\n<\/script>\n\n<div class=\"w-fit max-w-full\" {...machine.getRootProps()}>\n  <label class={[\"block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]} {...machine.getLabelProps()}>Date</label>\n  <div class={[\"flex h-7 items-center gap-1 rounded-md border bg-surface px-2 type-body shadow-sm transition-colors duration-fast ease-decelerate\", { \"ring-2 ring-border-strong\": machine.focused, \"cursor-not-allowed opacity-50\": machine.disabled }]} {...machine.getControlProps()}>\n    <template for={machine.getSegments()} as={row} key={row.index}>\n      <span\n        class={[\"rounded-sm px-1 tabular-nums outline-none transition-colors duration-fast ease-decelerate\", { \"bg-primary text-on-primary\": row.field !== null && machine.activeSegment === row.fieldIndex, \"px-0 select-none text-muted\": row.field === null, \"text-muted\": row.placeholder }]}\n        {...machine.getSegmentProps(row.fieldIndex)}\n      >{row.text}</span>\n    </template>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/date-picker/date-picker.events.d.ts

@@ -1,5 +1,5 @@
 import { DatePickerValue, DatePickerView } from "./date-picker.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface DatePickerValueChange {
   readonly value: readonly DatePickerValue[];
   readonly valueAsString: readonly string[];
@@ -38,5 +38,4 @@ export interface DatePickerEvents {
   };
   "TABLE.ESCAPE": {};
 }
-export type DatePickerEvent = EventUnion<DatePickerEvents>;
-//# sourceMappingURL=date-picker.events.d.ts.map
+export type DatePickerEvent = EventUnion<DatePickerEvents>;

package/dist/date-picker/date-picker.machine.d.ts

@@ -1,6 +1,5 @@
 import { DatePickerArgs, DatePickerContext, DatePickerSelectionMode, DatePickerState, DatePickerValue, DatePickerView, daysOf, normalizeDays } from "./date-picker.state.js";
 import { DatePickerEvents } from "./date-picker.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { Machine } from "@spinjs/components/fsm";
 export declare function datePicker(args: DatePickerArgs | undefined, authored: (name: string) => boolean): Machine<DatePickerContext, DatePickerEvents, DatePickerState>;
-export { type DatePickerArgs, type DatePickerContext, type DatePickerEvents, type DatePickerSelectionMode, type DatePickerState, type DatePickerValue, type DatePickerView, daysOf, normalizeDays };
-//# sourceMappingURL=date-picker.machine.d.ts.map
+export { type DatePickerArgs, type DatePickerContext, type DatePickerEvents, type DatePickerSelectionMode, type DatePickerState, type DatePickerValue, type DatePickerView, daysOf, normalizeDays };

package/dist/date-picker/date-picker.machine.js

@@ -1,6 +1,6 @@
 import { daysOf, initial, normalizeDays } from "./date-picker.state.js";
 import { clearHover, clearValue, drillIntoView, hoverRangeDay, isAboveDayView, isDayView, isMultiPicker, isRangePicker, isSelfClosingSelection, resetView, selectRangeDay, selectSingleDay, setFocusAboveDay, setFocusDay, setValue, setView, toggleMultiDay } from "./date-picker.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/date-picker/date-picker.machine.ts
 function datePicker(args = {}, authored) {
 	return createMachine({