embedded-react 0.3.0 → 0.4.1

package/src/embedded-react/svg-ops.js

@@ -22,16 +22,94 @@
 // shapes to path ops, bakes viewBox + <G> translate/scale into coordinates, and resolves inherited
 // paint. The opcodes below MUST stay in sync with er_scene.h.
 
-const VOP_SHAPE = 0;
-const VOP_MOVE = 1;
-const VOP_LINE = 2;
-const VOP_QUAD = 3;
-const VOP_CUBIC = 4;
-const VOP_ARC = 5;
-const VOP_CLOSE = 6;
+// Op-tape vocabulary — exported so the build-time SVG baker (assets/bake-svg.mjs) can reuse it without
+// duplicating the encoding (and without pulling its SVG-parser dependency into this runtime module).
+export const VOP_SHAPE = 0;
+export const VOP_MOVE = 1;
+export const VOP_LINE = 2;
+export const VOP_QUAD = 3;
+export const VOP_CUBIC = 4;
+export const VOP_ARC = 5;
+export const VOP_CLOSE = 6;
+
+export const CAP = {butt: 0, round: 1, square: 2};
+export const JOIN = {miter: 0, round: 1, bevel: 2};
+
+// Paint record width in the flat paint table: [fill, stroke, strokeWidth, miter, cap, join, fillRule,
+// fillGrad, strokeGrad]. fillGrad/strokeGrad are 1-based indices into the gradient table (0 = solid). MUST
+// match the bridge's VEC_PAINT_STRIDE (native_ui_bridge.c) and the AOT's paint emission.
+export const PAINT_STRIDE = 9;
+
+// Gradient table encoding — a gradient descriptor is { type, stops: [{color, offset}], ax, ay, bx, by, r }.
+// type 1 = linear (axis (ax,ay)->(bx,by)), 2 = radial (centre (ax,ay), radius r). The flat float record is
+// [type, stopCount, (color, offset) × GRAD_MAX_STOPS, ax, ay, bx, by, r]; MUST match the bridge's
+// VEC_GRAD_STRIDE and the engine's ER_VGRAD_MAX_STOPS.
+export const GRAD_MAX_STOPS = 8; // MUST match the engine's ER_VGRAD_MAX_STOPS (er_scene.h)
+export const GRAD_STRIDE = 2 + GRAD_MAX_STOPS * 2 + 5; // 23
+export const GRAD_LINEAR = 1;
+export const GRAD_RADIAL = 2;
+export const GRAD_CONIC = 3;
+
+/** Linearly interpolates two straight-alpha ARGB8888 colors, per channel. */
+function lerpArgb(c0, c1, t) {
+  const lp = sh => {
+    const a = (c0 >>> sh) & 0xff;
+    const b = (c1 >>> sh) & 0xff;
+    return Math.round(a + (b - a) * t) & 0xff;
+  };
+  return ((lp(24) << 24) | (lp(16) << 16) | (lp(8) << 8) | lp(0)) >>> 0;
+}
 
