@tanstack/hotkeys-devtools 0.9.0 → 1.1.0

package/dist/components/HeldKeysTopbar.js

@@ -5,7 +5,10 @@ import { For, Show } from "solid-js";
 import { detectPlatform, formatForDisplay } from "@tanstack/hotkeys";
 
 //#region src/components/HeldKeysTopbar.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div><span>Held</span><div>`), _tmpl$2 = /* @__PURE__ */ template(`<span>--`), _tmpl$3 = /* @__PURE__ */ template(`<span>`), _tmpl$4 = /* @__PURE__ */ template(`<span><span>`);
+var _tmpl$ = /*#__PURE__*/ template(`<div><span>Held</span><div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span>--`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span><span>`);
 function HeldKeysBar() {
 	const styles = useStyles();
 	const state = useHotkeysDevtoolsState();
@@ -74,5 +77,4 @@ function HeldKeysBar() {
 }
 
 //#endregion
-export { HeldKeysBar };
-//# sourceMappingURL=HeldKeysTopbar.js.map
+export { HeldKeysBar };

package/dist/components/HotkeyList.js

@@ -1,6 +1,7 @@
 import { effectiveSequenceMatchedSteps } from "../sequence-progress.js";
 import { useHotkeysDevtoolsState } from "../HotkeysContextProvider.js";
 import { useStyles } from "../styles/use-styles.js";
+import { formatRegistration, getBindingKind, useRegistrationConflicts } from "../_registrations.js";
 import { className, createComponent, delegateEvents, effect, insert, memo, template } from "solid-js/web";
 import { For, Show, createEffect, createMemo, createSignal, on } from "solid-js";
 import { formatForDisplay } from "@tanstack/hotkeys";
@@ -8,10 +9,18 @@ import clsx from "clsx";
 import { matchSorter } from "match-sorter";
 
 //#region src/components/HotkeyList.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<span data-tooltip>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`), _tmpl$3 = /* @__PURE__ */ template(`<span>x`), _tmpl$4 = /* @__PURE__ */ template(`<div><span><span></span></span><div><span><span data-tooltip></span></span><span><span data-tooltip>Fires on <!> event</span></span><span><span data-tooltip>`), _tmpl$5 = /* @__PURE__ */ template(`<span><span>`), _tmpl$6 = /* @__PURE__ */ template(`<span><span data-tooltip>`), _tmpl$7 = /* @__PURE__ */ template(`<span>i<span data-tooltip>`), _tmpl$8 = /* @__PURE__ */ template(`<button>&times;`), _tmpl$9 = /* @__PURE__ */ template(`<div><input type=text placeholder="Search hotkeys...">`), _tmpl$0 = /* @__PURE__ */ template(`<div>Hotkeys (<!>)`), _tmpl$1 = /* @__PURE__ */ template(`<div>`), _tmpl$10 = /* @__PURE__ */ template(`<div>Sequences (<!>)`);
