@jxsuite/ui 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "The Jx UI kit: interface elements authored as Jx documents, with their theme and icons",
   "license": "MIT",
   "repository": {

package/src/behaviors/listbox.ts

@@ -106,8 +106,30 @@ export function syncListbox(host: HTMLElement, active: string): OptionElement |
  */
 export function mountListbox(state: ListboxState, host: HTMLElement): void {
   syncListbox(host, String(state.active ?? ""));
+  /* One sync per frame, not one per mutation record. The palette opens by constructing its row
+     set: dozens of `childList` records in one task, and a sync per record is a querySelectorAll
+     walk plus a flush-baiting read each — the DevTools timeline billed every one of them. The
+     LAST record of a task settles the same active id the task started with (a filter's rows land
+     whole, and a caret move never changes rows), so reading `active` at frame time is the same
+     answer once, with one style pass for the burst instead of one per record. */
+  let frameId: number | null = null;
+  const scheduleSync = (): void => {
+    if (frameId !== null) {
+      return;
+    }
+    frameId = requestAnimationFrame(() => {
+      frameId = null;
+      if (host.isConnected) {
+        syncListbox(host, String(state.active ?? ""));
+      }
+    });
+  };
   const observer = new MutationObserver(() => {
-    syncListbox(host, String(state.active ?? ""));
+    if (typeof requestAnimationFrame === "function") {
+      scheduleSync();
+    } else {
+      syncListbox(host, String(state.active ?? ""));
+    }
   });
   observer.observe(host, {
     attributeFilter: ["data-active"],

package/src/behaviors/split.ts

@@ -202,11 +202,37 @@ function coordOf(vertical: boolean, event: { clientX: number; clientY: number })
  * realm cannot see through — walking past it costs a frame's work once per gesture and is the only
  * thing that makes the pane grid's two nested `display: contents` rows measurable at all.
  *
+ * The ancestor that resolved as the track is MEMOIZED per host and re-read per call. Only its
+ * identity is cached; the length is measured fresh every time, so a window resize answers the new
+ * track width with no listener anywhere. Re-measuring one element's box instead of walking with a
+ * computed-style test per ancestor is what profiling pointed at: every gesture during a shell rep
+ * forced the dirty-tree flush and the DevTools timeline charged the recalc to the read, five times
+ * per boot with a document open. The cache re-walks when the remembered track no longer contains
+ * the host (reparenting, teardown) — containment and connectivity are node walks, not layout — and
+ * when the remembered track measures zero, because an unlaid-out track resolving later (the first
+ * frame after a pane opens) is the case the walk exists for.
+ *
  * @param host The element.
  * @param vertical Whether the drag is along x.
  * @returns The length in pixels, or 0 when nothing above the splitter has one.
  */
-function trackOf(host: HTMLElement, vertical: boolean): number {
+const trackCache = new WeakMap<HTMLElement, { element: HTMLElement; vertical: boolean }>();
+
+export function trackOf(host: HTMLElement, vertical: boolean): number {
+  const cached = trackCache.get(host);
+  if (
+    cached &&
+    cached.vertical === vertical &&
+    cached.element.isConnected &&
+    host.isConnected &&
+    cached.element.contains(host)
+  ) {
+    const box = cached.element.getBoundingClientRect();
+    const length = vertical ? box.width : box.height;
+    if (length > 0) {
+      return length;
+    }
+  }
   for (let node = host.parentElement; node; node = node.parentElement) {
     if (globalThis.getComputedStyle(node).display === "contents") {
       continue;
@@ -214,6 +240,7 @@ function trackOf(host: HTMLElement, vertical: boolean): number {
     const box = node.getBoundingClientRect();
     const length = vertical ? box.width : box.height;
     if (length > 0) {
+      trackCache.set(host, { element: node, vertical });
       return length;
     }
   }