@pixerate/editor 0.248.0 → 0.250.0

package/dist/{chunk-5GLYUSNT.js → chunk-NOHJP5TK.js}

@@ -5,7 +5,7 @@ import {
   moveAnchorHandle,
   subpathSegment,
   subpathSegmentCount
-} from "./chunk-Q2HA52V4.js";
+} from "./chunk-KDLBJ6QR.js";
 import {
   segmentPoint
 } from "./chunk-WEIK3UYB.js";

package/dist/{chunk-XNRBMYNB.js → chunk-NTRAVM2I.js}

@@ -18,7 +18,7 @@ import {
   unionBounds,
   vectorGradientPoints,
   widthProfileAt
-} from "./chunk-Q2HA52V4.js";
+} from "./chunk-KDLBJ6QR.js";
 import {
   segmentLength,
   segmentParamAtLength,

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

@@ -1,3 +1,14 @@
+import {
+  STAMP_KINDS,
+  describeStickerRef,
+  editorStampOf,
+  normalizeStickerRef,
+  stampCoverage,
+  stickerIdFor
+} from "./chunk-WKH5ZAUA.js";
+import {
+  StickerError
+} from "./chunk-SZTI6EER.js";
 import {
   CoverageMap,
   DEFAULT_BLENDER,
@@ -11,16 +22,22 @@ import {
   TileMedium,
   dabRect,
   grainCatch,
-  hash2,
   normalizeBlender,
   normalizeBrush,
   normalizeMixer,
   normalizeSmudge,
-  rand01,
-  randSigned,
   rasterizeDab,
   readPaintSource
-} from "./chunk-2PBZBRP5.js";
+} from "./chunk-D5KGAO4Z.js";
+import {
+  hash2,
+  rand01,
+  randSigned
+} from "./chunk-4D6KP5BV.js";
+import {
+  decodePng,
+  parseDataUrl
+} from "./chunk-OTTT5N3K.js";
 import {
   TILE,
   TiledSurface,
@@ -586,14 +603,129 @@ function toStrokePoint(p) {
   return { x: p.x, y: p.y, pressure: pressureOf(p), ...typeof p.t === "number" ? { t: p.t } : {} };
 }
 
+// src/paint-editor/sticker-art.ts
+var STICKER_ART_SIZE = 256;
+var defaultStickerRasterizer = async (asset, size) => {
+  if (asset.kind === "image") {
+    const parsed = parseDataUrl(asset.url);
+    if (parsed && parsed.mime === "image/png") {
+      const png = decodePng(parsed.bytes);
+      return { width: png.width, height: png.height, data: new Uint8ClampedArray(png.data) };
+    }
+  }
+  const g = globalThis;
+  if (!g.createImageBitmap || !g.OffscreenCanvas) {
+    throw new StickerError("unsupported_format", `This environment can't draw ${asset.kind === "svg" ? "SVG" : "non-PNG"} sticker art; pass rasterizeSticker in the paint editor's options (or use a provider that offers png).`);
+  }
+  const blob = asset.kind === "svg" ? new Blob([asset.svg], { type: "image/svg+xml" }) : await (await g.fetch(asset.url)).blob();
+  const bitmap = await g.createImageBitmap(blob);
+  const scale = size / Math.max(bitmap.width, bitmap.height, 1);
+  const w = Math.max(1, Math.round(bitmap.width * scale));
+  const h = Math.max(1, Math.round(bitmap.height * scale));
+  const canvas = new g.OffscreenCanvas(w, h);
+  const ctx = canvas.getContext("2d");
+  ctx.drawImage(bitmap, 0, 0, w, h);
+  const img = ctx.getImageData(0, 0, w, h);
+  return { width: w, height: h, data: img.data };
+};
+var StickerArtCache = class {
+  entries = /* @__PURE__ */ new Map();
+  /** The art for `ref` when it has loaded (editor stamps never need any). */
+  get = (ref) => {
+    const e = this.entries.get(ref);
+    return e?.status === "ready" ? e.art : void 0;
+  };
+  /** `ready`, `loading`, `failed` (with the reason) or `none` (never asked for). Editor stamps are always `ready`. */
+  status(ref) {
+    if (editorStampOf(ref)) return { status: "ready" };
+    const e = this.entries.get(ref);
+    if (!e) return { status: "none" };
+    return e.status === "failed" ? { status: "failed", error: e.error } : { status: e.status };
+  }
+  /**
+   * Loads and rasterises `ref` from `provider` once (later calls share the load). Unknown refs
+   * reject with the closest known ones; failures are kept so they are reported, and retried on
+   * the next call.
+   */
+  ensure(provider, ref, rasterize) {
+    if (editorStampOf(ref)) return Promise.resolve(null);
+    const e = this.entries.get(ref);
+    if (e?.status === "ready") return Promise.resolve(e.art);
+    if (e?.status === "loading") return e.promise;
+    const promise = (async () => {
+      const d = await describeStickerRef(provider, ref);
+      const id = stickerIdFor(provider, ref);
+      const max = provider.capabilities.maxSize ?? STICKER_ART_SIZE;
+      const size = Math.min(STICKER_ART_SIZE, max);
+      const asset = await provider.load(id, d.formats.includes("png") ? { format: "png", size } : { format: d.formats[0] ?? "svg", size });
+      const px = await rasterize(asset, size);
+      if (!(px.width > 0 && px.height > 0) || px.data.length !== px.width * px.height * 4) throw new StickerError("load_failed", `The art for "${ref}" came back empty or the wrong size.`);
+      return { ...px, tintable: d.tintable };
+    })();
+    this.entries.set(ref, { status: "loading", promise });
+    return promise.then(
+      (art) => {
+        this.entries.set(ref, { status: "ready", art });
+        return art;
+      },
+      (err) => {
+        const message = err instanceof Error ? err.message : String(err);
+        this.entries.set(ref, { status: "failed", error: message });
+        throw err;
+      }
+    );
+  }
+  /** Forgets every load (a new provider). */
+  clear() {
+    this.entries.clear();
+  }
+};
+function sampleArt(art, x, y, out) {
+  const { width: w, height: h, data } = art;
+  const fx = x - 0.5;
+  const fy = y - 0.5;
+  const x0 = Math.floor(fx);
+  const y0 = Math.floor(fy);
+  const tx = fx - x0;
+  const ty = fy - y0;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let a = 0;
+  for (let k = 0; k < 4; k++) {
+    const xx = x0 + (k & 1);
+    const yy = y0 + (k >> 1);
+    if (xx < 0 || yy < 0 || xx >= w || yy >= h) continue;
+    const wgt = (k & 1 ? tx : 1 - tx) * (k >> 1 ? ty : 1 - ty);
+    const i = (yy * w + xx) * 4;
+    const al = data[i + 3] * wgt;
+    r += data[i] * al;
+    g += data[i + 1] * al;
+    b += data[i + 2] * al;
+    a += al;
+  }
+  out[0] = a > 0 ? r / a / 255 : 0;
+  out[1] = a > 0 ? g / a / 255 : 0;
+  out[2] = a > 0 ? b / a / 255 : 0;
+  out[3] = a / 255;
+  return out;
+}
+
 // src/paint-editor/stickers.ts
-var STAMP_KINDS = ["dot", "star", "heart", "leaf", "flower", "confetti", "splat", "sparkle", "ring"];
-var DEFAULT_STICKER = { stamps: ["star"], density: 0.4, sizeJitter: 0.4, rotationJitter: 1, scatter: 0.5, colorJitter: 0.2 };
+var MAX_STICKER_STAMPS = 16;
+var DEFAULT_STICKER = { stamps: ["editor:star"], density: 0.4, sizeJitter: 0.4, rotationJitter: 1, scatter: 0.5, colorJitter: 0.2 };
 var unit2 = (v, d) => typeof v === "number" && Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : d;
 function normalizeStickerSettings(raw = {}, base = DEFAULT_STICKER) {
-  const stamps = Array.isArray(raw.stamps) ? raw.stamps.filter((s) => STAMP_KINDS.includes(s)) : base.stamps;
+  const refs = (list) => list.flatMap((s) => {
+    try {
+      return [normalizeStickerRef(s)];
+    } catch {
+      return [];
+    }
+  });
+  const stamps = Array.isArray(raw.stamps) ? refs(raw.stamps) : refs(base.stamps);
   return {
-    stamps: stamps.length ? [...new Set(stamps)] : [...base.stamps],
+    stamps: stamps.length ? [...new Set(stamps)].slice(0, MAX_STICKER_STAMPS) : refs(base.stamps.length ? base.stamps : DEFAULT_STICKER.stamps),
     density: unit2(raw.density, base.density),
     sizeJitter: unit2(raw.sizeJitter, base.sizeJitter),
     rotationJitter: unit2(raw.rotationJitter, base.rotationJitter),
@@ -601,59 +733,6 @@ function normalizeStickerSettings(raw = {}, base = DEFAULT_STICKER) {
     colorJitter: unit2(raw.colorJitter, base.colorJitter)
   };
 }
-function stampCoverage(kind, u, v, t) {
-  const r = Math.hypot(u, v);
-  const a = Math.atan2(v, u);
-  const edge = (d) => Math.min(1, Math.max(0, d * 24 + 0.5));
-  switch (kind) {
-    case "dot":
-      return edge(0.95 - r);
-    case "ring":
-      return edge(Math.min(0.95 - r, r - 0.6));
-    case "star": {
-      const f = (a + Math.PI / 2) * 5 / (2 * Math.PI) % 1;
-      const notch = Math.min(f < 0 ? f + 1 : f, 1 - (f < 0 ? f + 1 : f)) * 2;
-      return edge(0.95 - 0.55 * notch - r);
-    }
-    case "sparkle": {
-      const q = Math.pow(Math.abs(u) / 0.95, 0.6) + Math.pow(Math.abs(v) / 0.95, 0.6);
-      return edge((1 - q) * 0.4);
-    }
-    case "heart": {
-      const x = u * 1.1;
-      const y = -v * 1.1 + 0.15;
-      const q = x * x + y * y - 0.55;
-      return edge(-(q * q * q - x * x * y * y * y) * 3);
-    }
-    case "leaf": {
-      const w = 0.42 * Math.sqrt(Math.max(0, 1 - u * u));
-      const inside = edge(w - Math.abs(v + 0.15 * u * u));
-      const rib = Math.abs(v + 0.15 * u * u) < 0.03 && Math.abs(u) < 0.85 ? 0.65 : 1;
-      return inside * rib;
-    }
-    case "flower": {
-      const petals = 0.6 + 0.35 * Math.abs(Math.cos(2.5 * a));
-      const body = edge(petals - r);
-      return r < 0.22 ? Math.max(body, 1) * 0.85 : body;
-    }
-    case "confetti": {
-      return edge(Math.min(0.9 - Math.abs(u), 0.35 - Math.abs(v)));
-    }
-    case "splat": {
-      let rr = 0.55;
-      for (let k = 1; k <= 3; k++) rr += 0.08 * Math.sin(a * (k + 2) + hash2(k, 1, t) * 6.28) / k;
-      let c = edge(rr - r);
-      for (let k = 0; k < 4; k++) {
-        const ang = hash2(k, 7, t) * Math.PI * 2;
-        const dist = 0.72 + 0.2 * hash2(k, 9, t);
-        const dx = u - Math.cos(ang) * dist;
-        const dy = v - Math.sin(ang) * dist;
-        c = Math.max(c, edge(0.08 + 0.06 * hash2(k, 11, t) - Math.hypot(dx, dy)));
-      }
-      return c;
-    }
-  }
-}
 function hexRgb(hex) {
   const n = parseInt(hex.slice(1, 7), 16);
   return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
@@ -664,7 +743,22 @@ function stickerRect(s) {
   const y0 = Math.floor(s.y - r);
   return { x: x0, y: y0, width: Math.ceil(s.x + r) - x0, height: Math.ceil(s.y + r) - y0 };
 }
-function drawSticker(medium, s) {
+function stickerStamp(s) {
+  if (s.ref) {
+    try {
+      return editorStampOf(s.ref);
+    } catch {
+      return null;
+    }
+  }
+  return s.stamp && STAMP_KINDS.includes(s.stamp) ? s.stamp : null;
+}
+function drawSticker(medium, s, art) {
+  const kind = stickerStamp(s);
+  if (!kind) {
+    const a2 = art?.(s.ref);
+    return a2 ? drawArtSticker(medium, s, a2) : stickerRect(s);
+  }
   const rect = stickerRect(s);
   const n = rect.width * rect.height;
   const cov = new Float32Array(n);
@@ -682,7 +776,7 @@ function drawSticker(medium, s) {
       const v = (-dx * sa + dy * ca) / rad;
       if (u < -1.05 || u > 1.05 || v < -1.05 || v > 1.05) continue;
       let c = 0;
-      for (let k = 0; k < 4; k++) c += stampCoverage(s.stamp, u + ((k & 1) - 0.5) / rad / 2, v + ((k >> 1) - 0.5) / rad / 2, s.seed);
+      for (let k = 0; k < 4; k++) c += stampCoverage(kind, u + ((k & 1) - 0.5) / rad / 2, v + ((k >> 1) - 0.5) / rad / 2, s.seed);
       c /= 4;
       if (c <= 0) continue;
       cov[p] = c;
@@ -695,6 +789,35 @@ function drawSticker(medium, s) {
   medium.deposit(rect, cov, s.opacity, [r, g, b], null, field);
   return rect;
 }
+function drawArtSticker(medium, s, art) {
+  const rect = stickerRect(s);
+  const n = rect.width * rect.height;
+  const cov = new Float32Array(n);
+  const field = new Float32Array(n * 3);
+  const a = s.rotation * Math.PI / 180;
+  const ca = Math.cos(a);
+  const sa = Math.sin(a);
+  const scale = Math.max(art.width, art.height) / s.size;
+  const [r, g, b] = hexRgb(s.color);
+  const px = [0, 0, 0, 0];
+  for (let yy = 0, p = 0; yy < rect.height; yy++) {
+    for (let xx = 0; xx < rect.width; xx++, p++) {
+      const dx = rect.x + xx + 0.5 - s.x;
+      const dy = rect.y + yy + 0.5 - s.y;
+      const ax = (dx * ca + dy * sa) * scale + art.width / 2;
+      const ay = (-dx * sa + dy * ca) * scale + art.height / 2;
+      if (ax < -1 || ay < -1 || ax > art.width + 1 || ay > art.height + 1) continue;
+      sampleArt(art, ax, ay, px);
+      if (!(px[3] > 0)) continue;
+      cov[p] = px[3];
+      field[p * 3] = art.tintable ? r : px[0];
+      field[p * 3 + 1] = art.tintable ? g : px[1];
+      field[p * 3 + 2] = art.tintable ? b : px[2];
+    }
+  }
+  medium.deposit(rect, cov, s.opacity, [r, g, b], null, field);
+  return rect;
+}
 function jitterColor(hex, amount, seed, i) {
   const [r, g, b] = hexRgb(hex);
   const lch = oklabToOklch(rgbToOklab({ r, g, b, a: 1 }));
@@ -730,6 +853,8 @@ var StickerSpray = class {
   init;
   dabCount = 0;
   stickers = [];
+  /** Refs the spray picked but could not draw because their art had not loaded. */
+  skipped = /* @__PURE__ */ new Set();
   smoother;
   walkers;
   copies;
@@ -776,9 +901,17 @@ var StickerSpray = class {
       this.next++;
       return;
     }
+    const ref = st.stamps[Math.floor(rand01(seed, i, 57) * st.stamps.length)] ?? "editor:dot";
+    const stamp = stickerStamp({ ref });
+    if (!stamp && !this.init.art?.(ref)) {
+      this.skipped.add(ref);
+      this.next++;
+      return;
+    }
     const sticker = {
       id: `st${this.next++}`,
-      stamp: st.stamps[Math.floor(rand01(seed, i, 57) * st.stamps.length)] ?? "dot",
+      ref,
+      ...stamp ? { stamp } : {},
       x: Math.round((d.x + Math.cos(a) * dist) * 100) / 100,
       y: Math.round((d.y + Math.sin(a) * dist) * 100) / 100,
       size: Math.max(2, Math.round(size * 10) / 10),
@@ -788,7 +921,7 @@ var StickerSpray = class {
       seed: Math.floor(rand01(seed, i, 65) * 1e9)
     };
     this.stickers.push(sticker);
-    rects.push(drawSticker(this.medium, sticker));
+    rects.push(drawSticker(this.medium, sticker, this.init.art));
     this.dabCount++;
   }
   sampler;
@@ -807,16 +940,24 @@ var StickerSpray = class {
     return { color: "#" + s.rgb.map((c) => Math.round(Math.min(1, Math.max(0, c)) * 255).toString(16).padStart(2, "0")).join(""), alpha: s.alpha };
   }
 };
-function renderStickers(stickers, target) {
+function renderStickers(stickers, target, art) {
   const medium = new TileMedium(target, {});
-  for (const s of stickers) drawSticker(medium, s);
+  for (const s of stickers) drawSticker(medium, s, art);
 }
 function normalizeStickerUpdate(u) {
   const out = {};
+  if (u.ref !== void 0 && u.stamp !== void 0) throw new Error("Give ref or stamp, not both (stamp is the older name for an editor stamp).");
   if (u.stamp !== void 0) {
-    if (!STAMP_KINDS.includes(u.stamp)) throw new Error(`stamp ${JSON.stringify(u.stamp)} is not a stamp; use ${STAMP_KINDS.join(", ")}.`);
+    if (!STAMP_KINDS.includes(u.stamp)) throw new Error(`stamp ${JSON.stringify(u.stamp)} is not a stamp; use ${STAMP_KINDS.join(", ")}, or ref for any sticker (find_stickers).`);
+    out.ref = `editor:${u.stamp}`;
     out.stamp = u.stamp;
   }
+  if (u.ref !== void 0) {
+    out.ref = normalizeStickerRef(u.ref);
+    const stamp = stickerStamp({ ref: out.ref });
+    if (stamp) out.stamp = stamp;
+    else out.stamp = void 0;
+  }
   for (const k of ["x", "y"]) if (u[k] !== void 0) {
     if (!Number.isFinite(u[k])) throw new Error(`${k} must be a number of pixels.`);
     out[k] = u[k];
@@ -839,7 +980,7 @@ function normalizeStickerUpdate(u) {
   }
   return out;
 }
-function stickerSurface(stickers, base, dirty) {
+function stickerSurface(stickers, base, dirty, art) {
   const only = base && dirty ? new Set(dirty.flatMap((r) => tilesInRect(r).map(({ tx, ty }) => tileKey(tx, ty)))) : null;
   const live = /* @__PURE__ */ new Map();
   let scratch = null;
@@ -857,7 +998,7 @@ function stickerSurface(stickers, base, dirty) {
     }
   };
   const reaches = (s) => !only || tilesInRect(stickerRect(s)).some(({ tx, ty }) => only.has(tileKey(tx, ty)));
-  renderStickers(stickers.filter(reaches), target);
+  renderStickers(stickers.filter(reaches), target, art);
   const tiles = /* @__PURE__ */ new Map();
   if (only && base) {
     for (const [k, t] of base.tiles) if (!only.has(k)) tiles.set(k, t);
@@ -868,7 +1009,7 @@ function stickerSurface(stickers, base, dirty) {
   }
   return new TiledSurface(4, tiles, 0);
 }
-function stickerAt(stickers, x, y) {
+function stickerAt(stickers, x, y, art) {
   for (let i = stickers.length - 1; i >= 0; i--) {
     const s = stickers[i];
     const rad = s.size / 2;
@@ -878,7 +1019,16 @@ function stickerAt(stickers, x, y) {
     const u = (dx * Math.cos(a) + dy * Math.sin(a)) / rad;
     const v = (-dx * Math.sin(a) + dy * Math.cos(a)) / rad;
     if (Math.abs(u) > 1.05 || Math.abs(v) > 1.05) continue;
-    if (s.size < 16 || stampCoverage(s.stamp, u, v, s.seed) > 0.25) return s;
+    if (s.size < 16) return s;
+    const kind = stickerStamp(s);
+    if (kind) {
+      if (stampCoverage(kind, u, v, s.seed) > 0.25) return s;
+      continue;
+    }
+    const pic = art?.(s.ref);
+    if (!pic) return s;
+    const scale = Math.max(pic.width, pic.height) / 2;
+    if (sampleArt(pic, u * scale + pic.width / 2, v * scale + pic.height / 2, [0, 0, 0, 0])[3] > 0.25) return s;
   }
   return null;
 }
@@ -2425,11 +2575,15 @@ export {
   DryStroke,
   mixerTip,
   toStrokePoint,
-  STAMP_KINDS,
+  STICKER_ART_SIZE,
+  defaultStickerRasterizer,
+  StickerArtCache,
+  sampleArt,
+  MAX_STICKER_STAMPS,
   DEFAULT_STICKER,
   normalizeStickerSettings,
-  stampCoverage,
   stickerRect,
+  stickerStamp,
   drawSticker,
   StickerSpray,
   renderStickers,