@pixerate/editor 0.239.0 → 0.241.0

package/dist/paint-editor/index.js

@@ -7,7 +7,7 @@ import {
   resolveExternalAssets,
   serializeLayers,
   serializeLayersExternal
-} from "../chunk-3E36VDMJ.js";
+} from "../chunk-NE6OOKWJ.js";
 import "../chunk-3CI7FRMK.js";
 import "../chunk-ZNA3IQZF.js";
 import {
@@ -55,7 +55,7 @@ import {
   realPresenceClock,
   tweenPresenceCursor
 } from "../chunk-IVSWRVB4.js";
-import "../chunk-7YGBSFC6.js";
+import "../chunk-ILM6GYAX.js";
 import {
   BRUSH_ID,
   BRUSH_ROTATIONS,
@@ -72,6 +72,8 @@ import {
   DEFAULT_STICKER,
   DEFAULT_WET_BRUSH,
   DryStroke,
+  EFFECT_MAP_REPEATS,
+  EFFECT_STRIP_HEIGHT,
   IDENTITY_COPY,
   IMPASTO_TOOLS,
   MULTI_COLOR_MODES,
@@ -92,7 +94,9 @@ import {
   brushToJSON,
   clonePaper,
   drawSticker,
+  effectDabField,
   effectPaintKey,
+  effectPaintSize,
   hexToRgb8,
   isPaintEffectPaint,
   isWetBrush,
@@ -114,6 +118,7 @@ import {
   paperPreset,
   parseBrushLibrary,
   penOrientation,
+  readEffectStrokeMap,
   readPaintEffectPaint,
   renderPaper,
   renderStickers,
@@ -126,7 +131,7 @@ import {
   tiltToOrientation,
   toStrokePoint,
   usesPaintExchange
-} from "../chunk-PJYG6FCF.js";
+} from "../chunk-XBZK47LV.js";
 import "../chunk-M6DNZNVY.js";
 import "../chunk-WEIK3UYB.js";
 import "../chunk-PWBZH3FK.js";
@@ -458,7 +463,7 @@ var PaintDabStroke = class {
     let flow = 1;
     if (this.options.effect) {
       const rgb = [0, 0, 0];
-      flow = sampleEffectAt(this.options.effect, d.x, d.y, rgb);
+      flow = sampleEffectAt(this.options.effect, d.x, d.y, rgb, d);
       ex.setReservoirColor(rgb[0], rgb[1], rgb[2]);
     } else if (this.sampler && !this.gradient) {
       const g = this.sampler.dab(d, this.sample);
@@ -711,6 +716,7 @@ var ThickStrokeDriver = class {
   height = /* @__PURE__ */ new Map();
   material = /* @__PURE__ */ new Map();
   paint = [0, 0, 0];
+  centre = [0, 0, 0];
   tip = new Float32Array(0);
   lastRaw = null;
   lastFed = null;
@@ -837,7 +843,11 @@ var ThickStrokeDriver = class {
     }
     const ex = st.exchange;
     let flow = 1;
-    if (this.sampler) {
+    const effect = this.init.effect;
+    if (effect) {
+      sampleEffectAt(effect, d.x, d.y, this.centre, d);
+      ex.setReservoirColor(this.centre[0], this.centre[1], this.centre[2]);
+    } else if (this.sampler) {
       const g = this.sampler.dab(d, this.sample);
       ex.setReservoirColor(g.rgb[0], g.rgb[1], g.rgb[2]);
       flow = g.alpha;
@@ -849,7 +859,12 @@ var ThickStrokeDriver = class {
     if (dep > 0) {
       const cov = new Float32Array(n);
       for (let p = 0; p < n; p++) cov[p] = tip[p] > 0 ? Math.min(1, tip[p] * (im.tool === "roller" || im.tool === "gloop" || im.tool === "tube" ? 1.6 : 1.1)) : 0;
-      this.medium.deposit(rect, cov, dep, this.paint, ex.paintPigment);
+      let field = null;
+      if (effect) {
+        field = new Float32Array(n * 3);
+        effectDabField(effect, rect, cov, this.centre, this.paint, field, 0, d);
+      }
+      this.medium.deposit(rect, cov, dep, this.paint, ex.paintPigment, field);
     }
     const seed = this.init.seed;
     for (let yy = 0, p = 0; yy < rect.height; yy++) {
@@ -996,7 +1011,6 @@ var PaintStrokeSession = class {
     const brush = init.brush;
     if (init.wet) this.wetDriver = init.wet.driver;
     const effect = init.effect?.pixels ?? null;
-    if (effect && (init.wet || init.thick || init.sticker)) throw new Error(`The ${brush.name} brush (${brush.engine} engine) cannot paint with effect paint.`);
     this.apply = {
       mode: brush.engine === "eraser" ? "erase" : "paint",
       color: init.color,
@@ -1009,10 +1023,10 @@ var PaintStrokeSession = class {
     };
     if (this.wetDriver) {
     } else if (init.sticker) {
-      this.stickerSpray = new StickerSpray({ brush, target: this.tileTarget(), color: init.colorHex, seed: init.seed, copies: this.copies, nextId: init.sticker.nextId, paint: init.paint ?? null });
+      this.stickerSpray = new StickerSpray({ brush, target: this.tileTarget(), color: init.colorHex, seed: init.seed, copies: this.copies, nextId: init.sticker.nextId, paint: init.paint ?? null, effect });
     } else if (init.thick) {
       const rgb = (c) => [c[0] / 255, c[1] / 255, c[2] / 255];
-      this.thickDriver = new ThickStrokeDriver({ brush, target: this.tileTarget(), channels: init.thick.channels, color: rgb(init.color), load: init.mixerLoad, seed: init.seed, copies: this.copies, paint: init.paint ?? null });
+      this.thickDriver = new ThickStrokeDriver({ brush, target: this.tileTarget(), channels: init.thick.channels, color: rgb(init.color), load: init.mixerLoad, seed: init.seed, copies: this.copies, paint: init.paint ?? null, effect });
     } else if (brush.engine === "mixer" || brush.engine === "blender" || brush.engine === "smudge" || usesPaintExchange(brush, Boolean(init.paint))) {
       const rgb = (c) => [c[0] / 255, c[1] / 255, c[2] / 255];
       this.wet = new PaintDabStroke(brush, {
@@ -1519,7 +1533,8 @@ function variationAffine(v, origin) {
   return composeAffine(back, composeAffine(linear, toOrigin));
 }
 function varyStroke(stroke, m, v) {
-  const s = Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2]));
+  const det = Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2]));
+  const s = Math.abs(det - 1) < 1e-9 ? 1 : det;
   const ps = v.pressureScale ?? 1;
   const points = stroke.points.map((p) => {
     const q = mapPenPoint(m, p);
@@ -1529,6 +1544,7 @@ function varyStroke(stroke, m, v) {
   const brush = s !== 1 ? normalizePaintBrush({ ...stroke.brush, tip: { ...stroke.brush.tip, size: stroke.brush.tip.size * s } }) : stroke.brush;
   const out = { ...stroke, brush, points };
   if (stroke.paint?.type === "gradient" && s !== 1) out.paint = scalePaintGradient(stroke.paint, s);
+  if (stroke.paint?.type === "effect" && stroke.paint.map && s !== 1) out.paint = { ...stroke.paint, map: { ...stroke.paint.map, length: Math.min(4096, Math.max(16, Math.round(stroke.paint.map.length * s))) } };
   if (stroke.copies?.length) {
     const inv = invertAffine(m);
     out.copies = stroke.copies.map((c) => composeAffine(m, composeAffine(c, inv)));
@@ -1940,6 +1956,7 @@ var WetStrokeDriver = class {
   tip = new Float32Array(0);
   cov = new Float32Array(0);
   paint = [0, 0, 0];
+  centre = [0, 0, 0];
   depth;
   sampler;
   sample = { rgb: [0, 0, 0], alpha: 1 };
@@ -2040,14 +2057,23 @@ var WetStrokeDriver = class {
       case "paint": {
         const ex = st.exchange;
         let flow = 1;
-        if (this.sampler) {
+        const effect = this.init.effect;
+        if (effect) {
+          sampleEffectAt(effect, d.x, d.y, this.centre, d);
+          ex.setReservoirColor(this.centre[0], this.centre[1], this.centre[2]);
+        } else if (this.sampler) {
           const g = this.sampler.dab(d, this.sample);
           ex.setReservoirColor(g.rgb[0], g.rgb[1], g.rgb[2]);
           flow = g.alpha;
         }
         ex.pickUp(this.medium.sample(rect, tip));
         const total = ex.paint(this.paint);
-        if (total > 0 && flow > 0) this.medium.deposit(rect, cov, Math.min(1, total) * k * flow, this.paint, null);
+        if (total > 0 && flow > 0 && effect) {
+          const ec = cov.slice();
+          const field = new Float32Array(ec.length * 3);
+          effectDabField(effect, rect, ec, this.centre, this.paint, field, COVERAGE_STEPS, d);
+          this.medium.deposit(rect, ec, Math.min(1, total) * k, this.paint, null, field);
+        } else if (total > 0 && flow > 0) this.medium.deposit(rect, cov, Math.min(1, total) * k * flow, this.paint, null);
         else world.paint(laneId, rect, cov, this.medium.options.water * k, null);
         ex.drain();
         if (wet.rewet > 0) world.rewet(laneId, rect, cov, wet.rewet * k * 0.15, this.init.paperColor);
@@ -3085,6 +3111,43 @@ var MixingPad = class {
   }
 };
 
+// src/paint-editor/live-strokes.ts
+var LIVE_STROKE_ENGINES = ["dab", "particle", "bristle", "mixer"];
+function liveStrokeRefusal(brush) {
+  switch (brush.engine) {
+    case "wet":
+      return `The ${brush.name} brush paints wet media, which a stroke layer can't redraw (the paint depends on the simulation's history); paint it on a pixel layer (add_layer).`;
+    case "impasto":
+      return `The ${brush.name} brush paints thick paint with relief, which a stroke layer doesn't keep; paint it on a pixel layer (add_layer).`;
+    case "sticker":
+      return `The ${brush.name} brush sprays stickers, which are their own objects; spray them on an empty pixel layer (add_layer).`;
+    case "eraser":
+      return `Erasers don't paint on a stroke layer; delete strokes instead (remove_strokes), or rasterize the layer first (rasterize_stroke_layer).`;
+    case "blender":
+    case "smudge":
+      return `The ${brush.name} brush moves the paint under it, so it can't be redrawn on its own; rasterize the layer first (rasterize_stroke_layer) or blend on a pixel layer.`;
+  }
+  if (brush.behavior.pickup > 0) return `The ${brush.name} brush picks up the paint under it (pickup ${brush.behavior.pickup}), so it can't be redrawn on its own; set behavior.pickup to 0 (set_brush) or paint on a pixel layer.`;
+  return null;
+}
+function liveStrokeBounds(stroke) {
+  let x0 = Infinity;
+  let y0 = Infinity;
+  let x1 = -Infinity;
+  let y1 = -Infinity;
+  for (const m of [null, ...stroke.copies ?? []]) {
+    for (const p of stroke.points) {
+      const q = m ? applyAffine(m, p.x, p.y) : p;
+      if (q.x < x0) x0 = q.x;
+      if (q.y < y0) y0 = q.y;
+      if (q.x > x1) x1 = q.x;
+      if (q.y > y1) y1 = q.y;
+    }
+  }
+  const pad = stroke.brush.tip.size * (stroke.brush.engine === "particle" ? 2 : 1) + 2;
+  return { x: Math.floor(x0 - pad), y: Math.floor(y0 - pad), width: Math.ceil(x1 - x0 + 2 * pad), height: Math.ceil(y1 - y0 + 2 * pad) };
+}
+
 // src/paint-editor/replay.ts
 function replayItems(doc) {
   const items = [];
@@ -3126,7 +3189,15 @@ async function replayPainting(source, target, options = {}) {
       if (!target.getLayer(e.layerId)) continue;
       if (e.kind === "fill") target.fillLayer({ layerId: e.layerId, ...e.data });
       else if (e.kind === "clear") target.clearLayer(e.layerId);
-      else if (e.kind === "stickers") {
+      else if (e.kind === "live-strokes") {
+        const d = e.data;
+        if (d?.rasterized) target.replaceLiveStrokes(e.layerId, null);
+        else {
+          const list = (d?.strokes ?? []).map((st2) => s === 1 ? st2 : { ...varyStroke(st2, scaleM, { scale: s }), ...st2.stencils ? { stencils: st2.stencils.map((x) => scaleStencil(x, s)) } : {} });
+          await target.prepareEffectPaints(list.flatMap((st2) => st2.paint?.type === "effect" ? [st2.paint] : []));
+          target.replaceLiveStrokes(e.layerId, list);
+        }
+      } else if (e.kind === "stickers") {
         const list = (e.data?.stickers ?? []).map((x) => s === 1 ? x : { ...x, x: x.x * s, y: x.y * s, size: x.size * s });
         target.replaceStickers(e.layerId, list);
       } else target.flattenRelief(e.layerId);
@@ -3450,6 +3521,7 @@ var PaintEditorController = class _PaintEditorController {
   mixerLoad = EMPTY_MIXER_LOAD;
   view = { ...DEFAULT_VIEW, pan: { ...DEFAULT_VIEW.pan } };
   hand;
+  selectedStroke = null;
   selectedSticker = null;
   /** A sticker drag in progress (`previewSticker`): the document before it, so the drop undoes in one step, and the one it showed last. */
   stickerPreview = null;
@@ -3463,6 +3535,17 @@ var PaintEditorController = class _PaintEditorController {
   dirty = "all";
   seedCounter = 1;
   strokeCounter = 1;
+  /** Live effect paint: playing and the frame rate cap (editor state), and the time the view shows. */
+  effectPlaybackState = { playing: true, fps: 30 };
+  effectTime = 0;
+  /** While a frame is drawn: the time live effect strokes are drawn at (else their own time). */
+  liveEffectAt = null;
+  /** The view's stroke layers at `effectTime`, each with the document surface it was drawn from (stale once that changes). */
+  animatedLayers = /* @__PURE__ */ new Map();
+  /** `renderAnimationFrame` / `withEffectTime`: layer surfaces at another time, for one render. */
+  frameOverride = null;
+  /** The area each stroke painted (document pixels; `null`: nothing), learnt as it is painted or drawn, so a stroke layer edit redraws only where it changes (see `drawLiveStrokes`). */
+  paintedBounds = /* @__PURE__ */ new WeakMap();
   guides;
   swatches = DEFAULT_SWATCHES.map((s) => ({ ...s }));
   pad = new MixingPad();
@@ -3549,6 +3632,8 @@ var PaintEditorController = class _PaintEditorController {
       mixerLoad: this.mixerLoad,
       view: this.view,
       hand: this.hand,
+      effectPlayback: { ...this.effectPlaybackState, time: this.effectTime },
+      selectedStroke: this.selectedStroke,
       selectedSticker: this.selectedSticker,
       canUndo: this.undoStack.length > 0 && !this.session,
       canRedo: this.redoStack.length > 0 && !this.session,
@@ -3897,6 +3982,7 @@ var PaintEditorController = class _PaintEditorController {
       locks: { ...l.locks ?? {} },
       active: l.id === this.doc.activeLayerId,
       bounds,
+      ...this.doc.liveStrokes?.[l.id] ? { liveStrokes: this.doc.liveStrokes[l.id].length } : {},
       parentId,
       depth
     };
@@ -3923,11 +4009,12 @@ var PaintEditorController = class _PaintEditorController {
     this.emit();
   }
   /** Adds an empty pixel layer or group above `aboveId` (default: the active layer) and makes it active. */
+  /** Adds a layer above the active one: `pixel` (default), `group`, or `strokes`, a live stroke layer whose strokes stay editable. */
   addLayer(options = {}) {
     this.requireIdle("adding a layer");
     const count = flattenLayers(this.doc.layers).length;
     const type = options.type ?? "pixel";
-    const name = options.name?.trim() || (type === "group" ? `Group ${count + 1}` : `Layer ${count + 1}`);
+    const name = options.name?.trim() || (type === "group" ? `Group ${count + 1}` : type === "strokes" ? `Strokes ${count + 1}` : `Layer ${count + 1}`);
     const layer = type === "group" ? { type: "group", id: newPaintLayerId(), name, visible: true, opacity: 1, blend: "pass-through", children: [] } : createPaintLayer(name);
     let parentId = null;
     let index;
@@ -3943,7 +4030,8 @@ var PaintEditorController = class _PaintEditorController {
       index = loc.index + 1;
     }
     const layers = insertLayer(this.doc.layers, layer, parentId, index);
-    this.commit(type === "group" ? "Add group" : "Add layer", { ...this.doc, layers, activeLayerId: layer.id });
+    const live = type === "strokes" ? { liveStrokes: { ...this.doc.liveStrokes ?? {}, [layer.id]: [] } } : {};
+    this.commit(type === "group" ? "Add group" : type === "strokes" ? "Add stroke layer" : "Add layer", { ...this.doc, layers, activeLayerId: layer.id, ...live });
     return this.describeLayer(layer);
   }
   updateLayer(id, update) {
@@ -3980,7 +4068,7 @@ var PaintEditorController = class _PaintEditorController {
     const layers = mapLayer(this.doc.layers, id, () => null);
     let active = this.doc.activeLayerId;
     if (active && !findLayer(layers, active)) active = flattenLayers(layers).filter((x) => x.type === "pixel").pop()?.id ?? null;
-    this.commit("Remove layer", { ...this.doc, layers, activeLayerId: active, ...this.thickWithout(flattenLayers([l]).map((x) => x.id)), ...this.stickersWithout(flattenLayers([l]).map((x) => x.id)) });
+    this.commit("Remove layer", { ...this.doc, layers, activeLayerId: active, ...this.thickWithout(flattenLayers([l]).map((x) => x.id)), ...this.stickersWithout(flattenLayers([l]).map((x) => x.id)), ...this.liveStrokesWithout(flattenLayers([l]).map((x) => x.id)) });
     return { removed: id, activeLayerId: active };
   }
   duplicateLayer(id) {
@@ -3993,15 +4081,17 @@ var PaintEditorController = class _PaintEditorController {
     if (!loc) throw new PaintEditorError(`Unknown layer "${id}". Call list_layers for the ids.`);
     const thick = { ...this.doc.thick ?? {} };
     const stickers = { ...this.doc.stickers ?? {} };
+    const liveStrokes = { ...this.doc.liveStrokes ?? {} };
     const copy = (l) => {
       const id2 = newPaintLayerId();
       if (thick[l.id]) thick[id2] = thick[l.id];
       if (stickers[l.id]) stickers[id2] = stickers[l.id].map((x) => ({ ...x }));
+      if (liveStrokes[l.id]) liveStrokes[id2] = liveStrokes[l.id].map((x) => ({ ...x, id: `s${this.strokeCounter++}`, layerId: id2 }));
       return l.type === "group" ? { ...l, id: id2, children: l.children.map(copy) } : { ...l, id: id2 };
     };
     const dup = { ...copy(loc.layer), name: `${loc.layer.name} copy` };
     const layers = insertLayer(this.doc.layers, dup, loc.parent?.id ?? null, loc.index + 1);
-    this.commit("Duplicate layer", this.withWetEvents({ ...this.doc, layers, activeLayerId: dup.id, ...this.doc.thick ? { thick } : {}, ...this.doc.stickers ? { stickers } : {} }));
+    this.commit("Duplicate layer", this.withWetEvents({ ...this.doc, layers, activeLayerId: dup.id, ...this.doc.thick ? { thick } : {}, ...this.doc.stickers ? { stickers } : {}, ...this.doc.liveStrokes ? { liveStrokes } : {} }));
     return this.describeLayer(dup);
   }
   /** Moves a layer to `index` (0 = bottom) within `parentId` (default its own parent; `null` = top level). */
@@ -4047,7 +4137,7 @@ var PaintEditorController = class _PaintEditorController {
     }
     const merged = { ...below, surface, offset: { x: 0, y: 0 } };
     const layers = mapLayer(mapLayer(this.doc.layers, upper.id, () => null), below.id, () => merged);
-    this.commit("Merge down", this.withWetEvents({ ...this.doc, layers, activeLayerId: below.id, ...this.thickWithout([upper.id]), ...this.stickersWithout([upper.id, below.id]) }));
+    this.commit("Merge down", this.withWetEvents({ ...this.doc, layers, activeLayerId: below.id, ...this.thickWithout([upper.id]), ...this.stickersWithout([upper.id, below.id]), ...this.liveStrokesWithout([upper.id, below.id]) }));
     return this.describeLayer(merged);
   }
   /** Removes every pixel of a layer. */
@@ -4059,7 +4149,7 @@ var PaintEditorController = class _PaintEditorController {
       this.wet.world.removeLane(l.id);
     }
     const bounds = this.describeLayer(l).bounds;
-    this.commit("Clear layer", this.withPaintEvent({ ...this.doc, layers: mapLayer(this.doc.layers, l.id, () => ({ ...l, surface: emptySurface(4) })), ...this.thickWithout([l.id]), ...this.stickersWithout([l.id]) }, { kind: "clear", layerId: l.id }));
+    this.commit("Clear layer", this.withPaintEvent({ ...this.doc, layers: mapLayer(this.doc.layers, l.id, () => ({ ...l, surface: emptySurface(4) })), ...this.thickWithout([l.id]), ...this.stickersWithout([l.id]), ...this.doc.liveStrokes?.[l.id] ? { liveStrokes: { ...this.doc.liveStrokes, [l.id]: [] } } : {} }, { kind: "clear", layerId: l.id }));
     return { layerId: l.id, bounds };
   }
   /**
@@ -4070,6 +4160,7 @@ var PaintEditorController = class _PaintEditorController {
     this.requireIdle("filling");
     const fillTarget = this.paintTarget(options.layerId, "fill");
     if (this.doc.stickers?.[fillTarget.id]?.length) throw new PaintEditorError(`Layer "${fillTarget.name}" is a sticker layer; fill another layer (add_layer).`);
+    if (this.doc.liveStrokes?.[fillTarget.id]) throw new PaintEditorError(`Layer "${fillTarget.name}" is a stroke layer (its pixels are drawn from its strokes); fill another layer (add_layer), or rasterize it first (rasterize_stroke_layer).`);
     this.dryLayersFirst([options.layerId ?? this.doc.activeLayerId ?? ""]);
     const l = this.paintTarget(options.layerId, "fill");
     const color = options.color === void 0 ? this.color : parseColor(options.color);
@@ -4181,6 +4272,7 @@ var PaintEditorController = class _PaintEditorController {
   effectTarget(layerId, what) {
     const l = this.paintTarget(layerId, what);
     if (this.doc.stickers?.[l.id]?.length) throw new PaintEditorError(`Layer "${l.name}" is a sticker layer; ${what} another layer (add_layer).`);
+    if (this.doc.liveStrokes?.[l.id]) throw new PaintEditorError(`Layer "${l.name}" is a stroke layer (its pixels are drawn from its strokes); ${what} another layer (add_layer), or rasterize it first (rasterize_stroke_layer).`);
     if (this.wet.wetLayerIds().includes(l.id)) throw new PaintEditorError(`Layer "${l.name}" holds wet paint; effects go on dried paint, so dry it first (dry_paint) and try again.`);
     return l;
   }
@@ -4344,16 +4436,25 @@ var PaintEditorController = class _PaintEditorController {
    * size, and brushes then take each pixel's colour (and alpha) from it, fixed to the canvas, as if
    * painting a hidden picture into view. `setColor` and `setPaint` go back to colour. Editor state,
    * not an undo step. Strokes that would paint with it throw while it renders. Returns the paint.
+   * With `map: { by: 'stroke' }` the effect lies along each stroke instead of the canvas; with
+   * `live`, strokes on a stroke layer keep playing it (see `setEffectPlayback`).
    */
   async setEffectPaint(source) {
     if (!source || typeof source.effect !== "string" || !source.effect) throw new PaintEditorError("effect is missing; pass an effect id from search_effects (use generator, overlay or title).");
     this.checkTime(source.time);
+    let map;
+    try {
+      map = readEffectStrokeMap(source.map);
+    } catch (e) {
+      throw new PaintEditorError(e.message);
+    }
+    if (source.live !== void 0 && typeof source.live !== "boolean") throw new PaintEditorError("live must be true or false.");
     const epoch = ++this.paintEpoch;
     const changed = (name) => new PaintEditorError(`The paint changed while "${name}" rendered (set_color, set_paint or another set_effect_paint); call set_effect_paint again to paint with it.`);
     const d = await this.describeEffect(source.effect, "paint");
     const values = this.effectValues(d, { ...d.defaults }, source.values);
     if (epoch !== this.paintEpoch) throw changed(d.name);
-    const paint = { type: "effect", effect: d.id, provider: this.effects.require().id, values, time: source.time ?? 0 };
+    const paint = { type: "effect", effect: d.id, provider: this.effects.require().id, values, time: source.time ?? 0, ...map ? { map } : {}, ...source.live ? { live: true } : {} };
     this.effectPaintPending = paint;
     this.emit([]);
     try {
@@ -4376,7 +4477,8 @@ var PaintEditorController = class _PaintEditorController {
   effectPaintImage(p) {
     const key = effectPaintKey(p);
     const img = this.effectPaintPixels.get(key);
-    if (!img || img.width !== this.doc.canvas.width || img.height !== this.doc.canvas.height) return null;
+    const size = effectPaintSize(p, this.doc.canvas);
+    if (!img || img.width !== size.width || img.height !== size.height) return null;
     this.effectPaintPixels.delete(key);
     this.effectPaintPixels.set(key, img);
     return img;
@@ -4389,14 +4491,14 @@ var PaintEditorController = class _PaintEditorController {
     const what = `the effect "${p.effect}"${p.provider ? ` from provider "${p.provider}"` : ""}`;
     if (!provider) throw new PaintEditorError(`Effect paint needs ${what}, but no effects provider is registered; register it (setEffectsProvider) and try again.`);
     if (p.provider && provider.id !== p.provider) throw new PaintEditorError(`Effect paint needs ${what}, but the registered provider is "${provider.id}"; register "${p.provider}" (setEffectsProvider) and try again.`);
-    const { width, height } = this.doc.canvas;
+    const { width, height } = effectPaintSize(p, this.doc.canvas);
     let pixels;
     try {
       pixels = await this.effectsRenderer.render(provider, p.effect, { width, height }, { time: p.time, values: p.values });
     } catch (e) {
       throw new PaintEditorError(`Effect paint could not render ${what}: ${e instanceof Error ? e.message : String(e)}`);
     }
-    const img = { width, height, data: new Uint8ClampedArray(pixels.data) };
+    const img = { width, height, data: new Uint8ClampedArray(pixels.data), ...p.map ? { map: p.map } : {} };
     this.effectPaintPixels.set(effectPaintKey(p), img);
     while (this.effectPaintPixels.size > _PaintEditorController.EFFECT_PAINT_CACHE) this.effectPaintPixels.delete(this.effectPaintPixels.keys().next().value);
     return img;
@@ -4457,11 +4559,6 @@ var PaintEditorController = class _PaintEditorController {
       source = this.effectPaint;
     }
     if (!source) return null;
-    if (brush.engine === "wet" || brush.engine === "impasto" || brush.engine === "sticker") {
-      throw new PaintEditorError(
-        `The ${brush.name} brush (${brush.engine} engine) cannot paint with effect paint: it carries one colour as ${brush.engine === "sticker" ? "stickers" : brush.engine === "wet" ? "wet pigment" : "thick paint"}. Paint with a dry brush (a dab, particle, bristle or mixer brush), or paint the shape first and fill it with fill_layer_with_effect {lockTransparency: true}.`
-      );
-    }
     const pixels = this.effectPaintImage(source);
     if (!pixels) throw new PaintEditorError(`The effect paint "${source.effect}"${source.provider ? ` from provider "${source.provider}"` : ""} is not rendered at this canvas size; call set_effect_paint (or prepareEffectPaints) first.`);
     return { source, pixels };
@@ -4754,6 +4851,17 @@ var PaintEditorController = class _PaintEditorController {
     })();
     const brush = this.strokeBrush(init);
     const effect = this.strokeEffect(init, brush);
+    if (doc.liveStrokes?.[layer.id]) {
+      const why = liveStrokeRefusal(brush);
+      if (why) throw new PaintEditorError(`Layer "${layer.name}" is a stroke layer. ${why}`);
+    }
+    if (doc.liveStrokes?.[layer.id] && effect?.source.live) {
+      const key = effectPaintKey(effect.source);
+      const { sources } = this.liveEffects(doc);
+      if (!sources.some((p) => effectPaintKey(p) === key) && sources.length >= MAX_LIVE_EFFECT_SOURCES) {
+        throw new PaintEditorError(`The painting already plays ${MAX_LIVE_EFFECT_SOURCES} live effects, the most it can; paint with one of them, or set_effect_paint with live false to bake this one.`);
+      }
+    }
     const stickerLayer = Boolean(doc.stickers?.[layer.id]?.length);
     if (brush.engine === "sticker") {
       if (!stickerLayer && contentBounds(layer.surface)) throw new PaintEditorError(`Layer "${layer.name}" already has paint; spray stickers onto an empty layer (add_layer) so they stay editable.`);
@@ -4793,7 +4901,8 @@ var PaintEditorController = class _PaintEditorController {
         seed: seedW,
         copies: [IDENTITY_AFFINE, ...copiesW].map(affineCopy),
         mask: init.maskStencils ? this.stencilSelection(init.maskStencils) : init.stencils !== false ? this.stencilSelection() : null,
-        paint: wetGradient
+        paint: effect ? null : wetGradient,
+        effect: effect?.pixels ?? null
       });
       init = { ...init, seed: seedW, load };
       wet = { driver, surface: () => world.display(id).surface };
@@ -4908,6 +5017,7 @@ var PaintEditorController = class _PaintEditorController {
         }
         const stroke = this.record(s);
         s.result.strokeId = stroke.id;
+        this.paintedBounds.set(stroke, s.result?.bounds ?? null);
         if (wetStroke && this.wet.instantDry) {
           this.wet.dry(s.layerId);
           this.logWet({ kind: "dry", layerId: s.layerId, at: this.doc.strokes.length + 1 });
@@ -4919,7 +5029,7 @@ var PaintEditorController = class _PaintEditorController {
         const thick = ch ? { ...this.doc.thick ?? {}, [l.id]: ch } : this.doc.thick;
         const sprayed = s.stickers();
         const stickers = sprayed ? { ...this.doc.stickers ?? {}, [l.id]: [...this.doc.stickers?.[l.id] ?? [], ...sprayed] } : this.doc.stickers;
-        this.commit(`${brush.name} stroke`, this.withWetEvents({ ...this.doc, layers: mapLayer(this.doc.layers, l.id, () => ({ ...l, surface })), strokes: [...this.doc.strokes, stroke], ...thick ? { thick } : {}, ...stickers ? { stickers } : {} }), wetStroke ? before : this.doc);
+        this.commit(`${brush.name} stroke`, this.withWetEvents(withLiveStroke({ ...this.doc, layers: mapLayer(this.doc.layers, l.id, () => ({ ...l, surface })), strokes: [...this.doc.strokes, stroke], ...thick ? { thick } : {}, ...stickers ? { stickers } : {} }, stroke)), wetStroke ? before : this.doc);
       }
     };
     let session;
@@ -4947,17 +5057,18 @@ var PaintEditorController = class _PaintEditorController {
         if (cancelled || !surface) return;
         const stroke = this.record(s);
         s.result.strokeId = stroke.id;
+        this.paintedBounds.set(stroke, s.result?.bounds ?? null);
         const l = findLayer(out.layers, s.layerId).layer;
         const offset = s.init.wet ? { x: 0, y: 0 } : l.offset;
         const ch = s.thickChannels();
         const sprayed = s.stickers();
-        out = {
+        out = withLiveStroke({
           ...out,
           layers: mapLayer(out.layers, l.id, () => ({ ...l, surface, offset })),
           strokes: [...out.strokes, stroke],
           ...ch ? { thick: { ...out.thick ?? {}, [l.id]: ch } } : {},
           ...sprayed ? { stickers: { ...out.stickers ?? {}, [l.id]: [...out.stickers?.[l.id] ?? [], ...sprayed] } } : {}
-        };
+        }, stroke);
       }
     };
     const session = this.sessionFor(doc, init, host);
@@ -5355,8 +5466,10 @@ var PaintEditorController = class _PaintEditorController {
   }
   /** The layers with the live stroke's surface in place. */
   currentLayers() {
+    const override = this.frameOverride;
+    if (override) return Array.from(override).reduce((ls, [id, surface]) => mapLayer(ls, id, (l) => ({ ...l, surface })), this.doc.layers);
     const live = this.live;
-    if (!live) return this.doc.layers;
+    if (!live) return this.animatedView();
     if (this.liveLayers?.key === live.surface) return this.liveLayers.layers;
     const layers = mapLayer(this.doc.layers, live.layerId, (l) => ({ ...l, surface: live.surface }));
     this.liveLayers = { key: live.surface, layers };
@@ -5501,6 +5614,10 @@ var PaintEditorController = class _PaintEditorController {
     for (const [id, list] of Object.entries(this.doc.stickers ?? {})) if (list.length && findLayer(this.doc.layers, id)) stickers[id] = list.map((x) => ({ ...x }));
     if (Object.keys(stickers).length) ext.stickers = stickers;
     else delete ext.stickers;
+    const liveStrokes = {};
+    for (const [id, list] of Object.entries(this.doc.liveStrokes ?? {})) if (findLayer(this.doc.layers, id)) liveStrokes[id] = list.map((x) => JSON.parse(JSON.stringify(x)));
+    if (Object.keys(liveStrokes).length) ext.liveStrokes = liveStrokes;
+    else delete ext.liveStrokes;
     const effectLayers = effectLayersToJSON(this.doc.effectLayers ?? {}, (id) => isPixelLayer(findLayer(this.doc.layers, id)?.layer));
     if (effectLayers) ext.effectLayers = effectLayers;
     else delete ext.effectLayers;
@@ -5524,6 +5641,16 @@ var PaintEditorController = class _PaintEditorController {
       }
       if (Object.keys(stickers).length) state = { ...state, stickers };
     }
+    if (ext.liveStrokes && typeof ext.liveStrokes === "object") {
+      const liveStrokes = {};
+      for (const [id, list] of Object.entries(ext.liveStrokes)) {
+        if (!isPixelLayer(findLayer(state.layers, id)?.layer) || !Array.isArray(list)) continue;
+        const ok = list.map(normalizeBrushStroke).filter((x) => x !== null).map((x) => ({ ...x, layerId: id }));
+        if (ok.length !== list.length) problems.push(`Some strokes of stroke layer "${id}" could not be read; they were dropped (the layer's pixels are kept until a stroke is edited).`);
+        liveStrokes[id] = ok;
+      }
+      if (Object.keys(liveStrokes).length) state = { ...state, liveStrokes };
+    }
     if (ext.effectLayers && typeof ext.effectLayers === "object") {
       const effectLayers = {};
       for (const [id, v] of Object.entries(ext.effectLayers)) {
@@ -5574,10 +5701,17 @@ var PaintEditorController = class _PaintEditorController {
     this.undoStack = [];
     this.redoStack = [];
     this.doc = this.readThick(loaded.state, loaded.extensions, loaded.problems);
+    for (const list of Object.values(this.doc.liveStrokes ?? {})) {
+      for (const s of list) {
+        const n = Number(/^s(\d+)$/.exec(s.id)?.[1] ?? 0);
+        if (n >= this.strokeCounter) this.strokeCounter = n + 1;
+      }
+    }
     this.docRevision++;
     delete this.extensions.layerChannels;
     delete this.extensions.lighting;
     delete this.extensions.stickers;
+    delete this.extensions.liveStrokes;
     delete this.extensions.effectLayers;
     delete this.extensions.paperEffect;
     this.viewCompositor.clear();
@@ -6042,6 +6176,420 @@ var PaintEditorController = class _PaintEditorController {
     const l = this.wetLayer(layerId, "set the stickers of");
     this.commitStickers("Stickers", l, stickers.map((s) => ({ ...s })));
   }
+  // --- Live stroke layers ---------------------------------------------------------
+  /** The document's `liveStrokes` without these layers (as a spread: `{}` when unchanged). */
+  liveStrokesWithout(ids) {
+    const t = this.doc.liveStrokes;
+    if (!t || !ids.some((id) => t[id])) return {};
+    const out = { ...t };
+    for (const id of ids) delete out[id];
+    return { liveStrokes: out };
+  }
+  liveStrokeLayer(layerId, what) {
+    const l = this.wetLayer(layerId, what);
+    const strokes = this.doc.liveStrokes?.[l.id];
+    if (!strokes) throw new PaintEditorError(`Layer "${l.name}" is not a stroke layer; add one with add_layer {type: "strokes"} (or convert_to_stroke_layer on an empty layer), then paint on it.`);
+    return { layer: l, strokes };
+  }
+  /** Whether a layer is a live stroke layer. */
+  isLiveStrokeLayer(layerId) {
+    return Boolean(this.doc.liveStrokes?.[layerId]);
+  }
+  /** Makes an empty pixel layer a live stroke layer (one undo step). */
+  convertToLiveStrokes(layerId) {
+    this.requireIdle("converting a layer");
+    const l = this.paintTarget(layerId, "convert");
+    if (this.doc.liveStrokes?.[l.id]) return this.describeLayer(l);
+    if (this.doc.stickers?.[l.id]?.length) throw new PaintEditorError(`Layer "${l.name}" is a sticker layer; add a stroke layer instead (add_layer {type: "strokes"}).`);
+    if (contentBounds(l.surface) || this.wet.wetLayerIds().includes(l.id)) throw new PaintEditorError(`Layer "${l.name}" already has paint, which isn't kept as strokes; convert an empty layer or add a stroke layer (add_layer {type: "strokes"}).`);
+    this.commit("Convert to stroke layer", { ...this.doc, liveStrokes: { ...this.doc.liveStrokes ?? {}, [l.id]: [] } });
+    return this.describeLayer(this.getLayer(l.id));
+  }
+  /** A stroke layer's strokes, bottom first. */
+  listLiveStrokes(layerId) {
+    return this.liveStrokeLayer(layerId, "list the strokes of").strokes.map((x) => ({ ...x }));
+  }
+  /** The stroke layer holding a live stroke, and where. */
+  findLiveStroke(id) {
+    for (const [layerId, strokes] of Object.entries(this.doc.liveStrokes ?? {})) {
+      const index = strokes.findIndex((x) => x.id === id);
+      const layer = findLayer(this.doc.layers, layerId)?.layer;
+      if (index >= 0 && isPixelLayer(layer)) return { layer, strokes, index };
+    }
+    const baked = this.doc.strokes.some((x) => x.id === id);
+    throw new PaintEditorError(
+      baked ? `Stroke "${id}" was painted on a pixel layer, so its pixels are baked; only strokes on a stroke layer can be edited (list_strokes {live: true}). Replay it onto a stroke layer (replay_strokes layerId) to edit the copy.` : `Unknown stroke "${id}". Call list_strokes {live: true} for the ids of editable strokes.`
+    );
+  }
+  /**
+   * Changes a live stroke's brush (a preset by `brushId`, keeping the stroke's size, and/or brush
+   * settings), colour, paint or seed, and redraws its layer (one undo step). A new colour replaces
+   * gradient or effect paint. Returns the stroke and the area that changed.
+   */
+  updateStroke(id, update) {
+    this.requireIdle("editing a stroke");
+    const { layer, strokes, index } = this.findLiveStroke(id);
+    const was = strokes[index];
+    let brush = was.brush;
+    if (update.brushId !== void 0) {
+      const b = this.requireBrush(update.brushId);
+      brush = normalizePaintBrush({ tip: { ...b.tip, size: was.brush.tip.size } }, b);
+    }
+    if (update.brush !== void 0) {
+      if (!update.brush || typeof update.brush !== "object") throw new PaintEditorError("brush must be an object of brush settings (as set_brush takes).");
+      brush = normalizePaintBrush({ ...update.brush, id: brush.id }, brush);
+    }
+    const why = liveStrokeRefusal(brush);
+    if (why) throw new PaintEditorError(why);
+    const next = { ...was, brush: brushToJSON(brush) };
+    if (update.seed !== void 0) {
+      if (!Number.isInteger(update.seed) || update.seed < 0) throw new PaintEditorError(`seed ${update.seed} must be a whole number of 0 or more.`);
+      next.seed = update.seed;
+    }
+    if (update.color !== void 0) {
+      next.color = parseColor(update.color);
+      delete next.paint;
+    }
+    if (update.paint !== void 0) {
+      if (update.paint === null) delete next.paint;
+      else if (isPaintEffectPaint(update.paint)) {
+        if (!this.effectPaintImage(update.paint)) throw new PaintEditorError(`The effect "${update.paint.effect}" is not rendered yet; render it first (prepareEffectPaints; the update_stroke tool does this).`);
+        next.paint = JSON.parse(JSON.stringify(update.paint));
+      } else {
+        const p = this.readStrokePaint(update.paint);
+        if (p.type === "color") {
+          next.color = p.color;
+          delete next.paint;
+        } else next.paint = JSON.parse(JSON.stringify(p));
+      }
+    }
+    const rgb = hexToRgb8(next.color).map((v) => v / 255);
+    const load = brushLoadForStroke(brush, EMPTY_MIXER_LOAD, rgb);
+    if (load.reservoir || load.pickup) next.load = load;
+    else delete next.load;
+    const list = strokes.map((x, i) => i === index ? next : x);
+    this.commitLiveStrokes("Edit stroke", layer, list, this.strokeAreas([was]));
+    return { stroke: { ...next }, bounds: unionRect(this.strokeArea(was), this.strokeArea(next)) ?? { x: 0, y: 0, width: 0, height: 0 } };
+  }
+  /**
+   * Replaces a live stroke's points, or moves, scales, rotates or flips them (`transform`, about
+   * the stroke's centre unless an origin is given; the brush size scales too), and redraws its
+   * layer (one undo step). Returns the stroke and the area that changed.
+   */
+  editStrokePoints(id, edit) {
+    this.requireIdle("editing a stroke");
+    if (edit.points === void 0 === (edit.transform === void 0)) throw new PaintEditorError("Pass either points (the new pen samples) or transform (dx, dy, scale, rotate, flipX), not both.");
+    const { layer, strokes, index } = this.findLiveStroke(id);
+    const was = strokes[index];
+    let next;
+    if (edit.points !== void 0) {
+      const points = this.checkPoints(edit.points);
+      next = { ...was, points: points.map((p) => ({ ...p })) };
+    } else {
+      const t = edit.transform;
+      if (t.scale !== void 0 && !(t.scale > 0 && t.scale <= 20)) throw new PaintEditorError(`scale ${t.scale} is out of range; use above 0 up to 20.`);
+      for (const k of ["dx", "dy", "rotate"]) if (t[k] !== void 0 && !Number.isFinite(t[k])) throw new PaintEditorError(`${k} must be a number.`);
+      const b = strokeBounds(was.points);
+      const m = variationAffine(t, t.origin ?? { x: b.x + b.width / 2, y: b.y + b.height / 2 });
+      next = varyStroke(was, m, {});
+      if (was.stencils) next.stencils = was.stencils;
+    }
+    const list = strokes.map((x, i) => i === index ? next : x);
+    this.commitLiveStrokes("Edit stroke points", layer, list, this.strokeAreas([was]));
+    return { stroke: { ...next }, bounds: unionRect(this.strokeArea(was), this.strokeArea(next)) ?? { x: 0, y: 0, width: 0, height: 0 } };
+  }
+  /** Deletes live strokes (one undo step). Returns the ids removed and the area that changed. */
+  removeStrokes(ids) {
+    this.requireIdle("removing strokes");
+    if (!ids.length) throw new PaintEditorError("Pass at least one stroke id (list_strokes {live: true}).");
+    const found = ids.map((id) => this.findLiveStroke(id));
+    let doc = this.doc;
+    let bounds = null;
+    const layers = /* @__PURE__ */ new Map();
+    for (const f of found) layers.set(f.layer.id, f.layer);
+    for (const [layerId, layer] of layers) {
+      const gone = (doc.liveStrokes?.[layerId] ?? []).filter((x) => ids.includes(x.id));
+      for (const x of gone) bounds = unionRect(bounds, this.strokeArea(x));
+      doc = this.withLiveStrokes(doc, layer, (doc.liveStrokes?.[layerId] ?? []).filter((x) => !ids.includes(x.id)), this.strokeAreas(gone));
+    }
+    this.commit(ids.length === 1 ? "Remove stroke" : "Remove strokes", doc);
+    return { removed: [...ids], bounds };
+  }
+  /** Moves a live stroke to `index` in its layer (0 = bottom) and redraws (one undo step). Returns the new order. */
+  reorderStroke(id, index) {
+    this.requireIdle("reordering strokes");
+    const { layer, strokes, index: from } = this.findLiveStroke(id);
+    if (!Number.isInteger(index) || index < 0 || index >= strokes.length) throw new PaintEditorError(`index ${index} is out of range; the layer has ${strokes.length} strokes, so use 0..${strokes.length - 1} (0 = bottom).`);
+    const list = [...strokes];
+    const [moved] = list.splice(from, 1);
+    list.splice(index, 0, moved);
+    if (from !== index) this.commitLiveStrokes("Reorder stroke", layer, list, this.strokeAreas([moved]));
+    return list.map((x) => x.id);
+  }
+  /** Turns a stroke layer into a plain pixel layer with the same pixels (one undo step). */
+  rasterizeLiveStrokes(layerId) {
+    this.requireIdle("rasterizing");
+    const { layer } = this.liveStrokeLayer(layerId, "rasterize");
+    this.commit("Rasterize stroke layer", this.withPaintEvent({ ...this.doc, ...this.liveStrokesWithout([layer.id]) }, { kind: "live-strokes", layerId: layer.id, data: { rasterized: true } }));
+    return this.describeLayer(this.getLayer(layer.id));
+  }
+  /** Sets a layer's live strokes and redraws it (replays). `null` makes it a plain pixel layer. */
+  replaceLiveStrokes(layerId, strokes) {
+    const l = this.wetLayer(layerId, "set the strokes of");
+    if (strokes === null) {
+      this.commit("Rasterize stroke layer", { ...this.doc, ...this.liveStrokesWithout([l.id]) });
+      return;
+    }
+    this.commitLiveStrokes("Strokes", l, strokes.map((x) => ({ ...x, layerId: l.id })));
+  }
+  /**
+   * The top-most stroke of a stroke layer (default the active layer) that painted the pixel at
+   * (x, y) document pixels, or `null`. Strokes whose area holds the point are drawn alone, top
+   * first, until one covers it.
+   */
+  liveStrokeAt(layerId, x, y) {
+    if (!Number.isFinite(x) || !Number.isFinite(y)) throw new PaintEditorError("x and y must be numbers of document pixels.");
+    const { layer, strokes } = this.liveStrokeLayer(layerId, "pick a stroke on");
+    const plain = { ...layer, visible: true, locks: void 0, offset: { x: 0, y: 0 } };
+    const doc = { ...this.doc, liveStrokes: void 0, stickers: void 0 };
+    const px = Math.floor(x);
+    const py = Math.floor(y);
+    for (let i = strokes.length - 1; i >= 0; i--) {
+      const area = this.strokeArea(strokes[i]);
+      if (!area || px < area.x || py < area.y || px >= area.x + area.width || py >= area.y + area.height) continue;
+      const drawn = this.drawLiveStroke(doc, plain, emptySurface(4), strokes[i]).surface;
+      if (readPixel(drawn, px, py)[3] > 24) return { ...strokes[i] };
+    }
+    return null;
+  }
+  /** Picks a stroke for the stroke panel and canvas (`null` for none). Editor state, not an undo step. */
+  selectStroke(id) {
+    if (id === this.selectedStroke) return;
+    this.selectedStroke = id;
+    this.emit([]);
+  }
+  /** Where a live stroke painted (document pixels), or `null`. */
+  liveStrokeArea(id) {
+    return this.strokeArea(this.findLiveStroke(id).strokes.find((s) => s.id === id));
+  }
+  /** Commits a layer's new stroke list with its redrawn pixels, recorded for replays (one undo step). */
+  commitLiveStrokes(label, layer, list, dirty) {
+    this.commit(label, this.withLiveStrokes(this.doc, layer, list, dirty));
+  }
+  withLiveStrokes(doc, layer, list, dirty) {
+    if (isLayerLocked(layer, "pixels")) throw new PaintEditorError(`Layer "${layer.name}" has its pixels locked; unlock it (update_layer locks) first.`);
+    const current = findLayer(doc.layers, layer.id)?.layer;
+    const surface = this.drawLiveStrokes(current ?? layer, list, dirty);
+    const next = { ...doc, layers: mapLayer(doc.layers, layer.id, (l) => ({ ...l, surface, offset: { x: 0, y: 0 } })), liveStrokes: { ...doc.liveStrokes ?? {}, [layer.id]: [...list] } };
+    return this.withPaintEvent(next, { kind: "live-strokes", layerId: layer.id, data: { strokes: list.map((x) => JSON.parse(JSON.stringify(x))) } });
+  }
+  /** Where a stroke painted (document pixels): as learnt when it was painted or drawn, else an estimate from its points and brush. */
+  strokeArea(s) {
+    return this.paintedBounds.has(s) ? this.paintedBounds.get(s) : liveStrokeBounds(s);
+  }
+  /** The areas strokes painted, or `null` when one is not known (a full redraw then). */
+  strokeAreas(strokes) {
+    const out = [];
+    for (const s of strokes) {
+      if (!this.paintedBounds.has(s)) return null;
+      const b = this.paintedBounds.get(s);
+      if (b) out.push(b);
+    }
+    return out;
+  }
+  /** Draws one stroke onto `surface` of a plain copy of the layer; returns the result and the area it painted. */
+  drawLiveStroke(doc, plain, surface, st) {
+    let out = surface;
+    const host = {
+      update: () => {
+      },
+      commit: (_s, drawn, cancelled) => {
+        if (!cancelled && drawn) out = drawn;
+      }
+    };
+    const paint = st.paint && this.liveEffectAt !== null && isLiveEffect(st) ? framePaint(st.paint, this.liveEffectAt) : st.paint;
+    const init = { layerId: plain.id, color: st.color, brush: st.brush, seed: st.seed, copies: st.copies ?? [], ...st.load ? { load: st.load } : {}, ...paint ? { paint } : {}, snapToPerspective: false, stencils: false, maskStencils: st.stencils ?? [] };
+    const session = this.sessionFor({ ...doc, layers: mapLayer(doc.layers, plain.id, () => ({ ...plain, surface })) }, init, host);
+    session.push(st.points);
+    const result = session.end();
+    const had = this.paintedBounds.get(st);
+    this.paintedBounds.set(st, had && result.bounds ? unionRect(had, result.bounds) : result.bounds ?? had ?? null);
+    return { surface: out, bounds: result.bounds };
+  }
+  /**
+   * A stroke layer's pixels drawn from its strokes, bottom first. With `dirty` (the areas the old
+   * strokes that changed had painted), only the tiles there and under any stroke whose area isn't
+   * known yet are drawn again, from the strokes that reach them (a pixel depends only on the
+   * strokes over it); the other tiles are kept. Without it, or with `null`, every stroke is drawn.
+   */
+  drawLiveStrokes(layer, list, dirty) {
+    const plain = { ...layer, visible: true, locks: void 0, offset: { x: 0, y: 0 } };
+    const doc = { ...this.doc, liveStrokes: void 0, stickers: void 0 };
+    const unknown = list.filter((s) => !this.paintedBounds.has(s));
+    const partial = dirty && !layer.offset.x && !layer.offset.y && unknown.length <= 4;
+    if (!partial) {
+      let surface2 = emptySurface(4);
+      for (const st of list) surface2 = this.drawLiveStroke(doc, plain, surface2, st).surface;
+      return surface2;
+    }
+    const areas = [...dirty];
+    for (const st of unknown) {
+      const b = this.drawLiveStroke(doc, plain, emptySurface(4), st).bounds;
+      if (b) areas.push(b);
+    }
+    const { width, height } = this.doc.canvas;
+    const rects = areas.map((r) => clipRect(r, width, height)).filter((r) => r !== null);
+    if (!rects.length) return layer.surface;
+    const overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+    let drawn = emptySurface(4);
+    for (const st of list) {
+      const b = this.paintedBounds.get(st);
+      if (b && rects.some((r) => overlaps(r, b))) drawn = this.drawLiveStroke(doc, plain, drawn, st).surface;
+    }
+    let surface = layer.surface;
+    for (const r of rects) surface = writeRegion(surface, r, readRegion(drawn, r));
+    return surface;
+  }
+  // --- Live effect paint ------------------------------------------------------------
+  /** The view's layers: stroke layers playing live effects at `effectTime`, the rest as they are. */
+  animatedView() {
+    if (!this.animatedLayers.size) return this.doc.layers;
+    let layers = this.doc.layers;
+    for (const [id, a] of this.animatedLayers) {
+      const l = findLayer(layers, id)?.layer;
+      if (isPixelLayer(l) && l.surface === a.base) layers = mapLayer(layers, id, () => ({ ...l, surface: a.surface }));
+    }
+    return layers;
+  }
+  /** Stroke layers with live effect strokes, and the distinct live sources (frame 0). */
+  liveEffects(doc = this.doc) {
+    const layers = [];
+    const sources = /* @__PURE__ */ new Map();
+    for (const [id, strokes] of Object.entries(doc.liveStrokes ?? {})) {
+      const layer = findLayer(doc.layers, id)?.layer;
+      const live = strokes.filter(isLiveEffect);
+      if (!isPixelLayer(layer) || !live.length) continue;
+      layers.push({ layer, strokes });
+      for (const st of live) sources.set(effectPaintKey(st.paint), st.paint);
+    }
+    return { layers, sources: [...sources.values()] };
+  }
+  /** What plays: the live effect strokes and their layers, or `null` when nothing does. */
+  getAnimation() {
+    const { layers, sources } = this.liveEffects();
+    if (!layers.length) return null;
+    return { layerIds: layers.map((x) => x.layer.id), strokes: layers.reduce((n, x) => n + x.strokes.filter(isLiveEffect).length, 0), sources: sources.length };
+  }
+  /** Plays or pauses live effect paint, and caps its frame rate (1..60). Editor state, not an undo step. */
+  setEffectPlayback(update) {
+    if (update.playing !== void 0 && typeof update.playing !== "boolean") throw new PaintEditorError("playing must be true or false.");
+    if (update.fps !== void 0 && !(Number.isInteger(update.fps) && update.fps >= 1 && update.fps <= 60)) throw new PaintEditorError(`fps ${update.fps} is out of range; use a whole number 1..60.`);
+    this.effectPlaybackState = { ...this.effectPlaybackState, ...update };
+    this.emit([]);
+    return { ...this.effectPlaybackState, time: this.effectTime };
+  }
+  /** The surfaces of every stroke layer with live effects at `time` ms, drawn in full (frames rendered first). */
+  async liveSurfacesAt(time) {
+    const { layers, sources } = this.liveEffects();
+    await this.prepareEffectPaints(sources.map((p) => framePaint(p, time)));
+    const out = /* @__PURE__ */ new Map();
+    this.liveEffectAt = time;
+    try {
+      for (const { layer, strokes } of layers) out.set(layer.id, this.drawLiveStrokes({ ...layer, offset: { x: 0, y: 0 } }, strokes));
+    } finally {
+      this.liveEffectAt = null;
+    }
+    return out;
+  }
+  /**
+   * Shows the live effects at `time` ms (each live stroke's effect at its own time plus `time`):
+   * renders their frames, then redraws only where live effect strokes paint. Nothing in the
+   * document changes. Resolves `false` when the document changed while frames rendered (the next
+   * frame catches up).
+   */
+  async showEffectTime(time) {
+    this.checkTime(time);
+    const { layers, sources } = this.liveEffects();
+    const revision = this.docRevision;
+    await this.prepareEffectPaints(sources.map((p) => framePaint(p, time)));
+    if (revision !== this.docRevision || this.session) return false;
+    const next = /* @__PURE__ */ new Map();
+    const dirty = [];
+    this.liveEffectAt = time;
+    try {
+      for (const { layer, strokes } of layers) {
+        const shown = this.animatedLayers.get(layer.id);
+        const from = shown && shown.base === layer.surface ? shown.surface : layer.surface;
+        const areas = strokes.filter(isLiveEffect).flatMap((st) => [liveStrokeBounds(st), ...this.paintedBounds.get(st) ? [this.paintedBounds.get(st)] : []]);
+        const surface = this.drawLiveStrokes({ ...layer, surface: from, offset: { x: 0, y: 0 } }, strokes, layer.offset.x || layer.offset.y ? null : areas);
+        next.set(layer.id, { base: layer.surface, surface });
+        dirty.push(...areas);
+      }
+    } finally {
+      this.liveEffectAt = null;
+    }
+    this.animatedLayers = next;
+    this.effectTime = time;
+    this.emit(dirty);
+    return true;
+  }
+  /**
+   * Plays live effect paint in the view until `stop`: a frame per tick of `clock` (default
+   * animation frames) at most `fps` a second, one render in flight. Idle while paused, while a
+   * stroke is painted, or when nothing is live. The bindings start it while the editor is shown.
+   */
+  playEffects(clock = defaultEffectClock) {
+    let stopped = false;
+    let cancel = () => {
+    };
+    let last = -Infinity;
+    let started = clock.now() - this.effectTime;
+    const tick = () => {
+      if (stopped) return;
+      const now = clock.now();
+      const { playing, fps } = this.effectPlaybackState;
+      if (!playing) started = now - this.effectTime;
+      if (!playing || this.session || now - last < 1e3 / fps - 1 || !this.liveEffects().layers.length) {
+        cancel = clock.frame(tick);
+        return;
+      }
+      last = now;
+      this.showEffectTime(Math.max(0, now - started)).then(
+        () => {
+          if (!stopped) cancel = clock.frame(tick);
+        },
+        () => {
+          if (!stopped) cancel = clock.frame(tick);
+        }
+      );
+    };
+    cancel = clock.frame(tick);
+    return {
+      stop() {
+        stopped = true;
+        cancel();
+      }
+    };
+  }
+  /**
+   * Runs `fn` with the painting as it is `time` ms into its live effects (see `getAnimation`): for
+   * exports at a moment. Nothing in the document changes.
+   */
+  async withEffectTime(time, fn) {
+    this.checkTime(time);
+    const surfaces = await this.liveSurfacesAt(time);
+    const was = this.frameOverride;
+    this.frameOverride = surfaces;
+    try {
+      return await fn();
+    } finally {
+      this.frameOverride = was;
+    }
+  }
+  /** The painting composited `time` ms into its live effects, like `compositePixels`. Nothing in the document changes. */
+  async renderAnimationFrame(time, options = {}) {
+    return this.withEffectTime(time, () => this.compositePixels(options));
+  }
   // --- Stencils --------------------------------------------------------------------
   stencilCache = null;
   nextStencilId = 1;
@@ -6259,6 +6807,35 @@ var PaintEditorController = class _PaintEditorController {
 var MAX_IMAGE_SIDE = 8192;
 var movePoint = (p, dx, dy) => ({ x: p.x + dx, y: p.y + dy });
 var moveRect = (r, dx, dy) => ({ ...r, x: r.x + dx, y: r.y + dy });
+function isLiveEffect(s) {
+  return s.paint?.type === "effect" && s.paint.live === true;
+}
+function framePaint(p, t) {
+  return { ...p, time: p.time + t };
+}
+var MAX_LIVE_EFFECT_SOURCES = 8;
+var defaultEffectClock = {
+  now: () => typeof performance !== "undefined" ? performance.now() : Date.now(),
+  frame: (cb) => {
+    if (typeof requestAnimationFrame === "undefined") {
+      const t = setTimeout(cb, 16);
+      return () => clearTimeout(t);
+    }
+    const id = requestAnimationFrame(cb);
+    return () => cancelAnimationFrame(id);
+  }
+};
+function clipRect(r, width, height) {
+  const x0 = Math.max(0, Math.floor(r.x));
+  const y0 = Math.max(0, Math.floor(r.y));
+  const x1 = Math.min(width, Math.ceil(r.x + r.width));
+  const y1 = Math.min(height, Math.ceil(r.y + r.height));
+  return x1 > x0 && y1 > y0 ? { x: x0, y: y0, width: x1 - x0, height: y1 - y0 } : null;
+}
+function withLiveStroke(doc, stroke) {
+  const list = doc.liveStrokes?.[stroke.layerId];
+  return list ? { ...doc, liveStrokes: { ...doc.liveStrokes, [stroke.layerId]: [...list, stroke] } } : doc;
+}
 function shiftDocument(doc, dx, dy) {
   if (!dx && !dy) return doc;
   let layers = doc.layers;
@@ -6275,11 +6852,18 @@ function shiftDocument(doc, dx, dy) {
       return s.stencils ? { ...moved, stencils: s.stencils.map((x) => translateStencil(x, dx, dy)) } : moved;
     })
   };
+  const moveStroke = (s) => {
+    const moved = varyStroke(s, m, {});
+    return s.stencils ? { ...moved, stencils: s.stencils.map((x) => translateStencil(x, dx, dy)) } : moved;
+  };
   if (doc.stickers) out.stickers = Object.fromEntries(Object.entries(doc.stickers).map(([id, list]) => [id, moveStickers(list)]));
+  if (doc.liveStrokes) out.liveStrokes = Object.fromEntries(Object.entries(doc.liveStrokes).map(([id, list]) => [id, list.map(moveStroke)]));
   if (doc.paintEvents) {
     out.paintEvents = doc.paintEvents.map((e) => {
       const list = e.kind === "stickers" ? e.data?.stickers : void 0;
-      return list ? { ...e, data: { ...e.data, stickers: moveStickers(list) } } : e;
+      if (list) return { ...e, data: { ...e.data, stickers: moveStickers(list) } };
+      const strokes = e.kind === "live-strokes" ? e.data?.strokes : void 0;
+      return strokes ? { ...e, data: { ...e.data, strokes: strokes.map(moveStroke) } } : e;
     });
   }
   if (doc.wetEvents) {
@@ -7694,6 +8278,7 @@ var BRUSH_FIELDS = {
   sticker: STICKER_BRUSH,
   paint: BRUSH_PAINT
 };
+var TIME = { type: "number", minimum: 0, description: "Draw live effect paint (strokes on stroke layers painted with live effect paint) this many ms into its animation (default: as painted, its own time)." };
 var POINTS = {
   type: "array",
   minItems: 1,
@@ -7899,12 +8484,12 @@ function createPaintEditorToolProvider(controller, options = {}) {
   add({
     name: "add_layer",
     title: "Add a layer",
-    description: "Adds an empty pixel layer (or a group) above the active layer, or above aboveId, or at the top of parentId; it becomes the active layer. One undo step. Returns the layer.",
+    description: "Adds an empty pixel layer, a group, or a stroke layer (type strokes: its strokes stay editable with update_stroke and edit_stroke_points) above the active layer, or above aboveId, or at the top of parentId; it becomes the active layer. One undo step. Returns the layer (liveStrokes: its stroke count, for a stroke layer).",
     inputSchema: {
       type: "object",
       properties: {
         name: { type: "string", minLength: 1, description: 'Layer name (default "Layer n").' },
-        type: { type: "string", enum: ["pixel", "group"], description: "pixel (default) or group." },
+        type: { type: "string", enum: ["pixel", "group", "strokes"], description: "pixel (default), group, or strokes: a live stroke layer whose pixels are drawn from its strokes, so each stays editable. It takes dab, particle, bristle and Mixer Brush strokes that pick up no paint." },
         aboveId: { type: "string", description: "Put it directly above this layer (default the active layer)." },
         parentId: { type: "string", description: "Put it at the top of this group instead." }
       },
@@ -8266,44 +8851,156 @@ function createPaintEditorToolProvider(controller, options = {}) {
   add({
     name: "list_strokes",
     title: "List recorded strokes",
-    description: "Lists the recorded strokes, oldest first (every stroke is kept as data): id, layer, brush id and name, colour, point count, bounds and seed. With ids, also the points. Use the ids with replay_strokes.",
+    description: "Lists the recorded strokes, oldest first (every stroke is kept as data): id, layer, brush id and name, colour, point count, bounds, seed and whether it is live. With ids, also the points. Use the ids with replay_strokes. With live true, lists the strokes of stroke layers as they are now, bottom first: the ones update_stroke, edit_stroke_points, reorder_stroke and remove_strokes change.",
     inputSchema: {
       type: "object",
       properties: {
         ids: { type: "array", items: { type: "string", description: "Stroke id." }, description: "Only these strokes, with their points." },
-        last: { type: "integer", minimum: 1, maximum: 1e3, description: "Only the most recent n strokes (default 100)." }
+        last: { type: "integer", minimum: 1, maximum: 1e3, description: "Only the most recent n strokes (default 100)." },
+        live: { type: "boolean", description: "Only the editable strokes of stroke layers, as they are now, bottom first (default false: the whole recorded history)." },
+        layerId: { type: "string", description: "Only strokes of this layer." }
       },
       additionalProperties: false
     },
     annotations: { title: "List recorded strokes", ...READ6 },
     coordinates: { out: ["strokes[].bounds", "strokes[].points[]"] },
-    handler: ({ ids, last }) => {
-      const all = c.getStrokes();
+    handler: ({ ids, last, live, layerId }) => {
+      if (layerId !== void 0 && !c.getLayer(layerId)) throw new Error(`Unknown layer "${layerId}". Call list_layers for the ids.`);
+      const liveAll = Object.values(c.document.liveStrokes ?? {}).flat();
+      const liveIds = new Set(liveAll.map((s) => s.id));
+      let all = live ? liveAll : c.getStrokes();
+      if (layerId !== void 0) all = all.filter((s) => s.layerId === layerId);
       const picked = ids ? all.filter((s) => ids.includes(s.id)) : all.slice(-(last ?? 100));
       if (ids) {
         for (const id of ids) if (!all.some((s) => s.id === id)) throw new Error(`Unknown stroke "${id}". Call list_strokes without ids for the ids.`);
       }
-      return {
-        total: all.length,
-        strokes: picked.map((s) => {
-          const xs = s.points.map((p) => p.x);
-          const ys = s.points.map((p) => p.y);
-          const pad = s.brush.tip.size / 2;
-          return {
-            id: s.id,
-            layerId: s.layerId,
-            brushId: s.brush.id,
-            brushName: s.brush.name,
-            color: s.color,
-            points: ids ? s.points : s.points.length,
-            seed: s.seed,
-            copies: s.copies?.length ?? 0,
-            bounds: { x: Math.floor(Math.min(...xs) - pad), y: Math.floor(Math.min(...ys) - pad), width: Math.ceil(Math.max(...xs) - Math.min(...xs) + 2 * pad), height: Math.ceil(Math.max(...ys) - Math.min(...ys) + 2 * pad) }
-          };
-        })
-      };
+      return { total: all.length, strokes: picked.map((s) => strokeSummary(s, Boolean(ids), live ? true : liveIds.has(s.id) && c.document.liveStrokes?.[s.layerId]?.includes(s) === true)) };
     }
   });
+  add({
+    name: "stroke_at",
+    title: "Find the stroke at a point",
+    description: "Returns the top-most stroke of a stroke layer that painted the pixel at a point (document pixels), or stroke null when none did, so you can pick one stroke among overlapping ones before update_stroke, edit_stroke_points or remove_strokes. Changes nothing.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        layerId: { type: "string", description: "Stroke layer id from list_layers (default the active layer)." },
+        x: { type: "number", description: "Point x in document pixels." },
+        y: { type: "number", description: "Point y in document pixels." }
+      },
+      required: ["x", "y"],
+      additionalProperties: false
+    },
+    annotations: { title: "Find the stroke at a point", ...READ6 },
+    coordinates: { in: [""], out: ["stroke.bounds"] },
+    handler: ({ layerId, x, y }) => {
+      const s = c.liveStrokeAt(layerId, x, y);
+      return { stroke: s ? strokeSummary(s, false, true) : null };
+    }
+  });
+  add({
+    name: "update_stroke",
+    title: "Change a stroke",
+    description: "Changes a stroke on a stroke layer after it was painted: another brush preset (brushId, keeping the stroke size), brush settings (as set_brush takes), colour (replaces gradient paint), paint, or seed, then redraws the layer exactly. Ids come from list_strokes {live: true}. Refuses brushes a stroke layer cannot redraw (wet, impasto, sticker, eraser, smudge, blender, pick-up). One undo step. Returns the stroke and the area that changed.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        id: { type: "string", description: "Stroke id from list_strokes {live: true}." },
+        brushId: { type: "string", description: "Brush preset id from list_brushes; the stroke keeps its size." },
+        brush: { type: "object", properties: BRUSH_FIELDS, additionalProperties: false, description: "Brush settings to change on top of brushId or the stroke\u2019s brush; missing fields keep their values." },
+        color: { type: "string", pattern: "^#[0-9a-fA-F]{6}$", description: "New colour #rrggbb (replaces gradient paint)." },
+        paint: { anyOf: [PAINT_SOURCE_JSON_SCHEMA, { type: "null", description: "Back to the stroke\u2019s plain colour." }], description: "A colour or gradient paint for the stroke; null drops its gradient." },
+        seed: { type: "integer", minimum: 0, description: "Another jitter seed: particles, scatter and texture fall differently." }
+      },
+      required: ["id"],
+      additionalProperties: false
+    },
+    annotations: { title: "Change a stroke", ...WRITE5 },
+    coordinates: { out: ["bounds", "stroke.bounds"] },
+    handler: ({ id, ...update }) => {
+      if (!Object.keys(update).length) throw new Error("Pass at least one change: brushId, brush, color, paint or seed.");
+      const r = c.updateStroke(id, update);
+      return { stroke: strokeSummary(r.stroke, false, true), bounds: r.bounds };
+    }
+  });
+  add({
+    name: "edit_stroke_points",
+    title: "Move or reshape a stroke",
+    description: "Replaces a stroke\u2019s points (points, document pixels), or moves, scales, rotates or flips it (transform, about its centre unless origin is given; the brush size scales with it), then redraws its stroke layer exactly. Pass one of points or transform. One undo step. Returns the stroke with its points and the area that changed.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        id: { type: "string", description: "Stroke id from list_strokes {live: true}." },
+        points: POINTS,
+        transform: {
+          type: "object",
+          description: "A move, scale, rotation or flip of the whole stroke.",
+          properties: {
+            dx: { type: "number", description: "Move right by this many pixels (default 0)." },
+            dy: { type: "number", description: "Move down by this many pixels (default 0)." },
+            scale: { type: "number", exclusiveMinimum: 0, maximum: 20, description: "Scale about the origin; brush size scales too (default 1)." },
+            rotate: { type: "number", minimum: -360, maximum: 360, description: "Rotate about the origin, degrees clockwise (default 0)." },
+            flipX: { type: "boolean", description: "Mirror left to right about the origin (default false)." },
+            origin: { type: "object", description: "Centre for scale, rotate and flip (default the centre of the stroke).", properties: { x: { type: "number", description: "Document x." }, y: { type: "number", description: "Document y." } }, required: ["x", "y"], additionalProperties: false }
+          },
+          additionalProperties: false
+        }
+      },
+      required: ["id"],
+      additionalProperties: false
+    },
+    annotations: { title: "Move or reshape a stroke", ...WRITE5 },
+    coordinates: { in: ["points[]", "transform.origin"], out: ["bounds", "stroke.bounds", "stroke.points[]"] },
+    handler: ({ id, points, transform }) => {
+      const r = c.editStrokePoints(id, { points, transform });
+      return { stroke: strokeSummary(r.stroke, true, true), bounds: r.bounds };
+    }
+  });
+  add({
+    name: "reorder_stroke",
+    title: "Move a stroke up or down",
+    description: "Moves a stroke to index in its stroke layer (0 = bottom, drawn first) and redraws the layer. One undo step. Returns the new order of ids, bottom first.",
+    inputSchema: {
+      type: "object",
+      properties: { id: { type: "string", description: "Stroke id from list_strokes {live: true}." }, index: { type: "integer", minimum: 0, description: "New position, 0 = bottom." } },
+      required: ["id", "index"],
+      additionalProperties: false
+    },
+    annotations: { title: "Move a stroke up or down", ...WRITE5 },
+    handler: ({ id, index }) => ({ order: c.reorderStroke(id, index) })
+  });
+  add({
+    name: "remove_strokes",
+    title: "Delete strokes",
+    description: "Deletes strokes from their stroke layers (the eraser of a stroke layer) and redraws them. All checked first; one undo step. Returns the ids removed and the area that changed.",
+    inputSchema: {
+      type: "object",
+      properties: { ids: { type: "array", minItems: 1, items: { type: "string", description: "Stroke id." }, description: "Stroke ids from list_strokes {live: true}." } },
+      required: ["ids"],
+      additionalProperties: false
+    },
+    annotations: { title: "Delete strokes", ...DESTRUCTIVE3 },
+    coordinates: { out: ["bounds"] },
+    handler: ({ ids }) => c.removeStrokes(ids)
+  });
+  add({
+    name: "convert_to_stroke_layer",
+    title: "Make a layer a stroke layer",
+    description: 'Makes an empty pixel layer a stroke layer, so strokes painted on it stay editable. Refuses a layer with paint (add_layer {type: "strokes"} instead). One undo step. Returns the layer.',
+    inputSchema: { type: "object", properties: { layerId: { type: "string", description: "Layer id from list_layers (default the active layer)." } }, additionalProperties: false },
+    annotations: { title: "Make a layer a stroke layer", ...WRITE5 },
+    coordinates: { out: ["bounds"] },
+    handler: ({ layerId }) => c.convertToLiveStrokes(layerId)
+  });
+  add({
+    name: "rasterize_stroke_layer",
+    title: "Rasterize a stroke layer",
+    description: "Turns a stroke layer into a plain pixel layer with the same pixels: its strokes stop being editable, and erasers, smudges and fills work on it. One undo step. Returns the layer.",
+    inputSchema: { type: "object", properties: { layerId: { type: "string", description: "Stroke layer id from list_layers (default the active layer)." } }, additionalProperties: false },
+    annotations: { title: "Rasterize a stroke layer", ...DESTRUCTIVE3 },
+    coordinates: { out: ["bounds"] },
+    handler: ({ layerId }) => c.rasterizeLiveStrokes(layerId)
+  });
   add({
     name: "replay_strokes",
     title: "Replay strokes, varied",
@@ -8418,20 +9115,22 @@ function createPaintEditorToolProvider(controller, options = {}) {
   add({
     name: "export_image",
     title: "Export the painting",
-    description: "Exports the painting as PNG, JPEG or WebP (base64). JPEG always includes the paper; JPEG and WebP need a browser canvas. Changes nothing. Returns the data, its MIME type and size.",
+    description: "Exports the painting as PNG, JPEG or WebP (base64). JPEG always includes the paper; JPEG and WebP need a browser canvas. With time, live effect paint is drawn at that moment (get_effect_playback / set_effect_playback). Changes nothing. Returns the data, its MIME type and size.",
     inputSchema: {
       type: "object",
       properties: {
         format: { type: "string", enum: ["image/png", "image/jpeg", "image/webp"], description: "File type (default image/png)." },
         quality: { type: "number", minimum: 0, maximum: 1, description: "JPEG / WebP quality 0..1 (default 0.92)." },
         scale: { type: "number", exclusiveMinimum: 0, maximum: 1, description: "Shrink by this factor (default 1)." },
-        paper: { type: "boolean", description: "Include the paper (default true)." }
+        paper: { type: "boolean", description: "Include the paper (default true)." },
+        time: TIME
       },
       additionalProperties: false
     },
     annotations: { title: "Export the painting", ...READ6 },
-    handler: async ({ format, quality, scale, paper }) => {
-      const bytes = await c.exportImage({ format, quality, scale, paper });
+    handler: async ({ format, quality, scale, paper, time }) => {
+      const run = () => c.exportImage({ format, quality, scale, paper });
+      const bytes = time === void 0 ? await run() : await c.withEffectTime(time, run);
       return { mimeType: format ?? "image/png", bytes: bytes.length, data: bytesToBase64(bytes) };
     }
   });
@@ -8439,10 +9138,10 @@ function createPaintEditorToolProvider(controller, options = {}) {
     name: "export_psd",
     title: "Export as PSD",
     description: 'Writes the painting as an 8-bit RGB PSD (PSB above 30000 px) through the shared PSD writer: every layer and group with its opacity, blend, mask and locks, the paper as a locked "Paper" pixel layer at the bottom, and the composite as the merged image. Changes nothing. Returns the file as base64, its size, whether it is a PSB, and warnings (pigment and painterly blend modes have no PSD equivalent: they are written as the nearest standard mode, see list_blend_modes).',
-    inputSchema: EMPTY3,
+    inputSchema: { type: "object", properties: { time: TIME }, additionalProperties: false },
     annotations: { title: "Export as PSD", ...READ6 },
-    handler: () => {
-      const r = c.exportPsd();
+    handler: async ({ time }) => {
+      const r = time === void 0 ? c.exportPsd() : await c.withEffectTime(time, () => c.exportPsd());
       return { data: bytesToBase64(r.bytes), bytes: r.bytes.length, psb: r.psb, warnings: r.warnings };
     }
   });
@@ -8479,12 +9178,30 @@ function hostTool({ coordinates, ...tool }, { origin, onChange }) {
     }
   };
 }
+function strokeSummary(s, withPoints, live) {
+  const xs = s.points.map((p) => p.x);
+  const ys = s.points.map((p) => p.y);
+  const pad = s.brush.tip.size / 2;
+  return {
+    id: s.id,
+    layerId: s.layerId,
+    brushId: s.brush.id,
+    brushName: s.brush.name,
+    color: s.color,
+    points: withPoints ? s.points : s.points.length,
+    seed: s.seed,
+    copies: s.copies?.length ?? 0,
+    live,
+    bounds: { x: Math.floor(Math.min(...xs) - pad), y: Math.floor(Math.min(...ys) - pad), width: Math.ceil(Math.max(...xs) - Math.min(...xs) + 2 * pad), height: Math.ceil(Math.max(...ys) - Math.min(...ys) + 2 * pad) }
+  };
+}
 
 // src/paint-editor/ui.ts
 var PAINT_TOOLS = [
   { id: "brush", label: "Brush", key: "b" },
   { id: "eyedropper", label: "Eyedropper", key: "i" },
   { id: "sticker", label: "Stickers", key: "s" },
+  { id: "stroke", label: "Select stroke", key: "v" },
   { id: "pan", label: "Pan", key: "h" },
   { id: "rotate", label: "Rotate view", key: "r" }
 ];
@@ -8533,6 +9250,7 @@ var PaintGesture = class {
       this.mode = { kind: "rotate", pointerId: e.pointerId, angle: Math.atan2(e.clientY - b.top - b.height / 2, e.clientX - b.left - b.width / 2), rotation: this.controller.getState().view.rotation };
       return true;
     }
+    if (tool === "stroke") return this.strokeDown(e);
     if (tool === "eyedropper" || e.altKey) {
       this.pick(e);
       return false;
@@ -8549,6 +9267,34 @@ var PaintGesture = class {
       return false;
     }
   }
+  /**
+   * The Select stroke tool, on a stroke layer: pressing a stroke picks it and dragging moves it
+   * (one undo step at the drop); pressing where no stroke painted clears the pick.
+   */
+  strokeDown(e) {
+    const p = this.doc(e);
+    const s = this.controller.getState();
+    const layerId = s.document.activeLayerId;
+    if (!layerId || !s.document.liveStrokes?.[layerId]) {
+      this.error = "Pick a stroke layer in the Layers panel (or add one) to select its strokes.";
+      return false;
+    }
+    try {
+      const hit = this.controller.liveStrokeAt(layerId, p.x, p.y);
+      this.controller.selectStroke(hit?.id ?? null);
+      if (!hit) return false;
+      this.mode = { kind: "move-stroke", pointerId: e.pointerId, id: hit.id, from: p, to: p };
+      return true;
+    } catch (err) {
+      this.error = err instanceof Error ? err.message : String(err);
+      return false;
+    }
+  }
+  /** While a stroke is dragged: how far it has moved (document pixels), to draw its outline there. */
+  get strokeDrag() {
+    const m = this.mode;
+    return m?.kind === "move-stroke" ? { id: m.id, dx: m.to.x - m.from.x, dy: m.to.y - m.from.y } : null;
+  }
   /**
    * The Stickers tool: pressing a sticker picks it and dragging moves it (one undo step at the
    * drop); pressing anywhere else places the active brush's first stamp there, at its tip size and
@@ -8594,6 +9340,10 @@ var PaintGesture = class {
       this.controller.setView({ rotation: r });
       return;
     }
+    if (m.kind === "move-stroke") {
+      m.to = this.doc(e);
+      return;
+    }
     if (m.kind === "sticker") {
       const p = this.doc(e);
       m.at = { x: round2(p.x + m.dx), y: round2(p.y + m.dy) };
@@ -8618,6 +9368,17 @@ var PaintGesture = class {
     this.mode = null;
     this.predicted = [];
     if (m.kind === "stroke") this.controller.activeStroke?.end();
+    if (m.kind === "move-stroke") {
+      const dx = Math.round((this.doc(e).x - m.from.x) * 100) / 100;
+      const dy = Math.round((this.doc(e).y - m.from.y) * 100) / 100;
+      if (dx || dy) {
+        try {
+          this.controller.editStrokePoints(m.id, { transform: { dx, dy } });
+        } catch (err) {
+          this.error = err instanceof Error ? err.message : String(err);
+        }
+      }
+    }
     if (m.kind === "sticker" && m.at) {
       try {
         this.controller.updateSticker(void 0, m.id, m.at);
@@ -8726,11 +9487,24 @@ var PaintCanvasPresenter = class {
     return drawn;
   }
 };
-function guideOverlay(controller) {
+function guideOverlay(controller, drag) {
   const s = controller.getState();
   const size = s.document.canvas;
   const out = [];
   const layerId = s.document.activeLayerId;
+  const strokePicked = layerId && s.selectedStroke ? s.document.liveStrokes?.[layerId]?.some((x) => x.id === s.selectedStroke) : false;
+  const area = strokePicked ? controller.liveStrokeArea(s.selectedStroke) : null;
+  if (area) {
+    const dx = drag && drag.id === s.selectedStroke ? drag.dx : 0;
+    const dy = drag && drag.id === s.selectedStroke ? drag.dy : 0;
+    const box = [
+      { x: area.x + dx, y: area.y + dy },
+      { x: area.x + area.width + dx, y: area.y + dy },
+      { x: area.x + area.width + dx, y: area.y + area.height + dy },
+      { x: area.x + dx, y: area.y + area.height + dy }
+    ];
+    for (let i = 0; i < 4; i++) out.push({ from: box[i], to: box[(i + 1) % 4], kind: "stroke" });
+  }
   const picked = layerId && s.selectedSticker ? s.document.stickers?.[layerId]?.find((x) => x.id === s.selectedSticker) : void 0;
   if (picked) {
     const r = picked.size / 2 + 2;
@@ -9060,6 +9834,11 @@ function toggleStamp(stamps, stamp) {
   const next = stamps.includes(stamp) ? stamps.filter((s) => s !== stamp) : [...stamps, stamp];
   return next.length ? next : [stamp];
 }
+var STROKE_SLIDERS = [
+  { path: "tip.size", label: "Size", min: 1, max: 400, step: 1 },
+  { path: "tip.opacity", label: "Opacity", min: 0, max: 1, step: 0.01 },
+  { path: "tip.flow", label: "Flow", min: 0, max: 1, step: 0.01 }
+];
 var STICKER_SLIDERS = [
   { path: "size", label: "Size", min: 2, max: 400, step: 1 },
   { path: "rotation", label: "Rotation", min: -180, max: 180, step: 1 },
@@ -9094,7 +9873,7 @@ function createPaintEffectsToolProvider(controller, options = {}) {
   };
   const paintInfo = () => {
     const p = controller.getEffectPaint();
-    return p ? [{ id: PAINT_TARGET, effect: p.effect, provider: p.provider, role: controller.getState().effectPaintRendering ? "effect paint (rendering)" : "effect paint", enabled: true, values: p.values, ...p.time ? { time: p.time } : {} }] : [];
+    return p ? [{ id: PAINT_TARGET, effect: p.effect, provider: p.provider, role: controller.getState().effectPaintRendering ? "effect paint (rendering)" : "effect paint", enabled: true, values: p.values, ...p.time ? { time: p.time } : {}, ...p.map ? { map: p.map } : {}, ...p.live ? { live: true } : {} }] : [];
   };
   const layerInfo = (layerId) => {
     const s = controller.getEffectLayer(layerId);
@@ -9163,7 +9942,7 @@ function createPaintEffectsToolProvider(controller, options = {}) {
       if (target === PAINT_TARGET) {
         if (changes.opacity !== void 0) throw new Error("opacity does not apply to the effect paint: change the brush opacity (set_brush tip.opacity).");
         const p = controller.getEffectPaint();
-        await controller.setEffectPaint({ effect: p.effect, values: { ...p.values, ...changes.values ?? {} }, time: p.time });
+        await controller.setEffectPaint({ effect: p.effect, values: { ...p.values, ...changes.values ?? {} }, time: p.time, map: p.map, live: p.live });
         const effects2 = paintInfo();
         return { target, effect: effects2[0], effects: effects2 };
       }
@@ -9222,13 +10001,25 @@ function createPaintEffectsToolProvider(controller, options = {}) {
       {
         name: "set_effect_paint",
         title: "Paint with an effect",
-        description: `Makes brushes paint with a provider generator, overlay or title effect (search_effects with use generator, overlay or title): it is rendered once at the canvas size, and each stroke then takes every pixel's colour from it, fixed to the canvas, as if painting a hidden picture into view (the effect's transparency paints nothing). Dab, particle and bristle brushes take the colour per pixel; mixer brushes and dab brushes that pick up paint take it per dab, at its centre. Wet, impasto and sticker brushes refuse it (paint the shape and use fill_layer_with_effect with lockTransparency instead); erasers, blenders and smudges ignore it. It replaces the paint colour or gradient until set_color or set_paint; a brush with its own gradient paints that instead. Strokes record it and replay exactly. Editor state, not an undo step. Returns the effect paint: { effect, provider, values (every control), time } (list_applied_effects target "paint" shows it; update_effect / remove_effect with target and effect "paint" change or clear it).`,
+        description: `Makes brushes paint with a provider generator, overlay or title effect (search_effects with use generator, overlay or title): it is rendered once at the canvas size, and each stroke then takes every pixel's colour from it, fixed to the canvas, as if painting a hidden picture into view (the effect's transparency paints nothing). Dab, particle and bristle brushes take the colour per pixel; mixer brushes and dab brushes that pick up paint take it per dab, at its centre. Watercolour, gouache, oil and impasto brushes take it per pixel too, shifted by paint they pick up (in wet paint the pattern then flows with the water; impasto keeps its relief), and sprayed stickers take the colour at their centre. Erasers, blenders and smudges ignore it. It replaces the paint colour or gradient until set_color or set_paint; a brush with its own gradient paints that instead. Strokes record it and replay exactly. Editor state, not an undo step. Returns the effect paint: { effect, provider, values (every control), time } (list_applied_effects target "paint" shows it; update_effect / remove_effect with target and effect "paint" change or clear it).`,
         inputSchema: {
           type: "object",
           properties: {
             effect: ctx.effectIdSchema(["generator", "overlay", "title"]),
             values: ctx.valuesSchema("Control values over the effect's defaults"),
-            time: { type: "number", minimum: 0, description: "Which moment of an animated effect to paint with, in ms (default 0)." }
+            time: { type: "number", minimum: 0, description: "Which moment of an animated effect to paint with, in ms (default 0)." },
+            map: {
+              type: "object",
+              description: "How the effect lies on the paint: by canvas (default: fixed to the canvas, painting reveals a hidden picture) or by stroke (along each stroke: the effect is rendered as a strip length px long, and each pixel takes the colour at its distance along the stroke and its place across the tip).",
+              properties: {
+                by: { type: "string", enum: ["canvas", "stroke"], description: "canvas (default) or stroke." },
+                length: { type: "number", minimum: 16, maximum: 4096, description: "by stroke: px of stroke per repeat of the effect (default 300)." },
+                repeat: { type: "string", enum: ["repeat", "mirror", "clamp"], description: "by stroke: past the strip end start again (default), run back, or hold the last colour." }
+              },
+              required: ["by"],
+              additionalProperties: false
+            },
+            live: { type: "boolean", description: "Live effect paint (default false): strokes on a stroke layer (add_layer type strokes) keep playing the effect, so the paint moves (set_effect_playback); elsewhere strokes bake the frame at time." }
           },
           required: ["effect"],
           additionalProperties: false
@@ -9236,9 +10027,24 @@ function createPaintEffectsToolProvider(controller, options = {}) {
         annotations: { title: "Paint with an effect", ...ctx.annotations.writeIdempotent },
         handler: async (args) => {
           ctx.requireProvider();
-          return { effectPaint: await controller.setEffectPaint({ effect: args.effect, values: values(args.values), time: args.time }) };
+          return { effectPaint: await controller.setEffectPaint({ effect: args.effect, values: values(args.values), time: args.time, map: args.map, live: args.live }) };
         }
       },
+      {
+        name: "set_effect_playback",
+        title: "Play or pause live effect paint",
+        description: "Plays or pauses live effect paint (strokes painted on stroke layers with set_effect_paint live true) in the editor view, and caps its frame rate. Exports draw it at a chosen time with export_image / export_psd time. Editor state, not an undo step. Returns playing, fps, the time the view shows (ms) and what plays (animation: layer ids, live strokes, sources; null when nothing does).",
+        inputSchema: {
+          type: "object",
+          properties: {
+            playing: { type: "boolean", description: "Play (true, the default state) or pause at the current frame." },
+            fps: { type: "integer", minimum: 1, maximum: 60, description: "Frame rate cap, frames a second (default 30); lower it on large canvases." }
+          },
+          additionalProperties: false
+        },
+        annotations: { title: "Play or pause live effect paint", ...ctx.annotations.writeIdempotent },
+        handler: async (args) => ({ ...controller.setEffectPlayback({ playing: args.playing, fps: args.fps }), animation: controller.getAnimation() })
+      },
       {
         name: "add_effect_layer",
         title: "Add an effect layer",
@@ -9348,6 +10154,8 @@ export {
   DEFAULT_WET_BRUSH,
   DEFAULT_WET_PARAMS,
   DryStroke,
+  EFFECT_MAP_REPEATS,
+  EFFECT_STRIP_HEIGHT,
   GPU_LEAD,
   GRAIN_PATTERNS,
   GRAIN_TILE,
@@ -9357,11 +10165,13 @@ export {
   IMPASTO_TOOLS,
   IMPASTO_TOOL_LABELS,
   LIGHT_SLIDERS,
+  LIVE_STROKE_ENGINES,
   LitCache,
   MAX_BRUSH_SIZE,
   MAX_CANVAS_SIDE,
   MAX_COORDINATE,
   MAX_IMAGE_SIDE,
+  MAX_LIVE_EFFECT_SOURCES,
   MAX_ZOOM,
   MIN_CANVAS_SIDE,
   MIN_ZOOM,
@@ -9425,6 +10235,7 @@ export {
   STENCIL_KINDS,
   STENCIL_SHAPES,
   STICKER_SLIDERS,
+  STROKE_SLIDERS,
   SYMMETRY_MODES,
   StencilSnapper,
   StickerSpray,
@@ -9480,8 +10291,10 @@ export {
   downsampleRgba,
   drawSticker,
   drawWaterOverlay,
+  effectDabField,
   effectLayersToJSON,
   effectPaintKey,
+  effectPaintSize,
   emptiedLayers,
   emptyThickChannels,
   fitZoom,
@@ -9505,6 +10318,8 @@ export {
   isWetCapable,
   lightTile,
   lightingKey,
+  liveStrokeBounds,
+  liveStrokeRefusal,
   mapPenPoint,
   mix32,
   mixPixels,
@@ -9565,6 +10380,7 @@ export {
   quickStencil,
   rand01,
   randSigned,
+  readEffectStrokeMap,
   readPaintEffectPaint,
   readPaintEffectSource,
   readPaintSource,