@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/slider/slider.presentation.js

@@ -0,0 +1,322 @@
+import { percentOf, thumbRange, valueOfPercent } from "./slider.state.js";
+import { slider as slider$1 } from "./slider.machine.js";
+import { ariaDisabled, ariaOrientation, defineComponent, isComposing, isInteractive, sliderThumb } from "@spinjs/runtime";
+// src/slider/slider.presentation.ts
+/** A client point as a stepped track value, measured off the track node. */
+const trackValue = (measure, orientation, dir, context, clientX, clientY) => {
+	const rect = measure("track");
+	if (rect === null) return null;
+	if (orientation === "vertical") {
+		const percent = rect.height <= 0 ? 0 : (rect.bottom - clientY) / rect.height;
+		return valueOfPercent(context, Math.min(1, Math.max(0, percent)));
+	}
+	const raw = rect.width <= 0 ? 0 : (clientX - rect.left) / rect.width;
+	const percent = dir === "rtl" ? 1 - raw : raw;
+	return valueOfPercent(context, Math.min(1, Math.max(0, percent)));
+};
+const thumbIndexCache = /* @__PURE__ */ new Map();
+/** The thumb slots, as plain indices: primitives memoize by value, so a
+* fresh inline literal hits the same cache entry.
+*/
+const thumbIndexes = (length) => {
+	const hit = thumbIndexCache.get(length);
+	if (hit !== void 0) return hit;
+	const made = Array.from({ length }, (_, index) => index);
+	thumbIndexCache.set(length, made);
+	return made;
+};
+const def = {
+	name: "slider",
+	machine: (args, authored) => slider$1(args, authored),
+	start: "idle",
+	commitEvents: [
+		"POINTER_UP",
+		"ARROW_INC",
+		"ARROW_DEC",
+		"HOME",
+		"END",
+		"INCREMENT",
+		"DECREMENT",
+		"SET_VALUE"
+	],
+	parts: {
+		root: {},
+		label: { attrs: (scope) => ({
+			for: scope.id("input", 0),
+			style: { userSelect: "none" },
+			onClick: (event) => {
+				if (!isInteractive(scope.context)) return;
+				event.preventDefault();
+				scope.send({
+					type: "FOCUS",
+					index: Math.max(0, scope.context.focusedIndex)
+				});
+			}
+		}) },
+		valueText: { id: "value-text" },
+		control: { attrs: (scope) => ({
+			style: {
+				position: "relative",
+				touchAction: "none"
+			},
+			"use:drag": {
+				enabled: isInteractive(scope.context),
+				preventDefault: true,
+				stopPropagation: true,
+				cancelOnEscape: false,
+				onStart: (press) => {
+					const context = scope.context;
+					if (press.metaKey || press.ctrlKey || press.altKey) return;
+					const value = trackValue(scope.measure, context.orientation, press.direction, context, press.x, press.y);
+					if (value === null) return;
+					scope.send({
+						type: "POINTER_DOWN",
+						pointValue: value
+					});
+				},
+				onMove: (delta) => {
+					if (scope.state !== "dragging") return;
+					const value = trackValue(scope.measure, scope.context.orientation, delta.direction, scope.context, delta.x, delta.y);
+					if (value === null) return;
+					scope.send({
+						type: "POINTER_MOVE",
+						pointValue: value
+					});
+				},
+				onEnd: () => {
+					if (scope.state !== "dragging") return;
+					scope.send({ type: "POINTER_UP" });
+				}
+			}
+		}) },
+		track: { attrs: () => ({ style: { position: "relative" } }) },
+		range: { attrs: (scope) => {
+			const context = scope.context;
+			const percents = context.value.map((value) => percentOf(context, value));
+			const origin = context.origin;
+			const single = percents.length < 2;
+			const low = single && origin === "start" ? 0 : Math.min(...percents);
+			const high = single && origin === "end" ? 100 : Math.max(...percents);
+			return { style: context.orientation === "vertical" ? {
+				bottom: `${low}%`,
+				height: `calc(${high}% - ${low}%)`
+			} : {
+				insetInlineStart: `${low}%`,
+				width: `calc(${high}% - ${low}%)`
+			} };
+		} },
+		markerGroup: { id: "marker-group" }
+	},
+	slots: {
+		thumb: {
+			indexes: (context) => thumbIndexes(context.value.length),
+			attrs: (scope) => {
+				const context = scope.context;
+				const value = context.value[scope.slot] ?? context.min;
+				const range = thumbRange(context, scope.slot);
+				const percent = percentOf(context, value);
+				const vertical = context.orientation === "vertical";
+				const orientation = context.orientation;
+				return {
+					id: scope.id("thumb", scope.slot),
+					"data-index": String(scope.slot),
+					draggable: "false",
+					...ariaDisabled(context.disabled ? "true" : void 0),
+					...ariaOrientation(orientation === "horizontal" || orientation === "vertical" ? orientation : void 0),
+					...sliderThumb({
+						max: String(range.max),
+						min: String(range.min),
+						now: String(value)
+					}),
+					role: "slider",
+					tabindex: context.disabled ? void 0 : "0",
+					style: vertical ? { bottom: `${percent}%` } : { insetInlineStart: `${percent}%` },
+					"use:drag": {
+						enabled: isInteractive(scope.context),
+						preventDefault: false,
+						stopPropagation: true,
+						cancelOnEscape: false,
+						onStart: () => {
+							scope.send({
+								type: "THUMB_POINTER_DOWN",
+								index: scope.slot
+							});
+						},
+						onMove: (delta) => {
+							if (scope.state !== "dragging") return;
+							const value = trackValue(scope.measure, scope.context.orientation, delta.direction, scope.context, delta.x, delta.y);
+							if (value === null) return;
+							scope.send({
+								type: "POINTER_MOVE",
+								pointValue: value
+							});
+						},
+						onEnd: () => {
+							if (scope.state !== "dragging") return;
+							scope.send({ type: "POINTER_UP" });
+						}
+					},
+					onBlur: () => {
+						if (!isInteractive(scope.context)) return;
+						scope.send({ type: "BLUR" });
+					},
+					onFocus: () => {
+						if (!isInteractive(scope.context)) return;
+						scope.send({
+							type: "FOCUS",
+							index: scope.slot
+						});
+					},
+					onKeydown: (event) => {
+						if (event.defaultPrevented) return;
+						if (!isInteractive(scope.context)) return;
+						if (isComposing(event)) return;
+						const large = event.shiftKey ? scope.context.largeStep : void 0;
+						const keyed = (type) => {
+							event.preventDefault();
+							event.stopPropagation();
+							scope.send(large !== void 0 && (type === "ARROW_INC" || type === "ARROW_DEC") ? {
+								type,
+								step: large
+							} : { type });
+							return true;
+						};
+						const horizontal = scope.context.orientation === "horizontal";
+						const rtl = event.target instanceof Element && event.target.ownerDocument?.defaultView?.getComputedStyle(event.target).direction === "rtl";
+						switch (event.key) {
+							case "ArrowUp":
+								if (!horizontal) keyed("ARROW_INC");
+								break;
+							case "ArrowDown":
+								if (!horizontal) keyed("ARROW_DEC");
+								break;
+							case "ArrowLeft":
+								if (horizontal) keyed(rtl ? "ARROW_INC" : "ARROW_DEC");
+								break;
+							case "ArrowRight":
+								if (horizontal) keyed(rtl ? "ARROW_DEC" : "ARROW_INC");
+								break;
+							case "PageUp":
+								keyed("ARROW_INC");
+								break;
+							case "PageDown":
+								keyed("ARROW_DEC");
+								break;
+							case "Home":
+								keyed("HOME");
+								break;
+							case "End": keyed("END");
+						}
+					}
+				};
+			}
+		},
+		marker: {
+			indexes: (context) => context.markers,
+			attrs: (scope) => {
+				const slot = scope.slot;
+				const context = scope.context;
+				const percent = percentOf(context, slot);
+				const vertical = context.orientation === "vertical";
+				return {
+					id: scope.id("marker", slot),
+					"data-value": String(slot),
+					style: vertical ? { bottom: `${percent}%` } : { insetInlineStart: `${percent}%` }
+				};
+			}
+		},
+		hiddenInput: {
+			id: "input",
+			stamp: false,
+			indexes: (context) => thumbIndexes(context.value.length),
+			attrs: (scope, arg) => {
+				const context = scope.context;
+				const index = scope.slot;
+				const value = context.value[index] ?? context.min;
+				const name = typeof arg === "string" ? arg : "";
+				return {
+					id: scope.id("input", index),
+					name: name.length > 0 ? context.value.length > 1 ? `${name}[]` : name : void 0,
+					form: void 0,
+					type: "text",
+					hidden: true,
+					value: String(value)
+				};
+			}
+		}
+	},
+	commands: {
+		setValue: { event: ([value]) => ({
+			type: "SET_VALUE",
+			value
+		}) },
+		setThumbValue: { event: ([index, value], context) => {
+			const next = [...context.value];
+			const i = Math.trunc(index);
+			next[i] = value;
+			return {
+				type: "SET_VALUE",
+				value: next,
+				index: i
+			};
+		} },
+		increment: { event: ([index]) => index !== void 0 ? {
+			type: "INCREMENT",
+			index: Math.trunc(index)
+		} : { type: "INCREMENT" } },
+		decrement: { event: ([index]) => index !== void 0 ? {
+			type: "DECREMENT",
+			index: Math.trunc(index)
+		} : { type: "DECREMENT" } },
+		focus: { event: () => ({
+			type: "FOCUS",
+			index: 0
+		}) }
+	},
+	readers: {
+		value: { read: (context) => context.value },
+		markers: { read: (context) => context.markers },
+		valueText: { read: (context) => context.value.join(", ") },
+		dragging: { read: (_context, state) => state === "dragging" },
+		focused: { read: (_context, state) => state === "focus" },
+		focusedIndex: { read: (context) => context.focusedIndex },
+		disabled: { read: (context) => context.disabled }
+	},
+	methods: {
+		getThumbValue: { call: (context, _state, [index]) => context.value[Math.trunc(index)] ?? context.min },
+		getThumbPercent: { call: (context, _state, [index]) => percentOf(context, context.value[Math.trunc(index)] ?? context.min) },
+		getThumbMin: { call: (context, _state, [index]) => thumbRange(context, Math.trunc(index)).min },
+		getThumbMax: { call: (context, _state, [index]) => thumbRange(context, Math.trunc(index)).max },
+		getMarkers: { call: (context) => context.markers }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [...context.value],
+			detail: (watched) => ({ value: [...watched] })
+		},
+		"value-change-end": {
+			prop: "onValueChangeEnd",
+			on: "commit",
+			watch: (context) => [...context.value],
+			detail: (watched) => ({ value: [...watched] })
+		},
+		"focus-change": {
+			prop: "onFocusChange",
+			watch: (context) => [context.focusedIndex, ...context.value],
+			detail: (watched) => ({
+				focusedIndex: watched[0],
+				value: watched.slice(1)
+			})
+		}
+	},
+	settled: ({ event, after, focus }) => {
+		if (event.type !== "ARROW_INC" && event.type !== "ARROW_DEC" && event.type !== "HOME" && event.type !== "END" && event.type !== "INCREMENT" && event.type !== "DECREMENT") return;
+		const idx = after.context.focusedIndex;
+		if (idx >= 0) focus("thumb", idx);
+	}
+};
+const slider = defineComponent(def);
+export { def, slider };
+
+//# sourceMappingURL=slider.presentation.js.map

