jazz-tools 0.18.29 → 0.18.31

package/dist/inspector/index.js

@@ -4,8 +4,8 @@
 import React7 from "react";
 
 // src/inspector/viewer/new-app.tsx
-import { styled as styled19 } from "goober";
-import { useState as useState10 } from "react";
+import { styled as styled20 } from "goober";
+import { useState as useState11 } 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 styled15 } from "goober";
+import { styled as styled17 } from "goober";
 
 // src/inspector/viewer/page.tsx
-import { styled as styled14 } from "goober";
+import { styled as styled16 } from "goober";
 import React5 from "react";
 
 // src/inspector/ui/badge.tsx
@@ -1273,6 +1273,9 @@ function CoPlainTextView({ data }) {
   ] });
 }
 
+// src/inspector/viewer/group-view.tsx
+import { useState as useState6 } from "react";
+
 // src/inspector/ui/table.tsx
 import { styled as styled12 } from "goober";
 import React4 from "react";
@@ -1313,49 +1316,442 @@ var TableRow = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ *
 var TableHeader = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx21(StyledTh, { ref, ...props, children }));
 var TableCell = React4.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx21(StyledTd, { ref, ...props, children }));
 
+// src/inspector/ui/modal.tsx
+import { styled as styled13 } from "goober";
+import { forwardRef as forwardRef3, useEffect as useEffect5, useRef } from "react";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+var ModalContent = styled13("dialog")`
+  background-color: var(--j-background);
+  border-radius: var(--j-radius-lg);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--j-border-color);
+  max-width: 32rem;
+  margin-block: auto;
+  margin-inline: auto;
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+  
+`;
+var ModalHeader = styled13("div")`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1.5rem 1.5rem 0 1.5rem;
+  gap: 1rem;
+`;
+var ModalBody = styled13("div")`
+  padding: 1rem 1.5rem;
+  flex: 1;
+`;
+var ModalFooter = styled13("div")`
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 0 1.5rem 1.5rem 1.5rem;
+`;
+var CloseButton = styled13("button")`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--j-radius-sm);
+  color: var(--j-text-color);
+  font-size: 1.25rem;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  min-height: 2rem;
+  
+  &:hover {
+    background-color: var(--j-foreground);
+  }
+  
+  &:focus-visible {
+    outline: 2px solid var(--j-border-focus);
+    outline-offset: 2px;
+  }
+`;
+var Modal = forwardRef3(
+  ({
+    isOpen,
+    onClose,
+    heading,
+    text,
+    children,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    onConfirm,
+    onCancel,
+    showButtons = true,
+    className
+  }, ref) => {
+    const modalRef = useRef(null);
+    useEffect5(() => {
+      if (isOpen) {
+        modalRef.current?.showModal();
+      } else {
+        onClose();
+        modalRef.current?.close();
+      }
+    }, [isOpen, onClose]);
+    const handleConfirm = () => {
+      onConfirm?.();
+      onClose();
+    };
+    const handleCancel = () => {
+      onCancel?.();
+      onClose();
+    };
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsxs11(
+      ModalContent,
+      {
+        ref: ref || modalRef,
+        className,
+        role: "dialog",
+        "aria-labelledby": "modal-heading",
+        onClose,
+        children: [
+          /* @__PURE__ */ jsxs11(ModalHeader, { children: [
+            /* @__PURE__ */ jsx22(Heading, { id: "modal-heading", children: heading }),
+            /* @__PURE__ */ jsx22(CloseButton, { onClick: onClose, "aria-label": "Close modal", type: "button", children: "\xD7" })
+          ] }),
+          /* @__PURE__ */ jsxs11(ModalBody, { children: [
+            text && /* @__PURE__ */ jsx22("p", { style: { margin: "0 0 1rem 0", color: "var(--j-text-color)" }, children: text }),
+            children
+          ] }),
+          showButtons && /* @__PURE__ */ jsxs11(ModalFooter, { children: [
+            /* @__PURE__ */ jsx22(Button, { variant: "secondary", onClick: handleCancel, children: cancelText }),
+            /* @__PURE__ */ jsx22(Button, { variant: "primary", onClick: handleConfirm, children: confirmText })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+
+// src/inspector/ui/select.tsx
+import { styled as styled14 } from "goober";
+import { useId as useId2 } from "react";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+var SelectContainer = styled14("div")`
+  display: grid;
+  gap: 0.25rem;
+`;
+var SelectWrapper = styled14("div")`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+var StyledSelect = styled14("select")`
+  width: 100%;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem 0.5rem 0.875rem;
+  padding-right: 2rem;
+  box-shadow: var(--j-shadow-sm);
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+  appearance: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+var SelectIcon = styled14("span")`
+  position: absolute;
+  right: 0.5em;
+  color: var(--j-neutral-400);
+  pointer-events: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--j-neutral-900);
+  }
+`;
+function Select(props) {
+  const { label, hideLabel, id: customId, className, ...selectProps } = props;
+  const generatedId = useId2();
+  const id = customId || generatedId;
+  return /* @__PURE__ */ jsxs12(SelectContainer, { className, children: [
+    /* @__PURE__ */ jsx23("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
+    /* @__PURE__ */ jsxs12(SelectWrapper, { children: [
+      /* @__PURE__ */ jsx23(StyledSelect, { ...selectProps, id, children: props.children }),
+      /* @__PURE__ */ jsx23(SelectIcon, { children: /* @__PURE__ */ jsx23(Icon, { name: "chevronDown", size: "sm" }) })
+    ] })
+  ] });
+}
+
 // src/inspector/viewer/group-view.tsx
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+function partitionMembers(data) {
+  const everyone = Object.entries(data).filter(([key]) => key === "everyone").map(([key, value]) => ({
+    id: key,
+    role: value
+  }));
+  const members = Object.entries(data).filter(([key]) => isCoId(key)).map(([key, value]) => ({
+    id: key,
+    role: value
+  }));
+  const parentGroups = Object.entries(data).filter(([key]) => key.startsWith("parent_co_")).map(([key, value]) => ({
+    id: key.slice(7),
+    role: value
+  }));
+  const childGroups = Object.entries(data).filter(
+    ([key, value]) => key.startsWith("child_co_") && value !== "revoked"
+  ).map(([key, value]) => ({
+    id: key.slice(6),
+    role: value
+  }));
+  return { everyone, members, parentGroups, childGroups };
+}
 function GroupView({
+  coValue,
   data,
   onNavigate,
   node
 }) {
-  return /* @__PURE__ */ jsxs11(Fragment7, { children: [
-    /* @__PURE__ */ jsx22(Text, { strong: true, children: "Members" }),
-    /* @__PURE__ */ jsxs11(Table, { children: [
-      /* @__PURE__ */ jsx22(TableHead, { children: /* @__PURE__ */ jsxs11(TableRow, { children: [
-        /* @__PURE__ */ jsx22(TableHeader, { children: "Account" }),
-        /* @__PURE__ */ jsx22(TableHeader, { children: "Permission" })
+  const [addMemberType, setAddMemberType] = useState6(null);
+  const { everyone, members, parentGroups, childGroups } = partitionMembers(
+    data
+  );
+  const onRemoveMember = async (id) => {
+    if (confirm("Are you sure you want to remove this member?") === false) {
+      return;
+    }
+    try {
+      const group = await node.load(coValue.id);
+      if (group === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawGroup = group;
+      rawGroup.removeMember(id);
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+  const onRemoveGroup = async (id) => {
+    if (confirm("Are you sure you want to remove this group?") === false) {
+      return;
+    }
+    try {
+      const group = await node.load(coValue.id);
+      if (group === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawGroup = group;
+      const targetGroup = await node.load(id);
+      if (targetGroup === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawTargetGroup = targetGroup;
+      rawGroup.revokeExtend(rawTargetGroup);
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+  const handleAddMemberSubmit = async (event) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const memberId = form.elements.namedItem("memberId")?.value;
+    const role = form.elements.namedItem("role")?.value;
+    try {
+      const group = await node.load(coValue.id);
+      if (group === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawGroup = group;
+      if (addMemberType === "account") {
+        let rawAccount = "everyone";
+        if (memberId !== "everyone") {
+          const account = await node.load(memberId);
+          if (account === "unavailable") {
+            throw new Error("Account not found");
+          }
+          rawAccount = account;
+        }
+        rawGroup.addMember(rawAccount, role);
+      } else if (addMemberType === "group") {
+        const targetGroup = await node.load(memberId);
+        if (targetGroup === "unavailable") {
+          throw new Error("Group not found");
+        }
+        const rawTargetGroup = targetGroup;
+        rawGroup.extend(
+          rawTargetGroup,
+          role
+        );
+      }
+      setAddMemberType(null);
+    } catch (error) {
+      console.error(error);
+      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, {})
       ] }) }),
-      /* @__PURE__ */ jsxs11(TableBody, { children: [
-        "everyone" in data && typeof data.everyone === "string" ? /* @__PURE__ */ jsxs11(TableRow, { children: [
-          /* @__PURE__ */ jsx22(TableCell, { children: "everyone" }),
-          /* @__PURE__ */ jsx22(TableCell, { children: data.everyone })
-        ] }) : null,
-        Object.entries(data).map(
-          ([key, value]) => isCoId(key) ? /* @__PURE__ */ jsxs11(TableRow, { children: [
-            /* @__PURE__ */ jsx22(TableCell, { children: /* @__PURE__ */ jsx22(
-              AccountOrGroupText,
-              {
-                coId: key,
-                node,
-                showId: true,
-                onClick: () => {
-                  onNavigate([{ coId: key, name: key }]);
-                }
+      /* @__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(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => onRemoveMember(member.id),
+              children: /* @__PURE__ */ jsx24(Icon, { name: "delete" })
+            }
+          ) })
+        ] }, member.id)),
+        members.map((member) => /* @__PURE__ */ jsxs13(TableRow, { children: [
+          /* @__PURE__ */ jsx24(TableCell, { children: /* @__PURE__ */ jsx24(
+            AccountOrGroupText,
+            {
+              coId: member.id,
+              node,
+              showId: true,
+              onClick: () => {
+                onNavigate([{ coId: member.id, name: member.id }]);
               }
-            ) }),
-            /* @__PURE__ */ jsx22(TableCell, { children: value })
-          ] }, key) : null
-        )
+            }
+          ) }),
+          /* @__PURE__ */ jsx24(TableCell, { children: member.role }),
+          /* @__PURE__ */ jsx24(TableCell, { children: member.role !== "revoked" && /* @__PURE__ */ jsx24(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => onRemoveMember(member.id),
+              children: /* @__PURE__ */ jsx24(Icon, { name: "delete" })
+            }
+          ) })
+        ] }, member.id)),
+        parentGroups.map((group) => /* @__PURE__ */ jsxs13(TableRow, { children: [
+          /* @__PURE__ */ jsx24(TableCell, { children: /* @__PURE__ */ jsx24(
+            AccountOrGroupText,
+            {
+              coId: group.id,
+              node,
+              showId: true,
+              onClick: () => {
+                onNavigate([{ coId: group.id, name: group.id }]);
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx24(TableCell, { children: group.role }),
+          /* @__PURE__ */ jsx24(TableCell, { children: group.role !== "revoked" && /* @__PURE__ */ jsx24(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => onRemoveGroup(group.id),
+              children: /* @__PURE__ */ jsx24(Icon, { name: "delete" })
+            }
+          ) })
+        ] }, group.id))
       ] })
     ] }),
-    /* @__PURE__ */ jsx22(RawDataCard, { data })
+    /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "flex-end",
+          gap: "0.75rem",
+          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" })
+        ]
+      }
+    ),
+    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(
+        AccountOrGroupText,
+        {
+          coId: group.id,
+          node,
+          showId: true,
+          onClick: () => {
+            onNavigate([{ coId: group.id, name: group.id }]);
+          }
+        }
+      ) }) }, group.id)) })
+    ] }),
+    /* @__PURE__ */ jsx24(RawDataCard, { data }),
+    /* @__PURE__ */ jsx24(
+      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(
+          "div",
+          {
+            style: { display: "flex", flexDirection: "column", gap: "1rem" },
+            children: [
+              /* @__PURE__ */ jsx24(
+                Input,
+                {
+                  name: "memberId",
+                  label: addMemberType === "account" ? "Account ID" : "Group ID",
+                  placeholder: addMemberType === "account" ? "Enter account ID" : "Enter group ID",
+                  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__ */ jsxs13(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "0.75rem",
+                    justifyContent: "flex-end",
+                    marginTop: "0.5rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx24(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "secondary",
+                        onClick: () => setAddMemberType(null),
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx24(Button, { type: "submit", variant: "primary", children: "Add" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    )
   ] });
 }
 
 // src/inspector/viewer/role-display.tsx
-import { jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsxs as jsxs14 } from "react/jsx-runtime";
 function RoleDisplay({
   node,
   value
@@ -1374,24 +1770,24 @@ function RoleDisplay({
   } else {
     role = "unauthorized";
   }
-  return /* @__PURE__ */ jsxs12(Text, { children: [
+  return /* @__PURE__ */ jsxs14(Text, { children: [
     "Role: ",
     role
   ] });
 }
 
 // src/inspector/viewer/table-viewer.tsx
-import { styled as styled13 } from "goober";
-import { useMemo, useState as useState6 } from "react";
-import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
-var PaginationContainer = styled13("div")`
+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";
+var PaginationContainer = styled15("div")`
   padding: 1rem 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 `;
-var RedTooltip = styled13("span")`
+var RedTooltip = styled15("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 */
 
@@ -1428,7 +1824,7 @@ function CoValuesTableView({
   onNavigate,
   onRemove
 }) {
-  const [visibleRowsCount, setVisibleRowsCount] = useState6(10);
+  const [visibleRowsCount, setVisibleRowsCount] = useState7(10);
   const [coIdArray, visibleRows] = useMemo(() => {
     const coIdArray2 = Array.isArray(data) ? data : Object.values(data).every((k) => typeof k === "string" && isCoId(k)) ? Object.values(data).map((k) => k) : [];
     const visibleRows2 = coIdArray2.slice(0, visibleRowsCount);
@@ -1437,10 +1833,10 @@ function CoValuesTableView({
   const resolvedRows = useResolvedCoValues(visibleRows, node);
   const hasMore = visibleRowsCount < coIdArray.length;
   if (!coIdArray.length) {
-    return /* @__PURE__ */ jsx23("div", { children: "No data to display" });
+    return /* @__PURE__ */ jsx25("div", { children: "No data to display" });
   }
   if (resolvedRows.length === 0) {
-    return /* @__PURE__ */ jsx23("div", { children: "Loading..." });
+    return /* @__PURE__ */ jsx25("div", { children: "Loading..." });
   }
   const keys = Array.from(
     new Set(
@@ -1450,15 +1846,15 @@ function CoValuesTableView({
   const loadMore = () => {
     setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
   };
-  return /* @__PURE__ */ jsxs13(Fragment8, { children: [
-    /* @__PURE__ */ jsxs13(Table, { children: [
-      /* @__PURE__ */ jsx23(TableHead, { children: /* @__PURE__ */ jsxs13(TableRow, { children: [
-        ["ID", ...keys, "Action"].map((key) => /* @__PURE__ */ jsx23(TableHeader, { children: key }, key)),
-        onRemove && /* @__PURE__ */ jsx23(TableHeader, {})
+  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, {})
       ] }) }),
-      /* @__PURE__ */ jsx23(TableBody, { children: resolvedRows.slice(0, visibleRowsCount).map((item, index) => /* @__PURE__ */ jsxs13(TableRow, { children: [
-        /* @__PURE__ */ jsx23(TableCell, { children: /* @__PURE__ */ jsx23(Text, { mono: true, children: item.snapshot === "unavailable" ? /* @__PURE__ */ jsxs13(RedTooltip, { "data-text": "Unavailable", children: [
-          /* @__PURE__ */ jsx23(
+      /* @__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(
             Icon,
             {
               name: "caution",
@@ -1471,7 +1867,7 @@ function CoValuesTableView({
           ),
           visibleRows[index]
         ] }) : visibleRows[index] }) }),
-        keys.map((key) => /* @__PURE__ */ jsx23(TableCell, { children: item.snapshot !== "unavailable" && /* @__PURE__ */ jsx23(
+        keys.map((key) => /* @__PURE__ */ jsx25(TableCell, { children: item.snapshot !== "unavailable" && /* @__PURE__ */ jsx25(
           ValueRenderer,
           {
             json: item.snapshot[key],
@@ -1492,7 +1888,7 @@ function CoValuesTableView({
             }
           }
         ) }, key)),
-        /* @__PURE__ */ jsx23(TableCell, { children: /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(
           Button,
           {
             variant: "secondary",
@@ -1505,18 +1901,18 @@ function CoValuesTableView({
             children: "View"
           }
         ) }),
-        onRemove && /* @__PURE__ */ jsx23(TableCell, { children: /* @__PURE__ */ jsx23(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
+        onRemove && /* @__PURE__ */ jsx25(TableCell, { children: /* @__PURE__ */ jsx25(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
       ] }, index)) })
     ] }),
-    /* @__PURE__ */ jsxs13(PaginationContainer, { children: [
-      /* @__PURE__ */ jsxs13(Text, { muted: true, small: true, children: [
+    /* @__PURE__ */ jsxs15(PaginationContainer, { children: [
+      /* @__PURE__ */ jsxs15(Text, { muted: true, small: true, children: [
         "Showing ",
         Math.min(visibleRowsCount, coIdArray.length),
         " of",
         " ",
         coIdArray.length
       ] }),
-      hasMore && /* @__PURE__ */ jsx23(Button, { variant: "secondary", onClick: loadMore, children: "Load more" })
+      hasMore && /* @__PURE__ */ jsx25(Button, { variant: "secondary", onClick: loadMore, children: "Load more" })
     ] })
   ] });
 }
@@ -1530,7 +1926,7 @@ function TableView({
     return Array.isArray(data) && data.every((k) => isCoId(k));
   }, [data]);
   if (isListOfCoValues) {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx25(
       CoValuesTableView,
       {
         data,
@@ -1540,26 +1936,26 @@ function TableView({
       }
     );
   }
-  return /* @__PURE__ */ jsxs13(Table, { children: [
-    /* @__PURE__ */ jsx23(TableHead, { children: /* @__PURE__ */ jsxs13(TableRow, { children: [
-      /* @__PURE__ */ jsx23(TableHeader, { style: { width: "5rem" }, children: "Index" }),
-      /* @__PURE__ */ jsx23(TableHeader, { children: "Value" }),
-      onRemove && /* @__PURE__ */ jsx23(TableHeader, { children: "Action" })
+  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" })
     ] }) }),
-    /* @__PURE__ */ jsx23(TableBody, { children: Array.isArray(data) && data?.map((value, index) => /* @__PURE__ */ jsxs13(TableRow, { children: [
-      /* @__PURE__ */ jsx23(TableCell, { children: /* @__PURE__ */ jsx23(Text, { mono: true, children: index }) }),
-      /* @__PURE__ */ jsx23(TableCell, { children: /* @__PURE__ */ jsx23(ValueRenderer, { json: value }) }),
-      onRemove && /* @__PURE__ */ jsx23(TableCell, { children: /* @__PURE__ */ jsx23(Button, { variant: "secondary", onClick: () => onRemove(index), children: "Remove" }) })
+    /* @__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" }) })
     ] }, index)) })
   ] });
 }
 
 // src/inspector/viewer/page.tsx
-import { Fragment as Fragment9, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var BasePageContainer = React5.forwardRef(
-  ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ jsx24("div", { ref, ...rest })
+  ({ isTopLevel, ...rest }, ref) => /* @__PURE__ */ jsx26("div", { ref, ...rest })
 );
-var PageContainer = styled14(BasePageContainer)`
+var PageContainer = styled16(BasePageContainer)`
   position: absolute;
   z-index: 10;
   inset: 0;
@@ -1567,36 +1963,36 @@ var PageContainer = styled14(BasePageContainer)`
   height: 100%;
   padding: 0 0.75rem;
 `;
-var BackButton = styled14("div")`
+var BackButton = styled16("div")`
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 2.5rem;
 `;
-var HeaderContainer = styled14("div")`
+var HeaderContainer = styled16("div")`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
 `;
-var TitleContainer = styled14("div")`
+var TitleContainer = styled16("div")`
   display: flex;
   align-items: center;
   gap: 0.75rem;
 `;
-var Title = styled14(Heading)`
+var Title = styled16(Heading)`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.25rem;
 `;
-var BadgeContainer = styled14("div")`
+var BadgeContainer = styled16("div")`
   display: flex;
   align-items: center;
   gap: 0.75rem;
 `;
-var ContentContainer = styled14("div")`
+var ContentContainer = styled16("div")`
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -1617,7 +2013,7 @@ function View(props) {
   const { node, onNavigate } = props;
   if (!snapshot || snapshot === "unavailable") return;
   if (type === "costream") {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx26(
       CoStreamView,
       {
         data: snapshot,
@@ -1628,13 +2024,21 @@ function View(props) {
     );
   }
   if (extendedType === "group") {
-    return /* @__PURE__ */ jsx24(GroupView, { data: snapshot, node, onNavigate });
+    return /* @__PURE__ */ jsx26(
+      GroupView,
+      {
+        coValue: value,
+        data: snapshot,
+        node,
+        onNavigate
+      }
+    );
   }
   if (extendedType === "account") {
-    return /* @__PURE__ */ jsx24(AccountView, { data: snapshot, node, onNavigate });
+    return /* @__PURE__ */ jsx26(AccountView, { data: snapshot, node, onNavigate });
   }
   if (type === "coplaintext") {
-    return /* @__PURE__ */ jsx24(CoPlainTextView, { data: snapshot });
+    return /* @__PURE__ */ jsx26(CoPlainTextView, { data: snapshot });
   }
   if (type === "colist") {
     const handleRemove = (index) => {
@@ -1643,7 +2047,7 @@ function View(props) {
         list.delete(index);
       }
     };
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx26(
       TableView,
       {
         data: snapshot,
@@ -1654,9 +2058,9 @@ function View(props) {
     );
   }
   if (extendedType === "record") {
-    return /* @__PURE__ */ jsx24(TableView, { data: snapshot, node, onNavigate });
+    return /* @__PURE__ */ jsx26(TableView, { data: snapshot, node, onNavigate });
   }
-  return /* @__PURE__ */ jsx24(GridView, { data: snapshot, onNavigate, node });
+  return /* @__PURE__ */ jsx26(GridView, { data: snapshot, onNavigate, node });
 }
 function Page(props) {
   const {
@@ -1672,13 +2076,13 @@ function Page(props) {
   const coValue = useResolvedCoValue(coId, node);
   const { value, snapshot, type, extendedType } = coValue;
   if (snapshot === "unavailable") {
-    return /* @__PURE__ */ jsx24("div", { style, children: "Data unavailable" });
+    return /* @__PURE__ */ jsx26("div", { style, children: "Data unavailable" });
   }
   if (!snapshot) {
-    return /* @__PURE__ */ jsx24("div", { style });
+    return /* @__PURE__ */ jsx26("div", { style });
   }
-  return /* @__PURE__ */ jsxs14(PageContainer, { style, className, isTopLevel, children: [
-    !isTopLevel && /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs16(PageContainer, { style, className, isTopLevel, children: [
+    !isTopLevel && /* @__PURE__ */ jsx26(
       BackButton,
       {
         "aria-label": "Back",
@@ -1688,27 +2092,27 @@ function Page(props) {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx24(HeaderContainer, { children: /* @__PURE__ */ jsxs14(TitleContainer, { children: [
-      /* @__PURE__ */ jsx24(Title, { children: /* @__PURE__ */ jsxs14("span", { children: [
+    /* @__PURE__ */ jsx26(HeaderContainer, { children: /* @__PURE__ */ jsxs16(TitleContainer, { children: [
+      /* @__PURE__ */ jsx26(Title, { children: /* @__PURE__ */ jsxs16("span", { children: [
         name,
-        typeof snapshot === "object" && "name" in snapshot ? /* @__PURE__ */ jsxs14("span", { style: { color: "#57534e", fontWeight: 500 }, children: [
+        typeof snapshot === "object" && "name" in snapshot ? /* @__PURE__ */ jsxs16("span", { style: { color: "#57534e", fontWeight: 500 }, children: [
           " ",
           snapshot.name
         ] }) : null
       ] }) }),
-      /* @__PURE__ */ jsxs14(BadgeContainer, { children: [
-        /* @__PURE__ */ jsx24(Badge, { children: type && /* @__PURE__ */ jsx24(TypeIcon, { type, extendedType }) }),
-        /* @__PURE__ */ jsx24(Badge, { children: coId })
+      /* @__PURE__ */ jsxs16(BadgeContainer, { children: [
+        /* @__PURE__ */ jsx26(Badge, { children: type && /* @__PURE__ */ jsx26(TypeIcon, { type, extendedType }) }),
+        /* @__PURE__ */ jsx26(Badge, { children: coId })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs14(ContentContainer, { children: [
-      /* @__PURE__ */ jsx24(View, { ...props, coValue }),
-      extendedType !== "account" && extendedType !== "group" && /* @__PURE__ */ jsxs14(Fragment9, { children: [
-        /* @__PURE__ */ jsx24(RoleDisplay, { node, value }),
-        /* @__PURE__ */ jsxs14(Text, { muted: true, children: [
+    /* @__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: [
           "Owned by",
           " ",
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx26(
             AccountOrGroupText,
             {
               coId: value.group.id,
@@ -1726,8 +2130,8 @@ function Page(props) {
 }
 
 // src/inspector/viewer/page-stack.tsx
-import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
-var PageStackContainer = styled15("div")`
+import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+var PageStackContainer = styled17("div")`
   position: relative;
   padding: 0 0.75rem;
   overflow-y: auto;
@@ -1744,9 +2148,9 @@ function PageStack({
 }) {
   const page = path[path.length - 1];
   const index = path.length - 1;
-  return /* @__PURE__ */ jsx25(Fragment10, { children: /* @__PURE__ */ jsxs15(PageStackContainer, { children: [
+  return /* @__PURE__ */ jsx27(Fragment10, { children: /* @__PURE__ */ jsxs17(PageStackContainer, { children: [
     children,
-    node && page && /* @__PURE__ */ jsx25(
+    node && page && /* @__PURE__ */ jsx27(
       Page,
       {
         coId: page.coId,
@@ -1761,10 +2165,10 @@ function PageStack({
 }
 
 // src/inspector/viewer/use-page-path.ts
-import { useCallback, useEffect as useEffect5, useState as useState7 } from "react";
+import { useCallback, useEffect as useEffect6, useState as useState8 } from "react";
 var STORAGE_KEY = "jazz-inspector-paths";
 function usePagePath(defaultPath) {
-  const [path, setPath] = useState7(() => {
+  const [path, setPath] = useState8(() => {
     if (typeof window === "undefined") return [];
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored) {
@@ -1780,7 +2184,7 @@ function usePagePath(defaultPath) {
     setPath(newPath);
     localStorage.setItem(STORAGE_KEY, JSON.stringify(newPath));
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (defaultPath && JSON.stringify(path) !== JSON.stringify(defaultPath)) {
       updatePath(defaultPath);
     }
@@ -1818,8 +2222,8 @@ function usePagePath(defaultPath) {
 }
 
 // src/inspector/ui/global-styles.tsx
-import { styled as styled16 } from "goober";
-var GlobalStyles = styled16("div")`
+import { styled as styled18 } from "goober";
+var GlobalStyles = styled18("div")`
   /* Colors */
   --j-primary-color: #146AFF;
   --j-link-color: var(--j-primary-color);
@@ -1893,9 +2297,9 @@ var GlobalStyles = styled16("div")`
 `;
 
 // src/inspector/viewer/inspector-button.tsx
-import { styled as styled17 } from "goober";
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
-var StyledInspectorButton = styled17("button")`
+import { styled as styled19 } from "goober";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+var StyledInspectorButton = styled19("button")`
   position: fixed;
   width: 2.5rem;
   height: 2.5rem;
@@ -1926,7 +2330,7 @@ var StyledInspectorButton = styled17("button")`
   }
 }}
 `;
-var JazzIcon = styled17("svg")`
+var JazzIcon = styled19("svg")`
   width: 100%;
   height: auto;
   position: relative;
@@ -1937,8 +2341,8 @@ function InspectorButton({
   position = "right",
   ...buttonProps
 }) {
-  return /* @__PURE__ */ jsxs16(StyledInspectorButton, { position, ...buttonProps, children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs18(StyledInspectorButton, { position, ...buttonProps, children: [
+    /* @__PURE__ */ jsx28(
       JazzIcon,
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1946,7 +2350,7 @@ function InspectorButton({
         height: "115",
         viewBox: "0 0 119 115",
         fill: "none",
-        children: /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx28(
           "path",
           {
             fillRule: "evenodd",
@@ -1957,7 +2361,7 @@ function InspectorButton({
         )
       }
     ),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx28(
       "span",
       {
         style: {
@@ -1978,148 +2382,30 @@ function InspectorButton({
 }
 
 // src/inspector/viewer/use-open-inspector.ts
-import { useEffect as useEffect6, useState as useState8 } from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 var STORAGE_KEY2 = "jazz-inspector-open";
 function useOpenInspector() {
-  const [open, setOpen] = useState8(() => {
+  const [open, setOpen] = useState9(() => {
     if (typeof window === "undefined") return false;
     const stored = localStorage.getItem(STORAGE_KEY2);
     return stored ? JSON.parse(stored) : false;
   });
-  useEffect6(() => {
+  useEffect7(() => {
     localStorage.setItem(STORAGE_KEY2, JSON.stringify(open));
   }, [open]);
   return [open, setOpen];
 }
 
-// src/inspector/ui/modal.tsx
-import { styled as styled18 } from "goober";
-import { forwardRef as forwardRef3, useEffect as useEffect7, useRef } from "react";
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
-var ModalContent = styled18("dialog")`
-  background-color: var(--j-background);
-  border-radius: var(--j-radius-lg);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-  border: 1px solid var(--j-border-color);
-  max-width: 32rem;
-  margin-block: auto;
-  margin-inline: auto;
-  &::backdrop {
-    background-color: rgba(0, 0, 0, 0.7);
-  }
-  
-`;
-var ModalHeader = styled18("div")`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 1.5rem 1.5rem 0 1.5rem;
-  gap: 1rem;
-`;
-var ModalBody = styled18("div")`
-  padding: 1rem 1.5rem;
-  flex: 1;
-`;
-var ModalFooter = styled18("div")`
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding: 0 1.5rem 1.5rem 1.5rem;
-`;
-var CloseButton = styled18("button")`
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: var(--j-radius-sm);
-  color: var(--j-text-color);
-  font-size: 1.25rem;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  min-height: 2rem;
-  
-  &:hover {
-    background-color: var(--j-foreground);
-  }
-  
-  &:focus-visible {
-    outline: 2px solid var(--j-border-focus);
-    outline-offset: 2px;
-  }
-`;
-var Modal = forwardRef3(
-  ({
-    isOpen,
-    onClose,
-    heading,
-    text,
-    children,
-    confirmText = "Confirm",
-    cancelText = "Cancel",
-    onConfirm,
-    onCancel,
-    showButtons = true,
-    className
-  }, ref) => {
-    const modalRef = useRef(null);
-    useEffect7(() => {
-      if (isOpen) {
-        modalRef.current?.showModal();
-      } else {
-        onClose();
-        modalRef.current?.close();
-      }
-    }, [isOpen, onClose]);
-    const handleConfirm = () => {
-      onConfirm?.();
-      onClose();
-    };
-    const handleCancel = () => {
-      onCancel?.();
-      onClose();
-    };
-    if (!isOpen) return null;
-    return /* @__PURE__ */ jsxs17(
-      ModalContent,
-      {
-        ref: ref || modalRef,
-        className,
-        role: "dialog",
-        "aria-labelledby": "modal-heading",
-        onClose,
-        children: [
-          /* @__PURE__ */ jsxs17(ModalHeader, { children: [
-            /* @__PURE__ */ jsx27(Heading, { id: "modal-heading", children: heading }),
-            /* @__PURE__ */ jsx27(CloseButton, { onClick: onClose, "aria-label": "Close modal", type: "button", children: "\xD7" })
-          ] }),
-          /* @__PURE__ */ jsxs17(ModalBody, { children: [
-            text && /* @__PURE__ */ jsx27("p", { style: { margin: "0 0 1rem 0", color: "var(--j-text-color)" }, children: text }),
-            children
-          ] }),
-          showButtons && /* @__PURE__ */ jsxs17(ModalFooter, { children: [
-            /* @__PURE__ */ jsx27(Button, { variant: "secondary", onClick: handleCancel, children: cancelText }),
-            /* @__PURE__ */ jsx27(Button, { variant: "primary", onClick: handleConfirm, children: confirmText })
-          ] })
-        ]
-      }
-    );
-  }
-);
-Modal.displayName = "Modal";
-
 // src/inspector/viewer/delete-local-data.tsx
-import { useState as useState9 } from "react";
-import { Fragment as Fragment11, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var DELETE_LOCAL_DATA_STRING = "delete my local data";
 function DeleteLocalData() {
-  const [showDeleteModal, setShowDeleteModal] = useState9(false);
-  const [confirmDeleteString, setConfirmDeleteString] = useState9("");
-  return /* @__PURE__ */ jsxs18(Fragment11, { children: [
-    /* @__PURE__ */ jsx28(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
-    /* @__PURE__ */ jsxs18(
+  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(
       Modal,
       {
         isOpen: showDeleteModal,
@@ -2127,7 +2413,7 @@ function DeleteLocalData() {
         heading: "Delete Local Data",
         showButtons: false,
         children: [
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs19(
             "div",
             {
               style: {
@@ -2138,33 +2424,33 @@ function DeleteLocalData() {
                 gap: "0.5rem"
               },
               children: [
-                /* @__PURE__ */ jsxs18("p", { children: [
+                /* @__PURE__ */ jsxs19("p", { children: [
                   "This action ",
-                  /* @__PURE__ */ jsx28("strong", { children: "cannot" }),
+                  /* @__PURE__ */ jsx29("strong", { children: "cannot" }),
                   " be undone."
                 ] }),
-                /* @__PURE__ */ jsxs18("p", { children: [
+                /* @__PURE__ */ jsxs19("p", { children: [
                   "Be aware that the following data will be",
                   " ",
-                  /* @__PURE__ */ jsx28("strong", { children: "permanently" }),
+                  /* @__PURE__ */ jsx29("strong", { children: "permanently" }),
                   " deleted:"
                 ] }),
-                /* @__PURE__ */ jsxs18("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
-                  /* @__PURE__ */ jsxs18("li", { children: [
+                /* @__PURE__ */ jsxs19("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
+                  /* @__PURE__ */ jsxs19("li", { children: [
                     "Unsynced data for ",
-                    /* @__PURE__ */ jsx28("strong", { children: "all apps" }),
+                    /* @__PURE__ */ jsx29("strong", { children: "all apps" }),
                     " on",
                     " ",
-                    /* @__PURE__ */ jsx28("code", { children: window.location.origin })
+                    /* @__PURE__ */ jsx29("code", { children: window.location.origin })
                   ] }),
-                  /* @__PURE__ */ jsx28("li", { children: "Accounts" }),
-                  /* @__PURE__ */ jsx28("li", { children: "Logged in sessions" })
+                  /* @__PURE__ */ jsx29("li", { children: "Accounts" }),
+                  /* @__PURE__ */ jsx29("li", { children: "Logged in sessions" })
                 ] }),
-                /* @__PURE__ */ jsx28("p", {})
+                /* @__PURE__ */ jsx29("p", {})
               ]
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             Input,
             {
               label: `Type "${DELETE_LOCAL_DATA_STRING}" to confirm`,
@@ -2175,7 +2461,7 @@ function DeleteLocalData() {
               }
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "p",
             {
               style: {
@@ -2185,14 +2471,14 @@ function DeleteLocalData() {
                 flexDirection: "column",
                 gap: "0.5rem"
               },
-              children: /* @__PURE__ */ jsxs18("small", { children: [
+              children: /* @__PURE__ */ jsxs19("small", { children: [
                 "Data synced to a sync server will ",
-                /* @__PURE__ */ jsx28("strong", { children: "not" }),
+                /* @__PURE__ */ jsx29("strong", { children: "not" }),
                 " be deleted, and will be synced when you log in again."
               ] })
             }
           ),
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs19(
             "div",
             {
               style: {
@@ -2202,8 +2488,8 @@ function DeleteLocalData() {
                 gap: "0.5rem"
               },
               children: [
-                /* @__PURE__ */ jsx28(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
-                /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsx29(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
+                /* @__PURE__ */ jsx29(
                   Button,
                   {
                     variant: "destructive",
@@ -2230,8 +2516,8 @@ function DeleteLocalData() {
 }
 
 // src/inspector/viewer/new-app.tsx
-import { Fragment as Fragment12, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
-var InspectorContainer = styled19("div")`
+import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+var InspectorContainer = styled20("div")`
   position: fixed;
   height: 50vh;
   max-height: 800px;
@@ -2248,17 +2534,17 @@ var InspectorContainer = styled19("div")`
     background-color: var(--j-background);
   }
 `;
-var HeaderContainer2 = styled19("div")`
+var HeaderContainer2 = styled20("div")`
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0 0.75rem;
   margin: 0.75rem 0;
 `;
-var Form = styled19("form")`
+var Form = styled20("form")`
   width: 24rem;
 `;
-var InitialForm = styled19("form")`
+var InitialForm = styled20("form")`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -2270,7 +2556,7 @@ var InitialForm = styled19("form")`
   max-width: 24rem;
   margin: 0 auto;
 `;
-var OrText = styled19("p")`
+var OrText = styled20("p")`
   text-align: center;
 `;
 function JazzInspectorInternal({
@@ -2279,7 +2565,7 @@ function JazzInspectorInternal({
   accountId
 }) {
   const [open, setOpen] = useOpenInspector();
-  const [coValueId, setCoValueId] = useState10("");
+  const [coValueId, setCoValueId] = useState11("");
   const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
   const handleCoValueIdSubmit = (e) => {
     e.preventDefault();
@@ -2289,12 +2575,12 @@ function JazzInspectorInternal({
     setCoValueId("");
   };
   if (!open) {
-    return /* @__PURE__ */ jsx29(InspectorButton, { position, onClick: () => setOpen(true) });
+    return /* @__PURE__ */ jsx30(InspectorButton, { position, onClick: () => setOpen(true) });
   }
-  return /* @__PURE__ */ jsxs19(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
-    /* @__PURE__ */ jsxs19(HeaderContainer2, { children: [
-      /* @__PURE__ */ jsx29(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
-      /* @__PURE__ */ jsx29(Form, { onSubmit: handleCoValueIdSubmit, children: path.length !== 0 && /* @__PURE__ */ jsx29(
+  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(
         Input,
         {
           label: "CoValue ID",
@@ -2305,24 +2591,24 @@ function JazzInspectorInternal({
           onChange: (e) => setCoValueId(e.target.value)
         }
       ) }),
-      /* @__PURE__ */ jsx29(DeleteLocalData, {}),
-      /* @__PURE__ */ jsx29(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
+      /* @__PURE__ */ jsx30(DeleteLocalData, {}),
+      /* @__PURE__ */ jsx30(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
     ] }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       PageStack,
       {
         path,
         node: localNode,
         goBack,
         addPages,
-        children: path.length <= 0 && /* @__PURE__ */ jsxs19(
+        children: path.length <= 0 && /* @__PURE__ */ jsxs20(
           InitialForm,
           {
             onSubmit: handleCoValueIdSubmit,
             "aria-hidden": path.length !== 0,
             children: [
-              /* @__PURE__ */ jsx29(Heading, { children: "Jazz CoValue Inspector" }),
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(Heading, { children: "Jazz CoValue Inspector" }),
+              /* @__PURE__ */ jsx30(
                 Input,
                 {
                   label: "CoValue ID",
@@ -2333,10 +2619,10 @@ function JazzInspectorInternal({
                   onChange: (e) => setCoValueId(e.target.value)
                 }
               ),
-              /* @__PURE__ */ jsx29(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
-              accountId && /* @__PURE__ */ jsxs19(Fragment12, { children: [
-                /* @__PURE__ */ jsx29(OrText, { children: "or" }),
-                /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
+              accountId && /* @__PURE__ */ jsxs20(Fragment12, { children: [
+                /* @__PURE__ */ jsx30(OrText, { children: "or" }),
+                /* @__PURE__ */ jsx30(
                   Button,
                   {
                     variant: "secondary",
@@ -2356,60 +2642,6 @@ function JazzInspectorInternal({
   ] });
 }
 
-// src/inspector/ui/select.tsx
-import { styled as styled20 } from "goober";
-import { useId as useId2 } from "react";
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
-var SelectContainer = styled20("div")`
-  display: grid;
-  gap: 0.25rem;
-`;
-var SelectWrapper = styled20("div")`
-  position: relative;
-  display: flex;
-  align-items: center;
-`;
-var StyledSelect = styled20("select")`
-  width: 100%;
-  border-radius: var(--j-radius-md);
-  border: 1px solid var(--j-border-color);
-  padding: 0.5rem 0.875rem 0.5rem 0.875rem;
-  padding-right: 2rem;
-  box-shadow: var(--j-shadow-sm);
-  font-weight: 500;
-  color: var(--j-text-color-strong);
-  appearance: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--j-foreground);
-  }
-`;
-var SelectIcon = styled20("span")`
-  position: absolute;
-  right: 0.5em;
-  color: var(--j-neutral-400);
-  pointer-events: none;
-
-  @media (prefers-color-scheme: dark) {
-    color: var(--j-neutral-900);
-  }
-`;
-function Select(props) {
-  const { label, hideLabel, id: customId, className, ...selectProps } = props;
-  const generatedId = useId2();
-  const id = customId || generatedId;
-  return /* @__PURE__ */ jsxs20(SelectContainer, { className, children: [
-    /* @__PURE__ */ jsx30("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
-    /* @__PURE__ */ jsxs20(SelectWrapper, { children: [
-      /* @__PURE__ */ jsx30(StyledSelect, { ...selectProps, id, children: props.children }),
-      /* @__PURE__ */ jsx30(SelectIcon, { children: /* @__PURE__ */ jsx30(Icon, { name: "chevronDown", size: "sm" }) })
-    ] })
-  ] });
-}
-
 // src/inspector/index.tsx
 import { setup } from "goober";
 import { useJazzContext } from "jazz-tools/react-core";