@glyphcss/react 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -20,99 +20,168 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  BASE_TILE: () => import_core2.BASE_TILE,
-  CAMERA_BACKFACE_CULL_EPS: () => import_core2.CAMERA_BACKFACE_CULL_EPS,
-  DEFAULT_CAMERA_STATE: () => import_core2.DEFAULT_CAMERA_STATE,
-  DEFAULT_PROJECTION: () => import_core2.DEFAULT_PROJECTION,
-  GlyphcssAxesHelper: () => GlyphcssAxesHelper,
-  GlyphcssCamera: () => GlyphcssPerspectiveCamera,
-  GlyphcssCameraContext: () => GlyphcssCameraContext,
-  GlyphcssDirectionalLightHelper: () => GlyphcssDirectionalLightHelper,
-  GlyphcssFirstPersonControls: () => GlyphcssFirstPersonControls,
-  GlyphcssHotspot: () => GlyphcssHotspot,
-  GlyphcssMapControls: () => GlyphcssMapControls,
-  GlyphcssMesh: () => GlyphcssMesh,
-  GlyphcssOrbitControls: () => GlyphcssOrbitControls,
-  GlyphcssOrthographicCamera: () => GlyphcssOrthographicCamera,
-  GlyphcssPerspectiveCamera: () => GlyphcssPerspectiveCamera,
-  GlyphcssScene: () => GlyphcssScene,
-  GlyphcssSceneContext: () => GlyphcssSceneContext,
-  LoopOnce: () => import_core2.LoopOnce,
-  LoopPingPong: () => import_core2.LoopPingPong,
-  LoopRepeat: () => import_core2.LoopRepeat,
-  VOXEL_CAMERA_CULL_AXIS_EPS: () => import_core2.VOXEL_CAMERA_CULL_AXIS_EPS,
-  VOXEL_CAMERA_CULL_NORMAL_LIMIT: () => import_core2.VOXEL_CAMERA_CULL_NORMAL_LIMIT,
-  arrowPolygons: () => import_core2.arrowPolygons,
-  axesHelperPolygons: () => import_core2.axesHelperPolygons,
-  bakeSolidTextureSampledPolygons: () => import_core2.bakeSolidTextureSampledPolygons,
-  bakeSolidTextureSamples: () => import_core2.bakeSolidTextureSamples,
-  buildSceneContext: () => import_core2.buildSceneContext,
-  cameraCullNormalGroups: () => import_core2.cameraCullNormalGroups,
-  cameraCullNormalGroupsFromPolygons: () => import_core2.cameraCullNormalGroupsFromPolygons,
-  cameraCullNormalKey: () => import_core2.cameraCullNormalKey,
-  cameraCullVisibleSignature: () => import_core2.cameraCullVisibleSignature,
-  cameraFacingDepth: () => import_core2.cameraFacingDepth,
-  clampChannel: () => import_core2.clampChannel,
-  computeSceneBbox: () => import_core2.computeSceneBbox,
-  computeShapeLighting: () => import_core2.computeShapeLighting,
-  coverPlanarPolygons: () => import_core2.coverPlanarPolygons,
-  createGlyphcssAnimationMixer: () => import_core2.createGlyphcssAnimationMixer,
-  createIsometricCamera: () => import_core2.createIsometricCamera,
-  cullInteriorPolygons: () => import_core2.cullInteriorPolygons,
-  findGlyphcssMeshHandle: () => findGlyphcssMeshHandle,
-  formatColor: () => import_core2.formatColor,
-  injectGlyphcssBaseStyles: () => import_glyphcss8.injectGlyphcssBaseStyles,
-  inverseRotateVec3: () => import_core2.inverseRotateVec3,
-  isAxisAlignedSurfaceNormal: () => import_core2.isAxisAlignedSurfaceNormal,
-  isVoxelCameraCullableNormalGroups: () => import_core2.isVoxelCameraCullableNormalGroups,
-  loadMesh: () => import_core2.loadMesh,
-  mergePolygons: () => import_core2.mergePolygons,
-  normalFacesCamera: () => import_core2.normalFacesCamera,
-  normalizeInvertMultiplier: () => import_core2.normalizeInvertMultiplier,
-  normalizePolygons: () => import_core2.normalizePolygons,
-  octahedronPolygons: () => import_core2.octahedronPolygons,
-  optimizeMeshPolygons: () => import_core2.optimizeMeshPolygons,
-  parseColor: () => import_core2.parseColor,
-  parseGltf: () => import_core2.parseGltf,
-  parseHexColor: () => import_core2.parseHexColor,
-  parseMtl: () => import_core2.parseMtl,
-  parseObj: () => import_core2.parseObj,
-  parsePureColor: () => import_core2.parsePureColor,
-  parseRgbColor: () => import_core2.parseRgbColor,
-  parseVox: () => import_core2.parseVox,
-  polygonCssSurfaceNormal: () => import_core2.polygonCssSurfaceNormal,
-  polygonFaces: () => import_core2.polygonFaces,
-  polygonFacesCamera: () => import_core2.polygonFacesCamera,
-  ringPolygons: () => import_core2.ringPolygons,
-  rotateVec3: () => import_core2.rotateVec3,
-  shadeColor: () => import_core2.shadeColor,
-  useGlyphcssAnimation: () => useGlyphcssAnimation,
-  useGlyphcssCamera: () => useGlyphcssCamera,
-  useGlyphcssMesh: () => useGlyphcssMesh,
-  useGlyphcssSceneContext: () => useGlyphcssSceneContext
+  BASE_TILE: () => import_core4.BASE_TILE,
+  CAMERA_BACKFACE_CULL_EPS: () => import_core4.CAMERA_BACKFACE_CULL_EPS,
+  DEFAULT_CAMERA_STATE: () => import_core4.DEFAULT_CAMERA_STATE,
+  DEFAULT_PROJECTION: () => import_core4.DEFAULT_PROJECTION,
+  GlyphAxesHelper: () => GlyphAxesHelper,
+  GlyphCamera: () => GlyphOrthographicCamera,
+  GlyphCameraContext: () => GlyphCameraContext,
+  GlyphDirectionalLightHelper: () => GlyphDirectionalLightHelper,
+  GlyphFirstPersonControls: () => GlyphFirstPersonControls,
+  GlyphGround: () => GlyphGround,
+  GlyphHotspot: () => GlyphHotspot,
+  GlyphMapControls: () => GlyphMapControls,
+  GlyphMesh: () => GlyphMesh,
+  GlyphOrbitControls: () => GlyphOrbitControls,
+  GlyphOrthographicCamera: () => GlyphOrthographicCamera,
+  GlyphPerspectiveCamera: () => GlyphPerspectiveCamera,
+  GlyphScene: () => GlyphScene,
+  GlyphSceneContext: () => GlyphSceneContext,
+  LoopOnce: () => import_core4.LoopOnce,
+  LoopPingPong: () => import_core4.LoopPingPong,
+  LoopRepeat: () => import_core4.LoopRepeat,
+  VOXEL_CAMERA_CULL_AXIS_EPS: () => import_core4.VOXEL_CAMERA_CULL_AXIS_EPS,
+  VOXEL_CAMERA_CULL_NORMAL_LIMIT: () => import_core4.VOXEL_CAMERA_CULL_NORMAL_LIMIT,
+  antiprismPolygons: () => import_core4.antiprismPolygons,
+  arrowPolygons: () => import_core4.arrowPolygons,
+  axesHelperPolygons: () => import_core4.axesHelperPolygons,
+  bakeSolidTextureSampledPolygons: () => import_core4.bakeSolidTextureSampledPolygons,
+  bakeSolidTextureSamples: () => import_core4.bakeSolidTextureSamples,
+  bipyramidPolygons: () => import_core4.bipyramidPolygons,
+  buildSceneContext: () => import_core4.buildSceneContext,
+  cameraCullNormalGroups: () => import_core4.cameraCullNormalGroups,
+  cameraCullNormalGroupsFromPolygons: () => import_core4.cameraCullNormalGroupsFromPolygons,
+  cameraCullNormalKey: () => import_core4.cameraCullNormalKey,
+  cameraCullVisibleSignature: () => import_core4.cameraCullVisibleSignature,
+  cameraFacingDepth: () => import_core4.cameraFacingDepth,
+  clampChannel: () => import_core4.clampChannel,
+  computeSceneBbox: () => import_core4.computeSceneBbox,
+  computeShapeLighting: () => import_core4.computeShapeLighting,
+  conePolygons: () => import_core4.conePolygons,
+  coverPlanarPolygons: () => import_core4.coverPlanarPolygons,
+  createGlyphAnimationMixer: () => import_core4.createGlyphAnimationMixer,
+  createIsometricCamera: () => import_core4.createIsometricCamera,
+  cubePolygons: () => import_core4.cubePolygons,
+  cuboctahedronPolygons: () => import_core4.cuboctahedronPolygons,
+  cullInteriorPolygons: () => import_core4.cullInteriorPolygons,
+  cylinderPolygons: () => import_core4.cylinderPolygons,
+  deltoidalHexecontahedronPolygons: () => import_core4.deltoidalHexecontahedronPolygons,
+  deltoidalIcositetrahedronPolygons: () => import_core4.deltoidalIcositetrahedronPolygons,
+  disdyakisDodecahedronPolygons: () => import_core4.disdyakisDodecahedronPolygons,
+  disdyakisTriacontahedronPolygons: () => import_core4.disdyakisTriacontahedronPolygons,
+  dodecahedronPolygons: () => import_core4.dodecahedronPolygons,
+  findGlyphMeshHandle: () => findGlyphMeshHandle,
+  findMeshUnderPoint: () => findMeshUnderPoint,
+  formatColor: () => import_core4.formatColor,
+  greatDodecahedronPolygons: () => import_core4.greatDodecahedronPolygons,
+  greatIcosahedronPolygons: () => import_core4.greatIcosahedronPolygons,
+  greatStellatedDodecahedronPolygons: () => import_core4.greatStellatedDodecahedronPolygons,
+  icosahedronPolygons: () => import_core4.icosahedronPolygons,
+  icosidodecahedronPolygons: () => import_core4.icosidodecahedronPolygons,
+  injectGlyphBaseStyles: () => import_glyphcss8.injectGlyphBaseStyles,
+  inverseRotateVec3: () => import_core4.inverseRotateVec3,
+  isAxisAlignedSurfaceNormal: () => import_core4.isAxisAlignedSurfaceNormal,
+  isVoxelCameraCullableNormalGroups: () => import_core4.isVoxelCameraCullableNormalGroups,
+  loadMesh: () => import_core4.loadMesh,
+  mergePolygons: () => import_core4.mergePolygons,
+  normalFacesCamera: () => import_core4.normalFacesCamera,
+  normalizeInvertMultiplier: () => import_core4.normalizeInvertMultiplier,
+  normalizePolygons: () => import_core4.normalizePolygons,
+  octahedronPolygons: () => import_core4.octahedronPolygons,
+  optimizeMeshPolygons: () => import_core4.optimizeMeshPolygons,
+  parseColor: () => import_core4.parseColor,
+  parseGltf: () => import_core4.parseGltf,
+  parseHexColor: () => import_core4.parseHexColor,
+  parseMtl: () => import_core4.parseMtl,
+  parseObj: () => import_core4.parseObj,
+  parsePureColor: () => import_core4.parsePureColor,
+  parseRgbColor: () => import_core4.parseRgbColor,
+  parseVox: () => import_core4.parseVox,
+  pentagonalHexecontahedronPolygons: () => import_core4.pentagonalHexecontahedronPolygons,
+  pentagonalIcositetrahedronPolygons: () => import_core4.pentagonalIcositetrahedronPolygons,
+  pentakisDodecahedronPolygons: () => import_core4.pentakisDodecahedronPolygons,
+  planePolygons: () => import_core4.planePolygons,
+  pointInMeshElement: () => pointInMeshElement,
+  polygonCssSurfaceNormal: () => import_core4.polygonCssSurfaceNormal,
+  polygonFaces: () => import_core4.polygonFaces,
+  polygonFacesCamera: () => import_core4.polygonFacesCamera,
+  prismPolygons: () => import_core4.prismPolygons,
+  pyramidPolygons: () => import_core4.pyramidPolygons,
+  resolveGeometry: () => import_core4.resolveGeometry,
+  rhombicDodecahedronPolygons: () => import_core4.rhombicDodecahedronPolygons,
+  rhombicTriacontahedronPolygons: () => import_core4.rhombicTriacontahedronPolygons,
+  rhombicosidodecahedronPolygons: () => import_core4.rhombicosidodecahedronPolygons,
+  rhombicuboctahedronPolygons: () => import_core4.rhombicuboctahedronPolygons,
+  ringPolygons: () => import_core4.ringPolygons,
+  ringQuadPolygons: () => import_core4.ringQuadPolygons,
+  rotateVec3: () => import_core4.rotateVec3,
+  shadeColor: () => import_core4.shadeColor,
+  smallStellatedDodecahedronPolygons: () => import_core4.smallStellatedDodecahedronPolygons,
+  snubCubePolygons: () => import_core4.snubCubePolygons,
+  snubDodecahedronPolygons: () => import_core4.snubDodecahedronPolygons,
+  spherePolygons: () => import_core4.spherePolygons,
+  tetrahedronPolygons: () => import_core4.tetrahedronPolygons,
+  tetrakisHexahedronPolygons: () => import_core4.tetrakisHexahedronPolygons,
+  torusPolygons: () => import_core4.torusPolygons,
+  trapezohedronPolygons: () => import_core4.trapezohedronPolygons,
+  triakisIcosahedronPolygons: () => import_core4.triakisIcosahedronPolygons,
+  triakisOctahedronPolygons: () => import_core4.triakisOctahedronPolygons,
+  triakisTetrahedronPolygons: () => import_core4.triakisTetrahedronPolygons,
+  truncatedCubePolygons: () => import_core4.truncatedCubePolygons,
+  truncatedCuboctahedronPolygons: () => import_core4.truncatedCuboctahedronPolygons,
+  truncatedDodecahedronPolygons: () => import_core4.truncatedDodecahedronPolygons,
+  truncatedIcosahedronPolygons: () => import_core4.truncatedIcosahedronPolygons,
+  truncatedIcosidodecahedronPolygons: () => import_core4.truncatedIcosidodecahedronPolygons,
+  truncatedOctahedronPolygons: () => import_core4.truncatedOctahedronPolygons,
+  truncatedTetrahedronPolygons: () => import_core4.truncatedTetrahedronPolygons,
+  useGlyphAnimation: () => useGlyphAnimation,
+  useGlyphCamera: () => useGlyphCamera,
+  useGlyphMesh: () => useGlyphMesh,
+  useGlyphSceneContext: () => useGlyphSceneContext
 });
 module.exports = __toCommonJS(src_exports);
