@tanstack/hotkeys-devtools 0.2.0 → 0.3.0

package/src/components/DetailsPanel.tsx

@@ -1,12 +1,30 @@
 import { For, Show, createMemo } from 'solid-js'
-import { formatForDisplay } from '@tanstack/hotkeys'
+import { formatForDisplay, formatHotkeySequence } from '@tanstack/hotkeys'
 import { useStyles } from '../styles/use-styles'
 import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
 import { ActionButtons } from './ActionButtons'
-import type { ConflictBehavior, HotkeyRegistration } from '@tanstack/hotkeys'
+import type {
+  ConflictBehavior,
+  HotkeyRegistration,
+  HotkeySequence,
+  SequenceRegistrationView,
+} from '@tanstack/hotkeys'
+
+function sequenceKey(sequence: Array<string>): string {
+  return sequence.join('|')
+}
+
+function isSequenceRegistration(
+  reg: HotkeyRegistration | SequenceRegistrationView,
+): reg is SequenceRegistrationView {
+  return 'sequence' in reg && Array.isArray(reg.sequence)
+}
 
 type DetailsPanelProps = {
-  selectedRegistration: () => HotkeyRegistration | null
+  selectedRegistration: () =>
+    | HotkeyRegistration
+    | SequenceRegistrationView
+    | null
 }
 
 function getTargetDescription(target: HTMLElement | Document | Window): string {
@@ -53,6 +71,32 @@ function findScopeConflicts(
   )
 }
 
