@jxsuite/studio 5.2.0 → 5.3.0

package/src/panels/chat-panel.ts

@@ -12,10 +12,19 @@
  * in `ui/regions.ts`'s shell table — the assistant no longer has a shell host to name. Three
  * screenshot shots address that id and none of them changed.
  *
- * Hosts the assistant UI from ai-panel.ts unconditionally: with no project (welcome screen), with a
- * project but no open document, and with a document open. The panel is mounted once at studio boot
- * and never tears down on tab switches — the assistant's module state and DOM (composer draft,
- * scroll position) persist.
+ * Hosts the assistant machinery from ai-panel.ts unconditionally: with no project (welcome screen),
+ * with a project but no open document, and with a document open. The machinery is mounted once at
+ * studio boot and never tears down on tab switches — the assistant's module state (composer draft,
+ * scroll position, transcript) persists.
+ *
+ * **The assistant's SURFACE document is what this module defers.** Mounting `surfaces/ai-chat.ts`
+ * costs a traced 100–290 ms of connectedCallback at boot (its island projections; see
+ * `scripts/perf/REPORT.md`), paid on every window open although the document is invisible until
+ * the tab is picked. Binding is the same seam (`bindAiPanelHost`) and it is now deferred to the
+ * first time the Assistant tab is actually shown or revealed: `renderAiPanel` no-ops while the
+ * surface is null, and the surface's own watcher projects whatever the machinery wrote before that
+ * point, so a prompt seeded into a boot the reader never spends in the tab is not lost — it is one
+ * more message waiting when the body first appears.
  *
  * **This module is the SEAM, and it has no markup of its own.** The assistant is a Jx document
  * (`surfaces/ai-chat.json`), and a document CLEARS the host it is given — so it needs a container
@@ -32,6 +41,7 @@ import { effect, effectScope } from "../reactivity";
 import { workspace } from "../workspace/workspace";
 import { consumePendingAgentPrompt, hasPendingAgentPrompt } from "../services/agent-seed";
 import { REGION_ATTR } from "../ui/regions";
