@tanstack/hotkeys-devtools 0.7.4 → 0.8.0

package/dist/components/HotkeyList.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"HotkeyList.js","names":["For","Show","createEffect","createMemo","createSignal","on","clsx","matchSorter","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","buildRowTooltip","meta","description","undefined","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","metaName","rowTooltip","_el$","_tmpl$4","_el$3","firstChild","_el$4","_el$8","nextSibling","_el$9","_el$0","_el$1","_el$10","_el$11","_el$13","_el$12","_el$14","_el$15","$$click","_$insert","_$createComponent","when","children","_el$2","_tmpl$","_$effect","_$className","rowTooltipText","each","step","i","_el$16","_tmpl$5","_el$17","sequenceStepMatched","_el$5","_tmpl$2","hotkeyLabelName","_el$6","_tmpl$3","_el$7","_c$","_$memo","_el$18","_tmpl$6","_el$19","_p$","_v$1","badge","_v$10","tooltipText","e","t","_c$2","_el$20","_tmpl$7","_el$21","_el$22","_v$11","badgeInfo","_v$12","_v$","hotkeyRow","hotkeyRowSelected","hotkeyRowTriggered","_v$2","hotkeyLabel","_v$3","hotkeyLabelKeys","_v$4","hotkeyBadges","_v$5","badgeEnabled","badgeDisabled","_v$6","_v$7","badgeKeydown","badgeKeyup","_v$8","_v$9","badgeTarget","_v$0","a","o","n","s","h","d","HotkeyList","state","searchQuery","setSearchQuery","registrations","filteredRegistrations","query","trim","keys","filteredSequenceRegistrations","_el$23","_tmpl$9","_el$24","$$input","currentTarget","_el$25","_tmpl$8","searchClear","_v$13","searchContainer","_v$14","searchInput","_el$26","_tmpl$0","_el$27","_el$29","_el$28","panelHeader","_el$30","_tmpl$1","_el$36","_el$38","_el$39","_el$43","_el$44","_el$45","_el$46","_el$47","_el$48","_el$50","_el$49","_el$51","_el$52","_el$37","_el$40","_el$41","_el$42","_c$3","_el$53","_el$54","_v$25","_v$26","_c$4","_el$55","_el$56","_el$57","_v$27","_v$28","_v$15","_v$16","_v$17","_v$18","_v$19","_v$20","_v$21","_v$22","_v$23","_v$24","hotkeyList","_el$31","_tmpl$10","_el$32","_el$34","_el$33","_el$35","_$delegateEvents"],"sources":["../../src/components/HotkeyList.tsx"],"sourcesContent":["import { For, Show, createEffect, createMemo, createSignal, on } from 'solid-js'\nimport clsx from 'clsx'\nimport { matchSorter } from 'match-sorter'\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 buildRowTooltip(meta?: {\n  name?: string\n  description?: string\n}): string | undefined {\n  if (!meta) return undefined\n  const parts: Array<string> = []\n  if (meta.name) parts.push(meta.name)\n  if (meta.description) parts.push(meta.description)\n  return parts.length > 0 ? parts.join(' — ') : undefined\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  const metaName = () => props.reg.options.meta?.name\n  const rowTooltip = () => buildRowTooltip(props.reg.options.meta)\n\n  return (\n    <div\n      class={clsx(\n        styles().hotkeyRow,\n        props.selectedId() === props.reg.id && styles().hotkeyRowSelected,\n        pulsing() && styles().hotkeyRowTriggered,\n        rowTooltip() && styles().tooltip,\n      )}\n      onClick={() => props.setSelectedId(props.reg.id)}\n    >\n      <Show when={rowTooltip()}>\n        <span class={styles().rowTooltipText} data-tooltip>\n          {rowTooltip()}\n        </span>\n      </Show>\n      <span class={styles().hotkeyLabel}>\n        <span class={styles().hotkeyLabelKeys}>\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={metaName()}>\n          <span class={styles().hotkeyLabelName}>{metaName()}</span>\n        </Show>\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 [searchQuery, setSearchQuery] = createSignal('')\n\n  const registrations = createMemo(() => state.registrations())\n  const sequenceRegistrations = createMemo(() => state.sequenceRegistrations())\n\n  const filteredRegistrations = createMemo(() => {\n    const query = searchQuery().trim()\n    if (!query) return registrations()\n    return matchSorter(registrations(), query, {\n      keys: [\n        (r) => formatForDisplay(r.hotkey),\n        'hotkey',\n        'options.meta.name',\n        'options.meta.description',\n      ],\n    })\n  })\n\n  const filteredSequenceRegistrations = createMemo(() => {\n    const query = searchQuery().trim()\n    if (!query) return sequenceRegistrations()\n    return matchSorter(sequenceRegistrations(), query, {\n      keys: [\n        (r) => r.sequence.map((s) => formatForDisplay(s)).join(' '),\n        (r) => r.sequence.join(' '),\n        'options.meta.name',\n        'options.meta.description',\n      ],\n    })\n  })\n\n  return (\n    <>\n      <div class={styles().searchContainer}>\n        <input\n          type=\"text\"\n          class={styles().searchInput}\n          placeholder=\"Search hotkeys...\"\n          value={searchQuery()}\n          onInput={(e) => setSearchQuery(e.currentTarget.value)}\n        />\n        <Show when={searchQuery()}>\n          <button\n            class={styles().searchClear}\n            onClick={() => setSearchQuery('')}\n          >\n            &times;\n          </button>\n        </Show>\n      </div>\n\n      <div class={styles().panelHeader}>\n        Hotkeys ({filteredRegistrations().length})\n      </div>\n      <div class={styles().hotkeyList}>\n        <For each={filteredRegistrations()}>\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            const metaName = () => reg.options.meta?.name\n            const rowTooltip = () => buildRowTooltip(reg.options.meta)\n\n            return (\n              <div\n                class={clsx(\n                  styles().hotkeyRow,\n                  props.selectedId() === reg.id && styles().hotkeyRowSelected,\n                  pulsing() && styles().hotkeyRowTriggered,\n                  rowTooltip() && styles().tooltip,\n                )}\n                onClick={() => props.setSelectedId(reg.id)}\n              >\n                <Show when={rowTooltip()}>\n                  <span class={styles().rowTooltipText} data-tooltip>\n                    {rowTooltip()}\n                  </span>\n                </Show>\n                <span class={styles().hotkeyLabel}>\n                  <span class={styles().hotkeyLabelKeys}>\n                    {formatForDisplay(reg.hotkey)}\n                  </span>\n                  <Show when={metaName()}>\n                    <span class={styles().hotkeyLabelName}>{metaName()}</span>\n                  </Show>\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 ({filteredSequenceRegistrations().length})\n      </div>\n      <div class={styles().hotkeyList}>\n        <For each={filteredSequenceRegistrations()}>\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/styles/use-styles.js

@@ -170,6 +170,55 @@ const stylesFactory = (theme) => {
       min-height: 0;
       min-width: 0;
       overflow: hidden;
+    `,
+		searchContainer: css`
+      position: relative;
+      padding: ${size[2]};
+      padding-bottom: 0;
+      flex-shrink: 0;
+    `,
+		searchInput: css`
+      width: 100%;
+      padding: ${size[1.5]} ${size[2]};
+      padding-right: ${size[7]};
+      font-size: ${fontSize.xs};
+      font-family: ${fontFamily.sans};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+      border-radius: ${border.radius.md};
+      outline: none;
+      box-sizing: border-box;
+
+      &::placeholder {
+        color: ${t(colors.gray[500], colors.gray[500])};
+      }
+
+      &:focus {
+        border-color: ${t(colors.blue[500], colors.blue[400])};
+        box-shadow: 0 0 0 1px
+          ${t(colors.blue[500] + alpha[30], colors.blue[400] + alpha[30])};
+      }
+    `,
+		searchClear: css`
+      position: absolute;
+      right: ${size[3]};
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      color: ${t(colors.gray[500], colors.gray[400])};
+      font-size: ${fontSize.md};
+      cursor: pointer;
+      padding: ${size[1]};
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        color: ${t(colors.gray[700], colors.gray[200])};
+      }
     `,
 		panelHeader: css`
       font-size: ${fontSize.md};
@@ -223,13 +272,28 @@ const stylesFactory = (theme) => {
       }
     `,
 		hotkeyLabel: css`
-      font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
       color: ${t(colors.gray[900], colors.gray[100])};
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: ${size[1.5]};
+      min-width: 0;
+    `,
+		hotkeyLabelKeys: css`
+      font-family: ${fontFamily.mono};
+      flex-shrink: 0;
+    `,
+		hotkeyLabelName: css`
+      font-family: ${fontFamily.sans};
+      color: ${t(colors.gray[500], colors.gray[400])};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
     `,
 		sequenceStepMatched: css`
       font-weight: ${font.weight.bold};
@@ -577,6 +641,29 @@ const stylesFactory = (theme) => {
         visibility 0.15s;
       z-index: ${tokens.zIndices.tooltip};
       margin-top: ${size[1]};
+    `,
+		rowTooltipText: css`
+      position: absolute;
+      bottom: 100%;
+      left: ${size[2]};
+      padding: ${size[1]} ${size[1.5]};
+      background: ${t(colors.gray[800], colors.darkGray[500])};
+      color: ${t(colors.white, colors.gray[100])};
+      font-size: ${fontSize["2xs"]};
+      font-family: ${fontFamily.sans};
+      border-radius: ${border.radius.sm};
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      visibility: hidden;
+      transition:
+        opacity 0.15s,
+        visibility 0.15s;
+      z-index: ${tokens.zIndices.tooltip};
+      margin-bottom: ${size[1]};
+      max-width: 300px;
+      overflow: hidden;
+      text-overflow: ellipsis;
     `,
 		triggerCount: css`
       font-family: ${fontFamily.mono};

package/dist/styles/use-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-styles.js","names":[],"sources":["../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '@tanstack/devtools-ui'\nimport { tokens } from './tokens'\n\nconst stylesFactory = (theme: 'light' | 'dark') => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily, size: fontSize } = font\n  const css = goober.css\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  return {\n    /** Full-height flex child so MainPanel gets a bounded height from the portal */\n    shellRoot: css`\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      height: 100%;\n      flex: 1;\n      overflow: hidden;\n    `,\n    /** Overrides devtools-ui MainPanel (overflow-y: auto) so inner columns scroll independently */\n    mainPanelShell: css`\n      display: flex;\n      flex-direction: column;\n      flex: 1 1 0%;\n      min-height: 0;\n      height: auto;\n      overflow: hidden !important;\n    `,\n    mainContainer: css`\n      display: flex;\n      flex-direction: column;\n      flex: 1 1 0%;\n      min-height: 0;\n      overflow: hidden;\n      padding: ${size[2]};\n      padding-top: 0;\n      margin-top: -8px;\n    `,\n    heldKeysBar: css`\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      border-radius: ${border.radius.lg};\n      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      display: flex;\n      align-items: center;\n      gap: ${size[3]};\n      padding: ${size[3]} ${size[3]};\n      flex-shrink: 0;\n      min-height: 72px;\n      margin-bottom: ${size[2]};\n    `,\n    heldKeysBarHeader: css`\n      font-size: ${fontSize.sm};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.gray[600], colors.gray[400])};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      flex-shrink: 0;\n    `,\n    heldKeysBarList: css`\n      display: flex;\n      align-items: center;\n      gap: ${size[1.5]};\n      flex-wrap: wrap;\n      flex: 1;\n      min-width: 0;\n    `,\n    panelsContainer: css`\n      display: flex;\n      flex: 1 1 0%;\n      min-height: 0;\n      overflow: hidden;\n      align-items: stretch;\n    `,\n    dragHandle: css`\n      width: 8px;\n      background: ${t(colors.gray[300], colors.darkGray[600])};\n      cursor: col-resize;\n      position: relative;\n      transition: all 0.2s ease;\n      user-select: none;\n      pointer-events: all;\n      margin: 0 ${size[1]};\n      border-radius: 2px;\n\n      &:hover {\n        background: ${t(colors.blue[600], colors.blue[500])};\n        margin: 0 ${size[1]};\n      }\n\n      &.dragging {\n        background: ${t(colors.blue[700], colors.blue[600])};\n        margin: 0 ${size[1]};\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 2px;\n        height: 20px;\n        background: ${t(colors.gray[400], colors.darkGray[400])};\n        border-radius: 1px;\n        pointer-events: none;\n      }\n\n      &:hover::after,\n      &.dragging::after {\n        background: ${t(colors.blue[500], colors.blue[300])};\n      }\n    `,\n    keyCap: css`\n      display: inline-flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      min-width: 36px;\n      padding: ${size[1]} ${size[2]};\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.sm};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.gray[800], colors.gray[100])};\n      background: ${t(colors.white, colors.darkGray[600])};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[400])};\n      border-bottom-width: 2px;\n      border-radius: ${border.radius.sm};\n      box-shadow: ${tokens.shadow.xs()};\n      text-transform: capitalize;\n      white-space: nowrap;\n      line-height: 1.2;\n    `,\n    keyCapCode: css`\n      font-size: ${fontSize['2xs']};\n      font-weight: ${font.weight.normal};\n      color: ${t(colors.gray[500], colors.gray[400])};\n      text-transform: none;\n      line-height: 1;\n      margin-top: 2px;\n    `,\n    noKeysHeld: css`\n      font-size: ${fontSize.sm};\n      color: ${t(colors.gray[400], colors.gray[600])};\n      font-style: italic;\n      text-align: center;\n      padding: ${size[1]};\n    `,\n    leftPanel: css`\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      border-radius: ${border.radius.lg};\n      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      display: flex;\n      flex-direction: column;\n      flex-shrink: 0;\n      min-height: 0;\n      min-width: 0;\n    `,\n    leftPanelScroll: css`\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n    `,\n    rightPanel: css`\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      border-radius: ${border.radius.lg};\n      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      min-height: 0;\n      min-width: 0;\n      overflow: hidden;\n    `,\n    panelHeader: css`\n      font-size: ${fontSize.md};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.blue[700], colors.blue[400])};\n      padding: ${size[2]};\n      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      flex-shrink: 0;\n    `,\n    hotkeyList: css`\n      padding: ${size[1]};\n    `,\n    hotkeyRow: css`\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: ${size[2]};\n      margin-bottom: ${size[1]};\n      background: ${t(colors.gray[200], colors.darkGray[700])};\n      border-radius: ${border.radius.md};\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border: 1px solid transparent;\n\n      &:hover {\n        background: ${t(colors.gray[300], colors.darkGray[600])};\n        border-color: ${t(colors.gray[400], colors.darkGray[500])};\n      }\n    `,\n    hotkeyRowSelected: css`\n      background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};\n      border-color: ${t(colors.blue[600], colors.blue[500])};\n      box-shadow: 0 0 0 1px\n        ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};\n    `,\n    hotkeyRowTriggered: css`\n      animation: hotkey-pulse 0.6s ease-out;\n\n      @keyframes hotkey-pulse {\n        0% {\n          border-color: ${t(colors.blue[500], colors.blue[400])};\n          box-shadow: 0 0 0 2px\n            ${t(colors.blue[500] + alpha[40], colors.blue[400] + alpha[40])};\n        }\n        100% {\n          border-color: transparent;\n          box-shadow: 0 0 0 0px\n            ${t(colors.blue[500] + '00', colors.blue[400] + '00')};\n        }\n      }\n    `,\n    hotkeyLabel: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `,\n    sequenceStepMatched: css`\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.blue[700], colors.blue[300])};\n    `,\n    hotkeyBadges: css`\n      display: flex;\n      gap: ${size[1]};\n      margin-left: ${size[1]};\n      flex-shrink: 0;\n      overflow: visible;\n    `,\n    badge: css`\n      font-size: ${fontSize['2xs']};\n      padding: ${size[0.5]} ${size[1]};\n      border-radius: ${border.radius.sm};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      white-space: nowrap;\n    `,\n    badgeEnabled: css`\n      color: ${t(colors.green[700], colors.green[400])};\n      background: ${t(colors.green[100], colors.green[900] + alpha[30])};\n    `,\n    badgeDisabled: css`\n      color: ${t(colors.red[700], colors.red[400])};\n      background: ${t(colors.red[100], colors.red[900] + alpha[30])};\n    `,\n    badgeKeydown: css`\n      color: ${t(colors.purple[700], colors.purple[400])};\n      background: ${t(colors.purple[100], colors.purple[900] + alpha[30])};\n    `,\n    badgeKeyup: css`\n      color: ${t(colors.teal[700], colors.teal[400])};\n      background: ${t(colors.teal[100], colors.teal[900] + alpha[30])};\n    `,\n    badgeTarget: css`\n      color: ${t(colors.gray[700], colors.gray[300])};\n      background: ${t(colors.gray[200], colors.darkGray[600])};\n    `,\n    badgeConflict: css`\n      color: ${t(colors.yellow[700], colors.yellow[400])};\n      background: ${t(colors.yellow[100], colors.yellow[900] + alpha[30])};\n    `,\n    badgeError: css`\n      color: ${t(colors.red[700], colors.red[400])};\n      background: ${t(colors.red[100], colors.red[900] + alpha[30])};\n    `,\n    badgeAllow: css`\n      color: ${t(colors.gray[600], colors.gray[400])};\n      background: ${t(colors.gray[200], colors.darkGray[600])};\n    `,\n    badgeInfo: css`\n      color: ${t(colors.blue[700], colors.blue[400])};\n      background: ${t(colors.blue[100], colors.blue[900] + alpha[30])};\n    `,\n    stateDetails: css`\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      padding: ${size[2]};\n    `,\n    stateHeader: css`\n      margin-bottom: ${size[2]};\n      padding-bottom: ${size[2]};\n      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n    `,\n    stateTitle: css`\n      font-size: ${fontSize.md};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.blue[700], colors.blue[400])};\n      margin-bottom: ${size[1]};\n    `,\n    detailsGrid: css`\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: ${size[2]};\n      align-items: start;\n    `,\n    detailSection: css`\n      background: ${t(colors.white, colors.darkGray[700])};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n      border-radius: ${border.radius.md};\n      padding: ${size[2]};\n    `,\n    detailSectionHeader: css`\n      font-size: ${fontSize.sm};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.gray[800], colors.gray[200])};\n      margin-bottom: ${size[1]};\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    `,\n    infoGrid: css`\n      display: grid;\n      grid-template-columns: auto 1fr;\n      gap: ${size[1]};\n      row-gap: ${size[1]};\n      align-items: center;\n    `,\n    infoLabel: css`\n      color: ${t(colors.gray[600], colors.gray[400])};\n      font-size: ${fontSize.xs};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    `,\n    infoValueMono: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      word-break: break-all;\n    `,\n    actionsRow: css`\n      display: flex;\n      flex-wrap: wrap;\n      gap: ${size[2]};\n    `,\n    actionButton: css`\n      display: inline-flex;\n      align-items: center;\n      gap: ${size[1]};\n      padding: ${size[1]} ${size[2]};\n      border-radius: ${border.radius.md};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};\n      background: ${t(colors.gray[200], colors.darkGray[600])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      font-size: ${fontSize.xs};\n      cursor: pointer;\n      user-select: none;\n      transition:\n        background 0.15s,\n        border-color 0.15s;\n      &:hover {\n        background: ${t(colors.gray[300], colors.darkGray[500])};\n        border-color: ${t(colors.gray[400], colors.darkGray[400])};\n      }\n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        &:hover {\n          background: ${t(colors.gray[200], colors.darkGray[600])};\n          border-color: ${t(colors.gray[300], colors.darkGray[500])};\n        }\n      }\n    `,\n    actionDotGreen: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.green[400]};\n    `,\n    noSelection: css`\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ${t(colors.gray[500], colors.gray[500])};\n      font-style: italic;\n      text-align: center;\n      padding: ${size[4]};\n    `,\n    keyBreakdown: css`\n      display: flex;\n      flex-wrap: wrap;\n      gap: ${size[1]};\n      align-items: center;\n    `,\n    keyBreakdownPlus: css`\n      color: ${t(colors.gray[500], colors.gray[400])};\n      font-size: ${fontSize.sm};\n    `,\n    keyBreakdownSubHeader: css`\n      font-size: ${fontSize.xs};\n      font-weight: ${font.weight.semibold};\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin-top: ${size[3]};\n      margin-bottom: ${size[1]};\n    `,\n    keyBreakdownSplitRow: css`\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: ${size[3]};\n    `,\n    keyBreakdownSplitLeft: css`\n      flex: 0 0 auto;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: ${size[1]};\n    `,\n    keyBreakdownSplitArrow: css`\n      flex-shrink: 0;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.mono};\n      user-select: none;\n    `,\n    keyBreakdownSplitRight: css`\n      flex: 1 1 200px;\n      min-width: min(220px, 100%);\n    `,\n    platformBreakdown: css`\n      display: flex;\n      flex-direction: column;\n      gap: ${size[1]};\n    `,\n    platformBreakdownRow: css`\n      display: grid;\n      grid-template-columns: 72px 1fr;\n      gap: ${size[2]};\n      align-items: center;\n      font-size: ${fontSize.xs};\n    `,\n    platformBreakdownLabel: css`\n      color: ${t(colors.gray[500], colors.gray[400])};\n      flex-shrink: 0;\n    `,\n    platformBreakdownPretty: css`\n      color: ${t(colors.gray[900], colors.gray[100])};\n      word-break: break-word;\n      min-width: 0;\n    `,\n    sequenceChordDetail: css`\n      margin-top: ${size[3]};\n      padding-top: ${size[2]};\n      border-top: 1px solid ${t(colors.gray[200], colors.darkGray[600])};\n    `,\n    keyCapLarge: css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 36px;\n      padding: ${size[1]} ${size[2]};\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.sm};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.gray[800], colors.gray[100])};\n      background: ${t(colors.white, colors.darkGray[600])};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[400])};\n      border-bottom-width: 3px;\n      border-radius: ${border.radius.md};\n      box-shadow: ${tokens.shadow.sm()};\n      text-transform: capitalize;\n      white-space: nowrap;\n    `,\n    keyCapLargeInProgress: css`\n      border-color: ${t(colors.blue[500], colors.blue[400])};\n      color: ${t(colors.blue[900], colors.blue[200])};\n      background: ${t(colors.blue[50], colors.darkGray[500])};\n    `,\n    conflictList: css`\n      display: flex;\n      flex-direction: column;\n      gap: ${size[1]};\n    `,\n    conflictItem: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.yellow[700], colors.yellow[400])};\n      padding: ${size[1]} ${size[2]};\n      background: ${t(colors.yellow[50], colors.yellow[900] + alpha[20])};\n      border-radius: ${border.radius.sm};\n      border: 1px solid ${t(colors.yellow[200], colors.yellow[800] + alpha[30])};\n    `,\n    conflictItemAllow: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[600], colors.gray[400])};\n      padding: ${size[1]} ${size[2]};\n      background: ${t(colors.gray[100], colors.darkGray[700])};\n      border-radius: ${border.radius.sm};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n    `,\n    conflictItemError: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.red[700], colors.red[400])};\n      padding: ${size[1]} ${size[2]};\n      background: ${t(colors.red[50], colors.red[900] + alpha[20])};\n      border-radius: ${border.radius.sm};\n      border: 1px solid ${t(colors.red[200], colors.red[900] + alpha[30])};\n    `,\n    conflictItemScope: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.blue[700], colors.blue[400])};\n      padding: ${size[1]} ${size[2]};\n      background: ${t(colors.blue[50], colors.blue[900] + alpha[20])};\n      border-radius: ${border.radius.sm};\n      border: 1px solid ${t(colors.blue[200], colors.blue[800] + alpha[30])};\n    `,\n    optionRow: css`\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: ${size[1]} 0;\n      font-size: ${fontSize.xs};\n      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[600])};\n      &:last-child {\n        border-bottom: none;\n      }\n    `,\n    optionLabel: css`\n      color: ${t(colors.gray[600], colors.gray[400])};\n    `,\n    optionValue: css`\n      font-family: ${fontFamily.mono};\n      color: ${t(colors.gray[900], colors.gray[100])};\n    `,\n    optionValueTrue: css`\n      font-family: ${fontFamily.mono};\n      color: ${t(colors.green[600], colors.green[400])};\n    `,\n    optionValueFalse: css`\n      font-family: ${fontFamily.mono};\n      color: ${t(colors.red[600], colors.red[400])};\n    `,\n    tooltip: css`\n      position: relative;\n      &:hover > [data-tooltip] {\n        opacity: 1;\n        visibility: visible;\n      }\n    `,\n    tooltipText: css`\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      padding: ${size[1]} ${size[1.5]};\n      background: ${t(colors.gray[800], colors.darkGray[500])};\n      color: ${t(colors.white, colors.gray[100])};\n      font-size: ${fontSize['2xs']};\n      border-radius: ${border.radius.sm};\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      visibility: hidden;\n      transition:\n        opacity 0.15s,\n        visibility 0.15s;\n      z-index: ${tokens.zIndices.tooltip};\n      margin-top: ${size[1]};\n    `,\n    triggerCount: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize['2xs']};\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin-left: ${size[1]};\n      flex-shrink: 0;\n    `,\n  }\n}\n\nexport function useStyles() {\n  const { theme } = useTheme()\n  const [styles, setStyles] = createSignal(stylesFactory(theme()))\n  createEffect(() => {\n    setStyles(stylesFactory(theme()))\n  })\n  return styles\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-styles.js","names":[],"sources":["../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '@tanstack/devtools-ui'\nimport { tokens } from './tokens'\n\nconst stylesFactory = (theme: 'light' | 'dark') => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily, size: fontSize } = font\n  const css = goober.css\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  return {\n    /** Full-height flex child so MainPanel gets a bounded height from the portal */\n    shellRoot: css`\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      height: 100%;\n      flex: 1;\n      overflow: hidden;\n    `,\n    /** Overrides devtools-ui MainPanel (overflow-y: auto) so inner columns scroll independently */\n    mainPanelShell: css`\n      display: flex;\n      flex-direction: column;\n      flex: 1 1 0%;\n      min-height: 0;\n      height: auto;\n      overflow: hidden !important;\n    `,\n    mainContainer: css`\n      display: flex;\n      flex-direction: column;\n      flex: 1 1 0%;\n      min-height: 0;\n      overflow: hidden;\n      padding: ${size[2]};\n      padding-top: 0;\n      margin-top: -8px;\n    `,\n    heldKeysBar: css`\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      border-radius: ${border.radius.lg};\n      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      display: flex;\n      align-items: center;\n      gap: ${size[3]};\n      padding: ${size[3]} ${size[3]};\n      flex-shrink: 0;\n      min-height: 72px;\n      margin-bottom: ${size[2]};\n    `,\n    heldKeysBarHeader: css`\n      font-size: ${fontSize.sm};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.gray[600], colors.gray[400])};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      flex-shrink: 0;\n    `,\n    heldKeysBarList: css`\n      display: flex;\n      align-items: center;\n      gap: ${size[1.5]};\n      flex-wrap: wrap;\n      flex: 1;\n      min-width: 0;\n    `,\n    panelsContainer: css`\n      display: flex;\n      flex: 1 1 0%;\n      min-height: 0;\n      overflow: hidden;\n      align-items: stretch;\n    `,\n    dragHandle: css`\n      width: 8px;\n      background: ${t(colors.gray[300], colors.darkGray[600])};\n      cursor: col-resize;\n      position: relative;\n      transition: all 0.2s ease;\n      user-select: none;\n      pointer-events: all;\n      margin: 0 ${size[1]};\n      border-radius: 2px;\n\n      &:hover {\n        background: ${t(colors.blue[600], colors.blue[500])};\n        margin: 0 ${size[1]};\n      }\n\n      &.dragging {\n        background: ${t(colors.blue[700], colors.blue[600])};\n        margin: 0 ${size[1]};\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 2px;\n        height: 20px;\n        background: ${t(colors.gray[400], colors.darkGray[400])};\n        border-radius: 1px;\n        pointer-events: none;\n      }\n\n      &:hover::after,\n      &.dragging::after {\n        background: ${t(colors.blue[500], colors.blue[300])};\n      }\n    `,\n    keyCap: css`\n      display: inline-flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      min-width: 36px;\n      padding: ${size[1]} ${size[2]};\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.sm};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.gray[800], colors.gray[100])};\n      background: ${t(colors.white, colors.darkGray[600])};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[400])};\n      border-bottom-width: 2px;\n      border-radius: ${border.radius.sm};\n      box-shadow: ${tokens.shadow.xs()};\n      text-transform: capitalize;\n      white-space: nowrap;\n      line-height: 1.2;\n    `,\n    keyCapCode: css`\n      font-size: ${fontSize['2xs']};\n      font-weight: ${font.weight.normal};\n      color: ${t(colors.gray[500], colors.gray[400])};\n      text-transform: none;\n      line-height: 1;\n      margin-top: 2px;\n    `,\n    noKeysHeld: css`\n      font-size: ${fontSize.sm};\n      color: ${t(colors.gray[400], colors.gray[600])};\n      font-style: italic;\n      text-align: center;\n      padding: ${size[1]};\n    `,\n    leftPanel: css`\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      border-radius: ${border.radius.lg};\n      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      display: flex;\n      flex-direction: column;\n      flex-shrink: 0;\n      min-height: 0;\n      min-width: 0;\n    `,\n    leftPanelScroll: css`\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n    `,\n    rightPanel: css`\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      border-radius: ${border.radius.lg};\n      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      min-height: 0;\n      min-width: 0;\n      overflow: hidden;\n    `,\n    searchContainer: css`\n      position: relative;\n      padding: ${size[2]};\n      padding-bottom: 0;\n      flex-shrink: 0;\n    `,\n    searchInput: css`\n      width: 100%;\n      padding: ${size[1.5]} ${size[2]};\n      padding-right: ${size[7]};\n      font-size: ${fontSize.xs};\n      font-family: ${fontFamily.sans};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      background: ${t(colors.gray[200], colors.darkGray[700])};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n      border-radius: ${border.radius.md};\n      outline: none;\n      box-sizing: border-box;\n\n      &::placeholder {\n        color: ${t(colors.gray[500], colors.gray[500])};\n      }\n\n      &:focus {\n        border-color: ${t(colors.blue[500], colors.blue[400])};\n        box-shadow: 0 0 0 1px\n          ${t(colors.blue[500] + alpha[30], colors.blue[400] + alpha[30])};\n      }\n    `,\n    searchClear: css`\n      position: absolute;\n      right: ${size[3]};\n      top: 50%;\n      transform: translateY(-50%);\n      background: none;\n      border: none;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      font-size: ${fontSize.md};\n      cursor: pointer;\n      padding: ${size[1]};\n      line-height: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:hover {\n        color: ${t(colors.gray[700], colors.gray[200])};\n      }\n    `,\n    panelHeader: css`\n      font-size: ${fontSize.md};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.blue[700], colors.blue[400])};\n      padding: ${size[2]};\n      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      flex-shrink: 0;\n    `,\n    hotkeyList: css`\n      padding: ${size[1]};\n    `,\n    hotkeyRow: css`\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: ${size[2]};\n      margin-bottom: ${size[1]};\n      background: ${t(colors.gray[200], colors.darkGray[700])};\n      border-radius: ${border.radius.md};\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border: 1px solid transparent;\n\n      &:hover {\n        background: ${t(colors.gray[300], colors.darkGray[600])};\n        border-color: ${t(colors.gray[400], colors.darkGray[500])};\n      }\n    `,\n    hotkeyRowSelected: css`\n      background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};\n      border-color: ${t(colors.blue[600], colors.blue[500])};\n      box-shadow: 0 0 0 1px\n        ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};\n    `,\n    hotkeyRowTriggered: css`\n      animation: hotkey-pulse 0.6s ease-out;\n\n      @keyframes hotkey-pulse {\n        0% {\n          border-color: ${t(colors.blue[500], colors.blue[400])};\n          box-shadow: 0 0 0 2px\n            ${t(colors.blue[500] + alpha[40], colors.blue[400] + alpha[40])};\n        }\n        100% {\n          border-color: transparent;\n          box-shadow: 0 0 0 0px\n            ${t(colors.blue[500] + '00', colors.blue[400] + '00')};\n        }\n      }\n    `,\n    hotkeyLabel: css`\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      display: flex;\n      align-items: center;\n      gap: ${size[1.5]};\n      min-width: 0;\n    `,\n    hotkeyLabelKeys: css`\n      font-family: ${fontFamily.mono};\n      flex-shrink: 0;\n    `,\n    hotkeyLabelName: css`\n      font-family: ${fontFamily.sans};\n      color: ${t(colors.gray[500], colors.gray[400])};\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      min-width: 0;\n    `,\n    sequenceStepMatched: css`\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.blue[700], colors.blue[300])};\n    `,\n    hotkeyBadges: css`\n      display: flex;\n      gap: ${size[1]};\n      margin-left: ${size[1]};\n      flex-shrink: 0;\n      overflow: visible;\n    `,\n    badge: css`\n      font-size: ${fontSize['2xs']};\n      padding: ${size[0.5]} ${size[1]};\n      border-radius: ${border.radius.sm};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      white-space: nowrap;\n    `,\n    badgeEnabled: css`\n      color: ${t(colors.green[700], colors.green[400])};\n      background: ${t(colors.green[100], colors.green[900] + alpha[30])};\n    `,\n    badgeDisabled: css`\n      color: ${t(colors.red[700], colors.red[400])};\n      background: ${t(colors.red[100], colors.red[900] + alpha[30])};\n    `,\n    badgeKeydown: css`\n      color: ${t(colors.purple[700], colors.purple[400])};\n      background: ${t(colors.purple[100], colors.purple[900] + alpha[30])};\n    `,\n    badgeKeyup: css`\n      color: ${t(colors.teal[700], colors.teal[400])};\n      background: ${t(colors.teal[100], colors.teal[900] + alpha[30])};\n    `,\n    badgeTarget: css`\n      color: ${t(colors.gray[700], colors.gray[300])};\n      background: ${t(colors.gray[200], colors.darkGray[600])};\n    `,\n    badgeConflict: css`\n      color: ${t(colors.yellow[700], colors.yellow[400])};\n      background: ${t(colors.yellow[100], colors.yellow[900] + alpha[30])};\n    `,\n    badgeError: css`\n      color: ${t(colors.red[700], colors.red[400])};\n      background: ${t(colors.red[100], colors.red[900] + alpha[30])};\n    `,\n    badgeAllow: css`\n      color: ${t(colors.gray[600], colors.gray[400])};\n      background: ${t(colors.gray[200], colors.darkGray[600])};\n    `,\n    badgeInfo: css`\n      color: ${t(colors.blue[700], colors.blue[400])};\n      background: ${t(colors.blue[100], colors.blue[900] + alpha[30])};\n    `,\n    stateDetails: css`\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      padding: ${size[2]};\n    `,\n    stateHeader: css`\n      margin-bottom: ${size[2]};\n      padding-bottom: ${size[2]};\n      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n    `,\n    stateTitle: css`\n      font-size: ${fontSize.md};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.blue[700], colors.blue[400])};\n      margin-bottom: ${size[1]};\n    `,\n    detailsGrid: css`\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: ${size[2]};\n      align-items: start;\n    `,\n    detailSection: css`\n      background: ${t(colors.white, colors.darkGray[700])};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n      border-radius: ${border.radius.md};\n      padding: ${size[2]};\n    `,\n    detailSectionHeader: css`\n      font-size: ${fontSize.sm};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.gray[800], colors.gray[200])};\n      margin-bottom: ${size[1]};\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    `,\n    infoGrid: css`\n      display: grid;\n      grid-template-columns: auto 1fr;\n      gap: ${size[1]};\n      row-gap: ${size[1]};\n      align-items: center;\n    `,\n    infoLabel: css`\n      color: ${t(colors.gray[600], colors.gray[400])};\n      font-size: ${fontSize.xs};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    `,\n    infoValueMono: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      word-break: break-all;\n    `,\n    actionsRow: css`\n      display: flex;\n      flex-wrap: wrap;\n      gap: ${size[2]};\n    `,\n    actionButton: css`\n      display: inline-flex;\n      align-items: center;\n      gap: ${size[1]};\n      padding: ${size[1]} ${size[2]};\n      border-radius: ${border.radius.md};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};\n      background: ${t(colors.gray[200], colors.darkGray[600])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      font-size: ${fontSize.xs};\n      cursor: pointer;\n      user-select: none;\n      transition:\n        background 0.15s,\n        border-color 0.15s;\n      &:hover {\n        background: ${t(colors.gray[300], colors.darkGray[500])};\n        border-color: ${t(colors.gray[400], colors.darkGray[400])};\n      }\n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        &:hover {\n          background: ${t(colors.gray[200], colors.darkGray[600])};\n          border-color: ${t(colors.gray[300], colors.darkGray[500])};\n        }\n      }\n    `,\n    actionDotGreen: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.green[400]};\n    `,\n    noSelection: css`\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ${t(colors.gray[500], colors.gray[500])};\n      font-style: italic;\n      text-align: center;\n      padding: ${size[4]};\n    `,\n    keyBreakdown: css`\n      display: flex;\n      flex-wrap: wrap;\n      gap: ${size[1]};\n      align-items: center;\n    `,\n    keyBreakdownPlus: css`\n      color: ${t(colors.gray[500], colors.gray[400])};\n      font-size: ${fontSize.sm};\n    `,\n    keyBreakdownSubHeader: css`\n      font-size: ${fontSize.xs};\n      font-weight: ${font.weight.semibold};\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin-top: ${size[3]};\n      margin-bottom: ${size[1]};\n    `,\n    keyBreakdownSplitRow: css`\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: ${size[3]};\n    `,\n    keyBreakdownSplitLeft: css`\n      flex: 0 0 auto;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: ${size[1]};\n    `,\n    keyBreakdownSplitArrow: css`\n      flex-shrink: 0;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.mono};\n      user-select: none;\n    `,\n    keyBreakdownSplitRight: css`\n      flex: 1 1 200px;\n      min-width: min(220px, 100%);\n    `,\n    platformBreakdown: css`\n      display: flex;\n      flex-direction: column;\n      gap: ${size[1]};\n    `,\n    platformBreakdownRow: css`\n      display: grid;\n      grid-template-columns: 72px 1fr;\n      gap: ${size[2]};\n      align-items: center;\n      font-size: ${fontSize.xs};\n    `,\n    platformBreakdownLabel: css`\n      color: ${t(colors.gray[500], colors.gray[400])};\n      flex-shrink: 0;\n    `,\n    platformBreakdownPretty: css`\n      color: ${t(colors.gray[900], colors.gray[100])};\n      word-break: break-word;\n      min-width: 0;\n    `,\n    sequenceChordDetail: css`\n      margin-top: ${size[3]};\n      padding-top: ${size[2]};\n      border-top: 1px solid ${t(colors.gray[200], colors.darkGray[600])};\n    `,\n    keyCapLarge: css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 36px;\n      padding: ${size[1]} ${size[2]};\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.sm};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.gray[800], colors.gray[100])};\n      background: ${t(colors.white, colors.darkGray[600])};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[400])};\n      border-bottom-width: 3px;\n      border-radius: ${border.radius.md};\n      box-shadow: ${tokens.shadow.sm()};\n      text-transform: capitalize;\n      white-space: nowrap;\n    `,\n    keyCapLargeInProgress: css`\n      border-color: ${t(colors.blue[500], colors.blue[400])};\n      color: ${t(colors.blue[900], colors.blue[200])};\n      background: ${t(colors.blue[50], colors.darkGray[500])};\n    `,\n    conflictList: css`\n      display: flex;\n      flex-direction: column;\n      gap: ${size[1]};\n    `,\n    conflictItem: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.yellow[700], colors.yellow[400])};\n      padding: ${size[1]} ${size[2]};\n      background: ${t(colors.yellow[50], colors.yellow[900] + alpha[20])};\n      border-radius: ${border.radius.sm};\n      border: 1px solid ${t(colors.yellow[200], colors.yellow[800] + alpha[30])};\n    `,\n    conflictItemAllow: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[600], colors.gray[400])};\n      padding: ${size[1]} ${size[2]};\n      background: ${t(colors.gray[100], colors.darkGray[700])};\n      border-radius: ${border.radius.sm};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n    `,\n    conflictItemError: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.red[700], colors.red[400])};\n      padding: ${size[1]} ${size[2]};\n      background: ${t(colors.red[50], colors.red[900] + alpha[20])};\n      border-radius: ${border.radius.sm};\n      border: 1px solid ${t(colors.red[200], colors.red[900] + alpha[30])};\n    `,\n    conflictItemScope: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.blue[700], colors.blue[400])};\n      padding: ${size[1]} ${size[2]};\n      background: ${t(colors.blue[50], colors.blue[900] + alpha[20])};\n      border-radius: ${border.radius.sm};\n      border: 1px solid ${t(colors.blue[200], colors.blue[800] + alpha[30])};\n    `,\n    optionRow: css`\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: ${size[1]} 0;\n      font-size: ${fontSize.xs};\n      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[600])};\n      &:last-child {\n        border-bottom: none;\n      }\n    `,\n    optionLabel: css`\n      color: ${t(colors.gray[600], colors.gray[400])};\n    `,\n    optionValue: css`\n      font-family: ${fontFamily.mono};\n      color: ${t(colors.gray[900], colors.gray[100])};\n    `,\n    optionValueTrue: css`\n      font-family: ${fontFamily.mono};\n      color: ${t(colors.green[600], colors.green[400])};\n    `,\n    optionValueFalse: css`\n      font-family: ${fontFamily.mono};\n      color: ${t(colors.red[600], colors.red[400])};\n    `,\n    tooltip: css`\n      position: relative;\n      &:hover > [data-tooltip] {\n        opacity: 1;\n        visibility: visible;\n      }\n    `,\n    tooltipText: css`\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      padding: ${size[1]} ${size[1.5]};\n      background: ${t(colors.gray[800], colors.darkGray[500])};\n      color: ${t(colors.white, colors.gray[100])};\n      font-size: ${fontSize['2xs']};\n      border-radius: ${border.radius.sm};\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      visibility: hidden;\n      transition:\n        opacity 0.15s,\n        visibility 0.15s;\n      z-index: ${tokens.zIndices.tooltip};\n      margin-top: ${size[1]};\n    `,\n    rowTooltipText: css`\n      position: absolute;\n      bottom: 100%;\n      left: ${size[2]};\n      padding: ${size[1]} ${size[1.5]};\n      background: ${t(colors.gray[800], colors.darkGray[500])};\n      color: ${t(colors.white, colors.gray[100])};\n      font-size: ${fontSize['2xs']};\n      font-family: ${fontFamily.sans};\n      border-radius: ${border.radius.sm};\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      visibility: hidden;\n      transition:\n        opacity 0.15s,\n        visibility 0.15s;\n      z-index: ${tokens.zIndices.tooltip};\n      margin-bottom: ${size[1]};\n      max-width: 300px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `,\n    triggerCount: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize['2xs']};\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin-left: ${size[1]};\n      flex-shrink: 0;\n    `,\n  }\n}\n\nexport function useStyles() {\n  const { theme } = useTheme()\n  const [styles, setStyles] = createSignal(stylesFactory(theme()))\n  createEffect(() => {\n    setStyles(stylesFactory(theme()))\n  })\n  return styles\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/hotkeys-devtools",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Devtools for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -37,13 +37,14 @@
     "src"
   ],
   "peerDependencies": {
-    "@tanstack/hotkeys": "0.6.4"
+    "@tanstack/hotkeys": "0.7.0"
   },
   "dependencies": {
     "@tanstack/devtools-ui": "^0.5.1",
     "@tanstack/devtools-utils": "^0.4.0",
     "clsx": "^2.1.1",
     "goober": "^2.1.18",
+    "match-sorter": "^8.2.0",
     "solid-js": "^1.9.12"
   },
   "devDependencies": {

package/src/components/DetailsPanel.tsx

@@ -275,6 +275,45 @@ function HotkeyDetails(props: {
           <ActionButtons registration={reg()} />
         </div>
 
+        <div class={styles().detailSection}>
+          <div class={styles().detailSectionHeader}>Meta</div>
+          <div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>name</span>
+              <span class={styles().optionValue}>
+                {reg().options.meta?.name ?? '—'}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>description</span>
+              <span class={styles().optionValue}>
+                {reg().options.meta?.description ?? '—'}
+              </span>
+            </div>
+            <Show
+              when={
+                reg().options.meta &&
+                Object.keys(reg().options.meta!).filter(
+                  (k) => k !== 'name' && k !== 'description',
+                ).length > 0
+              }
+            >
+              <For
+                each={Object.entries(reg().options.meta ?? {}).filter(
+                  ([k]) => k !== 'name' && k !== 'description',
+                )}
+              >
+                {([key, value]) => (
+                  <div class={styles().optionRow}>
+                    <span class={styles().optionLabel}>{key}</span>
+                    <span class={styles().optionValue}>{String(value)}</span>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </div>
+        </div>
+
         <div class={styles().detailSection}>
           <div class={styles().detailSectionHeader}>Options</div>
           <div>
@@ -590,6 +629,45 @@ function SequenceDetails(props: {
           <ActionButtons registration={liveReg()} />
         </div>
 
+        <div class={styles().detailSection}>
+          <div class={styles().detailSectionHeader}>Meta</div>
+          <div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>name</span>
+              <span class={styles().optionValue}>
+                {liveReg().options.meta?.name ?? '—'}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>description</span>
+              <span class={styles().optionValue}>
+                {liveReg().options.meta?.description ?? '—'}
+              </span>
+            </div>
+            <Show
+              when={
+                liveReg().options.meta &&
+                Object.keys(liveReg().options.meta!).filter(
+                  (k) => k !== 'name' && k !== 'description',
+                ).length > 0
+              }
+            >
+              <For
+                each={Object.entries(liveReg().options.meta ?? {}).filter(
+                  ([k]) => k !== 'name' && k !== 'description',
+                )}
+              >
+                {([key, value]) => (
+                  <div class={styles().optionRow}>
+                    <span class={styles().optionLabel}>{key}</span>
+                    <span class={styles().optionValue}>{String(value)}</span>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </div>
+        </div>
+
         <div class={styles().detailSection}>
           <div class={styles().detailSectionHeader}>Options</div>
           <div>