mnfst 0.5.217 → 0.5.219

package/lib/manifest.appwrite.data.js

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

package/lib/manifest.code.js

@@ -265,6 +265,8 @@ async function setupInline(el, hljs) {
 }
 
 function setupInlineCopy(el) {
+    if (el._copyBound) return;   // idempotent: fresh setup and the prerender re-bind share it
+    el._copyBound = true;
     if (!el.hasAttribute('role')) el.setAttribute('role', 'button');
     if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');
     if (!el.hasAttribute('aria-label')) el.setAttribute('aria-label', 'Click to copy');
@@ -350,10 +352,35 @@ async function setupBlock(pre, hljs) {
         const lang = actualLang || resolveLanguage(hljs, requested);
         setupEditor(pre, code, lang, hljs);
     }
+
+    pre._blockBound = true;   // built this session — the prerender re-bind skips it
 }
 
-function setupBlockCopy(pre, code) {
-    const btn = document.createElement('button');
+// Re-attach behavior to a block adopted from prerendered output: its copy,
+// expand and editor markup is baked, but listeners cannot survive
+// serialization. Idempotent via _blockBound (set by a fresh setupBlock too).
+function rebindBlock(pre) {
+    if (pre._blockBound) return;
+    pre._blockBound = true;
+    const code = pre.querySelector(':scope > code');
+    if (!code) return;
+    const copyBtn = pre.querySelector(':scope > button.copy');
+    if (copyBtn) setupBlockCopy(pre, code, copyBtn);
+    const expandBtn = pre.querySelector(':scope > button.expand');
+    if (expandBtn) {
+        const collapseAt = parseInt(pre.style.getPropertyValue('--collapse-lines'), 10) || 20;
+        const hiddenCount = Math.max(1, code.textContent.split('\n').length - collapseAt);
+        wireExpandButton(pre, expandBtn, hiddenCount);
+    }
+    if (pre.hasAttribute('edit')) {
+        const m = (code.className || '').match(/language-([\w-]+)/);
+        const lang = (m && m[1]) || pre.getAttribute('x-code') || pre.getAttribute('language') || '';
+        loadHighlightJS(lang).then(hljs => setupEditor(pre, code, lang, hljs)).catch(() => { });
+    }
+}
+
+function setupBlockCopy(pre, code, existingBtn) {
+    const btn = existingBtn || document.createElement('button');
     btn.className = 'copy';
     btn.type = 'button';
     btn.setAttribute('aria-label', 'Copy code to clipboard');
@@ -364,7 +391,7 @@ function setupBlockCopy(pre, code) {
             setTimeout(() => btn.classList.remove('copied'), 1500);
         } catch { /* clipboard rejected (browser permissions) — fail silently */ }
     });
-    pre.appendChild(btn);
+    if (!existingBtn) pre.appendChild(btn);
 }
 
 function setupCollapse(pre, code) {
@@ -382,9 +409,13 @@ function setupCollapse(pre, code) {
     btn.className = 'expand';
     btn.type = 'button';
     btn.setAttribute('aria-expanded', 'false');
-    const hiddenCount = lineCount - collapseAt;
-    // Visual label is locale-safe ("+N" / "−"); screen readers get an explicit
-    // English aria-label.
+    wireExpandButton(pre, btn, lineCount - collapseAt);
+    pre.appendChild(btn);
+}
+
+// Visual label is locale-safe ("+N" / "−"); screen readers get an explicit
+// English aria-label. Shared by the build path and the prerender re-bind.
+function wireExpandButton(pre, btn, hiddenCount) {
     const updateLabel = () => {
         const collapsed = pre.hasAttribute('data-collapsed');
         btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
@@ -399,7 +430,6 @@ function setupCollapse(pre, code) {
         updateLabel();
     });
     updateLabel();
-    pre.appendChild(btn);
 }
 
 async function setupEditor(pre, code, lang, hljs) {
@@ -572,26 +602,9 @@ async function setupCodeGroup(group) {
             btn.textContent = name;
             btn.setAttribute('aria-selected', name === active ? 'true' : 'false');
             btn.tabIndex = name === active ? 0 : -1;
-            btn.addEventListener('click', () => activate(name));
             tablist.appendChild(btn);
             return btn;
         });
-        tabButtons.forEach((btn, idx) => {
-            btn.addEventListener('keydown', (ev) => {
-                if (ev.key === 'ArrowRight' || ev.key === 'ArrowLeft') {
-                    ev.preventDefault();
-                    const next = ev.key === 'ArrowRight'
-                        ? (idx + 1) % tabButtons.length
-                        : (idx - 1 + tabButtons.length) % tabButtons.length;
-                    tabButtons[next].focus();
-                    tabButtons[next].click();
-                } else if (ev.key === 'Home') {
-                    ev.preventDefault(); tabButtons[0].focus(); tabButtons[0].click();
-                } else if (ev.key === 'End') {
-                    ev.preventDefault(); tabButtons[tabButtons.length - 1].focus(); tabButtons[tabButtons.length - 1].click();
-                }
-            });
-        });
     }
     if (header) pre.insertBefore(header, pre.firstChild);
 
