@tanstack/hotkeys-devtools 0.4.4 → 0.7.0

package/dist/components/DetailsPanel.js

@@ -1,12 +1,56 @@
+import { effectiveSequenceMatchedSteps } from "../sequence-progress.js";
 import { useHotkeysDevtoolsState } from "../HotkeysContextProvider.js";
 import { useStyles } from "../styles/use-styles.js";
 import { ActionButtons } from "./ActionButtons.js";
 import { className, createComponent, effect, insert, template } from "solid-js/web";
 import { For, Show, createMemo } from "solid-js";
-import { formatForDisplay, formatHotkeySequence } from "@tanstack/hotkeys";
+import { detectPlatform, formatForDisplay, formatHotkeySequence, normalizeHotkey, normalizeHotkeyFromParsed, parseHotkey } from "@tanstack/hotkeys";
+import clsx from "clsx";
 
 //#region src/components/DetailsPanel.tsx
-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`);
+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`);
+const PLATFORM_ROWS = [
+	{
+		id: "mac",
+		label: "macOS"
+	},
+	{
+		id: "windows",
+		label: "Windows"
+	},
+	{
+		id: "linux",
+		label: "Linux"
+	}
+];
+function KeyBreakdownPlatformTable(props) {
+	const st = () => props.styles();
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(For, {
+			each: PLATFORM_ROWS,
+			children: (row) => (() => {
+				var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+				insert(_el$3, () => row.label);
+				insert(_el$4, () => formatForDisplay(normalizeHotkeyFromParsed(props.getParsed(), props.getCanonicalPlatform()), { platform: row.id }));
+				effect((_p$) => {
+					var _v$ = st().platformBreakdownRow, _v$2 = st().platformBreakdownLabel, _v$3 = st().platformBreakdownPretty;
+					_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+					_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+					_v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$2;
+			})()
+		}));
+		effect(() => className(_el$, st().platformBreakdown));
+		return _el$;
+	})();
+}
 function sequenceKey(sequence) {
 	return sequence.join("|");
 }
@@ -51,34 +95,26 @@ function HotkeyDetails(props) {
 	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 registrationPlatform = () => reg().options.platform ?? detectPlatform();
+	const rawModParts = createMemo(() => normalizeHotkeyFromParsed(parsed(), registrationPlatform()).split("+"));
 	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));
+		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;
+		insert(_el$6, () => props.formatForDisplay(reg().hotkey));
+		insert(_el$9, () => reg().id);
+		insert(_el$1, () => reg().hotkey);
+		insert(_el$11, () => 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);
+			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$4 !== _p$.e && className(_el$5, _p$.e = _v$4);
+			_v$5 !== _p$.t && className(_el$6, _p$.t = _v$5);
+			_v$6 !== _p$.a && className(_el$7, _p$.a = _v$6);
+			_v$7 !== _p$.o && className(_el$8, _p$.o = _v$7);
+			_v$8 !== _p$.i && className(_el$9, _p$.i = _v$8);
+			_v$9 !== _p$.n && className(_el$0, _p$.n = _v$9);
+			_v$0 !== _p$.s && className(_el$1, _p$.s = _v$0);
+			_v$1 !== _p$.h && className(_el$10, _p$.h = _v$1);
+			_v$10 !== _p$.r && className(_el$11, _p$.r = _v$10);
 			return _p$;
 		}, {
 			e: void 0,
@@ -91,50 +127,57 @@ function HotkeyDetails(props) {
 			h: void 0,
 			r: void 0
 		});
-		return _el$;
+		return _el$5;
 	})(), (() => {
-		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, {
+		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;
+		insert(_el$17, createComponent(For, {
 			get each() {
-				return keyParts();
+				return rawModParts();
 			},
 			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$55 = _tmpl$6();
+					effect(() => className(_el$55, styles().keyBreakdownPlus));
+					return _el$55;
 				}
 			}), (() => {
-				var _el$48 = _tmpl$5();
-				insert(_el$48, part);
-				effect(() => className(_el$48, styles().keyCapLarge));
-				return _el$48;
+				var _el$56 = _tmpl$7();
+				insert(_el$56, part);
+				effect(() => className(_el$56, styles().keyCapLarge));
+				return _el$56;
 			})()]
 		}));
