collabmd 0.1.44 → 0.1.46

package/src/server/infrastructure/http/create-request-handler.js

@@ -2,12 +2,16 @@ import { createAuthApiHandler } from './create-auth-api-handler.js';
 import { createGitApiCommandHandler } from './create-git-api-command-handler.js';
 import { createGitApiQueryHandler } from './create-git-api-query-handler.js';
 import { createHostedApiHandler } from './create-hosted-api-handler.js';
-import { createEsmProxyHandler } from './create-esm-proxy-handler.js';
 import { createPlantUmlApiHandler } from './create-plantuml-api-handler.js';
 import { createStaticHandler } from './create-static-handler.js';
+import { createStructurizrApiHandler } from './create-structurizr-api-handler.js';
 import { createVaultApiCommandHandler } from './create-vault-api-command-handler.js';
 import { createVaultApiQueryHandler } from './create-vault-api-query-handler.js';
 import { parseJsonBody } from './request-body.js';
+import {
+  createRequestUrlWithPathname,
+  stripBasePath,
+} from './http-request-helpers.js';
 import {
   applyCorsHeaders,
   jsonResponse,
@@ -17,35 +21,13 @@ import {
   WRITE_METHODS,
 } from './http-response.js';
 
-function stripBasePath(pathname, basePath) {
-  if (!basePath) {
-    return pathname;
-  }
-
-  if (pathname === basePath) {
-    return '/';
-  }
-
-  if (pathname.startsWith(`${basePath}/`)) {
-    return pathname.slice(basePath.length) || '/';
-  }
-
-  return pathname;
-}
-
-function createRequestUrlWithPathname(requestUrl, pathname) {
-  const nextUrl = new URL(requestUrl.toString());
-  nextUrl.pathname = pathname || '/';
-  return nextUrl;
-}
-
 export function createRequestHandler(
   config,
   authService,
   vaultFileStore,
   backlinkIndex,
   baseQueryService = null,
-  docxExporter = null,
+  renderDocx = null,
   roomRegistry = null,
   plantUmlRenderer = null,
   gitService = null,
@@ -55,8 +37,8 @@ export function createRequestHandler(
   fileSystemSyncService = null,
   hostedWorkspaceService = null,
   githubSetupFlow = null,
+  structurizrWorkspaceService = null,
 ) {
-  const handleEsmProxy = createEsmProxyHandler();
   const handleStaticRequest = createStaticHandler(config, authService, searchService);
   const handleAuthApi = createAuthApiHandler({ authService });
   const handleHostedApi = createHostedApiHandler({
@@ -80,12 +62,17 @@ export function createRequestHandler(
   });
   const handleVaultApiCommand = createVaultApiCommandHandler({
     backlinkIndex,
-    docxExporter,
+    maxPdfUploadBytes: config.maxPdfUploadBytes,
+    renderDocx,
     roomRegistry,
     vaultFileStore,
     workspaceMutationCoordinator,
   });
   const handlePlantUmlApi = createPlantUmlApiHandler({ plantUmlRenderer });
+  const handleStructurizrApi = createStructurizrApiHandler({
+    basePath: config.basePath,
+    service: structurizrWorkspaceService,
+  });
 
   function handleBasePathRedirect(req, res, originalRequestUrl) {
     if (
@@ -195,11 +182,7 @@ export function createRequestHandler(
       return;
     }
 
-    if (await handleEsmProxy(req, res, requestUrl)) {
-      return;
-    }
-
-    if (requestUrl.pathname.startsWith('/api/')) {
+    if (requestUrl.pathname.startsWith('/api/') || handleStructurizrApi.requiresAuthorization(requestUrl)) {
       const authorization = authService.authorizeApiRequest(req);
       if (!authorization.ok) {
         jsonResponse(req, res, authorization.statusCode, authorization.body);
@@ -215,6 +198,10 @@ export function createRequestHandler(
       }
     }
 
+    if (await handleStructurizrApi(req, res, requestUrl)) {
+      return;
+    }
+
     if (requestUrl.pathname.startsWith('/api/')) {
       if (await handleVaultApiQuery(req, res, requestUrl)) {
         return;

package/src/server/infrastructure/http/create-static-handler.js

@@ -7,12 +7,13 @@ const CONTENT_TYPES = {
   '.css': 'text/css; charset=utf-8',
   '.html': 'text/html; charset=utf-8',
   '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
   '.json': 'application/json; charset=utf-8',
   '.svg': 'image/svg+xml',
 };
 
 function isVersionedAssetPath(pathname = '') {
-  return /-[A-Za-z0-9_-]{8,}\.(?:css|js|woff2?|ttf|svg)$/u.test(pathname);
+  return /-[A-Za-z0-9_-]{8,}\.(?:css|js|mjs|woff2?|ttf|svg)$/u.test(pathname);
 }
 
 function getStaticCacheControl(pathname = '', extension = '') {
@@ -33,7 +34,7 @@ function getStaticCacheControl(pathname = '', extension = '') {
       return 'public, max-age=31536000, immutable';
     }
 
-    if (extension === '.css' || extension === '.js') {
+    if (extension === '.css' || extension === '.js' || extension === '.mjs') {
       return 'public, max-age=0, must-revalidate';
     }
 
@@ -53,6 +54,7 @@ function buildRuntimeConfig({
   nodeEnv,
   publicWsBaseUrl,
   search,
+  structurizr,
   wikiLinkAutoCreate,
   wsBasePath,
 }) {
@@ -68,6 +70,7 @@ function buildRuntimeConfig({
     },
     publicWsBaseUrl,
     search,
+    structurizrEnabled: Boolean(structurizr?.enabled ?? structurizr?.serverUrl),
     wikiLinkAutoCreate,
     wsBasePath,
   })};\n`;

package/src/server/infrastructure/http/create-structurizr-api-handler.js

@@ -0,0 +1,145 @@
+import { readFile } from 'node:fs/promises';
+
+import { getRequestErrorStatusCode } from './http-errors.js';
+import { jsonResponse, sendResponse, textResponse } from './http-response.js';
+import { parseJsonBody } from './request-body.js';
+
+const EMBED_STYLESHEET_PATH = new URL('../structurizr/structurizr-embed.css', import.meta.url);
+
+function isSyncRequest(requestUrl, req) {
+  return requestUrl.pathname === '/api/structurizr/sync' && req.method === 'POST';
+}
+
+function isEmbedStylesheetRequest(requestUrl) {
+  return requestUrl.pathname === '/api/structurizr/embed.css';
+}
+
+function rewriteBasePath(body, contentType, basePath, { injectEmbedStylesheet = false } = {}) {
+  if (!/(?:text\/(?:html|css)|javascript|ecmascript)/iu.test(contentType)) {
+    return body;
+  }
+
+  let source = body.toString('utf8');
+  if (basePath) {
+    source = source.replace(
+      /(["'`(=])\/(static|workspace|api\/workspace)(?=[/"'`?#)])/gu,
+      `$1${basePath}/$2`,
+    );
+  }
+
+  if (injectEmbedStylesheet && /text\/html/iu.test(contentType)) {
+    const normalizedBasePath = String(basePath || '').replace(/\/+$/u, '');
+    const stylesheetPath = `${normalizedBasePath}/api/structurizr/embed.css`;
+    source = source.replace(
+      /<head(?:\s[^>]*)?>/iu,
+      (head) => `${head}\n<link rel="stylesheet" href="${stylesheetPath}">`,
+    );
+  }
+
+  return Buffer.from(source);
+}
+
+export function createStructurizrApiHandler({ basePath = '', service = null } = {}) {
+  async function handleRequest(req, res, requestUrl) {
+    if (isSyncRequest(requestUrl, req)) {
+      try {
+        const body = await parseJsonBody(req);
+        if (!body || typeof body.path !== 'string') {
+          jsonResponse(req, res, 400, { error: 'Missing Structurizr workspace path' });
+          return true;
+        }
+
+        if (!service?.isEnabled()) {
+          jsonResponse(req, res, 503, { error: 'Structurizr renderer is not configured' });
+          return true;
+        }
+
+        jsonResponse(req, res, 200, await service.sync({
+          content: body.source,
+          rootPath: body.path,
+        }));
+      } catch (error) {
+        const statusCode = getRequestErrorStatusCode(error) || Number(error?.statusCode) || 502;
+        if (statusCode >= 500) {
+          console.error('[api] Failed to sync Structurizr workspace:', error.message);
+        }
+        jsonResponse(req, res, statusCode, {
+          code: error?.requestCode,
+          error: error instanceof Error ? error.message : 'Failed to sync Structurizr workspace',
+        });
+      }
+      return true;
+    }
+
+    if (isEmbedStylesheetRequest(requestUrl)) {
+      if (!service?.isEnabled()) {
+        return false;
+      }
+
+      if (req.method !== 'GET' && req.method !== 'HEAD') {
+        textResponse(req, res, 405, 'Method Not Allowed', { Allow: 'GET, HEAD' });
+        return true;
+      }
+
+      try {
+        sendResponse(req, res, {
+          body: await readFile(EMBED_STYLESHEET_PATH),
+          headers: {
+            'Cache-Control': 'no-store',
+            'Content-Type': 'text/css; charset=utf-8',
+          },
+          statusCode: 200,
+        });
+      } catch (error) {
+        console.error('[http] Failed to serve Structurizr embed stylesheet:', error.message);
+        textResponse(req, res, 500, 'Internal Server Error');
+      }
+      return true;
+    }
+
+    if (!service?.isProxyPath(requestUrl.pathname)) {
+      return false;
+    }
+
+    if (req.method !== 'GET' && req.method !== 'HEAD') {
+      textResponse(req, res, 405, 'Method Not Allowed', { Allow: 'GET, HEAD' });
+      return true;
+    }
+
+    try {
+      const response = await service.proxy(requestUrl, {
+        headers: req.headers,
+        method: req.method,
+      });
+      if (!response) {
+        return false;
+      }
+
+      sendResponse(req, res, {
+        body: rewriteBasePath(response.body, response.contentType, basePath, {
+          injectEmbedStylesheet: requestUrl.pathname === '/workspace/1/diagrams',
+        }),
+        headers: {
+          'Cache-Control': requestUrl.pathname.startsWith('/static/')
+            ? 'public, max-age=31536000, immutable'
+            : 'no-store',
+          'Content-Type': response.contentType,
+        },
+        statusCode: response.statusCode,
+      });
+    } catch (error) {
+      const statusCode = getRequestErrorStatusCode(error) || Number(error?.statusCode) || 502;
+      console.error('[http] Failed to proxy Structurizr request:', error.message);
+      textResponse(req, res, statusCode, error.message || 'Structurizr renderer unavailable');
+    }
+
+    return true;
+  }
+
+  handleRequest.requiresAuthorization = (requestUrl) => (
+    Boolean(service?.isProxyPath(requestUrl.pathname))
+    && !requestUrl.pathname.startsWith('/api/')
+  );
+
+  return handleRequest;
+}

package/src/server/infrastructure/http/create-vault-api-command-handler.js

@@ -1,4 +1,5 @@
 import { basename } from 'node:path';
+import { isPdfFilePath } from '../../../domain/file-kind.js';
 import { createRequestError } from './http-errors.js';
 import { handleApiError, readRequestId } from './http-request-helpers.js';
 import {
@@ -7,10 +8,15 @@ import {
   jsonResponse,
   sendResponse,
 } from './http-response.js';
-import { parseJsonBody, readBinaryRequestBody } from './request-body.js';
+import {
+  parseJsonBody,
+  readBinaryRequestBody,
+  REQUEST_BODY_LIMIT_BYTES,
+} from './request-body.js';
 
 const DOCX_EXPORT_REQUEST_LIMIT_BYTES = 33_554_432;
 const DOCX_MIME_TYPE = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+const PDF_SIGNATURE = Buffer.from('%PDF-');
 
 function createDocxDownloadHeaders(filePath) {
   const fileName = basename(String(filePath ?? 'document')).replace(/\.[^.]+$/u, '') || 'document';
@@ -23,7 +29,7 @@ function createDocxDownloadHeaders(filePath) {
   };
 }
 
-function decodeHeaderMetadata(value) {
+function decodeHeaderMetadata(value, label = 'attachment') {
   const normalized = String(value ?? '').trim();
   if (!normalized) {
     return '';
@@ -32,7 +38,7 @@ function decodeHeaderMetadata(value) {
   try {
     return decodeURIComponent(normalized);
   } catch {
-    throw createRequestError(400, 'Invalid attachment metadata header encoding');
+    throw createRequestError(400, `Invalid ${label} metadata header encoding`);
   }
 }
 
@@ -40,7 +46,7 @@ function getDirectoryDeleteStatusCode(message = '') {
   return String(message).includes('Directory is not empty') ? 409 : 400;
 }
 
-async function handleExportDocx({ docxExporter }, req, res) {
+async function handleExportDocx({ renderDocx }, req, res) {
   try {
     const body = await parseJsonBody(req, DOCX_EXPORT_REQUEST_LIMIT_BYTES);
     if (!body?.filePath || typeof body?.html !== 'string') {
@@ -48,12 +54,12 @@ async function handleExportDocx({ docxExporter }, req, res) {
       return true;
     }
 
-    if (!docxExporter?.render) {
+    if (typeof renderDocx !== 'function') {
       jsonResponse(req, res, 503, { error: 'DOCX export is unavailable' });
       return true;
     }
 
-    const docxBuffer = await docxExporter.render({
+    const docxBuffer = await renderDocx({
       html: body.html,
       title: body.title || '',
     });
@@ -129,6 +135,55 @@ async function handleUploadAttachment({ workspaceMutationCoordinator }, req, res
   return true;
 }
 
+async function handleUploadFile({ maxPdfUploadBytes, workspaceMutationCoordinator }, req, res) {
+  try {
+    const filePath = decodeHeaderMetadata(req.headers['x-collabmd-file-path'], 'file upload');
+    if (!filePath) {
+      jsonResponse(req, res, 400, { error: 'Missing file path' });
+      return true;
+    }
+
+    if (typeof workspaceMutationCoordinator?.createFile !== 'function') {
+      jsonResponse(req, res, 503, { error: 'File upload is unavailable' });
+      return true;
+    }
+
+    const isPdfUpload = isPdfFilePath(filePath);
+    if (isPdfUpload) {
+      const contentType = String(req.headers['content-type'] || '')
+        .split(';', 1)[0]
+        .trim()
+        .toLowerCase();
+      if (contentType !== 'application/pdf') {
+        jsonResponse(req, res, 400, { error: 'PDF uploads must use application/pdf' });
+        return true;
+      }
+    }
+
+    const maxUploadBytes = isPdfUpload ? maxPdfUploadBytes : REQUEST_BODY_LIMIT_BYTES;
+    const content = await readBinaryRequestBody(req, maxUploadBytes);
+    if (isPdfUpload && !content.subarray(0, PDF_SIGNATURE.length).equals(PDF_SIGNATURE)) {
+      jsonResponse(req, res, 400, { error: 'Invalid PDF file' });
+      return true;
+    }
+
+    const result = await workspaceMutationCoordinator.createFile({
+      content,
+      path: filePath,
+      requestId: readRequestId(req),
+    });
+    if (!result.ok) {
+      jsonResponse(req, res, result.error === 'File already exists' ? 409 : 400, { error: result.error });
+      return true;
+    }
+
+    jsonResponse(req, res, 201, { ok: true, path: filePath });
+  } catch (error) {
+    handleApiError(req, res, error, '[api] Failed to upload file:', 'Failed to upload file');
+  }
+  return true;
+}
+
 async function handleCreateFile({ workspaceMutationCoordinator }, req, res) {
   try {
     const body = await parseJsonBody(req);
@@ -280,6 +335,7 @@ const ROUTE_TABLE = [
   { method: 'POST', path: '/api/export/docx', handler: handleExportDocx },
   { method: 'PUT', path: '/api/file', handler: handleWriteFile },
   { method: 'POST', path: '/api/attachments', handler: handleUploadAttachment },
+  { method: 'POST', path: '/api/file/upload', handler: handleUploadFile },
   { method: 'POST', path: '/api/file', handler: handleCreateFile },
   { method: 'DELETE', path: '/api/file', handler: handleDeleteFile },
   { method: 'PATCH', path: '/api/file', handler: handleRenameFile },
@@ -289,11 +345,17 @@ const ROUTE_TABLE = [
 ];
 
 export function createVaultApiCommandHandler({
-  docxExporter = null,
+  maxPdfUploadBytes = REQUEST_BODY_LIMIT_BYTES,
+  renderDocx = null,
   vaultFileStore,
   workspaceMutationCoordinator = null,
 }) {
-  const context = { docxExporter, vaultFileStore, workspaceMutationCoordinator };
+  const context = {
+    maxPdfUploadBytes,
+    renderDocx,
+    vaultFileStore,
+    workspaceMutationCoordinator,
+  };
 
   return async function handleVaultApiCommand(req, res, requestUrl) {
     for (const route of ROUTE_TABLE) {

package/src/server/infrastructure/http/create-vault-api-query-handler.js

@@ -3,7 +3,7 @@ import { readdir } from 'node:fs/promises';
 import { basename } from 'node:path';
 import { join } from 'node:path';
 
-import { isImageAttachmentFilePath } from '../../../domain/file-kind.js';
+import { getVaultFileKind, isImageAttachmentFilePath } from '../../../domain/file-kind.js';
 import { isIgnoredVaultEntry } from '../persistence/path-utils.js';
 import { parseJsonBody } from './request-body.js';
 import {
@@ -19,6 +19,36 @@ const SVG_ATTACHMENT_CSP = "default-src 'none'; img-src 'self' data: blob:; styl
 const DEFAULT_MAX_ARCHIVE_ENTRIES = 10_000;
 const DEFAULT_MAX_DOWNLOAD_FILE_BYTES = 268_435_456;
 
+function createSearchCancellation(req, res) {
+  const controller = new AbortController();
+
+  const abort = () => {
+    if (controller.signal.aborted || res.writableEnded || res.writableFinished) {
+      return;
+    }
+
+    controller.abort();
+  };
+  const handleRequestClose = () => {
+    if (!req.complete) {
+      abort();
+    }
+  };
+
+  req.once('aborted', abort);
+  req.once('close', handleRequestClose);
+  res.once('close', abort);
+
+  return {
+    cleanup() {
+      req.off('aborted', abort);
+      req.off('close', handleRequestClose);
+      res.off('close', abort);
+    },
+    signal: controller.signal,
+  };
+}
+
 function createAttachmentHeaders(attachment) {
   const fileName = basename(String(attachment?.path ?? 'attachment'));
   const headers = {
@@ -35,10 +65,10 @@ function createAttachmentHeaders(attachment) {
   return headers;
 }
 
-function createDownloadHeaders(fileName, contentType) {
+function createDownloadHeaders(fileName, contentType, { inline = false } = {}) {
   return {
     'Cache-Control': 'no-store',
-    'Content-Disposition': `attachment; filename="${createSafeAsciiFilename(fileName)}"; filename*=UTF-8''${encodeContentDispositionFilename(fileName)}`,
+    'Content-Disposition': `${inline ? 'inline' : 'attachment'}; filename="${createSafeAsciiFilename(fileName)}"; filename*=UTF-8''${encodeContentDispositionFilename(fileName)}`,
     'Content-Type': contentType,
     'X-Content-Type-Options': 'nosniff',
   };
@@ -304,6 +334,7 @@ async function handleFileDownload(req, res, requestUrl, { config, vaultFileStore
       headers: createDownloadHeaders(
         basename(String(download.path ?? 'download')),
         download.mimeType || 'application/octet-stream',
+        { inline: getVaultFileKind(download.path) === 'pdf' },
       ),
       statusCode: 200,
       stream: download.stream,
@@ -418,13 +449,28 @@ async function handleSearch(req, res, requestUrl, { searchService }) {
     return;
   }
 
+  const cancellation = createSearchCancellation(req, res);
+
   try {
     const result = await searchService.search({
       limit: requestUrl.searchParams.get('limit') || '',
       query: requestUrl.searchParams.get('q') || '',
+      signal: cancellation.signal,
     });
+    if (cancellation.signal.aborted || res.destroyed || res.writableEnded) {
+      return;
+    }
+
     jsonResponse(req, res, 200, result);
   } catch (error) {
+    if (
+      cancellation.signal.aborted
+      || res.destroyed
+      || res.writableEnded
+    ) {
+      return;
+    }
+
     const statusCode = Number(error?.statusCode) || 500;
     console.error('[api] Failed to search vault:', error.message);
     jsonResponse(req, res, statusCode, {
@@ -435,6 +481,8 @@ async function handleSearch(req, res, requestUrl, { searchService }) {
         backend: 'ripgrep',
       },
     });
+  } finally {
+    cancellation.cleanup();
   }
 }
 

package/src/server/infrastructure/http/http-errors.js

@@ -1,6 +1,12 @@
-export function createRequestError(statusCode, message) {
+export function createRequestError(statusCode, message, { code = null, requestCode = null } = {}) {
   const error = new Error(message);
   error.statusCode = statusCode;
+  if (code) {
+    error.code = code;
+  }
+  if (requestCode) {
+    error.requestCode = requestCode;
+  }
   return error;
 }
 

package/src/server/infrastructure/http/http-request-helpers.js

@@ -1,6 +1,28 @@
 import { getRequestErrorStatusCode } from './http-errors.js';
 import { jsonResponse } from './http-response.js';
 
+export function stripBasePath(pathname, basePath) {
+  if (!basePath) {
+    return pathname;
+  }
+
+  if (pathname === basePath) {
+    return '/';
+  }
+
+  if (pathname.startsWith(`${basePath}/`)) {
+    return pathname.slice(basePath.length) || '/';
+  }
+
+  return pathname;
+}
+
+export function createRequestUrlWithPathname(requestUrl, pathname) {
+  const nextUrl = new URL(requestUrl.toString());
+  nextUrl.pathname = pathname || '/';
+  return nextUrl;
+}
+
 export function readRequestId(req) {
   const value = String(req.headers['x-collabmd-request-id'] || '').trim();
   return value ? value.slice(0, 120) : null;

package/src/server/infrastructure/persistence/path-utils.js

@@ -3,7 +3,7 @@ import { isAbsolute, normalize, relative, resolve } from 'path';
 import { isVaultFilePath } from '../../../domain/file-kind.js';
 
 export const IGNORED_DIRECTORIES = new Set(['.git', '.obsidian', '.trash', 'node_modules', '.DS_Store']);
-export const VAULT_FILE_PATH_REQUIREMENT = '.md, .base, .excalidraw, .drawio, .mmd, .mermaid, .puml, .plantuml, .png, .jpg, .jpeg, .webp, .gif, or .svg';
+export const VAULT_FILE_PATH_REQUIREMENT = '.md, .markdown, .mdx, .base, .excalidraw, .drawio, .mmd, .mermaid, .puml, .plantuml, .dsl, .png, .jpg, .jpeg, .webp, .gif, or .svg';
 export const INVALID_VAULT_FILE_PATH_ERROR = `Invalid file path — must end in ${VAULT_FILE_PATH_REQUIREMENT}`;
 export const INVALID_DIRECTORY_PATH_ERROR = 'Invalid directory path';
 

package/src/server/infrastructure/persistence/vault-file-store.js

@@ -31,6 +31,7 @@ const EDITABLE_VAULT_CONTENT_PATH_ERRORS = {
   markdown: 'Invalid file path',
   mermaid: 'Invalid file path — must end in .mmd or .mermaid',
   plantuml: 'Invalid file path — must end in .puml or .plantuml',
+  structurizr: 'Invalid file path — must end in .dsl',
 };
 
 function getEditableVaultContentKind(filePath) {
@@ -67,7 +68,9 @@ const TEXT_FILE_MIME_TYPES = Object.freeze({
   excalidraw: 'application/json; charset=utf-8',
   markdown: 'text/markdown; charset=utf-8',
   mermaid: 'text/plain; charset=utf-8',
+  pdf: 'application/pdf',
   plantuml: 'text/plain; charset=utf-8',
+  structurizr: 'text/plain; charset=utf-8',
 });
 
 function createTransactionalPath(targetPath, label) {

package/src/server/infrastructure/structurizr/structurizr-embed.css

@@ -0,0 +1,43 @@
+html, body, #content {
+  height: 100% !important;
+  min-height: 0 !important;
+}
+
+body {
+  margin: 0 !important;
+  overflow: hidden !important;
+  background: transparent !important;
+}
+
+#diagramControls,
+#diagramNavigationPanel,
+#embeddedControls {
+  display: none !important;
+}
+
+#diagramControls + .row,
+#diagramControls + .row > .col-10,
+#diagramControls + .row #diagram,
+#diagram-viewport {
+  height: 100% !important;
+  min-height: 0 !important;
+}
+
+#diagramControls + .row > .col-10 {
+  width: 100% !important;
+}
+
+#diagram {
+  background: transparent !important;
+}
+
+#diagram-viewport {
+  overflow: auto !important;
+  touch-action: pan-x pan-y !important;
+  overscroll-behavior: contain !important;
+  background: transparent !important;
+}
+
+#diagram-canvas {
+  margin: 0 auto !important;
+}