package/dist/slider/slider.state.d.ts

@@ -0,0 +1,72 @@
+export type SliderState = "idle" | "focus" | "dragging";
+export type ThumbCollisionBehavior = "none" | "push" | "swap";
+export interface SliderContext {
+  value: number[];
+  focusedIndex: number;
+  min: number;
+  max: number;
+  step: number;
+  largeStep: number;
+  minStepsBetweenThumbs: number;
+  origin: "start" | "center" | "end";
+  orientation: "horizontal" | "vertical";
+  thumbCollisionBehavior: ThumbCollisionBehavior;
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+  /** Marker stops for the ticks/marks usages. */
+  markers: number[];
+}
+/**
+ * The slider's arguments: the machine's own domain types. The host sets
+ * typed values; nothing parses text here.
+ *
+ * The twin (`defaultValue`) is resolved by the framework before the factory
+ * is called, so the machine only ever sees the live value.
+ */
+export interface SliderArgs {
+  value?: readonly number[];
+  min?: number;
+  max?: number;
+  step?: number;
+  /** The coarse step (shift+arrow); absent means ten times the step. */
+  largeStep?: number;
+  /** The gap the thumbs keep, in steps. */
+  minStepsBetweenThumbs?: number;
+  origin?: "start" | "center" | "end";
+  orientation?: "horizontal" | "vertical";
+  thumbCollisionBehavior?: ThumbCollisionBehavior;
+  disabled?: boolean;
+  readOnly?: boolean;
+  invalid?: boolean;
+  markers?: readonly number[];
+  defaultInvalid?: boolean;
+}
+/**
+ * The machine's context, built from its arguments: what the args did not
+ * carry takes the machine's own default.
+ *
+ * The seed twin (`defaultValue`) is the host's write of the value — the
+ * framework resolved it into the args — so it counts as a write too.
+ */
+export declare function initial(args: SliderArgs | undefined, authored: (name: string) => boolean): SliderContext;
+export declare function valuePercent(ctx: SliderContext): number[];
+declare function rangeAt(ctx: SliderContext, index: number): {
+  readonly min: number;
+  readonly max: number;
+  readonly value: number;
+};
+declare function constrain(ctx: SliderContext, value: number, index: number): number;
+declare function normalizeAll(ctx: SliderContext, next: readonly number[]): number[];
+declare function resolveNone(index: number, value: number, values: number[], min: number, max: number): number[];
+declare function handlePush(index: number, value: number, values: number[], min: number, max: number, gap: number): number[];
+/** Stacked thumbs at max move the first one. */
+export declare function movableIndex(values: readonly number[], index: number, max: number): number;
+export declare function thumbRange(ctx: SliderContext, index: number): {
+  min: number;
+  max: number;
+};
+export declare function percentOf(ctx: SliderContext, value: number): number;
+export declare function valueOfPercent(ctx: SliderContext, percent: number): number;
+export { constrain, handlePush, normalizeAll, rangeAt, resolveNone };
+//# sourceMappingURL=slider.state.d.ts.map

