@tanstack/devtools 0.6.7 → 0.6.8

package/dist/esm/styles/use-styles.js

@@ -1,422 +0,0 @@
-import * as goober from "goober";
-import { createSignal, createEffect } from "solid-js";
-import { useTheme } from "../context/use-devtools-context.js";
-import { tokens } from "./tokens.js";
-const mSecondsToCssSeconds = (mSeconds) => `${(mSeconds / 1e3).toFixed(2)}s`;
-const stylesFactory = (theme) => {
-  const { colors, font, size, border } = tokens;
-  const { fontFamily, size: fontSize } = font;
-  const css = goober.css;
-  const t = (light, dark) => theme === "light" ? light : dark;
-  return {
-    seoTabContainer: css`
-      padding: 0;
-      margin: 0 auto;
-      background: ${t(colors.white, colors.darkGray[700])};
-      border-radius: 12px;
-      box-shadow: 0 2px 16px ${t("rgba(0, 0, 0, 0.04)", "rgba(0, 0, 0, 0.08)")};
-      overflow-y: auto;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      width: 100%;
-      overflow-y: auto;
-    `,
-    seoTabTitle: css`
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: ${t(colors.purple[500], colors.purple[400])};
-      margin: 0;
-      padding: 1rem 1.5rem 0.5rem 1.5rem;
-      text-align: left;
-      border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
-    `,
-    seoTabSection: css`
-      padding: 1.5rem;
-      background: ${t(colors.gray[100], colors.gray[800])};
-      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      margin-bottom: 2rem;
-      border-radius: 0.75rem;
-    `,
-    seoPreviewSection: css`
-      display: flex;
-      flex-direction: row;
-      gap: 16px;
-      margin-bottom: 0;
-      justify-content: flex-start;
-      align-items: flex-start;
-      overflow-x: auto;
-      flex-wrap: wrap;
-      padding-bottom: 0.5rem;
-    `,
-    seoPreviewCard: css`
-      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
-      border-radius: 8px;
-      padding: 12px 10px;
-      background: ${t(colors.white, colors.darkGray[900])};
-      margin-bottom: 0;
-      box-shadow: 0 1px 4px ${t("rgba(0,0,0,0.02)", "rgba(0,0,0,0.04)")};
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      min-width: 200px;
-      max-width: 240px;
-      font-size: 0.95rem;
-      gap: 4px;
-    `,
-    seoPreviewHeader: css`
-      font-size: 1rem;
-      font-weight: 500;
-      margin-bottom: 6px;
-      color: ${t(colors.purple[500], colors.purple[400])};
-    `,
-    seoPreviewImage: css`
-      max-width: 100%;
-      border-radius: 6px;
-      margin-bottom: 6px;
-      box-shadow: 0 1px 2px ${t("rgba(0,0,0,0.03)", "rgba(0,0,0,0.06)")};
-      height: 160px;
-    `,
-    seoPreviewTitle: css`
-      font-size: 1rem;
-      font-weight: 600;
-      margin-bottom: 2px;
-      color: ${t(colors.gray[900], colors.gray[100])};
-    `,
-    seoPreviewDesc: css`
-      color: ${t(colors.gray[700], colors.gray[300])};
-      margin-bottom: 2px;
-      font-size: 0.95rem;
-    `,
-    seoPreviewUrl: css`
-      color: ${t(colors.gray[500], colors.gray[500])};
-      font-size: 0.9rem;
-      margin-bottom: 2px;
-      word-break: break-all;
-    `,
-    seoMissingTagsSection: css`
-      margin-top: 4px;
-      font-size: 0.95rem;
-      color: ${t(colors.red[400], colors.red[400])};
-    `,
-    seoMissingTagsList: css`
-      margin: 4px 0 0 0;
-      padding: 0;
-      list-style: none;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      max-width: 240px;
-    `,
-    seoMissingTag: css`
-      background: ${t(colors.red[100], colors.red[500] + "22")};
-      color: ${t(colors.red[700], colors.red[500])};
-      border-radius: 4px;
-      padding: 1px 6px;
-      font-size: 0.9rem;
-      font-weight: 500;
-    `,
-    seoAllTagsFound: css`
-      color: ${t(colors.green[700], colors.green[500])};
-      font-weight: 500;
-      margin-left: 6px;
-      font-size: 0.95rem;
-    `,
-    devtoolsPanelContainer: (panelLocation, isDetached) => css`
-      direction: ltr;
-      position: fixed;
-      overflow-y: hidden;
-      overflow-x: hidden;
-      ${panelLocation}: 0;
-      right: 0;
-      z-index: 99999;
-      width: 100%;
-      ${isDetached ? "" : "max-height: 90%;"}
-      border-top: 1px solid ${t(colors.gray[300], colors.gray[700])};
-      transform-origin: top;
-    `,
-    devtoolsPanelContainerVisibility: (isOpen) => {
-      return css`
-        visibility: ${isOpen ? "visible" : "hidden"};
-        height: ${isOpen ? "auto" : "0"};
-      `;
-    },
-    devtoolsPanelContainerResizing: (isResizing) => {
-      if (isResizing()) {
-        return css`
-          transition: none;
-        `;
-      }
-      return css`
-        transition: all 0.4s ease;
-      `;
-    },
-    devtoolsPanelContainerAnimation: (isOpen, height) => {
-      if (isOpen) {
-        return css`
-          pointer-events: auto;
-          transform: translateY(0);
-        `;
-      }
-      return css`
-        pointer-events: none;
-        transform: translateY(${height}px);
-      `;
-    },
-    devtoolsPanel: css`
-      display: flex;
-      font-size: ${fontSize.sm};
-      font-family: ${fontFamily.sans};
-      background-color: ${t(colors.white, colors.darkGray[700])};
-      color: ${t(colors.gray[900], colors.gray[300])};
-      width: w-screen;
-      flex-direction: row;
-      overflow-x: hidden;
-      overflow-y: hidden;
-      height: 100%;
-    `,
-    dragHandle: (panelLocation) => css`
-      position: absolute;
-      left: 0;
-      ${panelLocation === "bottom" ? "top" : "bottom"}: 0;
-      width: 100%;
-      height: 4px;
-      cursor: row-resize;
-      user-select: none;
-      z-index: 100000;
-      &:hover {
-        background-color: ${t(colors.purple[700], colors.purple[400])};
-      }
-    `,
-    mainCloseBtn: css`
-      background: transparent;
-      position: fixed;
-      z-index: 99999;
-      display: inline-flex;
-      width: fit-content;
-      cursor: pointer;
-      appearance: none;
-      border: 0;
-      align-items: center;
-      padding: 0;
-      font-size: ${font.size.xs};
-      cursor: pointer;
-      transition: all 0.25s ease-out;
-      &:hide-until-hover {
-        opacity: 0;
-        pointer-events: none;
-        visibility: hidden;
-      }
-      &:hide-until-hover:hover {
-        opacity: 1;
-        pointer-events: auto;
-        visibility: visible;
-      }
-      &:focus-visible {
-        outline-offset: 2px;
-        border-radius: ${border.radius.full};
-        outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
-      }
-    `,
-    mainCloseBtnPosition: (position) => {
-      const base = css`
-        ${position === "top-left" ? `top: ${size[2]}; left: ${size[2]};` : ""}
-        ${position === "top-right" ? `top: ${size[2]}; right: ${size[2]};` : ""}
-        ${position === "middle-left" ? `top: 50%; left: ${size[2]}; transform: translateY(-50%);` : ""}
-        ${position === "middle-right" ? `top: 50%; right: ${size[2]}; transform: translateY(-50%);` : ""}
-        ${position === "bottom-left" ? `bottom: ${size[2]}; left: ${size[2]};` : ""}
-        ${position === "bottom-right" ? `bottom: ${size[2]}; right: ${size[2]};` : ""}
-      `;
-      return base;
-    },
-    mainCloseBtnAnimation: (isOpen, hideUntilHover) => {
-      if (!isOpen) {
-        return hideUntilHover ? css`
-              opacity: 0;
-
-              &:hover {
-                opacity: 1;
-                pointer-events: auto;
-                visibility: visible;
-              }
-            ` : css`
-              opacity: 1;
-              pointer-events: auto;
-              visibility: visible;
-            `;
-      }
-      return css`
-        opacity: 0;
-        pointer-events: none;
-        visibility: hidden;
-      `;
-    },
-    tabContainer: css`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: flex-start;
-      height: 100%;
-      background-color: ${t(colors.gray[100], colors.darkGray[800])};
-      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
-      box-shadow: 0 1px 0 ${t(colors.gray[200], colors.gray[700])};
-      position: relative;
-      width: ${size[10]};
-    `,
-    tab: css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: ${size[10]};
-      cursor: pointer;
-      font-size: ${fontSize.sm};
-      font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[700], colors.gray[300])};
-      background-color: transparent;
-      border: none;
-      transition: all 0.2s ease-in-out;
-      border-left: 2px solid transparent;
-      &:hover:not(.close):not(.active):not(.detach) {
-        background-color: ${t(colors.gray[200], colors.gray[700])};
-        color: ${t(colors.gray[900], colors.gray[100])};
-        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
-      }
-      &.active {
-        background-color: ${t(colors.purple[200], colors.purple[500])};
-        color: ${t(colors.gray[900], colors.gray[100])};
-        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
-      }
-      &.detach {
-        &:hover {
-          background-color: ${t(colors.gray[200], colors.gray[700])};
-        }
-        &:hover {
-          color: ${t(colors.green[700], colors.green[500])};
-        }
-      }
-      &.close {
-        margin-top: auto;
-        &:hover {
-          background-color: ${t(colors.gray[200], colors.gray[700])};
-        }
-        &:hover {
-          color: ${t(colors.red[700], colors.red[500])};
-        }
-      }
-      &.disabled {
-        cursor: not-allowed;
-        opacity: 0.2;
-        pointer-events: none;
-      }
-      &.disabled:hover {
-        background-color: transparent;
-        color: ${colors.gray[300]};
-      }
-    `,
-    tabContent: css`
-      transition: all 0.2s ease-in-out;
-      width: 100%;
-      height: 100%;
-    `,
-    pluginsTabPanel: css`
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    `,
-    pluginsTabDraw: (isExpanded) => css`
-      width: ${isExpanded ? size[48] : 0};
-      height: 100%;
-      background-color: ${t(colors.white, colors.darkGray[800])};
-      box-shadow: 0 1px 0 ${colors.gray[700]};
-      ${isExpanded ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};` : ""}
-    `,
-    pluginsTabDrawExpanded: css`
-      width: ${size[48]};
-      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
-    `,
-    pluginsTabDrawTransition: (mSeconds) => {
-      return css`
-        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;
-      `;
-    },
-    pluginsTabSidebar: (isExpanded) => css`
-      width: ${size[48]};
-      overflow-y: auto;
-      transform: ${isExpanded ? "translateX(0)" : "translateX(-100%)"};
-    `,
-    pluginsTabSidebarTransition: (mSeconds) => {
-      return css`
-        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;
-      `;
-    },
-    pluginName: css`
-      font-size: ${fontSize.xs};
-      font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[700], colors.gray[300])};
-      padding: ${size[2]};
-      cursor: pointer;
-      text-align: center;
-      transition: all 0.2s ease-in-out;
-      &:hover {
-        background-color: ${t(colors.gray[200], colors.gray[700])};
-        color: ${t(colors.gray[900], colors.gray[100])};
-        padding: ${size[2]};
-      }
-      &.active {
-        background-color: ${t(colors.purple[200], colors.purple[500])};
-        color: ${t(colors.gray[900], colors.gray[100])};
-      }
-    `,
-    pluginsTabContent: css`
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-    `,
-    settingsGroup: css`
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    `,
-    conditionalSetting: css`
-      margin-left: 1.5rem;
-      padding-left: 1rem;
-      border-left: 2px solid ${t(colors.purple[600], colors.purple[400])};
-      background-color: ${t(colors.gray[100], colors.darkGray[800])};
-      padding: 1rem;
-      border-radius: 0.5rem;
-      margin-top: 0.5rem;
-    `,
-    settingRow: css`
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1rem;
-
-      @media (max-width: 768px) {
-        grid-template-columns: 1fr;
-      }
-    `,
-    settingsModifiers: css`
-      display: flex;
-      gap: 0.5rem;
-    `
-  };
-};
-function useStyles() {
-  const { theme } = useTheme();
-  const [styles, setStyles] = createSignal(stylesFactory(theme()));
-  createEffect(() => {
-    setStyles(stylesFactory(theme()));
-  });
-  return styles;
-}
-export {
-  useStyles
-};
-//# sourceMappingURL=use-styles.js.map

