@tanstack/devtools 0.3.1 → 0.4.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.
Files changed (6) hide show
  1. package/dist/cjs/styles/use-styles.cjs +2 -0
  2. package/dist/cjs/styles/use-styles.cjs.map +1 -1
  3. package/dist/esm/styles/use-styles.js +2 -0
  4. package/dist/esm/styles/use-styles.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/styles/use-styles.ts +2 -0
package/dist/cjs/styles/use-styles.cjs CHANGED
@@ -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;
package/dist/cjs/styles/use-styles.cjs.map CHANGED
@@ -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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"}
package/dist/esm/styles/use-styles.js CHANGED
@@ -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;
package/dist/esm/styles/use-styles.js.map CHANGED
@@ -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.1",
3
+ "version": "0.4.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",
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;