@tanstack/hotkeys-devtools 0.0.1 → 0.1.0

package/dist/styles/use-styles.js

@@ -0,0 +1,496 @@
+import { tokens } from "./tokens.js";
+import { createEffect, createSignal } from "solid-js";
+import { useTheme } from "@tanstack/devtools-ui";
+import * as goober from "goober";
+
+//#region src/styles/use-styles.ts
+const stylesFactory = (theme) => {
+	const { colors, font, size, alpha, border } = tokens;
+	const { fontFamily, size: fontSize } = font;
+	const css = goober.css;
+	const t = (light, dark) => theme === "light" ? light : dark;
+	return {
+		mainContainer: css`
+      display: flex;
+      flex-direction: column;
+      padding: ${size[2]};
+      padding-top: 0;
+      margin-top: ${size[2]};
+    `,
+		heldKeysBar: css`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border-radius: ${border.radius.lg};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      display: flex;
+      align-items: center;
+      gap: ${size[3]};
+      padding: ${size[3]} ${size[3]};
+      flex-shrink: 0;
+      min-height: 64px;
+      margin-bottom: ${size[2]};
+    `,
+		heldKeysBarHeader: css`
+      font-size: ${fontSize.sm};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      flex-shrink: 0;
+    `,
+		heldKeysBarList: css`
+      display: flex;
+      align-items: center;
+      gap: ${size[1.5]};
+      flex-wrap: wrap;
+      flex: 1;
+      min-width: 0;
+    `,
+		panelsContainer: css`
+      display: flex;
+    `,
+		dragHandle: css`
+      width: 8px;
+      background: ${t(colors.gray[300], colors.darkGray[600])};
+      cursor: col-resize;
+      position: relative;
+      transition: all 0.2s ease;
+      user-select: none;
+      pointer-events: all;
+      margin: 0 ${size[1]};
+      border-radius: 2px;
+
+      &:hover {
+        background: ${t(colors.blue[600], colors.blue[500])};
+        margin: 0 ${size[1]};
+      }
+
+      &.dragging {
+        background: ${t(colors.blue[700], colors.blue[600])};
+        margin: 0 ${size[1]};
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 2px;
+        height: 20px;
+        background: ${t(colors.gray[400], colors.darkGray[400])};
+        border-radius: 1px;
+        pointer-events: none;
+      }
+
+      &:hover::after,
+      &.dragging::after {
+        background: ${t(colors.blue[500], colors.blue[300])};
+      }
+    `,
+		keyCap: css`
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-width: 36px;
+      padding: ${size[1]} ${size[2]};
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.sm};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.gray[800], colors.gray[100])};
+      background: ${t(colors.white, colors.darkGray[600])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[400])};
+      border-bottom-width: 2px;
+      border-radius: ${border.radius.sm};
+      box-shadow: ${tokens.shadow.xs()};
+      text-transform: capitalize;
+      white-space: nowrap;
+      line-height: 1.2;
+    `,
+		keyCapCode: css`
+      font-size: ${fontSize["2xs"]};
+      font-weight: ${font.weight.normal};
+      color: ${t(colors.gray[500], colors.gray[400])};
+      text-transform: none;
+      line-height: 1;
+      margin-top: 2px;
+    `,
+		noKeysHeld: css`
+      font-size: ${fontSize.sm};
+      color: ${t(colors.gray[400], colors.gray[600])};
+      font-style: italic;
+      text-align: center;
+      padding: ${size[1]};
+    `,
+		leftPanel: css`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border-radius: ${border.radius.lg};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+    `,
+		rightPanel: css`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border-radius: ${border.radius.lg};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    `,
+		panelHeader: css`
+      font-size: ${fontSize.md};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.blue[700], colors.blue[400])};
+      padding: ${size[2]};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      flex-shrink: 0;
+    `,
+		hotkeyList: css`
+      padding: ${size[1]};
+    `,
+		hotkeyRow: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: ${size[2]};
+      margin-bottom: ${size[1]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border-radius: ${border.radius.md};
+      cursor: pointer;
+      transition: all 0.2s ease;
+      border: 1px solid transparent;
+
+      &:hover {
+        background: ${t(colors.gray[300], colors.darkGray[600])};
+        border-color: ${t(colors.gray[400], colors.darkGray[500])};
+      }
+    `,
+		hotkeyRowSelected: css`
+      background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};
+      border-color: ${t(colors.blue[600], colors.blue[500])};
+      box-shadow: 0 0 0 1px
+        ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};
+    `,
+		hotkeyRowTriggered: css`
+      animation: hotkey-pulse 0.6s ease-out;
+
+      @keyframes hotkey-pulse {
+        0% {
+          border-color: ${t(colors.blue[500], colors.blue[400])};
+          box-shadow: 0 0 0 2px
+            ${t(colors.blue[500] + alpha[40], colors.blue[400] + alpha[40])};
+        }
+        100% {
+          border-color: transparent;
+          box-shadow: 0 0 0 0px
+            ${t(colors.blue[500] + "00", colors.blue[400] + "00")};
+        }
+      }
+    `,
+		hotkeyLabel: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+		hotkeyBadges: css`
+      display: flex;
+      gap: ${size[1]};
+      margin-left: ${size[1]};
+      flex-shrink: 0;
+      overflow: visible;
+    `,
+		badge: css`
+      font-size: ${fontSize["2xs"]};
+      padding: ${size[.5]} ${size[1]};
+      border-radius: ${border.radius.sm};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      white-space: nowrap;
+    `,
+		badgeEnabled: css`
+      color: ${t(colors.green[700], colors.green[400])};
+      background: ${t(colors.green[100], colors.green[900] + alpha[30])};
+    `,
+		badgeDisabled: css`
+      color: ${t(colors.red[700], colors.red[400])};
+      background: ${t(colors.red[100], colors.red[900] + alpha[30])};
+    `,
+		badgeKeydown: css`
+      color: ${t(colors.purple[700], colors.purple[400])};
+      background: ${t(colors.purple[100], colors.purple[900] + alpha[30])};
+    `,
+		badgeKeyup: css`
+      color: ${t(colors.teal[700], colors.teal[400])};
+      background: ${t(colors.teal[100], colors.teal[900] + alpha[30])};
+    `,
+		badgeTarget: css`
+      color: ${t(colors.gray[700], colors.gray[300])};
+      background: ${t(colors.gray[200], colors.darkGray[600])};
+    `,
+		badgeConflict: css`
+      color: ${t(colors.yellow[700], colors.yellow[400])};
+      background: ${t(colors.yellow[100], colors.yellow[900] + alpha[30])};
+    `,
+		badgeError: css`
+      color: ${t(colors.red[700], colors.red[400])};
+      background: ${t(colors.red[100], colors.red[900] + alpha[30])};
+    `,
+		badgeAllow: css`
+      color: ${t(colors.gray[600], colors.gray[400])};
+      background: ${t(colors.gray[200], colors.darkGray[600])};
+    `,
+		badgeInfo: css`
+      color: ${t(colors.blue[700], colors.blue[400])};
+      background: ${t(colors.blue[100], colors.blue[900] + alpha[30])};
+    `,
+		stateDetails: css`
+      padding: ${size[2]};
+    `,
+		stateHeader: css`
+      margin-bottom: ${size[2]};
+      padding-bottom: ${size[2]};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+    `,
+		stateTitle: css`
+      font-size: ${fontSize.md};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.blue[700], colors.blue[400])};
+      margin-bottom: ${size[1]};
+    `,
+		detailsGrid: css`
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: ${size[2]};
+      align-items: start;
+    `,
+		detailSection: css`
+      background: ${t(colors.white, colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+      border-radius: ${border.radius.md};
+      padding: ${size[2]};
+    `,
+		detailSectionHeader: css`
+      font-size: ${fontSize.sm};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.gray[800], colors.gray[200])};
+      margin-bottom: ${size[1]};
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    `,
+		infoGrid: css`
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: ${size[1]};
+      row-gap: ${size[1]};
+      align-items: center;
+    `,
+		infoLabel: css`
+      color: ${t(colors.gray[600], colors.gray[400])};
+      font-size: ${fontSize.xs};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    `,
+		infoValueMono: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      word-break: break-all;
+    `,
+		actionsRow: css`
+      display: flex;
+      flex-wrap: wrap;
+      gap: ${size[2]};
+    `,
+		actionButton: css`
+      display: inline-flex;
+      align-items: center;
+      gap: ${size[1]};
+      padding: ${size[1]} ${size[2]};
+      border-radius: ${border.radius.md};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};
+      background: ${t(colors.gray[200], colors.darkGray[600])};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      font-size: ${fontSize.xs};
+      cursor: pointer;
+      user-select: none;
+      transition:
+        background 0.15s,
+        border-color 0.15s;
+      &:hover {
+        background: ${t(colors.gray[300], colors.darkGray[500])};
+        border-color: ${t(colors.gray[400], colors.darkGray[400])};
+      }
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        &:hover {
+          background: ${t(colors.gray[200], colors.darkGray[600])};
+          border-color: ${t(colors.gray[300], colors.darkGray[500])};
+        }
+      }
+    `,
+		actionDotGreen: css`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.green[400]};
+    `,
+		noSelection: css`
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${t(colors.gray[500], colors.gray[500])};
+      font-style: italic;
+      text-align: center;
+      padding: ${size[4]};
+    `,
+		keyBreakdown: css`
+      display: flex;
+      flex-wrap: wrap;
+      gap: ${size[1]};
+      align-items: center;
+    `,
+		keyBreakdownPlus: css`
+      color: ${t(colors.gray[500], colors.gray[400])};
+      font-size: ${fontSize.sm};
+    `,
+		keyCapLarge: css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 36px;
+      padding: ${size[1]} ${size[2]};
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.sm};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.gray[800], colors.gray[100])};
+      background: ${t(colors.white, colors.darkGray[600])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[400])};
+      border-bottom-width: 3px;
+      border-radius: ${border.radius.md};
+      box-shadow: ${tokens.shadow.sm()};
+      text-transform: capitalize;
+      white-space: nowrap;
+    `,
+		conflictList: css`
+      display: flex;
+      flex-direction: column;
+      gap: ${size[1]};
+    `,
+		conflictItem: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.yellow[700], colors.yellow[400])};
+      padding: ${size[1]} ${size[2]};
+      background: ${t(colors.yellow[50], colors.yellow[900] + alpha[20])};
+      border-radius: ${border.radius.sm};
+      border: 1px solid ${t(colors.yellow[200], colors.yellow[800] + alpha[30])};
+    `,
+		conflictItemAllow: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      padding: ${size[1]} ${size[2]};
+      background: ${t(colors.gray[100], colors.darkGray[700])};
+      border-radius: ${border.radius.sm};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+    `,
+		conflictItemError: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.red[700], colors.red[400])};
+      padding: ${size[1]} ${size[2]};
+      background: ${t(colors.red[50], colors.red[900] + alpha[20])};
+      border-radius: ${border.radius.sm};
+      border: 1px solid ${t(colors.red[200], colors.red[900] + alpha[30])};
+    `,
+		conflictItemScope: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.blue[700], colors.blue[400])};
+      padding: ${size[1]} ${size[2]};
+      background: ${t(colors.blue[50], colors.blue[900] + alpha[20])};
+      border-radius: ${border.radius.sm};
+      border: 1px solid ${t(colors.blue[200], colors.blue[800] + alpha[30])};
+    `,
+		optionRow: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: ${size[1]} 0;
+      font-size: ${fontSize.xs};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[600])};
+      &:last-child {
+        border-bottom: none;
+      }
+    `,
+		optionLabel: css`
+      color: ${t(colors.gray[600], colors.gray[400])};
+    `,
+		optionValue: css`
+      font-family: ${fontFamily.mono};
+      color: ${t(colors.gray[900], colors.gray[100])};
+    `,
+		optionValueTrue: css`
+      font-family: ${fontFamily.mono};
+      color: ${t(colors.green[600], colors.green[400])};
+    `,
+		optionValueFalse: css`
+      font-family: ${fontFamily.mono};
+      color: ${t(colors.red[600], colors.red[400])};
+    `,
+		tooltip: css`
+      position: relative;
+      &:hover > [data-tooltip] {
+        opacity: 1;
+        visibility: visible;
+      }
+    `,
+		tooltipText: css`
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: ${size[1]} ${size[1.5]};
+      background: ${t(colors.gray[800], colors.darkGray[500])};
+      color: ${t(colors.white, colors.gray[100])};
+      font-size: ${fontSize["2xs"]};
+      border-radius: ${border.radius.sm};
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      visibility: hidden;
+      transition:
+        opacity 0.15s,
+        visibility 0.15s;
+      z-index: ${tokens.zIndices.tooltip};
+      margin-top: ${size[1]};
+    `,
+		triggerCount: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize["2xs"]};
+      color: ${t(colors.gray[500], colors.gray[400])};
+      margin-left: ${size[1]};
+      flex-shrink: 0;
+    `
+	};
+};
+function useStyles() {
+	const { theme } = useTheme();
+	const [styles, setStyles] = createSignal(stylesFactory(theme()));
+	createEffect(() => {
+		setStyles(stylesFactory(theme()));
+	});
+	return styles;
+}
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=use-styles.js.map

package/dist/styles/use-styles.js.map

@@ -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    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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"}

package/package.json

@@ -1,10 +1,62 @@
 {
   "name": "@tanstack/hotkeys-devtools",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @tanstack/hotkeys-devtools",
+  "version": "0.1.0",
+  "description": "Devtools for TanStack Hotkeys",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/hotkeys.git",
+    "directory": "packages/hotkeys-devtools"
+  },
+  "homepage": "https://tanstack.com/hotkeys",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
-}
+    "tanstack",
+    "keys",
+    "devtools",
+    "hotkeys",
+    "keyboard"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./production": "./dist/production.js",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist/",
+    "src"
+  ],
+  "peerDependencies": {
+    "@tanstack/hotkeys": "0.1.0"
+  },
+  "dependencies": {
+    "@tanstack/devtools-ui": "^0.4.4",
+    "@tanstack/devtools-utils": "^0.3.0",
+    "clsx": "^2.1.1",
+    "goober": "^2.1.18",
+    "solid-js": "^1.9.11"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "build": "tsdown"
+  }
+}

package/src/HotkeysContextProvider.tsx

@@ -0,0 +1,67 @@
+import {
+  createContext,
+  createEffect,
+  createSignal,
+  onCleanup,
+  useContext,
+} from 'solid-js'
+import { HotkeyManager, KeyStateTracker } from '@tanstack/hotkeys'
+import type { Accessor } from 'solid-js'
+import type { HotkeyRegistration } from '@tanstack/hotkeys'
+
+interface HotkeysDevtoolsContextType {
+  registrations: Accessor<Array<HotkeyRegistration>>
+  heldKeys: Accessor<Array<string>>
+  heldCodes: Accessor<Record<string, string>>
+}
+
+const HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({
+  registrations: () => [],
+  heldKeys: () => [],
+  heldCodes: () => ({}),
+})
+
+export function HotkeysContextProvider(props: { children: any }) {
+  const manager = HotkeyManager.getInstance()
+  const tracker = KeyStateTracker.getInstance()
+
+  // Create local signals that will be updated by subscriptions
+  const [registrations, setRegistrations] = createSignal<
+    Array<HotkeyRegistration>
+  >(Array.from(manager.registrations.state.values()))
+  const [heldKeys, setHeldKeys] = createSignal<Array<string>>(
+    tracker.store.state.heldKeys,
+  )
+  const [heldCodes, setHeldCodes] = createSignal<Record<string, string>>(
+    tracker.store.state.heldCodes,
+  )
+
+  // Subscribe to HotkeyManager registrations store
+  createEffect(() => {
+    const unsubscribe = manager.registrations.subscribe(() => {
+      setRegistrations(Array.from(manager.registrations.state.values()))
+    })
+    onCleanup(() => unsubscribe())
+  })
+
+  // Subscribe to KeyStateTracker store
+  createEffect(() => {
+    const unsubscribe = tracker.store.subscribe(() => {
+      setHeldKeys(tracker.store.state.heldKeys)
+      setHeldCodes(tracker.store.state.heldCodes)
+    })
+    onCleanup(() => unsubscribe())
+  })
+
+  return (
+    <HotkeysDevtoolsContext.Provider
+      value={{ registrations, heldKeys, heldCodes }}
+    >
+      {props.children}
+    </HotkeysDevtoolsContext.Provider>
+  )
+}
+
+export function useHotkeysDevtoolsState() {
+  return useContext(HotkeysDevtoolsContext)
+}

package/src/HotkeysDevtools.tsx

@@ -0,0 +1,10 @@
+import { HotkeysContextProvider } from './HotkeysContextProvider'
+import { Shell } from './components/Shell'
+
+export default function HotkeysDevtools() {
+  return (
+    <HotkeysContextProvider>
+      <Shell />
+    </HotkeysContextProvider>
+  )
+}