collabmd 0.1.27 → 0.1.30

package/src/client/export/export-print-layout.js

@@ -0,0 +1,50 @@
+const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6';
+const KEEP_WITH_NEXT_BLOCK_SELECTOR = [
+  'figure',
+  'pre',
+  'blockquote',
+  'table',
+].join(', ');
+
+function isKeepWithNextBlock(element) {
+  return Boolean(element?.matches?.(KEEP_WITH_NEXT_BLOCK_SELECTOR));
+}
+
+export function groupHeadingWithFollowingBlock(container) {
+  if (!container) {
+    return;
+  }
+
+  const headings = Array.from(container.querySelectorAll(HEADING_SELECTOR));
+  headings.forEach((heading) => {
+    if (heading.parentElement?.classList.contains('export-keep-with-next')) {
+      return;
+    }
+
+    const next = heading.nextElementSibling;
+    if (!next || next.classList.contains('export-keep-with-next')) {
+      return;
+    }
+
+    const nodes = [heading];
+    let block = next;
+
+    if (block.tagName === 'P') {
+      const followingBlock = block.nextElementSibling;
+      if (!followingBlock || !isKeepWithNextBlock(followingBlock)) {
+        return;
+      }
+      nodes.push(block);
+      block = followingBlock;
+    } else if (!isKeepWithNextBlock(block)) {
+      return;
+    }
+
+    nodes.push(block);
+
+    const wrapper = document.createElement('section');
+    wrapper.className = 'export-keep-with-next';
+    heading.before(wrapper);
+    nodes.forEach((node) => wrapper.appendChild(node));
+  });
+}

package/src/client/infrastructure/auth-client.js

