@tanstack/devtools 0.0.0 → 0.1.0

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

@@ -6,10 +6,12 @@ const stylesFactory = () => {
   const { fontFamily, size: fontSize } = font;
   const css = goober.css;
   return {
-    devtoolsPanelContainer: css`
+    devtoolsPanelContainer: (panelLocation) => css`
       direction: ltr;
       position: fixed;
-      bottom: 0;
+      overflow-y: hidden;
+      overflow-x: hidden;
+      ${panelLocation}: 0;
       right: 0;
       z-index: 99999;
       width: 100%;
@@ -69,13 +71,14 @@ const stylesFactory = () => {
       color: ${colors.gray[300]};
       width: w-screen;
       flex-direction: row;
-      overflow: auto;
+      overflow-x: hidden;
+      overflow-y: hidden;
       height: 100%;
     `,
-    dragHandle: css`
+    dragHandle: (panelLocation) => css`
       position: absolute;
       left: 0;
-      top: 0;
+      ${panelLocation === "bottom" ? "top" : "bottom"}: 0;
       width: 100%;
       height: 4px;
       cursor: row-resize;
@@ -98,6 +101,16 @@ const stylesFactory = () => {
       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};
@@ -115,13 +128,21 @@ const stylesFactory = () => {
       `;
       return base;
     },
-    mainCloseBtnAnimation: (isOpen) => {
+    mainCloseBtnAnimation: (isOpen, hideUntilHover) => {
       if (!isOpen) {
-        return css`
-          opacity: 1;
-          pointer-events: auto;
-          visibility: visible;
-        `;
+        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;
@@ -226,6 +247,225 @@ const stylesFactory = () => {
       width: 100%;
       height: 100%;
       overflow-y: auto;
+    `,
+    selectWrapper: css`
+      width: 100%;
+      max-width: 300px;
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    `,
+    selectContainer: css`
+      width: 100%;
+    `,
+    selectLabel: css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${colors.gray[100]};
+    `,
+    selectDescription: css`
+      font-size: 0.8rem;
+      color: ${colors.gray[400]};
+      margin: 0;
+      line-height: 1.3;
+    `,
+    select: css`
+      appearance: none;
+      width: 100%;
+      padding: 0.75rem 3rem 0.75rem 0.75rem;
+      border-radius: 0.5rem;
+      background-color: ${colors.darkGray[800]};
+      color: ${colors.gray[100]};
+      border: 1px solid ${colors.gray[700]};
+      font-size: 0.875rem;
+      transition: all 0.2s ease;
+      cursor: pointer;
+
+      /* Custom arrow */
+      background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+      background-repeat: no-repeat;
+      background-position: right 0.75rem center;
+      background-size: 1.25rem;
+
+      &:hover {
+        border-color: ${colors.gray[600]};
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${colors.purple[400]};
+        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+      }
+    `,
+    inputWrapper: css`
+      width: 100%;
+      max-width: 300px;
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    `,
+    inputContainer: css`
+      width: 100%;
+    `,
+    inputLabel: css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${colors.gray[100]};
+    `,
+    inputDescription: css`
+      font-size: 0.8rem;
+      color: ${colors.gray[400]};
+      margin: 0;
+      line-height: 1.3;
+    `,
+    input: css`
+      appearance: none;
+      width: 100%;
+      padding: 0.75rem;
+      border-radius: 0.5rem;
+      background-color: ${colors.darkGray[800]};
+      color: ${colors.gray[100]};
+      border: 1px solid ${colors.gray[700]};
+      font-size: 0.875rem;
+      font-family: ${fontFamily.mono};
+      transition: all 0.2s ease;
+
+      &::placeholder {
+        color: ${colors.gray[500]};
+      }
+
+      &:hover {
+        border-color: ${colors.gray[600]};
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${colors.purple[400]};
+        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+      }
+    `,
+    checkboxWrapper: css`
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      cursor: pointer;
+      user-select: none;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: ${colors.darkGray[800]};
+      }
+    `,
+    checkboxContainer: css`
+      width: 100%;
+    `,
+    checkboxLabelContainer: css`
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      flex: 1;
+    `,
+    checkbox: css`
+      appearance: none;
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 2px solid ${colors.gray[700]};
+      border-radius: 0.375rem;
+      background-color: ${colors.darkGray[800]};
+      display: grid;
+      place-items: center;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+      margin-top: 0.125rem;
+
+      &:hover {
+        border-color: ${colors.purple[400]};
+      }
+
+      &:checked {
+        background-color: ${colors.purple[500]};
+        border-color: ${colors.purple[500]};
+      }
+
+      &:checked::after {
+        content: '';
+        width: 0.4rem;
+        height: 0.6rem;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+        margin-top: -3px;
+      }
+    `,
+    checkboxLabel: css`
+      color: ${colors.gray[100]};
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1.4;
+    `,
+    checkboxDescription: css`
+      color: ${colors.gray[400]};
+      font-size: 0.8rem;
+      line-height: 1.3;
+    `,
+    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;
+    `,
+    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;
+    `,
+    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;
+      }
     `
   };
 };

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

@@ -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 { DevtoolsSettings } 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: css`\n      direction: ltr;\n      position: fixed;\n      bottom: 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    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\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: auto;\n      height: 100%;\n    `,\n    dragHandle: css`\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 4px;\n      cursor: row-resize;\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      &:focus-visible {\n        outline-offset: 2px;\n        border-radius: ${border.radius.full};\n        outline: 2px solid ${colors.blue[800]};\n      }\n    `,\n    mainCloseBtnPosition: (position: DevtoolsSettings['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) => {\n      if (!isOpen) {\n        return 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}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":[],"mappings":";;;AAMA,MAAM,gBAAgB,MAAM;AAC1B,QAAM,EAAE,QAAQ,MAAM,MAAM,OAAO,WAAW;AAC9C,QAAM,EAAE,YAAY,MAAM,SAAa,IAAA;AACvC,QAAM,MAAM,OAAO;AAEZ,SAAA;AAAA,IACL,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BASE,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,IAG1C,kCAAkC,CAAC,WAAoB;AAC9C,aAAA;AAAA,sBACS,SAAS,YAAY,QAAQ;AAAA,kBACjC,SAAS,SAAS,GAAG;AAAA;AAAA,IAEnC;AAAA,IACA,gCAAgC,CAAC,eAAkC;AACjE,UAAI,cAAc;AACT,eAAA;AAAA;AAAA;AAAA,MAAA;AAKF,aAAA;AAAA;AAAA;AAAA,IAGT;AAAA,IACA,iCAAiC,CAAC,QAAiB,WAAmB;AACpE,UAAI,QAAQ;AACH,eAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AAKF,aAAA;AAAA;AAAA,gCAEmB,MAAM;AAAA;AAAA,IAElC;AAAA,IACA,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMK,KAAK,EAAE,CAAC;AAAA,gBACP,KAAK,EAAE,CAAC;AAAA,qBACH,WAAW,IAAI;AAAA,aACvB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOzB,eAAe;AAAA;AAAA,mBAEA,SAAS,EAAE;AAAA,qBACT,WAAW,IAAI;AAAA,0BACV,OAAO,SAAS,GAAG,CAAC;AAAA,eAC/B,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM3B,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BASY,OAAO,OAAO,GAAG,CAAC,GAAG,MAAM,EAAE,CAAC;AAAA;AAAA;AAAA,IAItD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAWC,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKN,OAAO,OAAO,IAAI;AAAA,6BACd,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,IAGzC,sBAAsB,CAAC,aAA2C;AAChE,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;AAED,aAAA;AAAA,IACT;AAAA,IACA,uBAAuB,CAAC,WAAoB;AAC1C,UAAI,CAAC,QAAQ;AACJ,eAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AAMF,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT;AAAA,IACA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMQ,OAAO,SAAS,GAAG,CAAC;AAAA,gCACd,OAAO,KAAK,GAAG,CAAC;AAAA,4BACpB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,eAE7B,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,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMH,OAAO,KAAK,GAAG,CAAC;AAAA,iBAC3B,OAAO,KAAK,GAAG,CAAC;AAAA,iCACA,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA,4BAGvB,OAAO,OAAO,GAAG,CAAC;AAAA,iBAC7B,OAAO,KAAK,GAAG,CAAC;AAAA,iCACA,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKrB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,mBAG3B,OAAO,IAAI,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAWjB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,IAG7B,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,IAKZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOjB,mBAAmB;AAAA,eACR,KAAK,EAAE,CAAC;AAAA,0BACG,OAAO,SAAS,GAAG,CAAC;AAAA,gCACd,OAAO,KAAK,GAAG,CAAC;AAAA,4BACpB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,IAGxC,YAAY;AAAA,mBACG,SAAS,EAAE;AAAA,qBACT,WAAW,IAAI;AAAA,eACrB,OAAO,KAAK,GAAG,CAAC;AAAA,iBACd,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKI,OAAO,KAAK,GAAG,CAAC;AAAA,iBAC3B,OAAO,KAAK,GAAG,CAAC;AAAA,mBACd,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGE,OAAO,OAAO,GAAG,CAAC;AAAA,iBAC7B,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,IAG7B,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AACF;AAEO,SAAS,YAAY;AAC1B,QAAM,CAAC,OAAO,IAAI,aAAa,eAAe;AACvC,SAAA;AACT;"}
+{"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 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    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\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      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    selectWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    selectContainer: css`\n      width: 100%;\n    `,\n    selectLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n    `,\n    select: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem 3rem 0.75rem 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      transition: all 0.2s ease;\n      cursor: pointer;\n\n      /* Custom arrow */\n      background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n      background-repeat: no-repeat;\n      background-position: right 0.75rem center;\n      background-size: 1.25rem;\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    inputContainer: css`\n      width: 100%;\n    `,\n    inputLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n    `,\n    input: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.2s ease;\n\n      &::placeholder {\n        color: ${colors.gray[500]};\n      }\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    checkboxWrapper: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      user-select: none;\n      padding: 0.5rem;\n      border-radius: 0.5rem;\n      transition: background-color 0.2s ease;\n\n      &:hover {\n        background-color: ${colors.darkGray[800]};\n      }\n    `,\n    checkboxContainer: css`\n      width: 100%;\n    `,\n    checkboxLabelContainer: css`\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      flex: 1;\n    `,\n    checkbox: css`\n      appearance: none;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid ${colors.gray[700]};\n      border-radius: 0.375rem;\n      background-color: ${colors.darkGray[800]};\n      display: grid;\n      place-items: center;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${colors.purple[400]};\n      }\n\n      &:checked {\n        background-color: ${colors.purple[500]};\n        border-color: ${colors.purple[500]};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid white;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${colors.gray[100]};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1.4;\n    `,\n    checkboxDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.8rem;\n      line-height: 1.3;\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    `,\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    `,\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  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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,gBAAOC,YAAa,EAAA;AAAA,EAC/BC,MAAIC,OAAA;AAiBN,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOI,aAAc,EAAA;AAAA,EAChCF,MAAIG,QAAA;AA4BN,CAAC;"}
+{"version":3,"file":"index.js","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,gBAAOC,YAAU,EAAA;AAAA,EAC5BC,MAAIC,OAAAA;AAiBN,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOI,aAAW,EAAA;AAAA,EAC7BF,MAAIG,QAAAA;AA4BN,CAAC;"}

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

@@ -1,8 +1,9 @@
-import { template, insert, createComponent, effect, className, use, delegateEvents } from "solid-js/web";
+import { template, insert, createComponent, setAttribute, effect, className, use, delegateEvents } from "solid-js/web";
 import { createEffect, For } from "solid-js";
 import clsx from "clsx";
 import { usePlugins } 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>`), _tmpl$2 = /* @__PURE__ */ template(`<div><h3>`);
 const PluginsTab = () => {
   const {
@@ -12,11 +13,7 @@ const PluginsTab = () => {
   } = usePlugins();
   let activePluginRef;
   createEffect(() => {
-    var _a;
-    const currentActivePlugin = (_a = plugins()) == null ? void 0 : _a.find((plugin) => {
-      var _a2;
-      return plugin.id === ((_a2 = activePlugin()) == null ? void 0 : _a2.id);
-    });
+    const currentActivePlugin = plugins()?.find((plugin) => plugin.id === activePlugin());
     if (activePluginRef && currentActivePlugin) {
       currentActivePlugin.render(activePluginRef);
     }
@@ -37,21 +34,20 @@ const PluginsTab = () => {
         });
         return (() => {
           var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
-          _el$4.$$click = () => setActivePlugin(plugin);
+          _el$4.$$click = () => setActivePlugin(plugin.id);
           var _ref$2 = pluginHeading;
           typeof _ref$2 === "function" ? use(_ref$2, _el$5) : pluginHeading = _el$5;
-          effect(() => {
-            var _a;
-            return className(_el$4, clsx(styles().pluginName, {
-              active: ((_a = activePlugin()) == null ? void 0 : _a.id) === plugin.id
-            }));
-          });
+          setAttribute(_el$5, "id", PLUGIN_TITLE_CONTAINER_ID);
+          effect(() => className(_el$4, clsx(styles().pluginName, {
+            active: activePlugin() === plugin.id
+          })));
           return _el$4;
         })();
       }
     }));
     var _ref$ = activePluginRef;
     typeof _ref$ === "function" ? use(_ref$, _el$3) : activePluginRef = _el$3;
+    setAttribute(_el$3, "id", PLUGIN_CONTAINER_ID);
     effect((_p$) => {
       var _v$ = styles().pluginsTabPanel, _v$2 = styles().pluginsTabSidebar, _v$3 = styles().pluginsTabContent;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);

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

@@ -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 { usePlugins } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\n\nexport const PluginsTab = () => {\n  const { plugins, activePlugin, setActivePlugin } = usePlugins()\n  let activePluginRef: HTMLDivElement | undefined\n  createEffect(() => {\n    const currentActivePlugin = plugins()?.find(\n      (plugin) => plugin.id === activePlugin()?.id,\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)}\n                class={clsx(styles().pluginName, {\n                  active: activePlugin()?.id === plugin.id,\n                })}\n              >\n                <h3 ref={pluginHeading} />\n              </div>\n            )\n          }}\n        </For>\n      </div>\n      <div ref={activePluginRef} class={styles().pluginsTabContent}></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","_$createComponent","For","each","children","pluginHeading","name","textContent","_el$4","_tmpl$2","_el$5","$$click","_ref$2","_$use","_$effect","_$className","clsx","pluginName","active","_ref$","_p$","_v$","pluginsTabPanel","_v$2","pluginsTabSidebar","_v$3","pluginsTabContent","e","t","a","undefined","_$delegateEvents"],"mappings":";;;;;;AAKO,MAAMA,aAAaA,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAcC;AAAAA,MAAoBC,WAAW;AAC1DC,MAAAA;AACJC,eAAa,MAAM;;AACXC,UAAAA,uBAAsBN,aAAWO,MAAXP,mBAAWO,KACpCC,YAAWA;;AAAAA,oBAAOC,SAAOR,MAAAA,aAAa,MAAbA,gBAAAA,IAAgBQ;AAAAA;AAE5C,QAAIL,mBAAmBE,qBAAqB;AAC1CA,0BAAoBI,OAAON,eAAe;AAAA,IAAA;AAAA,EAC5C,CACD;AACD,QAAMO,SAASC,UAAU;AACzB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAH,WAAAA,OAAAI,gBAGOC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErB,QAAQ;AAAA,MAAC;AAAA,MAAAsB,UAChBd,CAAW,WAAA;AACPe,YAAAA;AACJlB,qBAAa,MAAM;AACjB,cAAIkB,eAAe;AACVf,mBAAAA,OAAOgB,SAAS,WAClBD,cAAcE,cAAcjB,OAAOgB,OACpChB,OAAOgB,KAAKD,aAAa;AAAA,UAAA;AAAA,QAC/B,CACD;AACD,gBAAA,MAAA;AAAA,cAAAG,QAAAC,QAAAA,GAAAC,QAAAF,MAAAV;AAAAa,gBAAAA,UAEa,MAAM3B,gBAAgBM,MAAM;AAAC,cAAAsB,SAK7BP;AAAa,iBAAAO,WAAAC,aAAAA,IAAAD,QAAAF,KAAA,IAAbL,gBAAaK;AAAAI,iBAAAC,MAAAA;;AAAAA,6BAAAP,OAJfQ,KAAKvB,SAASwB,YAAY;AAAA,cAC/BC,UAAQnC,kBAAAA,MAAAA,mBAAgBQ,QAAOD,OAAOC;AAAAA,YACvC,CAAA,CAAC;AAAA,WAAA;AAAAiB,iBAAAA;AAAAA,QAAAA,GAAA;AAAA,MAAA;AAAA,IAKR,CAAC,CAAA;AAAA,QAAAW,QAGKjC;AAAe,WAAAiC,UAAAN,aAAAA,IAAAM,OAAApB,KAAA,IAAfb,kBAAea;AAAAe,WAAAM,CAAA,QAAA;AAAAC,UAAAA,MAzBf5B,SAAS6B,iBAAeC,OACtB9B,OAAS+B,EAAAA,mBAAiBC,OAwBJhC,OAAAA,EAASiC;AAAiBL,cAAAD,IAAAO,KAAAZ,UAAApB,MAAAyB,IAAAO,IAAAN,GAAA;AAAAE,eAAAH,IAAAQ,KAAAb,UAAAlB,OAAAuB,IAAAQ,IAAAL,IAAA;AAAAE,eAAAL,IAAAS,KAAAd,UAAAhB,OAAAqB,IAAAS,IAAAJ,IAAA;AAAAL,aAAAA;AAAAA,IAAAA,GAAA;AAAA,MAAAO,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAnC,WAAAA;AAAAA,EAAAA,GAAA;AAGlE;AAACoC,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"plugins-tab.js","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,WAAAA;AACnD,MAAIC;AAEJC,eAAa,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;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAC,WAAAJ,OAAAK,gBAGOC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEtB,QAAAA;AAAAA,MAAS;AAAA,MAAAuB,UAChBf,CAAAA,WAAW;AACX,YAAIgB;AACJnB,qBAAa,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,IAAAD,QAAAF,KAAA,IAAbL,gBAAaK;AAAAI,uBAAAJ,OAAA,MAA7CK,yBAAyB;AAAAC,iBAAA,MAAAC,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,IAAAQ,OAAAvB,KAAA,IAAfb,kBAAea;AAAAgB,iBAAAhB,OAAA,MADhBwB,mBAAmB;AAAAN,WAAAO,CAAAA,QAAA;AAAA,UAAAC,MA1BfhC,SAASiC,iBAAeC,OACtBlC,SAASmC,mBAAiBC,OA2B7BpC,OAAAA,EAASqC;AAAiBL,cAAAD,IAAAO,KAAAb,UAAAvB,MAAA6B,IAAAO,IAAAN,GAAA;AAAAE,eAAAH,IAAAQ,KAAAd,UAAArB,OAAA2B,IAAAQ,IAAAL,IAAA;AAAAE,eAAAL,IAAAS,KAAAf,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,eAAA,CAAA,OAAA,CAAA;"}

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

@@ -1,7 +1,177 @@
-import { template } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ template(`<div>Settings`);
+import { template, insert, createComponent, effect, className, setAttribute } from "solid-js/web";
+import { Show } from "solid-js";
+import { Input } from "../components/input.js";
+import { Select } from "../components/select.js";
+import { useDevtoolsSettings } from "../context/use-devtools-context.js";
+import { uppercaseFirstLetter } from "../utils/sanitize.js";
+import { Checkbox } from "../components/checkbox.js";
+import { useStyles } from "../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx=12 cy=12 r=3></circle></svg>General</h3><p>Configure general behavior of the devtools panel.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9 17H7A5 5 0 0 1 7 7h2"></path><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1=8 x2=16 y1=12 y2=12></line></svg>URL Configuration</h3><p>Control when devtools are available based on URL parameters.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 8h.01"></path><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width=20 height=16 x=2 y=4 rx=2></rect></svg>Keyboard</h3><p>Customize keyboard shortcuts for quick access.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx=12 cy=10 r=3></circle></svg>Position</h3><p>Adjust the position of the trigger button and devtools panel.</p><div><div>`);
 const SettingsTab = () => {
-  return _tmpl$();
+  const {
+    setSettings,
+    settings
+  } = useDevtoolsSettings();
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$2.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$8.nextSibling, _el$11 = _el$10.nextSibling, _el$13 = _el$7.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.nextSibling, _el$18 = _el$13.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$19.nextSibling, _el$22 = _el$21.nextSibling, _el$23 = _el$22.firstChild;
+    insert(_el$6, createComponent(Checkbox, {
+      label: "Default open",
+      description: "Automatically open the devtools panel when the page loads",
+      onChange: () => setSettings({
+        defaultOpen: !settings().defaultOpen
+      }),
+      get checked() {
+        return settings().defaultOpen;
+      }
+    }), null);
+    insert(_el$6, createComponent(Checkbox, {
+      label: "Hide trigger until hovered",
+      description: "Keep the devtools trigger button hidden until you hover over its area",
+      onChange: () => setSettings({
+        hideUntilHover: !settings().hideUntilHover
+      }),
+      get checked() {
+        return settings().hideUntilHover;
+      }
+    }), null);
+    insert(_el$11, createComponent(Checkbox, {
+      label: "Require URL Flag",
+      description: "Only show devtools when a specific URL parameter is present",
+      get checked() {
+        return settings().requireUrlFlag;
+      },
+      onChange: (checked) => setSettings({
+        requireUrlFlag: checked
+      })
+    }), null);
+    insert(_el$11, createComponent(Show, {
+      get when() {
+        return settings().requireUrlFlag;
+      },
+      get children() {
+        var _el$12 = _tmpl$();
+        insert(_el$12, createComponent(Input, {
+          label: "URL flag",
+          description: "Enter the URL parameter name (e.g., 'debug' for ?debug=true)",
+          placeholder: "debug",
+          get value() {
+            return settings().urlFlag;
+          },
+          onChange: (e) => setSettings({
+            urlFlag: e
+          })
+        }));
+        effect(() => className(_el$12, styles().conditionalSetting));
+        return _el$12;
+      }
+    }), null);
+    insert(_el$17, createComponent(Input, {
+      label: "Hotkey to open/close devtools",
+      description: "Use '+' to combine keys (e.g., 'Ctrl+Shift+D' or 'Alt+D')",
+      placeholder: "Ctrl+Shift+D",
+      get value() {
+        return settings().openHotkey.join("+");
+      },
+      onChange: (e) => setSettings({
+        openHotkey: e.split("+").map((key) => uppercaseFirstLetter(key)).filter(Boolean)
+      })
+    }));
+    insert(_el$23, createComponent(Select, {
+      label: "Trigger Position",
+      options: [{
+        label: "Bottom Right",
+        value: "bottom-right"
+      }, {
+        label: "Bottom Left",
+        value: "bottom-left"
+      }, {
+        label: "Top Right",
+        value: "top-right"
+      }, {
+        label: "Top Left",
+        value: "top-left"
+      }, {
+        label: "Middle Right",
+        value: "middle-right"
+      }, {
+        label: "Middle Left",
+        value: "middle-left"
+      }],
+      get value() {
+        return settings().position;
+      },
+      onChange: (value) => setSettings({
+        position: value
+      })
+    }), null);
+    insert(_el$23, createComponent(Select, {
+      label: "Panel Position",
+      get value() {
+        return settings().panelLocation;
+      },
+      options: [{
+        label: "Top",
+        value: "top"
+      }, {
+        label: "Bottom",
+        value: "bottom"
+      }],
+      onChange: (value) => setSettings({
+        panelLocation: value
+      })
+    }), null);
+    effect((_p$) => {
+      var _v$ = styles().settingsContainer, _v$2 = styles().settingsSection, _v$3 = styles().sectionTitle, _v$4 = styles().sectionIcon, _v$5 = styles().sectionDescription, _v$6 = styles().settingsGroup, _v$7 = styles().settingsSection, _v$8 = styles().sectionTitle, _v$9 = styles().sectionIcon, _v$10 = styles().sectionDescription, _v$11 = styles().settingsGroup, _v$12 = styles().settingsSection, _v$13 = styles().sectionTitle, _v$14 = styles().sectionIcon, _v$15 = styles().sectionDescription, _v$16 = styles().settingsGroup, _v$17 = styles().settingsSection, _v$18 = styles().sectionTitle, _v$19 = styles().sectionIcon, _v$20 = styles().sectionDescription, _v$21 = styles().settingsGroup, _v$22 = styles().settingRow;
+      _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 && setAttribute(_el$4, "class", _p$.o = _v$4);
+      _v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+      _v$6 !== _p$.n && className(_el$6, _p$.n = _v$6);
+      _v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
+      _v$8 !== _p$.h && className(_el$8, _p$.h = _v$8);
+      _v$9 !== _p$.r && setAttribute(_el$9, "class", _p$.r = _v$9);
+      _v$10 !== _p$.d && className(_el$10, _p$.d = _v$10);
+      _v$11 !== _p$.l && className(_el$11, _p$.l = _v$11);
+      _v$12 !== _p$.u && className(_el$13, _p$.u = _v$12);
+      _v$13 !== _p$.c && className(_el$14, _p$.c = _v$13);
+      _v$14 !== _p$.w && setAttribute(_el$15, "class", _p$.w = _v$14);
+      _v$15 !== _p$.m && className(_el$16, _p$.m = _v$15);
+      _v$16 !== _p$.f && className(_el$17, _p$.f = _v$16);
+      _v$17 !== _p$.y && className(_el$18, _p$.y = _v$17);
+      _v$18 !== _p$.g && className(_el$19, _p$.g = _v$18);
+      _v$19 !== _p$.p && setAttribute(_el$20, "class", _p$.p = _v$19);
+      _v$20 !== _p$.b && className(_el$21, _p$.b = _v$20);
+      _v$21 !== _p$.T && className(_el$22, _p$.T = _v$21);
+      _v$22 !== _p$.A && className(_el$23, _p$.A = _v$22);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0,
+      u: void 0,
+      c: void 0,
+      w: void 0,
+      m: void 0,
+      f: void 0,
+      y: void 0,
+      g: void 0,
+      p: void 0,
+      b: void 0,
+      T: void 0,
+      A: void 0
+    });
+    return _el$;
+  })();
 };
 export {
   SettingsTab