-		insert(_el$12, createComponent(ActionButtons, { get registration() {
+		insert(_el$19, createComponent(KeyBreakdownPlatformTable, {
+			getParsed: () => parsed(),
+			getCanonicalPlatform: registrationPlatform,
+			get styles() {
+				return props.styles;
+			}
+		}));
+		insert(_el$20, 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, {
+		insert(_el$27, () => String(reg().options.enabled !== false));
+		insert(_el$30, () => reg().options.eventType ?? "keydown");
+		insert(_el$33, () => String(!!reg().options.preventDefault));
+		insert(_el$36, () => String(!!reg().options.stopPropagation));
+		insert(_el$39, () => String(reg().options.ignoreInputs !== false));
+		insert(_el$42, () => String(!!reg().options.requireReset));
+		insert(_el$45, conflictBehavior);
+		insert(_el$48, () => String(reg().hasFired));
+		insert(_el$12, 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, {
+				var _el$49 = _tmpl$4(), _el$50 = _el$49.firstChild, _el$53 = _el$50.firstChild.nextSibling;
+				_el$53.nextSibling;
+				var _el$54 = _el$50.nextSibling;
+				insert(_el$50, () => allConflicts().length, _el$53);
+				insert(_el$54, createComponent(For, {
 					get each() {
 						return targetConflicts();
 					},
@@ -142,81 +185,85 @@ function HotkeyDetails(props) {
 						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;
+							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;
+							_el$67.nextSibling;
+							insert(_el$58, label);
+							insert(_el$57, () => conflict.id, _el$65);
+							insert(_el$57, () => props.formatForDisplay(conflict.hotkey), _el$66);
+							insert(_el$57, () => conflict.options.eventType ?? "keydown", _el$67);
+							insert(_el$57, () => props.getTargetDescription(conflict.target), null);
+							effect(() => className(_el$57, styles()[itemStyle()]));
+							return _el$57;
 						})();
 					}
 				}), null);
-				insert(_el$46, createComponent(For, {
+				insert(_el$54, 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;
+						var _el$68 = _tmpl$9(), _el$76 = _el$68.firstChild.nextSibling.nextSibling, _el$77 = _el$76.nextSibling.nextSibling, _el$78 = _el$77.nextSibling.nextSibling;
+						_el$78.nextSibling;
+						insert(_el$68, () => conflict.id, _el$76);
+						insert(_el$68, () => props.formatForDisplay(conflict.hotkey), _el$77);
+						insert(_el$68, () => conflict.options.eventType ?? "keydown", _el$78);
+						insert(_el$68, () => props.getTargetDescription(conflict.target), null);
+						effect(() => className(_el$68, styles().conflictItemScope));
+						return _el$68;
 					})()
 				}), 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);
+					var _v$11 = styles().detailSection, _v$12 = styles().detailSectionHeader, _v$13 = styles().conflictList;
+					_v$11 !== _p$.e && className(_el$49, _p$.e = _v$11);
+					_v$12 !== _p$.t && className(_el$50, _p$.t = _v$12);
+					_v$13 !== _p$.a && className(_el$54, _p$.a = _v$13);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0,
 					a: void 0
 				});
-				return _el$41;
+				return _el$49;
 			}
 		}), 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);
