New:Socket for Asana Is Now Available.Learn more →
Get Started

@tanstack/devtools-ui

Package Overview
Dependencies
Maintainers
3
Versions
19
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tanstack/devtools-ui - npm Package Compare versions

Comparing version
0.7.0
 to
0.7.1
+21
-0
dist/esm/styles/use-styles.js

@@ -653,2 +653,23 @@ import { resolveSemanticTheme } from "./semantic-theme.js";

overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: ${semantic.color.border.control} transparent;
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: ${semantic.color.border.control};
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
&::-webkit-scrollbar-thumb:hover {
background-color: ${semantic.color.text.muted};
}
&::-webkit-scrollbar-corner {
background: transparent;
}
height: 100%;

@@ -655,0 +676,0 @@ &::selection,

+1
-1
dist/esm/styles/use-styles.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"use-styles.js","names":[],"sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { createTheme } from '../components/theme'\nimport { resolveSemanticTheme } from './semantic-theme'\nimport type { tokens } from './tokens'\n\nimport type { TanStackDevtoolsTheme } from '../components/theme'\nimport type { ButtonVariant } from '../components/button'\n\nexport const css = goober.css\nconst stylesFactory = (theme: TanStackDevtoolsTheme) => {\n const semantic = resolveSemanticTheme(theme)\n\n const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n const buildButtonVariant = (variant: ButtonVariant) => {\n const statusRole =\n variant === 'danger'\n ? 'error'\n : variant === 'primary' || variant === 'secondary'\n ? 'neutral'\n : variant\n const status = semantic.color.status[statusRole]\n const outlineColor = status.text\n const outlineHoverColor = status.text\n const solidBg = status.solidFill\n const solidHover = status.border\n const solidActive = status.solidFill\n const solidText = status.onFill\n const solidBorder = status.border\n\n return {\n ghost: css`\n background: transparent;\n color: ${outlineColor};\n border-color: transparent;\n &:hover {\n background: ${semantic.color.state.hover};\n color: ${outlineHoverColor};\n }\n &:active {\n background: ${semantic.color.state.pressed};\n color: ${outlineHoverColor};\n }\n `,\n outline: css`\n background: transparent;\n color: ${outlineColor};\n border-color: ${outlineColor};\n &:hover {\n background: ${semantic.color.state.hover};\n color: ${outlineHoverColor};\n border-color: ${outlineHoverColor};\n }\n &:active {\n background: ${semantic.color.state.pressed};\n color: ${outlineHoverColor};\n border-color: ${outlineHoverColor};\n }\n `,\n solid: css`\n background: ${solidBg};\n color: ${solidText};\n border-color: ${solidBorder};\n &:hover {\n background: ${solidHover};\n border-color: ${solidHover};\n box-shadow: ${semantic.shadow.xs};\n }\n &:active {\n background: ${solidActive};\n border-color: ${solidActive};\n box-shadow: ${semantic.shadow.sm};\n }\n `,\n }\n }\n const buttonVariants: Record<\n ButtonVariant,\n { ghost: string; outline: string; solid: string }\n > = {\n primary: buildButtonVariant('primary'),\n secondary: buildButtonVariant('secondary'),\n info: buildButtonVariant('info'),\n warning: buildButtonVariant('warning'),\n danger: buildButtonVariant('danger'),\n success: buildButtonVariant('success'),\n }\n\n const wrapperSize = 320\n const legacyTagColor = (color: keyof typeof tokens.colors) => {\n const semanticRole =\n color === 'red'\n ? 'error'\n : color === 'yellow'\n ? 'warning'\n : color === 'green'\n ? 'success'\n : color === 'blue' || color === 'cyan' || color === 'teal'\n ? 'info'\n : 'neutral'\n return semantic.color.status[semanticRole].solidFill\n }\n\n return {\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n width: 48px;\n height: 48px;\n font-family: ${semantic.font.body};\n gap: ${semantic.gap.tight};\n padding: 0;\n &:hover {\n opacity: 0.7;\n }\n `,\n\n selectWrapper: css`\n width: 100%;\n max-width: ${wrapperSize}px;\n display: flex;\n flex-direction: column;\n gap: ${semantic.gap.tight};\n `,\n selectContainer: css`\n width: 100%;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n `,\n selectLabel: css`\n font: ${semantic.type.labelSm.weight} ${semantic.type.labelSm.size} /\n ${semantic.type.labelSm.lineHeight} ${semantic.font.body};\n letter-spacing: ${semantic.type.labelSm.tracking};\n color: ${semantic.color.text.primary};\n text-align: left;\n `,\n selectDescription: css`\n font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /\n ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};\n color: ${semantic.color.text.secondary};\n margin: 0;\n text-align: left;\n `,\n select: css`\n /* The platform chevron is drawn in the OS accent, which reads as foreign\n next to the rest of the panel — draw our own from currentColor instead\n so it follows the theme. */\n appearance: none;\n -webkit-appearance: none;\n width: 100%;\n box-sizing: border-box;\n padding: ${semantic.padding.controlBlock} 28px\n ${semantic.padding.controlBlock} ${semantic.padding.controlInline};\n border-radius: ${semantic.radius.control};\n background-color: ${semantic.color.surface.elevated};\n background-image:\n linear-gradient(45deg, transparent 50%, currentColor 50%),\n linear-gradient(135deg, currentColor 50%, transparent 50%);\n background-position:\n right 14px center,\n right 9px center;\n background-size:\n 5px 5px,\n 5px 5px;\n background-repeat: no-repeat;\n color: ${semantic.color.text.primary};\n border: 1px solid ${semantic.color.border.control};\n font: ${semantic.type.bodySm.weight} ${semantic.type.bodySm.size} /\n ${semantic.type.bodySm.lineHeight} ${semantic.font.body};\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n cursor: pointer;\n\n &:hover {\n border-color: ${semantic.color.border.focus};\n }\n\n &:focus-visible {\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n /* The custom chevron is decorative; let the platform draw its own when\n the user forces system colours. */\n @media (forced-colors: active) {\n appearance: auto;\n background-image: none;\n }\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n `,\n inputWrapper: css`\n width: 100%;\n max-width: ${wrapperSize}px;\n display: flex;\n flex-direction: column;\n gap: ${semantic.gap.tight};\n `,\n inputContainer: css`\n width: 100%;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n `,\n inputLabel: css`\n font: ${semantic.type.labelSm.weight} ${semantic.type.labelSm.size} /\n ${semantic.type.labelSm.lineHeight} ${semantic.font.body};\n letter-spacing: ${semantic.type.labelSm.tracking};\n color: ${semantic.color.text.primary};\n text-align: left;\n `,\n inputDescription: css`\n font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /\n ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};\n color: ${semantic.color.text.secondary};\n margin: 0;\n text-align: left;\n `,\n input: css`\n appearance: none;\n box-sizing: border-box;\n width: 100%;\n padding: ${semantic.padding.controlBlock}\n ${semantic.padding.controlInline};\n border-radius: ${semantic.radius.control};\n background-color: ${semantic.color.surface.elevated};\n color: ${semantic.color.text.primary};\n border: 1px solid ${semantic.color.border.control};\n font: ${semantic.type.bodySm.weight} ${semantic.type.bodySm.size} /\n ${semantic.type.bodySm.lineHeight} ${semantic.font.body};\n transition: all 0.15s ease;\n\n &::placeholder {\n color: ${semantic.color.text.secondary};\n }\n\n &:hover {\n border-color: ${semantic.color.border.focus};\n }\n\n &:focus {\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n `,\n checkboxWrapper: css`\n display: flex;\n align-items: flex-start;\n gap: ${semantic.gap.control};\n cursor: pointer;\n user-select: none;\n padding: ${semantic.padding.controlBlock}\n ${semantic.padding.controlInline};\n border-radius: ${semantic.radius.control};\n transition: background-color 0.15s ease;\n\n &:hover {\n background-color: ${semantic.color.state.hover};\n }\n `,\n checkboxContainer: css`\n width: 100%;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n `,\n checkboxLabelContainer: css`\n display: flex;\n flex-direction: column;\n gap: ${semantic.gap.tight};\n flex: 1;\n `,\n checkbox: css`\n appearance: none;\n width: ${semantic.space[4]};\n height: ${semantic.space[4]};\n border: 2px solid ${semantic.color.border.control};\n border-radius: ${semantic.radius.control};\n background-color: ${semantic.color.surface.elevated};\n display: grid;\n place-items: center;\n transition: all 0.15s ease;\n flex-shrink: 0;\n margin-top: ${semantic.space[1]};\n\n &:hover {\n border-color: ${semantic.color.border.focus};\n }\n\n &:focus-visible {\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n\n &:checked {\n background-color: ${semantic.color.state.selectionFill};\n border-color: ${semantic.color.state.selectionFill};\n }\n\n &:checked::after {\n content: '';\n width: ${semantic.space[1]};\n height: ${semantic.space[2]};\n border: solid ${semantic.color.state.selectionText};\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n margin-top: -3px;\n }\n `,\n checkboxLabel: css`\n color: ${semantic.color.text.primary};\n font: ${semantic.type.labelSm.weight} ${semantic.type.labelSm.size} /\n ${semantic.type.labelSm.lineHeight} ${semantic.font.body};\n letter-spacing: ${semantic.type.labelSm.tracking};\n text-align: left;\n `,\n checkboxDescription: css`\n color: ${semantic.color.text.secondary};\n font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /\n ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};\n text-align: left;\n `,\n button: {\n base: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: ${semantic.font.body};\n font-size: ${semantic.type.bodyXs.size};\n line-height: ${semantic.type.bodyXs.lineHeight};\n font-weight: ${semantic.type.labelSm.weight};\n border-radius: ${semantic.radius.control};\n padding: ${semantic.padding.controlBlock}\n ${semantic.padding.controlInline};\n cursor: pointer;\n transition:\n background 0.15s,\n color 0.15s,\n border 0.15s,\n box-shadow 0.15s;\n &:focus-visible {\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n border-width: 1px;\n border-style: solid;\n &:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n `,\n variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n const v = buttonVariants[variant]\n if (ghost) {\n return v.ghost\n }\n if (outline) {\n return v.outline\n }\n return v.solid\n },\n },\n tag: {\n dot: (color: keyof typeof tokens.colors) => css`\n width: ${semantic.space[1]};\n height: ${semantic.space[1]};\n border-radius: 9999px;\n background-color: ${legacyTagColor(color)};\n `,\n base: css`\n display: flex;\n gap: ${semantic.gap.tight};\n box-sizing: border-box;\n background: ${semantic.color.surface.subtle};\n color: ${semantic.color.text.primary};\n border-radius: ${semantic.radius.control};\n font-size: ${semantic.type.bodyXs.size};\n line-height: ${semantic.type.bodyXs.lineHeight};\n font-family: ${semantic.font.body};\n padding: ${semantic.padding.controlBlock}\n ${semantic.padding.controlInline};\n align-items: center;\n font-weight: ${semantic.type.labelSm.weight};\n border: 1px solid ${semantic.color.border.control};\n user-select: none;\n position: relative;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n &:focus-visible {\n outline-offset: 2px;\n outline: 2px solid ${semantic.color.border.focus};\n }\n `,\n label: css`\n font-size: ${semantic.type.bodyXs.size};\n line-height: ${semantic.type.bodyXs.lineHeight};\n font-family: ${semantic.font.body};\n letter-spacing: ${semantic.type.labelSm.tracking};\n `,\n count: css`\n font-size: ${semantic.type.bodyXs.size};\n padding: 0 ${semantic.space[1]};\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${semantic.color.text.secondary};\n background-color: ${semantic.color.state.hover};\n border-radius: ${semantic.radius.control};\n line-height: ${semantic.type.bodyXs.lineHeight};\n font-family: ${semantic.font.body};\n font-variant-numeric: tabular-nums;\n min-height: ${semantic.space[4]};\n `,\n },\n tree: {\n info: css`\n color: ${semantic.color.text.secondary};\n font-size: ${semantic.type.bodyXs.size};\n margin-right: ${semantic.space[1]};\n `,\n actionButton: css`\n background-color: transparent;\n color: ${semantic.color.text.secondary};\n border: none;\n display: inline-flex;\n padding: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: ${semantic.space[3]};\n height: ${semantic.space[3]};\n position: relative;\n z-index: 1;\n\n &:hover svg {\n color: ${semantic.color.text.primary};\n }\n\n &:focus-visible {\n border-radius: ${semantic.radius.control};\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n `,\n actionSuccess: css`\n color: ${semantic.color.status.success.text};\n `,\n actionError: css`\n color: ${semantic.color.status.error.text};\n `,\n expanderContainer: css`\n position: relative;\n `,\n expander: css`\n position: absolute;\n cursor: pointer;\n left: -16px;\n top: 3px;\n & path {\n stroke: ${semantic.color.text.link};\n }\n & svg {\n width: ${semantic.space[3]};\n height: ${semantic.space[3]};\n }\n\n display: inline-flex;\n align-items: center;\n transition: all 0.1s ease;\n &:focus-visible {\n border-radius: ${semantic.radius.control};\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n `,\n expandedLine: (hasBorder: boolean) => css`\n display: block;\n padding-left: ${semantic.space[3]};\n margin-left: -${semantic.space[3]};\n ${hasBorder\n ? `border-left: 1px solid ${semantic.color.border.decorative};`\n : ''}\n `,\n collapsible: css`\n cursor: pointer;\n transition: all 0.2s ease;\n &:hover {\n background-color: ${semantic.color.state.hover};\n border-radius: ${semantic.radius.control};\n padding: 0 ${semantic.space[1]};\n }\n `,\n actions: css`\n display: inline-flex;\n margin-left: ${semantic.space[2]};\n gap: ${semantic.gap.control};\n align-items: center;\n & svg {\n height: 12px;\n width: 12px;\n }\n `,\n valueCollapsed: css`\n color: ${semantic.color.text.secondary};\n `,\n valueFunction: css`\n color: ${semantic.color.syntax.keyword};\n `,\n valueString: css`\n color: ${semantic.color.syntax.string};\n `,\n valueNumber: css`\n color: ${semantic.color.syntax.number};\n `,\n valueBoolean: css`\n color: ${semantic.color.syntax.keyword};\n `,\n valueNull: css`\n color: ${semantic.color.syntax.comment};\n font-style: italic;\n `,\n valueKey: css`\n color: ${semantic.color.syntax.property};\n `,\n valueBraces: css`\n color: ${semantic.color.syntax.punctuation};\n `,\n valueContainer: (isRoot: boolean) => css`\n display: block;\n font-family: ${semantic.font.mono};\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n & [data-tsd-syntax]::selection {\n background: ${semantic.color.syntax.selectionFill};\n color: ${semantic.color.syntax.selectionText};\n }\n margin-left: ${isRoot ? '0' : semantic.space[4]};\n\n &:not(:hover) .actions {\n display: none;\n }\n\n &:hover .actions {\n display: inline-flex;\n }\n `,\n },\n header: {\n row: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n padding: ${semantic.space[2]} ${semantic.space[3]};\n gap: ${semantic.gap.control};\n background: ${semantic.color.surface.elevated};\n color: ${semantic.color.text.primary};\n border-bottom: ${semantic.color.border.decorative} 1px solid;\n align-items: center;\n `,\n logoAndToggleContainer: css`\n display: flex;\n gap: ${semantic.gap.section};\n align-items: center;\n & > button {\n padding: 0;\n background: transparent;\n border: none;\n display: flex;\n gap: ${semantic.gap.tight};\n flex-direction: column;\n }\n `,\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n gap: ${semantic.gap.tight};\n padding: 0;\n &:hover {\n opacity: 0.7;\n }\n &:focus-visible {\n outline-offset: 2px;\n border-radius: ${semantic.radius.control};\n outline: 2px solid ${semantic.color.border.focus};\n }\n `,\n tanstackLogo: css`\n font-size: ${semantic.type.headingPane.size};\n line-height: ${semantic.type.headingPane.lineHeight};\n font-family: ${semantic.font.display};\n font-weight: ${semantic.type.headingPane.weight};\n white-space: nowrap;\n color: ${semantic.color.text.primary};\n `,\n flavorLogo: (flavorLight: string, flavorDark: string) => css`\n font-weight: ${semantic.type.labelSm.weight};\n font-size: ${semantic.type.labelSm.size};\n line-height: ${semantic.type.labelSm.lineHeight};\n font-family: ${semantic.font.body};\n letter-spacing: ${semantic.type.labelSm.tracking};\n color: ${t(flavorLight, flavorDark)};\n white-space: nowrap;\n `,\n },\n section: {\n main: css`\n margin-bottom: ${semantic.space[4]};\n padding: ${semantic.space[4]};\n background-color: ${semantic.color.surface.subtle};\n border: 1px solid ${semantic.color.border.decorative};\n border-radius: ${semantic.radius.overlay};\n box-shadow: ${semantic.shadow.xs};\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n `,\n title: css`\n font-size: ${semantic.type.headingPane.size};\n line-height: ${semantic.type.headingPane.lineHeight};\n font-weight: ${semantic.type.headingPane.weight};\n color: ${semantic.color.text.primary};\n font-family: ${semantic.font.display};\n margin: 0 0 ${semantic.space[3]} 0;\n padding-bottom: ${semantic.space[2]};\n border-bottom: 1px solid ${semantic.color.border.decorative};\n display: flex;\n align-items: center;\n gap: ${semantic.gap.control};\n text-align: left;\n `,\n icon: css`\n height: 18px;\n width: 18px;\n & > svg {\n height: 100%;\n width: 100%;\n }\n color: ${semantic.color.text.secondary};\n `,\n description: css`\n color: ${semantic.color.text.secondary};\n font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /\n ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};\n margin: 0 0 ${semantic.space[4]} 0;\n text-align: left;\n `,\n },\n mainPanel: {\n panel: (withPadding: boolean) => css`\n /* space[4] keeps the panel's own gutter equal to the workbench gutter,\n so a destination's content lines up with the tab strip above it. */\n padding: ${withPadding ? semantic.space[4] : 0};\n background: ${semantic.color.surface.workspace};\n color: ${semantic.color.text.primary};\n overflow-y: auto;\n /* Keep a scroll gesture inside the devtools instead of chaining it on\n to the host page once this panel hits its end. */\n overscroll-behavior: contain;\n height: 100%;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n `,\n },\n }\n}\n\nexport function createStyles() {\n const { theme } = createTheme()\n const [styles, setStyles] = createSignal(stylesFactory(theme()))\n createEffect(() => {\n setStyles(stylesFactory(theme()))\n })\n return styles\n}\n"],"mappings":"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"}
{"version":3,"file":"use-styles.js","names":[],"sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { createTheme } from '../components/theme'\nimport { resolveSemanticTheme } from './semantic-theme'\nimport type { tokens } from './tokens'\n\nimport type { TanStackDevtoolsTheme } from '../components/theme'\nimport type { ButtonVariant } from '../components/button'\n\nexport const css = goober.css\nconst stylesFactory = (theme: TanStackDevtoolsTheme) => {\n const semantic = resolveSemanticTheme(theme)\n\n const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n const buildButtonVariant = (variant: ButtonVariant) => {\n const statusRole =\n variant === 'danger'\n ? 'error'\n : variant === 'primary' || variant === 'secondary'\n ? 'neutral'\n : variant\n const status = semantic.color.status[statusRole]\n const outlineColor = status.text\n const outlineHoverColor = status.text\n const solidBg = status.solidFill\n const solidHover = status.border\n const solidActive = status.solidFill\n const solidText = status.onFill\n const solidBorder = status.border\n\n return {\n ghost: css`\n background: transparent;\n color: ${outlineColor};\n border-color: transparent;\n &:hover {\n background: ${semantic.color.state.hover};\n color: ${outlineHoverColor};\n }\n &:active {\n background: ${semantic.color.state.pressed};\n color: ${outlineHoverColor};\n }\n `,\n outline: css`\n background: transparent;\n color: ${outlineColor};\n border-color: ${outlineColor};\n &:hover {\n background: ${semantic.color.state.hover};\n color: ${outlineHoverColor};\n border-color: ${outlineHoverColor};\n }\n &:active {\n background: ${semantic.color.state.pressed};\n color: ${outlineHoverColor};\n border-color: ${outlineHoverColor};\n }\n `,\n solid: css`\n background: ${solidBg};\n color: ${solidText};\n border-color: ${solidBorder};\n &:hover {\n background: ${solidHover};\n border-color: ${solidHover};\n box-shadow: ${semantic.shadow.xs};\n }\n &:active {\n background: ${solidActive};\n border-color: ${solidActive};\n box-shadow: ${semantic.shadow.sm};\n }\n `,\n }\n }\n const buttonVariants: Record<\n ButtonVariant,\n { ghost: string; outline: string; solid: string }\n > = {\n primary: buildButtonVariant('primary'),\n secondary: buildButtonVariant('secondary'),\n info: buildButtonVariant('info'),\n warning: buildButtonVariant('warning'),\n danger: buildButtonVariant('danger'),\n success: buildButtonVariant('success'),\n }\n\n const wrapperSize = 320\n const legacyTagColor = (color: keyof typeof tokens.colors) => {\n const semanticRole =\n color === 'red'\n ? 'error'\n : color === 'yellow'\n ? 'warning'\n : color === 'green'\n ? 'success'\n : color === 'blue' || color === 'cyan' || color === 'teal'\n ? 'info'\n : 'neutral'\n return semantic.color.status[semanticRole].solidFill\n }\n\n return {\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n width: 48px;\n height: 48px;\n font-family: ${semantic.font.body};\n gap: ${semantic.gap.tight};\n padding: 0;\n &:hover {\n opacity: 0.7;\n }\n `,\n\n selectWrapper: css`\n width: 100%;\n max-width: ${wrapperSize}px;\n display: flex;\n flex-direction: column;\n gap: ${semantic.gap.tight};\n `,\n selectContainer: css`\n width: 100%;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n `,\n selectLabel: css`\n font: ${semantic.type.labelSm.weight} ${semantic.type.labelSm.size} /\n ${semantic.type.labelSm.lineHeight} ${semantic.font.body};\n letter-spacing: ${semantic.type.labelSm.tracking};\n color: ${semantic.color.text.primary};\n text-align: left;\n `,\n selectDescription: css`\n font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /\n ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};\n color: ${semantic.color.text.secondary};\n margin: 0;\n text-align: left;\n `,\n select: css`\n /* The platform chevron is drawn in the OS accent, which reads as foreign\n next to the rest of the panel — draw our own from currentColor instead\n so it follows the theme. */\n appearance: none;\n -webkit-appearance: none;\n width: 100%;\n box-sizing: border-box;\n padding: ${semantic.padding.controlBlock} 28px\n ${semantic.padding.controlBlock} ${semantic.padding.controlInline};\n border-radius: ${semantic.radius.control};\n background-color: ${semantic.color.surface.elevated};\n background-image:\n linear-gradient(45deg, transparent 50%, currentColor 50%),\n linear-gradient(135deg, currentColor 50%, transparent 50%);\n background-position:\n right 14px center,\n right 9px center;\n background-size:\n 5px 5px,\n 5px 5px;\n background-repeat: no-repeat;\n color: ${semantic.color.text.primary};\n border: 1px solid ${semantic.color.border.control};\n font: ${semantic.type.bodySm.weight} ${semantic.type.bodySm.size} /\n ${semantic.type.bodySm.lineHeight} ${semantic.font.body};\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n cursor: pointer;\n\n &:hover {\n border-color: ${semantic.color.border.focus};\n }\n\n &:focus-visible {\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n /* The custom chevron is decorative; let the platform draw its own when\n the user forces system colours. */\n @media (forced-colors: active) {\n appearance: auto;\n background-image: none;\n }\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n `,\n inputWrapper: css`\n width: 100%;\n max-width: ${wrapperSize}px;\n display: flex;\n flex-direction: column;\n gap: ${semantic.gap.tight};\n `,\n inputContainer: css`\n width: 100%;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n `,\n inputLabel: css`\n font: ${semantic.type.labelSm.weight} ${semantic.type.labelSm.size} /\n ${semantic.type.labelSm.lineHeight} ${semantic.font.body};\n letter-spacing: ${semantic.type.labelSm.tracking};\n color: ${semantic.color.text.primary};\n text-align: left;\n `,\n inputDescription: css`\n font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /\n ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};\n color: ${semantic.color.text.secondary};\n margin: 0;\n text-align: left;\n `,\n input: css`\n appearance: none;\n box-sizing: border-box;\n width: 100%;\n padding: ${semantic.padding.controlBlock}\n ${semantic.padding.controlInline};\n border-radius: ${semantic.radius.control};\n background-color: ${semantic.color.surface.elevated};\n color: ${semantic.color.text.primary};\n border: 1px solid ${semantic.color.border.control};\n font: ${semantic.type.bodySm.weight} ${semantic.type.bodySm.size} /\n ${semantic.type.bodySm.lineHeight} ${semantic.font.body};\n transition: all 0.15s ease;\n\n &::placeholder {\n color: ${semantic.color.text.secondary};\n }\n\n &:hover {\n border-color: ${semantic.color.border.focus};\n }\n\n &:focus {\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n `,\n checkboxWrapper: css`\n display: flex;\n align-items: flex-start;\n gap: ${semantic.gap.control};\n cursor: pointer;\n user-select: none;\n padding: ${semantic.padding.controlBlock}\n ${semantic.padding.controlInline};\n border-radius: ${semantic.radius.control};\n transition: background-color 0.15s ease;\n\n &:hover {\n background-color: ${semantic.color.state.hover};\n }\n `,\n checkboxContainer: css`\n width: 100%;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n `,\n checkboxLabelContainer: css`\n display: flex;\n flex-direction: column;\n gap: ${semantic.gap.tight};\n flex: 1;\n `,\n checkbox: css`\n appearance: none;\n width: ${semantic.space[4]};\n height: ${semantic.space[4]};\n border: 2px solid ${semantic.color.border.control};\n border-radius: ${semantic.radius.control};\n background-color: ${semantic.color.surface.elevated};\n display: grid;\n place-items: center;\n transition: all 0.15s ease;\n flex-shrink: 0;\n margin-top: ${semantic.space[1]};\n\n &:hover {\n border-color: ${semantic.color.border.focus};\n }\n\n &:focus-visible {\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n\n &:checked {\n background-color: ${semantic.color.state.selectionFill};\n border-color: ${semantic.color.state.selectionFill};\n }\n\n &:checked::after {\n content: '';\n width: ${semantic.space[1]};\n height: ${semantic.space[2]};\n border: solid ${semantic.color.state.selectionText};\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n margin-top: -3px;\n }\n `,\n checkboxLabel: css`\n color: ${semantic.color.text.primary};\n font: ${semantic.type.labelSm.weight} ${semantic.type.labelSm.size} /\n ${semantic.type.labelSm.lineHeight} ${semantic.font.body};\n letter-spacing: ${semantic.type.labelSm.tracking};\n text-align: left;\n `,\n checkboxDescription: css`\n color: ${semantic.color.text.secondary};\n font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /\n ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};\n text-align: left;\n `,\n button: {\n base: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: ${semantic.font.body};\n font-size: ${semantic.type.bodyXs.size};\n line-height: ${semantic.type.bodyXs.lineHeight};\n font-weight: ${semantic.type.labelSm.weight};\n border-radius: ${semantic.radius.control};\n padding: ${semantic.padding.controlBlock}\n ${semantic.padding.controlInline};\n cursor: pointer;\n transition:\n background 0.15s,\n color 0.15s,\n border 0.15s,\n box-shadow 0.15s;\n &:focus-visible {\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n border-width: 1px;\n border-style: solid;\n &:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n `,\n variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n const v = buttonVariants[variant]\n if (ghost) {\n return v.ghost\n }\n if (outline) {\n return v.outline\n }\n return v.solid\n },\n },\n tag: {\n dot: (color: keyof typeof tokens.colors) => css`\n width: ${semantic.space[1]};\n height: ${semantic.space[1]};\n border-radius: 9999px;\n background-color: ${legacyTagColor(color)};\n `,\n base: css`\n display: flex;\n gap: ${semantic.gap.tight};\n box-sizing: border-box;\n background: ${semantic.color.surface.subtle};\n color: ${semantic.color.text.primary};\n border-radius: ${semantic.radius.control};\n font-size: ${semantic.type.bodyXs.size};\n line-height: ${semantic.type.bodyXs.lineHeight};\n font-family: ${semantic.font.body};\n padding: ${semantic.padding.controlBlock}\n ${semantic.padding.controlInline};\n align-items: center;\n font-weight: ${semantic.type.labelSm.weight};\n border: 1px solid ${semantic.color.border.control};\n user-select: none;\n position: relative;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n &:focus-visible {\n outline-offset: 2px;\n outline: 2px solid ${semantic.color.border.focus};\n }\n `,\n label: css`\n font-size: ${semantic.type.bodyXs.size};\n line-height: ${semantic.type.bodyXs.lineHeight};\n font-family: ${semantic.font.body};\n letter-spacing: ${semantic.type.labelSm.tracking};\n `,\n count: css`\n font-size: ${semantic.type.bodyXs.size};\n padding: 0 ${semantic.space[1]};\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${semantic.color.text.secondary};\n background-color: ${semantic.color.state.hover};\n border-radius: ${semantic.radius.control};\n line-height: ${semantic.type.bodyXs.lineHeight};\n font-family: ${semantic.font.body};\n font-variant-numeric: tabular-nums;\n min-height: ${semantic.space[4]};\n `,\n },\n tree: {\n info: css`\n color: ${semantic.color.text.secondary};\n font-size: ${semantic.type.bodyXs.size};\n margin-right: ${semantic.space[1]};\n `,\n actionButton: css`\n background-color: transparent;\n color: ${semantic.color.text.secondary};\n border: none;\n display: inline-flex;\n padding: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: ${semantic.space[3]};\n height: ${semantic.space[3]};\n position: relative;\n z-index: 1;\n\n &:hover svg {\n color: ${semantic.color.text.primary};\n }\n\n &:focus-visible {\n border-radius: ${semantic.radius.control};\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n `,\n actionSuccess: css`\n color: ${semantic.color.status.success.text};\n `,\n actionError: css`\n color: ${semantic.color.status.error.text};\n `,\n expanderContainer: css`\n position: relative;\n `,\n expander: css`\n position: absolute;\n cursor: pointer;\n left: -16px;\n top: 3px;\n & path {\n stroke: ${semantic.color.text.link};\n }\n & svg {\n width: ${semantic.space[3]};\n height: ${semantic.space[3]};\n }\n\n display: inline-flex;\n align-items: center;\n transition: all 0.1s ease;\n &:focus-visible {\n border-radius: ${semantic.radius.control};\n outline: 2px solid ${semantic.color.border.focus};\n outline-offset: 2px;\n }\n `,\n expandedLine: (hasBorder: boolean) => css`\n display: block;\n padding-left: ${semantic.space[3]};\n margin-left: -${semantic.space[3]};\n ${hasBorder\n ? `border-left: 1px solid ${semantic.color.border.decorative};`\n : ''}\n `,\n collapsible: css`\n cursor: pointer;\n transition: all 0.2s ease;\n &:hover {\n background-color: ${semantic.color.state.hover};\n border-radius: ${semantic.radius.control};\n padding: 0 ${semantic.space[1]};\n }\n `,\n actions: css`\n display: inline-flex;\n margin-left: ${semantic.space[2]};\n gap: ${semantic.gap.control};\n align-items: center;\n & svg {\n height: 12px;\n width: 12px;\n }\n `,\n valueCollapsed: css`\n color: ${semantic.color.text.secondary};\n `,\n valueFunction: css`\n color: ${semantic.color.syntax.keyword};\n `,\n valueString: css`\n color: ${semantic.color.syntax.string};\n `,\n valueNumber: css`\n color: ${semantic.color.syntax.number};\n `,\n valueBoolean: css`\n color: ${semantic.color.syntax.keyword};\n `,\n valueNull: css`\n color: ${semantic.color.syntax.comment};\n font-style: italic;\n `,\n valueKey: css`\n color: ${semantic.color.syntax.property};\n `,\n valueBraces: css`\n color: ${semantic.color.syntax.punctuation};\n `,\n valueContainer: (isRoot: boolean) => css`\n display: block;\n font-family: ${semantic.font.mono};\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n & [data-tsd-syntax]::selection {\n background: ${semantic.color.syntax.selectionFill};\n color: ${semantic.color.syntax.selectionText};\n }\n margin-left: ${isRoot ? '0' : semantic.space[4]};\n\n &:not(:hover) .actions {\n display: none;\n }\n\n &:hover .actions {\n display: inline-flex;\n }\n `,\n },\n header: {\n row: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n padding: ${semantic.space[2]} ${semantic.space[3]};\n gap: ${semantic.gap.control};\n background: ${semantic.color.surface.elevated};\n color: ${semantic.color.text.primary};\n border-bottom: ${semantic.color.border.decorative} 1px solid;\n align-items: center;\n `,\n logoAndToggleContainer: css`\n display: flex;\n gap: ${semantic.gap.section};\n align-items: center;\n & > button {\n padding: 0;\n background: transparent;\n border: none;\n display: flex;\n gap: ${semantic.gap.tight};\n flex-direction: column;\n }\n `,\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n gap: ${semantic.gap.tight};\n padding: 0;\n &:hover {\n opacity: 0.7;\n }\n &:focus-visible {\n outline-offset: 2px;\n border-radius: ${semantic.radius.control};\n outline: 2px solid ${semantic.color.border.focus};\n }\n `,\n tanstackLogo: css`\n font-size: ${semantic.type.headingPane.size};\n line-height: ${semantic.type.headingPane.lineHeight};\n font-family: ${semantic.font.display};\n font-weight: ${semantic.type.headingPane.weight};\n white-space: nowrap;\n color: ${semantic.color.text.primary};\n `,\n flavorLogo: (flavorLight: string, flavorDark: string) => css`\n font-weight: ${semantic.type.labelSm.weight};\n font-size: ${semantic.type.labelSm.size};\n line-height: ${semantic.type.labelSm.lineHeight};\n font-family: ${semantic.font.body};\n letter-spacing: ${semantic.type.labelSm.tracking};\n color: ${t(flavorLight, flavorDark)};\n white-space: nowrap;\n `,\n },\n section: {\n main: css`\n margin-bottom: ${semantic.space[4]};\n padding: ${semantic.space[4]};\n background-color: ${semantic.color.surface.subtle};\n border: 1px solid ${semantic.color.border.decorative};\n border-radius: ${semantic.radius.overlay};\n box-shadow: ${semantic.shadow.xs};\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n `,\n title: css`\n font-size: ${semantic.type.headingPane.size};\n line-height: ${semantic.type.headingPane.lineHeight};\n font-weight: ${semantic.type.headingPane.weight};\n color: ${semantic.color.text.primary};\n font-family: ${semantic.font.display};\n margin: 0 0 ${semantic.space[3]} 0;\n padding-bottom: ${semantic.space[2]};\n border-bottom: 1px solid ${semantic.color.border.decorative};\n display: flex;\n align-items: center;\n gap: ${semantic.gap.control};\n text-align: left;\n `,\n icon: css`\n height: 18px;\n width: 18px;\n & > svg {\n height: 100%;\n width: 100%;\n }\n color: ${semantic.color.text.secondary};\n `,\n description: css`\n color: ${semantic.color.text.secondary};\n font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /\n ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};\n margin: 0 0 ${semantic.space[4]} 0;\n text-align: left;\n `,\n },\n mainPanel: {\n panel: (withPadding: boolean) => css`\n /* space[4] keeps the panel's own gutter equal to the workbench gutter,\n so a destination's content lines up with the tab strip above it. */\n padding: ${withPadding ? semantic.space[4] : 0};\n background: ${semantic.color.surface.workspace};\n color: ${semantic.color.text.primary};\n overflow-y: auto;\n /* Keep a scroll gesture inside the devtools instead of chaining it on\n to the host page once this panel hits its end. */\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scrollbar-color: ${semantic.color.border.control} transparent;\n &::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background-color: ${semantic.color.border.control};\n border-radius: 999px;\n border: 2px solid transparent;\n background-clip: padding-box;\n }\n &::-webkit-scrollbar-thumb:hover {\n background-color: ${semantic.color.text.muted};\n }\n &::-webkit-scrollbar-corner {\n background: transparent;\n }\n height: 100%;\n &::selection,\n & *::selection {\n background: ${semantic.color.state.selectionFill};\n color: ${semantic.color.state.selectionText};\n }\n `,\n },\n }\n}\n\nexport function createStyles() {\n const { theme } = createTheme()\n const [styles, setStyles] = createSignal(stylesFactory(theme()))\n createEffect(() => {\n setStyles(stylesFactory(theme()))\n })\n return styles\n}\n"],"mappings":"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"}
+1
-1
package.json
{
"name": "@tanstack/devtools-ui",
"version": "0.7.0",
"version": "0.7.1",
"description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",

@@ -5,0 +5,0 @@ "author": "Tanner Linsley",

+21
-0
src/styles/use-styles.ts

@@ -686,2 +686,23 @@ import * as goober from 'goober'

overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: ${semantic.color.border.control} transparent;
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: ${semantic.color.border.control};
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
&::-webkit-scrollbar-thumb:hover {
background-color: ${semantic.color.text.muted};
}
&::-webkit-scrollbar-corner {
background: transparent;
}
height: 100%;

@@ -688,0 +709,0 @@ &::selection,