@tanstack/hotkeys-devtools 0.2.0 → 0.3.0

package/dist/components/DetailsPanel.js

@@ -3,10 +3,16 @@ import { useStyles } from "../styles/use-styles.js";
 import { ActionButtons } from "./ActionButtons.js";
 import { For, Show, createMemo } from "solid-js";
 import { className, createComponent, effect, insert, template } from "solid-js/web";
-import { formatForDisplay } from "@tanstack/hotkeys";
+import { formatForDisplay, formatHotkeySequence } from "@tanstack/hotkeys";
 
 //#region src/components/DetailsPanel.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div>Select a hotkey from the list to view its details`), _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>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 `);
+var _tmpl$ = /* @__PURE__ */ template(`<div><div></div><div><div>ID</div><div></div><div>Raw</div><div></div><div>Target</div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><div>Conflicts (<!>)</div><div>`), _tmpl$3 = /* @__PURE__ */ template(`<div><div><div>Key Breakdown</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$4 = /* @__PURE__ */ template(`<span>+`), _tmpl$5 = /* @__PURE__ */ template(`<span>`), _tmpl$6 = /* @__PURE__ */ template(`<div><span></span> <!>: <!> (<!>) on `), _tmpl$7 = /* @__PURE__ */ template(`<div><span>scope</span> <!>: <!> (<!>) on `), _tmpl$8 = /* @__PURE__ */ template(`<div><div></div><div><div>ID</div><div></div><div>Sequence</div><div></div><div>Target</div><div>`), _tmpl$9 = /* @__PURE__ */ template(`<div><div><div>Key Breakdown</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>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$0 = /* @__PURE__ */ template(`<span>→`), _tmpl$1 = /* @__PURE__ */ template(`<div>`), _tmpl$10 = /* @__PURE__ */ template(`<div>Select a hotkey or sequence from the list to view its details`);
+function sequenceKey(sequence) {
+	return sequence.join("|");
+}
+function isSequenceRegistration(reg) {
+	return "sequence" in reg && Array.isArray(reg.sequence);
+}
 function getTargetDescription(target) {
 	if (typeof document !== "undefined" && target === document) return "document";
 	if (typeof window !== "undefined" && target === window) return "window";
@@ -19,6 +25,12 @@ function findTargetConflicts(registration, all) {
 function findScopeConflicts(registration, all) {
 	return all.filter((other) => other.id !== registration.id && other.hotkey === registration.hotkey && other.options.eventType === registration.options.eventType && other.target !== registration.target);
 }
+function findSequenceTargetConflicts(registration, all) {
+	return all.filter((other) => other.id !== registration.id && sequenceKey(other.sequence) === sequenceKey(registration.sequence) && other.options.eventType === registration.options.eventType && other.target === registration.target);
+}
+function findSequenceScopeConflicts(registration, all) {
+	return all.filter((other) => other.id !== registration.id && sequenceKey(other.sequence) === sequenceKey(registration.sequence) && other.options.eventType === registration.options.eventType && other.target !== registration.target);
+}
 function getConflictItemStyle(behavior, isSameTarget) {
 	if (!isSameTarget) return "conflictItemScope";
 	if (behavior === "allow") return "conflictItemAllow";
@@ -32,234 +44,465 @@ function getConflictLabel(behavior, isSameTarget) {
 	if (behavior === "replace") return "replaced";
 	return "warning";
 }
+function HotkeyDetails(props) {
+	const reg = () => props.registration;
+	const parsed = () => reg().parsedHotkey;
+	const targetConflicts = createMemo(() => props.findTargetConflicts(reg(), props.state.registrations()));
+	const scopeConflicts = createMemo(() => props.findScopeConflicts(reg(), props.state.registrations()));
+	const allConflicts = createMemo(() => [...targetConflicts(), ...scopeConflicts()]);
+	const conflictBehavior = () => reg().options.conflictBehavior ?? "warn";
+	const keyParts = createMemo(() => {
+		const parts = [];
+		const p = parsed();
+		if (p.ctrl) parts.push("Ctrl");
+		if (p.shift) parts.push("Shift");
+		if (p.alt) parts.push("Alt");
+		if (p.meta) parts.push("Meta");
+		parts.push(p.key);
+		return parts;
+	});
+	const styles = props.styles;
+	return [(() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling;
+		insert(_el$2, () => props.formatForDisplay(reg().hotkey));
+		insert(_el$5, () => reg().id);
+		insert(_el$7, () => reg().hotkey);
+		insert(_el$9, () => props.getTargetDescription(reg().target));
+		effect((_p$) => {
+			var _v$ = styles().stateHeader, _v$2 = styles().stateTitle, _v$3 = styles().infoGrid, _v$4 = styles().infoLabel, _v$5 = styles().infoValueMono, _v$6 = styles().infoLabel, _v$7 = styles().infoValueMono, _v$8 = styles().infoLabel, _v$9 = styles().infoValueMono;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+			_v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+			_v$6 !== _p$.n && className(_el$6, _p$.n = _v$6);
+			_v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
+			_v$8 !== _p$.h && className(_el$8, _p$.h = _v$8);
+			_v$9 !== _p$.r && className(_el$9, _p$.r = _v$9);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0
+		});
+		return _el$;
+	})(), (() => {
+		var _el$0 = _tmpl$3(), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$1.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$14.firstChild, _el$17 = _el$15.nextSibling.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$17.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$21.nextSibling, _el$23 = _el$20.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$26 = _el$23.nextSibling, _el$27 = _el$26.firstChild, _el$28 = _el$27.nextSibling, _el$29 = _el$26.nextSibling, _el$30 = _el$29.firstChild, _el$31 = _el$30.nextSibling, _el$32 = _el$29.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$33.nextSibling, _el$35 = _el$32.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$36.nextSibling, _el$38 = _el$35.nextSibling, _el$39 = _el$38.firstChild, _el$40 = _el$39.nextSibling;
+		insert(_el$11, createComponent(For, {
+			get each() {
+				return keyParts();
+			},
+			children: (part, i) => [createComponent(Show, {
+				get when() {
+					return i() > 0;
+				},
+				get children() {
+					var _el$47 = _tmpl$4();
+					effect(() => className(_el$47, styles().keyBreakdownPlus));
+					return _el$47;
+				}
+			}), (() => {
+				var _el$48 = _tmpl$5();
+				insert(_el$48, part);
+				effect(() => className(_el$48, styles().keyCapLarge));
+				return _el$48;
+			})()]
+		}));
+		insert(_el$12, createComponent(ActionButtons, { get registration() {
+			return reg();
+		} }), null);
+		insert(_el$19, () => String(reg().options.enabled !== false));
+		insert(_el$22, () => reg().options.eventType ?? "keydown");
+		insert(_el$25, () => String(!!reg().options.preventDefault));
+		insert(_el$28, () => String(!!reg().options.stopPropagation));
+		insert(_el$31, () => String(reg().options.ignoreInputs !== false));
+		insert(_el$34, () => String(!!reg().options.requireReset));
+		insert(_el$37, conflictBehavior);
+		insert(_el$40, () => String(reg().hasFired));
+		insert(_el$0, createComponent(Show, {
+			get when() {
+				return allConflicts().length > 0;
+			},
+			get children() {
+				var _el$41 = _tmpl$2(), _el$42 = _el$41.firstChild, _el$45 = _el$42.firstChild.nextSibling;
+				_el$45.nextSibling;
+				var _el$46 = _el$42.nextSibling;
+				insert(_el$42, () => allConflicts().length, _el$45);
+				insert(_el$46, createComponent(For, {
+					get each() {
+						return targetConflicts();
+					},
+					children: (conflict) => {
+						const itemStyle = () => props.getConflictItemStyle(conflictBehavior(), true);
+						const label = () => props.getConflictLabel(conflictBehavior(), true);
+						return (() => {
+							var _el$49 = _tmpl$6(), _el$50 = _el$49.firstChild, _el$57 = _el$50.nextSibling.nextSibling, _el$58 = _el$57.nextSibling.nextSibling, _el$59 = _el$58.nextSibling.nextSibling;
+							_el$59.nextSibling;
+							insert(_el$50, label);
+							insert(_el$49, () => conflict.id, _el$57);
+							insert(_el$49, () => props.formatForDisplay(conflict.hotkey), _el$58);
+							insert(_el$49, () => conflict.options.eventType ?? "keydown", _el$59);
+							insert(_el$49, () => props.getTargetDescription(conflict.target), null);
+							effect(() => className(_el$49, styles()[itemStyle()]));
+							return _el$49;
+						})();
+					}
+				}), null);
+				insert(_el$46, createComponent(For, {
+					get each() {
+						return scopeConflicts();
+					},
+					children: (conflict) => (() => {
+						var _el$60 = _tmpl$7(), _el$68 = _el$60.firstChild.nextSibling.nextSibling, _el$69 = _el$68.nextSibling.nextSibling, _el$70 = _el$69.nextSibling.nextSibling;
+						_el$70.nextSibling;
+						insert(_el$60, () => conflict.id, _el$68);
+						insert(_el$60, () => props.formatForDisplay(conflict.hotkey), _el$69);
+						insert(_el$60, () => conflict.options.eventType ?? "keydown", _el$70);
+						insert(_el$60, () => props.getTargetDescription(conflict.target), null);
+						effect(() => className(_el$60, styles().conflictItemScope));
+						return _el$60;
+					})()
+				}), null);
+				effect((_p$) => {
+					var _v$0 = styles().detailSection, _v$1 = styles().detailSectionHeader, _v$10 = styles().conflictList;
+					_v$0 !== _p$.e && className(_el$41, _p$.e = _v$0);
+					_v$1 !== _p$.t && className(_el$42, _p$.t = _v$1);
+					_v$10 !== _p$.a && className(_el$46, _p$.a = _v$10);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$41;
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$11 = styles().detailsGrid, _v$12 = styles().detailSection, _v$13 = styles().detailSectionHeader, _v$14 = styles().keyBreakdown, _v$15 = styles().detailSection, _v$16 = styles().detailSectionHeader, _v$17 = styles().detailSection, _v$18 = styles().detailSectionHeader, _v$19 = styles().optionRow, _v$20 = styles().optionLabel, _v$21 = reg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$22 = styles().optionRow, _v$23 = styles().optionLabel, _v$24 = styles().optionValue, _v$25 = styles().optionRow, _v$26 = styles().optionLabel, _v$27 = reg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$28 = styles().optionRow, _v$29 = styles().optionLabel, _v$30 = reg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$31 = styles().optionRow, _v$32 = styles().optionLabel, _v$33 = reg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$34 = styles().optionRow, _v$35 = styles().optionLabel, _v$36 = reg().options.requireReset ? 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().hasFired ? styles().optionValueTrue : styles().optionValueFalse;
+			_v$11 !== _p$.e && className(_el$0, _p$.e = _v$11);
+			_v$12 !== _p$.t && className(_el$1, _p$.t = _v$12);
+			_v$13 !== _p$.a && className(_el$10, _p$.a = _v$13);
+			_v$14 !== _p$.o && className(_el$11, _p$.o = _v$14);
+			_v$15 !== _p$.i && className(_el$12, _p$.i = _v$15);
+			_v$16 !== _p$.n && className(_el$13, _p$.n = _v$16);
+			_v$17 !== _p$.s && className(_el$14, _p$.s = _v$17);
+			_v$18 !== _p$.h && className(_el$15, _p$.h = _v$18);
+			_v$19 !== _p$.r && className(_el$17, _p$.r = _v$19);
+			_v$20 !== _p$.d && className(_el$18, _p$.d = _v$20);
+			_v$21 !== _p$.l && className(_el$19, _p$.l = _v$21);
+			_v$22 !== _p$.u && className(_el$20, _p$.u = _v$22);
+			_v$23 !== _p$.c && className(_el$21, _p$.c = _v$23);
+			_v$24 !== _p$.w && className(_el$22, _p$.w = _v$24);
+			_v$25 !== _p$.m && className(_el$23, _p$.m = _v$25);
+			_v$26 !== _p$.f && className(_el$24, _p$.f = _v$26);
+			_v$27 !== _p$.y && className(_el$25, _p$.y = _v$27);
+			_v$28 !== _p$.g && className(_el$26, _p$.g = _v$28);
+			_v$29 !== _p$.p && className(_el$27, _p$.p = _v$29);
+			_v$30 !== _p$.b && className(_el$28, _p$.b = _v$30);
+			_v$31 !== _p$.T && className(_el$29, _p$.T = _v$31);
+			_v$32 !== _p$.A && className(_el$30, _p$.A = _v$32);
+			_v$33 !== _p$.O && className(_el$31, _p$.O = _v$33);
+			_v$34 !== _p$.I && className(_el$32, _p$.I = _v$34);
+			_v$35 !== _p$.S && className(_el$33, _p$.S = _v$35);
+			_v$36 !== _p$.W && className(_el$34, _p$.W = _v$36);
+			_v$37 !== _p$.C && className(_el$35, _p$.C = _v$37);
+			_v$38 !== _p$.B && className(_el$36, _p$.B = _v$38);
+			_v$39 !== _p$.v && className(_el$37, _p$.v = _v$39);
+			_v$40 !== _p$.k && className(_el$38, _p$.k = _v$40);
+			_v$41 !== _p$.x && className(_el$39, _p$.x = _v$41);
+			_v$42 !== _p$.j && className(_el$40, _p$.j = _v$42);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0,
+			d: void 0,
+			l: void 0,
+			u: void 0,
+			c: void 0,
+			w: void 0,
+			m: void 0,
+			f: void 0,
+			y: void 0,
+			g: void 0,
+			p: void 0,
+			b: void 0,
+			T: void 0,
+			A: void 0,
+			O: void 0,
+			I: void 0,
+			S: void 0,
+			W: void 0,
+			C: void 0,
+			B: void 0,
+			v: void 0,
+			k: void 0,
+			x: void 0,
+			j: void 0
+		});
+		return _el$0;
+	})()];
+}
+function SequenceDetails(props) {
+	const reg = () => props.registration;
+	const targetConflicts = createMemo(() => props.findSequenceTargetConflicts(reg(), props.state.sequenceRegistrations()));
+	const scopeConflicts = createMemo(() => props.findSequenceScopeConflicts(reg(), props.state.sequenceRegistrations()));
+	const allConflicts = createMemo(() => [...targetConflicts(), ...scopeConflicts()]);
+	const conflictBehavior = () => reg().options.conflictBehavior ?? "warn";
+	const styles = props.styles;
+	return [(() => {
+		var _el$71 = _tmpl$8(), _el$72 = _el$71.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling, _el$79 = _el$78.nextSibling;
+		insert(_el$72, () => props.formatHotkeySequence(reg().sequence));
+		insert(_el$75, () => reg().id);
+		insert(_el$77, () => props.formatHotkeySequence(reg().sequence));
+		insert(_el$79, () => props.getTargetDescription(reg().target));
+		effect((_p$) => {
+			var _v$43 = styles().stateHeader, _v$44 = styles().stateTitle, _v$45 = styles().infoGrid, _v$46 = styles().infoLabel, _v$47 = styles().infoValueMono, _v$48 = styles().infoLabel, _v$49 = styles().infoValueMono, _v$50 = styles().infoLabel, _v$51 = styles().infoValueMono;
+			_v$43 !== _p$.e && className(_el$71, _p$.e = _v$43);
+			_v$44 !== _p$.t && className(_el$72, _p$.t = _v$44);
+			_v$45 !== _p$.a && className(_el$73, _p$.a = _v$45);
+			_v$46 !== _p$.o && className(_el$74, _p$.o = _v$46);
+			_v$47 !== _p$.i && className(_el$75, _p$.i = _v$47);
+			_v$48 !== _p$.n && className(_el$76, _p$.n = _v$48);
+			_v$49 !== _p$.s && className(_el$77, _p$.s = _v$49);
+			_v$50 !== _p$.h && className(_el$78, _p$.h = _v$50);
+			_v$51 !== _p$.r && className(_el$79, _p$.r = _v$51);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0
+		});
+		return _el$71;
+	})(), (() => {
+		var _el$80 = _tmpl$9(), _el$81 = _el$80.firstChild, _el$82 = _el$81.firstChild, _el$83 = _el$82.nextSibling, _el$84 = _el$81.nextSibling, _el$85 = _el$84.firstChild, _el$86 = _el$84.nextSibling, _el$87 = _el$86.firstChild, _el$89 = _el$87.nextSibling.firstChild, _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling, _el$92 = _el$89.nextSibling, _el$93 = _el$92.firstChild, _el$94 = _el$93.nextSibling, _el$95 = _el$92.nextSibling, _el$96 = _el$95.firstChild, _el$97 = _el$96.nextSibling, _el$98 = _el$97.firstChild, _el$99 = _el$95.nextSibling, _el$100 = _el$99.firstChild, _el$101 = _el$100.nextSibling, _el$102 = _el$99.nextSibling, _el$103 = _el$102.firstChild, _el$104 = _el$103.nextSibling, _el$105 = _el$102.nextSibling, _el$106 = _el$105.firstChild, _el$107 = _el$106.nextSibling, _el$108 = _el$105.nextSibling, _el$109 = _el$108.firstChild, _el$110 = _el$109.nextSibling;
+		insert(_el$83, createComponent(For, {
+			get each() {
+				return reg().sequence;
+			},
+			children: (step, i) => [createComponent(Show, {
+				get when() {
+					return i() > 0;
+				},
+				get children() {
+					var _el$117 = _tmpl$0();
+					effect(() => className(_el$117, styles().keyBreakdownPlus));
+					return _el$117;
+				}
+			}), (() => {
+				var _el$118 = _tmpl$5();
+				insert(_el$118, () => props.formatForDisplay(step));
+				effect(() => className(_el$118, styles().keyCapLarge));
+				return _el$118;
+			})()]
+		}));
+		insert(_el$84, createComponent(ActionButtons, { get registration() {
+			return reg();
+		} }), null);
+		insert(_el$91, () => String(reg().options.enabled !== false));
+		insert(_el$94, () => reg().options.eventType ?? "keydown");
+		insert(_el$97, () => reg().options.timeout ?? 1e3, _el$98);
+		insert(_el$101, () => String(!!reg().options.preventDefault));
+		insert(_el$104, () => String(!!reg().options.stopPropagation));
+		insert(_el$107, () => String(reg().options.ignoreInputs !== false));
+		insert(_el$110, conflictBehavior);
+		insert(_el$80, createComponent(Show, {
+			get when() {
+				return allConflicts().length > 0;
+			},
+			get children() {
+				var _el$111 = _tmpl$2(), _el$112 = _el$111.firstChild, _el$115 = _el$112.firstChild.nextSibling;
+				_el$115.nextSibling;
+				var _el$116 = _el$112.nextSibling;
+				insert(_el$112, () => allConflicts().length, _el$115);
+				insert(_el$116, createComponent(For, {
+					get each() {
+						return targetConflicts();
+					},
+					children: (conflict) => {
+						const itemStyle = () => props.getConflictItemStyle(conflictBehavior(), true);
+						const label = () => props.getConflictLabel(conflictBehavior(), true);
+						return (() => {
+							var _el$119 = _tmpl$6(), _el$120 = _el$119.firstChild, _el$127 = _el$120.nextSibling.nextSibling, _el$128 = _el$127.nextSibling.nextSibling, _el$129 = _el$128.nextSibling.nextSibling;
+							_el$129.nextSibling;
+							insert(_el$120, label);
+							insert(_el$119, () => conflict.id, _el$127);
+							insert(_el$119, () => props.formatHotkeySequence(conflict.sequence), _el$128);
+							insert(_el$119, () => conflict.options.eventType ?? "keydown", _el$129);
+							insert(_el$119, () => props.getTargetDescription(conflict.target), null);
+							effect(() => className(_el$119, styles()[itemStyle()]));
+							return _el$119;
+						})();
+					}
+				}), null);
+				insert(_el$116, createComponent(For, {
+					get each() {
+						return scopeConflicts();
+					},
+					children: (conflict) => (() => {
+						var _el$130 = _tmpl$7(), _el$138 = _el$130.firstChild.nextSibling.nextSibling, _el$139 = _el$138.nextSibling.nextSibling, _el$140 = _el$139.nextSibling.nextSibling;
+						_el$140.nextSibling;
+						insert(_el$130, () => conflict.id, _el$138);
+						insert(_el$130, () => props.formatHotkeySequence(conflict.sequence), _el$139);
+						insert(_el$130, () => conflict.options.eventType ?? "keydown", _el$140);
+						insert(_el$130, () => props.getTargetDescription(conflict.target), null);
+						effect(() => className(_el$130, styles().conflictItemScope));
+						return _el$130;
+					})()
+				}), null);
+				effect((_p$) => {
+					var _v$52 = styles().detailSection, _v$53 = styles().detailSectionHeader, _v$54 = styles().conflictList;
+					_v$52 !== _p$.e && className(_el$111, _p$.e = _v$52);
+					_v$53 !== _p$.t && className(_el$112, _p$.t = _v$53);
+					_v$54 !== _p$.a && className(_el$116, _p$.a = _v$54);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$111;
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$55 = styles().detailsGrid, _v$56 = styles().detailSection, _v$57 = styles().detailSectionHeader, _v$58 = styles().keyBreakdown, _v$59 = styles().detailSection, _v$60 = styles().detailSectionHeader, _v$61 = styles().detailSection, _v$62 = styles().detailSectionHeader, _v$63 = styles().optionRow, _v$64 = styles().optionLabel, _v$65 = reg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$66 = styles().optionRow, _v$67 = styles().optionLabel, _v$68 = styles().optionValue, _v$69 = styles().optionRow, _v$70 = styles().optionLabel, _v$71 = styles().optionValue, _v$72 = styles().optionRow, _v$73 = styles().optionLabel, _v$74 = reg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$75 = styles().optionRow, _v$76 = styles().optionLabel, _v$77 = reg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$78 = styles().optionRow, _v$79 = styles().optionLabel, _v$80 = reg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$81 = styles().optionRow, _v$82 = styles().optionLabel, _v$83 = styles().optionValue;
+			_v$55 !== _p$.e && className(_el$80, _p$.e = _v$55);
+			_v$56 !== _p$.t && className(_el$81, _p$.t = _v$56);
+			_v$57 !== _p$.a && className(_el$82, _p$.a = _v$57);
+			_v$58 !== _p$.o && className(_el$83, _p$.o = _v$58);
+			_v$59 !== _p$.i && className(_el$84, _p$.i = _v$59);
+			_v$60 !== _p$.n && className(_el$85, _p$.n = _v$60);
+			_v$61 !== _p$.s && className(_el$86, _p$.s = _v$61);
+			_v$62 !== _p$.h && className(_el$87, _p$.h = _v$62);
+			_v$63 !== _p$.r && className(_el$89, _p$.r = _v$63);
+			_v$64 !== _p$.d && className(_el$90, _p$.d = _v$64);
+			_v$65 !== _p$.l && className(_el$91, _p$.l = _v$65);
+			_v$66 !== _p$.u && className(_el$92, _p$.u = _v$66);
+			_v$67 !== _p$.c && className(_el$93, _p$.c = _v$67);
+			_v$68 !== _p$.w && className(_el$94, _p$.w = _v$68);
+			_v$69 !== _p$.m && className(_el$95, _p$.m = _v$69);
+			_v$70 !== _p$.f && className(_el$96, _p$.f = _v$70);
+			_v$71 !== _p$.y && className(_el$97, _p$.y = _v$71);
+			_v$72 !== _p$.g && className(_el$99, _p$.g = _v$72);
+			_v$73 !== _p$.p && className(_el$100, _p$.p = _v$73);
+			_v$74 !== _p$.b && className(_el$101, _p$.b = _v$74);
+			_v$75 !== _p$.T && className(_el$102, _p$.T = _v$75);
+			_v$76 !== _p$.A && className(_el$103, _p$.A = _v$76);
+			_v$77 !== _p$.O && className(_el$104, _p$.O = _v$77);
+			_v$78 !== _p$.I && className(_el$105, _p$.I = _v$78);
+			_v$79 !== _p$.S && className(_el$106, _p$.S = _v$79);
+			_v$80 !== _p$.W && className(_el$107, _p$.W = _v$80);
+			_v$81 !== _p$.C && className(_el$108, _p$.C = _v$81);
+			_v$82 !== _p$.B && className(_el$109, _p$.B = _v$82);
+			_v$83 !== _p$.v && className(_el$110, _p$.v = _v$83);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0,
+			d: void 0,
+			l: void 0,
+			u: void 0,
+			c: void 0,
+			w: void 0,
+			m: void 0,
+			f: void 0,
+			y: void 0,
+			g: void 0,
+			p: void 0,
+			b: void 0,
+			T: void 0,
+			A: void 0,
+			O: void 0,
+			I: void 0,
+			S: void 0,
+			W: void 0,
+			C: void 0,
+			B: void 0,
+			v: void 0
+		});
+		return _el$80;
+	})()];
+}
 function DetailsPanel(props) {
 	const styles = useStyles();
 	const state = useHotkeysDevtoolsState();
 	return (() => {
-		var _el$ = _tmpl$();
-		insert(_el$, createComponent(Show, {
+		var _el$141 = _tmpl$1();
+		insert(_el$141, createComponent(Show, {
 			get when() {
 				return props.selectedRegistration();
 			},
 			get fallback() {
 				return (() => {
-					var _el$2 = _tmpl$2();
-					effect(() => className(_el$2, styles().noSelection));
-					return _el$2;
+					var _el$142 = _tmpl$10();
+					effect(() => className(_el$142, styles().noSelection));
+					return _el$142;
 				})();
 			},
-			children: (reg) => {
-				const parsed = () => reg().parsedHotkey;
-				const targetConflicts = createMemo(() => findTargetConflicts(reg(), state.registrations()));
-				const scopeConflicts = createMemo(() => findScopeConflicts(reg(), state.registrations()));
-				const allConflicts = createMemo(() => [...targetConflicts(), ...scopeConflicts()]);
-				const conflictBehavior = () => reg().options.conflictBehavior ?? "warn";
-				const keyParts = createMemo(() => {
-					const parts = [];
-					const p = parsed();
-					if (p.ctrl) parts.push("Ctrl");
-					if (p.shift) parts.push("Shift");
-					if (p.alt) parts.push("Alt");
-					if (p.meta) parts.push("Meta");
-					parts.push(p.key);
-					return parts;
-				});
-				return [(() => {
-					var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.nextSibling;
-					insert(_el$4, () => formatForDisplay(reg().hotkey));
-					insert(_el$7, () => reg().id);
-					insert(_el$9, () => reg().hotkey);
-					insert(_el$1, () => getTargetDescription(reg().target));
-					effect((_p$) => {
-						var _v$ = styles().stateHeader, _v$2 = styles().stateTitle, _v$3 = styles().infoGrid, _v$4 = styles().infoLabel, _v$5 = styles().infoValueMono, _v$6 = styles().infoLabel, _v$7 = styles().infoValueMono, _v$8 = styles().infoLabel, _v$9 = styles().infoValueMono;
-						_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-						_v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
-						_v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
-						_v$4 !== _p$.o && className(_el$6, _p$.o = _v$4);
-						_v$5 !== _p$.i && className(_el$7, _p$.i = _v$5);
-						_v$6 !== _p$.n && className(_el$8, _p$.n = _v$6);
-						_v$7 !== _p$.s && className(_el$9, _p$.s = _v$7);
-						_v$8 !== _p$.h && className(_el$0, _p$.h = _v$8);
-						_v$9 !== _p$.r && className(_el$1, _p$.r = _v$9);
-						return _p$;
-					}, {
-						e: void 0,
-						t: void 0,
-						a: void 0,
-						o: void 0,
-						i: void 0,
-						n: void 0,
-						s: void 0,
-						h: void 0,
-						r: void 0
-					});
-					return _el$3;
-				})(), (() => {
-					var _el$10 = _tmpl$5(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$11.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.firstChild, _el$19 = _el$17.nextSibling.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$19.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$23.nextSibling, _el$25 = _el$22.nextSibling, _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;
-					insert(_el$13, createComponent(For, {
-						get each() {
-							return keyParts();
+			children: (reg) => createComponent(Show, {
+				get when() {
+					return isSequenceRegistration(reg());
+				},
+				get fallback() {
+					return createComponent(HotkeyDetails, {
+						get registration() {
+							return reg();
 						},
-						children: (part, i) => [createComponent(Show, {
-							get when() {
-								return i() > 0;
-							},
-							get children() {
-								var _el$49 = _tmpl$6();
-								effect(() => className(_el$49, styles().keyBreakdownPlus));
-								return _el$49;
-							}
-						}), (() => {
-							var _el$50 = _tmpl$7();
-							insert(_el$50, part);
-							effect(() => className(_el$50, styles().keyCapLarge));
-							return _el$50;
-						})()]
-					}));
-					insert(_el$14, createComponent(ActionButtons, { get registration() {
-						return reg();
-					} }), null);
-					insert(_el$21, () => String(reg().options.enabled !== false));
-					insert(_el$24, () => reg().options.eventType ?? "keydown");
-					insert(_el$27, () => String(!!reg().options.preventDefault));
-					insert(_el$30, () => String(!!reg().options.stopPropagation));
-					insert(_el$33, () => String(reg().options.ignoreInputs !== false));
-					insert(_el$36, () => String(!!reg().options.requireReset));
-					insert(_el$39, conflictBehavior);
-					insert(_el$42, () => String(reg().hasFired));
-					insert(_el$10, createComponent(Show, {
-						get when() {
-							return allConflicts().length > 0;
+						state,
+						getTargetDescription,
+						findTargetConflicts,
+						findScopeConflicts,
+						getConflictItemStyle,
+						getConflictLabel,
+						formatForDisplay,
+						styles
+					});
+				},
+				get children() {
+					return createComponent(SequenceDetails, {
+						get registration() {
+							return reg();
 						},
-						get children() {
-							var _el$43 = _tmpl$4(), _el$44 = _el$43.firstChild, _el$47 = _el$44.firstChild.nextSibling;
-							_el$47.nextSibling;
-							var _el$48 = _el$44.nextSibling;
-							insert(_el$44, () => allConflicts().length, _el$47);
-							insert(_el$48, createComponent(For, {
-								get each() {
-									return targetConflicts();
-								},
-								children: (conflict) => {
-									const itemStyle = () => getConflictItemStyle(conflictBehavior(), true);
-									const label = () => getConflictLabel(conflictBehavior(), true);
-									return (() => {
-										var _el$51 = _tmpl$8(), _el$52 = _el$51.firstChild, _el$59 = _el$52.nextSibling.nextSibling, _el$60 = _el$59.nextSibling.nextSibling, _el$61 = _el$60.nextSibling.nextSibling;
-										_el$61.nextSibling;
-										insert(_el$52, label);
-										insert(_el$51, () => conflict.id, _el$59);
-										insert(_el$51, () => formatForDisplay(conflict.hotkey), _el$60);
-										insert(_el$51, () => conflict.options.eventType ?? "keydown", _el$61);
-										insert(_el$51, () => getTargetDescription(conflict.target), null);
-										effect(() => className(_el$51, styles()[itemStyle()]));
-										return _el$51;
-									})();
-								}
-							}), null);
-							insert(_el$48, createComponent(For, {
-								get each() {
-									return scopeConflicts();
-								},
-								children: (conflict) => (() => {
-									var _el$62 = _tmpl$9(), _el$70 = _el$62.firstChild.nextSibling.nextSibling, _el$71 = _el$70.nextSibling.nextSibling, _el$72 = _el$71.nextSibling.nextSibling;
-									_el$72.nextSibling;
-									insert(_el$62, () => conflict.id, _el$70);
-									insert(_el$62, () => formatForDisplay(conflict.hotkey), _el$71);
-									insert(_el$62, () => conflict.options.eventType ?? "keydown", _el$72);
-									insert(_el$62, () => getTargetDescription(conflict.target), null);
-									effect(() => className(_el$62, styles().conflictItemScope));
-									return _el$62;
-								})()
-							}), null);
-							effect((_p$) => {
-								var _v$0 = styles().detailSection, _v$1 = styles().detailSectionHeader, _v$10 = styles().conflictList;
-								_v$0 !== _p$.e && className(_el$43, _p$.e = _v$0);
-								_v$1 !== _p$.t && className(_el$44, _p$.t = _v$1);
-								_v$10 !== _p$.a && className(_el$48, _p$.a = _v$10);
-								return _p$;
-							}, {
-								e: void 0,
-								t: void 0,
-								a: void 0
-							});
-							return _el$43;
-						}
-					}), null);
-					effect((_p$) => {
-						var _v$11 = styles().detailsGrid, _v$12 = styles().detailSection, _v$13 = styles().detailSectionHeader, _v$14 = styles().keyBreakdown, _v$15 = styles().detailSection, _v$16 = styles().detailSectionHeader, _v$17 = styles().detailSection, _v$18 = styles().detailSectionHeader, _v$19 = styles().optionRow, _v$20 = styles().optionLabel, _v$21 = reg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$22 = styles().optionRow, _v$23 = styles().optionLabel, _v$24 = styles().optionValue, _v$25 = styles().optionRow, _v$26 = styles().optionLabel, _v$27 = reg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$28 = styles().optionRow, _v$29 = styles().optionLabel, _v$30 = reg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$31 = styles().optionRow, _v$32 = styles().optionLabel, _v$33 = reg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$34 = styles().optionRow, _v$35 = styles().optionLabel, _v$36 = reg().options.requireReset ? 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().hasFired ? styles().optionValueTrue : styles().optionValueFalse;
-						_v$11 !== _p$.e && className(_el$10, _p$.e = _v$11);
-						_v$12 !== _p$.t && className(_el$11, _p$.t = _v$12);
-						_v$13 !== _p$.a && className(_el$12, _p$.a = _v$13);
-						_v$14 !== _p$.o && className(_el$13, _p$.o = _v$14);
-						_v$15 !== _p$.i && className(_el$14, _p$.i = _v$15);
-						_v$16 !== _p$.n && className(_el$15, _p$.n = _v$16);
-						_v$17 !== _p$.s && className(_el$16, _p$.s = _v$17);
-						_v$18 !== _p$.h && className(_el$17, _p$.h = _v$18);
-						_v$19 !== _p$.r && className(_el$19, _p$.r = _v$19);
-						_v$20 !== _p$.d && className(_el$20, _p$.d = _v$20);
-						_v$21 !== _p$.l && className(_el$21, _p$.l = _v$21);
-						_v$22 !== _p$.u && className(_el$22, _p$.u = _v$22);
-						_v$23 !== _p$.c && className(_el$23, _p$.c = _v$23);
-						_v$24 !== _p$.w && className(_el$24, _p$.w = _v$24);
-						_v$25 !== _p$.m && className(_el$25, _p$.m = _v$25);
-						_v$26 !== _p$.f && className(_el$26, _p$.f = _v$26);
-						_v$27 !== _p$.y && className(_el$27, _p$.y = _v$27);
-						_v$28 !== _p$.g && className(_el$28, _p$.g = _v$28);
-						_v$29 !== _p$.p && className(_el$29, _p$.p = _v$29);
-						_v$30 !== _p$.b && className(_el$30, _p$.b = _v$30);
-						_v$31 !== _p$.T && className(_el$31, _p$.T = _v$31);
-						_v$32 !== _p$.A && className(_el$32, _p$.A = _v$32);
-						_v$33 !== _p$.O && className(_el$33, _p$.O = _v$33);
-						_v$34 !== _p$.I && className(_el$34, _p$.I = _v$34);
-						_v$35 !== _p$.S && className(_el$35, _p$.S = _v$35);
-						_v$36 !== _p$.W && className(_el$36, _p$.W = _v$36);
-						_v$37 !== _p$.C && className(_el$37, _p$.C = _v$37);
-						_v$38 !== _p$.B && className(_el$38, _p$.B = _v$38);
-						_v$39 !== _p$.v && className(_el$39, _p$.v = _v$39);
-						_v$40 !== _p$.k && className(_el$40, _p$.k = _v$40);
-						_v$41 !== _p$.x && className(_el$41, _p$.x = _v$41);
-						_v$42 !== _p$.j && className(_el$42, _p$.j = _v$42);
-						return _p$;
-					}, {
-						e: void 0,
-						t: void 0,
-						a: void 0,
-						o: void 0,
-						i: void 0,
-						n: void 0,
-						s: void 0,
-						h: void 0,
-						r: void 0,
-						d: void 0,
-						l: void 0,
-						u: void 0,
-						c: void 0,
-						w: void 0,
-						m: void 0,
-						f: void 0,
-						y: void 0,
-						g: void 0,
-						p: void 0,
-						b: void 0,
-						T: void 0,
-						A: void 0,
-						O: void 0,
-						I: void 0,
-						S: void 0,
-						W: void 0,
-						C: void 0,
-						B: void 0,
-						v: void 0,
-						k: void 0,
-						x: void 0,
-						j: void 0
+						state,
+						getTargetDescription,
+						findSequenceTargetConflicts,
+						findSequenceScopeConflicts,
+						getConflictItemStyle,
+						getConflictLabel,
+						formatHotkeySequence,
+						formatForDisplay,
+						styles
 					});
-					return _el$10;
-				})()];
-			}
+				}
+			})
 		}));
-		effect(() => className(_el$, styles().stateDetails));
-		return _el$;
+		effect(() => className(_el$141, styles().stateDetails));
+		return _el$141;
 	})();
 }