@cssints/apg-specs 0.0.0-stage → 0.5.1

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

@@ -0,0 +1,36 @@
+import { ActionStep, Probe, ScenarioConfig, SpecBridge } from "../scenario.mjs";
+//#region src/apg/timeline.bridge.d.ts
+/**
+ * Scenario `config` -> what both targets are mounted with. `selected` is the
+ * initial selection (uncontrolled, or the accepting host's starting value).
+ * `controlled` puts the value in a host that accepts every request (a page that
+ * keeps the state in a signal); pinning `value` instead means a fixed prop, so
+ * every request is rejected.
+ */
+export interface TimelineConfig {
+  readonly defaultExpanded: ReadonlyArray<number>;
+  /** Initial selection: uncontrolled default, or the accepting host's start. */
+  readonly selected: number;
+  readonly viewStart: number;
+  readonly viewEnd: number;
+  /** The host owns the selection (`value` prop present). */
+  readonly controlled: boolean;
+  /** Controlled only: the host writes every request's intent back. */
+  readonly accepts: boolean;
+  /** Controlled only: a pinned value the host holds (rejects every request). */
+  readonly pinned: number | null;
+}
+/**
+ * Timeline vocabulary <-> `specs/apg/timeline.qnt`, shared by the spec driver
+ * and the DOM driver.
+ *
+ * Parts: `row:0`..`row:4` (span ids 1..5) and `ruler` (the zoom window slider).
+ * The zoom window is fixed to the full domain (it is not the controlled value);
+ * anything else throws `Unsupported`, which skips the scenario on every target.
+ */
+export declare const timelineConfig: (config: ScenarioConfig) => TimelineConfig;
+export declare const timelineBridge: SpecBridge;
+/** The user-level steps a differential walk draws from. */
+export declare const timelineSteps: ReadonlyArray<ActionStep>;
+export declare const timelineProbe: Probe;
+//#endregion

package/dist/apg/timeline.bridge.mjs

