veryfront 0.1.30 → 0.1.32

package/esm/deno.js

@@ -1,6 +1,6 @@
 export default {
     "name": "veryfront",
-    "version": "0.1.30",
+    "version": "0.1.32",
     "license": "Apache-2.0",
     "nodeModulesDir": "auto",
     "exclude": [

package/esm/src/html/dev-scripts.d.ts

@@ -8,6 +8,10 @@ export interface StudioScriptOptions {
     nonce?: string;
     /** Hash of source code for sync detection with Navigator tree */
     sourceHash?: string;
+    /** WebSocket URL for direct Yjs connection from the bridge */
+    wsUrl?: string;
+    /** Yjs document GUID for the bridge to join the same room */
+    yjsGuid?: string;
 }
 export declare function getStudioScripts(options: StudioScriptOptions): string;
 //# sourceMappingURL=dev-scripts.d.ts.map

package/esm/src/html/dev-scripts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev-scripts.d.ts","sourceRoot":"","sources":["../../../src/src/html/dev-scripts.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CA+BnD;AAMD,wBAAgB,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAMvE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAOnE;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,CAerE"}
+{"version":3,"file":"dev-scripts.d.ts","sourceRoot":"","sources":["../../../src/src/html/dev-scripts.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CA+BnD;AAMD,wBAAgB,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAMvE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAOnE;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,CAiBrE"}

package/esm/src/html/dev-scripts.js

@@ -51,6 +51,8 @@ export function getStudioScripts(options) {
         projectId: options.projectId,
         pageId: options.pageId,
         ...(options.pagePath ? { pagePath: options.pagePath } : {}),
+        ...(options.wsUrl ? { wsUrl: options.wsUrl } : {}),
+        ...(options.yjsGuid ? { yjsGuid: options.yjsGuid } : {}),
     }).toString();
     const sourceHashScript = options.sourceHash
         ? `<script${nonceAttr}>window.__VERYFRONT_SOURCE_HASH__="${options.sourceHash}";</script>\n  `

package/esm/src/html/html-injection.d.ts

@@ -15,6 +15,10 @@ export interface InjectHTMLContentOptions {
     pageId?: string;
     /** CSP nonce */
     nonce?: string;
+    /** WebSocket URL for direct Yjs connection from the bridge */
+    wsUrl?: string;
+    /** Yjs document GUID for the bridge to join the same room */
+    yjsGuid?: string;
 }
 export declare function injectHTMLContent(template: string, content: string, metadata: HTMLMetadata, options: InjectHTMLContentOptions): string;
 //# sourceMappingURL=html-injection.d.ts.map

package/esm/src/html/html-injection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-injection.d.ts","sourceRoot":"","sources":["../../../src/src/html/html-injection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAS/D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,wBAAwB,GAChC,MAAM,CA0ER"}
+{"version":3,"file":"html-injection.d.ts","sourceRoot":"","sources":["../../../src/src/html/html-injection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAS/D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,wBAAwB,GAChC,MAAM,CA4ER"}

package/esm/src/html/html-injection.js

@@ -56,6 +56,8 @@ export function injectHTMLContent(template, content, metadata, options) {
             projectId: options.projectId ?? options.slug,
             pageId: options.pageId ?? options.slug,
             nonce: options.nonce,
+            wsUrl: options.wsUrl,
+            yjsGuid: options.yjsGuid,
         });
         html = html.replace(/<\/body>/i, `${studioScripts}</body>`);
     }

package/esm/src/server/handlers/preview/markdown-html-generator.d.ts

@@ -24,6 +24,10 @@ export interface MarkdownHtmlOptions {
     projectId: string;
     /** File path of the markdown file. */
     filePath: string;
+    /** Branch ID for Yjs room GUID computation. */
+    branchId?: string | null;
+    /** Request host for computing the WebSocket URL. */
+    requestHost?: string;
 }
 /**
  * Generate a complete HTML document for markdown preview rendering.

package/esm/src/server/handlers/preview/markdown-html-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-html-generator.d.ts","sourceRoot":"","sources":["../../../../../src/src/server/handlers/preview/markdown-html-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC;AAMrD,oDAAoD;AACpD,MAAM,WAAW,mBAAmB;IAClC,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC;IACzB,gDAAgD;IAChD,GAAG,EAAE,GAAG,CAAC;IACT,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAgDD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,CA0FzE"}
+{"version":3,"file":"markdown-html-generator.d.ts","sourceRoot":"","sources":["../../../../../src/src/server/handlers/preview/markdown-html-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC;AAMrD,oDAAoD;AACpD,MAAM,WAAW,mBAAmB;IAClC,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC;IACzB,gDAAgD;IAChD,GAAG,EAAE,GAAG,CAAC;IACT,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAgED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,CA2FzE"}

package/esm/src/server/handlers/preview/markdown-html-generator.js

@@ -25,19 +25,28 @@ function detectTheme(req, url) {
  * Injected when embedded in Studio (`studio_embed=true`) or for standalone
  * markdown/MDX pages so the edit button and editor features are available.
  */
-function buildStudioScript(url, projectId, filePath) {
+function buildStudioScript(url, projectId, filePath, branchId, requestHost) {
     const studioEmbed = url.searchParams.get("studio_embed") === "true";
     const isMarkdown = /\.mdx?$/i.test(filePath);
     if (!studioEmbed && !isMarkdown)
         return "";
-    const queryProjectId = url.searchParams.get("vf_project_id")?.trim() || "";
+    const rawQueryProjectId = url.searchParams.get("vf_project_id")?.trim() || "";
+    // Validate query param to prevent path traversal in WebSocket URL
+    const queryProjectId = /^[a-zA-Z0-9_-]+$/.test(rawQueryProjectId) ? rawQueryProjectId : "";
     const queryFileId = url.searchParams.get("vf_file_id")?.trim() || "";
     const canonicalProjectId = queryProjectId || projectId;
     const canonicalPageId = queryFileId || filePath;
+    // Compute Yjs connection config for the bridge to self-connect
+    const wsProtocol = url.protocol === "https:" ? "wss" : "ws";
+    const host = requestHost || url.host;
+    const wsUrl = `${wsProtocol}://${host}/api/ws/${canonicalProjectId}/yjs`;
+    const yjsGuid = branchId ? `${canonicalProjectId}:${branchId}` : canonicalProjectId;
     return `<script>${generateStudioBridgeScript({
         projectId: canonicalProjectId,
         pageId: canonicalPageId,
         pagePath: filePath,
+        wsUrl,
+        yjsGuid,
     })}</script>`;
 }
 /**
@@ -48,9 +57,9 @@ function buildStudioScript(url, projectId, filePath) {
  * studio bridge integration.
  */
 export function generateMarkdownHtml(options) {
-    const { rawHtml, title, description, request, url, projectId, filePath } = options;
+    const { rawHtml, title, description, request, url, projectId, filePath, branchId, requestHost } = options;
     const theme = detectTheme(request, url);
-    const studioScript = buildStudioScript(url, projectId, filePath);
+    const studioScript = buildStudioScript(url, projectId, filePath, branchId, requestHost);
     const themeAttrs = theme ? ` data-theme="${theme}" style="color-scheme: ${theme};"` : "";
     return `<!DOCTYPE html>
 <html lang="en"${themeAttrs}>

package/esm/src/server/handlers/preview/markdown-preview.handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-preview.handler.d.ts","sourceRoot":"","sources":["../../../../../src/src/server/handlers/preview/markdown-preview.handler.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAmB,aAAa,EAAE,MAAM,aAAa,CAAC;AAgBnG,qBAAa,sBAAuB,SAAQ,WAAW;IACrD,QAAQ,EAAE,eAAe,CAKvB;IAEI,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC;YAiEjE,cAAc;CAgF7B"}
+{"version":3,"file":"markdown-preview.handler.d.ts","sourceRoot":"","sources":["../../../../../src/src/server/handlers/preview/markdown-preview.handler.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAmB,aAAa,EAAE,MAAM,aAAa,CAAC;AAgBnG,qBAAa,sBAAuB,SAAQ,WAAW;IACrD,QAAQ,EAAE,eAAe,CAKvB;IAEI,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC;YAiEjE,cAAc;CAkF7B"}

package/esm/src/server/handlers/preview/markdown-preview.handler.js

@@ -108,6 +108,8 @@ export class MarkdownPreviewHandler extends BaseHandler {
                 url,
                 projectId: ctx.projectSlug || ctx.projectId || "markdown-preview",
                 filePath,
+                branchId: ctx.parsedDomain?.branch ?? null,
+                requestHost: url.host,
             });
             const responseBuilder = this.createResponseBuilder(ctx)
                 .withCache("no-cache")

package/esm/src/server/handlers/studio/endpoints.handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"endpoints.handler.d.ts","sourceRoot":"","sources":["../../../../../src/src/server/handlers/studio/endpoints.handler.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EAEf,aAAa,EACd,MAAM,aAAa,CAAC;AAIrB,qBAAa,sBAAuB,SAAQ,WAAW;IACrD,QAAQ,EAAE,eAAe,CAKvB;IAEF,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC;CAqB1E"}
+{"version":3,"file":"endpoints.handler.d.ts","sourceRoot":"","sources":["../../../../../src/src/server/handlers/studio/endpoints.handler.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EAEf,aAAa,EACd,MAAM,aAAa,CAAC;AAIrB,qBAAa,sBAAuB,SAAQ,WAAW;IACrD,QAAQ,EAAE,eAAe,CAKvB;IAEF,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC;CAuB1E"}

package/esm/src/server/handlers/studio/endpoints.handler.js

@@ -20,7 +20,9 @@ export class StudioEndpointsHandler extends BaseHandler {
         const projectId = url.searchParams.get("projectId") ?? "";
         const pageId = url.searchParams.get("pageId") ?? "";
         const pagePath = url.searchParams.get("pagePath") ?? undefined;
-        const script = generateStudioBridgeScript({ projectId, pageId, pagePath });
+        const wsUrl = url.searchParams.get("wsUrl") ?? undefined;
+        const yjsGuid = url.searchParams.get("yjsGuid") ?? undefined;
+        const script = generateStudioBridgeScript({ projectId, pageId, pagePath, wsUrl, yjsGuid });
         const response = builder.withCache("no-cache").javascript(script, HTTP_OK);
         return Promise.resolve(this.respond(response));
     }

package/esm/src/studio/bridge-template.d.ts

@@ -2,6 +2,8 @@ export interface StudioBridgeOptions {
     projectId: string;
     pageId: string;
     pagePath?: string;
+    wsUrl?: string;
+    yjsGuid?: string;
     debugSkipInit?: boolean;
     debugExposeInternals?: boolean;
 }

package/esm/src/studio/bridge-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bridge-template.d.ts","sourceRoot":"","sources":["../../../src/src/studio/bridge-template.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,CAigI/E"}
+{"version":3,"file":"bridge-template.d.ts","sourceRoot":"","sources":["../../../src/src/studio/bridge-template.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,CAsvI/E"}

package/esm/src/studio/bridge-template.js

@@ -5,6 +5,8 @@ export function generateStudioBridgeScript(options) {
   const PROJECT_ID = ${JSON.stringify(options.projectId)};
   const PAGE_ID = ${JSON.stringify(options.pageId)};
   const PAGE_PATH = ${JSON.stringify(options.pagePath ?? options.pageId)};
+  const WS_URL = ${JSON.stringify(options.wsUrl ?? "")};
+  const YJS_GUID = ${JSON.stringify(options.yjsGuid ?? "")};
   const DEBUG_SKIP_INIT = ${options.debugSkipInit ? "true" : "false"};
   const DEBUG_EXPOSE_INTERNALS = ${options.debugExposeInternals ? "true" : "false"};
 
@@ -70,6 +72,14 @@ export function generateStudioBridgeScript(options) {
   let markdownLatestSelections = [];
   let markdownHasUnsavedChanges = false;
   let markdownSaveInProgress = false;
+  let markdownYDoc = null;
+  let markdownYProvider = null;
+  let markdownYText = null;
+  let markdownYjsConnected = false;
+  let markdownYjsSetupId = 0;
+  let markdownYjsY = null;
+  let markdownPendingSelection = null;
+  const LEXICAL_YJS_ORIGIN = 'lexical-yjs-binding';
 
   const MARKDOWN_SLASH_COMMANDS = [
     {
@@ -1410,6 +1420,247 @@ export function generateStudioBridgeScript(options) {
     }, 120);
   }
 
+  function computeTextDiff(oldText, newText) {
+    var prefixLen = 0;
+    var minLen = Math.min(oldText.length, newText.length);
+    while (prefixLen < minLen && oldText.charCodeAt(prefixLen) === newText.charCodeAt(prefixLen)) {
+      prefixLen++;
+    }
+    var suffixLen = 0;
+    var maxSuffix = minLen - prefixLen;
+    while (suffixLen < maxSuffix &&
+           oldText.charCodeAt(oldText.length - 1 - suffixLen) === newText.charCodeAt(newText.length - 1 - suffixLen)) {
+      suffixLen++;
+    }
+    return {
+      index: prefixLen,
+      deleteCount: oldText.length - prefixLen - suffixLen,
+      insertText: newText.slice(prefixLen, suffixLen > 0 ? newText.length - suffixLen : undefined)
+    };
+  }
+
+  function syncLocalChangeToYText(fullContent) {
+    if (!markdownYText || !markdownYDoc) {
+      return;
+    }
+    var currentYContent = markdownYText.toString();
+    if (currentYContent === fullContent) {
+      return;
+    }
+    var diff = computeTextDiff(currentYContent, fullContent);
+    if (diff.deleteCount === 0 && diff.insertText === '') {
+      return;
+    }
+    markdownYDoc.transact(function() {
+      if (diff.deleteCount > 0) {
+        markdownYText.delete(diff.index, diff.deleteCount);
+      }
+      if (diff.insertText) {
+        markdownYText.insert(diff.index, diff.insertText);
+      }
+    }, LEXICAL_YJS_ORIGIN);
+  }
+
+  function setupMarkdownYjsConnection(config) {
+    if (markdownYDoc) {
+      return;
+    }
+
+    var setupId = ++markdownYjsSetupId;
+
+    Promise.all([
+      import('https://esm.sh/yjs@13.6.28?target=es2022'),
+      import('https://esm.sh/y-websocket@2.1.0?deps=yjs@13.6.28&target=es2022')
+    ]).then(function(modules) {
+      // Abort if edit mode was closed while imports were loading
+      if (setupId !== markdownYjsSetupId) {
+        return;
+      }
+
+      var Y = modules[0];
+      var WebsocketProvider = modules[1].WebsocketProvider;
+      markdownYjsY = Y;
+
+      var doc = new Y.Doc({ guid: config.guid });
+      // Cookie auth: authToken cookie on .veryfront.com is sent automatically
+      // with the WebSocket upgrade request. No explicit token param needed.
+      var provider = new WebsocketProvider(config.wsUrl, config.guid, doc, {
+        resyncInterval: -1
+      });
+
+      var ytext = doc.getText(config.fileId);
+
+      markdownYDoc = doc;
+      markdownYProvider = provider;
+      markdownYText = ytext;
+
+      // Filter non-binary messages to prevent y-websocket parse errors
+      provider.on('status', function(event) {
+        console.debug('[StudioBridge] Yjs status:', event.status);
+        if (event.status === 'connected' && provider.ws) {
+          var origOnMessage = provider.ws.onmessage;
+          provider.ws.onmessage = function(wsEvent) {
+            if (typeof wsEvent.data === 'string') {
+              return;
+            }
+            if (origOnMessage) {
+              origOnMessage.call(provider.ws, wsEvent);
+            }
+          };
+        }
+      });
+
+      // Extract user identity from authToken JWT cookie for presence
+      var presenceUser = { id: 'preview-' + Math.random().toString(36).slice(2), name: 'Preview' };
+      try {
+        var cookieMatch = document.cookie.match(/authToken=([^;]+)/);
+        if (cookieMatch) {
+          var parts = cookieMatch[1].split('.');
+          if (parts.length === 3) {
+            var payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
+            if (payload.userId) {
+              presenceUser.id = payload.userId;
+            }
+            if (payload.email) {
+              var local = payload.email.split('@')[0] || '';
+              if (local.includes('.') || local.includes('_')) {
+                presenceUser.name = local.split(/[._]/).map(function(p) { return p.charAt(0).toUpperCase() + p.slice(1); }).join(' ');
+              } else {
+                presenceUser.name = local.charAt(0).toUpperCase() + local.slice(1);
+              }
+            }
+          }
+        }
+      } catch (e) {
+        // Fall back to defaults on any parse error
+      }
+
+      // Set local user on awareness for presence
+      provider.awareness.setLocalStateField('user', {
+        id: presenceUser.id,
+        name: presenceUser.name,
+        color: '#10b981'
+      });
+
+      // Observe awareness for remote presence and selection changes
+      function syncAwareness() {
+        var states = Array.from(provider.awareness.getStates().entries());
+
+        // Sync presence users
+        var users = [];
+        for (var i = 0; i < states.length; i++) {
+          var clientId = states[i][0];
+          var state = states[i][1];
+          var user = state.user;
+          if (!user || typeof user.name !== 'string') {
+            continue;
+          }
+          users.push({
+            id: user.id || String(clientId),
+            name: user.name,
+            color: user.color || '#6b7280',
+            isCurrentUser: clientId === provider.awareness.clientID,
+            isAgent: user.isAgent || false
+          });
+        }
+        setMarkdownPresence(users);
+
+        // Sync remote selections
+        var selections = [];
+        for (var j = 0; j < states.length; j++) {
+          var cId = states[j][0];
+          var st = states[j][1];
+          var u = st.user;
+          var ranges = st.selection;
+          if (!u || !Array.isArray(ranges) || ranges.length === 0) {
+            continue;
+          }
+          for (var k = 0; k < ranges.length; k++) {
+            var range = ranges[k];
+            var anchorPos = Y.createAbsolutePositionFromRelativePosition(range.anchor, doc);
+            var markerPos = Y.createAbsolutePositionFromRelativePosition(range.marker, doc);
+            if (!anchorPos || !markerPos || anchorPos.type !== ytext || markerPos.type !== ytext) {
+              continue;
+            }
+            selections.push({
+              id: u.id || String(cId),
+              name: u.name || 'Anonymous',
+              color: u.color || '#6b7280',
+              isCurrentUser: cId === provider.awareness.clientID,
+              start: Math.min(anchorPos.index, markerPos.index),
+              end: Math.max(anchorPos.index, markerPos.index)
+            });
+          }
+        }
+        setMarkdownSelections(selections);
+      }
+
+      provider.awareness.on('change', syncAwareness);
+
+      provider.on('sync', function(synced) {
+        if (synced && !markdownYjsConnected) {
+          markdownYjsConnected = true;
+
+          var ytextContent = ytext.toString();
+          if (markdownCurrentContent && markdownCurrentContent !== ytextContent) {
+            // User typed before sync completed — push local edits to Y.Text
+            syncLocalChangeToYText(markdownCurrentContent);
+          } else if (ytextContent) {
+            // No local edits — seed editor from Y.Text
+            applyMarkdownContent(ytextContent);
+          }
+
+          // Replay any selection queued before Yjs was ready
+          if (markdownPendingSelection) {
+            var ps = markdownPendingSelection;
+            markdownPendingSelection = null;
+            var cs = Math.max(0, Math.min(ytext.length, ps.start));
+            var ce = Math.max(0, Math.min(ytext.length, ps.end));
+            provider.awareness.setLocalStateField('selection', [{
+              anchor: Y.createRelativePositionFromTypeIndex(ytext, cs),
+              marker: Y.createRelativePositionFromTypeIndex(ytext, ce)
+            }]);
+          }
+
+          // Observe Y.Text for remote changes (from other users / Monaco)
+          ytext.observe(function(event) {
+            if (event.transaction.origin === LEXICAL_YJS_ORIGIN) {
+              return;
+            }
+            var fullContent = ytext.toString();
+            if (fullContent === markdownCurrentContent) {
+              return;
+            }
+            applyMarkdownContent(fullContent);
+          });
+
+          // Initial awareness sync after Yjs is connected
+          syncAwareness();
+
+          console.debug('[StudioBridge] Yjs synced, bound to Y.Text for fileId:', config.fileId);
+        }
+      });
+    }).catch(function(error) {
+      console.error('[StudioBridge] Failed to setup Yjs connection:', error);
+    });
+  }
+
+  function disposeMarkdownYjs() {
+    markdownYjsSetupId++;
+    if (markdownYProvider) {
+      markdownYProvider.disconnect();
+      markdownYProvider.destroy();
+      markdownYProvider = null;
+    }
+    if (markdownYDoc) {
+      markdownYDoc.destroy();
+      markdownYDoc = null;
+    }
+    markdownYText = null;
+    markdownYjsConnected = false;
+    markdownYjsY = null;
+  }
+
   function getTextOffsetWithinRoot(root, targetNode, targetOffset) {
     if (!root || !targetNode) {
       return 0;
@@ -2495,27 +2746,26 @@ export function generateStudioBridgeScript(options) {
       const start = editorOffsetToSourceOffset(selection.start, 'start');
       const end = editorOffsetToSourceOffset(selection.end, 'end');
 
-      postToStudio({
-        action: 'markdownSelectionChange',
-        fileId: markdownFileId,
-        filePath: PAGE_PATH,
-        start: start,
-        end: end
-      });
+      // Set local selection on Yjs awareness directly
+      if (markdownYjsConnected && markdownYText && markdownYjsY && markdownYProvider) {
+        var clampedStart = Math.max(0, Math.min(markdownYText.length, start));
+        var clampedEnd = Math.max(0, Math.min(markdownYText.length, end));
+        markdownYProvider.awareness.setLocalStateField('selection', [{
+          anchor: markdownYjsY.createRelativePositionFromTypeIndex(markdownYText, clampedStart),
+          marker: markdownYjsY.createRelativePositionFromTypeIndex(markdownYText, clampedEnd)
+        }]);
+        markdownPendingSelection = null;
+      } else {
+        // Queue selection for replay after Yjs connects
+        markdownPendingSelection = { start: start, end: end };
+      }
     }, 80);
   }
 
   function clearMarkdownSelectionSync() {
-    if (!markdownFileId) {
-      return;
+    if (markdownYProvider) {
+      markdownYProvider.awareness.setLocalStateField('selection', null);
     }
-    postToStudio({
-      action: 'markdownSelectionChange',
-      fileId: markdownFileId,
-      filePath: PAGE_PATH,
-      start: -1,
-      end: -1
-    });
   }
 
   function clearMarkdownSelectionOverlay() {
@@ -2909,6 +3159,9 @@ export function generateStudioBridgeScript(options) {
     }
     markdownCurrentContent = fullContent;
     markdownHasUnsavedChanges = true;
+    if (markdownYjsConnected) {
+      syncLocalChangeToYText(fullContent);
+    }
     scheduleMarkdownSync(fullContent);
     scheduleMarkdownSelectionOverlayRender();
   }
@@ -3070,7 +3323,7 @@ export function generateStudioBridgeScript(options) {
       return;
     }
 
-    if (markdownLexicalApi && (markdownLexicalRenderedContent === content || markdownCurrentContent === content)) {
+    if (markdownLexicalApi && markdownLexicalRenderedContent === content) {
       console.debug('[StudioBridge] applyMarkdownContent: skipped (content unchanged)');
       markdownCurrentContent = content;
       scheduleMarkdownSelectionOverlayRender();
@@ -3700,6 +3953,15 @@ export function generateStudioBridgeScript(options) {
       scheduleMarkdownSlashMenuUpdate();
       scheduleMarkdownInlineToolbarUpdate();
       postMarkdownEditorReady();
+
+      // Self-connect to Yjs when server-injected config is available
+      if (WS_URL && YJS_GUID && !markdownYDoc) {
+        setupMarkdownYjsConnection({
+          wsUrl: WS_URL,
+          guid: YJS_GUID,
+          fileId: markdownFileId
+        });
+      }
     } else {
       markdownBody.style.display = '';
       if (markdownEditorRoot) {
@@ -3711,6 +3973,7 @@ export function generateStudioBridgeScript(options) {
       markdownOverlaySelections = [];
       clearMarkdownSelectionOverlay();
       clearMarkdownSelectionSync();
+      disposeMarkdownYjs();
     }
 
     const nextUrl = new URL(window.location.href);
@@ -3934,16 +4197,6 @@ export function generateStudioBridgeScript(options) {
         if (!inspectMode) showHoverOverlay(message.id);
         return;
 
-      case 'setMarkdownContent':
-        if (!isMarkdownPage()) {
-          return;
-        }
-        if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
-          return;
-        }
-        applyMarkdownContent(message.content || '');
-        return;
-
       case 'setMarkdownPersistState':
         if (!isMarkdownPage()) {
           return;
@@ -3960,26 +4213,6 @@ export function generateStudioBridgeScript(options) {
         }
         return;
 
-      case 'setMarkdownPresence':
-        if (!isMarkdownPage()) {
-          return;
-        }
-        if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
-          return;
-        }
-        setMarkdownPresence(message.users);
-        return;
-
-      case 'setMarkdownSelections':
-        if (!isMarkdownPage()) {
-          return;
-        }
-        if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
-          return;
-        }
-        setMarkdownSelections(message.selections);
-        return;
-
       case 'screenshot':
         (async function() {
           if (message.multipleSections) {
@@ -4037,47 +4270,59 @@ export function generateStudioBridgeScript(options) {
   function init() {
     const params = new URLSearchParams(window.location.search);
     const studioEmbed = params.get('studio_embed') === 'true';
+    const isStandalone = window.parent === window && !studioEmbed;
 
-    if (window.parent === window && !studioEmbed) {
-      console.debug('[StudioBridge] Not in iframe and not studio_embed mode, skipping initialization');
-      return;
+    if (isStandalone) {
+      // Allow standalone markdown editing when WS_URL is available (server-injected Yjs config)
+      if (!WS_URL) {
+        console.debug('[StudioBridge] Not in iframe and not studio_embed mode, skipping initialization');
+        return;
+      }
     }
 
     console.debug('[StudioBridge] Initializing...');
 
-    injectOverlayStyles();
-    hoverOverlay = createOverlay('hover');
-    selectionOverlay = createOverlay('selection');
+    // Only set up Studio interaction features when embedded in Studio
+    if (!isStandalone) {
+      injectOverlayStyles();
+      hoverOverlay = createOverlay('hover');
+      selectionOverlay = createOverlay('selection');
+
+      setupConsoleCapture();
+      setupErrorHandling();
+      setupInspectMode();
+    }
 
-    setupConsoleCapture();
-    setupErrorHandling();
-    setupInspectMode();
     setupMarkdownEditor(params);
 
     window.addEventListener('message', handleStudioMessage);
 
-    // IMPORTANT: notifyAppLoaded() must be called BEFORE setupMutationObserver()
-    // because notifyAppLoaded sends onPageTransitionEnd which sets previewId,
-    // and treeUpdated (from setupMutationObserver) requires previewId to be set
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', function() {
+    if (!isStandalone) {
+      // IMPORTANT: notifyAppLoaded() must be called BEFORE setupMutationObserver()
+      // because notifyAppLoaded sends onPageTransitionEnd which sets previewId,
+      // and treeUpdated (from setupMutationObserver) requires previewId to be set
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+          notifyAppLoaded();
+          setupMutationObserver();
+        });
+      } else {
         notifyAppLoaded();
         setupMutationObserver();
-      });
-    } else {
-      notifyAppLoaded();
-      setupMutationObserver();
-    }
+      }
 
-    window.addEventListener('beforeunload', notifyAppUnloaded);
+      window.addEventListener('beforeunload', notifyAppUnloaded);
+    }
 
     const colorMode = params.get('color_mode');
     if (colorMode) setColorMode(colorMode);
 
-    const inspectModeParam = params.get('inspect_mode');
-    if (inspectModeParam === 'true') {
-      inspectMode = true;
-      console.debug('[StudioBridge] Inspect mode enabled from query param');
+    if (!isStandalone) {
+      const inspectModeParam = params.get('inspect_mode');
+      if (inspectModeParam === 'true') {
+        inspectMode = true;
+        console.debug('[StudioBridge] Inspect mode enabled from query param');
+      }
     }
 
     console.debug('[StudioBridge] Initialized successfully');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veryfront",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "The simplest way to build AI-powered apps",
   "keywords": [
     "react",

package/src/deno.js

@@ -1,6 +1,6 @@
 export default {
   "name": "veryfront",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "license": "Apache-2.0",
   "nodeModulesDir": "auto",
   "exclude": [

package/src/src/html/dev-scripts.ts

@@ -59,6 +59,10 @@ export interface StudioScriptOptions {
   nonce?: string;
   /** Hash of source code for sync detection with Navigator tree */
   sourceHash?: string;
+  /** WebSocket URL for direct Yjs connection from the bridge */
+  wsUrl?: string;
+  /** Yjs document GUID for the bridge to join the same room */
+  yjsGuid?: string;
 }
 
 export function getStudioScripts(options: StudioScriptOptions): string {
@@ -68,6 +72,8 @@ export function getStudioScripts(options: StudioScriptOptions): string {
     projectId: options.projectId,
     pageId: options.pageId,
     ...(options.pagePath ? { pagePath: options.pagePath } : {}),
+    ...(options.wsUrl ? { wsUrl: options.wsUrl } : {}),
+    ...(options.yjsGuid ? { yjsGuid: options.yjsGuid } : {}),
   }).toString();
 
   const sourceHashScript = options.sourceHash

package/src/src/html/html-injection.ts

@@ -23,6 +23,10 @@ export interface InjectHTMLContentOptions {
   pageId?: string;
   /** CSP nonce */
   nonce?: string;
+  /** WebSocket URL for direct Yjs connection from the bridge */
+  wsUrl?: string;
+  /** Yjs document GUID for the bridge to join the same room */
+  yjsGuid?: string;
 }
 
 export function injectHTMLContent(
@@ -99,6 +103,8 @@ export function injectHTMLContent(
       projectId: options.projectId ?? options.slug,
       pageId: options.pageId ?? options.slug,
       nonce: options.nonce,
+      wsUrl: options.wsUrl,
+      yjsGuid: options.yjsGuid,
     });
     html = html.replace(/<\/body>/i, `${studioScripts}</body>`);
   }

package/src/src/server/handlers/preview/markdown-html-generator.ts

@@ -29,6 +29,10 @@ export interface MarkdownHtmlOptions {
   projectId: string;
   /** File path of the markdown file. */
   filePath: string;
+  /** Branch ID for Yjs room GUID computation. */
+  branchId?: string | null;
+  /** Request host for computing the WebSocket URL. */
+  requestHost?: string;
 }
 
 /**
@@ -58,21 +62,37 @@ function detectTheme(req: dntShim.Request, url: URL): "light" | "dark" | null {
  * Injected when embedded in Studio (`studio_embed=true`) or for standalone
  * markdown/MDX pages so the edit button and editor features are available.
  */
-function buildStudioScript(url: URL, projectId: string, filePath: string): string {
+function buildStudioScript(
+  url: URL,
+  projectId: string,
+  filePath: string,
+  branchId?: string | null,
+  requestHost?: string,
+): string {
   const studioEmbed = url.searchParams.get("studio_embed") === "true";
   const isMarkdown = /\.mdx?$/i.test(filePath);
   if (!studioEmbed && !isMarkdown) return "";
 
-  const queryProjectId = url.searchParams.get("vf_project_id")?.trim() || "";
+  const rawQueryProjectId = url.searchParams.get("vf_project_id")?.trim() || "";
+  // Validate query param to prevent path traversal in WebSocket URL
+  const queryProjectId = /^[a-zA-Z0-9_-]+$/.test(rawQueryProjectId) ? rawQueryProjectId : "";
   const queryFileId = url.searchParams.get("vf_file_id")?.trim() || "";
   const canonicalProjectId = queryProjectId || projectId;
   const canonicalPageId = queryFileId || filePath;
 
+  // Compute Yjs connection config for the bridge to self-connect
+  const wsProtocol = url.protocol === "https:" ? "wss" : "ws";
+  const host = requestHost || url.host;
+  const wsUrl = `${wsProtocol}://${host}/api/ws/${canonicalProjectId}/yjs`;
+  const yjsGuid = branchId ? `${canonicalProjectId}:${branchId}` : canonicalProjectId;
+
   return `<script>${
     generateStudioBridgeScript({
       projectId: canonicalProjectId,
       pageId: canonicalPageId,
       pagePath: filePath,
+      wsUrl,
+      yjsGuid,
     })
   }</script>`;
 }
@@ -85,10 +105,11 @@ function buildStudioScript(url: URL, projectId: string, filePath: string): strin
  * studio bridge integration.
  */
 export function generateMarkdownHtml(options: MarkdownHtmlOptions): string {
-  const { rawHtml, title, description, request, url, projectId, filePath } = options;
+  const { rawHtml, title, description, request, url, projectId, filePath, branchId, requestHost } =
+    options;
 
   const theme = detectTheme(request, url);
-  const studioScript = buildStudioScript(url, projectId, filePath);
+  const studioScript = buildStudioScript(url, projectId, filePath, branchId, requestHost);
   const themeAttrs = theme ? ` data-theme="${theme}" style="color-scheme: ${theme};"` : "";
 
   return `<!DOCTYPE html>

package/src/src/server/handlers/preview/markdown-preview.handler.ts

@@ -159,6 +159,8 @@ export class MarkdownPreviewHandler extends BaseHandler {
         url,
         projectId: ctx.projectSlug || ctx.projectId || "markdown-preview",
         filePath,
+        branchId: ctx.parsedDomain?.branch ?? null,
+        requestHost: url.host,
       });
 
       const responseBuilder = this.createResponseBuilder(ctx)

package/src/src/server/handlers/studio/endpoints.handler.ts

@@ -38,8 +38,10 @@ export class StudioEndpointsHandler extends BaseHandler {
     const projectId = url.searchParams.get("projectId") ?? "";
     const pageId = url.searchParams.get("pageId") ?? "";
     const pagePath = url.searchParams.get("pagePath") ?? undefined;
+    const wsUrl = url.searchParams.get("wsUrl") ?? undefined;
+    const yjsGuid = url.searchParams.get("yjsGuid") ?? undefined;
 
-    const script = generateStudioBridgeScript({ projectId, pageId, pagePath });
+    const script = generateStudioBridgeScript({ projectId, pageId, pagePath, wsUrl, yjsGuid });
     const response = builder.withCache("no-cache").javascript(script, HTTP_OK);
 
     return Promise.resolve(this.respond(response));

package/src/src/studio/bridge-template.ts

@@ -2,6 +2,8 @@ export interface StudioBridgeOptions {
   projectId: string;
   pageId: string;
   pagePath?: string;
+  wsUrl?: string;
+  yjsGuid?: string;
   debugSkipInit?: boolean;
   debugExposeInternals?: boolean;
 }
@@ -13,6 +15,8 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
   const PROJECT_ID = ${JSON.stringify(options.projectId)};
   const PAGE_ID = ${JSON.stringify(options.pageId)};
   const PAGE_PATH = ${JSON.stringify(options.pagePath ?? options.pageId)};
+  const WS_URL = ${JSON.stringify(options.wsUrl ?? "")};
+  const YJS_GUID = ${JSON.stringify(options.yjsGuid ?? "")};
   const DEBUG_SKIP_INIT = ${options.debugSkipInit ? "true" : "false"};
   const DEBUG_EXPOSE_INTERNALS = ${options.debugExposeInternals ? "true" : "false"};
 
@@ -78,6 +82,14 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
   let markdownLatestSelections = [];
   let markdownHasUnsavedChanges = false;
   let markdownSaveInProgress = false;
+  let markdownYDoc = null;
+  let markdownYProvider = null;
+  let markdownYText = null;
+  let markdownYjsConnected = false;
+  let markdownYjsSetupId = 0;
+  let markdownYjsY = null;
+  let markdownPendingSelection = null;
+  const LEXICAL_YJS_ORIGIN = 'lexical-yjs-binding';
 
   const MARKDOWN_SLASH_COMMANDS = [
     {
@@ -1418,6 +1430,247 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
     }, 120);
   }
 
+  function computeTextDiff(oldText, newText) {
+    var prefixLen = 0;
+    var minLen = Math.min(oldText.length, newText.length);
+    while (prefixLen < minLen && oldText.charCodeAt(prefixLen) === newText.charCodeAt(prefixLen)) {
+      prefixLen++;
+    }
+    var suffixLen = 0;
+    var maxSuffix = minLen - prefixLen;
+    while (suffixLen < maxSuffix &&
+           oldText.charCodeAt(oldText.length - 1 - suffixLen) === newText.charCodeAt(newText.length - 1 - suffixLen)) {
+      suffixLen++;
+    }
+    return {
+      index: prefixLen,
+      deleteCount: oldText.length - prefixLen - suffixLen,
+      insertText: newText.slice(prefixLen, suffixLen > 0 ? newText.length - suffixLen : undefined)
+    };
+  }
+
+  function syncLocalChangeToYText(fullContent) {
+    if (!markdownYText || !markdownYDoc) {
+      return;
+    }
+    var currentYContent = markdownYText.toString();
+    if (currentYContent === fullContent) {
+      return;
+    }
+    var diff = computeTextDiff(currentYContent, fullContent);
+    if (diff.deleteCount === 0 && diff.insertText === '') {
+      return;
+    }
+    markdownYDoc.transact(function() {
+      if (diff.deleteCount > 0) {
+        markdownYText.delete(diff.index, diff.deleteCount);
+      }
+      if (diff.insertText) {
+        markdownYText.insert(diff.index, diff.insertText);
+      }
+    }, LEXICAL_YJS_ORIGIN);
+  }
+
+  function setupMarkdownYjsConnection(config) {
+    if (markdownYDoc) {
+      return;
+    }
+
+    var setupId = ++markdownYjsSetupId;
+
+    Promise.all([
+      import('https://esm.sh/yjs@13.6.28?target=es2022'),
+      import('https://esm.sh/y-websocket@2.1.0?deps=yjs@13.6.28&target=es2022')
+    ]).then(function(modules) {
+      // Abort if edit mode was closed while imports were loading
+      if (setupId !== markdownYjsSetupId) {
+        return;
+      }
+
+      var Y = modules[0];
+      var WebsocketProvider = modules[1].WebsocketProvider;
+      markdownYjsY = Y;
+
+      var doc = new Y.Doc({ guid: config.guid });
+      // Cookie auth: authToken cookie on .veryfront.com is sent automatically
+      // with the WebSocket upgrade request. No explicit token param needed.
+      var provider = new WebsocketProvider(config.wsUrl, config.guid, doc, {
+        resyncInterval: -1
+      });
+
+      var ytext = doc.getText(config.fileId);
+
+      markdownYDoc = doc;
+      markdownYProvider = provider;
+      markdownYText = ytext;
+
+      // Filter non-binary messages to prevent y-websocket parse errors
+      provider.on('status', function(event) {
+        console.debug('[StudioBridge] Yjs status:', event.status);
+        if (event.status === 'connected' && provider.ws) {
+          var origOnMessage = provider.ws.onmessage;
+          provider.ws.onmessage = function(wsEvent) {
+            if (typeof wsEvent.data === 'string') {
+              return;
+            }
+            if (origOnMessage) {
+              origOnMessage.call(provider.ws, wsEvent);
+            }
+          };
+        }
+      });
+
+      // Extract user identity from authToken JWT cookie for presence
+      var presenceUser = { id: 'preview-' + Math.random().toString(36).slice(2), name: 'Preview' };
+      try {
+        var cookieMatch = document.cookie.match(/authToken=([^;]+)/);
+        if (cookieMatch) {
+          var parts = cookieMatch[1].split('.');
+          if (parts.length === 3) {
+            var payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
+            if (payload.userId) {
+              presenceUser.id = payload.userId;
+            }
+            if (payload.email) {
+              var local = payload.email.split('@')[0] || '';
+              if (local.includes('.') || local.includes('_')) {
+                presenceUser.name = local.split(/[._]/).map(function(p) { return p.charAt(0).toUpperCase() + p.slice(1); }).join(' ');
+              } else {
+                presenceUser.name = local.charAt(0).toUpperCase() + local.slice(1);
+              }
+            }
+          }
+        }
+      } catch (e) {
+        // Fall back to defaults on any parse error
+      }
+
+      // Set local user on awareness for presence
+      provider.awareness.setLocalStateField('user', {
+        id: presenceUser.id,
+        name: presenceUser.name,
+        color: '#10b981'
+      });
+
+      // Observe awareness for remote presence and selection changes
+      function syncAwareness() {
+        var states = Array.from(provider.awareness.getStates().entries());
+
+        // Sync presence users
+        var users = [];
+        for (var i = 0; i < states.length; i++) {
+          var clientId = states[i][0];
+          var state = states[i][1];
+          var user = state.user;
+          if (!user || typeof user.name !== 'string') {
+            continue;
+          }
+          users.push({
+            id: user.id || String(clientId),
+            name: user.name,
+            color: user.color || '#6b7280',
+            isCurrentUser: clientId === provider.awareness.clientID,
+            isAgent: user.isAgent || false
+          });
+        }
+        setMarkdownPresence(users);
+
+        // Sync remote selections
+        var selections = [];
+        for (var j = 0; j < states.length; j++) {
+          var cId = states[j][0];
+          var st = states[j][1];
+          var u = st.user;
+          var ranges = st.selection;
+          if (!u || !Array.isArray(ranges) || ranges.length === 0) {
+            continue;
+          }
+          for (var k = 0; k < ranges.length; k++) {
+            var range = ranges[k];
+            var anchorPos = Y.createAbsolutePositionFromRelativePosition(range.anchor, doc);
+            var markerPos = Y.createAbsolutePositionFromRelativePosition(range.marker, doc);
+            if (!anchorPos || !markerPos || anchorPos.type !== ytext || markerPos.type !== ytext) {
+              continue;
+            }
+            selections.push({
+              id: u.id || String(cId),
+              name: u.name || 'Anonymous',
+              color: u.color || '#6b7280',
+              isCurrentUser: cId === provider.awareness.clientID,
+              start: Math.min(anchorPos.index, markerPos.index),
+              end: Math.max(anchorPos.index, markerPos.index)
+            });
+          }
+        }
+        setMarkdownSelections(selections);
+      }
+
+      provider.awareness.on('change', syncAwareness);
+
+      provider.on('sync', function(synced) {
+        if (synced && !markdownYjsConnected) {
+          markdownYjsConnected = true;
+
+          var ytextContent = ytext.toString();
+          if (markdownCurrentContent && markdownCurrentContent !== ytextContent) {
+            // User typed before sync completed — push local edits to Y.Text
+            syncLocalChangeToYText(markdownCurrentContent);
+          } else if (ytextContent) {
+            // No local edits — seed editor from Y.Text
+            applyMarkdownContent(ytextContent);
+          }
+
+          // Replay any selection queued before Yjs was ready
+          if (markdownPendingSelection) {
+            var ps = markdownPendingSelection;
+            markdownPendingSelection = null;
+            var cs = Math.max(0, Math.min(ytext.length, ps.start));
+            var ce = Math.max(0, Math.min(ytext.length, ps.end));
+            provider.awareness.setLocalStateField('selection', [{
+              anchor: Y.createRelativePositionFromTypeIndex(ytext, cs),
+              marker: Y.createRelativePositionFromTypeIndex(ytext, ce)
+            }]);
+          }
+
+          // Observe Y.Text for remote changes (from other users / Monaco)
+          ytext.observe(function(event) {
+            if (event.transaction.origin === LEXICAL_YJS_ORIGIN) {
+              return;
+            }
+            var fullContent = ytext.toString();
+            if (fullContent === markdownCurrentContent) {
+              return;
+            }
+            applyMarkdownContent(fullContent);
+          });
+
+          // Initial awareness sync after Yjs is connected
+          syncAwareness();
+
+          console.debug('[StudioBridge] Yjs synced, bound to Y.Text for fileId:', config.fileId);
+        }
+      });
+    }).catch(function(error) {
+      console.error('[StudioBridge] Failed to setup Yjs connection:', error);
+    });
+  }
+
+  function disposeMarkdownYjs() {
+    markdownYjsSetupId++;
+    if (markdownYProvider) {
+      markdownYProvider.disconnect();
+      markdownYProvider.destroy();
+      markdownYProvider = null;
+    }
+    if (markdownYDoc) {
+      markdownYDoc.destroy();
+      markdownYDoc = null;
+    }
+    markdownYText = null;
+    markdownYjsConnected = false;
+    markdownYjsY = null;
+  }
+
   function getTextOffsetWithinRoot(root, targetNode, targetOffset) {
     if (!root || !targetNode) {
       return 0;
@@ -2503,27 +2756,26 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
       const start = editorOffsetToSourceOffset(selection.start, 'start');
       const end = editorOffsetToSourceOffset(selection.end, 'end');
 
-      postToStudio({
-        action: 'markdownSelectionChange',
-        fileId: markdownFileId,
-        filePath: PAGE_PATH,
-        start: start,
-        end: end
-      });
+      // Set local selection on Yjs awareness directly
+      if (markdownYjsConnected && markdownYText && markdownYjsY && markdownYProvider) {
+        var clampedStart = Math.max(0, Math.min(markdownYText.length, start));
+        var clampedEnd = Math.max(0, Math.min(markdownYText.length, end));
+        markdownYProvider.awareness.setLocalStateField('selection', [{
+          anchor: markdownYjsY.createRelativePositionFromTypeIndex(markdownYText, clampedStart),
+          marker: markdownYjsY.createRelativePositionFromTypeIndex(markdownYText, clampedEnd)
+        }]);
+        markdownPendingSelection = null;
+      } else {
+        // Queue selection for replay after Yjs connects
+        markdownPendingSelection = { start: start, end: end };
+      }
     }, 80);
   }
 
   function clearMarkdownSelectionSync() {
-    if (!markdownFileId) {
-      return;
+    if (markdownYProvider) {
+      markdownYProvider.awareness.setLocalStateField('selection', null);
     }
-    postToStudio({
-      action: 'markdownSelectionChange',
-      fileId: markdownFileId,
-      filePath: PAGE_PATH,
-      start: -1,
-      end: -1
-    });
   }
 
   function clearMarkdownSelectionOverlay() {
@@ -2917,6 +3169,9 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
     }
     markdownCurrentContent = fullContent;
     markdownHasUnsavedChanges = true;
+    if (markdownYjsConnected) {
+      syncLocalChangeToYText(fullContent);
+    }
     scheduleMarkdownSync(fullContent);
     scheduleMarkdownSelectionOverlayRender();
   }
@@ -3078,7 +3333,7 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
       return;
     }
 
-    if (markdownLexicalApi && (markdownLexicalRenderedContent === content || markdownCurrentContent === content)) {
+    if (markdownLexicalApi && markdownLexicalRenderedContent === content) {
       console.debug('[StudioBridge] applyMarkdownContent: skipped (content unchanged)');
       markdownCurrentContent = content;
       scheduleMarkdownSelectionOverlayRender();
@@ -3708,6 +3963,15 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
       scheduleMarkdownSlashMenuUpdate();
       scheduleMarkdownInlineToolbarUpdate();
       postMarkdownEditorReady();
+
+      // Self-connect to Yjs when server-injected config is available
+      if (WS_URL && YJS_GUID && !markdownYDoc) {
+        setupMarkdownYjsConnection({
+          wsUrl: WS_URL,
+          guid: YJS_GUID,
+          fileId: markdownFileId
+        });
+      }
     } else {
       markdownBody.style.display = '';
       if (markdownEditorRoot) {
@@ -3719,6 +3983,7 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
       markdownOverlaySelections = [];
       clearMarkdownSelectionOverlay();
       clearMarkdownSelectionSync();
+      disposeMarkdownYjs();
     }
 
     const nextUrl = new URL(window.location.href);
@@ -3942,16 +4207,6 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
         if (!inspectMode) showHoverOverlay(message.id);
         return;
 
-      case 'setMarkdownContent':
-        if (!isMarkdownPage()) {
-          return;
-        }
-        if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
-          return;
-        }
-        applyMarkdownContent(message.content || '');
-        return;
-
       case 'setMarkdownPersistState':
         if (!isMarkdownPage()) {
           return;
@@ -3968,26 +4223,6 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
         }
         return;
 
-      case 'setMarkdownPresence':
-        if (!isMarkdownPage()) {
-          return;
-        }
-        if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
-          return;
-        }
-        setMarkdownPresence(message.users);
-        return;
-
-      case 'setMarkdownSelections':
-        if (!isMarkdownPage()) {
-          return;
-        }
-        if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
-          return;
-        }
-        setMarkdownSelections(message.selections);
-        return;
-
       case 'screenshot':
         (async function() {
           if (message.multipleSections) {
@@ -4045,47 +4280,59 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
   function init() {
     const params = new URLSearchParams(window.location.search);
     const studioEmbed = params.get('studio_embed') === 'true';
+    const isStandalone = window.parent === window && !studioEmbed;
 
-    if (window.parent === window && !studioEmbed) {
-      console.debug('[StudioBridge] Not in iframe and not studio_embed mode, skipping initialization');
-      return;
+    if (isStandalone) {
+      // Allow standalone markdown editing when WS_URL is available (server-injected Yjs config)
+      if (!WS_URL) {
+        console.debug('[StudioBridge] Not in iframe and not studio_embed mode, skipping initialization');
+        return;
+      }
     }
 
     console.debug('[StudioBridge] Initializing...');
 
-    injectOverlayStyles();
-    hoverOverlay = createOverlay('hover');
-    selectionOverlay = createOverlay('selection');
+    // Only set up Studio interaction features when embedded in Studio
+    if (!isStandalone) {
+      injectOverlayStyles();
+      hoverOverlay = createOverlay('hover');
+      selectionOverlay = createOverlay('selection');
+
+      setupConsoleCapture();
+      setupErrorHandling();
+      setupInspectMode();
+    }
 
-    setupConsoleCapture();
-    setupErrorHandling();
-    setupInspectMode();
     setupMarkdownEditor(params);
 
     window.addEventListener('message', handleStudioMessage);
 
-    // IMPORTANT: notifyAppLoaded() must be called BEFORE setupMutationObserver()
-    // because notifyAppLoaded sends onPageTransitionEnd which sets previewId,
-    // and treeUpdated (from setupMutationObserver) requires previewId to be set
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', function() {
+    if (!isStandalone) {
+      // IMPORTANT: notifyAppLoaded() must be called BEFORE setupMutationObserver()
+      // because notifyAppLoaded sends onPageTransitionEnd which sets previewId,
+      // and treeUpdated (from setupMutationObserver) requires previewId to be set
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+          notifyAppLoaded();
+          setupMutationObserver();
+        });
+      } else {
         notifyAppLoaded();
         setupMutationObserver();
-      });
-    } else {
-      notifyAppLoaded();
-      setupMutationObserver();
-    }
+      }
 
-    window.addEventListener('beforeunload', notifyAppUnloaded);
+      window.addEventListener('beforeunload', notifyAppUnloaded);
+    }
 
     const colorMode = params.get('color_mode');
     if (colorMode) setColorMode(colorMode);
 
-    const inspectModeParam = params.get('inspect_mode');
-    if (inspectModeParam === 'true') {
-      inspectMode = true;
-      console.debug('[StudioBridge] Inspect mode enabled from query param');
+    if (!isStandalone) {
+      const inspectModeParam = params.get('inspect_mode');
+      if (inspectModeParam === 'true') {
+        inspectMode = true;
+        console.debug('[StudioBridge] Inspect mode enabled from query param');
+      }
     }
 
     console.debug('[StudioBridge] Initialized successfully');