@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/DetailsPanel.js CHANGED
@@ -2,13 +2,13 @@ import { effectiveSequenceMatchedSteps } from "../sequence-progress.js";
2
2
  import { useHotkeysDevtoolsState } from "../HotkeysContextProvider.js";
3
3
  import { useStyles } from "../styles/use-styles.js";
4
4
  import { ActionButtons } from "./ActionButtons.js";
5
- import { className, createComponent, effect, insert, template } from "solid-js/web";
5
+ import { className, createComponent, effect, insert, memo, template } from "solid-js/web";
6
6
  import { For, Show, createMemo } from "solid-js";
7
7
  import { detectPlatform, formatForDisplay, formatHotkeySequence, normalizeHotkey, normalizeHotkeyFromParsed, parseHotkey } from "@tanstack/hotkeys";
8
8
  import clsx from "clsx";
9
9
 
10
10
  //#region src/components/DetailsPanel.tsx
11
- var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><span></span><span>`), _tmpl$3 = /* @__PURE__ */ template(`<div><div></div><div><div>ID</div><div></div><div>Raw</div><div></div><div>Target</div><div>`), _tmpl$4 = /* @__PURE__ */ template(`<div><div>Conflicts (<!>)</div><div>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div><div>Key Breakdown</div><div><div><div></div></div><span aria-hidden=true>-></span><div></div></div></div><div><div>Actions</div></div><div><div>Options</div><div><div><span>enabled</span><span></span></div><div><span>eventType</span><span></span></div><div><span>preventDefault</span><span></span></div><div><span>stopPropagation</span><span></span></div><div><span>ignoreInputs</span><span></span></div><div><span>requireReset</span><span></span></div><div><span>conflictBehavior</span><span></span></div><div><span>hasFired</span><span>`), _tmpl$6 = /* @__PURE__ */ template(`<span>+`), _tmpl$7 = /* @__PURE__ */ template(`<span>`), _tmpl$8 = /* @__PURE__ */ template(`<div><span></span> <!>: <!> (<!>) on `), _tmpl$9 = /* @__PURE__ */ template(`<div><span>scope</span> <!>: <!> (<!>) on `), _tmpl$0 = /* @__PURE__ */ template(`<div><div></div><div><div>ID</div><div></div><div>Sequence</div><div></div><div>Target</div><div>`), _tmpl$1 = /* @__PURE__ */ template(`<div><div><div>Key Breakdown</div><div></div><div>Each chord</div></div><div><div>Actions</div></div><div><div>Options</div><div><div><span>enabled</span><span></span></div><div><span>eventType</span><span></span></div><div><span>timeout</span><span>ms</span></div><div><span>preventDefault</span><span></span></div><div><span>stopPropagation</span><span></span></div><div><span>ignoreInputs</span><span></span></div><div><span>conflictBehavior</span><span>`), _tmpl$10 = /* @__PURE__ */ template(`<span><span>`), _tmpl$11 = /* @__PURE__ */ template(`<span>→`), _tmpl$12 = /* @__PURE__ */ template(`<div><div>Step </div><div><div><div></div></div><span aria-hidden=true>-></span><div>`), _tmpl$13 = /* @__PURE__ */ template(`<div>Select a hotkey or sequence from the list to view its details`);
11
+ var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><span></span><span>`), _tmpl$3 = /* @__PURE__ */ template(`<div><div></div><div><div>ID</div><div></div><div>Raw</div><div></div><div>Target</div><div>`), _tmpl$4 = /* @__PURE__ */ template(`<div><div>Conflicts (<!>)</div><div>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div><div>Key Breakdown</div><div><div><div></div></div><span aria-hidden=true>-></span><div></div></div></div><div><div>Actions</div></div><div><div>Meta</div><div><div><span>name</span><span></span></div><div><span>description</span><span></span></div></div></div><div><div>Options</div><div><div><span>enabled</span><span></span></div><div><span>eventType</span><span></span></div><div><span>preventDefault</span><span></span></div><div><span>stopPropagation</span><span></span></div><div><span>ignoreInputs</span><span></span></div><div><span>requireReset</span><span></span></div><div><span>conflictBehavior</span><span></span></div><div><span>hasFired</span><span>`), _tmpl$6 = /* @__PURE__ */ template(`<span>+`), _tmpl$7 = /* @__PURE__ */ template(`<span>`), _tmpl$8 = /* @__PURE__ */ template(`<div><span></span> <!>: <!> (<!>) on `), _tmpl$9 = /* @__PURE__ */ template(`<div><span>scope</span> <!>: <!> (<!>) on `), _tmpl$0 = /* @__PURE__ */ template(`<div><div></div><div><div>ID</div><div></div><div>Sequence</div><div></div><div>Target</div><div>`), _tmpl$1 = /* @__PURE__ */ template(`<div><div><div>Key Breakdown</div><div></div><div>Each chord</div></div><div><div>Actions</div></div><div><div>Meta</div><div><div><span>name</span><span></span></div><div><span>description</span><span></span></div></div></div><div><div>Options</div><div><div><span>enabled</span><span></span></div><div><span>eventType</span><span></span></div><div><span>timeout</span><span>ms</span></div><div><span>preventDefault</span><span></span></div><div><span>stopPropagation</span><span></span></div><div><span>ignoreInputs</span><span></span></div><div><span>conflictBehavior</span><span>`), _tmpl$10 = /* @__PURE__ */ template(`<span><span>`), _tmpl$11 = /* @__PURE__ */ template(`<span>→`), _tmpl$12 = /* @__PURE__ */ template(`<div><div>Step </div><div><div><div></div></div><span aria-hidden=true>-></span><div>`), _tmpl$13 = /* @__PURE__ */ template(`<div>Select a hotkey or sequence from the list to view its details`);
12
12
  const PLATFORM_ROWS = [
13
13
  {
14
14
  id: "mac",
@@ -129,7 +129,7 @@ function HotkeyDetails(props) {
129
129
  });
130
130
  return _el$5;
131
131
  })(), (() => {
132
- var _el$12 = _tmpl$5(), _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.nextSibling, _el$20 = _el$13.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling, _el$23 = _el$22.firstChild, _el$25 = _el$23.nextSibling.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$28 = _el$25.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling, _el$31 = _el$28.nextSibling, _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling, _el$34 = _el$31.nextSibling, _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$34.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$40 = _el$37.nextSibling, _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling, _el$43 = _el$40.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling, _el$46 = _el$43.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling;
132
+ var _el$12 = _tmpl$5(), _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.nextSibling, _el$20 = _el$13.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$23.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$28 = _el$25.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling, _el$31 = _el$22.nextSibling, _el$32 = _el$31.firstChild, _el$34 = _el$32.nextSibling.firstChild, _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$34.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$40 = _el$37.nextSibling, _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling, _el$43 = _el$40.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling, _el$46 = _el$43.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling, _el$49 = _el$46.nextSibling, _el$50 = _el$49.firstChild, _el$51 = _el$50.nextSibling, _el$52 = _el$49.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling, _el$55 = _el$52.nextSibling, _el$56 = _el$55.firstChild, _el$57 = _el$56.nextSibling;
133
133
  insert(_el$17, createComponent(For, {
134
134
  get each() {
135
135
  return rawModParts();
@@ -139,15 +139,15 @@ function HotkeyDetails(props) {
139
139
  return i() > 0;
140
140
  },
141
141
  get children() {
142
- var _el$55 = _tmpl$6();
143
- effect(() => className(_el$55, styles().keyBreakdownPlus));
144
- return _el$55;
142
+ var _el$64 = _tmpl$6();
143
+ effect(() => className(_el$64, styles().keyBreakdownPlus));
144
+ return _el$64;
145
145
  }
146
146
  }), (() => {
147
- var _el$56 = _tmpl$7();
148
- insert(_el$56, part);
149
- effect(() => className(_el$56, styles().keyCapLarge));
150
- return _el$56;
147
+ var _el$65 = _tmpl$7();
148
+ insert(_el$65, part);
149
+ effect(() => className(_el$65, styles().keyCapLarge));
150
+ return _el$65;
151
151
  })()]
152
152
  }));
