@jxsuite/studio 0.36.0 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -39,9 +39,10 @@
     "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
     "@jxsuite/ai": "^0.33.0",
+    "@jxsuite/collab": "^0.2.0",
     "@jxsuite/create": "^0.36.0",
     "@jxsuite/parser": "^0.35.1",
-    "@jxsuite/protocol": "^0.2.0",
+    "@jxsuite/protocol": "^0.3.0",
     "@jxsuite/runtime": "^0.34.2",
     "@jxsuite/schema": "^0.35.0",
     "@spectrum-web-components/accordion": "^1.12.1",
@@ -86,6 +87,7 @@
     "lit": "^3.3.3",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
+    "y-monaco": "^0.1.6",
     "yaml": "^2.9.0"
   },
   "devDependencies": {

package/src/canvas/canvas-render.ts

@@ -10,6 +10,9 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
 import { canvasPanels, canvasWrap, updateCanvas } from "../store";
 import { activeTab } from "../workspace/workspace";
+import { collabSourceContext } from "../collab/collab-session";
+import { attachCursorStyles } from "../collab/monaco-cursors";
+import type { AwarenessLike } from "../collab/monaco-cursors";
 import { view } from "../view";
 import { parseSourceForPath, serializeDocument } from "../files/file-ops";
 import { formatByName, formatForPath } from "../format/format-host";
@@ -130,11 +133,48 @@ function hardClearCanvasWrap() {
  * the very next render is treated as a fresh mode transition and rebuilds the surface from
  * scratch.
  */
+/** Live source-mode collab binding teardown (unbind + release the canonical lock). */
+let sourceCollabCleanup: (() => void) | null = null;
+
+function disposeSourceCollab(): void {
+  sourceCollabCleanup?.();
+  sourceCollabCleanup = null;
+}
+
+/**
+ * Bind the Monaco editor to the shared source text via y-monaco: two-way character-level sync plus
+ * remote in-buffer cursors/selections (decorated per-client; colors injected from the presence
+ * palette by {@link attachCursorStyles}). y-monaco/yjs evaluation defers behind the dynamic import
+ * until a code view actually binds. Returns the teardown.
+ */
+async function createSourceCollabBinding(
+  model: monaco.editor.ITextModel,
+  editor: monaco.editor.IStandaloneCodeEditor,
+  ctx: NonNullable<ReturnType<typeof collabSourceContext>>,
+): Promise<() => void> {
+  const { MonacoBinding } = await import("y-monaco");
+  type YText = ConstructorParameters<typeof MonacoBinding>[0];
+  type BindingAwareness = ConstructorParameters<typeof MonacoBinding>[3];
+  const binding = new MonacoBinding(
+    ctx.text as YText,
+    model,
+    new Set([editor]),
+    ctx.awareness as BindingAwareness,
+  );
+  const detachStyles = attachCursorStyles(ctx.awareness as unknown as AwarenessLike, document);
+  return () => {
+    detachStyles();
+    binding.destroy();
+    ctx.leave();
+  };
+}
+
 function resetCanvasView() {
   if (view.functionEditor) {
     view.functionEditor.dispose();
     view.functionEditor = null;
   }
+  disposeSourceCollab();
   if (view.monacoEditor) {
     view.monacoEditor.getModel()?.dispose();
     view.monacoEditor.dispose();
@@ -305,6 +345,7 @@ export function renderCanvas() {
     }
 
     // Dispose Monaco editor if switching away from source mode
+    disposeSourceCollab();
     if (view.monacoEditor) {
       view.monacoEditor.getModel()?.dispose();
       view.monacoEditor.dispose();
@@ -368,17 +409,45 @@ export function renderCanvas() {
     const lang = sourceLang(tab);
     const modelUri = monaco.Uri.parse(`file:///${filePath}`);
     const model = monaco.editor.createModel("", lang, modelUri);
-    sourceContent(tab, lang)
-      .then((content) => {
-        const editor = view.monacoEditor;
-        if (editor && editor.getModel() === model) {
-          editor._ignoreNextChange = true;
-          model.setValue(content);
-        }
-      })
-      .catch(() => {
-        // Serialization unavailable — leave the buffer empty rather than crash the render
-      });
+    // Co-edited tabs bind the buffer to the shared Y.Text instead of a local serialization: the
+    // Canonical lock flips to "source", peers co-type character-level, and the source reconciler
+    // Parses back into the structure tree for everyone's canvas.
+    const collabCtx = collabSourceContext(tab);
+    if (collabCtx) {
+      void collabCtx
+        .enter()
+        .then(async () => {
+          const editor = view.monacoEditor;
+          if (!editor || editor.getModel() !== model) {
+            return;
+          }
+          const cleanup = await createSourceCollabBinding(model, editor, collabCtx);
+          // The editor may have been torn down while y-monaco loaded — unbind immediately.
+          if (view.monacoEditor !== editor || editor.getModel() !== model) {
+            cleanup();
+            return;
+          }
+          sourceCollabCleanup = cleanup;
+          if (collabCtx.readOnly) {
+            editor.updateOptions({ readOnly: true });
+          }
+        })
+        .catch(() => {
+          // Binding failures degrade to a read-only-ish local buffer; the session stays live.
+        });
+    } else {
+      sourceContent(tab, lang)
+        .then((content) => {
+          const editor = view.monacoEditor;
+          if (editor && editor.getModel() === model) {
+            editor._ignoreNextChange = true;
+            model.setValue(content);
+          }
+        })
+        .catch(() => {
+          // Serialization unavailable — leave the buffer empty rather than crash the render
+        });
+    }
     view.monacoEditor = monaco.editor.create(editorContainer as unknown as HTMLElement, {
       automaticLayout: true,
       fontFamily: "'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace",
@@ -392,7 +461,11 @@ export function renderCanvas() {
       wordWrap: "on",
     });
 
-    // Debounced sync back to state
+    // Debounced sync back to state (solo tabs only: co-edited buffers flow through the shared
+    // Y.Text and the source reconciler's parse mirror instead of a whole-doc replace).
+    if (collabCtx) {
+      return;
+    }
     let debounce: ReturnType<typeof setTimeout> | undefined;
     view.monacoEditor.onDidChangeModelContent(() => {
       const editor = view.monacoEditor;

package/src/canvas/iframe-host.ts

@@ -25,6 +25,7 @@ import { rectOf } from "../utils/geometry";
 import { effect, effectScope } from "../reactivity";
 import { canvasPanels, canvasWrap, pathsEqual, renderOnly, updateCanvas, updateUi } from "../store";
 import { activeTab, workspace } from "../workspace/workspace";
+import { collabState } from "../collab/collab-state";
 import { getPlatform, hasPlatform } from "../platform";
 import type {
   ApplyFormatIntent,
@@ -63,6 +64,10 @@ interface HostState {
   selectionPath: (string | number)[] | null;
   /** Id of the most recent selection `measure` request, so stale `geometry` replies are dropped. */
   selReqId: number;
+  /** Id of the most recent presence `measure` request (allocated from the selReqId counter). */
+  presenceReqId: number;
+  /** Serialized peer path → presence box meta for the in-flight presence measure. */
+  presenceMeta: Map<string, { color: string; label: string }>;
   /** Whether an inline-edit session is live in this host's iframe (drives the format toolbar). */
   editing: boolean;
   /** The latest selection snapshot from this host's iframe (active tags + caret rect + link). */
@@ -478,6 +483,69 @@ function ensureSelectionWatch(): void {
   selectionWatch = { stop: () => scope.stop() };
 }
 
+/** Lazily start one reactive watcher that re-measures remote peers' selections in every host. */
+let presenceWatchStarted = false;
+let presenceTimer: ReturnType<typeof setTimeout> | null = null;
+
+function ensurePresenceWatch(): void {
+  if (presenceWatchStarted) {
+    return;
+  }
+  presenceWatchStarted = true;
+  const scope = effectScope(true);
+  scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (tab) {
+        // Track the roster deeply enough that selection moves re-trigger.
+        const { peers } = collabState(tab);
+        void peers.map((peer) => JSON.stringify(peer.state.structuralSelection ?? null)).join("|");
+      }
+      if (presenceTimer) {
+        clearTimeout(presenceTimer);
+      }
+      // Debounced: awareness updates arrive per cursor move.
+      presenceTimer = setTimeout(() => {
+        presenceTimer = null;
+        for (const host of liveHosts) {
+          requestPresence(host);
+        }
+      }, 100);
+    });
+  });
+}
+
+/** Measure remote peers' selections in this host's iframe and draw colored boxes from the reply. */
+function requestPresence(host: HostState): void {
+  if (host.stylebook || !host.ready || !host.iframe.isConnected) {
+    return;
+  }
+  const tab = activeTab.value;
+  const peers = tab ? collabState(tab).peers : [];
+  host.presenceMeta.clear();
+  const paths: (string | number)[][] = [];
+  for (const peer of peers) {
+    const { structuralSelection } = peer.state;
+    if (!structuralSelection || peer.state.focusedPath !== tab?.documentPath) {
+      continue;
+    }
+    const path = [...structuralSelection];
+    paths.push(path);
+    host.presenceMeta.set(JSON.stringify(path), {
+      color: peer.state.user.color,
+      label: peer.state.user.name ?? peer.state.user.login,
+    });
+  }
+  if (paths.length === 0) {
+    host.presenceReqId = -1;
+    host.overlay.setPresence([]);
+    return;
+  }
+  host.selReqId += 1;
+  host.presenceReqId = host.selReqId;
+  host.channel.post({ kind: "measure", paths, reqId: host.presenceReqId });
+}
+
 /** Track the selection on a host and ask its iframe to measure it (or clear the box when null). */
 function requestSelection(host: HostState, sel: (string | number)[] | null): void {
   if (host.stylebook) {
@@ -608,6 +676,8 @@ function ensureHost(canvasEl: HTMLElement): HostState {
     pending: null,
     pendingEnterEdit: null,
     pendingTabIds: new Map(),
+    presenceMeta: new Map(),
+    presenceReqId: -1,
     ready: false,
     selectionPath: null,
     selReqId: 0,
@@ -625,6 +695,7 @@ function ensureHost(canvasEl: HTMLElement): HostState {
   hosts.set(canvasEl, state);
   liveHosts.add(state);
   ensureSelectionWatch();
+  ensurePresenceWatch();
   return state;
 }
 
@@ -767,6 +838,19 @@ function handleMessage(state: HostState, msg: IframeToParent): void {
       return;
     }
     case "geometry": {
+      // Remote-presence reply: draw one colored box per measured peer selection.
+      if (msg.reqId === state.presenceReqId) {
+        state.presenceReqId = -1;
+        const items: { placement: OverlayPlacement; color: string; label: string }[] = [];
+        for (const hit of msg.hits) {
+          const meta = state.presenceMeta.get(JSON.stringify(hit.path));
+          if (meta) {
+            items.push({ ...meta, placement: canvasRectToParent(hit.rect) });
+          }
+        }
+        state.overlay.setPresence(items);
+        return;
+      }
       // Pan-to-card reply (stylebook): convert the card's iframe rect to parent-viewport space by
       // The empirical zoom + iframe offset and center it.
       if (msg.reqId === state.panReqId) {
@@ -1047,6 +1131,7 @@ function handleMessage(state: HostState, msg: IframeToParent): void {
 function onDomUpdated(state: HostState, gen: number): void {
   state.lastRenderedGen = gen;
   requestSelection(state, state.selectionPath);
+  requestPresence(state);
   hideInsertZoneNow(state);
   if (state.pendingEnterEdit && gen >= state.pendingEnterEdit.minGen) {
     const { path } = state.pendingEnterEdit;

package/src/canvas/iframe-overlay.ts

@@ -65,6 +65,11 @@ export interface OverlayLayer {
    * omitted/null hides it.
    */
   setSelection: (placement: OverlayPlacement | null, label?: string | null) => void;
+  /**
+   * Draw remote collaborators' selection boxes (colored outline + name tag). Replaces the whole set
+   * each call; pass [] to clear. Placements are overlay-local coords like setSelection's.
+   */
+  setPresence: (items: { placement: OverlayPlacement; color: string; label: string }[]) => void;
   /** Position the hover box (or hide it when `placement` is null). */
   setHover: (placement: OverlayPlacement | null) => void;
   /**
@@ -143,7 +148,11 @@ export function createOverlayLayer(doc: Document = document): OverlayLayer {
   insertButton.style.pointerEvents = "auto";
   insertButton.style.display = "none";
 
-  root.append(hoverBox, selectionBox, dropBox, insertButton);
+  // Remote collaborators' selection boxes live in their own container, replaced wholesale.
+  const presenceGroup = doc.createElement("div");
+  presenceGroup.className = "overlay-presence-group";
+
+  root.append(hoverBox, selectionBox, dropBox, insertButton, presenceGroup);
 
   return {
     dispose: () => root.remove(),
@@ -152,6 +161,26 @@ export function createOverlayLayer(doc: Document = document): OverlayLayer {
     setDropIndicator: (placement, edge = "inside") => placeDropIndicator(dropBox, placement, edge),
     setHover: (placement) => place(hoverBox, placement),
     setInsertZone: (placement, edge = "center") => placeInsertButton(insertButton, placement, edge),
+    setPresence: (items) => {
+      presenceGroup.replaceChildren();
+      for (const item of items) {
+        const box = doc.createElement("div");
+        box.className = "overlay-box overlay-presence";
+        box.style.cssText =
+          `position:absolute;display:block;pointer-events:none;` +
+          `outline:1.5px solid ${item.color};outline-offset:1px;` +
+          `left:${item.placement.left}px;top:${item.placement.top}px;` +
+          `width:${item.placement.width}px;height:${item.placement.height}px`;
+        const tag = doc.createElement("div");
+        tag.className = "overlay-presence-tag";
+        tag.textContent = item.label;
+        tag.style.cssText =
+          `position:absolute;top:-18px;left:-2px;padding:1px 5px;border-radius:3px;` +
+          `font:10px/1.4 sans-serif;color:#fff;white-space:nowrap;background:${item.color}`;
+        box.append(tag);
+        presenceGroup.append(box);
+      }
+    },
     setSelection: (placement, label = null) => {
       place(selectionBox, placement);
       if (placement && label) {