@tanstack/devtools 0.6.2 → 0.6.5

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 (37) hide show
  1. package/dist/esm/components/tabs.js +5 -2
  2. package/dist/esm/components/tabs.js.map +1 -1
  3. package/dist/esm/context/devtools-context.d.ts +2 -2
  4. package/dist/esm/context/devtools-context.js.map +1 -1
  5. package/dist/esm/context/devtools-store.d.ts +5 -0
  6. package/dist/esm/context/devtools-store.js +2 -1
  7. package/dist/esm/context/devtools-store.js.map +1 -1
  8. package/dist/esm/context/use-devtools-context.d.ts +5 -0
  9. package/dist/esm/context/use-devtools-context.js +10 -1
  10. package/dist/esm/context/use-devtools-context.js.map +1 -1
  11. package/dist/esm/devtools.js +38 -27
  12. package/dist/esm/devtools.js.map +1 -1
  13. package/dist/esm/styles/tokens.js +15 -7
  14. package/dist/esm/styles/tokens.js.map +1 -1
  15. package/dist/esm/styles/use-styles.d.ts +2 -3
  16. package/dist/esm/styles/use-styles.js +62 -59
  17. package/dist/esm/styles/use-styles.js.map +1 -1
  18. package/dist/esm/tabs/index.d.ts +3 -3
  19. package/dist/esm/tabs/index.js +5 -5
  20. package/dist/esm/tabs/index.js.map +1 -1
  21. package/dist/esm/tabs/plugins-tab.js +9 -8
  22. package/dist/esm/tabs/plugins-tab.js.map +1 -1
  23. package/dist/esm/tabs/seo-tab.js +23 -22
  24. package/dist/esm/tabs/seo-tab.js.map +1 -1
  25. package/dist/esm/tabs/settings-tab.js +52 -34
  26. package/dist/esm/tabs/settings-tab.js.map +1 -1
  27. package/package.json +2 -2
  28. package/src/components/tabs.tsx +4 -33
  29. package/src/context/devtools-context.tsx +10 -2
  30. package/src/context/devtools-store.ts +8 -0
  31. package/src/context/use-devtools-context.ts +10 -0
  32. package/src/devtools.tsx +30 -25
  33. package/src/styles/use-styles.ts +66 -59
  34. package/src/tabs/index.tsx +4 -64
  35. package/src/tabs/plugins-tab.tsx +7 -10
  36. package/src/tabs/seo-tab.tsx +2 -15
  37. package/src/tabs/settings-tab.tsx +20 -65
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/index.d.ts CHANGED
@@ -2,16 +2,16 @@ export declare const tabs: readonly [{
2
2
  readonly name: "Plugins";
3
3
  readonly id: "plugins";
4
4
  readonly component: () => import("solid-js").JSX.Element;
5
- readonly icon: import("solid-js").JSX.Element;
5
+ readonly icon: () => import("solid-js").JSX.Element;
6
6
  }, {
7
7
  readonly name: "SEO";
8
8
  readonly id: "seo";
9
9
  readonly component: () => import("solid-js").JSX.Element;
10
- readonly icon: import("solid-js").JSX.Element;
10
+ readonly icon: () => import("solid-js").JSX.Element;
11
11
  }, {
12
12
  readonly name: "Settings";
13
13
  readonly id: "settings";
14
14
  readonly component: () => import("solid-js").JSX.Element;
15
- readonly icon: import("solid-js").JSX.Element;
15
+ readonly icon: () => import("solid-js").JSX.Element;
16
16
  }];
17
17
  export type TabName = (typeof tabs)[number]['id'];
package/dist/esm/tabs/index.js CHANGED
@@ -1,23 +1,23 @@
1
- import { template, createComponent } from "solid-js/web";
1
+ import { createComponent } from "solid-js/web";
2
+ import { List, PageSearch, Cogs } from "@tanstack/devtools-ui/icons";
2
3
  import { SettingsTab } from "./settings-tab.js";
3
4
  import { PluginsTab } from "./plugins-tab.js";
4
5
  import { SeoTab } from "./seo-tab.js";
