@symbo.ls/mermaid 3.14.0 → 3.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/mermaid",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "type": "module",
   "license": "CC-BY-NC-4.0",
   "description": "Self-sustaining server runner for Symbols projects from JSON. Renders DOMQL projects to HTML with optional brender SSR.",
@@ -17,7 +17,11 @@
     "./utils/logger": "./src/utils/logger.js",
     "./template.html": "./src/template.html"
   },
-  "files": ["index.js", "src", "README.md"],
+  "files": [
+    "index.js",
+    "src",
+    "README.md"
+  ],
   "scripts": {
     "start": "node bin/start.js"
   },

package/src/bundle.js

@@ -48,14 +48,58 @@ export function getBundleScript(appKey, data, req, { ProjectDataService } = {})
   // Serialize the project data as JSON (same as templates __mockedData approach)
   const jsonData = JSON.stringify(data);
 
-  // Determine liveSync setting
-  const release = req?.query?.release || false;
-  const version = req?.query?.version;
-  const isSymboLs = typeof appKey === 'string' && appKey.endsWith('symbo.ls');
+  /*
+   * Determine liveSync setting.
+   *
+   * Realtime is enabled on Symbols-managed dev hosts (any *.symbo.ls env,
+   * *.preview.symbols.app, and localhost / *.localhost for local dev) and
+   * disabled on custom domains so we don't leak the realtime backend to
+   * third-party hosts. Post-§45 the appkey is a bare `owner/key` slug, so
+   * gating on `appKey.endsWith('symbo.ls')` would always evaluate false
+   * (rendering all browsers blind). The signal we want is the request host.
+   */
+  // Resolve incoming host across Express (req.headers.host),
+  // Cloudflare Workers / Fetch (req.headers is a Headers instance with .get),
+  // and plain options bags ({ host }). Falls back to req.url parsing so a
+  // missing Host header still degrades to a URL-based read instead of ''.
+  const rawHost =
+    (req?.headers && typeof req.headers.get === 'function' && req.headers.get('host')) ||
+    req?.headers?.host ||
+    req?.host ||
+    (req?.url && (() => { try { return new URL(req.url).host; } catch { return ''; } })()) ||
+    '';
+  const host = String(rawHost).toLowerCase().split(':')[0];
+  // Express exposes parsed query on req.query; CF Workers expose req.url only —
+  // pull `release` / `version` from a parsed URL when the structured form is
+  // absent so feature flags work in both runtimes.
+  const queryFrom = (() => {
+    if (req?.query) return req.query;
+    try { return Object.fromEntries(new URL(req?.url || '', 'http://x').searchParams); } catch { return {}; }
+  })();
+  const release = queryFrom.release || false;
+  const version = queryFrom.version;
+  const isSymboLs =
+    host.endsWith('.symbo.ls') ||
+    host.endsWith('.preview.symbols.app') ||
+    host === 'localhost' ||
+    host.endsWith('.localhost');
   const shouldDisableLiveSync = Boolean(release) || Boolean(version) || !isSymboLs;
 
+  // Inject the persisted `_id` so the realtime client can hand the socket
+  // server a concrete projectId (mongo _id) on handshake. Without this, the
+  // server falls back to a `/v1/projects/by-key/...` lookup that 404s on the
+  // current API and drops the connection mid-join.
+  const projectId =
+    (data && (data._id || data.projectId || data.id)) ||
+    null;
   const settingsStr = isSymboLs
-    ? JSON.stringify({ ...data.settings, liveSync: !shouldDisableLiveSync, inspect: true })
+    ? JSON.stringify({
+        ...data.settings,
+        liveSync: !shouldDisableLiveSync,
+        inspect: true,
+        verbose: !shouldDisableLiveSync,
+        projectId,
+      })
     : 'null';
 
   // Generate the client script - same pattern as templates/start.js runFromJson
@@ -85,14 +129,21 @@ export function getBundleScript(appKey, data, req, { ProjectDataService } = {})
     // way so pre-rendered children land at document.body level — matching the
     // level at which DOMQL creates its own elements. The __BRENDER__ flag and
     // __BR_REGISTRY__ map were injected into <head> by the server.
