@vectojs/core 1.8.0 → 1.9.1

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();
       };
@@ -1214,6 +1214,13 @@ var Scene = (_class2 = class _Scene {
   }
   /** True when any node in the subtree has a pending animation. */
   /** True when any node in the subtree is interactive (drives a11y sync). */
+  syncOptionalAttribute(element, name, value) {
+    if (value === void 0) {
+      if (element.hasAttribute(name)) element.removeAttribute(name);
+      return;
+    }
+    if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+  }
   syncA11y(node) {
     if (!this.a11yRoot) return;
     if (node.isDOMPortal) {
@@ -1259,15 +1266,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 +1290,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 +1375,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));
             }
           });
         }
@@ -1380,12 +1387,8 @@ var Scene = (_class2 = class _Scene {
         this.a11yElements.set(node.id, el);
         this.a11yNeedsReorder = true;
       }
-      if (attrs.role !== void 0 && el.getAttribute("role") !== attrs.role) {
-        el.setAttribute("role", attrs.role);
-      }
-      if (attrs.label !== void 0 && el.getAttribute("aria-label") !== attrs.label) {
-        el.setAttribute("aria-label", attrs.label);
-      }
+      this.syncOptionalAttribute(el, "role", attrs.role);
+      this.syncOptionalAttribute(el, "aria-label", attrs.label);
       const semanticPointerEvents = _nullishCoalesce(attrs.pointerEvents, () => ( "auto"));
       if (el.style.pointerEvents !== semanticPointerEvents) {
         el.style.pointerEvents = semanticPointerEvents;
@@ -1397,58 +1400,58 @@ var Scene = (_class2 = class _Scene {
       } else if (el.getAttribute("tabindex") !== String(desiredTabIndex)) {
         el.setAttribute("tabindex", String(desiredTabIndex));
       }
-      if (attrs.inputType !== void 0 && el.getAttribute("type") !== attrs.inputType) {
-        el.setAttribute("type", attrs.inputType);
+      this.syncOptionalAttribute(el, "type", attrs.inputType);
+      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+        const placeholder = _nullishCoalesce(attrs.placeholder, () => ( ""));
+        if (el.placeholder !== placeholder) el.placeholder = placeholder;
       }
-      if (attrs.placeholder !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
-        if (el.placeholder !== attrs.placeholder) el.placeholder = attrs.placeholder;
-      }
-      if (attrs.href !== void 0 && el instanceof HTMLAnchorElement) {
-        const safeHref = _chunkBPMNCGU7js.sanitizeUrl.call(void 0, attrs.href);
-        if (el.getAttribute("href") !== safeHref) el.setAttribute("href", safeHref);
-        if (attrs.target !== void 0 && el.getAttribute("target") !== attrs.target) {
-          el.setAttribute("target", attrs.target);
-        }
+      if (el instanceof HTMLAnchorElement) {
+        this.syncOptionalAttribute(
+          el,
+          "href",
+          attrs.href === void 0 ? void 0 : _chunkBPMNCGU7js.sanitizeUrl.call(void 0, attrs.href)
+        );
+        this.syncOptionalAttribute(el, "target", attrs.target);
       }
       if (el instanceof HTMLImageElement) {
-        if (attrs.src !== void 0 && el.src !== attrs.src) el.src = attrs.src;
-        if (attrs.alt !== void 0 && el.alt !== attrs.alt) el.alt = attrs.alt;
-      }
-      if (attrs.checked !== void 0) {
-        if (el instanceof HTMLInputElement) {
-          if (el.checked !== attrs.checked) el.checked = attrs.checked;
-        } else if (el.getAttribute("aria-checked") !== String(attrs.checked)) {
-          el.setAttribute("aria-checked", String(attrs.checked));
-        }
+        this.syncOptionalAttribute(el, "src", attrs.src);
+        this.syncOptionalAttribute(el, "alt", attrs.alt);
       }
-      if (attrs.disabled !== void 0) {
-        if ("disabled" in el) {
-          if (el.disabled !== attrs.disabled) el.disabled = attrs.disabled;
-        } else if (el.getAttribute("aria-disabled") !== String(attrs.disabled)) {
-          el.setAttribute("aria-disabled", String(attrs.disabled));
-        }
-      }
-      if (attrs.expanded !== void 0 && el.getAttribute("aria-expanded") !== String(attrs.expanded)) {
-        el.setAttribute("aria-expanded", String(attrs.expanded));
-      }
-      if (attrs.controls !== void 0 && el.getAttribute("aria-controls") !== attrs.controls) {
-        el.setAttribute("aria-controls", attrs.controls);
-      }
-      if (attrs.haspopup !== void 0 && el.getAttribute("aria-haspopup") !== attrs.haspopup) {
-        el.setAttribute("aria-haspopup", attrs.haspopup);
-      }
-      if (attrs.selected !== void 0 && el.getAttribute("aria-selected") !== String(attrs.selected)) {
-        el.setAttribute("aria-selected", String(attrs.selected));
-      }
-      if (attrs.activedescendant !== void 0 && el.getAttribute("aria-activedescendant") !== attrs.activedescendant) {
-        el.setAttribute("aria-activedescendant", attrs.activedescendant);
-      }
-      if (attrs.valuemin !== void 0 && el.getAttribute("aria-valuemin") !== attrs.valuemin) {
-        el.setAttribute("aria-valuemin", attrs.valuemin);
+      if (el instanceof HTMLInputElement) {
+        const checked = _nullishCoalesce(attrs.checked, () => ( false));
+        if (el.checked !== checked) el.checked = checked;
+      } else {
+        this.syncOptionalAttribute(
+          el,
+          "aria-checked",
+          attrs.checked === void 0 ? void 0 : String(attrs.checked)
+        );
       }
-      if (attrs.valuemax !== void 0 && el.getAttribute("aria-valuemax") !== attrs.valuemax) {
-        el.setAttribute("aria-valuemax", attrs.valuemax);
+      if ("disabled" in el) {
+        const disabled = _nullishCoalesce(attrs.disabled, () => ( false));
+        if (el.disabled !== disabled) el.disabled = disabled;
+      } else {
+        this.syncOptionalAttribute(
+          el,
+          "aria-disabled",
+          attrs.disabled === void 0 ? void 0 : String(attrs.disabled)
+        );
       }
+      this.syncOptionalAttribute(
+        el,
+        "aria-expanded",
+        attrs.expanded === void 0 ? void 0 : String(attrs.expanded)
+      );
+      this.syncOptionalAttribute(el, "aria-controls", attrs.controls);
+      this.syncOptionalAttribute(el, "aria-haspopup", attrs.haspopup);
+      this.syncOptionalAttribute(
+        el,
+        "aria-selected",
+        attrs.selected === void 0 ? void 0 : String(attrs.selected)
+      );
+      this.syncOptionalAttribute(el, "aria-activedescendant", attrs.activedescendant);
+      this.syncOptionalAttribute(el, "aria-valuemin", attrs.valuemin);
+      this.syncOptionalAttribute(el, "aria-valuemax", attrs.valuemax);
       if (attrs.value !== void 0) {
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           if (el.value !== attrs.value) {
@@ -1458,9 +1461,11 @@ var Scene = (_class2 = class _Scene {
               el._lastSyncedValue = attrs.value;
             }
           }
-        } else if (el.getAttribute("aria-valuenow") !== attrs.value) {
-          el.setAttribute("aria-valuenow", attrs.value);
+        } else {
+          this.syncOptionalAttribute(el, "aria-valuenow", attrs.value);
         }
+      } else if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+        this.syncOptionalAttribute(el, "aria-valuenow", void 0);
       }
       if (attrs.textInputStyle !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
         const textStyle = attrs.textInputStyle;
@@ -1529,7 +1534,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 +1565,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 +1617,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 +1689,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 +2621,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 +2747,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 +2841,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 +3115,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 +3332,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 +3374,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 +3385,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 +3393,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 +3481,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,
@@ -1214,6 +1214,13 @@ var Scene = class _Scene {
   }
   /** True when any node in the subtree has a pending animation. */
   /** True when any node in the subtree is interactive (drives a11y sync). */
+  syncOptionalAttribute(element, name, value) {
+    if (value === void 0) {
+      if (element.hasAttribute(name)) element.removeAttribute(name);
+      return;
+    }
+    if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+  }
   syncA11y(node) {
     if (!this.a11yRoot) return;
     if (node.isDOMPortal) {
@@ -1380,12 +1387,8 @@ var Scene = class _Scene {
         this.a11yElements.set(node.id, el);
         this.a11yNeedsReorder = true;
       }
-      if (attrs.role !== void 0 && el.getAttribute("role") !== attrs.role) {
-        el.setAttribute("role", attrs.role);
-      }
-      if (attrs.label !== void 0 && el.getAttribute("aria-label") !== attrs.label) {
-        el.setAttribute("aria-label", attrs.label);
-      }
+      this.syncOptionalAttribute(el, "role", attrs.role);
+      this.syncOptionalAttribute(el, "aria-label", attrs.label);
       const semanticPointerEvents = attrs.pointerEvents ?? "auto";
       if (el.style.pointerEvents !== semanticPointerEvents) {
         el.style.pointerEvents = semanticPointerEvents;
@@ -1397,58 +1400,58 @@ var Scene = class _Scene {
       } else if (el.getAttribute("tabindex") !== String(desiredTabIndex)) {
         el.setAttribute("tabindex", String(desiredTabIndex));
       }
-      if (attrs.inputType !== void 0 && el.getAttribute("type") !== attrs.inputType) {
-        el.setAttribute("type", attrs.inputType);
+      this.syncOptionalAttribute(el, "type", attrs.inputType);
+      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+        const placeholder = attrs.placeholder ?? "";
+        if (el.placeholder !== placeholder) el.placeholder = placeholder;
       }
-      if (attrs.placeholder !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
-        if (el.placeholder !== attrs.placeholder) el.placeholder = attrs.placeholder;
-      }
-      if (attrs.href !== void 0 && el instanceof HTMLAnchorElement) {
-        const safeHref = sanitizeUrl(attrs.href);
-        if (el.getAttribute("href") !== safeHref) el.setAttribute("href", safeHref);
-        if (attrs.target !== void 0 && el.getAttribute("target") !== attrs.target) {
-          el.setAttribute("target", attrs.target);
-        }
+      if (el instanceof HTMLAnchorElement) {
+        this.syncOptionalAttribute(
+          el,
+          "href",
+          attrs.href === void 0 ? void 0 : sanitizeUrl(attrs.href)
+        );
+        this.syncOptionalAttribute(el, "target", attrs.target);
       }
       if (el instanceof HTMLImageElement) {
-        if (attrs.src !== void 0 && el.src !== attrs.src) el.src = attrs.src;
-        if (attrs.alt !== void 0 && el.alt !== attrs.alt) el.alt = attrs.alt;
-      }
-      if (attrs.checked !== void 0) {
-        if (el instanceof HTMLInputElement) {
-          if (el.checked !== attrs.checked) el.checked = attrs.checked;
-        } else if (el.getAttribute("aria-checked") !== String(attrs.checked)) {
-          el.setAttribute("aria-checked", String(attrs.checked));
-        }
+        this.syncOptionalAttribute(el, "src", attrs.src);
+        this.syncOptionalAttribute(el, "alt", attrs.alt);
       }
-      if (attrs.disabled !== void 0) {
-        if ("disabled" in el) {
-          if (el.disabled !== attrs.disabled) el.disabled = attrs.disabled;
-        } else if (el.getAttribute("aria-disabled") !== String(attrs.disabled)) {
-          el.setAttribute("aria-disabled", String(attrs.disabled));
-        }
-      }
-      if (attrs.expanded !== void 0 && el.getAttribute("aria-expanded") !== String(attrs.expanded)) {
-        el.setAttribute("aria-expanded", String(attrs.expanded));
-      }
-      if (attrs.controls !== void 0 && el.getAttribute("aria-controls") !== attrs.controls) {
-        el.setAttribute("aria-controls", attrs.controls);
-      }
-      if (attrs.haspopup !== void 0 && el.getAttribute("aria-haspopup") !== attrs.haspopup) {
-        el.setAttribute("aria-haspopup", attrs.haspopup);
-      }
-      if (attrs.selected !== void 0 && el.getAttribute("aria-selected") !== String(attrs.selected)) {
-        el.setAttribute("aria-selected", String(attrs.selected));
-      }
-      if (attrs.activedescendant !== void 0 && el.getAttribute("aria-activedescendant") !== attrs.activedescendant) {
-        el.setAttribute("aria-activedescendant", attrs.activedescendant);
-      }
-      if (attrs.valuemin !== void 0 && el.getAttribute("aria-valuemin") !== attrs.valuemin) {
-        el.setAttribute("aria-valuemin", attrs.valuemin);
+      if (el instanceof HTMLInputElement) {
+        const checked = attrs.checked ?? false;
+        if (el.checked !== checked) el.checked = checked;
+      } else {
+        this.syncOptionalAttribute(
+          el,
+          "aria-checked",
+          attrs.checked === void 0 ? void 0 : String(attrs.checked)
+        );
       }
-      if (attrs.valuemax !== void 0 && el.getAttribute("aria-valuemax") !== attrs.valuemax) {
-        el.setAttribute("aria-valuemax", attrs.valuemax);
+      if ("disabled" in el) {
+        const disabled = attrs.disabled ?? false;
+        if (el.disabled !== disabled) el.disabled = disabled;
+      } else {
+        this.syncOptionalAttribute(
+          el,
+          "aria-disabled",
+          attrs.disabled === void 0 ? void 0 : String(attrs.disabled)
+        );
       }
+      this.syncOptionalAttribute(
+        el,
+        "aria-expanded",
+        attrs.expanded === void 0 ? void 0 : String(attrs.expanded)
+      );
+      this.syncOptionalAttribute(el, "aria-controls", attrs.controls);
+      this.syncOptionalAttribute(el, "aria-haspopup", attrs.haspopup);
+      this.syncOptionalAttribute(
+        el,
+        "aria-selected",
+        attrs.selected === void 0 ? void 0 : String(attrs.selected)
+      );
+      this.syncOptionalAttribute(el, "aria-activedescendant", attrs.activedescendant);
+      this.syncOptionalAttribute(el, "aria-valuemin", attrs.valuemin);
+      this.syncOptionalAttribute(el, "aria-valuemax", attrs.valuemax);
       if (attrs.value !== void 0) {
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           if (el.value !== attrs.value) {
@@ -1458,9 +1461,11 @@ var Scene = class _Scene {
               el._lastSyncedValue = attrs.value;
             }
           }
-        } else if (el.getAttribute("aria-valuenow") !== attrs.value) {
-          el.setAttribute("aria-valuenow", attrs.value);
+        } else {
+          this.syncOptionalAttribute(el, "aria-valuenow", attrs.value);
         }
+      } else if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+        this.syncOptionalAttribute(el, "aria-valuenow", void 0);
       }
       if (attrs.textInputStyle !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
         const textStyle = attrs.textInputStyle;
@@ -3110,6 +3115,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 +3438,13 @@ export {
   ArabicShaper,
   BidiResolver,
   CanvasRenderer,
+  Circle,
   ComputeParticleEntity,
   DOMPortalEntity,
   Easing,
   Entity,
   GridTextEntity,
+  Group,
   LayoutEngine,
   LayoutResultBuffer,
   LayoutWorkerManager,
@@ -3331,6 +3460,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/dist/tree/Scene.d.ts

@@ -309,6 +309,7 @@ export declare class Scene {
     markDirty(): void;
     /** True when any node in the subtree has a pending animation. */
     /** True when any node in the subtree is interactive (drives a11y sync). */
+    private syncOptionalAttribute;
     private syncA11y;
     /**
      * Mirror one entity's static text ({@link Entity.getContentProjection}) as a

package/package.json

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