@tanstack/devtools 0.6.0 → 0.6.1

package/dist/esm/styles/tokens.js

@@ -8,7 +8,6 @@ const tokens = {
     gray: {
       100: "#f2f4f7",
       300: "#d0d5dd",
-      400: "#98a2b3",
       500: "#667085",
       700: "#344054"
     },

package/dist/esm/styles/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","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,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MAEL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAUJ,KAAK;AAAA,IAEP;AAAA,IACA,OAAO;AAAA,MAOL,KAAK;AAAA,IAKP;AAAA,IACA,KAAK;AAAA,MAKH,KAAK;AAAA,MACL,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,EAAA;AAAA,EAUF,QAAQ;AAAA,IACN,QAAQ;AAAA,MASN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IAMJ,GAAG;AAAA,IAaH,IAAI;AAAA,IAYJ,IAAI;AAAA,EAQN;AAiCF;"}
+{"version":3,"file":"tokens.js","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,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MAEL,KAAK;AAAA,MAEL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAUJ,KAAK;AAAA,IAEP;AAAA,IACA,OAAO;AAAA,MAOL,KAAK;AAAA,IAKP;AAAA,IACA,KAAK;AAAA,MAKH,KAAK;AAAA,MACL,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,EAAA;AAAA,EAUF,QAAQ;AAAA,IACN,QAAQ;AAAA,MASN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IAMJ,GAAG;AAAA,IAaH,IAAI;AAAA,IAYJ,IAAI;AAAA,EAQN;AAiCF;"}

package/dist/esm/styles/use-styles.d.ts

@@ -36,11 +36,6 @@ export declare function useStyles(): Accessor<{
     pluginsTabSidebarTransition: (mSeconds: number) => string;
     pluginName: string;
     pluginsTabContent: string;
-    settingsContainer: string;
-    settingsSection: string;
-    sectionTitle: string;
-    sectionIcon: string;
-    sectionDescription: string;
     settingsGroup: string;
     conditionalSetting: string;
     settingRow: string;

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

@@ -37,7 +37,6 @@ const stylesFactory = () => {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
-      margin: 1.5rem;
       margin-bottom: 2rem;
       border-radius: 0.75rem;
     `,
@@ -381,42 +380,6 @@ const stylesFactory = () => {
       height: 100%;
       overflow-y: auto;
     `,
-    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;
-      text-align: left;
-    `,
-    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;
-      text-align: left;
-    `,
     settingsGroup: css`
       display: flex;
       flex-direction: column;

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

@@ -1 +1 @@
-{"version":3,"file":"use-styles.js","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 mSecondsToCssSeconds = (mSeconds: number) =>\n  `${(mSeconds / 1000).toFixed(2)}s`\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    seoTabContainer: css`\n      padding: 0;\n      margin: 0 auto;\n      background: ${colors.darkGray[700]};\n      border-radius: 12px;\n      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);\n      overflow-y: auto;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      width: 100%;\n      overflow-y: auto;\n    `,\n    seoTabTitle: css`\n      font-size: 1.25rem;\n      font-weight: 600;\n      color: ${colors.purple[400]};\n      margin: 0;\n      padding: 1rem 1.5rem 0.5rem 1.5rem;\n      text-align: left;\n      border-bottom: 1px solid ${colors.gray[700]};\n    `,\n    seoTabSection: css`\n      padding: 1.5rem;\n      background: ${colors.darkGray[800]};\n      border: 1px solid ${colors.gray[700]};\n      display: flex;\n      flex-direction: column;\n      gap: 0.5rem;\n      margin: 1.5rem;\n      margin-bottom: 2rem;\n      border-radius: 0.75rem;\n    `,\n    seoPreviewSection: css`\n      display: flex;\n      flex-direction: row;\n      gap: 16px;\n      margin-bottom: 0;\n      justify-content: flex-start;\n      align-items: flex-start;\n      overflow-x: auto;\n      flex-wrap: wrap;\n      padding-bottom: 0.5rem;\n    `,\n    seoPreviewCard: css`\n      border: 1px solid ${colors.gray[700]};\n      border-radius: 8px;\n      padding: 12px 10px;\n      background: ${colors.darkGray[900]};\n      margin-bottom: 0;\n      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      min-width: 200px;\n      max-width: 240px;\n      font-size: 0.95rem;\n      gap: 4px;\n    `,\n    seoPreviewHeader: css`\n      font-size: 1rem;\n      font-weight: 500;\n      margin-bottom: 6px;\n      color: ${colors.purple[400]};\n    `,\n    seoPreviewImage: css`\n      max-width: 100%;\n      border-radius: 6px;\n      margin-bottom: 6px;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n      height: 160px;\n    `,\n    seoPreviewTitle: css`\n      font-size: 1rem;\n      font-weight: 600;\n      margin-bottom: 2px;\n      color: ${colors.gray[100]};\n    `,\n    seoPreviewDesc: css`\n      color: ${colors.gray[300]};\n      margin-bottom: 2px;\n      font-size: 0.95rem;\n    `,\n    seoPreviewUrl: css`\n      color: ${colors.gray[500]};\n      font-size: 0.9rem;\n      margin-bottom: 2px;\n      word-break: break-all;\n    `,\n    seoMissingTagsSection: css`\n      margin-top: 4px;\n      font-size: 0.95rem;\n      color: ${colors.red[400]};\n    `,\n    seoMissingTagsList: css`\n      margin: 4px 0 0 0;\n      padding: 0;\n      list-style: none;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n      max-width: 240px;\n    `,\n    seoMissingTag: css`\n      background: ${colors.red[500]}22;\n      color: ${colors.red[500]};\n      border-radius: 4px;\n      padding: 1px 6px;\n      font-size: 0.9rem;\n      font-weight: 500;\n    `,\n    seoAllTagsFound: css`\n      color: ${colors.green[500]};\n      font-weight: 500;\n      margin-left: 6px;\n      font-size: 0.95rem;\n    `,\n    devtoolsPanelContainer: (\n      panelLocation: TanStackDevtoolsConfig['panelLocation'],\n      isDetached: boolean,\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      ${isDetached ? '' : '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    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      user-select: none;\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):not(.detach) {\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      &.detach {\n        &:hover {\n          background-color: ${colors.gray[700]};\n        }\n        &:hover {\n          color: ${colors.green[500]};\n        }\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\n    pluginsTabDraw: css`\n      width: 0px;\n      height: 100%;\n      background-color: ${colors.darkGray[800]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n    `,\n    pluginsTabDrawExpanded: css`\n      width: ${size[48]};\n      border-right: 1px solid ${colors.gray[700]};\n    `,\n    pluginsTabDrawTransition: (mSeconds: number) => {\n      return css`\n        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;\n      `\n    },\n\n    pluginsTabSidebar: css`\n      width: ${size[48]};\n      overflow-y: auto;\n      transform: translateX(-100%);\n    `,\n    pluginsTabSidebarExpanded: css`\n      transform: translateX(0);\n    `,\n    pluginsTabSidebarTransition: (mSeconds: number) => {\n      return css`\n        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;\n      `\n    },\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    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      text-align: left;\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      text-align: left;\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    settingsModifiers: css`\n      display: flex;\n      gap: 0.5rem;\n    `,\n  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-styles.js","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 mSecondsToCssSeconds = (mSeconds: number) =>\n  `${(mSeconds / 1000).toFixed(2)}s`\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    seoTabContainer: css`\n      padding: 0;\n      margin: 0 auto;\n      background: ${colors.darkGray[700]};\n      border-radius: 12px;\n      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);\n      overflow-y: auto;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      width: 100%;\n      overflow-y: auto;\n    `,\n    seoTabTitle: css`\n      font-size: 1.25rem;\n      font-weight: 600;\n      color: ${colors.purple[400]};\n      margin: 0;\n      padding: 1rem 1.5rem 0.5rem 1.5rem;\n      text-align: left;\n      border-bottom: 1px solid ${colors.gray[700]};\n    `,\n    seoTabSection: css`\n      padding: 1.5rem;\n      background: ${colors.darkGray[800]};\n      border: 1px solid ${colors.gray[700]};\n      display: flex;\n      flex-direction: column;\n      gap: 0.5rem;\n      margin-bottom: 2rem;\n      border-radius: 0.75rem;\n    `,\n    seoPreviewSection: css`\n      display: flex;\n      flex-direction: row;\n      gap: 16px;\n      margin-bottom: 0;\n      justify-content: flex-start;\n      align-items: flex-start;\n      overflow-x: auto;\n      flex-wrap: wrap;\n      padding-bottom: 0.5rem;\n    `,\n    seoPreviewCard: css`\n      border: 1px solid ${colors.gray[700]};\n      border-radius: 8px;\n      padding: 12px 10px;\n      background: ${colors.darkGray[900]};\n      margin-bottom: 0;\n      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      min-width: 200px;\n      max-width: 240px;\n      font-size: 0.95rem;\n      gap: 4px;\n    `,\n    seoPreviewHeader: css`\n      font-size: 1rem;\n      font-weight: 500;\n      margin-bottom: 6px;\n      color: ${colors.purple[400]};\n    `,\n    seoPreviewImage: css`\n      max-width: 100%;\n      border-radius: 6px;\n      margin-bottom: 6px;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n      height: 160px;\n    `,\n    seoPreviewTitle: css`\n      font-size: 1rem;\n      font-weight: 600;\n      margin-bottom: 2px;\n      color: ${colors.gray[100]};\n    `,\n    seoPreviewDesc: css`\n      color: ${colors.gray[300]};\n      margin-bottom: 2px;\n      font-size: 0.95rem;\n    `,\n    seoPreviewUrl: css`\n      color: ${colors.gray[500]};\n      font-size: 0.9rem;\n      margin-bottom: 2px;\n      word-break: break-all;\n    `,\n    seoMissingTagsSection: css`\n      margin-top: 4px;\n      font-size: 0.95rem;\n      color: ${colors.red[400]};\n    `,\n    seoMissingTagsList: css`\n      margin: 4px 0 0 0;\n      padding: 0;\n      list-style: none;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n      max-width: 240px;\n    `,\n    seoMissingTag: css`\n      background: ${colors.red[500]}22;\n      color: ${colors.red[500]};\n      border-radius: 4px;\n      padding: 1px 6px;\n      font-size: 0.9rem;\n      font-weight: 500;\n    `,\n    seoAllTagsFound: css`\n      color: ${colors.green[500]};\n      font-weight: 500;\n      margin-left: 6px;\n      font-size: 0.95rem;\n    `,\n    devtoolsPanelContainer: (\n      panelLocation: TanStackDevtoolsConfig['panelLocation'],\n      isDetached: boolean,\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      ${isDetached ? '' : '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    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      user-select: none;\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):not(.detach) {\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      &.detach {\n        &:hover {\n          background-color: ${colors.gray[700]};\n        }\n        &:hover {\n          color: ${colors.green[500]};\n        }\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\n    pluginsTabDraw: css`\n      width: 0px;\n      height: 100%;\n      background-color: ${colors.darkGray[800]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n    `,\n    pluginsTabDrawExpanded: css`\n      width: ${size[48]};\n      border-right: 1px solid ${colors.gray[700]};\n    `,\n    pluginsTabDrawTransition: (mSeconds: number) => {\n      return css`\n        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;\n      `\n    },\n\n    pluginsTabSidebar: css`\n      width: ${size[48]};\n      overflow-y: auto;\n      transform: translateX(-100%);\n    `,\n    pluginsTabSidebarExpanded: css`\n      transform: translateX(0);\n    `,\n    pluginsTabSidebarTransition: (mSeconds: number) => {\n      return css`\n        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;\n      `\n    },\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    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    settingsModifiers: css`\n      display: flex;\n      gap: 0.5rem;\n    `,\n  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/tabs/seo-tab.js

@@ -1,8 +1,9 @@
-import { template, insert, createComponent, memo, effect, className, setAttribute } from "solid-js/web";
+import { createComponent, template, insert, memo, effect, className, setAttribute } from "solid-js/web";
 import { createSignal, For } from "solid-js";
+import { MainPanel, Section, SectionTitle, SectionIcon, SectionDescription } from "@tanstack/devtools-ui";
 import { useStyles } from "../styles/use-styles.js";
 import { useHeadChanges } from "../hooks/use-head-changes.js";
-var _tmpl$ = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<img alt=Preview>`), _tmpl$3 = /* @__PURE__ */ template(`<div>No Image`), _tmpl$4 = /* @__PURE__ */ template(`<div><section><h3><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m10 9-3 3 3 3"></path><path d="m14 15 3-3-3-3"></path><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg>Social previews</h3><p>See how your current page will look when shared on popular social networks. The tool checks for essential meta tags and highlights any that are missing.</p><div>`), _tmpl$5 = /* @__PURE__ */ template(`<div>`), _tmpl$6 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`), _tmpl$7 = /* @__PURE__ */ template(`<li>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<img alt=Preview>`), _tmpl$3 = /* @__PURE__ */ template(`<div>No Image`), _tmpl$4 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m10 9-3 3 3 3"></path><path d="m14 15 3-3-3-3"></path><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719">`), _tmpl$5 = /* @__PURE__ */ template(`<div>`), _tmpl$6 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`), _tmpl$7 = /* @__PURE__ */ template(`<li>`);
 const SOCIALS = [
   {
     network: "Facebook",
@@ -210,80 +211,83 @@ const SeoTab = () => {
   useHeadChanges(() => {
     setReports(analyzeHead());
   });
-  return (() => {
-    var _el$9 = _tmpl$4(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$1.nextSibling, _el$12 = _el$11.nextSibling;
-    insert(_el$12, createComponent(For, {
-      get each() {
-        return reports();
-      },
-      children: (report, i) => {
-        const social = SOCIALS[i()];
-        return (() => {
-          var _el$13 = _tmpl$5();
-          insert(_el$13, createComponent(SocialPreview, {
-            get meta() {
-              return report.found;
-            },
-            get color() {
-              return social.color;
-            },
-            get network() {
-              return social.network;
+  return createComponent(MainPanel, {
+    withPadding: true,
+    get children() {
+      return createComponent(Section, {
+        get children() {
+          return [createComponent(SectionTitle, {
+            get children() {
+              return [createComponent(SectionIcon, {
+                get children() {
+                  return _tmpl$4();
+                }
+              }), "Social previews"];
             }
-          }), null);
-          insert(_el$13, (() => {
-            var _c$2 = memo(() => report.missing.length > 0);
-            return () => _c$2() ? (() => {
-              var _el$14 = _tmpl$6(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$18 = _el$16.nextSibling;
-              _el$18.nextSibling;
-              var _el$19 = _el$15.nextSibling;
-              insert(_el$15, () => social?.network, _el$18);
-              insert(_el$19, createComponent(For, {
-                get each() {
-                  return report.missing;
-                },
-                children: (tag) => (() => {
-                  var _el$20 = _tmpl$7();
-                  insert(_el$20, tag);
-                  effect(() => className(_el$20, styles().seoMissingTag));
-                  return _el$20;
-                })()
-              }));
-              effect((_p$) => {
-                var _v$14 = styles().seoMissingTagsSection, _v$15 = styles().seoMissingTagsList;
-                _v$14 !== _p$.e && className(_el$14, _p$.e = _v$14);
-                _v$15 !== _p$.t && className(_el$19, _p$.t = _v$15);
-                return _p$;
-              }, {
-                e: void 0,
-                t: void 0
-              });
-              return _el$14;
-            })() : null;
-          })(), null);
-          return _el$13;
-        })();
-      }
-    }));
-    effect((_p$) => {
-      var _v$0 = styles().seoTabContainer, _v$1 = styles().seoTabSection, _v$10 = styles().sectionTitle, _v$11 = styles().sectionIcon, _v$12 = styles().sectionDescription, _v$13 = styles().seoPreviewSection;
-      _v$0 !== _p$.e && className(_el$9, _p$.e = _v$0);
-      _v$1 !== _p$.t && className(_el$0, _p$.t = _v$1);
-      _v$10 !== _p$.a && className(_el$1, _p$.a = _v$10);
-      _v$11 !== _p$.o && setAttribute(_el$10, "class", _p$.o = _v$11);
-      _v$12 !== _p$.i && className(_el$11, _p$.i = _v$12);
-      _v$13 !== _p$.n && className(_el$12, _p$.n = _v$13);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0
-    });
-    return _el$9;
-  })();
+          }), createComponent(SectionDescription, {
+            children: "See how your current page will look when shared on popular social networks. The tool checks for essential meta tags and highlights any that are missing."
+          }), (() => {
+            var _el$0 = _tmpl$5();
+            insert(_el$0, createComponent(For, {
+              get each() {
+                return reports();
+              },
+              children: (report, i) => {
+                const social = SOCIALS[i()];
+                return (() => {
+                  var _el$1 = _tmpl$5();
+                  insert(_el$1, createComponent(SocialPreview, {
+                    get meta() {
+                      return report.found;
+                    },
+                    get color() {
+                      return social.color;
+                    },
+                    get network() {
+                      return social.network;
+                    }
+                  }), null);
+                  insert(_el$1, (() => {
+                    var _c$2 = memo(() => report.missing.length > 0);
+                    return () => _c$2() ? (() => {
+                      var _el$10 = _tmpl$6(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$14 = _el$12.nextSibling;
+                      _el$14.nextSibling;
+                      var _el$15 = _el$11.nextSibling;
+                      insert(_el$11, () => social?.network, _el$14);
+                      insert(_el$15, createComponent(For, {
+                        get each() {
+                          return report.missing;
+                        },
+                        children: (tag) => (() => {
+                          var _el$16 = _tmpl$7();
+                          insert(_el$16, tag);
+                          effect(() => className(_el$16, styles().seoMissingTag));
+                          return _el$16;
+                        })()
+                      }));
+                      effect((_p$) => {
+                        var _v$0 = styles().seoMissingTagsSection, _v$1 = styles().seoMissingTagsList;
+                        _v$0 !== _p$.e && className(_el$10, _p$.e = _v$0);
+                        _v$1 !== _p$.t && className(_el$15, _p$.t = _v$1);
+                        return _p$;
+                      }, {
+                        e: void 0,
+                        t: void 0
+                      });
+                      return _el$10;
+                    })() : null;
+                  })(), null);
+                  return _el$1;
+                })();
+              }
+            }));
+            effect(() => className(_el$0, styles().seoPreviewSection));
+            return _el$0;
+          })()];
+        }
+      });
+    }
+  });
 };
 export {
   SeoTab

package/dist/esm/tabs/seo-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"seo-tab.js","sources":["../../../src/tabs/seo-tab.tsx"],"sourcesContent":["import { For, createSignal } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useHeadChanges } from '../hooks/use-head-changes'\n\ntype SocialMeta = {\n  title?: string\n  description?: string\n  image?: string\n  url?: string\n}\n\ntype SocialReport = {\n  network: string\n  found: Partial<SocialMeta>\n  missing: Array<string>\n}\n\nconst SOCIALS = [\n  {\n    network: 'Facebook',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4267B2',\n  },\n  {\n    network: 'X/Twitter',\n    tags: [\n      { key: 'twitter:title', prop: 'title' },\n      { key: 'twitter:description', prop: 'description' },\n      { key: 'twitter:image', prop: 'image' },\n      { key: 'twitter:url', prop: 'url' },\n    ],\n    color: '#1DA1F2',\n  },\n  {\n    network: 'LinkedIn',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#0077B5',\n  },\n  {\n    network: 'Discord',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#5865F2',\n  },\n  {\n    network: 'Slack',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4A154B',\n  },\n  {\n    network: 'Mastodon',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#6364FF',\n  },\n  {\n    network: 'Bluesky',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#1185FE',\n  },\n  // Add more networks as needed\n]\nfunction SocialPreview(props: {\n  meta: SocialMeta\n  color: string\n  network: string\n}) {\n  const styles = useStyles()\n\n  return (\n    <div\n      class={styles().seoPreviewCard}\n      style={{ 'border-color': props.color }}\n    >\n      <div class={styles().seoPreviewHeader} style={{ color: props.color }}>\n        {props.network} Preview\n      </div>\n      {props.meta.image ? (\n        <img\n          src={props.meta.image}\n          alt=\"Preview\"\n          class={styles().seoPreviewImage}\n        />\n      ) : (\n        <div\n          class={styles().seoPreviewImage}\n          style={{\n            background: '#222',\n            color: '#888',\n            display: 'flex',\n            'align-items': 'center',\n            'justify-content': 'center',\n            'min-height': '80px',\n            width: '100%',\n          }}\n        >\n          No Image\n        </div>\n      )}\n      <div class={styles().seoPreviewTitle}>\n        {props.meta.title || 'No Title'}\n      </div>\n      <div class={styles().seoPreviewDesc}>\n        {props.meta.description || 'No Description'}\n      </div>\n      <div class={styles().seoPreviewUrl}>\n        {props.meta.url || window.location.href}\n      </div>\n    </div>\n  )\n}\nexport const SeoTab = () => {\n  const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())\n  const styles = useStyles()\n\n  function analyzeHead(): Array<SocialReport> {\n    const metaTags = Array.from(document.head.querySelectorAll('meta'))\n    const reports: Array<SocialReport> = []\n\n    for (const social of SOCIALS) {\n      const found: Partial<SocialMeta> = {}\n      const missing: Array<string> = []\n      for (const tag of social.tags) {\n        const meta = metaTags.find(\n          (m) =>\n            (tag.key.includes('twitter:')\n              ? false\n              : m.getAttribute('property') === tag.key) ||\n            m.getAttribute('name') === tag.key,\n        )\n\n        if (meta && meta.getAttribute('content')) {\n          found[tag.prop as keyof SocialMeta] =\n            meta.getAttribute('content') || undefined\n        } else {\n          missing.push(tag.key)\n        }\n      }\n      reports.push({ network: social.network, found, missing })\n    }\n    return reports\n  }\n\n  useHeadChanges(() => {\n    setReports(analyzeHead())\n  })\n\n  return (\n    <div class={styles().seoTabContainer}>\n      <section class={styles().seoTabSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\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=\"m10 9-3 3 3 3\" />\n            <path d=\"m14 15 3-3-3-3\" />\n            <path d=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\" />\n          </svg>\n          Social previews\n        </h3>\n        <p class={styles().sectionDescription}>\n          See how your current page will look when shared on popular social\n          networks. The tool checks for essential meta tags and highlights any\n          that are missing.\n        </p>\n        <div class={styles().seoPreviewSection}>\n          <For each={reports()}>\n            {(report, i) => {\n              const social = SOCIALS[i()]\n              return (\n                <div>\n                  <SocialPreview\n                    meta={report.found}\n                    color={social!.color}\n                    network={social!.network}\n                  />\n                  {report.missing.length > 0 ? (\n                    <>\n                      <div class={styles().seoMissingTagsSection}>\n                        <strong>Missing tags for {social?.network}:</strong>\n\n                        <ul class={styles().seoMissingTagsList}>\n                          <For each={report.missing}>\n                            {(tag) => (\n                              <li class={styles().seoMissingTag}>{tag}</li>\n                            )}\n                          </For>\n                        </ul>\n                      </div>\n                    </>\n                  ) : null}\n                </div>\n              )\n            }}\n          </For>\n        </div>\n      </section>\n      {/* Future sections can be added here as <section class={styles().seoTabSection}>...</section> */}\n    </div>\n  )\n}\n"],"names":["SOCIALS","network","tags","key","prop","color","SocialPreview","props","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","_c$","_$memo","meta","image","_el$7","_tmpl$2","_$effect","_p$","_v$8","_v$9","seoPreviewImage","e","_$setAttribute","t","_$className","undefined","_el$8","_tmpl$3","style","setProperty","title","description","url","window","location","href","_v$","seoPreviewCard","_v$2","_v$3","seoPreviewHeader","_v$4","_v$5","seoPreviewTitle","_v$6","seoPreviewDesc","_v$7","seoPreviewUrl","removeProperty","a","o","i","n","s","SeoTab","reports","setReports","createSignal","analyzeHead","metaTags","Array","from","document","head","querySelectorAll","social","found","missing","tag","find","m","includes","getAttribute","push","useHeadChanges","_el$9","_tmpl$4","_el$0","_el$1","_el$10","_el$11","_el$12","_$createComponent","For","each","children","report","_el$13","_tmpl$5","_c$2","length","_el$14","_tmpl$6","_el$15","_el$16","_el$18","_el$19","_el$20","_tmpl$7","seoMissingTag","_v$14","seoMissingTagsSection","_v$15","seoMissingTagsList","_v$0","seoTabContainer","_v$1","seoTabSection","_v$10","sectionTitle","_v$11","sectionIcon","_v$12","sectionDescription","_v$13","seoPreviewSection"],"mappings":"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"}
+{"version":3,"file":"seo-tab.js","sources":["../../../src/tabs/seo-tab.tsx"],"sourcesContent":["import { For, createSignal } from 'solid-js'\nimport {\n  MainPanel,\n  Section,\n  SectionDescription,\n  SectionIcon,\n  SectionTitle,\n} from '@tanstack/devtools-ui'\nimport { useStyles } from '../styles/use-styles'\nimport { useHeadChanges } from '../hooks/use-head-changes'\n\ntype SocialMeta = {\n  title?: string\n  description?: string\n  image?: string\n  url?: string\n}\n\ntype SocialReport = {\n  network: string\n  found: Partial<SocialMeta>\n  missing: Array<string>\n}\n\nconst SOCIALS = [\n  {\n    network: 'Facebook',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4267B2',\n  },\n  {\n    network: 'X/Twitter',\n    tags: [\n      { key: 'twitter:title', prop: 'title' },\n      { key: 'twitter:description', prop: 'description' },\n      { key: 'twitter:image', prop: 'image' },\n      { key: 'twitter:url', prop: 'url' },\n    ],\n    color: '#1DA1F2',\n  },\n  {\n    network: 'LinkedIn',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#0077B5',\n  },\n  {\n    network: 'Discord',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#5865F2',\n  },\n  {\n    network: 'Slack',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4A154B',\n  },\n  {\n    network: 'Mastodon',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#6364FF',\n  },\n  {\n    network: 'Bluesky',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#1185FE',\n  },\n  // Add more networks as needed\n]\nfunction SocialPreview(props: {\n  meta: SocialMeta\n  color: string\n  network: string\n}) {\n  const styles = useStyles()\n\n  return (\n    <div\n      class={styles().seoPreviewCard}\n      style={{ 'border-color': props.color }}\n    >\n      <div class={styles().seoPreviewHeader} style={{ color: props.color }}>\n        {props.network} Preview\n      </div>\n      {props.meta.image ? (\n        <img\n          src={props.meta.image}\n          alt=\"Preview\"\n          class={styles().seoPreviewImage}\n        />\n      ) : (\n        <div\n          class={styles().seoPreviewImage}\n          style={{\n            background: '#222',\n            color: '#888',\n            display: 'flex',\n            'align-items': 'center',\n            'justify-content': 'center',\n            'min-height': '80px',\n            width: '100%',\n          }}\n        >\n          No Image\n        </div>\n      )}\n      <div class={styles().seoPreviewTitle}>\n        {props.meta.title || 'No Title'}\n      </div>\n      <div class={styles().seoPreviewDesc}>\n        {props.meta.description || 'No Description'}\n      </div>\n      <div class={styles().seoPreviewUrl}>\n        {props.meta.url || window.location.href}\n      </div>\n    </div>\n  )\n}\nexport const SeoTab = () => {\n  const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())\n  const styles = useStyles()\n\n  function analyzeHead(): Array<SocialReport> {\n    const metaTags = Array.from(document.head.querySelectorAll('meta'))\n    const reports: Array<SocialReport> = []\n\n    for (const social of SOCIALS) {\n      const found: Partial<SocialMeta> = {}\n      const missing: Array<string> = []\n      for (const tag of social.tags) {\n        const meta = metaTags.find(\n          (m) =>\n            (tag.key.includes('twitter:')\n              ? false\n              : m.getAttribute('property') === tag.key) ||\n            m.getAttribute('name') === tag.key,\n        )\n\n        if (meta && meta.getAttribute('content')) {\n          found[tag.prop as keyof SocialMeta] =\n            meta.getAttribute('content') || undefined\n        } else {\n          missing.push(tag.key)\n        }\n      }\n      reports.push({ network: social.network, found, missing })\n    }\n    return reports\n  }\n\n  useHeadChanges(() => {\n    setReports(analyzeHead())\n  })\n\n  return (\n    <MainPanel withPadding>\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\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=\"m10 9-3 3 3 3\" />\n              <path d=\"m14 15 3-3-3-3\" />\n              <path d=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\" />\n            </svg>\n          </SectionIcon>\n          Social previews\n        </SectionTitle>\n        <SectionDescription>\n          See how your current page will look when shared on popular social\n          networks. The tool checks for essential meta tags and highlights any\n          that are missing.\n        </SectionDescription>\n        <div class={styles().seoPreviewSection}>\n          <For each={reports()}>\n            {(report, i) => {\n              const social = SOCIALS[i()]\n              return (\n                <div>\n                  <SocialPreview\n                    meta={report.found}\n                    color={social!.color}\n                    network={social!.network}\n                  />\n                  {report.missing.length > 0 ? (\n                    <>\n                      <div class={styles().seoMissingTagsSection}>\n                        <strong>Missing tags for {social?.network}:</strong>\n\n                        <ul class={styles().seoMissingTagsList}>\n                          <For each={report.missing}>\n                            {(tag) => (\n                              <li class={styles().seoMissingTag}>{tag}</li>\n                            )}\n                          </For>\n                        </ul>\n                      </div>\n                    </>\n                  ) : null}\n                </div>\n              )\n            }}\n          </For>\n        </div>\n      </Section>\n    </MainPanel>\n  )\n}\n"],"names":["SOCIALS","network","tags","key","prop","color","SocialPreview","props","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","_c$","_$memo","meta","image","_el$7","_tmpl$2","_$effect","_p$","_v$8","_v$9","seoPreviewImage","e","_$setAttribute","t","_$className","undefined","_el$8","_tmpl$3","style","setProperty","title","description","url","window","location","href","_v$","seoPreviewCard","_v$2","_v$3","seoPreviewHeader","_v$4","_v$5","seoPreviewTitle","_v$6","seoPreviewDesc","_v$7","seoPreviewUrl","removeProperty","a","o","i","n","s","SeoTab","reports","setReports","createSignal","analyzeHead","metaTags","Array","from","document","head","querySelectorAll","social","found","missing","tag","find","m","includes","getAttribute","push","useHeadChanges","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","_tmpl$4","SectionDescription","_el$0","_tmpl$5","For","each","report","_el$1","_c$2","length","_el$10","_tmpl$6","_el$11","_el$12","_el$14","_el$15","_el$16","_tmpl$7","seoMissingTag","_v$0","seoMissingTagsSection","_v$1","seoMissingTagsList","seoPreviewSection"],"mappings":"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"}