tab-bridge 0.2.0 → 0.4.0

package/dist/react/index.cjs

@@ -235,8 +235,340 @@ function useTabSyncActions() {
     [instance]
   );
 }
+var FONT = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
+function containerStyle(position) {
+  const base = {
+    position: "fixed",
+    zIndex: 99999,
+    fontFamily: FONT,
+    fontSize: 12,
+    color: "#e4e4e7",
+    lineHeight: 1.5
+  };
+  if (position.includes("bottom")) base.bottom = 8;
+  else base.top = 8;
+  if (position.includes("right")) base.right = 8;
+  else base.left = 8;
+  return base;
+}
+var PANEL = {
+  width: 380,
+  maxHeight: 420,
+  background: "#18181b",
+  border: "1px solid #3f3f46",
+  borderRadius: 8,
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column",
+  boxShadow: "0 8px 32px rgba(0,0,0,.45)"
+};
+var TOGGLE_BTN = {
+  background: "#18181b",
+  color: "#a1a1aa",
+  border: "1px solid #3f3f46",
+  borderRadius: 6,
+  padding: "4px 12px",
+  cursor: "pointer",
+  fontFamily: FONT,
+  fontSize: 11,
+  marginBottom: 4,
+  display: "flex",
+  alignItems: "center",
+  gap: 6
+};
+var TAB_BAR = {
+  display: "flex",
+  borderBottom: "1px solid #3f3f46",
+  background: "#27272a"
+};
+function tabBtnStyle(active) {
+  return {
+    flex: 1,
+    padding: "6px 0",
+    background: active ? "#18181b" : "transparent",
+    color: active ? "#fafafa" : "#a1a1aa",
+    border: "none",
+    borderBottom: active ? "2px solid #6366f1" : "2px solid transparent",
+    cursor: "pointer",
+    fontFamily: FONT,
+    fontSize: 11,
+    fontWeight: active ? 600 : 400
+  };
+}
+var BODY = {
+  flex: 1,
+  overflow: "auto",
+  padding: 10
+};
+var BADGE = {
+  display: "inline-block",
+  padding: "1px 5px",
+  borderRadius: 4,
+  fontSize: 10,
+  fontWeight: 600,
+  marginLeft: 6
+};
+function TabSyncDevTools({
+  position = "bottom-right",
+  defaultOpen = false
+}) {
+  const instance = react.useContext(TabSyncContext);
+  const [is_open, setIsOpen] = react.useState(defaultOpen);
+  const [active_tab, setActiveTab] = react.useState("state");
+  if (!instance) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle(position), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        style: TOGGLE_BTN,
+        onClick: () => setIsOpen((v) => !v),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6366f1", fontWeight: 700 }, children: "tab-bridge" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: is_open ? "\u25BC" : "\u25B2" })
+        ]
+      }
+    ),
+    is_open && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: PANEL, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: TAB_BAR, children: ["state", "tabs", "log"].map((t) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          style: tabBtnStyle(active_tab === t),
+          onClick: () => setActiveTab(t),
+          children: t === "state" ? "State" : t === "tabs" ? "Tabs" : "Log"
+        },
+        t
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: BODY, children: [
+        active_tab === "state" && /* @__PURE__ */ jsxRuntime.jsx(StatePanel, { instance }),
+        active_tab === "tabs" && /* @__PURE__ */ jsxRuntime.jsx(TabsPanel, { instance }),
+        active_tab === "log" && /* @__PURE__ */ jsxRuntime.jsx(LogPanel, { instance })
+      ] })
+    ] })
+  ] });
+}
+function StatePanel({
+  instance
+}) {
+  const [state, setState] = react.useState(() => instance.getAll());
+  const [editing, setEditing] = react.useState(false);
+  const [draft, setDraft] = react.useState("");
+  const [error, setError] = react.useState("");
+  react.useEffect(() => {
+    return instance.onChange((s) => setState(s));
+  }, [instance]);
+  const startEdit = react.useCallback(() => {
+    setDraft(JSON.stringify(state, null, 2));
+    setError("");
+    setEditing(true);
+  }, [state]);
+  const applyEdit = react.useCallback(() => {
+    try {
+      const parsed = JSON.parse(draft);
+      instance.patch(parsed);
+      setEditing(false);
+      setError("");
+    } catch (e) {
+      setError(String(e.message));
+    }
+  }, [draft, instance]);
+  if (editing) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          value: draft,
+          onChange: (e) => setDraft(e.target.value),
+          style: {
+            width: "100%",
+            minHeight: 180,
+            background: "#09090b",
+            color: "#e4e4e7",
+            border: "1px solid #3f3f46",
+            borderRadius: 4,
+            fontFamily: FONT,
+            fontSize: 11,
+            padding: 6,
+            resize: "vertical",
+            boxSizing: "border-box"
+          }
+        }
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#ef4444", fontSize: 11, marginTop: 4 }, children: error }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, marginTop: 6 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: applyEdit,
+            style: {
+              ...TOGGLE_BTN,
+              background: "#6366f1",
+              color: "#fff",
+              border: "none",
+              margin: 0
+            },
+            children: "Apply"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setEditing(false),
+            style: { ...TOGGLE_BTN, margin: 0 },
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "pre",
+      {
+        style: {
+          margin: 0,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-all",
+          fontSize: 11,
+          color: "#a5f3fc"
+        },
+        children: JSON.stringify(state, null, 2)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: startEdit,
+        style: { ...TOGGLE_BTN, marginTop: 8, margin: 0 },
+        children: "Edit State"
+      }
+    )
+  ] });
+}
+function TabsPanel({
+  instance
+}) {
+  const [tabs, setTabs] = react.useState(() => instance.getTabs());
+  react.useEffect(() => {
+    return instance.onTabChange((t) => setTabs(t));
+  }, [instance]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#a1a1aa", marginBottom: 6, fontSize: 11 }, children: [
+      tabs.length,
+      " active tab",
+      tabs.length !== 1 ? "s" : ""
+    ] }),
+    tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          padding: "4px 6px",
+          marginBottom: 4,
+          background: tab.id === instance.id ? "#1e1b4b" : "#27272a",
+          borderRadius: 4,
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "wrap",
+          gap: 4
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontFamily: FONT,
+                fontSize: 11,
+                color: "#e4e4e7",
+                wordBreak: "break-all"
+              },
+              children: tab.id.slice(0, 8)
+            }
+          ),
+          tab.id === instance.id && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...BADGE, background: "#6366f1", color: "#fff" }, children: "you" }),
+          tab.isLeader && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...BADGE, background: "#f59e0b", color: "#000" }, children: "leader" })
+        ]
+      },
+      tab.id
+    ))
+  ] });
+}
+var MAX_LOG = 200;
+var next_log_id = 0;
+function LogPanel({
+  instance
+}) {
+  const [entries, setEntries] = react.useState([]);
+  const bottom_ref = react.useRef(null);
+  const push = react.useCallback((kind, detail) => {
+    setEntries((prev) => {
+      const entry = {
+        id: ++next_log_id,
+        time: Date.now(),
+        kind,
+        detail
+      };
+      const next = [...prev, entry];
+      return next.length > MAX_LOG ? next.slice(-MAX_LOG) : next;
+    });
+  }, []);
+  react.useEffect(() => {
+    const unsub_state = instance.onChange(
+      (_state, keys, meta) => {
+        const src = meta.isLocal ? "local" : `remote(${meta.sourceTabId.slice(0, 8)})`;
+        push("state", `${String(keys.join(", "))} [${src}]`);
+      }
+    );
+    const unsub_tabs = instance.onTabChange((tabs) => {
+      push("tab", `${tabs.length} tabs`);
+    });
+    return () => {
+      unsub_state();
+      unsub_tabs();
+    };
+  }, [instance, push]);
+  react.useEffect(() => {
+    bottom_ref.current?.scrollIntoView({ behavior: "smooth" });
+  }, [entries.length]);
+  const kind_color = {
+    state: "#a5f3fc",
+    tab: "#86efac",
+    leader: "#fde68a"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxHeight: 300, overflow: "auto" }, children: [
+    entries.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#71717a", fontSize: 11 }, children: "Waiting for events..." }),
+    entries.map((e) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: { fontSize: 11, marginBottom: 2, display: "flex", gap: 6 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#71717a", flexShrink: 0 }, children: new Date(e.time).toLocaleTimeString() }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                color: kind_color[e.kind],
+                fontWeight: 600,
+                flexShrink: 0,
+                width: 38
+              },
+              children: e.kind
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#d4d4d8", wordBreak: "break-all" }, children: e.detail })
+        ]
+      },
+      e.id
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bottom_ref })
+  ] });
+}
 
 exports.TabSyncContext = TabSyncContext;
