@effindomv2/runtime 0.1.0

package/src/bridge/find-session.ts

@@ -0,0 +1,158 @@
+import type {
+  OpenCanvasFindMatch,
+  OpenCanvasFindOptions,
+  OpenCanvasFindResults,
+  OpenCanvasResolvedFindOptions,
+  OpenCanvasTextDocument,
+} from '../core-types';
+
+const combiningMarkPattern = /\p{Mark}+/gu;
+const wordLikeCharPattern = /[\p{Letter}\p{Number}\p{Mark}_]/u;
+const textEncoder = new TextEncoder();
+
+interface SearchToken {
+  readonly start: number;
+  readonly end: number;
+}
+
+interface SearchText {
+  readonly text: string;
+  readonly tokens: readonly SearchToken[];
+}
+
+export const DEFAULT_OPEN_CANVAS_FIND_OPTIONS: OpenCanvasResolvedFindOptions = {
+  highlightAll: false,
+  matchCase: false,
+  matchDiacritics: false,
+  wholeWords: false,
+};
+
+export function normalizeOpenCanvasFindOptions(
+  options?: OpenCanvasFindOptions,
+): OpenCanvasResolvedFindOptions {
+  return {
+    highlightAll: options?.highlightAll ?? DEFAULT_OPEN_CANVAS_FIND_OPTIONS.highlightAll,
+    matchCase: options?.matchCase ?? DEFAULT_OPEN_CANVAS_FIND_OPTIONS.matchCase,
+    matchDiacritics: options?.matchDiacritics ?? DEFAULT_OPEN_CANVAS_FIND_OPTIONS.matchDiacritics,
+    wholeWords: options?.wholeWords ?? DEFAULT_OPEN_CANVAS_FIND_OPTIONS.wholeWords,
+  };
+}
+
+function utf8ByteOffsetFromCodeUnitIndex(text: string, codeUnitIndex: number): number {
+  const clampedIndex = Math.max(0, Math.min(codeUnitIndex, text.length));
+  return textEncoder.encode(text.slice(0, clampedIndex)).byteLength;
+}
+
+function codePointBefore(text: string, boundary: number): string | null {
+  if (boundary <= 0) {
+    return null;
+  }
+  let start = boundary - 1;
+  const low = text.charCodeAt(start);
+  if (
+    start > 0 &&
+    low >= 0xDC00 &&
+    low <= 0xDFFF
+  ) {
+    const high = text.charCodeAt(start - 1);
+    if (high >= 0xD800 && high <= 0xDBFF) {
+      start -= 1;
+    }
+  }
+  return text.slice(start, boundary);
+}
+
+function codePointAt(text: string, boundary: number): string | null {
+  const codePoint = text.codePointAt(boundary);
+  return codePoint === undefined ? null : String.fromCodePoint(codePoint);
+}
+
+function isWordLikeChar(value: string | null): boolean {
+  return value !== null && wordLikeCharPattern.test(value);
+}
+
+function isWholeWordMatch(text: string, start: number, end: number): boolean {
+  return !isWordLikeChar(codePointBefore(text, start)) &&
+    !isWordLikeChar(codePointAt(text, end));
+}
+
+function buildSearchText(
+  source: string,
+  options: OpenCanvasResolvedFindOptions,
+): SearchText {
+  const tokens: SearchToken[] = [];
+  let output = '';
+  let sourceIndex = 0;
+  for (const segment of source) {
+    const start = sourceIndex;
+    sourceIndex += segment.length;
+    const end = sourceIndex;
+    let searchable = options.matchDiacritics
+      ? segment
+      : segment.normalize('NFD').replace(combiningMarkPattern, '');
+    searchable = options.matchCase ? searchable : searchable.toLocaleLowerCase();
+    output += searchable;
+    for (let index = 0; index < searchable.length; index += 1) {
+      tokens.push({ start, end });
+    }
+  }
+  return { text: output, tokens };
+}
+
+export function findTextInOpenCanvasDocuments(
+  documents: readonly OpenCanvasTextDocument[],
+  query: string,
+  options?: OpenCanvasFindOptions,
+): OpenCanvasFindResults {
+  const resolvedOptions = normalizeOpenCanvasFindOptions(options);
+  if (query.length === 0) {
+    return {
+      query,
+      options: resolvedOptions,
+      matches: [],
+    };
+  }
+
+  const normalizedQuery = buildSearchText(query, resolvedOptions).text;
+  if (normalizedQuery.length === 0) {
+    return {
+      query,
+      options: resolvedOptions,
+      matches: [],
+    };
+  }
+
+  const matches: OpenCanvasFindMatch[] = [];
+  for (const document of documents) {
+    const searchableDocument = buildSearchText(document.text, resolvedOptions);
+    let searchStart = 0;
+    while (searchStart <= searchableDocument.text.length - normalizedQuery.length) {
+      const matchStart = searchableDocument.text.indexOf(normalizedQuery, searchStart);
+      if (matchStart < 0) {
+        break;
+      }
+      const matchEnd = matchStart + normalizedQuery.length;
+      const startToken = searchableDocument.tokens[matchStart];
+      const endToken = searchableDocument.tokens[matchEnd - 1];
+      if (startToken === undefined || endToken === undefined) {
+        break;
+      }
+      const sourceStart = startToken.start;
+      const sourceEnd = endToken.end;
+      if (!resolvedOptions.wholeWords || isWholeWordMatch(document.text, sourceStart, sourceEnd)) {
+        matches.push({
+          handle: document.handle,
+          start: utf8ByteOffsetFromCodeUnitIndex(document.text, sourceStart),
+          end: utf8ByteOffsetFromCodeUnitIndex(document.text, sourceEnd),
+        });
+      }
+      searchStart = matchStart + Math.max(normalizedQuery.length, 1);
+    }
+  }
+
+  return {
+    query,
+    options: resolvedOptions,
+    matches,
+  };
+}

