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

package/dist/toggle-group/toggle-group.presentation.js

@@ -0,0 +1,217 @@
+import { isInteractive as isInteractive$1, isPressed } from "./toggle-group.state.js";
+import { toggleGroup as toggleGroup$1 } from "./toggle-group.machine.js";
+import { ariaPressed, defineComponent, focuser, isComposing, optionRow } from "@spinjs/runtime";
+// src/toggle-group/toggle-group.presentation.ts
+/** The view reflex: a roving move hands DOM focus to the focused item. */
+const focusItem = (scopeId, value) => {
+	focuser(scopeId)("item", value);
+};
+const orderOf = (scope) => scope.context.items.filter((item) => !(item.disabled === true || scope.context.disabled));
+const neighbor = (scope, value, direction) => {
+	const enabled = orderOf(scope);
+	const at = enabled.findIndex((item) => item.value === value);
+	if (at < 0 || enabled.length === 0) return null;
+	const next = at + direction;
+	if (next < 0 || next >= enabled.length) {
+		if (scope.context.loopFocus !== true) return null;
+		return enabled[(next + enabled.length) % enabled.length]?.value ?? null;
+	}
+	return enabled[next]?.value ?? null;
+};
+const def = {
+	name: "toggle-group",
+	machine: (args, authored) => toggleGroup$1(args, authored),
+	start: "idle",
+	parts: { root: { attrs: (scope) => {
+		const context = scope.context;
+		return {
+			role: context.multiple === true ? "group" : "radiogroup",
+			tabindex: context.tabbingBackward ? "-1" : "0",
+			"data-disabled": scope.attr(context.disabled),
+			"data-focus": scope.attr(context.focusedId !== null),
+			style: { outline: "none" },
+			onMousedown: () => {
+				if (!isInteractive$1(context)) return;
+				scope.send({ type: "ROOT.MOUSE_DOWN" });
+			},
+			onFocus: (event) => {
+				const ctx = scope.context;
+				if (!isInteractive$1(ctx)) return;
+				if (event.currentTarget !== event.target) return;
+				if (ctx.clickFocus) return;
+				if (ctx.tabbingBackward) return;
+				scope.send({ type: "ROOT.FOCUS" });
+				const first = orderOf(scope)[0]?.value;
+				if (first !== void 0) focusItem(scope.id, first);
+			},
+			onBlur: (event) => {
+				const related = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
+				if (related !== null && event.currentTarget instanceof Element && event.currentTarget.contains(related)) return;
+				if (!isInteractive$1(scope.context)) return;
+				scope.send({ type: "ROOT.BLUR" });
+			}
+		};
+	} } },
+	slots: { item: {
+		indexes: (context) => context.items,
+		attrs: (scope) => {
+			const row = scope.slot;
+			const context = scope.context;
+			const pressed = isPressed(context, row.value);
+			const focused = context.focusedId === scope.id("item", row.value);
+			const itemDisabled = row.disabled === true || context.disabled === true;
+			const horizontal = context.orientation === "horizontal";
+			const multiple = context.multiple === true;
+			const roving = context.rovingFocus !== false;
+			const step = (direction, type) => {
+				const next = neighbor(scope, row.value, direction);
+				if (next === null) return;
+				scope.send({
+					type,
+					id: scope.id("item", next)
+				});
+				focusItem(scope.id, next);
+			};
+			return {
+				id: scope.id("item", row.value),
+				type: "button",
+				"data-focus": scope.attr(focused),
+				disabled: itemDisabled ? true : void 0,
+				tabindex: roving ? focused ? "0" : "-1" : void 0,
+				role: multiple ? void 0 : "radio",
+				...optionRow({ checked: multiple ? void 0 : pressed ? "true" : "false" }),
+				...ariaPressed(multiple ? pressed ? "true" : "false" : void 0),
+				"data-disabled": scope.attr(itemDisabled),
+				"data-state": pressed ? "on" : "off",
+				onFocus: () => {
+					if (itemDisabled) return;
+					scope.send({
+						type: "TOGGLE.FOCUS",
+						id: scope.id("item", row.value)
+					});
+				},
+				onClick: (event) => {
+					if (itemDisabled) return;
+					if (event.defaultPrevented) return;
+					scope.send({
+						type: "TOGGLE.CLICK",
+						id: scope.id("item", row.value),
+						value: row.value
+					});
+				},
+				onKeydown: (event) => {
+					if (event.defaultPrevented) return;
+					if (itemDisabled) return;
+					if (isComposing(event)) return;
+					const first = () => scope.id("item", orderOf(scope)[0]?.value ?? "");
+					switch (event.key) {
+						case "Tab":
+							scope.send({
+								type: "TOGGLE.SHIFT_TAB",
+								isShiftTab: event.shiftKey,
+								firstId: first()
+							});
+							break;
+						case "ArrowLeft":
+							if (roving && horizontal) {
+								const next = neighbor(scope, row.value, -1);
+								if (next !== null) {
+									event.preventDefault();
+									scope.send({
+										type: "TOGGLE.FOCUS_PREV",
+										id: scope.id("item", next)
+									});
+									focusItem(scope.id, next);
+								}
+							}
+							break;
+						case "ArrowRight":
+							if (roving && horizontal) {
+								const next = neighbor(scope, row.value, 1);
+								if (next !== null) {
+									event.preventDefault();
+									scope.send({
+										type: "TOGGLE.FOCUS_NEXT",
+										id: scope.id("item", next)
+									});
+									focusItem(scope.id, next);
+								}
+							}
+							break;
+						case "ArrowUp":
+							if (roving && !horizontal) step(-1, "TOGGLE.FOCUS_PREV");
+							break;
+						case "ArrowDown":
+							if (roving && !horizontal) step(1, "TOGGLE.FOCUS_NEXT");
+							break;
+						case "Home": {
+							const firstValue = orderOf(scope)[0]?.value;
+							if (roving && firstValue !== void 0) {
+								event.preventDefault();
+								scope.send({
+									type: "TOGGLE.FOCUS_FIRST",
+									id: scope.id("item", firstValue)
+								});
+								focusItem(scope.id, firstValue);
+							}
+							break;
+						}
+						case "End": {
+							const enabled = orderOf(scope);
+							const last = enabled[enabled.length - 1]?.value;
+							if (roving && last !== void 0) {
+								event.preventDefault();
+								scope.send({
+									type: "TOGGLE.FOCUS_LAST",
+									id: scope.id("item", last)
+								});
+								focusItem(scope.id, last);
+							}
+							break;
+						}
+					}
+				}
+			};
+		}
+	} },
+	commands: { setValue: { event: ([value]) => ({
+		type: "VALUE.SET",
+		value: [...value]
+	}) } },
+	readers: {
+		value: { read: (context) => context.value },
+		multiple: { read: (context) => context.multiple },
+		disabled: { read: (context) => context.disabled },
+		orientation: { read: (context) => context.orientation }
+	},
+	methods: {
+		isPressed: { call: (context, _state, [value]) => isPressed(context, value) },
+		getItemState: { call: (context, _state, [slot], _props, id) => {
+			const row = slot ?? {
+				value: "",
+				label: ""
+			};
+			const ctx = context;
+			return {
+				pressed: isPressed(ctx, row.value),
+				focused: ctx.focusedId === id("item", row.value),
+				disabled: ctx.disabled
+			};
+		} },
+		getItems: { call: (context) => context.items }
+	},
+	events: { "value-change": {
+		prop: "onValueChange",
+		watch: (context) => [...context.value],
+		detail: (watched) => ({ value: [...watched] })
+	} },
+	settled: ({ event, focus }) => {
+		if (event.type !== "TOGGLE.CLICK") return;
+		const value = event["value"];
+		if (typeof value === "string") focus("item", value);
+	}
+};
+const toggleGroup = defineComponent(def);
+export { def, toggleGroup };
+
+//# sourceMappingURL=toggle-group.presentation.js.map

