collabmd 0.1.29 → 0.1.31

package/src/client/styles/layout/responsive.css

@@ -130,6 +130,10 @@
     width: 100%;
   }
 
+  .toolbar-overflow-menu .toolbar-search-files-btn {
+    display: inline-flex !important;
+  }
+
   .toolbar-overflow-menu .ui-toolbar-button-label {
     display: inline;
     min-width: 0;
@@ -204,6 +208,53 @@
     flex: 1;
   }
 
+  .editor-pane {
+    position: relative;
+  }
+
+  .editor-pane > .pane-header {
+    position: sticky;
+    top: 0;
+    z-index: 8;
+    gap: var(--space-2);
+    padding-inline: var(--space-2);
+  }
+
+  .editor-pane > .pane-header .pane-header-meta {
+    flex: 1 1 auto;
+    gap: var(--space-2);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .editor-pane > .pane-header .pane-label {
+    flex-shrink: 0;
+  }
+
+  .editor-pane > .pane-header .pane-label-meta {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .editor-pane > .pane-header .pane-header-actions {
+    flex-shrink: 0;
+    gap: 0;
+    min-width: 0;
+    margin-left: auto;
+  }
+
+  .editor-pane > .pane-header .ui-button--compact {
+    gap: 4px;
+    padding-inline: 6px;
+  }
+
+  .editor-pane > .pane-header .ui-action-label,
+  .editor-pane > .pane-header #wrapToggleLabel {
+    font-size: 11px;
+  }
+
   .preview-content {
     padding: var(--space-4);
   }
@@ -283,15 +334,29 @@
   }
 
   .markdown-toolbar {
+    position: sticky;
+    top: 28px;
+    z-index: 7;
     overflow-x: auto;
     flex-wrap: nowrap;
     scrollbar-width: thin;
   }
 
+  .markdown-toolbar .markdown-toolbar-group--mobile-only {
+    display: inline-flex !important;
+    margin-left: 0;
+    padding-left: 0;
+    border-left: none;
+  }
+
   .markdown-toolbar-popover {
     max-width: min(240px, calc(100vw - 24px));
   }
 
+  .pane-header-actions .mobile-editor-find-btn {
+    display: inline-flex !important;
+  }
+
   .outline-panel {
     position: absolute;
     inset: 0;
@@ -403,6 +468,30 @@
   }
 }
 