+function findSequenceTargetConflicts(
+  registration: SequenceRegistrationView,
+  all: Array<SequenceRegistrationView>,
+): Array<SequenceRegistrationView> {
+  return all.filter(
+    (other) =>
+      other.id !== registration.id &&
+      sequenceKey(other.sequence) === sequenceKey(registration.sequence) &&
+      other.options.eventType === registration.options.eventType &&
+      other.target === registration.target,
+  )
+}
+
+function findSequenceScopeConflicts(
+  registration: SequenceRegistrationView,
+  all: Array<SequenceRegistrationView>,
+): Array<SequenceRegistrationView> {
+  return all.filter(
+    (other) =>
+      other.id !== registration.id &&
+      sequenceKey(other.sequence) === sequenceKey(registration.sequence) &&
+      other.options.eventType === registration.options.eventType &&
+      other.target !== registration.target,
+  )
+}
+
 function getConflictItemStyle(
   behavior: ConflictBehavior,
   isSameTarget: boolean,
@@ -78,6 +122,427 @@ function getConflictLabel(
   return 'warning'
 }
 
+function HotkeyDetails(props: {
+  registration: HotkeyRegistration
+  state: ReturnType<typeof useHotkeysDevtoolsState>
+  getTargetDescription: (t: HTMLElement | Document | Window) => string
+  findTargetConflicts: (
+    r: HotkeyRegistration,
+    all: Array<HotkeyRegistration>,
+  ) => Array<HotkeyRegistration>
+  findScopeConflicts: (
+    r: HotkeyRegistration,
+    all: Array<HotkeyRegistration>,
+  ) => Array<HotkeyRegistration>
+  getConflictItemStyle: (
+    b: ConflictBehavior,
+    same: boolean,
+  ) =>
+    | 'conflictItem'
+    | 'conflictItemAllow'
+    | 'conflictItemError'
+    | 'conflictItemScope'
+  getConflictLabel: (b: ConflictBehavior, same: boolean) => string
+  formatForDisplay: (hotkey: string) => string
+  styles: ReturnType<typeof useStyles>
+}) {
+  const reg = () => props.registration
+  const parsed = () => reg().parsedHotkey
+  const targetConflicts = createMemo(() =>
+    props.findTargetConflicts(reg(), props.state.registrations()),
+  )
+  const scopeConflicts = createMemo(() =>
+    props.findScopeConflicts(reg(), props.state.registrations()),
+  )
+  const allConflicts = createMemo(() => [
+    ...targetConflicts(),
+    ...scopeConflicts(),
+  ])
+  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 styles = props.styles
+
+  return (
+    <>
+      <div class={styles().stateHeader}>
+        <div class={styles().stateTitle}>
+          {props.formatForDisplay(reg().hotkey)}
+        </div>
+        <div class={styles().infoGrid}>
+          <div class={styles().infoLabel}>ID</div>
+          <div class={styles().infoValueMono}>{reg().id}</div>
+          <div class={styles().infoLabel}>Raw</div>
+          <div class={styles().infoValueMono}>{reg().hotkey}</div>
+          <div class={styles().infoLabel}>Target</div>
+          <div class={styles().infoValueMono}>
+            {props.getTargetDescription(reg().target)}
+          </div>
+        </div>
+      </div>
+
+      <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>
+        </div>
+
+        <div class={styles().detailSection}>
+          <div class={styles().detailSectionHeader}>Actions</div>
+          <ActionButtons registration={reg()} />
+        </div>
+
+        <div class={styles().detailSection}>
+          <div class={styles().detailSectionHeader}>Options</div>
+          <div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>enabled</span>
+              <span
+                class={
+                  reg().options.enabled !== false
+                    ? styles().optionValueTrue
+                    : styles().optionValueFalse
+                }
+              >
+                {String(reg().options.enabled !== false)}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>eventType</span>
+              <span class={styles().optionValue}>
+                {reg().options.eventType ?? 'keydown'}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>preventDefault</span>
+              <span
+                class={
+                  reg().options.preventDefault
+                    ? styles().optionValueTrue
+                    : styles().optionValueFalse
+                }
+              >
+                {String(!!reg().options.preventDefault)}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>stopPropagation</span>
+              <span
+                class={
+                  reg().options.stopPropagation
+                    ? styles().optionValueTrue
+                    : styles().optionValueFalse
+                }
+              >
+                {String(!!reg().options.stopPropagation)}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>ignoreInputs</span>
+              <span
+                class={
+                  reg().options.ignoreInputs !== false
+                    ? styles().optionValueTrue
+                    : styles().optionValueFalse
+                }
+              >
+                {String(reg().options.ignoreInputs !== false)}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>requireReset</span>
+              <span
+                class={
+                  reg().options.requireReset
+                    ? styles().optionValueTrue
+                    : styles().optionValueFalse
+                }
+              >
+                {String(!!reg().options.requireReset)}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>conflictBehavior</span>
+              <span class={styles().optionValue}>{conflictBehavior()}</span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>hasFired</span>
+              <span
+                class={
+                  reg().hasFired
+                    ? styles().optionValueTrue
+                    : styles().optionValueFalse
+                }
+              >
+                {String(reg().hasFired)}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <Show when={allConflicts().length > 0}>
+          <div class={styles().detailSection}>
+            <div class={styles().detailSectionHeader}>
+              Conflicts ({allConflicts().length})
+            </div>
+            <div class={styles().conflictList}>
+              <For each={targetConflicts()}>
+                {(conflict) => {
+                  const itemStyle = () =>
+                    props.getConflictItemStyle(conflictBehavior(), true)
+                  const label = () =>
+                    props.getConflictLabel(conflictBehavior(), true)
+                  return (
+                    <div class={styles()[itemStyle()]}>
+                      <span>{label()}</span> {conflict.id}:{' '}
+                      {props.formatForDisplay(conflict.hotkey)} (
+                      {conflict.options.eventType ?? 'keydown'}) on{' '}
+                      {props.getTargetDescription(conflict.target)}
+                    </div>
+                  )
+                }}
+              </For>
+              <For each={scopeConflicts()}>
+                {(conflict) => (
+                  <div class={styles().conflictItemScope}>
+                    <span>scope</span> {conflict.id}:{' '}
+                    {props.formatForDisplay(conflict.hotkey)} (
+                    {conflict.options.eventType ?? 'keydown'}) on{' '}
+                    {props.getTargetDescription(conflict.target)}
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+      </div>
+    </>
+  )
+}
+
+function SequenceDetails(props: {
+  registration: SequenceRegistrationView
+  state: ReturnType<typeof useHotkeysDevtoolsState>
+  getTargetDescription: (t: HTMLElement | Document | Window) => string
+  findSequenceTargetConflicts: (
+    r: SequenceRegistrationView,
+    all: Array<SequenceRegistrationView>,
+  ) => Array<SequenceRegistrationView>
+  findSequenceScopeConflicts: (
+    r: SequenceRegistrationView,
+    all: Array<SequenceRegistrationView>,
+  ) => Array<SequenceRegistrationView>
+  getConflictItemStyle: (
+    b: ConflictBehavior,
+    same: boolean,
+  ) =>
+    | 'conflictItem'
+    | 'conflictItemAllow'
+    | 'conflictItemError'
+    | 'conflictItemScope'
+  getConflictLabel: (b: ConflictBehavior, same: boolean) => string
+  formatHotkeySequence: (seq: HotkeySequence) => string
+  formatForDisplay: (hotkey: string) => string
+  styles: ReturnType<typeof useStyles>
+}) {
+  const reg = () => props.registration
+  const targetConflicts = createMemo(() =>
+    props.findSequenceTargetConflicts(
+      reg(),
+      props.state.sequenceRegistrations(),
+    ),
+  )
+  const scopeConflicts = createMemo(() =>
+    props.findSequenceScopeConflicts(
+      reg(),
+      props.state.sequenceRegistrations(),
+    ),
+  )
+  const allConflicts = createMemo(() => [
+    ...targetConflicts(),
+    ...scopeConflicts(),
+  ])
+  const conflictBehavior = (): ConflictBehavior =>
+    reg().options.conflictBehavior ?? 'warn'
+
+  const styles = props.styles
+
+  return (
+    <>
+      <div class={styles().stateHeader}>
+        <div class={styles().stateTitle}>
+          {props.formatHotkeySequence(reg().sequence)}
+        </div>
+        <div class={styles().infoGrid}>
+          <div class={styles().infoLabel}>ID</div>
+          <div class={styles().infoValueMono}>{reg().id}</div>
+          <div class={styles().infoLabel}>Sequence</div>
+          <div class={styles().infoValueMono}>
+            {props.formatHotkeySequence(reg().sequence)}
+          </div>
+          <div class={styles().infoLabel}>Target</div>
+          <div class={styles().infoValueMono}>
+            {props.getTargetDescription(reg().target)}
+          </div>
+        </div>
+      </div>
+
+      <div class={styles().detailsGrid}>
+        <div class={styles().detailSection}>
+          <div class={styles().detailSectionHeader}>Key Breakdown</div>
+          <div class={styles().keyBreakdown}>
+            <For each={reg().sequence}>
+              {(step, i) => (
+                <>
+                  <Show when={i() > 0}>
+                    <span class={styles().keyBreakdownPlus}>→</span>
+                  </Show>
+                  <span class={styles().keyCapLarge}>
+                    {props.formatForDisplay(step)}
+                  </span>
+                </>
+              )}
+            </For>
+          </div>
+        </div>
+
+        <div class={styles().detailSection}>
+          <div class={styles().detailSectionHeader}>Actions</div>
+          <ActionButtons registration={reg()} />
+        </div>
+
+        <div class={styles().detailSection}>
+          <div class={styles().detailSectionHeader}>Options</div>
+          <div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>enabled</span>
+              <span
+                class={
+                  reg().options.enabled !== false
+                    ? styles().optionValueTrue
+                    : styles().optionValueFalse
+                }
+              >
+                {String(reg().options.enabled !== false)}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>eventType</span>
+              <span class={styles().optionValue}>
+                {reg().options.eventType ?? 'keydown'}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>timeout</span>
+              <span class={styles().optionValue}>
+                {reg().options.timeout ?? 1000}ms
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>preventDefault</span>
+              <span
+                class={
+                  reg().options.preventDefault
+                    ? styles().optionValueTrue
+                    : styles().optionValueFalse
+                }
+              >
+                {String(!!reg().options.preventDefault)}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>stopPropagation</span>
+              <span
+                class={
+                  reg().options.stopPropagation
+                    ? styles().optionValueTrue
+                    : styles().optionValueFalse
+                }
+              >
+                {String(!!reg().options.stopPropagation)}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>ignoreInputs</span>
+              <span
+                class={
+                  reg().options.ignoreInputs !== false
+                    ? styles().optionValueTrue
+                    : styles().optionValueFalse
+                }
+              >
+                {String(reg().options.ignoreInputs !== false)}
+              </span>
+            </div>
+            <div class={styles().optionRow}>
+              <span class={styles().optionLabel}>conflictBehavior</span>
+              <span class={styles().optionValue}>{conflictBehavior()}</span>
+            </div>
+          </div>
+        </div>
+
+        <Show when={allConflicts().length > 0}>
+          <div class={styles().detailSection}>
+            <div class={styles().detailSectionHeader}>
+              Conflicts ({allConflicts().length})
+            </div>
+            <div class={styles().conflictList}>
+              <For each={targetConflicts()}>
+                {(conflict) => {
+                  const itemStyle = () =>
+                    props.getConflictItemStyle(conflictBehavior(), true)
+                  const label = () =>
+                    props.getConflictLabel(conflictBehavior(), true)
+                  return (
+                    <div class={styles()[itemStyle()]}>
+                      <span>{label()}</span> {conflict.id}:{' '}
+                      {props.formatHotkeySequence(conflict.sequence)} (
+                      {conflict.options.eventType ?? 'keydown'}) on{' '}
+                      {props.getTargetDescription(conflict.target)}
+                    </div>
+                  )
+                }}
+              </For>
+              <For each={scopeConflicts()}>
+                {(conflict) => (
+                  <div class={styles().conflictItemScope}>
+                    <span>scope</span> {conflict.id}:{' '}
+                    {props.formatHotkeySequence(conflict.sequence)} (
+                    {conflict.options.eventType ?? 'keydown'}) on{' '}
+                    {props.getTargetDescription(conflict.target)}
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+      </div>
+    </>
+  )
+}
+
 export function DetailsPanel(props: DetailsPanelProps) {
   const styles = useStyles()
   const state = useHotkeysDevtoolsState()
@@ -88,210 +553,41 @@ export function DetailsPanel(props: DetailsPanelProps) {
         when={props.selectedRegistration()}
         fallback={
           <div class={styles().noSelection}>
-            Select a hotkey from the list to view its details
+            Select a hotkey or sequence from the list to view its details
           </div>
         }
       >
-        {(reg) => {
-          const parsed = () => reg().parsedHotkey
-          const targetConflicts = createMemo(() =>
-            findTargetConflicts(reg(), state.registrations()),
-          )
-          const scopeConflicts = createMemo(() =>
-            findScopeConflicts(reg(), state.registrations()),
-          )
-          const allConflicts = createMemo(() => [
-            ...targetConflicts(),
-            ...scopeConflicts(),
-          ])
-          const conflictBehavior = (): ConflictBehavior =>
-            reg().options.conflictBehavior ?? 'warn'
-
-          // Build key parts for visual breakdown
-          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
-          })
-
-          return (
-            <>
-              <div class={styles().stateHeader}>
-                <div class={styles().stateTitle}>
-                  {formatForDisplay(reg().hotkey)}
-                </div>
-                <div class={styles().infoGrid}>
-                  <div class={styles().infoLabel}>ID</div>
-                  <div class={styles().infoValueMono}>{reg().id}</div>
-                  <div class={styles().infoLabel}>Raw</div>
-                  <div class={styles().infoValueMono}>{reg().hotkey}</div>
-                  <div class={styles().infoLabel}>Target</div>
-                  <div class={styles().infoValueMono}>
-                    {getTargetDescription(reg().target)}
-                  </div>
-                </div>
-              </div>
-
-              <div class={styles().detailsGrid}>
-                {/* Key Breakdown */}
-                <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>
-                </div>
-
-                {/* Actions */}
-                <div class={styles().detailSection}>
-                  <div class={styles().detailSectionHeader}>Actions</div>
-                  <ActionButtons registration={reg()} />
-                </div>
-
-                {/* Options */}
-                <div class={styles().detailSection}>
-                  <div class={styles().detailSectionHeader}>Options</div>
-                  <div>
-                    <div class={styles().optionRow}>
-                      <span class={styles().optionLabel}>enabled</span>
-                      <span
-                        class={
-                          reg().options.enabled !== false
-                            ? styles().optionValueTrue
-                            : styles().optionValueFalse
-                        }
-                      >
-                        {String(reg().options.enabled !== false)}
-                      </span>
-                    </div>
-                    <div class={styles().optionRow}>
-                      <span class={styles().optionLabel}>eventType</span>
-                      <span class={styles().optionValue}>
-                        {reg().options.eventType ?? 'keydown'}
-                      </span>
-                    </div>
-                    <div class={styles().optionRow}>
-                      <span class={styles().optionLabel}>preventDefault</span>
-                      <span
-                        class={
-                          reg().options.preventDefault
-                            ? styles().optionValueTrue
-                            : styles().optionValueFalse
-                        }
-                      >
-                        {String(!!reg().options.preventDefault)}
-                      </span>
-                    </div>
-                    <div class={styles().optionRow}>
-                      <span class={styles().optionLabel}>stopPropagation</span>
-                      <span
-                        class={
-                          reg().options.stopPropagation
-                            ? styles().optionValueTrue
-                            : styles().optionValueFalse
-                        }
-                      >
-                        {String(!!reg().options.stopPropagation)}
-                      </span>
-                    </div>
-                    <div class={styles().optionRow}>
-                      <span class={styles().optionLabel}>ignoreInputs</span>
-                      <span
-                        class={
-                          reg().options.ignoreInputs !== false
-                            ? styles().optionValueTrue
-                            : styles().optionValueFalse
-                        }
-                      >
-                        {String(reg().options.ignoreInputs !== false)}
-                      </span>
-                    </div>
-                    <div class={styles().optionRow}>
-                      <span class={styles().optionLabel}>requireReset</span>
-                      <span
-                        class={
-                          reg().options.requireReset
-                            ? styles().optionValueTrue
-                            : styles().optionValueFalse
-                        }
-                      >
-                        {String(!!reg().options.requireReset)}
-                      </span>
-                    </div>
-                    <div class={styles().optionRow}>
-                      <span class={styles().optionLabel}>conflictBehavior</span>
-                      <span class={styles().optionValue}>
-                        {conflictBehavior()}
-                      </span>
-                    </div>
-                    <div class={styles().optionRow}>
-                      <span class={styles().optionLabel}>hasFired</span>
-                      <span
-                        class={
-                          reg().hasFired
-                            ? styles().optionValueTrue
-                            : styles().optionValueFalse
-                        }
-                      >
-                        {String(reg().hasFired)}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Conflicts */}
-                <Show when={allConflicts().length > 0}>
-                  <div class={styles().detailSection}>
-                    <div class={styles().detailSectionHeader}>
-                      Conflicts ({allConflicts().length})
-                    </div>
-                    <div class={styles().conflictList}>
-                      <For each={targetConflicts()}>
-                        {(conflict) => {
-                          const itemStyle = () =>
-                            getConflictItemStyle(conflictBehavior(), true)
-                          const label = () =>
-                            getConflictLabel(conflictBehavior(), true)
-                          return (
-                            <div class={styles()[itemStyle()]}>
-                              <span>{label()}</span> {conflict.id}:{' '}
-                              {formatForDisplay(conflict.hotkey)} (
-                              {conflict.options.eventType ?? 'keydown'}) on{' '}
-                              {getTargetDescription(conflict.target)}
-                            </div>
-                          )
-                        }}
-                      </For>
-                      <For each={scopeConflicts()}>
-                        {(conflict) => (
-                          <div class={styles().conflictItemScope}>
-                            <span>scope</span> {conflict.id}:{' '}
-                            {formatForDisplay(conflict.hotkey)} (
-                            {conflict.options.eventType ?? 'keydown'}) on{' '}
-                            {getTargetDescription(conflict.target)}
-                          </div>
-                        )}
-                      </For>
-                    </div>
-                  </div>
-                </Show>
-              </div>
-            </>
-          )
-        }}
+        {(reg) => (
+          <Show
+            when={isSequenceRegistration(reg())}
+            fallback={
+              <HotkeyDetails
+                registration={reg() as HotkeyRegistration}
+                state={state}
+                getTargetDescription={getTargetDescription}
+                findTargetConflicts={findTargetConflicts}
+                findScopeConflicts={findScopeConflicts}
+                getConflictItemStyle={getConflictItemStyle}
+                getConflictLabel={getConflictLabel}
+                formatForDisplay={formatForDisplay}
+                styles={styles}
+              />
+            }
+          >
+            <SequenceDetails
+              registration={reg() as SequenceRegistrationView}
+              state={state}
+              getTargetDescription={getTargetDescription}
+              findSequenceTargetConflicts={findSequenceTargetConflicts}
+              findSequenceScopeConflicts={findSequenceScopeConflicts}
+              getConflictItemStyle={getConflictItemStyle}
+              getConflictLabel={getConflictLabel}
+              formatHotkeySequence={formatHotkeySequence}
+              formatForDisplay={formatForDisplay}
+              styles={styles}
+            />
+          </Show>
+        )}
       </Show>
     </div>
   )