@inklu/keys 2.0.1 → 2.1.0

package/dist/react.mjs

@@ -1,8 +1,73 @@
 "use client";
-import { observe } from "./attributes.mjs";
-import { a as ariaKeyShortcuts, c as spokenBinding, d as seq, f as toBindings, i as createRebinder, l as bindingSignature, n as createCommands, o as bindingTokens, p as validateBinding, r as ALWAYS_SCOPE, s as formatBinding, t as matchCommands, u as isSingleKeyBinding } from "./src-DgYjA1oS.mjs";
-import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { a as bindingTokens, c as isSingleKeyBinding, d as isModifierKey, f as keyName, i as ariaKeyShortcuts, l as seq, n as createCommands, o as formatBinding, r as createRebinder, s as spokenBinding, t as matchCommands, u as validateBinding } from "./src-B76YvObL.mjs";
+import { useCallback, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+//#region src/held.ts
+/** Which keys are down right now. Listens only while something is subscribed. */
+const NONE = {
+	keys: [],
+	codes: {}
+};
+/** Held keys by physical key, so two keys producing one character stay apart. */
+const down = /* @__PURE__ */ new Map();
+const listeners = /* @__PURE__ */ new Set();
+let state = NONE;
+const identify = (event) => event.code || `key:${keyName(event.key)}`;
+function publish() {
+	const entries = [...down.values()];
+	state = entries.length === 0 ? NONE : {
+		keys: [...new Set(entries.map((entry) => entry.key))],
+		codes: Object.fromEntries(entries.map((entry) => [entry.key, entry.code]))
+	};
+	for (const listener of listeners) listener();
+}
+function onKeyDown(event) {
+	if (!event.key || down.has(identify(event))) return;
+	down.set(identify(event), {
+		key: keyName(event.key),
+		code: event.code
+	});
+	publish();
+}
+function onKeyUp(event) {
+	down.delete(identify(event));
+	if (event.key === "Meta") {
+		for (const [identity, entry] of down) if (!isModifierKey(entry.key)) down.delete(identity);
+	}
+	publish();
+}
+/** Leaving the window swallows the keyups, so nothing is held any more. */
+function onBlur() {
+	if (down.size === 0) return;
+	down.clear();
+	publish();
+}
+/** The keys held right now. Empty unless something is subscribed. */
+function heldKeys() {
+	return state;
+}
+/** Whether `key` is held, by the name `KeyboardEvent.key` gives it. */
+function isHeld(key) {
+	return state.keys.includes(keyName(key));
+}
+/** Watches held keys until the returned function is called. */
+function subscribeHeldKeys(listener) {
+	listeners.add(listener);
+	if (listeners.size === 1) {
+		document.addEventListener("keydown", onKeyDown, true);
+		document.addEventListener("keyup", onKeyUp, true);
+		window.addEventListener("blur", onBlur);
+	}
+	return () => {
+		listeners.delete(listener);
+		if (listeners.size > 0) return;
+		document.removeEventListener("keydown", onKeyDown, true);
+		document.removeEventListener("keyup", onKeyUp, true);
+		window.removeEventListener("blur", onBlur);
+		down.clear();
+		state = NONE;
+	};
+}
+//#endregion
 //#region src/react/hooks.ts
 const EMPTY_TOKENS = [];
 const EMPTY_CODES = {};
@@ -55,7 +120,10 @@ function useShortcut(registry, id) {
 	}), [command]);
 }
 /**
-* Activates a scope for the lifecycle of the component.
+* Activates a scope for the lifecycle of the component. Scopes rank in the
+* order they are pushed, which here is the order React runs effects in: a
+* surface opened later ranks higher, but of a parent and a child opening in
+* the same render the child is pushed first.
 *
 * @example
 * ```tsx
@@ -64,113 +132,85 @@ function useShortcut(registry, id) {
 */
 function useScope(registry, name, active = true, options = {}) {
 	const exclusive = options.exclusive === true;
-	const strict = options.strict === true;
 	useEffect(() => {
 		if (!active) return;
-		return registry.pushScope(name, {
-			exclusive,
-			strict
-		});
+		return registry.pushScope(name, { exclusive });
 	}, [
 		registry,
 		name,
 		active,
-		exclusive,
-		strict
+		exclusive
 	]);
 }
