@cssints/apg-specs 0.0.0-stage → 0.5.1

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

@@ -0,0 +1,30 @@
+import { ActionStep, Probe, ScenarioConfig, SpecBridge } from "../scenario.mjs";
+//#region src/apg/switch.bridge.d.ts
+/** Scenario `config` -> what both targets are mounted with. */
+export interface SwitchConfig {
+  readonly checked: boolean;
+  readonly disabled: boolean;
+  readonly readOnly: boolean;
+  /** The APG's optional Enter key. */
+  readonly enterToggles: boolean;
+  readonly controlled: boolean;
+  /** Controlled only: the host writes every request's intent back as the value. */
+  readonly accepts: boolean;
+}
+/**
+ * Switch vocabulary <-> `specs/apg/switch.qnt`. Part: `switch`.
+ *
+ * `checked` (base-ui) is the controlled value with a host that answers every
+ * request (so a click commits, and an outside write lands); `isSelected`
+ * (react-aria) is the controlled value with no answer (every request rejected);
+ * `defaultChecked` is an uncontrolled seed. Native-input, label and value
+ * plumbing config throws `Unsupported`, so scenarios that need it are skipped.
+ */
+export declare const switchConfig: (config: ScenarioConfig) => SwitchConfig;
+/** `onCheckedChange` (base-ui) and `onChange` (react-aria) are the same callback. */
+export declare const canonicalEvent: (name: string) => string;
+export declare const switchBridge: SpecBridge;
+/** The user-level steps a differential walk draws from. */
+export declare const switchSteps: ReadonlyArray<ActionStep>;
+export declare const switchProbe: Probe;
+//#endregion

package/dist/apg/switch.bridge.mjs