package/dist/toggle-group/toggle-group.state.d.ts

@@ -0,0 +1,45 @@
+export interface ToggleGroupItem {
+  readonly value: string;
+  readonly label: string;
+  readonly disabled?: boolean;
+}
+export type ToggleGroupState = "idle" | "focused";
+export interface ToggleGroupContext {
+  value: string[];
+  items: readonly ToggleGroupItem[];
+  focusedId: string | null;
+  multiple: boolean;
+  deselectable: boolean;
+  rovingFocus: boolean;
+  loopFocus: boolean;
+  orientation: "horizontal" | "vertical";
+  disabled: boolean;
+  /** A mousedown preceded the focus: don't steal it. The upstream uses a
+   * ref; this fork has no ref tier, so it is a flag. */
+  clickFocus: boolean;
+  tabbingBackward: boolean;
+}
+export interface ToggleGroupRow {
+  readonly value?: unknown;
+  readonly label?: unknown;
+  readonly disabled?: unknown;
+}
+/**
+ * The toggle-group's arguments: the values the host may set.
+ */
+export interface ToggleGroupArgs {
+  readonly value?: readonly string[] | string;
+  readonly defaultValue?: readonly string[] | string;
+  readonly items?: readonly ToggleGroupRow[] | string;
+  readonly multiple?: boolean;
+  readonly deselectable?: boolean;
+  readonly rovingFocus?: boolean;
+  readonly loopFocus?: boolean;
+  readonly orientation?: "horizontal" | "vertical";
+  readonly disabled?: boolean;
+}
+export declare const parseValues: (raw: unknown) => string[] | null;
+export declare function initial(args: ToggleGroupArgs, authored: (name: string) => boolean): ToggleGroupContext;
+export declare function isInteractive(ctx: ToggleGroupContext): boolean;
+export declare function isPressed(ctx: ToggleGroupContext, value: string): boolean;
+//# sourceMappingURL=toggle-group.state.d.ts.map

