remove unused packages and css

examples/inspector/package.json

@@ -11,27 +11,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-toast": "^1.1.4",
-    "class-variance-authority": "^0.7.0",
+    "jazz-inspector": "workspace:*",
     "clsx": "^2.0.0",
     "cojson": "workspace:0.11.5",
     "cojson-transport-ws": "workspace:0.11.5",
     "hash-slash": "workspace:0.2.2",
     "lucide-react": "^0.274.0",
-    "qrcode": "^1.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0",
-    "react-use": "^17.4.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7",
-    "uniqolor": "^1.1.0"
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
-    "@types/qrcode": "^1.5.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.3.2",

examples/inspector/src/index.css

@@ -1,92 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 20 14.3% 4.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.animate-in {
-  animation: slideIn 0.3s ease-out;
-}
-@keyframes slideIn {
-  from {
-    transform: translateZ(400px) translateY(30px) scale(1.05);
-    opacity: 0.4;
-  }
-  to {
-    transform: translateZ(0) scale(1);
-    opacity: 1;
-  }
-}

examples/inspector/src/link-icon.tsx

@@ -1,18 +0,0 @@
-export function LinkIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-3 h-3"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
-      />
-    </svg>
-  );
-}

examples/inspector/src/viewer/breadcrumbs.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { PageInfo } from "./types";
-
-interface BreadcrumbsProps {
-  path: PageInfo[];
-  onBreadcrumbClick: (index: number) => void;
-}
-
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
-  path,
-  onBreadcrumbClick,
-}) => {
-  return (
-    <div className="z-20 relative bg-indigo-400/10 backdrop-blur-sm rounded-lg inline-flex px-2 py-1 whitespace-pre transition-all items-center space-x-1 min-h-10">
-      <button
-        onClick={() => onBreadcrumbClick(-1)}
-        className="flex items-center justify-center p-1 rounded-sm hover:bg-indigo-500/10 transition-colors"
-        aria-label="Go to home"
-      >
-        <img src="jazz-logo.png" alt="Jazz Logo" className="size-5" />
-      </button>
-      {path.map((page, index) => {
-        return (
-          <span key={index} className="inline-block first:pl-1 last:pr-1">
-            {index === 0 ? null : (
-              <span className="text-indigo-500/30">{" / "}</span>
-            )}
-            <button
-              onClick={() => onBreadcrumbClick(index)}
-              className="text-indigo-700 hover:underline"
-            >
-              {index === 0 ? page.name || "Root" : page.name}
-            </button>
-          </span>
-        );
-      })}
-    </div>
-  );
-};

examples/inspector/src/viewer/co-stream-view.tsx

