@vectojs/core 1.27.0 → 1.28.0

package/dist/index.js

@@ -3640,10 +3640,24 @@ var Scene = (_class7 = class _Scene {
    * resume when it returns — instead of running the full update/render every
    * frame for a scene nobody can see. No-op (stays "on screen") where
    * `IntersectionObserver` is unavailable, so SSR/jsdom behavior is unchanged.
+   *
+   * Also a no-op for a canvas that is not in the document. An offscreen canvas
+   * used purely as a texture source — `@vectojs/three`'s `ThreeAdapter` wraps
+   * one in a `CanvasTexture`, and the same pattern shows up in any
+   * render-to-texture setup — is never appended anywhere, and an
+   * `IntersectionObserver` reports a detached element as not intersecting.
+   * Observing it would therefore set `_canvasOnScreen = false` on the first
+   * callback, and since {@link loop} returns without rescheduling in that
+   * state, the loop would stop permanently: the only resume path is an
+   * `isIntersecting` transition, which a detached element can never produce.
+   * Such a canvas is always "visible" as far as this scene is concerned,
+   * because whether its output is seen depends on the consumer sampling the
+   * texture, which this scene cannot observe.
    */
   watchCanvasVisibility() {
     if (this._canvasObserver || typeof IntersectionObserver === "undefined") return;
     if (!this.canvas || typeof this.canvas.getBoundingClientRect !== "function") return;
+    if (this.canvas.isConnected === false) return;
     this._canvasObserver = new IntersectionObserver((entries) => {
       const entry = entries[entries.length - 1];
       if (!entry) return;
@@ -3879,6 +3893,7 @@ var Scene = (_class7 = class _Scene {
       let el = this.a11yElements.get(node.id);
       const attrs = node.getA11yAttributes();
       const expectedTag = attrs.tag || "div";
+      let emitInitialScroll = null;
       if (el && el.tagName.toLowerCase() !== expectedTag.toLowerCase()) {
         if (el === this.focusedA11yElement) {
           this.focusedA11yElement = null;
@@ -3966,6 +3981,26 @@ var Scene = (_class7 = class _Scene {
           },
           { passive: false }
         );
+        const scrollTarget = el;
+        const emitScroll = () => {
+          node.emit("scroll", {
+            scrollTop: scrollTarget.scrollTop,
+            scrollLeft: scrollTarget.scrollLeft,
+            scrollHeight: scrollTarget.scrollHeight,
+            scrollWidth: scrollTarget.scrollWidth,
+            clientHeight: scrollTarget.clientHeight,
+            clientWidth: scrollTarget.clientWidth
+          });
+        };
+        el.addEventListener(
+          "scroll",
+          () => {
+            emitScroll();
+            this.markDirty();
+          },
+          { passive: true }
+        );
+        emitInitialScroll = emitScroll;
         el.addEventListener("keydown", (e) => {
           node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("keydown", node, e));
         });
@@ -4196,6 +4231,7 @@ var Scene = (_class7 = class _Scene {
         if (el.style.padding !== padding) el.style.padding = padding;
         if (el.style.boxSizing !== "border-box") el.style.boxSizing = "border-box";
         if (el instanceof HTMLTextAreaElement) el.style.resize = "none";
+        if (el.style.scrollbarWidth !== "none") el.style.scrollbarWidth = "none";
       }
       const nestedIn = container && attrs.role && container.owned.has(attrs.role) ? container : null;
       if (node.a11yFullViewport) {
@@ -4242,6 +4278,7 @@ var Scene = (_class7 = class _Scene {
         const display = visible ? "" : "none";
         if (el.style.display !== display) el.style.display = display;
       }
+      _optionalChain([emitInitialScroll, 'optionalCall', _122 => _122()]);
     }
     if (this._phaseTiming) {
       const projectionStart = performance.now();
@@ -4480,9 +4517,9 @@ var Scene = (_class7 = class _Scene {
       for (let lineIndex = 0; lineIndex < grid.lines.length; lineIndex++) {
         const gridLine = grid.lines[lineIndex];
         const projectedLine = projectionLines[lineIndex];
-        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _122 => _122.lineHeight]), () => ( grid.lineHeight));
-        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _123 => _123.baseline]), () => ( grid.baseline));
-        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _124 => _124.font]), () => ( grid.font));
+        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _123 => _123.lineHeight]), () => ( grid.lineHeight));
+        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _124 => _124.baseline]), () => ( grid.baseline));
+        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _125 => _125.font]), () => ( grid.font));
         const lineSignature = contentGridLineSignature(
           grid,
           gridLine,
@@ -4502,8 +4539,8 @@ var Scene = (_class7 = class _Scene {
         lineElement.dir = "ltr";
         lineElement.dataset.vectoGridLine = `${lineIndex}`;
         lineElement.style.position = "absolute";
-        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _125 => _125.x]), () => ( 0))}px`;
-        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _126 => _126.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _text.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
+        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _126 => _126.x]), () => ( 0))}px`;
+        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _127 => _127.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _text.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
         lineElement.style.width = `${gridLine.width}px`;
         lineElement.style.height = `${lineHeight}px`;
         lineElement.style.whiteSpace = "pre";
