@tanstack/hotkeys-devtools 0.5.0 → 0.7.0

package/src/components/DetailsPanel.tsx

@@ -1,17 +1,64 @@
 import { For, Show, createMemo } from 'solid-js'
 import clsx from 'clsx'
-import { formatForDisplay, formatHotkeySequence } from '@tanstack/hotkeys'
+import {
+  detectPlatform,
+  formatForDisplay,
+  formatHotkeySequence,
+  normalizeHotkey,
+  normalizeHotkeyFromParsed,
+  parseHotkey,
+} from '@tanstack/hotkeys'
 import { useStyles } from '../styles/use-styles'
 import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
 import { effectiveSequenceMatchedSteps } from '../sequence-progress'
 import { ActionButtons } from './ActionButtons'
 import type {
   ConflictBehavior,
+  FormatDisplayOptions,
   HotkeyRegistration,
   HotkeySequence,
+  ParsedHotkey,
+  RegisterableHotkey,
   SequenceRegistrationView,
 } from '@tanstack/hotkeys'
 
+const PLATFORM_ROWS = [
+  { id: 'mac' as const, label: 'macOS' },
+  { id: 'windows' as const, label: 'Windows' },
+  { id: 'linux' as const, label: 'Linux' },
+]
+
+function KeyBreakdownPlatformTable(props: {
+  getParsed: () => ParsedHotkey
+  /** Platform used when the parsed hotkey was produced (registration `options.platform`). */
+  getCanonicalPlatform: () => 'mac' | 'windows' | 'linux'
+  styles: ReturnType<typeof useStyles>
+}) {
+  const st = () => props.styles()
+  return (
+    <div class={st().platformBreakdown}>
+      <For each={PLATFORM_ROWS}>
+        {(row) => (
+          <div class={st().platformBreakdownRow}>
+            <span class={st().platformBreakdownLabel}>{row.label}</span>
+            <span class={st().platformBreakdownPretty}>
+              {formatForDisplay(
+                normalizeHotkeyFromParsed(
+                  props.getParsed(),
+                  props.getCanonicalPlatform(),
+                ),
+                {
+                  platform: row.id,
+                },
+              )}
+            </span>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+
 function sequenceKey(sequence: Array<string>): string {
   return sequence.join('|')
 }
@@ -145,7 +192,10 @@ function HotkeyDetails(props: {
     | 'conflictItemError'
     | 'conflictItemScope'
   getConflictLabel: (b: ConflictBehavior, same: boolean) => string
-  formatForDisplay: (hotkey: string) => string
+  formatForDisplay: (
+    hotkey: RegisterableHotkey,
+    options?: FormatDisplayOptions,
+  ) => string
   styles: ReturnType<typeof useStyles>
 }) {
   const reg = () => props.registration
@@ -163,16 +213,11 @@ function HotkeyDetails(props: {
   const conflictBehavior = (): ConflictBehavior =>
     reg().options.conflictBehavior ?? 'warn'
 
-  const keyParts = createMemo(() => {
-    const parts: Array<string> = []
-    const p = parsed()
-    if (p.ctrl) parts.push('Ctrl')
-    if (p.shift) parts.push('Shift')
-    if (p.alt) parts.push('Alt')
-    if (p.meta) parts.push('Meta')
-    parts.push(p.key)
-    return parts
-  })
+  const registrationPlatform = () => reg().options.platform ?? detectPlatform()
+
+  const rawModParts = createMemo(() =>
+    normalizeHotkeyFromParsed(parsed(), registrationPlatform()).split('+'),
+  )
 
   const styles = props.styles
 
@@ -197,17 +242,31 @@ function HotkeyDetails(props: {
       <div class={styles().detailsGrid}>
         <div class={styles().detailSection}>
           <div class={styles().detailSectionHeader}>Key Breakdown</div>
-          <div class={styles().keyBreakdown}>
-            <For each={keyParts()}>
-              {(part, i) => (
-                <>
-                  <Show when={i() > 0}>
-                    <span class={styles().keyBreakdownPlus}>+</span>
-                  </Show>
-                  <span class={styles().keyCapLarge}>{part}</span>
-                </>
-              )}
-            </For>
+          <div class={styles().keyBreakdownSplitRow}>
+            <div class={styles().keyBreakdownSplitLeft}>
+              <div class={styles().keyBreakdown}>
+                <For each={rawModParts()}>
+                  {(part, i) => (
+                    <>
+                      <Show when={i() > 0}>
+                        <span class={styles().keyBreakdownPlus}>+</span>
+                      </Show>
+                      <span class={styles().keyCapLarge}>{part}</span>
+                    </>
+                  )}
+                </For>
+              </div>
+            </div>
+            <span class={styles().keyBreakdownSplitArrow} aria-hidden="true">
+              {'->'}
+            </span>
+            <div class={styles().keyBreakdownSplitRight}>
+              <KeyBreakdownPlatformTable
+                getParsed={() => parsed()}
+                getCanonicalPlatform={registrationPlatform}
+                styles={props.styles}
+              />
+            </div>
           </div>
         </div>
 
@@ -366,7 +425,10 @@ function SequenceDetails(props: {
     | 'conflictItemScope'
   getConflictLabel: (b: ConflictBehavior, same: boolean) => string
   formatHotkeySequence: (seq: HotkeySequence) => string
-  formatForDisplay: (hotkey: string) => string
+  formatForDisplay: (
+    hotkey: RegisterableHotkey,
+    options?: FormatDisplayOptions,
+  ) => string
   styles: ReturnType<typeof useStyles>
 }) {
   const reg = () => props.registration
@@ -397,6 +459,10 @@ function SequenceDetails(props: {
   const conflictBehavior = (): ConflictBehavior =>
     liveReg().options.conflictBehavior ?? 'warn'
 
+  const sequenceCanonicalPlatform = createMemo(
+    () => liveReg().options.platform ?? detectPlatform(),
+  )
+
   const styles = props.styles
 
   return (
@@ -471,6 +537,52 @@ function SequenceDetails(props: {
               )}
             </For>
           </div>
+
+          <div class={styles().keyBreakdownSubHeader}>Each chord</div>
+          <For each={liveReg().sequence}>
+            {(step, stepIdx) => {
+              const stepParsed = () =>
+                parseHotkey(step, sequenceCanonicalPlatform())
+              const stepRawParts = () =>
+                normalizeHotkey(step, sequenceCanonicalPlatform()).split('+')
+              return (
+                <div class={styles().sequenceChordDetail}>
+                  <div class={styles().keyBreakdownSubHeader}>
+                    Step {stepIdx() + 1}
+                  </div>
+                  <div class={styles().keyBreakdownSplitRow}>
+                    <div class={styles().keyBreakdownSplitLeft}>
+                      <div class={styles().keyBreakdown}>
+                        <For each={stepRawParts()}>
+                          {(part, i) => (
+                            <>
+                              <Show when={i() > 0}>
+                                <span class={styles().keyBreakdownPlus}>+</span>
+                              </Show>
+                              <span class={styles().keyCapLarge}>{part}</span>
+                            </>
+                          )}
+                        </For>
+                      </div>
+                    </div>
+                    <span
+                      class={styles().keyBreakdownSplitArrow}
+                      aria-hidden="true"
+                    >
+                      {'->'}
+                    </span>
+                    <div class={styles().keyBreakdownSplitRight}>
+                      <KeyBreakdownPlatformTable
+                        getParsed={stepParsed}
+                        getCanonicalPlatform={() => sequenceCanonicalPlatform()}
+                        styles={props.styles}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )
+            }}
+          </For>
         </div>
 
         <div class={styles().detailSection}>

package/src/components/HeldKeysTopbar.tsx

@@ -1,11 +1,13 @@
 import { For, Show } from 'solid-js'
-import { formatKeyForDebuggingDisplay } from '@tanstack/hotkeys'
+import { detectPlatform, formatForDisplay } from '@tanstack/hotkeys'
 import { useStyles } from '../styles/use-styles'
 import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
+import type { RegisterableHotkey } from '@tanstack/hotkeys'
 
 export function HeldKeysBar() {
   const styles = useStyles()
   const state = useHotkeysDevtoolsState()
+  const platform = detectPlatform()
 
   return (
     <div class={styles().heldKeysBar}>
@@ -18,12 +20,14 @@ export function HeldKeysBar() {
           <For each={state.heldKeys()}>
             {(key) => {
               const code = () => state.heldCodes()[key]
-              const label = () => formatKeyForDebuggingDisplay(key)
+              const label = () =>
+                formatForDisplay(key as RegisterableHotkey, {
+                  platform,
+                  useSymbols: true,
+                })
               const codeLabel = () => {
                 const c = code()
-                return c
-                  ? formatKeyForDebuggingDisplay(c, { source: 'code' })
-                  : undefined
+                return c || undefined
               }
               return (
                 <span class={styles().keyCap}>

package/src/styles/use-styles.ts

@@ -36,7 +36,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       overflow: hidden;
       padding: ${size[2]};
       padding-top: 0;
-      margin-top: ${size[2]};
+      margin-top: -8px;
     `,
     heldKeysBar: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
@@ -47,7 +47,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       gap: ${size[3]};
       padding: ${size[3]} ${size[3]};
       flex-shrink: 0;
-      min-height: 64px;
+      min-height: 72px;
       margin-bottom: ${size[2]};
     `,
     heldKeysBarHeader: css`
@@ -405,6 +405,64 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       color: ${t(colors.gray[500], colors.gray[400])};
       font-size: ${fontSize.sm};
     `,
+    keyBreakdownSubHeader: css`
+      font-size: ${fontSize.xs};
+      font-weight: ${font.weight.semibold};
+      color: ${t(colors.gray[500], colors.gray[400])};
+      margin-top: ${size[3]};
+      margin-bottom: ${size[1]};
+    `,
+    keyBreakdownSplitRow: css`
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: ${size[3]};
+    `,
+    keyBreakdownSplitLeft: css`
+      flex: 0 0 auto;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: ${size[1]};
+    `,
+    keyBreakdownSplitArrow: css`
+      flex-shrink: 0;
+      color: ${t(colors.gray[500], colors.gray[400])};
+      font-size: ${fontSize.sm};
+      font-family: ${fontFamily.mono};
+      user-select: none;
+    `,
+    keyBreakdownSplitRight: css`
+      flex: 1 1 200px;
+      min-width: min(220px, 100%);
+    `,
+    platformBreakdown: css`
+      display: flex;
+      flex-direction: column;
+      gap: ${size[1]};
+    `,
+    platformBreakdownRow: css`
+      display: grid;
+      grid-template-columns: 72px 1fr;
+      gap: ${size[2]};
+      align-items: center;
+      font-size: ${fontSize.xs};
+    `,
+    platformBreakdownLabel: css`
+      color: ${t(colors.gray[500], colors.gray[400])};
+      flex-shrink: 0;
+    `,
+    platformBreakdownPretty: css`
+      color: ${t(colors.gray[900], colors.gray[100])};
+      word-break: break-word;
+      min-width: 0;
+    `,
+    sequenceChordDetail: css`
+      margin-top: ${size[3]};
+      padding-top: ${size[2]};
+      border-top: 1px solid ${t(colors.gray[200], colors.darkGray[600])};
+    `,
     keyCapLarge: css`
       display: inline-flex;
       align-items: center;