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