@vectojs/core 1.9.1 → 1.10.0

package/dist/{chunk-BPMNCGU7.js → chunk-ORCPCIJ7.js}

@@ -7,6 +7,15 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   
   
   
+  /**
+   * Cap on the effective device pixel ratio applied by the constructor and
+   * {@link resize}. `undefined` (default) uses the real, uncapped
+   * `devicePixelRatio` — unchanged from prior versions. Set directly, or via
+   * the constructor's third argument; `Scene` (see `SceneOptions.maxDPR`)
+   * keeps this in sync on every {@link resize} call, since the real DPR can
+   * change at runtime (e.g. a window dragged between displays).
+   */
+  
   /**
    * Max circles per batched `fill()`. A single Canvas 2D `fill()` over a path is
    * superlinear in sub-path count, so an unbounded batch is *slower* than many
@@ -27,9 +36,11 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
    *   fullscreen canvas and sizes to the window — pass this for embedded /
    *   custom-container canvases (the Scene does when `disableWindowResize` is
    *   set) so the canvas's own dimensions aren't clobbered by the window's.
+   * @param maxDPR - See {@link maxDPR}.
    */
-  constructor(canvas, size) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);
-    const dpr = getDevicePixelRatio();
+  constructor(canvas, size, maxDPR) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);
+    this.maxDPR = maxDPR;
+    const dpr = this.effectiveDPR();
     this.width = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _ => _.width]), () => ( (typeof window !== "undefined" ? window.innerWidth : canvas.width || 0)));
     this.height = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _2 => _2.height]), () => ( (typeof window !== "undefined" ? window.innerHeight : canvas.height || 0)));
     canvas.width = this.width * dpr;
@@ -51,6 +62,11 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   getContext() {
     return this.ctx;
   }
