@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/dist/styles/DevToolsModal.styles.js

@@ -1,120 +0,0 @@
-//#region src/styles/DevToolsModal.styles.ts
-const COLORS = {
-	light: {
-		primary: "#2563EB",
-		background: "#f8fafc",
-		surface: "#ffffff",
-		text: "#111827",
-		textLight: "#6b7280",
-		border: "rgba(148, 163, 184, 0.35)",
-		shadow: "rgba(37, 99, 235, 0.35)",
-		buttonText: "#f9fafb",
-		hoverBg: "rgba(148, 163, 184, 0.18)"
-	},
-	dark: {
-		primary: "#111827",
-		background: "#09090b",
-		surface: "#09090b",
-		text: "#e5e7eb",
-		textLight: "#9ca3af",
-		border: "rgba(63, 63, 70, 0.6)",
-		shadow: "rgba(0, 0, 0, 0.55)",
-		buttonText: "#e5e7eb",
-		hoverBg: "rgba(148, 163, 184, 0.12)"
-	}
-};
-const getStyles = (darkMode) => {
-	const theme = darkMode ? COLORS.dark : COLORS.light;
-	return {
-		floatingContainer: {
-			position: "fixed",
-			bottom: "24px",
-			right: "24px",
-			zIndex: 2147483647
-		},
-		floatingButton: {
-			width: "42px",
-			height: "42px",
-			borderRadius: "9999px",
-			border: "none",
-			background: theme.primary,
-			color: theme.buttonText,
-			cursor: "pointer",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			boxShadow: darkMode ? `0 10px 40px ${COLORS.dark.shadow}` : `0 10px 40px ${COLORS.light.shadow}`,
-			transition: "transform 0.2s ease, box-shadow 0.2s ease"
-		},
-		floatingButtonHover: {
-			transform: "translateY(-2px)",
-			boxShadow: darkMode ? "0 16px 50px rgba(17, 24, 39, 0.55)" : "0 16px 50px rgba(37, 99, 235, 0.45)"
-		},
-		backdrop: {
-			position: "fixed",
-			inset: 0,
-			background: "rgba(15, 23, 42, 0.45)",
-			backdropFilter: "blur(6px)",
-			animation: "fadeIn 0.12s ease",
-			zIndex: 2147483646
-		},
-		modal: {
-			position: "fixed",
-			top: "50%",
-			left: "50%",
-			transform: "translate(-50%, -50%)",
-			width: "min(960px, 90vw)",
-			height: "min(720px, 85vh)",
-			background: theme.background,
-			borderRadius: "16px",
-			border: `1px solid ${theme.border}`,
-			boxShadow: darkMode ? "0 32px 120px rgba(0, 0, 0, 0.55)" : "0 32px 120px rgba(15, 23, 42, 0.35)",
-			display: "flex",
-			flexDirection: "column",
-			overflow: "hidden",
-			animation: "slideIn 0.16s ease",
-			zIndex: 2147483647
-		},
-		dismissButton: {
-			alignSelf: "flex-end",
-			margin: "10px 12px 0 0",
-			background: "transparent",
-			border: "none",
-			color: theme.textLight,
-			cursor: "pointer",
-			padding: "6px",
-			borderRadius: "6px",
-			transition: "background 0.2s ease, color 0.2s ease"
-		},
-		dismissButtonHover: {
-			background: theme.hoverBg,
-			color: theme.text
-		},
-		modalContent: {
-			flex: 1,
-			overflow: "hidden",
-			position: "relative",
-			background: theme.background
-		}
-	};
-};
-const ANIMATION_STYLES = `
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-  @keyframes slideIn {
-    from {
-      opacity: 0;
-      transform: translate(-50%, -48%) scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: translate(-50%, -50%) scale(1);
-    }
-  }
-`;
-//#endregion
-export { ANIMATION_STYLES, getStyles };
-
-//# sourceMappingURL=DevToolsModal.styles.js.map

