@tanstack/pacer-devtools 1.0.0 → 1.1.0

package/dist/styles/tokens.js

@@ -0,0 +1,301 @@
+//#region src/styles/tokens.ts
+const tokens = {
+	colors: {
+		inherit: "inherit",
+		current: "currentColor",
+		transparent: "transparent",
+		black: "#000000",
+		white: "#ffffff",
+		neutral: {
+			50: "#f9fafb",
+			100: "#f2f4f7",
+			200: "#eaecf0",
+			300: "#d0d5dd",
+			400: "#98a2b3",
+			500: "#667085",
+			600: "#475467",
+			700: "#344054",
+			800: "#1d2939",
+			900: "#101828"
+		},
+		darkGray: {
+			50: "#525c7a",
+			100: "#49536e",
+			200: "#414962",
+			300: "#394056",
+			400: "#313749",
+			500: "#292e3d",
+			600: "#212530",
+			700: "#191c24",
+			800: "#111318",
+			900: "#0b0d10"
+		},
+		gray: {
+			50: "#f9fafb",
+			100: "#f2f4f7",
+			200: "#eaecf0",
+			300: "#d0d5dd",
+			400: "#98a2b3",
+			500: "#667085",
+			600: "#475467",
+			700: "#344054",
+			800: "#1d2939",
+			900: "#101828"
+		},
+		blue: {
+			25: "#F5FAFF",
+			50: "#EFF8FF",
+			100: "#D1E9FF",
+			200: "#B2DDFF",
+			300: "#84CAFF",
+			400: "#53B1FD",
+			500: "#2E90FA",
+			600: "#1570EF",
+			700: "#175CD3",
+			800: "#1849A9",
+			900: "#194185"
+		},
+		green: {
+			25: "#F6FEF9",
+			50: "#ECFDF3",
+			100: "#D1FADF",
+			200: "#A6F4C5",
+			300: "#6CE9A6",
+			400: "#32D583",
+			500: "#12B76A",
+			600: "#039855",
+			700: "#027A48",
+			800: "#05603A",
+			900: "#054F31"
+		},
+		red: {
+			50: "#fef2f2",
+			100: "#fee2e2",
+			200: "#fecaca",
+			300: "#fca5a5",
+			400: "#f87171",
+			500: "#ef4444",
+			600: "#dc2626",
+			700: "#b91c1c",
+			800: "#991b1b",
+			900: "#7f1d1d",
+			950: "#450a0a"
+		},
+		yellow: {
+			25: "#FFFCF5",
+			50: "#FFFAEB",
+			100: "#FEF0C7",
+			200: "#FEDF89",
+			300: "#FEC84B",
+			400: "#FDB022",
+			500: "#F79009",
+			600: "#DC6803",
+			700: "#B54708",
+			800: "#93370D",
+			900: "#7A2E0E"
+		},
+		purple: {
+			25: "#FAFAFF",
+			50: "#F4F3FF",
+			100: "#EBE9FE",
+			200: "#D9D6FE",
+			300: "#BDB4FE",
+			400: "#9B8AFB",
+			500: "#7A5AF8",
+			600: "#6938EF",
+			700: "#5925DC",
+			800: "#4A1FB8",
+			900: "#3E1C96"
+		},
+		teal: {
+			25: "#F6FEFC",
+			50: "#F0FDF9",
+			100: "#CCFBEF",
+			200: "#99F6E0",
+			300: "#5FE9D0",
+			400: "#2ED3B7",
+			500: "#15B79E",
+			600: "#0E9384",
+			700: "#107569",
+			800: "#125D56",
+			900: "#134E48"
+		},
+		pink: {
+			25: "#fdf2f8",
+			50: "#fce7f3",
+			100: "#fbcfe8",
+			200: "#f9a8d4",
+			300: "#f472b6",
+			400: "#ec4899",
+			500: "#db2777",
+			600: "#be185d",
+			700: "#9d174d",
+			800: "#831843",
+			900: "#500724"
+		},
+		cyan: {
+			25: "#ecfeff",
+			50: "#cffafe",
+			100: "#a5f3fc",
+			200: "#67e8f9",
+			300: "#22d3ee",
+			400: "#06b6d4",
+			500: "#0891b2",
+			600: "#0e7490",
+			700: "#155e75",
+			800: "#164e63",
+			900: "#083344"
+		}
+	},
+	alpha: {
+		100: "ff",
+		90: "e5",
+		80: "cc",
+		70: "b3",
+		60: "99",
+		50: "80",
+		40: "66",
+		30: "4d",
+		20: "33",
+		10: "1a",
+		0: "00"
+	},
+	font: {
+		size: {
+			"2xs": "calc(var(--tsrd-font-size) * 0.625)",
+			xs: "calc(var(--tsrd-font-size) * 0.75)",
+			sm: "calc(var(--tsrd-font-size) * 0.875)",
+			md: "var(--tsrd-font-size)",
+			lg: "calc(var(--tsrd-font-size) * 1.125)",
+			xl: "calc(var(--tsrd-font-size) * 1.25)",
+			"2xl": "calc(var(--tsrd-font-size) * 1.5)",
+			"3xl": "calc(var(--tsrd-font-size) * 1.875)",
+			"4xl": "calc(var(--tsrd-font-size) * 2.25)",
+			"5xl": "calc(var(--tsrd-font-size) * 3)",
+			"6xl": "calc(var(--tsrd-font-size) * 3.75)",
+			"7xl": "calc(var(--tsrd-font-size) * 4.5)",
+			"8xl": "calc(var(--tsrd-font-size) * 6)",
+			"9xl": "calc(var(--tsrd-font-size) * 8)"
+		},
+		lineHeight: {
+			"3xs": "calc(var(--tsrd-font-size) * 0.75)",
+			"2xs": "calc(var(--tsrd-font-size) * 0.875)",
+			xs: "calc(var(--tsrd-font-size) * 1)",
+			sm: "calc(var(--tsrd-font-size) * 1.25)",
+			md: "calc(var(--tsrd-font-size) * 1.5)",
+			lg: "calc(var(--tsrd-font-size) * 1.75)",
+			xl: "calc(var(--tsrd-font-size) * 2)",
+			"2xl": "calc(var(--tsrd-font-size) * 2.25)",
+			"3xl": "calc(var(--tsrd-font-size) * 2.5)",
+			"4xl": "calc(var(--tsrd-font-size) * 2.75)",
+			"5xl": "calc(var(--tsrd-font-size) * 3)",
+			"6xl": "calc(var(--tsrd-font-size) * 3.25)",
+			"7xl": "calc(var(--tsrd-font-size) * 3.5)",
+			"8xl": "calc(var(--tsrd-font-size) * 3.75)",
+			"9xl": "calc(var(--tsrd-font-size) * 4)"
+		},
+		weight: {
+			thin: "100",
+			extralight: "200",
+			light: "300",
+			normal: "400",
+			medium: "500",
+			semibold: "600",
+			bold: "700",
+			extrabold: "800",
+			black: "900"
+		},
+		fontFamily: {
+			sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif",
+			mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
+		}
+	},
+	breakpoints: {
+		xs: "320px",
+		sm: "640px",
+		md: "768px",
+		lg: "1024px",
+		xl: "1280px",
+		"2xl": "1536px"
+	},
+	border: { radius: {
+		none: "0px",
+		xs: "calc(var(--tsrd-font-size) * 0.125)",
+		sm: "calc(var(--tsrd-font-size) * 0.25)",
+		md: "calc(var(--tsrd-font-size) * 0.375)",
+		lg: "calc(var(--tsrd-font-size) * 0.5)",
+		xl: "calc(var(--tsrd-font-size) * 0.75)",
+		"2xl": "calc(var(--tsrd-font-size) * 1)",
+		"3xl": "calc(var(--tsrd-font-size) * 1.5)",
+		full: "9999px"
+	} },
+	size: {
+		0: "0px",
+		.25: "calc(var(--tsrd-font-size) * 0.0625)",
+		.5: "calc(var(--tsrd-font-size) * 0.125)",
+		1: "calc(var(--tsrd-font-size) * 0.25)",
+		1.5: "calc(var(--tsrd-font-size) * 0.375)",
+		2: "calc(var(--tsrd-font-size) * 0.5)",
+		2.5: "calc(var(--tsrd-font-size) * 0.625)",
+		3: "calc(var(--tsrd-font-size) * 0.75)",
+		3.5: "calc(var(--tsrd-font-size) * 0.875)",
+		4: "calc(var(--tsrd-font-size) * 1)",
+		4.5: "calc(var(--tsrd-font-size) * 1.125)",
+		5: "calc(var(--tsrd-font-size) * 1.25)",
+		5.5: "calc(var(--tsrd-font-size) * 1.375)",
+		6: "calc(var(--tsrd-font-size) * 1.5)",
+		6.5: "calc(var(--tsrd-font-size) * 1.625)",
+		7: "calc(var(--tsrd-font-size) * 1.75)",
+		8: "calc(var(--tsrd-font-size) * 2)",
+		9: "calc(var(--tsrd-font-size) * 2.25)",
+		10: "calc(var(--tsrd-font-size) * 2.5)",
+		11: "calc(var(--tsrd-font-size) * 2.75)",
+		12: "calc(var(--tsrd-font-size) * 3)",
+		14: "calc(var(--tsrd-font-size) * 3.5)",
+		16: "calc(var(--tsrd-font-size) * 4)",
+		20: "calc(var(--tsrd-font-size) * 5)",
+		24: "calc(var(--tsrd-font-size) * 6)",
+		28: "calc(var(--tsrd-font-size) * 7)",
+		32: "calc(var(--tsrd-font-size) * 8)",
+		36: "calc(var(--tsrd-font-size) * 9)",
+		40: "calc(var(--tsrd-font-size) * 10)",
+		44: "calc(var(--tsrd-font-size) * 11)",
+		48: "calc(var(--tsrd-font-size) * 12)",
+		52: "calc(var(--tsrd-font-size) * 13)",
+		56: "calc(var(--tsrd-font-size) * 14)",
+		60: "calc(var(--tsrd-font-size) * 15)",
+		64: "calc(var(--tsrd-font-size) * 16)",
+		72: "calc(var(--tsrd-font-size) * 18)",
+		80: "calc(var(--tsrd-font-size) * 20)",
+		96: "calc(var(--tsrd-font-size) * 24)"
+	},
+	shadow: {
+		xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
+		sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
+		md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
+		lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
+		xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
+		"2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
+		inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
+		none: () => `none`
+	},
+	zIndices: {
+		hide: -1,
+		auto: "auto",
+		base: 0,
+		docked: 10,
+		dropdown: 1e3,
+		sticky: 1100,
+		banner: 1200,
+		overlay: 1300,
+		modal: 1400,
+		popover: 1500,
+		skipLink: 1600,
+		toast: 1700,
+		tooltip: 1800
+	}
+};
+
+//#endregion
+export { tokens };
+//# sourceMappingURL=tokens.js.map