@@ -1,3 +1,5 @@
+import '../styles/features/auth-gate.css';
+
 import { getRuntimeConfig } from './runtime-config.js';
 
 const DEFAULT_AUTH_CONFIG = {
@@ -15,207 +17,6 @@ const DEFAULT_AUTH_CONFIG = {
 
 const GOOGLE_G_LOGO_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAGsklEQVR4Ae3cA3jsShgG4Gvbtu1js7aObdu2bdbudmvbtu1VtUg2ydw7x95mstnt5rZ5voflG80/fzL72L89bOsF94J7wWgb2dSgiAzpPHmwbfPK1qWzxDNsRdb6Ar2BgtF9hSbDRbYG4mk2beuXwm+Q89yV+TmAILgHptrb5DyPtg3LhBZjBCP+RovewNZlc2TOl8nGel0HA4LA4qPhkRSM6XcHoEYk86fIfT2AQqFzYIBjMncHofkoZBWNCM1GSq+cpdpadQIMKEoRzIeXIroEkW08TObpDAiiO8F4Tga85TBnoEc8xVKZm9UNYECS0stnBCP/Ud+AnJH/SC+eAiShPTDZ3CRZPIN9CUokC6ZSYqE2wHhmKhw/2TegR2RnSFSUaRaMJccLxg7QsAQhktkTAACaAmOxkbA80h2taKIZKWzR1BFWRAQLRvXhphYdDEtcWDxxU4sOhjdDkdVYbmrRwYAgJIums3RTNWrftbHz/AmZh5MiLBAGVqOdZ4+1790inmrFvpYZuPPEATWdknmT5f7eZEN9V2N7o9zPu3XNInQte2BlcYE6tVTbltXw4kf9h5QlhW3rliBr1QcDAODsjPFlhmelqfNvKQty4S9B0KoPVgTxmWk7Tx0COMZCF6GzA3ZC0LWMwJSsTWiOXj+O6iP382KzowAAvMOhaxmAqw/Ijr4tGPsHgnbsACwxlpNNPABIIv5LIvxpzOVlkdXPNMGK8CCudi2pFi+ovRFlwLOtc7/uUgvnxhxu05LpIyD17nTu+EAw8q9HaVtXzgcAcBUMcAER/sx9YBj5pdeExr897NLtT9TVcLgRTzVcgbyHBuc9L5n8PdLJzAEwmWP1KDCMMvTp9jWf3tbC1gdQKDgMBhRBRL0GYaojO35zxOo8fZjbz5ZAZz700Anm9pLI9g+yoY7bYKrJBWJoRpk8SJ0/fDoc13QuRuNdgMmydfTBZPkGdcDDd0q1EDkOVIKzTOiDKVGY7oPLmylVYCKlL30wIKW6D44tJlSCE76nC45+CwHXfWDfdKVKcMwHdMEJ33MC7JqEqwRHvEgXnDaYE+ArMayBB3ECDAennnVKn4tUDU74gS446k1OgB3i8Z41LHmkKHtW4eGfpRpctv5/VlomlxOsTR6kKQN1H1wnptiZHpYFv27pMbqus4kxOChbySzTz8loakfukhIkYKEBEBzw6SBXk79cLQ5lXv5XuxtJAaMDdA/v+JMydVs8irBnDvB+g9QbGeY1SUFg2gTn1JD0z+cdPIVaTbym0JemeQ6FzrtzJtdFm+DT4Rh9MD9DybxNmxL03mg3g/u0MP3cbWo6GrWjbZMBg/0Id6wqAcWwEX+F/10fVzPIe2jmRW3VTiP+VBjC4bU6KgMAID9qaQt9frl3P6hSndOaP7HrxdSYPQiH92QYhvAwTRH7KdSWBL9h5j4GeugkqDpWc1oZBqaelSGNwMWNJMLjUkHxBn//zwZeH3topr+7bWxDmia0AID17gok7aTTMrTnw1KsfZTPVMhAyj9uVl5lIexqcQLs4KFpYXjpSjQw3HwrIqCBQQ5mXsZInBWtoIOac1GOqrU4IsUJwOSllsmha5iZTf3npzXnqXka+1dFmzo4D9vZgQp2TsAZvrZUIC7729WSmRlmVfz+HGExKpUCVGJj1oSQlTd+SZ9Lm4bubqKvtTkmk+OAIRhu+zMu3jEwyqTQ1d7lofWdzV0VyWSxpPJkjpOB76z7fsPfjjOHHMhBb0QzAhMUMS18nRrgOzHkz96YdPR4toNTMT+gKjq4OtatNPBCvgfcp9PD1w/wsFP14y7WA4/zu9SudVWw8HKpUC4Zw5uOLmQ//c4fGrZL8iit+WEpvMmxAIZbtrCor7uNLpj/ubpk6N6Kh059M6tINl8Qh4UUHGa73wzjNGHQ4dj7wC6JOPtLACLqkvq4WeuE2cWi/+nLt0csOKnQ1CKP+IYMWELqgPnGiLVh6O7Go8GYZpfxpDbnwkaHjpj3JfLRV7Wgb01SARxIupc6wntyfGOG9pbikRQJmzvodRg7mRq2tkkm7IbFlhktBdaBS7SsPZx1haDIbltOSwGKXxl5px7UZGaEb8gXlerEgmmMxB2KfEciTKHRAsvbmPo0nVsST1BEdH3Kyrh9bJVlQ7wmbk05USSu0PUPPWjDOtxLg5bF7h7tM42B08x//o7U0/AmrCSV3PtYiwZpS3B13MHMS/DIz4rYaBO0VM93JpwbwaJtqNfEsbwZFgEL50VtgcJLBV6wK9aKtfd+cEkvuBfcC37k9h8VGR+csPdltgAAAABJRU5ErkJggg==';
 
-let authGateStylesInjected = false;
-
-function ensureAuthGateStyles() {
-  if (authGateStylesInjected || !document.head) {
-    return;
-  }
-
-  const style = document.createElement('style');
-  style.textContent = `
-    .auth-gate-overlay {
-      position: fixed;
-      inset: 0;
-      z-index: 5000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 24px;
-      background:
-        radial-gradient(circle at 50% 8%, rgba(37, 99, 235, 0.18), transparent 28%),
-        radial-gradient(circle at 60% 45%, rgba(14, 165, 233, 0.08), transparent 18%),
-        linear-gradient(180deg, rgba(8, 12, 24, 0.9), rgba(6, 10, 22, 0.96));
-      backdrop-filter: blur(18px);
-    }
-
-    .auth-gate-card {
-      width: min(100%, 440px);
-      padding: 32px;
-      border-radius: 24px;
-      border: 1px solid rgba(148, 163, 184, 0.2);
-      background:
-        linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(12, 18, 32, 0.96));
-      color: #e2e8f0;
-      box-shadow:
-        0 28px 90px rgba(15, 23, 42, 0.42),
-        inset 0 1px 0 rgba(255, 255, 255, 0.04);
-      font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    }
-
-    .auth-gate-card h1 {
-      margin: 0 0 10px;
-      font-size: 2rem;
-      line-height: 1.05;
-      letter-spacing: -0.04em;
-    }
-
-    .auth-gate-card p {
-      margin: 0 0 22px;
-      color: #cbd5e1;
-      line-height: 1.5;
-      font-size: 1rem;
-    }
-
-    .auth-gate-form {
-      display: grid;
-      gap: 14px;
-    }
-
-    .auth-gate-label {
-      display: grid;
-      gap: 10px;
-      font-size: 0.92rem;
-      font-weight: 500;
-      color: #cbd5e1;
-    }
-
-    .auth-gate-input {
-      width: 100%;
-      padding: 14px 16px;
-      border: 1px solid rgba(148, 163, 184, 0.28);
-      border-radius: 16px;
-      background: rgba(15, 23, 42, 0.72);
-      color: inherit;
-      font: inherit;
-      box-sizing: border-box;
-    }
-
-    .auth-gate-input:focus {
-      outline: none;
-      border-color: rgba(56, 189, 248, 0.72);
-      box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
-    }
-
-    .auth-gate-actions {
-      display: grid;
-      gap: 12px;
-    }
-
-    .auth-gate-button,
-    .auth-gate-secondary-button {
-      border: 0;
-      border-radius: 16px;
-      font: inherit;
-      cursor: pointer;
-      transition:
-        transform 160ms ease,
-        box-shadow 160ms ease,
-        border-color 160ms ease,
-        background-color 160ms ease;
-    }
-
-    .auth-gate-button:hover,
-    .auth-gate-secondary-button:hover {
-      transform: translateY(-1px);
-    }
-
-    .auth-gate-button:focus-visible,
-    .auth-gate-secondary-button:focus-visible {
-      outline: 3px solid rgba(125, 211, 252, 0.3);
-      outline-offset: 2px;
-    }
-
-    .auth-gate-button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 14px;
-      width: 100%;
-      padding: 14px 18px;
-      background: linear-gradient(135deg, #0f766e, #0284c7);
-      color: #f8fafc;
-      font-weight: 600;
-      box-shadow: 0 16px 40px rgba(2, 132, 199, 0.24);
-    }
-
-    .auth-gate-button:hover {
-      box-shadow: 0 18px 44px rgba(2, 132, 199, 0.28);
-    }
-
-    .auth-gate-secondary-button {
-      padding: 13px 16px;
-      background: rgba(15, 23, 42, 0.48);
-      color: #cbd5e1;
-      border: 1px solid rgba(148, 163, 184, 0.22);
-    }
-
-    .auth-gate-button[disabled],
-    .auth-gate-secondary-button[disabled] {
-      opacity: 0.7;
-      cursor: wait;
-      transform: none;
-    }
-
-    .auth-gate-button--google {
-      background: rgba(255, 255, 255, 0.98);
-      color: #111827;
-      border: 1px solid rgba(148, 163, 184, 0.22);
-      box-shadow:
-        0 22px 40px rgba(15, 23, 42, 0.2),
-        inset 0 1px 0 rgba(255, 255, 255, 0.65);
-    }
-
-    .auth-gate-button--google:hover {
-      background: #ffffff;
-      box-shadow:
-        0 24px 44px rgba(15, 23, 42, 0.24),
-        inset 0 1px 0 rgba(255, 255, 255, 0.8);
-    }
-
-    .auth-gate-button__icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      flex: 0 0 auto;
-      width: 22px;
-      height: 22px;
-    }
-
-    .auth-gate-button__icon img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-
-    .auth-gate-error {
-      min-height: 1.25rem;
-      color: #fca5a5;
-      font-size: 0.92rem;
-      margin-bottom: 4px;
-    }
-
-    @media (max-width: 640px) {
-      .auth-gate-overlay {
-        padding: 16px;
-      }
-
-      .auth-gate-card {
-        padding: 24px;
-        border-radius: 20px;
-      }
-
-      .auth-gate-card h1 {
-        font-size: 1.7rem;
-      }
-    }
-  `;
-
-  document.head.append(style);
-  authGateStylesInjected = true;
-}
-
 function getClientAuthConfig() {
   return {
     ...DEFAULT_AUTH_CONFIG,
@@ -315,8 +116,6 @@ async function submitPassword(config, password) {
 }
 
 function createOverlayShell() {
-  ensureAuthGateStyles();
-
   const overlay = document.createElement('div');
   overlay.className = 'auth-gate-overlay';
 

package/src/client/infrastructure/editor-session.js

@@ -258,6 +258,10 @@ export class EditorSession {
     this.viewAdapter.requestMeasure();
   }
 
+  runEditorCommand(commandId) {
+    return this.viewAdapter.runEditorCommand(commandId);
+  }
+
   applyMarkdownToolbarAction(action) {
     return this.viewAdapter.applyMarkdownToolbarAction(action);
   }
@@ -266,6 +270,14 @@ export class EditorSession {
     return this.viewAdapter.insertText(text);
   }
 
+  toggleTaskListItem(lineNumber) {
+    if (!this.collaborationClient.initialSyncComplete) {
+      return false;
+    }
+
+    return this.viewAdapter.toggleTaskListItem(lineNumber);
+  }
+
   flashExternalUpdate(range) {
     return this.viewAdapter.flashRemoteRange(range);
   }

package/src/client/infrastructure/editor-view-adapter.js

@@ -1,5 +1,14 @@
 import { autocompletion, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentLess,
+  indentMore,
+  indentWithTab,
+  redo,
+  undo,
+} from '@codemirror/commands';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import {
   bracketMatching,
@@ -10,7 +19,7 @@ import {
   syntaxHighlighting,
 } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import { highlightSelectionMatches, openSearchPanel, searchKeymap } from '@codemirror/search';
 import { Compartment, EditorSelection, EditorState, Prec, StateEffect, StateField } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
@@ -41,6 +50,14 @@ const remoteUpdateMark = Decoration.mark({ class: 'cm-remoteUpdateFlash' });
 const REMOTE_UPDATE_FLASH_DURATION_MS = 1350;
 const REMOTE_UPDATE_CARET_MAX_LENGTH = 160;
 const RECENT_LOCAL_INPUT_WINDOW_MS = 900;
+const TASK_LIST_MARKER_PATTERN = /^(\s*(?:>\s*)*(?:[-+*]|\d+[.)])\s+\[)( |x|X)(\])(\s.*)?$/;
+const EDITOR_COMMANDS = Object.freeze({
+  indentLess,
+  indentMore,
+  openSearch: openSearchPanel,
+  redo,
+  undo,
+});
 
 class RemoteUpdateCaretWidget extends WidgetType {
   toDOM() {
@@ -556,6 +573,24 @@ export class EditorViewAdapter {
     this.editorView?.requestMeasure();
   }
 
+  runEditorCommand(commandId) {
+    if (!this.editorView) {
+      return false;
+    }
+
+    const command = EDITOR_COMMANDS[String(commandId ?? '')];
+    if (typeof command !== 'function') {
+      return false;
+    }
+
+    const applied = command(this.editorView);
+    if (applied && commandId !== 'openSearch') {
+      this.editorView.focus();
+    }
+
+    return applied;
+  }
+
   flashRemoteRange({ from = 0, to = 0 } = {}, durationMs = REMOTE_UPDATE_FLASH_DURATION_MS) {
     const state = this.editorView?.state;
     if (!state || state.doc.length === 0) {
@@ -896,6 +931,39 @@ export class EditorViewAdapter {
     return true;
   }
 
+  toggleTaskListItem(lineNumber) {
+    const state = this.editorView?.state;
+    if (!this.editorView || !state) {
+      return false;
+    }
+
+    const targetLineNumber = Number.parseInt(String(lineNumber ?? ''), 10);
+    if (!Number.isFinite(targetLineNumber)) {
+      return false;
+    }
+
+    const safeLineNumber = Math.min(Math.max(targetLineNumber, 1), state.doc.lines);
+    const line = state.doc.line(safeLineNumber);
+    const markerMatch = TASK_LIST_MARKER_PATTERN.exec(line.text);
+    if (!markerMatch) {
+      return false;
+    }
+
+    const [, prefix, marker] = markerMatch;
+    const markerFrom = line.from + prefix.length;
+    const nextMarker = marker === ' ' ? 'x' : ' ';
+
+    this.editorView.dispatch({
+      changes: {
+        from: markerFrom,
+        insert: nextMarker,
+        to: markerFrom + 1,
+      },
+      userEvent: 'input',
+    });
+    return true;
+  }
+
   updateCursorInfo(state) {
     if (!this.lineInfoElement) {
       return;

package/src/client/infrastructure/excalidraw-room-client.js

@@ -258,10 +258,14 @@ export class ExcalidrawRoomClient {
     } catch (readError) {
       if (readError?.status !== 404 || !createIfMissing) {
         if (readError?.status === 404) {
-          throw new Error(readError.message || 'Excalidraw file not found');
+          throw new Error(readError.message || 'Excalidraw file not found', {
+            cause: readError,
+          });
         }
 
-        throw new Error(readError?.message || 'Failed to load Excalidraw file');
+        throw new Error(readError?.message || 'Failed to load Excalidraw file', {
+          cause: readError,
+        });
       }
     }
 
@@ -278,11 +282,15 @@ export class ExcalidrawRoomClient {
           const existingData = await this.vaultClient.readFile(this.filePath);
           return parseSceneJson(existingData.content);
         } catch (conflictReadError) {
-          throw new Error(conflictReadError?.message || 'Failed to load existing Excalidraw file after create conflict');
+          throw new Error(conflictReadError?.message || 'Failed to load existing Excalidraw file after create conflict', {
+            cause: conflictReadError,
+          });
         }
       }
 
-      throw new Error(createError?.message || 'Failed to create Excalidraw file');
+      throw new Error(createError?.message || 'Failed to create Excalidraw file', {
+        cause: createError,
+      });
     }
   }
 

package/src/client/presentation/app-shell-renderer.js

@@ -0,0 +1,13 @@
+import { render } from 'lit-html';
+
+import { appShellTemplate } from './app-shell-template.js';
+
+export function renderAppShell(doc = document) {
+  const host = doc.getElementById('appRoot');
+  if (!host) {
+    throw new Error('App shell root element #appRoot is missing.');
+  }
+
+  render(appShellTemplate(), host);
+  return host;
+}