@vectojs/core 1.6.1 → 1.7.0

package/README.md

@@ -112,6 +112,11 @@ 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

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;
@@ -910,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();
@@ -945,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);
       }
@@ -1069,6 +1077,8 @@ var Scene = (_class2 = class _Scene {
       s.margin = "0";
       s.padding = "0";
       s.color = "transparent";
+      s.forcedColorAdjust = "none";
+      s.setProperty("-webkit-text-fill-color", "transparent");
       s.whiteSpace = "pre-wrap";
       s.overflow = "hidden";
       s.zIndex = "0";
@@ -1098,24 +1108,26 @@ var Scene = (_class2 = class _Scene {
           const lineFont = _nullishCoalesce(_nullishCoalesce(line.font, () => ( projection.font)), () => ( ""));
           const lineHeight2 = _nullishCoalesce(_nullishCoalesce(line.lineHeight, () => ( projection.lineHeight)), () => ( 16));
           lineElement.style.position = "absolute";
+          lineElement.dir = "auto";
           lineElement.style.left = `${line.x}px`;
           lineElement.style.top = `${line.y + line.baseline - _chunkDFNK6OV6js.cssLineBoxBaseline.call(void 0, lineFont, lineHeight2)}px`;
           lineElement.style.whiteSpace = "pre";
           if (lineFont) lineElement.style.font = lineFont;
           lineElement.style.lineHeight = `${lineHeight2}px`;
+          const separator = _nullishCoalesce(line.separatorAfter, () => ( (index < lines.length - 1 ? "\n" : "")));
           if (line.runs && line.runs.length > 0) {
-            for (const run of line.runs) {
+            for (let runIndex = 0; runIndex < line.runs.length; runIndex++) {
+              const run = line.runs[runIndex];
               const runElement = document.createElement("span");
-              runElement.textContent = run.text;
+              runElement.textContent = run.text + (runIndex === line.runs.length - 1 ? separator : "");
               if (run.font) runElement.style.font = run.font;
               runElement.style.lineHeight = `${lineHeight2}px`;
               lineElement.appendChild(runElement);
             }
           } else {
-            lineElement.textContent = line.text;
+            lineElement.textContent = line.text + separator;
           }
           el.appendChild(lineElement);
-          if (index < lines.length - 1) el.appendChild(document.createTextNode("\n"));
         }
         el.dataset.vectoProjectionLines = signature;
       }

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;
@@ -910,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();
@@ -945,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);
       }
@@ -1069,6 +1077,8 @@ var Scene = class _Scene {
       s.margin = "0";
       s.padding = "0";
       s.color = "transparent";
+      s.forcedColorAdjust = "none";
+      s.setProperty("-webkit-text-fill-color", "transparent");
       s.whiteSpace = "pre-wrap";
       s.overflow = "hidden";
       s.zIndex = "0";
@@ -1098,24 +1108,26 @@ var Scene = class _Scene {
           const lineFont = line.font ?? projection.font ?? "";
           const lineHeight2 = line.lineHeight ?? projection.lineHeight ?? 16;
           lineElement.style.position = "absolute";
+          lineElement.dir = "auto";
           lineElement.style.left = `${line.x}px`;
           lineElement.style.top = `${line.y + line.baseline - cssLineBoxBaseline(lineFont, lineHeight2)}px`;
           lineElement.style.whiteSpace = "pre";
           if (lineFont) lineElement.style.font = lineFont;
           lineElement.style.lineHeight = `${lineHeight2}px`;
+          const separator = line.separatorAfter ?? (index < lines.length - 1 ? "\n" : "");
           if (line.runs && line.runs.length > 0) {
-            for (const run of line.runs) {
+            for (let runIndex = 0; runIndex < line.runs.length; runIndex++) {
+              const run = line.runs[runIndex];
               const runElement = document.createElement("span");
-              runElement.textContent = run.text;
+              runElement.textContent = run.text + (runIndex === line.runs.length - 1 ? separator : "");
               if (run.font) runElement.style.font = run.font;
               runElement.style.lineHeight = `${lineHeight2}px`;
               lineElement.appendChild(runElement);
             }
           } else {
-            lineElement.textContent = line.text;
+            lineElement.textContent = line.text + separator;
           }
           el.appendChild(lineElement);
-          if (index < lines.length - 1) el.appendChild(document.createTextNode("\n"));
         }
         el.dataset.vectoProjectionLines = signature;
       }

package/dist/tree/Entity.d.ts

@@ -68,6 +68,13 @@ export interface ContentProjectionRun {
 export interface ContentProjectionLine {
     /** Text for browser find-in-page and native selection. */
     text: string;
+    /**
+     * Logical source content between this visual line and the next one. Use a
+     * space for a consumed soft-wrap separator, `"\n"` for a hard break, or an
+     * empty string for a space-less wrap. Omit to retain the legacy newline
+     * fallback between non-final lines.
+     */
+    separatorAfter?: string;
     /** Local origin of the visual line inside the entity. */
     x: number;
     y: number;
@@ -81,7 +88,7 @@ export interface ContentProjectionLine {
     runs?: ContentProjectionRun[];
 }
 export interface ContentProjection {
-    /** The plain text content as rendered (line breaks as `\n`). */
+    /** The logical source text exposed to find, selection, copy, and assistive technology. */
     text: string;
     /** CSS font shorthand matching the drawn glyphs, e.g. `'24px sans-serif'`. */
     font?: string;
@@ -129,6 +136,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. */

package/package.json

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