mnfst 0.5.233 → 0.5.235

package/lib/manifest.appwrite.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.233';
+const MANIFEST_BUILD_VERSION = '0.5.235';
 
 /* Manifest Data Sources - Appwrite Integration */
 

package/lib/manifest.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.233';
+const MANIFEST_BUILD_VERSION = '0.5.235';
 
 /* Manifest Data Sources - Configuration */
 

package/lib/manifest.edit.js

@@ -186,6 +186,14 @@
     }
     const sanitizeFor = (el, html) => !window.ManifestRichText ? sanitizeHTML(html)
         : authoredRich(el) ? window.ManifestRichText.sanitize(html, true, true) : leafClean(html, el);
+    // Text written into an element. A leaf shows exactly what is logged; a rich field owns its markup:
+    // it is written only when it differs as logged, then settles (keeping its editing affordances)
+    function writeText(el, html) {
+        const safe = sanitizeFor(el, html);
+        if (el.innerHTML === safe || (authoredRich(el) && sanitizeFor(el, el.innerHTML.trim()) === safe)) return;
+        el.innerHTML = safe;
+        if (el._rt && typeof el._rt.settle === 'function') el._rt.settle();
+    }
 
     function sanitizeHTML(html) {
         const t = document.createElement('template'); t.innerHTML = String(html == null ? '' : html);
@@ -529,7 +537,7 @@
                 const base = area._baseText || {}, baseC = area._baseClass || {}, baseS = area._baseStyle || {};
                 const pick = (prop, fallback) => iv[prop] !== undefined ? iv[prop] : (mv[prop] !== undefined ? mv[prop] : fallback);
                 const text = pick('text', base[p]), cls = pick('class', baseC[p]), sty = pick('style', baseS[p]);
-                if (text !== undefined) { const safe = sanitizeFor(el, text); if (el.innerHTML !== safe) el.innerHTML = safe; }
+                if (text !== undefined) writeText(el, text);
                 if (cls !== undefined) writeClass(el, cls);
                 if (sty !== undefined && el.getAttribute('style') !== sty) { if (sty === '') el.removeAttribute('style'); else el.setAttribute('style', sty); }
             });
@@ -540,7 +548,7 @@
         if (path == null) return false;
         if (prop === 'text') value = sanitizeFor(el, value);
         if (before === undefined) before = prop === 'text' ? el._preEdit : prop === 'style' ? el._preStyle : el._preClass;
-        if (before === value) return false;
+        if (before === value || (prop === 'text' && before != null && sanitizeFor(el, before) === value)) return false;
         const sig = nodeSig(el);
         pushDelta(scope === 'main' ? { kind: 'cmp-main', component, path, prop, value, before, sig, region } : { kind: 'cmp-inst', component, region, path, prop, value, before, sig });
         applyComponentState();
@@ -640,7 +648,7 @@
 
     function applyStaticProp(el, prop, v) {
         if (v === undefined) return;
-        if (prop === 'text') { const safe = sanitizeFor(el, v); if (el.innerHTML !== safe) el.innerHTML = safe; return; }
+        if (prop === 'text') return writeText(el, v);
         if (attrRefusal(prop, v, el.tagName)) return;
         if (prop === 'class') return writeClass(el, v);
         if (prop === 'style') return writeStyle(el, v);
@@ -862,8 +870,9 @@
             const pre = prop === 'text' ? el._preEdit : prop === 'class' ? el._preClass : prop === 'style' ? el._preStyle : undefined;
             before = pre !== undefined ? pre : fallback;
         }
