@tanstack/hotkeys-devtools 0.4.3 → 0.5.0

package/dist/components/HotkeyList.js.map

@@ -1 +1 @@
-{"version":3,"file":"HotkeyList.js","names":["For","Show","createEffect","createMemo","createSignal","on","clsx","formatForDisplay","formatHotkeySequence","useStyles","useHotkeysDevtoolsState","ConflictBehavior","HotkeyRegistration","SequenceRegistrationView","sequenceKey","sequence","Array","join","HotkeyListProps","selectedId","setSelectedId","id","getTargetLabel","target","HTMLElement","Document","Window","document","window","tagName","toLowerCase","getTargetTooltip","tag","parts","push","className","classes","split","filter","Boolean","dataAttrs","from","attributes","attr","name","startsWith","map","value","length","findTargetConflicts","registration","all","other","hotkey","options","eventType","findScopeConflicts","findSequenceTargetConflicts","findSequenceScopeConflicts","HotkeyList","props","styles","state","registrations","sequenceRegistrations","_el$","_tmpl$","_el$2","firstChild","_el$4","nextSibling","_el$3","_$insert","_$effect","_$className","panelHeader","_el$5","_tmpl$2","_$createComponent","each","children","reg","targetConflicts","scopeConflicts","hasTargetConflict","hasScopeConflict","conflictBehavior","targetConflictBadge","behavior","c","style","const","label","tooltip","scopeConflictTooltip","enabled","triggerCount","find","r","prevCount","setPrevCount","pulsing","setPulsing","current","setTimeout","_el$1","_tmpl$5","_el$10","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$20","_el$19","_el$21","_el$22","$$click","when","_el$11","_tmpl$4","_el$12","_c$","_$memo","_el$23","_tmpl$6","_el$24","_p$","_v$0","badge","_v$1","tooltipText","e","t","undefined","_c$2","_el$25","_tmpl$7","_el$26","_el$27","_v$10","badgeInfo","_v$11","_v$","hotkeyRow","hotkeyRowSelected","hotkeyRowTriggered","_v$2","hotkeyLabel","_v$3","hotkeyBadges","_v$4","badgeEnabled","badgeDisabled","_v$5","_v$6","badgeKeydown","badgeKeyup","_v$7","_v$8","badgeTarget","_v$9","a","o","i","n","s","h","hotkeyList","_el$6","_tmpl$3","_el$7","_el$9","_el$8","_el$0","_el$28","_el$29","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$39","_el$38","_el$40","_el$41","_el$30","_el$31","_c$3","_el$42","_el$43","_v$21","_v$22","_c$4","_el$44","_el$45","_el$46","_v$23","_v$24","_v$12","_v$13","_v$14","_v$15","_v$16","_v$17","_v$18","_v$19","_v$20","_$delegateEvents"],"sources":["../../src/components/HotkeyList.tsx"],"sourcesContent":["import { For, Show, createEffect, createMemo, createSignal, on } from 'solid-js'\nimport clsx from 'clsx'\nimport { formatForDisplay, formatHotkeySequence } from '@tanstack/hotkeys'\nimport { useStyles } from '../styles/use-styles'\nimport { useHotkeysDevtoolsState } from '../HotkeysContextProvider'\nimport type {\n  ConflictBehavior,\n  HotkeyRegistration,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\nfunction sequenceKey(sequence: Array<string>): string {\n  return sequence.join('|')\n}\n\ntype HotkeyListProps = {\n  selectedId: () => string | null\n  setSelectedId: (id: string | null) => void\n}\n\nfunction getTargetLabel(target: HTMLElement | Document | Window): string {\n  if (typeof document !== 'undefined' && target === document) {\n    return 'document'\n  }\n  if (typeof window !== 'undefined' && target === window) {\n    return 'window'\n  }\n  if (target instanceof HTMLElement) {\n    return target.tagName.toLowerCase()\n  }\n  return 'element'\n}\n\nfunction getTargetTooltip(target: HTMLElement | Document | Window): string {\n  if (typeof document !== 'undefined' && target === document) {\n    return 'Listening on document'\n  }\n  if (typeof window !== 'undefined' && target === window) {\n    return 'Listening on window'\n  }\n  if (target instanceof HTMLElement) {\n    const tag = target.tagName.toLowerCase()\n    const parts: Array<string> = [tag]\n    if (target.id) {\n      parts.push(`id=\"${target.id}\"`)\n    }\n    if (target.className) {\n      const classes = target.className.split(/\\s+/).filter(Boolean).join(', ')\n      parts.push(`class=\"${classes}\"`)\n    }\n    // Collect data- attributes\n    const dataAttrs = Array.from(target.attributes)\n      .filter((attr) => attr.name.startsWith('data-'))\n      .map((attr) => `${attr.name}=\"${attr.value}\"`)\n    if (dataAttrs.length > 0) {\n      parts.push(...dataAttrs)\n    }\n    return `Listening on ${parts.join(' ')}`\n  }\n  return 'Listening on element'\n}\n\nfunction findTargetConflicts(\n  registration: HotkeyRegistration,\n  all: Array<HotkeyRegistration>,\n): Array<HotkeyRegistration> {\n  return all.filter(\n    (other) =>\n      other.id !== registration.id &&\n      other.hotkey === registration.hotkey &&\n      other.options.eventType === registration.options.eventType &&\n      other.target === registration.target,\n  )\n}\n\nfunction findScopeConflicts(\n  registration: HotkeyRegistration,\n  all: Array<HotkeyRegistration>,\n): Array<HotkeyRegistration> {\n  return all.filter(\n    (other) =>\n      other.id !== registration.id &&\n      other.hotkey === registration.hotkey &&\n      other.options.eventType === registration.options.eventType &&\n      other.target !== registration.target,\n  )\n}\n\nfunction findSequenceTargetConflicts(\n  registration: SequenceRegistrationView,\n  all: Array<SequenceRegistrationView>,\n): Array<SequenceRegistrationView> {\n  return all.filter(\n    (other) =>\n      other.id !== registration.id &&\n      sequenceKey(other.sequence) === sequenceKey(registration.sequence) &&\n      other.options.eventType === registration.options.eventType &&\n      other.target === registration.target,\n  )\n}\n\nfunction findSequenceScopeConflicts(\n  registration: SequenceRegistrationView,\n  all: Array<SequenceRegistrationView>,\n): Array<SequenceRegistrationView> {\n  return all.filter(\n    (other) =>\n      other.id !== registration.id &&\n      sequenceKey(other.sequence) === sequenceKey(registration.sequence) &&\n      other.options.eventType === registration.options.eventType &&\n      other.target !== registration.target,\n  )\n}\n\nexport function HotkeyList(props: HotkeyListProps) {\n  const styles = useStyles()\n  const state = useHotkeysDevtoolsState()\n\n  const registrations = createMemo(() => state.registrations())\n  const sequenceRegistrations = createMemo(() => state.sequenceRegistrations())\n\n  return (\n    <>\n      <div class={styles().panelHeader}>Hotkeys ({registrations().length})</div>\n      <div class={styles().hotkeyList}>\n        <For each={registrations()}>\n          {(reg) => {\n            const targetConflicts = () =>\n              findTargetConflicts(reg, registrations())\n            const scopeConflicts = () =>\n              findScopeConflicts(reg, registrations())\n\n            const hasTargetConflict = () => targetConflicts().length > 0\n            const hasScopeConflict = () => scopeConflicts().length > 0\n\n            const conflictBehavior = (): ConflictBehavior =>\n              reg.options.conflictBehavior ?? 'warn'\n\n            const targetConflictBadge = () => {\n              const behavior = conflictBehavior()\n              const c = targetConflicts()\n              if (behavior === 'allow') {\n                return {\n                  style: 'badgeAllow' as const,\n                  label: '~',\n                  tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? 's' : ''} on same key and target (conflictBehavior: allow)`,\n                }\n              }\n              if (behavior === 'error') {\n                return {\n                  style: 'badgeError' as const,\n                  label: '!',\n                  tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? 's' : ''} on same key and target (conflictBehavior: error)`,\n                }\n              }\n              // 'warn' (default) or 'replace' (replacement already happened, but show warn-style if somehow present)\n              return {\n                style: 'badgeConflict' as const,\n                label: '!',\n                tooltip: `Warning: ${c.length} other binding${c.length > 1 ? 's' : ''} on same key and target`,\n              }\n            }\n\n            const scopeConflictTooltip = () => {\n              const c = scopeConflicts()\n              return `Info: ${c.length} binding${c.length > 1 ? 's' : ''} with same key on different target${c.length > 1 ? 's' : ''}`\n            }\n\n            const enabled = () => reg.options.enabled !== false\n\n            // Look up trigger count reactively from the registrations list\n            // (reg is a stable object ref; the list re-derives on store change)\n            const triggerCount = () =>\n              registrations().find((r) => r.id === reg.id)?.triggerCount ??\n              reg.triggerCount\n\n            // Track trigger count changes for pulse animation\n            const [prevCount, setPrevCount] = createSignal(reg.triggerCount)\n            const [pulsing, setPulsing] = createSignal(false)\n\n            createEffect(\n              on(triggerCount, (current) => {\n                if (current > prevCount()) {\n                  setPulsing(true)\n                  setTimeout(() => setPulsing(false), 600)\n                }\n                setPrevCount(current)\n              }),\n            )\n\n            return (\n              <div\n                class={clsx(\n                  styles().hotkeyRow,\n                  props.selectedId() === reg.id && styles().hotkeyRowSelected,\n                  pulsing() && styles().hotkeyRowTriggered,\n                )}\n                onClick={() => props.setSelectedId(reg.id)}\n              >\n                <span class={styles().hotkeyLabel}>\n                  {formatForDisplay(reg.hotkey)}\n                </span>\n                <Show when={triggerCount() > 0}>\n                  <span class={styles().triggerCount}>x{triggerCount()}</span>\n                </Show>\n                <div class={styles().hotkeyBadges}>\n                  {hasTargetConflict() && (\n                    <span\n                      class={clsx(\n                        styles().badge,\n                        styles()[targetConflictBadge().style],\n                        styles().tooltip,\n                      )}\n                    >\n                      {targetConflictBadge().label}\n                      <span class={styles().tooltipText} data-tooltip>\n                        {targetConflictBadge().tooltip}\n                      </span>\n                    </span>\n                  )}\n                  {hasScopeConflict() && (\n                    <span\n                      class={clsx(\n                        styles().badge,\n                        styles().badgeInfo,\n                        styles().tooltip,\n                      )}\n                    >\n                      i\n                      <span class={styles().tooltipText} data-tooltip>\n                        {scopeConflictTooltip()}\n                      </span>\n                    </span>\n                  )}\n                  <span\n                    class={clsx(\n                      styles().badge,\n                      enabled()\n                        ? styles().badgeEnabled\n                        : styles().badgeDisabled,\n                      styles().tooltip,\n                    )}\n                  >\n                    {enabled() ? 'on' : 'off'}\n                    <span class={styles().tooltipText} data-tooltip>\n                      {enabled() ? 'Hotkey is enabled' : 'Hotkey is disabled'}\n                    </span>\n                  </span>\n                  <span\n                    class={clsx(\n                      styles().badge,\n                      (reg.options.eventType ?? 'keydown') === 'keydown'\n                        ? styles().badgeKeydown\n                        : styles().badgeKeyup,\n                      styles().tooltip,\n                    )}\n                  >\n                    {reg.options.eventType ?? 'keydown'}\n                    <span class={styles().tooltipText} data-tooltip>\n                      Fires on {reg.options.eventType ?? 'keydown'} event\n                    </span>\n                  </span>\n                  <span\n                    class={clsx(\n                      styles().badge,\n                      styles().badgeTarget,\n                      styles().tooltip,\n                    )}\n                  >\n                    {getTargetLabel(reg.target)}\n                    <span class={styles().tooltipText} data-tooltip>\n                      {getTargetTooltip(reg.target)}\n                    </span>\n                  </span>\n                </div>\n              </div>\n            )\n          }}\n        </For>\n      </div>\n\n      <div class={styles().panelHeader}>\n        Sequences ({sequenceRegistrations().length})\n      </div>\n      <div class={styles().hotkeyList}>\n        <For each={sequenceRegistrations()}>\n          {(reg) => {\n            const targetConflicts = () =>\n              findSequenceTargetConflicts(reg, sequenceRegistrations())\n            const scopeConflicts = () =>\n              findSequenceScopeConflicts(reg, sequenceRegistrations())\n\n            const hasTargetConflict = () => targetConflicts().length > 0\n            const hasScopeConflict = () => scopeConflicts().length > 0\n\n            const conflictBehavior = (): ConflictBehavior =>\n              reg.options.conflictBehavior ?? 'warn'\n\n            const targetConflictBadge = () => {\n              const behavior = conflictBehavior()\n              const c = targetConflicts()\n              if (behavior === 'allow') {\n                return {\n                  style: 'badgeAllow' as const,\n                  label: '~',\n                  tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? 's' : ''} on same sequence and target (conflictBehavior: allow)`,\n                }\n              }\n              if (behavior === 'error') {\n                return {\n                  style: 'badgeError' as const,\n                  label: '!',\n                  tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? 's' : ''} on same sequence and target (conflictBehavior: error)`,\n                }\n              }\n              return {\n                style: 'badgeConflict' as const,\n                label: '!',\n                tooltip: `Warning: ${c.length} other binding${c.length > 1 ? 's' : ''} on same sequence and target`,\n              }\n            }\n\n            const scopeConflictTooltip = () => {\n              const c = scopeConflicts()\n              return `Info: ${c.length} binding${c.length > 1 ? 's' : ''} with same sequence on different target${c.length > 1 ? 's' : ''}`\n            }\n\n            const enabled = () => reg.options.enabled !== false\n\n            const triggerCount = () =>\n              sequenceRegistrations().find((r) => r.id === reg.id)\n                ?.triggerCount ?? reg.triggerCount\n\n            const [prevCount, setPrevCount] = createSignal(reg.triggerCount)\n            const [pulsing, setPulsing] = createSignal(false)\n\n            createEffect(\n              on(triggerCount, (current) => {\n                if (current > prevCount()) {\n                  setPulsing(true)\n                  setTimeout(() => setPulsing(false), 600)\n                }\n                setPrevCount(current)\n              }),\n            )\n\n            return (\n              <div\n                class={clsx(\n                  styles().hotkeyRow,\n                  props.selectedId() === reg.id && styles().hotkeyRowSelected,\n                  pulsing() && styles().hotkeyRowTriggered,\n                )}\n                onClick={() => props.setSelectedId(reg.id)}\n              >\n                <span class={styles().hotkeyLabel}>\n                  {formatHotkeySequence(reg.sequence)}\n                </span>\n                <Show when={triggerCount() > 0}>\n                  <span class={styles().triggerCount}>x{triggerCount()}</span>\n                </Show>\n                <div class={styles().hotkeyBadges}>\n                  {hasTargetConflict() && (\n                    <span\n                      class={clsx(\n                        styles().badge,\n                        styles()[targetConflictBadge().style],\n                        styles().tooltip,\n                      )}\n                    >\n                      {targetConflictBadge().label}\n                      <span class={styles().tooltipText} data-tooltip>\n                        {targetConflictBadge().tooltip}\n                      </span>\n                    </span>\n                  )}\n                  {hasScopeConflict() && (\n                    <span\n                      class={clsx(\n                        styles().badge,\n                        styles().badgeInfo,\n                        styles().tooltip,\n                      )}\n                    >\n                      i\n                      <span class={styles().tooltipText} data-tooltip>\n                        {scopeConflictTooltip()}\n                      </span>\n                    </span>\n                  )}\n                  <span\n                    class={clsx(\n                      styles().badge,\n                      enabled()\n                        ? styles().badgeEnabled\n                        : styles().badgeDisabled,\n                      styles().tooltip,\n                    )}\n                  >\n                    {enabled() ? 'on' : 'off'}\n                    <span class={styles().tooltipText} data-tooltip>\n                      {enabled()\n                        ? 'Sequence is enabled'\n                        : 'Sequence is disabled'}\n                    </span>\n                  </span>\n                  <span\n                    class={clsx(\n                      styles().badge,\n                      (reg.options.eventType ?? 'keydown') === 'keydown'\n                        ? styles().badgeKeydown\n                        : styles().badgeKeyup,\n                      styles().tooltip,\n                    )}\n                  >\n                    {reg.options.eventType ?? 'keydown'}\n                    <span class={styles().tooltipText} data-tooltip>\n                      Fires on {reg.options.eventType ?? 'keydown'} event\n                    </span>\n                  </span>\n                  <span\n                    class={clsx(\n                      styles().badge,\n                      styles().badgeTarget,\n                      styles().tooltip,\n                    )}\n                  >\n                    {getTargetLabel(reg.target)}\n                    <span class={styles().tooltipText} data-tooltip>\n                      {getTargetTooltip(reg.target)}\n                    </span>\n                  </span>\n                </div>\n              </div>\n            )\n          }}\n        </For>\n      </div>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"HotkeyList.js","names":["For","Show","createEffect","createMemo","createSignal","on","clsx","formatForDisplay","useStyles","useHotkeysDevtoolsState","effectiveSequenceMatchedSteps","ConflictBehavior","HotkeyRegistration","SequenceRegistrationView","sequenceKey","sequence","Array","join","HotkeyListProps","selectedId","setSelectedId","id","getTargetLabel","target","HTMLElement","Document","Window","document","window","tagName","toLowerCase","getTargetTooltip","tag","parts","push","className","classes","split","filter","Boolean","dataAttrs","from","attributes","attr","name","startsWith","map","value","length","findTargetConflicts","registration","all","other","hotkey","options","eventType","findScopeConflicts","findSequenceTargetConflicts","findSequenceScopeConflicts","SequenceListRow","props","reg","getSequences","sequenceProgressNow","styles","sequenceRegistrations","targetConflicts","scopeConflicts","hasTargetConflict","hasScopeConflict","conflictBehavior","targetConflictBadge","behavior","c","style","const","label","tooltip","scopeConflictTooltip","enabled","liveSequenceReg","find","r","triggerCount","matchedSteps","prevCount","setPrevCount","pulsing","setPulsing","current","setTimeout","_el$","_tmpl$2","_el$2","firstChild","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$0","_el$10","_el$1","_el$11","_el$12","$$click","_$insert","_$createComponent","each","children","step","i","_el$13","_tmpl$3","_el$14","when","_$effect","_$className","sequenceStepMatched","undefined","_el$3","_tmpl$","_el$4","_c$","_$memo","_el$15","_tmpl$4","_el$16","_p$","_v$0","badge","_v$1","tooltipText","e","t","_c$2","_el$17","_tmpl$5","_el$18","_el$19","_v$10","badgeInfo","_v$11","_v$","hotkeyRow","hotkeyRowSelected","hotkeyRowTriggered","_v$2","hotkeyLabel","_v$3","hotkeyBadges","_v$4","badgeEnabled","badgeDisabled","_v$5","_v$6","badgeKeydown","badgeKeyup","_v$7","_v$8","badgeTarget","_v$9","a","o","n","s","h","HotkeyList","state","registrations","_el$20","_tmpl$6","_el$21","_el$23","_el$22","panelHeader","_el$24","_tmpl$7","_el$30","_el$31","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$41","_el$40","_el$42","_el$43","_el$32","_el$33","_c$3","_el$44","_el$45","_v$21","_v$22","_c$4","_el$46","_el$47","_el$48","_v$23","_v$24","_v$12","_v$13","_v$14","_v$15","_v$16","_v$17","_v$18","_v$19","_v$20","hotkeyList","_el$25","_tmpl$8","_el$26","_el$28","_el$27","_el$29","_$delegateEvents"],"sources":["../../src/components/HotkeyList.tsx"],"sourcesContent":["import { For, Show, createEffect, createMemo, createSignal, on } from 'solid-js'\nimport clsx from 'clsx'\nimport { formatForDisplay } from '@tanstack/hotkeys'\nimport { useStyles } from '../styles/use-styles'\nimport { useHotkeysDevtoolsState } from '../HotkeysContextProvider'\nimport { effectiveSequenceMatchedSteps } from '../sequence-progress'\nimport type {\n  ConflictBehavior,\n  HotkeyRegistration,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\nfunction sequenceKey(sequence: Array<string>): string {\n  return sequence.join('|')\n}\n\ntype HotkeyListProps = {\n  selectedId: () => string | null\n  setSelectedId: (id: string | null) => void\n}\n\nfunction getTargetLabel(target: HTMLElement | Document | Window): string {\n  if (typeof document !== 'undefined' && target === document) {\n    return 'document'\n  }\n  if (typeof window !== 'undefined' && target === window) {\n    return 'window'\n  }\n  if (target instanceof HTMLElement) {\n    return target.tagName.toLowerCase()\n  }\n  return 'element'\n}\n\nfunction getTargetTooltip(target: HTMLElement | Document | Window): string {\n  if (typeof document !== 'undefined' && target === document) {\n    return 'Listening on document'\n  }\n  if (typeof window !== 'undefined' && target === window) {\n    return 'Listening on window'\n  }\n  if (target instanceof HTMLElement) {\n    const tag = target.tagName.toLowerCase()\n    const parts: Array<string> = [tag]\n    if (target.id) {\n      parts.push(`id=\"${target.id}\"`)\n    }\n    if (target.className) {\n      const classes = target.className.split(/\\s+/).filter(Boolean).join(', ')\n      parts.push(`class=\"${classes}\"`)\n    }\n    // Collect data- attributes\n    const dataAttrs = Array.from(target.attributes)\n      .filter((attr) => attr.name.startsWith('data-'))\n      .map((attr) => `${attr.name}=\"${attr.value}\"`)\n    if (dataAttrs.length > 0) {\n      parts.push(...dataAttrs)\n    }\n    return `Listening on ${parts.join(' ')}`\n  }\n  return 'Listening on element'\n}\n\nfunction findTargetConflicts(\n  registration: HotkeyRegistration,\n  all: Array<HotkeyRegistration>,\n): Array<HotkeyRegistration> {\n  return all.filter(\n    (other) =>\n      other.id !== registration.id &&\n      other.hotkey === registration.hotkey &&\n      other.options.eventType === registration.options.eventType &&\n      other.target === registration.target,\n  )\n}\n\nfunction findScopeConflicts(\n  registration: HotkeyRegistration,\n  all: Array<HotkeyRegistration>,\n): Array<HotkeyRegistration> {\n  return all.filter(\n    (other) =>\n      other.id !== registration.id &&\n      other.hotkey === registration.hotkey &&\n      other.options.eventType === registration.options.eventType &&\n      other.target !== registration.target,\n  )\n}\n\nfunction findSequenceTargetConflicts(\n  registration: SequenceRegistrationView,\n  all: Array<SequenceRegistrationView>,\n): Array<SequenceRegistrationView> {\n  return all.filter(\n    (other) =>\n      other.id !== registration.id &&\n      sequenceKey(other.sequence) === sequenceKey(registration.sequence) &&\n      other.options.eventType === registration.options.eventType &&\n      other.target === registration.target,\n  )\n}\n\nfunction findSequenceScopeConflicts(\n  registration: SequenceRegistrationView,\n  all: Array<SequenceRegistrationView>,\n): Array<SequenceRegistrationView> {\n  return all.filter(\n    (other) =>\n      other.id !== registration.id &&\n      sequenceKey(other.sequence) === sequenceKey(registration.sequence) &&\n      other.options.eventType === registration.options.eventType &&\n      other.target !== registration.target,\n  )\n}\n\nfunction SequenceListRow(props: {\n  reg: SequenceRegistrationView\n  getSequences: () => Array<SequenceRegistrationView>\n  sequenceProgressNow: () => number\n  selectedId: () => string | null\n  setSelectedId: (id: string | null) => void\n}) {\n  const styles = useStyles()\n\n  const sequenceRegistrations = () => props.getSequences()\n\n  const targetConflicts = () =>\n    findSequenceTargetConflicts(props.reg, sequenceRegistrations())\n  const scopeConflicts = () =>\n    findSequenceScopeConflicts(props.reg, sequenceRegistrations())\n\n  const hasTargetConflict = () => targetConflicts().length > 0\n  const hasScopeConflict = () => scopeConflicts().length > 0\n\n  const conflictBehavior = (): ConflictBehavior =>\n    props.reg.options.conflictBehavior ?? 'warn'\n\n  const targetConflictBadge = () => {\n    const behavior = conflictBehavior()\n    const c = targetConflicts()\n    if (behavior === 'allow') {\n      return {\n        style: 'badgeAllow' as const,\n        label: '~',\n        tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? 's' : ''} on same sequence and target (conflictBehavior: allow)`,\n      }\n    }\n    if (behavior === 'error') {\n      return {\n        style: 'badgeError' as const,\n        label: '!',\n        tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? 's' : ''} on same sequence and target (conflictBehavior: error)`,\n      }\n    }\n    return {\n      style: 'badgeConflict' as const,\n      label: '!',\n      tooltip: `Warning: ${c.length} other binding${c.length > 1 ? 's' : ''} on same sequence and target`,\n    }\n  }\n\n  const scopeConflictTooltip = () => {\n    const c = scopeConflicts()\n    return `Info: ${c.length} binding${c.length > 1 ? 's' : ''} with same sequence on different target${c.length > 1 ? 's' : ''}`\n  }\n\n  const enabled = () => props.reg.options.enabled !== false\n\n  const liveSequenceReg = createMemo(\n    () =>\n      sequenceRegistrations().find((r) => r.id === props.reg.id) ?? props.reg,\n  )\n\n  const triggerCount = () =>\n    sequenceRegistrations().find((r) => r.id === props.reg.id)?.triggerCount ??\n    props.reg.triggerCount\n\n  const matchedSteps = createMemo(() =>\n    effectiveSequenceMatchedSteps(\n      liveSequenceReg(),\n      props.sequenceProgressNow(),\n    ),\n  )\n\n  const [prevCount, setPrevCount] = createSignal(props.reg.triggerCount)\n  const [pulsing, setPulsing] = createSignal(false)\n\n  createEffect(\n    on(triggerCount, (current) => {\n      if (current > prevCount()) {\n        setPulsing(true)\n        setTimeout(() => setPulsing(false), 600)\n      }\n      setPrevCount(current)\n    }),\n  )\n\n  return (\n    <div\n      class={clsx(\n        styles().hotkeyRow,\n        props.selectedId() === props.reg.id && styles().hotkeyRowSelected,\n        pulsing() && styles().hotkeyRowTriggered,\n      )}\n      onClick={() => props.setSelectedId(props.reg.id)}\n    >\n      <span class={styles().hotkeyLabel}>\n        <For each={liveSequenceReg().sequence}>\n          {(step, i) => (\n            <span>\n              <Show when={i() > 0}> </Show>\n              <span\n                class={\n                  i() < matchedSteps()\n                    ? styles().sequenceStepMatched\n                    : undefined\n                }\n              >\n                {formatForDisplay(step)}\n              </span>\n            </span>\n          )}\n        </For>\n      </span>\n      <Show when={triggerCount() > 0}>\n        <span class={styles().triggerCount}>x{triggerCount()}</span>\n      </Show>\n      <div class={styles().hotkeyBadges}>\n        {hasTargetConflict() && (\n          <span\n            class={clsx(\n              styles().badge,\n              styles()[targetConflictBadge().style],\n              styles().tooltip,\n            )}\n          >\n            {targetConflictBadge().label}\n            <span class={styles().tooltipText} data-tooltip>\n              {targetConflictBadge().tooltip}\n            </span>\n          </span>\n        )}\n        {hasScopeConflict() && (\n          <span\n            class={clsx(styles().badge, styles().badgeInfo, styles().tooltip)}\n          >\n            i\n            <span class={styles().tooltipText} data-tooltip>\n              {scopeConflictTooltip()}\n            </span>\n          </span>\n        )}\n        <span\n          class={clsx(\n            styles().badge,\n            enabled() ? styles().badgeEnabled : styles().badgeDisabled,\n            styles().tooltip,\n          )}\n        >\n          {enabled() ? 'on' : 'off'}\n          <span class={styles().tooltipText} data-tooltip>\n            {enabled() ? 'Sequence is enabled' : 'Sequence is disabled'}\n          </span>\n        </span>\n        <span\n          class={clsx(\n            styles().badge,\n            (props.reg.options.eventType ?? 'keydown') === 'keydown'\n              ? styles().badgeKeydown\n              : styles().badgeKeyup,\n            styles().tooltip,\n          )}\n        >\n          {props.reg.options.eventType ?? 'keydown'}\n          <span class={styles().tooltipText} data-tooltip>\n            Fires on {props.reg.options.eventType ?? 'keydown'} event\n          </span>\n        </span>\n        <span\n          class={clsx(styles().badge, styles().badgeTarget, styles().tooltip)}\n        >\n          {getTargetLabel(props.reg.target)}\n          <span class={styles().tooltipText} data-tooltip>\n            {getTargetTooltip(props.reg.target)}\n          </span>\n        </span>\n      </div>\n    </div>\n  )\n}\n\nexport function HotkeyList(props: HotkeyListProps) {\n  const styles = useStyles()\n  const state = useHotkeysDevtoolsState()\n\n  const registrations = createMemo(() => state.registrations())\n  const sequenceRegistrations = createMemo(() => state.sequenceRegistrations())\n\n  return (\n    <>\n      <div class={styles().panelHeader}>Hotkeys ({registrations().length})</div>\n      <div class={styles().hotkeyList}>\n        <For each={registrations()}>\n          {(reg) => {\n            const targetConflicts = () =>\n              findTargetConflicts(reg, registrations())\n            const scopeConflicts = () =>\n              findScopeConflicts(reg, registrations())\n\n            const hasTargetConflict = () => targetConflicts().length > 0\n            const hasScopeConflict = () => scopeConflicts().length > 0\n\n            const conflictBehavior = (): ConflictBehavior =>\n              reg.options.conflictBehavior ?? 'warn'\n\n            const targetConflictBadge = () => {\n              const behavior = conflictBehavior()\n              const c = targetConflicts()\n              if (behavior === 'allow') {\n                return {\n                  style: 'badgeAllow' as const,\n                  label: '~',\n                  tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? 's' : ''} on same key and target (conflictBehavior: allow)`,\n                }\n              }\n              if (behavior === 'error') {\n                return {\n                  style: 'badgeError' as const,\n                  label: '!',\n                  tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? 's' : ''} on same key and target (conflictBehavior: error)`,\n                }\n              }\n              // 'warn' (default) or 'replace' (replacement already happened, but show warn-style if somehow present)\n              return {\n                style: 'badgeConflict' as const,\n                label: '!',\n                tooltip: `Warning: ${c.length} other binding${c.length > 1 ? 's' : ''} on same key and target`,\n              }\n            }\n\n            const scopeConflictTooltip = () => {\n              const c = scopeConflicts()\n              return `Info: ${c.length} binding${c.length > 1 ? 's' : ''} with same key on different target${c.length > 1 ? 's' : ''}`\n            }\n\n            const enabled = () => reg.options.enabled !== false\n\n            // Look up trigger count reactively from the registrations list\n            // (reg is a stable object ref; the list re-derives on store change)\n            const triggerCount = () =>\n              registrations().find((r) => r.id === reg.id)?.triggerCount ??\n              reg.triggerCount\n\n            // Track trigger count changes for pulse animation\n            const [prevCount, setPrevCount] = createSignal(reg.triggerCount)\n            const [pulsing, setPulsing] = createSignal(false)\n\n            createEffect(\n              on(triggerCount, (current) => {\n                if (current > prevCount()) {\n                  setPulsing(true)\n                  setTimeout(() => setPulsing(false), 600)\n                }\n                setPrevCount(current)\n              }),\n            )\n\n            return (\n              <div\n                class={clsx(\n                  styles().hotkeyRow,\n                  props.selectedId() === reg.id && styles().hotkeyRowSelected,\n                  pulsing() && styles().hotkeyRowTriggered,\n                )}\n                onClick={() => props.setSelectedId(reg.id)}\n              >\n                <span class={styles().hotkeyLabel}>\n                  {formatForDisplay(reg.hotkey)}\n                </span>\n                <Show when={triggerCount() > 0}>\n                  <span class={styles().triggerCount}>x{triggerCount()}</span>\n                </Show>\n                <div class={styles().hotkeyBadges}>\n                  {hasTargetConflict() && (\n                    <span\n                      class={clsx(\n                        styles().badge,\n                        styles()[targetConflictBadge().style],\n                        styles().tooltip,\n                      )}\n                    >\n                      {targetConflictBadge().label}\n                      <span class={styles().tooltipText} data-tooltip>\n                        {targetConflictBadge().tooltip}\n                      </span>\n                    </span>\n                  )}\n                  {hasScopeConflict() && (\n                    <span\n                      class={clsx(\n                        styles().badge,\n                        styles().badgeInfo,\n                        styles().tooltip,\n                      )}\n                    >\n                      i\n                      <span class={styles().tooltipText} data-tooltip>\n                        {scopeConflictTooltip()}\n                      </span>\n                    </span>\n                  )}\n                  <span\n                    class={clsx(\n                      styles().badge,\n                      enabled()\n                        ? styles().badgeEnabled\n                        : styles().badgeDisabled,\n                      styles().tooltip,\n                    )}\n                  >\n                    {enabled() ? 'on' : 'off'}\n                    <span class={styles().tooltipText} data-tooltip>\n                      {enabled() ? 'Hotkey is enabled' : 'Hotkey is disabled'}\n                    </span>\n                  </span>\n                  <span\n                    class={clsx(\n                      styles().badge,\n                      (reg.options.eventType ?? 'keydown') === 'keydown'\n                        ? styles().badgeKeydown\n                        : styles().badgeKeyup,\n                      styles().tooltip,\n                    )}\n                  >\n                    {reg.options.eventType ?? 'keydown'}\n                    <span class={styles().tooltipText} data-tooltip>\n                      Fires on {reg.options.eventType ?? 'keydown'} event\n                    </span>\n                  </span>\n                  <span\n                    class={clsx(\n                      styles().badge,\n                      styles().badgeTarget,\n                      styles().tooltip,\n                    )}\n                  >\n                    {getTargetLabel(reg.target)}\n                    <span class={styles().tooltipText} data-tooltip>\n                      {getTargetTooltip(reg.target)}\n                    </span>\n                  </span>\n                </div>\n              </div>\n            )\n          }}\n        </For>\n      </div>\n\n      <div class={styles().panelHeader}>\n        Sequences ({sequenceRegistrations().length})\n      </div>\n      <div class={styles().hotkeyList}>\n        <For each={sequenceRegistrations()}>\n          {(reg) => (\n            <SequenceListRow\n              reg={reg}\n              getSequences={sequenceRegistrations}\n              sequenceProgressNow={state.sequenceProgressNow}\n              selectedId={props.selectedId}\n              setSelectedId={props.setSelectedId}\n            />\n          )}\n        </For>\n      </div>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/Shell.js

@@ -3,18 +3,33 @@ import { useStyles } from "../styles/use-styles.js";
 import { HeldKeysBar } from "./HeldKeysTopbar.js";
 import { HotkeyList } from "./HotkeyList.js";
 import { DetailsPanel } from "./DetailsPanel.js";
-import { className, createComponent, delegateEvents, effect, insert, setStyleProperty, template } from "solid-js/web";
+import { className, createComponent, delegateEvents, effect, insert, setStyleProperty, style, template, use } from "solid-js/web";
 import { Header, HeaderLogo, MainPanel } from "@tanstack/devtools-ui";
-import { createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 
 //#region src/components/Shell.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div><div><div style=min-width:150px;max-width:800px></div><div></div><div style=flex:1><div>Details`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><div><div style=min-width:150px;max-width:800px><div></div></div><div></div><div style=flex:1><div>Details`), _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+function readResizeObserverBlockSize(entry) {
+	const [box] = entry.borderBoxSize;
+	if (box !== void 0) return box.blockSize;
+	return entry.contentRect.height;
+}
+/** TanStack devtools plugin pane; percentage heights break without this. */
+function resolvePluginHost(el) {
+	const found = el.closest("[id^=\"plugin-container-\"]");
+	if (found instanceof HTMLElement) return found;
+	let n = el;
+	for (let i = 0; i < 3 && n; i++) n = n.parentElement;
+	return n;
+}
 function Shell() {
 	const styles = useStyles();
 	const state = useHotkeysDevtoolsState();
 	const [selectedId, setSelectedId] = createSignal(null);
 	const [leftPanelWidth, setLeftPanelWidth] = createSignal(300);
 	const [isDragging, setIsDragging] = createSignal(false);
+	const [shellRootEl, setShellRootEl] = createSignal(null);
+	const [slotHeightPx, setSlotHeightPx] = createSignal(void 0);
 	const selectedRegistration = createMemo(() => {
 		const id = selectedId();
 		if (!id) return null;
@@ -52,46 +67,88 @@ function Shell() {
 		document.removeEventListener("mousemove", handleMouseMove);
 		document.removeEventListener("mouseup", handleMouseUp);
 	});
-	return createComponent(MainPanel, { get children() {
-		return [createComponent(Header, { get children() {
-			return createComponent(HeaderLogo, {
-				flavor: {
-					light: "oklch(51.4% 0.222 16.935)",
-					dark: "oklch(58.6% 0.253 17.585)"
-				},
-				children: "TanStack Hotkeys"
-			});
-		} }), (() => {
-			var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild;
-			insert(_el$, createComponent(HeldKeysBar, {}), _el$2);
-			insert(_el$3, createComponent(HotkeyList, {
-				selectedId,
-				setSelectedId
-			}));
-			_el$4.$$mousedown = handleMouseDown;
-			insert(_el$5, createComponent(DetailsPanel, { selectedRegistration }), null);
-			effect((_p$) => {
-				var _v$ = styles().mainContainer, _v$2 = styles().panelsContainer, _v$3 = styles().leftPanel, _v$4 = `${leftPanelWidth()}px`, _v$5 = `${styles().dragHandle} ${isDragging() ? "dragging" : ""}`, _v$6 = styles().rightPanel, _v$7 = styles().panelHeader;
-				_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);
-				_v$4 !== _p$.o && setStyleProperty(_el$3, "width", _p$.o = _v$4);
-				_v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
-				_v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
-				_v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0,
-				o: void 0,
-				i: void 0,
-				n: void 0,
-				s: void 0
-			});
-			return _el$;
-		})()];
-	} });
+	createEffect(() => {
+		const el = shellRootEl();
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const pluginHost = resolvePluginHost(el);
+		if (!pluginHost) return;
+		const applyHeight = (entry) => {
+			const clientH = pluginHost.clientHeight;
+			const fromObserver = entry !== void 0 ? 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 (() => {
+		var _el$ = _tmpl$2();
+		use((el) => setShellRootEl(el), _el$);
+		insert(_el$, createComponent(MainPanel, {
+			get ["class"]() {
+				return styles().mainPanelShell;
+			},
+			get children() {
+				return [createComponent(Header, { get children() {
+					return createComponent(HeaderLogo, {
+						flavor: {
+							light: "oklch(51.4% 0.222 16.935)",
+							dark: "oklch(58.6% 0.253 17.585)"
+						},
+						children: "TanStack Hotkeys"
+					});
+				} }), (() => {
+					var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.firstChild;
+					insert(_el$2, createComponent(HeldKeysBar, {}), _el$3);
+					insert(_el$5, createComponent(HotkeyList, {
+						selectedId,
+						setSelectedId
+					}));
+					_el$6.$$mousedown = handleMouseDown;
+					insert(_el$7, createComponent(DetailsPanel, { selectedRegistration }), null);
+					effect((_p$) => {
+						var _v$ = styles().mainContainer, _v$2 = styles().panelsContainer, _v$3 = styles().leftPanel, _v$4 = `${leftPanelWidth()}px`, _v$5 = styles().leftPanelScroll, _v$6 = `${styles().dragHandle} ${isDragging() ? "dragging" : ""}`, _v$7 = styles().rightPanel, _v$8 = styles().panelHeader;
+						_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+						_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+						_v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+						_v$4 !== _p$.o && setStyleProperty(_el$4, "width", _p$.o = _v$4);
+						_v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+						_v$6 !== _p$.n && className(_el$6, _p$.n = _v$6);
+						_v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
+						_v$8 !== _p$.h && className(_el$8, _p$.h = _v$8);
+						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
+					});
+					return _el$2;
+				})()];
+			}
+		}));
+		effect((_p$) => {
+			var _v$9 = styles().shellRoot, _v$0 = { ...slotHeightPx() !== void 0 ? {
+				height: `${slotHeightPx()}px`,
+				"max-height": `${slotHeightPx()}px`
+			} : {} };
+			_v$9 !== _p$.e && className(_el$, _p$.e = _v$9);
+			_p$.t = style(_el$, _v$0, _p$.t);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
 }
 delegateEvents(["mousedown"]);
 

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","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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"}
+{"version":3,"file":"Shell.js","names":["createEffect","createMemo","createSignal","onCleanup","onMount","Header","HeaderLogo","MainPanel","useStyles","useHotkeysDevtoolsState","HeldKeysBar","HotkeyList","DetailsPanel","readResizeObserverBlockSize","entry","ResizeObserverEntry","box","borderBoxSize","undefined","blockSize","contentRect","height","resolvePluginHost","el","HTMLElement","found","closest","n","i","parentElement","Shell","styles","state","selectedId","setSelectedId","leftPanelWidth","setLeftPanelWidth","isDragging","setIsDragging","shellRootEl","setShellRootEl","slotHeightPx","setSlotHeightPx","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","ResizeObserver","pluginHost","applyHeight","clientH","clientHeight","fromObserver","h","round","ro","entries","observe","disconnect","_el$","_tmpl$2","_$use","_$insert","_$createComponent","class","mainPanelShell","children","flavor","light","dark","_el$2","_tmpl$","_el$3","firstChild","_el$4","_el$5","_el$6","nextSibling","_el$7","_el$8","$$mousedown","_$effect","_p$","_v$","mainContainer","_v$2","panelsContainer","_v$3","leftPanel","_v$4","_v$5","leftPanelScroll","_v$6","dragHandle","_v$7","rightPanel","_v$8","panelHeader","_$className","t","a","o","_$setStyleProperty","s","_v$9","shellRoot","_v$0","_$style","_$delegateEvents"],"sources":["../../src/components/Shell.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  onMount,\n} 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\nfunction readResizeObserverBlockSize(entry: ResizeObserverEntry): number {\n  const [box] = entry.borderBoxSize\n  if (box !== undefined) return box.blockSize\n  return entry.contentRect.height\n}\n\n/** TanStack devtools plugin pane; percentage heights break without this. */\nfunction resolvePluginHost(el: HTMLElement): HTMLElement | null {\n  const found = el.closest('[id^=\"plugin-container-\"]')\n  if (found instanceof HTMLElement) return found\n  let n: HTMLElement | null = el\n  for (let i = 0; i < 3 && n; i++) {\n    n = n.parentElement\n  }\n  return n\n}\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  const [shellRootEl, setShellRootEl] = createSignal<HTMLElement | null>(null)\n  const [slotHeightPx, setSlotHeightPx] = createSignal<number | undefined>(\n    undefined,\n  )\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  createEffect(() => {\n    const el = shellRootEl()\n    if (!el || typeof ResizeObserver === 'undefined') return\n    const pluginHost = resolvePluginHost(el)\n    if (!pluginHost) return\n\n    const applyHeight = (entry?: ResizeObserverEntry) => {\n      const clientH = pluginHost.clientHeight\n      const fromObserver =\n        entry !== undefined ? readResizeObserverBlockSize(entry) : 0\n      const h = clientH > 0 ? clientH : fromObserver\n      if (h > 0) setSlotHeightPx(Math.round(h))\n    }\n\n    applyHeight()\n    const ro = new ResizeObserver((entries) => {\n      applyHeight(entries[0])\n    })\n    ro.observe(pluginHost)\n    onCleanup(() => ro.disconnect())\n  })\n\n  return (\n    <div\n      ref={(el) => setShellRootEl(el)}\n      class={styles().shellRoot}\n      style={{\n        ...(slotHeightPx() !== undefined\n          ? {\n              height: `${slotHeightPx()}px`,\n              'max-height': `${slotHeightPx()}px`,\n            }\n          : {}),\n      }}\n    >\n      <MainPanel class={styles().mainPanelShell}>\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              <div class={styles().leftPanelScroll}>\n                <HotkeyList\n                  selectedId={selectedId}\n                  setSelectedId={setSelectedId}\n                />\n              </div>\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    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/core.d.ts

@@ -1,20 +1,8 @@
+import { ClassType } from "@tanstack/devtools-utils/solid";
+
 //#region src/core.d.ts
 interface HotkeysDevtoolsInit {}
-declare const HotkeysDevtoolsCore: new () => {
-    "__#private@#isMounted": boolean;
-    "__#private@#isMounting": boolean;
-    "__#private@#abortMount": boolean;
-    "__#private@#dispose"?: () => void;
-    mount<T extends HTMLElement>(el: T, props: TanStackDevtoolsPluginProps): Promise<void>;
-    unmount(): void;
-  }, HotkeysDevtoolsCoreNoOp: new () => {
-    mount<T extends HTMLElement>(_el: T, _props: TanStackDevtoolsPluginProps): Promise<void>;
-    unmount(): void;
-    "__#private@#isMounted": boolean;
-    "__#private@#isMounting": boolean;
-    "__#private@#abortMount": boolean;
-    "__#private@#dispose"?: () => void;
-  };
+declare const HotkeysDevtoolsCore: ClassType;
 //#endregion
 export { HotkeysDevtoolsCore, HotkeysDevtoolsInit };
 //# sourceMappingURL=core.d.ts.map

package/dist/core.js

@@ -2,7 +2,9 @@ import { constructCoreClass } from "@tanstack/devtools-utils/solid";
 
 //#region src/core.tsx
 const loadComponent = () => import("./components/index.js");
-const [HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp] = constructCoreClass(loadComponent);
+const coreClasses = constructCoreClass(loadComponent);
+const HotkeysDevtoolsCore = coreClasses[0];
+const HotkeysDevtoolsCoreNoOp = coreClasses[1];
 
 //#endregion
 export { HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp };

package/dist/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","names":["constructCoreClass","loadComponent","HotkeysDevtoolsInit","HotkeysDevtoolsCore","HotkeysDevtoolsCoreNoOp"],"sources":["../src/core.tsx"],"sourcesContent":["import { constructCoreClass } from '@tanstack/devtools-utils/solid'\n\nconst loadComponent = () => import('./components/index')\n\nexport interface HotkeysDevtoolsInit {}\n\nconst [HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp] =\n  constructCoreClass(loadComponent)\n\nexport { HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp }\n"],"mappings":";;;AAEA,MAAMC,sBAAsB,OAAO;AAInC,MAAM,CAACE,qBAAqBC,2BAC1BJ,mBAAmBC,cAAc"}
+{"version":3,"file":"core.js","names":["constructCoreClass","ClassType","loadComponent","HotkeysDevtoolsInit","coreClasses","HotkeysDevtoolsCore","HotkeysDevtoolsCoreNoOp"],"sources":["../src/core.tsx"],"sourcesContent":["import { constructCoreClass } from '@tanstack/devtools-utils/solid'\nimport type { ClassType } from '@tanstack/devtools-utils/solid'\n\nconst loadComponent = () => import('./components/index')\n\nexport interface HotkeysDevtoolsInit {}\n\nconst coreClasses = constructCoreClass(loadComponent)\n\nexport const HotkeysDevtoolsCore: ClassType = coreClasses[0]\nexport const HotkeysDevtoolsCoreNoOp: ClassType = coreClasses[1]\n"],"mappings":";;;AAGA,MAAME,sBAAsB,OAAO;AAInC,MAAME,cAAcJ,mBAAmBE,cAAc;AAErD,MAAaG,sBAAiCD,YAAY;AAC1D,MAAaE,0BAAqCF,YAAY"}

package/dist/index.d.ts

@@ -1,14 +1,8 @@
 import { HotkeysDevtoolsInit } from "./core.js";
+import { ClassType } from "@tanstack/devtools-utils/solid";
 
 //#region src/index.d.ts
-declare const HotkeysDevtoolsCore: new () => {
-  "__#private@#isMounted": boolean;
-  "__#private@#isMounting": boolean;
-  "__#private@#abortMount": boolean;
-  "__#private@#dispose"?: () => void;
-  mount<T extends HTMLElement>(el: T, props: TanStackDevtoolsPluginProps): Promise<void>;
-  unmount(): void;
-};
+declare const HotkeysDevtoolsCore: ClassType;
 //#endregion
 export { HotkeysDevtoolsCore, type HotkeysDevtoolsInit };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Devtools.HotkeysDevtoolsCoreNoOp","Devtools.HotkeysDevtoolsCore"],"sources":["../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './core'\n\nexport const HotkeysDevtoolsCore =\n  process.env.NODE_ENV !== 'development'\n    ? Devtools.HotkeysDevtoolsCoreNoOp\n    : Devtools.HotkeysDevtoolsCore\n\nexport type { HotkeysDevtoolsInit } from './core'\n"],"mappings":";;;;;AAIA,MAAa,sBACX,QAAQ,IAAI,aAAa,gBACrBA,0BACAC"}
+{"version":3,"file":"index.js","names":["Devtools.HotkeysDevtoolsCoreNoOp","Devtools.HotkeysDevtoolsCore"],"sources":["../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './core'\nimport type { ClassType } from '@tanstack/devtools-utils/solid'\n\nexport const HotkeysDevtoolsCore: ClassType =\n  process.env.NODE_ENV !== 'development'\n    ? Devtools.HotkeysDevtoolsCoreNoOp\n    : Devtools.HotkeysDevtoolsCore\n\nexport type { HotkeysDevtoolsInit } from './core'\n"],"mappings":";;;;;AAKA,MAAa,sBACX,QAAQ,IAAI,aAAa,gBACrBA,0BACAC"}

package/dist/sequence-progress.js

@@ -0,0 +1,20 @@
+import { DEFAULT_SEQUENCE_TIMEOUT } from "@tanstack/hotkeys";
+
+//#region src/sequence-progress.ts
+/**
+* Matched step count for UI, accounting for inter-key timeout even if the
+* manager has not processed another event yet.
+*/
+function effectiveSequenceMatchedSteps(reg, now) {
+	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. */
+function needsSequenceProgressClock(regs, now) {
+	return regs.some((reg) => effectiveSequenceMatchedSteps(reg, now) > 0);
+}
+
+//#endregion
+export { effectiveSequenceMatchedSteps, needsSequenceProgressClock };
+//# sourceMappingURL=sequence-progress.js.map

package/dist/sequence-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sequence-progress.js","names":[],"sources":["../src/sequence-progress.ts"],"sourcesContent":["import { DEFAULT_SEQUENCE_TIMEOUT } from '@tanstack/hotkeys'\nimport type { SequenceRegistrationView } from '@tanstack/hotkeys'\n\n/**\n * Matched step count for UI, accounting for inter-key timeout even if the\n * manager has not processed another event yet.\n */\nexport function effectiveSequenceMatchedSteps(\n  reg: SequenceRegistrationView,\n  now: number,\n): number {\n  const timeout = reg.options.timeout ?? DEFAULT_SEQUENCE_TIMEOUT\n  if (\n    reg.matchedStepCount <= 0 ||\n    reg.partialMatchLastKeyTime <= 0 ||\n    now - reg.partialMatchLastKeyTime > timeout\n  ) {\n    return 0\n  }\n  return reg.matchedStepCount\n}\n\n/** Whether the devtools should run a short interval to refresh sequence progress UI. */\nexport function needsSequenceProgressClock(\n  regs: Array<SequenceRegistrationView>,\n  now: number,\n): boolean {\n  return regs.some((reg) => effectiveSequenceMatchedSteps(reg, now) > 0)\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,8BACd,KACA,KACQ;CACR,MAAM,UAAU,IAAI,QAAQ,WAAW;AACvC,KACE,IAAI,oBAAoB,KACxB,IAAI,2BAA2B,KAC/B,MAAM,IAAI,0BAA0B,QAEpC,QAAO;AAET,QAAO,IAAI;;;AAIb,SAAgB,2BACd,MACA,KACS;AACT,QAAO,KAAK,MAAM,QAAQ,8BAA8B,KAAK,IAAI,GAAG,EAAE"}

package/dist/styles/use-styles.js

@@ -10,9 +10,28 @@ const stylesFactory = (theme) => {
 	const css = goober.css;
 	const t = (light, dark) => theme === "light" ? light : dark;
 	return {
+		shellRoot: css`
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      height: 100%;
+      flex: 1;
+      overflow: hidden;
+    `,
+		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 +66,10 @@ const stylesFactory = (theme) => {
     `,
 		panelsContainer: css`
       display: flex;
+      flex: 1 1 0%;
+      min-height: 0;
+      overflow: hidden;
+      align-items: stretch;
     `,
 		dragHandle: css`
       width: 8px;
@@ -129,6 +152,13 @@ const stylesFactory = (theme) => {
       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 +167,9 @@ const stylesFactory = (theme) => {
       display: flex;
       flex-direction: column;
       flex: 1;
+      min-height: 0;
+      min-width: 0;
+      overflow: hidden;
     `,
 		panelHeader: css`
       font-size: ${fontSize.md};
@@ -197,6 +230,10 @@ const stylesFactory = (theme) => {
       overflow: hidden;
       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;
@@ -250,6 +287,11 @@ const stylesFactory = (theme) => {
       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`
@@ -378,6 +420,11 @@ const stylesFactory = (theme) => {
       box-shadow: ${tokens.shadow.sm()};
       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;