package/src/bridge/font-catalog.ts

@@ -0,0 +1,51 @@
+export interface BridgeFontDefinition {
+  readonly id: number;
+  readonly assetFile: string;
+  readonly fallbackIds: readonly number[];
+  readonly preload: boolean;
+}
+
+export const BUILT_IN_FONT_BODY = 1;
+export const BUILT_IN_FONT_HEADING = 2;
+export const BUILT_IN_FONT_SYMBOLS = 3;
+export const BUILT_IN_FONT_EMOJI = 4;
+export const BUILT_IN_FONT_MONO = 5;
+export const BUILT_IN_FONT_MONO_BOLD = 6;
+export const BUILT_IN_FONT_BODY_ITALIC = 9;
+export const BUILT_IN_FONT_BODY_BOLD_ITALIC = 10;
+
+const BUILT_IN_BRIDGE_FONTS: readonly BridgeFontDefinition[] = [
+  { id: BUILT_IN_FONT_BODY, assetFile: 'NotoSans-Regular.ttf', fallbackIds: [BUILT_IN_FONT_EMOJI, BUILT_IN_FONT_SYMBOLS], preload: true },
+  { id: BUILT_IN_FONT_HEADING, assetFile: 'NotoSans-Bold.ttf', fallbackIds: [BUILT_IN_FONT_EMOJI, BUILT_IN_FONT_SYMBOLS], preload: true },
+  { id: BUILT_IN_FONT_BODY_ITALIC, assetFile: 'NotoSans-Italic.ttf', fallbackIds: [BUILT_IN_FONT_EMOJI, BUILT_IN_FONT_SYMBOLS], preload: true },
+  { id: BUILT_IN_FONT_BODY_BOLD_ITALIC, assetFile: 'NotoSans-BoldItalic.ttf', fallbackIds: [BUILT_IN_FONT_EMOJI, BUILT_IN_FONT_SYMBOLS], preload: true },
+  { id: BUILT_IN_FONT_SYMBOLS, assetFile: 'NotoSansSymbols2-Regular.ttf', fallbackIds: [], preload: true },
+  { id: BUILT_IN_FONT_EMOJI, assetFile: 'NotoEmoji-Regular.ttf', fallbackIds: [], preload: true },
+  { id: BUILT_IN_FONT_MONO, assetFile: 'NotoSansMono-Regular.ttf', fallbackIds: [BUILT_IN_FONT_EMOJI, BUILT_IN_FONT_SYMBOLS], preload: false },
+  { id: BUILT_IN_FONT_MONO_BOLD, assetFile: 'NotoSansMono-Bold.ttf', fallbackIds: [BUILT_IN_FONT_EMOJI, BUILT_IN_FONT_SYMBOLS], preload: false },
+];
+
+export const STARTUP_BRIDGE_FONTS: readonly BridgeFontDefinition[] = BUILT_IN_BRIDGE_FONTS.filter((font) => font.preload);
+
+export function getBuiltInBridgeFont(fontId: number): BridgeFontDefinition | undefined {
+  return BUILT_IN_BRIDGE_FONTS.find((font) => font.id === fontId);
+}
+
+export function getBridgeAssetBaseUrl(): string {
+  const runtimeConfig = window as Window & {
+    __effindomRuntime?: { manifestUrl?: string };
+  };
+  const manifestUrl = runtimeConfig.__effindomRuntime?.manifestUrl;
+  if (typeof manifestUrl === 'string' && manifestUrl.length > 0) {
+    return new URL('./', new URL(manifestUrl, document.baseURI)).toString();
+  }
+  const currentScript = document.currentScript;
+  if (currentScript instanceof HTMLScriptElement && currentScript.src.length > 0) {
+    return new URL('./', currentScript.src).toString();
+  }
+  return new URL('./', document.baseURI).toString();
+}
+
+export function getBridgeAssetUrl(assetFile: string): string {
+  return new URL(`../fonts/${assetFile}`, getBridgeAssetBaseUrl()).toString();
+}