package/dist/styles/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"mappings":"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"}

package/dist/{esm/styles → styles}/use-styles.js

@@ -1,14 +1,16 @@
-import * as goober from "goober";
-import { createSignal, createEffect } from "solid-js";
-import { useTheme } from "@tanstack/devtools-ui";
 import { tokens } from "./tokens.js";
+import { createEffect, createSignal } from "solid-js";
+import { useTheme } from "@tanstack/devtools-ui";
+import * as goober from "goober";
+
+//#region src/styles/use-styles.ts
 const stylesFactory = (theme) => {
-  const { colors, font, size, alpha, border } = tokens;
-  const { fontFamily, size: fontSize } = font;
-  const css = goober.css;
-  const t = (light, dark) => theme === "light" ? light : dark;
-  return {
-    mainContainer: css`
+	const { colors, font, size, alpha, border } = tokens;
+	const { fontFamily, size: fontSize } = font;
+	const css = goober.css;
+	const t = (light, dark) => theme === "light" ? light : dark;
+	return {
+		mainContainer: css`
       display: flex;
       flex: 1;
       min-height: 0;
@@ -17,7 +19,7 @@ const stylesFactory = (theme) => {
       padding-top: 0;
       margin-top: ${size[2]};
     `,
-    dragHandle: css`
+		dragHandle: css`
       width: 8px;
       background: ${t(colors.gray[300], colors.darkGray[600])};
       cursor: col-resize;
@@ -56,7 +58,7 @@ const stylesFactory = (theme) => {
         background: ${t(colors.blue[500], colors.blue[300])};
       }
     `,
-    leftPanel: css`
+		leftPanel: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
       border-radius: ${border.radius.lg};
       border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
@@ -66,7 +68,7 @@ const stylesFactory = (theme) => {
       min-height: 0;
       flex-shrink: 0;
     `,
-    rightPanel: css`
+		rightPanel: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
       border-radius: ${border.radius.lg};
       border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
@@ -76,7 +78,7 @@ const stylesFactory = (theme) => {
       min-height: 0;
       flex: 1;
     `,
-    panelHeader: css`
+		panelHeader: css`
       font-size: ${fontSize.md};
       font-weight: ${font.weight.bold};
       color: ${t(colors.blue[700], colors.blue[400])};
@@ -85,16 +87,16 @@ const stylesFactory = (theme) => {
       background: ${t(colors.gray[100], colors.darkGray[800])};
       flex-shrink: 0;
     `,
-    utilList: css`
+		utilList: css`
       flex: 1;
       overflow-y: auto;
       padding: ${size[1]};
       min-height: 0;
     `,
-    utilGroup: css`
+		utilGroup: css`
       margin-bottom: ${size[2]};
     `,
-    utilGroupHeader: css`
+		utilGroupHeader: css`
       font-size: ${fontSize.xs};
       font-weight: ${font.weight.semibold};
       color: ${t(colors.gray[600], colors.gray[400])};
@@ -105,7 +107,7 @@ const stylesFactory = (theme) => {
       background: ${t(colors.gray[200], colors.darkGray[700])};
       border-radius: ${border.radius.md};
     `,
-    utilRow: css`
+		utilRow: css`
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -122,13 +124,13 @@ const stylesFactory = (theme) => {
         border-color: ${t(colors.gray[400], colors.darkGray[500])};
       }
     `,
-    utilRowSelected: css`
+		utilRowSelected: css`
       background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};
       border-color: ${t(colors.blue[600], colors.blue[500])};
       box-shadow: 0 0 0 1px
         ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};
     `,
-    utilKey: css`
+		utilKey: css`
       font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
       color: ${t(colors.gray[900], colors.gray[100])};
@@ -137,7 +139,7 @@ const stylesFactory = (theme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `,
-    utilStatus: css`
+		utilStatus: css`
       font-size: ${fontSize.xs};
       color: ${t(colors.gray[600], colors.gray[400])};
       text-transform: uppercase;
@@ -147,48 +149,48 @@ const stylesFactory = (theme) => {
       border-radius: ${border.radius.sm};
       margin-left: ${size[1]};
     `,
-    stateDetails: css`
+		stateDetails: css`
       flex: 1;
       overflow-y: auto;
       padding: ${size[2]};
       min-height: 0;
     `,
-    stateHeader: css`
+		stateHeader: css`
       margin-bottom: ${size[2]};
       padding-bottom: ${size[2]};
       border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
     `,
-    stateTitle: css`
+		stateTitle: css`
       font-size: ${fontSize.md};
       font-weight: ${font.weight.bold};
       color: ${t(colors.blue[700], colors.blue[400])};
       margin-bottom: ${size[1]};
     `,
-    stateKey: css`
+		stateKey: css`
       font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
       color: ${t(colors.gray[600], colors.gray[400])};
       word-break: break-all;
     `,
-    stateContent: css`
+		stateContent: css`
       background: ${t(colors.gray[100], colors.darkGray[700])};
       border-radius: ${border.radius.md};
       padding: ${size[2]};
       border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
     `,
-    detailsGrid: css`
+		detailsGrid: css`
       display: grid;
       grid-template-columns: 1fr;
       gap: ${size[2]};
       align-items: start;
     `,
-    detailSection: css`
+		detailSection: css`
       background: ${t(colors.white, colors.darkGray[700])};
       border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
       border-radius: ${border.radius.md};
       padding: ${size[2]};
     `,
-    detailSectionHeader: css`
+		detailSectionHeader: css`
       font-size: ${fontSize.sm};
       font-weight: ${font.weight.bold};
       color: ${t(colors.gray[800], colors.gray[200])};
@@ -196,12 +198,12 @@ const stylesFactory = (theme) => {
       text-transform: uppercase;
       letter-spacing: 0.04em;
     `,
-    actionsRow: css`
+		actionsRow: css`
       display: flex;
       flex-wrap: wrap;
       gap: ${size[2]};
     `,
-    actionButton: css`
+		actionButton: css`
       display: inline-flex;
       align-items: center;
       gap: ${size[1]};
@@ -229,62 +231,62 @@ const stylesFactory = (theme) => {
         }
       }
     `,
-    actionDotBlue: css`
+		actionDotBlue: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.blue[400]};
     `,
-    actionDotGreen: css`
+		actionDotGreen: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.green[400]};
     `,
-    actionDotRed: css`
+		actionDotRed: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.red[400]};
     `,
-    actionDotYellow: css`
+		actionDotYellow: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.yellow[400]};
     `,
-    actionDotOrange: css`
+		actionDotOrange: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.pink[400]};
     `,
-    actionDotPurple: css`
+		actionDotPurple: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.purple[400]};
     `,
-    infoGrid: css`
+		infoGrid: css`
       display: grid;
       grid-template-columns: auto 1fr;
       gap: ${size[1]};
       row-gap: ${size[1]};
       align-items: center;
     `,
-    infoLabel: css`
+		infoLabel: css`
       color: ${t(colors.gray[600], colors.gray[400])};
       font-size: ${fontSize.xs};
       text-transform: uppercase;
       letter-spacing: 0.05em;
     `,
-    infoValueMono: css`
+		infoValueMono: css`
       font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
       color: ${t(colors.gray[900], colors.gray[100])};
       word-break: break-all;
     `,
-    noSelection: css`
+		noSelection: css`
       flex: 1;
       display: flex;
       align-items: center;
@@ -294,18 +296,15 @@ const stylesFactory = (theme) => {
       text-align: center;
       padding: ${size[4]};
     `,
-    // Keep existing styles for backward compatibility
-    sectionContainer: css`
+		sectionContainer: css`
       display: flex;
       flex-wrap: wrap;
       gap: ${size[4]};
     `,
-    section: css`
+		section: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
       border-radius: ${border.radius.lg};
-      box-shadow: ${tokens.shadow.md(
-      t(colors.gray[400] + alpha[80], colors.black + alpha[80])
-    )};
+      box-shadow: ${tokens.shadow.md(t(colors.gray[400] + alpha[80], colors.black + alpha[80]))};
       padding: ${size[4]};
       margin-bottom: ${size[4]};
       border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
@@ -313,7 +312,7 @@ const stylesFactory = (theme) => {
       max-width: 33%;
       max-height: fit-content;
     `,
-    sectionHeader: css`
+		sectionHeader: css`
       font-size: ${fontSize.lg};
       font-weight: ${font.weight.bold};
       margin-bottom: ${size[2]};
@@ -323,20 +322,20 @@ const stylesFactory = (theme) => {
       align-items: center;
       gap: ${size[2]};
     `,
-    sectionEmpty: css`
+		sectionEmpty: css`
       color: ${t(colors.gray[500], colors.gray[500])};
       font-size: ${fontSize.sm};
       font-style: italic;
       margin: ${size[2]} 0;
     `,
-    instanceList: css`
+		instanceList: css`
       display: flex;
       flex-direction: column;
       gap: ${size[2]};
       background: ${t(colors.gray[200], colors.darkGray[700])};
       border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
     `,
-    instanceCard: css`
+		instanceCard: css`
       background: ${t(colors.gray[200], colors.darkGray[700])};
       border-radius: ${border.radius.md};
       padding: ${size[3]};
@@ -349,17 +348,17 @@ const stylesFactory = (theme) => {
         box-shadow 0.3s,
         background 0.3s;
     `
-  };
+	};
 };
 function useStyles() {
-  const { theme } = useTheme();
-  const [styles, setStyles] = createSignal(stylesFactory(theme()));
-  createEffect(() => {
-    setStyles(stylesFactory(theme()));
-  });
-  return styles;
+	const { theme } = useTheme();
+	const [styles, setStyles] = createSignal(stylesFactory(theme()));
+	createEffect(() => {
+		setStyles(stylesFactory(theme()));
+	});
+	return styles;
 }
-export {
-  useStyles
-};
-//# sourceMappingURL=use-styles.js.map
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=use-styles.js.map