@cssints/apg-specs 0.0.0-stage → 0.5.1

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

@@ -0,0 +1,26 @@
+import { ActionStep, Probe, ScenarioConfig, SpecBridge } from "../scenario.mjs";
+//#region src/apg/treeview.bridge.d.ts
+/** The `data-part` target of a node id (e.g. `treeitem:0/0/1`). */
+export declare const nodeToPath: (node: number) => string;
+/** Resolve a scenario path (`treeitem:0/0/1`, `0/1`, ...) to a node id. */
+export declare const pathToNode: (path: string) => number;
+export interface TreeviewConfig {
+  readonly multi: boolean;
+  readonly expanded: number;
+  readonly selected: number;
+  readonly focus: number;
+  readonly hasFocus: boolean;
+  /** Controlled: the host owns the selection and this is the only thing that changes it. */
+  readonly controlled: boolean;
+  /** Controlled only: the host writes every request's intent back as the value. */
+  readonly accepts: boolean;
+  readonly label?: string;
+  readonly orientation?: "vertical";
+}
+/** Scenario `config` -> what both targets are mounted with. */
+export declare const treeviewConfig: (config: ScenarioConfig) => TreeviewConfig;
+export declare const treeviewBridge: SpecBridge;
+/** The user-level steps a differential walk draws from. */
+export declare const treeviewSteps: ReadonlyArray<ActionStep>;
+export declare const treeviewProbe: Probe;
+//#endregion

package/dist/apg/treeview.bridge.mjs