package/dist/styles/DevToolsModal.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DevToolsModal.styles.js","names":["CSSProperties","DevToolsModalStyles","floatingContainer","floatingButton","floatingButtonHover","backdrop","modal","dismissButton","dismissButtonHover","modalContent","COLORS","light","primary","background","surface","text","textLight","border","shadow","buttonText","hoverBg","dark","const","getStyles","darkMode","theme","position","bottom","right","zIndex","width","height","borderRadius","color","cursor","display","alignItems","justifyContent","boxShadow","transition","transform","inset","backdropFilter","animation","top","left","flexDirection","overflow","alignSelf","margin","padding","flex","ANIMATION_STYLES"],"sources":["../../src/styles/DevToolsModal.styles.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nexport interface DevToolsModalStyles {\n  floatingContainer: CSSProperties;\n  floatingButton: CSSProperties;\n  floatingButtonHover: CSSProperties;\n  backdrop: CSSProperties;\n  modal: CSSProperties;\n  dismissButton: CSSProperties;\n  dismissButtonHover: CSSProperties;\n  modalContent: CSSProperties;\n}\n\nconst COLORS = {\n  light: {\n    primary: \"#2563EB\",\n    background: \"#f8fafc\",\n    surface: \"#ffffff\",\n    text: \"#111827\",\n    textLight: \"#6b7280\",\n    border: \"rgba(148, 163, 184, 0.35)\",\n    shadow: \"rgba(37, 99, 235, 0.35)\",\n    buttonText: \"#f9fafb\",\n    hoverBg: \"rgba(148, 163, 184, 0.18)\",\n  },\n  dark: {\n    primary: \"#111827\",\n    background: \"#09090b\",\n    surface: \"#09090b\",\n    text: \"#e5e7eb\",\n    textLight: \"#9ca3af\",\n    border: \"rgba(63, 63, 70, 0.6)\",\n    shadow: \"rgba(0, 0, 0, 0.55)\",\n    buttonText: \"#e5e7eb\",\n    hoverBg: \"rgba(148, 163, 184, 0.12)\",\n  },\n} as const;\n\nexport const getStyles = (darkMode: boolean): DevToolsModalStyles => {\n  const theme = darkMode ? COLORS.dark : COLORS.light;\n\n  return {\n    floatingContainer: {\n      position: \"fixed\",\n      bottom: \"24px\",\n      right: \"24px\",\n      zIndex: 2147483647,\n    },\n    floatingButton: {\n      width: \"42px\",\n      height: \"42px\",\n      borderRadius: \"9999px\",\n      border: \"none\",\n      background: theme.primary,\n      color: theme.buttonText,\n      cursor: \"pointer\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      boxShadow: darkMode\n        ? `0 10px 40px ${COLORS.dark.shadow}`\n        : `0 10px 40px ${COLORS.light.shadow}`,\n      transition: \"transform 0.2s ease, box-shadow 0.2s ease\",\n    },\n    floatingButtonHover: {\n      transform: \"translateY(-2px)\",\n      boxShadow: darkMode\n        ? \"0 16px 50px rgba(17, 24, 39, 0.55)\"\n        : \"0 16px 50px rgba(37, 99, 235, 0.45)\",\n    },\n    backdrop: {\n      position: \"fixed\",\n      inset: 0,\n      background: \"rgba(15, 23, 42, 0.45)\",\n      backdropFilter: \"blur(6px)\",\n      animation: \"fadeIn 0.12s ease\",\n      zIndex: 2147483646,\n    },\n    modal: {\n      position: \"fixed\",\n      top: \"50%\",\n      left: \"50%\",\n      transform: \"translate(-50%, -50%)\",\n      width: \"min(960px, 90vw)\",\n      height: \"min(720px, 85vh)\",\n      background: theme.background,\n      borderRadius: \"16px\",\n      border: `1px solid ${theme.border}`,\n      boxShadow: darkMode\n        ? \"0 32px 120px rgba(0, 0, 0, 0.55)\"\n        : \"0 32px 120px rgba(15, 23, 42, 0.35)\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      overflow: \"hidden\",\n      animation: \"slideIn 0.16s ease\",\n      zIndex: 2147483647,\n    },\n    dismissButton: {\n      alignSelf: \"flex-end\",\n      margin: \"10px 12px 0 0\",\n      background: \"transparent\",\n      border: \"none\",\n      color: theme.textLight,\n      cursor: \"pointer\",\n      padding: \"6px\",\n      borderRadius: \"6px\",\n      transition: \"background 0.2s ease, color 0.2s ease\",\n    },\n    dismissButtonHover: {\n      background: theme.hoverBg,\n      color: theme.text,\n    },\n    modalContent: {\n      flex: 1,\n      overflow: \"hidden\",\n      position: \"relative\",\n      background: theme.background,\n    },\n  };\n};\n\nexport const ANIMATION_STYLES = `\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n  @keyframes slideIn {\n    from {\n      opacity: 0;\n      transform: translate(-50%, -48%) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n  }\n`;\n"],"mappings":";AAaA,MAAMU,SAAS;CACbC,OAAO;EACLC,SAAS;EACTC,YAAY;EACZC,SAAS;EACTC,MAAM;EACNC,WAAW;EACXC,QAAQ;EACRC,QAAQ;EACRC,YAAY;EACZC,SAAS;CACX;CACAC,MAAM;EACJT,SAAS;EACTC,YAAY;EACZC,SAAS;EACTC,MAAM;EACNC,WAAW;EACXC,QAAQ;EACRC,QAAQ;EACRC,YAAY;EACZC,SAAS;CACX;AACF;AAEA,MAAaG,aAAaC,aAA2C;CACnE,MAAMC,QAAQD,WAAWd,OAAOW,OAAOX,OAAOC;CAE9C,OAAO;EACLT,mBAAmB;GACjBwB,UAAU;GACVC,QAAQ;GACRC,OAAO;GACPC,QAAQ;EACV;EACA1B,gBAAgB;GACd2B,OAAO;GACPC,QAAQ;GACRC,cAAc;GACdf,QAAQ;GACRJ,YAAYY,MAAMb;GAClBqB,OAAOR,MAAMN;GACbe,QAAQ;GACRC,SAAS;GACTC,YAAY;GACZC,gBAAgB;GAChBC,WAAWd,WACP,eAAed,OAAOW,KAAKH,WAC3B,eAAeR,OAAOC,MAAMO;GAChCqB,YAAY;EACd;EACAnC,qBAAqB;GACnBoC,WAAW;GACXF,WAAWd,WACP,uCACA;EACN;EACAnB,UAAU;GACRqB,UAAU;GACVe,OAAO;GACP5B,YAAY;GACZ6B,gBAAgB;GAChBC,WAAW;GACXd,QAAQ;EACV;EACAvB,OAAO;GACLoB,UAAU;GACVkB,KAAK;GACLC,MAAM;GACNL,WAAW;GACXV,OAAO;GACPC,QAAQ;GACRlB,YAAYY,MAAMZ;GAClBmB,cAAc;GACdf,QAAQ,aAAaQ,MAAMR;GAC3BqB,WAAWd,WACP,qCACA;GACJW,SAAS;GACTW,eAAe;GACfC,UAAU;GACVJ,WAAW;GACXd,QAAQ;EACV;EACAtB,eAAe;GACbyC,WAAW;GACXC,QAAQ;GACRpC,YAAY;GACZI,QAAQ;GACRgB,OAAOR,MAAMT;GACbkB,QAAQ;GACRgB,SAAS;GACTlB,cAAc;GACdO,YAAY;EACd;EACA/B,oBAAoB;GAClBK,YAAYY,MAAML;GAClBa,OAAOR,MAAMV;EACf;EACAN,cAAc;GACZ0C,MAAM;GACNJ,UAAU;GACVrB,UAAU;GACVb,YAAYY,MAAMZ;EACpB;CACF;AACF;AAEA,MAAauC,mBAAmB"}