package/dist/slider/slider.state.js

@@ -0,0 +1,91 @@
+import { clampValue, getPercentValue, getValuePercent, getValueRanges, round10, snapValueToStep } from "@spinjs/runtime";
+// src/slider/slider.state.ts
+/**
+* The machine's context, built from its arguments: what the args did not
+* carry takes the machine's own default.
+*
+* The seed twin (`defaultValue`) is the host's write of the value — the
+* framework resolved it into the args — so it counts as a write too.
+*/
+function initial(args = {}, authored) {
+	const written = (field) => args[field] !== void 0 || authored(field);
+	const min = args.min ?? 0;
+	const max = args.max ?? 100;
+	const step = args.step ?? 1;
+	const valueOf = (raw, fallback) => raw === void 0 ? fallback : [...raw];
+	return {
+		min,
+		max,
+		step,
+		largeStep: args.largeStep ?? 10 * step,
+		minStepsBetweenThumbs: Math.max(0, Math.floor(args.minStepsBetweenThumbs ?? 0)),
+		origin: args.origin ?? "start",
+		orientation: args.orientation ?? "horizontal",
+		thumbCollisionBehavior: args.thumbCollisionBehavior ?? "none",
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		invalid: args.invalid === true,
+		value: written("value") ? valueOf(args.value, [min]) : [min],
+		markers: valueOf(args.markers, []),
+		focusedIndex: -1
+	};
+}
+function valuePercent(ctx) {
+	return ctx.value.map((value) => getValuePercent(value, ctx.min, ctx.max));
+}
+function rangeAt(ctx, index) {
+	return getValueRanges(ctx.value, ctx.min, ctx.max, ctx.step * ctx.minStepsBetweenThumbs)[index] ?? {
+		min: ctx.min,
+		max: ctx.max,
+		value: ctx.value[index] ?? ctx.min
+	};
+}
+function constrain(ctx, value, index) {
+	const range = rangeAt(ctx, index);
+	const snapped = snapValueToStep(value, ctx.min, ctx.max, ctx.step);
+	return clampValue(snapped, range.min, range.max);
+}
+function normalizeAll(ctx, next) {
+	return next.map((value, index) => constrain({
+		...ctx,
+		value: [...ctx.value]
+	}, value, index));
+}
+function resolveNone(index, value, values, min, max) {
+	if (values.length === 1) return [clampValue(value, min, max)];
+	const next = [...values];
+	next[index] = clampValue(value, min, max);
+	return next;
+}
+function handlePush(index, value, values, min, max, gap) {
+	const next = [...values];
+	next[index] = clampValue(value, min, max);
+	for (let i = index; i > 0; i -= 1) {
+		const upper = next[i] ?? max;
+		if ((next[i - 1] ?? min) > upper - gap) next[i - 1] = round10(upper - gap);
+	}
+	for (let i = index; i < next.length - 1; i += 1) {
+		const lower = next[i] ?? min;
+		if ((next[i + 1] ?? max) < lower + gap) next[i + 1] = round10(lower + gap);
+	}
+	return next.map((v) => clampValue(v, min, max));
+}
+/** Stacked thumbs at max move the first one. */
+function movableIndex(values, index, max) {
+	if ((values[index] ?? 0) !== max) return index;
+	let movable = index;
+	while (movable > 0 && values[movable - 1] === max) movable -= 1;
+	return movable;
+}
+function thumbRange(ctx, index) {
+	return rangeAt(ctx, index);
+}
+function percentOf(ctx, value) {
+	return getValuePercent(value, ctx.min, ctx.max) * 100;
+}
+function valueOfPercent(ctx, percent) {
+	return getPercentValue(percent, ctx.min, ctx.max, ctx.step);
+}
+export { constrain, handlePush, initial, movableIndex, normalizeAll, percentOf, rangeAt, resolveNone, thumbRange, valueOfPercent, valuePercent };
+
+//# sourceMappingURL=slider.state.js.map

