@tanstack/hotkeys-devtools 0.9.0 → 1.1.0

package/dist/components/DetailsPanel.js

@@ -1,14 +1,29 @@
 import { effectiveSequenceMatchedSteps } from "../sequence-progress.js";
 import { useHotkeysDevtoolsState } from "../HotkeysContextProvider.js";
 import { useStyles } from "../styles/use-styles.js";
+import { formatRegistration, getBindingKind, useRegistrationConflicts } from "../_registrations.js";
 import { ActionButtons } from "./ActionButtons.js";
 import { className, createComponent, effect, insert, memo, template } from "solid-js/web";
 import { For, Show, createMemo } from "solid-js";
-import { detectPlatform, formatForDisplay, formatHotkeySequence, normalizeHotkey, normalizeHotkeyFromParsed, parseHotkey } from "@tanstack/hotkeys";
+import { detectPlatform, formatForDisplay, normalizeHotkeyFromParsed, parseHotkey } from "@tanstack/hotkeys";
 import clsx from "clsx";
 
 //#region src/components/DetailsPanel.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><span></span><span>`), _tmpl$3 = /* @__PURE__ */ template(`<div><div></div><div><div>ID</div><div></div><div>Raw</div><div></div><div>Target</div><div>`), _tmpl$4 = /* @__PURE__ */ template(`<div><div>Conflicts (<!>)</div><div>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div><div>Key Breakdown</div><div><div><div></div></div><span aria-hidden=true>-></span><div></div></div></div><div><div>Actions</div></div><div><div>Meta</div><div><div><span>name</span><span></span></div><div><span>description</span><span></span></div></div></div><div><div>Options</div><div><div><span>enabled</span><span></span></div><div><span>eventType</span><span></span></div><div><span>preventDefault</span><span></span></div><div><span>stopPropagation</span><span></span></div><div><span>ignoreInputs</span><span></span></div><div><span>requireReset</span><span></span></div><div><span>conflictBehavior</span><span></span></div><div><span>hasFired</span><span>`), _tmpl$6 = /* @__PURE__ */ template(`<span>+`), _tmpl$7 = /* @__PURE__ */ template(`<span>`), _tmpl$8 = /* @__PURE__ */ template(`<div><span></span> <!>: <!> (<!>) on `), _tmpl$9 = /* @__PURE__ */ template(`<div><span>scope</span> <!>: <!> (<!>) on `), _tmpl$0 = /* @__PURE__ */ template(`<div><div></div><div><div>ID</div><div></div><div>Sequence</div><div></div><div>Target</div><div>`), _tmpl$1 = /* @__PURE__ */ template(`<div><div><div>Key Breakdown</div><div></div><div>Each chord</div></div><div><div>Actions</div></div><div><div>Meta</div><div><div><span>name</span><span></span></div><div><span>description</span><span></span></div></div></div><div><div>Options</div><div><div><span>enabled</span><span></span></div><div><span>eventType</span><span></span></div><div><span>timeout</span><span>ms</span></div><div><span>preventDefault</span><span></span></div><div><span>stopPropagation</span><span></span></div><div><span>ignoreInputs</span><span></span></div><div><span>conflictBehavior</span><span>`), _tmpl$10 = /* @__PURE__ */ template(`<span><span>`), _tmpl$11 = /* @__PURE__ */ template(`<span>→`), _tmpl$12 = /* @__PURE__ */ template(`<div><div>Step </div><div><div><div></div></div><span aria-hidden=true>-></span><div>`), _tmpl$13 = /* @__PURE__ */ template(`<div>Select a hotkey or sequence from the list to view its details`);
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div><span></span><span>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div><div></div><div><div>ID</div><div></div><div>Matches</div><div></div><div>Raw</div><div></div><div>Target</div><div>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div><div>Conflicts (<!>)</div><div>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div><div><div>Key Breakdown</div><div><div><div></div></div><span aria-hidden=true>-></span><div></div></div></div><div><div>Actions</div></div><div><div>Meta</div><div><div><span>name</span><span></span></div><div><span>description</span><span></span></div></div></div><div><div>Options</div><div><div><span>enabled</span><span></span></div><div><span>eventType</span><span></span></div><div><span>preventDefault</span><span></span></div><div><span>stopPropagation</span><span></span></div><div><span>ignoreInputs</span><span></span></div><div><span>requireReset</span><span></span></div><div><span>conflictBehavior</span><span></span></div><div><span>hasFired</span><span>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<span>+`);
+var _tmpl$7 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$8 = /*#__PURE__*/ template(`<div><span>overlap</span> <!>: <!> (<!>) on `);
+var _tmpl$9 = /*#__PURE__*/ template(`<div><span>scope</span> <!>: <!> (<!>) on `);
+var _tmpl$0 = /*#__PURE__*/ template(`<div><div></div><div><div>ID</div><div></div><div>Matches</div><div></div><div>Raw</div><div></div><div>Sequence</div><div></div><div>Target</div><div>`);
+var _tmpl$1 = /*#__PURE__*/ template(`<div><div><div>Key Breakdown</div><div></div><div>Each chord</div></div><div><div>Actions</div></div><div><div>Meta</div><div><div><span>name</span><span></span></div><div><span>description</span><span></span></div></div></div><div><div>Options</div><div><div><span>enabled</span><span></span></div><div><span>eventType</span><span></span></div><div><span>timeout</span><span>ms</span></div><div><span>preventDefault</span><span></span></div><div><span>stopPropagation</span><span></span></div><div><span>ignoreInputs</span><span></span></div><div><span>conflictBehavior</span><span>`);
+var _tmpl$10 = /*#__PURE__*/ template(`<span><span>`);
+var _tmpl$11 = /*#__PURE__*/ template(`<span>→`);
+var _tmpl$12 = /*#__PURE__*/ template(`<div><div>Step <!> — </div><div><div><div></div></div><span aria-hidden=true>-></span><div>`);
+var _tmpl$13 = /*#__PURE__*/ template(`<div>Select a hotkey or sequence from the list to view its details`);
 const PLATFORM_ROWS = [
 	{
 		id: "mac",
@@ -51,9 +66,6 @@ function KeyBreakdownPlatformTable(props) {
 		return _el$;
 	})();
 }
-function sequenceKey(sequence) {
-	return sequence.join("|");
-}
 function isSequenceRegistration(reg) {
 	return "sequence" in reg && Array.isArray(reg.sequence);
 }
@@ -63,49 +75,29 @@ function getTargetDescription(target) {
 	if (target instanceof HTMLElement) return `${target.tagName.toLowerCase()}${target.id ? `#${target.id}` : ""}${target.className ? `.${target.className.split(" ").join(".")}` : ""}`;
 	return "element";
 }
-function findTargetConflicts(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 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";
-	if (behavior === "error") return "conflictItemError";
-	return "conflictItem";
-}
-function getConflictLabel(behavior, isSameTarget) {
-	if (!isSameTarget) return "scope";
-	if (behavior === "allow") return "allowed";
-	if (behavior === "error") return "error";
-	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 conflicts = useRegistrationConflicts(reg);
+	const targetConflicts = () => conflicts().overlapping;
+	const scopeConflicts = () => conflicts().separate;
+	const allConflicts = () => [...targetConflicts(), ...scopeConflicts()];
 	const conflictBehavior = () => reg().options.conflictBehavior ?? "warn";
 	const registrationPlatform = () => reg().options.platform ?? detectPlatform();
-	const rawModParts = createMemo(() => normalizeHotkeyFromParsed(parsed(), registrationPlatform()).split("+"));
+	const keyParts = createMemo(() => formatForDisplay(parsed(), {
+		platform: registrationPlatform(),
+		parts: true
+	}));
 	const styles = props.styles;
 	return [(() => {
-		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));
+		var _el$5 = _tmpl$3(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.nextSibling, _el$10 = _el$1.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, _el$13 = _el$12.nextSibling;
+		insert(_el$6, () => formatRegistration(reg()));
 		insert(_el$9, () => reg().id);
-		insert(_el$1, () => reg().hotkey);
-		insert(_el$11, () => props.getTargetDescription(reg().target));
+		insert(_el$1, () => getBindingKind(reg()));
+		insert(_el$11, () => reg().hotkey);
+		insert(_el$13, () => props.getTargetDescription(reg().target));
 		effect((_p$) => {
-			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;
+			var _v$4 = styles().stateHeader, _v$5 = styles().stateTitle, _v$6 = styles().infoGrid, _v$7 = styles().infoLabel, _v$8 = styles().infoValueMono, _v$9 = styles().infoLabel, _v$0 = styles().infoValueMono, _v$1 = styles().infoLabel, _v$10 = styles().infoValueMono, _v$11 = styles().infoLabel, _v$12 = styles().infoValueMono;
 			_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);
@@ -115,6 +107,8 @@ function HotkeyDetails(props) {
 			_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);
+			_v$11 !== _p$.d && className(_el$12, _p$.d = _v$11);
+			_v$12 !== _p$.l && className(_el$13, _p$.l = _v$12);
 			return _p$;
 		}, {
 			e: void 0,
@@ -125,44 +119,46 @@ function HotkeyDetails(props) {
 			n: void 0,
 			s: void 0,
 			h: void 0,
-			r: void 0
+			r: void 0,
+			d: void 0,
+			l: void 0
 		});
 		return _el$5;
 	})(), (() => {
-		var _el$12 = _tmpl$5(), _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.nextSibling, _el$20 = _el$13.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$23.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$28 = _el$25.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling, _el$31 = _el$22.nextSibling, _el$32 = _el$31.firstChild, _el$34 = _el$32.nextSibling.firstChild, _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$34.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$40 = _el$37.nextSibling, _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling, _el$43 = _el$40.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling, _el$46 = _el$43.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling, _el$49 = _el$46.nextSibling, _el$50 = _el$49.firstChild, _el$51 = _el$50.nextSibling, _el$52 = _el$49.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling, _el$55 = _el$52.nextSibling, _el$56 = _el$55.firstChild, _el$57 = _el$56.nextSibling;
-		insert(_el$17, createComponent(For, {
+		var _el$14 = _tmpl$5(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$21 = _el$20.nextSibling, _el$22 = _el$15.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$25.nextSibling, _el$27 = _el$26.firstChild, _el$28 = _el$27.firstChild, _el$29 = _el$28.nextSibling, _el$30 = _el$27.nextSibling, _el$31 = _el$30.firstChild, _el$32 = _el$31.nextSibling, _el$33 = _el$24.nextSibling, _el$34 = _el$33.firstChild, _el$36 = _el$34.nextSibling.firstChild, _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling, _el$39 = _el$36.nextSibling, _el$40 = _el$39.firstChild, _el$41 = _el$40.nextSibling, _el$42 = _el$39.nextSibling, _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling, _el$45 = _el$42.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, _el$48 = _el$45.nextSibling, _el$49 = _el$48.firstChild, _el$50 = _el$49.nextSibling, _el$51 = _el$48.nextSibling, _el$52 = _el$51.firstChild, _el$53 = _el$52.nextSibling, _el$54 = _el$51.nextSibling, _el$55 = _el$54.firstChild, _el$56 = _el$55.nextSibling, _el$57 = _el$54.nextSibling, _el$58 = _el$57.firstChild, _el$59 = _el$58.nextSibling;
+		insert(_el$19, createComponent(For, {
 			get each() {
-				return rawModParts();
+				return keyParts();
 			},
 			children: (part, i) => [createComponent(Show, {
 				get when() {
 					return i() > 0;
 				},
 				get children() {
-					var _el$64 = _tmpl$6();
-					effect(() => className(_el$64, styles().keyBreakdownPlus));
-					return _el$64;
+					var _el$66 = _tmpl$6();
+					effect(() => className(_el$66, styles().keyBreakdownPlus));
+					return _el$66;
 				}
 			}), (() => {
-				var _el$65 = _tmpl$7();
-				insert(_el$65, part);
-				effect(() => className(_el$65, styles().keyCapLarge));
-				return _el$65;
+				var _el$67 = _tmpl$7();
+				insert(_el$67, part);
+				effect(() => className(_el$67, styles().keyCapLarge));
+				return _el$67;
 			})()]
 		}));
-		insert(_el$19, createComponent(KeyBreakdownPlatformTable, {
+		insert(_el$21, createComponent(KeyBreakdownPlatformTable, {
 			getParsed: () => parsed(),
 			getCanonicalPlatform: registrationPlatform,
 			get styles() {
 				return props.styles;
 			}
 		}));
-		insert(_el$20, createComponent(ActionButtons, { get registration() {
+		insert(_el$22, createComponent(ActionButtons, { get registration() {
 			return reg();
 		} }), null);
-		insert(_el$27, () => reg().options.meta?.name ?? "—");
-		insert(_el$30, () => reg().options.meta?.description ?? "—");
-		insert(_el$24, createComponent(Show, {
+		insert(_el$29, () => reg().options.meta?.name ?? "—");
+		insert(_el$32, () => reg().options.meta?.description ?? "—");
+		insert(_el$26, createComponent(Show, {
 			get when() {
 				return memo(() => !!reg().options.meta)() && Object.keys(reg().options.meta).filter((k) => k !== "name" && k !== "description").length > 0;
 			},
@@ -172,137 +168,134 @@ function HotkeyDetails(props) {
 						return Object.entries(reg().options.meta ?? {}).filter(([k]) => k !== "name" && k !== "description");
 					},
 					children: ([key, value]) => (() => {
-						var _el$66 = _tmpl$2(), _el$67 = _el$66.firstChild, _el$68 = _el$67.nextSibling;
-						insert(_el$67, key);
-						insert(_el$68, () => String(value));
+						var _el$68 = _tmpl$2(), _el$69 = _el$68.firstChild, _el$70 = _el$69.nextSibling;
+						insert(_el$69, key);
+						insert(_el$70, () => String(value));
 						effect((_p$) => {
-							var _v$58 = styles().optionRow, _v$59 = styles().optionLabel, _v$60 = styles().optionValue;
-							_v$58 !== _p$.e && className(_el$66, _p$.e = _v$58);
-							_v$59 !== _p$.t && className(_el$67, _p$.t = _v$59);
-							_v$60 !== _p$.a && className(_el$68, _p$.a = _v$60);
+							var _v$60 = styles().optionRow, _v$61 = styles().optionLabel, _v$62 = styles().optionValue;
+							_v$60 !== _p$.e && className(_el$68, _p$.e = _v$60);
+							_v$61 !== _p$.t && className(_el$69, _p$.t = _v$61);
+							_v$62 !== _p$.a && className(_el$70, _p$.a = _v$62);
 							return _p$;
 						}, {
 							e: void 0,
 							t: void 0,
 							a: void 0
 						});
-						return _el$66;
+						return _el$68;
 					})()
 				});
 			}
 		}), null);
-		insert(_el$36, () => String(reg().options.enabled !== false));
-		insert(_el$39, () => reg().options.eventType ?? "keydown");
-		insert(_el$42, () => String(!!reg().options.preventDefault));
-		insert(_el$45, () => String(!!reg().options.stopPropagation));
-		insert(_el$48, () => String(reg().options.ignoreInputs !== false));
-		insert(_el$51, () => String(!!reg().options.requireReset));
-		insert(_el$54, conflictBehavior);
-		insert(_el$57, () => String(reg().hasFired));
-		insert(_el$12, createComponent(Show, {
+		insert(_el$38, () => String(reg().options.enabled !== false));
+		insert(_el$41, () => reg().options.eventType ?? "keydown");
+		insert(_el$44, () => String(!!reg().options.preventDefault));
+		insert(_el$47, () => String(!!reg().options.stopPropagation));
+		insert(_el$50, () => String(reg().options.ignoreInputs !== false));
+		insert(_el$53, () => String(!!reg().options.requireReset));
+		insert(_el$56, conflictBehavior);
+		insert(_el$59, () => String(reg().hasFired));
+		insert(_el$14, createComponent(Show, {
 			get when() {
 				return allConflicts().length > 0;
 			},
 			get children() {
-				var _el$58 = _tmpl$4(), _el$59 = _el$58.firstChild, _el$62 = _el$59.firstChild.nextSibling;
-				_el$62.nextSibling;
-				var _el$63 = _el$59.nextSibling;
-				insert(_el$59, () => allConflicts().length, _el$62);
-				insert(_el$63, createComponent(For, {
+				var _el$60 = _tmpl$4(), _el$61 = _el$60.firstChild, _el$64 = _el$61.firstChild.nextSibling;
+				_el$64.nextSibling;
+				var _el$65 = _el$61.nextSibling;
+				insert(_el$61, () => allConflicts().length, _el$64);
+				insert(_el$65, createComponent(For, {
 					get each() {
 						return targetConflicts();
 					},
 					children: (conflict) => {
-						const itemStyle = () => props.getConflictItemStyle(conflictBehavior(), true);
-						const label = () => props.getConflictLabel(conflictBehavior(), true);
 						return (() => {
-							var _el$69 = _tmpl$8(), _el$70 = _el$69.firstChild, _el$77 = _el$70.nextSibling.nextSibling, _el$78 = _el$77.nextSibling.nextSibling, _el$79 = _el$78.nextSibling.nextSibling;
-							_el$79.nextSibling;
-							insert(_el$70, label);
-							insert(_el$69, () => conflict.id, _el$77);
-							insert(_el$69, () => props.formatForDisplay(conflict.hotkey), _el$78);
-							insert(_el$69, () => conflict.options.eventType ?? "keydown", _el$79);
-							insert(_el$69, () => props.getTargetDescription(conflict.target), null);
-							effect(() => className(_el$69, styles()[itemStyle()]));
-							return _el$69;
+							var _el$71 = _tmpl$8(), _el$79 = _el$71.firstChild.nextSibling.nextSibling, _el$80 = _el$79.nextSibling.nextSibling, _el$81 = _el$80.nextSibling.nextSibling;
+							_el$81.nextSibling;
+							insert(_el$71, () => conflict.id, _el$79);
+							insert(_el$71, () => formatRegistration(conflict), _el$80);
+							insert(_el$71, () => conflict.options.eventType ?? "keydown", _el$81);
+							insert(_el$71, () => props.getTargetDescription(conflict.target), null);
+							effect(() => className(_el$71, styles().conflictItem));
+							return _el$71;
 						})();
 					}
 				}), null);
-				insert(_el$63, createComponent(For, {
+				insert(_el$65, createComponent(For, {
 					get each() {
 						return scopeConflicts();
 					},
 					children: (conflict) => (() => {
-						var _el$80 = _tmpl$9(), _el$88 = _el$80.firstChild.nextSibling.nextSibling, _el$89 = _el$88.nextSibling.nextSibling, _el$90 = _el$89.nextSibling.nextSibling;
-						_el$90.nextSibling;
-						insert(_el$80, () => conflict.id, _el$88);
-						insert(_el$80, () => props.formatForDisplay(conflict.hotkey), _el$89);
-						insert(_el$80, () => conflict.options.eventType ?? "keydown", _el$90);
-						insert(_el$80, () => props.getTargetDescription(conflict.target), null);
-						effect(() => className(_el$80, styles().conflictItemScope));
-						return _el$80;
+						var _el$82 = _tmpl$9(), _el$90 = _el$82.firstChild.nextSibling.nextSibling, _el$91 = _el$90.nextSibling.nextSibling, _el$92 = _el$91.nextSibling.nextSibling;
+						_el$92.nextSibling;
+						insert(_el$82, () => conflict.id, _el$90);
+						insert(_el$82, () => formatRegistration(conflict), _el$91);
+						insert(_el$82, () => conflict.options.eventType ?? "keydown", _el$92);
+						insert(_el$82, () => props.getTargetDescription(conflict.target), null);
+						effect(() => className(_el$82, styles().conflictItemScope));
+						return _el$82;
 					})()
 				}), null);
 				effect((_p$) => {
-					var _v$11 = styles().detailSection, _v$12 = styles().detailSectionHeader, _v$13 = styles().conflictList;
-					_v$11 !== _p$.e && className(_el$58, _p$.e = _v$11);
-					_v$12 !== _p$.t && className(_el$59, _p$.t = _v$12);
-					_v$13 !== _p$.a && className(_el$63, _p$.a = _v$13);
+					var _v$13 = styles().detailSection, _v$14 = styles().detailSectionHeader, _v$15 = styles().conflictList;
+					_v$13 !== _p$.e && className(_el$60, _p$.e = _v$13);
+					_v$14 !== _p$.t && className(_el$61, _p$.t = _v$14);
+					_v$15 !== _p$.a && className(_el$65, _p$.a = _v$15);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0,
 					a: void 0
 				});
-				return _el$58;
+				return _el$60;
 			}
 		}), null);
 		effect((_p$) => {
-			var _v$14 = styles().detailsGrid, _v$15 = styles().detailSection, _v$16 = styles().detailSectionHeader, _v$17 = styles().keyBreakdownSplitRow, _v$18 = styles().keyBreakdownSplitLeft, _v$19 = styles().keyBreakdown, _v$20 = styles().keyBreakdownSplitArrow, _v$21 = styles().keyBreakdownSplitRight, _v$22 = styles().detailSection, _v$23 = styles().detailSectionHeader, _v$24 = styles().detailSection, _v$25 = styles().detailSectionHeader, _v$26 = styles().optionRow, _v$27 = styles().optionLabel, _v$28 = styles().optionValue, _v$29 = styles().optionRow, _v$30 = styles().optionLabel, _v$31 = styles().optionValue, _v$32 = styles().detailSection, _v$33 = styles().detailSectionHeader, _v$34 = styles().optionRow, _v$35 = styles().optionLabel, _v$36 = reg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$37 = styles().optionRow, _v$38 = styles().optionLabel, _v$39 = styles().optionValue, _v$40 = styles().optionRow, _v$41 = styles().optionLabel, _v$42 = reg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$43 = styles().optionRow, _v$44 = styles().optionLabel, _v$45 = reg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$46 = styles().optionRow, _v$47 = styles().optionLabel, _v$48 = reg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$49 = styles().optionRow, _v$50 = styles().optionLabel, _v$51 = reg().options.requireReset ? styles().optionValueTrue : styles().optionValueFalse, _v$52 = styles().optionRow, _v$53 = styles().optionLabel, _v$54 = styles().optionValue, _v$55 = styles().optionRow, _v$56 = styles().optionLabel, _v$57 = reg().hasFired ? styles().optionValueTrue : styles().optionValueFalse;
-			_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$34, _p$.T = _v$34);
-			_v$35 !== _p$.A && className(_el$35, _p$.A = _v$35);
-			_v$36 !== _p$.O && className(_el$36, _p$.O = _v$36);
-			_v$37 !== _p$.I && className(_el$37, _p$.I = _v$37);
-			_v$38 !== _p$.S && className(_el$38, _p$.S = _v$38);
-			_v$39 !== _p$.W && className(_el$39, _p$.W = _v$39);
-			_v$40 !== _p$.C && className(_el$40, _p$.C = _v$40);
-			_v$41 !== _p$.B && className(_el$41, _p$.B = _v$41);
-			_v$42 !== _p$.v && className(_el$42, _p$.v = _v$42);
-			_v$43 !== _p$.k && className(_el$43, _p$.k = _v$43);
-			_v$44 !== _p$.x && className(_el$44, _p$.x = _v$44);
-			_v$45 !== _p$.j && className(_el$45, _p$.j = _v$45);
-			_v$46 !== _p$.q && className(_el$46, _p$.q = _v$46);
-			_v$47 !== _p$.z && className(_el$47, _p$.z = _v$47);
-			_v$48 !== _p$.P && className(_el$48, _p$.P = _v$48);
-			_v$49 !== _p$.H && className(_el$49, _p$.H = _v$49);
-			_v$50 !== _p$.F && className(_el$50, _p$.F = _v$50);
-			_v$51 !== _p$.M && className(_el$51, _p$.M = _v$51);
-			_v$52 !== _p$.D && className(_el$52, _p$.D = _v$52);
-			_v$53 !== _p$.R && className(_el$53, _p$.R = _v$53);
-			_v$54 !== _p$.E && className(_el$54, _p$.E = _v$54);
-			_v$55 !== _p$.L && className(_el$55, _p$.L = _v$55);
-			_v$56 !== _p$.N && className(_el$56, _p$.N = _v$56);
-			_v$57 !== _p$.G && className(_el$57, _p$.G = _v$57);
+			var _v$16 = styles().detailsGrid, _v$17 = styles().detailSection, _v$18 = styles().detailSectionHeader, _v$19 = styles().keyBreakdownSplitRow, _v$20 = styles().keyBreakdownSplitLeft, _v$21 = styles().keyBreakdown, _v$22 = styles().keyBreakdownSplitArrow, _v$23 = styles().keyBreakdownSplitRight, _v$24 = styles().detailSection, _v$25 = styles().detailSectionHeader, _v$26 = styles().detailSection, _v$27 = styles().detailSectionHeader, _v$28 = styles().optionRow, _v$29 = styles().optionLabel, _v$30 = styles().optionValue, _v$31 = styles().optionRow, _v$32 = styles().optionLabel, _v$33 = styles().optionValue, _v$34 = styles().detailSection, _v$35 = styles().detailSectionHeader, _v$36 = styles().optionRow, _v$37 = styles().optionLabel, _v$38 = reg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$39 = styles().optionRow, _v$40 = styles().optionLabel, _v$41 = styles().optionValue, _v$42 = styles().optionRow, _v$43 = styles().optionLabel, _v$44 = reg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$45 = styles().optionRow, _v$46 = styles().optionLabel, _v$47 = reg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$48 = styles().optionRow, _v$49 = styles().optionLabel, _v$50 = reg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$51 = styles().optionRow, _v$52 = styles().optionLabel, _v$53 = reg().options.requireReset ? styles().optionValueTrue : styles().optionValueFalse, _v$54 = styles().optionRow, _v$55 = styles().optionLabel, _v$56 = styles().optionValue, _v$57 = styles().optionRow, _v$58 = styles().optionLabel, _v$59 = reg().hasFired ? styles().optionValueTrue : styles().optionValueFalse;
+			_v$16 !== _p$.e && className(_el$14, _p$.e = _v$16);
+			_v$17 !== _p$.t && className(_el$15, _p$.t = _v$17);
+			_v$18 !== _p$.a && className(_el$16, _p$.a = _v$18);
+			_v$19 !== _p$.o && className(_el$17, _p$.o = _v$19);
+			_v$20 !== _p$.i && className(_el$18, _p$.i = _v$20);
+			_v$21 !== _p$.n && className(_el$19, _p$.n = _v$21);
+			_v$22 !== _p$.s && className(_el$20, _p$.s = _v$22);
+			_v$23 !== _p$.h && className(_el$21, _p$.h = _v$23);
+			_v$24 !== _p$.r && className(_el$22, _p$.r = _v$24);
+			_v$25 !== _p$.d && className(_el$23, _p$.d = _v$25);
+			_v$26 !== _p$.l && className(_el$24, _p$.l = _v$26);
+			_v$27 !== _p$.u && className(_el$25, _p$.u = _v$27);
+			_v$28 !== _p$.c && className(_el$27, _p$.c = _v$28);
+			_v$29 !== _p$.w && className(_el$28, _p$.w = _v$29);
+			_v$30 !== _p$.m && className(_el$29, _p$.m = _v$30);
+			_v$31 !== _p$.f && className(_el$30, _p$.f = _v$31);
+			_v$32 !== _p$.y && className(_el$31, _p$.y = _v$32);
+			_v$33 !== _p$.g && className(_el$32, _p$.g = _v$33);
+			_v$34 !== _p$.p && className(_el$33, _p$.p = _v$34);
+			_v$35 !== _p$.b && className(_el$34, _p$.b = _v$35);
+			_v$36 !== _p$.T && className(_el$36, _p$.T = _v$36);
+			_v$37 !== _p$.A && className(_el$37, _p$.A = _v$37);
+			_v$38 !== _p$.O && className(_el$38, _p$.O = _v$38);
+			_v$39 !== _p$.I && className(_el$39, _p$.I = _v$39);
+			_v$40 !== _p$.S && className(_el$40, _p$.S = _v$40);
+			_v$41 !== _p$.W && className(_el$41, _p$.W = _v$41);
+			_v$42 !== _p$.C && className(_el$42, _p$.C = _v$42);
+			_v$43 !== _p$.B && className(_el$43, _p$.B = _v$43);
+			_v$44 !== _p$.v && className(_el$44, _p$.v = _v$44);
+			_v$45 !== _p$.k && className(_el$45, _p$.k = _v$45);
+			_v$46 !== _p$.x && className(_el$46, _p$.x = _v$46);
+			_v$47 !== _p$.j && className(_el$47, _p$.j = _v$47);
+			_v$48 !== _p$.q && className(_el$48, _p$.q = _v$48);
+			_v$49 !== _p$.z && className(_el$49, _p$.z = _v$49);
+			_v$50 !== _p$.P && className(_el$50, _p$.P = _v$50);
+			_v$51 !== _p$.H && className(_el$51, _p$.H = _v$51);
+			_v$52 !== _p$.F && className(_el$52, _p$.F = _v$52);
+			_v$53 !== _p$.M && className(_el$53, _p$.M = _v$53);
+			_v$54 !== _p$.D && className(_el$54, _p$.D = _v$54);
+			_v$55 !== _p$.R && className(_el$55, _p$.R = _v$55);
+			_v$56 !== _p$.E && className(_el$56, _p$.E = _v$56);
+			_v$57 !== _p$.L && className(_el$57, _p$.L = _v$57);
+			_v$58 !== _p$.N && className(_el$58, _p$.N = _v$58);
+			_v$59 !== _p$.G && className(_el$59, _p$.G = _v$59);
 			return _p$;
 		}, {
 			e: void 0,
@@ -350,68 +343,75 @@ function HotkeyDetails(props) {
 			N: void 0,
 			G: void 0
 		});
-		return _el$12;
+		return _el$14;
 	})()];
 }
 function SequenceDetails(props) {
 	const reg = () => props.registration;
 	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 conflicts = useRegistrationConflicts(liveReg);
+	const targetConflicts = () => conflicts().overlapping;
+	const scopeConflicts = () => conflicts().separate;
+	const allConflicts = () => [...targetConflicts(), ...scopeConflicts()];
 	const conflictBehavior = () => liveReg().options.conflictBehavior ?? "warn";
 	const sequenceCanonicalPlatform = createMemo(() => liveReg().options.platform ?? detectPlatform());
 	const styles = props.styles;
 	return [(() => {
-		var _el$91 = _tmpl$0(), _el$92 = _el$91.firstChild, _el$93 = _el$92.nextSibling, _el$94 = _el$93.firstChild, _el$95 = _el$94.nextSibling, _el$96 = _el$95.nextSibling, _el$97 = _el$96.nextSibling, _el$98 = _el$97.nextSibling, _el$99 = _el$98.nextSibling;
-		insert(_el$92, createComponent(For, {
+		var _el$93 = _tmpl$0(), _el$94 = _el$93.firstChild, _el$95 = _el$94.nextSibling, _el$96 = _el$95.firstChild, _el$97 = _el$96.nextSibling, _el$98 = _el$97.nextSibling, _el$99 = _el$98.nextSibling, _el$100 = _el$99.nextSibling, _el$101 = _el$100.nextSibling, _el$102 = _el$101.nextSibling, _el$103 = _el$102.nextSibling, _el$104 = _el$103.nextSibling, _el$105 = _el$104.nextSibling;
+		insert(_el$94, createComponent(For, {
 			get each() {
 				return liveReg().sequence;
 			},
 			children: (step, i) => (() => {
-				var _el$147 = _tmpl$10(), _el$148 = _el$147.firstChild;
-				insert(_el$147, createComponent(Show, {
+				var _el$153 = _tmpl$10(), _el$154 = _el$153.firstChild;
+				insert(_el$153, createComponent(Show, {
 					get when() {
 						return i() > 0;
 					},
 					children: " "
-				}), _el$148);
-				insert(_el$148, () => props.formatForDisplay(step));
-				effect(() => className(_el$148, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
-				return _el$147;
+				}), _el$154);
+				insert(_el$154, () => formatForDisplay(step, { platform: sequenceCanonicalPlatform() }));
+				effect(() => className(_el$154, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
+				return _el$153;
 			})()
 		}));
-		insert(_el$95, () => liveReg().id);
-		insert(_el$97, createComponent(For, {
+		insert(_el$97, () => liveReg().id);
+		insert(_el$99, () => getBindingKind(liveReg()));
+		insert(_el$101, () => liveReg().sequence.join(" → "));
+		insert(_el$103, createComponent(For, {
 			get each() {
 				return liveReg().sequence;
 			},
 			children: (step, i) => (() => {
-				var _el$149 = _tmpl$10(), _el$150 = _el$149.firstChild;
-				insert(_el$149, createComponent(Show, {
+				var _el$155 = _tmpl$10(), _el$156 = _el$155.firstChild;
+				insert(_el$155, createComponent(Show, {
 					get when() {
 						return i() > 0;
 					},
 					children: " "
-				}), _el$150);
-				insert(_el$150, () => props.formatForDisplay(step));
-				effect(() => className(_el$150, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
-				return _el$149;
+				}), _el$156);
+				insert(_el$156, () => formatForDisplay(step, { platform: sequenceCanonicalPlatform() }));
+				effect(() => className(_el$156, i() < matchedSteps() ? styles().sequenceStepMatched : void 0));
+				return _el$155;
 			})()
 		}));
-		insert(_el$99, () => props.getTargetDescription(liveReg().target));
+		insert(_el$105, () => props.getTargetDescription(liveReg().target));
 		effect((_p$) => {
-			var _v$61 = styles().stateHeader, _v$62 = styles().stateTitle, _v$63 = styles().infoGrid, _v$64 = styles().infoLabel, _v$65 = styles().infoValueMono, _v$66 = styles().infoLabel, _v$67 = styles().infoValueMono, _v$68 = styles().infoLabel, _v$69 = styles().infoValueMono;
-			_v$61 !== _p$.e && className(_el$91, _p$.e = _v$61);
-			_v$62 !== _p$.t && className(_el$92, _p$.t = _v$62);
-			_v$63 !== _p$.a && className(_el$93, _p$.a = _v$63);
-			_v$64 !== _p$.o && className(_el$94, _p$.o = _v$64);
-			_v$65 !== _p$.i && className(_el$95, _p$.i = _v$65);
-			_v$66 !== _p$.n && className(_el$96, _p$.n = _v$66);
-			_v$67 !== _p$.s && className(_el$97, _p$.s = _v$67);
-			_v$68 !== _p$.h && className(_el$98, _p$.h = _v$68);
-			_v$69 !== _p$.r && className(_el$99, _p$.r = _v$69);
+			var _v$63 = styles().stateHeader, _v$64 = styles().stateTitle, _v$65 = styles().infoGrid, _v$66 = styles().infoLabel, _v$67 = styles().infoValueMono, _v$68 = styles().infoLabel, _v$69 = styles().infoValueMono, _v$70 = styles().infoLabel, _v$71 = styles().infoValueMono, _v$72 = styles().infoLabel, _v$73 = styles().infoValueMono, _v$74 = styles().infoLabel, _v$75 = styles().infoValueMono;
+			_v$63 !== _p$.e && className(_el$93, _p$.e = _v$63);
+			_v$64 !== _p$.t && className(_el$94, _p$.t = _v$64);
+			_v$65 !== _p$.a && className(_el$95, _p$.a = _v$65);
+			_v$66 !== _p$.o && className(_el$96, _p$.o = _v$66);
+			_v$67 !== _p$.i && className(_el$97, _p$.i = _v$67);
+			_v$68 !== _p$.n && className(_el$98, _p$.n = _v$68);
+			_v$69 !== _p$.s && className(_el$99, _p$.s = _v$69);
+			_v$70 !== _p$.h && className(_el$100, _p$.h = _v$70);
+			_v$71 !== _p$.r && className(_el$101, _p$.r = _v$71);
+			_v$72 !== _p$.d && className(_el$102, _p$.d = _v$72);
+			_v$73 !== _p$.l && className(_el$103, _p$.l = _v$73);
+			_v$74 !== _p$.u && className(_el$104, _p$.u = _v$74);
+			_v$75 !== _p$.c && className(_el$105, _p$.c = _v$75);
 			return _p$;
 		}, {
 			e: void 0,
@@ -422,12 +422,16 @@ function SequenceDetails(props) {
 			n: void 0,
 			s: void 0,
 			h: void 0,
-			r: void 0
+			r: void 0,
+			d: void 0,
+			l: void 0,
+			u: void 0,
+			c: void 0
 		});
-		return _el$91;
+		return _el$93;
 	})(), (() => {
-		var _el$100 = _tmpl$1(), _el$101 = _el$100.firstChild, _el$102 = _el$101.firstChild, _el$103 = _el$102.nextSibling, _el$104 = _el$103.nextSibling, _el$105 = _el$101.nextSibling, _el$106 = _el$105.firstChild, _el$107 = _el$105.nextSibling, _el$108 = _el$107.firstChild, _el$109 = _el$108.nextSibling, _el$110 = _el$109.firstChild, _el$111 = _el$110.firstChild, _el$112 = _el$111.nextSibling, _el$113 = _el$110.nextSibling, _el$114 = _el$113.firstChild, _el$115 = _el$114.nextSibling, _el$116 = _el$107.nextSibling, _el$117 = _el$116.firstChild, _el$119 = _el$117.nextSibling.firstChild, _el$120 = _el$119.firstChild, _el$121 = _el$120.nextSibling, _el$122 = _el$119.nextSibling, _el$123 = _el$122.firstChild, _el$124 = _el$123.nextSibling, _el$125 = _el$122.nextSibling, _el$126 = _el$125.firstChild, _el$127 = _el$126.nextSibling, _el$128 = _el$127.firstChild, _el$129 = _el$125.nextSibling, _el$130 = _el$129.firstChild, _el$131 = _el$130.nextSibling, _el$132 = _el$129.nextSibling, _el$133 = _el$132.firstChild, _el$134 = _el$133.nextSibling, _el$135 = _el$132.nextSibling, _el$136 = _el$135.firstChild, _el$137 = _el$136.nextSibling, _el$138 = _el$135.nextSibling, _el$139 = _el$138.firstChild, _el$140 = _el$139.nextSibling;
-		insert(_el$103, createComponent(For, {
+		var _el$106 = _tmpl$1(), _el$107 = _el$106.firstChild, _el$108 = _el$107.firstChild, _el$109 = _el$108.nextSibling, _el$110 = _el$109.nextSibling, _el$111 = _el$107.nextSibling, _el$112 = _el$111.firstChild, _el$113 = _el$111.nextSibling, _el$114 = _el$113.firstChild, _el$115 = _el$114.nextSibling, _el$116 = _el$115.firstChild, _el$117 = _el$116.firstChild, _el$118 = _el$117.nextSibling, _el$119 = _el$116.nextSibling, _el$120 = _el$119.firstChild, _el$121 = _el$120.nextSibling, _el$122 = _el$113.nextSibling, _el$123 = _el$122.firstChild, _el$125 = _el$123.nextSibling.firstChild, _el$126 = _el$125.firstChild, _el$127 = _el$126.nextSibling, _el$128 = _el$125.nextSibling, _el$129 = _el$128.firstChild, _el$130 = _el$129.nextSibling, _el$131 = _el$128.nextSibling, _el$132 = _el$131.firstChild, _el$133 = _el$132.nextSibling, _el$134 = _el$133.firstChild, _el$135 = _el$131.nextSibling, _el$136 = _el$135.firstChild, _el$137 = _el$136.nextSibling, _el$138 = _el$135.nextSibling, _el$139 = _el$138.firstChild, _el$140 = _el$139.nextSibling, _el$141 = _el$138.nextSibling, _el$142 = _el$141.firstChild, _el$143 = _el$142.nextSibling, _el$144 = _el$141.nextSibling, _el$145 = _el$144.firstChild, _el$146 = _el$145.nextSibling;
+		insert(_el$109, createComponent(For, {
 			get each() {
 				return liveReg().sequence;
 			},
@@ -436,50 +440,54 @@ function SequenceDetails(props) {
 					return i() > 0;
 				},
 				get children() {
-					var _el$151 = _tmpl$11();
-					effect(() => className(_el$151, styles().keyBreakdownPlus));
-					return _el$151;
+					var _el$157 = _tmpl$11();
+					effect(() => className(_el$157, styles().keyBreakdownPlus));
+					return _el$157;
 				}
 			}), (() => {
-				var _el$152 = _tmpl$7();
-				insert(_el$152, () => props.formatForDisplay(step));
-				effect(() => className(_el$152, clsx(styles().keyCapLarge, i() < matchedSteps() && styles().keyCapLargeInProgress)));
-				return _el$152;
+				var _el$158 = _tmpl$7();
+				insert(_el$158, () => formatForDisplay(step, { platform: sequenceCanonicalPlatform() }));
+				effect(() => className(_el$158, clsx(styles().keyCapLarge, i() < matchedSteps() && styles().keyCapLargeInProgress)));
+				return _el$158;
 			})()]
 		}));
-		insert(_el$101, createComponent(For, {
+		insert(_el$107, createComponent(For, {
 			get each() {
 				return liveReg().sequence;
 			},
 			children: (step, stepIdx) => {
 				const stepParsed = () => parseHotkey(step, sequenceCanonicalPlatform());
-				const stepRawParts = () => normalizeHotkey(step, sequenceCanonicalPlatform()).split("+");
+				const stepParts = () => formatForDisplay(stepParsed(), {
+					platform: sequenceCanonicalPlatform(),
+					parts: true
+				});
 				return (() => {
-					var _el$153 = _tmpl$12(), _el$154 = _el$153.firstChild;
-					_el$154.firstChild;
-					var _el$156 = _el$154.nextSibling, _el$157 = _el$156.firstChild, _el$158 = _el$157.firstChild, _el$159 = _el$157.nextSibling, _el$160 = _el$159.nextSibling;
-					insert(_el$154, () => stepIdx() + 1, null);
-					insert(_el$158, createComponent(For, {
+					var _el$159 = _tmpl$12(), _el$160 = _el$159.firstChild, _el$164 = _el$160.firstChild.nextSibling;
+					_el$164.nextSibling;
+					var _el$165 = _el$160.nextSibling, _el$166 = _el$165.firstChild, _el$167 = _el$166.firstChild, _el$168 = _el$166.nextSibling, _el$169 = _el$168.nextSibling;
+					insert(_el$160, () => stepIdx() + 1, _el$164);
+					insert(_el$160, () => stepParsed().code !== void 0 ? "Code" : "Key", null);
+					insert(_el$167, createComponent(For, {
 						get each() {
-							return stepRawParts();
+							return stepParts();
 						},
 						children: (part, i) => [createComponent(Show, {
 							get when() {
 								return i() > 0;
 							},
 							get children() {
-								var _el$161 = _tmpl$6();
-								effect(() => className(_el$161, styles().keyBreakdownPlus));
-								return _el$161;
+								var _el$170 = _tmpl$6();
+								effect(() => className(_el$170, styles().keyBreakdownPlus));
+								return _el$170;
 							}
 						}), (() => {
-							var _el$162 = _tmpl$7();
-							insert(_el$162, part);
-							effect(() => className(_el$162, styles().keyCapLarge));
-							return _el$162;
+							var _el$171 = _tmpl$7();
+							insert(_el$171, part);
+							effect(() => className(_el$171, styles().keyCapLarge));
+							return _el$171;
 						})()]
 					}));
-					insert(_el$160, createComponent(KeyBreakdownPlatformTable, {
+					insert(_el$169, createComponent(KeyBreakdownPlatformTable, {
 						getParsed: stepParsed,
 						getCanonicalPlatform: () => sequenceCanonicalPlatform(),
 						get styles() {
@@ -487,14 +495,14 @@ function SequenceDetails(props) {
 						}
 					}));
 					effect((_p$) => {
-						var _v$111 = styles().sequenceChordDetail, _v$112 = styles().keyBreakdownSubHeader, _v$113 = styles().keyBreakdownSplitRow, _v$114 = styles().keyBreakdownSplitLeft, _v$115 = styles().keyBreakdown, _v$116 = styles().keyBreakdownSplitArrow, _v$117 = styles().keyBreakdownSplitRight;
-						_v$111 !== _p$.e && className(_el$153, _p$.e = _v$111);
-						_v$112 !== _p$.t && className(_el$154, _p$.t = _v$112);
-						_v$113 !== _p$.a && className(_el$156, _p$.a = _v$113);
-						_v$114 !== _p$.o && className(_el$157, _p$.o = _v$114);
-						_v$115 !== _p$.i && className(_el$158, _p$.i = _v$115);
-						_v$116 !== _p$.n && className(_el$159, _p$.n = _v$116);
-						_v$117 !== _p$.s && className(_el$160, _p$.s = _v$117);
+						var _v$117 = styles().sequenceChordDetail, _v$118 = styles().keyBreakdownSubHeader, _v$119 = styles().keyBreakdownSplitRow, _v$120 = styles().keyBreakdownSplitLeft, _v$121 = styles().keyBreakdown, _v$122 = styles().keyBreakdownSplitArrow, _v$123 = styles().keyBreakdownSplitRight;
+						_v$117 !== _p$.e && className(_el$159, _p$.e = _v$117);
+						_v$118 !== _p$.t && className(_el$160, _p$.t = _v$118);
+						_v$119 !== _p$.a && className(_el$165, _p$.a = _v$119);
+						_v$120 !== _p$.o && className(_el$166, _p$.o = _v$120);
+						_v$121 !== _p$.i && className(_el$167, _p$.i = _v$121);
+						_v$122 !== _p$.n && className(_el$168, _p$.n = _v$122);
+						_v$123 !== _p$.s && className(_el$169, _p$.s = _v$123);
 						return _p$;
 					}, {
 						e: void 0,
@@ -505,16 +513,16 @@ function SequenceDetails(props) {
 						n: void 0,
 						s: void 0
 					});
-					return _el$153;
+					return _el$159;
 				})();
 			}
 		}), null);
-		insert(_el$105, createComponent(ActionButtons, { get registration() {
+		insert(_el$111, createComponent(ActionButtons, { get registration() {
 			return liveReg();
 		} }), null);
-		insert(_el$112, () => liveReg().options.meta?.name ?? "—");
-		insert(_el$115, () => liveReg().options.meta?.description ?? "—");
-		insert(_el$109, createComponent(Show, {
+		insert(_el$118, () => liveReg().options.meta?.name ?? "—");
+		insert(_el$121, () => liveReg().options.meta?.description ?? "—");
+		insert(_el$115, createComponent(Show, {
 			get when() {
 				return memo(() => !!liveReg().options.meta)() && Object.keys(liveReg().options.meta).filter((k) => k !== "name" && k !== "description").length > 0;
 			},
@@ -524,130 +532,127 @@ function SequenceDetails(props) {
 						return Object.entries(liveReg().options.meta ?? {}).filter(([k]) => k !== "name" && k !== "description");
 					},
 					children: ([key, value]) => (() => {
-						var _el$163 = _tmpl$2(), _el$164 = _el$163.firstChild, _el$165 = _el$164.nextSibling;
-						insert(_el$164, key);
-						insert(_el$165, () => String(value));
+						var _el$172 = _tmpl$2(), _el$173 = _el$172.firstChild, _el$174 = _el$173.nextSibling;
+						insert(_el$173, key);
+						insert(_el$174, () => String(value));
 						effect((_p$) => {
-							var _v$118 = styles().optionRow, _v$119 = styles().optionLabel, _v$120 = styles().optionValue;
-							_v$118 !== _p$.e && className(_el$163, _p$.e = _v$118);
-							_v$119 !== _p$.t && className(_el$164, _p$.t = _v$119);
-							_v$120 !== _p$.a && className(_el$165, _p$.a = _v$120);
+							var _v$124 = styles().optionRow, _v$125 = styles().optionLabel, _v$126 = styles().optionValue;
+							_v$124 !== _p$.e && className(_el$172, _p$.e = _v$124);
+							_v$125 !== _p$.t && className(_el$173, _p$.t = _v$125);
+							_v$126 !== _p$.a && className(_el$174, _p$.a = _v$126);
 							return _p$;
 						}, {
 							e: void 0,
 							t: void 0,
 							a: void 0
 						});
-						return _el$163;
+						return _el$172;
 					})()
 				});
 			}
 		}), null);
-		insert(_el$121, () => String(liveReg().options.enabled !== false));
-		insert(_el$124, () => liveReg().options.eventType ?? "keydown");
-		insert(_el$127, () => liveReg().options.timeout ?? 1e3, _el$128);
-		insert(_el$131, () => String(!!liveReg().options.preventDefault));
-		insert(_el$134, () => String(!!liveReg().options.stopPropagation));
-		insert(_el$137, () => String(liveReg().options.ignoreInputs !== false));
-		insert(_el$140, conflictBehavior);
-		insert(_el$100, createComponent(Show, {
+		insert(_el$127, () => String(liveReg().options.enabled !== false));
+		insert(_el$130, () => liveReg().options.eventType ?? "keydown");
+		insert(_el$133, () => liveReg().options.timeout ?? 1e3, _el$134);
+		insert(_el$137, () => String(!!liveReg().options.preventDefault));
+		insert(_el$140, () => String(!!liveReg().options.stopPropagation));
+		insert(_el$143, () => String(liveReg().options.ignoreInputs !== false));
+		insert(_el$146, conflictBehavior);
+		insert(_el$106, createComponent(Show, {
 			get when() {
 				return allConflicts().length > 0;
 			},
 			get children() {
-				var _el$141 = _tmpl$4(), _el$142 = _el$141.firstChild, _el$145 = _el$142.firstChild.nextSibling;
-				_el$145.nextSibling;
-				var _el$146 = _el$142.nextSibling;
-				insert(_el$142, () => allConflicts().length, _el$145);
-				insert(_el$146, createComponent(For, {
+				var _el$147 = _tmpl$4(), _el$148 = _el$147.firstChild, _el$151 = _el$148.firstChild.nextSibling;
+				_el$151.nextSibling;
+				var _el$152 = _el$148.nextSibling;
+				insert(_el$148, () => allConflicts().length, _el$151);
+				insert(_el$152, createComponent(For, {
 					get each() {
 						return targetConflicts();
 					},
 					children: (conflict) => {
-						const itemStyle = () => props.getConflictItemStyle(conflictBehavior(), true);
-						const label = () => props.getConflictLabel(conflictBehavior(), true);
 						return (() => {
-							var _el$166 = _tmpl$8(), _el$167 = _el$166.firstChild, _el$174 = _el$167.nextSibling.nextSibling, _el$175 = _el$174.nextSibling.nextSibling, _el$176 = _el$175.nextSibling.nextSibling;
-							_el$176.nextSibling;
-							insert(_el$167, label);
-							insert(_el$166, () => conflict.id, _el$174);
-							insert(_el$166, () => props.formatHotkeySequence(conflict.sequence), _el$175);
-							insert(_el$166, () => conflict.options.eventType ?? "keydown", _el$176);
-							insert(_el$166, () => props.getTargetDescription(conflict.target), null);
-							effect(() => className(_el$166, styles()[itemStyle()]));
-							return _el$166;
+							var _el$175 = _tmpl$8(), _el$183 = _el$175.firstChild.nextSibling.nextSibling, _el$184 = _el$183.nextSibling.nextSibling, _el$185 = _el$184.nextSibling.nextSibling;
+							_el$185.nextSibling;
+							insert(_el$175, () => conflict.id, _el$183);
+							insert(_el$175, () => formatRegistration(conflict), _el$184);
+							insert(_el$175, () => conflict.options.eventType ?? "keydown", _el$185);
+							insert(_el$175, () => props.getTargetDescription(conflict.target), null);
+							effect(() => className(_el$175, styles().conflictItem));
+							return _el$175;
 						})();
 					}
 				}), null);
-				insert(_el$146, createComponent(For, {
+				insert(_el$152, createComponent(For, {
 					get each() {
 						return scopeConflicts();
 					},
 					children: (conflict) => (() => {
-						var _el$177 = _tmpl$9(), _el$185 = _el$177.firstChild.nextSibling.nextSibling, _el$186 = _el$185.nextSibling.nextSibling, _el$187 = _el$186.nextSibling.nextSibling;
-						_el$187.nextSibling;
-						insert(_el$177, () => conflict.id, _el$185);
-						insert(_el$177, () => props.formatHotkeySequence(conflict.sequence), _el$186);
-						insert(_el$177, () => conflict.options.eventType ?? "keydown", _el$187);
-						insert(_el$177, () => props.getTargetDescription(conflict.target), null);
-						effect(() => className(_el$177, styles().conflictItemScope));
-						return _el$177;
+						var _el$186 = _tmpl$9(), _el$194 = _el$186.firstChild.nextSibling.nextSibling, _el$195 = _el$194.nextSibling.nextSibling, _el$196 = _el$195.nextSibling.nextSibling;
+						_el$196.nextSibling;
+						insert(_el$186, () => conflict.id, _el$194);
+						insert(_el$186, () => formatRegistration(conflict), _el$195);
+						insert(_el$186, () => conflict.options.eventType ?? "keydown", _el$196);
+						insert(_el$186, () => props.getTargetDescription(conflict.target), null);
+						effect(() => className(_el$186, styles().conflictItemScope));
+						return _el$186;
 					})()
 				}), null);
 				effect((_p$) => {
-					var _v$70 = styles().detailSection, _v$71 = styles().detailSectionHeader, _v$72 = styles().conflictList;
-					_v$70 !== _p$.e && className(_el$141, _p$.e = _v$70);
-					_v$71 !== _p$.t && className(_el$142, _p$.t = _v$71);
-					_v$72 !== _p$.a && className(_el$146, _p$.a = _v$72);
+					var _v$76 = styles().detailSection, _v$77 = styles().detailSectionHeader, _v$78 = styles().conflictList;
+					_v$76 !== _p$.e && className(_el$147, _p$.e = _v$76);
+					_v$77 !== _p$.t && className(_el$148, _p$.t = _v$77);
+					_v$78 !== _p$.a && className(_el$152, _p$.a = _v$78);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0,
 					a: void 0
 				});
-				return _el$141;
+				return _el$147;
 			}
 		}), null);
 		effect((_p$) => {
-			var _v$73 = styles().detailsGrid, _v$74 = styles().detailSection, _v$75 = styles().detailSectionHeader, _v$76 = styles().keyBreakdown, _v$77 = styles().keyBreakdownSubHeader, _v$78 = styles().detailSection, _v$79 = styles().detailSectionHeader, _v$80 = styles().detailSection, _v$81 = styles().detailSectionHeader, _v$82 = styles().optionRow, _v$83 = styles().optionLabel, _v$84 = styles().optionValue, _v$85 = styles().optionRow, _v$86 = styles().optionLabel, _v$87 = styles().optionValue, _v$88 = styles().detailSection, _v$89 = styles().detailSectionHeader, _v$90 = styles().optionRow, _v$91 = styles().optionLabel, _v$92 = liveReg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$93 = styles().optionRow, _v$94 = styles().optionLabel, _v$95 = styles().optionValue, _v$96 = styles().optionRow, _v$97 = styles().optionLabel, _v$98 = styles().optionValue, _v$99 = styles().optionRow, _v$100 = styles().optionLabel, _v$101 = liveReg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$102 = styles().optionRow, _v$103 = styles().optionLabel, _v$104 = liveReg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$105 = styles().optionRow, _v$106 = styles().optionLabel, _v$107 = liveReg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$108 = styles().optionRow, _v$109 = styles().optionLabel, _v$110 = styles().optionValue;
-			_v$73 !== _p$.e && className(_el$100, _p$.e = _v$73);
-			_v$74 !== _p$.t && className(_el$101, _p$.t = _v$74);
-			_v$75 !== _p$.a && className(_el$102, _p$.a = _v$75);
-			_v$76 !== _p$.o && className(_el$103, _p$.o = _v$76);
-			_v$77 !== _p$.i && className(_el$104, _p$.i = _v$77);
-			_v$78 !== _p$.n && className(_el$105, _p$.n = _v$78);
-			_v$79 !== _p$.s && className(_el$106, _p$.s = _v$79);
-			_v$80 !== _p$.h && className(_el$107, _p$.h = _v$80);
-			_v$81 !== _p$.r && className(_el$108, _p$.r = _v$81);
-			_v$82 !== _p$.d && className(_el$110, _p$.d = _v$82);
-			_v$83 !== _p$.l && className(_el$111, _p$.l = _v$83);
-			_v$84 !== _p$.u && className(_el$112, _p$.u = _v$84);
-			_v$85 !== _p$.c && className(_el$113, _p$.c = _v$85);
-			_v$86 !== _p$.w && className(_el$114, _p$.w = _v$86);
-			_v$87 !== _p$.m && className(_el$115, _p$.m = _v$87);
-			_v$88 !== _p$.f && className(_el$116, _p$.f = _v$88);
-			_v$89 !== _p$.y && className(_el$117, _p$.y = _v$89);
-			_v$90 !== _p$.g && className(_el$119, _p$.g = _v$90);
-			_v$91 !== _p$.p && className(_el$120, _p$.p = _v$91);
-			_v$92 !== _p$.b && className(_el$121, _p$.b = _v$92);
-			_v$93 !== _p$.T && className(_el$122, _p$.T = _v$93);
-			_v$94 !== _p$.A && className(_el$123, _p$.A = _v$94);
-			_v$95 !== _p$.O && className(_el$124, _p$.O = _v$95);
-			_v$96 !== _p$.I && className(_el$125, _p$.I = _v$96);
-			_v$97 !== _p$.S && className(_el$126, _p$.S = _v$97);
-			_v$98 !== _p$.W && className(_el$127, _p$.W = _v$98);
-			_v$99 !== _p$.C && className(_el$129, _p$.C = _v$99);
-			_v$100 !== _p$.B && className(_el$130, _p$.B = _v$100);
-			_v$101 !== _p$.v && className(_el$131, _p$.v = _v$101);
-			_v$102 !== _p$.k && className(_el$132, _p$.k = _v$102);
-			_v$103 !== _p$.x && className(_el$133, _p$.x = _v$103);
-			_v$104 !== _p$.j && className(_el$134, _p$.j = _v$104);
-			_v$105 !== _p$.q && className(_el$135, _p$.q = _v$105);
-			_v$106 !== _p$.z && className(_el$136, _p$.z = _v$106);
-			_v$107 !== _p$.P && className(_el$137, _p$.P = _v$107);
-			_v$108 !== _p$.H && className(_el$138, _p$.H = _v$108);
-			_v$109 !== _p$.F && className(_el$139, _p$.F = _v$109);
-			_v$110 !== _p$.M && className(_el$140, _p$.M = _v$110);
+			var _v$79 = styles().detailsGrid, _v$80 = styles().detailSection, _v$81 = styles().detailSectionHeader, _v$82 = styles().keyBreakdown, _v$83 = styles().keyBreakdownSubHeader, _v$84 = styles().detailSection, _v$85 = styles().detailSectionHeader, _v$86 = styles().detailSection, _v$87 = styles().detailSectionHeader, _v$88 = styles().optionRow, _v$89 = styles().optionLabel, _v$90 = styles().optionValue, _v$91 = styles().optionRow, _v$92 = styles().optionLabel, _v$93 = styles().optionValue, _v$94 = styles().detailSection, _v$95 = styles().detailSectionHeader, _v$96 = styles().optionRow, _v$97 = styles().optionLabel, _v$98 = liveReg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$99 = styles().optionRow, _v$100 = styles().optionLabel, _v$101 = styles().optionValue, _v$102 = styles().optionRow, _v$103 = styles().optionLabel, _v$104 = styles().optionValue, _v$105 = styles().optionRow, _v$106 = styles().optionLabel, _v$107 = liveReg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$108 = styles().optionRow, _v$109 = styles().optionLabel, _v$110 = liveReg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$111 = styles().optionRow, _v$112 = styles().optionLabel, _v$113 = liveReg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$114 = styles().optionRow, _v$115 = styles().optionLabel, _v$116 = styles().optionValue;
+			_v$79 !== _p$.e && className(_el$106, _p$.e = _v$79);
+			_v$80 !== _p$.t && className(_el$107, _p$.t = _v$80);
+			_v$81 !== _p$.a && className(_el$108, _p$.a = _v$81);
+			_v$82 !== _p$.o && className(_el$109, _p$.o = _v$82);
+			_v$83 !== _p$.i && className(_el$110, _p$.i = _v$83);
+			_v$84 !== _p$.n && className(_el$111, _p$.n = _v$84);
+			_v$85 !== _p$.s && className(_el$112, _p$.s = _v$85);
+			_v$86 !== _p$.h && className(_el$113, _p$.h = _v$86);
+			_v$87 !== _p$.r && className(_el$114, _p$.r = _v$87);
+			_v$88 !== _p$.d && className(_el$116, _p$.d = _v$88);
+			_v$89 !== _p$.l && className(_el$117, _p$.l = _v$89);
+			_v$90 !== _p$.u && className(_el$118, _p$.u = _v$90);
+			_v$91 !== _p$.c && className(_el$119, _p$.c = _v$91);
+			_v$92 !== _p$.w && className(_el$120, _p$.w = _v$92);
+			_v$93 !== _p$.m && className(_el$121, _p$.m = _v$93);
+			_v$94 !== _p$.f && className(_el$122, _p$.f = _v$94);
+			_v$95 !== _p$.y && className(_el$123, _p$.y = _v$95);
+			_v$96 !== _p$.g && className(_el$125, _p$.g = _v$96);
+			_v$97 !== _p$.p && className(_el$126, _p$.p = _v$97);
+			_v$98 !== _p$.b && className(_el$127, _p$.b = _v$98);
+			_v$99 !== _p$.T && className(_el$128, _p$.T = _v$99);
+			_v$100 !== _p$.A && className(_el$129, _p$.A = _v$100);
+			_v$101 !== _p$.O && className(_el$130, _p$.O = _v$101);
+			_v$102 !== _p$.I && className(_el$131, _p$.I = _v$102);
+			_v$103 !== _p$.S && className(_el$132, _p$.S = _v$103);
+			_v$104 !== _p$.W && className(_el$133, _p$.W = _v$104);
+			_v$105 !== _p$.C && className(_el$135, _p$.C = _v$105);
+			_v$106 !== _p$.B && className(_el$136, _p$.B = _v$106);
+			_v$107 !== _p$.v && className(_el$137, _p$.v = _v$107);
+			_v$108 !== _p$.k && className(_el$138, _p$.k = _v$108);
+			_v$109 !== _p$.x && className(_el$139, _p$.x = _v$109);
+			_v$110 !== _p$.j && className(_el$140, _p$.j = _v$110);
+			_v$111 !== _p$.q && className(_el$141, _p$.q = _v$111);
+			_v$112 !== _p$.z && className(_el$142, _p$.z = _v$112);
+			_v$113 !== _p$.P && className(_el$143, _p$.P = _v$113);
+			_v$114 !== _p$.H && className(_el$144, _p$.H = _v$114);
+			_v$115 !== _p$.F && className(_el$145, _p$.F = _v$115);
+			_v$116 !== _p$.M && className(_el$146, _p$.M = _v$116);
 			return _p$;
 		}, {
 			e: void 0,
@@ -689,23 +694,23 @@ function SequenceDetails(props) {
 			F: void 0,
 			M: void 0
 		});
-		return _el$100;
+		return _el$106;
 	})()];
 }
 function DetailsPanel(props) {
 	const styles = useStyles();
 	const state = useHotkeysDevtoolsState();
 	return (() => {
-		var _el$188 = _tmpl$();
-		insert(_el$188, createComponent(Show, {
+		var _el$197 = _tmpl$();
+		insert(_el$197, createComponent(Show, {
 			get when() {
 				return props.selectedRegistration();
 			},
 			get fallback() {
 				return (() => {
-					var _el$189 = _tmpl$13();
-					effect(() => className(_el$189, styles().noSelection));
-					return _el$189;
+					var _el$198 = _tmpl$13();
+					effect(() => className(_el$198, styles().noSelection));
+					return _el$198;
 				})();
 			},
 			children: (reg) => createComponent(Show, {
@@ -717,13 +722,7 @@ function DetailsPanel(props) {
 						get registration() {
 							return reg();
 						},
-						state,
 						getTargetDescription,
-						findTargetConflicts,
-						findScopeConflicts,
-						getConflictItemStyle,
-						getConflictLabel,
-						formatForDisplay,
 						styles
 					});
 				},
@@ -734,22 +733,15 @@ function DetailsPanel(props) {
 						},
 						state,
 						getTargetDescription,
-						findSequenceTargetConflicts,
-						findSequenceScopeConflicts,
-						getConflictItemStyle,
-						getConflictLabel,
-						formatHotkeySequence,
-						formatForDisplay,
 						styles
 					});
 				}
 			})
 		}));
-		effect(() => className(_el$188, styles().stateDetails));
-		return _el$188;
+		effect(() => className(_el$197, styles().stateDetails));
+		return _el$197;
 	})();
 }
 
 //#endregion
-export { DetailsPanel };
-//# sourceMappingURL=DetailsPanel.js.map
+export { DetailsPanel };