@tanstack/hotkeys-devtools 0.4.3 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/HotkeysContextProvider.js +25 -2
  2. package/dist/HotkeysContextProvider.js.map +1 -1
  3. package/dist/components/DetailsPanel.js +84 -48
  4. package/dist/components/DetailsPanel.js.map +1 -1
  5. package/dist/components/HotkeyList.js +229 -195
  6. package/dist/components/HotkeyList.js.map +1 -1
  7. package/dist/components/Shell.js +100 -43
  8. package/dist/components/Shell.js.map +1 -1
  9. package/dist/core.d.ts +3 -15
  10. package/dist/core.js +3 -1
  11. package/dist/core.js.map +1 -1
  12. package/dist/index.d.ts +2 -8
  13. package/dist/index.js.map +1 -1
  14. package/dist/sequence-progress.js +20 -0
  15. package/dist/sequence-progress.js.map +1 -0
  16. package/dist/styles/use-styles.js +47 -0
  17. package/dist/styles/use-styles.js.map +1 -1
  18. package/package.json +3 -3
  19. package/src/HotkeysContextProvider.tsx +35 -0
  20. package/src/components/DetailsPanel.tsx +65 -20
  21. package/src/components/HotkeyList.tsx +187 -151
  22. package/src/components/Shell.tsx +101 -34
  23. package/src/core.tsx +4 -3
  24. package/src/index.ts +2 -1
  25. package/src/sequence-progress.ts +29 -0
  26. package/src/styles/use-styles.ts +49 -0