package/dist/slider/slider.transitions.d.ts

@@ -0,0 +1,17 @@
+import { SliderContext } from "./slider.state.js";
+import { SliderEvents } from "./slider.events.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type SliderAssign<K extends keyof SliderEvents = keyof SliderEvents> = AssignFor<SliderContext, SliderEvents, K>;
+export declare const incrementThumb: SliderAssign<"INCREMENT" | "ARROW_INC">;
+export declare const decrementThumb: SliderAssign<"DECREMENT" | "ARROW_DEC">;
+export declare const setClosestThumb: SliderAssign<"POINTER_DOWN">;
+export declare const setFocusedIndex: SliderAssign<"FOCUS" | "THUMB_POINTER_DOWN">;
+export declare const clearFocusedIndex: () => Partial<SliderContext>;
+export declare const setPointerValue: SliderAssign<"POINTER_DOWN" | "POINTER_MOVE">;
+export declare const hasIndex: GuardFor<SliderContext, SliderEvents>;
+export declare const setIndexedValue: SliderAssign<"SET_VALUE">;
+export declare const setAllValues: SliderAssign<"SET_VALUE">;
+export declare const setHomeValue: (ctx: SliderContext) => Partial<SliderContext>;
+export declare const setEndValue: (ctx: SliderContext) => Partial<SliderContext>;
+export {};
+//# sourceMappingURL=slider.transitions.d.ts.map

