@tanstack/devtools 0.6.3 → 0.6.6

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 (27) hide show
  1. package/dist/esm/context/devtools-context.d.ts +2 -2
  2. package/dist/esm/context/devtools-context.js.map +1 -1
  3. package/dist/esm/context/devtools-store.d.ts +5 -0
  4. package/dist/esm/context/devtools-store.js +2 -1
  5. package/dist/esm/context/devtools-store.js.map +1 -1
  6. package/dist/esm/context/use-devtools-context.d.ts +5 -0
  7. package/dist/esm/context/use-devtools-context.js +10 -1
  8. package/dist/esm/context/use-devtools-context.js.map +1 -1
  9. package/dist/esm/devtools.js +38 -27
  10. package/dist/esm/devtools.js.map +1 -1
  11. package/dist/esm/styles/tokens.js +15 -7
  12. package/dist/esm/styles/tokens.js.map +1 -1
  13. package/dist/esm/styles/use-styles.d.ts +2 -3
  14. package/dist/esm/styles/use-styles.js +62 -59
  15. package/dist/esm/styles/use-styles.js.map +1 -1
  16. package/dist/esm/tabs/plugins-tab.js +9 -8
  17. package/dist/esm/tabs/plugins-tab.js.map +1 -1
  18. package/dist/esm/tabs/settings-tab.js +18 -1
  19. package/dist/esm/tabs/settings-tab.js.map +1 -1
  20. package/package.json +5 -4
  21. package/src/context/devtools-context.tsx +10 -2
  22. package/src/context/devtools-store.ts +10 -0
  23. package/src/context/use-devtools-context.ts +10 -0
  24. package/src/devtools.tsx +30 -25
  25. package/src/styles/use-styles.ts +66 -59
  26. package/src/tabs/plugins-tab.tsx +7 -10
  27. package/src/tabs/settings-tab.tsx +10 -1
package/dist/esm/styles/use-styles.js CHANGED
@@ -1,18 +1,20 @@
1
1
  import * as goober from "goober";
2
- import { createSignal } from "solid-js";
2
+ import { createSignal, createEffect } from "solid-js";
3
+ import { useTheme } from "../context/use-devtools-context.js";
3
4
  import { tokens } from "./tokens.js";
4
5
  const mSecondsToCssSeconds = (mSeconds) => `${(mSeconds / 1e3).toFixed(2)}s`;
