jazz-tools 0.19.1 → 0.19.3

package/dist/inspector/index.js

@@ -4,8 +4,8 @@
 import React8 from "react";
 
 // src/inspector/viewer/new-app.tsx
-import { styled as styled23 } from "goober";
-import { useState as useState13 } from "react";
+import { styled as styled26 } from "goober";
+import { useState as useState16 } from "react";
 
 // src/inspector/ui/button.tsx
 import { styled } from "goober";
@@ -180,10 +180,10 @@ var Breadcrumbs = ({
 };
 
 // src/inspector/viewer/page-stack.tsx
-import { styled as styled20 } from "goober";
+import { styled as styled23 } from "goober";
 
 // src/inspector/viewer/page.tsx
-import { styled as styled18 } from "goober";
+import { styled as styled21 } from "goober";
 import React5 from "react";
 
 // src/inspector/ui/badge.tsx
@@ -681,6 +681,10 @@ function AccountOrGroupText({
   return /* @__PURE__ */ jsx8(Fragment2, { children: displayText });
 }
 
+// src/inspector/viewer/grid-view.tsx
+import { useState as useState6 } from "react";
+import { styled as styled14 } from "goober";
+
 // src/inspector/viewer/type-icon.tsx
 import { styled as styled8 } from "goober";
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -799,10 +803,30 @@ function DeleteIcon(props) {
   );
 }
 
-// src/inspector/ui/icons/link-icon.tsx
+// src/inspector/ui/icons/edit-icon.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
-function LinkIcon(props) {
+function EditIcon(props) {
   return /* @__PURE__ */ jsx13(
+    "svg",
+    {
+      ...props,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinejoin: "round",
+      className: "lucide lucide-edit lucide-pencil",
+      children: /* @__PURE__ */ jsx13("path", { d: "M13.2942 7.95881C13.5533 7.63559 13.5013 7.16358 13.178 6.90453C12.8548 6.64549 12.3828 6.6975 12.1238 7.02072L13.2942 7.95881ZM6.811 14.8488L7.37903 15.3385C7.38489 15.3317 7.39062 15.3248 7.39623 15.3178L6.811 14.8488ZM6.64 15.2668L5.89146 15.2179L5.8908 15.2321L6.64 15.2668ZM6.5 18.2898L5.7508 18.2551C5.74908 18.2923 5.75013 18.3296 5.75396 18.3667L6.5 18.2898ZM7.287 18.9768L7.31152 19.7264C7.36154 19.7247 7.41126 19.7181 7.45996 19.7065L7.287 18.9768ZM10.287 18.2658L10.46 18.9956L10.4716 18.9927L10.287 18.2658ZM10.672 18.0218L11.2506 18.4991L11.2571 18.491L10.672 18.0218ZM17.2971 10.959C17.5562 10.6358 17.5043 10.1638 17.1812 9.90466C16.8581 9.64552 16.386 9.69742 16.1269 10.0206L17.2971 10.959ZM12.1269 7.02052C11.8678 7.34365 11.9196 7.81568 12.2428 8.07484C12.5659 8.33399 13.0379 8.28213 13.2971 7.95901L12.1269 7.02052ZM14.3 5.50976L14.8851 5.97901C14.8949 5.96672 14.9044 5.95412 14.9135 5.94123L14.3 5.50976ZM15.929 5.18976L16.4088 4.61332C16.3849 4.59344 16.3598 4.57507 16.3337 4.5583L15.929 5.18976ZM18.166 7.05176L18.6968 6.52192C18.6805 6.50561 18.6635 6.49007 18.6458 6.47532L18.166 7.05176ZM18.5029 7.87264L19.2529 7.87676V7.87676L18.5029 7.87264ZM18.157 8.68976L17.632 8.15412C17.6108 8.17496 17.5908 8.19704 17.5721 8.22025L18.157 8.68976ZM16.1271 10.0203C15.8678 10.3433 15.9195 10.8153 16.2425 11.0746C16.5655 11.3339 17.0376 11.2823 17.2969 10.9593L16.1271 10.0203ZM13.4537 7.37862C13.3923 6.96898 13.0105 6.68666 12.6009 6.74805C12.1912 6.80943 11.9089 7.19127 11.9703 7.60091L13.4537 7.37862ZM16.813 11.2329C17.2234 11.1772 17.5109 10.7992 17.4552 10.3888C17.3994 9.97834 17.0215 9.69082 16.611 9.74659L16.813 11.2329ZM12.1238 7.02072L6.22577 14.3797L7.39623 15.3178L13.2942 7.95881L12.1238 7.02072ZM6.24297 14.359C6.03561 14.5995 5.91226 14.9011 5.89159 15.218L7.38841 15.3156C7.38786 15.324 7.38457 15.3321 7.37903 15.3385L6.24297 14.359ZM5.8908 15.2321L5.7508 18.2551L7.2492 18.3245L7.3892 15.3015L5.8908 15.2321ZM5.75396 18.3667C5.83563 19.1586 6.51588 19.7524 7.31152 19.7264L7.26248 18.2272C7.25928 18.2273 7.25771 18.2268 7.25669 18.2264C7.25526 18.2259 7.25337 18.2249 7.25144 18.2232C7.2495 18.2215 7.24825 18.2198 7.24754 18.2185C7.24703 18.2175 7.24637 18.216 7.24604 18.2128L5.75396 18.3667ZM7.45996 19.7065L10.46 18.9955L10.114 17.536L7.11404 18.247L7.45996 19.7065ZM10.4716 18.9927C10.7771 18.9151 11.05 18.7422 11.2506 18.499L10.0934 17.5445C10.0958 17.5417 10.0989 17.5397 10.1024 17.5388L10.4716 18.9927ZM11.2571 18.491L17.2971 10.959L16.1269 10.0206L10.0869 17.5526L11.2571 18.491ZM13.2971 7.95901L14.8851 5.97901L13.7149 5.04052L12.1269 7.02052L13.2971 7.95901ZM14.9135 5.94123C15.0521 5.74411 15.3214 5.6912 15.5243 5.82123L16.3337 4.5583C15.4544 3.99484 14.2873 4.2241 13.6865 5.0783L14.9135 5.94123ZM15.4492 5.7662L17.6862 7.6282L18.6458 6.47532L16.4088 4.61332L15.4492 5.7662ZM17.6352 7.58161C17.7111 7.6577 17.7535 7.761 17.7529 7.86852L19.2529 7.87676C19.2557 7.36905 19.0555 6.88127 18.6968 6.52192L17.6352 7.58161ZM17.7529 7.86852C17.7524 7.97604 17.7088 8.07886 17.632 8.15412L18.682 9.22541C19.0446 8.87002 19.2501 8.38447 19.2529 7.87676L17.7529 7.86852ZM17.5721 8.22025L16.1271 10.0203L17.2969 10.9593L18.7419 9.15928L17.5721 8.22025ZM11.9703 7.60091C12.3196 9.93221 14.4771 11.5503 16.813 11.2329L16.611 9.74659C15.0881 9.95352 13.6815 8.89855 13.4537 7.37862L11.9703 7.60091Z" })
+    }
+  );
+}
+
+// src/inspector/ui/icons/link-icon.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function LinkIcon(props) {
+  return /* @__PURE__ */ jsx14(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -811,7 +835,7 @@ function LinkIcon(props) {
       strokeWidth: 1.5,
       stroke: "currentColor",
       ...props,
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         "path",
         {
           strokeLinecap: "round",
@@ -823,13 +847,82 @@ function LinkIcon(props) {
   );
 }
 
+// src/inspector/ui/icons/history.tsx
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+function HistoryIcon(props) {
+  return /* @__PURE__ */ jsxs6(
+    "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__ */ jsx15(
+          "path",
+          {
+            d: "M5.52786 16.7023C6.6602 18.2608 8.3169 19.3584 10.1936 19.7934C12.0703 20.2284 14.0409 19.9716 15.7434 19.0701C17.446 18.1687 18.766 16.6832 19.4611 14.8865C20.1562 13.0898 20.1796 11.1027 19.527 9.29011C18.8745 7.47756 17.5898 5.96135 15.909 5.02005C14.2282 4.07875 12.2641 3.77558 10.3777 4.16623C8.49129 4.55689 6.80919 5.61514 5.64045 7.14656C4.47171 8.67797 3.89482 10.5797 4.01579 12.5023M4.01579 12.5023L2.51579 11.0023M4.01579 12.5023L5.51579 11.0023",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M12 8V12L15 15",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/inspector/ui/icons/add-icon.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function AddIcon(props) {
+  return /* @__PURE__ */ jsx16(
+    "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__ */ jsx16(
+        "path",
+        {
+          d: "M4 12H20M12 4V20",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+}
+
 // src/inspector/ui/icon.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var icons = {
   caution: CautionIcon,
   chevronDown: ChevronDownIcon,
   delete: DeleteIcon,
-  link: LinkIcon
+  edit: EditIcon,
+  link: LinkIcon,
+  history: HistoryIcon,
+  add: AddIcon
 };
 var sizes = {
   "2xs": 14,
@@ -873,7 +966,7 @@ function Icon({
     throw new Error(`Icon not found: ${name}`);
   }
   const IconComponent = icons?.hasOwnProperty(name) ? icons[name] : icon;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     IconComponent,
     {
       "aria-hidden": "true",
@@ -886,7 +979,7 @@ function Icon({
 }
 
 // src/inspector/viewer/value-renderer.tsx
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
 var LinkContainer = styled9("span")`
   display: inline-flex;
   gap: 0.25rem;
@@ -950,18 +1043,18 @@ function ValueRenderer({
 }) {
   const [isExpanded, setIsExpanded] = useState4(false);
   if (typeof json === "undefined" || json === void 0) {
-    return /* @__PURE__ */ jsx15(Text, { muted: true, children: "undefined" });
+    return /* @__PURE__ */ jsx18(Text, { muted: true, children: "undefined" });
   }
   if (json === null) {
-    return /* @__PURE__ */ jsx15(Text, { muted: true, children: "null" });
+    return /* @__PURE__ */ jsx18(Text, { muted: true, children: "null" });
   }
   if (typeof json === "string" && isCoId(json)) {
-    const content = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    const content = /* @__PURE__ */ jsxs7(Fragment3, { children: [
       json,
-      onCoIDClick && /* @__PURE__ */ jsx15(Icon, { name: "link" })
+      onCoIDClick && /* @__PURE__ */ jsx18(Icon, { name: "link" })
     ] });
     if (onCoIDClick) {
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx18(
         Button,
         {
           variant: "link",
@@ -972,35 +1065,35 @@ function ValueRenderer({
         }
       );
     }
-    return /* @__PURE__ */ jsx15(LinkContainer, { children: content });
+    return /* @__PURE__ */ jsx18(LinkContainer, { children: content });
   }
   if (typeof json === "string") {
-    return /* @__PURE__ */ jsx15(Text, { children: json });
+    return /* @__PURE__ */ jsx18(Text, { children: json });
   }
   if (typeof json === "number") {
-    return /* @__PURE__ */ jsx15(Text, { mono: true, children: json });
+    return /* @__PURE__ */ jsx18(Text, { mono: true, children: json });
   }
   if (typeof json === "boolean") {
-    return /* @__PURE__ */ jsx15(BooleanText, { value: json, children: json.toString() });
+    return /* @__PURE__ */ jsx18(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__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx15("p", { children: Array.isArray(json) ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx18("p", { children: Array.isArray(json) ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
         "Array (",
         json.length,
         ")"
-      ] }) : /* @__PURE__ */ jsx15(Fragment3, { children: "Object" }) }),
-      /* @__PURE__ */ jsxs6(ObjectContent, { children: [
+      ] }) : /* @__PURE__ */ jsx18(Fragment3, { children: "Object" }) }),
+      /* @__PURE__ */ jsxs7(ObjectContent, { children: [
         isExpanded ? longJson : shortJson,
         hasDifference && !isExpanded ? "\n ..." : null
       ] }),
-      !compact && hasDifference ? /* @__PURE__ */ jsx15(Button, { variant: "link", onClick: () => setIsExpanded(!isExpanded), children: isExpanded ? "Show less" : "Show more" }) : null
+      !compact && hasDifference ? /* @__PURE__ */ jsx18(Button, { variant: "link", onClick: () => setIsExpanded(!isExpanded), children: isExpanded ? "Show less" : "Show more" }) : null
     ] });
   }
-  return /* @__PURE__ */ jsx15("span", { children: String(json) });
+  return /* @__PURE__ */ jsx18("span", { children: String(json) });
 }
 var CoMapPreview = ({
   coId,
@@ -1012,7 +1105,7 @@ var CoMapPreview = ({
     node
   );
   if (!snapshot) {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx18(
       "div",
       {
         style: {
@@ -1027,15 +1120,15 @@ var CoMapPreview = ({
     );
   }
   if (snapshot === "unavailable" && !value) {
-    return /* @__PURE__ */ jsx15(Text, { inline: true, muted: true, children: "Unavailable" });
+    return /* @__PURE__ */ jsx18(Text, { inline: true, muted: true, children: "Unavailable" });
   }
   if (type === "coplaintext") {
-    return /* @__PURE__ */ jsx15(Fragment3, { children: value.toString() });
+    return /* @__PURE__ */ jsx18(Fragment3, { children: value.toString() });
   }
   if (extendedType === "image" && isBrowserImage(snapshot)) {
-    return /* @__PURE__ */ jsxs6(ImagePreviewContainer2, { children: [
-      /* @__PURE__ */ jsx15(PreviewImage, { src: snapshot.placeholderDataURL }),
-      /* @__PURE__ */ jsxs6(Text, { inline: true, small: true, muted: true, children: [
+    return /* @__PURE__ */ jsxs7(ImagePreviewContainer2, { children: [
+      /* @__PURE__ */ jsx18(PreviewImage, { src: snapshot.placeholderDataURL }),
+      /* @__PURE__ */ jsxs7(Text, { inline: true, small: true, muted: true, children: [
         snapshot.originalSize[0],
         " x ",
         snapshot.originalSize[1]
@@ -1043,10 +1136,10 @@ var CoMapPreview = ({
     ] });
   }
   if (extendedType === "record") {
-    return /* @__PURE__ */ jsxs6(RecordText, { children: [
+    return /* @__PURE__ */ jsxs7(RecordText, { children: [
       "Record",
       " ",
-      /* @__PURE__ */ jsxs6(Text, { inline: true, muted: true, children: [
+      /* @__PURE__ */ jsxs7(Text, { inline: true, muted: true, children: [
         "(",
         Object.keys(snapshot).length,
         ")"
@@ -1054,10 +1147,10 @@ var CoMapPreview = ({
     ] });
   }
   if (type === "colist") {
-    return /* @__PURE__ */ jsxs6(ListText, { children: [
+    return /* @__PURE__ */ jsxs7(ListText, { children: [
       "List",
       " ",
-      /* @__PURE__ */ jsxs6(Text, { inline: true, muted: true, children: [
+      /* @__PURE__ */ jsxs7(Text, { inline: true, muted: true, children: [
         "(",
         snapshot.length,
         ")"
@@ -1068,24 +1161,209 @@ var CoMapPreview = ({
   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__ */ jsxs6(PreviewContainer, { children: [
-    /* @__PURE__ */ jsx15(PreviewGrid, { children: limitedProperties.map(([key, value2]) => /* @__PURE__ */ jsxs6(React3.Fragment, { children: [
-      /* @__PURE__ */ jsxs6(Text, { strong: true, children: [
+  return /* @__PURE__ */ jsxs7(PreviewContainer, { children: [
+    /* @__PURE__ */ jsx18(PreviewGrid, { children: limitedProperties.map(([key, value2]) => /* @__PURE__ */ jsxs7(React3.Fragment, { children: [
+      /* @__PURE__ */ jsxs7(Text, { strong: true, children: [
         key,
         ": "
       ] }),
-      /* @__PURE__ */ jsx15(ValueRenderer, { compact: true, json: value2 })
+      /* @__PURE__ */ jsx18(ValueRenderer, { compact: true, json: value2 })
     ] }, key)) }),
-    properties.length > limit && /* @__PURE__ */ jsxs6(PreviewMoreText, { muted: true, small: true, children: [
+    properties.length > limit && /* @__PURE__ */ jsxs7(PreviewMoreText, { muted: true, small: true, children: [
       properties.length - limit,
       " more"
     ] })
   ] });
 };
 
-// src/inspector/ui/card.tsx
+// src/inspector/viewer/co-value-editor.tsx
+import { useState as useState5 } from "react";
+import { styled as styled11 } from "goober";
+
+// src/inspector/ui/select.tsx
 import { styled as styled10 } from "goober";
-var Card = styled10("div")`
+import { useId as useId2 } from "react";
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+var SelectContainer = styled10("div")`
+  display: grid;
+  gap: 0.25rem;
+`;
+var SelectWrapper = styled10("div")`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+var StyledSelect = styled10("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 = styled10("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__ */ jsxs8(SelectContainer, { className, children: [
+    /* @__PURE__ */ jsx19("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
+    /* @__PURE__ */ jsxs8(SelectWrapper, { children: [
+      /* @__PURE__ */ jsx19(StyledSelect, { ...selectProps, id, children: props.children }),
+      /* @__PURE__ */ jsx19(SelectIcon, { children: /* @__PURE__ */ jsx19(Icon, { name: "chevronDown", size: "sm" }) })
+    ] })
+  ] });
+}
+
+// src/inspector/viewer/co-value-editor.tsx
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+function CoValueEditor({
+  node,
+  property,
+  value,
+  coValue,
+  onCancel
+}) {
+  const getInitialType = () => {
+    if (value === null) return "null";
+    if (value === void 0) return "undefined";
+    if (typeof value === "number") return "number";
+    if (typeof value === "string") return "string";
+    if (typeof value === "boolean") return value ? "true" : "false";
+    if (typeof value === "object") return "object";
+    return "undefined";
+  };
+  const [selectedType, setSelectedType] = useState5(getInitialType());
+  const [editValue, setEditValue] = useState5(
+    value === void 0 || value === null ? "" : typeof value === "object" ? JSON.stringify(value, null, 2) : String(value)
+  );
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    let newValue;
+    switch (selectedType) {
+      case "null":
+        newValue = null;
+        break;
+      case "undefined":
+        newValue = void 0;
+        break;
+      case "true":
+        newValue = true;
+        break;
+      case "false":
+        newValue = false;
+        break;
+      case "number":
+        newValue = parseFloat(editValue);
+        break;
+      case "string":
+        newValue = editValue;
+        break;
+      case "object":
+        newValue = JSON.parse(editValue);
+        break;
+      default:
+        throw new Error(`Invalid type: ${selectedType}`);
+    }
+    coValue.core.makeTransaction(
+      [
+        {
+          op: "set",
+          key: property,
+          value: newValue
+        }
+      ],
+      "private"
+    );
+    onCancel();
+  };
+  const showTextarea = selectedType === "number" || selectedType === "string" || selectedType === "object";
+  return /* @__PURE__ */ jsxs9(EditForm, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs9(
+      Select,
+      {
+        label: "Type",
+        value: selectedType,
+        onChange: (e) => {
+          setSelectedType(e.target.value);
+        },
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx20("option", { value: "number", children: "number" }),
+          /* @__PURE__ */ jsx20("option", { value: "string", children: "string" }),
+          /* @__PURE__ */ jsx20("option", { value: "true", children: "true" }),
+          /* @__PURE__ */ jsx20("option", { value: "false", children: "false" }),
+          /* @__PURE__ */ jsx20("option", { value: "object", children: "object" }),
+          /* @__PURE__ */ jsx20("option", { value: "null", children: "null" }),
+          /* @__PURE__ */ jsx20("option", { value: "undefined", children: "undefined" })
+        ]
+      }
+    ),
+    showTextarea && /* @__PURE__ */ jsx20(
+      StyledTextarea,
+      {
+        value: editValue,
+        onChange: (e) => setEditValue(e.target.value),
+        onClick: (e) => e.stopPropagation()
+      }
+    ),
+    /* @__PURE__ */ jsxs9(FormActions, { children: [
+      /* @__PURE__ */ jsx20(Button, { type: "button", variant: "secondary", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx20(Button, { type: "submit", variant: "primary", children: "Submit" })
+    ] })
+  ] });
+}
+var EditForm = styled11("form")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+var StyledTextarea = styled11("textarea")`
+  width: 100%;
+  min-height: 120px;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem;
+  box-shadow: var(--j-shadow-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  background-color: white;
+  color: var(--j-text-color-strong);
+  resize: vertical;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+var FormActions = styled11("div")`
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+`;
+
+// src/inspector/ui/card.tsx
+import { styled as styled12 } from "goober";
+var Card = styled12("div")`
   background-color: var(--j-background);
   border-radius: var(--j-radius-lg);
   box-shadow: var(--j-shadow-sm);
@@ -1097,19 +1375,19 @@ var Card = styled10("div")`
   flex-direction: column;
   gap: 0.5rem;
 `;
-var CardHeader = styled10("div")`
+var CardHeader = styled12("div")`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
-var CardBody = styled10("div")`
+var CardBody = styled12("div")`
   flex: 1;
 `;
 
 // src/inspector/ui/grid.tsx
-import { styled as styled11 } from "goober";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var GridThreeColumns = styled11("div")`
+import { styled as styled13 } from "goober";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var GridThreeColumns = styled13("div")`
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 1rem;
@@ -1122,7 +1400,7 @@ var GridThreeColumns = styled11("div")`
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 `;
-var GridTwoColumns = styled11("div")`
+var GridTwoColumns = styled13("div")`
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 1rem;
@@ -1131,7 +1409,7 @@ var GridTwoColumns = styled11("div")`
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 `;
-var GridOneColumn = styled11("div")`
+var GridOneColumn = styled13("div")`
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 1rem;
@@ -1140,26 +1418,81 @@ function Grid(props) {
   const { cols, children, ...rest } = props;
   switch (cols) {
     case 1:
-      return /* @__PURE__ */ jsx16(GridOneColumn, { ...rest, children });
+      return /* @__PURE__ */ jsx21(GridOneColumn, { ...rest, children });
     case 2:
-      return /* @__PURE__ */ jsx16(GridTwoColumns, { ...rest, children });
+      return /* @__PURE__ */ jsx21(GridTwoColumns, { ...rest, children });
     case 3:
-      return /* @__PURE__ */ jsx16(GridThreeColumns, { ...rest, children });
+      return /* @__PURE__ */ jsx21(GridThreeColumns, { ...rest, children });
     default:
       throw new Error(`Invalid number of columns: ${cols}`);
   }
 }
 
+// src/inspector/utils/permissions.ts
+function isWriter(role) {
+  return role === "writer" || role === "admin" || role === "manager" || role === "writeOnly";
+}
+
 // src/inspector/viewer/grid-view.tsx
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 function GridItem({
   entry,
   onNavigate,
-  node
+  node,
+  coValue
 }) {
   const [key, value] = entry;
   const isCoValue = isCoId(value);
-  const props = isCoValue ? {
+  const [isEditing, setIsEditing] = useState6(false);
+  const handleEditClick = (e) => {
+    e.stopPropagation();
+    setIsEditing(true);
+  };
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    if (confirm(`Are you sure you want to delete the property "${key}"?`)) {
+      coValue?.core.makeTransaction(
+        [
+          {
+            op: "del",
+            key
+          }
+        ],
+        "private"
+      );
+    }
+  };
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs10(
+      Card,
+      {
+        style: {
+          backgroundColor: "var(--j-foreground)",
+          borderColor: "var(--j-foreground)"
+        },
+        children: [
+          /* @__PURE__ */ jsx22(CardHeader, { children: /* @__PURE__ */ jsx22("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: isCoValue ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            /* @__PURE__ */ jsx22(Text, { strong: true, children: key }),
+            /* @__PURE__ */ jsx22(Badge, { children: /* @__PURE__ */ jsx22(ResolveIcon, { coId: value, node }) })
+          ] }) : /* @__PURE__ */ jsx22(Text, { strong: true, children: key }) }) }),
+          /* @__PURE__ */ jsx22(CardBody, { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx22(
+            CoValueEditor,
+            {
+              node,
+              property: key,
+              value,
+              coValue,
+              onCancel: handleCancel
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  const cardProps = isCoValue ? {
     onClick: () => onNavigate([{ coId: value, name: key }]),
     as: "button"
   } : {
@@ -1168,12 +1501,34 @@ function GridItem({
       borderColor: "var(--j-foreground)"
     }
   };
-  return /* @__PURE__ */ jsxs7(Card, { ...props, children: [
-    /* @__PURE__ */ jsx17(CardHeader, { children: isCoValue ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
-      /* @__PURE__ */ jsx17(Text, { strong: true, children: key }),
-      /* @__PURE__ */ jsx17(Badge, { children: /* @__PURE__ */ jsx17(ResolveIcon, { coId: value, node }) })
-    ] }) : /* @__PURE__ */ jsx17(Text, { strong: true, children: key }) }),
-    /* @__PURE__ */ jsx17(CardBody, { style: { wordBreak: "break-word" }, children: isCoValue ? /* @__PURE__ */ jsx17(CoMapPreview, { coId: value, node }) : /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs10(Card, { ...cardProps, children: [
+    /* @__PURE__ */ jsxs10(CardHeader, { children: [
+      /* @__PURE__ */ jsx22("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: isCoValue ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+        /* @__PURE__ */ jsx22(Text, { strong: true, children: key }),
+        /* @__PURE__ */ jsx22(Badge, { children: /* @__PURE__ */ jsx22(ResolveIcon, { coId: value, node }) })
+      ] }) : /* @__PURE__ */ jsx22(Text, { strong: true, children: key }) }),
+      coValue && isWriter(coValue.group.myRole()) && /* @__PURE__ */ jsxs10(ActionButtons, { children: [
+        /* @__PURE__ */ jsx22(
+          EditButton,
+          {
+            onClick: handleEditClick,
+            type: "button",
+            "aria-label": "Edit",
+            children: /* @__PURE__ */ jsx22(Icon, { name: "edit", size: "sm" })
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          DeleteButton,
+          {
+            onClick: handleDelete,
+            type: "button",
+            "aria-label": "Delete",
+            children: /* @__PURE__ */ jsx22(Icon, { name: "delete", size: "sm" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx22(CardBody, { style: { wordBreak: "break-word" }, children: isCoValue ? /* @__PURE__ */ jsx22(CoMapPreview, { coId: value, node }) : /* @__PURE__ */ jsx22(
       ValueRenderer,
       {
         json: value,
@@ -1187,28 +1542,67 @@ function GridItem({
 function GridView({
   data,
   onNavigate,
-  node
+  node,
+  coValue
 }) {
   const entries = Object.entries(data);
-  return /* @__PURE__ */ jsx17(Grid, { cols: entries.length === 1 ? 1 : 3, children: entries.map((entry, childIndex) => /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx22(Grid, { cols: entries.length === 1 ? 1 : 3, children: entries.map((entry, childIndex) => /* @__PURE__ */ jsx22(
     GridItem,
     {
       entry,
       onNavigate,
-      node
+      node,
+      coValue
     },
     childIndex
   )) });
 }
+var EditButton = styled14("button")`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--j-text-color);
+  border-radius: var(--j-radius-sm);
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--j-foreground);
+  }
+`;
+var DeleteButton = styled14("button")`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--j-text-color);
+  border-radius: var(--j-radius-sm);
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--j-foreground);
+  }
+`;
+var ActionButtons = styled14("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
 
 // src/inspector/viewer/raw-data-card.tsx
-import { useEffect as useEffect7, useState as useState7 } from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 
 // src/inspector/ui/modal.tsx
-import { styled as styled12 } from "goober";
+import { styled as styled15 } from "goober";
 import { forwardRef as forwardRef3, useEffect as useEffect4, useRef } from "react";
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
-var ModalContent = styled12("dialog")`
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+var ModalContent = styled15("dialog")`
   background-color: var(--j-background);
   border-radius: var(--j-radius-lg);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
@@ -1219,26 +1613,26 @@ var ModalContent = styled12("dialog")`
   &::backdrop {
     background-color: rgba(0, 0, 0, 0.7);
   }
-  
+
 `;
-var ModalHeader = styled12("div")`
+var ModalHeader = styled15("div")`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 1.5rem 1.5rem 0 1.5rem;
   gap: 1rem;
 `;
-var ModalBody = styled12("div")`
+var ModalBody = styled15("div")`
   padding: 1rem 1.5rem;
   flex: 1;
 `;
-var ModalFooter = styled12("div")`
+var ModalFooter = styled15("div")`
   display: flex;
   justify-content: flex-end;
   gap: 0.75rem;
   padding: 0 1.5rem 1.5rem 1.5rem;
 `;
-var CloseButton = styled12("button")`
+var CloseButton = styled15("button")`
   background: none;
   border: none;
   cursor: pointer;
@@ -1252,11 +1646,11 @@ var CloseButton = styled12("button")`
   justify-content: center;
   min-width: 2rem;
   min-height: 2rem;
-  
+
   &:hover {
     background-color: var(--j-foreground);
   }
-  
+
   &:focus-visible {
     outline: 2px solid var(--j-border-focus);
     outline-offset: 2px;
@@ -1294,7 +1688,7 @@ var Modal = forwardRef3(
       onClose();
     };
     if (!isOpen) return null;
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs11(
       ModalContent,
       {
         ref: ref || modalRef,
@@ -1303,90 +1697,36 @@ var Modal = forwardRef3(
         "aria-labelledby": "modal-heading",
         onClose,
         children: [
-          /* @__PURE__ */ jsxs8(ModalHeader, { children: [
-            /* @__PURE__ */ jsx18(Heading, { id: "modal-heading", children: heading }),
-            /* @__PURE__ */ jsx18(CloseButton, { onClick: onClose, "aria-label": "Close modal", type: "button", children: "\xD7" })
+          /* @__PURE__ */ jsxs11(ModalHeader, { children: [
+            /* @__PURE__ */ jsx23(Heading, { id: "modal-heading", children: heading }),
+            /* @__PURE__ */ jsx23(CloseButton, { onClick: onClose, "aria-label": "Close modal", type: "button", children: "\xD7" })
           ] }),
-          /* @__PURE__ */ jsxs8(ModalBody, { children: [
-            text && /* @__PURE__ */ jsx18("p", { style: { margin: "0 0 1rem 0", color: "var(--j-text-color)" }, children: text }),
+          /* @__PURE__ */ jsxs11(ModalBody, { children: [
+            text && /* @__PURE__ */ jsx23("p", { style: { margin: "0 0 1rem 0", color: "var(--j-text-color)" }, children: text }),
             children
           ] }),
-          showButtons && /* @__PURE__ */ jsxs8(ModalFooter, { children: [
-            /* @__PURE__ */ jsx18(Button, { variant: "secondary", onClick: handleCancel, children: cancelText }),
-            /* @__PURE__ */ jsx18(Button, { variant: "primary", onClick: handleConfirm, children: confirmText })
+          showButtons && /* @__PURE__ */ jsxs11(ModalFooter, { children: [
+            /* @__PURE__ */ jsx23(Button, { variant: "secondary", onClick: handleCancel, children: cancelText }),
+            /* @__PURE__ */ jsx23(Button, { variant: "primary", onClick: handleConfirm, children: confirmText })
           ] })
-        ]
-      }
-    );
-  }
-);
-Modal.displayName = "Modal";
-
-// src/inspector/ui/select.tsx
-import { styled as styled13 } from "goober";
-import { useId as useId2 } from "react";
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
-var SelectContainer = styled13("div")`
-  display: grid;
-  gap: 0.25rem;
-`;
-var SelectWrapper = styled13("div")`
-  position: relative;
-  display: flex;
-  align-items: center;
-`;
-var StyledSelect = styled13("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 = styled13("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__ */ jsxs9(SelectContainer, { className, children: [
-    /* @__PURE__ */ jsx19("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
-    /* @__PURE__ */ jsxs9(SelectWrapper, { children: [
-      /* @__PURE__ */ jsx19(StyledSelect, { ...selectProps, id, children: props.children }),
-      /* @__PURE__ */ jsx19(SelectIcon, { children: /* @__PURE__ */ jsx19(Icon, { name: "chevronDown", size: "sm" }) })
-    ] })
-  ] });
-}
+);
+Modal.displayName = "Modal";
 
 // src/inspector/ui/data-table.tsx
-import { useEffect as useEffect5, useMemo, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo, useState as useState7 } from "react";
 
 // src/inspector/ui/table.tsx
-import { styled as styled14 } from "goober";
+import { styled as styled16 } from "goober";
 import React4 from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var StyledTable = styled14("table")`
+import { jsx as jsx24 } from "react/jsx-runtime";
+var StyledTable = styled16("table")`
   width: 100%;
 `;
-var StyledThead = styled14("thead")`
+var StyledThead = styled16("thead")`
   text-align: left;
   border-bottom: 1px solid var(--j-border-color);
   background-color: var(--j-neutral-100);
@@ -1395,7 +1735,7 @@ var StyledThead = styled14("thead")`
     background-color: var(--j-neutral-925);
   }
 `;
-var StyledTbody = styled14("tbody")`
+var StyledTbody = styled16("tbody")`
   tr {
     border-bottom: 1px solid var(--j-border-color);
 
@@ -1404,23 +1744,23 @@ var StyledTbody = styled14("tbody")`
     }
   }
 `;
-var StyledTh = styled14("th")`
+var StyledTh = styled16("th")`
   font-weight: 500;
   padding: 0.5rem 0.75rem;
   color: var(--j-text-color-strong);
 `;
-var StyledTd = styled14("td")`
+var StyledTd = styled16("td")`
   padding: 0.5rem 0.75rem;
 `;
-var Table = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx20(StyledTable, { ref, ...props, children }));
-var TableHead = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx20(StyledThead, { ref, ...props, children }));
-var TableBody = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx20(StyledTbody, { ref, ...props, children }));
-var TableRow = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx20("tr", { ref, ...props, children }));
-var TableHeader = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx20(StyledTh, { ref, ...props, children }));
-var TableCell = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx20(StyledTd, { ref, ...props, children }));
+var Table = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx24(StyledTable, { ref, ...props, children }));
+var TableHead = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx24(StyledThead, { ref, ...props, children }));
+var TableBody = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx24(StyledTbody, { ref, ...props, children }));
+var TableRow = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx24("tr", { ref, ...props, children }));
+var TableHeader = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx24(StyledTh, { ref, ...props, children }));
+var TableCell = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx24(StyledTd, { ref, ...props, children }));
 
 // src/inspector/ui/data-table.tsx
-import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -1429,9 +1769,9 @@ function DataTable({
   getRowKey,
   emptyMessage = "No data available"
 }) {
-  const [currentPage, setCurrentPage] = useState5(1);
-  const [sortConfig, setSortConfig] = useState5(initialSort);
-  const [filters, setFilters] = useState5({});
+  const [currentPage, setCurrentPage] = useState7(1);
+  const [sortConfig, setSortConfig] = useState7(initialSort);
+  const [filters, setFilters] = useState7({});
   const filteredData = useMemo(() => {
     return data.filter((row) => {
       return Object.entries(filters).every(([columnId, filterValue]) => {
@@ -1490,9 +1830,9 @@ function DataTable({
   const handlePageChange = (page) => {
     setCurrentPage(Math.max(1, Math.min(page, totalPages)));
   };
-  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
-    /* @__PURE__ */ jsxs10(Table, { children: [
-      /* @__PURE__ */ jsx21(TableHead, { children: /* @__PURE__ */ jsx21(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx21(TableHeader, { children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    /* @__PURE__ */ jsxs12(Table, { children: [
+      /* @__PURE__ */ jsx25(TableHead, { children: /* @__PURE__ */ jsx25(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx25(TableHeader, { children: /* @__PURE__ */ jsxs12(
         "div",
         {
           style: {
@@ -1503,8 +1843,8 @@ function DataTable({
           },
           onClick: () => handleSort(column.id),
           children: [
-            /* @__PURE__ */ jsx21("span", { children: column.header }),
-            column.sortable && /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx25("span", { children: column.header }),
+            column.sortable && /* @__PURE__ */ jsx25(
               "span",
               {
                 style: {
@@ -1517,8 +1857,8 @@ function DataTable({
           ]
         }
       ) }, column.id)) }) }),
-      /* @__PURE__ */ jsxs10(TableBody, { children: [
-        columns.some((column) => column.filterable) && /* @__PURE__ */ jsx21(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx21(TableCell, { children: column.filterable && /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsxs12(TableBody, { children: [
+        columns.some((column) => column.filterable) && /* @__PURE__ */ jsx25(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx25(TableCell, { children: column.filterable && /* @__PURE__ */ jsx25(
           Input,
           {
             label: "Filter",
@@ -1530,7 +1870,7 @@ function DataTable({
             onClick: (e) => e.stopPropagation()
           }
         ) }, column.id)) }),
-        paginatedData.length === 0 ? /* @__PURE__ */ jsx21(TableRow, { children: /* @__PURE__ */ jsx21(TableCell, { colSpan: columns.length, children: /* @__PURE__ */ jsx21(
+        paginatedData.length === 0 ? /* @__PURE__ */ jsx25(TableRow, { children: /* @__PURE__ */ jsx25(TableCell, { colSpan: columns.length, children: /* @__PURE__ */ jsx25(
           "div",
           {
             style: {
@@ -1540,10 +1880,10 @@ function DataTable({
             },
             children: emptyMessage
           }
-        ) }) }) : paginatedData.map((row, index) => /* @__PURE__ */ jsx21(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx21(TableCell, { children: column.accessor(row) }, column.id)) }, getRowKey(row, startIndex + index)))
+        ) }) }) : paginatedData.map((row, index) => /* @__PURE__ */ jsx25(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx25(TableCell, { children: column.accessor(row) }, column.id)) }, getRowKey(row, startIndex + index)))
       ] })
     ] }),
-    showPagination && /* @__PURE__ */ jsxs10(
+    showPagination && /* @__PURE__ */ jsxs12(
       "div",
       {
         style: {
@@ -1554,7 +1894,7 @@ function DataTable({
           padding: "8px 0"
         },
         children: [
-          /* @__PURE__ */ jsxs10("div", { style: { fontSize: "14px", opacity: 0.7 }, children: [
+          /* @__PURE__ */ jsxs12("div", { style: { fontSize: "14px", opacity: 0.7 }, children: [
             "Showing ",
             startIndex + 1,
             " to ",
@@ -1565,8 +1905,8 @@ function DataTable({
             " entries",
             Object.keys(filters).some((key) => filters[key]) && ` (filtered from ${data.length})`
           ] }),
-          /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx25(
               Button,
               {
                 variant: "secondary",
@@ -1575,7 +1915,7 @@ function DataTable({
                 children: "\xAB\xAB"
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx25(
               Button,
               {
                 variant: "secondary",
@@ -1584,13 +1924,13 @@ function DataTable({
                 children: "\xAB"
               }
             ),
-            /* @__PURE__ */ jsxs10("span", { style: { fontSize: "14px" }, children: [
+            /* @__PURE__ */ jsxs12("span", { style: { fontSize: "14px" }, children: [
               "Page ",
               currentPage,
               " of ",
               totalPages
             ] }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx25(
               Button,
               {
                 variant: "secondary",
@@ -1599,7 +1939,7 @@ function DataTable({
                 children: "\xBB"
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx25(
               Button,
               {
                 variant: "secondary",
@@ -1616,18 +1956,18 @@ function DataTable({
 }
 
 // src/inspector/ui/accordion.tsx
-import { styled as styled15 } from "goober";
-import { useEffect as useEffect6, useState as useState6 } from "react";
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { styled as styled17 } from "goober";
+import { useEffect as useEffect6, useState as useState8 } from "react";
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 function Accordion({ title, children, storageKey }) {
   const [open, setOpen] = useStoragedState(storageKey, false);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "details",
     {
       open,
       style: { display: "flex", flexDirection: "column", gap: "1rem" },
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx26(
           StyledSummary,
           {
             onClick: (e) => {
@@ -1643,7 +1983,7 @@ function Accordion({ title, children, storageKey }) {
   );
 }
 function useStoragedState(key, defaultValue) {
-  const [state, setState] = useState6(() => {
+  const [state, setState] = useState8(() => {
     if (typeof window === "undefined") return defaultValue;
     const stored = localStorage.getItem(key);
     return stored ? JSON.parse(stored) : defaultValue;
@@ -1653,7 +1993,7 @@ function useStoragedState(key, defaultValue) {
   }, [state]);
   return [state, setState];
 }
-var StyledSummary = styled15("summary")`
+var StyledSummary = styled17("summary")`
   font-size: 1.125rem;
   cursor: pointer;
   font-weight: 500;
@@ -1661,9 +2001,9 @@ var StyledSummary = styled15("summary")`
 `;
 
 // src/inspector/viewer/raw-data-card.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 function CopyButton({ data }) {
-  const [copyCount, setCopyCount] = useState7(0);
+  const [copyCount, setCopyCount] = useState9(0);
   const copied = copyCount > 0;
   const stringifiedData = JSON.stringify(data);
   useEffect7(() => {
@@ -1674,7 +2014,7 @@ function CopyButton({ data }) {
       };
     }
   }, [copyCount]);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx27(
     Button,
     {
       style: {
@@ -1693,14 +2033,14 @@ function CopyButton({ data }) {
   );
 }
 function RawDataCard({ data }) {
-  return /* @__PURE__ */ jsx23(Accordion, { title: "Raw data", storageKey: "jazz-inspector-show-raw-data", children: /* @__PURE__ */ jsxs12(Card, { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx23(CardHeader, { children: /* @__PURE__ */ jsx23(CopyButton, { data }) }),
-    /* @__PURE__ */ jsx23(CardBody, { children: /* @__PURE__ */ jsx23(ValueRenderer, { json: data }) })
+  return /* @__PURE__ */ jsx27(Accordion, { title: "Raw data", storageKey: "jazz-inspector-show-raw-data", children: /* @__PURE__ */ jsxs14(Card, { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx27(CardHeader, { children: /* @__PURE__ */ jsx27(CopyButton, { data }) }),
+    /* @__PURE__ */ jsx27(CardBody, { children: /* @__PURE__ */ jsx27(ValueRenderer, { json: data }) })
   ] }) });
 }
 
 // src/inspector/viewer/account-view.tsx
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 function AccountView({
   data,
   onNavigate,
@@ -1712,25 +2052,25 @@ function AccountView({
       delete readableData[key];
     }
   }
-  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsx24(GridView, { data: readableData, onNavigate, node }),
-    /* @__PURE__ */ jsx24(RawDataCard, { data })
+  return /* @__PURE__ */ jsxs15(Fragment6, { children: [
+    /* @__PURE__ */ jsx28(GridView, { data: readableData, onNavigate, node }),
+    /* @__PURE__ */ jsx28(RawDataCard, { data })
   ] });
 }
 
 // src/inspector/viewer/co-plain-text-view.tsx
-import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 function CoPlainTextView({ data }) {
   if (!data) return;
-  return /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx25("p", { children: Object.values(data).join("") }),
-    /* @__PURE__ */ jsx25(RawDataCard, { data })
+  return /* @__PURE__ */ jsxs16(Fragment7, { children: [
+    /* @__PURE__ */ jsx29("p", { children: Object.values(data).join("") }),
+    /* @__PURE__ */ jsx29(RawDataCard, { data })
   ] });
 }
 
 // src/inspector/viewer/group-view.tsx
-import { useState as useState8 } from "react";
-import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 function partitionMembers(data) {
   const everyone = Object.entries(data).filter(([key]) => key === "everyone").map(([key, value]) => ({
     id: key,
@@ -1758,7 +2098,7 @@ function GroupView({
   onNavigate,
   node
 }) {
-  const [addMemberType, setAddMemberType] = useState8(null);
+  const [addMemberType, setAddMemberType] = useState10(null);
   const { everyone, members, parentGroups, childGroups } = partitionMembers(
     data
   );
@@ -1837,28 +2177,28 @@ function GroupView({
       alert(`Failed to add ${addMemberType}: ${error.message}`);
     }
   };
-  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
-    /* @__PURE__ */ jsxs15(Table, { children: [
-      /* @__PURE__ */ jsx26(TableHead, { children: /* @__PURE__ */ jsxs15(TableRow, { children: [
-        /* @__PURE__ */ jsx26(TableHeader, { children: "Member" }),
-        /* @__PURE__ */ jsx26(TableHeader, { children: "Permission" }),
-        /* @__PURE__ */ jsx26(TableHeader, {})
+  return /* @__PURE__ */ jsxs17(Fragment8, { children: [
+    /* @__PURE__ */ jsxs17(Table, { children: [
+      /* @__PURE__ */ jsx30(TableHead, { children: /* @__PURE__ */ jsxs17(TableRow, { children: [
+        /* @__PURE__ */ jsx30(TableHeader, { children: "Member" }),
+        /* @__PURE__ */ jsx30(TableHeader, { children: "Permission" }),
+        /* @__PURE__ */ jsx30(TableHeader, {})
       ] }) }),
-      /* @__PURE__ */ jsxs15(TableBody, { children: [
-        everyone.map((member) => /* @__PURE__ */ jsxs15(TableRow, { children: [
-          /* @__PURE__ */ jsx26(TableCell, { children: member.id }),
-          /* @__PURE__ */ jsx26(TableCell, { children: member.role }),
-          /* @__PURE__ */ jsx26(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsxs17(TableBody, { children: [
+        everyone.map((member) => /* @__PURE__ */ jsxs17(TableRow, { children: [
+          /* @__PURE__ */ jsx30(TableCell, { children: member.id }),
+          /* @__PURE__ */ jsx30(TableCell, { children: member.role }),
+          /* @__PURE__ */ jsx30(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx30(
             Button,
             {
               variant: "secondary",
               onClick: () => onRemoveMember(member.id),
-              children: /* @__PURE__ */ jsx26(Icon, { name: "delete" })
+              children: /* @__PURE__ */ jsx30(Icon, { name: "delete" })
             }
           ) })
         ] }, member.id)),
-        members.map((member) => /* @__PURE__ */ jsxs15(TableRow, { children: [
-          /* @__PURE__ */ jsx26(TableCell, { children: /* @__PURE__ */ jsx26(
+        members.map((member) => /* @__PURE__ */ jsxs17(TableRow, { children: [
+          /* @__PURE__ */ jsx30(TableCell, { children: /* @__PURE__ */ jsx30(
             AccountOrGroupText,
             {
               coId: member.id,
@@ -1869,18 +2209,18 @@ function GroupView({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx26(TableCell, { children: member.role }),
-          /* @__PURE__ */ jsx26(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx30(TableCell, { children: member.role }),
+          /* @__PURE__ */ jsx30(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx30(
             Button,
             {
               variant: "secondary",
               onClick: () => onRemoveMember(member.id),
-              children: /* @__PURE__ */ jsx26(Icon, { name: "delete" })
+              children: /* @__PURE__ */ jsx30(Icon, { name: "delete" })
             }
           ) })
         ] }, member.id)),
-        parentGroups.map((group) => /* @__PURE__ */ jsxs15(TableRow, { children: [
-          /* @__PURE__ */ jsx26(TableCell, { children: /* @__PURE__ */ jsx26(
+        parentGroups.map((group) => /* @__PURE__ */ jsxs17(TableRow, { children: [
+          /* @__PURE__ */ jsx30(TableCell, { children: /* @__PURE__ */ jsx30(
             AccountOrGroupText,
             {
               coId: group.id,
@@ -1891,19 +2231,19 @@ function GroupView({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx26(TableCell, { children: group.role }),
-          /* @__PURE__ */ jsx26(TableCell, { children: group.role !== "revoked" && /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx30(TableCell, { children: group.role }),
+          /* @__PURE__ */ jsx30(TableCell, { children: group.role !== "revoked" && /* @__PURE__ */ jsx30(
             Button,
             {
               variant: "secondary",
               onClick: () => onRemoveGroup(group.id),
-              children: /* @__PURE__ */ jsx26(Icon, { name: "delete" })
+              children: /* @__PURE__ */ jsx30(Icon, { name: "delete" })
             }
           ) })
         ] }, group.id))
       ] })
     ] }),
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs17(
       "div",
       {
         style: {
@@ -1913,14 +2253,14 @@ function GroupView({
           marginTop: "1rem"
         },
         children: [
-          /* @__PURE__ */ jsx26(Button, { variant: "primary", onClick: () => setAddMemberType("account"), children: "Add Account" }),
-          /* @__PURE__ */ jsx26(Button, { variant: "primary", onClick: () => setAddMemberType("group"), children: "Add Group" })
+          /* @__PURE__ */ jsx30(Button, { variant: "primary", onClick: () => setAddMemberType("account"), children: "Add Account" }),
+          /* @__PURE__ */ jsx30(Button, { variant: "primary", onClick: () => setAddMemberType("group"), children: "Add Group" })
         ]
       }
     ),
-    childGroups.length > 0 && /* @__PURE__ */ jsxs15(Table, { children: [
-      /* @__PURE__ */ jsx26(TableHead, { children: /* @__PURE__ */ jsx26(TableRow, { children: /* @__PURE__ */ jsx26(TableHeader, { children: "Member of" }) }) }),
-      /* @__PURE__ */ jsx26(TableBody, { children: childGroups.map((group) => /* @__PURE__ */ jsx26(TableRow, { children: /* @__PURE__ */ jsx26(TableCell, { children: /* @__PURE__ */ jsx26(
+    childGroups.length > 0 && /* @__PURE__ */ jsxs17(Table, { children: [
+      /* @__PURE__ */ jsx30(TableHead, { children: /* @__PURE__ */ jsx30(TableRow, { children: /* @__PURE__ */ jsx30(TableHeader, { children: "Member of" }) }) }),
+      /* @__PURE__ */ jsx30(TableBody, { children: childGroups.map((group) => /* @__PURE__ */ jsx30(TableRow, { children: /* @__PURE__ */ jsx30(TableCell, { children: /* @__PURE__ */ jsx30(
         AccountOrGroupText,
         {
           coId: group.id,
@@ -1932,20 +2272,20 @@ function GroupView({
         }
       ) }) }, group.id)) })
     ] }),
-    /* @__PURE__ */ jsx26(RawDataCard, { data }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx30(RawDataCard, { data }),
+    /* @__PURE__ */ jsx30(
       Modal,
       {
         isOpen: addMemberType !== null,
         onClose: () => setAddMemberType(null),
         heading: addMemberType === "account" ? "Add Account" : "Add Group",
         showButtons: false,
-        children: /* @__PURE__ */ jsx26("form", { onSubmit: handleAddMemberSubmit, children: /* @__PURE__ */ jsxs15(
+        children: /* @__PURE__ */ jsx30("form", { onSubmit: handleAddMemberSubmit, children: /* @__PURE__ */ jsxs17(
           "div",
           {
             style: { display: "flex", flexDirection: "column", gap: "1rem" },
             children: [
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx30(
                 Input,
                 {
                   name: "memberId",
@@ -1954,13 +2294,13 @@ function GroupView({
                   required: true
                 }
               ),
-              /* @__PURE__ */ jsxs15(Select, { name: "role", label: "Role", children: [
-                /* @__PURE__ */ jsx26("option", { value: "reader", children: "Reader" }),
-                /* @__PURE__ */ jsx26("option", { value: "writer", children: "Writer" }),
-                /* @__PURE__ */ jsx26("option", { value: "admin", children: "Admin" }),
-                addMemberType === "account" ? /* @__PURE__ */ jsx26(Fragment8, { children: /* @__PURE__ */ jsx26("option", { value: "writeOnly", children: "Write Only" }) }) : /* @__PURE__ */ jsx26(Fragment8, { children: /* @__PURE__ */ jsx26("option", { value: "inherit", children: "Inherit" }) })
+              /* @__PURE__ */ jsxs17(Select, { name: "role", label: "Role", children: [
+                /* @__PURE__ */ jsx30("option", { value: "reader", children: "Reader" }),
+                /* @__PURE__ */ jsx30("option", { value: "writer", children: "Writer" }),
+                /* @__PURE__ */ jsx30("option", { value: "admin", children: "Admin" }),
+                addMemberType === "account" ? /* @__PURE__ */ jsx30(Fragment8, { children: /* @__PURE__ */ jsx30("option", { value: "writeOnly", children: "Write Only" }) }) : /* @__PURE__ */ jsx30(Fragment8, { children: /* @__PURE__ */ jsx30("option", { value: "inherit", children: "Inherit" }) })
               ] }),
-              /* @__PURE__ */ jsxs15(
+              /* @__PURE__ */ jsxs17(
                 "div",
                 {
                   style: {
@@ -1970,7 +2310,7 @@ function GroupView({
                     marginTop: "0.5rem"
                   },
                   children: [
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx30(
                       Button,
                       {
                         type: "button",
@@ -1979,7 +2319,7 @@ function GroupView({
                         children: "Cancel"
                       }
                     ),
-                    /* @__PURE__ */ jsx26(Button, { type: "submit", variant: "primary", children: "Add" })
+                    /* @__PURE__ */ jsx30(Button, { type: "submit", variant: "primary", children: "Add" })
                   ]
                 }
               )
@@ -1992,7 +2332,7 @@ function GroupView({
 }
 
 // src/inspector/viewer/role-display.tsx
-import { jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsxs as jsxs18 } from "react/jsx-runtime";
 function RoleDisplay({
   node,
   value
@@ -2011,24 +2351,24 @@ function RoleDisplay({
   } else {
     role = "unauthorized";
   }
-  return /* @__PURE__ */ jsxs16(Text, { children: [
+  return /* @__PURE__ */ jsxs18(Text, { children: [
     "Role: ",
     role
   ] });
 }
 
 // src/inspector/viewer/table-viewer.tsx
-import { styled as styled16 } from "goober";
-import { useMemo as useMemo2, useState as useState9 } from "react";
-import { Fragment as Fragment9, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
-var PaginationContainer = styled16("div")`
+import { styled as styled18 } from "goober";
+import { useMemo as useMemo2, useState as useState11 } from "react";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+var PaginationContainer = styled18("div")`
   padding: 1rem 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 `;
-var RedTooltip = styled16("span")`
+var RedTooltip = styled18("span")`
   position:relative; /* making the .tooltip span a container for the tooltip text */
   border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
 
@@ -2065,7 +2405,7 @@ function CoValuesTableView({
   onNavigate,
   onRemove
 }) {
-  const [visibleRowsCount, setVisibleRowsCount] = useState9(10);
+  const [visibleRowsCount, setVisibleRowsCount] = useState11(10);
   const [coIdArray, visibleRows] = useMemo2(() => {
     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);
@@ -2074,10 +2414,10 @@ function CoValuesTableView({
   const resolvedRows = useResolvedCoValues(visibleRows, node);
   const hasMore = visibleRowsCount < coIdArray.length;
   if (!coIdArray.length) {
-    return /* @__PURE__ */ jsx27("div", { children: "No data to display" });
+    return /* @__PURE__ */ jsx31("div", { children: "No data to display" });
   }
   if (resolvedRows.length === 0) {
-    return /* @__PURE__ */ jsx27("div", { children: "Loading..." });
+    return /* @__PURE__ */ jsx31("div", { children: "Loading..." });
   }
   const keys = Array.from(
     new Set(
@@ -2087,15 +2427,15 @@ function CoValuesTableView({
   const loadMore = () => {
     setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
   };
-  return /* @__PURE__ */ jsxs17(Fragment9, { children: [
-    /* @__PURE__ */ jsxs17(Table, { children: [
-      /* @__PURE__ */ jsx27(TableHead, { children: /* @__PURE__ */ jsxs17(TableRow, { children: [
-        ["ID", ...keys, "Action"].map((key) => /* @__PURE__ */ jsx27(TableHeader, { children: key }, key)),
-        onRemove && /* @__PURE__ */ jsx27(TableHeader, {})
+  return /* @__PURE__ */ jsxs19(Fragment9, { children: [
+    /* @__PURE__ */ jsxs19(Table, { children: [
+      /* @__PURE__ */ jsx31(TableHead, { children: /* @__PURE__ */ jsxs19(TableRow, { children: [
+        ["ID", ...keys, "Action"].map((key) => /* @__PURE__ */ jsx31(TableHeader, { children: key }, key)),
+        onRemove && /* @__PURE__ */ jsx31(TableHeader, {})
       ] }) }),
-      /* @__PURE__ */ jsx27(TableBody, { children: resolvedRows.slice(0, visibleRowsCount).map((item, index) => /* @__PURE__ */ jsxs17(TableRow, { children: [
-        /* @__PURE__ */ jsx27(TableCell, { children: /* @__PURE__ */ jsx27(Text, { mono: true, children: item.snapshot === "unavailable" ? /* @__PURE__ */ jsxs17(RedTooltip, { "data-text": "Unavailable", children: [
-          /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx31(TableBody, { children: resolvedRows.slice(0, visibleRowsCount).map((item, index) => /* @__PURE__ */ jsxs19(TableRow, { children: [
+        /* @__PURE__ */ jsx31(TableCell, { children: /* @__PURE__ */ jsx31(Text, { mono: true, children: item.snapshot === "unavailable" ? /* @__PURE__ */ jsxs19(RedTooltip, { "data-text": "Unavailable", children: [
+          /* @__PURE__ */ jsx31(
             Icon,
             {
               name: "caution",
@@ -2108,7 +2448,7 @@ function CoValuesTableView({
           ),
           visibleRows[index]
         ] }) : visibleRows[index] }) }),
-        keys.map((key) => /* @__PURE__ */ jsx27(TableCell, { children: item.snapshot !== "unavailable" && /* @__PURE__ */ jsx27(
+        keys.map((key) => /* @__PURE__ */ jsx31(TableCell, { children: item.snapshot !== "unavailable" && /* @__PURE__ */ jsx31(
           ValueRenderer,
           {
             json: item.snapshot[key],
@@ -2129,7 +2469,7 @@ function CoValuesTableView({
             }
           }
         ) }, key)),
-        /* @__PURE__ */ jsx27(TableCell, { children: /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx31(TableCell, { children: /* @__PURE__ */ jsx31(
           Button,
           {
             variant: "secondary",
@@ -2142,18 +2482,18 @@ function CoValuesTableView({
             children: "View"
           }
         ) }),
-        onRemove && /* @__PURE__ */ jsx27(TableCell, { children: /* @__PURE__ */ jsx27(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
+        onRemove && /* @__PURE__ */ jsx31(TableCell, { children: /* @__PURE__ */ jsx31(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
       ] }, index)) })
     ] }),
-    /* @__PURE__ */ jsxs17(PaginationContainer, { children: [
-      /* @__PURE__ */ jsxs17(Text, { muted: true, small: true, children: [
+    /* @__PURE__ */ jsxs19(PaginationContainer, { children: [
+      /* @__PURE__ */ jsxs19(Text, { muted: true, small: true, children: [
         "Showing ",
         Math.min(visibleRowsCount, coIdArray.length),
         " of",
         " ",
         coIdArray.length
       ] }),
-      hasMore && /* @__PURE__ */ jsx27(Button, { variant: "secondary", onClick: loadMore, children: "Load more" })
+      hasMore && /* @__PURE__ */ jsx31(Button, { variant: "secondary", onClick: loadMore, children: "Load more" })
     ] })
   ] });
 }
@@ -2167,7 +2507,7 @@ function TableView({
     return Array.isArray(data) && data.every((k) => isCoId(k));
   }, [data]);
   if (isListOfCoValues) {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx31(
       CoValuesTableView,
       {
         data,
@@ -2177,24 +2517,67 @@ function TableView({
       }
     );
   }
-  return /* @__PURE__ */ jsxs17(Table, { children: [
-    /* @__PURE__ */ jsx27(TableHead, { children: /* @__PURE__ */ jsxs17(TableRow, { children: [
-      /* @__PURE__ */ jsx27(TableHeader, { style: { width: "5rem" }, children: "Index" }),
-      /* @__PURE__ */ jsx27(TableHeader, { children: "Value" }),
-      onRemove && /* @__PURE__ */ jsx27(TableHeader, { children: "Action" })
+  return /* @__PURE__ */ jsxs19(Table, { children: [
+    /* @__PURE__ */ jsx31(TableHead, { children: /* @__PURE__ */ jsxs19(TableRow, { children: [
+      /* @__PURE__ */ jsx31(TableHeader, { style: { width: "5rem" }, children: "Index" }),
+      /* @__PURE__ */ jsx31(TableHeader, { children: "Value" }),
+      onRemove && /* @__PURE__ */ jsx31(TableHeader, { children: "Action" })
     ] }) }),
-    /* @__PURE__ */ jsx27(TableBody, { children: Array.isArray(data) && data?.map((value, index) => /* @__PURE__ */ jsxs17(TableRow, { children: [
-      /* @__PURE__ */ jsx27(TableCell, { children: /* @__PURE__ */ jsx27(Text, { mono: true, children: index }) }),
-      /* @__PURE__ */ jsx27(TableCell, { children: /* @__PURE__ */ jsx27(ValueRenderer, { json: value }) }),
-      onRemove && /* @__PURE__ */ jsx27(TableCell, { children: /* @__PURE__ */ jsx27(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
+    /* @__PURE__ */ jsx31(TableBody, { children: Array.isArray(data) && data?.map((value, index) => /* @__PURE__ */ jsxs19(TableRow, { children: [
+      /* @__PURE__ */ jsx31(TableCell, { children: /* @__PURE__ */ jsx31(Text, { mono: true, children: index }) }),
+      /* @__PURE__ */ jsx31(TableCell, { children: /* @__PURE__ */ jsx31(ValueRenderer, { json: value }) }),
+      onRemove && /* @__PURE__ */ jsx31(TableCell, { children: /* @__PURE__ */ jsx31(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
     ] }, index)) })
   ] });
 }
 
 // src/inspector/viewer/history-view.tsx
 import { useMemo as useMemo3 } from "react";
-import { styled as styled17 } from "goober";
-import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { styled as styled19 } from "goober";
+
+// src/inspector/utils/transactions-changes.ts
+var isGroupExtension = (change) => {
+  return change?.op === "set" && change?.value === "extend";
+};
+var isGroupExtendRevocation = (change) => {
+  return change?.op === "set" && change?.value === "revoked";
+};
+var isGroupPromotion = (change) => {
+  return change?.op === "set" && change?.key.startsWith("parent_co_");
+};
+var isUserPromotion = (change) => {
+  return change?.op === "set" && (isCoId(change?.key) || change?.key === "everyone");
+};
+var isKeyRevelation = (change) => {
+  return change?.op === "set" && change?.key.includes("_for_");
+};
+var isPropertySet = (change) => {
+  return change?.op === "set" && "key" in change && "value" in change;
+};
+var isPropertyDeletion = (change) => {
+  return change?.op === "del" && "key" in change;
+};
+var isItemAppend = (change) => {
+  return change?.op === "app" && "after" in change && "value" in change;
+};
+var isItemPrepend = (change) => {
+  return change?.op === "pre" && "before" in change && "value" in change;
+};
+var isItemDeletion = (change) => {
+  return change?.op === "del" && "insertion" in change;
+};
+var isStreamStart = (change) => {
+  return change?.type === "start" && "mimeType" in change;
+};
+var isStreamChunk = (change) => {
+  return change?.type === "chunk" && "chunk" in change;
+};
+var isStreamEnd = (change) => {
+  return change?.type === "end";
+};
+
+// src/inspector/viewer/history-view.tsx
+import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 function HistoryView({
   coValue,
   node
@@ -2207,8 +2590,8 @@ function HistoryView({
     {
       id: "author",
       header: "Author",
-      accessor: (row) => /* @__PURE__ */ jsxs18(Fragment10, { children: [
-        row.isValid || /* @__PURE__ */ jsx28(RedTooltip2, { "data-text": "This transaction is invalid and is not used", children: /* @__PURE__ */ jsx28(
+      accessor: (row) => /* @__PURE__ */ jsxs20(Fragment10, { children: [
+        row.isValid || /* @__PURE__ */ jsx32(RedTooltip2, { "data-text": "This transaction is invalid and is not used", children: /* @__PURE__ */ jsx32(
           Icon,
           {
             name: "caution",
@@ -2221,7 +2604,7 @@ function HistoryView({
             }
           }
         ) }),
-        row.author.startsWith("co_") ? /* @__PURE__ */ jsx28(
+        row.author.startsWith("co_") ? /* @__PURE__ */ jsx32(
           AccountOrGroupText,
           {
             coId: row.author,
@@ -2240,9 +2623,9 @@ function HistoryView({
       header: "Action",
       accessor: (row) => {
         if (row.isValid) return row.action;
-        return /* @__PURE__ */ jsxs18(Fragment10, { children: [
+        return /* @__PURE__ */ jsxs20(Fragment10, { children: [
           row.action,
-          /* @__PURE__ */ jsxs18("span", { style: { color: "red", display: "block" }, children: [
+          /* @__PURE__ */ jsxs20("span", { style: { color: "red", display: "block" }, children: [
             "Invalid transaction: ",
             row.validationErrorMessage
           ] })
@@ -2261,7 +2644,7 @@ function HistoryView({
       sortFn: (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
     }
   ];
-  return /* @__PURE__ */ jsx28(Accordion, { title: "CoValue history", storageKey: "jazz-inspector-show-history", children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx32(Accordion, { title: "CoValue history", storageKey: "jazz-inspector-show-history", children: /* @__PURE__ */ jsx32(
     DataTable,
     {
       columns,
@@ -2277,7 +2660,9 @@ function getTransactionChanges(tx, coValue) {
   if (tx.isValid === false && tx.tx.privacy === "private") {
     const readKey = coValue.core.getReadKey(tx.tx.keyUsed);
     if (!readKey) {
-      throw new Error("Read key not found");
+      return [
+        `Unable to decrypt transaction: read key ${tx.tx.keyUsed} not found.`
+      ];
     }
     return coValue.core.verified.decryptTransaction(
       tx.txID.sessionID,
@@ -2372,46 +2757,7 @@ var findListChange = (opId, coValue) => {
     (tx) => tx.txID.sessionID === opId.sessionID && tx.txID.txIndex === opId.txIndex
   )?.changes?.[opId.changeIdx];
 };
-var isGroupExtension = (change) => {
-  return change?.op === "set" && change?.value === "extend";
-};
-var isGroupExtendRevocation = (change) => {
-  return change?.op === "set" && change?.value === "revoked";
-};
-var isGroupPromotion = (change) => {
-  return change?.op === "set" && change?.key.startsWith("parent_co_");
-};
-var isUserPromotion = (change) => {
-  return change?.op === "set" && (isCoId(change?.key) || change?.key === "everyone");
-};
-var isKeyRevelation = (change) => {
-  return change?.op === "set" && change?.key.includes("_for_");
-};
-var isPropertySet = (change) => {
-  return change?.op === "set" && "key" in change && "value" in change;
-};
-var isPropertyDeletion = (change) => {
-  return change?.op === "del" && "key" in change;
-};
-var isItemAppend = (change) => {
-  return change?.op === "app" && "after" in change && "value" in change;
-};
-var isItemPrepend = (change) => {
-  return change?.op === "pre" && "before" in change && "value" in change;
-};
-var isItemDeletion = (change) => {
-  return change?.op === "del" && "insertion" in change;
-};
-var isStreamStart = (change) => {
-  return change?.type === "start" && "mimeType" in change;
-};
-var isStreamChunk = (change) => {
-  return change?.type === "chunk" && "chunk" in change;
-};
-var isStreamEnd = (change) => {
-  return change?.type === "end";
-};
-var RedTooltip2 = styled17("span")`
+var RedTooltip2 = styled19("span")`
   position:relative; /* making the .tooltip span a container for the tooltip text */
   border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
 
@@ -2443,12 +2789,325 @@ var RedTooltip2 = styled17("span")`
   }
 `;
 
+// src/inspector/viewer/co-map-view.tsx
+import { useState as useState12, useMemo as useMemo4 } from "react";
+import { styled as styled20 } from "goober";
+
+// src/inspector/utils/history.ts
+function restoreCoMapToTimestamp(coValue, timestamp, removeUnknownProperties) {
+  const myRole = coValue.group.myRole();
+  if (myRole === void 0 || !["admin", "manager", "writer", "writerOnly"].includes(myRole)) {
+    return;
+  }
+  const newCoValue = coValue.atTime(timestamp).toJSON();
+  const oldCoValue = coValue.toJSON();
+  if (newCoValue === null) return;
+  let changes = [];
+  if (removeUnknownProperties) {
+    for (const key in oldCoValue) {
+      if (!(key in newCoValue)) {
+        changes.push({
+          op: "del",
+          key
+        });
+      }
+    }
+  }
+  for (const key in newCoValue) {
+    if (newCoValue[key] !== oldCoValue[key]) {
+      changes.push({
+        op: "set",
+        key,
+        value: newCoValue[key]
+      });
+    }
+  }
+  if (changes.length > 0) {
+    coValue.core.makeTransaction(changes, "private");
+  }
+}
+
+// src/inspector/viewer/co-map-view.tsx
+import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+function CoMapView({
+  coValue,
+  data,
+  node,
+  onNavigate
+}) {
+  return /* @__PURE__ */ jsxs21(Fragment11, { children: [
+    /* @__PURE__ */ jsx33(
+      GridView,
+      {
+        data,
+        onNavigate,
+        node,
+        coValue
+      }
+    ),
+    /* @__PURE__ */ jsxs21("div", { children: [
+      /* @__PURE__ */ jsx33(
+        AddPropertyModal,
+        {
+          disabled: !isWriter(coValue.group.myRole()),
+          coValue,
+          node
+        }
+      ),
+      " ",
+      /* @__PURE__ */ jsx33(RestoreSnapshotModal, { coValue })
+    ] })
+  ] });
+}
+function AddPropertyModal({
+  coValue,
+  node,
+  disabled
+}) {
+  const [isAddPropertyModalOpen, setIsAddPropertyModalOpen] = useState12(false);
+  const [propertyName, setPropertyName] = useState12("");
+  const openAddPropertyModal = () => {
+    setIsAddPropertyModalOpen(true);
+    setPropertyName("");
+  };
+  const handleCancel = () => {
+    setIsAddPropertyModalOpen(false);
+    setPropertyName("");
+  };
+  return /* @__PURE__ */ jsxs21(Fragment11, { children: [
+    /* @__PURE__ */ jsx33(
+      Button,
+      {
+        title: "Add Property",
+        variant: "secondary",
+        disabled,
+        onClick: openAddPropertyModal,
+        children: /* @__PURE__ */ jsx33(Icon, { name: "add" })
+      }
+    ),
+    /* @__PURE__ */ jsxs21(
+      Modal,
+      {
+        isOpen: isAddPropertyModalOpen,
+        onClose: handleCancel,
+        heading: "Add Property",
+        showButtons: false,
+        children: [
+          /* @__PURE__ */ jsx33(
+            Input,
+            {
+              label: "Property Name",
+              value: propertyName,
+              onChange: (e) => setPropertyName(e.target.value),
+              placeholder: "Enter property name"
+            }
+          ),
+          propertyName && /* @__PURE__ */ jsx33(EditorContainer, { children: /* @__PURE__ */ jsx33(
+            CoValueEditor,
+            {
+              node,
+              property: propertyName,
+              value: void 0,
+              coValue,
+              onCancel: handleCancel
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function RestoreSnapshotModal({ coValue }) {
+  const [isRestoreModalOpen, setIsRestoreModalOpen] = useState12(false);
+  const [selectedIndex, setSelectedIndex] = useState12(-1);
+  const [removeUnknownProperties, setRemoveUnknownProperties] = useState12(false);
+  const timestamps = useMemo4(
+    () => coValue.core.verifiedTransactions.map((tx) => tx.madeAt),
+    [coValue.core.verifiedTransactions.length]
+  );
+  const coMapAtSelectedIndex = useMemo4(() => {
+    if (selectedIndex === -1) return null;
+    return coValue.atTime(timestamps[selectedIndex]).toJSON();
+  }, [coValue, timestamps, selectedIndex]);
+  const openRestoreModal = () => {
+    setIsRestoreModalOpen(true);
+    setSelectedIndex(timestamps.length - 1);
+  };
+  const handleRestore = () => {
+    if (timestamps.length < 2) return;
+    if (timestamps.length === 0) return;
+    const selectedTimestamp = timestamps[selectedIndex];
+    if (selectedTimestamp === void 0) return;
+    restoreCoMapToTimestamp(
+      coValue,
+      selectedTimestamp,
+      removeUnknownProperties
+    );
+    setIsRestoreModalOpen(false);
+  };
+  const handleClose = () => {
+    setIsRestoreModalOpen(false);
+  };
+  const canRestore = isWriter(coValue.group.myRole());
+  return /* @__PURE__ */ jsxs21(Fragment11, { children: [
+    /* @__PURE__ */ jsx33(Button, { title: "Timeline", variant: "secondary", onClick: openRestoreModal, children: /* @__PURE__ */ jsx33(Icon, { name: "history" }) }),
+    /* @__PURE__ */ jsxs21(
+      Modal,
+      {
+        isOpen: isRestoreModalOpen,
+        onClose: handleClose,
+        heading: "Timeline",
+        confirmText: "Restore",
+        cancelText: "Cancel",
+        onConfirm: handleRestore,
+        onCancel: handleClose,
+        showButtons: timestamps.length > 1 && canRestore,
+        children: [
+          timestamps.length > 1 && /* @__PURE__ */ jsxs21(Fragment11, { children: [
+            /* @__PURE__ */ jsxs21(RangeContainer, { children: [
+              /* @__PURE__ */ jsx33(RangeLabel, { children: "Select Timestamp" }),
+              /* @__PURE__ */ jsx33(
+                RangeInput,
+                {
+                  type: "range",
+                  min: 0,
+                  max: Math.max(0, timestamps.length - 1),
+                  value: selectedIndex,
+                  onChange: (e) => setSelectedIndex(Number(e.target.value)),
+                  disabled: timestamps.length === 0
+                }
+              ),
+              /* @__PURE__ */ jsx33(TimestampDisplay, { children: timestamps[selectedIndex] !== void 0 ? new Date(timestamps[selectedIndex]).toISOString() : "No timestamps available" })
+            ] }),
+            canRestore && /* @__PURE__ */ jsxs21(CheckboxContainer, { children: [
+              /* @__PURE__ */ jsx33(
+                CheckboxInput,
+                {
+                  type: "checkbox",
+                  id: "remove-unknown-properties",
+                  checked: removeUnknownProperties,
+                  onChange: (e) => setRemoveUnknownProperties(e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx33(CheckboxLabel, { htmlFor: "remove-unknown-properties", children: "Remove unknown properties (properties that don't exist in the selected snapshot)" })
+            ] })
+          ] }),
+          timestamps.length > 0 && timestamps[selectedIndex] !== void 0 && /* @__PURE__ */ jsxs21(PreviewSection, { children: [
+            /* @__PURE__ */ jsx33(PreviewLabel, { children: "State at that time:" }),
+            /* @__PURE__ */ jsx33(PreviewPre, { children: JSON.stringify(coMapAtSelectedIndex, null, 2) })
+          ] }),
+          timestamps.length < 2 && /* @__PURE__ */ jsx33("div", { style: { color: "var(--j-text-color)" }, children: "At least 2 timestamps are required to restore a snapshot." })
+        ]
+      }
+    )
+  ] });
+}
+var PreviewSection = styled20("div")`
+  margin-top: 1.5rem;
+`;
+var PreviewLabel = styled20("div")`
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: var(--j-text-color-strong);
+`;
+var PreviewPre = styled20("pre")`
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-md);
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--j-text-color);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+`;
+var RangeContainer = styled20("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+var RangeLabel = styled20("label")`
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+  font-size: 0.875rem;
+`;
+var RangeInput = styled20("input")`
+  width: 100%;
+  height: 0.5rem;
+  border-radius: var(--j-radius-sm);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--j-foreground);
+  cursor: pointer;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: var(--j-primary-color);
+    cursor: pointer;
+    border: 2px solid var(--j-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  &::-moz-range-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: var(--j-primary-color);
+    cursor: pointer;
+    border: 2px solid var(--j-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var TimestampDisplay = styled20("div")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  color: var(--j-text-color);
+  padding: 0.5rem;
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-md);
+  text-align: center;
+`;
+var CheckboxContainer = styled20("div")`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-top: 1rem;
+`;
+var CheckboxInput = styled20("input")`
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.125rem;
+  cursor: pointer;
+  accent-color: var(--j-primary-color);
+`;
+var CheckboxLabel = styled20("label")`
+  font-size: 0.875rem;
+  color: var(--j-text-color);
+  cursor: pointer;
+  line-height: 1.25rem;
+`;
+var EditorContainer = styled20("div")`
+  margin-top: 1rem;
+`;
+
 // src/inspector/viewer/page.tsx
-import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 var BasePageContainer = React5.forwardRef(
-  ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ jsx29("div", { ref, ...rest })
+  ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ jsx34("div", { ref, ...rest })
 );
-var PageContainer = styled18(BasePageContainer)`
+var PageContainer = styled21(BasePageContainer)`
   position: absolute;
   z-index: 10;
   inset: 0;
@@ -2456,36 +3115,36 @@ var PageContainer = styled18(BasePageContainer)`
   height: 100%;
   padding: 0 0.75rem;
 `;
-var BackButton = styled18("div")`
+var BackButton = styled21("div")`
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 2.5rem;
 `;
-var HeaderContainer = styled18("div")`
+var HeaderContainer = styled21("div")`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
 `;
-var TitleContainer = styled18("div")`
+var TitleContainer = styled21("div")`
   display: flex;
   align-items: center;
   gap: 0.75rem;
 `;
-var Title = styled18(Heading)`
+var Title = styled21(Heading)`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.25rem;
 `;
-var BadgeContainer = styled18("div")`
+var BadgeContainer = styled21("div")`
   display: flex;
   align-items: center;
   gap: 0.75rem;
 `;
-var ContentContainer = styled18("div")`
+var ContentContainer = styled21("div")`
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -2506,7 +3165,7 @@ function View(props) {
   const { node, onNavigate } = props;
   if (!snapshot || snapshot === "unavailable") return;
   if (type === "costream") {
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx34(
       CoStreamView,
       {
         data: snapshot,
@@ -2517,7 +3176,7 @@ function View(props) {
     );
   }
   if (extendedType === "group") {
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx34(
       GroupView,
       {
         coValue: value,
@@ -2528,10 +3187,10 @@ function View(props) {
     );
   }
   if (extendedType === "account") {
-    return /* @__PURE__ */ jsx29(AccountView, { data: snapshot, node, onNavigate });
+    return /* @__PURE__ */ jsx34(AccountView, { data: snapshot, node, onNavigate });
   }
   if (type === "coplaintext") {
-    return /* @__PURE__ */ jsx29(CoPlainTextView, { data: snapshot });
+    return /* @__PURE__ */ jsx34(CoPlainTextView, { data: snapshot });
   }
   if (type === "colist") {
     const handleRemove = (index) => {
@@ -2540,7 +3199,7 @@ function View(props) {
         list.delete(index);
       }
     };
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx34(
       TableView,
       {
         data: snapshot,
@@ -2551,9 +3210,20 @@ function View(props) {
     );
   }
   if (extendedType === "record") {
-    return /* @__PURE__ */ jsx29(TableView, { data: snapshot, node, onNavigate });
+    return /* @__PURE__ */ jsx34(TableView, { data: snapshot, node, onNavigate });
+  }
+  if (type === "comap") {
+    return /* @__PURE__ */ jsx34(
+      CoMapView,
+      {
+        coValue: value,
+        data: snapshot,
+        node,
+        onNavigate
+      }
+    );
   }
-  return /* @__PURE__ */ jsx29(GridView, { data: snapshot, onNavigate, node });
+  return /* @__PURE__ */ jsx34(GridView, { data: snapshot, onNavigate, node });
 }
 function Page(props) {
   const {
@@ -2569,13 +3239,13 @@ function Page(props) {
   const coValue = useResolvedCoValue(coId, node);
   const { value, snapshot, type, extendedType } = coValue;
   if (snapshot === "unavailable") {
-    return /* @__PURE__ */ jsx29("div", { style, children: "Data unavailable" });
+    return /* @__PURE__ */ jsx34("div", { style, children: "Data unavailable" });
   }
   if (!snapshot) {
-    return /* @__PURE__ */ jsx29("div", { style });
+    return /* @__PURE__ */ jsx34("div", { style });
   }
-  return /* @__PURE__ */ jsxs19(PageContainer, { style, className, isTopLevel, children: [
-    !isTopLevel && /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs22(PageContainer, { style, className, isTopLevel, children: [
+    !isTopLevel && /* @__PURE__ */ jsx34(
       BackButton,
       {
         "aria-label": "Back",
@@ -2585,27 +3255,27 @@ function Page(props) {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx29(HeaderContainer, { children: /* @__PURE__ */ jsxs19(TitleContainer, { children: [
-      /* @__PURE__ */ jsx29(Title, { children: /* @__PURE__ */ jsxs19("span", { children: [
+    /* @__PURE__ */ jsx34(HeaderContainer, { children: /* @__PURE__ */ jsxs22(TitleContainer, { children: [
+      /* @__PURE__ */ jsx34(Title, { children: /* @__PURE__ */ jsxs22("span", { children: [
         name,
-        typeof snapshot === "object" && "name" in snapshot ? /* @__PURE__ */ jsxs19("span", { style: { color: "#57534e", fontWeight: 500 }, children: [
+        typeof snapshot === "object" && "name" in snapshot ? /* @__PURE__ */ jsxs22("span", { style: { color: "#57534e", fontWeight: 500 }, children: [
           " ",
           snapshot.name
         ] }) : null
       ] }) }),
-      /* @__PURE__ */ jsxs19(BadgeContainer, { children: [
-        /* @__PURE__ */ jsx29(Badge, { children: type && /* @__PURE__ */ jsx29(TypeIcon, { type, extendedType }) }),
-        /* @__PURE__ */ jsx29(Badge, { children: coId })
+      /* @__PURE__ */ jsxs22(BadgeContainer, { children: [
+        /* @__PURE__ */ jsx34(Badge, { children: type && /* @__PURE__ */ jsx34(TypeIcon, { type, extendedType }) }),
+        /* @__PURE__ */ jsx34(Badge, { children: coId })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs19(ContentContainer, { children: [
-      /* @__PURE__ */ jsx29(View, { ...props, coValue }),
-      extendedType !== "account" && extendedType !== "group" && /* @__PURE__ */ jsxs19(Fragment11, { children: [
-        /* @__PURE__ */ jsx29(RoleDisplay, { node, value }),
-        /* @__PURE__ */ jsxs19(Text, { muted: true, children: [
+    /* @__PURE__ */ jsxs22(ContentContainer, { children: [
+      /* @__PURE__ */ jsx34(View, { ...props, coValue }),
+      extendedType !== "account" && extendedType !== "group" && /* @__PURE__ */ jsxs22(Fragment12, { children: [
+        /* @__PURE__ */ jsx34(RoleDisplay, { node, value }),
+        /* @__PURE__ */ jsxs22(Text, { muted: true, children: [
           "Owned by",
           " ",
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx34(
             AccountOrGroupText,
             {
               coId: value.group.id,
@@ -2618,15 +3288,15 @@ function Page(props) {
           )
         ] })
       ] }),
-      value && /* @__PURE__ */ jsx29(HistoryView, { coValue: value, node })
+      value && /* @__PURE__ */ jsx34(HistoryView, { coValue: value, node })
     ] })
   ] });
 }
 
 // src/inspector/ui/error-boundary.tsx
 import React6 from "react";
-import { styled as styled19 } from "goober";
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { styled as styled22 } from "goober";
+import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 var ErrorBoundary = class extends React6.Component {
   constructor(props) {
     super(props);
@@ -2640,24 +3310,24 @@ var ErrorBoundary = class extends React6.Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ jsxs20("div", { style: { padding: "1rem" }, children: [
-        /* @__PURE__ */ jsx30(StyledHeading2, { children: this.props.title }),
-        /* @__PURE__ */ jsx30(Text, { mono: true, style: { marginTop: "0.5rem", color: "#ef4444" }, children: this.state.error?.message || "An unexpected error occurred" }),
-        /* @__PURE__ */ jsx30("pre", { style: { paddingLeft: "1rem", color: "#ef4444" }, children: this.state.error?.stack })
+      return /* @__PURE__ */ jsxs23("div", { style: { padding: "1rem" }, children: [
+        /* @__PURE__ */ jsx35(StyledHeading2, { children: this.props.title }),
+        /* @__PURE__ */ jsx35(Text, { mono: true, style: { marginTop: "0.5rem", color: "#ef4444" }, children: this.state.error?.message || "An unexpected error occurred" }),
+        /* @__PURE__ */ jsx35("pre", { style: { paddingLeft: "1rem", color: "#ef4444" }, children: this.state.error?.stack })
       ] });
     }
     return this.props.children;
   }
 };
-var StyledHeading2 = styled19("h1")`
+var StyledHeading2 = styled22("h1")`
   font-size: 1.125rem;
   font-weight: 500;
   color: var(--j-text-color-strong);
 `;
 
 // src/inspector/viewer/page-stack.tsx
-import { Fragment as Fragment12, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
-var PageStackContainer = styled20("div")`
+import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+var PageStackContainer = styled23("div")`
   position: relative;
   padding: 0 0.75rem;
   overflow-y: auto;
@@ -2674,9 +3344,9 @@ function PageStack({
 }) {
   const page = path[path.length - 1];
   const index = path.length - 1;
-  return /* @__PURE__ */ jsx31(Fragment12, { children: /* @__PURE__ */ jsxs21(PageStackContainer, { children: [
+  return /* @__PURE__ */ jsx36(Fragment13, { children: /* @__PURE__ */ jsxs24(PageStackContainer, { children: [
     children,
-    node && page && /* @__PURE__ */ jsx31(ErrorBoundary, { title: "An error occurred while rendering this CoValue", children: /* @__PURE__ */ jsx31(
+    node && page && /* @__PURE__ */ jsx36(ErrorBoundary, { title: "An error occurred while rendering this CoValue", children: /* @__PURE__ */ jsx36(
       Page,
       {
         coId: page.coId,
@@ -2691,10 +3361,10 @@ function PageStack({
 }
 
 // src/inspector/viewer/use-page-path.ts
-import { useCallback, useEffect as useEffect8, useState as useState10 } from "react";
+import { useCallback, useEffect as useEffect8, useState as useState13 } from "react";
 var STORAGE_KEY = "jazz-inspector-paths";
 function usePagePath(defaultPath) {
-  const [path, setPath] = useState10(() => {
+  const [path, setPath] = useState13(() => {
     if (typeof window === "undefined") return [];
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored) {
@@ -2748,8 +3418,8 @@ function usePagePath(defaultPath) {
 }
 
 // src/inspector/ui/global-styles.tsx
-import { styled as styled21 } from "goober";
-var GlobalStyles = styled21("div")`
+import { styled as styled24 } from "goober";
+var GlobalStyles = styled24("div")`
   /* Colors */
   --j-primary-color: #146AFF;
   --j-link-color: var(--j-primary-color);
@@ -2823,9 +3493,9 @@ var GlobalStyles = styled21("div")`
 `;
 
 // src/inspector/viewer/inspector-button.tsx
-import { styled as styled22 } from "goober";
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
-var StyledInspectorButton = styled22("button")`
+import { styled as styled25 } from "goober";
+import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
+var StyledInspectorButton = styled25("button")`
   position: fixed;
   width: 2.5rem;
   height: 2.5rem;
@@ -2856,7 +3526,7 @@ var StyledInspectorButton = styled22("button")`
   }
 }}
 `;
-var JazzIcon = styled22("svg")`
+var JazzIcon = styled25("svg")`
   width: 100%;
   height: auto;
   position: relative;
@@ -2867,8 +3537,8 @@ function InspectorButton({
   position = "right",
   ...buttonProps
 }) {
-  return /* @__PURE__ */ jsxs22(StyledInspectorButton, { position, ...buttonProps, children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs25(StyledInspectorButton, { position, ...buttonProps, children: [
+    /* @__PURE__ */ jsx37(
       JazzIcon,
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -2876,7 +3546,7 @@ function InspectorButton({
         height: "115",
         viewBox: "0 0 119 115",
         fill: "none",
-        children: /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx37(
           "path",
           {
             fillRule: "evenodd",
@@ -2887,7 +3557,7 @@ function InspectorButton({
         )
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx37(
       "span",
       {
         style: {
@@ -2908,10 +3578,10 @@ function InspectorButton({
 }
 
 // src/inspector/viewer/use-open-inspector.ts
-import { useEffect as useEffect9, useState as useState11 } from "react";
+import { useEffect as useEffect9, useState as useState14 } from "react";
 var STORAGE_KEY2 = "jazz-inspector-open";
 function useOpenInspector() {
-  const [open, setOpen] = useState11(() => {
+  const [open, setOpen] = useState14(() => {
     if (typeof window === "undefined") return false;
     const stored = localStorage.getItem(STORAGE_KEY2);
     return stored ? JSON.parse(stored) : false;
@@ -2923,15 +3593,15 @@ function useOpenInspector() {
 }
 
 // src/inspector/viewer/delete-local-data.tsx
-import { useState as useState12 } from "react";
-import { Fragment as Fragment13, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
 var DELETE_LOCAL_DATA_STRING = "delete my local data";
 function DeleteLocalData() {
-  const [showDeleteModal, setShowDeleteModal] = useState12(false);
-  const [confirmDeleteString, setConfirmDeleteString] = useState12("");
-  return /* @__PURE__ */ jsxs23(Fragment13, { children: [
-    /* @__PURE__ */ jsx33(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
-    /* @__PURE__ */ jsxs23(
+  const [showDeleteModal, setShowDeleteModal] = useState15(false);
+  const [confirmDeleteString, setConfirmDeleteString] = useState15("");
+  return /* @__PURE__ */ jsxs26(Fragment14, { children: [
+    /* @__PURE__ */ jsx38(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
+    /* @__PURE__ */ jsxs26(
       Modal,
       {
         isOpen: showDeleteModal,
@@ -2939,7 +3609,7 @@ function DeleteLocalData() {
         heading: "Delete Local Data",
         showButtons: false,
         children: [
-          /* @__PURE__ */ jsxs23(
+          /* @__PURE__ */ jsxs26(
             "div",
             {
               style: {
@@ -2950,33 +3620,33 @@ function DeleteLocalData() {
                 gap: "0.5rem"
               },
               children: [
-                /* @__PURE__ */ jsxs23("p", { children: [
+                /* @__PURE__ */ jsxs26("p", { children: [
                   "This action ",
-                  /* @__PURE__ */ jsx33("strong", { children: "cannot" }),
+                  /* @__PURE__ */ jsx38("strong", { children: "cannot" }),
                   " be undone."
                 ] }),
-                /* @__PURE__ */ jsxs23("p", { children: [
+                /* @__PURE__ */ jsxs26("p", { children: [
                   "Be aware that the following data will be",
                   " ",
-                  /* @__PURE__ */ jsx33("strong", { children: "permanently" }),
+                  /* @__PURE__ */ jsx38("strong", { children: "permanently" }),
                   " deleted:"
                 ] }),
-                /* @__PURE__ */ jsxs23("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
-                  /* @__PURE__ */ jsxs23("li", { children: [
+                /* @__PURE__ */ jsxs26("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
+                  /* @__PURE__ */ jsxs26("li", { children: [
                     "Unsynced data for ",
-                    /* @__PURE__ */ jsx33("strong", { children: "all apps" }),
+                    /* @__PURE__ */ jsx38("strong", { children: "all apps" }),
                     " on",
                     " ",
-                    /* @__PURE__ */ jsx33("code", { children: window.location.origin })
+                    /* @__PURE__ */ jsx38("code", { children: window.location.origin })
                   ] }),
-                  /* @__PURE__ */ jsx33("li", { children: "Accounts" }),
-                  /* @__PURE__ */ jsx33("li", { children: "Logged in sessions" })
+                  /* @__PURE__ */ jsx38("li", { children: "Accounts" }),
+                  /* @__PURE__ */ jsx38("li", { children: "Logged in sessions" })
                 ] }),
-                /* @__PURE__ */ jsx33("p", {})
+                /* @__PURE__ */ jsx38("p", {})
               ]
             }
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx38(
             Input,
             {
               label: `Type "${DELETE_LOCAL_DATA_STRING}" to confirm`,
@@ -2987,7 +3657,7 @@ function DeleteLocalData() {
               }
             }
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx38(
             "p",
             {
               style: {
@@ -2997,14 +3667,14 @@ function DeleteLocalData() {
                 flexDirection: "column",
                 gap: "0.5rem"
               },
-              children: /* @__PURE__ */ jsxs23("small", { children: [
+              children: /* @__PURE__ */ jsxs26("small", { children: [
                 "Data synced to a sync server will ",
-                /* @__PURE__ */ jsx33("strong", { children: "not" }),
+                /* @__PURE__ */ jsx38("strong", { children: "not" }),
                 " be deleted, and will be synced when you log in again."
               ] })
             }
           ),
-          /* @__PURE__ */ jsxs23(
+          /* @__PURE__ */ jsxs26(
             "div",
             {
               style: {
@@ -3014,8 +3684,8 @@ function DeleteLocalData() {
                 gap: "0.5rem"
               },
               children: [
-                /* @__PURE__ */ jsx33(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx38(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
+                /* @__PURE__ */ jsx38(
                   Button,
                   {
                     variant: "destructive",
@@ -3042,8 +3712,8 @@ function DeleteLocalData() {
 }
 
 // src/inspector/viewer/new-app.tsx
-import { Fragment as Fragment14, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
-var InspectorContainer = styled23("div")`
+import { Fragment as Fragment15, jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+var InspectorContainer = styled26("div")`
   position: fixed;
   height: 50vh;
   max-height: 800px;
@@ -3060,17 +3730,17 @@ var InspectorContainer = styled23("div")`
     background-color: var(--j-background);
   }
 `;
-var HeaderContainer2 = styled23("div")`
+var HeaderContainer2 = styled26("div")`
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0 0.75rem;
   margin: 0.75rem 0;
 `;
-var Form = styled23("form")`
+var Form = styled26("form")`
   width: 24rem;
 `;
-var InitialForm = styled23("form")`
+var InitialForm = styled26("form")`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -3082,7 +3752,7 @@ var InitialForm = styled23("form")`
   max-width: 24rem;
   margin: 0 auto;
 `;
-var OrText = styled23("p")`
+var OrText = styled26("p")`
   text-align: center;
 `;
 function JazzInspectorInternal({
@@ -3091,7 +3761,7 @@ function JazzInspectorInternal({
   accountId
 }) {
   const [open, setOpen] = useOpenInspector();
-  const [coValueId, setCoValueId] = useState13("");
+  const [coValueId, setCoValueId] = useState16("");
   const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
   const handleCoValueIdSubmit = (e) => {
     e.preventDefault();
@@ -3101,12 +3771,12 @@ function JazzInspectorInternal({
     setCoValueId("");
   };
   if (!open) {
-    return /* @__PURE__ */ jsx34(InspectorButton, { position, onClick: () => setOpen(true) });
+    return /* @__PURE__ */ jsx39(InspectorButton, { position, onClick: () => setOpen(true) });
   }
-  return /* @__PURE__ */ jsxs24(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
-    /* @__PURE__ */ jsxs24(HeaderContainer2, { children: [
-      /* @__PURE__ */ jsx34(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
-      path.length !== 0 && /* @__PURE__ */ jsx34(Form, { onSubmit: handleCoValueIdSubmit, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs27(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
+    /* @__PURE__ */ jsxs27(HeaderContainer2, { children: [
+      /* @__PURE__ */ jsx39(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
+      path.length !== 0 && /* @__PURE__ */ jsx39(Form, { onSubmit: handleCoValueIdSubmit, children: /* @__PURE__ */ jsx39(
         Input,
         {
           label: "CoValue ID",
@@ -3117,24 +3787,24 @@ function JazzInspectorInternal({
           onChange: (e) => setCoValueId(e.target.value)
         }
       ) }),
-      /* @__PURE__ */ jsx34(DeleteLocalData, {}),
-      /* @__PURE__ */ jsx34(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
+      /* @__PURE__ */ jsx39(DeleteLocalData, {}),
+      /* @__PURE__ */ jsx39(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
     ] }),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx39(
       PageStack,
       {
         path,
         node: localNode,
         goBack,
         addPages,
-        children: path.length <= 0 && /* @__PURE__ */ jsxs24(
+        children: path.length <= 0 && /* @__PURE__ */ jsxs27(
           InitialForm,
           {
             onSubmit: handleCoValueIdSubmit,
             "aria-hidden": path.length !== 0,
             children: [
-              /* @__PURE__ */ jsx34(Heading, { children: "Jazz CoValue Inspector" }),
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx39(Heading, { children: "Jazz CoValue Inspector" }),
+              /* @__PURE__ */ jsx39(
                 Input,
                 {
                   label: "CoValue ID",
@@ -3145,10 +3815,10 @@ function JazzInspectorInternal({
                   onChange: (e) => setCoValueId(e.target.value)
                 }
               ),
-              /* @__PURE__ */ jsx34(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
-              accountId && /* @__PURE__ */ jsxs24(Fragment14, { children: [
-                /* @__PURE__ */ jsx34(OrText, { children: "or" }),
-                /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx39(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
+              accountId && /* @__PURE__ */ jsxs27(Fragment15, { children: [
+                /* @__PURE__ */ jsx39(OrText, { children: "or" }),
+                /* @__PURE__ */ jsx39(
                   Button,
                   {
                     variant: "secondary",
@@ -3171,12 +3841,12 @@ function JazzInspectorInternal({
 // src/inspector/index.tsx
 import { setup } from "goober";
 import { useJazzContext } from "jazz-tools/react-core";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function JazzInspector({ position = "right" }) {
   const context = useJazzContext();
   const localNode = context.node;
   const me = "me" in context ? context.me : void 0;
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx40(
     JazzInspectorInternal,
     {
       position,