jazz-tools 0.18.31 → 0.18.32

package/dist/inspector/index.js

@@ -4,8 +4,8 @@
 import React7 from "react";
 
 // src/inspector/viewer/new-app.tsx
-import { styled as styled20 } from "goober";
-import { useState as useState11 } from "react";
+import { styled as styled21 } from "goober";
+import { useState as useState12 } 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 styled17 } from "goober";
+import { styled as styled18 } from "goober";
 
 // src/inspector/viewer/page.tsx
-import { styled as styled16 } from "goober";
+import { styled as styled17 } from "goober";
 import React5 from "react";
 
 // src/inspector/ui/badge.tsx
@@ -1274,7 +1274,7 @@ function CoPlainTextView({ data }) {
 }
 
 // src/inspector/viewer/group-view.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // src/inspector/ui/table.tsx
 import { styled as styled12 } from "goober";
@@ -1488,8 +1488,205 @@ function Select(props) {
   ] });
 }
 
-// src/inspector/viewer/group-view.tsx
+// src/inspector/ui/data-table.tsx
+import { useEffect as useEffect6, useMemo, useState as useState6 } from "react";
 import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  data,
+  pageSize = 10,
+  initialSort = null,
+  getRowKey,
+  emptyMessage = "No data available"
+}) {
+  const [currentPage, setCurrentPage] = useState6(1);
+  const [sortConfig, setSortConfig] = useState6(initialSort);
+  const [filters, setFilters] = useState6({});
+  const filteredData = useMemo(() => {
+    return data.filter((row) => {
+      return Object.entries(filters).every(([columnId, filterValue]) => {
+        if (!filterValue) return true;
+        const column = columns.find((col) => col.id === columnId);
+        if (!column?.filterable) return true;
+        if (column.filterFn) {
+          return column.filterFn(row, filterValue);
+        }
+        const cellValue = String(column.accessor(row));
+        return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+      });
+    });
+  }, [data, filters, columns]);
+  const sortedData = useMemo(() => {
+    if (!sortConfig) return filteredData;
+    const column = columns.find((col) => col.id === sortConfig.columnId);
+    if (!column?.sortable) return filteredData;
+    const sorted = [...filteredData].sort((a, b) => {
+      if (column.sortFn) {
+        return column.sortFn(a, b);
+      }
+      const aValue = String(column.accessor(a));
+      const bValue = String(column.accessor(b));
+      return aValue.localeCompare(bValue);
+    });
+    return sortConfig.direction === "desc" ? sorted.reverse() : sorted;
+  }, [filteredData, sortConfig, columns]);
+  const totalPages = Math.ceil(sortedData.length / pageSize);
+  const showPagination = sortedData.length > pageSize;
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedData = sortedData.slice(startIndex, endIndex);
+  useEffect6(() => {
+    setCurrentPage(1);
+  }, [filters]);
+  const handleSort = (columnId) => {
+    const column = columns.find((col) => col.id === columnId);
+    if (!column?.sortable) return;
+    setSortConfig((current) => {
+      if (current?.columnId === columnId) {
+        if (current.direction === "asc") {
+          return { columnId, direction: "desc" };
+        }
+        return null;
+      }
+      return { columnId, direction: "asc" };
+    });
+  };
+  const handleFilterChange = (columnId, value) => {
+    setFilters((current) => ({
+      ...current,
+      [columnId]: value
+    }));
+  };
+  const handlePageChange = (page) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
+    /* @__PURE__ */ jsxs13(Table, { children: [
+      /* @__PURE__ */ jsx24(TableHead, { children: /* @__PURE__ */ jsx24(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx24(TableHeader, { children: /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            cursor: column.sortable ? "pointer" : "default"
+          },
+          onClick: () => handleSort(column.id),
+          children: [
+            /* @__PURE__ */ jsx24("span", { children: column.header }),
+            column.sortable && /* @__PURE__ */ jsx24(
+              "span",
+              {
+                style: {
+                  fontSize: "12px",
+                  opacity: 0.7
+                },
+                children: sortConfig?.columnId === column.id ? sortConfig.direction === "asc" ? "\u2191" : "\u2193" : "\u2195"
+              }
+            )
+          ]
+        }
+      ) }, column.id)) }) }),
+      /* @__PURE__ */ jsxs13(TableBody, { children: [
+        columns.some((column) => column.filterable) && /* @__PURE__ */ jsx24(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx24(TableCell, { children: column.filterable && /* @__PURE__ */ jsx24(
+          Input,
+          {
+            label: "Filter",
+            hideLabel: true,
+            type: "search",
+            placeholder: `Filter ${column.header.toLowerCase()}`,
+            value: filters[column.id] || "",
+            onChange: (e) => handleFilterChange(column.id, e.target.value),
+            onClick: (e) => e.stopPropagation()
+          }
+        ) }, column.id)) }),
+        paginatedData.length === 0 ? /* @__PURE__ */ jsx24(TableRow, { children: /* @__PURE__ */ jsx24(TableCell, { colSpan: columns.length, children: /* @__PURE__ */ jsx24(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              padding: "20px",
+              opacity: 0.6
+            },
+            children: emptyMessage
+          }
+        ) }) }) : paginatedData.map((row, index) => /* @__PURE__ */ jsx24(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx24(TableCell, { children: column.accessor(row) }, column.id)) }, getRowKey(row, startIndex + index)))
+      ] })
+    ] }),
+    showPagination && /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginTop: "16px",
+          padding: "8px 0"
+        },
+        children: [
+          /* @__PURE__ */ jsxs13("div", { style: { fontSize: "14px", opacity: 0.7 }, children: [
+            "Showing ",
+            startIndex + 1,
+            " to ",
+            Math.min(endIndex, sortedData.length),
+            " ",
+            "of ",
+            sortedData.length,
+            " entries",
+            Object.keys(filters).some((key) => filters[key]) && ` (filtered from ${data.length})`
+          ] }),
+          /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx24(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => handlePageChange(1),
+                disabled: currentPage === 1,
+                children: "\xAB\xAB"
+              }
+            ),
+            /* @__PURE__ */ jsx24(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => handlePageChange(currentPage - 1),
+                disabled: currentPage === 1,
+                children: "\xAB"
+              }
+            ),
+            /* @__PURE__ */ jsxs13("span", { style: { fontSize: "14px" }, children: [
+              "Page ",
+              currentPage,
+              " of ",
+              totalPages
+            ] }),
+            /* @__PURE__ */ jsx24(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => handlePageChange(currentPage + 1),
+                disabled: currentPage === totalPages,
+                children: "\xBB"
+              }
+            ),
+            /* @__PURE__ */ jsx24(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => handlePageChange(totalPages),
+                disabled: currentPage === totalPages,
+                children: "\xBB\xBB"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/inspector/viewer/group-view.tsx
+import { Fragment as Fragment8, jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function partitionMembers(data) {
   const everyone = Object.entries(data).filter(([key]) => key === "everyone").map(([key, value]) => ({
     id: key,
@@ -1517,7 +1714,7 @@ function GroupView({
   onNavigate,
   node
 }) {
-  const [addMemberType, setAddMemberType] = useState6(null);
+  const [addMemberType, setAddMemberType] = useState7(null);
   const { everyone, members, parentGroups, childGroups } = partitionMembers(
     data
   );
@@ -1596,28 +1793,28 @@ function GroupView({
       alert(`Failed to add ${addMemberType}: ${error.message}`);
     }
   };
-  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
-    /* @__PURE__ */ jsxs13(Table, { children: [
-      /* @__PURE__ */ jsx24(TableHead, { children: /* @__PURE__ */ jsxs13(TableRow, { children: [
-        /* @__PURE__ */ jsx24(TableHeader, { children: "Member" }),
-        /* @__PURE__ */ jsx24(TableHeader, { children: "Permission" }),
-        /* @__PURE__ */ jsx24(TableHeader, {})
+  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
+    /* @__PURE__ */ jsxs14(Table, { children: [
+      /* @__PURE__ */ jsx25(TableHead, { children: /* @__PURE__ */ jsxs14(TableRow, { children: [
+        /* @__PURE__ */ jsx25(TableHeader, { children: "Member" }),
+        /* @__PURE__ */ jsx25(TableHeader, { children: "Permission" }),
+        /* @__PURE__ */ jsx25(TableHeader, {})
       ] }) }),
-      /* @__PURE__ */ jsxs13(TableBody, { children: [
-        everyone.map((member) => /* @__PURE__ */ jsxs13(TableRow, { children: [
-          /* @__PURE__ */ jsx24(TableCell, { children: member.id }),
-          /* @__PURE__ */ jsx24(TableCell, { children: member.role }),
-          /* @__PURE__ */ jsx24(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsxs14(TableBody, { children: [
+        everyone.map((member) => /* @__PURE__ */ jsxs14(TableRow, { children: [
+          /* @__PURE__ */ jsx25(TableCell, { children: member.id }),
+          /* @__PURE__ */ jsx25(TableCell, { children: member.role }),
+          /* @__PURE__ */ jsx25(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx25(
             Button,
             {
               variant: "secondary",
               onClick: () => onRemoveMember(member.id),
-              children: /* @__PURE__ */ jsx24(Icon, { name: "delete" })
+              children: /* @__PURE__ */ jsx25(Icon, { name: "delete" })
             }
           ) })
         ] }, member.id)),
-        members.map((member) => /* @__PURE__ */ jsxs13(TableRow, { children: [
-          /* @__PURE__ */ jsx24(TableCell, { children: /* @__PURE__ */ jsx24(
+        members.map((member) => /* @__PURE__ */ jsxs14(TableRow, { children: [
+          /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(
             AccountOrGroupText,
             {
               coId: member.id,
@@ -1628,18 +1825,18 @@ function GroupView({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx24(TableCell, { children: member.role }),
-          /* @__PURE__ */ jsx24(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx25(TableCell, { children: member.role }),
+          /* @__PURE__ */ jsx25(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx25(
             Button,
             {
               variant: "secondary",
               onClick: () => onRemoveMember(member.id),
-              children: /* @__PURE__ */ jsx24(Icon, { name: "delete" })
+              children: /* @__PURE__ */ jsx25(Icon, { name: "delete" })
             }
           ) })
         ] }, member.id)),
-        parentGroups.map((group) => /* @__PURE__ */ jsxs13(TableRow, { children: [
-          /* @__PURE__ */ jsx24(TableCell, { children: /* @__PURE__ */ jsx24(
+        parentGroups.map((group) => /* @__PURE__ */ jsxs14(TableRow, { children: [
+          /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(
             AccountOrGroupText,
             {
               coId: group.id,
@@ -1650,19 +1847,19 @@ function GroupView({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx24(TableCell, { children: group.role }),
-          /* @__PURE__ */ jsx24(TableCell, { children: group.role !== "revoked" && /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx25(TableCell, { children: group.role }),
+          /* @__PURE__ */ jsx25(TableCell, { children: group.role !== "revoked" && /* @__PURE__ */ jsx25(
             Button,
             {
               variant: "secondary",
               onClick: () => onRemoveGroup(group.id),
-              children: /* @__PURE__ */ jsx24(Icon, { name: "delete" })
+              children: /* @__PURE__ */ jsx25(Icon, { name: "delete" })
             }
           ) })
         ] }, group.id))
       ] })
     ] }),
-    /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsxs14(
       "div",
       {
         style: {
@@ -1672,14 +1869,14 @@ function GroupView({
           marginTop: "1rem"
         },
         children: [
-          /* @__PURE__ */ jsx24(Button, { variant: "primary", onClick: () => setAddMemberType("account"), children: "Add Account" }),
-          /* @__PURE__ */ jsx24(Button, { variant: "primary", onClick: () => setAddMemberType("group"), children: "Add Group" })
+          /* @__PURE__ */ jsx25(Button, { variant: "primary", onClick: () => setAddMemberType("account"), children: "Add Account" }),
+          /* @__PURE__ */ jsx25(Button, { variant: "primary", onClick: () => setAddMemberType("group"), children: "Add Group" })
         ]
       }
     ),
-    childGroups.length > 0 && /* @__PURE__ */ jsxs13(Table, { children: [
-      /* @__PURE__ */ jsx24(TableHead, { children: /* @__PURE__ */ jsx24(TableRow, { children: /* @__PURE__ */ jsx24(TableHeader, { children: "Member of" }) }) }),
-      /* @__PURE__ */ jsx24(TableBody, { children: childGroups.map((group) => /* @__PURE__ */ jsx24(TableRow, { children: /* @__PURE__ */ jsx24(TableCell, { children: /* @__PURE__ */ jsx24(
+    childGroups.length > 0 && /* @__PURE__ */ jsxs14(Table, { children: [
+      /* @__PURE__ */ jsx25(TableHead, { children: /* @__PURE__ */ jsx25(TableRow, { children: /* @__PURE__ */ jsx25(TableHeader, { children: "Member of" }) }) }),
+      /* @__PURE__ */ jsx25(TableBody, { children: childGroups.map((group) => /* @__PURE__ */ jsx25(TableRow, { children: /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(
         AccountOrGroupText,
         {
           coId: group.id,
@@ -1691,20 +1888,20 @@ function GroupView({
         }
       ) }) }, group.id)) })
     ] }),
-    /* @__PURE__ */ jsx24(RawDataCard, { data }),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(RawDataCard, { data }),
+    /* @__PURE__ */ jsx25(
       Modal,
       {
         isOpen: addMemberType !== null,
         onClose: () => setAddMemberType(null),
         heading: addMemberType === "account" ? "Add Account" : "Add Group",
         showButtons: false,
-        children: /* @__PURE__ */ jsx24("form", { onSubmit: handleAddMemberSubmit, children: /* @__PURE__ */ jsxs13(
+        children: /* @__PURE__ */ jsx25("form", { onSubmit: handleAddMemberSubmit, children: /* @__PURE__ */ jsxs14(
           "div",
           {
             style: { display: "flex", flexDirection: "column", gap: "1rem" },
             children: [
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 Input,
                 {
                   name: "memberId",
@@ -1713,13 +1910,13 @@ function GroupView({
                   required: true
                 }
               ),
-              /* @__PURE__ */ jsxs13(Select, { name: "role", label: "Role", children: [
-                /* @__PURE__ */ jsx24("option", { value: "reader", children: "Reader" }),
-                /* @__PURE__ */ jsx24("option", { value: "writer", children: "Writer" }),
-                /* @__PURE__ */ jsx24("option", { value: "admin", children: "Admin" }),
-                addMemberType === "account" ? /* @__PURE__ */ jsx24(Fragment7, { children: /* @__PURE__ */ jsx24("option", { value: "writeOnly", children: "Write Only" }) }) : /* @__PURE__ */ jsx24(Fragment7, { children: /* @__PURE__ */ jsx24("option", { value: "inherit", children: "Inherit" }) })
+              /* @__PURE__ */ jsxs14(Select, { name: "role", label: "Role", children: [
+                /* @__PURE__ */ jsx25("option", { value: "reader", children: "Reader" }),
+                /* @__PURE__ */ jsx25("option", { value: "writer", children: "Writer" }),
+                /* @__PURE__ */ jsx25("option", { value: "admin", children: "Admin" }),
+                addMemberType === "account" ? /* @__PURE__ */ jsx25(Fragment8, { children: /* @__PURE__ */ jsx25("option", { value: "writeOnly", children: "Write Only" }) }) : /* @__PURE__ */ jsx25(Fragment8, { children: /* @__PURE__ */ jsx25("option", { value: "inherit", children: "Inherit" }) })
               ] }),
-              /* @__PURE__ */ jsxs13(
+              /* @__PURE__ */ jsxs14(
                 "div",
                 {
                   style: {
@@ -1729,7 +1926,7 @@ function GroupView({
                     marginTop: "0.5rem"
                   },
                   children: [
-                    /* @__PURE__ */ jsx24(
+                    /* @__PURE__ */ jsx25(
                       Button,
                       {
                         type: "button",
@@ -1738,7 +1935,7 @@ function GroupView({
                         children: "Cancel"
                       }
                     ),
-                    /* @__PURE__ */ jsx24(Button, { type: "submit", variant: "primary", children: "Add" })
+                    /* @__PURE__ */ jsx25(Button, { type: "submit", variant: "primary", children: "Add" })
                   ]
                 }
               )
@@ -1751,7 +1948,7 @@ function GroupView({
 }
 
 // src/inspector/viewer/role-display.tsx
-import { jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsxs as jsxs15 } from "react/jsx-runtime";
 function RoleDisplay({
   node,
   value
@@ -1770,7 +1967,7 @@ function RoleDisplay({
   } else {
     role = "unauthorized";
   }
-  return /* @__PURE__ */ jsxs14(Text, { children: [
+  return /* @__PURE__ */ jsxs15(Text, { children: [
     "Role: ",
     role
   ] });
@@ -1778,8 +1975,8 @@ function RoleDisplay({
 
 // src/inspector/viewer/table-viewer.tsx
 import { styled as styled15 } from "goober";
-import { useMemo, useState as useState7 } from "react";
-import { Fragment as Fragment8, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useMemo as useMemo2, useState as useState8 } from "react";
+import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var PaginationContainer = styled15("div")`
   padding: 1rem 0;
   display: flex;
@@ -1824,8 +2021,8 @@ function CoValuesTableView({
   onNavigate,
   onRemove
 }) {
-  const [visibleRowsCount, setVisibleRowsCount] = useState7(10);
-  const [coIdArray, visibleRows] = useMemo(() => {
+  const [visibleRowsCount, setVisibleRowsCount] = useState8(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);
     return [coIdArray2, visibleRows2];
@@ -1833,10 +2030,10 @@ function CoValuesTableView({
   const resolvedRows = useResolvedCoValues(visibleRows, node);
   const hasMore = visibleRowsCount < coIdArray.length;
   if (!coIdArray.length) {
-    return /* @__PURE__ */ jsx25("div", { children: "No data to display" });
+    return /* @__PURE__ */ jsx26("div", { children: "No data to display" });
   }
   if (resolvedRows.length === 0) {
-    return /* @__PURE__ */ jsx25("div", { children: "Loading..." });
+    return /* @__PURE__ */ jsx26("div", { children: "Loading..." });
   }
   const keys = Array.from(
     new Set(
@@ -1846,15 +2043,15 @@ function CoValuesTableView({
   const loadMore = () => {
     setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
   };
-  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
-    /* @__PURE__ */ jsxs15(Table, { children: [
-      /* @__PURE__ */ jsx25(TableHead, { children: /* @__PURE__ */ jsxs15(TableRow, { children: [
-        ["ID", ...keys, "Action"].map((key) => /* @__PURE__ */ jsx25(TableHeader, { children: key }, key)),
-        onRemove && /* @__PURE__ */ jsx25(TableHeader, {})
+  return /* @__PURE__ */ jsxs16(Fragment9, { children: [
+    /* @__PURE__ */ jsxs16(Table, { children: [
+      /* @__PURE__ */ jsx26(TableHead, { children: /* @__PURE__ */ jsxs16(TableRow, { children: [
+        ["ID", ...keys, "Action"].map((key) => /* @__PURE__ */ jsx26(TableHeader, { children: key }, key)),
+        onRemove && /* @__PURE__ */ jsx26(TableHeader, {})
       ] }) }),
-      /* @__PURE__ */ jsx25(TableBody, { children: resolvedRows.slice(0, visibleRowsCount).map((item, index) => /* @__PURE__ */ jsxs15(TableRow, { children: [
-        /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(Text, { mono: true, children: item.snapshot === "unavailable" ? /* @__PURE__ */ jsxs15(RedTooltip, { "data-text": "Unavailable", children: [
-          /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(TableBody, { children: resolvedRows.slice(0, visibleRowsCount).map((item, index) => /* @__PURE__ */ jsxs16(TableRow, { children: [
+        /* @__PURE__ */ jsx26(TableCell, { children: /* @__PURE__ */ jsx26(Text, { mono: true, children: item.snapshot === "unavailable" ? /* @__PURE__ */ jsxs16(RedTooltip, { "data-text": "Unavailable", children: [
+          /* @__PURE__ */ jsx26(
             Icon,
             {
               name: "caution",
@@ -1867,7 +2064,7 @@ function CoValuesTableView({
           ),
           visibleRows[index]
         ] }) : visibleRows[index] }) }),
-        keys.map((key) => /* @__PURE__ */ jsx25(TableCell, { children: item.snapshot !== "unavailable" && /* @__PURE__ */ jsx25(
+        keys.map((key) => /* @__PURE__ */ jsx26(TableCell, { children: item.snapshot !== "unavailable" && /* @__PURE__ */ jsx26(
           ValueRenderer,
           {
             json: item.snapshot[key],
@@ -1888,7 +2085,7 @@ function CoValuesTableView({
             }
           }
         ) }, key)),
-        /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(TableCell, { children: /* @__PURE__ */ jsx26(
           Button,
           {
             variant: "secondary",
@@ -1901,18 +2098,18 @@ function CoValuesTableView({
             children: "View"
           }
         ) }),
-        onRemove && /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
+        onRemove && /* @__PURE__ */ jsx26(TableCell, { children: /* @__PURE__ */ jsx26(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
       ] }, index)) })
     ] }),
-    /* @__PURE__ */ jsxs15(PaginationContainer, { children: [
-      /* @__PURE__ */ jsxs15(Text, { muted: true, small: true, children: [
+    /* @__PURE__ */ jsxs16(PaginationContainer, { children: [
+      /* @__PURE__ */ jsxs16(Text, { muted: true, small: true, children: [
         "Showing ",
         Math.min(visibleRowsCount, coIdArray.length),
         " of",
         " ",
         coIdArray.length
       ] }),
-      hasMore && /* @__PURE__ */ jsx25(Button, { variant: "secondary", onClick: loadMore, children: "Load more" })
+      hasMore && /* @__PURE__ */ jsx26(Button, { variant: "secondary", onClick: loadMore, children: "Load more" })
     ] })
   ] });
 }
@@ -1922,11 +2119,11 @@ function TableView({
   onNavigate,
   onRemove
 }) {
-  const isListOfCoValues = useMemo(() => {
+  const isListOfCoValues = useMemo2(() => {
     return Array.isArray(data) && data.every((k) => isCoId(k));
   }, [data]);
   if (isListOfCoValues) {
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx26(
       CoValuesTableView,
       {
         data,
@@ -1936,26 +2133,271 @@ function TableView({
       }
     );
   }
-  return /* @__PURE__ */ jsxs15(Table, { children: [
-    /* @__PURE__ */ jsx25(TableHead, { children: /* @__PURE__ */ jsxs15(TableRow, { children: [
-      /* @__PURE__ */ jsx25(TableHeader, { style: { width: "5rem" }, children: "Index" }),
-      /* @__PURE__ */ jsx25(TableHeader, { children: "Value" }),
-      onRemove && /* @__PURE__ */ jsx25(TableHeader, { children: "Action" })
+  return /* @__PURE__ */ jsxs16(Table, { children: [
+    /* @__PURE__ */ jsx26(TableHead, { children: /* @__PURE__ */ jsxs16(TableRow, { children: [
+      /* @__PURE__ */ jsx26(TableHeader, { style: { width: "5rem" }, children: "Index" }),
+      /* @__PURE__ */ jsx26(TableHeader, { children: "Value" }),
+      onRemove && /* @__PURE__ */ jsx26(TableHeader, { children: "Action" })
     ] }) }),
-    /* @__PURE__ */ jsx25(TableBody, { children: Array.isArray(data) && data?.map((value, index) => /* @__PURE__ */ jsxs15(TableRow, { children: [
-      /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(Text, { mono: true, children: index }) }),
-      /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(ValueRenderer, { json: value }) }),
-      onRemove && /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
+    /* @__PURE__ */ jsx26(TableBody, { children: Array.isArray(data) && data?.map((value, index) => /* @__PURE__ */ jsxs16(TableRow, { children: [
+      /* @__PURE__ */ jsx26(TableCell, { children: /* @__PURE__ */ jsx26(Text, { mono: true, children: index }) }),
+      /* @__PURE__ */ jsx26(TableCell, { children: /* @__PURE__ */ jsx26(ValueRenderer, { json: value }) }),
+      onRemove && /* @__PURE__ */ jsx26(TableCell, { children: /* @__PURE__ */ jsx26(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
     ] }, index)) })
   ] });
 }
 
+// src/inspector/viewer/history-view.tsx
+import { useMemo as useMemo3 } from "react";
+import { styled as styled16 } from "goober";
+import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+function HistoryView({
+  coValue,
+  node
+}) {
+  const transactions = useMemo3(
+    () => getHistory(coValue),
+    [coValue.core.verifiedTransactions.length]
+  );
+  const columns = [
+    {
+      id: "author",
+      header: "Author",
+      accessor: (row) => /* @__PURE__ */ jsxs17(Fragment10, { children: [
+        row.isValid || /* @__PURE__ */ jsx27(RedTooltip2, { "data-text": "This transaction is invalid and is not used", children: /* @__PURE__ */ jsx27(
+          Icon,
+          {
+            name: "caution",
+            size: "xs",
+            color: "red",
+            style: {
+              display: "inline-block",
+              verticalAlign: "middle",
+              marginRight: "0.25rem"
+            }
+          }
+        ) }),
+        row.author.startsWith("co_") ? /* @__PURE__ */ jsx27(
+          AccountOrGroupText,
+          {
+            coId: row.author,
+            node,
+            showId: true
+          }
+        ) : row.author
+      ] }),
+      sortable: false,
+      filterable: true,
+      sortFn: (a, b) => a.author.localeCompare(b.author),
+      filterFn: (row, filterValue) => row.author.toLowerCase().includes(filterValue.toLowerCase())
+    },
+    {
+      id: "action",
+      header: "Action",
+      accessor: (row) => row.action,
+      sortable: false,
+      filterable: true,
+      sortFn: (a, b) => a.action.localeCompare(b.action)
+    },
+    {
+      id: "timestamp",
+      header: "Timestamp",
+      accessor: (row) => row.timestamp.toISOString(),
+      sortable: true,
+      filterable: true,
+      sortFn: (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
+    }
+  ];
+  return /* @__PURE__ */ jsxs17("section", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+    /* @__PURE__ */ jsx27(Heading, { children: "CoValue history" }),
+    /* @__PURE__ */ jsx27(
+      DataTable,
+      {
+        columns,
+        data: transactions,
+        pageSize: 10,
+        initialSort: { columnId: "timestamp", direction: "desc" },
+        getRowKey: (row) => row.id,
+        emptyMessage: "No history available"
+      }
+    )
+  ] });
+}
+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);
+    return changes.map((change, changeIndex) => ({
+      id: `${tx.txID.sessionID.toString()}-${tx.txID.txIndex}-${index}-${changeIndex}`,
+      author: tx.author,
+      action: mapTransactionToAction(change, coValue),
+      timestamp: new Date(tx.currentMadeAt),
+      isValid: tx.isValid
+    }));
+  });
+}
+function mapTransactionToAction(change, coValue) {
+  if (isUserPromotion(change)) {
+    if (change.value === "revoked") {
+      return `${change.key} has been revoked`;
+    }
+    return `${change.key} has been promoted to ${change.value}`;
+  }
+  if (isGroupExtension(change)) {
+    const child = change.key.slice(6);
+    return `Group became a member of ${child}`;
+  }
+  if (isGroupExtendRevocation(change)) {
+    const child = change.key.slice(6);
+    return `Group's membership of ${child} has been revoked.`;
+  }
+  if (isGroupPromotion(change)) {
+    const parent = change.key.slice(7);
+    return `Group ${parent} has been promoted to ${change.value}`;
+  }
+  if (isKeyRevelation(change)) {
+    const [key, target] = change.key.split("_for_");
+    return `Key "${key}" has been revealed to "${target}"`;
+  }
+  if (isItemAppend(change)) {
+    if (change.after === "start") {
+      return `"${change.value}" has been appended`;
+    }
+    const after = findListChange(change.after, coValue);
+    if (after === void 0) {
+      return `"${change.value}" has been inserted after undefined item`;
+    }
+    return `"${change.value}" has been inserted after "${after.value}"`;
+  }
+  if (isItemPrepend(change)) {
+    if (change.before === "end") {
+      return `"${change.value}" has been prepended`;
+    }
+    const before = findListChange(change.before, coValue);
+    if (before === void 0) {
+      return `"${change.value}" has been inserted before undefined item`;
+    }
+    return `"${change.value}" has been inserted before "${before.value}"`;
+  }
+  if (isItemDeletion(change)) {
+    const insertion = findListChange(change.insertion, coValue);
+    if (insertion === void 0) {
+      return `An undefined item has been deleted`;
+    }
+    return `"${insertion.value}" has been deleted`;
+  }
+  if (isStreamStart(change)) {
+    return `Stream started with mime type "${change.mimeType}" and file name "${change.fileName}"`;
+  }
+  if (isStreamChunk(change)) {
+    return `Stream chunk added`;
+  }
+  if (isStreamEnd(change)) {
+    return `Stream ended`;
+  }
+  if (isPropertySet(change)) {
+    return `Property "${change.key}" has been set to "${change.value}"`;
+  }
+  if (isPropertyDeletion(change)) {
+    return `Property "${change.key}" has been deleted`;
+  }
+  return "Unknown action: " + JSON.stringify(change);
+}
+var findListChange = (opId, coValue) => {
+  return coValue.core.verifiedTransactions.find(
+    (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 = styled16("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 */
+
+  &:before {
+    content: attr(data-text);
+    background-color: red;
+    position:absolute;
+
+    /* vertically center */
+    top:50%;
+    transform:translateY(-50%);
+
+    /* move to right */
+    left:100%;
+    margin-left:15px; /* and add a small left margin */
+
+    /* basic styles */
+    width:200px;
+    padding:10px;
+    border-radius:10px;
+    color: #fff;
+    text-align:center;
+
+    display:none; /* hide by default */
+  }
+
+  &:hover:before {
+    display:block;
+  }
+`;
+
 // src/inspector/viewer/page.tsx
-import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var BasePageContainer = React5.forwardRef(
-  ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ jsx26("div", { ref, ...rest })
+  ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ jsx28("div", { ref, ...rest })
 );
-var PageContainer = styled16(BasePageContainer)`
+var PageContainer = styled17(BasePageContainer)`
   position: absolute;
   z-index: 10;
   inset: 0;
@@ -1963,36 +2405,36 @@ var PageContainer = styled16(BasePageContainer)`
   height: 100%;
   padding: 0 0.75rem;
 `;
-var BackButton = styled16("div")`
+var BackButton = styled17("div")`
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 2.5rem;
 `;
-var HeaderContainer = styled16("div")`
+var HeaderContainer = styled17("div")`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
 `;
-var TitleContainer = styled16("div")`
+var TitleContainer = styled17("div")`
   display: flex;
   align-items: center;
   gap: 0.75rem;
 `;
-var Title = styled16(Heading)`
+var Title = styled17(Heading)`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.25rem;
 `;
-var BadgeContainer = styled16("div")`
+var BadgeContainer = styled17("div")`
   display: flex;
   align-items: center;
   gap: 0.75rem;
 `;
-var ContentContainer = styled16("div")`
+var ContentContainer = styled17("div")`
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -2013,7 +2455,7 @@ function View(props) {
   const { node, onNavigate } = props;
   if (!snapshot || snapshot === "unavailable") return;
   if (type === "costream") {
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx28(
       CoStreamView,
       {
         data: snapshot,
@@ -2024,7 +2466,7 @@ function View(props) {
     );
   }
   if (extendedType === "group") {
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx28(
       GroupView,
       {
         coValue: value,
@@ -2035,10 +2477,10 @@ function View(props) {
     );
   }
   if (extendedType === "account") {
-    return /* @__PURE__ */ jsx26(AccountView, { data: snapshot, node, onNavigate });
+    return /* @__PURE__ */ jsx28(AccountView, { data: snapshot, node, onNavigate });
   }
   if (type === "coplaintext") {
-    return /* @__PURE__ */ jsx26(CoPlainTextView, { data: snapshot });
+    return /* @__PURE__ */ jsx28(CoPlainTextView, { data: snapshot });
   }
   if (type === "colist") {
     const handleRemove = (index) => {
@@ -2047,7 +2489,7 @@ function View(props) {
         list.delete(index);
       }
     };
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx28(
       TableView,
       {
         data: snapshot,
@@ -2058,9 +2500,9 @@ function View(props) {
     );
   }
   if (extendedType === "record") {
-    return /* @__PURE__ */ jsx26(TableView, { data: snapshot, node, onNavigate });
+    return /* @__PURE__ */ jsx28(TableView, { data: snapshot, node, onNavigate });
   }
-  return /* @__PURE__ */ jsx26(GridView, { data: snapshot, onNavigate, node });
+  return /* @__PURE__ */ jsx28(GridView, { data: snapshot, onNavigate, node });
 }
 function Page(props) {
   const {
@@ -2076,13 +2518,13 @@ function Page(props) {
   const coValue = useResolvedCoValue(coId, node);
   const { value, snapshot, type, extendedType } = coValue;
   if (snapshot === "unavailable") {
-    return /* @__PURE__ */ jsx26("div", { style, children: "Data unavailable" });
+    return /* @__PURE__ */ jsx28("div", { style, children: "Data unavailable" });
   }
   if (!snapshot) {
-    return /* @__PURE__ */ jsx26("div", { style });
+    return /* @__PURE__ */ jsx28("div", { style });
   }
-  return /* @__PURE__ */ jsxs16(PageContainer, { style, className, isTopLevel, children: [
-    !isTopLevel && /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs18(PageContainer, { style, className, isTopLevel, children: [
+    !isTopLevel && /* @__PURE__ */ jsx28(
       BackButton,
       {
         "aria-label": "Back",
@@ -2092,27 +2534,27 @@ function Page(props) {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx26(HeaderContainer, { children: /* @__PURE__ */ jsxs16(TitleContainer, { children: [
-      /* @__PURE__ */ jsx26(Title, { children: /* @__PURE__ */ jsxs16("span", { children: [
+    /* @__PURE__ */ jsx28(HeaderContainer, { children: /* @__PURE__ */ jsxs18(TitleContainer, { children: [
+      /* @__PURE__ */ jsx28(Title, { children: /* @__PURE__ */ jsxs18("span", { children: [
         name,
-        typeof snapshot === "object" && "name" in snapshot ? /* @__PURE__ */ jsxs16("span", { style: { color: "#57534e", fontWeight: 500 }, children: [
+        typeof snapshot === "object" && "name" in snapshot ? /* @__PURE__ */ jsxs18("span", { style: { color: "#57534e", fontWeight: 500 }, children: [
           " ",
           snapshot.name
         ] }) : null
       ] }) }),
-      /* @__PURE__ */ jsxs16(BadgeContainer, { children: [
-        /* @__PURE__ */ jsx26(Badge, { children: type && /* @__PURE__ */ jsx26(TypeIcon, { type, extendedType }) }),
-        /* @__PURE__ */ jsx26(Badge, { children: coId })
+      /* @__PURE__ */ jsxs18(BadgeContainer, { children: [
+        /* @__PURE__ */ jsx28(Badge, { children: type && /* @__PURE__ */ jsx28(TypeIcon, { type, extendedType }) }),
+        /* @__PURE__ */ jsx28(Badge, { children: coId })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs16(ContentContainer, { children: [
-      /* @__PURE__ */ jsx26(View, { ...props, coValue }),
-      extendedType !== "account" && extendedType !== "group" && /* @__PURE__ */ jsxs16(Fragment9, { children: [
-        /* @__PURE__ */ jsx26(RoleDisplay, { node, value }),
-        /* @__PURE__ */ jsxs16(Text, { muted: true, children: [
+    /* @__PURE__ */ jsxs18(ContentContainer, { children: [
+      /* @__PURE__ */ jsx28(View, { ...props, coValue }),
+      extendedType !== "account" && extendedType !== "group" && /* @__PURE__ */ jsxs18(Fragment11, { children: [
+        /* @__PURE__ */ jsx28(RoleDisplay, { node, value }),
+        /* @__PURE__ */ jsxs18(Text, { muted: true, children: [
           "Owned by",
           " ",
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx28(
             AccountOrGroupText,
             {
               coId: value.group.id,
@@ -2124,14 +2566,15 @@ function Page(props) {
             }
           )
         ] })
-      ] })
+      ] }),
+      value && /* @__PURE__ */ jsx28(HistoryView, { coValue: value, node })
     ] })
   ] });
 }
 
 // src/inspector/viewer/page-stack.tsx
-import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
-var PageStackContainer = styled17("div")`
+import { Fragment as Fragment12, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+var PageStackContainer = styled18("div")`
   position: relative;
   padding: 0 0.75rem;
   overflow-y: auto;
@@ -2148,9 +2591,9 @@ function PageStack({
 }) {
   const page = path[path.length - 1];
   const index = path.length - 1;
-  return /* @__PURE__ */ jsx27(Fragment10, { children: /* @__PURE__ */ jsxs17(PageStackContainer, { children: [
+  return /* @__PURE__ */ jsx29(Fragment12, { children: /* @__PURE__ */ jsxs19(PageStackContainer, { children: [
     children,
-    node && page && /* @__PURE__ */ jsx27(
+    node && page && /* @__PURE__ */ jsx29(
       Page,
       {
         coId: page.coId,
@@ -2165,10 +2608,10 @@ function PageStack({
 }
 
 // src/inspector/viewer/use-page-path.ts
-import { useCallback, useEffect as useEffect6, useState as useState8 } from "react";
+import { useCallback, useEffect as useEffect7, useState as useState9 } from "react";
 var STORAGE_KEY = "jazz-inspector-paths";
 function usePagePath(defaultPath) {
-  const [path, setPath] = useState8(() => {
+  const [path, setPath] = useState9(() => {
     if (typeof window === "undefined") return [];
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored) {
@@ -2184,7 +2627,7 @@ function usePagePath(defaultPath) {
     setPath(newPath);
     localStorage.setItem(STORAGE_KEY, JSON.stringify(newPath));
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (defaultPath && JSON.stringify(path) !== JSON.stringify(defaultPath)) {
       updatePath(defaultPath);
     }
@@ -2222,8 +2665,8 @@ function usePagePath(defaultPath) {
 }
 
 // src/inspector/ui/global-styles.tsx
-import { styled as styled18 } from "goober";
-var GlobalStyles = styled18("div")`
+import { styled as styled19 } from "goober";
+var GlobalStyles = styled19("div")`
   /* Colors */
   --j-primary-color: #146AFF;
   --j-link-color: var(--j-primary-color);
@@ -2297,9 +2740,9 @@ var GlobalStyles = styled18("div")`
 `;
 
 // src/inspector/viewer/inspector-button.tsx
-import { styled as styled19 } from "goober";
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
-var StyledInspectorButton = styled19("button")`
+import { styled as styled20 } from "goober";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+var StyledInspectorButton = styled20("button")`
   position: fixed;
   width: 2.5rem;
   height: 2.5rem;
@@ -2330,7 +2773,7 @@ var StyledInspectorButton = styled19("button")`
   }
 }}
 `;
-var JazzIcon = styled19("svg")`
+var JazzIcon = styled20("svg")`
   width: 100%;
   height: auto;
   position: relative;
@@ -2341,8 +2784,8 @@ function InspectorButton({
   position = "right",
   ...buttonProps
 }) {
-  return /* @__PURE__ */ jsxs18(StyledInspectorButton, { position, ...buttonProps, children: [
-    /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs20(StyledInspectorButton, { position, ...buttonProps, children: [
+    /* @__PURE__ */ jsx30(
       JazzIcon,
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -2350,7 +2793,7 @@ function InspectorButton({
         height: "115",
         viewBox: "0 0 119 115",
         fill: "none",
-        children: /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsx30(
           "path",
           {
             fillRule: "evenodd",
@@ -2361,7 +2804,7 @@ function InspectorButton({
         )
       }
     ),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx30(
       "span",
       {
         style: {
@@ -2382,30 +2825,30 @@ function InspectorButton({
 }
 
 // src/inspector/viewer/use-open-inspector.ts
-import { useEffect as useEffect7, useState as useState9 } from "react";
+import { useEffect as useEffect8, useState as useState10 } from "react";
 var STORAGE_KEY2 = "jazz-inspector-open";
 function useOpenInspector() {
-  const [open, setOpen] = useState9(() => {
+  const [open, setOpen] = useState10(() => {
     if (typeof window === "undefined") return false;
     const stored = localStorage.getItem(STORAGE_KEY2);
     return stored ? JSON.parse(stored) : false;
   });
-  useEffect7(() => {
+  useEffect8(() => {
     localStorage.setItem(STORAGE_KEY2, JSON.stringify(open));
   }, [open]);
   return [open, setOpen];
 }
 
 // src/inspector/viewer/delete-local-data.tsx
-import { useState as useState10 } from "react";
-import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { Fragment as Fragment13, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var DELETE_LOCAL_DATA_STRING = "delete my local data";
 function DeleteLocalData() {
-  const [showDeleteModal, setShowDeleteModal] = useState10(false);
-  const [confirmDeleteString, setConfirmDeleteString] = useState10("");
-  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
-    /* @__PURE__ */ jsx29(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
-    /* @__PURE__ */ jsxs19(
+  const [showDeleteModal, setShowDeleteModal] = useState11(false);
+  const [confirmDeleteString, setConfirmDeleteString] = useState11("");
+  return /* @__PURE__ */ jsxs21(Fragment13, { children: [
+    /* @__PURE__ */ jsx31(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
+    /* @__PURE__ */ jsxs21(
       Modal,
       {
         isOpen: showDeleteModal,
@@ -2413,7 +2856,7 @@ function DeleteLocalData() {
         heading: "Delete Local Data",
         showButtons: false,
         children: [
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs21(
             "div",
             {
               style: {
@@ -2424,33 +2867,33 @@ function DeleteLocalData() {
                 gap: "0.5rem"
               },
               children: [
-                /* @__PURE__ */ jsxs19("p", { children: [
+                /* @__PURE__ */ jsxs21("p", { children: [
                   "This action ",
-                  /* @__PURE__ */ jsx29("strong", { children: "cannot" }),
+                  /* @__PURE__ */ jsx31("strong", { children: "cannot" }),
                   " be undone."
                 ] }),
-                /* @__PURE__ */ jsxs19("p", { children: [
+                /* @__PURE__ */ jsxs21("p", { children: [
                   "Be aware that the following data will be",
                   " ",
-                  /* @__PURE__ */ jsx29("strong", { children: "permanently" }),
+                  /* @__PURE__ */ jsx31("strong", { children: "permanently" }),
                   " deleted:"
                 ] }),
-                /* @__PURE__ */ jsxs19("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
-                  /* @__PURE__ */ jsxs19("li", { children: [
+                /* @__PURE__ */ jsxs21("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
+                  /* @__PURE__ */ jsxs21("li", { children: [
                     "Unsynced data for ",
-                    /* @__PURE__ */ jsx29("strong", { children: "all apps" }),
+                    /* @__PURE__ */ jsx31("strong", { children: "all apps" }),
                     " on",
                     " ",
-                    /* @__PURE__ */ jsx29("code", { children: window.location.origin })
+                    /* @__PURE__ */ jsx31("code", { children: window.location.origin })
                   ] }),
-                  /* @__PURE__ */ jsx29("li", { children: "Accounts" }),
-                  /* @__PURE__ */ jsx29("li", { children: "Logged in sessions" })
+                  /* @__PURE__ */ jsx31("li", { children: "Accounts" }),
+                  /* @__PURE__ */ jsx31("li", { children: "Logged in sessions" })
                 ] }),
-                /* @__PURE__ */ jsx29("p", {})
+                /* @__PURE__ */ jsx31("p", {})
               ]
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx31(
             Input,
             {
               label: `Type "${DELETE_LOCAL_DATA_STRING}" to confirm`,
@@ -2461,7 +2904,7 @@ function DeleteLocalData() {
               }
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx31(
             "p",
             {
               style: {
@@ -2471,14 +2914,14 @@ function DeleteLocalData() {
                 flexDirection: "column",
                 gap: "0.5rem"
               },
-              children: /* @__PURE__ */ jsxs19("small", { children: [
+              children: /* @__PURE__ */ jsxs21("small", { children: [
                 "Data synced to a sync server will ",
-                /* @__PURE__ */ jsx29("strong", { children: "not" }),
+                /* @__PURE__ */ jsx31("strong", { children: "not" }),
                 " be deleted, and will be synced when you log in again."
               ] })
             }
           ),
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs21(
             "div",
             {
               style: {
@@ -2488,8 +2931,8 @@ function DeleteLocalData() {
                 gap: "0.5rem"
               },
               children: [
-                /* @__PURE__ */ jsx29(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
-                /* @__PURE__ */ jsx29(
+                /* @__PURE__ */ jsx31(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
+                /* @__PURE__ */ jsx31(
                   Button,
                   {
                     variant: "destructive",
@@ -2516,8 +2959,8 @@ function DeleteLocalData() {
 }
 
 // src/inspector/viewer/new-app.tsx
-import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
-var InspectorContainer = styled20("div")`
+import { Fragment as Fragment14, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+var InspectorContainer = styled21("div")`
   position: fixed;
   height: 50vh;
   max-height: 800px;
@@ -2534,17 +2977,17 @@ var InspectorContainer = styled20("div")`
     background-color: var(--j-background);
   }
 `;
-var HeaderContainer2 = styled20("div")`
+var HeaderContainer2 = styled21("div")`
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0 0.75rem;
   margin: 0.75rem 0;
 `;
-var Form = styled20("form")`
+var Form = styled21("form")`
   width: 24rem;
 `;
-var InitialForm = styled20("form")`
+var InitialForm = styled21("form")`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -2556,7 +2999,7 @@ var InitialForm = styled20("form")`
   max-width: 24rem;
   margin: 0 auto;
 `;
-var OrText = styled20("p")`
+var OrText = styled21("p")`
   text-align: center;
 `;
 function JazzInspectorInternal({
@@ -2565,7 +3008,7 @@ function JazzInspectorInternal({
   accountId
 }) {
   const [open, setOpen] = useOpenInspector();
-  const [coValueId, setCoValueId] = useState11("");
+  const [coValueId, setCoValueId] = useState12("");
   const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
   const handleCoValueIdSubmit = (e) => {
     e.preventDefault();
@@ -2575,12 +3018,12 @@ function JazzInspectorInternal({
     setCoValueId("");
   };
   if (!open) {
-    return /* @__PURE__ */ jsx30(InspectorButton, { position, onClick: () => setOpen(true) });
+    return /* @__PURE__ */ jsx32(InspectorButton, { position, onClick: () => setOpen(true) });
   }
-  return /* @__PURE__ */ jsxs20(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
-    /* @__PURE__ */ jsxs20(HeaderContainer2, { children: [
-      /* @__PURE__ */ jsx30(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
-      path.length !== 0 && /* @__PURE__ */ jsx30(Form, { onSubmit: handleCoValueIdSubmit, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs22(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
+    /* @__PURE__ */ jsxs22(HeaderContainer2, { children: [
+      /* @__PURE__ */ jsx32(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
+      path.length !== 0 && /* @__PURE__ */ jsx32(Form, { onSubmit: handleCoValueIdSubmit, children: /* @__PURE__ */ jsx32(
         Input,
         {
           label: "CoValue ID",
@@ -2591,24 +3034,24 @@ function JazzInspectorInternal({
           onChange: (e) => setCoValueId(e.target.value)
         }
       ) }),
-      /* @__PURE__ */ jsx30(DeleteLocalData, {}),
-      /* @__PURE__ */ jsx30(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
+      /* @__PURE__ */ jsx32(DeleteLocalData, {}),
+      /* @__PURE__ */ jsx32(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
     ] }),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx32(
       PageStack,
       {
         path,
         node: localNode,
         goBack,
         addPages,
-        children: path.length <= 0 && /* @__PURE__ */ jsxs20(
+        children: path.length <= 0 && /* @__PURE__ */ jsxs22(
           InitialForm,
           {
             onSubmit: handleCoValueIdSubmit,
             "aria-hidden": path.length !== 0,
             children: [
-              /* @__PURE__ */ jsx30(Heading, { children: "Jazz CoValue Inspector" }),
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx32(Heading, { children: "Jazz CoValue Inspector" }),
+              /* @__PURE__ */ jsx32(
                 Input,
                 {
                   label: "CoValue ID",
@@ -2619,10 +3062,10 @@ function JazzInspectorInternal({
                   onChange: (e) => setCoValueId(e.target.value)
                 }
               ),
-              /* @__PURE__ */ jsx30(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
-              accountId && /* @__PURE__ */ jsxs20(Fragment12, { children: [
-                /* @__PURE__ */ jsx30(OrText, { children: "or" }),
-                /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx32(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
+              accountId && /* @__PURE__ */ jsxs22(Fragment14, { children: [
+                /* @__PURE__ */ jsx32(OrText, { children: "or" }),
+                /* @__PURE__ */ jsx32(
                   Button,
                   {
                     variant: "secondary",
@@ -2645,12 +3088,12 @@ function JazzInspectorInternal({
 // src/inspector/index.tsx
 import { setup } from "goober";
 import { useJazzContext } from "jazz-tools/react-core";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } 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__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     JazzInspectorInternal,
     {
       position,