@vectojs/core 0.2.4 → 0.2.6

package/dist/{chunk-P6MDWIEX.mjs → chunk-SL654OMF.mjs}

@@ -1,8 +1,10 @@
 import {
   LayoutWorkerManager
-} from "./chunk-B3Z3JEJH.mjs";
+} from "./chunk-STWPTWO4.mjs";
 
 // src/math/SpringPhysics.ts
+var MAX_FRAME_DT = 0.25;
+var MAX_STEP_DT = 1 / 120;
 var SpringPhysics = class {
   value;
   target;
@@ -22,11 +24,22 @@ var SpringPhysics = class {
       this.velocity = 0;
       return;
     }
-    const forceSpring = -this.stiffness * (this.value - this.target);
-    const forceDamping = -this.damping * this.velocity;
-    const acceleration = (forceSpring + forceDamping) / this.mass;
-    this.velocity += acceleration * dt;
-    this.value += this.velocity * dt;
+    if (!(dt > 0)) return;
+    let remaining = dt < MAX_FRAME_DT ? dt : MAX_FRAME_DT;
+    while (remaining > 0) {
+      const step = remaining < MAX_STEP_DT ? remaining : MAX_STEP_DT;
+      const forceSpring = -this.stiffness * (this.value - this.target);
+      const forceDamping = -this.damping * this.velocity;
+      const acceleration = (forceSpring + forceDamping) / this.mass;
+      this.velocity += acceleration * step;
+      this.value += this.velocity * step;
+      remaining -= step;
+      if (this.isAtRest()) {
+        this.value = this.target;
+        this.velocity = 0;
+        return;
+      }
+    }
   }
   isAtRest() {
     return Math.abs(this.value - this.target) < this.valEpsilon && Math.abs(this.velocity) < this.velEpsilon;
@@ -117,6 +130,14 @@ var SpringDriver = class {
 };
 
 // src/tree/Entity.ts
+var ANIMATABLE_PROPS = /* @__PURE__ */ new Set([
+  "x",
+  "y",
+  "scaleX",
+  "scaleY",
+  "rotation",
+  "opacity"
+]);
 var VectoJSEvent = class {
   /** The event name. */
   type;
@@ -568,7 +589,12 @@ var Entity = class {
         const end = anim.target[key];
         if (typeof start === "number" && typeof end === "number") {
           const easeOut = progress * (2 - progress);
-          this[key] = start + (end - start) * easeOut;
+          const value = start + (end - start) * easeOut;
+          if (ANIMATABLE_PROPS.has(key)) {
+            this._applyAnimated(key, value);
+          } else {
+            this[key] = value;
+          }
         }
       }
       if (progress >= 1) {
@@ -619,6 +645,10 @@ var Entity = class {
    */
   destroy() {
     this.animations = [];
+    for (const driver of this._drivers.values()) {
+      this._settleDriver(driver);
+    }
+    this._drivers.clear();
     this.listeners.clear();
     this.captureListeners.clear();
     if (this.parent) {
@@ -989,6 +1019,8 @@ var MSDFTextEntity = class extends Entity {
   color;
   letterSpacing;
   lineHeight;
+  maxWidth;
+  maxHeight;
   text = "";
   lastRenderedSeqId = 0;
   rgbColorCache = /* @__PURE__ */ new Map();
@@ -1003,17 +1035,27 @@ var MSDFTextEntity = class extends Entity {
     this.color = options.color ?? "#ffffff";
     this.letterSpacing = options.letterSpacing ?? 0;
     this.lineHeight = options.lineHeight;
+    this.maxWidth = options.maxWidth ?? 1e3;
+    this.maxHeight = options.maxHeight ?? 1e3;
     this.setText(text);
   }
+  /** Change the wrap boundary and re-run layout for the current text. */
+  setMaxWidth(maxWidth) {
+    if (this.maxWidth === maxWidth) return;
+    this.maxWidth = maxWidth;
+    this.queueLayout();
+  }
   setText(text) {
     if (this.text === text && this.layoutResult) return;
     this.text = text;
+    this.queueLayout();
+  }
+  queueLayout() {
     LayoutWorkerManager.getInstance().queueLayout(this.id, this.text, {
       fontId: this.font.id,
       fontSize: this.fontSize,
-      maxWidth: 1e3,
-      // standard wrap boundary
-      maxHeight: 1e3,
+      maxWidth: this.maxWidth,
+      maxHeight: this.maxHeight,
       fontData: this.font.data,
       letterSpacing: this.letterSpacing,
       lineHeight: this.lineHeight,
@@ -1042,6 +1084,8 @@ var MSDFTextEntity = class extends Entity {
     if (scene && scene.pointRenderer && scene.glCanvas && canUsePointGlyphs) {
       scene.pointRenderer.setMSDFTexture(this.texture, this.font.distanceRange);
       const worldRot = Math.atan2(world.b, world.a);
+      let worldOpacity = this.opacity;
+      for (let p = this.parent; p; p = p.parent) worldOpacity *= p.opacity;
       const len2 = this.layoutResult.codePoints.length;
       for (let i = 0; i < len2; i++) {
         const code = this.layoutResult.codePoints[i];
@@ -1080,7 +1124,7 @@ var MSDFTextEntity = class extends Entity {
           ab.right / aw,
           v1,
           runColor,
-          this.opacity,
+          worldOpacity,
           worldRot
         );
       }

package/dist/{chunk-MCULB5VC.mjs → chunk-SSOP3F5F.mjs}

@@ -1,7 +1,7 @@
 import {
   ArabicShaper,
   BidiResolver
-} from "./chunk-B3Z3JEJH.mjs";
+} from "./chunk-STWPTWO4.mjs";
 
 // src/layout/LayoutEngine.ts
 function computeLineSegments(top, bottom, maxWidth, exclusions) {
@@ -79,6 +79,12 @@ var LayoutEngine = class {
     if (this.measurer) return this.measurer.measure(char, fontSize);
     return fontSize * 0.5;
   }
+  glyphKeyFor(grapheme, fontAtlas) {
+    if (fontAtlas[grapheme]) return grapheme;
+    const firstCodePoint = Array.from(grapheme)[0];
+    if (firstCodePoint && fontAtlas[firstCodePoint]) return firstCodePoint;
+    return grapheme;
+  }
   getGraphemes(word) {
     const cached = this.graphemeCache.get(word);
     if (cached) return cached;
@@ -158,25 +164,20 @@ var LayoutEngine = class {
           const rawEnd = visualEnd === shapedText.length ? paragraph.length : indexMap[visualEnd];
           const sourceIndex = offset + rawStart;
           const sourceLength = rawEnd - rawStart;
-          const baseChar = char[0];
+          const glyphKey = this.glyphKeyFor(char, fontAtlas);
           const level = levels[visualStart];
-          const hasGlyph = !!fontAtlas[char] || !!fontAtlas[baseChar];
+          const hasGlyph = !!fontAtlas[glyphKey];
           if (char.trim().length > 0 && !hasGlyph) {
             pFallback = true;
             fallbackToCanvas = true;
           }
-          const w = this.glyphWidth(baseChar, fontAtlas, fontSize);
-          const combining = [];
-          for (let cIdx = 1; cIdx < char.length; cIdx++) {
-            combining.push(char[cIdx]);
-          }
+          const w = this.glyphWidth(glyphKey, fontAtlas, fontSize);
           glyphs.push({
-            char: baseChar,
+            char,
             width: w,
             level,
             sourceIndex,
-            sourceLength,
-            combining: combining.length > 0 ? combining : void 0
+            sourceLength
           });
           width += w;
           shapedCharIdx += char.length;
@@ -280,28 +281,23 @@ var LayoutEngine = class {
           const rawEnd = visualEnd === shapedText.length ? paragraph.length : indexMap[visualEnd];
           const sourceIndex = offset + rawStart;
           const sourceLength = rawEnd - rawStart;
-          const baseChar = char[0];
+          const glyphKey = this.glyphKeyFor(char, fontAtlas);
           const level = levels[visualStart];
           const style = styleAt[offset + rawStart];
           const gfs = style?.fontSize ?? baseFontSize;
-          const hasGlyph = !!fontAtlas[char] || !!fontAtlas[baseChar];
+          const hasGlyph = !!fontAtlas[glyphKey];
           if (char.trim().length > 0 && !hasGlyph) {
             pFallback = true;
             fallbackToCanvas = true;
           }
-          const w = this.glyphWidth(baseChar, fontAtlas, gfs);
-          const combining = [];
-          for (let cIdx = 1; cIdx < char.length; cIdx++) {
-            combining.push(char[cIdx]);
-          }
+          const w = this.glyphWidth(glyphKey, fontAtlas, gfs);
           glyphs.push({
-            char: baseChar,
+            char,
             width: w,
             style,
             level,
             sourceIndex,
-            sourceLength,
-            combining: combining.length > 0 ? combining : void 0
+            sourceLength
           });
           width += w;
           shapedCharIdx += char.length;

package/dist/{chunk-B3Z3JEJH.mjs → chunk-STWPTWO4.mjs}

@@ -296,7 +296,7 @@ var BidiResolver = class _BidiResolver {
 };
 
 // src/layout/LayoutWorkerSource.ts
-var WORKER_SOURCE_STRING = '"use strict";(()=>{var k=new Map;function n(t){return typeof t=="number"&&Number.isFinite(t)}function H(t){return t.origin?t.origin===self.location.origin:!0}function M(t){if(!t||typeof t!="object")return!1;let e=t;return typeof e.id=="string"&&n(e.seqId)&&typeof e.text=="string"&&typeof e.fontId=="string"&&(e.fontData===void 0||typeof e.fontData=="object")&&n(e.maxWidth)&&n(e.maxHeight)&&n(e.fontSize)&&(e.lineHeight===void 0||n(e.lineHeight))&&(e.letterSpacing===void 0||n(e.letterSpacing))}self.onmessage=t=>{if(!H(t)||!M(t.data))return;let{id:e,seqId:F,text:q,fontId:d,fontData:f,maxWidth:y,maxHeight:I,fontSize:i,lineHeight:A,letterSpacing:D}=t.data;f&&k.set(d,f);let s=k.get(d);if(!s)return;let g=[],l=[],p=[],m=[],o=0,a=0,h=s.metrics?.ascender??.8,W=s.metrics?.descender??-.2,b=A??i*(h-W),x=Array.from(q);for(let c=0;c<x.length;c++){let u=x[c].codePointAt(0),S=(s.glyphs?.find(C=>C.unicode===u)?.advance??1)*i;o+S>y&&u===32&&(o=0,a++),g.push(u),l.push(o);let w=a*b+h*i;p.push(w),m.push(-256),o+=S+(D??0)}let r={id:e,seqId:F,width:Math.min(o,y),height:(a+1)*b,codePoints:new Uint32Array(g),xCoords:new Float32Array(l),yCoords:new Float32Array(p),packedStyles:new Uint32Array(m)};self.postMessage(r,[r.codePoints.buffer,r.xCoords.buffer,r.yCoords.buffer,r.packedStyles.buffer])};})();\n';
+var WORKER_SOURCE_STRING = '"use strict";(()=>{var C=new Map;function f(t){return typeof t=="number"&&Number.isFinite(t)}function U(t){return t.origin?t.origin===self.location.origin:!0}function j(t){if(!t||typeof t!="object")return!1;let e=t;return typeof e.id=="string"&&f(e.seqId)&&typeof e.text=="string"&&typeof e.fontId=="string"&&(e.fontData===void 0||typeof e.fontData=="object")&&f(e.maxWidth)&&f(e.maxHeight)&&f(e.fontSize)&&(e.lineHeight===void 0||f(e.lineHeight))&&(e.letterSpacing===void 0||f(e.letterSpacing))}self.onmessage=t=>{if(!U(t)||!j(t.data))return;let{id:e,seqId:D,text:L,fontId:k,fontData:S,maxWidth:H,maxHeight:z,fontSize:d,lineHeight:I,letterSpacing:M}=t.data;S&&C.set(k,S);let g=C.get(k);if(!g)return;let m=[],i=[],h=[],w=[],n=0,c=0,r=0,o=-1,p=g.metrics?.ascender??.8,R=g.metrics?.descender??-.2,b=I??d*(p-R),P=M??0,F=new Map;for(let s of g.glyphs??[])F.set(s.unicode,s.advance);let x=()=>{n>r&&(r=n),n=0,c++,o=-1},A=Array.from(L);for(let s=0;s<A.length;s++){let a=A[s].codePointAt(0);if(a===10){x();continue}let W=(F.get(a)??1)*d,q=a>=11904;if(q&&(o=-1),n+W>H&&n>0){if(a===32){x();continue}if(o>=0&&i[o]>0){let l=i[o];l>r&&(r=l),c++;let v=c*b+p*d;for(let y=o;y<i.length;y++)i[y]-=l,h[y]=v;n-=l}else x()}a===32?o=-1:o===-1&&!q&&(o=m.length),m.push(a),i.push(n),h.push(c*b+p*d),w.push(-256),n+=W+P}n>r&&(r=n);let u={id:e,seqId:D,width:r,height:(c+1)*b,codePoints:new Uint32Array(m),xCoords:new Float32Array(i),yCoords:new Float32Array(h),packedStyles:new Uint32Array(w)};self.postMessage(u,[u.codePoints.buffer,u.xCoords.buffer,u.yCoords.buffer,u.packedStyles.buffer])};})();\n';
 
 // src/layout/LayoutWorkerManager.ts
 var LayoutWorkerManager = class _LayoutWorkerManager {

package/dist/components/SplineEntity.d.ts

@@ -96,6 +96,11 @@ export declare class SplineEntity extends Entity {
     private bounds;
     private offscreen;
     private baked;
+    /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
+    private bakedWidth;
+    private bakedHeight;
+    /** Gradient strokes can't be baked to a solid-color bitmap; they render per-frame. */
+    private readonly containsGradient;
     /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
     private polylines;
     /**