+			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;
+			_v$14 !== _p$.e && className(_el$12, _p$.e = _v$14);
+			_v$15 !== _p$.t && className(_el$13, _p$.t = _v$15);
+			_v$16 !== _p$.a && className(_el$14, _p$.a = _v$16);
+			_v$17 !== _p$.o && className(_el$15, _p$.o = _v$17);
+			_v$18 !== _p$.i && className(_el$16, _p$.i = _v$18);
+			_v$19 !== _p$.n && className(_el$17, _p$.n = _v$19);
+			_v$20 !== _p$.s && className(_el$18, _p$.s = _v$20);
+			_v$21 !== _p$.h && className(_el$19, _p$.h = _v$21);
+			_v$22 !== _p$.r && className(_el$20, _p$.r = _v$22);
+			_v$23 !== _p$.d && className(_el$21, _p$.d = _v$23);
+			_v$24 !== _p$.l && className(_el$22, _p$.l = _v$24);
+			_v$25 !== _p$.u && className(_el$23, _p$.u = _v$25);
+			_v$26 !== _p$.c && className(_el$25, _p$.c = _v$26);
+			_v$27 !== _p$.w && className(_el$26, _p$.w = _v$27);
+			_v$28 !== _p$.m && className(_el$27, _p$.m = _v$28);
+			_v$29 !== _p$.f && className(_el$28, _p$.f = _v$29);
+			_v$30 !== _p$.y && className(_el$29, _p$.y = _v$30);
+			_v$31 !== _p$.g && className(_el$30, _p$.g = _v$31);
+			_v$32 !== _p$.p && className(_el$31, _p$.p = _v$32);
+			_v$33 !== _p$.b && className(_el$32, _p$.b = _v$33);
+			_v$34 !== _p$.T && className(_el$33, _p$.T = _v$34);
+			_v$35 !== _p$.A && className(_el$34, _p$.A = _v$35);
+			_v$36 !== _p$.O && className(_el$35, _p$.O = _v$36);
+			_v$37 !== _p$.I && className(_el$36, _p$.I = _v$37);
+			_v$38 !== _p$.S && className(_el$37, _p$.S = _v$38);
+			_v$39 !== _p$.W && className(_el$38, _p$.W = _v$39);
+			_v$40 !== _p$.C && className(_el$39, _p$.C = _v$40);
+			_v$41 !== _p$.B && className(_el$40, _p$.B = _v$41);
+			_v$42 !== _p$.v && className(_el$41, _p$.v = _v$42);
+			_v$43 !== _p$.k && className(_el$42, _p$.k = _v$43);
+			_v$44 !== _p$.x && className(_el$43, _p$.x = _v$44);
+			_v$45 !== _p$.j && className(_el$44, _p$.j = _v$45);
+			_v$46 !== _p$.q && className(_el$45, _p$.q = _v$46);
+			_v$47 !== _p$.z && className(_el$46, _p$.z = _v$47);
+			_v$48 !== _p$.P && className(_el$47, _p$.P = _v$48);
+			_v$49 !== _p$.H && className(_el$48, _p$.H = _v$49);
 			return _p$;
 		}, {
 			e: void 0,
@@ -250,35 +297,74 @@ function HotkeyDetails(props) {
 			v: void 0,
 			k: void 0,
 			x: void 0,
-			j: void 0
+			j: void 0,
+			q: void 0,
+			z: void 0,
+			P: void 0,
+			H: void 0
 		});
-		return _el$0;
+		return _el$12;
 	})()];
 }
 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 liveReg = createMemo(() => props.state.sequenceRegistrations().find((r) => r.id === reg().id) ?? reg());
+	const matchedSteps = createMemo(() => effectiveSequenceMatchedSteps(liveReg(), props.state.sequenceProgressNow()));
+	const targetConflicts = createMemo(() => props.findSequenceTargetConflicts(liveReg(), props.state.sequenceRegistrations()));
+	const scopeConflicts = createMemo(() => props.findSequenceScopeConflicts(liveReg(), props.state.sequenceRegistrations()));
 	const allConflicts = createMemo(() => [...targetConflicts(), ...scopeConflicts()]);
-	const conflictBehavior = () => reg().options.conflictBehavior ?? "warn";
+	const conflictBehavior = () => liveReg().options.conflictBehavior ?? "warn";
+	const sequenceCanonicalPlatform = createMemo(() => liveReg().options.platform ?? detectPlatform());
 	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));