-    // Theme initialization: set data-theme before app renders to avoid FOUC
+    // Theme initialization: set data-theme before app renders to avoid FOUC.
+    // 'auto' means "follow OS preference" — resolve through matchMedia and
+    // emit the concrete light/dark value. Writing the literal "auto" string
+    // would leave [data-theme="dark"] / [data-theme="light"] selectors
+    // unmatched + the page would render with system-default colors instead
+    // of the chosen theme. Matches resolveAndApplyTheme in smbls/src/index.js.
     if (context.useDocumentTheme !== false) {
       (function() {
         try {
           var t = null;
           var key = context.themeStorageKey;
           if (key) { try { t = localStorage.getItem(key) } catch(e) {} }
-          if (!t) t = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+          if (!t || t === 'auto') {
+            t = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+          }
           if (t) document.documentElement.setAttribute('data-theme', t);
         } catch(e) {}
       })();

package/src/render.js

@@ -309,7 +309,10 @@ export async function renderProjectHtml(data, options = {}) {
   const bundle = getBundleScript(appkey, data, req, { ProjectDataService });
 
   // ── Importmap ─────────────────────────────────────────────────────────────
-  const importmap = getImportMapScript(data, data?.settings?.cdnProvider || 'skypack');
+  // esm.sh is the default — it resolves transitive deps correctly and matches
+  // the `context.packageManager = 'esm.sh'` set by bundle.js at runtime.
+  // Skypack frequently 500s on transitive deps (e.g. lit-html via ninja-keys).
+  const importmap = getImportMapScript(data, data?.settings?.cdnProvider || 'esmsh');
 
   // ── HTML template ─────────────────────────────────────────────────────────
   const indexHtmlFromFiles = data?.files && data.files['index.html'];
@@ -378,23 +381,35 @@ export async function renderProjectHtml(data, options = {}) {
 }
 
 /**
- * Render the "project not published" 404 fallback page.
+ * Render the "project not published" 404 fallback page. When `reason` is
+ * 'not_public', renders a tailored "site not yet public" message —
+ * specifically for paid custom domains pointing at a project whose
+ * visibility is still private.
  */
-export function renderNotPublishedHtml(appkey, channel = 'production') {
+export function renderNotPublishedHtml(appkey, channel = 'production', reason = null) {
   const envLabel = channel !== 'production' ? ` (${channel})` : '';
+  const isNotPublic = reason === 'not_public';
+  const title = isNotPublic ? 'Site Not Yet Public' : 'Not Published';
+  const heading = isNotPublic
+    ? `This site isn't public yet${envLabel}`
+    : `This project hasn't been published yet${envLabel}`;
+  const body = isNotPublic
+    ? `The owner has connected this domain but the project's visibility is set to private. Once they switch it to public in the workspace settings, the site will appear here automatically.`
+    : `Run <code>smbls publish</code> to deploy your project, or visit <a href="https://symbols.app">symbols.app</a> to get started.`;
   return `<!doctype html>
 <html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex">
-  <title>Not Published</title>
+  <title>${title}</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body { min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0a0a0a; color: #fafafa; }
-    .container { text-align: center; max-width: 480px; padding: 2rem; }
+    .container { text-align: center; max-width: 520px; padding: 2rem; }
     h1 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.75rem; }
     p { color: #888; font-size: 0.875rem; line-height: 1.6; }
+    code { background: #1a1a1a; padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.8rem; color: #ccc; }
     a { color: #888; text-decoration: underline; text-underline-offset: 2px; }
     a:hover { color: #fafafa; }
     .env { display: inline-block; font-size: 0.75rem; color: #555; background: #1a1a1a; padding: 0.2rem 0.5rem; border-radius: 4px; margin-top: 1rem; }
@@ -402,8 +417,8 @@ export function renderNotPublishedHtml(appkey, channel = 'production') {
 </head>
 <body>
   <div class="container">
-    <h1>This project hasn't been published yet${envLabel}</h1>
-    <p>Run <code>smbls publish</code> to deploy your project, or visit <a href="https://symbols.app">symbols.app</a> to get started.</p>
+    <h1>${heading}</h1>
+    <p>${body}</p>
     <span class="env">${appkey}${envLabel}</span>
   </div>
 </body>