collabmd 0.1.34 → 0.1.36

package/src/client/presentation/image-lightbox-controller.js

@@ -40,6 +40,10 @@ export function clampImageLightboxOffset(offset, {
   return Math.min(Math.max(numericOffset, -overflow), overflow);
 }
 
+export function isImageLightboxWheelZoomGesture(event) {
+  return Boolean(event?.ctrlKey);
+}
+
 export class ImageLightboxController {
   constructor({
     previewElement,
@@ -63,6 +67,13 @@ export class ImageLightboxController {
     this.dragStartY = 0;
     this.dragOriginX = 0;
     this.dragOriginY = 0;
+    this.touchPointers = new Map();
+    this.pinchPointerIds = [];
+    this.pinchStartDistance = 0;
+    this.pinchStartScale = MIN_SCALE;
+    this.pinchStartOffsetX = 0;
+    this.pinchStartOffsetY = 0;
+    this.pinchStartCenter = { x: 0, y: 0 };
     this.didDrag = false;
     this.resetButton = null;
 
@@ -167,7 +178,10 @@ export class ImageLightboxController {
       return;
     }
 
-    this.activePointerId = null;
+    this.stopDrag();
+    this.touchPointers.clear();
+    this.pinchPointerIds = [];
+    this.pinchStartDistance = 0;
     this.didDrag = false;
     this.viewport?.classList?.remove('is-dragging');
     if (this.overlayRoot) {
@@ -194,6 +208,201 @@ export class ImageLightboxController {
     this.syncTransform();
   }
 
+  capturePointer(pointerId) {
+    try {
+      this.viewport?.setPointerCapture?.(pointerId);
+    } catch {
+      // Synthetic tests may not have an active browser pointer to capture.
+    }
+  }
+
+  releasePointer(pointerId) {
+    try {
+      this.viewport?.releasePointerCapture?.(pointerId);
+    } catch {
+      // Ignore release failures when the pointer is already gone.
+    }
+  }
+
+  getViewportPointFromClient(clientX, clientY) {
+    if (!this.viewport) {
+      return { x: 0, y: 0 };
+    }
+
+    const rect = this.viewport.getBoundingClientRect();
+    return {
+      x: Number(clientX) - rect.left - (rect.width / 2),
+      y: Number(clientY) - rect.top - (rect.height / 2),
+    };
+  }
+
+  setScaleAroundViewportPoint(nextScale, viewportPoint, {
+    originScale = this.scale,
+    originOffsetX = this.offsetX,
+    originOffsetY = this.offsetY,
+    targetViewportPoint = viewportPoint,
+  } = {}) {
+    const clampedScale = clampImageLightboxScale(nextScale);
+    const safeOriginScale = Number(originScale) > 0 ? Number(originScale) : MIN_SCALE;
+    const originPointX = Number.isFinite(viewportPoint?.x) ? viewportPoint.x : 0;
+    const originPointY = Number.isFinite(viewportPoint?.y) ? viewportPoint.y : 0;
+    const targetPointX = Number.isFinite(targetViewportPoint?.x) ? targetViewportPoint.x : originPointX;
+    const targetPointY = Number.isFinite(targetViewportPoint?.y) ? targetViewportPoint.y : originPointY;
+
+    this.scale = clampedScale;
+    this.offsetX = targetPointX - (((originPointX - originOffsetX) / safeOriginScale) * clampedScale);
+    this.offsetY = targetPointY - (((originPointY - originOffsetY) / safeOriginScale) * clampedScale);
+    this.clampOffsets();
+    this.syncTransform();
+  }
+
+  startDrag(pointerId, clientX, clientY) {
+    if (!this.viewport || this.scale <= MIN_SCALE) {
+      return false;
+    }
+
+    this.activePointerId = pointerId;
+    this.dragStartX = clientX;
+    this.dragStartY = clientY;
+    this.dragOriginX = this.offsetX;
+    this.dragOriginY = this.offsetY;
+    this.viewport.classList.add('is-dragging');
+    this.capturePointer(pointerId);
+    return true;
+  }
+
+  stopDrag(pointerId = this.activePointerId) {
+    if (pointerId === this.activePointerId) {
+      this.activePointerId = null;
+    }
+
+    this.viewport?.classList?.remove('is-dragging');
+    if (pointerId !== null) {
+      this.releasePointer(pointerId);
+    }
+    if (this.imageElement) {
+      this.imageElement.style.cursor = this.scale > MIN_SCALE ? 'grab' : 'zoom-in';
+    }
+  }
+
+  updateDrag(pointerId, clientX, clientY) {
+    if (!this.isOpen || this.activePointerId !== pointerId) {
+      return false;
+    }
+
+    if (
+      !this.didDrag
+      && (Math.abs(clientX - this.dragStartX) >= DRAG_THRESHOLD_PX
+        || Math.abs(clientY - this.dragStartY) >= DRAG_THRESHOLD_PX)
+    ) {
+      this.didDrag = true;
+    }
+
+    this.offsetX = this.dragOriginX + (clientX - this.dragStartX);
+    this.offsetY = this.dragOriginY + (clientY - this.dragStartY);
+    this.clampOffsets();
+    this.syncTransform();
+    return true;
+  }
+
+  getTrackedTouchPointers() {
+    return Array.from(this.touchPointers.values());
+  }
+
+  getActivePinchPointers() {
+    if (this.pinchPointerIds.length === 2) {
+      const pinchPointers = this.pinchPointerIds
+        .map((pointerId) => this.touchPointers.get(pointerId))
+        .filter(Boolean);
+      if (pinchPointers.length === 2) {
+        return pinchPointers;
+      }
+    }
+
+    return this.getTrackedTouchPointers().slice(0, 2);
+  }
+
+  startPinchGesture() {
+    const [firstPointer, secondPointer] = this.getActivePinchPointers();
+    if (!firstPointer || !secondPointer) {
+      return false;
+    }
+
+    this.stopDrag();
+    this.pinchPointerIds = [firstPointer.pointerId, secondPointer.pointerId];
+    this.pinchStartDistance = Math.hypot(
+      secondPointer.clientX - firstPointer.clientX,
+      secondPointer.clientY - firstPointer.clientY,
+    ) || 1;
+    this.pinchStartScale = this.scale;
+    this.pinchStartOffsetX = this.offsetX;
+    this.pinchStartOffsetY = this.offsetY;
+    const startCenter = this.getViewportPointFromClient(
+      (firstPointer.clientX + secondPointer.clientX) / 2,
+      (firstPointer.clientY + secondPointer.clientY) / 2,
+    );
+    this.pinchStartCenter = startCenter;
+    return true;
+  }
+
+  updatePinchGesture() {
+    const [firstPointer, secondPointer] = this.getActivePinchPointers();
+    if (!firstPointer || !secondPointer) {
+      return false;
+    }
+
+    const currentDistance = Math.hypot(
+      secondPointer.clientX - firstPointer.clientX,
+      secondPointer.clientY - firstPointer.clientY,
+    );
+    if (!Number.isFinite(currentDistance) || currentDistance <= 0) {
+      return false;
+    }
+
+    const currentCenter = this.getViewportPointFromClient(
+      (firstPointer.clientX + secondPointer.clientX) / 2,
+      (firstPointer.clientY + secondPointer.clientY) / 2,
+    );
+    const nextScale = this.pinchStartScale * (currentDistance / this.pinchStartDistance);
+    this.setScaleAroundViewportPoint(nextScale, this.pinchStartCenter, {
+      originScale: this.pinchStartScale,
+      originOffsetX: this.pinchStartOffsetX,
+      originOffsetY: this.pinchStartOffsetY,
+      targetViewportPoint: currentCenter,
+    });
+
+    if (
+      !this.didDrag
+      && (
+        Math.abs(currentDistance - this.pinchStartDistance) >= DRAG_THRESHOLD_PX
+        || Math.abs(currentCenter.x - this.pinchStartCenter.x) >= DRAG_THRESHOLD_PX
+        || Math.abs(currentCenter.y - this.pinchStartCenter.y) >= DRAG_THRESHOLD_PX
+      )
+    ) {
+      this.didDrag = true;
+    }
+
+    return true;
+  }
+
+  syncTouchGestureAfterPointerChange() {
+    if (this.touchPointers.size >= 2) {
+      this.startPinchGesture();
+      return;
+    }
+
+    this.pinchPointerIds = [];
+    this.pinchStartDistance = 0;
+
+    if (this.touchPointers.size === 1 && this.scale > MIN_SCALE) {
+      const [remainingPointer] = this.getTrackedTouchPointers();
+      this.startDrag(remainingPointer.pointerId, remainingPointer.clientX, remainingPointer.clientY);
+      return;
+    }
+
+    this.stopDrag();
+  }
+
   clampOffsets() {
     if (!this.viewport || !this.imageElement) {
       this.offsetX = 0;
@@ -267,13 +476,15 @@ export class ImageLightboxController {
     const controls = this.document.createElement('div');
     controls.className = 'image-lightbox-controls';
 
+    const zoomOutButton = this.createControlButton('-', 'Zoom out', () => this.zoomBy(-ZOOM_STEP));
     const zoomLabel = this.document.createElement('span');
     zoomLabel.className = 'image-lightbox-zoom-label';
     zoomLabel.textContent = '100%';
+    const zoomInButton = this.createControlButton('+', 'Zoom in', () => this.zoomBy(ZOOM_STEP));
     const resetButton = this.createControlButton('Reset', 'Reset zoom and position', () => this.resetView());
     const closeButton = this.createControlButton('Close', 'Close image preview', () => this.close());
 
-    controls.append(zoomLabel, resetButton, closeButton);
+    controls.append(zoomOutButton, zoomLabel, zoomInButton, resetButton, closeButton);
     toolbar.append(title, controls);
 
     const viewport = this.document.createElement('div');
@@ -292,58 +503,108 @@ export class ImageLightboxController {
         return;
       }
 
+      if (isImageLightboxWheelZoomGesture(event)) {
+        event.preventDefault();
+        this.zoomBy(event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP);
+        return;
+      }
+
+      if (this.scale <= MIN_SCALE) {
+        return;
+      }
+
+      const deltaX = Number.isFinite(event.deltaX) ? event.deltaX : 0;
+      const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
+      if (deltaX === 0 && deltaY === 0) {
+        return;
+      }
+
       event.preventDefault();
-      this.zoomBy(event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP);
+      this.offsetX -= deltaX;
+      this.offsetY -= deltaY;
+      this.clampOffsets();
+      this.syncTransform();
     }, { passive: false });
 
     viewport.addEventListener('pointerdown', (event) => {
-      if (!this.isOpen || this.scale <= MIN_SCALE || event.button !== 0) {
+      if (!this.isOpen) {
+        return;
+      }
+
+      if (event.pointerType === 'touch') {
+        if (this.touchPointers.size === 0) {
+          this.didDrag = false;
+        }
+        this.touchPointers.set(event.pointerId, {
+          clientX: event.clientX,
+          clientY: event.clientY,
+          pointerId: event.pointerId,
+        });
+        this.capturePointer(event.pointerId);
+        this.syncTouchGestureAfterPointerChange();
+        if (this.touchPointers.size > 1 || this.scale > MIN_SCALE) {
+          event.preventDefault();
+        }
+        return;
+      }
+
+      if (this.scale <= MIN_SCALE || event.button !== 0) {
         return;
       }
 
-      this.activePointerId = event.pointerId;
-      this.dragStartX = event.clientX;
-      this.dragStartY = event.clientY;
-      this.dragOriginX = this.offsetX;
-      this.dragOriginY = this.offsetY;
       this.didDrag = false;
-      viewport.classList.add('is-dragging');
-      viewport.setPointerCapture?.(event.pointerId);
+      this.startDrag(event.pointerId, event.clientX, event.clientY);
       event.preventDefault();
     });
 
     viewport.addEventListener('pointermove', (event) => {
-      if (!this.isOpen || this.activePointerId !== event.pointerId) {
+      if (!this.isOpen) {
         return;
       }
 
-      if (
-        !this.didDrag
-        && (Math.abs(event.clientX - this.dragStartX) >= DRAG_THRESHOLD_PX
-          || Math.abs(event.clientY - this.dragStartY) >= DRAG_THRESHOLD_PX)
-      ) {
-        this.didDrag = true;
+      if (event.pointerType === 'touch' && this.touchPointers.has(event.pointerId)) {
+        this.touchPointers.set(event.pointerId, {
+          clientX: event.clientX,
+          clientY: event.clientY,
+          pointerId: event.pointerId,
+        });
+
+        if (this.touchPointers.size >= 2) {
+          this.updatePinchGesture();
+          event.preventDefault();
+          return;
+        }
+
+        if (this.updateDrag(event.pointerId, event.clientX, event.clientY)) {
+          event.preventDefault();
+        }
+        return;
       }
 
-      this.offsetX = this.dragOriginX + (event.clientX - this.dragStartX);
-      this.offsetY = this.dragOriginY + (event.clientY - this.dragStartY);
-      this.clampOffsets();
-      this.syncTransform();
+      this.updateDrag(event.pointerId, event.clientX, event.clientY);
     });
 
-    const finishDrag = (event) => {
+    const finishPointerGesture = (event) => {
+      if (event.pointerType === 'touch') {
+        this.touchPointers.delete(event.pointerId);
+        this.releasePointer(event.pointerId);
+        if (this.activePointerId === event.pointerId) {
+          this.stopDrag(event.pointerId);
+        }
+        this.syncTouchGestureAfterPointerChange();
+        return;
+      }
+
       if (this.activePointerId !== event.pointerId) {
         return;
       }
 
-      this.activePointerId = null;
-      viewport.classList.remove('is-dragging');
-      viewport.releasePointerCapture?.(event.pointerId);
-      this.imageElement.style.cursor = this.scale > MIN_SCALE ? 'grab' : 'zoom-in';
+      this.stopDrag(event.pointerId);
     };
 
-    viewport.addEventListener('pointerup', finishDrag);
-    viewport.addEventListener('pointercancel', finishDrag);
+    viewport.addEventListener('pointerup', finishPointerGesture);
+    viewport.addEventListener('pointercancel', finishPointerGesture);
+    viewport.addEventListener('lostpointercapture', finishPointerGesture);
     image.addEventListener('click', (event) => {
       if (!this.isOpen) {
         return;

package/src/client/styles/features/collaboration-presence.css

@@ -9,6 +9,29 @@
   align-items: center;
 }
 
+.toolbar-badge-button {
+  cursor: pointer;
+  transition: background var(--transition-interactive), box-shadow var(--transition-interactive), color var(--transition-interactive);
+}
+
+.toolbar-badge-button:hover:not(:disabled) {
+  background: var(--surface-accent-soft);
+}
+
+.toolbar-badge-button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-accent-ring-strong);
+}
+
+.toolbar-badge-button:disabled {
+  cursor: default;
+}
+
+.toolbar-badge-button.is-active {
+  background: var(--surface-accent-soft);
+  box-shadow: var(--shadow-accent-inset);
+}
+
 .user-avatar {
   position: relative;
   z-index: 1;
@@ -101,3 +124,192 @@
 .user-avatar-button.different-file:hover {
   opacity: 0.85;
 }
+
+.user-avatar-overflow-trigger {
+  background: var(--color-surface-dynamic);
+  color: var(--color-text-muted);
+}
+
+.presence-panel {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: min(420px, calc(100vw - var(--space-6)));
+  max-height: min(72vh, 540px);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: oklch(from var(--color-surface) l c h / 0.98);
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(14px);
+}
+
+.presence-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.presence-panel-title {
+  margin: 0;
+  font-size: var(--text-sm);
+  font-weight: 700;
+}
+
+.presence-panel-status {
+  margin: var(--space-1) 0 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-meta);
+}
+
+.presence-panel-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  overflow-y: auto;
+  min-height: 0;
+  padding-right: var(--space-1);
+}
+
+.presence-panel-empty-state {
+  padding: var(--space-4);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  font-size: var(--text-label);
+}
+
+.presence-panel-user {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 2px;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  background: var(--surface-fill-subtle);
+}
+
+.presence-panel-user.is-following {
+  border-color: oklch(from var(--color-primary) l c h / 0.3);
+  background: var(--interactive-surface);
+  box-shadow: var(--shadow-accent-inset);
+}
+
+.presence-panel-user-button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  min-width: 0;
+  padding: 10px 12px;
+  border-radius: calc(var(--radius-md) - 2px);
+  color: inherit;
+  text-align: left;
+  transition: background var(--transition-interactive), transform var(--transition-interactive);
+}
+
+.presence-panel-user-button:not(div) {
+  cursor: pointer;
+}
+
+.presence-panel-user-button:hover {
+  background: var(--color-surface-offset);
+}
+
+.presence-panel-user-button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-accent-ring);
+}
+
+.presence-panel-user-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-full);
+  color: var(--color-text-on-dark);
+  font-size: var(--text-label);
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.presence-panel-user-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.presence-panel-user-topline {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.presence-panel-user-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.presence-panel-user-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 18px;
+  padding: 0 6px;
+  border-radius: var(--radius-full);
+  background: var(--surface-avatar-label);
+  color: var(--color-text-on-dark);
+  font-size: var(--text-micro);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.presence-panel-user-file {
+  color: var(--color-text-muted);
+  font-size: var(--text-meta);
+}
+
+.presence-panel-user-stop {
+  flex-shrink: 0;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: var(--radius-full);
+  background: var(--surface-accent-soft);
+  color: var(--color-primary);
+  font-size: var(--text-meta);
+  font-weight: 700;
+  transition: background var(--transition-interactive), box-shadow var(--transition-interactive);
+}
+
+.presence-panel-user-stop:hover {
+  background: var(--interactive-surface);
+}
+
+.presence-panel-user-stop:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-accent-ring);
+}
+
+@media (max-width: 768px) {
+  .presence-panel {
+    width: min(360px, calc(100vw - var(--space-4)));
+    max-height: min(68vh, 460px);
+  }
+
+  .presence-panel-user-button {
+    padding: 9px 10px;
+  }
+}

package/src/client/styles/features/diagram-preview.css

@@ -52,9 +52,13 @@
 .diagram-preview-toolbar {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  justify-content: flex-start;
+  gap: var(--space-3);
   min-width: 0;
-  flex-wrap: wrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
   padding: var(--space-2) var(--space-3);
   border-bottom: 1px solid var(--color-border);
   background: var(--color-surface-raised);
@@ -63,12 +67,30 @@
   user-select: none;
 }
 
+.diagram-preview-toolbar-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: max-content;
+  flex: 0 0 auto;
+}
+
+.diagram-preview-toolbar-group--zoom {
+  flex: 0 0 auto;
+}
+
+.diagram-preview-toolbar-group--actions {
+  margin-left: auto;
+  justify-content: flex-end;
+}
+
 .diagram-preview-zoom-label {
-  min-width: 52px;
+  min-width: 48px;
+  padding: 0 4px;
   color: var(--color-text-muted);
   text-align: center;
   font-size: var(--text-xs);
-  font-weight: 500;
+  font-weight: 600;
   font-variant-numeric: tabular-nums;
 }
 
@@ -82,6 +104,51 @@
   overscroll-behavior: contain;
 }
 
+.diagram-preview-toolbar .ui-preview-action {
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  padding: 0;
+  line-height: 1;
+}
+
+.diagram-preview-toolbar .ui-preview-action:not(.ui-preview-action--icon-only) {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.diagram-preview-toolbar .ui-preview-action:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--color-primary) 72%, white 28%);
+  outline-offset: 2px;
+  border-color: color-mix(in oklab, var(--color-primary) 64%, var(--color-border) 36%);
+}
+
+.diagram-preview-toolbar .ui-preview-action.is-icon-only svg {
+  width: 14px;
+  height: 14px;
+}
+
+@media (max-width: 360px) {
+  .diagram-preview-toolbar {
+    gap: var(--space-2);
+    padding-inline: var(--space-2);
+  }
+
+  .diagram-preview-toolbar-group {
+    gap: 4px;
+  }
+
+  .diagram-preview-zoom-label {
+    min-width: 44px;
+  }
+
+  .diagram-preview-toolbar .ui-preview-action {
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
+  }
+}
+
 .excalidraw-embed,
 .excalidraw-embed-placeholder,
 .drawio-embed,