package/src/DevToolsFrame.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { FrameHost } from "./FrameHost";
-import { DEFAULT_FRAME_URL } from "./constants";
-
-export interface DevToolsFrameProps {
-  frameUrl?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  title?: string;
-}
-
-export const DevToolsFrame: React.FC<DevToolsFrameProps> = ({
-  frameUrl = DEFAULT_FRAME_URL,
-  className,
-  style,
-  title = "assistant-ui DevTools",
-}) => {
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const frameHostRef = useRef<FrameHost | null>(null);
-
-  const resolvedFrameUrl = useMemo(() => frameUrl, [frameUrl]);
-
-  const handleFrameLoad = useCallback(() => {
-    if (frameHostRef.current) {
-      frameHostRef.current.destroy();
-      frameHostRef.current = null;
-    }
-
-    if (iframeRef.current) {
-      frameHostRef.current = new FrameHost(iframeRef.current);
-    }
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      if (frameHostRef.current) {
-        frameHostRef.current.destroy();
-        frameHostRef.current = null;
-      }
-    };
-  }, []);
-
-  return (
-    <iframe
-      ref={iframeRef}
-      src={resolvedFrameUrl}
-      onLoad={handleFrameLoad}
-      className={className}
-      style={style}
-      title={title}
-    />
-  );
-};