+		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;
+		insert(_el$80, createComponent(For, {
+			get each() {
+				return liveReg().sequence;
+			},
+			children: (step, i) => (() => {
+				var _el$126 = _tmpl$10(), _el$127 = _el$126.firstChild;
+				insert(_el$126, createComponent(Show, {
+					get when() {
+						return i() > 0;
+					},
+					children: " "
+				}), _el$127);
+				insert(_el$127, () => props.formatForDisplay(step));
+				effect(() => className(_el$127, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
+				return _el$126;
+			})()
+		}));
+		insert(_el$83, () => liveReg().id);
+		insert(_el$85, createComponent(For, {
+			get each() {
+				return liveReg().sequence;
+			},
+			children: (step, i) => (() => {
+				var _el$128 = _tmpl$10(), _el$129 = _el$128.firstChild;
+				insert(_el$128, createComponent(Show, {
+					get when() {
+						return i() > 0;
+					},
+					children: " "
+				}), _el$129);
+				insert(_el$129, () => props.formatForDisplay(step));
+				effect(() => className(_el$129, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
+				return _el$128;
+			})()
+		}));
+		insert(_el$87, () => props.getTargetDescription(liveReg().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);
+			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;
+			_v$50 !== _p$.e && className(_el$79, _p$.e = _v$50);
+			_v$51 !== _p$.t && className(_el$80, _p$.t = _v$51);
+			_v$52 !== _p$.a && className(_el$81, _p$.a = _v$52);
+			_v$53 !== _p$.o && className(_el$82, _p$.o = _v$53);
+			_v$54 !== _p$.i && className(_el$83, _p$.i = _v$54);
+			_v$55 !== _p$.n && className(_el$84, _p$.n = _v$55);
+			_v$56 !== _p$.s && className(_el$85, _p$.s = _v$56);
+			_v$57 !== _p$.h && className(_el$86, _p$.h = _v$57);
+			_v$58 !== _p$.r && className(_el$87, _p$.r = _v$58);
 			return _p$;
 		}, {
 			e: void 0,
@@ -291,49 +377,111 @@ function SequenceDetails(props) {
 			h: void 0,
 			r: void 0
 		});
-		return _el$71;
+		return _el$79;
 	})(), (() => {
-		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, {
+		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;
+		insert(_el$91, createComponent(For, {
 			get each() {
-				return reg().sequence;
+				return liveReg().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$130 = _tmpl$11();
+					effect(() => className(_el$130, styles().keyBreakdownPlus));
+					return _el$130;
 				}
 			}), (() => {
-				var _el$118 = _tmpl$5();
-				insert(_el$118, () => props.formatForDisplay(step));
-				effect(() => className(_el$118, styles().keyCapLarge));
-				return _el$118;
+				var _el$131 = _tmpl$7();
+				insert(_el$131, () => props.formatForDisplay(step));
+				effect(() => className(_el$131, clsx(styles().keyCapLarge, i() < matchedSteps() && styles().keyCapLargeInProgress)));
+				return _el$131;
 			})()]
 		}));
-		insert(_el$84, createComponent(ActionButtons, { get registration() {
-			return reg();
+		insert(_el$89, createComponent(For, {
+			get each() {
+				return liveReg().sequence;
+			},
+			children: (step, stepIdx) => {
+				const stepParsed = () => parseHotkey(step, sequenceCanonicalPlatform());
+				const stepRawParts = () => normalizeHotkey(step, sequenceCanonicalPlatform()).split("+");
+				return (() => {
+					var _el$132 = _tmpl$12(), _el$133 = _el$132.firstChild;
+					_el$133.firstChild;
+					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;
+					insert(_el$133, () => stepIdx() + 1, null);
+					insert(_el$137, createComponent(For, {
+						get each() {
+							return stepRawParts();
+						},
+						children: (part, i) => [createComponent(Show, {
+							get when() {
+								return i() > 0;
+							},
+							get children() {
+								var _el$140 = _tmpl$6();
+								effect(() => className(_el$140, styles().keyBreakdownPlus));
+								return _el$140;
+							}
+						}), (() => {
+							var _el$141 = _tmpl$7();
+							insert(_el$141, part);
+							effect(() => className(_el$141, styles().keyCapLarge));
+							return _el$141;
+						})()]
+					}));
+					insert(_el$139, createComponent(KeyBreakdownPlatformTable, {
+						getParsed: stepParsed,
+						getCanonicalPlatform: () => sequenceCanonicalPlatform(),
+						get styles() {
+							return props.styles;
+						}
+					}));
+					effect((_p$) => {
+						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;
+						_v$92 !== _p$.e && className(_el$132, _p$.e = _v$92);
+						_v$93 !== _p$.t && className(_el$133, _p$.t = _v$93);
+						_v$94 !== _p$.a && className(_el$135, _p$.a = _v$94);
+						_v$95 !== _p$.o && className(_el$136, _p$.o = _v$95);
+						_v$96 !== _p$.i && className(_el$137, _p$.i = _v$96);
+						_v$97 !== _p$.n && className(_el$138, _p$.n = _v$97);
+						_v$98 !== _p$.s && className(_el$139, _p$.s = _v$98);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0,
+						n: void 0,
+						s: void 0
+					});
+					return _el$132;
+				})();
+			}
+		}), null);
+		insert(_el$93, createComponent(ActionButtons, { get registration() {
+			return liveReg();
 		} }), 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, {
+		insert(_el$100, () => String(liveReg().options.enabled !== false));
+		insert(_el$103, () => liveReg().options.eventType ?? "keydown");
+		insert(_el$106, () => liveReg().options.timeout ?? 1e3, _el$107);
+		insert(_el$110, () => String(!!liveReg().options.preventDefault));
+		insert(_el$113, () => String(!!liveReg().options.stopPropagation));
+		insert(_el$116, () => String(liveReg().options.ignoreInputs !== false));
+		insert(_el$119, conflictBehavior);
+		insert(_el$88, 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, {
+				var _el$120 = _tmpl$4(), _el$121 = _el$120.firstChild, _el$124 = _el$121.firstChild.nextSibling;
+				_el$124.nextSibling;
+				var _el$125 = _el$121.nextSibling;
+				insert(_el$121, () => allConflicts().length, _el$124);
+				insert(_el$125, createComponent(For, {
 					get each() {
 						return targetConflicts();
 					},
@@ -341,78 +489,79 @@ function SequenceDetails(props) {
 						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;
+							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;
+							_el$152.nextSibling;
+							insert(_el$143, label);
+							insert(_el$142, () => conflict.id, _el$150);
+							insert(_el$142, () => props.formatHotkeySequence(conflict.sequence), _el$151);
+							insert(_el$142, () => conflict.options.eventType ?? "keydown", _el$152);
+							insert(_el$142, () => props.getTargetDescription(conflict.target), null);
+							effect(() => className(_el$142, styles()[itemStyle()]));
+							return _el$142;
 						})();
 					}
 				}), null);
-				insert(_el$116, createComponent(For, {
+				insert(_el$125, 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;
+						var _el$153 = _tmpl$9(), _el$161 = _el$153.firstChild.nextSibling.nextSibling, _el$162 = _el$161.nextSibling.nextSibling, _el$163 = _el$162.nextSibling.nextSibling;
+						_el$163.nextSibling;
+						insert(_el$153, () => conflict.id, _el$161);
+						insert(_el$153, () => props.formatHotkeySequence(conflict.sequence), _el$162);
+						insert(_el$153, () => conflict.options.eventType ?? "keydown", _el$163);
+						insert(_el$153, () => props.getTargetDescription(conflict.target), null);
+						effect(() => className(_el$153, styles().conflictItemScope));
+						return _el$153;
 					})()
 				}), 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);
+					var _v$59 = styles().detailSection, _v$60 = styles().detailSectionHeader, _v$61 = styles().conflictList;
+					_v$59 !== _p$.e && className(_el$120, _p$.e = _v$59);
+					_v$60 !== _p$.t && className(_el$121, _p$.t = _v$60);
+					_v$61 !== _p$.a && className(_el$125, _p$.a = _v$61);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0,
 					a: void 0
 				});
-				return _el$111;
+				return _el$120;
 			}
 		}), 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);
+			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;
+			_v$62 !== _p$.e && className(_el$88, _p$.e = _v$62);
+			_v$63 !== _p$.t && className(_el$89, _p$.t = _v$63);
+			_v$64 !== _p$.a && className(_el$90, _p$.a = _v$64);
+			_v$65 !== _p$.o && className(_el$91, _p$.o = _v$65);
+			_v$66 !== _p$.i && className(_el$92, _p$.i = _v$66);
+			_v$67 !== _p$.n && className(_el$93, _p$.n = _v$67);
+			_v$68 !== _p$.s && className(_el$94, _p$.s = _v$68);
+			_v$69 !== _p$.h && className(_el$95, _p$.h = _v$69);
+			_v$70 !== _p$.r && className(_el$96, _p$.r = _v$70);
+			_v$71 !== _p$.d && className(_el$98, _p$.d = _v$71);
+			_v$72 !== _p$.l && className(_el$99, _p$.l = _v$72);
+			_v$73 !== _p$.u && className(_el$100, _p$.u = _v$73);
+			_v$74 !== _p$.c && className(_el$101, _p$.c = _v$74);
+			_v$75 !== _p$.w && className(_el$102, _p$.w = _v$75);
+			_v$76 !== _p$.m && className(_el$103, _p$.m = _v$76);
+			_v$77 !== _p$.f && className(_el$104, _p$.f = _v$77);
+			_v$78 !== _p$.y && className(_el$105, _p$.y = _v$78);
+			_v$79 !== _p$.g && className(_el$106, _p$.g = _v$79);
+			_v$80 !== _p$.p && className(_el$108, _p$.p = _v$80);
+			_v$81 !== _p$.b && className(_el$109, _p$.b = _v$81);
+			_v$82 !== _p$.T && className(_el$110, _p$.T = _v$82);
+			_v$83 !== _p$.A && className(_el$111, _p$.A = _v$83);
+			_v$84 !== _p$.O && className(_el$112, _p$.O = _v$84);
+			_v$85 !== _p$.I && className(_el$113, _p$.I = _v$85);
+			_v$86 !== _p$.S && className(_el$114, _p$.S = _v$86);
+			_v$87 !== _p$.W && className(_el$115, _p$.W = _v$87);
+			_v$88 !== _p$.C && className(_el$116, _p$.C = _v$88);
+			_v$89 !== _p$.B && className(_el$117, _p$.B = _v$89);
+			_v$90 !== _p$.v && className(_el$118, _p$.v = _v$90);
+			_v$91 !== _p$.k && className(_el$119, _p$.k = _v$91);
 			return _p$;
 		}, {
 			e: void 0,
@@ -443,25 +592,26 @@ function SequenceDetails(props) {
 			W: void 0,
 			C: void 0,
 			B: void 0,
-			v: void 0
+			v: void 0,
+			k: void 0
 		});
-		return _el$80;
+		return _el$88;
 	})()];
 }
 function DetailsPanel(props) {
 	const styles = useStyles();
 	const state = useHotkeysDevtoolsState();
 	return (() => {
-		var _el$141 = _tmpl$1();
-		insert(_el$141, createComponent(Show, {
+		var _el$164 = _tmpl$();
+		insert(_el$164, createComponent(Show, {
 			get when() {
 				return props.selectedRegistration();
 			},
 			get fallback() {
 				return (() => {
-					var _el$142 = _tmpl$10();
-					effect(() => className(_el$142, styles().noSelection));
-					return _el$142;
+					var _el$165 = _tmpl$13();
+					effect(() => className(_el$165, styles().noSelection));
+					return _el$165;
 				})();
 			},
 			children: (reg) => createComponent(Show, {
@@ -501,8 +651,8 @@ function DetailsPanel(props) {
 				}
 			})
 		}));
-		effect(() => className(_el$141, styles().stateDetails));
-		return _el$141;
+		effect(() => className(_el$164, styles().stateDetails));
+		return _el$164;
 	})();
 }