@tanstack/devtools 0.4.4 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/main-panel.js +3 -1
- package/dist/esm/components/main-panel.js.map +1 -1
- package/dist/esm/components/tab-content.js +3 -6
- package/dist/esm/components/tab-content.js.map +1 -1
- package/dist/esm/components/tabs.js +34 -19
- package/dist/esm/components/tabs.js.map +1 -1
- package/dist/esm/context/pip-context.d.ts +14 -0
- package/dist/esm/context/pip-context.js +118 -0
- package/dist/esm/context/pip-context.js.map +1 -0
- package/dist/esm/core.js +8 -3
- package/dist/esm/core.js.map +1 -1
- package/dist/esm/devtools.js +45 -41
- package/dist/esm/devtools.js.map +1 -1
- package/dist/esm/styles/tokens.js +3 -0
- package/dist/esm/styles/tokens.js.map +1 -1
- package/dist/esm/styles/use-styles.d.ts +1 -1
- package/dist/esm/styles/use-styles.js +11 -4
- package/dist/esm/styles/use-styles.js.map +1 -1
- package/dist/esm/tabs/settings-tab.js +0 -1
- package/dist/esm/tabs/settings-tab.js.map +1 -1
- package/package.json +3 -8
- package/src/components/main-panel.tsx +7 -2
- package/src/components/tab-content.tsx +4 -9
- package/src/components/tabs.tsx +58 -20
- package/src/context/pip-context.tsx +178 -0
- package/src/core.tsx +6 -3
- package/src/devtools.tsx +36 -26
- package/src/styles/use-styles.ts +11 -3
- package/src/tabs/settings-tab.tsx +0 -1
- package/dist/cjs/components/content-panel.cjs +0 -32
- package/dist/cjs/components/content-panel.cjs.map +0 -1
- package/dist/cjs/components/content-panel.d.cts +0 -6
- package/dist/cjs/components/main-panel.cjs +0 -34
- package/dist/cjs/components/main-panel.cjs.map +0 -1
- package/dist/cjs/components/main-panel.d.cts +0 -6
- package/dist/cjs/components/tab-content.cjs +0 -26
- package/dist/cjs/components/tab-content.cjs.map +0 -1
- package/dist/cjs/components/tab-content.d.cts +0 -2
- package/dist/cjs/components/tabs.cjs +0 -47
- package/dist/cjs/components/tabs.cjs.map +0 -1
- package/dist/cjs/components/tabs.d.cts +0 -5
- package/dist/cjs/components/trigger.cjs +0 -31
- package/dist/cjs/components/trigger.cjs.map +0 -1
- package/dist/cjs/components/trigger.d.cts +0 -5
- package/dist/cjs/constants.cjs +0 -7
- package/dist/cjs/constants.cjs.map +0 -1
- package/dist/cjs/constants.d.cts +0 -2
- package/dist/cjs/context/devtools-context.cjs +0 -77
- package/dist/cjs/context/devtools-context.cjs.map +0 -1
- package/dist/cjs/context/devtools-context.d.cts +0 -62
- package/dist/cjs/context/devtools-store.cjs +0 -28
- package/dist/cjs/context/devtools-store.cjs.map +0 -1
- package/dist/cjs/context/devtools-store.d.cts +0 -54
- package/dist/cjs/context/use-devtools-context.cjs +0 -78
- package/dist/cjs/context/use-devtools-context.cjs.map +0 -1
- package/dist/cjs/context/use-devtools-context.d.cts +0 -35
- package/dist/cjs/core.cjs +0 -74
- package/dist/cjs/core.cjs.map +0 -1
- package/dist/cjs/core.d.cts +0 -39
- package/dist/cjs/devtools.cjs +0 -184
- package/dist/cjs/devtools.cjs.map +0 -1
- package/dist/cjs/devtools.d.cts +0 -1
- package/dist/cjs/hooks/use-disable-tabbing.cjs +0 -23
- package/dist/cjs/hooks/use-disable-tabbing.cjs.map +0 -1
- package/dist/cjs/hooks/use-disable-tabbing.d.cts +0 -6
- package/dist/cjs/index.cjs +0 -8
- package/dist/cjs/index.cjs.map +0 -1
- package/dist/cjs/index.d.cts +0 -4
- package/dist/cjs/styles/tokens.cjs +0 -50
- package/dist/cjs/styles/tokens.cjs.map +0 -1
- package/dist/cjs/styles/tokens.d.cts +0 -298
- package/dist/cjs/styles/use-styles.cjs +0 -326
- package/dist/cjs/styles/use-styles.cjs.map +0 -1
- package/dist/cjs/styles/use-styles.d.cts +0 -29
- package/dist/cjs/tabs/index.cjs +0 -19
- package/dist/cjs/tabs/index.cjs.map +0 -1
- package/dist/cjs/tabs/index.d.cts +0 -12
- package/dist/cjs/tabs/plugins-tab.cjs +0 -69
- package/dist/cjs/tabs/plugins-tab.cjs.map +0 -1
- package/dist/cjs/tabs/plugins-tab.d.cts +0 -1
- package/dist/cjs/tabs/settings-tab.cjs +0 -252
- package/dist/cjs/tabs/settings-tab.cjs.map +0 -1
- package/dist/cjs/tabs/settings-tab.d.cts +0 -1
- package/dist/cjs/utils/sanitize.cjs +0 -31
- package/dist/cjs/utils/sanitize.cjs.map +0 -1
- package/dist/cjs/utils/sanitize.d.cts +0 -3
- package/dist/cjs/utils/storage.cjs +0 -19
- package/dist/cjs/utils/storage.cjs.map +0 -1
- package/dist/cjs/utils/storage.d.cts +0 -5
|
@@ -1 +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,IAEP;AAAA,IACA,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MACL,KAAK;AAAA,MAGL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAUJ,KAAK;AAAA,IAEP;AAAA,
|
|
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,IAEP;AAAA,IACA,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MACL,KAAK;AAAA,MAGL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAUJ,KAAK;AAAA,IAEP;AAAA,IACA,OAAO;AAAA,MAOL,KAAK;AAAA,IAKP;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,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;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { TanStackDevtoolsConfig } from '../context/devtools-context.js';
|
|
2
2
|
import { Accessor } from 'solid-js';
|
|
3
3
|
export declare function useStyles(): Accessor<{
|
|
4
|
-
devtoolsPanelContainer: (panelLocation: TanStackDevtoolsConfig["panelLocation"]) => string;
|
|
4
|
+
devtoolsPanelContainer: (panelLocation: TanStackDevtoolsConfig["panelLocation"], isDetached: boolean) => string;
|
|
5
5
|
devtoolsPanelContainerVisibility: (isOpen: boolean) => string;
|
|
6
6
|
devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => string;
|
|
7
7
|
devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => string;
|
|
@@ -6,7 +6,7 @@ const stylesFactory = () => {
|
|
|
6
6
|
const { fontFamily, size: fontSize } = font;
|
|
7
7
|
const css = goober.css;
|
|
8
8
|
return {
|
|
9
|
-
devtoolsPanelContainer: (panelLocation) => css`
|
|
9
|
+
devtoolsPanelContainer: (panelLocation, isDetached) => css`
|
|
10
10
|
direction: ltr;
|
|
11
11
|
position: fixed;
|
|
12
12
|
overflow-y: hidden;
|
|
@@ -15,8 +15,7 @@ const stylesFactory = () => {
|
|
|
15
15
|
right: 0;
|
|
16
16
|
z-index: 99999;
|
|
17
17
|
width: 100%;
|
|
18
|
-
|
|
19
|
-
max-height: 90%;
|
|
18
|
+
${isDetached ? "" : "max-height: 90%;"}
|
|
20
19
|
border-top: 1px solid ${colors.gray[700]};
|
|
21
20
|
transform-origin: top;
|
|
22
21
|
`,
|
|
@@ -162,7 +161,7 @@ const stylesFactory = () => {
|
|
|
162
161
|
border: none;
|
|
163
162
|
transition: all 0.2s ease-in-out;
|
|
164
163
|
border-left: 2px solid transparent;
|
|
165
|
-
&:hover:not(.close):not(.active) {
|
|
164
|
+
&:hover:not(.close):not(.active):not(.detach) {
|
|
166
165
|
background-color: ${colors.gray[700]};
|
|
167
166
|
color: ${colors.gray[100]};
|
|
168
167
|
border-left: 2px solid ${colors.purple[500]};
|
|
@@ -172,6 +171,14 @@ const stylesFactory = () => {
|
|
|
172
171
|
color: ${colors.gray[100]};
|
|
173
172
|
border-left: 2px solid ${colors.purple[500]};
|
|
174
173
|
}
|
|
174
|
+
&.detach {
|
|
175
|
+
&:hover {
|
|
176
|
+
background-color: ${colors.gray[700]};
|
|
177
|
+
}
|
|
178
|
+
&:hover {
|
|
179
|
+
color: ${colors.green[500]};
|
|
180
|
+
}
|
|
181
|
+
}
|
|
175
182
|
&.close {
|
|
176
183
|
margin-top: auto;
|
|
177
184
|
&:hover {
|
|
@@ -1 +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 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 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) {\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 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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"}
|
|
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 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 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 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 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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"}
|
|
@@ -141,7 +141,6 @@ const SettingsTab = () => {
|
|
|
141
141
|
return modifiers3;
|
|
142
142
|
};
|
|
143
143
|
const modifiers2 = e.split("+").flatMap((key) => makeModifierArray(key)).filter(Boolean);
|
|
144
|
-
console.log(e, modifiers2);
|
|
145
144
|
return setSettings({
|
|
146
145
|
openHotkey: [...hotkey().filter((key) => ["Shift", "Meta", "Alt", "Ctrl"].includes(key)), ...modifiers2]
|
|
147
146
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show, createMemo } from 'solid-js'\nimport { Button, Checkbox, Input, Select } from '@tanstack/devtools-ui'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\nimport type { ModifierKey } from '@solid-primitives/keyboard'\n\nexport const SettingsTab = () => {\n const { setSettings, settings } = useDevtoolsSettings()\n const styles = useStyles()\n const hotkey = createMemo(() => settings().openHotkey)\n const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']\n const changeHotkey = (newHotkey: ModifierKey) => () => {\n if (hotkey().includes(newHotkey)) {\n return setSettings({\n openHotkey: hotkey().filter((key) => key !== newHotkey),\n })\n }\n const existingModifiers = hotkey().filter((key) =>\n modifiers.includes(key as any),\n )\n const otherModifiers = hotkey().filter(\n (key) => !modifiers.includes(key as any),\n )\n setSettings({\n openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],\n })\n }\n return (\n <div class={styles().settingsContainer}>\n {/* General Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\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 class={styles().sectionIcon}\n >\n <path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n General\n </h3>\n <p class={styles().sectionDescription}>\n Configure general behavior of the devtools panel.\n </p>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Default open\"\n description=\"Automatically open the devtools panel when the page loads\"\n onChange={() =>\n setSettings({ defaultOpen: !settings().defaultOpen })\n }\n checked={settings().defaultOpen}\n />\n <Checkbox\n label=\"Hide trigger until hovered\"\n description=\"Keep the devtools trigger button hidden until you hover over its area\"\n onChange={() =>\n setSettings({ hideUntilHover: !settings().hideUntilHover })\n }\n checked={settings().hideUntilHover}\n />\n </div>\n </div>\n\n {/* URL Flag Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\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=\"M9 17H7A5 5 0 0 1 7 7h2\" />\n <path d=\"M15 7h2a5 5 0 1 1 0 10h-2\" />\n <line x1=\"8\" x2=\"16\" y1=\"12\" y2=\"12\" />\n </svg>\n URL Configuration\n </h3>\n <p class={styles().sectionDescription}>\n Control when devtools are available based on URL parameters.\n </p>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Require URL Flag\"\n description=\"Only show devtools when a specific URL parameter is present\"\n checked={settings().requireUrlFlag}\n onChange={(checked) =>\n setSettings({\n requireUrlFlag: checked,\n })\n }\n />\n <Show when={settings().requireUrlFlag}>\n <div class={styles().conditionalSetting}>\n <Input\n label=\"URL flag\"\n description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n placeholder=\"debug\"\n value={settings().urlFlag}\n onChange={(e) =>\n setSettings({\n urlFlag: e,\n })\n }\n />\n </div>\n </Show>\n </div>\n </div>\n\n {/* Keyboard Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\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 8h.01\" />\n <path d=\"M12 12h.01\" />\n <path d=\"M14 8h.01\" />\n <path d=\"M16 12h.01\" />\n <path d=\"M18 8h.01\" />\n <path d=\"M6 8h.01\" />\n <path d=\"M7 16h10\" />\n <path d=\"M8 12h.01\" />\n <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n </svg>\n Keyboard\n </h3>\n <p class={styles().sectionDescription}>\n Customize keyboard shortcuts for quick access.\n </p>\n <div class={styles().settingsGroup}>\n <div class={styles().settingsModifiers}>\n <Show keyed when={hotkey()}>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Shift')}\n outline={!hotkey().includes('Shift')}\n >\n Shift\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Alt')}\n outline={!hotkey().includes('Alt')}\n >\n Alt\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Meta')}\n outline={!hotkey().includes('Meta')}\n >\n Meta\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Control')}\n outline={!hotkey().includes('Control')}\n >\n Control\n </Button>\n </Show>\n </div>\n <Input\n label=\"Hotkey to open/close devtools\"\n description=\"Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above\"\n placeholder=\"a\"\n value={hotkey()\n .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))\n .join('+')}\n onChange={(e) => {\n const makeModifierArray = (key: string) => {\n if (key.length === 1) return [uppercaseFirstLetter(key)]\n const modifiers: Array<string> = []\n for (const character of key) {\n const newLetter = uppercaseFirstLetter(character)\n if (!modifiers.includes(newLetter)) modifiers.push(newLetter)\n }\n return modifiers\n }\n const modifiers = e\n .split('+')\n .flatMap((key) => makeModifierArray(key))\n .filter(Boolean)\n console.log(e, modifiers)\n return setSettings({\n openHotkey: [\n ...hotkey().filter((key) =>\n ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),\n ),\n ...modifiers,\n ],\n })\n }}\n />\n Final shortcut is: {hotkey().join(' + ')}\n </div>\n </div>\n\n {/* Position Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\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=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\" />\n <circle cx=\"12\" cy=\"10\" r=\"3\" />\n </svg>\n Position\n </h3>\n <p class={styles().sectionDescription}>\n Adjust the position of the trigger button and devtools panel.\n </p>\n <div class={styles().settingsGroup}>\n <div class={styles().settingRow}>\n <Select\n label=\"Trigger Position\"\n options={[\n { label: 'Bottom Right', value: 'bottom-right' },\n { label: 'Bottom Left', value: 'bottom-left' },\n { label: 'Top Right', value: 'top-right' },\n { label: 'Top Left', value: 'top-left' },\n { label: 'Middle Right', value: 'middle-right' },\n { label: 'Middle Left', value: 'middle-left' },\n ]}\n value={settings().position}\n onChange={(value) =>\n setSettings({\n position: value,\n })\n }\n />\n <Select\n label=\"Panel Position\"\n value={settings().panelLocation}\n options={[\n { label: 'Top', value: 'top' },\n { label: 'Bottom', value: 'bottom' },\n ]}\n onChange={(value) =>\n setSettings({\n panelLocation: value,\n })\n }\n />\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","hotkey","createMemo","openHotkey","modifiers","changeHotkey","newHotkey","includes","filter","key","existingModifiers","otherModifiers","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_$insert","_$createComponent","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","requireUrlFlag","Show","when","children","_el$10","_tmpl$","Input","placeholder","value","urlFlag","e","_$effect","_$className","conditionalSetting","keyed","Button","variant","onclick","outline","join","makeModifierArray","length","uppercaseFirstLetter","character","newLetter","push","split","flatMap","Boolean","console","log","Select","options","position","panelLocation","_p$","_v$","settingsContainer","_v$2","settingsSection","_v$3","sectionTitle","_v$4","sectionIcon","_v$5","sectionDescription","_v$6","settingsGroup","_v$7","_v$8","_v$9","_v$0","_v$1","_v$10","_v$11","_v$12","_v$13","_v$14","_v$15","settingsModifiers","_v$16","_v$17","_v$18","_v$19","_v$20","_v$21","settingRow","t","a","o","_$setAttribute","i","n","s","h","r","d","l","u","c","w","m","f","y","g","p","b","T","A","O","undefined"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show, createMemo } from 'solid-js'\nimport { Button, Checkbox, Input, Select } from '@tanstack/devtools-ui'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\nimport type { ModifierKey } from '@solid-primitives/keyboard'\n\nexport const SettingsTab = () => {\n const { setSettings, settings } = useDevtoolsSettings()\n const styles = useStyles()\n const hotkey = createMemo(() => settings().openHotkey)\n const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']\n const changeHotkey = (newHotkey: ModifierKey) => () => {\n if (hotkey().includes(newHotkey)) {\n return setSettings({\n openHotkey: hotkey().filter((key) => key !== newHotkey),\n })\n }\n const existingModifiers = hotkey().filter((key) =>\n modifiers.includes(key as any),\n )\n const otherModifiers = hotkey().filter(\n (key) => !modifiers.includes(key as any),\n )\n setSettings({\n openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],\n })\n }\n return (\n <div class={styles().settingsContainer}>\n {/* General Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\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 class={styles().sectionIcon}\n >\n <path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n General\n </h3>\n <p class={styles().sectionDescription}>\n Configure general behavior of the devtools panel.\n </p>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Default open\"\n description=\"Automatically open the devtools panel when the page loads\"\n onChange={() =>\n setSettings({ defaultOpen: !settings().defaultOpen })\n }\n checked={settings().defaultOpen}\n />\n <Checkbox\n label=\"Hide trigger until hovered\"\n description=\"Keep the devtools trigger button hidden until you hover over its area\"\n onChange={() =>\n setSettings({ hideUntilHover: !settings().hideUntilHover })\n }\n checked={settings().hideUntilHover}\n />\n </div>\n </div>\n\n {/* URL Flag Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\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=\"M9 17H7A5 5 0 0 1 7 7h2\" />\n <path d=\"M15 7h2a5 5 0 1 1 0 10h-2\" />\n <line x1=\"8\" x2=\"16\" y1=\"12\" y2=\"12\" />\n </svg>\n URL Configuration\n </h3>\n <p class={styles().sectionDescription}>\n Control when devtools are available based on URL parameters.\n </p>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Require URL Flag\"\n description=\"Only show devtools when a specific URL parameter is present\"\n checked={settings().requireUrlFlag}\n onChange={(checked) =>\n setSettings({\n requireUrlFlag: checked,\n })\n }\n />\n <Show when={settings().requireUrlFlag}>\n <div class={styles().conditionalSetting}>\n <Input\n label=\"URL flag\"\n description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n placeholder=\"debug\"\n value={settings().urlFlag}\n onChange={(e) =>\n setSettings({\n urlFlag: e,\n })\n }\n />\n </div>\n </Show>\n </div>\n </div>\n\n {/* Keyboard Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\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 8h.01\" />\n <path d=\"M12 12h.01\" />\n <path d=\"M14 8h.01\" />\n <path d=\"M16 12h.01\" />\n <path d=\"M18 8h.01\" />\n <path d=\"M6 8h.01\" />\n <path d=\"M7 16h10\" />\n <path d=\"M8 12h.01\" />\n <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n </svg>\n Keyboard\n </h3>\n <p class={styles().sectionDescription}>\n Customize keyboard shortcuts for quick access.\n </p>\n <div class={styles().settingsGroup}>\n <div class={styles().settingsModifiers}>\n <Show keyed when={hotkey()}>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Shift')}\n outline={!hotkey().includes('Shift')}\n >\n Shift\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Alt')}\n outline={!hotkey().includes('Alt')}\n >\n Alt\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Meta')}\n outline={!hotkey().includes('Meta')}\n >\n Meta\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Control')}\n outline={!hotkey().includes('Control')}\n >\n Control\n </Button>\n </Show>\n </div>\n <Input\n label=\"Hotkey to open/close devtools\"\n description=\"Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above\"\n placeholder=\"a\"\n value={hotkey()\n .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))\n .join('+')}\n onChange={(e) => {\n const makeModifierArray = (key: string) => {\n if (key.length === 1) return [uppercaseFirstLetter(key)]\n const modifiers: Array<string> = []\n for (const character of key) {\n const newLetter = uppercaseFirstLetter(character)\n if (!modifiers.includes(newLetter)) modifiers.push(newLetter)\n }\n return modifiers\n }\n const modifiers = e\n .split('+')\n .flatMap((key) => makeModifierArray(key))\n .filter(Boolean)\n return setSettings({\n openHotkey: [\n ...hotkey().filter((key) =>\n ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),\n ),\n ...modifiers,\n ],\n })\n }}\n />\n Final shortcut is: {hotkey().join(' + ')}\n </div>\n </div>\n\n {/* Position Settings */}\n <div class={styles().settingsSection}>\n <h3 class={styles().sectionTitle}>\n <svg\n class={styles().sectionIcon}\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=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\" />\n <circle cx=\"12\" cy=\"10\" r=\"3\" />\n </svg>\n Position\n </h3>\n <p class={styles().sectionDescription}>\n Adjust the position of the trigger button and devtools panel.\n </p>\n <div class={styles().settingsGroup}>\n <div class={styles().settingRow}>\n <Select\n label=\"Trigger Position\"\n options={[\n { label: 'Bottom Right', value: 'bottom-right' },\n { label: 'Bottom Left', value: 'bottom-left' },\n { label: 'Top Right', value: 'top-right' },\n { label: 'Top Left', value: 'top-left' },\n { label: 'Middle Right', value: 'middle-right' },\n { label: 'Middle Left', value: 'middle-left' },\n ]}\n value={settings().position}\n onChange={(value) =>\n setSettings({\n position: value,\n })\n }\n />\n <Select\n label=\"Panel Position\"\n value={settings().panelLocation}\n options={[\n { label: 'Top', value: 'top' },\n { label: 'Bottom', value: 'bottom' },\n ]}\n onChange={(value) =>\n setSettings({\n panelLocation: value,\n })\n }\n />\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","hotkey","createMemo","openHotkey","modifiers","changeHotkey","newHotkey","includes","filter","key","existingModifiers","otherModifiers","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_$insert","_$createComponent","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","requireUrlFlag","Show","when","children","_el$10","_tmpl$","Input","placeholder","value","urlFlag","e","_$effect","_$className","conditionalSetting","keyed","Button","variant","onclick","outline","join","makeModifierArray","length","uppercaseFirstLetter","character","newLetter","push","split","flatMap","Boolean","Select","options","position","panelLocation","_p$","_v$","settingsContainer","_v$2","settingsSection","_v$3","sectionTitle","_v$4","sectionIcon","_v$5","sectionDescription","_v$6","settingsGroup","_v$7","_v$8","_v$9","_v$0","_v$1","_v$10","_v$11","_v$12","_v$13","_v$14","_v$15","settingsModifiers","_v$16","_v$17","_v$18","_v$19","_v$20","_v$21","settingRow","t","a","o","_$setAttribute","i","n","s","h","r","d","l","u","c","w","m","f","y","g","p","b","T","A","O","undefined"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/devtools",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -19,17 +19,12 @@
|
|
|
19
19
|
],
|
|
20
20
|
"type": "module",
|
|
21
21
|
"types": "dist/esm/index.d.ts",
|
|
22
|
-
"main": "dist/cjs/index.cjs",
|
|
23
22
|
"module": "dist/esm/index.js",
|
|
24
23
|
"exports": {
|
|
25
24
|
".": {
|
|
26
25
|
"import": {
|
|
27
26
|
"types": "./dist/esm/index.d.ts",
|
|
28
27
|
"default": "./dist/esm/index.js"
|
|
29
|
-
},
|
|
30
|
-
"require": {
|
|
31
|
-
"types": "./dist/cjs/index.d.cts",
|
|
32
|
-
"default": "./dist/cjs/index.cjs"
|
|
33
28
|
}
|
|
34
29
|
},
|
|
35
30
|
"./package.json": "./package.json"
|
|
@@ -47,8 +42,8 @@
|
|
|
47
42
|
"clsx": "^2.1.1",
|
|
48
43
|
"goober": "^2.1.16",
|
|
49
44
|
"solid-js": "^1.9.7",
|
|
50
|
-
"@tanstack/devtools-
|
|
51
|
-
"@tanstack/devtools-
|
|
45
|
+
"@tanstack/devtools-event-bus": "0.3.0",
|
|
46
|
+
"@tanstack/devtools-ui": "0.3.1"
|
|
52
47
|
},
|
|
53
48
|
"peerDependencies": {
|
|
54
49
|
"solid-js": ">=1.9.7"
|
|
@@ -2,6 +2,7 @@ import clsx from 'clsx'
|
|
|
2
2
|
import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
|
|
3
3
|
import { useStyles } from '../styles/use-styles'
|
|
4
4
|
import { TANSTACK_DEVTOOLS } from '../utils/storage'
|
|
5
|
+
import { usePiPWindow } from '../context/pip-context'
|
|
5
6
|
import type { Accessor, JSX } from 'solid-js'
|
|
6
7
|
|
|
7
8
|
export const MainPanel = (props: {
|
|
@@ -12,14 +13,18 @@ export const MainPanel = (props: {
|
|
|
12
13
|
const styles = useStyles()
|
|
13
14
|
const { height } = useHeight()
|
|
14
15
|
const { settings } = useDevtoolsSettings()
|
|
16
|
+
const pip = usePiPWindow()
|
|
15
17
|
return (
|
|
16
18
|
<div
|
|
17
19
|
id={TANSTACK_DEVTOOLS}
|
|
18
20
|
style={{
|
|
19
|
-
height: height() + 'px',
|
|
21
|
+
height: pip().pipWindow ? '100vh' : height() + 'px',
|
|
20
22
|
}}
|
|
21
23
|
class={clsx(
|
|
22
|
-
styles().devtoolsPanelContainer(
|
|
24
|
+
styles().devtoolsPanelContainer(
|
|
25
|
+
settings().panelLocation,
|
|
26
|
+
Boolean(pip().pipWindow),
|
|
27
|
+
),
|
|
23
28
|
styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),
|
|
24
29
|
styles().devtoolsPanelContainerVisibility(props.isOpen()),
|
|
25
30
|
styles().devtoolsPanelContainerResizing(props.isResizing),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createMemo } from 'solid-js'
|
|
2
2
|
import { useDevtoolsState } from '../context/use-devtools-context'
|
|
3
3
|
import { tabs } from '../tabs'
|
|
4
4
|
import { useStyles } from '../styles/use-styles'
|
|
@@ -7,14 +7,9 @@ import type { JSX } from 'solid-js'
|
|
|
7
7
|
export const TabContent = () => {
|
|
8
8
|
const { state } = useDevtoolsState()
|
|
9
9
|
const styles = useStyles()
|
|
10
|
-
const
|
|
11
|
-
tabs.find((t) => t.id === state().activeTab)?.component
|
|
10
|
+
const component = createMemo<(() => JSX.Element) | null>(
|
|
11
|
+
() => tabs.find((t) => t.id === state().activeTab)?.component || null,
|
|
12
12
|
)
|
|
13
|
-
createEffect(() => {
|
|
14
|
-
setComponent(
|
|
15
|
-
tabs.find((t) => t.id === state().activeTab)?.component() || null,
|
|
16
|
-
)
|
|
17
|
-
})
|
|
18
13
|
|
|
19
|
-
return <div class={styles().tabContent}>{component()}</div>
|
|
14
|
+
return <div class={styles().tabContent}>{component()?.()}</div>
|
|
20
15
|
}
|
package/src/components/tabs.tsx
CHANGED
|
@@ -3,6 +3,7 @@ import { For } from 'solid-js'
|
|
|
3
3
|
import { useStyles } from '../styles/use-styles'
|
|
4
4
|
import { useDevtoolsState } from '../context/use-devtools-context'
|
|
5
5
|
import { tabs } from '../tabs'
|
|
6
|
+
import { usePiPWindow } from '../context/pip-context'
|
|
6
7
|
|
|
7
8
|
interface TabsProps {
|
|
8
9
|
toggleOpen: () => void
|
|
@@ -11,7 +12,12 @@ interface TabsProps {
|
|
|
11
12
|
export const Tabs = (props: TabsProps) => {
|
|
12
13
|
const styles = useStyles()
|
|
13
14
|
const { state, setState } = useDevtoolsState()
|
|
14
|
-
|
|
15
|
+
const pipWindow = usePiPWindow()
|
|
16
|
+
const handleDetachment = () => {
|
|
17
|
+
pipWindow().requestPipWindow(
|
|
18
|
+
`width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,
|
|
19
|
+
)
|
|
20
|
+
}
|
|
15
21
|
return (
|
|
16
22
|
<div class={styles().tabContainer}>
|
|
17
23
|
<For each={tabs}>
|
|
@@ -25,26 +31,58 @@ export const Tabs = (props: TabsProps) => {
|
|
|
25
31
|
</button>
|
|
26
32
|
)}
|
|
27
33
|
</For>
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<svg
|
|
34
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
35
|
-
width="24"
|
|
36
|
-
height="24"
|
|
37
|
-
viewBox="0 0 24 24"
|
|
38
|
-
fill="none"
|
|
39
|
-
stroke="currentColor"
|
|
40
|
-
stroke-width="2"
|
|
41
|
-
stroke-linecap="round"
|
|
42
|
-
stroke-linejoin="round"
|
|
34
|
+
{pipWindow().pipWindow !== null ? null : (
|
|
35
|
+
<div
|
|
36
|
+
style={{
|
|
37
|
+
'margin-top': 'auto',
|
|
38
|
+
}}
|
|
43
39
|
>
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
40
|
+
<button
|
|
41
|
+
type="button"
|
|
42
|
+
class={clsx(styles().tab, 'detach')}
|
|
43
|
+
onClick={handleDetachment}
|
|
44
|
+
>
|
|
45
|
+
<svg
|
|
46
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
47
|
+
width="24"
|
|
48
|
+
height="24"
|
|
49
|
+
viewBox="0 0 24 24"
|
|
50
|
+
fill="none"
|
|
51
|
+
stroke="currentColor"
|
|
52
|
+
stroke-width="2"
|
|
53
|
+
stroke-linecap="round"
|
|
54
|
+
stroke-linejoin="round"
|
|
55
|
+
class="lucide lucide-picture-in-picture-icon lucide-picture-in-picture"
|
|
56
|
+
>
|
|
57
|
+
<path d="M2 10h6V4" />
|
|
58
|
+
<path d="m2 4 6 6" />
|
|
59
|
+
<path d="M21 10V7a2 2 0 0 0-2-2h-7" />
|
|
60
|
+
<path d="M3 14v2a2 2 0 0 0 2 2h3" />
|
|
61
|
+
<rect x="12" y="14" width="10" height="7" rx="1" />
|
|
62
|
+
</svg>
|
|
63
|
+
</button>
|
|
64
|
+
<button
|
|
65
|
+
type="button"
|
|
66
|
+
class={clsx(styles().tab, 'close')}
|
|
67
|
+
onClick={() => props.toggleOpen()}
|
|
68
|
+
>
|
|
69
|
+
<svg
|
|
70
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
71
|
+
width="24"
|
|
72
|
+
height="24"
|
|
73
|
+
viewBox="0 0 24 24"
|
|
74
|
+
fill="none"
|
|
75
|
+
stroke="currentColor"
|
|
76
|
+
stroke-width="2"
|
|
77
|
+
stroke-linecap="round"
|
|
78
|
+
stroke-linejoin="round"
|
|
79
|
+
>
|
|
80
|
+
<path d="M18 6 6 18" />
|
|
81
|
+
<path d="m6 6 12 12" />
|
|
82
|
+
</svg>
|
|
83
|
+
</button>
|
|
84
|
+
</div>
|
|
85
|
+
)}
|
|
48
86
|
</div>
|
|
49
87
|
)
|
|
50
88
|
}
|