+  /** Real `devicePixelRatio`, clamped to {@link maxDPR} when set. */
+  effectiveDPR() {
+    const real = getDevicePixelRatio();
+    return this.maxDPR !== void 0 ? Math.min(real, this.maxDPR) : real;
+  }
   /**
    * Resize the backing canvas buffer and re-apply DPR scaling.
    *
@@ -60,7 +76,7 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
    * @param height - New logical height in CSS pixels.
    */
   resize(width, height) {
-    const dpr = getDevicePixelRatio();
+    const dpr = this.effectiveDPR();
     this.width = width;
     this.height = height;
     this.ctx.canvas.width = width * dpr;
@@ -1028,11 +1044,13 @@ function createWebGLPointRenderer(canvas) {
     gl.bindVertexArray(null);
     glyphCount = 0;
   };
-  return {
+  const renderer = {
+    maxDPR: void 0,
     resize(width, height) {
       logicalW = width;
       logicalH = height;
-      dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio || 1 : 1;
+      const realDpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio || 1 : 1;
+      dpr = renderer.maxDPR !== void 0 ? Math.min(realDpr, renderer.maxDPR) : realDpr;
       canvas.width = Math.round(width * dpr);
       canvas.height = Math.round(height * dpr);
       canvas.style.width = `${width}px`;
@@ -1290,6 +1308,7 @@ function createWebGLPointRenderer(canvas) {
       if (msdfTexture) gl.deleteTexture(msdfTexture);
     }
   };
+  return renderer;
 }
 
 // src/renderer/WebGPUParticleSystemManager.ts

package/dist/{chunk-WT2XZHJQ.mjs → chunk-XZEPHCDZ.mjs}

@@ -7,6 +7,15 @@ var CanvasRenderer = class _CanvasRenderer {
   ctx;
   width;
   height;
+  /**
+   * Cap on the effective device pixel ratio applied by the constructor and
+   * {@link resize}. `undefined` (default) uses the real, uncapped
+   * `devicePixelRatio` — unchanged from prior versions. Set directly, or via
+   * the constructor's third argument; `Scene` (see `SceneOptions.maxDPR`)
+   * keeps this in sync on every {@link resize} call, since the real DPR can
+   * change at runtime (e.g. a window dragged between displays).
+   */
+  maxDPR;
   /**
    * Max circles per batched `fill()`. A single Canvas 2D `fill()` over a path is
    * superlinear in sub-path count, so an unbounded batch is *slower* than many
@@ -27,9 +36,11 @@ var CanvasRenderer = class _CanvasRenderer {
    *   fullscreen canvas and sizes to the window — pass this for embedded /
    *   custom-container canvases (the Scene does when `disableWindowResize` is
    *   set) so the canvas's own dimensions aren't clobbered by the window's.
+   * @param maxDPR - See {@link maxDPR}.
    */
-  constructor(canvas, size) {
-    const dpr = getDevicePixelRatio();
+  constructor(canvas, size, maxDPR) {
+    this.maxDPR = maxDPR;
+    const dpr = this.effectiveDPR();
     this.width = size?.width ?? (typeof window !== "undefined" ? window.innerWidth : canvas.width || 0);
     this.height = size?.height ?? (typeof window !== "undefined" ? window.innerHeight : canvas.height || 0);
     canvas.width = this.width * dpr;
@@ -51,6 +62,11 @@ var CanvasRenderer = class _CanvasRenderer {
   getContext() {
     return this.ctx;
   }
+  /** Real `devicePixelRatio`, clamped to {@link maxDPR} when set. */
+  effectiveDPR() {
+    const real = getDevicePixelRatio();
+    return this.maxDPR !== void 0 ? Math.min(real, this.maxDPR) : real;
+  }
   /**
    * Resize the backing canvas buffer and re-apply DPR scaling.
    *
@@ -60,7 +76,7 @@ var CanvasRenderer = class _CanvasRenderer {
    * @param height - New logical height in CSS pixels.
    */
   resize(width, height) {
-    const dpr = getDevicePixelRatio();
+    const dpr = this.effectiveDPR();
     this.width = width;
     this.height = height;
     this.ctx.canvas.width = width * dpr;
@@ -1028,11 +1044,13 @@ function createWebGLPointRenderer(canvas) {
     gl.bindVertexArray(null);
     glyphCount = 0;
   };
-  return {
+  const renderer = {
+    maxDPR: void 0,
     resize(width, height) {
       logicalW = width;
       logicalH = height;
-      dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio || 1 : 1;
+      const realDpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio || 1 : 1;
+      dpr = renderer.maxDPR !== void 0 ? Math.min(realDpr, renderer.maxDPR) : realDpr;
       canvas.width = Math.round(width * dpr);
       canvas.height = Math.round(height * dpr);
       canvas.style.width = `${width}px`;
@@ -1290,6 +1308,7 @@ function createWebGLPointRenderer(canvas) {
       if (msdfTexture) gl.deleteTexture(msdfTexture);
     }
   };
+  return renderer;
 }
 
 // src/renderer/WebGPUParticleSystemManager.ts

package/dist/index.js

@@ -12,7 +12,7 @@ var _chunkBA5HUUDFjs = require('./chunk-BA5HUUDF.js');
 
 
 
-var _chunkBPMNCGU7js = require('./chunk-BPMNCGU7.js');
+var _chunkORCPCIJ7js = require('./chunk-ORCPCIJ7.js');
 
 
 
@@ -708,6 +708,8 @@ var Scene = (_class2 = class _Scene {
   
   
   __init44() {this.disableWindowResize = false}
+  /** See {@link SceneOptions.maxDPR}. `undefined` = uncapped (real DPR). */
+  
   // WebGPU properties
   __init45() {this.destroyed = false}
   __init46() {this.device = null}
@@ -737,6 +739,7 @@ var Scene = (_class2 = class _Scene {
     this.canvas = canvas;
     this.debugA11y = _nullishCoalesce(options.debugA11y, () => ( false));
     this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
+    this.maxDPR = options.maxDPR;
     if (this.disableWindowResize) {
       const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _23 => _23.style, 'optionalAccess', _24 => _24.width]));
       const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _25 => _25.style, 'optionalAccess', _26 => _26.height]));
@@ -775,9 +778,10 @@ var Scene = (_class2 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkBPMNCGU7js.CanvasRenderer)(
+      this.renderer = new (0, _chunkORCPCIJ7js.CanvasRenderer)(
         canvas,
-        this.disableWindowResize ? { width: this.width, height: this.height } : void 0
+        this.disableWindowResize ? { width: this.width, height: this.height } : void 0,
+        this.maxDPR
       );
     }
     if (typeof document !== "undefined") {
@@ -903,6 +907,7 @@ var Scene = (_class2 = class _Scene {
       if (canvas.parentElement) canvas.parentElement.appendChild(gl);
       const pr = _Scene.webglCreator ? _Scene.webglCreator(gl) : null;
       if (pr) {
+        pr.maxDPR = this.maxDPR;
         pr.resize(this.width, this.height);
         this.glCanvas = gl;
         this.pointRenderer = pr;
@@ -1409,7 +1414,7 @@ var Scene = (_class2 = class _Scene {
         this.syncOptionalAttribute(
           el,
           "href",
-          attrs.href === void 0 ? void 0 : _chunkBPMNCGU7js.sanitizeUrl.call(void 0, attrs.href)
+          attrs.href === void 0 ? void 0 : _chunkORCPCIJ7js.sanitizeUrl.call(void 0, attrs.href)
         );
         this.syncOptionalAttribute(el, "target", attrs.target);
       }
@@ -2419,7 +2424,7 @@ var Scene = (_class2 = class _Scene {
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkBPMNCGU7js.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkORCPCIJ7js.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -2431,9 +2436,13 @@ var Scene = (_class2 = class _Scene {
     this.height = height;
     this.contentFontEpoch++;
     if (typeof this.renderer.resize === "function") {
+      if ("maxDPR" in this.renderer) this.renderer.maxDPR = this.maxDPR;
       this.renderer.resize(width, height);
     }
-    _optionalChain([this, 'access', _99 => _99.pointRenderer, 'optionalAccess', _100 => _100.resize, 'call', _101 => _101(width, height)]);
+    if (this.pointRenderer) {
+      this.pointRenderer.maxDPR = this.maxDPR;
+      this.pointRenderer.resize(width, height);
+    }
     if (this.gpuCanvas) {
       this.gpuCanvas.width = width;
       this.gpuCanvas.height = height;
@@ -2766,7 +2775,7 @@ var GridTextEntity = (_class4 = class extends _chunkGKLTTGBRjs.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _102 => _102[0], 'optionalAccess', _103 => _103.length]) || 0;
+    this.cols = _optionalChain([ascii, 'access', _99 => _99[0], 'optionalAccess', _100 => _100.length]) || 0;
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -2876,7 +2885,7 @@ var SplineEntity = (_class5 = class extends _chunkGKLTTGBRjs.Entity {
     this.width = this.bounds.width;
     this.height = this.bounds.height;
     const isGradient = (c) => c !== null && !Array.isArray(c);
-    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _104 => _104.doc, 'access', _105 => _105.equations, 'optionalAccess', _106 => _106.some, 'call', _107 => _107((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _108 => _108.doc, 'access', _109 => _109.paths, 'optionalAccess', _110 => _110.some, 'call', _111 => _111((p) => isGradient(p.color_rgb))]), () => ( false)));
+    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _101 => _101.doc, 'access', _102 => _102.equations, 'optionalAccess', _103 => _103.some, 'call', _104 => _104((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _105 => _105.doc, 'access', _106 => _106.paths, 'optionalAccess', _107 => _107.some, 'call', _108 => _108((p) => isGradient(p.color_rgb))]), () => ( false)));
     this.interactive = true;
   }
   computeBounds() {
@@ -3296,7 +3305,7 @@ var SpatialHashGrid = (_class6 = class {
     const keys = this.entityCells.get(id);
     if (!keys) return;
     for (const key of keys) {
-      _optionalChain([this, 'access', _112 => _112.grid, 'access', _113 => _113.get, 'call', _114 => _114(key), 'optionalAccess', _115 => _115.delete, 'call', _116 => _116(id)]);
+      _optionalChain([this, 'access', _109 => _109.grid, 'access', _110 => _110.get, 'call', _111 => _111(key), 'optionalAccess', _112 => _112.delete, 'call', _113 => _113(id)]);
     }
     this.entityCells.delete(id);
   }
@@ -3407,7 +3416,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkGKLTTGBRjs.Entity {
     if (!local) return false;
     return local.x >= 0 && local.x <= w && local.y >= 0 && local.y <= h;
   }
-  add(_child) {
+  add(..._children) {
     console.warn(`DOMPortalEntity (${this.id}) is a leaf node. Child entities are not supported.`);
     return this;
   }
@@ -3432,8 +3441,8 @@ var DOMPortalEntity = (_class7 = class extends _chunkGKLTTGBRjs.Entity {
 }, _class7);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkBPMNCGU7js.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkBPMNCGU7js.WebGPUParticleSystemManager);
+Scene.registerWebGLPointRendererCreator(_chunkORCPCIJ7js.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkORCPCIJ7js.WebGPUParticleSystemManager);
 
 
 
@@ -3484,4 +3493,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkBPMNCGU7js.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.CanvasRenderer = _chunkBPMNCGU7js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkGKLTTGBRjs.Easing; exports.Entity = _chunkGKLTTGBRjs.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.LayoutEngine = _chunkBA5HUUDFjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBA5HUUDFjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk4AR425ARjs.LayoutWorkerManager; exports.MSDFFont = _chunkGKLTTGBRjs.MSDFFont; exports.MSDFTextEntity = _chunkGKLTTGBRjs.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SVGEntity = _chunkGKLTTGBRjs.SVGEntity; exports.SVGRenderer = _chunkBPMNCGU7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkGKLTTGBRjs.SpringDriver; exports.SpringPhysics = _chunkGKLTTGBRjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkGKLTTGBRjs.TweenDriver; exports.VectoJSEvent = _chunkGKLTTGBRjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkBPMNCGU7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunkGKLTTGBRjs.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkBA5HUUDFjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkBPMNCGU7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunkGKLTTGBRjs.cssLineBoxBaseline; exports.isSafeUrl = _chunkBPMNCGU7js.isSafeUrl; exports.isTweenConfig = _chunkGKLTTGBRjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkBPMNCGU7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.prepareContentGrid = _chunkGKLTTGBRjs.prepareContentGrid; exports.sanitizeUrl = _chunkBPMNCGU7js.sanitizeUrl;
+exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.CanvasRenderer = _chunkORCPCIJ7js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkGKLTTGBRjs.Easing; exports.Entity = _chunkGKLTTGBRjs.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.LayoutEngine = _chunkBA5HUUDFjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBA5HUUDFjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk4AR425ARjs.LayoutWorkerManager; exports.MSDFFont = _chunkGKLTTGBRjs.MSDFFont; exports.MSDFTextEntity = _chunkGKLTTGBRjs.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SVGEntity = _chunkGKLTTGBRjs.SVGEntity; exports.SVGRenderer = _chunkORCPCIJ7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkGKLTTGBRjs.SpringDriver; exports.SpringPhysics = _chunkGKLTTGBRjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkGKLTTGBRjs.TweenDriver; exports.VectoJSEvent = _chunkGKLTTGBRjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkORCPCIJ7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunkGKLTTGBRjs.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkBA5HUUDFjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkORCPCIJ7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunkGKLTTGBRjs.cssLineBoxBaseline; exports.isSafeUrl = _chunkORCPCIJ7js.isSafeUrl; exports.isTweenConfig = _chunkGKLTTGBRjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkORCPCIJ7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.prepareContentGrid = _chunkGKLTTGBRjs.prepareContentGrid; exports.sanitizeUrl = _chunkORCPCIJ7js.sanitizeUrl;

package/dist/index.mjs

@@ -12,7 +12,7 @@ import {
   isSafeUrl,
   parseColorToRGBA,
   sanitizeUrl
-} from "./chunk-WT2XZHJQ.mjs";
+} from "./chunk-XZEPHCDZ.mjs";
 import {
   Easing,
   Entity,
@@ -708,6 +708,8 @@ var Scene = class _Scene {
   width;
   height;
   disableWindowResize = false;
+  /** See {@link SceneOptions.maxDPR}. `undefined` = uncapped (real DPR). */
+  maxDPR;
   // WebGPU properties
   destroyed = false;
   device = null;
@@ -737,6 +739,7 @@ var Scene = class _Scene {
     this.canvas = canvas;
     this.debugA11y = options.debugA11y ?? false;
     this.disableWindowResize = options.disableWindowResize ?? false;
+    this.maxDPR = options.maxDPR;
     if (this.disableWindowResize) {
       const styleWidth = parseInlinePx(canvas.style?.width);
       const styleHeight = parseInlinePx(canvas.style?.height);
@@ -777,7 +780,8 @@ var Scene = class _Scene {
     } else {
       this.renderer = new CanvasRenderer(
         canvas,
-        this.disableWindowResize ? { width: this.width, height: this.height } : void 0
+        this.disableWindowResize ? { width: this.width, height: this.height } : void 0,
+        this.maxDPR
       );
     }
     if (typeof document !== "undefined") {
@@ -903,6 +907,7 @@ var Scene = class _Scene {
       if (canvas.parentElement) canvas.parentElement.appendChild(gl);
       const pr = _Scene.webglCreator ? _Scene.webglCreator(gl) : null;
       if (pr) {
+        pr.maxDPR = this.maxDPR;
         pr.resize(this.width, this.height);
         this.glCanvas = gl;
         this.pointRenderer = pr;
@@ -2431,9 +2436,13 @@ var Scene = class _Scene {
     this.height = height;
     this.contentFontEpoch++;
     if (typeof this.renderer.resize === "function") {
+      if ("maxDPR" in this.renderer) this.renderer.maxDPR = this.maxDPR;
       this.renderer.resize(width, height);
     }
-    this.pointRenderer?.resize(width, height);
+    if (this.pointRenderer) {
+      this.pointRenderer.maxDPR = this.maxDPR;
+      this.pointRenderer.resize(width, height);
+    }
     if (this.gpuCanvas) {
       this.gpuCanvas.width = width;
       this.gpuCanvas.height = height;
@@ -3407,7 +3416,7 @@ var DOMPortalEntity = class extends Entity {
     if (!local) return false;
     return local.x >= 0 && local.x <= w && local.y >= 0 && local.y <= h;
   }
-  add(_child) {
+  add(..._children) {
     console.warn(`DOMPortalEntity (${this.id}) is a leaf node. Child entities are not supported.`);
     return this;
   }

package/dist/renderer/CanvasRenderer.d.ts

@@ -3,6 +3,15 @@ export declare class CanvasRenderer implements IRenderer {
     private ctx;
     private width;
     private height;
+    /**
+     * Cap on the effective device pixel ratio applied by the constructor and
+     * {@link resize}. `undefined` (default) uses the real, uncapped
+     * `devicePixelRatio` — unchanged from prior versions. Set directly, or via
+     * the constructor's third argument; `Scene` (see `SceneOptions.maxDPR`)
+     * keeps this in sync on every {@link resize} call, since the real DPR can
+     * change at runtime (e.g. a window dragged between displays).
+     */
+    maxDPR?: number;
     /**
      * Max circles per batched `fill()`. A single Canvas 2D `fill()` over a path is
      * superlinear in sub-path count, so an unbounded batch is *slower* than many
@@ -21,11 +30,12 @@ export declare class CanvasRenderer implements IRenderer {
      *   fullscreen canvas and sizes to the window — pass this for embedded /
      *   custom-container canvases (the Scene does when `disableWindowResize` is
      *   set) so the canvas's own dimensions aren't clobbered by the window's.
+     * @param maxDPR - See {@link maxDPR}.
      */
     constructor(canvas: HTMLCanvasElement, size?: {
         width: number;
         height: number;
-    });
+    }, maxDPR?: number);
     /**
      * Expose the underlying `CanvasRenderingContext2D` for operations not
      * covered by the {@link IRenderer} interface.
@@ -33,6 +43,8 @@ export declare class CanvasRenderer implements IRenderer {
      * @returns The raw 2D rendering context.
      */
     getContext(): CanvasRenderingContext2D;
+    /** Real `devicePixelRatio`, clamped to {@link maxDPR} when set. */
+    private effectiveDPR;
     /**
      * Resize the backing canvas buffer and re-apply DPR scaling.
      *

package/dist/renderer/WebGLPointRenderer.d.ts

@@ -7,6 +7,18 @@
 export interface PointRenderer {
     /** Resize the backing buffer + GL viewport to a logical `w × h` (DPR applied). */
     resize(width: number, height: number): void;
+    /**
+     * Cap on the effective device pixel ratio applied by {@link resize}.
+     * `undefined` (default) uses the real, uncapped `devicePixelRatio`. Set
+     * before calling `resize()` for it to take effect on that call (matches
+     * {@link import('../tree/Scene').SceneOptions.maxDPR} — `Scene` sets this
+     * once at construction and again before every `resize()` call, since a
+     * factory function has no other way to receive the option: the WebGL point
+     * layer's creator is a plain `(canvas) => PointRenderer` registered once by
+     * `@vectojs/core`'s module init, with no room for a per-Scene constructor
+     * argument).
+     */
+    maxDPR?: number;
     /** Begin a frame: reset the accumulated primitive buffers. */
     begin(): void;
     /** Add one circle in world (CSS-pixel) coordinates; `alpha` multiplies the color's. */

package/dist/renderer.js

@@ -4,11 +4,11 @@
 
 
 
-var _chunkBPMNCGU7js = require('./chunk-BPMNCGU7.js');
+var _chunkORCPCIJ7js = require('./chunk-ORCPCIJ7.js');
 
 
 
 
 
 
-exports.CanvasRenderer = _chunkBPMNCGU7js.CanvasRenderer; exports.SVGRenderer = _chunkBPMNCGU7js.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkBPMNCGU7js.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkBPMNCGU7js.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkBPMNCGU7js.parseColorToRGBA;
+exports.CanvasRenderer = _chunkORCPCIJ7js.CanvasRenderer; exports.SVGRenderer = _chunkORCPCIJ7js.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkORCPCIJ7js.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkORCPCIJ7js.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkORCPCIJ7js.parseColorToRGBA;

package/dist/renderer.mjs

@@ -4,7 +4,7 @@ import {
   WebGPUParticleSystemManager,
   createWebGLPointRenderer,
   parseColorToRGBA
-} from "./chunk-WT2XZHJQ.mjs";
+} from "./chunk-XZEPHCDZ.mjs";
 export {
   CanvasRenderer,
   SVGRenderer,

package/dist/tree/DOMPortalEntity.d.ts

@@ -13,7 +13,7 @@ export declare class DOMPortalEntity extends Entity {
     lastOpacity: string;
     constructor(domElement: HTMLElement, width?: number, height?: number, id?: string);
     isPointInside(globalX: number, globalY: number): boolean;
-    add(_child: Entity): this;
+    add(..._children: Entity[]): this;
     render(): void;
     destroy(): void;
 }

package/dist/tree/Scene.d.ts

@@ -70,6 +70,21 @@ export interface SceneOptions {
      * Useful when Vecto is running inside a custom layout container or offscreen canvas.
      */
     disableWindowResize?: boolean;
+    /**
+     * Cap the effective device pixel ratio used to size the Canvas2D and WebGL
+     * point-layer backing stores. `undefined` (default) reads the real,
+     * uncapped `window.devicePixelRatio` — unchanged from prior versions.
+     * Backing-store render cost scales with `logical size × dpr²`, so a
+     * full-screen HiDPI scene (`pointBackend: 'webgl'` in particular) can
+     * overrun its frame budget on a DPR-3 display while running fine on the
+     * DPR-1 dev machine it was tuned on (findings.md, 2026-07-16). `maxDPR: 2`
+     * keeps the display retina-crisp (2x already exceeds what most eyes
+     * resolve) while roughly halving the backing-store pixel count at DPR 3.
+     * Applied at construction and re-applied on every {@link resize} call
+     * (including the automatic window-resize listener), since the real DPR
+     * can change at runtime (a window dragged between displays).
+     */
+    maxDPR?: number;
     /**
      * Enable automatic throttling to 2 FPS when the scene is static (no active transitions
      * and not marked dirty) to save power/CPU. Default is `true`.
@@ -196,6 +211,8 @@ export declare class Scene {
     width: number;
     height: number;
     private disableWindowResize;
+    /** See {@link SceneOptions.maxDPR}. `undefined` = uncapped (real DPR). */
+    maxDPR?: number;
     private destroyed;
     private device;
     private deviceLost;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "publishConfig": {
     "access": "public"
   },