@blade-hq/agent-kit 0.4.1 → 0.4.5

package/dist/react/devtools/bridge-devtools/index.js

@@ -0,0 +1,692 @@
+// src/react/devtools/bridge-devtools/mount.tsx
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+// src/react/devtools/bridge-devtools/BridgeDevtoolsFab.tsx
+import { animate, motion, useMotionValue } from "motion/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useShallow } from "zustand/react/shallow";
+
+// src/react/devtools/bridge-devtools/store.ts
+import { create } from "zustand";
+var MAX_EVENTS = 500;
+function buildId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `bev-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+var useBridgeDevtoolsStore = create()((set) => ({
+  events: [],
+  iframes: {},
+  record: (input) => set((state) => {
+    const record = {
+      id: buildId(),
+      ts: Date.now(),
+      ...input
+    };
+    const events = state.events.length >= MAX_EVENTS ? [...state.events.slice(state.events.length - MAX_EVENTS + 1), record] : [...state.events, record];
+    return { events };
+  }),
+  clear: () => set({ events: [] }),
+  registerIframe: (entry) => {
+    set((state) => ({ iframes: { ...state.iframes, [entry.key]: entry } }));
+    return () => {
+      set((state) => {
+        if (!(entry.key in state.iframes)) return state;
+        const next = { ...state.iframes };
+        delete next[entry.key];
+        return { iframes: next };
+      });
+    };
+  }
+}));
+
+// src/react/devtools/bridge-devtools/tap.ts
+function isDev() {
+  return import.meta.env?.DEV === true;
+}
+var PENDING_EVENT_LIMIT = 500;
+var pendingEvents = [];
+function tapBridgeEvent(event) {
+  if (!isDev()) return;
+  const hook = globalThis.__bladeBridgeDevtools;
+  if (hook) {
+    hook.record(event);
+    return;
+  }
+  if (pendingEvents.length >= PENDING_EVENT_LIMIT) {
+    pendingEvents.shift();
+  }
+  pendingEvents.push(event);
+}
+function flushPendingBridgeEvents() {
+  const hook = globalThis.__bladeBridgeDevtools;
+  if (!hook) return;
+  for (const event of pendingEvents) {
+    hook.record(event);
+  }
+  pendingEvents.length = 0;
+}
+var pendingRegistrations = [];
+function registerBridgeIframe(entry) {
+  if (!isDev()) return () => {
+  };
+  const hook = globalThis.__bladeBridgeDevtools;
+  if (hook) {
+    return hook.registerIframe(entry);
+  }
+  const pending = { entry, unregister: null };
+  pendingRegistrations.push(pending);
+  return () => {
+    const idx = pendingRegistrations.indexOf(pending);
+    if (idx >= 0) pendingRegistrations.splice(idx, 1);
+    pending.unregister?.();
+  };
+}
+function flushPendingIframeRegistrations() {
+  const hook = globalThis.__bladeBridgeDevtools;
+  if (!hook) return;
+  for (const pending of pendingRegistrations) {
+    pending.unregister = hook.registerIframe(pending.entry);
+  }
+  pendingRegistrations.length = 0;
+}
+
+// src/react/devtools/bridge-devtools/BridgeDevtoolsFab.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FAB_HEIGHT = 44;
+var FAB_PEEK = 18;
+var FAB_POS_STORAGE = "blade.bridge-devtools-fab.pos";
+var FAB_SPRING = { type: "spring", stiffness: 380, damping: 32 };
+function clamp(v, min, max) {
+  return Math.min(Math.max(v, min), max);
+}
+function loadFabPos() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(FAB_POS_STORAGE);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed?.x === "number" && typeof parsed?.y === "number") {
+      return { x: parsed.x, y: parsed.y };
+    }
+  } catch {
+  }
+  return null;
+}
+function saveFabPos(pos) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(FAB_POS_STORAGE, JSON.stringify(pos));
+  } catch {
+  }
+}
+function snapXToEdge(currentX, btnW) {
+  const maxX = Math.max(0, window.innerWidth - btnW);
+  const center = currentX + btnW / 2;
+  return center < window.innerWidth / 2 ? 0 : maxX;
+}
+function hiddenXFor(snappedX, btnW) {
+  const maxX = Math.max(0, window.innerWidth - btnW);
+  const offset = Math.max(0, btnW - FAB_PEEK);
+  return snappedX <= maxX / 2 ? snappedX - offset : snappedX + offset;
+}
+function defaultFabPos() {
+  if (typeof window === "undefined") return { x: 0, y: 0 };
+  return {
+    x: window.innerWidth,
+    y: window.innerHeight - FAB_HEIGHT - 80
+  };
+}
+var DIRECTION_LABEL = {
+  "host-to-agent": "host \u2192 agent",
+  "agent-to-host": "agent \u2192 host",
+  "host-to-iframe": "host \u2192 iframe",
+  "iframe-to-host": "iframe \u2192 host"
+};
+var ALL_DIRECTIONS = [
+  "host-to-agent",
+  "agent-to-host",
+  "host-to-iframe",
+  "iframe-to-host"
+];
+function safeStringify(value, indent) {
+  const seen = /* @__PURE__ */ new WeakSet();
+  try {
+    return JSON.stringify(
+      value,
+      (_k, v) => {
+        if (typeof v === "bigint") return `${v.toString()}n`;
+        if (typeof v === "object" && v !== null) {
+          if (seen.has(v)) return "[Circular]";
+          seen.add(v);
+        }
+        return v;
+      },
+      indent
+    ) ?? String(value);
+  } catch (err) {
+    return `[unserializable: ${err.message}]`;
+  }
+}
+function formatTime(ts) {
+  const d = new Date(ts);
+  const pad = (n) => n.toString().padStart(2, "0");
+  const ms = d.getMilliseconds().toString().padStart(3, "0");
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${ms}`;
+}
+function filterEvents(events, tab, search, enabledDirections) {
+  const needle = search.trim().toLowerCase();
+  return events.filter((e) => {
+    if (tab === "agent" && e.side !== "agent") return false;
+    if (tab !== "agent" && tab !== "host" && e.iframeKey !== tab) return false;
+    if (tab === "host" && e.side !== "host") return false;
+    if (!enabledDirections.has(e.direction)) return false;
+    if (needle) {
+      const hay = `${e.action} ${safeStringify(e.payload ?? "")} ${e.note ?? ""}`.toLowerCase();
+      if (!hay.includes(needle)) return false;
+    }
+    return true;
+  });
+}
+function downloadJson(filename, data) {
+  const blob = new Blob([safeStringify(data, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function BridgeDevtoolsFab() {
+  const [open, setOpen] = useState(false);
+  const [tab, setTab] = useState("agent");
+  const [search, setSearch] = useState("");
+  const [enabled, setEnabled] = useState(
+    () => new Set(ALL_DIRECTIONS)
+  );
+  const [expandedId, setExpandedId] = useState(null);
+  const events = useBridgeDevtoolsStore((s) => s.events);
+  const iframes = useBridgeDevtoolsStore(useShallow((s) => Object.values(s.iframes)));
+  const clear = useBridgeDevtoolsStore((s) => s.clear);
+  const filtered = useMemo(
+    () => filterEvents(events, tab, search, enabled),
+    [events, tab, search, enabled]
+  );
+  const counts = useMemo(() => {
+    const c = { agent: 0, host: 0 };
+    const perIframe = {};
+    for (const e of events) {
+      if (e.side === "agent") c.agent++;
+      else c.host++;
+      if (e.iframeKey) perIframe[e.iframeKey] = (perIframe[e.iframeKey] ?? 0) + 1;
+    }
+    return { ...c, perIframe };
+  }, [events]);
+  const rejectedCount = events.filter((e) => e.rejected).length;
+  const initialPos = useMemo(() => {
+    const saved = loadFabPos() ?? defaultFabPos();
+    if (typeof window === "undefined") return saved;
+    return {
+      x: saved.x,
+      y: clamp(saved.y, 0, Math.max(0, window.innerHeight - FAB_HEIGHT))
+    };
+  }, []);
+  const [snapped, setSnapped] = useState(initialPos);
+  const [btnW, setBtnW] = useState(FAB_HEIGHT);
+  const [hover, setHover] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const x = useMotionValue(initialPos.x);
+  const y = useMotionValue(initialPos.y);
+  const btnRef = useRef(null);
+  useEffect(() => {
+    const el = btnRef.current;
+    if (!el) return;
+    const update = () => setBtnW(el.offsetWidth || FAB_HEIGHT);
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const visible = open || hover || dragging;
+  useEffect(() => {
+    if (dragging) return;
+    const edgeX = snapXToEdge(snapped.x, btnW);
+    const targetX = visible ? edgeX : hiddenXFor(edgeX, btnW);
+    const ctrl = animate(x, targetX, FAB_SPRING);
+    return () => ctrl.stop();
+  }, [visible, snapped.x, btnW, dragging, x]);
+  useEffect(() => {
+    const onResize = () => {
+      const newX = snapXToEdge(snapped.x, btnW);
+      const newY = clamp(snapped.y, 0, window.innerHeight - FAB_HEIGHT);
+      if (newX !== snapped.x || newY !== snapped.y) {
+        setSnapped({ x: newX, y: newY });
+        saveFabPos({ x: newX, y: newY });
+        y.set(newY);
+      }
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [snapped.x, snapped.y, btnW, y]);
+  const handleDragEnd = (_, _info) => {
+    const newX = snapXToEdge(x.get(), btnW);
+    const newY = clamp(y.get(), 0, window.innerHeight - FAB_HEIGHT);
+    setSnapped({ x: newX, y: newY });
+    saveFabPos({ x: newX, y: newY });
+    setDragging(false);
+    animate(x, newX, FAB_SPRING);
+    animate(y, newY, FAB_SPRING);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        style: {
+          x,
+          y,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          zIndex: 9998,
+          touchAction: "none"
+        },
+        drag: true,
+        dragMomentum: false,
+        dragElastic: 0.05,
+        onDragStart: () => setDragging(true),
+        onDragEnd: handleDragEnd,
+        onPointerEnter: () => setHover(true),
+        onPointerLeave: () => setHover(false),
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: btnRef,
+            type: "button",
+            onClick: () => setOpen((v) => !v),
+            className: "inline-flex h-11 min-w-[44px] cursor-grab items-center justify-center gap-1 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--background))]/95 px-3 text-sm font-medium text-[hsl(var(--foreground))] shadow-xl backdrop-blur hover:bg-[hsl(var(--accent))] active:cursor-grabbing",
+            title: "Bridge \u4E8B\u4EF6\u8C03\u8BD5\uFF08\u53EF\u62D6\u52A8\u5230\u4EFB\u610F\u8FB9\u7F18\uFF09",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-base", children: "\u{1F309}" }),
+              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: events.length }),
+              rejectedCount > 0 ? /* @__PURE__ */ jsx("span", { className: "rounded bg-red-500/15 px-1 text-xs text-red-500 tabular-nums", children: rejectedCount }) : null
+            ]
+          }
+        )
+      }
+    ),
+    open && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        BridgeDevtoolsPanel,
+        {
+          onClose: () => setOpen(false),
+          tab,
+          setTab,
+          search,
+          setSearch,
+          enabled,
+          setEnabled,
+          events: filtered,
+          totalEvents: events,
+          expandedId,
+          setExpandedId,
+          counts,
+          iframes,
+          onClear: clear
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+function BridgeDevtoolsPanel(props) {
+  const {
+    onClose,
+    tab,
+    setTab,
+    search,
+    setSearch,
+    enabled,
+    setEnabled,
+    events,
+    totalEvents,
+    expandedId,
+    setExpandedId,
+    counts,
+    iframes,
+    onClear
+  } = props;
+  const toggleDirection = (d) => {
+    const next = new Set(enabled);
+    if (next.has(d)) next.delete(d);
+    else next.add(d);
+    setEnabled(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[9999] flex items-end justify-end", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "\u5173\u95ED\u8C03\u8BD5\u9762\u677F",
+        className: "absolute inset-0 bg-black/20",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative flex h-[85vh] w-full max-w-[720px] flex-col overflow-hidden rounded-t-xl border border-[hsl(var(--border))] bg-[hsl(var(--background))] shadow-2xl",
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between border-b border-[hsl(var(--border))] px-4 py-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold", children: [
+              /* @__PURE__ */ jsx("span", { children: "\u{1F309} Bridge \u4E8B\u4EF6\u8C03\u8BD5" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: [
+                totalEvents.length,
+                " / 500"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded px-2 py-1 text-xs hover:bg-[hsl(var(--accent))]",
+                  onClick: () => downloadJson(`bridge-events-${Date.now()}.json`, totalEvents),
+                  children: "\u5BFC\u51FA JSON"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded px-2 py-1 text-xs hover:bg-[hsl(var(--accent))]",
+                  onClick: onClear,
+                  children: "\u6E05\u7A7A"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded px-2 py-1 text-xs hover:bg-[hsl(var(--accent))]",
+                  onClick: onClose,
+                  children: "\u2715"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("nav", { className: "flex items-center gap-1 overflow-x-auto border-b border-[hsl(var(--border))] px-3 py-2 text-xs", children: [
+            /* @__PURE__ */ jsxs(TabButton, { active: tab === "agent", onClick: () => setTab("agent"), children: [
+              "Agent \u4FA7 (",
+              counts.agent,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxs(TabButton, { active: tab === "host", onClick: () => setTab("host"), children: [
+              "Host \u5168\u90E8 (",
+              counts.host,
+              ")"
+            ] }),
+            iframes.map((f) => /* @__PURE__ */ jsxs(
+              TabButton,
+              {
+                active: tab === f.key,
+                onClick: () => setTab(f.key),
+                title: f.label,
+                children: [
+                  "\u{1F4C4} ",
+                  f.label.length > 16 ? `${f.label.slice(0, 16)}\u2026` : f.label,
+                  " (",
+                  counts.perIframe[f.key] ?? 0,
+                  ")"
+                ]
+              },
+              f.key
+            ))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-[hsl(var(--border))] px-3 py-2 text-xs", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                placeholder: "\u641C\u7D22 action / payload / note\u2026",
+                className: "min-w-[160px] flex-1 rounded border border-[hsl(var(--border))] bg-transparent px-2 py-1"
+              }
+            ),
+            ALL_DIRECTIONS.map((d) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: enabled.has(d),
+                  onChange: () => toggleDirection(d)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: DIRECTION_LABEL[d] })
+            ] }, d))
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: events.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-6 text-center text-sm text-[hsl(var(--muted-foreground))]", children: "\u65E0\u5339\u914D\u4E8B\u4EF6" }) : /* @__PURE__ */ jsx("ul", { className: "divide-y divide-[hsl(var(--border))]", children: events.map((e) => /* @__PURE__ */ jsx(
+            EventRow,
+            {
+              event: e,
+              expanded: expandedId === e.id,
+              onToggle: () => setExpandedId(expandedId === e.id ? null : e.id)
+            },
+            e.id
+          )) }) }),
+          /* @__PURE__ */ jsx(ManualSendBar, { tab, iframes })
+        ]
+      }
+    )
+  ] });
+}
+function TabButton(props) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: props.onClick,
+      title: props.title,
+      className: `whitespace-nowrap rounded px-2 py-1 ${props.active ? "bg-[hsl(var(--accent))] font-semibold" : "hover:bg-[hsl(var(--accent))]/50"}`,
+      children: props.children
+    }
+  );
+}
+function EventRow({
+  event,
+  expanded,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: `px-3 py-1.5 text-xs ${event.rejected ? "bg-red-500/5" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onToggle,
+            className: "flex w-full items-center gap-2 text-left",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-[90px] font-mono tabular-nums text-[hsl(var(--muted-foreground))]", children: formatTime(event.ts) }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `w-[120px] font-mono ${event.side === "agent" ? "text-blue-500" : "text-purple-500"}`,
+                  children: DIRECTION_LABEL[event.direction]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate font-semibold", children: event.action }),
+              event.rejected ? /* @__PURE__ */ jsx("span", { className: "rounded bg-red-500/20 px-1.5 text-[10px] text-red-500", children: "rejected" }) : null,
+              /* @__PURE__ */ jsx("span", { className: "text-[hsl(var(--muted-foreground))]", children: expanded ? "\u25BC" : "\u25B6" })
+            ]
+          }
+        ),
+        expanded ? /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-1 pl-[90px] font-mono", children: [
+          event.note ? /* @__PURE__ */ jsxs("div", { className: "text-red-500", children: [
+            "note: ",
+            event.note
+          ] }) : null,
+          event.iframeLabel ? /* @__PURE__ */ jsxs("div", { className: "text-[hsl(var(--muted-foreground))]", children: [
+            "iframe: ",
+            event.iframeLabel
+          ] }) : null,
+          event.meta ? /* @__PURE__ */ jsxs("pre", { className: "whitespace-pre-wrap break-words text-[hsl(var(--muted-foreground))]", children: [
+            "meta: ",
+            safeStringify(event.meta, 2)
+          ] }) : null,
+          /* @__PURE__ */ jsxs("pre", { className: "whitespace-pre-wrap break-words", children: [
+            "payload: ",
+            safeStringify(event.payload, 2)
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+function ManualSendBar({
+  tab,
+  iframes
+}) {
+  const [action, setAction] = useState("");
+  const [payloadText, setPayloadText] = useState("{}");
+  const [error, setError] = useState(null);
+  const [targetKey, setTargetKey] = useState("");
+  const effectiveSide = tab === "agent" ? "agent" : "host";
+  const send = () => {
+    setError(null);
+    let payload;
+    try {
+      payload = payloadText.trim() ? JSON.parse(payloadText) : void 0;
+    } catch (err) {
+      setError(`payload JSON \u89E3\u6790\u5931\u8D25: ${err.message}`);
+      return;
+    }
+    if (!action.trim()) {
+      setError("action \u4E0D\u80FD\u4E3A\u7A7A");
+      return;
+    }
+    if (effectiveSide === "agent") {
+      window.postMessage(
+        {
+          __bladeBridge: true,
+          direction: "host-to-agent",
+          action,
+          payload,
+          meta: { timestamp: Date.now(), injectedBy: "devtools" }
+        },
+        "*"
+      );
+      return;
+    }
+    const target = tab !== "host" && tab !== "agent" ? tab : targetKey;
+    const entry = iframes.find((f) => f.key === target);
+    if (!entry) {
+      setError("\u8BF7\u9009\u62E9\u76EE\u6807 iframe");
+      return;
+    }
+    const win = entry.getContentWindow();
+    if (!win) {
+      setError("\u76EE\u6807 iframe contentWindow \u4E3A\u7A7A\uFF08\u53EF\u80FD\u672A\u52A0\u8F7D\uFF09");
+      return;
+    }
+    win.postMessage(
+      {
+        __resourceBridge: true,
+        direction: "host-to-iframe",
+        event: action,
+        action,
+        payload
+      },
+      "*"
+    );
+    tapBridgeEvent({
+      side: "host",
+      direction: "host-to-iframe",
+      action,
+      payload,
+      iframeKey: entry.key,
+      iframeLabel: entry.label,
+      note: "injected by devtools"
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-[hsl(var(--border))] bg-[hsl(var(--muted))]/30 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 text-xs font-semibold text-[hsl(var(--muted-foreground))]", children: [
+      "\u624B\u52A8\u53D1\u9001 envelope\uFF08",
+      effectiveSide === "agent" ? "\u6A21\u62DF host \u2192 agent" : "host \u2192 iframe",
+      "\uFF09"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start gap-2 text-xs", children: [
+      effectiveSide === "host" && tab === "host" ? /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: targetKey,
+          onChange: (e) => setTargetKey(e.target.value),
+          className: "rounded border border-[hsl(var(--border))] bg-transparent px-2 py-1",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "\u9009\u62E9 iframe\u2026" }),
+            iframes.map((f) => /* @__PURE__ */ jsx("option", { value: f.key, children: f.label }, f.key))
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: action,
+          onChange: (e) => setAction(e.target.value),
+          placeholder: "action\uFF08\u5982 addContext / theme\uFF09",
+          className: "min-w-[140px] flex-1 rounded border border-[hsl(var(--border))] bg-transparent px-2 py-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: payloadText,
+          onChange: (e) => setPayloadText(e.target.value),
+          placeholder: 'payload JSON\uFF08\u5982 {"foo":1}\uFF09',
+          className: "min-w-[180px] flex-[2] rounded border border-[hsl(var(--border))] bg-transparent px-2 py-1 font-mono"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: send,
+          className: "rounded bg-[hsl(var(--primary))] px-3 py-1 text-[hsl(var(--primary-foreground))] hover:opacity-90",
+          children: "\u53D1\u9001"
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-red-500", children: error }) : null
+  ] });
+}
+
+// src/react/devtools/bridge-devtools/mount.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var mounted = false;
+function mountBridgeDevtools() {
+  if (mounted || typeof document === "undefined") return;
+  mounted = true;
+  const hook = {
+    record: (event) => useBridgeDevtoolsStore.getState().record(event),
+    registerIframe: (entry) => useBridgeDevtoolsStore.getState().registerIframe(entry)
+  };
+  globalThis.__bladeBridgeDevtools = hook;
+  flushPendingBridgeEvents();
+  flushPendingIframeRegistrations();
+  const container = document.createElement("div");
+  container.id = "blade-bridge-devtools-root";
+  document.body.appendChild(container);
+  createRoot(container).render(
+    /* @__PURE__ */ jsx2(StrictMode, { children: /* @__PURE__ */ jsx2(BridgeDevtoolsFab, {}) })
+  );
+}
+export {
+  mountBridgeDevtools,
+  registerBridgeIframe,
+  tapBridgeEvent
+};
+//# sourceMappingURL=index.js.map