+@media (max-width: 480px) {
+  .editor-pane > .pane-header {
+    gap: var(--space-1);
+    padding-inline: var(--space-1);
+  }
+
+  .editor-pane > .pane-header .pane-header-meta {
+    gap: var(--space-1);
+  }
+
+  .editor-pane > .pane-header .pane-label-meta {
+    font-size: 11px;
+  }
+
+  .editor-pane > .pane-header .ui-button--compact {
+    padding-inline: 4px;
+  }
+
+  .editor-pane > .pane-header .ui-action-label,
+  .editor-pane > .pane-header #wrapToggleLabel {
+    font-size: 10px;
+  }
+}
+
 @media (min-width: 769px) {
   .mobile-view-toggle {
     display: none !important;

package/src/client/styles/layout/shell.css

@@ -1,8 +1,14 @@
 /* ===== APP SHELL ===== */
 
 .app-shell {
+  position: fixed;
+  top: var(--app-viewport-offset-top, 0px);
+  right: 0;
+  left: 0;
   display: flex;
+  width: 100%;
   height: 100dvh;
+  height: var(--app-viewport-height, 100dvh);
   overflow: hidden;
 }
 
@@ -214,6 +220,12 @@
   padding: var(--space-4);
 }
 
+.preview-content.is-base-file-preview {
+  width: 100%;
+  min-height: 100%;
+  max-width: none;
+}
+
 .preview-content.is-plantuml-file-preview,
 .preview-content.is-mermaid-file-preview {
   width: 100%;
@@ -240,7 +252,8 @@
 
 .preview-content.is-drawio-file-preview [data-preview-render-host='true'],
 .preview-content.is-excalidraw-file-preview [data-preview-render-host='true'],
-.preview-content.is-image-file-preview [data-preview-render-host='true'] {
+.preview-content.is-image-file-preview [data-preview-render-host='true'],
+.preview-content.is-base-file-preview [data-preview-render-host='true'] {
   display: flex;
   flex: 1;
   width: 100%;

package/src/client/styles/layout/view-modes.css

@@ -16,6 +16,9 @@
 
 .editor-layout[data-view="preview"] .preview-body {
   --preview-content-max-width: 1080px;
+  --backlinks-dock-left: var(--space-6);
+  --backlinks-dock-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
+  --backlinks-dock-width: min(320px, calc(100% - var(--space-12)));
 }
 
 .editor-layout[data-view="preview"] .preview-content {
@@ -24,6 +27,7 @@
 
 .editor-layout[data-view="preview"] .preview-content.is-excalidraw-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-drawio-file-preview,
+.editor-layout[data-view="preview"] .preview-content.is-base-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-image-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-mermaid-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-plantuml-file-preview {
@@ -35,6 +39,7 @@
 }
 
 .editor-layout[data-view="preview"] .preview-content p:has(> .excalidraw-embed-placeholder:only-child),
+.editor-layout[data-view="preview"] .preview-content p:has(> .bases-embed-placeholder:only-child),
 .editor-layout[data-view="preview"] .preview-content p:has(> .video-embed-placeholder:only-child),
 .editor-layout[data-view="preview"] .preview-content p:has(> .mermaid-shell:only-child),
 .editor-layout[data-view="preview"] .preview-content p:has(> .plantuml-shell:only-child) {

package/src/client/styles/overrides/codemirror.css

@@ -51,3 +51,77 @@
   content: '📄';
   font-size: var(--text-ui-sm);
 }
+
+.cm-panels-top {
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.cm-panel.cm-search {
+  gap: var(--space-2);
+  align-items: center;
+  padding: var(--space-2);
+  background: oklch(from var(--color-surface) l c h / 0.98);
+  color: var(--color-text);
+  box-shadow: inset 0 -1px 0 var(--color-divider);
+  font-family: var(--font-body);
+}
+
+.cm-panel.cm-search label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.cm-panel.cm-search .cm-textfield {
+  min-height: 32px;
+  padding: 0 var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+}
+
+.cm-panel.cm-search .cm-button {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-family: var(--font-body);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.cm-panel.cm-search .cm-button:hover:not(:disabled),
+.cm-panel.cm-search .cm-button:focus-visible {
+  background: var(--color-surface-dynamic);
+  outline: none;
+}
+
+@media (max-width: 768px) {
+  .cm-panel.cm-search {
+    flex-wrap: wrap;
+    align-items: stretch;
+  }
+
+  .cm-panel.cm-search label {
+    flex: 1 1 100%;
+  }
+
+  .cm-panel.cm-search .cm-textfield {
+    width: 100%;
+    min-height: 40px;
+    font-size: 16px;
+  }
+
+  .cm-panel.cm-search .cm-button {
+    min-height: 40px;
+    padding: 0 12px;
+  }
+}

package/src/domain/file-kind.js

@@ -1,4 +1,5 @@
 const MARKDOWN_FILE_EXTENSIONS = Object.freeze(['.md', '.markdown', '.mdx']);
+const BASE_FILE_EXTENSION = '.base';
 const EXCALIDRAW_FILE_EXTENSION = '.excalidraw';
 const DRAWIO_FILE_EXTENSION = '.drawio';
 const MERMAID_FILE_EXTENSIONS = Object.freeze(['.mmd', '.mermaid']);
@@ -12,10 +13,11 @@ const DIAGRAM_FILE_EXTENSIONS = Object.freeze([
 ]);
 const VAULT_FILE_EXTENSIONS = Object.freeze([
   ...MARKDOWN_FILE_EXTENSIONS,
+  BASE_FILE_EXTENSION,
   ...DIAGRAM_FILE_EXTENSIONS,
   ...IMAGE_ATTACHMENT_EXTENSIONS,
 ]);
-const STRIP_VAULT_EXTENSION_PATTERN = /\.(?:md|markdown|mdx|excalidraw|drawio|mmd|mermaid|puml|plantuml|png|jpe?g|webp|gif|svg)$/i;
+const STRIP_VAULT_EXTENSION_PATTERN = /\.(?:md|markdown|mdx|base|excalidraw|drawio|mmd|mermaid|puml|plantuml|png|jpe?g|webp|gif|svg)$/i;
 
 function normalizeFilePath(filePath) {
   return String(filePath ?? '').trim().toLowerCase();
@@ -27,6 +29,7 @@ function hasFileExtension(filePath, extensions) {
 }
 
 export {
+  BASE_FILE_EXTENSION,
   DIAGRAM_FILE_EXTENSIONS,
   DRAWIO_FILE_EXTENSION,
   EXCALIDRAW_FILE_EXTENSION,
@@ -42,6 +45,10 @@ export function getVaultFileKind(filePath) {
     return 'markdown';
   }
 
+  if (hasFileExtension(filePath, [BASE_FILE_EXTENSION])) {
+    return 'base';
+  }
+
   if (hasFileExtension(filePath, [EXCALIDRAW_FILE_EXTENSION])) {
     return 'excalidraw';
   }
@@ -75,6 +82,10 @@ export function getVaultTreeNodeType(filePath) {
     return 'image';
   }
 
+  if (kind === 'base') {
+    return 'base';
+  }
+
   return kind === 'markdown' ? 'file' : kind;
 }
 
@@ -91,6 +102,10 @@ export function isExcalidrawFilePath(filePath) {
   return getVaultFileKind(filePath) === 'excalidraw';
 }
 
+export function isBaseFilePath(filePath) {
+  return getVaultFileKind(filePath) === 'base';
+}
+
 export function isMermaidFilePath(filePath) {
   return getVaultFileKind(filePath) === 'mermaid';
 }
@@ -122,7 +137,7 @@ export function supportsCommentsForFilePath(filePath) {
 }
 
 export function supportsBacklinksForFilePath(filePath) {
-  return isMarkdownFilePath(filePath);
+  return isVaultFilePath(filePath);
 }
 
 export function stripVaultFileExtension(name) {

package/src/domain/wiki-link-resolver.js

@@ -1,15 +1,16 @@
+import { getVaultFileExtension, isMarkdownFilePath } from './file-kind.js';
+
 function normalizeWikiTarget(target) {
   const trimmed = String(target ?? '').trim();
   if (!trimmed) {
     return null;
   }
 
-  return trimmed.endsWith('.md') ? trimmed : `${trimmed}.md`;
+  return trimmed;
 }
 
 export function createWikiTargetIndex(files = []) {
   const exactPaths = new Set();
-  const pathWithoutMd = new Map();
   const suffixMatch = new Map();
 
   for (const filePath of files) {
@@ -19,11 +20,6 @@ export function createWikiTargetIndex(files = []) {
 
     exactPaths.add(filePath);
 
-    const rawPath = filePath.replace(/\.md$/i, '');
-    if (!pathWithoutMd.has(rawPath)) {
-      pathWithoutMd.set(rawPath, filePath);
-    }
-
     const segments = filePath.split('/');
     for (let index = 0; index < segments.length; index += 1) {
       const suffix = segments.slice(index).join('/');
@@ -35,52 +31,74 @@ export function createWikiTargetIndex(files = []) {
 
   return {
     exactPaths,
-    pathWithoutMd,
     suffixMatch,
   };
 }
 
 export function resolveWikiTargetWithIndex(target, index) {
-  const normalizedTarget = normalizeWikiTarget(target);
-  if (!normalizedTarget || !index) {
+  const rawTarget = normalizeWikiTarget(target);
+  if (!rawTarget || !index) {
     return null;
   }
 
-  if (index.exactPaths?.has(normalizedTarget)) {
-    return normalizedTarget;
+  if (index.exactPaths?.has(rawTarget)) {
+    return rawTarget;
   }
 
-  const suffixMatch = index.suffixMatch?.get(normalizedTarget);
+  const suffixMatch = index.suffixMatch?.get(rawTarget);
   if (suffixMatch) {
     return suffixMatch;
   }
 
-  const rawTarget = String(target ?? '').trim();
-  return index.pathWithoutMd?.get(rawTarget) ?? null;
+  if (getVaultFileExtension(rawTarget)) {
+    return null;
+  }
+
+  const markdownTarget = `${rawTarget}.md`;
+  if (index.exactPaths?.has(markdownTarget)) {
+    return markdownTarget;
+  }
+
+  return index.suffixMatch?.get(markdownTarget) ?? null;
 }
 
 export function resolveWikiTargetPath(target, files) {
-  const normalizedTarget = normalizeWikiTarget(target);
-  if (!normalizedTarget || !Array.isArray(files) || files.length === 0) {
+  const rawTarget = normalizeWikiTarget(target);
+  if (!rawTarget || !Array.isArray(files) || files.length === 0) {
     return null;
   }
 
-  const rawTarget = String(target ?? '').trim();
   let fallbackSuffixMatch = null;
 
   for (const filePath of files) {
-    if (filePath === normalizedTarget) {
+    if (filePath === rawTarget) {
       return filePath;
     }
 
-    if (filePath.replace(/\.md$/i, '') === rawTarget) {
+    if (!fallbackSuffixMatch && filePath.endsWith(`/${rawTarget}`)) {
+      fallbackSuffixMatch = filePath;
+    }
+  }
+
+  if (fallbackSuffixMatch || getVaultFileExtension(rawTarget)) {
+    return fallbackSuffixMatch;
+  }
+
+  const markdownTarget = `${rawTarget}.md`;
+  let markdownSuffixMatch = null;
+  for (const filePath of files) {
+    if (!isMarkdownFilePath(filePath)) {
+      continue;
+    }
+
+    if (filePath === markdownTarget) {
       return filePath;
     }
 
-    if (!fallbackSuffixMatch && filePath.endsWith(`/${normalizedTarget}`)) {
-      fallbackSuffixMatch = filePath;
+    if (!markdownSuffixMatch && filePath.endsWith(`/${markdownTarget}`)) {
+      markdownSuffixMatch = filePath;
     }
   }
 
-  return fallbackSuffixMatch;
+  return markdownSuffixMatch;
 }

package/src/domain/yaml-frontmatter.js

@@ -0,0 +1,59 @@
+import yaml from 'js-yaml';
+
+function getDocumentNewline(markdownText = '') {
+  return String(markdownText).includes('\r\n') ? '\r\n' : '\n';
+}
+
+function normalizeLine(line = '') {
+  return String(line).replace(/\r$/, '');
+}
+
+export function extractYamlFrontmatter(markdownText = '') {
+  const normalizedMarkdown = String(markdownText ?? '');
+  if (!normalizedMarkdown.startsWith('---')) {
+    return null;
+  }
+
+  const newline = getDocumentNewline(normalizedMarkdown);
+  const lines = normalizedMarkdown.split(/\r?\n/);
+  if (normalizeLine(lines[0]) !== '---') {
+    return null;
+  }
+
+  let closingIndex = -1;
+  for (let index = 1; index < lines.length; index += 1) {
+    if (normalizeLine(lines[index]) === '---') {
+      closingIndex = index;
+      break;
+    }
+  }
+
+  if (closingIndex < 0) {
+    return null;
+  }
+
+  const rawFrontmatter = lines.slice(0, closingIndex + 1).join(newline);
+  const frontmatterSource = lines.slice(1, closingIndex).join(newline);
+
+  let parsedData;
+  try {
+    parsedData = yaml.load(frontmatterSource || '{}');
+  } catch {
+    return null;
+  }
+
+  const lineCount = closingIndex + 1;
+  const bodyMarkdown = [
+    ...Array.from({ length: lineCount }, () => ''),
+    ...lines.slice(closingIndex + 1),
+  ].join(newline);
+
+  return {
+    bodyMarkdown,
+    data: parsedData ?? {},
+    endLine: lineCount,
+    rawFrontmatter,
+    startLine: 1,
+  };
+}
+

package/src/server/auth/create-auth-service.js

@@ -168,8 +168,7 @@ function readAuthenticatedOidcSession(sessionCookieManager, req) {
     return null;
   }
 
-  const expiresAt = Number(session.expiresAt);
-  if (Number.isFinite(expiresAt) && expiresAt <= Date.now()) {
+  if (hasExpiredSession(session)) {
     return null;
   }
 
@@ -185,6 +184,29 @@ function readAuthenticatedOidcSession(sessionCookieManager, req) {
   };
 }
 
+function hasExpiredSession(session) {
+  const expiresAt = Number(session?.expiresAt);
+  return Number.isFinite(expiresAt) && expiresAt <= Date.now();
+}
+
+function resolveSessionExpiresAt(sessionMaxAgeMs, fallbackExpiresAt = null) {
+  if (Number.isFinite(sessionMaxAgeMs) && sessionMaxAgeMs > 0) {
+    return Date.now() + sessionMaxAgeMs;
+  }
+
+  return Number.isFinite(fallbackExpiresAt) ? fallbackExpiresAt : null;
+}
+
+function createSessionCookieOptions(expiresAt) {
+  if (!Number.isFinite(expiresAt)) {
+    return {};
+  }
+
+  return {
+    expires: new Date(expiresAt),
+  };
+}
+
 function buildClientConfig(authConfig, { basePath = '' } = {}) {
   const loginEndpoint = prependBasePath(basePath, '/api/auth/oidc/login');
   const sessionEndpoint = prependBasePath(basePath, '/api/auth/session');
@@ -232,7 +254,7 @@ function createPasswordStrategy(authConfig, sessionCookieManager, clientConfig)
 
   function hasValidSession(req) {
     const session = sessionCookieManager.readSession(req);
-    return session?.strategy === AUTH_STRATEGY_PASSWORD;
+    return session?.strategy === AUTH_STRATEGY_PASSWORD && !hasExpiredSession(session);
   }
 
   return {
@@ -260,6 +282,8 @@ function createPasswordStrategy(authConfig, sessionCookieManager, clientConfig)
         }, { kind: 'invalid_credentials' });
       }
 
+      const expiresAt = resolveSessionExpiresAt(authConfig.sessionMaxAgeMs);
+
       return createResponse(200, {
         auth: clientConfig,
         authenticated: true,
@@ -269,8 +293,9 @@ function createPasswordStrategy(authConfig, sessionCookieManager, clientConfig)
         kind: 'session_created',
         setCookie: sessionCookieManager.createSessionCookie(req, {
           authenticatedAt: Date.now(),
+          ...(Number.isFinite(expiresAt) ? { expiresAt } : {}),
           strategy: AUTH_STRATEGY_PASSWORD,
-        }),
+        }, createSessionCookieOptions(expiresAt)),
       });
     },
 
@@ -456,9 +481,10 @@ function createOidcStrategy(authConfig, sessionCookieManager, flowCookieManager,
           return createErrorRedirect(req, accessDecision.error, flowPayload);
         }
 
-        const expiresAt = Number.isFinite(claims.exp)
+        const tokenExpiresAt = Number.isFinite(claims.exp)
           ? claims.exp * 1000
           : Date.now() + (Math.max(Number(tokens.expires_in) || 3600, 1) * 1000);
+        const expiresAt = resolveSessionExpiresAt(authConfig.sessionMaxAgeMs, tokenExpiresAt);
         const returnTo = sanitizeReturnTo(flowPayload.returnTo, {
           basePath,
           publicBaseUrl: authConfig.oidc.publicBaseUrl,
@@ -480,7 +506,7 @@ function createOidcStrategy(authConfig, sessionCookieManager, flowCookieManager,
               expiresAt,
               strategy: AUTH_STRATEGY_OIDC,
               user,
-            }),
+            }, createSessionCookieOptions(expiresAt)),
             flowCookieManager.clear(req),
           ],
         });

package/src/server/config/env.js

@@ -10,12 +10,34 @@ import {
   createRandomSessionSecret,
 } from '../auth/create-auth-service.js';
 import { loadBuildInfo } from './build-info.js';
+import { isPerfLoggingEnabled } from './perf-logging.js';
 
 function parsePositiveInt(rawValue, fallbackValue) {
   const parsed = Number.parseInt(rawValue ?? '', 10);
   return Number.isInteger(parsed) && parsed > 0 ? parsed : fallbackValue;
 }
 
+function parseOptionalPositiveInt(rawValue, {
+  fallbackValue = null,
+  variableName = 'value',
+} = {}) {
+  const normalized = String(rawValue ?? '').trim();
+  if (!normalized) {
+    return fallbackValue;
+  }
+
+  if (!/^[1-9]\d*$/u.test(normalized)) {
+    throw new Error(`${variableName} must be a positive integer.`);
+  }
+
+  const parsed = Number(normalized);
+  if (Number.isSafeInteger(parsed) && parsed > 0) {
+    return parsed;
+  }
+
+  throw new Error(`${variableName} must be a positive integer.`);
+}
+
 function parsePort(rawPort, fallbackPort) {
   return parsePositiveInt(rawPort, fallbackPort);
 }
@@ -284,6 +306,10 @@ export function loadConfig(overrides = {}) {
       password,
       passwordWasGenerated,
       sessionCookieName: authOverrides.sessionCookieName || process.env.AUTH_SESSION_COOKIE_NAME || 'collabmd_auth',
+      sessionMaxAgeMs: parseOptionalPositiveInt(
+        authOverrides.sessionMaxAgeMs ?? process.env.AUTH_SESSION_MAX_AGE_MS,
+        { variableName: 'AUTH_SESSION_MAX_AGE_MS' },
+      ),
       sessionSecret: authOverrides.sessionSecret || process.env.AUTH_SESSION_SECRET || createRandomSessionSecret(),
       strategy: authStrategy,
     },
@@ -296,6 +322,7 @@ export function loadConfig(overrides = {}) {
     httpRequestTimeoutMs: parsePositiveInt(process.env.HTTP_REQUEST_TIMEOUT_MS, 30_000),
     git,
     gitEnabled: git.enabled,
+    perfLoggingEnabled: overrides.perfLoggingEnabled ?? isPerfLoggingEnabled(process.env.COLLABMD_PERF_LOGGING),
     port: parsePort(process.env.PORT, 1234),
     nodeEnv,
     plantumlServerUrl: process.env.PLANTUML_SERVER_URL || 'https://www.plantuml.com/plantuml',

package/src/server/config/perf-logging.js

@@ -0,0 +1,39 @@
+function formatPerfValue(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return Number.isInteger(value) ? String(value) : value.toFixed(3).replace(/\.?0+$/u, '');
+  }
+
+  if (typeof value === 'string') {
+    return /[\s=]/u.test(value) ? JSON.stringify(value) : value;
+  }
+
+  if (typeof value === 'boolean') {
+    return value ? 'true' : 'false';
+  }
+
+  return JSON.stringify(value);
+}
+
+export function isPerfLoggingEnabled(value = '') {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  const normalized = String(value ?? '').trim().toLowerCase();
+  return normalized === '1'
+    || normalized === 'true'
+    || normalized === 'yes'
+    || normalized === 'on';
+}
+
+export function logPerfEvent(enabled, scope, fields = {}) {
+  if (!enabled) {
+    return;
+  }
+
+  const formattedFields = Object.entries(fields)
+    .filter(([, value]) => value !== undefined && value !== null && value !== '')
+    .map(([key, value]) => `${key}=${formatPerfValue(value)}`);
+  const suffix = formattedFields.length > 0 ? ` ${formattedFields.join(' ')}` : '';
+  console.info(`[perf][${scope}]${suffix}`);
+}