@@ -614,37 +627,41 @@ async function setupCodeGroup(group) {
     // top-end without competing with the header's scroll region.
     const wrapperHasCopy = pre.hasAttribute('copy');
     const anyPanelCopy = [...sourcePanels, ...ambientChildren].some(p => p.hasAttribute('copy'));
-    let copyBtn = null;
     if (wrapperHasCopy || anyPanelCopy) {
-        copyBtn = document.createElement('button');
+        const copyBtn = document.createElement('button');
         copyBtn.className = 'copy';
         copyBtn.type = 'button';
         copyBtn.setAttribute('aria-label', 'Copy code to clipboard');
-        copyBtn.addEventListener('click', async () => {
-            // Prefer the <pre x-code> panel for copy (its source, not a frame's
-            // rendered text). Headerless groups pick the first ambient <pre x-code>.
-            let activePanel;
-            if (isHeaderless) {
-                activePanel = ambientChildren.find(p => p.tagName === 'PRE' && p.hasAttribute('x-code'));
-            } else {
-                const sameName = sourcePanels.filter(p => p.getAttribute('name') === activeName);
-                activePanel = sameName.find(p => p.tagName === 'PRE' && p.hasAttribute('x-code')) || sameName[0];
-            }
-            if (!activePanel) return;
-            const code = activePanel.querySelector(':scope > code') || activePanel;
-            try {
-                await navigator.clipboard.writeText(code.textContent);
-                copyBtn.classList.add('copied');
-                setTimeout(() => copyBtn.classList.remove('copied'), 1500);
-            } catch { /* clipboard rejected (browser permissions) — fail silently */ }
-        });
         pre.appendChild(copyBtn);
     }
 
+    wireGroup(pre);
+}
+
+// Attach behavior to a built group: tab activation, keyboard nav, wrapper copy.
+// Everything is derived from the built DOM, so this wires a group built this
+// session AND one adopted from prerendered output (whose listeners cannot
+// survive serialization). Idempotent via _groupBound.
+function wireGroup(pre) {
+    if (pre._groupBound) return;
+    pre._groupBound = true;
+
+    const sourcePanels = Array.from(pre.children).filter(c => c.hasAttribute('name'));
+    const ambientCode = Array.from(pre.children).filter(c =>
+        !c.hasAttribute('name') && c.tagName === 'PRE' && c.hasAttribute('x-code'));
+    const tabButtons = Array.from(pre.querySelectorAll(':scope > header [role="tab"]'));
+    const copyBtn = pre.querySelector(':scope > button.copy');
+    const wrapperHasCopy = pre.hasAttribute('copy');
+    const isHeaderless = !pre.querySelector(':scope > header');
+
+    let activeName = (tabButtons.find(b => b.getAttribute('aria-selected') === 'true')
+        || tabButtons[0] || {}).textContent
+        || (sourcePanels[0] && sourcePanels[0].getAttribute('name'))
+        || null;
+
     // Visibility toggle via style.display (pre's display:flex outweighs the UA
     // [hidden] rule). Also flips per-tab copy-button visibility when [copy] is
     // per-panel rather than on the wrapper.
-    let activeName = active;
     function activate(name) {
         activeName = name;
         tabButtons.forEach(btn => {
@@ -662,7 +679,47 @@ async function setupCodeGroup(group) {
             copyBtn.style.display = activeCanCopy ? '' : 'none';
         }
     }
-    if (!isHeaderless) activate(active);
+
+    tabButtons.forEach(btn => btn.addEventListener('click', () => activate(btn.textContent)));
+    tabButtons.forEach((btn, idx) => {
+        btn.addEventListener('keydown', (ev) => {
+            if (ev.key === 'ArrowRight' || ev.key === 'ArrowLeft') {
+                ev.preventDefault();
+                const next = ev.key === 'ArrowRight'
+                    ? (idx + 1) % tabButtons.length
+                    : (idx - 1 + tabButtons.length) % tabButtons.length;
+                tabButtons[next].focus();
+                tabButtons[next].click();
+            } else if (ev.key === 'Home') {
+                ev.preventDefault(); tabButtons[0].focus(); tabButtons[0].click();
+            } else if (ev.key === 'End') {
+                ev.preventDefault(); tabButtons[tabButtons.length - 1].focus(); tabButtons[tabButtons.length - 1].click();
+            }
+        });
+    });
+
+    if (copyBtn) {
+        copyBtn.addEventListener('click', async () => {
+            // Prefer the <pre x-code> panel for copy (its source, not a frame's
+            // rendered text). Headerless groups pick the first ambient <pre x-code>.
+            let activePanel;
+            if (isHeaderless) {
+                activePanel = ambientCode[0];
+            } else {
+                const sameName = sourcePanels.filter(p => p.getAttribute('name') === activeName);
+                activePanel = sameName.find(p => p.tagName === 'PRE' && p.hasAttribute('x-code')) || sameName[0];
+            }
+            if (!activePanel) return;
+            const code = activePanel.querySelector(':scope > code') || activePanel;
+            try {
+                await navigator.clipboard.writeText(code.textContent);
+                copyBtn.classList.add('copied');
+                setTimeout(() => copyBtn.classList.remove('copied'), 1500);
+            } catch { /* clipboard rejected (browser permissions) — fail silently */ }
+        });
+    }
+
+    if (!isHeaderless && activeName != null) activate(activeName);
 }
 
 // ─── Page scan + observation ─────────────────────────────────────────────────
@@ -754,10 +811,27 @@ function processOne(el) {
     }
 }
 
+// Prerendered pages ship groups/blocks already BUILT (data-group-processed /
+// data-code-block-built baked in), which the processing pipeline rightly skips —
+// but their listeners cannot survive serialization, so tabs, copy, expand and
+// editors arrive dead. Re-attach behavior to that adopted markup. Cheap (no
+// highlighting), so it runs eagerly rather than through the IntersectionObserver.
+function rebindAdopted(root = document) {
+    root.querySelectorAll('[x-code-group][data-group-processed="yes"]').forEach(g => {
+        wireGroup(g);
+        Array.from(g.children).forEach(c => { if (c.dataset && c.dataset.codeBlockBuilt === 'yes') rebindBlock(c); });
+    });
+    root.querySelectorAll('pre[data-code-block-built="yes"]').forEach(rebindBlock);
+    root.querySelectorAll('code[copy][data-code-processed="yes"]').forEach(el => {
+        if (!(el.parentElement && el.parentElement.tagName === 'PRE')) setupInlineCopy(el);
+    });
+}
+
 // Observe every unprocessed candidate in `root` (idempotent). Already-visible
 // elements process immediately so markdown-injected blocks render synchronously
 // instead of waiting for the next IO callback.
 function observeAll(root = document) {
+    rebindAdopted(root);
     const io = ensureObserver();
     const candidates = [
         ...root.querySelectorAll('[x-code]:not([data-code-processed])'),

package/lib/manifest.css

@@ -2929,34 +2929,44 @@
 
 @layer utilities {
 
-    /* ---- Editable area (armed) ----
-       Chrome is opt-in. Most uses of this plugin are a resize handle or a sortable
-       list, which should look like themselves; only .authoring gets the outline and
-       the region label. */
+    /* ---- Editing UI scope ----
+       ALL chrome — region outline + label, sortable grips, movable/text outlines,
+       size-handle hairlines, the floating toolbar — lives under ONE scope:
+       [data-edit-ui], on the region itself or any ancestor (e.g. <body data-edit-ui>
+       for a whole editor view). The plugin sets it on `.authoring` regions
+       automatically; everything else opts in with the attribute. A region outside
+       the scope is just as editable — it simply carries no visual cues. */
+
+    /* ---- Editable area (armed) ---- */
     :where([data-edit-armed]) {
         position: relative;
     }
 
     /* Quiet until touched. A page covered in dashed boxes reads as a diagram of
-       itself; the affordance only has to be there when you go looking for it. */
-    :where([data-edit-armed][data-edit-authoring]) {
+       itself; the affordance only has to be there when you go looking for it.
+       While an inner affordance is engaged (text caret, handle, row), the region
+       outline stands down so only the element being edited is highlighted. */
+    :where([data-edit-armed]):where([data-edit-ui], [data-edit-ui] *) {
         outline: 1px dashed transparent;
         outline-offset: 6px;
         border-radius: var(--radius);
         transition: outline-color 0.12s ease;
     }
 
-    :where([data-edit-armed][data-edit-authoring]):hover,
-    :where([data-edit-armed][data-edit-authoring]):focus-within {
+    :where([data-edit-armed]):where([data-edit-ui], [data-edit-ui] *):is(:hover, :focus-within):not(:has([contenteditable]:is(:hover, :focus), [data-edit-handle]:is(:hover, :focus), [data-edit-sortable]:is(:hover, :focus-within), [data-edit-movable]:is(:hover, :focus))) {
         outline-color: var(--color-line);
     }
 
-    :where([data-edit-armed][data-edit-authoring])::before {
+    :where([data-edit-armed]):where([data-edit-ui], [data-edit-ui] *)::before {
         content: attr(data-edit-label);
         position: absolute;
-        inset-block-start: -1.5rem;
-        inset-inline-start: 0;
+        inset-block-start: calc(-0.6em - 6px);
+        inset-inline-start: 0.5rem;
+        padding-inline: 0.3rem;
+        background: var(--color-page);
+        border-radius: 3px;
         font-size: 0.7rem;
+        line-height: 1.2;
         letter-spacing: 0.04em;
         text-transform: uppercase;
         color: var(--color-content-subtle);
@@ -2965,8 +2975,7 @@
         transition: opacity 0.12s ease;
     }
 
-    :where([data-edit-armed][data-edit-authoring]):hover::before,
-    :where([data-edit-armed][data-edit-authoring]):focus-within::before {
+    :where([data-edit-armed]):where([data-edit-ui], [data-edit-ui] *):is(:hover, :focus-within):not(:has([contenteditable]:is(:hover, :focus), [data-edit-handle]:is(:hover, :focus), [data-edit-sortable]:is(:hover, :focus-within), [data-edit-movable]:is(:hover, :focus)))::before {
         opacity: 1;
     }
 
@@ -2977,10 +2986,28 @@
         transition: opacity 0.12s ease, outline-color 0.12s ease;
     }
 
-    :where([data-edit-sortable]):hover,
-    :where([data-edit-sortable]):focus-within {
-        outline: 1px solid var(--edit-accent, var(--color-brand-content));
-        outline-offset: 3px;
+    /* The grip: the plugin's own inline drag affordance, sitting inside the row
+       at its inline start. A dot grid, revealed on approach. --edit-grip sizes
+       it; `--edit-grip: 0` removes it (e.g. for grid rows where an extra flex
+       item would take a cell). No full-row outline — the grip and the cursor
+       say "draggable" without boxing the content. */
+    :where([data-edit-ui] [data-edit-sortable], [data-edit-ui][data-edit-sortable])::before {
+        content: '';
+        align-self: center;
+        flex: 0 0 auto;
+        width: var(--edit-grip, 0.6rem);
+        height: 1rem;
+        margin-inline-end: calc(var(--edit-grip, 0.6rem) / 2);
+        background-image: radial-gradient(circle, var(--color-content-subtle) 1px, transparent 1px);
+        background-size: 0.3rem 0.3rem;
+        background-position: center;
+        opacity: 0;
+        transition: opacity 0.12s ease;
+        pointer-events: none;
+    }
+
+    :where([data-edit-ui] [data-edit-sortable], [data-edit-ui][data-edit-sortable]):is(:hover, :focus-visible)::before {
+        opacity: 0.9;
     }
 
     :where([data-edit-sortable], [data-edit-movable]):focus-visible {
@@ -3025,25 +3052,30 @@
         touch-action: none;
     }
 
-    :where([data-edit-movable]):hover {
+    :where([data-edit-ui] [data-edit-movable], [data-edit-ui][data-edit-movable]):hover {
         outline: 1px solid var(--edit-accent, var(--color-brand-content));
         outline-offset: 2px;
     }
 
-    /* ---- Inline text ---- */
-    :where([data-edit-armed]) [contenteditable="true"] {
+    /* ---- Inline text ----
+       One weight everywhere: hover hints and the focused caret both use the same
+       1px line, so focusing doesn't make the page jump a weight class. */
+    :where([data-edit-ui]) :where([data-edit-armed]) [contenteditable="true"],
+    :where([data-edit-ui])[data-edit-armed] [contenteditable="true"] {
         outline: 1px solid transparent;
         outline-offset: 2px;
         border-radius: 3px;
         transition: outline-color 0.12s ease;
     }
 
-    :where([data-edit-armed]) [contenteditable="true"]:hover {
+    :where([data-edit-ui]) :where([data-edit-armed]) [contenteditable="true"]:hover,
+    :where([data-edit-ui])[data-edit-armed] [contenteditable="true"]:hover {
         outline-color: color-mix(in oklch, var(--edit-accent, var(--color-brand-content)) 45%, transparent);
     }
 
-    :where([data-edit-armed]) [contenteditable="true"]:focus {
-        outline: 2px solid var(--edit-accent, var(--color-brand-content));
+    :where([data-edit-ui]) :where([data-edit-armed]) [contenteditable="true"]:focus,
+    :where([data-edit-ui])[data-edit-armed] [contenteditable="true"]:focus {
+        outline-color: var(--edit-accent, var(--color-brand-content));
     }
 
     /* ---- Size handles ----
@@ -3053,14 +3085,16 @@
         position: relative;
     }
 
-    /* Handles reveal on approach rather than sitting on the element permanently */
+    /* Handles reveal on approach rather than sitting on the element permanently.
+       The hairline is chrome, so it follows the [data-edit-ui] scope like every
+       other affordance; outside the scope the handles still work (hit areas and
+       resize cursors stay), they just draw nothing. */
     :where([data-edit-sizable]) :where([data-edit-handle])::before {
         opacity: 0;
         transition: opacity 0.12s ease, background-color 0.15s ease;
     }
 
-    :where([data-edit-sizable]):hover :where([data-edit-handle])::before,
-    :where([data-edit-sizable]):focus-within :where([data-edit-handle])::before {
+    :where([data-edit-ui] [data-edit-sizable], [data-edit-ui][data-edit-sizable]):is(:hover, :focus-within) :where([data-edit-handle])::before {
         opacity: 1;
     }
 
@@ -3220,8 +3254,10 @@
         }
     }
 
+    /* --edit-toolbar: none (any scope up to :root) suppresses it — e.g. a site
+       that demos .authoring regions but has its own publish flow. */
     :root[data-edit-active] :where([data-edit-toolbar]) {
-        display: flex;
+        display: var(--edit-toolbar, flex);
     }
 
     /* A popover: the top layer sits above every stacking context, so no handle,
@@ -3918,201 +3954,6 @@
     }
 }
 
-/* Manifest Resize Handles
-
-   Superseded by x-edit.size (manifest.edit.css) — kept for existing projects.
-   Self-contained: handle geometry lives here, not in a shared snippet. */
-
-@layer base, components, utilities;
-
-@layer utilities {
-
-    :where([x-resize]) {
-        position: relative;
-
-        /* Resize handle area */
-        .resize-handle {
-            position: absolute;
-            display: block;
-            width: var(--h);
-            height: var(--h);
-            z-index: 100;
-            background: transparent;
-            border: none;
-            outline: none;
-            --h: var(--spacing-resize-handle, 1rem);
-
-            /* Visible handle */
-            &::before {
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 1px;
-                height: 1px;
-                background: transparent;
-                transition: background-color 0.2s ease;
-                pointer-events: none
-            }
-
-            &:hover::before,
-            &:active::before {
-                background-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
-            }
-        }
-
-        /* Handle geometry — edges span their axis, corners stay square */
-        .resize-handle-top,
-        .resize-handle-bottom {
-            left: 0;
-            width: 100%;
-            height: var(--h);
-            cursor: ns-resize;
-
-            &::before {
-                width: 100%
-            }
-        }
-
-        .resize-handle-left,
-        .resize-handle-right,
-        .resize-handle-start,
-        .resize-handle-end {
-            top: 0;
-            width: var(--h);
-            height: 100%;
-            cursor: ew-resize;
-
-            &::before {
-                height: 100%
-            }
-        }
-
-        .resize-handle-top {
-            top: calc(var(--h) * -0.5)
-        }
-
-        .resize-handle-bottom {
-            bottom: calc(var(--h) * -0.5)
-        }
-
-        .resize-handle-left,
-        .resize-handle-top-left,
-        .resize-handle-bottom-left {
-            left: calc(var(--h) * -0.5)
-        }
-
-        .resize-handle-right,
-        .resize-handle-top-right,
-        .resize-handle-bottom-right {
-            right: calc(var(--h) * -0.5)
-        }
-
-        /* Logical edges — inset-inline-* auto-flips for RTL */
-        .resize-handle-start,
-        .resize-handle-top-start,
-        .resize-handle-bottom-start {
-            inset-inline-start: calc(var(--h) * -0.5)
-        }
-
-        .resize-handle-end,
-        .resize-handle-top-end,
-        .resize-handle-bottom-end {
-            inset-inline-end: calc(var(--h) * -0.5)
-        }
-
-        .resize-handle-top-left,
-        .resize-handle-top-right,
-        .resize-handle-top-start,
-        .resize-handle-top-end {
-            top: calc(var(--h) * -0.5)
-        }
-
-        .resize-handle-bottom-left,
-        .resize-handle-bottom-right,
-        .resize-handle-bottom-start,
-        .resize-handle-bottom-end {
-            bottom: calc(var(--h) * -0.5)
-        }
-
-        /* Corner cursors */
-        .resize-handle-top-left,
-        .resize-handle-top-start {
-            cursor: nw-resize;
-        }
-
-        .resize-handle-top-right,
-        .resize-handle-top-end {
-            cursor: ne-resize;
-        }
-
-        .resize-handle-bottom-left,
-        .resize-handle-bottom-start {
-            cursor: sw-resize;
-        }
-
-        .resize-handle-bottom-right,
-        .resize-handle-bottom-end {
-            cursor: se-resize;
-        }
-
-        /* Screen overlay to get mouse coordinates */
-        .resize-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            z-index: 9999;
-            display: none;
-            background: transparent
-        }
-
-        /* Resize states */
-        .resizable-closing {
-            opacity: 0.5;
-            transition: opacity 0.2s ease
-        }
-
-        .resizable-closed {
-            display: none !important
-        }
-
-        /* Focus states for accessibility — framework ring (manifest.theme.css) */
-        .resize-handle:focus {
-            outline: none;
-            box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 30%, transparent)
-        }
-
-        /* Reduced motion support */
-        @media (prefers-reduced-motion: reduce) {
-
-            :where(.resizable-closing,
-                .resize-handle) {
-                transition: none
-            }
-        }
-    }
-
-    /* RTL cursor flips — placement follows the logical insets in the shared geometry */
-    [dir=rtl] :where([x-resize]) .resize-handle-top-start {
-        cursor: ne-resize;
-    }
-
-    [dir=rtl] :where([x-resize]) .resize-handle-top-end {
-        cursor: nw-resize;
-    }
-
-    [dir=rtl] :where([x-resize]) .resize-handle-bottom-start {
-        cursor: se-resize;
-    }
-
-    [dir=rtl] :where([x-resize]) .resize-handle-bottom-end {
-        cursor: sw-resize;
-    }
-}
-
 /* Manifest Sidebars */
 
 @layer base, components, utilities;
@@ -4450,6 +4291,26 @@
         }
     }
 
+    /* ---- Selection menu (x-text-edit-menu) ----
+       Positioned by the --text-edit-selection-* variables the plugin writes to
+       :root, so the default needs no script; restyle or reposition freely. */
+    :where([data-text-edit-menu]) {
+        position: fixed;
+        margin: 0;
+        inset: auto;
+        left: var(--text-edit-selection-center);
+        top: var(--text-edit-selection-y);
+        transform: translate(-50%, calc(-100% - 0.5rem));
+        display: flex;
+        gap: 0.25rem;
+        align-items: center;
+        padding: 0.25rem;
+        background: var(--color-surface-1);
+        border: 1px solid var(--color-line);
+        border-radius: var(--radius);
+        box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
+    }
+
     /* ---- Controls ----
        A control is marked wherever it lives, so a toolbar is optional markup and
        never a requirement. The reset already dims [aria-disabled=true]. */

package/lib/manifest.d.ts

@@ -384,6 +384,8 @@ export interface ManifestEdit {
     paste(el?: Element): boolean;
     duplicate(el?: Element): boolean;
     remove(el?: Element): boolean;
+    /** Move a block into another static region (area element or x-edit key), before `ref` or at the end. */
+    move(el: Element | null, dest: Element | string, before?: Element | null): boolean;
     /** The addressable block containing a node, or null. */
     block(node: Element): Element | null;
 }