@tanstack/hotkeys-devtools 1.0.0 → 1.1.1

package/dist/components/Shell.js.map

@@ -1 +0,0 @@
-{"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/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["ThemeContextProvider","HotkeysContextProvider","Shell","TanStackDevtoolsTheme","DevtoolsProps","theme","HotkeysDevtools","props","_$createComponent","children"],"sources":["../../src/components/index.tsx"],"sourcesContent":["import { ThemeContextProvider } from '@tanstack/devtools-ui'\nimport { HotkeysContextProvider } from '../HotkeysContextProvider'\nimport { Shell } from './Shell'\n\nimport type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'\n\ninterface DevtoolsProps {\n  theme: TanStackDevtoolsTheme\n}\n\nexport default function HotkeysDevtools(props: DevtoolsProps) {\n  return (\n    <ThemeContextProvider theme={props.theme}>\n      <HotkeysContextProvider>\n        <Shell />\n      </HotkeysContextProvider>\n    </ThemeContextProvider>\n  )\n}\n"],"mappings":";;;;;;AAUA,SAAwBM,gBAAgBC,OAAsB;AAC5D,QAAAC,gBACGR,sBAAoB;EAAA,IAACK,QAAK;AAAA,UAAEE,MAAMF;;EAAK,IAAAI,WAAA;AAAA,UAAAD,gBACrCP,wBAAsB,EAAA,IAAAQ,WAAA;AAAA,WAAAD,gBACpBN,OAAK,EAAA,CAAA;MAAA,CAAA;;EAAA,CAAA"}

package/dist/core.js.map

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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/tokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens.js","names":[],"sources":["../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"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/src/HotkeysContextProvider.tsx

@@ -1,130 +0,0 @@
-import {
-  createContext,
-  createEffect,
-  createSignal,
-  onCleanup,
-  useContext,
-} from 'solid-js'
-import {
-  HotkeyManager,
-  KeyStateTracker,
-  SequenceManager,
-} from '@tanstack/hotkeys'
-import { needsSequenceProgressClock } from './sequence-progress'
-import type { Accessor } from 'solid-js'
-import type {
-  HotkeyRegistration,
-  SequenceRegistrationView,
-} from '@tanstack/hotkeys'
-
-interface HotkeysDevtoolsContextType {
-  registrations: Accessor<Array<HotkeyRegistration>>
-  sequenceRegistrations: Accessor<Array<SequenceRegistrationView>>
-  heldKeys: Accessor<Array<string>>
-  heldCodes: Accessor<Record<string, string>>
-  /** Monotonic clock for sequence in-progress UI (updates while a sequence match is active). */
-  sequenceProgressNow: Accessor<number>
-}
-
-const HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({
-  registrations: () => [],
-  sequenceRegistrations: () => [],
-  heldKeys: () => [],
-  heldCodes: () => ({}),
-  sequenceProgressNow: () => Date.now(),
-})
-
-export function HotkeysContextProvider(props: { children: any }) {
-  const manager = HotkeyManager.getInstance()
-  const sequenceManager = SequenceManager.getInstance()
-  const tracker = KeyStateTracker.getInstance()
-
-  // Create local signals that will be updated by subscriptions
-  const [registrations, setRegistrations] = createSignal<
-    Array<HotkeyRegistration>
-  >(Array.from(manager.registrations.state.values()))
-  const [sequenceRegistrations, setSequenceRegistrations] = createSignal<
-    Array<SequenceRegistrationView>
-  >(Array.from(sequenceManager.registrations.state.values()))
-  const [heldKeys, setHeldKeys] = createSignal<Array<string>>(
-    tracker.store.state.heldKeys,
-  )
-  const [heldCodes, setHeldCodes] = createSignal<Record<string, string>>(
-    tracker.store.state.heldCodes,
-  )
-
-  // Subscribe to HotkeyManager registrations store
-  createEffect(() => {
-    const unsubscribe = manager.registrations.subscribe(() => {
-      setRegistrations(Array.from(manager.registrations.state.values()))
-    }).unsubscribe
-    onCleanup(() => unsubscribe())
-  })
-
-  // Subscribe to SequenceManager registrations store
-  createEffect(() => {
-    const unsubscribe = sequenceManager.registrations.subscribe(() => {
-      setSequenceRegistrations(
-        Array.from(sequenceManager.registrations.state.values()),
-      )
-    }).unsubscribe
-    onCleanup(() => unsubscribe())
-  })
-
-  // Subscribe to KeyStateTracker store
-  createEffect(() => {
-    const unsubscribe = tracker.store.subscribe(() => {
-      setHeldKeys(tracker.store.state.heldKeys)
-      setHeldCodes(tracker.store.state.heldCodes)
-    }).unsubscribe
-    onCleanup(() => unsubscribe())
-  })
-
-  const [sequenceProgressNow, setSequenceProgressNow] = createSignal(Date.now())
-
-  createEffect(() => {
-    const regs = sequenceRegistrations()
-    let id: ReturnType<typeof setInterval> | undefined
-
-    const tick = () => {
-      const t = Date.now()
-      setSequenceProgressNow(t)
-      if (!needsSequenceProgressClock(sequenceRegistrations(), t)) {
-        if (id !== undefined) {
-          clearInterval(id)
-          id = undefined
-        }
-      }
-    }
-
-    if (needsSequenceProgressClock(regs, Date.now())) {
-      id = setInterval(tick, 50)
-    } else {
-      setSequenceProgressNow(Date.now())
-    }
-
-    onCleanup(() => {
-      if (id !== undefined) {
-        clearInterval(id)
-      }
-    })
-  })
-
-  return (
-    <HotkeysDevtoolsContext.Provider
-      value={{
-        registrations,
-        sequenceRegistrations,
-        heldKeys,
-        heldCodes,
-        sequenceProgressNow,
-      }}
-    >
-      {props.children}
-    </HotkeysDevtoolsContext.Provider>
-  )
-}
-
-export function useHotkeysDevtoolsState() {
-  return useContext(HotkeysDevtoolsContext)
-}

package/src/_registrations.ts

@@ -1,59 +0,0 @@
-import { createMemo } from 'solid-js'
-import {
-  findHotkeyConflicts,
-  formatForDisplay,
-  parseHotkey,
-} from '@tanstack/hotkeys'
-import { useHotkeysDevtoolsState } from './HotkeysContextProvider'
-import type { HotkeyConflict } from '@tanstack/hotkeys'
-
-/** Refresh shared conflict reporting when either registry changes. */
-export function useRegistrationConflicts(
-  registration: () => HotkeyConflict['registration'],
-) {
-  const state = useHotkeysDevtoolsState()
-  return createMemo(() => {
-    state.registrations()
-    state.sequenceRegistrations()
-    const reg = registration()
-    if (reg.options.enabled === false) return { overlapping: [], separate: [] }
-    const binding = 'sequence' in reg ? reg.sequence : reg.hotkey
-    const options = {
-      target: reg.target,
-      platform: reg.options.platform,
-      eventType: reg.options.eventType,
-      excludeIds: [reg.id],
-    }
-    const overlapping = findHotkeyConflicts(binding, options).map(
-      (c) => c.registration,
-    )
-    const ids = new Set(overlapping.map((r) => r.id))
-    const separate = findHotkeyConflicts(binding, { ...options, scope: 'all' })
-      .map((c) => c.registration)
-      .filter((r) => !ids.has(r.id))
-    // Without source events, key/code overlap depends on the layout and cannot be inferred.
-    return { overlapping, separate }
-  })
-}
-
-/** Format either kind of registration, respecting its platform and physical labels. */
-export function formatRegistration(
-  reg: HotkeyConflict['registration'],
-): string {
-  const steps = 'sequence' in reg ? reg.sequence : [reg.hotkey]
-  return steps
-    .map((step) => formatForDisplay(step, { platform: reg.options.platform }))
-    .join(' → ')
-}
-
-/** Sequences may mix logical keys and physical codes, so report both when needed. */
-export function getBindingKind(
-  reg: HotkeyConflict['registration'],
-): 'Key' | 'Code' | 'Mixed' {
-  const parsed =
-    'sequence' in reg
-      ? reg.sequence.map((step) => parseHotkey(step, reg.options.platform))
-      : [reg.parsedHotkey]
-  const codes = parsed.filter((step) => step.code !== undefined).length
-  return codes === 0 ? 'Key' : codes === parsed.length ? 'Code' : 'Mixed'
-}

package/src/components/ActionButtons.tsx

@@ -1,38 +0,0 @@
-import { HotkeyManager, SequenceManager } from '@tanstack/hotkeys'
-import { useStyles } from '../styles/use-styles'
-import type {
-  HotkeyRegistration,
-  SequenceRegistrationView,
-} from '@tanstack/hotkeys'
-
-type ActionButtonsProps = {
-  registration: HotkeyRegistration | SequenceRegistrationView
-}
-
-function isSequenceRegistration(
-  reg: HotkeyRegistration | SequenceRegistrationView,
-): reg is SequenceRegistrationView {
-  return 'sequence' in reg && Array.isArray(reg.sequence)
-}
-
-export function ActionButtons(props: ActionButtonsProps) {
-  const styles = useStyles()
-
-  const handleTrigger = () => {
-    const reg = props.registration
-    if (isSequenceRegistration(reg)) {
-      SequenceManager.getInstance().triggerSequence(reg.id)
-    } else {
-      HotkeyManager.getInstance().triggerRegistration(reg.id)
-    }
-  }
-
-  return (
-    <div class={styles().actionsRow}>
-      <button class={styles().actionButton} onMouseDown={handleTrigger}>
-        <span class={styles().actionDotGreen} />
-        Trigger
-      </button>
-    </div>
-  )
-}