@vectojs/core 1.8.0 → 1.9.0

package/dist/{chunk-FIQAIF55.js → chunk-GKLTTGBR.js}

@@ -372,10 +372,18 @@ var Entity = (_class4 = class {
    * `child.parent` is only ever `null` or `this`'s ultimate owner, so this
    * check is O(1) for the overwhelming common case (a brand-new entity).
    *
-   * @param child - The entity to add as a child.
+   * Accepts multiple children in one call (`parent.add(a, b, c)`); each is
+   * attached in argument order with the same detach-then-attach semantics.
+   *
+   * @param children - One or more entities to add as children.
    * @returns `this` for method chaining.
    */
-  add(child) {
+  add(...children) {
+    for (const child of children) this._addOne(child);
+    return this;
+  }
+  /** Attach a single child (the O(1) common path). See {@link add}. */
+  _addOne(child) {
     if (child.parent) child.parent.remove(child);
     child.parent = this;
     this.children.push(child);
@@ -385,7 +393,6 @@ var Entity = (_class4 = class {
       s.markDirty();
       child._notifyMounted();
     }
-    return this;
   }
   /** Called once when this entity becomes attached to a live Scene. Override to react. */
   onMounted() {
@@ -417,6 +424,24 @@ var Entity = (_class4 = class {
     }
     return this;
   }
+  /**
+   * Assign several own properties in one call, each through its normal setter
+   * (so a property with a configured {@link setTransition} still animates, and
+   * `interactive` still flags the scene for a11y reorder). A construction-time
+   * ergonomic only — it is a plain `for…in` over the given object and touches
+   * no per-frame path.
+   *
+   * @param props - Partial set of this entity's own properties to assign.
+   * @returns `this` for method chaining.
+   * @example rect.set({ x: 40, y: 40, width: 120, fill: '#38bdf8' });
+   */
+  set(props) {
+    for (const key in props) {
+      const value = props[key];
+      if (value !== void 0) this[key] = value;
+    }
+    return this;
+  }
   /**
    * Set the local position of this entity.
    *

package/dist/{chunk-RQ2ETTBN.mjs → chunk-J2P6QZJV.mjs}

@@ -372,10 +372,18 @@ var Entity = class {
    * `child.parent` is only ever `null` or `this`'s ultimate owner, so this
    * check is O(1) for the overwhelming common case (a brand-new entity).
    *
-   * @param child - The entity to add as a child.
+   * Accepts multiple children in one call (`parent.add(a, b, c)`); each is
+   * attached in argument order with the same detach-then-attach semantics.
+   *
+   * @param children - One or more entities to add as children.
    * @returns `this` for method chaining.
    */
-  add(child) {
+  add(...children) {
+    for (const child of children) this._addOne(child);
+    return this;
+  }
+  /** Attach a single child (the O(1) common path). See {@link add}. */
+  _addOne(child) {
     if (child.parent) child.parent.remove(child);
     child.parent = this;
     this.children.push(child);
@@ -385,7 +393,6 @@ var Entity = class {
       s.markDirty();
       child._notifyMounted();
     }
-    return this;
   }
   /** Called once when this entity becomes attached to a live Scene. Override to react. */
   onMounted() {
@@ -417,6 +424,24 @@ var Entity = class {
     }
     return this;
   }
+  /**
+   * Assign several own properties in one call, each through its normal setter
+   * (so a property with a configured {@link setTransition} still animates, and
+   * `interactive` still flags the scene for a11y reorder). A construction-time
+   * ergonomic only — it is a plain `for…in` over the given object and touches
+   * no per-frame path.
+   *
+   * @param props - Partial set of this entity's own properties to assign.
+   * @returns `this` for method chaining.
+   * @example rect.set({ x: 40, y: 40, width: 120, fill: '#38bdf8' });
+   */
+  set(props) {
+    for (const key in props) {
+      const value = props[key];
+      if (value !== void 0) this[key] = value;
+    }
+    return this;
+  }
   /**
    * Set the local position of this entity.
    *

package/dist/components/Circle.d.ts

@@ -0,0 +1,48 @@
+import { Entity, type Bounds, type BatchCircle } from '../tree/Entity';
+import type { IRenderer } from '../renderer/IRenderer';
+/** Construction options for {@link Circle}. */
+export interface CircleOptions {
+    /** Radius in local units. Default `0`. */
+    radius?: number;
+    /** CSS fill color, or `null` for no fill. Default `'#38bdf8'`. */
+    fill?: string | null;
+    /** CSS stroke color, or `null` for no stroke. Default `null`. */
+    stroke?: string | null;
+    /** Stroke width in local units. Default `1`. */
+    strokeWidth?: number;
+}
+/**
+ * A concrete circle primitive centered on its local origin `(0, 0)`.
+ * Instantiate directly — no subclassing:
+ *
+ * @example
+ * const dot = new Circle({ radius: 24, fill: '#f97316' });
+ * dot.set({ x: 100, y: 100 });
+ * scene.add(dot);
+ *
+ * The accessibility shadow box is sized to the circle's bounding square and
+ * offset by `-radius` so it covers the drawn disc (whose center is the entity
+ * origin). A solid-fill (unstroked) Circle opts into the point-batch fast path
+ * via {@link getBatchCircle}; a stroked circle renders through the normal path.
+ */
+export declare class Circle extends Entity {
+    fill: string | null;
+    stroke: string | null;
+    strokeWidth: number;
+    private _radius;
+    constructor(opts?: CircleOptions);
+    get radius(): number;
+    set radius(v: number);
+    /** Keep the a11y box (a square around the centered disc) in sync with radius. */
+    private syncBox;
+    getBounds(): Bounds;
+    /**
+     * A solid-fill, unstroked circle opts into the renderer's circle batch
+     * (center = entity origin, radius scaled by world scale). A stroke needs the
+     * exact Canvas path, so return `null` there. Read each frame, so an animated
+     * `fill`/`radius` still batches.
+     */
+    getBatchCircle(): BatchCircle | null;
+    isPointInside(globalX: number, globalY: number): boolean;
+    render(renderer: IRenderer): void;
+}

package/dist/components/Group.d.ts

@@ -0,0 +1,24 @@
+import { Entity } from '../tree/Entity';
+import type { IRenderer } from '../renderer/IRenderer';
+/**
+ * A transform-only container: it draws nothing itself and is invisible to
+ * hit-testing, existing solely to compose one transform (`x`/`y`/`scale`/
+ * `rotation`/`opacity`) onto a set of children. Instantiate directly and pass
+ * children inline:
+ *
+ * @example
+ * const toolbar = new Group(saveBtn, undoBtn, redoBtn);
+ * toolbar.set({ x: 20, y: 20 });
+ * scene.add(toolbar);
+ *
+ * `isPointInside` returns `false` so the group never becomes the pick target;
+ * `Scene`'s hit-test recurses into children before testing a parent, so the
+ * children remain independently interactive. `render` is a no-op — children are
+ * drawn by the scene's normal tree walk under this group's accumulated
+ * transform.
+ */
+export declare class Group extends Entity {
+    constructor(...children: Entity[]);
+    isPointInside(): boolean;
+    render(_renderer: IRenderer): void;
+}

package/dist/components/Rect.d.ts

@@ -0,0 +1,48 @@
+import { Entity, type Bounds, type BatchRect } from '../tree/Entity';
+import type { IRenderer } from '../renderer/IRenderer';
+/** Construction options for {@link Rect}. */
+export interface RectOptions {
+    /** Width in local units. Default `0`. */
+    width?: number;
+    /** Height in local units. Default `0`. */
+    height?: number;
+    /** CSS fill color, or `null` for no fill. Default `'#38bdf8'`. */
+    fill?: string | null;
+    /** CSS stroke color, or `null` for no stroke. Default `null`. */
+    stroke?: string | null;
+    /** Stroke width in local units. Default `1`. */
+    strokeWidth?: number;
+    /** Corner radius in local units (uniform). Default `0` (sharp corners). */
+    radius?: number;
+}
+/**
+ * A concrete axis-aligned rectangle primitive drawn from its local origin
+ * `(0, 0)` to `(width, height)`. Instantiate directly — no subclassing:
+ *
+ * @example
+ * const box = new Rect({ width: 120, height: 64, fill: '#38bdf8', radius: 8 });
+ * box.set({ x: 40, y: 40 });
+ * scene.add(box);
+ *
+ * The box matches the entity's `width`/`height`, so its accessibility shadow
+ * node lines up with what's drawn. A solid-fill, non-rounded, unstroked Rect
+ * opts into the WebGL instanced-rectangle fast path via {@link getBatchRect};
+ * rounded or stroked rectangles render through the normal Canvas path.
+ */
+export declare class Rect extends Entity {
+    fill: string | null;
+    stroke: string | null;
+    strokeWidth: number;
+    radius: number;
+    constructor(opts?: RectOptions);
+    getBounds(): Bounds;
+    /**
+     * Solid-fill, square-cornered, unstroked rectangles opt into the GPU
+     * instanced-rect batch (WebGL `pointBackend` only). Any stroke or corner
+     * radius needs the exact Canvas path, so return `null` to fall back to
+     * {@link render}. Read each frame, so an animated `fill` still batches.
+     */
+    getBatchRect(): BatchRect | null;
+    isPointInside(globalX: number, globalY: number): boolean;
+    render(renderer: IRenderer): void;
+}

package/dist/index.d.ts

@@ -10,6 +10,9 @@ export * from './tree/Scene';
 export * from './components/TextEntity';
 export * from './components/GridTextEntity';
 export * from './components/SplineEntity';
+export * from './components/Rect';
+export * from './components/Circle';
+export * from './components/Group';
 export * from './layout/LayoutEngine';
 export * from './layout/measure';
 export * from './text/MSDFFont';

package/dist/index.js

@@ -27,7 +27,7 @@ var _chunkBPMNCGU7js = require('./chunk-BPMNCGU7.js');
 
 
 
-var _chunkFIQAIF55js = require('./chunk-FIQAIF55.js');
+var _chunkGKLTTGBRjs = require('./chunk-GKLTTGBR.js');
 
 
 
@@ -44,7 +44,7 @@ var PARTICLE_OFFSET_ORIGIN_X = 4;
 var PARTICLE_OFFSET_ORIGIN_Y = 5;
 var PARTICLE_OFFSET_SIZE = 6;
 var PARTICLE_OFFSET_LIFE = 7;
-var ComputeParticleEntity = (_class = class extends _chunkFIQAIF55js.Entity {
+var ComputeParticleEntity = (_class = class extends _chunkGKLTTGBRjs.Entity {
   
   
   
@@ -755,7 +755,7 @@ var Scene = (_class2 = class _Scene {
     this.a11ySyncInterval = _nullishCoalesce(options.a11ySyncInterval, () => ( 0));
     this.contentProjectionEnabled = _nullishCoalesce(options.contentProjection, () => ( true));
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
-    this.root = new class RootEntity extends _chunkFIQAIF55js.Entity {
+    this.root = new class RootEntity extends _chunkGKLTTGBRjs.Entity {
       isPointInside() {
         return false;
       }
@@ -764,7 +764,7 @@ var Scene = (_class2 = class _Scene {
       }
     }("root");
     this.root._scene = this;
-    this.overlayRoot = new class OverlayRoot extends _chunkFIQAIF55js.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunkGKLTTGBRjs.Entity {
       isPointInside() {
         return false;
       }
@@ -915,7 +915,7 @@ var Scene = (_class2 = class _Scene {
     };
     if (typeof document !== "undefined" && document.fonts) {
       this.fontLoadHandler = () => {
-        _chunkFIQAIF55js.clearCssLineBoxMetrics.call(void 0, );
+        _chunkGKLTTGBRjs.clearCssLineBoxMetrics.call(void 0, );
         this.contentFontEpoch++;
         this.markDirty();
       };
@@ -1259,15 +1259,15 @@ var Scene = (_class2 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
-          node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("hover", node, e, false));
         });
         el.addEventListener("mouseleave", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.05)";
-          node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
         const releasePointer = (event) => {
@@ -1283,32 +1283,32 @@ var Scene = (_class2 = class _Scene {
         };
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener("pointercancel", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("pointercancel", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointercancel", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -1368,7 +1368,7 @@ var Scene = (_class2 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -1529,7 +1529,7 @@ var Scene = (_class2 = class _Scene {
       el.addEventListener(
         "wheel",
         (e2) => {
-          node.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)("wheel", node, e2));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("wheel", node, e2));
         },
         { passive: false }
       );
@@ -1560,7 +1560,7 @@ var Scene = (_class2 = class _Scene {
           lineElement.style.position = "absolute";
           lineElement.dir = "auto";
           lineElement.style.left = `${line.x}px`;
-          lineElement.style.top = `${line.y + line.baseline - _chunkFIQAIF55js.cssLineBoxBaseline.call(void 0, lineFont, lineHeight2)}px`;
+          lineElement.style.top = `${line.y + line.baseline - _chunkGKLTTGBRjs.cssLineBoxBaseline.call(void 0, lineFont, lineHeight2)}px`;
           lineElement.style.whiteSpace = "pre";
           if (lineFont) lineElement.style.font = lineFont;
           lineElement.style.lineHeight = `${lineHeight2}px`;
@@ -1612,7 +1612,7 @@ var Scene = (_class2 = class _Scene {
     const { a, b, c, d, e, f } = node.getWorldTransform();
     const contentX = _nullishCoalesce(projection.contentX, () => ( 0));
     const contentY = _nullishCoalesce(projection.contentY, () => ( 0));
-    const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - _chunkFIQAIF55js.cssLineBoxBaseline.call(void 0, font, _nullishCoalesce(projection.lineHeight, () => ( 16)));
+    const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - _chunkGKLTTGBRjs.cssLineBoxBaseline.call(void 0, font, _nullishCoalesce(projection.lineHeight, () => ( 16)));
     const localY = contentY + baselineOffset;
     el.style.left = `${e + a * contentX + c * localY}px`;
     el.style.top = `${f + b * contentX + d * localY}px`;
@@ -1684,7 +1684,7 @@ var Scene = (_class2 = class _Scene {
         lineElement.dataset.vectoGridLine = `${lineIndex}`;
         lineElement.style.position = "absolute";
         lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _68 => _68.x]), () => ( 0))}px`;
-        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _69 => _69.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _chunkFIQAIF55js.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
+        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _69 => _69.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _chunkGKLTTGBRjs.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
         lineElement.style.width = `${gridLine.width}px`;
         lineElement.style.height = `${lineHeight}px`;
         lineElement.style.whiteSpace = "pre";
@@ -2616,7 +2616,7 @@ function defaultMeasurer() {
   if (sharedMeasurer === void 0) sharedMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class3 = class extends _chunkFIQAIF55js.Entity {
+var TextEntity = (_class3 = class extends _chunkGKLTTGBRjs.Entity {
   
   
   
@@ -2742,7 +2742,7 @@ var TextEntity = (_class3 = class extends _chunkFIQAIF55js.Entity {
 }, _class3);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class4 = class extends _chunkFIQAIF55js.Entity {
+var GridTextEntity = (_class4 = class extends _chunkGKLTTGBRjs.Entity {
   
   __init68() {this.fillStyle = "#ffffff"}
   __init69() {this.grid = []}
@@ -2836,7 +2836,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class5 = class extends _chunkFIQAIF55js.Entity {
+var SplineEntity = (_class5 = class extends _chunkGKLTTGBRjs.Entity {
   
   
   
@@ -3110,6 +3110,128 @@ async function loadSpline(url) {
   return await res.json();
 }
 
+// src/components/Rect.ts
+var Rect = class extends _chunkGKLTTGBRjs.Entity {
+  
+  
+  
+  
+  constructor(opts = {}) {
+    super();
+    this.width = _nullishCoalesce(opts.width, () => ( 0));
+    this.height = _nullishCoalesce(opts.height, () => ( 0));
+    this.fill = opts.fill === void 0 ? "#38bdf8" : opts.fill;
+    this.stroke = _nullishCoalesce(opts.stroke, () => ( null));
+    this.strokeWidth = _nullishCoalesce(opts.strokeWidth, () => ( 1));
+    this.radius = _nullishCoalesce(opts.radius, () => ( 0));
+  }
+  getBounds() {
+    return { x: 0, y: 0, width: this.width, height: this.height };
+  }
+  /**
+   * Solid-fill, square-cornered, unstroked rectangles opt into the GPU
+   * instanced-rect batch (WebGL `pointBackend` only). Any stroke or corner
+   * radius needs the exact Canvas path, so return `null` to fall back to
+   * {@link render}. Read each frame, so an animated `fill` still batches.
+   */
+  getBatchRect() {
+    if (!this.fill || this.stroke || this.radius > 0) return null;
+    return { width: this.width, height: this.height, color: this.fill };
+  }
+  isPointInside(globalX, globalY) {
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    return local.x >= 0 && local.x <= this.width && local.y >= 0 && local.y <= this.height;
+  }
+  render(renderer) {
+    renderer.beginPath();
+    if (this.radius > 0) {
+      renderer.roundRect(0, 0, this.width, this.height, this.radius);
+    } else {
+      renderer.moveTo(0, 0);
+      renderer.lineTo(this.width, 0);
+      renderer.lineTo(this.width, this.height);
+      renderer.lineTo(0, this.height);
+      renderer.closePath();
+    }
+    if (this.fill) renderer.fill(this.fill);
+    if (this.stroke) renderer.stroke(this.stroke, this.strokeWidth);
+  }
+};
+
+// src/components/Circle.ts
+var Circle = class extends _chunkGKLTTGBRjs.Entity {
+  
+  
+  
+  
+  constructor(opts = {}) {
+    super();
+    this._radius = _nullishCoalesce(opts.radius, () => ( 0));
+    this.fill = opts.fill === void 0 ? "#38bdf8" : opts.fill;
+    this.stroke = _nullishCoalesce(opts.stroke, () => ( null));
+    this.strokeWidth = _nullishCoalesce(opts.strokeWidth, () => ( 1));
+    this.syncBox();
+  }
+  get radius() {
+    return this._radius;
+  }
+  set radius(v) {
+    this._radius = v;
+    this.syncBox();
+  }
+  /** Keep the a11y box (a square around the centered disc) in sync with radius. */
+  syncBox() {
+    this.width = this._radius * 2;
+    this.height = this._radius * 2;
+    this.a11yOffsetX = -this._radius;
+    this.a11yOffsetY = -this._radius;
+  }
+  getBounds() {
+    return {
+      x: -this._radius,
+      y: -this._radius,
+      width: this._radius * 2,
+      height: this._radius * 2
+    };
+  }
+  /**
+   * A solid-fill, unstroked circle opts into the renderer's circle batch
+   * (center = entity origin, radius scaled by world scale). A stroke needs the
+   * exact Canvas path, so return `null` there. Read each frame, so an animated
+   * `fill`/`radius` still batches.
+   */
+  getBatchCircle() {
+    if (!this.fill || this.stroke) return null;
+    return { radius: this._radius, color: this.fill };
+  }
+  isPointInside(globalX, globalY) {
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    return local.x * local.x + local.y * local.y <= this._radius * this._radius;
+  }
+  render(renderer) {
+    renderer.beginPath();
+    renderer.arc(0, 0, this._radius, 0, Math.PI * 2);
+    renderer.closePath();
+    if (this.fill) renderer.fill(this.fill);
+    if (this.stroke) renderer.stroke(this.stroke, this.strokeWidth);
+  }
+};
+
+// src/components/Group.ts
+var Group = class extends _chunkGKLTTGBRjs.Entity {
+  constructor(...children) {
+    super();
+    if (children.length > 0) this.add(...children);
+  }
+  isPointInside() {
+    return false;
+  }
+  render(_renderer) {
+  }
+};
+
 // src/math/SpatialHashGrid.ts
 var SpatialHashGrid = (_class6 = class {
   
@@ -3205,7 +3327,7 @@ var SpatialHashGrid = (_class6 = class {
 }, _class6);
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class7 = class extends _chunkFIQAIF55js.Entity {
+var DOMPortalEntity = (_class7 = class extends _chunkGKLTTGBRjs.Entity {
   
   __init80() {this.isDOMPortal = true}
   __init81() {this.domListeners = []}
@@ -3247,7 +3369,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkFIQAIF55js.Entity {
       ];
       for (const type of events) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)(type, this, e));
+          this.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)(type, this, e));
         };
         this.domElement.addEventListener(type, handler);
         this.domListeners.push({ type, handler, capture: false });
@@ -3258,7 +3380,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkFIQAIF55js.Entity {
       ];
       for (const { native, vecto } of hoverEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)(vecto, this, e, false));
+          this.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)(vecto, this, e, false));
         };
         this.domElement.addEventListener(native, handler);
         this.domListeners.push({ type: native, handler, capture: false });
@@ -3266,7 +3388,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkFIQAIF55js.Entity {
       const focusEvents = ["focus", "blur"];
       for (const type of focusEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkFIQAIF55js.VectoJSEvent)(type, this, e, true));
+          this.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)(type, this, e, true));
         };
         this.domElement.addEventListener(type, handler, true);
         this.domListeners.push({ type, handler, capture: true });
@@ -3354,4 +3476,7 @@ Scene.registerWebGPUParticleSystemManager(_chunkBPMNCGU7js.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.CanvasRenderer = _chunkBPMNCGU7js.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkFIQAIF55js.Easing; exports.Entity = _chunkFIQAIF55js.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunkBA5HUUDFjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBA5HUUDFjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk4AR425ARjs.LayoutWorkerManager; exports.MSDFFont = _chunkFIQAIF55js.MSDFFont; exports.MSDFTextEntity = _chunkFIQAIF55js.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.SVGEntity = _chunkFIQAIF55js.SVGEntity; exports.SVGRenderer = _chunkBPMNCGU7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkFIQAIF55js.SpringDriver; exports.SpringPhysics = _chunkFIQAIF55js.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkFIQAIF55js.TweenDriver; exports.VectoJSEvent = _chunkFIQAIF55js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkBPMNCGU7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunkFIQAIF55js.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkBA5HUUDFjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkBPMNCGU7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunkFIQAIF55js.cssLineBoxBaseline; exports.isSafeUrl = _chunkBPMNCGU7js.isSafeUrl; exports.isTweenConfig = _chunkFIQAIF55js.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkBPMNCGU7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.prepareContentGrid = _chunkFIQAIF55js.prepareContentGrid; exports.sanitizeUrl = _chunkBPMNCGU7js.sanitizeUrl;
+
+
+
+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;

package/dist/index.mjs

@@ -27,7 +27,7 @@ import {
   cssLineBoxBaseline,
   isTweenConfig,
   prepareContentGrid
-} from "./chunk-RQ2ETTBN.mjs";
+} from "./chunk-J2P6QZJV.mjs";
 import {
   ArabicShaper,
   BidiResolver,
@@ -3110,6 +3110,128 @@ async function loadSpline(url) {
   return await res.json();
 }
 
+// src/components/Rect.ts
+var Rect = class extends Entity {
+  fill;
+  stroke;
+  strokeWidth;
+  radius;
+  constructor(opts = {}) {
+    super();
+    this.width = opts.width ?? 0;
+    this.height = opts.height ?? 0;
+    this.fill = opts.fill === void 0 ? "#38bdf8" : opts.fill;
+    this.stroke = opts.stroke ?? null;
+    this.strokeWidth = opts.strokeWidth ?? 1;
+    this.radius = opts.radius ?? 0;
+  }
+  getBounds() {
+    return { x: 0, y: 0, width: this.width, height: this.height };
+  }
+  /**
+   * Solid-fill, square-cornered, unstroked rectangles opt into the GPU
+   * instanced-rect batch (WebGL `pointBackend` only). Any stroke or corner
+   * radius needs the exact Canvas path, so return `null` to fall back to
+   * {@link render}. Read each frame, so an animated `fill` still batches.
+   */
+  getBatchRect() {
+    if (!this.fill || this.stroke || this.radius > 0) return null;
+    return { width: this.width, height: this.height, color: this.fill };
+  }
+  isPointInside(globalX, globalY) {
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    return local.x >= 0 && local.x <= this.width && local.y >= 0 && local.y <= this.height;
+  }
+  render(renderer) {
+    renderer.beginPath();
+    if (this.radius > 0) {
+      renderer.roundRect(0, 0, this.width, this.height, this.radius);
+    } else {
+      renderer.moveTo(0, 0);
+      renderer.lineTo(this.width, 0);
+      renderer.lineTo(this.width, this.height);
+      renderer.lineTo(0, this.height);
+      renderer.closePath();
+    }
+    if (this.fill) renderer.fill(this.fill);
+    if (this.stroke) renderer.stroke(this.stroke, this.strokeWidth);
+  }
+};
+
+// src/components/Circle.ts
+var Circle = class extends Entity {
+  fill;
+  stroke;
+  strokeWidth;
+  _radius;
+  constructor(opts = {}) {
+    super();
+    this._radius = opts.radius ?? 0;
+    this.fill = opts.fill === void 0 ? "#38bdf8" : opts.fill;
+    this.stroke = opts.stroke ?? null;
+    this.strokeWidth = opts.strokeWidth ?? 1;
+    this.syncBox();
+  }
+  get radius() {
+    return this._radius;
+  }
+  set radius(v) {
+    this._radius = v;
+    this.syncBox();
+  }
+  /** Keep the a11y box (a square around the centered disc) in sync with radius. */
+  syncBox() {
+    this.width = this._radius * 2;
+    this.height = this._radius * 2;
+    this.a11yOffsetX = -this._radius;
+    this.a11yOffsetY = -this._radius;
+  }
+  getBounds() {
+    return {
+      x: -this._radius,
+      y: -this._radius,
+      width: this._radius * 2,
+      height: this._radius * 2
+    };
+  }
+  /**
+   * A solid-fill, unstroked circle opts into the renderer's circle batch
+   * (center = entity origin, radius scaled by world scale). A stroke needs the
+   * exact Canvas path, so return `null` there. Read each frame, so an animated
+   * `fill`/`radius` still batches.
+   */
+  getBatchCircle() {
+    if (!this.fill || this.stroke) return null;
+    return { radius: this._radius, color: this.fill };
+  }
+  isPointInside(globalX, globalY) {
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    return local.x * local.x + local.y * local.y <= this._radius * this._radius;
+  }
+  render(renderer) {
+    renderer.beginPath();
+    renderer.arc(0, 0, this._radius, 0, Math.PI * 2);
+    renderer.closePath();
+    if (this.fill) renderer.fill(this.fill);
+    if (this.stroke) renderer.stroke(this.stroke, this.strokeWidth);
+  }
+};
+
+// src/components/Group.ts
+var Group = class extends Entity {
+  constructor(...children) {
+    super();
+    if (children.length > 0) this.add(...children);
+  }
+  isPointInside() {
+    return false;
+  }
+  render(_renderer) {
+  }
+};
+
 // src/math/SpatialHashGrid.ts
 var SpatialHashGrid = class {
   cellSize;
@@ -3311,11 +3433,13 @@ export {
   ArabicShaper,
   BidiResolver,
   CanvasRenderer,
+  Circle,
   ComputeParticleEntity,
   DOMPortalEntity,
   Easing,
   Entity,
   GridTextEntity,
+  Group,
   LayoutEngine,
   LayoutResultBuffer,
   LayoutWorkerManager,
@@ -3331,6 +3455,7 @@ export {
   PARTICLE_OFFSET_VELOCITY_Y,
   PARTICLE_STRIDE_FLOATS,
   REDUCED_MOTION_FPS,
+  Rect,
   SVGEntity,
   SVGRenderer,
   Scene,

package/dist/text.js

@@ -5,7 +5,7 @@
 
 
 
-var _chunkFIQAIF55js = require('./chunk-FIQAIF55.js');
+var _chunkGKLTTGBRjs = require('./chunk-GKLTTGBR.js');
 
 
 
@@ -19,4 +19,4 @@ var _chunk4AR425ARjs = require('./chunk-4AR425AR.js');
 
 
 
-exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.MSDFFont = _chunkFIQAIF55js.MSDFFont; exports.MSDFTextEntity = _chunkFIQAIF55js.MSDFTextEntity; exports.SVGEntity = _chunkFIQAIF55js.SVGEntity; exports.clearCssLineBoxMetrics = _chunkFIQAIF55js.clearCssLineBoxMetrics; exports.cssLineBoxBaseline = _chunkFIQAIF55js.cssLineBoxBaseline; exports.prepareContentGrid = _chunkFIQAIF55js.prepareContentGrid;
+exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.MSDFFont = _chunkGKLTTGBRjs.MSDFFont; exports.MSDFTextEntity = _chunkGKLTTGBRjs.MSDFTextEntity; exports.SVGEntity = _chunkGKLTTGBRjs.SVGEntity; exports.clearCssLineBoxMetrics = _chunkGKLTTGBRjs.clearCssLineBoxMetrics; exports.cssLineBoxBaseline = _chunkGKLTTGBRjs.cssLineBoxBaseline; exports.prepareContentGrid = _chunkGKLTTGBRjs.prepareContentGrid;

package/dist/text.mjs

@@ -5,7 +5,7 @@ import {
   clearCssLineBoxMetrics,
   cssLineBoxBaseline,
   prepareContentGrid
-} from "./chunk-RQ2ETTBN.mjs";
+} from "./chunk-J2P6QZJV.mjs";
 import {
   ArabicShaper,
   BidiResolver

package/dist/tree/Entity.d.ts

@@ -348,10 +348,15 @@ export declare abstract class Entity {
      * `child.parent` is only ever `null` or `this`'s ultimate owner, so this
      * check is O(1) for the overwhelming common case (a brand-new entity).
      *
-     * @param child - The entity to add as a child.
+     * Accepts multiple children in one call (`parent.add(a, b, c)`); each is
+     * attached in argument order with the same detach-then-attach semantics.
+     *
+     * @param children - One or more entities to add as children.
      * @returns `this` for method chaining.
      */
-    add(child: Entity): this;
+    add(...children: Entity[]): this;
+    /** Attach a single child (the O(1) common path). See {@link add}. */
+    private _addOne;
     /** Called once when this entity becomes attached to a live Scene. Override to react. */
     protected onMounted(): void;
     /** Fire onMounted for this node and its descendants, guarded against double-fire. */
@@ -363,6 +368,18 @@ export declare abstract class Entity {
      * @returns `this` for method chaining.
      */
     remove(child: Entity): this;
+    /**
+     * Assign several own properties in one call, each through its normal setter
+     * (so a property with a configured {@link setTransition} still animates, and
+     * `interactive` still flags the scene for a11y reorder). A construction-time
+     * ergonomic only — it is a plain `for…in` over the given object and touches
+     * no per-frame path.
+     *
+     * @param props - Partial set of this entity's own properties to assign.
+     * @returns `this` for method chaining.
+     * @example rect.set({ x: 40, y: 40, width: 120, fill: '#38bdf8' });
+     */
+    set(props: Partial<this>): this;
     /**
      * Set the local position of this entity.
      *

package/package.json

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