@tanstack/hotkeys-devtools 1.0.0 → 1.1.1

package/src/components/HeldKeysTopbar.tsx

@@ -1,46 +0,0 @@
-import { For, Show } from 'solid-js'
-import { detectPlatform, formatForDisplay } from '@tanstack/hotkeys'
-import { useStyles } from '../styles/use-styles'
-import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
-import type { RegisterableHotkey } from '@tanstack/hotkeys'
-
-export function HeldKeysBar() {
-  const styles = useStyles()
-  const state = useHotkeysDevtoolsState()
-  const platform = detectPlatform()
-
-  return (
-    <div class={styles().heldKeysBar}>
-      <span class={styles().heldKeysBarHeader}>Held</span>
-      <div class={styles().heldKeysBarList}>
-        <Show
-          when={state.heldKeys().length > 0}
-          fallback={<span class={styles().noKeysHeld}>--</span>}
-        >
-          <For each={state.heldKeys()}>
-            {(key) => {
-              const code = () => state.heldCodes()[key]
-              const label = () =>
-                formatForDisplay(key as RegisterableHotkey, {
-                  platform,
-                  useSymbols: true,
-                })
-              const codeLabel = () => {
-                const c = code()
-                return c || undefined
-              }
-              return (
-                <span class={styles().keyCap}>
-                  <span>{label()}</span>
-                  <Show when={codeLabel() && codeLabel() !== key}>
-                    <span class={styles().keyCapCode}>{codeLabel()}</span>
-                  </Show>
-                </span>
-              )
-            }}
-          </For>
-        </Show>
-      </div>
-    </div>
-  )
-}

package/src/components/HotkeyList.tsx

