@meursyphus/flitter 2.0.3 → 2.2.0

package/index.cjs

@@ -13130,8 +13130,8 @@ var RenderContext = class {
   }
 };
 _resizeHandlers = new WeakMap();
-var _zOrderChanged;
-var RenderPipeline = class {
+var _zOrderChanged, _RenderPipeline_static, computeMinDescendantZOrder_fn;
+var _RenderPipeline = class _RenderPipeline {
   constructor({
     onNeedVisualUpdate,
     renderContext,
@@ -13169,6 +13169,7 @@ var RenderPipeline = class {
     this.requestVisualUpdate();
   }
   recalculateZOrder() {
+    var _a;
     if (!__privateGet(this, _zOrderChanged)) return [];
     __privateSet(this, _zOrderChanged, false);
     const visitor = new ZOrderCalculatorVisitor();
@@ -13178,6 +13179,7 @@ var RenderPipeline = class {
       const renderObject = painterRenderObjects[i];
       renderObject.updateZOrder(i);
     }
+    __privateMethod(_a = _RenderPipeline, _RenderPipeline_static, computeMinDescendantZOrder_fn).call(_a, this.renderView);
     return painterRenderObjects;
   }
   flushPaintTransformUpdate() {
@@ -13190,6 +13192,19 @@ var RenderPipeline = class {
   }
 };
 _zOrderChanged = new WeakMap();
+_RenderPipeline_static = new WeakSet();
+computeMinDescendantZOrder_fn = function(node) {
+  var _a;
+  let min = node.isPainter ? node.zOrder : Infinity;
+  node.visitChildren((child) => {
+    var _a2;
+    min = Math.min(min, __privateMethod(_a2 = _RenderPipeline, _RenderPipeline_static, computeMinDescendantZOrder_fn).call(_a2, child));
+  });
+  node.minDescendantZOrder = min === Infinity ? (_a = node.zOrder) != null ? _a : 0 : min;
+  return node.minDescendantZOrder;
+};
+__privateAdd(_RenderPipeline, _RenderPipeline_static);
+var RenderPipeline = _RenderPipeline;
 var Painter = class {
   constructor(renderObject) {
     __publicField(this, "renderObject");
@@ -13394,19 +13409,81 @@ function canNotReach(type) {
 }
 
 // src/framework/renderer/canvas/canvas-painting-context.ts
-var _estimateBound, _containerLayer, _currentLayer, _recorder, _ctx2, _CanvasPaintingContext_instances, startRecording_fn, appendLayer_fn;
+var DRAWING_OPS = /* @__PURE__ */ new Set([
+  "fillRect",
+  "strokeRect",
+  "clearRect",
+  "fill",
+  "stroke",
+  "fillText",
+  "strokeText",
+  "drawImage",
+  "putImageData"
+]);
+var NOOP = () => {
+};
+function createCanvasProxy(ctx) {
+  let suppressDepth = 0;
+  let suppressing = false;
+  const proxy = new Proxy(ctx, {
+    get(target, prop, receiver) {
+      if (prop === "__enterSuppress")
+        return () => {
+          suppressing = true;
+          suppressDepth = 0;
+        };
+      if (prop === "__exitSuppress")
+        return () => {
+          suppressing = false;
+        };
+      if (prop === "__raw") return target;
+      if (suppressing) {
+        if (prop === "save") {
+          return () => {
+            suppressDepth++;
+            if (suppressDepth > 1) target.save();
+          };
+        }
+        if (prop === "restore") {
+          return () => {
+            if (suppressDepth > 1) target.restore();
+            suppressDepth--;
+          };
+        }
+        if (DRAWING_OPS.has(prop)) {
+          return NOOP;
+        }
+      }
+      const val = Reflect.get(target, prop, target);
+      return typeof val === "function" ? val.bind(target) : val;
+    },
+    set(target, prop, value) {
+      return Reflect.set(target, prop, value);
+    }
+  });
+  return proxy;
+}
+var _estimateBound, _containerLayer, _currentLayer, _skipChildPainting, _CanvasPaintingContext_static, collectPainters_fn, _recorder, _ctx2, _CanvasPaintingContext_instances, startRecording_fn, appendLayer_fn;
 var _CanvasPaintingContext = class _CanvasPaintingContext {
   constructor(containerLayer, estimateBound) {
     __privateAdd(this, _CanvasPaintingContext_instances);
     __privateAdd(this, _estimateBound);
     __privateAdd(this, _containerLayer);
     __privateAdd(this, _currentLayer);
+    /**
+     * When true, paintChild becomes a no-op. Used during z-ordered
+     * painting so that each painter's performPaint only draws itself
+     * without recursing into children (children are painted separately
+     * in z-order).
+     */
+    __privateAdd(this, _skipChildPainting, false);
     __privateAdd(this, _recorder);
     __privateAdd(this, _ctx2);
     __privateSet(this, _containerLayer, containerLayer);
     __privateSet(this, _estimateBound, estimateBound);
   }
   static repaintCompositedChild(node) {
+    var _a;
     assert(
       node.canvasPainter.isRepaintBoundary,
       "isRepaintBoundary must be true on repaintCompositedChild"
@@ -13427,7 +13504,22 @@ var _CanvasPaintingContext = class _CanvasPaintingContext {
       childLayer,
       node.canvasPainter.paintBounds
     );
-    node.canvasPainter.paint(childContext, offset_default.Constants.zero);
+    const painters = [];
+    __privateMethod(_a = _CanvasPaintingContext, _CanvasPaintingContext_static, collectPainters_fn).call(_a, node, offset_default.Constants.zero, [], painters);
+    painters.sort((a, b) => a.renderObject.zOrder - b.renderObject.zOrder);
+    const proxyCanvas = childContext.canvas;
+    __privateSet(childContext, _skipChildPainting, true);
+    for (const { renderObject, offset, ancestors } of painters) {
+      proxyCanvas.__raw.save();
+      for (const { node: ancestorNode, offset: ancOffset } of ancestors) {
+        proxyCanvas.__enterSuppress();
+        ancestorNode.canvasPainter.paint(childContext, ancOffset);
+        proxyCanvas.__exitSuppress();
+      }
+      renderObject.canvasPainter.paint(childContext, offset);
+      proxyCanvas.__raw.restore();
+    }
+    __privateSet(childContext, _skipChildPainting, false);
     childContext.stopRecording();
   }
   static updateLayerProperties(_) {
@@ -13450,33 +13542,49 @@ var _CanvasPaintingContext = class _CanvasPaintingContext {
     __privateMethod(this, _CanvasPaintingContext_instances, appendLayer_fn).call(this, layer);
   }
   /**
-   * 
-   * @param child   /// Paint a child [RenderObject].
-   * @param offset 
-  ///
-  /// @todo: If the child has its own composited layer, the child will be composited
-  /// into the layer subtree associated with this painting context. Otherwise,
-  /// the child will be painted into the current PictureLayer for this context.
+   * Paint a child RenderObject.
+   *
+   * When #skipChildPainting is true (during z-ordered paint phase),
+   * this is a no-op because each painter is invoked individually
+   * in z-order from repaintCompositedChild.
    */
   paintChild(child, offset) {
+    if (__privateGet(this, _skipChildPainting)) return;
     child.canvasPainter.paint(this, offset);
   }
 };
 _estimateBound = new WeakMap();
 _containerLayer = new WeakMap();
 _currentLayer = new WeakMap();
+_skipChildPainting = new WeakMap();
+_CanvasPaintingContext_static = new WeakSet();
+collectPainters_fn = function(node, offset, ancestorChain, result) {
+  if (node.isPainter) {
+    result.push({
+      renderObject: node,
+      offset,
+      ancestors: [...ancestorChain]
+    });
+  }
+  const childAncestorChain = [...ancestorChain, { node, offset }];
+  node.visitChildren((child) => {
+    var _a;
+    __privateMethod(_a = _CanvasPaintingContext, _CanvasPaintingContext_static, collectPainters_fn).call(_a, child, offset.plus(child.offset), childAncestorChain, result);
+  });
+};
 _recorder = new WeakMap();
 _ctx2 = new WeakMap();
 _CanvasPaintingContext_instances = new WeakSet();
 startRecording_fn = function() {
   __privateSet(this, _currentLayer, new PictureLayer(__privateGet(this, _estimateBound)));
   __privateSet(this, _recorder, new PictureRecorder(__privateGet(this, _estimateBound)));
-  __privateSet(this, _ctx2, __privateGet(this, _recorder).createCanvasContext());
+  __privateSet(this, _ctx2, createCanvasProxy(__privateGet(this, _recorder).createCanvasContext()));
   __privateGet(this, _containerLayer).append(__privateGet(this, _currentLayer));
 };
 appendLayer_fn = function(layer) {
   __privateGet(this, _containerLayer).append(layer);
 };
+__privateAdd(_CanvasPaintingContext, _CanvasPaintingContext_static);
 var CanvasPaintingContext = _CanvasPaintingContext;
 
 // src/framework/renderer/canvas/canvas-renderer.ts
@@ -13489,13 +13597,15 @@ var CanvasRenderPipeline = class extends RenderPipeline {
   drawFrame() {
     this.flushLayout();
     this.flushPaintTransformUpdate();
-    this.flushPaint();
     this.recalculateZOrder();
+    this.flushPaint();
     __privateMethod(this, _CanvasRenderPipeline_instances, compositeFrame_fn).call(this);
   }
   reinitializeFrame() {
     this.renderView.layout(constraints_default.tight(this.renderContext.viewSize));
     this.renderView.updatePaintTransform();
+    this.notifyZOrderChanged();
+    this.recalculateZOrder();
     CanvasPaintingContext.repaintCompositedChild(this.renderView);
     __privateMethod(this, _CanvasRenderPipeline_instances, compositeFrame_fn).call(this);
   }
@@ -13831,23 +13941,95 @@ var Scheduler = class {
 };
 var Scheduler_default = Scheduler;
 
+// src/framework/Vsync.ts
+var Vsync = class _Vsync {
+  constructor() {
+    __publicField(this, "callbacks");
+    __publicField(this, "frameRequested");
+    __publicField(this, "rafId");
+    /**
+     * Handles the animation frame by executing all queued callbacks.
+     */
+    __publicField(this, "handleFrame", (time) => {
+      this.frameRequested = false;
+      this.rafId = null;
+      const callbacksToRun = [...this.callbacks];
+      this.callbacks = [];
+      for (const callback of callbacksToRun) {
+        callback(time);
+      }
+      if (this.callbacks.length > 0 && !this.frameRequested) {
+        this.frameRequested = true;
+        this.rafId = requestAnimationFrame(this.handleFrame);
+      }
+    });
+    this.callbacks = [];
+    this.frameRequested = false;
+    this.rafId = null;
+  }
+  static getInstance() {
+    if (typeof window === "undefined") {
+      throw new Error("Vsync requires window object");
+    }
+    if (!window.__flitter_vsync__) {
+      window.__flitter_vsync__ = new _Vsync();
+    }
+    return window.__flitter_vsync__;
+  }
+  /**
+   * Schedules a callback to be executed in the next animation frame.
+   * If there's already a frame requested, the callback will be queued
+   * to run with other callbacks in that frame.
+   */
+  requestCallback(callback) {
+    this.callbacks.push(callback);
+    if (!this.frameRequested) {
+      this.frameRequested = true;
+      this.rafId = requestAnimationFrame(this.handleFrame);
+    }
+  }
+  /**
+   * Removes a previously scheduled callback.
+   */
+  cancelCallback(callback) {
+    const index = this.callbacks.indexOf(callback);
+    if (index !== -1) {
+      this.callbacks.splice(index, 1);
+    }
+    if (this.callbacks.length === 0 && this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.frameRequested = false;
+      this.rafId = null;
+    }
+  }
+};
+
 // src/framework/RenderFrameDispatcher.ts
+var _vsync;
 var RenderFrameDispatcher = class {
   constructor({ onFrame } = {}) {
     __publicField(this, "onFrame");
+    __privateAdd(this, _vsync, null);
     this.onFrame = onFrame;
   }
+  get vsync() {
+    if (!__privateGet(this, _vsync)) {
+      __privateSet(this, _vsync, Vsync.getInstance());
+    }
+    return __privateGet(this, _vsync);
+  }
   setOnFrame(callback) {
     this.onFrame = () => callback();
   }
   dispatch() {
     if (typeof window === "undefined") return;
-    window.requestAnimationFrame(() => {
+    this.vsync.requestCallback(() => {
       var _a;
       (_a = this.onFrame) == null ? void 0 : _a.call(this);
     });
   }
 };
+_vsync = new WeakMap();
 var RenderFrameDispatcher_default = RenderFrameDispatcher;
 
 // src/framework/Globalkey.ts
@@ -13886,6 +14068,11 @@ var RenderObject = class {
      * Also related to event bubbling on HitTestDispatcher
      */
     __privateAdd(this, _zOrder);
+    /**
+     * The minimum zOrder among all painter descendants (or own zOrder if painter).
+     * Used by canvas renderer to sort children for z-ordered tree walk painting.
+     */
+    __publicField(this, "minDescendantZOrder", 0);
     __privateAdd(this, _svgPainter);
     __privateAdd(this, _canvasPainter);
     __publicField(this, "type", this.constructor.name);
@@ -16970,10 +17157,9 @@ var TransformCanvasPainter = class extends CanvasPainter {
   }
   performPaint(context, offset) {
     const arr = this.effectiveTransform._m4storage;
-    const a = arr[0], b = arr[1], c = arr[4], d = arr[5], e = arr[12], f = arr[13];
     context.canvas.save();
     context.canvas.translate(offset.x, offset.y);
-    context.canvas.transform(a, b, c, d, e, f);
+    context.canvas.transform(arr[0], arr[1], arr[4], arr[5], arr[12], arr[13]);
     context.canvas.translate(-offset.x, -offset.y);
     this.defaultPaint(context, offset);
     context.canvas.restore();
@@ -18360,10 +18546,10 @@ var CanvasPainterOpacity = class extends CanvasPainter {
     return this.renderObject.opacityProp;
   }
   performPaint(context, offset) {
-    const oldAlpha = context.canvas.globalAlpha;
-    context.canvas.globalAlpha = oldAlpha * this.opacity;
+    context.canvas.save();
+    context.canvas.globalAlpha *= this.opacity;
     this.defaultPaint(context, offset);
-    context.canvas.globalAlpha = oldAlpha;
+    context.canvas.restore();
   }
 };
 var BaseOpacity_default = Opacity;
@@ -19691,7 +19877,6 @@ var ToolTipState = class extends State {
     __publicField(this, "show", false);
   }
   handleMouseEnter() {
-    this.show = true;
     this.setState(() => {
       this.show = true;
     });
@@ -20308,7 +20493,9 @@ var CaretState = class extends State {
     if (this.widget.isTyping !== oldWidget.isTyping) {
       if (this.widget.isTyping) {
         this.stopBlinking();
-        this.visible = true;
+        this.setState(() => {
+          this.visible = true;
+        });
       } else {
         this.startBlinking();
       }

package/index.d.cts

@@ -3570,13 +3570,11 @@ declare class CanvasPaintingContext {
     stopRecording(): void;
     addLayer(layer: Layer): void;
     /**
+     * Paint a child RenderObject.
      *
-     * @param child   /// Paint a child [RenderObject].
-     * @param offset
-    ///
-    /// @todo: If the child has its own composited layer, the child will be composited
-    /// into the layer subtree associated with this painting context. Otherwise,
-    /// the child will be painted into the current PictureLayer for this context.
+     * When #skipChildPainting is true (during z-ordered paint phase),
+     * this is a no-op because each painter is invoked individually
+     * in z-order from repaintCompositedChild.
      */
     paintChild(child: RenderObject, offset: Offset$1): void;
 }
@@ -3595,8 +3593,36 @@ declare class CanvasPainter extends Painter$1 {
     skippedPaintingOnLayer(): void;
 }
 
+/**
+ * Vsync manages requestAnimationFrame calls by queuing callbacks and executing them
+ * in a single animation frame to optimize performance.
+ */
+declare class Vsync {
+    private callbacks;
+    private frameRequested;
+    private rafId;
+    private constructor();
+    static getInstance(): Vsync;
+    /**
+     * Schedules a callback to be executed in the next animation frame.
+     * If there's already a frame requested, the callback will be queued
+     * to run with other callbacks in that frame.
+     */
+    requestCallback(callback: (time: number) => void): void;
+    /**
+     * Removes a previously scheduled callback.
+     */
+    cancelCallback(callback: (time: number) => void): void;
+    /**
+     * Handles the animation frame by executing all queued callbacks.
+     */
+    private handleFrame;
+}
+
 declare class RenderFrameDispatcher {
+    #private;
     private onFrame?;
+    get vsync(): Vsync;
     constructor({ onFrame }?: {
         onFrame?: () => void;
     });
@@ -4129,6 +4155,11 @@ declare class RenderObject {
     needsPaintTransformUpdate: boolean;
     depth: number;
     get zOrder(): number;
+    /**
+     * The minimum zOrder among all painter descendants (or own zOrder if painter).
+     * Used by canvas renderer to sort children for z-ordered tree walk painting.
+     */
+    minDescendantZOrder: number;
     updateZOrder(value: number): void;
     get svgPainter(): SvgPainter;
     get canvasPainter(): CanvasPainter;

package/index.d.ts

@@ -3570,13 +3570,11 @@ declare class CanvasPaintingContext {
     stopRecording(): void;
     addLayer(layer: Layer): void;
     /**
+     * Paint a child RenderObject.
      *
-     * @param child   /// Paint a child [RenderObject].
-     * @param offset
-    ///
-    /// @todo: If the child has its own composited layer, the child will be composited
-    /// into the layer subtree associated with this painting context. Otherwise,
-    /// the child will be painted into the current PictureLayer for this context.
+     * When #skipChildPainting is true (during z-ordered paint phase),
+     * this is a no-op because each painter is invoked individually
+     * in z-order from repaintCompositedChild.
      */
     paintChild(child: RenderObject, offset: Offset$1): void;
 }
@@ -3595,8 +3593,36 @@ declare class CanvasPainter extends Painter$1 {
     skippedPaintingOnLayer(): void;
 }
 
+/**
+ * Vsync manages requestAnimationFrame calls by queuing callbacks and executing them
+ * in a single animation frame to optimize performance.
+ */
+declare class Vsync {
+    private callbacks;
+    private frameRequested;
+    private rafId;
+    private constructor();
+    static getInstance(): Vsync;
+    /**
+     * Schedules a callback to be executed in the next animation frame.
+     * If there's already a frame requested, the callback will be queued
+     * to run with other callbacks in that frame.
+     */
+    requestCallback(callback: (time: number) => void): void;
+    /**
+     * Removes a previously scheduled callback.
+     */
+    cancelCallback(callback: (time: number) => void): void;
+    /**
+     * Handles the animation frame by executing all queued callbacks.
+     */
+    private handleFrame;
+}
+
 declare class RenderFrameDispatcher {
+    #private;
     private onFrame?;
+    get vsync(): Vsync;
     constructor({ onFrame }?: {
         onFrame?: () => void;
     });
@@ -4129,6 +4155,11 @@ declare class RenderObject {
     needsPaintTransformUpdate: boolean;
     depth: number;
     get zOrder(): number;
+    /**
+     * The minimum zOrder among all painter descendants (or own zOrder if painter).
+     * Used by canvas renderer to sort children for z-ordered tree walk painting.
+     */
+    minDescendantZOrder: number;
     updateZOrder(value: number): void;
     get svgPainter(): SvgPainter;
     get canvasPainter(): CanvasPainter;

package/index.global.js

@@ -13456,8 +13456,8 @@
     }
   };
   _resizeHandlers = new WeakMap();
-  var _zOrderChanged;
-  var RenderPipeline = class {
+  var _zOrderChanged, _RenderPipeline_static, computeMinDescendantZOrder_fn;
+  var _RenderPipeline = class _RenderPipeline {
     constructor({
       onNeedVisualUpdate,
       renderContext,
@@ -13495,6 +13495,7 @@
       this.requestVisualUpdate();
     }
     recalculateZOrder() {
+      var _a;
       if (!__privateGet(this, _zOrderChanged)) return [];
       __privateSet(this, _zOrderChanged, false);
       const visitor = new ZOrderCalculatorVisitor();
@@ -13504,6 +13505,7 @@
         const renderObject = painterRenderObjects[i];
         renderObject.updateZOrder(i);
       }
+      __privateMethod(_a = _RenderPipeline, _RenderPipeline_static, computeMinDescendantZOrder_fn).call(_a, this.renderView);
       return painterRenderObjects;
     }
     flushPaintTransformUpdate() {
@@ -13516,6 +13518,19 @@
     }
   };
   _zOrderChanged = new WeakMap();
+  _RenderPipeline_static = new WeakSet();
+  computeMinDescendantZOrder_fn = function(node) {
+    var _a;
+    let min = node.isPainter ? node.zOrder : Infinity;
+    node.visitChildren((child) => {
+      var _a2;
+      min = Math.min(min, __privateMethod(_a2 = _RenderPipeline, _RenderPipeline_static, computeMinDescendantZOrder_fn).call(_a2, child));
+    });
+    node.minDescendantZOrder = min === Infinity ? (_a = node.zOrder) != null ? _a : 0 : min;
+    return node.minDescendantZOrder;
+  };
+  __privateAdd(_RenderPipeline, _RenderPipeline_static);
+  var RenderPipeline = _RenderPipeline;
   var Painter = class {
     constructor(renderObject) {
       __publicField(this, "renderObject");
@@ -13720,19 +13735,81 @@
   }
 
   // src/framework/renderer/canvas/canvas-painting-context.ts
-  var _estimateBound, _containerLayer, _currentLayer, _recorder, _ctx2, _CanvasPaintingContext_instances, startRecording_fn, appendLayer_fn;
+  var DRAWING_OPS = /* @__PURE__ */ new Set([
+    "fillRect",
+    "strokeRect",
+    "clearRect",
+    "fill",
+    "stroke",
+    "fillText",
+    "strokeText",
+    "drawImage",
+    "putImageData"
+  ]);
+  var NOOP = () => {
+  };
+  function createCanvasProxy(ctx) {
+    let suppressDepth = 0;
+    let suppressing = false;
+    const proxy = new Proxy(ctx, {
+      get(target, prop, receiver) {
+        if (prop === "__enterSuppress")
+          return () => {
+            suppressing = true;
+            suppressDepth = 0;
+          };
+        if (prop === "__exitSuppress")
+          return () => {
+            suppressing = false;
+          };
+        if (prop === "__raw") return target;
+        if (suppressing) {
+          if (prop === "save") {
+            return () => {
+              suppressDepth++;
+              if (suppressDepth > 1) target.save();
+            };
+          }
+          if (prop === "restore") {
+            return () => {
+              if (suppressDepth > 1) target.restore();
+              suppressDepth--;
+            };
+          }
+          if (DRAWING_OPS.has(prop)) {
+            return NOOP;
+          }
+        }
+        const val = Reflect.get(target, prop, target);
+        return typeof val === "function" ? val.bind(target) : val;
+      },
+      set(target, prop, value) {
+        return Reflect.set(target, prop, value);
+      }
+    });
+    return proxy;
+  }
+  var _estimateBound, _containerLayer, _currentLayer, _skipChildPainting, _CanvasPaintingContext_static, collectPainters_fn, _recorder, _ctx2, _CanvasPaintingContext_instances, startRecording_fn, appendLayer_fn;
   var _CanvasPaintingContext = class _CanvasPaintingContext {
     constructor(containerLayer, estimateBound) {
       __privateAdd(this, _CanvasPaintingContext_instances);
       __privateAdd(this, _estimateBound);
       __privateAdd(this, _containerLayer);
       __privateAdd(this, _currentLayer);
+      /**
+       * When true, paintChild becomes a no-op. Used during z-ordered
+       * painting so that each painter's performPaint only draws itself
+       * without recursing into children (children are painted separately
+       * in z-order).
+       */
+      __privateAdd(this, _skipChildPainting, false);
       __privateAdd(this, _recorder);
       __privateAdd(this, _ctx2);
       __privateSet(this, _containerLayer, containerLayer);
       __privateSet(this, _estimateBound, estimateBound);
     }
     static repaintCompositedChild(node) {
+      var _a;
       assert(
         node.canvasPainter.isRepaintBoundary,
         "isRepaintBoundary must be true on repaintCompositedChild"
@@ -13753,7 +13830,22 @@
         childLayer,
         node.canvasPainter.paintBounds
       );
-      node.canvasPainter.paint(childContext, offset_default.Constants.zero);
+      const painters = [];
+      __privateMethod(_a = _CanvasPaintingContext, _CanvasPaintingContext_static, collectPainters_fn).call(_a, node, offset_default.Constants.zero, [], painters);
+      painters.sort((a, b) => a.renderObject.zOrder - b.renderObject.zOrder);
+      const proxyCanvas = childContext.canvas;
+      __privateSet(childContext, _skipChildPainting, true);
+      for (const { renderObject, offset, ancestors } of painters) {
+        proxyCanvas.__raw.save();
+        for (const { node: ancestorNode, offset: ancOffset } of ancestors) {
+          proxyCanvas.__enterSuppress();
+          ancestorNode.canvasPainter.paint(childContext, ancOffset);
+          proxyCanvas.__exitSuppress();
+        }
+        renderObject.canvasPainter.paint(childContext, offset);
+        proxyCanvas.__raw.restore();
+      }
+      __privateSet(childContext, _skipChildPainting, false);
       childContext.stopRecording();
     }
     static updateLayerProperties(_) {
@@ -13776,33 +13868,49 @@
       __privateMethod(this, _CanvasPaintingContext_instances, appendLayer_fn).call(this, layer);
     }
     /**
-     * 
-     * @param child   /// Paint a child [RenderObject].
-     * @param offset 
-    ///
-    /// @todo: If the child has its own composited layer, the child will be composited
-    /// into the layer subtree associated with this painting context. Otherwise,
-    /// the child will be painted into the current PictureLayer for this context.
+     * Paint a child RenderObject.
+     *
+     * When #skipChildPainting is true (during z-ordered paint phase),
+     * this is a no-op because each painter is invoked individually
+     * in z-order from repaintCompositedChild.
      */
     paintChild(child, offset) {
+      if (__privateGet(this, _skipChildPainting)) return;
       child.canvasPainter.paint(this, offset);
     }
   };
   _estimateBound = new WeakMap();
   _containerLayer = new WeakMap();
   _currentLayer = new WeakMap();
+  _skipChildPainting = new WeakMap();
+  _CanvasPaintingContext_static = new WeakSet();
+  collectPainters_fn = function(node, offset, ancestorChain, result) {
+    if (node.isPainter) {
+      result.push({
+        renderObject: node,
+        offset,
+        ancestors: [...ancestorChain]
+      });
+    }
+    const childAncestorChain = [...ancestorChain, { node, offset }];
+    node.visitChildren((child) => {
+      var _a;
+      __privateMethod(_a = _CanvasPaintingContext, _CanvasPaintingContext_static, collectPainters_fn).call(_a, child, offset.plus(child.offset), childAncestorChain, result);
+    });
+  };
   _recorder = new WeakMap();
   _ctx2 = new WeakMap();
   _CanvasPaintingContext_instances = new WeakSet();
   startRecording_fn = function() {
     __privateSet(this, _currentLayer, new PictureLayer(__privateGet(this, _estimateBound)));
     __privateSet(this, _recorder, new PictureRecorder(__privateGet(this, _estimateBound)));
-    __privateSet(this, _ctx2, __privateGet(this, _recorder).createCanvasContext());
+    __privateSet(this, _ctx2, createCanvasProxy(__privateGet(this, _recorder).createCanvasContext()));
     __privateGet(this, _containerLayer).append(__privateGet(this, _currentLayer));
   };
   appendLayer_fn = function(layer) {
     __privateGet(this, _containerLayer).append(layer);
   };
+  __privateAdd(_CanvasPaintingContext, _CanvasPaintingContext_static);
   var CanvasPaintingContext = _CanvasPaintingContext;
 
   // src/framework/renderer/canvas/canvas-renderer.ts
@@ -13815,13 +13923,15 @@
     drawFrame() {
       this.flushLayout();
       this.flushPaintTransformUpdate();
-      this.flushPaint();
       this.recalculateZOrder();
+      this.flushPaint();
       __privateMethod(this, _CanvasRenderPipeline_instances, compositeFrame_fn).call(this);
     }
     reinitializeFrame() {
       this.renderView.layout(constraints_default.tight(this.renderContext.viewSize));
       this.renderView.updatePaintTransform();
+      this.notifyZOrderChanged();
+      this.recalculateZOrder();
       CanvasPaintingContext.repaintCompositedChild(this.renderView);
       __privateMethod(this, _CanvasRenderPipeline_instances, compositeFrame_fn).call(this);
     }
@@ -14157,23 +14267,95 @@
   };
   var Scheduler_default = Scheduler;
 
+  // src/framework/Vsync.ts
+  var Vsync = class _Vsync {
+    constructor() {
+      __publicField(this, "callbacks");
+      __publicField(this, "frameRequested");
+      __publicField(this, "rafId");
+      /**
+       * Handles the animation frame by executing all queued callbacks.
+       */
+      __publicField(this, "handleFrame", (time) => {
+        this.frameRequested = false;
+        this.rafId = null;
+        const callbacksToRun = [...this.callbacks];
+        this.callbacks = [];
+        for (const callback of callbacksToRun) {
+          callback(time);
+        }
+        if (this.callbacks.length > 0 && !this.frameRequested) {
+          this.frameRequested = true;
+          this.rafId = requestAnimationFrame(this.handleFrame);
+        }
+      });
+      this.callbacks = [];
+      this.frameRequested = false;
+      this.rafId = null;
+    }
+    static getInstance() {
+      if (typeof window === "undefined") {
+        throw new Error("Vsync requires window object");
+      }
+      if (!window.__flitter_vsync__) {
+        window.__flitter_vsync__ = new _Vsync();
+      }
+      return window.__flitter_vsync__;
+    }
+    /**
+     * Schedules a callback to be executed in the next animation frame.
+     * If there's already a frame requested, the callback will be queued
+     * to run with other callbacks in that frame.
+     */
+    requestCallback(callback) {
+      this.callbacks.push(callback);
+      if (!this.frameRequested) {
+        this.frameRequested = true;
+        this.rafId = requestAnimationFrame(this.handleFrame);
+      }
+    }
+    /**
+     * Removes a previously scheduled callback.
+     */
+    cancelCallback(callback) {
+      const index = this.callbacks.indexOf(callback);
+      if (index !== -1) {
+        this.callbacks.splice(index, 1);
+      }
+      if (this.callbacks.length === 0 && this.rafId !== null) {
+        cancelAnimationFrame(this.rafId);
+        this.frameRequested = false;
+        this.rafId = null;
+      }
+    }
+  };
+
   // src/framework/RenderFrameDispatcher.ts
+  var _vsync;
   var RenderFrameDispatcher = class {
     constructor({ onFrame } = {}) {
       __publicField(this, "onFrame");
+      __privateAdd(this, _vsync, null);
       this.onFrame = onFrame;
     }
+    get vsync() {
+      if (!__privateGet(this, _vsync)) {
+        __privateSet(this, _vsync, Vsync.getInstance());
+      }
+      return __privateGet(this, _vsync);
+    }
     setOnFrame(callback) {
       this.onFrame = () => callback();
     }
     dispatch() {
       if (typeof window === "undefined") return;
-      window.requestAnimationFrame(() => {
+      this.vsync.requestCallback(() => {
         var _a;
         (_a = this.onFrame) == null ? void 0 : _a.call(this);
       });
     }
   };
+  _vsync = new WeakMap();
   var RenderFrameDispatcher_default = RenderFrameDispatcher;
 
   // src/framework/Globalkey.ts
@@ -14212,6 +14394,11 @@
        * Also related to event bubbling on HitTestDispatcher
        */
       __privateAdd(this, _zOrder);
+      /**
+       * The minimum zOrder among all painter descendants (or own zOrder if painter).
+       * Used by canvas renderer to sort children for z-ordered tree walk painting.
+       */
+      __publicField(this, "minDescendantZOrder", 0);
       __privateAdd(this, _svgPainter);
       __privateAdd(this, _canvasPainter);
       __publicField(this, "type", this.constructor.name);
@@ -18174,10 +18361,9 @@
     }
     performPaint(context, offset) {
       const arr = this.effectiveTransform._m4storage;
-      const a = arr[0], b = arr[1], c = arr[4], d = arr[5], e = arr[12], f = arr[13];
       context.canvas.save();
       context.canvas.translate(offset.x, offset.y);
-      context.canvas.transform(a, b, c, d, e, f);
+      context.canvas.transform(arr[0], arr[1], arr[4], arr[5], arr[12], arr[13]);
       context.canvas.translate(-offset.x, -offset.y);
       this.defaultPaint(context, offset);
       context.canvas.restore();
@@ -19564,10 +19750,10 @@
       return this.renderObject.opacityProp;
     }
     performPaint(context, offset) {
-      const oldAlpha = context.canvas.globalAlpha;
-      context.canvas.globalAlpha = oldAlpha * this.opacity;
+      context.canvas.save();
+      context.canvas.globalAlpha *= this.opacity;
       this.defaultPaint(context, offset);
-      context.canvas.globalAlpha = oldAlpha;
+      context.canvas.restore();
     }
   };
   var BaseOpacity_default = Opacity;
@@ -20895,7 +21081,6 @@
       __publicField(this, "show", false);
     }
     handleMouseEnter() {
-      this.show = true;
       this.setState(() => {
         this.show = true;
       });
@@ -21512,7 +21697,9 @@
       if (this.widget.isTyping !== oldWidget.isTyping) {
         if (this.widget.isTyping) {
           this.stopBlinking();
-          this.visible = true;
+          this.setState(() => {
+            this.visible = true;
+          });
         } else {
           this.startBlinking();
         }

package/index.js

@@ -13130,8 +13130,8 @@ var RenderContext = class {
   }
 };
 _resizeHandlers = new WeakMap();
-var _zOrderChanged;
-var RenderPipeline = class {
+var _zOrderChanged, _RenderPipeline_static, computeMinDescendantZOrder_fn;
+var _RenderPipeline = class _RenderPipeline {
   constructor({
     onNeedVisualUpdate,
     renderContext,
@@ -13169,6 +13169,7 @@ var RenderPipeline = class {
     this.requestVisualUpdate();
   }
   recalculateZOrder() {
+    var _a;
     if (!__privateGet(this, _zOrderChanged)) return [];
     __privateSet(this, _zOrderChanged, false);
     const visitor = new ZOrderCalculatorVisitor();
@@ -13178,6 +13179,7 @@ var RenderPipeline = class {
       const renderObject = painterRenderObjects[i];
       renderObject.updateZOrder(i);
     }
+    __privateMethod(_a = _RenderPipeline, _RenderPipeline_static, computeMinDescendantZOrder_fn).call(_a, this.renderView);
     return painterRenderObjects;
   }
   flushPaintTransformUpdate() {
@@ -13190,6 +13192,19 @@ var RenderPipeline = class {
   }
 };
 _zOrderChanged = new WeakMap();
+_RenderPipeline_static = new WeakSet();
+computeMinDescendantZOrder_fn = function(node) {
+  var _a;
+  let min = node.isPainter ? node.zOrder : Infinity;
+  node.visitChildren((child) => {
+    var _a2;
+    min = Math.min(min, __privateMethod(_a2 = _RenderPipeline, _RenderPipeline_static, computeMinDescendantZOrder_fn).call(_a2, child));
+  });
+  node.minDescendantZOrder = min === Infinity ? (_a = node.zOrder) != null ? _a : 0 : min;
+  return node.minDescendantZOrder;
+};
+__privateAdd(_RenderPipeline, _RenderPipeline_static);
+var RenderPipeline = _RenderPipeline;
 var Painter = class {
   constructor(renderObject) {
     __publicField(this, "renderObject");
@@ -13394,19 +13409,81 @@ function canNotReach(type) {
 }
 
 // src/framework/renderer/canvas/canvas-painting-context.ts
-var _estimateBound, _containerLayer, _currentLayer, _recorder, _ctx2, _CanvasPaintingContext_instances, startRecording_fn, appendLayer_fn;
+var DRAWING_OPS = /* @__PURE__ */ new Set([
+  "fillRect",
+  "strokeRect",
+  "clearRect",
+  "fill",
+  "stroke",
+  "fillText",
+  "strokeText",
+  "drawImage",
+  "putImageData"
+]);
+var NOOP = () => {
+};
+function createCanvasProxy(ctx) {
+  let suppressDepth = 0;
+  let suppressing = false;
+  const proxy = new Proxy(ctx, {
+    get(target, prop, receiver) {
+      if (prop === "__enterSuppress")
+        return () => {
+          suppressing = true;
+          suppressDepth = 0;
+        };
+      if (prop === "__exitSuppress")
+        return () => {
+          suppressing = false;
+        };
+      if (prop === "__raw") return target;
+      if (suppressing) {
+        if (prop === "save") {
+          return () => {
+            suppressDepth++;
+            if (suppressDepth > 1) target.save();
+          };
+        }
+        if (prop === "restore") {
+          return () => {
+            if (suppressDepth > 1) target.restore();
+            suppressDepth--;
+          };
+        }
+        if (DRAWING_OPS.has(prop)) {
+          return NOOP;
+        }
+      }
+      const val = Reflect.get(target, prop, target);
+      return typeof val === "function" ? val.bind(target) : val;
+    },
+    set(target, prop, value) {
+      return Reflect.set(target, prop, value);
+    }
+  });
+  return proxy;
+}
+var _estimateBound, _containerLayer, _currentLayer, _skipChildPainting, _CanvasPaintingContext_static, collectPainters_fn, _recorder, _ctx2, _CanvasPaintingContext_instances, startRecording_fn, appendLayer_fn;
 var _CanvasPaintingContext = class _CanvasPaintingContext {
   constructor(containerLayer, estimateBound) {
     __privateAdd(this, _CanvasPaintingContext_instances);
     __privateAdd(this, _estimateBound);
     __privateAdd(this, _containerLayer);
     __privateAdd(this, _currentLayer);
+    /**
+     * When true, paintChild becomes a no-op. Used during z-ordered
+     * painting so that each painter's performPaint only draws itself
+     * without recursing into children (children are painted separately
+     * in z-order).
+     */
+    __privateAdd(this, _skipChildPainting, false);
     __privateAdd(this, _recorder);
     __privateAdd(this, _ctx2);
     __privateSet(this, _containerLayer, containerLayer);
     __privateSet(this, _estimateBound, estimateBound);
   }
   static repaintCompositedChild(node) {
+    var _a;
     assert(
       node.canvasPainter.isRepaintBoundary,
       "isRepaintBoundary must be true on repaintCompositedChild"
@@ -13427,7 +13504,22 @@ var _CanvasPaintingContext = class _CanvasPaintingContext {
       childLayer,
       node.canvasPainter.paintBounds
     );
-    node.canvasPainter.paint(childContext, offset_default.Constants.zero);
+    const painters = [];
+    __privateMethod(_a = _CanvasPaintingContext, _CanvasPaintingContext_static, collectPainters_fn).call(_a, node, offset_default.Constants.zero, [], painters);
+    painters.sort((a, b) => a.renderObject.zOrder - b.renderObject.zOrder);
+    const proxyCanvas = childContext.canvas;
+    __privateSet(childContext, _skipChildPainting, true);
+    for (const { renderObject, offset, ancestors } of painters) {
+      proxyCanvas.__raw.save();
+      for (const { node: ancestorNode, offset: ancOffset } of ancestors) {
+        proxyCanvas.__enterSuppress();
+        ancestorNode.canvasPainter.paint(childContext, ancOffset);
+        proxyCanvas.__exitSuppress();
+      }
+      renderObject.canvasPainter.paint(childContext, offset);
+      proxyCanvas.__raw.restore();
+    }
+    __privateSet(childContext, _skipChildPainting, false);
     childContext.stopRecording();
   }
   static updateLayerProperties(_) {
@@ -13450,33 +13542,49 @@ var _CanvasPaintingContext = class _CanvasPaintingContext {
     __privateMethod(this, _CanvasPaintingContext_instances, appendLayer_fn).call(this, layer);
   }
   /**
-   * 
-   * @param child   /// Paint a child [RenderObject].
-   * @param offset 
-  ///
-  /// @todo: If the child has its own composited layer, the child will be composited
-  /// into the layer subtree associated with this painting context. Otherwise,
-  /// the child will be painted into the current PictureLayer for this context.
+   * Paint a child RenderObject.
+   *
+   * When #skipChildPainting is true (during z-ordered paint phase),
+   * this is a no-op because each painter is invoked individually
+   * in z-order from repaintCompositedChild.
    */
   paintChild(child, offset) {
+    if (__privateGet(this, _skipChildPainting)) return;
     child.canvasPainter.paint(this, offset);
   }
 };
 _estimateBound = new WeakMap();
 _containerLayer = new WeakMap();
 _currentLayer = new WeakMap();
+_skipChildPainting = new WeakMap();
+_CanvasPaintingContext_static = new WeakSet();
+collectPainters_fn = function(node, offset, ancestorChain, result) {
+  if (node.isPainter) {
+    result.push({
+      renderObject: node,
+      offset,
+      ancestors: [...ancestorChain]
+    });
+  }
+  const childAncestorChain = [...ancestorChain, { node, offset }];
+  node.visitChildren((child) => {
+    var _a;
+    __privateMethod(_a = _CanvasPaintingContext, _CanvasPaintingContext_static, collectPainters_fn).call(_a, child, offset.plus(child.offset), childAncestorChain, result);
+  });
+};
 _recorder = new WeakMap();
 _ctx2 = new WeakMap();
 _CanvasPaintingContext_instances = new WeakSet();
 startRecording_fn = function() {
   __privateSet(this, _currentLayer, new PictureLayer(__privateGet(this, _estimateBound)));
   __privateSet(this, _recorder, new PictureRecorder(__privateGet(this, _estimateBound)));
-  __privateSet(this, _ctx2, __privateGet(this, _recorder).createCanvasContext());
+  __privateSet(this, _ctx2, createCanvasProxy(__privateGet(this, _recorder).createCanvasContext()));
   __privateGet(this, _containerLayer).append(__privateGet(this, _currentLayer));
 };
 appendLayer_fn = function(layer) {
   __privateGet(this, _containerLayer).append(layer);
 };
+__privateAdd(_CanvasPaintingContext, _CanvasPaintingContext_static);
 var CanvasPaintingContext = _CanvasPaintingContext;
 
 // src/framework/renderer/canvas/canvas-renderer.ts
@@ -13489,13 +13597,15 @@ var CanvasRenderPipeline = class extends RenderPipeline {
   drawFrame() {
     this.flushLayout();
     this.flushPaintTransformUpdate();
-    this.flushPaint();
     this.recalculateZOrder();
+    this.flushPaint();
     __privateMethod(this, _CanvasRenderPipeline_instances, compositeFrame_fn).call(this);
   }
   reinitializeFrame() {
     this.renderView.layout(constraints_default.tight(this.renderContext.viewSize));
     this.renderView.updatePaintTransform();
+    this.notifyZOrderChanged();
+    this.recalculateZOrder();
     CanvasPaintingContext.repaintCompositedChild(this.renderView);
     __privateMethod(this, _CanvasRenderPipeline_instances, compositeFrame_fn).call(this);
   }
@@ -13831,23 +13941,95 @@ var Scheduler = class {
 };
 var Scheduler_default = Scheduler;
 
+// src/framework/Vsync.ts
+var Vsync = class _Vsync {
+  constructor() {
+    __publicField(this, "callbacks");
+    __publicField(this, "frameRequested");
+    __publicField(this, "rafId");
+    /**
+     * Handles the animation frame by executing all queued callbacks.
+     */
+    __publicField(this, "handleFrame", (time) => {
+      this.frameRequested = false;
+      this.rafId = null;
+      const callbacksToRun = [...this.callbacks];
+      this.callbacks = [];
+      for (const callback of callbacksToRun) {
+        callback(time);
+      }
+      if (this.callbacks.length > 0 && !this.frameRequested) {
+        this.frameRequested = true;
+        this.rafId = requestAnimationFrame(this.handleFrame);
+      }
+    });
+    this.callbacks = [];
+    this.frameRequested = false;
+    this.rafId = null;
+  }
+  static getInstance() {
+    if (typeof window === "undefined") {
+      throw new Error("Vsync requires window object");
+    }
+    if (!window.__flitter_vsync__) {
+      window.__flitter_vsync__ = new _Vsync();
+    }
+    return window.__flitter_vsync__;
+  }
+  /**
+   * Schedules a callback to be executed in the next animation frame.
+   * If there's already a frame requested, the callback will be queued
+   * to run with other callbacks in that frame.
+   */
+  requestCallback(callback) {
+    this.callbacks.push(callback);
+    if (!this.frameRequested) {
+      this.frameRequested = true;
+      this.rafId = requestAnimationFrame(this.handleFrame);
+    }
+  }
+  /**
+   * Removes a previously scheduled callback.
+   */
+  cancelCallback(callback) {
+    const index = this.callbacks.indexOf(callback);
+    if (index !== -1) {
+      this.callbacks.splice(index, 1);
+    }
+    if (this.callbacks.length === 0 && this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.frameRequested = false;
+      this.rafId = null;
+    }
+  }
+};
+
 // src/framework/RenderFrameDispatcher.ts
+var _vsync;
 var RenderFrameDispatcher = class {
   constructor({ onFrame } = {}) {
     __publicField(this, "onFrame");
+    __privateAdd(this, _vsync, null);
     this.onFrame = onFrame;
   }
+  get vsync() {
+    if (!__privateGet(this, _vsync)) {
+      __privateSet(this, _vsync, Vsync.getInstance());
+    }
+    return __privateGet(this, _vsync);
+  }
   setOnFrame(callback) {
     this.onFrame = () => callback();
   }
   dispatch() {
     if (typeof window === "undefined") return;
-    window.requestAnimationFrame(() => {
+    this.vsync.requestCallback(() => {
       var _a;
       (_a = this.onFrame) == null ? void 0 : _a.call(this);
     });
   }
 };
+_vsync = new WeakMap();
 var RenderFrameDispatcher_default = RenderFrameDispatcher;
 
 // src/framework/Globalkey.ts
@@ -13886,6 +14068,11 @@ var RenderObject = class {
      * Also related to event bubbling on HitTestDispatcher
      */
     __privateAdd(this, _zOrder);
+    /**
+     * The minimum zOrder among all painter descendants (or own zOrder if painter).
+     * Used by canvas renderer to sort children for z-ordered tree walk painting.
+     */
+    __publicField(this, "minDescendantZOrder", 0);
     __privateAdd(this, _svgPainter);
     __privateAdd(this, _canvasPainter);
     __publicField(this, "type", this.constructor.name);
@@ -16970,10 +17157,9 @@ var TransformCanvasPainter = class extends CanvasPainter {
   }
   performPaint(context, offset) {
     const arr = this.effectiveTransform._m4storage;
-    const a = arr[0], b = arr[1], c = arr[4], d = arr[5], e = arr[12], f = arr[13];
     context.canvas.save();
     context.canvas.translate(offset.x, offset.y);
-    context.canvas.transform(a, b, c, d, e, f);
+    context.canvas.transform(arr[0], arr[1], arr[4], arr[5], arr[12], arr[13]);
     context.canvas.translate(-offset.x, -offset.y);
     this.defaultPaint(context, offset);
     context.canvas.restore();
@@ -18360,10 +18546,10 @@ var CanvasPainterOpacity = class extends CanvasPainter {
     return this.renderObject.opacityProp;
   }
   performPaint(context, offset) {
-    const oldAlpha = context.canvas.globalAlpha;
-    context.canvas.globalAlpha = oldAlpha * this.opacity;
+    context.canvas.save();
+    context.canvas.globalAlpha *= this.opacity;
     this.defaultPaint(context, offset);
-    context.canvas.globalAlpha = oldAlpha;
+    context.canvas.restore();
   }
 };
 var BaseOpacity_default = Opacity;
@@ -19691,7 +19877,6 @@ var ToolTipState = class extends State {
     __publicField(this, "show", false);
   }
   handleMouseEnter() {
-    this.show = true;
     this.setState(() => {
       this.show = true;
     });
@@ -20308,7 +20493,9 @@ var CaretState = class extends State {
     if (this.widget.isTyping !== oldWidget.isTyping) {
       if (this.widget.isTyping) {
         this.stopBlinking();
-        this.visible = true;
+        this.setState(() => {
+          this.visible = true;
+        });
       } else {
         this.startBlinking();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meursyphus/flitter",
-  "version": "2.0.3",
+  "version": "2.2.0",
   "description": "Flitter: A high-performance JavaScript rendering engine and framework inspired by Flutter. Features declarative programming, SVG and Canvas support, and optimized for complex data visualizations, interactive charts, and graphic editors in web applications.",
   "keywords": [
     "rendering-engine",
@@ -51,14 +51,14 @@
     "url": "https://github.com/meursyphus/flitter/issues"
   },
   "main": "./index.cjs",
+  "module": "./index.js",
+  "types": "./index.d.ts",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "module": "./index.js",
   "exports": {
     "import": "./index.js",
     "default": "./index.js"
-  },
-  "types": "./index.d.ts"
+  }
 }