@tanstack/devtools 0.6.7 → 0.6.8

package/dist/devtools/ITBBRMTQ.js

@@ -0,0 +1,1966 @@
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/CEHNENNI.js';
+import { delegateEvents, createComponent, Portal, template, use, setAttribute, insert, memo, effect, className, addEventListener } from 'solid-js/web';
+import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
+import { createShortcut } from '@solid-primitives/keyboard';
+import { ThemeContextProvider, TanStackLogo, MainPanel as MainPanel$1, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Select, Input, Button } from '@tanstack/devtools-ui';
+import clsx3 from 'clsx';
+import * as goober from 'goober';
+import { PiP, X, List, PageSearch, Cogs, SettingsCog, Link, Keyboard, GeoTag, SocialBubble } from '@tanstack/devtools-ui/icons';
+
+var useDraw = (props) => {
+  const [activeHover, setActiveHover] = createSignal(false);
+  const [forceExpand, setForceExpand] = createSignal(false);
+  const expanded = createMemo(() => activeHover() || forceExpand());
+  let hoverTimeout = null;
+  onCleanup(() => {
+    if (hoverTimeout) clearTimeout(hoverTimeout);
+  });
+  const hoverUtils = {
+    enter: () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+        hoverTimeout = null;
+      }
+      setActiveHover(true);
+    },
+    leave: () => {
+      hoverTimeout = setTimeout(() => {
+        setActiveHover(false);
+      }, props.animationMs);
+    }
+  };
+  return {
+    expanded,
+    setForceExpand,
+    hoverUtils,
+    animationMs: props.animationMs
+  };
+};
+var DrawContext = createContext(void 0);
+var DrawClientProvider = (props) => {
+  const value = useDraw({
+    animationMs: props.animationMs
+  });
+  return createComponent(DrawContext.Provider, {
+    value,
+    get children() {
+      return props.children;
+    }
+  });
+};
+function useDrawContext() {
+  const context = useContext(DrawContext);
+  if (context === void 0) {
+    throw new Error(`useDrawContext must be used within a DrawClientProvider`);
+  }
+  return context;
+}
+
+// src/context/use-devtools-context.ts
+var useDevtoolsContext = () => {
+  const context = useContext(DevtoolsContext);
+  if (context === void 0) {
+    throw new Error(
+      "useDevtoolsShellContext must be used within a ShellContextProvider"
+    );
+  }
+  return context;
+};
+function useTheme() {
+  const { settings, setSettings } = useDevtoolsSettings();
+  const theme = createMemo(() => settings().theme);
+  return {
+    theme,
+    setTheme: (theme2) => setSettings({ theme: theme2 })
+  };
+}
+var usePlugins = () => {
+  const { store, setStore } = useDevtoolsContext();
+  const { setForceExpand } = useDrawContext();
+  const plugins = createMemo(() => store.plugins);
+  const activePlugin = createMemo(() => store.state.activePlugin);
+  createEffect(() => {
+    if (activePlugin() == null) {
+      setForceExpand(false);
+    } else {
+      setForceExpand(true);
+    }
+  });
+  const setActivePlugin = (pluginId) => {
+    setStore((prev) => ({
+      ...prev,
+      state: {
+        ...prev.state,
+        activePlugin: pluginId
+      }
+    }));
+  };
+  return { plugins, setActivePlugin, activePlugin };
+};
+var useDevtoolsState = () => {
+  const { store, setStore } = useDevtoolsContext();
+  const state = createMemo(() => store.state);
+  const setState = (newState) => {
+    setStore((prev) => ({
+      ...prev,
+      state: {
+        ...prev.state,
+        ...newState
+      }
+    }));
+  };
+  return { state, setState };
+};
+var useDevtoolsSettings = () => {
+  const { store, setStore } = useDevtoolsContext();
+  const settings = createMemo(() => store.settings);
+  const setSettings = (newSettings) => {
+    setStore((prev) => ({
+      ...prev,
+      settings: {
+        ...prev.settings,
+        ...newSettings
+      }
+    }));
+  };
+  return { setSettings, settings };
+};
+var usePersistOpen = () => {
+  const { state, setState } = useDevtoolsState();
+  const persistOpen = createMemo(() => state().persistOpen);
+  const setPersistOpen = (value) => {
+    setState({ persistOpen: value });
+  };
+  return { persistOpen, setPersistOpen };
+};
+var useHeight = () => {
+  const { state, setState } = useDevtoolsState();
+  const height = createMemo(() => state().height);
+  const setHeight = (newHeight) => {
+    setState({ height: newHeight });
+  };
+  return { height, setHeight };
+};
+var recursivelyChangeTabIndex = (node, remove = true) => {
+  if (remove) {
+    node.setAttribute("tabIndex", "-1");
+  } else {
+    node.removeAttribute("tabIndex");
+  }
+  for (const child of node.children) {
+    recursivelyChangeTabIndex(child, remove);
+  }
+};
+var useDisableTabbing = (isOpen) => {
+  createEffect(() => {
+    const el = document.getElementById(TANSTACK_DEVTOOLS);
+    if (!el) return;
+    recursivelyChangeTabIndex(el, !isOpen());
+  });
+};
+
+// src/styles/tokens.ts
+var tokens = {
+  colors: {
+    inherit: "inherit",
+    current: "currentColor",
+    transparent: "transparent",
+    black: "#000000",
+    white: "#ffffff",
+    neutral: {
+      50: "#f9fafb",
+      100: "#f2f4f7",
+      200: "#eaecf0",
+      300: "#d0d5dd",
+      400: "#98a2b3",
+      500: "#667085",
+      600: "#475467",
+      700: "#344054",
+      800: "#1d2939",
+      900: "#101828"
+    },
+    darkGray: {
+      50: "#525c7a",
+      100: "#49536e",
+      200: "#414962",
+      300: "#394056",
+      400: "#313749",
+      500: "#292e3d",
+      600: "#212530",
+      700: "#191c24",
+      800: "#111318",
+      900: "#0b0d10"
+    },
+    gray: {
+      50: "#f9fafb",
+      100: "#f2f4f7",
+      200: "#eaecf0",
+      300: "#d0d5dd",
+      400: "#98a2b3",
+      500: "#667085",
+      600: "#475467",
+      700: "#344054",
+      800: "#1d2939",
+      900: "#101828"
+    },
+    blue: {
+      25: "#F5FAFF",
+      50: "#EFF8FF",
+      100: "#D1E9FF",
+      200: "#B2DDFF",
+      300: "#84CAFF",
+      400: "#53B1FD",
+      500: "#2E90FA",
+      600: "#1570EF",
+      700: "#175CD3",
+      800: "#1849A9",
+      900: "#194185"
+    },
+    green: {
+      25: "#F6FEF9",
+      50: "#ECFDF3",
+      100: "#D1FADF",
+      200: "#A6F4C5",
+      300: "#6CE9A6",
+      400: "#32D583",
+      500: "#12B76A",
+      600: "#039855",
+      700: "#027A48",
+      800: "#05603A",
+      900: "#054F31"
+    },
+    red: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a"
+    },
+    yellow: {
+      25: "#FFFCF5",
+      50: "#FFFAEB",
+      100: "#FEF0C7",
+      200: "#FEDF89",
+      300: "#FEC84B",
+      400: "#FDB022",
+      500: "#F79009",
+      600: "#DC6803",
+      700: "#B54708",
+      800: "#93370D",
+      900: "#7A2E0E"
+    },
+    purple: {
+      25: "#FAFAFF",
+      50: "#F4F3FF",
+      100: "#EBE9FE",
+      200: "#D9D6FE",
+      300: "#BDB4FE",
+      400: "#9B8AFB",
+      500: "#7A5AF8",
+      600: "#6938EF",
+      700: "#5925DC",
+      800: "#4A1FB8",
+      900: "#3E1C96"
+    },
+    teal: {
+      25: "#F6FEFC",
+      50: "#F0FDF9",
+      100: "#CCFBEF",
+      200: "#99F6E0",
+      300: "#5FE9D0",
+      400: "#2ED3B7",
+      500: "#15B79E",
+      600: "#0E9384",
+      700: "#107569",
+      800: "#125D56",
+      900: "#134E48"
+    },
+    pink: {
+      25: "#fdf2f8",
+      50: "#fce7f3",
+      100: "#fbcfe8",
+      200: "#f9a8d4",
+      300: "#f472b6",
+      400: "#ec4899",
+      500: "#db2777",
+      600: "#be185d",
+      700: "#9d174d",
+      800: "#831843",
+      900: "#500724"
+    },
+    cyan: {
+      25: "#ecfeff",
+      50: "#cffafe",
+      100: "#a5f3fc",
+      200: "#67e8f9",
+      300: "#22d3ee",
+      400: "#06b6d4",
+      500: "#0891b2",
+      600: "#0e7490",
+      700: "#155e75",
+      800: "#164e63",
+      900: "#083344"
+    }
+  },
+  alpha: {
+    100: "ff",
+    90: "e5",
+    80: "cc",
+    70: "b3",
+    60: "99",
+    50: "80",
+    40: "66",
+    30: "4d",
+    20: "33",
+    10: "1a",
+    0: "00"
+  },
+  font: {
+    size: {
+      "2xs": "calc(var(--tsrd-font-size) * 0.625)",
+      xs: "calc(var(--tsrd-font-size) * 0.75)",
+      sm: "calc(var(--tsrd-font-size) * 0.875)",
+      md: "var(--tsrd-font-size)",
+      lg: "calc(var(--tsrd-font-size) * 1.125)",
+      xl: "calc(var(--tsrd-font-size) * 1.25)",
+      "2xl": "calc(var(--tsrd-font-size) * 1.5)",
+      "3xl": "calc(var(--tsrd-font-size) * 1.875)",
+      "4xl": "calc(var(--tsrd-font-size) * 2.25)",
+      "5xl": "calc(var(--tsrd-font-size) * 3)",
+      "6xl": "calc(var(--tsrd-font-size) * 3.75)",
+      "7xl": "calc(var(--tsrd-font-size) * 4.5)",
+      "8xl": "calc(var(--tsrd-font-size) * 6)",
+      "9xl": "calc(var(--tsrd-font-size) * 8)"
+    },
+    lineHeight: {
+      "3xs": "calc(var(--tsrd-font-size) * 0.75)",
+      "2xs": "calc(var(--tsrd-font-size) * 0.875)",
+      xs: "calc(var(--tsrd-font-size) * 1)",
+      sm: "calc(var(--tsrd-font-size) * 1.25)",
+      md: "calc(var(--tsrd-font-size) * 1.5)",
+      lg: "calc(var(--tsrd-font-size) * 1.75)",
+      xl: "calc(var(--tsrd-font-size) * 2)",
+      "2xl": "calc(var(--tsrd-font-size) * 2.25)",
+      "3xl": "calc(var(--tsrd-font-size) * 2.5)",
+      "4xl": "calc(var(--tsrd-font-size) * 2.75)",
+      "5xl": "calc(var(--tsrd-font-size) * 3)",
+      "6xl": "calc(var(--tsrd-font-size) * 3.25)",
+      "7xl": "calc(var(--tsrd-font-size) * 3.5)",
+      "8xl": "calc(var(--tsrd-font-size) * 3.75)",
+      "9xl": "calc(var(--tsrd-font-size) * 4)"
+    },
+    weight: {
+      thin: "100",
+      extralight: "200",
+      light: "300",
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+      extrabold: "800",
+      black: "900"
+    },
+    fontFamily: {
+      sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif",
+      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
+    }
+  },
+  breakpoints: {
+    xs: "320px",
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px"
+  },
+  border: {
+    radius: {
+      none: "0px",
+      xs: "calc(var(--tsrd-font-size) * 0.125)",
+      sm: "calc(var(--tsrd-font-size) * 0.25)",
+      md: "calc(var(--tsrd-font-size) * 0.375)",
+      lg: "calc(var(--tsrd-font-size) * 0.5)",
+      xl: "calc(var(--tsrd-font-size) * 0.75)",
+      "2xl": "calc(var(--tsrd-font-size) * 1)",
+      "3xl": "calc(var(--tsrd-font-size) * 1.5)",
+      full: "9999px"
+    }
+  },
+  size: {
+    0: "0px",
+    0.25: "calc(var(--tsrd-font-size) * 0.0625)",
+    0.5: "calc(var(--tsrd-font-size) * 0.125)",
+    1: "calc(var(--tsrd-font-size) * 0.25)",
+    1.5: "calc(var(--tsrd-font-size) * 0.375)",
+    2: "calc(var(--tsrd-font-size) * 0.5)",
+    2.5: "calc(var(--tsrd-font-size) * 0.625)",
+    3: "calc(var(--tsrd-font-size) * 0.75)",
+    3.5: "calc(var(--tsrd-font-size) * 0.875)",
+    4: "calc(var(--tsrd-font-size) * 1)",
+    4.5: "calc(var(--tsrd-font-size) * 1.125)",
+    5: "calc(var(--tsrd-font-size) * 1.25)",
+    5.5: "calc(var(--tsrd-font-size) * 1.375)",
+    6: "calc(var(--tsrd-font-size) * 1.5)",
+    6.5: "calc(var(--tsrd-font-size) * 1.625)",
+    7: "calc(var(--tsrd-font-size) * 1.75)",
+    8: "calc(var(--tsrd-font-size) * 2)",
+    9: "calc(var(--tsrd-font-size) * 2.25)",
+    10: "calc(var(--tsrd-font-size) * 2.5)",
+    11: "calc(var(--tsrd-font-size) * 2.75)",
+    12: "calc(var(--tsrd-font-size) * 3)",
+    14: "calc(var(--tsrd-font-size) * 3.5)",
+    16: "calc(var(--tsrd-font-size) * 4)",
+    20: "calc(var(--tsrd-font-size) * 5)",
+    24: "calc(var(--tsrd-font-size) * 6)",
+    28: "calc(var(--tsrd-font-size) * 7)",
+    32: "calc(var(--tsrd-font-size) * 8)",
+    36: "calc(var(--tsrd-font-size) * 9)",
+    40: "calc(var(--tsrd-font-size) * 10)",
+    44: "calc(var(--tsrd-font-size) * 11)",
+    48: "calc(var(--tsrd-font-size) * 12)",
+    52: "calc(var(--tsrd-font-size) * 13)",
+    56: "calc(var(--tsrd-font-size) * 14)",
+    60: "calc(var(--tsrd-font-size) * 15)",
+    64: "calc(var(--tsrd-font-size) * 16)",
+    72: "calc(var(--tsrd-font-size) * 18)",
+    80: "calc(var(--tsrd-font-size) * 20)",
+    96: "calc(var(--tsrd-font-size) * 24)"
+  },
+  shadow: {
+    xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
+    sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
+    md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
+    lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
+    xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
+    "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
+    inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
+    none: () => `none`
+  },
+  zIndices: {
+    hide: -1,
+    auto: "auto",
+    base: 0,
+    docked: 10,
+    dropdown: 1e3,
+    sticky: 1100,
+    banner: 1200,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    skipLink: 1600,
+    toast: 1700,
+    tooltip: 1800
+  }
+};
+
+// src/styles/use-styles.ts
+var mSecondsToCssSeconds = (mSeconds) => `${(mSeconds / 1e3).toFixed(2)}s`;
+var stylesFactory = (theme) => {
+  const { colors, font, size, border } = tokens;
+  const { fontFamily, size: fontSize } = font;
+  const css2 = goober.css;
+  const t = (light, dark) => theme === "light" ? light : dark;
+  return {
+    seoTabContainer: css2`
+      padding: 0;
+      margin: 0 auto;
+      background: ${t(colors.white, colors.darkGray[700])};
+      border-radius: 12px;
+      box-shadow: 0 2px 16px ${t("rgba(0, 0, 0, 0.04)", "rgba(0, 0, 0, 0.08)")};
+      overflow-y: auto;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      width: 100%;
+      overflow-y: auto;
+    `,
+    seoTabTitle: css2`
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: ${t(colors.purple[500], colors.purple[400])};
+      margin: 0;
+      padding: 1rem 1.5rem 0.5rem 1.5rem;
+      text-align: left;
+      border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
+    `,
+    seoTabSection: css2`
+      padding: 1.5rem;
+      background: ${t(colors.gray[100], colors.gray[800])};
+      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-bottom: 2rem;
+      border-radius: 0.75rem;
+    `,
+    seoPreviewSection: css2`
+      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: css2`
+      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-radius: 8px;
+      padding: 12px 10px;
+      background: ${t(colors.white, colors.darkGray[900])};
+      margin-bottom: 0;
+      box-shadow: 0 1px 4px ${t("rgba(0,0,0,0.02)", "rgba(0,0,0,0.04)")};
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      min-width: 200px;
+      max-width: 240px;
+      font-size: 0.95rem;
+      gap: 4px;
+    `,
+    seoPreviewHeader: css2`
+      font-size: 1rem;
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: ${t(colors.purple[500], colors.purple[400])};
+    `,
+    seoPreviewImage: css2`
+      max-width: 100%;
+      border-radius: 6px;
+      margin-bottom: 6px;
+      box-shadow: 0 1px 2px ${t("rgba(0,0,0,0.03)", "rgba(0,0,0,0.06)")};
+      height: 160px;
+    `,
+    seoPreviewTitle: css2`
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 2px;
+      color: ${t(colors.gray[900], colors.gray[100])};
+    `,
+    seoPreviewDesc: css2`
+      color: ${t(colors.gray[700], colors.gray[300])};
+      margin-bottom: 2px;
+      font-size: 0.95rem;
+    `,
+    seoPreviewUrl: css2`
+      color: ${t(colors.gray[500], colors.gray[500])};
+      font-size: 0.9rem;
+      margin-bottom: 2px;
+      word-break: break-all;
+    `,
+    seoMissingTagsSection: css2`
+      margin-top: 4px;
+      font-size: 0.95rem;
+      color: ${t(colors.red[400], colors.red[400])};
+    `,
+    seoMissingTagsList: css2`
+      margin: 4px 0 0 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      max-width: 240px;
+    `,
+    seoMissingTag: css2`
+      background: ${t(colors.red[100], colors.red[500] + "22")};
+      color: ${t(colors.red[700], colors.red[500])};
+      border-radius: 4px;
+      padding: 1px 6px;
+      font-size: 0.9rem;
+      font-weight: 500;
+    `,
+    seoAllTagsFound: css2`
+      color: ${t(colors.green[700], colors.green[500])};
+      font-weight: 500;
+      margin-left: 6px;
+      font-size: 0.95rem;
+    `,
+    devtoolsPanelContainer: (panelLocation, isDetached) => css2`
+      direction: ltr;
+      position: fixed;
+      overflow-y: hidden;
+      overflow-x: hidden;
+      ${panelLocation}: 0;
+      right: 0;
+      z-index: 99999;
+      width: 100%;
+      ${isDetached ? "" : "max-height: 90%;"}
+      border-top: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      transform-origin: top;
+    `,
+    devtoolsPanelContainerVisibility: (isOpen) => {
+      return css2`
+        visibility: ${isOpen ? "visible" : "hidden"};
+        height: ${isOpen ? "auto" : "0"};
+      `;
+    },
+    devtoolsPanelContainerResizing: (isResizing) => {
+      if (isResizing()) {
+        return css2`
+          transition: none;
+        `;
+      }
+      return css2`
+        transition: all 0.4s ease;
+      `;
+    },
+    devtoolsPanelContainerAnimation: (isOpen, height) => {
+      if (isOpen) {
+        return css2`
+          pointer-events: auto;
+          transform: translateY(0);
+        `;
+      }
+      return css2`
+        pointer-events: none;
+        transform: translateY(${height}px);
+      `;
+    },
+    devtoolsPanel: css2`
+      display: flex;
+      font-size: ${fontSize.sm};
+      font-family: ${fontFamily.sans};
+      background-color: ${t(colors.white, colors.darkGray[700])};
+      color: ${t(colors.gray[900], colors.gray[300])};
+      width: w-screen;
+      flex-direction: row;
+      overflow-x: hidden;
+      overflow-y: hidden;
+      height: 100%;
+    `,
+    dragHandle: (panelLocation) => css2`
+      position: absolute;
+      left: 0;
+      ${panelLocation === "bottom" ? "top" : "bottom"}: 0;
+      width: 100%;
+      height: 4px;
+      cursor: row-resize;
+      user-select: none;
+      z-index: 100000;
+      &:hover {
+        background-color: ${t(colors.purple[700], colors.purple[400])};
+      }
+    `,
+    mainCloseBtn: css2`
+      background: transparent;
+      position: fixed;
+      z-index: 99999;
+      display: inline-flex;
+      width: fit-content;
+      cursor: pointer;
+      appearance: none;
+      border: 0;
+      align-items: center;
+      padding: 0;
+      font-size: ${font.size.xs};
+      cursor: pointer;
+      transition: all 0.25s ease-out;
+      &:hide-until-hover {
+        opacity: 0;
+        pointer-events: none;
+        visibility: hidden;
+      }
+      &:hide-until-hover:hover {
+        opacity: 1;
+        pointer-events: auto;
+        visibility: visible;
+      }
+      &:focus-visible {
+        outline-offset: 2px;
+        border-radius: ${border.radius.full};
+        outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
+      }
+    `,
+    mainCloseBtnPosition: (position) => {
+      const base = css2`
+        ${position === "top-left" ? `top: ${size[2]}; left: ${size[2]};` : ""}
+        ${position === "top-right" ? `top: ${size[2]}; right: ${size[2]};` : ""}
+        ${position === "middle-left" ? `top: 50%; left: ${size[2]}; transform: translateY(-50%);` : ""}
+        ${position === "middle-right" ? `top: 50%; right: ${size[2]}; transform: translateY(-50%);` : ""}
+        ${position === "bottom-left" ? `bottom: ${size[2]}; left: ${size[2]};` : ""}
+        ${position === "bottom-right" ? `bottom: ${size[2]}; right: ${size[2]};` : ""}
+      `;
+      return base;
+    },
+    mainCloseBtnAnimation: (isOpen, hideUntilHover) => {
+      if (!isOpen) {
+        return hideUntilHover ? css2`
+              opacity: 0;
+
+              &:hover {
+                opacity: 1;
+                pointer-events: auto;
+                visibility: visible;
+              }
+            ` : css2`
+              opacity: 1;
+              pointer-events: auto;
+              visibility: visible;
+            `;
+      }
+      return css2`
+        opacity: 0;
+        pointer-events: none;
+        visibility: hidden;
+      `;
+    },
+    tabContainer: css2`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      height: 100%;
+      background-color: ${t(colors.gray[100], colors.darkGray[800])};
+      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      box-shadow: 0 1px 0 ${t(colors.gray[200], colors.gray[700])};
+      position: relative;
+      width: ${size[10]};
+    `,
+    tab: css2`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: ${size[10]};
+      cursor: pointer;
+      font-size: ${fontSize.sm};
+      font-family: ${fontFamily.sans};
+      color: ${t(colors.gray[700], colors.gray[300])};
+      background-color: transparent;
+      border: none;
+      transition: all 0.2s ease-in-out;
+      border-left: 2px solid transparent;
+      &:hover:not(.close):not(.active):not(.detach) {
+        background-color: ${t(colors.gray[200], colors.gray[700])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
+      }
+      &.active {
+        background-color: ${t(colors.purple[200], colors.purple[500])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
+      }
+      &.detach {
+        &:hover {
+          background-color: ${t(colors.gray[200], colors.gray[700])};
+        }
+        &:hover {
+          color: ${t(colors.green[700], colors.green[500])};
+        }
+      }
+      &.close {
+        margin-top: auto;
+        &:hover {
+          background-color: ${t(colors.gray[200], colors.gray[700])};
+        }
+        &:hover {
+          color: ${t(colors.red[700], colors.red[500])};
+        }
+      }
+      &.disabled {
+        cursor: not-allowed;
+        opacity: 0.2;
+        pointer-events: none;
+      }
+      &.disabled:hover {
+        background-color: transparent;
+        color: ${colors.gray[300]};
+      }
+    `,
+    tabContent: css2`
+      transition: all 0.2s ease-in-out;
+      width: 100%;
+      height: 100%;
+    `,
+    pluginsTabPanel: css2`
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    `,
+    pluginsTabDraw: (isExpanded) => css2`
+      width: ${isExpanded ? size[48] : 0};
+      height: 100%;
+      background-color: ${t(colors.white, colors.darkGray[800])};
+      box-shadow: 0 1px 0 ${colors.gray[700]};
+      ${isExpanded ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};` : ""}
+    `,
+    pluginsTabDrawExpanded: css2`
+      width: ${size[48]};
+      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
+    `,
+    pluginsTabDrawTransition: (mSeconds) => {
+      return css2`
+        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;
+      `;
+    },
+    pluginsTabSidebar: (isExpanded) => css2`
+      width: ${size[48]};
+      overflow-y: auto;
+      transform: ${isExpanded ? "translateX(0)" : "translateX(-100%)"};
+    `,
+    pluginsTabSidebarTransition: (mSeconds) => {
+      return css2`
+        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;
+      `;
+    },
+    pluginName: css2`
+      font-size: ${fontSize.xs};
+      font-family: ${fontFamily.sans};
+      color: ${t(colors.gray[700], colors.gray[300])};
+      padding: ${size[2]};
+      cursor: pointer;
+      text-align: center;
+      transition: all 0.2s ease-in-out;
+      &:hover {
+        background-color: ${t(colors.gray[200], colors.gray[700])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+        padding: ${size[2]};
+      }
+      &.active {
+        background-color: ${t(colors.purple[200], colors.purple[500])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+      }
+    `,
+    pluginsTabContent: css2`
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+    `,
+    settingsGroup: css2`
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    `,
+    conditionalSetting: css2`
+      margin-left: 1.5rem;
+      padding-left: 1rem;
+      border-left: 2px solid ${t(colors.purple[600], colors.purple[400])};
+      background-color: ${t(colors.gray[100], colors.darkGray[800])};
+      padding: 1rem;
+      border-radius: 0.5rem;
+      margin-top: 0.5rem;
+    `,
+    settingRow: css2`
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+
+      @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+      }
+    `,
+    settingsModifiers: css2`
+      display: flex;
+      gap: 0.5rem;
+    `
+  };
+};
+function useStyles() {
+  const { theme } = useTheme();
+  const [styles, setStyles] = createSignal(stylesFactory(theme()));
+  createEffect(() => {
+    setStyles(stylesFactory(theme()));
+  });
+  return styles;
+}
+
+// src/components/trigger.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button aria-label="Open TanStack Devtools">`);
+var Trigger = ({
+  isOpen,
+  setIsOpen
+}) => {
+  const {
+    settings
+  } = useDevtoolsSettings();
+  const styles = useStyles();
+  const buttonStyle = createMemo(() => {
+    return clsx3(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover));
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    _el$.$$click = () => setIsOpen(!isOpen());
+    insert(_el$, createComponent(TanStackLogo, {}));
+    effect(() => className(_el$, buttonStyle()));
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var MainPanel = (props) => {
+  const styles = useStyles();
+  const {
+    height
+  } = useHeight();
+  const {
+    settings
+  } = useDevtoolsSettings();
+  const pip = usePiPWindow();
+  return (() => {
+    var _el$ = _tmpl$2();
+    setAttribute(_el$, "id", TANSTACK_DEVTOOLS);
+    insert(_el$, createComponent(DrawClientProvider, {
+      animationMs: 400,
+      get children() {
+        return props.children;
+      }
+    }));
+    effect((_p$) => {
+      var _v$ = pip().pipWindow ? "100vh" : height() + "px", _v$2 = clsx3(styles().devtoolsPanelContainer(settings().panelLocation, Boolean(pip().pipWindow)), styles().devtoolsPanelContainerAnimation(props.isOpen(), height()), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing));
+      _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("height", _v$) : _el$.style.removeProperty("height"));
+      _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var ContentPanel = (props) => {
+  const styles = useStyles();
+  const {
+    settings
+  } = useDevtoolsSettings();
+  return (() => {
+    var _el$ = _tmpl$3();
+    var _ref$ = props.ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!props.handleDragStart);
+      return () => _c$() ? (() => {
+        var _el$2 = _tmpl$3();
+        addEventListener(_el$2, "mousedown", props.handleDragStart, true);
+        effect(() => className(_el$2, styles().dragHandle(settings().panelLocation)));
+        return _el$2;
+      })() : null;
+    })(), null);
+    insert(_el$, () => props.children, null);
+    effect(() => className(_el$, styles().devtoolsPanel));
+    return _el$;
+  })();
+};
+delegateEvents(["mousedown"]);
+var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div><div></div>Final shortcut is: `);
+var _tmpl$32 = /* @__PURE__ */ template(`<div><div>`);
+var SettingsTab = () => {
+  const {
+    setSettings,
+    settings
+  } = useDevtoolsSettings();
+  const styles = useStyles();
+  const hotkey = createMemo(() => settings().openHotkey);
+  const modifiers = ["Control", "Alt", "Meta", "Shift"];
+  const changeHotkey = (newHotkey) => () => {
+    if (hotkey().includes(newHotkey)) {
+      return setSettings({
+        openHotkey: hotkey().filter((key) => key !== newHotkey)
+      });
+    }
+    const existingModifiers = hotkey().filter((key) => modifiers.includes(key));
+    const otherModifiers = hotkey().filter((key) => !modifiers.includes(key));
+    setSettings({
+      openHotkey: [...existingModifiers, newHotkey, ...otherModifiers]
+    });
+  };
+  return createComponent(MainPanel$1, {
+    withPadding: true,
+    get children() {
+      return [createComponent(Section, {
+        get children() {
+          return [createComponent(SectionTitle, {
+            get children() {
+              return [createComponent(SectionIcon, {
+                get children() {
+                  return createComponent(SettingsCog, {});
+                }
+              }), "General"];
+            }
+          }), createComponent(SectionDescription, {
+            children: "Configure general behavior of the devtools panel."
+          }), (() => {
+            var _el$ = _tmpl$4();
+            insert(_el$, createComponent(Checkbox, {
+              label: "Default open",
+              description: "Automatically open the devtools panel when the page loads",
+              onChange: () => setSettings({
+                defaultOpen: !settings().defaultOpen
+              }),
+              get checked() {
+                return settings().defaultOpen;
+              }
+            }), null);
+            insert(_el$, createComponent(Checkbox, {
+              label: "Hide trigger until hovered",
+              description: "Keep the devtools trigger button hidden until you hover over its area",
+              onChange: () => setSettings({
+                hideUntilHover: !settings().hideUntilHover
+              }),
+              get checked() {
+                return settings().hideUntilHover;
+              }
+            }), null);
+            insert(_el$, createComponent(Select, {
+              label: "Theme",
+              description: "Choose the theme for the devtools panel",
+              get value() {
+                return settings().theme;
+              },
+              options: [{
+                label: "Dark",
+                value: "dark"
+              }, {
+                label: "Light",
+                value: "light"
+              }],
+              onChange: (value) => setSettings({
+                theme: value
+              })
+            }), null);
+            effect(() => className(_el$, styles().settingsGroup));
+            return _el$;
+          })()];
+        }
+      }), createComponent(Section, {
+        get children() {
+          return [createComponent(SectionTitle, {
+            get children() {
+              return [createComponent(SectionIcon, {
+                get children() {
+                  return createComponent(Link, {});
+                }
+              }), "URL Configuration"];
+            }
+          }), createComponent(SectionDescription, {
+            children: "Control when devtools are available based on URL parameters."
+          }), (() => {
+            var _el$2 = _tmpl$4();
+            insert(_el$2, createComponent(Checkbox, {
+              label: "Require URL Flag",
+              description: "Only show devtools when a specific URL parameter is present",
+              get checked() {
+                return settings().requireUrlFlag;
+              },
+              onChange: (checked) => setSettings({
+                requireUrlFlag: checked
+              })
+            }), null);
+            insert(_el$2, createComponent(Show, {
+              get when() {
+                return settings().requireUrlFlag;
+              },
+              get children() {
+                var _el$3 = _tmpl$4();
+                insert(_el$3, createComponent(Input, {
+                  label: "URL flag",
+                  description: "Enter the URL parameter name (e.g., 'debug' for ?debug=true)",
+                  placeholder: "debug",
+                  get value() {
+                    return settings().urlFlag;
+                  },
+                  onChange: (e) => setSettings({
+                    urlFlag: e
+                  })
+                }));
+                effect(() => className(_el$3, styles().conditionalSetting));
+                return _el$3;
+              }
+            }), null);
+            effect(() => className(_el$2, styles().settingsGroup));
+            return _el$2;
+          })()];
+        }
+      }), createComponent(Section, {
+        get children() {
+          return [createComponent(SectionTitle, {
+            get children() {
+              return [createComponent(SectionIcon, {
+                get children() {
+                  return createComponent(Keyboard, {});
+                }
+              }), "Keyboard"];
+            }
+          }), createComponent(SectionDescription, {
+            children: "Customize keyboard shortcuts for quick access."
+          }), (() => {
+            var _el$4 = _tmpl$22(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+            insert(_el$5, createComponent(Show, {
+              keyed: true,
+              get when() {
+                return hotkey();
+              },
+              get children() {
+                return [createComponent(Button, {
+                  variant: "success",
+                  get onclick() {
+                    return changeHotkey("Shift");
+                  },
+                  get outline() {
+                    return !hotkey().includes("Shift");
+                  },
+                  children: "Shift"
+                }), createComponent(Button, {
+                  variant: "success",
+                  get onclick() {
+                    return changeHotkey("Alt");
+                  },
+                  get outline() {
+                    return !hotkey().includes("Alt");
+                  },
+                  children: "Alt"
+                }), createComponent(Button, {
+                  variant: "success",
+                  get onclick() {
+                    return changeHotkey("Meta");
+                  },
+                  get outline() {
+                    return !hotkey().includes("Meta");
+                  },
+                  children: "Meta"
+                }), createComponent(Button, {
+                  variant: "success",
+                  get onclick() {
+                    return changeHotkey("Control");
+                  },
+                  get outline() {
+                    return !hotkey().includes("Control");
+                  },
+                  children: "Control"
+                })];
+              }
+            }));
+            insert(_el$4, createComponent(Input, {
+              label: "Hotkey to open/close devtools",
+              description: "Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above",
+              placeholder: "a",
+              get value() {
+                return hotkey().filter((key) => !["Shift", "Meta", "Alt", "Ctrl"].includes(key)).join("+");
+              },
+              onChange: (e) => {
+                const makeModifierArray = (key) => {
+                  if (key.length === 1) return [uppercaseFirstLetter(key)];
+                  const modifiers3 = [];
+                  for (const character of key) {
+                    const newLetter = uppercaseFirstLetter(character);
+                    if (!modifiers3.includes(newLetter)) modifiers3.push(newLetter);
+                  }
+                  return modifiers3;
+                };
+                const modifiers2 = e.split("+").flatMap((key) => makeModifierArray(key)).filter(Boolean);
+                return setSettings({
+                  openHotkey: [...hotkey().filter((key) => ["Shift", "Meta", "Alt", "Ctrl"].includes(key)), ...modifiers2]
+                });
+              }
+            }), _el$6);
+            insert(_el$4, () => hotkey().join(" + "), null);
+            effect((_p$) => {
+              var _v$ = styles().settingsGroup, _v$2 = styles().settingsModifiers;
+              _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
+              _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$4;
+          })()];
+        }
+      }), createComponent(Section, {
+        get children() {
+          return [createComponent(SectionTitle, {
+            get children() {
+              return [createComponent(SectionIcon, {
+                get children() {
+                  return createComponent(GeoTag, {});
+                }
+              }), "Position"];
+            }
+          }), createComponent(SectionDescription, {
+            children: "Adjust the position of the trigger button and devtools panel."
+          }), (() => {
+            var _el$7 = _tmpl$32(), _el$8 = _el$7.firstChild;
+            insert(_el$8, createComponent(Select, {
+              label: "Trigger Position",
+              options: [{
+                label: "Bottom Right",
+                value: "bottom-right"
+              }, {
+                label: "Bottom Left",
+                value: "bottom-left"
+              }, {
+                label: "Top Right",
+                value: "top-right"
+              }, {
+                label: "Top Left",
+                value: "top-left"
+              }, {
+                label: "Middle Right",
+                value: "middle-right"
+              }, {
+                label: "Middle Left",
+                value: "middle-left"
+              }],
+              get value() {
+                return settings().position;
+              },
+              onChange: (value) => setSettings({
+                position: value
+              })
+            }), null);
+            insert(_el$8, createComponent(Select, {
+              label: "Panel Position",
+              get value() {
+                return settings().panelLocation;
+              },
+              options: [{
+                label: "Top",
+                value: "top"
+              }, {
+                label: "Bottom",
+                value: "bottom"
+              }],
+              onChange: (value) => setSettings({
+                panelLocation: value
+              })
+            }), null);
+            effect((_p$) => {
+              var _v$3 = styles().settingsGroup, _v$4 = styles().settingRow;
+              _v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
+              _v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$7;
+          })()];
+        }
+      })];
+    }
+  });
+};
+var _tmpl$5 = /* @__PURE__ */ template(`<div><div><div></div></div><div>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<div><h3>`);
+var PluginsTab = () => {
+  const {
+    plugins,
+    activePlugin,
+    setActivePlugin
+  } = usePlugins();
+  const {
+    expanded,
+    hoverUtils,
+    animationMs
+  } = useDrawContext();
+  let activePluginRef;
+  const {
+    theme
+  } = useTheme();
+  createEffect(() => {
+    const currentActivePlugin = plugins()?.find((plugin) => plugin.id === activePlugin());
+    if (activePluginRef && currentActivePlugin) {
+      currentActivePlugin.render(activePluginRef, theme());
+    }
+  });
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    _el$2.addEventListener("mouseleave", () => {
+      hoverUtils.leave();
+    });
+    _el$2.addEventListener("mouseenter", () => {
+      hoverUtils.enter();
+    });
+    insert(_el$3, createComponent(For, {
+      get each() {
+        return plugins();
+      },
+      children: (plugin) => {
+        let pluginHeading;
+        createEffect(() => {
+          if (pluginHeading) {
+            typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading, theme());
+          }
+        });
+        return (() => {
+          var _el$5 = _tmpl$23(), _el$6 = _el$5.firstChild;
+          _el$5.$$click = () => setActivePlugin(plugin.id);
+          var _ref$2 = pluginHeading;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$6) : pluginHeading = _el$6;
+          setAttribute(_el$6, "id", PLUGIN_TITLE_CONTAINER_ID);
+          effect(() => className(_el$5, clsx3(styles().pluginName, {
+            active: activePlugin() === plugin.id
+          })));
+          return _el$5;
+        })();
+      }
+    }));
+    var _ref$ = activePluginRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$4) : activePluginRef = _el$4;
+    setAttribute(_el$4, "id", PLUGIN_CONTAINER_ID);
+    effect((_p$) => {
+      var _v$ = styles().pluginsTabPanel, _v$2 = clsx3(styles().pluginsTabDraw(expanded()), {
+        [styles().pluginsTabDraw(expanded())]: expanded()
+      }, styles().pluginsTabDrawTransition(animationMs)), _v$3 = clsx3(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs)), _v$4 = styles().pluginsTabContent;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+function useHeadChanges(onChange, opts = {}) {
+  const {
+    attributes = true,
+    childList = true,
+    subtree = true,
+    observeTitle = true
+  } = opts;
+  onMount(() => {
+    const headObserver = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === "childList") {
+          m.addedNodes.forEach((node) => onChange({ kind: "added", node }, m));
+          m.removedNodes.forEach(
+            (node) => onChange({ kind: "removed", node }, m)
+          );
+        } else if (m.type === "attributes") {
+          const el = m.target;
+          onChange(
+            {
+              kind: "attr",
+              target: el,
+              name: m.attributeName,
+              oldValue: m.oldValue ?? null
+            },
+            m
+          );
+        } else {
+          const isInTitle = m.target.parentNode && m.target.parentNode.tagName.toLowerCase() === "title";
+          if (isInTitle) onChange({ kind: "title", title: document.title }, m);
+        }
+      }
+    });
+    headObserver.observe(document.head, {
+      childList,
+      attributes,
+      subtree,
+      attributeOldValue: attributes,
+      characterData: true,
+      // helps catch <title> text node edits
+      characterDataOldValue: false
+    });
+    let titleObserver;
+    if (observeTitle) {
+      const titleEl = document.head.querySelector("title") || // create a <title> if missing so future changes are observable
+      document.head.appendChild(document.createElement("title"));
+      titleObserver = new MutationObserver(() => {
+        onChange({ kind: "title", title: document.title });
+      });
+      titleObserver.observe(titleEl, {
+        childList: true,
+        characterData: true,
+        subtree: true
+      });
+    }
+    onCleanup(() => {
+      headObserver.disconnect();
+      titleObserver?.disconnect();
+    });
+  });
+}
+
+// src/tabs/seo-tab.tsx
+var _tmpl$6 = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<img alt=Preview>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<div>No Image`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`);
+var _tmpl$62 = /* @__PURE__ */ template(`<li>`);
+var 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$6(), _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$24();
+        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$33();
+        _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$;
+  })();
+}
+var 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 createComponent(MainPanel$1, {
+    withPadding: true,
+    get children() {
+      return createComponent(Section, {
+        get children() {
+          return [createComponent(SectionTitle, {
+            get children() {
+              return [createComponent(SectionIcon, {
+                get children() {
+                  return createComponent(SocialBubble, {});
+                }
+              }), "Social previews"];
+            }
+          }), createComponent(SectionDescription, {
+            children: "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."
+          }), (() => {
+            var _el$9 = _tmpl$42();
+            insert(_el$9, createComponent(For, {
+              get each() {
+                return reports();
+              },
+              children: (report, i) => {
+                const social = SOCIALS[i()];
+                return (() => {
+                  var _el$0 = _tmpl$42();
+                  insert(_el$0, createComponent(SocialPreview, {
+                    get meta() {
+                      return report.found;
+                    },
+                    get color() {
+                      return social.color;
+                    },
+                    get network() {
+                      return social.network;
+                    }
+                  }), null);
+                  insert(_el$0, (() => {
+                    var _c$2 = memo(() => report.missing.length > 0);
+                    return () => _c$2() ? (() => {
+                      var _el$1 = _tmpl$52(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$13 = _el$11.nextSibling; _el$13.nextSibling; var _el$14 = _el$10.nextSibling;
+                      insert(_el$10, () => social?.network, _el$13);
+                      insert(_el$14, createComponent(For, {
+                        get each() {
+                          return report.missing;
+                        },
+                        children: (tag) => (() => {
+                          var _el$15 = _tmpl$62();
+                          insert(_el$15, tag);
+                          effect(() => className(_el$15, styles().seoMissingTag));
+                          return _el$15;
+                        })()
+                      }));
+                      effect((_p$) => {
+                        var _v$0 = styles().seoMissingTagsSection, _v$1 = styles().seoMissingTagsList;
+                        _v$0 !== _p$.e && className(_el$1, _p$.e = _v$0);
+                        _v$1 !== _p$.t && className(_el$14, _p$.t = _v$1);
+                        return _p$;
+                      }, {
+                        e: void 0,
+                        t: void 0
+                      });
+                      return _el$1;
+                    })() : null;
+                  })(), null);
+                  return _el$0;
+                })();
+              }
+            }));
+            effect(() => className(_el$9, styles().seoPreviewSection));
+            return _el$9;
+          })()];
+        }
+      });
+    }
+  });
+};
+
+// src/tabs/index.tsx
+var tabs = [{
+  name: "Plugins",
+  id: "plugins",
+  component: () => createComponent(PluginsTab, {}),
+  icon: () => createComponent(List, {})
+}, {
+  name: "SEO",
+  id: "seo",
+  component: () => createComponent(SeoTab, {}),
+  icon: () => createComponent(PageSearch, {})
+}, {
+  name: "Settings",
+  id: "settings",
+  component: () => createComponent(SettingsTab, {}),
+  icon: () => createComponent(Cogs, {})
+}];
+
+// src/components/tabs.tsx
+var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<button type=button>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
+var Tabs = (props) => {
+  const styles = useStyles();
+  const {
+    state,
+    setState
+  } = useDevtoolsState();
+  const pipWindow = usePiPWindow();
+  const handleDetachment = () => {
+    pipWindow().requestPipWindow(`width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`);
+  };
+  const {
+    hoverUtils
+  } = useDrawContext();
+  return (() => {
+    var _el$ = _tmpl$7();
+    insert(_el$, createComponent(For, {
+      each: tabs,
+      children: (tab) => (() => {
+        var _el$2 = _tmpl$25();
+        _el$2.addEventListener("mouseleave", () => {
+          if (tab.id === "plugins") hoverUtils.leave();
+        });
+        _el$2.addEventListener("mouseenter", () => {
+          if (tab.id === "plugins") hoverUtils.enter();
+        });
+        _el$2.$$click = () => setState({
+          activeTab: tab.id
+        });
+        insert(_el$2, () => tab.icon());
+        effect(() => className(_el$2, clsx3(styles().tab, {
+          active: state().activeTab === tab.id
+        })));
+        return _el$2;
+      })()
+    }), null);
+    insert(_el$, (() => {
+      var _c$ = memo(() => pipWindow().pipWindow !== null);
+      return () => _c$() ? null : (() => {
+        var _el$3 = _tmpl$34(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+        _el$3.style.setProperty("margin-top", "auto");
+        _el$4.$$click = handleDetachment;
+        insert(_el$4, createComponent(PiP, {}));
+        _el$5.$$click = () => props.toggleOpen();
+        insert(_el$5, createComponent(X, {}));
+        effect((_p$) => {
+          var _v$ = clsx3(styles().tab, "detach"), _v$2 = clsx3(styles().tab, "close");
+          _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$3;
+      })();
+    })(), null);
+    effect(() => className(_el$, styles().tabContainer));
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
+var TabContent = () => {
+  const {
+    state
+  } = useDevtoolsState();
+  const styles = useStyles();
+  const component = createMemo(() => tabs.find((t) => t.id === state().activeTab)?.component || null);
+  return (() => {
+    var _el$ = _tmpl$8();
+    insert(_el$, () => component()?.());
+    effect(() => className(_el$, styles().tabContent));
+    return _el$;
+  })();
+};
+
+// src/devtools.tsx
+var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
+function DevTools() {
+  const {
+    settings
+  } = useDevtoolsSettings();
+  const {
+    setHeight
+  } = useHeight();
+  const {
+    persistOpen,
+    setPersistOpen
+  } = usePersistOpen();
+  const [rootEl, setRootEl] = createSignal();
+  const [isOpen, setIsOpen] = createSignal(settings().defaultOpen || persistOpen());
+  const pip = usePiPWindow();
+  let panelRef = void 0;
+  const [isResizing, setIsResizing] = createSignal(false);
+  const toggleOpen = () => {
+    if (pip().pipWindow) {
+      return;
+    }
+    const open = isOpen();
+    setIsOpen(!open);
+    setPersistOpen(!open);
+  };
+  const handleDragStart = (panelElement, startEvent) => {
+    if (startEvent.button !== 0) return;
+    if (!panelElement) return;
+    setIsResizing(true);
+    const dragInfo = {
+      originalHeight: panelElement.getBoundingClientRect().height,
+      pageY: startEvent.pageY
+    };
+    const run = (moveEvent) => {
+      const delta = dragInfo.pageY - moveEvent.pageY;
+      const newHeight = settings().panelLocation === "bottom" ? dragInfo.originalHeight + delta : dragInfo.originalHeight - delta;
+      setHeight(newHeight);
+      if (newHeight < 70) {
+        setIsOpen(false);
+      } else {
+        setIsOpen(true);
+      }
+    };
+    const unsub = () => {
+      setIsResizing(false);
+      document.removeEventListener("mousemove", run);
+      document.removeEventListener("mouseUp", unsub);
+    };
+    document.addEventListener("mousemove", run);
+    document.addEventListener("mouseup", unsub);
+  };
+  createEffect(() => {
+    if (isOpen()) {
+      const previousValue = rootEl()?.parentElement?.style.paddingBottom;
+      const run = () => {
+        if (!panelRef) return;
+        if (rootEl()?.parentElement) {
+          setRootEl((prev) => {
+            if (prev?.parentElement) ;
+            return prev;
+          });
+        }
+      };
+      run();
+      if (typeof window !== "undefined") {
+        (pip().pipWindow ?? window).addEventListener("resize", run);
+        return () => {
+          (pip().pipWindow ?? window).removeEventListener("resize", run);
+          if (rootEl()?.parentElement && typeof previousValue === "string") {
+            setRootEl((prev) => {
+              return prev;
+            });
+          }
+        };
+      }
+    } else {
+      if (rootEl()?.parentElement) {
+        setRootEl((prev) => {
+          if (prev?.parentElement) {
+            prev.parentElement.removeAttribute("style");
+          }
+          return prev;
+        });
+      }
+    }
+    return;
+  });
+  createEffect(() => {
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && isOpen()) {
+        toggleOpen();
+      }
+    });
+  });
+  useDisableTabbing(isOpen);
+  createEffect(() => {
+    if (rootEl()) {
+      const el = rootEl();
+      const fontSize = getComputedStyle(el).fontSize;
+      el?.style.setProperty("--tsrd-font-size", fontSize);
+    }
+  });
+  createEffect(() => {
+    const modifiers = settings().openHotkey.filter((key) => keyboardModifiers.includes(key));
+    const nonModifiers = settings().openHotkey.filter((key) => !keyboardModifiers.includes(key));
+    const allModifierCombinations = getAllPermutations(modifiers);
+    for (const combination of allModifierCombinations) {
+      const permutation = [...combination, ...nonModifiers];
+      createShortcut(permutation, () => {
+        toggleOpen();
+      });
+    }
+  });
+  createEffect(() => {
+    const openSourceHandler = (e) => {
+      const isShiftHeld = e.shiftKey;
+      const isCtrlHeld = e.ctrlKey || e.metaKey;
+      if (!isShiftHeld || !isCtrlHeld) return;
+      if (e.target instanceof HTMLElement) {
+        const dataSource = e.target.getAttribute("data-tsd-source");
+        window.getSelection()?.removeAllRanges();
+        if (dataSource) {
+          e.preventDefault();
+          e.stopPropagation();
+          fetch(`__TSD_HOST__://localhost:__TSD_PORT__/__tsd/open-source?source=${encodeURIComponent(dataSource)}`).catch(() => {
+          });
+        }
+      }
+    };
+    window.addEventListener("click", openSourceHandler);
+    onCleanup(() => {
+      window.removeEventListener("click", openSourceHandler);
+    });
+  });
+  const {
+    theme
+  } = useTheme();
+  return createComponent(ThemeContextProvider, {
+    get theme() {
+      return theme();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get mount() {
+          return (pip().pipWindow ?? window).document.body;
+        },
+        get children() {
+          var _el$ = _tmpl$9();
+          use(setRootEl, _el$);
+          setAttribute(_el$, "data-testid", TANSTACK_DEVTOOLS);
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return memo(() => pip().pipWindow !== null)() ? true : memo(() => !!settings().requireUrlFlag)() ? window.location.search.includes(settings().urlFlag) : true;
+            },
+            get children() {
+              return [createComponent(Trigger, {
+                isOpen,
+                setIsOpen: toggleOpen
+              }), createComponent(MainPanel, {
+                isResizing,
+                isOpen,
+                get children() {
+                  return createComponent(ContentPanel, {
+                    ref: (ref) => panelRef = ref,
+                    handleDragStart: (e) => handleDragStart(panelRef, e),
+                    get children() {
+                      return [createComponent(Tabs, {
+                        toggleOpen
+                      }), createComponent(TabContent, {})];
+                    }
+                  });
+                }
+              })];
+            }
+          }));
+          return _el$;
+        }
+      });
+    }
+  });
+}
+
+export { DevTools as default };