package/src/DevToolsHost.ts

@@ -1,178 +0,0 @@
-import { DevToolsHooks } from "@assistant-ui/react";
-import {
-  sanitizeAndRedact,
-  sanitizeForMessage,
-  serializeModelContext,
-} from "./utils/serialization";
-
-interface FrameToHostMessage {
-  type: "subscription" | "clearEvents";
-  data: {
-    apiList?: boolean;
-    apis?: number[];
-    apiId?: number;
-  };
-}
-
-interface HostToFrameMessage {
-  type: "update";
-  data: {
-    apiList?: Array<{ apiId: number }>;
-    apis?: Array<{
-      apiId: number;
-      state: any;
-      events: any[];
-      modelContext?: any;
-      scopes?: any;
-    }>;
-  };
-}
-
-export class DevToolsHost {
-  private subscription: {
-    apiList: boolean;
-    apis: Set<number>;
-  } = {
-    apiList: false,
-    apis: new Set(),
-  };
-  private unsubscribe?: () => void;
-  private onSendMessage: (message: HostToFrameMessage) => void;
-
-  constructor(onSendMessage: (message: HostToFrameMessage) => void) {
-    this.onSendMessage = onSendMessage;
-    this.subscribeToDevTools();
-  }
-
-  onReceiveMessage(message: FrameToHostMessage) {
-    switch (message.type) {
-      case "subscription":
-        this.handleSubscription(message.data);
-        break;
-      case "clearEvents":
-        if (typeof message.data.apiId === "number") {
-          DevToolsHooks.clearEventLogs(message.data.apiId);
-          // The subscription will automatically trigger an update
-        }
-        break;
-    }
-  }
-
-  private handleSubscription(data: FrameToHostMessage["data"]) {
-    const prevApiList = this.subscription.apiList;
-    const prevApis = new Set(this.subscription.apis);
-
-    this.subscription.apiList = data.apiList || false;
-    this.subscription.apis = new Set(data.apis);
-
-    // Only send update if subscription actually changed
-    const apisChanged =
-      prevApis.size !== this.subscription.apis.size ||
-      [...this.subscription.apis].some((id) => !prevApis.has(id));
-
-    if (prevApiList !== this.subscription.apiList || apisChanged) {
-      this.sendUpdate();
-    }
-  }
-
-  private subscribeToDevTools() {
-    this.unsubscribe = DevToolsHooks.subscribe(() => {
-      this.sendUpdate();
-    });
-  }
-
-  private sendUpdate() {
-    const update: HostToFrameMessage = {
-      type: "update",
-      data: {},
-    };
-
-    const allApis = DevToolsHooks.getApis();
-    for (const subscriptionApiId of this.subscription.apis) {
-      if (!allApis.has(subscriptionApiId)) {
-        this.subscription.apis.delete(subscriptionApiId);
-      }
-    }
-
-    if (this.subscription.apiList) {
-      update.data.apiList = [...allApis.keys()].map((apiId) => ({ apiId }));
-
-      if (this.subscription.apis.size === 0 && allApis.size > 0) {
-        this.subscription.apis = new Set([allApis.keys().next().value!]);
-      }
-    }
-
-    if (this.subscription.apis.size > 0) {
-      update.data.apis = [];
-
-      for (const apiId of this.subscription.apis) {
-        const apiEntry = allApis.get(apiId);
-        if (apiEntry) {
-          // Collect root-scope state plus the identity and method catalog of
-          // every accessor (root and derived) for the scope graph.
-          const state: Record<string, unknown> = {};
-          const scopes: Array<{
-            name: string;
-            source: string | null;
-            query: Record<string, unknown> | null;
-            methods: string[];
-          }> = [];
-          if (apiEntry.api) {
-            for (const [name, scope] of Object.entries(apiEntry.api)) {
-              if (typeof scope === "function" && "source" in scope) {
-                let methods: string[] = [];
-                try {
-                  const scopeValue = scope();
-                  if (scopeValue && typeof scopeValue === "object") {
-                    methods = Object.keys(scopeValue).filter(
-                      (key) =>
-                        typeof (scopeValue as Record<string, unknown>)[key] ===
-                        "function",
-                    );
-                  }
-                  if (scope.source === "root") {
-                    state[name] = scopeValue?.getState?.() ?? scopeValue;
-                  }
-                } catch {
-                  // scope() may throw (derived scopes before the client is
-                  // mounted, or a broken root scope implementation).
-                }
-                scopes.push({
-                  name,
-                  source: scope.source,
-                  query: scope.query,
-                  methods,
-                });
-              }
-            }
-          }
-
-          // Extract model context from thread runtime
-          const modelContext = serializeModelContext(
-            apiEntry.api?.thread?.().getModelContext(),
-          );
-
-          update.data.apis.push({
-            apiId,
-            state: sanitizeForMessage(state),
-            events: sanitizeForMessage(apiEntry.logs) as unknown[],
-            modelContext: modelContext,
-            scopes: sanitizeAndRedact(scopes),
-          });
-        }
-      }
-    }
-
-    if (Object.keys(update.data).length === 0) {
-      return;
-    }
-
-    this.onSendMessage(update);
-  }
-
-  destroy() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  }
-}

