jazz-tools 0.14.27 → 0.15.0

package/dist/inspector/index.js

@@ -0,0 +1,2027 @@
+"use client";
+
+// src/inspector/index.ts
+import React7 from "react";
+
+// src/inspector/viewer/new-app.tsx
+import { styled as styled18 } from "goober";
+import { useJazzContext } from "jazz-tools/react-core";
+import { useState as useState8 } from "react";
+
+// src/inspector/ui/button.tsx
+import { styled } from "goober";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+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 = forwardRef(
+  ({
+    className,
+    children,
+    variant = "primary",
+    disabled,
+    type = "button",
+    ...buttonProps
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      StyledButton,
+      {
+        ref,
+        ...buttonProps,
+        disabled,
+        className,
+        type,
+        variant,
+        children
+      }
+    );
+  }
+);
+
+// src/inspector/ui/input.tsx
+import { styled as styled2 } from "goober";
+import { forwardRef as forwardRef2, useId } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+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 = forwardRef2(
+  ({ label, className, hideLabel, id: customId, ...inputProps }, ref) => {
+    const generatedId = useId();
+    const id = customId || generatedId;
+    return /* @__PURE__ */ jsxs(Container, { className, children: [
+      /* @__PURE__ */ jsx2("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
+      /* @__PURE__ */ jsx2(StyledInput, { ref, ...inputProps, id })
+    ] });
+  }
+);
+
+// src/inspector/viewer/breadcrumbs.tsx
+import { styled as styled3 } from "goober";
+import React from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+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__ */ jsxs2(BreadcrumbsContainer, { children: [
+    /* @__PURE__ */ jsx3(
+      Button,
+      {
+        variant: "link",
+        style: { padding: "0 0.25rem" },
+        onClick: () => onBreadcrumbClick(-1),
+        children: "Home"
+      }
+    ),
+    path.map((page, index) => {
+      return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+        /* @__PURE__ */ jsx3(Separator, { "aria-hidden": true, children: "/" }),
+        /* @__PURE__ */ jsx3(
+          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
+import { styled as styled14 } from "goober";
+import React5 from "react";
+
+// src/inspector/ui/badge.tsx
+import { styled as styled4 } from "goober";
+import { jsx as jsx4 } from "react/jsx-runtime";
+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__ */ jsx4(StyledBadge, { className, children });
+}
+
+// src/inspector/ui/heading.tsx
+import { styled as styled5 } from "goober";
+import { jsx as jsx5 } from "react/jsx-runtime";
+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__ */ jsx5(StyledHeading, { className, children });
+}
+
+// src/inspector/ui/text.tsx
+import { styled as styled6 } 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 = 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__ */ jsx6(StyledText, { ...props });
+}
+
+// src/inspector/viewer/account-or-group-text.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+
+// src/inspector/viewer/use-resolve-covalue.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/inspector/viewer/co-stream-view.tsx
+import { base64URLtoBytes } from "cojson";
+import { styled as styled7 } from "goober";
+import { useEffect, useState } from "react";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } 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__ */ jsxs3(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__ */ jsxs3(LabelContentPairContainer, { children: [
+    /* @__PURE__ */ jsx7("span", { children: label }),
+    /* @__PURE__ */ jsx7("span", { children: content })
+  ] });
+};
+function RenderCoBinaryStream({
+  value,
+  items
+}) {
+  const [file, setFile] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  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__ */ jsx7("div", { children: "No blob" });
+  if (isLoading) return /* @__PURE__ */ jsx7("div", { children: "Loading..." });
+  if (!file) return /* @__PURE__ */ jsx7("div", { children: "No blob" });
+  const { blob, mimeType } = file;
+  const sizeInKB = (file.totalSize || 0) / 1024;
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsxs3(BinaryStreamGrid, { children: [
+      /* @__PURE__ */ jsx7(
+        LabelContentPair,
+        {
+          label: "Mime Type",
+          content: /* @__PURE__ */ jsx7(Badge, { children: mimeType || "No mime type" })
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        LabelContentPair,
+        {
+          label: "Size",
+          content: /* @__PURE__ */ jsxs3("span", { children: [
+            sizeInKB.toFixed(2),
+            " KB"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        LabelContentPair,
+        {
+          label: "Download",
+          content: /* @__PURE__ */ jsx7(
+            BinaryDownloadButton,
+            {
+              fileName: value.id.toString(),
+              pdfBlob: blob,
+              mimeType,
+              label: mimeType === "application/pdf" ? "Download PDF" : "Download file"
+            }
+          )
+        }
+      )
+    ] }),
+    mimeType === "image/png" || mimeType === "image/jpeg" ? /* @__PURE__ */ jsx7(
+      LabelContentPair,
+      {
+        label: "Preview",
+        content: /* @__PURE__ */ jsx7(ImagePreviewContainer, { children: /* @__PURE__ */ jsx7(RenderBlobImage, { blob }) })
+      }
+    ) : null
+  ] });
+}
+function RenderCoStream({
+  value,
+  node
+}) {
+  const streamPerUser = Object.keys(value.items);
+  const userCoIds = streamPerUser.map((stream) => stream.split("_session")[0]);
+  return /* @__PURE__ */ jsx7(CoStreamGrid, { children: userCoIds.map((id, idx) => /* @__PURE__ */ jsxs3(CoStreamItemContainer, { children: [
+    /* @__PURE__ */ jsx7(AccountOrGroupText, { coId: id, node }),
+    value.items[streamPerUser[idx]]?.map(
+      (item) => /* @__PURE__ */ jsxs3("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__ */ jsx7("div", { children: "No binary stream" });
+    }
+    return /* @__PURE__ */ jsx7(
+      RenderCoBinaryStream,
+      {
+        value,
+        items: streamType.items
+      }
+    );
+  }
+  if (streamType.type === "coStream") {
+    return /* @__PURE__ */ jsx7(RenderCoStream, { value, node });
+  }
+  if (streamType.type === "unknown") return /* @__PURE__ */ jsx7("div", { children: "Unknown stream type" });
+  return /* @__PURE__ */ jsx7("div", { children: "Unknown stream type" });
+}
+function RenderBlobImage({ blob }) {
+  const urlCreator = window.URL || window.webkitURL;
+  return /* @__PURE__ */ jsx7("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] = useState2();
+  useEffect2(() => {
+    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] = useState2([]);
+  useEffect2(() => {
+    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 jsx8 } from "react/jsx-runtime";
+function AccountOrGroupText({
+  coId,
+  node,
+  showId = false,
+  onClick
+}) {
+  const { snapshot, extendedType } = useResolvedCoValue(coId, node);
+  const [name, setName] = useState3(null);
+  useEffect3(() => {
+    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__ */ jsx8("span", { children: "Loading..." });
+  if (extendedType !== "account" && extendedType !== "group") {
+    return /* @__PURE__ */ jsx8("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__ */ jsx8(Button, { variant: "link", onClick: () => onClick(displayName), children: displayText });
+  }
+  return /* @__PURE__ */ jsx8(Fragment2, { children: displayText });
+}
+
+// src/inspector/viewer/type-icon.tsx
+import { styled as styled8 } from "goober";
+import { jsx as jsx9 } from "react/jsx-runtime";
+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"
+  };
+  const iconKey = extendedType || type;
+  const icon2 = iconMap[iconKey];
+  return icon2 ? /* @__PURE__ */ jsx9(IconText, { children: icon2 }) : null;
+};
+var ResolveIcon = ({
+  coId,
+  node
+}) => {
+  const { type, extendedType, snapshot } = useResolvedCoValue(coId, node);
+  if (snapshot === "unavailable" && !type) {
+    return /* @__PURE__ */ jsx9(UnavailableText, { children: "Unavailable" });
+  }
+  if (!type) return /* @__PURE__ */ jsx9(EmptySpace, { children: " " });
+  return /* @__PURE__ */ jsx9(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 styled9 } from "goober";
+import React3, { useState as useState4 } from "react";
+
+// src/inspector/ui/icons/chevron-down-icon.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx10(
+    "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__ */ jsx10("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+
+// src/inspector/ui/icons/delete-icon.tsx
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+function DeleteIcon(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__ */ jsx11("path", { d: "M3 6h18" }),
+        /* @__PURE__ */ jsx11("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+        /* @__PURE__ */ jsx11("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+      ]
+    }
+  );
+}
+
+// src/inspector/ui/icons/link-icon.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function LinkIcon(props) {
+  return /* @__PURE__ */ jsx12(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 1.5,
+      stroke: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ jsx12(
+        "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
+import { jsx as jsx13 } from "react/jsx-runtime";
+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__ */ jsx13(
+    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 jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+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] = useState4(false);
+  if (typeof json === "undefined" || json === void 0) {
+    return /* @__PURE__ */ jsx14(Text, { muted: true, children: "undefined" });
+  }
+  if (json === null) {
+    return /* @__PURE__ */ jsx14(Text, { muted: true, children: "null" });
+  }
+  if (typeof json === "string" && isCoId(json)) {
+    const content = /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      json,
+      onCoIDClick && /* @__PURE__ */ jsx14(Icon, { name: "link" })
+    ] });
+    if (onCoIDClick) {
+      return /* @__PURE__ */ jsx14(
+        Button,
+        {
+          variant: "link",
+          onClick: () => {
+            onCoIDClick?.(json);
+          },
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx14(LinkContainer, { children: content });
+  }
+  if (typeof json === "string") {
+    return /* @__PURE__ */ jsx14(Text, { children: json });
+  }
+  if (typeof json === "number") {
+    return /* @__PURE__ */ jsx14(Text, { mono: true, children: json });
+  }
+  if (typeof json === "boolean") {
+    return /* @__PURE__ */ jsx14(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__ */ jsx14("p", { children: Array.isArray(json) ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        "Array (",
+        json.length,
+        ")"
+      ] }) : /* @__PURE__ */ jsx14(Fragment3, { children: "Object" }) }),
+      /* @__PURE__ */ jsxs5(ObjectContent, { children: [
+        isExpanded ? longJson : shortJson,
+        hasDifference && !isExpanded ? "\n ..." : null
+      ] }),
+      !compact && hasDifference ? /* @__PURE__ */ jsx14(Button, { variant: "link", onClick: () => setIsExpanded(!isExpanded), children: isExpanded ? "Show less" : "Show more" }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsx14("span", { children: String(json) });
+}
+var CoMapPreview = ({
+  coId,
+  node,
+  limit = 6
+}) => {
+  const { value, snapshot, type, extendedType } = useResolvedCoValue(
+    coId,
+    node
+  );
+  if (!snapshot) {
+    return /* @__PURE__ */ jsx14(
+      "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__ */ jsx14(Text, { inline: true, muted: true, children: "Unavailable" });
+  }
+  if (extendedType === "image" && isBrowserImage(snapshot)) {
+    return /* @__PURE__ */ jsxs5(ImagePreviewContainer2, { children: [
+      /* @__PURE__ */ jsx14(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__ */ jsx14(PreviewGrid, { children: limitedProperties.map(([key, value2]) => /* @__PURE__ */ jsxs5(React3.Fragment, { children: [
+      /* @__PURE__ */ jsxs5(Text, { strong: true, children: [
+        key,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx14(ValueRenderer, { compact: true, json: value2 })
+    ] }, key)) }),
+    properties.length > limit && /* @__PURE__ */ jsxs5(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
+import { styled as styled11 } from "goober";
+import { jsx as jsx15 } 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__ */ jsx15(GridOneColumn, { ...rest, children });
+    case 2:
+      return /* @__PURE__ */ jsx15(GridTwoColumns, { ...rest, children });
+    case 3:
+      return /* @__PURE__ */ jsx15(GridThreeColumns, { ...rest, children });
+    default:
+      throw new Error(`Invalid number of columns: ${cols}`);
+  }
+}
+
+// src/inspector/viewer/grid-view.tsx
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+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__ */ jsxs6(Card, { ...props, children: [
+    /* @__PURE__ */ jsx16(CardHeader, { children: isCoValue ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      /* @__PURE__ */ jsx16(Text, { strong: true, children: key }),
+      /* @__PURE__ */ jsx16(Badge, { children: /* @__PURE__ */ jsx16(ResolveIcon, { coId: value, node }) })
+    ] }) : /* @__PURE__ */ jsx16(Text, { strong: true, children: key }) }),
+    /* @__PURE__ */ jsx16(CardBody, { style: { wordBreak: "break-word" }, children: isCoValue ? /* @__PURE__ */ jsx16(CoMapPreview, { coId: value, node }) : /* @__PURE__ */ jsx16(
+      ValueRenderer,
+      {
+        json: value,
+        onCoIDClick: (coId) => {
+          onNavigate([{ coId, name: key }]);
+        }
+      }
+    ) })
+  ] });
+}
+function GridView({
+  data,
+  onNavigate,
+  node
+}) {
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ jsx16(Grid, { cols: entries.length === 1 ? 1 : 3, children: entries.map((entry, childIndex) => /* @__PURE__ */ jsx16(
+    GridItem,
+    {
+      entry,
+      onNavigate,
+      node
+    },
+    childIndex
+  )) });
+}
+
+// src/inspector/viewer/raw-data-card.tsx
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+function CopyButton({ data }) {
+  const [copyCount, setCopyCount] = useState5(0);
+  const copied = copyCount > 0;
+  const stringifiedData = JSON.stringify(data);
+  useEffect4(() => {
+    if (copyCount > 0) {
+      const timeout = setTimeout(() => setCopyCount(0), 1e3);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [copyCount]);
+  return /* @__PURE__ */ jsx17(
+    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__ */ jsxs7(Card, { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs7(CardHeader, { children: [
+      /* @__PURE__ */ jsx17(Text, { strong: true, children: "Raw data" }),
+      /* @__PURE__ */ jsx17(CopyButton, { data })
+    ] }),
+    /* @__PURE__ */ jsx17(CardBody, { children: /* @__PURE__ */ jsx17(ValueRenderer, { json: data }) })
+  ] });
+}
+
+// src/inspector/viewer/account-view.tsx
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs8 } 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__ */ jsxs8(Fragment5, { children: [
+    /* @__PURE__ */ jsx18(GridView, { data: readableData, onNavigate, node }),
+    /* @__PURE__ */ jsx18(RawDataCard, { data })
+  ] });
+}
+
+// src/inspector/ui/table.tsx
+import { styled as styled12 } from "goober";
+import React4 from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+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 = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx19(StyledTable, { ref, ...props, children }));
+var TableHead = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx19(StyledThead, { ref, ...props, children }));
+var TableBody = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx19(StyledTbody, { ref, ...props, children }));
+var TableRow = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx19("tr", { ref, ...props, children }));
+var TableHeader = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx19(StyledTh, { ref, ...props, children }));
+var TableCell = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx19(StyledTd, { ref, ...props, children }));
+
+// src/inspector/viewer/group-view.tsx
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+function GroupView({
+  data,
+  onNavigate,
+  node
+}) {
+  return /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    /* @__PURE__ */ jsx20(Text, { strong: true, children: "Members" }),
+    /* @__PURE__ */ jsxs9(Table, { children: [
+      /* @__PURE__ */ jsx20(TableHead, { children: /* @__PURE__ */ jsxs9(TableRow, { children: [
+        /* @__PURE__ */ jsx20(TableHeader, { children: "Account" }),
+        /* @__PURE__ */ jsx20(TableHeader, { children: "Permission" })
+      ] }) }),
+      /* @__PURE__ */ jsxs9(TableBody, { children: [
+        "everyone" in data && typeof data.everyone === "string" ? /* @__PURE__ */ jsxs9(TableRow, { children: [
+          /* @__PURE__ */ jsx20(TableCell, { children: "everyone" }),
+          /* @__PURE__ */ jsx20(TableCell, { children: data.everyone })
+        ] }) : null,
+        Object.entries(data).map(
+          ([key, value]) => isCoId(key) ? /* @__PURE__ */ jsxs9(TableRow, { children: [
+            /* @__PURE__ */ jsx20(TableCell, { children: /* @__PURE__ */ jsx20(
+              AccountOrGroupText,
+              {
+                coId: key,
+                node,
+                showId: true,
+                onClick: () => {
+                  onNavigate([{ coId: key, name: key }]);
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx20(TableCell, { children: value })
+          ] }, key) : null
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx20(RawDataCard, { data })
+  ] });
+}
+
+// src/inspector/viewer/role-display.tsx
+import { jsxs as jsxs10 } 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__ */ jsxs10(Text, { children: [
+    "Role: ",
+    role
+  ] });
+}
+
+// src/inspector/viewer/table-viewer.tsx
+import { styled as styled13 } from "goober";
+import { useMemo, useState as useState6 } from "react";
+import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+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] = useState6(10);
+  const [coIdArray, visibleRows] = 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__ */ jsx21("div", { children: "No data to display" });
+  }
+  if (resolvedRows.length === 0) {
+    return /* @__PURE__ */ jsx21("div", { children: "Loading..." });
+  }
+  const keys = Array.from(
+    new Set(resolvedRows.flatMap((item) => Object.keys(item.snapshot || {})))
+  );
+  const loadMore = () => {
+    setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
+  };
+  return /* @__PURE__ */ jsxs11(Fragment7, { children: [
+    /* @__PURE__ */ jsxs11(Table, { children: [
+      /* @__PURE__ */ jsx21(TableHead, { children: /* @__PURE__ */ jsx21(TableRow, { children: [...keys, "Action"].map((key) => /* @__PURE__ */ jsx21(TableHeader, { children: key }, key)) }) }),
+      /* @__PURE__ */ jsx21(TableBody, { children: resolvedRows.slice(0, visibleRowsCount).map((item, index) => /* @__PURE__ */ jsxs11(TableRow, { children: [
+        keys.map((key) => /* @__PURE__ */ jsx21(TableCell, { children: /* @__PURE__ */ jsx21(
+          ValueRenderer,
+          {
+            json: item.snapshot[key],
+            onCoIDClick: (coId) => {
+              async function handleClick() {
+                onNavigate([
+                  {
+                    coId: item.value.id,
+                    name: index.toString()
+                  },
+                  {
+                    coId,
+                    name: key
+                  }
+                ]);
+              }
+              handleClick();
+            }
+          }
+        ) }, key)),
+        /* @__PURE__ */ jsx21(TableCell, { children: /* @__PURE__ */ jsx21(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => onNavigate([
+              {
+                coId: item.value.id,
+                name: index.toString()
+              }
+            ]),
+            children: "View"
+          }
+        ) })
+      ] }, index)) })
+    ] }),
+    /* @__PURE__ */ jsxs11(PaginationContainer, { children: [
+      /* @__PURE__ */ jsxs11(Text, { muted: true, small: true, children: [
+        "Showing ",
+        Math.min(visibleRowsCount, coIdArray.length),
+        " of",
+        " ",
+        coIdArray.length
+      ] }),
+      hasMore && /* @__PURE__ */ jsx21(Button, { variant: "secondary", onClick: loadMore, children: "Load more" })
+    ] })
+  ] });
+}
+function TableView({
+  data,
+  node,
+  onNavigate
+}) {
+  const isListOfCoValues = useMemo(() => {
+    return Array.isArray(data) && data.every((k) => isCoId(k));
+  }, [data]);
+  if (isListOfCoValues) {
+    return /* @__PURE__ */ jsx21(CoValuesTableView, { data, node, onNavigate });
+  }
+  return /* @__PURE__ */ jsxs11(Table, { children: [
+    /* @__PURE__ */ jsx21(TableHead, { children: /* @__PURE__ */ jsxs11(TableRow, { children: [
+      /* @__PURE__ */ jsx21(TableHeader, { style: { width: "5rem" }, children: "Index" }),
+      /* @__PURE__ */ jsx21(TableHeader, { children: "Value" })
+    ] }) }),
+    /* @__PURE__ */ jsx21(TableBody, { children: Array.isArray(data) && data?.map((value, index) => /* @__PURE__ */ jsxs11(TableRow, { children: [
+      /* @__PURE__ */ jsx21(TableCell, { children: /* @__PURE__ */ jsx21(Text, { mono: true, children: index }) }),
+      /* @__PURE__ */ jsx21(TableCell, { children: /* @__PURE__ */ jsx21(ValueRenderer, { json: value }) })
+    ] }, index)) })
+  ] });
+}
+
+// src/inspector/viewer/page.tsx
+import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var BasePageContainer = React5.forwardRef(
+  ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ jsx22("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__ */ jsx22(
+      CoStreamView,
+      {
+        data: snapshot,
+        onNavigate,
+        node,
+        value
+      }
+    );
+  }
+  if (extendedType === "group") {
+    return /* @__PURE__ */ jsx22(GroupView, { data: snapshot, node, onNavigate });
+  }
+  if (extendedType === "account") {
+    return /* @__PURE__ */ jsx22(AccountView, { data: snapshot, node, onNavigate });
+  }
+  if (type === "colist" || extendedType === "record") {
+    return /* @__PURE__ */ jsx22(TableView, { data: snapshot, node, onNavigate });
+  }
+  return /* @__PURE__ */ jsx22(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__ */ jsx22("div", { style, children: "Data unavailable" });
+  }
+  if (!snapshot) {
+    return /* @__PURE__ */ jsx22("div", { style });
+  }
+  return /* @__PURE__ */ jsxs12(PageContainer, { style, className, isTopLevel, children: [
+    !isTopLevel && /* @__PURE__ */ jsx22(
+      BackButton,
+      {
+        "aria-label": "Back",
+        onClick: () => {
+          onHeaderClick?.();
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx22(HeaderContainer, { children: /* @__PURE__ */ jsxs12(TitleContainer, { children: [
+      /* @__PURE__ */ jsx22(Title, { children: /* @__PURE__ */ jsxs12("span", { children: [
+        name,
+        typeof snapshot === "object" && "name" in snapshot ? /* @__PURE__ */ jsxs12("span", { style: { color: "#57534e", fontWeight: 500 }, children: [
+          " ",
+          snapshot.name
+        ] }) : null
+      ] }) }),
+      /* @__PURE__ */ jsxs12(BadgeContainer, { children: [
+        /* @__PURE__ */ jsx22(Badge, { children: type && /* @__PURE__ */ jsx22(TypeIcon, { type, extendedType }) }),
+        /* @__PURE__ */ jsx22(Badge, { children: coId })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs12(ContentContainer, { children: [
+      /* @__PURE__ */ jsx22(View, { ...props, coValue }),
+      extendedType !== "account" && extendedType !== "group" && /* @__PURE__ */ jsxs12(Fragment8, { children: [
+        /* @__PURE__ */ jsx22(RoleDisplay, { node, value }),
+        /* @__PURE__ */ jsxs12(Text, { muted: true, children: [
+          "Owned by",
+          " ",
+          /* @__PURE__ */ jsx22(
+            AccountOrGroupText,
+            {
+              coId: value.group.id,
+              node,
+              showId: true,
+              onClick: () => {
+                onNavigate([{ coId: value.group.id, name: "owner" }]);
+              }
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/inspector/viewer/page-stack.tsx
+import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+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__ */ jsx23(Fragment9, { children: /* @__PURE__ */ jsxs13(PageStackContainer, { children: [
+    children,
+    node && page && /* @__PURE__ */ jsx23(
+      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
+import { useCallback, useEffect as useEffect5, useState as useState7 } from "react";
+function usePagePath(defaultPath) {
+  const [path, setPath] = useState7([]);
+  const updatePath = useCallback((newPath) => {
+    setPath(newPath);
+  }, []);
+  useEffect5(() => {
+    if (defaultPath && JSON.stringify(path) !== JSON.stringify(defaultPath)) {
+      updatePath(defaultPath);
+    }
+  }, [defaultPath, path, updatePath]);
+  const addPages = useCallback(
+    (newPages) => {
+      updatePath([...path, ...newPages]);
+    },
+    [path, updatePath]
+  );
+  const goToIndex = useCallback(
+    (index) => {
+      updatePath(path.slice(0, index + 1));
+    },
+    [path, updatePath]
+  );
+  const setPage = useCallback(
+    (coId) => {
+      updatePath([{ coId, name: "Root" }]);
+    },
+    [updatePath]
+  );
+  const goBack = 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
+import { styled as styled17 } from "goober";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+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__ */ jsxs14(StyledInspectorButton, { position, ...buttonProps, children: [
+    /* @__PURE__ */ jsx24(
+      JazzIcon,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "119",
+        height: "115",
+        viewBox: "0 0 119 115",
+        fill: "none",
+        children: /* @__PURE__ */ jsx24(
+          "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__ */ jsx24(
+      "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/new-app.tsx
+import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+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 JazzInspector({ position = "right" }) {
+  const context = useJazzContext();
+  const localNode = context.node;
+  const me = "me" in context ? context.me : void 0;
+  if (process.env.NODE_ENV !== "development") return null;
+  return /* @__PURE__ */ jsx25(
+    JazzInspectorInternal,
+    {
+      position,
+      localNode,
+      accountId: me?._raw.id
+    }
+  );
+}
+function JazzInspectorInternal({
+  position = "right",
+  localNode,
+  accountId
+}) {
+  const [open, setOpen] = useState8(false);
+  const [coValueId, setCoValueId] = useState8("");
+  const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
+  const handleCoValueIdSubmit = (e) => {
+    e.preventDefault();
+    if (coValueId) {
+      setPage(coValueId);
+    }
+    setCoValueId("");
+  };
+  if (!open) {
+    return /* @__PURE__ */ jsx25(InspectorButton, { position, onClick: () => setOpen(true) });
+  }
+  return /* @__PURE__ */ jsxs15(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
+    /* @__PURE__ */ jsxs15(HeaderContainer2, { children: [
+      /* @__PURE__ */ jsx25(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
+      /* @__PURE__ */ jsx25(Form, { onSubmit: handleCoValueIdSubmit, children: path.length !== 0 && /* @__PURE__ */ jsx25(
+        Input,
+        {
+          label: "CoValue ID",
+          style: { fontFamily: "monospace" },
+          hideLabel: true,
+          placeholder: "co_z1234567890abcdef123456789",
+          value: coValueId,
+          onChange: (e) => setCoValueId(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ jsx25(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
+    ] }),
+    /* @__PURE__ */ jsx25(
+      PageStack,
+      {
+        path,
+        node: localNode,
+        goBack,
+        addPages,
+        children: path.length <= 0 && /* @__PURE__ */ jsxs15(
+          InitialForm,
+          {
+            onSubmit: handleCoValueIdSubmit,
+            "aria-hidden": path.length !== 0,
+            children: [
+              /* @__PURE__ */ jsx25(Heading, { children: "Jazz CoValue Inspector" }),
+              /* @__PURE__ */ jsx25(
+                Input,
+                {
+                  label: "CoValue ID",
+                  style: { minWidth: "21rem", fontFamily: "monospace" },
+                  hideLabel: true,
+                  placeholder: "co_z1234567890abcdef123456789",
+                  value: coValueId,
+                  onChange: (e) => setCoValueId(e.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx25(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
+              accountId && /* @__PURE__ */ jsxs15(Fragment10, { children: [
+                /* @__PURE__ */ jsx25(OrText, { children: "or" }),
+                /* @__PURE__ */ jsx25(
+                  Button,
+                  {
+                    variant: "secondary",
+                    onClick: () => {
+                      setCoValueId(accountId);
+                      setPage(accountId);
+                    },
+                    children: "Inspect my account"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/inspector/ui/select.tsx
+import { styled as styled19 } from "goober";
+import { useId as useId2 } from "react";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+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);
+  }
+`;
+function Select(props) {
+  const { label, hideLabel, id: customId, className, ...selectProps } = props;
+  const generatedId = useId2();
+  const id = customId || generatedId;
+  return /* @__PURE__ */ jsxs16(SelectContainer, { className, children: [
+    /* @__PURE__ */ jsx26("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
+    /* @__PURE__ */ jsxs16(SelectWrapper, { children: [
+      /* @__PURE__ */ jsx26(StyledSelect, { ...selectProps, id, children: props.children }),
+      /* @__PURE__ */ jsx26(SelectIcon, { children: /* @__PURE__ */ jsx26(Icon, { name: "chevronDown", size: "sm" }) })
+    ] })
+  ] });
+}
+
+// src/inspector/index.ts
+import { setup } from "goober";
+setup(React7.createElement);
+export {
+  AccountOrGroupText,
+  Breadcrumbs,
+  Button,
+  GlobalStyles,
+  Icon,
+  Input,
+  JazzInspector,
+  JazzInspectorInternal,
+  PageStack,
+  Select,
+  resolveCoValue,
+  useResolvedCoValue
+};
+//# sourceMappingURL=index.js.map