@tanstack/hotkeys-devtools 0.4.4 → 0.7.0

package/src/styles/use-styles.ts

@@ -10,12 +10,33 @@ const stylesFactory = (theme: 'light' | 'dark') => {
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
   return {
+    /** Full-height flex child so MainPanel gets a bounded height from the portal */
+    shellRoot: css`
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      height: 100%;
+      flex: 1;
+      overflow: hidden;
+    `,
+    /** Overrides devtools-ui MainPanel (overflow-y: auto) so inner columns scroll independently */
+    mainPanelShell: css`
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0%;
+      min-height: 0;
+      height: auto;
+      overflow: hidden !important;
+    `,
     mainContainer: css`
       display: flex;
       flex-direction: column;
+      flex: 1 1 0%;
+      min-height: 0;
+      overflow: hidden;
       padding: ${size[2]};
       padding-top: 0;
-      margin-top: ${size[2]};
+      margin-top: -8px;
     `,
     heldKeysBar: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
@@ -26,7 +47,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       gap: ${size[3]};
       padding: ${size[3]} ${size[3]};
       flex-shrink: 0;
-      min-height: 64px;
+      min-height: 72px;
       margin-bottom: ${size[2]};
     `,
     heldKeysBarHeader: css`
@@ -47,6 +68,10 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     `,
     panelsContainer: css`
       display: flex;
+      flex: 1 1 0%;
+      min-height: 0;
+      overflow: hidden;
+      align-items: stretch;
     `,
     dragHandle: css`
       width: 8px;
@@ -129,6 +154,13 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
+      min-height: 0;
+      min-width: 0;
+    `,
+    leftPanelScroll: css`
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
     `,
     rightPanel: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
@@ -137,6 +169,9 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       display: flex;
       flex-direction: column;
       flex: 1;
+      min-height: 0;
+      min-width: 0;
+      overflow: hidden;
     `,
     panelHeader: css`
       font-size: ${fontSize.md};
@@ -198,6 +233,10 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `,
+    sequenceStepMatched: css`
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.blue[700], colors.blue[300])};
+    `,
     hotkeyBadges: css`
       display: flex;
       gap: ${size[1]};
@@ -250,6 +289,11 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       background: ${t(colors.blue[100], colors.blue[900] + alpha[30])};
     `,
     stateDetails: css`
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
       padding: ${size[2]};
     `,
     stateHeader: css`
@@ -361,6 +405,64 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       color: ${t(colors.gray[500], colors.gray[400])};
       font-size: ${fontSize.sm};
     `,
+    keyBreakdownSubHeader: css`
+      font-size: ${fontSize.xs};
+      font-weight: ${font.weight.semibold};
+      color: ${t(colors.gray[500], colors.gray[400])};
+      margin-top: ${size[3]};
+      margin-bottom: ${size[1]};
+    `,
+    keyBreakdownSplitRow: css`
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: ${size[3]};
+    `,
+    keyBreakdownSplitLeft: css`
+      flex: 0 0 auto;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: ${size[1]};
+    `,
+    keyBreakdownSplitArrow: css`
+      flex-shrink: 0;
+      color: ${t(colors.gray[500], colors.gray[400])};
+      font-size: ${fontSize.sm};
+      font-family: ${fontFamily.mono};
+      user-select: none;
+    `,
+    keyBreakdownSplitRight: css`
+      flex: 1 1 200px;
+      min-width: min(220px, 100%);
+    `,
+    platformBreakdown: css`
+      display: flex;
+      flex-direction: column;
+      gap: ${size[1]};
+    `,
+    platformBreakdownRow: css`
+      display: grid;
+      grid-template-columns: 72px 1fr;
+      gap: ${size[2]};
+      align-items: center;
+      font-size: ${fontSize.xs};
+    `,
+    platformBreakdownLabel: css`
+      color: ${t(colors.gray[500], colors.gray[400])};
+      flex-shrink: 0;
+    `,
+    platformBreakdownPretty: css`
+      color: ${t(colors.gray[900], colors.gray[100])};
+      word-break: break-word;
+      min-width: 0;
+    `,
+    sequenceChordDetail: css`
+      margin-top: ${size[3]};
+      padding-top: ${size[2]};
+      border-top: 1px solid ${t(colors.gray[200], colors.darkGray[600])};
+    `,
     keyCapLarge: css`
       display: inline-flex;
       align-items: center;
@@ -379,6 +481,11 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       text-transform: capitalize;
       white-space: nowrap;
     `,
+    keyCapLargeInProgress: css`
+      border-color: ${t(colors.blue[500], colors.blue[400])};
+      color: ${t(colors.blue[900], colors.blue[200])};
+      background: ${t(colors.blue[50], colors.darkGray[500])};
+    `,
     conflictList: css`
       display: flex;
       flex-direction: column;