-        if (before === value) return false;
-        if (prop === 'text' && document.activeElement !== el && el.innerHTML.trim() !== value) el.innerHTML = value;
+        if (before === value || (prop === 'text' && before != null && sanitizeFor(el, before) === value)) return false;
+        // A rich field owns its markup: the logged value is never written back into it
+        if (prop === 'text' && document.activeElement !== el && !authoredRich(el)) writeText(el, value);
         const last = log[cursor - 1];
         if (opts.coalesce && last && cursor === log.length && last.kind === 'st-node' && last.region === region && last.path === path && last.prop === prop && Date.now() - (stamps.get(last) || 0) < COALESCE_MS) {
             if (last.before === value) { log.pop(); cursor--; } else { last.value = value; stamps.set(last, Date.now()); }
@@ -901,7 +910,7 @@
         value = String(value);
         if (el && el._editRich) value = sanitizeFor(el, value);
         const before = el ? el._preEdit : undefined;
-        if (before === value) return false;
+        if (before === value || (el && el._editRich && before != null && sanitizeFor(el, before) === value)) return false;
         pushDelta({ kind: 'data-val', region: key(area), source, id, field, value, before });
         applyDataValues();
         return true;
@@ -2050,7 +2059,7 @@
         area.querySelectorAll('[data-rich-text]:not([data-rich-text-bound])').forEach(el => {
             if (el._editRt || !capOf(el, 'text') || !/^[@~]/.test(el.getAttribute('data-edit-key') || '')) return;
             if (el._richBound) return; el._richBound = true;
-            el.addEventListener('focusin', () => { el._preEdit = el.innerHTML.trim(); });
+            el.addEventListener('focusin', () => { el._preEdit = leafText(el); });
             el.addEventListener('blur', () => {
                 const a = regionOf(el) || area;   // the region the element sits in NOW, not where it was armed
                 const commit = classify(a) === 'component' ? commitComponentNode : commitStaticNode;
@@ -2307,12 +2316,25 @@
         el._cssvar.persist = !!(modifiers && modifiers.includes('persist'));
         cssvarControls.add(el);
     }
+    // A colour input takes #rrggbb only: any CSS colour (a theme's oklch(), var() resolved) is read off a canvas pixel
+    let colorCanvas = null;
+    function hexColor(v) {
+        if (/^#[0-9a-f]{6}$/i.test(v)) return v.toLowerCase();
+        try {
+            colorCanvas = colorCanvas || document.createElement('canvas');
+            const g = colorCanvas.getContext && colorCanvas.getContext('2d', { willReadFrequently: true });
+            if (!g) return null;
+            const probe = document.createElement('i'); probe.style.color = v; if (!probe.style.color) return null;
+            g.clearRect(0, 0, 1, 1); g.fillStyle = '#000'; g.fillStyle = v; g.fillRect(0, 0, 1, 1);
+            return '#' + [...g.getImageData(0, 0, 1, 1).data.slice(0, 3)].map(x => x.toString(16).padStart(2, '0')).join('');
+        } catch { return null; }
+    }
     function syncCssVarInput(el) {
         const cv = el._cssvar; if (!cv || !('value' in el)) return;
         const cur = getComputedStyle(themeTargetEl(cv.scope)).getPropertyValue(cv.var).trim();
         if (!cur) return;
-        const next = el.dataset.unit ? String(parseFloat(cur)) : cur;
-        if (el.value !== next) el.value = next;
+        const next = el.type === 'color' ? hexColor(cur) : el.dataset.unit ? String(parseFloat(cur)) : cur;
+        if (next != null && el.value !== next) el.value = next;
     }
     function armCssVar(el) {
         const cv = el._cssvar; if (!cv || !cv.var) return;
@@ -2922,7 +2944,8 @@
        ancestor opts it out. Text that is still being typed keeps the browser's own
        undo until it commits on blur; fields and x-rich-text keep theirs always. A leaf
        on Rich Text uses Rich Text's history while it has steps (richHistoryKey). */
-    const leafText = (el) => el._editField && !el._editRich ? el.textContent : el._editRt ? sanitizeFor(el, el.innerHTML.trim()) : el.innerHTML.trim();
+    // Text as it would be logged: every baseline and comparison goes through the same sanitizer
+    const leafText = (el) => el._editField && !el._editRich ? el.textContent : sanitizeFor(el, el.innerHTML.trim());
     const hotkeysOff = (el) => !!el.closest('[data-edit-hotkeys="off"]');
     // A focused leaf's baseline follows history rewrites under the caret.
     function rebaseFocused() {

package/lib/manifest.integrity.json

@@ -1,6 +1,6 @@
 {
   "manifest.appwrite.auth.js": "sha384-dsIWnH0qCAGSzAXMGrd8fvOrVl4tOIE6j5tC35JPTrQXZ56qLD36ARyvhR7vi3Id",
-  "manifest.appwrite.data.js": "sha384-ovIuPS7AiQP/dP+NHcF9QaB3YK3dlqOLWN9pYX/RHofc2PLrZZuDjfEFiyNReuBu",
+  "manifest.appwrite.data.js": "sha384-U1jsUuWiDJM4Gis+q87cyGQMA+iyShm2cxBTZNhdQLXDLjZoxO5KomiRzUTdBZDF",
   "manifest.appwrite.presences.js": "sha384-JyVDWFT69b7Svq8J8p9tNWe2v9PZNQBY5UyhtOl1vnuHFAX0CRQ3MA9SiKq5wzNh",
   "manifest.bindings.js": "sha384-lPtMf8Ykaic9gNVZKq8Scia1881ZeMAyxer3WCIkUNwwrgzGBWto1OXADUwjvORF",
   "manifest.charts.js": "sha384-gEAv/98+29RbhvNkiNWTNyBPbLTFr2Ld15wLu29FLCL57j1cwGChRrL9Pfk7dBtT",
@@ -11,24 +11,24 @@
   "manifest.combobox.js": "sha384-MILTkrgsTzsYUjGo4ZuADqV85Xs4GmfB4xexfe9vbJMIoQTZ42W4zs+DTaVSPEsx",
   "manifest.components.js": "sha384-JalISaBBWNFl3ggx92Hb3B52EpwwG3gzgra6Q+js0OgZ8vrFKMD48CuBox2N9A5T",
   "manifest.computed.js": "sha384-GYML/e81gQfN+iDbqhPUgny8bINCyL+SrbTofoGk4hlCnLLjv51mCv42JMqq+ku5",
-  "manifest.data.js": "sha384-cemls8IyDcg61WdlIOT60HmQS7aCef4ifwqnXfw7kA6Jp5D2PdXazWRRzR6QHx10",
+  "manifest.data.js": "sha384-HwDBkbNBxPVfBam7Y2jBi6DmDokw+Lw1OnHQZRM1LB6RKMxMKsUWAMzuEx86LaAJ",
   "manifest.datepicker.js": "sha384-XnbeURni2X91ozVzatQcSjYYIS4MoW12dBRJnYAGBr0nCQ624heH5s+xtQSpLZX6",
   "manifest.defer.js": "sha384-pMRGqQKiEoJhpUcD40QeM4jEHau7sz9Xn/YCpiUamT1T4xJBZDSiYX+xnVrSWoq+",
   "manifest.device.js": "sha384-g+txmrEszYtuOvRelTp/c1wSNR2AtllVI9rx5NPPD7DzhVUnMNughonZykv2xlBW",
   "manifest.dropdowns.js": "sha384-acufUps7R9WjqB4XXW5JLACqniuHJGM4CNTb2rF4B2Q/jv7ZRmsAwfr2McanOz3s",
-  "manifest.edit.js": "sha384-bOvEFgjau1t30LPHKBGkcJ3jH8tRUy1k8qpyYs8GbB6gUJ/R9JQCzeaF5fsKlzu3",
+  "manifest.edit.js": "sha384-XUtJ+EXXYh+5afgYuVpXurjvylSP/o72Y4mQR5wxdkIFQ/NDFBVvRFAfbPXMInZc",
   "manifest.export.js": "sha384-Rx6XvqBZc4apzP/FwcDr6yIln4/zNa08Q4ZqBZcEqUz1aNZQfl4h0+Ae7mqCQyuG",
   "manifest.icons.js": "sha384-kKOINpX70YzNO3FvkV6umrmO3f0KIu0DNbwB+ej55a7y/lhU7v/myQtXL0bwCTbt",
   "manifest.localization.js": "sha384-EImsIw8Z3l13V5eH9ZJF/yfsOfIvR1oPRNSArANkPji7V8O3IRf6zMwsNiAGj3Hk",
   "manifest.markdown.js": "sha384-heyDR40LXHaAmAuA+fa381uFwShk1oAqpFFY6E2Qq4T3VN0TQfRqyc++MF40K5Hj",
   "manifest.native.js": "sha384-g+txmrEszYtuOvRelTp/c1wSNR2AtllVI9rx5NPPD7DzhVUnMNughonZykv2xlBW",
   "manifest.payments.js": "sha384-8pofk2zhxtapPMpwnFyTelPMrYhShNhDCE722uQh/EYFvZFuPLmSdgunqsarVQjv",
-  "manifest.rich.text.js": "sha384-QpPHG4uWjJSJoTPY8yOtoIFoVmHbuYPhtghBU0gc2l0PJBc25cNPuNcD4+55Qv3i",
+  "manifest.rich.text.js": "sha384-SeqwIXW01/FD39kMHLjCMaFKheVK/JxHOR/eDkePhvgaFH8Rl2y3mzZoqHuu8UH8",
   "manifest.router.js": "sha384-QkKhRaCbdXEOxhj+ojT4jeLUCtQepBnqP+QWTIWdb6kUWD+mVzPN8hf6jhgschpW",
   "manifest.slides.js": "sha384-3uRTkyK9XPLmnxI2+igZlpi4EyPlU/7IHj5j3BZJJ2KN455vXyk99fiXV3feO/XY",
   "manifest.status.js": "sha384-MBO345ab7H6Uq1X2dZLt4Ge1Gcra+Z2qYApvlAeIV8CJhDDJrz2FPXpp+Kcp8zcM",
   "manifest.svg.js": "sha384-qr/8H9+2cIhSXNbRWRtIdrDlTOxKlNJqwEefHvCYoiBNW/kKhPTFa109Orv/EBnb",
-  "manifest.sw.js": "sha384-vXYxaf8oKd2LT8C9xRmFmEXhh0qDLv0set07o/hI4hkOvpS+CTDdC5UNECLRrSWa",
+  "manifest.sw.js": "sha384-V+o5XeR3JaL7nGLhtZ14cymUmbx61S2nigZDlkLMr9rD6Ni2A0cVMDrmP+wNr26o",
   "manifest.tabs.js": "sha384-OIIcyaQnGS0eNYk4zgAFEDboNYect7THvUd9D0V6nqCeDOxQcoiqLrBEmmWVTTet",
   "manifest.tailwind.js": "sha384-r/Jvqb+Piz21jUts10BbVAJoKkShOdJRVFpywyi4HPIi/OfOJq5CtPyWAPbdkMgt",
   "manifest.toasts.js": "sha384-3zkWxzw693pxg3QDFsoYCA3CqYaLKmBaMArULXODD66Utolpewl0OAeTB92aWUVv",

package/lib/manifest.rich.text.js

@@ -92,18 +92,14 @@
         if (n.nodeType !== 1) return textEdge(last ? n.previousSibling : n.nextSibling, last);
         if (n.tagName === 'BR') return '\n';
         if (n.tagName === 'IMG') return last ? ')' : '!';
-        if (MARKS[n.tagName] || n.tagName === 'A') return last ? '*' : '*';   // a delimiter or bracket: punctuation
+        if (n.tagName === 'A') return last ? ')' : '[';
+        if (MARKS[n.tagName]) return MARKS[n.tagName][0];   // its delimiter
         const t = n.textContent; return t ? (last ? t[t.length - 1] : t[0]) : textEdge(last ? n.previousSibling : n.nextSibling, last);
     };
-    // A * mark inside with text right against it: its delimiters could close an enclosing * mark
-    const riskyInside = (n) => [...n.querySelectorAll('strong, b, em, i')].some(d => {
-        const before = d.previousSibling ? textEdge(d.previousSibling, true) : null, after = d.nextSibling ? textEdge(d.nextSibling, false) : null;
-        return (before != null && !/\s/.test(before)) || (after != null && !/\s/.test(after));
-    });
     function inlineRaw(node, ctx) {
         let out = '';
         node.childNodes.forEach(n => {
-            if (n.nodeType === 3) { out += esc(n.textContent); return; }
+            if (n.nodeType === 3) { out += ctx.link ? esc(n.textContent).replace(/[()]/g, '\\$&') : esc(n.textContent); return; }   // in link text, no "(" can start a destination
             if (n.nodeType !== 1) return;
             const tag = n.tagName;
             if (tag === 'BR') { out += '  \n'; return; }
@@ -112,8 +108,9 @@
             if (tag === 'A' && !n.hasAttribute('title') && n.children.length === 0 && /^[a-z][a-z0-9+.-]{1,31}:[^\s<>]*$/i.test(n.getAttribute('href') || '') && n.textContent === n.getAttribute('href') && !unsafeUrl(n.textContent)) { out += '<' + n.textContent + '>'; return; }
             if (tag === 'A') {
                 const h = n.getAttribute('href') || '', title = n.getAttribute('title');
-                const t = title != null ? ` "${title.replace(/[\\"]/g, '\\$&').replace(/\n/g, ' ')}"` : '';
-                out += h && !unsafeUrl(h) ? `[${inlineRaw(n, { ...ctx, prev: '[', next: ']', under: ctx.under, star: ctx.star })}](${mdUrl(h)}${t})` : inlineRaw(n, ctx);
+                const tt = title ? title.replace(/\n/g, ' ') : '';
+                const t = !tt ? '' : !tt.includes('"') ? ` "${tt.replace(/\\/g, '\\\\')}"` : !tt.includes("'") ? ` '${tt.replace(/\\/g, '\\\\')}'` : ` "${tt.replace(/[\\"]/g, '\\$&')}"`;
+                out += h && !unsafeUrl(h) ? `[${inlineRaw(n, { ...ctx, prev: '[', next: ']', link: true, trims: false })}](${mdUrl(h)}${t})` : inlineRaw(n, ctx);
                 return;
             }
             let m = MARKS[tag];
@@ -121,40 +118,46 @@
             if (tag === 'CODE') {
                 // A fence longer than any backtick run inside; padded where the code starts or ends with one
                 const code = n.textContent; if (!code) return;
+                // Code holding a backtick needs a longer fence, which renderers do not all read alike
+                // around emphasis or in link text: written as HTML
+                if (code.includes('`')) { out += '<code>' + esc(code) + '</code>'; return; }
                 const fence = '`'.repeat(Math.max(0, ...(code.match(/`+/g) || []).map(r => r.length)) + 1);
                 const pad = /^`|`$/.test(code) || (/^ /.test(code) && / $/.test(code) && code.trim()) ? ' ' : '';
                 out += fence + pad + code + pad + fence;
                 return;
             }
             if (!n.textContent.trim()) { out += inlineRaw(n, ctx); return; }
-            let body = inlineRaw(n, { ...ctx, prev: m[0], next: m[0], under: ctx.under });
+            let body = inlineRaw(n, { ...ctx, prev: m[0], next: m[0], trims: true });
             // Delimiters hug the text: spaces go outside
             let [, lead, core, trail] = body.match(/^(\s*)([\s\S]*?)(\s*)$/);
-            // _ where * would touch text (it could pair with an enclosing *), or encloses a mark that does
             const after = textEdge(n.nextSibling, false);
-            const prev = lead ? ' ' : (out ? out[out.length - 1] : ctx.prev), next = trail ? ' ' : (after == null ? ctx.next : after);
+            // What will be against the delimiters: a space moved out of a markdown parent's edge is
+            // not there, the parent's delimiter is
+            const prev = lead ? (!out && ctx.trims ? ctx.prev : ' ') : (out ? out[out.length - 1] : ctx.prev);
+            const next = trail ? (after == null && ctx.trims ? ctx.next : ' ') : (after == null ? ctx.next : after);
             const nonspace = /\S/.test(prev || '') || /\S/.test(next || '');
-            if (m[0] === '*' && (ctx.html === 'all' || (ctx.html === 'touch' && nonspace))) {
-                const t = tag === 'STRONG' || tag === 'B' ? 'strong' : 'em';
-                [, lead, core, trail] = inlineRaw(n, { ...ctx, prev: '>', next: '<', star: false }).match(/^(\s*)([\s\S]*?)(\s*)$/);
-                out += lead + `<${t}>` + core + `</${t}>` + trail;
+            // Delimiters every renderer reads the same way: whitespace or plain punctuation outside them
+            // (an enclosing mark's same delimiter too), text inside them that starts and ends plainly.
+            // Anything else (letters, another delimiter or an HTML tag against them) is written as HTML.
+            const isS = (c) => !c || /\s/.test(c), isD = (c) => c === '*' || c === '_' || c === '~';
+            // Punctuation outside only where text is inside: the delimiter can then only open (or close)
+            // Letters outside only between letters (intraword, as in foo**bar**), and only outside any other * mark
+            const wordy = (c) => !!c && !isS(c) && !MD_PUNCT.test(c);
+            const outside = (c, fromCtx, inner) => isS(c) || (fromCtx && c === m[0]) || (MD_PUNCT.test(c) && !isD(c) && c !== '<' && c !== '>' && c !== '`' && wordy(inner))
+                || (wordy(c) && wordy(inner) && !ctx.star && m[0] === '*' && !n.querySelector('strong, b, em, i'));
+            const f = core[0], l = core[core.length - 1], bare = core.replace(new RegExp('^\\' + m[0] + '+|\\' + m[0] + '+$', 'g'), '');
+            const clean = outside(prev, !lead && !out, bare[0]) && outside(next, !trail && after == null, bare[bare.length - 1])
+                && !isS(f) && !isS(l) && f !== '\\' && !/\\.$/.test(core) && f !== '<' && l !== '>'
+                && !(isD(f) && f !== m[0]) && !(isD(l) && l !== m[0])
+                // runs merged at both ends (***a* b *c***) only around one inner mark (***all***)
+                && !(f === m[0] && l === m[0] && [...n.childNodes].filter(c => c.nodeType === 1 || (c.nodeType === 3 && c.nodeValue.trim())).length > 1);
+            if ((m[0] === '*' || m[0] === '~') && (ctx.html === 'all' || (ctx.html === 'touch' && nonspace) || !clean)) {
+                const t = tag === 'STRONG' || tag === 'B' ? 'strong' : m[0] === '~' ? 's' : 'em';
+                // spaces stay inside a tag: what is against its children stays as computed
+                out += `<${t}>` + inlineRaw(n, { ...ctx, prev: '>', next: '<', trims: false }) + `</${t}>`;
                 return;
             }
-            const allowed = m[0] === '*' && !ctx.under && !wordChar(prev) && !wordChar(next) && (!!lead || !/(^|[^\\])_$/.test(out));
-            // * unless it would not read back: right after another * run, around a * mark with text
-            // against it, or with text against it inside a * mark
-            const touching = (!lead && /\S$/.test(out)) || (!trail && after != null && /\S/.test(after));
-            if (allowed && ((!lead && /(^|[^\\])\*$/.test(out)) || riskyInside(n) || (ctx.star && touching))) {
-                m = m.replace(/\*/g, '_');
-                [, lead, core, trail] = inlineRaw(n, { ...ctx, prev: '_', next: '_', under: true, star: ctx.star }).match(/^(\s*)([\s\S]*?)(\s*)$/);
-            } else if (m[0] === '*' && ctx.star && touching) {
-                // Inside a * mark with text against it, a * run could close the enclosing one: no
-                // markdown form says this, so it is written as HTML (which markdown carries)
-                const t = tag === 'STRONG' || tag === 'B' ? 'strong' : 'em';
-                [, lead, core, trail] = inlineRaw(n, { ...ctx, prev: '>', next: '<', under: ctx.under, star: false }).match(/^(\s*)([\s\S]*?)(\s*)$/);
-                out += lead + `<${t}>` + core + `</${t}>` + trail;
-                return;
-            } else if (m[0] === '*') [, lead, core, trail] = inlineRaw(n, { ...ctx, prev: '*', next: '*', under: ctx.under, star: true }).match(/^(\s*)([\s\S]*?)(\s*)$/);
+            if (m[0] === '*') [, lead, core, trail] = inlineRaw(n, { ...ctx, prev: '*', next: '*', star: true, trims: true }).match(/^(\s*)([\s\S]*?)(\s*)$/);
             out += lead + m + core + m + trail;
         });
         return out;
@@ -163,13 +166,15 @@
     // Inline markdown for a node, checked by reading it back: in the rare arrangement where a
     // * or _ run would pair differently, em/strong touching text go as HTML, else all of them
     function inline(node) {
-        const want = shapeOf(node), ctx = { prev: '', next: '', under: false, star: false, html: '' };
+        const want = shapeOf(node), ctx = { prev: '', next: '', star: false, link: false, html: '' };
         let first = null;
         for (const html of ['', 'touch', 'all']) {
             const md = inlineRaw(node, { ...ctx, html });
             if (first == null) first = md;
+            // Read back as this reader does and as other markdown renderers (x-markdown) do
             const t = document.createElement('template'); t.innerHTML = inlineHtml(md);
-            if (shapeOf(t.content) === want) return md;
+            const u = document.createElement('template'); u.innerHTML = inlineHtml(md, { strict: true });
+            if (shapeOf(t.content) === want && shapeOf(u.content) === want) return md;
         }
         return first;   // what no form can carry (an unsafe link, say) is not a reason to change notation
     }
@@ -403,7 +408,7 @@
                     const url = m.url, body = s.slice(open, close);
                     flush();
                     if (img) parts.push(unsafeUrl(url, true) ? '' : `<img src="${escHtml(url)}" alt="${escHtml(body.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'))}">`);
-                    else parts.push(unsafeUrl(url) || !url ? inlineHtml(body, { raw: opts.raw }) : `<a href="${escHtml(url)}"${m.title != null ? ` title="${escHtml(m.title)}"` : ''}>${inlineHtml(body, { raw: opts.raw })}</a>`);
+                    else parts.push(unsafeUrl(url) || !url ? inlineHtml(body, { raw: opts.raw, strict: opts.strict }) : `<a href="${escHtml(url)}"${m.title != null ? ` title="${escHtml(m.title)}"` : ''}>${inlineHtml(body, { raw: opts.raw, strict: opts.strict })}</a>`);
                     i = m.end; continue;
                 }
             }
@@ -425,6 +430,10 @@
                     const left = !isSpace(after) && (!PUNCT.test(after) || isSpace(before) || PUNCT.test(before));
                     const right = !isSpace(before) && (!PUNCT.test(before) || isSpace(after) || PUNCT.test(after));
                     open = left && (!right || PUNCT.test(before)); close = right && (!left || PUNCT.test(after));
+                } else if (opts.strict) {
+                    // CommonMark's flanking, punctuation weighed (what other markdown renderers do)
+                    open = !isSpace(after) && (!PUNCT.test(after) || isSpace(before) || PUNCT.test(before));
+                    close = !isSpace(before) && (!PUNCT.test(before) || isSpace(after) || PUNCT.test(after));
                 } else { open = !isSpace(after); close = !isSpace(before); }
                 if (c === '~' && run.length !== 2) { open = close = false; }
                 if (!open && !close) { text += run; i += run.length; continue; }
@@ -545,8 +554,19 @@
         });
         walk(t.content);
         mergeAdjacent(t.content);
+        if (allowBlocks) dropTrailingEmpty(t.content);
         return t.innerHTML;
     }
+    // The empty paragraph after a closing list, table or code block is an editing affordance only:
+    // values never end in one (nor in several)
+    function dropTrailingEmpty(root) {
+        for (let n = root.lastChild; n;) {
+            const prev = n.previousSibling;
+            if ((n.nodeType === 3 && !n.nodeValue.trim()) || (n.nodeType === 1 && n.tagName === 'P' && !n.textContent.trim() && !n.querySelector('img, input'))) n.remove();
+            else break;
+            n = prev;
+        }
+    }
 
     const markdownHtml = (md) => sanitize(fromMarkdown(md), true);
 
@@ -967,6 +987,8 @@
                 const have = (grid[r] || []).filter(Boolean).length;
                 for (let i = have; i < width; i++) row.appendChild(emptyCell(rowCellTag(row)));
             });
+            const group = table.querySelector(':scope > colgroup');
+            if (group && group.children.length !== width) rebalanceCols(table);
             if (!table.querySelector('tbody, thead')) {
                 const body = document.createElement('tbody');
                 while (table.firstChild) body.appendChild(table.firstChild);
@@ -975,6 +997,43 @@
         });
     }
 
+    // A table whose column widths were set by resizing keeps them adding up to 100% as its columns
+    // change: an added column takes an equal share (the others scale down), a removed one's share
+    // goes to all the others in proportion, and no column falls under the minimum. Tables without widths are left alone.
+    function rebalanceCols(table, change) {
+        const group = table.querySelector(':scope > colgroup'); if (!group) return;
+        let w = [...group.children].map(c => /%$/.test(c.style.width) ? parseFloat(c.style.width) : NaN);
+        if (!w.length || w.some(isNaN)) return;
+        const n = columnCount(table);
+        if (change && change.add != null) {
+            const share = 100 / (w.length + 1);
+            w = w.map(v => v * (100 - share) / 100);
+            w.splice(Math.min(change.add, w.length), 0, share);
+        } else if (change && change.remove != null && change.remove < w.length) {
+            // its share goes to every remaining column, in proportion to its width
+            const [gone] = w.splice(change.remove, 1), base = w.reduce((a, v) => a + v, 0);
+            w = w.map(v => v + gone * (base ? v / base : 1 / w.length));
+        }
+        // Any other mismatch (merges, splits, padding): columns added at the end take equal shares, extras go
+        while (w.length < n) { const share = 100 / (w.length + 1); w = w.map(v => v * (100 - share) / 100); w.push(share); }
+        if (w.length > n) { const extra = w.splice(n).reduce((a, b) => a + b, 0); if (w.length) w[w.length - 1] += extra; }
+        if (!w.length) return;
+        // The minimum, taken from the widest columns
+        const px = table.getBoundingClientRect().width, min = px ? MIN_COL / px * 100 : 0;
+        if (min && min * w.length > 100) w = w.map(() => 100 / w.length);   // too narrow for the minimum: equal shares
+        else if (min) {
+            for (let guard = 0; guard < 20 && w.some(v => v < min - 1e-6); guard++) {
+                const need = w.reduce((a, v) => a + Math.max(0, min - v), 0), room = w.reduce((a, v) => a + Math.max(0, v - min), 0);
+                w = w.map(v => v < min ? min : v - (v - min) / room * need);
+            }
+        }
+        const total = w.reduce((a, b) => a + b, 0), pct = (v) => Math.round(v * 100) / 100;
+        while (group.children.length < w.length) group.appendChild(document.createElement('col'));
+        while (group.children.length > w.length) group.lastElementChild.remove();
+        let used = 0;
+        [...group.children].forEach((col, i) => { const v = i === w.length - 1 ? pct(100 - used) : pct(w[i] / total * 100); used += v; col.style.width = v + '%'; });
+    }
+
     function addRow(where) {
         const cell = cellAt(); if (!cell) return;
         const row = cell.parentElement, table = row.closest('table');
@@ -996,6 +1055,7 @@
             fresh.appendChild(document.createElement('br'));
             if (where < 0) at.before(fresh); else at.after(fresh);
         });
+        rebalanceCols(table, { add: where < 0 ? col : col + 1 });
         normalizeTables(table.parentElement || table);
         caretIn(cellCovering(rowsOf(table)[gridPosition(cell).row], where < 0 ? col : col + 1), 0);
     }
@@ -1015,6 +1075,7 @@
         if (columnCount(table) <= 1) return removeTable();
         const seen = new Set();
         grid.forEach(row => { const at = row[col]; if (!at || seen.has(at)) return; seen.add(at); at.remove(); });
+        rebalanceCols(table, { remove: col });
         normalizeTables(table.parentElement || table);
         caretIn(cellCovering(rowsOf(table)[0], Math.max(0, col - 1)), 0);
     }