@@ -1,473 +0,0 @@
-import { For, Show, createEffect, createMemo, createSignal, on } from 'solid-js'
-import clsx from 'clsx'
-import { matchSorter } from 'match-sorter'
-import { formatForDisplay } from '@tanstack/hotkeys'
-import { useStyles } from '../styles/use-styles'
-import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
-import { effectiveSequenceMatchedSteps } from '../sequence-progress'
-import {
-  formatRegistration,
-  getBindingKind,
-  useRegistrationConflicts,
-} from '../_registrations'
-import type { SequenceRegistrationView } from '@tanstack/hotkeys'
-
-type HotkeyListProps = {
-  selectedId: () => string | null
-  setSelectedId: (id: string | null) => void
-}
-
-function getTargetLabel(target: HTMLElement | Document | Window): string {
-  if (typeof document !== 'undefined' && target === document) {
-    return 'document'
-  }
-  if (typeof window !== 'undefined' && target === window) {
-    return 'window'
-  }
-  if (target instanceof HTMLElement) {
-    return target.tagName.toLowerCase()
-  }
-  return 'element'
-}
-
-function getTargetTooltip(target: HTMLElement | Document | Window): string {
-  if (typeof document !== 'undefined' && target === document) {
-    return 'Listening on document'
-  }
-  if (typeof window !== 'undefined' && target === window) {
-    return 'Listening on window'
-  }
-  if (target instanceof HTMLElement) {
-    const tag = target.tagName.toLowerCase()
-    const parts: Array<string> = [tag]
-    if (target.id) {
-      parts.push(`id="${target.id}"`)
-    }
-    if (target.className) {
-      const classes = target.className.split(/\s+/).filter(Boolean).join(', ')
-      parts.push(`class="${classes}"`)
-    }
-    // Collect data- attributes
-    const dataAttrs = Array.from(target.attributes)
-      .filter((attr) => attr.name.startsWith('data-'))
-      .map((attr) => `${attr.name}="${attr.value}"`)
-    if (dataAttrs.length > 0) {
-      parts.push(...dataAttrs)
-    }
-    return `Listening on ${parts.join(' ')}`
-  }
-  return 'Listening on element'
-}
-
-function buildRowTooltip(meta?: {
-  name?: string
-  description?: string
-  group?: string
-}): string | undefined {
-  if (!meta) return undefined
-  const parts: Array<string> = []
-  if (meta.group) parts.push(meta.group)
-  if (meta.name) parts.push(meta.name)
-  if (meta.description) parts.push(meta.description)
-  return parts.length > 0 ? parts.join(' — ') : undefined
-}
-
-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 conflicts = useRegistrationConflicts(() => props.reg)
-  const targetConflicts = () => conflicts().overlapping
-  const scopeConflicts = () => conflicts().separate
-  const hasTargetConflict = () => targetConflicts().length > 0
-  const hasScopeConflict = () => scopeConflicts().length > 0
-  const targetConflictBadge = () => ({
-    style: 'badgeConflict' as const,
-    label: '!',
-    tooltip: `Potential overlap: ${targetConflicts().length} other bindings on overlapping targets`,
-  })
-  const scopeConflictTooltip = () =>
-    `Info: ${scopeConflicts().length} related bindings on separate targets`
-
-  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)
-    }),
-  )
-
-  const metaName = () => props.reg.options.meta?.name
-  const rowTooltip = () => buildRowTooltip(props.reg.options.meta)
-
-  return (
-    <div
-      class={clsx(
-        styles().hotkeyRow,
-        props.selectedId() === props.reg.id && styles().hotkeyRowSelected,
-        pulsing() && styles().hotkeyRowTriggered,
-        rowTooltip() && styles().tooltip,
-      )}
-      onClick={() => props.setSelectedId(props.reg.id)}
-    >
-      <Show when={rowTooltip()}>
-        <span class={styles().rowTooltipText} data-tooltip>
-          {rowTooltip()}
-        </span>
-      </Show>
-      <span class={styles().hotkeyLabel}>
-        <span class={styles().hotkeyLabelKeys}>
-          <For each={liveSequenceReg().sequence}>
-            {(step, i) => (
-              <span>
-                <Show when={i() > 0}> </Show>
-                <span
-                  class={
-                    i() < matchedSteps()
-                      ? styles().sequenceStepMatched
-                      : undefined
-                  }
-                >
-                  {formatForDisplay(step, {
-                    platform: props.reg.options.platform,
-                  })}
-                </span>
-              </span>
-            )}
-          </For>
-        </span>
-        <Show when={metaName()}>
-          <span class={styles().hotkeyLabelName}>{metaName()}</span>
-        </Show>
-      </span>
-      <Show when={triggerCount() > 0}>
-        <span class={styles().triggerCount}>x{triggerCount()}</span>
-      </Show>
-      <div class={styles().hotkeyBadges}>
-        <span
-          class={clsx(styles().badge, styles().badgeTarget)}
-          data-binding-kind
-        >
-          {getBindingKind(props.reg)}
-        </span>
-        {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()
-
-  const [searchQuery, setSearchQuery] = createSignal('')
-
-  const registrations = createMemo(() => state.registrations())
-  const sequenceRegistrations = createMemo(() => state.sequenceRegistrations())
-
-  const filteredRegistrations = createMemo(() => {
-    const query = searchQuery().trim()
-    if (!query) return registrations()
-    return matchSorter(registrations(), query, {
-      keys: [
-        (r) => formatRegistration(r),
-        'hotkey',
-        'options.meta.name',
-        'options.meta.description',
-        'options.meta.group',
-      ],
-    })
-  })
-
-  const filteredSequenceRegistrations = createMemo(() => {
-    const query = searchQuery().trim()
-    if (!query) return sequenceRegistrations()
-    return matchSorter(sequenceRegistrations(), query, {
-      keys: [
-        (r) => formatRegistration(r),
-        (r) => r.sequence.join(' '),
-        'options.meta.name',
-        'options.meta.description',
-        'options.meta.group',
-      ],
-    })
-  })
-
-  return (
-    <>
-      <div class={styles().searchContainer}>
-        <input
-          type="text"
-          class={styles().searchInput}
-          placeholder="Search hotkeys..."
-          value={searchQuery()}
-          onInput={(e) => setSearchQuery(e.currentTarget.value)}
-        />
-        <Show when={searchQuery()}>
-          <button
-            class={styles().searchClear}
-            onClick={() => setSearchQuery('')}
-          >
-            &times;
-          </button>
-        </Show>
-      </div>
-
-      <div class={styles().panelHeader}>
-        Hotkeys ({filteredRegistrations().length})
-      </div>
-      <div class={styles().hotkeyList}>
-        <For each={filteredRegistrations()}>
-          {(reg) => {
-            const conflicts = useRegistrationConflicts(() => reg)
-            const targetConflicts = () => conflicts().overlapping
-            const scopeConflicts = () => conflicts().separate
-            const hasTargetConflict = () => targetConflicts().length > 0
-            const hasScopeConflict = () => scopeConflicts().length > 0
-            const targetConflictBadge = () => ({
-              style: 'badgeConflict' as const,
-              label: '!',
-              tooltip: `Potential overlap: ${targetConflicts().length} other bindings on overlapping targets`,
-            })
-            const scopeConflictTooltip = () =>
-              `Info: ${scopeConflicts().length} related bindings on separate targets`
-
-            const enabled = () => reg.options.enabled !== false
-
-            // Look up trigger count reactively from the registrations list
-            // (reg is a stable object ref; the list re-derives on store change)
-            const triggerCount = () =>
-              registrations().find((r) => r.id === reg.id)?.triggerCount ??
-              reg.triggerCount
-
-            // Track trigger count changes for pulse animation
-            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)
-              }),
-            )
-
-            const metaName = () => reg.options.meta?.name
-            const rowTooltip = () => buildRowTooltip(reg.options.meta)
-
-            return (
-              <div
-                class={clsx(
-                  styles().hotkeyRow,
-                  props.selectedId() === reg.id && styles().hotkeyRowSelected,
-                  pulsing() && styles().hotkeyRowTriggered,
-                  rowTooltip() && styles().tooltip,
-                )}
-                onClick={() => props.setSelectedId(reg.id)}
-              >
-                <Show when={rowTooltip()}>
-                  <span class={styles().rowTooltipText} data-tooltip>
-                    {rowTooltip()}
-                  </span>
-                </Show>
-                <span class={styles().hotkeyLabel}>
-                  <span class={styles().hotkeyLabelKeys}>
-                    {formatRegistration(reg)}
-                  </span>
-                  <Show when={metaName()}>
-                    <span class={styles().hotkeyLabelName}>{metaName()}</span>
-                  </Show>
-                </span>
-                <Show when={triggerCount() > 0}>
-                  <span class={styles().triggerCount}>x{triggerCount()}</span>
-                </Show>
-                <div class={styles().hotkeyBadges}>
-                  <span
-                    class={clsx(styles().badge, styles().badgeTarget)}
-                    data-binding-kind
-                  >
-                    {getBindingKind(reg)}
-                  </span>
-                  {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() ? 'Hotkey is enabled' : 'Hotkey 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>
-            )
-          }}
-        </For>
-      </div>
-
-      <div class={styles().panelHeader}>
-        Sequences ({filteredSequenceRegistrations().length})
-      </div>
-      <div class={styles().hotkeyList}>
-        <For each={filteredSequenceRegistrations()}>
-          {(reg) => (
-            <SequenceListRow
-              reg={reg}
-              getSequences={sequenceRegistrations}
-              sequenceProgressNow={state.sequenceProgressNow}
-              selectedId={props.selectedId}
-              setSelectedId={props.setSelectedId}
-            />
-          )}
-        </For>
-      </div>
-    </>
-  )
-}