-var import_core2 = require("@glyphcss/core");
+var import_core4 = require("@glyphcss/core");
 
-// src/glyphcss/scene/GlyphcssScene.tsx
-var import_react2 = require("react");
+// src/glyphcss/scene/GlyphScene.tsx
+var import_react3 = require("react");
 var import_glyphcss = require("glyphcss");
 
-// src/glyphcss/scene/context.ts
+// src/glyphcss/camera/context.ts
 var import_react = require("react");
-var GlyphcssSceneContext = (0, import_react.createContext)(null);
-function useGlyphcssSceneContext() {
-  const ctx = (0, import_react.useContext)(GlyphcssSceneContext);
+var GlyphCameraContext = (0, import_react.createContext)(null);
+function useGlyphCamera() {
+  const ctx = (0, import_react.useContext)(GlyphCameraContext);
+  if (!ctx) {
+    throw new Error("glyphcss: camera hook must be used inside a GlyphCamera.");
+  }
+  return ctx;
+}
+function useGlyphCameraContext() {
+  const ctx = (0, import_react.useContext)(GlyphCameraContext);
+  if (!ctx) {
+    throw new Error(
+      "glyphcss: GlyphScene must be placed inside a GlyphPerspectiveCamera or GlyphOrthographicCamera."
+    );
+  }
+  return ctx;
+}
+
+// src/glyphcss/scene/context.ts
+var import_react2 = require("react");
+var GlyphSceneContext = (0, import_react2.createContext)(null);
+function useGlyphSceneContext() {
+  const ctx = (0, import_react2.useContext)(GlyphSceneContext);
   if (!ctx) {
-    throw new Error("glyphcss: GlyphcssMesh must be used inside a GlyphcssScene.");
+    throw new Error("glyphcss: component must be used inside a GlyphScene.");
   }
   return ctx;
 }
-var GlyphcssMeshContext = (0, import_react.createContext)(null);
+var GlyphMeshContext = (0, import_react2.createContext)(null);
 
-// src/glyphcss/scene/GlyphcssScene.tsx
+// src/glyphcss/scene/GlyphScene.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function GlyphcssSceneInner({
+function GlyphSceneInner({
   mode,
   glyphPalette,
   useColors,
@@ -121,13 +190,17 @@ function GlyphcssSceneInner({
   cellAspect,
   directionalLight,
   ambientLight,
+  smoothShading,
+  creaseAngle,
+  autoSize,
   className,
   style,
   children
 }) {
-  const hostRef = (0, import_react2.useRef)(null);
-  const sceneRef = (0, import_react2.useRef)(null);
-  const initialOpts = (0, import_react2.useMemo)(() => ({
+  const { cameraRef, sceneRerenderRef } = useGlyphCameraContext();
+  const hostRef = (0, import_react3.useRef)(null);
+  const sceneRef = (0, import_react3.useRef)(null);
+  const initialOpts = (0, import_react3.useMemo)(() => ({
     mode,
     glyphPalette,
     useColors,
@@ -135,20 +208,27 @@ function GlyphcssSceneInner({
     rows,
     cellAspect,
     directionalLight,
-    ambientLight
+    ambientLight,
+    smoothShading,
+    creaseAngle,
+    autoSize,
+    camera: cameraRef.current ?? void 0
   }), []);
-  const hostCallbackRef = (0, import_react2.useCallback)((el) => {
+  const hostCallbackRef = (0, import_react3.useCallback)((el) => {
     if (el && !sceneRef.current) {
       hostRef.current = el;
-      (0, import_glyphcss.injectGlyphcssBaseStyles)(el.ownerDocument ?? void 0);
-      sceneRef.current = (0, import_glyphcss.createGlyphcssScene)(el, initialOpts);
+      (0, import_glyphcss.injectGlyphBaseStyles)(el.ownerDocument ?? void 0);
+      const camera = cameraRef.current ?? void 0;
+      sceneRef.current = (0, import_glyphcss.createGlyphScene)(el, { ...initialOpts, camera });
+      sceneRerenderRef.current = () => sceneRef.current?.rerender();
     } else if (!el && sceneRef.current) {
       sceneRef.current.destroy();
       sceneRef.current = null;
+      sceneRerenderRef.current = null;
       hostRef.current = null;
     }
-  }, [initialOpts]);
-  (0, import_react2.useEffect)(() => {
+  }, [initialOpts, cameraRef, sceneRerenderRef]);
+  (0, import_react3.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
     const partial = {};
@@ -160,18 +240,22 @@ function GlyphcssSceneInner({
     if (cellAspect !== void 0) partial.cellAspect = cellAspect;
     if (directionalLight !== void 0) partial.directionalLight = directionalLight;
     if (ambientLight !== void 0) partial.ambientLight = ambientLight;
+    if (smoothShading !== void 0) partial.smoothShading = smoothShading;
+    if (creaseAngle !== void 0) partial.creaseAngle = creaseAngle;
+    if (autoSize !== void 0) partial.autoSize = autoSize;
     if (Object.keys(partial).length > 0) {
       scene.setOptions(partial);
     }
-  }, [mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight]);
-  const ctxValue = (0, import_react2.useMemo)(() => ({ sceneRef }), [sceneRef]);
-  const computedClassName = `glyphcss-host${className ? ` ${className}` : ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlyphcssSceneContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: hostCallbackRef, className: computedClassName, style, children }) });
+  }, [mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight, smoothShading, creaseAngle, autoSize]);
+  const ctxValue = (0, import_react3.useMemo)(() => ({ sceneRef }), [sceneRef]);
+  const computedClassName = `glyph-host${className ? ` ${className}` : ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlyphSceneContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: hostCallbackRef, className: computedClassName, style, children }) });
 }
-var GlyphcssScene = (0, import_react2.memo)(GlyphcssSceneInner);
+var GlyphScene = (0, import_react3.memo)(GlyphSceneInner);
 
-// src/glyphcss/scene/GlyphcssMesh.tsx
-var import_react3 = require("react");
+// src/glyphcss/scene/GlyphMesh.tsx
+var import_react4 = require("react");
+var import_core = require("@glyphcss/core");
 
 // src/glyphcss/scene/events.ts
 var MESH_REGISTRY = /* @__PURE__ */ new WeakMap();
@@ -181,7 +265,7 @@ function registerMeshElement(el, handle) {
 function unregisterMeshElement(el) {
   MESH_REGISTRY.delete(el);
 }
-function findGlyphcssMeshHandle(el) {
+function findGlyphMeshHandle(el) {
   let cur = el;
   while (cur) {
     if (cur instanceof HTMLElement) {
@@ -192,12 +276,33 @@ function findGlyphcssMeshHandle(el) {
   }
   return null;
 }
+function pointInMeshElement(meshEl, clientX, clientY) {
+  const r = meshEl.getBoundingClientRect();
+  if (r.width <= 0 || r.height <= 0) return false;
+  return clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom;
+}
+function findMeshUnderPoint(clientX, clientY, filter) {
+  if (typeof document === "undefined") return null;
+  const meshEls = Array.from(
+    document.querySelectorAll(".glyph-mesh")
+  );
+  for (const meshEl of meshEls) {
+    if (filter && !filter(meshEl)) continue;
+    const handle = findGlyphMeshHandle(meshEl);
+    if (!handle) continue;
+    if (pointInMeshElement(meshEl, clientX, clientY)) return handle;
+  }
+  return null;
+}
 
-// src/glyphcss/scene/GlyphcssMesh.tsx
+// src/glyphcss/scene/GlyphMesh.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function GlyphcssMeshInner({
+function GlyphMeshInner({
   id,
-  triangles: trianglesProp,
+  polygons: polygonsProp,
+  geometry,
+  size = 1,
+  color,
   position,
   scale,
   rotation,
@@ -205,56 +310,97 @@ function GlyphcssMeshInner({
   style,
   children
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
-  const meshRef = (0, import_react3.useRef)(null);
-  const wrapperRef = (0, import_react3.useRef)(null);
-  const triangles = (0, import_react3.useMemo)(() => trianglesProp ?? [], [trianglesProp]);
-  const transform = (0, import_react3.useMemo)(() => ({
+  const { sceneRef } = useGlyphSceneContext();
+  const meshRef = (0, import_react4.useRef)(null);
+  const wrapperRef = (0, import_react4.useRef)(null);
+  const polygons = (0, import_react4.useMemo)(() => {
+    if (polygonsProp !== void 0) return polygonsProp;
+    if (geometry !== void 0) return (0, import_core.resolveGeometry)(geometry, { size, color });
+    return [];
+  }, [polygonsProp, geometry, size, color]);
+  const transform = (0, import_react4.useMemo)(() => ({
+    id,
     position,
     scale,
     rotation
-  }), [position, scale, rotation]);
-  (0, import_react3.useEffect)(() => {
+  }), [id, position, scale, rotation]);
+  (0, import_react4.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
-    const handle = scene.add(triangles, transform);
+    const handle = scene.add(polygons, transform);
     meshRef.current = handle;
     return () => {
       handle.dispose();
       meshRef.current = null;
     };
-  }, [sceneRef, triangles]);
-  (0, import_react3.useEffect)(() => {
+  }, [sceneRef, polygons]);
+  (0, import_react4.useEffect)(() => {
     const mesh = meshRef.current;
     if (!mesh) return;
     mesh.setTransform(transform);
     sceneRef.current?.rerender();
   }, [sceneRef, transform]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const el = wrapperRef.current;
     const handle = meshRef.current;
     if (!el || !handle) return;
     registerMeshElement(el, handle);
     return () => unregisterMeshElement(el);
   });
-  const computedClassName = `glyphcss-mesh${className ? ` ${className}` : ""}`;
+  const computedClassName = `glyph-mesh${className ? ` ${className}` : ""}`;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       ref: wrapperRef,
-      "data-glyphcss-mesh-id": id,
+      "data-glyph-mesh-id": id,
       className: computedClassName,
       style,
       children
     }
   );
 }
-var GlyphcssMesh = (0, import_react3.memo)(GlyphcssMeshInner);
+var GlyphMesh = (0, import_react4.memo)(GlyphMeshInner);
 
-// src/glyphcss/scene/GlyphcssHotspot.tsx
-var import_react4 = require("react");
+// src/glyphcss/scene/GlyphGround.tsx
+var import_react5 = require("react");
+var import_core2 = require("@glyphcss/core");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function GlyphcssHotspotInner({
+function GlyphGroundInner({
+  size = 5,
+  color = "#444444",
+  position = [0, -0.5, 0],
+  rotation,
+  id,
+  className,
+  style
+}) {
+  const polygons = (0, import_react5.useMemo)(
+    () => (0, import_core2.planePolygons)({
+      axis: 1,
+      size,
+      offset: 0,
+      color
+    }),
+    [size, color]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    GlyphMesh,
+    {
+      id,
+      polygons,
+      position,
+      rotation,
+      className,
+      style
+    }
+  );
+}
+var GlyphGround = (0, import_react5.memo)(GlyphGroundInner);
+
+// src/glyphcss/scene/GlyphHotspot.tsx
+var import_react6 = require("react");
+var import_react_dom = require("react-dom");
+function GlyphHotspotInner({
   id,
   at,
   size,
@@ -262,57 +408,61 @@ function GlyphcssHotspotInner({
   className,
   children
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
-  const hotspotRef = (0, import_react4.useRef)(null);
-  const onClickRef = (0, import_react4.useRef)(onClick);
+  const { sceneRef } = useGlyphSceneContext();
+  const hotspotRef = (0, import_react6.useRef)(null);
+  const onClickRef = (0, import_react6.useRef)(onClick);
   onClickRef.current = onClick;
-  const atKey = (0, import_react4.useMemo)(() => at.join(","), [at]);
+  const [overlayEl, setOverlayEl] = (0, import_react6.useState)(null);
+  const atKey = (0, import_react6.useMemo)(() => at.join(","), [at]);
   const sizeKey = size ? size.join(",") : "";
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
     const handle = scene.addHotspot(
       { id, at, size },
-      () => {
-      }
+      () => onClickRef.current?.({})
     );
     hotspotRef.current = handle;
+    setOverlayEl(handle.el);
     return () => {
       handle.remove();
       hotspotRef.current = null;
+      setOverlayEl(null);
     };
   }, [sceneRef, id, atKey, sizeKey]);
-  if (!children && !onClick && !className) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
-    {
-      "data-glyphcss-hotspot-id": id,
-      className,
-      style: { display: "contents" },
-      onClick,
-      children
-    }
-  );
+  (0, import_react6.useEffect)(() => {
+    const el = overlayEl;
+    if (!el || !onClick) return;
+    const handler = (e) => onClick(e);
+    el.addEventListener("click", handler);
+    return () => el.removeEventListener("click", handler);
+  }, [overlayEl, onClick]);
+  (0, import_react6.useEffect)(() => {
+    if (!overlayEl) return;
+    overlayEl.className = `glyph-hotspot${className ? ` ${className}` : ""}`;
+  }, [overlayEl, className]);
+  if (!children || !overlayEl) return null;
+  return (0, import_react_dom.createPortal)(children, overlayEl);
 }
-var GlyphcssHotspot = (0, import_react4.memo)(GlyphcssHotspotInner);
+var GlyphHotspot = (0, import_react6.memo)(GlyphHotspotInner);
 
-// src/glyphcss/scene/useGlyphcssMesh.ts
-var import_react5 = require("react");
-function useGlyphcssMesh(triangles, options) {
-  const { sceneRef } = useGlyphcssSceneContext();
-  const meshRef = (0, import_react5.useRef)(null);
-  const [loading] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+// src/glyphcss/scene/useGlyphMesh.ts
+var import_react7 = require("react");
+function useGlyphMesh(polygons, options) {
+  const { sceneRef } = useGlyphSceneContext();
+  const meshRef = (0, import_react7.useRef)(null);
+  const [loading] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
-    const handle = scene.add(triangles, options?.transform);
+    const handle = scene.add(polygons, options?.transform);
     meshRef.current = handle;
     return () => {
       handle.dispose();
       meshRef.current = null;
     };
-  }, [sceneRef, triangles]);
-  (0, import_react5.useEffect)(() => {
+  }, [sceneRef, polygons]);
+  (0, import_react7.useEffect)(() => {
     const mesh = meshRef.current;
     if (!mesh) return;
     if (options?.transform) {
@@ -323,51 +473,30 @@ function useGlyphcssMesh(triangles, options) {
   return { meshRef, loading };
 }
 
-// src/glyphcss/camera/GlyphcssPerspectiveCamera.tsx
-var import_react7 = require("react");
+// src/glyphcss/camera/GlyphOrthographicCamera.tsx
+var import_react8 = require("react");
 var import_glyphcss2 = require("glyphcss");
-
-// src/glyphcss/camera/context.ts
-var import_react6 = require("react");
-var GlyphcssCameraContext = (0, import_react6.createContext)(null);
-function useGlyphcssCamera() {
-  const ctx = (0, import_react6.useContext)(GlyphcssCameraContext);
-  if (!ctx) {
-    throw new Error("glyphcss: camera hook must be used inside a GlyphcssCamera.");
-  }
-  return ctx;
-}
-
-// src/glyphcss/camera/GlyphcssPerspectiveCamera.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function GlyphcssPerspectiveCameraInner({
+function GlyphOrthographicCameraInner({
   rotX,
   rotY,
-  distance,
-  scale,
-  stretch,
+  zoom,
   center,
+  className,
+  style,
   children
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
-  const cameraRef = (0, import_react7.useRef)(null);
+  const cameraRef = (0, import_react8.useRef)(null);
+  const sceneRerenderRef = (0, import_react8.useRef)(null);
   if (!cameraRef.current) {
     const opts = {};
     if (rotX !== void 0) opts.rotX = rotX;
     if (rotY !== void 0) opts.rotY = rotY;
-    if (distance !== void 0) opts.distance = distance;
-    if (scale !== void 0) opts.scale = scale;
-    if (stretch !== void 0) opts.stretch = stretch;
+    if (zoom !== void 0) opts.zoom = zoom;
     if (center !== void 0) opts.center = center;
-    cameraRef.current = (0, import_glyphcss2.createGlyphcssPerspectiveCamera)(opts);
+    cameraRef.current = (0, import_glyphcss2.createGlyphOrthographicCamera)(opts);
   }
-  (0, import_react7.useEffect)(() => {
-    const scene = sceneRef.current;
-    if (!scene || !cameraRef.current) return;
-    scene.setOptions({ camera: cameraRef.current });
-    scene.rerender();
-  }, [sceneRef]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const camera = cameraRef.current;
     if (!camera) return;
     let dirty = false;
@@ -379,56 +508,48 @@ function GlyphcssPerspectiveCameraInner({
       camera.rotY = rotY;
       dirty = true;
     }
-    if (distance !== void 0 && camera.distance !== distance) {
-      camera.distance = distance;
-      dirty = true;
-    }
-    if (scale !== void 0 && camera.scale !== scale) {
-      camera.scale = scale;
-      dirty = true;
-    }
-    if (stretch !== void 0 && camera.stretch !== stretch) {
-      camera.stretch = stretch;
+    if (zoom !== void 0 && camera.zoom !== zoom) {
+      camera.zoom = zoom;
       dirty = true;
     }
     if (dirty) {
-      sceneRef.current?.rerender();
+      sceneRerenderRef.current?.();
     }
   });
-  const rerender = () => sceneRef.current?.rerender();
-  const ctxValue = (0, import_react7.useMemo)(() => ({ cameraRef, rerender }), [cameraRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GlyphcssCameraContext.Provider, { value: ctxValue, children });
+  const rerender = (0, import_react8.useMemo)(() => () => sceneRerenderRef.current?.(), []);
+  const ctxValue = (0, import_react8.useMemo)(() => ({ cameraRef, rerender, sceneRerenderRef }), [cameraRef, rerender]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GlyphCameraContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style, children }) });
 }
-var GlyphcssPerspectiveCamera = (0, import_react7.memo)(GlyphcssPerspectiveCameraInner);
+var GlyphOrthographicCamera = (0, import_react8.memo)(GlyphOrthographicCameraInner);
 
-// src/glyphcss/camera/GlyphcssOrthographicCamera.tsx
-var import_react8 = require("react");
+// src/glyphcss/camera/GlyphPerspectiveCamera.tsx
+var import_react9 = require("react");
 var import_glyphcss3 = require("glyphcss");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function GlyphcssOrthographicCameraInner({
+function GlyphPerspectiveCameraInner({
   rotX,
   rotY,
+  distance,
   zoom,
+  stretch,
   center,
+  className,
+  style,
   children
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
-  const cameraRef = (0, import_react8.useRef)(null);
+  const cameraRef = (0, import_react9.useRef)(null);
+  const sceneRerenderRef = (0, import_react9.useRef)(null);
   if (!cameraRef.current) {
     const opts = {};
     if (rotX !== void 0) opts.rotX = rotX;
     if (rotY !== void 0) opts.rotY = rotY;
+    if (distance !== void 0) opts.distance = distance;
     if (zoom !== void 0) opts.zoom = zoom;
+    if (stretch !== void 0) opts.stretch = stretch;
     if (center !== void 0) opts.center = center;
-    cameraRef.current = (0, import_glyphcss3.createGlyphcssOrthographicCamera)(opts);
+    cameraRef.current = (0, import_glyphcss3.createGlyphPerspectiveCamera)(opts);
   }
-  (0, import_react8.useEffect)(() => {
-    const scene = sceneRef.current;
-    if (!scene || !cameraRef.current) return;
-    scene.setOptions({ camera: cameraRef.current });
-    scene.rerender();
-  }, [sceneRef]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const camera = cameraRef.current;
     if (!camera) return;
     let dirty = false;
@@ -440,36 +561,46 @@ function GlyphcssOrthographicCameraInner({
       camera.rotY = rotY;
       dirty = true;
     }
-    if (zoom !== void 0 && camera.scale !== zoom) {
-      camera.scale = zoom;
+    if (distance !== void 0 && camera.distance !== distance) {
+      camera.distance = distance;
       dirty = true;
     }
-    if (dirty) sceneRef.current?.rerender();
+    if (zoom !== void 0 && camera.zoom !== zoom) {
+      camera.zoom = zoom;
+      dirty = true;
+    }
+    if (stretch !== void 0 && camera.stretch !== stretch) {
+      camera.stretch = stretch;
+      dirty = true;
+    }
+    if (dirty) {
+      sceneRerenderRef.current?.();
+    }
   });
-  const rerender = () => sceneRef.current?.rerender();
-  const ctxValue = (0, import_react8.useMemo)(() => ({ cameraRef, rerender }), [cameraRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GlyphcssCameraContext.Provider, { value: ctxValue, children });
+  const rerender = (0, import_react9.useMemo)(() => () => sceneRerenderRef.current?.(), []);
+  const ctxValue = (0, import_react9.useMemo)(() => ({ cameraRef, rerender, sceneRerenderRef }), [cameraRef, rerender]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GlyphCameraContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style, children }) });
 }
-var GlyphcssOrthographicCamera = (0, import_react8.memo)(GlyphcssOrthographicCameraInner);
+var GlyphPerspectiveCamera = (0, import_react9.memo)(GlyphPerspectiveCameraInner);
 
-// src/glyphcss/camera/useGlyphcssCamera.ts
-var import_react9 = require("react");
+// src/glyphcss/camera/useGlyphCamera.ts
+var import_react10 = require("react");
 var import_glyphcss4 = require("glyphcss");
 
-// src/glyphcss/controls/GlyphcssOrbitControls.tsx
-var import_react10 = require("react");
+// src/glyphcss/controls/GlyphOrbitControls.tsx
+var import_react11 = require("react");
 var import_glyphcss5 = require("glyphcss");
-function GlyphcssOrbitControls({
+function GlyphOrbitControls({
   drag = true,
   wheel = true,
   invert = false,
   animate = false
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
-  const controlsRef = (0, import_react10.useRef)(null);
-  const propsRef = (0, import_react10.useRef)({ drag, wheel, invert, animate });
+  const { sceneRef } = useGlyphSceneContext();
+  const controlsRef = (0, import_react11.useRef)(null);
+  const propsRef = (0, import_react11.useRef)({ drag, wheel, invert, animate });
   propsRef.current = { drag, wheel, invert, animate };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
     const opts = {
@@ -478,14 +609,14 @@ function GlyphcssOrbitControls({
       invert: propsRef.current.invert,
       animate: propsRef.current.animate === false ? false : propsRef.current.animate
     };
-    const controls = (0, import_glyphcss5.createGlyphcssOrbitControls)(scene, opts);
+    const controls = (0, import_glyphcss5.createGlyphOrbitControls)(scene, opts);
     controlsRef.current = controls;
     return () => {
       controls.destroy();
       controlsRef.current = null;
     };
   }, [sceneRef]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const controls = controlsRef.current;
     if (!controls) return;
     controls.update({ drag, wheel, invert, animate: animate === false ? false : animate });
@@ -493,20 +624,20 @@ function GlyphcssOrbitControls({
   return null;
 }
 
-// src/glyphcss/controls/GlyphcssMapControls.tsx
-var import_react11 = require("react");
+// src/glyphcss/controls/GlyphMapControls.tsx
+var import_react12 = require("react");
 var import_glyphcss6 = require("glyphcss");
-function GlyphcssMapControls({
+function GlyphMapControls({
   drag = true,
   wheel = true,
   invert = false,
   animate = false
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
-  const controlsRef = (0, import_react11.useRef)(null);
-  const propsRef = (0, import_react11.useRef)({ drag, wheel, invert, animate });
+  const { sceneRef } = useGlyphSceneContext();
+  const controlsRef = (0, import_react12.useRef)(null);
+  const propsRef = (0, import_react12.useRef)({ drag, wheel, invert, animate });
   propsRef.current = { drag, wheel, invert, animate };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
     const opts = {
@@ -515,14 +646,14 @@ function GlyphcssMapControls({
       invert: propsRef.current.invert,
       animate: propsRef.current.animate === false ? false : propsRef.current.animate
     };
-    const controls = (0, import_glyphcss6.createGlyphcssMapControls)(scene, opts);
+    const controls = (0, import_glyphcss6.createGlyphMapControls)(scene, opts);
     controlsRef.current = controls;
     return () => {
       controls.destroy();
       controlsRef.current = null;
     };
   }, [sceneRef]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const controls = controlsRef.current;
     if (!controls) return;
     controls.update({ drag, wheel, invert, animate: animate === false ? false : animate });
@@ -530,21 +661,21 @@ function GlyphcssMapControls({
   return null;
 }
 
-// src/glyphcss/controls/GlyphcssFirstPersonControls.tsx
-var import_react12 = require("react");
+// src/glyphcss/controls/GlyphFirstPersonControls.tsx
+var import_react13 = require("react");
 var import_glyphcss7 = require("glyphcss");
-function GlyphcssFirstPersonControls({
+function GlyphFirstPersonControls({
   drag = true,
   keyboard = true,
   moveSpeed = 0.05,
   lookSpeed = 4e-3,
   invert = false
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
-  const controlsRef = (0, import_react12.useRef)(null);
-  const propsRef = (0, import_react12.useRef)({ drag, keyboard, moveSpeed, lookSpeed, invert });
+  const { sceneRef } = useGlyphSceneContext();
+  const controlsRef = (0, import_react13.useRef)(null);
+  const propsRef = (0, import_react13.useRef)({ drag, keyboard, moveSpeed, lookSpeed, invert });
   propsRef.current = { drag, keyboard, moveSpeed, lookSpeed, invert };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
     const opts = {
@@ -554,14 +685,14 @@ function GlyphcssFirstPersonControls({
       lookSpeed: propsRef.current.lookSpeed,
       invert: propsRef.current.invert
     };
-    const controls = (0, import_glyphcss7.createGlyphcssFirstPersonControls)(scene, opts);
+    const controls = (0, import_glyphcss7.createGlyphFirstPersonControls)(scene, opts);
     controlsRef.current = controls;
     return () => {
       controls.destroy();
       controlsRef.current = null;
     };
   }, [sceneRef]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const controls = controlsRef.current;
     if (!controls) return;
     controls.update({ drag, keyboard, moveSpeed, lookSpeed, invert });
@@ -569,46 +700,46 @@ function GlyphcssFirstPersonControls({
   return null;
 }
 
-// src/glyphcss/helpers/GlyphcssAxesHelper.tsx
-var import_react13 = require("react");
-function axisTriangles(size) {
+// src/glyphcss/helpers/GlyphAxesHelper.tsx
+var import_react14 = require("react");
+function axisPolygons(size) {
   const s = size;
   const t = s * 0.05;
-  const triangles = [];
+  const polygons = [];
   function addBar(a, b, color) {
     const v0 = [a[0] - t, a[1] - t, a[2]];
     const v1 = [b[0] - t, b[1] - t, b[2]];
     const v2 = [b[0] + t, b[1] + t, b[2]];
     const v3 = [a[0] + t, a[1] + t, a[2]];
-    triangles.push({ vertices: [v0, v1, v2], color });
-    triangles.push({ vertices: [v0, v2, v3], color });
+    polygons.push({ vertices: [v0, v1, v2], color });
+    polygons.push({ vertices: [v0, v2, v3], color });
   }
   addBar([0, 0, 0], [s, 0, 0], "#ff0000");
   addBar([0, 0, 0], [0, s, 0], "#00ff00");
   addBar([0, 0, 0], [0, 0, s], "#0000ff");
-  return triangles;
+  return polygons;
 }
-function GlyphcssAxesHelperInner({ size = 1 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
-  const meshRef = (0, import_react13.useRef)(null);
-  const triangles = (0, import_react13.useMemo)(() => axisTriangles(size), [size]);
-  (0, import_react13.useEffect)(() => {
+function GlyphAxesHelperInner({ size = 1 }) {
+  const { sceneRef } = useGlyphSceneContext();
+  const meshRef = (0, import_react14.useRef)(null);
+  const polygons = (0, import_react14.useMemo)(() => axisPolygons(size), [size]);
+  (0, import_react14.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
-    const handle = scene.add(triangles);
+    const handle = scene.add(polygons);
     meshRef.current = handle;
     return () => {
       handle.dispose();
       meshRef.current = null;
     };
-  }, [sceneRef, triangles]);
+  }, [sceneRef, polygons]);
   return null;
 }
-var GlyphcssAxesHelper = (0, import_react13.memo)(GlyphcssAxesHelperInner);
+var GlyphAxesHelper = (0, import_react14.memo)(GlyphAxesHelperInner);
 
-// src/glyphcss/helpers/GlyphcssDirectionalLightHelper.tsx
-var import_react14 = require("react");
-function lightMarkerTriangles(position, color, size) {
+// src/glyphcss/helpers/GlyphDirectionalLightHelper.tsx
+var import_react15 = require("react");
+function lightMarkerPolygons(position, color, size) {
   const [px, py, pz] = position;
   const s = size;
   const top = [px, py, pz + s];
@@ -628,46 +759,46 @@ function lightMarkerTriangles(position, color, size) {
     { vertices: [bot, right, back], color }
   ];
 }
-function GlyphcssDirectionalLightHelperInner({
+function GlyphDirectionalLightHelperInner({
   position = [1, 1, 1],
   color = "#ffff00",
   size = 0.1
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
-  const meshRef = (0, import_react14.useRef)(null);
-  const triangles = (0, import_react14.useMemo)(
-    () => lightMarkerTriangles(position, color, size),
+  const { sceneRef } = useGlyphSceneContext();
+  const meshRef = (0, import_react15.useRef)(null);
+  const polygons = (0, import_react15.useMemo)(
+    () => lightMarkerPolygons(position, color, size),
     [position, color, size]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
-    const handle = scene.add(triangles);
+    const handle = scene.add(polygons);
     meshRef.current = handle;
     return () => {
       handle.dispose();
       meshRef.current = null;
     };
-  }, [sceneRef, triangles]);
+  }, [sceneRef, polygons]);
   return null;
 }
-var GlyphcssDirectionalLightHelper = (0, import_react14.memo)(GlyphcssDirectionalLightHelperInner);
+var GlyphDirectionalLightHelper = (0, import_react15.memo)(GlyphDirectionalLightHelperInner);
 
 // src/glyphcss/styles/index.ts
 var import_glyphcss8 = require("glyphcss");
 
-// src/animation/useGlyphcssAnimation.ts
-var import_react15 = require("react");
-var import_core = require("@glyphcss/core");
+// src/animation/useGlyphAnimation.ts
+var import_react16 = require("react");
+var import_core3 = require("@glyphcss/core");
 function resolveRoot(rootArg) {
   if (!rootArg) return null;
   if ("current" in rootArg) return rootArg.current;
   return rootArg;
 }
-function useGlyphcssAnimation(clips, controller, root) {
-  const internalRef = (0, import_react15.useRef)(null);
-  const mixerRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
+function useGlyphAnimation(clips, controller, root) {
+  const internalRef = (0, import_react16.useRef)(null);
+  const mixerRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     if (!clips || clips.length === 0 || !controller) {
       mixerRef.current = null;
       return;
@@ -677,14 +808,14 @@ function useGlyphcssAnimation(clips, controller, root) {
       mixerRef.current = null;
       return;
     }
-    mixerRef.current = (0, import_core.createGlyphcssAnimationMixer)(resolvedRoot, controller);
+    mixerRef.current = (0, import_core3.createGlyphAnimationMixer)(resolvedRoot, controller);
     return () => {
       mixerRef.current?.stopAllAction();
       mixerRef.current?.uncacheRoot();
       mixerRef.current = null;
     };
   }, [clips, controller]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!clips || clips.length === 0 || !controller) return;
     let rafId;
     let lastTime = null;
@@ -707,7 +838,7 @@ function useGlyphcssAnimation(clips, controller, root) {
   }, [clips, controller]);
   const resolvedClips = clips ?? [];
   const resolvedNames = resolvedClips.map((c) => c.name);
-  const actions = (0, import_react15.useMemo)(() => {
+  const actions = (0, import_react16.useMemo)(() => {
     const target = {};
     for (const clip of resolvedClips) {
       Object.defineProperty(target, clip.name, {
@@ -739,28 +870,31 @@ function useGlyphcssAnimation(clips, controller, root) {
   CAMERA_BACKFACE_CULL_EPS,
   DEFAULT_CAMERA_STATE,
   DEFAULT_PROJECTION,
-  GlyphcssAxesHelper,
-  GlyphcssCamera,
-  GlyphcssCameraContext,
-  GlyphcssDirectionalLightHelper,
-  GlyphcssFirstPersonControls,
-  GlyphcssHotspot,
-  GlyphcssMapControls,
-  GlyphcssMesh,
-  GlyphcssOrbitControls,
-  GlyphcssOrthographicCamera,
-  GlyphcssPerspectiveCamera,
-  GlyphcssScene,
-  GlyphcssSceneContext,
+  GlyphAxesHelper,
+  GlyphCamera,
+  GlyphCameraContext,
+  GlyphDirectionalLightHelper,
+  GlyphFirstPersonControls,
+  GlyphGround,
+  GlyphHotspot,
+  GlyphMapControls,
+  GlyphMesh,
+  GlyphOrbitControls,
+  GlyphOrthographicCamera,
+  GlyphPerspectiveCamera,
+  GlyphScene,
+  GlyphSceneContext,
   LoopOnce,
   LoopPingPong,
   LoopRepeat,
   VOXEL_CAMERA_CULL_AXIS_EPS,
   VOXEL_CAMERA_CULL_NORMAL_LIMIT,
+  antiprismPolygons,
   arrowPolygons,
   axesHelperPolygons,
   bakeSolidTextureSampledPolygons,
   bakeSolidTextureSamples,
+  bipyramidPolygons,
   buildSceneContext,
   cameraCullNormalGroups,
   cameraCullNormalGroupsFromPolygons,
@@ -770,13 +904,28 @@ function useGlyphcssAnimation(clips, controller, root) {
   clampChannel,
   computeSceneBbox,
   computeShapeLighting,
+  conePolygons,
   coverPlanarPolygons,
-  createGlyphcssAnimationMixer,
+  createGlyphAnimationMixer,
   createIsometricCamera,
+  cubePolygons,
+  cuboctahedronPolygons,
   cullInteriorPolygons,
-  findGlyphcssMeshHandle,
+  cylinderPolygons,
+  deltoidalHexecontahedronPolygons,
+  deltoidalIcositetrahedronPolygons,
+  disdyakisDodecahedronPolygons,
+  disdyakisTriacontahedronPolygons,
+  dodecahedronPolygons,
+  findGlyphMeshHandle,
+  findMeshUnderPoint,
   formatColor,
-  injectGlyphcssBaseStyles,
+  greatDodecahedronPolygons,
+  greatIcosahedronPolygons,
+  greatStellatedDodecahedronPolygons,
+  icosahedronPolygons,
+  icosidodecahedronPolygons,
+  injectGlyphBaseStyles,
   inverseRotateVec3,
   isAxisAlignedSurfaceNormal,
   isVoxelCameraCullableNormalGroups,
@@ -795,14 +944,45 @@ function useGlyphcssAnimation(clips, controller, root) {
   parsePureColor,
   parseRgbColor,
   parseVox,
+  pentagonalHexecontahedronPolygons,
+  pentagonalIcositetrahedronPolygons,
+  pentakisDodecahedronPolygons,
+  planePolygons,
+  pointInMeshElement,
   polygonCssSurfaceNormal,
   polygonFaces,
   polygonFacesCamera,
+  prismPolygons,
+  pyramidPolygons,
+  resolveGeometry,
+  rhombicDodecahedronPolygons,
+  rhombicTriacontahedronPolygons,
+  rhombicosidodecahedronPolygons,
+  rhombicuboctahedronPolygons,
   ringPolygons,
+  ringQuadPolygons,
   rotateVec3,
   shadeColor,
-  useGlyphcssAnimation,
-  useGlyphcssCamera,
-  useGlyphcssMesh,
-  useGlyphcssSceneContext
+  smallStellatedDodecahedronPolygons,
+  snubCubePolygons,
+  snubDodecahedronPolygons,
+  spherePolygons,
+  tetrahedronPolygons,
+  tetrakisHexahedronPolygons,
+  torusPolygons,
+  trapezohedronPolygons,
+  triakisIcosahedronPolygons,
+  triakisOctahedronPolygons,
+  triakisTetrahedronPolygons,
+  truncatedCubePolygons,
+  truncatedCuboctahedronPolygons,
+  truncatedDodecahedronPolygons,
+  truncatedIcosahedronPolygons,
+  truncatedIcosidodecahedronPolygons,
+  truncatedOctahedronPolygons,
+  truncatedTetrahedronPolygons,
+  useGlyphAnimation,
+  useGlyphCamera,
+  useGlyphMesh,
+  useGlyphSceneContext
 });