@tanstack/devtools 0.5.1 → 0.6.0

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: 1.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    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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"}

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":"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"}

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

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

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

@@ -0,0 +1,291 @@
+import { template, insert, createComponent, memo, effect, className, setAttribute } from "solid-js/web";
+import { createSignal, For } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+import { useHeadChanges } from "../hooks/use-head-changes.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<img alt=Preview>`), _tmpl$3 = /* @__PURE__ */ template(`<div>No Image`), _tmpl$4 = /* @__PURE__ */ template(`<div><section><h3><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="m10 9-3 3 3 3"></path><path d="m14 15 3-3-3-3"></path><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg>Social previews</h3><p>See how your current page will look when shared on popular social networks. The tool checks for essential meta tags and highlights any that are missing.</p><div>`), _tmpl$5 = /* @__PURE__ */ template(`<div>`), _tmpl$6 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`), _tmpl$7 = /* @__PURE__ */ template(`<li>`);
+const SOCIALS = [
+  {
+    network: "Facebook",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#4267B2"
+  },
+  {
+    network: "X/Twitter",
+    tags: [{
+      key: "twitter:title",
+      prop: "title"
+    }, {
+      key: "twitter:description",
+      prop: "description"
+    }, {
+      key: "twitter:image",
+      prop: "image"
+    }, {
+      key: "twitter:url",
+      prop: "url"
+    }],
+    color: "#1DA1F2"
+  },
+  {
+    network: "LinkedIn",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#0077B5"
+  },
+  {
+    network: "Discord",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#5865F2"
+  },
+  {
+    network: "Slack",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#4A154B"
+  },
+  {
+    network: "Mastodon",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#6364FF"
+  },
+  {
+    network: "Bluesky",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#1185FE"
+  }
+  // Add more networks as needed
+];
+function SocialPreview(props) {
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
+    insert(_el$2, () => props.network, _el$3);
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!props.meta.image);
+      return () => _c$() ? (() => {
+        var _el$7 = _tmpl$2();
+        effect((_p$) => {
+          var _v$8 = props.meta.image, _v$9 = styles().seoPreviewImage;
+          _v$8 !== _p$.e && setAttribute(_el$7, "src", _p$.e = _v$8);
+          _v$9 !== _p$.t && className(_el$7, _p$.t = _v$9);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$7;
+      })() : (() => {
+        var _el$8 = _tmpl$3();
+        _el$8.style.setProperty("background", "#222");
+        _el$8.style.setProperty("color", "#888");
+        _el$8.style.setProperty("display", "flex");
+        _el$8.style.setProperty("align-items", "center");
+        _el$8.style.setProperty("justify-content", "center");
+        _el$8.style.setProperty("min-height", "80px");
+        _el$8.style.setProperty("width", "100%");
+        effect(() => className(_el$8, styles().seoPreviewImage));
+        return _el$8;
+      })();
+    })(), _el$4);
+    insert(_el$4, () => props.meta.title || "No Title");
+    insert(_el$5, () => props.meta.description || "No Description");
+    insert(_el$6, () => props.meta.url || window.location.href);
+    effect((_p$) => {
+      var _v$ = styles().seoPreviewCard, _v$2 = props.color, _v$3 = styles().seoPreviewHeader, _v$4 = props.color, _v$5 = styles().seoPreviewTitle, _v$6 = styles().seoPreviewDesc, _v$7 = styles().seoPreviewUrl;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("border-color", _v$2) : _el$.style.removeProperty("border-color"));
+      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$2.style.setProperty("color", _v$4) : _el$2.style.removeProperty("color"));
+      _v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
+      _v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
+      _v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
+    });
+    return _el$;
+  })();
+}
+const SeoTab = () => {
+  const [reports, setReports] = createSignal(analyzeHead());
+  const styles = useStyles();
+  function analyzeHead() {
+    const metaTags = Array.from(document.head.querySelectorAll("meta"));
+    const reports2 = [];
+    for (const social of SOCIALS) {
+      const found = {};
+      const missing = [];
+      for (const tag of social.tags) {
+        const meta = metaTags.find((m) => (tag.key.includes("twitter:") ? false : m.getAttribute("property") === tag.key) || m.getAttribute("name") === tag.key);
+        if (meta && meta.getAttribute("content")) {
+          found[tag.prop] = meta.getAttribute("content") || void 0;
+        } else {
+          missing.push(tag.key);
+        }
+      }
+      reports2.push({
+        network: social.network,
+        found,
+        missing
+      });
+    }
+    return reports2;
+  }
+  useHeadChanges(() => {
+    setReports(analyzeHead());
+  });
+  return (() => {
+    var _el$9 = _tmpl$4(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$1.nextSibling, _el$12 = _el$11.nextSibling;
+    insert(_el$12, createComponent(For, {
+      get each() {
+        return reports();
+      },
+      children: (report, i) => {
+        const social = SOCIALS[i()];
+        return (() => {
+          var _el$13 = _tmpl$5();
+          insert(_el$13, createComponent(SocialPreview, {
+            get meta() {
+              return report.found;
+            },
+            get color() {
+              return social.color;
+            },
+            get network() {
+              return social.network;
+            }
+          }), null);
+          insert(_el$13, (() => {
+            var _c$2 = memo(() => report.missing.length > 0);
+            return () => _c$2() ? (() => {
+              var _el$14 = _tmpl$6(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$18 = _el$16.nextSibling;
+              _el$18.nextSibling;
+              var _el$19 = _el$15.nextSibling;
+              insert(_el$15, () => social?.network, _el$18);
+              insert(_el$19, createComponent(For, {
+                get each() {
+                  return report.missing;
+                },
+                children: (tag) => (() => {
+                  var _el$20 = _tmpl$7();
+                  insert(_el$20, tag);
+                  effect(() => className(_el$20, styles().seoMissingTag));
+                  return _el$20;
+                })()
+              }));
+              effect((_p$) => {
+                var _v$14 = styles().seoMissingTagsSection, _v$15 = styles().seoMissingTagsList;
+                _v$14 !== _p$.e && className(_el$14, _p$.e = _v$14);
+                _v$15 !== _p$.t && className(_el$19, _p$.t = _v$15);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              return _el$14;
+            })() : null;
+          })(), null);
+          return _el$13;
+        })();
+      }
+    }));
+    effect((_p$) => {
+      var _v$0 = styles().seoTabContainer, _v$1 = styles().seoTabSection, _v$10 = styles().sectionTitle, _v$11 = styles().sectionIcon, _v$12 = styles().sectionDescription, _v$13 = styles().seoPreviewSection;
+      _v$0 !== _p$.e && className(_el$9, _p$.e = _v$0);
+      _v$1 !== _p$.t && className(_el$0, _p$.t = _v$1);
+      _v$10 !== _p$.a && className(_el$1, _p$.a = _v$10);
+      _v$11 !== _p$.o && setAttribute(_el$10, "class", _p$.o = _v$11);
+      _v$12 !== _p$.i && className(_el$11, _p$.i = _v$12);
+      _v$13 !== _p$.n && className(_el$12, _p$.n = _v$13);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    });
+    return _el$9;
+  })();
+};
+export {
+  SeoTab
+};
+//# sourceMappingURL=seo-tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"seo-tab.js","sources":["../../../src/tabs/seo-tab.tsx"],"sourcesContent":["import { For, createSignal } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useHeadChanges } from '../hooks/use-head-changes'\n\ntype SocialMeta = {\n  title?: string\n  description?: string\n  image?: string\n  url?: string\n}\n\ntype SocialReport = {\n  network: string\n  found: Partial<SocialMeta>\n  missing: Array<string>\n}\n\nconst SOCIALS = [\n  {\n    network: 'Facebook',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4267B2',\n  },\n  {\n    network: 'X/Twitter',\n    tags: [\n      { key: 'twitter:title', prop: 'title' },\n      { key: 'twitter:description', prop: 'description' },\n      { key: 'twitter:image', prop: 'image' },\n      { key: 'twitter:url', prop: 'url' },\n    ],\n    color: '#1DA1F2',\n  },\n  {\n    network: 'LinkedIn',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#0077B5',\n  },\n  {\n    network: 'Discord',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#5865F2',\n  },\n  {\n    network: 'Slack',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4A154B',\n  },\n  {\n    network: 'Mastodon',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#6364FF',\n  },\n  {\n    network: 'Bluesky',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#1185FE',\n  },\n  // Add more networks as needed\n]\nfunction SocialPreview(props: {\n  meta: SocialMeta\n  color: string\n  network: string\n}) {\n  const styles = useStyles()\n\n  return (\n    <div\n      class={styles().seoPreviewCard}\n      style={{ 'border-color': props.color }}\n    >\n      <div class={styles().seoPreviewHeader} style={{ color: props.color }}>\n        {props.network} Preview\n      </div>\n      {props.meta.image ? (\n        <img\n          src={props.meta.image}\n          alt=\"Preview\"\n          class={styles().seoPreviewImage}\n        />\n      ) : (\n        <div\n          class={styles().seoPreviewImage}\n          style={{\n            background: '#222',\n            color: '#888',\n            display: 'flex',\n            'align-items': 'center',\n            'justify-content': 'center',\n            'min-height': '80px',\n            width: '100%',\n          }}\n        >\n          No Image\n        </div>\n      )}\n      <div class={styles().seoPreviewTitle}>\n        {props.meta.title || 'No Title'}\n      </div>\n      <div class={styles().seoPreviewDesc}>\n        {props.meta.description || 'No Description'}\n      </div>\n      <div class={styles().seoPreviewUrl}>\n        {props.meta.url || window.location.href}\n      </div>\n    </div>\n  )\n}\nexport const SeoTab = () => {\n  const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())\n  const styles = useStyles()\n\n  function analyzeHead(): Array<SocialReport> {\n    const metaTags = Array.from(document.head.querySelectorAll('meta'))\n    const reports: Array<SocialReport> = []\n\n    for (const social of SOCIALS) {\n      const found: Partial<SocialMeta> = {}\n      const missing: Array<string> = []\n      for (const tag of social.tags) {\n        const meta = metaTags.find(\n          (m) =>\n            (tag.key.includes('twitter:')\n              ? false\n              : m.getAttribute('property') === tag.key) ||\n            m.getAttribute('name') === tag.key,\n        )\n\n        if (meta && meta.getAttribute('content')) {\n          found[tag.prop as keyof SocialMeta] =\n            meta.getAttribute('content') || undefined\n        } else {\n          missing.push(tag.key)\n        }\n      }\n      reports.push({ network: social.network, found, missing })\n    }\n    return reports\n  }\n\n  useHeadChanges(() => {\n    setReports(analyzeHead())\n  })\n\n  return (\n    <div class={styles().seoTabContainer}>\n      <section class={styles().seoTabSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\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=\"m10 9-3 3 3 3\" />\n            <path d=\"m14 15 3-3-3-3\" />\n            <path d=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\" />\n          </svg>\n          Social previews\n        </h3>\n        <p class={styles().sectionDescription}>\n          See how your current page will look when shared on popular social\n          networks. The tool checks for essential meta tags and highlights any\n          that are missing.\n        </p>\n        <div class={styles().seoPreviewSection}>\n          <For each={reports()}>\n            {(report, i) => {\n              const social = SOCIALS[i()]\n              return (\n                <div>\n                  <SocialPreview\n                    meta={report.found}\n                    color={social!.color}\n                    network={social!.network}\n                  />\n                  {report.missing.length > 0 ? (\n                    <>\n                      <div class={styles().seoMissingTagsSection}>\n                        <strong>Missing tags for {social?.network}:</strong>\n\n                        <ul class={styles().seoMissingTagsList}>\n                          <For each={report.missing}>\n                            {(tag) => (\n                              <li class={styles().seoMissingTag}>{tag}</li>\n                            )}\n                          </For>\n                        </ul>\n                      </div>\n                    </>\n                  ) : null}\n                </div>\n              )\n            }}\n          </For>\n        </div>\n      </section>\n      {/* Future sections can be added here as <section class={styles().seoTabSection}>...</section> */}\n    </div>\n  )\n}\n"],"names":["SOCIALS","network","tags","key","prop","color","SocialPreview","props","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","_c$","_$memo","meta","image","_el$7","_tmpl$2","_$effect","_p$","_v$8","_v$9","seoPreviewImage","e","_$setAttribute","t","_$className","undefined","_el$8","_tmpl$3","style","setProperty","title","description","url","window","location","href","_v$","seoPreviewCard","_v$2","_v$3","seoPreviewHeader","_v$4","_v$5","seoPreviewTitle","_v$6","seoPreviewDesc","_v$7","seoPreviewUrl","removeProperty","a","o","i","n","s","SeoTab","reports","setReports","createSignal","analyzeHead","metaTags","Array","from","document","head","querySelectorAll","social","found","missing","tag","find","m","includes","getAttribute","push","useHeadChanges","_el$9","_tmpl$4","_el$0","_el$1","_el$10","_el$11","_el$12","_$createComponent","For","each","children","report","_el$13","_tmpl$5","_c$2","length","_el$14","_tmpl$6","_el$15","_el$16","_el$18","_el$19","_el$20","_tmpl$7","seoMissingTag","_v$14","seoMissingTagsSection","_v$15","seoMissingTagsList","_v$0","seoTabContainer","_v$1","seoTabSection","_v$10","sectionTitle","_v$11","sectionIcon","_v$12","sectionDescription","_v$13","seoPreviewSection"],"mappings":";;;;;AAiBA,MAAMA,UAAU;AAAA,EACd;AAAA,IACEC,SAAS;AAAA,IACTC,MAAM,CACJ;AAAA,MAAEC,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAkBC,MAAM;AAAA,IAAA,GAC/B;AAAA,MAAED,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAUC,MAAM;AAAA,IAAA,CAAO;AAAA,IAEhCC,OAAO;AAAA,EAAA;AAAA,EAET;AAAA,IACEJ,SAAS;AAAA,IACTC,MAAM,CACJ;AAAA,MAAEC,KAAK;AAAA,MAAiBC,MAAM;AAAA,IAAA,GAC9B;AAAA,MAAED,KAAK;AAAA,MAAuBC,MAAM;AAAA,IAAA,GACpC;AAAA,MAAED,KAAK;AAAA,MAAiBC,MAAM;AAAA,IAAA,GAC9B;AAAA,MAAED,KAAK;AAAA,MAAeC,MAAM;AAAA,IAAA,CAAO;AAAA,IAErCC,OAAO;AAAA,EAAA;AAAA,EAET;AAAA,IACEJ,SAAS;AAAA,IACTC,MAAM,CACJ;AAAA,MAAEC,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAkBC,MAAM;AAAA,IAAA,GAC/B;AAAA,MAAED,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAUC,MAAM;AAAA,IAAA,CAAO;AAAA,IAEhCC,OAAO;AAAA,EAAA;AAAA,EAET;AAAA,IACEJ,SAAS;AAAA,IACTC,MAAM,CACJ;AAAA,MAAEC,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAkBC,MAAM;AAAA,IAAA,GAC/B;AAAA,MAAED,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAUC,MAAM;AAAA,IAAA,CAAO;AAAA,IAEhCC,OAAO;AAAA,EAAA;AAAA,EAET;AAAA,IACEJ,SAAS;AAAA,IACTC,MAAM,CACJ;AAAA,MAAEC,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAkBC,MAAM;AAAA,IAAA,GAC/B;AAAA,MAAED,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAUC,MAAM;AAAA,IAAA,CAAO;AAAA,IAEhCC,OAAO;AAAA,EAAA;AAAA,EAET;AAAA,IACEJ,SAAS;AAAA,IACTC,MAAM,CACJ;AAAA,MAAEC,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAkBC,MAAM;AAAA,IAAA,GAC/B;AAAA,MAAED,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAUC,MAAM;AAAA,IAAA,CAAO;AAAA,IAEhCC,OAAO;AAAA,EAAA;AAAA,EAET;AAAA,IACEJ,SAAS;AAAA,IACTC,MAAM,CACJ;AAAA,MAAEC,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAkBC,MAAM;AAAA,IAAA,GAC/B;AAAA,MAAED,KAAK;AAAA,MAAYC,MAAM;AAAA,IAAA,GACzB;AAAA,MAAED,KAAK;AAAA,MAAUC,MAAM;AAAA,IAAA,CAAO;AAAA,IAEhCC,OAAO;AAAA,EAAA;AAAA;AAET;AAEF,SAASC,cAAcC,OAIpB;AACD,QAAMC,SAASC,UAAAA;AAEf,UAAA,MAAA;AAAA,QAAAC,OAAAC,UAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAH,MAAAI,aAAAC,QAAAF,MAAAC,aAAAE,QAAAD,MAAAD;AAAAG,WAAAP,OAAA,MAMOL,MAAMN,SAAOa,KAAA;AAAAK,WAAAT,OAAA,MAAA;AAAA,UAAAU,MAAAC,KAAA,MAAA,CAAA,CAEfd,MAAMe,KAAKC,KAAK;AAAA,aAAA,MAAhBH,IAAAA,KAAA,MAAA;AAAA,YAAAI,QAAAC,QAAAA;AAAAC,eAAAC,CAAAA,QAAA;AAAA,cAAAC,OAEQrB,MAAMe,KAAKC,OAAKM,OAEdrB,SAASsB;AAAeF,mBAAAD,IAAAI,KAAAC,aAAAR,OAAA,OAAAG,IAAAI,IAAAH,IAAA;AAAAC,mBAAAF,IAAAM,KAAAC,UAAAV,OAAAG,IAAAM,IAAAJ,IAAA;AAAA,iBAAAF;AAAAA,QAAA,GAAA;AAAA,UAAAI,GAAAI;AAAAA,UAAAF,GAAAE;AAAAA,QAAAA,CAAA;AAAA,eAAAX;AAAAA,MAAA,GAAA,KAAA,MAAA;AAAA,YAAAY,QAAAC,QAAAA;AAAAD,cAAAE,MAAAC,YAAA,cAAA,MAAA;AAAAH,cAAAE,MAAAC,YAAA,SAAA,MAAA;AAAAH,cAAAE,MAAAC,YAAA,WAAA,MAAA;AAAAH,cAAAE,MAAAC,YAAA,eAAA,QAAA;AAAAH,cAAAE,MAAAC,YAAA,mBAAA,QAAA;AAAAH,cAAAE,MAAAC,YAAA,cAAA,MAAA;AAAAH,cAAAE,MAAAC,YAAA,SAAA,MAAA;AAAAb,eAAA,MAAAQ,UAAAE,OAIxB5B,OAAAA,EAASsB,eAAe,CAAA;AAAA,eAAAM;AAAAA,MAAA,GAAA;AAAA,IAalC,GAAA,GAAArB,KAAA;AAAAI,WAAAJ,OAAA,MAEER,MAAMe,KAAKkB,SAAS,UAAU;AAAArB,WAAAF,OAAA,MAG9BV,MAAMe,KAAKmB,eAAe,gBAAgB;AAAAtB,WAAAD,OAAA,MAG1CX,MAAMe,KAAKoB,OAAOC,OAAOC,SAASC,IAAI;AAAAnB,WAAAC,CAAAA,QAAA;AAAA,UAAAmB,MAnClCtC,SAASuC,gBAAcC,OACLzC,MAAMF,OAAK4C,OAExBzC,OAAAA,EAAS0C,kBAAgBC,OAAkB5C,MAAMF,OAAK+C,OAyBtD5C,OAAAA,EAAS6C,iBAAeC,OAGxB9C,SAAS+C,gBAAcC,OAGvBhD,OAAAA,EAASiD;AAAaX,cAAAnB,IAAAI,KAAAG,UAAAxB,MAAAiB,IAAAI,IAAAe,GAAA;AAAAE,eAAArB,IAAAM,OAAAN,IAAAM,IAAAe,SAAA,OAAAtC,KAAA4B,MAAAC,YAAA,gBAAAS,IAAA,IAAAtC,KAAA4B,MAAAoB,eAAA,cAAA;AAAAT,eAAAtB,IAAAgC,KAAAzB,UAAAtB,OAAAe,IAAAgC,IAAAV,IAAA;AAAAE,eAAAxB,IAAAiC,OAAAjC,IAAAiC,IAAAT,SAAA,OAAAvC,MAAA0B,MAAAC,YAAA,SAAAY,IAAA,IAAAvC,MAAA0B,MAAAoB,eAAA,OAAA;AAAAN,eAAAzB,IAAAkC,KAAA3B,UAAAnB,OAAAY,IAAAkC,IAAAT,IAAA;AAAAE,eAAA3B,IAAAmC,KAAA5B,UAAAjB,OAAAU,IAAAmC,IAAAR,IAAA;AAAAE,eAAA7B,IAAAoC,KAAA7B,UAAAhB,OAAAS,IAAAoC,IAAAP,IAAA;AAAA,aAAA7B;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,MAAAwB,GAAAxB;AAAAA,MAAAyB,GAAAzB;AAAAA,MAAA0B,GAAA1B;AAAAA,MAAA2B,GAAA3B;AAAAA,MAAA4B,GAAA5B;AAAAA,IAAAA,CAAA;AAAA,WAAAzB;AAAAA,EAAA,GAAA;AAKxC;AACO,MAAMsD,SAASA,MAAM;AAC1B,QAAM,CAACC,SAASC,UAAU,IAAIC,aAAkCC,aAAa;AAC7E,QAAM5D,SAASC,UAAAA;AAEf,WAAS2D,cAAmC;AAC1C,UAAMC,WAAWC,MAAMC,KAAKC,SAASC,KAAKC,iBAAiB,MAAM,CAAC;AAClE,UAAMT,WAA+B,CAAA;AAErC,eAAWU,UAAU3E,SAAS;AAC5B,YAAM4E,QAA6B,CAAA;AACnC,YAAMC,UAAyB,CAAA;AAC/B,iBAAWC,OAAOH,OAAOzE,MAAM;AAC7B,cAAMoB,OAAO+C,SAASU,KACnBC,CAAAA,OACEF,IAAI3E,IAAI8E,SAAS,UAAU,IACxB,QACAD,EAAEE,aAAa,UAAU,MAAMJ,IAAI3E,QACvC6E,EAAEE,aAAa,MAAM,MAAMJ,IAAI3E,GACnC;AAEA,YAAImB,QAAQA,KAAK4D,aAAa,SAAS,GAAG;AACxCN,gBAAME,IAAI1E,IAAwB,IAChCkB,KAAK4D,aAAa,SAAS,KAAK/C;AAAAA,QACpC,OAAO;AACL0C,kBAAQM,KAAKL,IAAI3E,GAAG;AAAA,QACtB;AAAA,MACF;AACA8D,eAAQkB,KAAK;AAAA,QAAElF,SAAS0E,OAAO1E;AAAAA,QAAS2E;AAAAA,QAAOC;AAAAA,MAAAA,CAAS;AAAA,IAC1D;AACA,WAAOZ;AAAAA,EACT;AAEAmB,iBAAe,MAAM;AACnBlB,eAAWE,aAAa;AAAA,EAC1B,CAAC;AAED,UAAA,MAAA;AAAA,QAAAiB,QAAAC,WAAAC,QAAAF,MAAAxE,YAAA2E,QAAAD,MAAA1E,YAAA4E,SAAAD,MAAA3E,YAAA6E,SAAAF,MAAAxE,aAAA2E,SAAAD,OAAA1E;AAAAG,WAAAwE,QAAAC,gBA4BSC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE7B,QAAAA;AAAAA,MAAS;AAAA,MAAA8B,UACjBA,CAACC,QAAQnC,MAAM;AACd,cAAMc,SAAS3E,QAAQ6D,GAAG;AAC1B,gBAAA,MAAA;AAAA,cAAAoC,SAAAC,QAAAA;AAAA/E,iBAAA8E,QAAAL,gBAEKtF,eAAa;AAAA,YAAA,IACZgB,OAAI;AAAA,qBAAE0E,OAAOpB;AAAAA,YAAK;AAAA,YAAA,IAClBvE,QAAK;AAAA,qBAAEsE,OAAQtE;AAAAA,YAAK;AAAA,YAAA,IACpBJ,UAAO;AAAA,qBAAE0E,OAAQ1E;AAAAA,YAAO;AAAA,UAAA,CAAA,GAAA,IAAA;AAAAkB,iBAAA8E,SAAA,MAAA;AAAA,gBAAAE,OAAA9E,KAAA,MAEzB2E,OAAOnB,QAAQuB,SAAS,CAAC;AAAA,mBAAA,MAAzBD,KAAAA,KAAA,MAAA;AAAA,kBAAAE,SAAAC,QAAAA,GAAAC,SAAAF,OAAAxF,YAAA2F,SAAAD,OAAA1F,YAAA4F,SAAAD,OAAAxF;AAAAyF,qBAAAzF;AAAAA,kBAAA0F,SAAAH,OAAAvF;AAAAG,qBAAAoF,QAAA,MAG+B5B,QAAQ1E,SAAOwG,MAAA;AAAAtF,qBAAAuF,QAAAd,gBAGtCC,KAAG;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAEE,OAAOnB;AAAAA,gBAAO;AAAA,gBAAAkB,UACrBjB,UAAG,MAAA;AAAA,sBAAA6B,SAAAC,QAAAA;AAAAzF,yBAAAwF,QACiC7B,GAAG;AAAApD,yBAAA,MAAAQ,UAAAyE,QAA5BnG,OAAAA,EAASqG,aAAa,CAAA;AAAA,yBAAAF;AAAAA,gBAAA,GAAA;AAAA,cAAA,CAClC,CAAA;AAAAjF,qBAAAC,CAAAA,QAAA;AAAA,oBAAAmF,QAPKtG,OAAAA,EAASuG,uBAAqBC,QAG7BxG,SAASyG;AAAkBH,0BAAAnF,IAAAI,KAAAG,UAAAmE,QAAA1E,IAAAI,IAAA+E,KAAA;AAAAE,0BAAArF,IAAAM,KAAAC,UAAAwE,QAAA/E,IAAAM,IAAA+E,KAAA;AAAA,uBAAArF;AAAAA,cAAA,GAAA;AAAA,gBAAAI,GAAAI;AAAAA,gBAAAF,GAAAE;AAAAA,cAAAA,CAAA;AAAA,qBAAAkE;AAAAA,YAAA,OASxC;AAAA,UAAI,GAAA,GAAA,IAAA;AAAA,iBAAAJ;AAAAA,QAAA,GAAA;AAAA,MAGd;AAAA,IAAA,CAAC,CAAA;AAAAvE,WAAAC,CAAAA,QAAA;AAAA,UAAAuF,OAtDG1G,SAAS2G,iBAAeC,OAClB5G,SAAS6G,eAAaC,QACzB9G,OAAAA,EAAS+G,cAAYC,QAErBhH,SAASiH,aAAWC,QAiBrBlH,SAASmH,oBAAkBC,QAKzBpH,OAAAA,EAASqH;AAAiBX,eAAAvF,IAAAI,KAAAG,UAAAmD,OAAA1D,IAAAI,IAAAmF,IAAA;AAAAE,eAAAzF,IAAAM,KAAAC,UAAAqD,OAAA5D,IAAAM,IAAAmF,IAAA;AAAAE,gBAAA3F,IAAAgC,KAAAzB,UAAAsD,OAAA7D,IAAAgC,IAAA2D,KAAA;AAAAE,gBAAA7F,IAAAiC,KAAA5B,aAAAyD,QAAA,SAAA9D,IAAAiC,IAAA4D,KAAA;AAAAE,gBAAA/F,IAAAkC,KAAA3B,UAAAwD,QAAA/D,IAAAkC,IAAA6D,KAAA;AAAAE,gBAAAjG,IAAAmC,KAAA5B,UAAAyD,QAAAhE,IAAAmC,IAAA8D,KAAA;AAAA,aAAAjG;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,MAAAwB,GAAAxB;AAAAA,MAAAyB,GAAAzB;AAAAA,MAAA0B,GAAA1B;AAAAA,MAAA2B,GAAA3B;AAAAA,IAAAA,CAAA;AAAA,WAAAkD;AAAAA,EAAA,GAAA;AAmC9C;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/components/main-panel.tsx

@@ -1,8 +1,10 @@
 import clsx from 'clsx'
+import { DrawClientProvider } from '../context/draw-context'
 import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { TANSTACK_DEVTOOLS } from '../utils/storage'
 import { usePiPWindow } from '../context/pip-context'
+
 import type { Accessor, JSX } from 'solid-js'
 
 export const MainPanel = (props: {
@@ -30,7 +32,9 @@ export const MainPanel = (props: {
         styles().devtoolsPanelContainerResizing(props.isResizing),
       )}
     >
-      {props.children}
+      <DrawClientProvider animationMs={400}>
+        {props.children}
+      </DrawClientProvider>
     </div>
   )
 }