@cssints/apg-specs 0.0.0-stage → 0.5.1

package/dist/apg/radio.bridge.d.mts

@@ -0,0 +1,35 @@
+import { ActionStep, Probe, ScenarioConfig, SpecBridge } from "../scenario.mjs";
+import { Schema } from "effect";
+//#region src/apg/radio.bridge.d.ts
+/** Scenario `config` -> what both targets are mounted with. */
+export interface RadioConfig {
+  /** Radio count; the spec fixes it at four, so more is unsupported. */
+  readonly items: number;
+  readonly values: ReadonlyArray<Schema.Json>;
+  readonly checked: number | null;
+  readonly flavor: "roving" | "activedescendant";
+  readonly disabled: ReadonlyArray<number>;
+  readonly direction: "ltr" | "rtl";
+  readonly orientation: "horizontal" | "vertical" | undefined;
+  readonly describedby: string | undefined;
+  /** The host owns the check (`value` prop present). */
+  readonly controlled: boolean;
+  /** Controlled only: the host writes every request's intent back. */
+  readonly accepts: boolean;
+  /** Controlled only: a pinned checked index the host holds (rejects). */
+  readonly pinned: number | null;
+}
+/**
+ * Radio-group vocabulary <-> `specs/apg/radio.qnt`. Parts: `radiogroup` and
+ * `radio:N`. The spec fixes the group at four radios, so a scenario with more
+ * (or a value count that disagrees with `items`) is unsupported; a smaller
+ * group still maps onto the same events for scenario replay.
+ */
+export declare const radioConfig: (config: ScenarioConfig) => RadioConfig;
+/** base-ui calls the callback `onValueChange`; ariakit/react-aria call it `onChange`. */
+export declare const canonicalEvent: (name: string) => string;
+export declare const radioBridge: SpecBridge;
+/** The user-level steps a differential walk draws from. */
+export declare const radioSteps: ReadonlyArray<ActionStep>;
+export declare const radioProbe: Probe;
+//#endregion

package/dist/apg/radio.bridge.mjs

