@tanstack/devtools 0.6.7 → 0.6.9

package/dist/devtools/67YFWU65.js

@@ -0,0 +1,1976 @@
+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, 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;
+      & > img {
+        width: 56px;
+        height: 56px;
+        transition: all 0.3s ease;
+        outline-offset: 2px;
+        border-radius: ${border.radius.full};
+        outline: 2px solid transparent;
+      }
+      &:hide-until-hover {
+        opacity: 0;
+        pointer-events: none;
+        visibility: hidden;
+      }
+      &:hide-until-hover:hover {
+        opacity: 1;
+        pointer-events: auto;
+        visibility: visible;
+      }
+      & > img:focus-visible,
+      img:hover {
+        outline: 2px solid ${t(colors.black, colors.black)};
+      }
+    `,
+    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/tanstack-logo.png
+var tanstack_logo_default = "data:image/png;base64,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";
+
+// src/components/trigger.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button aria-label="Open TanStack Devtools"><img alt="TanStack Logo">`);
+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$2 = _el$.firstChild;
+    _el$.$$click = () => setIsOpen(!isOpen());
+    setAttribute(_el$2, "src", tanstack_logo_default);
+    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 };