@tanstack/hotkeys-devtools 0.4.4 → 0.5.0

package/package.json

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

package/src/HotkeysContextProvider.tsx

@@ -10,6 +10,7 @@ import {
   KeyStateTracker,
   SequenceManager,
 } from '@tanstack/hotkeys'
+import { needsSequenceProgressClock } from './sequence-progress'
 import type { Accessor } from 'solid-js'
 import type {
   HotkeyRegistration,
@@ -21,6 +22,8 @@ interface HotkeysDevtoolsContextType {
   sequenceRegistrations: Accessor<Array<SequenceRegistrationView>>
   heldKeys: Accessor<Array<string>>
   heldCodes: Accessor<Record<string, string>>
+  /** Monotonic clock for sequence in-progress UI (updates while a sequence match is active). */
+  sequenceProgressNow: Accessor<number>
 }
 
 const HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({
@@ -28,6 +31,7 @@ const HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({
   sequenceRegistrations: () => [],
   heldKeys: () => [],
   heldCodes: () => ({}),
+  sequenceProgressNow: () => Date.now(),
 })
 
 export function HotkeysContextProvider(props: { children: any }) {
@@ -76,6 +80,36 @@ export function HotkeysContextProvider(props: { children: any }) {
     onCleanup(() => unsubscribe())
   })
 
+  const [sequenceProgressNow, setSequenceProgressNow] = createSignal(Date.now())
+
+  createEffect(() => {
+    const regs = sequenceRegistrations()
+    let id: ReturnType<typeof setInterval> | undefined
+
+    const tick = () => {
+      const t = Date.now()
+      setSequenceProgressNow(t)
+      if (!needsSequenceProgressClock(sequenceRegistrations(), t)) {
+        if (id !== undefined) {
+          clearInterval(id)
+          id = undefined
+        }
+      }
+    }
+
+    if (needsSequenceProgressClock(regs, Date.now())) {
+      id = setInterval(tick, 50)
+    } else {
+      setSequenceProgressNow(Date.now())
+    }
+
+    onCleanup(() => {
+      if (id !== undefined) {
+        clearInterval(id)
+      }
+    })
+  })
+
   return (
     <HotkeysDevtoolsContext.Provider
       value={{
@@ -83,6 +117,7 @@ export function HotkeysContextProvider(props: { children: any }) {
         sequenceRegistrations,
         heldKeys,
         heldCodes,
+        sequenceProgressNow,
       }}
     >
       {props.children}

package/src/components/DetailsPanel.tsx

@@ -1,7 +1,9 @@
 import { For, Show, createMemo } from 'solid-js'
+import clsx from 'clsx'
 import { formatForDisplay, formatHotkeySequence } from '@tanstack/hotkeys'
 import { useStyles } from '../styles/use-styles'
 import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
+import { effectiveSequenceMatchedSteps } from '../sequence-progress'
 import { ActionButtons } from './ActionButtons'
 import type {
   ConflictBehavior,
@@ -368,15 +370,23 @@ function SequenceDetails(props: {
   styles: ReturnType<typeof useStyles>
 }) {
   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(
-      reg(),
+      liveReg(),
       props.state.sequenceRegistrations(),
     ),
   )
   const scopeConflicts = createMemo(() =>
     props.findSequenceScopeConflicts(
-      reg(),
+      liveReg(),
       props.state.sequenceRegistrations(),
     ),
   )
@@ -385,7 +395,7 @@ function SequenceDetails(props: {
     ...scopeConflicts(),
   ])
   const conflictBehavior = (): ConflictBehavior =>
-    reg().options.conflictBehavior ?? 'warn'
+    liveReg().options.conflictBehavior ?? 'warn'
 
   const styles = props.styles
 
@@ -393,18 +403,48 @@ function SequenceDetails(props: {
     <>
       <div class={styles().stateHeader}>
         <div class={styles().stateTitle}>
-          {props.formatHotkeySequence(reg().sequence)}
+          <For each={liveReg().sequence}>
+            {(step, i) => (
+              <span>
+                <Show when={i() > 0}> </Show>
+                <span
+                  class={
+                    i() < matchedSteps()
+                      ? styles().sequenceStepMatched
+                      : undefined
+                  }
+                >
+                  {props.formatForDisplay(step)}
+                </span>
+              </span>
+            )}
+          </For>
         </div>
         <div class={styles().infoGrid}>
           <div class={styles().infoLabel}>ID</div>
-          <div class={styles().infoValueMono}>{reg().id}</div>
+          <div class={styles().infoValueMono}>{liveReg().id}</div>
           <div class={styles().infoLabel}>Sequence</div>
           <div class={styles().infoValueMono}>
-            {props.formatHotkeySequence(reg().sequence)}
+            <For each={liveReg().sequence}>
+              {(step, i) => (
+                <span>
+                  <Show when={i() > 0}> </Show>
+                  <span
+                    class={
+                      i() < matchedSteps()
+                        ? styles().sequenceStepMatched
+                        : undefined
+                    }
+                  >
+                    {props.formatForDisplay(step)}
+                  </span>
+                </span>
+              )}
+            </For>
           </div>
           <div class={styles().infoLabel}>Target</div>
           <div class={styles().infoValueMono}>
-            {props.getTargetDescription(reg().target)}
+            {props.getTargetDescription(liveReg().target)}
           </div>
         </div>
       </div>
@@ -413,13 +453,18 @@ function SequenceDetails(props: {
         <div class={styles().detailSection}>
           <div class={styles().detailSectionHeader}>Key Breakdown</div>
           <div class={styles().keyBreakdown}>
-            <For each={reg().sequence}>
+            <For each={liveReg().sequence}>
               {(step, i) => (
                 <>
                   <Show when={i() > 0}>
                     <span class={styles().keyBreakdownPlus}>→</span>
                   </Show>
-                  <span class={styles().keyCapLarge}>
+                  <span
+                    class={clsx(
+                      styles().keyCapLarge,
+                      i() < matchedSteps() && styles().keyCapLargeInProgress,
+                    )}
+                  >
                     {props.formatForDisplay(step)}
                   </span>
                 </>
@@ -430,7 +475,7 @@ function SequenceDetails(props: {
 
         <div class={styles().detailSection}>
           <div class={styles().detailSectionHeader}>Actions</div>
-          <ActionButtons registration={reg()} />
+          <ActionButtons registration={liveReg()} />
         </div>
 
         <div class={styles().detailSection}>
@@ -440,60 +485,60 @@ function SequenceDetails(props: {
               <span class={styles().optionLabel}>enabled</span>
               <span
                 class={
-                  reg().options.enabled !== false
+                  liveReg().options.enabled !== false
                     ? styles().optionValueTrue
                     : styles().optionValueFalse
                 }
               >
-                {String(reg().options.enabled !== false)}
+                {String(liveReg().options.enabled !== false)}
               </span>
             </div>
             <div class={styles().optionRow}>
               <span class={styles().optionLabel}>eventType</span>
               <span class={styles().optionValue}>
-                {reg().options.eventType ?? 'keydown'}
+                {liveReg().options.eventType ?? 'keydown'}
               </span>
             </div>
             <div class={styles().optionRow}>
               <span class={styles().optionLabel}>timeout</span>
               <span class={styles().optionValue}>
-                {reg().options.timeout ?? 1000}ms
+                {liveReg().options.timeout ?? 1000}ms
               </span>
             </div>
             <div class={styles().optionRow}>
               <span class={styles().optionLabel}>preventDefault</span>
               <span
                 class={
-                  reg().options.preventDefault
+                  liveReg().options.preventDefault
                     ? styles().optionValueTrue
                     : styles().optionValueFalse
                 }
               >
-                {String(!!reg().options.preventDefault)}
+                {String(!!liveReg().options.preventDefault)}
               </span>
             </div>
             <div class={styles().optionRow}>
               <span class={styles().optionLabel}>stopPropagation</span>
               <span
                 class={
-                  reg().options.stopPropagation
+                  liveReg().options.stopPropagation
                     ? styles().optionValueTrue
                     : styles().optionValueFalse
                 }
               >
-                {String(!!reg().options.stopPropagation)}
+                {String(!!liveReg().options.stopPropagation)}
               </span>
             </div>
             <div class={styles().optionRow}>
               <span class={styles().optionLabel}>ignoreInputs</span>
               <span
                 class={
-                  reg().options.ignoreInputs !== false
+                  liveReg().options.ignoreInputs !== false
                     ? styles().optionValueTrue
                     : styles().optionValueFalse
                 }
               >
-                {String(reg().options.ignoreInputs !== false)}
+                {String(liveReg().options.ignoreInputs !== false)}
               </span>
             </div>
             <div class={styles().optionRow}>

package/src/components/HotkeyList.tsx

@@ -1,8 +1,9 @@
 import { For, Show, createEffect, createMemo, createSignal, on } from 'solid-js'
 import clsx from 'clsx'
-import { formatForDisplay, formatHotkeySequence } from '@tanstack/hotkeys'
+import { formatForDisplay } from '@tanstack/hotkeys'
 import { useStyles } from '../styles/use-styles'
 import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
+import { effectiveSequenceMatchedSteps } from '../sequence-progress'
 import type {
   ConflictBehavior,
   HotkeyRegistration,
@@ -112,6 +113,182 @@ function findSequenceScopeConflicts(
   )
 }
 
+function SequenceListRow(props: {
+  reg: SequenceRegistrationView
+  getSequences: () => Array<SequenceRegistrationView>
+  sequenceProgressNow: () => number
+  selectedId: () => string | null
+  setSelectedId: (id: string | null) => void
+}) {
+  const styles = useStyles()
+
+  const sequenceRegistrations = () => props.getSequences()
+
+  const targetConflicts = () =>
+    findSequenceTargetConflicts(props.reg, sequenceRegistrations())
+  const scopeConflicts = () =>
+    findSequenceScopeConflicts(props.reg, sequenceRegistrations())
+
+  const hasTargetConflict = () => targetConflicts().length > 0
+  const hasScopeConflict = () => scopeConflicts().length > 0
+
+  const conflictBehavior = (): ConflictBehavior =>
+    props.reg.options.conflictBehavior ?? 'warn'
+
+  const targetConflictBadge = () => {
+    const behavior = conflictBehavior()
+    const c = targetConflicts()
+    if (behavior === 'allow') {
+      return {
+        style: 'badgeAllow' as const,
+        label: '~',
+        tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? 's' : ''} on same sequence and target (conflictBehavior: allow)`,
+      }
+    }
+    if (behavior === 'error') {
+      return {
+        style: 'badgeError' as const,
+        label: '!',
+        tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? 's' : ''} on same sequence and target (conflictBehavior: error)`,
+      }
+    }
+    return {
+      style: 'badgeConflict' as const,
+      label: '!',
+      tooltip: `Warning: ${c.length} other binding${c.length > 1 ? 's' : ''} on same sequence and target`,
+    }
+  }
+
+  const scopeConflictTooltip = () => {
+    const c = scopeConflicts()
+    return `Info: ${c.length} binding${c.length > 1 ? 's' : ''} with same sequence on different target${c.length > 1 ? 's' : ''}`
+  }
+
+  const enabled = () => props.reg.options.enabled !== false
+
+  const liveSequenceReg = createMemo(
+    () =>
+      sequenceRegistrations().find((r) => r.id === props.reg.id) ?? props.reg,
+  )
+
+  const triggerCount = () =>
+    sequenceRegistrations().find((r) => r.id === props.reg.id)?.triggerCount ??
+    props.reg.triggerCount
+
+  const matchedSteps = createMemo(() =>
+    effectiveSequenceMatchedSteps(
+      liveSequenceReg(),
+      props.sequenceProgressNow(),
+    ),
+  )
+
+  const [prevCount, setPrevCount] = createSignal(props.reg.triggerCount)
+  const [pulsing, setPulsing] = createSignal(false)
+
+  createEffect(
+    on(triggerCount, (current) => {
+      if (current > prevCount()) {
+        setPulsing(true)
+        setTimeout(() => setPulsing(false), 600)
+      }
+      setPrevCount(current)
+    }),
+  )
+
+  return (
+    <div
+      class={clsx(
+        styles().hotkeyRow,
+        props.selectedId() === props.reg.id && styles().hotkeyRowSelected,
+        pulsing() && styles().hotkeyRowTriggered,
+      )}
+      onClick={() => props.setSelectedId(props.reg.id)}
+    >
+      <span class={styles().hotkeyLabel}>
+        <For each={liveSequenceReg().sequence}>
+          {(step, i) => (
+            <span>
+              <Show when={i() > 0}> </Show>
+              <span
+                class={
+                  i() < matchedSteps()
+                    ? styles().sequenceStepMatched
+                    : undefined
+                }
+              >
+                {formatForDisplay(step)}
+              </span>
+            </span>
+          )}
+        </For>
+      </span>
+      <Show when={triggerCount() > 0}>
+        <span class={styles().triggerCount}>x{triggerCount()}</span>
+      </Show>
+      <div class={styles().hotkeyBadges}>
+        {hasTargetConflict() && (
+          <span
+            class={clsx(
+              styles().badge,
+              styles()[targetConflictBadge().style],
+              styles().tooltip,
+            )}
+          >
+            {targetConflictBadge().label}
+            <span class={styles().tooltipText} data-tooltip>
+              {targetConflictBadge().tooltip}
+            </span>
+          </span>
+        )}
+        {hasScopeConflict() && (
+          <span
+            class={clsx(styles().badge, styles().badgeInfo, styles().tooltip)}
+          >
+            i
+            <span class={styles().tooltipText} data-tooltip>
+              {scopeConflictTooltip()}
+            </span>
+          </span>
+        )}
+        <span
+          class={clsx(
+            styles().badge,
+            enabled() ? styles().badgeEnabled : styles().badgeDisabled,
+            styles().tooltip,
+          )}
+        >
+          {enabled() ? 'on' : 'off'}
+          <span class={styles().tooltipText} data-tooltip>
+            {enabled() ? 'Sequence is enabled' : 'Sequence is disabled'}
+          </span>
+        </span>
+        <span
+          class={clsx(
+            styles().badge,
+            (props.reg.options.eventType ?? 'keydown') === 'keydown'
+              ? styles().badgeKeydown
+              : styles().badgeKeyup,
+            styles().tooltip,
+          )}
+        >
+          {props.reg.options.eventType ?? 'keydown'}
+          <span class={styles().tooltipText} data-tooltip>
+            Fires on {props.reg.options.eventType ?? 'keydown'} event
+          </span>
+        </span>
+        <span
+          class={clsx(styles().badge, styles().badgeTarget, styles().tooltip)}
+        >
+          {getTargetLabel(props.reg.target)}
+          <span class={styles().tooltipText} data-tooltip>
+            {getTargetTooltip(props.reg.target)}
+          </span>
+        </span>
+      </div>
+    </div>
+  )
+}
+
 export function HotkeyList(props: HotkeyListProps) {
   const styles = useStyles()
   const state = useHotkeysDevtoolsState()
@@ -284,156 +461,15 @@ export function HotkeyList(props: HotkeyListProps) {
       </div>
       <div class={styles().hotkeyList}>
         <For each={sequenceRegistrations()}>
-          {(reg) => {
-            const targetConflicts = () =>
-              findSequenceTargetConflicts(reg, sequenceRegistrations())
-            const scopeConflicts = () =>
-              findSequenceScopeConflicts(reg, sequenceRegistrations())
-
-            const hasTargetConflict = () => targetConflicts().length > 0
-            const hasScopeConflict = () => scopeConflicts().length > 0
-
-            const conflictBehavior = (): ConflictBehavior =>
-              reg.options.conflictBehavior ?? 'warn'
-
-            const targetConflictBadge = () => {
-              const behavior = conflictBehavior()
-              const c = targetConflicts()
-              if (behavior === 'allow') {
-                return {
-                  style: 'badgeAllow' as const,
-                  label: '~',
-                  tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? 's' : ''} on same sequence and target (conflictBehavior: allow)`,
-                }
-              }
-              if (behavior === 'error') {
-                return {
-                  style: 'badgeError' as const,
-                  label: '!',
-                  tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? 's' : ''} on same sequence and target (conflictBehavior: error)`,
-                }
-              }
-              return {
-                style: 'badgeConflict' as const,
-                label: '!',
-                tooltip: `Warning: ${c.length} other binding${c.length > 1 ? 's' : ''} on same sequence and target`,
-              }
-            }
-
-            const scopeConflictTooltip = () => {
-              const c = scopeConflicts()
-              return `Info: ${c.length} binding${c.length > 1 ? 's' : ''} with same sequence on different target${c.length > 1 ? 's' : ''}`
-            }
-
-            const enabled = () => reg.options.enabled !== false
-
-            const triggerCount = () =>
-              sequenceRegistrations().find((r) => r.id === reg.id)
-                ?.triggerCount ?? reg.triggerCount
-
-            const [prevCount, setPrevCount] = createSignal(reg.triggerCount)
-            const [pulsing, setPulsing] = createSignal(false)
-
-            createEffect(
-              on(triggerCount, (current) => {
-                if (current > prevCount()) {
-                  setPulsing(true)
-                  setTimeout(() => setPulsing(false), 600)
-                }
-                setPrevCount(current)
-              }),
-            )
-
-            return (
-              <div
-                class={clsx(
-                  styles().hotkeyRow,
-                  props.selectedId() === reg.id && styles().hotkeyRowSelected,
-                  pulsing() && styles().hotkeyRowTriggered,
-                )}
-                onClick={() => props.setSelectedId(reg.id)}
-              >
-                <span class={styles().hotkeyLabel}>
-                  {formatHotkeySequence(reg.sequence)}
-                </span>
-                <Show when={triggerCount() > 0}>
-                  <span class={styles().triggerCount}>x{triggerCount()}</span>
-                </Show>
-                <div class={styles().hotkeyBadges}>
-                  {hasTargetConflict() && (
-                    <span
-                      class={clsx(
-                        styles().badge,
-                        styles()[targetConflictBadge().style],
-                        styles().tooltip,
-                      )}
-                    >
-                      {targetConflictBadge().label}
-                      <span class={styles().tooltipText} data-tooltip>
-                        {targetConflictBadge().tooltip}
-                      </span>
-                    </span>
-                  )}
-                  {hasScopeConflict() && (
-                    <span
-                      class={clsx(
-                        styles().badge,
-                        styles().badgeInfo,
-                        styles().tooltip,
-                      )}
-                    >
-                      i
-                      <span class={styles().tooltipText} data-tooltip>
-                        {scopeConflictTooltip()}
-                      </span>
-                    </span>
-                  )}
-                  <span
-                    class={clsx(
-                      styles().badge,
-                      enabled()
-                        ? styles().badgeEnabled
-                        : styles().badgeDisabled,
-                      styles().tooltip,
-                    )}
-                  >
-                    {enabled() ? 'on' : 'off'}
-                    <span class={styles().tooltipText} data-tooltip>
-                      {enabled()
-                        ? 'Sequence is enabled'
-                        : 'Sequence is disabled'}
-                    </span>
-                  </span>
-                  <span
-                    class={clsx(
-                      styles().badge,
-                      (reg.options.eventType ?? 'keydown') === 'keydown'
-                        ? styles().badgeKeydown
-                        : styles().badgeKeyup,
-                      styles().tooltip,
-                    )}
-                  >
-                    {reg.options.eventType ?? 'keydown'}
-                    <span class={styles().tooltipText} data-tooltip>
-                      Fires on {reg.options.eventType ?? 'keydown'} event
-                    </span>
-                  </span>
-                  <span
-                    class={clsx(
-                      styles().badge,
-                      styles().badgeTarget,
-                      styles().tooltip,
-                    )}
-                  >
-                    {getTargetLabel(reg.target)}
-                    <span class={styles().tooltipText} data-tooltip>
-                      {getTargetTooltip(reg.target)}
-                    </span>
-                  </span>
-                </div>
-              </div>
-            )
-          }}
+          {(reg) => (
+            <SequenceListRow
+              reg={reg}
+              getSequences={sequenceRegistrations}
+              sequenceProgressNow={state.sequenceProgressNow}
+              selectedId={props.selectedId}
+              setSelectedId={props.setSelectedId}
+            />
+          )}
         </For>
       </div>
     </>