@ev-ry/fx 0.1.0-rc.2 → 0.1.0-rc.4

package/src/raster-texture-mesh.js

@@ -1,35 +1,35 @@
-// Shared raster -> UV triangle grid for font masks and RGBA images. No color
-// averaging, alpha quantization or triangle merging. All filtering is on the GPU.
-export function rasterToTextureMesh(rgba,width,height,divisions,{filterRadius=.5,aspect=width/height}={}){
-  if(!Number.isInteger(width)||width<1||!Number.isInteger(height)||height<1||rgba.length!==width*height*4)throw RangeError('Invalid raster');
-  if(!Number.isInteger(divisions)||divisions<1||divisions>256)throw RangeError('Invalid divisions');
-  if(!Number.isFinite(filterRadius)||filterRadius<.5)throw RangeError('Invalid texture filter support');
-  if(!Number.isFinite(aspect)||aspect<=0)throw RangeError('Invalid grid aspect');
-  const rows=divisions,columns=Math.max(1,Math.round(aspect*rows));
-  const cw=width/columns,ch=height/rows,occupied=new Uint8Array(rows*columns);
-  // Conservative filter support: half a texel for bilinear filtering by default;
-  // image surfaces may request the wider footprint used by minified mipmaps.
-  // A thin line or isolated pixel cannot be lost to sparse point sampling.
-  for(let y=0;y<height;y++)for(let x=0;x<width;x++){
-    if(!rgba[(y*width+x)*4+3])continue;
-    const x0=Math.max(0,x-filterRadius),x1=Math.min(width,x+1+filterRadius),y0=Math.max(0,y-filterRadius),y1=Math.min(height,y+1+filterRadius);
-    for(let row=Math.floor(y0/ch);row<=Math.min(rows-1,Math.floor(y1/ch));row++)for(let col=Math.floor(x0/cw);col<=Math.min(columns-1,Math.floor(x1/cw));col++){
-      const at=row*columns+col;if(occupied[at]===3)continue;
-      const left=Math.max(0,x0/cw-col),right=Math.min(1,x1/cw-col),top=Math.max(0,y0/ch-row),bottom=Math.min(1,y1/ch-row);
-      const even=(row+col)%2===0;
-      if(even?left+top<=1:top<=right)occupied[at]|=1;
-      if(even?right+bottom>=1:bottom>=left)occupied[at]|=2;
-    }
-  }
-  let triangleCount=0;for(const bits of occupied)triangleCount+=(bits&1?1:0)+(bits&2?1:0);
-  const coordinates=new Float64Array(triangleCount*6),uvs=new Float32Array(triangleCount*6),coverage=new Uint8Array(triangleCount).fill(6);
-  let at=0;
-  for(let row=0;row<rows;row++)for(let col=0;col<columns;col++){
-    const left=col*cw,right=(col+1)*cw,top=row*ch,bottom=(row+1)*ch,even=(row+col)%2===0;
-    for(let side=0;side<2;side++)if(occupied[row*columns+col]&(1<<side)){
-      const points=even?[right,top,side?right:left,bottom,left,side?bottom:top]:[left,top,side?left:right,bottom,right,side?bottom:top];
-      coordinates.set(points,at);for(let i=0;i<6;i++)uvs[at+i]=points[i]/(i%2?height:width);at+=6;
-    }
-  }
-  return {coordinates,uvs,coverage,triangleCount};
-}
+// Shared raster -> UV triangle grid for font masks and RGBA images. No color
+// averaging, alpha quantization or triangle merging. All filtering is on the GPU.
+export function rasterToTextureMesh(rgba,width,height,divisions,{filterRadius=.5,aspect=width/height}={}){
+  if(!Number.isInteger(width)||width<1||!Number.isInteger(height)||height<1||rgba.length!==width*height*4)throw RangeError('Invalid raster');
+  if(!Number.isInteger(divisions)||divisions<1||divisions>256)throw RangeError('Invalid divisions');
+  if(!Number.isFinite(filterRadius)||filterRadius<.5)throw RangeError('Invalid texture filter support');
+  if(!Number.isFinite(aspect)||aspect<=0)throw RangeError('Invalid grid aspect');
+  const rows=divisions,columns=Math.max(1,Math.round(aspect*rows));
+  const cw=width/columns,ch=height/rows,occupied=new Uint8Array(rows*columns);
+  // Conservative filter support: half a texel for bilinear filtering by default;
+  // image surfaces may request the wider footprint used by minified mipmaps.
+  // A thin line or isolated pixel cannot be lost to sparse point sampling.
+  for(let y=0;y<height;y++)for(let x=0;x<width;x++){
+    if(!rgba[(y*width+x)*4+3])continue;
+    const x0=Math.max(0,x-filterRadius),x1=Math.min(width,x+1+filterRadius),y0=Math.max(0,y-filterRadius),y1=Math.min(height,y+1+filterRadius);
+    for(let row=Math.floor(y0/ch);row<=Math.min(rows-1,Math.floor(y1/ch));row++)for(let col=Math.floor(x0/cw);col<=Math.min(columns-1,Math.floor(x1/cw));col++){
+      const at=row*columns+col;if(occupied[at]===3)continue;
+      const left=Math.max(0,x0/cw-col),right=Math.min(1,x1/cw-col),top=Math.max(0,y0/ch-row),bottom=Math.min(1,y1/ch-row);
+      const even=(row+col)%2===0;
+      if(even?left+top<=1:top<=right)occupied[at]|=1;
+      if(even?right+bottom>=1:bottom>=left)occupied[at]|=2;
+    }
+  }
+  let triangleCount=0;for(const bits of occupied)triangleCount+=(bits&1?1:0)+(bits&2?1:0);
+  const coordinates=new Float64Array(triangleCount*6),uvs=new Float32Array(triangleCount*6),coverage=new Uint8Array(triangleCount).fill(6);
+  let at=0;
+  for(let row=0;row<rows;row++)for(let col=0;col<columns;col++){
+    const left=col*cw,right=(col+1)*cw,top=row*ch,bottom=(row+1)*ch,even=(row+col)%2===0;
+    for(let side=0;side<2;side++)if(occupied[row*columns+col]&(1<<side)){
+      const points=even?[right,top,side?right:left,bottom,left,side?bottom:top]:[left,top,side?left:right,bottom,right,side?bottom:top];
+      coordinates.set(points,at);for(let i=0;i<6;i++)uvs[at+i]=points[i]/(i%2?height:width);at+=6;
+    }
+  }
+  return {coordinates,uvs,coverage,triangleCount};
+}