153
153
  insert(_el$19, createComponent(KeyBreakdownPlatformTable, {
@@ -160,24 +160,55 @@ function HotkeyDetails(props) {
160
160
  insert(_el$20, createComponent(ActionButtons, { get registration() {
161
161
  return reg();
162
162
  } }), null);
163
- insert(_el$27, () => String(reg().options.enabled !== false));
164
- insert(_el$30, () => reg().options.eventType ?? "keydown");
165
- insert(_el$33, () => String(!!reg().options.preventDefault));
166
- insert(_el$36, () => String(!!reg().options.stopPropagation));
167
- insert(_el$39, () => String(reg().options.ignoreInputs !== false));
168
- insert(_el$42, () => String(!!reg().options.requireReset));
169
- insert(_el$45, conflictBehavior);
170
- insert(_el$48, () => String(reg().hasFired));
163
+ insert(_el$27, () => reg().options.meta?.name ?? "—");
164
+ insert(_el$30, () => reg().options.meta?.description ?? "—");
165
+ insert(_el$24, createComponent(Show, {
166
+ get when() {
167
+ return memo(() => !!reg().options.meta)() && Object.keys(reg().options.meta).filter((k) => k !== "name" && k !== "description").length > 0;
168
+ },
169
+ get children() {
170
+ return createComponent(For, {
171
+ get each() {
172
+ return Object.entries(reg().options.meta ?? {}).filter(([k]) => k !== "name" && k !== "description");
173
+ },
174
+ children: ([key, value]) => (() => {
175
+ var _el$66 = _tmpl$2(), _el$67 = _el$66.firstChild, _el$68 = _el$67.nextSibling;
176
+ insert(_el$67, key);
177
+ insert(_el$68, () => String(value));
178
+ effect((_p$) => {
179
+ var _v$58 = styles().optionRow, _v$59 = styles().optionLabel, _v$60 = styles().optionValue;
180
+ _v$58 !== _p$.e && className(_el$66, _p$.e = _v$58);
181
+ _v$59 !== _p$.t && className(_el$67, _p$.t = _v$59);
182
+ _v$60 !== _p$.a && className(_el$68, _p$.a = _v$60);
183
+ return _p$;
184
+ }, {
185
+ e: void 0,
186
+ t: void 0,
187
+ a: void 0
188
+ });
189
+ return _el$66;
190
+ })()
191
+ });
192
+ }
193
+ }), null);
194
+ insert(_el$36, () => String(reg().options.enabled !== false));
195
+ insert(_el$39, () => reg().options.eventType ?? "keydown");
196
+ insert(_el$42, () => String(!!reg().options.preventDefault));
197
+ insert(_el$45, () => String(!!reg().options.stopPropagation));
198
+ insert(_el$48, () => String(reg().options.ignoreInputs !== false));
199
+ insert(_el$51, () => String(!!reg().options.requireReset));
200
+ insert(_el$54, conflictBehavior);
201
+ insert(_el$57, () => String(reg().hasFired));
171
202
  insert(_el$12, createComponent(Show, {
172
203
  get when() {
173
204
  return allConflicts().length > 0;
174
205
  },
175
206
  get children() {
176
- var _el$49 = _tmpl$4(), _el$50 = _el$49.firstChild, _el$53 = _el$50.firstChild.nextSibling;
177
- _el$53.nextSibling;
178
- var _el$54 = _el$50.nextSibling;
179
- insert(_el$50, () => allConflicts().length, _el$53);
180
- insert(_el$54, createComponent(For, {
207
+ var _el$58 = _tmpl$4(), _el$59 = _el$58.firstChild, _el$62 = _el$59.firstChild.nextSibling;
208
+ _el$62.nextSibling;
209
+ var _el$63 = _el$59.nextSibling;
210
+ insert(_el$59, () => allConflicts().length, _el$62);
211
+ insert(_el$63, createComponent(For, {
181
212
  get each() {
182
213
  return targetConflicts();
183
214
  },
@@ -185,49 +216,49 @@ function HotkeyDetails(props) {
185
216
  const itemStyle = () => props.getConflictItemStyle(conflictBehavior(), true);
186
217
  const label = () => props.getConflictLabel(conflictBehavior(), true);
187
218
  return (() => {
188
- var _el$57 = _tmpl$8(), _el$58 = _el$57.firstChild, _el$65 = _el$58.nextSibling.nextSibling, _el$66 = _el$65.nextSibling.nextSibling, _el$67 = _el$66.nextSibling.nextSibling;
189
- _el$67.nextSibling;
190
- insert(_el$58, label);
191
- insert(_el$57, () => conflict.id, _el$65);
192
- insert(_el$57, () => props.formatForDisplay(conflict.hotkey), _el$66);
193
- insert(_el$57, () => conflict.options.eventType ?? "keydown", _el$67);
194
- insert(_el$57, () => props.getTargetDescription(conflict.target), null);
195
- effect(() => className(_el$57, styles()[itemStyle()]));
196
- return _el$57;
219
+ var _el$69 = _tmpl$8(), _el$70 = _el$69.firstChild, _el$77 = _el$70.nextSibling.nextSibling, _el$78 = _el$77.nextSibling.nextSibling, _el$79 = _el$78.nextSibling.nextSibling;
220
+ _el$79.nextSibling;
221
+ insert(_el$70, label);
222
+ insert(_el$69, () => conflict.id, _el$77);
223
+ insert(_el$69, () => props.formatForDisplay(conflict.hotkey), _el$78);
224
+ insert(_el$69, () => conflict.options.eventType ?? "keydown", _el$79);
225
+ insert(_el$69, () => props.getTargetDescription(conflict.target), null);
226
+ effect(() => className(_el$69, styles()[itemStyle()]));
227
+ return _el$69;
197
228
  })();
198
229
  }
199
230
  }), null);
200
- insert(_el$54, createComponent(For, {
231
+ insert(_el$63, createComponent(For, {
201
232
  get each() {
202
233
  return scopeConflicts();
203
234
  },
204
235
  children: (conflict) => (() => {
205
- var _el$68 = _tmpl$9(), _el$76 = _el$68.firstChild.nextSibling.nextSibling, _el$77 = _el$76.nextSibling.nextSibling, _el$78 = _el$77.nextSibling.nextSibling;
206
- _el$78.nextSibling;
207
- insert(_el$68, () => conflict.id, _el$76);
208
- insert(_el$68, () => props.formatForDisplay(conflict.hotkey), _el$77);
209
- insert(_el$68, () => conflict.options.eventType ?? "keydown", _el$78);
210
- insert(_el$68, () => props.getTargetDescription(conflict.target), null);
211
- effect(() => className(_el$68, styles().conflictItemScope));
212
- return _el$68;
236
+ var _el$80 = _tmpl$9(), _el$88 = _el$80.firstChild.nextSibling.nextSibling, _el$89 = _el$88.nextSibling.nextSibling, _el$90 = _el$89.nextSibling.nextSibling;
237
+ _el$90.nextSibling;
238
+ insert(_el$80, () => conflict.id, _el$88);
239
+ insert(_el$80, () => props.formatForDisplay(conflict.hotkey), _el$89);
240
+ insert(_el$80, () => conflict.options.eventType ?? "keydown", _el$90);
241
+ insert(_el$80, () => props.getTargetDescription(conflict.target), null);
242
+ effect(() => className(_el$80, styles().conflictItemScope));
243
+ return _el$80;
213
244
  })()
214
245
  }), null);
215
246
  effect((_p$) => {
216
247
  var _v$11 = styles().detailSection, _v$12 = styles().detailSectionHeader, _v$13 = styles().conflictList;
217
- _v$11 !== _p$.e && className(_el$49, _p$.e = _v$11);
218
- _v$12 !== _p$.t && className(_el$50, _p$.t = _v$12);
219
- _v$13 !== _p$.a && className(_el$54, _p$.a = _v$13);
248
+ _v$11 !== _p$.e && className(_el$58, _p$.e = _v$11);
249
+ _v$12 !== _p$.t && className(_el$59, _p$.t = _v$12);
250
+ _v$13 !== _p$.a && className(_el$63, _p$.a = _v$13);
220
251
  return _p$;
221
252
  }, {
222
253
  e: void 0,
223
254
  t: void 0,
224
255
  a: void 0
225
256
  });
226
- return _el$49;
257
+ return _el$58;
227
258
  }
228
259
  }), null);
229
260
  effect((_p$) => {
230
- var _v$14 = styles().detailsGrid, _v$15 = styles().detailSection, _v$16 = styles().detailSectionHeader, _v$17 = styles().keyBreakdownSplitRow, _v$18 = styles().keyBreakdownSplitLeft, _v$19 = styles().keyBreakdown, _v$20 = styles().keyBreakdownSplitArrow, _v$21 = styles().keyBreakdownSplitRight, _v$22 = styles().detailSection, _v$23 = styles().detailSectionHeader, _v$24 = styles().detailSection, _v$25 = styles().detailSectionHeader, _v$26 = styles().optionRow, _v$27 = styles().optionLabel, _v$28 = reg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$29 = styles().optionRow, _v$30 = styles().optionLabel, _v$31 = styles().optionValue, _v$32 = styles().optionRow, _v$33 = styles().optionLabel, _v$34 = reg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$35 = styles().optionRow, _v$36 = styles().optionLabel, _v$37 = reg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$38 = styles().optionRow, _v$39 = styles().optionLabel, _v$40 = reg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$41 = styles().optionRow, _v$42 = styles().optionLabel, _v$43 = reg().options.requireReset ? styles().optionValueTrue : styles().optionValueFalse, _v$44 = styles().optionRow, _v$45 = styles().optionLabel, _v$46 = styles().optionValue, _v$47 = styles().optionRow, _v$48 = styles().optionLabel, _v$49 = reg().hasFired ? styles().optionValueTrue : styles().optionValueFalse;
261
+ var _v$14 = styles().detailsGrid, _v$15 = styles().detailSection, _v$16 = styles().detailSectionHeader, _v$17 = styles().keyBreakdownSplitRow, _v$18 = styles().keyBreakdownSplitLeft, _v$19 = styles().keyBreakdown, _v$20 = styles().keyBreakdownSplitArrow, _v$21 = styles().keyBreakdownSplitRight, _v$22 = styles().detailSection, _v$23 = styles().detailSectionHeader, _v$24 = styles().detailSection, _v$25 = styles().detailSectionHeader, _v$26 = styles().optionRow, _v$27 = styles().optionLabel, _v$28 = styles().optionValue, _v$29 = styles().optionRow, _v$30 = styles().optionLabel, _v$31 = styles().optionValue, _v$32 = styles().detailSection, _v$33 = styles().detailSectionHeader, _v$34 = styles().optionRow, _v$35 = styles().optionLabel, _v$36 = reg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$37 = styles().optionRow, _v$38 = styles().optionLabel, _v$39 = styles().optionValue, _v$40 = styles().optionRow, _v$41 = styles().optionLabel, _v$42 = reg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$43 = styles().optionRow, _v$44 = styles().optionLabel, _v$45 = reg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$46 = styles().optionRow, _v$47 = styles().optionLabel, _v$48 = reg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$49 = styles().optionRow, _v$50 = styles().optionLabel, _v$51 = reg().options.requireReset ? styles().optionValueTrue : styles().optionValueFalse, _v$52 = styles().optionRow, _v$53 = styles().optionLabel, _v$54 = styles().optionValue, _v$55 = styles().optionRow, _v$56 = styles().optionLabel, _v$57 = reg().hasFired ? styles().optionValueTrue : styles().optionValueFalse;
231
262
  _v$14 !== _p$.e && className(_el$12, _p$.e = _v$14);
232
263
  _v$15 !== _p$.t && className(_el$13, _p$.t = _v$15);
233
264
  _v$16 !== _p$.a && className(_el$14, _p$.a = _v$16);
@@ -248,22 +279,30 @@ function HotkeyDetails(props) {
248
279
  _v$31 !== _p$.g && className(_el$30, _p$.g = _v$31);
249
280
  _v$32 !== _p$.p && className(_el$31, _p$.p = _v$32);
250
281
  _v$33 !== _p$.b && className(_el$32, _p$.b = _v$33);
251
- _v$34 !== _p$.T && className(_el$33, _p$.T = _v$34);
252
- _v$35 !== _p$.A && className(_el$34, _p$.A = _v$35);
253
- _v$36 !== _p$.O && className(_el$35, _p$.O = _v$36);
254
- _v$37 !== _p$.I && className(_el$36, _p$.I = _v$37);
255
- _v$38 !== _p$.S && className(_el$37, _p$.S = _v$38);
256
- _v$39 !== _p$.W && className(_el$38, _p$.W = _v$39);
257
- _v$40 !== _p$.C && className(_el$39, _p$.C = _v$40);
258
- _v$41 !== _p$.B && className(_el$40, _p$.B = _v$41);
259
- _v$42 !== _p$.v && className(_el$41, _p$.v = _v$42);
260
- _v$43 !== _p$.k && className(_el$42, _p$.k = _v$43);
261
- _v$44 !== _p$.x && className(_el$43, _p$.x = _v$44);
262
- _v$45 !== _p$.j && className(_el$44, _p$.j = _v$45);
263
- _v$46 !== _p$.q && className(_el$45, _p$.q = _v$46);
264
- _v$47 !== _p$.z && className(_el$46, _p$.z = _v$47);
265
- _v$48 !== _p$.P && className(_el$47, _p$.P = _v$48);
266
- _v$49 !== _p$.H && className(_el$48, _p$.H = _v$49);
282
+ _v$34 !== _p$.T && className(_el$34, _p$.T = _v$34);
283
+ _v$35 !== _p$.A && className(_el$35, _p$.A = _v$35);
284
+ _v$36 !== _p$.O && className(_el$36, _p$.O = _v$36);
285
+ _v$37 !== _p$.I && className(_el$37, _p$.I = _v$37);
286
+ _v$38 !== _p$.S && className(_el$38, _p$.S = _v$38);
287
+ _v$39 !== _p$.W && className(_el$39, _p$.W = _v$39);
288
+ _v$40 !== _p$.C && className(_el$40, _p$.C = _v$40);
289
+ _v$41 !== _p$.B && className(_el$41, _p$.B = _v$41);
290
+ _v$42 !== _p$.v && className(_el$42, _p$.v = _v$42);
291
+ _v$43 !== _p$.k && className(_el$43, _p$.k = _v$43);
292
+ _v$44 !== _p$.x && className(_el$44, _p$.x = _v$44);
293
+ _v$45 !== _p$.j && className(_el$45, _p$.j = _v$45);
294
+ _v$46 !== _p$.q && className(_el$46, _p$.q = _v$46);
295
+ _v$47 !== _p$.z && className(_el$47, _p$.z = _v$47);
296
+ _v$48 !== _p$.P && className(_el$48, _p$.P = _v$48);
297
+ _v$49 !== _p$.H && className(_el$49, _p$.H = _v$49);
298
+ _v$50 !== _p$.F && className(_el$50, _p$.F = _v$50);
299
+ _v$51 !== _p$.M && className(_el$51, _p$.M = _v$51);
300
+ _v$52 !== _p$.D && className(_el$52, _p$.D = _v$52);
301
+ _v$53 !== _p$.R && className(_el$53, _p$.R = _v$53);
302
+ _v$54 !== _p$.E && className(_el$54, _p$.E = _v$54);
303
+ _v$55 !== _p$.L && className(_el$55, _p$.L = _v$55);
304
+ _v$56 !== _p$.N && className(_el$56, _p$.N = _v$56);
305
+ _v$57 !== _p$.G && className(_el$57, _p$.G = _v$57);
267
306
  return _p$;
268
307
  }, {
269
308
  e: void 0,
@@ -301,7 +340,15 @@ function HotkeyDetails(props) {
301
340
  q: void 0,
302
341
  z: void 0,
303
342
  P: void 0,
304
- H: void 0
343
+ H: void 0,
344
+ F: void 0,
345
+ M: void 0,
346
+ D: void 0,
347
+ R: void 0,
348
+ E: void 0,
349
+ L: void 0,
350
+ N: void 0,
351
+ G: void 0
305
352
  });
306
353
  return _el$12;
307
354
  })()];
@@ -317,54 +364,54 @@ function SequenceDetails(props) {
317
364
  const sequenceCanonicalPlatform = createMemo(() => liveReg().options.platform ?? detectPlatform());
318
365
  const styles = props.styles;
319
366
  return [(() => {
320
- var _el$79 = _tmpl$0(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, _el$82 = _el$81.firstChild, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling;
321
- insert(_el$80, createComponent(For, {
367
+ var _el$91 = _tmpl$0(), _el$92 = _el$91.firstChild, _el$93 = _el$92.nextSibling, _el$94 = _el$93.firstChild, _el$95 = _el$94.nextSibling, _el$96 = _el$95.nextSibling, _el$97 = _el$96.nextSibling, _el$98 = _el$97.nextSibling, _el$99 = _el$98.nextSibling;
368
+ insert(_el$92, createComponent(For, {
322
369
  get each() {
323
370
  return liveReg().sequence;
324
371
  },
325
372
  children: (step, i) => (() => {
326
- var _el$126 = _tmpl$10(), _el$127 = _el$126.firstChild;
327
- insert(_el$126, createComponent(Show, {
373
+ var _el$147 = _tmpl$10(), _el$148 = _el$147.firstChild;
374
+ insert(_el$147, createComponent(Show, {
328
375
  get when() {
329
376
  return i() > 0;
330
377
  },
331
378
  children: " "
332
- }), _el$127);
333
- insert(_el$127, () => props.formatForDisplay(step));
334
- effect(() => className(_el$127, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
335
- return _el$126;
379
+ }), _el$148);
380
+ insert(_el$148, () => props.formatForDisplay(step));
381
+ effect(() => className(_el$148, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
382
+ return _el$147;
336
383
  })()
337
384
  }));
338
- insert(_el$83, () => liveReg().id);
339
- insert(_el$85, createComponent(For, {
385
+ insert(_el$95, () => liveReg().id);
386
+ insert(_el$97, createComponent(For, {
340
387
  get each() {
341
388
  return liveReg().sequence;
342
389
  },
343
390
  children: (step, i) => (() => {
344
- var _el$128 = _tmpl$10(), _el$129 = _el$128.firstChild;
345
- insert(_el$128, createComponent(Show, {
391
+ var _el$149 = _tmpl$10(), _el$150 = _el$149.firstChild;
392
+ insert(_el$149, createComponent(Show, {
346
393
  get when() {
347
394
  return i() > 0;
348
395
  },
349
396
  children: " "
350
- }), _el$129);
351
- insert(_el$129, () => props.formatForDisplay(step));
352
- effect(() => className(_el$129, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
353
- return _el$128;
397
+ }), _el$150);
398
+ insert(_el$150, () => props.formatForDisplay(step));
399
+ effect(() => className(_el$150, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
400
+ return _el$149;
354
401
  })()
355
402
  }));
356
- insert(_el$87, () => props.getTargetDescription(liveReg().target));
403
+ insert(_el$99, () => props.getTargetDescription(liveReg().target));
357
404
  effect((_p$) => {
358
- var _v$50 = styles().stateHeader, _v$51 = styles().stateTitle, _v$52 = styles().infoGrid, _v$53 = styles().infoLabel, _v$54 = styles().infoValueMono, _v$55 = styles().infoLabel, _v$56 = styles().infoValueMono, _v$57 = styles().infoLabel, _v$58 = styles().infoValueMono;
359
- _v$50 !== _p$.e && className(_el$79, _p$.e = _v$50);
360
- _v$51 !== _p$.t && className(_el$80, _p$.t = _v$51);
361
- _v$52 !== _p$.a && className(_el$81, _p$.a = _v$52);
362
- _v$53 !== _p$.o && className(_el$82, _p$.o = _v$53);
363
- _v$54 !== _p$.i && className(_el$83, _p$.i = _v$54);
364
- _v$55 !== _p$.n && className(_el$84, _p$.n = _v$55);
365
- _v$56 !== _p$.s && className(_el$85, _p$.s = _v$56);
366
- _v$57 !== _p$.h && className(_el$86, _p$.h = _v$57);
367
- _v$58 !== _p$.r && className(_el$87, _p$.r = _v$58);
405
+ var _v$61 = styles().stateHeader, _v$62 = styles().stateTitle, _v$63 = styles().infoGrid, _v$64 = styles().infoLabel, _v$65 = styles().infoValueMono, _v$66 = styles().infoLabel, _v$67 = styles().infoValueMono, _v$68 = styles().infoLabel, _v$69 = styles().infoValueMono;
406
+ _v$61 !== _p$.e && className(_el$91, _p$.e = _v$61);
407
+ _v$62 !== _p$.t && className(_el$92, _p$.t = _v$62);
408
+ _v$63 !== _p$.a && className(_el$93, _p$.a = _v$63);
409
+ _v$64 !== _p$.o && className(_el$94, _p$.o = _v$64);
410
+ _v$65 !== _p$.i && className(_el$95, _p$.i = _v$65);
411
+ _v$66 !== _p$.n && className(_el$96, _p$.n = _v$66);
412
+ _v$67 !== _p$.s && className(_el$97, _p$.s = _v$67);
413
+ _v$68 !== _p$.h && className(_el$98, _p$.h = _v$68);
414
+ _v$69 !== _p$.r && className(_el$99, _p$.r = _v$69);
368
415
  return _p$;
369
416
  }, {
370
417
  e: void 0,
@@ -377,10 +424,10 @@ function SequenceDetails(props) {
377
424
  h: void 0,
378
425
  r: void 0
379
426
  });
380
- return _el$79;
427
+ return _el$91;
381
428
  })(), (() => {
382
- var _el$88 = _tmpl$1(), _el$89 = _el$88.firstChild, _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling, _el$92 = _el$91.nextSibling, _el$93 = _el$89.nextSibling, _el$94 = _el$93.firstChild, _el$95 = _el$93.nextSibling, _el$96 = _el$95.firstChild, _el$98 = _el$96.nextSibling.firstChild, _el$99 = _el$98.firstChild, _el$100 = _el$99.nextSibling, _el$101 = _el$98.nextSibling, _el$102 = _el$101.firstChild, _el$103 = _el$102.nextSibling, _el$104 = _el$101.nextSibling, _el$105 = _el$104.firstChild, _el$106 = _el$105.nextSibling, _el$107 = _el$106.firstChild, _el$108 = _el$104.nextSibling, _el$109 = _el$108.firstChild, _el$110 = _el$109.nextSibling, _el$111 = _el$108.nextSibling, _el$112 = _el$111.firstChild, _el$113 = _el$112.nextSibling, _el$114 = _el$111.nextSibling, _el$115 = _el$114.firstChild, _el$116 = _el$115.nextSibling, _el$117 = _el$114.nextSibling, _el$118 = _el$117.firstChild, _el$119 = _el$118.nextSibling;
383
- insert(_el$91, createComponent(For, {
429
+ var _el$100 = _tmpl$1(), _el$101 = _el$100.firstChild, _el$102 = _el$101.firstChild, _el$103 = _el$102.nextSibling, _el$104 = _el$103.nextSibling, _el$105 = _el$101.nextSibling, _el$106 = _el$105.firstChild, _el$107 = _el$105.nextSibling, _el$108 = _el$107.firstChild, _el$109 = _el$108.nextSibling, _el$110 = _el$109.firstChild, _el$111 = _el$110.firstChild, _el$112 = _el$111.nextSibling, _el$113 = _el$110.nextSibling, _el$114 = _el$113.firstChild, _el$115 = _el$114.nextSibling, _el$116 = _el$107.nextSibling, _el$117 = _el$116.firstChild, _el$119 = _el$117.nextSibling.firstChild, _el$120 = _el$119.firstChild, _el$121 = _el$120.nextSibling, _el$122 = _el$119.nextSibling, _el$123 = _el$122.firstChild, _el$124 = _el$123.nextSibling, _el$125 = _el$122.nextSibling, _el$126 = _el$125.firstChild, _el$127 = _el$126.nextSibling, _el$128 = _el$127.firstChild, _el$129 = _el$125.nextSibling, _el$130 = _el$129.firstChild, _el$131 = _el$130.nextSibling, _el$132 = _el$129.nextSibling, _el$133 = _el$132.firstChild, _el$134 = _el$133.nextSibling, _el$135 = _el$132.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;
430
+ insert(_el$103, createComponent(For, {
384
431
  get each() {
385
432
  return liveReg().sequence;
386
433
  },
@@ -389,18 +436,18 @@ function SequenceDetails(props) {
389
436
  return i() > 0;
390
437
  },
391
438
  get children() {
392
- var _el$130 = _tmpl$11();
393
- effect(() => className(_el$130, styles().keyBreakdownPlus));
394
- return _el$130;
439
+ var _el$151 = _tmpl$11();
440
+ effect(() => className(_el$151, styles().keyBreakdownPlus));
441
+ return _el$151;
395
442
  }
396
443
  }), (() => {
397
- var _el$131 = _tmpl$7();
398
- insert(_el$131, () => props.formatForDisplay(step));
399
- effect(() => className(_el$131, clsx(styles().keyCapLarge, i() < matchedSteps() && styles().keyCapLargeInProgress)));
400
- return _el$131;
444
+ var _el$152 = _tmpl$7();
445
+ insert(_el$152, () => props.formatForDisplay(step));
446
+ effect(() => className(_el$152, clsx(styles().keyCapLarge, i() < matchedSteps() && styles().keyCapLargeInProgress)));
447
+ return _el$152;
401
448
  })()]
402
449
  }));
403
- insert(_el$89, createComponent(For, {
450
+ insert(_el$101, createComponent(For, {
404
451
  get each() {
405
452
  return liveReg().sequence;
406
453
  },
@@ -408,11 +455,11 @@ function SequenceDetails(props) {
408
455
  const stepParsed = () => parseHotkey(step, sequenceCanonicalPlatform());
409
456
  const stepRawParts = () => normalizeHotkey(step, sequenceCanonicalPlatform()).split("+");
410
457
  return (() => {
411
- var _el$132 = _tmpl$12(), _el$133 = _el$132.firstChild;
412
- _el$133.firstChild;
413
- var _el$135 = _el$133.nextSibling, _el$136 = _el$135.firstChild, _el$137 = _el$136.firstChild, _el$138 = _el$136.nextSibling, _el$139 = _el$138.nextSibling;
414
- insert(_el$133, () => stepIdx() + 1, null);
415
- insert(_el$137, createComponent(For, {
458
+ var _el$153 = _tmpl$12(), _el$154 = _el$153.firstChild;
459
+ _el$154.firstChild;
460
+ var _el$156 = _el$154.nextSibling, _el$157 = _el$156.firstChild, _el$158 = _el$157.firstChild, _el$159 = _el$157.nextSibling, _el$160 = _el$159.nextSibling;
461
+ insert(_el$154, () => stepIdx() + 1, null);
462
+ insert(_el$158, createComponent(For, {
416
463
  get each() {
417
464
  return stepRawParts();
418
465
  },
@@ -421,18 +468,18 @@ function SequenceDetails(props) {
421
468
  return i() > 0;
422
469
  },
423
470
  get children() {
424
- var _el$140 = _tmpl$6();
425
- effect(() => className(_el$140, styles().keyBreakdownPlus));
426
- return _el$140;
471
+ var _el$161 = _tmpl$6();
472
+ effect(() => className(_el$161, styles().keyBreakdownPlus));
473
+ return _el$161;
427
474
  }
428
475
  }), (() => {
429
- var _el$141 = _tmpl$7();
430
- insert(_el$141, part);
431
- effect(() => className(_el$141, styles().keyCapLarge));
432
- return _el$141;
476
+ var _el$162 = _tmpl$7();
477
+ insert(_el$162, part);
478
+ effect(() => className(_el$162, styles().keyCapLarge));
479
+ return _el$162;
433
480
  })()]
434
481
  }));
435
- insert(_el$139, createComponent(KeyBreakdownPlatformTable, {
482
+ insert(_el$160, createComponent(KeyBreakdownPlatformTable, {
436
483
  getParsed: stepParsed,
437
484
  getCanonicalPlatform: () => sequenceCanonicalPlatform(),
438
485
  get styles() {
@@ -440,14 +487,14 @@ function SequenceDetails(props) {
440
487
  }
441
488
  }));
442
489
  effect((_p$) => {
443
- var _v$92 = styles().sequenceChordDetail, _v$93 = styles().keyBreakdownSubHeader, _v$94 = styles().keyBreakdownSplitRow, _v$95 = styles().keyBreakdownSplitLeft, _v$96 = styles().keyBreakdown, _v$97 = styles().keyBreakdownSplitArrow, _v$98 = styles().keyBreakdownSplitRight;
444
- _v$92 !== _p$.e && className(_el$132, _p$.e = _v$92);
445
- _v$93 !== _p$.t && className(_el$133, _p$.t = _v$93);
446
- _v$94 !== _p$.a && className(_el$135, _p$.a = _v$94);
447
- _v$95 !== _p$.o && className(_el$136, _p$.o = _v$95);
448
- _v$96 !== _p$.i && className(_el$137, _p$.i = _v$96);
449
- _v$97 !== _p$.n && className(_el$138, _p$.n = _v$97);
450
- _v$98 !== _p$.s && className(_el$139, _p$.s = _v$98);
490
+ var _v$111 = styles().sequenceChordDetail, _v$112 = styles().keyBreakdownSubHeader, _v$113 = styles().keyBreakdownSplitRow, _v$114 = styles().keyBreakdownSplitLeft, _v$115 = styles().keyBreakdown, _v$116 = styles().keyBreakdownSplitArrow, _v$117 = styles().keyBreakdownSplitRight;
491
+ _v$111 !== _p$.e && className(_el$153, _p$.e = _v$111);
492
+ _v$112 !== _p$.t && className(_el$154, _p$.t = _v$112);
493
+ _v$113 !== _p$.a && className(_el$156, _p$.a = _v$113);
494
+ _v$114 !== _p$.o && className(_el$157, _p$.o = _v$114);
495
+ _v$115 !== _p$.i && className(_el$158, _p$.i = _v$115);
496
+ _v$116 !== _p$.n && className(_el$159, _p$.n = _v$116);
497
+ _v$117 !== _p$.s && className(_el$160, _p$.s = _v$117);
451
498
  return _p$;
452
499
  }, {
453
500
  e: void 0,
@@ -458,30 +505,61 @@ function SequenceDetails(props) {
458
505
  n: void 0,
459
506
  s: void 0
460
507
  });
461
- return _el$132;
508
+ return _el$153;
462
509
  })();
463
510
  }
464
511
  }), null);
465
- insert(_el$93, createComponent(ActionButtons, { get registration() {
512
+ insert(_el$105, createComponent(ActionButtons, { get registration() {
466
513
  return liveReg();
467
514
  } }), null);
468
- insert(_el$100, () => String(liveReg().options.enabled !== false));
469
- insert(_el$103, () => liveReg().options.eventType ?? "keydown");
470
- insert(_el$106, () => liveReg().options.timeout ?? 1e3, _el$107);
471
- insert(_el$110, () => String(!!liveReg().options.preventDefault));
472
- insert(_el$113, () => String(!!liveReg().options.stopPropagation));
473
- insert(_el$116, () => String(liveReg().options.ignoreInputs !== false));
474
- insert(_el$119, conflictBehavior);
475
- insert(_el$88, createComponent(Show, {
515
+ insert(_el$112, () => liveReg().options.meta?.name ?? "—");
516
+ insert(_el$115, () => liveReg().options.meta?.description ?? "—");
517
+ insert(_el$109, createComponent(Show, {
518
+ get when() {
519
+ return memo(() => !!liveReg().options.meta)() && Object.keys(liveReg().options.meta).filter((k) => k !== "name" && k !== "description").length > 0;
520
+ },
521
+ get children() {
522
+ return createComponent(For, {
523
+ get each() {
524
+ return Object.entries(liveReg().options.meta ?? {}).filter(([k]) => k !== "name" && k !== "description");
525
+ },
526
+ children: ([key, value]) => (() => {
527
+ var _el$163 = _tmpl$2(), _el$164 = _el$163.firstChild, _el$165 = _el$164.nextSibling;
528
+ insert(_el$164, key);
529
+ insert(_el$165, () => String(value));
530
+ effect((_p$) => {
531
+ var _v$118 = styles().optionRow, _v$119 = styles().optionLabel, _v$120 = styles().optionValue;
532
+ _v$118 !== _p$.e && className(_el$163, _p$.e = _v$118);
533
+ _v$119 !== _p$.t && className(_el$164, _p$.t = _v$119);
534
+ _v$120 !== _p$.a && className(_el$165, _p$.a = _v$120);
535
+ return _p$;
536
+ }, {
537
+ e: void 0,
538
+ t: void 0,
539
+ a: void 0
540
+ });
541
+ return _el$163;
542
+ })()
543
+ });
544
+ }
545
+ }), null);
546
+ insert(_el$121, () => String(liveReg().options.enabled !== false));
547
+ insert(_el$124, () => liveReg().options.eventType ?? "keydown");
548
+ insert(_el$127, () => liveReg().options.timeout ?? 1e3, _el$128);
549
+ insert(_el$131, () => String(!!liveReg().options.preventDefault));
550
+ insert(_el$134, () => String(!!liveReg().options.stopPropagation));
551
+ insert(_el$137, () => String(liveReg().options.ignoreInputs !== false));
552
+ insert(_el$140, conflictBehavior);
553
+ insert(_el$100, createComponent(Show, {
476
554
  get when() {
477
555
  return allConflicts().length > 0;
478
556
  },
479
557
  get children() {
480
- var _el$120 = _tmpl$4(), _el$121 = _el$120.firstChild, _el$124 = _el$121.firstChild.nextSibling;
481
- _el$124.nextSibling;
482
- var _el$125 = _el$121.nextSibling;
483
- insert(_el$121, () => allConflicts().length, _el$124);
484
- insert(_el$125, createComponent(For, {
558
+ var _el$141 = _tmpl$4(), _el$142 = _el$141.firstChild, _el$145 = _el$142.firstChild.nextSibling;
559
+ _el$145.nextSibling;
560
+ var _el$146 = _el$142.nextSibling;
561
+ insert(_el$142, () => allConflicts().length, _el$145);
562
+ insert(_el$146, createComponent(For, {
485
563
  get each() {
486
564
  return targetConflicts();
487
565
  },
@@ -489,79 +567,87 @@ function SequenceDetails(props) {
489
567
  const itemStyle = () => props.getConflictItemStyle(conflictBehavior(), true);
490
568
  const label = () => props.getConflictLabel(conflictBehavior(), true);
491
569
  return (() => {
492
- var _el$142 = _tmpl$8(), _el$143 = _el$142.firstChild, _el$150 = _el$143.nextSibling.nextSibling, _el$151 = _el$150.nextSibling.nextSibling, _el$152 = _el$151.nextSibling.nextSibling;
493
- _el$152.nextSibling;
494
- insert(_el$143, label);
495
- insert(_el$142, () => conflict.id, _el$150);
496
- insert(_el$142, () => props.formatHotkeySequence(conflict.sequence), _el$151);
497
- insert(_el$142, () => conflict.options.eventType ?? "keydown", _el$152);
498
- insert(_el$142, () => props.getTargetDescription(conflict.target), null);
499
- effect(() => className(_el$142, styles()[itemStyle()]));
500
- return _el$142;
570
+ var _el$166 = _tmpl$8(), _el$167 = _el$166.firstChild, _el$174 = _el$167.nextSibling.nextSibling, _el$175 = _el$174.nextSibling.nextSibling, _el$176 = _el$175.nextSibling.nextSibling;
571
+ _el$176.nextSibling;
572
+ insert(_el$167, label);
573
+ insert(_el$166, () => conflict.id, _el$174);
574
+ insert(_el$166, () => props.formatHotkeySequence(conflict.sequence), _el$175);
575
+ insert(_el$166, () => conflict.options.eventType ?? "keydown", _el$176);
576
+ insert(_el$166, () => props.getTargetDescription(conflict.target), null);
577
+ effect(() => className(_el$166, styles()[itemStyle()]));
578
+ return _el$166;
501
579
  })();
502
580
  }
503
581
  }), null);
504
- insert(_el$125, createComponent(For, {
582
+ insert(_el$146, createComponent(For, {
505
583
  get each() {
506
584
  return scopeConflicts();
507
585
  },
508
586
  children: (conflict) => (() => {
509
- var _el$153 = _tmpl$9(), _el$161 = _el$153.firstChild.nextSibling.nextSibling, _el$162 = _el$161.nextSibling.nextSibling, _el$163 = _el$162.nextSibling.nextSibling;
510
- _el$163.nextSibling;
511
- insert(_el$153, () => conflict.id, _el$161);
512
- insert(_el$153, () => props.formatHotkeySequence(conflict.sequence), _el$162);
513
- insert(_el$153, () => conflict.options.eventType ?? "keydown", _el$163);
514
- insert(_el$153, () => props.getTargetDescription(conflict.target), null);
515
- effect(() => className(_el$153, styles().conflictItemScope));
516
- return _el$153;
587
+ var _el$177 = _tmpl$9(), _el$185 = _el$177.firstChild.nextSibling.nextSibling, _el$186 = _el$185.nextSibling.nextSibling, _el$187 = _el$186.nextSibling.nextSibling;
588
+ _el$187.nextSibling;
589
+ insert(_el$177, () => conflict.id, _el$185);
590
+ insert(_el$177, () => props.formatHotkeySequence(conflict.sequence), _el$186);
591
+ insert(_el$177, () => conflict.options.eventType ?? "keydown", _el$187);
592
+ insert(_el$177, () => props.getTargetDescription(conflict.target), null);
593
+ effect(() => className(_el$177, styles().conflictItemScope));
594
+ return _el$177;
517
595
  })()
518
596
  }), null);
519
597
  effect((_p$) => {
520
- var _v$59 = styles().detailSection, _v$60 = styles().detailSectionHeader, _v$61 = styles().conflictList;
521
- _v$59 !== _p$.e && className(_el$120, _p$.e = _v$59);
522
- _v$60 !== _p$.t && className(_el$121, _p$.t = _v$60);
523
- _v$61 !== _p$.a && className(_el$125, _p$.a = _v$61);
598
+ var _v$70 = styles().detailSection, _v$71 = styles().detailSectionHeader, _v$72 = styles().conflictList;
599
+ _v$70 !== _p$.e && className(_el$141, _p$.e = _v$70);
600
+ _v$71 !== _p$.t && className(_el$142, _p$.t = _v$71);
601
+ _v$72 !== _p$.a && className(_el$146, _p$.a = _v$72);
524
602
  return _p$;
525
603
  }, {
526
604
  e: void 0,
527
605
  t: void 0,
528
606
  a: void 0
529
607
  });
530
- return _el$120;
608
+ return _el$141;
531
609
  }
532
610
  }), null);
533
611
  effect((_p$) => {
534
- var _v$62 = styles().detailsGrid, _v$63 = styles().detailSection, _v$64 = styles().detailSectionHeader, _v$65 = styles().keyBreakdown, _v$66 = styles().keyBreakdownSubHeader, _v$67 = styles().detailSection, _v$68 = styles().detailSectionHeader, _v$69 = styles().detailSection, _v$70 = styles().detailSectionHeader, _v$71 = styles().optionRow, _v$72 = styles().optionLabel, _v$73 = liveReg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$74 = styles().optionRow, _v$75 = styles().optionLabel, _v$76 = styles().optionValue, _v$77 = styles().optionRow, _v$78 = styles().optionLabel, _v$79 = styles().optionValue, _v$80 = styles().optionRow, _v$81 = styles().optionLabel, _v$82 = liveReg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$83 = styles().optionRow, _v$84 = styles().optionLabel, _v$85 = liveReg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$86 = styles().optionRow, _v$87 = styles().optionLabel, _v$88 = liveReg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$89 = styles().optionRow, _v$90 = styles().optionLabel, _v$91 = styles().optionValue;
535
- _v$62 !== _p$.e && className(_el$88, _p$.e = _v$62);
536
- _v$63 !== _p$.t && className(_el$89, _p$.t = _v$63);
537
- _v$64 !== _p$.a && className(_el$90, _p$.a = _v$64);
538
- _v$65 !== _p$.o && className(_el$91, _p$.o = _v$65);
539
- _v$66 !== _p$.i && className(_el$92, _p$.i = _v$66);
540
- _v$67 !== _p$.n && className(_el$93, _p$.n = _v$67);
541
- _v$68 !== _p$.s && className(_el$94, _p$.s = _v$68);
542
- _v$69 !== _p$.h && className(_el$95, _p$.h = _v$69);
543
- _v$70 !== _p$.r && className(_el$96, _p$.r = _v$70);
544
- _v$71 !== _p$.d && className(_el$98, _p$.d = _v$71);
545
- _v$72 !== _p$.l && className(_el$99, _p$.l = _v$72);
546
- _v$73 !== _p$.u && className(_el$100, _p$.u = _v$73);
547
- _v$74 !== _p$.c && className(_el$101, _p$.c = _v$74);
548
- _v$75 !== _p$.w && className(_el$102, _p$.w = _v$75);
549
- _v$76 !== _p$.m && className(_el$103, _p$.m = _v$76);
550
- _v$77 !== _p$.f && className(_el$104, _p$.f = _v$77);
551
- _v$78 !== _p$.y && className(_el$105, _p$.y = _v$78);
552
- _v$79 !== _p$.g && className(_el$106, _p$.g = _v$79);
553
- _v$80 !== _p$.p && className(_el$108, _p$.p = _v$80);
554
- _v$81 !== _p$.b && className(_el$109, _p$.b = _v$81);
555
- _v$82 !== _p$.T && className(_el$110, _p$.T = _v$82);
556
- _v$83 !== _p$.A && className(_el$111, _p$.A = _v$83);
557
- _v$84 !== _p$.O && className(_el$112, _p$.O = _v$84);
558
- _v$85 !== _p$.I && className(_el$113, _p$.I = _v$85);
559
- _v$86 !== _p$.S && className(_el$114, _p$.S = _v$86);
560
- _v$87 !== _p$.W && className(_el$115, _p$.W = _v$87);
561
- _v$88 !== _p$.C && className(_el$116, _p$.C = _v$88);
562
- _v$89 !== _p$.B && className(_el$117, _p$.B = _v$89);
563
- _v$90 !== _p$.v && className(_el$118, _p$.v = _v$90);
564
- _v$91 !== _p$.k && className(_el$119, _p$.k = _v$91);
612
+ var _v$73 = styles().detailsGrid, _v$74 = styles().detailSection, _v$75 = styles().detailSectionHeader, _v$76 = styles().keyBreakdown, _v$77 = styles().keyBreakdownSubHeader, _v$78 = styles().detailSection, _v$79 = styles().detailSectionHeader, _v$80 = styles().detailSection, _v$81 = styles().detailSectionHeader, _v$82 = styles().optionRow, _v$83 = styles().optionLabel, _v$84 = styles().optionValue, _v$85 = styles().optionRow, _v$86 = styles().optionLabel, _v$87 = styles().optionValue, _v$88 = styles().detailSection, _v$89 = styles().detailSectionHeader, _v$90 = styles().optionRow, _v$91 = styles().optionLabel, _v$92 = liveReg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$93 = styles().optionRow, _v$94 = styles().optionLabel, _v$95 = styles().optionValue, _v$96 = styles().optionRow, _v$97 = styles().optionLabel, _v$98 = styles().optionValue, _v$99 = styles().optionRow, _v$100 = styles().optionLabel, _v$101 = liveReg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$102 = styles().optionRow, _v$103 = styles().optionLabel, _v$104 = liveReg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$105 = styles().optionRow, _v$106 = styles().optionLabel, _v$107 = liveReg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$108 = styles().optionRow, _v$109 = styles().optionLabel, _v$110 = styles().optionValue;
613
+ _v$73 !== _p$.e && className(_el$100, _p$.e = _v$73);
614
+ _v$74 !== _p$.t && className(_el$101, _p$.t = _v$74);
615
+ _v$75 !== _p$.a && className(_el$102, _p$.a = _v$75);
616
+ _v$76 !== _p$.o && className(_el$103, _p$.o = _v$76);
617
+ _v$77 !== _p$.i && className(_el$104, _p$.i = _v$77);
618
+ _v$78 !== _p$.n && className(_el$105, _p$.n = _v$78);
619
+ _v$79 !== _p$.s && className(_el$106, _p$.s = _v$79);
620
+ _v$80 !== _p$.h && className(_el$107, _p$.h = _v$80);
621
+ _v$81 !== _p$.r && className(_el$108, _p$.r = _v$81);
622
+ _v$82 !== _p$.d && className(_el$110, _p$.d = _v$82);
623
+ _v$83 !== _p$.l && className(_el$111, _p$.l = _v$83);
624
+ _v$84 !== _p$.u && className(_el$112, _p$.u = _v$84);
625
+ _v$85 !== _p$.c && className(_el$113, _p$.c = _v$85);
626
+ _v$86 !== _p$.w && className(_el$114, _p$.w = _v$86);
627
+ _v$87 !== _p$.m && className(_el$115, _p$.m = _v$87);
628
+ _v$88 !== _p$.f && className(_el$116, _p$.f = _v$88);
629
+ _v$89 !== _p$.y && className(_el$117, _p$.y = _v$89);
630
+ _v$90 !== _p$.g && className(_el$119, _p$.g = _v$90);
631
+ _v$91 !== _p$.p && className(_el$120, _p$.p = _v$91);
632
+ _v$92 !== _p$.b && className(_el$121, _p$.b = _v$92);
633
+ _v$93 !== _p$.T && className(_el$122, _p$.T = _v$93);
634
+ _v$94 !== _p$.A && className(_el$123, _p$.A = _v$94);
635
+ _v$95 !== _p$.O && className(_el$124, _p$.O = _v$95);
636
+ _v$96 !== _p$.I && className(_el$125, _p$.I = _v$96);
637
+ _v$97 !== _p$.S && className(_el$126, _p$.S = _v$97);
638
+ _v$98 !== _p$.W && className(_el$127, _p$.W = _v$98);
639
+ _v$99 !== _p$.C && className(_el$129, _p$.C = _v$99);
640
+ _v$100 !== _p$.B && className(_el$130, _p$.B = _v$100);
641
+ _v$101 !== _p$.v && className(_el$131, _p$.v = _v$101);
642
+ _v$102 !== _p$.k && className(_el$132, _p$.k = _v$102);
643
+ _v$103 !== _p$.x && className(_el$133, _p$.x = _v$103);
644
+ _v$104 !== _p$.j && className(_el$134, _p$.j = _v$104);
645
+ _v$105 !== _p$.q && className(_el$135, _p$.q = _v$105);
646
+ _v$106 !== _p$.z && className(_el$136, _p$.z = _v$106);
647
+ _v$107 !== _p$.P && className(_el$137, _p$.P = _v$107);
648
+ _v$108 !== _p$.H && className(_el$138, _p$.H = _v$108);
649
+ _v$109 !== _p$.F && className(_el$139, _p$.F = _v$109);
650
+ _v$110 !== _p$.M && className(_el$140, _p$.M = _v$110);
565
651
  return _p$;
566
652
  }, {
567
653
  e: void 0,
@@ -593,25 +679,33 @@ function SequenceDetails(props) {
593
679
  C: void 0,
594
680
  B: void 0,
595
681
  v: void 0,
596
- k: void 0
682
+ k: void 0,
683
+ x: void 0,
684
+ j: void 0,
685
+ q: void 0,
686
+ z: void 0,
687
+ P: void 0,
688
+ H: void 0,
689
+ F: void 0,
690
+ M: void 0
597
691
  });
598
- return _el$88;
692
+ return _el$100;
599
693
  })()];
600
694
  }
601
695
  function DetailsPanel(props) {
602
696
  const styles = useStyles();
603
697
  const state = useHotkeysDevtoolsState();
604
698
  return (() => {
605
- var _el$164 = _tmpl$();
606
- insert(_el$164, createComponent(Show, {
699
+ var _el$188 = _tmpl$();
700
+ insert(_el$188, createComponent(Show, {
607
701
  get when() {
608
702
  return props.selectedRegistration();
609
703
  },
610
704
  get fallback() {
611
705
  return (() => {
612
- var _el$165 = _tmpl$13();
613
- effect(() => className(_el$165, styles().noSelection));
614
- return _el$165;
706
+ var _el$189 = _tmpl$13();
707
+ effect(() => className(_el$189, styles().noSelection));
708
+ return _el$189;
615
709
  })();
616
710
  },
617
711
  children: (reg) => createComponent(Show, {
@@ -651,8 +745,8 @@ function DetailsPanel(props) {
651
745
  }
652
746
  })
653
747
  }));
654
- effect(() => className(_el$164, styles().stateDetails));
655
- return _el$164;
748
+ effect(() => className(_el$188, styles().stateDetails));
749
+ return _el$188;
656
750
  })();
657
751
  }
658
752