@cssints/apg-specs 0.0.0-stage → 0.5.1

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

@@ -0,0 +1,25 @@
+import { ActionStep, Probe, ScenarioConfig, SpecBridge } from "../scenario.mjs";
+//#region src/apg/toolbar.bridge.d.ts
+export type ToolbarOrientation = "horizontal" | "vertical";
+export interface ToolbarConfig {
+  readonly items: ReadonlyArray<string>;
+  readonly orientation: ToolbarOrientation;
+  readonly wrap: boolean;
+  readonly disabled: ReadonlyArray<number>;
+}
+/**
+ * Toolbar vocabulary <-> `specs/apg/toolbar.qnt`. The spec's fixture is fixed at
+ * five items (0 menu-button, 1 button, 2 text, 3 spin, 4 button); the fixture
+ * maps item-kind tokens onto that shape, and a `menutrigger` token becomes item
+ * 0. The roving-tabindex part is the platform's `focusgroup` contract (see
+ * `shared/focusgroup.qnt`); this bridge reads the spec's delta (axis, wrap,
+ * disabled-but-focusable, embedded consumers) plus the menu-button: while the
+ * menu is open, focus is the menu item, the popup is visible and item 0 carries
+ * aria-expanded.
+ */
+export declare const toolbarConfig: (config: ScenarioConfig) => ToolbarConfig;
+export declare const toolbarBridge: SpecBridge;
+/** The user-level steps a differential walk draws from. */
+export declare const toolbarSteps: ReadonlyArray<ActionStep>;
+export declare const toolbarProbe: Probe;
+//#endregion

package/dist/apg/toolbar.bridge.mjs

