@tanstack/devtools 0.5.1 → 0.6.1

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

@@ -1,11 +1,129 @@
 import * as goober from "goober";
 import { createSignal } from "solid-js";
 import { tokens } from "./tokens.js";
+const mSecondsToCssSeconds = (mSeconds) => `${(mSeconds / 1e3).toFixed(2)}s`;
 const stylesFactory = () => {
   const { colors, font, size, alpha, border } = tokens;
   const { fontFamily, size: fontSize } = font;
   const css = goober.css;
   return {
+    seoTabContainer: css`
+      padding: 0;
+      margin: 0 auto;
+      background: ${colors.darkGray[700]};
+      border-radius: 12px;
+      box-shadow: 0 2px 16px 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: ${colors.purple[400]};
+      margin: 0;
+      padding: 1rem 1.5rem 0.5rem 1.5rem;
+      text-align: left;
+      border-bottom: 1px solid ${colors.gray[700]};
+    `,
+    seoTabSection: css`
+      padding: 1.5rem;
+      background: ${colors.darkGray[800]};
+      border: 1px solid ${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 ${colors.gray[700]};
+      border-radius: 8px;
+      padding: 12px 10px;
+      background: ${colors.darkGray[900]};
+      margin-bottom: 0;
+      box-shadow: 0 1px 4px 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: ${colors.purple[400]};
+    `,
+    seoPreviewImage: css`
+      max-width: 100%;
+      border-radius: 6px;
+      margin-bottom: 6px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+      height: 160px;
+    `,
+    seoPreviewTitle: css`
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 2px;
+      color: ${colors.gray[100]};
+    `,
+    seoPreviewDesc: css`
+      color: ${colors.gray[300]};
+      margin-bottom: 2px;
+      font-size: 0.95rem;
+    `,
+    seoPreviewUrl: css`
+      color: ${colors.gray[500]};
+      font-size: 0.9rem;
+      margin-bottom: 2px;
+      word-break: break-all;
+    `,
+    seoMissingTagsSection: css`
+      margin-top: 4px;
+      font-size: 0.95rem;
+      color: ${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: ${colors.red[500]}22;
+      color: ${colors.red[500]};
+      border-radius: 4px;
+      padding: 1px 6px;
+      font-size: 0.9rem;
+      font-weight: 500;
+    `,
+    seoAllTagsFound: css`
+      color: ${colors.green[500]};
+      font-weight: 500;
+      margin-left: 6px;
+      font-size: 0.95rem;
+    `,
     devtoolsPanelContainer: (panelLocation, isDetached) => css`
       direction: ltr;
       position: fixed;
@@ -211,13 +329,34 @@ const stylesFactory = () => {
       height: 100%;
       overflow: hidden;
     `,
-    pluginsTabSidebar: css`
-      width: ${size[48]};
+    pluginsTabDraw: css`
+      width: 0px;
+      height: 100%;
       background-color: ${colors.darkGray[800]};
-      border-right: 1px solid ${colors.gray[700]};
       box-shadow: 0 1px 0 ${colors.gray[700]};
+    `,
+    pluginsTabDrawExpanded: css`
+      width: ${size[48]};
+      border-right: 1px solid ${colors.gray[700]};
+    `,
+    pluginsTabDrawTransition: (mSeconds) => {
+      return css`
+        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;
+      `;
+    },
+    pluginsTabSidebar: css`
+      width: ${size[48]};
       overflow-y: auto;
+      transform: translateX(-100%);
+    `,
+    pluginsTabSidebarExpanded: css`
+      transform: translateX(0);
     `,
+    pluginsTabSidebarTransition: (mSeconds) => {
+      return css`
+        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;
+      `;
+    },
     pluginName: css`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};
@@ -241,42 +380,6 @@ const stylesFactory = () => {
       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;

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

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

@@ -3,6 +3,11 @@ export declare const tabs: readonly [{
     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";

package/dist/esm/tabs/index.js

@@ -1,17 +1,23 @@
 import { template, createComponent } from "solid-js/web";
 import { SettingsTab } from "./settings-tab.js";
 import { PluginsTab } from "./plugins-tab.js";
-var _tmpl$ = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M8 6h10"></path><path d="M6 12h9"></path><path d="M11 18h7">`), _tmpl$2 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><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">`);
+import { SeoTab } from "./seo-tab.js";
+var _tmpl$ = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M8 6h10"></path><path d="M6 12h9"></path><path d="M11 18h7">`), _tmpl$2 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="lucide lucide-file-search2-icon lucide-file-search-2"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><circle cx=11.5 cy=14.5 r=2.5></circle><path d="M13.3 16.3 15 18">`), _tmpl$3 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path><path d="M12 2v2"></path><path d="M12 22v-2"></path><path d="m17 20.66-1-1.73"></path><path d="M11 10.27 7 3.34"></path><path d="m20.66 17-1.73-1"></path><path d="m3.34 7 1.73 1"></path><path d="M14 12h8"></path><path d="M2 12h2"></path><path d="m20.66 7-1.73 1"></path><path d="m3.34 17 1.73-1"></path><path d="m17 3.34-1 1.73"></path><path d="m11 13.73-4 6.93">`);
 const tabs = [{
   name: "Plugins",
   id: "plugins",
   component: () => createComponent(PluginsTab, {}),
   icon: _tmpl$()
+}, {
+  name: "SEO",
+  id: "seo",
+  component: () => createComponent(SeoTab, {}),
+  icon: _tmpl$2()
 }, {
   name: "Settings",
   id: "settings",
   component: () => createComponent(SettingsTab, {}),
-  icon: _tmpl$2()
+  icon: _tmpl$3()
 }];
 export {
   tabs

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,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;"}
+{"version":3,"file":"index.js","sources":["../../../src/tabs/index.tsx"],"sourcesContent":["import { SettingsTab } from './settings-tab'\nimport { PluginsTab } from './plugins-tab'\nimport { SeoTab } from './seo-tab'\n\nexport const tabs = [\n  {\n    name: 'Plugins',\n    id: 'plugins',\n    component: () => <PluginsTab />,\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M8 6h10\" />\n        <path d=\"M6 12h9\" />\n        <path d=\"M11 18h7\" />\n      </svg>\n    ),\n  },\n  {\n    name: 'SEO',\n    id: 'seo',\n    component: () => <SeoTab />,\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-file-search2-icon lucide-file-search-2\"\n      >\n        <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n        <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n        <circle cx=\"11.5\" cy=\"14.5\" r=\"2.5\" />\n        <path d=\"M13.3 16.3 15 18\" />\n      </svg>\n    ),\n  },\n  {\n    name: 'Settings',\n    id: 'settings',\n    component: () => <SettingsTab />,\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\" />\n        <path d=\"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\" />\n        <path d=\"M12 2v2\" />\n        <path d=\"M12 22v-2\" />\n        <path d=\"m17 20.66-1-1.73\" />\n        <path d=\"M11 10.27 7 3.34\" />\n        <path d=\"m20.66 17-1.73-1\" />\n        <path d=\"m3.34 7 1.73 1\" />\n        <path d=\"M14 12h8\" />\n        <path d=\"M2 12h2\" />\n        <path d=\"m20.66 7-1.73 1\" />\n        <path d=\"m3.34 17 1.73-1\" />\n        <path d=\"m17 3.34-1 1.73\" />\n        <path d=\"m11 13.73-4 6.93\" />\n      </svg>\n    ),\n  },\n] as const\n\nexport type TabName = (typeof tabs)[number]['id']\n"],"names":["tabs","name","id","component","_$createComponent","PluginsTab","icon","_tmpl$","SeoTab","_tmpl$2","SettingsTab","_tmpl$3"],"mappings":";;;;;AAIO,MAAMA,OAAO,CAClB;AAAA,EACEC,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOC,YAAU,EAAA;AAAA,EAC5BC,MAAIC,OAAAA;AAiBN,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOI,QAAM,EAAA;AAAA,EACxBF,MAAIG,QAAAA;AAmBN,GACA;AAAA,EACER,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOM,aAAW,EAAA;AAAA,EAC7BJ,MAAIK,QAAAA;AA4BN,CAAC;"}

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

@@ -1,16 +1,22 @@
 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 } 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>`);
+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;
   createEffect(() => {
     const currentActivePlugin = plugins()?.find((plugin) => plugin.id === activePlugin());
@@ -20,8 +26,14 @@ const PluginsTab = () => {
   });
   const styles = useStyles();
   return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-    insert(_el$2, createComponent(For, {
+    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();
       },
@@ -33,31 +45,37 @@ const PluginsTab = () => {
           }
         });
         return (() => {
-          var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
-          _el$4.$$click = () => setActivePlugin(plugin.id);
+          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$5) : pluginHeading = _el$5;
-          setAttribute(_el$5, "id", PLUGIN_TITLE_CONTAINER_ID);
-          effect(() => className(_el$4, clsx(styles().pluginName, {
+          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$4;
+          return _el$5;
         })();
       }
     }));
     var _ref$ = activePluginRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$3) : activePluginRef = _el$3;
-    setAttribute(_el$3, "id", PLUGIN_CONTAINER_ID);
+    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 = styles().pluginsTabSidebar, _v$3 = styles().pluginsTabContent;
+      var _v$ = styles().pluginsTabPanel, _v$2 = clsx(styles().pluginsTabDraw, {
+        [styles().pluginsTabDrawExpanded]: expanded()
+      }, styles().pluginsTabDrawTransition(animationMs)), _v$3 = clsx(styles().pluginsTabSidebar, {
+        [styles().pluginsTabSidebarExpanded]: 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
+      a: void 0,
+      o: void 0
     });
     return _el$;
   })();

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'\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;"}
+{"version":3,"file":"plugins-tab.js","sources":["../../../src/tabs/plugins-tab.tsx"],"sourcesContent":["import { For, createEffect } from 'solid-js'\nimport clsx from 'clsx'\nimport { useDrawContext } from '../context/draw-context'\nimport { usePlugins } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'\n\nexport const PluginsTab = () => {\n  const { plugins, activePlugin, setActivePlugin } = usePlugins()\n  const { expanded, hoverUtils, animationMs } = useDrawContext()\n  let activePluginRef: HTMLDivElement | undefined\n\n  createEffect(() => {\n    const currentActivePlugin = plugins()?.find(\n      (plugin) => plugin.id === activePlugin(),\n    )\n    if (activePluginRef && currentActivePlugin) {\n      currentActivePlugin.render(activePluginRef)\n    }\n  })\n  const styles = useStyles()\n\n  return (\n    <div class={styles().pluginsTabPanel}>\n      <div\n        class={clsx(\n          styles().pluginsTabDraw,\n          {\n            [styles().pluginsTabDrawExpanded]: expanded(),\n          },\n          styles().pluginsTabDrawTransition(animationMs),\n        )}\n        onMouseEnter={() => {\n          hoverUtils.enter()\n        }}\n        onMouseLeave={() => {\n          hoverUtils.leave()\n        }}\n      >\n        <div\n          class={clsx(\n            styles().pluginsTabSidebar,\n            {\n              [styles().pluginsTabSidebarExpanded]: expanded(),\n            },\n            styles().pluginsTabSidebarTransition(animationMs),\n          )}\n        >\n          <For each={plugins()}>\n            {(plugin) => {\n              let pluginHeading: HTMLHeadingElement | undefined\n              createEffect(() => {\n                if (pluginHeading) {\n                  typeof plugin.name === 'string'\n                    ? (pluginHeading.textContent = plugin.name)\n                    : plugin.name(pluginHeading)\n                }\n              })\n              return (\n                <div\n                  onClick={() => setActivePlugin(plugin.id!)}\n                  class={clsx(styles().pluginName, {\n                    active: activePlugin() === plugin.id,\n                  })}\n                >\n                  <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />\n                </div>\n              )\n            }}\n          </For>\n        </div>\n      </div>\n\n      <div\n        id={PLUGIN_CONTAINER_ID}\n        ref={activePluginRef}\n        class={styles().pluginsTabContent}\n      ></div>\n    </div>\n  )\n}\n"],"names":["PluginsTab","plugins","activePlugin","setActivePlugin","usePlugins","expanded","hoverUtils","animationMs","useDrawContext","activePluginRef","createEffect","currentActivePlugin","find","plugin","id","render","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","addEventListener","leave","enter","_$insert","_$createComponent","For","each","children","pluginHeading","name","textContent","_el$5","_tmpl$2","_el$6","$$click","_ref$2","_$use","_$setAttribute","PLUGIN_TITLE_CONTAINER_ID","_$effect","_$className","clsx","pluginName","active","_ref$","PLUGIN_CONTAINER_ID","_p$","_v$","pluginsTabPanel","_v$2","pluginsTabDraw","pluginsTabDrawExpanded","pluginsTabDrawTransition","_v$3","pluginsTabSidebar","pluginsTabSidebarExpanded","pluginsTabSidebarTransition","_v$4","pluginsTabContent","e","t","a","o","undefined","_$delegateEvents"],"mappings":";;;;;;;;AAOO,MAAMA,aAAaA,MAAM;AAC9B,QAAM;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAcC;AAAAA,EAAAA,IAAoBC,WAAAA;AACnD,QAAM;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,IAAYC;AAAAA,EAAAA,IAAgBC,eAAAA;AAC9C,MAAIC;AAEJC,eAAa,MAAM;AACjB,UAAMC,sBAAsBV,WAAWW,KACpCC,YAAWA,OAAOC,OAAOZ,cAC5B;AACA,QAAIO,mBAAmBE,qBAAqB;AAC1CA,0BAAoBI,OAAON,eAAe;AAAA,IAC5C;AAAA,EACF,CAAC;AACD,QAAMO,SAASC,UAAAA;AAEf,UAAA,MAAA;AAAA,QAAAC,OAAAC,UAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAH,MAAAI;AAAAJ,UAAAK,iBAAA,cAaoB,MAAM;AAClBnB,iBAAWoB,MAAAA;AAAAA,IACb,CAAC;AAAAN,UAAAK,iBAAA,cALa,MAAM;AAClBnB,iBAAWqB,MAAAA;AAAAA,IACb,CAAC;AAAAC,WAAAN,OAAAO,gBAcEC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE9B,QAAAA;AAAAA,MAAS;AAAA,MAAA+B,UAChBnB,CAAAA,WAAW;AACX,YAAIoB;AACJvB,qBAAa,MAAM;AACjB,cAAIuB,eAAe;AACjB,mBAAOpB,OAAOqB,SAAS,WAClBD,cAAcE,cAActB,OAAOqB,OACpCrB,OAAOqB,KAAKD,aAAa;AAAA,UAC/B;AAAA,QACF,CAAC;AACD,gBAAA,MAAA;AAAA,cAAAG,QAAAC,QAAAA,GAAAC,QAAAF,MAAAf;AAAAe,gBAAAG,UAEa,MAAMpC,gBAAgBU,OAAOC,EAAG;AAAC,cAAA0B,SAKFP;AAAa,iBAAAO,WAAA,aAAAC,IAAAD,QAAAF,KAAA,IAAbL,gBAAaK;AAAAI,uBAAAJ,OAAA,MAA7CK,yBAAyB;AAAAC,iBAAA,MAAAC,UAAAT,OAJ1BU,KAAK9B,OAAAA,EAAS+B,YAAY;AAAA,YAC/BC,QAAQ9C,aAAAA,MAAmBW,OAAOC;AAAAA,UAAAA,CACnC,CAAC,CAAA;AAAA,iBAAAsB;AAAAA,QAAA,GAAA;AAAA,MAKR;AAAA,IAAA,CAAC,CAAA;AAAA,QAAAa,QAOAxC;AAAe,WAAAwC,UAAA,aAAAR,IAAAQ,OAAA1B,KAAA,IAAfd,kBAAec;AAAAmB,iBAAAnB,OAAA,MADhB2B,mBAAmB;AAAAN,WAAAO,CAAAA,QAAA;AAAA,UAAAC,MAnDfpC,SAASqC,iBAAeC,OAEzBR,KACL9B,OAAAA,EAASuC,gBACT;AAAA,QACE,CAACvC,OAAAA,EAASwC,sBAAsB,GAAGnD,SAAAA;AAAAA,MAAS,GAE9CW,OAAAA,EAASyC,yBAAyBlD,WAAW,CAC/C,GAACmD,OASQZ,KACL9B,OAAAA,EAAS2C,mBACT;AAAA,QACE,CAAC3C,OAAAA,EAAS4C,yBAAyB,GAAGvD,SAAAA;AAAAA,MAAS,GAEjDW,SAAS6C,4BAA4BtD,WAAW,CAClD,GAACuD,OA8BI9C,OAAAA,EAAS+C;AAAiBX,cAAAD,IAAAa,KAAAnB,UAAA3B,MAAAiC,IAAAa,IAAAZ,GAAA;AAAAE,eAAAH,IAAAc,KAAApB,UAAAzB,OAAA+B,IAAAc,IAAAX,IAAA;AAAAI,eAAAP,IAAAe,KAAArB,UAAAvB,OAAA6B,IAAAe,IAAAR,IAAA;AAAAI,eAAAX,IAAAgB,KAAAtB,UAAAtB,OAAA4B,IAAAgB,IAAAL,IAAA;AAAA,aAAAX;AAAAA,IAAA,GAAA;AAAA,MAAAa,GAAAI;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAlD;AAAAA,EAAA,GAAA;AAIzC;AAACmD,eAAA,CAAA,OAAA,CAAA;"}

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

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