@@ -0,0 +1,265 @@
+import { Unsupported } from "../scenario.mjs";
+//#region src/apg/timeline.bridge.ts
+const specEvent = (tag, params = {}) => ({
+	_tag: tag,
+	...params
+});
+const num = (value) => value === void 0 ? 0 : Number(value);
+const LAST_NODE = 5;
+const NODES = [
+	1,
+	2,
+	3,
+	4,
+	5
+];
+const PARENT_OF = [
+	0,
+	0,
+	1,
+	2,
+	2,
+	1
+];
+const FIRST_CHILD = [
+	0,
+	2,
+	3,
+	0,
+	0,
+	0
+];
+const parentOf = (n) => PARENT_OF[n] ?? 0;
+const firstChild = (n) => FIRST_CHILD[n] ?? 0;
+const isParent = (n) => firstChild(n) !== 0;
+const weight = (n) => n >= 1 && n <= LAST_NODE ? 2 ** (n - 1) : 0;
+const bit = (mask, n) => (mask & weight(n)) !== 0;
+const parentOpen = (n, expanded) => parentOf(n) === 0 || bit(expanded, parentOf(n));
+const visible = (n, expanded) => n >= 1 && n <= LAST_NODE && parentOpen(n, expanded) && parentOpen(parentOf(n), expanded);
+const rowTarget = (n) => `row:${n - 1}`;
+const nodeOf = (target) => {
+	const [name = "", index = ""] = (target ?? "").split(":");
+	const node = Number(index) + 1;
+	if (name === "row" && node >= 1 && node <= LAST_NODE) return node;
+	throw new Unsupported(`part ${target ?? ""}`);
+};
+const nodeValue = (key, value) => {
+	if (typeof value !== "number" || !Number.isInteger(value) || value < 0 || value > LAST_NODE) throw new Unsupported(`config ${key}=${JSON.stringify(value)}`);
+	return value;
+};
+/**
+* Timeline vocabulary <-> `specs/apg/timeline.qnt`, shared by the spec driver
+* and the DOM driver.
+*
+* Parts: `row:0`..`row:4` (span ids 1..5) and `ruler` (the zoom window slider).
+* The zoom window is fixed to the full domain (it is not the controlled value);
+* anything else throws `Unsupported`, which skips the scenario on every target.
+*/
+const timelineConfig = (config) => {
+	let selected = 0;
+	let controlled = false;
+	let pinned = null;
+	for (const [key, value] of Object.entries(config)) if (key === "controlled" && typeof value === "boolean") controlled ||= value;
+	else if (key === "selected") selected = nodeValue(key, value);
+	else if (key === "value") {
+		pinned = nodeValue(key, value);
+		controlled = true;
+	} else throw new Unsupported(`config ${key}=${String(value)}`);
+	return {
+		defaultExpanded: [],
+		selected,
+		viewStart: 0,
+		viewEnd: 100,
+		controlled,
+		accepts: controlled && pinned === null,
+		pinned
+	};
+};
+const keyEventOf = (key) => {
+	switch (key) {
+		case "ArrowDown": return "pressDown";
+		case "ArrowUp": return "pressUp";
+		case "ArrowRight": return "pressRight";
+		case "ArrowLeft": return "pressLeft";
+		case "Home": return "pressHome";
+		case "End": return "pressEnd";
+		case "Enter": return "pressEnter";
+		default: return;
+	}
+};
+const programmatic = (step) => {
+	switch (step.prop) {
+		case "zoomIn":
+		case "zoomOut":
+		case "zoomReset":
+		case "panLeft":
+		case "panRight": return [specEvent(step.prop)];
+		case "select": {
+			const node = nodeValue("select", step.value);
+			if (node < 1) throw new Unsupported(`select ${JSON.stringify(step.value)}`);
+			return [specEvent("selectNode", { node: BigInt(node) })];
+		}
+		case "setValue": {
+			const value = nodeValue("setValue", step.value);
+			return [specEvent("setValue", { v: BigInt(value) })];
+		}
+		default: throw new Unsupported(`prop ${step.prop ?? ""}`);
+	}
+};
+const timelineBridge = {
+	setup: (config) => {
+		const timeline = timelineConfig(config);
+		if (timeline.controlled) {
+			const initial = timeline.pinned ?? timeline.selected;
+			return [
+				specEvent("control"),
+				...initial === 0 ? [] : [specEvent("setValue", { v: BigInt(initial) })],
+				...timeline.accepts ? [specEvent("acceptRequests")] : []
+			];
+		}
+		return timeline.selected === 0 ? [] : [specEvent("selectNode", { node: BigInt(timeline.selected) })];
+	},
+	event: (step) => {
+		switch (step.event) {
+			case "focus": return [specEvent("focusNode", { node: BigInt(nodeOf(step.target)) })];
+			case "blur":
+				nodeOf(step.target);
+				return [specEvent("blurTimeline")];
+			case "click": return [specEvent("click", { node: BigInt(nodeOf(step.target)) })];
+			case "key": {
+				const node = nodeOf(step.target);
+				const tag = keyEventOf(step.key ?? "");
+				if (tag === void 0) throw new Unsupported(`key ${step.key ?? ""} on ${step.target ?? ""}`);
+				return [specEvent("focusNode", { node: BigInt(node) }), specEvent(tag)];
+			}
+			case "hover":
+			case "unhover": return [];
+			case "prop": return programmatic(step);
+			default: throw new Unsupported(`event ${step.event}`);
+		}
+	},
+	focus: (state) => state["hasFocus"] === true ? rowTarget(num(state["focus"])) : null,
+	attr: (state, target, name) => {
+		if (target === "ruler") {
+			if (name === "aria-valuemin") return String(num(state["viewStart"]));
+			if (name === "aria-valuenow") return String(num(state["viewStart"]));
+			if (name === "aria-valuemax") return String(num(state["viewEnd"]));
+			throw new Unsupported(`attribute ${name} on ruler`);
+		}
+		const node = nodeOf(target);
+		const expanded = num(state["expanded"]);
+		if (name === "aria-expanded") return isParent(node) ? bit(expanded, node) ? "true" : "false" : null;
+		if (name === "aria-selected") return num(state["selected"]) === node ? "true" : "false";
+		if (name === "tabindex") return num(state["focus"]) === node ? "0" : "-1";
+		if (name === "hidden") return visible(node, expanded) ? null : "true";
+		throw new Unsupported(`attribute ${name} on ${target}`);
+	},
+	visible: (state) => {
+		const expanded = num(state["expanded"]);
+		return NODES.flatMap((node) => visible(node, expanded) ? [rowTarget(node)] : []);
+	},
+	events: (before, after) => before["requests"] === after["requests"] ? [] : [["onValueChange", num(after["requested"])]]
+};
+/** The user-level steps a differential walk draws from. */
+const timelineSteps = [
+	{
+		event: "focus",
+		target: "row:0"
+	},
+	{
+		event: "key",
+		key: "ArrowDown",
+		target: "row:0"
+	},
+	{
+		event: "key",
+		key: "ArrowUp",
+		target: "row:1"
+	},
+	{
+		event: "key",
+		key: "ArrowRight",
+		target: "row:0"
+	},
+	{
+		event: "key",
+		key: "ArrowLeft",
+		target: "row:1"
+	},
+	{
+		event: "key",
+		key: "Home",
+		target: "row:2"
+	},
+	{
+		event: "key",
+		key: "End",
+		target: "row:2"
+	},
+	{
+		event: "key",
+		key: "Enter",
+		target: "row:0"
+	},
+	{
+		event: "click",
+		target: "row:0"
+	},
+	{
+		event: "prop",
+		prop: "select",
+		value: 3
+	},
+	{
+		event: "prop",
+		prop: "select",
+		value: 1
+	},
+	{
+		event: "prop",
+		prop: "setValue",
+		value: 0
+	},
+	{
+		event: "prop",
+		prop: "setValue",
+		value: 4
+	},
+	{
+		event: "prop",
+		prop: "zoomIn"
+	},
+	{
+		event: "prop",
+		prop: "zoomOut"
+	},
+	{
+		event: "prop",
+		prop: "zoomReset"
+	},
+	{
+		event: "prop",
+		prop: "panLeft"
+	},
+	{
+		event: "prop",
+		prop: "panRight"
+	}
+];
+const rowProbe = (node) => [
+	[rowTarget(node), "aria-expanded"],
+	[rowTarget(node), "aria-selected"],
+	[rowTarget(node), "tabindex"],
+	[rowTarget(node), "hidden"]
+];
+const timelineProbe = {
+	attrs: [
+		...NODES.flatMap(rowProbe),
+		["ruler", "aria-valuemin"],
+		["ruler", "aria-valuenow"],
+		["ruler", "aria-valuemax"]
+	],
+	events: ["onValueChange"]
+};
+//#endregion
+export { timelineBridge, timelineConfig, timelineProbe, timelineSteps };