@vectojs/core 1.7.1 → 1.9.0

package/dist/{chunk-3CODWSF3.mjs → chunk-J2P6QZJV.mjs}

@@ -1,6 +1,8 @@
 import {
+  ArabicShaper,
+  BidiResolver,
   LayoutWorkerManager
-} from "./chunk-STWPTWO4.mjs";
+} from "./chunk-IESDTEJ4.mjs";
 
 // src/math/SpringPhysics.ts
 var MAX_FRAME_DT = 0.25;
@@ -370,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);
@@ -383,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() {
@@ -415,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.
    *
@@ -1459,6 +1486,205 @@ var SVGEntity = class extends Entity {
   }
 };
 
+// src/text/PreparedContentGrid.ts
+var nextRevision = 1;
+var graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+var MARK = /\p{Mark}/u;
+var EXTENDED_PICTOGRAPHIC = /\p{Extended_Pictographic}/u;
+var REGIONAL_INDICATOR = /\p{Regional_Indicator}/u;
+var BIDI_CONTROL = /\p{Bidi_Control}/u;
+var EAST_ASIAN_WIDE = /[ᄀ-ᅟ⌚-⌛⏩-⏬⏰⏳◽-◾⺀-〾ぁ-㏿㐀-䶿一-鿿ꀀ-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/u;
+function codePointAt(text, index) {
+  const point = text.codePointAt(index);
+  if (point === void 0) return { value: "", next: index };
+  const value = String.fromCodePoint(point);
+  return { value, next: index + value.length };
+}
+function fallbackGraphemes(text) {
+  const parts = [];
+  let index = 0;
+  while (index < text.length) {
+    const start = index;
+    let current = codePointAt(text, index);
+    let segment = current.value;
+    index = current.next;
+    let regionalCount = REGIONAL_INDICATOR.test(segment) ? 1 : 0;
+    while (index < text.length) {
+      current = codePointAt(text, index);
+      const point = current.value.codePointAt(0) ?? 0;
+      const isVariation = point >= 65024 && point <= 65039;
+      const isEmojiModifier = point >= 127995 && point <= 127999;
+      const isKeycap = point === 8419;
+      if (MARK.test(current.value) || isVariation || isEmojiModifier || isKeycap) {
+        segment += current.value;
+        index = current.next;
+        continue;
+      }
+      if (REGIONAL_INDICATOR.test(current.value) && regionalCount === 1) {
+        segment += current.value;
+        index = current.next;
+        regionalCount++;
+        continue;
+      }
+      if (point === 8205) {
+        segment += current.value;
+        index = current.next;
+        if (index < text.length) {
+          current = codePointAt(text, index);
+          segment += current.value;
+          index = current.next;
+        }
+        continue;
+      }
+      break;
+    }
+    parts.push({ segment, index: start });
+  }
+  return parts;
+}
+function graphemes(text) {
+  if (!graphemeSegmenter) return fallbackGraphemes(text);
+  return Array.from(graphemeSegmenter.segment(text), (part) => ({
+    segment: part.segment,
+    index: part.index
+  }));
+}
+function lowerBound(values, target) {
+  let low = 0;
+  let high = values.length;
+  while (low < high) {
+    const middle = low + high >>> 1;
+    if (values[middle] < target) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+}
+function isWideCluster(cluster) {
+  if (EXTENDED_PICTOGRAPHIC.test(cluster) || REGIONAL_INDICATOR.test(cluster)) return true;
+  if (cluster.includes("\u20E3")) return true;
+  if (EAST_ASIAN_WIDE.test(cluster)) return true;
+  const point = cluster.codePointAt(0) ?? 0;
+  return point >= 131072 && point <= 262141;
+}
+function sourceLines(source) {
+  const lines = [];
+  let start = 0;
+  while (true) {
+    let end = start;
+    while (end < source.length && source[end] !== "\r" && source[end] !== "\n") end++;
+    if (end === source.length) {
+      lines.push({
+        sourceStart: start,
+        sourceEnd: end,
+        nextSourceStart: end,
+        text: source.slice(start)
+      });
+      break;
+    }
+    const next = source[end] === "\r" && source[end + 1] === "\n" ? end + 2 : end + 1;
+    lines.push({
+      sourceStart: start,
+      sourceEnd: end,
+      nextSourceStart: next,
+      text: source.slice(start, end)
+    });
+    start = next;
+    if (start === source.length) {
+      lines.push({ sourceStart: start, sourceEnd: start, nextSourceStart: start, text: "" });
+      break;
+    }
+  }
+  return lines;
+}
+function assertPositiveFinite(value, name) {
+  if (!Number.isFinite(value) || value <= 0) {
+    throw new RangeError(`${name} must be a positive finite number`);
+  }
+}
+function prepareContentGrid(source, options) {
+  assertPositiveFinite(options.cellWidth, "cellWidth");
+  assertPositiveFinite(options.lineHeight, "lineHeight");
+  if (!Number.isFinite(options.baseline)) throw new RangeError("baseline must be finite");
+  const tabSize = options.tabSize ?? 4;
+  if (!Number.isInteger(tabSize) || tabSize <= 0) {
+    throw new RangeError("tabSize must be a positive integer");
+  }
+  const rawLines = sourceLines(source);
+  const lines = [];
+  for (let lineIndex = 0; lineIndex < rawLines.length; lineIndex++) {
+    const sourceLine = rawLines[lineIndex];
+    const rawLine = sourceLine.text;
+    const { sourceStart: lineStart, sourceEnd, nextSourceStart } = sourceLine;
+    const rawCaretBoundaries = [
+      0,
+      ...graphemes(rawLine).map((grapheme) => grapheme.index + grapheme.segment.length)
+    ];
+    const shaped = ArabicShaper.shapeArabic(rawLine);
+    const shapedParts = graphemes(shaped.shapedText);
+    const levels = BidiResolver.resolveLevels(shaped.shapedText);
+    const cells = [];
+    let column = 0;
+    for (let index = 0; index < shapedParts.length; index++) {
+      const part = shapedParts[index];
+      const sourceOffset = shaped.indexMap[part.index] ?? part.index;
+      const nextPart = shapedParts[index + 1];
+      const sourceOffsetEnd = nextPart ? shaped.indexMap[nextPart.index] ?? nextPart.index : rawLine.length;
+      const raw = rawLine.slice(sourceOffset, sourceOffsetEnd);
+      const sourceCaretOffsets = [0];
+      for (let caretIndex = lowerBound(rawCaretBoundaries, sourceOffset + 1); caretIndex < rawCaretBoundaries.length && rawCaretBoundaries[caretIndex] < sourceOffsetEnd; caretIndex++) {
+        sourceCaretOffsets.push(rawCaretBoundaries[caretIndex] - sourceOffset);
+      }
+      if (sourceCaretOffsets.at(-1) !== sourceOffsetEnd - sourceOffset) {
+        sourceCaretOffsets.push(sourceOffsetEnd - sourceOffset);
+      }
+      let columns;
+      if (BIDI_CONTROL.test(raw)) columns = 0;
+      else if (raw === "	") columns = tabSize - column % tabSize;
+      else columns = isWideCluster(raw) ? 2 : 1;
+      const advance = columns * options.cellWidth;
+      cells.push({
+        sourceStart: lineStart + sourceOffset,
+        sourceEnd: lineStart + sourceOffsetEnd,
+        sourceCaretOffsets: Object.freeze(sourceCaretOffsets),
+        glyph: part.segment,
+        x: 0,
+        advance,
+        level: levels[part.index] ?? 0,
+        char: part.segment
+      });
+      column += columns;
+    }
+    const visualCells = [...cells];
+    BidiResolver.reorderVisual(visualCells, BidiResolver.getBaseLevel(shaped.shapedText));
+    let visualX = 0;
+    for (const cell of visualCells) {
+      cell.x = visualX;
+      visualX += cell.advance;
+    }
+    const frozenCells = cells.map(({ char: _char, ...cell }) => Object.freeze(cell));
+    lines.push(
+      Object.freeze({
+        sourceStart: lineStart,
+        sourceEnd,
+        nextSourceStart,
+        width: visualX,
+        cells: Object.freeze(frozenCells)
+      })
+    );
+  }
+  return Object.freeze({
+    kind: "content-grid",
+    revision: nextRevision++,
+    source,
+    font: options.font,
+    cellWidth: options.cellWidth,
+    lineHeight: options.lineHeight,
+    baseline: options.baseline,
+    tabSize,
+    lines: Object.freeze(lines)
+  });
+}
+
 export {
   SpringPhysics,
   Easing,
@@ -1471,5 +1697,6 @@ export {
   clearCssLineBoxMetrics,
   MSDFFont,
   MSDFTextEntity,
-  SVGEntity
+  SVGEntity,
+  prepareContentGrid
 };

package/dist/{chunk-V7GUWG5C.mjs → chunk-X7I465AQ.mjs}

@@ -1,7 +1,7 @@
 import {
   ArabicShaper,
   BidiResolver
-} from "./chunk-STWPTWO4.mjs";
+} from "./chunk-IESDTEJ4.mjs";
 
 // src/layout/LayoutEngine.ts
 function computeLineSegments(top, bottom, maxWidth, exclusions) {

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';
@@ -25,4 +28,5 @@ export { SVGEntity } from './text/SVGEntity';
 export * from './tree/ComputeParticleEntity';
 export * from './text/ArabicShaper';
 export * from './text/BidiResolver';
+export * from './text/PreparedContentGrid';
 export * from './text/Typography';