@@ -0,0 +1,371 @@
+import { Unsupported } from "../scenario.mjs";
+//#region src/apg/radio.bridge.ts
+const specEvent = (tag, params = {}) => ({
+	_tag: tag,
+	...params
+});
+const FLAVORS = /* @__PURE__ */ new Set(["roving", "activedescendant"]);
+const DIRECTIONS = /* @__PURE__ */ new Set(["ltr", "rtl"]);
+const ORIENTATIONS = /* @__PURE__ */ new Set(["horizontal", "vertical"]);
+const parseChecked = (value) => {
+	if (value === null || value === void 0) return null;
+	if (typeof value === "number" && Number.isInteger(value)) return value;
+	if (typeof value === "string") {
+		const match = /^radio:(\d+)$/.exec(value);
+		if (match?.[1] !== void 0) return Number(match[1]);
+	}
+	throw new Unsupported(`checked ${JSON.stringify(value)}`);
+};
+/**
+* Radio-group vocabulary <-> `specs/apg/radio.qnt`. Parts: `radiogroup` and
+* `radio:N`. The spec fixes the group at four radios, so a scenario with more
+* (or a value count that disagrees with `items`) is unsupported; a smaller
+* group still maps onto the same events for scenario replay.
+*/
+const radioConfig = (config) => {
+	let items;
+	let values;
+	let checked = null;
+	let flavor = "roving";
+	let disabled = [];
+	let direction = "ltr";
+	let orientation;
+	let describedby;
+	let controlled = false;
+	let pinned = null;
+	for (const [key, value] of Object.entries(config)) switch (key) {
+		case "items":
+			if (typeof value !== "number" || !Number.isInteger(value) || value < 1) throw new Unsupported(`items ${JSON.stringify(value)}`);
+			items = value;
+			break;
+		case "values":
+			if (!Array.isArray(value)) throw new Unsupported(`values ${JSON.stringify(value)}`);
+			values = value;
+			break;
+		case "checked":
+			checked = parseChecked(value);
+			break;
+		case "flavor":
+			if (typeof value !== "string" || !FLAVORS.has(value)) throw new Unsupported(`flavor ${JSON.stringify(value)}`);
+			flavor = value;
+			break;
+		case "disabled":
+			if (!Array.isArray(value) || !value.every((v) => typeof v === "number" && Number.isInteger(v))) throw new Unsupported(`disabled ${JSON.stringify(value)}`);
+			disabled = value;
+			break;
+		case "direction":
+			if (typeof value !== "string" || !DIRECTIONS.has(value)) throw new Unsupported(`direction ${JSON.stringify(value)}`);
+			direction = value;
+			break;
+		case "orientation":
+			if (typeof value !== "string" || !ORIENTATIONS.has(value)) throw new Unsupported(`orientation ${JSON.stringify(value)}`);
+			orientation = value;
+			break;
+		case "radioDescribedby":
+			if (typeof value !== "string") throw new Unsupported(`radioDescribedby ${JSON.stringify(value)}`);
+			describedby = value;
+			break;
+		case "controlled":
+			if (typeof value !== "boolean") throw new Unsupported(`controlled ${JSON.stringify(value)}`);
+			controlled ||= value;
+			break;
+		case "value": {
+			const index = parseChecked(value);
+			if (index === null) throw new Unsupported(`value ${JSON.stringify(value)}`);
+			pinned = index;
+			controlled = true;
+			break;
+		}
+		default: throw new Unsupported(`config ${key}=${JSON.stringify(value)}`);
+	}
+	if (items === void 0 && values === void 0) throw new Unsupported("radio config needs items or values");
+	if (items !== void 0 && items > 4) throw new Unsupported(`items ${items} (spec models four)`);
+	if (items === void 0) {
+		if (values === void 0) throw new Unsupported("no items");
+		items = values.length;
+	}
+	if (values !== void 0 && values.length !== items) throw new Unsupported(`values ${values.length} vs items ${items}`);
+	if (values === void 0) values = Array.from({ length: items }, (_, i) => String(i));
+	if (pinned !== null && (pinned < 0 || pinned > 3 || disabled.includes(pinned))) throw new Unsupported(`value ${pinned} cannot be checked`);
+	return {
+		items,
+		values,
+		checked,
+		flavor,
+		disabled,
+		direction,
+		orientation,
+		describedby,
+		controlled,
+		accepts: controlled && pinned === null,
+		pinned
+	};
+};
+const partOf = (target) => {
+	if (target === void 0) throw new Unsupported("step needs a target");
+	return target.replace(/:0$/, "");
+};
+/** base-ui calls the callback `onValueChange`; ariakit/react-aria call it `onChange`. */
+const canonicalEvent = (name) => name === "onValueChange" ? "onChange" : name;
+const jsonKey = (value) => {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return;
+	const key = value["key"];
+	return typeof key === "string" ? key : void 0;
+};
+const radioIndexOf = (target) => {
+	const part = partOf(target);
+	if (part === "radio") return 0;
+	const match = /^radio:(\d+)$/.exec(part);
+	const index = match?.[1] === void 0 ? NaN : Number(match[1]);
+	if (!Number.isInteger(index) || index < 0 || index > 3) throw new Unsupported(`target ${target ?? ""}`);
+	return index;
+};
+const keyEvents = (key) => {
+	switch (key) {
+		case "ArrowDown":
+		case "ArrowRight": return [specEvent("arrow_next")];
+		case "ArrowUp":
+		case "ArrowLeft": return [specEvent("arrow_prev")];
+		case " ":
+		case "Space": return [specEvent("space")];
+		case "Enter": return [];
+		default: throw new Unsupported(`key ${key ?? ""}`);
+	}
+};
+const programmatic = (step) => {
+	switch (step.prop) {
+		case "focus": return [specEvent("enter")];
+		case "blur": return [specEvent("leave")];
+		case "key": {
+			const key = jsonKey(step.value);
+			if (key === void 0) throw new Unsupported(`prop key ${JSON.stringify(step.value)}`);
+			return keyEvents(key);
+		}
+		case "click":
+			if (typeof step.value !== "number" || !Number.isInteger(step.value)) throw new Unsupported(`prop click ${JSON.stringify(step.value)}`);
+			return [specEvent("click", { target: BigInt(step.value) })];
+		case "preselect": {
+			const pick = typeof step.value === "number" ? step.value : -1;
+			return [specEvent("preselect", { pick: BigInt(pick) })];
+		}
+		case "setValue":
+			if (typeof step.value !== "number" || !Number.isInteger(step.value)) throw new Unsupported(`setValue ${JSON.stringify(step.value)}`);
+			return [specEvent("setValue", { v: BigInt(step.value) })];
+		case "disabled":
+			if (typeof step.value !== "number" || !Number.isInteger(step.value)) throw new Unsupported(`prop disabled ${JSON.stringify(step.value)}`);
+			return [specEvent("set_disabled", { m: BigInt(step.value) })];
+		case "flavor":
+			if (typeof step.value !== "string" || !FLAVORS.has(step.value)) throw new Unsupported(`prop flavor ${JSON.stringify(step.value)}`);
+			return [specEvent("set_flavor", { v: step.value })];
+		default: throw new Unsupported(`prop ${step.prop ?? ""}`);
+	}
+};
+const asInt = (value) => {
+	if (typeof value === "bigint") return Number(value);
+	return -1;
+};
+const bit = (mask, index) => (mask >> BigInt(index)) % 2n === 1n;
+const tabStop = (mask, checked) => {
+	if (checked >= 0) return checked;
+	for (let index = 0; index < 4; index += 1) if (!bit(mask, index)) return index;
+	return 0;
+};
+const radioBridge = {
+	setup: (config) => {
+		const mount = radioConfig(config);
+		const events = [];
+		if (mount.flavor === "activedescendant") events.push(specEvent("set_flavor", { v: "activedescendant" }));
+		if (mount.disabled.length > 0) {
+			const mask = mount.disabled.reduce((acc, index) => acc | 1 << index, 0);
+			events.push(specEvent("set_disabled", { m: BigInt(mask) }));
+		}
+		const initialChecked = mount.controlled ? mount.pinned ?? mount.checked : mount.checked;
+		if (initialChecked !== null) events.push(specEvent("preselect", { pick: BigInt(initialChecked) }));
+		if (mount.controlled) {
+			events.push(specEvent("control"));
+			if (mount.accepts) events.push(specEvent("acceptRequests"));
+		}
+		return events;
+	},
+	event: (step) => {
+		switch (step.event) {
+			case "focus":
+				radioIndexOf(step.target);
+				return [specEvent("enter")];
+			case "blur":
+				partOf(step.target);
+				return [specEvent("leave")];
+			case "click": return [specEvent("click", { target: BigInt(radioIndexOf(step.target)) })];
+			case "key":
+				partOf(step.target);
+				if (step.repeat === true) throw new Unsupported("key repeat is not modelled as one event");
+				return keyEvents(step.key);
+			case "prop": return programmatic(step);
+			default: throw new Unsupported(`event ${step.event}`);
+		}
+	},
+	focus: (state) => {
+		const focus = asInt(state["focus"]);
+		if (state["flavor"] === "activedescendant") return focus >= 0 ? "radiogroup" : null;
+		return focus >= 0 ? `radio:${focus}` : null;
+	},
+	attr: (state, target, name) => {
+		const part = partOf(target);
+		const flavor = String(state["flavor"]);
+		const checked = asInt(state["checked"]);
+		const focus = asInt(state["focus"]);
+		const mask = typeof state["mask"] === "bigint" ? state["mask"] : 0n;
+		if (part === "radiogroup") {
+			if (name === "aria-activedescendant") return flavor === "activedescendant" && focus >= 0 ? `radio:${focus}` : null;
+			throw new Unsupported(`attribute ${name} on ${target}`);
+		}
+		const index = radioIndexOf(target);
+		switch (name) {
+			case "aria-checked": return checked === index ? "true" : "false";
+			case "aria-disabled": return bit(mask, index) ? "true" : "false";
+			case "tabindex":
+				if (flavor !== "roving") return null;
+				return index === tabStop(mask, checked) ? "0" : "-1";
+			default: throw new Unsupported(`attribute ${name} on ${target}`);
+		}
+	},
+	visible: () => [],
+	events: (before, after) => before["requests"] === after["requests"] ? [] : [["onChangeIndex", Number(after["requested"])]],
+	eventName: canonicalEvent
+};
+/** The user-level steps a differential walk draws from. */
+const radioSteps = [
+	{
+		event: "prop",
+		prop: "focus"
+	},
+	{
+		event: "prop",
+		prop: "blur"
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { key: "ArrowDown" }
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { key: "ArrowUp" }
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { key: "ArrowLeft" }
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { key: "ArrowRight" }
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { key: " " }
+	},
+	{
+		event: "prop",
+		prop: "preselect",
+		value: 0
+	},
+	{
+		event: "prop",
+		prop: "preselect",
+		value: 1
+	},
+	{
+		event: "prop",
+		prop: "preselect",
+		value: 2
+	},
+	{
+		event: "prop",
+		prop: "preselect",
+		value: 3
+	},
+	{
+		event: "prop",
+		prop: "disabled",
+		value: 0
+	},
+	{
+		event: "prop",
+		prop: "disabled",
+		value: 1
+	},
+	{
+		event: "prop",
+		prop: "disabled",
+		value: 6
+	},
+	{
+		event: "prop",
+		prop: "disabled",
+		value: 9
+	},
+	{
+		event: "prop",
+		prop: "disabled",
+		value: 14
+	},
+	{
+		event: "prop",
+		prop: "flavor",
+		value: "roving"
+	},
+	{
+		event: "prop",
+		prop: "flavor",
+		value: "activedescendant"
+	},
+	{
+		event: "prop",
+		prop: "click",
+		value: 0
+	},
+	{
+		event: "prop",
+		prop: "click",
+		value: 1
+	},
+	{
+		event: "prop",
+		prop: "click",
+		value: 2
+	},
+	{
+		event: "prop",
+		prop: "click",
+		value: 3
+	},
+	{
+		event: "prop",
+		prop: "setValue",
+		value: 2
+	}
+];
+const radioProbe = {
+	attrs: [
+		["radiogroup", "aria-activedescendant"],
+		["radio:0", "aria-checked"],
+		["radio:1", "aria-checked"],
+		["radio:2", "aria-checked"],
+		["radio:3", "aria-checked"],
+		["radio:0", "aria-disabled"],
+		["radio:1", "aria-disabled"],
+		["radio:2", "aria-disabled"],
+		["radio:3", "aria-disabled"],
+		["radio:0", "tabindex"],
+		["radio:1", "tabindex"],
+		["radio:2", "tabindex"],
+		["radio:3", "tabindex"]
+	],
+	events: ["onChangeIndex"]
+};
+//#endregion
+export { canonicalEvent, radioBridge, radioConfig, radioProbe, radioSteps };