package/src/ExtensionHost.ts

@@ -1,57 +0,0 @@
-import { DevToolsHost } from "./DevToolsHost";
-
-export class ExtensionHost {
-  private devToolsHost: DevToolsHost;
-  private messageListener: (event: MessageEvent) => void;
-
-  constructor() {
-    // Create DevToolsHost with callback to send messages through extension
-    this.devToolsHost = new DevToolsHost((message) => {
-      console.log("[ExtensionHost] Sending message to iframe:", message);
-      window.postMessage(
-        {
-          source: "assistant-ui-devtools-page",
-          payload: message,
-        },
-        "*",
-      );
-    });
-
-    // Setup listener to forward messages from extension to DevToolsHost
-    this.messageListener = (event: MessageEvent) => {
-      if (event.source !== window) return;
-
-      // Log ALL messages to see what's coming through
-      if (event.data.source === "assistant-ui-devtools-iframe") {
-        console.log("[ExtensionHost] Received message from iframe:", {
-          source: event.data.source,
-          payload: event.data.payload,
-          fullData: event.data,
-        });
-        this.devToolsHost.onReceiveMessage(event.data.payload);
-      }
-    };
-
-    window.addEventListener("message", this.messageListener);
-
-    // Announce that a new host has connected
-    // This tells the iframe to re-send its subscription
-    setTimeout(() => {
-      console.log("[ExtensionHost] Announcing connection to iframe");
-      window.postMessage(
-        {
-          source: "assistant-ui-devtools-page",
-          payload: {
-            type: "host-connected",
-          },
-        },
-        "*",
-      );
-    }, 100);
-  }
-
-  destroy() {
-    window.removeEventListener("message", this.messageListener);
-    this.devToolsHost.destroy();
-  }
-}

