@vectojs/core 0.2.6 → 0.2.8

package/dist/{chunk-BWLNEJJW.js → chunk-XLZDOFSB.js}

@@ -32,25 +32,48 @@ function computeLineSegments(top, bottom, maxWidth, exclusions) {
 }
 var LayoutEngine = (_class = class {
   
+  /**
+   * Horizontal alignment. `'justify'` stretches inter-word spaces (or, for
+   * space-less CJK lines, inter-character gaps) so wrapped lines end flush at
+   * `maxWidth`; the last line of each paragraph stays ragged. Only applies to
+   * the object layout path without exclusion shapes.
+   */
+  __init() {this.textAlign = "left"}
   
-  __init() {this.preserveLeadingSpaces = false}
+  __init2() {this.preserveLeadingSpaces = false}
   
   
-  __init2() {this.wordCache = /* @__PURE__ */ new Map()}
-  __init3() {this.graphemeCache = /* @__PURE__ */ new Map()}
+  __init3() {this.wordCache = /* @__PURE__ */ new Map()}
+  __init4() {this.graphemeCache = /* @__PURE__ */ new Map()}
   // Paragraph-level memo so re-`prepare()` of mostly-unchanged text (streaming
   // append, live logs) reuses untouched paragraphs by reference instead of
   // re-segmenting/re-measuring the whole document — turning per-token cost from
   // O(document) into O(changed paragraph). Keyed by fontSize + text; invalidated
   // when the font atlas (which drives glyph widths) changes.
-  __init4() {this.paragraphCache = /* @__PURE__ */ new Map()}
+  __init5() {this.paragraphCache = /* @__PURE__ */ new Map()}
   // Same memo for the rich path ({@link prepareRich}); keyed by fontSize + text +
   // a per-paragraph *value* signature of the inline styles, so a streaming
   // typewriter that appends styled runs reuses its untouched paragraphs.
-  __init5() {this.richParagraphCache = /* @__PURE__ */ new Map()}
-  __init6() {this.lastAtlas = null}
+  __init6() {this.richParagraphCache = /* @__PURE__ */ new Map()}
+  __init7() {this.lastAtlas = null}
   
-  constructor(maxWidth, maxHeight, measurer) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);
+  __init8() {this._hyphenate = null}
+  /**
+   * Optional hyphenator: given a word, return its break parts (e.g.
+   * `['hyphen', 'ation']`). Used at wrap time when a word doesn't fit; a
+   * visible '-' is drawn at the chosen break. Soft hyphens (U+00AD) in the
+   * source work without any hyphenator. Setting this clears the prepared
+   * caches (break opportunities are baked in during prepare()).
+   */
+  get hyphenate() {
+    return this._hyphenate;
+  }
+  set hyphenate(fn) {
+    this._hyphenate = fn;
+    this.paragraphCache.clear();
+    this.richParagraphCache.clear();
+  }
+  constructor(maxWidth, maxHeight, measurer) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);_class.prototype.__init7.call(this);_class.prototype.__init8.call(this);
     this.maxWidth = maxWidth;
     this.maxHeight = maxHeight;
     this.measurer = _nullishCoalesce(measurer, () => ( null));
