@pixerate/editor 0.245.0 → 0.248.0

package/dist/{chunk-TBJEMELS.js → chunk-VNBUDVD4.js}

@@ -964,9 +964,56 @@ var MarkStroke = class {
     const rect = dabRect(dab, hardness);
     const n = rect.width * rect.height;
     if (n <= 0) return;
+    const vals = this.scratch(n);
+    rasterizeDab(dab, hardness, rect, vals);
+    this.lay(rect, vals, dab.opacity, pressure, x, y, rects);
+  }
+  /**
+   * Stamps a textured mark: `kind` from the sticker stamps over a square of half-size `r`, turned
+   * `rotation` radians clockwise, with flow `alpha` towards `opacity`. Small marks are supersampled.
+   */
+  stamp(x, y, r, kind, rotation, seed, alpha, opacity, pressure, rects) {
+    if (!(r > 0.05) || !(alpha > 0)) return;
+    const reach = Math.max(0.5, r) * Math.SQRT2 + 1;
+    const rect = { x: Math.floor(x - reach), y: Math.floor(y - reach), width: 0, height: 0 };
+    rect.width = Math.ceil(x + reach) - rect.x;
+    rect.height = Math.ceil(y + reach) - rect.y;
+    const n = rect.width * rect.height;
+    const vals = this.scratch(n);
+    const ss = r < 10 ? 3 : 1;
+    const c = Math.cos(rotation);
+    const s = Math.sin(rotation);
+    const inv = 1 / Math.max(0.5, r);
+    const a = Math.min(1, alpha);
+    for (let yy = 0, k = 0; yy < rect.height; yy++) {
+      for (let xx = 0; xx < rect.width; xx++, k++) {
+        let sum = 0;
+        for (let sy = 0; sy < ss; sy++) {
+          for (let sx = 0; sx < ss; sx++) {
+            const dx = rect.x + xx + (sx + 0.5) / ss - x;
+            const dy = rect.y + yy + (sy + 0.5) / ss - y;
+            sum += stampCoverage(kind, (dx * c + dy * s) * inv, (dy * c - dx * s) * inv, seed);
+          }
+        }
+        vals[k] = sum / (ss * ss) * a;
+      }
+    }
+    this.lay(rect, vals, Math.min(1, opacity), pressure, x, y, rects);
+  }
+  /** A scratch buffer of `n` values (reused; valid until the next mark). */
+  scratch(n) {
     if (this.buf.length < n) this.buf = new Float32Array(n);
     const vals = this.buf.subarray(0, n);
-    rasterizeDab(dab, hardness, rect, vals);
+    vals.fill(0);
+    return vals;
+  }
+  /**
+   * Lays coverage `vals` over `rect` towards `opacity`: paper grain, then effect paint or the
+   * colour of a mark at (x, y) (gradient paint), into the stroke's coverage.
+   */
+  lay(rect, vals, opacity, pressure, x, y, rects) {
+    const n = rect.width * rect.height;
+    if (n <= 0) return;
     const grain = this.options.grain;
     if (this.depth > 0 && grain) {
       for (let yy = 0, k = 0; yy < rect.height; yy++)
@@ -976,11 +1023,11 @@ var MarkStroke = class {
       if (this.field.length < n * 3) this.field = new Float32Array(n * 3);
       const field = this.field.subarray(0, n * 3);
       sampleEffectField(this.options.effect, rect, vals, field, this.pen);
-      this.coverage.accumulate(rect, vals, dab.opacity, null, field);
+      this.coverage.accumulate(rect, vals, opacity, null, field);
     } else {
       const color = this.markColor(x, y);
       if (color && color.alpha < 1) for (let k = 0; k < n; k++) vals[k] *= color.alpha;
-      this.coverage.accumulate(rect, vals, dab.opacity, color ? color.rgb : null);
+      this.coverage.accumulate(rect, vals, opacity, color ? color.rgb : null);
     }
     rects.push(rect);
     this.dabCount++;
@@ -993,14 +1040,41 @@ var MarkStroke = class {
     for (let i = 1; i <= n; i++) this.mark(x0 + (x1 - x0) * i / n, y0 + (y1 - y0) * i / n, r, alpha, opacity, pressure, rects);
   }
 };
-var PARTICLE_KINDS = ["string", "spring", "orbit", "flow"];
-var PARTICLE_RENDERS = ["dot", "line", "sequence"];
-var DEFAULT_PARTICLE = { kind: "spring", render: "line", count: 12, size: 0.08, spread: 0.5, stiffness: 0.4, damping: 0.25, speed: 0.5, gravity: 0, life: 0.5, interval: 0.3 };
+var PARTICLE_KINDS = ["string", "spring", "orbit", "flow", "elastic", "fuzzy"];
+var PARTICLE_RENDERS = ["dot", "line", "sequence", "ribbon"];
+var RIBBON_PAIRS = ["adjacent", "first-last"];
+var DOT_TEXTURE_ORDERS = ["sequence", "random"];
+var DOT_ROTATIONS = ["follow", "random", "fixed"];
+var MAX_DOT_TEXTURES = 4;
+var DEFAULT_PARTICLE = {
+  kind: "spring",
+  render: "line",
+  count: 12,
+  size: 0.08,
+  spread: 0.5,
+  stiffness: 0.4,
+  damping: 0.25,
+  speed: 0.5,
+  gravity: 0,
+  life: 0.5,
+  interval: 0.3,
+  ribbonFill: 0.5,
+  ribbonPairs: "adjacent",
+  waveAmplitude: 0,
+  waveLength: 60,
+  waveSpeed: 0,
+  wavePhaseJitter: 0,
+  dotTextures: [],
+  dotTextureOrder: "sequence",
+  dotRotation: "random"
+};
 var unit3 = (v, d) => typeof v === "number" && Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : d;
+var oneOf = (v, all, d) => all.includes(v) ? v : d;
 function normalizeParticle(raw = {}, base = DEFAULT_PARTICLE) {
+  const textures = Array.isArray(raw.dotTextures) ? raw.dotTextures.filter((t) => STAMP_KINDS.includes(t)).slice(0, MAX_DOT_TEXTURES) : [...base.dotTextures ?? []];
   return {
-    kind: PARTICLE_KINDS.includes(raw.kind) ? raw.kind : base.kind,
-    render: PARTICLE_RENDERS.includes(raw.render) ? raw.render : base.render,
+    kind: oneOf(raw.kind, PARTICLE_KINDS, base.kind),
+    render: oneOf(raw.render, PARTICLE_RENDERS, base.render),
     count: typeof raw.count === "number" && Number.isFinite(raw.count) ? Math.min(64, Math.max(1, Math.round(raw.count))) : base.count,
     size: unit3(raw.size, base.size),
     spread: unit3(raw.spread, base.spread),
@@ -1009,9 +1083,61 @@ function normalizeParticle(raw = {}, base = DEFAULT_PARTICLE) {
     speed: unit3(raw.speed, base.speed),
     gravity: typeof raw.gravity === "number" && Number.isFinite(raw.gravity) ? Math.min(1, Math.max(-1, raw.gravity)) : base.gravity,
     life: unit3(raw.life, base.life),
-    interval: unit3(raw.interval, base.interval)
+    interval: unit3(raw.interval, base.interval),
+    ribbonFill: unit3(raw.ribbonFill, base.ribbonFill ?? DEFAULT_PARTICLE.ribbonFill),
+    ribbonPairs: oneOf(raw.ribbonPairs, RIBBON_PAIRS, base.ribbonPairs ?? DEFAULT_PARTICLE.ribbonPairs),
+    waveAmplitude: unit3(raw.waveAmplitude, base.waveAmplitude ?? 0),
+    waveLength: typeof raw.waveLength === "number" && Number.isFinite(raw.waveLength) ? Math.min(2e3, Math.max(4, raw.waveLength)) : base.waveLength ?? DEFAULT_PARTICLE.waveLength,
+    waveSpeed: unit3(raw.waveSpeed, base.waveSpeed ?? 0),
+    wavePhaseJitter: unit3(raw.wavePhaseJitter, base.wavePhaseJitter ?? 0),
+    dotTextures: textures,
+    dotTextureOrder: oneOf(raw.dotTextureOrder, DOT_TEXTURE_ORDERS, base.dotTextureOrder ?? DEFAULT_PARTICLE.dotTextureOrder),
+    dotRotation: oneOf(raw.dotRotation, DOT_ROTATIONS, base.dotRotation ?? DEFAULT_PARTICLE.dotRotation)
   };
 }
+var FUZZY_AMPLITUDE = 0.12;
+var NOMINAL_MS_PER_PX = 2;
+var RIBBON_SUB = 4;
+function chainDamp(damp, k) {
+  return Math.min(damp, 1 / (1 + 0.8 * Math.sqrt(Math.max(0, k))) ** 2);
+}
+function addPolygonArea(pts, rect, out, weight = 1) {
+  const n = pts.length >> 1;
+  if (n < 3) return;
+  let y0 = Infinity;
+  let y1 = -Infinity;
+  for (let i = 1; i < pts.length; i += 2) {
+    if (pts[i] < y0) y0 = pts[i];
+    if (pts[i] > y1) y1 = pts[i];
+  }
+  const r0 = Math.max(0, Math.floor(y0) - rect.y);
+  const r1 = Math.min(rect.height - 1, Math.floor(y1) - rect.y);
+  const xs = [];
+  const w = weight / RIBBON_SUB;
+  for (let row = r0; row <= r1; row++) {
+    const base = row * rect.width;
+    for (let sub = 0; sub < RIBBON_SUB; sub++) {
+      const y = rect.y + row + (sub + 0.5) / RIBBON_SUB;
+      xs.length = 0;
+      for (let i = 0, j = n - 1; i < n; j = i++) {
+        const yi = pts[i * 2 + 1];
+        const yj = pts[j * 2 + 1];
+        if (yi <= y !== yj <= y) xs.push(pts[i * 2] + (y - yi) / (yj - yi) * (pts[j * 2] - pts[i * 2]));
+      }
+      if (xs.length < 2) continue;
+      xs.sort((a, b) => a - b);
+      for (let k = 0; k + 1 < xs.length; k += 2) {
+        const a = Math.max(rect.x, xs[k]);
+        const b = Math.min(rect.x + rect.width, xs[k + 1]);
+        if (!(b > a)) continue;
+        for (let px = Math.floor(a); px < b; px++) {
+          const cover = Math.min(b, px + 1) - Math.max(a, px);
+          if (cover > 0) out[base + px - rect.x] += cover * w;
+        }
+      }
+    }
+  }
+}
 function curl(x, y, seed) {
   const n = (u, v) => {
     const x0 = Math.floor(u);
@@ -1032,12 +1158,51 @@ function curl(x, y, seed) {
 }
 var ParticleStroke = class extends MarkStroke {
   sets;
+  /** Ribbon pairs per copy: particles in their order around the pen (non-flow kinds). */
+  orders;
   s;
   spawn = 0;
+  /** Textured dots drawn so far, per copy (sequence order, random picks). */
+  dots;
+  /** Ribbon fill: the area each pixel has had so far this stroke (telescoped into the coverage). */
+  filled = /* @__PURE__ */ new Map();
+  pts = [];
   constructor(brush, options) {
     super(brush, options);
     this.s = brush.particle;
     this.sets = this.copies.map(() => []);
+    this.orders = this.copies.map(() => []);
+    this.dots = this.copies.map(() => 0);
+  }
+  /** Strand kinds: a chain of masses behind each particle. */
+  get strands() {
+    return this.s.kind === "string" || this.s.kind === "elastic" || this.s.kind === "fuzzy";
+  }
+  newParticle(x, y, ox, oy, k, phase, i, copy) {
+    const s = this.s;
+    const fuzzy = s.kind === "fuzzy";
+    const jitter = fuzzy ? 1 : s.wavePhaseJitter;
+    return {
+      x,
+      y,
+      vx: 0,
+      vy: 0,
+      ox,
+      oy,
+      k,
+      phase,
+      age: 0,
+      run: 0,
+      bead: 0,
+      alive: true,
+      wavePhase: jitter > 0 ? jitter * Math.PI * 2 * rand01(this.seed, i, 43 + copy) : 0,
+      waveScale: fuzzy ? 0.6 + 0.8 * rand01(this.seed, i, 47 + copy) : 1,
+      dx: x,
+      dy: y,
+      px: NaN,
+      py: NaN,
+      fade: 1
+    };
   }
   init(copy, d) {
     const s = this.s;
@@ -1048,18 +1213,28 @@ var ParticleStroke = class extends MarkStroke {
       const a = rand01(this.seed, i, 5 + copy) * Math.PI * 2;
       const ox = Math.cos(a) * r;
       const oy = Math.sin(a) * r;
-      const p = { x: d.x + ox, y: d.y + oy, vx: 0, vy: 0, ox, oy, k: 0.6 + 0.8 * rand01(this.seed, i, 7), phase: a, age: 0, run: 0, bead: 0, alive: true };
-      if (s.kind === "string") p.strand = Array.from({ length: 6 }, () => ({ x: d.x + ox, y: d.y + oy, vx: 0, vy: 0 }));
+      const p = this.newParticle(d.x + ox, d.y + oy, ox, oy, 0.6 + 0.8 * rand01(this.seed, i, 7), a, i, copy);
+      if (this.strands) p.strand = Array.from({ length: 6 }, () => ({ x: d.x + ox, y: d.y + oy, vx: 0, vy: 0 }));
       if (s.kind === "orbit") {
         p.ox = Math.max(1, r + size * 0.15);
         p.oy = 0;
       }
       list.push(p);
     }
+    this.orders[copy] = list.map((_, i) => i).sort((i, j) => list[i].phase - list[j].phase || i - j);
+  }
+  /** The sideways wave of particle `p` at pen dab `d` (px along the normal to the pen's direction). */
+  wave(p, d, size) {
+    const s = this.s;
+    const amp = s.kind === "fuzzy" ? Math.max(FUZZY_AMPLITUDE, s.waveAmplitude) : s.waveAmplitude;
+    if (!(amp > 0)) return 0;
+    const ms = d.time ?? d.travel * NOMINAL_MS_PER_PX;
+    const phase = 2 * Math.PI * d.travel / (s.waveLength * p.waveScale) - s.waveSpeed * 0.025 * ms + p.wavePhase;
+    return amp * size * Math.sin(phase);
   }
   advance(copy, d, rects) {
     const s = this.s;
-    const list = this.sets[copy];
+    let list = this.sets[copy];
     if (d.index === 0 && !list.length) this.init(copy, d);
     const size = Math.max(1, d.radius * 2);
     const markR = Math.max(0.5, size * s.size / 2);
@@ -1068,6 +1243,8 @@ var ParticleStroke = class extends MarkStroke {
     const g = s.gravity * 0.15;
     const op = d.opacity;
     const al = Math.max(0.05, d.alpha);
+    const nx = Math.sin(d.direction);
+    const ny = Math.cos(d.direction);
     if (s.kind === "flow") {
       this.spawn += s.count / 8;
       while (this.spawn >= 1) {
@@ -1075,15 +1252,13 @@ var ParticleStroke = class extends MarkStroke {
         const i = this.dabCount + list.length * 31 + Math.floor(d.index);
         const a = rand01(this.seed, i, 11 + copy) * Math.PI * 2;
         const r = rand01(this.seed, i, 13 + copy) * s.spread * size * 0.5;
-        list.push({ x: d.x + Math.cos(a) * r, y: d.y + Math.sin(a) * r, vx: 0, vy: 0, ox: 0, oy: 0, k: 1, phase: a, age: 0, run: 0, bead: 0, alive: true });
+        list.push(this.newParticle(d.x + Math.cos(a) * r, d.y + Math.sin(a) * r, 0, 0, 1, a, i, copy));
       }
     }
     const lifeSteps = 8 + 120 * s.life;
     for (let i = 0; i < list.length; i++) {
       const p = list[i];
       if (!p.alive) continue;
-      const px = p.x;
-      const py = p.y;
       switch (s.kind) {
         case "spring": {
           p.vx = (p.vx + (d.x + p.ox - p.x) * k * p.k) * damp;
@@ -1092,13 +1267,38 @@ var ParticleStroke = class extends MarkStroke {
           p.y += p.vy;
           break;
         }
-        case "string": {
+        case "string":
+        case "fuzzy": {
           const strand = p.strand;
+          const dm = s.kind === "fuzzy" ? chainDamp(damp, k * p.k) : damp;
           let ax = d.x + p.ox;
           let ay = d.y + p.oy;
           for (const m of strand) {
-            m.vx = (m.vx + (ax - m.x) * k * p.k + 0) * damp;
-            m.vy = (m.vy + (ay - m.y) * k * p.k + g) * damp;
+            m.vx = (m.vx + (ax - m.x) * k * p.k + 0) * dm;
+            m.vy = (m.vy + (ay - m.y) * k * p.k + g) * dm;
+            m.x += m.vx;
+            m.y += m.vy;
+            ax = m.x;
+            ay = m.y;
+          }
+          p.x = strand[strand.length - 1].x;
+          p.y = strand[strand.length - 1].y;
+          break;
+        }
+        case "elastic": {
+          const strand = p.strand;
+          const rest = size * 0.12;
+          const ke = Math.min(0.9, (0.1 + 0.6 * s.stiffness) * p.k);
+          const dm = chainDamp(damp, ke);
+          let ax = d.x + p.ox;
+          let ay = d.y + p.oy;
+          for (const m of strand) {
+            const ex = ax - m.x;
+            const ey = ay - m.y;
+            const len = Math.hypot(ex, ey);
+            const pull = len > rest ? (len - rest) / len : 0;
+            m.vx = (m.vx + ex * pull * ke) * dm;
+            m.vy = (m.vy + ey * pull * ke + g) * dm;
             m.x += m.vx;
             m.y += m.vy;
             ax = m.x;
@@ -1127,11 +1327,21 @@ var ParticleStroke = class extends MarkStroke {
           break;
         }
       }
+      const w = this.wave(p, d, size);
+      const qx = w ? p.x + nx * w : p.x;
+      const qy = w ? p.y + ny * w : p.y;
+      const px = p.dx;
+      const py = p.dy;
+      p.px = p.dx;
+      p.py = p.dy;
+      p.dx = qx;
+      p.dy = qy;
       const fade = s.kind === "flow" ? 1 - p.age / lifeSteps : 1;
-      const moved = Math.hypot(p.x - px, p.y - py);
+      p.fade = fade;
+      const moved = Math.hypot(qx - px, qy - py);
       if (d.index === 0 && s.kind !== "flow") continue;
-      if (s.render === "dot") this.mark(p.x, p.y, markR * fade, al * fade, op, d.pressure, rects);
-      else if (s.render === "line") this.segment(px, py, p.x, p.y, markR * fade, al * fade, op, d.pressure, rects);
+      if (s.render === "dot") this.dot(copy, qx, qy, qx - px, qy - py, markR * fade, al * fade, op, d, rects);
+      else if (s.render === "line" || s.render === "ribbon") this.segment(px, py, qx, qy, markR * fade, al * fade, op, d.pressure, rects);
       else {
         p.run += moved;
         const gap = Math.max(markR * 2, size * (0.05 + s.interval));
@@ -1139,13 +1349,101 @@ var ParticleStroke = class extends MarkStroke {
           p.run -= gap;
           p.bead++;
           const t = moved > 0 ? 1 - p.run / Math.max(moved, 1e-6) : 1;
-          const bx = px + (p.x - px) * Math.min(1, Math.max(0, t));
-          const by = py + (p.y - py) * Math.min(1, Math.max(0, t));
-          this.mark(bx, by, markR * (0.7 + 0.6 * (p.bead % 3 / 2)) * fade, al * fade, op, d.pressure, rects);
+          const bx = px + (qx - px) * Math.min(1, Math.max(0, t));
+          const by = py + (qy - py) * Math.min(1, Math.max(0, t));
+          this.dot(copy, bx, by, qx - px, qy - py, markR * (0.7 + 0.6 * (p.bead % 3 / 2)) * fade, al * fade, op, d, rects);
         }
       }
     }
-    if (s.kind === "flow" && list.length > 512) this.sets[copy] = list.filter((p) => p.alive);
+    if (s.render === "ribbon" && !(d.index === 0 && s.kind !== "flow")) this.ribbon(copy, list, op, al, d, rects);
+    if (s.kind === "flow" && list.length > 512) {
+      list = list.filter((p) => p.alive);
+      this.sets[copy] = list;
+    }
+  }
+  /** A dot (or bead): round, or a textured stamp turned by the particle's motion (mx, my), at random or to the tip angle. */
+  dot(copy, x, y, mx, my, r, alpha, opacity, d, rects) {
+    const s = this.s;
+    const textures = s.dotTextures;
+    if (!textures.length) return this.mark(x, y, r, alpha, opacity, d.pressure, rects);
+    const n = this.dots[copy]++;
+    const pick = s.dotTextureOrder === "random" ? Math.min(textures.length - 1, Math.floor(rand01(this.seed, n, 31 + copy) * textures.length)) : n % textures.length;
+    const rotation = s.dotRotation === "random" ? rand01(this.seed, n, 37 + copy) * Math.PI * 2 : s.dotRotation === "follow" ? mx || my ? Math.atan2(my, mx) : -d.direction : -this.brush.tip.angle * Math.PI / 180;
+    this.stamp(x, y, r, textures[pick], rotation, this.seed + n * 2654435761 >>> 0, alpha, opacity, d.pressure, rects);
+  }
+  /**
+   * Ribbon fill for one step: the band between each pair of joined particles, from where they
+   * were drawn last step to where they are drawn now. Bands of one step, and of consecutive steps,
+   * share edges exactly, so the fill has no seams; it is telescoped into the coverage
+   * (`telescope`), so it does not build up at the joins.
+   */
+  ribbon(copy, list, opacity, alpha, d, rects) {
+    const s = this.s;
+    if (!(s.ribbonFill > 0)) return;
+    const live = (p) => !!p && p.alive && !Number.isNaN(p.px);
+    let order;
+    if (s.kind === "flow") order = list.filter(live);
+    else order = this.orders[copy].map((i) => list[i]).filter(live);
+    if (order.length < 2) return;
+    const pairs = [];
+    if (s.ribbonPairs === "first-last") pairs.push([order[0], order[order.length - 1]]);
+    else for (let i = 0; i + 1 < order.length; i++) pairs.push([order[i], order[i + 1]]);
+    const pts = this.pts;
+    const ceil = Math.min(1, opacity * s.ribbonFill);
+    for (const [a, b] of pairs) {
+      pts.length = 0;
+      pts.push(a.px, a.py, a.dx, a.dy, b.dx, b.dy, b.px, b.py);
+      let x0 = Infinity;
+      let y0 = Infinity;
+      let x1 = -Infinity;
+      let y1 = -Infinity;
+      for (let i = 0; i < 8; i += 2) {
+        x0 = Math.min(x0, pts[i]);
+        x1 = Math.max(x1, pts[i]);
+        y0 = Math.min(y0, pts[i + 1]);
+        y1 = Math.max(y1, pts[i + 1]);
+      }
+      const rect = { x: Math.floor(x0), y: Math.floor(y0), width: Math.floor(x1) - Math.floor(x0) + 1, height: Math.floor(y1) - Math.floor(y0) + 1 };
+      const area = this.scratch(rect.width * rect.height);
+      addPolygonArea(pts, rect, area, Math.min(a.fade, b.fade) * alpha);
+      if (this.telescope(rect, area)) this.lay(rect, area, ceil, d.pressure, (a.dx + b.dx) / 2, (a.dy + b.dy) / 2, rects);
+    }
+  }
+  /**
+   * Turns the area newly filled over `rect` into coverage to lay towards the fill's ceiling: the
+   * share of what was left unfilled, so after any number of bands (in any grouping) a pixel's
+   * coverage is the ceiling times the area filled there. False when nothing was added.
+   */
+  telescope(rect, area) {
+    let any = false;
+    for (let yy = 0, k = 0; yy < rect.height; yy++) {
+      const gy = rect.y + yy;
+      const ty = Math.floor(gy / TILE);
+      let t;
+      let tx = NaN;
+      for (let xx = 0; xx < rect.width; xx++, k++) {
+        const add = area[k];
+        if (!(add > 0)) continue;
+        const gx = rect.x + xx;
+        const ntx = Math.floor(gx / TILE);
+        if (ntx !== tx || !t) {
+          tx = ntx;
+          const key = tileKey(tx, ty);
+          t = this.filled.get(key);
+          if (!t) {
+            t = new Float32Array(TILE * TILE);
+            this.filled.set(key, t);
+          }
+        }
+        const ti = (gy - ty * TILE) * TILE + (gx - tx * TILE);
+        const before = t[ti];
+        const after = Math.min(1, before + add);
+        t[ti] = after;
+        area[k] = before < 1 ? (after - before) / (1 - before) : 0;
+        any = true;
+      }
+    }
+    return any;
   }
 };
 var DEFAULT_BRISTLE = { count: 32, stiffness: 0.5, splay: 0.5, thickness: 0.06, load: 0.6, jitter: 0.4 };
@@ -1897,6 +2195,66 @@ var BUILTIN_BRUSHES = [
     particle: { kind: "flow", render: "dot", count: 8, size: 0.06, spread: 0.7, speed: 0.9, life: 0.3 },
     light: { amount: 1 }
   }),
+  builtin({
+    // Silk of light: strands dragged behind the pen on slow waves, the bands between them filled.
+    id: "light-ribbon",
+    name: "Light ribbon",
+    category: "light",
+    engine: "particle",
+    tip: { size: 80, hardness: 0.8, opacity: 0.9, flow: 1, smoothing: 0.35, pressureSize: false, pressureOpacity: false },
+    particle: { kind: "string", render: "ribbon", count: 5, size: 0.015, spread: 1, stiffness: 0.05, damping: 0.3, ribbonFill: 0.45, waveAmplitude: 0.25, waveLength: 220, wavePhaseJitter: 0.25 },
+    light: { amount: 0.8 }
+  }),
+  builtin({
+    // Flames: short-lived bands thrown off the pen, rising and curling in the flow.
+    id: "flame-ribbon",
+    name: "Flame ribbon",
+    category: "light",
+    engine: "particle",
+    tip: { size: 50, hardness: 0.6, opacity: 0.85, flow: 1, smoothing: 0.25, pressureSize: true, pressureOpacity: false },
+    particle: { kind: "flow", render: "ribbon", count: 4, size: 0.012, spread: 0.5, speed: 0.6, gravity: -0.6, life: 0.2, ribbonFill: 0.5 },
+    light: { amount: 1 }
+  }),
+  builtin({
+    // A neon tube that lags and snaps back, with a slow shimmer.
+    id: "neon-strand",
+    name: "Neon strand",
+    category: "light",
+    engine: "particle",
+    tip: { size: 40, hardness: 0.9, opacity: 1, flow: 1, smoothing: 0.4, pressureSize: false, pressureOpacity: false },
+    particle: { kind: "elastic", render: "line", count: 3, size: 0.05, spread: 0.25, stiffness: 0.6, damping: 0.3, waveAmplitude: 0.06, waveLength: 120 },
+    light: { amount: 1 }
+  }),
+  builtin({
+    // Smoke lit from within: thin bands thrown into a slow, rising flow.
+    id: "smoke-ribbon",
+    name: "Smoke ribbon",
+    category: "light",
+    engine: "particle",
+    tip: { size: 70, hardness: 0.3, opacity: 0.45, flow: 1, smoothing: 0.3, pressureSize: true, pressureOpacity: false },
+    particle: { kind: "flow", render: "ribbon", count: 3, size: 5e-3, spread: 0.5, speed: 0.15, gravity: -0.15, life: 0.35, ribbonFill: 0.25, waveAmplitude: 0.1, waveLength: 140, wavePhaseJitter: 1 },
+    light: { amount: 0.3 }
+  }),
+  builtin({
+    // Out-of-focus lights: soft discs and rings spaced along springy paths.
+    id: "bokeh-dots",
+    name: "Bokeh dots",
+    category: "light",
+    engine: "particle",
+    tip: { size: 80, hardness: 0.7, opacity: 0.6, flow: 1, smoothing: 0.3, pressureSize: true, pressureOpacity: false },
+    particle: { kind: "spring", render: "sequence", count: 3, size: 0.3, spread: 1, stiffness: 0.15, damping: 0.4, interval: 1, dotTextures: ["dot", "dot", "ring"], dotTextureOrder: "random" },
+    light: { amount: 0.9 }
+  }),
+  builtin({
+    // Sparks: twinkles and stars thrown into the flow, spaced along it.
+    id: "twinkle-sparks",
+    name: "Twinkle sparks",
+    category: "light",
+    engine: "particle",
+    tip: { size: 50, hardness: 0.8, opacity: 1, flow: 1, smoothing: 0.1, pressureSize: true, pressureOpacity: false },
+    particle: { kind: "flow", render: "sequence", count: 3, size: 0.25, spread: 0.8, speed: 0.9, life: 0.35, interval: 0.6, dotTextures: ["sparkle", "sparkle", "star"], dotTextureOrder: "random", dotRotation: "random" },
+    light: { amount: 1 }
+  }),
   builtin({
     id: "glow-wash",
     name: "Glow wash",
@@ -1908,6 +2266,16 @@ var BUILTIN_BRUSHES = [
     wet: { tool: "paint", water: 0.65, pigment: 0.75, body: 0, rewet: 0.1 },
     light: { amount: 0.7 }
   }),
+  builtin({
+    // Fluorescent ink: a transparent chisel marker that multiplies (text under it stays dark) and
+    // glows a little brighter than the paper. Turn the layer's spill off (set_light_spill radius 0).
+    id: "highlighter",
+    name: "Highlighter",
+    category: "light",
+    tip: { size: 30, hardness: 0.85, spacing: 0.04, angle: 45, roundness: 0.35, opacity: 0.6, flow: 1, smoothing: 0.3, pressureSize: false, pressureOpacity: false, blend: "multiply" },
+    grain: 0.05,
+    light: { amount: 0.5 }
+  }),
   builtin({
     id: "sticker-stars",
     name: "Star stickers",
@@ -2070,8 +2438,13 @@ export {
   stickerAt,
   PARTICLE_KINDS,
   PARTICLE_RENDERS,
+  RIBBON_PAIRS,
+  DOT_TEXTURE_ORDERS,
+  DOT_ROTATIONS,
+  MAX_DOT_TEXTURES,
   DEFAULT_PARTICLE,
   normalizeParticle,
+  addPolygonArea,
   ParticleStroke,
   DEFAULT_BRISTLE,
   normalizeBristle,