5
- const stylesFactory = () => {
6
- const { colors, font, size, alpha, border } = tokens;
6
+ const stylesFactory = (theme) => {
7
+ const { colors, font, size, border } = tokens;
7
8
  const { fontFamily, size: fontSize } = font;
8
9
  const css = goober.css;
10
+ const t = (light, dark) => theme === "light" ? light : dark;
9
11
  return {
10
12
  seoTabContainer: css`
11
13
  padding: 0;
12
14
  margin: 0 auto;
13
- background: ${colors.darkGray[700]};
15
+ background: ${t(colors.white, colors.darkGray[700])};
14
16
  border-radius: 12px;
15
- box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
17
+ box-shadow: 0 2px 16px ${t("rgba(0, 0, 0, 0.04)", "rgba(0, 0, 0, 0.08)")};
16
18
  overflow-y: auto;
17
19
  height: 100%;
18
20
  display: flex;
@@ -24,16 +26,16 @@ const stylesFactory = () => {
24
26
  seoTabTitle: css`
25
27
  font-size: 1.25rem;
26
28
  font-weight: 600;
27
- color: ${colors.purple[400]};
29
+ color: ${t(colors.purple[500], colors.purple[400])};
28
30
  margin: 0;
29
31
  padding: 1rem 1.5rem 0.5rem 1.5rem;
30
32
  text-align: left;
31
- border-bottom: 1px solid ${colors.gray[700]};
33
+ border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
32
34
  `,
33
35
  seoTabSection: css`
34
36
  padding: 1.5rem;
35
- background: ${colors.darkGray[800]};
36
- border: 1px solid ${colors.gray[700]};
37
+ background: ${t(colors.gray[100], colors.gray[800])};
38
+ border: 1px solid ${t(colors.gray[300], colors.gray[700])};
37
39
  display: flex;
38
40
  flex-direction: column;
39
41
  gap: 0.5rem;
@@ -52,12 +54,12 @@ const stylesFactory = () => {
52
54
  padding-bottom: 0.5rem;
53
55
  `,
54
56
  seoPreviewCard: css`
55
- border: 1px solid ${colors.gray[700]};
57
+ border: 1px solid ${t(colors.gray[300], colors.gray[700])};
56
58
  border-radius: 8px;
57
59
  padding: 12px 10px;
58
- background: ${colors.darkGray[900]};
60
+ background: ${t(colors.white, colors.darkGray[900])};
59
61
  margin-bottom: 0;
60
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
62
+ box-shadow: 0 1px 4px ${t("rgba(0,0,0,0.02)", "rgba(0,0,0,0.04)")};
61
63
  display: flex;
62
64
  flex-direction: column;
63
65
  align-items: flex-start;
@@ -70,28 +72,28 @@ const stylesFactory = () => {
70
72
  font-size: 1rem;
71
73
  font-weight: 500;
72
74
  margin-bottom: 6px;
73
- color: ${colors.purple[400]};
75
+ color: ${t(colors.purple[500], colors.purple[400])};
74
76
  `,
75
77
  seoPreviewImage: css`
76
78
  max-width: 100%;
77
79
  border-radius: 6px;
78
80
  margin-bottom: 6px;
79
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
81
+ box-shadow: 0 1px 2px ${t("rgba(0,0,0,0.03)", "rgba(0,0,0,0.06)")};
80
82
  height: 160px;
81
83
  `,
82
84
  seoPreviewTitle: css`
83
85
  font-size: 1rem;
84
86
  font-weight: 600;
85
87
  margin-bottom: 2px;
86
- color: ${colors.gray[100]};
88
+ color: ${t(colors.gray[900], colors.gray[100])};
87
89
  `,
88
90
  seoPreviewDesc: css`
89
- color: ${colors.gray[300]};
91
+ color: ${t(colors.gray[700], colors.gray[300])};
90
92
  margin-bottom: 2px;
91
93
  font-size: 0.95rem;
92
94
  `,
93
95
  seoPreviewUrl: css`
94
- color: ${colors.gray[500]};
96
+ color: ${t(colors.gray[500], colors.gray[500])};
95
97
  font-size: 0.9rem;
96
98
  margin-bottom: 2px;
97
99
  word-break: break-all;
@@ -99,7 +101,7 @@ const stylesFactory = () => {
99
101
  seoMissingTagsSection: css`
100
102
  margin-top: 4px;
101
103
  font-size: 0.95rem;
102
- color: ${colors.red[400]};
104
+ color: ${t(colors.red[400], colors.red[400])};
103
105
  `,
104
106
  seoMissingTagsList: css`
105
107
  margin: 4px 0 0 0;
@@ -111,15 +113,15 @@ const stylesFactory = () => {
111
113
  max-width: 240px;
112
114
  `,
113
115
  seoMissingTag: css`
114
- background: ${colors.red[500]}22;
115
- color: ${colors.red[500]};
116
+ background: ${t(colors.red[100], colors.red[500] + "22")};
117
+ color: ${t(colors.red[700], colors.red[500])};
116
118
  border-radius: 4px;
117
119
  padding: 1px 6px;
118
120
  font-size: 0.9rem;
119
121
  font-weight: 500;
120
122
  `,
121
123
  seoAllTagsFound: css`
122
- color: ${colors.green[500]};
124
+ color: ${t(colors.green[700], colors.green[500])};
123
125
  font-weight: 500;
124
126
  margin-left: 6px;
125
127
  font-size: 0.95rem;
@@ -134,7 +136,7 @@ const stylesFactory = () => {
134
136
  z-index: 99999;
135
137
  width: 100%;
136
138
  ${isDetached ? "" : "max-height: 90%;"}
137
- border-top: 1px solid ${colors.gray[700]};
139
+ border-top: 1px solid ${t(colors.gray[300], colors.gray[700])};
138
140
  transform-origin: top;
139
141
  `,
140
142
  devtoolsPanelContainerVisibility: (isOpen) => {
@@ -169,8 +171,8 @@ const stylesFactory = () => {
169
171
  display: flex;
170
172
  font-size: ${fontSize.sm};
171
173
  font-family: ${fontFamily.sans};
172
- background-color: ${colors.darkGray[700]};
173
- color: ${colors.gray[300]};
174
+ background-color: ${t(colors.white, colors.darkGray[700])};
175
+ color: ${t(colors.gray[900], colors.gray[300])};
174
176
  width: w-screen;
175
177
  flex-direction: row;
176
178
  overflow-x: hidden;
@@ -187,7 +189,7 @@ const stylesFactory = () => {
187
189
  user-select: none;
188
190
  z-index: 100000;
189
191
  &:hover {
190
- background-color: ${colors.purple[400]}${alpha[90]};
192
+ background-color: ${t(colors.purple[700], colors.purple[400])};
191
193
  }
192
194
  `,
193
195
  mainCloseBtn: css`
@@ -217,7 +219,7 @@ const stylesFactory = () => {
217
219
  &:focus-visible {
218
220
  outline-offset: 2px;
219
221
  border-radius: ${border.radius.full};
220
- outline: 2px solid ${colors.blue[800]};
222
+ outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
221
223
  }
222
224
  `,
223
225
  mainCloseBtnPosition: (position) => {
@@ -259,9 +261,9 @@ const stylesFactory = () => {
259
261
  align-items: center;
260
262
  justify-content: flex-start;
261
263
  height: 100%;
262
- background-color: ${colors.darkGray[800]};
263
- border-right: 1px solid ${colors.gray[700]};
264
- box-shadow: 0 1px 0 ${colors.gray[700]};
264
+ background-color: ${t(colors.gray[100], colors.darkGray[800])};
265
+ border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
266
+ box-shadow: 0 1px 0 ${t(colors.gray[200], colors.gray[700])};
265
267
  position: relative;
266
268
  width: ${size[10]};
267
269
  `,
@@ -274,39 +276,38 @@ const stylesFactory = () => {
274
276
  cursor: pointer;
275
277
  font-size: ${fontSize.sm};
276
278
  font-family: ${fontFamily.sans};
277
- color: ${colors.gray[300]};
279
+ color: ${t(colors.gray[700], colors.gray[300])};
278
280
  background-color: transparent;
279
281
  border: none;
280
282
  transition: all 0.2s ease-in-out;
281
283
  border-left: 2px solid transparent;
282
284
  &:hover:not(.close):not(.active):not(.detach) {
283
- background-color: ${colors.gray[700]};
284
- color: ${colors.gray[100]};
285
- border-left: 2px solid ${colors.purple[500]};
285
+ background-color: ${t(colors.gray[200], colors.gray[700])};
286
+ color: ${t(colors.gray[900], colors.gray[100])};
287
+ border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
286
288
  }
287
289
  &.active {
288
- background-color: ${colors.purple[500]};
289
- color: ${colors.gray[100]};
290
- border-left: 2px solid ${colors.purple[500]};
290
+ background-color: ${t(colors.purple[200], colors.purple[500])};
291
+ color: ${t(colors.gray[900], colors.gray[100])};
292
+ border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
291
293
  }
292
294
  &.detach {
293
295
  &:hover {
294
- background-color: ${colors.gray[700]};
296
+ background-color: ${t(colors.gray[200], colors.gray[700])};
295
297
  }
296
298
  &:hover {
297
- color: ${colors.green[500]};
299
+ color: ${t(colors.green[700], colors.green[500])};
298
300
  }
299
301
  }
300
302
  &.close {
301
303
  margin-top: auto;
302
304
  &:hover {
303
- background-color: ${colors.gray[700]};
305
+ background-color: ${t(colors.gray[200], colors.gray[700])};
304
306
  }
305
307
  &:hover {
306
- color: ${colors.red[500]};
308
+ color: ${t(colors.red[700], colors.red[500])};
307
309
  }
308
310
  }
309
-
310
311
  &.disabled {
311
312
  cursor: not-allowed;
312
313
  opacity: 0.2;
@@ -329,28 +330,26 @@ const stylesFactory = () => {
329
330
  height: 100%;
330
331
  overflow: hidden;
331
332
  `,
332
- pluginsTabDraw: css`
333
- width: 0px;
333
+ pluginsTabDraw: (isExpanded) => css`
334
+ width: ${isExpanded ? size[48] : 0};
334
335
  height: 100%;
335
- background-color: ${colors.darkGray[800]};
336
+ background-color: ${t(colors.white, colors.darkGray[800])};
336
337
  box-shadow: 0 1px 0 ${colors.gray[700]};
338
+ ${isExpanded ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};` : ""}
337
339
  `,
338
340
  pluginsTabDrawExpanded: css`
339
341
  width: ${size[48]};
340
- border-right: 1px solid ${colors.gray[700]};
342
+ border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
341
343
  `,
342
344
  pluginsTabDrawTransition: (mSeconds) => {
343
345
  return css`
344
346
  transition: width ${mSecondsToCssSeconds(mSeconds)} ease;
345
347
  `;
346
348
  },
347
- pluginsTabSidebar: css`
349
+ pluginsTabSidebar: (isExpanded) => css`
348
350
  width: ${size[48]};
349
351
  overflow-y: auto;
350
- transform: translateX(-100%);
351
- `,
352
- pluginsTabSidebarExpanded: css`
353
- transform: translateX(0);
352
+ transform: ${isExpanded ? "translateX(0)" : "translateX(-100%)"};
354
353
  `,
355
354
  pluginsTabSidebarTransition: (mSeconds) => {
356
355
  return css`
@@ -360,19 +359,19 @@ const stylesFactory = () => {
360
359
  pluginName: css`
361
360
  font-size: ${fontSize.xs};
362
361
  font-family: ${fontFamily.sans};
363
- color: ${colors.gray[300]};
362
+ color: ${t(colors.gray[700], colors.gray[300])};
364
363
  padding: ${size[2]};
365
364
  cursor: pointer;
366
365
  text-align: center;
367
366
  transition: all 0.2s ease-in-out;
368
367
  &:hover {
369
- background-color: ${colors.gray[700]};
370
- color: ${colors.gray[100]};
368
+ background-color: ${t(colors.gray[200], colors.gray[700])};
369
+ color: ${t(colors.gray[900], colors.gray[100])};
371
370
  padding: ${size[2]};
372
371
  }
373
372
  &.active {
374
- background-color: ${colors.purple[500]};
375
- color: ${colors.gray[100]};
373
+ background-color: ${t(colors.purple[200], colors.purple[500])};
374
+ color: ${t(colors.gray[900], colors.gray[100])};
376
375
  }
377
376
  `,
378
377
  pluginsTabContent: css`
@@ -388,8 +387,8 @@ const stylesFactory = () => {
388
387
  conditionalSetting: css`
389
388
  margin-left: 1.5rem;
390
389
  padding-left: 1rem;
391
- border-left: 2px solid ${colors.purple[400]};
392
- background-color: ${colors.darkGray[800]};
390
+ border-left: 2px solid ${t(colors.purple[600], colors.purple[400])};
391
+ background-color: ${t(colors.gray[100], colors.darkGray[800])};
393
392
  padding: 1rem;
394
393
  border-radius: 0.5rem;
395
394
  margin-top: 0.5rem;
@@ -410,8 +409,12 @@ const stylesFactory = () => {
410
409
  };
411
410
  };
412
411
  function useStyles() {
413
- const [_styles] = createSignal(stylesFactory());
414
- return _styles;
412
+ const { theme } = useTheme();
413
+ const [styles, setStyles] = createSignal(stylesFactory(theme()));
414
+ createEffect(() => {
415
+ setStyles(stylesFactory(theme()));
416
+ });
417
+ return styles;
415
418
  }
416
419
  export {
417
420
  useStyles
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 mSecondsToCssSeconds = (mSeconds: number) =>\n `${(mSeconds / 1000).toFixed(2)}s`\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 seoTabContainer: css`\n padding: 0;\n margin: 0 auto;\n background: ${colors.darkGray[700]};\n border-radius: 12px;\n box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);\n overflow-y: auto;\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: 0;\n width: 100%;\n overflow-y: auto;\n `,\n seoTabTitle: css`\n font-size: 1.25rem;\n font-weight: 600;\n color: ${colors.purple[400]};\n margin: 0;\n padding: 1rem 1.5rem 0.5rem 1.5rem;\n text-align: left;\n border-bottom: 1px solid ${colors.gray[700]};\n `,\n seoTabSection: css`\n padding: 1.5rem;\n background: ${colors.darkGray[800]};\n border: 1px solid ${colors.gray[700]};\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: 2rem;\n border-radius: 0.75rem;\n `,\n seoPreviewSection: css`\n display: flex;\n flex-direction: row;\n gap: 16px;\n margin-bottom: 0;\n justify-content: flex-start;\n align-items: flex-start;\n overflow-x: auto;\n flex-wrap: wrap;\n padding-bottom: 0.5rem;\n `,\n seoPreviewCard: css`\n border: 1px solid ${colors.gray[700]};\n border-radius: 8px;\n padding: 12px 10px;\n background: ${colors.darkGray[900]};\n margin-bottom: 0;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 200px;\n max-width: 240px;\n font-size: 0.95rem;\n gap: 4px;\n `,\n seoPreviewHeader: css`\n font-size: 1rem;\n font-weight: 500;\n margin-bottom: 6px;\n color: ${colors.purple[400]};\n `,\n seoPreviewImage: css`\n max-width: 100%;\n border-radius: 6px;\n margin-bottom: 6px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n height: 160px;\n `,\n seoPreviewTitle: css`\n font-size: 1rem;\n font-weight: 600;\n margin-bottom: 2px;\n color: ${colors.gray[100]};\n `,\n seoPreviewDesc: css`\n color: ${colors.gray[300]};\n margin-bottom: 2px;\n font-size: 0.95rem;\n `,\n seoPreviewUrl: css`\n color: ${colors.gray[500]};\n font-size: 0.9rem;\n margin-bottom: 2px;\n word-break: break-all;\n `,\n seoMissingTagsSection: css`\n margin-top: 4px;\n font-size: 0.95rem;\n color: ${colors.red[400]};\n `,\n seoMissingTagsList: css`\n margin: 4px 0 0 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n max-width: 240px;\n `,\n seoMissingTag: css`\n background: ${colors.red[500]}22;\n color: ${colors.red[500]};\n border-radius: 4px;\n padding: 1px 6px;\n font-size: 0.9rem;\n font-weight: 500;\n `,\n seoAllTagsFound: css`\n color: ${colors.green[500]};\n font-weight: 500;\n margin-left: 6px;\n font-size: 0.95rem;\n `,\n devtoolsPanelContainer: (\n panelLocation: TanStackDevtoolsConfig['panelLocation'],\n isDetached: boolean,\n ) => css`\n direction: ltr;\n position: fixed;\n overflow-y: hidden;\n overflow-x: hidden;\n ${panelLocation}: 0;\n right: 0;\n z-index: 99999;\n width: 100%;\n ${isDetached ? '' : 'max-height: 90%;'}\n border-top: 1px solid ${colors.gray[700]};\n transform-origin: top;\n `,\n devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n return css`\n visibility: ${isOpen ? 'visible' : 'hidden'};\n height: ${isOpen ? 'auto' : '0'};\n `\n },\n devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => {\n if (isResizing()) {\n return css`\n transition: none;\n `\n }\n\n return css`\n transition: all 0.4s ease;\n `\n },\n devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n if (isOpen) {\n return css`\n pointer-events: auto;\n transform: translateY(0);\n `\n }\n return css`\n pointer-events: none;\n transform: translateY(${height}px);\n `\n },\n devtoolsPanel: css`\n display: flex;\n font-size: ${fontSize.sm};\n font-family: ${fontFamily.sans};\n background-color: ${colors.darkGray[700]};\n color: ${colors.gray[300]};\n width: w-screen;\n flex-direction: row;\n overflow-x: hidden;\n overflow-y: hidden;\n height: 100%;\n `,\n dragHandle: (panelLocation: TanStackDevtoolsConfig['panelLocation']) => css`\n position: absolute;\n left: 0;\n ${panelLocation === 'bottom' ? 'top' : 'bottom'}: 0;\n width: 100%;\n height: 4px;\n cursor: row-resize;\n user-select: none;\n z-index: 100000;\n &:hover {\n background-color: ${colors.purple[400]}${alpha[90]};\n }\n `,\n\n mainCloseBtn: css`\n background: transparent;\n position: fixed;\n z-index: 99999;\n display: inline-flex;\n width: fit-content;\n cursor: pointer;\n appearance: none;\n border: 0;\n align-items: center;\n padding: 0;\n font-size: ${font.size.xs};\n cursor: pointer;\n transition: all 0.25s ease-out;\n &:hide-until-hover {\n opacity: 0;\n pointer-events: none;\n visibility: hidden;\n }\n &:hide-until-hover:hover {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n }\n &:focus-visible {\n outline-offset: 2px;\n border-radius: ${border.radius.full};\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n mainCloseBtnPosition: (position: TanStackDevtoolsConfig['position']) => {\n const base = css`\n ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n ${position === 'middle-left'\n ? `top: 50%; left: ${size[2]}; transform: translateY(-50%);`\n : ''}\n ${position === 'middle-right'\n ? `top: 50%; right: ${size[2]}; transform: translateY(-50%);`\n : ''}\n ${position === 'bottom-left'\n ? `bottom: ${size[2]}; left: ${size[2]};`\n : ''}\n ${position === 'bottom-right'\n ? `bottom: ${size[2]}; right: ${size[2]};`\n : ''}\n `\n return base\n },\n mainCloseBtnAnimation: (isOpen: boolean, hideUntilHover: boolean) => {\n if (!isOpen) {\n return hideUntilHover\n ? css`\n opacity: 0;\n\n &:hover {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n }\n `\n : css`\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n `\n }\n return css`\n opacity: 0;\n pointer-events: none;\n visibility: hidden;\n `\n },\n tabContainer: css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n height: 100%;\n background-color: ${colors.darkGray[800]};\n border-right: 1px solid ${colors.gray[700]};\n box-shadow: 0 1px 0 ${colors.gray[700]};\n position: relative;\n width: ${size[10]};\n `,\n\n tab: css`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: ${size[10]};\n cursor: pointer;\n font-size: ${fontSize.sm};\n font-family: ${fontFamily.sans};\n color: ${colors.gray[300]};\n background-color: transparent;\n border: none;\n transition: all 0.2s ease-in-out;\n border-left: 2px solid transparent;\n &:hover:not(.close):not(.active):not(.detach) {\n background-color: ${colors.gray[700]};\n color: ${colors.gray[100]};\n border-left: 2px solid ${colors.purple[500]};\n }\n &.active {\n background-color: ${colors.purple[500]};\n color: ${colors.gray[100]};\n border-left: 2px solid ${colors.purple[500]};\n }\n &.detach {\n &:hover {\n background-color: ${colors.gray[700]};\n }\n &:hover {\n color: ${colors.green[500]};\n }\n }\n &.close {\n margin-top: auto;\n &:hover {\n background-color: ${colors.gray[700]};\n }\n &:hover {\n color: ${colors.red[500]};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.2;\n pointer-events: none;\n }\n &.disabled:hover {\n background-color: transparent;\n color: ${colors.gray[300]};\n }\n `,\n tabContent: css`\n transition: all 0.2s ease-in-out;\n width: 100%;\n height: 100%;\n `,\n pluginsTabPanel: css`\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n overflow: hidden;\n `,\n\n pluginsTabDraw: css`\n width: 0px;\n height: 100%;\n background-color: ${colors.darkGray[800]};\n box-shadow: 0 1px 0 ${colors.gray[700]};\n `,\n pluginsTabDrawExpanded: css`\n width: ${size[48]};\n border-right: 1px solid ${colors.gray[700]};\n `,\n pluginsTabDrawTransition: (mSeconds: number) => {\n return css`\n transition: width ${mSecondsToCssSeconds(mSeconds)} ease;\n `\n },\n\n pluginsTabSidebar: css`\n width: ${size[48]};\n overflow-y: auto;\n transform: translateX(-100%);\n `,\n pluginsTabSidebarExpanded: css`\n transform: translateX(0);\n `,\n pluginsTabSidebarTransition: (mSeconds: number) => {\n return css`\n transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;\n `\n },\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 settingsGroup: css`\n display: flex;\n flex-direction: column;\n gap: 1rem;\n `,\n conditionalSetting: css`\n margin-left: 1.5rem;\n padding-left: 1rem;\n border-left: 2px solid ${colors.purple[400]};\n background-color: ${colors.darkGray[800]};\n padding: 1rem;\n border-radius: 0.5rem;\n margin-top: 0.5rem;\n `,\n settingRow: css`\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n }\n `,\n settingsModifiers: css`\n display: flex;\n gap: 0.5rem;\n `,\n }\n}\n\nexport function useStyles() {\n const [_styles] = createSignal(stylesFactory())\n return _styles\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '../context/use-devtools-context'\nimport { tokens } from './tokens'\nimport type { TanStackDevtoolsConfig } from '../context/devtools-context'\nimport type { Accessor } from 'solid-js'\nimport type { DevtoolsStore } from '../context/devtools-store'\n\nconst mSecondsToCssSeconds = (mSeconds: number) =>\n `${(mSeconds / 1000).toFixed(2)}s`\n\nconst stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {\n const { colors, font, size, border } = tokens\n const { fontFamily, size: fontSize } = font\n const css = goober.css\n const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n return {\n seoTabContainer: css`\n padding: 0;\n margin: 0 auto;\n background: ${t(colors.white, colors.darkGray[700])};\n border-radius: 12px;\n box-shadow: 0 2px 16px ${t('rgba(0, 0, 0, 0.04)', 'rgba(0, 0, 0, 0.08)')};\n overflow-y: auto;\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: 0;\n width: 100%;\n overflow-y: auto;\n `,\n seoTabTitle: css`\n font-size: 1.25rem;\n font-weight: 600;\n color: ${t(colors.purple[500], colors.purple[400])};\n margin: 0;\n padding: 1rem 1.5rem 0.5rem 1.5rem;\n text-align: left;\n border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};\n `,\n seoTabSection: css`\n padding: 1.5rem;\n background: ${t(colors.gray[100], colors.gray[800])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: 2rem;\n border-radius: 0.75rem;\n `,\n seoPreviewSection: css`\n display: flex;\n flex-direction: row;\n gap: 16px;\n margin-bottom: 0;\n justify-content: flex-start;\n align-items: flex-start;\n overflow-x: auto;\n flex-wrap: wrap;\n padding-bottom: 0.5rem;\n `,\n seoPreviewCard: css`\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n border-radius: 8px;\n padding: 12px 10px;\n background: ${t(colors.white, colors.darkGray[900])};\n margin-bottom: 0;\n box-shadow: 0 1px 4px ${t('rgba(0,0,0,0.02)', 'rgba(0,0,0,0.04)')};\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 200px;\n max-width: 240px;\n font-size: 0.95rem;\n gap: 4px;\n `,\n seoPreviewHeader: css`\n font-size: 1rem;\n font-weight: 500;\n margin-bottom: 6px;\n color: ${t(colors.purple[500], colors.purple[400])};\n `,\n seoPreviewImage: css`\n max-width: 100%;\n border-radius: 6px;\n margin-bottom: 6px;\n box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.03)', 'rgba(0,0,0,0.06)')};\n height: 160px;\n `,\n seoPreviewTitle: css`\n font-size: 1rem;\n font-weight: 600;\n margin-bottom: 2px;\n color: ${t(colors.gray[900], colors.gray[100])};\n `,\n seoPreviewDesc: css`\n color: ${t(colors.gray[700], colors.gray[300])};\n margin-bottom: 2px;\n font-size: 0.95rem;\n `,\n seoPreviewUrl: css`\n color: ${t(colors.gray[500], colors.gray[500])};\n font-size: 0.9rem;\n margin-bottom: 2px;\n word-break: break-all;\n `,\n seoMissingTagsSection: css`\n margin-top: 4px;\n font-size: 0.95rem;\n color: ${t(colors.red[400], colors.red[400])};\n `,\n seoMissingTagsList: css`\n margin: 4px 0 0 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n max-width: 240px;\n `,\n seoMissingTag: css`\n background: ${t(colors.red[100], colors.red[500] + '22')};\n color: ${t(colors.red[700], colors.red[500])};\n border-radius: 4px;\n padding: 1px 6px;\n font-size: 0.9rem;\n font-weight: 500;\n `,\n seoAllTagsFound: css`\n color: ${t(colors.green[700], colors.green[500])};\n font-weight: 500;\n margin-left: 6px;\n font-size: 0.95rem;\n `,\n devtoolsPanelContainer: (\n panelLocation: TanStackDevtoolsConfig['panelLocation'],\n isDetached: boolean,\n ) => css`\n direction: ltr;\n position: fixed;\n overflow-y: hidden;\n overflow-x: hidden;\n ${panelLocation}: 0;\n right: 0;\n z-index: 99999;\n width: 100%;\n ${isDetached ? '' : 'max-height: 90%;'}\n border-top: 1px solid ${t(colors.gray[300], 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: ${t(colors.white, colors.darkGray[700])};\n color: ${t(colors.gray[900], 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: ${t(colors.purple[700], colors.purple[400])};\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 ${t(colors.blue[700], 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: ${t(colors.gray[100], colors.darkGray[800])};\n border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};\n box-shadow: 0 1px 0 ${t(colors.gray[200], 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: ${t(colors.gray[700], colors.gray[300])};\n background-color: transparent;\n border: none;\n transition: all 0.2s ease-in-out;\n border-left: 2px solid transparent;\n &:hover:not(.close):not(.active):not(.detach) {\n background-color: ${t(colors.gray[200], colors.gray[700])};\n color: ${t(colors.gray[900], colors.gray[100])};\n border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};\n }\n &.active {\n background-color: ${t(colors.purple[200], colors.purple[500])};\n color: ${t(colors.gray[900], colors.gray[100])};\n border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};\n }\n &.detach {\n &:hover {\n background-color: ${t(colors.gray[200], colors.gray[700])};\n }\n &:hover {\n color: ${t(colors.green[700], colors.green[500])};\n }\n }\n &.close {\n margin-top: auto;\n &:hover {\n background-color: ${t(colors.gray[200], colors.gray[700])};\n }\n &:hover {\n color: ${t(colors.red[700], colors.red[500])};\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\n pluginsTabDraw: (isExpanded: boolean) => css`\n width: ${isExpanded ? size[48] : 0};\n height: 100%;\n background-color: ${t(colors.white, colors.darkGray[800])};\n box-shadow: 0 1px 0 ${colors.gray[700]};\n ${isExpanded\n ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};`\n : ''}\n `,\n pluginsTabDrawExpanded: css`\n width: ${size[48]};\n border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};\n `,\n pluginsTabDrawTransition: (mSeconds: number) => {\n return css`\n transition: width ${mSecondsToCssSeconds(mSeconds)} ease;\n `\n },\n\n pluginsTabSidebar: (isExpanded: boolean) => css`\n width: ${size[48]};\n overflow-y: auto;\n transform: ${isExpanded ? 'translateX(0)' : 'translateX(-100%)'};\n `,\n\n pluginsTabSidebarTransition: (mSeconds: number) => {\n return css`\n transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;\n `\n },\n\n pluginName: css`\n font-size: ${fontSize.xs};\n font-family: ${fontFamily.sans};\n color: ${t(colors.gray[700], 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: ${t(colors.gray[200], colors.gray[700])};\n color: ${t(colors.gray[900], colors.gray[100])};\n padding: ${size[2]};\n }\n &.active {\n background-color: ${t(colors.purple[200], colors.purple[500])};\n color: ${t(colors.gray[900], colors.gray[100])};\n }\n `,\n pluginsTabContent: css`\n width: 100%;\n height: 100%;\n overflow-y: auto;\n `,\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 ${t(colors.purple[600], colors.purple[400])};\n background-color: ${t(colors.gray[100], colors.darkGray[800])};\n padding: 1rem;\n border-radius: 0.5rem;\n margin-top: 0.5rem;\n `,\n settingRow: css`\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n }\n `,\n settingsModifiers: css`\n display: flex;\n gap: 0.5rem;\n `,\n }\n}\n\nexport function useStyles() {\n const { theme } = useTheme()\n const [styles, setStyles] = createSignal(stylesFactory(theme()))\n createEffect(() => {\n setStyles(stylesFactory(theme()))\n })\n return styles\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,uBAAuB,CAAC,aAC5B,IAAI,WAAW,KAAM,QAAQ,CAAC,CAAC;AAEjC,MAAM,gBAAgB,CAAC,UAA8C;AACnE,QAAM,EAAE,QAAQ,MAAM,MAAM,WAAW;AACvC,QAAM,EAAE,YAAY,MAAM,SAAA,IAAa;AACvC,QAAM,MAAM,OAAO;AACnB,QAAM,IAAI,CAAC,OAAe,SAAkB,UAAU,UAAU,QAAQ;AAExE,SAAO;AAAA,IACL,iBAAiB;AAAA;AAAA;AAAA,oBAGD,EAAE,OAAO,OAAO,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA,+BAE1B,EAAE,uBAAuB,qBAAqB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAS1E,aAAa;AAAA;AAAA;AAAA,eAGF,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,iCAIvB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,IAElE,eAAe;AAAA;AAAA,oBAEC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,0BAC/B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO3D,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWnB,gBAAgB;AAAA,0BACM,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,oBAG3C,EAAE,OAAO,OAAO,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA,8BAE3B,EAAE,oBAAoB,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASnE,kBAAkB;AAAA;AAAA;AAAA;AAAA,eAIP,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA,IAEpD,iBAAiB;AAAA;AAAA;AAAA;AAAA,8BAIS,EAAE,oBAAoB,kBAAkB,CAAC;AAAA;AAAA;AAAA,IAGnE,iBAAiB;AAAA;AAAA;AAAA;AAAA,eAIN,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,IAEhD,gBAAgB;AAAA,eACL,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIhD,eAAe;AAAA,eACJ,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhD,uBAAuB;AAAA;AAAA;AAAA,eAGZ,EAAE,OAAO,IAAI,GAAG,GAAG,OAAO,IAAI,GAAG,CAAC,CAAC;AAAA;AAAA,IAE9C,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASpB,eAAe;AAAA,oBACC,EAAE,OAAO,IAAI,GAAG,GAAG,OAAO,IAAI,GAAG,IAAI,IAAI,CAAC;AAAA,eAC/C,EAAE,OAAO,IAAI,GAAG,GAAG,OAAO,IAAI,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM9C,iBAAiB;AAAA,eACN,EAAE,OAAO,MAAM,GAAG,GAAG,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlD,wBAAwB,CACtB,eACA,eACG;AAAA;AAAA;AAAA;AAAA;AAAA,QAKD,aAAa;AAAA;AAAA;AAAA;AAAA,QAIb,aAAa,KAAK,kBAAkB;AAAA,8BACd,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAG/D,kCAAkC,CAAC,WAAoB;AACrD,aAAO;AAAA,sBACS,SAAS,YAAY,QAAQ;AAAA,kBACjC,SAAS,SAAS,GAAG;AAAA;AAAA,IAEnC;AAAA,IACA,gCAAgC,CAAC,eAAkC;AACjE,UAAI,cAAc;AAChB,eAAO;AAAA;AAAA;AAAA,MAGT;AAEA,aAAO;AAAA;AAAA;AAAA,IAGT;AAAA,IACA,iCAAiC,CAAC,QAAiB,WAAmB;AACpE,UAAI,QAAQ;AACV,eAAO;AAAA;AAAA;AAAA;AAAA,MAIT;AACA,aAAO;AAAA;AAAA,gCAEmB,MAAM;AAAA;AAAA,IAElC;AAAA,IACA,eAAe;AAAA;AAAA,mBAEA,SAAS,EAAE;AAAA,qBACT,WAAW,IAAI;AAAA,0BACV,EAAE,OAAO,OAAO,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,eAChD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,YAAY,CAAC,kBAA2D;AAAA;AAAA;AAAA,QAGpE,kBAAkB,WAAW,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOzB,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAIjE,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAWC,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAeN,OAAO,OAAO,IAAI;AAAA,6BACd,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAG9D,sBAAsB,CAAC,aAAiD;AACtE,YAAM,OAAO;AAAA,UACT,aAAa,aAAa,QAAQ,KAAK,CAAC,CAAC,WAAW,KAAK,CAAC,CAAC,MAAM,EAAE;AAAA,UACnE,aAAa,cAAc,QAAQ,KAAK,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC,MAAM,EAAE;AAAA,UACrE,aAAa,gBACX,mBAAmB,KAAK,CAAC,CAAC,mCAC1B,EAAE;AAAA,UACJ,aAAa,iBACX,oBAAoB,KAAK,CAAC,CAAC,mCAC3B,EAAE;AAAA,UACJ,aAAa,gBACX,WAAW,KAAK,CAAC,CAAC,WAAW,KAAK,CAAC,CAAC,MACpC,EAAE;AAAA,UACJ,aAAa,iBACX,WAAW,KAAK,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC,MACrC,EAAE;AAAA;AAER,aAAO;AAAA,IACT;AAAA,IACA,uBAAuB,CAAC,QAAiB,mBAA4B;AACnE,UAAI,CAAC,QAAQ;AACX,eAAO,iBACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKN;AACA,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT;AAAA,IACA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMQ,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,gCACnC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,4BACzC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,eAElD,KAAK,EAAE,CAAC;AAAA;AAAA,IAGnB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKO,KAAK,EAAE,CAAC;AAAA;AAAA,mBAEL,SAAS,EAAE;AAAA,qBACT,WAAW,IAAI;AAAA,eACrB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMxB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,iBAChD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,iCACrB,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,4BAG9C,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA,iBACpD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,iCACrB,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,8BAI5C,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,mBAGhD,EAAE,OAAO,MAAM,GAAG,GAAG,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAM5B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,mBAGhD,EAAE,OAAO,IAAI,GAAG,GAAG,OAAO,IAAI,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUrC,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,IAG7B,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,IAKZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQjB,gBAAgB,CAAC,eAAwB;AAAA,eAC9B,aAAa,KAAK,EAAE,IAAI,CAAC;AAAA;AAAA,0BAEd,EAAE,OAAO,OAAO,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,4BACnC,OAAO,KAAK,GAAG,CAAC;AAAA,QACpC,aACE,2BAA2B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC,MAChE,EAAE;AAAA;AAAA,IAER,wBAAwB;AAAA,eACb,KAAK,EAAE,CAAC;AAAA,gCACS,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,IAEjE,0BAA0B,CAAC,aAAqB;AAC9C,aAAO;AAAA,4BACe,qBAAqB,QAAQ,CAAC;AAAA;AAAA,IAEtD;AAAA,IAEA,mBAAmB,CAAC,eAAwB;AAAA,eACjC,KAAK,EAAE,CAAC;AAAA;AAAA,mBAEJ,aAAa,kBAAkB,mBAAmB;AAAA;AAAA,IAGjE,6BAA6B,CAAC,aAAqB;AACjD,aAAO;AAAA,gCACmB,qBAAqB,QAAQ,CAAC;AAAA;AAAA,IAE1D;AAAA,IAEA,YAAY;AAAA,mBACG,SAAS,EAAE;AAAA,qBACT,WAAW,IAAI;AAAA,eACrB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,iBACnC,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKI,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,iBAChD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,mBACnC,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGE,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA,iBACpD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAGlD,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMnB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,IAKf,oBAAoB;AAAA;AAAA;AAAA,+BAGO,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA,0BAC9C,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/D,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASZ,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAAA;AAKvB;AAEO,SAAS,YAAY;AAC1B,QAAM,EAAE,MAAA,IAAU,SAAA;AAClB,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,cAAc,MAAA,CAAO,CAAC;AAC/D,eAAa,MAAM;AACjB,cAAU,cAAc,MAAA,CAAO,CAAC;AAAA,EAClC,CAAC;AACD,SAAO;AACT;"}
package/dist/esm/tabs/plugins-tab.js CHANGED
@@ -2,7 +2,7 @@ import { template, insert, createComponent, setAttribute, effect, className, use
2
2
  import { createEffect, For } from "solid-js";
3
3
  import clsx from "clsx";
4
4
  import { useDrawContext } from "../context/draw-context.js";
5
- import { usePlugins } from "../context/use-devtools-context.js";
5
+ import { usePlugins, useTheme } from "../context/use-devtools-context.js";
6
6
  import { useStyles } from "../styles/use-styles.js";
7
7
  import { PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID } from "../constants.js";
8
8
  var _tmpl$ = /* @__PURE__ */ template(`<div><div><div></div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><h3>`);
@@ -18,10 +18,13 @@ const PluginsTab = () => {
18
18
  animationMs
19
19
  } = useDrawContext();
20
20
  let activePluginRef;
21
+ const {
22
+ theme
23
+ } = useTheme();
21
24
  createEffect(() => {
22
25
  const currentActivePlugin = plugins()?.find((plugin) => plugin.id === activePlugin());
23
26
  if (activePluginRef && currentActivePlugin) {
24
- currentActivePlugin.render(activePluginRef);
27
+ currentActivePlugin.render(activePluginRef, theme());
25
28
  }
26
29
  });
27
30
  const styles = useStyles();
@@ -41,7 +44,7 @@ const PluginsTab = () => {
41
44
  let pluginHeading;
42
45
  createEffect(() => {
43
46
  if (pluginHeading) {
44
- typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading);
47
+ typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading, theme());
45
48
  }
46
49
  });
47
50
  return (() => {
@@ -61,11 +64,9 @@ const PluginsTab = () => {
61
64
  typeof _ref$ === "function" ? use(_ref$, _el$4) : activePluginRef = _el$4;
62
65
  setAttribute(_el$4, "id", PLUGIN_CONTAINER_ID);
63
66
  effect((_p$) => {
64
- var _v$ = styles().pluginsTabPanel, _v$2 = clsx(styles().pluginsTabDraw, {
65
- [styles().pluginsTabDrawExpanded]: expanded()
66
- }, styles().pluginsTabDrawTransition(animationMs)), _v$3 = clsx(styles().pluginsTabSidebar, {
67
- [styles().pluginsTabSidebarExpanded]: expanded()
68
- }, styles().pluginsTabSidebarTransition(animationMs)), _v$4 = styles().pluginsTabContent;
67
+ var _v$ = styles().pluginsTabPanel, _v$2 = clsx(styles().pluginsTabDraw(expanded()), {
68
+ [styles().pluginsTabDraw(expanded())]: expanded()
69
+ }, styles().pluginsTabDrawTransition(animationMs)), _v$3 = clsx(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs)), _v$4 = styles().pluginsTabContent;
69
70
  _v$ !== _p$.e && className(_el$, _p$.e = _v$);
70
71
  _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
71
72
  _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
package/dist/esm/tabs/plugins-tab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"plugins-tab.js","sources":["../../../src/tabs/plugins-tab.tsx"],"sourcesContent":["import { For, createEffect } from 'solid-js'\nimport clsx from 'clsx'\nimport { useDrawContext } from '../context/draw-context'\nimport { usePlugins } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'\n\nexport const PluginsTab = () => {\n const { plugins, activePlugin, setActivePlugin } = usePlugins()\n const { expanded, hoverUtils, animationMs } = useDrawContext()\n let activePluginRef: HTMLDivElement | undefined\n\n createEffect(() => {\n const currentActivePlugin = plugins()?.find(\n (plugin) => plugin.id === activePlugin(),\n )\n if (activePluginRef && currentActivePlugin) {\n currentActivePlugin.render(activePluginRef)\n }\n })\n const styles = useStyles()\n\n return (\n <div class={styles().pluginsTabPanel}>\n <div\n class={clsx(\n styles().pluginsTabDraw,\n {\n [styles().pluginsTabDrawExpanded]: expanded(),\n },\n styles().pluginsTabDrawTransition(animationMs),\n )}\n onMouseEnter={() => {\n hoverUtils.enter()\n }}\n onMouseLeave={() => {\n hoverUtils.leave()\n }}\n >\n <div\n class={clsx(\n styles().pluginsTabSidebar,\n {\n [styles().pluginsTabSidebarExpanded]: expanded(),\n },\n styles().pluginsTabSidebarTransition(animationMs),\n )}\n >\n <For each={plugins()}>\n {(plugin) => {\n let pluginHeading: HTMLHeadingElement | undefined\n createEffect(() => {\n if (pluginHeading) {\n typeof plugin.name === 'string'\n ? (pluginHeading.textContent = plugin.name)\n : plugin.name(pluginHeading)\n }\n })\n return (\n <div\n onClick={() => setActivePlugin(plugin.id!)}\n class={clsx(styles().pluginName, {\n active: activePlugin() === plugin.id,\n })}\n >\n <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />\n </div>\n )\n }}\n </For>\n </div>\n </div>\n\n <div\n id={PLUGIN_CONTAINER_ID}\n ref={activePluginRef}\n class={styles().pluginsTabContent}\n ></div>\n </div>\n )\n}\n"],"names":["PluginsTab","plugins","activePlugin","setActivePlugin","usePlugins","expanded","hoverUtils","animationMs","useDrawContext","activePluginRef","createEffect","currentActivePlugin","find","plugin","id","render","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","addEventListener","leave","enter","_$insert","_$createComponent","For","each","children","pluginHeading","name","textContent","_el$5","_tmpl$2","_el$6","$$click","_ref$2","_$use","_$setAttribute","PLUGIN_TITLE_CONTAINER_ID","_$effect","_$className","clsx","pluginName","active","_ref$","PLUGIN_CONTAINER_ID","_p$","_v$","pluginsTabPanel","_v$2","pluginsTabDraw","pluginsTabDrawExpanded","pluginsTabDrawTransition","_v$3","pluginsTabSidebar","pluginsTabSidebarExpanded","pluginsTabSidebarTransition","_v$4","pluginsTabContent","e","t","a","o","undefined","_$delegateEvents"],"mappings":"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"}
1
+ {"version":3,"file":"plugins-tab.js","sources":["../../../src/tabs/plugins-tab.tsx"],"sourcesContent":["import { For, createEffect } from 'solid-js'\nimport clsx from 'clsx'\nimport { useDrawContext } from '../context/draw-context'\nimport { usePlugins, useTheme } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'\n\nexport const PluginsTab = () => {\n const { plugins, activePlugin, setActivePlugin } = usePlugins()\n const { expanded, hoverUtils, animationMs } = useDrawContext()\n let activePluginRef: HTMLDivElement | undefined\n\n const { theme } = useTheme()\n createEffect(() => {\n const currentActivePlugin = plugins()?.find(\n (plugin) => plugin.id === activePlugin(),\n )\n if (activePluginRef && currentActivePlugin) {\n currentActivePlugin.render(activePluginRef, theme())\n }\n })\n const styles = useStyles()\n return (\n <div class={styles().pluginsTabPanel}>\n <div\n class={clsx(\n styles().pluginsTabDraw(expanded()),\n {\n [styles().pluginsTabDraw(expanded())]: expanded(),\n },\n styles().pluginsTabDrawTransition(animationMs),\n )}\n onMouseEnter={() => {\n hoverUtils.enter()\n }}\n onMouseLeave={() => {\n hoverUtils.leave()\n }}\n >\n <div\n class={clsx(\n styles().pluginsTabSidebar(expanded()),\n styles().pluginsTabSidebarTransition(animationMs),\n )}\n >\n <For each={plugins()}>\n {(plugin) => {\n let pluginHeading: HTMLHeadingElement | undefined\n createEffect(() => {\n if (pluginHeading) {\n typeof plugin.name === 'string'\n ? (pluginHeading.textContent = plugin.name)\n : plugin.name(pluginHeading, theme())\n }\n })\n return (\n <div\n onClick={() => setActivePlugin(plugin.id!)}\n class={clsx(styles().pluginName, {\n active: activePlugin() === plugin.id,\n })}\n >\n <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />\n </div>\n )\n }}\n </For>\n </div>\n </div>\n\n <div\n id={PLUGIN_CONTAINER_ID}\n ref={activePluginRef}\n class={styles().pluginsTabContent}\n ></div>\n </div>\n )\n}\n"],"names":["PluginsTab","plugins","activePlugin","setActivePlugin","usePlugins","expanded","hoverUtils","animationMs","useDrawContext","activePluginRef","theme","useTheme","createEffect","currentActivePlugin","find","plugin","id","render","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","addEventListener","leave","enter","_$insert","_$createComponent","For","each","children","pluginHeading","name","textContent","_el$5","_tmpl$2","_el$6","$$click","_ref$2","_$use","_$setAttribute","PLUGIN_TITLE_CONTAINER_ID","_$effect","_$className","clsx","pluginName","active","_ref$","PLUGIN_CONTAINER_ID","_p$","_v$","pluginsTabPanel","_v$2","pluginsTabDraw","pluginsTabDrawTransition","_v$3","pluginsTabSidebar","pluginsTabSidebarTransition","_v$4","pluginsTabContent","e","t","a","o","undefined","_$delegateEvents"],"mappings":";;;;;;;;AAOO,MAAMA,aAAaA,MAAM;AAC9B,QAAM;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAcC;AAAAA,EAAAA,IAAoBC,WAAAA;AACnD,QAAM;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,IAAYC;AAAAA,EAAAA,IAAgBC,eAAAA;AAC9C,MAAIC;AAEJ,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAUC,SAAAA;AAClBC,eAAa,MAAM;AACjB,UAAMC,sBAAsBZ,WAAWa,KACpCC,YAAWA,OAAOC,OAAOd,cAC5B;AACA,QAAIO,mBAAmBI,qBAAqB;AAC1CA,0BAAoBI,OAAOR,iBAAiBC,OAAO;AAAA,IACrD;AAAA,EACF,CAAC;AACD,QAAMQ,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,UAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAH,MAAAI;AAAAJ,UAAAK,iBAAA,cAaoB,MAAM;AAClBrB,iBAAWsB,MAAAA;AAAAA,IACb,CAAC;AAAAN,UAAAK,iBAAA,cALa,MAAM;AAClBrB,iBAAWuB,MAAAA;AAAAA,IACb,CAAC;AAAAC,WAAAN,OAAAO,gBAWEC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEhC,QAAAA;AAAAA,MAAS;AAAA,MAAAiC,UAChBnB,CAAAA,WAAW;AACX,YAAIoB;AACJvB,qBAAa,MAAM;AACjB,cAAIuB,eAAe;AACjB,mBAAOpB,OAAOqB,SAAS,WAClBD,cAAcE,cAActB,OAAOqB,OACpCrB,OAAOqB,KAAKD,eAAezB,MAAAA,CAAO;AAAA,UACxC;AAAA,QACF,CAAC;AACD,gBAAA,MAAA;AAAA,cAAA4B,QAAAC,QAAAA,GAAAC,QAAAF,MAAAf;AAAAe,gBAAAG,UAEa,MAAMtC,gBAAgBY,OAAOC,EAAG;AAAC,cAAA0B,SAKFP;AAAa,iBAAAO,WAAA,aAAAC,IAAAD,QAAAF,KAAA,IAAbL,gBAAaK;AAAAI,uBAAAJ,OAAA,MAA7CK,yBAAyB;AAAAC,iBAAA,MAAAC,UAAAT,OAJ1BU,KAAK9B,OAAAA,EAAS+B,YAAY;AAAA,YAC/BC,QAAQhD,aAAAA,MAAmBa,OAAOC;AAAAA,UAAAA,CACnC,CAAC,CAAA;AAAA,iBAAAsB;AAAAA,QAAA,GAAA;AAAA,MAKR;AAAA,IAAA,CAAC,CAAA;AAAA,QAAAa,QAOA1C;AAAe,WAAA0C,UAAA,aAAAR,IAAAQ,OAAA1B,KAAA,IAAfhB,kBAAegB;AAAAmB,iBAAAnB,OAAA,MADhB2B,mBAAmB;AAAAN,WAAAO,CAAAA,QAAA;AAAA,UAAAC,MAhDfpC,SAASqC,iBAAeC,OAEzBR,KACL9B,SAASuC,eAAepD,SAAAA,CAAU,GAClC;AAAA,QACE,CAACa,SAASuC,eAAepD,UAAU,CAAC,GAAGA,SAAAA;AAAAA,MAAS,GAElDa,SAASwC,yBAAyBnD,WAAW,CAC/C,GAACoD,OASQX,KACL9B,SAAS0C,kBAAkBvD,UAAU,GACrCa,OAAAA,EAAS2C,4BAA4BtD,WAAW,CAClD,GAACuD,OA8BI5C,OAAAA,EAAS6C;AAAiBT,cAAAD,IAAAW,KAAAjB,UAAA3B,MAAAiC,IAAAW,IAAAV,GAAA;AAAAE,eAAAH,IAAAY,KAAAlB,UAAAzB,OAAA+B,IAAAY,IAAAT,IAAA;AAAAG,eAAAN,IAAAa,KAAAnB,UAAAvB,OAAA6B,IAAAa,IAAAP,IAAA;AAAAG,eAAAT,IAAAc,KAAApB,UAAAtB,OAAA4B,IAAAc,IAAAL,IAAA;AAAA,aAAAT;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAI;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAhD;AAAAA,EAAA,GAAA;AAIzC;AAACiD,eAAA,CAAA,OAAA,CAAA;"}
package/dist/esm/tabs/settings-tab.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { createComponent, template, insert, effect, className } from "solid-js/web";
2
2
  import { createMemo, Show } from "solid-js";
3
- import { MainPanel, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Input, Button, Select } from "@tanstack/devtools-ui";
3
+ import { MainPanel, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Select, Input, Button } from "@tanstack/devtools-ui";
4
4
  import { SettingsCog, Link, Keyboard, GeoTag } from "@tanstack/devtools-ui/icons";
5
5
  import { useDevtoolsSettings } from "../context/use-devtools-context.js";
6
6
  import { uppercaseFirstLetter } from "../utils/sanitize.js";
@@ -63,6 +63,23 @@ const SettingsTab = () => {
63
63
  return settings().hideUntilHover;
64
64
  }
65
65
  }), null);
66
+ insert(_el$, createComponent(Select, {
67
+ label: "Theme",
68
+ description: "Choose the theme for the devtools panel",
69
+ get value() {
70
+ return settings().theme;
71
+ },
72
+ options: [{
73
+ label: "Dark",
74
+ value: "dark"
75
+ }, {
76
+ label: "Light",
77
+ value: "light"
78
+ }],
79
+ onChange: (value) => setSettings({
80
+ theme: value
81
+ })
82
+ }), null);
66
83
  effect(() => className(_el$, styles().settingsGroup));
67
84
  return _el$;
68
85
  })()];
package/dist/esm/tabs/settings-tab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show, createMemo } from 'solid-js'\nimport {\n Button,\n Checkbox,\n Input,\n MainPanel,\n Section,\n SectionDescription,\n SectionIcon,\n SectionTitle,\n Select,\n} from '@tanstack/devtools-ui'\nimport {\n GeoTag,\n Keyboard,\n Link,\n SettingsCog,\n} from '@tanstack/devtools-ui/icons'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\nimport type { ModifierKey } from '@solid-primitives/keyboard'\n\nexport const SettingsTab = () => {\n const { setSettings, settings } = useDevtoolsSettings()\n const styles = useStyles()\n const hotkey = createMemo(() => settings().openHotkey)\n const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']\n const changeHotkey = (newHotkey: ModifierKey) => () => {\n if (hotkey().includes(newHotkey)) {\n return setSettings({\n openHotkey: hotkey().filter((key) => key !== newHotkey),\n })\n }\n const existingModifiers = hotkey().filter((key) =>\n modifiers.includes(key as any),\n )\n const otherModifiers = hotkey().filter(\n (key) => !modifiers.includes(key as any),\n )\n setSettings({\n openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],\n })\n }\n return (\n <MainPanel withPadding>\n {/* General Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <SettingsCog />\n </SectionIcon>\n General\n </SectionTitle>\n <SectionDescription>\n Configure general behavior of the devtools panel.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Default open\"\n description=\"Automatically open the devtools panel when the page loads\"\n onChange={() =>\n setSettings({ defaultOpen: !settings().defaultOpen })\n }\n checked={settings().defaultOpen}\n />\n <Checkbox\n label=\"Hide trigger until hovered\"\n description=\"Keep the devtools trigger button hidden until you hover over its area\"\n onChange={() =>\n setSettings({ hideUntilHover: !settings().hideUntilHover })\n }\n checked={settings().hideUntilHover}\n />\n </div>\n </Section>\n\n {/* URL Flag Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <Link />\n </SectionIcon>\n URL Configuration\n </SectionTitle>\n <SectionDescription>\n Control when devtools are available based on URL parameters.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Require URL Flag\"\n description=\"Only show devtools when a specific URL parameter is present\"\n checked={settings().requireUrlFlag}\n onChange={(checked) =>\n setSettings({\n requireUrlFlag: checked,\n })\n }\n />\n <Show when={settings().requireUrlFlag}>\n <div class={styles().conditionalSetting}>\n <Input\n label=\"URL flag\"\n description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n placeholder=\"debug\"\n value={settings().urlFlag}\n onChange={(e) =>\n setSettings({\n urlFlag: e,\n })\n }\n />\n </div>\n </Show>\n </div>\n </Section>\n\n {/* Keyboard Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <Keyboard />\n </SectionIcon>\n Keyboard\n </SectionTitle>\n <SectionDescription>\n Customize keyboard shortcuts for quick access.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <div class={styles().settingsModifiers}>\n <Show keyed when={hotkey()}>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Shift')}\n outline={!hotkey().includes('Shift')}\n >\n Shift\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Alt')}\n outline={!hotkey().includes('Alt')}\n >\n Alt\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Meta')}\n outline={!hotkey().includes('Meta')}\n >\n Meta\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Control')}\n outline={!hotkey().includes('Control')}\n >\n Control\n </Button>\n </Show>\n </div>\n <Input\n label=\"Hotkey to open/close devtools\"\n description=\"Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above\"\n placeholder=\"a\"\n value={hotkey()\n .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))\n .join('+')}\n onChange={(e) => {\n const makeModifierArray = (key: string) => {\n if (key.length === 1) return [uppercaseFirstLetter(key)]\n const modifiers: Array<string> = []\n for (const character of key) {\n const newLetter = uppercaseFirstLetter(character)\n if (!modifiers.includes(newLetter)) modifiers.push(newLetter)\n }\n return modifiers\n }\n const modifiers = e\n .split('+')\n .flatMap((key) => makeModifierArray(key))\n .filter(Boolean)\n return setSettings({\n openHotkey: [\n ...hotkey().filter((key) =>\n ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),\n ),\n ...modifiers,\n ],\n })\n }}\n />\n Final shortcut is: {hotkey().join(' + ')}\n </div>\n </Section>\n\n {/* Position Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <GeoTag />\n </SectionIcon>\n Position\n </SectionTitle>\n <SectionDescription>\n Adjust the position of the trigger button and devtools panel.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <div class={styles().settingRow}>\n <Select\n label=\"Trigger Position\"\n options={[\n { label: 'Bottom Right', value: 'bottom-right' },\n { label: 'Bottom Left', value: 'bottom-left' },\n { label: 'Top Right', value: 'top-right' },\n { label: 'Top Left', value: 'top-left' },\n { label: 'Middle Right', value: 'middle-right' },\n { label: 'Middle Left', value: 'middle-left' },\n ]}\n value={settings().position}\n onChange={(value) =>\n setSettings({\n position: value,\n })\n }\n />\n <Select\n label=\"Panel Position\"\n value={settings().panelLocation}\n options={[\n { label: 'Top', value: 'top' },\n { label: 'Bottom', value: 'bottom' },\n ]}\n onChange={(value) =>\n setSettings({\n panelLocation: value,\n })\n }\n />\n </div>\n </div>\n </Section>\n </MainPanel>\n )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","hotkey","createMemo","openHotkey","modifiers","changeHotkey","newHotkey","includes","filter","key","existingModifiers","otherModifiers","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","SettingsCog","SectionDescription","_el$","_tmpl$","_$insert","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","_$effect","_$className","settingsGroup","Link","_el$2","requireUrlFlag","Show","when","_el$3","Input","placeholder","value","urlFlag","e","conditionalSetting","Keyboard","_el$4","_tmpl$2","_el$5","firstChild","_el$6","nextSibling","keyed","Button","variant","onclick","outline","join","makeModifierArray","length","uppercaseFirstLetter","character","newLetter","push","split","flatMap","Boolean","_p$","_v$","_v$2","settingsModifiers","t","undefined","GeoTag","_el$7","_tmpl$3","_el$8","Select","options","position","panelLocation","_v$3","_v$4","settingRow"],"mappings":"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"}
1
+ {"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show, createMemo } from 'solid-js'\nimport {\n Button,\n Checkbox,\n Input,\n MainPanel,\n Section,\n SectionDescription,\n SectionIcon,\n SectionTitle,\n Select,\n} from '@tanstack/devtools-ui'\nimport {\n GeoTag,\n Keyboard,\n Link,\n SettingsCog,\n} from '@tanstack/devtools-ui/icons'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\nimport type { ModifierKey } from '@solid-primitives/keyboard'\n\nexport const SettingsTab = () => {\n const { setSettings, settings } = useDevtoolsSettings()\n const styles = useStyles()\n const hotkey = createMemo(() => settings().openHotkey)\n const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']\n const changeHotkey = (newHotkey: ModifierKey) => () => {\n if (hotkey().includes(newHotkey)) {\n return setSettings({\n openHotkey: hotkey().filter((key) => key !== newHotkey),\n })\n }\n const existingModifiers = hotkey().filter((key) =>\n modifiers.includes(key as any),\n )\n const otherModifiers = hotkey().filter(\n (key) => !modifiers.includes(key as any),\n )\n setSettings({\n openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],\n })\n }\n return (\n <MainPanel withPadding>\n <Section>\n <SectionTitle>\n <SectionIcon>\n <SettingsCog />\n </SectionIcon>\n General\n </SectionTitle>\n <SectionDescription>\n Configure general behavior of the devtools panel.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Default open\"\n description=\"Automatically open the devtools panel when the page loads\"\n onChange={() =>\n setSettings({ defaultOpen: !settings().defaultOpen })\n }\n checked={settings().defaultOpen}\n />\n <Checkbox\n label=\"Hide trigger until hovered\"\n description=\"Keep the devtools trigger button hidden until you hover over its area\"\n onChange={() =>\n setSettings({ hideUntilHover: !settings().hideUntilHover })\n }\n checked={settings().hideUntilHover}\n />\n <Select\n label=\"Theme\"\n description=\"Choose the theme for the devtools panel\"\n value={settings().theme}\n options={[\n { label: 'Dark', value: 'dark' },\n { label: 'Light', value: 'light' },\n ]}\n onChange={(value) => setSettings({ theme: value })}\n />\n </div>\n </Section>\n\n {/* URL Flag Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <Link />\n </SectionIcon>\n URL Configuration\n </SectionTitle>\n <SectionDescription>\n Control when devtools are available based on URL parameters.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Require URL Flag\"\n description=\"Only show devtools when a specific URL parameter is present\"\n checked={settings().requireUrlFlag}\n onChange={(checked) =>\n setSettings({\n requireUrlFlag: checked,\n })\n }\n />\n <Show when={settings().requireUrlFlag}>\n <div class={styles().conditionalSetting}>\n <Input\n label=\"URL flag\"\n description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n placeholder=\"debug\"\n value={settings().urlFlag}\n onChange={(e) =>\n setSettings({\n urlFlag: e,\n })\n }\n />\n </div>\n </Show>\n </div>\n </Section>\n\n {/* Keyboard Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <Keyboard />\n </SectionIcon>\n Keyboard\n </SectionTitle>\n <SectionDescription>\n Customize keyboard shortcuts for quick access.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <div class={styles().settingsModifiers}>\n <Show keyed when={hotkey()}>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Shift')}\n outline={!hotkey().includes('Shift')}\n >\n Shift\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Alt')}\n outline={!hotkey().includes('Alt')}\n >\n Alt\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Meta')}\n outline={!hotkey().includes('Meta')}\n >\n Meta\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Control')}\n outline={!hotkey().includes('Control')}\n >\n Control\n </Button>\n </Show>\n </div>\n <Input\n label=\"Hotkey to open/close devtools\"\n description=\"Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above\"\n placeholder=\"a\"\n value={hotkey()\n .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))\n .join('+')}\n onChange={(e) => {\n const makeModifierArray = (key: string) => {\n if (key.length === 1) return [uppercaseFirstLetter(key)]\n const modifiers: Array<string> = []\n for (const character of key) {\n const newLetter = uppercaseFirstLetter(character)\n if (!modifiers.includes(newLetter)) modifiers.push(newLetter)\n }\n return modifiers\n }\n const modifiers = e\n .split('+')\n .flatMap((key) => makeModifierArray(key))\n .filter(Boolean)\n return setSettings({\n openHotkey: [\n ...hotkey().filter((key) =>\n ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),\n ),\n ...modifiers,\n ],\n })\n }}\n />\n Final shortcut is: {hotkey().join(' + ')}\n </div>\n </Section>\n\n {/* Position Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <GeoTag />\n </SectionIcon>\n Position\n </SectionTitle>\n <SectionDescription>\n Adjust the position of the trigger button and devtools panel.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <div class={styles().settingRow}>\n <Select\n label=\"Trigger Position\"\n options={[\n { label: 'Bottom Right', value: 'bottom-right' },\n { label: 'Bottom Left', value: 'bottom-left' },\n { label: 'Top Right', value: 'top-right' },\n { label: 'Top Left', value: 'top-left' },\n { label: 'Middle Right', value: 'middle-right' },\n { label: 'Middle Left', value: 'middle-left' },\n ]}\n value={settings().position}\n onChange={(value) =>\n setSettings({\n position: value,\n })\n }\n />\n <Select\n label=\"Panel Position\"\n value={settings().panelLocation}\n options={[\n { label: 'Top', value: 'top' },\n { label: 'Bottom', value: 'bottom' },\n ]}\n onChange={(value) =>\n setSettings({\n panelLocation: value,\n })\n }\n />\n </div>\n </div>\n </Section>\n </MainPanel>\n )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","hotkey","createMemo","openHotkey","modifiers","changeHotkey","newHotkey","includes","filter","key","existingModifiers","otherModifiers","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","SettingsCog","SectionDescription","_el$","_tmpl$","_$insert","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","Select","value","theme","options","_$effect","_$className","settingsGroup","Link","_el$2","requireUrlFlag","Show","when","_el$3","Input","placeholder","urlFlag","e","conditionalSetting","Keyboard","_el$4","_tmpl$2","_el$5","firstChild","_el$6","nextSibling","keyed","Button","variant","onclick","outline","join","makeModifierArray","length","uppercaseFirstLetter","character","newLetter","push","split","flatMap","Boolean","_p$","_v$","_v$2","settingsModifiers","t","undefined","GeoTag","_el$7","_tmpl$3","_el$8","position","panelLocation","_v$3","_v$4","settingRow"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/devtools",
3
- "version": "0.6.3",
3
+ "version": "0.6.6",
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",
@@ -42,11 +42,12 @@
42
42
  "clsx": "^2.1.1",
43
43
  "goober": "^2.1.16",
44
44
  "solid-js": "^1.9.7",
45
- "@tanstack/devtools-ui": "0.3.3",
46
- "@tanstack/devtools-event-bus": "0.3.1"
45
+ "@tanstack/devtools-event-bus": "0.3.1",
46
+ "@tanstack/devtools-ui": "0.3.4"
47
47
  },
48
48
  "peerDependencies": {
49
- "solid-js": ">=1.9.7"
49
+ "solid-js": ">=1.9.7",
50
+ "@tanstack/devtools-ui": "0.3.4"
50
51
  },
51
52
  "devDependencies": {
52
53
  "vite-plugin-solid": "^2.11.6"