@@ -0,0 +1,396 @@
+import { Unsupported } from "../scenario.mjs";
+//#region src/apg/treeview.bridge.ts
+const specEvent = (tag, params = {}) => ({
+	_tag: tag,
+	...params
+});
+/**
+* Treeview vocabulary <-> `specs/apg/treeview.qnt`, shared by the spec driver
+* and the DOM driver so both gate scenarios identically.
+*
+* The tree is the fixed 7-node pre-order tree of the spec (ids 1..7); scenario
+* targets carry the slash path the fixture renders as `data-part`, so
+* `treeitem:0/1` is Notes. `expanded` / `selected` arrive as path arrays;
+* `focused` maps to `hasFocus`, `multiSelectable` to `multi`.
+*/
+const PARENT = /* @__PURE__ */ new Map([
+	[1, 0],
+	[2, 1],
+	[3, 2],
+	[4, 2],
+	[5, 1],
+	[6, 0],
+	[7, 6]
+]);
+const CHILDREN = /* @__PURE__ */ new Map([
+	[1, [2, 5]],
+	[2, [3, 4]],
+	[6, [7]]
+]);
+const ROOTS = [1, 6];
+const IDS = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7
+];
+const PREFIX = "treeitem:";
+/** The `data-part` target of a node id (e.g. `treeitem:0/0/1`). */
+const nodeToPath = (node) => {
+	const segments = [];
+	let current = node;
+	while (current !== 0) {
+		const parent = PARENT.get(current) ?? 0;
+		const index = (parent === 0 ? ROOTS : CHILDREN.get(parent) ?? []).indexOf(current);
+		if (index < 0) throw new Error(`unknown treeview node ${current}`);
+		segments.unshift(index);
+		current = parent;
+	}
+	return `${PREFIX}${segments.join("/")}`;
+};
+/** Resolve a scenario path (`treeitem:0/0/1`, `0/1`, ...) to a node id. */
+const pathToNode = (path) => {
+	const parts = (path.startsWith(PREFIX) ? path.slice(9) : path).split("/");
+	const root = Number(parts[0]);
+	let node = 0;
+	if (root === 0) node = 1;
+	else if (root === 1) node = 6;
+	if (node === 0) throw new Unsupported(`treeitem path ${path}`);
+	for (const part of parts.slice(1)) {
+		const next = (CHILDREN.get(node) ?? [])[Number(part)];
+		if (next === void 0) throw new Unsupported(`treeitem path ${path}`);
+		node = next;
+	}
+	return node;
+};
+const parentOf = (node) => PARENT.get(node) ?? 0;
+const childrenOf = (node) => node === 0 ? ROOTS : CHILDREN.get(node) ?? [];
+const isParent = (node) => childrenOf(node).length > 0;
+const weight = (node) => 1 << node - 1;
+const bit = (mask, node) => (mask & weight(node)) !== 0;
+const setBit = (mask, node, on) => on ? mask | weight(node) : mask & ~weight(node);
+const maskOfPaths = (value) => {
+	if (!Array.isArray(value)) throw new Unsupported(`expected a path array, got ${JSON.stringify(value)}`);
+	let mask = 0;
+	for (const path of value) {
+		if (typeof path !== "string") throw new Unsupported(`treeitem path ${JSON.stringify(path)}`);
+		mask = setBit(mask, pathToNode(path), true);
+	}
+	return mask;
+};
+/** Scenario `config` -> what both targets are mounted with. */
+const treeviewConfig = (config) => {
+	let multi = false;
+	let hasFocus = false;
+	let expanded = 0;
+	let selected = 0;
+	let focus = 1;
+	let controlled = false;
+	let accepts = false;
+	let label;
+	let orientation;
+	for (const [key, value] of Object.entries(config)) switch (key) {
+		case "focused":
+			if (typeof value !== "boolean") throw new Unsupported(`focused=${JSON.stringify(value)}`);
+			hasFocus = value;
+			break;
+		case "multiSelectable":
+			if (typeof value !== "boolean") throw new Unsupported(`multiSelectable=${JSON.stringify(value)}`);
+			multi = value;
+			break;
+		case "expanded":
+			expanded = maskOfPaths(value);
+			break;
+		case "selected":
+			selected = maskOfPaths(value);
+			break;
+		case "controlled":
+			if (typeof value !== "boolean") throw new Unsupported(`controlled=${JSON.stringify(value)}`);
+			controlled = value;
+			accepts = value;
+			break;
+		case "accepts":
+			if (typeof value !== "boolean") throw new Unsupported(`accepts=${JSON.stringify(value)}`);
+			controlled = true;
+			accepts = value;
+			break;
+		case "focus":
+			if (typeof value !== "string") throw new Unsupported(`focus=${JSON.stringify(value)}`);
+			focus = pathToNode(value);
+			break;
+		case "label":
+			if (typeof value !== "string") throw new Unsupported(`label=${JSON.stringify(value)}`);
+			label = value;
+			break;
+		case "orientation":
+			if (value !== "vertical") throw new Unsupported(`orientation ${JSON.stringify(value)}`);
+			orientation = "vertical";
+			break;
+		default: throw new Unsupported(`config ${key}=${JSON.stringify(value)}`);
+	}
+	return {
+		multi,
+		expanded,
+		selected,
+		focus,
+		hasFocus,
+		controlled,
+		accepts,
+		...label === void 0 ? {} : { label },
+		...orientation === void 0 ? {} : { orientation }
+	};
+};
+const visibleIn = (node, expanded) => {
+	let current = node;
+	while (current !== 0) {
+		const parent = parentOf(current);
+		if (parent !== 0 && !bit(expanded, parent)) return false;
+		current = parent;
+	}
+	return true;
+};
+const orderVisible = (expanded) => IDS.filter((node) => visibleIn(node, expanded));
+/**
+* Events that bring a fresh model to the scenario config: switch the select
+* mode, focus the tree, open the requested parents, set the selection, move the
+* roving node, then drop DOM focus if the config says so.
+*/
+const setupEvents = (config) => {
+	const events = [specEvent("configure", { m: config.multi }), specEvent("focusTree")];
+	let focus = 1;
+	let expanded = 0;
+	const moveTo = (target) => {
+		let guard = 0;
+		while (focus !== target) {
+			if (guard++ > IDS.length) throw new Unsupported(`focus is not reachable at ${target}`);
+			const visible = orderVisible(expanded);
+			const from = visible.indexOf(focus);
+			const to = visible.indexOf(target);
+			if (from < 0 || to < 0) throw new Unsupported(`node ${target} is not visible`);
+			events.push(specEvent(from < to ? "pressDown" : "pressUp"));
+			focus = from < to ? visible[from + 1] ?? focus : visible[from - 1] ?? focus;
+		}
+	};
+	for (const node of IDS) if (isParent(node) && bit(config.expanded, node)) {
+		moveTo(node);
+		events.push(specEvent("pressRight"));
+		expanded = setBit(expanded, node, true);
+	}
+	if (config.controlled) {
+		events.push(specEvent("control"));
+		if (config.accepts) events.push(specEvent("acceptRequests"));
+		if (config.selected !== 0) events.push(specEvent("setValue", { v: BigInt(config.selected) }));
+	} else for (const node of IDS.filter((n) => bit(config.selected, n))) {
+		moveTo(node);
+		events.push(specEvent("pressSpace"));
+	}
+	moveTo(config.focus);
+	if (!config.hasFocus) events.push(specEvent("blurTree"));
+	return events;
+};
+const KEY_EVENTS = /* @__PURE__ */ new Map([
+	["ArrowDown", "pressDown"],
+	["ArrowUp", "pressUp"],
+	["ArrowRight", "pressRight"],
+	["ArrowLeft", "pressLeft"],
+	["Home", "pressHome"],
+	["End", "pressEnd"],
+	["Enter", "pressEnter"],
+	["Space", "pressSpace"],
+	[" ", "pressSpace"],
+	["*", "pressStar"]
+]);
+const treeviewBridge = {
+	setup: (config) => setupEvents(treeviewConfig(config)),
+	event: (step) => {
+		switch (step.event) {
+			case "focus": return [specEvent("focusTree")];
+			case "blur": return [specEvent("blurTree")];
+			case "click": {
+				const node = pathToNode(step.target ?? "");
+				return [specEvent("click", { node: BigInt(node) })];
+			}
+			case "key": {
+				const action = KEY_EVENTS.get(step.key ?? "");
+				if (action === void 0) throw new Unsupported(`key ${step.key ?? ""}`);
+				return [specEvent("focusTree"), specEvent(action)];
+			}
+			case "type": {
+				const text = step.text ?? "";
+				if ([...text].length !== 1) throw new Unsupported(`type ${JSON.stringify(text)}`);
+				return [specEvent("focusTree"), specEvent("typeChar", { ch: text })];
+			}
+			case "typeaheadReset": return [specEvent("typeaheadReset")];
+			case "prop": switch (step.prop) {
+				case "selected":
+				case "setValue": return [specEvent("setValue", { v: BigInt(maskOfPaths(step.value)) })];
+				case "hostToggle": return [specEvent("hostToggle", { n: 1n })];
+				default: throw new Unsupported(`prop ${step.prop ?? ""}`);
+			}
+			case "hover":
+			case "unhover": return [];
+			default: throw new Unsupported(`event ${step.event}`);
+		}
+	},
+	focus: (state) => state["hasFocus"] === true ? nodeToPath(Number(state["focus"])) : null,
+	attr: (state, target, name) => {
+		const expanded = Number(state["expanded"]);
+		const selected = Number(state["selected"]);
+		const focus = Number(state["focus"]);
+		if (target === "tree") {
+			if (name === "aria-multiselectable") return state["multi"] === true ? "true" : "false";
+			if (name === "aria-orientation") return null;
+			throw new Unsupported(`attribute ${name} on tree`);
+		}
+		const node = pathToNode(target);
+		switch (name) {
+			case "aria-expanded": return isParent(node) ? bit(expanded, node) ? "true" : "false" : null;
+			case "aria-selected": return bit(selected, node) ? "true" : "false";
+			case "aria-level": {
+				let level = 1;
+				let parent = parentOf(node);
+				while (parent !== 0) {
+					level += 1;
+					parent = parentOf(parent);
+				}
+				return String(level);
+			}
+			case "aria-setsize": return String(childrenOf(parentOf(node)).length);
+			case "aria-posinset": return String(childrenOf(parentOf(node)).indexOf(node) + 1);
+			case "tabindex": return focus === node ? "0" : "-1";
+			default: throw new Unsupported(`attribute ${name} on ${target}`);
+		}
+	},
+	visible: (state) => orderVisible(Number(state["expanded"])).map(nodeToPath),
+	events: (before, after) => {
+		const out = [];
+		const expandedBefore = Number(before["expanded"]);
+		const expandedAfter = Number(after["expanded"]);
+		for (const node of IDS) if (bit(expandedBefore, node) !== bit(expandedAfter, node)) out.push(["onExpandedChange", nodeToPath(node)]);
+		if (before["requests"] !== after["requests"]) {
+			const requested = Number(after["requested"]);
+			const base = Number(after["base"]);
+			for (const node of IDS) if (bit(requested, node) && !bit(base, node)) out.push(["onSelectionChange", nodeToPath(node)]);
+		}
+		return out;
+	}
+};
+/** The user-level steps a differential walk draws from. */
+const treeviewSteps = [
+	{
+		event: "focus",
+		target: "tree"
+	},
+	{
+		event: "blur",
+		target: "tree"
+	},
+	{
+		event: "key",
+		key: "ArrowDown",
+		target: "tree"
+	},
+	{
+		event: "key",
+		key: "ArrowUp",
+		target: "tree"
+	},
+	{
+		event: "key",
+		key: "ArrowRight",
+		target: "tree"
+	},
+	{
+		event: "key",
+		key: "ArrowLeft",
+		target: "tree"
+	},
+	{
+		event: "key",
+		key: "Home",
+		target: "tree"
+	},
+	{
+		event: "key",
+		key: "End",
+		target: "tree"
+	},
+	{
+		event: "key",
+		key: "Enter",
+		target: "tree"
+	},
+	{
+		event: "key",
+		key: " ",
+		target: "tree"
+	},
+	{
+		event: "key",
+		key: "*",
+		target: "tree"
+	},
+	{
+		event: "type",
+		text: "p",
+		target: "tree"
+	},
+	{
+		event: "type",
+		text: "r",
+		target: "tree"
+	},
+	{
+		event: "type",
+		text: "o",
+		target: "tree"
+	},
+	{
+		event: "type",
+		text: "s",
+		target: "tree"
+	},
+	{ event: "typeaheadReset" },
+	...IDS.map((node) => ({
+		event: "click",
+		target: nodeToPath(node)
+	})),
+	{
+		event: "prop",
+		prop: "hostToggle"
+	},
+	{
+		event: "prop",
+		prop: "selected",
+		value: ["treeitem:0"]
+	},
+	{
+		event: "prop",
+		prop: "selected",
+		value: ["treeitem:1"]
+	},
+	{
+		event: "prop",
+		prop: "selected",
+		value: []
+	}
+];
+const treeviewProbe = {
+	attrs: [["tree", "aria-multiselectable"], ...IDS.flatMap((node) => {
+		const path = nodeToPath(node);
+		return [
+			[path, "aria-expanded"],
+			[path, "aria-selected"],
+			[path, "aria-level"],
+			[path, "aria-setsize"],
+			[path, "aria-posinset"],
+			[path, "tabindex"]
+		];
+	})],
+	events: ["onExpandedChange", "onSelectionChange"]
+};
+//#endregion
+export { nodeToPath, pathToNode, treeviewBridge, treeviewConfig, treeviewProbe, treeviewSteps };