package/src/bridge/google-fonts.ts

@@ -0,0 +1,63 @@
+export interface GoogleFontShardBytes {
+  readonly url: string;
+  readonly bytes: Uint8Array;
+}
+
+const GOOGLE_FONTS_STYLESHEET_ORIGIN = 'https://fonts.googleapis.com';
+const GOOGLE_FONTS_BINARY_ORIGIN = 'https://fonts.gstatic.com';
+
+function ensureLinkTag(rel: string, href: string, crossOrigin?: '' | 'anonymous'): void {
+  const existing = document.head.querySelector(`link[rel="${rel}"][href="${href}"]`);
+  if (existing instanceof HTMLLinkElement) {
+    return;
+  }
+  const link = document.createElement('link');
+  link.rel = rel;
+  link.href = href;
+  if (crossOrigin !== undefined) {
+    link.crossOrigin = crossOrigin;
+  }
+  document.head.appendChild(link);
+}
+
+export function ensureGoogleFontShardPreconnect(): void {
+  ensureLinkTag('preconnect', GOOGLE_FONTS_STYLESHEET_ORIGIN);
+  ensureLinkTag('preconnect', GOOGLE_FONTS_BINARY_ORIGIN, 'anonymous');
+}
+
+export function buildGoogleFontStylesheetUrl(googleFamily: string, text: string): string {
+  const params = new URLSearchParams();
+  params.set('family', `${googleFamily}:wght@400`);
+  params.set('text', text);
+  params.set('display', 'swap');
+  return `${GOOGLE_FONTS_STYLESHEET_ORIGIN}/css2?${params.toString()}`;
+}
+
+export function parseGoogleFontBinaryUrl(stylesheetText: string): string {
+  const match = /src:\s*url\(([^)]+)\)\s*format\((['"]?)(woff2|woff|truetype|opentype)\2\)/.exec(stylesheetText);
+  if (match?.[1] === undefined) {
+    throw new Error('Google Fonts stylesheet did not expose a usable shard URL.');
+  }
+  return match[1].trim();
+}
+
+export async function fetchGoogleFontShardBytes(
+  googleFamily: string,
+  text: string,
+): Promise<GoogleFontShardBytes> {
+  ensureGoogleFontShardPreconnect();
+  const stylesheetUrl = buildGoogleFontStylesheetUrl(googleFamily, text);
+  const stylesheetResponse = await fetch(stylesheetUrl, { mode: 'cors' });
+  if (!stylesheetResponse.ok) {
+    throw new Error(`Failed to fetch Google Fonts stylesheet ${stylesheetUrl}: ${String(stylesheetResponse.status)}`);
+  }
+  const binaryUrl = parseGoogleFontBinaryUrl(await stylesheetResponse.text());
+  const binaryResponse = await fetch(binaryUrl);
+  if (!binaryResponse.ok) {
+    throw new Error(`Failed to fetch font ${binaryUrl}: ${String(binaryResponse.status)}`);
+  }
+  return {
+    url: binaryUrl,
+    bytes: new Uint8Array(await binaryResponse.arrayBuffer()),
+  };
+}

package/src/bridge/incremental-font-packages.ts

@@ -0,0 +1,216 @@
+import {
+  BUILT_IN_FONT_BODY,
+  BUILT_IN_FONT_BODY_BOLD_ITALIC,
+  BUILT_IN_FONT_BODY_ITALIC,
+  BUILT_IN_FONT_HEADING,
+  BUILT_IN_FONT_MONO,
+  BUILT_IN_FONT_MONO_BOLD,
+} from './font-catalog';
+
+export const UI_MISSING_FONT_COVERAGE_UNKNOWN = 0;
+export const UI_MISSING_FONT_COVERAGE_ARABIC = 1;
+export const UI_MISSING_FONT_COVERAGE_THAI = 2;
+export const UI_MISSING_FONT_COVERAGE_CJK = 3;
+export const UI_MISSING_FONT_COVERAGE_SUPPLEMENTAL = 4;
+
+export interface ResolvedIncrementalFontShardRequest {
+  readonly packageId: string;
+  readonly coverageKind: number;
+  readonly familyKey: string;
+  readonly googleFamily: string;
+  readonly text: string;
+}
+
+const AUTO_EXTENDABLE_PRIMARY_FONT_IDS = new Set<number>([
+  BUILT_IN_FONT_BODY,
+  BUILT_IN_FONT_HEADING,
+  BUILT_IN_FONT_BODY_ITALIC,
+  BUILT_IN_FONT_BODY_BOLD_ITALIC,
+  BUILT_IN_FONT_MONO,
+  BUILT_IN_FONT_MONO_BOLD,
+]);
+
+interface SupplementalFamilyDefinition {
+  readonly familyKey: string;
+  readonly googleFamily: string;
+  readonly ranges: readonly [number, number][];
+}
+
+const SUPPLEMENTAL_FAMILIES: readonly SupplementalFamilyDefinition[] = [
+  { familyKey: 'hebrew', googleFamily: 'Noto Sans Hebrew', ranges: [[0x0590, 0x05FF]] },
+  { familyKey: 'armenian', googleFamily: 'Noto Sans Armenian', ranges: [[0x0530, 0x058F]] },
+  { familyKey: 'georgian', googleFamily: 'Noto Sans Georgian', ranges: [[0x10A0, 0x10FF], [0x2D00, 0x2D2F]] },
+  { familyKey: 'devanagari', googleFamily: 'Noto Sans Devanagari', ranges: [[0x0900, 0x097F]] },
+  { familyKey: 'bengali', googleFamily: 'Noto Sans Bengali', ranges: [[0x0980, 0x09FF]] },
+  { familyKey: 'gurmukhi', googleFamily: 'Noto Sans Gurmukhi', ranges: [[0x0A00, 0x0A7F]] },
+  { familyKey: 'gujarati', googleFamily: 'Noto Sans Gujarati', ranges: [[0x0A80, 0x0AFF]] },
+  { familyKey: 'oriya', googleFamily: 'Noto Sans Oriya', ranges: [[0x0B00, 0x0B7F]] },
+  { familyKey: 'tamil', googleFamily: 'Noto Sans Tamil', ranges: [[0x0B80, 0x0BFF]] },
+  { familyKey: 'telugu', googleFamily: 'Noto Sans Telugu', ranges: [[0x0C00, 0x0C7F]] },
+  { familyKey: 'kannada', googleFamily: 'Noto Sans Kannada', ranges: [[0x0C80, 0x0CFF]] },
+  { familyKey: 'malayalam', googleFamily: 'Noto Sans Malayalam', ranges: [[0x0D00, 0x0D7F]] },
+  { familyKey: 'sinhala', googleFamily: 'Noto Sans Sinhala', ranges: [[0x0D80, 0x0DFF]] },
+  { familyKey: 'lao', googleFamily: 'Noto Sans Lao', ranges: [[0x0E80, 0x0EFF]] },
+  { familyKey: 'myanmar', googleFamily: 'Noto Sans Myanmar', ranges: [[0x1000, 0x109F]] },
+  { familyKey: 'khmer', googleFamily: 'Noto Sans Khmer', ranges: [[0x1780, 0x17FF]] },
+  { familyKey: 'ethiopic', googleFamily: 'Noto Sans Ethiopic', ranges: [[0x1200, 0x137F], [0x1380, 0x139F], [0x2D80, 0x2DDF]] },
+] as const;
+
+function inRanges(codePoint: number, ranges: readonly [number, number][]): boolean {
+  return ranges.some(([start, end]) => codePoint >= start && codePoint <= end);
+}
+
+function uniqueCodePoints(text: string): readonly string[] {
+  const seen = new Set<string>();
+  const ordered: string[] = [];
+  for (const character of text) {
+    if (seen.has(character)) {
+      continue;
+    }
+    seen.add(character);
+    ordered.push(character);
+  }
+  return ordered;
+}
+
+function isCjkPunctuation(codePoint: number): boolean {
+  return (codePoint >= 0x3000 && codePoint <= 0x303F)
+    || (codePoint >= 0xFF01 && codePoint <= 0xFF0F)
+    || (codePoint >= 0xFF1A && codePoint <= 0xFF20)
+    || (codePoint >= 0xFF3B && codePoint <= 0xFF40)
+    || (codePoint >= 0xFF5B && codePoint <= 0xFF65);
+}
+
+function buildShardRequest(
+  packageId: string,
+  coverageKind: number,
+  familyKey: string,
+  googleFamily: string,
+  characters: readonly string[],
+): ResolvedIncrementalFontShardRequest | null {
+  if (characters.length === 0) {
+    return null;
+  }
+  const text = characters.join('');
+  return {
+    packageId,
+    coverageKind,
+    familyKey,
+    googleFamily,
+    text,
+  };
+}
+
+function resolveCjkRequests(sampleText: string): readonly ResolvedIncrementalFontShardRequest[] {
+  const codePoints = uniqueCodePoints(sampleText);
+  const kana: string[] = [];
+  const hangul: string[] = [];
+  const han: string[] = [];
+  const punctuation: string[] = [];
+  for (const character of codePoints) {
+    const codePoint = character.codePointAt(0);
+    if (codePoint === undefined) {
+      continue;
+    }
+    if (isCjkPunctuation(codePoint)) {
+      punctuation.push(character);
+      continue;
+    }
+    if ((codePoint >= 0x3040 && codePoint <= 0x30FF) || (codePoint >= 0x31F0 && codePoint <= 0x31FF)) {
+      kana.push(character);
+      continue;
+    }
+    if (codePoint >= 0xAC00 && codePoint <= 0xD7AF) {
+      hangul.push(character);
+      continue;
+    }
+    if (
+      (codePoint >= 0x3400 && codePoint <= 0x4DBF)
+      || (codePoint >= 0x4E00 && codePoint <= 0x9FFF)
+      || (codePoint >= 0xF900 && codePoint <= 0xFAFF)
+    ) {
+      han.push(character);
+    }
+  }
+
+  const requests: ResolvedIncrementalFontShardRequest[] = [];
+  if (kana.length > 0) {
+    requests.push(
+      buildShardRequest('cjk-sans', UI_MISSING_FONT_COVERAGE_CJK, 'cjk-jp', 'Noto Sans JP', [...kana, ...han, ...punctuation])!,
+    );
+  }
+  if (hangul.length > 0) {
+    requests.push(
+      buildShardRequest('cjk-sans', UI_MISSING_FONT_COVERAGE_CJK, 'cjk-kr', 'Noto Sans KR', [...hangul, ...(kana.length === 0 ? han : []), ...punctuation])!,
+    );
+  }
+  if (han.length > 0 && kana.length === 0 && hangul.length === 0) {
+    requests.push(
+      buildShardRequest('cjk-sans', UI_MISSING_FONT_COVERAGE_CJK, 'cjk-sc', 'Noto Sans SC', [...han, ...punctuation])!,
+    );
+  }
+  if (requests.length === 0 && punctuation.length > 0) {
+    requests.push(
+      buildShardRequest('cjk-sans', UI_MISSING_FONT_COVERAGE_CJK, 'cjk-sc', 'Noto Sans SC', punctuation)!,
+    );
+  }
+  return requests;
+}
+
+function resolveSupplementalRequests(sampleText: string): readonly ResolvedIncrementalFontShardRequest[] {
+  const codePoints = uniqueCodePoints(sampleText);
+  const textByFamily = new Map<string, string[]>();
+  for (const character of codePoints) {
+    const codePoint = character.codePointAt(0);
+    if (codePoint === undefined) {
+      continue;
+    }
+    const family = SUPPLEMENTAL_FAMILIES.find((entry) => inRanges(codePoint, entry.ranges));
+    if (family === undefined) {
+      continue;
+    }
+    const current = textByFamily.get(family.familyKey) ?? [];
+    current.push(character);
+    textByFamily.set(family.familyKey, current);
+  }
+  return SUPPLEMENTAL_FAMILIES
+    .map((family) => buildShardRequest(
+      'supplemental-sans',
+      UI_MISSING_FONT_COVERAGE_SUPPLEMENTAL,
+      family.familyKey,
+      family.googleFamily,
+      textByFamily.get(family.familyKey) ?? [],
+    ))
+    .filter((request): request is ResolvedIncrementalFontShardRequest => request !== null);
+}
+
+export function resolveIncrementalFontPackageRequests(
+  primaryFontId: number,
+  coverageKind: number,
+  sampleText: string,
+): readonly ResolvedIncrementalFontShardRequest[] {
+  if (!AUTO_EXTENDABLE_PRIMARY_FONT_IDS.has(primaryFontId) || sampleText.length === 0) {
+    return [];
+  }
+  const uniqueText = uniqueCodePoints(sampleText).join('');
+  if (uniqueText.length === 0) {
+    return [];
+  }
+  if (coverageKind === UI_MISSING_FONT_COVERAGE_ARABIC) {
+    return [
+      buildShardRequest('arabic-sans', coverageKind, 'arabic-core', 'Noto Naskh Arabic', Array.from(uniqueText))!,
+    ];
+  }
+  if (coverageKind === UI_MISSING_FONT_COVERAGE_THAI) {
+    return [
+      buildShardRequest('thai-sans', coverageKind, 'thai-core', 'Noto Sans Thai', Array.from(uniqueText))!,
+    ];
+  }
+  if (coverageKind === UI_MISSING_FONT_COVERAGE_CJK) {
+    return resolveCjkRequests(uniqueText);
+  }
+  if (coverageKind === UI_MISSING_FONT_COVERAGE_SUPPLEMENTAL) {
+    return resolveSupplementalRequests(uniqueText);
+  }
+  return [];
+}

package/src/bridge/init.ts

@@ -0,0 +1,77 @@
+import type { BridgeRuntime } from '../core-types';
+import type { PreparedRuntimeAssets, BridgeInteractionState } from './local-types';
+import { buildBackendLadder, createErrorWithCause, loadCoreModule, loadIcuData, loadUiModule, showIcuError } from './utils/assets';
+import { initRenderer } from './utils/backends';
+import { ensureCanvasLogicalSize, installEventHandlers } from './events';
+import { getBridgeAssetUrl, STARTUP_BRIDGE_FONTS } from './font-catalog';
+import { createBridgeRuntime } from './runtime';
+import { installRenderLoop } from './render-loop';
+
+export interface BridgeSession {
+  readonly runtime: BridgeRuntime;
+  destroy(): void;
+}
+
+export interface BridgeSessionOptions {
+  readonly interactionState: BridgeInteractionState;
+  readonly preparedAssets: PreparedRuntimeAssets;
+  readonly runtimeRef: { current: BridgeRuntime | null };
+}
+
+function requireCanvas(id: string): HTMLCanvasElement {
+  const element = document.getElementById(id);
+  if (!(element instanceof HTMLCanvasElement)) {
+    throw new Error(`Expected #${id} canvas.`);
+  }
+  return element;
+}
+
+export async function createBridgeSession(options: BridgeSessionOptions): Promise<BridgeSession> {
+  const canvas = requireCanvas('fui-canvas');
+  ensureCanvasLogicalSize(canvas);
+
+  const { interactionState, preparedAssets, runtimeRef } = options;
+  window.__bridgeLoaderInfo = preparedAssets.loaderInfo;
+  const [core, ui] = await Promise.all([
+    loadCoreModule(preparedAssets.coreBundle, preparedAssets.coreWasm, canvas, preparedAssets.loaderInfo),
+    loadUiModule(preparedAssets.uiBundle, preparedAssets.uiWasm, preparedAssets.loaderInfo),
+  ]);
+  const runtimeState = createBridgeRuntime(core, ui, canvas, interactionState, preparedAssets.loaderInfo);
+  const runtime = runtimeState.runtime;
+  runtimeRef.current = runtime;
+
+  const dpr = Math.max(1, window.devicePixelRatio || 1);
+  const fallbackLadder = buildBackendLadder(preparedAssets.loaderInfo.requestedRendererBackend);
+  await initRenderer(core, canvas, dpr, preparedAssets.loaderInfo, fallbackLadder);
+  ui._ui_reset();
+  try {
+    await loadIcuData(ui, preparedAssets);
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : 'Failed to load text engine.';
+    showIcuError(message);
+    throw createErrorWithCause(message, error);
+  }
+  runtime.updateCanvasSize();
+  const disposeEventHandlers = installEventHandlers(runtime, interactionState);
+  const disposeRenderLoop = installRenderLoop(runtime, preparedAssets.loaderInfo, fallbackLadder);
+  await Promise.all(
+    STARTUP_BRIDGE_FONTS.map((font) => runtime.registerFont({
+      id: font.id,
+      url: getBridgeAssetUrl(font.assetFile),
+      fallbackIds: font.fallbackIds,
+    })),
+  );
+
+  delete window.__bridgeError;
+  return {
+    runtime,
+    destroy: () => {
+      disposeEventHandlers();
+      disposeRenderLoop();
+      runtimeState.destroy();
+      if (runtimeRef.current === runtime) {
+        runtimeRef.current = null;
+      }
+    },
+  };
+}