@@ -0,0 +1,243 @@
+import { Unsupported } from "../scenario.mjs";
+//#region src/apg/switch.bridge.ts
+const specEvent = (tag, params = {}) => ({
+	_tag: tag,
+	...params
+});
+const CONFIG_KEYS = /* @__PURE__ */ new Set([
+	"part",
+	"disabled",
+	"isDisabled",
+	"checked",
+	"defaultChecked",
+	"isSelected",
+	"readOnly",
+	"isReadOnly",
+	"enterToggles",
+	"controlled"
+]);
+/**
+* Switch vocabulary <-> `specs/apg/switch.qnt`. Part: `switch`.
+*
+* `checked` (base-ui) is the controlled value with a host that answers every
+* request (so a click commits, and an outside write lands); `isSelected`
+* (react-aria) is the controlled value with no answer (every request rejected);
+* `defaultChecked` is an uncontrolled seed. Native-input, label and value
+* plumbing config throws `Unsupported`, so scenarios that need it are skipped.
+*/
+const switchConfig = (config) => {
+	let checked = false;
+	let disabled = false;
+	let readOnly = false;
+	let enterToggles = false;
+	let controlled = false;
+	let pinned = false;
+	for (const [key, value] of Object.entries(config)) {
+		if (!CONFIG_KEYS.has(key)) throw new Unsupported(`config ${key}=${JSON.stringify(value)}`);
+		switch (key) {
+			case "part":
+				if (value !== "switch") throw new Unsupported(`part ${JSON.stringify(value)}`);
+				break;
+			case "disabled":
+			case "isDisabled":
+				disabled = value === true;
+				break;
+			case "checked":
+				checked = value === true;
+				controlled = true;
+				break;
+			case "isSelected":
+				checked = value === true;
+				controlled = true;
+				pinned = true;
+				break;
+			case "defaultChecked":
+				checked = value === true;
+				break;
+			case "readOnly":
+			case "isReadOnly":
+				readOnly = value === true;
+				break;
+			case "enterToggles":
+				enterToggles = value === true;
+				break;
+			case "controlled": controlled ||= value === true;
+		}
+	}
+	return {
+		checked,
+		disabled,
+		readOnly,
+		enterToggles,
+		controlled,
+		accepts: controlled && !pinned
+	};
+};
+/** `onCheckedChange` (base-ui) and `onChange` (react-aria) are the same callback. */
+const canonicalEvent = (name) => name === "onCheckedChange" ? "onChange" : name;
+const partOf = (target) => {
+	if (target === void 0) throw new Unsupported("step needs a target");
+	const part = target.replace(/:0$/, "");
+	if (part === "switch" || part === "button") return "switch";
+	throw new Unsupported(`part ${part}`);
+};
+const keyOf = (key) => {
+	if (key === " " || key === "Space") return "Space";
+	if (key === "Enter") return "Enter";
+	throw new Unsupported(`key ${key ?? ""}`);
+};
+const programmatic = (step) => {
+	switch (step.prop) {
+		case "disabled":
+		case "isDisabled": return [specEvent("set_disabled", { value: step.value === true })];
+		case "checked":
+		case "isSelected": return [specEvent("setValue", { incoming: step.value === true ? "true" : "false" })];
+		case "enterToggles": return [specEvent("set_enter_toggles", { value: step.value === true })];
+		case "hostToggle": return [specEvent("hostToggle")];
+		case "focus": return [specEvent("focus")];
+		case "blur": return [specEvent("blur")];
+		default: throw new Unsupported(`prop ${step.prop ?? ""}`);
+	}
+};
+const setEvents = (set) => {
+	const events = [];
+	for (const [key, value] of Object.entries(set)) if (key === "disabled" || key === "isDisabled") events.push(specEvent("set_disabled", { value: value === true }));
+	else if (key === "checked" || key === "isSelected") events.push(specEvent("setValue", { incoming: value === true ? "true" : "false" }));
+	else if (key === "enterToggles") events.push(specEvent("set_enter_toggles", { value: value === true }));
+	else throw new Unsupported(`set ${key}=${JSON.stringify(value)}`);
+	return events;
+};
+const switchBridge = {
+	setup: (config) => {
+		const { checked, disabled, enterToggles, controlled, accepts } = switchConfig(config);
+		return [
+			...checked ? [specEvent("seed", { incoming: "true" })] : [],
+			...controlled ? [specEvent("control")] : [],
+			...controlled && accepts ? [specEvent("acceptRequests")] : [],
+			...enterToggles ? [specEvent("set_enter_toggles", { value: true })] : [],
+			...disabled ? [specEvent("set_disabled", { value: true })] : []
+		];
+	},
+	event: (step) => {
+		switch (step.event) {
+			case "focus":
+				partOf(step.target);
+				return [specEvent("focus")];
+			case "blur":
+				partOf(step.target);
+				return [specEvent("blur")];
+			case "click":
+				partOf(step.target);
+				return [specEvent("pointer_down"), specEvent("pointer_up")];
+			case "key": {
+				partOf(step.target);
+				if (step.repeat === true) throw new Unsupported("key repeat");
+				const key = keyOf(step.key);
+				if (step.phase === "up") return [specEvent("key_up", { key })];
+				if (step.phase === "down") return [specEvent("focus"), specEvent("key_down", { key })];
+				return [
+					specEvent("focus"),
+					specEvent("key_down", { key }),
+					specEvent("key_up", { key })
+				];
+			}
+			case "prop": return step.set === void 0 ? programmatic(step) : setEvents(step.set);
+			default: throw new Unsupported(`event ${step.event}`);
+		}
+	},
+	stepFields: ["set", "phase"],
+	eventName: canonicalEvent,
+	focus: (state) => state["focused"] === true ? "switch" : null,
+	attr: (state, target, name) => {
+		partOf(target);
+		switch (name) {
+			case "role": return "switch";
+			case "aria-checked": return state["checked"] === "true" ? "true" : "false";
+			case "aria-disabled": return state["disabled"] === true ? "true" : null;
+			default: throw new Unsupported(`attribute ${name} on ${target}`);
+		}
+	},
+	visible: () => [],
+	events: (before, after) => before["requests"] === after["requests"] ? [] : [["onChange", after["requested"] === "true"]]
+};
+/** The user-level steps a differential walk draws from. */
+const switchSteps = [
+	{
+		event: "focus",
+		target: "switch"
+	},
+	{
+		event: "blur",
+		target: "switch"
+	},
+	{
+		event: "click",
+		target: "switch"
+	},
+	{
+		event: "key",
+		key: " ",
+		target: "switch"
+	},
+	{
+		event: "key",
+		key: " ",
+		phase: "down",
+		target: "switch"
+	},
+	{
+		event: "key",
+		key: " ",
+		phase: "up",
+		target: "switch"
+	},
+	{
+		event: "key",
+		key: "Enter",
+		target: "switch"
+	},
+	{
+		event: "prop",
+		prop: "disabled",
+		value: true
+	},
+	{
+		event: "prop",
+		prop: "disabled",
+		value: false
+	},
+	{
+		event: "prop",
+		prop: "enterToggles",
+		value: true
+	},
+	{
+		event: "prop",
+		prop: "enterToggles",
+		value: false
+	},
+	{
+		event: "prop",
+		prop: "checked",
+		value: true
+	},
+	{
+		event: "prop",
+		prop: "checked",
+		value: false
+	},
+	{
+		event: "prop",
+		prop: "hostToggle"
+	}
+];
+const switchProbe = {
+	attrs: [
+		["switch", "role"],
+		["switch", "aria-checked"],
+		["switch", "aria-disabled"]
+	],
+	events: ["onChange"]
+};
+//#endregion
+export { canonicalEvent, switchBridge, switchConfig, switchProbe, switchSteps };