5
- var _tmpl$ = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M8 6h10"></path><path d="M6 12h9"></path><path d="M11 18h7">`), _tmpl$2 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="lucide lucide-file-search2-icon lucide-file-search-2"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><circle cx=11.5 cy=14.5 r=2.5></circle><path d="M13.3 16.3 15 18">`), _tmpl$3 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path><path d="M12 2v2"></path><path d="M12 22v-2"></path><path d="m17 20.66-1-1.73"></path><path d="M11 10.27 7 3.34"></path><path d="m20.66 17-1.73-1"></path><path d="m3.34 7 1.73 1"></path><path d="M14 12h8"></path><path d="M2 12h2"></path><path d="m20.66 7-1.73 1"></path><path d="m3.34 17 1.73-1"></path><path d="m17 3.34-1 1.73"></path><path d="m11 13.73-4 6.93">`);
6
6
  const tabs = [{
7
7
  name: "Plugins",
8
8
  id: "plugins",
9
9
  component: () => createComponent(PluginsTab, {}),
10
- icon: _tmpl$()
10
+ icon: () => createComponent(List, {})
11
11
  }, {
12
12
  name: "SEO",
13
13
  id: "seo",
14
14
  component: () => createComponent(SeoTab, {}),
15
- icon: _tmpl$2()
15
+ icon: () => createComponent(PageSearch, {})
16
16
  }, {
17
17
  name: "Settings",
18
18
  id: "settings",
19
19
  component: () => createComponent(SettingsTab, {}),
20
- icon: _tmpl$3()
20
+ icon: () => createComponent(Cogs, {})
21
21
  }];
22
22
  export {
23
23
  tabs
package/dist/esm/tabs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/tabs/index.tsx"],"sourcesContent":["import { SettingsTab } from './settings-tab'\nimport { PluginsTab } from './plugins-tab'\nimport { SeoTab } from './seo-tab'\n\nexport const tabs = [\n {\n name: 'Plugins',\n id: 'plugins',\n component: () => <PluginsTab />,\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M8 6h10\" />\n <path d=\"M6 12h9\" />\n <path d=\"M11 18h7\" />\n </svg>\n ),\n },\n {\n name: 'SEO',\n id: 'seo',\n component: () => <SeoTab />,\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lucide lucide-file-search2-icon lucide-file-search-2\"\n >\n <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n <circle cx=\"11.5\" cy=\"14.5\" r=\"2.5\" />\n <path d=\"M13.3 16.3 15 18\" />\n </svg>\n ),\n },\n {\n name: 'Settings',\n id: 'settings',\n component: () => <SettingsTab />,\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\" />\n <path d=\"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\" />\n <path d=\"M12 2v2\" />\n <path d=\"M12 22v-2\" />\n <path d=\"m17 20.66-1-1.73\" />\n <path d=\"M11 10.27 7 3.34\" />\n <path d=\"m20.66 17-1.73-1\" />\n <path d=\"m3.34 7 1.73 1\" />\n <path d=\"M14 12h8\" />\n <path d=\"M2 12h2\" />\n <path d=\"m20.66 7-1.73 1\" />\n <path d=\"m3.34 17 1.73-1\" />\n <path d=\"m17 3.34-1 1.73\" />\n <path d=\"m11 13.73-4 6.93\" />\n </svg>\n ),\n },\n] as const\n\nexport type TabName = (typeof tabs)[number]['id']\n"],"names":["tabs","name","id","component","_$createComponent","PluginsTab","icon","_tmpl$","SeoTab","_tmpl$2","SettingsTab","_tmpl$3"],"mappings":";;;;;AAIO,MAAMA,OAAO,CAClB;AAAA,EACEC,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOC,YAAU,EAAA;AAAA,EAC5BC,MAAIC,OAAAA;AAiBN,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOI,QAAM,EAAA;AAAA,EACxBF,MAAIG,QAAAA;AAmBN,GACA;AAAA,EACER,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOM,aAAW,EAAA;AAAA,EAC7BJ,MAAIK,QAAAA;AA4BN,CAAC;"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/tabs/index.tsx"],"sourcesContent":["import { Cogs, List, PageSearch } from '@tanstack/devtools-ui/icons'\nimport { SettingsTab } from './settings-tab'\nimport { PluginsTab } from './plugins-tab'\nimport { SeoTab } from './seo-tab'\n\nexport const tabs = [\n {\n name: 'Plugins',\n id: 'plugins',\n component: () => <PluginsTab />,\n icon: () => <List />,\n },\n {\n name: 'SEO',\n id: 'seo',\n component: () => <SeoTab />,\n icon: () => <PageSearch />,\n },\n {\n name: 'Settings',\n id: 'settings',\n component: () => <SettingsTab />,\n icon: () => <Cogs />,\n },\n] as const\n\nexport type TabName = (typeof tabs)[number]['id']\n"],"names":["tabs","name","id","component","_$createComponent","PluginsTab","icon","List","SeoTab","PageSearch","SettingsTab","Cogs"],"mappings":";;;;;AAKO,MAAMA,OAAO,CAClB;AAAA,EACEC,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOC,YAAU,EAAA;AAAA,EAC5BC,MAAMA,MAAAF,gBAAOG,MAAI,CAAA,CAAA;AACnB,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOI,QAAM,EAAA;AAAA,EACxBF,MAAMA,MAAAF,gBAAOK,YAAU,CAAA,CAAA;AACzB,GACA;AAAA,EACER,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOM,aAAW,EAAA;AAAA,EAC7BJ,MAAMA,MAAAF,gBAAOO,MAAI,CAAA,CAAA;AACnB,CAAC;"}
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":"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"}