@tangle-network/ui 11.5.0 → 11.6.0

package/dist/{document-editor-pane-MX3FIZSE.js → document-editor-pane-A3JURPW5.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   DocumentEditorPane
-} from "./chunk-NZLLDHEG.js";
+} from "./chunk-QGTIBEPX.js";
 import "./chunk-Q56BYXQF.js";
 import "./chunk-LTEKI7YJ.js";
 import "./chunk-P5F43A65.js";

package/dist/{document-editor-pane-C3cYEDWZ.d.ts → document-editor-pane-IAEQn_Dl.d.ts}

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { a as ArtifactPaneProps } from './artifact-pane-DpuWcAiF.js';
 import { HocuspocusProvider } from '@hocuspocus/provider';
-import * as Y from 'yjs';
+import * as Yjs from 'yjs';
 
 /**
  * Connection state for the Hocuspocus provider.
@@ -24,7 +24,7 @@ interface Collaborator {
  */
 interface EditorContextValue {
     /** The Y.Doc instance for collaboration */
-    doc: Y.Doc;
+    doc: Yjs.Doc;
     /** The Hocuspocus provider instance */
     provider: HocuspocusProvider | null;
     /** Current connection state */
@@ -83,9 +83,13 @@ interface EditorProviderProps {
 }
 /**
  * EditorProvider wraps children with Hocuspocus collaboration context.
- * Manages WebSocket connection, Y.Doc, and awareness state.
+ * Manages WebSocket connection, Y.Doc, and awareness state. Loads `yjs` and
+ * `@hocuspocus/provider` — and no tiptap package — before it renders children,
+ * because every child hook reads a context that only the loaded provider can
+ * supply. A consumer that drives its own editor from that context therefore
+ * needs those two peers alone.
  */
-declare function EditorProvider({ websocketUrl, documentName, token, tokenExpiresAt, user, autoConnect, autoReconnect, maxReconnectAttempts, onConnectionChange, onSync, onAuthError, onRefreshToken, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
+declare function EditorProvider(props: EditorProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the editor context.
  * Must be used within an EditorProvider.

package/dist/editor.d.ts

@@ -1,5 +1,5 @@
-import { C as Collaborator, a as ConnectionState } from './document-editor-pane-C3cYEDWZ.js';
-export { D as DocumentEditorBackend, b as DocumentEditorMode, c as DocumentEditorPane, d as DocumentEditorPaneCollaborationConfig, e as DocumentEditorPaneProps, E as EditorContextValue, f as EditorProvider, g as EditorProviderProps, h as EditorTokenRefreshResult, i as EditorUser, u as useEditorContext } from './document-editor-pane-C3cYEDWZ.js';
+import { C as Collaborator, a as ConnectionState } from './document-editor-pane-IAEQn_Dl.js';
+export { D as DocumentEditorBackend, b as DocumentEditorMode, c as DocumentEditorPane, d as DocumentEditorPaneCollaborationConfig, e as DocumentEditorPaneProps, E as EditorContextValue, f as EditorProvider, g as EditorProviderProps, h as EditorTokenRefreshResult, i as EditorUser, u as useEditorContext } from './document-editor-pane-IAEQn_Dl.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Editor } from '@tiptap/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
@@ -41,9 +41,10 @@ interface TiptapEditorProps {
 }
 /**
  * TiptapEditor - Collaborative markdown editor with Y.js sync.
- * Must be used within an EditorProvider.
+ * Must be used within an EditorProvider. Loads its tiptap, Hocuspocus and
+ * yjs peers on first render.
  */
-declare function TiptapEditor({ initialContent, placeholder, readOnly, autoFocus, className, contentClassName, onUpdate, onSelectionUpdate, onReady, }: TiptapEditorProps): react_jsx_runtime.JSX.Element;
+declare function TiptapEditor(props: TiptapEditorProps): react_jsx_runtime.JSX.Element;
 /**
  * Collaborators list component.
  * Shows active users in the document.

package/dist/editor.js

@@ -11,7 +11,7 @@ import {
   useEditorConnection,
   useEditorContext,
   useYjsState
-} from "./chunk-NZLLDHEG.js";
+} from "./chunk-QGTIBEPX.js";
 import "./chunk-Q56BYXQF.js";
 import "./chunk-LTEKI7YJ.js";
 import "./chunk-P5F43A65.js";

package/dist/files.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GitStatusEntry, ContextMenuItem, ContextMenuOpenContext, GitStatus } from '@pierre/trees';
 import { ReactNode, CSSProperties } from 'react';
-import { b as DocumentEditorMode, D as DocumentEditorBackend, d as DocumentEditorPaneCollaborationConfig } from './document-editor-pane-C3cYEDWZ.js';
+import { b as DocumentEditorMode, D as DocumentEditorBackend, d as DocumentEditorPaneCollaborationConfig } from './document-editor-pane-IAEQn_Dl.js';
 import { a as ArtifactPaneProps } from './artifact-pane-DpuWcAiF.js';
 import '@hocuspocus/provider';
 import 'yjs';

package/dist/files.js

@@ -5,7 +5,7 @@ import {
   FileTree,
   RichFileTree,
   filterFileTree
-} from "./chunk-7O22XQ4D.js";
+} from "./chunk-PLWRAS5Z.js";
 import {
   detectFileFormat,
   fileExtension,

package/dist/index.d.ts

@@ -35,7 +35,7 @@ import '@radix-ui/react-progress';
 import '@radix-ui/react-switch';
 import '@radix-ui/react-label';
 import '@pierre/trees';
-import './document-editor-pane-C3cYEDWZ.js';
+import './document-editor-pane-IAEQn_Dl.js';
 import '@hocuspocus/provider';
 import 'yjs';
 import 'nanostores';

package/dist/index.js

@@ -221,7 +221,7 @@ import {
   FileTree,
   RichFileTree,
   filterFileTree
-} from "./chunk-7O22XQ4D.js";
+} from "./chunk-PLWRAS5Z.js";
 import {
   detectFileFormat,
   fileExtension,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.5.0",
+  "version": "11.6.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/editor/document-editor-pane.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type * as EditorPeers from "./editor-peers";
+
+const markdown = "# Release notes\n\nThe editor loads on demand.";
+
+afterEach(() => {
+  vi.resetModules();
+});
+
+/** Loads the pane with every peer loader rejecting, as for a consumer that
+ *  installed neither tiptap nor the collaboration stack. The spies report
+ *  whether a render reached a loader at all. */
+async function paneWithoutPeers(message: string) {
+  const loaders = {
+    loadDocumentEditorPeers: vi.fn(async () => {
+      throw new Error(message);
+    }),
+    loadCollaborationPeers: vi.fn(async () => {
+      throw new Error(message);
+    }),
+    loadEditorProviderPeers: vi.fn(async () => {
+      throw new Error(message);
+    }),
+  };
+  vi.resetModules();
+  vi.doMock("./editor-peers", async () => ({
+    ...(await vi.importActual<typeof EditorPeers>("./editor-peers")),
+    ...loaders,
+  }));
+  const { DocumentEditorPane } = await import("./document-editor-pane");
+  return { DocumentEditorPane, loaders };
+}
+
+describe("DocumentEditorPane without the editor peers", () => {
+  it("renders the preview, because only the edit tab needs the peers", async () => {
+    const { DocumentEditorPane, loaders } = await paneWithoutPeers(
+      "peers are not installed",
+    );
+
+    render(<DocumentEditorPane title="Notes" markdown={markdown} />);
+
+    // The promise this pane's editors carry is exactly this: a consumer that
+    // never opens the edit tab pays nothing for tiptap.
+    expect(screen.getByText("Release notes")).toBeInTheDocument();
+    expect(screen.getByText("The editor loads on demand.")).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Edit" })).toBeInTheDocument();
+
+    // Reaching no loader is the claim. Asserting only that the placeholder is
+    // absent would also pass for a pane that rendered nothing at all.
+    await waitFor(() => {
+      expect(screen.queryByText("Loading editor…")).toBeNull();
+    });
+    expect(loaders.loadDocumentEditorPeers).not.toHaveBeenCalled();
+    expect(loaders.loadCollaborationPeers).not.toHaveBeenCalled();
+    expect(loaders.loadEditorProviderPeers).not.toHaveBeenCalled();
+  });
+});

package/src/editor/editor-lazy.test.tsx

@@ -0,0 +1,102 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Component, type ReactNode, Suspense } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { retryableLazyEditor } from "./editor-lazy";
+import { MissingEditorPeersError } from "./editor-peers";
+
+/** Catches the rejection the lazy component throws, and can mount it again. */
+class ResettableBoundary extends Component<
+  { children: ReactNode },
+  { failure: Error | null }
+> {
+  state = { failure: null as Error | null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { failure: error };
+  }
+
+  render() {
+    if (this.state.failure) {
+      return (
+        <button type="button" onClick={() => this.setState({ failure: null })}>
+          failed: {this.state.failure.message}
+        </button>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+function Loaded() {
+  return <span>editor</span>;
+}
+
+/** React reports a caught render error on the console; the assertions read it. */
+let consoleError: ReturnType<typeof vi.spyOn>;
+
+beforeEach(() => {
+  consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+});
+
+afterEach(() => {
+  consoleError.mockRestore();
+});
+
+function renderRetryable(load: () => Promise<typeof Loaded>) {
+  const lazyEditor = retryableLazyEditor(load);
+  function Host() {
+    const LazyEditor = lazyEditor();
+    return (
+      <Suspense fallback={<span>loading</span>}>
+        <LazyEditor />
+      </Suspense>
+    );
+  }
+  return render(
+    <ResettableBoundary>
+      <Host />
+    </ResettableBoundary>,
+  );
+}
+
+describe("retryableLazyEditor", () => {
+  it("re-attempts the load after a transient failure", async () => {
+    // `lazy` caches its first rejection for the life of the component, so one
+    // failed chunk fetch would otherwise hold the editor broken until a full
+    // page reload.
+    const load = vi
+      .fn<() => Promise<typeof Loaded>>()
+      .mockRejectedValueOnce(new Error("Failed to fetch dynamically imported module"))
+      .mockResolvedValue(Loaded);
+
+    renderRetryable(load);
+
+    const retry = await screen.findByRole("button");
+    expect(retry).toHaveTextContent("Failed to fetch dynamically imported module");
+    expect(load).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(retry);
+
+    expect(await screen.findByText("editor")).toBeInTheDocument();
+    expect(load).toHaveBeenCalledTimes(2);
+  });
+
+  it("keeps a missing peer permanent, so a remount does not import it again", async () => {
+    // A package does not install itself mid-session. Retrying would only
+    // repeat the same failure and hide the install list behind a loop.
+    const load = vi
+      .fn<() => Promise<typeof Loaded>>()
+      .mockRejectedValue(new MissingEditorPeersError("Install @tiptap/react."));
+
+    renderRetryable(load);
+
+    const retry = await screen.findByRole("button");
+    expect(retry).toHaveTextContent("Install @tiptap/react.");
+    expect(load).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(retry);
+
+    expect(await screen.findByRole("button")).toHaveTextContent("Install @tiptap/react.");
+    expect(load).toHaveBeenCalledTimes(1);
+  });
+});

package/src/editor/editor-lazy.ts

@@ -0,0 +1,40 @@
+import { type ComponentType, lazy, type LazyExoticComponent } from "react";
+import { isMissingEditorPeersError } from "./editor-peers";
+
+/**
+ * Builds a `lazy` editor component that a remount can re-attempt.
+ *
+ * `lazy` caches its first rejection for the life of the component. That is
+ * right for a missing peer, which stays missing for the session, and wrong for
+ * a transient chunk fetch: one failed network request would otherwise hold the
+ * editor broken until a full page reload.
+ *
+ * The returned function gives the component to render, and a caller must call
+ * it on every render: a transient failure replaces the component, and a caller
+ * that holds the one it got earlier keeps replaying the cached rejection.
+ *
+ * A `MissingEditorPeersError` keeps the cached rejection, so the install list
+ * reaches the consumer's error boundary once and the loader does not run
+ * again. Any other rejection replaces the component, so the next mount — an
+ * error boundary that resets, or a remount by the parent — starts a fresh
+ * attempt.
+ */
+export function retryableLazyEditor<P extends object>(
+  loadComponent: () => Promise<ComponentType<P>>,
+): () => LazyExoticComponent<ComponentType<P>> {
+  function build(): LazyExoticComponent<ComponentType<P>> {
+    return lazy(async () => {
+      try {
+        return { default: await loadComponent() };
+      } catch (error) {
+        if (!isMissingEditorPeersError(error)) {
+          current = build();
+        }
+        throw error;
+      }
+    });
+  }
+
+  let current = build();
+  return () => current;
+}

package/src/editor/editor-loading.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { cn } from "../lib/utils";
+
+/**
+ * Stands in for an editor while its optional peers load. The editors reach
+ * tiptap through a dynamic import, so an editor's first frame waits for that
+ * chunk. The live region announces the wait, which a screen reader has no
+ * other way to notice. Callers put their own minimum height first, so a
+ * caller-supplied className still wins.
+ */
+export function EditorLoadingPlaceholder({ className }: { className?: string }) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={cn(
+        "flex w-full items-center justify-center rounded-lg border border-border border-dashed bg-muted text-muted-foreground text-sm",
+        className,
+      )}
+    >
+      Loading editor…
+    </div>
+  );
+}

package/src/editor/editor-peers.test.ts

@@ -0,0 +1,250 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  asMissingEditorPeersError,
+  isMissingEditorPeersError,
+  isMissingPeerError,
+} from "./editor-peers";
+
+/** The namespace shape each peer has when it is installed. */
+const installedPeers: Record<string, Record<string, unknown>> = {
+  "@tiptap/react": { useEditor: () => null, EditorContent: () => null },
+  "@tiptap/starter-kit": { default: { configure: () => ({}) } },
+  "@tiptap/extension-collaboration": { default: { configure: () => ({}) } },
+  "@tiptap/extension-collaboration-caret": { default: { configure: () => ({}) } },
+  "@hocuspocus/provider": { HocuspocusProvider: class {} },
+  yjs: { Doc: class {} },
+};
+
+/**
+ * Loads the module under test with the named peers replaced. The loaders read
+ * their peers through a dynamic import, so the substitution has to happen
+ * before the module graph is built — hence the reset and the dynamic import.
+ */
+async function loadPeerLoaders(
+  replacements: Record<string, Record<string, unknown>> = {},
+) {
+  vi.resetModules();
+  for (const specifier of Object.keys(installedPeers)) {
+    const namespace = replacements[specifier] ?? installedPeers[specifier];
+    vi.doMock(specifier, () => namespace);
+  }
+  return await import("./editor-peers");
+}
+
+afterEach(() => {
+  vi.resetModules();
+});
+
+describe("isMissingPeerError", () => {
+  it("recognises what each bundler and runtime says for an uninstalled package", () => {
+    const messages = [
+      // Vite's stub for an optional peer that is not installed.
+      'Could not resolve "@tiptap/react" imported by "@tangle-network/ui". Is it installed?',
+      // Node ESM.
+      "Cannot find package '@tiptap/react' imported from /app/index.js",
+      // CommonJS.
+      "Cannot find module '@tiptap/react'",
+      // webpack.
+      "Module not found: Error: Can't resolve '@tiptap/react' in '/app'",
+      // esbuild.
+      'Failed to resolve entry for package "@tiptap/react"',
+    ];
+
+    for (const message of messages) {
+      expect(isMissingPeerError(new Error(message)), message).toBe(true);
+    }
+  });
+
+  it("leaves a transient chunk failure to report its own cause", () => {
+    // Enriching this one with "install the peers" sends the reader to the
+    // wrong fix, and the peers are already installed.
+    expect(
+      isMissingPeerError(new Error("Failed to fetch dynamically imported module")),
+    ).toBe(false);
+    expect(isMissingPeerError(new Error("Network request failed"))).toBe(false);
+    expect(isMissingPeerError("Could not resolve")).toBe(false);
+  });
+});
+
+describe("editor optional peer loaders", () => {
+  it("returns the namespaces the editors call", async () => {
+    const { loadCollaborationPeers, loadDocumentEditorPeers } = await loadPeerLoaders();
+
+    const documentPeers = await loadDocumentEditorPeers();
+    expect(documentPeers.react.useEditor).toBe(installedPeers["@tiptap/react"].useEditor);
+    expect(documentPeers.starterKit.default).toBe(
+      installedPeers["@tiptap/starter-kit"].default,
+    );
+
+    const collaborationPeers = await loadCollaborationPeers();
+    expect(collaborationPeers.hocuspocus.HocuspocusProvider).toBe(
+      installedPeers["@hocuspocus/provider"].HocuspocusProvider,
+    );
+    expect(collaborationPeers.yjs.Doc).toBe(installedPeers.yjs.Doc);
+  });
+
+  it("names the install list when a peer resolves to a namespace with no editor in it", async () => {
+    // A bundler can stub a missing optional peer as a silent empty namespace
+    // rather than a throwing module. That shape must still fail with the peers
+    // named, and not as an undefined-property crash in the middle of a render.
+    const { loadDocumentEditorPeers } = await loadPeerLoaders({
+      "@tiptap/starter-kit": { default: undefined },
+    });
+
+    await expect(loadDocumentEditorPeers()).rejects.toThrow(
+      /Install @tiptap\/react and @tiptap\/starter-kit/,
+    );
+  });
+
+  it("names the install list when an extension stub carries a default it cannot configure", async () => {
+    // The commonest stub shape is a default export that is present but empty.
+    // It passes a plain "is the default defined" test, and then the factory
+    // calls .configure() on it and throws an opaque TypeError mid-render.
+    const { loadDocumentEditorPeers } = await loadPeerLoaders({
+      "@tiptap/starter-kit": { default: {} },
+    });
+
+    await expect(loadDocumentEditorPeers()).rejects.toThrow(
+      /Install @tiptap\/react and @tiptap\/starter-kit/,
+    );
+  });
+
+  it.each([
+    "@tiptap/extension-collaboration",
+    "@tiptap/extension-collaboration-caret",
+  ])("names the collaboration install list when %s is an empty default", async (specifier) => {
+    const { loadCollaborationPeers } = await loadPeerLoaders({
+      [specifier]: { default: {} },
+    });
+
+    await expect(loadCollaborationPeers()).rejects.toThrow(
+      /@hocuspocus\/provider and yjs/,
+    );
+  });
+
+  it("marks a missing peer permanent and leaves any other failure retryable", async () => {
+    // editor-lazy.ts reads this distinction to decide whether a remount may
+    // try the import again.
+    const { loadDocumentEditorPeers } = await loadPeerLoaders({
+      "@tiptap/starter-kit": { default: {} },
+    });
+
+    await expect(loadDocumentEditorPeers()).rejects.toSatisfy(isMissingEditorPeersError);
+    expect(isMissingEditorPeersError(new Error("Failed to fetch dynamically imported module"))).toBe(
+      false,
+    );
+  });
+
+  it("reports an unresolved import as a permanent missing peer and keeps the cause", async () => {
+    // The rejection a throwing stub gives must become the install list, so a
+    // consumer reads which packages to add, and must count as permanent so a
+    // remount does not retry an import that cannot start to succeed.
+    const resolutionFailure = new Error('Could not resolve "@tiptap/starter-kit"');
+    const mapped = asMissingEditorPeersError(resolutionFailure, "install the peers");
+
+    expect(isMissingEditorPeersError(mapped)).toBe(true);
+    expect(mapped).toHaveProperty("cause", resolutionFailure);
+    // The install list holds every peer the surface needs, so the message also
+    // names the one that is actually absent.
+    expect((mapped as Error).message).toBe(
+      "install the peers @tiptap/starter-kit did not resolve.",
+    );
+  });
+
+  it("names the caret package rather than the collaboration package it contains", async () => {
+    // "@tiptap/extension-collaboration" is a prefix of the caret specifier, so
+    // a naive substring match reports the wrong package.
+    const caretFailure = new Error(
+      'Could not resolve "@tiptap/extension-collaboration-caret"',
+    );
+    const mapped = asMissingEditorPeersError(caretFailure, "install the peers");
+
+    expect((mapped as Error).message).toBe(
+      "install the peers @tiptap/extension-collaboration-caret did not resolve.",
+    );
+  });
+
+  it("leaves a resolution failure that names no peer alone, so it stays retryable", async () => {
+    // An application chunk, or a dependency of a peer that did load, can fail
+    // to resolve too. Installing the editor peers would not fix that, and
+    // marking it permanent would stop a remount from trying again.
+    const unrelated = new Error("Cannot find module './app-chunk-a91f.js'");
+    const mapped = asMissingEditorPeersError(unrelated, "install the peers");
+
+    expect(mapped).toBe(unrelated);
+    expect(isMissingEditorPeersError(mapped)).toBe(false);
+  });
+
+  it("treats a @tiptap/core failure as a missing peer, though no loader imports it", async () => {
+    // The tiptap packages need @tiptap/core in turn, so a consumer that
+    // resolves it to nothing breaks exactly as one missing @tiptap/react
+    // does. Leaving it out of the list left that failure retryable.
+    const coreFailure = new Error('Could not resolve "@tiptap/core"');
+    const mapped = asMissingEditorPeersError(coreFailure, "install the peers");
+
+    expect(isMissingEditorPeersError(mapped)).toBe(true);
+    expect((mapped as Error).message).toBe(
+      "install the peers @tiptap/core did not resolve.",
+    );
+  });
+
+  it("keeps the install list alone when the failure names several peers", async () => {
+    const both = new Error(
+      'Could not resolve "@tiptap/react" or "@hocuspocus/provider"',
+    );
+    const mapped = asMissingEditorPeersError(both, "install the peers");
+
+    expect(isMissingEditorPeersError(mapped)).toBe(true);
+    expect((mapped as Error).message).toBe("install the peers");
+  });
+
+  it("leaves a transient chunk failure unchanged, so a remount can retry it", async () => {
+    const transient = new Error("Failed to fetch dynamically imported module");
+
+    expect(asMissingEditorPeersError(transient, "install the peers")).toBe(transient);
+    expect(isMissingEditorPeersError(transient)).toBe(false);
+  });
+
+  it("names the install list when a peer carries the wrong member type", async () => {
+    const { loadDocumentEditorPeers } = await loadPeerLoaders({
+      "@tiptap/react": { useEditor: undefined, EditorContent: undefined },
+    });
+
+    await expect(loadDocumentEditorPeers()).rejects.toThrow(
+      /Install @tiptap\/react and @tiptap\/starter-kit/,
+    );
+  });
+
+  it("accepts the shapes the installed peers really have", async () => {
+    // The other cases in this file describe the peers, so nothing here would
+    // notice a tiptap release that moves `configure` off the default export.
+    // Loading the real packages is what turns that into a failure here rather
+    // than in a consumer's editor.
+    vi.resetModules();
+    for (const specifier of Object.keys(installedPeers)) {
+      vi.doUnmock(specifier);
+    }
+    const { loadCollaborationPeers } = await import("./editor-peers");
+
+    const peers = await loadCollaborationPeers();
+    // Prove the substitutions are gone; against the stubs this case would
+    // pass without reading a real package at all.
+    expect(peers.starterKit.default).not.toBe(installedPeers["@tiptap/starter-kit"].default);
+    expect(typeof peers.starterKit.default.configure).toBe("function");
+    expect(typeof peers.collaboration.default.configure).toBe("function");
+    expect(typeof peers.collaborationCaret.default.configure).toBe("function");
+  });
+
+  it("keeps the local editor usable when only a collaboration peer is missing", async () => {
+    // sandbox-ui installs the tiptap packages alone, so the local markdown
+    // editor must not start to require yjs or Hocuspocus.
+    const { loadCollaborationPeers, loadDocumentEditorPeers } = await loadPeerLoaders({
+      yjs: { Doc: undefined },
+    });
+
+    await expect(loadDocumentEditorPeers()).resolves.toBeDefined();
+    await expect(loadCollaborationPeers()).rejects.toThrow(
+      /@hocuspocus\/provider and yjs/,
+    );
+  });
+});