@tanstack/devtools 0.0.0 → 0.1.0

package/dist/cjs/styles/tokens.cjs

@@ -9,6 +9,9 @@ const tokens = {
     gray: {
       100: "#f2f4f7",
       300: "#d0d5dd",
+      400: "#98a2b3",
+      500: "#667085",
+      600: "#475467",
       700: "#344054"
     },
     blue: {
@@ -23,7 +26,8 @@ const tokens = {
     }
   },
   alpha: {
-    90: "e5"
+    90: "e5",
+    20: "33"
   },
   font: {
     size: {
@@ -31,7 +35,8 @@ const tokens = {
       sm: "calc(var(--tsrd-font-size) * 0.875)"
     },
     fontFamily: {
-      sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif"
+      sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif",
+      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
     }
   },
   border: {

package/dist/cjs/styles/tokens.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.cjs","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"names":[],"mappings":";;AAAO,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IAkBN,UAAU;AAAA,MAQR,KAAK;AAAA,MACL,KAAK;AAAA,IAEP;AAAA,IACA,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MAIL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAUJ,KAAK;AAAA,IAEP;AAAA,IAcA,KAAK;AAAA,MAMH,KAAK;AAAA,IAMP;AAAA,IAcA,QAAQ;AAAA,MAMN,KAAK;AAAA,MACL,KAAK;AAAA,IAKP;AAAA,EAwCF;AAAA,EACA,OAAO;AAAA,IAEL,IAAI;AAAA,EAUN;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,MAEJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAYN;AAAA,IA6BA,YAAY;AAAA,MACV,MAAM;AAAA,IAER;AAAA,EACF;AAAA,EASA,QAAQ;AAAA,IACN,QAAQ;AAAA,MASN,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EACA,MAAM;AAAA,IAGJ,KAAK;AAAA,IAGL,GAAG;AAAA,IAaH,IAAI;AAAA,IAEJ,IAAI;AAAA,IAUJ,IAAI;AAAA,EAQN;AAiCF;;"}
+{"version":3,"file":"tokens.cjs","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"names":[],"mappings":";;AAAO,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IAkBN,UAAU;AAAA,MAQR,KAAK;AAAA,MACL,KAAK;AAAA,IAEP;AAAA,IACA,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAUJ,KAAK;AAAA,IAEP;AAAA,IAcA,KAAK;AAAA,MAMH,KAAK;AAAA,IAMP;AAAA,IAcA,QAAQ;AAAA,MAMN,KAAK;AAAA,MACL,KAAK;AAAA,IAKP;AAAA,EAwCF;AAAA,EACA,OAAO;AAAA,IAEL,IAAI;AAAA,IAOJ,IAAI;AAAA,EAGN;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,MAEJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAYN;AAAA,IA6BA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAUF,QAAQ;AAAA,IACN,QAAQ;AAAA,MASN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IAGJ,KAAK;AAAA,IAGL,GAAG;AAAA,IAaH,IAAI;AAAA,IAEJ,IAAI;AAAA,IAUJ,IAAI;AAAA,EAQN;AAiCF;;"}

package/dist/cjs/styles/use-styles.cjs

@@ -25,10 +25,12 @@ const stylesFactory = () => {
   const { fontFamily, size: fontSize } = font;
   const css = goober__namespace.css;
   return {
-    devtoolsPanelContainer: css`
+    devtoolsPanelContainer: (panelLocation) => css`
       direction: ltr;
       position: fixed;
-      bottom: 0;
+      overflow-y: hidden;
+      overflow-x: hidden;
+      ${panelLocation}: 0;
       right: 0;
       z-index: 99999;
       width: 100%;
@@ -88,13 +90,14 @@ const stylesFactory = () => {
       color: ${colors.gray[300]};
       width: w-screen;
       flex-direction: row;
-      overflow: auto;
+      overflow-x: hidden;
+      overflow-y: hidden;
       height: 100%;
     `,
-    dragHandle: css`
+    dragHandle: (panelLocation) => css`
       position: absolute;
       left: 0;
-      top: 0;
+      ${panelLocation === "bottom" ? "top" : "bottom"}: 0;
       width: 100%;
       height: 4px;
       cursor: row-resize;
@@ -117,6 +120,16 @@ const stylesFactory = () => {
       font-size: ${font.size.xs};
       cursor: pointer;
       transition: all 0.25s ease-out;
+      &:hide-until-hover {
+        opacity: 0;
+        pointer-events: none;
+        visibility: hidden;
+      }
+      &:hide-until-hover:hover {
+        opacity: 1;
+        pointer-events: auto;
+        visibility: visible;
+      }
       &:focus-visible {
         outline-offset: 2px;
         border-radius: ${border.radius.full};
@@ -134,13 +147,21 @@ const stylesFactory = () => {
       `;
       return base;
     },
-    mainCloseBtnAnimation: (isOpen) => {
+    mainCloseBtnAnimation: (isOpen, hideUntilHover) => {
       if (!isOpen) {
-        return css`
-          opacity: 1;
-          pointer-events: auto;
-          visibility: visible;
-        `;
+        return hideUntilHover ? css`
+              opacity: 0;
+
+              &:hover {
+                opacity: 1;
+                pointer-events: auto;
+                visibility: visible;
+              }
+            ` : css`
+              opacity: 1;
+              pointer-events: auto;
+              visibility: visible;
+            `;
       }
       return css`
         opacity: 0;
@@ -245,6 +266,225 @@ const stylesFactory = () => {
       width: 100%;
       height: 100%;
       overflow-y: auto;
+    `,
+    selectWrapper: css`
+      width: 100%;
+      max-width: 300px;
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    `,
+    selectContainer: css`
+      width: 100%;
+    `,
+    selectLabel: css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${colors.gray[100]};
+    `,
+    selectDescription: css`
+      font-size: 0.8rem;
+      color: ${colors.gray[400]};
+      margin: 0;
+      line-height: 1.3;
+    `,
+    select: css`
+      appearance: none;
+      width: 100%;
+      padding: 0.75rem 3rem 0.75rem 0.75rem;
+      border-radius: 0.5rem;
+      background-color: ${colors.darkGray[800]};
+      color: ${colors.gray[100]};
+      border: 1px solid ${colors.gray[700]};
+      font-size: 0.875rem;
+      transition: all 0.2s ease;
+      cursor: pointer;
+
+      /* Custom arrow */
+      background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+      background-repeat: no-repeat;
+      background-position: right 0.75rem center;
+      background-size: 1.25rem;
+
+      &:hover {
+        border-color: ${colors.gray[600]};
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${colors.purple[400]};
+        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+      }
+    `,
+    inputWrapper: css`
+      width: 100%;
+      max-width: 300px;
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    `,
+    inputContainer: css`
+      width: 100%;
+    `,
+    inputLabel: css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${colors.gray[100]};
+    `,
+    inputDescription: css`
+      font-size: 0.8rem;
+      color: ${colors.gray[400]};
+      margin: 0;
+      line-height: 1.3;
+    `,
+    input: css`
+      appearance: none;
+      width: 100%;
+      padding: 0.75rem;
+      border-radius: 0.5rem;
+      background-color: ${colors.darkGray[800]};
+      color: ${colors.gray[100]};
+      border: 1px solid ${colors.gray[700]};
+      font-size: 0.875rem;
+      font-family: ${fontFamily.mono};
+      transition: all 0.2s ease;
+
+      &::placeholder {
+        color: ${colors.gray[500]};
+      }
+
+      &:hover {
+        border-color: ${colors.gray[600]};
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${colors.purple[400]};
+        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+      }
+    `,
+    checkboxWrapper: css`
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      cursor: pointer;
+      user-select: none;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: ${colors.darkGray[800]};
+      }
+    `,
+    checkboxContainer: css`
+      width: 100%;
+    `,
+    checkboxLabelContainer: css`
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      flex: 1;
+    `,
+    checkbox: css`
+      appearance: none;
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 2px solid ${colors.gray[700]};
+      border-radius: 0.375rem;
+      background-color: ${colors.darkGray[800]};
+      display: grid;
+      place-items: center;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+      margin-top: 0.125rem;
+
+      &:hover {
+        border-color: ${colors.purple[400]};
+      }
+
+      &:checked {
+        background-color: ${colors.purple[500]};
+        border-color: ${colors.purple[500]};
+      }
+
+      &:checked::after {
+        content: '';
+        width: 0.4rem;
+        height: 0.6rem;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+        margin-top: -3px;
+      }
+    `,
+    checkboxLabel: css`
+      color: ${colors.gray[100]};
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1.4;
+    `,
+    checkboxDescription: css`
+      color: ${colors.gray[400]};
+      font-size: 0.8rem;
+      line-height: 1.3;
+    `,
+    settingsContainer: css`
+      padding: 1.5rem;
+      height: 100%;
+      overflow-y: auto;
+      background-color: ${colors.darkGray[700]};
+    `,
+    settingsSection: css`
+      margin-bottom: 2rem;
+      padding: 1.5rem;
+      background-color: ${colors.darkGray[800]};
+      border: 1px solid ${colors.gray[700]};
+      border-radius: 0.75rem;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    `,
+    sectionTitle: css`
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: ${colors.gray[100]};
+      margin: 0 0 1rem 0;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid ${colors.gray[700]};
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    `,
+    sectionIcon: css`
+      color: ${colors.purple[400]};
+    `,
+    sectionDescription: css`
+      color: ${colors.gray[400]};
+      font-size: 0.875rem;
+      margin: 0 0 1.5rem 0;
+      line-height: 1.5;
+    `,
+    settingsGroup: css`
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    `,
+    conditionalSetting: css`
+      margin-left: 1.5rem;
+      padding-left: 1rem;
+      border-left: 2px solid ${colors.purple[400]};
+      background-color: ${colors.darkGray[800]};
+      padding: 1rem;
+      border-radius: 0.5rem;
+      margin-top: 0.5rem;
+    `,
+    settingRow: css`
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+
+      @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+      }
     `
   };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"use-styles.cjs","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { DevtoolsSettings } from '../context/devtools-context'\nimport type { Accessor } from 'solid-js'\n\nconst stylesFactory = () => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily, size: fontSize } = font\n  const css = goober.css\n\n  return {\n    devtoolsPanelContainer: css`\n      direction: ltr;\n      position: fixed;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n      width: 100%;\n\n      max-height: 90%;\n      border-top: 1px solid ${colors.gray[700]};\n      transform-origin: top;\n    `,\n    devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n      return css`\n        visibility: ${isOpen ? 'visible' : 'hidden'};\n        height: ${isOpen ? 'auto' : '0'};\n      `\n    },\n    devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => {\n      if (isResizing()) {\n        return css`\n          transition: none;\n        `\n      }\n\n      return css`\n        transition: all 0.4s ease;\n      `\n    },\n    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n      if (isOpen) {\n        return css`\n          pointer-events: auto;\n          transform: translateY(0);\n        `\n      }\n      return css`\n        pointer-events: none;\n        transform: translateY(${height}px);\n      `\n    },\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    devtoolsPanel: css`\n      display: flex;\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.sans};\n      background-color: ${colors.darkGray[700]};\n      color: ${colors.gray[300]};\n      width: w-screen;\n      flex-direction: row;\n      overflow: auto;\n      height: 100%;\n    `,\n    dragHandle: css`\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 4px;\n      cursor: row-resize;\n      z-index: 100000;\n      &:hover {\n        background-color: ${colors.purple[400]}${alpha[90]};\n      }\n    `,\n\n    mainCloseBtn: css`\n      background: transparent;\n      position: fixed;\n      z-index: 99999;\n      display: inline-flex;\n      width: fit-content;\n      cursor: pointer;\n      appearance: none;\n      border: 0;\n      align-items: center;\n      padding: 0;\n      font-size: ${font.size.xs};\n      cursor: pointer;\n      transition: all 0.25s ease-out;\n      &:focus-visible {\n        outline-offset: 2px;\n        border-radius: ${border.radius.full};\n        outline: 2px solid ${colors.blue[800]};\n      }\n    `,\n    mainCloseBtnPosition: (position: DevtoolsSettings['position']) => {\n      const base = css`\n        ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n        ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n        ${position === 'middle-left'\n          ? `top: 50%; left: ${size[2]}; transform: translateY(-50%);`\n          : ''}\n        ${position === 'middle-right'\n          ? `top: 50%; right: ${size[2]}; transform: translateY(-50%);`\n          : ''}\n        ${position === 'bottom-left'\n          ? `bottom: ${size[2]}; left: ${size[2]};`\n          : ''}\n        ${position === 'bottom-right'\n          ? `bottom: ${size[2]}; right: ${size[2]};`\n          : ''}\n      `\n      return base\n    },\n    mainCloseBtnAnimation: (isOpen: boolean) => {\n      if (!isOpen) {\n        return css`\n          opacity: 1;\n          pointer-events: auto;\n          visibility: visible;\n        `\n      }\n      return css`\n        opacity: 0;\n        pointer-events: none;\n        visibility: hidden;\n      `\n    },\n    tabContainer: css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: flex-start;\n      height: 100%;\n      background-color: ${colors.darkGray[800]};\n      border-right: 1px solid ${colors.gray[700]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n      position: relative;\n      width: ${size[10]};\n    `,\n\n    tab: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: ${size[10]};\n      cursor: pointer;\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.sans};\n      color: ${colors.gray[300]};\n      background-color: transparent;\n      border: none;\n      transition: all 0.2s ease-in-out;\n      border-left: 2px solid transparent;\n      &:hover:not(.close):not(.active) {\n        background-color: ${colors.gray[700]};\n        color: ${colors.gray[100]};\n        border-left: 2px solid ${colors.purple[500]};\n      }\n      &.active {\n        background-color: ${colors.purple[500]};\n        color: ${colors.gray[100]};\n        border-left: 2px solid ${colors.purple[500]};\n      }\n      &.close {\n        margin-top: auto;\n        &:hover {\n          background-color: ${colors.gray[700]};\n        }\n        &:hover {\n          color: ${colors.red[500]};\n        }\n      }\n\n      &.disabled {\n        cursor: not-allowed;\n        opacity: 0.2;\n        pointer-events: none;\n      }\n      &.disabled:hover {\n        background-color: transparent;\n        color: ${colors.gray[300]};\n      }\n    `,\n    tabContent: css`\n      transition: all 0.2s ease-in-out;\n      width: 100%;\n      height: 100%;\n    `,\n    pluginsTabPanel: css`\n      display: flex;\n      flex-direction: row;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    `,\n    pluginsTabSidebar: css`\n      width: ${size[48]};\n      background-color: ${colors.darkGray[800]};\n      border-right: 1px solid ${colors.gray[700]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n      overflow-y: auto;\n    `,\n    pluginName: css`\n      font-size: ${fontSize.xs};\n      font-family: ${fontFamily.sans};\n      color: ${colors.gray[300]};\n      padding: ${size[2]};\n      cursor: pointer;\n      text-align: center;\n      transition: all 0.2s ease-in-out;\n      &:hover {\n        background-color: ${colors.gray[700]};\n        color: ${colors.gray[100]};\n        padding: ${size[2]};\n      }\n      &.active {\n        background-color: ${colors.purple[500]};\n        color: ${colors.gray[100]};\n      }\n    `,\n    pluginsTabContent: css`\n      width: 100%;\n      height: 100%;\n      overflow-y: auto;\n    `,\n  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":["tokens","goober","createSignal"],"mappings":"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"}
+{"version":3,"file":"use-styles.cjs","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { TanStackDevtoolsConfig } from '../context/devtools-context'\nimport type { Accessor } from 'solid-js'\n\nconst stylesFactory = () => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily, size: fontSize } = font\n  const css = goober.css\n\n  return {\n    devtoolsPanelContainer: (\n      panelLocation: TanStackDevtoolsConfig['panelLocation'],\n    ) => css`\n      direction: ltr;\n      position: fixed;\n      overflow-y: hidden;\n      overflow-x: hidden;\n      ${panelLocation}: 0;\n      right: 0;\n      z-index: 99999;\n      width: 100%;\n\n      max-height: 90%;\n      border-top: 1px solid ${colors.gray[700]};\n      transform-origin: top;\n    `,\n    devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n      return css`\n        visibility: ${isOpen ? 'visible' : 'hidden'};\n        height: ${isOpen ? 'auto' : '0'};\n      `\n    },\n    devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => {\n      if (isResizing()) {\n        return css`\n          transition: none;\n        `\n      }\n\n      return css`\n        transition: all 0.4s ease;\n      `\n    },\n    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n      if (isOpen) {\n        return css`\n          pointer-events: auto;\n          transform: translateY(0);\n        `\n      }\n      return css`\n        pointer-events: none;\n        transform: translateY(${height}px);\n      `\n    },\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    devtoolsPanel: css`\n      display: flex;\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.sans};\n      background-color: ${colors.darkGray[700]};\n      color: ${colors.gray[300]};\n      width: w-screen;\n      flex-direction: row;\n      overflow-x: hidden;\n      overflow-y: hidden;\n      height: 100%;\n    `,\n    dragHandle: (panelLocation: TanStackDevtoolsConfig['panelLocation']) => css`\n      position: absolute;\n      left: 0;\n      ${panelLocation === 'bottom' ? 'top' : 'bottom'}: 0;\n      width: 100%;\n      height: 4px;\n      cursor: row-resize;\n      z-index: 100000;\n      &:hover {\n        background-color: ${colors.purple[400]}${alpha[90]};\n      }\n    `,\n\n    mainCloseBtn: css`\n      background: transparent;\n      position: fixed;\n      z-index: 99999;\n      display: inline-flex;\n      width: fit-content;\n      cursor: pointer;\n      appearance: none;\n      border: 0;\n      align-items: center;\n      padding: 0;\n      font-size: ${font.size.xs};\n      cursor: pointer;\n      transition: all 0.25s ease-out;\n      &:hide-until-hover {\n        opacity: 0;\n        pointer-events: none;\n        visibility: hidden;\n      }\n      &:hide-until-hover:hover {\n        opacity: 1;\n        pointer-events: auto;\n        visibility: visible;\n      }\n      &:focus-visible {\n        outline-offset: 2px;\n        border-radius: ${border.radius.full};\n        outline: 2px solid ${colors.blue[800]};\n      }\n    `,\n    mainCloseBtnPosition: (position: TanStackDevtoolsConfig['position']) => {\n      const base = css`\n        ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n        ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n        ${position === 'middle-left'\n          ? `top: 50%; left: ${size[2]}; transform: translateY(-50%);`\n          : ''}\n        ${position === 'middle-right'\n          ? `top: 50%; right: ${size[2]}; transform: translateY(-50%);`\n          : ''}\n        ${position === 'bottom-left'\n          ? `bottom: ${size[2]}; left: ${size[2]};`\n          : ''}\n        ${position === 'bottom-right'\n          ? `bottom: ${size[2]}; right: ${size[2]};`\n          : ''}\n      `\n      return base\n    },\n    mainCloseBtnAnimation: (isOpen: boolean, hideUntilHover: boolean) => {\n      if (!isOpen) {\n        return hideUntilHover\n          ? css`\n              opacity: 0;\n\n              &:hover {\n                opacity: 1;\n                pointer-events: auto;\n                visibility: visible;\n              }\n            `\n          : css`\n              opacity: 1;\n              pointer-events: auto;\n              visibility: visible;\n            `\n      }\n      return css`\n        opacity: 0;\n        pointer-events: none;\n        visibility: hidden;\n      `\n    },\n    tabContainer: css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: flex-start;\n      height: 100%;\n      background-color: ${colors.darkGray[800]};\n      border-right: 1px solid ${colors.gray[700]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n      position: relative;\n      width: ${size[10]};\n    `,\n\n    tab: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: ${size[10]};\n      cursor: pointer;\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.sans};\n      color: ${colors.gray[300]};\n      background-color: transparent;\n      border: none;\n      transition: all 0.2s ease-in-out;\n      border-left: 2px solid transparent;\n      &:hover:not(.close):not(.active) {\n        background-color: ${colors.gray[700]};\n        color: ${colors.gray[100]};\n        border-left: 2px solid ${colors.purple[500]};\n      }\n      &.active {\n        background-color: ${colors.purple[500]};\n        color: ${colors.gray[100]};\n        border-left: 2px solid ${colors.purple[500]};\n      }\n      &.close {\n        margin-top: auto;\n        &:hover {\n          background-color: ${colors.gray[700]};\n        }\n        &:hover {\n          color: ${colors.red[500]};\n        }\n      }\n\n      &.disabled {\n        cursor: not-allowed;\n        opacity: 0.2;\n        pointer-events: none;\n      }\n      &.disabled:hover {\n        background-color: transparent;\n        color: ${colors.gray[300]};\n      }\n    `,\n    tabContent: css`\n      transition: all 0.2s ease-in-out;\n      width: 100%;\n      height: 100%;\n    `,\n    pluginsTabPanel: css`\n      display: flex;\n      flex-direction: row;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    `,\n    pluginsTabSidebar: css`\n      width: ${size[48]};\n      background-color: ${colors.darkGray[800]};\n      border-right: 1px solid ${colors.gray[700]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n      overflow-y: auto;\n    `,\n    pluginName: css`\n      font-size: ${fontSize.xs};\n      font-family: ${fontFamily.sans};\n      color: ${colors.gray[300]};\n      padding: ${size[2]};\n      cursor: pointer;\n      text-align: center;\n      transition: all 0.2s ease-in-out;\n      &:hover {\n        background-color: ${colors.gray[700]};\n        color: ${colors.gray[100]};\n        padding: ${size[2]};\n      }\n      &.active {\n        background-color: ${colors.purple[500]};\n        color: ${colors.gray[100]};\n      }\n    `,\n    pluginsTabContent: css`\n      width: 100%;\n      height: 100%;\n      overflow-y: auto;\n    `,\n    selectWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    selectContainer: css`\n      width: 100%;\n    `,\n    selectLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n    `,\n    select: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem 3rem 0.75rem 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      transition: all 0.2s ease;\n      cursor: pointer;\n\n      /* Custom arrow */\n      background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n      background-repeat: no-repeat;\n      background-position: right 0.75rem center;\n      background-size: 1.25rem;\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    inputContainer: css`\n      width: 100%;\n    `,\n    inputLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n    `,\n    input: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.2s ease;\n\n      &::placeholder {\n        color: ${colors.gray[500]};\n      }\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    checkboxWrapper: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      user-select: none;\n      padding: 0.5rem;\n      border-radius: 0.5rem;\n      transition: background-color 0.2s ease;\n\n      &:hover {\n        background-color: ${colors.darkGray[800]};\n      }\n    `,\n    checkboxContainer: css`\n      width: 100%;\n    `,\n    checkboxLabelContainer: css`\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      flex: 1;\n    `,\n    checkbox: css`\n      appearance: none;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid ${colors.gray[700]};\n      border-radius: 0.375rem;\n      background-color: ${colors.darkGray[800]};\n      display: grid;\n      place-items: center;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${colors.purple[400]};\n      }\n\n      &:checked {\n        background-color: ${colors.purple[500]};\n        border-color: ${colors.purple[500]};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid white;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${colors.gray[100]};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1.4;\n    `,\n    checkboxDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.8rem;\n      line-height: 1.3;\n    `,\n    settingsContainer: css`\n      padding: 1.5rem;\n      height: 100%;\n      overflow-y: auto;\n      background-color: ${colors.darkGray[700]};\n    `,\n    settingsSection: css`\n      margin-bottom: 2rem;\n      padding: 1.5rem;\n      background-color: ${colors.darkGray[800]};\n      border: 1px solid ${colors.gray[700]};\n      border-radius: 0.75rem;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    `,\n    sectionTitle: css`\n      font-size: 1.125rem;\n      font-weight: 600;\n      color: ${colors.gray[100]};\n      margin: 0 0 1rem 0;\n      padding-bottom: 0.5rem;\n      border-bottom: 1px solid ${colors.gray[700]};\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    `,\n    sectionIcon: css`\n      color: ${colors.purple[400]};\n    `,\n    sectionDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.875rem;\n      margin: 0 0 1.5rem 0;\n      line-height: 1.5;\n    `,\n    settingsGroup: css`\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    `,\n    conditionalSetting: css`\n      margin-left: 1.5rem;\n      padding-left: 1rem;\n      border-left: 2px solid ${colors.purple[400]};\n      background-color: ${colors.darkGray[800]};\n      padding: 1rem;\n      border-radius: 0.5rem;\n      margin-top: 0.5rem;\n    `,\n    settingRow: css`\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 1rem;\n\n      @media (max-width: 768px) {\n        grid-template-columns: 1fr;\n      }\n    `,\n  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":["tokens","goober","createSignal"],"mappings":"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"}

package/dist/cjs/styles/use-styles.d.cts

@@ -1,16 +1,16 @@
-import { DevtoolsSettings } from '../context/devtools-context.cjs';
+import { TanStackDevtoolsConfig } from '../context/devtools-context.cjs';
 import { Accessor } from 'solid-js';
 export declare function useStyles(): Accessor<{
-    devtoolsPanelContainer: string;
+    devtoolsPanelContainer: (panelLocation: TanStackDevtoolsConfig["panelLocation"]) => string;
     devtoolsPanelContainerVisibility: (isOpen: boolean) => string;
     devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => string;
     devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => string;
     logo: string;
     devtoolsPanel: string;
-    dragHandle: string;
+    dragHandle: (panelLocation: TanStackDevtoolsConfig["panelLocation"]) => string;
     mainCloseBtn: string;
-    mainCloseBtnPosition: (position: DevtoolsSettings["position"]) => string;
-    mainCloseBtnAnimation: (isOpen: boolean) => string;
+    mainCloseBtnPosition: (position: TanStackDevtoolsConfig["position"]) => string;
+    mainCloseBtnAnimation: (isOpen: boolean, hideUntilHover: boolean) => string;
     tabContainer: string;
     tab: string;
     tabContent: string;
@@ -18,4 +18,28 @@ export declare function useStyles(): Accessor<{
     pluginsTabSidebar: string;
     pluginName: string;
     pluginsTabContent: string;
+    selectWrapper: string;
+    selectContainer: string;
+    selectLabel: string;
+    selectDescription: string;
+    select: string;
+    inputWrapper: string;
+    inputContainer: string;
+    inputLabel: string;
+    inputDescription: string;
+    input: string;
+    checkboxWrapper: string;
+    checkboxContainer: string;
+    checkboxLabelContainer: string;
+    checkbox: string;
+    checkboxLabel: string;
+    checkboxDescription: string;
+    settingsContainer: string;
+    settingsSection: string;
+    sectionTitle: string;
+    sectionIcon: string;
+    sectionDescription: string;
+    settingsGroup: string;
+    conditionalSetting: string;
+    settingRow: string;
 }>;

package/dist/cjs/tabs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/tabs/index.tsx"],"sourcesContent":["import { SettingsTab } from './settings-tab'\nimport { PluginsTab } from './plugins-tab'\n\nexport const tabs = [\n  {\n    name: 'Plugins',\n    id: 'plugins',\n    component: () => <PluginsTab />,\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M8 6h10\" />\n        <path d=\"M6 12h9\" />\n        <path d=\"M11 18h7\" />\n      </svg>\n    ),\n  },\n  {\n    name: 'Settings',\n    id: 'settings',\n    component: () => <SettingsTab />,\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\" />\n        <path d=\"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\" />\n        <path d=\"M12 2v2\" />\n        <path d=\"M12 22v-2\" />\n        <path d=\"m17 20.66-1-1.73\" />\n        <path d=\"M11 10.27 7 3.34\" />\n        <path d=\"m20.66 17-1.73-1\" />\n        <path d=\"m3.34 7 1.73 1\" />\n        <path d=\"M14 12h8\" />\n        <path d=\"M2 12h2\" />\n        <path d=\"m20.66 7-1.73 1\" />\n        <path d=\"m3.34 17 1.73-1\" />\n        <path d=\"m17 3.34-1 1.73\" />\n        <path d=\"m11 13.73-4 6.93\" />\n      </svg>\n    ),\n  },\n] as const\n\nexport type TabName = (typeof tabs)[number]['id']\n"],"names":["tabs","name","id","component","_$createComponent","PluginsTab","icon","_tmpl$","SettingsTab","_tmpl$2"],"mappings":";;;;;;AAGO,MAAMA,OAAO,CAClB;AAAA,EACEC,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,IAAAA,gBAAOC,WAAAA,YAAa,EAAA;AAAA,EAC/BC,MAAIC,OAAA;AAiBN,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,IAAAA,gBAAOI,YAAAA,aAAc,EAAA;AAAA,EAChCF,MAAIG,QAAA;AA4BN,CAAC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/tabs/index.tsx"],"sourcesContent":["import { SettingsTab } from './settings-tab'\nimport { PluginsTab } from './plugins-tab'\n\nexport const tabs = [\n  {\n    name: 'Plugins',\n    id: 'plugins',\n    component: () => <PluginsTab />,\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M8 6h10\" />\n        <path d=\"M6 12h9\" />\n        <path d=\"M11 18h7\" />\n      </svg>\n    ),\n  },\n  {\n    name: 'Settings',\n    id: 'settings',\n    component: () => <SettingsTab />,\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\" />\n        <path d=\"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\" />\n        <path d=\"M12 2v2\" />\n        <path d=\"M12 22v-2\" />\n        <path d=\"m17 20.66-1-1.73\" />\n        <path d=\"M11 10.27 7 3.34\" />\n        <path d=\"m20.66 17-1.73-1\" />\n        <path d=\"m3.34 7 1.73 1\" />\n        <path d=\"M14 12h8\" />\n        <path d=\"M2 12h2\" />\n        <path d=\"m20.66 7-1.73 1\" />\n        <path d=\"m3.34 17 1.73-1\" />\n        <path d=\"m17 3.34-1 1.73\" />\n        <path d=\"m11 13.73-4 6.93\" />\n      </svg>\n    ),\n  },\n] as const\n\nexport type TabName = (typeof tabs)[number]['id']\n"],"names":["tabs","name","id","component","_$createComponent","PluginsTab","icon","_tmpl$","SettingsTab","_tmpl$2"],"mappings":";;;;;;AAGO,MAAMA,OAAO,CAClB;AAAA,EACEC,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,IAAAA,gBAAOC,WAAAA,YAAU,EAAA;AAAA,EAC5BC,MAAIC,OAAAA;AAiBN,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,IAAAA,gBAAOI,YAAAA,aAAW,EAAA;AAAA,EAC7BF,MAAIG,QAAAA;AA4BN,CAAC;;"}

package/dist/cjs/tabs/plugins-tab.cjs

@@ -5,6 +5,7 @@ const solidJs = require("solid-js");
 const clsx = require("clsx");
 const useDevtoolsContext = require("../context/use-devtools-context.cjs");
 const useStyles = require("../styles/use-styles.cjs");
+const constants = require("../constants.cjs");
 var _tmpl$ = /* @__PURE__ */ web.template(`<div><div></div><div>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div><h3>`);
 const PluginsTab = () => {
   const {
@@ -14,11 +15,7 @@ const PluginsTab = () => {
   } = useDevtoolsContext.usePlugins();
   let activePluginRef;
   solidJs.createEffect(() => {
-    var _a;
-    const currentActivePlugin = (_a = plugins()) == null ? void 0 : _a.find((plugin) => {
-      var _a2;
-      return plugin.id === ((_a2 = activePlugin()) == null ? void 0 : _a2.id);
-    });
+    const currentActivePlugin = plugins()?.find((plugin) => plugin.id === activePlugin());
     if (activePluginRef && currentActivePlugin) {
       currentActivePlugin.render(activePluginRef);
     }
@@ -39,21 +36,20 @@ const PluginsTab = () => {
         });
         return (() => {
           var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
-          _el$4.$$click = () => setActivePlugin(plugin);
+          _el$4.$$click = () => setActivePlugin(plugin.id);
           var _ref$2 = pluginHeading;
           typeof _ref$2 === "function" ? web.use(_ref$2, _el$5) : pluginHeading = _el$5;
-          web.effect(() => {
-            var _a;
-            return web.className(_el$4, clsx(styles().pluginName, {
-              active: ((_a = activePlugin()) == null ? void 0 : _a.id) === plugin.id
-            }));
-          });
+          web.setAttribute(_el$5, "id", constants.PLUGIN_TITLE_CONTAINER_ID);
+          web.effect(() => web.className(_el$4, clsx(styles().pluginName, {
+            active: activePlugin() === plugin.id
+          })));
           return _el$4;
         })();
       }
     }));
     var _ref$ = activePluginRef;
     typeof _ref$ === "function" ? web.use(_ref$, _el$3) : activePluginRef = _el$3;
+    web.setAttribute(_el$3, "id", constants.PLUGIN_CONTAINER_ID);
     web.effect((_p$) => {
       var _v$ = styles().pluginsTabPanel, _v$2 = styles().pluginsTabSidebar, _v$3 = styles().pluginsTabContent;
       _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);

package/dist/cjs/tabs/plugins-tab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"plugins-tab.cjs","sources":["../../../src/tabs/plugins-tab.tsx"],"sourcesContent":["import { For, createEffect } from 'solid-js'\nimport clsx from 'clsx'\nimport { usePlugins } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\n\nexport const PluginsTab = () => {\n  const { plugins, activePlugin, setActivePlugin } = usePlugins()\n  let activePluginRef: HTMLDivElement | undefined\n  createEffect(() => {\n    const currentActivePlugin = plugins()?.find(\n      (plugin) => plugin.id === activePlugin()?.id,\n    )\n    if (activePluginRef && currentActivePlugin) {\n      currentActivePlugin.render(activePluginRef)\n    }\n  })\n  const styles = useStyles()\n  return (\n    <div class={styles().pluginsTabPanel}>\n      <div class={styles().pluginsTabSidebar}>\n        <For each={plugins()}>\n          {(plugin) => {\n            let pluginHeading: HTMLHeadingElement | undefined\n            createEffect(() => {\n              if (pluginHeading) {\n                typeof plugin.name === 'string'\n                  ? (pluginHeading.textContent = plugin.name)\n                  : plugin.name(pluginHeading)\n              }\n            })\n            return (\n              <div\n                onClick={() => setActivePlugin(plugin)}\n                class={clsx(styles().pluginName, {\n                  active: activePlugin()?.id === plugin.id,\n                })}\n              >\n                <h3 ref={pluginHeading} />\n              </div>\n            )\n          }}\n        </For>\n      </div>\n      <div ref={activePluginRef} class={styles().pluginsTabContent}></div>\n    </div>\n  )\n}\n"],"names":["PluginsTab","plugins","activePlugin","setActivePlugin","usePlugins","activePluginRef","createEffect","currentActivePlugin","find","plugin","id","render","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$createComponent","For","each","children","pluginHeading","name","textContent","_el$4","_tmpl$2","_el$5","$$click","_ref$2","_$use","_$effect","_$className","clsx","pluginName","active","_ref$","_p$","_v$","pluginsTabPanel","_v$2","pluginsTabSidebar","_v$3","pluginsTabContent","e","t","a","undefined","_$delegateEvents"],"mappings":";;;;;;;;AAKO,MAAMA,aAAaA,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAcC;AAAAA,MAAoBC,8BAAW;AAC1DC,MAAAA;AACJC,UAAAA,aAAa,MAAM;;AACXC,UAAAA,uBAAsBN,aAAWO,MAAXP,mBAAWO,KACpCC,YAAWA;;AAAAA,oBAAOC,SAAOR,MAAAA,aAAa,MAAbA,gBAAAA,IAAgBQ;AAAAA;AAE5C,QAAIL,mBAAmBE,qBAAqB;AAC1CA,0BAAoBI,OAAON,eAAe;AAAA,IAAA;AAAA,EAC5C,CACD;AACD,QAAMO,SAASC,UAAAA,UAAU;AACzB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAH,eAAAA,OAAAI,oBAGOC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErB,QAAQ;AAAA,MAAC;AAAA,MAAAsB,UAChBd,CAAW,WAAA;AACPe,YAAAA;AACJlB,gBAAAA,aAAa,MAAM;AACjB,cAAIkB,eAAe;AACVf,mBAAAA,OAAOgB,SAAS,WAClBD,cAAcE,cAAcjB,OAAOgB,OACpChB,OAAOgB,KAAKD,aAAa;AAAA,UAAA;AAAA,QAC/B,CACD;AACD,gBAAA,MAAA;AAAA,cAAAG,QAAAC,QAAAA,GAAAC,QAAAF,MAAAV;AAAAa,gBAAAA,UAEa,MAAM3B,gBAAgBM,MAAM;AAAC,cAAAsB,SAK7BP;AAAa,iBAAAO,WAAAC,aAAAA,IAAAA,IAAAD,QAAAF,KAAA,IAAbL,gBAAaK;AAAAI,cAAAA,OAAAC,MAAAA;;AAAAA,uBAAAA,UAAAP,OAJfQ,KAAKvB,SAASwB,YAAY;AAAA,cAC/BC,UAAQnC,kBAAAA,MAAAA,mBAAgBQ,QAAOD,OAAOC;AAAAA,YACvC,CAAA,CAAC;AAAA,WAAA;AAAAiB,iBAAAA;AAAAA,QAAAA,GAAA;AAAA,MAAA;AAAA,IAKR,CAAC,CAAA;AAAA,QAAAW,QAGKjC;AAAe,WAAAiC,UAAAN,aAAAA,IAAAA,IAAAM,OAAApB,KAAA,IAAfb,kBAAea;AAAAe,QAAAA,OAAAM,CAAA,QAAA;AAAAC,UAAAA,MAzBf5B,SAAS6B,iBAAeC,OACtB9B,OAAS+B,EAAAA,mBAAiBC,OAwBJhC,OAAAA,EAASiC;AAAiBL,cAAAD,IAAAO,KAAAZ,IAAAA,UAAApB,MAAAyB,IAAAO,IAAAN,GAAA;AAAAE,eAAAH,IAAAQ,KAAAb,IAAAA,UAAAlB,OAAAuB,IAAAQ,IAAAL,IAAA;AAAAE,eAAAL,IAAAS,KAAAd,IAAAA,UAAAhB,OAAAqB,IAAAS,IAAAJ,IAAA;AAAAL,aAAAA;AAAAA,IAAAA,GAAA;AAAA,MAAAO,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAnC,WAAAA;AAAAA,EAAAA,GAAA;AAGlE;AAACoC,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}
+{"version":3,"file":"plugins-tab.cjs","sources":["../../../src/tabs/plugins-tab.tsx"],"sourcesContent":["import { For, createEffect } from 'solid-js'\nimport clsx from 'clsx'\nimport { usePlugins } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'\n\nexport const PluginsTab = () => {\n  const { plugins, activePlugin, setActivePlugin } = usePlugins()\n  let activePluginRef: HTMLDivElement | undefined\n\n  createEffect(() => {\n    const currentActivePlugin = plugins()?.find(\n      (plugin) => plugin.id === activePlugin(),\n    )\n    if (activePluginRef && currentActivePlugin) {\n      currentActivePlugin.render(activePluginRef)\n    }\n  })\n  const styles = useStyles()\n  return (\n    <div class={styles().pluginsTabPanel}>\n      <div class={styles().pluginsTabSidebar}>\n        <For each={plugins()}>\n          {(plugin) => {\n            let pluginHeading: HTMLHeadingElement | undefined\n            createEffect(() => {\n              if (pluginHeading) {\n                typeof plugin.name === 'string'\n                  ? (pluginHeading.textContent = plugin.name)\n                  : plugin.name(pluginHeading)\n              }\n            })\n            return (\n              <div\n                onClick={() => setActivePlugin(plugin.id!)}\n                class={clsx(styles().pluginName, {\n                  active: activePlugin() === plugin.id,\n                })}\n              >\n                <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />\n              </div>\n            )\n          }}\n        </For>\n      </div>\n      <div\n        id={PLUGIN_CONTAINER_ID}\n        ref={activePluginRef}\n        class={styles().pluginsTabContent}\n      ></div>\n    </div>\n  )\n}\n"],"names":["PluginsTab","plugins","activePlugin","setActivePlugin","usePlugins","activePluginRef","createEffect","currentActivePlugin","find","plugin","id","render","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$insert","_$createComponent","For","each","children","pluginHeading","name","textContent","_el$4","_tmpl$2","_el$5","$$click","_ref$2","_$use","_$setAttribute","PLUGIN_TITLE_CONTAINER_ID","_$effect","_$className","clsx","pluginName","active","_ref$","PLUGIN_CONTAINER_ID","_p$","_v$","pluginsTabPanel","_v$2","pluginsTabSidebar","_v$3","pluginsTabContent","e","t","a","undefined","_$delegateEvents"],"mappings":";;;;;;;;;AAMO,MAAMA,aAAaA,MAAM;AAC9B,QAAM;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAcC;AAAAA,EAAAA,IAAoBC,8BAAAA;AACnD,MAAIC;AAEJC,UAAAA,aAAa,MAAM;AACjB,UAAMC,sBAAsBN,WAAWO,KACpCC,YAAWA,OAAOC,OAAOR,cAC5B;AACA,QAAIG,mBAAmBE,qBAAqB;AAC1CA,0BAAoBI,OAAON,eAAe;AAAA,IAC5C;AAAA,EACF,CAAC;AACD,QAAMO,SAASC,UAAAA,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAC,eAAAJ,OAAAK,IAAAA,gBAGOC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEtB,QAAAA;AAAAA,MAAS;AAAA,MAAAuB,UAChBf,CAAAA,WAAW;AACX,YAAIgB;AACJnB,gBAAAA,aAAa,MAAM;AACjB,cAAImB,eAAe;AACjB,mBAAOhB,OAAOiB,SAAS,WAClBD,cAAcE,cAAclB,OAAOiB,OACpCjB,OAAOiB,KAAKD,aAAa;AAAA,UAC/B;AAAA,QACF,CAAC;AACD,gBAAA,MAAA;AAAA,cAAAG,QAAAC,QAAAA,GAAAC,QAAAF,MAAAX;AAAAW,gBAAAG,UAEa,MAAM5B,gBAAgBM,OAAOC,EAAG;AAAC,cAAAsB,SAKFP;AAAa,iBAAAO,WAAA,aAAAC,IAAAA,IAAAD,QAAAF,KAAA,IAAbL,gBAAaK;AAAAI,2BAAAJ,OAAA,MAA7CK,mCAAyB;AAAAC,cAAAA,OAAA,MAAAC,IAAAA,UAAAT,OAJ1BU,KAAK1B,OAAAA,EAAS2B,YAAY;AAAA,YAC/BC,QAAQtC,aAAAA,MAAmBO,OAAOC;AAAAA,UAAAA,CACnC,CAAC,CAAA;AAAA,iBAAAkB;AAAAA,QAAA,GAAA;AAAA,MAKR;AAAA,IAAA,CAAC,CAAA;AAAA,QAAAa,QAKEpC;AAAe,WAAAoC,UAAA,aAAAR,IAAAA,IAAAQ,OAAAvB,KAAA,IAAfb,kBAAea;AAAAgB,qBAAAhB,OAAA,MADhBwB,6BAAmB;AAAAN,QAAAA,OAAAO,CAAAA,QAAA;AAAA,UAAAC,MA1BfhC,SAASiC,iBAAeC,OACtBlC,SAASmC,mBAAiBC,OA2B7BpC,OAAAA,EAASqC;AAAiBL,cAAAD,IAAAO,KAAAb,IAAAA,UAAAvB,MAAA6B,IAAAO,IAAAN,GAAA;AAAAE,eAAAH,IAAAQ,KAAAd,IAAAA,UAAArB,OAAA2B,IAAAQ,IAAAL,IAAA;AAAAE,eAAAL,IAAAS,KAAAf,IAAAA,UAAAnB,OAAAyB,IAAAS,IAAAJ,IAAA;AAAA,aAAAL;AAAAA,IAAA,GAAA;AAAA,MAAAO,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAvC;AAAAA,EAAA,GAAA;AAIzC;AAACwC,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}