+import { inspectorTab } from "./right-panel";
 import {
   bindAiPanelHost,
   mountAiPanel,
@@ -48,6 +58,23 @@ const ASSISTANT_REGION = "inspector.assistant";
 let _host: HTMLElement | null = null;
 let _container: HTMLElement | null = null;
 let _scope: EffectScope | null = null;
+/** Whether the surface document has been bound. One bind per host; a remount resets it. */
+let _surfaceBound = false;
+
+/**
+ * Bind the assistant's surface document the first time its tab is shown or revealed.
+ *
+ * The container, the region attribute and every prompt path are ready before this; the surface is
+ * the expensive part and is invisible until the tab is picked, so this is the earliest moment its
+ * cost is worth paying. A restore that lands on the Assistant tab binds on the same tick.
+ */
+function ensureAssistantSurface(): void {
+  if (_surfaceBound || !_container) {
+    return;
+  }
+  _surfaceBound = true;
+  bindAiPanelHost(_container);
+}
 
 /**
  * Mount the assistant into the host the Inspector hands it. Idempotent per host: the persistent
@@ -68,11 +95,18 @@ export function mount(host: HTMLElement | null) {
   host.append(_container);
 
   mountAiPanel();
-  bindAiPanelHost(_container);
+  _surfaceBound = false;
 
   _scope?.stop();
   _scope = effectScope();
   _scope.run(() => {
+    effect(() => {
+      // The surface's bind follows the TAB: a session restored onto the Assistant is bound by
+      // One re-run of this effect, not by anyone remembering to call the seam directly.
+      if (inspectorTab() === "assistant") {
+        ensureAssistantSurface();
+      }
+    });
     effect(() => {
       // A pending agent prompt (stored by the New Project flow, possibly from another window) is
       // Keyed by the absolute project root — consume it as soon as this window adopts that root.
@@ -98,6 +132,7 @@ export function mount(host: HTMLElement | null) {
 export function unmount() {
   _scope?.stop();
   _scope = null;
+  _surfaceBound = false;
   // `null` unbinds the surface: the document is disposed and the chat-state watcher stopped.
   bindAiPanelHost(null);
   if (_host) {

package/src/services/module-preloads.ts

@@ -0,0 +1,67 @@
+/**
+ * Module-preloads.ts — batch Bun's per-graph `<link rel=modulepreload>` insertions onto one frame.
+ *
+ * The bundler's dynamic-import runtime warm-fetches each lazy graph by appending a `<link
+ * rel="modulepreload">` to `head` the moment the first `import()` of that graph runs. The insertion
+ * itself costs a recalculation sweep of the WHOLE document — a link's addition invalidates style
+ * matching everywhere, so the DevTools timeline bills a large batch of invalidation records (`Style
+ * rule change → <every element>`) to whatever read next. Studio's palette pays this on its first
+ * open, once per inserted link: the traced cost is a document recalculation per link, laid on top
+ * of quick-search's own work.
+ *
+ * Batching is the whole fix: links queued during a task are appended together on ONE animation
+ * frame, so the browser merges their invalidations into a single sweep. Nothing is dropped and no
+ * fetch is slowed — `import()` resolves on its own fetch regardless of the link, and one frame is
+ * shorter than any chunk is likely to be. The original append order is kept because the graph's
+ * entry chunk should warm before its children.
+ *
+ * Idempotent by a flag on `head`: installed once per document, before any dynamic `import()` of
+ * studio's own lazy surfaces runs.
+ */
+
+const QUEUED: HTMLLinkElement[] = [];
+let frame: number | null = null;
+let originalAppend: (<T extends Node>(node: T) => T) | null = null;
+
+function flush(): void {
+  frame = null;
+  const singleOrigin = originalAppend;
+  if (!singleOrigin) {
+    return;
+  }
+  for (const link of QUEUED.splice(0)) {
+    singleOrigin.call(document.head, link);
+  }
+}
+
+/**
+ * `appendChildPatched` — defer a modulepreload link to the shared frame; anything else goes
+ * straight. Returns the appended node either way, matching `Node.appendChild`'s own contract, so a
+ * caller that reads the return value (as `Node.appendChild` promises) sees the node it passed in
+ * rather than `undefined` on the deferred path.
+ */
+function appendChildPatched<T extends Node>(this: Node, node: T): T {
+  if (node instanceof HTMLLinkElement && node.rel === "modulepreload") {
+    QUEUED.push(node);
+    if (frame === null) {
+      frame = requestAnimationFrame(flush);
+    }
+    return node;
+  }
+  // `originalAppend` is already bound to `head` at install time, so no `this` needs passing here.
+  return originalAppend ? originalAppend(node) : node;
+}
+
+export function installModulePreloadBatcher(): void {
+  const { head } = document;
+  if (
+    !head ||
+    (head as HTMLElement & { __modulePreloadsBatched?: boolean }).__modulePreloadsBatched
+  ) {
+    return;
+  }
+  const patched = head as HTMLElement & { __modulePreloadsBatched?: boolean };
+  originalAppend = Node.prototype.appendChild.bind(head);
+  patched.__modulePreloadsBatched = true;
+  head.appendChild = appendChildPatched as unknown as typeof head.appendChild;
+}

package/src/studio.ts

@@ -12,6 +12,7 @@
  * registration) on first use by source mode, the function editor, or the formula workspace.
  */
 import { errorMessage } from "@jxsuite/schema/parse";
