@yodaos-pkg/ink 0.8.0 → 0.9.0

package/README.md

@@ -67,8 +67,12 @@ Creates an `InkView` instance and initializes the wasm runtime internally.
   - Required
   - The logical width of the Ink view
 - `options.height: number`
-  - Required
-  - The logical height of the Ink view
+  - Required in `bounded` mode
+  - Optional in `width-constrained-auto-height` mode
+- `options.layoutMode?: 'bounded' | 'width-constrained-auto-height'`
+  - Optional
+  - Defaults to `bounded`
+  - Use `width-constrained-auto-height` when the host wants a fixed width and a runtime-driven height
 - `options.scaleFactor?: number`
   - Optional
   - The device pixel ratio, defaulting to `window.devicePixelRatio`
@@ -87,6 +91,7 @@ Creates an `InkView` instance and initializes the wasm runtime internally.
 - Creates the underlying `InkWebView`
 - Returns the higher-level `InkView` wrapper
 - Automatically calls `bindCanvas()` if a `canvas` is provided
+- In auto-height mode, automatically adopts the latest runtime content height for HTML canvas surfaces
 
 **Returns**
 
@@ -94,6 +99,27 @@ Creates an `InkView` instance and initializes the wasm runtime internally.
   - Resolves to an `InkView` instance that can then call
     `bindDomEvents()`, `openBundle()`, and `openFromVfs()`
 
+### Auto-height Layout
+
+Use `layoutMode: 'width-constrained-auto-height'` when the host controls width
+but wants Ink to drive the rendered height:
+
+```ts
+const view = await createInkView({
+  width: 360,
+  layoutMode: 'width-constrained-auto-height',
+  scaleFactor: window.devicePixelRatio,
+  canvas,
+});
+```
+
+In this mode:
+
+- the host still owns the constrained width
+- the SDK automatically adopts runtime-reported content height
+- browser hosts should call `view.resize()` when width or device pixel ratio changes
+- browser hosts do not need to manually apply HTML canvas height in the common case
+
 ### `configureNetwork(options)`
 
 Configures host-controlled request interception for Ink network traffic.

package/index.d.ts

