mnfst 0.5.235 → 0.5.237

package/lib/manifest.appwrite.data.js

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

package/lib/manifest.chat.css

@@ -0,0 +1,152 @@
+/* Manifest Chat */
+
+@layer base, components, utilities;
+
+@layer utilities {
+
+    :where(.chat-wrapper) {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+
+        /* Chat log scroll container */
+        :where([role="log"]) {
+            display: flex;
+            flex-direction: column-reverse;
+            flex: 1;
+            font-size: 0.875rem;
+            overflow-y: auto;
+
+            /* Message column */
+            > :where(div) {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-end;
+                gap: 2rem;
+                min-height: 100%;
+                width: calc(var(--spacing-content-width, 74rem) - 4rem);
+                max-width: 100%;
+                margin-inline-start: auto;
+                margin-inline-end: auto;
+                padding-inline-start: 1rem;
+                padding-inline-end: 1rem;
+                padding-block-end: 3rem
+            }
+
+            /* Messages */
+            :where(div div) {
+
+                /* Markdown spacing */
+                :where(p) {
+                    margin-block: 0.5rem
+                }
+
+                :where(p:first-child) {
+                    margin-block-start: 0
+                }
+
+                :where(p:last-child) {
+                    margin-block-end: 0
+                }
+            }
+
+            /* Own messages */
+            :where(.own) {
+                width: 95%;
+                max-width: calc(var(--spacing-content-width, 74rem) - 10rem);
+                margin-inline-start: auto;
+                padding-block: 0.5rem;
+                padding-inline: 0.75rem;
+                background: color-mix(in oklch, var(--color-surface-2) 50%, transparent);
+                border-radius: var(--radius)
+            }
+
+            /* Attachments */
+            :where(img, video) {
+                display: block;
+                max-width: 20rem;
+                max-height: 15rem;
+                margin-block: 0.5rem;
+                border-radius: var(--radius)
+            }
+
+            :where(audio) {
+                display: block;
+                width: 18rem;
+                max-width: 100%;
+                margin-block: 0.5rem
+            }
+
+            :where(a[download]) {
+                display: inline-flex;
+                align-items: center;
+                gap: 0.4rem;
+                margin-block: 0.5rem;
+                padding-block: 0.35rem;
+                padding-inline: 0.6rem;
+                background: var(--color-surface-2);
+                border-radius: var(--radius)
+            }
+        }
+
+        /* Chat input */
+        :where(form:not(.unstyle)) {
+            display: flex;
+            flex-flow: row wrap;
+            align-items: end;
+            gap: 0;
+            width: var(--spacing-content-width, 74rem);
+            max-width: 100%;
+            margin-inline-start: auto;
+            margin-inline-end: auto;
+
+            :where(textarea, .textarea):not(.unstyle) {
+                flex: 1;
+                width: auto;
+                min-height: var(--spacing-field-height, 2.5rem);
+                field-sizing: content;
+                resize: none
+            }
+        }
+
+        /* Pending attachments */
+        :where(output:not(.unstyle)) {
+            display: flex;
+            flex-flow: row wrap;
+            gap: 0.325rem;
+            width: 100%;
+            max-width: 100%;
+            height: fit-content;
+            padding: calc(var(--spacing) * 2);
+
+            > :where(:not(template)) {
+                position: relative;
+                flex: 0 0 auto
+            }
+
+            /* Images */
+            :where(img) {
+                display: block;
+                width: var(--spacing-field-height, 2.5rem);
+                height: var(--spacing-field-height, 2.5rem);
+                object-fit: cover;
+                border-radius: calc(var(--radius, 0.5rem) * 0.75)
+            }
+
+            /* File chips */
+            > :where(:not(template))> :where(span) {
+                display: flex;
+                align-items: center;
+                gap: 0.3rem;
+                height: fit-content;
+                padding-inline: 0.5rem;
+                font-size: 0.75rem;
+                white-space: nowrap;
+                background: var(--color-line);
+                border-radius: calc(var(--radius, 0.5rem) * 0.75)
+            }
+        }
+    }
+}

package/lib/manifest.css

