@threenative/core 0.1.0 → 0.3.0

package/dist/react.js

@@ -0,0 +1,635 @@
+import { createElement } from 'react';
+import ReactReconciler from 'react-reconciler';
+import { DiscreteEventPriority, NoEventPriority } from 'react-reconciler/constants.js';
+import { PlaneGeometry, Group, InstancedMesh, MeshBasicMaterial, Matrix4, Mesh, Color } from 'three';
+
+// src/react.ts
+
+// src/react-glyphs.ts
+var GLYPH_WIDTH = 5;
+var GLYPH_HEIGHT = 7;
+var GLYPH_ADVANCE = 6;
+var GLYPHS = {
+  " ": ".".repeat(GLYPH_WIDTH * GLYPH_HEIGHT),
+  "0": ".###.#...##..###.#.###..##...#.###.",
+  "1": "..#...##....#....#....#....#...###.",
+  "2": ".###.#...#....#...#...#...#...#####",
+  "3": "#####...#...#.....#.....##...#.###.",
+  "4": "...#...##..#.#.#..#.#####...#....#.",
+  "5": "######....####.....#....##...#.###.",
+  "6": "..##..#...#....####.#...##...#.###.",
+  "7": "#####....#...#...#...#....#....#...",
+  "8": ".###.#...##...#.###.#...##...#.###.",
+  "9": ".###.#...##...#.####....#...#..##..",
+  A: "..#...#.#.#...##...#######...##...#",
+  B: "####.#...##...#####.#...##...#####.",
+  C: ".#####....#....#....#....#.....####",
+  D: "###..#..#.#...##...##...##..#.###..",
+  E: "######....#....####.#....#....#####",
+  F: "######....#....####.#....#....#....",
+  G: ".###.#...##....#..###...##...#.###.",
+  H: "#...##...##...#######...##...##...#",
+  I: ".###...#....#....#....#....#...###.",
+  J: "..###...#....#....#....#.#..#..##..",
+  K: "#...##..#.#.#..##...#.#..#..#.#...#",
+  L: "#....#....#....#....#....#....#####",
+  M: "#...###.###.#.##.#.##...##...##...#",
+  N: "#...###..###..##.#.##..###..###...#",
+  O: ".###.#...##...##...##...##...#.###.",
+  P: "####.#...##...#####.#....#....#....",
+  Q: ".###.#...##...##...##.#.##..#..##.#",
+  R: "####.#...##...#####.#.#..#..#.#...#",
+  S: ".#####....#.....###.....#....#####.",
+  T: "#####..#....#....#....#....#....#..",
+  U: "#...##...##...##...##...##...#.###.",
+  V: "#...##...##...##...##...#.#.#...#..",
+  W: "#...##...##...##.#.##.#.###.###...#",
+  X: "#...##...#.#.#...#...#.#.#...##...#",
+  Y: "#...##...#.#.#...#....#....#....#..",
+  Z: "#####....#...#...#...#...#....#####",
+  ":": ".......#....#.........#....#.......",
+  ".": "...........................#....#..",
+  ",": "......................#....#...#...",
+  "-": "...............#####...............",
+  "+": ".......#....#..#####..#....#.......",
+  "=": "..........#####.....#####..........",
+  "/": "....#....#...#...#...#...#....#....",
+  "|": "..#....#....#....#....#....#....#..",
+  "!": "..#....#....#....#....#.........#..",
+  "?": ".###.#...#....#...#...#.........#..",
+  "'": "..#....#...........................",
+  "(": "...#...#...#....#....#.....#.....#.",
+  ")": ".#.....#.....#....#....#...#...#...",
+  "[": ".###..#....#....#....#....#....###.",
+  "]": ".###....#....#....#....#....#..###.",
+  "#": ".#.#..#.#.#####.#.#.#####.#.#..#.#.",
+  $: "..#...#####.#...###...#.#####...#..",
+  "%": "##..###.#....#...#...#....#.###..##",
+  "*": ".....#.#.#.###.#####.###.#.#.#.....",
+  "\xB7": ".................#.................",
+  "\xB0": ".##..#..#..##......................",
+  "<": "...#...#...#...#.....#.....#.....#.",
+  ">": ".#.....#.....#.....#...#...#...#...",
+  _: "..............................#####"
+};
+function glyphPixels(character) {
+  const art = GLYPHS[character] ?? GLYPHS[character.toUpperCase()];
+  if (art === void 0) return void 0;
+  const pixels = [];
+  for (let index = 0; index < GLYPH_WIDTH * GLYPH_HEIGHT; index += 1) {
+    if (art[index] !== "#") continue;
+    pixels.push([index % GLYPH_WIDTH, Math.floor(index / GLYPH_WIDTH)]);
+  }
+  return pixels;
+}
+function supportedGlyphs() {
+  return Object.keys(GLYPHS).join("");
+}
+
+// src/react-layout.ts
+var STYLE_KEYS = /* @__PURE__ */ new Set([
+  "left",
+  "right",
+  "top",
+  "bottom",
+  "centerX",
+  "centerY",
+  "width",
+  "height",
+  "padding",
+  "direction",
+  "gap",
+  "align",
+  "background",
+  "color",
+  "opacity",
+  "fontSize",
+  "letterSpacing",
+  "textAlign",
+  "zIndex"
+]);
+function assertKnownStyle(style, elementType) {
+  for (const key of Object.keys(style)) {
+    if (STYLE_KEYS.has(key)) continue;
+    throw new Error(
+      `TN_REACT_UNKNOWN_STYLE: <${elementType}> was given style '${key}', which the native overlay does not implement. Supported: ${[...STYLE_KEYS].join(", ")}.`
+    );
+  }
+}
+function supportedStyleKeys() {
+  return [...STYLE_KEYS];
+}
+var DEFAULT_FONT_SIZE = 14;
+function measureText(text, fontSize, letterSpacing = 0) {
+  if (text.length === 0) return 0;
+  const cell = fontSize / GLYPH_HEIGHT;
+  const advance = GLYPH_ADVANCE * cell + letterSpacing;
+  return (text.length - 1) * advance + GLYPH_WIDTH * cell;
+}
+function intrinsicSize(node, fontSize) {
+  const { style } = node;
+  if (node.kind === "text") {
+    return {
+      width: style.width ?? measureText(node.text, fontSize, style.letterSpacing ?? 0),
+      height: style.height ?? fontSize
+    };
+  }
+  const padding = style.padding ?? 0;
+  const gap = style.gap ?? 0;
+  let contentWidth = 0;
+  let contentHeight = 0;
+  for (const [index, child] of node.children.entries()) {
+    const childFont = child.style.fontSize ?? fontSize;
+    const size = intrinsicSize(child, childFont);
+    if (style.direction === "row") {
+      contentWidth += size.width + (index > 0 ? gap : 0);
+      contentHeight = Math.max(contentHeight, size.height);
+    } else if (style.direction === "column") {
+      contentHeight += size.height + (index > 0 ? gap : 0);
+      contentWidth = Math.max(contentWidth, size.width);
+    } else {
+      contentWidth = Math.max(contentWidth, (child.style.left ?? 0) + size.width);
+      contentHeight = Math.max(contentHeight, (child.style.top ?? 0) + size.height);
+    }
+  }
+  return {
+    width: style.width ?? contentWidth + padding * 2,
+    height: style.height ?? contentHeight + padding * 2
+  };
+}
+function crossOffset(align, available, size) {
+  if (align === "center") return (available - size) / 2;
+  if (align === "end") return available - size;
+  return 0;
+}
+function place(node, content, size) {
+  const { style } = node;
+  let x;
+  if (style.centerX === true) x = content.x + (content.width - size.width) / 2;
+  else if (style.left !== void 0) x = content.x + style.left;
+  else if (style.right !== void 0) x = content.x + content.width - style.right - size.width;
+  else x = content.x;
+  let y;
+  if (style.centerY === true) y = content.y + (content.height - size.height) / 2;
+  else if (style.top !== void 0) y = content.y + style.top;
+  else if (style.bottom !== void 0) y = content.y + content.height - style.bottom - size.height;
+  else y = content.y;
+  node.box = { x, y, width: size.width, height: size.height };
+}
+function layoutTree(root, width, height) {
+  if (!(width > 0) || !(height > 0)) {
+    throw new Error(
+      `TN_REACT_LAYOUT_EMPTY_VIEWPORT: the overlay was laid out against ${width}x${height}. A zero-sized surface draws nothing and would look identical to a crash.`
+    );
+  }
+  root.box = { x: 0, y: 0, width, height };
+  root.resolvedFontSize = root.style.fontSize ?? DEFAULT_FONT_SIZE;
+  arrange(root, root.resolvedFontSize);
+}
+function arrange(node, fontSize) {
+  const { style } = node;
+  const padding = style.padding ?? 0;
+  const content = {
+    x: node.box.x + padding,
+    y: node.box.y + padding,
+    width: Math.max(0, node.box.width - padding * 2),
+    height: Math.max(0, node.box.height - padding * 2)
+  };
+  const gap = style.gap ?? 0;
+  let cursor = style.direction === "row" ? content.x : content.y;
+  for (const [index, child] of node.children.entries()) {
+    const childFont = child.style.fontSize ?? fontSize;
+    child.resolvedFontSize = childFont;
+    const size = intrinsicSize(child, childFont);
+    if (style.direction === "row") {
+      if (index > 0) cursor += gap;
+      child.box = {
+        x: cursor,
+        y: content.y + crossOffset(style.align, content.height, size.height),
+        width: size.width,
+        height: size.height
+      };
+      cursor += size.width;
+    } else if (style.direction === "column") {
+      if (index > 0) cursor += gap;
+      child.box = {
+        x: content.x + crossOffset(style.align, content.width, size.width),
+        y: cursor,
+        width: size.width,
+        height: size.height
+      };
+      cursor += size.height;
+    } else {
+      place(child, content, size);
+    }
+    arrange(child, childFont);
+  }
+}
+function textOffset(node) {
+  const runWidth = measureText(node.text, node.resolvedFontSize, node.style.letterSpacing ?? 0);
+  if (node.style.textAlign === "center") return (node.box.width - runWidth) / 2;
+  if (node.style.textAlign === "right") return node.box.width - runWidth;
+  return 0;
+}
+
+// src/react-host.ts
+var VIEW_ELEMENT = "tn-view";
+var TEXT_ELEMENT = "tn-text";
+var UNIT_PLANE = new PlaneGeometry(1, 1);
+var HOST_CONTEXT = {};
+function isHost(node) {
+  return node.kind !== "raw";
+}
+function styleOf(props, type) {
+  const style = props.style ?? {};
+  if (typeof style !== "object")
+    throw new Error(`TN_REACT_BAD_STYLE: <${type}> style must be an object.`);
+  assertKnownStyle(style, type);
+  return style;
+}
+function makeNode(type, props) {
+  if (type !== VIEW_ELEMENT && type !== TEXT_ELEMENT) {
+    throw new Error(
+      `TN_REACT_UNKNOWN_ELEMENT: <${type}> has no native mapping. The native overlay renders <View> and <Text> only; a DOM tag such as <div> or <svg> cannot cross, because there is no DOM and no rasteriser on the native host.`
+    );
+  }
+  return {
+    kind: type === VIEW_ELEMENT ? "view" : "text",
+    props,
+    style: styleOf(props, type),
+    text: "",
+    nodes: [],
+    children: [],
+    box: { x: 0, y: 0, width: 0, height: 0 },
+    resolvedFontSize: 14
+  };
+}
+function reconcileChildren(node) {
+  const children = [];
+  let text = "";
+  for (const child of node.nodes) {
+    if (isHost(child)) children.push(child);
+    else text += child.text;
+  }
+  node.children = children;
+  node.text = text;
+}
+function toColor(value, fallback) {
+  if (value === void 0) return new Color(fallback);
+  return new Color(value);
+}
+function syncObject(node, parent, order) {
+  order.value += 1;
+  const renderOrder = 1e4 + order.value;
+  if (node.kind === "view") {
+    const background = node.style.background;
+    if (background === void 0) {
+      disposeObject(node);
+    } else {
+      const mesh = node.object ?? newQuad();
+      node.object = mesh;
+      const material = mesh.material;
+      material.color.copy(toColor(background, 16777215));
+      material.opacity = node.style.opacity ?? 1;
+      mesh.renderOrder = renderOrder;
+      mesh.scale.set(Math.max(node.box.width, 0), Math.max(node.box.height, 0), 1);
+      mesh.position.set(node.box.x + node.box.width / 2, -(node.box.y + node.box.height / 2), 0);
+      parent.add(mesh);
+    }
+  } else {
+    syncText(node, parent, renderOrder);
+  }
+  syncChildren(node.children, parent, order);
+}
+function syncChildren(children, parent, order) {
+  const sorted = children.map((child, index) => ({ child, index })).sort(
+    (left, right) => (left.child.style.zIndex ?? 0) - (right.child.style.zIndex ?? 0) || left.index - right.index
+  );
+  for (const { child } of sorted) syncObject(child, parent, order);
+}
+function newQuad() {
+  const mesh = new Mesh(
+    UNIT_PLANE,
+    new MeshBasicMaterial({ depthTest: false, depthWrite: false, transparent: true })
+  );
+  mesh.frustumCulled = false;
+  return mesh;
+}
+function syncText(node, parent, renderOrder) {
+  const cell = node.resolvedFontSize / GLYPH_HEIGHT;
+  const advance = 6 * cell + (node.style.letterSpacing ?? 0);
+  const runs = [];
+  const originX = node.box.x + textOffset(node);
+  for (const [index, character] of [...node.text].entries()) {
+    const pixels = glyphPixels(character);
+    if (pixels === void 0) {
+      throw new Error(
+        `TN_REACT_UNKNOWN_GLYPH: '${character}' is not in the overlay glyph set, so "${node.text}" would draw with a hole in it. Supported: ${supportedGlyphs()}`
+      );
+    }
+    for (const [px, py] of pixels) {
+      runs.push([originX + index * advance + px * cell, node.box.y + py * cell]);
+    }
+  }
+  const needed = Math.max(runs.length, 1);
+  let mesh = node.object;
+  if (mesh === void 0 || mesh.instanceMatrix.count < needed) {
+    disposeObject(node);
+    mesh = new InstancedMesh(
+      UNIT_PLANE,
+      new MeshBasicMaterial({ depthTest: false, depthWrite: false, transparent: true }),
+      // Headroom on purpose: a HUD number goes 30 -> 29 -> 28 all day, and reallocating whenever
+      // the pixel count ticks up by one would churn a buffer every second. Grow, never shrink.
+      Math.max(needed * 2, 256)
+    );
+    mesh.frustumCulled = false;
+    node.object = mesh;
+  }
+  const material = mesh.material;
+  material.color.copy(toColor(node.style.color, 16777215));
+  material.opacity = node.style.opacity ?? 1;
+  mesh.renderOrder = renderOrder;
+  const matrix = new Matrix4();
+  for (const [index, [x, y]] of runs.entries()) {
+    matrix.makeScale(cell, cell, 1);
+    matrix.setPosition(x + cell / 2, -(y + cell / 2), 0);
+    mesh.setMatrixAt(index, matrix);
+  }
+  mesh.count = runs.length;
+  mesh.instanceMatrix.needsUpdate = true;
+  parent.add(mesh);
+}
+function disposeObject(node) {
+  const object = node.object;
+  if (object === void 0) return;
+  object.removeFromParent();
+  const mesh = object;
+  mesh.material?.dispose();
+  node.object = void 0;
+}
+function disposeTree(node) {
+  disposeObject(node);
+  for (const child of node.children) disposeTree(child);
+}
+var currentPriority = NoEventPriority;
+var config = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: false,
+  noTimeout: -1,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  createInstance: (type, props) => makeNode(type, props),
+  createTextInstance: (text) => ({ kind: "raw", text }),
+  shouldSetTextContent: () => false,
+  getPublicInstance: (instance) => instance,
+  getRootHostContext: () => HOST_CONTEXT,
+  getChildHostContext: () => HOST_CONTEXT,
+  appendInitialChild: (parent, child) => attach(parent, child),
+  appendChild: (parent, child) => attach(parent, child),
+  appendChildToContainer: (container, child) => attach(container.root, child),
+  insertBefore: (parent, child, before) => insert(parent, child, before),
+  insertInContainerBefore: (container, child, before) => insert(container.root, child, before),
+  removeChild: (parent, child) => detach(parent, child),
+  removeChildFromContainer: (container, child) => detach(container.root, child),
+  clearContainer: (container) => {
+    for (const child of [...container.root.nodes]) detach(container.root, child);
+  },
+  finalizeInitialChildren: () => false,
+  commitUpdate: (instance, type, _prev, next) => {
+    instance.props = next;
+    instance.style = styleOf(next, type);
+  },
+  commitTextUpdate: (instance, _old, next) => {
+    instance.text = next;
+    if (instance.parent !== void 0) reconcileChildren(instance.parent);
+  },
+  prepareForCommit: () => null,
+  resetAfterCommit: (container) => container.invalidate(),
+  preparePortalMount: () => void 0,
+  detachDeletedInstance: () => void 0,
+  beforeActiveInstanceBlur: () => void 0,
+  afterActiveInstanceBlur: () => void 0,
+  prepareScopeUpdate: () => void 0,
+  getInstanceFromNode: () => null,
+  getInstanceFromScope: () => null,
+  setCurrentUpdatePriority: (priority) => {
+    currentPriority = priority;
+  },
+  getCurrentUpdatePriority: () => currentPriority,
+  // Discrete, not default, and deliberately so. A default-lane update is handed to React's own
+  // Scheduler, which reaches for `MessageChannel` and only falls back to `setTimeout`; on the
+  // native host that is one more browser global to depend on for a HUD that has to repaint inside
+  // a fixed-step frame anyway. Discrete puts the update on the sync lane, so `flushSyncWork()`
+  // from the game loop is all that is ever needed and the overlay never waits on a scheduler.
+  resolveUpdatePriority: () => currentPriority !== NoEventPriority ? currentPriority : DiscreteEventPriority,
+  getCurrentEventPriority: () => DiscreteEventPriority,
+  shouldAttemptEagerTransition: () => false,
+  requestPostPaintCallback: () => void 0,
+  maySuspendCommit: () => false,
+  preloadInstance: () => true,
+  startSuspendingCommit: () => void 0,
+  suspendInstance: () => void 0,
+  waitForCommitToBeReady: () => null,
+  resetFormInstance: () => void 0,
+  trackSchedulerEvent: () => void 0,
+  resolveEventType: () => null,
+  resolveEventTimeStamp: () => -1.1,
+  // biome-ignore lint/style/useNamingConvention: exact React reconciler host API name.
+  NotPendingTransition: null,
+  // biome-ignore lint/style/useNamingConvention: exact React reconciler host API name.
+  HostTransitionContext: {
+    $$typeof: /* @__PURE__ */ Symbol.for("react.context"),
+    // biome-ignore lint/style/useNamingConvention: exact React context API name.
+    Provider: null,
+    // biome-ignore lint/style/useNamingConvention: exact React context API name.
+    Consumer: null,
+    _currentValue: null,
+    _currentValue2: null,
+    _threadCount: 0
+  }
+};
+function attach(parent, child) {
+  if (!isHost(child)) child.parent = parent;
+  const existing = parent.nodes.indexOf(child);
+  if (existing >= 0) parent.nodes.splice(existing, 1);
+  parent.nodes.push(child);
+  reconcileChildren(parent);
+}
+function insert(parent, child, before) {
+  if (child === before) return;
+  if (!isHost(child)) child.parent = parent;
+  const existing = parent.nodes.indexOf(child);
+  if (existing >= 0) parent.nodes.splice(existing, 1);
+  const at = parent.nodes.indexOf(before);
+  parent.nodes.splice(at < 0 ? parent.nodes.length : at, 0, child);
+  reconcileChildren(parent);
+}
+function detach(parent, child) {
+  const at = parent.nodes.indexOf(child);
+  if (at >= 0) parent.nodes.splice(at, 1);
+  if (isHost(child)) disposeTree(child);
+  reconcileChildren(parent);
+}
+var reconciler = ReactReconciler(config);
+function createReactOverlay(options) {
+  const { canvasLayer } = options;
+  const group = new Group();
+  group.name = "ThreeNativeReactOverlay";
+  canvasLayer.scene.add(group);
+  const root = {
+    kind: "view",
+    props: {},
+    style: {},
+    text: "",
+    nodes: [],
+    children: [],
+    box: { x: 0, y: 0, width: 0, height: 0 },
+    resolvedFontSize: 14
+  };
+  let dirty = true;
+  let lastWidth = 0;
+  let lastHeight = 0;
+  let objectCount = 0;
+  let commitCount = 0;
+  let lastCommitMs;
+  let failure;
+  let failureObject;
+  const container = {
+    root,
+    invalidate: () => {
+      dirty = true;
+    }
+  };
+  const report = (error) => {
+    const message = error instanceof Error ? error.message : String(error);
+    failure = { message, source: "react" };
+    dirty = true;
+    const named = new Error(`TN_REACT_OVERLAY_FAILED: ${message}`);
+    if (options.onError !== void 0) options.onError(named);
+    else console.error(named.message);
+  };
+  const fiberRoot = reconciler.createContainer(
+    container,
+    0,
+    null,
+    false,
+    null,
+    "tn",
+    report,
+    report,
+    report,
+    null
+  );
+  const draw = () => {
+    const { camera } = canvasLayer;
+    const width = camera.right - camera.left;
+    const height = camera.top - camera.bottom;
+    if (!dirty && width === lastWidth && height === lastHeight) return;
+    lastWidth = width;
+    lastHeight = height;
+    dirty = false;
+    group.position.set(-width / 2, height / 2, 0);
+    try {
+      if (failure?.source === "react") {
+        showFailure(failure.message, width);
+        return;
+      }
+      layoutTree(root, width, height);
+      const order = { value: 0 };
+      syncChildren(root.children, group, order);
+      objectCount = order.value;
+      failure = void 0;
+      clearFailure();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      failure = { message, source: "draw" };
+      if (options.onError !== void 0) options.onError(new Error(message));
+      else console.error(message);
+      showFailure(message, width);
+    }
+  };
+  const clearFailure = () => {
+    if (failureObject !== void 0) {
+      failureObject.removeFromParent();
+      failureObject.material?.dispose();
+      failureObject = void 0;
+    }
+    for (const child of group.children) child.visible = true;
+  };
+  const showFailure = (message, width) => {
+    clearFailure();
+    for (const child of group.children) child.visible = false;
+    failureObject = drawFailure(group, message, width);
+  };
+  const stopResize = canvasLayer.onResize(() => {
+    dirty = true;
+    draw();
+  });
+  return {
+    render(element) {
+      failure = void 0;
+      reconciler.updateContainerSync(element, fiberRoot, null, null);
+      reconciler.flushSyncWork();
+      draw();
+    },
+    refresh() {
+      const startedAt = globalThis.performance?.now() ?? Date.now();
+      const wasDirty = dirty;
+      reconciler.flushSyncWork();
+      const committed = dirty && !wasDirty;
+      draw();
+      if (committed) {
+        commitCount += 1;
+        lastCommitMs = (globalThis.performance?.now() ?? Date.now()) - startedAt;
+      }
+    },
+    dispose() {
+      stopResize();
+      reconciler.updateContainerSync(null, fiberRoot, null, null);
+      reconciler.flushSyncWork();
+      clearFailure();
+      disposeTree(root);
+      group.removeFromParent();
+    },
+    get objectCount() {
+      return objectCount;
+    },
+    get commitCount() {
+      return commitCount;
+    },
+    get lastCommitMs() {
+      return lastCommitMs;
+    }
+  };
+}
+function drawFailure(group, message, width) {
+  const line = message.split(":")[0] ?? "TN_REACT_OVERLAY_FAILED";
+  const node = {
+    kind: "text",
+    props: {},
+    style: { color: "#ff5f4d", fontSize: 18 },
+    text: line.slice(0, 48).toUpperCase(),
+    nodes: [],
+    children: [],
+    box: { x: 12, y: 12, width: Math.max(width - 24, 1), height: 18 },
+    resolvedFontSize: 18
+  };
+  try {
+    syncText(node, group, 2e4);
+    return node.object;
+  } catch {
+    return void 0;
+  }
+}
+
+// src/react.ts
+function View(props) {
+  return createElement(VIEW_ELEMENT, { style: props.style }, props.children);
+}
+function Text(props) {
+  return createElement(TEXT_ELEMENT, { style: props.style }, props.children);
+}
+
+export { TEXT_ELEMENT, Text, VIEW_ELEMENT, View, createReactOverlay, measureText, supportedGlyphs, supportedStyleKeys };