@tanstack/devtools 0.6.7 → 0.6.8

package/dist/devtools/DJF65R3Y.js

@@ -0,0 +1,1674 @@
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/CEHNENNI.js';
+import { createComponent, Portal, ssr, ssrAttribute, escape } 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$ = ['<button type="button" aria-label="Open TanStack Devtools"', ">", "</button>"];
+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 ssr(_tmpl$, ssrAttribute("class", escape(buttonStyle(), true), false), escape(createComponent(TanStackLogo, {})));
+};
+var _tmpl$2 = ["<div", ' style="', '"', ">", "</div>"];
+var MainPanel = (props) => {
+  const styles = useStyles();
+  const {
+    height
+  } = useHeight();
+  const {
+    settings
+  } = useDevtoolsSettings();
+  const pip = usePiPWindow();
+  return ssr(_tmpl$2, ssrAttribute("id", escape(TANSTACK_DEVTOOLS, true), false), "height:" + (pip().pipWindow ? "100vh" : escape(height(), true) + "px"), ssrAttribute("class", escape(clsx3(styles().devtoolsPanelContainer(settings().panelLocation, Boolean(pip().pipWindow)), styles().devtoolsPanelContainerAnimation(props.isOpen(), height()), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing)), true), false), escape(createComponent(DrawClientProvider, {
+    animationMs: 400,
+    get children() {
+      return props.children;
+    }
+  })));
+};
+var _tmpl$3 = ["<div", ">", "", "</div>"];
+var _tmpl$22 = ["<div", "></div>"];
+var ContentPanel = (props) => {
+  const styles = useStyles();
+  const {
+    settings
+  } = useDevtoolsSettings();
+  return ssr(_tmpl$3, ssrAttribute("class", escape(styles().devtoolsPanel, true), false), props.handleDragStart ? ssr(_tmpl$22, ssrAttribute("class", escape(styles().dragHandle(settings().panelLocation), true), false)) : escape(null), escape(props.children));
+};
+var _tmpl$4 = ["<div", ">", "", "", "</div>"];
+var _tmpl$23 = ["<div", ">", "</div>"];
+var _tmpl$32 = ["<div", ">", "", "</div>"];
+var _tmpl$42 = ["<div", "><div", ">", "</div>", "Final shortcut is: ", "</div>"];
+var _tmpl$5 = ["<div", "><div", ">", "", "</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."
+          }), ssr(_tmpl$4, ssrAttribute("class", escape(styles().settingsGroup, true), false), escape(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;
+            }
+          })), escape(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;
+            }
+          })), escape(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
+            })
+          })))];
+        }
+      }), 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."
+          }), ssr(_tmpl$32, ssrAttribute("class", escape(styles().settingsGroup, true), false), escape(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
+            })
+          })), escape(createComponent(Show, {
+            get when() {
+              return settings().requireUrlFlag;
+            },
+            get children() {
+              return ssr(_tmpl$23, ssrAttribute("class", escape(styles().conditionalSetting, true), false), escape(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
+                })
+              })));
+            }
+          })))];
+        }
+      }), 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."
+          }), ssr(_tmpl$42, ssrAttribute("class", escape(styles().settingsGroup, true), false), ssrAttribute("class", escape(styles().settingsModifiers, true), false), escape(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"
+              })];
+            }
+          })), escape(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]
+              });
+            }
+          })), escape(hotkey().join(" + ")))];
+        }
+      }), 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."
+          }), ssr(_tmpl$5, ssrAttribute("class", escape(styles().settingsGroup, true), false), ssrAttribute("class", escape(styles().settingRow, true), false), escape(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
+            })
+          })), escape(createComponent(Select, {
+            label: "Panel Position",
+            get value() {
+              return settings().panelLocation;
+            },
+            options: [{
+              label: "Top",
+              value: "top"
+            }, {
+              label: "Bottom",
+              value: "bottom"
+            }],
+            onChange: (value) => setSettings({
+              panelLocation: value
+            })
+          })))];
+        }
+      })];
+    }
+  });
+};
+var _tmpl$6 = ["<div", "><div", "><div", ">", "</div></div><div", "></div></div>"];
+var _tmpl$24 = ["<div", "><h3", "></h3></div>"];
+var PluginsTab = () => {
+  const {
+    plugins,
+    activePlugin,
+    setActivePlugin
+  } = usePlugins();
+  const {
+    expanded,
+    hoverUtils,
+    animationMs
+  } = useDrawContext();
+  useTheme();
+  createEffect(() => {
+    plugins()?.find((plugin) => plugin.id === activePlugin());
+  });
+  const styles = useStyles();
+  return ssr(_tmpl$6, ssrAttribute("class", escape(styles().pluginsTabPanel, true), false), ssrAttribute("class", escape(clsx3(styles().pluginsTabDraw(expanded()), {
+    [styles().pluginsTabDraw(expanded())]: expanded()
+  }, styles().pluginsTabDrawTransition(animationMs)), true), false), ssrAttribute("class", escape(clsx3(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs)), true), false), escape(createComponent(For, {
+    get each() {
+      return plugins();
+    },
+    children: (plugin) => {
+      createEffect(() => {
+      });
+      return ssr(_tmpl$24, ssrAttribute("class", escape(clsx3(styles().pluginName, {
+        active: activePlugin() === plugin.id
+      }), true), false), ssrAttribute("id", escape(PLUGIN_TITLE_CONTAINER_ID, true), false));
+    }
+  })), ssrAttribute("id", escape(PLUGIN_CONTAINER_ID, true), false) + ssrAttribute("class", escape(styles().pluginsTabContent, true), false));
+};
+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$7 = ["<div", ' style="', '"><div', ' style="', '">', " Preview</div>", "<div", ">", "</div><div", ">", "</div><div", ">", "</div></div>"];
+var _tmpl$25 = ["<img", ' alt="Preview"', ">"];
+var _tmpl$33 = ["<div", ' style="', '">No Image</div>'];
+var _tmpl$43 = ["<div", ">", "</div>"];
+var _tmpl$52 = ["<div>", "", "</div>"];
+var _tmpl$62 = ["<div", "><strong>Missing tags for ", ":</strong><ul", ">", "</ul></div>"];
+var _tmpl$72 = ["<li", ">", "</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 ssr(_tmpl$7, ssrAttribute("class", escape(styles().seoPreviewCard, true), false), "border-color:" + escape(props.color, true), ssrAttribute("class", escape(styles().seoPreviewHeader, true), false), "color:" + escape(props.color, true), escape(props.network), props.meta.image ? ssr(_tmpl$25, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$33, ssrAttribute("class", escape(styles().seoPreviewImage, true), false), "background:#222;color:#888;display:flex;align-items:center;justify-content:center;min-height:80px;width:100%"), ssrAttribute("class", escape(styles().seoPreviewTitle, true), false), escape(props.meta.title) || "No Title", ssrAttribute("class", escape(styles().seoPreviewDesc, true), false), escape(props.meta.description) || "No Description", ssrAttribute("class", escape(styles().seoPreviewUrl, true), false), escape(props.meta.url) || escape(window.location.href));
+}
+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."
+          }), ssr(_tmpl$43, ssrAttribute("class", escape(styles().seoPreviewSection, true), false), escape(createComponent(For, {
+            get each() {
+              return reports();
+            },
+            children: (report, i) => {
+              const social = SOCIALS[i()];
+              return ssr(_tmpl$52, escape(createComponent(SocialPreview, {
+                get meta() {
+                  return report.found;
+                },
+                get color() {
+                  return social.color;
+                },
+                get network() {
+                  return social.network;
+                }
+              })), report.missing.length > 0 ? escape(ssr(_tmpl$62, ssrAttribute("class", escape(styles().seoMissingTagsSection, true), false), escape(social?.network), ssrAttribute("class", escape(styles().seoMissingTagsList, true), false), escape(createComponent(For, {
+                get each() {
+                  return report.missing;
+                },
+                children: (tag) => ssr(_tmpl$72, ssrAttribute("class", escape(styles().seoMissingTag, true), false), escape(tag))
+              })))) : escape(null));
+            }
+          })))];
+        }
+      });
+    }
+  });
+};
+
+// 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$8 = ["<div", ">", "", "</div>"];
+var _tmpl$26 = ['<button type="button"', ">", "</button>"];
+var _tmpl$34 = ['<div style="', '"><button type="button"', ">", '</button><button type="button"', ">", "</button></div>"];
+var Tabs = (props) => {
+  const styles = useStyles();
+  const {
+    state,
+    setState
+  } = useDevtoolsState();
+  const pipWindow = usePiPWindow();
+  const {
+    hoverUtils
+  } = useDrawContext();
+  return ssr(_tmpl$8, ssrAttribute("class", escape(styles().tabContainer, true), false), escape(createComponent(For, {
+    each: tabs,
+    children: (tab) => ssr(_tmpl$26, ssrAttribute("class", escape(clsx3(styles().tab, {
+      active: state().activeTab === tab.id
+    }), true), false), escape(tab.icon()))
+  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$34, "margin-top:auto", ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
+};
+var _tmpl$9 = ["<div", ">", "</div>"];
+var TabContent = () => {
+  const {
+    state
+  } = useDevtoolsState();
+  const styles = useStyles();
+  const component = createMemo(() => tabs.find((t) => t.id === state().activeTab)?.component || null);
+  return ssr(_tmpl$9, ssrAttribute("class", escape(styles().tabContent, true), false), escape(component()?.()));
+};
+
+// src/devtools.tsx
+var _tmpl$10 = ["<div", ">", "</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;
+    return;
+  };
+  createEffect(() => {
+    if (isOpen()) {
+      const previousValue = rootEl()?.parentElement?.style.paddingBottom;
+      const run = () => {
+        return;
+      };
+      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() {
+          return ssr(_tmpl$10, ssrAttribute("data-testid", escape(TANSTACK_DEVTOOLS, true), false), escape(createComponent(Show, {
+            get when() {
+              return pip().pipWindow !== null ? true : 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, {
+                    handleDragStart: (e) => handleDragStart(panelRef, e),
+                    get children() {
+                      return [createComponent(Tabs, {
+                        toggleOpen
+                      }), createComponent(TabContent, {})];
+                    }
+                  });
+                }
+              })];
+            }
+          })));
+        }
+      });
+    }
+  });
+}
+
+export { DevTools as default };