feat: headless Yjs collaboration extension (beta) + baseUrl cleanup

.github/workflows/release.yml

@@ -10,6 +10,14 @@ name: Release @lexkit/editor
 #      already on npm, and if not, publishes it (with provenance) and cuts a
 #      GitHub release. Pushes that don't change the version are no-ops.
 #
+# Dist-tags: a prerelease version (one containing a hyphen, e.g.
+# `0.1.0-beta.0`) is published under the `beta` npm dist-tag, so
+# `npm i @lexkit/editor` stays on the stable `latest` while
+# `npm i @lexkit/editor@beta` gets the prerelease. Stable versions publish to
+# `latest`. To cut a beta from a feature branch before merging, run this
+# workflow manually against that branch:
+#   gh workflow run "Release @lexkit/editor" --ref <branch>
+#
 # Setup required once:
 #   - Add an npm "Automation" access token as the repo secret `NPM_TOKEN`
 #     (Settings -> Secrets and variables -> Actions -> New repository secret).
@@ -66,6 +74,14 @@ jobs:
           VERSION=$(node -p "require('./package.json').version")
           echo "name=$NAME" >> "$GITHUB_OUTPUT"
           echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+          # A hyphen in the version marks a prerelease -> publish under `beta`.
+          if [[ "$VERSION" == *-* ]]; then
+            echo "dist_tag=beta" >> "$GITHUB_OUTPUT"
+            echo "prerelease=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "dist_tag=latest" >> "$GITHUB_OUTPUT"
+            echo "prerelease=false" >> "$GITHUB_OUTPUT"
+          fi
           if npm view "$NAME@$VERSION" version >/dev/null 2>&1; then
             echo "published=true" >> "$GITHUB_OUTPUT"
             echo "::notice::$NAME@$VERSION is already on npm — skipping publish."
@@ -80,7 +96,7 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_CONFIG_PROVENANCE: "true"
-        run: pnpm publish --no-git-checks --access public
+        run: pnpm publish --no-git-checks --access public --tag "${{ steps.check.outputs.dist_tag }}"
 
       - name: Tag release and create GitHub Release
         if: steps.check.outputs.published == 'false'
@@ -90,6 +106,11 @@ jobs:
           TAG="editor-v${{ steps.check.outputs.version }}"
           git tag "$TAG"
           git push origin "$TAG"
+          PRERELEASE_FLAG=""
+          if [[ "${{ steps.check.outputs.prerelease }}" == "true" ]]; then
+            PRERELEASE_FLAG="--prerelease"
+          fi
           gh release create "$TAG" \
             --title "@lexkit/editor v${{ steps.check.outputs.version }}" \
-            --generate-notes
+            --generate-notes \
+            $PRERELEASE_FLAG

apps/web/app/(docs)/docs/extensions/CollaborationExtension/examples/BasicCollaborativeEditor.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+// Basic Collaborative Editor Example (zero-infra)
+// Real-time collaboration powered by the headless CollaborationExtension +
+// a y-webrtc provider. Open this page in two browser tabs/windows on the same
+// machine and type — same-origin tabs sync peer-to-peer via BroadcastChannel,
+// so there is NO server to run. (For cross-network collab, pass your own
+// `signaling` servers to WebrtcProvider, or swap in y-websocket.)
+import { useEffect, useState } from "react";
+import {
+  createEditorSystem,
+  richTextExtension,
+  collaborationExtension,
+  useCollaborators,
+  RichText,
+  type CollaborationProvider,
+} from "@lexkit/editor";
+import "@/app/(docs)/examples/basic-editor.css";
+
+// One identity per tab so presence shows distinct users.
+const NAMES = ["Ada", "Linus", "Grace", "Alan", "Margaret", "Dennis"];
+const COLORS = ["#e11d48", "#2563eb", "#16a34a", "#d97706", "#7c3aed", "#0891b2"];
+const me = Math.floor(Math.random() * NAMES.length);
+const username = NAMES[me];
+const cursorColor = COLORS[me];
+
+const extensions = [richTextExtension, collaborationExtension] as const;
+const { Provider } = createEditorSystem<typeof extensions>();
+
+// Live presence bar built entirely from the headless awareness API.
+function PresenceBar() {
+  const { users, isConnected } = useCollaborators();
+  return (
+    <div className="basic-toolbar" style={{ gap: 8, alignItems: "center" }}>
+      <span style={{ fontSize: 13, opacity: 0.7 }}>
+        {isConnected ? "🟢 live" : "⚪ offline"} · {users.length} here
+      </span>
+      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+        {users.map((u) => (
+          <span
+            key={u.clientId}
+            title={u.isLocal ? `${u.name} (you)` : u.name}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              fontSize: 13,
+              fontWeight: u.isLocal ? 700 : 500,
+            }}
+          >
+            <span
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                background: u.color || "#888",
+                display: "inline-block",
+              }}
+            />
+            {u.name || "anonymous"}
+            {u.isLocal ? " (you)" : ""}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function BasicCollaborativeEditor() {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    // Load the transport in the browser only (y-webrtc touches browser APIs).
+    Promise.all([import("y-webrtc"), import("yjs")]).then(
+      ([{ WebrtcProvider }, Y]) => {
+        if (cancelled) return;
+        collaborationExtension.configure({
+          id: "lexkit-collab-demo",
+          username,
+          cursorColor,
+          providerFactory: (id, docMap) => {
+            let doc = docMap.get(id);
+            if (!doc) {
+              doc = new Y.Doc();
+              docMap.set(id, doc);
+            }
+            // No signaling servers passed → same-origin tabs still sync via
+            // BroadcastChannel. Add `{ signaling: ["wss://your-server"] }` for
+            // cross-device collaboration.
+            const provider = new WebrtcProvider(id, doc);
+            return provider as unknown as CollaborationProvider;
+          },
+        });
+        setReady(true);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!ready) {
+    return (
+      <div className="basic-editor">
+        <div className="basic-editor-container" style={{ padding: 16 }}>
+          Loading collaboration…
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Provider extensions={extensions}>
+      <div className="basic-editor">
+        <PresenceBar />
+        <RichText
+          classNames={{
+            container: "basic-editor-container",
+            contentEditable: "basic-content",
+            placeholder: "basic-placeholder",
+          }}
+          placeholder="Open this page in a second tab and type — you're collaborating in real time."
+        />
+      </div>
+    </Provider>
+  );
+}