package/dist/styles/use-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-styles.js","names":[],"sources":["../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '@tanstack/devtools-ui'\nimport { tokens } from './tokens'\n\nconst stylesFactory = (theme: 'light' | 'dark') => {\n const { colors, font, size, alpha, border } = tokens\n const { fontFamily, size: fontSize } = font\n const css = goober.css\n const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n return {\n mainContainer: css`\n display: flex;\n flex-direction: column;\n padding: ${size[2]};\n padding-top: 0;\n margin-top: ${size[2]};\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: 64px;\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 `,\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 `,\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 `,\n panelHeader: css`\n font-size: ${fontSize.md};\n font-weight: ${font.weight.bold};\n color: ${t(colors.blue[700], colors.blue[400])};\n padding: ${size[2]};\n border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n background: ${t(colors.gray[100], colors.darkGray[800])};\n flex-shrink: 0;\n `,\n hotkeyList: css`\n padding: ${size[1]};\n `,\n hotkeyRow: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ${size[2]};\n margin-bottom: ${size[1]};\n background: ${t(colors.gray[200], colors.darkGray[700])};\n border-radius: ${border.radius.md};\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid transparent;\n\n &:hover {\n background: ${t(colors.gray[300], colors.darkGray[600])};\n border-color: ${t(colors.gray[400], colors.darkGray[500])};\n }\n `,\n hotkeyRowSelected: css`\n background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};\n border-color: ${t(colors.blue[600], colors.blue[500])};\n box-shadow: 0 0 0 1px\n ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};\n `,\n hotkeyRowTriggered: css`\n animation: hotkey-pulse 0.6s ease-out;\n\n @keyframes hotkey-pulse {\n 0% {\n border-color: ${t(colors.blue[500], colors.blue[400])};\n box-shadow: 0 0 0 2px\n ${t(colors.blue[500] + alpha[40], colors.blue[400] + alpha[40])};\n }\n 100% {\n border-color: transparent;\n box-shadow: 0 0 0 0px\n ${t(colors.blue[500] + '00', colors.blue[400] + '00')};\n }\n }\n `,\n hotkeyLabel: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.gray[900], colors.gray[100])};\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n 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 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 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 conflictList: css`\n display: flex;\n flex-direction: column;\n gap: ${size[1]};\n `,\n conflictItem: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.yellow[700], colors.yellow[400])};\n padding: ${size[1]} ${size[2]};\n background: ${t(colors.yellow[50], colors.yellow[900] + alpha[20])};\n border-radius: ${border.radius.sm};\n border: 1px solid ${t(colors.yellow[200], colors.yellow[800] + alpha[30])};\n `,\n conflictItemAllow: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.gray[600], colors.gray[400])};\n padding: ${size[1]} ${size[2]};\n background: ${t(colors.gray[100], colors.darkGray[700])};\n border-radius: ${border.radius.sm};\n border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n `,\n conflictItemError: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.red[700], colors.red[400])};\n padding: ${size[1]} ${size[2]};\n background: ${t(colors.red[50], colors.red[900] + alpha[20])};\n border-radius: ${border.radius.sm};\n border: 1px solid ${t(colors.red[200], colors.red[900] + alpha[30])};\n `,\n conflictItemScope: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.blue[700], colors.blue[400])};\n padding: ${size[1]} ${size[2]};\n background: ${t(colors.blue[50], colors.blue[900] + alpha[20])};\n border-radius: ${border.radius.sm};\n border: 1px solid ${t(colors.blue[200], colors.blue[800] + alpha[30])};\n `,\n optionRow: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ${size[1]} 0;\n font-size: ${fontSize.xs};\n border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[600])};\n &:last-child {\n border-bottom: none;\n }\n `,\n optionLabel: css`\n color: ${t(colors.gray[600], colors.gray[400])};\n `,\n optionValue: css`\n font-family: ${fontFamily.mono};\n color: ${t(colors.gray[900], colors.gray[100])};\n `,\n optionValueTrue: css`\n font-family: ${fontFamily.mono};\n color: ${t(colors.green[600], colors.green[400])};\n `,\n optionValueFalse: css`\n font-family: ${fontFamily.mono};\n color: ${t(colors.red[600], colors.red[400])};\n `,\n tooltip: css`\n position: relative;\n &:hover > [data-tooltip] {\n opacity: 1;\n visibility: visible;\n }\n `,\n tooltipText: css`\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n padding: ${size[1]} ${size[1.5]};\n background: ${t(colors.gray[800], colors.darkGray[500])};\n color: ${t(colors.white, colors.gray[100])};\n font-size: ${fontSize['2xs']};\n border-radius: ${border.radius.sm};\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 0.15s,\n visibility 0.15s;\n z-index: ${tokens.zIndices.tooltip};\n margin-top: ${size[1]};\n `,\n triggerCount: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize['2xs']};\n color: ${t(colors.gray[500], colors.gray[400])};\n margin-left: ${size[1]};\n flex-shrink: 0;\n `,\n }\n}\n\nexport function useStyles() {\n const { theme } = useTheme()\n const [styles, setStyles] = createSignal(stylesFactory(theme()))\n createEffect(() => {\n setStyles(stylesFactory(theme()))\n })\n return styles\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"use-styles.js","names":[],"sources":["../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '@tanstack/devtools-ui'\nimport { tokens } from './tokens'\n\nconst stylesFactory = (theme: 'light' | 'dark') => {\n const { colors, font, size, alpha, border } = tokens\n const { fontFamily, size: fontSize } = font\n const css = goober.css\n const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n return {\n /** Full-height flex child so MainPanel gets a bounded height from the portal */\n shellRoot: css`\n display: flex;\n flex-direction: column;\n min-height: 0;\n height: 100%;\n flex: 1;\n overflow: hidden;\n `,\n /** Overrides devtools-ui MainPanel (overflow-y: auto) so inner columns scroll independently */\n mainPanelShell: css`\n display: flex;\n flex-direction: column;\n flex: 1 1 0%;\n min-height: 0;\n height: auto;\n overflow: hidden !important;\n `,\n mainContainer: css`\n display: flex;\n flex-direction: column;\n flex: 1 1 0%;\n min-height: 0;\n overflow: hidden;\n padding: ${size[2]};\n padding-top: 0;\n margin-top: ${size[2]};\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: 64px;\n margin-bottom: ${size[2]};\n `,\n heldKeysBarHeader: css`\n font-size: ${fontSize.sm};\n font-weight: ${font.weight.bold};\n color: ${t(colors.gray[600], colors.gray[400])};\n text-transform: uppercase;\n letter-spacing: 0.05em;\n flex-shrink: 0;\n `,\n heldKeysBarList: css`\n display: flex;\n align-items: center;\n gap: ${size[1.5]};\n flex-wrap: wrap;\n flex: 1;\n min-width: 0;\n `,\n panelsContainer: css`\n display: flex;\n flex: 1 1 0%;\n min-height: 0;\n overflow: hidden;\n align-items: stretch;\n `,\n dragHandle: css`\n width: 8px;\n background: ${t(colors.gray[300], colors.darkGray[600])};\n cursor: col-resize;\n position: relative;\n transition: all 0.2s ease;\n user-select: none;\n pointer-events: all;\n margin: 0 ${size[1]};\n border-radius: 2px;\n\n &:hover {\n background: ${t(colors.blue[600], colors.blue[500])};\n margin: 0 ${size[1]};\n }\n\n &.dragging {\n background: ${t(colors.blue[700], colors.blue[600])};\n margin: 0 ${size[1]};\n }\n\n &::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 2px;\n height: 20px;\n background: ${t(colors.gray[400], colors.darkGray[400])};\n border-radius: 1px;\n pointer-events: none;\n }\n\n &:hover::after,\n &.dragging::after {\n background: ${t(colors.blue[500], colors.blue[300])};\n }\n `,\n keyCap: css`\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n padding: ${size[1]} ${size[2]};\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.sm};\n font-weight: ${font.weight.bold};\n color: ${t(colors.gray[800], colors.gray[100])};\n background: ${t(colors.white, colors.darkGray[600])};\n border: 1px solid ${t(colors.gray[300], colors.darkGray[400])};\n border-bottom-width: 2px;\n border-radius: ${border.radius.sm};\n box-shadow: ${tokens.shadow.xs()};\n text-transform: capitalize;\n white-space: nowrap;\n line-height: 1.2;\n `,\n keyCapCode: css`\n font-size: ${fontSize['2xs']};\n font-weight: ${font.weight.normal};\n color: ${t(colors.gray[500], colors.gray[400])};\n text-transform: none;\n line-height: 1;\n margin-top: 2px;\n `,\n noKeysHeld: css`\n font-size: ${fontSize.sm};\n color: ${t(colors.gray[400], colors.gray[600])};\n font-style: italic;\n text-align: center;\n padding: ${size[1]};\n `,\n leftPanel: css`\n background: ${t(colors.gray[100], colors.darkGray[800])};\n border-radius: ${border.radius.lg};\n border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n min-height: 0;\n min-width: 0;\n `,\n leftPanelScroll: css`\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n `,\n rightPanel: css`\n background: ${t(colors.gray[100], colors.darkGray[800])};\n border-radius: ${border.radius.lg};\n border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n min-width: 0;\n overflow: hidden;\n `,\n panelHeader: css`\n font-size: ${fontSize.md};\n font-weight: ${font.weight.bold};\n color: ${t(colors.blue[700], colors.blue[400])};\n padding: ${size[2]};\n border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n background: ${t(colors.gray[100], colors.darkGray[800])};\n flex-shrink: 0;\n `,\n hotkeyList: css`\n padding: ${size[1]};\n `,\n hotkeyRow: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ${size[2]};\n margin-bottom: ${size[1]};\n background: ${t(colors.gray[200], colors.darkGray[700])};\n border-radius: ${border.radius.md};\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid transparent;\n\n &:hover {\n background: ${t(colors.gray[300], colors.darkGray[600])};\n border-color: ${t(colors.gray[400], colors.darkGray[500])};\n }\n `,\n hotkeyRowSelected: css`\n background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};\n border-color: ${t(colors.blue[600], colors.blue[500])};\n box-shadow: 0 0 0 1px\n ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};\n `,\n hotkeyRowTriggered: css`\n animation: hotkey-pulse 0.6s ease-out;\n\n @keyframes hotkey-pulse {\n 0% {\n border-color: ${t(colors.blue[500], colors.blue[400])};\n box-shadow: 0 0 0 2px\n ${t(colors.blue[500] + alpha[40], colors.blue[400] + alpha[40])};\n }\n 100% {\n border-color: transparent;\n box-shadow: 0 0 0 0px\n ${t(colors.blue[500] + '00', colors.blue[400] + '00')};\n }\n }\n `,\n hotkeyLabel: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.gray[900], colors.gray[100])};\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n sequenceStepMatched: css`\n font-weight: ${font.weight.bold};\n color: ${t(colors.blue[700], colors.blue[300])};\n `,\n hotkeyBadges: css`\n display: flex;\n gap: ${size[1]};\n margin-left: ${size[1]};\n flex-shrink: 0;\n overflow: visible;\n `,\n badge: css`\n font-size: ${fontSize['2xs']};\n padding: ${size[0.5]} ${size[1]};\n border-radius: ${border.radius.sm};\n text-transform: uppercase;\n letter-spacing: 0.05em;\n white-space: nowrap;\n `,\n badgeEnabled: css`\n color: ${t(colors.green[700], colors.green[400])};\n background: ${t(colors.green[100], colors.green[900] + alpha[30])};\n `,\n badgeDisabled: css`\n color: ${t(colors.red[700], colors.red[400])};\n background: ${t(colors.red[100], colors.red[900] + alpha[30])};\n `,\n badgeKeydown: css`\n color: ${t(colors.purple[700], colors.purple[400])};\n background: ${t(colors.purple[100], colors.purple[900] + alpha[30])};\n `,\n badgeKeyup: css`\n color: ${t(colors.teal[700], colors.teal[400])};\n background: ${t(colors.teal[100], colors.teal[900] + alpha[30])};\n `,\n badgeTarget: css`\n color: ${t(colors.gray[700], colors.gray[300])};\n background: ${t(colors.gray[200], colors.darkGray[600])};\n `,\n badgeConflict: css`\n color: ${t(colors.yellow[700], colors.yellow[400])};\n background: ${t(colors.yellow[100], colors.yellow[900] + alpha[30])};\n `,\n badgeError: css`\n color: ${t(colors.red[700], colors.red[400])};\n background: ${t(colors.red[100], colors.red[900] + alpha[30])};\n `,\n badgeAllow: css`\n color: ${t(colors.gray[600], colors.gray[400])};\n background: ${t(colors.gray[200], colors.darkGray[600])};\n `,\n badgeInfo: css`\n color: ${t(colors.blue[700], colors.blue[400])};\n background: ${t(colors.blue[100], colors.blue[900] + alpha[30])};\n `,\n stateDetails: css`\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: ${size[2]};\n `,\n stateHeader: css`\n margin-bottom: ${size[2]};\n padding-bottom: ${size[2]};\n border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n `,\n stateTitle: css`\n font-size: ${fontSize.md};\n font-weight: ${font.weight.bold};\n color: ${t(colors.blue[700], colors.blue[400])};\n margin-bottom: ${size[1]};\n `,\n detailsGrid: css`\n display: grid;\n grid-template-columns: 1fr;\n gap: ${size[2]};\n align-items: start;\n `,\n detailSection: css`\n background: ${t(colors.white, colors.darkGray[700])};\n border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n border-radius: ${border.radius.md};\n padding: ${size[2]};\n `,\n detailSectionHeader: css`\n font-size: ${fontSize.sm};\n font-weight: ${font.weight.bold};\n color: ${t(colors.gray[800], colors.gray[200])};\n margin-bottom: ${size[1]};\n text-transform: uppercase;\n letter-spacing: 0.04em;\n `,\n infoGrid: css`\n display: grid;\n grid-template-columns: auto 1fr;\n gap: ${size[1]};\n row-gap: ${size[1]};\n align-items: center;\n `,\n infoLabel: css`\n color: ${t(colors.gray[600], colors.gray[400])};\n font-size: ${fontSize.xs};\n text-transform: uppercase;\n letter-spacing: 0.05em;\n `,\n infoValueMono: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.gray[900], colors.gray[100])};\n word-break: break-all;\n `,\n actionsRow: css`\n display: flex;\n flex-wrap: wrap;\n gap: ${size[2]};\n `,\n actionButton: css`\n display: inline-flex;\n align-items: center;\n gap: ${size[1]};\n padding: ${size[1]} ${size[2]};\n border-radius: ${border.radius.md};\n border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};\n background: ${t(colors.gray[200], colors.darkGray[600])};\n color: ${t(colors.gray[900], colors.gray[100])};\n font-size: ${fontSize.xs};\n cursor: pointer;\n user-select: none;\n transition:\n background 0.15s,\n border-color 0.15s;\n &:hover {\n background: ${t(colors.gray[300], colors.darkGray[500])};\n border-color: ${t(colors.gray[400], colors.darkGray[400])};\n }\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n &:hover {\n background: ${t(colors.gray[200], colors.darkGray[600])};\n border-color: ${t(colors.gray[300], colors.darkGray[500])};\n }\n }\n `,\n actionDotGreen: css`\n width: 6px;\n height: 6px;\n border-radius: 9999px;\n background: ${colors.green[400]};\n `,\n noSelection: css`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${t(colors.gray[500], colors.gray[500])};\n font-style: italic;\n text-align: center;\n padding: ${size[4]};\n `,\n keyBreakdown: css`\n display: flex;\n flex-wrap: wrap;\n gap: ${size[1]};\n align-items: center;\n `,\n keyBreakdownPlus: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-size: ${fontSize.sm};\n `,\n keyCapLarge: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n padding: ${size[1]} ${size[2]};\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.sm};\n font-weight: ${font.weight.bold};\n color: ${t(colors.gray[800], colors.gray[100])};\n background: ${t(colors.white, colors.darkGray[600])};\n border: 1px solid ${t(colors.gray[300], colors.darkGray[400])};\n border-bottom-width: 3px;\n border-radius: ${border.radius.md};\n box-shadow: ${tokens.shadow.sm()};\n text-transform: capitalize;\n white-space: nowrap;\n `,\n keyCapLargeInProgress: css`\n border-color: ${t(colors.blue[500], colors.blue[400])};\n color: ${t(colors.blue[900], colors.blue[200])};\n background: ${t(colors.blue[50], colors.darkGray[500])};\n `,\n conflictList: css`\n display: flex;\n flex-direction: column;\n gap: ${size[1]};\n `,\n conflictItem: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.yellow[700], colors.yellow[400])};\n padding: ${size[1]} ${size[2]};\n background: ${t(colors.yellow[50], colors.yellow[900] + alpha[20])};\n border-radius: ${border.radius.sm};\n border: 1px solid ${t(colors.yellow[200], colors.yellow[800] + alpha[30])};\n `,\n conflictItemAllow: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.gray[600], colors.gray[400])};\n padding: ${size[1]} ${size[2]};\n background: ${t(colors.gray[100], colors.darkGray[700])};\n border-radius: ${border.radius.sm};\n border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n `,\n conflictItemError: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.red[700], colors.red[400])};\n padding: ${size[1]} ${size[2]};\n background: ${t(colors.red[50], colors.red[900] + alpha[20])};\n border-radius: ${border.radius.sm};\n border: 1px solid ${t(colors.red[200], colors.red[900] + alpha[30])};\n `,\n conflictItemScope: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize.xs};\n color: ${t(colors.blue[700], colors.blue[400])};\n padding: ${size[1]} ${size[2]};\n background: ${t(colors.blue[50], colors.blue[900] + alpha[20])};\n border-radius: ${border.radius.sm};\n border: 1px solid ${t(colors.blue[200], colors.blue[800] + alpha[30])};\n `,\n optionRow: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ${size[1]} 0;\n font-size: ${fontSize.xs};\n border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[600])};\n &:last-child {\n border-bottom: none;\n }\n `,\n optionLabel: css`\n color: ${t(colors.gray[600], colors.gray[400])};\n `,\n optionValue: css`\n font-family: ${fontFamily.mono};\n color: ${t(colors.gray[900], colors.gray[100])};\n `,\n optionValueTrue: css`\n font-family: ${fontFamily.mono};\n color: ${t(colors.green[600], colors.green[400])};\n `,\n optionValueFalse: css`\n font-family: ${fontFamily.mono};\n color: ${t(colors.red[600], colors.red[400])};\n `,\n tooltip: css`\n position: relative;\n &:hover > [data-tooltip] {\n opacity: 1;\n visibility: visible;\n }\n `,\n tooltipText: css`\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n padding: ${size[1]} ${size[1.5]};\n background: ${t(colors.gray[800], colors.darkGray[500])};\n color: ${t(colors.white, colors.gray[100])};\n font-size: ${fontSize['2xs']};\n border-radius: ${border.radius.sm};\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 0.15s,\n visibility 0.15s;\n z-index: ${tokens.zIndices.tooltip};\n margin-top: ${size[1]};\n `,\n triggerCount: css`\n font-family: ${fontFamily.mono};\n font-size: ${fontSize['2xs']};\n color: ${t(colors.gray[500], colors.gray[400])};\n margin-left: ${size[1]};\n flex-shrink: 0;\n `,\n }\n}\n\nexport function useStyles() {\n const { theme } = useTheme()\n const [styles, setStyles] = createSignal(stylesFactory(theme()))\n createEffect(() => {\n setStyles(stylesFactory(theme()))\n })\n return styles\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/hotkeys-devtools",
3
- "version": "0.4.3",
3
+ "version": "0.5.0",
4
4
  "description": "Devtools for TanStack Hotkeys",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -37,7 +37,7 @@
37
37
  "src"
38
38
  ],
