@seliseblocks/mailcraft 0.2.5 → 0.2.7

package/src/render/canvas.js

@@ -186,6 +186,8 @@ export function renderDoc(core, live) {
     // Same contract for the full content-area border: set only when asked,
     // so the chrome's own subtle frame keeps marking the sheet otherwise.
     border: borderW ? borderW + 'px ' + (theme.borderStyle || 'solid') + ' ' + (theme.borderColor || '#e2e2e5') : '',
+    // And for the canvas-wide drop shadow -- unset keeps the chrome's own.
+    boxShadow: theme.shadow || '',
     // Clipping the rows to that corner is right for the sent email (export
     // emits `overflow:hidden` alongside the radius) and for the static
     // preview, but not for the editable canvas: the sheet is also what the
@@ -229,7 +231,11 @@ export function renderDoc(core, live) {
       showLine(rowDropTracker, rowLines[index]);
     });
     page.addEventListener('dragleave', (e) => { if (e.target === root || e.target === page) hideActive(rowDropTracker); });
-    page.addEventListener('drop', (e) => { hideActive(rowDropTracker); core.canvasDrop(e); });
+    // Measured against `root`, exactly as the line above it was: the slots are
+    // the sheet's children, not the page's, and deriving the index a second
+    // time from the event's own target is what used to send every dropped
+    // section to index 0 while the line sat where the pointer actually was.
+    page.addEventListener('drop', (e) => { hideActive(rowDropTracker); core.canvasDrop(e, core.indexFromPoint(root, e.clientY)); });
   }
 
   d.rows.forEach((r, ri) => {

package/src/render/fields.js

@@ -1,5 +1,6 @@
 import { icon, brandIcon, socialKey, SOCIAL_BRAND, contrastInk } from '../core/icons.js';
 import { parseItems } from '../core/parse.js';
+import { linkHref } from '../core/sanitize.js';
 
 function el(tag, style, attrs) {
   const node = document.createElement(tag);
@@ -226,7 +227,14 @@ function renderRichLinks(f) {
     const urlCommit = typeCommit((v) => change(i, (a) => a.setAttribute('href', v)));
     url.addEventListener('input', (e) => urlCommit.call(e.target.value));
     url.addEventListener('focus', () => { url.style.borderColor = 'var(--ed-accent)'; url.style.outline = 'none'; });
-    url.addEventListener('blur', () => { url.style.borderColor = 'var(--ed-line)'; urlCommit.flush(); });
+    url.addEventListener('blur', () => {
+      url.style.borderColor = 'var(--ed-line)';
+      // Scheme normalization happens on the way out, never per keystroke: a
+      // half-typed "h" rewritten to "https://h" under the caret is unusable.
+      url.value = linkHref(url.value);
+      urlCommit.call(url.value);
+      urlCommit.flush();
+    });
 
     const targetLabel = el('label', { display: 'flex', alignItems: 'center', gap: '6px', marginTop: '7px', width: 'fit-content', color: 'var(--ed-muted)', cursor: 'pointer', fontFamily: 'var(--ed-font)', fontSize: '10.5px', fontWeight: '500' });
     const target = el('input', { accentColor: 'var(--ed-accent)', cursor: 'pointer' }, { type: 'checkbox', 'data-focus-key': `f${f.key}-link-target-${i}` });

package/src/render/screenshot.js

@@ -124,9 +124,20 @@ export const captureTemplatePng = async function (core, mountInto, scale = 2) {
       img.onerror = () => reject(new Error('SVG rasterization failed'));
       img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
     });
+    // WebKit fires `load` on an SVG-as-image before it is reliably
+    // drawable, and drawing on that tick yields a blank or half-laid-out
+    // frame. Same `decode()` guard the inner images get above.
+    if (img.decode) await img.decode().catch(() => {});
+    // Safari caps total canvas area, and past the cap it hands back a
+    // *blank* canvas that still encodes successfully -- a silently empty
+    // PNG with nothing thrown to catch. Long newsletters reach it easily
+    // at 2x (a 680x4000 template is 10.9M device pixels). Scale the
+    // capture down to fit instead of returning an empty image.
+    const MAX_CANVAS_AREA = 16e6;
+    const fit = Math.min(scale, Math.sqrt(MAX_CANVAS_AREA / Math.max(1, w * h)));
     const canvas = document.createElement('canvas');
-    canvas.width = Math.max(1, Math.round(w * scale));
-    canvas.height = Math.max(1, Math.round(h * scale));
+    canvas.width = Math.max(1, Math.round(w * fit));
+    canvas.height = Math.max(1, Math.round(h * fit));
     const ctx = canvas.getContext('2d');
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
     return await new Promise((resolve, reject) => {

package/src/render/style.js

@@ -23,6 +23,10 @@ export const STYLE = `
   /* The accent as it must read on the email sheet, which is a white page in
      both themes -- so this family does NOT flip with the chrome (see the dark
      palette below, where it is deliberately not overridden). */
+  /* Logo ink. Deliberately literal rather than accent-derived: the host can
+     repaint the chrome through the brand attribute, and a logo that follows
+     it stops being the logo. Values are the official light artwork. */
+  --ed-logo-mark: #2D86C7; --ed-logo-text: #3C3939;
   --ed-accent-sheet: #0065b3; --ed-accent-sheet-strong: #004f8c; --ed-accent-sheet-ink: #ffffff;
   --ed-accent-sheet-line: rgba(0,101,179,0.5);
   --ed-grid: rgba(71,85,105,0.10);
@@ -43,6 +47,8 @@ export const STYLE = `
   --ed-panel-label: #e2e8f0; --ed-panel-value: #c0cad8; --ed-panel-meta: #8d9aae;
   --ed-accent: #58a8e3; --ed-accent-strong: #8fc4ec; --ed-accent-ink: #08111f; --ed-soft: rgba(88,168,227,0.13);
   --ed-accent-tint: #8fcdf2; --ed-glow: rgba(88,168,227,0.28); --ed-select: rgba(88,168,227,0.3);
+  /* The official dark-mode logo artwork: mark and wordmark both go light. */
+  --ed-logo-mark: #F2F2F2; --ed-logo-text: #EEEEEE;
   --ed-grid: rgba(148,163,184,0.08);
   --ed-danger: #f2777c; --ed-danger-soft: rgba(242,119,124,0.14);
   --ed-success: #4ade95; --ed-success-soft: rgba(74,222,149,0.14);
@@ -151,14 +157,9 @@ export const STYLE = `
 .mc-footer-link { cursor: pointer; transition: color 0.14s ease; }
 .mc-footer-link:hover { color: var(--ed-accent); text-decoration: underline; }
 
-/* Brand mark -- the small gradient envelope glyph in the header. */
-.mc-brand-mark {
-  display: flex; align-items: center; justify-content: center; flex: none;
-  width: 26px; height: 26px; border-radius: 8px;
-  background: linear-gradient(145deg, var(--ed-accent-tint), var(--ed-accent) 55%, var(--ed-accent-strong));
-  box-shadow: 0 5px 14px var(--ed-glow);
-  color: #ffffff;
-}
+/* The header logo. It is the official lockup artwork, so it gets no chip, no
+   gradient and no recolouring -- only a height. */
+.mc-brand { display: flex; align-items: center; flex: none; }
 
 /*
  * Shared segmented-control shell -- one bordered/backed track that owns the
@@ -269,9 +270,7 @@ export const STYLE = `
 /* Opaque, no backdrop-filter: the header sits over the scrolling canvas, so a
    backdrop blur re-composites every scroll frame -- visible scroll jank. */
 #mc .mc-header { padding: 0 18px !important; background: var(--ed-panel) !important; }
-#mc .mc-brand-mark { width: 30px !important; height: 30px !important; border-radius: 9px; background: linear-gradient(145deg, var(--ed-accent-tint), var(--ed-accent) 56%, var(--ed-accent-strong)) !important; box-shadow: 0 7px 18px var(--ed-glow); }
-#mc .mc-brand-mark svg { width: 20px; height: 20px; display: block; color: #fff; }
-#mc .mc-brand-name { font-family: var(--ed-font) !important; font-size: 17px !important; letter-spacing: -.03em !important; }
+#mc .mc-brand svg { height: 34px; width: auto; display: block; }
 #mc .mc-header button { font-family: var(--ed-font) !important; font-size: 10.5px !important; font-weight: 600; letter-spacing: .015em !important; text-transform: none !important; }
 #mc .mc-header > div { border-radius: 10px; }
 #mc .mc-segment { gap: 3px !important; padding: 3px !important; border: 0 !important; border-radius: 10px; background: var(--ed-panel-2) !important; }
@@ -304,6 +303,10 @@ export const STYLE = `
 #mc .mc-inspector .mc-section-body { padding: 12px 14px 16px !important; }
 #mc .mc-inspector .mc-section-body > :first-child { margin-top: 0 !important; }
 #mc .mc-field-list { display: grid; align-content: start; gap: 12px; }
+/* The author display:grid above beats the UA rule [hidden]{display:none},
+   which is exactly how the accordion silently stopped collapsing: the bar
+   toggled the hidden attribute and the grid stayed painted. Hidden wins. */
+#mc .mc-field-list[hidden], #mc .mc-section-body[hidden] { display: none !important; }
 #mc .mc-field-list .mc-field { min-width: 0; }
 #mc .mc-field-list .mc-field-row {
   display: grid !important; grid-template-columns: minmax(0, 1fr) 168px;