3d-odontogram 0.0.0-stage → 0.1.1

package/dist/index.cjs

@@ -0,0 +1,601 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_THEME: () => DEFAULT_THEME,
+  Odontogram3D: () => Odontogram3D,
+  OdontogramEngine: () => OdontogramEngine,
+  TOOTH_MESH_NAME_MAP_ADULT: () => TOOTH_MESH_NAME_MAP_ADULT,
+  TOOTH_MESH_NAME_MAP_CHILD: () => TOOTH_MESH_NAME_MAP_CHILD,
+  mergeTheme: () => mergeTheme,
+  toHexColor: () => toHexColor
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Odontogram3D.tsx
+var import_react = require("react");
+
+// src/engine.ts
+var THREE2 = __toESM(require("three"), 1);
+var import_OrbitControls = require("three/examples/jsm/controls/OrbitControls.js");
+var import_GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader.js");
+
+// src/theme.ts
+var THREE = __toESM(require("three"), 1);
+var DEFAULT_THEME = {
+  toothColor: 16119260,
+  // Ivory
+  highlightColor: 3900150,
+  // Tailwind blue-500
+  markerColor: 16711680,
+  // Red
+  canvasBackground: 15528177,
+  canvasBackgroundOpacity: 0,
+  ambientLightColor: 16777215,
+  ambientLightIntensity: 0.8,
+  keyLightColor: 16777215,
+  keyLightIntensity: 0.6,
+  fillLightColor: 16777215,
+  fillLightIntensity: 0.4
+};
+function mergeTheme(theme) {
+  return __spreadValues(__spreadValues({}, DEFAULT_THEME), theme);
+}
+function toHexColor(input) {
+  if (typeof input === "number") return input;
+  return new THREE.Color(input).getHex();
+}
+
+// src/toothNameMaps.ts
+var TOOTH_MESH_NAME_MAP_CHILD = {
+  Gums_Maxilla001_0: "Gums Maxilla",
+  Gums_Mandibula001_0: "Gums Mandibulla",
+  A_0: "(Left Top) Molar",
+  B_0: "(Left Top) Premolar",
+  C_0: "(Left Top) Canine",
+  D_0: "(Left Top) Lateral",
+  E_0: "(Left Top) Central",
+  F_0: "(Right Top) Central",
+  G_0: "(Right Top) Lateral",
+  H_0: "(Right Top) Canine",
+  I_0: "(Right Top) Premolar",
+  J_0: "(Right Top) Molar",
+  K_0: "(Left Bottom) Molar",
+  L_0: "(Left Bottom) Premolar",
+  M_0: "(Left Bottom) Canine",
+  N_0: "(Left Bottom) Lateral",
+  O_0: "(Left Bottom) Central",
+  P_0: "(Right Bottom) Central",
+  Q_0: "(Right Bottom) Lateral",
+  R_0: "(Right Bottom) Canine",
+  S_0: "(Right Bottom) Premolar",
+  T_0: "(Right Bottom) Molar"
+};
+var TOOTH_MESH_NAME_MAP_ADULT = {
+  // --- Rahang Atas Kanan (Quadrant 1) ---
+  "Box023_01_-_Default_0": "11 (Right Top) Central Incisor",
+  "Box024_01_-_Default_0": "12 (Right Top) Lateral Incisor",
+  "Box025_01_-_Default_0": "13 (Right Top) Canine",
+  "Box031_01_-_Default_0": "14 (Right Top) First Premolar",
+  "Box033_01_-_Default_0": "15 (Right Top) Second Premolar",
+  "Box032_01_-_Default_0": "16 (Right Top) First Molar",
+  "Box035_01_-_Default_0": "17 (Right Top) Second Molar",
+  "Box034_01_-_Default_0": "18 (Right Top) Third Molar",
+  // --- Rahang Atas Kiri (Quadrant 2) ---
+  "Box020_01_-_Default_0": "21 (Left Top) Central Incisor",
+  "Box021_01_-_Default_0": "22 (Left Top) Lateral Incisor",
+  "Box022_01_-_Default_0": "23 (Left Top) Canine",
+  "Box026_01_-_Default_0": "24 (Left Top) First Premolar",
+  "Box028_01_-_Default_0": "25 (Left Top) Second Premolar",
+  "Box027_01_-_Default_0": "26 (Left Top) First Molar",
+  "Box030_01_-_Default_0": "27 (Left Top) Second Molar",
+  "Box029_01_-_Default_0": "28 (Left Top) Third Molar",
+  // --- Rahang Bawah Kiri (Quadrant 3) ---
+  "Box011_01_-_Default_0": "38 (Left Bottom) Third Molar",
+  "Box013_01_-_Default_0": "37 (Left Bottom) Second Molar",
+  "Box008_01_-_Default_0": "36 (Left Bottom) First Molar",
+  "Box009_01_-_Default_0": "35 (Left Bottom) Second Premolar",
+  "Box007_01_-_Default_0": "34 (Left Bottom) First Premolar",
+  "Box003_01_-_Default_0": "33 (Left Bottom) Canine",
+  "Box002_01_-_Default_0": "32 (Left Bottom) Lateral Incisor",
+  "Box001_01_-_Default_0": "31 (Left Bottom) Central Incisor",
+  // --- Rahang Bawah Kanan (Quadrant 4) ---
+  "Box004_01_-_Default_0": "41 (Right Bottom) Central Incisor",
+  "Box005_01_-_Default_0": "42 (Right Bottom) Lateral Incisor",
+  "Box006_01_-_Default_0": "43 (Right Bottom) Canine",
+  "Box015_01_-_Default_0": "44 (Right Bottom) First Premolar",
+  "Box017_01_-_Default_0": "45 (Right Bottom) Second Premolar",
+  "Box016_01_-_Default_0": "46 (Right Bottom) First Molar",
+  "Box019_01_-_Default_0": "47 (Right Bottom) Second Molar",
+  "GeoSphere001_01_-_Default_0": "48 (Right Bottom) Third Molar",
+  // --- Lain-lain ---
+  "Tube002_07_-_Default_0": "(Top Tube) Gums Maxilla",
+  "Tube001_07_-_Default_0": "(Bottom Tube) Gums Mandibula",
+  "lingua_02_-_Default_0": "(Tongue) Lingua"
+};
+function mapForToothType(toothType) {
+  return toothType === "child" || !toothType ? TOOTH_MESH_NAME_MAP_CHILD : TOOTH_MESH_NAME_MAP_ADULT;
+}
+
+// src/engine.ts
+var DEFAULT_MODEL_FILE_NAMES = { child: "ip1.bin.gz", adult: "ip3.bin.gz" };
+var OdontogramEngine = class {
+  constructor(canvas, options = {}) {
+    this.raycaster = new THREE2.Raycaster();
+    this.pointer = new THREE2.Vector2();
+    this.toothMeshes = [];
+    this.animationFrameId = null;
+    this.mappedPoints = [];
+    this.disposed = false;
+    this.lights = null;
+    var _a, _b;
+    this.canvas = canvas;
+    this.options = options;
+    this.theme = mergeTheme(options.theme);
+    this.scene = new THREE2.Scene();
+    this.camera = new THREE2.PerspectiveCamera(
+      50,
+      canvas.clientWidth / canvas.clientHeight || 1,
+      0.1,
+      200
+    );
+    this.camera.position.set(0, 2.5, 100);
+    this.renderer = new THREE2.WebGLRenderer({ antialias: true, canvas, alpha: true });
+    this.renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.applyCanvasBackground();
+    this.controls = new import_OrbitControls.OrbitControls(this.camera, this.renderer.domElement);
+    this.controls.enableDamping = true;
+    this.controls.dampingFactor = 0.05;
+    this.controls.screenSpacePanning = false;
+    this.controls.minDistance = (_a = options.minDistance) != null ? _a : 100;
+    this.controls.maxDistance = (_b = options.maxDistance) != null ? _b : 130;
+    this.controls.target.set(4, 8, 0);
+    this.toothMaterialTemplate = new THREE2.MeshPhongMaterial({
+      color: toHexColor(this.theme.toothColor),
+      specular: 5592405,
+      shininess: 30,
+      flatShading: false,
+      side: THREE2.DoubleSide
+    });
+    this.setupLights();
+    const animate = () => {
+      if (this.disposed) return;
+      this.animationFrameId = requestAnimationFrame(animate);
+      this.controls.update();
+      this.renderer.render(this.scene, this.camera);
+    };
+    animate();
+  }
+  setupLights() {
+    const ambient = new THREE2.AmbientLight(
+      toHexColor(this.theme.ambientLightColor),
+      this.theme.ambientLightIntensity
+    );
+    this.scene.add(ambient);
+    const key = new THREE2.DirectionalLight(
+      toHexColor(this.theme.keyLightColor),
+      this.theme.keyLightIntensity
+    );
+    key.position.set(10, 10, 10);
+    this.scene.add(key);
+    const fill = new THREE2.DirectionalLight(
+      toHexColor(this.theme.fillLightColor),
+      this.theme.fillLightIntensity
+    );
+    fill.position.set(-10, -10, -5);
+    this.scene.add(fill);
+    this.lights = { ambient, key, fill };
+  }
+  applyCanvasBackground() {
+    this.renderer.setClearColor(
+      toHexColor(this.theme.canvasBackground),
+      this.theme.canvasBackgroundOpacity
+    );
+  }
+  resolveModelUrl(toothType) {
+    var _a;
+    const base = (_a = this.options.modelBaseUrl) != null ? _a : "/assets/bin";
+    const fileNames = __spreadValues(__spreadValues({}, DEFAULT_MODEL_FILE_NAMES), this.options.modelFileNames);
+    const fileName = toothType === "adult" ? fileNames.adult : fileNames.child;
+    return `${base.replace(/\/$/, "")}/${fileName}`;
+  }
+  /** Re-apply a (partial) theme to lights, background and every tooth currently in its default state. */
+  applyTheme(theme) {
+    this.theme = mergeTheme(__spreadValues(__spreadValues({}, this.theme), theme));
+    this.applyCanvasBackground();
+    if (this.lights) {
+      this.lights.ambient.color.setHex(toHexColor(this.theme.ambientLightColor));
+      this.lights.ambient.intensity = this.theme.ambientLightIntensity;
+      this.lights.key.color.setHex(toHexColor(this.theme.keyLightColor));
+      this.lights.key.intensity = this.theme.keyLightIntensity;
+      this.lights.fill.color.setHex(toHexColor(this.theme.fillLightColor));
+      this.lights.fill.intensity = this.theme.fillLightIntensity;
+    }
+    this.toothMaterialTemplate.color.setHex(toHexColor(this.theme.toothColor));
+    const mappedToothIds = new Set(this.mappedPoints.map((p) => p.toothId));
+    this.forEachToothGroup((group) => {
+      const isMapped = Boolean(group.userData.isMapped);
+      const color = isMapped ? this.theme.highlightColor : this.theme.toothColor;
+      this.setGroupColor(group, toHexColor(color));
+    });
+    this.scene.children.filter((child) => child.name.startsWith("Marker-")).forEach((marker) => {
+      if (marker instanceof THREE2.Mesh && marker.material instanceof THREE2.MeshBasicMaterial) {
+        marker.material.color.setHex(toHexColor(this.theme.markerColor));
+      }
+    });
+    void mappedToothIds;
+  }
+  forEachToothGroup(callback) {
+    const seen = /* @__PURE__ */ new Set();
+    this.toothMeshes.forEach((mesh) => {
+      const group = mesh.userData.parentGroup;
+      if (group && !seen.has(group)) {
+        seen.add(group);
+        callback(group);
+      }
+    });
+  }
+  setGroupColor(group, hex) {
+    group.traverse((child) => {
+      if (child instanceof THREE2.Mesh && child.userData.parentGroup === group && child.material instanceof THREE2.MeshPhongMaterial) {
+        child.material.color.setHex(hex);
+      }
+    });
+  }
+  async loadModel(toothType) {
+    var _a, _b, _c, _d, _e, _f;
+    const oldArchGroup = this.scene.getObjectByName("ArchGroup");
+    if (oldArchGroup) {
+      this.scene.remove(oldArchGroup);
+      oldArchGroup.traverse((child) => {
+        if (child instanceof THREE2.Mesh) {
+          child.geometry.dispose();
+          const material = child.material;
+          if (Array.isArray(material)) material.forEach((m) => m.dispose());
+          else material.dispose();
+        }
+      });
+    }
+    this.toothMeshes = [];
+    this.mappedPoints = [];
+    (_b = (_a = this.options).onPointsChange) == null ? void 0 : _b.call(_a, []);
+    const loader = new import_GLTFLoader.GLTFLoader();
+    const modelUrl = this.resolveModelUrl(toothType);
+    (_d = (_c = this.options).onLoadingChange) == null ? void 0 : _d.call(_c, true);
+    try {
+      const gltf = await loader.loadAsync(modelUrl);
+      if (this.disposed) return;
+      const loadedModel = gltf.scene;
+      loadedModel.scale.set(1, 1, 1);
+      loadedModel.position.set(0, -2, 0);
+      loadedModel.rotation.set(0, 0, 0);
+      loadedModel.name = "ArchGroup";
+      const nameMap = mapForToothType(toothType);
+      loadedModel.traverse((child) => {
+        if (!(child instanceof THREE2.Mesh)) return;
+        child.geometry.computeVertexNormals();
+        if (child.geometry.attributes.color) {
+          child.geometry.deleteAttribute("color");
+        }
+        let mappedName = nameMap[child.name];
+        let targetObject = child;
+        if (!mappedName && child.parent && child.parent.type !== "Scene") {
+          if (nameMap[child.parent.name]) {
+            mappedName = nameMap[child.parent.name];
+            targetObject = child.parent;
+          }
+        }
+        child.material = this.toothMaterialTemplate.clone();
+        if (!targetObject.userData.isTooth) {
+          targetObject.userData = {
+            toothId: mappedName != null ? mappedName : child.name,
+            isTooth: true,
+            isMapped: false,
+            markerIds: []
+          };
+        }
+        child.userData.parentGroup = targetObject;
+        this.toothMeshes.push(child);
+      });
+      this.scene.add(loadedModel);
+    } catch (error) {
+      console.error(`[odontogram-3d] Failed to load model at ${modelUrl}:`, error);
+    } finally {
+      (_f = (_e = this.options).onLoadingChange) == null ? void 0 : _f.call(_e, false);
+    }
+  }
+  removeMarkers(markerIds) {
+    markerIds.forEach((id) => {
+      const marker = this.scene.getObjectByName(`Marker-${id}`);
+      if (marker instanceof THREE2.Mesh) {
+        this.scene.remove(marker);
+        marker.geometry.dispose();
+        marker.material.dispose();
+      }
+    });
+  }
+  addMarker(id, position) {
+    const geometry = new THREE2.SphereGeometry(0.05, 8, 8);
+    const material = new THREE2.MeshBasicMaterial({ color: toHexColor(this.theme.markerColor) });
+    const marker = new THREE2.Mesh(geometry, material);
+    marker.position.copy(position);
+    marker.name = `Marker-${id}`;
+    this.scene.add(marker);
+  }
+  emitPointsChange() {
+    var _a, _b;
+    (_b = (_a = this.options).onPointsChange) == null ? void 0 : _b.call(_a, [...this.mappedPoints]);
+  }
+  /** Handle a click/tap on the canvas (expects coordinates relative to the viewport, like a MouseEvent). */
+  handlePointerDown(clientX, clientY) {
+    var _a;
+    const rect = this.canvas.getBoundingClientRect();
+    this.pointer.x = (clientX - rect.left) / rect.width * 2 - 1;
+    this.pointer.y = -((clientY - rect.top) / rect.height) * 2 + 1;
+    this.raycaster.setFromCamera(this.pointer, this.camera);
+    const intersects = this.raycaster.intersectObjects(this.toothMeshes, false);
+    if (intersects.length === 0) return;
+    const clickedMesh = intersects[0].object;
+    const toothGroup = clickedMesh.userData.parentGroup;
+    if (!toothGroup || !toothGroup.userData.isTooth) return;
+    const toothId = toothGroup.userData.toothId;
+    const point = intersects[0].point;
+    const isCurrentlyMapped = Boolean(toothGroup.userData.isMapped);
+    if (isCurrentlyMapped) {
+      this.removeMarkers((_a = toothGroup.userData.markerIds) != null ? _a : []);
+      this.setGroupColor(toothGroup, toHexColor(this.theme.toothColor));
+      toothGroup.userData.isMapped = false;
+      toothGroup.userData.markerIds = [];
+      this.mappedPoints = this.mappedPoints.filter((p) => p.toothId !== toothId);
+      this.emitPointsChange();
+    } else {
+      const newMarkerId = Date.now();
+      this.setGroupColor(toothGroup, toHexColor(this.theme.highlightColor));
+      toothGroup.userData.isMapped = true;
+      toothGroup.userData.markerIds = [newMarkerId];
+      this.addMarker(newMarkerId, point);
+      const newPoint = {
+        id: newMarkerId,
+        toothId,
+        x: point.x.toFixed(2),
+        y: point.y.toFixed(2),
+        z: point.z.toFixed(2),
+        type: "Karies",
+        description: ""
+      };
+      this.mappedPoints = [...this.mappedPoints, newPoint];
+      this.emitPointsChange();
+    }
+  }
+  getMappedPoints() {
+    return [...this.mappedPoints];
+  }
+  /** Patch metadata (e.g. description) on an existing point without touching the 3D scene. */
+  updatePoint(id, patch) {
+    this.mappedPoints = this.mappedPoints.map((p) => p.id === id ? __spreadValues(__spreadValues({}, p), patch) : p);
+    this.emitPointsChange();
+  }
+  resetMapping() {
+    const existingMarkerIds = this.scene.children.filter((c) => c.name.startsWith("Marker-")).map((c) => Number(c.name.replace("Marker-", "")));
+    this.removeMarkers(existingMarkerIds);
+    this.forEachToothGroup((group) => {
+      this.setGroupColor(group, toHexColor(this.theme.toothColor));
+      group.userData.isMapped = false;
+      group.userData.markerIds = [];
+    });
+    this.mappedPoints = [];
+    this.emitPointsChange();
+  }
+  /** Replace all diagnostic points and redraw markers/highlights to match (e.g. after importing JSON). */
+  setMappedPoints(points) {
+    this.resetMapping();
+    points.forEach((point) => {
+      var _a, _b;
+      const group = (_a = this.toothMeshes.find(
+        (mesh) => {
+          var _a2;
+          return ((_a2 = mesh.userData.parentGroup) == null ? void 0 : _a2.userData.toothId) === point.toothId;
+        }
+      )) == null ? void 0 : _a.userData.parentGroup;
+      if (!group) return;
+      this.setGroupColor(group, toHexColor(this.theme.highlightColor));
+      group.userData.isMapped = true;
+      group.userData.markerIds = [...(_b = group.userData.markerIds) != null ? _b : [], point.id];
+      this.addMarker(point.id, new THREE2.Vector3(parseFloat(point.x), parseFloat(point.y), parseFloat(point.z)));
+    });
+    this.mappedPoints = [...points];
+    this.emitPointsChange();
+  }
+  resize() {
+    const container = this.canvas.parentElement;
+    if (!container) return;
+    const { clientWidth, clientHeight } = container;
+    if (clientWidth === 0 || clientHeight === 0) return;
+    this.camera.aspect = clientWidth / clientHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(clientWidth, clientHeight, false);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+  }
+  dispose() {
+    this.disposed = true;
+    if (this.animationFrameId !== null) cancelAnimationFrame(this.animationFrameId);
+    const oldArchGroup = this.scene.getObjectByName("ArchGroup");
+    if (oldArchGroup) this.scene.remove(oldArchGroup);
+    this.scene.traverse((child) => {
+      if (child instanceof THREE2.Mesh) {
+        child.geometry.dispose();
+        const material = child.material;
+        if (Array.isArray(material)) material.forEach((m) => m.dispose());
+        else material == null ? void 0 : material.dispose();
+      }
+    });
+    this.toothMaterialTemplate.dispose();
+    this.controls.dispose();
+    this.renderer.dispose();
+  }
+};
+
+// src/Odontogram3D.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Odontogram3D = (0, import_react.forwardRef)(
+  function Odontogram3D2({
+    toothType = "child",
+    theme,
+    modelBaseUrl,
+    modelFileNames,
+    initialPoints,
+    onPointsChange,
+    onLoadingChange,
+    minDistance,
+    maxDistance,
+    className,
+    style
+  }, ref) {
+    const canvasRef = (0, import_react.useRef)(null);
+    const engineRef = (0, import_react.useRef)(null);
+    const isLoadingRef = (0, import_react.useRef)(true);
+    const onPointsChangeRef = (0, import_react.useRef)(onPointsChange);
+    const onLoadingChangeRef = (0, import_react.useRef)(onLoadingChange);
+    onPointsChangeRef.current = onPointsChange;
+    onLoadingChangeRef.current = onLoadingChange;
+    (0, import_react.useEffect)(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const engine = new OdontogramEngine(canvas, {
+        theme,
+        modelBaseUrl,
+        modelFileNames,
+        minDistance,
+        maxDistance,
+        onLoadingChange: (loading) => {
+          var _a;
+          isLoadingRef.current = loading;
+          (_a = onLoadingChangeRef.current) == null ? void 0 : _a.call(onLoadingChangeRef, loading);
+        },
+        onPointsChange: (points) => {
+          var _a;
+          return (_a = onPointsChangeRef.current) == null ? void 0 : _a.call(onPointsChangeRef, points);
+        }
+      });
+      engineRef.current = engine;
+      engine.loadModel(toothType).then(() => {
+        if (initialPoints && initialPoints.length > 0) {
+          engine.setMappedPoints(initialPoints);
+        }
+      });
+      const handleResize = () => engine.resize();
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+        engine.dispose();
+        engineRef.current = null;
+      };
+    }, []);
+    const previousToothType = (0, import_react.useRef)(toothType);
+    (0, import_react.useEffect)(() => {
+      var _a;
+      if (previousToothType.current === toothType) return;
+      previousToothType.current = toothType;
+      (_a = engineRef.current) == null ? void 0 : _a.loadModel(toothType);
+    }, [toothType]);
+    (0, import_react.useEffect)(() => {
+      var _a;
+      if (!theme) return;
+      (_a = engineRef.current) == null ? void 0 : _a.applyTheme(theme);
+    }, [theme]);
+    const handlePointerDown = (0, import_react.useCallback)((event) => {
+      var _a;
+      if (isLoadingRef.current) return;
+      (_a = engineRef.current) == null ? void 0 : _a.handlePointerDown(event.clientX, event.clientY);
+    }, []);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        resetMapping: () => {
+          var _a;
+          return (_a = engineRef.current) == null ? void 0 : _a.resetMapping();
+        },
+        getMappedPoints: () => {
+          var _a, _b;
+          return (_b = (_a = engineRef.current) == null ? void 0 : _a.getMappedPoints()) != null ? _b : [];
+        },
+        setMappedPoints: (points) => {
+          var _a;
+          return (_a = engineRef.current) == null ? void 0 : _a.setMappedPoints(points);
+        },
+        updatePoint: (id, patch) => {
+          var _a;
+          return (_a = engineRef.current) == null ? void 0 : _a.updatePoint(id, patch);
+        },
+        applyTheme: (nextTheme) => {
+          var _a;
+          return (_a = engineRef.current) == null ? void 0 : _a.applyTheme(nextTheme);
+        }
+      }),
+      []
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "canvas",
+      {
+        ref: canvasRef,
+        className,
+        style: __spreadValues({ width: "100%", height: "100%" }, style),
+        onMouseDown: handlePointerDown
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_THEME,
+  Odontogram3D,
+  OdontogramEngine,
+  TOOTH_MESH_NAME_MAP_ADULT,
+  TOOTH_MESH_NAME_MAP_CHILD,
+  mergeTheme,
+  toHexColor
+});
+//# sourceMappingURL=index.cjs.map