@tanstack/hotkeys-devtools 1.3.6 → 1.4.1

package/dist/components/HotkeyList.js

@@ -2,6 +2,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 { groupByScope, scopeStatusDescriptions } from "../_scopes.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";
@@ -15,16 +16,17 @@ 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$7 = /*#__PURE__*/ template(`<div><span data-row-label><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$1 = /*#__PURE__*/ template(`<div><span data-row-label><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 (<!>)`);
+var _tmpl$15 = /*#__PURE__*/ template(`<div><div><span><span> scope</span></span><span></span><span><span data-tooltip>`);
 function getTargetLabel(target) {
 	if (typeof document !== "undefined" && target === document) return "document";
 	if (typeof window !== "undefined" && target === window) return "window";
@@ -95,9 +97,9 @@ function RegistrationRow(props) {
 	const targetConflictBadge = () => ({
 		style: "badgeConflict",
 		label: "!",
-		tooltip: `Potential overlap: ${targetConflicts().length} other bindings on overlapping targets`
+		tooltip: `Potential overlap: ${targetConflicts().length} other bindings in the same scope on overlapping targets`
 	});
-	const scopeConflictTooltip = () => `Info: ${scopeConflicts().length} related bindings on separate targets`;
+	const scopeConflictTooltip = () => `Info: ${scopeConflicts().length} related bindings in other scopes or on separate targets`;
 	const enabled = () => props.reg.options.enabled !== false;
 	const liveReg = createMemo(() => state.registrations().find((r) => r.id === props.reg.id) ?? props.reg);
 	const triggerCount = () => liveReg().triggerCount;
@@ -274,6 +276,17 @@ function AppHotkeyRow(props) {
 			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.appHotkey.scope;
+			},
+			children: (scope) => (() => {
+				var _el$36 = _tmpl$3();
+				insert(_el$36, scope);
+				effect(() => className(_el$36, clsx(styles().badge, styles().badgeTarget)));
+				return _el$36;
+			})()
+		}), _el$34);
 		insert(_el$32, createComponent(Show, {
 			get when() {
 				return props.item.isCustom;
@@ -325,9 +338,11 @@ function HotkeyList(props) {
 			(r) => typeof r.hotkey === "string" ? r.hotkey : r.hotkey.join(" "),
 			"options.meta.name",
 			"options.meta.description",
-			"options.meta.group"
+			"options.meta.group",
+			"options.scope"
 		] });
 	});
+	const scopeGroups = createMemo(() => groupByScope(filteredRegistrations(), state.scopes()));
 	const filteredAppHotkeys = createMemo(() => {
 		const unregistered = state.appHotkeys().filter((item) => item.registrations.length === 0);
 		const query = searchQuery().trim();
@@ -336,65 +351,98 @@ function HotkeyList(props) {
 			"appHotkey.id",
 			"appHotkey.meta.name",
 			"appHotkey.meta.description",
-			"appHotkey.meta.group"
+			"appHotkey.meta.group",
+			"appHotkey.scope"
 		] });
 	});
 	return [
 		(() => {
-			var _el$36 = _tmpl$11(), _el$37 = _el$36.firstChild;
-			_el$37.$$input = (e) => setSearchQuery(e.currentTarget.value);
-			insert(_el$36, createComponent(Show, {
+			var _el$37 = _tmpl$11(), _el$38 = _el$37.firstChild;
+			_el$38.$$input = (e) => setSearchQuery(e.currentTarget.value);
+			insert(_el$37, createComponent(Show, {
 				get when() {
 					return searchQuery();
 				},
 				get children() {
-					var _el$38 = _tmpl$10();
-					_el$38.$$click = () => setSearchQuery("");
-					effect(() => className(_el$38, styles().searchClear));
-					return _el$38;
+					var _el$39 = _tmpl$10();
+					_el$39.$$click = () => setSearchQuery("");
+					effect(() => className(_el$39, styles().searchClear));
+					return _el$39;
 				}
 			}), null);
 			effect((_p$) => {
 				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);
+				_v$23 !== _p$.e && className(_el$37, _p$.e = _v$23);
+				_v$24 !== _p$.t && className(_el$38, _p$.t = _v$24);
 				return _p$;
 			}, {
 				e: void 0,
 				t: void 0
 			});
-			effect(() => _el$37.value = searchQuery());
-			return _el$36;
+			effect(() => _el$38.value = searchQuery());
+			return _el$37;
 		})(),
 		(() => {
-			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$40 = _tmpl$12(), _el$43 = _el$40.firstChild.nextSibling;
+			_el$43.nextSibling;
+			insert(_el$40, () => filteredRegistrations().length, _el$43);
+			effect(() => className(_el$40, styles().panelHeader));
+			return _el$40;
 		})(),
 		(() => {
-			var _el$43 = _tmpl$13();
-			insert(_el$43, createComponent(For, {
+			var _el$44 = _tmpl$13();
+			insert(_el$44, createComponent(For, {
 				get each() {
-					return filteredRegistrations();
+					return scopeGroups();
 				},
-				children: (reg) => createComponent(RegistrationRow, {
-					reg,
-					appHotkey: () => reg.options.appHotkeyId === void 0 ? void 0 : appHotkeyById().get(reg.options.appHotkeyId),
-					get sequenceProgressNow() {
-						return state.sequenceProgressNow;
-					},
-					get selectedId() {
-						return props.selectedId;
-					},
-					get setSelectedId() {
-						return props.setSelectedId;
-					}
-				})
+				children: (group) => (() => {
+					var _el$50 = _tmpl$15(), _el$51 = _el$50.firstChild, _el$52 = _el$51.firstChild, _el$53 = _el$52.firstChild, _el$54 = _el$52.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.firstChild;
+					insert(_el$52, () => group.scope, _el$53);
+					insert(_el$54, () => group.registrations.length);
+					insert(_el$55, () => group.status, _el$56);
+					insert(_el$56, () => scopeStatusDescriptions[group.status]);
+					insert(_el$50, createComponent(For, {
+						get each() {
+							return group.registrations;
+						},
+						children: (reg) => createComponent(RegistrationRow, {
+							reg,
+							appHotkey: () => reg.options.appHotkeyId === void 0 ? void 0 : appHotkeyById().get(reg.options.appHotkeyId),
+							get sequenceProgressNow() {
+								return state.sequenceProgressNow;
+							},
+							get selectedId() {
+								return props.selectedId;
+							},
+							get setSelectedId() {
+								return props.setSelectedId;
+							}
+						})
+					}), null);
+					effect((_p$) => {
+						var _v$25 = clsx(styles().scopeGroup, (group.status === "suspended" || group.status === "inactive") && styles().scopeGroupDimmed), _v$26 = styles().scopeHeader, _v$27 = styles().scopeName, _v$28 = styles().scopeNameSuffix, _v$29 = styles().scopeCount, _v$30 = clsx(styles().badge, styles().tooltip, group.status === "exclusive" ? styles().badgeExclusive : group.status === "allowed" ? styles().badgeInfo : group.status === "active" ? styles().badgeEnabled : group.status === "suspended" ? styles().badgeSuspended : styles().badgeDisabled), _v$31 = styles().tooltipText;
+						_v$25 !== _p$.e && className(_el$50, _p$.e = _v$25);
+						_v$26 !== _p$.t && className(_el$51, _p$.t = _v$26);
+						_v$27 !== _p$.a && className(_el$52, _p$.a = _v$27);
+						_v$28 !== _p$.o && className(_el$53, _p$.o = _v$28);
+						_v$29 !== _p$.i && className(_el$54, _p$.i = _v$29);
+						_v$30 !== _p$.n && className(_el$55, _p$.n = _v$30);
+						_v$31 !== _p$.s && className(_el$56, _p$.s = _v$31);
+						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$50;
+				})()
 			}));
-			effect(() => className(_el$43, styles().hotkeyList));
-			return _el$43;
+			effect(() => className(_el$44, styles().hotkeyList));
+			return _el$44;
 		})(),
 		createComponent(Show, {
 			get when() {
@@ -402,14 +450,14 @@ function HotkeyList(props) {
 			},
 			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$45 = _tmpl$14(), _el$48 = _el$45.firstChild.nextSibling;
+					_el$48.nextSibling;
+					insert(_el$45, () => filteredAppHotkeys().length, _el$48);
+					effect(() => className(_el$45, styles().panelHeader));
+					return _el$45;
 				})(), (() => {
-					var _el$48 = _tmpl$13();
-					insert(_el$48, createComponent(For, {
+					var _el$49 = _tmpl$13();
+					insert(_el$49, createComponent(For, {
 						get each() {
 							return filteredAppHotkeys();
 						},
@@ -423,8 +471,8 @@ function HotkeyList(props) {
 							}
 						})
 					}));
-					effect(() => className(_el$48, styles().hotkeyList));
-					return _el$48;
+					effect(() => className(_el$49, styles().hotkeyList));
+					return _el$49;
 				})()];
 			}
 		})

package/dist/components/Shell.js

@@ -27,7 +27,7 @@ function Shell() {
 	const styles = useStyles();
 	const state = useHotkeysDevtoolsState();
 	const [selectedId, setSelectedId] = createSignal(null);
-	const [leftPanelWidth, setLeftPanelWidth] = createSignal(300);
+	const [leftPanelWidth, setLeftPanelWidth] = createSignal(440);
 	const [isDragging, setIsDragging] = createSignal(false);
 	const [shellRootEl, setShellRootEl] = createSignal(null);
 	const [slotHeightPx, setSlotHeightPx] = createSignal(void 0);

package/dist/styles/use-styles.js

@@ -160,6 +160,7 @@ const stylesFactory = (theme) => {
 		leftPanelScroll: css`
       flex: 1;
       min-height: 0;
+      overflow-x: hidden;
       overflow-y: auto;
     `,
 		rightPanel: css`
@@ -237,6 +238,40 @@ const stylesFactory = (theme) => {
     `,
 		hotkeyList: css`
       padding: ${size[1]};
+    `,
+		scopeGroup: css`
+      margin-bottom: ${size[2]};
+    `,
+		scopeGroupDimmed: css`
+      & [data-row-label] {
+        opacity: 0.55;
+      }
+    `,
+		scopeHeader: css`
+      display: flex;
+      align-items: center;
+      gap: ${size[1.5]};
+      padding: ${size[1]} ${size[1]} ${size[1.5]};
+      position: sticky;
+      top: 0;
+      z-index: 3;
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+    `,
+		scopeName: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.sm};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.gray[800], colors.gray[200])};
+    `,
+		scopeNameSuffix: css`
+      font-family: ${fontFamily.sans};
+      font-weight: ${font.weight.normal};
+      color: ${t(colors.gray[500], colors.gray[400])};
+    `,
+		scopeCount: css`
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[500], colors.gray[400])};
+      margin-right: auto;
     `,
 		hotkeyRow: css`
       display: flex;
@@ -249,14 +284,19 @@ const stylesFactory = (theme) => {
       cursor: pointer;
       transition: all 0.2s ease;
       border: 1px solid transparent;
+      position: relative;
 
       &:hover {
         background: ${t(colors.gray[300], colors.darkGray[600])};
         border-color: ${t(colors.gray[400], colors.darkGray[500])};
+        /* Lift the row so its tooltips render above the rows after it. */
+        z-index: 2;
       }
     `,
 		hotkeyRowInactive: css`
-      opacity: 0.65;
+      & > [data-row-label] {
+        opacity: 0.65;
+      }
       border-style: dashed;
       border-color: ${t(colors.gray[400], colors.darkGray[500])};
     `,
@@ -360,6 +400,14 @@ const stylesFactory = (theme) => {
 		badgeAllow: css`
       color: ${t(colors.gray[600], colors.gray[400])};
       background: ${t(colors.gray[200], colors.darkGray[600])};
+    `,
+		badgeExclusive: css`
+      color: ${t(colors.purple[700], colors.purple[400])};
+      background: ${t(colors.purple[100], colors.purple[900] + alpha[30])};
+    `,
+		badgeSuspended: css`
+      color: ${t(colors.yellow[700], colors.yellow[400])};
+      background: ${t(colors.yellow[100], colors.yellow[900] + alpha[30])};
     `,
 		badgeInfo: css`
       color: ${t(colors.blue[700], colors.blue[400])};
@@ -635,15 +683,16 @@ const stylesFactory = (theme) => {
 		tooltip: css`
       position: relative;
       &:hover > [data-tooltip] {
+        display: block;
         opacity: 1;
         visibility: visible;
       }
     `,
 		tooltipText: css`
+      display: none;
       position: absolute;
       top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
+      right: 0;
       padding: ${size[1]} ${size[1.5]};
       background: ${t(colors.gray[800], colors.darkGray[500])};
       color: ${t(colors.white, colors.gray[100])};
@@ -660,6 +709,7 @@ const stylesFactory = (theme) => {
       margin-top: ${size[1]};
     `,
 		rowTooltipText: css`
+      display: none;
       position: absolute;
       bottom: 100%;
       left: ${size[2]};

package/package.json

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