@@ -1,344 +0,0 @@
-import {
-  CoID,
-  LocalNode,
-  RawBinaryCoStream,
-  RawCoStream,
-  RawCoValue,
-} from "cojson";
-import { base64URLtoBytes } from "cojson";
-import { BinaryStreamItem, BinaryStreamStart, CoStreamItem } from "cojson";
-import { JsonObject, JsonValue } from "cojson";
-import { ArrowDownToLine } from "lucide-react";
-import { useEffect, useState } from "react";
-import { PageInfo } from "./types";
-import { AccountOrGroupPreview } from "./value-renderer";
-
-// typeguard for BinaryStreamStart
-function isBinaryStreamStart(item: unknown): item is BinaryStreamStart {
-  return (
-    typeof item === "object" &&
-    item !== null &&
-    "type" in item &&
-    item.type === "start"
-  );
-}
-
-function detectCoStreamType(value: RawCoStream | RawBinaryCoStream) {
-  const firstKey = Object.keys(value.items)[0];
-  if (!firstKey)
-    return {
-      type: "unknown",
-    };
-
-  const items = value.items[firstKey as never]?.map((v) => v.value);
-
-  if (!items)
-    return {
-      type: "unknown",
-    };
-  const firstItem = items[0];
-  if (!firstItem)
-    return {
-      type: "unknown",
-    };
-  // This is a binary stream
-  if (isBinaryStreamStart(firstItem)) {
-    return {
-      type: "binary",
-      items: items as BinaryStreamItem[],
-    };
-  } else {
-    return {
-      type: "coStream",
-    };
-  }
-}
-
-async function getBlobFromCoStream({
-  items,
-  onlyFirstChunk = false,
-}: {
-  items: BinaryStreamItem[];
-  onlyFirstChunk?: boolean;
-}) {
-  if (onlyFirstChunk && items.length > 1) {
-    items = items.slice(0, 2);
-  }
-
-  const chunks: Uint8Array[] = [];
-
-  const binary_U_prefixLength = 8;
-
-  let lastProgressUpdate = Date.now();
-
-  for (const item of items.slice(1)) {
-    if (item.type === "end") {
-      break;
-    }
-
-    if (item.type !== "chunk") {
-      console.error("Invalid binary stream chunk", item);
-      return undefined;
-    }
-
-    const chunk = base64URLtoBytes(item.chunk.slice(binary_U_prefixLength));
-    // totalLength += chunk.length;
-    chunks.push(chunk);
-
-    if (Date.now() - lastProgressUpdate > 100) {
-      lastProgressUpdate = Date.now();
-    }
-  }
-  const defaultMime = "mimeType" in items[0] ? items[0].mimeType : null;
-
-  const blob = new Blob(chunks, defaultMime ? { type: defaultMime } : {});
-
-  const mimeType =
-    defaultMime === "" ? await detectPDFMimeType(blob) : defaultMime;
-
-  return {
-    blob,
-    mimeType: mimeType as string,
-    unfinishedChunks: items.length > 1,
-    totalSize:
-      "totalSizeBytes" in items[0]
-        ? (items[0].totalSizeBytes as number)
-        : undefined,
-  };
-}
-
-const detectPDFMimeType = async (blob: Blob): Promise<string> => {
-  const arrayBuffer = await blob.slice(0, 4).arrayBuffer();
-  const uint8Array = new Uint8Array(arrayBuffer);
-  const header = uint8Array.reduce(
-    (acc, byte) => acc + String.fromCharCode(byte),
-    "",
-  );
-
-  if (header === "%PDF") {
-    return "application/pdf";
-  }
-  return "application/octet-stream";
-};
-
-const BinaryDownloadButton = ({
-  pdfBlob,
-  fileName = "document",
-  label,
-  mimeType,
-}: {
-  pdfBlob: Blob;
-  mimeType?: string;
-  fileName?: string;
-  label: string;
-}) => {
-  const downloadFile = () => {
-    const url = URL.createObjectURL(
-      new Blob([pdfBlob], mimeType ? { type: mimeType } : {}),
-    );
-    const link = document.createElement("a");
-    link.href = url;
-    link.download =
-      mimeType === "application/pdf" ? `${fileName}.pdf` : fileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  return (
-    <button
-      className="flex items-center gap-2 px-2 py-1 text-gray-900 border border-gray-900/10 bg-clip-border shadow-sm transition-colors rounded bg-gray-50 text-sm"
-      onClick={downloadFile}
-    >
-      <ArrowDownToLine size={16} />
-      {label}
-      {/* Download {mimeType === "application/pdf" ? "PDF" : "File"} */}
-    </button>
-  );
-};
-
-const LabelContentPair = ({
-  label,
-  content,
-}: {
-  label: string;
-  content: React.ReactNode;
-}) => {
-  return (
-    <div className="flex flex-col gap-1.5 ">
-      <span className="uppercase text-xs font-medium text-gray-600 tracking-wide">
-        {label}
-      </span>
-      <span>{content}</span>
-    </div>
-  );
-};
-
-function RenderCoBinaryStream({
-  value,
-  items,
-}: {
-  items: BinaryStreamItem[];
-  value: RawBinaryCoStream;
-}) {
-  const [file, setFile] = useState<
-    | {
-        blob: Blob;
-        mimeType: string;
-        unfinishedChunks: boolean;
-        totalSize: number | undefined;
-      }
-    | undefined
-    | null
-  >(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    // load only the first chunk to get the mime type and size
-    getBlobFromCoStream({
-      items,
-      onlyFirstChunk: true,
-    })
-      .then((v) => {
-        if (v) {
-          setFile(v);
-          if (v.mimeType.includes("image")) {
-            // If it's an image, load the full blob
-            getBlobFromCoStream({
-              items,
-            }).then((s) => {
-              if (s) setFile(s);
-            });
-          }
-        }
-      })
-      .finally(() => setIsLoading(false));
-  }, [items]);
-
-  if (!isLoading && !file) return <div>No blob</div>;
-
-  if (isLoading) return <div>Loading...</div>;
-  if (!file) return <div>No blob</div>;
-
-  const { blob, mimeType } = file;
-
-  const sizeInKB = (file.totalSize || 0) / 1024;
-
-  return (
-    <div className="space-y-8 mt-4">
-      <div className="grid grid-cols-3 gap-2 max-w-3xl">
-        <LabelContentPair
-          label="Mime Type"
-          content={
-            <span className="font-mono bg-gray-100 rounded px-2 py-1 text-sm">
-              {mimeType || "No mime type"}
-            </span>
-          }
-        />
-        <LabelContentPair
-          label="Size"
-          content={<span>{sizeInKB.toFixed(2)} KB</span>}
-        />
-        <LabelContentPair
-          label="Download"
-          content={
-            <BinaryDownloadButton
-              fileName={value.id.toString()}
-              pdfBlob={blob}
-              mimeType={mimeType}
-              label={
-                mimeType === "application/pdf"
-                  ? "Download PDF"
-                  : "Download File"
-              }
-            />
-          }
-        />
-      </div>
-      {mimeType === "image/png" || mimeType === "image/jpeg" ? (
-        <LabelContentPair
-          label="Preview"
-          content={
-            <div className="bg-gray-50 p-3 rounded-sm">
-              <RenderBlobImage blob={blob} />
-            </div>
-          }
-        />
-      ) : null}
-    </div>
-  );
-}
-
-function RenderCoStream({
-  value,
-  node,
-}: {
-  value: RawCoStream;
-  node: LocalNode;
-}) {
-  const streamPerUser = Object.keys(value.items);
-  const userCoIds = streamPerUser.map((stream) => stream.split("_session")[0]);
-
-  return (
-    <div className="grid grid-cols-3 gap-2">
-      {userCoIds.map((id, idx) => (
-        <div
-          className="bg-gray-100 p-3 rounded-lg transition-colors overflow-hidden bg-white border hover:bg-gray-100/5 cursor-pointer shadow-sm"
-          key={id}
-        >
-          <AccountOrGroupPreview coId={id as CoID<RawCoValue>} node={node} />
-          {/* @ts-expect-error - TODO: fix types */}
-          {value.items[streamPerUser[idx]]?.map(
-            (item: CoStreamItem<JsonValue>) => (
-              <div>
-                {new Date(item.madeAt).toLocaleString()}{" "}
-                {JSON.stringify(item.value)}
-              </div>
-            ),
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function CoStreamView({
-  value,
-  node,
-}: {
-  data: JsonObject;
-  onNavigate: (pages: PageInfo[]) => void;
-  node: LocalNode;
-  value: RawCoStream;
-}) {
-  // if (!value) return <div>No value</div>;
-
-  const streamType = detectCoStreamType(value);
-
-  if (streamType.type === "binary") {
-    if (streamType.items === undefined) {
-      return <div>No binary stream</div>;
-    }
-
-    return (
-      <RenderCoBinaryStream
-        value={value as RawBinaryCoStream}
-        items={streamType.items}
-      />
-    );
-  }
-
-  if (streamType.type === "coStream") {
-    return <RenderCoStream value={value} node={node} />;
-  }
-
-  if (streamType.type === "unknown") return <div>Unknown stream type</div>;
-
-  return <div>Unknown stream type</div>;
-}
-
-function RenderBlobImage({ blob }: { blob: Blob }) {
-  const urlCreator = window.URL || window.webkitURL;
-  return <img src={urlCreator.createObjectURL(blob)} />;
-}

examples/inspector/src/viewer/grid-view.tsx

@@ -1,65 +0,0 @@
-import clsx from "clsx";
-import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson";
-import { ResolveIcon } from "./type-icon";
-import { PageInfo, isCoId } from "./types";
-import { CoMapPreview, ValueRenderer } from "./value-renderer";
-
-export function GridView({
-  data,
-  onNavigate,
-  node,
-}: {
-  data: JsonObject;
-  onNavigate: (pages: PageInfo[]) => void;
-  node: LocalNode;
-}) {
-  const entries = Object.entries(data);
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-2">
-      {entries.map(([key, child], childIndex) => (
-        <div
-          key={childIndex}
-          className={clsx(
-            "bg-gray-100 p-3 rounded-lg transition-colors overflow-hidden",
-            isCoId(child)
-              ? "bg-white border hover:bg-gray-100/5 cursor-pointer shadow-sm"
-              : "bg-gray-50",
-          )}
-          onClick={() =>
-            isCoId(child) &&
-            onNavigate([{ coId: child as CoID<RawCoValue>, name: key }])
-          }
-        >
-          <h3 className="truncate">
-            {isCoId(child) ? (
-              <span className="font-medium flex justify-between">
-                {key}
-
-                <div className="px-2 py-1 text-xs bg-gray-100 rounded">
-                  <ResolveIcon coId={child as CoID<RawCoValue>} node={node} />
-                </div>
-              </span>
-            ) : (
-              <span>{key}</span>
-            )}
-          </h3>
-          <div className="mt-2 text-sm">
-            {isCoId(child) ? (
-              <CoMapPreview coId={child as CoID<RawCoValue>} node={node} />
-            ) : (
-              <ValueRenderer
-                json={child}
-                onCoIDClick={(coId) => {
-                  onNavigate([{ coId, name: key }]);
-                }}
-                compact
-              />
-            )}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

examples/inspector/src/viewer/index.tsx

@@ -1,7 +1,6 @@
 import { LocalNode } from "cojson";
-import { Breadcrumbs } from "./breadcrumbs";
-import { PageStack } from "./page-stack";
-import { PageInfo } from "./types";
+import { Breadcrumbs, PageStack } from "jazz-inspector";
+import type { PageInfo } from "jazz-inspector";
 import { usePagePath } from "./use-page-path";
 
 export default function CoJsonViewer({

examples/inspector/src/viewer/new-app.tsx

@@ -9,10 +9,9 @@ import {
 } from "cojson";
 import { createWebSocketPeer } from "cojson-transport-ws";
 import { WasmCrypto } from "cojson/crypto/WasmCrypto";
+import { Breadcrumbs, PageStack } from "jazz-inspector";
 import { Trash2 } from "lucide-react";
 import React, { useState, useEffect } from "react";
-import { Breadcrumbs } from "./breadcrumbs";
-import { PageStack } from "./page-stack";
 import { usePagePath } from "./use-page-path";
 import { resolveCoValue, useResolvedCoValue } from "./use-resolve-covalue";
 
@@ -121,7 +120,7 @@ export default function CoJsonViewerApp() {
   }
 
   return (
-    <div className="w-full h-screen bg-gray-100 p-4 overflow-hidden flex flex-col">
+    <div className="w-full h-screen bg-white p-4 overflow-hidden flex flex-col">
       <div className="flex items-center mb-4 gap-4">
         <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
         <div className="flex-1">

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

@@ -1,53 +0,0 @@
-import { CoID, LocalNode, RawCoValue } from "cojson";
-import { Page } from "./page"; // Assuming you have a Page component
-
-// 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;
-}
-
-export function PageStack({
-  path,
-  node,
-  goBack,
-  addPages,
-  children,
-}: PageStackProps) {
-  return (
-    <div className="relative mt-4 h-[calc(100vh-6rem)]">
-      {children && <div className="absolute inset-0 pb-20">{children}</div>}
-      {node &&
-        path.map((page, index) => (
-          <Page
-            key={`${page.coId}-${index}`}
-            coId={page.coId}
-            node={node}
-            name={page.name || page.coId}
-            onHeaderClick={goBack}
-            onNavigate={addPages}
-            isTopLevel={index === path.length - 1}
-            style={{
-              transform: `translateZ(${(index - path.length + 1) * 200}px) scale(${
-                1 - (path.length - index - 1) * 0.05
-              }) translateY(${-(index - path.length + 1) * -4}%)`,
-              opacity: 1 - (path.length - index - 1) * 0.05,
-              zIndex: index,
-              transitionProperty: "transform, opacity",
-              transitionDuration: "0.3s",
-              transitionTimingFunction: "ease-out",
-            }}
-          />
-        ))}
-    </div>
-  );
-}

examples/inspector/src/viewer/page.tsx

@@ -1,138 +0,0 @@
-import clsx from "clsx";
-import { CoID, LocalNode, RawCoStream, RawCoValue } from "cojson";
-import { useEffect, useState } from "react";
-import { CoStreamView } from "./co-stream-view";
-import { GridView } from "./grid-view";
-import { TableView } from "./table-viewer";
-import { TypeIcon } from "./type-icon";
-import { PageInfo } from "./types";
-import { useResolvedCoValue } from "./use-resolve-covalue";
-import { AccountOrGroupPreview } from "./value-renderer";
-
-type PageProps = {
-  coId: CoID<RawCoValue>;
-  node: LocalNode;
-  name: string;
-  onNavigate: (newPages: PageInfo[]) => void;
-  onHeaderClick?: () => void;
-  isTopLevel?: boolean;
-  style: React.CSSProperties;
-};
-
-export function Page({
-  coId,
-  node,
-  name,
-  onNavigate,
-  onHeaderClick,
-  style,
-  isTopLevel,
-}: PageProps) {
-  const { value, snapshot, type, extendedType } = useResolvedCoValue(
-    coId,
-    node,
-  );
-  const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
-
-  const supportsTableView = type === "colist" || extendedType === "record";
-
-  // Automatically switch to table view if the page is a CoMap record
-  useEffect(() => {
-    if (supportsTableView) {
-      setViewMode("table");
-    }
-  }, [supportsTableView]);
-
-  if (snapshot === "unavailable") {
-    return <div style={style}>Data unavailable</div>;
-  }
-
-  if (!snapshot) {
-    return <div style={style}></div>;
-  }
-
-  return (
-    <div
-      style={style}
-      className={clsx(
-        "absolute inset-0 border border-gray-900/5 bg-clip-padding bg-white rounded-xl shadow-lg p-6 animate-in",
-      )}
-    >
-      {!isTopLevel && (
-        <div
-          className="absolute inset-x-0 top-0 h-10"
-          aria-label="Back"
-          onClick={() => {
-            onHeaderClick?.();
-          }}
-          aria-hidden="true"
-        ></div>
-      )}
-      <div className="flex justify-between items-center mb-4">
-        <div className="flex flex-col gap-2">
-          <h2 className="text-2xl font-bold flex items-start flex-col gap-1">
-            <span>
-              {name}
-              {typeof snapshot === "object" && "name" in snapshot ? (
-                <span className="text-gray-600 font-medium">
-                  {" "}
-                  {
-                    (
-                      snapshot as {
-                        name: string;
-                      }
-                    ).name
-                  }
-                </span>
-              ) : null}
-            </span>
-          </h2>
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-gray-700 font-medium py-0.5 px-1 -ml-0.5 rounded bg-gray-700/5 inline-block font-mono">
-              {type && <TypeIcon type={type} extendedType={extendedType} />}
-            </span>
-            <span className="text-xs text-gray-700 font-medium py-0.5 px-1 -ml-0.5 rounded bg-gray-700/5 inline-block font-mono">
-              {coId}
-            </span>
-          </div>
-        </div>
-        {/* {supportsTableView && (
-          <button
-            onClick={toggleViewMode}
-            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
-          >
-            {viewMode === "grid" ? "Table View" : "Grid View"}
-          </button>
-        )} */}
-      </div>
-      <div className="overflow-auto max-h-[calc(100%-4rem)]">
-        {type === "costream" ? (
-          <CoStreamView
-            data={snapshot}
-            onNavigate={onNavigate}
-            node={node}
-            value={value as RawCoStream}
-          />
-        ) : viewMode === "grid" ? (
-          <GridView data={snapshot} onNavigate={onNavigate} node={node} />
-        ) : (
-          <TableView data={snapshot} node={node} onNavigate={onNavigate} />
-        )}
-        {/* --- */}
-        {extendedType !== "account" && extendedType !== "group" && (
-          <div className="text-xs text-gray-500 mt-4">
-            Owned by{" "}
-            <AccountOrGroupPreview
-              coId={value.group.id}
-              node={node}
-              showId
-              onClick={() => {
-                onNavigate([{ coId: value.group.id, name: "owner" }]);
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

examples/inspector/src/viewer/table-viewer.tsx

@@ -1,133 +0,0 @@
-import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson";
-import { useMemo, useState } from "react";
-import { LinkIcon } from "../link-icon";
-import { PageInfo } from "./types";
-import { useResolvedCoValues } from "./use-resolve-covalue";
-import { ValueRenderer } from "./value-renderer";
-
-export function TableView({
-  data,
-  node,
-  onNavigate,
-}: {
-  data: JsonObject;
-  node: LocalNode;
-  onNavigate: (pages: PageInfo[]) => void;
-}) {
-  const [visibleRowsCount, setVisibleRowsCount] = useState(10);
-  const [coIdArray, visibleRows] = useMemo(() => {
-    const coIdArray = Array.isArray(data)
-      ? data
-      : Object.values(data).every(
-            (k) => typeof k === "string" && k.startsWith("co_"),
-          )
-        ? Object.values(data).map((k) => k as CoID<RawCoValue>)
-        : [];
-
-    const visibleRows = coIdArray.slice(0, visibleRowsCount);
-
-    return [coIdArray, visibleRows];
-  }, [data, visibleRowsCount]);
-  const resolvedRows = useResolvedCoValues(visibleRows, node);
-
-  const hasMore = visibleRowsCount < coIdArray.length;
-
-  if (!coIdArray.length) {
-    return <div>No data to display</div>;
-  }
-
-  if (resolvedRows.length === 0) {
-    return <div>Loading...</div>;
-  }
-
-  const keys = Array.from(
-    new Set(resolvedRows.flatMap((item) => Object.keys(item.snapshot || {}))),
-  );
-
-  const loadMore = () => {
-    setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
-  };
-
-  return (
-    <div>
-      <table className="min-w-full divide-y divide-gray-200">
-        <thead className="sticky top-0 border-b">
-          <tr>
-            {["", ...keys].map((key) => (
-              <th
-                key={key}
-                className="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 rounded"
-              >
-                {key}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
-          {resolvedRows.slice(0, visibleRowsCount).map((item, index) => (
-            <tr key={index}>
-              <td className="px-1 py-0">
-                <button
-                  onClick={() =>
-                    onNavigate([
-                      {
-                        coId: item.value!.id,
-                        name: index.toString(),
-                      },
-                    ])
-                  }
-                  className="px-4 py-4 whitespace-nowrap text-sm text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded"
-                >
-                  <LinkIcon />
-                </button>
-              </td>
-              {keys.map((key) => (
-                <td
-                  key={key}
-                  className="px-4 py-4 whitespace-nowrap text-sm text-gray-500"
-                >
-                  <ValueRenderer
-                    json={(item.snapshot as JsonObject)[key]}
-                    onCoIDClick={(coId) => {
-                      async function handleClick() {
-                        onNavigate([
-                          {
-                            coId: item.value!.id,
-                            name: index.toString(),
-                          },
-                          {
-                            coId: coId,
-                            name: key,
-                          },
-                        ]);
-                      }
-
-                      handleClick();
-                    }}
-                  />
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div className="py-4 text-gray-500 flex items-center justify-between gap-2">
-        <span>
-          Showing {Math.min(visibleRowsCount, coIdArray.length)} of{" "}
-          {coIdArray.length}
-        </span>
-        {hasMore && (
-          <div className="text-center">
-            <button
-              onClick={loadMore}
-              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-            >
-              Load More
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

examples/inspector/src/viewer/type-icon.tsx

@@ -1,47 +0,0 @@
-import { CoID, LocalNode, RawCoValue } from "cojson";
-import {
-  CoJsonType,
-  ExtendedCoJsonType,
-  useResolvedCoValue,
-} from "./use-resolve-covalue";
-
-export const TypeIcon = ({
-  type,
-  extendedType,
-}: {
-  type: CoJsonType;
-  extendedType?: ExtendedCoJsonType;
-}) => {
-  const iconMap: Record<ExtendedCoJsonType | CoJsonType, string> = {
-    record: "{} Record",
-    image: "🖼️ Image",
-    comap: "{} CoMap",
-    costream: "≋ CoStream",
-    colist: "☰ CoList",
-    account: "👤 Account",
-    group: "👥 Group",
-  };
-
-  const iconKey = extendedType || type;
-  const icon = iconMap[iconKey as keyof typeof iconMap];
-
-  return icon ? <span className="font-mono">{icon}</span> : null;
-};
-
-export const ResolveIcon = ({
-  coId,
-  node,
-}: {
-  coId: CoID<RawCoValue>;
-  node: LocalNode;
-}) => {
-  const { type, extendedType, snapshot } = useResolvedCoValue(coId, node);
-
-  if (snapshot === "unavailable" && !type) {
-    return <div className="text-gray-600 font-medium">Unavailable</div>;
-  }
-
-  if (!type) return <div className="whitespace-pre w-14 font-mono"> </div>;
-
-  return <TypeIcon type={type} extendedType={extendedType} />;
-};

examples/inspector/src/viewer/types.ts

@@ -1,9 +0,0 @@
-import { CoID, RawCoValue } from "cojson";
-
-export type PageInfo = {
-  coId: CoID<RawCoValue>;
-  name?: string;
-};
-
-export const isCoId = (coId: unknown): coId is CoID<RawCoValue> =>
-  typeof coId === "string" && coId.startsWith("co_");

examples/inspector/src/viewer/use-page-path.ts

@@ -1,6 +1,6 @@
 import { CoID, RawCoValue } from "cojson";
+import { PageInfo } from "jazz-inspector";
 import { useCallback, useEffect, useState } from "react";
-import { PageInfo } from "./types";
 
 export function usePagePath(defaultPath?: PageInfo[]) {
   const [path, setPath] = useState<PageInfo[]>(() => {

examples/inspector/src/viewer/value-renderer.tsx

@@ -1,260 +0,0 @@
-import clsx from "clsx";
-import { CoID, JsonValue, LocalNode, RawCoValue } from "cojson";
-import React, { useEffect, useState } from "react";
-import { LinkIcon } from "../link-icon";
-import {
-  isBrowserImage,
-  resolveCoValue,
-  useResolvedCoValue,
-} from "./use-resolve-covalue";
-
-// Is there a chance we can pass the actual CoValue here?
-export function ValueRenderer({
-  json,
-  compact,
-  onCoIDClick,
-}: {
-  json: JsonValue | undefined;
-  compact?: boolean;
-  onCoIDClick?: (childNode: CoID<RawCoValue>) => void;
-}) {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  if (typeof json === "undefined" || json === undefined) {
-    return <span className="text-gray-400">undefined</span>;
-  }
-
-  if (json === null) {
-    return <span className="text-gray-400">null</span>;
-  }
-
-  if (typeof json === "string" && json.startsWith("co_")) {
-    return (
-      <span
-        className={clsx(
-          "inline-flex gap-1 items-center",
-          onCoIDClick && "text-blue-500 cursor-pointer hover:underline",
-        )}
-        onClick={() => {
-          onCoIDClick?.(json as CoID<RawCoValue>);
-        }}
-      >
-        {json}
-        {onCoIDClick && <LinkIcon />}
-      </span>
-    );
-  }
-
-  if (typeof json === "string") {
-    return (
-      <span className="text-green-900 font-mono">
-        {/* <span className="select-none opacity-70">{'"'}</span> */}
-        {json}
-        {/* <span className="select-none opacity-70">{'"'}</span> */}
-      </span>
-    );
-  }
-
-  if (typeof json === "number") {
-    return <span className="text-purple-500">{json}</span>;
-  }
-
-  if (typeof json === "boolean") {
-    return (
-      <span
-        className={clsx(
-          json
-            ? "text-green-700 bg-green-700/5"
-            : "text-amber-700 bg-amber-500/5",
-          "font-mono",
-          "inline-block px-1 py-0.5 rounded",
-        )}
-      >
-        {json.toString()}
-      </span>
-    );
-  }
-
-  if (Array.isArray(json)) {
-    return (
-      <span title={JSON.stringify(json)}>
-        Array <span className="text-gray-500">({json.length})</span>
-      </span>
-    );
-  }
-
-  if (typeof json === "object") {
-    return (
-      <span
-        title={JSON.stringify(json, null, 2)}
-        className="inline-block max-w-64"
-      >
-        {compact ? (
-          <span>
-            Object{" "}
-            <span className="text-gray-500">({Object.keys(json).length})</span>
-            <pre className="mt-1 text-sm whitespace-pre-wrap">
-              {isExpanded
-                ? JSON.stringify(json, null, 2)
-                : JSON.stringify(json, null, 2)
-                    .split("\n")
-                    .slice(0, 3)
-                    .join("\n") + (Object.keys(json).length > 2 ? "\n..." : "")}
-            </pre>
-            <button
-              onClick={() => setIsExpanded(!isExpanded)}
-              className="text-xs text-gray-500 hover:text-gray-700"
-            >
-              {isExpanded ? "Show less" : "Show more"}
-            </button>
-          </span>
-        ) : (
-          <pre className="whitespace-pre-wrap">
-            {JSON.stringify(json, null, 2)}
-          </pre>
-        )}
-      </span>
-    );
-  }
-
-  return <span>{String(json)}</span>;
-}
-
-export const CoMapPreview = ({
-  coId,
-  node,
-  limit = 6,
-}: {
-  coId: CoID<RawCoValue>;
-  node: LocalNode;
-  limit?: number;
-}) => {
-  const { value, snapshot, type, extendedType } = useResolvedCoValue(
-    coId,
-    node,
-  );
-
-  if (!snapshot) {
-    return (
-      <div className="rounded bg-gray-100 animate-pulse whitespace-pre w-24">
-        {" "}
-      </div>
-    );
-  }
-
-  if (snapshot === "unavailable" && !value) {
-    return <div className="text-gray-500">Unavailable</div>;
-  }
-
-  if (extendedType === "image" && isBrowserImage(snapshot)) {
-    return (
-      <div>
-        <img
-          src={snapshot.placeholderDataURL}
-          className="size-8 border-2 border-white drop-shadow-md my-2"
-        />
-        <span className="text-gray-500 text-sm">
-          {snapshot.originalSize[0]} x {snapshot.originalSize[1]}
-        </span>
-
-        {/* <CoMapPreview coId={value[]} node={node} /> */}
-        {/* <ProgressiveImg image={value}>
-                    {({ src }) => <img src={src} className={clsx("w-full")} />}
-                </ProgressiveImg> */}
-      </div>
-    );
-  }
-
-  if (extendedType === "record") {
-    return (
-      <div>
-        Record{" "}
-        <span className="text-gray-500">({Object.keys(snapshot).length})</span>
-      </div>
-    );
-  }
-
-  if (type === "colist") {
-    return (
-      <div>
-        List{" "}
-        <span className="text-gray-500">
-          ({(snapshot as unknown as []).length})
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="text-sm flex flex-col gap-2 items-start">
-      <div className="grid grid-cols-[auto_1fr] gap-2">
-        {Object.entries(snapshot)
-          .slice(0, limit)
-          .map(([key, value]) => (
-            <React.Fragment key={key}>
-              <span className="font-medium">{key}: </span>
-              <span>
-                <ValueRenderer json={value} />
-              </span>
-            </React.Fragment>
-          ))}
-      </div>
-      {Object.entries(snapshot).length > limit && (
-        <div className="text-left text-xs text-gray-500 mt-2">
-          {Object.entries(snapshot).length - limit} more
-        </div>
-      )}
-    </div>
-  );
-};
-
-export function AccountOrGroupPreview({
-  coId,
-  node,
-  showId = false,
-  onClick,
-}: {
-  coId: CoID<RawCoValue>;
-  node: LocalNode;
-  showId?: boolean;
-  onClick?: (name?: string) => void;
-}) {
-  const { snapshot, extendedType } = useResolvedCoValue(coId, node);
-  const [name, setName] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (extendedType === "account") {
-      resolveCoValue(
-        (snapshot as unknown as { profile: CoID<RawCoValue> }).profile,
-        node,
-      ).then(({ snapshot }) => {
-        if (
-          typeof snapshot === "object" &&
-          "name" in snapshot &&
-          typeof snapshot.name === "string"
-        ) {
-          setName(snapshot.name);
-        }
-      });
-    }
-  }, [snapshot, node, extendedType]);
-
-  if (!snapshot) return <span>Loading...</span>;
-  if (extendedType !== "account" && extendedType !== "group") {
-    return <span>CoID is not an account or group</span>;
-  }
-
-  const displayName = extendedType === "account" ? name || "Account" : "Group";
-  const displayText = showId ? `${displayName} (${coId})` : displayName;
-
-  const props = onClick
-    ? {
-        onClick: () => onClick(displayName),
-        className: "text-blue-500 cursor-pointer hover:underline",
-      }
-    : {
-        className: "text-gray-500",
-      };
-
-  return <span {...props}>{displayText}</span>;
-}

examples/inspector/tailwind.config.ts

@@ -1,5 +1,29 @@
 import type { Config } from "tailwindcss";
-import animate from "tailwindcss-animate";
+
+const stonePalette = {
+  50: "oklch(0.988281 0.002 75)",
+  100: "oklch(0.980563 0.002 75)",
+  200: "oklch(0.917969 0.002 75)",
+  300: "oklch(0.853516 0.002 75)",
+  400: "oklch(0.789063 0.002 75)",
+  500: "oklch(0.726563 0.002 75)",
+  600: "oklch(0.613281 0.002 75)",
+  700: "oklch(0.523438 0.002 75)",
+  800: "oklch(0.412109 0.002 75)",
+  900: "oklch(0.302734 0.002 75)",
+  925: "oklch(0.220000 0.002 75)",
+  950: "oklch(0.193359 0.002 75)",
+};
+
+const stonePaletteWithAlpha = { ...stonePalette };
+
+Object.keys(stonePalette).forEach((key) => {
+  // @ts-ignore
+  stonePaletteWithAlpha[key] = stonePaletteWithAlpha[key].replace(
+    ")",
+    "/ <alpha-value>)",
+  );
+});
 
 const config: Config = {
   content: [
@@ -18,62 +42,25 @@ const config: Config = {
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+        stone: stonePaletteWithAlpha,
+        gray: stonePaletteWithAlpha,
+        blue: {
+          50: "#f5f7ff",
+          100: "#ebf0fe",
+          200: "#d6e0fd",
+          300: "#b3c7fc",
+          400: "#8aa6f9",
+          500: "#5870F1",
+          600: "#3651E7",
+          700: "#3313F7",
+          800: "#2A12BE",
+          900: "#12046A",
+          950: "#1e1b4b",
+          DEFAULT: "#3313F7",
         },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
   },
-  plugins: [animate],
 };
 
 export default config;

examples/music-player/src/2_main.tsx

@@ -72,7 +72,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <JazzProvider
       sync={{
         peer,
-        when: "signedUp", // This makes the app work in local mode when the user is anonymous
       }}
       storage="indexedDB"
       AccountSchema={MusicaAccount}

packages/jazz-inspector/package.json

@@ -9,8 +9,8 @@
     "src"
   ],
   "scripts": {
-    "dev": "vite build --watch",
-    "build": "rm -rf ./dist && tsc --sourceMap --outDir dist",
+    "dev": "rm -rf ./dist && tsc --emitDeclarationOnly --watch & vite build --watch",
+    "build": "rm -rf ./dist && tsc --sourceMap --declaration --outDir dist",
     "format-and-lint": "biome check .",
     "format-and-lint:fix": "biome check . --write",
     "preview": "vite preview"

packages/jazz-inspector/src/app.tsx

@@ -2,3 +2,7 @@
 import "./twind.js";
 
 export { JazzInspector } from "./viewer/new-app.js";
+export { PageStack } from "./viewer/page-stack.js";
+export { Breadcrumbs } from "./viewer/breadcrumbs.js";
+
+export type { PageInfo } from "./viewer/types.js";

packages/jazz-inspector/src/viewer/new-app.tsx

@@ -67,7 +67,7 @@ export function JazzInspector({ position = "right" }: { position?: Position }) {
   }
 
   return (
-    <div className="fixed bottom-0 left-0 w-full bg-white border-t border-gray-200 p-4 dark:border-stone-900 dark:bg-stone-925">
+    <div className="fixed h-[50vh] flex flex-col bottom-0 left-0 w-full bg-white border-t border-gray-200 p-4 dark:border-stone-900 dark:bg-stone-925">
       <div className="flex items-center gap-4 mb-4">
         <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
         <div className="flex-1">

packages/jazz-inspector/src/viewer/page-stack.tsx

@@ -27,7 +27,7 @@ export function PageStack({
   const index = path.length - 1;
 
   return (
-    <div className="relative mt-4 h-[40vh] overflow-y-auto">
+    <div className="relative mt-4 overflow-y-auto flex-1">
       {children && <div className="absolute inset-0 pb-20">{children}</div>}
       {node && page && (
         <Page

packages/jazz-inspector/src/viewer/value-renderer.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { CoID, JsonValue, LocalNode, RawCoValue } from "cojson";
 import React, { useEffect, useState } from "react";
 import { LinkIcon } from "../link-icon.js";
@@ -28,13 +29,12 @@ export function ValueRenderer({
   }
 
   if (typeof json === "string" && json.startsWith("co_")) {
-    const linkClasses = onCoIDClick
-      ? "text-blue-500 cursor-pointer inline-flex gap-1 items-center"
-      : "inline-flex gap-1 items-center";
-
     return (
       <span
-        className={linkClasses}
+        className={clsx(
+          "inline-flex gap-1 items-center",
+          onCoIDClick && "text-blue-500 cursor-pointer hover:underline",
+        )}
         onClick={() => {
           onCoIDClick?.(json as CoID<RawCoValue>);
         }}
@@ -47,26 +47,42 @@ export function ValueRenderer({
 
   if (typeof json === "string") {
     return (
-      <span className="text-teal-900 font-mono dark:text-teal-200">{json}</span>
+      <span className="text-green-900 font-mono">
+        {/* <span className="select-none opacity-70">{'"'}</span> */}
+        {json}
+        {/* <span className="select-none opacity-70">{'"'}</span> */}
+      </span>
     );
   }
 
   if (typeof json === "number") {
-    return <span className="text-purple-500 dark:text-purple-200">{json}</span>;
+    return <span className="text-purple-500">{json}</span>;
   }
 
   if (typeof json === "boolean") {
     return (
       <span
-        className={`inline-block py-0.5 px-1 rounded ${
-          json ? "text-green-700 bg-green-50" : "text-amber-700 bg-amber-50"
-        } font-mono`}
+        className={clsx(
+          json
+            ? "text-green-700 bg-green-700/5"
+            : "text-amber-700 bg-amber-500/5",
+          "font-mono",
+          "inline-block px-1 py-0.5 rounded",
+        )}
       >
         {json.toString()}
       </span>
     );
   }
 
+  if (Array.isArray(json)) {
+    return (
+      <span title={JSON.stringify(json)}>
+        Array <span className="text-gray-500">({json.length})</span>
+      </span>
+    );
+  }
+
   if (typeof json === "object") {
     return (
       <span
@@ -135,11 +151,16 @@ export const CoMapPreview = ({
       <div>
         <img
           src={snapshot.placeholderDataURL}
-          className="w-8 h-8 border-2 border-white shadow my-2"
+          className="size-8 border-2 border-white drop-shadow-md my-2"
         />
         <span className="text-gray-500 text-sm">
           {snapshot.originalSize[0]} x {snapshot.originalSize[1]}
         </span>
+
+        {/* <CoMapPreview coId={value[]} node={node} /> */}
+        {/* <ProgressiveImg image={value}>
+                    {({ src }) => <img src={src} className={clsx("w-full")} />}
+                </ProgressiveImg> */}
       </div>
     );
   }
@@ -165,13 +186,13 @@ export const CoMapPreview = ({
   }
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="text-sm flex flex-col gap-2 items-start">
       <div className="grid grid-cols-[auto_1fr] gap-2">
         {Object.entries(snapshot)
           .slice(0, limit)
           .map(([key, value]) => (
             <React.Fragment key={key}>
-              <span className="font-bold">{key}: </span>
+              <span className="font-medium">{key}: </span>
               <span>
                 <ValueRenderer json={value} />
               </span>
@@ -179,7 +200,7 @@ export const CoMapPreview = ({
           ))}
       </div>
       {Object.entries(snapshot).length > limit && (
-        <div className="text-left text-sm text-gray-500">
+        <div className="text-left text-xs text-gray-500 mt-2">
           {Object.entries(snapshot).length - limit} more
         </div>
       )}
@@ -226,13 +247,14 @@ export function AccountOrGroupPreview({
   const displayName = extendedType === "account" ? name || "Account" : "Group";
   const displayText = showId ? `${displayName} (${coId})` : displayName;
 
-  const className = onClick
-    ? "text-blue cursor-pointer underline dark:text-blue-400"
-    : "text-gray-500";
+  const props = onClick
+    ? {
+        onClick: () => onClick(displayName),
+        className: "text-blue-500 cursor-pointer hover:underline",
+      }
+    : {
+        className: "text-gray-500",
+      };
 
-  return (
-    <span className={className} onClick={() => onClick?.(displayName)}>
-      {displayText}
-    </span>
-  );
+  return <span {...props}>{displayText}</span>;
 }

pnpm-lock.yaml

@@ -709,18 +709,6 @@ importers:
 
   examples/inspector:
     dependencies:
-      '@radix-ui/react-checkbox':
-        specifier: ^1.0.4
-        version: 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot':
-        specifier: ^1.1.1
-        version: 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-toast':
-        specifier: ^1.1.4
-        version: 1.2.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      class-variance-authority:
-        specifier: ^0.7.0
-        version: 0.7.1
       clsx:
         specifier: ^2.0.0
         version: 2.1.1
@@ -733,12 +721,12 @@ importers:
       hash-slash:
         specifier: workspace:0.2.2
         version: link:../../packages/hash-slash
+      jazz-inspector:
+        specifier: workspace:*
+        version: link:../../packages/jazz-inspector
       lucide-react:
         specifier: ^0.274.0
         version: 0.274.0(react@18.3.1)
-      qrcode:
-        specifier: ^1.5.3
-        version: 1.5.4
       react:
         specifier: 18.3.1
         version: 18.3.1
@@ -754,19 +742,7 @@ importers:
       react-use:
         specifier: ^17.4.0
         version: 17.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      tailwind-merge:
-        specifier: ^1.14.0
-        version: 1.14.0
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.2)(typescript@5.6.3)))
-      uniqolor:
-        specifier: ^1.1.0
-        version: 1.1.1
     devDependencies:
-      '@types/qrcode':
-        specifier: ^1.5.1
-        version: 1.5.5
       '@types/react':
         specifier: ^18.3.12
         version: 18.3.18