@tldraw/editor 4.3.0 → 4.4.0-canary.09e80a09d230

package/dist-esm/lib/editor/derivations/notVisibleShapes.mjs

@@ -1,32 +1,24 @@
 import { computed, isUninitialized } from "@tldraw/state";
 function notVisibleShapes(editor) {
-  return computed("notVisibleShapes", function updateNotVisibleShapes(prevValue) {
-    const shapeIds = editor.getCurrentPageShapeIds();
-    const nextValue = /* @__PURE__ */ new Set();
+  return computed("notVisibleShapes", function(prevValue) {
+    const allShapeIds = editor.getCurrentPageShapeIds();
     const viewportPageBounds = editor.getViewportPageBounds();
-    const viewMinX = viewportPageBounds.minX;
-    const viewMinY = viewportPageBounds.minY;
-    const viewMaxX = viewportPageBounds.maxX;
-    const viewMaxY = viewportPageBounds.maxY;
-    for (const id of shapeIds) {
-      const pageBounds = editor.getShapePageBounds(id);
-      if (pageBounds !== void 0 && pageBounds.maxX >= viewMinX && pageBounds.minX <= viewMaxX && pageBounds.maxY >= viewMinY && pageBounds.minY <= viewMaxY) {
-        continue;
+    const visibleIds = editor.getShapeIdsInsideBounds(viewportPageBounds);
+    const nextValue = /* @__PURE__ */ new Set();
+    for (const id of allShapeIds) {
+      if (!visibleIds.has(id)) {
+        const shape = editor.getShape(id);
+        if (!shape) continue;
+        const canCull = editor.getShapeUtil(shape.type).canCull(shape);
+        if (!canCull) continue;
+        nextValue.add(id);
       }
-      const shape = editor.getShape(id);
-      if (!shape) continue;
-      const canCull = editor.getShapeUtil(shape.type).canCull(shape);
-      if (!canCull) continue;
-      nextValue.add(id);
     }
-    if (isUninitialized(prevValue)) {
+    if (isUninitialized(prevValue) || prevValue.size !== nextValue.size) {
       return nextValue;
     }
-    if (prevValue.size !== nextValue.size) return nextValue;
     for (const prev of prevValue) {
-      if (!nextValue.has(prev)) {
-        return nextValue;
-      }
+      if (!nextValue.has(prev)) return nextValue;
     }
     return prevValue;
   });

package/dist-esm/lib/editor/derivations/notVisibleShapes.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/editor/derivations/notVisibleShapes.ts"],
-  "sourcesContent": ["import { computed, isUninitialized } from '@tldraw/state'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { Editor } from '../Editor'\n\n/**\n * Non visible shapes are shapes outside of the viewport page bounds.\n *\n * @param editor - Instance of the tldraw Editor.\n * @returns Incremental derivation of non visible shapes.\n */\nexport function notVisibleShapes(editor: Editor) {\n\treturn computed<Set<TLShapeId>>('notVisibleShapes', function updateNotVisibleShapes(prevValue) {\n\t\tconst shapeIds = editor.getCurrentPageShapeIds()\n\t\tconst nextValue = new Set<TLShapeId>()\n\n\t\t// Extract viewport bounds once to avoid repeated property access\n\t\tconst viewportPageBounds = editor.getViewportPageBounds()\n\t\tconst viewMinX = viewportPageBounds.minX\n\t\tconst viewMinY = viewportPageBounds.minY\n\t\tconst viewMaxX = viewportPageBounds.maxX\n\t\tconst viewMaxY = viewportPageBounds.maxY\n\n\t\tfor (const id of shapeIds) {\n\t\t\tconst pageBounds = editor.getShapePageBounds(id)\n\n\t\t\t// Hybrid check: if bounds exist and shape overlaps viewport, it's visible.\n\t\t\t// This inlines Box.Collides to avoid function call overhead and the\n\t\t\t// redundant Contains check that Box.Includes was doing.\n\t\t\tif (\n\t\t\t\tpageBounds !== undefined &&\n\t\t\t\tpageBounds.maxX >= viewMinX &&\n\t\t\t\tpageBounds.minX <= viewMaxX &&\n\t\t\t\tpageBounds.maxY >= viewMinY &&\n\t\t\t\tpageBounds.minY <= viewMaxY\n\t\t\t) {\n\t\t\t\tcontinue\n\t\t\t}\n\n\t\t\t// Shape is outside viewport or has no bounds - check if it can be culled.\n\t\t\t// We defer getShape and canCull checks until here since most shapes are\n\t\t\t// typically visible and we can skip these calls for them.\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) continue\n\n\t\t\tconst canCull = editor.getShapeUtil(shape.type).canCull(shape)\n\t\t\tif (!canCull) continue\n\n\t\t\tnextValue.add(id)\n\t\t}\n\n\t\tif (isUninitialized(prevValue)) {\n\t\t\treturn nextValue\n\t\t}\n\n\t\t// If there are more or less shapes, we know there's a change\n\t\tif (prevValue.size !== nextValue.size) return nextValue\n\n\t\t// If any of the old shapes are not in the new set, we know there's a change\n\t\tfor (const prev of prevValue) {\n\t\t\tif (!nextValue.has(prev)) {\n\t\t\t\treturn nextValue\n\t\t\t}\n\t\t}\n\n\t\t// If we've made it here, we know that the set is the same\n\t\treturn prevValue\n\t})\n}\n"],
-  "mappings": "AAAA,SAAS,UAAU,uBAAuB;AAUnC,SAAS,iBAAiB,QAAgB;AAChD,SAAO,SAAyB,oBAAoB,SAAS,uBAAuB,WAAW;AAC9F,UAAM,WAAW,OAAO,uBAAuB;AAC/C,UAAM,YAAY,oBAAI,IAAe;AAGrC,UAAM,qBAAqB,OAAO,sBAAsB;AACxD,UAAM,WAAW,mBAAmB;AACpC,UAAM,WAAW,mBAAmB;AACpC,UAAM,WAAW,mBAAmB;AACpC,UAAM,WAAW,mBAAmB;AAEpC,eAAW,MAAM,UAAU;AAC1B,YAAM,aAAa,OAAO,mBAAmB,EAAE;AAK/C,UACC,eAAe,UACf,WAAW,QAAQ,YACnB,WAAW,QAAQ,YACnB,WAAW,QAAQ,YACnB,WAAW,QAAQ,UAClB;AACD;AAAA,MACD;AAKA,YAAM,QAAQ,OAAO,SAAS,EAAE;AAChC,UAAI,CAAC,MAAO;AAEZ,YAAM,UAAU,OAAO,aAAa,MAAM,IAAI,EAAE,QAAQ,KAAK;AAC7D,UAAI,CAAC,QAAS;AAEd,gBAAU,IAAI,EAAE;AAAA,IACjB;AAEA,QAAI,gBAAgB,SAAS,GAAG;AAC/B,aAAO;AAAA,IACR;AAGA,QAAI,UAAU,SAAS,UAAU,KAAM,QAAO;AAG9C,eAAW,QAAQ,WAAW;AAC7B,UAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACzB,eAAO;AAAA,MACR;AAAA,IACD;AAGA,WAAO;AAAA,EACR,CAAC;AACF;",
+  "sourcesContent": ["import { computed, isUninitialized } from '@tldraw/state'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { Editor } from '../Editor'\n\n/**\n * Non visible shapes are shapes outside of the viewport page bounds.\n *\n * @param editor - Instance of the tldraw Editor.\n * @returns Incremental derivation of non visible shapes.\n */\nexport function notVisibleShapes(editor: Editor) {\n\treturn computed<Set<TLShapeId>>('notVisibleShapes', function (prevValue) {\n\t\tconst allShapeIds = editor.getCurrentPageShapeIds()\n\t\tconst viewportPageBounds = editor.getViewportPageBounds()\n\t\tconst visibleIds = editor.getShapeIdsInsideBounds(viewportPageBounds)\n\n\t\tconst nextValue = new Set<TLShapeId>()\n\n\t\t// Non-visible shapes are all shapes minus visible shapes\n\t\tfor (const id of allShapeIds) {\n\t\t\tif (!visibleIds.has(id)) {\n\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\tif (!shape) continue\n\n\t\t\t\tconst canCull = editor.getShapeUtil(shape.type).canCull(shape)\n\t\t\t\tif (!canCull) continue\n\n\t\t\t\tnextValue.add(id)\n\t\t\t}\n\t\t}\n\n\t\tif (isUninitialized(prevValue) || prevValue.size !== nextValue.size) {\n\t\t\treturn nextValue\n\t\t}\n\n\t\tfor (const prev of prevValue) {\n\t\t\tif (!nextValue.has(prev)) return nextValue\n\t\t}\n\n\t\treturn prevValue\n\t})\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,uBAAuB;AAUnC,SAAS,iBAAiB,QAAgB;AAChD,SAAO,SAAyB,oBAAoB,SAAU,WAAW;AACxE,UAAM,cAAc,OAAO,uBAAuB;AAClD,UAAM,qBAAqB,OAAO,sBAAsB;AACxD,UAAM,aAAa,OAAO,wBAAwB,kBAAkB;AAEpE,UAAM,YAAY,oBAAI,IAAe;AAGrC,eAAW,MAAM,aAAa;AAC7B,UAAI,CAAC,WAAW,IAAI,EAAE,GAAG;AACxB,cAAM,QAAQ,OAAO,SAAS,EAAE;AAChC,YAAI,CAAC,MAAO;AAEZ,cAAM,UAAU,OAAO,aAAa,MAAM,IAAI,EAAE,QAAQ,KAAK;AAC7D,YAAI,CAAC,QAAS;AAEd,kBAAU,IAAI,EAAE;AAAA,MACjB;AAAA,IACD;AAEA,QAAI,gBAAgB,SAAS,KAAK,UAAU,SAAS,UAAU,MAAM;AACpE,aAAO;AAAA,IACR;AAEA,eAAW,QAAQ,WAAW;AAC7B,UAAI,CAAC,UAAU,IAAI,IAAI,EAAG,QAAO;AAAA,IAClC;AAEA,WAAO;AAAA,EACR,CAAC;AACF;",
   "names": []
 }

package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs

@@ -4,13 +4,53 @@ class ScribbleManager {
   constructor(editor) {
     this.editor = editor;
   }
-  scribbleItems = /* @__PURE__ */ new Map();
-  state = "paused";
-  addScribble(scribble, id = uniqueId()) {
-    const item = {
+  sessions = /* @__PURE__ */ new Map();
+  // ==================== SESSION API ====================
+  /**
+   * Start a new session for grouping scribbles.
+   * Returns a session ID that can be used with other session methods.
+   *
+   * @param options - Session configuration
+   * @returns Session ID
+   * @public
+   */
+  startSession(options = {}) {
+    const id = options.id ?? uniqueId();
+    const session = {
       id,
+      items: [],
+      state: "active",
+      options: {
+        selfConsume: options.selfConsume ?? true,
+        idleTimeoutMs: options.idleTimeoutMs ?? 0,
+        fadeMode: options.fadeMode ?? "individual",
+        fadeEasing: options.fadeEasing ?? (options.fadeMode === "grouped" ? "ease-in" : "linear"),
+        fadeDurationMs: options.fadeDurationMs ?? this.editor.options.laserFadeoutMs
+      },
+      fadeElapsed: 0,
+      totalPointsAtFadeStart: 0
+    };
+    this.sessions.set(id, session);
+    if (session.options.idleTimeoutMs > 0) {
+      this.resetIdleTimeout(session);
+    }
+    return id;
+  }
+  /**
+   * Add a scribble to a session.
+   *
+   * @param sessionId - The session ID
+   * @param scribble - Partial scribble properties
+   * @param scribbleId - Optional scribble ID
+   * @public
+   */
+  addScribbleToSession(sessionId, scribble, scribbleId = uniqueId()) {
+    const session = this.sessions.get(sessionId);
+    if (!session) throw Error(`Session ${sessionId} not found`);
+    const item = {
+      id: scribbleId,
       scribble: {
-        id,
+        id: scribbleId,
         size: 20,
         color: "accent",
         opacity: 0.8,
@@ -26,43 +66,187 @@ class ScribbleManager {
       prev: null,
       next: null
     };
-    this.scribbleItems.set(id, item);
+    session.items.push(item);
+    if (session.options.idleTimeoutMs > 0) {
+      this.resetIdleTimeout(session);
+    }
     return item;
   }
-  reset() {
-    this.editor.updateInstanceState({ scribbles: [] });
-    this.scribbleItems.clear();
-  }
   /**
-   * Start stopping the scribble. The scribble won't be removed until its last point is cleared.
+   * Add a point to a scribble in a session.
    *
+   * @param sessionId - The session ID
+   * @param scribbleId - The scribble ID
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param z - Z coordinate (pressure)
    * @public
    */
-  stop(id) {
-    const item = this.scribbleItems.get(id);
-    if (!item) throw Error(`Scribble with id ${id} not found`);
-    item.delayRemaining = Math.min(item.delayRemaining, 200);
-    item.scribble.state = "stopping";
+  addPointToSession(sessionId, scribbleId, x, y, z = 0.5) {
+    const session = this.sessions.get(sessionId);
+    if (!session) throw Error(`Session ${sessionId} not found`);
+    const item = session.items.find((i) => i.id === scribbleId);
+    if (!item) throw Error(`Scribble ${scribbleId} not found in session ${sessionId}`);
+    const point = { x, y, z };
+    if (!item.prev || Vec.Dist(item.prev, point) >= 1) {
+      item.next = point;
+    }
+    if (session.options.idleTimeoutMs > 0) {
+      this.resetIdleTimeout(session);
+    }
     return item;
   }
   /**
-   * Set the scribble's next point.
+   * Extend a session, resetting its idle timeout.
    *
-   * @param id - The id of the scribble to add a point to.
-   * @param x - The x coordinate of the point.
-   * @param y - The y coordinate of the point.
-   * @param z - The z coordinate of the point.
+   * @param sessionId - The session ID
+   * @public
+   */
+  extendSession(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (!session) return;
+    if (session.options.idleTimeoutMs > 0) {
+      this.resetIdleTimeout(session);
+    }
+  }
+  /**
+   * Stop a session, triggering fade-out.
+   *
+   * @param sessionId - The session ID
+   * @public
+   */
+  stopSession(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (!session || session.state !== "active") return;
+    this.clearIdleTimeout(session);
+    session.state = "stopping";
+    if (session.options.fadeMode === "grouped") {
+      session.totalPointsAtFadeStart = session.items.reduce(
+        (sum, item) => sum + item.scribble.points.length,
+        0
+      );
+      session.fadeElapsed = 0;
+      for (const item of session.items) {
+        item.scribble.state = "stopping";
+      }
+    } else {
+      for (const item of session.items) {
+        item.delayRemaining = Math.min(item.delayRemaining, 200);
+        item.scribble.state = "stopping";
+      }
+    }
+  }
+  /**
+   * Clear all scribbles in a session immediately.
+   *
+   * @param sessionId - The session ID
+   * @public
+   */
+  clearSession(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (!session) return;
+    this.clearIdleTimeout(session);
+    for (const item of session.items) {
+      item.scribble.points.length = 0;
+    }
+    session.state = "complete";
+  }
+  /**
+   * Check if a session is active.
+   *
+   * @param sessionId - The session ID
+   * @public
+   */
+  isSessionActive(sessionId) {
+    const session = this.sessions.get(sessionId);
+    return session?.state === "active";
+  }
+  // ==================== SIMPLE API (for eraser, select, etc.) ====================
+  /**
+   * Add a scribble using the default self-consuming behavior.
+   * Creates an implicit session for the scribble.
+   *
+   * @param scribble - Partial scribble properties
+   * @param id - Optional scribble id
+   * @returns The created scribble item
+   * @public
+   */
+  addScribble(scribble, id = uniqueId()) {
+    const sessionId = this.startSession();
+    return this.addScribbleToSession(sessionId, scribble, id);
+  }
+  /**
+   * Add a point to a scribble. Searches all sessions.
+   *
+   * @param id - The scribble id
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param z - Z coordinate (pressure)
    * @public
    */
   addPoint(id, x, y, z = 0.5) {
-    const item = this.scribbleItems.get(id);
-    if (!item) throw Error(`Scribble with id ${id} not found`);
-    const { prev } = item;
-    const point = { x, y, z };
-    if (!prev || Vec.Dist(prev, point) >= 1) {
-      item.next = point;
+    for (const session of this.sessions.values()) {
+      const item = session.items.find((i) => i.id === id);
+      if (item) {
+        const point = { x, y, z };
+        if (!item.prev || Vec.Dist(item.prev, point) >= 1) {
+          item.next = point;
+        }
+        if (session.options.idleTimeoutMs > 0) {
+          this.resetIdleTimeout(session);
+        }
+        return item;
+      }
     }
-    return item;
+    throw Error(`Scribble with id ${id} not found`);
+  }
+  /**
+   * Mark a scribble as complete (done being drawn but not yet fading).
+   * Searches all sessions.
+   *
+   * @param id - The scribble id
+   * @public
+   */
+  complete(id) {
+    for (const session of this.sessions.values()) {
+      const item = session.items.find((i) => i.id === id);
+      if (item) {
+        if (item.scribble.state === "starting" || item.scribble.state === "active") {
+          item.scribble.state = "complete";
+        }
+        return item;
+      }
+    }
+    throw Error(`Scribble with id ${id} not found`);
+  }
+  /**
+   * Stop a scribble. Searches all sessions.
+   *
+   * @param id - The scribble id
+   * @public
+   */
+  stop(id) {
+    for (const session of this.sessions.values()) {
+      const item = session.items.find((i) => i.id === id);
+      if (item) {
+        item.delayRemaining = Math.min(item.delayRemaining, 200);
+        item.scribble.state = "stopping";
+        return item;
+      }
+    }
+    throw Error(`Scribble with id ${id} not found`);
+  }
+  /**
+   * Stop and remove all sessions.
+   *
+   * @public
+   */
+  reset() {
+    for (const session of this.sessions.values()) {
+      this.clearIdleTimeout(session);
+    }
+    this.sessions.clear();
+    this.editor.updateInstanceState({ scribbles: [] });
   }
   /**
    * Update on each animation frame.
@@ -71,77 +255,182 @@ class ScribbleManager {
    * @public
    */
   tick(elapsed) {
-    if (this.scribbleItems.size === 0) return;
+    const currentScribbles = this.editor.getInstanceState().scribbles;
+    if (this.sessions.size === 0 && currentScribbles.length === 0) return;
     this.editor.run(() => {
-      this.scribbleItems.forEach((item) => {
-        if (item.scribble.state === "starting") {
-          const { next: next2, prev: prev2 } = item;
-          if (next2 && next2 !== prev2) {
-            item.prev = next2;
-            item.scribble.points.push(next2);
-          }
-          if (item.scribble.points.length > 8) {
-            item.scribble.state = "active";
-          }
-          return;
+      for (const session of this.sessions.values()) {
+        this.tickSession(session, elapsed);
+      }
+      for (const [id, session] of this.sessions) {
+        if (session.state === "complete") {
+          this.clearIdleTimeout(session);
+          this.sessions.delete(id);
         }
-        if (item.delayRemaining > 0) {
-          item.delayRemaining = Math.max(0, item.delayRemaining - elapsed);
+      }
+      const scribbles = [];
+      for (const session of this.sessions.values()) {
+        for (const item of session.items) {
+          if (item.scribble.points.length > 0) {
+            scribbles.push({
+              ...item.scribble,
+              points: [...item.scribble.points]
+            });
+          }
         }
-        item.timeoutMs += elapsed;
-        if (item.timeoutMs >= 16) {
-          item.timeoutMs = 0;
+      }
+      this.editor.updateInstanceState({ scribbles });
+    });
+  }
+  // ==================== PRIVATE HELPERS ====================
+  resetIdleTimeout(session) {
+    this.clearIdleTimeout(session);
+    session.idleTimeoutHandle = this.editor.timers.setTimeout(() => {
+      this.stopSession(session.id);
+    }, session.options.idleTimeoutMs);
+  }
+  clearIdleTimeout(session) {
+    if (session.idleTimeoutHandle !== void 0) {
+      clearTimeout(session.idleTimeoutHandle);
+      session.idleTimeoutHandle = void 0;
+    }
+  }
+  tickSession(session, elapsed) {
+    if (session.state === "complete") return;
+    if (session.state === "stopping" && session.options.fadeMode === "grouped") {
+      this.tickGroupedFade(session, elapsed);
+    } else {
+      this.tickSessionItems(session, elapsed);
+    }
+    const hasContent = session.items.some((item) => item.scribble.points.length > 0);
+    if (!hasContent && (session.state === "stopping" || session.items.length === 0)) {
+      session.state = "complete";
+    }
+  }
+  tickSessionItems(session, elapsed) {
+    for (const item of session.items) {
+      const shouldSelfConsume = session.options.selfConsume || session.state === "stopping" || item.scribble.state === "stopping";
+      if (shouldSelfConsume) {
+        this.tickSelfConsumingItem(item, elapsed);
+      } else {
+        this.tickPersistentItem(item);
+      }
+    }
+    if (session.options.fadeMode === "individual") {
+      for (let i = session.items.length - 1; i >= 0; i--) {
+        if (session.items[i].scribble.points.length === 0) {
+          session.items.splice(i, 1);
         }
-        const { delayRemaining, timeoutMs, prev, next, scribble } = item;
-        switch (scribble.state) {
-          case "active": {
-            if (next && next !== prev) {
-              item.prev = next;
-              scribble.points.push(next);
-              if (delayRemaining === 0) {
-                if (scribble.points.length > 8) {
-                  scribble.points.shift();
-                }
-              }
+      }
+    }
+  }
+  tickPersistentItem(item) {
+    const { scribble } = item;
+    if (scribble.state === "starting") {
+      const { next, prev } = item;
+      if (next && next !== prev) {
+        item.prev = next;
+        scribble.points.push(next);
+      }
+      if (scribble.points.length > 8) {
+        scribble.state = "active";
+      }
+      return;
+    }
+    if (scribble.state === "active") {
+      const { next, prev } = item;
+      if (next && next !== prev) {
+        item.prev = next;
+        scribble.points.push(next);
+      }
+    }
+  }
+  tickSelfConsumingItem(item, elapsed) {
+    const { scribble } = item;
+    if (scribble.state === "starting") {
+      const { next: next2, prev: prev2 } = item;
+      if (next2 && next2 !== prev2) {
+        item.prev = next2;
+        scribble.points.push(next2);
+      }
+      if (scribble.points.length > 8) {
+        scribble.state = "active";
+      }
+      return;
+    }
+    if (item.delayRemaining > 0) {
+      item.delayRemaining = Math.max(0, item.delayRemaining - elapsed);
+    }
+    item.timeoutMs += elapsed;
+    if (item.timeoutMs >= 16) {
+      item.timeoutMs = 0;
+    }
+    const { delayRemaining, timeoutMs, prev, next } = item;
+    switch (scribble.state) {
+      case "active": {
+        if (next && next !== prev) {
+          item.prev = next;
+          scribble.points.push(next);
+          if (delayRemaining === 0 && scribble.points.length > 8) {
+            scribble.points.shift();
+          }
+        } else {
+          if (timeoutMs === 0) {
+            if (scribble.points.length > 1) {
+              scribble.points.shift();
             } else {
-              if (timeoutMs === 0) {
-                if (scribble.points.length > 1) {
-                  scribble.points.shift();
-                } else {
-                  item.delayRemaining = scribble.delay;
-                }
-              }
+              item.delayRemaining = scribble.delay;
             }
-            break;
           }
-          case "stopping": {
-            if (item.delayRemaining === 0) {
-              if (timeoutMs === 0) {
-                if (scribble.points.length === 1) {
-                  this.scribbleItems.delete(item.id);
-                  return;
-                }
-                if (scribble.shrink) {
-                  scribble.size = Math.max(1, scribble.size * (1 - scribble.shrink));
-                }
-                scribble.points.shift();
-              }
-            }
-            break;
+        }
+        break;
+      }
+      case "stopping": {
+        if (delayRemaining === 0 && timeoutMs === 0) {
+          if (scribble.points.length <= 1) {
+            scribble.points.length = 0;
+            return;
           }
-          case "paused": {
-            break;
+          if (scribble.shrink) {
+            scribble.size = Math.max(1, scribble.size * (1 - scribble.shrink));
           }
+          scribble.points.shift();
         }
-      });
-      this.editor.updateInstanceState({
-        scribbles: Array.from(this.scribbleItems.values()).map(({ scribble }) => ({
-          ...scribble,
-          points: [...scribble.points]
-        })).slice(-5)
-        // limit to three as a minor sanity check
-      });
-    });
+        break;
+      }
+      case "paused": {
+        break;
+      }
+    }
+  }
+  tickGroupedFade(session, elapsed) {
+    session.fadeElapsed += elapsed;
+    let remainingPoints = 0;
+    for (const item of session.items) {
+      remainingPoints += item.scribble.points.length;
+    }
+    if (remainingPoints === 0) return;
+    if (session.fadeElapsed >= session.options.fadeDurationMs) {
+      for (const item of session.items) {
+        item.scribble.points.length = 0;
+      }
+      return;
+    }
+    const progress = session.fadeElapsed / session.options.fadeDurationMs;
+    const easedProgress = session.options.fadeEasing === "ease-in" ? progress * progress : progress;
+    const targetRemoved = Math.floor(easedProgress * session.totalPointsAtFadeStart);
+    const actuallyRemoved = session.totalPointsAtFadeStart - remainingPoints;
+    const pointsToRemove = Math.max(1, targetRemoved - actuallyRemoved);
+    let removed = 0;
+    let itemIndex = 0;
+    while (removed < pointsToRemove && itemIndex < session.items.length) {
+      const item = session.items[itemIndex];
+      if (item.scribble.points.length > 0) {
+        item.scribble.points.shift();
+        removed++;
+      } else {
+        itemIndex++;
+      }
+    }
   }
 }
 export {