@tanstack/pacer-devtools 1.1.3 → 1.1.4

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

@@ -1 +0,0 @@
-{"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: 1;\n      min-height: 0;\n      overflow: hidden;\n      padding: ${size[2]};\n      padding-top: 0;\n      margin-top: ${size[2]};\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    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      overflow: hidden;\n      min-height: 0;\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      overflow: hidden;\n      min-height: 0;\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    utilList: css`\n      flex: 1;\n      overflow-y: auto;\n      padding: ${size[1]};\n      min-height: 0;\n    `,\n    utilGroup: css`\n      margin-bottom: ${size[2]};\n    `,\n    utilGroupHeader: css`\n      font-size: ${fontSize.xs};\n      font-weight: ${font.weight.semibold};\n      color: ${t(colors.gray[600], colors.gray[400])};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: ${size[1]};\n      padding: ${size[1]} ${size[2]};\n      background: ${t(colors.gray[200], colors.darkGray[700])};\n      border-radius: ${border.radius.md};\n    `,\n    utilRow: 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    utilRowSelected: 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    utilKey: 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    utilStatus: css`\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[600], colors.gray[400])};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      padding: ${size[1]} ${size[1]};\n      background: ${t(colors.gray[300], colors.darkGray[600])};\n      border-radius: ${border.radius.sm};\n      margin-left: ${size[1]};\n    `,\n    stateDetails: css`\n      flex: 1;\n      overflow-y: auto;\n      padding: ${size[2]};\n      min-height: 0;\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    stateKey: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[600], colors.gray[400])};\n      word-break: break-all;\n    `,\n    stateContent: css`\n      background: ${t(colors.gray[100], colors.darkGray[700])};\n      border-radius: ${border.radius.md};\n      padding: ${size[2]};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\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    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    actionDotBlue: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.blue[400]};\n    `,\n    actionDotGreen: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.green[400]};\n    `,\n    actionDotRed: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.red[400]};\n    `,\n    actionDotYellow: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.yellow[400]};\n    `,\n    actionDotOrange: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.pink[400]};\n    `,\n    actionDotPurple: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.purple[400]};\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    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    // Keep existing styles for backward compatibility\n    sectionContainer: css`\n      display: flex;\n      flex-wrap: wrap;\n      gap: ${size[4]};\n    `,\n    section: css`\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      border-radius: ${border.radius.lg};\n      box-shadow: ${tokens.shadow.md(\n        t(colors.gray[400] + alpha[80], colors.black + alpha[80]),\n      )};\n      padding: ${size[4]};\n      margin-bottom: ${size[4]};\n      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      min-width: 0;\n      max-width: 33%;\n      max-height: fit-content;\n    `,\n    sectionHeader: css`\n      font-size: ${fontSize.lg};\n      font-weight: ${font.weight.bold};\n      margin-bottom: ${size[2]};\n      color: ${t(colors.blue[600], colors.blue[400])};\n      letter-spacing: 0.01em;\n      display: flex;\n      align-items: center;\n      gap: ${size[2]};\n    `,\n    sectionEmpty: css`\n      color: ${t(colors.gray[500], colors.gray[500])};\n      font-size: ${fontSize.sm};\n      font-style: italic;\n      margin: ${size[2]} 0;\n    `,\n    instanceList: css`\n      display: flex;\n      flex-direction: column;\n      gap: ${size[2]};\n      background: ${t(colors.gray[200], colors.darkGray[700])};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n    `,\n    instanceCard: css`\n      background: ${t(colors.gray[200], colors.darkGray[700])};\n      border-radius: ${border.radius.md};\n      padding: ${size[3]};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n      font-size: ${fontSize.sm};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      font-family: ${fontFamily.mono};\n      overflow-x: auto;\n      transition:\n        box-shadow 0.3s,\n        background 0.3s;\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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"}