@yodaos-pkg/ink 0.15.0 → 0.15.1

package/README.md

@@ -297,7 +297,11 @@ Binds common DOM events to the current `InkView`.
   - The keyboard event target, defaulting to `window` when available
 - `options.focusTarget?: HTMLElement | HTMLCanvasElement | null`
   - Optional
-  - The target used for focus and blur events, defaulting to the canvas
+  - The target used for focus synchronization when `syncFocus` is enabled, defaulting to the canvas
+- `options.syncFocus?: boolean`
+  - Optional
+  - Controls whether DOM `focus` / `blur` and click-to-focus are synchronized into Ink host focus
+  - Defaults to `false`
 - `options.preventWheelDefault?: boolean`
   - Optional
   - Controls whether wheel default behavior is prevented
@@ -308,7 +312,7 @@ Binds common DOM events to the current `InkView`.
 - Binds `pointerdown` / `pointermove` / `pointerup` / `pointercancel`
 - Binds `wheel`
 - Binds `keydown` / `keyup`
-- Binds `focus` / `blur`
+- Optionally binds `focus` / `blur` when `syncFocus` is enabled
 - Automatically forwards these browser events into the Ink runtime
 
 **Returns**

package/index.d.ts

@@ -310,8 +310,50 @@ export interface BindDomEventsOptions {
   canvas?: HTMLCanvasElement;
   /** Keyboard event target, typically `window`, `document`, or a focusable element. */
   keyboardTarget?: EventTarget | null;
-  /** Element that should receive focus/blur synchronization for the Ink instance. */
+  /**
+   * DOM element used as the focus signal source when `syncFocus` is enabled.
+   *
+   * When enabled, Ink listens to this element's native `focus` and `blur`
+   * events and forwards them to `inkView.focus()` and `inkView.blur()`.
+   * `pointerdown` on the canvas also attempts to call `focus()` on this target.
+   *
+   * This option is useful when the host does not want the canvas itself to be
+   * the browser-focused element. For example, a host may keep keyboard focus on
+   * an outer wrapper element while still rendering Ink inside a nested canvas.
+   *
+   * Important: this follows the target element's own `focus` / `blur` state,
+   * not a container-style "focus within" semantic. If focus moves from this
+   * element to another focusable node, such as an external `<input>`, Ink will
+   * observe that blur when `syncFocus` is enabled.
+   *
+   * Defaults to the currently bound canvas.
+   */
   focusTarget?: HTMLElement | HTMLCanvasElement | null;
+  /**
+   * Enables automatic synchronization from browser DOM focus to Ink host focus.
+   *
+   * When set to `true`, `bindDomEvents()` treats the browser focus state as the
+   * source of truth for host focus:
+   * - listens to `focusTarget`'s `focus` / `blur` events
+   * - calls `inkView.focus()` / `inkView.blur()` automatically
+   * - attempts click-to-focus on `pointerdown`
+   * - makes the `focusTarget` focusable with `tabindex="0"` when needed
+   *
+   * When set to `false`, `bindDomEvents()` still binds pointer, wheel, and
+   * keyboard events, but it does not change Ink host focus automatically. In
+   * that mode, the host should call `inkView.focus()` and `inkView.blur()`
+   * explicitly based on product-level lifecycle or visibility state.
+   *
+   * Recommended usage:
+   * - Use `true` only when the host really wants DOM focus to directly control
+   *   Ink host focus.
+   * - Keep `false` when browser focus may temporarily move to another element,
+   *   such as a sibling or external `<input>`, while the Ink instance should
+   *   still remain host-focused.
+   *
+   * Defaults to `false`.
+   */
+  syncFocus?: boolean;
   /** Whether wheel events should call `preventDefault()` before forwarding. */
   preventWheelDefault?: boolean;
 }

package/index.js

