@tanstack/hotkeys-devtools 0.4.3 → 0.5.0

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>
     </>

package/src/components/Shell.tsx

@@ -1,4 +1,10 @@
-import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+} from 'solid-js'
 import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
@@ -6,12 +12,33 @@ import { HeldKeysBar } from './HeldKeysTopbar'
 import { HotkeyList } from './HotkeyList'
 import { DetailsPanel } from './DetailsPanel'
 
+function readResizeObserverBlockSize(entry: ResizeObserverEntry): number {
+  const [box] = entry.borderBoxSize
+  if (box !== undefined) return box.blockSize
+  return entry.contentRect.height
+}
+
+/** TanStack devtools plugin pane; percentage heights break without this. */
+function resolvePluginHost(el: HTMLElement): HTMLElement | null {
+  const found = el.closest('[id^="plugin-container-"]')
+  if (found instanceof HTMLElement) return found
+  let n: HTMLElement | null = el
+  for (let i = 0; i < 3 && n; i++) {
+    n = n.parentElement
+  }
+  return n
+}
+
 export function Shell() {
   const styles = useStyles()
   const state = useHotkeysDevtoolsState()
   const [selectedId, setSelectedId] = createSignal<string | null>(null)
   const [leftPanelWidth, setLeftPanelWidth] = createSignal(300)
   const [isDragging, setIsDragging] = createSignal(false)
+  const [shellRootEl, setShellRootEl] = createSignal<HTMLElement | null>(null)
+  const [slotHeightPx, setSlotHeightPx] = createSignal<number | undefined>(
+    undefined,
+  )
 
   const selectedRegistration = createMemo(() => {
     const id = selectedId()
@@ -60,45 +87,85 @@ export function Shell() {
     document.removeEventListener('mouseup', handleMouseUp)
   })
 
+  createEffect(() => {
+    const el = shellRootEl()
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const pluginHost = resolvePluginHost(el)
+    if (!pluginHost) return
+
+    const applyHeight = (entry?: ResizeObserverEntry) => {
+      const clientH = pluginHost.clientHeight
+      const fromObserver =
+        entry !== undefined ? readResizeObserverBlockSize(entry) : 0
+      const h = clientH > 0 ? clientH : fromObserver
+      if (h > 0) setSlotHeightPx(Math.round(h))
+    }
+
+    applyHeight()
+    const ro = new ResizeObserver((entries) => {
+      applyHeight(entries[0])
+    })
+    ro.observe(pluginHost)
+    onCleanup(() => ro.disconnect())
+  })
+
   return (
-    <MainPanel>
-      <Header>
-        <HeaderLogo
-          flavor={{
-            light: 'oklch(51.4% 0.222 16.935)',
-            dark: 'oklch(58.6% 0.253 17.585)',
-          }}
-        >
-          TanStack Hotkeys
-        </HeaderLogo>
-      </Header>
-
-      <div class={styles().mainContainer}>
-        <HeldKeysBar />
-
-        <div class={styles().panelsContainer}>
-          <div
-            class={styles().leftPanel}
-            style={{
-              width: `${leftPanelWidth()}px`,
-              'min-width': '150px',
-              'max-width': '800px',
+    <div
+      ref={(el) => setShellRootEl(el)}
+      class={styles().shellRoot}
+      style={{
+        ...(slotHeightPx() !== undefined
+          ? {
+              height: `${slotHeightPx()}px`,
+              'max-height': `${slotHeightPx()}px`,
+            }
+          : {}),
+      }}
+    >
+      <MainPanel class={styles().mainPanelShell}>
+        <Header>
+          <HeaderLogo
+            flavor={{
+              light: 'oklch(51.4% 0.222 16.935)',
+              dark: 'oklch(58.6% 0.253 17.585)',
             }}
           >
-            <HotkeyList selectedId={selectedId} setSelectedId={setSelectedId} />
-          </div>
+            TanStack Hotkeys
+          </HeaderLogo>
+        </Header>
+
+        <div class={styles().mainContainer}>
+          <HeldKeysBar />
+
+          <div class={styles().panelsContainer}>
+            <div
+              class={styles().leftPanel}
+              style={{
+                width: `${leftPanelWidth()}px`,
+                'min-width': '150px',
+                'max-width': '800px',
+              }}
+            >
+              <div class={styles().leftPanelScroll}>
+                <HotkeyList
+                  selectedId={selectedId}
+                  setSelectedId={setSelectedId}
+                />
+              </div>
+            </div>
 
-          <div
-            class={`${styles().dragHandle} ${isDragging() ? 'dragging' : ''}`}
-            onMouseDown={handleMouseDown}
-          />
+            <div
+              class={`${styles().dragHandle} ${isDragging() ? 'dragging' : ''}`}
+              onMouseDown={handleMouseDown}
+            />
 
-          <div class={styles().rightPanel} style={{ flex: 1 }}>
-            <div class={styles().panelHeader}>Details</div>
-            <DetailsPanel selectedRegistration={selectedRegistration} />
+            <div class={styles().rightPanel} style={{ flex: 1 }}>
+              <div class={styles().panelHeader}>Details</div>
+              <DetailsPanel selectedRegistration={selectedRegistration} />
+            </div>
           </div>
         </div>
-      </div>
-    </MainPanel>
+      </MainPanel>
+    </div>
   )
 }

package/src/core.tsx

@@ -1,10 +1,11 @@
 import { constructCoreClass } from '@tanstack/devtools-utils/solid'
+import type { ClassType } from '@tanstack/devtools-utils/solid'
 
 const loadComponent = () => import('./components/index')
 
 export interface HotkeysDevtoolsInit {}
 
-const [HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp] =
-  constructCoreClass(loadComponent)
+const coreClasses = constructCoreClass(loadComponent)
 
-export { HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp }
+export const HotkeysDevtoolsCore: ClassType = coreClasses[0]
+export const HotkeysDevtoolsCoreNoOp: ClassType = coreClasses[1]

package/src/index.ts

@@ -1,8 +1,9 @@
 'use client'
 
 import * as Devtools from './core'
+import type { ClassType } from '@tanstack/devtools-utils/solid'
 
-export const HotkeysDevtoolsCore =
+export const HotkeysDevtoolsCore: ClassType =
   process.env.NODE_ENV !== 'development'
     ? Devtools.HotkeysDevtoolsCoreNoOp
     : Devtools.HotkeysDevtoolsCore

package/src/sequence-progress.ts

@@ -0,0 +1,29 @@
+import { DEFAULT_SEQUENCE_TIMEOUT } from '@tanstack/hotkeys'
+import type { SequenceRegistrationView } from '@tanstack/hotkeys'
+
+/**
+ * Matched step count for UI, accounting for inter-key timeout even if the
+ * manager has not processed another event yet.
+ */
+export function effectiveSequenceMatchedSteps(
+  reg: SequenceRegistrationView,
+  now: number,
+): number {
+  const timeout = reg.options.timeout ?? DEFAULT_SEQUENCE_TIMEOUT
+  if (
+    reg.matchedStepCount <= 0 ||
+    reg.partialMatchLastKeyTime <= 0 ||
+    now - reg.partialMatchLastKeyTime > timeout
+  ) {
+    return 0
+  }
+  return reg.matchedStepCount
+}
+
+/** Whether the devtools should run a short interval to refresh sequence progress UI. */
+export function needsSequenceProgressClock(
+  regs: Array<SequenceRegistrationView>,
+  now: number,
+): boolean {
+  return regs.some((reg) => effectiveSequenceMatchedSteps(reg, now) > 0)
+}

package/src/styles/use-styles.ts

@@ -10,9 +10,30 @@ const stylesFactory = (theme: 'light' | 'dark') => {
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
   return {
+    /** Full-height flex child so MainPanel gets a bounded height from the portal */
+    shellRoot: css`
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      height: 100%;
+      flex: 1;
+      overflow: hidden;
+    `,
+    /** Overrides devtools-ui MainPanel (overflow-y: auto) so inner columns scroll independently */
+    mainPanelShell: css`
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0%;
+      min-height: 0;
+      height: auto;
+      overflow: hidden !important;
+    `,
     mainContainer: css`
       display: flex;
       flex-direction: column;
+      flex: 1 1 0%;
+      min-height: 0;
+      overflow: hidden;
       padding: ${size[2]};
       padding-top: 0;
       margin-top: ${size[2]};
@@ -47,6 +68,10 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     `,
     panelsContainer: css`
       display: flex;
+      flex: 1 1 0%;
+      min-height: 0;
+      overflow: hidden;
+      align-items: stretch;
     `,
     dragHandle: css`
       width: 8px;
@@ -129,6 +154,13 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
+      min-height: 0;
+      min-width: 0;
+    `,
+    leftPanelScroll: css`
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
     `,
     rightPanel: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
@@ -137,6 +169,9 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       display: flex;
       flex-direction: column;
       flex: 1;
+      min-height: 0;
+      min-width: 0;
+      overflow: hidden;
     `,
     panelHeader: css`
       font-size: ${fontSize.md};
@@ -198,6 +233,10 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `,
+    sequenceStepMatched: css`
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.blue[700], colors.blue[300])};
+    `,
     hotkeyBadges: css`
       display: flex;
       gap: ${size[1]};
@@ -250,6 +289,11 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       background: ${t(colors.blue[100], colors.blue[900] + alpha[30])};
     `,
     stateDetails: css`
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
       padding: ${size[2]};
     `,
     stateHeader: css`
@@ -379,6 +423,11 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       text-transform: capitalize;
       white-space: nowrap;
     `,
+    keyCapLargeInProgress: css`
+      border-color: ${t(colors.blue[500], colors.blue[400])};
+      color: ${t(colors.blue[900], colors.blue[200])};
+      background: ${t(colors.blue[50], colors.darkGray[500])};
+    `,
     conflictList: css`
       display: flex;
       flex-direction: column;