+exports.TabSyncDevTools = TabSyncDevTools;
 exports.TabSyncProvider = TabSyncProvider;
 exports.useIsLeader = useIsLeader;
 exports.useLeaderInfo = useLeaderInfo;

package/dist/react/index.d.cts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { T as TabSyncOptions, a as TabSyncInstance, R as RPCMap, b as TabInfo } from '../instance-5LIItazN.cjs';
+import { T as TabSyncOptions } from '../options-DmHyGTL0.cjs';
+import { T as TabSyncInstance, R as RPCMap, a as TabInfo } from '../instance-hvEUHx6i.cjs';
 
 interface TabSyncProviderProps<TState extends Record<string, unknown>> {
     options: TabSyncOptions<TState>;
@@ -103,4 +104,26 @@ interface TabSyncActions<TState extends Record<string, unknown>> {
  */
 declare function useTabSyncActions<TState extends Record<string, unknown> = Record<string, unknown>>(): TabSyncActions<TState>;
 
-export { type TabSyncActions, TabSyncContext, TabSyncProvider, type TabSyncProviderProps, useIsLeader, useLeaderInfo, useTabSync, useTabSyncActions, useTabSyncSelector, useTabSyncValue, useTabs };
+interface TabSyncDevToolsProps {
+    /** Panel position on screen. @default 'bottom-right' */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Start expanded. @default false */
+    defaultOpen?: boolean;
+}
+/**
+ * Floating dev-tools panel that visualises tab-bridge state, active tabs,
+ * leader info, and an event log. Supports manual state editing.
+ *
+ * **Tree-shakeable** — if you never import `TabSyncDevTools`, it won't
+ * appear in your production bundle.
+ *
+ * Must be used inside a `<TabSyncProvider>`.
+ *
+ * @example
+ * ```tsx
+ * {process.env.NODE_ENV === 'development' && <TabSyncDevTools />}
+ * ```
+ */
+declare function TabSyncDevTools({ position, defaultOpen, }: TabSyncDevToolsProps): react_jsx_runtime.JSX.Element | null;
+
+export { type TabSyncActions, TabSyncContext, TabSyncDevTools, type TabSyncDevToolsProps, TabSyncProvider, type TabSyncProviderProps, useIsLeader, useLeaderInfo, useTabSync, useTabSyncActions, useTabSyncSelector, useTabSyncValue, useTabs };

package/dist/react/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { T as TabSyncOptions, a as TabSyncInstance, R as RPCMap, b as TabInfo } from '../instance-5LIItazN.js';
+import { T as TabSyncOptions } from '../options-iN7Rnvwj.js';
+import { T as TabSyncInstance, R as RPCMap, a as TabInfo } from '../instance-hvEUHx6i.js';
 
 interface TabSyncProviderProps<TState extends Record<string, unknown>> {
     options: TabSyncOptions<TState>;
@@ -103,4 +104,26 @@ interface TabSyncActions<TState extends Record<string, unknown>> {
  */
 declare function useTabSyncActions<TState extends Record<string, unknown> = Record<string, unknown>>(): TabSyncActions<TState>;
 
-export { type TabSyncActions, TabSyncContext, TabSyncProvider, type TabSyncProviderProps, useIsLeader, useLeaderInfo, useTabSync, useTabSyncActions, useTabSyncSelector, useTabSyncValue, useTabs };
+interface TabSyncDevToolsProps {
+    /** Panel position on screen. @default 'bottom-right' */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Start expanded. @default false */
+    defaultOpen?: boolean;
+}
+/**
+ * Floating dev-tools panel that visualises tab-bridge state, active tabs,
+ * leader info, and an event log. Supports manual state editing.
+ *
+ * **Tree-shakeable** — if you never import `TabSyncDevTools`, it won't
+ * appear in your production bundle.
+ *
+ * Must be used inside a `<TabSyncProvider>`.
+ *
+ * @example
+ * ```tsx
+ * {process.env.NODE_ENV === 'development' && <TabSyncDevTools />}
+ * ```
+ */
+declare function TabSyncDevTools({ position, defaultOpen, }: TabSyncDevToolsProps): react_jsx_runtime.JSX.Element | null;
+
+export { type TabSyncActions, TabSyncContext, TabSyncDevTools, type TabSyncDevToolsProps, TabSyncProvider, type TabSyncProviderProps, useIsLeader, useLeaderInfo, useTabSync, useTabSyncActions, useTabSyncSelector, useTabSyncValue, useTabs };