@tanstack/hotkeys-devtools 0.9.0 → 1.1.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 +15 -1
- package/dist/HotkeysContextProvider.js +1 -2
- package/dist/_registrations.js +47 -0
- package/dist/components/ActionButtons.js +2 -3
- package/dist/components/DetailsPanel.js +317 -325
- package/dist/components/HeldKeysTopbar.js +5 -3
- package/dist/components/HotkeyList.js +167 -196
- package/dist/components/Shell.js +5 -4
- package/dist/components/index.js +1 -2
- package/dist/core.d.ts +3 -6
- package/dist/core.js +1 -2
- package/dist/index.d.ts +2 -4
- package/dist/index.js +1 -2
- package/dist/sequence-progress.js +1 -2
- package/dist/styles/tokens.js +1 -2
- package/dist/styles/use-styles.js +5 -4
- package/package.json +11 -11
- package/dist/HotkeysContextProvider.js.map +0 -1
- package/dist/components/ActionButtons.js.map +0 -1
- package/dist/components/DetailsPanel.js.map +0 -1
- package/dist/components/HeldKeysTopbar.js.map +0 -1
- package/dist/components/HotkeyList.js.map +0 -1
- package/dist/components/Shell.js.map +0 -1
- package/dist/components/index.js.map +0 -1
- package/dist/core.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/sequence-progress.js.map +0 -1
- package/dist/styles/tokens.js.map +0 -1
- package/dist/styles/use-styles.js.map +0 -1
- package/src/HotkeysContextProvider.tsx +0 -130
- package/src/components/ActionButtons.tsx +0 -38
- package/src/components/DetailsPanel.tsx +0 -829
- package/src/components/HeldKeysTopbar.tsx +0 -46
- package/src/components/HotkeyList.tsx +0 -565
- package/src/components/Shell.tsx +0 -171
- package/src/components/index.tsx +0 -19
- package/src/core.tsx +0 -11
- package/src/index.ts +0 -11
- package/src/production.ts +0 -5
- package/src/sequence-progress.ts +0 -29
- package/src/styles/tokens.ts +0 -305
- package/src/styles/use-styles.ts +0 -687
|
@@ -1 +0,0 @@
|
|
|
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 searchContainer: css`\n position: relative;\n padding: ${size[2]};\n padding-bottom: 0;\n flex-shrink: 0;\n `,\n searchInput: css`\n width: 100%;\n padding: ${size[1.5]} ${size[2]};\n padding-right: ${size[7]};\n font-size: ${fontSize.xs};\n font-family: ${fontFamily.sans};\n color: ${t(colors.gray[900], colors.gray[100])};\n background: ${t(colors.gray[200], colors.darkGray[700])};\n border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n border-radius: ${border.radius.md};\n outline: none;\n box-sizing: border-box;\n\n &::placeholder {\n color: ${t(colors.gray[500], colors.gray[500])};\n }\n\n &:focus {\n border-color: ${t(colors.blue[500], colors.blue[400])};\n box-shadow: 0 0 0 1px\n ${t(colors.blue[500] + alpha[30], colors.blue[400] + alpha[30])};\n }\n `,\n searchClear: css`\n position: absolute;\n right: ${size[3]};\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: ${t(colors.gray[500], colors.gray[400])};\n font-size: ${fontSize.md};\n cursor: pointer;\n padding: ${size[1]};\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: ${t(colors.gray[700], colors.gray[200])};\n }\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-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 display: flex;\n align-items: center;\n gap: ${size[1.5]};\n min-width: 0;\n `,\n hotkeyLabelKeys: css`\n font-family: ${fontFamily.mono};\n flex-shrink: 0;\n `,\n hotkeyLabelName: css`\n font-family: ${fontFamily.sans};\n color: ${t(colors.gray[500], colors.gray[400])};\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\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 rowTooltipText: css`\n position: absolute;\n bottom: 100%;\n left: ${size[2]};\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 font-family: ${fontFamily.sans};\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-bottom: ${size[1]};\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\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,130 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
createContext,
|
|
3
|
-
createEffect,
|
|
4
|
-
createSignal,
|
|
5
|
-
onCleanup,
|
|
6
|
-
useContext,
|
|
7
|
-
} from 'solid-js'
|
|
8
|
-
import {
|
|
9
|
-
HotkeyManager,
|
|
10
|
-
KeyStateTracker,
|
|
11
|
-
SequenceManager,
|
|
12
|
-
} from '@tanstack/hotkeys'
|
|
13
|
-
import { needsSequenceProgressClock } from './sequence-progress'
|
|
14
|
-
import type { Accessor } from 'solid-js'
|
|
15
|
-
import type {
|
|
16
|
-
HotkeyRegistration,
|
|
17
|
-
SequenceRegistrationView,
|
|
18
|
-
} from '@tanstack/hotkeys'
|
|
19
|
-
|
|
20
|
-
interface HotkeysDevtoolsContextType {
|
|
21
|
-
registrations: Accessor<Array<HotkeyRegistration>>
|
|
22
|
-
sequenceRegistrations: Accessor<Array<SequenceRegistrationView>>
|
|
23
|
-
heldKeys: Accessor<Array<string>>
|
|
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>
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({
|
|
30
|
-
registrations: () => [],
|
|
31
|
-
sequenceRegistrations: () => [],
|
|
32
|
-
heldKeys: () => [],
|
|
33
|
-
heldCodes: () => ({}),
|
|
34
|
-
sequenceProgressNow: () => Date.now(),
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
export function HotkeysContextProvider(props: { children: any }) {
|
|
38
|
-
const manager = HotkeyManager.getInstance()
|
|
39
|
-
const sequenceManager = SequenceManager.getInstance()
|
|
40
|
-
const tracker = KeyStateTracker.getInstance()
|
|
41
|
-
|
|
42
|
-
// Create local signals that will be updated by subscriptions
|
|
43
|
-
const [registrations, setRegistrations] = createSignal<
|
|
44
|
-
Array<HotkeyRegistration>
|
|
45
|
-
>(Array.from(manager.registrations.state.values()))
|
|
46
|
-
const [sequenceRegistrations, setSequenceRegistrations] = createSignal<
|
|
47
|
-
Array<SequenceRegistrationView>
|
|
48
|
-
>(Array.from(sequenceManager.registrations.state.values()))
|
|
49
|
-
const [heldKeys, setHeldKeys] = createSignal<Array<string>>(
|
|
50
|
-
tracker.store.state.heldKeys,
|
|
51
|
-
)
|
|
52
|
-
const [heldCodes, setHeldCodes] = createSignal<Record<string, string>>(
|
|
53
|
-
tracker.store.state.heldCodes,
|
|
54
|
-
)
|
|
55
|
-
|
|
56
|
-
// Subscribe to HotkeyManager registrations store
|
|
57
|
-
createEffect(() => {
|
|
58
|
-
const unsubscribe = manager.registrations.subscribe(() => {
|
|
59
|
-
setRegistrations(Array.from(manager.registrations.state.values()))
|
|
60
|
-
}).unsubscribe
|
|
61
|
-
onCleanup(() => unsubscribe())
|
|
62
|
-
})
|
|
63
|
-
|
|
64
|
-
// Subscribe to SequenceManager registrations store
|
|
65
|
-
createEffect(() => {
|
|
66
|
-
const unsubscribe = sequenceManager.registrations.subscribe(() => {
|
|
67
|
-
setSequenceRegistrations(
|
|
68
|
-
Array.from(sequenceManager.registrations.state.values()),
|
|
69
|
-
)
|
|
70
|
-
}).unsubscribe
|
|
71
|
-
onCleanup(() => unsubscribe())
|
|
72
|
-
})
|
|
73
|
-
|
|
74
|
-
// Subscribe to KeyStateTracker store
|
|
75
|
-
createEffect(() => {
|
|
76
|
-
const unsubscribe = tracker.store.subscribe(() => {
|
|
77
|
-
setHeldKeys(tracker.store.state.heldKeys)
|
|
78
|
-
setHeldCodes(tracker.store.state.heldCodes)
|
|
79
|
-
}).unsubscribe
|
|
80
|
-
onCleanup(() => unsubscribe())
|
|
81
|
-
})
|
|
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
|
-
|
|
113
|
-
return (
|
|
114
|
-
<HotkeysDevtoolsContext.Provider
|
|
115
|
-
value={{
|
|
116
|
-
registrations,
|
|
117
|
-
sequenceRegistrations,
|
|
118
|
-
heldKeys,
|
|
119
|
-
heldCodes,
|
|
120
|
-
sequenceProgressNow,
|
|
121
|
-
}}
|
|
122
|
-
>
|
|
123
|
-
{props.children}
|
|
124
|
-
</HotkeysDevtoolsContext.Provider>
|
|
125
|
-
)
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
export function useHotkeysDevtoolsState() {
|
|
129
|
-
return useContext(HotkeysDevtoolsContext)
|
|
130
|
-
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { HotkeyManager, SequenceManager } from '@tanstack/hotkeys'
|
|
2
|
-
import { useStyles } from '../styles/use-styles'
|
|
3
|
-
import type {
|
|
4
|
-
HotkeyRegistration,
|
|
5
|
-
SequenceRegistrationView,
|
|
6
|
-
} from '@tanstack/hotkeys'
|
|
7
|
-
|
|
8
|
-
type ActionButtonsProps = {
|
|
9
|
-
registration: HotkeyRegistration | SequenceRegistrationView
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
function isSequenceRegistration(
|
|
13
|
-
reg: HotkeyRegistration | SequenceRegistrationView,
|
|
14
|
-
): reg is SequenceRegistrationView {
|
|
15
|
-
return 'sequence' in reg && Array.isArray(reg.sequence)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export function ActionButtons(props: ActionButtonsProps) {
|
|
19
|
-
const styles = useStyles()
|
|
20
|
-
|
|
21
|
-
const handleTrigger = () => {
|
|
22
|
-
const reg = props.registration
|
|
23
|
-
if (isSequenceRegistration(reg)) {
|
|
24
|
-
SequenceManager.getInstance().triggerSequence(reg.id)
|
|
25
|
-
} else {
|
|
26
|
-
HotkeyManager.getInstance().triggerRegistration(reg.id)
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
<div class={styles().actionsRow}>
|
|
32
|
-
<button class={styles().actionButton} onMouseDown={handleTrigger}>
|
|
33
|
-
<span class={styles().actionDotGreen} />
|
|
34
|
-
Trigger
|
|
35
|
-
</button>
|
|
36
|
-
</div>
|
|
37
|
-
)
|
|
38
|
-
}
|