+import { installModulePreloadBatcher } from "./services/module-preloads";
 import { getPanel } from "./panels/panel-registry";
 
 import {
@@ -267,6 +268,11 @@ import type { JxDocument, JxMutableNode, ProjectConfig } from "@jxsuite/schema/t
 import { setBundleBase } from "./services/bundle-base";
 import { mountShellTree } from "./shell/tree";
 
+// The bundler's `<link rel=modulepreload>` batching is installed on the module scope: before the
+// First lazy `import()` of any surface that runs, so the palette's first open does not pay a
+// Document recalculation per chunk (see the module's header for the trace that asked for this).
+installModulePreloadBatcher();
+
 /**
  * Anchor every shipped-asset URL to THIS module's directory.
  *

package/src/surfaces/formula-palette.json

@@ -20,6 +20,9 @@
       "paddingTop": "60px",
       "background": "rgba(0, 0, 0, 0.4)"
     },
+    "& [part=\"overlay\"][hidden]": {
+      "display": "none"
+    },
     "& [part=\"panel\"]": {
       "width": "560px",
       "maxWidth": "calc(100vw - 32px)",
@@ -97,14 +100,12 @@
       "color": "inherit"
     }
   },
-  "$switch": {
-    "$ref": "#/state/open"
-  },
-  "cases": {
-    "true": {
+  "children": [
+    {
       "tagName": "div",
       "attributes": {
-        "part": "overlay"
+        "part": "overlay",
+        "hidden": "${state.open ? null : ''}"
       },
       "onclick": {
         "$prototype": "Function",
@@ -360,5 +361,5 @@
         }
       ]
     }
-  }
+  ]
 }

package/src/surfaces/formula-palette.ts

@@ -11,9 +11,12 @@
  *
  * **The mount is standing.** One slot in the popover layer, one document in it, and `open` is a
  * field of the scope rather than a render call — so opening the palette twice reuses the same
- * element tree and the `$switch` on `open` is what puts the overlay on screen and takes it away.
- * `getLayerSlot` hands back the same slot every time until something clears it, which is the one
- * case that re-mounts: a slot the layer no longer holds is not one this module may render into.
+ * element tree: the overlay is always PRESENT and a `hidden` attribute bound to `open` is what puts
+ * it on screen and takes it away, rather than a `$switch` that tore the whole subtree down and
+ * rebuilt it (and its `jx-listbox`) on every open — the per-open document-wide style recalculation
+ * that cost traced (`scripts/perf/REPORT.md`). `getLayerSlot` hands back the same slot every time
+ * until something clears it, which is the one case that re-mounts: a slot the layer no longer holds
+ * is not one this module may render into.
  *
  * **The rows and the highlight are separate fields**, exactly as `surfaces/palette.json`'s are —
  * and the highlight is now ONE field rather than a per-row comparison. A key moves `activeId`, the
@@ -285,9 +288,10 @@ function project(): void {
 /**
  * Focus the field once the document has drawn it.
  *
- * The mount settling means the DOCUMENT rendered; the `$switch` on `open` reconciles one microtask
- * later, so the field exists a turn after that — which is why this waits for the mount and then for
- * a turn, rather than reaching for the element straight away.
+ * The field is standing now, same as the overlay, but it stays behind `hidden` until the reactive
+ * binding on `open` reconciles — one microtask after the mount settles — so a focus reaching for it
+ * straight away would land on an element the reader cannot yet see. This waits for the mount and
+ * then for a turn, rather than reaching for the element immediately.
  */
 function focusInput(): void {
   const pending = _mount;

package/src/surfaces/palette.json

@@ -17,6 +17,9 @@
       "paddingTop": "60px",
       "background": "rgba(0, 0, 0, 0.4)"
     },
+    "& [part=\"overlay\"][hidden]": {
+      "display": "none"
+    },
     "& [part=\"panel\"]": {
       "width": "560px",
       "maxWidth": "calc(100vw - 32px)",
@@ -133,14 +136,12 @@
       "color": "var(--jx-fg-dim)"
     }
   },