package/src/FrameClient.ts

@@ -1,99 +0,0 @@
-interface ApiData {
-  apiId: number;
-  state: any;
-  events: any[];
-  modelContext?: any;
-  scopes?: any;
-}
-
-interface UpdateMessage {
-  type: "update";
-  data: {
-    apiList?: Array<{ apiId: number }>;
-    apis?: ApiData[];
-  };
-}
-
-interface HostConnectedMessage {
-  type: "host-connected";
-}
-
-type UpdateListener = (data: {
-  apiList?: Array<{ apiId: number }>;
-  apis?: ApiData[];
-}) => void;
-
-export class FrameClient {
-  private listeners = new Set<UpdateListener>();
-  private connectionListeners = new Set<() => void>();
-  private lastUpdate: {
-    apiList?: Array<{ apiId: number }>;
-    apis?: ApiData[];
-  } = {};
-
-  constructor() {
-    this.setupMessageListener();
-  }
-
-  private setupMessageListener() {
-    window.addEventListener("message", (event) => {
-      const message = event.data as UpdateMessage | HostConnectedMessage;
-
-      if (message.type === "update") {
-        this.lastUpdate = message.data;
-        this.notifyListeners(message.data);
-      } else if (message.type === "host-connected") {
-        // Host has reconnected (page refresh), notify listeners to re-subscribe
-        this.connectionListeners.forEach((listener) => listener());
-      }
-    });
-  }
-
-  onHostConnected(listener: () => void): () => void {
-    this.connectionListeners.add(listener);
-    return () => {
-      this.connectionListeners.delete(listener);
-    };
-  }
-
-  subscribe(listener: UpdateListener): () => void {
-    this.listeners.add(listener);
-
-    // Send the last update to the new listener
-    if (this.lastUpdate.apiList || this.lastUpdate.apis) {
-      listener(this.lastUpdate);
-    }
-
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  setSubscription(options: { apiList?: boolean; apis?: number[] }) {
-    window.parent.postMessage(
-      {
-        type: "subscription",
-        data: options,
-      },
-      "*",
-    );
-  }
-
-  clearEvents(apiId: number) {
-    window.parent.postMessage(
-      {
-        type: "clearEvents",
-        data: { apiId },
-      },
-      "*",
-    );
-  }
-
-  private notifyListeners(data: UpdateMessage["data"]) {
-    this.listeners.forEach((listener) => listener(data));
-  }
-
-  getLastUpdate() {
-    return this.lastUpdate;
-  }
-}

package/src/FrameHost.ts

@@ -1,31 +0,0 @@
-import { DevToolsHost } from "./DevToolsHost";
-
-export class FrameHost {
-  private frame: HTMLIFrameElement;
-  private devToolsHost: DevToolsHost;
-  private messageListener: (event: MessageEvent) => void;
-
-  constructor(frame: HTMLIFrameElement) {
-    this.frame = frame;
-
-    // Create DevToolsHost with callback to send messages to iframe
-    this.devToolsHost = new DevToolsHost((message) => {
-      if (this.frame.contentWindow) {
-        this.frame.contentWindow.postMessage(message, "*");
-      }
-    });
-
-    // Setup listener to forward messages from iframe to DevToolsHost
-    this.messageListener = (event: MessageEvent) => {
-      if (event.source !== this.frame.contentWindow) return;
-      this.devToolsHost.onReceiveMessage(event.data);
-    };
-
-    window.addEventListener("message", this.messageListener);
-  }
-
-  destroy() {
-    window.removeEventListener("message", this.messageListener);
-    this.devToolsHost.destroy();
-  }
-}

package/src/constants.ts

@@ -1,2 +0,0 @@
-export const DEFAULT_FRAME_URL = "https://devtools-frame.assistant-ui.com";
-export const LOCAL_FRAME_URL = "http://localhost:3010";

package/src/styles/DevToolsModal.styles.ts

@@ -1,137 +0,0 @@
-import type { CSSProperties } from "react";
-
-export interface DevToolsModalStyles {
-  floatingContainer: CSSProperties;
-  floatingButton: CSSProperties;
-  floatingButtonHover: CSSProperties;
-  backdrop: CSSProperties;
-  modal: CSSProperties;
-  dismissButton: CSSProperties;
-  dismissButtonHover: CSSProperties;
-  modalContent: CSSProperties;
-}
-
-const COLORS = {
-  light: {
-    primary: "#2563EB",
-    background: "#f8fafc",
-    surface: "#ffffff",
-    text: "#111827",
-    textLight: "#6b7280",
-    border: "rgba(148, 163, 184, 0.35)",
-    shadow: "rgba(37, 99, 235, 0.35)",
-    buttonText: "#f9fafb",
-    hoverBg: "rgba(148, 163, 184, 0.18)",
-  },
-  dark: {
-    primary: "#111827",
-    background: "#09090b",
-    surface: "#09090b",
-    text: "#e5e7eb",
-    textLight: "#9ca3af",
-    border: "rgba(63, 63, 70, 0.6)",
-    shadow: "rgba(0, 0, 0, 0.55)",
-    buttonText: "#e5e7eb",
-    hoverBg: "rgba(148, 163, 184, 0.12)",
-  },
-} as const;
-
-export const getStyles = (darkMode: boolean): DevToolsModalStyles => {
-  const theme = darkMode ? COLORS.dark : COLORS.light;
-
-  return {
-    floatingContainer: {
-      position: "fixed",
-      bottom: "24px",
-      right: "24px",
-      zIndex: 2147483647,
-    },
-    floatingButton: {
-      width: "42px",
-      height: "42px",
-      borderRadius: "9999px",
-      border: "none",
-      background: theme.primary,
-      color: theme.buttonText,
-      cursor: "pointer",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      boxShadow: darkMode
-        ? `0 10px 40px ${COLORS.dark.shadow}`
-        : `0 10px 40px ${COLORS.light.shadow}`,
-      transition: "transform 0.2s ease, box-shadow 0.2s ease",
-    },
-    floatingButtonHover: {
-      transform: "translateY(-2px)",
-      boxShadow: darkMode
-        ? "0 16px 50px rgba(17, 24, 39, 0.55)"
-        : "0 16px 50px rgba(37, 99, 235, 0.45)",
-    },
-    backdrop: {
-      position: "fixed",
-      inset: 0,
-      background: "rgba(15, 23, 42, 0.45)",
-      backdropFilter: "blur(6px)",
-      animation: "fadeIn 0.12s ease",
-      zIndex: 2147483646,
-    },
-    modal: {
-      position: "fixed",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      width: "min(960px, 90vw)",
-      height: "min(720px, 85vh)",
-      background: theme.background,
-      borderRadius: "16px",
-      border: `1px solid ${theme.border}`,
-      boxShadow: darkMode
-        ? "0 32px 120px rgba(0, 0, 0, 0.55)"
-        : "0 32px 120px rgba(15, 23, 42, 0.35)",
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden",
-      animation: "slideIn 0.16s ease",
-      zIndex: 2147483647,
-    },
-    dismissButton: {
-      alignSelf: "flex-end",
-      margin: "10px 12px 0 0",
-      background: "transparent",
-      border: "none",
-      color: theme.textLight,
-      cursor: "pointer",
-      padding: "6px",
-      borderRadius: "6px",
-      transition: "background 0.2s ease, color 0.2s ease",
-    },
-    dismissButtonHover: {
-      background: theme.hoverBg,
-      color: theme.text,
-    },
-    modalContent: {
-      flex: 1,
-      overflow: "hidden",
-      position: "relative",
-      background: theme.background,
-    },
-  };
-};
-
-export const ANIMATION_STYLES = `
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-  @keyframes slideIn {
-    from {
-      opacity: 0;
-      transform: translate(-50%, -48%) scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: translate(-50%, -50%) scale(1);
-    }
-  }
-`;