jazz-tools 0.19.2 → 0.19.4

package/dist/inspector/{custom-element-ABVPHX53.js → custom-element-P76EIWEV.js}

@@ -31782,14 +31782,14 @@ var require_jsx_runtime = __commonJS({
 });
 
 // src/inspector/custom-element.tsx
-var import_react27 = __toESM(require_react(), 1);
+var import_react28 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 import { setup } from "goober";
 import { Account } from "jazz-tools";
 
 // src/inspector/viewer/new-app.tsx
-var import_react26 = __toESM(require_react(), 1);
-import { styled as styled26 } from "goober";
+var import_react27 = __toESM(require_react(), 1);
+import { styled as styled27 } from "goober";
 
 // src/inspector/ui/button.tsx
 var import_react = __toESM(require_react(), 1);
@@ -31964,11 +31964,11 @@ 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
-var import_react21 = __toESM(require_react(), 1);
-import { styled as styled21 } from "goober";
+var import_react22 = __toESM(require_react(), 1);
+import { styled as styled22 } from "goober";
 
 // src/inspector/ui/badge.tsx
 var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
@@ -32316,12 +32316,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") {
@@ -32338,7 +32332,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";
@@ -32367,7 +32361,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";
@@ -33212,6 +33206,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
 var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
 function GridItem({
@@ -33286,7 +33285,7 @@ function GridItem({
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { strong: true, children: key }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Badge, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ResolveIcon, { coId: value, node }) })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { strong: true, children: key }) }),
-      coValue && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ActionButtons, { children: [
+      coValue && isWriter(coValue.group.myRole()) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ActionButtons, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           EditButton,
           {
@@ -33838,17 +33837,90 @@ function AccountView({
 }
 
 // src/inspector/viewer/co-plain-text-view.tsx
+var import_react17 = __toESM(require_react(), 1);
+import { styled as styled18 } from "goober";
+import { CoPlainText } from "jazz-tools";
 var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
-function CoPlainTextView({ data }) {
+function CoPlainTextView({
+  data,
+  coValue
+}) {
+  const currentText = Object.values(data).join("");
+  const [isEditing, setIsEditing] = (0, import_react17.useState)(false);
+  const [editValue, setEditValue] = (0, import_react17.useState)("");
+  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__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(EditForm2, { onSubmit: handleSave, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          StyledTextarea2,
+          {
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onClick: (e) => e.stopPropagation()
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(FormActions2, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { type: "button", variant: "secondary", onClick: handleCancel, children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { type: "submit", variant: "primary", children: "Save" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RawDataCard, { data })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { children: Object.values(data).join("") }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { children: currentText }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: canEdit2 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { variant: "secondary", onClick: handleEditClick, title: "Edit", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "edit" }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(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
-var import_react17 = __toESM(require_react(), 1);
+var import_react18 = __toESM(require_react(), 1);
 var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
 function partitionMembers(data) {
   const everyone = Object.entries(data).filter(([key]) => key === "everyone").map(([key, value]) => ({
@@ -33877,7 +33949,7 @@ function GroupView({
   onNavigate,
   node
 }) {
-  const [addMemberType, setAddMemberType] = (0, import_react17.useState)(null);
+  const [addMemberType, setAddMemberType] = (0, import_react18.useState)(null);
   const { everyone, members, parentGroups, childGroups } = partitionMembers(
     data
   );
@@ -34137,17 +34209,17 @@ function RoleDisplay({
 }
 
 // src/inspector/viewer/table-viewer.tsx
-var import_react18 = __toESM(require_react(), 1);
-import { styled as styled18 } from "goober";
+var import_react19 = __toESM(require_react(), 1);
+import { styled as styled19 } from "goober";
 var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
-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 */
 
@@ -34184,8 +34256,8 @@ function CoValuesTableView({
   onNavigate,
   onRemove
 }) {
-  const [visibleRowsCount, setVisibleRowsCount] = (0, import_react18.useState)(10);
-  const [coIdArray, visibleRows] = (0, import_react18.useMemo)(() => {
+  const [visibleRowsCount, setVisibleRowsCount] = (0, import_react19.useState)(10);
+  const [coIdArray, visibleRows] = (0, import_react19.useMemo)(() => {
     const coIdArray2 = Array.isArray(data) ? data : Object.values(data).every((k) => typeof k === "string" && isCoId(k)) ? Object.values(data).map((k) => k) : [];
     const visibleRows2 = coIdArray2.slice(0, visibleRowsCount);
     return [coIdArray2, visibleRows2];
@@ -34282,7 +34354,7 @@ function TableView({
   onNavigate,
   onRemove
 }) {
-  const isListOfCoValues = (0, import_react18.useMemo)(() => {
+  const isListOfCoValues = (0, import_react19.useMemo)(() => {
     return Array.isArray(data) && data.every((k) => isCoId(k));
   }, [data]);
   if (isListOfCoValues) {
@@ -34311,8 +34383,8 @@ function TableView({
 }
 
 // src/inspector/viewer/history-view.tsx
-var import_react19 = __toESM(require_react(), 1);
-import { styled as styled19 } from "goober";
+var import_react20 = __toESM(require_react(), 1);
+import { styled as styled20 } from "goober";
 
 // src/inspector/utils/transactions-changes.ts
 var isGroupExtension = (change) => {
@@ -34355,13 +34427,147 @@ 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
 var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
 function HistoryView({
   coValue,
   node
 }) {
-  const transactions = (0, import_react19.useMemo)(
+  const transactions = (0, import_react20.useMemo)(
     () => getHistory(coValue),
     [coValue.core.verifiedTransactions.length]
   );
@@ -34435,20 +34641,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);
@@ -34527,6 +34719,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) => {
@@ -34534,7 +34729,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 */
 
@@ -34567,44 +34762,8 @@ var RedTooltip2 = styled19("span")`
 `;
 
 // src/inspector/viewer/co-map-view.tsx
-var import_react20 = __toESM(require_react(), 1);
-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
+var import_react21 = __toESM(require_react(), 1);
+import { styled as styled21 } from "goober";
 var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
 function CoMapView({
   coValue,
@@ -34623,7 +34782,14 @@ function CoMapView({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AddPropertyModal, { coValue, node }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        AddPropertyModal,
+        {
+          disabled: !isWriter(coValue.group.myRole()),
+          coValue,
+          node
+        }
+      ),
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RestoreSnapshotModal, { coValue })
     ] })
@@ -34631,10 +34797,11 @@ function CoMapView({
 }
 function AddPropertyModal({
   coValue,
-  node
+  node,
+  disabled
 }) {
-  const [isAddPropertyModalOpen, setIsAddPropertyModalOpen] = (0, import_react20.useState)(false);
-  const [propertyName, setPropertyName] = (0, import_react20.useState)("");
+  const [isAddPropertyModalOpen, setIsAddPropertyModalOpen] = (0, import_react21.useState)(false);
+  const [propertyName, setPropertyName] = (0, import_react21.useState)("");
   const openAddPropertyModal = () => {
     setIsAddPropertyModalOpen(true);
     setPropertyName("");
@@ -34649,8 +34816,9 @@ function AddPropertyModal({
       {
         title: "Add Property",
         variant: "secondary",
+        disabled,
         onClick: openAddPropertyModal,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "edit" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "add" })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
@@ -34686,14 +34854,14 @@ function AddPropertyModal({
   ] });
 }
 function RestoreSnapshotModal({ coValue }) {
-  const [isRestoreModalOpen, setIsRestoreModalOpen] = (0, import_react20.useState)(false);
-  const [selectedIndex, setSelectedIndex] = (0, import_react20.useState)(-1);
-  const [removeUnknownProperties, setRemoveUnknownProperties] = (0, import_react20.useState)(false);
-  const timestamps = (0, import_react20.useMemo)(
+  const [isRestoreModalOpen, setIsRestoreModalOpen] = (0, import_react21.useState)(false);
+  const [selectedIndex, setSelectedIndex] = (0, import_react21.useState)(-1);
+  const [removeUnknownProperties, setRemoveUnknownProperties] = (0, import_react21.useState)(false);
+  const timestamps = (0, import_react21.useMemo)(
     () => coValue.core.verifiedTransactions.map((tx) => tx.madeAt),
     [coValue.core.verifiedTransactions.length]
   );
-  const coMapAtSelectedIndex = (0, import_react20.useMemo)(() => {
+  const coMapAtSelectedIndex = (0, import_react21.useMemo)(() => {
     if (selectedIndex === -1) return null;
     return coValue.atTime(timestamps[selectedIndex]).toJSON();
   }, [coValue, timestamps, selectedIndex]);
@@ -34716,6 +34884,7 @@ function RestoreSnapshotModal({ coValue }) {
   const handleClose = () => {
     setIsRestoreModalOpen(false);
   };
+  const canRestore = isWriter(coValue.group.myRole());
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { title: "Timeline", variant: "secondary", onClick: openRestoreModal, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "history" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
@@ -34728,7 +34897,7 @@ function RestoreSnapshotModal({ coValue }) {
         cancelText: "Cancel",
         onConfirm: handleRestore,
         onCancel: handleClose,
-        showButtons: timestamps.length > 1,
+        showButtons: timestamps.length > 1 && canRestore,
         children: [
           timestamps.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(RangeContainer, { children: [
@@ -34746,7 +34915,7 @@ function RestoreSnapshotModal({ coValue }) {
               ),
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TimestampDisplay, { children: timestamps[selectedIndex] !== void 0 ? new Date(timestamps[selectedIndex]).toISOString() : "No timestamps available" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(CheckboxContainer, { children: [
+            canRestore && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(CheckboxContainer, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 CheckboxInput,
                 {
@@ -34769,15 +34938,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);
@@ -34789,17 +34958,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);
@@ -34836,7 +35005,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);
@@ -34846,35 +35015,35 @@ 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;
 `;
 
 // src/inspector/viewer/page.tsx
 var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
-var BasePageContainer = import_react21.default.forwardRef(
+var BasePageContainer = import_react22.default.forwardRef(
   ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref, ...rest })
 );
-var PageContainer = styled21(BasePageContainer)`
+var PageContainer = styled22(BasePageContainer)`
   position: absolute;
   z-index: 10;
   inset: 0;
@@ -34882,36 +35051,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;
@@ -34957,7 +35126,14 @@ function View(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AccountView, { data: snapshot, node, onNavigate });
   }
   if (type === "coplaintext") {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CoPlainTextView, { data: snapshot });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CoPlainTextView,
+      {
+        data: snapshot,
+        coValue: value,
+        node
+      }
+    );
   }
   if (type === "colist") {
     const handleRemove = (index) => {
@@ -35061,10 +35237,10 @@ function Page(props) {
 }
 
 // src/inspector/ui/error-boundary.tsx
-var import_react22 = __toESM(require_react(), 1);
+var import_react23 = __toESM(require_react(), 1);
 var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
-import { styled as styled22 } from "goober";
-var ErrorBoundary = class extends import_react22.default.Component {
+import { styled as styled23 } from "goober";
+var ErrorBoundary = class extends import_react23.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -35086,7 +35262,7 @@ var ErrorBoundary = class extends import_react22.default.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);
@@ -35094,7 +35270,7 @@ var StyledHeading2 = styled22("h1")`
 
 // src/inspector/viewer/page-stack.tsx
 var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
-var PageStackContainer = styled23("div")`
+var PageStackContainer = styled24("div")`
   position: relative;
   padding: 0 0.75rem;
   overflow-y: auto;
@@ -35128,10 +35304,10 @@ function PageStack({
 }
 
 // src/inspector/viewer/use-page-path.ts
-var import_react23 = __toESM(require_react(), 1);
+var import_react24 = __toESM(require_react(), 1);
 var STORAGE_KEY = "jazz-inspector-paths";
 function usePagePath(defaultPath) {
-  const [path, setPath] = (0, import_react23.useState)(() => {
+  const [path, setPath] = (0, import_react24.useState)(() => {
     if (typeof window === "undefined") return [];
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored) {
@@ -35143,34 +35319,34 @@ function usePagePath(defaultPath) {
     }
     return defaultPath || [];
   });
-  const updatePath = (0, import_react23.useCallback)((newPath) => {
+  const updatePath = (0, import_react24.useCallback)((newPath) => {
     setPath(newPath);
     localStorage.setItem(STORAGE_KEY, JSON.stringify(newPath));
   }, []);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (defaultPath && JSON.stringify(path) !== JSON.stringify(defaultPath)) {
       updatePath(defaultPath);
     }
   }, [defaultPath, path, updatePath]);
-  const addPages = (0, import_react23.useCallback)(
+  const addPages = (0, import_react24.useCallback)(
     (newPages) => {
       updatePath([...path, ...newPages]);
     },
     [path, updatePath]
   );
-  const goToIndex = (0, import_react23.useCallback)(
+  const goToIndex = (0, import_react24.useCallback)(
     (index) => {
       updatePath(path.slice(0, index + 1));
     },
     [path, updatePath]
   );
-  const setPage = (0, import_react23.useCallback)(
+  const setPage = (0, import_react24.useCallback)(
     (coId) => {
       updatePath([{ coId, name: "Root" }]);
     },
     [updatePath]
   );
-  const goBack = (0, import_react23.useCallback)(() => {
+  const goBack = (0, import_react24.useCallback)(() => {
     if (path.length > 1) {
       updatePath(path.slice(0, path.length - 1));
     }
@@ -35185,8 +35361,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);
@@ -35261,8 +35437,8 @@ var GlobalStyles = styled24("div")`
 
 // src/inspector/viewer/inspector-button.tsx
 var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
-import { styled as styled25 } from "goober";
-var StyledInspectorButton = styled25("button")`
+import { styled as styled26 } from "goober";
+var StyledInspectorButton = styled26("button")`
   position: fixed;
   width: 2.5rem;
   height: 2.5rem;
@@ -35293,7 +35469,7 @@ var StyledInspectorButton = styled25("button")`
   }
 }}
 `;
-var JazzIcon = styled25("svg")`
+var JazzIcon = styled26("svg")`
   width: 100%;
   height: auto;
   position: relative;
@@ -35345,27 +35521,27 @@ function InspectorButton({
 }
 
 // src/inspector/viewer/use-open-inspector.ts
-var import_react24 = __toESM(require_react(), 1);
+var import_react25 = __toESM(require_react(), 1);
 var STORAGE_KEY2 = "jazz-inspector-open";
 function useOpenInspector() {
-  const [open, setOpen] = (0, import_react24.useState)(() => {
+  const [open, setOpen] = (0, import_react25.useState)(() => {
     if (typeof window === "undefined") return false;
     const stored = localStorage.getItem(STORAGE_KEY2);
     return stored ? JSON.parse(stored) : false;
   });
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     localStorage.setItem(STORAGE_KEY2, JSON.stringify(open));
   }, [open]);
   return [open, setOpen];
 }
 
 // src/inspector/viewer/delete-local-data.tsx
-var import_react25 = __toESM(require_react(), 1);
+var import_react26 = __toESM(require_react(), 1);
 var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
 var DELETE_LOCAL_DATA_STRING = "delete my local data";
 function DeleteLocalData() {
-  const [showDeleteModal, setShowDeleteModal] = (0, import_react25.useState)(false);
-  const [confirmDeleteString, setConfirmDeleteString] = (0, import_react25.useState)("");
+  const [showDeleteModal, setShowDeleteModal] = (0, import_react26.useState)(false);
+  const [confirmDeleteString, setConfirmDeleteString] = (0, import_react26.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
@@ -35480,7 +35656,7 @@ function DeleteLocalData() {
 
 // src/inspector/viewer/new-app.tsx
 var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
-var InspectorContainer = styled26("div")`
+var InspectorContainer = styled27("div")`
   position: fixed;
   height: 50vh;
   max-height: 800px;
@@ -35497,17 +35673,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;
@@ -35519,7 +35695,7 @@ var InitialForm = styled26("form")`
   max-width: 24rem;
   margin: 0 auto;
 `;
-var OrText = styled26("p")`
+var OrText = styled27("p")`
   text-align: center;
 `;
 function JazzInspectorInternal({
@@ -35528,7 +35704,7 @@ function JazzInspectorInternal({
   accountId
 }) {
   const [open, setOpen] = useOpenInspector();
-  const [coValueId, setCoValueId] = (0, import_react26.useState)("");
+  const [coValueId, setCoValueId] = (0, import_react27.useState)("");
   const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
   const handleCoValueIdSubmit = (e) => {
     e.preventDefault();
@@ -35607,7 +35783,7 @@ function JazzInspectorInternal({
 
 // src/inspector/custom-element.tsx
 var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
-setup(import_react27.default.createElement);
+setup(import_react28.default.createElement);
 var JazzInspectorElement = class extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -35775,4 +35951,4 @@ react/cjs/react-jsx-runtime.development.js:
    * LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=custom-element-ABVPHX53.js.map
+//# sourceMappingURL=custom-element-P76EIWEV.js.map