-  "$switch": {
-    "$ref": "#/state/open"
-  },
-  "cases": {
-    "true": {
+  "children": [
+    {
       "tagName": "div",
       "attributes": {
-        "part": "overlay"
+        "part": "overlay",
+        "hidden": "${state.open ? null : ''}"
       },
       "onclick": {
         "$prototype": "Function",
@@ -531,5 +532,5 @@
         }
       ]
     }
-  }
+  ]
 }

package/src/ui/panel-resize.ts

@@ -43,8 +43,7 @@ import {
 } from "../shell";
 import type { DockId } from "../shell";
 import { effect } from "../reactivity";
-import { rectOf } from "../utils/geometry";
-import { splitModifiersOf } from "@jxsuite/ui/behaviors/split";
+import { splitModifiersOf, trackOf } from "@jxsuite/ui/behaviors/split";
 import type { SplitModifiers } from "@jxsuite/ui/behaviors/split";
 
 /**
@@ -160,25 +159,6 @@ export interface SplitElement extends HTMLElement {
   collapse: number;
 }
 
-/**
- * The length of the box a handle divides, along its axis — the same box `jx-split` measures at
- * pointerdown, read here so the share this adapter writes and the one the element drags against are
- * two readings of one number.
- */
-function trackOf(handle: HTMLElement, axis: "x" | "y"): number {
-  for (let node = handle.parentElement; node; node = node.parentElement) {
-    if (globalThis.getComputedStyle(node).display === "contents") {
-      continue;
-    }
-    const box = rectOf(node);
-    const length = axis === "x" ? box.width : box.height;
-    if (length > 0) {
-      return length;
-    }
-  }
-  return 0;
-}
-
 /**
  * A target's pixel size as the leading side's share of the track, and back.
  *
@@ -231,7 +211,7 @@ function sizeOf(target: ResizeTarget, share: number, track: number): number {
  */
 export function bindSplit(handle: SplitElement, target: ResizeTarget): () => void {
   const sync = (): void => {
-    const track = trackOf(handle, target.axis);
+    const track = trackOf(handle, target.axis === "x");
     if (track <= 0) {
       return;
     }
@@ -243,7 +223,7 @@ export function bindSplit(handle: SplitElement, target: ResizeTarget): () => voi
     handle.value = shareOf(target, target.read(), track);
   };
   const onInput = (event: Event): void => {
-    const track = trackOf(handle, target.axis);
+    const track = trackOf(handle, target.axis === "x");
     if (track <= 0) {
       return;
     }

package/src/ui/virtual-window.ts

@@ -300,6 +300,44 @@ export function nearestScroller(el: HTMLElement | null): HTMLElement | null {
   return null;
 }
 
+/**
+ * The scroller that resolved for `list` last time, memoized while the tree still holds it.
+ *
+ * Every render pass asks {@link nearestScroller} the same question about the same list, and each
+ * ask is a walk whose reads (scrollHeight, clientHeight, computed overflow) land on a tree that is
+ * mid-paint — they force the flush the DevTools timeline charges to whatever function happened to
+ * read first. Profiling the program boot put 400 ms of style recalculation behind a handful of
+ * these walks (`trackOf` and this one together), and the answer did not change between any two
+ * repaints.
+ *
+ * Only a POSITIVE resolution is cached, and negative answers are never: a list that has not grown
+ * its rows yet has nothing to scroll (the first paint of every session), and a null answer memoized
+ * at that instant would never be revisited. Once a scroller is found it is kept while
+ * `cached.contains(list)` and both are connected — containment and connectivity are plain node
+ * walks that never read layout, so the cache invalidates itself on reparenting or teardown without
+ * paying for it.
+ *
+ * **The one semantic residue is deliberate**: the original walk additionally required the scroller
+ * to HAVE something to scroll right then (the "declares overflow but never scrolls" guard above). A
+ * memoized scroller that has since stopped scrolling stays answered — which is harmless for the
+ * window: `computeWindow` then yields the whole list (a list that fits has no window to cut), and
+ * the watch's own ResizeObserver drives a measure when the box moves so the empty answer of the
+ * next moment arrives without a walk.
+ */
+export function scrollerFor(list: HTMLElement): HTMLElement | null {
+  const cached = scrollerCache.get(list);
+  if (cached && cached.isConnected && list.isConnected && cached.contains(list)) {
+    return cached;
+  }
+  const found = nearestScroller(list);
+  if (found) {
+    scrollerCache.set(list, found);
+  } else {
+    scrollerCache.delete(list);
+  }
+  return found;
+}
+
 /**
  * How far `list`'s first row has scrolled above the top of `scroller`'s viewport.
  *
@@ -327,7 +365,7 @@ export function listWindow(
   list: HTMLElement | null,
   spec: { count: number; rowHeight: number; columns?: number; overscanRows?: number },
 ): WindowRange {
-  const scroller = list?.isConnected === true ? nearestScroller(list) : null;
+  const scroller = list?.isConnected === true ? scrollerFor(list) : null;
   if (!scroller || !list) {
     const count = Math.max(0, Math.trunc(spec.count));
     return { end: count, padBottom: 0, padTop: 0, start: 0, totalRows: count };
@@ -377,7 +415,7 @@ export function scrollTopToReveal(spec: {
  * would paint twice for one keystroke.
  */
 export function revealListRow(list: HTMLElement | null, index: number, rowHeight: number): boolean {
-  const scroller = list?.isConnected === true ? nearestScroller(list) : null;
+  const scroller = list?.isConnected === true ? scrollerFor(list) : null;
   if (!scroller || !list || index < 0 || !(rowHeight > 0)) {
     return false;
   }
@@ -437,9 +475,24 @@ export interface ListWindowWatch {
   window: VirtualWindow;
 }
 
+const scrollerCache = new WeakMap<HTMLElement, HTMLElement>();
+
 /**
  * Bind — or keep — the scroll watch that repaints a windowed list.
  *
+ * Runs synchronously, on purpose. Deferring the resolve-and-bind to the next animation frame was
+ * tried and measured (`scripts/perf/REPORT.md`, "deferring the first measure a frame"): it moved
+ * the boot trace's forced-flush cost rather than removing it, since the layout work still runs on
+ * the frame's own pass either way, and it cost eight test-semantics changes in this file's test
+ * suite for the same totals — so it was reverted. What actually removed the repeated flush is
+ * `scrollerFor`'s identity memoization (alongside `trackOf`'s, in `split.ts`): once a scroller is
+ * resolved for a list, later calls skip the ancestor walk entirely instead of re-reading
+ * `scrollHeight`/`clientHeight` on a dirty tree every render.
+ *
+ * A steady state where the SAME list and scroller are bound hands back `previous` unchanged — no
+ * work happens when nothing changed. Only a rebind (new list, changed scroller, first bind) creates
+ * a new watch.
+ *
  * Called from the surface's `afterRender`, where the rows exist and the scroller can be resolved,
  * and handed back its own previous handle so re-binding is the exception rather than the rule: the
  * tree element survives every re-render (lit reuses it), so the steady state is "same list, same
@@ -450,14 +503,14 @@ export interface ListWindowWatch {
  * the element whose box moves when the ROWS change height, so it is what the window observes to
  * learn that `rowHeight()` now answers differently ({@link createVirtualWindow}).
  *
- * Returns the handle to keep, or null when nothing scrolls this list.
+ * @returns The handle to keep, or null when nothing scrolls this list.
  */
 export function watchListWindow(
   previous: ListWindowWatch | null,
   list: HTMLElement,
   spec: { count: () => number; rowHeight: () => number; onChange: () => void },
 ): ListWindowWatch | null {
-  const scroller = nearestScroller(list);
+  const scroller = scrollerFor(list);
   if (previous && previous.list === list && previous.scroller === scroller) {
     return previous;
   }

package/dist/chunks/layers-panel-fksbdg4q.js

@@ -1,40 +0,0 @@
-import {
-  startLayerTitleEdit2,
-  registerLayersPanel2
-} from "./studio-hhskq2mr.js";
-import"./studio-2mdbbc76.js";
-import"./studio-a1pswps3.js";
-import"./studio-ncn9e189.js";
-import"./studio-5nz00bhh.js";
-import"./studio-ctm7bhx5.js";
-import"./studio-q0a3yk4n.js";
-import"./studio-4r14yzyy.js";
-import"./studio-x72j58vw.js";
-import"./studio-nq5yf5mp.js";
-import"./studio-etvx9s2g.js";
-import"./studio-mpzwze9x.js";
-import"./studio-zjjde71a.js";
-import"./studio-z2smx5ce.js";
-import"./studio-en82c639.js";
-import"./studio-c07s5ckd.js";
-import"./studio-ez11dmdh.js";
-import"./studio-wnsyffg1.js";
-import"./studio-m1p9b6c3.js";
-import"./studio-esrxgwh6.js";
-import"./studio-28vs5k2y.js";
-import"./studio-6nzaktvy.js";
-import"./studio-qa7fzxan.js";
-import"./studio-ympe0n7a.js";
-import"./studio-1k325pwf.js";
-import"./studio-p6pmwkvh.js";
-import"./studio-yxa81f45.js";
-import"./studio-3ntvq6cg.js";
-import"./studio-d8z5bajd.js";
-import"./studio-tjjk7jvk.js";
-export {
-  registerLayersPanel2 as registerLayersPanel,
-  startLayerTitleEdit2 as startLayerTitleEdit
-};
-
-//# debugId=0A17594D4CFC8C3764756E2164756E21
-//# sourceMappingURL=layers-panel-fksbdg4q.js.map

package/dist/chunks/quick-search-e9rp74m8.js

@@ -1,46 +0,0 @@
-import {
-  initQuickSearch2,
-  openQuickSearch2
-} from "./studio-66arbpc2.js";
-import"./studio-01jeck2y.js";
-import"./studio-vt0tj32j.js";
-import"./studio-wjpgxywa.js";
-import"./studio-t171hxhe.js";
-import"./studio-5nz00bhh.js";
-import"./studio-hdc2jt3z.js";
-import"./studio-t3adrr56.js";
-import"./studio-5t7ena5z.js";
-import"./studio-x10fp4tp.js";
-import"./studio-4c041r8y.js";
-import"./studio-q0a3yk4n.js";
-import"./studio-4r14yzyy.js";
-import"./studio-y4f9fdge.js";
-import"./studio-9j6sfeba.js";
-import"./studio-x72j58vw.js";
-import"./studio-nq5yf5mp.js";
-import"./studio-etvx9s2g.js";
-import"./studio-mpzwze9x.js";
-import"./studio-zjjde71a.js";
-import"./studio-z2smx5ce.js";
-import"./studio-en82c639.js";
-import"./studio-c07s5ckd.js";
-import"./studio-ez11dmdh.js";
-import"./studio-wnsyffg1.js";
-import"./studio-m1p9b6c3.js";
-import"./studio-esrxgwh6.js";
-import"./studio-28vs5k2y.js";
-import"./studio-6nzaktvy.js";
-import"./studio-qa7fzxan.js";
-import"./studio-ympe0n7a.js";
-import"./studio-1k325pwf.js";
-import"./studio-p6pmwkvh.js";
-import"./studio-yxa81f45.js";
-import"./studio-3ntvq6cg.js";
-import"./studio-d8z5bajd.js";
-export {
-  initQuickSearch2 as initQuickSearch,
-  openQuickSearch2 as openQuickSearch
-};
-
-//# debugId=1B07B932BE385C7264756E2164756E21
-//# sourceMappingURL=quick-search-e9rp74m8.js.map