package/dist/esm/styles/use-styles.js.map

@@ -1 +0,0 @@
-{"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":"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"}

package/dist/esm/tabs/index.d.ts

@@ -1,17 +0,0 @@
-export declare const tabs: readonly [{
-    readonly name: "Plugins";
-    readonly id: "plugins";
-    readonly component: () => import("solid-js").JSX.Element;
-    readonly icon: () => import("solid-js").JSX.Element;
-}, {
-    readonly name: "SEO";
-    readonly id: "seo";
-    readonly component: () => import("solid-js").JSX.Element;
-    readonly icon: () => import("solid-js").JSX.Element;
-}, {
-    readonly name: "Settings";
-    readonly id: "settings";
-    readonly component: () => import("solid-js").JSX.Element;
-    readonly icon: () => import("solid-js").JSX.Element;
-}];
-export type TabName = (typeof tabs)[number]['id'];

package/dist/esm/tabs/index.js

@@ -1,25 +0,0 @@
-import { createComponent } from "solid-js/web";
-import { List, PageSearch, Cogs } from "@tanstack/devtools-ui/icons";
-import { SettingsTab } from "./settings-tab.js";
-import { PluginsTab } from "./plugins-tab.js";
-import { SeoTab } from "./seo-tab.js";
-const tabs = [{
-  name: "Plugins",
-  id: "plugins",
-  component: () => createComponent(PluginsTab, {}),
-  icon: () => createComponent(List, {})
-}, {
-  name: "SEO",
-  id: "seo",
-  component: () => createComponent(SeoTab, {}),
-  icon: () => createComponent(PageSearch, {})
-}, {
-  name: "Settings",
-  id: "settings",
-  component: () => createComponent(SettingsTab, {}),
-  icon: () => createComponent(Cogs, {})
-}];
-export {
-  tabs
-};
-//# sourceMappingURL=index.js.map