@@ -1152,21 +1213,34 @@
        Widths on a <colgroup>, heights on the row. */
     const EDGE = 5;
 
-    function ensureCols(table) {
+    const MIN_COL = 28;
+    // Each column's rendered width: a cell spanning it alone, else a spanning cell's share
+    function columnWidths(table) {
+        const grid = tableGrid(table), n = columnCount(table), out = [];
+        for (let i = 0; i < n; i++) {
+            let w = null;
+            for (const row of grid) { const c = row[i]; if (c && (c.colSpan || 1) === 1) { w = c.getBoundingClientRect().width; break; } }
+            if (w == null) { const c = grid.map(r => r[i]).find(Boolean); w = c ? c.getBoundingClientRect().width / (c.colSpan || 1) : 0; }
+            out.push(w);
+        }
+        return out;
+    }
+    // Widths as percentages: of the table for its columns (they add up to 100%), and of the field
+    // for the table, so what is stored is what renders, whatever width the field has
+    function writeWidths(table, widths, tableWidth, fieldWidth) {
         let group = table.querySelector(':scope > colgroup');
         if (!group) { group = document.createElement('colgroup'); table.prepend(group); }
-        const want = columnCount(table);
-        while (group.children.length < want) group.appendChild(document.createElement('col'));
-        while (group.children.length > want) group.lastElementChild.remove();
-        // Freeze current widths so one drag doesn't reflow the rest
+        while (group.children.length < widths.length) group.appendChild(document.createElement('col'));
+        while (group.children.length > widths.length) group.lastElementChild.remove();
+        const total = widths.reduce((a, b) => a + b, 0) || 1, pct = (v) => Math.round(v * 100) / 100;
+        let used = 0;
         [...group.children].forEach((col, i) => {
-            if (col.style.width) return;
-            const at = (tableGrid(table)[0] || [])[i];
-            if (at) col.style.width = Math.round(at.getBoundingClientRect().width / (at.colSpan || 1)) + 'px';
+            const v = i === widths.length - 1 ? pct(100 - used) : pct(widths[i] / total * 100);
+            used += v; col.style.width = v + '%';
         });
-        return group;
+        table.style.width = pct(Math.min(100, tableWidth / fieldWidth * 100)) + '%';
+        table.style.tableLayout = 'fixed';   // stored widths are the rendered ones, with or without the plugin's stylesheet
     }
-
     function borderAt(x, y) {
         const el = document.elementFromPoint(x, y);
         let cell = el && el.closest && el.closest('td, th');
@@ -1193,39 +1267,56 @@
         return null;
     }
 
+    // Sizes are written only once the pointer actually drags: a click on a border writes nothing
     function startResize(e, hit) {
         const cell = hit.cell, table = cell.closest('table');
         const area = cell.closest('[data-rich-text]');
         e.preventDefault();
-        area.setAttribute('data-rich-text-resizing', hit.axis);
-
-        let apply;
-        if (hit.axis === 'x') {
-            const group = ensureCols(table);
-            const { col } = gridPosition(cell);
-            const index = Math.min(col + (cell.colSpan || 1) - 1, group.children.length - 1);
-            const target = group.children[index];
-            const start = parseFloat(target.style.width) || cell.getBoundingClientRect().width;
-            const from = e.clientX;
-            // The outer border sizes the table too
-            const outer = index === group.children.length - 1;
-            const tableStart = table.getBoundingClientRect().width;
-            if (outer) table.style.width = Math.round(tableStart) + 'px';
-            apply = (ev) => {
-                const delta = ev.clientX - from;
-                target.style.width = Math.max(28, Math.round(start + delta)) + 'px';
-                if (outer) table.style.width = Math.max(60, Math.round(tableStart + delta)) + 'px';
-            };
-        } else {
-            const row = cell.parentElement;
-            const start = row.getBoundingClientRect().height, from = e.clientY;
-            apply = (ev) => { row.style.height = Math.max(20, Math.round(start + ev.clientY - from)) + 'px'; };
-        }
+        const fromX = e.clientX, fromY = e.clientY;
+        let apply = null;
+        const begin = () => {
+            area.setAttribute('data-rich-text-resizing', hit.axis);
+            if (hit.axis === 'x') {
+                // As a spreadsheet does: a border between columns moves width from one to the other (the
+                // table keeps its width); the outer border sizes the last column and the table, within the field
+                const { col } = gridPosition(cell);
+                const widths = columnWidths(table), last = widths.length - 1;
+                const index = Math.min(col + (cell.colSpan || 1) - 1, last);
+                const tableStart = table.getBoundingClientRect().width;
+                const cs = getComputedStyle(area), field = Math.max(1, area.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0));
+                const room = Math.max(field, tableStart) - (tableStart - widths.reduce((a, b) => a + b, 0));   // columns' room, borders aside
+                return (ev) => {
+                    const delta = ev.clientX - fromX, w = widths.slice();
+                    if (index < last) {
+                        const pair = widths[index] + widths[index + 1];
+                        if (pair < 2 * MIN_COL) return;
+                        w[index] = Math.min(pair - MIN_COL, Math.max(MIN_COL, widths[index] + delta));
+                        w[index + 1] = pair - w[index];
+                        writeWidths(table, w, tableStart, field);
+                    } else {
+                        const others = widths.reduce((a, b) => a + b, 0) - widths[last];
+                        w[last] = Math.max(MIN_COL, Math.min(widths[last] + delta, room - others));
+                        writeWidths(table, w, tableStart - widths[last] + w[last], field);
+                    }
+                };
+            }
+            const row = cell.parentElement, start = row.getBoundingClientRect().height;
+            return (ev) => { row.style.height = Math.max(20, Math.round(start + ev.clientY - fromY)) + 'px'; };
+        };
 
-        const move = (ev) => { ev.preventDefault(); apply(ev); };
+        const move = (ev) => {
+            ev.preventDefault();
+            if (!apply) {
+                if (Math.abs(ev.clientX - fromX) < 3 && Math.abs(ev.clientY - fromY) < 3) return;
+                record(area);
+                apply = begin();
+            }
+            apply(ev);
+        };
         const up = () => {
             document.removeEventListener('pointermove', move);
             document.removeEventListener('pointerup', up);
+            if (!apply) return;
             area.removeAttribute('data-rich-text-resizing');
             area.dispatchEvent(new Event('input', { bubbles: true }));
         };
@@ -1668,7 +1759,13 @@
         insertHTML(`<table data-rich-text-new><tbody>${row.repeat(rows)}</tbody></table><p><br></p>`);
         // The caret goes into the first cell, so typing and table commands start there
         const made = document.querySelector('table[data-rich-text-new]');
-        if (made) { made.removeAttribute('data-rich-text-new'); const first = made.querySelector('td, th'); if (first) caretIn(first, 0); }
+        if (made) {
+            made.removeAttribute('data-rich-text-new');
+            // One empty line after it to land on, not one per insertion (from inside a table, it lands after it)
+            const blank = (e) => e && e.tagName === 'P' && !e.textContent.trim() && !e.querySelector('img');
+            for (let n = made.nextElementSibling; blank(n) && blank(n.nextElementSibling);) { const x = n.nextElementSibling; x.remove(); }
+            const first = made.querySelector('td, th'); if (first) caretIn(first, 0);
+        }
     }
 
     // A trailing table, rule or similar block gets a line after it to land on
