@couch-kit/devtools 0.2.9 → 0.2.10

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @couch-kit/devtools
 
+## 0.2.10
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @couch-kit/client@0.8.9
+
 ## 0.2.9
 
 ### Patch Changes

package/dist/index.js

@@ -1,372 +1,3 @@
-// src/DebugOverlay.tsx
-import { useState, useCallback, useRef } from "react";
-import { jsxDEV } from "react/jsx-dev-runtime";
-var STATUS_COLORS = {
-  connected: "#4ade80",
-  connecting: "#facc15",
-  reconnecting: "#facc15",
-  disconnected: "#f87171",
-  error: "#f87171"
-};
-function formatTimestamp(ts) {
-  const date = new Date(ts);
-  return date.toLocaleTimeString("en-US", {
-    hour12: false,
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  }) + "." + String(date.getMilliseconds()).padStart(3, "0");
-}
-function JsonTree({ data, depth = 0 }) {
-  if (data === null || data === undefined) {
-    return /* @__PURE__ */ jsxDEV("span", {
-      style: { color: "#9ca3af" },
-      children: String(data)
-    }, undefined, false, undefined, this);
-  }
-  if (typeof data === "boolean") {
-    return /* @__PURE__ */ jsxDEV("span", {
-      style: { color: "#c084fc" },
-      children: String(data)
-    }, undefined, false, undefined, this);
-  }
-  if (typeof data === "number") {
-    return /* @__PURE__ */ jsxDEV("span", {
-      style: { color: "#60a5fa" },
-      children: data
-    }, undefined, false, undefined, this);
-  }
-  if (typeof data === "string") {
-    return /* @__PURE__ */ jsxDEV("span", {
-      style: { color: "#4ade80" },
-      children: [
-        '"',
-        data,
-        '"'
-      ]
-    }, undefined, true, undefined, this);
-  }
-  if (Array.isArray(data)) {
-    if (data.length === 0)
-      return /* @__PURE__ */ jsxDEV("span", {
-        children: "[]"
-      }, undefined, false, undefined, this);
-    return /* @__PURE__ */ jsxDEV("span", {
-      children: [
-        `[
-`,
-        data.map((item, i) => /* @__PURE__ */ jsxDEV("span", {
-          children: [
-            "  ".repeat(depth + 1),
-            /* @__PURE__ */ jsxDEV(JsonTree, {
-              data: item,
-              depth: depth + 1
-            }, undefined, false, undefined, this),
-            i < data.length - 1 ? "," : "",
-            `
-`
-          ]
-        }, i, true, undefined, this)),
-        "  ".repeat(depth),
-        "]"
-      ]
-    }, undefined, true, undefined, this);
-  }
-  if (typeof data === "object") {
-    const entries = Object.entries(data);
-    if (entries.length === 0)
-      return /* @__PURE__ */ jsxDEV("span", {
-        children: "{}"
-      }, undefined, false, undefined, this);
-    return /* @__PURE__ */ jsxDEV("span", {
-      children: [
-        `{
-`,
-        entries.map(([key, value], i) => /* @__PURE__ */ jsxDEV("span", {
-          children: [
-            "  ".repeat(depth + 1),
-            /* @__PURE__ */ jsxDEV("span", {
-              style: { color: "#93c5fd" },
-              children: key
-            }, undefined, false, undefined, this),
-            ": ",
-            /* @__PURE__ */ jsxDEV(JsonTree, {
-              data: value,
-              depth: depth + 1
-            }, undefined, false, undefined, this),
-            i < entries.length - 1 ? "," : "",
-            `
-`
-          ]
-        }, key, true, undefined, this)),
-        "  ".repeat(depth),
-        "}"
-      ]
-    }, undefined, true, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV("span", {
-    children: String(data)
-  }, undefined, false, undefined, this);
-}
-function DebugOverlay({
-  data,
-  defaultCollapsed = true,
-  position = "bottom-right",
-  maxHeight = 400
-}) {
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
-  const [activeTab, setActiveTab] = useState("actions");
-  const tapCountRef = useRef(0);
-  const tapTimerRef = useRef(null);
-  const handleToggle = useCallback(() => {
-    tapCountRef.current++;
-    if (tapTimerRef.current) {
-      clearTimeout(tapTimerRef.current);
-    }
-    tapTimerRef.current = setTimeout(() => {
-      tapCountRef.current = 0;
-    }, 300);
-    setCollapsed((prev) => !prev);
-  }, []);
-  if (!data.enabled)
-    return null;
-  const positionStyles = {
-    position: "fixed",
-    zIndex: 99999,
-    ...position.includes("top") ? { top: 8 } : { bottom: 8 },
-    ...position.includes("left") ? { left: 8 } : { right: 8 }
-  };
-  const statusColor = STATUS_COLORS[data.connectionStatus] ?? "#9ca3af";
-  const panelStyle = {
-    ...positionStyles,
-    fontFamily: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace",
-    fontSize: 11,
-    lineHeight: 1.4,
-    color: "#e5e7eb",
-    backgroundColor: "rgba(17, 24, 39, 0.95)",
-    border: "1px solid rgba(75, 85, 99, 0.6)",
-    borderRadius: 8,
-    overflow: "hidden",
-    width: collapsed ? "auto" : 360,
-    backdropFilter: "blur(8px)",
-    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.4)"
-  };
-  const buttonStyle = {
-    background: "none",
-    border: "none",
-    color: "#e5e7eb",
-    cursor: "pointer",
-    padding: "6px 10px",
-    fontSize: 11,
-    fontFamily: "inherit"
-  };
-  const tabStyle = (isActive) => ({
-    ...buttonStyle,
-    borderBottom: isActive ? "2px solid #60a5fa" : "2px solid transparent",
-    color: isActive ? "#60a5fa" : "#9ca3af",
-    paddingBottom: 4
-  });
-  if (collapsed) {
-    return /* @__PURE__ */ jsxDEV("div", {
-      style: positionStyles,
-      children: /* @__PURE__ */ jsxDEV("button", {
-        onClick: handleToggle,
-        style: {
-          ...buttonStyle,
-          backgroundColor: "rgba(17, 24, 39, 0.95)",
-          border: "1px solid rgba(75, 85, 99, 0.6)",
-          borderRadius: 8,
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          padding: "6px 12px",
-          backdropFilter: "blur(8px)",
-          boxShadow: "0 2px 12px rgba(0, 0, 0, 0.3)"
-        },
-        children: [
-          /* @__PURE__ */ jsxDEV("span", {
-            style: {
-              width: 8,
-              height: 8,
-              borderRadius: "50%",
-              backgroundColor: statusColor,
-              display: "inline-block"
-            }
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("span", {
-            children: "Debug"
-          }, undefined, false, undefined, this),
-          data.rtt !== null && /* @__PURE__ */ jsxDEV("span", {
-            style: { color: "#9ca3af" },
-            children: [
-              data.rtt,
-              "ms"
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  const latestState = data.stateHistory.length > 0 ? data.stateHistory[data.stateHistory.length - 1]?.state : null;
-  return /* @__PURE__ */ jsxDEV("div", {
-    style: panelStyle,
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "6px 10px",
-          borderBottom: "1px solid rgba(75, 85, 99, 0.4)"
-        },
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            style: { display: "flex", alignItems: "center", gap: 6 },
-            children: [
-              /* @__PURE__ */ jsxDEV("span", {
-                style: {
-                  width: 8,
-                  height: 8,
-                  borderRadius: "50%",
-                  backgroundColor: statusColor,
-                  display: "inline-block"
-                }
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
-                style: { fontWeight: 600 },
-                children: "Debug"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
-                style: { color: "#9ca3af" },
-                children: [
-                  data.connectionStatus,
-                  data.rtt !== null ? ` · ${data.rtt}ms` : ""
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            style: { display: "flex", gap: 4 },
-            children: [
-              /* @__PURE__ */ jsxDEV("button", {
-                onClick: data.clearHistory,
-                style: buttonStyle,
-                title: "Clear",
-                children: "✕"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("button", {
-                onClick: handleToggle,
-                style: buttonStyle,
-                title: "Collapse",
-                children: "▾"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        style: {
-          display: "flex",
-          gap: 0,
-          borderBottom: "1px solid rgba(75, 85, 99, 0.4)",
-          padding: "0 6px"
-        },
-        children: [
-          /* @__PURE__ */ jsxDEV("button", {
-            onClick: () => setActiveTab("actions"),
-            style: tabStyle(activeTab === "actions"),
-            children: [
-              "Actions (",
-              data.actionLog.length,
-              ")"
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("button", {
-            onClick: () => setActiveTab("state"),
-            style: tabStyle(activeTab === "state"),
-            children: "State"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        style: {
-          maxHeight,
-          overflowY: "auto",
-          padding: 8
-        },
-        children: [
-          activeTab === "actions" && /* @__PURE__ */ jsxDEV("div", {
-            children: data.actionLog.length === 0 ? /* @__PURE__ */ jsxDEV("div", {
-              style: {
-                color: "#6b7280",
-                textAlign: "center",
-                padding: 16
-              },
-              children: "No actions recorded"
-            }, undefined, false, undefined, this) : data.actionLog.slice().reverse().map((entry) => /* @__PURE__ */ jsxDEV("div", {
-              style: {
-                padding: "4px 6px",
-                borderBottom: "1px solid rgba(75, 85, 99, 0.2)",
-                display: "flex",
-                flexDirection: "column",
-                gap: 2
-              },
-              children: [
-                /* @__PURE__ */ jsxDEV("div", {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxDEV("span", {
-                      style: {
-                        color: entry.source === "local" ? "#60a5fa" : "#4ade80",
-                        fontSize: 10,
-                        textTransform: "uppercase"
-                      },
-                      children: entry.source
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV("span", {
-                      style: { color: "#6b7280", fontSize: 10 },
-                      children: formatTimestamp(entry.timestamp)
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV("pre", {
-                  style: {
-                    margin: 0,
-                    fontSize: 10,
-                    color: "#d1d5db",
-                    whiteSpace: "pre-wrap",
-                    wordBreak: "break-all"
-                  },
-                  children: /* @__PURE__ */ jsxDEV(JsonTree, {
-                    data: entry.action
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this)
-              ]
-            }, entry.id, true, undefined, this))
-          }, undefined, false, undefined, this),
-          activeTab === "state" && /* @__PURE__ */ jsxDEV("pre", {
-            style: {
-              margin: 0,
-              fontSize: 10,
-              whiteSpace: "pre-wrap",
-              wordBreak: "break-all"
-            },
-            children: latestState !== null ? /* @__PURE__ */ jsxDEV(JsonTree, {
-              data: latestState
-            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
-              style: { color: "#6b7280" },
-              children: "No state captured"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
 export {
   DebugOverlay
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@couch-kit/devtools",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Developer tooling and debug overlay for Couch Kit games",
   "main": "./dist/index.js",
   "types": "./lib/index.d.ts",
@@ -28,14 +28,19 @@
   ],
   "dependencies": {},
   "devDependencies": {
-    "@couch-kit/client": "0.8.8",
-    "@couch-kit/core": "0.9.2",
+    "@couch-kit/client": "0.8.9",
+    "@couch-kit/core": "0.9.3",
+    "@happy-dom/global-registrator": "^20.10.6",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.17",
-    "react": "^18.2.0",
+    "@types/react-dom": "^19",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "typescript": "^6.0.0"
   },
   "peerDependencies": {
-    "@couch-kit/client": "0.8.8",
+    "@couch-kit/client": "0.8.9",
     "react": ">=18.0.0"
   },
   "publishConfig": {