package/dist/toggle-group/toggle-group.state.js

@@ -0,0 +1,67 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/toggle-group/toggle-group.state.ts
+const parseItems = (raw) => {
+	try {
+		const parsed = JSON.parse(raw);
+		return Array.isArray(parsed) ? parsed : [];
+	} catch {
+		return [];
+	}
+};
+const parseValues = (raw) => {
+	const list = typeof raw === "string" ? (() => {
+		try {
+			return JSON.parse(raw);
+		} catch {
+			return null;
+		}
+	})() : raw;
+	if (!Array.isArray(list)) return null;
+	return list.every((item) => typeof item === "string") ? [...list] : null;
+};
+/** A string twin coerces through the scope grammar, so `"[]"` arrives as
+* text: parse it back, and pass arrays through. */
+const coerceStrings = (raw) => typeof raw === "string" ? parseValues(raw) ?? [] : [...raw ?? []];
+function initial(args, authored) {
+	const list = typeof args.items === "string" ? parseItems(args.items) : args.items ?? [];
+	const items = [];
+	if (Array.isArray(list)) {
+		for (const entry of list) if (typeof entry === "object" && entry !== null) {
+			const record = entry;
+			const value = record["value"];
+			if (typeof value !== "string" || value.length === 0) continue;
+			const label = record["label"];
+			items.push({
+				value,
+				label: typeof label === "string" && label.length > 0 ? label : value,
+				...record["disabled"] === true ? { disabled: true } : {}
+			});
+		} else if (typeof entry === "string" && entry.length > 0) items.push({
+			value: entry,
+			label: entry
+		});
+	}
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[field] !== void 0 || args[defaultTwin(field)] !== void 0;
+	return {
+		value: written("value") ? coerceStrings(args.value) : coerceStrings(args.defaultValue),
+		items,
+		focusedId: null,
+		multiple: written("multiple") ? args.multiple === true : false,
+		deselectable: written("deselectable") ? args.deselectable !== false : true,
+		rovingFocus: written("rovingFocus") ? args.rovingFocus !== false : true,
+		loopFocus: written("loopFocus") ? args.loopFocus !== false : true,
+		orientation: args.orientation === "vertical" ? "vertical" : "horizontal",
+		disabled: written("disabled") ? args.disabled === true : false,
+		clickFocus: false,
+		tabbingBackward: false
+	};
+}
+function isInteractive(ctx) {
+	return !ctx.disabled;
+}
+function isPressed(ctx, value) {
+	return ctx.value.includes(value);
+}
+export { initial, isInteractive, isPressed, parseValues };
+
+//# sourceMappingURL=toggle-group.state.js.map

