@tanstack/devtools 0.3.0 → 0.3.2
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.
|
@@ -277,6 +277,7 @@ const stylesFactory = () => {
|
|
|
277
277
|
display: flex;
|
|
278
278
|
align-items: center;
|
|
279
279
|
gap: 0.5rem;
|
|
280
|
+
text-align: left;
|
|
280
281
|
`,
|
|
281
282
|
sectionIcon: css`
|
|
282
283
|
color: ${colors.purple[400]};
|
|
@@ -286,6 +287,7 @@ const stylesFactory = () => {
|
|
|
286
287
|
font-size: 0.875rem;
|
|
287
288
|
margin: 0 0 1.5rem 0;
|
|
288
289
|
line-height: 1.5;
|
|
290
|
+
text-align: left;
|
|
289
291
|
`,
|
|
290
292
|
settingsGroup: css`
|
|
291
293
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-styles.cjs","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { 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 `,\n sectionIcon: css`\n color: ${colors.purple[400]};\n `,\n sectionDescription: css`\n color: ${colors.gray[400]};\n font-size: 0.875rem;\n margin: 0 0 1.5rem 0;\n line-height: 1.5;\n `,\n settingsGroup: css`\n display: flex;\n flex-direction: column;\n gap: 1rem;\n `,\n conditionalSetting: css`\n margin-left: 1.5rem;\n padding-left: 1rem;\n border-left: 2px solid ${colors.purple[400]};\n background-color: ${colors.darkGray[800]};\n padding: 1rem;\n border-radius: 0.5rem;\n margin-top: 0.5rem;\n `,\n settingRow: css`\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n }\n `,\n }\n}\n\nexport function useStyles() {\n const [_styles] = createSignal(stylesFactory())\n return _styles\n}\n"],"names":["tokens","goober","createSignal"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-styles.cjs","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { 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 }\n}\n\nexport function useStyles() {\n const [_styles] = createSignal(stylesFactory())\n return _styles\n}\n"],"names":["tokens","goober","createSignal"],"mappings":"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"}
|
|
@@ -258,6 +258,7 @@ const stylesFactory = () => {
|
|
|
258
258
|
display: flex;
|
|
259
259
|
align-items: center;
|
|
260
260
|
gap: 0.5rem;
|
|
261
|
+
text-align: left;
|
|
261
262
|
`,
|
|
262
263
|
sectionIcon: css`
|
|
263
264
|
color: ${colors.purple[400]};
|
|
@@ -267,6 +268,7 @@ const stylesFactory = () => {
|
|
|
267
268
|
font-size: 0.875rem;
|
|
268
269
|
margin: 0 0 1.5rem 0;
|
|
269
270
|
line-height: 1.5;
|
|
271
|
+
text-align: left;
|
|
270
272
|
`,
|
|
271
273
|
settingsGroup: css`
|
|
272
274
|
display: flex;
|
|
@@ -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 `,\n sectionIcon: css`\n color: ${colors.purple[400]};\n `,\n sectionDescription: css`\n color: ${colors.gray[400]};\n font-size: 0.875rem;\n margin: 0 0 1.5rem 0;\n line-height: 1.5;\n `,\n settingsGroup: css`\n display: flex;\n flex-direction: column;\n gap: 1rem;\n `,\n conditionalSetting: css`\n margin-left: 1.5rem;\n padding-left: 1rem;\n border-left: 2px solid ${colors.purple[400]};\n background-color: ${colors.darkGray[800]};\n padding: 1rem;\n border-radius: 0.5rem;\n margin-top: 0.5rem;\n `,\n settingRow: css`\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n }\n `,\n }\n}\n\nexport function useStyles() {\n const [_styles] = createSignal(stylesFactory())\n return _styles\n}\n"],"names":[],"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 ) => 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 }\n}\n\nexport function useStyles() {\n const [_styles] = createSignal(stylesFactory())\n return _styles\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/devtools",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
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",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"goober": "^2.1.16",
|
|
49
49
|
"solid-js": "^1.9.7",
|
|
50
50
|
"@tanstack/devtools-event-bus": "0.2.1",
|
|
51
|
-
"@tanstack/devtools-ui": "0.
|
|
51
|
+
"@tanstack/devtools-ui": "0.3.0"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"solid-js": ">=1.9.7"
|
package/src/styles/use-styles.ts
CHANGED
|
@@ -278,6 +278,7 @@ const stylesFactory = () => {
|
|
|
278
278
|
display: flex;
|
|
279
279
|
align-items: center;
|
|
280
280
|
gap: 0.5rem;
|
|
281
|
+
text-align: left;
|
|
281
282
|
`,
|
|
282
283
|
sectionIcon: css`
|
|
283
284
|
color: ${colors.purple[400]};
|
|
@@ -287,6 +288,7 @@ const stylesFactory = () => {
|
|
|
287
288
|
font-size: 0.875rem;
|
|
288
289
|
margin: 0 0 1.5rem 0;
|
|
289
290
|
line-height: 1.5;
|
|
291
|
+
text-align: left;
|
|
290
292
|
`,
|
|
291
293
|
settingsGroup: css`
|
|
292
294
|
display: flex;
|