jazz-tools 0.19.10 → 0.19.12

package/dist/inspector/chunk-YQNK5Y7B.js

@@ -0,0 +1,4108 @@
+"use client";
+
+// src/inspector/contexts/node.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+import { LocalNode } from "cojson";
+import { WasmCrypto } from "cojson/crypto/WasmCrypto";
+import { createWebSocketPeer } from "cojson-transport-ws";
+import { jsx } from "react/jsx-runtime";
+var NodeContext = createContext({
+  accountID: null,
+  localNode: null,
+  server: "wss://cloud.jazz.tools/",
+  createLocalNode: async () => {
+    throw new Error("createLocalNode not implemented");
+  },
+  reset: () => {
+    throw new Error("reset not implemented");
+  }
+});
+var crypto = null;
+async function getCrypto() {
+  if (crypto) return crypto;
+  crypto = await WasmCrypto.create();
+  return crypto;
+}
+function NodeProvider(props) {
+  const [accountID, setAccountID] = useState(
+    props?.accountID ?? null
+  );
+  const [localNode, setLocalNode] = useState(
+    props?.localNode ?? null
+  );
+  const [server, setServer] = useState(
+    props?.server ?? "wss://cloud.jazz.tools/"
+  );
+  useEffect(() => {
+    if (props.localNode !== void 0) setLocalNode(props.localNode);
+    if (props.accountID !== void 0) setAccountID(props.accountID);
+    if (props.server !== void 0) setServer(props.server);
+  }, [props.localNode, props.accountID, props.server]);
+  async function createLocalNode(accountID2, clientSecret, server2) {
+    if (localNode) {
+      localNode.gracefulShutdown();
+    }
+    setLocalNode(null);
+    const wsPeer = createWebSocketPeer({
+      id: "cloud",
+      websocket: new WebSocket(server2),
+      role: "server"
+    });
+    const crypto2 = await getCrypto();
+    const node = await LocalNode.withLoadedAccount({
+      accountID: accountID2,
+      accountSecret: clientSecret,
+      sessionID: crypto2.newRandomSessionID(accountID2),
+      peers: [wsPeer],
+      crypto: crypto2,
+      migration: async () => {
+        console.log("Not running any migration in inspector");
+      }
+    });
+    setLocalNode(node);
+    setAccountID(accountID2);
+    setServer(server2);
+  }
+  function reset() {
+    if (localNode) {
+      localNode.gracefulShutdown();
+    }
+    setLocalNode(null);
+    setAccountID(null);
+    setServer("wss://cloud.jazz.tools/");
+  }
+  return /* @__PURE__ */ jsx(
+    NodeContext.Provider,
+    {
+      value: { accountID, localNode, server, createLocalNode, reset },
+      children: props.children
+    }
+  );
+}
+function useNode() {
+  const context = useContext(NodeContext);
+  if (!context) {
+    throw new Error("useNode must be used within a NodeProvider");
+  }
+  return context;
+}
+
+// src/inspector/router/hash-router.tsx
+import {
+  useState as useState2,
+  useCallback,
+  useEffect as useEffect2,
+  useMemo
+} from "react";
+
+// src/inspector/router/context.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var RouterContext = createContext2(null);
+function useRouter() {
+  const context = useContext2(RouterContext);
+  if (!context) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  return context;
+}
+
+// src/inspector/router/hash-router.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function HashRouterProvider({
+  children,
+  defaultPath
+}) {
+  const [path, setPath] = useState2(() => {
+    if (typeof window === "undefined") return defaultPath || [];
+    const hash = window.location.hash.slice(2);
+    const defaultEncoded = encodePathToHash(defaultPath || []);
+    if (defaultPath) {
+      window.history.pushState({}, "", `#/${defaultEncoded}`);
+      return defaultPath;
+    }
+    if (hash) {
+      const path2 = decodePathFromHash(hash);
+      return path2;
+    }
+    window.history.pushState({}, "", `#/${encodePathToHash([])}`);
+    return [];
+  });
+  const updatePath = useCallback((newPath) => {
+    setPath(newPath);
+    if (typeof window !== "undefined") {
+      const hash = encodePathToHash(newPath);
+      window.history.pushState({}, "", `#/${hash}`);
+    }
+  }, []);
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(2);
+      const currentPath = encodePathToHash(path);
+      if (hash === currentPath) return;
+      if (hash) {
+        try {
+          const newPath = decodePathFromHash(hash);
+          setPath(newPath);
+        } catch (e) {
+          console.error("Failed to parse hash:", e);
+        }
+      } else if (defaultPath) {
+        setPath(defaultPath);
+      }
+    };
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [path, defaultPath]);
+  useEffect2(() => {
+    if (defaultPath) {
+      updatePath(defaultPath);
+    }
+  }, [defaultPath]);
+  const router = useMemo(() => {
+    const addPages = (newPages) => {
+      updatePath([...path, ...newPages]);
+    };
+    const goToIndex = (index) => {
+      updatePath(path.slice(0, index + 1));
+    };
+    const setPage = (coId) => {
+      updatePath([{ coId, name: "Root" }]);
+    };
+    const goBack = () => {
+      updatePath(path.slice(0, path.length - 1));
+    };
+    return {
+      path,
+      addPages,
+      goToIndex,
+      setPage,
+      goBack
+    };
+  }, [path, updatePath]);
+  return /* @__PURE__ */ jsx2(RouterContext.Provider, { value: router, children });
+}
+function encodePathToHash(path) {
+  return path.map((page) => {
+    if (page.name && page.name !== "Root") {
+      return `${page.coId}:${encodeURIComponent(page.name)}`;
+    }
+    return page.coId;
+  }).join("/");
+}
+function decodePathFromHash(hash) {
+  return hash.split("/").map((segment) => {
+    const [coId, encodedName] = segment.split(":");
+    return {
+      coId,
+      name: encodedName ? decodeURIComponent(encodedName) : void 0
+    };
+  });
+}
+
+// src/inspector/router/in-memory-router.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var STORAGE_KEY = "jazz-inspector-paths";
+function InMemoryRouterProvider({
+  children,
+  defaultPath
+}) {
+  const [path, setPath] = useState3(() => {
+    if (typeof window === "undefined") return [];
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      try {
+        return JSON.parse(stored);
+      } catch (e) {
+        console.warn("Failed to parse stored path:", e);
+      }
+    }
+    return defaultPath || [];
+  });
+  const updatePath = useCallback2((newPath) => {
+    setPath(newPath);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(newPath));
+  }, []);
+  useEffect3(() => {
+    if (defaultPath && JSON.stringify(path) !== JSON.stringify(defaultPath)) {
+      updatePath(defaultPath);
+    }
+  }, [defaultPath, path, updatePath]);
+  const router = useMemo2(() => {
+    const addPages = (newPages) => {
+      updatePath([...path, ...newPages]);
+    };
+    const goToIndex = (index) => {
+      updatePath(path.slice(0, index + 1));
+    };
+    const setPage = (coId) => {
+      updatePath([{ coId, name: "Root" }]);
+    };
+    const goBack = () => {
+      updatePath(path.slice(0, path.length - 1));
+    };
+    return {
+      path,
+      addPages,
+      goToIndex,
+      setPage,
+      goBack
+    };
+  }, [path, updatePath]);
+  return /* @__PURE__ */ jsx3(RouterContext.Provider, { value: router, children });
+}
+
+// src/inspector/viewer/page-stack.tsx
+import { styled as styled24 } from "goober";
+
+// src/inspector/viewer/page.tsx
+import { styled as styled21 } from "goober";
+import React5 from "react";
+
+// src/inspector/ui/badge.tsx
+import { styled } from "goober";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StyledBadge = styled("span")`
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.125rem 0.25rem;
+  margin-left: -0.125rem;
+  border-radius: var(--j-radius-sm);
+  background-color: var(--j-foreground);
+  display: inline-block;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: var(--j-text-color-strong);
+`;
+function Badge({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx4(StyledBadge, { className, children });
+}
+
+// src/inspector/ui/heading.tsx
+import { styled as styled2 } from "goober";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StyledHeading = styled2("h1")`
+  font-size: 1.125rem;
+  text-align: center;
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+`;
+function Heading({
+  children,
+  className,
+  id
+}) {
+  return /* @__PURE__ */ jsx5(StyledHeading, { className, id, children });
+}
+
+// src/inspector/ui/text.tsx
+import { styled as styled3 } from "goober";
+import React2 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var BaseText = React2.forwardRef(
+  ({ muted, strong, small, inline, mono, ...rest }, ref) => /* @__PURE__ */ jsx6("div", { ref, ...rest })
+);
+var StyledText = styled3(BaseText)`
+  ${(props) => props.muted && `
+    color: var(--j-neutral-500);
+  `}
+
+  ${(props) => props.strong && `
+    font-weight: 500;
+    color: var(--j-text-color-strong);
+  `}
+
+  ${(props) => props.small && `
+    font-size: 0.875rem;
+  `}
+
+  ${(props) => props.inline && `
+    display: inline;
+  `}
+
+  ${(props) => props.mono && `
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  `}
+`;
+function Text(props) {
+  return /* @__PURE__ */ jsx6(StyledText, { ...props });
+}
+
+// src/inspector/viewer/account-or-group-text.tsx
+import { useEffect as useEffect6, useState as useState6 } from "react";
+
+// src/inspector/ui/button.tsx
+import { styled as styled4 } from "goober";
+import { forwardRef } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var StyledButton = styled4("button")`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  text-align: center;
+  transition: colors 0.2s;
+  border-radius: var(--j-radius-lg);
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+  opacity: ${(props) => props.disabled ? 0.5 : 1};
+  cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
+
+  ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return `
+          padding: 0.375rem 0.75rem;
+          background-color: var(--j-primary-color);
+          border-color: var(--j-primary-color);
+          color: white;
+          font-weight: 500;
+          &:hover {
+            opacity: 0.8;
+          }
+        `;
+    case "secondary":
+      return `
+          padding: 0.375rem 0.75rem;
+          color: var(--j-text-color-strong);
+          border: 1px solid var(--j-border-color);
+          font-weight: 500;
+          &:hover {
+            border-color: var(--j-border-color-hover);
+          }
+        `;
+    case "link":
+      return `
+          color: var(--j-link-color);
+          &:hover {
+            text-decoration: underline;
+          }
+        `;
+    case "destructive":
+      return `
+          padding: 0.375rem 0.75rem;
+          background-color: var(--j-destructive-color);
+          border-color: var(--j-destructive-color);
+          color: white;
+          font-weight: 500;
+          &:hover {
+            opacity: 0.8;
+          }
+        `;
+    default:
+      return "";
+  }
+}}
+`;
+var Button = forwardRef(
+  ({
+    className,
+    children,
+    variant = "primary",
+    disabled,
+    type = "button",
+    ...buttonProps
+  }, ref) => {
+    return /* @__PURE__ */ jsx7(
+      StyledButton,
+      {
+        ref,
+        ...buttonProps,
+        disabled,
+        className,
+        type,
+        variant,
+        children
+      }
+    );
+  }
+);
+
+// src/inspector/viewer/use-resolve-covalue.ts
+import { useEffect as useEffect5, useState as useState5 } from "react";
+
+// src/inspector/viewer/co-stream-view.tsx
+import { base64URLtoBytes } from "cojson";
+import { styled as styled5 } from "goober";
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { Fragment, jsx as jsx8, jsxs } from "react/jsx-runtime";
+function isBinaryStreamStart(item) {
+  return typeof item === "object" && item !== null && "type" in item && item.type === "start";
+}
+function detectCoStreamType(value) {
+  const firstKey = Object.keys(value.items)[0];
+  if (!firstKey)
+    return {
+      type: "unknown"
+    };
+  const items = value.items[firstKey]?.map((v) => v.value);
+  if (!items)
+    return {
+      type: "unknown"
+    };
+  const firstItem = items[0];
+  if (!firstItem)
+    return {
+      type: "unknown"
+    };
+  if (isBinaryStreamStart(firstItem)) {
+    return {
+      type: "binary",
+      items
+    };
+  } else {
+    return {
+      type: "coStream"
+    };
+  }
+}
+async function getBlobFromCoStream({
+  items,
+  onlyFirstChunk = false
+}) {
+  if (onlyFirstChunk && items.length > 1) {
+    items = items.slice(0, 2);
+  }
+  const chunks = [];
+  const binary_U_prefixLength = 8;
+  let lastProgressUpdate = Date.now();
+  for (const item of items.slice(1)) {
+    if (item.type === "end") {
+      break;
+    }
+    if (item.type !== "chunk") {
+      console.error("Invalid binary stream chunk", item);
+      return void 0;
+    }
+    const chunk = base64URLtoBytes(item.chunk.slice(binary_U_prefixLength));
+    chunks.push(chunk);
+    if (Date.now() - lastProgressUpdate > 100) {
+      lastProgressUpdate = Date.now();
+    }
+  }
+  const defaultMime = items[0] && "mimeType" in items[0] ? items[0].mimeType : null;
+  const blob = new Blob(chunks, defaultMime ? { type: defaultMime } : {});
+  const mimeType = defaultMime === "" ? await detectPDFMimeType(blob) : defaultMime;
+  return {
+    blob,
+    mimeType,
+    unfinishedChunks: items.length > 1,
+    totalSize: items[0] && "totalSizeBytes" in items[0] ? items[0].totalSizeBytes : void 0
+  };
+}
+var detectPDFMimeType = async (blob) => {
+  const arrayBuffer = await blob.slice(0, 4).arrayBuffer();
+  const uint8Array = new Uint8Array(arrayBuffer);
+  const header = uint8Array.reduce(
+    (acc, byte) => acc + String.fromCharCode(byte),
+    ""
+  );
+  if (header === "%PDF") {
+    return "application/pdf";
+  }
+  return "unknown";
+};
+var BinaryDownloadButton = ({
+  pdfBlob,
+  fileName = "document",
+  label,
+  mimeType
+}) => {
+  const downloadFile = () => {
+    const url = URL.createObjectURL(
+      new Blob([pdfBlob], mimeType ? { type: mimeType } : {})
+    );
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = mimeType === "application/pdf" ? `${fileName}.pdf` : fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  return /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: downloadFile, children: [
+    "\u2B07\uFE0F ",
+    label
+  ] });
+};
+var LabelContentPairContainer = styled5("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+`;
+var BinaryStreamGrid = styled5("div")`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  max-width: 48rem;
+`;
+var ImagePreviewContainer = styled5("div")`
+  background-color: rgb(249 250 251);
+  padding: 0.75rem;
+  border-radius: var(--j-radius-md);
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(28 25 23);
+  }
+`;
+var CoStreamGrid = styled5("div")`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+`;
+var CoStreamItemContainer = styled5("div")`
+  padding: 0.75rem;
+  border-radius: var(--j-radius-lg);
+  overflow: hidden;
+  border: 1px solid rgb(229 231 235);
+  cursor: pointer;
+  box-shadow: var(--j-shadow-sm);
+  &:hover {
+    background-color: rgb(243 244 246 / 0.05);
+  }
+`;
+var LabelContentPair = ({
+  label,
+  content
+}) => {
+  return /* @__PURE__ */ jsxs(LabelContentPairContainer, { children: [
+    /* @__PURE__ */ jsx8("span", { children: label }),
+    /* @__PURE__ */ jsx8("span", { children: content })
+  ] });
+};
+function RenderCoBinaryStream({
+  value,
+  items
+}) {
+  const [file, setFile] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(true);
+  useEffect4(() => {
+    getBlobFromCoStream({
+      items,
+      onlyFirstChunk: true
+    }).then((v) => {
+      if (v) {
+        setFile(v);
+        if (v.mimeType.includes("image")) {
+          getBlobFromCoStream({
+            items
+          }).then((s) => {
+            if (s) setFile(s);
+          });
+        }
+      }
+    }).finally(() => setIsLoading(false));
+  }, [items]);
+  if (!isLoading && !file) return /* @__PURE__ */ jsx8("div", { children: "No blob" });
+  if (isLoading) return /* @__PURE__ */ jsx8("div", { children: "Loading..." });
+  if (!file) return /* @__PURE__ */ jsx8("div", { children: "No blob" });
+  const { blob, mimeType } = file;
+  const sizeInKB = (file.totalSize || 0) / 1024;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(BinaryStreamGrid, { children: [
+      /* @__PURE__ */ jsx8(
+        LabelContentPair,
+        {
+          label: "Mime Type",
+          content: /* @__PURE__ */ jsx8(Badge, { children: mimeType || "No mime type" })
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        LabelContentPair,
+        {
+          label: "Size",
+          content: /* @__PURE__ */ jsxs("span", { children: [
+            sizeInKB.toFixed(2),
+            " KB"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        LabelContentPair,
+        {
+          label: "Download",
+          content: /* @__PURE__ */ jsx8(
+            BinaryDownloadButton,
+            {
+              fileName: value.id.toString(),
+              pdfBlob: blob,
+              mimeType,
+              label: mimeType === "application/pdf" ? "Download PDF" : "Download file"
+            }
+          )
+        }
+      )
+    ] }),
+    mimeType === "image/png" || mimeType === "image/jpeg" ? /* @__PURE__ */ jsx8(
+      LabelContentPair,
+      {
+        label: "Preview",
+        content: /* @__PURE__ */ jsx8(ImagePreviewContainer, { children: /* @__PURE__ */ jsx8(RenderBlobImage, { blob }) })
+      }
+    ) : null
+  ] });
+}
+function RenderCoStream({
+  value,
+  node
+}) {
+  const streamPerUser = Object.keys(value.items);
+  const userCoIds = streamPerUser.map((stream) => stream.split("_session")[0]);
+  return /* @__PURE__ */ jsx8(CoStreamGrid, { children: userCoIds.map((id, idx) => /* @__PURE__ */ jsxs(CoStreamItemContainer, { children: [
+    /* @__PURE__ */ jsx8(AccountOrGroupText, { coId: id, node }),
+    value.items[streamPerUser[idx]]?.map(
+      (item) => /* @__PURE__ */ jsxs("div", { children: [
+        new Date(item.madeAt).toLocaleString(),
+        " ",
+        JSON.stringify(item.value)
+      ] }, item.tx.txIndex + item.tx.sessionID)
+    )
+  ] }, id)) });
+}
+function CoStreamView({
+  value,
+  node
+}) {
+  const streamType = detectCoStreamType(value);
+  if (streamType.type === "binary") {
+    if (streamType.items === void 0) {
+      return /* @__PURE__ */ jsx8("div", { children: "No binary stream" });
+    }
+    return /* @__PURE__ */ jsx8(
+      RenderCoBinaryStream,
+      {
+        value,
+        items: streamType.items
+      }
+    );
+  }
+  if (streamType.type === "coStream") {
+    return /* @__PURE__ */ jsx8(RenderCoStream, { value, node });
+  }
+  if (streamType.type === "unknown") return /* @__PURE__ */ jsx8("div", { children: "Unknown stream type" });
+  return /* @__PURE__ */ jsx8("div", { children: "Unknown stream type" });
+}
+function RenderBlobImage({ blob }) {
+  const urlCreator = window.URL || window.webkitURL;
+  return /* @__PURE__ */ jsx8("img", { src: urlCreator.createObjectURL(blob) });
+}
+
+// src/inspector/viewer/use-resolve-covalue.ts
+var isBrowserImage = (coValue) => {
+  return "originalSize" in coValue && "placeholderDataURL" in coValue;
+};
+async function resolveCoValue(coValueId, node) {
+  const value = await node.load(coValueId);
+  if (value === "unavailable") {
+    return {
+      value: void 0,
+      snapshot: "unavailable",
+      type: null,
+      extendedType: void 0
+    };
+  }
+  const snapshot = value.toJSON();
+  const type = value.type;
+  let extendedType;
+  if (type === "comap") {
+    if (isBrowserImage(snapshot)) {
+      extendedType = "image";
+    } else if (value.headerMeta?.type === "account") {
+      extendedType = "account";
+    } else if (value.core.isGroup()) {
+      extendedType = "group";
+    }
+  }
+  return {
+    value,
+    snapshot,
+    type,
+    extendedType
+  };
+}
+function subscribeToCoValue(coValueId, node, callback) {
+  return node.subscribe(coValueId, (value) => {
+    if (value === "unavailable") {
+      callback({
+        value: void 0,
+        snapshot: "unavailable",
+        type: null,
+        extendedType: void 0
+      });
+    } else {
+      const snapshot = value.toJSON();
+      const type = value.type;
+      let extendedType;
+      if (type === "comap") {
+        if (isBrowserImage(snapshot)) {
+          extendedType = "image";
+        } else if (value.headerMeta?.type === "account") {
+          extendedType = "account";
+        } else if (value.core.isGroup()) {
+          extendedType = "group";
+        }
+      } else if (type === "costream") {
+        const coStream = detectCoStreamType(value);
+        if (coStream.type === "binary") {
+          extendedType = "file";
+        }
+      }
+      callback({
+        value,
+        snapshot,
+        type,
+        extendedType
+      });
+    }
+  });
+}
+function useResolvedCoValue(coValueId, node) {
+  const [result, setResult] = useState5();
+  useEffect5(() => {
+    let isMounted = true;
+    const unsubscribe = subscribeToCoValue(coValueId, node, (newResult) => {
+      if (isMounted) {
+        setResult(newResult);
+      }
+    });
+    return () => {
+      isMounted = false;
+      unsubscribe();
+    };
+  }, [coValueId, node]);
+  return result || {
+    value: void 0,
+    snapshot: void 0,
+    type: void 0,
+    extendedType: void 0
+  };
+}
+function useResolvedCoValues(coValueIds, node) {
+  const [results, setResults] = useState5([]);
+  useEffect5(() => {
+    let isMounted = true;
+    const unsubscribes = [];
+    coValueIds.forEach((coValueId, index) => {
+      const unsubscribe = subscribeToCoValue(coValueId, node, (newResult) => {
+        if (isMounted) {
+          setResults((prevResults) => {
+            const newResults = prevResults.slice(0, coValueIds.length);
+            newResults[index] = newResult;
+            return newResults;
+          });
+        }
+      });
+      unsubscribes.push(unsubscribe);
+    });
+    return () => {
+      isMounted = false;
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [coValueIds, node]);
+  return results;
+}
+
+// src/inspector/viewer/account-or-group-text.tsx
+import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
+function AccountOrGroupText({
+  coId,
+  node,
+  showId = false,
+  onClick
+}) {
+  const { snapshot, extendedType } = useResolvedCoValue(coId, node);
+  const [name, setName] = useState6(null);
+  useEffect6(() => {
+    if (snapshot && typeof snapshot === "object" && "profile" in snapshot) {
+      const profileId = snapshot.profile;
+      resolveCoValue(profileId, node).then((profileResult) => {
+        if (profileResult.snapshot && typeof profileResult.snapshot === "object" && "name" in profileResult.snapshot) {
+          setName(profileResult.snapshot.name);
+        }
+      });
+    }
+  }, [snapshot, node, extendedType]);
+  if (!snapshot) return /* @__PURE__ */ jsx9("span", { children: "Loading..." });
+  if (extendedType !== "account" && extendedType !== "group") {
+    return /* @__PURE__ */ jsx9("span", { children: "CoID is not an account or group" });
+  }
+  const displayName = extendedType === "account" ? name || "Account" : "Group";
+  const displayText = showId ? `${displayName} <${coId}>` : displayName;
+  if (onClick) {
+    return /* @__PURE__ */ jsx9(Button, { variant: "link", onClick: () => onClick(displayName), children: displayText });
+  }
+  return /* @__PURE__ */ jsx9(Fragment2, { children: displayText });
+}
+
+// src/inspector/viewer/grid-view.tsx
+import { useState as useState9 } from "react";
+import { styled as styled12 } from "goober";
+
+// src/inspector/viewer/type-icon.tsx
+import { styled as styled6 } from "goober";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var IconText = styled6("span")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+`;
+var UnavailableText = styled6("div")`
+  font-weight: 500;
+`;
+var EmptySpace = styled6("div")`
+  white-space: pre;
+  width: 3.5rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+`;
+var TypeIcon = ({
+  type,
+  extendedType
+}) => {
+  const iconMap = {
+    record: "{} Record",
+    image: "\u{1F5BC}\uFE0F Image",
+    comap: "{} CoMap",
+    costream: "\u224B CoFeed",
+    colist: "\u2630 CoList",
+    account: "\u{1F464} Account",
+    group: "\u{1F465} Group",
+    file: "\u{1F4C3} FileStream",
+    coplaintext: "\u{1F4C4} CoPlainText"
+  };
+  const iconKey = extendedType || type;
+  const icon2 = iconMap[iconKey];
+  return icon2 ? /* @__PURE__ */ jsx10(IconText, { children: icon2 }) : null;
+};
+var ResolveIcon = ({
+  coId,
+  node
+}) => {
+  const { type, extendedType, snapshot } = useResolvedCoValue(coId, node);
+  if (snapshot === "unavailable" && !type) {
+    return /* @__PURE__ */ jsx10(UnavailableText, { children: "Unavailable" });
+  }
+  if (!type) return /* @__PURE__ */ jsx10(EmptySpace, { children: " " });
+  return /* @__PURE__ */ jsx10(TypeIcon, { type, extendedType });
+};
+
+// src/inspector/viewer/types.ts
+var isCoId = (coId) => typeof coId === "string" && coId.startsWith("co_") && !coId.includes("inviteSecret");
+
+// src/inspector/viewer/value-renderer.tsx
+import { styled as styled7 } from "goober";
+import React3, { useState as useState7 } from "react";
+
+// src/inspector/ui/icons/caution.tsx
+import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+function CautionIcon(props) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      ...props,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "12", fill: "currentColor" }),
+        /* @__PURE__ */ jsx11("rect", { x: "10.5", y: "6", width: "3", height: "7.5", rx: "1.5", fill: "#fff" }),
+        /* @__PURE__ */ jsx11("rect", { x: "10.5", y: "16.5", width: "3", height: "3", rx: "1.5", fill: "#fff" })
+      ]
+    }
+  );
+}
+
+// src/inspector/ui/icons/chevron-down-icon.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx12(
+    "svg",
+    {
+      ...props,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+
+// src/inspector/ui/icons/delete-icon.tsx
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+function DeleteIcon(props) {
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      ...props,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinejoin: "round",
+      className: "lucide lucide-trash-icon lucide-trash",
+      children: [
+        /* @__PURE__ */ jsx13("path", { d: "M3 6h18" }),
+        /* @__PURE__ */ jsx13("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+        /* @__PURE__ */ jsx13("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+      ]
+    }
+  );
+}
+
+// src/inspector/ui/icons/edit-icon.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function EditIcon(props) {
+  return /* @__PURE__ */ jsx14(
+    "svg",
+    {
+      ...props,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinejoin: "round",
+      className: "lucide lucide-edit lucide-pencil",
+      children: /* @__PURE__ */ jsx14("path", { d: "M13.2942 7.95881C13.5533 7.63559 13.5013 7.16358 13.178 6.90453C12.8548 6.64549 12.3828 6.6975 12.1238 7.02072L13.2942 7.95881ZM6.811 14.8488L7.37903 15.3385C7.38489 15.3317 7.39062 15.3248 7.39623 15.3178L6.811 14.8488ZM6.64 15.2668L5.89146 15.2179L5.8908 15.2321L6.64 15.2668ZM6.5 18.2898L5.7508 18.2551C5.74908 18.2923 5.75013 18.3296 5.75396 18.3667L6.5 18.2898ZM7.287 18.9768L7.31152 19.7264C7.36154 19.7247 7.41126 19.7181 7.45996 19.7065L7.287 18.9768ZM10.287 18.2658L10.46 18.9956L10.4716 18.9927L10.287 18.2658ZM10.672 18.0218L11.2506 18.4991L11.2571 18.491L10.672 18.0218ZM17.2971 10.959C17.5562 10.6358 17.5043 10.1638 17.1812 9.90466C16.8581 9.64552 16.386 9.69742 16.1269 10.0206L17.2971 10.959ZM12.1269 7.02052C11.8678 7.34365 11.9196 7.81568 12.2428 8.07484C12.5659 8.33399 13.0379 8.28213 13.2971 7.95901L12.1269 7.02052ZM14.3 5.50976L14.8851 5.97901C14.8949 5.96672 14.9044 5.95412 14.9135 5.94123L14.3 5.50976ZM15.929 5.18976L16.4088 4.61332C16.3849 4.59344 16.3598 4.57507 16.3337 4.5583L15.929 5.18976ZM18.166 7.05176L18.6968 6.52192C18.6805 6.50561 18.6635 6.49007 18.6458 6.47532L18.166 7.05176ZM18.5029 7.87264L19.2529 7.87676V7.87676L18.5029 7.87264ZM18.157 8.68976L17.632 8.15412C17.6108 8.17496 17.5908 8.19704 17.5721 8.22025L18.157 8.68976ZM16.1271 10.0203C15.8678 10.3433 15.9195 10.8153 16.2425 11.0746C16.5655 11.3339 17.0376 11.2823 17.2969 10.9593L16.1271 10.0203ZM13.4537 7.37862C13.3923 6.96898 13.0105 6.68666 12.6009 6.74805C12.1912 6.80943 11.9089 7.19127 11.9703 7.60091L13.4537 7.37862ZM16.813 11.2329C17.2234 11.1772 17.5109 10.7992 17.4552 10.3888C17.3994 9.97834 17.0215 9.69082 16.611 9.74659L16.813 11.2329ZM12.1238 7.02072L6.22577 14.3797L7.39623 15.3178L13.2942 7.95881L12.1238 7.02072ZM6.24297 14.359C6.03561 14.5995 5.91226 14.9011 5.89159 15.218L7.38841 15.3156C7.38786 15.324 7.38457 15.3321 7.37903 15.3385L6.24297 14.359ZM5.8908 15.2321L5.7508 18.2551L7.2492 18.3245L7.3892 15.3015L5.8908 15.2321ZM5.75396 18.3667C5.83563 19.1586 6.51588 19.7524 7.31152 19.7264L7.26248 18.2272C7.25928 18.2273 7.25771 18.2268 7.25669 18.2264C7.25526 18.2259 7.25337 18.2249 7.25144 18.2232C7.2495 18.2215 7.24825 18.2198 7.24754 18.2185C7.24703 18.2175 7.24637 18.216 7.24604 18.2128L5.75396 18.3667ZM7.45996 19.7065L10.46 18.9955L10.114 17.536L7.11404 18.247L7.45996 19.7065ZM10.4716 18.9927C10.7771 18.9151 11.05 18.7422 11.2506 18.499L10.0934 17.5445C10.0958 17.5417 10.0989 17.5397 10.1024 17.5388L10.4716 18.9927ZM11.2571 18.491L17.2971 10.959L16.1269 10.0206L10.0869 17.5526L11.2571 18.491ZM13.2971 7.95901L14.8851 5.97901L13.7149 5.04052L12.1269 7.02052L13.2971 7.95901ZM14.9135 5.94123C15.0521 5.74411 15.3214 5.6912 15.5243 5.82123L16.3337 4.5583C15.4544 3.99484 14.2873 4.2241 13.6865 5.0783L14.9135 5.94123ZM15.4492 5.7662L17.6862 7.6282L18.6458 6.47532L16.4088 4.61332L15.4492 5.7662ZM17.6352 7.58161C17.7111 7.6577 17.7535 7.761 17.7529 7.86852L19.2529 7.87676C19.2557 7.36905 19.0555 6.88127 18.6968 6.52192L17.6352 7.58161ZM17.7529 7.86852C17.7524 7.97604 17.7088 8.07886 17.632 8.15412L18.682 9.22541C19.0446 8.87002 19.2501 8.38447 19.2529 7.87676L17.7529 7.86852ZM17.5721 8.22025L16.1271 10.0203L17.2969 10.9593L18.7419 9.15928L17.5721 8.22025ZM11.9703 7.60091C12.3196 9.93221 14.4771 11.5503 16.813 11.2329L16.611 9.74659C15.0881 9.95352 13.6815 8.89855 13.4537 7.37862L11.9703 7.60091Z" })
+    }
+  );
+}
+
+// src/inspector/ui/icons/link-icon.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function LinkIcon(props) {
+  return /* @__PURE__ */ jsx15(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 1.5,
+      stroke: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ jsx15(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+        }
+      )
+    }
+  );
+}
+
+// src/inspector/ui/icons/history.tsx
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+function HistoryIcon(props) {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      ...props,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinejoin: "round",
+      className: "lucide lucide-trash-icon lucide-trash",
+      children: [
+        /* @__PURE__ */ jsx16(
+          "path",
+          {
+            d: "M5.52786 16.7023C6.6602 18.2608 8.3169 19.3584 10.1936 19.7934C12.0703 20.2284 14.0409 19.9716 15.7434 19.0701C17.446 18.1687 18.766 16.6832 19.4611 14.8865C20.1562 13.0898 20.1796 11.1027 19.527 9.29011C18.8745 7.47756 17.5898 5.96135 15.909 5.02005C14.2282 4.07875 12.2641 3.77558 10.3777 4.16623C8.49129 4.55689 6.80919 5.61514 5.64045 7.14656C4.47171 8.67797 3.89482 10.5797 4.01579 12.5023M4.01579 12.5023L2.51579 11.0023M4.01579 12.5023L5.51579 11.0023",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "path",
+          {
+            d: "M12 8V12L15 15",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/inspector/ui/icons/add-icon.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function AddIcon(props) {
+  return /* @__PURE__ */ jsx17(
+    "svg",
+    {
+      ...props,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx17(
+        "path",
+        {
+          d: "M4 12H20M12 4V20",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+// src/inspector/ui/icon.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var icons = {
+  caution: CautionIcon,
+  chevronDown: ChevronDownIcon,
+  delete: DeleteIcon,
+  edit: EditIcon,
+  link: LinkIcon,
+  history: HistoryIcon,
+  add: AddIcon
+};
+var sizes = {
+  "2xs": 14,
+  xs: 16,
+  sm: 20,
+  md: 24,
+  lg: 28,
+  xl: 28,
+  "2xl": 32,
+  "3xl": 36,
+  "4xl": 40,
+  "5xl": 48,
+  "6xl": 60,
+  "7xl": 72,
+  "8xl": 96,
+  "9xl": 128
+};
+var strokeWidths = {
+  "2xs": 2.5,
+  xs: 2,
+  sm: 2,
+  md: 1.5,
+  lg: 1.5,
+  xl: 1.5,
+  "2xl": 1.25,
+  "3xl": 1.25,
+  "4xl": 1.25,
+  "5xl": 1,
+  "6xl": 1,
+  "7xl": 1,
+  "8xl": 1,
+  "9xl": 1
+};
+function Icon({
+  name,
+  size = "md",
+  className,
+  ...svgProps
+}) {
+  if (!name || !icons.hasOwnProperty(name)) {
+    throw new Error(`Icon not found: ${name}`);
+  }
+  const IconComponent = icons?.hasOwnProperty(name) ? icons[name] : icon;
+  return /* @__PURE__ */ jsx18(
+    IconComponent,
+    {
+      "aria-hidden": "true",
+      size: sizes[size],
+      strokeWidth: strokeWidths[size],
+      strokeLinecap: "round",
+      ...svgProps
+    }
+  );
+}
+
+// src/inspector/viewer/value-renderer.tsx
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+var LinkContainer = styled7("span")`
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+`;
+var BooleanText = styled7("span")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  ${(props) => props.value ? `
+    color: var(--j-success-color);
+  ` : `
+    color: var(--j-destructive-color);
+  `}
+`;
+var ObjectContent = styled7("pre")`
+  margin-top: 0.375rem;
+  font-size: 0.875rem;
+  white-space: pre-wrap;
+`;
+var PreviewContainer = styled7("div")`
+  font-size: 0.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+`;
+var PreviewGrid = styled7("div")`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+`;
+var PreviewMoreText = styled7(Text)`
+  text-align: left;
+  margin-top: 0.5rem;
+`;
+var ImagePreviewContainer2 = styled7("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+var PreviewImage = styled7("img")`
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid white;
+  box-shadow: var(--j-shadow-sm);
+  margin: 0.5rem 0;
+`;
+var RecordText = styled7("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+var ListText = styled7("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+function ValueRenderer({
+  json,
+  onCoIDClick,
+  compact
+}) {
+  const [isExpanded, setIsExpanded] = useState7(false);
+  if (typeof json === "undefined" || json === void 0) {
+    return /* @__PURE__ */ jsx19(Text, { muted: true, children: "undefined" });
+  }
+  if (json === null) {
+    return /* @__PURE__ */ jsx19(Text, { muted: true, children: "null" });
+  }
+  if (typeof json === "string" && isCoId(json)) {
+    const content = /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      json,
+      onCoIDClick && /* @__PURE__ */ jsx19(Icon, { name: "link" })
+    ] });
+    if (onCoIDClick) {
+      return /* @__PURE__ */ jsx19(
+        Button,
+        {
+          variant: "link",
+          onClick: () => {
+            onCoIDClick?.(json);
+          },
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx19(LinkContainer, { children: content });
+  }
+  if (typeof json === "string") {
+    return /* @__PURE__ */ jsx19(Text, { children: json });
+  }
+  if (typeof json === "number") {
+    return /* @__PURE__ */ jsx19(Text, { mono: true, children: json });
+  }
+  if (typeof json === "boolean") {
+    return /* @__PURE__ */ jsx19(BooleanText, { value: json, children: json.toString() });
+  }
+  const longJson = JSON.stringify(json, null, 2);
+  const shortJson = longJson.split("\n").slice(0, compact ? 3 : 8).join("\n");
+  const hasDifference = longJson !== shortJson;
+  if (typeof json === "object") {
+    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx19("p", { children: Array.isArray(json) ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        "Array (",
+        json.length,
+        ")"
+      ] }) : /* @__PURE__ */ jsx19(Fragment3, { children: "Object" }) }),
+      /* @__PURE__ */ jsxs5(ObjectContent, { children: [
+        isExpanded ? longJson : shortJson,
+        hasDifference && !isExpanded ? "\n ..." : null
+      ] }),
+      !compact && hasDifference ? /* @__PURE__ */ jsx19(Button, { variant: "link", onClick: () => setIsExpanded(!isExpanded), children: isExpanded ? "Show less" : "Show more" }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsx19("span", { children: String(json) });
+}
+var CoMapPreview = ({
+  coId,
+  node,
+  limit = 6
+}) => {
+  const { value, snapshot, type, extendedType } = useResolvedCoValue(
+    coId,
+    node
+  );
+  if (!snapshot) {
+    return /* @__PURE__ */ jsx19(
+      "div",
+      {
+        style: {
+          borderRadius: "0.25rem",
+          backgroundColor: "var(--j-foreground)",
+          animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+          whiteSpace: "pre",
+          width: "6rem"
+        },
+        children: " "
+      }
+    );
+  }
+  if (snapshot === "unavailable" && !value) {
+    return /* @__PURE__ */ jsx19(Text, { inline: true, muted: true, children: "Unavailable" });
+  }
+  if (type === "coplaintext") {
+    return /* @__PURE__ */ jsx19(Fragment3, { children: value.toString() });
+  }
+  if (extendedType === "image" && isBrowserImage(snapshot)) {
+    return /* @__PURE__ */ jsxs5(ImagePreviewContainer2, { children: [
+      /* @__PURE__ */ jsx19(PreviewImage, { src: snapshot.placeholderDataURL }),
+      /* @__PURE__ */ jsxs5(Text, { inline: true, small: true, muted: true, children: [
+        snapshot.originalSize[0],
+        " x ",
+        snapshot.originalSize[1]
+      ] })
+    ] });
+  }
+  if (extendedType === "record") {
+    return /* @__PURE__ */ jsxs5(RecordText, { children: [
+      "Record",
+      " ",
+      /* @__PURE__ */ jsxs5(Text, { inline: true, muted: true, children: [
+        "(",
+        Object.keys(snapshot).length,
+        ")"
+      ] })
+    ] });
+  }
+  if (type === "colist") {
+    return /* @__PURE__ */ jsxs5(ListText, { children: [
+      "List",
+      " ",
+      /* @__PURE__ */ jsxs5(Text, { inline: true, muted: true, children: [
+        "(",
+        snapshot.length,
+        ")"
+      ] })
+    ] });
+  }
+  const properties = Object.entries(snapshot);
+  const limitedProperties = extendedType === "account" ? properties.filter(
+    ([key]) => !key.startsWith("key_z") && !key.startsWith("sealer_z") && key !== "readKey"
+  ).slice(0, limit) : properties.slice(0, limit);
+  return /* @__PURE__ */ jsxs5(PreviewContainer, { children: [
+    /* @__PURE__ */ jsx19(PreviewGrid, { children: limitedProperties.map(([key, value2]) => /* @__PURE__ */ jsxs5(React3.Fragment, { children: [
+      /* @__PURE__ */ jsxs5(Text, { strong: true, children: [
+        key,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx19(ValueRenderer, { compact: true, json: value2 })
+    ] }, key)) }),
+    properties.length > limit && /* @__PURE__ */ jsxs5(PreviewMoreText, { muted: true, small: true, children: [
+      properties.length - limit,
+      " more"
+    ] })
+  ] });
+};
+
+// src/inspector/viewer/co-value-editor.tsx
+import { useState as useState8 } from "react";
+import { styled as styled9 } from "goober";
+
+// src/inspector/ui/select.tsx
+import { styled as styled8 } from "goober";
+import { useId } from "react";
+import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+var SelectContainer = styled8("div")`
+  display: grid;
+  gap: 0.25rem;
+`;
+var SelectWrapper = styled8("div")`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+var StyledSelect = styled8("select")`
+  width: 100%;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem 0.5rem 0.875rem;
+  padding-right: 2rem;
+  box-shadow: var(--j-shadow-sm);
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+  appearance: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+var SelectIcon = styled8("span")`
+  position: absolute;
+  right: 0.5em;
+  color: var(--j-neutral-400);
+  pointer-events: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--j-neutral-900);
+  }
+`;
+function Select(props) {
+  const { label, hideLabel, id: customId, className, ...selectProps } = props;
+  const generatedId = useId();
+  const id = customId || generatedId;
+  return /* @__PURE__ */ jsxs6(SelectContainer, { className, children: [
+    /* @__PURE__ */ jsx20("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
+    /* @__PURE__ */ jsxs6(SelectWrapper, { children: [
+      /* @__PURE__ */ jsx20(StyledSelect, { ...selectProps, id, children: props.children }),
+      /* @__PURE__ */ jsx20(SelectIcon, { children: /* @__PURE__ */ jsx20(Icon, { name: "chevronDown", size: "sm" }) })
+    ] })
+  ] });
+}
+
+// src/inspector/viewer/co-value-editor.tsx
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+function CoValueEditor({
+  node,
+  property,
+  value,
+  coValue,
+  onCancel
+}) {
+  const getInitialType = () => {
+    if (value === null) return "null";
+    if (value === void 0) return "undefined";
+    if (typeof value === "number") return "number";
+    if (typeof value === "string") return "string";
+    if (typeof value === "boolean") return value ? "true" : "false";
+    if (typeof value === "object") return "object";
+    return "undefined";
+  };
+  const [selectedType, setSelectedType] = useState8(getInitialType());
+  const [editValue, setEditValue] = useState8(
+    value === void 0 || value === null ? "" : typeof value === "object" ? JSON.stringify(value, null, 2) : String(value)
+  );
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    let newValue;
+    switch (selectedType) {
+      case "null":
+        newValue = null;
+        break;
+      case "undefined":
+        newValue = void 0;
+        break;
+      case "true":
+        newValue = true;
+        break;
+      case "false":
+        newValue = false;
+        break;
+      case "number":
+        newValue = parseFloat(editValue);
+        break;
+      case "string":
+        newValue = editValue;
+        break;
+      case "object":
+        newValue = JSON.parse(editValue);
+        break;
+      default:
+        throw new Error(`Invalid type: ${selectedType}`);
+    }
+    coValue.core.makeTransaction(
+      [
+        {
+          op: "set",
+          key: property,
+          value: newValue
+        }
+      ],
+      "private"
+    );
+    onCancel();
+  };
+  const showTextarea = selectedType === "number" || selectedType === "string" || selectedType === "object";
+  return /* @__PURE__ */ jsxs7(EditForm, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs7(
+      Select,
+      {
+        label: "Type",
+        value: selectedType,
+        onChange: (e) => {
+          setSelectedType(e.target.value);
+        },
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx21("option", { value: "number", children: "number" }),
+          /* @__PURE__ */ jsx21("option", { value: "string", children: "string" }),
+          /* @__PURE__ */ jsx21("option", { value: "true", children: "true" }),
+          /* @__PURE__ */ jsx21("option", { value: "false", children: "false" }),
+          /* @__PURE__ */ jsx21("option", { value: "object", children: "object" }),
+          /* @__PURE__ */ jsx21("option", { value: "null", children: "null" }),
+          /* @__PURE__ */ jsx21("option", { value: "undefined", children: "undefined" })
+        ]
+      }
+    ),
+    showTextarea && /* @__PURE__ */ jsx21(
+      StyledTextarea,
+      {
+        value: editValue,
+        onChange: (e) => setEditValue(e.target.value),
+        onClick: (e) => e.stopPropagation()
+      }
+    ),
+    /* @__PURE__ */ jsxs7(FormActions, { children: [
+      /* @__PURE__ */ jsx21(Button, { type: "button", variant: "secondary", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx21(Button, { type: "submit", variant: "primary", children: "Submit" })
+    ] })
+  ] });
+}
+var EditForm = styled9("form")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+var StyledTextarea = styled9("textarea")`
+  width: 100%;
+  min-height: 120px;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem;
+  box-shadow: var(--j-shadow-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  background-color: white;
+  color: var(--j-text-color-strong);
+  resize: vertical;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+var FormActions = styled9("div")`
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+`;
+
+// src/inspector/ui/card.tsx
+import { styled as styled10 } from "goober";
+var Card = styled10("div")`
+  background-color: var(--j-background);
+  border-radius: var(--j-radius-lg);
+  box-shadow: var(--j-shadow-sm);
+  border: 1px solid var(--j-border-color);
+  padding: 1rem;
+  text-align: left;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+var CardHeader = styled10("div")`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+var CardBody = styled10("div")`
+  flex: 1;
+`;
+
+// src/inspector/ui/grid.tsx
+import { styled as styled11 } from "goober";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var GridThreeColumns = styled11("div")`
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+  
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  
+  @media (min-width: 1280px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+`;
+var GridTwoColumns = styled11("div")`
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+  
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+`;
+var GridOneColumn = styled11("div")`
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+`;
+function Grid(props) {
+  const { cols, children, ...rest } = props;
+  switch (cols) {
+    case 1:
+      return /* @__PURE__ */ jsx22(GridOneColumn, { ...rest, children });
+    case 2:
+      return /* @__PURE__ */ jsx22(GridTwoColumns, { ...rest, children });
+    case 3:
+      return /* @__PURE__ */ jsx22(GridThreeColumns, { ...rest, children });
+    default:
+      throw new Error(`Invalid number of columns: ${cols}`);
+  }
+}
+
+// src/inspector/utils/permissions.ts
+function isWriter(role) {
+  return role === "writer" || role === "admin" || role === "manager" || role === "writeOnly";
+}
+
+// src/inspector/viewer/grid-view.tsx
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
+function GridItem({
+  entry,
+  onNavigate,
+  node,
+  coValue
+}) {
+  const [key, value] = entry;
+  const isCoValue = isCoId(value);
+  const [isEditing, setIsEditing] = useState9(false);
+  const handleEditClick = (e) => {
+    e.stopPropagation();
+    setIsEditing(true);
+  };
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    if (confirm(`Are you sure you want to delete the property "${key}"?`)) {
+      coValue?.core.makeTransaction(
+        [
+          {
+            op: "del",
+            key
+          }
+        ],
+        "private"
+      );
+    }
+  };
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs8(
+      Card,
+      {
+        style: {
+          backgroundColor: "var(--j-foreground)",
+          borderColor: "var(--j-foreground)"
+        },
+        children: [
+          /* @__PURE__ */ jsx23(CardHeader, { children: /* @__PURE__ */ jsx23("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: isCoValue ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+            /* @__PURE__ */ jsx23(Text, { strong: true, children: key }),
+            /* @__PURE__ */ jsx23(Badge, { children: /* @__PURE__ */ jsx23(ResolveIcon, { coId: value, node }) })
+          ] }) : /* @__PURE__ */ jsx23(Text, { strong: true, children: key }) }) }),
+          /* @__PURE__ */ jsx23(CardBody, { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx23(
+            CoValueEditor,
+            {
+              node,
+              property: key,
+              value,
+              coValue,
+              onCancel: handleCancel
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  const cardProps = isCoValue ? {
+    onClick: () => onNavigate([{ coId: value, name: key }]),
+    as: "button"
+  } : {
+    style: {
+      backgroundColor: "var(--j-foreground)",
+      borderColor: "var(--j-foreground)"
+    }
+  };
+  return /* @__PURE__ */ jsxs8(Card, { ...cardProps, children: [
+    /* @__PURE__ */ jsxs8(CardHeader, { children: [
+      /* @__PURE__ */ jsx23("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: isCoValue ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+        /* @__PURE__ */ jsx23(Text, { strong: true, children: key }),
+        /* @__PURE__ */ jsx23(Badge, { children: /* @__PURE__ */ jsx23(ResolveIcon, { coId: value, node }) })
+      ] }) : /* @__PURE__ */ jsx23(Text, { strong: true, children: key }) }),
+      coValue && isWriter(coValue.group.myRole()) && /* @__PURE__ */ jsxs8(ActionButtons, { children: [
+        /* @__PURE__ */ jsx23(
+          EditButton,
+          {
+            onClick: handleEditClick,
+            type: "button",
+            "aria-label": "Edit",
+            children: /* @__PURE__ */ jsx23(Icon, { name: "edit", size: "sm" })
+          }
+        ),
+        /* @__PURE__ */ jsx23(
+          DeleteButton,
+          {
+            onClick: handleDelete,
+            type: "button",
+            "aria-label": "Delete",
+            children: /* @__PURE__ */ jsx23(Icon, { name: "delete", size: "sm" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx23(CardBody, { style: { wordBreak: "break-word" }, children: isCoValue ? /* @__PURE__ */ jsx23(CoMapPreview, { coId: value, node }) : /* @__PURE__ */ jsx23(
+      ValueRenderer,
+      {
+        json: value,
+        onCoIDClick: (coId) => {
+          onNavigate([{ coId, name: key }]);
+        }
+      }
+    ) })
+  ] });
+}
+function GridView({
+  data,
+  onNavigate,
+  node,
+  coValue
+}) {
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ jsx23(Grid, { cols: entries.length === 1 ? 1 : 3, children: entries.map((entry, childIndex) => /* @__PURE__ */ jsx23(
+    GridItem,
+    {
+      entry,
+      onNavigate,
+      node,
+      coValue
+    },
+    childIndex
+  )) });
+}
+var EditButton = styled12("button")`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--j-text-color);
+  border-radius: var(--j-radius-sm);
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--j-foreground);
+  }
+`;
+var DeleteButton = styled12("button")`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--j-text-color);
+  border-radius: var(--j-radius-sm);
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--j-foreground);
+  }
+`;
+var ActionButtons = styled12("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+
+// src/inspector/viewer/raw-data-card.tsx
+import { useEffect as useEffect10, useState as useState12 } from "react";
+
+// src/inspector/ui/modal.tsx
+import { styled as styled13 } from "goober";
+import { forwardRef as forwardRef2, useEffect as useEffect7, useRef } from "react";
+import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
+var ModalContent = styled13("dialog")`
+  background-color: var(--j-background);
+  border-radius: var(--j-radius-lg);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--j-border-color);
+  ${(props) => props.wide ? "max-width: 60vw;" : "max-width: 32rem;"}
+  margin-block: auto;
+  margin-inline: auto;
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+`;
+var ModalHeader = styled13("div")`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1.5rem 1.5rem 0 1.5rem;
+  gap: 1rem;
+`;
+var ModalBody = styled13("div")`
+  padding: 1rem 1.5rem;
+  flex: 1;
+`;
+var ModalFooter = styled13("div")`
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 0 1.5rem 1.5rem 1.5rem;
+`;
+var CloseButton = styled13("button")`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--j-radius-sm);
+  color: var(--j-text-color);
+  font-size: 1.25rem;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  min-height: 2rem;
+
+  &:hover {
+    background-color: var(--j-foreground);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--j-border-focus);
+    outline-offset: 2px;
+  }
+`;
+var Modal = forwardRef2(
+  ({
+    isOpen,
+    onClose,
+    heading,
+    text,
+    children,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    onConfirm,
+    onCancel,
+    showButtons = true,
+    className,
+    wide = false
+  }, ref) => {
+    const modalRef = useRef(null);
+    useEffect7(() => {
+      if (isOpen) {
+        modalRef.current?.showModal();
+      } else {
+        onClose();
+        modalRef.current?.close();
+      }
+    }, [isOpen, onClose]);
+    const handleConfirm = () => {
+      onConfirm?.();
+      onClose();
+    };
+    const handleCancel = () => {
+      onCancel?.();
+      onClose();
+    };
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsxs9(
+      ModalContent,
+      {
+        ref: ref || modalRef,
+        className,
+        role: "dialog",
+        "aria-labelledby": "modal-heading",
+        onClose,
+        wide,
+        children: [
+          /* @__PURE__ */ jsxs9(ModalHeader, { children: [
+            /* @__PURE__ */ jsx24(Heading, { id: "modal-heading", children: heading }),
+            /* @__PURE__ */ jsx24(CloseButton, { onClick: onClose, "aria-label": "Close modal", type: "button", children: "\xD7" })
+          ] }),
+          /* @__PURE__ */ jsxs9(ModalBody, { children: [
+            text && /* @__PURE__ */ jsx24("p", { style: { margin: "0 0 1rem 0", color: "var(--j-text-color)" }, children: text }),
+            children
+          ] }),
+          showButtons && /* @__PURE__ */ jsxs9(ModalFooter, { children: [
+            /* @__PURE__ */ jsx24(Button, { variant: "secondary", onClick: handleCancel, children: cancelText }),
+            /* @__PURE__ */ jsx24(Button, { variant: "primary", onClick: handleConfirm, children: confirmText })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+
+// src/inspector/ui/input.tsx
+import { styled as styled14 } from "goober";
+import { forwardRef as forwardRef3, useId as useId2 } from "react";
+import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
+var Container = styled14("div")`
+  display: grid;
+  gap: 0.25rem;
+`;
+var StyledInput = styled14("input")`
+  width: 100%;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem;
+  box-shadow: var(--j-shadow-sm);
+  font-weight: 500;
+  background-color: white;
+  color: var(--j-text-color-strong);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+var Input = forwardRef3(
+  ({ label, className, hideLabel, id: customId, ...inputProps }, ref) => {
+    const generatedId = useId2();
+    const id = customId || generatedId;
+    return /* @__PURE__ */ jsxs10(Container, { className, children: [
+      /* @__PURE__ */ jsx25(
+        "label",
+        {
+          htmlFor: id,
+          className: hideLabel ? "j-sr-only" : "",
+          style: { color: "var(--j-text-color)" },
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx25(StyledInput, { ref, ...inputProps, id })
+    ] });
+  }
+);
+
+// src/inspector/ui/data-table.tsx
+import { useEffect as useEffect8, useMemo as useMemo3, useState as useState10 } from "react";
+
+// src/inspector/ui/table.tsx
+import { styled as styled15 } from "goober";
+import React4 from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var StyledTable = styled15("table")`
+  width: 100%;
+`;
+var StyledThead = styled15("thead")`
+  text-align: left;
+  border-bottom: 1px solid var(--j-border-color);
+  background-color: var(--j-neutral-100);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-neutral-925);
+  }
+`;
+var StyledTbody = styled15("tbody")`
+  tr {
+    border-bottom: 1px solid var(--j-border-color);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+`;
+var StyledTh = styled15("th")`
+  font-weight: 500;
+  padding: 0.5rem 0.75rem;
+  color: var(--j-text-color-strong);
+`;
+var StyledTd = styled15("td")`
+  padding: 0.5rem 0.75rem;
+`;
+var Table = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx26(StyledTable, { ref, ...props, children }));
+var TableHead = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx26(StyledThead, { ref, ...props, children }));
+var TableBody = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx26(StyledTbody, { ref, ...props, children }));
+var TableRow = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx26("tr", { ref, ...props, children }));
+var TableHeader = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx26(StyledTh, { ref, ...props, children }));
+var TableCell = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx26(StyledTd, { ref, ...props, children }));
+
+// src/inspector/ui/data-table.tsx
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  data,
+  pageSize = 10,
+  initialSort = null,
+  getRowKey,
+  emptyMessage = "No data available"
+}) {
+  const [currentPage, setCurrentPage] = useState10(1);
+  const [sortConfig, setSortConfig] = useState10(initialSort);
+  const [filters, setFilters] = useState10({});
+  const filteredData = useMemo3(() => {
+    return data.filter((row) => {
+      return Object.entries(filters).every(([columnId, filterValue]) => {
+        if (!filterValue) return true;
+        const column = columns.find((col) => col.id === columnId);
+        if (!column?.filterable) return true;
+        if (column.filterFn) {
+          return column.filterFn(row, filterValue);
+        }
+        const cellValue = String(column.accessor(row));
+        return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+      });
+    });
+  }, [data, filters, columns]);
+  const sortedData = useMemo3(() => {
+    if (!sortConfig) return filteredData;
+    const column = columns.find((col) => col.id === sortConfig.columnId);
+    if (!column?.sortable) return filteredData;
+    const sorted = [...filteredData].sort((a, b) => {
+      if (column.sortFn) {
+        return column.sortFn(a, b);
+      }
+      const aValue = String(column.accessor(a));
+      const bValue = String(column.accessor(b));
+      return aValue.localeCompare(bValue);
+    });
+    return sortConfig.direction === "desc" ? sorted.reverse() : sorted;
+  }, [filteredData, sortConfig, columns]);
+  const totalPages = Math.ceil(sortedData.length / pageSize);
+  const showPagination = sortedData.length > pageSize;
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedData = sortedData.slice(startIndex, endIndex);
+  useEffect8(() => {
+    setCurrentPage(1);
+  }, [filters]);
+  const handleSort = (columnId) => {
+    const column = columns.find((col) => col.id === columnId);
+    if (!column?.sortable) return;
+    setSortConfig((current) => {
+      if (current?.columnId === columnId) {
+        if (current.direction === "asc") {
+          return { columnId, direction: "desc" };
+        }
+        return null;
+      }
+      return { columnId, direction: "asc" };
+    });
+  };
+  const handleFilterChange = (columnId, value) => {
+    setFilters((current) => ({
+      ...current,
+      [columnId]: value
+    }));
+  };
+  const handlePageChange = (page) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+    /* @__PURE__ */ jsxs11(Table, { children: [
+      /* @__PURE__ */ jsx27(TableHead, { children: /* @__PURE__ */ jsx27(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx27(TableHeader, { children: /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            cursor: column.sortable ? "pointer" : "default"
+          },
+          onClick: () => handleSort(column.id),
+          children: [
+            /* @__PURE__ */ jsx27("span", { children: column.header }),
+            column.sortable && /* @__PURE__ */ jsx27(
+              "span",
+              {
+                style: {
+                  fontSize: "12px",
+                  opacity: 0.7
+                },
+                children: sortConfig?.columnId === column.id ? sortConfig.direction === "asc" ? "\u2191" : "\u2193" : "\u2195"
+              }
+            )
+          ]
+        }
+      ) }, column.id)) }) }),
+      /* @__PURE__ */ jsxs11(TableBody, { children: [
+        columns.some((column) => column.filterable) && /* @__PURE__ */ jsx27(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx27(TableCell, { children: column.filterable && /* @__PURE__ */ jsx27(
+          Input,
+          {
+            label: "Filter",
+            hideLabel: true,
+            type: "search",
+            placeholder: `Filter ${column.header.toLowerCase()}`,
+            value: filters[column.id] || "",
+            onChange: (e) => handleFilterChange(column.id, e.target.value),
+            onClick: (e) => e.stopPropagation()
+          }
+        ) }, column.id)) }),
+        paginatedData.length === 0 ? /* @__PURE__ */ jsx27(TableRow, { children: /* @__PURE__ */ jsx27(TableCell, { colSpan: columns.length, children: /* @__PURE__ */ jsx27(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              padding: "20px",
+              opacity: 0.6
+            },
+            children: emptyMessage
+          }
+        ) }) }) : paginatedData.map((row, index) => /* @__PURE__ */ jsx27(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx27(TableCell, { children: column.accessor(row) }, column.id)) }, getRowKey(row, startIndex + index)))
+      ] })
+    ] }),
+    showPagination && /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginTop: "16px",
+          padding: "8px 0"
+        },
+        children: [
+          /* @__PURE__ */ jsxs11("div", { style: { fontSize: "14px", opacity: 0.7 }, children: [
+            "Showing ",
+            startIndex + 1,
+            " to ",
+            Math.min(endIndex, sortedData.length),
+            " ",
+            "of ",
+            sortedData.length,
+            " entries",
+            Object.keys(filters).some((key) => filters[key]) && ` (filtered from ${data.length})`
+          ] }),
+          /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx27(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => handlePageChange(1),
+                disabled: currentPage === 1,
+                children: "\xAB\xAB"
+              }
+            ),
+            /* @__PURE__ */ jsx27(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => handlePageChange(currentPage - 1),
+                disabled: currentPage === 1,
+                children: "\xAB"
+              }
+            ),
+            /* @__PURE__ */ jsxs11("span", { style: { fontSize: "14px" }, children: [
+              "Page ",
+              currentPage,
+              " of ",
+              totalPages
+            ] }),
+            /* @__PURE__ */ jsx27(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => handlePageChange(currentPage + 1),
+                disabled: currentPage === totalPages,
+                children: "\xBB"
+              }
+            ),
+            /* @__PURE__ */ jsx27(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => handlePageChange(totalPages),
+                disabled: currentPage === totalPages,
+                children: "\xBB\xBB"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/inspector/ui/accordion.tsx
+import { styled as styled16 } from "goober";
+import { useEffect as useEffect9, useState as useState11 } from "react";
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+function Accordion({ title, children, storageKey }) {
+  const [open, setOpen] = useStoragedState(storageKey, false);
+  return /* @__PURE__ */ jsxs12(
+    "details",
+    {
+      open,
+      style: { display: "flex", flexDirection: "column", gap: "1rem" },
+      children: [
+        /* @__PURE__ */ jsx28(
+          StyledSummary,
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              setOpen((v) => !v);
+            },
+            children: title
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function useStoragedState(key, defaultValue) {
+  const [state, setState] = useState11(() => {
+    if (typeof window === "undefined") return defaultValue;
+    const stored = localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : defaultValue;
+  });
+  useEffect9(() => {
+    localStorage.setItem(key, JSON.stringify(state));
+  }, [state]);
+  return [state, setState];
+}
+var StyledSummary = styled16("summary")`
+  font-size: 1.125rem;
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+`;
+
+// src/inspector/viewer/raw-data-card.tsx
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+function CopyButton({ data }) {
+  const [copyCount, setCopyCount] = useState12(0);
+  const copied = copyCount > 0;
+  const stringifiedData = JSON.stringify(data);
+  useEffect10(() => {
+    if (copyCount > 0) {
+      const timeout = setTimeout(() => setCopyCount(0), 1e3);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [copyCount]);
+  return /* @__PURE__ */ jsx29(
+    Button,
+    {
+      style: {
+        position: "absolute",
+        top: "10px",
+        right: "10px"
+      },
+      onClick: () => {
+        window.navigator.clipboard.writeText(stringifiedData).then(() => {
+          setCopyCount((count) => count + 1);
+        });
+      },
+      variant: "secondary",
+      children: copied ? "Copied" : "Copy"
+    }
+  );
+}
+function RawDataCard({ data }) {
+  return /* @__PURE__ */ jsx29(Accordion, { title: "Raw data", storageKey: "jazz-inspector-show-raw-data", children: /* @__PURE__ */ jsxs13(Card, { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx29(CardHeader, { children: /* @__PURE__ */ jsx29(CopyButton, { data }) }),
+    /* @__PURE__ */ jsx29(CardBody, { children: /* @__PURE__ */ jsx29(ValueRenderer, { json: data }) })
+  ] }) });
+}
+
+// src/inspector/viewer/account-view.tsx
+import { Fragment as Fragment6, jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+function AccountView({
+  data,
+  onNavigate,
+  node
+}) {
+  const readableData = { ...data };
+  for (const key in readableData) {
+    if (key === "readKey" || key.startsWith("sealer_z") || key.startsWith("key_z")) {
+      delete readableData[key];
+    }
+  }
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    /* @__PURE__ */ jsx30(GridView, { data: readableData, onNavigate, node }),
+    /* @__PURE__ */ jsx30(RawDataCard, { data })
+  ] });
+}
+
+// src/inspector/viewer/co-plain-text-view.tsx
+import { useState as useState13 } from "react";
+import { styled as styled17 } from "goober";
+import { CoPlainText } from "jazz-tools";
+import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
+function CoPlainTextView({
+  data,
+  coValue
+}) {
+  const currentText = Object.values(data).join("");
+  const [isEditing, setIsEditing] = useState13(false);
+  const [editValue, setEditValue] = useState13("");
+  const canEdit2 = isWriter(coValue.group.myRole());
+  const handleEditClick = () => {
+    setIsEditing(true);
+    setEditValue(currentText);
+  };
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditValue(currentText);
+  };
+  const handleSave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const coPlainText = CoPlainText.fromRaw(coValue);
+    coPlainText.$jazz.applyDiff(editValue);
+    setIsEditing(false);
+  };
+  if (!data) return;
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+      /* @__PURE__ */ jsxs15(EditForm2, { onSubmit: handleSave, children: [
+        /* @__PURE__ */ jsx31(
+          StyledTextarea2,
+          {
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onClick: (e) => e.stopPropagation()
+          }
+        ),
+        /* @__PURE__ */ jsxs15(FormActions2, { children: [
+          /* @__PURE__ */ jsx31(Button, { type: "button", variant: "secondary", onClick: handleCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx31(Button, { type: "submit", variant: "primary", children: "Save" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx31(RawDataCard, { data })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    /* @__PURE__ */ jsx31("p", { children: currentText }),
+    /* @__PURE__ */ jsx31("div", { children: canEdit2 && /* @__PURE__ */ jsx31(Button, { variant: "secondary", onClick: handleEditClick, title: "Edit", children: /* @__PURE__ */ jsx31(Icon, { name: "edit" }) }) }),
+    /* @__PURE__ */ jsx31(RawDataCard, { data })
+  ] });
+}
+var EditForm2 = styled17("form")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+`;
+var StyledTextarea2 = styled17("textarea")`
+  width: 100%;
+  min-height: 120px;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem;
+  box-shadow: var(--j-shadow-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  background-color: white;
+  color: var(--j-text-color-strong);
+  resize: vertical;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+var FormActions2 = styled17("div")`
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+`;
+
+// src/inspector/viewer/group-view.tsx
+import { useState as useState14 } from "react";
+import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+function partitionMembers(data) {
+  const everyone = Object.entries(data).filter(([key]) => key === "everyone").map(([key, value]) => ({
+    id: key,
+    role: value
+  }));
+  const members = Object.entries(data).filter(([key]) => isCoId(key)).map(([key, value]) => ({
+    id: key,
+    role: value
+  }));
+  const parentGroups = Object.entries(data).filter(([key]) => key.startsWith("parent_co_")).map(([key, value]) => ({
+    id: key.slice(7),
+    role: value
+  }));
+  const childGroups = Object.entries(data).filter(
+    ([key, value]) => key.startsWith("child_co_") && value !== "revoked"
+  ).map(([key, value]) => ({
+    id: key.slice(6),
+    role: value
+  }));
+  return { everyone, members, parentGroups, childGroups };
+}
+function GroupView({
+  coValue,
+  data,
+  onNavigate,
+  node
+}) {
+  const [addMemberType, setAddMemberType] = useState14(null);
+  const { everyone, members, parentGroups, childGroups } = partitionMembers(
+    data
+  );
+  const onRemoveMember = async (id) => {
+    if (confirm("Are you sure you want to remove this member?") === false) {
+      return;
+    }
+    try {
+      const group = await node.load(coValue.id);
+      if (group === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawGroup = group;
+      rawGroup.removeMember(id);
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+  const onRemoveGroup = async (id) => {
+    if (confirm("Are you sure you want to remove this group?") === false) {
+      return;
+    }
+    try {
+      const group = await node.load(coValue.id);
+      if (group === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawGroup = group;
+      const targetGroup = await node.load(id);
+      if (targetGroup === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawTargetGroup = targetGroup;
+      rawGroup.revokeExtend(rawTargetGroup);
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+  const handleAddMemberSubmit = async (event) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const memberId = form.elements.namedItem("memberId")?.value;
+    const role = form.elements.namedItem("role")?.value;
+    try {
+      const group = await node.load(coValue.id);
+      if (group === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawGroup = group;
+      if (addMemberType === "account") {
+        let rawAccount = "everyone";
+        if (memberId !== "everyone") {
+          const account = await node.load(memberId);
+          if (account === "unavailable") {
+            throw new Error("Account not found");
+          }
+          rawAccount = account;
+        }
+        rawGroup.addMember(rawAccount, role);
+      } else if (addMemberType === "group") {
+        const targetGroup = await node.load(memberId);
+        if (targetGroup === "unavailable") {
+          throw new Error("Group not found");
+        }
+        const rawTargetGroup = targetGroup;
+        rawGroup.extend(
+          rawTargetGroup,
+          role
+        );
+      }
+      setAddMemberType(null);
+    } catch (error) {
+      console.error(error);
+      alert(`Failed to add ${addMemberType}: ${error.message}`);
+    }
+  };
+  return /* @__PURE__ */ jsxs16(Fragment8, { children: [
+    /* @__PURE__ */ jsxs16(Table, { children: [
+      /* @__PURE__ */ jsx32(TableHead, { children: /* @__PURE__ */ jsxs16(TableRow, { children: [
+        /* @__PURE__ */ jsx32(TableHeader, { children: "Member" }),
+        /* @__PURE__ */ jsx32(TableHeader, { children: "Permission" }),
+        /* @__PURE__ */ jsx32(TableHeader, {})
+      ] }) }),
+      /* @__PURE__ */ jsxs16(TableBody, { children: [
+        everyone.map((member) => /* @__PURE__ */ jsxs16(TableRow, { children: [
+          /* @__PURE__ */ jsx32(TableCell, { children: member.id }),
+          /* @__PURE__ */ jsx32(TableCell, { children: member.role }),
+          /* @__PURE__ */ jsx32(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx32(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => onRemoveMember(member.id),
+              children: /* @__PURE__ */ jsx32(Icon, { name: "delete" })
+            }
+          ) })
+        ] }, member.id)),
+        members.map((member) => /* @__PURE__ */ jsxs16(TableRow, { children: [
+          /* @__PURE__ */ jsx32(TableCell, { children: /* @__PURE__ */ jsx32(
+            AccountOrGroupText,
+            {
+              coId: member.id,
+              node,
+              showId: true,
+              onClick: () => {
+                onNavigate([{ coId: member.id, name: member.id }]);
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx32(TableCell, { children: member.role }),
+          /* @__PURE__ */ jsx32(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx32(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => onRemoveMember(member.id),
+              children: /* @__PURE__ */ jsx32(Icon, { name: "delete" })
+            }
+          ) })
+        ] }, member.id)),
+        parentGroups.map((group) => /* @__PURE__ */ jsxs16(TableRow, { children: [
+          /* @__PURE__ */ jsx32(TableCell, { children: /* @__PURE__ */ jsx32(
+            AccountOrGroupText,
+            {
+              coId: group.id,
+              node,
+              showId: true,
+              onClick: () => {
+                onNavigate([{ coId: group.id, name: group.id }]);
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx32(TableCell, { children: group.role }),
+          /* @__PURE__ */ jsx32(TableCell, { children: group.role !== "revoked" && /* @__PURE__ */ jsx32(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => onRemoveGroup(group.id),
+              children: /* @__PURE__ */ jsx32(Icon, { name: "delete" })
+            }
+          ) })
+        ] }, group.id))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "flex-end",
+          gap: "0.75rem",
+          marginTop: "1rem"
+        },
+        children: [
+          /* @__PURE__ */ jsx32(Button, { variant: "primary", onClick: () => setAddMemberType("account"), children: "Add Account" }),
+          /* @__PURE__ */ jsx32(Button, { variant: "primary", onClick: () => setAddMemberType("group"), children: "Add Group" })
+        ]
+      }
+    ),
+    childGroups.length > 0 && /* @__PURE__ */ jsxs16(Table, { children: [
+      /* @__PURE__ */ jsx32(TableHead, { children: /* @__PURE__ */ jsx32(TableRow, { children: /* @__PURE__ */ jsx32(TableHeader, { children: "Member of" }) }) }),
+      /* @__PURE__ */ jsx32(TableBody, { children: childGroups.map((group) => /* @__PURE__ */ jsx32(TableRow, { children: /* @__PURE__ */ jsx32(TableCell, { children: /* @__PURE__ */ jsx32(
+        AccountOrGroupText,
+        {
+          coId: group.id,
+          node,
+          showId: true,
+          onClick: () => {
+            onNavigate([{ coId: group.id, name: group.id }]);
+          }
+        }
+      ) }) }, group.id)) })
+    ] }),
+    /* @__PURE__ */ jsx32(RawDataCard, { data }),
+    /* @__PURE__ */ jsx32(
+      Modal,
+      {
+        isOpen: addMemberType !== null,
+        onClose: () => setAddMemberType(null),
+        heading: addMemberType === "account" ? "Add Account" : "Add Group",
+        showButtons: false,
+        children: /* @__PURE__ */ jsx32("form", { onSubmit: handleAddMemberSubmit, children: /* @__PURE__ */ jsxs16(
+          "div",
+          {
+            style: { display: "flex", flexDirection: "column", gap: "1rem" },
+            children: [
+              /* @__PURE__ */ jsx32(
+                Input,
+                {
+                  name: "memberId",
+                  label: addMemberType === "account" ? "Account ID" : "Group ID",
+                  placeholder: addMemberType === "account" ? "Enter account ID" : "Enter group ID",
+                  required: true
+                }
+              ),
+              /* @__PURE__ */ jsxs16(Select, { name: "role", label: "Role", children: [
+                /* @__PURE__ */ jsx32("option", { value: "reader", children: "Reader" }),
+                /* @__PURE__ */ jsx32("option", { value: "writer", children: "Writer" }),
+                /* @__PURE__ */ jsx32("option", { value: "admin", children: "Admin" }),
+                addMemberType === "account" ? /* @__PURE__ */ jsx32(Fragment8, { children: /* @__PURE__ */ jsx32("option", { value: "writeOnly", children: "Write Only" }) }) : /* @__PURE__ */ jsx32(Fragment8, { children: /* @__PURE__ */ jsx32("option", { value: "inherit", children: "Inherit" }) })
+              ] }),
+              /* @__PURE__ */ jsxs16(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "0.75rem",
+                    justifyContent: "flex-end",
+                    marginTop: "0.5rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx32(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "secondary",
+                        onClick: () => setAddMemberType(null),
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx32(Button, { type: "submit", variant: "primary", children: "Add" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+// src/inspector/viewer/role-display.tsx
+import { jsxs as jsxs17 } from "react/jsx-runtime";
+function RoleDisplay({
+  node,
+  value
+}) {
+  const { snapshot } = useResolvedCoValue(value.group.id, node);
+  if (!snapshot || snapshot === "unavailable") {
+    return null;
+  }
+  let role;
+  if (value.group.id == node.getCurrentAgent().id) {
+    role = "owner";
+  } else if (snapshot[node.getCurrentAgent().id]) {
+    role = snapshot[node.getCurrentAgent().id];
+  } else if (snapshot.everyone) {
+    role = snapshot.everyone;
+  } else {
+    role = "unauthorized";
+  }
+  return /* @__PURE__ */ jsxs17(Text, { children: [
+    "Role: ",
+    role
+  ] });
+}
+
+// src/inspector/viewer/table-viewer.tsx
+import { styled as styled18 } from "goober";
+import { useMemo as useMemo4, useState as useState15 } from "react";
+import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+var PaginationContainer = styled18("div")`
+  padding: 1rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+`;
+var RedTooltip = styled18("span")`
+  position:relative; /* making the .tooltip span a container for the tooltip text */
+  border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
+
+  &:before {
+    content: attr(data-text);
+    background-color: red;
+    position:absolute;
+
+    /* vertically center */
+    top:50%;
+    transform:translateY(-50%);
+
+    /* move to right */
+    left:100%;
+    margin-left:15px; /* and add a small left margin */
+
+    /* basic styles */
+    width:200px;
+    padding:10px;
+    border-radius:10px;
+    color: #fff;
+    text-align:center;
+
+    display:none; /* hide by default */
+  }
+
+  &:hover:before {
+    display:block;
+  }
+`;
+function CoValuesTableView({
+  data,
+  node,
+  onNavigate,
+  onRemove
+}) {
+  const [visibleRowsCount, setVisibleRowsCount] = useState15(10);
+  const [coIdArray, visibleRows] = useMemo4(() => {
+    const coIdArray2 = Array.isArray(data) ? data : Object.values(data).every((k) => typeof k === "string" && isCoId(k)) ? Object.values(data).map((k) => k) : [];
+    const visibleRows2 = coIdArray2.slice(0, visibleRowsCount);
+    return [coIdArray2, visibleRows2];
+  }, [data, visibleRowsCount]);
+  const resolvedRows = useResolvedCoValues(visibleRows, node);
+  const hasMore = visibleRowsCount < coIdArray.length;
+  if (!coIdArray.length) {
+    return /* @__PURE__ */ jsx33("div", { children: "No data to display" });
+  }
+  if (resolvedRows.length === 0) {
+    return /* @__PURE__ */ jsx33("div", { children: "Loading..." });
+  }
+  const keys = Array.from(
+    new Set(
+      resolvedRows.filter((item) => item.snapshot !== "unavailable").flatMap((item) => Object.keys(item.snapshot || {}))
+    )
+  );
+  const loadMore = () => {
+    setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
+  };
+  return /* @__PURE__ */ jsxs18(Fragment9, { children: [
+    /* @__PURE__ */ jsxs18(Table, { children: [
+      /* @__PURE__ */ jsx33(TableHead, { children: /* @__PURE__ */ jsxs18(TableRow, { children: [
+        ["ID", ...keys, "Action"].map((key) => /* @__PURE__ */ jsx33(TableHeader, { children: key }, key)),
+        onRemove && /* @__PURE__ */ jsx33(TableHeader, {})
+      ] }) }),
+      /* @__PURE__ */ jsx33(TableBody, { children: resolvedRows.slice(0, visibleRowsCount).map((item, index) => /* @__PURE__ */ jsxs18(TableRow, { children: [
+        /* @__PURE__ */ jsx33(TableCell, { children: /* @__PURE__ */ jsx33(Text, { mono: true, children: item.snapshot === "unavailable" ? /* @__PURE__ */ jsxs18(RedTooltip, { "data-text": "Unavailable", children: [
+          /* @__PURE__ */ jsx33(
+            Icon,
+            {
+              name: "caution",
+              color: "red",
+              style: {
+                display: "inline-block",
+                marginRight: "0.5rem"
+              }
+            }
+          ),
+          visibleRows[index]
+        ] }) : visibleRows[index] }) }),
+        keys.map((key) => /* @__PURE__ */ jsx33(TableCell, { children: item.snapshot !== "unavailable" && /* @__PURE__ */ jsx33(
+          ValueRenderer,
+          {
+            json: item.snapshot[key],
+            onCoIDClick: (coId) => {
+              async function handleClick() {
+                onNavigate([
+                  {
+                    coId: item.value.id,
+                    name: index.toString()
+                  },
+                  {
+                    coId,
+                    name: key
+                  }
+                ]);
+              }
+              handleClick();
+            }
+          }
+        ) }, key)),
+        /* @__PURE__ */ jsx33(TableCell, { children: /* @__PURE__ */ jsx33(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => onNavigate([
+              {
+                coId: item.value.id,
+                name: index.toString()
+              }
+            ]),
+            children: "View"
+          }
+        ) }),
+        onRemove && /* @__PURE__ */ jsx33(TableCell, { children: /* @__PURE__ */ jsx33(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
+      ] }, index)) })
+    ] }),
+    /* @__PURE__ */ jsxs18(PaginationContainer, { children: [
+      /* @__PURE__ */ jsxs18(Text, { muted: true, small: true, children: [
+        "Showing ",
+        Math.min(visibleRowsCount, coIdArray.length),
+        " of",
+        " ",
+        coIdArray.length
+      ] }),
+      hasMore && /* @__PURE__ */ jsx33(Button, { variant: "secondary", onClick: loadMore, children: "Load more" })
+    ] })
+  ] });
+}
+function TableView({
+  data,
+  node,
+  onNavigate,
+  onRemove
+}) {
+  const isListOfCoValues = useMemo4(() => {
+    return Array.isArray(data) && data.every((k) => isCoId(k));
+  }, [data]);
+  if (isListOfCoValues) {
+    return /* @__PURE__ */ jsx33(
+      CoValuesTableView,
+      {
+        data,
+        node,
+        onNavigate,
+        onRemove
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs18(Table, { children: [
+    /* @__PURE__ */ jsx33(TableHead, { children: /* @__PURE__ */ jsxs18(TableRow, { children: [
+      /* @__PURE__ */ jsx33(TableHeader, { style: { width: "5rem" }, children: "Index" }),
+      /* @__PURE__ */ jsx33(TableHeader, { children: "Value" }),
+      onRemove && /* @__PURE__ */ jsx33(TableHeader, { children: "Action" })
+    ] }) }),
+    /* @__PURE__ */ jsx33(TableBody, { children: Array.isArray(data) && data?.map((value, index) => /* @__PURE__ */ jsxs18(TableRow, { children: [
+      /* @__PURE__ */ jsx33(TableCell, { children: /* @__PURE__ */ jsx33(Text, { mono: true, children: index }) }),
+      /* @__PURE__ */ jsx33(TableCell, { children: /* @__PURE__ */ jsx33(ValueRenderer, { json: value }) }),
+      onRemove && /* @__PURE__ */ jsx33(TableCell, { children: /* @__PURE__ */ jsx33(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
+    ] }, index)) })
+  ] });
+}
+
+// src/inspector/viewer/history-view.tsx
+import { useMemo as useMemo5 } from "react";
+import { styled as styled19 } from "goober";
+
+// src/inspector/utils/transactions-changes.ts
+var isGroupExtension = (coValue, change) => {
+  if (coValue.core.isGroup() === false) return false;
+  return change?.op === "set" && change?.value === "extend";
+};
+var isGroupExtendRevocation = (coValue, change) => {
+  if (coValue.core.isGroup() === false) return false;
+  return change?.op === "set" && change?.value === "revoked";
+};
+var isGroupPromotion = (coValue, change) => {
+  if (coValue.core.isGroup() === false) return false;
+  return change?.op === "set" && change?.key.startsWith("parent_co_");
+};
+var isUserPromotion = (coValue, change) => {
+  if (coValue.core.isGroup() === false) return false;
+  return change?.op === "set" && (isCoId(change?.key) || change?.key === "everyone");
+};
+var isKeyRevelation = (coValue, change) => {
+  if (coValue.core.isGroup() === false && coValue.headerMeta?.type !== "account")
+    return false;
+  return change?.op === "set" && change?.key.includes("_for_");
+};
+var isPropertySet = (coValue, change) => {
+  return change?.op === "set" && "key" in change && "value" in change;
+};
+var isPropertyDeletion = (coValue, change) => {
+  return change?.op === "del" && "key" in change;
+};
+var isItemAppend = (coValue, change) => {
+  if (coValue.type !== "colist" && coValue.type !== "coplaintext") return false;
+  return change?.op === "app" && "after" in change && "value" in change;
+};
+var isItemPrepend = (coValue, change) => {
+  if (coValue.type !== "colist" && coValue.type !== "coplaintext") return false;
+  return change?.op === "pre" && "before" in change && "value" in change;
+};
+var isItemDeletion = (coValue, change) => {
+  if (coValue.type !== "colist" && coValue.type !== "coplaintext") return false;
+  return change?.op === "del" && "insertion" in change;
+};
+var isStreamStart = (coValue, change) => {
+  if (coValue.type !== "coStream") return false;
+  return change?.type === "start" && "mimeType" in change;
+};
+var isStreamChunk = (coValue, change) => {
+  if (coValue.type !== "coStream") return false;
+  return change?.type === "chunk" && "chunk" in change;
+};
+var isStreamEnd = (coValue, change) => {
+  if (coValue.type !== "coStream") return false;
+  return change?.type === "end";
+};
+
+// src/inspector/utils/history.ts
+import { stringifyOpID } from "cojson";
+function areSameOpIds(opId1, opId2) {
+  if (typeof opId1 === "string" || typeof opId2 === "string") {
+    return opId1 === opId2;
+  }
+  return opId1.sessionID === opId2.sessionID && opId1.txIndex === opId2.txIndex && opId1.changeIdx === opId2.changeIdx;
+}
+function isCoPlainText(coValue) {
+  return coValue.type === "coplaintext";
+}
+function getTransactionChanges(tx, coValue) {
+  if (tx.isValid === false && tx.tx.privacy === "private") {
+    const readKey = coValue.core.getReadKey(tx.tx.keyUsed);
+    if (!readKey) {
+      return [
+        `Unable to decrypt transaction: read key ${tx.tx.keyUsed} not found.`
+      ];
+    }
+    return coValue.core.verified.decryptTransaction(
+      tx.txID.sessionID,
+      tx.txID.txIndex,
+      readKey
+    ) ?? [];
+  }
+  if (isCoPlainText(coValue)) {
+    if (tx.changes === void 0 || tx.changes.length === 0) return [];
+    const firstChange = tx.changes[0];
+    if (isItemAppend(coValue, firstChange) && tx.changes.every(
+      (c) => isItemAppend(coValue, c) && areSameOpIds(c.after, firstChange.after)
+    )) {
+      const changes = tx.changes;
+      if (firstChange.after !== "start") {
+        changes.reverse();
+      }
+      return [
+        {
+          op: "app",
+          value: changes.map((c) => c.value).join(""),
+          after: firstChange.after
+        }
+      ];
+    }
+    if (isItemPrepend(coValue, firstChange) && tx.changes.every(
+      (c) => isItemPrepend(coValue, c) && areSameOpIds(c.before, firstChange.before)
+    )) {
+      const changes = tx.changes;
+      if (firstChange.before !== "end") {
+        changes.reverse();
+      }
+      return [
+        {
+          op: "pre",
+          value: changes.map((c) => c.value).join(""),
+          before: firstChange.before
+        }
+      ];
+    }
+    if (isItemDeletion(coValue, firstChange) && tx.changes.every((c) => isItemDeletion(coValue, c))) {
+      let changesAreConsecutive2 = function(changes) {
+        if (changes.length < 2) return false;
+        const mapping = coValueBeforeDeletions.mapping.idxAfterOpID;
+        for (let i = 1; i < changes.length; ++i) {
+          const prevIdx = mapping[stringifyOpID(changes[i - 1].insertion)];
+          const currIdx = mapping[stringifyOpID(changes[i].insertion)];
+          if (currIdx !== prevIdx && currIdx !== (prevIdx ?? -2) + 1) {
+            return false;
+          }
+        }
+        return true;
+      };
+      var changesAreConsecutive = changesAreConsecutive2;
+      const coValueBeforeDeletions = coValue.atTime(tx.madeAt - 1);
+      if (changesAreConsecutive2(tx.changes)) {
+        const groupedBySession = /* @__PURE__ */ new Map();
+        for (const change of tx.changes) {
+          const group = `${change.insertion.sessionID}-${change.insertion.txIndex}`;
+          if (!groupedBySession.has(group)) groupedBySession.set(group, []);
+          groupedBySession.get(group).push(change);
+        }
+        return Array.from(groupedBySession.values()).map((changes) => {
+          const stringDeleted = changes.toSorted((a, b) => {
+            if (a.insertion.txIndex === b.insertion.txIndex) {
+              return a.insertion.changeIdx - b.insertion.changeIdx;
+            }
+            return a.insertion.txIndex - b.insertion.txIndex;
+          }).map(
+            (c) => coValueBeforeDeletions.get(
+              coValueBeforeDeletions.mapping.idxAfterOpID[stringifyOpID(c.insertion)]
+            )
+          ).join("");
+          return {
+            op: "custom",
+            action: `"${stringDeleted}" has been deleted`
+          };
+        });
+      }
+    }
+  }
+  return tx.changes ?? tx.tx.changes ?? [];
+}
+function restoreCoMapToTimestamp(coValue, timestamp, removeUnknownProperties) {
+  const myRole = coValue.group.myRole();
+  if (myRole === void 0 || !["admin", "manager", "writer", "writerOnly"].includes(myRole)) {
+    return;
+  }
+  const newCoValue = coValue.atTime(timestamp).toJSON();
+  const oldCoValue = coValue.toJSON();
+  if (newCoValue === null) return;
+  let changes = [];
+  if (removeUnknownProperties) {
+    for (const key in oldCoValue) {
+      if (!(key in newCoValue)) {
+        changes.push({
+          op: "del",
+          key
+        });
+      }
+    }
+  }
+  for (const key in newCoValue) {
+    if (newCoValue[key] !== oldCoValue[key]) {
+      changes.push({
+        op: "set",
+        key,
+        value: newCoValue[key]
+      });
+    }
+  }
+  if (changes.length > 0) {
+    coValue.core.makeTransaction(changes, "private");
+  }
+}
+
+// src/inspector/viewer/history-view.tsx
+import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+function HistoryView({
+  coValue,
+  node
+}) {
+  const transactions = useMemo5(
+    () => getHistory(coValue),
+    [coValue.core.verifiedTransactions.length]
+  );
+  const columns = [
+    {
+      id: "author",
+      header: "Author",
+      accessor: (row) => /* @__PURE__ */ jsxs19(Fragment10, { children: [
+        row.isValid || /* @__PURE__ */ jsx34(RedTooltip2, { "data-text": "This transaction is invalid and is not used", children: /* @__PURE__ */ jsx34(
+          Icon,
+          {
+            name: "caution",
+            size: "xs",
+            color: "red",
+            style: {
+              display: "inline-block",
+              verticalAlign: "middle",
+              marginRight: "0.25rem"
+            }
+          }
+        ) }),
+        row.author.startsWith("co_") ? /* @__PURE__ */ jsx34(
+          AccountOrGroupText,
+          {
+            coId: row.author,
+            node,
+            showId: true
+          }
+        ) : row.author
+      ] }),
+      sortable: false,
+      filterable: true,
+      sortFn: (a, b) => a.author.localeCompare(b.author),
+      filterFn: (row, filterValue) => row.author.toLowerCase().includes(filterValue.toLowerCase())
+    },
+    {
+      id: "action",
+      header: "Action",
+      accessor: (row) => {
+        if (row.isValid) return row.action;
+        return /* @__PURE__ */ jsxs19(Fragment10, { children: [
+          row.action,
+          /* @__PURE__ */ jsxs19("span", { style: { color: "red", display: "block" }, children: [
+            "Invalid transaction: ",
+            row.validationErrorMessage
+          ] })
+        ] });
+      },
+      sortable: false,
+      filterable: true,
+      sortFn: (a, b) => a.action.localeCompare(b.action)
+    },
+    {
+      id: "timestamp",
+      header: "Timestamp",
+      accessor: (row) => row.timestamp.toISOString(),
+      sortable: true,
+      filterable: true,
+      sortFn: (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
+    }
+  ];
+  return /* @__PURE__ */ jsx34(Accordion, { title: "CoValue history", storageKey: "jazz-inspector-show-history", children: /* @__PURE__ */ jsx34(
+    DataTable,
+    {
+      columns,
+      data: transactions,
+      pageSize: 10,
+      initialSort: { columnId: "timestamp", direction: "desc" },
+      getRowKey: (row) => row.id,
+      emptyMessage: "No history available"
+    }
+  ) });
+}
+function getHistory(coValue) {
+  return coValue.core.verifiedTransactions.flatMap((tx, index) => {
+    const changes = getTransactionChanges(tx, coValue);
+    return changes.map((change, changeIndex) => ({
+      id: `${tx.txID.sessionID.toString()}-${tx.txID.txIndex}-${index}-${changeIndex}`,
+      author: tx.author,
+      action: mapTransactionToAction(change, coValue),
+      timestamp: new Date(tx.currentMadeAt),
+      isValid: tx.isValid,
+      validationErrorMessage: tx.validationErrorMessage
+    }));
+  });
+}
+function mapTransactionToAction(change, coValue) {
+  if (isUserPromotion(coValue, change)) {
+    if (change.value === "revoked") {
+      return `${change.key} has been revoked`;
+    }
+    return `${change.key} has been promoted to ${change.value}`;
+  }
+  if (isGroupExtension(coValue, change)) {
+    const child = change.key.slice(6);
+    return `Group became a member of ${child}`;
+  }
+  if (isGroupExtendRevocation(coValue, change)) {
+    const child = change.key.slice(6);
+    return `Group's membership of ${child} has been revoked.`;
+  }
+  if (isGroupPromotion(coValue, change)) {
+    const parent = change.key.slice(7);
+    return `Group ${parent} has been promoted to ${change.value}`;
+  }
+  if (isKeyRevelation(coValue, change)) {
+    const [key, target] = change.key.split("_for_");
+    return `Key "${key}" has been revealed to "${target}"`;
+  }
+  if (isItemAppend(coValue, change)) {
+    if (change.after === "start") {
+      return `"${change.value}" has been appended`;
+    }
+    const after = findListChange(change.after, coValue);
+    if (after === void 0) {
+      return `"${change.value}" has been inserted after undefined item`;
+    }
+    return `"${change.value}" has been inserted after "${after.value}"`;
+  }
+  if (isItemPrepend(coValue, change)) {
+    if (change.before === "end") {
+      return `"${change.value}" has been prepended`;
+    }
+    const before = findListChange(change.before, coValue);
+    if (before === void 0) {
+      return `"${change.value}" has been inserted before undefined item`;
+    }
+    return `"${change.value}" has been inserted before "${before.value}"`;
+  }
+  if (isItemDeletion(coValue, change)) {
+    const insertion = findListChange(change.insertion, coValue);
+    if (insertion === void 0) {
+      return `An undefined item has been deleted`;
+    }
+    return `"${insertion.value}" has been deleted`;
+  }
+  if (isStreamStart(coValue, change)) {
+    return `Stream started with mime type "${change.mimeType}" and file name "${change.fileName}"`;
+  }
+  if (isStreamChunk(coValue, change)) {
+    return `Stream chunk added`;
+  }
+  if (isStreamEnd(coValue, change)) {
+    return `Stream ended`;
+  }
+  if (isPropertySet(coValue, change)) {
+    return `Property "${change.key}" has been set to ${JSON.stringify(change.value)}`;
+  }
+  if (isPropertyDeletion(coValue, change)) {
+    return `Property "${change.key}" has been deleted`;
+  }
+  if (change.op === "custom") {
+    return change.action;
+  }
+  return "Unknown action: " + JSON.stringify(change);
+}
+var findListChange = (opId, coValue) => {
+  return coValue.core.verifiedTransactions.find(
+    (tx) => tx.txID.sessionID === opId.sessionID && tx.txID.txIndex === opId.txIndex
+  )?.changes?.[opId.changeIdx];
+};
+var RedTooltip2 = styled19("span")`
+  position:relative; /* making the .tooltip span a container for the tooltip text */
+  border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
+
+  &:before {
+    content: attr(data-text);
+    background-color: red;
+    position:absolute;
+
+    /* vertically center */
+    top:50%;
+    transform:translateY(-50%);
+
+    /* move to right */
+    left:100%;
+    margin-left:15px; /* and add a small left margin */
+
+    /* basic styles */
+    width:200px;
+    padding:10px;
+    border-radius:10px;
+    color: #fff;
+    text-align:center;
+
+    display:none; /* hide by default */
+  }
+
+  &:hover:before {
+    display:block;
+  }
+`;
+
+// src/inspector/viewer/co-map-view.tsx
+import { useState as useState16, useMemo as useMemo6 } from "react";
+import { styled as styled20 } from "goober";
+import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+function CoMapView({
+  coValue,
+  data,
+  node,
+  onNavigate
+}) {
+  return /* @__PURE__ */ jsxs20(Fragment11, { children: [
+    /* @__PURE__ */ jsx35(
+      GridView,
+      {
+        data,
+        onNavigate,
+        node,
+        coValue
+      }
+    ),
+    /* @__PURE__ */ jsxs20("div", { children: [
+      /* @__PURE__ */ jsx35(
+        AddPropertyModal,
+        {
+          disabled: !isWriter(coValue.group.myRole()),
+          coValue,
+          node
+        }
+      ),
+      " ",
+      /* @__PURE__ */ jsx35(RestoreSnapshotModal, { coValue })
+    ] })
+  ] });
+}
+function AddPropertyModal({
+  coValue,
+  node,
+  disabled
+}) {
+  const [isAddPropertyModalOpen, setIsAddPropertyModalOpen] = useState16(false);
+  const [propertyName, setPropertyName] = useState16("");
+  const openAddPropertyModal = () => {
+    setIsAddPropertyModalOpen(true);
+    setPropertyName("");
+  };
+  const handleCancel = () => {
+    setIsAddPropertyModalOpen(false);
+    setPropertyName("");
+  };
+  return /* @__PURE__ */ jsxs20(Fragment11, { children: [
+    /* @__PURE__ */ jsx35(
+      Button,
+      {
+        title: "Add Property",
+        variant: "secondary",
+        disabled,
+        onClick: openAddPropertyModal,
+        children: /* @__PURE__ */ jsx35(Icon, { name: "add" })
+      }
+    ),
+    /* @__PURE__ */ jsxs20(
+      Modal,
+      {
+        isOpen: isAddPropertyModalOpen,
+        onClose: handleCancel,
+        heading: "Add Property",
+        showButtons: false,
+        children: [
+          /* @__PURE__ */ jsx35(
+            Input,
+            {
+              label: "Property Name",
+              value: propertyName,
+              onChange: (e) => setPropertyName(e.target.value),
+              placeholder: "Enter property name"
+            }
+          ),
+          propertyName && /* @__PURE__ */ jsx35(EditorContainer, { children: /* @__PURE__ */ jsx35(
+            CoValueEditor,
+            {
+              node,
+              property: propertyName,
+              value: void 0,
+              coValue,
+              onCancel: handleCancel
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function RestoreSnapshotModal({ coValue }) {
+  const [isRestoreModalOpen, setIsRestoreModalOpen] = useState16(false);
+  const [selectedIndex, setSelectedIndex] = useState16(-1);
+  const [removeUnknownProperties, setRemoveUnknownProperties] = useState16(false);
+  const timestamps = useMemo6(
+    () => coValue.core.verifiedTransactions.map((tx) => tx.madeAt),
+    [coValue.core.verifiedTransactions.length]
+  );
+  const coMapAtSelectedIndex = useMemo6(() => {
+    if (selectedIndex === -1) return null;
+    return coValue.atTime(timestamps[selectedIndex]).toJSON();
+  }, [coValue, timestamps, selectedIndex]);
+  const openRestoreModal = () => {
+    setIsRestoreModalOpen(true);
+    setSelectedIndex(timestamps.length - 1);
+  };
+  const handleRestore = () => {
+    if (timestamps.length < 2) return;
+    if (timestamps.length === 0) return;
+    const selectedTimestamp = timestamps[selectedIndex];
+    if (selectedTimestamp === void 0) return;
+    restoreCoMapToTimestamp(
+      coValue,
+      selectedTimestamp,
+      removeUnknownProperties
+    );
+    setIsRestoreModalOpen(false);
+  };
+  const handleClose = () => {
+    setIsRestoreModalOpen(false);
+  };
+  const canRestore = isWriter(coValue.group.myRole());
+  return /* @__PURE__ */ jsxs20(Fragment11, { children: [
+    /* @__PURE__ */ jsx35(Button, { title: "Timeline", variant: "secondary", onClick: openRestoreModal, children: /* @__PURE__ */ jsx35(Icon, { name: "history" }) }),
+    /* @__PURE__ */ jsxs20(
+      Modal,
+      {
+        isOpen: isRestoreModalOpen,
+        onClose: handleClose,
+        heading: "Timeline",
+        confirmText: "Restore",
+        cancelText: "Cancel",
+        onConfirm: handleRestore,
+        onCancel: handleClose,
+        showButtons: timestamps.length > 1 && canRestore,
+        children: [
+          timestamps.length > 1 && /* @__PURE__ */ jsxs20(Fragment11, { children: [
+            /* @__PURE__ */ jsxs20(RangeContainer, { children: [
+              /* @__PURE__ */ jsx35(RangeLabel, { children: "Select Timestamp" }),
+              /* @__PURE__ */ jsx35(
+                RangeInput,
+                {
+                  type: "range",
+                  min: 0,
+                  max: Math.max(0, timestamps.length - 1),
+                  value: selectedIndex,
+                  onChange: (e) => setSelectedIndex(Number(e.target.value)),
+                  disabled: timestamps.length === 0
+                }
+              ),
+              /* @__PURE__ */ jsx35(TimestampDisplay, { children: timestamps[selectedIndex] !== void 0 ? new Date(timestamps[selectedIndex]).toISOString() : "No timestamps available" })
+            ] }),
+            canRestore && /* @__PURE__ */ jsxs20(CheckboxContainer, { children: [
+              /* @__PURE__ */ jsx35(
+                CheckboxInput,
+                {
+                  type: "checkbox",
+                  id: "remove-unknown-properties",
+                  checked: removeUnknownProperties,
+                  onChange: (e) => setRemoveUnknownProperties(e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx35(CheckboxLabel, { htmlFor: "remove-unknown-properties", children: "Remove unknown properties (properties that don't exist in the selected snapshot)" })
+            ] })
+          ] }),
+          timestamps.length > 0 && timestamps[selectedIndex] !== void 0 && /* @__PURE__ */ jsxs20(PreviewSection, { children: [
+            /* @__PURE__ */ jsx35(PreviewLabel, { children: "State at that time:" }),
+            /* @__PURE__ */ jsx35(PreviewPre, { children: JSON.stringify(coMapAtSelectedIndex, null, 2) })
+          ] }),
+          timestamps.length < 2 && /* @__PURE__ */ jsx35("div", { style: { color: "var(--j-text-color)" }, children: "At least 2 timestamps are required to restore a snapshot." })
+        ]
+      }
+    )
+  ] });
+}
+var PreviewSection = styled20("div")`
+  margin-top: 1.5rem;
+`;
+var PreviewLabel = styled20("div")`
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: var(--j-text-color-strong);
+`;
+var PreviewPre = styled20("pre")`
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-md);
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--j-text-color);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+`;
+var RangeContainer = styled20("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+var RangeLabel = styled20("label")`
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+  font-size: 0.875rem;
+`;
+var RangeInput = styled20("input")`
+  width: 100%;
+  height: 0.5rem;
+  border-radius: var(--j-radius-sm);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--j-foreground);
+  cursor: pointer;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: var(--j-primary-color);
+    cursor: pointer;
+    border: 2px solid var(--j-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  &::-moz-range-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: var(--j-primary-color);
+    cursor: pointer;
+    border: 2px solid var(--j-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var TimestampDisplay = styled20("div")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  color: var(--j-text-color);
+  padding: 0.5rem;
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-md);
+  text-align: center;
+`;
+var CheckboxContainer = styled20("div")`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-top: 1rem;
+`;
+var CheckboxInput = styled20("input")`
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.125rem;
+  cursor: pointer;
+  accent-color: var(--j-primary-color);
+`;
+var CheckboxLabel = styled20("label")`
+  font-size: 0.875rem;
+  color: var(--j-text-color);
+  cursor: pointer;
+  line-height: 1.25rem;
+`;
+var EditorContainer = styled20("div")`
+  margin-top: 1rem;
+`;
+
+// src/inspector/viewer/page.tsx
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+var BasePageContainer = React5.forwardRef(
+  ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ jsx36("div", { ref, ...rest })
+);
+var PageContainer = styled21(BasePageContainer)`
+  position: absolute;
+  z-index: 10;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 0.75rem;
+`;
+var BackButton = styled21("div")`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 2.5rem;
+`;
+var HeaderContainer = styled21("div")`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+`;
+var TitleContainer = styled21("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`;
+var Title = styled21(Heading)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+`;
+var BadgeContainer = styled21("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`;
+var ContentContainer = styled21("div")`
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-bottom: 2rem;
+`;
+function canEdit(value) {
+  try {
+    const myRole = value.group.myRole();
+    return myRole === "writer" || myRole === "admin";
+  } catch (e) {
+    return false;
+  }
+}
+function View(props) {
+  const { type, extendedType } = props.coValue;
+  const { snapshot, value } = props.coValue;
+  const { node, onNavigate } = props;
+  if (!snapshot || snapshot === "unavailable") return;
+  if (type === "costream") {
+    return /* @__PURE__ */ jsx36(
+      CoStreamView,
+      {
+        data: snapshot,
+        onNavigate,
+        node,
+        value
+      }
+    );
+  }
+  if (extendedType === "group") {
+    return /* @__PURE__ */ jsx36(
+      GroupView,
+      {
+        coValue: value,
+        data: snapshot,
+        node,
+        onNavigate
+      }
+    );
+  }
+  if (extendedType === "account") {
+    return /* @__PURE__ */ jsx36(AccountView, { data: snapshot, node, onNavigate });
+  }
+  if (type === "coplaintext") {
+    return /* @__PURE__ */ jsx36(
+      CoPlainTextView,
+      {
+        data: snapshot,
+        coValue: value,
+        node
+      }
+    );
+  }
+  if (type === "colist") {
+    const handleRemove = (index) => {
+      if (confirm("Are you sure you want to remove this item?")) {
+        const list = value;
+        list.delete(index);
+      }
+    };
+    return /* @__PURE__ */ jsx36(
+      TableView,
+      {
+        data: snapshot,
+        node,
+        onNavigate,
+        onRemove: canEdit(value) ? handleRemove : void 0
+      }
+    );
+  }
+  if (extendedType === "record") {
+    return /* @__PURE__ */ jsx36(TableView, { data: snapshot, node, onNavigate });
+  }
+  if (type === "comap") {
+    return /* @__PURE__ */ jsx36(
+      CoMapView,
+      {
+        coValue: value,
+        data: snapshot,
+        node,
+        onNavigate
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx36(GridView, { data: snapshot, onNavigate, node });
+}
+function Page(props) {
+  const {
+    coId,
+    node,
+    name,
+    onNavigate,
+    onHeaderClick,
+    style,
+    className = "",
+    isTopLevel
+  } = props;
+  const coValue = useResolvedCoValue(coId, node);
+  const { value, snapshot, type, extendedType } = coValue;
+  if (snapshot === "unavailable") {
+    return /* @__PURE__ */ jsx36("div", { style, children: "Data unavailable" });
+  }
+  if (!snapshot) {
+    return /* @__PURE__ */ jsx36("div", { style });
+  }
+  return /* @__PURE__ */ jsxs21(PageContainer, { style, className, isTopLevel, children: [
+    !isTopLevel && /* @__PURE__ */ jsx36(
+      BackButton,
+      {
+        "aria-label": "Back",
+        onClick: () => {
+          onHeaderClick?.();
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx36(HeaderContainer, { children: /* @__PURE__ */ jsxs21(TitleContainer, { children: [
+      /* @__PURE__ */ jsx36(Title, { children: /* @__PURE__ */ jsxs21("span", { children: [
+        name,
+        typeof snapshot === "object" && "name" in snapshot ? /* @__PURE__ */ jsxs21("span", { style: { color: "#57534e", fontWeight: 500 }, children: [
+          " ",
+          snapshot.name
+        ] }) : null
+      ] }) }),
+      /* @__PURE__ */ jsxs21(BadgeContainer, { children: [
+        /* @__PURE__ */ jsx36(Badge, { children: type && /* @__PURE__ */ jsx36(TypeIcon, { type, extendedType }) }),
+        /* @__PURE__ */ jsx36(Badge, { children: coId })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs21(ContentContainer, { children: [
+      /* @__PURE__ */ jsx36(View, { ...props, coValue }),
+      extendedType !== "account" && extendedType !== "group" && /* @__PURE__ */ jsxs21(Fragment12, { children: [
+        /* @__PURE__ */ jsx36(RoleDisplay, { node, value }),
+        /* @__PURE__ */ jsxs21(Text, { muted: true, children: [
+          "Owned by",
+          " ",
+          /* @__PURE__ */ jsx36(
+            AccountOrGroupText,
+            {
+              coId: value.group.id,
+              node,
+              showId: true,
+              onClick: () => {
+                onNavigate([{ coId: value.group.id, name: "owner" }]);
+              }
+            }
+          )
+        ] })
+      ] }),
+      value && /* @__PURE__ */ jsx36(HistoryView, { coValue: value, node })
+    ] })
+  ] });
+}
+
+// src/inspector/ui/error-boundary.tsx
+import React6 from "react";
+import { styled as styled22 } from "goober";
+import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+var ErrorBoundary = class extends React6.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(error);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsxs22("div", { style: { padding: "1rem" }, children: [
+        /* @__PURE__ */ jsx37(StyledHeading2, { children: this.props.title }),
+        /* @__PURE__ */ jsx37(Text, { mono: true, style: { marginTop: "0.5rem", color: "#ef4444" }, children: this.state.error?.message || "An unexpected error occurred" }),
+        /* @__PURE__ */ jsx37("pre", { style: { paddingLeft: "1rem", color: "#ef4444" }, children: this.state.error?.stack })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+var StyledHeading2 = styled22("h1")`
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+`;
+
+// src/inspector/pages/home.tsx
+import { styled as styled23 } from "goober";
+import { useState as useState17 } from "react";
+import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+function HomePage() {
+  const { localNode, accountID } = useNode();
+  const { path, setPage } = useRouter();
+  const [coValueId, setCoValueId] = useState17("");
+  if (!localNode || !accountID) {
+    return /* @__PURE__ */ jsx38("div", { children: "Loading..." });
+  }
+  const handleCoValueIdSubmit = (e) => {
+    e.preventDefault();
+    if (coValueId) {
+      setPage(coValueId);
+    }
+    setCoValueId("");
+  };
+  return /* @__PURE__ */ jsx38(Fragment13, { children: /* @__PURE__ */ jsxs23(
+    CenteredForm,
+    {
+      onSubmit: handleCoValueIdSubmit,
+      "aria-hidden": path.length !== 0,
+      children: [
+        /* @__PURE__ */ jsx38(Heading, { children: "Jazz CoValue Inspector" }),
+        /* @__PURE__ */ jsx38(
+          Input,
+          {
+            label: "CoValue ID",
+            className: "font-mono",
+            hideLabel: true,
+            placeholder: "co_z1234567890abcdef123456789",
+            value: coValueId,
+            onChange: (e) => setCoValueId(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx38(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
+        /* @__PURE__ */ jsx38(OrText, { children: "or" }),
+        /* @__PURE__ */ jsx38(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => {
+              setPage(accountID);
+            },
+            children: "Inspect my account"
+          }
+        )
+      ]
+    }
+  ) });
+}
+var CenteredForm = styled23("form")`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  top: -1.5rem;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 100%;
+  width: 100%;
+  max-width: 24rem;
+  margin: 0 auto;
+`;
+var OrText = styled23("p")`
+  text-align: center;
+`;
+
+// src/inspector/viewer/page-stack.tsx
+import { Fragment as Fragment14, jsx as jsx39 } from "react/jsx-runtime";
+var PageStackContainer = styled24("article")`
+  position: relative;
+  padding: 0 0.75rem;
+  overflow-y: auto;
+  flex: 1;
+  color: var(--j-text-color);
+  font-size: 16px;
+`;
+function PageStack({ homePage }) {
+  const { path, addPages, goBack } = useRouter();
+  const { localNode } = useNode();
+  const page = path[path.length - 1];
+  const index = path.length - 1;
+  if (path.length <= 0) {
+    return /* @__PURE__ */ jsx39(PageStackContainer, { children: homePage ?? /* @__PURE__ */ jsx39(HomePage, {}) });
+  }
+  return /* @__PURE__ */ jsx39(Fragment14, { children: /* @__PURE__ */ jsx39(PageStackContainer, { children: localNode && page && /* @__PURE__ */ jsx39(ErrorBoundary, { title: "An error occurred while rendering this CoValue", children: /* @__PURE__ */ jsx39(
+    Page,
+    {
+      coId: page.coId,
+      node: localNode,
+      name: page.name || page.coId,
+      onHeaderClick: goBack,
+      onNavigate: addPages,
+      isTopLevel: index === path.length - 1
+    }
+  ) }) }) });
+}
+
+// src/inspector/ui/global-styles.tsx
+import { styled as styled25 } from "goober";
+var GlobalStyles = styled25("div")`
+  /* Colors */
+  --j-primary-color: #146AFF;
+  --j-link-color: var(--j-primary-color);
+  --j-success-color: oklch(52.7% 0.154 150.069);
+  --j-destructive-color: oklch(50.5% 0.213 27.518);
+  
+  /* Neutral Colors */
+  --j-neutral-100: #faf8f8;
+  --j-neutral-200: #e5e3e4;
+  --j-neutral-300: #d0cecf;
+  --j-neutral-400: #bbbaba;
+  --j-neutral-500: #a8a6a6;
+  --j-neutral-600: #858484;
+  --j-neutral-700: #6b696a;
+  --j-neutral-900: #2f2e2e;
+  --j-neutral-925: #1b1a1a;
+  --j-neutral-950: #151414;
+  
+  /* Text Colors */
+  --j-text-color: var(--j-neutral-700);
+  --j-text-color-strong: var(--j-neutral-900);
+
+  /* Border Colors */
+  --j-border-color: var(--j-neutral-200);
+  --j-border-color-hover: var(--j-neutral-300);
+  --j-border-dark: var(--j-neutral-900);
+  --j-border-focus: var(--j-primary-color);
+
+  /* Background Colors */
+  --j-background: #FFFFFF;
+  --j-foreground: var(--j-neutral-100);
+
+  /* Border Radius */
+  --j-radius-sm: 0.25rem;
+  --j-radius-md: 0.375rem;
+  --j-radius-lg: 0.5rem;
+
+  /* Shadows */
+  --j-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+  @media (prefers-color-scheme: dark) {
+    --j-text-color: var(--j-neutral-400);
+    --j-border-color: var(--j-neutral-900);
+    --j-background: var(--j-neutral-950);
+    --j-foreground: var(--j-neutral-925);
+    --j-border-color-hover: var(--j-neutral-700);
+    --j-text-color-strong: var(--j-neutral-100);
+    --j-success-color: oklch(72.3% 0.219 149.579);
+    --j-destructive-color: oklch(63.7% 0.237 25.331);
+  }
+  
+  *:focus {
+    outline: none;
+  }
+  
+  *:focus-visible {
+    box-shadow: 0 0 0 2px var(--j-link-color);
+  }
+  
+  .j-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+
+// src/inspector/viewer/header.tsx
+import { styled as styled27 } from "goober";
+import { useState as useState19 } from "react";
+
+// src/inspector/viewer/breadcrumbs.tsx
+import { styled as styled26 } from "goober";
+import React7 from "react";
+import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+var BreadcrumbsContainer = styled26("div")`
+  position: relative;
+  z-index: 20;
+  flex: 1;
+  display: flex;
+  align-items: center;
+`;
+var Separator = styled26("span")`
+  padding: 0 0.125rem;
+`;
+var Breadcrumbs = () => {
+  const { path, goToIndex } = useRouter();
+  return /* @__PURE__ */ jsxs24(BreadcrumbsContainer, { children: [
+    /* @__PURE__ */ jsx40(
+      Button,
+      {
+        variant: "link",
+        style: { padding: "0 0.25rem" },
+        onClick: () => goToIndex(-1),
+        children: "Home"
+      }
+    ),
+    path.map((page, index) => {
+      return /* @__PURE__ */ jsxs24(React7.Fragment, { children: [
+        /* @__PURE__ */ jsx40(Separator, { "aria-hidden": true, children: "/" }),
+        /* @__PURE__ */ jsx40(
+          Button,
+          {
+            variant: "link",
+            style: { padding: "0 0.25rem" },
+            onClick: () => goToIndex(index),
+            children: index === 0 ? page.name || "Root" : page.name
+          }
+        )
+      ] }, page.coId);
+    })
+  ] });
+};
+
+// src/inspector/viewer/delete-local-data.tsx
+import { useState as useState18 } from "react";
+import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+var DELETE_LOCAL_DATA_STRING = "delete my local data";
+function DeleteLocalData() {
+  const [showDeleteModal, setShowDeleteModal] = useState18(false);
+  const [confirmDeleteString, setConfirmDeleteString] = useState18("");
+  return /* @__PURE__ */ jsxs25(Fragment15, { children: [
+    /* @__PURE__ */ jsx41(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
+    /* @__PURE__ */ jsxs25(
+      Modal,
+      {
+        isOpen: showDeleteModal,
+        onClose: () => setShowDeleteModal(false),
+        heading: "Delete Local Data",
+        showButtons: false,
+        children: [
+          /* @__PURE__ */ jsxs25(
+            "div",
+            {
+              style: {
+                margin: "0 0 1rem 0",
+                color: "var(--j-text-color)",
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.5rem"
+              },
+              children: [
+                /* @__PURE__ */ jsxs25("p", { children: [
+                  "This action ",
+                  /* @__PURE__ */ jsx41("strong", { children: "cannot" }),
+                  " be undone."
+                ] }),
+                /* @__PURE__ */ jsxs25("p", { children: [
+                  "Be aware that the following data will be",
+                  " ",
+                  /* @__PURE__ */ jsx41("strong", { children: "permanently" }),
+                  " deleted:"
+                ] }),
+                /* @__PURE__ */ jsxs25("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
+                  /* @__PURE__ */ jsxs25("li", { children: [
+                    "Unsynced data for ",
+                    /* @__PURE__ */ jsx41("strong", { children: "all apps" }),
+                    " on",
+                    " ",
+                    /* @__PURE__ */ jsx41("code", { children: window.location.origin })
+                  ] }),
+                  /* @__PURE__ */ jsx41("li", { children: "Accounts" }),
+                  /* @__PURE__ */ jsx41("li", { children: "Logged in sessions" })
+                ] }),
+                /* @__PURE__ */ jsx41("p", {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx41(
+            Input,
+            {
+              label: `Type "${DELETE_LOCAL_DATA_STRING}" to confirm`,
+              placeholder: DELETE_LOCAL_DATA_STRING,
+              value: confirmDeleteString,
+              onChange: (e) => {
+                setConfirmDeleteString(e.target.value);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx41(
+            "p",
+            {
+              style: {
+                margin: "0 0 1rem 0",
+                color: "var(--j-text-color)",
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.5rem"
+              },
+              children: /* @__PURE__ */ jsxs25("small", { children: [
+                "Data synced to a sync server will ",
+                /* @__PURE__ */ jsx41("strong", { children: "not" }),
+                " be deleted, and will be synced when you log in again."
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs25(
+            "div",
+            {
+              style: {
+                display: "flex",
+                marginTop: "0.5rem",
+                justifyContent: "flex-end",
+                gap: "0.5rem"
+              },
+              children: [
+                /* @__PURE__ */ jsx41(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
+                /* @__PURE__ */ jsx41(
+                  Button,
+                  {
+                    variant: "destructive",
+                    disabled: confirmDeleteString !== DELETE_LOCAL_DATA_STRING,
+                    onClick: () => {
+                      const jazzKeys = Object.keys(localStorage).filter(
+                        (key) => key.startsWith("jazz-") || key.startsWith("co_z")
+                      );
+                      jazzKeys.forEach((key) => localStorage.removeItem(key));
+                      indexedDB.deleteDatabase("jazz-storage");
+                      window.location.reload();
+                      setShowDeleteModal(false);
+                    },
+                    children: "I'm sure, delete my local data"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/inspector/viewer/header.tsx
+import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+function Header({
+  showDeleteLocalData = false,
+  showClose = false,
+  onClose,
+  children
+}) {
+  const [coValueId, setCoValueId] = useState19("");
+  const { path, setPage } = useRouter();
+  const handleCoValueIdSubmit = (e) => {
+    e.preventDefault();
+    if (coValueId) {
+      setPage(coValueId);
+    }
+    setCoValueId("");
+  };
+  return /* @__PURE__ */ jsxs26(HeaderContainer2, { children: [
+    /* @__PURE__ */ jsx42(Breadcrumbs, {}),
+    path.length !== 0 && /* @__PURE__ */ jsx42(Form, { onSubmit: handleCoValueIdSubmit, children: /* @__PURE__ */ jsx42(
+      Input,
+      {
+        label: "CoValue ID",
+        style: { fontFamily: "monospace" },
+        hideLabel: true,
+        placeholder: "co_z1234567890abcdef123456789",
+        value: coValueId,
+        onChange: (e) => setCoValueId(e.target.value)
+      }
+    ) }),
+    children,
+    showDeleteLocalData && /* @__PURE__ */ jsx42(DeleteLocalData, {}),
+    showClose && /* @__PURE__ */ jsx42(Button, { variant: "plain", type: "button", onClick: onClose, children: "Close" })
+  ] });
+}
+var HeaderContainer2 = styled27("div")`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 0.75rem;
+  margin: 0.75rem 0;
+`;
+var Form = styled27("form")`
+  width: 24rem;
+`;
+
+export {
+  Button,
+  AccountOrGroupText,
+  Icon,
+  Modal,
+  Input,
+  NodeContext,
+  NodeProvider,
+  useNode,
+  InMemoryRouterProvider,
+  HashRouterProvider,
+  PageStack,
+  GlobalStyles,
+  Header
+};
+//# sourceMappingURL=chunk-YQNK5Y7B.js.map