@@ -4573,7 +4610,7 @@ var Scene = (_class7 = class _Scene {
         if (selectionLine !== null && selectionLine >= grid.lines.length) {
           rebuiltSelectionLine = true;
         }
-        _optionalChain([el, 'access', _127 => _127.lastElementChild, 'optionalAccess', _128 => _128.remove, 'call', _129 => _129()]);
+        _optionalChain([el, 'access', _128 => _128.lastElementChild, 'optionalAccess', _129 => _129.remove, 'call', _130 => _130()]);
       }
       if (rebuiltSelectionLine) this.releaseContentSelectionForRebuild(el);
       el.dataset.vectoProjectionLines = signature;
@@ -4637,7 +4674,7 @@ var Scene = (_class7 = class _Scene {
     if (previous !== void 0 && typeof cancelAnimationFrame === "function") {
       cancelAnimationFrame(previous);
     }
-    _optionalChain([this, 'access', _130 => _130.contentGridCalibrationProbes, 'access', _131 => _131.get, 'call', _132 => _132(entityId), 'optionalAccess', _133 => _133.remove, 'call', _134 => _134()]);
+    _optionalChain([this, 'access', _131 => _131.contentGridCalibrationProbes, 'access', _132 => _132.get, 'call', _133 => _133(entityId), 'optionalAccess', _134 => _134.remove, 'call', _135 => _135()]);
     this.contentGridCalibrationProbes.delete(entityId);
     const calibrationStart = typeof performance !== "undefined" ? performance.now() : 0;
     const probe = document.createElement("div");
@@ -4671,7 +4708,7 @@ var Scene = (_class7 = class _Scene {
         target.dataset.vectoGridCalib = generation;
         continue;
       }
-      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _135 => _135.textContent, 'optionalAccess', _136 => _136.slice, 'call', _137 => _137(0, sourceLength)]), () => ( ""));
+      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _136 => _136.textContent, 'optionalAccess', _137 => _137.slice, 'call', _138 => _138(0, sourceLength)]), () => ( ""));
       if (!sourceText) {
         target.dataset.vectoGridCalib = generation;
         continue;
@@ -4898,12 +4935,12 @@ var Scene = (_class7 = class _Scene {
   syncOverlayGeometry() {
     const parent = this.canvas.parentElement;
     if (!parent) return;
-    const canvasRect = _optionalChain([this, 'access', _138 => _138.canvas, 'access', _139 => _139.getBoundingClientRect, 'optionalCall', _140 => _140()]);
-    const parentRect = _optionalChain([parent, 'access', _141 => _141.getBoundingClientRect, 'optionalCall', _142 => _142()]);
-    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _143 => _143.width]) || this.canvas.clientWidth || this.width;
-    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _144 => _144.height]) || this.canvas.clientHeight || this.height;
-    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _145 => _145.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _146 => _146.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
-    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _147 => _147.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _148 => _148.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
+    const canvasRect = _optionalChain([this, 'access', _139 => _139.canvas, 'access', _140 => _140.getBoundingClientRect, 'optionalCall', _141 => _141()]);
+    const parentRect = _optionalChain([parent, 'access', _142 => _142.getBoundingClientRect, 'optionalCall', _143 => _143()]);
+    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _144 => _144.width]) || this.canvas.clientWidth || this.width;
+    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _145 => _145.height]) || this.canvas.clientHeight || this.height;
+    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _146 => _146.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _147 => _147.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
+    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _148 => _148.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _149 => _149.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
     const scaleX = this.width > 0 ? cssWidth / this.width : 1;
     const scaleY = this.height > 0 ? cssHeight / this.height : 1;
     const prev = this._overlayGeometry;
