collabmd 0.1.43 → 0.1.44

package/src/client/app/main-entry.js

@@ -6,7 +6,6 @@ import '../styles/base.css';
 import '../styles/style.css';
 
 import { ensureRuntimeConfigLoaded } from '../infrastructure/runtime-config-loader.js';
-import { ensureUiComponentStyles } from '../presentation/components/ui/ensure-ui-component-styles.js';
 
 function ensureHighlightThemeStylesheet() {
   let themeStylesheet = document.getElementById('hljs-theme');
@@ -24,5 +23,4 @@ function ensureHighlightThemeStylesheet() {
 
 await ensureRuntimeConfigLoaded();
 ensureHighlightThemeStylesheet();
-await ensureUiComponentStyles();
 await import('../main.js');

package/src/client/application/app-shell/git-feature.js

@@ -1,9 +1,4 @@
 import { createWorkspaceChange } from '../../../domain/workspace-change.js';
-import { createWorkspaceRequestId } from '../../domain/workspace-request-id.js';
-
-function normalizeWorkspaceChange(workspaceChange = {}) {
-  return createWorkspaceChange(workspaceChange);
-}
 
 export const gitFeature = {
   formatPullBackupToast(pullBackup = null) {
@@ -309,7 +304,7 @@ export const gitFeature = {
   },
 
   async postGitAction(actionName, payload) {
-    const requestId = createWorkspaceRequestId();
+    const requestId = crypto.randomUUID();
     this.pendingWorkspaceRequestIds?.add(requestId);
     try {
       switch (actionName) {
@@ -389,7 +384,7 @@ export const gitFeature = {
     result = {},
     showLocalFileToast = false,
   } = {}) {
-    const workspaceChange = normalizeWorkspaceChange(result.workspaceChange);
+    const workspaceChange = createWorkspaceChange(result.workspaceChange);
     await this.refreshWorkspaceAfterGitAction({ filePath, preferredScope });
     this.handleWorkspaceChangeForCurrentFile(workspaceChange, { action, local: true, showToast: showLocalFileToast });
     return workspaceChange;
@@ -446,7 +441,7 @@ export const gitFeature = {
       return;
     }
 
-    const workspaceChange = normalizeWorkspaceChange(event.workspaceChange);
+    const workspaceChange = createWorkspaceChange(event.workspaceChange);
     if (event.origin === 'git') {
       await this.refreshGitAfterAction();
     }

package/src/client/application/app-shell/ui-feature-shell.js

@@ -413,6 +413,15 @@ function isInteractiveTaskListDescendant(target) {
   return Boolean(target.closest('a, button, input, select, textarea, summary, [contenteditable="true"], [role="button"], [role="link"]'));
 }
 
+function hasTaskListTextSelection(taskItem) {
+  const selection = window.getSelection();
+  return Boolean(
+    !selection?.isCollapsed
+    && taskItem.contains(selection.anchorNode)
+    && taskItem.contains(selection.focusNode)
+  );
+}
+
 function normalizeFragmentTargetId(rawTarget = '') {
   const normalizedTarget = String(rawTarget ?? '').trim();
   if (!normalizedTarget) {
@@ -652,6 +661,10 @@ function handlePreviewContentClick(event) {
     return;
   }
 
+  if (hasTaskListTextSelection(taskItem)) {
+    return;
+  }
+
   event.preventDefault();
 
   const sourceLine = Number.parseInt(taskItem.getAttribute('data-source-line') || '', 10);

package/src/client/application/app-shell/ui-feature-toolbar.js

@@ -7,18 +7,11 @@ import {
   isMarkdownBlockAction,
   markdownToolbarLayout,
 } from '../../domain/markdown-toolbar-actions.js';
+import { escapeHtml } from '../../domain/vault-utils.js';
 
 const IMAGE_FILE_PICKER_ACCEPT = 'image/png,image/jpeg,image/webp,image/gif,image/svg+xml';
 const DEFAULT_BLOCK_ACTION = 'paragraph';
 
-function escapeHtml(value) {
-  return String(value ?? '')
-    .replaceAll('&', '&')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;');
-}
-
 function normalizeToolbarAction(action) {
   if (action === 'heading') {
     return 'heading-2';

package/src/client/application/diagram-chrome.js

@@ -78,6 +78,7 @@ export class DiagramChrome {
     this.maximizedRoots = new Map();
     this.resizeObservers = new Set();
     this.shellControllers = new WeakMap();
+    this.shellViewStates = new WeakMap();
     this.shellRefits = new WeakMap();
     this.resizeFrameId = null;
   }
@@ -105,6 +106,7 @@ export class DiagramChrome {
   destroyShell(shell) {
     this.shellControllers.get(shell)?.destroy?.();
     this.shellControllers.delete(shell);
+    this.shellViewStates.delete(shell);
     this.shellRefits.delete(shell);
     if (this.activeMaximizedShell === shell) {
       this.restoreShellMount(shell);
@@ -113,6 +115,20 @@ export class DiagramChrome {
     this.syncBodyMaximizedClasses();
   }
 
+  captureShellViewState(shell) {
+    const viewState = this.shellControllers.get(shell)?.getViewState?.() ?? null;
+    if (viewState) {
+      this.shellViewStates.set(shell, viewState);
+    }
+    return viewState;
+  }
+
+  getShellViewState(shell) {
+    return this.shellViewStates.get(shell)
+      ?? this.shellControllers.get(shell)?.getViewState?.()
+      ?? null;
+  }
+
   cancelActiveShell(kind) {
     const activeShell = this.syncActiveShell();
     if (!activeShell?.classList?.contains(`${kind}-shell`)) {
@@ -398,10 +414,12 @@ export class DiagramChrome {
       return null;
     }
 
-    this.destroyShell(shell);
-
     const config = getKindConfig(kind);
     const zoomPolicy = getKindZoomPolicy(kind);
+    const previousFrame = shell.querySelector(config.frameClassName.split(' ').map((name) => `.${name}`).join(''));
+    const previousViewportWidth = previousFrame ? getFrameViewportSize(previousFrame).width : 0;
+    const previousViewState = this.getShellViewState(shell);
+    this.destroyShell(shell);
     const {
       copyButton,
       decreaseButton,
@@ -418,14 +436,53 @@ export class DiagramChrome {
     });
     const frame = this.document.createElement('div');
     frame.className = config.frameClassName;
+    const shouldRestoreScrollPosition = Boolean(
+      previousViewState
+      && (previousViewState.scrollLeft > 0 || previousViewState.scrollTop > 0)
+    );
+    const shouldStageReplacement = Boolean(
+      shouldRestoreScrollPosition
+      && previousFrame?.isConnected
+      && previousFrame.clientWidth > 0
+      && previousFrame.clientHeight > 0
+    );
+    const shouldRestoreShellPosition = Boolean(
+      shouldStageReplacement
+      && !shell.classList.contains('is-maximized')
+      && !shell.style.position
+    );
+    if (shouldRestoreShellPosition) {
+      shell.style.position = 'relative';
+    }
+    if (shouldRestoreScrollPosition && !shouldStageReplacement) {
+      frame.style.visibility = 'hidden';
+    }
+    if (shouldStageReplacement) {
+      Object.assign(frame.style, {
+        height: `${previousFrame.clientHeight}px`,
+        left: '0',
+        pointerEvents: 'none',
+        position: 'absolute',
+        top: '0',
+        visibility: 'hidden',
+        width: `${previousFrame.clientWidth}px`,
+      });
+    }
 
     let currentZoom = zoomPolicy.default;
     let defaultZoom = 1;
     let zoomAnimationFrameId = null;
     let resetZoomFrameId = null;
     let layoutFrameId = null;
-    let hasManualZoom = false;
-    let lastAutoFitViewportWidth = 0;
+    let replacementFrameId = null;
+    let hasManualZoom = Boolean(
+      previousViewState?.hasManualZoom
+      || previousViewState?.scrollLeft > 0
+      || previousViewState?.scrollTop > 0,
+    );
+    const hasInitialViewport = previousViewportWidth > 0 && Number.isFinite(baseWidth) && baseWidth > 0;
+    const hasRestorableViewState = Number.isFinite(previousViewState?.zoom);
+    let lastAutoFitViewportWidth = hasInitialViewport ? previousViewportWidth : 0;
     let shouldForceScheduledReset = false;
     let isPanning = false;
     let activePointerId = null;
@@ -467,6 +524,14 @@ export class DiagramChrome {
       diagramElement.style.margin = isPannable ? '0' : '0 auto';
     };
 
+    // ponytail: size from the current viewport for the first paint; hidden shells refit later.
+    const initialZoom = hasRestorableViewState
+      ? clamp(previousViewState.zoom, zoomPolicy.min, zoomPolicy.max)
+      : hasInitialViewport
+      ? clamp(previousViewportWidth / baseWidth, zoomPolicy.min, zoomPolicy.fitMax)
+      : zoomPolicy.default;
+    applyZoom(initialZoom);
+
     const getViewportCenter = () => ({
       x: frame.scrollLeft + (frame.clientWidth / 2),
       y: frame.scrollTop + (frame.clientHeight / 2),
@@ -673,12 +738,54 @@ export class DiagramChrome {
 
     frame.appendChild(diagramElement);
     const sourceNode = sourceSelector ? shell.querySelector(sourceSelector) : null;
-    shell.replaceChildren();
+    const nextChildren = sourceNode ? [sourceNode, toolbar, frame] : [toolbar, frame];
     if (sourceNode) {
       sourceNode.hidden = true;
-      shell.appendChild(sourceNode);
     }
-    shell.append(toolbar, frame);
+    if (shouldStageReplacement) {
+      shell.append(frame);
+    } else {
+      shell.replaceChildren(...nextChildren);
+    }
+    applyZoom(initialZoom);
+
+    const restoreScrollPosition = () => {
+      const maxScrollLeft = Math.max(0, frame.scrollWidth - frame.clientWidth);
+      const maxScrollTop = Math.max(0, frame.scrollHeight - frame.clientHeight);
+      const scrollLeft = clamp(previousViewState.scrollLeft ?? 0, 0, maxScrollLeft);
+      const scrollTop = clamp(previousViewState.scrollTop ?? 0, 0, maxScrollTop);
+      frame.scrollLeft = scrollLeft;
+      frame.scrollTop = scrollTop;
+      return frame.clientWidth > 0
+        && frame.clientHeight > 0
+        && frame.scrollLeft === scrollLeft
+        && frame.scrollTop === scrollTop;
+    };
+
+    if (shouldStageReplacement) {
+      restoreScrollPosition();
+      replacementFrameId = this.window.requestAnimationFrame(() => {
+        replacementFrameId = null;
+        shell.replaceChildren(...nextChildren);
+        frame.removeAttribute('style');
+        if (shouldRestoreShellPosition) {
+          shell.style.position = '';
+        }
+        applyZoom(initialZoom);
+        restoreScrollPosition();
+      });
+    } else if (shouldRestoreScrollPosition) {
+      if (!restoreScrollPosition()) {
+        this.window.requestAnimationFrame(() => {
+          if (frame.isConnected) {
+            restoreScrollPosition();
+            frame.style.visibility = '';
+          }
+        });
+      } else {
+        frame.style.visibility = '';
+      }
+    }
 
     const controller = {
       destroy: () => {
@@ -692,9 +799,18 @@ export class DiagramChrome {
         if (layoutFrameId) {
           this.window.cancelAnimationFrame(layoutFrameId);
         }
+        if (replacementFrameId) {
+          this.window.cancelAnimationFrame(replacementFrameId);
+        }
         resizeObserver?.disconnect?.();
         this.resizeObservers.delete(resizeObserver);
       },
+      getViewState: () => ({
+        hasManualZoom,
+        scrollLeft: frame.scrollLeft,
+        scrollTop: frame.scrollTop,
+        zoom: currentZoom,
+      }),
       scheduleResetZoomToFit,
       syncMaximizeButtonState: () => this.syncMaximizeButtonState(shell, maximizeButton),
     };
@@ -702,7 +818,9 @@ export class DiagramChrome {
     this.shellControllers.set(shell, controller);
     this.shellRefits.set(shell, scheduleResetZoomToFit);
     this.syncMaximizeButtonState(shell, maximizeButton);
-    scheduleResetZoomToFit({ force: true });
+    if (!hasInitialViewport && !hasRestorableViewState) {
+      scheduleResetZoomToFit({ force: true });
+    }
     return controller;
   }
 }

package/src/client/application/diagram-preview-export.js

@@ -3,8 +3,12 @@ import {
   isPlantUmlFilePath,
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
+import { getVaultPathLeaf } from '../domain/vault-paths.js';
+import { downloadBlob } from '../browser-utils.js';
 import { sanitizeSvgMarkup, serializeSvgElement } from './preview-diagram-utils.js';
 
+export { downloadBlob };
+
 const LIGHT_EXPORT_MERMAID_CONFIG = Object.freeze({
   htmlLabels: false,
   flowchart: {
@@ -24,14 +28,6 @@ const MERMAID_INIT_DIRECTIVE_PATTERN = /^\s*%%\{\s*(?:init|initialize)\s*:[\s\S]
 
 let mermaidExportCounter = 0;
 
-function getPathLeaf(pathValue) {
-  return String(pathValue ?? '')
-    .replace(/\/+$/u, '')
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
 function encodeSvgDataUrl(svgMarkup) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
 }
@@ -155,12 +151,12 @@ export function createDiagramExportBaseName({
   sourceLine = '',
   targetPath = '',
 } = {}) {
-  const targetLeaf = getPathLeaf(targetPath);
+  const targetLeaf = getVaultPathLeaf(targetPath);
   if (targetLeaf) {
     return stripVaultFileExtension(targetLeaf) || `${diagramKind}-diagram`;
   }
 
-  const currentLeaf = getPathLeaf(currentFilePath);
+  const currentLeaf = getVaultPathLeaf(currentFilePath);
   const currentStem = stripVaultFileExtension(currentLeaf) || 'document';
   const isStandaloneDiagram = (
     (diagramKind === 'mermaid' && isMermaidFilePath(currentFilePath))
@@ -277,20 +273,6 @@ export async function rasterizeSvgMarkupToPngBlob(svgMarkup) {
   return canvasToPngBlob(canvas);
 }
 
-export function downloadBlob(blob, fileName) {
-  const downloadUrl = URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = downloadUrl;
-  anchor.download = fileName;
-  anchor.style.display = 'none';
-  document.body.appendChild(anchor);
-  anchor.click();
-  window.setTimeout(() => {
-    anchor.remove();
-    URL.revokeObjectURL(downloadUrl);
-  }, 30_000);
-}
-
 export async function writeBlobToClipboard(blob) {
   if (typeof ClipboardItem !== 'function' || !navigator.clipboard?.write) {
     throw new Error('Clipboard image copy is unavailable');