@tanstack/hotkeys-devtools 1.3.5 → 1.4.0

package/README.md

@@ -51,7 +51,7 @@
 # TanStack Hotkeys
 
 > [!NOTE]
-> TanStack Hotkeys is alpha. We are actively developing the library and are open to feedback and contributions.
+> TanStack Hotkeys is in beta. We are actively developing the library and are open to feedback and contributions.
 
 Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objects, a cross-platform `Mod` key, a singleton Hotkey Manager, and utilities for cheatsheet UIs—built to stay SSR-friendly.
 

package/dist/HotkeysContextProvider.js

@@ -7,6 +7,12 @@ import { HotkeyManager, KeyStateTracker, toHotkeyRegistrationView } from "@tanst
 const HotkeysDevtoolsContext = createContext({
 	registrations: () => [],
 	appHotkeys: () => [],
+	scopes: () => ({
+		active: [],
+		exclusive: null,
+		allowed: [],
+		suspended: []
+	}),
 	heldKeys: () => [],
 	heldCodes: () => ({}),
 	sequenceProgressNow: () => Date.now()
@@ -20,6 +26,7 @@ function HotkeysContextProvider(props) {
 	const [registrations, setRegistrations] = createSignal(readRegistrations(manager));
 	const [appHotkeysStore, setAppHotkeysStore] = createSignal(manager.appHotkeys.state);
 	const [appHotkeysVersion, setAppHotkeysVersion] = createSignal(0);
+	const [scopes, setScopes] = createSignal(manager.scopes.state);
 	const [heldKeys, setHeldKeys] = createSignal(tracker.store.state.heldKeys);
 	const [heldCodes, setHeldCodes] = createSignal(tracker.store.state.heldCodes);
 	createEffect(() => {
@@ -28,6 +35,12 @@ function HotkeysContextProvider(props) {
 		}).unsubscribe;
 		onCleanup(() => unsubscribe());
 	});
+	createEffect(() => {
+		const unsubscribe = manager.scopes.subscribe(() => {
+			setScopes(manager.scopes.state);
+		}).unsubscribe;
+		onCleanup(() => unsubscribe());
+	});
 	createEffect(() => {
 		const unsubscribe = manager.appHotkeys.subscribe(() => {
 			setAppHotkeysStore(manager.appHotkeys.state);
@@ -77,6 +90,7 @@ function HotkeysContextProvider(props) {
 		value: {
 			registrations,
 			appHotkeys,
+			scopes,
 			heldKeys,
 			heldCodes,
 			sequenceProgressNow

package/dist/_registrations.js

@@ -20,7 +20,8 @@ function useRegistrationConflicts(registration) {
 			eventType: reg.options.eventType,
 			excludeIds: [reg.id]
 		};
-		const overlapping = findHotkeyConflicts(binding, options).map((c) => c.registration);
+		const scope = reg.options.scope ?? "global";
+		const overlapping = findHotkeyConflicts(binding, options).map((c) => c.registration).filter((r) => (r.options.scope ?? "global") === scope);
 		const ids = new Set(overlapping.map((r) => r.id));
 		return {
 			overlapping,
@@ -40,7 +41,7 @@ function formatRegistration(reg) {
 }
 /** Sequences may mix logical keys and physical codes, so report both when needed. */
 function getBindingKind(reg) {
-	const parsed = reg.kind === "sequence" ? reg.parsedSequence : [reg.parsedHotkey];
+	const parsed = reg.kind === "sequence" ? reg.parsedSequence : [reg.parsedChord];
 	const codes = parsed.filter((step) => step.code !== void 0).length;
 	return codes === 0 ? "Key" : codes === parsed.length ? "Code" : "Mixed";
 }

package/dist/_scopes.js

@@ -0,0 +1,41 @@
+//#region src/_scopes.ts
+const scopeStatusDescriptions = {
+	exclusive: "Exclusive: only hotkeys in this scope, scopes nested in it, and scopes it allows fire",
+	allowed: "Allowed: the exclusive scope lets hotkeys in this scope fire",
+	active: "Active: hotkeys in this scope fire",
+	suspended: "Suspended: another scope is exclusive",
+	inactive: "Inactive: nothing has activated this scope"
+};
+function getScopeStatus(scope, state) {
+	if (scope === state.exclusive) return "exclusive";
+	if (state.allowed.includes(scope)) return "allowed";
+	if (state.suspended.includes(scope)) return "suspended";
+	return scope === "global" || state.active.includes(scope) ? "active" : "inactive";
+}
+/**
+* Groups registrations by scope, highest precedence first: the exclusive
+* scope, other activated scopes from most to least recent, `'global'`, then
+* inactive scopes by name.
+*/
+function groupByScope(registrations, state) {
+	const byScope = /* @__PURE__ */ new Map();
+	for (const registration of registrations) {
+		const scope = registration.options.scope ?? "global";
+		const list = byScope.get(scope);
+		if (list) list.push(registration);
+		else byScope.set(scope, [registration]);
+	}
+	const rank = (scope) => {
+		if (scope === state.exclusive) return Infinity;
+		if (scope === "global") return 0;
+		return state.active.indexOf(scope) + 1 || -1;
+	};
+	return [...byScope.keys()].sort((a, b) => rank(b) - rank(a) || a.localeCompare(b)).map((scope) => ({
+		scope,
+		status: getScopeStatus(scope, state),
+		registrations: byScope.get(scope)
+	}));
+}
+
+//#endregion
+export { getScopeStatus, groupByScope, scopeStatusDescriptions };