@tanstack/hotkeys-devtools 0.1.3 → 0.3.0

package/dist/components/Shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shell.js","names":["createMemo","createSignal","onCleanup","onMount","Header","HeaderLogo","MainPanel","useStyles","useHotkeysDevtoolsState","HeldKeysBar","HotkeyList","DetailsPanel","Shell","styles","state","selectedId","setSelectedId","leftPanelWidth","setLeftPanelWidth","isDragging","setIsDragging","selectedRegistration","id","registrations","find","r","dragStartX","dragStartWidth","handleMouseDown","e","MouseEvent","preventDefault","stopPropagation","document","body","style","cursor","userSelect","clientX","handleMouseMove","deltaX","newWidth","Math","max","min","handleMouseUp","addEventListener","removeEventListener","_$createComponent","children","flavor","light","dark","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","$$mousedown","_$effect","_p$","_v$","mainContainer","_v$2","panelsContainer","_v$3","leftPanel","_v$4","_v$5","dragHandle","_v$6","rightPanel","_v$7","panelHeader","_$className","t","a","o","_$setStyleProperty","i","n","s","undefined","_$delegateEvents"],"sources":["../../src/components/Shell.tsx"],"sourcesContent":["import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'\nimport { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'\nimport { useStyles } from '../styles/use-styles'\nimport { useHotkeysDevtoolsState } from '../HotkeysContextProvider'\nimport { HeldKeysBar } from './HeldKeysTopbar'\nimport { HotkeyList } from './HotkeyList'\nimport { DetailsPanel } from './DetailsPanel'\n\nexport function Shell() {\n  const styles = useStyles()\n  const state = useHotkeysDevtoolsState()\n  const [selectedId, setSelectedId] = createSignal<string | null>(null)\n  const [leftPanelWidth, setLeftPanelWidth] = createSignal(300)\n  const [isDragging, setIsDragging] = createSignal(false)\n\n  const selectedRegistration = createMemo(() => {\n    const id = selectedId()\n    if (!id) return null\n    return state.registrations().find((r) => r.id === id) ?? null\n  })\n\n  let dragStartX = 0\n  let dragStartWidth = 0\n\n  const handleMouseDown = (e: MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragging(true)\n    document.body.style.cursor = 'col-resize'\n    document.body.style.userSelect = 'none'\n    dragStartX = e.clientX\n    dragStartWidth = leftPanelWidth()\n  }\n\n  const handleMouseMove = (e: MouseEvent) => {\n    if (!isDragging()) return\n\n    e.preventDefault()\n    const deltaX = e.clientX - dragStartX\n    const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX))\n    setLeftPanelWidth(newWidth)\n  }\n\n  const handleMouseUp = () => {\n    setIsDragging(false)\n    document.body.style.cursor = ''\n    document.body.style.userSelect = ''\n  }\n\n  onMount(() => {\n    document.addEventListener('mousemove', handleMouseMove)\n    document.addEventListener('mouseup', handleMouseUp)\n  })\n\n  onCleanup(() => {\n    document.removeEventListener('mousemove', handleMouseMove)\n    document.removeEventListener('mouseup', handleMouseUp)\n  })\n\n  return (\n    <MainPanel>\n      <Header>\n        <HeaderLogo\n          flavor={{\n            light: 'oklch(51.4% 0.222 16.935)',\n            dark: 'oklch(58.6% 0.253 17.585)',\n          }}\n        >\n          TanStack Hotkeys\n        </HeaderLogo>\n      </Header>\n\n      <div class={styles().mainContainer}>\n        <HeldKeysBar />\n\n        <div class={styles().panelsContainer}>\n          <div\n            class={styles().leftPanel}\n            style={{\n              width: `${leftPanelWidth()}px`,\n              'min-width': '150px',\n              'max-width': '800px',\n            }}\n          >\n            <HotkeyList selectedId={selectedId} setSelectedId={setSelectedId} />\n          </div>\n\n          <div\n            class={`${styles().dragHandle} ${isDragging() ? 'dragging' : ''}`}\n            onMouseDown={handleMouseDown}\n          />\n\n          <div class={styles().rightPanel} style={{ flex: 1 }}>\n            <div class={styles().panelHeader}>Details</div>\n            <DetailsPanel selectedRegistration={selectedRegistration} />\n          </div>\n        </div>\n      </div>\n    </MainPanel>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Shell.js","names":["createMemo","createSignal","onCleanup","onMount","Header","HeaderLogo","MainPanel","useStyles","useHotkeysDevtoolsState","HeldKeysBar","HotkeyList","DetailsPanel","Shell","styles","state","selectedId","setSelectedId","leftPanelWidth","setLeftPanelWidth","isDragging","setIsDragging","selectedRegistration","id","hotkey","registrations","find","r","sequence","sequenceRegistrations","dragStartX","dragStartWidth","handleMouseDown","e","MouseEvent","preventDefault","stopPropagation","document","body","style","cursor","userSelect","clientX","handleMouseMove","deltaX","newWidth","Math","max","min","handleMouseUp","addEventListener","removeEventListener","_$createComponent","children","flavor","light","dark","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","$$mousedown","_$effect","_p$","_v$","mainContainer","_v$2","panelsContainer","_v$3","leftPanel","_v$4","_v$5","dragHandle","_v$6","rightPanel","_v$7","panelHeader","_$className","t","a","o","_$setStyleProperty","i","n","s","undefined","_$delegateEvents"],"sources":["../../src/components/Shell.tsx"],"sourcesContent":["import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'\nimport { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'\nimport { useStyles } from '../styles/use-styles'\nimport { useHotkeysDevtoolsState } from '../HotkeysContextProvider'\nimport { HeldKeysBar } from './HeldKeysTopbar'\nimport { HotkeyList } from './HotkeyList'\nimport { DetailsPanel } from './DetailsPanel'\n\nexport function Shell() {\n  const styles = useStyles()\n  const state = useHotkeysDevtoolsState()\n  const [selectedId, setSelectedId] = createSignal<string | null>(null)\n  const [leftPanelWidth, setLeftPanelWidth] = createSignal(300)\n  const [isDragging, setIsDragging] = createSignal(false)\n\n  const selectedRegistration = createMemo(() => {\n    const id = selectedId()\n    if (!id) return null\n    const hotkey = state.registrations().find((r) => r.id === id)\n    if (hotkey) return hotkey\n    const sequence = state.sequenceRegistrations().find((r) => r.id === id)\n    return sequence ?? null\n  })\n\n  let dragStartX = 0\n  let dragStartWidth = 0\n\n  const handleMouseDown = (e: MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragging(true)\n    document.body.style.cursor = 'col-resize'\n    document.body.style.userSelect = 'none'\n    dragStartX = e.clientX\n    dragStartWidth = leftPanelWidth()\n  }\n\n  const handleMouseMove = (e: MouseEvent) => {\n    if (!isDragging()) return\n\n    e.preventDefault()\n    const deltaX = e.clientX - dragStartX\n    const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX))\n    setLeftPanelWidth(newWidth)\n  }\n\n  const handleMouseUp = () => {\n    setIsDragging(false)\n    document.body.style.cursor = ''\n    document.body.style.userSelect = ''\n  }\n\n  onMount(() => {\n    document.addEventListener('mousemove', handleMouseMove)\n    document.addEventListener('mouseup', handleMouseUp)\n  })\n\n  onCleanup(() => {\n    document.removeEventListener('mousemove', handleMouseMove)\n    document.removeEventListener('mouseup', handleMouseUp)\n  })\n\n  return (\n    <MainPanel>\n      <Header>\n        <HeaderLogo\n          flavor={{\n            light: 'oklch(51.4% 0.222 16.935)',\n            dark: 'oklch(58.6% 0.253 17.585)',\n          }}\n        >\n          TanStack Hotkeys\n        </HeaderLogo>\n      </Header>\n\n      <div class={styles().mainContainer}>\n        <HeldKeysBar />\n\n        <div class={styles().panelsContainer}>\n          <div\n            class={styles().leftPanel}\n            style={{\n              width: `${leftPanelWidth()}px`,\n              'min-width': '150px',\n              'max-width': '800px',\n            }}\n          >\n            <HotkeyList selectedId={selectedId} setSelectedId={setSelectedId} />\n          </div>\n\n          <div\n            class={`${styles().dragHandle} ${isDragging() ? 'dragging' : ''}`}\n            onMouseDown={handleMouseDown}\n          />\n\n          <div class={styles().rightPanel} style={{ flex: 1 }}>\n            <div class={styles().panelHeader}>Details</div>\n            <DetailsPanel selectedRegistration={selectedRegistration} />\n          </div>\n        </div>\n      </div>\n    </MainPanel>\n  )\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/hotkeys-devtools",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "description": "Devtools for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "src"
   ],
   "peerDependencies": {
-    "@tanstack/hotkeys": "0.1.3"
+    "@tanstack/hotkeys": "0.3.0"
   },
   "dependencies": {
     "@tanstack/devtools-ui": "^0.4.4",

package/src/HotkeysContextProvider.tsx

@@ -5,30 +5,43 @@ import {
   onCleanup,
   useContext,
 } from 'solid-js'
-import { HotkeyManager, KeyStateTracker } from '@tanstack/hotkeys'
+import {
+  HotkeyManager,
+  KeyStateTracker,
+  SequenceManager,
+} from '@tanstack/hotkeys'
 import type { Accessor } from 'solid-js'
-import type { HotkeyRegistration } from '@tanstack/hotkeys'
+import type {
+  HotkeyRegistration,
+  SequenceRegistrationView,
+} from '@tanstack/hotkeys'
 
 interface HotkeysDevtoolsContextType {
   registrations: Accessor<Array<HotkeyRegistration>>
+  sequenceRegistrations: Accessor<Array<SequenceRegistrationView>>
   heldKeys: Accessor<Array<string>>
   heldCodes: Accessor<Record<string, string>>
 }
 
 const HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({
   registrations: () => [],
+  sequenceRegistrations: () => [],
   heldKeys: () => [],
   heldCodes: () => ({}),
 })
 
 export function HotkeysContextProvider(props: { children: any }) {
   const manager = HotkeyManager.getInstance()
+  const sequenceManager = SequenceManager.getInstance()
   const tracker = KeyStateTracker.getInstance()
 
   // Create local signals that will be updated by subscriptions
   const [registrations, setRegistrations] = createSignal<
     Array<HotkeyRegistration>
   >(Array.from(manager.registrations.state.values()))
+  const [sequenceRegistrations, setSequenceRegistrations] = createSignal<
+    Array<SequenceRegistrationView>
+  >(Array.from(sequenceManager.registrations.state.values()))
   const [heldKeys, setHeldKeys] = createSignal<Array<string>>(
     tracker.store.state.heldKeys,
   )
@@ -40,7 +53,17 @@ export function HotkeysContextProvider(props: { children: any }) {
   createEffect(() => {
     const unsubscribe = manager.registrations.subscribe(() => {
       setRegistrations(Array.from(manager.registrations.state.values()))
-    })
+    }).unsubscribe
+    onCleanup(() => unsubscribe())
+  })
+
+  // Subscribe to SequenceManager registrations store
+  createEffect(() => {
+    const unsubscribe = sequenceManager.registrations.subscribe(() => {
+      setSequenceRegistrations(
+        Array.from(sequenceManager.registrations.state.values()),
+      )
+    }).unsubscribe
     onCleanup(() => unsubscribe())
   })
 
@@ -49,13 +72,18 @@ export function HotkeysContextProvider(props: { children: any }) {
     const unsubscribe = tracker.store.subscribe(() => {
       setHeldKeys(tracker.store.state.heldKeys)
       setHeldCodes(tracker.store.state.heldCodes)
-    })
+    }).unsubscribe
     onCleanup(() => unsubscribe())
   })
 
   return (
     <HotkeysDevtoolsContext.Provider
-      value={{ registrations, heldKeys, heldCodes }}
+      value={{
+        registrations,
+        sequenceRegistrations,
+        heldKeys,
+        heldCodes,
+      }}
     >
       {props.children}
     </HotkeysDevtoolsContext.Provider>

package/src/components/ActionButtons.tsx

@@ -1,17 +1,30 @@
-import { HotkeyManager } from '@tanstack/hotkeys'
+import { HotkeyManager, SequenceManager } from '@tanstack/hotkeys'
 import { useStyles } from '../styles/use-styles'
-import type { HotkeyRegistration } from '@tanstack/hotkeys'
+import type {
+  HotkeyRegistration,
+  SequenceRegistrationView,
+} from '@tanstack/hotkeys'
 
 type ActionButtonsProps = {
-  registration: HotkeyRegistration
+  registration: HotkeyRegistration | SequenceRegistrationView
+}
+
+function isSequenceRegistration(
+  reg: HotkeyRegistration | SequenceRegistrationView,
+): reg is SequenceRegistrationView {
+  return 'sequence' in reg && Array.isArray(reg.sequence)
 }
 
 export function ActionButtons(props: ActionButtonsProps) {
   const styles = useStyles()
 
   const handleTrigger = () => {
-    const manager = HotkeyManager.getInstance()
-    manager.triggerRegistration(props.registration.id)
+    const reg = props.registration
+    if (isSequenceRegistration(reg)) {
+      SequenceManager.getInstance().triggerSequence(reg.id)
+    } else {
+      HotkeyManager.getInstance().triggerRegistration(reg.id)
+    }
   }
 
   return (