package/dist/slider/slider.transitions.js

@@ -0,0 +1,62 @@
+import { constrain, handlePush, movableIndex, normalizeAll, rangeAt, resolveNone } from "./slider.state.js";
+import { clampValue, closestIndex, getNextStepValue, getPreviousStepValue } from "@spinjs/runtime";
+// src/slider/slider.transitions.ts
+const incrementThumb = (ctx, event) => {
+	const index = event.type === "INCREMENT" && event.index !== void 0 ? event.index : ctx.focusedIndex;
+	if (index < 0 || index >= ctx.value.length) return {};
+	const range = rangeAt(ctx, index);
+	const next = [...getNextStepValue(index, {
+		...range,
+		step: event.step ?? ctx.step,
+		values: [...ctx.value]
+	})];
+	next[index] = clampValue(next[index] ?? ctx.min, range.min, range.max);
+	return { value: next };
+};
+const decrementThumb = (ctx, event) => {
+	const index = event.type === "DECREMENT" && event.index !== void 0 ? event.index : ctx.focusedIndex;
+	if (index < 0 || index >= ctx.value.length) return {};
+	const range = rangeAt(ctx, index);
+	const next = [...getPreviousStepValue(index, {
+		...range,
+		step: event.step ?? ctx.step,
+		values: [...ctx.value]
+	})];
+	next[index] = clampValue(next[index] ?? ctx.min, range.min, range.max);
+	return { value: next };
+};
+const setClosestThumb = (ctx, event) => ({ focusedIndex: movableIndex(ctx.value, closestIndex(ctx.value, event.pointValue), ctx.max) });
+const setFocusedIndex = (_ctx, event) => ({ focusedIndex: event.type === "THUMB_POINTER_DOWN" ? event.index : event.index ?? 0 });
+const clearFocusedIndex = () => ({ focusedIndex: -1 });
+const setPointerValue = (ctx, event) => {
+	if (ctx.thumbCollisionBehavior === "push") {
+		const gap = ctx.step * ctx.minStepsBetweenThumbs;
+		return { value: handlePush(ctx.focusedIndex, event.pointValue, ctx.value, ctx.min, ctx.max, gap) };
+	}
+	return { value: resolveNone(ctx.focusedIndex, event.pointValue, ctx.value, ctx.min, ctx.max) };
+};
+const hasIndex = (_ctx, event) => event.type === "SET_VALUE" && event.index !== void 0 && event.index !== null;
+const setIndexedValue = (ctx, event) => {
+	const values = [...event.value];
+	if (event.index === void 0 || event.index === null) return {};
+	if (values[event.index] === void 0) return {};
+	const next = [...ctx.value];
+	next[event.index] = constrain(ctx, values[event.index] ?? ctx.min, event.index);
+	return { value: next };
+};
+const setAllValues = (ctx, event) => ({ value: normalizeAll(ctx, [...event.value]) });
+const setHomeValue = (ctx) => {
+	if (ctx.focusedIndex < 0) return {};
+	const next = [...ctx.value];
+	next[ctx.focusedIndex] = rangeAt(ctx, ctx.focusedIndex).min;
+	return { value: next };
+};
+const setEndValue = (ctx) => {
+	if (ctx.focusedIndex < 0) return {};
+	const next = [...ctx.value];
+	next[ctx.focusedIndex] = rangeAt(ctx, ctx.focusedIndex).max;
+	return { value: next };
+};
+export { clearFocusedIndex, decrementThumb, hasIndex, incrementThumb, setAllValues, setClosestThumb, setEndValue, setFocusedIndex, setHomeValue, setIndexedValue, setPointerValue };
+
+//# sourceMappingURL=slider.transitions.js.map

