collabmd 0.1.31 → 0.1.33

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

@@ -277,6 +277,16 @@ body.drawio-maximized-open::before {
   pointer-events: none;
 }
 
+.excalidraw-warm-cache-root {
+  position: fixed;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  inset: 0 auto auto 0;
+}
+
 body.excalidraw-maximized-open {
   overflow: hidden;
 }
@@ -303,6 +313,29 @@ body.excalidraw-maximized-open .resizer {
   box-shadow: var(--shadow-elevated-soft);
 }
 
+.excalidraw-embed.is-loading {
+  position: relative;
+}
+
+.excalidraw-embed.is-loading::after {
+  content: 'Loading Excalidraw...';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in oklab, var(--color-surface) 82%, transparent);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  letter-spacing: 0.01em;
+  z-index: 2;
+}
+
+.excalidraw-embed.is-loading .excalidraw-embed-iframe {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .excalidraw-embed-placeholder.is-hydrated {
   visibility: hidden;
 }

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

@@ -5,6 +5,10 @@
   background: var(--surface-media-canvas);
 }
 
+.preview-content .bases-embed-placeholder {
+  display: block;
+}
+
 .preview-content .video-embed,
 .preview-content .video-embed-placeholder {
   display: block;
@@ -58,43 +62,52 @@
   object-fit: contain;
 }
 
-.preview-content .mermaid-shell {
+.preview-content .mermaid-shell,
+.mermaid-maximized-root .mermaid-shell {
   display: grid;
   gap: 0;
 }
 
-.preview-content .mermaid-placeholder-card {
+.preview-content .mermaid-placeholder-card,
+.mermaid-maximized-root .mermaid-placeholder-card {
   border-radius: 0;
 }
 
-.preview-content .mermaid-toolbar {
+.preview-content .mermaid-toolbar,
+.mermaid-maximized-root .mermaid-toolbar {
   justify-content: flex-end;
 }
 
-.preview-content .mermaid-zoom-btn {
+.preview-content .mermaid-zoom-btn,
+.mermaid-maximized-root .mermaid-zoom-btn {
   min-width: 32px;
   line-height: 1.5;
 }
 
-.preview-content .mermaid-zoom-btn:disabled {
+.preview-content .mermaid-zoom-btn:disabled,
+.mermaid-maximized-root .mermaid-zoom-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.preview-content .mermaid-frame {
+.preview-content .mermaid-frame,
+.mermaid-maximized-root .mermaid-frame {
   max-width: none;
 }
 
-.preview-content .mermaid-frame.is-pannable {
+.preview-content .mermaid-frame.is-pannable,
+.mermaid-maximized-root .mermaid-frame.is-pannable {
   cursor: grab;
 }
 
-.preview-content .mermaid-frame.is-dragging {
+.preview-content .mermaid-frame.is-dragging,
+.mermaid-maximized-root .mermaid-frame.is-dragging {
   cursor: grabbing;
   user-select: none;
 }
 
-.preview-content .mermaid-frame svg {
+.preview-content .mermaid-frame svg,
+.mermaid-maximized-root .mermaid-frame svg {
   display: block;
 }
 
@@ -111,7 +124,15 @@ body.mermaid-maximized-open::before {
   backdrop-filter: blur(2px);
 }
 
-.preview-content .mermaid-shell.is-maximized {
+.mermaid-maximized-root {
+  position: fixed;
+  inset: 0;
+  z-index: 171;
+  pointer-events: none;
+}
+
+.preview-content .mermaid-shell.is-maximized,
+.mermaid-maximized-root .mermaid-shell.is-maximized {
   position: fixed;
   inset: var(--space-4);
   z-index: 171;
@@ -122,7 +143,12 @@ body.mermaid-maximized-open::before {
   grid-template-rows: auto minmax(0, 1fr);
 }
 
-.preview-content .mermaid-shell.is-maximized .mermaid-frame {
+.mermaid-maximized-root .mermaid-shell.is-maximized {
+  pointer-events: auto;
+}
+
+.preview-content .mermaid-shell.is-maximized .mermaid-frame,
+.mermaid-maximized-root .mermaid-shell.is-maximized .mermaid-frame {
   max-height: none;
   height: 100%;
 }