mnfst 0.5.218 → 0.5.219

package/lib/manifest.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.218';
+const MANIFEST_BUILD_VERSION = '0.5.219';
 
 /* Manifest Data Sources - Configuration */
 
@@ -1326,6 +1326,13 @@ function setupLocaleChangeListener() {
                 store._localeChanging = false;
                 bumpAllVersions();
             }
+        } finally {
+            // Early exits (no manifest.data) must not strand the render-ready gate
+            const store = Alpine.store('data');
+            if (store?._localeChanging) {
+                store._localeChanging = false;
+                checkAndDispatchRenderReady();
+            }
         }
     });
 }
@@ -11340,7 +11347,7 @@ function registerFilesDirective() {
 // sending a broken/empty-equal query. Retries once when auth settles further;
 // dedup by key so a source pending across repeated loads doesn't stack listeners.
 const pendingAuthRetries = new Set();
-const AUTH_RETRY_EVENTS = ['manifest:auth:initialized', 'manifest:auth:teams-loaded', 'manifest:auth:login'];
+const AUTH_RETRY_EVENTS = ['manifest:auth:initialized', 'manifest:auth:teams-loaded', 'manifest:auth:login', 'manifest:auth:anonymous'];
 function scheduleAuthRetry(dataSourceName, locale) {
     if (typeof window === 'undefined') return;
     const key = `${dataSourceName}:${locale}`;
@@ -11354,6 +11361,13 @@ function scheduleAuthRetry(dataSourceName, locale) {
     AUTH_RETRY_EVENTS.forEach(type => window.addEventListener(type, retry));
 }
 
+// Auth settled with no identity (or no auth plugin): a scoped read can't resolve until sign-in
+function authSettledSignedOut() {
+    const auth = typeof Alpine !== 'undefined' ? Alpine.store('auth') : null;
+    if (!auth) return true;
+    return auth._initialized === true && auth.isAuthenticated !== true;
+}
+
 // Client-side scope filter: Appwrite returns all accessible files, so narrow to
 // the current team to match database team-scope behavior.
 async function filterFilesByScope(files, scope) {
@@ -11857,6 +11871,13 @@ async function loadDataSource(dataSourceName, locale = 'en', options = {}) {
     const generation = sourceGeneration ? sourceGeneration(dataSourceName) : 0;
     const superseded = () => sourceGeneration && sourceGeneration(dataSourceName) !== generation;
 
+    // Signed out: settle empty (not $loading forever); sign-in reloads via the auth retry
+    const settleSignedOut = () => {
+        if (isInitializing || superseded() || !authSettledSignedOut()) return false;
+        updateStore(dataSourceName, [], { loading: false, error: null, ready: true });
+        return true;
+    };
+
     return runDeduped(cacheKey, async () => {
         let landed = false;
         try {
@@ -11933,9 +11954,10 @@ async function loadDataSource(dataSourceName, locale = 'en', options = {}) {
                         ? await window.ManifestDataQueries.buildAppwriteQueries(queriesConfig.default || queriesConfig, scope, scopeColumns)
                         : await window.ManifestDataQueries.buildAppwriteQueries([], scope, scopeColumns);
 
-                    // Not ready (auth/scope unresolved): skip this read, stay pending, retry on an auth event
+                    // Not ready (auth/scope unresolved): skip this read, retry on an auth event
                     if (queries === null) {
                         scheduleAuthRetry(dataSourceName, locale);
+                        if (settleSignedOut()) landed = true;
                         return null;
                     }
 
@@ -11974,6 +11996,7 @@ async function loadDataSource(dataSourceName, locale = 'en', options = {}) {
                     // Not ready (a $auth. arg in queriesConfig unresolved): skip, retry on an auth event
                     if (queries === null) {
                         scheduleAuthRetry(dataSourceName, locale);
+                        if (settleSignedOut()) landed = true;
                         return null;
                     }
 

package/lib/manifest.defer.js

@@ -135,7 +135,7 @@ function register(el, rule, opts) {
     };
     wire(rec);
     if (rule === 'route') routes.add(rec);
-    else if (!rec.lazy) { pending.add(rec); schedule(); }
+    else if (!rec.lazy) { addPending(rec); if (!el.closest('[x-route][hidden]')) track(rec); schedule(); }
     return rec;
 }
 
@@ -143,7 +143,7 @@ function render(rec, viaPrewarm) {
     if (rec.rendered) { if (!viaPrewarm && warm.delete(rec)) schedule(); return; }
     rec.rendered = true;
     pending.delete(rec);
-    if (viaPrewarm) warm.add(rec); else warm.delete(rec);
+    if (viaPrewarm) warm.add(rec); else { warm.delete(rec); untrack(rec); }
     const { el, tpl } = rec;
     const content = rec.discard ? tpl.content.cloneNode(true) : tpl.content;
     Alpine.mutateDom(() => {
@@ -165,11 +165,12 @@ function teardown(rec) {
     });
 }
 
-// Evict a warm, still-closed, never-opened container back to its stash (least reachable first)
+// Evict a warm, still-closed, never-opened container back to its stash (non-urgent, least reachable first)
 function restash(rec) {
     if (!rec.rendered) return;
     rec.rendered = false;
     rec.near = undefined;
+    rec.urgent = false; // evicted: back to plain prewarm order, or it re-renders and evicts forever
     const { el, tpl } = rec;
     Alpine.mutateDom(() => {
         Array.from(el.children).forEach((child) => Alpine.destroyTree(child));
@@ -177,7 +178,7 @@ function restash(rec) {
         el.appendChild(tpl);
     });
     warm.delete(rec);
-    pending.add(rec);
+    addPending(rec);
 }
 
 function evict() {
@@ -186,10 +187,9 @@ function evict() {
     while (warm.size > PREWARM_CAP) {
         let victim = null, score = -1;
         for (const rec of warm) {
-            if (!rec.el.isConnected) { warm.delete(rec); continue; }
+            if (!rec.el.isConnected) { warm.delete(rec); untrack(rec); continue; }
             if (rec.rule === 'popover' && isPopoverOpen(rec.el)) continue;
-            if (rec.near === undefined) rec.near = nearViewport(rec);
-            const sc = (reachable(rec.el) ? 0 : 2) + (rec.near ? 0 : 1);
+            const sc = (rec.urgent ? 0 : 4) + (reachable(rec) ? 0 : 2) + (isNear(rec) ? 0 : 1);
             if (sc > score) { victim = rec; score = sc; }
         }
         if (!victim) return;
@@ -261,15 +261,15 @@ function cancelIdle() {
 }
 
 // A gesture that revealed a pane (tab switch, panel open) makes its containers urgent
-function promoteNearViewport() {
+function promoteNearViewport(first) {
     if (!ready || !bootDrained) return;
+    if (first) refreshInvokers();
     // The on-screen containers nearest the gesture point (a revealed pane sits under the click)
     const candidates = [];
-    for (const rec of pending) {
-        if (rec.urgent || !rec.el.isConnected || !reachable(rec.el)) continue;
-        const r = anchorRect(rec);
-        rec.near = !!r && r.bottom > 0 && r.top < window.innerHeight && r.right > 0 && r.left < window.innerWidth;
-        if (!rec.near) continue;
+    for (const rec of reachablePending()) {
+        if (rec.urgent || !pending.has(rec) || !rec.el.isConnected) continue;
+        const r = nearRect(rec);
+        if (!r) continue;
         const dx = Math.max(r.left - gestureX, 0, gestureX - r.right);
         const dy = Math.max(r.top - gestureY, 0, gestureY - r.bottom);
         candidates.push([dx * dx + dy * dy, rec]);
@@ -283,49 +283,159 @@ function promoteNearViewport() {
 }
 function onGesture(e) {
     lastGestureAt = now();
+    bumpReach();
     if (e && typeof e.clientX === 'number' && (e.clientX || e.clientY)) { gestureX = e.clientX; gestureY = e.clientY; }
     if (now() - lastPromoteAt < 300) return;
     clearTimeout(promoteTimer);
     lastPromoteAt = now();
     // Three passes: a revealed pane lays out and mounts its menus over the next few hundred ms
-    promoteTimer = setTimeout(() => { promoteNearViewport(); promoteTimer = setTimeout(() => { promoteNearViewport(); promoteTimer = setTimeout(promoteNearViewport, 400); }, 150); }, 50);
+    promoteTimer = setTimeout(() => { promoteNearViewport(true); promoteTimer = setTimeout(() => { promoteNearViewport(); promoteTimer = setTimeout(promoteNearViewport, 400); }, 150); }, 50);
+}
+
+// Only containers the user can reach: not under a hidden route (cached until the next gesture or route change)
+let reachEpoch = 0;
+let pool = null, poolEpoch = -1;   // reachable subset of pending, rebuilt once per epoch
+const bumpReach = () => { reachEpoch++; };
+function reachablePending() {
+    if (pool && poolEpoch === reachEpoch && pool.length < pending.size * 2 + 64) return pool;
+    poolEpoch = reachEpoch;
+    pool = [];
+    for (const rec of pending) {
+        if (!rec.el.isConnected) { pending.delete(rec); untrack(rec); continue; }
+        if (reachable(rec)) { track(rec); pool.push(rec); } else untrack(rec);
+    }
+    return pool;
+}
+function addPending(rec) {
+    pending.add(rec);
+    if (pool && poolEpoch === reachEpoch && reachable(rec)) { track(rec); pool.push(rec); }
+}
+function reachable(rec) {
+    if (rec.reachAt !== reachEpoch) { rec.reachAt = reachEpoch; rec.reach = !rec.el.closest('[x-route][hidden]'); }
+    return rec.reach;
+}
+
+// ---- Geometry: IntersectionObserver keeps near/box per record; sync reads only until it reports ----
+
+let io = null;
+const anchors = new Map();       // anchor el -> { recs, box, near, seen }
+const MAX_DEPTH = 6;
+
+function ioReady() {
+    if (io === null) io = typeof IntersectionObserver === 'function' ? new IntersectionObserver(onIntersect) : false;
+    return io;
+}
+
+function applyAnchor(rec, a) {
+    if (!a.box && rec.depth + 1 < MAX_DEPTH && rec.anchor.parentElement) { anchorTo(rec, rec.anchor.parentElement, rec.depth + 1); return; }
+    rec.box = a.box;
+    rec.ioNear = a.near;
+}
+
+function onIntersect(entries) {
+    for (const e of entries) {
+        const a = anchors.get(e.target);
+        if (!a) continue;
+        const r = e.boundingClientRect;
+        a.seen = true;
+        a.box = (r.width || r.height) ? r : null;
+        a.near = !!a.box && e.isIntersecting;
+        for (const rec of Array.from(a.recs)) applyAnchor(rec, a);
+    }
+}
+
+function anchorTo(rec, el, depth) {
+    untrack(rec);
+    rec.anchor = el; rec.depth = depth; rec.box = undefined; rec.ioNear = undefined;
+    let a = anchors.get(el);
+    if (!a) { anchors.set(el, a = { recs: new Set(), box: undefined, near: false, seen: false }); io.observe(el); }
+    a.recs.add(rec);
+    if (a.seen) applyAnchor(rec, a);
+}
+
+function untrack(rec) {
+    const el = rec.anchor;
+    if (!el) return;
+    rec.anchor = null; rec.box = undefined; rec.ioNear = undefined;
+    const a = anchors.get(el);
+    if (!a) return;
+    a.recs.delete(rec);
+    if (!a.recs.size) { anchors.delete(el); io.unobserve(el); }
 }
 
-// Only containers the user can reach: not under a hidden route; visible parents first
-const reachable = (el) => !el.closest('[x-route][hidden]');
 // Judge by the invoker (popovertarget / aria-controls), else the nearest ancestor with a box
+function invokerFor(rec, map) {
+    const el = rec.el;
+    if (!el.id) return null;
+    if (map) return map.get(el.id) || null;
+    if (!window.CSS || !CSS.escape) return null;
+    const id = CSS.escape(el.id);
+    return document.querySelector(`[popovertarget="${id}"], [aria-controls="${id}"]`);
+}
+
+function track(rec) {
+    if (rec.anchor || !ioReady() || !rec.el.isConnected) return;
+    if (rec.invoker === undefined) rec.invoker = invokerFor(rec);
+    const start = (rec.invoker && rec.invoker.isConnected) ? rec.invoker : rec.el.parentElement;
+    if (start) anchorTo(rec, start, 0);
+}
+
+// Late invokers / late-bound ids: once per gesture, re-anchor tracked records that had none
+function refreshInvokers() {
+    if (!io) return;
+    const orphans = [];
+    for (const rec of reachablePending()) if (!rec.invoker && rec.anchor && rec.el.id && pending.has(rec)) orphans.push(rec);
+    if (!orphans.length) return;
+    let map = null;
+    if (orphans.length > 8) {
+        map = new Map();
+        for (const inv of document.querySelectorAll('[popovertarget], [aria-controls]')) {
+            const id = inv.getAttribute('popovertarget') || inv.getAttribute('aria-controls');
+            if (id && !map.has(id)) map.set(id, inv);
+        }
+    }
+    for (const rec of orphans) {
+        const inv = invokerFor(rec, map);
+        if (inv) { rec.invoker = inv; anchorTo(rec, inv, 0); }
+    }
+}
+
 // Rect of the invoker or the nearest boxed ancestor (null when nothing has a box)
 function anchorRect(rec) {
     const el = rec.el;
-    if (!rec.invoker && el.id && window.CSS && CSS.escape) {
-        const id = CSS.escape(el.id);
-        rec.invoker = document.querySelector(`[popovertarget="${id}"], [aria-controls="${id}"]`) || null;
-    }
+    if (rec.invoker === undefined || (rec.invoker === null && !io)) rec.invoker = invokerFor(rec);
     let p = (rec.invoker && rec.invoker.isConnected) ? rec.invoker : el.parentElement;
-    for (let depth = 0; p && depth < 6; p = p.parentElement, depth++) {
+    for (let depth = 0; p && depth < MAX_DEPTH; p = p.parentElement, depth++) {
         const r = p.getBoundingClientRect();
         if (r.width || r.height) return r;
     }
     return null;
 }
-function nearViewport(rec) {
+const inViewport = (r) => !!r && r.bottom > 0 && r.top < window.innerHeight && r.right > 0 && r.left < window.innerWidth;
+
+// On-screen rect for ranking, or null when off-screen / boxless
+function nearRect(rec) {
+    if (rec.box !== undefined) return rec.ioNear ? rec.box : null;
     const r = anchorRect(rec);
-    return !!r && r.bottom > 0 && r.top < window.innerHeight && r.right > 0 && r.left < window.innerWidth;
+    rec.near = inViewport(r);
+    return rec.near ? r : null;
+}
+function isNear(rec) {
+    if (rec.box !== undefined) return !!rec.ioNear;
+    if (rec.near === undefined) rec.near = inViewport(anchorRect(rec));
+    return rec.near;
 }
 function rank(rec) {
-    if (rec.near === undefined) rec.near = nearViewport(rec);
-    return (rec.urgent ? 0 : 4) + (rec.near ? 0 : 2);
+    return (rec.urgent ? 0 : 4) + (isNear(rec) ? 0 : 2);
 }
 function next() {
     let best = null, bestRank = 0;
-    for (const rec of pending) {
-        if (!rec.el.isConnected) { pending.delete(rec); continue; }
-        if (!reachable(rec.el)) continue;
+    for (const rec of reachablePending()) {
+        if (!pending.has(rec)) continue;
+        if (!rec.el.isConnected) { pending.delete(rec); untrack(rec); continue; }
         const r = rank(rec);
-        if (!best
-            || r < bestRank
-            || (r === bestRank && (rec.priority < best.priority
-                || (rec.priority === best.priority && (best.el.compareDocumentPosition(rec.el) & Node.DOCUMENT_POSITION_PRECEDING))))) {
+        // Ties keep registration order: document order for the initial walk, mount order after
+        if (!best || r < bestRank || (r === bestRank && rec.priority < best.priority)) {
             best = rec; bestRank = r;
         }
     }
@@ -347,7 +457,7 @@ function schedule() {
             const rec = next();
             if (!rec) break;
             if (!rec.urgent && warm.size >= PREWARM_CAP) break;   // cap = max warm; only urgent renders may exceed it
-            for (const other of pending) other.near = undefined;
+            if (!io) for (const other of pending) other.near = undefined;
             render(rec, true);
             n++;
         }
@@ -394,6 +504,7 @@ function initializeDeferPlugin() {
     Alpine.directive('defer', () => { });
     if (!killed) Alpine.interceptInit(Alpine.skipDuringClone(intercept));
     ['pointerdown', 'keydown'].forEach((type) => document.addEventListener(type, onGesture, { capture: true, passive: true }));
+    ['manifest:route-change', 'manifest:components-processed'].forEach((type) => window.addEventListener(type, bumpReach));
     armReady();
 }
 
@@ -403,7 +514,7 @@ window.ManifestDefer = {
     render: (el) => { if (el && el.__mnfstDefer) render(el.__mnfstDefer); },
     isPending: (el) => !!(el && el.__mnfstDefer && !el.__mnfstDefer.rendered),
     stats: () => ({
-        pending: pending.size, warm: warm.size, cap: PREWARM_CAP, ready, bootDrained, armed: idleHandle !== null,
+        pending: pending.size, warm: warm.size, cap: PREWARM_CAP, ready, bootDrained, armed: idleHandle !== null, observed: anchors.size,
         head: (() => { const h = next(); return h ? (h.el.id || h.el.tagName) : null; })(),
         routes: { enabled: routesOn(), stashed: Array.from(routes).filter((r) => !r.rendered).length, rendered: Array.from(routes).filter((r) => r.rendered).length }
     })

package/lib/manifest.edit.css

@@ -9,34 +9,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);
@@ -45,8 +55,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;
     }
 
@@ -57,10 +66,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 {
@@ -105,25 +132,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 ----
@@ -133,14 +165,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;
     }
 
@@ -300,8 +334,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,