@tanstack/hotkeys-devtools 0.4.4 → 0.5.0

package/src/components/Shell.tsx

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

package/src/sequence-progress.ts

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

package/src/styles/use-styles.ts

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