39
39
  "peerDependencies": {
40
- "@tanstack/hotkeys": "0.4.2"
40
+ "@tanstack/hotkeys": "0.5.0"
41
41
  },
42
42
  "dependencies": {
43
43
  "@tanstack/devtools-ui": "^0.5.1",
@@ -47,7 +47,7 @@
47
47
  "solid-js": "^1.9.11"
48
48
  },
49
49
  "devDependencies": {
50
- "vite-plugin-solid": "^2.11.10"
50
+ "vite-plugin-solid": "^2.11.11"
51
51
  },
52
52
  "scripts": {
53
53
  "clean": "premove ./build ./dist",
package/src/HotkeysContextProvider.tsx CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  KeyStateTracker,
11
11
  SequenceManager,
12
12
  } from '@tanstack/hotkeys'
13
+ import { needsSequenceProgressClock } from './sequence-progress'
13
14
  import type { Accessor } from 'solid-js'
14
15
  import type {
15
16
  HotkeyRegistration,
@@ -21,6 +22,8 @@ interface HotkeysDevtoolsContextType {
21
22
  sequenceRegistrations: Accessor<Array<SequenceRegistrationView>>
22
23
  heldKeys: Accessor<Array<string>>
23
24
  heldCodes: Accessor<Record<string, string>>
25
+ /** Monotonic clock for sequence in-progress UI (updates while a sequence match is active). */
26
+ sequenceProgressNow: Accessor<number>
24
27
  }
25
28
 
26
29
  const HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({
@@ -28,6 +31,7 @@ const HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({
28
31
  sequenceRegistrations: () => [],
29
32
  heldKeys: () => [],
30
33
  heldCodes: () => ({}),
34
+ sequenceProgressNow: () => Date.now(),
31
35
  })
32
36
 
33
37
  export function HotkeysContextProvider(props: { children: any }) {
@@ -76,6 +80,36 @@ export function HotkeysContextProvider(props: { children: any }) {
76
80
  onCleanup(() => unsubscribe())
77
81
  })
78
82
 
83
+ const [sequenceProgressNow, setSequenceProgressNow] = createSignal(Date.now())
84
+
85
+ createEffect(() => {
86
+ const regs = sequenceRegistrations()
87
+ let id: ReturnType<typeof setInterval> | undefined
88
+
89
+ const tick = () => {
90
+ const t = Date.now()
91
+ setSequenceProgressNow(t)
92
+ if (!needsSequenceProgressClock(sequenceRegistrations(), t)) {
93
+ if (id !== undefined) {
94
+ clearInterval(id)
95
+ id = undefined
96
+ }
97
+ }
98
+ }
99
+
100
+ if (needsSequenceProgressClock(regs, Date.now())) {
101
+ id = setInterval(tick, 50)
102
+ } else {
103
+ setSequenceProgressNow(Date.now())
104
+ }
105
+
106
+ onCleanup(() => {
107
+ if (id !== undefined) {
108
+ clearInterval(id)
109
+ }
110
+ })
111
+ })
112
+
79
113
  return (
80
114
  <HotkeysDevtoolsContext.Provider
81
115
  value={{
@@ -83,6 +117,7 @@ export function HotkeysContextProvider(props: { children: any }) {
83
117
  sequenceRegistrations,
84
118
  heldKeys,
85
119
  heldCodes,
120
+ sequenceProgressNow,
86
121
  }}
87
122
  >
88
123
  {props.children}
package/src/components/DetailsPanel.tsx CHANGED
@@ -1,7 +1,9 @@
1
1
  import { For, Show, createMemo } from 'solid-js'
2
+ import clsx from 'clsx'
2
3
  import { formatForDisplay, formatHotkeySequence } from '@tanstack/hotkeys'
3
4
  import { useStyles } from '../styles/use-styles'
4
5
  import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
6
+ import { effectiveSequenceMatchedSteps } from '../sequence-progress'
5
7
  import { ActionButtons } from './ActionButtons'
6
8
  import type {
7
9
  ConflictBehavior,
@@ -368,15 +370,23 @@ function SequenceDetails(props: {
368
370
  styles: ReturnType<typeof useStyles>
369
371
  }) {
370
372
  const reg = () => props.registration
373
+ const liveReg = createMemo(
374
+ () =>
375
+ props.state.sequenceRegistrations().find((r) => r.id === reg().id) ??
376
+ reg(),
377
+ )
378
+ const matchedSteps = createMemo(() =>
379
+ effectiveSequenceMatchedSteps(liveReg(), props.state.sequenceProgressNow()),
380
+ )
371
381
  const targetConflicts = createMemo(() =>
372
382
  props.findSequenceTargetConflicts(
373
- reg(),
383
+ liveReg(),
374
384
  props.state.sequenceRegistrations(),
375
385
  ),
376
386
  )
377
387
  const scopeConflicts = createMemo(() =>
378
388
  props.findSequenceScopeConflicts(
379
- reg(),
389
+ liveReg(),
380
390
  props.state.sequenceRegistrations(),
381
391
  ),
382
392
  )
@@ -385,7 +395,7 @@ function SequenceDetails(props: {
385
395
  ...scopeConflicts(),
386
396
  ])
387
397
  const conflictBehavior = (): ConflictBehavior =>
388
- reg().options.conflictBehavior ?? 'warn'
398
+ liveReg().options.conflictBehavior ?? 'warn'
389
399
 
390
400
  const styles = props.styles
391
401
 
@@ -393,18 +403,48 @@ function SequenceDetails(props: {
393
403
  <>
394
404
  <div class={styles().stateHeader}>
395
405
  <div class={styles().stateTitle}>
396
- {props.formatHotkeySequence(reg().sequence)}
406
+ <For each={liveReg().sequence}>
407
+ {(step, i) => (
408
+ <span>
409
+ <Show when={i() > 0}> </Show>
410
+ <span
411
+ class={
412
+ i() < matchedSteps()
413
+ ? styles().sequenceStepMatched
414
+ : undefined
415
+ }
416
+ >
417
+ {props.formatForDisplay(step)}
418
+ </span>
419
+ </span>
420
+ )}
421
+ </For>
397
422
  </div>
398
423
  <div class={styles().infoGrid}>
399
424
  <div class={styles().infoLabel}>ID</div>
400
- <div class={styles().infoValueMono}>{reg().id}</div>
425
+ <div class={styles().infoValueMono}>{liveReg().id}</div>
401
426
  <div class={styles().infoLabel}>Sequence</div>
402
427
  <div class={styles().infoValueMono}>
403
- {props.formatHotkeySequence(reg().sequence)}
428
+ <For each={liveReg().sequence}>
429
+ {(step, i) => (
430
+ <span>
431
+ <Show when={i() > 0}> </Show>
432
+ <span
433
+ class={
434
+ i() < matchedSteps()
435
+ ? styles().sequenceStepMatched
436
+ : undefined
437
+ }
438
+ >
439
+ {props.formatForDisplay(step)}
440
+ </span>
441
+ </span>
442
+ )}
443
+ </For>
404
444
  </div>
405
445
  <div class={styles().infoLabel}>Target</div>
406
446
  <div class={styles().infoValueMono}>
407
- {props.getTargetDescription(reg().target)}
447
+ {props.getTargetDescription(liveReg().target)}
408
448
  </div>
409
449
  </div>
410
450
  </div>
@@ -413,13 +453,18 @@ function SequenceDetails(props: {
413
453
  <div class={styles().detailSection}>
414
454
  <div class={styles().detailSectionHeader}>Key Breakdown</div>
415
455
  <div class={styles().keyBreakdown}>
416
- <For each={reg().sequence}>
456
+ <For each={liveReg().sequence}>
417
457
  {(step, i) => (
418
458
  <>
419
459
  <Show when={i() > 0}>
420
460
  <span class={styles().keyBreakdownPlus}>→</span>
421
461
  </Show>
422
- <span class={styles().keyCapLarge}>
462
+ <span
463
+ class={clsx(
464
+ styles().keyCapLarge,
465
+ i() < matchedSteps() && styles().keyCapLargeInProgress,
466
+ )}
467
+ >
423
468
  {props.formatForDisplay(step)}
424
469
  </span>
425
470
  </>
@@ -430,7 +475,7 @@ function SequenceDetails(props: {
430
475
 
431
476
  <div class={styles().detailSection}>
432
477
  <div class={styles().detailSectionHeader}>Actions</div>
433
- <ActionButtons registration={reg()} />
478
+ <ActionButtons registration={liveReg()} />
434
479
  </div>
435
480
 
436
481
  <div class={styles().detailSection}>
@@ -440,60 +485,60 @@ function SequenceDetails(props: {
440
485
  <span class={styles().optionLabel}>enabled</span>
441
486
  <span
442
487
  class={
443
- reg().options.enabled !== false
488
+ liveReg().options.enabled !== false
444
489
  ? styles().optionValueTrue
445
490
  : styles().optionValueFalse
446
491
  }
447
492
  >
448
- {String(reg().options.enabled !== false)}
493
+ {String(liveReg().options.enabled !== false)}
449
494
  </span>
450
495
  </div>
451
496
  <div class={styles().optionRow}>
452
497
  <span class={styles().optionLabel}>eventType</span>
453
498
  <span class={styles().optionValue}>
454
- {reg().options.eventType ?? 'keydown'}
499
+ {liveReg().options.eventType ?? 'keydown'}
455
500
  </span>
456
501
  </div>
457
502
  <div class={styles().optionRow}>
458
503
  <span class={styles().optionLabel}>timeout</span>
459
504
  <span class={styles().optionValue}>
460
- {reg().options.timeout ?? 1000}ms
505
+ {liveReg().options.timeout ?? 1000}ms
461
506
  </span>
462
507
  </div>
463
508
  <div class={styles().optionRow}>
464
509
  <span class={styles().optionLabel}>preventDefault</span>
465
510
  <span
466
511
  class={
467
- reg().options.preventDefault
512
+ liveReg().options.preventDefault
468
513
  ? styles().optionValueTrue
469
514
  : styles().optionValueFalse
470
515
  }
471
516
  >
472
- {String(!!reg().options.preventDefault)}
517
+ {String(!!liveReg().options.preventDefault)}
473
518
  </span>
474
519
  </div>
475
520
  <div class={styles().optionRow}>
476
521
  <span class={styles().optionLabel}>stopPropagation</span>
477
522
  <span
478
523
  class={
479
- reg().options.stopPropagation
524
+ liveReg().options.stopPropagation
480
525
  ? styles().optionValueTrue
481
526
  : styles().optionValueFalse
482
527
  }
483
528
  >
484
- {String(!!reg().options.stopPropagation)}
529
+ {String(!!liveReg().options.stopPropagation)}
485
530
  </span>
486
531
  </div>
487
532
  <div class={styles().optionRow}>
488
533
  <span class={styles().optionLabel}>ignoreInputs</span>
489
534
  <span
490
535
  class={
491
- reg().options.ignoreInputs !== false
536
+ liveReg().options.ignoreInputs !== false
492
537
  ? styles().optionValueTrue
493
538
  : styles().optionValueFalse
494
539
  }
495
540
  >
496
- {String(reg().options.ignoreInputs !== false)}
541
+ {String(liveReg().options.ignoreInputs !== false)}
497
542
  </span>
498
543
  </div>
499
544
  <div class={styles().optionRow}>