@vectojs/core 1.6.0 → 1.6.2

package/README.md

@@ -112,6 +112,16 @@ This projection is intentionally thin. Applications still own accessible names,
 focus order, contrast, and correct control semantics. See the
 [accessibility guide](https://vectojs.org/learn/accessibility/).
 
+Non-control workspaces that own keyboard shortcuts can opt into focus order
+explicitly: return `{ role: 'region', label: 'Canvas workspace', tabIndex: 0 }`.
+The Scene refreshes the projected `tabindex` when attributes change. Keep native
+text inputs and editable content in charge of their own editing shortcuts.
+
+Interactive projected nodes capture the active pointer on `pointerdown` and route
+`pointermove`, `pointerup`, and `pointercancel` through normal VMT capture/bubble propagation.
+Treat `pointercancel` as rollback: discard transient gesture state and do not create durable
+history. Pointer capture is released safely on both completion paths.
+
 ## Static content projection
 
 Canvas-rendered text can opt into browser-native find, translation, selection, and copy without

package/dist/index.js

@@ -297,6 +297,20 @@ var ComputeParticleEntity = (_class = class extends _chunkDFNK6OV6js.Entity {
 }, _class);
 
 // src/tree/Scene.ts
+var INTERACTIVE_A11Y_ROLES = /* @__PURE__ */ new Set([
+  "button",
+  "switch",
+  "checkbox",
+  "radio",
+  "link",
+  "tab",
+  "menuitem",
+  "slider",
+  "combobox"
+]);
+function isNativelyFocusable(element) {
+  return element instanceof HTMLButtonElement || element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement && element.hasAttribute("href");
+}
 var REDUCED_MOTION_FPS = 30;
 function parseInlinePx(value) {
   if (!value || !value.endsWith("px")) return null;
@@ -816,15 +830,29 @@ var Scene = (_class2 = class _Scene {
           node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
+        const releasePointer = (event) => {
+          if (typeof capEl.releasePointerCapture !== "function") return;
+          if (typeof capEl.hasPointerCapture === "function" && !capEl.hasPointerCapture(event.pointerId)) {
+            return;
+          }
+          try {
+            capEl.releasePointerCapture(event.pointerId);
+          } catch (error) {
+            if (!(error instanceof DOMException) || error.name !== "NotFoundError") throw error;
+          }
+        };
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
           node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
-          if (typeof capEl.releasePointerCapture === "function")
-            capEl.releasePointerCapture(e.pointerId);
+          releasePointer(e);
           node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointerup", node, e));
         });
+        el.addEventListener("pointercancel", (e) => {
+          releasePointer(e);
+          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointercancel", node, e));
+        });
         el.addEventListener(
           "pointermove",
           (e) => node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointermove", node, e))
@@ -896,20 +924,7 @@ var Scene = (_class2 = class _Scene {
           }
           node.emit("blur", {});
         });
-        const INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
-          "button",
-          "switch",
-          "checkbox",
-          "radio",
-          "link",
-          "tab",
-          "menuitem",
-          "slider",
-          "combobox"
-        ]);
-        const nativelyFocusable = el instanceof HTMLButtonElement || el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement || el instanceof HTMLAnchorElement && el.hasAttribute("href");
-        if (!nativelyFocusable && attrs.role && INTERACTIVE_ROLES.has(attrs.role)) {
-          el.setAttribute("tabindex", "0");
+        if (!isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role)) {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
@@ -931,6 +946,13 @@ var Scene = (_class2 = class _Scene {
       if (attrs.label !== void 0 && el.getAttribute("aria-label") !== attrs.label) {
         el.setAttribute("aria-label", attrs.label);
       }
+      const implicitTabIndex = !isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role) ? 0 : null;
+      const desiredTabIndex = _nullishCoalesce(attrs.tabIndex, () => ( implicitTabIndex));
+      if (desiredTabIndex === null) {
+        if (el.hasAttribute("tabindex")) el.removeAttribute("tabindex");
+      } 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);
       }
@@ -2513,7 +2535,14 @@ var DOMPortalEntity = (_class7 = class extends _chunkDFNK6OV6js.Entity {
         });
         this.resizeObserver.observe(this.domElement);
       }
-      const events = ["click", "pointerdown", "pointerup", "pointermove", "wheel"];
+      const events = [
+        "click",
+        "pointerdown",
+        "pointerup",
+        "pointercancel",
+        "pointermove",
+        "wheel"
+      ];
       for (const type of events) {
         const handler = (e) => {
           this.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)(type, this, e));

package/dist/index.mjs

@@ -297,6 +297,20 @@ var ComputeParticleEntity = class extends Entity {
 };
 
 // src/tree/Scene.ts