package/dist/solid/solid.d.ts

@@ -0,0 +1,36 @@
+import { CtlFor, ElementTarget, SpinComponentCtl, spinComponentCtl } from "../controller.js";
+import { DefinedComponent } from "@spinjs/runtime";
+/**
+ * Solid adapter: `createSpinComponent(el)` is the app controller's
+ * instrument.
+ *
+ * The element is a locator, not a product — the host already owns it. What
+ * this adds is the component's controller surface (`{ commands, state,
+ * bind }`), reached through the same context markup consumes. Whether a
+ * machine or the platform owns the component's state is invisible here: the
+ * surface is the same.
+ *
+ * The ctl is never nullish: it resolves the element on every access, so the
+ * host holds one handle and `bind` inside a `createEffect` subscribes to the
+ * element signal and runs when the element mounts. It stays callable for
+ * hosts that prefer `ctl()` reads.
+ *
+ * State reads are the component's own signals, so reading
+ * `ctl.state.<field>()` inside a tracking scope subscribes to that
+ * component's moves — no polling, no synthetic events.
+ *
+ * ```tsx
+ * const [drawerEl, setDrawerEl] = createSignal<HTMLElement>();
+ * const drawer = createSpinComponent(drawerEl);
+ * // Props bind at ref time, so seeds land before the build reads them.
+ * createEffect(() => drawer.bind({ open: open() }, { "open-change": (e) => setOpen(e.detail.open) }));
+ * <spin-drawer ref={drawer.ref} />
+ * drawer.commands.show();
+ * ```
+ */
+export type SpinComponentCtlAccessor<TCommands extends object = object, TState extends object = Record<string, () => unknown>, TProps extends object = Record<string, unknown>> = (() => SpinComponentCtl<TCommands, TState, TProps>) & SpinComponentCtl<TCommands, TState, TProps>;
+export declare function createSpinComponent<D extends DefinedComponent<any, any>>(def: D): (() => CtlFor<D>) & CtlFor<D>;
+export declare function createSpinComponent<D extends DefinedComponent<any, any>>(target: ElementTarget, def: D): (() => CtlFor<D>) & CtlFor<D>;
+export declare function createSpinComponent<TCommands extends object = object, TState extends object = Record<string, () => unknown>, TProps extends object = Record<string, unknown>>(el: ElementTarget, handle?: object): SpinComponentCtlAccessor<TCommands, TState, TProps>;
+export { spinComponentCtl };
+//# sourceMappingURL=solid.d.ts.map