package/dist/toggle-group/toggle-group.transitions.d.ts

@@ -0,0 +1,10 @@
+import { ToggleGroupContext } from "./toggle-group.state.js";
+import { ToggleGroupEvents } from "./toggle-group.events.js";
+import { AssignFor } from "@spinjs/runtime/fsm";
+type ToggleGroupAssign<K extends keyof ToggleGroupEvents = keyof ToggleGroupEvents> = AssignFor<ToggleGroupContext, ToggleGroupEvents, K>;
+export declare const clearClickFocus: () => Partial<ToggleGroupContext>;
+export declare const setTabbingBackward: () => Partial<ToggleGroupContext>;
+export declare const setFocusedId: ToggleGroupAssign<"TOGGLE.FOCUS">;
+export declare const setValue: ToggleGroupAssign<"VALUE.SET">;
+export {};
+//# sourceMappingURL=toggle-group.transitions.d.ts.map

package/dist/toggle-group/toggle-group.transitions.js

@@ -0,0 +1,9 @@
+import { parseValues } from "./toggle-group.state.js";
+// src/toggle-group/toggle-group.transitions.ts
+const clearClickFocus = () => ({ clickFocus: false });
+const setTabbingBackward = () => ({ tabbingBackward: true });
+const setFocusedId = (_ctx, event) => ({ focusedId: event.id });
+const setValue = (_ctx, event) => ({ value: parseValues(event.value) ?? [] });
+export { clearClickFocus, setFocusedId, setTabbingBackward, setValue };
+
+//# sourceMappingURL=toggle-group.transitions.js.map

package/dist/tooltip/examples/basic.html

@@ -0,0 +1,13 @@
+<script lang="ts">
+import { tooltip } from "../tooltip.controller-def.js";
+
+const ctl = tooltip();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  class="secondary s-sm">Hover me</button>
+
+<tooltip {...ctl.getContentProps()}
+  class="fixed m-0 max-w-[16rem]">
+  A plain hint on a short clock.
+</tooltip>

package/dist/tooltip/examples/metrics.html

@@ -0,0 +1,30 @@
+<script lang="ts">
+import { tooltip } from "../tooltip.controller-def.js";
+
+const ctl = tooltip();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  class="secondary s-sm inline-flex items-center gap-2">
+  <span class="i-lucide-bar-chart-3 text-sm" aria-hidden="true"></span>
+  Analytics
+</button>
+
+<tooltip {...ctl.getContentProps()}
+  class="fixed m-0 max-w-[16rem]">
+  <div class="stack-xs">
+    <div class="text-xs font-medium text-text-muted">Today</div>
+    <div class="flex items-center justify-between gap-4">
+      <span class="text-xs">Sales</span>
+      <span class="text-xs font-semibold">$2.8k</span>
+    </div>
+    <div class="flex items-center justify-between gap-4">
+      <span class="text-xs">Revenue</span>
+      <span class="text-xs font-semibold">$4.3k</span>
+    </div>
+    <div class="flex items-center justify-between gap-4">
+      <span class="text-xs">Costs</span>
+      <span class="text-xs font-semibold">$1.6k</span>
+    </div>
+  </div>
+</tooltip>

package/dist/tooltip/examples/positioning.html

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { tooltip } from "../tooltip.controller-def.js";
+
+const ctl = tooltip();
+</script>
+
+<div class="w-full stack-lg p-6">
+  <div class="stack-sm">
+    <strong class="text-sm text-text">Select Position</strong>
+    <div class="flex flex-wrap gap-2" data-positions>
+      <button class="secondary s-sm" data-placement-choice="top">Top</button>
+      <button class="secondary s-sm" data-placement-choice="bottom">Bottom</button>
+      <button class="secondary s-sm" data-placement-choice="left">Left</button>
+      <button class="secondary s-sm" data-placement-choice="right">Right</button>
+    </div>
+  </div>
+  <div class="flex items-center justify-center py-12">
+    <span {...ctl.getTriggerProps()}
+      class="bare cursor-pointer rounded-md border border-solid border-border bg-surface-raised px-3 py-1 text-sm text-text transition-colors hover:bg-surface">Hover for bottom placement</span>
+
+    <tooltip {...ctl.getContentProps()}
+  class="fixed m-0 max-w-[16rem]">
+      bottom
+    </tooltip>
+  </div>
+</div>

