@tanstack/hotkeys-devtools 0.4.3 → 0.5.0

package/dist/components/HotkeyList.js

@@ -1,12 +1,13 @@
+import { effectiveSequenceMatchedSteps } from "../sequence-progress.js";
 import { useHotkeysDevtoolsState } from "../HotkeysContextProvider.js";
 import { useStyles } from "../styles/use-styles.js";
 import { className, createComponent, delegateEvents, effect, insert, memo, template } from "solid-js/web";
 import { For, Show, createEffect, createMemo, createSignal, on } from "solid-js";
-import { formatForDisplay, formatHotkeySequence } from "@tanstack/hotkeys";
+import { formatForDisplay } from "@tanstack/hotkeys";
 import clsx from "clsx";
 
 //#region src/components/HotkeyList.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>Hotkeys (<!>)`), _tmpl$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3 = /* @__PURE__ */ template(`<div>Sequences (<!>)`), _tmpl$4 = /* @__PURE__ */ template(`<span>x`), _tmpl$5 = /* @__PURE__ */ template(`<div><span></span><div><span><span data-tooltip></span></span><span><span data-tooltip>Fires on <!> event</span></span><span><span data-tooltip>`), _tmpl$6 = /* @__PURE__ */ template(`<span><span data-tooltip>`), _tmpl$7 = /* @__PURE__ */ template(`<span>i<span data-tooltip>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>x`), _tmpl$2 = /* @__PURE__ */ template(`<div><span></span><div><span><span data-tooltip></span></span><span><span data-tooltip>Fires on <!> event</span></span><span><span data-tooltip>`), _tmpl$3 = /* @__PURE__ */ template(`<span><span>`), _tmpl$4 = /* @__PURE__ */ template(`<span><span data-tooltip>`), _tmpl$5 = /* @__PURE__ */ template(`<span>i<span data-tooltip>`), _tmpl$6 = /* @__PURE__ */ template(`<div>Hotkeys (<!>)`), _tmpl$7 = /* @__PURE__ */ template(`<div>`), _tmpl$8 = /* @__PURE__ */ template(`<div>Sequences (<!>)`);
 function sequenceKey(sequence) {
 	return sequence.join("|");
 }