package/dist/esm/tabs/index.js.map

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1 +0,0 @@
-export declare const PluginsTab: () => import("solid-js").JSX.Element;

package/dist/esm/tabs/plugins-tab.js

@@ -1,88 +0,0 @@
-import { template, insert, createComponent, setAttribute, effect, className, use, delegateEvents } from "solid-js/web";
-import { createEffect, For } from "solid-js";
-import clsx from "clsx";
-import { useDrawContext } from "../context/draw-context.js";
-import { usePlugins, useTheme } from "../context/use-devtools-context.js";
-import { useStyles } from "../styles/use-styles.js";
-import { PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID } from "../constants.js";
-var _tmpl$ = /* @__PURE__ */ template(`<div><div><div></div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><h3>`);
-const PluginsTab = () => {
-  const {
-    plugins,
-    activePlugin,
-    setActivePlugin
-  } = usePlugins();
-  const {
-    expanded,
-    hoverUtils,
-    animationMs
-  } = useDrawContext();
-  let activePluginRef;
-  const {
-    theme
-  } = useTheme();
-  createEffect(() => {
-    const currentActivePlugin = plugins()?.find((plugin) => plugin.id === activePlugin());
-    if (activePluginRef && currentActivePlugin) {
-      currentActivePlugin.render(activePluginRef, theme());
-    }
-  });
-  const styles = useStyles();
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
-    _el$2.addEventListener("mouseleave", () => {
-      hoverUtils.leave();
-    });
-    _el$2.addEventListener("mouseenter", () => {
-      hoverUtils.enter();
-    });
-    insert(_el$3, createComponent(For, {
-      get each() {
-        return plugins();
-      },
-      children: (plugin) => {
-        let pluginHeading;
-        createEffect(() => {
-          if (pluginHeading) {
-            typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading, theme());
-          }
-        });
-        return (() => {
-          var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild;
-          _el$5.$$click = () => setActivePlugin(plugin.id);
-          var _ref$2 = pluginHeading;
-          typeof _ref$2 === "function" ? use(_ref$2, _el$6) : pluginHeading = _el$6;
-          setAttribute(_el$6, "id", PLUGIN_TITLE_CONTAINER_ID);
-          effect(() => className(_el$5, clsx(styles().pluginName, {
-            active: activePlugin() === plugin.id
-          })));
-          return _el$5;
-        })();
-      }
-    }));
-    var _ref$ = activePluginRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$4) : activePluginRef = _el$4;
-    setAttribute(_el$4, "id", PLUGIN_CONTAINER_ID);
-    effect((_p$) => {
-      var _v$ = styles().pluginsTabPanel, _v$2 = clsx(styles().pluginsTabDraw(expanded()), {
-        [styles().pluginsTabDraw(expanded())]: expanded()
-      }, styles().pluginsTabDrawTransition(animationMs)), _v$3 = clsx(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs)), _v$4 = styles().pluginsTabContent;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    return _el$;
-  })();
-};
-delegateEvents(["click"]);
-export {
-  PluginsTab
-};
-//# sourceMappingURL=plugins-tab.js.map

package/dist/esm/tabs/plugins-tab.js.map

@@ -1 +0,0 @@
-{"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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"}

package/dist/esm/tabs/seo-tab.d.ts

@@ -1 +0,0 @@
-export declare const SeoTab: () => import("solid-js").JSX.Element;