jazz-tools 0.19.2 → 0.19.4

package/dist/inspector/index.js

@@ -4,8 +4,8 @@
 import React8 from "react";
 
 // src/inspector/viewer/new-app.tsx
-import { styled as styled26 } from "goober";
-import { useState as useState16 } from "react";
+import { styled as styled27 } from "goober";
+import { useState as useState17 } 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 styled23 } from "goober";
+import { styled as styled24 } from "goober";
 
 // src/inspector/viewer/page.tsx
-import { styled as styled21 } from "goober";
+import { styled as styled22 } from "goober";
 import React5 from "react";
 
 // src/inspector/ui/badge.tsx
@@ -532,12 +532,6 @@ function RenderBlobImage({ blob }) {
 var isBrowserImage = (coValue) => {
   return "originalSize" in coValue && "placeholderDataURL" in coValue;
 };
-var isGroup = (coValue) => {
-  return "readKey" in coValue;
-};
-var isAccount = (coValue) => {
-  return isGroup(coValue) && "profile" in coValue;
-};
 async function resolveCoValue(coValueId, node) {
   const value = await node.load(coValueId);
   if (value === "unavailable") {
@@ -554,7 +548,7 @@ async function resolveCoValue(coValueId, node) {
   if (type === "comap") {
     if (isBrowserImage(snapshot)) {
       extendedType = "image";
-    } else if (isAccount(snapshot)) {
+    } else if (value.headerMeta?.type === "account") {
       extendedType = "account";
     } else if (value.core.isGroup()) {
       extendedType = "group";
@@ -583,7 +577,7 @@ function subscribeToCoValue(coValueId, node, callback) {
       if (type === "comap") {
         if (isBrowserImage(snapshot)) {
           extendedType = "image";
-        } else if (isAccount(snapshot)) {
+        } else if (value.headerMeta?.type === "account") {
           extendedType = "account";
         } else if (value.core.isGroup()) {
           extendedType = "group";
@@ -1428,6 +1422,11 @@ function Grid(props) {
   }
 }
 
+// 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 jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 function GridItem({
@@ -1502,7 +1501,7 @@ function GridItem({
         /* @__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 && /* @__PURE__ */ jsxs10(ActionButtons, { children: [
+      coValue && isWriter(coValue.group.myRole()) && /* @__PURE__ */ jsxs10(ActionButtons, { children: [
         /* @__PURE__ */ jsx22(
           EditButton,
           {
@@ -2054,17 +2053,90 @@ function AccountView({
 }
 
 // src/inspector/viewer/co-plain-text-view.tsx
+import { useState as useState10 } from "react";
+import { styled as styled18 } from "goober";
+import { CoPlainText } from "jazz-tools";
 import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
-function CoPlainTextView({ data }) {
+function CoPlainTextView({
+  data,
+  coValue
+}) {
+  const currentText = Object.values(data).join("");
+  const [isEditing, setIsEditing] = useState10(false);
+  const [editValue, setEditValue] = useState10("");
+  const canEdit2 = isWriter(coValue.group.myRole());
+  const handleEditClick = () => {
+    setIsEditing(true);
+    setEditValue(currentText);
+  };
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditValue(currentText);
+  };
+  const handleSave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const coPlainText = CoPlainText.fromRaw(coValue);
+    coPlainText.$jazz.applyDiff(editValue);
+    setIsEditing(false);
+  };
   if (!data) return;
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs16(Fragment7, { children: [
+      /* @__PURE__ */ jsxs16(EditForm2, { onSubmit: handleSave, children: [
+        /* @__PURE__ */ jsx29(
+          StyledTextarea2,
+          {
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onClick: (e) => e.stopPropagation()
+          }
+        ),
+        /* @__PURE__ */ jsxs16(FormActions2, { children: [
+          /* @__PURE__ */ jsx29(Button, { type: "button", variant: "secondary", onClick: handleCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx29(Button, { type: "submit", variant: "primary", children: "Save" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx29(RawDataCard, { data })
+    ] });
+  }
   return /* @__PURE__ */ jsxs16(Fragment7, { children: [
-    /* @__PURE__ */ jsx29("p", { children: Object.values(data).join("") }),
+    /* @__PURE__ */ jsx29("p", { children: currentText }),
+    /* @__PURE__ */ jsx29("div", { children: canEdit2 && /* @__PURE__ */ jsx29(Button, { variant: "secondary", onClick: handleEditClick, title: "Edit", children: /* @__PURE__ */ jsx29(Icon, { name: "edit" }) }) }),
     /* @__PURE__ */ jsx29(RawDataCard, { data })
   ] });
 }
+var EditForm2 = styled18("form")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+`;
+var StyledTextarea2 = styled18("textarea")`
+  width: 100%;
+  min-height: 120px;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem;
+  box-shadow: var(--j-shadow-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  background-color: white;
+  color: var(--j-text-color-strong);
+  resize: vertical;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+var FormActions2 = styled18("div")`
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+`;
 
 // src/inspector/viewer/group-view.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } 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]) => ({
@@ -2093,7 +2165,7 @@ function GroupView({
   onNavigate,
   node
 }) {
-  const [addMemberType, setAddMemberType] = useState10(null);
+  const [addMemberType, setAddMemberType] = useState11(null);
   const { everyone, members, parentGroups, childGroups } = partitionMembers(
     data
   );
@@ -2353,17 +2425,17 @@ function RoleDisplay({
 }
 
 // src/inspector/viewer/table-viewer.tsx
-import { styled as styled18 } from "goober";
-import { useMemo as useMemo2, useState as useState11 } from "react";
+import { styled as styled19 } from "goober";
+import { useMemo as useMemo2, useState as useState12 } from "react";
 import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
-var PaginationContainer = styled18("div")`
+var PaginationContainer = styled19("div")`
   padding: 1rem 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 `;
-var RedTooltip = styled18("span")`
+var RedTooltip = 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 */
 
@@ -2400,7 +2472,7 @@ function CoValuesTableView({
   onNavigate,
   onRemove
 }) {
-  const [visibleRowsCount, setVisibleRowsCount] = useState11(10);
+  const [visibleRowsCount, setVisibleRowsCount] = useState12(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);
@@ -2528,7 +2600,7 @@ function TableView({
 
 // src/inspector/viewer/history-view.tsx
 import { useMemo as useMemo3 } from "react";
-import { styled as styled19 } from "goober";
+import { styled as styled20 } from "goober";
 
 // src/inspector/utils/transactions-changes.ts
 var isGroupExtension = (change) => {
@@ -2571,6 +2643,140 @@ var isStreamEnd = (change) => {
   return change?.type === "end";
 };
 
+// src/inspector/utils/history.ts
+import { stringifyOpID } from "cojson";
+function areSameOpIds(opId1, opId2) {
+  if (typeof opId1 === "string" || typeof opId2 === "string") {
+    return opId1 === opId2;
+  }
+  return opId1.sessionID === opId2.sessionID && opId1.txIndex === opId2.txIndex && opId1.changeIdx === opId2.changeIdx;
+}
+function isCoPlainText(coValue) {
+  return coValue.type === "coplaintext";
+}
+function getTransactionChanges(tx, coValue) {
+  if (tx.isValid === false && tx.tx.privacy === "private") {
+    const readKey = coValue.core.getReadKey(tx.tx.keyUsed);
+    if (!readKey) {
+      return [
+        `Unable to decrypt transaction: read key ${tx.tx.keyUsed} not found.`
+      ];
+    }
+    return coValue.core.verified.decryptTransaction(
+      tx.txID.sessionID,
+      tx.txID.txIndex,
+      readKey
+    ) ?? [];
+  }
+  if (isCoPlainText(coValue)) {
+    if (tx.changes === void 0 || tx.changes.length === 0) return [];
+    const firstChange = tx.changes[0];
+    if (isItemAppend(firstChange) && tx.changes.every(
+      (c) => isItemAppend(c) && areSameOpIds(c.after, firstChange.after)
+    )) {
+      const changes = tx.changes;
+      if (firstChange.after !== "start") {
+        changes.reverse();
+      }
+      return [
+        {
+          op: "app",
+          value: changes.map((c) => c.value).join(""),
+          after: firstChange.after
+        }
+      ];
+    }
+    if (isItemPrepend(firstChange) && tx.changes.every(
+      (c) => isItemPrepend(c) && areSameOpIds(c.before, firstChange.before)
+    )) {
+      const changes = tx.changes;
+      if (firstChange.before !== "end") {
+        changes.reverse();
+      }
+      return [
+        {
+          op: "pre",
+          value: changes.map((c) => c.value).join(""),
+          before: firstChange.before
+        }
+      ];
+    }
+    if (isItemDeletion(firstChange) && tx.changes.every((c) => isItemDeletion(c))) {
+      let changesAreConsecutive2 = function(changes) {
+        if (changes.length < 2) return false;
+        const mapping = coValueBeforeDeletions.mapping.idxAfterOpID;
+        for (let i = 1; i < changes.length; ++i) {
+          const prevIdx = mapping[stringifyOpID(changes[i - 1].insertion)];
+          const currIdx = mapping[stringifyOpID(changes[i].insertion)];
+          if (currIdx !== prevIdx && currIdx !== (prevIdx ?? -2) + 1) {
+            return false;
+          }
+        }
+        return true;
+      };
+      var changesAreConsecutive = changesAreConsecutive2;
+      const coValueBeforeDeletions = coValue.atTime(tx.madeAt - 1);
+      if (changesAreConsecutive2(tx.changes)) {
+        const groupedBySession = /* @__PURE__ */ new Map();
+        for (const change of tx.changes) {
+          const group = `${change.insertion.sessionID}-${change.insertion.txIndex}`;
+          if (!groupedBySession.has(group)) groupedBySession.set(group, []);
+          groupedBySession.get(group).push(change);
+        }
+        return Array.from(groupedBySession.values()).map((changes) => {
+          const stringDeleted = changes.toSorted((a, b) => {
+            if (a.insertion.txIndex === b.insertion.txIndex) {
+              return a.insertion.changeIdx - b.insertion.changeIdx;
+            }
+            return a.insertion.txIndex - b.insertion.txIndex;
+          }).map(
+            (c) => coValueBeforeDeletions.get(
+              coValueBeforeDeletions.mapping.idxAfterOpID[stringifyOpID(c.insertion)]
+            )
+          ).join("");
+          return {
+            op: "custom",
+            action: `"${stringDeleted}" has been deleted`
+          };
+        });
+      }
+    }
+  }
+  return tx.changes ?? tx.tx.changes ?? [];
+}
+function restoreCoMapToTimestamp(coValue, timestamp, removeUnknownProperties) {
+  const myRole = coValue.group.myRole();
+  if (myRole === void 0 || !["admin", "manager", "writer", "writerOnly"].includes(myRole)) {
+    return;
+  }
+  const newCoValue = coValue.atTime(timestamp).toJSON();
+  const oldCoValue = coValue.toJSON();
+  if (newCoValue === null) return;
+  let changes = [];
+  if (removeUnknownProperties) {
+    for (const key in oldCoValue) {
+      if (!(key in newCoValue)) {
+        changes.push({
+          op: "del",
+          key
+        });
+      }
+    }
+  }
+  for (const key in newCoValue) {
+    if (newCoValue[key] !== oldCoValue[key]) {
+      changes.push({
+        op: "set",
+        key,
+        value: newCoValue[key]
+      });
+    }
+  }
+  if (changes.length > 0) {
+    coValue.core.makeTransaction(changes, "private");
+  }
+}
+
 // src/inspector/viewer/history-view.tsx
 import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 function HistoryView({
@@ -2651,20 +2857,6 @@ function HistoryView({
     }
   ) });
 }
-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 coValue.core.verified.decryptTransaction(
-      tx.txID.sessionID,
-      tx.txID.txIndex,
-      readKey
-    ) ?? [];
-  }
-  return tx.changes ?? tx.tx.changes ?? [];
-}
 function getHistory(coValue) {
   return coValue.core.verifiedTransactions.flatMap((tx, index) => {
     const changes = getTransactionChanges(tx, coValue);
@@ -2743,6 +2935,9 @@ function mapTransactionToAction(change, coValue) {
   if (isPropertyDeletion(change)) {
     return `Property "${change.key}" has been deleted`;
   }
+  if (change.op === "custom") {
+    return change.action;
+  }
   return "Unknown action: " + JSON.stringify(change);
 }
 var findListChange = (opId, coValue) => {
@@ -2750,7 +2945,7 @@ var findListChange = (opId, coValue) => {
     (tx) => tx.txID.sessionID === opId.sessionID && tx.txID.txIndex === opId.txIndex
   )?.changes?.[opId.changeIdx];
 };
-var RedTooltip2 = styled19("span")`
+var RedTooltip2 = styled20("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 */
 
@@ -2783,44 +2978,8 @@ var RedTooltip2 = styled19("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 { useState as useState13, useMemo as useMemo4 } from "react";
+import { styled as styled21 } from "goober";
 import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 function CoMapView({
   coValue,
@@ -2839,7 +2998,14 @@ function CoMapView({
       }
     ),
     /* @__PURE__ */ jsxs21("div", { children: [
-      /* @__PURE__ */ jsx33(AddPropertyModal, { coValue, node }),
+      /* @__PURE__ */ jsx33(
+        AddPropertyModal,
+        {
+          disabled: !isWriter(coValue.group.myRole()),
+          coValue,
+          node
+        }
+      ),
       " ",
       /* @__PURE__ */ jsx33(RestoreSnapshotModal, { coValue })
     ] })
@@ -2847,10 +3013,11 @@ function CoMapView({
 }
 function AddPropertyModal({
   coValue,
-  node
+  node,
+  disabled
 }) {
-  const [isAddPropertyModalOpen, setIsAddPropertyModalOpen] = useState12(false);
-  const [propertyName, setPropertyName] = useState12("");
+  const [isAddPropertyModalOpen, setIsAddPropertyModalOpen] = useState13(false);
+  const [propertyName, setPropertyName] = useState13("");
   const openAddPropertyModal = () => {
     setIsAddPropertyModalOpen(true);
     setPropertyName("");
@@ -2865,8 +3032,9 @@ function AddPropertyModal({
       {
         title: "Add Property",
         variant: "secondary",
+        disabled,
         onClick: openAddPropertyModal,
-        children: /* @__PURE__ */ jsx33(Icon, { name: "edit" })
+        children: /* @__PURE__ */ jsx33(Icon, { name: "add" })
       }
     ),
     /* @__PURE__ */ jsxs21(
@@ -2902,9 +3070,9 @@ function AddPropertyModal({
   ] });
 }
 function RestoreSnapshotModal({ coValue }) {
-  const [isRestoreModalOpen, setIsRestoreModalOpen] = useState12(false);
-  const [selectedIndex, setSelectedIndex] = useState12(-1);
-  const [removeUnknownProperties, setRemoveUnknownProperties] = useState12(false);
+  const [isRestoreModalOpen, setIsRestoreModalOpen] = useState13(false);
+  const [selectedIndex, setSelectedIndex] = useState13(-1);
+  const [removeUnknownProperties, setRemoveUnknownProperties] = useState13(false);
   const timestamps = useMemo4(
     () => coValue.core.verifiedTransactions.map((tx) => tx.madeAt),
     [coValue.core.verifiedTransactions.length]
@@ -2932,6 +3100,7 @@ function RestoreSnapshotModal({ coValue }) {
   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(
@@ -2944,7 +3113,7 @@ function RestoreSnapshotModal({ coValue }) {
         cancelText: "Cancel",
         onConfirm: handleRestore,
         onCancel: handleClose,
-        showButtons: timestamps.length > 1,
+        showButtons: timestamps.length > 1 && canRestore,
         children: [
           timestamps.length > 1 && /* @__PURE__ */ jsxs21(Fragment11, { children: [
             /* @__PURE__ */ jsxs21(RangeContainer, { children: [
@@ -2962,7 +3131,7 @@ function RestoreSnapshotModal({ coValue }) {
               ),
               /* @__PURE__ */ jsx33(TimestampDisplay, { children: timestamps[selectedIndex] !== void 0 ? new Date(timestamps[selectedIndex]).toISOString() : "No timestamps available" })
             ] }),
-            /* @__PURE__ */ jsxs21(CheckboxContainer, { children: [
+            canRestore && /* @__PURE__ */ jsxs21(CheckboxContainer, { children: [
               /* @__PURE__ */ jsx33(
                 CheckboxInput,
                 {
@@ -2985,15 +3154,15 @@ function RestoreSnapshotModal({ coValue }) {
     )
   ] });
 }
-var PreviewSection = styled20("div")`
+var PreviewSection = styled21("div")`
   margin-top: 1.5rem;
 `;
-var PreviewLabel = styled20("div")`
+var PreviewLabel = styled21("div")`
   font-weight: 500;
   margin-bottom: 0.5rem;
   color: var(--j-text-color-strong);
 `;
-var PreviewPre = styled20("pre")`
+var PreviewPre = styled21("pre")`
   background-color: var(--j-foreground);
   border: 1px solid var(--j-border-color);
   border-radius: var(--j-radius-md);
@@ -3005,17 +3174,17 @@ var PreviewPre = styled20("pre")`
   color: var(--j-text-color);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 `;
-var RangeContainer = styled20("div")`
+var RangeContainer = styled21("div")`
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 `;
-var RangeLabel = styled20("label")`
+var RangeLabel = styled21("label")`
   font-weight: 500;
   color: var(--j-text-color-strong);
   font-size: 0.875rem;
 `;
-var RangeInput = styled20("input")`
+var RangeInput = styled21("input")`
   width: 100%;
   height: 0.5rem;
   border-radius: var(--j-radius-sm);
@@ -3052,7 +3221,7 @@ var RangeInput = styled20("input")`
     cursor: not-allowed;
   }
 `;
-var TimestampDisplay = styled20("div")`
+var TimestampDisplay = styled21("div")`
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 0.875rem;
   color: var(--j-text-color);
@@ -3062,26 +3231,26 @@ var TimestampDisplay = styled20("div")`
   border-radius: var(--j-radius-md);
   text-align: center;
 `;
-var CheckboxContainer = styled20("div")`
+var CheckboxContainer = styled21("div")`
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
   margin-top: 1rem;
 `;
-var CheckboxInput = styled20("input")`
+var CheckboxInput = styled21("input")`
   width: 1rem;
   height: 1rem;
   margin-top: 0.125rem;
   cursor: pointer;
   accent-color: var(--j-primary-color);
 `;
-var CheckboxLabel = styled20("label")`
+var CheckboxLabel = styled21("label")`
   font-size: 0.875rem;
   color: var(--j-text-color);
   cursor: pointer;
   line-height: 1.25rem;
 `;
-var EditorContainer = styled20("div")`
+var EditorContainer = styled21("div")`
   margin-top: 1rem;
 `;
 
@@ -3090,7 +3259,7 @@ import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs22 } from "react/jsx-
 var BasePageContainer = React5.forwardRef(
   ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ jsx34("div", { ref, ...rest })
 );
-var PageContainer = styled21(BasePageContainer)`
+var PageContainer = styled22(BasePageContainer)`
   position: absolute;
   z-index: 10;
   inset: 0;
@@ -3098,36 +3267,36 @@ var PageContainer = styled21(BasePageContainer)`
   height: 100%;
   padding: 0 0.75rem;
 `;
-var BackButton = styled21("div")`
+var BackButton = styled22("div")`
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 2.5rem;
 `;
-var HeaderContainer = styled21("div")`
+var HeaderContainer = styled22("div")`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
 `;
-var TitleContainer = styled21("div")`
+var TitleContainer = styled22("div")`
   display: flex;
   align-items: center;
   gap: 0.75rem;
 `;
-var Title = styled21(Heading)`
+var Title = styled22(Heading)`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.25rem;
 `;
-var BadgeContainer = styled21("div")`
+var BadgeContainer = styled22("div")`
   display: flex;
   align-items: center;
   gap: 0.75rem;
 `;
-var ContentContainer = styled21("div")`
+var ContentContainer = styled22("div")`
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -3173,7 +3342,14 @@ function View(props) {
     return /* @__PURE__ */ jsx34(AccountView, { data: snapshot, node, onNavigate });
   }
   if (type === "coplaintext") {
-    return /* @__PURE__ */ jsx34(CoPlainTextView, { data: snapshot });
+    return /* @__PURE__ */ jsx34(
+      CoPlainTextView,
+      {
+        data: snapshot,
+        coValue: value,
+        node
+      }
+    );
   }
   if (type === "colist") {
     const handleRemove = (index) => {
@@ -3278,7 +3454,7 @@ function Page(props) {
 
 // src/inspector/ui/error-boundary.tsx
 import React6 from "react";
-import { styled as styled22 } from "goober";
+import { styled as styled23 } from "goober";
 import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 var ErrorBoundary = class extends React6.Component {
   constructor(props) {
@@ -3302,7 +3478,7 @@ var ErrorBoundary = class extends React6.Component {
     return this.props.children;
   }
 };
-var StyledHeading2 = styled22("h1")`
+var StyledHeading2 = styled23("h1")`
   font-size: 1.125rem;
   font-weight: 500;
   color: var(--j-text-color-strong);
@@ -3310,7 +3486,7 @@ var StyledHeading2 = styled22("h1")`
 
 // src/inspector/viewer/page-stack.tsx
 import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
-var PageStackContainer = styled23("div")`
+var PageStackContainer = styled24("div")`
   position: relative;
   padding: 0 0.75rem;
   overflow-y: auto;
@@ -3344,10 +3520,10 @@ function PageStack({
 }
 
 // src/inspector/viewer/use-page-path.ts
-import { useCallback, useEffect as useEffect8, useState as useState13 } from "react";
+import { useCallback, useEffect as useEffect8, useState as useState14 } from "react";
 var STORAGE_KEY = "jazz-inspector-paths";
 function usePagePath(defaultPath) {
-  const [path, setPath] = useState13(() => {
+  const [path, setPath] = useState14(() => {
     if (typeof window === "undefined") return [];
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored) {
@@ -3401,8 +3577,8 @@ function usePagePath(defaultPath) {
 }
 
 // src/inspector/ui/global-styles.tsx
-import { styled as styled24 } from "goober";
-var GlobalStyles = styled24("div")`
+import { styled as styled25 } from "goober";
+var GlobalStyles = styled25("div")`
   /* Colors */
   --j-primary-color: #146AFF;
   --j-link-color: var(--j-primary-color);
@@ -3476,9 +3652,9 @@ var GlobalStyles = styled24("div")`
 `;
 
 // src/inspector/viewer/inspector-button.tsx
-import { styled as styled25 } from "goober";
+import { styled as styled26 } from "goober";
 import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
-var StyledInspectorButton = styled25("button")`
+var StyledInspectorButton = styled26("button")`
   position: fixed;
   width: 2.5rem;
   height: 2.5rem;
@@ -3509,7 +3685,7 @@ var StyledInspectorButton = styled25("button")`
   }
 }}
 `;
-var JazzIcon = styled25("svg")`
+var JazzIcon = styled26("svg")`
   width: 100%;
   height: auto;
   position: relative;
@@ -3561,10 +3737,10 @@ function InspectorButton({
 }
 
 // src/inspector/viewer/use-open-inspector.ts
-import { useEffect as useEffect9, useState as useState14 } from "react";
+import { useEffect as useEffect9, useState as useState15 } from "react";
 var STORAGE_KEY2 = "jazz-inspector-open";
 function useOpenInspector() {
-  const [open, setOpen] = useState14(() => {
+  const [open, setOpen] = useState15(() => {
     if (typeof window === "undefined") return false;
     const stored = localStorage.getItem(STORAGE_KEY2);
     return stored ? JSON.parse(stored) : false;
@@ -3576,12 +3752,12 @@ function useOpenInspector() {
 }
 
 // src/inspector/viewer/delete-local-data.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } 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] = useState15(false);
-  const [confirmDeleteString, setConfirmDeleteString] = useState15("");
+  const [showDeleteModal, setShowDeleteModal] = useState16(false);
+  const [confirmDeleteString, setConfirmDeleteString] = useState16("");
   return /* @__PURE__ */ jsxs26(Fragment14, { children: [
     /* @__PURE__ */ jsx38(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
     /* @__PURE__ */ jsxs26(
@@ -3696,7 +3872,7 @@ function DeleteLocalData() {
 
 // src/inspector/viewer/new-app.tsx
 import { Fragment as Fragment15, jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
-var InspectorContainer = styled26("div")`
+var InspectorContainer = styled27("div")`
   position: fixed;
   height: 50vh;
   max-height: 800px;
@@ -3713,17 +3889,17 @@ var InspectorContainer = styled26("div")`
     background-color: var(--j-background);
   }
 `;
-var HeaderContainer2 = styled26("div")`
+var HeaderContainer2 = styled27("div")`
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0 0.75rem;
   margin: 0.75rem 0;
 `;
-var Form = styled26("form")`
+var Form = styled27("form")`
   width: 24rem;
 `;
-var InitialForm = styled26("form")`
+var InitialForm = styled27("form")`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -3735,7 +3911,7 @@ var InitialForm = styled26("form")`
   max-width: 24rem;
   margin: 0 auto;
 `;
-var OrText = styled26("p")`
+var OrText = styled27("p")`
   text-align: center;
 `;
 function JazzInspectorInternal({
@@ -3744,7 +3920,7 @@ function JazzInspectorInternal({
   accountId
 }) {
   const [open, setOpen] = useOpenInspector();
-  const [coValueId, setCoValueId] = useState16("");
+  const [coValueId, setCoValueId] = useState17("");
   const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
   const handleCoValueIdSubmit = (e) => {
     e.preventDefault();