+var INTERACTIVE_A11Y_ROLES = /* @__PURE__ */ new Set([
+  "button",
+  "switch",
+  "checkbox",
+  "radio",
+  "link",
+  "tab",
+  "menuitem",
+  "slider",
+  "combobox"
+]);
+function isNativelyFocusable(element) {
+  return element instanceof HTMLButtonElement || element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement && element.hasAttribute("href");
+}
 var REDUCED_MOTION_FPS = 30;
 function parseInlinePx(value) {
   if (!value || !value.endsWith("px")) return null;
@@ -816,15 +830,29 @@ var Scene = class _Scene {
           node.dispatchEvent(new VectoJSEvent("pointerleave", node, e, false));
         });
         const capEl = el;
+        const releasePointer = (event) => {
+          if (typeof capEl.releasePointerCapture !== "function") return;
+          if (typeof capEl.hasPointerCapture === "function" && !capEl.hasPointerCapture(event.pointerId)) {
+            return;
+          }
+          try {
+            capEl.releasePointerCapture(event.pointerId);
+          } catch (error) {
+            if (!(error instanceof DOMException) || error.name !== "NotFoundError") throw error;
+          }
+        };
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
           node.dispatchEvent(new VectoJSEvent("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
-          if (typeof capEl.releasePointerCapture === "function")
-            capEl.releasePointerCapture(e.pointerId);
+          releasePointer(e);
           node.dispatchEvent(new VectoJSEvent("pointerup", node, e));
         });
+        el.addEventListener("pointercancel", (e) => {
+          releasePointer(e);
+          node.dispatchEvent(new VectoJSEvent("pointercancel", node, e));
+        });
         el.addEventListener(
           "pointermove",
           (e) => node.dispatchEvent(new VectoJSEvent("pointermove", node, e))
@@ -896,20 +924,7 @@ var Scene = class _Scene {
           }
           node.emit("blur", {});
         });
-        const INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
-          "button",
-          "switch",
-          "checkbox",
-          "radio",
-          "link",
-          "tab",
-          "menuitem",
-          "slider",
-          "combobox"
-        ]);
-        const nativelyFocusable = el instanceof HTMLButtonElement || el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement || el instanceof HTMLAnchorElement && el.hasAttribute("href");
-        if (!nativelyFocusable && attrs.role && INTERACTIVE_ROLES.has(attrs.role)) {
-          el.setAttribute("tabindex", "0");
+        if (!isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role)) {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
@@ -931,6 +946,13 @@ var Scene = class _Scene {
       if (attrs.label !== void 0 && el.getAttribute("aria-label") !== attrs.label) {
         el.setAttribute("aria-label", attrs.label);
       }
+      const implicitTabIndex = !isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role) ? 0 : null;
+      const desiredTabIndex = attrs.tabIndex ?? implicitTabIndex;
+      if (desiredTabIndex === null) {
+        if (el.hasAttribute("tabindex")) el.removeAttribute("tabindex");
+      } 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);
       }
@@ -2513,7 +2535,14 @@ var DOMPortalEntity = class extends Entity {
         });
         this.resizeObserver.observe(this.domElement);
       }
-      const events = ["click", "pointerdown", "pointerup", "pointermove", "wheel"];
+      const events = [
+        "click",
+        "pointerdown",
+        "pointerup",
+        "pointercancel",
+        "pointermove",
+        "wheel"
+      ];
       for (const type of events) {
         const handler = (e) => {
           this.dispatchEvent(new VectoJSEvent(type, this, e));

package/dist/tree/Entity.d.ts

@@ -129,6 +129,8 @@ export interface A11yAttributes {
     role?: string;
     /** Accessible name applied via `aria-label`. */
     label?: string;
+    /** Explicit keyboard tab order for projected non-native interaction regions. */
+    tabIndex?: number;
     /** Destination URL; only meaningful for `tag: 'a'`. */
     href?: string;
     /** Link target; only meaningful for `tag: 'a'`. Defaults to current window. */
@@ -162,7 +164,7 @@ export interface A11yAttributes {
 /**
  * Union of all pointer/interaction events that can be emitted by an {@link Entity}.
  */
-export type VectoEvent = 'click' | 'hover' | 'pointerdown' | 'pointerup' | 'pointermove' | 'pointerleave' | 'change' | 'focus' | 'blur' | 'wheel' | 'keydown' | 'keyup';
+export type VectoEvent = 'click' | 'hover' | 'pointerdown' | 'pointerup' | 'pointercancel' | 'pointermove' | 'pointerleave' | 'change' | 'focus' | 'blur' | 'wheel' | 'keydown' | 'keyup';
 /** Options for {@link Entity.on} / {@link Entity.off}. */
 export interface ListenerOptions {
     /** Register the listener for the capture phase (root→target) instead of bubble. */

package/package.json

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