@@ -2945,32 +2945,15 @@
         outline-offset: 3px;
     }
 
-    /* Grip: drags a text piece; sits at its inline-start edge */
-    :where([data-edit-grip]) {
-        position: fixed;
-        z-index: 1001;
-        width: var(--edit-grip-size, 0.75rem);
-        height: calc(var(--edit-grip-size, 0.75rem) * 1.5);
-        translate: calc(-100% - var(--edit-grip-offset, 0.25rem)) 0;
-        border-radius: 3px;
-        color: var(--edit-accent, var(--color-brand-content));
-        background: radial-gradient(circle, currentColor 1px, transparent 1.5px) center / 6px 6px;
-        opacity: 0.6;
+    /* A piece with its own grab handle drags only from it */
+    :where([data-edit-piece][data-edit-grabbable]) {
+        cursor: auto;
+    }
+
+    :where([x-edit\.grab]) {
         cursor: grab;
         touch-action: none;
         user-select: none;
-
-        &:hover {
-            opacity: 1;
-        }
-    }
-
-    :where([data-edit-grip]:dir(rtl)) {
-        translate: var(--edit-grip-offset, 0.25rem) 0;
-    }
-
-    :where([data-edit-grip][hidden]) {
-        display: none;
     }
 
     /* Lifted, following the pointer */
@@ -3084,6 +3067,26 @@
         }
     }
 
+    /* While resizing, the edge stays drawn; at a snap point it thickens */
+    :where([data-edit-handle][data-edit-resizing]):where(:not([data-edit-area="bare"] *))::before {
+        opacity: 1;
+        background-color: var(--edit-accent, var(--color-brand-content));
+    }
+
+    :where([data-edit-handle="top"][data-edit-snapped], [data-edit-handle="bottom"][data-edit-snapped]):where(:not([data-edit-area="bare"] *))::before {
+        height: 3px;
+    }
+
+    :where([data-edit-handle="left"][data-edit-snapped], [data-edit-handle="right"][data-edit-snapped], [data-edit-handle="start"][data-edit-snapped], [data-edit-handle="end"][data-edit-snapped]):where(:not([data-edit-area="bare"] *))::before {
+        width: 3px;
+    }
+
+    :where([data-edit-handle*="-"][data-edit-snapped]):where(:not([data-edit-area="bare"] *))::before {
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+    }
+
     :where([data-edit-handle]):focus-visible:where(:not([data-edit-area="bare"], [data-edit-area="bare"] *)) {
         outline: 2px solid var(--edit-accent, var(--color-brand-content));
     }