@@ -157,7 +180,13 @@ var LayoutEngine = (_class = class {
         const word = segment.segment;
         const glyphs = [];
         let width = 0;
+        let breakPoints;
         for (const char of this.getGraphemes(word)) {
+          if (char === "\xAD") {
+            (breakPoints ??= []).push(glyphs.length);
+            shapedCharIdx += char.length;
+            continue;
+          }
           const visualStart = shapedCharIdx;
           const visualEnd = shapedCharIdx + char.length;
           const rawStart = indexMap[visualStart];
@@ -182,11 +211,23 @@ var LayoutEngine = (_class = class {
           width += w;
           shapedCharIdx += char.length;
         }
+        if (!breakPoints && this._hyphenate && segment.isWordLike && glyphs.length > 3) {
+          const parts = this._hyphenate(word);
+          if (parts.length > 1) {
+            breakPoints = [];
+            let count = 0;
+            for (let pi = 0; pi < parts.length - 1; pi++) {
+              for (const _g of this.getGraphemes(parts[pi])) count++;
+              breakPoints.push(count);
+            }
+          }
+        }
         words.push({
           glyphs,
           width,
           isWordLike: segment.isWordLike,
-          isWhitespace: word.trim().length === 0
+          isWhitespace: word.trim().length === 0,
+          breakPoints
         });
       }
       const prepared = {
@@ -200,7 +241,12 @@ var LayoutEngine = (_class = class {
       paragraphs.push(prepared);
       offset += paragraph.length + 1;
     }
-    return { paragraphs, fontSize, fallbackToCanvas: fallbackToCanvas || void 0 };
+    return {
+      paragraphs,
+      fontSize,
+      fallbackToCanvas: fallbackToCanvas || void 0,
+      hyphenWidth: this.glyphWidth(this.glyphKeyFor("-", fontAtlas), fontAtlas, fontSize)
+    };
   }
   /**
    * **Cold pass for rich text.** Like {@link prepare}, but takes an array of
@@ -274,7 +320,13 @@ var LayoutEngine = (_class = class {
         const word = segment.segment;
         const glyphs = [];
         let width = 0;
+        let breakPoints;
         for (const char of this.getGraphemes(word)) {
+          if (char === "\xAD") {
+            (breakPoints ??= []).push(glyphs.length);
+            shapedCharIdx += char.length;
+            continue;
+          }
           const visualStart = shapedCharIdx;
           const visualEnd = shapedCharIdx + char.length;
           const rawStart = indexMap[visualStart];
@@ -302,11 +354,23 @@ var LayoutEngine = (_class = class {
           width += w;
           shapedCharIdx += char.length;
         }
+        if (!breakPoints && this._hyphenate && segment.isWordLike && glyphs.length > 3) {
+          const parts = this._hyphenate(word);
+          if (parts.length > 1) {
+            breakPoints = [];
+            let count = 0;
+            for (let pi = 0; pi < parts.length - 1; pi++) {
+              for (const _g of this.getGraphemes(parts[pi])) count++;
+              breakPoints.push(count);
+            }
+          }
+        }
         words.push({
           glyphs,
           width,
           isWordLike: segment.isWordLike,
-          isWhitespace: word.trim().length === 0
+          isWhitespace: word.trim().length === 0,
+          breakPoints
         });
       }
       const prepared = {
@@ -350,7 +414,7 @@ var LayoutEngine = (_class = class {
     let si = 0;
     let currentLineNodes = [];
     let paragraphBaseLevel = 0;
-    const commitLine = () => {
+    const commitLine = (justifyTo) => {
       if (currentLineNodes.length === 0) return;
       const runs = [];
       let currentRun = [];
@@ -375,6 +439,37 @@ var LayoutEngine = (_class = class {
           node.isRTL = node.level % 2 === 1;
           x += node.width;
         }
+        if (justifyTo !== void 0 && runs.length === 1) {
+          let lastContent = run.length - 1;
+          while (lastContent >= 0 && run[lastContent].char.trim() === "") lastContent--;
+          if (lastContent > 0) {
+            const contentEnd = run[lastContent].x + run[lastContent].width;
+            const slack = justifyTo - contentEnd;
+            if (slack > 0 && slack <= (justifyTo - runStartX) * 0.5) {
+              const spaceIdx = [];
+              for (let k = 1; k < lastContent; k++) {
+                if (run[k].char.trim() === "") spaceIdx.push(k);
+              }
+              if (spaceIdx.length > 0) {
+                const extra = slack / spaceIdx.length;
+                let shift = 0;
+                let nextSpace = 0;
+                for (let k = 0; k <= lastContent; k++) {
+                  run[k].x += shift;
+                  if (nextSpace < spaceIdx.length && k === spaceIdx[nextSpace]) {
+                    run[k].width += extra;
+                    shift += extra;
+                    nextSpace++;
+                  }
+                }
+              } else {
+                const extra = slack / lastContent;
+                for (let k = 1; k <= lastContent; k++) run[k].x += extra * k;
+              }
+              if (justifyTo > maxLineWidth) maxLineWidth = justifyTo;
+            }
+          }
+        }
         for (const node of run) {
           layoutNodes.push(node);
         }
@@ -394,6 +489,8 @@ var LayoutEngine = (_class = class {
       }
       return false;
     };
+    const justifyTarget = this.textAlign === "justify" && !hasEx ? this.maxWidth : void 0;
+    const hyphenWidth = _nullishCoalesce(prepared.hyphenWidth, () => ( fontSize * 0.3));
     for (const paragraph of prepared.paragraphs) {
       if (paragraph.isEmpty) {
         commitLine();
@@ -411,16 +508,65 @@ var LayoutEngine = (_class = class {
       }
       const lineHeight = pMax * 1.5;
       if (!startLine(lineHeight)) break;
-      for (const word of paragraph.words) {
-        if (currentX + word.width > segs[si].x1 && currentX > segs[si].x0) {
-          if (word.isWordLike === false && word.isWhitespace) continue;
-          if (si < segs.length - 1) {
-            si++;
-            currentX = segs[si].x0;
-          } else {
-            commitLine();
-            currentY += lineHeight;
-            if (!startLine(lineHeight)) break;
+      const wordQueue = paragraph.words.slice();
+      for (let qi = 0; qi < wordQueue.length; qi++) {
+        const word = wordQueue[qi];
+        if (currentX + word.width > segs[si].x1) {
+          if (!hasEx && word.breakPoints && word.breakPoints.length > 0) {
+            const avail = segs[si].x1 - currentX;
+            let chosen = -1;
+            let prefixWidth = 0;
+            let acc = 0;
+            let bpIdx = 0;
+            for (let g = 0; g < word.glyphs.length && bpIdx < word.breakPoints.length; g++) {
+              acc += word.glyphs[g].width;
+              if (g + 1 === word.breakPoints[bpIdx]) {
+                if (acc + hyphenWidth <= avail) {
+                  chosen = word.breakPoints[bpIdx];
+                  prefixWidth = acc;
+                }
+                bpIdx++;
+              }
+            }
+            if (chosen > 0) {
+              const anchorGlyph = word.glyphs[chosen - 1];
+              const prefix = {
+                glyphs: [
+                  ...word.glyphs.slice(0, chosen),
+                  {
+                    char: "-",
+                    width: hyphenWidth,
+                    level: anchorGlyph.level,
+                    sourceIndex: anchorGlyph.sourceIndex,
+                    sourceLength: 0
+                  }
+                ],
+                width: prefixWidth + hyphenWidth,
+                isWordLike: true,
+                isWhitespace: false
+              };
+              const rest = {
+                glyphs: word.glyphs.slice(chosen),
+                width: word.width - prefixWidth,
+                isWordLike: true,
+                isWhitespace: false,
+                breakPoints: word.breakPoints.filter((bp) => bp > chosen).map((bp) => bp - chosen)
+              };
+              wordQueue.splice(qi, 1, prefix, rest);
+              qi--;
+              continue;
+            }
+          }
+          if (currentX > segs[si].x0) {
+            if (word.isWordLike === false && word.isWhitespace) continue;
+            if (si < segs.length - 1) {
+              si++;
+              currentX = segs[si].x0;
+            } else {
+              commitLine(justifyTarget);
+              currentY += lineHeight;
+              if (!startLine(lineHeight)) break;
+            }
           }
         }
         for (const glyph of word.glyphs) {
@@ -433,7 +579,7 @@ var LayoutEngine = (_class = class {
                 si++;
                 currentX = segs[si].x0;
               } else {
-                commitLine();
+                commitLine(justifyTarget);
                 currentY += lineHeight;
                 if (!startLine(lineHeight)) break;
               }
@@ -549,20 +695,20 @@ var LayoutEngine = (_class = class {
     }
   }
 }, _class);
-var LayoutResultBuffer = (_class2 = class _LayoutResultBuffer {constructor() { _class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this); }
+var LayoutResultBuffer = (_class2 = class _LayoutResultBuffer {constructor() { _class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this); }
   static __initStatic() {this.CAPACITY = 16384}
   /** X positions of each glyph. */
-  __init7() {this.xs = new Float32Array(_LayoutResultBuffer.CAPACITY)}
+  __init9() {this.xs = new Float32Array(_LayoutResultBuffer.CAPACITY)}
   /** Y positions of each glyph. */
-  __init8() {this.ys = new Float32Array(_LayoutResultBuffer.CAPACITY)}
+  __init10() {this.ys = new Float32Array(_LayoutResultBuffer.CAPACITY)}
   /** Widths of each glyph. */
-  __init9() {this.ws = new Float32Array(_LayoutResultBuffer.CAPACITY)}
+  __init11() {this.ws = new Float32Array(_LayoutResultBuffer.CAPACITY)}
   /** Heights of each glyph. */
-  __init10() {this.hs = new Float32Array(_LayoutResultBuffer.CAPACITY)}
+  __init12() {this.hs = new Float32Array(_LayoutResultBuffer.CAPACITY)}
   /** Character for each glyph slot. */
-  __init11() {this.chars = Array.from({ length: _LayoutResultBuffer.CAPACITY })}
+  __init13() {this.chars = Array.from({ length: _LayoutResultBuffer.CAPACITY })}
   /** Number of valid glyphs written in this buffer. */
-  __init12() {this.count = 0}
+  __init14() {this.count = 0}
   /** Reset the buffer for reuse. Does NOT free memory. */
   reset() {
     this.count = 0;

package/dist/{chunk-4BO5XBJL.js → chunk-XRWZS2DM.js}

@@ -434,6 +434,7 @@ var Entity = (_class4 = class {
       startTime: -1,
       startProps: {}
     });
+    _optionalChain([this, 'access', _40 => _40.scene, 'optionalAccess', _41 => _41.markDirty, 'call', _42 => _42()]);
     return this;
   }
   /** Write a driver-computed value to a backing field without re-triggering the setter. */
@@ -489,10 +490,10 @@ var Entity = (_class4 = class {
     const active = driver;
     const onDone = active.onDone;
     active.onDone = void 0;
-    _optionalChain([onDone, 'optionalCall', _40 => _40()]);
+    _optionalChain([onDone, 'optionalCall', _43 => _43()]);
   }
   _spawnDriver(prop, to, cfg) {
-    if (prop !== "opacity" && _optionalChain([this, 'access', _41 => _41.scene, 'optionalAccess', _42 => _42.prefersReducedMotion])) {
+    if (prop !== "opacity" && _optionalChain([this, 'access', _44 => _44.scene, 'optionalAccess', _45 => _45.prefersReducedMotion])) {
       const existing2 = this._drivers.get(prop);
       if (existing2) this._settleDriver(existing2);
       this._drivers.delete(prop);
@@ -508,11 +509,11 @@ var Entity = (_class4 = class {
     const from = this._currentOf(prop);
     const driver = isTweenConfig(cfg) ? new TweenDriver(from, to, cfg) : new SpringDriver(from, to, cfg === "spring" ? {} : cfg);
     this._drivers.set(prop, driver);
-    _optionalChain([this, 'access', _43 => _43.scene, 'optionalAccess', _44 => _44.markDirty, 'call', _45 => _45()]);
+    _optionalChain([this, 'access', _46 => _46.scene, 'optionalAccess', _47 => _47.markDirty, 'call', _48 => _48()]);
   }
   /** Assignment path when a declarative transition is configured for `prop`. */
   _animateProp(prop, to) {
-    const cfg = _optionalChain([this, 'access', _46 => _46._transitions, 'optionalAccess', _47 => _47.get, 'call', _48 => _48(prop)]);
+    const cfg = _optionalChain([this, 'access', _49 => _49._transitions, 'optionalAccess', _50 => _50.get, 'call', _51 => _51(prop)]);
     if (!cfg) {
       this._applyAnimated(prop, to);
       return;
@@ -562,7 +563,7 @@ var Entity = (_class4 = class {
         this._applyAnimated(prop, driver.value);
       }
     }
-    _optionalChain([this, 'access', _49 => _49.scene, 'optionalAccess', _50 => _50.markDirty, 'call', _51 => _51()]);
+    _optionalChain([this, 'access', _52 => _52.scene, 'optionalAccess', _53 => _53.markDirty, 'call', _54 => _54()]);
   }
   /**
    * Advance the entity's internal state for one frame.
@@ -616,7 +617,7 @@ var Entity = (_class4 = class {
    * @example entity.on('click', (e) => console.log('clicked', e));
    */
   on(event, callback, options) {
-    const map = _optionalChain([options, 'optionalAccess', _52 => _52.capture]) ? this.captureListeners : this.listeners;
+    const map = _optionalChain([options, 'optionalAccess', _55 => _55.capture]) ? this.captureListeners : this.listeners;
     if (!map.has(event)) {
       map.set(event, []);
     }
@@ -632,7 +633,7 @@ var Entity = (_class4 = class {
    * @returns `this` for method chaining.
    */
   off(event, callback, options) {
-    const handlers = (_optionalChain([options, 'optionalAccess', _53 => _53.capture]) ? this.captureListeners : this.listeners).get(event);
+    const handlers = (_optionalChain([options, 'optionalAccess', _56 => _56.capture]) ? this.captureListeners : this.listeners).get(event);
     if (handlers) {
       const idx = handlers.indexOf(callback);
       if (idx !== -1) handlers.splice(idx, 1);
@@ -892,6 +893,19 @@ var Entity = (_class4 = class {
   getBatchRect() {
     return null;
   }
+  /**
+   * Opt into DOM content projection for entities that render static text.
+   * The {@link Scene} mirrors the returned text as a transparent DOM node
+   * positioned over the drawn glyphs, making canvas text findable (Ctrl+F),
+   * readable by screen readers and crawlers, translatable, and — when
+   * `selectable` is set — natively selectable. Returns `null` by default.
+   * Read on the a11y sync cadence, so text changes propagate automatically.
+   *
+   * @returns The projection descriptor, or `null` to project nothing.
+   */
+  getContentProjection() {
+    return null;
+  }
   /**
    * Whether this entity still has a queued/running tween animation, or an
    * active {@link setTransition}/{@link animateTo}/{@link springTo} property
@@ -1063,10 +1077,22 @@ var MSDFTextEntity = (_class6 = class extends Entity {
         if (res.seqId < this.lastRenderedSeqId) return;
         this.lastRenderedSeqId = res.seqId;
         this.layoutResult = res;
-        _optionalChain([this, 'access', _54 => _54.scene, 'optionalAccess', _55 => _55.markDirty, 'call', _56 => _56()]);
+        _optionalChain([this, 'access', _57 => _57.scene, 'optionalAccess', _58 => _58.markDirty, 'call', _59 => _59()]);
       }
     });
   }
+  /**
+   * Mirror the rendered text into the DOM content layer: find-in-page, screen
+   * readers, crawlers, and translation see the same string the canvas draws.
+   */
+  getContentProjection() {
+    if (!this.text) return null;
+    return {
+      text: this.text,
+      font: `${this.fontSize}px ${this.fallbackFont}`,
+      lineHeight: this.lineHeight
+    };
+  }
   isPointInside(globalX, globalY) {
     if (!this.layoutResult) return false;
     const local = this.worldToLocal(globalX, globalY);

package/dist/{chunk-PK5EYWIT.mjs → chunk-YBW7ECZP.mjs}

@@ -34,6 +34,10 @@ var CanvasRenderer = class _CanvasRenderer {
     this.height = size?.height ?? (typeof window !== "undefined" ? window.innerHeight : canvas.height || 0);
     canvas.width = this.width * dpr;
     canvas.height = this.height * dpr;
+    if (canvas.style) {
+      canvas.style.width = `${this.width}px`;
+      canvas.style.height = `${this.height}px`;
+    }
     const ctx = canvas.getContext("2d");
     this.ctx = ctx;
     if (ctx) ctx.scale(dpr, dpr);
@@ -821,6 +825,19 @@ void main() {
   vec4 t = texture(u_tex, v_uv);
   outColor = vec4(t.rgb * v_tint.rgb, t.a * v_tint.a);
 }`;
+var CIRCLE_QUAD_FRAG = `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+in vec4 v_tint;
+out vec4 outColor;
+void main() {
+  vec2 c = v_uv - 0.5;
+  float d = length(c);
+  float aa = fwidth(d);
+  float alpha = 1.0 - smoothstep(0.5 - aa, 0.5, d);
+  if (alpha <= 0.0) discard;
+  outColor = vec4(v_tint.rgb, v_tint.a * alpha);
+}`;
 var MSDF_FRAG = `#version 300 es
 precision mediump float;
 uniform sampler2D u_tex;
@@ -887,7 +904,9 @@ function createWebGLPointRenderer(canvas) {
   const rectProgram = link(gl, RECT_VERT, RECT_FRAG);
   const spriteProgram = link(gl, SPRITE_VERT, SPRITE_FRAG);
   const msdfProgram = link(gl, SPRITE_VERT, MSDF_FRAG);
-  if (!pointProgram || !rectProgram || !spriteProgram || !msdfProgram) return null;
+  const circleQuadProgram = link(gl, SPRITE_VERT, CIRCLE_QUAD_FRAG);
+  if (!pointProgram || !rectProgram || !spriteProgram || !msdfProgram || !circleQuadProgram)
+    return null;
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   const pAPos = gl.getAttribLocation(pointProgram, "a_pos");
@@ -947,6 +966,20 @@ function createWebGLPointRenderer(canvas) {
   gl.vertexAttribPointer(gAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
   gl.enableVertexAttribArray(gATint);
   gl.vertexAttribPointer(gATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
+  const cAPos = gl.getAttribLocation(circleQuadProgram, "a_pos");
+  const cAUv = gl.getAttribLocation(circleQuadProgram, "a_uv");
+  const cATint = gl.getAttribLocation(circleQuadProgram, "a_tint");
+  const cURes = gl.getUniformLocation(circleQuadProgram, "u_resolution");
+  const circleQuadBuffer = gl.createBuffer();
+  const circleQuadVAO = gl.createVertexArray();
+  gl.bindVertexArray(circleQuadVAO);
+  gl.bindBuffer(gl.ARRAY_BUFFER, circleQuadBuffer);
+  gl.enableVertexAttribArray(cAPos);
+  gl.vertexAttribPointer(cAPos, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 0);
+  gl.enableVertexAttribArray(cAUv);
+  gl.vertexAttribPointer(cAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
+  gl.enableVertexAttribArray(cATint);
+  gl.vertexAttribPointer(cATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
   gl.bindVertexArray(null);
   let texture = null;
   let textureSource = null;
@@ -961,10 +994,16 @@ function createWebGLPointRenderer(canvas) {
   let spriteCount = 0;
   let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 1024);
   let glyphCount = 0;
+  let circleQuadData = new Float32Array(
+    FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 64
+  );
+  let circleQuadCount = 0;
   let logicalW = 0;
   let logicalH = 0;
   let dpr = 1;
   let destroyed = false;
+  const pointSizeRange = typeof gl.getParameter === "function" ? gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE) : null;
+  const maxPointSize = pointSizeRange ? pointSizeRange[1] : Infinity;
   const drawGlyphs = () => {
     if (glyphCount === 0 || !msdfTexture) return;
     const floats = glyphCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
@@ -997,6 +1036,7 @@ function createWebGLPointRenderer(canvas) {
       rectCount = 0;
       spriteCount = 0;
       glyphCount = 0;
+      circleQuadCount = 0;
       gl.clearColor(0, 0, 0, 0);
       gl.clear(gl.COLOR_BUFFER_BIT);
     },
@@ -1104,6 +1144,35 @@ function createWebGLPointRenderer(canvas) {
       glyphCount++;
     },
     addCircle(x, y, radius, color, alpha = 1) {
+      const needsQuad = logicalW > 0 && (x < radius || y < radius || x > logicalW - radius || y > logicalH - radius) || radius * 2 * dpr > maxPointSize;
+      if (needsQuad) {
+        const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE;
+        circleQuadData = grow(circleQuadData, (circleQuadCount + 1) * stride);
+        const [qr, qg, qb, qa] = parseColorToRGBA(color);
+        const al = qa * alpha;
+        const quad = [
+          [x - radius, y - radius, 0, 0],
+          [x + radius, y - radius, 1, 0],
+          [x + radius, y + radius, 1, 1],
+          [x - radius, y + radius, 0, 1]
+        ];
+        const order = [0, 1, 2, 0, 2, 3];
+        let o2 = circleQuadCount * stride;
+        for (const i of order) {
+          const [vx, vy, vu, vv] = quad[i];
+          circleQuadData[o2] = vx;
+          circleQuadData[o2 + 1] = vy;
+          circleQuadData[o2 + 2] = vu;
+          circleQuadData[o2 + 3] = vv;
+          circleQuadData[o2 + 4] = qr;
+          circleQuadData[o2 + 5] = qg;
+          circleQuadData[o2 + 6] = qb;
+          circleQuadData[o2 + 7] = al;
+          o2 += FLOATS_PER_SPRITE_VERT;
+        }
+        circleQuadCount++;
+        return;
+      }
       pointData = grow(pointData, (pointCount + 1) * FLOATS_PER_POINT);
       const [r, g, b, a] = parseColorToRGBA(color);
       const o = pointCount * FLOATS_PER_POINT;
@@ -1167,6 +1236,15 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform1f(pUDpr, dpr);
         gl.drawArrays(gl.POINTS, 0, pointCount);
       }
+      if (circleQuadCount > 0) {
+        const floats = circleQuadCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+        gl.useProgram(circleQuadProgram);
+        gl.bindVertexArray(circleQuadVAO);
+        gl.bindBuffer(gl.ARRAY_BUFFER, circleQuadBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, circleQuadData.subarray(0, floats), gl.DYNAMIC_DRAW);
+        gl.uniform2f(cURes, logicalW, logicalH);
+        gl.drawArrays(gl.TRIANGLES, 0, circleQuadCount * VERTS_PER_SPRITE);
+      }
       if (spriteCount > 0 && texture) {
         const floats = spriteCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
         gl.useProgram(spriteProgram);
@@ -1189,14 +1267,17 @@ function createWebGLPointRenderer(canvas) {
       gl.deleteBuffer(rectBuffer);
       gl.deleteBuffer(spriteBuffer);
       gl.deleteBuffer(glyphBuffer);
+      gl.deleteBuffer(circleQuadBuffer);
       gl.deleteVertexArray(pointVAO);
       gl.deleteVertexArray(rectVAO);
       gl.deleteVertexArray(spriteVAO);
       gl.deleteVertexArray(glyphVAO);
+      gl.deleteVertexArray(circleQuadVAO);
       gl.deleteProgram(pointProgram);
       gl.deleteProgram(rectProgram);
       gl.deleteProgram(spriteProgram);
       gl.deleteProgram(msdfProgram);
+      gl.deleteProgram(circleQuadProgram);
       if (texture) gl.deleteTexture(texture);
       if (msdfTexture) gl.deleteTexture(msdfTexture);
     }

package/dist/components/TextEntity.d.ts

@@ -1,4 +1,4 @@
-import { Entity } from '../tree/Entity';
+import { Entity, type ContentProjection } from '../tree/Entity';
 import { IRenderer } from '../renderer/IRenderer';
 export declare class TextEntity extends Entity {
     text: string;
@@ -13,6 +13,11 @@ export declare class TextEntity extends Entity {
     lineWidth: number;
     private isHovered;
     constructor(text: string, atlas: any, maxWidth: number, fontSize?: number);
+    /**
+     * Mirror the rendered text into the DOM content layer: find-in-page, screen
+     * readers, crawlers, and translation see the same string the canvas draws.
+     */
+    getContentProjection(): ContentProjection | null;
     /**
      * Replace the text content. Runs the **cold** measurement pass (re-segment +
      * re-measure) since the glyphs changed, then re-lays out.
@@ -28,6 +33,17 @@ export declare class TextEntity extends Entity {
      * @returns `this` for chaining.
      */
     setMaxWidth(maxWidth: number): this;
+    /**
+     * Set horizontal alignment (`'justify'` stretches wrapped lines flush to
+     * the wrap width; the last line stays ragged) and reflow.
+     */
+    setTextAlign(align: 'left' | 'justify'): this;
+    /**
+     * Plug a hyphenator (word → parts). Break opportunities are baked in during
+     * the cold pass, so this re-prepares the current text. Soft hyphens
+     * (U+00AD) in the text work without one.
+     */
+    setHyphenator(fn: ((word: string) => string[]) | null): this;
     /** Hot pass: place the cached {@link PreparedText} and refresh the a11y box. */
     private applyLayout;
     isPointInside(globalX: number, globalY: number): boolean;