@@ -1927,6 +1927,7 @@ export class InkView {
 
     const keyboardTarget = options.keyboardTarget || globalThis.window || canvas;
     const focusTarget = options.focusTarget || canvas;
+    const syncFocus = options.syncFocus === true;
     const listeners = [];
     const addListener = (target, type, listener, listenerOptions) => {
       if (!target || typeof target.addEventListener !== 'function') {
@@ -1936,7 +1937,12 @@ export class InkView {
       listeners.push(() => target.removeEventListener(type, listener, listenerOptions));
     };
 
-    if (focusTarget && typeof focusTarget.setAttribute === 'function' && focusTarget.tabIndex < 0) {
+    if (
+      syncFocus &&
+      focusTarget &&
+      typeof focusTarget.setAttribute === 'function' &&
+      focusTarget.tabIndex < 0
+    ) {
       focusTarget.setAttribute('tabindex', '0');
     }
 
@@ -1953,7 +1959,7 @@ export class InkView {
     addListener(canvas, 'pointerdown', (event) => {
       const { x, y } = getPointerPosition(canvas, event);
       this.notifyUserInteraction();
-      if (focusTarget && typeof focusTarget.focus === 'function') {
+      if (syncFocus && focusTarget && typeof focusTarget.focus === 'function') {
         focusTarget.focus();
       }
       this.#rawView.dispatchPointer(
@@ -2037,12 +2043,14 @@ export class InkView {
       );
       this.requestRender();
     });
-    addListener(focusTarget, 'focus', () => {
-      this.focus();
-    });
-    addListener(focusTarget, 'blur', () => {
-      this.blur();
-    });
+    if (syncFocus) {
+      addListener(focusTarget, 'focus', () => {
+        this.focus();
+      });
+      addListener(focusTarget, 'blur', () => {
+        this.blur();
+      });
+    }
 
     this.#domCleanup = () => {
       for (const dispose of listeners.splice(0)) {

package/package.json

@@ -10,7 +10,7 @@
     "access": "public",
     "registry": "https://registry.npmjs.com/"
   },
-  "version": "0.15.0",
+  "version": "0.15.1",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",

package/pkg/ink_web.d.ts

@@ -96,10 +96,10 @@ export interface InitOutput {
     readonly inkwebview_setTarget: (a: number, b: number, c: number, d: number) => void;
     readonly inkwebview_setViewport: (a: number, b: number, c: number, d: number, e: number) => void;
     readonly start: () => void;
-    readonly __wasm_bindgen_func_elem_14331: (a: number, b: number, c: number, d: number) => void;
-    readonly __wasm_bindgen_func_elem_13236: (a: number, b: number, c: number) => void;
-    readonly __wasm_bindgen_func_elem_13236_2: (a: number, b: number, c: number) => void;
-    readonly __wasm_bindgen_func_elem_13236_3: (a: number, b: number, c: number) => void;
+    readonly __wasm_bindgen_func_elem_14330: (a: number, b: number, c: number, d: number) => void;
+    readonly __wasm_bindgen_func_elem_13233: (a: number, b: number, c: number) => void;
+    readonly __wasm_bindgen_func_elem_13233_2: (a: number, b: number, c: number) => void;
+    readonly __wasm_bindgen_func_elem_13233_3: (a: number, b: number, c: number) => void;
     readonly __wasm_bindgen_func_elem_13234: (a: number, b: number) => void;
     readonly __wbindgen_export: (a: number, b: number) => number;
     readonly __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;

package/pkg/ink_web.js

@@ -1370,26 +1370,26 @@ function __wbg_get_imports() {
         },
         __wbindgen_cast_0000000000000001: function(arg0, arg1) {
             // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [Externref], shim_idx: 3465, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_14331);
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_14330);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000002: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("CloseEvent")], shim_idx: 3374, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_13236);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("CloseEvent")], shim_idx: 3376, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_13233);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000003: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("Event")], shim_idx: 3374, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_13236_2);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("Event")], shim_idx: 3376, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_13233_2);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000004: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("MessageEvent")], shim_idx: 3374, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_13236_3);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("MessageEvent")], shim_idx: 3376, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_13233_3);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000005: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [], shim_idx: 3378, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [], shim_idx: 3374, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
             const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_13234);
             return addHeapObject(ret);
         },
@@ -1451,22 +1451,22 @@ function __wasm_bindgen_func_elem_13234(arg0, arg1) {
     wasm.__wasm_bindgen_func_elem_13234(arg0, arg1);
 }
 
-function __wasm_bindgen_func_elem_13236(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_13236(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_13233(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_13233(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_13236_2(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_13236_2(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_13233_2(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_13233_2(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_13236_3(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_13236_3(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_13233_3(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_13233_3(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_14331(arg0, arg1, arg2) {
+function __wasm_bindgen_func_elem_14330(arg0, arg1, arg2) {
     try {
         const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        wasm.__wasm_bindgen_func_elem_14331(retptr, arg0, arg1, addHeapObject(arg2));
+        wasm.__wasm_bindgen_func_elem_14330(retptr, arg0, arg1, addHeapObject(arg2));
         var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
         var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
         if (r1) {

package/pkg/ink_web_bg.wasm.d.ts

@@ -41,10 +41,10 @@ export const inkwebview_setLayoutMode: (a: number, b: number, c: number) => void
 export const inkwebview_setTarget: (a: number, b: number, c: number, d: number) => void;
 export const inkwebview_setViewport: (a: number, b: number, c: number, d: number, e: number) => void;
 export const start: () => void;
-export const __wasm_bindgen_func_elem_14331: (a: number, b: number, c: number, d: number) => void;
-export const __wasm_bindgen_func_elem_13236: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_13236_2: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_13236_3: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_14330: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_13233: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_13233_2: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_13233_3: (a: number, b: number, c: number) => void;
 export const __wasm_bindgen_func_elem_13234: (a: number, b: number) => void;
 export const __wbindgen_export: (a: number, b: number) => number;
 export const __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;