-/** Registers a dynamic command for the lifecycle of the component. */
-function useRegisterCommand(registry, id, definition) {
-	const latest = useRef(definition);
-	latest.current = definition;
-	const signature = useMemo(() => definitionSignature(definition), [definition]);
+/**
+* Attaches what a command does for the lifecycle of the component, so the
+* behaviour lives where its state does. The latest `run` is always the one
+* called. While `enabled` is `false` the component steps back: the command
+* falls to the handler attached before it, or cannot run if there is none.
+* The handler attached last wins, and React attaches a parent's after its
+* children's when they mount together.
+*
+* @example
+* ```tsx
+* useCommandHandler(commands, "palette.open", () => setOpen(true));
+* useCommandHandler(commands, "doc.save", save, dirty);
+* ```
+*/
+function useCommandHandler(registry, id, run, enabled = true) {
+	const latest = useRef(run);
+	latest.current = run;
 	useEffect(() => {
-		const handle = registry.add(id, {
-			...latest.current,
-			run: (context) => latest.current.run(context),
-			when: () => latest.current.when?.() !== false
-		});
-		return () => handle.dispose();
+		if (!enabled) return;
+		return registry.handle(id, (context) => latest.current(context));
 	}, [
 		registry,
 		id,
-		signature
+		enabled
 	]);
 }
-function definitionSignature(definition) {
-	return [
-		toBindings(definition.keys).map((binding) => bindingSignature(binding)).join("|"),
-		definition.scope ?? "",
-		definition.title,
-		definition.description ?? "",
-		definition.group ?? "",
-		(definition.keywords ?? []).join(","),
-		definition.hidden === true ? "1" : "0",
-		definition.enabled === false ? "0" : "1",
-		definition.preventDefault === false ? "0" : "1",
-		definition.ignoreInputs === void 0 ? "" : String(definition.ignoreInputs),
-		definition.requireReset === true ? "1" : "0",
-		definition.sequenceTimeout === void 0 ? "" : String(definition.sequenceTimeout)
-	].join(" ");
-}
-const IDLE_REBIND = {
-	recording: false,
-	binding: null,
-	steps: [],
-	conflicts: []
-};
 /** Hook for recording and configuring a command's keybindings. */
 function useRebind(registry, id, options = {}) {
 	const latest = useRef(options);
 	latest.current = options;
-	const command = useCommand(registry, id);
-	const [rebinder, setRebinder] = useState(null);
-	const [state, setState] = useState(IDLE_REBIND);
 	const mode = options.mode ?? "chord";
-	const idleTimeout = options.idleTimeout;
-	useEffect(() => {
-		const instance = createRebinder(registry, id, {
-			mode,
-			idleTimeout,
-			get apply() {
-				return latest.current.apply;
-			},
-			get add() {
-				return latest.current.add;
-			},
-			get rejectConflicts() {
-				return latest.current.rejectConflicts;
-			},
-			get ignoreInputs() {
-				return latest.current.ignoreInputs;
-			},
-			onRecord: (binding, conflicts) => latest.current.onRecord?.(binding, conflicts),
-			onCancel: () => latest.current.onCancel?.(),
-			onClear: () => latest.current.onClear?.()
-		});
-		const unsubscribe = instance.subscribe(() => setState(instance.state));
-		setRebinder(instance);
-		return () => {
-			unsubscribe();
-			instance.destroy();
-			setRebinder(null);
-			setState(IDLE_REBIND);
-		};
-	}, [
+	const rebinder = useMemo(() => createRebinder(registry, id, {
+		mode,
+		get apply() {
+			return latest.current.apply;
+		},
+		get add() {
+			return latest.current.add;
+		},
+		get rejectConflicts() {
+			return latest.current.rejectConflicts;
+		},
+		get ignoreInputs() {
+			return latest.current.ignoreInputs;
+		},
+		get idleTimeout() {
+			return latest.current.idleTimeout;
+		},
+		onRecord: (binding, conflicts) => latest.current.onRecord?.(binding, conflicts),
+		onCancel: () => latest.current.onCancel?.(),
+		onClear: () => latest.current.onClear?.()
+	}), [
 		registry,
 		id,
-		mode,
-		idleTimeout
+		mode
 	]);
+	useEffect(() => rebinder.destroy, [rebinder]);
+	const getState = useCallback(() => rebinder.state, [rebinder]);
+	const state = useSyncExternalStore(rebinder.subscribe, getState, getState);
+	const command = useCommand(registry, id);
 	return useMemo(() => ({
 		...state,
 		display: command?.display[0] ?? "",
 		tokens: command?.tokens[0] ?? EMPTY_TOKENS,
 		overridden: command?.overridden ?? false,
-		start: () => rebinder?.start(),
-		stop: () => rebinder?.stop(),
-		cancel: () => rebinder?.cancel(),
-		commit: () => rebinder?.commit(),
+		start: rebinder.start,
+		stop: rebinder.stop,
+		cancel: rebinder.cancel,
+		commit: rebinder.commit,
 		clear: () => registry.keymap.set(id, null),
 		reset: () => registry.keymap.reset(id)
 	}), [
@@ -181,15 +221,9 @@ function useRebind(registry, id, options = {}) {
 		id
 	]);
 }
-function useKeyState() {
-	return useCallback((onChange) => {
-		const subscription = getKeyStateTracker().store.subscribe(onChange);
-		return () => subscription.unsubscribe();
-	}, []);
-}
 /** Returns an array of keys currently held down. */
 function useHeldKeys() {
-	return useSyncExternalStore(useKeyState(), () => getKeyStateTracker().store.state.heldKeys, getEmptyTokens);
+	return useSyncExternalStore(subscribeHeldKeys, () => heldKeys().keys, getEmptyTokens);
 }
 /**
 * Checks whether a specific key is currently held down.
@@ -200,13 +234,12 @@ function useHeldKeys() {
 * ```
 */
 function useKeyHold(key) {
-	const subscribe = useKeyState();
-	const getSnapshot = useCallback(() => getKeyStateTracker().isKeyHeld(key), [key]);
-	return useSyncExternalStore(subscribe, getSnapshot, getFalse);
+	const getSnapshot = useCallback(() => isHeld(key), [key]);
+	return useSyncExternalStore(subscribeHeldKeys, getSnapshot, getFalse);
 }
 /** Returns a map of held key identifiers to physical event codes. */
 function useHeldKeyCodes() {
-	return useSyncExternalStore(useKeyState(), () => getKeyStateTracker().store.state.heldCodes, getEmptyCodes);
+	return useSyncExternalStore(subscribeHeldKeys, () => heldKeys().codes, getEmptyCodes);
 }
 /**
 * Returns currently active partially-typed sequences.
@@ -222,4 +255,4 @@ function usePendingSequences(registry) {
 	return useSyncExternalStore(subscribe, getSnapshot, getEmptyPending);
 }
 //#endregion
-export { ALWAYS_SCOPE, ariaKeyShortcuts, bindingTokens, createCommands, createRebinder, formatBinding, isSingleKeyBinding, matchCommands, observe, seq, spokenBinding, useCommand, useCommands, useHeldKeyCodes, useHeldKeys, useKeyHold, useMountCommands, usePendingSequences, useRebind, useRegisterCommand, useScope, useShortcut, validateBinding };
+export { ariaKeyShortcuts, bindingTokens, createCommands, createRebinder, formatBinding, isSingleKeyBinding, matchCommands, seq, spokenBinding, useCommand, useCommandHandler, useCommands, useHeldKeyCodes, useHeldKeys, useKeyHold, useMountCommands, usePendingSequences, useRebind, useScope, useShortcut, validateBinding };