@@ -5042,7 +5079,7 @@ var Scene = (_class7 = class _Scene {
    * (and {@link respectReducedMotion} is on). `0` means uncapped.
    */
   effectiveMaxFPS() {
-    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _149 => _149.reducedMotionQuery, 'optionalAccess', _150 => _150.matches]);
+    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _150 => _150.reducedMotionQuery, 'optionalAccess', _151 => _151.matches]);
     if (reduced)
       return this.maxFPS > 0 ? Math.min(this.maxFPS, REDUCED_MOTION_FPS) : REDUCED_MOTION_FPS;
     return this.maxFPS;
@@ -5137,7 +5174,7 @@ var Scene = (_class7 = class _Scene {
    * @param time - Current absolute time in milliseconds (default 0).
    */
   render(renderer, dt = 0, time = 0) {
-    if (_optionalChain([renderer, 'access', _151 => _151.isContextLost, 'optionalCall', _152 => _152()])) return;
+    if (_optionalChain([renderer, 'access', _152 => _152.isContextLost, 'optionalCall', _153 => _153()])) return;
     const isMainRenderer = renderer === this.renderer;
     if (isMainRenderer && this.a11yRoot && this.canvas.parentElement) {
       const parentStyle = this.canvas.parentElement.style;
@@ -5281,7 +5318,7 @@ var Scene = (_class7 = class _Scene {
     }
     renderer.clear();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _153 => _153.pointRenderer, 'optionalAccess', _154 => _154.begin, 'call', _155 => _155()]);
+      _optionalChain([this, 'access', _154 => _154.pointRenderer, 'optionalAccess', _155 => _155.begin, 'call', _156 => _156()]);
     }
     const vw = this.width;
     const vh = this.height;
@@ -5495,9 +5532,9 @@ var Scene = (_class7 = class _Scene {
     const flushT0 = this._phaseTiming ? performance.now() : 0;
     renderer.flush();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _156 => _156.pointRenderer, 'optionalAccess', _157 => _157.flush, 'call', _158 => _158()]);
+      _optionalChain([this, 'access', _157 => _157.pointRenderer, 'optionalAccess', _158 => _158.flush, 'call', _159 => _159()]);
     }
-    _optionalChain([renderer, 'access', _159 => _159.present, 'optionalCall', _160 => _160()]);
+    _optionalChain([renderer, 'access', _160 => _160.present, 'optionalCall', _161 => _161()]);
     if (this._phaseTiming) this._recordPhase("flush", performance.now() - flushT0);
     if (flushTiming) endVectoUserTiming(flushTiming);
     if (this._devActive) {
@@ -5778,8 +5815,8 @@ function pointInBounds(b, x, y) {
 function contentGridLineSignature(grid, line, projected, lineHeight, baseline, font, isFirstLine) {
   const parts = [
     // Line box: position, size, and the font that resolves its baseline.
-    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _161 => _161.x]), () => ( 0))}`,
-    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _162 => _162.y]), () => ( ""))}`,
+    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _162 => _162.x]), () => ( 0))}`,
+    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _163 => _163.y]), () => ( ""))}`,
     `${lineHeight}`,
     `${baseline}`,
     font,