@@ -1698,8 +1795,21 @@
     }
 
     // A value styles the selection; an empty one removes that style from it (spans left bare go)
+    // A style span covering exactly what a style span around it covers is folded into it, so one span
+    // carries the combined styles and a re-applied value replaces the old one instead of nesting
     function styleSpan(prop, v) {
-        if (v != null && v !== '') return wrapInline('span', { [prop]: v });
+        if (v != null && v !== '') {
+            const made = wrapInline('span', { [prop]: v }).map(sp => {
+                for (let p = sp.parentElement; p && p.tagName === 'SPAN' && !p.hasAttribute('data-rich-text') && [...p.attributes].every(a => a.name === 'style') && [...p.childNodes].filter(c => c.nodeType === 1 || c.nodeValue.length).length === 1; p = sp.parentElement) {
+                    for (let i = 0; i < sp.style.length; i++) { const name = sp.style.item(i); p.style.setProperty(name, sp.style.getPropertyValue(name)); }
+                    sp.replaceWith(...sp.childNodes);
+                    sp = p;
+                }
+                return sp;
+            });
+            if (made.length) { const r = document.createRange(), last = made[made.length - 1]; r.setStart(made[0], 0); r.setEnd(last, last.childNodes.length); const s = sel(); s.removeAllRanges(); s.addRange(r); }
+            return made;
+        }
         const nodes = selectedTextNodes(), spans = new Set();
         nodes.forEach(n => { for (let el = elementAt(n); el && el.closest && !el.hasAttribute('data-rich-text'); el = el.parentElement) if (el.tagName === 'SPAN' && el.style[prop]) spans.add(el); });
         spans.forEach(s => { s.style[prop] = ''; if (!s.getAttribute('style')) s.removeAttribute('style'); if (!s.attributes.length) unwrapEl(s); });
@@ -2143,7 +2253,10 @@
     }
 
     // Native Enter inside code and for Shift+Enter; Chrome writes <br> pairs in a <pre>
