@tanstack/hotkeys-devtools 1.2.0 → 1.3.0

package/dist/HotkeysContextProvider.js

@@ -1,36 +1,51 @@
 import { needsSequenceProgressClock } from "./sequence-progress.js";
 import { createComponent } from "solid-js/web";
-import { createContext, createEffect, createSignal, onCleanup, useContext } from "solid-js";
-import { HotkeyManager, KeyStateTracker, SequenceManager } from "@tanstack/hotkeys";
+import { createContext, createEffect, createMemo, createSignal, onCleanup, useContext } from "solid-js";
+import { HotkeyManager, KeyStateTracker, toHotkeyRegistrationView } from "@tanstack/hotkeys";
 
 //#region src/HotkeysContextProvider.tsx
 const HotkeysDevtoolsContext = createContext({
 	registrations: () => [],
-	sequenceRegistrations: () => [],
+	appHotkeys: () => [],
 	heldKeys: () => [],
 	heldCodes: () => ({}),
 	sequenceProgressNow: () => Date.now()
 });
+function readRegistrations(manager) {
+	return Array.from(manager.registrations.state.values()).map(toHotkeyRegistrationView);
+}
 function HotkeysContextProvider(props) {
 	const manager = HotkeyManager.getInstance();
-	const sequenceManager = SequenceManager.getInstance();
 	const tracker = KeyStateTracker.getInstance();
-	const [registrations, setRegistrations] = createSignal(Array.from(manager.registrations.state.values()));
-	const [sequenceRegistrations, setSequenceRegistrations] = createSignal(Array.from(sequenceManager.registrations.state.values()));
+	const [registrations, setRegistrations] = createSignal(readRegistrations(manager));
+	const [appHotkeysStore, setAppHotkeysStore] = createSignal(manager.appHotkeys.state);
+	const [appHotkeysVersion, setAppHotkeysVersion] = createSignal(0);
 	const [heldKeys, setHeldKeys] = createSignal(tracker.store.state.heldKeys);
 	const [heldCodes, setHeldCodes] = createSignal(tracker.store.state.heldCodes);
 	createEffect(() => {
 		const unsubscribe = manager.registrations.subscribe(() => {
-			setRegistrations(Array.from(manager.registrations.state.values()));
+			setRegistrations(readRegistrations(manager));
+		}).unsubscribe;
+		onCleanup(() => unsubscribe());
+	});
+	createEffect(() => {
+		const unsubscribe = manager.appHotkeys.subscribe(() => {
+			setAppHotkeysStore(manager.appHotkeys.state);
 		}).unsubscribe;
 		onCleanup(() => unsubscribe());
 	});
 	createEffect(() => {
-		const unsubscribe = sequenceManager.registrations.subscribe(() => {
-			setSequenceRegistrations(Array.from(sequenceManager.registrations.state.values()));
+		const store = appHotkeysStore();
+		if (!store) return;
+		const unsubscribe = store.store.subscribe(() => {
+			setAppHotkeysVersion((version) => version + 1);
 		}).unsubscribe;
 		onCleanup(() => unsubscribe());
 	});
+	const appHotkeys = createMemo(() => {
+		appHotkeysVersion();
+		return appHotkeysStore()?.getList(registrations()) ?? [];
+	});
 	createEffect(() => {
 		const unsubscribe = tracker.store.subscribe(() => {
 			setHeldKeys(tracker.store.state.heldKeys);
@@ -40,12 +55,12 @@ function HotkeysContextProvider(props) {
 	});
 	const [sequenceProgressNow, setSequenceProgressNow] = createSignal(Date.now());
 	createEffect(() => {
-		const regs = sequenceRegistrations();
+		const regs = registrations();
 		let id;
 		const tick = () => {
 			const t = Date.now();
 			setSequenceProgressNow(t);
-			if (!needsSequenceProgressClock(sequenceRegistrations(), t)) {
+			if (!needsSequenceProgressClock(registrations(), t)) {
 				if (id !== void 0) {
 					clearInterval(id);
 					id = void 0;
@@ -61,7 +76,7 @@ function HotkeysContextProvider(props) {
 	return createComponent(HotkeysDevtoolsContext.Provider, {
 		value: {
 			registrations,
-			sequenceRegistrations,
+			appHotkeys,
 			heldKeys,
 			heldCodes,
 			sequenceProgressNow

package/dist/_registrations.js

@@ -1,6 +1,6 @@
 import { useHotkeysDevtoolsState } from "./HotkeysContextProvider.js";
 import { createMemo } from "solid-js";
-import { findHotkeyConflicts, formatForDisplay, parseHotkey } from "@tanstack/hotkeys";
+import { findHotkeyConflicts, formatForDisplay } from "@tanstack/hotkeys";
 
 //#region src/_registrations.ts
 /** Refresh shared conflict reporting when either registry changes. */
@@ -8,13 +8,12 @@ function useRegistrationConflicts(registration) {
 	const state = useHotkeysDevtoolsState();
 	return createMemo(() => {
 		state.registrations();
-		state.sequenceRegistrations();
 		const reg = registration();
 		if (reg.options.enabled === false) return {
 			overlapping: [],
 			separate: []
 		};
-		const binding = "sequence" in reg ? reg.sequence : reg.hotkey;
+		const binding = reg.hotkey;
 		const options = {
 			target: reg.target,
 			platform: reg.options.platform,
@@ -34,11 +33,14 @@ function useRegistrationConflicts(registration) {
 }
 /** Format either kind of registration, respecting its platform and physical labels. */
 function formatRegistration(reg) {
-	return ("sequence" in reg ? reg.sequence : [reg.hotkey]).map((step) => formatForDisplay(step, { platform: reg.options.platform })).join(" → ");
+	return formatForDisplay(reg.hotkey, {
+		platform: reg.options.platform,
+		sequenceSeparator: " → "
+	});
 }
 /** Sequences may mix logical keys and physical codes, so report both when needed. */
 function getBindingKind(reg) {
-	const parsed = "sequence" in reg ? reg.sequence.map((step) => parseHotkey(step, reg.options.platform)) : [reg.parsedHotkey];
+	const parsed = reg.kind === "sequence" ? reg.parsedSequence : [reg.parsedHotkey];
 	const codes = parsed.filter((step) => step.code !== void 0).length;
 	return codes === 0 ? "Key" : codes === parsed.length ? "Code" : "Mixed";
 }

package/dist/components/ActionButtons.js

@@ -1,18 +1,13 @@
 import { useStyles } from "../styles/use-styles.js";
 import { className, delegateEvents, effect, template } from "solid-js/web";
-import { HotkeyManager, SequenceManager } from "@tanstack/hotkeys";
+import { HotkeyManager } from "@tanstack/hotkeys";
 
 //#region src/components/ActionButtons.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<div><button><span></span>Trigger`);
-function isSequenceRegistration(reg) {
-	return "sequence" in reg && Array.isArray(reg.sequence);
-}
 function ActionButtons(props) {
 	const styles = useStyles();
 	const handleTrigger = () => {
-		const reg = props.registration;
-		if (isSequenceRegistration(reg)) SequenceManager.getInstance().triggerSequence(reg.id);
-		else HotkeyManager.getInstance().triggerRegistration(reg.id);
+		HotkeyManager.getInstance().triggerRegistration(props.registration.id);
 	};
 	return (() => {
 		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;

package/dist/components/DetailsPanel.js

@@ -23,7 +23,9 @@ var _tmpl$1 = /*#__PURE__*/ template(`<div><div><div>Key Breakdown</div><div></d
 var _tmpl$10 = /*#__PURE__*/ template(`<span><span>`);
 var _tmpl$11 = /*#__PURE__*/ template(`<span>→`);
 var _tmpl$12 = /*#__PURE__*/ template(`<div><div>Step <!> — </div><div><div><div></div></div><span aria-hidden=true>-></span><div>`);
-var _tmpl$13 = /*#__PURE__*/ template(`<div>Select a hotkey or sequence from the list to view its details`);
+var _tmpl$13 = /*#__PURE__*/ template(`<div><div></div><div><div>App hotkey</div><div></div><div>Status</div><div></div><div>Default</div><div></div><div>Context</div><div>`);
+var _tmpl$14 = /*#__PURE__*/ template(`<div><div><div>Meta</div><div></div></div><div><div>Declared options</div><div>`);
+var _tmpl$15 = /*#__PURE__*/ template(`<div>Select a hotkey from the list to view its details`);
 const PLATFORM_ROWS = [
 	{
 		id: "mac",
@@ -66,9 +68,6 @@ function KeyBreakdownPlatformTable(props) {
 		return _el$;
 	})();
 }
-function isSequenceRegistration(reg) {
-	return "sequence" in reg && Array.isArray(reg.sequence);
-}
 function getTargetDescription(target) {
 	if (typeof document !== "undefined" && target === document) return "document";
 	if (typeof window !== "undefined" && target === window) return "window";
@@ -348,7 +347,10 @@ function HotkeyDetails(props) {
 }
 function SequenceDetails(props) {
 	const reg = () => props.registration;
-	const liveReg = createMemo(() => props.state.sequenceRegistrations().find((r) => r.id === reg().id) ?? reg());
+	const liveReg = createMemo(() => {
+		const live = props.state.registrations().find((r) => r.id === reg().id);
+		return live?.kind === "sequence" ? live : reg();
+	});
 	const matchedSteps = createMemo(() => effectiveSequenceMatchedSteps(liveReg(), props.state.sequenceProgressNow()));
 	const conflicts = useRegistrationConflicts(liveReg);
 	const targetConflicts = () => conflicts().overlapping;
@@ -361,7 +363,7 @@ function SequenceDetails(props) {
 		var _el$93 = _tmpl$0(), _el$94 = _el$93.firstChild, _el$95 = _el$94.nextSibling, _el$96 = _el$95.firstChild, _el$97 = _el$96.nextSibling, _el$98 = _el$97.nextSibling, _el$99 = _el$98.nextSibling, _el$100 = _el$99.nextSibling, _el$101 = _el$100.nextSibling, _el$102 = _el$101.nextSibling, _el$103 = _el$102.nextSibling, _el$104 = _el$103.nextSibling, _el$105 = _el$104.nextSibling;
 		insert(_el$94, createComponent(For, {
 			get each() {
-				return liveReg().sequence;
+				return liveReg().hotkey;
 			},
 			children: (step, i) => (() => {
 				var _el$153 = _tmpl$10(), _el$154 = _el$153.firstChild;
@@ -378,10 +380,10 @@ function SequenceDetails(props) {
 		}));
 		insert(_el$97, () => liveReg().id);
 		insert(_el$99, () => getBindingKind(liveReg()));
-		insert(_el$101, () => liveReg().sequence.join(" → "));
+		insert(_el$101, () => liveReg().hotkey.join(" → "));
 		insert(_el$103, createComponent(For, {
 			get each() {
-				return liveReg().sequence;
+				return liveReg().hotkey;
 			},
 			children: (step, i) => (() => {
 				var _el$155 = _tmpl$10(), _el$156 = _el$155.firstChild;
@@ -433,7 +435,7 @@ function SequenceDetails(props) {
 		var _el$106 = _tmpl$1(), _el$107 = _el$106.firstChild, _el$108 = _el$107.firstChild, _el$109 = _el$108.nextSibling, _el$110 = _el$109.nextSibling, _el$111 = _el$107.nextSibling, _el$112 = _el$111.firstChild, _el$113 = _el$111.nextSibling, _el$114 = _el$113.firstChild, _el$115 = _el$114.nextSibling, _el$116 = _el$115.firstChild, _el$117 = _el$116.firstChild, _el$118 = _el$117.nextSibling, _el$119 = _el$116.nextSibling, _el$120 = _el$119.firstChild, _el$121 = _el$120.nextSibling, _el$122 = _el$113.nextSibling, _el$123 = _el$122.firstChild, _el$125 = _el$123.nextSibling.firstChild, _el$126 = _el$125.firstChild, _el$127 = _el$126.nextSibling, _el$128 = _el$125.nextSibling, _el$129 = _el$128.firstChild, _el$130 = _el$129.nextSibling, _el$131 = _el$128.nextSibling, _el$132 = _el$131.firstChild, _el$133 = _el$132.nextSibling, _el$134 = _el$133.firstChild, _el$135 = _el$131.nextSibling, _el$136 = _el$135.firstChild, _el$137 = _el$136.nextSibling, _el$138 = _el$135.nextSibling, _el$139 = _el$138.firstChild, _el$140 = _el$139.nextSibling, _el$141 = _el$138.nextSibling, _el$142 = _el$141.firstChild, _el$143 = _el$142.nextSibling, _el$144 = _el$141.nextSibling, _el$145 = _el$144.firstChild, _el$146 = _el$145.nextSibling;
 		insert(_el$109, createComponent(For, {
 			get each() {
-				return liveReg().sequence;
+				return liveReg().hotkey;
 			},
 			children: (step, i) => [createComponent(Show, {
 				get when() {
@@ -453,7 +455,7 @@ function SequenceDetails(props) {
 		}));
 		insert(_el$107, createComponent(For, {
 			get each() {
-				return liveReg().sequence;
+				return liveReg().hotkey;
 			},
 			children: (step, stepIdx) => {
 				const stepParsed = () => parseHotkey(step, sequenceCanonicalPlatform());
@@ -697,49 +699,150 @@ function SequenceDetails(props) {
 		return _el$106;
 	})()];
 }
+function AppHotkeyDetails(props) {
+	const styles = props.styles;
+	const appHotkey = () => props.item.appHotkey;
+	const format = (hotkey) => hotkey ? formatForDisplay(hotkey, { sequenceSeparator: " → " }) : "Unassigned";
+	const row = (label, value) => (() => {
+		var _el$197 = _tmpl$2(), _el$198 = _el$197.firstChild, _el$199 = _el$198.nextSibling;
+		insert(_el$198, label);
+		insert(_el$199, value);
+		effect((_p$) => {
+			var _v$127 = styles().optionRow, _v$128 = styles().optionLabel, _v$129 = styles().optionValue;
+			_v$127 !== _p$.e && className(_el$197, _p$.e = _v$127);
+			_v$128 !== _p$.t && className(_el$198, _p$.t = _v$128);
+			_v$129 !== _p$.a && className(_el$199, _p$.a = _v$129);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$197;
+	})();
+	return [(() => {
+		var _el$200 = _tmpl$13(), _el$201 = _el$200.firstChild, _el$202 = _el$201.nextSibling, _el$203 = _el$202.firstChild, _el$204 = _el$203.nextSibling, _el$205 = _el$204.nextSibling, _el$206 = _el$205.nextSibling, _el$207 = _el$206.nextSibling, _el$208 = _el$207.nextSibling, _el$209 = _el$208.nextSibling, _el$210 = _el$209.nextSibling;
+		insert(_el$201, () => format(appHotkey().hotkey));
+		insert(_el$204, () => appHotkey().id);
+		insert(_el$206, () => props.item.status);
+		insert(_el$208, () => format(appHotkey().defaultHotkey), null);
+		insert(_el$208, () => props.item.isCustom ? " (customized)" : "", null);
+		insert(_el$210, () => appHotkey().context ?? "global");
+		effect((_p$) => {
+			var _v$130 = styles().stateHeader, _v$131 = styles().stateTitle, _v$132 = styles().infoGrid, _v$133 = styles().infoLabel, _v$134 = styles().infoValueMono, _v$135 = styles().infoLabel, _v$136 = styles().infoValueMono, _v$137 = styles().infoLabel, _v$138 = styles().infoValueMono, _v$139 = styles().infoLabel, _v$140 = styles().infoValueMono;
+			_v$130 !== _p$.e && className(_el$200, _p$.e = _v$130);
+			_v$131 !== _p$.t && className(_el$201, _p$.t = _v$131);
+			_v$132 !== _p$.a && className(_el$202, _p$.a = _v$132);
+			_v$133 !== _p$.o && className(_el$203, _p$.o = _v$133);
+			_v$134 !== _p$.i && className(_el$204, _p$.i = _v$134);
+			_v$135 !== _p$.n && className(_el$205, _p$.n = _v$135);
+			_v$136 !== _p$.s && className(_el$206, _p$.s = _v$136);
+			_v$137 !== _p$.h && className(_el$207, _p$.h = _v$137);
+			_v$138 !== _p$.r && className(_el$208, _p$.r = _v$138);
+			_v$139 !== _p$.d && className(_el$209, _p$.d = _v$139);
+			_v$140 !== _p$.l && className(_el$210, _p$.l = _v$140);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0,
+			d: void 0,
+			l: void 0
+		});
+		return _el$200;
+	})(), (() => {
+		var _el$211 = _tmpl$14(), _el$212 = _el$211.firstChild, _el$213 = _el$212.firstChild, _el$214 = _el$213.nextSibling, _el$215 = _el$212.nextSibling, _el$216 = _el$215.firstChild, _el$217 = _el$216.nextSibling;
+		insert(_el$214, createComponent(For, {
+			get each() {
+				return Object.entries(appHotkey().meta ?? {});
+			},
+			children: ([key, value]) => row(key, String(value))
+		}), null);
+		insert(_el$214, createComponent(Show, {
+			get when() {
+				return !appHotkey().meta;
+			},
+			get children() {
+				return row("meta", "—");
+			}
+		}), null);
+		insert(_el$217, createComponent(For, {
+			get each() {
+				return Object.entries(appHotkey().options ?? {});
+			},
+			children: ([key, value]) => row(key, String(value))
+		}), null);
+		insert(_el$217, createComponent(Show, {
+			get when() {
+				return !appHotkey().options;
+			},
+			get children() {
+				return row("options", "—");
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$141 = styles().detailsGrid, _v$142 = styles().detailSection, _v$143 = styles().detailSectionHeader, _v$144 = styles().detailSection, _v$145 = styles().detailSectionHeader;
+			_v$141 !== _p$.e && className(_el$211, _p$.e = _v$141);
+			_v$142 !== _p$.t && className(_el$212, _p$.t = _v$142);
+			_v$143 !== _p$.a && className(_el$213, _p$.a = _v$143);
+			_v$144 !== _p$.o && className(_el$215, _p$.o = _v$144);
+			_v$145 !== _p$.i && className(_el$216, _p$.i = _v$145);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$211;
+	})()];
+}
 function DetailsPanel(props) {
 	const styles = useStyles();
 	const state = useHotkeysDevtoolsState();
 	return (() => {
-		var _el$197 = _tmpl$();
-		insert(_el$197, createComponent(Show, {
+		var _el$218 = _tmpl$();
+		insert(_el$218, createComponent(Show, {
 			get when() {
-				return props.selectedRegistration();
+				return props.selection();
 			},
 			get fallback() {
 				return (() => {
-					var _el$198 = _tmpl$13();
-					effect(() => className(_el$198, styles().noSelection));
-					return _el$198;
+					var _el$219 = _tmpl$15();
+					effect(() => className(_el$219, styles().noSelection));
+					return _el$219;
 				})();
 			},
-			children: (reg) => createComponent(Show, {
-				get when() {
-					return isSequenceRegistration(reg());
-				},
-				get fallback() {
-					return createComponent(HotkeyDetails, {
-						get registration() {
-							return reg();
-						},
-						getTargetDescription,
-						styles
-					});
-				},
-				get children() {
-					return createComponent(SequenceDetails, {
-						get registration() {
-							return reg();
-						},
-						state,
-						getTargetDescription,
-						styles
-					});
-				}
-			})
+			children: (selection) => {
+				const current = selection();
+				if (current.type === "appHotkey") return createComponent(AppHotkeyDetails, {
+					get item() {
+						return current.item;
+					},
+					styles
+				});
+				const reg = current.registration;
+				return reg.kind === "sequence" ? createComponent(SequenceDetails, {
+					registration: reg,
+					state,
+					getTargetDescription,
+					styles
+				}) : createComponent(HotkeyDetails, {
+					registration: reg,
+					getTargetDescription,
+					styles
+				});
+			}
 		}));
-		effect(() => className(_el$197, styles().stateDetails));
-		return _el$197;
+		effect(() => className(_el$218, styles().stateDetails));
+		return _el$218;
 	})();
 }
 

package/dist/components/HotkeyList.js

@@ -9,18 +9,22 @@ import clsx from "clsx";
 import { matchSorter } from "match-sorter";
 
 //#region src/components/HotkeyList.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span data-tooltip>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<span>x`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div><span><span></span></span><div><span data-binding-kind></span><span><span data-tooltip></span></span><span><span data-tooltip>Fires on <!> event</span></span><span><span data-tooltip>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<span><span>`);
-var _tmpl$6 = /*#__PURE__*/ template(`<span><span data-tooltip>`);
-var _tmpl$7 = /*#__PURE__*/ template(`<span>i<span data-tooltip>`);
-var _tmpl$8 = /*#__PURE__*/ template(`<button>&times;`);
-var _tmpl$9 = /*#__PURE__*/ template(`<div><input type=text placeholder="Search hotkeys...">`);
-var _tmpl$0 = /*#__PURE__*/ template(`<div>Hotkeys (<!>)`);
-var _tmpl$1 = /*#__PURE__*/ template(`<div>`);
-var _tmpl$10 = /*#__PURE__*/ template(`<div>Sequences (<!>)`);
+var _tmpl$ = /*#__PURE__*/ template(`<span><span>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-tooltip>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span>x`);
+var _tmpl$5 = /*#__PURE__*/ template(`<span>seq`);
+var _tmpl$6 = /*#__PURE__*/ template(`<span>custom<span data-tooltip>The user changed this app hotkey from its default`);
+var _tmpl$7 = /*#__PURE__*/ template(`<div><span><span></span></span><div><span data-binding-kind></span><span><span data-tooltip></span></span><span><span data-tooltip>Fires on <!> event</span></span><span><span data-tooltip>`);
+var _tmpl$8 = /*#__PURE__*/ template(`<span><span data-tooltip>`);
+var _tmpl$9 = /*#__PURE__*/ template(`<span>i<span data-tooltip>`);
+var _tmpl$0 = /*#__PURE__*/ template(`<span>custom`);
+var _tmpl$1 = /*#__PURE__*/ template(`<div><span><span></span><span></span></span><div><span><span data-tooltip>`);
+var _tmpl$10 = /*#__PURE__*/ template(`<button>&times;`);
+var _tmpl$11 = /*#__PURE__*/ template(`<div><input type=text placeholder="Search hotkeys...">`);
+var _tmpl$12 = /*#__PURE__*/ template(`<div>Hotkeys (<!>)`);
+var _tmpl$13 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$14 = /*#__PURE__*/ template(`<div>Declared, not registered (<!>)`);
 function getTargetLabel(target) {
 	if (typeof document !== "undefined" && target === document) return "document";
 	if (typeof window !== "undefined" && target === window) return "window";
@@ -51,9 +55,38 @@ function buildRowTooltip(meta) {
 	if (meta.description) parts.push(meta.description);
 	return parts.length > 0 ? parts.join(" — ") : void 0;
 }
-function SequenceListRow(props) {
+/** Formats a hotkey step by step, highlighting matched sequence steps. */
+function RegistrationKeys(props) {
 	const styles = useStyles();
-	const sequenceRegistrations = () => props.getSequences();
+	return createComponent(Show, {
+		get when() {
+			return memo(() => props.reg.kind === "sequence")() && props.reg;
+		},
+		get fallback() {
+			return formatRegistration(props.reg);
+		},
+		children: (sequence) => createComponent(For, {
+			get each() {
+				return sequence().hotkey;
+			},
+			children: (step, i) => (() => {
+				var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+				insert(_el$, createComponent(Show, {
+					get when() {
+						return i() > 0;
+					},
+					children: " "
+				}), _el$2);
+				insert(_el$2, () => formatForDisplay(step, { platform: props.reg.options.platform }));
+				effect(() => className(_el$2, i() < props.matchedSteps() ? styles().sequenceStepMatched : void 0));
+				return _el$;
+			})()
+		})
+	});
+}
+function RegistrationRow(props) {
+	const styles = useStyles();
+	const state = useHotkeysDevtoolsState();
 	const conflicts = useRegistrationConflicts(() => props.reg);
 	const targetConflicts = () => conflicts().overlapping;
 	const scopeConflicts = () => conflicts().separate;
@@ -66,9 +99,12 @@ function SequenceListRow(props) {
 	});
 	const scopeConflictTooltip = () => `Info: ${scopeConflicts().length} related bindings on separate targets`;
 	const enabled = () => props.reg.options.enabled !== false;
-	const liveSequenceReg = createMemo(() => sequenceRegistrations().find((r) => r.id === props.reg.id) ?? props.reg);
-	const triggerCount = () => sequenceRegistrations().find((r) => r.id === props.reg.id)?.triggerCount ?? props.reg.triggerCount;
-	const matchedSteps = createMemo(() => effectiveSequenceMatchedSteps(liveSequenceReg(), props.sequenceProgressNow()));
+	const liveReg = createMemo(() => state.registrations().find((r) => r.id === props.reg.id) ?? props.reg);
+	const triggerCount = () => liveReg().triggerCount;
+	const matchedSteps = createMemo(() => {
+		const reg = liveReg();
+		return reg.kind === "sequence" ? effectiveSequenceMatchedSteps(reg, props.sequenceProgressNow()) : 0;
+	});
 	const [prevCount, setPrevCount] = createSignal(props.reg.triggerCount);
 	const [pulsing, setPulsing] = createSignal(false);
 	createEffect(on(triggerCount, (current) => {
@@ -81,116 +117,133 @@ function SequenceListRow(props) {
 	const metaName = () => props.reg.options.meta?.name;
 	const rowTooltip = () => buildRowTooltip(props.reg.options.meta);
 	return (() => {
-		var _el$ = _tmpl$4(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$8 = _el$3.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.firstChild, _el$14 = _el$11.firstChild.nextSibling;
-		_el$14.nextSibling;
-		var _el$15 = _el$10.nextSibling, _el$16 = _el$15.firstChild;
-		_el$.$$click = () => props.setSelectedId(props.reg.id);
-		insert(_el$, createComponent(Show, {
+		var _el$3 = _tmpl$7(), _el$5 = _el$3.firstChild, _el$6 = _el$5.firstChild, _el$0 = _el$5.nextSibling, _el$10 = _el$0.firstChild, _el$14 = _el$10.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.firstChild, _el$20 = _el$17.firstChild.nextSibling;
+		_el$20.nextSibling;
+		var _el$21 = _el$16.nextSibling, _el$22 = _el$21.firstChild;
+		_el$3.$$click = () => props.setSelectedId(props.reg.id);
+		insert(_el$3, createComponent(Show, {
 			get when() {
 				return rowTooltip();
 			},
 			get children() {
-				var _el$2 = _tmpl$();
-				insert(_el$2, rowTooltip);
-				effect(() => className(_el$2, styles().rowTooltipText));
-				return _el$2;
+				var _el$4 = _tmpl$2();
+				insert(_el$4, rowTooltip);
+				effect(() => className(_el$4, styles().rowTooltipText));
+				return _el$4;
 			}
-		}), _el$3);
-		insert(_el$4, createComponent(For, {
-			get each() {
-				return liveSequenceReg().sequence;
+		}), _el$5);
+		insert(_el$6, createComponent(RegistrationKeys, {
+			get reg() {
+				return liveReg();
 			},
-			children: (step, i) => (() => {
-				var _el$17 = _tmpl$5(), _el$18 = _el$17.firstChild;
-				insert(_el$17, createComponent(Show, {
-					get when() {
-						return i() > 0;
-					},
-					children: " "
-				}), _el$18);
-				insert(_el$18, () => formatForDisplay(step, { platform: props.reg.options.platform }));
-				effect(() => className(_el$18, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
-				return _el$17;
-			})()
+			matchedSteps
 		}));
-		insert(_el$3, createComponent(Show, {
+		insert(_el$5, createComponent(Show, {
 			get when() {
 				return metaName();
 			},
 			get children() {
-				var _el$5 = _tmpl$2();
-				insert(_el$5, metaName);
-				effect(() => className(_el$5, styles().hotkeyLabelName));
-				return _el$5;
+				var _el$7 = _tmpl$3();
+				insert(_el$7, metaName);
+				effect(() => className(_el$7, styles().hotkeyLabelName));
+				return _el$7;
 			}
 		}), null);
-		insert(_el$, createComponent(Show, {
+		insert(_el$3, createComponent(Show, {
 			get when() {
 				return triggerCount() > 0;
 			},
 			get children() {
-				var _el$6 = _tmpl$3();
-				_el$6.firstChild;
-				insert(_el$6, triggerCount, null);
-				effect(() => className(_el$6, styles().triggerCount));
-				return _el$6;
+				var _el$8 = _tmpl$4();
+				_el$8.firstChild;
+				insert(_el$8, triggerCount, null);
+				effect(() => className(_el$8, styles().triggerCount));
+				return _el$8;
+			}
+		}), _el$0);
+		insert(_el$0, createComponent(Show, {
+			get when() {
+				return props.reg.kind === "sequence";
+			},
+			get children() {
+				var _el$1 = _tmpl$5();
+				effect(() => className(_el$1, clsx(styles().badge, styles().badgeTarget)));
+				return _el$1;
 			}
-		}), _el$8);
-		insert(_el$9, () => getBindingKind(props.reg));
-		insert(_el$8, (() => {
+		}), _el$10);
+		insert(_el$10, () => getBindingKind(props.reg));
+		insert(_el$0, createComponent(Show, {
+			get when() {
+				return props.appHotkey()?.isCustom;
+			},
+			get children() {
+				var _el$11 = _tmpl$6(), _el$13 = _el$11.firstChild.nextSibling;
+				effect((_p$) => {
+					var _v$ = clsx(styles().badge, styles().badgeCustom, styles().tooltip), _v$2 = styles().tooltipText;
+					_v$ !== _p$.e && className(_el$11, _p$.e = _v$);
+					_v$2 !== _p$.t && className(_el$13, _p$.t = _v$2);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$11;
+			}
+		}), _el$14);
+		insert(_el$0, (() => {
 			var _c$ = memo(() => !!hasTargetConflict());
 			return () => _c$() && (() => {
-				var _el$19 = _tmpl$6(), _el$20 = _el$19.firstChild;
-				insert(_el$19, () => targetConflictBadge().label, _el$20);
-				insert(_el$20, () => targetConflictBadge().tooltip);
+				var _el$23 = _tmpl$8(), _el$24 = _el$23.firstChild;
+				insert(_el$23, () => targetConflictBadge().label, _el$24);
+				insert(_el$24, () => targetConflictBadge().tooltip);
 				effect((_p$) => {
-					var _v$10 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$11 = styles().tooltipText;
-					_v$10 !== _p$.e && className(_el$19, _p$.e = _v$10);
-					_v$11 !== _p$.t && className(_el$20, _p$.t = _v$11);
+					var _v$12 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$13 = styles().tooltipText;
+					_v$12 !== _p$.e && className(_el$23, _p$.e = _v$12);
+					_v$13 !== _p$.t && className(_el$24, _p$.t = _v$13);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0
 				});
-				return _el$19;
+				return _el$23;
 			})();
-		})(), _el$0);
-		insert(_el$8, (() => {
+		})(), _el$14);
+		insert(_el$0, (() => {
 			var _c$2 = memo(() => !!hasScopeConflict());
 			return () => _c$2() && (() => {
-				var _el$21 = _tmpl$7(), _el$23 = _el$21.firstChild.nextSibling;
-				insert(_el$23, scopeConflictTooltip);
+				var _el$25 = _tmpl$9(), _el$27 = _el$25.firstChild.nextSibling;
+				insert(_el$27, scopeConflictTooltip);
 				effect((_p$) => {
-					var _v$12 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$13 = styles().tooltipText;
-					_v$12 !== _p$.e && className(_el$21, _p$.e = _v$12);
-					_v$13 !== _p$.t && className(_el$23, _p$.t = _v$13);
+					var _v$14 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$15 = styles().tooltipText;
+					_v$14 !== _p$.e && className(_el$25, _p$.e = _v$14);
+					_v$15 !== _p$.t && className(_el$27, _p$.t = _v$15);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0
 				});
-				return _el$21;
+				return _el$25;
 			})();
-		})(), _el$0);
-		insert(_el$0, () => enabled() ? "on" : "off", _el$1);
-		insert(_el$1, () => enabled() ? "Sequence is enabled" : "Sequence is disabled");
-		insert(_el$10, () => props.reg.options.eventType ?? "keydown", _el$11);
-		insert(_el$11, () => props.reg.options.eventType ?? "keydown", _el$14);
-		insert(_el$15, () => getTargetLabel(props.reg.target), _el$16);
-		insert(_el$16, () => getTargetTooltip(props.reg.target));
+		})(), _el$14);
+		insert(_el$14, () => enabled() ? "on" : "off", _el$15);
+		insert(_el$15, () => enabled() ? "Hotkey is enabled" : "Hotkey is disabled");
+		insert(_el$16, () => props.reg.options.eventType ?? "keydown", _el$17);
+		insert(_el$17, () => props.reg.options.eventType ?? "keydown", _el$20);
+		insert(_el$21, () => getTargetLabel(props.reg.target), _el$22);
+		insert(_el$22, () => getTargetTooltip(props.reg.target));
 		effect((_p$) => {
-			var _v$ = clsx(styles().hotkeyRow, props.selectedId() === props.reg.id && styles().hotkeyRowSelected, pulsing() && styles().hotkeyRowTriggered, rowTooltip() && styles().tooltip), _v$2 = styles().hotkeyLabel, _v$3 = styles().hotkeyLabelKeys, _v$4 = styles().hotkeyBadges, _v$5 = clsx(styles().badge, styles().badgeTarget), _v$6 = clsx(styles().badge, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$7 = styles().tooltipText, _v$8 = clsx(styles().badge, (props.reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$9 = styles().tooltipText, _v$0 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$1 = styles().tooltipText;
-			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
-			_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
-			_v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
-			_v$4 !== _p$.o && className(_el$8, _p$.o = _v$4);
-			_v$5 !== _p$.i && className(_el$9, _p$.i = _v$5);
-			_v$6 !== _p$.n && className(_el$0, _p$.n = _v$6);
-			_v$7 !== _p$.s && className(_el$1, _p$.s = _v$7);
-			_v$8 !== _p$.h && className(_el$10, _p$.h = _v$8);
-			_v$9 !== _p$.r && className(_el$11, _p$.r = _v$9);
-			_v$0 !== _p$.d && className(_el$15, _p$.d = _v$0);
-			_v$1 !== _p$.l && className(_el$16, _p$.l = _v$1);
+			var _v$3 = clsx(styles().hotkeyRow, props.selectedId() === props.reg.id && styles().hotkeyRowSelected, pulsing() && styles().hotkeyRowTriggered, rowTooltip() && styles().tooltip), _v$4 = styles().hotkeyLabel, _v$5 = styles().hotkeyLabelKeys, _v$6 = styles().hotkeyBadges, _v$7 = clsx(styles().badge, styles().badgeTarget), _v$8 = clsx(styles().badge, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$9 = styles().tooltipText, _v$0 = clsx(styles().badge, (props.reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$1 = styles().tooltipText, _v$10 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$11 = styles().tooltipText;
+			_v$3 !== _p$.e && className(_el$3, _p$.e = _v$3);
+			_v$4 !== _p$.t && className(_el$5, _p$.t = _v$4);
+			_v$5 !== _p$.a && className(_el$6, _p$.a = _v$5);
+			_v$6 !== _p$.o && className(_el$0, _p$.o = _v$6);
+			_v$7 !== _p$.i && className(_el$10, _p$.i = _v$7);
+			_v$8 !== _p$.n && className(_el$14, _p$.n = _v$8);
+			_v$9 !== _p$.s && className(_el$15, _p$.s = _v$9);
+			_v$0 !== _p$.h && className(_el$16, _p$.h = _v$0);
+			_v$1 !== _p$.r && className(_el$17, _p$.r = _v$1);
+			_v$10 !== _p$.d && className(_el$21, _p$.d = _v$10);
+			_v$11 !== _p$.l && className(_el$22, _p$.l = _v$11);
 			return _p$;
 		}, {
 			e: void 0,
@@ -205,234 +258,130 @@ function SequenceListRow(props) {
 			d: void 0,
 			l: void 0
 		});
-		return _el$;
+		return _el$3;
 	})();
 }
+/** A declared app hotkey that nothing has registered, or that has no hotkey. */
+function AppHotkeyRow(props) {
+	const styles = useStyles();
+	const id = () => appHotkeySelectionId(props.item.appHotkey.id);
+	const hotkey = () => props.item.appHotkey.hotkey;
+	return (() => {
+		var _el$28 = _tmpl$1(), _el$29 = _el$28.firstChild, _el$30 = _el$29.firstChild, _el$31 = _el$30.nextSibling, _el$32 = _el$29.nextSibling, _el$34 = _el$32.firstChild, _el$35 = _el$34.firstChild;
+		_el$28.$$click = () => props.setSelectedId(id());
+		insert(_el$30, (() => {
+			var _c$3 = memo(() => !!hotkey());
+			return () => _c$3() ? formatForDisplay(hotkey(), { sequenceSeparator: " → " }) : "Unassigned";
+		})());
+		insert(_el$31, () => props.item.appHotkey.meta?.name ?? props.item.appHotkey.id);
+		insert(_el$32, createComponent(Show, {
+			get when() {
+				return props.item.isCustom;
+			},
+			get children() {
+				var _el$33 = _tmpl$0();
+				effect(() => className(_el$33, clsx(styles().badge, styles().badgeCustom)));
+				return _el$33;
+			}
+		}), _el$34);
+		insert(_el$34, () => props.item.status, _el$35);
+		insert(_el$35, () => props.item.status === "unbound" ? "Declared without a hotkey" : "Declared but not registered on this page");
+		effect((_p$) => {
+			var _v$16 = clsx(styles().hotkeyRow, styles().hotkeyRowInactive, props.selectedId() === id() && styles().hotkeyRowSelected), _v$17 = styles().hotkeyLabel, _v$18 = styles().hotkeyLabelKeys, _v$19 = styles().hotkeyLabelName, _v$20 = styles().hotkeyBadges, _v$21 = clsx(styles().badge, styles().badgeDisabled, styles().tooltip), _v$22 = styles().tooltipText;
+			_v$16 !== _p$.e && className(_el$28, _p$.e = _v$16);
+			_v$17 !== _p$.t && className(_el$29, _p$.t = _v$17);
+			_v$18 !== _p$.a && className(_el$30, _p$.a = _v$18);
+			_v$19 !== _p$.o && className(_el$31, _p$.o = _v$19);
+			_v$20 !== _p$.i && className(_el$32, _p$.i = _v$20);
+			_v$21 !== _p$.n && className(_el$34, _p$.n = _v$21);
+			_v$22 !== _p$.s && className(_el$35, _p$.s = _v$22);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0
+		});
+		return _el$28;
+	})();
+}
+/** Selection ids for app hotkeys, kept distinct from registration ids. */
+function appHotkeySelectionId(id) {
+	return `app:${id}`;
+}
 function HotkeyList(props) {
 	const styles = useStyles();
 	const state = useHotkeysDevtoolsState();
 	const [searchQuery, setSearchQuery] = createSignal("");
-	const registrations = createMemo(() => state.registrations());
-	const sequenceRegistrations = createMemo(() => state.sequenceRegistrations());
+	const appHotkeyById = createMemo(() => new Map(state.appHotkeys().map((item) => [item.appHotkey.id, item])));
 	const filteredRegistrations = createMemo(() => {
 		const query = searchQuery().trim();
-		if (!query) return registrations();
-		return matchSorter(registrations(), query, { keys: [
+		if (!query) return state.registrations();
+		return matchSorter(state.registrations(), query, { keys: [
 			(r) => formatRegistration(r),
-			"hotkey",
+			(r) => typeof r.hotkey === "string" ? r.hotkey : r.hotkey.join(" "),
 			"options.meta.name",
 			"options.meta.description",
 			"options.meta.group"
 		] });
 	});
-	const filteredSequenceRegistrations = createMemo(() => {
+	const filteredAppHotkeys = createMemo(() => {
+		const unregistered = state.appHotkeys().filter((item) => item.registrations.length === 0);
 		const query = searchQuery().trim();
-		if (!query) return sequenceRegistrations();
-		return matchSorter(sequenceRegistrations(), query, { keys: [
-			(r) => formatRegistration(r),
-			(r) => r.sequence.join(" "),
-			"options.meta.name",
-			"options.meta.description",
-			"options.meta.group"
+		if (!query) return unregistered;
+		return matchSorter(unregistered, query, { keys: [
+			"appHotkey.id",
+			"appHotkey.meta.name",
+			"appHotkey.meta.description",
+			"appHotkey.meta.group"
 		] });
 	});
 	return [
 		(() => {
-			var _el$24 = _tmpl$9(), _el$25 = _el$24.firstChild;
-			_el$25.$$input = (e) => setSearchQuery(e.currentTarget.value);
-			insert(_el$24, createComponent(Show, {
+			var _el$36 = _tmpl$11(), _el$37 = _el$36.firstChild;
+			_el$37.$$input = (e) => setSearchQuery(e.currentTarget.value);
+			insert(_el$36, createComponent(Show, {
 				get when() {
 					return searchQuery();
 				},
 				get children() {
-					var _el$26 = _tmpl$8();
-					_el$26.$$click = () => setSearchQuery("");
-					effect(() => className(_el$26, styles().searchClear));
-					return _el$26;
+					var _el$38 = _tmpl$10();
+					_el$38.$$click = () => setSearchQuery("");
+					effect(() => className(_el$38, styles().searchClear));
+					return _el$38;
 				}
 			}), null);
 			effect((_p$) => {
-				var _v$14 = styles().searchContainer, _v$15 = styles().searchInput;
-				_v$14 !== _p$.e && className(_el$24, _p$.e = _v$14);
-				_v$15 !== _p$.t && className(_el$25, _p$.t = _v$15);
+				var _v$23 = styles().searchContainer, _v$24 = styles().searchInput;
+				_v$23 !== _p$.e && className(_el$36, _p$.e = _v$23);
+				_v$24 !== _p$.t && className(_el$37, _p$.t = _v$24);
 				return _p$;
 			}, {
 				e: void 0,
 				t: void 0
 			});
-			effect(() => _el$25.value = searchQuery());
-			return _el$24;
+			effect(() => _el$37.value = searchQuery());
+			return _el$36;
 		})(),
 		(() => {
-			var _el$27 = _tmpl$0(), _el$30 = _el$27.firstChild.nextSibling;
-			_el$30.nextSibling;
-			insert(_el$27, () => filteredRegistrations().length, _el$30);
-			effect(() => className(_el$27, styles().panelHeader));
-			return _el$27;
+			var _el$39 = _tmpl$12(), _el$42 = _el$39.firstChild.nextSibling;
+			_el$42.nextSibling;
+			insert(_el$39, () => filteredRegistrations().length, _el$42);
+			effect(() => className(_el$39, styles().panelHeader));
+			return _el$39;
 		})(),
 		(() => {
-			var _el$31 = _tmpl$1();
-			insert(_el$31, createComponent(For, {
+			var _el$43 = _tmpl$13();
+			insert(_el$43, createComponent(For, {
 				get each() {
 					return filteredRegistrations();
 				},
-				children: (reg) => {
-					const conflicts = useRegistrationConflicts(() => reg);
-					const targetConflicts = () => conflicts().overlapping;
-					const scopeConflicts = () => conflicts().separate;
-					const hasTargetConflict = () => targetConflicts().length > 0;
-					const hasScopeConflict = () => scopeConflicts().length > 0;
-					const targetConflictBadge = () => ({
-						style: "badgeConflict",
-						label: "!",
-						tooltip: `Potential overlap: ${targetConflicts().length} other bindings on overlapping targets`
-					});
-					const scopeConflictTooltip = () => `Info: ${scopeConflicts().length} related bindings on separate targets`;
-					const enabled = () => reg.options.enabled !== false;
-					const triggerCount = () => registrations().find((r) => r.id === reg.id)?.triggerCount ?? reg.triggerCount;
-					const [prevCount, setPrevCount] = createSignal(reg.triggerCount);
-					const [pulsing, setPulsing] = createSignal(false);
-					createEffect(on(triggerCount, (current) => {
-						if (current > prevCount()) {
-							setPulsing(true);
-							setTimeout(() => setPulsing(false), 600);
-						}
-						setPrevCount(current);
-					}));
-					const metaName = () => reg.options.meta?.name;
-					const rowTooltip = () => buildRowTooltip(reg.options.meta);
-					return (() => {
-						var _el$37 = _tmpl$4(), _el$39 = _el$37.firstChild, _el$40 = _el$39.firstChild, _el$44 = _el$39.nextSibling, _el$45 = _el$44.firstChild, _el$46 = _el$45.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$46.nextSibling, _el$49 = _el$48.firstChild, _el$52 = _el$49.firstChild.nextSibling;
-						_el$52.nextSibling;
-						var _el$53 = _el$48.nextSibling, _el$54 = _el$53.firstChild;
-						_el$37.$$click = () => props.setSelectedId(reg.id);
-						insert(_el$37, createComponent(Show, {
-							get when() {
-								return rowTooltip();
-							},
-							get children() {
-								var _el$38 = _tmpl$();
-								insert(_el$38, rowTooltip);
-								effect(() => className(_el$38, styles().rowTooltipText));
-								return _el$38;
-							}
-						}), _el$39);
-						insert(_el$40, () => formatRegistration(reg));
-						insert(_el$39, createComponent(Show, {
-							get when() {
-								return metaName();
-							},
-							get children() {
-								var _el$41 = _tmpl$2();
-								insert(_el$41, metaName);
-								effect(() => className(_el$41, styles().hotkeyLabelName));
-								return _el$41;
-							}
-						}), null);
-						insert(_el$37, createComponent(Show, {
-							get when() {
-								return triggerCount() > 0;
-							},
-							get children() {
-								var _el$42 = _tmpl$3();
-								_el$42.firstChild;
-								insert(_el$42, triggerCount, null);
-								effect(() => className(_el$42, styles().triggerCount));
-								return _el$42;
-							}
-						}), _el$44);
-						insert(_el$45, () => getBindingKind(reg));
-						insert(_el$44, (() => {
-							var _c$3 = memo(() => !!hasTargetConflict());
-							return () => _c$3() && (() => {
-								var _el$55 = _tmpl$6(), _el$56 = _el$55.firstChild;
-								insert(_el$55, () => targetConflictBadge().label, _el$56);
-								insert(_el$56, () => targetConflictBadge().tooltip);
-								effect((_p$) => {
-									var _v$27 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$28 = styles().tooltipText;
-									_v$27 !== _p$.e && className(_el$55, _p$.e = _v$27);
-									_v$28 !== _p$.t && className(_el$56, _p$.t = _v$28);
-									return _p$;
-								}, {
-									e: void 0,
-									t: void 0
-								});
-								return _el$55;
-							})();
-						})(), _el$46);
-						insert(_el$44, (() => {
-							var _c$4 = memo(() => !!hasScopeConflict());
-							return () => _c$4() && (() => {
-								var _el$57 = _tmpl$7(), _el$59 = _el$57.firstChild.nextSibling;
-								insert(_el$59, scopeConflictTooltip);
-								effect((_p$) => {
-									var _v$29 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$30 = styles().tooltipText;
-									_v$29 !== _p$.e && className(_el$57, _p$.e = _v$29);
-									_v$30 !== _p$.t && className(_el$59, _p$.t = _v$30);
-									return _p$;
-								}, {
-									e: void 0,
-									t: void 0
-								});
-								return _el$57;
-							})();
-						})(), _el$46);
-						insert(_el$46, () => enabled() ? "on" : "off", _el$47);
-						insert(_el$47, () => enabled() ? "Hotkey is enabled" : "Hotkey is disabled");
-						insert(_el$48, () => reg.options.eventType ?? "keydown", _el$49);
-						insert(_el$49, () => reg.options.eventType ?? "keydown", _el$52);
-						insert(_el$53, () => getTargetLabel(reg.target), _el$54);
-						insert(_el$54, () => getTargetTooltip(reg.target));
-						effect((_p$) => {
-							var _v$16 = clsx(styles().hotkeyRow, props.selectedId() === reg.id && styles().hotkeyRowSelected, pulsing() && styles().hotkeyRowTriggered, rowTooltip() && styles().tooltip), _v$17 = styles().hotkeyLabel, _v$18 = styles().hotkeyLabelKeys, _v$19 = styles().hotkeyBadges, _v$20 = clsx(styles().badge, styles().badgeTarget), _v$21 = clsx(styles().badge, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$22 = styles().tooltipText, _v$23 = clsx(styles().badge, (reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$24 = styles().tooltipText, _v$25 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$26 = styles().tooltipText;
-							_v$16 !== _p$.e && className(_el$37, _p$.e = _v$16);
-							_v$17 !== _p$.t && className(_el$39, _p$.t = _v$17);
-							_v$18 !== _p$.a && className(_el$40, _p$.a = _v$18);
-							_v$19 !== _p$.o && className(_el$44, _p$.o = _v$19);
-							_v$20 !== _p$.i && className(_el$45, _p$.i = _v$20);
-							_v$21 !== _p$.n && className(_el$46, _p$.n = _v$21);
-							_v$22 !== _p$.s && className(_el$47, _p$.s = _v$22);
-							_v$23 !== _p$.h && className(_el$48, _p$.h = _v$23);
-							_v$24 !== _p$.r && className(_el$49, _p$.r = _v$24);
-							_v$25 !== _p$.d && className(_el$53, _p$.d = _v$25);
-							_v$26 !== _p$.l && className(_el$54, _p$.l = _v$26);
-							return _p$;
-						}, {
-							e: void 0,
-							t: void 0,
-							a: void 0,
-							o: void 0,
-							i: void 0,
-							n: void 0,
-							s: void 0,
-							h: void 0,
-							r: void 0,
-							d: void 0,
-							l: void 0
-						});
-						return _el$37;
-					})();
-				}
-			}));
-			effect(() => className(_el$31, styles().hotkeyList));
-			return _el$31;
-		})(),
-		(() => {
-			var _el$32 = _tmpl$10(), _el$35 = _el$32.firstChild.nextSibling;
-			_el$35.nextSibling;
-			insert(_el$32, () => filteredSequenceRegistrations().length, _el$35);
-			effect(() => className(_el$32, styles().panelHeader));
-			return _el$32;
-		})(),
-		(() => {
-			var _el$36 = _tmpl$1();
-			insert(_el$36, createComponent(For, {
-				get each() {
-					return filteredSequenceRegistrations();
-				},
-				children: (reg) => createComponent(SequenceListRow, {
+				children: (reg) => createComponent(RegistrationRow, {
 					reg,
-					getSequences: sequenceRegistrations,
+					appHotkey: () => reg.options.appHotkeyId === void 0 ? void 0 : appHotkeyById().get(reg.options.appHotkeyId),
 					get sequenceProgressNow() {
 						return state.sequenceProgressNow;
 					},
@@ -444,12 +393,44 @@ function HotkeyList(props) {
 					}
 				})
 			}));
-			effect(() => className(_el$36, styles().hotkeyList));
-			return _el$36;
-		})()
+			effect(() => className(_el$43, styles().hotkeyList));
+			return _el$43;
+		})(),
+		createComponent(Show, {
+			get when() {
+				return state.appHotkeys().length > 0;
+			},
+			get children() {
+				return [(() => {
+					var _el$44 = _tmpl$14(), _el$47 = _el$44.firstChild.nextSibling;
+					_el$47.nextSibling;
+					insert(_el$44, () => filteredAppHotkeys().length, _el$47);
+					effect(() => className(_el$44, styles().panelHeader));
+					return _el$44;
+				})(), (() => {
+					var _el$48 = _tmpl$13();
+					insert(_el$48, createComponent(For, {
+						get each() {
+							return filteredAppHotkeys();
+						},
+						children: (item) => createComponent(AppHotkeyRow, {
+							item,
+							get selectedId() {
+								return props.selectedId;
+							},
+							get setSelectedId() {
+								return props.setSelectedId;
+							}
+						})
+					}));
+					effect(() => className(_el$48, styles().hotkeyList));
+					return _el$48;
+				})()];
+			}
+		})
 	];
 }
 delegateEvents(["click", "input"]);
 
 //#endregion
-export { HotkeyList };
+export { HotkeyList, appHotkeySelectionId };

package/dist/components/Shell.js

@@ -1,7 +1,7 @@
 import { useHotkeysDevtoolsState } from "../HotkeysContextProvider.js";
 import { useStyles } from "../styles/use-styles.js";
 import { HeldKeysBar } from "./HeldKeysTopbar.js";
-import { HotkeyList } from "./HotkeyList.js";
+import { HotkeyList, appHotkeySelectionId } from "./HotkeyList.js";
 import { DetailsPanel } from "./DetailsPanel.js";
 import { className, createComponent, delegateEvents, effect, insert, setStyleProperty, style, template, use } from "solid-js/web";
 import { Header, HeaderLogo, MainPanel } from "@tanstack/devtools-ui";
@@ -31,12 +31,19 @@ function Shell() {
 	const [isDragging, setIsDragging] = createSignal(false);
 	const [shellRootEl, setShellRootEl] = createSignal(null);
 	const [slotHeightPx, setSlotHeightPx] = createSignal(void 0);
-	const selectedRegistration = createMemo(() => {
+	const selection = createMemo(() => {
 		const id = selectedId();
 		if (!id) return null;
-		const hotkey = state.registrations().find((r) => r.id === id);
-		if (hotkey) return hotkey;
-		return state.sequenceRegistrations().find((r) => r.id === id) ?? null;
+		const registration = state.registrations().find((r) => r.id === id);
+		if (registration) return {
+			type: "registration",
+			registration
+		};
+		const item = state.appHotkeys().find((i) => appHotkeySelectionId(i.appHotkey.id) === id);
+		return item ? {
+			type: "appHotkey",
+			item
+		} : null;
 	});
 	let dragStartX = 0;
 	let dragStartWidth = 0;
@@ -111,7 +118,7 @@ function Shell() {
 						setSelectedId
 					}));
 					_el$6.$$mousedown = handleMouseDown;
-					insert(_el$7, createComponent(DetailsPanel, { selectedRegistration }), null);
+					insert(_el$7, createComponent(DetailsPanel, { selection }), null);
 					effect((_p$) => {
 						var _v$ = styles().mainContainer, _v$2 = styles().panelsContainer, _v$3 = styles().leftPanel, _v$4 = `${leftPanelWidth()}px`, _v$5 = styles().leftPanelScroll, _v$6 = `${styles().dragHandle} ${isDragging() ? "dragging" : ""}`, _v$7 = styles().rightPanel, _v$8 = styles().panelHeader;
 						_v$ !== _p$.e && className(_el$2, _p$.e = _v$);

package/dist/sequence-progress.js

@@ -12,7 +12,7 @@ function effectiveSequenceMatchedSteps(reg, now) {
 }
 /** Whether the devtools should run a short interval to refresh sequence progress UI. */
 function needsSequenceProgressClock(regs, now) {
-	return regs.some((reg) => effectiveSequenceMatchedSteps(reg, now) > 0);
+	return regs.some((reg) => reg.kind === "sequence" && effectiveSequenceMatchedSteps(reg, now) > 0);
 }
 
 //#endregion

package/dist/styles/use-styles.js

@@ -250,6 +250,11 @@ const stylesFactory = (theme) => {
         background: ${t(colors.gray[300], colors.darkGray[600])};
         border-color: ${t(colors.gray[400], colors.darkGray[500])};
       }
+    `,
+		hotkeyRowInactive: css`
+      opacity: 0.65;
+      border-style: dashed;
+      border-color: ${t(colors.gray[400], colors.darkGray[500])};
     `,
 		hotkeyRowSelected: css`
       background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};
@@ -319,6 +324,10 @@ const stylesFactory = (theme) => {
 		badgeEnabled: css`
       color: ${t(colors.green[700], colors.green[400])};
       background: ${t(colors.green[100], colors.green[900] + alpha[30])};
+    `,
+		badgeCustom: css`
+      color: ${t(colors.blue[700], colors.blue[400])};
+      background: ${t(colors.blue[100], colors.blue[900] + alpha[30])};
     `,
 		badgeDisabled: css`
       color: ${t(colors.red[700], colors.red[400])};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/hotkeys-devtools",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Devtools for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@tanstack/hotkeys": "0.11.0"
+    "@tanstack/hotkeys": "0.12.0"
   },
   "dependencies": {
     "@tanstack/devtools-ui": "^0.7.1",