@@ -0,0 +1,307 @@
+import { Unsupported } from "../scenario.mjs";
+//#region src/apg/toolbar.bridge.ts
+const specEvent = (tag, params = {}) => ({
+	_tag: tag,
+	...params
+});
+const UNMODELLED_TOKENS = /* @__PURE__ */ new Set([
+	"separator",
+	"combobox",
+	"numberfield",
+	"modaltrigger",
+	"group"
+]);
+const isMenuTrigger = (entry) => entry.toLowerCase().includes("menutrigger");
+const toItems = (value) => {
+	if (typeof value === "number") {
+		if (!Number.isInteger(value) || value < 0) throw new Unsupported(`items ${String(value)}`);
+		return Array.from({ length: value }, () => "button");
+	}
+	if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
+		for (const entry of value) {
+			if (isMenuTrigger(entry)) continue;
+			if (entry.includes(":") || UNMODELLED_TOKENS.has(entry.toLowerCase())) throw new Unsupported(`item ${entry}`);
+		}
+		return value.map((entry) => isMenuTrigger(entry) ? "menutrigger" : entry);
+	}
+	throw new Unsupported(`items ${JSON.stringify(value)}`);
+};
+const toIndices = (value) => {
+	if (Array.isArray(value) && value.every((v) => typeof v === "number" && Number.isInteger(v))) return value;
+	throw new Unsupported(`disabled ${JSON.stringify(value)}`);
+};
+/**
+* Toolbar vocabulary <-> `specs/apg/toolbar.qnt`. The spec's fixture is fixed at
+* five items (0 menu-button, 1 button, 2 text, 3 spin, 4 button); the fixture
+* maps item-kind tokens onto that shape, and a `menutrigger` token becomes item
+* 0. The roving-tabindex part is the platform's `focusgroup` contract (see
+* `shared/focusgroup.qnt`); this bridge reads the spec's delta (axis, wrap,
+* disabled-but-focusable, embedded consumers) plus the menu-button: while the
+* menu is open, focus is the menu item, the popup is visible and item 0 carries
+* aria-expanded.
+*/
+const toolbarConfig = (config) => {
+	let items = [];
+	let orientation = "horizontal";
+	let wrap = false;
+	let disabled = [];
+	for (const [key, value] of Object.entries(config)) switch (key) {
+		case "items":
+			items = toItems(value);
+			break;
+		case "orientation":
+			if (value !== "horizontal" && value !== "vertical") throw new Unsupported(`orientation ${JSON.stringify(value)}`);
+			orientation = value;
+			break;
+		case "loopFocus":
+			wrap = value === true;
+			break;
+		case "disabled":
+		case "disabledIndices":
+			disabled = toIndices(value);
+			break;
+		case "direction":
+			if (value !== "ltr") throw new Unsupported(`direction ${JSON.stringify(value)}`);
+			break;
+		case "role":
+			if (value !== "toolbar") throw new Unsupported(`role ${JSON.stringify(value)}`);
+			break;
+		case "composite":
+			if (value !== true) throw new Unsupported(`composite ${JSON.stringify(value)}`);
+			break;
+		default: throw new Unsupported(`config ${key}=${JSON.stringify(value)}`);
+	}
+	if (items.length === 0) throw new Unsupported("config has no items");
+	return {
+		items,
+		orientation,
+		wrap,
+		disabled
+	};
+};
+const BIT = [
+	1n,
+	2n,
+	4n,
+	8n,
+	16n
+];
+const bit = (index) => BIT[index] ?? 0n;
+const isDisabledIn = (mask, index) => mask / bit(index) % 2n === 1n;
+const keyEvent = (key) => {
+	switch (key) {
+		case "ArrowLeft":
+		case "ArrowRight":
+		case "ArrowUp":
+		case "ArrowDown":
+		case "Home":
+		case "End": return specEvent("key", { k: key.replace("Arrow", "") });
+		case "Enter":
+		case " ":
+		case "Space": return specEvent("activate");
+		case "Escape": return specEvent("escape");
+		case "Tab": return specEvent("tab", { back: false });
+		case "Shift+Tab": return specEvent("tab", { back: true });
+		default: throw new Unsupported(`key ${key ?? ""}`);
+	}
+};
+const itemIndexOf = (target) => {
+	const match = /^item:(\d+)$/.exec(target ?? "item:0");
+	if (match?.[1] === void 0) throw new Unsupported(`target ${target ?? ""}`);
+	return Number(match[1]);
+};
+const programmatic = (step) => {
+	switch (step.prop) {
+		case "tabIn": return [specEvent("tabIn")];
+		case "leave": return [specEvent("leave")];
+		case "tab": return [specEvent("tab", { back: step.value?.["back"] === true })];
+		case "click": return [specEvent("click", { idx: BigInt(Number(step.value)) })];
+		case "key": {
+			const key = step.value?.["k"];
+			if (typeof key !== "string") throw new Unsupported(`prop key ${JSON.stringify(step.value)}`);
+			const named = [
+				"Left",
+				"Right",
+				"Up",
+				"Down"
+			].includes(key) ? `Arrow${key}` : key;
+			return [keyEvent(named)];
+		}
+		case "activate": return [specEvent("activate")];
+		case "toggleDisabled": return [specEvent("toggleDisabled", { idx: BigInt(Number(step.value)) })];
+		case "flipOrientation": return [specEvent("flipOrientation")];
+		case "flipWrap": return [specEvent("flipWrap")];
+		default: throw new Unsupported(`prop ${step.prop ?? ""}`);
+	}
+};
+const toolbarBridge = {
+	setup: (config) => {
+		const mount = toolbarConfig(config);
+		return [
+			...mount.orientation === "vertical" ? [specEvent("flipOrientation")] : [],
+			...mount.wrap ? [specEvent("flipWrap")] : [],
+			...mount.disabled.map((index) => specEvent("toggleDisabled", { idx: BigInt(index) }))
+		];
+	},
+	event: (step) => {
+		if (step.repeat === true) throw new Unsupported("key repeat");
+		switch (step.event) {
+			case "focus": return [specEvent("tabIn")];
+			case "blur": return [specEvent("leave")];
+			case "click": return [specEvent("click", { idx: BigInt(itemIndexOf(step.target)) })];
+			case "key": return [keyEvent(step.key)];
+			case "hover":
+			case "unhover":
+			case "wait": return [];
+			case "prop": return programmatic(step);
+			default: throw new Unsupported(`event ${step.event}`);
+		}
+	},
+	focus: (state) => {
+		if (state["menuOpen"] === true) return `menuitem:${Number(state["menuIndex"])}`;
+		const focus = Number(state["focus"]);
+		return focus >= 0 ? `item:${focus}` : null;
+	},
+	attr: (state, target, name) => {
+		if (target === "toolbar") {
+			if (name === "role") return "toolbar";
+			if (name === "aria-orientation") return String(state["orientation"]);
+			throw new Unsupported(`attribute ${name} on toolbar`);
+		}
+		const index = itemIndexOf(target);
+		if (name === "tabindex") return Number(state["tabStop"]) === index ? "0" : "-1";
+		if (name === "aria-disabled") {
+			const mask = typeof state["disabledMask"] === "bigint" ? state["disabledMask"] : 0n;
+			return isDisabledIn(mask, index) ? "true" : null;
+		}
+		if (index === 0 && name === "aria-haspopup") return "menu";
+		if (index === 0 && name === "aria-expanded") return String(state["menuOpen"] === true);
+		throw new Unsupported(`attribute ${name} on ${target}`);
+	},
+	visible: (state) => state["menuOpen"] === true ? ["popup"] : [],
+	events: () => []
+};
+/** The user-level steps a differential walk draws from. */
+const toolbarSteps = [
+	{
+		event: "prop",
+		prop: "tabIn"
+	},
+	{
+		event: "prop",
+		prop: "leave"
+	},
+	{
+		event: "prop",
+		prop: "tab",
+		value: { back: false }
+	},
+	{
+		event: "prop",
+		prop: "tab",
+		value: { back: true }
+	},
+	{
+		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: "click",
+		value: 4
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { k: "Left" }
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { k: "Right" }
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { k: "Up" }
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { k: "Down" }
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { k: "Home" }
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { k: "End" }
+	},
+	{
+		event: "prop",
+		prop: "key",
+		value: { k: "Escape" }
+	},
+	{
+		event: "prop",
+		prop: "activate"
+	},
+	{
+		event: "prop",
+		prop: "toggleDisabled",
+		value: 0
+	},
+	{
+		event: "prop",
+		prop: "toggleDisabled",
+		value: 3
+	},
+	{
+		event: "prop",
+		prop: "flipOrientation"
+	},
+	{
+		event: "prop",
+		prop: "flipWrap"
+	}
+];
+const toolbarProbe = {
+	attrs: [
+		["toolbar", "role"],
+		["toolbar", "aria-orientation"],
+		["item:0", "tabindex"],
+		["item:0", "aria-disabled"],
+		["item:0", "aria-haspopup"],
+		["item:0", "aria-expanded"],
+		["item:1", "tabindex"],
+		["item:1", "aria-disabled"],
+		["item:2", "tabindex"],
+		["item:2", "aria-disabled"],
+		["item:3", "tabindex"],
+		["item:3", "aria-disabled"],
+		["item:4", "tabindex"],
+		["item:4", "aria-disabled"]
+	],
+	events: []
+};
+//#endregion
+export { toolbarBridge, toolbarConfig, toolbarProbe, toolbarSteps };