+    // A code block's lines: in its <code> (the shape markdown gives), else in the <pre> itself
+    const codeBox = (pre) => { const c = pre.firstElementChild; return c && c.tagName === 'CODE' && pre.children.length === 1 && !pre.textContent.replace(c.textContent, '').trim() ? c : pre; };
     const codeEndsBlank = (pre) => {
+        pre = codeBox(pre);
         const last = pre.lastChild;
         if (last && last.nodeName === 'BR' && last.previousSibling && last.previousSibling.nodeName === 'BR') return true;
         return /\n[^\S\n]*$/.test(pre.textContent);
@@ -2214,10 +2327,13 @@
         // An empty last line leaves the code block (bounded to the area)
         const pre = holder.closest('pre');
         if (pre && pre !== area && area.contains(pre)) {
-            while (pre.lastChild && (pre.lastChild.nodeName === 'BR' || !pre.lastChild.textContent.trim())) pre.lastChild.remove();
-            if (/\n[^\S\n]*$/.test(pre.textContent)) pre.textContent = pre.textContent.replace(/\n[^\S\n]*$/, '');
-            const p = document.createElement('p');
-            pre.after(p);
+            const box = codeBox(pre);
+            while (box.lastChild && (box.lastChild.nodeName === 'BR' || !box.lastChild.textContent.trim())) box.lastChild.remove();
+            if (/\n[^\S\n]*$/.test(box.textContent)) box.textContent = box.textContent.replace(/\n[^\S\n]*$/, '');
+            // onto the empty line after it, if there is one
+            const after = pre.nextElementSibling, blank = after && after.tagName === 'P' && !after.textContent.trim() && !after.querySelector('img');
+            const p = blank ? after : document.createElement('p');
+            if (!blank) pre.after(p);
             if (!pre.textContent.length) pre.remove();
             caretIn(p, 0);
             return;
@@ -2256,7 +2372,14 @@
         if (holder.tagName === 'HR') { caretIn(next, 0); return; }
 
         // A finished ``` line opens the code block
-        if (holder.tagName === 'PRE') { next.remove(); caretIn(holder, 0); return; }
+        // (its text in a <code>, the shape a code block read from markdown has)
+        if (holder.tagName === 'PRE') {
+            next.remove();
+            let code = holder.querySelector(':scope > code');
+            if (!code) { code = document.createElement('code'); code.append(...holder.childNodes); holder.appendChild(code); }
+            caretIn(code, 0);
+            return;
+        }
 
         if (holder.tagName === 'LI') {
             const item = next.tagName === 'LI' ? next : retagBlock(next, 'li');
@@ -2497,6 +2620,28 @@
         queueMicrotask(() => { beating = false; const now = surface(); if (now === lastSurface) return; lastSurface = now; pulse.n++; });
     };
 
+    // Any CSS colour (oklch(), a name, rgb()) as #rrggbb, read off a canvas pixel; null when it cannot be
+    let colorCanvas = null;
+    const hexCache = new Map();
+    function hexColor(v) {
+        if (v == null || v === '') return null;
+        const s = String(v).trim();
+        if (/^#[0-9a-f]{6}$/i.test(s)) return s.toLowerCase();
+        if (hexCache.has(s)) return hexCache.get(s);
+        let out = null;
+        try {
+            colorCanvas = colorCanvas || document.createElement('canvas');
+            const g = colorCanvas.getContext && colorCanvas.getContext('2d', { willReadFrequently: true });
+            if (g) {
+                g.clearRect(0, 0, 1, 1); g.fillStyle = '#000'; g.fillStyle = s; g.fillRect(0, 0, 1, 1);
+                const [r, gr, b] = g.getImageData(0, 0, 1, 1).data;
+                out = '#' + [r, gr, b].map(x => x.toString(16).padStart(2, '0')).join('');
+            }
+        } catch { out = null; }
+        hexCache.set(s, out);
+        return out;
+    }
+
     // Reflect caret state onto every control
     function sync() {
         beat();
@@ -2510,9 +2655,10 @@
             c.setAttribute('aria-disabled', String(!usable));
             if (usable && (all || spec.reflect) && 'value' in c && c !== document.activeElement) {
                 const v = all ? area.style.getPropertyValue(ALL_VARS[cfg.id]).trim() : judged(area, () => spec.reflect());
-                // Never blank a <select> with a value it doesn't offer
+                // Never blank a <select> with a value it doesn't offer; a colour input takes #rrggbb only
                 const offered = c.tagName !== 'SELECT' || [...c.options].some(o => o.value === v);
-                if (v != null && offered && c.value !== v) c.value = v;
+                const val = c.type === 'color' ? hexColor(v) : v;
+                if (val != null && offered && c.value !== val) c.value = val;
             }
             if (c.tagName === 'BUTTON') c.setAttribute('aria-pressed', String(c.hasAttribute('data-rich-text-active')));
         });

package/lib/manifest.sw.js

@@ -16,7 +16,7 @@
 
 // Build stamps the published version here; unstamped (dev) falls back to the
 // registration URL's `v`, then 'dev'.
-const BUILD_VERSION = '0.5.233';
+const BUILD_VERSION = '0.5.235';
 const CACHE_PREFIX = 'mnfst-sw:';
 const META_CACHE = CACHE_PREFIX + 'meta';
 // Sized to hold a full precache.json warm-up (PRECACHE_MAX_ENTRIES server-side)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.233",
+    "version": "0.5.235",
     "private": false,
     "workspaces": [
         "templates/starter",
@@ -60,6 +60,7 @@
         "entities": "4.5.0",
         "glob": "^11.0.2",
         "happy-dom": "^20.11.6",
+        "marked": "15.0.12",
         "puppeteer": "^24.15.0",
         "rimraf": "^5.0.0",
         "rollup": "^4.24.2",