@@ -4033,13 +4036,27 @@
         & table {
             width: 100%;
             table-layout: fixed;
+            border-collapse: separate;
+            border-spacing: 0;
+            border: 1px solid var(--color-line);
 
+            /* Inner dividers only: the table's own border draws the rounded edge */
             & :where(td, th) {
                 padding: 0.35em 0.5em;
-                border: 1px solid var(--color-line);
+                border: 0 none;
+                border-inline-end: 1px solid var(--color-line);
+                border-block-end: 1px solid var(--color-line);
                 vertical-align: top;
             }
 
+            & :where(tr > :last-child) {
+                border-inline-end: 0 none;
+            }
+
+            & :where(tbody:last-child > tr:last-child > *, tfoot > tr:last-child > *) {
+                border-block-end: 0 none;
+            }
+
             & th {
                 font-weight: 600;
                 text-align: start;
@@ -4365,8 +4382,8 @@
             text-align: left;
             text-align: start;
 
-            /* Make elements within cell inline */
-            &>*:not(template) {
+            /* Make elements within cell inline; text-level elements stay in the text flow */
+            &>*:not(template, br, :is(a, abbr, b, cite, code, data, del, dfn, em, i, ins, kbd, mark, q, s, samp, small, strong, sub, sup, time, u, var):not([role=button], [x-icon], .badge)) {
                 display: inline-flex;
                 vertical-align: middle;
 

package/lib/manifest.d.ts

@@ -531,6 +531,8 @@ export interface ManifestRichTextAttachOptions {
     mode?: 'block' | 'inline';
     /** Inline html only: `<br>` line breaks are kept, Shift+Enter inserts one, pasted blocks become lines. */
     breaks?: boolean;
+    /** 'break': Enter inserts a line break too, instead of firing `rich-text:enter`. Needs `breaks` and the 'html' format. */
+    enter?: 'break';
     /** false: `.all` controls and `$rich.all` are unavailable (no area-wide --rich-text-* styles). Default true. */
     all?: boolean;
     /** Storage format: 'markdown' (default), 'html' or 'plain'. */

package/lib/manifest.data.js

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

package/lib/manifest.edit.css

@@ -25,32 +25,15 @@
         outline-offset: 3px;
     }
 
-    /* Grip: drags a text piece; sits at its inline-start edge */
-    :where([data-edit-grip]) {
-        position: fixed;
-        z-index: 1001;
-        width: var(--edit-grip-size, 0.75rem);
-        height: calc(var(--edit-grip-size, 0.75rem) * 1.5);
-        translate: calc(-100% - var(--edit-grip-offset, 0.25rem)) 0;
-        border-radius: 3px;
-        color: var(--edit-accent, var(--color-brand-content));
-        background: radial-gradient(circle, currentColor 1px, transparent 1.5px) center / 6px 6px;
-        opacity: 0.6;
+    /* A piece with its own grab handle drags only from it */
+    :where([data-edit-piece][data-edit-grabbable]) {
+        cursor: auto;
+    }
+
+    :where([x-edit\.grab]) {
         cursor: grab;
         touch-action: none;
         user-select: none;
-
-        &:hover {
-            opacity: 1;
-        }
-    }
-
-    :where([data-edit-grip]:dir(rtl)) {
-        translate: var(--edit-grip-offset, 0.25rem) 0;
-    }
-
-    :where([data-edit-grip][hidden]) {
-        display: none;
     }
 
     /* Lifted, following the pointer */
@@ -164,6 +147,26 @@
         }
     }
 
+    /* While resizing, the edge stays drawn; at a snap point it thickens */
+    :where([data-edit-handle][data-edit-resizing]):where(:not([data-edit-area="bare"] *))::before {
+        opacity: 1;
+        background-color: var(--edit-accent, var(--color-brand-content));
+    }
+
+    :where([data-edit-handle="top"][data-edit-snapped], [data-edit-handle="bottom"][data-edit-snapped]):where(:not([data-edit-area="bare"] *))::before {
+        height: 3px;
+    }
+
+    :where([data-edit-handle="left"][data-edit-snapped], [data-edit-handle="right"][data-edit-snapped], [data-edit-handle="start"][data-edit-snapped], [data-edit-handle="end"][data-edit-snapped]):where(:not([data-edit-area="bare"] *))::before {
+        width: 3px;
+    }
+
+    :where([data-edit-handle*="-"][data-edit-snapped]):where(:not([data-edit-area="bare"] *))::before {
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+    }
+
     :where([data-edit-handle]):focus-visible:where(:not([data-edit-area="bare"], [data-edit-area="bare"] *)) {
         outline: 2px solid var(--edit-accent, var(--color-brand-content));
     }

package/lib/manifest.edit.js

@@ -263,6 +263,7 @@
     function registerEdit(el, modifiers, expression) {
         if (modifiers.includes('cssvar')) return registerCssVar(el, expression, modifiers);
         modifiers.forEach(m => { if (RETIRED[m] && !warnedRetired.has(m)) { warnedRetired.add(m); console.warn(`[edit] x-edit.${m} was removed — use ${RETIRED[m]}`); } });
+        if (modifiers.includes('grab')) return;                        // a piece's own drag handle, not a region
         if (modifiers.includes('lock')) {
             const actions = modifiers.filter(m => LOCK_ACTIONS.includes(m));
             el._editLock = new Set(actions.length ? actions : ['*']);
@@ -330,7 +331,7 @@
     };
     function dataSourceExpr(area) { const t = listTpl(area); const m = t && t.getAttribute('x-for').match(/\bin\s+(.+)$/); return m ? m[1].trim() : null; }
     const dataSourceName = (area) => { const e = dataSourceExpr(area); const m = e && e.match(/\$x\.(\w+)/); return m ? m[1] : (e || 'source'); };
-    const pluginNode = (x) => x.hasAttribute('data-edit-handle') || x.hasAttribute('data-edit-ghost') || x.hasAttribute('data-edit-grip');
+    const pluginNode = (x) => x.hasAttribute('data-edit-handle') || x.hasAttribute('data-edit-ghost');
     // A component's roots past its first follow that first one (its <x-name> host) everywhere.
     const groupOf = (el) => el && el._manifestHost && el._manifestHost.roots && el._manifestHost.roots[0] === el ? el._manifestHost.roots.slice() : [el];
     const extraRoot = (x) => !!x._manifestHost && !!x._manifestHost.roots && x._manifestHost.roots[0] !== x;
@@ -359,7 +360,7 @@
     function plainFormatted(el) {
         if (!window.ManifestRichText) return false;
         const c = el.cloneNode(true);
-        c.querySelectorAll('[data-edit-handle], [data-edit-ghost], [data-edit-grip]').forEach(n => n.remove());
+        c.querySelectorAll('[data-edit-handle], [data-edit-ghost]').forEach(n => n.remove());
         commentsIn(c).forEach(n => n.remove());
         if (!c.children.length) return true;
         c.querySelectorAll('*').forEach(n => [...n.attributes].forEach(a => { if (a.name.startsWith('data-edit-')) n.removeAttribute(a.name); }));
@@ -1103,7 +1104,7 @@
         const src = [el, ...el.querySelectorAll('*')], dst = [c, ...c.querySelectorAll('*')];
         dst.forEach((n, i) => { if (addedTab.has(src[i])) n.removeAttribute('tabindex'); });
         unrich(el, c);
-        c.querySelectorAll('[data-edit-handle], [data-edit-live], [data-edit-ghost], [data-edit-grip]').forEach(n => n.remove());
+        c.querySelectorAll('[data-edit-handle], [data-edit-live], [data-edit-ghost]').forEach(n => n.remove());
         [c, ...c.querySelectorAll('*')].forEach(n => {
             [...n.attributes].forEach(a => { if (a.name.startsWith('data-edit-') && !(keepKeys && a.name === 'data-edit-key')) n.removeAttribute(a.name); });
             n.removeAttribute('contenteditable');
@@ -1357,16 +1358,17 @@
         if (kind === 'component') return [];
         if (kind === 'data') { const tpl = listTpl(area); return tpl ? sortableChildren(tpl.parentElement) : []; }
         const out = [];
-        const walk = (c) => sortableChildren(c).forEach(ch => { if (ch.closest('[data-edit-ghost]')) return; if (ch._manifestComponent) { if (isHostEl(ch)) out.push(ch); return; } out.push(ch); if (isContainer(ch) && !isRendered(ch)) walk(ch); });
+        const walk = (c) => sortableChildren(c).forEach(ch => { if (ch.closest('[data-edit-ghost], [x-edit\\.grab]')) return; if (ch._manifestComponent) { if (isHostEl(ch)) out.push(ch); return; } out.push(ch); if (isContainer(ch) && !isRendered(ch)) walk(ch); });
         if (isContainer(area)) walk(area);
         return out;
     }
-    function unmarkPiece(el) { el.removeAttribute('data-edit-piece'); if (addedTab.has(el)) { el.removeAttribute('tabindex'); addedTab.delete(el); } }
+    function unmarkPiece(el) { el.removeAttribute('data-edit-piece'); el.removeAttribute('data-edit-grabbable'); if (addedTab.has(el)) { el.removeAttribute('tabindex'); addedTab.delete(el); } }
     function markPieces(area) {
         const want = new Set(collectPieces(area).filter(movable));
         area.querySelectorAll('[data-edit-piece]').forEach(el => { if (!want.has(el) && regionOf(el.parentElement) === area) unmarkPiece(el); });
         want.forEach(el => {
             el.setAttribute('data-edit-piece', '');
+            el.toggleAttribute('data-edit-grabbable', !!ownGrab(el));
             if (!el.hasAttribute('tabindex')) { el.tabIndex = 0; addedTab.add(el); }
         });
     }
@@ -1473,86 +1475,20 @@
         const area = this;
         if (!isActive(area) || (e.pointerType === 'mouse' && e.button !== 0) || e._editDrag) return;
         const t = e.target;
-        if (!t || t.nodeType !== 1 || t.isContentEditable || t.hasAttribute('data-edit-handle')) return;
+        if (!t || t.nodeType !== 1 || t.hasAttribute('data-edit-handle')) return;
         if (t._pieceMode) { exitPieceMode(t); return; }
         let item = null;
         for (let n = t; n && n !== area; n = n.parentElement) if (n.hasAttribute('data-edit-piece') && movable(n)) { item = n; break; }
         if (!item) return;
+        const grab = ownGrab(item);
+        if (grab) { if (!grab.contains(t)) return; e.preventDefault(); }
+        else if (typing(t)) return;                                     // in the text being typed: the drag selects
         e._editDrag = true;
         startDrag(e, item, area);
     }
-
-    /* ---- Grip: text pieces, whose surface is for typing, drag from a handle at their inline-start edge ---- */
-    let grip = null, gripFor = null, gripHovered = null, gripFocused = null, gripListening = false;
-    // Text pieces, and rows that are themselves a data field (their surface is for typing too)
-    const needsGrip = (p) => !!p && movable(p) && ((isTextEl(p) && capOf(p, 'text')) || p._editField != null);
-    function gripPiece(node, area) {
-        for (let n = node; n && n.nodeType === 1 && n !== area; n = n.parentElement) if (n.hasAttribute('data-edit-piece')) return needsGrip(n) ? n : null;
-        return null;
-    }
-    function ensureGrip() {
-        if (grip && grip.isConnected) return grip;
-        grip = document.createElement('span');
-        grip.setAttribute('data-edit-grip', '');
-        grip.setAttribute('aria-hidden', 'true');
-        grip.hidden = true;
-        grip.addEventListener('pointerdown', onGripDown);
-        grip.addEventListener('pointerleave', (e) => gripLeave(e.relatedTarget));
-        document.body.appendChild(grip);
-        if (!gripListening) {
-            gripListening = true;
-            window.addEventListener('scroll', placeGrip, { capture: true, passive: true });
-            window.addEventListener('resize', placeGrip, { passive: true });
-        }
-        return grip;
-    }
-    function placeGrip() {
-        if (!gripFor || !grip) return;
-        if (!gripFor.isConnected) return hideGrip();
-        const r = gripFor.getBoundingClientRect(), rtl = getComputedStyle(gripFor).direction === 'rtl';
-        grip.dir = rtl ? 'rtl' : 'ltr';
-        grip.style.top = r.top + 'px';
-        grip.style.left = (rtl ? r.right : r.left) + 'px';
-    }
-    function showGrip(piece) {
-        const area = regionOf(piece);
-        if (dragged || !area || area._edit.bare || piece.closest('[data-edit-area="bare"]')) return hideGrip();
-        const g = ensureGrip();
-        // The grip lives on <body>: it takes the piece's own accent and sizes
-        ['--edit-accent', '--edit-grip-size', '--edit-grip-offset'].forEach(v => { const x = rawVar(piece, v); if (x) g.style.setProperty(v, x); else g.style.removeProperty(v); });
-        gripFor = piece; placeGrip(); g.hidden = false;
-    }
-    function hideGrip() { gripFor = null; if (grip) grip.hidden = true; }
-    function gripOver(e, area) {
-        if (dragged) return;
-        const p = gripPiece(e.target, area);
-        gripHovered = p;
-        if (p) showGrip(p); else if (gripFocused) showGrip(gripFocused); else hideGrip();
-    }
-    function gripLeave(to) {
-        if (to && grip && (to === grip || (gripFor && gripFor.contains(to)))) return;
-        gripHovered = null;
-        if (gripFocused && gripFocused.isConnected) showGrip(gripFocused); else hideGrip();
-    }
-    function gripFocus(e, area) {
-        const p = gripPiece(e.target, area);
-        gripFocused = p;
-        if (p && !(gripHovered && gripHovered.isConnected)) showGrip(p);
-    }
-    function gripBlur(to) {
-        if (to && gripFocused && gripFocused.contains(to)) return;
-        gripFocused = null;
-        if (!(gripHovered && gripHovered.isConnected)) hideGrip();
-    }
-    function onGripDown(e) {
-        const piece = gripFor;
-        if (!piece || (e.pointerType === 'mouse' && e.button !== 0)) return;
-        const area = regionOf(piece);
-        if (!isActive(area) || !movable(piece)) return;
-        e.preventDefault(); e.stopPropagation();
-        hideGrip();
-        startDrag(e, piece, area);
-    }
+    // An x-edit.grab inside a piece, not a nested piece's: the only place that piece drags from.
+    const ownGrab = (item) => [...item.querySelectorAll('[x-edit\\.grab]')].find(g => g.closest('[data-edit-piece]') === item) || null;
+    const typing = (t) => { const a = document.activeElement; return !!a && a !== document.body && a.isContentEditable && (a === t || a.contains(t)); };
 
     function startDrag(e, item, area) {
         const home = item.parentElement, homeNext = groupOf(item).pop().nextElementSibling, rest = groupOf(item).slice(1);
@@ -1569,6 +1505,8 @@
         let active = false, frame = 0, px = sx, py = sy, last = null;
 
         const lift = (ev) => {
+            const a = document.activeElement; if (a && item.contains(a) && a.isContentEditable) a.blur();   // a text piece moves, it isn't typed in
+            try { window.getSelection().removeAllRanges(); } catch { }
             if (s.crossOK) areas().forEach(a => { if (a !== area && dropValid(a)) a.setAttribute('data-edit-drop-target', ''); });
             const ghost = s.ghost = item.cloneNode(true);
             unrich(item, ghost);
@@ -1601,7 +1539,7 @@
             px = ev.clientX; py = ev.clientY;
             if (!active) {
                 if (Math.hypot(px - sx, py - sy) < 5) return;
-                active = true; hideGrip(); lift(ev); paint();
+                active = true; lift(ev); paint();
             }
             ev.preventDefault();
             const drop = dropTarget(px, py, s);
@@ -1884,9 +1822,9 @@
     const showable = (v) => { try { return JSON.stringify(v) !== undefined ? JSON.parse(JSON.stringify(v)) : true; } catch { return true; } };
     function setShow(el, expr, value) { window.Alpine.evaluate(el, `${expr} = ${JSON.stringify(value)}`); }
     // Closing is logged with the size change, so one undo reopens it.
-    function closeVia(area, el, expr, join) {
-        let before;
-        try { before = showable(window.Alpine.evaluate(el, expr)); setShow(el, expr, false); } catch (err) { console.warn('[edit] could not close via x-show:', err); return false; }
+    function closeVia(area, el, expr, join, prior) {
+        let before = prior;
+        try { if (before === undefined) before = showable(window.Alpine.evaluate(el, expr)); setShow(el, expr, false); } catch (err) { console.warn('[edit] could not close via x-show:', err); return false; }
         const id = identity(el, area);
         if (id != null) pushDelta(Object.assign({ kind: 'show', region: key(area), key: id, expr, before, value: false }, join ? { join: true } : {}));
         return true;
@@ -1905,34 +1843,51 @@
         const snapW = snapStops(el, 'x', 'w'), snapH = snapStops(el, 'y', 'h');
         const closeX = lengthVar(el, '--edit-size-close', 'x', 'w'), closeY = lengthVar(el, '--edit-size-close', 'y', 'h');
         const showExpr = closeX != null || closeY != null ? closable(el) : null;
-        try { e.target.setPointerCapture && e.target.setPointerCapture(e.pointerId); } catch { }
+        let showBefore;
+        if (showExpr) { try { showBefore = showable(window.Alpine.evaluate(el, showExpr)); } catch { } }
+        const handle = e.target;
+        try { handle.setPointerCapture && handle.setPointerCapture(e.pointerId); } catch { }
+        handle.setAttribute('data-edit-resizing', '');
         showOverlay();
-        let rawW = baseW, rawH = baseH;
+        let rawW = baseW, rawH = baseH, closed = false;
+        const shut = () => ((right || left) && closeX != null && rawW < closeX) || ((top || bottom) && closeY != null && rawH < closeY);
+        // Closes live once past the close size, and reopens if dragged back out.
+        const setClosed = (v) => { if (v === closed || !showExpr) return; closed = v; try { setShow(el, showExpr, v ? false : showBefore); } catch { } };
         const move = (ev) => {
             const dx = ev.clientX - sx, dy = ev.clientY - sy;
-            if (right || left) { rawW = baseW + (right ? dx : -dx); el.style.width = toUnit(snapTo(clamp(rawW, minW, maxW), snapW, reachX), wu, el, el.parentElement, 'w') + wu; }
-            if (top || bottom) { rawH = baseH + (bottom ? dy : -dy); el.style.height = toUnit(snapTo(clamp(rawH, minH, maxH), snapH, reachY), hu, el, el.parentElement, 'h') + hu; }
+            if (right || left) rawW = baseW + (right ? dx : -dx);
+            if (top || bottom) rawH = baseH + (bottom ? dy : -dy);
+            setClosed(shut());
+            let snapped = false;
+            if (right || left) { const c = clamp(rawW, minW, maxW), v = snapTo(c, snapW, reachX); snapped = snapped || (snapW.length > 0 && v !== c); el.style.width = toUnit(v, wu, el, el.parentElement, 'w') + wu; }
+            if (top || bottom) { const c = clamp(rawH, minH, maxH), v = snapTo(c, snapH, reachY); snapped = snapped || (snapH.length > 0 && v !== c); el.style.height = toUnit(v, hu, el, el.parentElement, 'h') + hu; }
+            el.toggleAttribute('data-edit-snapped', snapped && !closed);
+            handle.toggleAttribute('data-edit-snapped', snapped && !closed);
             sizeEvent(el, false);
         };
         const end = () => {
             document.removeEventListener('pointermove', move); document.removeEventListener('pointerup', up); document.removeEventListener('pointercancel', cancel);
             hideOverlay();
+            ['data-edit-snapped', 'data-edit-resizing'].forEach(a => handle.removeAttribute(a));
+            el.removeAttribute('data-edit-snapped');
         };
         const restore = () => { if (preStyle == null) el.removeAttribute('style'); else el.setAttribute('style', preStyle); };
-        const cancel = () => { end(); restore(); sizeEvent(el, true); };
+        const cancel = () => { end(); setClosed(false); restore(); sizeEvent(el, true); };
         const up = () => {
             end();
             const shutX = (right || left) && closeX != null && rawW < closeX, shutY = (top || bottom) && closeY != null && rawH < closeY;
             if ((shutX || shutY) && showExpr) {
                 // Closed at the minimum it can have; with none, at the size it had, so it reopens sensibly.
                 const atMin = (shutX ? minW : 0) > 0 || (shutY ? minH : 0) > 0;
+                const hidden = el.style.display;                         // x-show's own hide, applied while held
                 restore();
                 if (atMin) {
                     if (shutX && minW > 0) el.style.width = toUnit(minW, wu, el, el.parentElement, 'w') + wu;
                     if (shutY && minH > 0) el.style.height = toUnit(minH, hu, el, el.parentElement, 'h') + hu;
                 }
-                const sized = commitStyle(area, el); sizeEvent(el, true);
-                closeVia(area, el, showExpr, sized);
+                const sized = commitStyle(area, el); sizeEvent(el, true);   // the hide is page state: never logged
+                if (hidden === 'none') el.style.display = 'none';
+                closeVia(area, el, showExpr, sized, showBefore);
                 return;
             }
             if (shutX || shutY) { restore(); sizeEvent(el, true); return; }   // close configured but not possible here: leave it as it was
@@ -1981,7 +1936,7 @@
         if (el._editRt || el._pieceMode) return;                         // a focused piece re-attaches when it leaves piece mode
         const RT = rtEngine();
         el._editRtPrior = ['role', 'aria-multiline'].map(a => [a, el.getAttribute(a)]);
-        const h = RT && RT.attach(el, { mode: 'inline', breaks: true, all: false, format, onChange: () => { } });
+        const h = RT && RT.attach(el, { mode: 'inline', breaks: true, enter: 'break', all: false, format, onChange: () => { } });
         if (!h) { el.setAttribute('contenteditable', 'true'); return; }
         el._editRt = h;
         el.setAttribute('data-edit-text', '');
@@ -2042,7 +1997,11 @@
         if (el._textBound) return; el._textBound = true;
         el._commitText = commit;
         el.addEventListener('focus', () => { restartRich(el); el._preEdit = leafText(el); selectAllIn(el); });
-        el.addEventListener('keydown', (e) => { if (e.key === 'Escape' && el.isContentEditable) { e.preventDefault(); e.stopImmediatePropagation(); leaveText(el); } });
+        el.addEventListener('keydown', (e) => {
+            if (!el.isContentEditable) return;
+            if (e.key === 'Escape') { e.preventDefault(); e.stopImmediatePropagation(); el.blur(); }
+            else if (e.key === 'Enter' && e.altKey && !e.shiftKey && !e.metaKey && !e.ctrlKey) { e.preventDefault(); e.stopImmediatePropagation(); leaveText(el); }
+        });
         el.addEventListener('keydown', richHistoryKey);
         noDrop(el);
         if (input) el.addEventListener('input', input);
@@ -2075,7 +2034,7 @@
         const nodes = [...area.querySelectorAll('*')];
         if (!realChildren(area).length || wholeLeaf(area)) nodes.unshift(area);   // size handles are children too
         nodes.forEach(el => {
-            if ((realChildren(el).length && !wholeLeaf(el)) || !el.textContent.trim() || el.closest('template') || el.hasAttribute('data-edit-handle')) return;
+            if ((realChildren(el).length && !wholeLeaf(el)) || !el.textContent.trim() || el.closest('template') || el.closest('[data-edit-handle], [x-edit\\.grab]')) return;
             if (el._manifestComponent && el !== area) return;          // a component host: its markup is another file's
             if (richOwned(el)) return;                                  // the rich editor owns this subtree
             if (el.closest('[contenteditable="false"]:not([data-edit-piece-mode])')) return;   // an authored non-editable island
@@ -2154,7 +2113,7 @@
             editable(el, 'html');
         });
     }
-    // Escape leaves text with the piece focused, so Alt+arrows move it.
+    // Alt+Enter leaves text with the piece focused, so Space picks it up and Alt+arrows move it.
     function leaveText(el) {
         el.blur();
         const piece = [el, ...ancestorsIn(el)].find(n => n.hasAttribute && n.hasAttribute('data-edit-piece'));
@@ -2525,10 +2484,6 @@
             area._editBound = true;
             area.addEventListener('pointerdown', onAreaPointerDown);
             area.addEventListener('keydown', (e) => { if (isActive(area)) onPieceKeydown(e, area); });
-            area.addEventListener('pointerover', (e) => { if (isActive(area)) gripOver(e, area); });
-            area.addEventListener('pointerleave', (e) => gripLeave(e.relatedTarget));
-            area.addEventListener('focusin', (e) => { if (isActive(area)) gripFocus(e, area); });
-            area.addEventListener('focusout', (e) => gripBlur(e.relatedTarget));
             // Native HTML5 drag would drop selected text into neighbouring leaves.
             area.addEventListener('dragstart', (e) => { if (isActive(area)) e.preventDefault(); });
             area.addEventListener('drop', (e) => { if (isActive(area)) e.preventDefault(); });
@@ -2543,7 +2498,6 @@
         }
     }
     function disarmArea(area) {
-        if (gripFor && area.contains(gripFor)) hideGrip();
         [area, ...area.querySelectorAll('[data-edit-area]')].forEach(e => { if (e._editPos) { e.style.removeProperty('position'); e._editPos = false; } });
         area.querySelectorAll('[data-edit-handle]').forEach(h => h.remove());
         uneditIn(area);