@seliseblocks/mailcraft 0.2.6 → 0.2.7

package/src/core/i18n/lt.js

@@ -66,7 +66,7 @@ export const LT = {
     'Pagrįsta sekcijomis: pirmiausia numeskite išdėstymą, tada blokus į jo stulpelius — kiekviena sekcija turi savo foną, kraštinę, flex arba tinklelio nustatymus.',
   'rows.hintStack': 'Laisvas krūvinys: be išdėstymų — kiekvienas numestas blokas tampa savo pilno pločio sekcija, sudėta iš eilės.',
   'files.libraryCount': 'Biblioteka — {count} failų',
-  'files.openManager': 'Atidaryti failų tvarkyklę',
+  'files.openManager': 'Atidaryti medijos biblioteką',
   'files.dragToCanvas': 'Vilkite bet kurį failą tiesiai į drobę, kad jį padėtumėte kaip vaizdo bloką.',
   'layers.structure': 'Struktūra',
   'layers.sectionSingle': 'Sekcija',
@@ -82,7 +82,7 @@ export const LT = {
   'vars.noMatch': 'Nė vienas kintamasis neatitinka šio filtro.',
   'vars.noneDeclared': 'Jūsų programa dar nedeklaravo jokių kintamųjų.',
   'vars.rteHint': 'Redaguodami tekstą taip pat galite pasirinkti kintamąjį tiesiai iš įterptos įrankių juostos išskleidžiamojo meniu.',
-  'modal.fileManager': 'Failų tvarkyklė',
+  'modal.fileManager': 'Medijos biblioteka',
   'modal.assetsTitle': 'Ištekliai',
   'modal.replaceImage': 'Pakeisti vaizdą',
   'library.searchPlaceholder': 'Ieškoti failų…',

package/src/core/i18n/lv.js

@@ -66,7 +66,7 @@ export const LV = {
     'Balstīts uz sadaļām: vispirms nometiet izkārtojumu, tad blokus tā kolonnās — katrai sadaļai ir sava fona, apmales, flex vai režģa iestatījumi.',
   'rows.hintStack': 'Brīva kaudze: bez izkārtojumiem — katrs nomestais bloks kļūst par savu pilna platuma sadaļu, sakrautu secībā.',
   'files.libraryCount': 'Bibliotēka — {count} faili',
-  'files.openManager': 'Atvērt failu pārvaldnieku',
+  'files.openManager': 'Atvērt multivides bibliotēku',
   'files.dragToCanvas': 'Velciet jebkuru failu tieši uz audekla, lai novietotu to kā attēla bloku.',
   'layers.structure': 'Struktūra',
   'layers.sectionSingle': 'Sadaļa',
@@ -82,7 +82,7 @@ export const LV = {
   'vars.noMatch': 'Neviens mainīgais neatbilst šim filtram.',
   'vars.noneDeclared': 'Jūsu lietotne vēl nav deklarējusi nevienu mainīgo.',
   'vars.rteHint': 'Rediģējot tekstu, jūs varat arī izvēlēties mainīgo tieši no iegultās rīkjoslas nolaižamās izvēlnes.',
-  'modal.fileManager': 'Failu pārvaldnieks',
+  'modal.fileManager': 'Multivides bibliotēka',
   'modal.assetsTitle': 'Resursi',
   'modal.replaceImage': 'Aizstāt attēlu',
   'library.searchPlaceholder': 'Meklēt failus…',

package/src/core/i18n/nb.js

@@ -66,7 +66,7 @@ export const NB = {
     'Seksjonsbasert: slipp en layout først, deretter blokker i kolonnene — hver seksjon har egen bakgrunn, kant, flex- eller rutenettinnstillinger.',
   'rows.hintStack': 'Fri stabel: uten layouter — hver blokk du slipper blir sin egen fullbredde-seksjon, stablet i rekkefølge.',
   'files.libraryCount': 'Bibliotek — {count} filer',
-  'files.openManager': 'Åpne filbehandling',
+  'files.openManager': 'Åpne mediebibliotek',
   'files.dragToCanvas': 'Dra en hvilken som helst fil direkte til lerretet for å plassere den som en bildeblokk.',
   'layers.structure': 'Struktur',
   'layers.sectionSingle': 'Seksjon',
@@ -82,7 +82,7 @@ export const NB = {
   'vars.noMatch': 'Ingen variabel samsvarer med dette filteret.',
   'vars.noneDeclared': 'Applikasjonen din har ennå ikke erklært noen variabler.',
   'vars.rteHint': 'Når du redigerer tekst kan du også velge en variabel direkte fra rullegardinmenyen i den innebygde verktøylinjen.',
-  'modal.fileManager': 'Filbehandling',
+  'modal.fileManager': 'Mediebibliotek',
   'modal.assetsTitle': 'Ressurser',
   'modal.replaceImage': 'Erstatt bilde',
   'library.searchPlaceholder': 'Søk i filer…',

package/src/core/i18n/nl.js

@@ -66,7 +66,7 @@ export const NL = {
     'Op secties gebaseerd: plaats eerst een lay-out, sleep dan blokken in de kolommen — elke sectie heeft zijn eigen achtergrond, rand, flex- of gridinstellingen.',
   'rows.hintStack': 'Vrije stapel: zonder lay-outs — elk blok dat je plaatst wordt een eigen sectie over de volle breedte, op volgorde gestapeld.',
   'files.libraryCount': 'Bibliotheek — {count} bestanden',
-  'files.openManager': 'Bestandsbeheer openen',
+  'files.openManager': 'Mediabibliotheek openen',
   'files.dragToCanvas': 'Sleep elk bestand direct naar het canvas om het als afbeeldingsblok te plaatsen.',
   'layers.structure': 'Structuur',
   'layers.sectionSingle': 'Sectie',
@@ -82,7 +82,7 @@ export const NL = {
   'vars.noMatch': 'Geen variabele komt overeen met dit filter.',
   'vars.noneDeclared': 'Jouw applicatie heeft nog geen variabelen gedeclareerd.',
   'vars.rteHint': 'Tijdens het bewerken van tekst kun je ook een variabele kiezen via het dropdownmenu van de inline werkbalk.',
-  'modal.fileManager': 'Bestandsbeheer',
+  'modal.fileManager': 'Mediabibliotheek',
   'modal.assetsTitle': 'Bestanden',
   'modal.replaceImage': 'Afbeelding vervangen',
   'library.searchPlaceholder': 'Bestanden zoeken…',

package/src/core/i18n/pl.js

@@ -66,7 +66,7 @@ export const PL = {
     'Oparty na sekcjach: najpierw upuść układ, potem bloki w jego kolumnach — każda sekcja ma własne tło, obramowanie, ustawienia flex lub siatki.',
   'rows.hintStack': 'Wolny stos: bez układów — każdy upuszczony blok staje się osobną, pełnowymiarową sekcją, ułożoną w kolejności.',
   'files.libraryCount': 'Biblioteka — {count} plików',
-  'files.openManager': 'Otwórz menedżera plików',
+  'files.openManager': 'Otwórz bibliotekę mediów',
   'files.dragToCanvas': 'Przeciągnij dowolny plik bezpośrednio na płótno, aby umieścić go jako blok obrazu.',
   'layers.structure': 'Struktura',
   'layers.sectionSingle': 'Sekcja',
@@ -82,7 +82,7 @@ export const PL = {
   'vars.noMatch': 'Żadna zmienna nie pasuje do tego filtra.',
   'vars.noneDeclared': 'Twoja aplikacja nie zadeklarowała jeszcze żadnych zmiennych.',
   'vars.rteHint': 'Podczas edycji tekstu możesz też wybrać zmienną bezpośrednio z rozwijanego menu paska narzędzi.',
-  'modal.fileManager': 'Menedżer plików',
+  'modal.fileManager': 'Biblioteka mediów',
   'modal.assetsTitle': 'Zasoby',
   'modal.replaceImage': 'Zastąp obraz',
   'library.searchPlaceholder': 'Szukaj plików…',

package/src/core/i18n/pt.js

@@ -66,7 +66,7 @@ export const PT = {
     'Baseado em seções: solte um layout primeiro, depois blocos em suas colunas — cada seção tem seu próprio fundo, borda, configurações flex ou grade.',
   'rows.hintStack': 'Pilha livre: sem layouts — cada bloco que você solta se torna sua própria seção de largura total, empilhada em ordem.',
   'files.libraryCount': 'Biblioteca — {count} arquivos',
-  'files.openManager': 'Abrir gerenciador de arquivos',
+  'files.openManager': 'Abrir biblioteca de mídia',
   'files.dragToCanvas': 'Arraste qualquer arquivo diretamente para a tela para colocá-lo como bloco de imagem.',
   'layers.structure': 'Estrutura',
   'layers.sectionSingle': 'Seção',
@@ -82,7 +82,7 @@ export const PT = {
   'vars.noMatch': 'Nenhuma variável corresponde a esse filtro.',
   'vars.noneDeclared': 'Sua aplicação ainda não declarou nenhuma variável.',
   'vars.rteHint': 'Ao editar texto, você também pode escolher uma variável diretamente no menu da barra de ferramentas em linha.',
-  'modal.fileManager': 'Gerenciador de arquivos',
+  'modal.fileManager': 'Biblioteca de mídia',
   'modal.assetsTitle': 'Recursos',
   'modal.replaceImage': 'Substituir imagem',
   'library.searchPlaceholder': 'Pesquisar arquivos…',

package/src/core/i18n/ro.js

@@ -66,7 +66,7 @@ export const RO = {
     'Bazat pe secțiuni: plasați mai întâi un aspect, apoi blocuri în coloanele sale — fiecare secțiune are propriul fundal, bordură, setări flex sau grilă.',
   'rows.hintStack': 'Stivă liberă: fără aspecte — fiecare bloc plasat devine propria secțiune pe toată lățimea, stivuită în ordine.',
   'files.libraryCount': 'Bibliotecă — {count} fișiere',
-  'files.openManager': 'Deschide managerul de fișiere',
+  'files.openManager': 'Deschide biblioteca media',
   'files.dragToCanvas': 'Trageți orice fișier direct pe canvas pentru a-l plasa ca bloc de imagine.',
   'layers.structure': 'Structură',
   'layers.sectionSingle': 'Secțiune',
@@ -82,7 +82,7 @@ export const RO = {
   'vars.noMatch': 'Nicio variabilă nu corespunde acestui filtru.',
   'vars.noneDeclared': 'Aplicația dvs. nu a declarat încă nicio variabilă.',
   'vars.rteHint': 'În timp ce editați text, puteți alege o variabilă și direct din meniul derulant al barei de instrumente în linie.',
-  'modal.fileManager': 'Manager de fișiere',
+  'modal.fileManager': 'Biblioteca media',
   'modal.assetsTitle': 'Resurse',
   'modal.replaceImage': 'Înlocuiește imaginea',
   'library.searchPlaceholder': 'Căutare fișiere…',

package/src/core/i18n/ru.js

@@ -66,7 +66,7 @@ export const RU = {
     'На основе секций: сначала поместите макет, затем блоки в его колонки — у каждой секции свой фон, граница, настройки flex или сетки.',
   'rows.hintStack': 'Свободный стек: без макетов — каждый добавленный блок становится собственной секцией на всю ширину, уложенной по порядку.',
   'files.libraryCount': 'Библиотека — {count} файлов',
-  'files.openManager': 'Открыть файловый менеджер',
+  'files.openManager': 'Открыть медиатеку',
   'files.dragToCanvas': 'Перетащите любой файл прямо на холст, чтобы разместить его как блок изображения.',
   'layers.structure': 'Структура',
   'layers.sectionSingle': 'Секция',
@@ -82,7 +82,7 @@ export const RU = {
   'vars.noMatch': 'Нет переменных, соответствующих этому фильтру.',
   'vars.noneDeclared': 'Ваше приложение ещё не объявило переменные.',
   'vars.rteHint': 'При редактировании текста вы также можете выбрать переменную прямо из выпадающего списка встроенной панели инструментов.',
-  'modal.fileManager': 'Файловый менеджер',
+  'modal.fileManager': 'Медиатека',
   'modal.assetsTitle': 'Файлы',
   'modal.replaceImage': 'Заменить изображение',
   'library.searchPlaceholder': 'Поиск файлов…',

package/src/core/i18n/sk.js

@@ -66,7 +66,7 @@ export const SK = {
     'Založené na sekciách: najprv umiestnite rozloženie, potom bloky do jeho stĺpcov — každá sekcia má vlastné pozadie, ohraničenie, nastavenia flex alebo mriežky.',
   'rows.hintStack': 'Voľný zásobník: bez rozložení — každý umiestnený blok sa stane vlastnou sekciou na celú šírku, zoradenou postupne.',
   'files.libraryCount': 'Knižnica — {count} súborov',
-  'files.openManager': 'Otvoriť správcu súborov',
+  'files.openManager': 'Otvoriť knižnicu médií',
   'files.dragToCanvas': 'Presuňte ľubovoľný súbor priamo na plátno a umiestnite ho ako obrazový blok.',
   'layers.structure': 'Štruktúra',
   'layers.sectionSingle': 'Sekcia',
@@ -82,7 +82,7 @@ export const SK = {
   'vars.noMatch': 'Žiadna premenná nezodpovedá tomuto filtru.',
   'vars.noneDeclared': 'Vaša aplikácia zatiaľ nedeklarovala žiadne premenné.',
   'vars.rteHint': 'Pri úprave textu môžete premennú vybrať aj priamo z rozbaľovacej ponuky vloženého panela nástrojov.',
-  'modal.fileManager': 'Správca súborov',
+  'modal.fileManager': 'Knižnica médií',
   'modal.assetsTitle': 'Zdroje',
   'modal.replaceImage': 'Nahradiť obrázok',
   'library.searchPlaceholder': 'Hľadať súbory…',

package/src/core/i18n/sl.js

@@ -66,7 +66,7 @@ export const SL = {
     'Temelji na odsekih: najprej spustite postavitev, nato bloke v njene stolpce — vsak odsek ima lastno ozadje, rob, nastavitve flex ali mreže.',
   'rows.hintStack': 'Prosti sklad: brez postavitev — vsak spuščen blok postane lasten odsek čez celo širino, zložen po vrsti.',
   'files.libraryCount': 'Knjižnica — {count} datotek',
-  'files.openManager': 'Odpri upravitelja datotek',
+  'files.openManager': 'Odpri predstavnostno knjižnico',
   'files.dragToCanvas': 'Povlecite katero koli datoteko neposredno na platno, da jo postavite kot slikovni blok.',
   'layers.structure': 'Struktura',
   'layers.sectionSingle': 'Odsek',
@@ -82,7 +82,7 @@ export const SL = {
   'vars.noMatch': 'Nobena spremenljivka ne ustreza temu filtru.',
   'vars.noneDeclared': 'Vaša aplikacija še ni deklarirala nobenih spremenljivk.',
   'vars.rteHint': 'Med urejanjem besedila lahko spremenljivko izberete tudi neposredno iz spustnega menija vgrajene orodne vrstice.',
-  'modal.fileManager': 'Upravitelj datotek',
+  'modal.fileManager': 'Predstavnostna knjižnica',
   'modal.assetsTitle': 'Viri',
   'modal.replaceImage': 'Zamenjaj sliko',
   'library.searchPlaceholder': 'Iskanje datotek…',

package/src/core/i18n/sv.js

@@ -66,7 +66,7 @@ export const SV = {
     'Sektionsbaserad: släpp en layout först, sedan block i dess kolumner — varje sektion har egen bakgrund, kant, flex- eller rutnätsinställningar.',
   'rows.hintStack': 'Fri stapel: utan layouter — varje block du släpper blir sin egen sektion i full bredd, staplad i ordning.',
   'files.libraryCount': 'Bibliotek — {count} filer',
-  'files.openManager': 'Öppna filhanteraren',
+  'files.openManager': 'Öppna mediebiblioteket',
   'files.dragToCanvas': 'Dra valfri fil direkt till canvasen för att placera den som ett bildblock.',
   'layers.structure': 'Struktur',
   'layers.sectionSingle': 'Sektion',
@@ -82,7 +82,7 @@ export const SV = {
   'vars.noMatch': 'Ingen variabel matchar det filtret.',
   'vars.noneDeclared': 'Din applikation har ännu inte deklarerat några variabler.',
   'vars.rteHint': 'När du redigerar text kan du också välja en variabel direkt från rullgardinsmenyn i den inbäddade verktygsfältet.',
-  'modal.fileManager': 'Filhanterare',
+  'modal.fileManager': 'Mediebibliotek',
   'modal.assetsTitle': 'Resurser',
   'modal.replaceImage': 'Ersätt bild',
   'library.searchPlaceholder': 'Sök filer…',

package/src/core/i18n/tr.js

@@ -66,7 +66,7 @@ export const TR = {
     'Bölüm tabanlı: önce bir düzen bırakın, ardından sütunlarına bloklar bırakın — her bölümün kendi arka planı, kenarlığı, flex veya ızgara ayarları vardır.',
   'rows.hintStack': 'Serbest yığın: düzen olmadan — bıraktığınız her blok, sırayla istiflenen kendi tam genişlikteki bölümü haline gelir.',
   'files.libraryCount': 'Kitaplık — {count} dosya',
-  'files.openManager': 'Dosya yöneticisini aç',
+  'files.openManager': 'Medya kitaplığını aç',
   'files.dragToCanvas': 'Görsel blok olarak yerleştirmek için herhangi bir dosyayı doğrudan tuvale sürükleyin.',
   'layers.structure': 'Yapı',
   'layers.sectionSingle': 'Bölüm',
@@ -82,7 +82,7 @@ export const TR = {
   'vars.noMatch': 'Bu filtreyle eşleşen değişken yok.',
   'vars.noneDeclared': 'Uygulamanız henüz herhangi bir değişken tanımlamadı.',
   'vars.rteHint': 'Metni düzenlerken, satır içi araç çubuğunun açılır menüsünden doğrudan bir değişken de seçebilirsiniz.',
-  'modal.fileManager': 'Dosya yöneticisi',
+  'modal.fileManager': 'Medya kitaplığı',
   'modal.assetsTitle': 'Varlıklar',
   'modal.replaceImage': 'Görseli değiştir',
   'library.searchPlaceholder': 'Dosyaları ara…',

package/src/core/i18n/uk.js

@@ -66,7 +66,7 @@ export const UK = {
     'На основі секцій: спочатку розмістіть макет, потім блоки в його колонках — кожна секція має власний фон, межу, налаштування flex або сітки.',
   'rows.hintStack': 'Вільний стек: без макетів — кожен доданий блок стає власною секцією на всю ширину, укладеною по порядку.',
   'files.libraryCount': 'Бібліотека — {count} файлів',
-  'files.openManager': 'Відкрити файловий менеджер',
+  'files.openManager': 'Відкрити медіатеку',
   'files.dragToCanvas': 'Перетягніть будь-який файл прямо на полотно, щоб розмістити його як блок зображення.',
   'layers.structure': 'Структура',
   'layers.sectionSingle': 'Секція',
@@ -82,7 +82,7 @@ export const UK = {
   'vars.noMatch': 'Немає змінних, що відповідають цьому фільтру.',
   'vars.noneDeclared': 'Ваш застосунок ще не оголосив жодних змінних.',
   'vars.rteHint': 'Під час редагування тексту ви також можете вибрати змінну прямо з випадного списку вбудованої панелі інструментів.',
-  'modal.fileManager': 'Файловий менеджер',
+  'modal.fileManager': 'Медіатека',
   'modal.assetsTitle': 'Файли',
   'modal.replaceImage': 'Замінити зображення',
   'library.searchPlaceholder': 'Пошук файлів…',

package/src/core/icons.js

@@ -235,3 +235,4 @@ export function socialKey(label) {
   if (l.includes('mail') || l.includes('email')) return 'mail';
   return 'globe';
 }
+

package/src/core/sanitize.js

@@ -131,6 +131,40 @@ export const cssUrl = (u) => {
   return raw.replace(/["'()\\]|\s/g, (c) => CSS_URL_ESCAPE[c] || '%20');
 };
 
+/**
+ * A link target on its way into an anchor. Two jobs, and both of them showed
+ * up as "the link does not work" rather than as anything that errors:
+ *
+ *   - A bare host (`selise.ch`, `www.selise.ch/pricing`) gets `https://`.
+ *     Typed with no scheme it is a *relative* URL, so the mail client
+ *     resolves it against its own origin and the click lands nowhere -- the
+ *     single most common way an authored link ships broken, and invisible in
+ *     the editor because the canvas never follows it.
+ *   - Schemes are allowlisted the way `cssUrl` allowlists image sources, so
+ *     `javascript:` resolves to nothing instead of becoming a click target.
+ *
+ * Left exactly as typed: anything already carrying an allowed scheme, an
+ * in-page `#anchor`, a rooted `/path`, and anything opening with a merge tag
+ * -- `{{ResetUrl}}` is a whole URL the host substitutes later, so prefixing
+ * it would corrupt what reaches the template engine. A bare `name@host.tld`
+ * becomes `mailto:`, which is the only thing it could have meant.
+ */
+export const linkHref = (u) => {
+  const raw = String(u == null ? '' : u).trim();
+  if (!raw) return '';
+  const scheme = raw.match(/^([a-z][a-z0-9+.-]*):/i);
+  if (scheme) {
+    if (/^(https?|mailto|tel)$/i.test(scheme[1])) return raw;
+    // `selise.ch:8080/x` matches the scheme shape but is a host and a port;
+    // it falls through to be prefixed rather than dropped.
+    if (!/^[a-z][a-z0-9+.-]*:\d/i.test(raw)) return '';
+  }
+  if (raw.startsWith('//')) return 'https:' + raw;
+  if (/^[#/]/.test(raw) || raw.startsWith('{{')) return raw;
+  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(raw)) return 'mailto:' + raw;
+  return 'https://' + raw;
+};
+
 export const escHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
 /** Minimal HTML syntax highlighter for the code view. */

package/src/mailcraft-editor.js

@@ -6,6 +6,7 @@ import { renderDoc } from './render/canvas.js';
 import { renderRte } from './render/rte.js';
 import { renderField, renderFieldCards, typeCommit } from './render/fields.js';
 import { icon } from './core/icons.js';
+import { brandLockup } from './core/brand.js';
 import { TOKEN } from './core/variables.js';
 import { hl, cssUrl } from './core/sanitize.js';
 import { decorateLogicTags } from './core/export.js';
@@ -494,7 +495,15 @@ export class MailCraftEditor extends ElementBase {
   async copyScreenshot(blob) {
     const t = this.core.t;
     try {
-      const png = blob || await this.screenshotPng();
+      // Safari only honours `clipboard.write()` while the user gesture is
+      // still live, and awaiting the capture first (per-image fetch +
+      // inline, decode, rasterize, PNG encode) always outlives it --
+      // NotAllowedError on every attempt, where Chromium is lenient and
+      // lets it through. Handing ClipboardItem the *promise* is the
+      // supported shape for exactly this: the write is issued
+      // synchronously with the gesture and the capture resolves inside
+      // it. Chromium accepts the same form, so there is no branch here.
+      const png = blob ? Promise.resolve(blob) : this.screenshotPng();
       await navigator.clipboard.write([new ClipboardItem({ 'image/png': png })]);
       this.core.flash(t('toast.pngCopied'));
     } catch {
@@ -569,15 +578,11 @@ export class MailCraftEditor extends ElementBase {
     const t = this.core.t;
     const header = elS('header', "display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--ed-line); background: linear-gradient(to bottom, var(--ed-panel), var(--ed-panel-2)); position: relative; z-index: 30;", { class: 'mc-header' });
 
-    const brandMark = elS('span', '', { class: 'mc-brand-mark' });
-    const markSvg = icon('mailSpark', 20);
-    markSvg.setAttribute('stroke-width', '1.8');
-    brandMark.appendChild(markSvg);
-    const brand = elS('div', 'display: flex; align-items: center; gap: 9px;');
-    brand.append(
-      brandMark,
-      elS('span', 'font-family: var(--ed-font); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; line-height: 1;', { text: 'MailCraft', class: 'mc-brand-name' }),
-    );
+    // The logo itself, not a mark beside a typeset word: the wordmark is part
+    // of the artwork, so it keeps the brand's own typeface whatever font the
+    // host pushes into --ed-font.
+    const brand = elS('div', 'display: flex; align-items: center;', { class: 'mc-brand' });
+    brand.appendChild(brandLockup(30));
     if (on.logo) header.append(brand, elS('div', 'width: 1px; height: 22px; background: var(--ed-line);'));
 
     this.savedLabel = elS('span', 'display: flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-faint); white-space: nowrap;');
@@ -1224,6 +1229,11 @@ export class MailCraftEditor extends ElementBase {
       tile.addEventListener('mouseleave', () => { tile.style.borderColor = 'var(--ed-line)'; });
       tile.addEventListener('dragstart', this.core.startDrag({ kind: 'asset', assetId: a.id }));
       tile.addEventListener('dragend', () => { this.core.drag = null; this.core.setState({ drop: null, rowDrop: null }); });
+      // Touch Safari never fires HTML5 drag events, so drag alone left
+      // these tiles unusable on iOS. Click is the same fallback the
+      // library modal's tiles already carry; a completed drag ends in
+      // `dragend`, not `click`, so the two do not both fire.
+      tile.addEventListener('click', () => this.core.useAsset(a));
       tile.appendChild(elS('div', `width: 100%; height: 64px; background-image: url("${a.url}"); background-size: cover; background-position: center; background-color: var(--ed-work);`, { role: 'img', 'aria-label': a.name }));
       tile.appendChild(elS('div', 'font-family: ui-monospace, monospace; font-size: 9px; color: var(--ed-muted); padding: 4px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;', { text: a.name }));
       grid.appendChild(tile);

package/src/render/block-body.js

@@ -1,6 +1,7 @@
 import { icon, brandIcon, socialKey, SOCIAL_BRAND, contrastInk } from '../core/icons.js';
 import { pad } from '../core/layout-style.js';
 import { parseItems, cellsOf } from '../core/parse.js';
+import { linkHref } from '../core/sanitize.js';
 
 function el(tag, style, attrs) {
   const node = document.createElement(tag);
@@ -77,12 +78,17 @@ export function blockBody(b, theme, live, ctx) {
     }
     case 'image': {
       const wrap = el('div', { padding: pad(p), textAlign: p.align, fontSize: '0' }, attr);
-      if (p.href) {
+      const imgHref = linkHref(p.href);
+      if (imgHref) {
         // The % width must live on the anchor, not the img: a percentage on a
         // child of a shrink-to-fit inline-block resolves against the image's
         // own intrinsic size (i.e. not at all), which rendered every linked
         // logo/icon at full intrinsic width no matter what `width` said.
-        const a = el('a', { display: 'inline-block', width: p.width + '%' }, { href: p.href });
+        const a = el('a', { display: 'inline-block', width: p.width + '%' }, { href: imgHref });
+        // Same guard as every other anchor the canvas draws: without it a
+        // click on a linked logo navigates the host application away from the
+        // editor, taking the uncommitted document with it.
+        a.addEventListener('click', (e) => e.preventDefault());
         a.appendChild(el('img', { width: '100%', borderRadius: p.radius + 'px', display: 'block', border: '0' }, { src: p.src, alt: p.alt }));
         wrap.appendChild(a);
       } else {
@@ -100,7 +106,7 @@ export function blockBody(b, theme, live, ctx) {
         // email pattern; the color falls back to the label color so a bare
         // "outline thickness" bump looks right without a second step.
         border: p.borderW ? p.borderW + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.borderColor || p.color) : '0',
-      }, { href: p.href, ...editableAttrs(live), text: p.label });
+      }, { href: linkHref(p.href), ...editableAttrs(live), text: p.label });
       a.addEventListener('click', (e) => e.preventDefault());
       // Button editing is deliberately plain: no focus-tracked `editing` state, no
       // paste handling, no floating RTE toolbar -- only its label commits on blur.
@@ -139,7 +145,7 @@ export function blockBody(b, theme, live, ctx) {
           borderRadius: shape === 'circle' ? '50%' : shape === 'square' ? Math.round(box * 0.28) + 'px' : '0',
           color: iconColor, background: badge ? source : 'transparent',
           border: shape === 'outline' ? '1px solid ' + source : '0',
-        }, { href: it.href, title: it.label });
+        }, { href: linkHref(it.href), title: it.label });
         a.addEventListener('click', (e) => e.preventDefault());
         let provided = null;
         if (ctx && ctx.iconProvider) { try { provided = ctx.iconProvider(key, { label: it.label, size: p.size, color: iconColor }); } catch { provided = null; } }
@@ -154,7 +160,7 @@ export function blockBody(b, theme, live, ctx) {
     }
     case 'video': {
       const wrap = el('div', { padding: '4px 0', textAlign: 'center' }, attr);
-      const a = el('a', { display: 'block', position: 'relative' }, { href: p.href });
+      const a = el('a', { display: 'block', position: 'relative' }, { href: linkHref(p.href) });
       a.addEventListener('click', (e) => e.preventDefault());
       a.appendChild(el('img', { width: '100%', display: 'block', border: '0' }, { src: p.src, alt: p.caption }));
       const badge = el('span', { position: 'absolute', inset: '0', display: 'flex', alignItems: 'center', justifyContent: 'center' });
@@ -197,7 +203,7 @@ export function blockBody(b, theme, live, ctx) {
     case 'menu': {
       const wrap = el('div', { textAlign: p.align, padding: '10px 0' }, attr);
       parseItems(p.items).forEach((it) => {
-        const a = el('a', { color: p.color, fontSize: p.size + 'px', fontFamily: p.fontFamily || t.font, textDecoration: 'none', margin: '0 ' + p.gap / 2 + 'px', letterSpacing: '0.12em', textTransform: 'uppercase' }, { href: it.href, text: it.label });
+        const a = el('a', { color: p.color, fontSize: p.size + 'px', fontFamily: p.fontFamily || t.font, textDecoration: 'none', margin: '0 ' + p.gap / 2 + 'px', letterSpacing: '0.12em', textTransform: 'uppercase' }, { href: linkHref(it.href), text: it.label });
         a.addEventListener('click', (e) => e.preventDefault());
         wrap.appendChild(a);
       });

package/src/render/canvas.js

@@ -231,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; }