@guidekit/react 0.1.0-beta.1

package/README.md

@@ -0,0 +1,78 @@
+# @guidekit/react
+
+React bindings for the GuideKit SDK. Provides the `GuideKitProvider`, split hooks, and a Shadow DOM widget for adding an AI assistant to any React application.
+
+## Installation
+
+```bash
+npm install @guidekit/core @guidekit/react
+```
+
+## Quick Start
+
+```tsx
+import { GuideKitProvider } from '@guidekit/react';
+
+function App() {
+  return (
+    <GuideKitProvider
+      tokenEndpoint="/api/guidekit/token"
+      agent={{ name: 'Guide', greeting: 'Hi! How can I help?' }}
+      options={{ mode: 'text' }}
+    >
+      <YourApp />
+    </GuideKitProvider>
+  );
+}
+```
+
+## Hooks
+
+```tsx
+import {
+  useGuideKitStatus,
+  useGuideKitVoice,
+  useGuideKitActions,
+  useGuideKitContext,
+} from '@guidekit/react';
+
+function MyComponent() {
+  const { status, isReady } = useGuideKitStatus();
+  const { sendText, reset } = useGuideKitActions();
+  const { isListening, startVoice, stopVoice } = useGuideKitVoice();
+  const { transcript, messages } = useGuideKitContext();
+
+  return (
+    <div>
+      <p>Status: {status}</p>
+      <button onClick={() => sendText('Help me')}>Ask</button>
+    </div>
+  );
+}
+```
+
+## Sub-exports
+
+### `@guidekit/react/devtools`
+
+Development-only component for inspecting SDK state, events, and context.
+
+```tsx
+import { GuideKitDevTools } from '@guidekit/react/devtools';
+```
+
+### `@guidekit/react/testing`
+
+Test utilities for mocking the provider in unit tests.
+
+```tsx
+import { MockGuideKitProvider, simulateVoiceInput } from '@guidekit/react/testing';
+```
+
+## Documentation
+
+Full documentation: [guidekit.dev/docs](https://guidekit.dev/docs)
+
+## License
+
+[MIT](../../LICENSE)

package/dist/chunk-4NUEGCBT.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+// src/_context.ts
+var GuideKitContext = createContext(null);
+
+export { GuideKitContext };
+//# sourceMappingURL=chunk-4NUEGCBT.js.map
+//# sourceMappingURL=chunk-4NUEGCBT.js.map

package/dist/chunk-4NUEGCBT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/_context.ts"],"names":[],"mappings":";;;AAGO,IAAM,eAAA,GAAkB,cAAmC,IAAI","file":"chunk-4NUEGCBT.js","sourcesContent":["import { createContext } from 'react';\nimport type { GuideKitCore } from '@guidekit/core';\n\nexport const GuideKitContext = createContext<GuideKitCore | null>(null);\n"]}

package/dist/chunk-EQGJ2LTR.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var react = require('react');
+
+// src/_context.ts
+var GuideKitContext = react.createContext(null);
+
+exports.GuideKitContext = GuideKitContext;
+//# sourceMappingURL=chunk-EQGJ2LTR.cjs.map
+//# sourceMappingURL=chunk-EQGJ2LTR.cjs.map

package/dist/chunk-EQGJ2LTR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/_context.ts"],"names":["createContext"],"mappings":";;;;;AAGO,IAAM,eAAA,GAAkBA,oBAAmC,IAAI","file":"chunk-EQGJ2LTR.cjs","sourcesContent":["import { createContext } from 'react';\nimport type { GuideKitCore } from '@guidekit/core';\n\nexport const GuideKitContext = createContext<GuideKitCore | null>(null);\n"]}

package/dist/devtools.cjs

@@ -0,0 +1,576 @@
+'use strict';
+
+var chunkEQGJ2LTR_cjs = require('./chunk-EQGJ2LTR.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var MAX_EVENT_LOG = 200;
+var TAB_LABELS = {
+  state: "State",
+  events: "Events",
+  sections: "Sections",
+  ratelimits: "Rate Limits"
+};
+var TAB_ORDER = ["state", "events", "sections", "ratelimits"];
+var S = {
+  container: {
+    position: "fixed",
+    top: 24,
+    right: 24,
+    zIndex: 2147483646,
+    fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
+    fontSize: 12,
+    lineHeight: 1.5,
+    color: "#e2e8f0",
+    pointerEvents: "auto"
+  },
+  toggle: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 12px",
+    border: "1px solid #334155",
+    borderRadius: 8,
+    background: "#1e293b",
+    color: "#94a3b8",
+    cursor: "pointer",
+    fontSize: 11,
+    fontFamily: "inherit",
+    whiteSpace: "nowrap"
+  },
+  panel: {
+    width: 420,
+    maxHeight: 520,
+    background: "#0f172a",
+    border: "1px solid #334155",
+    borderRadius: 10,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 20px 60px rgba(0,0,0,0.5)"
+  },
+  titleBar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 12px",
+    background: "#1e293b",
+    borderBottom: "1px solid #334155",
+    flexShrink: 0
+  },
+  titleText: {
+    fontWeight: 700,
+    fontSize: 12,
+    color: "#e2e8f0",
+    margin: 0
+  },
+  closeBtn: {
+    background: "none",
+    border: "none",
+    color: "#64748b",
+    cursor: "pointer",
+    fontSize: 16,
+    lineHeight: 1,
+    padding: "0 4px",
+    fontFamily: "inherit"
+  },
+  tabBar: {
+    display: "flex",
+    borderBottom: "1px solid #334155",
+    background: "#1e293b",
+    flexShrink: 0
+  },
+  tab: (active) => ({
+    flex: 1,
+    padding: "6px 8px",
+    background: active ? "#0f172a" : "transparent",
+    color: active ? "#e2e8f0" : "#64748b",
+    border: "none",
+    borderBottom: active ? "2px solid #6366f1" : "2px solid transparent",
+    cursor: "pointer",
+    fontSize: 11,
+    fontFamily: "inherit",
+    fontWeight: active ? 600 : 400,
+    transition: "color 0.15s, background 0.15s"
+  }),
+  tabContent: {
+    flex: 1,
+    overflow: "auto",
+    padding: 12,
+    minHeight: 200,
+    maxHeight: 400
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "4px 0",
+    borderBottom: "1px solid #1e293b"
+  },
+  label: {
+    color: "#94a3b8",
+    fontSize: 11
+  },
+  value: {
+    color: "#e2e8f0",
+    fontSize: 11,
+    fontWeight: 600
+  },
+  badge: (color) => ({
+    display: "inline-block",
+    padding: "1px 6px",
+    borderRadius: 4,
+    fontSize: 10,
+    fontWeight: 600,
+    background: color,
+    color: "#fff"
+  }),
+  eventRow: {
+    padding: "3px 0",
+    borderBottom: "1px solid #1e293b",
+    wordBreak: "break-all"
+  },
+  eventTime: {
+    color: "#475569",
+    fontSize: 10,
+    marginRight: 6
+  },
+  eventName: {
+    color: "#818cf8",
+    fontSize: 11,
+    fontWeight: 600
+  },
+  eventData: {
+    color: "#64748b",
+    fontSize: 10,
+    marginLeft: 4,
+    display: "block",
+    whiteSpace: "pre-wrap",
+    maxHeight: 60,
+    overflow: "hidden"
+  },
+  sectionRow: {
+    padding: "4px 0",
+    borderBottom: "1px solid #1e293b"
+  },
+  sectionId: {
+    color: "#38bdf8",
+    fontSize: 11,
+    fontWeight: 600
+  },
+  sectionMeta: {
+    color: "#64748b",
+    fontSize: 10,
+    display: "flex",
+    gap: 8,
+    marginTop: 2
+  },
+  meter: {
+    height: 6,
+    borderRadius: 3,
+    background: "#1e293b",
+    overflow: "hidden",
+    marginTop: 4
+  },
+  meterFill: (pct, color) => ({
+    height: "100%",
+    width: `${Math.min(pct, 100)}%`,
+    background: color,
+    borderRadius: 3,
+    transition: "width 0.3s ease"
+  }),
+  emptyState: {
+    color: "#475569",
+    textAlign: "center",
+    padding: "24px 0",
+    fontSize: 11
+  },
+  clearBtn: {
+    background: "#1e293b",
+    border: "1px solid #334155",
+    color: "#94a3b8",
+    cursor: "pointer",
+    fontSize: 10,
+    padding: "2px 8px",
+    borderRadius: 4,
+    fontFamily: "inherit"
+  }
+};
+function statusColor(status) {
+  switch (status) {
+    case "idle":
+      return "#475569";
+    case "listening":
+      return "#22c55e";
+    case "processing":
+      return "#f59e0b";
+    case "speaking":
+      return "#6366f1";
+    case "error":
+      return "#ef4444";
+    default:
+      return "#475569";
+  }
+}
+function formatTime(ts) {
+  const d = new Date(ts);
+  const h = d.getHours().toString().padStart(2, "0");
+  const m = d.getMinutes().toString().padStart(2, "0");
+  const s = d.getSeconds().toString().padStart(2, "0");
+  const ms = d.getMilliseconds().toString().padStart(3, "0");
+  return `${h}:${m}:${s}.${ms}`;
+}
+function truncateJSON(data, maxLen = 120) {
+  try {
+    const json = JSON.stringify(data);
+    if (json.length > maxLen) return json.slice(0, maxLen) + "...";
+    return json;
+  } catch {
+    return String(data);
+  }
+}
+function StateTab({ core }) {
+  const subscribe = react.useCallback(
+    (listener) => core.subscribe(listener),
+    [core]
+  );
+  const getSnapshot = react.useCallback(() => core.getSnapshot(), [core]);
+  const store = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const agentStatus = store.status.agentState.status;
+  const isReady = store.status.isReady;
+  const isListening = store.voice.isListening;
+  const isSpeaking = store.voice.isSpeaking;
+  const hasVoice = core.hasVoice;
+  const quietMode = core.quietMode;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.label, children: "isReady" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          style: S.badge(isReady ? "#22c55e" : "#ef4444"),
+          children: isReady ? "true" : "false"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.label, children: "agentState" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.badge(statusColor(agentStatus)), children: agentStatus })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.label, children: "isListening" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.value, children: String(isListening) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.label, children: "isSpeaking" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.value, children: String(isSpeaking) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.label, children: "hasVoice" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.value, children: String(hasVoice) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.label, children: "quietMode" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          style: S.badge(quietMode ? "#f59e0b" : "#475569"),
+          children: quietMode ? "on" : "off"
+        }
+      )
+    ] }),
+    store.status.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...S.label, marginBottom: 4 }, children: "Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            background: "#1e293b",
+            padding: 8,
+            borderRadius: 6,
+            color: "#fca5a5",
+            fontSize: 10,
+            whiteSpace: "pre-wrap",
+            maxHeight: 80,
+            overflow: "auto"
+          },
+          children: store.status.error.message
+        }
+      )
+    ] })
+  ] });
+}
+function EventsTab({ core }) {
+  const [events, setEvents] = react.useState([]);
+  const idRef = react.useRef(0);
+  const scrollRef = react.useRef(null);
+  react.useEffect(() => {
+    const unsub = core.bus.onAny((data, eventName) => {
+      setEvents((prev) => {
+        const next = [
+          ...prev,
+          {
+            id: ++idRef.current,
+            timestamp: Date.now(),
+            name: eventName,
+            data
+          }
+        ];
+        if (next.length > MAX_EVENT_LOG) {
+          return next.slice(next.length - MAX_EVENT_LOG);
+        }
+        return next;
+      });
+    });
+    return unsub;
+  }, [core]);
+  react.useEffect(() => {
+    const el = scrollRef.current;
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [events.length]);
+  const handleClear = react.useCallback(() => {
+    setEvents([]);
+    idRef.current = 0;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: 8
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: S.label, children: [
+            events.length,
+            " events"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { style: S.clearBtn, onClick: handleClear, children: "Clear" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: scrollRef,
+        style: { maxHeight: 340, overflow: "auto" },
+        children: events.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.emptyState, children: "No events yet." }) : events.map((evt) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.eventRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.eventTime, children: formatTime(evt.timestamp) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.eventName, children: evt.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.eventData, children: truncateJSON(evt.data) })
+        ] }, evt.id))
+      }
+    )
+  ] });
+}
+function SectionsTab({ core }) {
+  const [sections, setSections] = react.useState([]);
+  const subscribe = react.useCallback(
+    (listener) => core.subscribe(listener),
+    [core]
+  );
+  const getSnapshot = react.useCallback(
+    () => core.pageModel?.sections ?? [],
+    [core]
+  );
+  const liveSections = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  react.useEffect(() => {
+    setSections(liveSections);
+  }, [liveSections]);
+  react.useEffect(() => {
+    const unsub = core.bus.on("dom:scan-complete", () => {
+      setSections(core.pageModel?.sections ?? []);
+    });
+    return unsub;
+  }, [core]);
+  if (sections.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.emptyState, children: "No sections discovered." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...S.label, marginBottom: 8 }, children: [
+      sections.length,
+      " section",
+      sections.length !== 1 ? "s" : ""
+    ] }),
+    sections.map((sec) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.sectionRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.sectionId, children: sec.id }),
+      sec.label && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#cbd5e1", fontSize: 11 }, children: sec.label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.sectionMeta, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "score: ",
+          sec.score
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "visible:",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                color: sec.isVisible ? "#22c55e" : "#ef4444",
+                fontWeight: 600
+              },
+              children: sec.isVisible ? "yes" : "no"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "ratio: ",
+          Math.round(sec.visibilityRatio * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "depth: ",
+          sec.depth
+        ] })
+      ] })
+    ] }, sec.id))
+  ] });
+}
+function RateLimitsTab({ core }) {
+  const [rlState, setRlState] = react.useState(
+    core.rateLimiterState
+  );
+  react.useEffect(() => {
+    const id = setInterval(() => {
+      setRlState(core.rateLimiterState);
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [core]);
+  const maxLLM = 10;
+  const maxSTT = 60;
+  const maxTTS = 5e4;
+  const llmPct = rlState.llmCallsInWindow / maxLLM * 100;
+  const sttPct = rlState.sttMinutesUsed / maxSTT * 100;
+  const ttsPct = rlState.ttsCharsUsed / maxTTS * 100;
+  const meterColor = (pct) => pct >= 90 ? "#ef4444" : pct >= 60 ? "#f59e0b" : "#22c55e";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.row, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.label, children: "LLM calls (1 min window)" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: S.value, children: [
+          rlState.llmCallsInWindow,
+          " / ",
+          maxLLM
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.meter, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.meterFill(llmPct, meterColor(llmPct)) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.row, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.label, children: "STT minutes (session)" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: S.value, children: [
+          rlState.sttMinutesUsed.toFixed(2),
+          " / ",
+          maxSTT
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.meter, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.meterFill(sttPct, meterColor(sttPct)) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.row, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.label, children: "TTS chars (session)" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: S.value, children: [
+          rlState.ttsCharsUsed.toLocaleString(),
+          " / ",
+          maxTTS.toLocaleString()
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.meter, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.meterFill(ttsPct, meterColor(ttsPct)) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          ...S.label,
+          fontSize: 10,
+          marginTop: 8,
+          color: "#475569"
+        },
+        children: [
+          "Window started:",
+          " ",
+          rlState.llmWindowStart ? formatTime(rlState.llmWindowStart) : "N/A"
+        ]
+      }
+    )
+  ] });
+}
+function GuideKitDevTools(props) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DevToolsInner, { core: props?.core });
+}
+function DevToolsInner({ core: coreProp }) {
+  const contextCore = react.useContext(chunkEQGJ2LTR_cjs.GuideKitContext);
+  const core = coreProp ?? contextCore;
+  const [collapsed, setCollapsed] = react.useState(true);
+  const [activeTab, setActiveTab] = react.useState("state");
+  if (!core) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.toggle, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#ef4444", fontWeight: 600 }, children: "GuideKit DevTools: no core instance found" }) }) });
+  }
+  if (collapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.container, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        style: S.toggle,
+        onClick: () => setCollapsed(false),
+        title: "Open GuideKit DevTools",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                background: "#6366f1",
+                display: "inline-block",
+                flexShrink: 0
+              }
+            }
+          ),
+          "GuideKit DevTools"
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.container, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.panel, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.titleBar, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.titleText, children: "GuideKit DevTools" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          style: S.closeBtn,
+          onClick: () => setCollapsed(true),
+          title: "Close",
+          children: "x"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.tabBar, children: TAB_ORDER.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        style: S.tab(activeTab === id),
+        onClick: () => setActiveTab(id),
+        children: TAB_LABELS[id]
+      },
+      id
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.tabContent, children: [
+      activeTab === "state" && /* @__PURE__ */ jsxRuntime.jsx(StateTab, { core }),
+      activeTab === "events" && /* @__PURE__ */ jsxRuntime.jsx(EventsTab, { core }),
+      activeTab === "sections" && /* @__PURE__ */ jsxRuntime.jsx(SectionsTab, { core }),
+      activeTab === "ratelimits" && /* @__PURE__ */ jsxRuntime.jsx(RateLimitsTab, { core })
+    ] })
+  ] }) });
+}
+
+exports.GuideKitDevTools = GuideKitDevTools;
+//# sourceMappingURL=devtools.cjs.map
+//# sourceMappingURL=devtools.cjs.map