package/dist/tooltip/examples/status.html

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { tooltip } from "../tooltip.controller-def.js";
+
+const ctl = tooltip();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  class="secondary s-sm inline-flex items-center gap-2">
+  <span class="i-lucide-activity text-sm" aria-hidden="true"></span>
+  System Status
+</button>
+
+<tooltip {...ctl.getContentProps()}
+  class="fixed m-0 max-w-[16rem]">
+  <div class="stack-xs">
+    <div>
+      <div class="text-xs text-text-muted">Status</div>
+      <div class="text-xs font-semibold">Operational</div>
+    </div>
+    <div>
+      <div class="text-xs text-text-muted">Uptime</div>
+      <div class="text-xs font-semibold">99.9%</div>
+    </div>
+    <div>
+      <div class="text-xs text-text-muted">Deploy</div>
+      <div class="text-xs font-semibold">2h ago</div>
+    </div>
+    <div>
+      <div class="text-xs text-text-muted">Response</div>
+      <div class="text-xs font-semibold">145ms</div>
+    </div>
+  </div>
+</tooltip>

package/dist/tooltip/examples/video.html

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { tooltip } from "../tooltip.controller-def.js";
+
+const ctl = tooltip();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  class="bare relative grid h-36 w-64 place-items-center overflow-hidden rounded-lg border-border bg-surface-sunken">
+  <span class="i-lucide-play icon-lg text-text" aria-hidden="true"></span>
+</button>
+
+<tooltip {...ctl.getContentProps()}
+  class="fixed m-0 max-w-[16rem]">
+  <div class="stack-xs">
+    <p class="text-xs font-medium text-text">Product Demo</p>
+    <p
+      class="text-xs text-text-muted">Learn platform features in this walkthrough.</p>
+    <div class="flex items-center gap-2 text-xs text-text-muted">
+      <span>4:32</span><span>•</span><span>720p</span><span>•</span><span>2.1M</span>
+    </div>
+  </div>
+</tooltip>

package/dist/tooltip/examples/with-arrow.html

@@ -0,0 +1,14 @@
+<script lang="ts">
+import { tooltip } from "../tooltip.controller-def.js";
+
+const ctl = tooltip();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  class="secondary s-sm">Hover me</button>
+
+<tooltip {...ctl.getContentProps()}
+  class="fixed m-0 max-w-[16rem]">
+  <span aria-hidden="true" class="absolute -top-1 left-1/2 h-2 w-2 rotate-45 border-b-0 border-r-0 border-l border-t border-solid border-border bg-surface-raised"></span>
+  A hint with a pointing arrow.
+</tooltip>

package/dist/tooltip/tooltip.controller-def.d.ts

@@ -0,0 +1,42 @@
+import { ControllerDef } from "@spinjs/runtime";
+import { AnchorPlacement } from "@spinjs/runtime/actions";
+/**
+ * Tooltip on the platform: the browser owns open/closed, the top layer,
+ * light-dismiss, and Escape. There is no machine here — `attach` wires the
+ * native popover behavior to the declared commands and events, and the
+ * surface comes from the `tooltip` primitive's CSS.
+ *
+ * The delays the upstream holds as opening/closing states are the
+ * `hover-delay` action on the trigger bag: dwell opens, absence closes, and
+ * the attach maps both reports onto the native methods. Focus opens
+ * immediately and blur closes — keyboard users never wait out a hover clock.
+ * Touch never opens: a tooltip that opens on tap steals the tap the trigger
+ * wanted.
+ *
+ * The panel positions against the trigger through the `anchor` action,
+ * which reports geometry the bag carries as style properties. Placement
+ * is a suggestion the viewport can veto; the flip reports alongside the
+ * geometry so the origin utility can follow.
+ */
+export interface TooltipOpenChange {
+  readonly open: boolean;
+}
+export declare const tooltipManifest: {
+  readonly parts: readonly [];
+  readonly slots: readonly [];
+  readonly readers: readonly ["open"];
+  readonly methods: readonly ["show", "hide", "getTriggerProps", "getContentProps"];
+};
+export interface TooltipApi {
+  readonly open: boolean;
+  show(): void;
+  hide(): void;
+  getTriggerProps(): Record<string, unknown>;
+  getContentProps(): Record<string, unknown>;
+  setPlacement(next: AnchorPlacement): void;
+}
+export declare function attachTooltip(el: Element): TooltipApi;
+export declare const tooltip: ControllerDef & {
+  attach(el: Element): TooltipApi;
+} & (() => TooltipApi);
+//# sourceMappingURL=tooltip.controller-def.d.ts.map

