@tanstack/hotkeys-devtools 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,45 +1,121 @@
-# @tanstack/hotkeys-devtools
-
-## ⚠️ IMPORTANT NOTICE ⚠️
-
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@tanstack/hotkeys-devtools`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+<div align="center">
+  <img src="./media/header_hotkeys.png" alt="TanStack Hotkeys" />
+</div>
+
+<br />
+
+<div align="center">
+	<a href="https://www.npmjs.com/package/@tanstack/hotkeys" target="\_parent">
+	  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/hotkeys.svg" alt="npm downloads" />
+	</a>
+	<a href="https://github.com/TanStack/hotkeys" target="\_parent">
+	  <img alt="" src="https://img.shields.io/github/stars/TanStack/hotkeys.svg?style=social&label=Star" alt="GitHub stars" />
+	</a>
+	<a href="https://bundlephobia.com/result?p=@tanstack/react-hotkeys@latest" target="\_parent">
+	  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-hotkeys@latest" alt="Bundle size" />
+	</a>
+</div>
+
+<div align="center">
+	<a href="#badge">
+	  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+	</a>
+	<a href="#badge">
+	  <img src="https://img.shields.io/github/v/release/tanstack/hotkeys" alt="Release"/>
+	</a>
+	<a href="https://twitter.com/tan_stack">
+	  <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
+	</a>
+</div>
+
+<div align="center">
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+</div>
+
+# TanStack Hotkeys
+
+> [!NOTE]
+> TanStack Hotkeys is pre-alpha (prototyping phase). We are actively developing the library and are open to feedback and contributions.
+
+Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objects, a cross-platform `Mod` key, a singleton Hotkey Manager, and utilities for cheatsheet UIs—built to stay SSR-friendly.
+
+- Type-safe bindings — template strings (`Mod+Shift+S`, `Escape`) or parsed objects for full control
+- Flexible options — `keydown`/`keyup`, `preventDefault`, `stopPropagation`, conditional enabled, `requireReset`
+- Cross-platform Mod — maps to Cmd on macOS and Ctrl on Windows/Linux
+- Batteries included — validation + matching, sequences (Vim-style), key-state tracking, recorder UI helpers, React hooks, and devtools (in progress)
+
+### <a href="https://tanstack.com/hotkeys">Read the docs →</a>
+
+<br />
+
+> [!NOTE]
+> You may know **TanStack Hotkeys** by our adapter names, too!
+>
+> - [**React Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/react/react-hotkeys)
+> - Solid Hotkeys – needs a contributor!
+> - Angular Hotkeys – needs a contributor!
+> - Svelte Hotkeys – needs a contributor!
+> - Vue Hotkeys – needs a contributor!
+
+## Get Involved
+
+- We welcome issues and pull requests!
+- Participate in [GitHub discussions](https://github.com/TanStack/hotkeys/discussions)
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
+- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+
+## Partners
+
+<div align="center">
+
+<table align="center">
+  <tr>
+    <td>
+      <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS" >
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-D643Zkrv.svg" height="40" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" height="40" />
+          <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
+        </picture>
+      </a>
+    </td>
+    <td>
+      <a href="https://www.cloudflare.com?utm_source=tanstack">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" height="60" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-6Ojsn8yh.svg" height="60" />
+          <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
+        </picture>
+      </a>
+    </td>
+  </tr>
+</table>
+
+<div align="center">
+<img src="media/partner_logo.svg" alt="Keys & you?" height="65">
+<p>
+We're looking for TanStack Hotkeys Partners to join our mission! Partner with us to push the boundaries of TanStack Hotkeys and build amazing things together.
+</p>
+<a href="mailto:partners@tanstack.com?subject=TanStack Hotkeys Partnership"><b>LET'S CHAT</b></a>
+</div>
+
+</div>
+
+## Explore the TanStack Ecosystem
+
+- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
+- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
+- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
+- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
+- <a href="https://github.com/tanstack/hotkeys"><b>TanStack Hotkeys</b></a> – Type‑safe keyboard shortcuts
+- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
+- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
+- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
+- <a href="https://github.com/tanstack/start"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
+- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
+- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
+- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
+
+… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>

package/dist/HotkeysContextProvider.js

@@ -0,0 +1,47 @@
+import { createContext, createEffect, createSignal, onCleanup, useContext } from "solid-js";
+import { createComponent } from "solid-js/web";
+import { HotkeyManager, KeyStateTracker } from "@tanstack/hotkeys";
+
+//#region src/HotkeysContextProvider.tsx
+const HotkeysDevtoolsContext = createContext({
+	registrations: () => [],
+	heldKeys: () => [],
+	heldCodes: () => ({})
+});
+function HotkeysContextProvider(props) {
+	const manager = HotkeyManager.getInstance();
+	const tracker = KeyStateTracker.getInstance();
+	const [registrations, setRegistrations] = createSignal(Array.from(manager.registrations.state.values()));
+	const [heldKeys, setHeldKeys] = createSignal(tracker.store.state.heldKeys);
+	const [heldCodes, setHeldCodes] = createSignal(tracker.store.state.heldCodes);
+	createEffect(() => {
+		const unsubscribe = manager.registrations.subscribe(() => {
+			setRegistrations(Array.from(manager.registrations.state.values()));
+		});
+		onCleanup(() => unsubscribe());
+	});
+	createEffect(() => {
+		const unsubscribe = tracker.store.subscribe(() => {
+			setHeldKeys(tracker.store.state.heldKeys);
+			setHeldCodes(tracker.store.state.heldCodes);
+		});
+		onCleanup(() => unsubscribe());
+	});
+	return createComponent(HotkeysDevtoolsContext.Provider, {
+		value: {
+			registrations,
+			heldKeys,
+			heldCodes
+		},
+		get children() {
+			return props.children;
+		}
+	});
+}
+function useHotkeysDevtoolsState() {
+	return useContext(HotkeysDevtoolsContext);
+}
+
+//#endregion
+export { HotkeysContextProvider, useHotkeysDevtoolsState };
+//# sourceMappingURL=HotkeysContextProvider.js.map

package/dist/HotkeysContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HotkeysContextProvider.js","names":["createContext","createEffect","createSignal","onCleanup","useContext","HotkeyManager","KeyStateTracker","Accessor","HotkeyRegistration","HotkeysDevtoolsContextType","registrations","Array","heldKeys","heldCodes","Record","HotkeysDevtoolsContext","HotkeysContextProvider","props","children","manager","getInstance","tracker","setRegistrations","from","state","values","setHeldKeys","store","setHeldCodes","unsubscribe","subscribe","_$createComponent","Provider","value","useHotkeysDevtoolsState"],"sources":["../src/HotkeysContextProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createSignal,\n  onCleanup,\n  useContext,\n} from 'solid-js'\nimport { HotkeyManager, KeyStateTracker } from '@tanstack/hotkeys'\nimport type { Accessor } from 'solid-js'\nimport type { HotkeyRegistration } from '@tanstack/hotkeys'\n\ninterface HotkeysDevtoolsContextType {\n  registrations: Accessor<Array<HotkeyRegistration>>\n  heldKeys: Accessor<Array<string>>\n  heldCodes: Accessor<Record<string, string>>\n}\n\nconst HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({\n  registrations: () => [],\n  heldKeys: () => [],\n  heldCodes: () => ({}),\n})\n\nexport function HotkeysContextProvider(props: { children: any }) {\n  const manager = HotkeyManager.getInstance()\n  const tracker = KeyStateTracker.getInstance()\n\n  // Create local signals that will be updated by subscriptions\n  const [registrations, setRegistrations] = createSignal<\n    Array<HotkeyRegistration>\n  >(Array.from(manager.registrations.state.values()))\n  const [heldKeys, setHeldKeys] = createSignal<Array<string>>(\n    tracker.store.state.heldKeys,\n  )\n  const [heldCodes, setHeldCodes] = createSignal<Record<string, string>>(\n    tracker.store.state.heldCodes,\n  )\n\n  // Subscribe to HotkeyManager registrations store\n  createEffect(() => {\n    const unsubscribe = manager.registrations.subscribe(() => {\n      setRegistrations(Array.from(manager.registrations.state.values()))\n    })\n    onCleanup(() => unsubscribe())\n  })\n\n  // Subscribe to KeyStateTracker store\n  createEffect(() => {\n    const unsubscribe = tracker.store.subscribe(() => {\n      setHeldKeys(tracker.store.state.heldKeys)\n      setHeldCodes(tracker.store.state.heldCodes)\n    })\n    onCleanup(() => unsubscribe())\n  })\n\n  return (\n    <HotkeysDevtoolsContext.Provider\n      value={{ registrations, heldKeys, heldCodes }}\n    >\n      {props.children}\n    </HotkeysDevtoolsContext.Provider>\n  )\n}\n\nexport function useHotkeysDevtoolsState() {\n  return useContext(HotkeysDevtoolsContext)\n}\n"],"mappings":";;;;;AAiBA,MAAMe,yBAAyBf,cAA0C;CACvEU,qBAAqB,EAAE;CACvBE,gBAAgB,EAAE;CAClBC,kBAAkB,EAAE;CACrB,CAAC;AAEF,SAAgBG,uBAAuBC,OAA0B;CAC/D,MAAME,UAAUd,cAAce,aAAa;CAC3C,MAAMC,UAAUf,gBAAgBc,aAAa;CAG7C,MAAM,CAACV,eAAeY,oBAAoBpB,aAExCS,MAAMY,KAAKJ,QAAQT,cAAcc,MAAMC,QAAQ,CAAC,CAAC;CACnD,MAAM,CAACb,UAAUc,eAAexB,aAC9BmB,QAAQM,MAAMH,MAAMZ,SACrB;CACD,MAAM,CAACC,WAAWe,gBAAgB1B,aAChCmB,QAAQM,MAAMH,MAAMX,UACrB;AAGDZ,oBAAmB;EACjB,MAAM4B,cAAcV,QAAQT,cAAcoB,gBAAgB;AACxDR,oBAAiBX,MAAMY,KAAKJ,QAAQT,cAAcc,MAAMC,QAAQ,CAAC,CAAC;IAClE;AACFtB,kBAAgB0B,aAAa,CAAC;GAC9B;AAGF5B,oBAAmB;EACjB,MAAM4B,cAAcR,QAAQM,MAAMG,gBAAgB;AAChDJ,eAAYL,QAAQM,MAAMH,MAAMZ,SAAS;AACzCgB,gBAAaP,QAAQM,MAAMH,MAAMX,UAAU;IAC3C;AACFV,kBAAgB0B,aAAa,CAAC;GAC9B;AAEF,QAAAE,gBACGhB,uBAAuBiB,UAAQ;EAC9BC,OAAO;GAAEvB;GAAeE;GAAUC;GAAW;EAAA,IAAAK,WAAA;AAAA,UAE5CD,MAAMC;;EAAQ,CAAA;;AAKrB,SAAgBgB,0BAA0B;AACxC,QAAO9B,WAAWW,uBAAuB"}

package/dist/HotkeysDevtools.js

@@ -0,0 +1,14 @@
+import { HotkeysContextProvider } from "./HotkeysContextProvider.js";
+import { Shell } from "./components/Shell.js";
+import { createComponent } from "solid-js/web";
+
+//#region src/HotkeysDevtools.tsx
+function HotkeysDevtools() {
+	return createComponent(HotkeysContextProvider, { get children() {
+		return createComponent(Shell, {});
+	} });
+}
+
+//#endregion
+export { HotkeysDevtools as default };
+//# sourceMappingURL=HotkeysDevtools.js.map

package/dist/HotkeysDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HotkeysDevtools.js","names":["HotkeysContextProvider","Shell","HotkeysDevtools","_$createComponent","children"],"sources":["../src/HotkeysDevtools.tsx"],"sourcesContent":["import { HotkeysContextProvider } from './HotkeysContextProvider'\nimport { Shell } from './components/Shell'\n\nexport default function HotkeysDevtools() {\n  return (\n    <HotkeysContextProvider>\n      <Shell />\n    </HotkeysContextProvider>\n  )\n}\n"],"mappings":";;;;;AAGA,SAAwBE,kBAAkB;AACxC,QAAAC,gBACGH,wBAAsB,EAAA,IAAAI,WAAA;AAAA,SAAAD,gBACpBF,OAAK,EAAA,CAAA;IAAA,CAAA"}

package/dist/components/ActionButtons.js

@@ -0,0 +1,33 @@
+import { useStyles } from "../styles/use-styles.js";
+import { className, delegateEvents, effect, template } from "solid-js/web";
+import { HotkeyManager } from "@tanstack/hotkeys";
+
+//#region src/components/ActionButtons.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><button><span></span>Trigger`);
+function ActionButtons(props) {
+	const styles = useStyles();
+	const handleTrigger = () => {
+		HotkeyManager.getInstance().triggerRegistration(props.registration.id);
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+		_el$2.$$mousedown = handleTrigger;
+		effect((_p$) => {
+			var _v$ = styles().actionsRow, _v$2 = styles().actionButton, _v$3 = styles().actionDotGreen;
+			_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);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+}
+delegateEvents(["mousedown"]);
+
+//#endregion
+export { ActionButtons };
+//# sourceMappingURL=ActionButtons.js.map

package/dist/components/ActionButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtons.js","names":["HotkeyManager","useStyles","HotkeyRegistration","ActionButtonsProps","registration","ActionButtons","props","styles","handleTrigger","manager","getInstance","triggerRegistration","id","_el$","_tmpl$","_el$2","firstChild","_el$3","$$mousedown","_$effect","_p$","_v$","actionsRow","_v$2","actionButton","_v$3","actionDotGreen","e","_$className","t","a","undefined","_$delegateEvents"],"sources":["../../src/components/ActionButtons.tsx"],"sourcesContent":["import { HotkeyManager } from '@tanstack/hotkeys'\nimport { useStyles } from '../styles/use-styles'\nimport type { HotkeyRegistration } from '@tanstack/hotkeys'\n\ntype ActionButtonsProps = {\n  registration: HotkeyRegistration\n}\n\nexport function ActionButtons(props: ActionButtonsProps) {\n  const styles = useStyles()\n\n  const handleTrigger = () => {\n    const manager = HotkeyManager.getInstance()\n    manager.triggerRegistration(props.registration.id)\n  }\n\n  return (\n    <div class={styles().actionsRow}>\n      <button class={styles().actionButton} onMouseDown={handleTrigger}>\n        <span class={styles().actionDotGreen} />\n        Trigger\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAQA,SAAgBK,cAAcC,OAA2B;CACvD,MAAMC,SAASN,WAAW;CAE1B,MAAMO,sBAAsB;AAE1BC,EADgBT,cAAcU,aAAa,CACnCC,oBAAoBL,MAAMF,aAAaQ,GAAG;;AAGpD,eAAA;EAAA,IAAAC,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC;AAAAD,QAAAG,cAEuDV;AAAaW,UAAAC,QAAA;GAAA,IAAAC,MADtDd,QAAQ,CAACe,YAAUC,OACdhB,QAAQ,CAACiB,cAAYC,OACrBlB,QAAQ,CAACmB;AAAcL,WAAAD,IAAAO,KAAAC,UAAAf,MAAAO,IAAAO,IAAAN,IAAA;AAAAE,YAAAH,IAAAS,KAAAD,UAAAb,OAAAK,IAAAS,IAAAN,KAAA;AAAAE,YAAAL,IAAAU,KAAAF,UAAAX,OAAAG,IAAAU,IAAAL,KAAA;AAAA,UAAAL;KAAA;GAAAO,GAAAI;GAAAF,GAAAE;GAAAD,GAAAC;GAAA,CAAA;AAAA,SAAAlB;KAAA;;AAK3CmB,eAAA,CAAA,YAAA,CAAA"}

package/dist/components/DetailsPanel.js

@@ -0,0 +1,268 @@
+import { useHotkeysDevtoolsState } from "../HotkeysContextProvider.js";
+import { useStyles } from "../styles/use-styles.js";
+import { ActionButtons } from "./ActionButtons.js";
+import { For, Show, createMemo } from "solid-js";
+import { className, createComponent, effect, insert, template } from "solid-js/web";
+import { formatForDisplay } from "@tanstack/hotkeys";
+
+//#region src/components/DetailsPanel.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div>Select a hotkey from the list to view its details`), _tmpl$3 = /* @__PURE__ */ template(`<div><div></div><div><div>ID</div><div></div><div>Raw</div><div></div><div>Target</div><div>`), _tmpl$4 = /* @__PURE__ */ template(`<div><div>Conflicts (<!>)</div><div>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div><div>Key Breakdown</div><div></div></div><div><div>Actions</div></div><div><div>Options</div><div><div><span>enabled</span><span></span></div><div><span>eventType</span><span></span></div><div><span>preventDefault</span><span></span></div><div><span>stopPropagation</span><span></span></div><div><span>ignoreInputs</span><span></span></div><div><span>requireReset</span><span></span></div><div><span>conflictBehavior</span><span></span></div><div><span>hasFired</span><span>`), _tmpl$6 = /* @__PURE__ */ template(`<span>+`), _tmpl$7 = /* @__PURE__ */ template(`<span>`), _tmpl$8 = /* @__PURE__ */ template(`<div><span></span> <!>: <!> (<!>) on `), _tmpl$9 = /* @__PURE__ */ template(`<div><span>scope</span> <!>: <!> (<!>) on `);
+function getTargetDescription(target) {
+	if (typeof document !== "undefined" && target === document) return "document";
+	if (typeof window !== "undefined" && target === window) return "window";
+	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 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 DetailsPanel(props) {
+	const styles = useStyles();
+	const state = useHotkeysDevtoolsState();
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.selectedRegistration();
+			},
+			get fallback() {
+				return (() => {
+					var _el$2 = _tmpl$2();
+					effect(() => className(_el$2, styles().noSelection));
+					return _el$2;
+				})();
+			},
+			children: (reg) => {
+				const parsed = () => reg().parsedHotkey;
+				const targetConflicts = createMemo(() => findTargetConflicts(reg(), state.registrations()));
+				const scopeConflicts = createMemo(() => findScopeConflicts(reg(), state.registrations()));
+				const allConflicts = createMemo(() => [...targetConflicts(), ...scopeConflicts()]);
+				const conflictBehavior = () => reg().options.conflictBehavior ?? "warn";
+				const keyParts = createMemo(() => {
+					const parts = [];
+					const p = parsed();
+					if (p.ctrl) parts.push("Ctrl");
+					if (p.shift) parts.push("Shift");
+					if (p.alt) parts.push("Alt");
+					if (p.meta) parts.push("Meta");
+					parts.push(p.key);
+					return parts;
+				});
+				return [(() => {
+					var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.nextSibling;
+					insert(_el$4, () => formatForDisplay(reg().hotkey));
+					insert(_el$7, () => reg().id);
+					insert(_el$9, () => reg().hotkey);
+					insert(_el$1, () => getTargetDescription(reg().target));
+					effect((_p$) => {
+						var _v$ = styles().stateHeader, _v$2 = styles().stateTitle, _v$3 = styles().infoGrid, _v$4 = styles().infoLabel, _v$5 = styles().infoValueMono, _v$6 = styles().infoLabel, _v$7 = styles().infoValueMono, _v$8 = styles().infoLabel, _v$9 = styles().infoValueMono;
+						_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+						_v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+						_v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
+						_v$4 !== _p$.o && className(_el$6, _p$.o = _v$4);
+						_v$5 !== _p$.i && className(_el$7, _p$.i = _v$5);
+						_v$6 !== _p$.n && className(_el$8, _p$.n = _v$6);
+						_v$7 !== _p$.s && className(_el$9, _p$.s = _v$7);
+						_v$8 !== _p$.h && className(_el$0, _p$.h = _v$8);
+						_v$9 !== _p$.r && className(_el$1, _p$.r = _v$9);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0,
+						n: void 0,
+						s: void 0,
+						h: void 0,
+						r: void 0
+					});
+					return _el$3;
+				})(), (() => {
+					var _el$10 = _tmpl$5(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$11.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.firstChild, _el$19 = _el$17.nextSibling.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$19.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$23.nextSibling, _el$25 = _el$22.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$28 = _el$25.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling, _el$31 = _el$28.nextSibling, _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling, _el$34 = _el$31.nextSibling, _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$34.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$40 = _el$37.nextSibling, _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling;
+					insert(_el$13, createComponent(For, {
+						get each() {
+							return keyParts();
+						},
+						children: (part, i) => [createComponent(Show, {
+							get when() {
+								return i() > 0;
+							},
+							get children() {
+								var _el$49 = _tmpl$6();
+								effect(() => className(_el$49, styles().keyBreakdownPlus));
+								return _el$49;
+							}
+						}), (() => {
+							var _el$50 = _tmpl$7();
+							insert(_el$50, part);
+							effect(() => className(_el$50, styles().keyCapLarge));
+							return _el$50;
+						})()]
+					}));
+					insert(_el$14, createComponent(ActionButtons, { get registration() {
+						return reg();
+					} }), null);
+					insert(_el$21, () => String(reg().options.enabled !== false));
+					insert(_el$24, () => reg().options.eventType ?? "keydown");
+					insert(_el$27, () => String(!!reg().options.preventDefault));
+					insert(_el$30, () => String(!!reg().options.stopPropagation));
+					insert(_el$33, () => String(reg().options.ignoreInputs !== false));
+					insert(_el$36, () => String(!!reg().options.requireReset));
+					insert(_el$39, conflictBehavior);
+					insert(_el$42, () => String(reg().hasFired));
+					insert(_el$10, createComponent(Show, {
+						get when() {
+							return allConflicts().length > 0;
+						},
+						get children() {
+							var _el$43 = _tmpl$4(), _el$44 = _el$43.firstChild, _el$47 = _el$44.firstChild.nextSibling;
+							_el$47.nextSibling;
+							var _el$48 = _el$44.nextSibling;
+							insert(_el$44, () => allConflicts().length, _el$47);
+							insert(_el$48, createComponent(For, {
+								get each() {
+									return targetConflicts();
+								},
+								children: (conflict) => {
+									const itemStyle = () => getConflictItemStyle(conflictBehavior(), true);
+									const label = () => getConflictLabel(conflictBehavior(), true);
+									return (() => {
+										var _el$51 = _tmpl$8(), _el$52 = _el$51.firstChild, _el$59 = _el$52.nextSibling.nextSibling, _el$60 = _el$59.nextSibling.nextSibling, _el$61 = _el$60.nextSibling.nextSibling;
+										_el$61.nextSibling;
+										insert(_el$52, label);
+										insert(_el$51, () => conflict.id, _el$59);
+										insert(_el$51, () => formatForDisplay(conflict.hotkey), _el$60);
+										insert(_el$51, () => conflict.options.eventType ?? "keydown", _el$61);
+										insert(_el$51, () => getTargetDescription(conflict.target), null);
+										effect(() => className(_el$51, styles()[itemStyle()]));
+										return _el$51;
+									})();
+								}
+							}), null);
+							insert(_el$48, createComponent(For, {
+								get each() {
+									return scopeConflicts();
+								},
+								children: (conflict) => (() => {
+									var _el$62 = _tmpl$9(), _el$70 = _el$62.firstChild.nextSibling.nextSibling, _el$71 = _el$70.nextSibling.nextSibling, _el$72 = _el$71.nextSibling.nextSibling;
+									_el$72.nextSibling;
+									insert(_el$62, () => conflict.id, _el$70);
+									insert(_el$62, () => formatForDisplay(conflict.hotkey), _el$71);
+									insert(_el$62, () => conflict.options.eventType ?? "keydown", _el$72);
+									insert(_el$62, () => getTargetDescription(conflict.target), null);
+									effect(() => className(_el$62, styles().conflictItemScope));
+									return _el$62;
+								})()
+							}), null);
+							effect((_p$) => {
+								var _v$0 = styles().detailSection, _v$1 = styles().detailSectionHeader, _v$10 = styles().conflictList;
+								_v$0 !== _p$.e && className(_el$43, _p$.e = _v$0);
+								_v$1 !== _p$.t && className(_el$44, _p$.t = _v$1);
+								_v$10 !== _p$.a && className(_el$48, _p$.a = _v$10);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0,
+								a: void 0
+							});
+							return _el$43;
+						}
+					}), null);
+					effect((_p$) => {
+						var _v$11 = styles().detailsGrid, _v$12 = styles().detailSection, _v$13 = styles().detailSectionHeader, _v$14 = styles().keyBreakdown, _v$15 = styles().detailSection, _v$16 = styles().detailSectionHeader, _v$17 = styles().detailSection, _v$18 = styles().detailSectionHeader, _v$19 = styles().optionRow, _v$20 = styles().optionLabel, _v$21 = reg().options.enabled !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$22 = styles().optionRow, _v$23 = styles().optionLabel, _v$24 = styles().optionValue, _v$25 = styles().optionRow, _v$26 = styles().optionLabel, _v$27 = reg().options.preventDefault ? styles().optionValueTrue : styles().optionValueFalse, _v$28 = styles().optionRow, _v$29 = styles().optionLabel, _v$30 = reg().options.stopPropagation ? styles().optionValueTrue : styles().optionValueFalse, _v$31 = styles().optionRow, _v$32 = styles().optionLabel, _v$33 = reg().options.ignoreInputs !== false ? styles().optionValueTrue : styles().optionValueFalse, _v$34 = styles().optionRow, _v$35 = styles().optionLabel, _v$36 = reg().options.requireReset ? styles().optionValueTrue : styles().optionValueFalse, _v$37 = styles().optionRow, _v$38 = styles().optionLabel, _v$39 = styles().optionValue, _v$40 = styles().optionRow, _v$41 = styles().optionLabel, _v$42 = reg().hasFired ? styles().optionValueTrue : styles().optionValueFalse;
+						_v$11 !== _p$.e && className(_el$10, _p$.e = _v$11);
+						_v$12 !== _p$.t && className(_el$11, _p$.t = _v$12);
+						_v$13 !== _p$.a && className(_el$12, _p$.a = _v$13);
+						_v$14 !== _p$.o && className(_el$13, _p$.o = _v$14);
+						_v$15 !== _p$.i && className(_el$14, _p$.i = _v$15);
+						_v$16 !== _p$.n && className(_el$15, _p$.n = _v$16);
+						_v$17 !== _p$.s && className(_el$16, _p$.s = _v$17);
+						_v$18 !== _p$.h && className(_el$17, _p$.h = _v$18);
+						_v$19 !== _p$.r && className(_el$19, _p$.r = _v$19);
+						_v$20 !== _p$.d && className(_el$20, _p$.d = _v$20);
+						_v$21 !== _p$.l && className(_el$21, _p$.l = _v$21);
+						_v$22 !== _p$.u && className(_el$22, _p$.u = _v$22);
+						_v$23 !== _p$.c && className(_el$23, _p$.c = _v$23);
+						_v$24 !== _p$.w && className(_el$24, _p$.w = _v$24);
+						_v$25 !== _p$.m && className(_el$25, _p$.m = _v$25);
+						_v$26 !== _p$.f && className(_el$26, _p$.f = _v$26);
+						_v$27 !== _p$.y && className(_el$27, _p$.y = _v$27);
+						_v$28 !== _p$.g && className(_el$28, _p$.g = _v$28);
+						_v$29 !== _p$.p && className(_el$29, _p$.p = _v$29);
+						_v$30 !== _p$.b && className(_el$30, _p$.b = _v$30);
+						_v$31 !== _p$.T && className(_el$31, _p$.T = _v$31);
+						_v$32 !== _p$.A && className(_el$32, _p$.A = _v$32);
+						_v$33 !== _p$.O && className(_el$33, _p$.O = _v$33);
+						_v$34 !== _p$.I && className(_el$34, _p$.I = _v$34);
+						_v$35 !== _p$.S && className(_el$35, _p$.S = _v$35);
+						_v$36 !== _p$.W && className(_el$36, _p$.W = _v$36);
+						_v$37 !== _p$.C && className(_el$37, _p$.C = _v$37);
+						_v$38 !== _p$.B && className(_el$38, _p$.B = _v$38);
+						_v$39 !== _p$.v && className(_el$39, _p$.v = _v$39);
+						_v$40 !== _p$.k && className(_el$40, _p$.k = _v$40);
+						_v$41 !== _p$.x && className(_el$41, _p$.x = _v$41);
+						_v$42 !== _p$.j && className(_el$42, _p$.j = _v$42);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0,
+						n: void 0,
+						s: void 0,
+						h: void 0,
+						r: void 0,
+						d: void 0,
+						l: void 0,
+						u: void 0,
+						c: void 0,
+						w: void 0,
+						m: void 0,
+						f: void 0,
+						y: void 0,
+						g: void 0,
+						p: void 0,
+						b: void 0,
+						T: void 0,
+						A: void 0,
+						O: void 0,
+						I: void 0,
+						S: void 0,
+						W: void 0,
+						C: void 0,
+						B: void 0,
+						v: void 0,
+						k: void 0,
+						x: void 0,
+						j: void 0
+					});
+					return _el$10;
+				})()];
+			}
+		}));
+		effect(() => className(_el$, styles().stateDetails));
+		return _el$;
+	})();
+}
+
+//#endregion
+export { DetailsPanel };
+//# sourceMappingURL=DetailsPanel.js.map