@pixerate/editor 0.239.0 → 0.240.0

package/dist/paint-editor/index.js

@@ -1519,7 +1519,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);
@@ -3085,6 +3086,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 +3164,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 +3496,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 +3510,8 @@ var PaintEditorController = class _PaintEditorController {
   dirty = "all";
   seedCounter = 1;
   strokeCounter = 1;
+  /** 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 +3598,7 @@ var PaintEditorController = class _PaintEditorController {
       mixerLoad: this.mixerLoad,
       view: this.view,
       hand: this.hand,
+      selectedStroke: this.selectedStroke,
       selectedSticker: this.selectedSticker,
       canUndo: this.undoStack.length > 0 && !this.session,
       canRedo: this.redoStack.length > 0 && !this.session,
@@ -3897,6 +3947,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 +3974,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 +3995,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 +4033,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 +4046,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 +4102,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 +4114,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 +4125,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 +4237,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;
   }
@@ -4754,6 +4811,10 @@ 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}`);
+    }
     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.`);
@@ -4908,6 +4969,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 +4981,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 +5009,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);
@@ -5501,6 +5564,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 +5591,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 +5651,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 +6126,278 @@ 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 init = { layerId: plain.id, color: st.color, brush: st.brush, seed: st.seed, copies: st.copies ?? [], ...st.load ? { load: st.load } : {}, ...st.paint ? { paint: st.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();
+    this.paintedBounds.set(st, result.bounds);
+    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;
+  }
   // --- Stencils --------------------------------------------------------------------
   stencilCache = null;
   nextStencilId = 1;
@@ -6259,6 +6615,17 @@ 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 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 +6642,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) {
@@ -7899,12 +8273,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 +8640,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",
@@ -8479,12 +8965,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 +9037,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 +9054,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 +9127,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 +9155,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 +9274,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 +9621,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 },
@@ -9357,6 +9923,7 @@ export {
   IMPASTO_TOOLS,
   IMPASTO_TOOL_LABELS,
   LIGHT_SLIDERS,
+  LIVE_STROKE_ENGINES,
   LitCache,
   MAX_BRUSH_SIZE,
   MAX_CANVAS_SIDE,
@@ -9425,6 +9992,7 @@ export {
   STENCIL_KINDS,
   STENCIL_SHAPES,
   STICKER_SLIDERS,
+  STROKE_SLIDERS,
   SYMMETRY_MODES,
   StencilSnapper,
   StickerSpray,
@@ -9505,6 +10073,8 @@ export {
   isWetCapable,
   lightTile,
   lightingKey,
+  liveStrokeBounds,
+  liveStrokeRefusal,
   mapPenPoint,
   mix32,
   mixPixels,