package/dist/tooltip/tooltip.controller-def.js

@@ -0,0 +1,110 @@
+import { defineController, signal } from "@spinjs/runtime";
+// src/tooltip/tooltip.controller-def.ts
+const tooltipManifest = {
+	parts: [],
+	slots: [],
+	readers: ["open"],
+	methods: [
+		"show",
+		"hide",
+		"getTriggerProps",
+		"getContentProps"
+	]
+};
+function panelOf(el) {
+	return el.querySelector("[popover]");
+}
+let instanceCounter = 0;
+function attachTooltip(el) {
+	const readOpen = () => panelOf(el)?.matches(":popover-open") ?? false;
+	const emit = (open) => {
+		el.dispatchEvent(new CustomEvent("open-change", {
+			detail: { open },
+			bubbles: true
+		}));
+	};
+	el.addEventListener("toggle", (event) => {
+		emit(event.newState === "open");
+	}, true);
+	const show = () => {
+		const panel = panelOf(el);
+		if (panel === null || panel.matches(":popover-open")) return;
+		panel.showPopover();
+	};
+	const hide = () => {
+		const panel = panelOf(el);
+		if (panel === null || !panel.matches(":popover-open")) return;
+		panel.hidePopover();
+	};
+	let placement = (() => {
+		const raw = el.getAttribute("placement");
+		return raw === "top" || raw === "bottom" || raw === "left" || raw === "right" ? raw : "bottom";
+	})();
+	const instance = el.id !== "" ? el.id : `tooltip-${++instanceCounter}`;
+	const triggerId = `${instance}:trigger`;
+	const panelId = `${instance}:panel`;
+	const geometry = signal({
+		x: 0,
+		y: 0,
+		w: 0,
+		h: 0,
+		placement: "bottom"
+	});
+	return {
+		get open() {
+			return readOpen();
+		},
+		show,
+		hide,
+		setPlacement(next) {
+			placement = next;
+		},
+		getTriggerProps: () => ({
+			id: triggerId,
+			"data-scope": "tooltip",
+			"data-part": "trigger",
+			"aria-describedby": panelId,
+			"data-state": readOpen() ? "open" : "closed",
+			"use:hover-delay": {
+				onOpen: show,
+				onClose: hide
+			},
+			onFocus: show,
+			onBlur: hide
+		}),
+		getContentProps: () => ({
+			id: panelId,
+			"data-scope": "tooltip",
+			"data-part": "content",
+			popover: "",
+			role: "tooltip",
+			get ["data-placement"]() {
+				return geometry().placement;
+			},
+			style: {
+				left: `${geometry().x}px`,
+				top: `${geometry().y}px`,
+				minWidth: `${geometry().w}px`
+			},
+			"use:anchor": {
+				placement,
+				onGeometry: (next) => geometry(next)
+			}
+		})
+	};
+}
+const tooltip = defineController({
+	attach: attachTooltip,
+	commands: [
+		"show",
+		"hide",
+		"setPlacement"
+	],
+	events: { "open-change": {
+		on: "onOpenChange",
+		detail: (change) => ({ open: change.open })
+	} }
+});
+export { attachTooltip, tooltip, tooltipManifest };
+
+//# sourceMappingURL=tooltip.controller-def.js.map