package/dist/solid/solid.js

@@ -0,0 +1,10 @@
+import { spinComponentCtl } from "../controller.js";
+// src/solid/solid.ts
+function createSpinComponent(target, handleOrDef) {
+	const ctl = spinComponentCtl(target, handleOrDef);
+	const accessor = (() => ctl);
+	return Object.assign(accessor, ctl);
+}
+export { createSpinComponent, spinComponentCtl };
+
+//# sourceMappingURL=solid.js.map

package/dist/spin-element.d.ts

@@ -0,0 +1,13 @@
+/** A spin element as hosts see it: props down, events up, commands in. */
+export interface SpinElement {
+  [key: string]: unknown;
+}
+export interface SpinHookOptions<TProps extends object> {
+  /** Written as element properties. */
+  readonly props?: TProps | undefined;
+  /** CustomEvent name -> handler, subscribed for the element's lifetime. */
+  readonly on?: Readonly<Record<string, (event: CustomEvent) => void>> | undefined;
+}
+/** Attach-time work shared by every adapter: write props, bind events. */
+export declare function bindSpinElement<TProps extends object>(el: Element, { props, on }: SpinHookOptions<TProps>): () => void;
+//# sourceMappingURL=spin-element.d.ts.map

package/dist/spin-element.js

@@ -0,0 +1,38 @@
+import { writeProp } from "@spinjs/runtime";
+// src/spin-element.ts
+/**
+* Host hooks for spin elements: the drop-in surface for framework apps.
+*
+* The elements are framework-agnostic by construction (custom elements,
+* property writes down, CustomEvents up). This package is the typed,
+* ergonomic version of that contract for the frameworks people actually
+* use — one small adapter each, no framework runtime dependency beyond the
+* host itself.
+*
+* What a hook gives you over raw refs:
+* - declared props written as properties on attach, re-written when they
+*   change (so controlled usage is a normal reactive binding);
+* - declared events subscribed with cleanup on unmount — no manual
+*   listener bookkeeping;
+* - the element's imperative commands (`el.show()`, `el.hide()`) typed and
+*   reachable, for the cases events don't cover;
+* - the machine's read-only state (where the machine-def exposes it).
+*
+* The three surface shapes stay identical across adapters on purpose: the
+* day a framework needs something new, the change is one file.
+*/
+/** Attach-time work shared by every adapter: write props, bind events. */
+function bindSpinElement(el, { props, on }) {
+	for (const [name, value] of Object.entries(props ?? {})) {
+		if (writeProp(el, name, value)) continue;
+		el[name] = value;
+	}
+	const entries = Object.entries(on ?? {});
+	for (const [name, handler] of entries) el.addEventListener(name, handler);
+	return () => {
+		for (const [name, handler] of entries) el.removeEventListener(name, handler);
+	};
+}
+export { bindSpinElement };
+
+//# sourceMappingURL=spin-element.js.map