@multiplatform.one/frappe 6.0.0

package/dist/jsx/devtools/FrappeDevtoolsPanel.native.js

@@ -0,0 +1,919 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FrappeDevtoolsPanel_exports = {};
+__export(FrappeDevtoolsPanel_exports, {
+  FrappeDevtoolsPanel: () => FrappeDevtoolsPanel
+});
+module.exports = __toCommonJS(FrappeDevtoolsPanel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_types = require("../sync/types.native.js");
+var import_theme = require("./theme.native.js");
+var fontMono = "'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace";
+var fontUi = "system-ui, -apple-system, sans-serif";
+var sidebarWidth = 250;
+var virtualItemHeight = 28;
+var virtualOverscan = 10;
+function relativeTime(ts) {
+  var diff = Date.now() - ts;
+  if (diff < 1e3) return "just now";
+  if (diff < 6e4) return `${Math.floor(diff / 1e3)}s ago`;
+  if (diff < 36e5) return `${Math.floor(diff / 6e4)}m ago`;
+  return `${Math.floor(diff / 36e5)}h ago`;
+}
+function truncate(s, max) {
+  return s.length > max ? `${s.slice(0, max)}\u2026` : s;
+}
+function checkpointAge(checkpoint) {
+  if (!checkpoint) return "none";
+  try {
+    var diff = Date.now() - new Date(checkpoint).getTime();
+    return diff < 6e4 ? "fresh" : "stale";
+  } catch (unused) {
+    return "none";
+  }
+}
+var opIcons = {
+  [import_types.Operation.Create]: "+",
+  [import_types.Operation.Update]: "~",
+  [import_types.Operation.Delete]: "\xD7"
+};
+function useVirtualScroll(itemCount, containerHeight) {
+  var [scrollTop, setScrollTop] = (0, import_react.useState)(0);
+  var totalHeight = itemCount * virtualItemHeight;
+  var startIdx = Math.max(0, Math.floor(scrollTop / virtualItemHeight) - virtualOverscan);
+  var visibleCount = Math.ceil(containerHeight / virtualItemHeight) + virtualOverscan * 2;
+  var endIdx = Math.min(itemCount, startIdx + visibleCount);
+  var onScroll = (0, import_react.useCallback)(function (e) {
+    setScrollTop(e.currentTarget.scrollTop);
+  }, []);
+  return {
+    startIdx,
+    endIdx,
+    totalHeight,
+    onScroll,
+    offsetY: startIdx * virtualItemHeight
+  };
+}
+function StatusDot(param) {
+  var {
+    color,
+    size = 8
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    style: {
+      display: "inline-block",
+      width: size,
+      height: size,
+      borderRadius: "50%",
+      backgroundColor: color,
+      flexShrink: 0
+    }
+  });
+}
+function Badge(param) {
+  var {
+    children,
+    bg,
+    color
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    style: {
+      fontSize: 10,
+      fontFamily: fontMono,
+      padding: "1px 5px",
+      borderRadius: 3,
+      backgroundColor: bg,
+      color,
+      whiteSpace: "nowrap"
+    },
+    children
+  });
+}
+function TabButton(param) {
+  var {
+    active,
+    onClick,
+    children,
+    t
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+    type: "button",
+    onClick,
+    style: {
+      fontFamily: fontUi,
+      fontSize: 12,
+      padding: "4px 12px",
+      border: "none",
+      borderBottom: active ? `2px solid ${t.accent}` : "2px solid transparent",
+      background: "transparent",
+      color: active ? t.accent : t.textSecondary,
+      cursor: "pointer",
+      fontWeight: active ? 600 : 400
+    },
+    children
+  });
+}
+function Sidebar(param) {
+  var {
+    state,
+    selected,
+    onSelect,
+    t
+  } = param;
+  var ageColor = function ageColor2(age) {
+    return age === "fresh" ? t.success : age === "stale" ? t.warning : t.error;
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      width: sidebarWidth,
+      minWidth: sidebarWidth,
+      borderRight: `1px solid ${t.border}`,
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden"
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        padding: "8px 10px",
+        fontFamily: fontUi,
+        fontSize: 11,
+        fontWeight: 600,
+        color: t.textSecondary,
+        textTransform: "uppercase",
+        letterSpacing: "0.5px",
+        borderBottom: `1px solid ${t.border}`
+      },
+      children: "Subscriptions"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        flex: 1,
+        overflowY: "auto"
+      },
+      children: [state.subscriptions.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          padding: "16px 10px",
+          fontFamily: fontUi,
+          fontSize: 12,
+          color: t.textSecondary,
+          textAlign: "center"
+        },
+        children: "No active subscriptions"
+      }), state.subscriptions.map(function (sub) {
+        var age = checkpointAge(sub.checkpoint);
+        var isSelected = selected === sub.id;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          onClick: function onClick() {
+            return onSelect(sub.id);
+          },
+          style: {
+            padding: "6px 10px",
+            cursor: "pointer",
+            backgroundColor: isSelected ? t.bgHover : "transparent",
+            borderLeft: isSelected ? `3px solid ${t.accent}` : "3px solid transparent",
+            display: "flex",
+            alignItems: "center",
+            gap: 6
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(StatusDot, {
+            color: ageColor(age)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+            style: {
+              flex: 1,
+              minWidth: 0
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+              style: {
+                fontFamily: fontMono,
+                fontSize: 12,
+                color: t.text,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: sub.query.doctype
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+              style: {
+                fontFamily: fontUi,
+                fontSize: 10,
+                color: t.textSecondary
+              },
+              children: [sub.docCount, " docs", sub.tombstoneCount > 0 && ` \xB7 ${sub.tombstoneCount} tombstones`]
+            })]
+          })]
+        }, sub.id);
+      })]
+    }), /* Connection status */
+    /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        padding: "8px 10px",
+        borderTop: `1px solid ${t.border}`,
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        flexWrap: "wrap"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(StatusDot, {
+        color: state.connection.socketConnected ? t.success : t.error
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        style: {
+          fontFamily: fontUi,
+          fontSize: 10,
+          color: t.textSecondary
+        },
+        children: state.connection.socketConnected ? "Connected" : "Disconnected"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Badge, {
+        bg: state.connection.isLeader ? t.accent + "22" : t.bgSubtle,
+        color: state.connection.isLeader ? t.accent : t.textSecondary,
+        children: state.connection.isLeader ? "leader" : "follower"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StatusDot, {
+        color: state.connection.isOnline ? t.success : t.error,
+        size: 6
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        style: {
+          fontFamily: fontUi,
+          fontSize: 10,
+          color: t.textSecondary
+        },
+        children: state.connection.isOnline ? "online" : "offline"
+      })]
+    })]
+  });
+}
+function PageNavigator(param) {
+  var {
+    sub,
+    syncModule,
+    t
+  } = param;
+  var _sub_progressiveCache;
+  var pageInfo = sub.pageInfo;
+  if (!pageInfo) return null;
+  var islands = ((_sub_progressiveCache = sub.progressiveCache) === null || _sub_progressiveCache === void 0 ? void 0 : _sub_progressiveCache.islands) || [];
+  var totalPages = pageInfo.totalPages === "unknown" ? pageInfo.knownPages + 1 : pageInfo.totalPages;
+  var maxDisplay = Math.min(totalPages, 50);
+  var isPageCached = function isPageCached2(page) {
+    return islands.some(function (isl) {
+      return page >= isl.startPage && page <= isl.endPage;
+    });
+  };
+  var getIslandForPage = function getIslandForPage2(page) {
+    return islands.find(function (isl) {
+      return page >= isl.startPage && page <= isl.endPage;
+    });
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    children: [/* Page info readout */
+    /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        display: "flex",
+        gap: 16,
+        marginBottom: 8,
+        fontFamily: fontMono,
+        fontSize: 11,
+        color: t.textSecondary,
+        flexWrap: "wrap"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+        children: ["page ", /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+          style: {
+            color: t.accent
+          },
+          children: pageInfo.currentPage
+        }), "/", pageInfo.totalPages === "unknown" ? "?" : pageInfo.totalPages]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+        children: ["known: ", pageInfo.knownPages]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+        children: ["cached: ", pageInfo.itemsInCache]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+        children: ["size: ", pageInfo.pageSize]
+      }), pageInfo.hasMore && /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        style: {
+          color: t.warning
+        },
+        children: "hasMore"
+      })]
+    }), /* Page strip */
+    /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        display: "flex",
+        gap: 2,
+        flexWrap: "wrap",
+        alignItems: "center"
+      },
+      children: [Array.from({
+        length: maxDisplay
+      }, function (_, i) {
+        return i + 1;
+      }).map(function (page) {
+        var cached = isPageCached(page);
+        var isCurrent = page === pageInfo.currentPage;
+        var island = getIslandForPage(page);
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          onClick: function onClick() {
+            return syncModule.getPage(sub.id, page);
+          },
+          title: cached ? `Page ${page} \xB7 ${(island === null || island === void 0 ? void 0 : island.fetchedVia) || "cached"}` : `Page ${page} \xB7 not cached`,
+          style: {
+            width: 24,
+            height: 20,
+            fontSize: 9,
+            fontFamily: fontMono,
+            border: `1px solid ${isCurrent ? t.accent : cached ? t.border : t.border + "60"}`,
+            borderRadius: 3,
+            backgroundColor: isCurrent ? t.accent : cached ? t.bgSubtle : "transparent",
+            color: isCurrent ? "#fff" : cached ? t.text : t.textSecondary + "80",
+            cursor: "pointer",
+            padding: 0,
+            lineHeight: "20px"
+          },
+          children: page
+        }, page);
+      }), pageInfo.hasMore && /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        style: {
+          fontFamily: fontMono,
+          fontSize: 11,
+          color: t.textSecondary
+        },
+        children: "\u2026"
+      })]
+    })]
+  });
+}
+function ProgressiveCacheView(param) {
+  var {
+    sub,
+    t
+  } = param;
+  var _sub_progressiveCache, _sub_progressiveCache1;
+  var docIds = ((_sub_progressiveCache = sub.progressiveCache) === null || _sub_progressiveCache === void 0 ? void 0 : _sub_progressiveCache.docIds) || [];
+  var nextCursor = (_sub_progressiveCache1 = sub.progressiveCache) === null || _sub_progressiveCache1 === void 0 ? void 0 : _sub_progressiveCache1.nextCursor;
+  var containerRef = (0, import_react.useRef)(null);
+  var [containerH, setContainerH] = (0, import_react.useState)(200);
+  (0, import_react.useEffect)(function () {
+    if (containerRef.current) setContainerH(containerRef.current.clientHeight);
+  }, []);
+  var {
+    startIdx,
+    endIdx,
+    totalHeight,
+    onScroll,
+    offsetY
+  } = useVirtualScroll(docIds.length, containerH);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    ref: containerRef,
+    onScroll,
+    style: {
+      maxHeight: 200,
+      overflowY: "auto",
+      border: `1px solid ${t.border}`,
+      borderRadius: 4,
+      fontFamily: fontMono,
+      fontSize: 11
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: totalHeight,
+        position: "relative"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          transform: `translateY(${offsetY}px)`
+        },
+        children: Array.from({
+          length: endIdx - startIdx
+        }, function (_, i) {
+          var idx = startIdx + i;
+          var docId = docIds[idx];
+          var isGap = docId === "";
+          var isCursor = docId === nextCursor;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+            style: {
+              height: virtualItemHeight,
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "0 8px",
+              color: isGap ? t.textSecondary + "50" : t.text,
+              backgroundColor: isCursor ? t.accent + "15" : "transparent",
+              borderLeft: isCursor ? `2px solid ${t.accent}` : "2px solid transparent"
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+              style: {
+                width: 40,
+                color: t.textSecondary,
+                textAlign: "right"
+              },
+              children: idx
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+              style: {
+                flex: 1,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: isGap ? "\u2014 gap \u2014" : truncate(docId, 40)
+            }), isCursor && /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+              style: {
+                fontSize: 9,
+                color: t.accent
+              },
+              children: "cursor"
+            })]
+          }, idx);
+        })
+      })
+    })
+  });
+}
+function PagesTab(param) {
+  var {
+    sub,
+    syncModule,
+    t
+  } = param;
+  var _ref;
+  var _sub_progressiveCache;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 12
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(PageNavigator, {
+      sub,
+      syncModule,
+      t
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        style: {
+          fontFamily: fontUi,
+          fontSize: 11,
+          fontWeight: 600,
+          color: t.textSecondary,
+          marginBottom: 4
+        },
+        children: ["Progressive Cache (", (_ref = (_sub_progressiveCache = sub.progressiveCache) === null || _sub_progressiveCache === void 0 ? void 0 : _sub_progressiveCache.docIds.length) !== null && _ref !== void 0 ? _ref : 0, " entries)"]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressiveCacheView, {
+        sub,
+        t
+      })]
+    })]
+  });
+}
+function CacheTab(param) {
+  var {
+    state,
+    t
+  } = param;
+  var _ref;
+  var _doctypes_find;
+  var [selectedDoctype, setSelectedDoctype] = (0, import_react.useState)(null);
+  var [_expandedDoc, setExpandedDoc] = (0, import_react.useState)(null);
+  var doctypes = state.normalizedCache.doctypes;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      display: "flex",
+      gap: 12,
+      height: "100%"
+    },
+    children: [/* Doctype list */
+    /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        width: 180,
+        minWidth: 180,
+        borderRight: `1px solid ${t.border}`,
+        overflowY: "auto"
+      },
+      children: doctypes.map(function (dt) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          onClick: function onClick() {
+            setSelectedDoctype(dt.doctype);
+            setExpandedDoc(null);
+          },
+          style: {
+            padding: "4px 8px",
+            cursor: "pointer",
+            backgroundColor: selectedDoctype === dt.doctype ? t.bgHover : "transparent",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center"
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              fontFamily: fontMono,
+              fontSize: 11,
+              color: t.text,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: dt.doctype
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Badge, {
+            bg: t.bgSubtle,
+            color: t.textSecondary,
+            children: dt.count
+          })]
+        }, dt.doctype);
+      })
+    }), /* Document detail (placeholder — full inspection requires cache access) */
+    /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        padding: "0 4px"
+      },
+      children: [!selectedDoctype && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          fontFamily: fontUi,
+          fontSize: 12,
+          color: t.textSecondary,
+          padding: 16,
+          textAlign: "center"
+        },
+        children: "Select a doctype to browse cached documents"
+      }), selectedDoctype && /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        style: {
+          fontFamily: fontMono,
+          fontSize: 11,
+          color: t.text,
+          padding: "8px 0"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            color: t.textSecondary,
+            marginBottom: 8
+          },
+          children: [selectedDoctype, ": ", (_ref = (_doctypes_find = doctypes.find(function (d) {
+            return d.doctype === selectedDoctype;
+          })) === null || _doctypes_find === void 0 ? void 0 : _doctypes_find.count) !== null && _ref !== void 0 ? _ref : 0, " ", "documents in cache"]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            color: t.textSecondary,
+            fontSize: 10
+          },
+          children: ["Use browser devtools console to inspect individual documents via", " ", /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              color: t.accent
+            },
+            children: "syncModule.getDocFromCache()"
+          })]
+        })]
+      })]
+    })]
+  });
+}
+function MutationsTab(param) {
+  var {
+    state,
+    t
+  } = param;
+  var [filter, setFilter] = (0, import_react.useState)("all");
+  var [expandedId, setExpandedId] = (0, import_react.useState)(null);
+  var entries = (0, import_react.useMemo)(function () {
+    var list = [];
+    if (filter === "all" || filter === "pending") list = list.concat(state.mutationJournal.pending);
+    if (filter === "all" || filter === "confirmed") list = list.concat(state.mutationJournal.confirmed);
+    if (filter === "all" || filter === "failed") list = list.concat(state.mutationJournal.failed);
+    return list.sort(function (a, b) {
+      return b.createdAt - a.createdAt;
+    });
+  }, [state.mutationJournal, filter]);
+  var statusColor = function statusColor2(s) {
+    return s === import_types.Status.Pending ? t.pending : s === import_types.Status.Confirmed ? t.success : t.error;
+  };
+  var filters = [{
+    key: "all",
+    label: "All",
+    count: state.mutationJournal.pending.length + state.mutationJournal.confirmed.length + state.mutationJournal.failed.length
+  }, {
+    key: "pending",
+    label: "Pending",
+    count: state.mutationJournal.pending.length
+  }, {
+    key: "confirmed",
+    label: "Confirmed",
+    count: state.mutationJournal.confirmed.length
+  }, {
+    key: "failed",
+    label: "Failed",
+    count: state.mutationJournal.failed.length
+  }];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    children: [/* Filter bar */
+    /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        display: "flex",
+        gap: 4,
+        marginBottom: 8
+      },
+      children: filters.map(function (f) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setFilter(f.key);
+          },
+          style: {
+            fontFamily: fontUi,
+            fontSize: 11,
+            padding: "3px 8px",
+            border: `1px solid ${filter === f.key ? t.accent : t.border}`,
+            borderRadius: 3,
+            backgroundColor: filter === f.key ? t.accent + "15" : "transparent",
+            color: filter === f.key ? t.accent : t.textSecondary,
+            cursor: "pointer"
+          },
+          children: [f.label, " (", f.count, ")"]
+        }, f.key);
+      })
+    }), /* Entries */
+    entries.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        fontFamily: fontUi,
+        fontSize: 12,
+        color: t.textSecondary,
+        padding: 16,
+        textAlign: "center"
+      },
+      children: "No mutations"
+    }), entries.map(function (entry) {
+      var _opIcons_entry_operation;
+      var isExpanded = expandedId === entry.id;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        style: {
+          padding: "4px 8px",
+          borderBottom: `1px solid ${t.border}`,
+          cursor: entry.error ? "pointer" : "default"
+        },
+        onClick: function onClick() {
+          return entry.error && setExpandedId(isExpanded ? null : entry.id);
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            fontFamily: fontMono,
+            fontSize: 11
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              width: 14,
+              textAlign: "center",
+              fontWeight: 700,
+              color: entry.operation === import_types.Operation.Create ? t.success : entry.operation === import_types.Operation.Delete ? t.error : t.warning
+            },
+            children: (_opIcons_entry_operation = opIcons[entry.operation]) !== null && _opIcons_entry_operation !== void 0 ? _opIcons_entry_operation : "?"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              color: t.text
+            },
+            children: entry.doctype
+          }), entry.docname && /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              color: t.textSecondary
+            },
+            children: truncate(entry.docname, 20)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              flex: 1
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Badge, {
+            bg: statusColor(entry.status) + "22",
+            color: statusColor(entry.status),
+            children: entry.status
+          }), entry.retryCount > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+            style: {
+              fontSize: 10,
+              color: t.textSecondary
+            },
+            children: ["retry: ", entry.retryCount]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              fontSize: 10,
+              color: t.textSecondary
+            },
+            children: relativeTime(entry.createdAt)
+          })]
+        }), isExpanded && entry.error && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          style: {
+            marginTop: 4,
+            padding: "4px 8px",
+            backgroundColor: t.error + "10",
+            borderRadius: 3,
+            fontFamily: fontMono,
+            fontSize: 10,
+            color: t.error,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-all"
+          },
+          children: entry.error
+        })]
+      }, entry.id);
+    })]
+  });
+}
+function StatsBar(param) {
+  var {
+    state,
+    t
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      padding: "4px 10px",
+      borderTop: `1px solid ${t.border}`,
+      fontFamily: fontMono,
+      fontSize: 10,
+      color: t.textSecondary,
+      display: "flex",
+      gap: 12,
+      alignItems: "center",
+      flexWrap: "wrap"
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+      children: [state.subscriptions.length, " subscriptions"]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: "\xB7"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+      children: [state.normalizedCache.size, " cached docs"]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: "\xB7"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+      children: [state.mutationJournal.pending.length, " pending mutations"]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: "\xB7"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: state.connection.isLeader ? "leader" : "follower"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: "\xB7"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: state.connection.isOnline ? "online" : "offline"
+    })]
+  });
+}
+var emptyState = {
+  subscriptions: [],
+  normalizedCache: {
+    size: 0,
+    doctypes: []
+  },
+  mutationJournal: {
+    pending: [],
+    confirmed: [],
+    failed: []
+  },
+  connection: {
+    socketConnected: false,
+    isLeader: false,
+    isOnline: true
+  }
+};
+function FrappeDevtoolsPanel(param) {
+  var {
+    syncModule,
+    devtoolsTheme
+  } = param;
+  var t = import_theme.themes[devtoolsTheme];
+  var [state, setState] = (0, import_react.useState)(emptyState);
+  var [selectedSubId, setSelectedSubId] = (0, import_react.useState)(null);
+  var [activeTab, setActiveTab] = (0, import_react.useState)("pages");
+  (0, import_react.useEffect)(function () {
+    setState(syncModule.__debug());
+    return syncModule.subscribeStore(function () {
+      setState(syncModule.__debug());
+    });
+  }, [syncModule]);
+  var selectedSub = (0, import_react.useMemo)(function () {
+    var _state_subscriptions_find;
+    return (_state_subscriptions_find = state.subscriptions.find(function (s) {
+      return s.id === selectedSubId;
+    })) !== null && _state_subscriptions_find !== void 0 ? _state_subscriptions_find : null;
+  }, [state.subscriptions, selectedSubId]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      backgroundColor: t.bg,
+      color: t.text,
+      fontFamily: fontUi,
+      fontSize: 12
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        display: "flex",
+        flex: 1,
+        overflow: "hidden"
+      },
+      children: [/* Sidebar */
+      /* @__PURE__ */(0, import_jsx_runtime.jsx)(Sidebar, {
+        state,
+        selected: selectedSubId,
+        onSelect: setSelectedSubId,
+        t
+      }), /* Main content */
+      /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden"
+        },
+        children: [/* Tabs */
+        /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            display: "flex",
+            borderBottom: `1px solid ${t.border}`,
+            padding: "0 8px"
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TabButton, {
+            active: activeTab === "pages",
+            onClick: function onClick() {
+              return setActiveTab("pages");
+            },
+            t,
+            children: "Pages"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabButton, {
+            active: activeTab === "cache",
+            onClick: function onClick() {
+              return setActiveTab("cache");
+            },
+            t,
+            children: "Cache"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabButton, {
+            active: activeTab === "mutations",
+            onClick: function onClick() {
+              return setActiveTab("mutations");
+            },
+            t,
+            children: "Mutations"
+          })]
+        }), /* Tab content */
+        /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            flex: 1,
+            overflow: "auto",
+            padding: 10
+          },
+          children: [activeTab === "pages" && selectedSub && /* @__PURE__ */(0, import_jsx_runtime.jsx)(PagesTab, {
+            sub: selectedSub,
+            syncModule,
+            t
+          }), activeTab === "pages" && !selectedSub && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+            style: {
+              color: t.textSecondary,
+              textAlign: "center",
+              padding: 32
+            },
+            children: "Select a subscription from the sidebar to view page state"
+          }), activeTab === "cache" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(CacheTab, {
+            state,
+            t
+          }), activeTab === "mutations" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(MutationsTab, {
+            state,
+            t
+          })]
+        })]
+      })]
+    }), /* Footer stats bar */
+    /* @__PURE__ */(0, import_jsx_runtime.jsx)(StatsBar, {
+      state,
+      t
+    })]
+  });
+}
+//# sourceMappingURL=FrappeDevtoolsPanel.native.js.map