@tanstack/devtools 0.4.4 → 0.5.0

package/dist/cjs/styles/use-styles.cjs

@@ -1,326 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const goober = require("goober");
-const solidJs = require("solid-js");
-const tokens = require("./tokens.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const goober__namespace = /* @__PURE__ */ _interopNamespaceDefault(goober);
-const stylesFactory = () => {
-  const { colors, font, size, alpha, border } = tokens.tokens;
-  const { fontFamily, size: fontSize } = font;
-  const css = goober__namespace.css;
-  return {
-    devtoolsPanelContainer: (panelLocation) => css`
-      direction: ltr;
-      position: fixed;
-      overflow-y: hidden;
-      overflow-x: hidden;
-      ${panelLocation}: 0;
-      right: 0;
-      z-index: 99999;
-      width: 100%;
-
-      max-height: 90%;
-      border-top: 1px solid ${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: ${colors.darkGray[700]};
-      color: ${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: ${colors.purple[400]}${alpha[90]};
-      }
-    `,
-    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 ${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: ${colors.darkGray[800]};
-      border-right: 1px solid ${colors.gray[700]};
-      box-shadow: 0 1px 0 ${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: ${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) {
-        background-color: ${colors.gray[700]};
-        color: ${colors.gray[100]};
-        border-left: 2px solid ${colors.purple[500]};
-      }
-      &.active {
-        background-color: ${colors.purple[500]};
-        color: ${colors.gray[100]};
-        border-left: 2px solid ${colors.purple[500]};
-      }
-      &.close {
-        margin-top: auto;
-        &:hover {
-          background-color: ${colors.gray[700]};
-        }
-        &:hover {
-          color: ${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;
-    `,
-    pluginsTabSidebar: css`
-      width: ${size[48]};
-      background-color: ${colors.darkGray[800]};
-      border-right: 1px solid ${colors.gray[700]};
-      box-shadow: 0 1px 0 ${colors.gray[700]};
-      overflow-y: auto;
-    `,
-    pluginName: css`
-      font-size: ${fontSize.xs};
-      font-family: ${fontFamily.sans};
-      color: ${colors.gray[300]};
-      padding: ${size[2]};
-      cursor: pointer;
-      text-align: center;
-      transition: all 0.2s ease-in-out;
-      &:hover {
-        background-color: ${colors.gray[700]};
-        color: ${colors.gray[100]};
-        padding: ${size[2]};
-      }
-      &.active {
-        background-color: ${colors.purple[500]};
-        color: ${colors.gray[100]};
-      }
-    `,
-    pluginsTabContent: css`
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-    `,
-    settingsContainer: css`
-      padding: 1.5rem;
-      height: 100%;
-      overflow-y: auto;
-      background-color: ${colors.darkGray[700]};
-    `,
-    settingsSection: css`
-      margin-bottom: 2rem;
-      padding: 1.5rem;
-      background-color: ${colors.darkGray[800]};
-      border: 1px solid ${colors.gray[700]};
-      border-radius: 0.75rem;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    `,
-    sectionTitle: css`
-      font-size: 1.125rem;
-      font-weight: 600;
-      color: ${colors.gray[100]};
-      margin: 0 0 1rem 0;
-      padding-bottom: 0.5rem;
-      border-bottom: 1px solid ${colors.gray[700]};
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      text-align: left;
-    `,
-    sectionIcon: css`
-      color: ${colors.purple[400]};
-    `,
-    sectionDescription: css`
-      color: ${colors.gray[400]};
-      font-size: 0.875rem;
-      margin: 0 0 1.5rem 0;
-      line-height: 1.5;
-      text-align: left;
-    `,
-    settingsGroup: css`
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    `,
-    conditionalSetting: css`
-      margin-left: 1.5rem;
-      padding-left: 1rem;
-      border-left: 2px solid ${colors.purple[400]};
-      background-color: ${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 [_styles] = solidJs.createSignal(stylesFactory());
-  return _styles;
-}
-exports.useStyles = useStyles;
-//# sourceMappingURL=use-styles.cjs.map

package/dist/cjs/styles/use-styles.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-styles.cjs","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 stylesFactory = () => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily, size: fontSize } = font\n  const css = goober.css\n\n  return {\n    devtoolsPanelContainer: (\n      panelLocation: TanStackDevtoolsConfig['panelLocation'],\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\n      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) {\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      &.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    pluginsTabSidebar: css`\n      width: ${size[48]};\n      background-color: ${colors.darkGray[800]};\n      border-right: 1px solid ${colors.gray[700]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n      overflow-y: auto;\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    settingsContainer: css`\n      padding: 1.5rem;\n      height: 100%;\n      overflow-y: auto;\n      background-color: ${colors.darkGray[700]};\n    `,\n    settingsSection: css`\n      margin-bottom: 2rem;\n      padding: 1.5rem;\n      background-color: ${colors.darkGray[800]};\n      border: 1px solid ${colors.gray[700]};\n      border-radius: 0.75rem;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    `,\n    sectionTitle: css`\n      font-size: 1.125rem;\n      font-weight: 600;\n      color: ${colors.gray[100]};\n      margin: 0 0 1rem 0;\n      padding-bottom: 0.5rem;\n      border-bottom: 1px solid ${colors.gray[700]};\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      text-align: left;\n    `,\n    sectionIcon: css`\n      color: ${colors.purple[400]};\n    `,\n    sectionDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.875rem;\n      margin: 0 0 1.5rem 0;\n      line-height: 1.5;\n      text-align: left;\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":["tokens","goober","createSignal"],"mappings":"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"}

package/dist/cjs/styles/use-styles.d.cts

@@ -1,29 +0,0 @@
-import { TanStackDevtoolsConfig } from '../context/devtools-context.cjs';
-import { Accessor } from 'solid-js';
-export declare function useStyles(): Accessor<{
-    devtoolsPanelContainer: (panelLocation: TanStackDevtoolsConfig["panelLocation"]) => string;
-    devtoolsPanelContainerVisibility: (isOpen: boolean) => string;
-    devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => string;
-    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => string;
-    devtoolsPanel: string;
-    dragHandle: (panelLocation: TanStackDevtoolsConfig["panelLocation"]) => string;
-    mainCloseBtn: string;
-    mainCloseBtnPosition: (position: TanStackDevtoolsConfig["position"]) => string;
-    mainCloseBtnAnimation: (isOpen: boolean, hideUntilHover: boolean) => string;
-    tabContainer: string;
-    tab: string;
-    tabContent: string;
-    pluginsTabPanel: string;
-    pluginsTabSidebar: string;
-    pluginName: string;
-    pluginsTabContent: string;
-    settingsContainer: string;
-    settingsSection: string;
-    sectionTitle: string;
-    sectionIcon: string;
-    sectionDescription: string;
-    settingsGroup: string;
-    conditionalSetting: string;
-    settingRow: string;
-    settingsModifiers: string;
-}>;

package/dist/cjs/tabs/index.cjs

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const settingsTab = require("./settings-tab.cjs");
-const pluginsTab = require("./plugins-tab.cjs");
-var _tmpl$ = /* @__PURE__ */ web.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__ */ web.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">`);
-const tabs = [{
-  name: "Plugins",
-  id: "plugins",
-  component: () => web.createComponent(pluginsTab.PluginsTab, {}),
-  icon: _tmpl$()
-}, {
-  name: "Settings",
-  id: "settings",
-  component: () => web.createComponent(settingsTab.SettingsTab, {}),
-  icon: _tmpl$2()
-}];
-exports.tabs = tabs;
-//# sourceMappingURL=index.cjs.map

package/dist/cjs/tabs/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/tabs/index.tsx"],"sourcesContent":["import { SettingsTab } from './settings-tab'\nimport { PluginsTab } from './plugins-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: '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$","SettingsTab","_tmpl$2"],"mappings":";;;;;;AAGO,MAAMA,OAAO,CAClB;AAAA,EACEC,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,IAAAA,gBAAOC,WAAAA,YAAU,EAAA;AAAA,EAC5BC,MAAIC,OAAAA;AAiBN,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,IAAAA,gBAAOI,YAAAA,aAAW,EAAA;AAAA,EAC7BF,MAAIG,QAAAA;AA4BN,CAAC;;"}

package/dist/cjs/tabs/index.d.cts

@@ -1,12 +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: "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/cjs/tabs/plugins-tab.cjs

@@ -1,69 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const clsx = require("clsx");
-const useDevtoolsContext = require("../context/use-devtools-context.cjs");
-const useStyles = require("../styles/use-styles.cjs");
-const constants = require("../constants.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div><div></div><div>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div><h3>`);
-const PluginsTab = () => {
-  const {
-    plugins,
-    activePlugin,
-    setActivePlugin
-  } = useDevtoolsContext.usePlugins();
-  let activePluginRef;
-  solidJs.createEffect(() => {
-    const currentActivePlugin = plugins()?.find((plugin) => plugin.id === activePlugin());
-    if (activePluginRef && currentActivePlugin) {
-      currentActivePlugin.render(activePluginRef);
-    }
-  });
-  const styles = useStyles.useStyles();
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-    web.insert(_el$2, web.createComponent(solidJs.For, {
-      get each() {
-        return plugins();
-      },
-      children: (plugin) => {
-        let pluginHeading;
-        solidJs.createEffect(() => {
-          if (pluginHeading) {
-            typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading);
-          }
-        });
-        return (() => {
-          var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
-          _el$4.$$click = () => setActivePlugin(plugin.id);
-          var _ref$2 = pluginHeading;
-          typeof _ref$2 === "function" ? web.use(_ref$2, _el$5) : pluginHeading = _el$5;
-          web.setAttribute(_el$5, "id", constants.PLUGIN_TITLE_CONTAINER_ID);
-          web.effect(() => web.className(_el$4, clsx(styles().pluginName, {
-            active: activePlugin() === plugin.id
-          })));
-          return _el$4;
-        })();
-      }
-    }));
-    var _ref$ = activePluginRef;
-    typeof _ref$ === "function" ? web.use(_ref$, _el$3) : activePluginRef = _el$3;
-    web.setAttribute(_el$3, "id", constants.PLUGIN_CONTAINER_ID);
-    web.effect((_p$) => {
-      var _v$ = styles().pluginsTabPanel, _v$2 = styles().pluginsTabSidebar, _v$3 = styles().pluginsTabContent;
-      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$;
-  })();
-};
-web.delegateEvents(["click"]);
-exports.PluginsTab = PluginsTab;
-//# sourceMappingURL=plugins-tab.cjs.map

package/dist/cjs/tabs/plugins-tab.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"plugins-tab.cjs","sources":["../../../src/tabs/plugins-tab.tsx"],"sourcesContent":["import { For, createEffect } from 'solid-js'\nimport clsx from 'clsx'\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  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  return (\n    <div class={styles().pluginsTabPanel}>\n      <div class={styles().pluginsTabSidebar}>\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        id={PLUGIN_CONTAINER_ID}\n        ref={activePluginRef}\n        class={styles().pluginsTabContent}\n      ></div>\n    </div>\n  )\n}\n"],"names":["PluginsTab","plugins","activePlugin","setActivePlugin","usePlugins","activePluginRef","createEffect","currentActivePlugin","find","plugin","id","render","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$insert","_$createComponent","For","each","children","pluginHeading","name","textContent","_el$4","_tmpl$2","_el$5","$$click","_ref$2","_$use","_$setAttribute","PLUGIN_TITLE_CONTAINER_ID","_$effect","_$className","clsx","pluginName","active","_ref$","PLUGIN_CONTAINER_ID","_p$","_v$","pluginsTabPanel","_v$2","pluginsTabSidebar","_v$3","pluginsTabContent","e","t","a","undefined","_$delegateEvents"],"mappings":";;;;;;;;;AAMO,MAAMA,aAAaA,MAAM;AAC9B,QAAM;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAcC;AAAAA,EAAAA,IAAoBC,8BAAAA;AACnD,MAAIC;AAEJC,UAAAA,aAAa,MAAM;AACjB,UAAMC,sBAAsBN,WAAWO,KACpCC,YAAWA,OAAOC,OAAOR,cAC5B;AACA,QAAIG,mBAAmBE,qBAAqB;AAC1CA,0BAAoBI,OAAON,eAAe;AAAA,IAC5C;AAAA,EACF,CAAC;AACD,QAAMO,SAASC,UAAAA,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAC,eAAAJ,OAAAK,IAAAA,gBAGOC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEtB,QAAAA;AAAAA,MAAS;AAAA,MAAAuB,UAChBf,CAAAA,WAAW;AACX,YAAIgB;AACJnB,gBAAAA,aAAa,MAAM;AACjB,cAAImB,eAAe;AACjB,mBAAOhB,OAAOiB,SAAS,WAClBD,cAAcE,cAAclB,OAAOiB,OACpCjB,OAAOiB,KAAKD,aAAa;AAAA,UAC/B;AAAA,QACF,CAAC;AACD,gBAAA,MAAA;AAAA,cAAAG,QAAAC,QAAAA,GAAAC,QAAAF,MAAAX;AAAAW,gBAAAG,UAEa,MAAM5B,gBAAgBM,OAAOC,EAAG;AAAC,cAAAsB,SAKFP;AAAa,iBAAAO,WAAA,aAAAC,IAAAA,IAAAD,QAAAF,KAAA,IAAbL,gBAAaK;AAAAI,2BAAAJ,OAAA,MAA7CK,mCAAyB;AAAAC,cAAAA,OAAA,MAAAC,IAAAA,UAAAT,OAJ1BU,KAAK1B,OAAAA,EAAS2B,YAAY;AAAA,YAC/BC,QAAQtC,aAAAA,MAAmBO,OAAOC;AAAAA,UAAAA,CACnC,CAAC,CAAA;AAAA,iBAAAkB;AAAAA,QAAA,GAAA;AAAA,MAKR;AAAA,IAAA,CAAC,CAAA;AAAA,QAAAa,QAKEpC;AAAe,WAAAoC,UAAA,aAAAR,IAAAA,IAAAQ,OAAAvB,KAAA,IAAfb,kBAAea;AAAAgB,qBAAAhB,OAAA,MADhBwB,6BAAmB;AAAAN,QAAAA,OAAAO,CAAAA,QAAA;AAAA,UAAAC,MA1BfhC,SAASiC,iBAAeC,OACtBlC,SAASmC,mBAAiBC,OA2B7BpC,OAAAA,EAASqC;AAAiBL,cAAAD,IAAAO,KAAAb,IAAAA,UAAAvB,MAAA6B,IAAAO,IAAAN,GAAA;AAAAE,eAAAH,IAAAQ,KAAAd,IAAAA,UAAArB,OAAA2B,IAAAQ,IAAAL,IAAA;AAAAE,eAAAL,IAAAS,KAAAf,IAAAA,UAAAnB,OAAAyB,IAAAS,IAAAJ,IAAA;AAAA,aAAAL;AAAAA,IAAA,GAAA;AAAA,MAAAO,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAvC;AAAAA,EAAA,GAAA;AAIzC;AAACwC,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

package/dist/cjs/tabs/plugins-tab.d.cts

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