jazz-tools 0.19.0 → 0.19.2

package/src/inspector/tests/viewer/comap-view.test.tsx

@@ -0,0 +1,581 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createJazzTestAccount, setupJazzTestSync } from "jazz-tools/testing";
+import { co, z } from "jazz-tools";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { CoMapView } from "../../viewer/co-map-view";
+import { setup } from "goober";
+import React from "react";
+import { JsonObject } from "cojson";
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+describe("CoMapView", async () => {
+  const account = await setupJazzTestSync();
+
+  beforeAll(() => {
+    setup(React.createElement);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe("Basic Rendering", () => {
+    it("should render GridView with data", async () => {
+      const value = co
+        .map({
+          pet: z.string(),
+          age: z.number(),
+        })
+        .create({ pet: "dog", age: 10 }, account);
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      expect(screen.getByText("pet")).toBeDefined();
+      expect(screen.getByText("age")).toBeDefined();
+      expect(screen.getByText("dog")).toBeDefined();
+      expect(screen.getByText("10")).toBeDefined();
+    });
+
+    it("should render restore button", async () => {
+      const value = co
+        .map({
+          foo: z.string(),
+        })
+        .create({ foo: "bar" }, account);
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      expect(restoreButton).toBeDefined();
+    });
+  });
+
+  describe("Timestamp Selection", () => {
+    it("should display timestamps and allow selection", async () => {
+      const value = co
+        .map({
+          pet: z.string(),
+        })
+        .create({ pet: "dog" }, account);
+
+      await sleep(2);
+      value.$jazz.set("pet", "cat");
+      await sleep(2);
+      value.$jazz.set("pet", "bird");
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      const slider = screen.getByRole("slider") as HTMLInputElement;
+      expect(slider).toBeDefined();
+      expect(slider.max).toBe("2");
+
+      fireEvent.change(slider, { target: { value: "0" } });
+      expect(slider.value).toBe("0");
+
+      fireEvent.change(slider, { target: { value: "1" } });
+      expect(slider.value).toBe("1");
+    });
+
+    it("should show timestamp in ISO format", async () => {
+      const value = co
+        .map({
+          foo: z.string(),
+        })
+        .create({ foo: "bar" }, account);
+
+      value.$jazz.set("foo", "baz");
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      const timestampDisplay = screen.getAllByText(/\d{4}-\d{2}-\d{2}T/)[0];
+      expect(timestampDisplay).toBeDefined();
+    });
+
+    it("should update preview when timestamp changes", async () => {
+      const value = co
+        .map({
+          pet: z.string(),
+        })
+        .create({ pet: "dog" }, account);
+
+      // wait to have different timestamps in transactions
+      await sleep(2);
+      value.$jazz.set("pet", "cat");
+      await sleep(2);
+      value.$jazz.set("pet", "bird");
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      const slider = screen.getByRole("slider") as HTMLInputElement;
+      const preview = screen.getByText(/State at that time:/);
+      expect(preview).toBeDefined();
+
+      // Modal starts at the most recent timestamp (last index)
+      await waitFor(() => {
+        const previewPre = preview.parentElement?.querySelector("pre");
+        expect(previewPre?.textContent).toContain("bird");
+      });
+
+      fireEvent.change(slider, { target: { value: 0 } });
+      await waitFor(() => {
+        const previewPre = preview.parentElement?.querySelector("pre");
+        expect(previewPre?.textContent).toContain("dog");
+      });
+    });
+  });
+
+  describe("Remove Unknown Properties Checkbox", () => {
+    it("should toggle checkbox state", async () => {
+      const value = co
+        .map({
+          foo: z.string(),
+        })
+        .create({ foo: "bar" }, account);
+
+      value.$jazz.set("foo", "baz");
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      const checkbox = screen.getByRole("checkbox") as HTMLInputElement;
+      expect(checkbox.checked).toBe(false);
+
+      fireEvent.click(checkbox);
+      expect(checkbox.checked).toBe(true);
+
+      fireEvent.click(checkbox);
+      expect(checkbox.checked).toBe(false);
+    });
+  });
+
+  describe("Restore Functionality", () => {
+    it("should show preview of state to restore", async () => {
+      const value = co
+        .map({
+          pet: z.string(),
+          age: z.number(),
+        })
+        .create({ pet: "dog", age: 10 }, account);
+
+      await sleep(2);
+      value.$jazz.set("pet", "cat");
+      value.$jazz.set("age", 20);
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      const slider = screen.getByRole("slider") as HTMLInputElement;
+      fireEvent.change(slider, { target: { value: 0 } });
+
+      await waitFor(() => {
+        const preview = screen.getByText(/State at that time:/);
+        const previewPre = preview.parentElement?.querySelector("pre");
+        expect(previewPre?.textContent).toContain("dog");
+        expect(previewPre?.textContent).toContain("10");
+      });
+    });
+
+    it("should close modal when restore is clicked", async () => {
+      const value = co
+        .map({
+          pet: z.string(),
+          age: z.number(),
+        })
+        .create({ pet: "dog", age: 10 }, account);
+
+      await sleep(2);
+      value.$jazz.set("pet", "cat");
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      expect(screen.getByText("Select Timestamp")).toBeDefined();
+
+      const slider = screen.getByRole("slider") as HTMLInputElement;
+      fireEvent.change(slider, { target: { value: 0 } });
+
+      const restoreActionButton = screen.getByText("Restore");
+      fireEvent.click(restoreActionButton);
+
+      await waitFor(() => {
+        expect(screen.queryByText("Select Timestamp")).toBeNull();
+      });
+    });
+
+    it("should allow selecting timestamp and checking remove properties option", async () => {
+      const value = co
+        .map({
+          pet: z.string(),
+          age: z.number().optional(),
+        })
+        .create({ pet: "dog" }, account);
+
+      await sleep(2);
+      value.$jazz.set("age", 10);
+      await sleep(2);
+      value.$jazz.set("pet", "cat");
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      const checkbox = screen.getByRole("checkbox") as HTMLInputElement;
+      expect(checkbox.checked).toBe(false);
+
+      fireEvent.click(checkbox);
+      expect(checkbox.checked).toBe(true);
+
+      // Change to earlier timestamp
+      const slider = screen.getByRole("slider") as HTMLInputElement;
+      fireEvent.change(slider, { target: { value: "0" } });
+
+      await waitFor(() => {
+        const preview = screen.getByText(/State at that time:/);
+        const previewPre = preview.parentElement?.querySelector("pre");
+        expect(previewPre?.textContent).toContain("dog");
+      });
+
+      const restoreActionButton = screen.getByText(
+        "Restore",
+      ) as HTMLButtonElement;
+      expect(restoreActionButton.disabled).toBe(false);
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle empty CoMap", async () => {
+      const value = co.map({}).create({}, account);
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      expect(screen.getByTitle("Timeline")).toBeDefined();
+    });
+
+    it("should handle complex data types", async () => {
+      const value = co
+        .map({
+          obj: z.object({
+            name: z.string(),
+            count: z.number(),
+          }),
+          date: z.date(),
+          bool: z.boolean(),
+        })
+        .create(
+          {
+            obj: { name: "test", count: 42 },
+            date: new Date("2024-01-01"),
+            bool: true,
+          },
+          account,
+        );
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      expect(screen.getByText("obj")).toBeDefined();
+      expect(screen.getByText("date")).toBeDefined();
+      expect(screen.getByText("bool")).toBeDefined();
+    });
+
+    it("should not allow restoring to same state (no changes)", async () => {
+      const value = co
+        .map({
+          pet: z.string(),
+        })
+        .create({ pet: "dog" }, account);
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      expect(screen.queryByRole("slider")).toBeNull();
+    });
+
+    it("should handle multiple property changes at different times", async () => {
+      const value = co
+        .map({
+          a: z.string(),
+          b: z.string(),
+          c: z.string(),
+        })
+        .create({ a: "1", b: "2", c: "3" }, account);
+
+      await sleep(2);
+      value.$jazz.set("a", "4");
+      await sleep(2);
+      value.$jazz.set("b", "5");
+      await sleep(2);
+      value.$jazz.set("c", "6");
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      const slider = screen.getByRole("slider") as HTMLInputElement;
+
+      // Verify we can navigate to initial state
+      fireEvent.change(slider, { target: { value: 0 } });
+      await waitFor(() => {
+        const preview = screen.getByText(/State at that time:/);
+        const previewPre = preview.parentElement?.querySelector("pre");
+        expect(previewPre?.textContent).toContain("1");
+        expect(previewPre?.textContent).toContain("2");
+        expect(previewPre?.textContent).toContain("3");
+      });
+
+      // Verify we can navigate to latest state
+      fireEvent.change(slider, { target: { value: slider.max } });
+      await waitFor(() => {
+        const preview = screen.getByText(/State at that time:/);
+        const previewPre = preview.parentElement?.querySelector("pre");
+        expect(previewPre?.textContent).toContain("4");
+        expect(previewPre?.textContent).toContain("5");
+        expect(previewPre?.textContent).toContain("6");
+      });
+    });
+  });
+
+  describe("Preview Display", () => {
+    it("should show JSON preview of selected state", async () => {
+      const value = co
+        .map({
+          pet: z.string(),
+          age: z.number(),
+        })
+        .create({ pet: "dog", age: 10 }, account);
+
+      // wait to have different timestamps in transactions
+      await sleep(2);
+
+      value.$jazz.set("pet", "cat");
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      // Modal starts at most recent timestamp
+      const preview = screen.getByText(/State at that time:/);
+      await waitFor(() => {
+        const previewPre = preview.parentElement?.querySelector("pre");
+        expect(previewPre?.textContent).toContain("cat");
+      });
+
+      const slider = screen.getByRole("slider") as HTMLInputElement;
+      fireEvent.change(slider, { target: { value: "0" } });
+
+      await waitFor(
+        () => {
+          const previewPre = preview.parentElement?.querySelector("pre");
+          expect(previewPre?.textContent).toContain("dog");
+        },
+        {
+          timeout: 1000,
+        },
+      );
+    });
+
+    it("should update preview when slider moves", async () => {
+      const value = co
+        .map({
+          counter: z.number(),
+        })
+        .create({ counter: 1 }, account);
+
+      // wait to have different timestamps in transactions
+      await sleep(2);
+      value.$jazz.set("counter", 2);
+      await sleep(2);
+      value.$jazz.set("counter", 3);
+      await sleep(2);
+      value.$jazz.set("counter", 4);
+
+      const data = value.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={value.$jazz.raw}
+          data={data}
+          node={account.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      const slider = screen.getByRole("slider") as HTMLInputElement;
+      const preview = screen.getByText(/State at that time:/);
+
+      // Modal starts at most recent timestamp (counter: 4)
+      await waitFor(() => {
+        const previewPre = preview.parentElement?.querySelector("pre");
+        expect(previewPre?.textContent).toContain('"counter": 4');
+      });
+
+      fireEvent.change(slider, { target: { value: "0" } });
+      await waitFor(() => {
+        const previewPre = preview.parentElement?.querySelector("pre");
+        expect(previewPre?.textContent).toContain('"counter": 1');
+      });
+
+      fireEvent.change(slider, { target: { value: "2" } });
+      await waitFor(() => {
+        const previewPre = preview.parentElement?.querySelector("pre");
+        expect(previewPre?.textContent).toContain('"counter": 3');
+      });
+    });
+  });
+});

package/src/inspector/ui/icon.tsx

@@ -1,13 +1,19 @@
 import { CautionIcon } from "./icons/caution.js";
 import { ChevronDownIcon } from "./icons/chevron-down-icon.js";
 import { DeleteIcon } from "./icons/delete-icon.js";
+import { EditIcon } from "./icons/edit-icon.js";
 import { LinkIcon } from "./icons/link-icon.js";
+import { HistoryIcon } from "./icons/history.js";
+import { AddIcon } from "./icons/add-icon.js";
 
 const icons = {
   caution: CautionIcon,
   chevronDown: ChevronDownIcon,
   delete: DeleteIcon,
+  edit: EditIcon,
   link: LinkIcon,
+  history: HistoryIcon,
+  add: AddIcon,
 };
 
 // copied from tailwind line height https://tailwindcss.com/docs/font-size

package/src/inspector/ui/icons/add-icon.tsx

@@ -0,0 +1,21 @@
+export function AddIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+    >
+      <path
+        d="M4 12H20M12 4V20"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

package/src/inspector/ui/icons/edit-icon.tsx

@@ -0,0 +1,17 @@
+export function EditIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      className="lucide lucide-edit lucide-pencil"
+    >
+      <path d="M13.2942 7.95881C13.5533 7.63559 13.5013 7.16358 13.178 6.90453C12.8548 6.64549 12.3828 6.6975 12.1238 7.02072L13.2942 7.95881ZM6.811 14.8488L7.37903 15.3385C7.38489 15.3317 7.39062 15.3248 7.39623 15.3178L6.811 14.8488ZM6.64 15.2668L5.89146 15.2179L5.8908 15.2321L6.64 15.2668ZM6.5 18.2898L5.7508 18.2551C5.74908 18.2923 5.75013 18.3296 5.75396 18.3667L6.5 18.2898ZM7.287 18.9768L7.31152 19.7264C7.36154 19.7247 7.41126 19.7181 7.45996 19.7065L7.287 18.9768ZM10.287 18.2658L10.46 18.9956L10.4716 18.9927L10.287 18.2658ZM10.672 18.0218L11.2506 18.4991L11.2571 18.491L10.672 18.0218ZM17.2971 10.959C17.5562 10.6358 17.5043 10.1638 17.1812 9.90466C16.8581 9.64552 16.386 9.69742 16.1269 10.0206L17.2971 10.959ZM12.1269 7.02052C11.8678 7.34365 11.9196 7.81568 12.2428 8.07484C12.5659 8.33399 13.0379 8.28213 13.2971 7.95901L12.1269 7.02052ZM14.3 5.50976L14.8851 5.97901C14.8949 5.96672 14.9044 5.95412 14.9135 5.94123L14.3 5.50976ZM15.929 5.18976L16.4088 4.61332C16.3849 4.59344 16.3598 4.57507 16.3337 4.5583L15.929 5.18976ZM18.166 7.05176L18.6968 6.52192C18.6805 6.50561 18.6635 6.49007 18.6458 6.47532L18.166 7.05176ZM18.5029 7.87264L19.2529 7.87676V7.87676L18.5029 7.87264ZM18.157 8.68976L17.632 8.15412C17.6108 8.17496 17.5908 8.19704 17.5721 8.22025L18.157 8.68976ZM16.1271 10.0203C15.8678 10.3433 15.9195 10.8153 16.2425 11.0746C16.5655 11.3339 17.0376 11.2823 17.2969 10.9593L16.1271 10.0203ZM13.4537 7.37862C13.3923 6.96898 13.0105 6.68666 12.6009 6.74805C12.1912 6.80943 11.9089 7.19127 11.9703 7.60091L13.4537 7.37862ZM16.813 11.2329C17.2234 11.1772 17.5109 10.7992 17.4552 10.3888C17.3994 9.97834 17.0215 9.69082 16.611 9.74659L16.813 11.2329ZM12.1238 7.02072L6.22577 14.3797L7.39623 15.3178L13.2942 7.95881L12.1238 7.02072ZM6.24297 14.359C6.03561 14.5995 5.91226 14.9011 5.89159 15.218L7.38841 15.3156C7.38786 15.324 7.38457 15.3321 7.37903 15.3385L6.24297 14.359ZM5.8908 15.2321L5.7508 18.2551L7.2492 18.3245L7.3892 15.3015L5.8908 15.2321ZM5.75396 18.3667C5.83563 19.1586 6.51588 19.7524 7.31152 19.7264L7.26248 18.2272C7.25928 18.2273 7.25771 18.2268 7.25669 18.2264C7.25526 18.2259 7.25337 18.2249 7.25144 18.2232C7.2495 18.2215 7.24825 18.2198 7.24754 18.2185C7.24703 18.2175 7.24637 18.216 7.24604 18.2128L5.75396 18.3667ZM7.45996 19.7065L10.46 18.9955L10.114 17.536L7.11404 18.247L7.45996 19.7065ZM10.4716 18.9927C10.7771 18.9151 11.05 18.7422 11.2506 18.499L10.0934 17.5445C10.0958 17.5417 10.0989 17.5397 10.1024 17.5388L10.4716 18.9927ZM11.2571 18.491L17.2971 10.959L16.1269 10.0206L10.0869 17.5526L11.2571 18.491ZM13.2971 7.95901L14.8851 5.97901L13.7149 5.04052L12.1269 7.02052L13.2971 7.95901ZM14.9135 5.94123C15.0521 5.74411 15.3214 5.6912 15.5243 5.82123L16.3337 4.5583C15.4544 3.99484 14.2873 4.2241 13.6865 5.0783L14.9135 5.94123ZM15.4492 5.7662L17.6862 7.6282L18.6458 6.47532L16.4088 4.61332L15.4492 5.7662ZM17.6352 7.58161C17.7111 7.6577 17.7535 7.761 17.7529 7.86852L19.2529 7.87676C19.2557 7.36905 19.0555 6.88127 18.6968 6.52192L17.6352 7.58161ZM17.7529 7.86852C17.7524 7.97604 17.7088 8.07886 17.632 8.15412L18.682 9.22541C19.0446 8.87002 19.2501 8.38447 19.2529 7.87676L17.7529 7.86852ZM17.5721 8.22025L16.1271 10.0203L17.2969 10.9593L18.7419 9.15928L17.5721 8.22025ZM11.9703 7.60091C12.3196 9.93221 14.4771 11.5503 16.813 11.2329L16.611 9.74659C15.0881 9.95352 13.6815 8.89855 13.4537 7.37862L11.9703 7.60091Z" />
+    </svg>
+  );
+}

package/src/inspector/ui/icons/history.tsx

@@ -0,0 +1,28 @@
+export function HistoryIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      className="lucide lucide-trash-icon lucide-trash"
+    >
+      <path
+        d="M5.52786 16.7023C6.6602 18.2608 8.3169 19.3584 10.1936 19.7934C12.0703 20.2284 14.0409 19.9716 15.7434 19.0701C17.446 18.1687 18.766 16.6832 19.4611 14.8865C20.1562 13.0898 20.1796 11.1027 19.527 9.29011C18.8745 7.47756 17.5898 5.96135 15.909 5.02005C14.2282 4.07875 12.2641 3.77558 10.3777 4.16623C8.49129 4.55689 6.80919 5.61514 5.64045 7.14656C4.47171 8.67797 3.89482 10.5797 4.01579 12.5023M4.01579 12.5023L2.51579 11.0023M4.01579 12.5023L5.51579 11.0023"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 8V12L15 15"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/inspector/ui/modal.tsx

@@ -28,7 +28,7 @@ const ModalContent = styled("dialog")`
   &::backdrop {
     background-color: rgba(0, 0, 0, 0.7);
   }
-  
+
 `;
 
 const ModalHeader = styled("div")`
@@ -65,11 +65,11 @@ const CloseButton = styled("button")`
   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;