@@ -40,16 +40,61 @@ export interface InitInkOptions {
 export interface CreateInkViewOptions {
   /** Initial logical width in CSS pixels. */
   width: number;
-  /** Initial logical height in CSS pixels. */
-  height: number;
+  /** Initial logical height in CSS pixels. Required in `bounded` mode and optional in auto-height mode. */
+  height?: number;
+  /** Layout behavior used by the host surface. Defaults to `bounded`. */
+  layoutMode?: InkLayoutMode;
   /** Device pixel ratio override. Defaults to `window.devicePixelRatio` when available. */
   scaleFactor?: number;
-  /** Optional canvas to bind immediately after creation. */
+  /** Legacy shortcut for immediately binding an HTML canvas after creation. */
   canvas?: HTMLCanvasElement;
+  /** Optional surface descriptor bound immediately after creation. */
+  surface?: InkSurfaceDescriptor | null;
+  /** Whether the internal render loop should start immediately after creation. */
+  autoRender?: boolean;
+  /** Whether `destroy()` should clear the currently attached surface. Defaults to `true`. */
+  clearOnDestroy?: boolean;
+  /** Callback fired after Ink reports a new measured content size. */
+  onContentSizeChanged?: InkContentSizeChangedHandler | null;
   /** Optional wasm bootstrap overrides. */
   wasm?: InitInkOptions;
 }
 
+/** Cross-platform layout mode exposed by browser hosts. */
+export type InkLayoutMode = 'bounded' | 'width-constrained-auto-height';
+
+/** Measured content size reported by the Ink runtime in CSS pixels. */
+export interface InkContentSize {
+  width: number;
+  height: number;
+}
+
+/** Surface descriptor for a DOM-backed HTML canvas target. */
+export interface InkHtmlCanvasSurface {
+  type: 'html-canvas';
+  canvas: HTMLCanvasElement;
+}
+
+/**
+ * Surface descriptor for an OffscreenCanvas target.
+ *
+ * The current browser SDK supports this descriptor on the main thread by
+ * rendering into an internal backing `HTMLCanvasElement` and copying each
+ * presented frame into the target `OffscreenCanvas`.
+ *
+ * This means the host-facing `InkView` API already works with
+ * `offscreen-canvas`, but it is not yet a pure worker-only renderer path.
+ * Hosts that need a document-free OffscreenCanvas backend should treat that as
+ * a future capability.
+ */
+export interface InkOffscreenCanvasSurface {
+  type: 'offscreen-canvas';
+  canvas: OffscreenCanvas;
+}
+
+/** Supported surface descriptors accepted by {@link InkView.attachSurface}. */
+export type InkSurfaceDescriptor = InkHtmlCanvasSurface | InkOffscreenCanvasSurface;
+
 /**
  * Opens an in-memory Ink app bundle that is already available in the host.
  */
@@ -197,6 +242,8 @@ export interface InkHostMessageStream {
 
 /** Callback invoked after the runtime requests that the host close the current view. */
 export type InkCloseRequestedHandler = () => void;
+/** Callback invoked after the runtime reports a new measured content size. */
+export type InkContentSizeChangedHandler = (contentSize: InkContentSize) => void;
 
 /**
  * Initializes the browser SDK and ensures the wasm runtime is ready to create
@@ -255,7 +302,7 @@ export declare function loadBundleFromVfs(
  * A typical flow is:
  *
  * 1. Create a view with {@link InkView.create}.
- * 2. Bind a canvas and DOM events if needed.
+ * 2. Attach a surface and DOM events if needed.
  * 3. Open an in-memory bundle or load one from VFS.
  * 4. Render manually with {@link render} or start the internal loop with
  *    {@link startRendering}.
@@ -271,11 +318,33 @@ export declare class InkView {
    */
   static create(options: CreateInkViewOptions): Promise<InkView>;
 
+  /**
+   * Attaches or reattaches the render surface used by this view.
+   *
+   * Hosts should prefer this over the legacy {@link bindCanvas} alias when
+   * adopting the `View + Surface + Runtime Control` API shape.
+   */
+  attachSurface(surface: InkSurfaceDescriptor): this;
+
+  /**
+   * Detaches the currently attached surface without destroying the view.
+   *
+   * When `options.clear` is not `false`, the host-visible surface is cleared
+   * before it is released from the view.
+   */
+  detachSurface(options?: { clear?: boolean }): this;
+
+  /** Returns the currently attached surface descriptor, if any. */
+  getSurface(): InkSurfaceDescriptor | null;
+
   /**
    * Binds or rebinds the canvas used for drawing the current view.
    *
    * Rebinding is useful when the host recreates a canvas element while keeping
    * the same Ink runtime instance alive.
+   *
+   * This is a legacy alias for
+   * `attachSurface({ type: 'html-canvas', canvas })`.
    */
   bindCanvas(canvas: HTMLCanvasElement): this;
 
@@ -321,11 +390,15 @@ export declare class InkView {
   /**
    * Resizes the logical surface and optionally updates the scale factor.
    *
-   * Hosts should call this whenever the canvas size or device pixel ratio
-   * changes.
+   * Hosts should call this whenever the constrained width or device pixel ratio
+   * changes. In `width-constrained-auto-height` mode, the SDK continues to
+   * adopt the runtime-reported height automatically after width-driven relayout.
    */
   resize(width: number, height: number, scaleFactor?: number): this;
 
+  /** Switches the active layout mode and forces the current page to re-layout. */
+  setLayoutMode(layoutMode: InkLayoutMode): this;
+
   /** Forwards a host focus event so the Ink instance can accept focus-dependent input. */
   focus(): this;
 
@@ -356,6 +429,20 @@ export declare class InkView {
    */
   notifyUserInteraction(): this;
 
+  /** Forwards a pointer-like event directly into the current Ink view. */
+  dispatchPointer(
+    eventType: string,
+    x: number,
+    y: number,
+    id?: number,
+    button?: number,
+    deltaX?: number,
+    deltaY?: number,
+  ): this;
+
+  /** Forwards a keyboard/input event directly into the current Ink view. */
+  dispatchInput(eventType: string, code: string, timestamp?: number): this;
+
   /**
    * Dispatches a one-shot host message to the current Ink page.
    *
@@ -396,21 +483,37 @@ export declare class InkView {
   /** Stops the internal animation/render loop started by {@link startRendering}. */
   stopRendering(): this;
 
-  /** Returns whether the internal render loop is currently active. */
+  /** Returns whether the current app is still running and has not requested close. */
   isRunning(): boolean;
 
+  /** Returns whether the internal render loop is currently active. */
+  isRendering(): boolean;
+
+  /** Returns whether this host wrapper has already been destroyed. */
+  isDestroyed(): boolean;
+
   /**
    * Registers the callback fired after Ink requests that the host close this view.
    *
    * When close is requested, the SDK marks the view as close-requested, stops
-   * the internal render loop automatically, and then invokes this callback.
+   * the internal render loop automatically, relies on the runtime to blank the
+   * currently attached surface, and then invokes this callback.
    * Pass `null` to clear the current callback.
    */
   setOnCloseRequested(callback: InkCloseRequestedHandler | null): this;
 
+  /** Property-style close callback preferred by the new SDK shape. */
+  onCloseRequested: InkCloseRequestedHandler | null;
+
   /** Returns whether Ink has already requested that the host close this view. */
   isCloseRequested(): boolean;
 
+  /** Registers the callback fired after Ink reports a new measured content size. */
+  setOnContentSizeChanged(callback: InkContentSizeChangedHandler | null): this;
+
+  /** Property-style content size callback preferred by the new SDK shape. */
+  onContentSizeChanged: InkContentSizeChangedHandler | null;
+
   /**
    * Releases the underlying wasm view and detaches associated host resources.
    *

package/index.js

@@ -250,9 +250,11 @@ function normalizeKeyboardCode(event) {
 
 function getPointerPosition(canvas, event) {
   const rect = canvas.getBoundingClientRect();
+  const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+  const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
   return {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top,
+    x: (event.clientX - rect.left) * scaleX,
+    y: (event.clientY - rect.top) * scaleY,
   };
 }
 
@@ -278,6 +280,20 @@ function ensureAnimationFrameApi() {
   };
 }
 
+function createDomCanvas(width, height) {
+  const documentRef = globalThis.document;
+  if (!documentRef || typeof documentRef.createElement !== 'function') {
+    throw new Error(
+      'OffscreenCanvas surfaces currently require a browser document to create a backing HTML canvas.',
+    );
+  }
+
+  const canvas = documentRef.createElement('canvas');
+  canvas.width = Math.max(1, Number(width) || 1);
+  canvas.height = Math.max(1, Number(height) || 1);
+  return canvas;
+}
+
 function normalizeHostMessageMetadata(origin, lastEventId) {
   if (typeof origin !== 'string') {
     throw new TypeError('`origin` must be a string.');
@@ -313,6 +329,81 @@ function serializeHostMessagePayload(dataOrJson) {
   return payloadJson;
 }
 
+function cloneSurfaceDescriptor(surface) {
+  if (!surface) {
+    return null;
+  }
+  return { ...surface };
+}
+
+function normalizeSurfaceDescriptor(surface) {
+  if (!surface) {
+    return null;
+  }
+
+  if (typeof surface !== 'object') {
+    throw new TypeError('`surface` must be an object.');
+  }
+
+  if (surface.type === 'html-canvas') {
+    if (!surface.canvas || typeof surface.canvas.getBoundingClientRect !== 'function') {
+      throw new TypeError('`surface.canvas` must be an HTMLCanvasElement-like object.');
+    }
+    return {
+      type: 'html-canvas',
+      canvas: surface.canvas,
+    };
+  }
+
+  if (surface.type === 'offscreen-canvas') {
+    if (!surface.canvas || typeof surface.canvas.getContext !== 'function') {
+      throw new TypeError('`surface.canvas` must be an OffscreenCanvas-like object.');
+    }
+    return {
+      type: 'offscreen-canvas',
+      canvas: surface.canvas,
+    };
+  }
+
+  throw new TypeError(`Unsupported surface type: ${String(surface.type)}`);
+}
+
+function normalizeLayoutMode(value) {
+  if (value == null || value === '') {
+    return 'bounded';
+  }
+  if (value === 'bounded' || value === 'width-constrained-auto-height') {
+    return value;
+  }
+  throw new TypeError('`layoutMode` must be either `bounded` or `width-constrained-auto-height`.');
+}
+
+function normalizeHostLanguageModelConfig(config) {
+  if (config == null) {
+    return null;
+  }
+  if (typeof config !== 'object') {
+    throw new TypeError('`config` must be an object or null.');
+  }
+
+  const headers =
+    config.headers && typeof config.headers === 'object' && !Array.isArray(config.headers)
+      ? Object.fromEntries(
+          Object.entries(config.headers).map(([key, value]) => [String(key), String(value)]),
+        )
+      : {};
+
+  return {
+    endpoint: String(config.endpoint || '').trim(),
+    defaultModel: config.defaultModel == null ? null : String(config.defaultModel).trim(),
+    apiStyle: String(config.apiStyle || '').trim(),
+    headers,
+    shareVendorHeaders: Boolean(config.shareVendorHeaders),
+    vendorHeadersEnv:
+      config.vendorHeadersEnv == null ? null : String(config.vendorHeadersEnv).trim(),
+  };
+}
+
 class InkHostMessageStream {
   #rawStream;
   #requestRender;
@@ -369,22 +460,31 @@ export class InkView {
   static async create(options) {
     const config = options || {};
     const width = Number(config.width);
+    const layoutMode = normalizeLayoutMode(config.layoutMode);
     const height = Number(config.height);
+    const scaleFactor = Number(config.scaleFactor || getDefaultScaleFactor());
 
-    if (!Number.isFinite(width) || !Number.isFinite(height)) {
-      throw new Error('`width` and `height` are required numeric values.');
+    if (!Number.isFinite(width)) {
+      throw new Error('`width` is a required numeric value.');
+    }
+    if (layoutMode === 'bounded' && !Number.isFinite(height)) {
+      throw new Error('`height` is required when `layoutMode` is `bounded`.');
     }
+    const initialHeight =
+      layoutMode === 'width-constrained-auto-height' && !Number.isFinite(height) ? 1 : height;
 
     const bindings = await initInk(config.wasm);
-    const rawView = new bindings.InkWebView(
-      width,
-      height,
-      Number(config.scaleFactor || getDefaultScaleFactor()),
-    );
+    const physicalWidth = Math.max(1, Math.round(width * scaleFactor));
+    const physicalHeight = Math.max(1, Math.round(initialHeight * scaleFactor));
+    const rawView = new bindings.InkWebView(physicalWidth, physicalHeight, scaleFactor, layoutMode);
     const view = new InkView(rawView, config);
-
-    if (config.canvas) {
-      view.bindCanvas(config.canvas);
+    const initialSurface =
+      config.surface || (config.canvas ? { type: 'html-canvas', canvas: config.canvas } : null);
+    if (initialSurface) {
+      view.attachSurface(initialSurface);
+    }
+    if (config.autoRender) {
+      view.startRendering();
     }
 
     return view;
@@ -392,6 +492,7 @@ export class InkView {
 
   #rawView;
   #canvas;
+  #surface;
   #animationFrameApi;
   #frameHandle;
   #autoRender;
@@ -399,10 +500,20 @@ export class InkView {
   #destroyed;
   #domCleanup;
   #onCloseRequested;
+  #clearOnDestroy;
+  #logicalWidth;
+  #logicalHeight;
+  #boundedHeight;
+  #layoutMode;
+  #latestContentSize;
+  #scaleFactor;
+  #surfaceBinding;
+  #onContentSizeChanged;
 
   constructor(rawView, options = {}) {
     this.#rawView = rawView;
     this.#canvas = options.canvas || null;
+    this.#surface = null;
     this.#animationFrameApi = ensureAnimationFrameApi();
     this.#frameHandle = null;
     this.#autoRender = false;
@@ -410,6 +521,225 @@ export class InkView {
     this.#destroyed = false;
     this.#domCleanup = null;
     this.#onCloseRequested = null;
+    this.#clearOnDestroy = options.clearOnDestroy !== false;
+    this.#logicalWidth = Number(options.width) || 1;
+    this.#logicalHeight = Number(options.height) || 1;
+    this.#boundedHeight = Number(options.height) || 1;
+    this.#layoutMode = normalizeLayoutMode(options.layoutMode);
+    this.#latestContentSize = null;
+    this.#scaleFactor = Number(options.scaleFactor || getDefaultScaleFactor());
+    this.#surfaceBinding = null;
+    this.#onContentSizeChanged = null;
+    this.onContentSizeChanged = options.onContentSizeChanged || null;
+  }
+
+  #clearSurfaceContents() {
+    const clearTarget = (target) => {
+      if (!target || typeof target.getContext !== 'function') {
+        return;
+      }
+
+      const context = target.getContext('2d');
+      if (!context || typeof context.clearRect !== 'function') {
+        return;
+      }
+
+      if (typeof context.save === 'function') {
+        context.save();
+      }
+      if (typeof context.setTransform === 'function') {
+        context.setTransform(1, 0, 0, 1, 0, 0);
+      } else if (typeof context.resetTransform === 'function') {
+        context.resetTransform();
+      }
+      context.clearRect(0, 0, Number(target.width) || 0, Number(target.height) || 0);
+      if (typeof context.restore === 'function') {
+        context.restore();
+      }
+    };
+
+    clearTarget(this.#canvas);
+    if (this.#surfaceBinding?.type === 'offscreen-canvas') {
+      clearTarget(this.#surfaceBinding.targetCanvas);
+    }
+  }
+
+  #syncSurfaceBindingSize(width, height) {
+    if (!this.#surfaceBinding || this.#surfaceBinding.type !== 'offscreen-canvas') {
+      return;
+    }
+
+    const nextWidth = Math.max(1, Number(width) || 1);
+    const nextHeight = Math.max(1, Number(height) || 1);
+    const nextBitmapWidth = Math.max(1, Math.round(nextWidth * this.#scaleFactor));
+    const nextBitmapHeight = Math.max(1, Math.round(nextHeight * this.#scaleFactor));
+    this.#surfaceBinding.backingCanvas.width = nextBitmapWidth;
+    this.#surfaceBinding.backingCanvas.height = nextBitmapHeight;
+    this.#surfaceBinding.targetCanvas.width = nextBitmapWidth;
+    this.#surfaceBinding.targetCanvas.height = nextBitmapHeight;
+  }
+
+  #syncHtmlCanvasBindingSize(width, height, options = {}) {
+    if (!this.#surfaceBinding || this.#surfaceBinding.type !== 'html-canvas') {
+      return false;
+    }
+
+    const nextWidth = Math.max(1, Number(width) || 1);
+    const nextHeight = Math.max(1, Number(height) || 1);
+    const nextBitmapWidth = Math.max(1, Math.round(nextWidth * this.#scaleFactor));
+    const nextBitmapHeight = Math.max(1, Math.round(nextHeight * this.#scaleFactor));
+    const canvas = this.#surfaceBinding.canvas;
+    let changed = false;
+
+    if (Number(canvas.width) !== nextBitmapWidth) {
+      canvas.width = nextBitmapWidth;
+      changed = true;
+    }
+    if (Number(canvas.height) !== nextBitmapHeight) {
+      canvas.height = nextBitmapHeight;
+      changed = true;
+    }
+
+    if (options.updateStyleWidth && canvas.style?.width !== `${nextWidth}px`) {
+      canvas.style.width = `${nextWidth}px`;
+      changed = true;
+    }
+
+    if (options.updateStyleHeight && canvas.style?.height !== `${nextHeight}px`) {
+      canvas.style.height = `${nextHeight}px`;
+      changed = true;
+    }
+
+    if (options.updateContainerWidth && canvas.parentElement?.style?.width !== `${nextWidth}px`) {
+      canvas.parentElement.style.width = `${nextWidth}px`;
+      changed = true;
+    }
+
+    if (options.updateContainerHeight && canvas.parentElement?.style?.height !== 'auto') {
+      canvas.parentElement.style.height = 'auto';
+      changed = true;
+    }
+
+    return changed;
+  }
+
+  #syncHtmlCanvasAutoHeight(contentSize) {
+    if (this.#layoutMode !== 'width-constrained-auto-height') {
+      return false;
+    }
+    if (!this.#surfaceBinding || this.#surfaceBinding.type !== 'html-canvas') {
+      return false;
+    }
+
+    const nextHeight = Math.max(1, Number(contentSize?.height) || 1);
+    const adopted = this.#syncHtmlCanvasBindingSize(this.#logicalWidth, nextHeight, {
+      updateStyleWidth: true,
+      updateStyleHeight: true,
+      updateContainerWidth: true,
+      updateContainerHeight: true,
+    });
+
+    if (!adopted && this.#logicalHeight === nextHeight) {
+      return false;
+    }
+
+    this.#logicalHeight = nextHeight;
+    this.#syncRawViewSize(this.#logicalWidth, nextHeight);
+    return true;
+  }
+
+  #physicalWidth() {
+    return Math.max(1, Math.round(this.#logicalWidth * this.#scaleFactor));
+  }
+
+  #physicalHeight(height = this.#logicalHeight) {
+    return Math.max(1, Math.round((Number(height) || 1) * this.#scaleFactor));
+  }
+
+  #syncRawViewSize(width = this.#logicalWidth, height = this.#logicalHeight) {
+    if (typeof this.#rawView.resize !== 'function') {
+      return;
+    }
+    this.#rawView.resize(
+      Math.max(1, Math.round((Number(width) || 1) * this.#scaleFactor)),
+      Math.max(1, Math.round((Number(height) || 1) * this.#scaleFactor)),
+      this.#scaleFactor,
+    );
+  }
+
+  #currentContentSize() {
+    if (
+      typeof this.#rawView.currentContentWidth !== 'function' ||
+      typeof this.#rawView.currentContentHeight !== 'function'
+    ) {
+      return null;
+    }
+    const width = Number(this.#rawView.currentContentWidth());
+    const height = Number(this.#rawView.currentContentHeight());
+    if (!Number.isFinite(width) || !Number.isFinite(height) || width < 0 || height < 0) {
+      return null;
+    }
+    return { width, height };
+  }
+
+  #consumeContentSizeChanged() {
+    if (typeof this.#rawView.consumeContentSizeChanged !== 'function') {
+      return false;
+    }
+    if (!this.#rawView.consumeContentSizeChanged()) {
+      return false;
+    }
+
+    const contentSize = this.#currentContentSize();
+    if (!contentSize) {
+      return false;
+    }
+    this.#latestContentSize = contentSize;
+    this.#syncHtmlCanvasAutoHeight(contentSize);
+    if (typeof this.#onContentSizeChanged === 'function') {
+      this.#onContentSizeChanged(contentSize);
+    }
+    return true;
+  }
+
+  #presentSurface() {
+    if (!this.#surfaceBinding || this.#surfaceBinding.type !== 'offscreen-canvas') {
+      return;
+    }
+
+    const { backingCanvas, targetCanvas } = this.#surfaceBinding;
+    const context = targetCanvas.getContext('2d');
+    if (
+      !context ||
+      typeof context.clearRect !== 'function' ||
+      typeof context.drawImage !== 'function'
+    ) {
+      return;
+    }
+
+    if (typeof context.save === 'function') {
+      context.save();
+    }
+    if (typeof context.setTransform === 'function') {
+      context.setTransform(1, 0, 0, 1, 0, 0);
+    } else if (typeof context.resetTransform === 'function') {
+      context.resetTransform();
+    }
+    context.clearRect(0, 0, Number(targetCanvas.width) || 0, Number(targetCanvas.height) || 0);
+    context.drawImage(
+      backingCanvas,
+      0,
+      0,
+      Number(backingCanvas.width) || 0,
+      Number(backingCanvas.height) || 0,
+      0,
+      0,
+      Number(targetCanvas.width) || 0,
+      Number(targetCanvas.height) || 0,
+    );
+    if (typeof context.restore === 'function') {
+      context.restore();
+    }
   }
 
   #resetCloseRequestedState() {
@@ -435,16 +765,67 @@ export class InkView {
     return true;
   }
 
-  bindCanvas(canvas) {
-    if (!canvas || typeof canvas.getBoundingClientRect !== 'function') {
-      throw new TypeError('`canvas` must be an HTMLCanvasElement-like object.');
+  attachSurface(surface) {
+    const normalizedSurface = normalizeSurfaceDescriptor(surface);
+    if (!normalizedSurface) {
+      throw new TypeError('`surface` must be provided.');
     }
 
-    this.#rawView.bindCanvas(canvas);
-    this.#canvas = canvas;
+    if (normalizedSurface.type === 'html-canvas') {
+      this.#rawView.bindCanvas(normalizedSurface.canvas);
+      this.#surfaceBinding = {
+        type: 'html-canvas',
+        canvas: normalizedSurface.canvas,
+      };
+      this.#surface = normalizedSurface;
+      this.#canvas = normalizedSurface.canvas;
+      this.#syncRawViewSize();
+      if (this.#layoutMode === 'width-constrained-auto-height') {
+        this.#syncHtmlCanvasAutoHeight(this.#latestContentSize || { height: this.#logicalHeight });
+      }
+      return this;
+    }
+
+    const backingCanvas = createDomCanvas(this.#physicalWidth(), this.#physicalHeight());
+    this.#rawView.bindCanvas(backingCanvas);
+    this.#surfaceBinding = {
+      type: 'offscreen-canvas',
+      backingCanvas,
+      targetCanvas: normalizedSurface.canvas,
+    };
+    this.#surface = normalizedSurface;
+    this.#canvas = backingCanvas;
+    this.#syncRawViewSize();
+    this.#syncSurfaceBindingSize(this.#logicalWidth, this.#logicalHeight);
+    this.#presentSurface();
     return this;
   }
 
+  detachSurface(options = {}) {
+    if (!this.#surface && !this.#canvas) {
+      return this;
+    }
+
+    if (options.clear !== false) {
+      this.#clearSurfaceContents();
+    }
+    if (typeof this.#rawView.clearSurface === 'function') {
+      this.#rawView.clearSurface();
+    }
+    this.#surfaceBinding = null;
+    this.#surface = null;
+    this.#canvas = null;
+    return this;
+  }
+
+  getSurface() {
+    return cloneSurfaceDescriptor(this.#surface);
+  }
+
+  bindCanvas(canvas) {
+    return this.attachSurface({ type: 'html-canvas', canvas });
+  }
+
   bindDomEvents(options = {}) {
     const canvas = options.canvas || this.#canvas;
     if (!canvas) {
@@ -470,6 +851,16 @@ export class InkView {
       focusTarget.setAttribute('tabindex', '0');
     }
 
+    const scaleWheelDelta = (event) => {
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = rect.width > 0 ? canvas.width / rect.width : this.#scaleFactor;
+      const scaleY = rect.height > 0 ? canvas.height / rect.height : this.#scaleFactor;
+      return {
+        deltaX: (event.deltaX || 0) * scaleX,
+        deltaY: (event.deltaY || 0) * scaleY,
+      };
+    };
+
     addListener(canvas, 'pointerdown', (event) => {
       const { x, y } = getPointerPosition(canvas, event);
       this.notifyUserInteraction();
@@ -531,18 +922,11 @@ export class InkView {
       'wheel',
       (event) => {
         const { x, y } = getPointerPosition(canvas, event);
+        const { deltaX, deltaY } = scaleWheelDelta(event);
         if (options.preventWheelDefault !== false && typeof event.preventDefault === 'function') {
           event.preventDefault();
         }
-        this.#rawView.dispatchPointer(
-          'mousewheel',
-          x,
-          y,
-          0,
-          0,
-          event.deltaX || 0,
-          event.deltaY || 0,
-        );
+        this.#rawView.dispatchPointer('mousewheel', x, y, 0, 0, deltaX, deltaY);
         this.requestRender();
       },
       { passive: false },
@@ -640,7 +1024,67 @@ export class InkView {
   }
 
   resize(width, height, scaleFactor = getDefaultScaleFactor()) {
-    this.#rawView.resize(Number(width), Number(height), Number(scaleFactor));
+    const nextWidth = Math.max(1, Number(width) || 1);
+    const fallbackHeight =
+      this.#layoutMode === 'width-constrained-auto-height'
+        ? this.#logicalHeight
+        : this.#boundedHeight;
+    const nextHeight = Math.max(1, Number(height) || fallbackHeight || 1);
+    this.#logicalWidth = nextWidth;
+    this.#logicalHeight = nextHeight;
+    if (this.#layoutMode === 'bounded') {
+      this.#boundedHeight = nextHeight;
+    }
+    this.#scaleFactor = Number(scaleFactor || getDefaultScaleFactor());
+    this.#syncRawViewSize();
+    if (this.#surfaceBinding?.type === 'html-canvas') {
+      this.#syncHtmlCanvasBindingSize(this.#logicalWidth, this.#logicalHeight, {
+        updateStyleWidth: true,
+        updateStyleHeight: this.#layoutMode === 'width-constrained-auto-height',
+        updateContainerWidth: true,
+        updateContainerHeight: this.#layoutMode === 'width-constrained-auto-height',
+      });
+    } else {
+      this.#syncSurfaceBindingSize(this.#logicalWidth, this.#logicalHeight);
+    }
+    this.#presentSurface();
+    this.requestRender();
+    return this;
+  }
+
+  setLayoutMode(layoutMode) {
+    const nextLayoutMode = normalizeLayoutMode(layoutMode);
+    if (this.#layoutMode === nextLayoutMode) {
+      return this;
+    }
+
+    const currentContentSize = this.#currentContentSize();
+    this.#layoutMode = nextLayoutMode;
+    this.#latestContentSize = currentContentSize;
+    this.#rawView.setLayoutMode(nextLayoutMode);
+
+    if (nextLayoutMode === 'bounded') {
+      this.#logicalHeight = this.#boundedHeight;
+      this.#syncRawViewSize();
+      if (this.#surfaceBinding?.type === 'html-canvas') {
+        this.#syncHtmlCanvasBindingSize(this.#logicalWidth, this.#logicalHeight);
+      } else {
+        this.#syncSurfaceBindingSize(this.#logicalWidth, this.#logicalHeight);
+      }
+    } else if (currentContentSize) {
+      this.#syncHtmlCanvasAutoHeight(currentContentSize);
+    } else {
+      this.#syncRawViewSize();
+      if (this.#surfaceBinding?.type === 'html-canvas') {
+        this.#syncHtmlCanvasBindingSize(this.#logicalWidth, this.#logicalHeight, {
+          updateStyleWidth: true,
+          updateStyleHeight: true,
+          updateContainerWidth: true,
+          updateContainerHeight: true,
+        });
+      }
+    }
+
     this.requestRender();
     return this;
   }
@@ -669,6 +1113,29 @@ export class InkView {
     return this;
   }
 
+  setHostLanguageModelConfig(config) {
+    if (typeof this.#rawView.setLanguageModelConfig !== 'function') {
+      return this;
+    }
+    const normalizedConfig = normalizeHostLanguageModelConfig(config);
+    this.#rawView.setLanguageModelConfig(
+      normalizedConfig == null ? null : JSON.stringify(normalizedConfig),
+    );
+    return this;
+  }
+
+  dispatchPointer(eventType, x, y, id = 0, button = 0, deltaX = 0, deltaY = 0) {
+    this.#rawView.dispatchPointer(eventType, x, y, id, button, deltaX, deltaY);
+    this.requestRender();
+    return this;
+  }
+
+  dispatchInput(eventType, code, timestamp = Date.now()) {
+    this.#rawView.dispatchInput(eventType, code, Number(timestamp));
+    this.requestRender();
+    return this;
+  }
+
   dispatchMessageEvent(dataOrJson, origin = 'host', lastEventId = '') {
     const metadata = normalizeHostMessageMetadata(origin, lastEventId);
     this.#rawView.dispatchMessageEvent(
@@ -693,8 +1160,10 @@ export class InkView {
       return false;
     }
     const hasMoreWork = Boolean(this.#rawView.render());
+    const contentSizeChanged = this.#consumeContentSizeChanged();
+    this.#presentSurface();
     const closeRequested = this.#consumeCloseRequested();
-    if (!closeRequested && (hasMoreWork || this.#autoRender)) {
+    if (!closeRequested && (hasMoreWork || contentSizeChanged || this.#autoRender)) {
       this.requestRender();
     }
     return !closeRequested && hasMoreWork;
@@ -737,14 +1206,52 @@ export class InkView {
     return !this.#closeRequested && Boolean(this.#rawView.isRunning());
   }
 
+  isDestroyed() {
+    return this.#destroyed;
+  }
+
+  isRendering() {
+    return this.#autoRender;
+  }
+
   setOnCloseRequested(callback) {
+    if (callback != null && typeof callback !== 'function') {
+      throw new TypeError('`callback` must be a function or null.');
+    }
+    this.onCloseRequested = callback || null;
+    return this;
+  }
+
+  get onCloseRequested() {
+    return this.#onCloseRequested;
+  }
+
+  set onCloseRequested(callback) {
     if (callback != null && typeof callback !== 'function') {
       throw new TypeError('`callback` must be a function or null.');
     }
     this.#onCloseRequested = callback || null;
+  }
+
+  setOnContentSizeChanged(callback) {
+    if (callback != null && typeof callback !== 'function') {
+      throw new TypeError('`callback` must be a function or null.');
+    }
+    this.onContentSizeChanged = callback || null;
     return this;
   }
 
+  get onContentSizeChanged() {
+    return this.#onContentSizeChanged;
+  }
+
+  set onContentSizeChanged(callback) {
+    if (callback != null && typeof callback !== 'function') {
+      throw new TypeError('`callback` must be a function or null.');
+    }
+    this.#onContentSizeChanged = callback || null;
+  }
+
   isCloseRequested() {
     return this.#closeRequested;
   }
@@ -755,9 +1262,18 @@ export class InkView {
     }
     this.#destroyed = true;
     this.stopRendering();
+    if (this.#clearOnDestroy) {
+      this.#clearSurfaceContents();
+    }
     if (this.#domCleanup) {
       this.#domCleanup();
     }
+    if (typeof this.#rawView.clearSurface === 'function') {
+      this.#rawView.clearSurface();
+    }
+    this.#surfaceBinding = null;
+    this.#surface = null;
+    this.#canvas = null;
     this.#rawView.destroy();
   }
 }

package/package.json

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

package/pkg/ink_web.d.ts

@@ -14,8 +14,12 @@ export class InkWebView {
     [Symbol.dispose](): void;
     bindCanvas(canvas: HTMLCanvasElement): void;
     blur(): void;
+    clearSurface(): void;
     consumeCloseRequested(): boolean;
+    consumeContentSizeChanged(): boolean;
     createMessageStream(origin: string, last_event_id: string): InkWebMessageStream;
+    currentContentHeight(): number;
+    currentContentWidth(): number;
     destroy(): void;
     dispatchInput(event_type: string, code: string, timestamp: number): void;
     dispatchMessageEvent(payload_json: string, origin: string, last_event_id: string): void;
@@ -23,13 +27,15 @@ export class InkWebView {
     focus(): void;
     isInteractive(): boolean;
     isRunning(): boolean;
-    constructor(width: number, height: number, scale_factor: number);
+    constructor(width: number, height: number, scale_factor: number, layout_mode: string);
     notifyUserInteraction(): void;
     open(path: string, initial_page?: string | null, query_json?: string | null): void;
     openBundle(app_id: string, files: Map<any, any>, initial_page?: string | null, query_json?: string | null): void;
     render(): boolean;
     resize(width: number, height: number, scale_factor: number): void;
     setInteractive(interactive: boolean): void;
+    setLanguageModelConfig(config_json?: string | null): void;
+    setLayoutMode(layout_mode: string): void;
 }
 
 export function get_version(): string;
@@ -47,8 +53,12 @@ export interface InitOutput {
     readonly inkwebmessagestream_write: (a: number, b: number, c: number, d: number) => void;
     readonly inkwebview_bindCanvas: (a: number, b: number, c: number) => void;
     readonly inkwebview_blur: (a: number) => void;
+    readonly inkwebview_clearSurface: (a: number) => void;
     readonly inkwebview_consumeCloseRequested: (a: number) => number;
+    readonly inkwebview_consumeContentSizeChanged: (a: number) => number;
     readonly inkwebview_createMessageStream: (a: number, b: number, c: number, d: number, e: number) => number;
+    readonly inkwebview_currentContentHeight: (a: number) => number;
+    readonly inkwebview_currentContentWidth: (a: number) => number;
     readonly inkwebview_destroy: (a: number) => void;
     readonly inkwebview_dispatchInput: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
     readonly inkwebview_dispatchMessageEvent: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
@@ -56,19 +66,21 @@ export interface InitOutput {
     readonly inkwebview_focus: (a: number) => void;
     readonly inkwebview_isInteractive: (a: number) => number;
     readonly inkwebview_isRunning: (a: number) => number;
-    readonly inkwebview_new: (a: number, b: number, c: number) => number;
+    readonly inkwebview_new: (a: number, b: number, c: number, d: number, e: number) => number;
     readonly inkwebview_notifyUserInteraction: (a: number) => void;
     readonly inkwebview_open: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
     readonly inkwebview_openBundle: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number) => void;
     readonly inkwebview_render: (a: number, b: number) => void;
     readonly inkwebview_resize: (a: number, b: number, c: number, d: number) => void;
     readonly inkwebview_setInteractive: (a: number, b: number) => void;
+    readonly inkwebview_setLanguageModelConfig: (a: number, b: number, c: number, d: number) => void;
+    readonly inkwebview_setLayoutMode: (a: number, b: number, c: number) => void;
     readonly main: () => void;
-    readonly __wasm_bindgen_func_elem_9308: (a: number, b: number) => void;
-    readonly __wasm_bindgen_func_elem_13493: (a: number, b: number) => void;
-    readonly __wasm_bindgen_func_elem_9474: (a: number, b: number, c: number) => void;
-    readonly __wasm_bindgen_func_elem_13494: (a: number, b: number, c: number) => void;
-    readonly __wasm_bindgen_func_elem_9475: (a: number, b: number) => void;
+    readonly __wasm_bindgen_func_elem_9470: (a: number, b: number) => void;
+    readonly __wasm_bindgen_func_elem_13736: (a: number, b: number) => void;
+    readonly __wasm_bindgen_func_elem_9754: (a: number, b: number, c: number) => void;
+    readonly __wasm_bindgen_func_elem_13737: (a: number, b: number, c: number) => void;
+    readonly __wasm_bindgen_func_elem_9755: (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;
     readonly __wbindgen_export3: (a: number) => void;

package/pkg/ink_web.js

@@ -72,6 +72,9 @@ export class InkWebView {
     blur() {
         wasm.inkwebview_blur(this.__wbg_ptr);
     }
+    clearSurface() {
+        wasm.inkwebview_clearSurface(this.__wbg_ptr);
+    }
     /**
      * @returns {boolean}
      */
@@ -79,6 +82,13 @@ export class InkWebView {
         const ret = wasm.inkwebview_consumeCloseRequested(this.__wbg_ptr);
         return ret !== 0;
     }
+    /**
+     * @returns {boolean}
+     */
+    consumeContentSizeChanged() {
+        const ret = wasm.inkwebview_consumeContentSizeChanged(this.__wbg_ptr);
+        return ret !== 0;
+    }
     /**
      * @param {string} origin
      * @param {string} last_event_id
@@ -92,6 +102,20 @@ export class InkWebView {
         const ret = wasm.inkwebview_createMessageStream(this.__wbg_ptr, ptr0, len0, ptr1, len1);
         return InkWebMessageStream.__wrap(ret);
     }
+    /**
+     * @returns {number}
+     */
+    currentContentHeight() {
+        const ret = wasm.inkwebview_currentContentHeight(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * @returns {number}
+     */
+    currentContentWidth() {
+        const ret = wasm.inkwebview_currentContentWidth(this.__wbg_ptr);
+        return ret;
+    }
     destroy() {
         wasm.inkwebview_destroy(this.__wbg_ptr);
     }
@@ -186,9 +210,12 @@ export class InkWebView {
      * @param {number} width
      * @param {number} height
      * @param {number} scale_factor
+     * @param {string} layout_mode
      */
-    constructor(width, height, scale_factor) {
-        const ret = wasm.inkwebview_new(width, height, scale_factor);
+    constructor(width, height, scale_factor, layout_mode) {
+        const ptr0 = passStringToWasm0(layout_mode, wasm.__wbindgen_export, wasm.__wbindgen_export2);
+        const len0 = WASM_VECTOR_LEN;
+        const ret = wasm.inkwebview_new(width, height, scale_factor, ptr0, len0);
         this.__wbg_ptr = ret >>> 0;
         InkWebViewFinalization.register(this, this.__wbg_ptr, this);
         return this;
@@ -277,6 +304,32 @@ export class InkWebView {
     setInteractive(interactive) {
         wasm.inkwebview_setInteractive(this.__wbg_ptr, interactive);
     }
+    /**
+     * @param {string | null} [config_json]
+     */
+    setLanguageModelConfig(config_json) {
+        try {
+            const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+            var ptr0 = isLikeNone(config_json) ? 0 : passStringToWasm0(config_json, wasm.__wbindgen_export, wasm.__wbindgen_export2);
+            var len0 = WASM_VECTOR_LEN;
+            wasm.inkwebview_setLanguageModelConfig(retptr, this.__wbg_ptr, ptr0, len0);
+            var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
+            var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
+            if (r1) {
+                throw takeObject(r0);
+            }
+        } finally {
+            wasm.__wbindgen_add_to_stack_pointer(16);
+        }
+    }
+    /**
+     * @param {string} layout_mode
+     */
+    setLayoutMode(layout_mode) {
+        const ptr0 = passStringToWasm0(layout_mode, wasm.__wbindgen_export, wasm.__wbindgen_export2);
+        const len0 = WASM_VECTOR_LEN;
+        wasm.inkwebview_setLayoutMode(this.__wbg_ptr, ptr0, len0);
+    }
 }
 if (Symbol.dispose) InkWebView.prototype[Symbol.dispose] = InkWebView.prototype.free;
 
@@ -1094,28 +1147,28 @@ function __wbg_get_imports() {
             return ret;
         },
         __wbindgen_cast_0000000000000001: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { dtor_idx: 2519, function: Function { arguments: [NamedExternref("CloseEvent")], shim_idx: 2472, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, wasm.__wasm_bindgen_func_elem_9308, __wasm_bindgen_func_elem_9474);
+            // Cast intrinsic for `Closure(Closure { dtor_idx: 2522, function: Function { arguments: [NamedExternref("CloseEvent")], shim_idx: 2523, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, wasm.__wasm_bindgen_func_elem_9470, __wasm_bindgen_func_elem_9754);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000002: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { dtor_idx: 2519, function: Function { arguments: [NamedExternref("Event")], shim_idx: 2472, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, wasm.__wasm_bindgen_func_elem_9308, __wasm_bindgen_func_elem_9474);
+            // Cast intrinsic for `Closure(Closure { dtor_idx: 2522, function: Function { arguments: [NamedExternref("Event")], shim_idx: 2523, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, wasm.__wasm_bindgen_func_elem_9470, __wasm_bindgen_func_elem_9754);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000003: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { dtor_idx: 2519, function: Function { arguments: [NamedExternref("MessageEvent")], shim_idx: 2472, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, wasm.__wasm_bindgen_func_elem_9308, __wasm_bindgen_func_elem_9474);
+            // Cast intrinsic for `Closure(Closure { dtor_idx: 2522, function: Function { arguments: [NamedExternref("MessageEvent")], shim_idx: 2523, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, wasm.__wasm_bindgen_func_elem_9470, __wasm_bindgen_func_elem_9754);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000004: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { dtor_idx: 2519, function: Function { arguments: [], shim_idx: 2521, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, wasm.__wasm_bindgen_func_elem_9308, __wasm_bindgen_func_elem_9475);
+            // Cast intrinsic for `Closure(Closure { dtor_idx: 2522, function: Function { arguments: [], shim_idx: 2527, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, wasm.__wasm_bindgen_func_elem_9470, __wasm_bindgen_func_elem_9755);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000005: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { dtor_idx: 3419, function: Function { arguments: [Externref], shim_idx: 3420, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, wasm.__wasm_bindgen_func_elem_13493, __wasm_bindgen_func_elem_13494);
+            // Cast intrinsic for `Closure(Closure { dtor_idx: 3491, function: Function { arguments: [Externref], shim_idx: 3492, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, wasm.__wasm_bindgen_func_elem_13736, __wasm_bindgen_func_elem_13737);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000006: function(arg0) {
@@ -1172,16 +1225,16 @@ function __wbg_get_imports() {
     };
 }
 
-function __wasm_bindgen_func_elem_9475(arg0, arg1) {
-    wasm.__wasm_bindgen_func_elem_9475(arg0, arg1);
+function __wasm_bindgen_func_elem_9755(arg0, arg1) {
+    wasm.__wasm_bindgen_func_elem_9755(arg0, arg1);
 }
 
-function __wasm_bindgen_func_elem_9474(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_9474(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_9754(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_9754(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_13494(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_13494(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_13737(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_13737(arg0, arg1, addHeapObject(arg2));
 }
 
 

package/pkg/ink_web_bg.wasm.d.ts

@@ -8,8 +8,12 @@ export const inkwebmessagestream_close: (a: number) => void;
 export const inkwebmessagestream_write: (a: number, b: number, c: number, d: number) => void;
 export const inkwebview_bindCanvas: (a: number, b: number, c: number) => void;
 export const inkwebview_blur: (a: number) => void;
+export const inkwebview_clearSurface: (a: number) => void;
 export const inkwebview_consumeCloseRequested: (a: number) => number;
+export const inkwebview_consumeContentSizeChanged: (a: number) => number;
 export const inkwebview_createMessageStream: (a: number, b: number, c: number, d: number, e: number) => number;
+export const inkwebview_currentContentHeight: (a: number) => number;
+export const inkwebview_currentContentWidth: (a: number) => number;
 export const inkwebview_destroy: (a: number) => void;
 export const inkwebview_dispatchInput: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
 export const inkwebview_dispatchMessageEvent: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
@@ -17,19 +21,21 @@ export const inkwebview_dispatchPointer: (a: number, b: number, c: number, d: nu
 export const inkwebview_focus: (a: number) => void;
 export const inkwebview_isInteractive: (a: number) => number;
 export const inkwebview_isRunning: (a: number) => number;
-export const inkwebview_new: (a: number, b: number, c: number) => number;
+export const inkwebview_new: (a: number, b: number, c: number, d: number, e: number) => number;
 export const inkwebview_notifyUserInteraction: (a: number) => void;
 export const inkwebview_open: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
 export const inkwebview_openBundle: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number) => void;
 export const inkwebview_render: (a: number, b: number) => void;
 export const inkwebview_resize: (a: number, b: number, c: number, d: number) => void;
 export const inkwebview_setInteractive: (a: number, b: number) => void;
+export const inkwebview_setLanguageModelConfig: (a: number, b: number, c: number, d: number) => void;
+export const inkwebview_setLayoutMode: (a: number, b: number, c: number) => void;
 export const main: () => void;
-export const __wasm_bindgen_func_elem_9308: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_13493: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_9474: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_13494: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_9475: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_9470: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_13736: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_9754: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_13737: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_9755: (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;
 export const __wbindgen_export3: (a: number) => void;