package/src/render-owner.js

@@ -1,10 +1,10 @@
-import {createViewportRenderOwner} from './viewport-render-owner.js';
-
-// Shared GPU ownership, independent of component factories. Local 2D
-// presentation canvases preserve DOM stacking and clipping of each surface.
-export function createRenderOwner(THREE,document,{presentation='local',...options}={}){
-  if(presentation==='viewport')return createViewportRenderOwner(THREE,document,options);
-  if(presentation!=='local')throw TypeError('Invalid canvas presentation');
+import {createViewportRenderOwner} from './viewport-render-owner.js';
+
+// Shared GPU ownership, independent of component factories. Local 2D
+// presentation canvases preserve DOM stacking and clipping of each surface.
+export function createRenderOwner(THREE,document,{presentation='local',...options}={}){
+  if(presentation==='viewport')return createViewportRenderOwner(THREE,document,options);
+  if(presentation!=='local')throw TypeError('Invalid canvas presentation');
   if(!THREE?.WebGLRenderer||!document?.defaultView)throw TypeError('THREE and a window document required');
   let renderer=null,disposed=false,lost=false,w=0,h=0,dpr=0,copies=0,copyMs=0,renderMs=0,created=0;
   const leases=new Set(),handles=new Set();
@@ -29,11 +29,16 @@ export function createRenderOwner(THREE,document,{presentation='local',...option
     }
     render(scene,camera){
       ensure();if(this.dead)throw Error('Presentation disposed');
-      if(dpr!==this.ratio){renderer.setPixelRatio(this.ratio);dpr=this.ratio;}
-      if(w!==this.width||h!==this.height){renderer.setSize(this.width,this.height,false);w=this.width;h=this.height;}
+      // Keep a high-water scratch buffer: alternating differently sized leases
+      // must not reallocate the GPU drawing buffer on every text frame.
+      const pw=this.domElement.width,ph=this.domElement.height;
+      if(pw>w||ph>h){w=Math.max(w,pw);h=Math.max(h,ph);renderer.setSize(w,h,false);}
+      renderer.setScissorTest(false);renderer.clear(true,true,true);
+      renderer.setViewport(0,0,pw,ph);
+      renderer.setScissor(0,0,pw,ph);renderer.setScissorTest(true);
       const t=performance.now();renderer.render(scene,camera);renderMs+=performance.now()-t;
       const start=performance.now();this.context.clearRect(0,0,this.domElement.width,this.domElement.height);
-      this.context.drawImage(renderer.domElement,0,0);copyMs+=performance.now()-start;copies++;
+      this.context.drawImage(renderer.domElement,0,h-ph,pw,ph,0,0,pw,ph);copyMs+=performance.now()-start;copies++;
     }
     dispose(){if(this.dead)return;this.dead=true;leases.delete(this);this.domElement.width=this.domElement.height=0;}
     forceContextLoss(){} // A lease cannot destroy a peer's context.
@@ -44,8 +49,8 @@ export function createRenderOwner(THREE,document,{presentation='local',...option
       const control=factory(host,Namespace,options),destroy=control.destroy;
       handles.add(control);control.destroy=()=>{handles.delete(control);destroy();};return control;
   }
-  return {create,
-    refresh(){if(disposed)throw Error('Shared owner disposed');for(const control of handles)control.refresh?.();},
+  return {create,
+    refresh(){if(disposed)throw Error('Shared owner disposed');for(const control of handles)control.refresh?.();},
     stats:()=>({disposed,lost,contexts:renderer&&!disposed?1:0,created,controls:handles.size,leases:leases.size,copies,copyMs,renderMs,geometries:renderer?.info.memory.geometries||0}),
     destroy(){
       if(disposed)return;disposed=true;

package/src/runtime-font-engine.js

@@ -1,21 +1,21 @@
 import { documentDirection } from './text-direction.js';
 import { FontMeshEngine, shapeLine } from './font-mesh-engine.js';
 import { FontRasterizer } from './font-rasterizer.js';
-import { rasterToTriangles } from './mesh-generator-core.js';
-import { shapeNativeRuns, nativeRunMetrics } from './native-run-shaping.js';
-import { rasterToTextureMesh } from './raster-texture-mesh.js';
-import { normalizeTextMeshOptions, textDivisionsForSize } from './text-mesh-density.js';
+import { rasterToTriangles } from './mesh-generator-core.js';
+import { shapeNativeRuns, nativeRunMetrics } from './native-run-shaping.js';
+import { rasterToTextureMesh } from './raster-texture-mesh.js';
+import { normalizeTextMeshOptions, textDivisionsForSize } from './text-mesh-density.js';
 
 let familySequence = 0;
 
 export class RuntimeFontEngine extends FontMeshEngine {
-  constructor({ textRendering = 'coverage', divisions = textRendering === 'texture' ? 'auto' : 48, weight = 400, cacheLimit = 512, cacheBudgetBytes = 8 * 1024 * 1024, ...options } = {}) {
-    super(options);
-    normalizeTextMeshOptions({textRendering,divisions});
-    this.divisionMode=divisions;
-    this.divisions = divisions==='auto'?textDivisionsForSize(16):divisions;
-    this.displayFontSize=null;this.densityChanges=0;
-    this.textRendering=textRendering;
+  constructor({ textRendering = 'coverage', divisions = textRendering === 'texture' ? 'auto' : 48, weight = 400, cacheLimit = 512, cacheBudgetBytes = 8 * 1024 * 1024, ...options } = {}) {
+    super(options);
+    normalizeTextMeshOptions({textRendering,divisions});
+    this.divisionMode=divisions;
+    this.divisions = divisions==='auto'?textDivisionsForSize(16):divisions;
+    this.displayFontSize=null;this.densityChanges=0;
+    this.textRendering=textRendering;
     this.weight = weight;
     if (!Number.isInteger(cacheLimit) || cacheLimit < 0 || !Number.isFinite(cacheBudgetBytes) || cacheBudgetBytes < 0) throw new RangeError('Invalid cache limits');
     this.cacheLimit = cacheLimit;
@@ -57,26 +57,26 @@ export class RuntimeFontEngine extends FontMeshEngine {
     this.rasterizer?.cache.clear();
   }
 
-  setDivisions(value) {
-    normalizeTextMeshOptions({textRendering:this.textRendering,divisions:value});
-    this.divisionMode=value;
-    const next=value==='auto'?textDivisionsForSize(this.displayFontSize):value;
-    if (next === this.divisions) return;
-    this.divisions = next; this.clearMeshes();
-  }
-
-  setDisplayFontSize(pixels) {
-    if(this.divisionMode!=='auto'||!Number.isFinite(pixels)||pixels<=0)return false;
-    const next=textDivisionsForSize(pixels,this.displayFontSize===null?null:this.divisions);
-    this.displayFontSize=pixels;
-    if(next===this.divisions)return false;
-    this.divisions=next;this.densityChanges++;
-    // Keep source rasters and GPU texture identity. Replace glyph geometry lazily;
-    // the scene can display its previous records until preparation commits.
-    this.meshRevision=(this.meshRevision||0)+1;
-    this.lineCache.clear();this.cachedLayout=null;
-    return true;
-  }
+  setDivisions(value) {
+    normalizeTextMeshOptions({textRendering:this.textRendering,divisions:value});
+    this.divisionMode=value;
+    const next=value==='auto'?textDivisionsForSize(this.displayFontSize):value;
+    if (next === this.divisions) return;
+    this.divisions = next; this.clearMeshes();
+  }
+
+  setDisplayFontSize(pixels) {
+    if(this.divisionMode!=='auto'||!Number.isFinite(pixels)||pixels<=0)return false;
+    const next=textDivisionsForSize(pixels,this.displayFontSize===null?null:this.divisions);
+    this.displayFontSize=pixels;
+    if(next===this.divisions)return false;
+    this.divisions=next;this.densityChanges++;
+    // Keep source rasters and GPU texture identity. Replace glyph geometry lazily;
+    // the scene can display its previous records until preparation commits.
+    this.meshRevision=(this.meshRevision||0)+1;
+    this.lineCache.clear();this.cachedLayout=null;
+    return true;
+  }
 
   setInputLayout(direction, alignment, width = 0) {
     if (!['auto','ltr','rtl'].includes(direction) || !['left','right','auto'].includes(alignment) || !Number.isFinite(width) || width < 0) throw new TypeError('Invalid input layout');
@@ -140,22 +140,22 @@ export class RuntimeFontEngine extends FontMeshEngine {
   ensureGlyph(item) {
       const key = `${item.key}:${item.form}`;
       this.lastUsed.delete(key); this.lastUsed.set(key, ++this.clock);
-      const previous=this.records.get(key);
-      if (previous && (this.textRendering!=='texture'||previous.divisions===this.divisions)) return;
-      const started = performance.now();
-      const raster = previous?.rasterSurface?{...previous.rasterSurface,baseline:previous.rasterBaseline,advance:previous.advance,drawOffsetX:previous.drawOffsetX}:this.rasterizer.raster(item.rasterText, item.direction);
-      const textured=this.textRendering==='texture';
-      const meshData = textured?rasterToTextureMesh(raster.rgba,raster.width,raster.height,this.divisions):rasterToTriangles(raster.rgba, raster.width, raster.height, this.divisions, true, 10);
+      const previous=this.records.get(key);
+      if (previous && (this.textRendering!=='texture'||previous.divisions===this.divisions)) return;
+      const started = performance.now();
+      const raster = previous?.rasterSurface?{...previous.rasterSurface,baseline:previous.rasterBaseline,advance:previous.advance,drawOffsetX:previous.drawOffsetX}:this.rasterizer.raster(item.rasterText, item.direction);
+      const textured=this.textRendering==='texture';
+      const meshData = textured?rasterToTextureMesh(raster.rgba,raster.width,raster.height,this.divisions):rasterToTriangles(raster.rgba, raster.width, raster.height, this.divisions, true, 10);
       // Raster canvases can grow for unusual marks; align their real baseline
       // with the fixed font-wide origin used by selection and caret.
       const shift = this.fontMetrics.ascent - raster.baseline;
       if (shift) for (let i = 1; i < meshData.coordinates.length; i += 2) meshData.coordinates[i] += shift;
-      const byteLength = meshData.coordinates.byteLength + meshData.coverage.byteLength + (textured?meshData.uvs.byteLength+raster.rgba.byteLength:0);
-      this.cacheBytes += byteLength-(previous?.byteLength||0);
-      this.records.set(key, { cacheKey: key, byteLength, meshData, width: raster.width, height: this.fontMetrics.height,
-        baseline: this.fontMetrics.ascent, advance: raster.advance, drawOffsetX: raster.drawOffsetX,
-        ...(textured?{divisions:this.divisions,rasterBaseline:raster.baseline,rasterSurface:previous?.rasterSurface||{width:raster.width,height:raster.height,rgba:raster.rgba}}:{}) });
-      this.rasterizer.cache.clear(); // The optional texture is owned/accounted by its glyph record.
+      const byteLength = meshData.coordinates.byteLength + meshData.coverage.byteLength + (textured?meshData.uvs.byteLength+raster.rgba.byteLength:0);
+      this.cacheBytes += byteLength-(previous?.byteLength||0);
+      this.records.set(key, { cacheKey: key, byteLength, meshData, width: raster.width, height: this.fontMetrics.height,
+        baseline: this.fontMetrics.ascent, advance: raster.advance, drawOffsetX: raster.drawOffsetX,
+        ...(textured?{divisions:this.divisions,rasterBaseline:raster.baseline,rasterSurface:previous?.rasterSurface||{width:raster.width,height:raster.height,rgba:raster.rgba}}:{}) });
+      this.rasterizer.cache.clear(); // The optional texture is owned/accounted by its glyph record.
       this.generated++;
       this.generationMs += performance.now() - started;
   }

package/src/text-edit-effect.js

@@ -1,101 +1,101 @@
-import {TriangleEffect} from './triangle-effect.js';
-import {insertedRange,remapInsertionRange} from './insertion-range.js';
-import {textEditMotions} from './text-edit-motions.js';
-import {setTextMotionCharacterCenters} from './text-motion-character-centers.js';
-import {retainRasterTexture} from './raster-texture-material.js';
-import {ensureTextMotionContour} from './text-motion-contour.js';
-
-// Text-specific ranges and deletion ghosts adapt the shared triangle timeline.
-export class TextEditEffect extends TriangleEffect {
-  prepareCharacterCenters(view,characterRectangles){
-    const frame=textEditMotions[this.mode].characterFrame;
-    if(!textEditMotions[this.mode].characterCenters&&!frame&&!this.settings.bounceLines)return;
-    const floor=textEditMotions[this.mode].characterFloor||this.settings.bounceLines;
-    if(this.characterView===view&&this.characterVersion===view.version&&this.characterFloor===floor&&this.characterFrame===frame)return;
-    this.decorate(view);
-    setTextMotionCharacterCenters(this.THREE,view,characterRectangles?.()||[],{floor,frame});
-    this.characterView=view;this.characterVersion=view.version;this.characterFloor=floor;this.characterFrame=frame;
-  }
-  enqueue(before,after,inputType){
-    const range=insertedRange(before,after,inputType);if(!range)return false;
-    if(this.text!==null&&this.text!==before.text)this.cancel();
-    const delta=after.text.length-before.text.length,oldEnd=range.end-delta;
-    this.jobs=this.jobs.flatMap(job=>remapInsertionRange(job.range,range.start,oldEnd,delta).map(piece=>({...job,range:piece})));
-    this.jobs.push({id:++this.sequence,seed:this.randomSeed(),range,started:null,rectangles:[]});
-    this.text=after.text;this.runs++;return true;
-  }
-  bind(view,rectanglesForRange,em,now,characterRectangles){
-    // Retain only seeds/rectangles for the current layout, never a mesh/history.
-    // A reshape invalidates old origins; active jobs are rebound below.
-    if(this.boundView!==view||this.boundVersion!==view.version)this.settledJobs=[];
-    this.boundView=view;this.boundVersion=view.version;
-    this.decorate(view);this.uniforms.dustEm.value=em;
-    this.prepareCharacterCenters(view,characterRectangles);
-    for(const job of this.jobs){job.rectangles=rectanglesForRange(job.range);job.started??=now;}
-    this.jobs=this.jobs.filter(job=>job.rectangles.length);
-    this.step(now);return this.active;
-  }
-  remove(before,after,range,view,rectangles,em,now,characterRectangles){
-    const exitMode=this.exitMode,samePath=exitMode===this.mode;
-    // Preserve the last visible timeline and random paths, including arrivals
-    // that settled in this layout. Initial/programmatic text has no prior path.
-    const settled=this.boundView===view&&this.boundVersion===view.version?this.settledJobs:[];
-    const interrupted=[...this.jobs,...settled].filter(job=>job.rectangles.some(r=>rectangles.some(s=>r.x<s.x+s.width&&r.x+r.width>s.x&&r.y<s.y+s.height&&r.y+r.height>s.y))).map(job=>({...job,started:null,fromAge:job.started===null?0:Math.max(0,Math.min(1,((this.lastTime??now)-job.started)/this.duration))}));
-    const delta=after.text.length-before.text.length;
-    this.jobs=this.jobs.flatMap(job=>remapInsertionRange(job.range,range.start,range.end,delta).map(piece=>({...job,range:piece})));
-    this.settledJobs=[];
-    this.text=after.text;
-    if(!rectangles.length||!view.scene.parent)return false;
-    this.decorate(view);
-    this.prepareCharacterCenters(view,characterRectangles);
-    // A different removal preset starts from the complete retained facets. Its
-    // metadata must use the original full character, before filtering deletions.
-    if(!samePath){
-      const motion=textEditMotions[exitMode];
-      if(motion.characterCenters||motion.characterFrame||this.settings.bounceLines)
-        setTextMotionCharacterCenters(this.THREE,view,characterRectangles?.()||[],{floor:motion.characterFloor||this.settings.bounceLines,frame:motion.characterFrame});
-      // Extra attributes are shared by both modes; invalidate the arrival cache
-      // so a subsequent layout bind can refresh any requested metadata.
-      this.characterView=null;
-    }
-    const THREE=this.THREE,group=new THREE.Group(),sharedGroups=new Map();
-    group.position.copy(view.scene.position);group.quaternion.copy(view.scene.quaternion);group.scale.copy(view.scene.scale);
-    for(const [key,{mesh}] of view.sharedGroups){
-      // Retain only departing triangles, not another complete copy of the paragraph.
-      const original=mesh.geometry,position=original.getAttribute('position'),offsets=original.getAttribute('glyphOffset');
-      if(textEditMotions[exitMode].contour)ensureTextMotionContour(THREE,original);
-      const names=['position','color','delay'];if(original.getAttribute('dustEdge'))names.push('dustEdge');
-      if(original.getAttribute('rasterUV'))names.push('rasterUV');
-      if(original.getAttribute('dustCharacterSide'))names.push('dustCharacterSide');
-      if(original.getAttribute('dustCharacterFrame'))names.push('dustCharacterFrame');
-      if(original.getAttribute('dustFloor'))names.push('dustFloor');
-      if(original.getAttribute('dustCeiling'))names.push('dustCeiling');
-      for(const name of ['dustCornerA','dustCornerB','dustCornerC'])if(original.getAttribute(name))names.push(name);
-      const values=Object.fromEntries([...names,'glyphOffset'].map(name=>[name,[]]));
-      for(let instance=0;instance<original.instanceCount;instance++){
-        const ox=offsets.getX(instance),oy=offsets.getY(instance),box=original.boundingBox;
-        if(box&&!rectangles.some(r=>box.max.x+ox>=r.x&&box.min.x+ox<=r.x+r.width&&box.max.y+oy>=r.y&&box.min.y+oy<=r.y+r.height))continue;
-        for(let i=0;i<position.count;i+=3){
-          const x=(position.getX(i)+position.getX(i+1)+position.getX(i+2))/3+ox,y=(position.getY(i)+position.getY(i+1)+position.getY(i+2))/3+oy;
-          if(!rectangles.some(r=>x>=r.x&&x<=r.x+r.width&&y>=r.y&&y<=r.y+r.height))continue;
-          for(let j=0;j<3;j++){
-            for(const name of names){const a=original.getAttribute(name);for(let c=0;c<a.itemSize;c++)values[name].push(a.array[(i+j)*a.itemSize+c]);}
-            values.glyphOffset.push(ox,oy);
-          }
-        }
-      }
-      if(!values.position.length)continue;
-      const geometry=new THREE.BufferGeometry();for(const [name,array] of Object.entries(values))geometry.setAttribute(name,new THREE.Float32BufferAttribute(array,name==='glyphOffset'?2:original.getAttribute(name).itemSize));
-      const material=mesh.material.clone(),source=mesh.material.userData.dustSource||mesh.material;
-      const releaseTexture=retainRasterTexture(mesh.material,material);
-      material.vertexShader=source.vertexShader;material.fragmentShader=source.fragmentShader;
-      delete material.userData.dustWind;delete material.userData.dustSource;
-      for(const name of Object.keys(material.uniforms))if(name.startsWith('dust'))delete material.uniforms[name];
-      const copy=new THREE.Mesh(geometry,material);copy.frustumCulled=false;group.add(copy);sharedGroups.set(key,{mesh:copy,releaseTexture});
-    }
-    const effect=new TextEditEffect(THREE,{departing:true,mode:exitMode,settings:this.settings});
-    effect.jobs=[...(samePath?interrupted:[]),{id:0,seed:this.randomSeed(),range,started:null,fromAge:1,rectangles}];effect.decorate({sharedGroups});effect.uniforms.dustEm.value=em;
-    const release=()=>{group.removeFromParent();for(const {mesh,releaseTexture} of sharedGroups.values()){mesh.geometry.dispose();mesh.material.dispose();releaseTexture?.();}effect.dispose();};
-    view.scene.parent.add(group);this.ghosts.push({effect,release});this.exits++;this.active=true;return true;
-  }
-}
+import {TriangleEffect} from './triangle-effect.js';
+import {insertedRange,remapInsertionRange} from './insertion-range.js';
+import {textEditMotions} from './text-edit-motions.js';
+import {setTextMotionCharacterCenters} from './text-motion-character-centers.js';
+import {retainRasterTexture} from './raster-texture-material.js';
+import {ensureTextMotionContour} from './text-motion-contour.js';
+
+// Text-specific ranges and deletion ghosts adapt the shared triangle timeline.
+export class TextEditEffect extends TriangleEffect {
+  prepareCharacterCenters(view,characterRectangles){
+    const frame=textEditMotions[this.mode].characterFrame;
+    if(!textEditMotions[this.mode].characterCenters&&!frame&&!this.settings.bounceLines)return;
+    const floor=textEditMotions[this.mode].characterFloor||this.settings.bounceLines;
+    if(this.characterView===view&&this.characterVersion===view.version&&this.characterFloor===floor&&this.characterFrame===frame)return;
+    this.decorate(view);
+    setTextMotionCharacterCenters(this.THREE,view,characterRectangles?.()||[],{floor,frame});
+    this.characterView=view;this.characterVersion=view.version;this.characterFloor=floor;this.characterFrame=frame;
+  }
+  enqueue(before,after,inputType){
+    const range=insertedRange(before,after,inputType);if(!range)return false;
+    if(this.text!==null&&this.text!==before.text)this.cancel();
+    const delta=after.text.length-before.text.length,oldEnd=range.end-delta;
+    this.jobs=this.jobs.flatMap(job=>remapInsertionRange(job.range,range.start,oldEnd,delta).map(piece=>({...job,range:piece})));
+    this.jobs.push({id:++this.sequence,seed:this.randomSeed(),range,started:null,rectangles:[]});
+    this.text=after.text;this.runs++;return true;
+  }
+  bind(view,rectanglesForRange,em,now,characterRectangles){
+    // Retain only seeds/rectangles for the current layout, never a mesh/history.
+    // A reshape invalidates old origins; active jobs are rebound below.
+    if(this.boundView!==view||this.boundVersion!==view.version)this.settledJobs=[];
+    this.boundView=view;this.boundVersion=view.version;
+    this.decorate(view);this.uniforms.dustEm.value=em;
+    this.prepareCharacterCenters(view,characterRectangles);
+    for(const job of this.jobs){job.rectangles=rectanglesForRange(job.range);job.started??=now;}
+    this.jobs=this.jobs.filter(job=>job.rectangles.length);
+    this.step(now);return this.active;
+  }
+  remove(before,after,range,view,rectangles,em,now,characterRectangles){
+    const exitMode=this.exitMode,samePath=exitMode===this.mode;
+    // Preserve the last visible timeline and random paths, including arrivals
+    // that settled in this layout. Initial/programmatic text has no prior path.
+    const settled=this.boundView===view&&this.boundVersion===view.version?this.settledJobs:[];
+    const interrupted=[...this.jobs,...settled].filter(job=>job.rectangles.some(r=>rectangles.some(s=>r.x<s.x+s.width&&r.x+r.width>s.x&&r.y<s.y+s.height&&r.y+r.height>s.y))).map(job=>({...job,started:null,fromAge:job.started===null?0:Math.max(0,Math.min(1,((this.lastTime??now)-job.started)/this.duration))}));
+    const delta=after.text.length-before.text.length;
+    this.jobs=this.jobs.flatMap(job=>remapInsertionRange(job.range,range.start,range.end,delta).map(piece=>({...job,range:piece})));
+    this.settledJobs=[];
+    this.text=after.text;
+    if(!rectangles.length||!view.scene.parent)return false;
+    this.decorate(view);
+    this.prepareCharacterCenters(view,characterRectangles);
+    // A different removal preset starts from the complete retained facets. Its
+    // metadata must use the original full character, before filtering deletions.
+    if(!samePath){
+      const motion=textEditMotions[exitMode];
+      if(motion.characterCenters||motion.characterFrame||this.settings.bounceLines)
+        setTextMotionCharacterCenters(this.THREE,view,characterRectangles?.()||[],{floor:motion.characterFloor||this.settings.bounceLines,frame:motion.characterFrame});
+      // Extra attributes are shared by both modes; invalidate the arrival cache
+      // so a subsequent layout bind can refresh any requested metadata.
+      this.characterView=null;
+    }
+    const THREE=this.THREE,group=new THREE.Group(),sharedGroups=new Map();
+    group.position.copy(view.scene.position);group.quaternion.copy(view.scene.quaternion);group.scale.copy(view.scene.scale);
+    for(const [key,{mesh}] of view.sharedGroups){
+      // Retain only departing triangles, not another complete copy of the paragraph.
+      const original=mesh.geometry,position=original.getAttribute('position'),offsets=original.getAttribute('glyphOffset');
+      if(textEditMotions[exitMode].contour)ensureTextMotionContour(THREE,original);
+      const names=['position','color','delay'];if(original.getAttribute('dustEdge'))names.push('dustEdge');
+      if(original.getAttribute('rasterUV'))names.push('rasterUV');
+      if(original.getAttribute('dustCharacterSide'))names.push('dustCharacterSide');
+      if(original.getAttribute('dustCharacterFrame'))names.push('dustCharacterFrame');
+      if(original.getAttribute('dustFloor'))names.push('dustFloor');
+      if(original.getAttribute('dustCeiling'))names.push('dustCeiling');
+      for(const name of ['dustCornerA','dustCornerB','dustCornerC'])if(original.getAttribute(name))names.push(name);
+      const values=Object.fromEntries([...names,'glyphOffset'].map(name=>[name,[]]));
+      for(let instance=0;instance<original.instanceCount;instance++){
+        const ox=offsets.getX(instance),oy=offsets.getY(instance),box=original.boundingBox;
+        if(box&&!rectangles.some(r=>box.max.x+ox>=r.x&&box.min.x+ox<=r.x+r.width&&box.max.y+oy>=r.y&&box.min.y+oy<=r.y+r.height))continue;
+        for(let i=0;i<position.count;i+=3){
+          const x=(position.getX(i)+position.getX(i+1)+position.getX(i+2))/3+ox,y=(position.getY(i)+position.getY(i+1)+position.getY(i+2))/3+oy;
+          if(!rectangles.some(r=>x>=r.x&&x<=r.x+r.width&&y>=r.y&&y<=r.y+r.height))continue;
+          for(let j=0;j<3;j++){
+            for(const name of names){const a=original.getAttribute(name);for(let c=0;c<a.itemSize;c++)values[name].push(a.array[(i+j)*a.itemSize+c]);}
+            values.glyphOffset.push(ox,oy);
+          }
+        }
+      }
+      if(!values.position.length)continue;
+      const geometry=new THREE.BufferGeometry();for(const [name,array] of Object.entries(values))geometry.setAttribute(name,new THREE.Float32BufferAttribute(array,name==='glyphOffset'?2:original.getAttribute(name).itemSize));
+      const material=mesh.material.clone(),source=mesh.material.userData.dustSource||mesh.material;
+      const releaseTexture=retainRasterTexture(mesh.material,material);
+      material.vertexShader=source.vertexShader;material.fragmentShader=source.fragmentShader;
+      delete material.userData.dustWind;delete material.userData.dustSource;
+      for(const name of Object.keys(material.uniforms))if(name.startsWith('dust'))delete material.uniforms[name];
+      const copy=new THREE.Mesh(geometry,material);copy.frustumCulled=false;group.add(copy);sharedGroups.set(key,{mesh:copy,releaseTexture});
+    }
+    const effect=new TextEditEffect(THREE,{departing:true,mode:exitMode,settings:this.settings});
+    effect.jobs=[...(samePath?interrupted:[]),{id:0,seed:this.randomSeed(),range,started:null,fromAge:1,rectangles}];effect.decorate({sharedGroups});effect.uniforms.dustEm.value=em;
+    const release=()=>{group.removeFromParent();for(const {mesh,releaseTexture} of sharedGroups.values()){mesh.geometry.dispose();mesh.material.dispose();releaseTexture?.();}effect.dispose();};
+    view.scene.parent.add(group);this.ghosts.push({effect,release});this.exits++;this.active=true;return true;
+  }
+}

package/src/text-edit-motions.js

@@ -1,15 +1,15 @@
-// Public catalogue contains metadata only. Paths come from shared recipes.
-import {compileTextMotionRecipe,textMotionRecipes,textMotionAliases} from './text-motion-recipes.js';
-export const DEFAULT_TEXT_EFFECT_DURATION=2000;
-const definitions=[{"key":"dust-wind","id":0,"label":"باد و گردوخاک","description":"ذرات با باد می‌آیند و هنگام حذف همان مسیر را برمی‌گردند. تنظیم قبلی باد حفظ شده است."},{"key":"smoke","id":4,"label":"دود و پراکندگی","description":"قطعه‌ها هنگام حذف رو به بالا می‌پیچند، ریز و محو می‌شوند. تایپ همان حرکت را برعکس می‌کند."},{"key":"melt","id":10,"label":"ذوب و انجماد","description":"هنگام حذف، وجه‌ها کش می‌آیند و مثل قطره پایین می‌روند؛ ورود متن، جمع‌شدن و انجماد همان قطره‌هاست."},{"key":"drifting-snow","id":28,"label":"برف معلق","description":"مثلث‌ها مثل دانه‌های برف با چرخش و نوسان جانبی آرام پایین می‌آیند و می‌نشینند؛ حذف، همان حرکت را برمی‌گرداند."}];
-const catalogue=Object.assign(Object.create(null),Object.fromEntries(definitions.map(({key,id,label,description,contour=false,characterCenters=false,characterFloor=false,characterFrame=false})=>[key,Object.freeze({id,label,description,contour,characterCenters,characterFloor,characterFrame,duration:DEFAULT_TEXT_EFFECT_DURATION})])));
-for(const [key,alias] of Object.entries(textMotionAliases))Object.defineProperty(catalogue,key,{value:catalogue[alias.base],enumerable:false});
-export const textEditMotions=Object.freeze(catalogue);
-export const isInputEffect=value=>typeof value==='string'&&(value==='none'||Object.hasOwn(textEditMotions,value));
-export const additionalTextMotion=definitions.map(({id,key})=>`
-#if THD_EDIT_MODE == ${id}
-{
-${compileTextMotionRecipe(textMotionRecipes[key])}
-}
-#endif
-`).join('');
+// Public catalogue contains metadata only. Paths come from shared recipes.
+import {compileTextMotionRecipe,textMotionRecipes,textMotionAliases} from './text-motion-recipes.js';
+export const DEFAULT_TEXT_EFFECT_DURATION=2000;
+const definitions=[{"key":"dust-wind","id":0,"label":"باد و گردوخاک","description":"ذرات با باد می‌آیند و هنگام حذف همان مسیر را برمی‌گردند. تنظیم قبلی باد حفظ شده است."},{"key":"smoke","id":4,"label":"دود و پراکندگی","description":"قطعه‌ها هنگام حذف رو به بالا می‌پیچند، ریز و محو می‌شوند. تایپ همان حرکت را برعکس می‌کند."},{"key":"melt","id":10,"label":"ذوب و انجماد","description":"هنگام حذف، وجه‌ها کش می‌آیند و مثل قطره پایین می‌روند؛ ورود متن، جمع‌شدن و انجماد همان قطره‌هاست."},{"key":"drifting-snow","id":28,"label":"برف معلق","description":"مثلث‌ها مثل دانه‌های برف با چرخش و نوسان جانبی آرام پایین می‌آیند و می‌نشینند؛ حذف، همان حرکت را برمی‌گرداند."}];
+const catalogue=Object.assign(Object.create(null),Object.fromEntries(definitions.map(({key,id,label,description,contour=false,characterCenters=false,characterFloor=false,characterFrame=false})=>[key,Object.freeze({id,label,description,contour,characterCenters,characterFloor,characterFrame,duration:DEFAULT_TEXT_EFFECT_DURATION})])));
+for(const [key,alias] of Object.entries(textMotionAliases))Object.defineProperty(catalogue,key,{value:catalogue[alias.base],enumerable:false});
+export const textEditMotions=Object.freeze(catalogue);
+export const isInputEffect=value=>typeof value==='string'&&(value==='none'||Object.hasOwn(textEditMotions,value));
+export const additionalTextMotion=definitions.map(({id,key})=>`
+#if THD_EDIT_MODE == ${id}
+{
+${compileTextMotionRecipe(textMotionRecipes[key])}
+}
+#endif
+`).join('');

package/src/text-effect-options.js

@@ -1,29 +1,29 @@
-// Public intent controls; the engine derives particle ranges and timing from them.
-import {normalizeTextMotionRecipe,textMotionAliases} from './text-motion-recipes.js';
-import {textEditMotions} from './text-edit-motions.js';
-export const TEXT_EFFECT_DEFAULTS=Object.freeze({particleShape:'triangle',exitEffect:'same',duration:2000,motion:1,formation:0,chaos:0.5,horizontal:1,vertical:1,flipX:false,flipY:false,exitFlipX:false,exitFlipY:false,bounceLines:false,seed:null,recipe:normalizeTextMotionRecipe()});
-export const cloneTextEffectOptions=value=>({...value,...(value.recipe?{recipe:{...value.recipe}}:{})});
-const limits={duration:[200,8000],motion:[0.25,2],formation:[-1,1],chaos:[0,1],horizontal:[0,2],vertical:[0,2],seed:[0,4294967295]};
-export function normalizeTextEffectOptions(value={},mode='dust-wind'){
-  if(!value||typeof value!=='object'||Array.isArray(value))throw TypeError('Effect settings must be an object');
-  for(const [key,v] of Object.entries(value)){
-    if(!Object.hasOwn(TEXT_EFFECT_DEFAULTS,key))throw TypeError('Unknown effect setting: '+key);
-    if(key==='exitEffect'){if(v!=='same'&&(typeof v!=='string'||!Object.keys(textEditMotions).includes(v)))throw TypeError('Invalid exitEffect');continue;}
-    if(key==='particleShape'){if(!['triangle','square'].includes(v))throw TypeError('Invalid particleShape');continue;}
-    if(key==='recipe'){normalizeTextMotionRecipe(v,mode);continue;}
-    if(key==='seed'&&v===null)continue;
-    if(limits[key]){const [lo,hi]=limits[key];if(typeof v!=='number'||!Number.isFinite(v)||v<lo||v>hi||(key==='seed'&&!Number.isInteger(v)))throw RangeError('Invalid effect setting: '+key);}
-    else if(typeof v!=='boolean')throw TypeError(key+' must be boolean');
-  }
-  return Object.freeze({...TEXT_EFFECT_DEFAULTS,bounceLines:textMotionAliases[mode]?.bounceLines??(mode==='dust-wind-upward'),...value,recipe:normalizeTextMotionRecipe(value.recipe,mode)});
-}
-
-export const textEffectOptionShader=`
-  // The distance/speed ratio retains the wind distribution at formation=0.
-  // A continuous exponent adjusts arrival spread; no fixed particle cohorts.
-  float thdFormationSeconds(float seconds,float duration,float formation){
-    if(formation==0.0)return seconds;
-    return duration*pow(clamp(seconds/duration,0.0,1.0),exp2(formation));
-  }
-`;
+// Public intent controls; the engine derives particle ranges and timing from them.
+import {normalizeTextMotionRecipe,textMotionAliases} from './text-motion-recipes.js';
+import {textEditMotions} from './text-edit-motions.js';
+export const TEXT_EFFECT_DEFAULTS=Object.freeze({particleShape:'triangle',exitEffect:'same',duration:2000,motion:1,formation:0,chaos:0.5,horizontal:1,vertical:1,flipX:false,flipY:false,exitFlipX:false,exitFlipY:false,bounceLines:false,seed:null,recipe:normalizeTextMotionRecipe()});
+export const cloneTextEffectOptions=value=>({...value,...(value.recipe?{recipe:{...value.recipe}}:{})});
+const limits={duration:[200,8000],motion:[0.25,2],formation:[-1,1],chaos:[0,1],horizontal:[0,2],vertical:[0,2],seed:[0,4294967295]};
+export function normalizeTextEffectOptions(value={},mode='dust-wind'){
+  if(!value||typeof value!=='object'||Array.isArray(value))throw TypeError('Effect settings must be an object');
+  for(const [key,v] of Object.entries(value)){
+    if(!Object.hasOwn(TEXT_EFFECT_DEFAULTS,key))throw TypeError('Unknown effect setting: '+key);
+    if(key==='exitEffect'){if(v!=='same'&&(typeof v!=='string'||!Object.keys(textEditMotions).includes(v)))throw TypeError('Invalid exitEffect');continue;}
+    if(key==='particleShape'){if(!['triangle','square'].includes(v))throw TypeError('Invalid particleShape');continue;}
+    if(key==='recipe'){normalizeTextMotionRecipe(v,mode);continue;}
+    if(key==='seed'&&v===null)continue;
+    if(limits[key]){const [lo,hi]=limits[key];if(typeof v!=='number'||!Number.isFinite(v)||v<lo||v>hi||(key==='seed'&&!Number.isInteger(v)))throw RangeError('Invalid effect setting: '+key);}
+    else if(typeof v!=='boolean')throw TypeError(key+' must be boolean');
+  }
+  return Object.freeze({...TEXT_EFFECT_DEFAULTS,bounceLines:textMotionAliases[mode]?.bounceLines??(mode==='dust-wind-upward'),...value,recipe:normalizeTextMotionRecipe(value.recipe,mode)});
+}
+
+export const textEffectOptionShader=`
+  // The distance/speed ratio retains the wind distribution at formation=0.
+  // A continuous exponent adjusts arrival spread; no fixed particle cohorts.
+  float thdFormationSeconds(float seconds,float duration,float formation){
+    if(formation==0.0)return seconds;
+    return duration*pow(clamp(seconds/duration,0.0,1.0),exp2(formation));
+  }
+`;