@tanstack/hotkeys-devtools 0.4.4 → 0.7.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.
- package/README.md +1 -1
- package/dist/HotkeysContextProvider.js +25 -2
- package/dist/HotkeysContextProvider.js.map +1 -1
- package/dist/components/DetailsPanel.js +367 -217
- package/dist/components/DetailsPanel.js.map +1 -1
- package/dist/components/HeldKeysTopbar.js +7 -4
- package/dist/components/HeldKeysTopbar.js.map +1 -1
- package/dist/components/HotkeyList.js +229 -195
- package/dist/components/HotkeyList.js.map +1 -1
- package/dist/components/Shell.js +100 -43
- package/dist/components/Shell.js.map +1 -1
- package/dist/sequence-progress.js +20 -0
- package/dist/sequence-progress.js.map +1 -0
- package/dist/styles/use-styles.js +107 -2
- package/dist/styles/use-styles.js.map +1 -1
- package/package.json +2 -2
- package/src/HotkeysContextProvider.tsx +35 -0
- package/src/components/DetailsPanel.tsx +201 -44
- package/src/components/HeldKeysTopbar.tsx +9 -5
- package/src/components/HotkeyList.tsx +187 -151
- package/src/components/Shell.tsx +101 -34
- package/src/sequence-progress.ts +29 -0
- package/src/styles/use-styles.ts +109 -2
|
@@ -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: -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 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 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 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.
|
|
3
|
+
"version": "0.7.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.
|
|
40
|
+
"@tanstack/hotkeys": "0.6.0"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@tanstack/devtools-ui": "^0.5.1",
|
|
@@ -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}
|
|
@@ -1,15 +1,64 @@
|
|
|
1
1
|
import { For, Show, createMemo } from 'solid-js'
|
|
2
|
-
import
|
|
2
|
+
import clsx from 'clsx'
|
|
3
|
+
import {
|
|
4
|
+
detectPlatform,
|
|
5
|
+
formatForDisplay,
|
|
6
|
+
formatHotkeySequence,
|
|
7
|
+
normalizeHotkey,
|
|
8
|
+
normalizeHotkeyFromParsed,
|
|
9
|
+
parseHotkey,
|
|
10
|
+
} from '@tanstack/hotkeys'
|
|
3
11
|
import { useStyles } from '../styles/use-styles'
|
|
4
12
|
import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
|
|
13
|
+
import { effectiveSequenceMatchedSteps } from '../sequence-progress'
|
|
5
14
|
import { ActionButtons } from './ActionButtons'
|
|
6
15
|
import type {
|
|
7
16
|
ConflictBehavior,
|
|
17
|
+
FormatDisplayOptions,
|
|
8
18
|
HotkeyRegistration,
|
|
9
19
|
HotkeySequence,
|
|
20
|
+
ParsedHotkey,
|
|
21
|
+
RegisterableHotkey,
|
|
10
22
|
SequenceRegistrationView,
|
|
11
23
|
} from '@tanstack/hotkeys'
|
|
12
24
|
|
|
25
|
+
const PLATFORM_ROWS = [
|
|
26
|
+
{ id: 'mac' as const, label: 'macOS' },
|
|
27
|
+
{ id: 'windows' as const, label: 'Windows' },
|
|
28
|
+
{ id: 'linux' as const, label: 'Linux' },
|
|
29
|
+
]
|
|
30
|
+
|
|
31
|
+
function KeyBreakdownPlatformTable(props: {
|
|
32
|
+
getParsed: () => ParsedHotkey
|
|
33
|
+
/** Platform used when the parsed hotkey was produced (registration `options.platform`). */
|
|
34
|
+
getCanonicalPlatform: () => 'mac' | 'windows' | 'linux'
|
|
35
|
+
styles: ReturnType<typeof useStyles>
|
|
36
|
+
}) {
|
|
37
|
+
const st = () => props.styles()
|
|
38
|
+
return (
|
|
39
|
+
<div class={st().platformBreakdown}>
|
|
40
|
+
<For each={PLATFORM_ROWS}>
|
|
41
|
+
{(row) => (
|
|
42
|
+
<div class={st().platformBreakdownRow}>
|
|
43
|
+
<span class={st().platformBreakdownLabel}>{row.label}</span>
|
|
44
|
+
<span class={st().platformBreakdownPretty}>
|
|
45
|
+
{formatForDisplay(
|
|
46
|
+
normalizeHotkeyFromParsed(
|
|
47
|
+
props.getParsed(),
|
|
48
|
+
props.getCanonicalPlatform(),
|
|
49
|
+
),
|
|
50
|
+
{
|
|
51
|
+
platform: row.id,
|
|
52
|
+
},
|
|
53
|
+
)}
|
|
54
|
+
</span>
|
|
55
|
+
</div>
|
|
56
|
+
)}
|
|
57
|
+
</For>
|
|
58
|
+
</div>
|
|
59
|
+
)
|
|
60
|
+
}
|
|
61
|
+
|
|
13
62
|
function sequenceKey(sequence: Array<string>): string {
|
|
14
63
|
return sequence.join('|')
|
|
15
64
|
}
|
|
@@ -143,7 +192,10 @@ function HotkeyDetails(props: {
|
|
|
143
192
|
| 'conflictItemError'
|
|
144
193
|
| 'conflictItemScope'
|
|
145
194
|
getConflictLabel: (b: ConflictBehavior, same: boolean) => string
|
|
146
|
-
formatForDisplay: (
|
|
195
|
+
formatForDisplay: (
|
|
196
|
+
hotkey: RegisterableHotkey,
|
|
197
|
+
options?: FormatDisplayOptions,
|
|
198
|
+
) => string
|
|
147
199
|
styles: ReturnType<typeof useStyles>
|
|
148
200
|
}) {
|
|
149
201
|
const reg = () => props.registration
|
|
@@ -161,16 +213,11 @@ function HotkeyDetails(props: {
|
|
|
161
213
|
const conflictBehavior = (): ConflictBehavior =>
|
|
162
214
|
reg().options.conflictBehavior ?? 'warn'
|
|
163
215
|
|
|
164
|
-
const
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
if (p.alt) parts.push('Alt')
|
|
170
|
-
if (p.meta) parts.push('Meta')
|
|
171
|
-
parts.push(p.key)
|
|
172
|
-
return parts
|
|
173
|
-
})
|
|
216
|
+
const registrationPlatform = () => reg().options.platform ?? detectPlatform()
|
|
217
|
+
|
|
218
|
+
const rawModParts = createMemo(() =>
|
|
219
|
+
normalizeHotkeyFromParsed(parsed(), registrationPlatform()).split('+'),
|
|
220
|
+
)
|
|
174
221
|
|
|
175
222
|
const styles = props.styles
|
|
176
223
|
|
|
@@ -195,17 +242,31 @@ function HotkeyDetails(props: {
|
|
|
195
242
|
<div class={styles().detailsGrid}>
|
|
196
243
|
<div class={styles().detailSection}>
|
|
197
244
|
<div class={styles().detailSectionHeader}>Key Breakdown</div>
|
|
198
|
-
<div class={styles().
|
|
199
|
-
<
|
|
200
|
-
{(
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
245
|
+
<div class={styles().keyBreakdownSplitRow}>
|
|
246
|
+
<div class={styles().keyBreakdownSplitLeft}>
|
|
247
|
+
<div class={styles().keyBreakdown}>
|
|
248
|
+
<For each={rawModParts()}>
|
|
249
|
+
{(part, i) => (
|
|
250
|
+
<>
|
|
251
|
+
<Show when={i() > 0}>
|
|
252
|
+
<span class={styles().keyBreakdownPlus}>+</span>
|
|
253
|
+
</Show>
|
|
254
|
+
<span class={styles().keyCapLarge}>{part}</span>
|
|
255
|
+
</>
|
|
256
|
+
)}
|
|
257
|
+
</For>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
<span class={styles().keyBreakdownSplitArrow} aria-hidden="true">
|
|
261
|
+
{'->'}
|
|
262
|
+
</span>
|
|
263
|
+
<div class={styles().keyBreakdownSplitRight}>
|
|
264
|
+
<KeyBreakdownPlatformTable
|
|
265
|
+
getParsed={() => parsed()}
|
|
266
|
+
getCanonicalPlatform={registrationPlatform}
|
|
267
|
+
styles={props.styles}
|
|
268
|
+
/>
|
|
269
|
+
</div>
|
|
209
270
|
</div>
|
|
210
271
|
</div>
|
|
211
272
|
|
|
@@ -364,19 +425,30 @@ function SequenceDetails(props: {
|
|
|
364
425
|
| 'conflictItemScope'
|
|
365
426
|
getConflictLabel: (b: ConflictBehavior, same: boolean) => string
|
|
366
427
|
formatHotkeySequence: (seq: HotkeySequence) => string
|
|
367
|
-
formatForDisplay: (
|
|
428
|
+
formatForDisplay: (
|
|
429
|
+
hotkey: RegisterableHotkey,
|
|
430
|
+
options?: FormatDisplayOptions,
|
|
431
|
+
) => string
|
|
368
432
|
styles: ReturnType<typeof useStyles>
|
|
369
433
|
}) {
|
|
370
434
|
const reg = () => props.registration
|
|
435
|
+
const liveReg = createMemo(
|
|
436
|
+
() =>
|
|
437
|
+
props.state.sequenceRegistrations().find((r) => r.id === reg().id) ??
|
|
438
|
+
reg(),
|
|
439
|
+
)
|
|
440
|
+
const matchedSteps = createMemo(() =>
|
|
441
|
+
effectiveSequenceMatchedSteps(liveReg(), props.state.sequenceProgressNow()),
|
|
442
|
+
)
|
|
371
443
|
const targetConflicts = createMemo(() =>
|
|
372
444
|
props.findSequenceTargetConflicts(
|
|
373
|
-
|
|
445
|
+
liveReg(),
|
|
374
446
|
props.state.sequenceRegistrations(),
|
|
375
447
|
),
|
|
376
448
|
)
|
|
377
449
|
const scopeConflicts = createMemo(() =>
|
|
378
450
|
props.findSequenceScopeConflicts(
|
|
379
|
-
|
|
451
|
+
liveReg(),
|
|
380
452
|
props.state.sequenceRegistrations(),
|
|
381
453
|
),
|
|
382
454
|
)
|
|
@@ -385,7 +457,11 @@ function SequenceDetails(props: {
|
|
|
385
457
|
...scopeConflicts(),
|
|
386
458
|
])
|
|
387
459
|
const conflictBehavior = (): ConflictBehavior =>
|
|
388
|
-
|
|
460
|
+
liveReg().options.conflictBehavior ?? 'warn'
|
|
461
|
+
|
|
462
|
+
const sequenceCanonicalPlatform = createMemo(
|
|
463
|
+
() => liveReg().options.platform ?? detectPlatform(),
|
|
464
|
+
)
|
|
389
465
|
|
|
390
466
|
const styles = props.styles
|
|
391
467
|
|
|
@@ -393,18 +469,48 @@ function SequenceDetails(props: {
|
|
|
393
469
|
<>
|
|
394
470
|
<div class={styles().stateHeader}>
|
|
395
471
|
<div class={styles().stateTitle}>
|
|
396
|
-
{
|
|
472
|
+
<For each={liveReg().sequence}>
|
|
473
|
+
{(step, i) => (
|
|
474
|
+
<span>
|
|
475
|
+
<Show when={i() > 0}> </Show>
|
|
476
|
+
<span
|
|
477
|
+
class={
|
|
478
|
+
i() < matchedSteps()
|
|
479
|
+
? styles().sequenceStepMatched
|
|
480
|
+
: undefined
|
|
481
|
+
}
|
|
482
|
+
>
|
|
483
|
+
{props.formatForDisplay(step)}
|
|
484
|
+
</span>
|
|
485
|
+
</span>
|
|
486
|
+
)}
|
|
487
|
+
</For>
|
|
397
488
|
</div>
|
|
398
489
|
<div class={styles().infoGrid}>
|
|
399
490
|
<div class={styles().infoLabel}>ID</div>
|
|
400
|
-
<div class={styles().infoValueMono}>{
|
|
491
|
+
<div class={styles().infoValueMono}>{liveReg().id}</div>
|
|
401
492
|
<div class={styles().infoLabel}>Sequence</div>
|
|
402
493
|
<div class={styles().infoValueMono}>
|
|
403
|
-
{
|
|
494
|
+
<For each={liveReg().sequence}>
|
|
495
|
+
{(step, i) => (
|
|
496
|
+
<span>
|
|
497
|
+
<Show when={i() > 0}> </Show>
|
|
498
|
+
<span
|
|
499
|
+
class={
|
|
500
|
+
i() < matchedSteps()
|
|
501
|
+
? styles().sequenceStepMatched
|
|
502
|
+
: undefined
|
|
503
|
+
}
|
|
504
|
+
>
|
|
505
|
+
{props.formatForDisplay(step)}
|
|
506
|
+
</span>
|
|
507
|
+
</span>
|
|
508
|
+
)}
|
|
509
|
+
</For>
|
|
404
510
|
</div>
|
|
405
511
|
<div class={styles().infoLabel}>Target</div>
|
|
406
512
|
<div class={styles().infoValueMono}>
|
|
407
|
-
{props.getTargetDescription(
|
|
513
|
+
{props.getTargetDescription(liveReg().target)}
|
|
408
514
|
</div>
|
|
409
515
|
</div>
|
|
410
516
|
</div>
|
|
@@ -413,24 +519,75 @@ function SequenceDetails(props: {
|
|
|
413
519
|
<div class={styles().detailSection}>
|
|
414
520
|
<div class={styles().detailSectionHeader}>Key Breakdown</div>
|
|
415
521
|
<div class={styles().keyBreakdown}>
|
|
416
|
-
<For each={
|
|
522
|
+
<For each={liveReg().sequence}>
|
|
417
523
|
{(step, i) => (
|
|
418
524
|
<>
|
|
419
525
|
<Show when={i() > 0}>
|
|
420
526
|
<span class={styles().keyBreakdownPlus}>→</span>
|
|
421
527
|
</Show>
|
|
422
|
-
<span
|
|
528
|
+
<span
|
|
529
|
+
class={clsx(
|
|
530
|
+
styles().keyCapLarge,
|
|
531
|
+
i() < matchedSteps() && styles().keyCapLargeInProgress,
|
|
532
|
+
)}
|
|
533
|
+
>
|
|
423
534
|
{props.formatForDisplay(step)}
|
|
424
535
|
</span>
|
|
425
536
|
</>
|
|
426
537
|
)}
|
|
427
538
|
</For>
|
|
428
539
|
</div>
|
|
540
|
+
|
|
541
|
+
<div class={styles().keyBreakdownSubHeader}>Each chord</div>
|
|
542
|
+
<For each={liveReg().sequence}>
|
|
543
|
+
{(step, stepIdx) => {
|
|
544
|
+
const stepParsed = () =>
|
|
545
|
+
parseHotkey(step, sequenceCanonicalPlatform())
|
|
546
|
+
const stepRawParts = () =>
|
|
547
|
+
normalizeHotkey(step, sequenceCanonicalPlatform()).split('+')
|
|
548
|
+
return (
|
|
549
|
+
<div class={styles().sequenceChordDetail}>
|
|
550
|
+
<div class={styles().keyBreakdownSubHeader}>
|
|
551
|
+
Step {stepIdx() + 1}
|
|
552
|
+
</div>
|
|
553
|
+
<div class={styles().keyBreakdownSplitRow}>
|
|
554
|
+
<div class={styles().keyBreakdownSplitLeft}>
|
|
555
|
+
<div class={styles().keyBreakdown}>
|
|
556
|
+
<For each={stepRawParts()}>
|
|
557
|
+
{(part, i) => (
|
|
558
|
+
<>
|
|
559
|
+
<Show when={i() > 0}>
|
|
560
|
+
<span class={styles().keyBreakdownPlus}>+</span>
|
|
561
|
+
</Show>
|
|
562
|
+
<span class={styles().keyCapLarge}>{part}</span>
|
|
563
|
+
</>
|
|
564
|
+
)}
|
|
565
|
+
</For>
|
|
566
|
+
</div>
|
|
567
|
+
</div>
|
|
568
|
+
<span
|
|
569
|
+
class={styles().keyBreakdownSplitArrow}
|
|
570
|
+
aria-hidden="true"
|
|
571
|
+
>
|
|
572
|
+
{'->'}
|
|
573
|
+
</span>
|
|
574
|
+
<div class={styles().keyBreakdownSplitRight}>
|
|
575
|
+
<KeyBreakdownPlatformTable
|
|
576
|
+
getParsed={stepParsed}
|
|
577
|
+
getCanonicalPlatform={() => sequenceCanonicalPlatform()}
|
|
578
|
+
styles={props.styles}
|
|
579
|
+
/>
|
|
580
|
+
</div>
|
|
581
|
+
</div>
|
|
582
|
+
</div>
|
|
583
|
+
)
|
|
584
|
+
}}
|
|
585
|
+
</For>
|
|
429
586
|
</div>
|
|
430
587
|
|
|
431
588
|
<div class={styles().detailSection}>
|
|
432
589
|
<div class={styles().detailSectionHeader}>Actions</div>
|
|
433
|
-
<ActionButtons registration={
|
|
590
|
+
<ActionButtons registration={liveReg()} />
|
|
434
591
|
</div>
|
|
435
592
|
|
|
436
593
|
<div class={styles().detailSection}>
|
|
@@ -440,60 +597,60 @@ function SequenceDetails(props: {
|
|
|
440
597
|
<span class={styles().optionLabel}>enabled</span>
|
|
441
598
|
<span
|
|
442
599
|
class={
|
|
443
|
-
|
|
600
|
+
liveReg().options.enabled !== false
|
|
444
601
|
? styles().optionValueTrue
|
|
445
602
|
: styles().optionValueFalse
|
|
446
603
|
}
|
|
447
604
|
>
|
|
448
|
-
{String(
|
|
605
|
+
{String(liveReg().options.enabled !== false)}
|
|
449
606
|
</span>
|
|
450
607
|
</div>
|
|
451
608
|
<div class={styles().optionRow}>
|
|
452
609
|
<span class={styles().optionLabel}>eventType</span>
|
|
453
610
|
<span class={styles().optionValue}>
|
|
454
|
-
{
|
|
611
|
+
{liveReg().options.eventType ?? 'keydown'}
|
|
455
612
|
</span>
|
|
456
613
|
</div>
|
|
457
614
|
<div class={styles().optionRow}>
|
|
458
615
|
<span class={styles().optionLabel}>timeout</span>
|
|
459
616
|
<span class={styles().optionValue}>
|
|
460
|
-
{
|
|
617
|
+
{liveReg().options.timeout ?? 1000}ms
|
|
461
618
|
</span>
|
|
462
619
|
</div>
|
|
463
620
|
<div class={styles().optionRow}>
|
|
464
621
|
<span class={styles().optionLabel}>preventDefault</span>
|
|
465
622
|
<span
|
|
466
623
|
class={
|
|
467
|
-
|
|
624
|
+
liveReg().options.preventDefault
|
|
468
625
|
? styles().optionValueTrue
|
|
469
626
|
: styles().optionValueFalse
|
|
470
627
|
}
|
|
471
628
|
>
|
|
472
|
-
{String(!!
|
|
629
|
+
{String(!!liveReg().options.preventDefault)}
|
|
473
630
|
</span>
|
|
474
631
|
</div>
|
|
475
632
|
<div class={styles().optionRow}>
|
|
476
633
|
<span class={styles().optionLabel}>stopPropagation</span>
|
|
477
634
|
<span
|
|
478
635
|
class={
|
|
479
|
-
|
|
636
|
+
liveReg().options.stopPropagation
|
|
480
637
|
? styles().optionValueTrue
|
|
481
638
|
: styles().optionValueFalse
|
|
482
639
|
}
|
|
483
640
|
>
|
|
484
|
-
{String(!!
|
|
641
|
+
{String(!!liveReg().options.stopPropagation)}
|
|
485
642
|
</span>
|
|
486
643
|
</div>
|
|
487
644
|
<div class={styles().optionRow}>
|
|
488
645
|
<span class={styles().optionLabel}>ignoreInputs</span>
|
|
489
646
|
<span
|
|
490
647
|
class={
|
|
491
|
-
|
|
648
|
+
liveReg().options.ignoreInputs !== false
|
|
492
649
|
? styles().optionValueTrue
|
|
493
650
|
: styles().optionValueFalse
|
|
494
651
|
}
|
|
495
652
|
>
|
|
496
|
-
{String(
|
|
653
|
+
{String(liveReg().options.ignoreInputs !== false)}
|
|
497
654
|
</span>
|
|
498
655
|
</div>
|
|
499
656
|
<div class={styles().optionRow}>
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { For, Show } from 'solid-js'
|
|
2
|
-
import {
|
|
2
|
+
import { detectPlatform, formatForDisplay } from '@tanstack/hotkeys'
|
|
3
3
|
import { useStyles } from '../styles/use-styles'
|
|
4
4
|
import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
|
|
5
|
+
import type { RegisterableHotkey } from '@tanstack/hotkeys'
|
|
5
6
|
|
|
6
7
|
export function HeldKeysBar() {
|
|
7
8
|
const styles = useStyles()
|
|
8
9
|
const state = useHotkeysDevtoolsState()
|
|
10
|
+
const platform = detectPlatform()
|
|
9
11
|
|
|
10
12
|
return (
|
|
11
13
|
<div class={styles().heldKeysBar}>
|
|
@@ -18,12 +20,14 @@ export function HeldKeysBar() {
|
|
|
18
20
|
<For each={state.heldKeys()}>
|
|
19
21
|
{(key) => {
|
|
20
22
|
const code = () => state.heldCodes()[key]
|
|
21
|
-
const label = () =>
|
|
23
|
+
const label = () =>
|
|
24
|
+
formatForDisplay(key as RegisterableHotkey, {
|
|
25
|
+
platform,
|
|
26
|
+
useSymbols: true,
|
|
27
|
+
})
|
|
22
28
|
const codeLabel = () => {
|
|
23
29
|
const c = code()
|
|
24
|
-
return c
|
|
25
|
-
? formatKeyForDebuggingDisplay(c, { source: 'code' })
|
|
26
|
-
: undefined
|
|
30
|
+
return c || undefined
|
|
27
31
|
}
|
|
28
32
|
return (
|
|
29
33
|
<span class={styles().keyCap}>
|