-const CAP = { butt: 0, round: 1, square: 2 };
-const JOIN = { miter: 0, round: 1, bevel: 2 };
+/** Gradient color at position t (stops ascending by offset; clamps to the endpoint colors). */
+function evalStopsAt(stops, t) {
+  if (!stops.length) return 0;
+  if (t <= stops[0].offset) return stops[0].color >>> 0;
+  const last = stops[stops.length - 1];
+  if (t >= last.offset) return last.color >>> 0;
+  for (let i = 0; i < stops.length - 1; i++) {
+    const a = stops[i];
+    const b = stops[i + 1];
+    if (t <= b.offset) {
+      const span = b.offset - a.offset;
+      return lerpArgb(
+        a.color >>> 0,
+        b.color >>> 0,
+        span > 0 ? (t - a.offset) / span : 0,
+      );
+    }
+  }
+  return last.color >>> 0;
+}
+
+/** Reduces a stop list to at most `max` entries, resampling evenly across the stop range when it's over. */
+function capStops(stops, max) {
+  if (stops.length <= max) return stops;
+  const lo = stops[0].offset;
+  const hi = stops[stops.length - 1].offset;
+  const out = [];
+  for (let i = 0; i < max; i++) {
+    const t = max === 1 ? lo : lo + (hi - lo) * (i / (max - 1));
+    out.push({color: evalStopsAt(stops, t), offset: t});
+  }
+  return out;
+}
+
+/** Encodes gradient descriptors into the flat float array NativeUI.setVectorOps takes (GRAD_STRIDE/gradient).
+ *  A gradient with more than GRAD_MAX_STOPS stops is resampled down (not truncated) so it still ramps right. */
+export function encodeVectorGradients(grads) {
+  const out = [];
+  if (!grads) return out;
+  for (const g of grads) {
+    const stops = capStops(g.stops || [], GRAD_MAX_STOPS);
+    out.push(g.type, stops.length);
+    for (let s = 0; s < GRAD_MAX_STOPS; s++) {
+      const st = stops[s];
+      out.push(st ? st.color >>> 0 : 0, st ? st.offset : 0);
+    }
+    out.push(g.ax || 0, g.ay || 0, g.bx || 0, g.by || 0, g.r || 0);
+  }
+  return out;
+}
 
 // Minimal named-color set (extend as needed); everything else goes through hex/rgb parsing.
 const NAMED = {
@@ -70,7 +148,10 @@ function parseColorString(c) {
   if (s in NAMED) return NAMED[s] >>> 0;
   if (s[0] === '#') {
     s = s.slice(1);
-    let r, g, b, a = 255;
+    let r,
+      g,
+      b,
+      a = 255;
     if (s.length === 3 || s.length === 4) {
       r = parseInt(s[0] + s[0], 16);
       g = parseInt(s[1] + s[1], 16);
@@ -89,7 +170,7 @@ function parseColorString(c) {
   if (s.startsWith('rgb')) {
     const m = s.match(/rgba?\(([^)]+)\)/);
     if (m) {
-      const p = m[1].split(',').map((x) => x.trim());
+      const p = m[1].split(',').map(x => x.trim());
       const r = parseInt(p[0], 10) || 0;
       const g = parseInt(p[1], 10) || 0;
       const b = parseInt(p[2], 10) || 0;
@@ -114,7 +195,7 @@ function tokenizePath(d) {
   let cur = null;
   while ((m = re.exec(d)) !== null) {
     if (m[1]) {
-      cur = { cmd: m[1], args: [] };
+      cur = {cmd: m[1], args: []};
       out.push(cur);
     } else if (cur) {
       cur.args.push(parseFloat(m[2]));
@@ -168,7 +249,12 @@ function arcToCubics(x0, y0, rx, ry, phiDeg, largeArc, sweep, x, y) {
     return a;
   };
   const theta1 = ang(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
-  let dtheta = ang((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry);
+  let dtheta = ang(
+    (x1p - cxp) / rx,
+    (y1p - cyp) / ry,
+    (-x1p - cxp) / rx,
+    (-y1p - cyp) / ry,
+  );
   if (!sweep && dtheta > 0) dtheta -= 2 * Math.PI;
   if (sweep && dtheta < 0) dtheta += 2 * Math.PI;
   const segs = Math.ceil(Math.abs(dtheta) / (Math.PI / 2));
@@ -191,7 +277,14 @@ function arcToCubics(x0, y0, rx, ry, phiDeg, largeArc, sweep, x, y) {
     const d1y = -rx * sinP * sin1 + ry * cosP * cos1;
     const d2x = -rx * cosP * sin2 - ry * sinP * cos2;
     const d2y = -rx * sinP * sin2 + ry * cosP * cos2;
-    out.push([px + t * d1x, py + t * d1y, e2x - t * d2x, e2y - t * d2y, e2x, e2y]);
+    out.push([
+      px + t * d1x,
+      py + t * d1y,
+      e2x - t * d2x,
+      e2y - t * d2y,
+      e2x,
+      e2y,
+    ]);
     px = e2x;
     py = e2y;
     th = th2;
@@ -219,8 +312,8 @@ export function parsePath(d) {
     const a = tk.args;
     const U = C.toUpperCase();
     let i = 0;
-    const rx = (v) => (rel ? cx + v : v);
-    const ry = (v) => (rel ? cy + v : v);
+    const rx = v => (rel ? cx + v : v);
+    const ry = v => (rel ? cy + v : v);
     if (U === 'M') {
       // First pair is moveto; later pairs are implicit linetos.
       cx = rx(a[i++]);
@@ -313,7 +406,8 @@ export function parsePath(d) {
         const ex = rx(a[i++]);
         const ey = ry(a[i++]);
         const cubics = arcToCubics(cx, cy, arx, ary, rot, laf, swf, ex, ey);
-        for (const c of cubics) ops.push(VOP_CUBIC, c[0], c[1], c[2], c[3], c[4], c[5]);
+        for (const c of cubics)
+          ops.push(VOP_CUBIC, c[0], c[1], c[2], c[3], c[4], c[5]);
         cx = ex;
         cy = ey;
       }
@@ -339,7 +433,19 @@ function circleOps(p) {
   const cy = num(p.cy, 0);
   const r = num(p.r, 0);
   // Start at angle 0, full circular arc.
-  return [VOP_MOVE, cx + r, cy, VOP_ARC, cx, cy, r, 0, 2 * Math.PI, 0, VOP_CLOSE];
+  return [
+    VOP_MOVE,
+    cx + r,
+    cy,
+    VOP_ARC,
+    cx,
+    cy,
+    r,
+    0,
+    2 * Math.PI,
+    0,
+    VOP_CLOSE,
+  ];
 }
 
 function ellipseOps(p) {
@@ -357,11 +463,32 @@ function rectOps(p) {
   const y = num(p.y, 0);
   const w = num(p.width, 0);
   const h = num(p.height, 0);
-  return [VOP_MOVE, x, y, VOP_LINE, x + w, y, VOP_LINE, x + w, y + h, VOP_LINE, x, y + h, VOP_CLOSE];
+  return [
+    VOP_MOVE,
+    x,
+    y,
+    VOP_LINE,
+    x + w,
+    y,
+    VOP_LINE,
+    x + w,
+    y + h,
+    VOP_LINE,
+    x,
+    y + h,
+    VOP_CLOSE,
+  ];
 }
 
 function lineOps(p) {
-  return [VOP_MOVE, num(p.x1, 0), num(p.y1, 0), VOP_LINE, num(p.x2, 0), num(p.y2, 0)];
+  return [
+    VOP_MOVE,
+    num(p.x1, 0),
+    num(p.y1, 0),
+    VOP_LINE,
+    num(p.x2, 0),
+    num(p.y2, 0),
+  ];
 }
 
 // Arc convenience: angles in DEGREES, clockwise from 12 o'clock (the gauge/dial convention). Emits a
@@ -371,7 +498,18 @@ function arcOpsCW(cx, cy, r, a0deg, a1deg) {
   // The engine's arc angle runs from +X (cos/sin); top-clockwise => subtract 90°.
   const a0 = ((a0deg - 90) * Math.PI) / 180;
   const a1 = ((a1deg - 90) * Math.PI) / 180;
-  return [VOP_MOVE, cx + r * Math.cos(a0), cy + r * Math.sin(a0), VOP_ARC, cx, cy, r, a0, a1, 0];
+  return [
+    VOP_MOVE,
+    cx + r * Math.cos(a0),
+    cy + r * Math.sin(a0),
+    VOP_ARC,
+    cx,
+    cy,
+    r,
+    a0,
+    a1,
+    0,
+  ];
 }
 
 // --- Imperative shapes -> op-tape (the fast path; no JSX, no React) -------------------------------
@@ -401,7 +539,7 @@ export function shapesToVector(shapes) {
   for (let si = 0; si < shapes.length; si++) {
     const s = shapes[si];
     const opStart = ops.length;
-    const paintIndex = paints.length / 7;
+    const paintIndex = paints.length / PAINT_STRIDE;
     ops.push(VOP_SHAPE, paintIndex);
     if (s.arc) {
       const cx = s.arc[0];
@@ -409,18 +547,55 @@ export function shapesToVector(shapes) {
       const r = s.arc[2];
       const a0 = ((s.arc[3] - 90) * Math.PI) / 180;
       const a1 = ((s.arc[4] - 90) * Math.PI) / 180;
-      ops.push(VOP_MOVE, cx + r * Math.cos(a0), cy + r * Math.sin(a0), VOP_ARC, cx, cy, r, a0, a1, 0);
+      ops.push(
+        VOP_MOVE,
+        cx + r * Math.cos(a0),
+        cy + r * Math.sin(a0),
+        VOP_ARC,
+        cx,
+        cy,
+        r,
+        a0,
+        a1,
+        0,
+      );
     } else if (s.circle) {
       const cx = s.circle[0];
       const cy = s.circle[1];
       const r = s.circle[2];
-      ops.push(VOP_MOVE, cx + r, cy, VOP_ARC, cx, cy, r, 0, 2 * Math.PI, 0, VOP_CLOSE);
+      ops.push(
+        VOP_MOVE,
+        cx + r,
+        cy,
+        VOP_ARC,
+        cx,
+        cy,
+        r,
+        0,
+        2 * Math.PI,
+        0,
+        VOP_CLOSE,
+      );
     } else if (s.rect) {
       const x = s.rect[0];
       const y = s.rect[1];
       const w = s.rect[2];
       const h = s.rect[3];
-      ops.push(VOP_MOVE, x, y, VOP_LINE, x + w, y, VOP_LINE, x + w, y + h, VOP_LINE, x, y + h, VOP_CLOSE);
+      ops.push(
+        VOP_MOVE,
+        x,
+        y,
+        VOP_LINE,
+        x + w,
+        y,
+        VOP_LINE,
+        x + w,
+        y + h,
+        VOP_LINE,
+        x,
+        y + h,
+        VOP_CLOSE,
+      );
     } else if (s.line) {
       ops.push(VOP_MOVE, s.line[0], s.line[1], VOP_LINE, s.line[2], s.line[3]);
     } else if (s.path) {
@@ -438,10 +613,12 @@ export function shapesToVector(shapes) {
       num(s.miter, 4),
       CAP[s.cap] ?? 0,
       JOIN[s.join] ?? 0,
-      s.fillRule === 'evenodd' ? 1 : 0
+      s.fillRule === 'evenodd' ? 1 : 0,
+      0, // fill_grad
+      0, // stroke_grad — the imperative path has no gradients
     );
   }
-  return { ops, paints };
+  return {ops, paints};
 }
 
 // --- Flatten an <Svg> subtree --------------------------------------------------------------------
@@ -457,12 +634,13 @@ const PAINT_DEFAULT = {
 };
 
 function mergePaint(base, props) {
-  const out = { ...base };
-  for (const k of Object.keys(PAINT_DEFAULT)) if (props[k] != null) out[k] = props[k];
+  const out = {...base};
+  for (const k of Object.keys(PAINT_DEFAULT))
+    if (props[k] != null) out[k] = props[k];
   return out;
 }
 
-/** Maps the resolved paint to the 7-number paint-table record [fill,stroke,w,miter,cap,join,rule]. */
+/** Maps the resolved paint to the PAINT_STRIDE-number record [fill,stroke,w,miter,cap,join,rule,fillGrad]. */
 function paintRecord(paint, scale) {
   return [
     parseColor(paint.fill),
@@ -472,6 +650,8 @@ function paintRecord(paint, scale) {
     CAP[paint.strokeLinecap] ?? 0,
     JOIN[paint.strokeLinejoin] ?? 0,
     paint.fillRule === 'evenodd' ? 1 : 0,
+    0, // fill_grad: inline <Svg> children don't reference gradients (baked <Svg source> does)
+    0, // stroke_grad
   ];
 }
 
@@ -479,8 +659,8 @@ function paintRecord(paint, scale) {
 function transformOps(ops, T) {
   const out = [];
   let i = 0;
-  const ax = (v) => v * T.sx + T.tx;
-  const ay = (v) => v * T.sy + T.ty;
+  const ax = v => v * T.sx + T.tx;
+  const ay = v => v * T.sy + T.ty;
   while (i < ops.length) {
     const op = ops[i++];
     out.push(op);
@@ -489,10 +669,24 @@ function transformOps(ops, T) {
     } else if (op === VOP_QUAD) {
       out.push(ax(ops[i++]), ay(ops[i++]), ax(ops[i++]), ay(ops[i++]));
     } else if (op === VOP_CUBIC) {
-      out.push(ax(ops[i++]), ay(ops[i++]), ax(ops[i++]), ay(ops[i++]), ax(ops[i++]), ay(ops[i++]));
+      out.push(
+        ax(ops[i++]),
+        ay(ops[i++]),
+        ax(ops[i++]),
+        ay(ops[i++]),
+        ax(ops[i++]),
+        ay(ops[i++]),
+      );
     } else if (op === VOP_ARC) {
       // center + radius scale (uniform scale assumed for arcs)
-      out.push(ax(ops[i++]), ay(ops[i++]), ops[i++] * T.sx, ops[i++], ops[i++], ops[i++]);
+      out.push(
+        ax(ops[i++]),
+        ay(ops[i++]),
+        ops[i++] * T.sx,
+        ops[i++],
+        ops[i++],
+        ops[i++],
+      );
     }
     // VOP_CLOSE has no args
   }
@@ -518,13 +712,16 @@ export function flattenSvg(props) {
   const paints = [];
 
   // Root transform from viewBox vs width/height.
-  let root = { sx: 1, sy: 1, tx: 0, ty: 0 };
+  let root = {sx: 1, sy: 1, tx: 0, ty: 0};
   if (props.viewBox && props.width && props.height) {
-    const vb = String(props.viewBox).trim().split(/[\s,]+/).map(parseFloat);
+    const vb = String(props.viewBox)
+      .trim()
+      .split(/[\s,]+/)
+      .map(parseFloat);
     if (vb.length === 4 && vb[2] > 0 && vb[3] > 0) {
       const sx = num(props.width, vb[2]) / vb[2];
       const sy = num(props.height, vb[3]) / vb[3];
-      root = { sx, sy, tx: -vb[0] * sx, ty: -vb[1] * sy };
+      root = {sx, sy, tx: -vb[0] * sx, ty: -vb[1] * sy};
     }
   }
 
@@ -538,7 +735,12 @@ export function flattenSvg(props) {
         const s = num(p.scale, 1);
         const gx = num(p.x ?? p.translateX, 0);
         const gy = num(p.y ?? p.translateY, 0);
-        const childT = { sx: T.sx * s, sy: T.sy * s, tx: gx * T.sx + T.tx, ty: gy * T.sy + T.ty };
+        const childT = {
+          sx: T.sx * s,
+          sy: T.sy * s,
+          tx: gx * T.sx + T.tx,
+          ty: gy * T.sy + T.ty,
+        };
         walk(p.children, merged, childT);
         continue;
       }
@@ -549,10 +751,16 @@ export function flattenSvg(props) {
       else if (c.type === 'Rect') shapeOps = rectOps(p);
       else if (c.type === 'Line') shapeOps = lineOps(p);
       else if (c.type === 'Arc')
-        shapeOps = arcOpsCW(num(p.cx, 0), num(p.cy, 0), num(p.r, 0), num(p.startAngle, 0), num(p.endAngle, 0));
+        shapeOps = arcOpsCW(
+          num(p.cx, 0),
+          num(p.cy, 0),
+          num(p.r, 0),
+          num(p.startAngle, 0),
+          num(p.endAngle, 0),
+        );
       if (!shapeOps || shapeOps.length === 0) continue;
 
-      const paintIndex = paints.length / 7;
+      const paintIndex = paints.length / PAINT_STRIDE;
       const scale = (T.sx + T.sy) / 2; // stroke-width scale (uniform assumed)
       paints.push(...paintRecord(merged, scale));
       ops.push(VOP_SHAPE, paintIndex, ...transformOps(shapeOps, T));
@@ -560,5 +768,125 @@ export function flattenSvg(props) {
   };
 
   walk(props.children, PAINT_DEFAULT, root);
-  return { ops, paints };
+  return {ops, paints};
+}
+
+// --- Imported SVG artifacts (<Svg source>) -------------------------------------------------------
+
+/** Scales a full op-tape (with SHAPE headers) by (sx, sy): coordinates only, paint indices untouched. */
+function scaleTape(ops, sx, sy) {
+  const out = [];
+  let i = 0;
+  while (i < ops.length) {
+    const op = ops[i++];
+    out.push(op);
+    if (op === VOP_SHAPE)
+      out.push(ops[i++]); // paint index — copy, do not scale
+    else if (op === VOP_MOVE || op === VOP_LINE)
+      out.push(ops[i++] * sx, ops[i++] * sy);
+    else if (op === VOP_QUAD)
+      out.push(ops[i++] * sx, ops[i++] * sy, ops[i++] * sx, ops[i++] * sy);
+    else if (op === VOP_CUBIC)
+      out.push(
+        ops[i++] * sx,
+        ops[i++] * sy,
+        ops[i++] * sx,
+        ops[i++] * sy,
+        ops[i++] * sx,
+        ops[i++] * sy,
+      );
+    else if (op === VOP_ARC)
+      out.push(
+        ops[i++] * sx,
+        ops[i++] * sy,
+        ops[i++] * sx,
+        ops[i++],
+        ops[i++],
+        ops[i++],
+      );
+    // VOP_CLOSE has no args.
+  }
+  return out;
+}
+
+/**
+ * Scales an imported vector artifact ({ops, paints, width, height} from the .svg baker) from its intrinsic
+ * size to a target box, also scaling stroke widths. Returns the original arrays untouched when no scaling
+ * is needed (the common <Svg source> case where the box equals the intrinsic size).
+ */
+export function scaleVectorArtifact(art, targetW, targetH) {
+  const sx = art.width ? targetW / art.width : 1;
+  const sy = art.height ? targetH / art.height : 1;
+  const grads = art.gradients || [];
+  if (sx === 1 && sy === 1)
+    return {ops: art.ops, paints: art.paints, gradients: grads};
+  const sw = Math.sqrt(Math.abs(sx * sy)) || 1; // uniform stroke-width / radius scale
+  const paints = art.paints.slice();
+  for (let k = 2; k < paints.length; k += PAINT_STRIDE) paints[k] *= sw; // index 2 of each record = strokeWidth
+  // Gradient geometry lives in the same coordinate space as the path, so it scales with it (radius uniformly).
+  const gradients = grads.map(g => ({
+    ...g,
+    ax: (g.ax || 0) * sx,
+    ay: (g.ay || 0) * sy,
+    bx: (g.bx || 0) * sx,
+    by: (g.by || 0) * sy,
+    // Radial r is a length (scales); conic r is a start angle (invariant under uniform scale) — don't scale it.
+    r: g.type === GRAD_CONIC ? g.r || 0 : (g.r || 0) * sw,
+  }));
+  return {ops: scaleTape(art.ops, sx, sy), paints, gradients};
+}
+
+// --- Bridge-cap diagnostics ----------------------------------------------------------------------
+
+let _warnedVecOps = false;
+let _warnedVecPaints = false;
+let _warnedVecGrads = false;
+
+/**
+ * Warns (once per kind) when an <Svg>'s compiled geometry exceeds the native bridge's caps and will be
+ * SILENTLY TRUNCATED. The bridge (native_ui_bridge.c) copies the op-tape into a fixed buffer and caps the
+ * paint table; past the cap, geometry/shapes are dropped. The engine has its own pool diagnostics (on
+ * stderr, debug builds) for what happens further in; this surfaces the JS->engine boundary truncation in
+ * the developer's console. Pass the live caps from NativeUI.maxVectorOps / maxVectorPaints / maxVectorGrads
+ * (undefined on an older bridge => no-op).
+ *
+ * @param {number} opsLen     Op-tape length (flat float count).
+ * @param {number} paintsLen  Paint-table length (PAINT_STRIDE numbers per shape).
+ * @param {number} maxOps     Bridge op-tape cap (NativeUI.maxVectorOps).
+ * @param {number} maxPaints  Bridge paint cap, in SHAPES (NativeUI.maxVectorPaints).
+ * @param {number} [gradsLen] Gradient count (number of gradients referenced by the shapes).
+ * @param {number} [maxGrads] Bridge gradient cap (NativeUI.maxVectorGrads).
+ */
+export function warnVectorCaps(
+  opsLen,
+  paintsLen,
+  maxOps,
+  maxPaints,
+  gradsLen,
+  maxGrads,
+) {
+  if (!_warnedVecOps && maxOps > 0 && opsLen > maxOps) {
+    _warnedVecOps = true;
+    console.warn(
+      `embedded-react: an <Svg> op-tape is too long (${opsLen} > ${maxOps} floats) and will be truncated — ` +
+        `the shape gets cut off. Simplify the path (fewer/coarser curves) or split it across <Svg> nodes; ` +
+        `raising the limit needs VEC_BRIDGE_MAX_OPS + ERUI_VECTOR_TAPE_MAX.`,
+    );
+  }
+  const shapes = (paintsLen / PAINT_STRIDE) | 0;
+  if (!_warnedVecPaints && maxPaints > 0 && shapes > maxPaints) {
+    _warnedVecPaints = true;
+    console.warn(
+      `embedded-react: an <Svg> has ${shapes} shapes (> ${maxPaints}) — the extra shapes won't render. ` +
+        `Split them across multiple <Svg> nodes; raising the limit needs VEC_BRIDGE_MAX_PAINTS + ERUI_VECTOR_PAINTS_MAX.`,
+    );
+  }
+  if (!_warnedVecGrads && maxGrads > 0 && gradsLen > maxGrads) {
+    _warnedVecGrads = true;
+    console.warn(
+      `embedded-react: an <Svg> references ${gradsLen} gradients (> ${maxGrads}) — the extra gradients are ` +
+        `dropped and shapes that use them fall back to solid fills/strokes. Reuse fewer distinct gradients across ` +
+        `shapes; raising the limit needs VEC_BRIDGE_MAX_GRADS + ERUI_VECTOR_GRADS_MAX.`,
+    );
+  }
 }

package/src/embedded-react/usePersistentState.js

@@ -22,7 +22,7 @@
 //
 // Values must be JSON-serializable (numbers, strings, booleans, plain objects/arrays). The simulator
 // resets the persisted state when you press R (manual reload) or restart it.
-import { useState, useCallback } from 'react';
+import {useState, useCallback} from 'react';
 
 /**
  * Drop-in useState that persists across simulator reloads, keyed by a stable string.
@@ -48,8 +48,8 @@ export function usePersistentState(key, initial) {
   });
 
   const set = useCallback(
-    (next) => {
-      setValue((prev) => {
+    next => {
+      setValue(prev => {
         const v = typeof next === 'function' ? next(prev) : next;
         const store = globalThis.__erPersist;
         if (store) {