package/src/components/Shell.tsx

@@ -1,171 +0,0 @@
-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'
-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()
-    if (!id) return null
-    const hotkey = state.registrations().find((r) => r.id === id)
-    if (hotkey) return hotkey
-    const sequence = state.sequenceRegistrations().find((r) => r.id === id)
-    return sequence ?? null
-  })
-
-  let dragStartX = 0
-  let dragStartWidth = 0
-
-  const handleMouseDown = (e: MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setIsDragging(true)
-    document.body.style.cursor = 'col-resize'
-    document.body.style.userSelect = 'none'
-    dragStartX = e.clientX
-    dragStartWidth = leftPanelWidth()
-  }
-
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!isDragging()) return
-
-    e.preventDefault()
-    const deltaX = e.clientX - dragStartX
-    const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX))
-    setLeftPanelWidth(newWidth)
-  }
-
-  const handleMouseUp = () => {
-    setIsDragging(false)
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-  }
-
-  onMount(() => {
-    document.addEventListener('mousemove', handleMouseMove)
-    document.addEventListener('mouseup', handleMouseUp)
-  })
-
-  onCleanup(() => {
-    document.removeEventListener('mousemove', handleMouseMove)
-    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 (
-    <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)',
-            }}
-          >
-            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().rightPanel} style={{ flex: 1 }}>
-              <div class={styles().panelHeader}>Details</div>
-              <DetailsPanel selectedRegistration={selectedRegistration} />
-            </div>
-          </div>
-        </div>
-      </MainPanel>
-    </div>
-  )
-}