@rezi-ui/core 0.1.0-alpha.6 → 0.1.0-alpha.63

package/dist/app/widgetRenderer/submitFramePipeline.js

@@ -1,7 +1,29 @@
+import { isConstraintExpr } from "../../constraints/expr.js";
 import { measureTextCells } from "../../layout/textMeasure.js";
+import { PERF_ENABLED, perfCount } from "../../perf/perf.js";
+import { getRuntimeNodeDamageRect } from "../../renderer/renderToDrawlist/damageBounds.js";
 const ZERO_RECT = { x: 0, y: 0, w: 0, h: 0 };
 const HASH_FNV_OFFSET = 0x811c9dc5;
 const HASH_FNV_PRIME = 0x01000193;
+const EMPTY_INSTANCE_IDS = Object.freeze([]);
+const LAYOUT_SIG_INCLUDE_TEXT_WIDTH = (() => {
+    try {
+        const raw = globalThis
+            .process?.env?.REZI_LAYOUT_SIG_TEXT_WIDTH;
+        // Default: treat plain (non-wrapped, unconstrained) text width changes as
+        // paint-only, not layout-affecting. This avoids full relayout churn for
+        // high-frequency text updates.
+        if (raw === undefined)
+            return false;
+        const value = raw.trim().toLowerCase();
+        if (value === "1" || value === "true" || value === "yes" || value === "on")
+            return true;
+        return false;
+    }
+    catch {
+        return false;
+    }
+})();
 const STACK_LAYOUT_KEYS = Object.freeze([
     "width",
     "height",
@@ -10,7 +32,19 @@ const STACK_LAYOUT_KEYS = Object.freeze([
     "minHeight",
     "maxHeight",
     "flex",
+    "flexShrink",
+    "flexBasis",
     "aspectRatio",
+    "alignSelf",
+    "position",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "gridColumn",
+    "gridRow",
+    "colSpan",
+    "rowSpan",
     "p",
     "px",
     "py",
@@ -21,11 +55,16 @@ const STACK_LAYOUT_KEYS = Object.freeze([
     "m",
     "mx",
     "my",
+    "mt",
+    "mr",
+    "mb",
+    "ml",
     "pad",
     "gap",
     "align",
     "justify",
     "items",
+    "wrap",
 ]);
 const BOX_LAYOUT_KEYS = Object.freeze([
     "width",
@@ -35,7 +74,19 @@ const BOX_LAYOUT_KEYS = Object.freeze([
     "minHeight",
     "maxHeight",
     "flex",
+    "flexShrink",
+    "flexBasis",
     "aspectRatio",
+    "alignSelf",
+    "position",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "gridColumn",
+    "gridRow",
+    "colSpan",
+    "rowSpan",
     "p",
     "px",
     "py",
@@ -46,11 +97,47 @@ const BOX_LAYOUT_KEYS = Object.freeze([
     "m",
     "mx",
     "my",
+    "mt",
+    "mr",
+    "mb",
+    "ml",
     "pad",
+    "gap",
     "border",
+    "borderTop",
+    "borderRight",
+    "borderBottom",
+    "borderLeft",
     "title",
     "titleAlign",
 ]);
+const GRID_LAYOUT_KEYS = Object.freeze([
+    "width",
+    "height",
+    "minWidth",
+    "maxWidth",
+    "minHeight",
+    "maxHeight",
+    "flex",
+    "flexShrink",
+    "flexBasis",
+    "aspectRatio",
+    "alignSelf",
+    "position",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "gridColumn",
+    "gridRow",
+    "colSpan",
+    "rowSpan",
+    "columns",
+    "rows",
+    "gap",
+    "rowGap",
+    "columnGap",
+]);
 function hashU32(hash, value) {
     return Math.imul((hash ^ (value >>> 0)) >>> 0, HASH_FNV_PRIME) >>> 0;
 }
@@ -86,6 +173,8 @@ function hashLayoutPropValue(hash, value) {
         return hashNumber(hash, value);
     if (typeof value === "string")
         return hashString(hash, value);
+    if (isConstraintExpr(value))
+        return hashString(hash, value.source);
     return null;
 }
 function hashSelectedLayoutProps(hash, props, keys) {
@@ -106,7 +195,25 @@ function hashChildOrder(hash, node) {
     }
     return out;
 }
-function computeLayoutStabilitySignature(node) {
+function hashPropsValue(hash, key, value) {
+    const withKey = hashString(hash, key);
+    return hashLayoutPropValue(withKey, value);
+}
+function hashSizesArray(hash, sizes) {
+    let out = hashNumber(hash, sizes.length);
+    for (let i = 0; i < sizes.length; i++) {
+        const valueHash = hashLayoutPropValue(out, sizes[i]);
+        if (valueHash === null)
+            return null;
+        out = valueHash;
+    }
+    return out;
+}
+function computeLayoutStabilitySignature(node, parentKind) {
+    const display = node.vnode.props?.display;
+    if (display !== undefined) {
+        return null;
+    }
     switch (node.vnode.kind) {
         case "text": {
             const props = node.vnode.props;
@@ -121,8 +228,26 @@ function computeLayoutStabilitySignature(node) {
                     : null;
             if (maxWidth === null)
                 return null;
-            const measuredWidth = measureTextCellsFast(node.vnode.text);
-            const cappedWidth = maxWidth === undefined ? measuredWidth : Math.min(measuredWidth, maxWidth);
+            const wrap = props.wrap === true;
+            // Include text width in the signature when it can affect layout:
+            // - Always when maxWidth is set (capped to maxWidth)
+            // - Always when wrap is enabled (text content determines line count)
+            // - When the global override requests it
+            // Otherwise skip for pure paint-only fast path. Even inside
+            // width-sensitive parents (row) we must include the unconstrained
+            // intrinsic width to keep sibling placement and hit-testing correct. For
+            // column-like stacking (common in long lists), we still treat plain text
+            // as paint-only by default to avoid relayout churn.
+            let cappedWidth = 0;
+            if (maxWidth === undefined) {
+                const parentWidthSensitive = parentKind === "row";
+                if (LAYOUT_SIG_INCLUDE_TEXT_WIDTH || wrap || parentWidthSensitive) {
+                    cappedWidth = measureTextCellsFast(node.vnode.text);
+                }
+            }
+            else {
+                cappedWidth = Math.min(measureTextCellsFast(node.vnode.text), maxWidth);
+            }
             let hash = hashString(HASH_FNV_OFFSET, "text");
             hash = hashNumber(hash, cappedWidth);
             hash = hashString(hash, "maxWidth");
@@ -130,6 +255,14 @@ function computeLayoutStabilitySignature(node) {
             if (next === null)
                 return null;
             hash = next;
+            const wrapHash = hashPropsValue(hash, "wrap", wrap);
+            if (wrapHash === null)
+                return null;
+            hash = wrapHash;
+            if (wrap) {
+                hash = hashString(hash, "wrapText");
+                hash = hashString(hash, node.vnode.text);
+            }
             return hash;
         }
         case "button": {
@@ -161,6 +294,12 @@ function computeLayoutStabilitySignature(node) {
             hash = hashNumber(hash, flex);
             return hash;
         }
+        case "focusZone":
+        case "focusTrap": {
+            let hash = hashString(HASH_FNV_OFFSET, node.vnode.kind);
+            hash = hashChildOrder(hash, node);
+            return hash;
+        }
         case "divider": {
             const props = node.vnode.props;
             let hash = hashString(HASH_FNV_OFFSET, "divider");
@@ -186,7 +325,227 @@ function computeLayoutStabilitySignature(node) {
             hash = hashChildOrder(next, node);
             return hash;
         }
+        case "grid": {
+            const props = node.vnode.props;
+            let hash = hashString(HASH_FNV_OFFSET, "grid");
+            const next = hashSelectedLayoutProps(hash, props, GRID_LAYOUT_KEYS);
+            if (next === null)
+                return null;
+            hash = next;
+            hash = hashChildOrder(hash, node);
+            return hash;
+        }
+        case "table": {
+            const props = node.vnode.props;
+            if (!Array.isArray(props.columns) || !Array.isArray(props.data))
+                return null;
+            let hash = hashString(HASH_FNV_OFFSET, "table");
+            hash = hashNumber(hash, props.columns.length);
+            for (let i = 0; i < props.columns.length; i++) {
+                const col = props.columns[i];
+                if (!col || typeof col !== "object")
+                    return null;
+                const widthHash = hashPropsValue(hash, "width", col.width);
+                if (widthHash === null)
+                    return null;
+                hash = widthHash;
+                const flexHash = hashPropsValue(hash, "flex", col.flex);
+                if (flexHash === null)
+                    return null;
+                hash = flexHash;
+            }
+            hash = hashNumber(hash, props.data.length);
+            return hash;
+        }
+        case "tabs": {
+            const props = node.vnode.props;
+            if (!Array.isArray(props.tabs))
+                return null;
+            let selectedIndex = -1;
+            if (typeof props.activeTab === "string") {
+                for (let i = 0; i < props.tabs.length; i++) {
+                    const tab = props.tabs[i];
+                    if (tab &&
+                        typeof tab === "object" &&
+                        tab.key === props.activeTab) {
+                        selectedIndex = i;
+                        break;
+                    }
+                }
+            }
+            let hash = hashString(HASH_FNV_OFFSET, "tabs");
+            hash = hashNumber(hash, props.tabs.length);
+            hash = hashNumber(hash, selectedIndex);
+            return hash;
+        }
+        case "accordion": {
+            const props = node.vnode.props;
+            if (!Array.isArray(props.items) || !Array.isArray(props.expanded))
+                return null;
+            let hash = hashString(HASH_FNV_OFFSET, "accordion");
+            hash = hashNumber(hash, props.items.length);
+            hash = hashNumber(hash, props.expanded.length);
+            for (let i = 0; i < props.expanded.length; i++) {
+                const next = hashLayoutPropValue(hash, props.expanded[i]);
+                if (next === null)
+                    return null;
+                hash = next;
+            }
+            return hash;
+        }
+        case "modal": {
+            const props = node.vnode.props;
+            let hash = hashString(HASH_FNV_OFFSET, "modal");
+            const openHash = hashPropsValue(hash, "open", props.open === undefined ? true : props.open);
+            if (openHash === null)
+                return null;
+            hash = openHash;
+            const widthHash = hashPropsValue(hash, "width", props.width);
+            if (widthHash === null)
+                return null;
+            hash = widthHash;
+            const heightHash = hashPropsValue(hash, "height", props.height);
+            if (heightHash === null)
+                return null;
+            hash = heightHash;
+            const minWidthHash = hashPropsValue(hash, "minWidth", props.minWidth);
+            if (minWidthHash === null)
+                return null;
+            hash = minWidthHash;
+            const minHeightHash = hashPropsValue(hash, "minHeight", props.minHeight);
+            if (minHeightHash === null)
+                return null;
+            hash = minHeightHash;
+            const maxWidthHash = hashPropsValue(hash, "maxWidth", props.maxWidth);
+            if (maxWidthHash === null)
+                return null;
+            hash = maxWidthHash;
+            return hash;
+        }
+        case "virtualList": {
+            const props = node.vnode.props;
+            if (!Array.isArray(props.items))
+                return null;
+            let hash = hashString(HASH_FNV_OFFSET, "virtualList");
+            hash = hashNumber(hash, props.items.length);
+            const itemHeightValue = typeof props.itemHeight === "function" ? "function" : props.itemHeight;
+            const itemHeightHash = hashPropsValue(hash, "itemHeight", itemHeightValue);
+            if (itemHeightHash === null)
+                return null;
+            hash = itemHeightHash;
+            const viewport = props.viewport;
+            if (viewport && typeof viewport === "object") {
+                const v = viewport;
+                const vwHash = hashPropsValue(hash, "viewport.w", v.w ?? v.width);
+                if (vwHash === null)
+                    return null;
+                hash = vwHash;
+                const vhHash = hashPropsValue(hash, "viewport.h", v.h ?? v.height);
+                if (vhHash === null)
+                    return null;
+                hash = vhHash;
+            }
+            else {
+                const viewportHash = hashPropsValue(hash, "viewport", viewport);
+                if (viewportHash === null)
+                    return null;
+                hash = viewportHash;
+            }
+            return hash;
+        }
+        case "splitPane": {
+            const props = node.vnode.props;
+            if (!Array.isArray(props.sizes))
+                return null;
+            let hash = hashString(HASH_FNV_OFFSET, "splitPane");
+            const directionHash = hashPropsValue(hash, "direction", props.direction);
+            if (directionHash === null)
+                return null;
+            hash = directionHash;
+            const sizeModeHash = hashPropsValue(hash, "sizeMode", props.sizeMode);
+            if (sizeModeHash === null)
+                return null;
+            hash = sizeModeHash;
+            const sizesHash = hashSizesArray(hash, props.sizes);
+            if (sizesHash === null)
+                return null;
+            hash = sizesHash;
+            const minSizes = props.minSizes;
+            if (Array.isArray(minSizes)) {
+                hash = hashString(hash, "minSizes");
+                const minSizesHash = hashSizesArray(hash, minSizes);
+                if (minSizesHash === null)
+                    return null;
+                hash = minSizesHash;
+            }
+            else {
+                const minSizesHash = hashPropsValue(hash, "minSizes", minSizes);
+                if (minSizesHash === null)
+                    return null;
+                hash = minSizesHash;
+            }
+            const maxSizes = props.maxSizes;
+            if (Array.isArray(maxSizes)) {
+                hash = hashString(hash, "maxSizes");
+                const maxSizesHash = hashSizesArray(hash, maxSizes);
+                if (maxSizesHash === null)
+                    return null;
+                hash = maxSizesHash;
+            }
+            else {
+                const maxSizesHash = hashPropsValue(hash, "maxSizes", maxSizes);
+                if (maxSizesHash === null)
+                    return null;
+                hash = maxSizesHash;
+            }
+            const dividerHash = hashPropsValue(hash, "dividerSize", props.dividerSize);
+            if (dividerHash === null)
+                return null;
+            hash = dividerHash;
+            const collapsibleHash = hashPropsValue(hash, "collapsible", props.collapsible);
+            if (collapsibleHash === null)
+                return null;
+            hash = collapsibleHash;
+            const collapsed = props.collapsed;
+            if (Array.isArray(collapsed)) {
+                hash = hashString(hash, "collapsed");
+                const collapsedHash = hashSizesArray(hash, collapsed);
+                if (collapsedHash === null)
+                    return null;
+                hash = collapsedHash;
+            }
+            else {
+                const collapsedHash = hashPropsValue(hash, "collapsed", collapsed);
+                if (collapsedHash === null)
+                    return null;
+                hash = collapsedHash;
+            }
+            hash = hashChildOrder(hash, node);
+            return hash;
+        }
+        case "breadcrumb": {
+            const props = node.vnode.props;
+            const itemCount = Array.isArray(props.items) ? props.items.length : node.children.length;
+            let hash = hashString(HASH_FNV_OFFSET, "breadcrumb");
+            hash = hashNumber(hash, itemCount);
+            return hash;
+        }
+        case "pagination": {
+            const props = node.vnode.props;
+            const itemCount = node.children.length > 0
+                ? node.children.length
+                : typeof props.totalPages === "number" && Number.isFinite(props.totalPages)
+                    ? Math.max(0, Math.trunc(props.totalPages))
+                    : 0;
+            let hash = hashString(HASH_FNV_OFFSET, "pagination");
+            hash = hashNumber(hash, itemCount);
+            return hash;
+        }
         default:
+            if (PERF_ENABLED) {
+                perfCount("layout_sig_unsupported_total");
+                perfCount(`layout_sig_unsupported_kind:${node.vnode.kind}`);
+            }
             return null;
     }
 }
@@ -201,45 +560,162 @@ function computeLayoutStabilitySignature(node) {
  *
  * For unsupported kinds, it conservatively requests layout.
  */
-export function updateLayoutStabilitySignatures(runtimeRoot, prevByInstanceId, nextByInstanceId, pooledRuntimeStack) {
+export function updateLayoutStabilitySignatures(runtimeRoot, prevByInstanceId, nextByInstanceId, pooledRuntimeStack, pooledParentKindStack, removedInstanceIds = EMPTY_INSTANCE_IDS, trustDirtyFlags = false) {
+    if (PERF_ENABLED) {
+        perfCount("layout_sig_update_calls");
+        perfCount("layout_sig_prev_size", prevByInstanceId.size);
+    }
+    if (!trustDirtyFlags) {
+        nextByInstanceId.clear();
+        pooledRuntimeStack.length = 0;
+        pooledParentKindStack.length = 0;
+        pooledRuntimeStack.push(runtimeRoot);
+        pooledParentKindStack.push(undefined);
+        let changed = false;
+        while (pooledRuntimeStack.length > 0) {
+            const node = pooledRuntimeStack.pop();
+            const parentKind = pooledParentKindStack.pop();
+            if (!node)
+                continue;
+            if (PERF_ENABLED) {
+                perfCount("layout_sig_nodes_scanned");
+                if (node.dirty)
+                    perfCount("layout_sig_nodes_dirty");
+                if (node.selfDirty)
+                    perfCount("layout_sig_nodes_self_dirty");
+            }
+            const signature = computeLayoutStabilitySignature(node, parentKind);
+            if (signature === null) {
+                if (PERF_ENABLED) {
+                    perfCount("layout_sig_forced_layout_from_unsupported");
+                }
+                prevByInstanceId.clear();
+                nextByInstanceId.clear();
+                pooledRuntimeStack.length = 0;
+                pooledParentKindStack.length = 0;
+                return true;
+            }
+            nextByInstanceId.set(node.instanceId, signature);
+            const prev = prevByInstanceId.get(node.instanceId);
+            if (prev !== signature) {
+                changed = true;
+                if (PERF_ENABLED) {
+                    perfCount("layout_sig_changed_nodes");
+                    perfCount(`layout_sig_changed_kind:${node.vnode.kind}`);
+                }
+            }
+            for (let i = node.children.length - 1; i >= 0; i--) {
+                const child = node.children[i];
+                if (child) {
+                    pooledRuntimeStack.push(child);
+                    pooledParentKindStack.push(node.vnode.kind);
+                }
+            }
+        }
+        if (!changed && prevByInstanceId.size !== nextByInstanceId.size) {
+            changed = true;
+            if (PERF_ENABLED)
+                perfCount("layout_sig_size_mismatch");
+        }
+        if (PERF_ENABLED) {
+            perfCount("layout_sig_next_size", nextByInstanceId.size);
+            if (changed)
+                perfCount("layout_sig_changed_frames");
+            else
+                perfCount("layout_sig_stable_frames");
+        }
+        prevByInstanceId.clear();
+        for (const [instanceId, signature] of nextByInstanceId) {
+            prevByInstanceId.set(instanceId, signature);
+        }
+        nextByInstanceId.clear();
+        pooledParentKindStack.length = 0;
+        return changed;
+    }
     nextByInstanceId.clear();
+    if (removedInstanceIds.length > 0) {
+        for (const instanceId of removedInstanceIds) {
+            if (prevByInstanceId.delete(instanceId)) {
+                if (PERF_ENABLED)
+                    perfCount("layout_sig_removed_ids");
+            }
+        }
+    }
     pooledRuntimeStack.length = 0;
+    pooledParentKindStack.length = 0;
     pooledRuntimeStack.push(runtimeRoot);
+    pooledParentKindStack.push(undefined);
     let changed = false;
     while (pooledRuntimeStack.length > 0) {
         const node = pooledRuntimeStack.pop();
+        const parentKind = pooledParentKindStack.pop();
         if (!node)
             continue;
-        const signature = computeLayoutStabilitySignature(node);
+        if (PERF_ENABLED) {
+            perfCount("layout_sig_nodes_scanned");
+            if (node.dirty)
+                perfCount("layout_sig_nodes_dirty");
+            if (node.selfDirty)
+                perfCount("layout_sig_nodes_self_dirty");
+        }
+        const hadPrev = prevByInstanceId.has(node.instanceId);
+        const shouldRecompute = node.dirty || !hadPrev;
+        if (!shouldRecompute) {
+            for (let i = node.children.length - 1; i >= 0; i--) {
+                const child = node.children[i];
+                if (!child)
+                    continue;
+                if (child.dirty || !prevByInstanceId.has(child.instanceId)) {
+                    pooledRuntimeStack.push(child);
+                    pooledParentKindStack.push(node.vnode.kind);
+                }
+            }
+            continue;
+        }
+        const signature = computeLayoutStabilitySignature(node, parentKind);
         if (signature === null) {
+            if (PERF_ENABLED) {
+                perfCount("layout_sig_forced_layout_from_unsupported");
+            }
             prevByInstanceId.clear();
             nextByInstanceId.clear();
             pooledRuntimeStack.length = 0;
+            pooledParentKindStack.length = 0;
             return true;
         }
-        nextByInstanceId.set(node.instanceId, signature);
-        const prev = prevByInstanceId.get(node.instanceId);
-        if (prev !== signature)
+        const prev = hadPrev ? prevByInstanceId.get(node.instanceId) : undefined;
+        if (prev !== signature) {
             changed = true;
+            if (PERF_ENABLED) {
+                perfCount("layout_sig_changed_nodes");
+                perfCount(`layout_sig_changed_kind:${node.vnode.kind}`);
+            }
+        }
+        prevByInstanceId.set(node.instanceId, signature);
         for (let i = node.children.length - 1; i >= 0; i--) {
             const child = node.children[i];
-            if (child)
+            if (!child)
+                continue;
+            if (child.dirty || !prevByInstanceId.has(child.instanceId)) {
                 pooledRuntimeStack.push(child);
+                pooledParentKindStack.push(node.vnode.kind);
+            }
         }
     }
-    if (!changed && prevByInstanceId.size !== nextByInstanceId.size) {
-        changed = true;
-    }
-    prevByInstanceId.clear();
-    for (const [instanceId, signature] of nextByInstanceId) {
-        prevByInstanceId.set(instanceId, signature);
+    if (PERF_ENABLED) {
+        perfCount("layout_sig_next_size", prevByInstanceId.size);
+        if (changed)
+            perfCount("layout_sig_changed_frames");
+        else
+            perfCount("layout_sig_stable_frames");
     }
-    nextByInstanceId.clear();
     return changed;
 }
-export function buildLayoutRectIndexes(layoutTree, runtimeRoot, pooledRectByInstanceId, pooledRectById, pooledSplitPaneChildRectsById, pooledLayoutStack, pooledRuntimeStack) {
+export function buildLayoutRectIndexes(layoutTree, runtimeRoot, pooledRectByInstanceId, pooledDamageRectByInstanceId, pooledRectById, pooledDamageRectById, pooledSplitPaneChildRectsById, pooledLayoutStack, pooledRuntimeStack) {
     pooledRectByInstanceId.clear();
+    pooledDamageRectByInstanceId.clear();
     pooledRectById.clear();
+    pooledDamageRectById.clear();
     pooledSplitPaneChildRectsById.clear();
     pooledLayoutStack.length = 0;
     pooledRuntimeStack.length = 0;
@@ -251,9 +727,12 @@ export function buildLayoutRectIndexes(layoutTree, runtimeRoot, pooledRectByInst
         if (!n || !r)
             continue;
         pooledRectByInstanceId.set(r.instanceId, n.rect);
+        const damageRect = getRuntimeNodeDamageRect(r, n.rect);
+        pooledDamageRectByInstanceId.set(r.instanceId, damageRect);
         const id = r.vnode.props?.id;
         if (typeof id === "string" && id.length > 0 && !pooledRectById.has(id)) {
             pooledRectById.set(id, n.rect);
+            pooledDamageRectById.set(id, damageRect);
         }
         if (r.vnode.kind === "splitPane") {
             const sid = r.vnode.props.id;