@tanstack/hotkeys-devtools 0.7.4 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/DetailsPanel.js +294 -200
  2. package/dist/components/DetailsPanel.js.map +1 -1
  3. package/dist/components/HotkeyList.js +225 -118
  4. package/dist/components/HotkeyList.js.map +1 -1
  5. package/dist/styles/use-styles.js +88 -1
  6. package/dist/styles/use-styles.js.map +1 -1
  7. package/package.json +3 -2
  8. package/src/components/DetailsPanel.tsx +78 -0
  9. package/src/components/HotkeyList.tsx +108 -20
  10. package/src/styles/use-styles.ts +88 -1
package/dist/components/HotkeyList.js CHANGED
@@ -5,9 +5,10 @@ import { className, createComponent, delegateEvents, effect, insert, memo, templ
5
5
  import { For, Show, createEffect, createMemo, createSignal, on } from "solid-js";
6
6
  import { formatForDisplay } from "@tanstack/hotkeys";
7
7
  import clsx from "clsx";
8
+ import { matchSorter } from "match-sorter";
8
9
 
9
10
  //#region src/components/HotkeyList.tsx
10
- var _tmpl$ = /* @__PURE__ */ template(`<span>x`), _tmpl$2 = /* @__PURE__ */ template(`<div><span></span><div><span><span data-tooltip></span></span><span><span data-tooltip>Fires on <!> event</span></span><span><span data-tooltip>`), _tmpl$3 = /* @__PURE__ */ template(`<span><span>`), _tmpl$4 = /* @__PURE__ */ template(`<span><span data-tooltip>`), _tmpl$5 = /* @__PURE__ */ template(`<span>i<span data-tooltip>`), _tmpl$6 = /* @__PURE__ */ template(`<div>Hotkeys (<!>)`), _tmpl$7 = /* @__PURE__ */ template(`<div>`), _tmpl$8 = /* @__PURE__ */ template(`<div>Sequences (<!>)`);
11
+ 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 (<!>)`);
11
12
  function sequenceKey(sequence) {
12
13
  return sequence.join("|");
13
14
  }
@@ -45,6 +46,13 @@ function findSequenceTargetConflicts(registration, all) {
45
46
  function findSequenceScopeConflicts(registration, all) {
46
47
  return all.filter((other) => other.id !== registration.id && sequenceKey(other.sequence) === sequenceKey(registration.sequence) && other.options.eventType === registration.options.eventType && other.target !== registration.target);
47
48
  }
49
+ function buildRowTooltip(meta) {
50
+ if (!meta) return void 0;
51
+ const parts = [];
52
+ if (meta.name) parts.push(meta.name);
53
+ if (meta.description) parts.push(meta.description);
54
+ return parts.length > 0 ? parts.join(" — ") : void 0;
55
+ }
48
56
  function SequenceListRow(props) {
49
57
  const styles = useStyles();
50
58
  const sequenceRegistrations = () => props.getSequences();
@@ -89,92 +97,117 @@ function SequenceListRow(props) {
89
97
  }
90
98
  setPrevCount(current);
91
99
  }));
100
+ const metaName = () => props.reg.options.meta?.name;
101
+ const rowTooltip = () => buildRowTooltip(props.reg.options.meta);
92
102
  return (() => {
93
- var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild.nextSibling;
94
- _el$10.nextSibling;
95
- var _el$11 = _el$8.nextSibling, _el$12 = _el$11.firstChild;
103
+ 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;
104
+ _el$13.nextSibling;
105
+ var _el$14 = _el$1.nextSibling, _el$15 = _el$14.firstChild;
96
106
  _el$.$$click = () => props.setSelectedId(props.reg.id);
97
- insert(_el$2, createComponent(For, {
107
+ insert(_el$, createComponent(Show, {
108
+ get when() {
109
+ return rowTooltip();
110
+ },
111
+ get children() {
112
+ var _el$2 = _tmpl$();
113
+ insert(_el$2, rowTooltip);
114
+ effect(() => className(_el$2, styles().rowTooltipText));
115
+ return _el$2;
116
+ }
117
+ }), _el$3);
118
+ insert(_el$4, createComponent(For, {
98
119
  get each() {
99
120
  return liveSequenceReg().sequence;
100
121
  },
101
122
  children: (step, i) => (() => {
102
- var _el$13 = _tmpl$3(), _el$14 = _el$13.firstChild;
103
- insert(_el$13, createComponent(Show, {
123
+ var _el$16 = _tmpl$5(), _el$17 = _el$16.firstChild;
124
+ insert(_el$16, createComponent(Show, {
104
125
  get when() {
105
126
  return i() > 0;
106
127
  },
107
128
  children: " "
108
- }), _el$14);
109
- insert(_el$14, () => formatForDisplay(step));
110
- effect(() => className(_el$14, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
111
- return _el$13;
129
+ }), _el$17);
130
+ insert(_el$17, () => formatForDisplay(step));
131
+ effect(() => className(_el$17, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
132
+ return _el$16;
112
133
  })()
113
134
  }));
135
+ insert(_el$3, createComponent(Show, {
136
+ get when() {
137
+ return metaName();
138
+ },
139
+ get children() {
140
+ var _el$5 = _tmpl$2();
141
+ insert(_el$5, metaName);
142
+ effect(() => className(_el$5, styles().hotkeyLabelName));
143
+ return _el$5;
144
+ }
145
+ }), null);
114
146
  insert(_el$, createComponent(Show, {
115
147
  get when() {
116
148
  return triggerCount() > 0;
117
149
  },
118
150
  get children() {
119
- var _el$3 = _tmpl$();
120
- _el$3.firstChild;
121
- insert(_el$3, triggerCount, null);
122
- effect(() => className(_el$3, styles().triggerCount));
123
- return _el$3;
151
+ var _el$6 = _tmpl$3();
152
+ _el$6.firstChild;
153
+ insert(_el$6, triggerCount, null);
154
+ effect(() => className(_el$6, styles().triggerCount));
155
+ return _el$6;
124
156
  }
125
- }), _el$5);
126
- insert(_el$5, (() => {
157
+ }), _el$8);
158
+ insert(_el$8, (() => {
127
159
  var _c$ = memo(() => !!hasTargetConflict());
128
160
  return () => _c$() && (() => {
129
- var _el$15 = _tmpl$4(), _el$16 = _el$15.firstChild;
130
- insert(_el$15, () => targetConflictBadge().label, _el$16);
131
- insert(_el$16, () => targetConflictBadge().tooltip);
161
+ var _el$18 = _tmpl$6(), _el$19 = _el$18.firstChild;
162
+ insert(_el$18, () => targetConflictBadge().label, _el$19);
163
+ insert(_el$19, () => targetConflictBadge().tooltip);
132
164
  effect((_p$) => {
133
- var _v$0 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$1 = styles().tooltipText;
134
- _v$0 !== _p$.e && className(_el$15, _p$.e = _v$0);
135
- _v$1 !== _p$.t && className(_el$16, _p$.t = _v$1);
165
+ var _v$1 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$10 = styles().tooltipText;
166
+ _v$1 !== _p$.e && className(_el$18, _p$.e = _v$1);
167
+ _v$10 !== _p$.t && className(_el$19, _p$.t = _v$10);
136
168
  return _p$;
137
169
  }, {
138
170
  e: void 0,
139
171
  t: void 0
140
172
  });
141
- return _el$15;
173
+ return _el$18;
142
174
  })();
143
- })(), _el$6);
144
- insert(_el$5, (() => {
175
+ })(), _el$9);
176
+ insert(_el$8, (() => {
145
177
  var _c$2 = memo(() => !!hasScopeConflict());
146
178
  return () => _c$2() && (() => {
147
- var _el$17 = _tmpl$5(), _el$19 = _el$17.firstChild.nextSibling;
148
- insert(_el$19, scopeConflictTooltip);
179
+ var _el$20 = _tmpl$7(), _el$22 = _el$20.firstChild.nextSibling;
180
+ insert(_el$22, scopeConflictTooltip);
149
181
  effect((_p$) => {
150
- var _v$10 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$11 = styles().tooltipText;
151
- _v$10 !== _p$.e && className(_el$17, _p$.e = _v$10);
152
- _v$11 !== _p$.t && className(_el$19, _p$.t = _v$11);
182
+ var _v$11 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$12 = styles().tooltipText;
183
+ _v$11 !== _p$.e && className(_el$20, _p$.e = _v$11);
184
+ _v$12 !== _p$.t && className(_el$22, _p$.t = _v$12);
153
185
  return _p$;
154
186
  }, {
155
187
  e: void 0,
156
188
  t: void 0
157
189
  });
158
- return _el$17;
190
+ return _el$20;
159
191
  })();
160
- })(), _el$6);
161
- insert(_el$6, () => enabled() ? "on" : "off", _el$7);
162
- insert(_el$7, () => enabled() ? "Sequence is enabled" : "Sequence is disabled");
163
- insert(_el$8, () => props.reg.options.eventType ?? "keydown", _el$9);
164
- insert(_el$9, () => props.reg.options.eventType ?? "keydown", _el$10);
165
- insert(_el$11, () => getTargetLabel(props.reg.target), _el$12);
166
- insert(_el$12, () => getTargetTooltip(props.reg.target));
192
+ })(), _el$9);
193
+ insert(_el$9, () => enabled() ? "on" : "off", _el$0);
194
+ insert(_el$0, () => enabled() ? "Sequence is enabled" : "Sequence is disabled");
195
+ insert(_el$1, () => props.reg.options.eventType ?? "keydown", _el$10);
196
+ insert(_el$10, () => props.reg.options.eventType ?? "keydown", _el$13);
197
+ insert(_el$14, () => getTargetLabel(props.reg.target), _el$15);
198
+ insert(_el$15, () => getTargetTooltip(props.reg.target));
167
199
  effect((_p$) => {
168
- var _v$ = clsx(styles().hotkeyRow, props.selectedId() === props.reg.id && styles().hotkeyRowSelected, pulsing() && styles().hotkeyRowTriggered), _v$2 = styles().hotkeyLabel, _v$3 = styles().hotkeyBadges, _v$4 = clsx(styles().badge, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$5 = styles().tooltipText, _v$6 = clsx(styles().badge, (props.reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$7 = styles().tooltipText, _v$8 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$9 = styles().tooltipText;
200
+ 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;
169
201
  _v$ !== _p$.e && className(_el$, _p$.e = _v$);
170
- _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
171
- _v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
172
- _v$4 !== _p$.o && className(_el$6, _p$.o = _v$4);
173
- _v$5 !== _p$.i && className(_el$7, _p$.i = _v$5);
174
- _v$6 !== _p$.n && className(_el$8, _p$.n = _v$6);
175
- _v$7 !== _p$.s && className(_el$9, _p$.s = _v$7);
176
- _v$8 !== _p$.h && className(_el$11, _p$.h = _v$8);
177
- _v$9 !== _p$.r && className(_el$12, _p$.r = _v$9);
202
+ _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
203
+ _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
204
+ _v$4 !== _p$.o && className(_el$8, _p$.o = _v$4);
205
+ _v$5 !== _p$.i && className(_el$9, _p$.i = _v$5);
206
+ _v$6 !== _p$.n && className(_el$0, _p$.n = _v$6);
207
+ _v$7 !== _p$.s && className(_el$1, _p$.s = _v$7);
208
+ _v$8 !== _p$.h && className(_el$10, _p$.h = _v$8);
209
+ _v$9 !== _p$.r && className(_el$14, _p$.r = _v$9);
210
+ _v$0 !== _p$.d && className(_el$15, _p$.d = _v$0);
178
211
  return _p$;
179
212
  }, {
180
213
  e: void 0,
@@ -185,7 +218,8 @@ function SequenceListRow(props) {
185
218
  n: void 0,
186
219
  s: void 0,
187
220
  h: void 0,
188
- r: void 0
221
+ r: void 0,
222
+ d: void 0
189
223
  });
190
224
  return _el$;
191
225
  })();
@@ -193,21 +227,68 @@ function SequenceListRow(props) {
193
227
  function HotkeyList(props) {
194
228
  const styles = useStyles();
195
229
  const state = useHotkeysDevtoolsState();
230
+ const [searchQuery, setSearchQuery] = createSignal("");
196
231
  const registrations = createMemo(() => state.registrations());
197
232
  const sequenceRegistrations = createMemo(() => state.sequenceRegistrations());
233
+ const filteredRegistrations = createMemo(() => {
234
+ const query = searchQuery().trim();
235
+ if (!query) return registrations();
236
+ return matchSorter(registrations(), query, { keys: [
237
+ (r) => formatForDisplay(r.hotkey),
238
+ "hotkey",
239
+ "options.meta.name",
240
+ "options.meta.description"
241
+ ] });
242
+ });
243
+ const filteredSequenceRegistrations = createMemo(() => {
244
+ const query = searchQuery().trim();
245
+ if (!query) return sequenceRegistrations();
246
+ return matchSorter(sequenceRegistrations(), query, { keys: [
247
+ (r) => r.sequence.map((s) => formatForDisplay(s)).join(" "),
248
+ (r) => r.sequence.join(" "),
249
+ "options.meta.name",
250
+ "options.meta.description"
251
+ ] });
252
+ });
198
253
  return [
199
254
  (() => {
200
- var _el$20 = _tmpl$6(), _el$23 = _el$20.firstChild.nextSibling;
201
- _el$23.nextSibling;
202
- insert(_el$20, () => registrations().length, _el$23);
203
- effect(() => className(_el$20, styles().panelHeader));
204
- return _el$20;
255
+ var _el$23 = _tmpl$9(), _el$24 = _el$23.firstChild;
256
+ _el$24.$$input = (e) => setSearchQuery(e.currentTarget.value);
257
+ insert(_el$23, createComponent(Show, {
258
+ get when() {
259
+ return searchQuery();
260
+ },
261
+ get children() {
262
+ var _el$25 = _tmpl$8();
263
+ _el$25.$$click = () => setSearchQuery("");
264
+ effect(() => className(_el$25, styles().searchClear));
265
+ return _el$25;
266
+ }
267
+ }), null);
268
+ effect((_p$) => {
269
+ var _v$13 = styles().searchContainer, _v$14 = styles().searchInput;
270
+ _v$13 !== _p$.e && className(_el$23, _p$.e = _v$13);
271
+ _v$14 !== _p$.t && className(_el$24, _p$.t = _v$14);
272
+ return _p$;
273
+ }, {
274
+ e: void 0,
275
+ t: void 0
276
+ });
277
+ effect(() => _el$24.value = searchQuery());
278
+ return _el$23;
279
+ })(),
280
+ (() => {
281
+ var _el$26 = _tmpl$0(), _el$29 = _el$26.firstChild.nextSibling;
282
+ _el$29.nextSibling;
283
+ insert(_el$26, () => filteredRegistrations().length, _el$29);
284
+ effect(() => className(_el$26, styles().panelHeader));
285
+ return _el$26;
205
286
  })(),
206
287
  (() => {
207
- var _el$24 = _tmpl$7();
208
- insert(_el$24, createComponent(For, {
288
+ var _el$30 = _tmpl$1();
289
+ insert(_el$30, createComponent(For, {
209
290
  get each() {
210
- return registrations();
291
+ return filteredRegistrations();
211
292
  },
212
293
  children: (reg) => {
213
294
  const targetConflicts = () => findTargetConflicts(reg, registrations());
@@ -249,76 +330,101 @@ function HotkeyList(props) {
249
330
  }
250
331
  setPrevCount(current);
251
332
  }));
333
+ const metaName = () => reg.options.meta?.name;
334
+ const rowTooltip = () => buildRowTooltip(reg.options.meta);
252
335
  return (() => {
253
- var _el$30 = _tmpl$2(), _el$31 = _el$30.firstChild, _el$34 = _el$31.nextSibling, _el$35 = _el$34.firstChild, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$38 = _el$37.firstChild, _el$41 = _el$38.firstChild.nextSibling;
254
- _el$41.nextSibling;
255
- var _el$42 = _el$37.nextSibling, _el$43 = _el$42.firstChild;
256
- _el$30.$$click = () => props.setSelectedId(reg.id);
257
- insert(_el$31, () => formatForDisplay(reg.hotkey));
258
- insert(_el$30, createComponent(Show, {
336
+ 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;
337
+ _el$50.nextSibling;
338
+ var _el$51 = _el$46.nextSibling, _el$52 = _el$51.firstChild;
339
+ _el$36.$$click = () => props.setSelectedId(reg.id);
340
+ insert(_el$36, createComponent(Show, {
341
+ get when() {
342
+ return rowTooltip();
343
+ },
344
+ get children() {
345
+ var _el$37 = _tmpl$();
346
+ insert(_el$37, rowTooltip);
347
+ effect(() => className(_el$37, styles().rowTooltipText));
348
+ return _el$37;
349
+ }
350
+ }), _el$38);
351
+ insert(_el$39, () => formatForDisplay(reg.hotkey));
352
+ insert(_el$38, createComponent(Show, {
353
+ get when() {
354
+ return metaName();
355
+ },
356
+ get children() {
357
+ var _el$40 = _tmpl$2();
358
+ insert(_el$40, metaName);
359
+ effect(() => className(_el$40, styles().hotkeyLabelName));
360
+ return _el$40;
361
+ }
362
+ }), null);
363
+ insert(_el$36, createComponent(Show, {
259
364
  get when() {
260
365
  return triggerCount() > 0;
261
366
  },
262
367
  get children() {
263
- var _el$32 = _tmpl$();
264
- _el$32.firstChild;
265
- insert(_el$32, triggerCount, null);
266
- effect(() => className(_el$32, styles().triggerCount));
267
- return _el$32;
368
+ var _el$41 = _tmpl$3();
369
+ _el$41.firstChild;
370
+ insert(_el$41, triggerCount, null);
371
+ effect(() => className(_el$41, styles().triggerCount));
372
+ return _el$41;
268
373
  }
269
- }), _el$34);
270
- insert(_el$34, (() => {
374
+ }), _el$43);
375
+ insert(_el$43, (() => {
271
376
  var _c$3 = memo(() => !!hasTargetConflict());
272
377
  return () => _c$3() && (() => {
273
- var _el$44 = _tmpl$4(), _el$45 = _el$44.firstChild;
274
- insert(_el$44, () => targetConflictBadge().label, _el$45);
275
- insert(_el$45, () => targetConflictBadge().tooltip);
378
+ var _el$53 = _tmpl$6(), _el$54 = _el$53.firstChild;
379
+ insert(_el$53, () => targetConflictBadge().label, _el$54);
380
+ insert(_el$54, () => targetConflictBadge().tooltip);
276
381
  effect((_p$) => {
277
- var _v$21 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$22 = styles().tooltipText;
278
- _v$21 !== _p$.e && className(_el$44, _p$.e = _v$21);
279
- _v$22 !== _p$.t && className(_el$45, _p$.t = _v$22);
382
+ var _v$25 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$26 = styles().tooltipText;
383
+ _v$25 !== _p$.e && className(_el$53, _p$.e = _v$25);
384
+ _v$26 !== _p$.t && className(_el$54, _p$.t = _v$26);
280
385
  return _p$;
281
386
  }, {
282
387
  e: void 0,
283
388
  t: void 0
284
389
  });
285
- return _el$44;
390
+ return _el$53;
286
391
  })();
287
- })(), _el$35);
288
- insert(_el$34, (() => {
392
+ })(), _el$44);
393
+ insert(_el$43, (() => {
289
394
  var _c$4 = memo(() => !!hasScopeConflict());
290
395
  return () => _c$4() && (() => {
291
- var _el$46 = _tmpl$5(), _el$48 = _el$46.firstChild.nextSibling;
292
- insert(_el$48, scopeConflictTooltip);
396
+ var _el$55 = _tmpl$7(), _el$57 = _el$55.firstChild.nextSibling;
397
+ insert(_el$57, scopeConflictTooltip);
293
398
  effect((_p$) => {
294
- var _v$23 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$24 = styles().tooltipText;
295
- _v$23 !== _p$.e && className(_el$46, _p$.e = _v$23);
296
- _v$24 !== _p$.t && className(_el$48, _p$.t = _v$24);
399
+ var _v$27 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$28 = styles().tooltipText;
400
+ _v$27 !== _p$.e && className(_el$55, _p$.e = _v$27);
401
+ _v$28 !== _p$.t && className(_el$57, _p$.t = _v$28);
297
402
  return _p$;
298
403
  }, {
299
404
  e: void 0,
300
405
  t: void 0
301
406
  });
302
- return _el$46;
407
+ return _el$55;
303
408
  })();
304
- })(), _el$35);
305
- insert(_el$35, () => enabled() ? "on" : "off", _el$36);
306
- insert(_el$36, () => enabled() ? "Hotkey is enabled" : "Hotkey is disabled");
307
- insert(_el$37, () => reg.options.eventType ?? "keydown", _el$38);
308
- insert(_el$38, () => reg.options.eventType ?? "keydown", _el$41);
309
- insert(_el$42, () => getTargetLabel(reg.target), _el$43);
310
- insert(_el$43, () => getTargetTooltip(reg.target));
409
+ })(), _el$44);
410
+ insert(_el$44, () => enabled() ? "on" : "off", _el$45);
411
+ insert(_el$45, () => enabled() ? "Hotkey is enabled" : "Hotkey is disabled");
412
+ insert(_el$46, () => reg.options.eventType ?? "keydown", _el$47);
413
+ insert(_el$47, () => reg.options.eventType ?? "keydown", _el$50);
414
+ insert(_el$51, () => getTargetLabel(reg.target), _el$52);
415
+ insert(_el$52, () => getTargetTooltip(reg.target));
311
416
  effect((_p$) => {
312
- var _v$12 = clsx(styles().hotkeyRow, props.selectedId() === reg.id && styles().hotkeyRowSelected, pulsing() && styles().hotkeyRowTriggered), _v$13 = styles().hotkeyLabel, _v$14 = styles().hotkeyBadges, _v$15 = clsx(styles().badge, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$16 = styles().tooltipText, _v$17 = clsx(styles().badge, (reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$18 = styles().tooltipText, _v$19 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$20 = styles().tooltipText;
313
- _v$12 !== _p$.e && className(_el$30, _p$.e = _v$12);
314
- _v$13 !== _p$.t && className(_el$31, _p$.t = _v$13);
315
- _v$14 !== _p$.a && className(_el$34, _p$.a = _v$14);
316
- _v$15 !== _p$.o && className(_el$35, _p$.o = _v$15);
317
- _v$16 !== _p$.i && className(_el$36, _p$.i = _v$16);
318
- _v$17 !== _p$.n && className(_el$37, _p$.n = _v$17);
319
- _v$18 !== _p$.s && className(_el$38, _p$.s = _v$18);
320
- _v$19 !== _p$.h && className(_el$42, _p$.h = _v$19);
321
- _v$20 !== _p$.r && className(_el$43, _p$.r = _v$20);
417
+ 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;
418
+ _v$15 !== _p$.e && className(_el$36, _p$.e = _v$15);
419
+ _v$16 !== _p$.t && className(_el$38, _p$.t = _v$16);
420
+ _v$17 !== _p$.a && className(_el$39, _p$.a = _v$17);
421
+ _v$18 !== _p$.o && className(_el$43, _p$.o = _v$18);
422
+ _v$19 !== _p$.i && className(_el$44, _p$.i = _v$19);
423
+ _v$20 !== _p$.n && className(_el$45, _p$.n = _v$20);
424
+ _v$21 !== _p$.s && className(_el$46, _p$.s = _v$21);
425
+ _v$22 !== _p$.h && className(_el$47, _p$.h = _v$22);
426
+ _v$23 !== _p$.r && className(_el$51, _p$.r = _v$23);
427
+ _v$24 !== _p$.d && className(_el$52, _p$.d = _v$24);
322
428
  return _p$;
323
429
  }, {
324
430
  e: void 0,
@@ -329,27 +435,28 @@ function HotkeyList(props) {
329
435
  n: void 0,
330
436
  s: void 0,
331
437
  h: void 0,
332
- r: void 0
438
+ r: void 0,
439
+ d: void 0
333
440
  });
334
- return _el$30;
441
+ return _el$36;
335
442
  })();
336
443
  }
337
444
  }));
338
- effect(() => className(_el$24, styles().hotkeyList));
339
- return _el$24;
445
+ effect(() => className(_el$30, styles().hotkeyList));
446
+ return _el$30;
340
447
  })(),
341
448
  (() => {
342
- var _el$25 = _tmpl$8(), _el$28 = _el$25.firstChild.nextSibling;
343
- _el$28.nextSibling;
344
- insert(_el$25, () => sequenceRegistrations().length, _el$28);
345
- effect(() => className(_el$25, styles().panelHeader));
346
- return _el$25;
449
+ var _el$31 = _tmpl$10(), _el$34 = _el$31.firstChild.nextSibling;
450
+ _el$34.nextSibling;
451
+ insert(_el$31, () => filteredSequenceRegistrations().length, _el$34);
452
+ effect(() => className(_el$31, styles().panelHeader));
453
+ return _el$31;
347
454
  })(),
348
455
  (() => {
349
- var _el$29 = _tmpl$7();
350
- insert(_el$29, createComponent(For, {
456
+ var _el$35 = _tmpl$1();
457
+ insert(_el$35, createComponent(For, {
351
458
  get each() {
352
- return sequenceRegistrations();
459
+ return filteredSequenceRegistrations();
353
460
  },
354
461
  children: (reg) => createComponent(SequenceListRow, {
355
462
  reg,
@@ -365,12 +472,12 @@ function HotkeyList(props) {
365
472
  }
366
473
  })
367
474
  }));
368
- effect(() => className(_el$29, styles().hotkeyList));
369
- return _el$29;
475
+ effect(() => className(_el$35, styles().hotkeyList));
476
+ return _el$35;
370
477
  })()
371
478
  ];
372
479
  }
373
- delegateEvents(["click"]);
480
+ delegateEvents(["click", "input"]);
374
481
 
375
482
  //#endregion
376
483
  export { HotkeyList };