@@ -5966,7 +6003,7 @@ var GridTextEntity = (_class9 = class extends _chunkZ3HFY75Rjs.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _163 => _163[0], 'optionalAccess', _164 => _164.length]) || 0;
+    this.cols = _optionalChain([ascii, 'access', _164 => _164[0], 'optionalAccess', _165 => _165.length]) || 0;
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -6076,7 +6113,7 @@ var SplineEntity = (_class10 = class extends _chunkZ3HFY75Rjs.Entity {
     this.width = this.bounds.width;
     this.height = this.bounds.height;
     const isGradient = (c) => c !== null && !Array.isArray(c);
-    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _165 => _165.doc, 'access', _166 => _166.equations, 'optionalAccess', _167 => _167.some, 'call', _168 => _168((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _169 => _169.doc, 'access', _170 => _170.paths, 'optionalAccess', _171 => _171.some, 'call', _172 => _172((p) => isGradient(p.color_rgb))]), () => ( false)));
+    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _166 => _166.doc, 'access', _167 => _167.equations, 'optionalAccess', _168 => _168.some, 'call', _169 => _169((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _170 => _170.doc, 'access', _171 => _171.paths, 'optionalAccess', _172 => _172.some, 'call', _173 => _173((p) => isGradient(p.color_rgb))]), () => ( false)));
     this.interactive = true;
   }
   computeBounds() {

package/dist/index.mjs

@@ -3639,10 +3639,24 @@ var Scene = class _Scene {
    * resume when it returns — instead of running the full update/render every
    * frame for a scene nobody can see. No-op (stays "on screen") where
    * `IntersectionObserver` is unavailable, so SSR/jsdom behavior is unchanged.
+   *
+   * Also a no-op for a canvas that is not in the document. An offscreen canvas
+   * used purely as a texture source — `@vectojs/three`'s `ThreeAdapter` wraps
+   * one in a `CanvasTexture`, and the same pattern shows up in any
+   * render-to-texture setup — is never appended anywhere, and an
+   * `IntersectionObserver` reports a detached element as not intersecting.
+   * Observing it would therefore set `_canvasOnScreen = false` on the first
+   * callback, and since {@link loop} returns without rescheduling in that
+   * state, the loop would stop permanently: the only resume path is an
+   * `isIntersecting` transition, which a detached element can never produce.
+   * Such a canvas is always "visible" as far as this scene is concerned,
+   * because whether its output is seen depends on the consumer sampling the
+   * texture, which this scene cannot observe.
    */
   watchCanvasVisibility() {
     if (this._canvasObserver || typeof IntersectionObserver === "undefined") return;
     if (!this.canvas || typeof this.canvas.getBoundingClientRect !== "function") return;
+    if (this.canvas.isConnected === false) return;
     this._canvasObserver = new IntersectionObserver((entries) => {
       const entry = entries[entries.length - 1];
       if (!entry) return;
@@ -3878,6 +3892,7 @@ var Scene = class _Scene {
       let el = this.a11yElements.get(node.id);
       const attrs = node.getA11yAttributes();
       const expectedTag = attrs.tag || "div";
+      let emitInitialScroll = null;
       if (el && el.tagName.toLowerCase() !== expectedTag.toLowerCase()) {
         if (el === this.focusedA11yElement) {
           this.focusedA11yElement = null;
@@ -3965,6 +3980,26 @@ var Scene = class _Scene {
           },
           { passive: false }
         );
+        const scrollTarget = el;
+        const emitScroll = () => {
+          node.emit("scroll", {
+            scrollTop: scrollTarget.scrollTop,
+            scrollLeft: scrollTarget.scrollLeft,
+            scrollHeight: scrollTarget.scrollHeight,
+            scrollWidth: scrollTarget.scrollWidth,
+            clientHeight: scrollTarget.clientHeight,
+            clientWidth: scrollTarget.clientWidth
+          });
+        };
+        el.addEventListener(
+          "scroll",
+          () => {
+            emitScroll();
+            this.markDirty();
+          },
+          { passive: true }
+        );
+        emitInitialScroll = emitScroll;
         el.addEventListener("keydown", (e) => {
           node.dispatchEvent(new VectoJSEvent("keydown", node, e));
         });
@@ -4195,6 +4230,7 @@ var Scene = class _Scene {
         if (el.style.padding !== padding) el.style.padding = padding;
         if (el.style.boxSizing !== "border-box") el.style.boxSizing = "border-box";
         if (el instanceof HTMLTextAreaElement) el.style.resize = "none";
+        if (el.style.scrollbarWidth !== "none") el.style.scrollbarWidth = "none";
       }
       const nestedIn = container && attrs.role && container.owned.has(attrs.role) ? container : null;
       if (node.a11yFullViewport) {
@@ -4241,6 +4277,7 @@ var Scene = class _Scene {
         const display = visible ? "" : "none";
         if (el.style.display !== display) el.style.display = display;
       }
+      emitInitialScroll?.();
     }
     if (this._phaseTiming) {
       const projectionStart = performance.now();

package/dist/tree/Entity.d.ts

@@ -374,7 +374,30 @@ export interface A11yAttributes {
 /**
  * Union of all pointer/interaction events that can be emitted by an {@link Entity}.
  */
-export type VectoEvent = 'click' | 'dblclick' | 'hover' | 'pointerdown' | 'pointerup' | 'pointercancel' | 'pointermove' | 'pointerleave' | 'change' | 'focus' | 'blur' | 'wheel' | 'keydown' | 'keyup';
+export type VectoEvent = 'click' | 'dblclick' | 'hover' | 'pointerdown' | 'pointerup' | 'pointercancel' | 'pointermove' | 'pointerleave' | 'change' | 'focus' | 'blur' | 'wheel' | 'scroll' | 'keydown' | 'keyup';
+/**
+ * Payload of the {@link VectoEvent} `'scroll'`: the scroll geometry of an
+ * entity's accessibility/automation shadow node, in CSS pixels.
+ *
+ * An entity that paints its own view of scrollable content (a text editor, a
+ * list) should treat these as authoritative while the mirror exists — the
+ * browser resolved them against the same content, and any offset the element
+ * reports (`selectionStart` from a click) is relative to them.
+ */
+export interface ScrollEventPayload {
+    /** The mirror's vertical scroll offset. */
+    scrollTop: number;
+    /** The mirror's horizontal scroll offset. */
+    scrollLeft: number;
+    /** Full scrollable content height, including the part out of view. */
+    scrollHeight: number;
+    /** Full scrollable content width, including the part out of view. */
+    scrollWidth: number;
+    /** Visible height inside the mirror's padding box (excludes any scrollbar). */
+    clientHeight: number;
+    /** Visible width inside the mirror's padding box (excludes any scrollbar). */
+    clientWidth: number;
+}
 /** Options for {@link Entity.on} / {@link Entity.off}. */
 export interface ListenerOptions {
     /** Register the listener for the capture phase (root→target) instead of bubble. */

package/dist/tree/Scene.d.ts

@@ -1168,6 +1168,19 @@ export declare class Scene {
      * resume when it returns — instead of running the full update/render every
      * frame for a scene nobody can see. No-op (stays "on screen") where
      * `IntersectionObserver` is unavailable, so SSR/jsdom behavior is unchanged.
+     *
+     * Also a no-op for a canvas that is not in the document. An offscreen canvas
+     * used purely as a texture source — `@vectojs/three`'s `ThreeAdapter` wraps
+     * one in a `CanvasTexture`, and the same pattern shows up in any
+     * render-to-texture setup — is never appended anywhere, and an
+     * `IntersectionObserver` reports a detached element as not intersecting.
+     * Observing it would therefore set `_canvasOnScreen = false` on the first
+     * callback, and since {@link loop} returns without rescheduling in that
+     * state, the loop would stop permanently: the only resume path is an
+     * `isIntersecting` transition, which a detached element can never produce.
+     * Such a canvas is always "visible" as far as this scene is concerned,
+     * because whether its output is seen depends on the consumer sampling the
+     * texture, which this scene cannot observe.
      */
     private watchCanvasVisibility;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "publishConfig": {
     "access": "public"
   },
@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "@vectojs/animation": "^0.1.1",
-    "@vectojs/layout": "^0.5.0",
+    "@vectojs/layout": "^0.6.0",
     "@vectojs/math": "^0.1.1",
     "@vectojs/text": "^0.3.0"
   },