@@ -44,6 +45,151 @@ function findSequenceTargetConflicts(registration, all) {
 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 SequenceListRow(props) {
+	const styles = useStyles();
+	const sequenceRegistrations = () => props.getSequences();
+	const targetConflicts = () => findSequenceTargetConflicts(props.reg, sequenceRegistrations());
+	const scopeConflicts = () => findSequenceScopeConflicts(props.reg, sequenceRegistrations());
+	const hasTargetConflict = () => targetConflicts().length > 0;
+	const hasScopeConflict = () => scopeConflicts().length > 0;
+	const conflictBehavior = () => props.reg.options.conflictBehavior ?? "warn";
+	const targetConflictBadge = () => {
+		const behavior = conflictBehavior();
+		const c = targetConflicts();
+		if (behavior === "allow") return {
+			style: "badgeAllow",
+			label: "~",
+			tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? "s" : ""} on same sequence and target (conflictBehavior: allow)`
+		};
+		if (behavior === "error") return {
+			style: "badgeError",
+			label: "!",
+			tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? "s" : ""} on same sequence and target (conflictBehavior: error)`
+		};
+		return {
+			style: "badgeConflict",
+			label: "!",
+			tooltip: `Warning: ${c.length} other binding${c.length > 1 ? "s" : ""} on same sequence and target`
+		};
+	};
+	const scopeConflictTooltip = () => {
+		const c = scopeConflicts();
+		return `Info: ${c.length} binding${c.length > 1 ? "s" : ""} with same sequence on different target${c.length > 1 ? "s" : ""}`;
+	};
+	const enabled = () => props.reg.options.enabled !== false;
+	const liveSequenceReg = createMemo(() => sequenceRegistrations().find((r) => r.id === props.reg.id) ?? props.reg);
+	const triggerCount = () => sequenceRegistrations().find((r) => r.id === props.reg.id)?.triggerCount ?? props.reg.triggerCount;
+	const matchedSteps = createMemo(() => effectiveSequenceMatchedSteps(liveSequenceReg(), props.sequenceProgressNow()));
+	const [prevCount, setPrevCount] = createSignal(props.reg.triggerCount);
+	const [pulsing, setPulsing] = createSignal(false);
+	createEffect(on(triggerCount, (current) => {
+		if (current > prevCount()) {
+			setPulsing(true);
+			setTimeout(() => setPulsing(false), 600);
+		}
+		setPrevCount(current);
+	}));
+	return (() => {
+		var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild.nextSibling;
+		_el$10.nextSibling;
+		var _el$11 = _el$8.nextSibling, _el$12 = _el$11.firstChild;
+		_el$.$$click = () => props.setSelectedId(props.reg.id);
+		insert(_el$2, createComponent(For, {
+			get each() {
+				return liveSequenceReg().sequence;
+			},
+			children: (step, i) => (() => {
+				var _el$13 = _tmpl$3(), _el$14 = _el$13.firstChild;
+				insert(_el$13, createComponent(Show, {
+					get when() {
+						return i() > 0;
+					},
+					children: " "
+				}), _el$14);
+				insert(_el$14, () => formatForDisplay(step));
+				effect(() => className(_el$14, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
+				return _el$13;
+			})()
+		}));
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return triggerCount() > 0;
+			},
+			get children() {
+				var _el$3 = _tmpl$();
+				_el$3.firstChild;
+				insert(_el$3, triggerCount, null);
+				effect(() => className(_el$3, styles().triggerCount));
+				return _el$3;
+			}
+		}), _el$5);
+		insert(_el$5, (() => {
+			var _c$ = memo(() => !!hasTargetConflict());
+			return () => _c$() && (() => {
+				var _el$15 = _tmpl$4(), _el$16 = _el$15.firstChild;
+				insert(_el$15, () => targetConflictBadge().label, _el$16);
+				insert(_el$16, () => targetConflictBadge().tooltip);
+				effect((_p$) => {
+					var _v$0 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$1 = styles().tooltipText;
+					_v$0 !== _p$.e && className(_el$15, _p$.e = _v$0);
+					_v$1 !== _p$.t && className(_el$16, _p$.t = _v$1);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$15;
+			})();
+		})(), _el$6);
+		insert(_el$5, (() => {
+			var _c$2 = memo(() => !!hasScopeConflict());
+			return () => _c$2() && (() => {
+				var _el$17 = _tmpl$5(), _el$19 = _el$17.firstChild.nextSibling;
+				insert(_el$19, scopeConflictTooltip);
+				effect((_p$) => {
+					var _v$10 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$11 = styles().tooltipText;
+					_v$10 !== _p$.e && className(_el$17, _p$.e = _v$10);
+					_v$11 !== _p$.t && className(_el$19, _p$.t = _v$11);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$17;
+			})();
+		})(), _el$6);
+		insert(_el$6, () => enabled() ? "on" : "off", _el$7);
+		insert(_el$7, () => enabled() ? "Sequence is enabled" : "Sequence is disabled");
+		insert(_el$8, () => props.reg.options.eventType ?? "keydown", _el$9);
+		insert(_el$9, () => props.reg.options.eventType ?? "keydown", _el$10);
+		insert(_el$11, () => getTargetLabel(props.reg.target), _el$12);
+		insert(_el$12, () => getTargetTooltip(props.reg.target));
+		effect((_p$) => {
+			var _v$ = clsx(styles().hotkeyRow, props.selectedId() === props.reg.id && styles().hotkeyRowSelected, pulsing() && styles().hotkeyRowTriggered), _v$2 = styles().hotkeyLabel, _v$3 = styles().hotkeyBadges, _v$4 = clsx(styles().badge, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$5 = styles().tooltipText, _v$6 = clsx(styles().badge, (props.reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$7 = styles().tooltipText, _v$8 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$9 = styles().tooltipText;
+			_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$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$11, _p$.h = _v$8);
+			_v$9 !== _p$.r && className(_el$12, _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$;
+	})();
+}
 function HotkeyList(props) {
 	const styles = useStyles();
 	const state = useHotkeysDevtoolsState();
@@ -51,15 +197,15 @@ function HotkeyList(props) {
 	const sequenceRegistrations = createMemo(() => state.sequenceRegistrations());
 	return [
 		(() => {
-			var _el$ = _tmpl$(), _el$4 = _el$.firstChild.nextSibling;
-			_el$4.nextSibling;
-			insert(_el$, () => registrations().length, _el$4);
-			effect(() => className(_el$, styles().panelHeader));
-			return _el$;
+			var _el$20 = _tmpl$6(), _el$23 = _el$20.firstChild.nextSibling;
+			_el$23.nextSibling;
+			insert(_el$20, () => registrations().length, _el$23);
+			effect(() => className(_el$20, styles().panelHeader));
+			return _el$20;
 		})(),
 		(() => {
-			var _el$5 = _tmpl$2();
-			insert(_el$5, createComponent(For, {
+			var _el$24 = _tmpl$7();
+			insert(_el$24, createComponent(For, {
 				get each() {
 					return registrations();
 				},
@@ -104,75 +250,75 @@ function HotkeyList(props) {
 						setPrevCount(current);
 					}));
 					return (() => {
-						var _el$1 = _tmpl$5(), _el$10 = _el$1.firstChild, _el$13 = _el$10.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.firstChild, _el$20 = _el$17.firstChild.nextSibling;
-						_el$20.nextSibling;
-						var _el$21 = _el$16.nextSibling, _el$22 = _el$21.firstChild;
-						_el$1.$$click = () => props.setSelectedId(reg.id);
-						insert(_el$10, () => formatForDisplay(reg.hotkey));
-						insert(_el$1, createComponent(Show, {
+						var _el$30 = _tmpl$2(), _el$31 = _el$30.firstChild, _el$34 = _el$31.nextSibling, _el$35 = _el$34.firstChild, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$38 = _el$37.firstChild, _el$41 = _el$38.firstChild.nextSibling;
+						_el$41.nextSibling;
+						var _el$42 = _el$37.nextSibling, _el$43 = _el$42.firstChild;
+						_el$30.$$click = () => props.setSelectedId(reg.id);
+						insert(_el$31, () => formatForDisplay(reg.hotkey));
+						insert(_el$30, createComponent(Show, {
 							get when() {
 								return triggerCount() > 0;
 							},
 							get children() {
-								var _el$11 = _tmpl$4();
-								_el$11.firstChild;
-								insert(_el$11, triggerCount, null);
-								effect(() => className(_el$11, styles().triggerCount));
-								return _el$11;
+								var _el$32 = _tmpl$();
+								_el$32.firstChild;
+								insert(_el$32, triggerCount, null);
+								effect(() => className(_el$32, styles().triggerCount));
+								return _el$32;
 							}
-						}), _el$13);
-						insert(_el$13, (() => {
-							var _c$ = memo(() => !!hasTargetConflict());
-							return () => _c$() && (() => {
-								var _el$23 = _tmpl$6(), _el$24 = _el$23.firstChild;
-								insert(_el$23, () => targetConflictBadge().label, _el$24);
-								insert(_el$24, () => targetConflictBadge().tooltip);
+						}), _el$34);
+						insert(_el$34, (() => {
+							var _c$3 = memo(() => !!hasTargetConflict());
+							return () => _c$3() && (() => {
+								var _el$44 = _tmpl$4(), _el$45 = _el$44.firstChild;
+								insert(_el$44, () => targetConflictBadge().label, _el$45);
+								insert(_el$45, () => targetConflictBadge().tooltip);
 								effect((_p$) => {
-									var _v$0 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$1 = styles().tooltipText;
-									_v$0 !== _p$.e && className(_el$23, _p$.e = _v$0);
-									_v$1 !== _p$.t && className(_el$24, _p$.t = _v$1);
+									var _v$21 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$22 = styles().tooltipText;
+									_v$21 !== _p$.e && className(_el$44, _p$.e = _v$21);
+									_v$22 !== _p$.t && className(_el$45, _p$.t = _v$22);
 									return _p$;
 								}, {
 									e: void 0,
 									t: void 0
 								});
-								return _el$23;
+								return _el$44;
 							})();
-						})(), _el$14);
-						insert(_el$13, (() => {
-							var _c$2 = memo(() => !!hasScopeConflict());
-							return () => _c$2() && (() => {
-								var _el$25 = _tmpl$7(), _el$27 = _el$25.firstChild.nextSibling;
-								insert(_el$27, scopeConflictTooltip);
+						})(), _el$35);
+						insert(_el$34, (() => {
+							var _c$4 = memo(() => !!hasScopeConflict());
+							return () => _c$4() && (() => {
+								var _el$46 = _tmpl$5(), _el$48 = _el$46.firstChild.nextSibling;
+								insert(_el$48, scopeConflictTooltip);
 								effect((_p$) => {
-									var _v$10 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$11 = styles().tooltipText;
-									_v$10 !== _p$.e && className(_el$25, _p$.e = _v$10);
-									_v$11 !== _p$.t && className(_el$27, _p$.t = _v$11);
+									var _v$23 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$24 = styles().tooltipText;
+									_v$23 !== _p$.e && className(_el$46, _p$.e = _v$23);
+									_v$24 !== _p$.t && className(_el$48, _p$.t = _v$24);
 									return _p$;
 								}, {
 									e: void 0,
 									t: void 0
 								});
-								return _el$25;
+								return _el$46;
 							})();
-						})(), _el$14);
-						insert(_el$14, () => enabled() ? "on" : "off", _el$15);
-						insert(_el$15, () => enabled() ? "Hotkey is enabled" : "Hotkey is disabled");
-						insert(_el$16, () => reg.options.eventType ?? "keydown", _el$17);
-						insert(_el$17, () => reg.options.eventType ?? "keydown", _el$20);
-						insert(_el$21, () => getTargetLabel(reg.target), _el$22);
-						insert(_el$22, () => getTargetTooltip(reg.target));
+						})(), _el$35);
+						insert(_el$35, () => enabled() ? "on" : "off", _el$36);
+						insert(_el$36, () => enabled() ? "Hotkey is enabled" : "Hotkey is disabled");
+						insert(_el$37, () => reg.options.eventType ?? "keydown", _el$38);
+						insert(_el$38, () => reg.options.eventType ?? "keydown", _el$41);
+						insert(_el$42, () => getTargetLabel(reg.target), _el$43);
+						insert(_el$43, () => getTargetTooltip(reg.target));
 						effect((_p$) => {
-							var _v$ = clsx(styles().hotkeyRow, props.selectedId() === reg.id && styles().hotkeyRowSelected, pulsing() && styles().hotkeyRowTriggered), _v$2 = styles().hotkeyLabel, _v$3 = styles().hotkeyBadges, _v$4 = clsx(styles().badge, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$5 = styles().tooltipText, _v$6 = clsx(styles().badge, (reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$7 = styles().tooltipText, _v$8 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$9 = styles().tooltipText;
-							_v$ !== _p$.e && className(_el$1, _p$.e = _v$);
-							_v$2 !== _p$.t && className(_el$10, _p$.t = _v$2);
-							_v$3 !== _p$.a && className(_el$13, _p$.a = _v$3);
-							_v$4 !== _p$.o && className(_el$14, _p$.o = _v$4);
-							_v$5 !== _p$.i && className(_el$15, _p$.i = _v$5);
-							_v$6 !== _p$.n && className(_el$16, _p$.n = _v$6);
-							_v$7 !== _p$.s && className(_el$17, _p$.s = _v$7);
-							_v$8 !== _p$.h && className(_el$21, _p$.h = _v$8);
-							_v$9 !== _p$.r && className(_el$22, _p$.r = _v$9);
+							var _v$12 = clsx(styles().hotkeyRow, props.selectedId() === reg.id && styles().hotkeyRowSelected, pulsing() && styles().hotkeyRowTriggered), _v$13 = styles().hotkeyLabel, _v$14 = styles().hotkeyBadges, _v$15 = clsx(styles().badge, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$16 = styles().tooltipText, _v$17 = clsx(styles().badge, (reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$18 = styles().tooltipText, _v$19 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$20 = styles().tooltipText;
+							_v$12 !== _p$.e && className(_el$30, _p$.e = _v$12);
+							_v$13 !== _p$.t && className(_el$31, _p$.t = _v$13);
+							_v$14 !== _p$.a && className(_el$34, _p$.a = _v$14);
+							_v$15 !== _p$.o && className(_el$35, _p$.o = _v$15);
+							_v$16 !== _p$.i && className(_el$36, _p$.i = _v$16);
+							_v$17 !== _p$.n && className(_el$37, _p$.n = _v$17);
+							_v$18 !== _p$.s && className(_el$38, _p$.s = _v$18);
+							_v$19 !== _p$.h && className(_el$42, _p$.h = _v$19);
+							_v$20 !== _p$.r && className(_el$43, _p$.r = _v$20);
 							return _p$;
 						}, {
 							e: void 0,
@@ -185,154 +331,42 @@ function HotkeyList(props) {
 							h: void 0,
 							r: void 0
 						});
-						return _el$1;
+						return _el$30;
 					})();
 				}
 			}));
-			effect(() => className(_el$5, styles().hotkeyList));
-			return _el$5;
+			effect(() => className(_el$24, styles().hotkeyList));
+			return _el$24;
 		})(),
 		(() => {
-			var _el$6 = _tmpl$3(), _el$9 = _el$6.firstChild.nextSibling;
-			_el$9.nextSibling;
-			insert(_el$6, () => sequenceRegistrations().length, _el$9);
-			effect(() => className(_el$6, styles().panelHeader));
-			return _el$6;
+			var _el$25 = _tmpl$8(), _el$28 = _el$25.firstChild.nextSibling;
+			_el$28.nextSibling;
+			insert(_el$25, () => sequenceRegistrations().length, _el$28);
+			effect(() => className(_el$25, styles().panelHeader));
+			return _el$25;
 		})(),
 		(() => {
-			var _el$0 = _tmpl$2();
-			insert(_el$0, createComponent(For, {
+			var _el$29 = _tmpl$7();
+			insert(_el$29, createComponent(For, {
 				get each() {
 					return sequenceRegistrations();
 				},
-				children: (reg) => {
-					const targetConflicts = () => findSequenceTargetConflicts(reg, sequenceRegistrations());
-					const scopeConflicts = () => findSequenceScopeConflicts(reg, sequenceRegistrations());
-					const hasTargetConflict = () => targetConflicts().length > 0;
-					const hasScopeConflict = () => scopeConflicts().length > 0;
-					const conflictBehavior = () => reg.options.conflictBehavior ?? "warn";
-					const targetConflictBadge = () => {
-						const behavior = conflictBehavior();
-						const c = targetConflicts();
-						if (behavior === "allow") return {
-							style: "badgeAllow",
-							label: "~",
-							tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? "s" : ""} on same sequence and target (conflictBehavior: allow)`
-						};
-						if (behavior === "error") return {
-							style: "badgeError",
-							label: "!",
-							tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? "s" : ""} on same sequence and target (conflictBehavior: error)`
-						};
-						return {
-							style: "badgeConflict",
-							label: "!",
-							tooltip: `Warning: ${c.length} other binding${c.length > 1 ? "s" : ""} on same sequence and target`
-						};
-					};
-					const scopeConflictTooltip = () => {
-						const c = scopeConflicts();
-						return `Info: ${c.length} binding${c.length > 1 ? "s" : ""} with same sequence on different target${c.length > 1 ? "s" : ""}`;
-					};
-					const enabled = () => reg.options.enabled !== false;
-					const triggerCount = () => sequenceRegistrations().find((r) => r.id === reg.id)?.triggerCount ?? reg.triggerCount;
-					const [prevCount, setPrevCount] = createSignal(reg.triggerCount);
-					const [pulsing, setPulsing] = createSignal(false);
-					createEffect(on(triggerCount, (current) => {
-						if (current > prevCount()) {
-							setPulsing(true);
-							setTimeout(() => setPulsing(false), 600);
-						}
-						setPrevCount(current);
-					}));
-					return (() => {
-						var _el$28 = _tmpl$5(), _el$29 = _el$28.firstChild, _el$32 = _el$29.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$33.firstChild, _el$35 = _el$33.nextSibling, _el$36 = _el$35.firstChild, _el$39 = _el$36.firstChild.nextSibling;
-						_el$39.nextSibling;
-						var _el$40 = _el$35.nextSibling, _el$41 = _el$40.firstChild;
-						_el$28.$$click = () => props.setSelectedId(reg.id);
-						insert(_el$29, () => formatHotkeySequence(reg.sequence));
-						insert(_el$28, createComponent(Show, {
-							get when() {
-								return triggerCount() > 0;
-							},
-							get children() {
-								var _el$30 = _tmpl$4();
-								_el$30.firstChild;
-								insert(_el$30, triggerCount, null);
-								effect(() => className(_el$30, styles().triggerCount));
-								return _el$30;
-							}
-						}), _el$32);
-						insert(_el$32, (() => {
-							var _c$3 = memo(() => !!hasTargetConflict());
-							return () => _c$3() && (() => {
-								var _el$42 = _tmpl$6(), _el$43 = _el$42.firstChild;
-								insert(_el$42, () => targetConflictBadge().label, _el$43);
-								insert(_el$43, () => targetConflictBadge().tooltip);
-								effect((_p$) => {
-									var _v$21 = clsx(styles().badge, styles()[targetConflictBadge().style], styles().tooltip), _v$22 = styles().tooltipText;
-									_v$21 !== _p$.e && className(_el$42, _p$.e = _v$21);
-									_v$22 !== _p$.t && className(_el$43, _p$.t = _v$22);
-									return _p$;
-								}, {
-									e: void 0,
-									t: void 0
-								});
-								return _el$42;
-							})();
-						})(), _el$33);
-						insert(_el$32, (() => {
-							var _c$4 = memo(() => !!hasScopeConflict());
-							return () => _c$4() && (() => {
-								var _el$44 = _tmpl$7(), _el$46 = _el$44.firstChild.nextSibling;
-								insert(_el$46, scopeConflictTooltip);
-								effect((_p$) => {
-									var _v$23 = clsx(styles().badge, styles().badgeInfo, styles().tooltip), _v$24 = styles().tooltipText;
-									_v$23 !== _p$.e && className(_el$44, _p$.e = _v$23);
-									_v$24 !== _p$.t && className(_el$46, _p$.t = _v$24);
-									return _p$;
-								}, {
-									e: void 0,
-									t: void 0
-								});
-								return _el$44;
-							})();
-						})(), _el$33);
-						insert(_el$33, () => enabled() ? "on" : "off", _el$34);
-						insert(_el$34, () => enabled() ? "Sequence is enabled" : "Sequence is disabled");
-						insert(_el$35, () => reg.options.eventType ?? "keydown", _el$36);
-						insert(_el$36, () => reg.options.eventType ?? "keydown", _el$39);
-						insert(_el$40, () => getTargetLabel(reg.target), _el$41);
-						insert(_el$41, () => getTargetTooltip(reg.target));
-						effect((_p$) => {
-							var _v$12 = clsx(styles().hotkeyRow, props.selectedId() === reg.id && styles().hotkeyRowSelected, pulsing() && styles().hotkeyRowTriggered), _v$13 = styles().hotkeyLabel, _v$14 = styles().hotkeyBadges, _v$15 = clsx(styles().badge, enabled() ? styles().badgeEnabled : styles().badgeDisabled, styles().tooltip), _v$16 = styles().tooltipText, _v$17 = clsx(styles().badge, (reg.options.eventType ?? "keydown") === "keydown" ? styles().badgeKeydown : styles().badgeKeyup, styles().tooltip), _v$18 = styles().tooltipText, _v$19 = clsx(styles().badge, styles().badgeTarget, styles().tooltip), _v$20 = styles().tooltipText;
-							_v$12 !== _p$.e && className(_el$28, _p$.e = _v$12);
-							_v$13 !== _p$.t && className(_el$29, _p$.t = _v$13);
-							_v$14 !== _p$.a && className(_el$32, _p$.a = _v$14);
-							_v$15 !== _p$.o && className(_el$33, _p$.o = _v$15);
-							_v$16 !== _p$.i && className(_el$34, _p$.i = _v$16);
-							_v$17 !== _p$.n && className(_el$35, _p$.n = _v$17);
-							_v$18 !== _p$.s && className(_el$36, _p$.s = _v$18);
-							_v$19 !== _p$.h && className(_el$40, _p$.h = _v$19);
-							_v$20 !== _p$.r && className(_el$41, _p$.r = _v$20);
-							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$28;
-					})();
-				}
+				children: (reg) => createComponent(SequenceListRow, {
+					reg,
+					getSequences: sequenceRegistrations,
+					get sequenceProgressNow() {
+						return state.sequenceProgressNow;
+					},
+					get selectedId() {
+						return props.selectedId;
+					},
+					get setSelectedId() {
+						return props.setSelectedId;
+					}
+				})
 			}));
-			effect(() => className(_el$0, styles().hotkeyList));
-			return _el$0;
+			effect(() => className(_el$29, styles().hotkeyList));
+			return _el$29;
 		})()
 	];
 }