@jxsuite/studio 0.28.2 → 0.28.4

package/src/panels/left-panel.ts

@@ -11,26 +11,36 @@ import { html, render as litRender, nothing } from "lit-html";
 import type { TemplateResult } from "lit-html";
 import { leftPanel, updateSession } from "../store";
 import { effect, effectScope } from "../reactivity";
-import { createPanelScheduler, type PanelScheduler } from "./panel-scheduler";
+import { createPanelScheduler } from "./panel-scheduler";
+import type { PanelScheduler } from "./panel-scheduler";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { transact, mutateUpdateFrontmatter } from "../tabs/transact";
+import { mutateUpdateFrontmatter, transact } from "../tabs/transact";
 import type { GitDiffState, JsonValue } from "../types";
+import type { JxHeadEntry, JxMutableNode } from "@jxsuite/schema/types";
 
 import { renderLayersTemplate } from "./layers-panel";
 import { renderStylebookLayersTemplate } from "./stylebook-layers-panel";
 import { renderElementsTemplate } from "./elements-panel";
 import { selectStylebookTag, stylebookMeta } from "./stylebook-panel";
+import type { renderImportsTemplate } from "./imports-panel";
+import type { renderSignalsTemplate } from "./signals-panel";
+import type { renderDataExplorerTemplate } from "./data-explorer";
+import type { renderHeadTemplate } from "./head-panel";
+import type { renderGitPanel } from "./git-panel";
+import type { EffectScope } from "@vue/reactivity";
 
 interface LeftPanelCtx {
   getCanvasMode: () => string;
   setCanvasMode: (mode: string) => void;
-  renderImportsTemplate: (...args: any[]) => TemplateResult;
-  renderFilesTemplate: (...args: any[]) => TemplateResult;
-  renderSignalsTemplate: (...args: any[]) => TemplateResult;
-  renderDataExplorerTemplate: (...args: any[]) => TemplateResult;
-  renderHeadTemplate: (...args: any[]) => TemplateResult;
-  renderGitPanel: (...args: any[]) => TemplateResult;
+  // Renderers injected from studio.ts (dependency inversion avoids circular imports);
+  // Typed against their implementations so call sites stay checked.
+  renderImportsTemplate: typeof renderImportsTemplate;
+  renderFilesTemplate: () => TemplateResult;
+  renderSignalsTemplate: typeof renderSignalsTemplate;
+  renderDataExplorerTemplate: typeof renderDataExplorerTemplate;
+  renderHeadTemplate: typeof renderHeadTemplate;
+  renderGitPanel: typeof renderGitPanel;
   renderCanvas: () => void;
   defCategory: (def: unknown) => string;
   defBadgeLabel: (def: unknown) => string;
@@ -48,7 +58,7 @@ interface LeftPanelCtx {
 
 let _ctx: LeftPanelCtx | null = null;
 
-let _scope: import("@vue/reactivity").EffectScope | null = null;
+let _scope: EffectScope | null = null;
 
 let _scheduler: PanelScheduler | null = null;
 
@@ -59,7 +69,7 @@ let _scheduler: PanelScheduler | null = null;
  */
 export function mount(ctx: LeftPanelCtx) {
   _ctx = ctx;
-  _scheduler = createPanelScheduler({ root: leftPanel, render: _doRender });
+  _scheduler = createPanelScheduler({ render: _doRender, root: leftPanel });
   _scheduler.bindFocus();
   _scope = effectScope();
   _scope.run(() => {
@@ -98,27 +108,42 @@ export function render() {
 
 /** Actual DOM paint, invoked by the scheduler. Includes a Lit-marker-corruption recovery retry. */
 function _doRender() {
-  if (!_ctx) return;
+  if (!_ctx) {
+    return;
+  }
   try {
     _render();
-  } catch (e) {
-    console.error("left-panel render error:", e);
+  } catch (error) {
+    console.error("left-panel render error:", error);
     try {
       leftPanel.textContent = "";
-      // @ts-ignore — clear Lit's internal state to recover from marker corruption
+      // @ts-expect-error — clear Lit's internal state to recover from marker corruption
       delete leftPanel["_$litPart$"];
       _render();
-    } catch (e2) {
-      console.error("left-panel retry failed:", e2);
+    } catch (retryError) {
+      console.error("left-panel retry failed:", retryError);
     }
   }
 
   if (view.leftTab === "layers") {
     const sel = leftPanel.querySelector(".layer-row.selected");
-    if (sel) sel.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    if (sel) {
+      sel.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
   }
 }
 
+/** Overlay content-mode frontmatter title/$head onto the document for the head panel. */
+function buildHeadDoc(doc: JxMutableNode, fm: Record<string, unknown>): JxMutableNode {
+  const title = fm.title as string | undefined;
+  const $head = fm.$head as JxHeadEntry[] | undefined;
+  return {
+    ...doc,
+    ...(title !== undefined ? { title } : {}),
+    ...($head !== undefined ? { $head } : {}),
+  };
+}
+
 function _render() {
   const ctx = _ctx as LeftPanelCtx;
   const tab = view.leftTab;
@@ -128,23 +153,25 @@ function _render() {
   if (tab === "files") {
     litRender(html`<div class="panel-body">${ctx.renderFilesTemplate()}</div>`, leftPanel);
     const tree = leftPanel.querySelector(".file-tree") as HTMLElement | null;
-    if (tree) ctx.setupTreeKeyboard(tree);
+    if (tree) {
+      ctx.setupTreeKeyboard(tree);
+    }
     ctx.registerFileTreeDnD({ renderLeftPanel: render });
     return;
   }
 
   if (tab === "git") {
     const aTab = activeTab.value;
-    const S = aTab ? { ui: aTab.session.ui } : { ui: {} };
-    litRender(html`<div class="panel-body">${ctx.renderGitPanel(S, ctx)}</div>`, leftPanel);
+    const ui: Parameters<LeftPanelCtx["renderGitPanel"]>[0]["ui"] = aTab ? aTab.session.ui : {};
+    litRender(html`<div class="panel-body">${ctx.renderGitPanel({ ui }, ctx)}</div>`, leftPanel);
     return;
   }
 
   if (tab === "blocks") {
     const content = renderElementsTemplate({
-      webdata: ctx.webdata,
       defaultDef: ctx.defaultDef,
       rerender: render,
+      webdata: ctx.webdata,
     } as Parameters<typeof renderElementsTemplate>[0]);
     litRender(html`<div class="panel-body">${content}</div>`, leftPanel);
     ctx.registerElementsDnD();
@@ -171,18 +198,18 @@ function _render() {
    *   documentPath?: string;
    * }}
    */ {
-    ui: aTab.session.ui,
-    document: aTab.doc.document,
-    mode: aTab.doc.mode,
-    selection: aTab.session.selection,
     canvas: aTab.session.canvas,
     content: aTab.doc.content,
+    document: aTab.doc.document,
     documentPath: aTab.documentPath,
+    mode: aTab.doc.mode,
+    selection: aTab.session.selection,
+    ui: aTab.session.ui,
   };
 
   /** @type {TemplateResult | typeof nothing} */
   let content;
-  if (tab === "layers")
+  if (tab === "layers") {
     content =
       ctx.getCanvasMode() === "stylebook"
         ? renderStylebookLayersTemplate({
@@ -193,59 +220,65 @@ function _render() {
             navigateToComponent: ctx.navigateToComponent,
             rerender: render,
           });
-  else if (tab === "imports")
+  } else if (tab === "imports") {
     content = ctx.renderImportsTemplate({
-      renderLeftPanel: render,
-      documentPath: S.documentPath,
-      documentElements: S.document.$elements || [],
-      applyMutation: (fn: (doc: object) => void) => {
+      applyMutation: (fn: (doc: JxMutableNode) => void) => {
         transact(activeTab.value, fn);
       },
+      documentElements: S.document.$elements || [],
+      documentPath: S.documentPath,
+      renderLeftPanel: render,
     });
-  else if (tab === "state")
+  } else if (tab === "state") {
     content = ctx.renderSignalsTemplate(S, {
-      renderLeftPanel: render,
       renderCanvas: ctx.renderCanvas,
+      renderLeftPanel: render,
       updateSession,
     });
-  else if (tab === "data")
-    content = ctx.renderDataExplorerTemplate(S.document.state, S.canvas?.scope ?? null, {
+  } else if (tab === "data") {
+    content = ctx.renderDataExplorerTemplate(S.document.state ?? {}, S.canvas?.scope ?? null, {
+      defBadgeLabel: ctx.defBadgeLabel,
+      defCategory: ctx.defCategory,
       renderCanvas: ctx.renderCanvas,
       renderLeftPanel: render,
-      defCategory: ctx.defCategory,
-      defBadgeLabel: ctx.defBadgeLabel,
     });
-  else if (tab === "head") {
+  } else if (tab === "head") {
     const isContent = S.mode === "content";
     const fm = S.content?.frontmatter ?? {};
-    const headDoc = isContent ? { ...S.document, title: fm.title, $head: fm.$head } : S.document;
+    const headDoc = isContent ? buildHeadDoc(S.document, fm) : S.document;
     content = ctx.renderHeadTemplate({
-      document: headDoc,
       applyMutation: isContent
-        ? (fn: (doc: object) => void) => {
-            const tab = activeTab.value!;
-            const fm = (tab.doc.content?.frontmatter ?? {}) as Record<string, unknown>;
-            const fmHead = fm.$head as unknown[] | undefined;
-            const tmp = {
-              title: fm.title,
-              $head: fmHead ? [...fmHead] : undefined,
+        ? (fn: (doc: JxMutableNode) => void) => {
+            const tabNow = activeTab.value!;
+            const fmNow = (tabNow.doc.content?.frontmatter ?? {}) as Record<string, unknown>;
+            const fmHead = fmNow.$head as JxHeadEntry[] | undefined;
+            const tmp: JxMutableNode = {
+              ...(typeof fmNow.title === "string" ? { title: fmNow.title } : {}),
+              ...(fmHead ? { $head: [...fmHead] } : {}),
             };
             fn(tmp);
-            if (tmp.title !== fm.title)
-              mutateUpdateFrontmatter(tab, "title", tmp.title as JsonValue);
+            if (tmp.title !== fmNow.title) {
+              mutateUpdateFrontmatter(tabNow, "title", tmp.title as JsonValue);
+            }
             const newHead = tmp.$head && tmp.$head.length > 0 ? tmp.$head : undefined;
-            mutateUpdateFrontmatter(tab, "$head", /** @type {JsonValue} */ newHead);
+            // JxHeadEntry[] is JSON document content by construction.
+            mutateUpdateFrontmatter(tabNow, "$head", newHead as JsonValue);
             render();
           }
-        : (fn: (doc: object) => void) => {
+        : (fn: (doc: JxMutableNode) => void) => {
             transact(activeTab.value, fn);
           },
+      document: headDoc,
       renderLeftPanel: render,
     });
-  } else content = nothing;
+  } else {
+    content = nothing;
+  }
 
   litRender(html`<div class="panel-body">${content}</div>`, leftPanel);
 
   // Post-render side effects
-  if (tab === "layers" && ctx.getCanvasMode() !== "stylebook") ctx.registerLayersDnD();
+  if (tab === "layers" && ctx.getCanvasMode() !== "stylebook") {
+    ctx.registerLayersDnD();
+  }
 }

package/src/panels/overlays.ts

@@ -10,8 +10,9 @@ import { canvasPanels, pathsEqual } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { findCanvasElement, getActivePanel, effectiveZoom } from "../canvas/canvas-helpers";
+import { effectiveZoom, findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
 import { layoutElements } from "../canvas/canvas-live-render";
+import type { EffectScope } from "@vue/reactivity";
 
 interface OverlayBox {
   cls: string;
@@ -31,7 +32,7 @@ interface OverlaysCtx {
 
 let _ctx: OverlaysCtx | null = null;
 
-let _scope: import("@vue/reactivity").EffectScope | null = null;
+let _scope: EffectScope | null = null;
 
 let _scheduled = false;
 
@@ -46,7 +47,9 @@ export function mount(ctx: OverlaysCtx) {
   _scope.run(() => {
     effect(() => {
       const tab = activeTab.value;
-      if (!tab) return;
+      if (!tab) {
+        return;
+      }
       // Track selection, hover, and mode
       void tab.session.selection;
       void tab.session.hover;
@@ -63,7 +66,9 @@ export function unmount() {
 }
 
 export function render() {
-  if (!_ctx) return;
+  if (!_ctx) {
+    return;
+  }
   if (!_scheduled) {
     _scheduled = true;
     queueMicrotask(_flush);
@@ -72,9 +77,13 @@ export function render() {
 
 function _flush() {
   _scheduled = false;
-  if (!_ctx) return;
+  if (!_ctx) {
+    return;
+  }
   const tab = activeTab.value;
-  if (!tab) return;
+  if (!tab) {
+    return;
+  }
   const { selection, hover } = tab.session;
   const { stylebookTab } = tab.session.ui;
   const canvasMode = _ctx.getCanvasMode();
@@ -112,10 +121,12 @@ function _flush() {
     const boxes: OverlayBox[] = [];
 
     // Batch layout reads: read viewport geometry once per panel
-    if (!p.viewport) continue;
+    if (!p.viewport) {
+      continue;
+    }
     const vpRect = p.viewport.getBoundingClientRect();
-    const scrollTop = p.viewport.scrollTop;
-    const scrollLeft = p.viewport.scrollLeft;
+    const { scrollTop } = p.viewport;
+    const { scrollLeft } = p.viewport;
     const scale = effectiveZoom();
 
     if (hover && !pathsEqual(hover, selection)) {
@@ -124,12 +135,14 @@ function _flush() {
         const elRect = el.getBoundingClientRect();
         const desc: OverlayBox = {
           cls: "overlay-box overlay-hover",
-          top: `${(elRect.top - vpRect.top + scrollTop) / scale}px`,
+          height: `${elRect.height / scale}px`,
           left: `${(elRect.left - vpRect.left + scrollLeft) / scale}px`,
+          top: `${(elRect.top - vpRect.top + scrollTop) / scale}px`,
           width: `${elRect.width / scale}px`,
-          height: `${elRect.height / scale}px`,
         };
-        if (layoutElements.has(el)) desc.isLayout = true;
+        if (layoutElements.has(el)) {
+          desc.isLayout = true;
+        }
         boxes.push(desc);
       }
     }
@@ -140,13 +153,17 @@ function _flush() {
         const elRect = el.getBoundingClientRect();
         const desc: OverlayBox = {
           cls: "overlay-box overlay-selection",
-          top: `${(elRect.top - vpRect.top + scrollTop) / scale}px`,
+          height: `${elRect.height / scale}px`,
           left: `${(elRect.left - vpRect.left + scrollLeft) / scale}px`,
+          top: `${(elRect.top - vpRect.top + scrollTop) / scale}px`,
           width: `${elRect.width / scale}px`,
-          height: `${elRect.height / scale}px`,
         };
-        if (view.componentInlineEdit || _ctx.isEditing()) desc.border = "none";
-        if (layoutElements.has(el)) desc.isLayout = true;
+        if (view.componentInlineEdit || _ctx.isEditing()) {
+          desc.border = "none";
+        }
+        if (layoutElements.has(el)) {
+          desc.isLayout = true;
+        }
         boxes.push(desc);
       }
     }
@@ -159,11 +176,11 @@ function _flush() {
             <div
               class="${b.cls}${b.isLayout ? " overlay-layout" : ""}"
               style=${styleMap({
-                top: b.top,
+                border: b.border,
+                height: b.height,
                 left: b.left,
+                top: b.top,
                 width: b.width,
-                height: b.height,
-                border: b.border,
               })}
             >
               ${b.isLayout ? html`<span class="overlay-layout-badge">Layout</span>` : nothing}

package/src/panels/panel-events.ts

@@ -6,22 +6,27 @@
  */
 
 import {
-  updateUi,
-  elToPath,
-  pathsEqual,
-  parentElementPath,
   childIndex,
+  elToPath,
   getNodeAtPath,
+  parentElementPath,
+  pathsEqual,
   renderOnly,
+  updateUi,
 } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { stopEditing, isEditing, isEditableBlock } from "../editor/inline-edit";
+import { isEditableBlock, isEditing, stopEditing } from "../editor/inline-edit";
 import { showContextMenu } from "../editor/context-menu";
 import * as insertionHelper from "../editor/insertion-helper";
 import { defaultDef } from "../panels/shared";
-import { bubbleInlinePath, findCanvasElement, effectiveZoom } from "../canvas/canvas-helpers";
-import { layoutElements, activeLayoutPath } from "../canvas/canvas-live-render";
+import {
+  bubbleInlinePath,
+  effectiveZoom,
+  findCanvasElement,
+  panelMediaToActiveMedia,
+} from "../canvas/canvas-helpers";
+import { activeLayoutPath, layoutElements } from "../canvas/canvas-live-render";
 import type { CanvasPanel } from "./canvas-dnd";
 import type { JxPath } from "../state";
 
@@ -55,11 +60,15 @@ export function registerPanelEvents(panel: CanvasPanel) {
   /** @param {() => unknown} fn */
   function withPanelPointerEvents(fn: () => unknown) {
     const els = canvas.querySelectorAll("*") as NodeListOf<HTMLElement>;
-    for (const el of els) el.style.pointerEvents = "auto";
+    for (const el of els) {
+      el.style.pointerEvents = "auto";
+    }
     overlayClk.style.display = "none";
     const result = fn();
     overlayClk.style.display = "";
-    for (const el of els) el.style.pointerEvents = "none";
+    for (const el of els) {
+      el.style.pointerEvents = "none";
+    }
     return result;
   }
 
@@ -74,8 +83,9 @@ export function registerPanelEvents(panel: CanvasPanel) {
           e.clientX <= r.right &&
           e.clientY >= r.top &&
           e.clientY <= r.bottom
-        )
+        ) {
           return;
+        }
       }
       if (isEditing()) {
         stopEditing();
@@ -88,7 +98,9 @@ export function registerPanelEvents(panel: CanvasPanel) {
         document.elementsFromPoint(e.clientX, e.clientY),
       ) as Element[];
 
-      if (!tab) return;
+      if (!tab) {
+        return;
+      }
 
       for (const el of elements) {
         if (canvas.contains(el) && el !== canvas) {
@@ -103,8 +115,8 @@ export function registerPanelEvents(panel: CanvasPanel) {
 
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            let path = bubbleInlinePath(tab.doc.document, originalPath);
-            const newMedia = mediaName === "base" ? null : (mediaName ?? null);
+            const path = bubbleInlinePath(tab.doc.document, originalPath);
+            const newMedia = panelMediaToActiveMedia(mediaName);
 
             const resolvedEl = (
               path === originalPath
@@ -123,7 +135,7 @@ export function registerPanelEvents(panel: CanvasPanel) {
             }
 
             if (canvasMode === "design" && tab.doc.mode !== "content") {
-              updateUi("pendingInlineEdit", { path, mediaName });
+              updateUi("pendingInlineEdit", { mediaName, path });
               tab.session.ui.activeMedia = newMedia;
               tab.session.selection = path;
               return;
@@ -151,18 +163,23 @@ export function registerPanelEvents(panel: CanvasPanel) {
           e.clientX <= r.right &&
           e.clientY >= r.top &&
           e.clientY <= r.bottom
-        )
+        ) {
           return;
+        }
       }
       const canvasMode = ctx.getCanvasMode();
-      if (canvasMode !== "edit" && canvasMode !== "design") return;
+      if (canvasMode !== "edit" && canvasMode !== "design") {
+        return;
+      }
 
       const tab = activeTab.value;
       const elements = withPanelPointerEvents(() =>
         document.elementsFromPoint(e.clientX, e.clientY),
       ) as Element[];
 
-      if (!tab) return;
+      if (!tab) {
+        return;
+      }
 
       for (const el of elements) {
         if (canvas.contains(el) && el !== canvas) {
@@ -175,7 +192,7 @@ export function registerPanelEvents(panel: CanvasPanel) {
                 : (findCanvasElement(path, canvas) as HTMLElement | null) || el
             ) as HTMLElement;
             if (isEditableBlock(resolvedEl)) {
-              const newMedia = mediaName === "base" ? null : (mediaName ?? null);
+              const newMedia = panelMediaToActiveMedia(mediaName);
               tab.session.ui.activeMedia = newMedia;
               tab.session.selection = path;
               ctx.enterInlineEdit(resolvedEl, path);
@@ -199,8 +216,9 @@ export function registerPanelEvents(panel: CanvasPanel) {
           e.clientX <= r.right &&
           e.clientY >= r.top &&
           e.clientY <= r.bottom
-        )
+        ) {
           return;
+        }
       }
       const tab = activeTab.value;
       const elements = withPanelPointerEvents(() =>
@@ -234,11 +252,14 @@ export function registerPanelEvents(panel: CanvasPanel) {
           e.clientX <= r.right &&
           e.clientY >= r.top &&
           e.clientY <= r.bottom
-        )
+        ) {
           return;
+        }
       }
       const tab = activeTab.value;
-      if (!tab) return;
+      if (!tab) {
+        return;
+      }
       const el = withPanelPointerEvents(() =>
         document.elementFromPoint(e.clientX, e.clientY),
       ) as Element | null;
@@ -271,15 +292,15 @@ export function registerPanelEvents(panel: CanvasPanel) {
   );
 
   insertionHelper.mount({
-    getCanvasMode: ctx.getCanvasMode,
-    withPanelPointerEvents,
-    effectiveZoom: effectiveZoom,
+    childIndex: (path: JxPath) => childIndex(path) ?? 0,
     defaultDef,
-    parentElementPath,
-    childIndex,
-    getNodeAtPath,
+    effectiveZoom,
     elToPath,
+    getCanvasMode: ctx.getCanvasMode,
+    getNodeAtPath,
     panel: panel as unknown as Parameters<typeof insertionHelper.mount>[0]["panel"],
+    parentElementPath,
+    withPanelPointerEvents,
   });
   view.canvasEventCleanups.push(() => insertionHelper.unmount());
 }

package/src/panels/panel-scheduler.ts

@@ -17,25 +17,33 @@
  * @returns {boolean}
  */
 export function isTextInput(el: Element | null): boolean {
-  if (!el) return false;
+  if (!el) {
+    return false;
+  }
   const tag = el.tagName.toLowerCase();
-  if (tag === "input" || tag === "textarea") return true;
-  if (tag === "sp-textfield" || tag === "sp-number-field" || tag === "sp-search") return true;
-  if (el.shadowRoot?.activeElement) return isTextInput(el.shadowRoot.activeElement);
+  if (tag === "input" || tag === "textarea") {
+    return true;
+  }
+  if (tag === "sp-textfield" || tag === "sp-number-field" || tag === "sp-search") {
+    return true;
+  }
+  if (el.shadowRoot?.activeElement) {
+    return isTextInput(el.shadowRoot.activeElement);
+  }
   return false;
 }
 
 export interface PanelScheduler {
   /** Request a render. Coalesced; deferred while a text input in the panel is focused. */
-  schedule(): void;
+  schedule: () => void;
   /** True when a render would currently be deferred (text input focused or blockWhile()). */
-  isEditing(): boolean;
+  isEditing: () => boolean;
   /** Attach focusin/focusout listeners to the panel root. */
-  bindFocus(): void;
+  bindFocus: () => void;
   /** Detach listeners and cancel any pending frame. */
-  unbind(): void;
+  unbind: () => void;
   /** Render immediately, bypassing the rAF coalescing (still respects the focus guard). */
-  flushNow(): void;
+  flushNow: () => void;
 }
 
 /**
@@ -67,7 +75,9 @@ export function createPanelScheduler(opts: {
   function flush() {
     scheduled = false;
     rafId = 0;
-    if (rendering) return;
+    if (rendering) {
+      return;
+    }
     // Defer while a field is focused — flushed later by focusout (or the next schedule()).
     if (blocked()) {
       pending = true;
@@ -83,7 +93,9 @@ export function createPanelScheduler(opts: {
   }
 
   function schedule() {
-    if (scheduled) return;
+    if (scheduled) {
+      return;
+    }
     scheduled = true;
     rafId = requestAnimationFrame(flush);
   }
@@ -94,33 +106,39 @@ export function createPanelScheduler(opts: {
 
   function onFocusOut() {
     // Clear the editing flag and schedule a flush. If focus is merely moving to another field in
-    // the same panel, the synchronous focusin that follows re-sets `editing` before the rAF runs,
-    // so the deferred render keeps waiting (no mid-edit clobber).
+    // The same panel, the synchronous focusin that follows re-sets `editing` before the rAF runs,
+    // So the deferred render keeps waiting (no mid-edit clobber).
     editing = false;
-    if (pending) schedule();
+    if (pending) {
+      schedule();
+    }
   }
 
   return {
-    schedule,
-    isEditing: () => blocked(),
     bindFocus() {
       root.addEventListener("focusin", onFocusIn);
       root.addEventListener("focusout", onFocusOut);
     },
+    flushNow() {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = 0;
+      scheduled = false;
+      flush();
+    },
+    isEditing: () => blocked(),
+    schedule,
     unbind() {
       root.removeEventListener("focusin", onFocusIn);
       root.removeEventListener("focusout", onFocusOut);
-      if (rafId) cancelAnimationFrame(rafId);
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
       scheduled = false;
       pending = false;
       editing = false;
       rendering = false;
     },
-    flushNow() {
-      if (rafId) cancelAnimationFrame(rafId);
-      rafId = 0;
-      scheduled = false;
-      flush();
-    },
   };
 }