jazz-tools 0.15.6 → 0.15.8

package/dist/inspector/{custom-element-CWW72LEG.js → custom-element-I7Q6H5E5.js}

@@ -2146,7 +2146,7 @@ var require_react = __commonJS({
 var require_react_dom_production = __commonJS({
   "../../node_modules/react-dom/cjs/react-dom.production.js"(exports) {
     "use strict";
-    var React = require_react();
+    var React8 = require_react();
     function formatProdErrorMessage(code) {
       var url = "https://react.dev/errors/" + code;
       if (1 < arguments.length) {
@@ -2186,7 +2186,7 @@ var require_react_dom_production = __commonJS({
         implementation
       };
     }
-    var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+    var ReactSharedInternals = React8.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
     function getCrossOriginStringAs(as, input) {
       if ("font" === as) return "";
       if ("string" === typeof input)
@@ -2340,7 +2340,7 @@ var require_react_dom_development = __commonJS({
         return dispatcher;
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React = require_react(), Internals = {
+      var React8 = require_react(), Internals = {
         d: {
           f: noop,
           r: function() {
@@ -2358,7 +2358,7 @@ var require_react_dom_development = __commonJS({
         },
         p: 0,
         findDOMNode: null
-      }, REACT_PORTAL_TYPE = Symbol.for("react.portal"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+      }, REACT_PORTAL_TYPE = Symbol.for("react.portal"), ReactSharedInternals = React8.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
       "function" === typeof Map && null != Map.prototype && "function" === typeof Map.prototype.forEach && "function" === typeof Set && null != Set.prototype && "function" === typeof Set.prototype.clear && "function" === typeof Set.prototype.forEach || console.error(
         "React depends on Map and Set built-in types. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"
       );
@@ -2566,7 +2566,7 @@ var require_react_dom_client_production = __commonJS({
   "../../node_modules/react-dom/cjs/react-dom-client.production.js"(exports) {
     "use strict";
     var Scheduler = require_scheduler();
-    var React = require_react();
+    var React8 = require_react();
     var ReactDOM = require_react_dom();
     function formatProdErrorMessage(code) {
       var url = "https://react.dev/errors/" + code;
@@ -2649,7 +2649,7 @@ var require_react_dom_client_production = __commonJS({
         }
       return null;
     }
-    var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+    var ReactSharedInternals = React8.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
     var assign = Object.assign;
     var prefix;
     var suffix;
@@ -13597,7 +13597,7 @@ var require_react_dom_client_production = __commonJS({
         0 === i && attemptExplicitHydrationTarget(target);
       }
     };
-    var isomorphicReactPackageVersion$jscomp$inline_1686 = React.version;
+    var isomorphicReactPackageVersion$jscomp$inline_1686 = React8.version;
     if ("19.0.0" !== isomorphicReactPackageVersion$jscomp$inline_1686)
       throw Error(
         formatProdErrorMessage(
@@ -14963,7 +14963,7 @@ var require_react_dom_client_development = __commonJS({
         "number" === type && getActiveElement(node.ownerDocument) === node || node.defaultValue === "" + value || (node.defaultValue = "" + value);
       }
       function validateOptionProps(element, props) {
-        null == props.value && ("object" === typeof props.children && null !== props.children ? React.Children.forEach(props.children, function(child) {
+        null == props.value && ("object" === typeof props.children && null !== props.children ? React8.Children.forEach(props.children, function(child) {
           null == child || "string" === typeof child || "number" === typeof child || "bigint" === typeof child || didWarnInvalidChild || (didWarnInvalidChild = true, console.error(
             "Cannot infer the option value of complex children. Pass a `value` prop or use a plain string as children to <option>."
           ));
@@ -28433,13 +28433,13 @@ var require_react_dom_client_development = __commonJS({
         ));
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var Scheduler = require_scheduler(), React = require_react(), ReactDOM = require_react_dom(), REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_PROVIDER_TYPE = Symbol.for("react.provider"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy");
+      var Scheduler = require_scheduler(), React8 = require_react(), ReactDOM = require_react_dom(), REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_PROVIDER_TYPE = Symbol.for("react.provider"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy");
       Symbol.for("react.scope");
       Symbol.for("react.debug_trace_mode");
       var REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen");
       Symbol.for("react.legacy_hidden");
       Symbol.for("react.tracing_marker");
-      var REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel"), MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, assign = Object.assign, disabledDepth = 0, prevLog, prevInfo, prevWarn, prevError, prevGroup, prevGroupCollapsed, prevGroupEnd;
+      var REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel"), MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React8.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, assign = Object.assign, disabledDepth = 0, prevLog, prevInfo, prevWarn, prevError, prevGroup, prevGroupCollapsed, prevGroupEnd;
       disabledLog.__reactDisabledLog = true;
       var prefix, suffix, reentry = false;
       var componentFrameCache = new ("function" === typeof WeakMap ? WeakMap : Map)();
@@ -31159,7 +31159,7 @@ var require_react_dom_client_development = __commonJS({
         }
       };
       (function() {
-        var isomorphicReactPackageVersion = React.version;
+        var isomorphicReactPackageVersion = React8.version;
         if ("19.0.0" !== isomorphicReactPackageVersion)
           throw Error(
             'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n  - react:      ' + (isomorphicReactPackageVersion + "\n  - react-dom:  19.0.0\nLearn more: https://react.dev/warnings/version-mismatch")
@@ -31764,9 +31764,9 @@ var require_react_jsx_runtime_development = __commonJS({
         info || (parentType = getComponentNameFromType(parentType)) && (info = "\n\nCheck the top-level render call using <" + parentType + ">.");
         return info;
       }
-      var React = require_react(), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
+      var React8 = require_react(), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
       Symbol.for("react.provider");
-      var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"), MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, assign = Object.assign, REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, disabledDepth = 0, prevLog, prevInfo, prevWarn, prevError, prevGroup, prevGroupCollapsed, prevGroupEnd;
+      var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"), MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"), ReactSharedInternals = React8.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, assign = Object.assign, REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, disabledDepth = 0, prevLog, prevInfo, prevWarn, prevError, prevGroup, prevGroupCollapsed, prevGroupEnd;
       disabledLog.__reactDisabledLog = true;
       var prefix, suffix, reentry = false;
       var componentFrameCache = new ("function" === typeof WeakMap ? WeakMap : Map)();
@@ -31798,9 +31798,2040 @@ var require_jsx_runtime = __commonJS({
 
 // src/inspector/custom-element.tsx
 var import_client = __toESM(require_client(), 1);
-var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
 import { Account } from "jazz-tools";
-import { JazzInspectorInternal } from "jazz-tools/inspector";
+
+// src/inspector/index.ts
+var import_react17 = __toESM(require_react(), 1);
+
+// src/inspector/viewer/new-app.tsx
+var import_react15 = __toESM(require_react(), 1);
+import { styled as styled18 } from "goober";
+import { useJazzContext } from "jazz-tools/react-core";
+
+// src/inspector/ui/button.tsx
+var import_react = __toESM(require_react(), 1);
+var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
+import { styled } from "goober";
+var StyledButton = styled("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;
+        `;
+    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;
+          }
+        `;
+    default:
+      return "";
+  }
+}}
+`;
+var Button = (0, import_react.forwardRef)(
+  ({
+    className,
+    children,
+    variant = "primary",
+    disabled,
+    type = "button",
+    ...buttonProps
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledButton,
+      {
+        ref,
+        ...buttonProps,
+        disabled,
+        className,
+        type,
+        variant,
+        children
+      }
+    );
+  }
+);
+
+// src/inspector/ui/input.tsx
+var import_react2 = __toESM(require_react(), 1);
+var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
+import { styled as styled2 } from "goober";
+var Container = styled2("div")`
+  display: grid;
+  gap: 0.25rem;
+`;
+var StyledInput = styled2("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(--text-color-strong);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+var Input = (0, import_react2.forwardRef)(
+  ({ label, className, hideLabel, id: customId, ...inputProps }, ref) => {
+    const generatedId = (0, import_react2.useId)();
+    const id = customId || generatedId;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Container, { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledInput, { ref, ...inputProps, id })
+    ] });
+  }
+);
+
+// src/inspector/viewer/breadcrumbs.tsx
+var import_react3 = __toESM(require_react(), 1);
+import { styled as styled3 } from "goober";
+var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
+var BreadcrumbsContainer = styled3("div")`
+  position: relative;
+  z-index: 20;
+  flex: 1;
+  display: flex;
+  align-items: center;
+`;
+var Separator = styled3("span")`
+  padding: 0 0.125rem;
+`;
+var Breadcrumbs = ({
+  path,
+  onBreadcrumbClick
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(BreadcrumbsContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Button,
+      {
+        variant: "link",
+        style: { padding: "0 0.25rem" },
+        onClick: () => onBreadcrumbClick(-1),
+        children: "Home"
+      }
+    ),
+    path.map((page, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react3.default.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Separator, { "aria-hidden": true, children: "/" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Button,
+          {
+            variant: "link",
+            style: { padding: "0 0.25rem" },
+            onClick: () => onBreadcrumbClick(index),
+            children: index === 0 ? page.name || "Root" : page.name
+          }
+        )
+      ] }, page.coId);
+    })
+  ] });
+};
+
+// src/inspector/viewer/page-stack.tsx
+import { styled as styled15 } from "goober";
+
+// src/inspector/viewer/page.tsx
+var import_react12 = __toESM(require_react(), 1);
+import { styled as styled14 } from "goober";
+
+// src/inspector/ui/badge.tsx
+var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
+import { styled as styled4 } from "goober";
+var StyledBadge = styled4("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__ */ (0, import_jsx_runtime4.jsx)(StyledBadge, { className, children });
+}
+
+// src/inspector/ui/heading.tsx
+var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
+import { styled as styled5 } from "goober";
+var StyledHeading = styled5("h1")`
+  font-size: 1.125rem;
+  text-align: center;
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+`;
+function Heading({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledHeading, { className, children });
+}
+
+// src/inspector/ui/text.tsx
+var import_react4 = __toESM(require_react(), 1);
+var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
+import { styled as styled6 } from "goober";
+var BaseText = import_react4.default.forwardRef(
+  ({ muted, strong, small, inline, mono, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, ...rest })
+);
+var StyledText = styled6(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__ */ (0, import_jsx_runtime6.jsx)(StyledText, { ...props });
+}
+
+// src/inspector/viewer/account-or-group-text.tsx
+var import_react7 = __toESM(require_react(), 1);
+
+// src/inspector/viewer/use-resolve-covalue.ts
+var import_react6 = __toESM(require_react(), 1);
+
+// src/inspector/viewer/co-stream-view.tsx
+var import_react5 = __toESM(require_react(), 1);
+import { base64URLtoBytes } from "cojson";
+import { styled as styled7 } from "goober";
+var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
+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__ */ (0, import_jsx_runtime7.jsxs)(Button, { variant: "secondary", onClick: downloadFile, children: [
+    "\u2B07\uFE0F ",
+    label
+  ] });
+};
+var LabelContentPairContainer = styled7("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+`;
+var BinaryStreamGrid = styled7("div")`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  max-width: 48rem;
+`;
+var ImagePreviewContainer = styled7("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 = styled7("div")`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+`;
+var CoStreamItemContainer = styled7("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__ */ (0, import_jsx_runtime7.jsxs)(LabelContentPairContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: content })
+  ] });
+};
+function RenderCoBinaryStream({
+  value,
+  items
+}) {
+  const [file, setFile] = (0, import_react5.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(true);
+  (0, import_react5.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime7.jsx)("div", { children: "No blob" });
+  if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: "Loading..." });
+  if (!file) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: "No blob" });
+  const { blob, mimeType } = file;
+  const sizeInKB = (file.totalSize || 0) / 1024;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(BinaryStreamGrid, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        LabelContentPair,
+        {
+          label: "Mime Type",
+          content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Badge, { children: mimeType || "No mime type" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        LabelContentPair,
+        {
+          label: "Size",
+          content: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+            sizeInKB.toFixed(2),
+            " KB"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        LabelContentPair,
+        {
+          label: "Download",
+          content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            BinaryDownloadButton,
+            {
+              fileName: value.id.toString(),
+              pdfBlob: blob,
+              mimeType,
+              label: mimeType === "application/pdf" ? "Download PDF" : "Download file"
+            }
+          )
+        }
+      )
+    ] }),
+    mimeType === "image/png" || mimeType === "image/jpeg" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      LabelContentPair,
+      {
+        label: "Preview",
+        content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ImagePreviewContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RenderBlobImage, { blob }) })
+      }
+    ) : null
+  ] });
+}
+function RenderCoStream({
+  value,
+  node
+}) {
+  const streamPerUser = Object.keys(value.items);
+  const userCoIds = streamPerUser.map((stream) => stream.split("_session")[0]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CoStreamGrid, { children: userCoIds.map((id, idx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CoStreamItemContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AccountOrGroupText, { coId: id, node }),
+    value.items[streamPerUser[idx]]?.map(
+      (item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        new Date(item.madeAt).toLocaleString(),
+        " ",
+        JSON.stringify(item.value)
+      ] })
+    )
+  ] }, id)) });
+}
+function CoStreamView({
+  value,
+  node
+}) {
+  const streamType = detectCoStreamType(value);
+  if (streamType.type === "binary") {
+    if (streamType.items === void 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: "No binary stream" });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      RenderCoBinaryStream,
+      {
+        value,
+        items: streamType.items
+      }
+    );
+  }
+  if (streamType.type === "coStream") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RenderCoStream, { value, node });
+  }
+  if (streamType.type === "unknown") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: "Unknown stream type" });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: "Unknown stream type" });
+}
+function RenderBlobImage({ blob }) {
+  const urlCreator = window.URL || window.webkitURL;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: urlCreator.createObjectURL(blob) });
+}
+
+// src/inspector/viewer/use-resolve-covalue.ts
+var isBrowserImage = (coValue) => {
+  return "originalSize" in coValue && "placeholderDataURL" in coValue;
+};
+var isGroup = (coValue) => {
+  return "readKey" in coValue;
+};
+var isAccount = (coValue) => {
+  return isGroup(coValue) && "profile" 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 (isAccount(snapshot)) {
+      extendedType = "account";
+    } else if (isGroup(snapshot)) {
+      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 (isAccount(snapshot)) {
+          extendedType = "account";
+        } else if (isGroup(snapshot)) {
+          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] = (0, import_react6.useState)();
+  (0, import_react6.useEffect)(() => {
+    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] = (0, import_react6.useState)([]);
+  (0, import_react6.useEffect)(() => {
+    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
+var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
+function AccountOrGroupText({
+  coId,
+  node,
+  showId = false,
+  onClick
+}) {
+  const { snapshot, extendedType } = useResolvedCoValue(coId, node);
+  const [name, setName] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Loading..." });
+  if (extendedType !== "account" && extendedType !== "group") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)(Button, { variant: "link", onClick: () => onClick(displayName), children: displayText });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: displayText });
+}
+
+// src/inspector/viewer/type-icon.tsx
+import { styled as styled8 } from "goober";
+var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
+var IconText = styled8("span")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+`;
+var UnavailableText = styled8("div")`
+  font-weight: 500;
+`;
+var EmptySpace = styled8("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__ */ (0, import_jsx_runtime9.jsx)(IconText, { children: icon2 }) : null;
+};
+var ResolveIcon = ({
+  coId,
+  node
+}) => {
+  const { type, extendedType, snapshot } = useResolvedCoValue(coId, node);
+  if (snapshot === "unavailable" && !type) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(UnavailableText, { children: "Unavailable" });
+  }
+  if (!type) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EmptySpace, { children: " " });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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
+var import_react8 = __toESM(require_react(), 1);
+import { styled as styled9 } from "goober";
+
+// src/inspector/ui/icons/chevron-down-icon.tsx
+var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "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__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+
+// src/inspector/ui/icons/delete-icon.tsx
+var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
+function DeleteIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "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__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M3 6h18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+      ]
+    }
+  );
+}
+
+// src/inspector/ui/icons/link-icon.tsx
+var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
+function LinkIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 1.5,
+      stroke: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "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/icon.tsx
+var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+var icons = {
+  chevronDown: ChevronDownIcon,
+  delete: DeleteIcon,
+  link: LinkIcon
+};
+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__ */ (0, import_jsx_runtime13.jsx)(
+    IconComponent,
+    {
+      "aria-hidden": "true",
+      size: sizes[size],
+      strokeWidth: strokeWidths[size],
+      strokeLinecap: "round",
+      ...svgProps
+    }
+  );
+}
+
+// src/inspector/viewer/value-renderer.tsx
+var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+var LinkContainer = styled9("span")`
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+`;
+var BooleanText = styled9("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 = styled9("pre")`
+  margin-top: 0.375rem;
+  font-size: 0.875rem;
+  white-space: pre-wrap;
+`;
+var PreviewContainer = styled9("div")`
+  font-size: 0.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+`;
+var PreviewGrid = styled9("div")`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+`;
+var PreviewMoreText = styled9(Text)`
+  text-align: left;
+  margin-top: 0.5rem;
+`;
+var ImagePreviewContainer2 = styled9("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+var PreviewImage = styled9("img")`
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid white;
+  box-shadow: var(--j-shadow-sm);
+  margin: 0.5rem 0;
+`;
+var RecordText = styled9("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+var ListText = styled9("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+function ValueRenderer({
+  json,
+  onCoIDClick,
+  compact
+}) {
+  const [isExpanded, setIsExpanded] = (0, import_react8.useState)(false);
+  if (typeof json === "undefined" || json === void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { muted: true, children: "undefined" });
+  }
+  if (json === null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { muted: true, children: "null" });
+  }
+  if (typeof json === "string" && isCoId(json)) {
+    const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      json,
+      onCoIDClick && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "link" })
+    ] });
+    if (onCoIDClick) {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        Button,
+        {
+          variant: "link",
+          onClick: () => {
+            onCoIDClick?.(json);
+          },
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LinkContainer, { children: content });
+  }
+  if (typeof json === "string") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { children: json });
+  }
+  if (typeof json === "number") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { mono: true, children: json });
+  }
+  if (typeof json === "boolean") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(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__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: Array.isArray(json) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        "Array (",
+        json.length,
+        ")"
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: "Object" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ObjectContent, { children: [
+        isExpanded ? longJson : shortJson,
+        hasDifference && !isExpanded ? "\n ..." : null
+      ] }),
+      !compact && hasDifference ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "link", onClick: () => setIsExpanded(!isExpanded), children: isExpanded ? "Show less" : "Show more" }) : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: String(json) });
+}
+var CoMapPreview = ({
+  coId,
+  node,
+  limit = 6
+}) => {
+  const { value, snapshot, type, extendedType } = useResolvedCoValue(
+    coId,
+    node
+  );
+  if (!snapshot) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "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__ */ (0, import_jsx_runtime14.jsx)(Text, { inline: true, muted: true, children: "Unavailable" });
+  }
+  if (type === "coplaintext") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: value.toString() });
+  }
+  if (extendedType === "image" && isBrowserImage(snapshot)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ImagePreviewContainer2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewImage, { src: snapshot.placeholderDataURL }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Text, { inline: true, small: true, muted: true, children: [
+        snapshot.originalSize[0],
+        " x ",
+        snapshot.originalSize[1]
+      ] })
+    ] });
+  }
+  if (extendedType === "record") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(RecordText, { children: [
+      "Record",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Text, { inline: true, muted: true, children: [
+        "(",
+        Object.keys(snapshot).length,
+        ")"
+      ] })
+    ] });
+  }
+  if (type === "colist") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ListText, { children: [
+      "List",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(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__ */ (0, import_jsx_runtime14.jsxs)(PreviewContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewGrid, { children: limitedProperties.map(([key, value2]) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react8.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Text, { strong: true, children: [
+        key,
+        ": "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ValueRenderer, { compact: true, json: value2 })
+    ] }, key)) }),
+    properties.length > limit && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(PreviewMoreText, { muted: true, small: true, children: [
+      properties.length - limit,
+      " more"
+    ] })
+  ] });
+};
+
+// 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
+var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
+import { styled as styled11 } from "goober";
+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__ */ (0, import_jsx_runtime15.jsx)(GridOneColumn, { ...rest, children });
+    case 2:
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GridTwoColumns, { ...rest, children });
+    case 3:
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GridThreeColumns, { ...rest, children });
+    default:
+      throw new Error(`Invalid number of columns: ${cols}`);
+  }
+}
+
+// src/inspector/viewer/grid-view.tsx
+var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
+function GridItem({
+  entry,
+  onNavigate,
+  node
+}) {
+  const [key, value] = entry;
+  const isCoValue = isCoId(value);
+  const props = isCoValue ? {
+    onClick: () => onNavigate([{ coId: value, name: key }]),
+    as: "button"
+  } : {
+    style: {
+      backgroundColor: "var(--j-foreground)",
+      borderColor: "var(--j-foreground)"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Card, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardHeader, { children: isCoValue ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { strong: true, children: key }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Badge, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ResolveIcon, { coId: value, node }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { strong: true, children: key }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardBody, { style: { wordBreak: "break-word" }, children: isCoValue ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CoMapPreview, { coId: value, node }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      ValueRenderer,
+      {
+        json: value,
+        onCoIDClick: (coId) => {
+          onNavigate([{ coId, name: key }]);
+        }
+      }
+    ) })
+  ] });
+}
+function GridView({
+  data,
+  onNavigate,
+  node
+}) {
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Grid, { cols: entries.length === 1 ? 1 : 3, children: entries.map((entry, childIndex) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    GridItem,
+    {
+      entry,
+      onNavigate,
+      node
+    },
+    childIndex
+  )) });
+}
+
+// src/inspector/viewer/raw-data-card.tsx
+var import_react9 = __toESM(require_react(), 1);
+var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+function CopyButton({ data }) {
+  const [copyCount, setCopyCount] = (0, import_react9.useState)(0);
+  const copied = copyCount > 0;
+  const stringifiedData = JSON.stringify(data);
+  (0, import_react9.useEffect)(() => {
+    if (copyCount > 0) {
+      const timeout = setTimeout(() => setCopyCount(0), 1e3);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [copyCount]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    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__ */ (0, import_jsx_runtime17.jsxs)(Card, { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(CardHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { strong: true, children: "Raw data" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CopyButton, { data })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ValueRenderer, { json: data }) })
+  ] });
+}
+
+// src/inspector/viewer/account-view.tsx
+var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
+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__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GridView, { data: readableData, onNavigate, node }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RawDataCard, { data })
+  ] });
+}
+
+// src/inspector/viewer/co-plain-text-view.tsx
+var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
+function CoPlainTextView({
+  data
+}) {
+  if (!data) return;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: Object.values(data).join("") }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RawDataCard, { data })
+  ] });
+}
+
+// src/inspector/ui/table.tsx
+var import_react10 = __toESM(require_react(), 1);
+var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
+import { styled as styled12 } from "goober";
+var StyledTable = styled12("table")`
+  width: 100%;
+`;
+var StyledThead = styled12("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 = styled12("tbody")`
+  tr {
+    border-bottom: 1px solid var(--j-border-color);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+`;
+var StyledTh = styled12("th")`
+  font-weight: 500;
+  padding: 0.5rem 0.75rem;
+  color: var(--j-text-color-strong);
+`;
+var StyledTd = styled12("td")`
+  padding: 0.5rem 0.75rem;
+`;
+var Table = import_react10.default.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledTable, { ref, ...props, children }));
+var TableHead = import_react10.default.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledThead, { ref, ...props, children }));
+var TableBody = import_react10.default.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledTbody, { ref, ...props, children }));
+var TableRow = import_react10.default.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { ref, ...props, children }));
+var TableHeader = import_react10.default.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledTh, { ref, ...props, children }));
+var TableCell = import_react10.default.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledTd, { ref, ...props, children }));
+
+// src/inspector/viewer/group-view.tsx
+var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
+function GroupView({
+  data,
+  onNavigate,
+  node
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text, { strong: true, children: "Members" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableHeader, { children: "Account" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableHeader, { children: "Permission" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(TableBody, { children: [
+        "everyone" in data && typeof data.everyone === "string" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableCell, { children: "everyone" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableCell, { children: data.everyone })
+        ] }) : null,
+        Object.entries(data).map(
+          ([key, value]) => isCoId(key) ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(TableRow, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              AccountOrGroupText,
+              {
+                coId: key,
+                node,
+                showId: true,
+                onClick: () => {
+                  onNavigate([{ coId: key, name: key }]);
+                }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableCell, { children: value })
+          ] }, key) : null
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RawDataCard, { data })
+  ] });
+}
+
+// src/inspector/viewer/role-display.tsx
+var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
+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__ */ (0, import_jsx_runtime22.jsxs)(Text, { children: [
+    "Role: ",
+    role
+  ] });
+}
+
+// src/inspector/viewer/table-viewer.tsx
+var import_react11 = __toESM(require_react(), 1);
+import { styled as styled13 } from "goober";
+var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
+var PaginationContainer = styled13("div")`
+  padding: 1rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+`;
+function CoValuesTableView({
+  data,
+  node,
+  onNavigate
+}) {
+  const [visibleRowsCount, setVisibleRowsCount] = (0, import_react11.useState)(10);
+  const [coIdArray, visibleRows] = (0, import_react11.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime23.jsx)("div", { children: "No data to display" });
+  }
+  if (resolvedRows.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: "Loading..." });
+  }
+  const keys = Array.from(
+    new Set(resolvedRows.flatMap((item) => Object.keys(item.snapshot || {})))
+  );
+  const loadMore = () => {
+    setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableRow, { children: [...keys, "Action"].map((key) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableHeader, { children: key }, key)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableBody, { children: resolvedRows.slice(0, visibleRowsCount).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TableRow, { children: [
+        keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          ValueRenderer,
+          {
+            json: item.snapshot[key],
+            onCoIDClick: (coId) => {
+              async function handleClick() {
+                onNavigate([
+                  {
+                    coId: item.value.id,
+                    name: index.toString()
+                  },
+                  {
+                    coId,
+                    name: key
+                  }
+                ]);
+              }
+              handleClick();
+            }
+          }
+        ) }, key)),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => onNavigate([
+              {
+                coId: item.value.id,
+                name: index.toString()
+              }
+            ]),
+            children: "View"
+          }
+        ) })
+      ] }, index)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(PaginationContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Text, { muted: true, small: true, children: [
+        "Showing ",
+        Math.min(visibleRowsCount, coIdArray.length),
+        " of",
+        " ",
+        coIdArray.length
+      ] }),
+      hasMore && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { variant: "secondary", onClick: loadMore, children: "Load more" })
+    ] })
+  ] });
+}
+function TableView({
+  data,
+  node,
+  onNavigate
+}) {
+  const isListOfCoValues = (0, import_react11.useMemo)(() => {
+    return Array.isArray(data) && data.every((k) => isCoId(k));
+  }, [data]);
+  if (isListOfCoValues) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CoValuesTableView, { data, node, onNavigate });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableHeader, { style: { width: "5rem" }, children: "Index" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableHeader, { children: "Value" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableBody, { children: Array.isArray(data) && data?.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { mono: true, children: index }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ValueRenderer, { json: value }) })
+    ] }, index)) })
+  ] });
+}
+
+// src/inspector/viewer/page.tsx
+var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
+var BasePageContainer = import_react12.default.forwardRef(
+  ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, ...rest })
+);
+var PageContainer = styled14(BasePageContainer)`
+  position: absolute;
+  z-index: 10;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 0.75rem;
+`;
+var BackButton = styled14("div")`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 2.5rem;
+`;
+var HeaderContainer = styled14("div")`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+`;
+var TitleContainer = styled14("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`;
+var Title = styled14(Heading)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+`;
+var BadgeContainer = styled14("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`;
+var ContentContainer = styled14("div")`
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-bottom: 2rem;
+`;
+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__ */ (0, import_jsx_runtime24.jsx)(
+      CoStreamView,
+      {
+        data: snapshot,
+        onNavigate,
+        node,
+        value
+      }
+    );
+  }
+  if (extendedType === "group") {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GroupView, { data: snapshot, node, onNavigate });
+  }
+  if (extendedType === "account") {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AccountView, { data: snapshot, node, onNavigate });
+  }
+  if (type === "coplaintext") {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CoPlainTextView, { data: snapshot });
+  }
+  if (type === "colist" || extendedType === "record") {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TableView, { data: snapshot, node, onNavigate });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(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__ */ (0, import_jsx_runtime24.jsx)("div", { style, children: "Data unavailable" });
+  }
+  if (!snapshot) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(PageContainer, { style, className, isTopLevel, children: [
+    !isTopLevel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      BackButton,
+      {
+        "aria-label": "Back",
+        onClick: () => {
+          onHeaderClick?.();
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(HeaderContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(TitleContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
+        name,
+        typeof snapshot === "object" && "name" in snapshot ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { style: { color: "#57534e", fontWeight: 500 }, children: [
+          " ",
+          snapshot.name
+        ] }) : null
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(BadgeContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Badge, { children: type && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TypeIcon, { type, extendedType }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Badge, { children: coId })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ContentContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(View, { ...props, coValue }),
+      extendedType !== "account" && extendedType !== "group" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RoleDisplay, { node, value }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Text, { muted: true, children: [
+          "Owned by",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            AccountOrGroupText,
+            {
+              coId: value.group.id,
+              node,
+              showId: true,
+              onClick: () => {
+                onNavigate([{ coId: value.group.id, name: "owner" }]);
+              }
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/inspector/viewer/page-stack.tsx
+var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
+var PageStackContainer = styled15("div")`
+  position: relative;
+  padding: 0 0.75rem;
+  overflow-y: auto;
+  flex: 1;
+  color: var(--j-text-color);
+  font-size: 16px;
+`;
+function PageStack({
+  path,
+  node,
+  goBack,
+  addPages,
+  children
+}) {
+  const page = path[path.length - 1];
+  const index = path.length - 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PageStackContainer, { children: [
+    children,
+    node && page && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      Page,
+      {
+        coId: page.coId,
+        node,
+        name: page.name || page.coId,
+        onHeaderClick: goBack,
+        onNavigate: addPages,
+        isTopLevel: index === path.length - 1
+      }
+    )
+  ] }) });
+}
+
+// src/inspector/viewer/use-page-path.ts
+var import_react13 = __toESM(require_react(), 1);
+var STORAGE_KEY = "jazz-inspector-paths";
+function usePagePath(defaultPath) {
+  const [path, setPath] = (0, import_react13.useState)(() => {
+    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 = (0, import_react13.useCallback)((newPath) => {
+    setPath(newPath);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(newPath));
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    if (defaultPath && JSON.stringify(path) !== JSON.stringify(defaultPath)) {
+      updatePath(defaultPath);
+    }
+  }, [defaultPath, path, updatePath]);
+  const addPages = (0, import_react13.useCallback)(
+    (newPages) => {
+      updatePath([...path, ...newPages]);
+    },
+    [path, updatePath]
+  );
+  const goToIndex = (0, import_react13.useCallback)(
+    (index) => {
+      updatePath(path.slice(0, index + 1));
+    },
+    [path, updatePath]
+  );
+  const setPage = (0, import_react13.useCallback)(
+    (coId) => {
+      updatePath([{ coId, name: "Root" }]);
+    },
+    [updatePath]
+  );
+  const goBack = (0, import_react13.useCallback)(() => {
+    if (path.length > 1) {
+      updatePath(path.slice(0, path.length - 1));
+    }
+  }, [path, updatePath]);
+  return {
+    path,
+    setPage,
+    addPages,
+    goToIndex,
+    goBack
+  };
+}
+
+// src/inspector/ui/global-styles.tsx
+import { styled as styled16 } from "goober";
+var GlobalStyles = styled16("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/inpsector-button.tsx
+var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
+import { styled as styled17 } from "goober";
+var StyledInspectorButton = styled17("button")`
+  position: fixed;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: white;
+  box-shadow:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  margin: 1rem;
+  padding: 0.5rem !important;
+  border: 1px solid #e5e3e4;
+  border-radius: 0.375rem;
+  z-index: 999;
+  
+  ${(props) => {
+  switch (props.position) {
+    case "bottom right":
+      return "bottom: 0; right: 0;";
+    case "bottom left":
+      return "bottom: 0; left: 0;";
+    case "top right":
+      return "top: 0; right: 0;";
+    case "top left":
+      return "top: 0; left: 0;";
+    case "right":
+      return "right: 0; top: 50%; transform: translateY(-50%);";
+    case "left":
+      return "left: 0; top: 50%; transform: translateY(-50%);";
+    default:
+      return "";
+  }
+}}
+`;
+var JazzIcon = styled17("svg")`
+  width: 100%;
+  height: auto;
+  position: relative;
+  left: -1px;
+  color: #146AFF;
+`;
+function InspectorButton({
+  position = "right",
+  ...buttonProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledInspectorButton, { position, ...buttonProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      JazzIcon,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "119",
+        height: "115",
+        viewBox: "0 0 119 115",
+        fill: "none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M118.179 23.8277V0.167999C99.931 7.5527 79.9854 11.6192 59.0897 11.6192C47.1466 11.6192 35.5138 10.2908 24.331 7.7737V30.4076V60.1508C23.2955 59.4385 22.1568 58.8458 20.9405 58.3915C18.1732 57.358 15.128 57.0876 12.1902 57.6145C9.2524 58.1414 6.5539 59.4419 4.4358 61.3516C2.3178 63.2613 0.875401 65.6944 0.291001 68.3433C-0.293399 70.9921 0.00659978 73.7377 1.1528 76.2329C2.2991 78.728 4.2403 80.861 6.7308 82.361C9.2214 83.862 12.1495 84.662 15.1448 84.662C15.6054 84.662 15.8365 84.662 16.0314 84.659C26.5583 84.449 35.042 75.9656 35.2513 65.4386C35.2534 65.3306 35.2544 65.2116 35.2548 65.0486L35.2552 64.7149V64.5521V61.0762V32.1993C43.0533 33.2324 51.0092 33.7656 59.0897 33.7656C59.6696 33.7656 60.2489 33.7629 60.8276 33.7574V89.696C59.792 88.983 58.6533 88.391 57.437 87.936C54.6697 86.903 51.6246 86.632 48.6867 87.159C45.7489 87.686 43.0504 88.987 40.9323 90.896C38.8143 92.806 37.3719 95.239 36.7875 97.888C36.2032 100.537 36.5031 103.283 37.6494 105.778C38.7956 108.273 40.7368 110.405 43.2273 111.906C45.7179 113.406 48.646 114.207 51.6414 114.207C52.1024 114.207 52.3329 114.207 52.5279 114.203C63.0548 113.994 71.5385 105.51 71.7478 94.983C71.7517 94.788 71.7517 94.558 71.7517 94.097V90.621V33.3266C83.962 32.4768 95.837 30.4075 107.255 27.2397V59.9017C106.219 59.1894 105.081 58.5966 103.864 58.1424C101.097 57.1089 98.052 56.8384 95.114 57.3653C92.176 57.8922 89.478 59.1927 87.36 61.1025C85.242 63.0122 83.799 65.4453 83.215 68.0941C82.631 70.743 82.931 73.4886 84.077 75.9837C85.223 78.4789 87.164 80.612 89.655 82.112C92.145 83.612 95.073 84.413 98.069 84.413C98.53 84.413 98.76 84.413 98.955 84.409C109.482 84.2 117.966 75.7164 118.175 65.1895C118.179 64.9945 118.179 64.764 118.179 64.3029V60.8271V23.8277Z",
+            fill: "currentColor"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          padding: "0",
+          margin: "-1px",
+          overflow: "hidden",
+          clip: "rect(0, 0, 0, 0)",
+          whiteSpace: "nowrap",
+          border: "0"
+        },
+        children: "Open Jazz Inspector"
+      }
+    )
+  ] });
+}
+
+// src/inspector/viewer/use-open-inspector.ts
+var import_react14 = __toESM(require_react(), 1);
+var STORAGE_KEY2 = "jazz-inspector-open";
+function useOpenInspector() {
+  const [open, setOpen] = (0, import_react14.useState)(() => {
+    const stored = localStorage.getItem(STORAGE_KEY2);
+    return stored ? JSON.parse(stored) : false;
+  });
+  (0, import_react14.useEffect)(() => {
+    localStorage.setItem(STORAGE_KEY2, JSON.stringify(open));
+  }, [open]);
+  return [open, setOpen];
+}
+
+// src/inspector/viewer/new-app.tsx
+var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
+var InspectorContainer = styled18("div")`
+  position: fixed;
+  height: 50vh;
+  max-height: 800px;
+  display: flex;
+  flex-direction: column;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: white;
+  border-top: 1px solid var(--j-border-color);
+  color: var(--j-text-color);
+  
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-background);
+  }
+`;
+var HeaderContainer2 = styled18("div")`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 0.75rem;
+  margin: 0.75rem 0;
+`;
+var Form = styled18("form")`
+  width: 24rem;
+`;
+var InitialForm = styled18("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 = styled18("p")`
+  text-align: center;
+`;
+function JazzInspectorInternal({
+  position = "right",
+  localNode,
+  accountId
+}) {
+  const [open, setOpen] = useOpenInspector();
+  const [coValueId, setCoValueId] = (0, import_react15.useState)("");
+  const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
+  const handleCoValueIdSubmit = (e) => {
+    e.preventDefault();
+    if (coValueId) {
+      setPage(coValueId);
+    }
+    setCoValueId("");
+  };
+  if (!open) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InspectorButton, { position, onClick: () => setOpen(true) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(HeaderContainer2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Form, { onSubmit: handleCoValueIdSubmit, children: path.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        Input,
+        {
+          label: "CoValue ID",
+          style: { fontFamily: "monospace" },
+          hideLabel: true,
+          placeholder: "co_z1234567890abcdef123456789",
+          value: coValueId,
+          onChange: (e) => setCoValueId(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      PageStack,
+      {
+        path,
+        node: localNode,
+        goBack,
+        addPages,
+        children: path.length <= 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          InitialForm,
+          {
+            onSubmit: handleCoValueIdSubmit,
+            "aria-hidden": path.length !== 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Heading, { children: "Jazz CoValue Inspector" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                Input,
+                {
+                  label: "CoValue ID",
+                  style: { minWidth: "21rem", fontFamily: "monospace" },
+                  hideLabel: true,
+                  placeholder: "co_z1234567890abcdef123456789",
+                  value: coValueId,
+                  onChange: (e) => setCoValueId(e.target.value)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
+              accountId && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(OrText, { children: "or" }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  Button,
+                  {
+                    variant: "secondary",
+                    onClick: () => {
+                      setCoValueId(accountId);
+                      setPage(accountId);
+                    },
+                    children: "Inspect my account"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/inspector/ui/select.tsx
+var import_react16 = __toESM(require_react(), 1);
+import { styled as styled19 } from "goober";
+var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
+var SelectContainer = styled19("div")`
+  display: grid;
+  gap: 0.25rem;
+`;
+var SelectWrapper = styled19("div")`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+var StyledSelect = styled19("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 = styled19("span")`
+  position: absolute;
+  right: 0.5em;
+  color: var(--j-neutral-400);
+  pointer-events: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--j-neutral-900);
+  }
+`;
+
+// src/inspector/index.ts
+import { setup } from "goober";
+setup(import_react17.default.createElement);
+
+// src/inspector/custom-element.tsx
+var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
 var JazzInspectorElement = class extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -31842,7 +33873,7 @@ var JazzInspectorElement = class extends HTMLElement {
       return;
     }
     this.root?.render(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         JazzInspectorInternal,
         {
           localNode: this.account._raw.core.node,
@@ -31968,4 +33999,4 @@ react/cjs/react-jsx-runtime.development.js:
    * LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=custom-element-CWW72LEG.js.map
+//# sourceMappingURL=custom-element-I7Q6H5E5.js.map