jazz-tools 0.19.10 → 0.19.11

package/src/inspector/ui/modal.tsx

@@ -15,14 +15,15 @@ interface ModalProps {
   onCancel?: () => void;
   showButtons?: boolean;
   className?: string;
+  wide?: boolean;
 }
 
-const ModalContent = styled("dialog")`
+const ModalContent = styled("dialog")<{ wide?: boolean }>`
   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;
+  ${(props) => (props.wide ? "max-width: 60vw;" : "max-width: 32rem;")}
   margin-block: auto;
   margin-inline: auto;
   &::backdrop {
@@ -90,6 +91,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onCancel,
       showButtons = true,
       className,
+      wide = false,
     },
     ref,
   ) => {
@@ -123,6 +125,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         role="dialog"
         aria-labelledby="modal-heading"
         onClose={onClose}
+        wide={wide}
       >
         <ModalHeader>
           <Heading id="modal-heading">{heading}</Heading>

package/src/inspector/viewer/breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import { styled } from "goober";
 import React from "react";
 import { Button } from "../ui/button.js";
-import { PageInfo } from "./types.js";
+import { useRouter } from "../router/context.js";
 
 const BreadcrumbsContainer = styled("div")`
   position: relative;
@@ -15,21 +15,15 @@ const Separator = styled("span")`
   padding: 0 0.125rem;
 `;
 
-interface BreadcrumbsProps {
-  path: PageInfo[];
-  onBreadcrumbClick: (index: number) => void;
-}
+export const Breadcrumbs: React.FC<{}> = () => {
+  const { path, goToIndex } = useRouter();
 
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
-  path,
-  onBreadcrumbClick,
-}) => {
   return (
     <BreadcrumbsContainer>
       <Button
         variant="link"
         style={{ padding: "0 0.25rem" }}
-        onClick={() => onBreadcrumbClick(-1)}
+        onClick={() => goToIndex(-1)}
       >
         Home
       </Button>
@@ -40,7 +34,7 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
             <Button
               variant="link"
               style={{ padding: "0 0.25rem" }}
-              onClick={() => onBreadcrumbClick(index)}
+              onClick={() => goToIndex(index)}
             >
               {index === 0 ? page.name || "Root" : page.name}
             </Button>

package/src/inspector/viewer/header.tsx

@@ -0,0 +1,67 @@
+import { CoID, RawCoValue } from "cojson";
+import { styled } from "goober";
+import React, { type PropsWithChildren, useState } from "react";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { Breadcrumbs } from "./breadcrumbs.js";
+import { DeleteLocalData } from "./delete-local-data.js";
+import { useRouter } from "../router/context.js";
+
+export function Header({
+  showDeleteLocalData = false,
+  showClose = false,
+  onClose,
+  children,
+}: PropsWithChildren<{
+  showDeleteLocalData?: boolean;
+  showClose?: boolean;
+  onClose?: () => void;
+}>) {
+  const [coValueId, setCoValueId] = useState<CoID<RawCoValue> | "">("");
+  const { path, setPage } = useRouter();
+
+  const handleCoValueIdSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (coValueId) {
+      setPage(coValueId);
+    }
+    setCoValueId("");
+  };
+
+  return (
+    <HeaderContainer>
+      <Breadcrumbs />
+      {path.length !== 0 && (
+        <Form onSubmit={handleCoValueIdSubmit}>
+          <Input
+            label="CoValue ID"
+            style={{ fontFamily: "monospace" }}
+            hideLabel
+            placeholder="co_z1234567890abcdef123456789"
+            value={coValueId}
+            onChange={(e) => setCoValueId(e.target.value as CoID<RawCoValue>)}
+          />
+        </Form>
+      )}
+      {children}
+      {showDeleteLocalData && <DeleteLocalData />}
+      {showClose && (
+        <Button variant="plain" type="button" onClick={onClose}>
+          Close
+        </Button>
+      )}
+    </HeaderContainer>
+  );
+}
+
+const HeaderContainer = styled("div")`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 0.75rem;
+  margin: 0.75rem 0;
+`;
+
+const Form = styled("form")`
+  width: 24rem;
+`;

package/src/inspector/viewer/page-stack.tsx

@@ -2,23 +2,11 @@ import { CoID, LocalNode, RawCoValue } from "cojson";
 import { styled } from "goober";
 import { Page } from "./page.js";
 import { ErrorBoundary } from "../ui/error-boundary.js";
+import { useRouter } from "../router/context.js";
+import { useNode } from "../contexts/node.js";
+import { HomePage } from "../pages/home.js";
 
-// Define the structure of a page in the path
-interface PageInfo {
-  coId: CoID<RawCoValue>;
-  name?: string;
-}
-
-// Props for the PageStack component
-interface PageStackProps {
-  path: PageInfo[];
-  node?: LocalNode | null;
-  goBack: () => void;
-  addPages: (pages: PageInfo[]) => void;
-  children?: React.ReactNode;
-}
-
-const PageStackContainer = styled("div")`
+const PageStackContainer = styled("article")`
   position: relative;
   padding: 0 0.75rem;
   overflow-y: auto;
@@ -27,25 +15,29 @@ const PageStackContainer = styled("div")`
   font-size: 16px;
 `;
 
-export function PageStack({
-  path,
-  node,
-  goBack,
-  addPages,
-  children,
-}: PageStackProps) {
+type PageStackProps = {
+  homePage?: React.ReactNode;
+};
+
+export function PageStack({ homePage }: PageStackProps) {
+  const { path, addPages, goBack } = useRouter();
+  const { localNode } = useNode();
+
   const page = path[path.length - 1];
   const index = path.length - 1;
 
+  if (path.length <= 0) {
+    return <PageStackContainer>{homePage ?? <HomePage />}</PageStackContainer>;
+  }
+
   return (
     <>
       <PageStackContainer>
-        {children}
-        {node && page && (
+        {localNode && page && (
           <ErrorBoundary title="An error occurred while rendering this CoValue">
             <Page
               coId={page.coId}
-              node={node}
+              node={localNode}
               name={page.name || page.coId}
               onHeaderClick={goBack}
               onNavigate={addPages}

package/src/inspector/viewer/page.tsx

@@ -6,7 +6,6 @@ import {
   RawCoPlainText,
   RawCoStream,
   RawCoValue,
-  RawGroup,
 } from "cojson";
 import { styled } from "goober";
 import React from "react";

package/src/tools/coValues/account.ts

@@ -273,7 +273,13 @@ export class Account extends CoValueBase implements CoValue {
       creationProps: { name: string };
       onCreate?: (account: A, worker: Account) => Promise<void>;
     },
-  ) {
+  ): Promise<{
+    credentials: {
+      accountID: string;
+      accountSecret: AgentSecret;
+    };
+    account: A;
+  }> {
     const crypto = worker.$jazz.localNode.crypto;
 
     const connectedPeers = cojsonInternals.connectedPeers(
@@ -290,6 +296,11 @@ export class Account extends CoValueBase implements CoValue {
       peers: [connectedPeers[0]],
     });
 
+    const credentials = {
+      accountID: account.$jazz.id,
+      accountSecret: account.$jazz.localNode.getCurrentAgent().agentSecret,
+    };
+
     // Load the worker inside the account node
     const loadedWorker = await Account.load(worker.$jazz.id, {
       loadAs: account,
@@ -314,7 +325,7 @@ export class Account extends CoValueBase implements CoValue {
     // Close the account node, to avoid leaking memory
     account.$jazz.localNode.gracefulShutdown();
 
-    return createdAccount;
+    return { credentials, account: createdAccount };
   }
 
   static fromNode<A extends Account>(

package/src/tools/implementation/zodSchema/schemaTypes/AccountSchema.ts

@@ -26,6 +26,7 @@ import {
 import { CoOptionalSchema } from "./CoOptionalSchema.js";
 import { CoreResolveQuery } from "./CoValueSchema.js";
 import { withSchemaResolveQuery } from "../../schemaUtils.js";
+import { AgentSecret } from "cojson";
 
 export type BaseProfileShape = {
   name: z.core.$ZodString<string>;
@@ -103,8 +104,14 @@ export class AccountSchema<
         worker: Account,
       ) => Promise<void>;
     },
+  ): Promise<{
+    credentials: {
+      accountID: string;
+      accountSecret: AgentSecret;
+    };
     // @ts-expect-error we can't statically enforce the schema's resolve query is a valid resolve query, but in practice it is
-  ): Promise<Loaded<AccountSchema<Shape>, DefaultResolveQuery>> {
+    account: Loaded<AccountSchema<Shape>, DefaultResolveQuery>;
+  }> {
     // @ts-expect-error
     return this.coValueClass.createAs(worker, options);
   }

package/src/tools/tests/account.test.ts

@@ -467,7 +467,7 @@ describe("createAs", () => {
       { owner: worker },
     );
 
-    const createdAccount = await CustomAccount.createAs(worker, {
+    const created = await CustomAccount.createAs(worker, {
       creationProps: { name: "Test Account" },
       onCreate: async (account, loadedWorker) => {
         executionOrder.push("onCreate");
@@ -490,11 +490,18 @@ describe("createAs", () => {
       },
     });
 
-    assertLoaded(createdAccount);
-    assertLoaded(createdAccount.root);
+    assertLoaded(created.account);
+    assertLoaded(created.account.root);
+
+    expect(created.credentials.accountID).toBe(created.account.$jazz.id);
+    // ensure we get the created, not the creat*ing* account credentials
+    expect(created.credentials.accountID).not.toBe(worker.$jazz.id);
+    expect(created.credentials.accountSecret).not.toBe(
+      worker.$jazz.localNode.getCurrentAgent().agentSecret,
+    );
 
     // Verify onCreate was called and root was set from worker
-    expect(createdAccount.root.value).toBe("worker-root");
+    expect(created.account.root.value).toBe("worker-root");
 
     // Verify execution order
     expect(executionOrder).toEqual(["migration", "onCreate"]);

package/src/tools/tests/schema.resolved.test.ts

@@ -246,7 +246,7 @@ describe("Schema.resolved()", () => {
           profile: true,
         });
 
-        const account = await AccountWithProfile.createAs(serverAccount, {
+        const { account } = await AccountWithProfile.createAs(serverAccount, {
           creationProps: { name: "Hermes Puggington" },
           onCreate: async (account) => {
             account.$jazz.set(
@@ -405,7 +405,7 @@ describe("Schema.resolved()", () => {
       test("for Account", async () => {
         const AccountWithProfile = co.account().resolved({ profile: true });
 
-        const account = await AccountWithProfile.createAs(serverAccount, {
+        const { account } = await AccountWithProfile.createAs(serverAccount, {
           creationProps: { name: "Hermes Puggington" },
           onCreate: async (account) => {
             account.$jazz.set(
@@ -561,7 +561,7 @@ describe("Schema.resolved()", () => {
           .list(TestAccount)
           .resolved({ $each: TestAccount.resolveQuery });
 
-        const account = await TestAccount.createAs(serverAccount, {
+        const { account } = await TestAccount.createAs(serverAccount, {
           creationProps: { name: "Hermes Puggington" },
           onCreate: async (account) => {
             account.$jazz.set(

package/tsup.config.ts

@@ -58,6 +58,7 @@ export default defineConfig([
     ...cfg,
     entry: {
       index: "src/inspector/index.tsx",
+      standalone: "src/inspector/standalone.tsx",
     },
     outDir: "dist/inspector",
     esbuildOptions: (options) => {