-function sequenceKey(sequence) {
-	return sequence.join("|");
-}
+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 (<!>)`);
 function getTargetLabel(target) {
 	if (typeof document !== "undefined" && target === document) return "document";
 	if (typeof window !== "undefined" && target === window) return "window";
@@ -34,21 +43,10 @@ function getTargetTooltip(target) {
 	}
 	return "Listening on element";
 }
-function findTargetConflicts(registration, all) {
-	return all.filter((other) => other.id !== registration.id && other.hotkey === registration.hotkey && other.options.eventType === registration.options.eventType && other.target === registration.target);
-}
-function findScopeConflicts(registration, all) {
-	return all.filter((other) => other.id !== registration.id && other.hotkey === registration.hotkey && other.options.eventType === registration.options.eventType && other.target !== registration.target);
-}
-function findSequenceTargetConflicts(registration, all) {
-	return all.filter((other) => other.id !== registration.id && sequenceKey(other.sequence) === sequenceKey(registration.sequence) && other.options.eventType === registration.options.eventType && other.target === registration.target);
-}
-function findSequenceScopeConflicts(registration, all) {
-	return all.filter((other) => other.id !== registration.id && sequenceKey(other.sequence) === sequenceKey(registration.sequence) && other.options.eventType === registration.options.eventType && other.target !== registration.target);
-}
 function buildRowTooltip(meta) {
 	if (!meta) return void 0;
 	const parts = [];
+	if (meta.group) parts.push(meta.group);
 	if (meta.name) parts.push(meta.name);
 	if (meta.description) parts.push(meta.description);
 	return parts.length > 0 ? parts.join(" — ") : void 0;
@@ -56,34 +54,17 @@ function buildRowTooltip(meta) {
 function SequenceListRow(props) {
 	const styles = useStyles();
 	const sequenceRegistrations = () => props.getSequences();
-	const targetConflicts = () => findSequenceTargetConflicts(props.reg, sequenceRegistrations());
-	const scopeConflicts = () => findSequenceScopeConflicts(props.reg, sequenceRegistrations());
+	const conflicts = useRegistrationConflicts(() => props.reg);
+	const targetConflicts = () => conflicts().overlapping;
+	const scopeConflicts = () => conflicts().separate;
 	const hasTargetConflict = () => targetConflicts().length > 0;
 	const hasScopeConflict = () => scopeConflicts().length > 0;
-	const conflictBehavior = () => props.reg.options.conflictBehavior ?? "warn";
-	const targetConflictBadge = () => {
-		const behavior = conflictBehavior();
-		const c = targetConflicts();
-		if (behavior === "allow") return {
-			style: "badgeAllow",
-			label: "~",
-			tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? "s" : ""} on same sequence and target (conflictBehavior: allow)`
-		};
-		if (behavior === "error") return {
-			style: "badgeError",
-			label: "!",
-			tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? "s" : ""} on same sequence and target (conflictBehavior: error)`
-		};
-		return {
-			style: "badgeConflict",
-			label: "!",
-			tooltip: `Warning: ${c.length} other binding${c.length > 1 ? "s" : ""} on same sequence and target`
-		};
-	};
-	const scopeConflictTooltip = () => {
-		const c = scopeConflicts();
-		return `Info: ${c.length} binding${c.length > 1 ? "s" : ""} with same sequence on different target${c.length > 1 ? "s" : ""}`;
-	};
+	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 = () => 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;
@@ -100,9 +81,9 @@ 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.firstChild, _el$1 = _el$9.nextSibling, _el$10 = _el$1.firstChild, _el$13 = _el$10.firstChild.nextSibling;
-		_el$13.nextSibling;
-		var _el$14 = _el$1.nextSibling, _el$15 = _el$14.firstChild;
+		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, {
 			get when() {
@@ -120,16 +101,16 @@ function SequenceListRow(props) {
 				return liveSequenceReg().sequence;
 			},
 			children: (step, i) => (() => {
-				var _el$16 = _tmpl$5(), _el$17 = _el$16.firstChild;
-				insert(_el$16, createComponent(Show, {
+				var _el$17 = _tmpl$5(), _el$18 = _el$17.firstChild;
+				insert(_el$17, createComponent(Show, {
 					get when() {
 						return i() > 0;
 					},
 					children: " "
-				}), _el$17);
-				insert(_el$17, () => formatForDisplay(step));
-				effect(() => className(_el$17, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
-				return _el$16;
+				}), _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;
 			})()
 		}));
 		insert(_el$3, createComponent(Show, {
@@ -155,49 +136,50 @@ function SequenceListRow(props) {
 				return _el$6;
 			}
 		}), _el$8);
+		insert(_el$9, () => getBindingKind(props.reg));
 		insert(_el$8, (() => {
 			var _c$ = memo(() => !!hasTargetConflict());
 			return () => _c$() && (() => {
-				var _el$18 = _tmpl$6(), _el$19 = _el$18.firstChild;
-				insert(_el$18, () => targetConflictBadge().label, _el$19);
-				insert(_el$19, () => targetConflictBadge().tooltip);
+				var _el$19 = _tmpl$6(), _el$20 = _el$19.firstChild;
+				insert(_el$19, () => targetConflictBadge().label, _el$20);
+				insert(_el$20, () => targetConflictBadge().tooltip);
 				effect((_p$) => {
-					var _v$1 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$10 = styles().tooltipText;
-					_v$1 !== _p$.e && className(_el$18, _p$.e = _v$1);
-					_v$10 !== _p$.t && className(_el$19, _p$.t = _v$10);
+					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);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0
 				});
-				return _el$18;
+				return _el$19;
 			})();
-		})(), _el$9);
+		})(), _el$0);
 		insert(_el$8, (() => {
 			var _c$2 = memo(() => !!hasScopeConflict());
 			return () => _c$2() && (() => {
-				var _el$20 = _tmpl$7(), _el$22 = _el$20.firstChild.nextSibling;
-				insert(_el$22, scopeConflictTooltip);
+				var _el$21 = _tmpl$7(), _el$23 = _el$21.firstChild.nextSibling;
+				insert(_el$23, scopeConflictTooltip);
 				effect((_p$) => {
-					var _v$11 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$12 = styles().tooltipText;
-					_v$11 !== _p$.e && className(_el$20, _p$.e = _v$11);
-					_v$12 !== _p$.t && className(_el$22, _p$.t = _v$12);
+					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);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0
 				});
-				return _el$20;
+				return _el$21;
 			})();
-		})(), _el$9);
-		insert(_el$9, () => enabled() ? "on" : "off", _el$0);
-		insert(_el$0, () => enabled() ? "Sequence is enabled" : "Sequence is disabled");
-		insert(_el$1, () => props.reg.options.eventType ?? "keydown", _el$10);
-		insert(_el$10, () => props.reg.options.eventType ?? "keydown", _el$13);
-		insert(_el$14, () => getTargetLabel(props.reg.target), _el$15);
-		insert(_el$15, () => getTargetTooltip(props.reg.target));
+		})(), _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));
 		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, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$6 = styles().tooltipText, _v$7 = clsx(styles().badge, (props.reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$8 = styles().tooltipText, _v$9 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$0 = styles().tooltipText;
+			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);
@@ -206,8 +188,9 @@ function SequenceListRow(props) {
 			_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$14, _p$.r = _v$9);
+			_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);
 			return _p$;
 		}, {
 			e: void 0,
@@ -219,7 +202,8 @@ function SequenceListRow(props) {
 			s: void 0,
 			h: void 0,
 			r: void 0,
-			d: void 0
+			d: void 0,
+			l: void 0
 		});
 		return _el$;
 	})();
@@ -234,91 +218,76 @@ function HotkeyList(props) {
 		const query = searchQuery().trim();
 		if (!query) return registrations();
 		return matchSorter(registrations(), query, { keys: [
-			(r) => formatForDisplay(r.hotkey),
+			(r) => formatRegistration(r),
 			"hotkey",
 			"options.meta.name",
-			"options.meta.description"
+			"options.meta.description",
+			"options.meta.group"
 		] });
 	});
 	const filteredSequenceRegistrations = createMemo(() => {
 		const query = searchQuery().trim();
 		if (!query) return sequenceRegistrations();
 		return matchSorter(sequenceRegistrations(), query, { keys: [
-			(r) => r.sequence.map((s) => formatForDisplay(s)).join(" "),
+			(r) => formatRegistration(r),
 			(r) => r.sequence.join(" "),
 			"options.meta.name",
-			"options.meta.description"
+			"options.meta.description",
+			"options.meta.group"
 		] });
 	});
 	return [
 		(() => {
-			var _el$23 = _tmpl$9(), _el$24 = _el$23.firstChild;
-			_el$24.$$input = (e) => setSearchQuery(e.currentTarget.value);
-			insert(_el$23, createComponent(Show, {
+			var _el$24 = _tmpl$9(), _el$25 = _el$24.firstChild;
+			_el$25.$$input = (e) => setSearchQuery(e.currentTarget.value);
+			insert(_el$24, createComponent(Show, {
 				get when() {
 					return searchQuery();
 				},
 				get children() {
-					var _el$25 = _tmpl$8();
-					_el$25.$$click = () => setSearchQuery("");
-					effect(() => className(_el$25, styles().searchClear));
-					return _el$25;
+					var _el$26 = _tmpl$8();
+					_el$26.$$click = () => setSearchQuery("");
+					effect(() => className(_el$26, styles().searchClear));
+					return _el$26;
 				}
 			}), null);
 			effect((_p$) => {
-				var _v$13 = styles().searchContainer, _v$14 = styles().searchInput;
-				_v$13 !== _p$.e && className(_el$23, _p$.e = _v$13);
-				_v$14 !== _p$.t && className(_el$24, _p$.t = _v$14);
+				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);
 				return _p$;
 			}, {
 				e: void 0,
 				t: void 0
 			});
-			effect(() => _el$24.value = searchQuery());
-			return _el$23;
+			effect(() => _el$25.value = searchQuery());
+			return _el$24;
 		})(),
 		(() => {
-			var _el$26 = _tmpl$0(), _el$29 = _el$26.firstChild.nextSibling;
-			_el$29.nextSibling;
-			insert(_el$26, () => filteredRegistrations().length, _el$29);
-			effect(() => className(_el$26, styles().panelHeader));
-			return _el$26;
+			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$30 = _tmpl$1();
-			insert(_el$30, createComponent(For, {
+			var _el$31 = _tmpl$1();
+			insert(_el$31, createComponent(For, {
 				get each() {
 					return filteredRegistrations();
 				},
 				children: (reg) => {
-					const targetConflicts = () => findTargetConflicts(reg, registrations());
-					const scopeConflicts = () => findScopeConflicts(reg, registrations());
+					const conflicts = useRegistrationConflicts(() => reg);
+					const targetConflicts = () => conflicts().overlapping;
+					const scopeConflicts = () => conflicts().separate;
 					const hasTargetConflict = () => targetConflicts().length > 0;
 					const hasScopeConflict = () => scopeConflicts().length > 0;
-					const conflictBehavior = () => reg.options.conflictBehavior ?? "warn";
-					const targetConflictBadge = () => {
-						const behavior = conflictBehavior();
-						const c = targetConflicts();
-						if (behavior === "allow") return {
-							style: "badgeAllow",
-							label: "~",
-							tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? "s" : ""} on same key and target (conflictBehavior: allow)`
-						};
-						if (behavior === "error") return {
-							style: "badgeError",
-							label: "!",
-							tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? "s" : ""} on same key and target (conflictBehavior: error)`
-						};
-						return {
-							style: "badgeConflict",
-							label: "!",
-							tooltip: `Warning: ${c.length} other binding${c.length > 1 ? "s" : ""} on same key and target`
-						};
-					};
-					const scopeConflictTooltip = () => {
-						const c = scopeConflicts();
-						return `Info: ${c.length} binding${c.length > 1 ? "s" : ""} with same key on different target${c.length > 1 ? "s" : ""}`;
-					};
+					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);
@@ -333,98 +302,100 @@ function HotkeyList(props) {
 					const metaName = () => reg.options.meta?.name;
 					const rowTooltip = () => buildRowTooltip(reg.options.meta);
 					return (() => {
-						var _el$36 = _tmpl$4(), _el$38 = _el$36.firstChild, _el$39 = _el$38.firstChild, _el$43 = _el$38.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$44.firstChild, _el$46 = _el$44.nextSibling, _el$47 = _el$46.firstChild, _el$50 = _el$47.firstChild.nextSibling;
-						_el$50.nextSibling;
-						var _el$51 = _el$46.nextSibling, _el$52 = _el$51.firstChild;
-						_el$36.$$click = () => props.setSelectedId(reg.id);
-						insert(_el$36, createComponent(Show, {
+						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$37 = _tmpl$();
-								insert(_el$37, rowTooltip);
-								effect(() => className(_el$37, styles().rowTooltipText));
-								return _el$37;
+								var _el$38 = _tmpl$();
+								insert(_el$38, rowTooltip);
+								effect(() => className(_el$38, styles().rowTooltipText));
+								return _el$38;
 							}
-						}), _el$38);
-						insert(_el$39, () => formatForDisplay(reg.hotkey));
-						insert(_el$38, createComponent(Show, {
+						}), _el$39);
+						insert(_el$40, () => formatRegistration(reg));
+						insert(_el$39, createComponent(Show, {
 							get when() {
 								return metaName();
 							},
 							get children() {
-								var _el$40 = _tmpl$2();
-								insert(_el$40, metaName);
-								effect(() => className(_el$40, styles().hotkeyLabelName));
-								return _el$40;
+								var _el$41 = _tmpl$2();
+								insert(_el$41, metaName);
+								effect(() => className(_el$41, styles().hotkeyLabelName));
+								return _el$41;
 							}
 						}), null);
-						insert(_el$36, createComponent(Show, {
+						insert(_el$37, createComponent(Show, {
 							get when() {
 								return triggerCount() > 0;
 							},
 							get children() {
-								var _el$41 = _tmpl$3();
-								_el$41.firstChild;
-								insert(_el$41, triggerCount, null);
-								effect(() => className(_el$41, styles().triggerCount));
-								return _el$41;
+								var _el$42 = _tmpl$3();
+								_el$42.firstChild;
+								insert(_el$42, triggerCount, null);
+								effect(() => className(_el$42, styles().triggerCount));
+								return _el$42;
 							}
-						}), _el$43);
-						insert(_el$43, (() => {
+						}), _el$44);
+						insert(_el$45, () => getBindingKind(reg));
+						insert(_el$44, (() => {
 							var _c$3 = memo(() => !!hasTargetConflict());
 							return () => _c$3() && (() => {
-								var _el$53 = _tmpl$6(), _el$54 = _el$53.firstChild;
-								insert(_el$53, () => targetConflictBadge().label, _el$54);
-								insert(_el$54, () => targetConflictBadge().tooltip);
+								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$25 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$26 = styles().tooltipText;
-									_v$25 !== _p$.e && className(_el$53, _p$.e = _v$25);
-									_v$26 !== _p$.t && className(_el$54, _p$.t = _v$26);
+									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$53;
+								return _el$55;
 							})();
-						})(), _el$44);
-						insert(_el$43, (() => {
+						})(), _el$46);
+						insert(_el$44, (() => {
 							var _c$4 = memo(() => !!hasScopeConflict());
 							return () => _c$4() && (() => {
-								var _el$55 = _tmpl$7(), _el$57 = _el$55.firstChild.nextSibling;
-								insert(_el$57, scopeConflictTooltip);
+								var _el$57 = _tmpl$7(), _el$59 = _el$57.firstChild.nextSibling;
+								insert(_el$59, scopeConflictTooltip);
 								effect((_p$) => {
-									var _v$27 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$28 = styles().tooltipText;
-									_v$27 !== _p$.e && className(_el$55, _p$.e = _v$27);
-									_v$28 !== _p$.t && className(_el$57, _p$.t = _v$28);
+									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$55;
+								return _el$57;
 							})();
-						})(), _el$44);
-						insert(_el$44, () => enabled() ? "on" : "off", _el$45);
-						insert(_el$45, () => enabled() ? "Hotkey is enabled" : "Hotkey is disabled");
-						insert(_el$46, () => reg.options.eventType ?? "keydown", _el$47);
-						insert(_el$47, () => reg.options.eventType ?? "keydown", _el$50);
-						insert(_el$51, () => getTargetLabel(reg.target), _el$52);
-						insert(_el$52, () => getTargetTooltip(reg.target));
+						})(), _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$15 = clsx(styles().hotkeyRow, props.selectedId() === reg.id && styles().hotkeyRowSelected, pulsing() && styles().hotkeyRowTriggered, rowTooltip() && styles().tooltip), _v$16 = styles().hotkeyLabel, _v$17 = styles().hotkeyLabelKeys, _v$18 = styles().hotkeyBadges, _v$19 = clsx(styles().badge, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$20 = styles().tooltipText, _v$21 = clsx(styles().badge, (reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$22 = styles().tooltipText, _v$23 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$24 = styles().tooltipText;
-							_v$15 !== _p$.e && className(_el$36, _p$.e = _v$15);
-							_v$16 !== _p$.t && className(_el$38, _p$.t = _v$16);
-							_v$17 !== _p$.a && className(_el$39, _p$.a = _v$17);
-							_v$18 !== _p$.o && className(_el$43, _p$.o = _v$18);
-							_v$19 !== _p$.i && className(_el$44, _p$.i = _v$19);
-							_v$20 !== _p$.n && className(_el$45, _p$.n = _v$20);
-							_v$21 !== _p$.s && className(_el$46, _p$.s = _v$21);
-							_v$22 !== _p$.h && className(_el$47, _p$.h = _v$22);
-							_v$23 !== _p$.r && className(_el$51, _p$.r = _v$23);
-							_v$24 !== _p$.d && className(_el$52, _p$.d = _v$24);
+							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,
@@ -436,25 +407,26 @@ function HotkeyList(props) {
 							s: void 0,
 							h: void 0,
 							r: void 0,
-							d: void 0
+							d: void 0,
+							l: void 0
 						});
-						return _el$36;
+						return _el$37;
 					})();
 				}
 			}));
-			effect(() => className(_el$30, styles().hotkeyList));
-			return _el$30;
+			effect(() => className(_el$31, styles().hotkeyList));
+			return _el$31;
 		})(),
 		(() => {
-			var _el$31 = _tmpl$10(), _el$34 = _el$31.firstChild.nextSibling;
-			_el$34.nextSibling;
-			insert(_el$31, () => filteredSequenceRegistrations().length, _el$34);
-			effect(() => className(_el$31, styles().panelHeader));
-			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$35 = _tmpl$1();
-			insert(_el$35, createComponent(For, {
+			var _el$36 = _tmpl$1();
+			insert(_el$36, createComponent(For, {
 				get each() {
 					return filteredSequenceRegistrations();
 				},
@@ -472,13 +444,12 @@ function HotkeyList(props) {
 					}
 				})
 			}));
-			effect(() => className(_el$35, styles().hotkeyList));
-			return _el$35;
+			effect(() => className(_el$36, styles().hotkeyList));
+			return _el$36;
 		})()
 	];
 }
 delegateEvents(["click", "input"]);
 
 //#endregion
-export { HotkeyList };
-//# sourceMappingURL=HotkeyList.js.map
+export { HotkeyList };

package/dist/components/Shell.js

@@ -8,7 +8,8 @@ import { Header, HeaderLogo, MainPanel } from "@tanstack/devtools-ui";
 import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 
 //#region src/components/Shell.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div><div><div style=min-width:150px;max-width:800px><div></div></div><div></div><div style=flex:1><div>Details`), _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$ = /*#__PURE__*/ template(`<div><div><div style=min-width:150px;max-width:800px><div></div></div><div></div><div style=flex:1><div>Details`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
 function readResizeObserverBlockSize(entry) {
 	const [box] = entry.borderBoxSize;
 	if (box !== void 0) return box.blockSize;
@@ -52,7 +53,8 @@ function Shell() {
 		if (!isDragging()) return;
 		e.preventDefault();
 		const deltaX = e.clientX - dragStartX;
-		setLeftPanelWidth(Math.max(150, Math.min(800, dragStartWidth + deltaX)));
+		const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX));
+		setLeftPanelWidth(newWidth);
 	};
 	const handleMouseUp = () => {
 		setIsDragging(false);
@@ -153,5 +155,4 @@ function Shell() {
 delegateEvents(["mousedown"]);
 
 //#endregion
-export { Shell };
-//# sourceMappingURL=Shell.js.map
+export { Shell };

package/dist/components/index.js

@@ -18,5 +18,4 @@ function HotkeysDevtools(props) {
 }
 
 //#endregion
-export { HotkeysDevtools as default };
-//# sourceMappingURL=index.js.map
+export { HotkeysDevtools as default };

package/dist/core.d.ts

@@ -1,8 +1,5 @@
 import { ClassType } from "@tanstack/devtools-utils/solid";
-
 //#region src/core.d.ts
-interface HotkeysDevtoolsInit {}
-declare const HotkeysDevtoolsCore: ClassType;
-//#endregion
-export { HotkeysDevtoolsCore, HotkeysDevtoolsInit };
-//# sourceMappingURL=core.d.ts.map
+export interface HotkeysDevtoolsInit {}
+export declare const HotkeysDevtoolsCore: ClassType;
+//#endregion

package/dist/core.js

@@ -7,5 +7,4 @@ const HotkeysDevtoolsCore = coreClasses[0];
 const HotkeysDevtoolsCoreNoOp = coreClasses[1];
 
 //#endregion
-export { HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp };
-//# sourceMappingURL=core.js.map
+export { HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp };