@glyphcss/react 0.0.1 → 0.0.3

package/dist/index.js

@@ -37,41 +37,107 @@ import {
   shadeColor,
   rotateVec3,
   inverseRotateVec3,
-  axesHelperPolygons,
-  arrowPolygons,
-  ringPolygons,
+  resolveGeometry as resolveGeometry2,
+  tetrahedronPolygons,
+  cubePolygons,
   octahedronPolygons,
+  dodecahedronPolygons,
+  icosahedronPolygons,
+  smallStellatedDodecahedronPolygons,
+  greatDodecahedronPolygons,
+  greatStellatedDodecahedronPolygons,
+  greatIcosahedronPolygons,
+  cuboctahedronPolygons,
+  icosidodecahedronPolygons,
+  truncatedTetrahedronPolygons,
+  truncatedCubePolygons,
+  truncatedOctahedronPolygons,
+  truncatedDodecahedronPolygons,
+  truncatedIcosahedronPolygons,
+  truncatedCuboctahedronPolygons,
+  truncatedIcosidodecahedronPolygons,
+  rhombicuboctahedronPolygons,
+  rhombicosidodecahedronPolygons,
+  snubCubePolygons,
+  snubDodecahedronPolygons,
+  rhombicDodecahedronPolygons,
+  rhombicTriacontahedronPolygons,
+  triakisTetrahedronPolygons,
+  triakisOctahedronPolygons,
+  triakisIcosahedronPolygons,
+  tetrakisHexahedronPolygons,
+  pentakisDodecahedronPolygons,
+  disdyakisDodecahedronPolygons,
+  disdyakisTriacontahedronPolygons,
+  deltoidalIcositetrahedronPolygons,
+  deltoidalHexecontahedronPolygons,
+  pentagonalIcositetrahedronPolygons,
+  pentagonalHexecontahedronPolygons,
+  prismPolygons,
+  antiprismPolygons,
+  bipyramidPolygons,
+  trapezohedronPolygons,
+  spherePolygons,
+  cylinderPolygons,
+  conePolygons,
+  torusPolygons,
+  pyramidPolygons,
+  planePolygons as planePolygons2,
+  ringPolygons,
+  ringQuadPolygons,
+  arrowPolygons,
+  axesHelperPolygons,
   buildSceneContext,
   computeSceneBbox,
   BASE_TILE,
   DEFAULT_CAMERA_STATE,
   DEFAULT_PROJECTION,
   normalizeInvertMultiplier,
-  createGlyphcssAnimationMixer as createGlyphcssAnimationMixer2,
+  createGlyphAnimationMixer as createGlyphAnimationMixer2,
   LoopOnce,
   LoopRepeat,
   LoopPingPong
 } from "@glyphcss/core";
 
-// src/glyphcss/scene/GlyphcssScene.tsx
+// src/glyphcss/scene/GlyphScene.tsx
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { createGlyphcssScene, injectGlyphcssBaseStyles } from "glyphcss";
+import { createGlyphScene, injectGlyphBaseStyles } from "glyphcss";
 
-// src/glyphcss/scene/context.ts
+// src/glyphcss/camera/context.ts
 import { createContext, useContext } from "react";
-var GlyphcssSceneContext = createContext(null);
-function useGlyphcssSceneContext() {
-  const ctx = useContext(GlyphcssSceneContext);
+var GlyphCameraContext = createContext(null);
+function useGlyphCamera() {
+  const ctx = useContext(GlyphCameraContext);
+  if (!ctx) {
+    throw new Error("glyphcss: camera hook must be used inside a GlyphCamera.");
+  }
+  return ctx;
+}
+function useGlyphCameraContext() {
+  const ctx = useContext(GlyphCameraContext);
+  if (!ctx) {
+    throw new Error(
+      "glyphcss: GlyphScene must be placed inside a GlyphPerspectiveCamera or GlyphOrthographicCamera."
+    );
+  }
+  return ctx;
+}
+
+// src/glyphcss/scene/context.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var GlyphSceneContext = createContext2(null);
+function useGlyphSceneContext() {
+  const ctx = useContext2(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 = createContext(null);
+var GlyphMeshContext = createContext2(null);
 
-// src/glyphcss/scene/GlyphcssScene.tsx
+// src/glyphcss/scene/GlyphScene.tsx
 import { jsx } from "react/jsx-runtime";
-function GlyphcssSceneInner({
+function GlyphSceneInner({
   mode,
   glyphPalette,
   useColors,
@@ -80,10 +146,14 @@ function GlyphcssSceneInner({
   cellAspect,
   directionalLight,
   ambientLight,
+  smoothShading,
+  creaseAngle,
+  autoSize,
   className,
   style,
   children
 }) {
+  const { cameraRef, sceneRerenderRef } = useGlyphCameraContext();
   const hostRef = useRef(null);
   const sceneRef = useRef(null);
   const initialOpts = useMemo(() => ({
@@ -94,19 +164,26 @@ function GlyphcssSceneInner({
     rows,
     cellAspect,
     directionalLight,
-    ambientLight
+    ambientLight,
+    smoothShading,
+    creaseAngle,
+    autoSize,
+    camera: cameraRef.current ?? void 0
   }), []);
   const hostCallbackRef = useCallback((el) => {
     if (el && !sceneRef.current) {
       hostRef.current = el;
-      injectGlyphcssBaseStyles(el.ownerDocument ?? void 0);
-      sceneRef.current = createGlyphcssScene(el, initialOpts);
+      injectGlyphBaseStyles(el.ownerDocument ?? void 0);
+      const camera = cameraRef.current ?? void 0;
+      sceneRef.current = 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]);
+  }, [initialOpts, cameraRef, sceneRerenderRef]);
   useEffect(() => {
     const scene = sceneRef.current;
     if (!scene) return;
@@ -119,18 +196,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]);
+  }, [mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight, smoothShading, creaseAngle, autoSize]);
   const ctxValue = useMemo(() => ({ sceneRef }), [sceneRef]);
-  const computedClassName = `glyphcss-host${className ? ` ${className}` : ""}`;
-  return /* @__PURE__ */ jsx(GlyphcssSceneContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx("div", { ref: hostCallbackRef, className: computedClassName, style, children }) });
+  const computedClassName = `glyph-host${className ? ` ${className}` : ""}`;
+  return /* @__PURE__ */ jsx(GlyphSceneContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx("div", { ref: hostCallbackRef, className: computedClassName, style, children }) });
 }
-var GlyphcssScene = memo(GlyphcssSceneInner);
+var GlyphScene = memo(GlyphSceneInner);
 
-// src/glyphcss/scene/GlyphcssMesh.tsx
+// src/glyphcss/scene/GlyphMesh.tsx
 import { memo as memo2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { resolveGeometry } from "@glyphcss/core";
 
 // src/glyphcss/scene/events.ts
 var MESH_REGISTRY = /* @__PURE__ */ new WeakMap();
@@ -140,7 +221,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) {
@@ -151,12 +232,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
 import { jsx as jsx2 } from "react/jsx-runtime";
-function GlyphcssMeshInner({
+function GlyphMeshInner({
   id,
-  triangles: trianglesProp,
+  polygons: polygonsProp,
+  geometry,
+  size = 1,
+  color,
   position,
   scale,
   rotation,
@@ -164,25 +266,30 @@ function GlyphcssMeshInner({
   style,
   children
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
+  const { sceneRef } = useGlyphSceneContext();
   const meshRef = useRef2(null);
   const wrapperRef = useRef2(null);
-  const triangles = useMemo2(() => trianglesProp ?? [], [trianglesProp]);
+  const polygons = useMemo2(() => {
+    if (polygonsProp !== void 0) return polygonsProp;
+    if (geometry !== void 0) return resolveGeometry(geometry, { size, color });
+    return [];
+  }, [polygonsProp, geometry, size, color]);
   const transform = useMemo2(() => ({
+    id,
     position,
     scale,
     rotation
-  }), [position, scale, rotation]);
+  }), [id, position, scale, rotation]);
   useEffect2(() => {
     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]);
+  }, [sceneRef, polygons]);
   useEffect2(() => {
     const mesh = meshRef.current;
     if (!mesh) return;
@@ -196,24 +303,60 @@ function GlyphcssMeshInner({
     registerMeshElement(el, handle);
     return () => unregisterMeshElement(el);
   });
-  const computedClassName = `glyphcss-mesh${className ? ` ${className}` : ""}`;
+  const computedClassName = `glyph-mesh${className ? ` ${className}` : ""}`;
   return /* @__PURE__ */ jsx2(
     "div",
     {
       ref: wrapperRef,
-      "data-glyphcss-mesh-id": id,
+      "data-glyph-mesh-id": id,
       className: computedClassName,
       style,
       children
     }
   );
 }
-var GlyphcssMesh = memo2(GlyphcssMeshInner);
+var GlyphMesh = memo2(GlyphMeshInner);
 
-// src/glyphcss/scene/GlyphcssHotspot.tsx
-import { memo as memo3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3 } from "react";
+// src/glyphcss/scene/GlyphGround.tsx
+import { memo as memo3, useMemo as useMemo3 } from "react";
+import { planePolygons } from "@glyphcss/core";
 import { jsx as jsx3 } from "react/jsx-runtime";
-function GlyphcssHotspotInner({
+function GlyphGroundInner({
+  size = 5,
+  color = "#444444",
+  position = [0, -0.5, 0],
+  rotation,
+  id,
+  className,
+  style
+}) {
+  const polygons = useMemo3(
+    () => planePolygons({
+      axis: 1,
+      size,
+      offset: 0,
+      color
+    }),
+    [size, color]
+  );
+  return /* @__PURE__ */ jsx3(
+    GlyphMesh,
+    {
+      id,
+      polygons,
+      position,
+      rotation,
+      className,
+      style
+    }
+  );
+}
+var GlyphGround = memo3(GlyphGroundInner);
+
+// src/glyphcss/scene/GlyphHotspot.tsx
+import { memo as memo4, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState } from "react";
+import { createPortal } from "react-dom";
+function GlyphHotspotInner({
   id,
   at,
   size,
@@ -221,56 +364,60 @@ function GlyphcssHotspotInner({
   className,
   children
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
+  const { sceneRef } = useGlyphSceneContext();
   const hotspotRef = useRef3(null);
   const onClickRef = useRef3(onClick);
   onClickRef.current = onClick;
-  const atKey = useMemo3(() => at.join(","), [at]);
+  const [overlayEl, setOverlayEl] = useState(null);
+  const atKey = useMemo4(() => at.join(","), [at]);
   const sizeKey = size ? size.join(",") : "";
   useEffect3(() => {
     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__ */ jsx3(
-    "div",
-    {
-      "data-glyphcss-hotspot-id": id,
-      className,
-      style: { display: "contents" },
-      onClick,
-      children
-    }
-  );
+  useEffect3(() => {
+    const el = overlayEl;
+    if (!el || !onClick) return;
+    const handler = (e) => onClick(e);
+    el.addEventListener("click", handler);
+    return () => el.removeEventListener("click", handler);
+  }, [overlayEl, onClick]);
+  useEffect3(() => {
+    if (!overlayEl) return;
+    overlayEl.className = `glyph-hotspot${className ? ` ${className}` : ""}`;
+  }, [overlayEl, className]);
+  if (!children || !overlayEl) return null;
+  return createPortal(children, overlayEl);
 }
-var GlyphcssHotspot = memo3(GlyphcssHotspotInner);
+var GlyphHotspot = memo4(GlyphHotspotInner);
 
-// src/glyphcss/scene/useGlyphcssMesh.ts
-import { useEffect as useEffect4, useRef as useRef4, useState } from "react";
-function useGlyphcssMesh(triangles, options) {
-  const { sceneRef } = useGlyphcssSceneContext();
+// src/glyphcss/scene/useGlyphMesh.ts
+import { useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
+function useGlyphMesh(polygons, options) {
+  const { sceneRef } = useGlyphSceneContext();
   const meshRef = useRef4(null);
-  const [loading] = useState(false);
+  const [loading] = useState2(false);
   useEffect4(() => {
     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]);
+  }, [sceneRef, polygons]);
   useEffect4(() => {
     const mesh = meshRef.current;
     if (!mesh) return;
@@ -282,50 +429,29 @@ function useGlyphcssMesh(triangles, options) {
   return { meshRef, loading };
 }
 
-// src/glyphcss/camera/GlyphcssPerspectiveCamera.tsx
-import { memo as memo4, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef5 } from "react";
-import { createGlyphcssPerspectiveCamera } from "glyphcss";
-
-// src/glyphcss/camera/context.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var GlyphcssCameraContext = createContext2(null);
-function useGlyphcssCamera() {
-  const ctx = useContext2(GlyphcssCameraContext);
-  if (!ctx) {
-    throw new Error("glyphcss: camera hook must be used inside a GlyphcssCamera.");
-  }
-  return ctx;
-}
-
-// src/glyphcss/camera/GlyphcssPerspectiveCamera.tsx
+// src/glyphcss/camera/GlyphOrthographicCamera.tsx
+import { memo as memo5, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5 } from "react";
+import { createGlyphOrthographicCamera } from "glyphcss";
 import { jsx as jsx4 } from "react/jsx-runtime";
-function GlyphcssPerspectiveCameraInner({
+function GlyphOrthographicCameraInner({
   rotX,
   rotY,
-  distance,
-  scale,
-  stretch,
+  zoom,
   center,
+  className,
+  style,
   children
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
   const cameraRef = useRef5(null);
+  const sceneRerenderRef = useRef5(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 = createGlyphcssPerspectiveCamera(opts);
+    cameraRef.current = createGlyphOrthographicCamera(opts);
   }
-  useEffect5(() => {
-    const scene = sceneRef.current;
-    if (!scene || !cameraRef.current) return;
-    scene.setOptions({ camera: cameraRef.current });
-    scene.rerender();
-  }, [sceneRef]);
   useEffect5(() => {
     const camera = cameraRef.current;
     if (!camera) return;
@@ -338,55 +464,47 @@ 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 = useMemo4(() => ({ cameraRef, rerender }), [cameraRef]);
-  return /* @__PURE__ */ jsx4(GlyphcssCameraContext.Provider, { value: ctxValue, children });
+  const rerender = useMemo5(() => () => sceneRerenderRef.current?.(), []);
+  const ctxValue = useMemo5(() => ({ cameraRef, rerender, sceneRerenderRef }), [cameraRef, rerender]);
+  return /* @__PURE__ */ jsx4(GlyphCameraContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx4("div", { className, style, children }) });
 }
-var GlyphcssPerspectiveCamera = memo4(GlyphcssPerspectiveCameraInner);
+var GlyphOrthographicCamera = memo5(GlyphOrthographicCameraInner);
 
-// src/glyphcss/camera/GlyphcssOrthographicCamera.tsx
-import { memo as memo5, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef6 } from "react";
-import { createGlyphcssOrthographicCamera } from "glyphcss";
+// src/glyphcss/camera/GlyphPerspectiveCamera.tsx
+import { memo as memo6, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef6 } from "react";
+import { createGlyphPerspectiveCamera } from "glyphcss";
 import { jsx as jsx5 } from "react/jsx-runtime";
-function GlyphcssOrthographicCameraInner({
+function GlyphPerspectiveCameraInner({
   rotX,
   rotY,
+  distance,
   zoom,
+  stretch,
   center,
+  className,
+  style,
   children
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
   const cameraRef = useRef6(null);
+  const sceneRerenderRef = useRef6(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 = createGlyphcssOrthographicCamera(opts);
+    cameraRef.current = createGlyphPerspectiveCamera(opts);
   }
-  useEffect6(() => {
-    const scene = sceneRef.current;
-    if (!scene || !cameraRef.current) return;
-    scene.setOptions({ camera: cameraRef.current });
-    scene.rerender();
-  }, [sceneRef]);
   useEffect6(() => {
     const camera = cameraRef.current;
     if (!camera) return;
@@ -399,36 +517,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 (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) sceneRef.current?.rerender();
+    if (dirty) {
+      sceneRerenderRef.current?.();
+    }
   });
-  const rerender = () => sceneRef.current?.rerender();
-  const ctxValue = useMemo5(() => ({ cameraRef, rerender }), [cameraRef]);
-  return /* @__PURE__ */ jsx5(GlyphcssCameraContext.Provider, { value: ctxValue, children });
+  const rerender = useMemo6(() => () => sceneRerenderRef.current?.(), []);
+  const ctxValue = useMemo6(() => ({ cameraRef, rerender, sceneRerenderRef }), [cameraRef, rerender]);
+  return /* @__PURE__ */ jsx5(GlyphCameraContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx5("div", { className, style, children }) });
 }
-var GlyphcssOrthographicCamera = memo5(GlyphcssOrthographicCameraInner);
+var GlyphPerspectiveCamera = memo6(GlyphPerspectiveCameraInner);
 
-// src/glyphcss/camera/useGlyphcssCamera.ts
-import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef7 } from "react";
-import { createGlyphcssPerspectiveCamera as createGlyphcssPerspectiveCamera2 } from "glyphcss";
+// src/glyphcss/camera/useGlyphCamera.ts
+import { useCallback as useCallback2, useRef as useRef7 } from "react";
+import { createGlyphPerspectiveCamera as createGlyphPerspectiveCamera2 } from "glyphcss";
 
-// src/glyphcss/controls/GlyphcssOrbitControls.tsx
-import { useEffect as useEffect8, useRef as useRef8 } from "react";
-import { createGlyphcssOrbitControls } from "glyphcss";
-function GlyphcssOrbitControls({
+// src/glyphcss/controls/GlyphOrbitControls.tsx
+import { useEffect as useEffect7, useRef as useRef8 } from "react";
+import { createGlyphOrbitControls } from "glyphcss";
+function GlyphOrbitControls({
   drag = true,
   wheel = true,
   invert = false,
   animate = false
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
+  const { sceneRef } = useGlyphSceneContext();
   const controlsRef = useRef8(null);
   const propsRef = useRef8({ drag, wheel, invert, animate });
   propsRef.current = { drag, wheel, invert, animate };
-  useEffect8(() => {
+  useEffect7(() => {
     const scene = sceneRef.current;
     if (!scene) return;
     const opts = {
@@ -437,14 +565,14 @@ function GlyphcssOrbitControls({
       invert: propsRef.current.invert,
       animate: propsRef.current.animate === false ? false : propsRef.current.animate
     };
-    const controls = createGlyphcssOrbitControls(scene, opts);
+    const controls = createGlyphOrbitControls(scene, opts);
     controlsRef.current = controls;
     return () => {
       controls.destroy();
       controlsRef.current = null;
     };
   }, [sceneRef]);
-  useEffect8(() => {
+  useEffect7(() => {
     const controls = controlsRef.current;
     if (!controls) return;
     controls.update({ drag, wheel, invert, animate: animate === false ? false : animate });
@@ -452,20 +580,20 @@ function GlyphcssOrbitControls({
   return null;
 }
 
-// src/glyphcss/controls/GlyphcssMapControls.tsx
-import { useEffect as useEffect9, useRef as useRef9 } from "react";
-import { createGlyphcssMapControls } from "glyphcss";
-function GlyphcssMapControls({
+// src/glyphcss/controls/GlyphMapControls.tsx
+import { useEffect as useEffect8, useRef as useRef9 } from "react";
+import { createGlyphMapControls } from "glyphcss";
+function GlyphMapControls({
   drag = true,
   wheel = true,
   invert = false,
   animate = false
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
+  const { sceneRef } = useGlyphSceneContext();
   const controlsRef = useRef9(null);
   const propsRef = useRef9({ drag, wheel, invert, animate });
   propsRef.current = { drag, wheel, invert, animate };
-  useEffect9(() => {
+  useEffect8(() => {
     const scene = sceneRef.current;
     if (!scene) return;
     const opts = {
@@ -474,14 +602,14 @@ function GlyphcssMapControls({
       invert: propsRef.current.invert,
       animate: propsRef.current.animate === false ? false : propsRef.current.animate
     };
-    const controls = createGlyphcssMapControls(scene, opts);
+    const controls = createGlyphMapControls(scene, opts);
     controlsRef.current = controls;
     return () => {
       controls.destroy();
       controlsRef.current = null;
     };
   }, [sceneRef]);
-  useEffect9(() => {
+  useEffect8(() => {
     const controls = controlsRef.current;
     if (!controls) return;
     controls.update({ drag, wheel, invert, animate: animate === false ? false : animate });
@@ -489,21 +617,21 @@ function GlyphcssMapControls({
   return null;
 }
 
-// src/glyphcss/controls/GlyphcssFirstPersonControls.tsx
-import { useEffect as useEffect10, useRef as useRef10 } from "react";
-import { createGlyphcssFirstPersonControls } from "glyphcss";
-function GlyphcssFirstPersonControls({
+// src/glyphcss/controls/GlyphFirstPersonControls.tsx
+import { useEffect as useEffect9, useRef as useRef10 } from "react";
+import { createGlyphFirstPersonControls } from "glyphcss";
+function GlyphFirstPersonControls({
   drag = true,
   keyboard = true,
   moveSpeed = 0.05,
   lookSpeed = 4e-3,
   invert = false
 }) {
-  const { sceneRef } = useGlyphcssSceneContext();
+  const { sceneRef } = useGlyphSceneContext();
   const controlsRef = useRef10(null);
   const propsRef = useRef10({ drag, keyboard, moveSpeed, lookSpeed, invert });
   propsRef.current = { drag, keyboard, moveSpeed, lookSpeed, invert };
-  useEffect10(() => {
+  useEffect9(() => {
     const scene = sceneRef.current;
     if (!scene) return;
     const opts = {
@@ -513,14 +641,14 @@ function GlyphcssFirstPersonControls({
       lookSpeed: propsRef.current.lookSpeed,
       invert: propsRef.current.invert
     };
-    const controls = createGlyphcssFirstPersonControls(scene, opts);
+    const controls = createGlyphFirstPersonControls(scene, opts);
     controlsRef.current = controls;
     return () => {
       controls.destroy();
       controlsRef.current = null;
     };
   }, [sceneRef]);
-  useEffect10(() => {
+  useEffect9(() => {
     const controls = controlsRef.current;
     if (!controls) return;
     controls.update({ drag, keyboard, moveSpeed, lookSpeed, invert });
@@ -528,46 +656,46 @@ function GlyphcssFirstPersonControls({
   return null;
 }
 
-// src/glyphcss/helpers/GlyphcssAxesHelper.tsx
-import { memo as memo6, useEffect as useEffect11, useMemo as useMemo7, useRef as useRef11 } from "react";
-function axisTriangles(size) {
+// src/glyphcss/helpers/GlyphAxesHelper.tsx
+import { memo as memo7, useEffect as useEffect10, useMemo as useMemo7, useRef as useRef11 } from "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();
+function GlyphAxesHelperInner({ size = 1 }) {
+  const { sceneRef } = useGlyphSceneContext();
   const meshRef = useRef11(null);
-  const triangles = useMemo7(() => axisTriangles(size), [size]);
-  useEffect11(() => {
+  const polygons = useMemo7(() => axisPolygons(size), [size]);
+  useEffect10(() => {
     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 = memo6(GlyphcssAxesHelperInner);
+var GlyphAxesHelper = memo7(GlyphAxesHelperInner);
 
-// src/glyphcss/helpers/GlyphcssDirectionalLightHelper.tsx
-import { memo as memo7, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef12 } from "react";
-function lightMarkerTriangles(position, color, size) {
+// src/glyphcss/helpers/GlyphDirectionalLightHelper.tsx
+import { memo as memo8, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef12 } from "react";
+function lightMarkerPolygons(position, color, size) {
   const [px, py, pz] = position;
   const s = size;
   const top = [px, py, pz + s];
@@ -587,46 +715,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 { sceneRef } = useGlyphSceneContext();
   const meshRef = useRef12(null);
-  const triangles = useMemo8(
-    () => lightMarkerTriangles(position, color, size),
+  const polygons = useMemo8(
+    () => lightMarkerPolygons(position, color, size),
     [position, color, size]
   );
-  useEffect12(() => {
+  useEffect11(() => {
     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 = memo7(GlyphcssDirectionalLightHelperInner);
+var GlyphDirectionalLightHelper = memo8(GlyphDirectionalLightHelperInner);
 
 // src/glyphcss/styles/index.ts
-import { injectGlyphcssBaseStyles as injectGlyphcssBaseStyles2 } from "glyphcss";
+import { injectGlyphBaseStyles as injectGlyphBaseStyles2 } from "glyphcss";
 
-// src/animation/useGlyphcssAnimation.ts
-import { useEffect as useEffect13, useRef as useRef13, useMemo as useMemo9 } from "react";
-import { createGlyphcssAnimationMixer } from "@glyphcss/core";
+// src/animation/useGlyphAnimation.ts
+import { useEffect as useEffect12, useRef as useRef13, useMemo as useMemo9 } from "react";
+import { createGlyphAnimationMixer } from "@glyphcss/core";
 function resolveRoot(rootArg) {
   if (!rootArg) return null;
   if ("current" in rootArg) return rootArg.current;
   return rootArg;
 }
-function useGlyphcssAnimation(clips, controller, root) {
+function useGlyphAnimation(clips, controller, root) {
   const internalRef = useRef13(null);
   const mixerRef = useRef13(null);
-  useEffect13(() => {
+  useEffect12(() => {
     if (!clips || clips.length === 0 || !controller) {
       mixerRef.current = null;
       return;
@@ -636,14 +764,14 @@ function useGlyphcssAnimation(clips, controller, root) {
       mixerRef.current = null;
       return;
     }
-    mixerRef.current = createGlyphcssAnimationMixer(resolvedRoot, controller);
+    mixerRef.current = createGlyphAnimationMixer(resolvedRoot, controller);
     return () => {
       mixerRef.current?.stopAllAction();
       mixerRef.current?.uncacheRoot();
       mixerRef.current = null;
     };
   }, [clips, controller]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (!clips || clips.length === 0 || !controller) return;
     let rafId;
     let lastTime = null;
@@ -697,28 +825,31 @@ export {
   CAMERA_BACKFACE_CULL_EPS,
   DEFAULT_CAMERA_STATE,
   DEFAULT_PROJECTION,
-  GlyphcssAxesHelper,
-  GlyphcssPerspectiveCamera as GlyphcssCamera,
-  GlyphcssCameraContext,
-  GlyphcssDirectionalLightHelper,
-  GlyphcssFirstPersonControls,
-  GlyphcssHotspot,
-  GlyphcssMapControls,
-  GlyphcssMesh,
-  GlyphcssOrbitControls,
-  GlyphcssOrthographicCamera,
-  GlyphcssPerspectiveCamera,
-  GlyphcssScene,
-  GlyphcssSceneContext,
+  GlyphAxesHelper,
+  GlyphOrthographicCamera as 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,
@@ -728,13 +859,28 @@ export {
   clampChannel,
   computeSceneBbox,
   computeShapeLighting,
+  conePolygons,
   coverPlanarPolygons,
-  createGlyphcssAnimationMixer2 as createGlyphcssAnimationMixer,
+  createGlyphAnimationMixer2 as createGlyphAnimationMixer,
   createIsometricCamera,
+  cubePolygons,
+  cuboctahedronPolygons,
   cullInteriorPolygons,
-  findGlyphcssMeshHandle,
+  cylinderPolygons,
+  deltoidalHexecontahedronPolygons,
+  deltoidalIcositetrahedronPolygons,
+  disdyakisDodecahedronPolygons,
+  disdyakisTriacontahedronPolygons,
+  dodecahedronPolygons,
+  findGlyphMeshHandle,
+  findMeshUnderPoint,
   formatColor,
-  injectGlyphcssBaseStyles2 as injectGlyphcssBaseStyles,
+  greatDodecahedronPolygons,
+  greatIcosahedronPolygons,
+  greatStellatedDodecahedronPolygons,
+  icosahedronPolygons,
+  icosidodecahedronPolygons,
+  injectGlyphBaseStyles2 as injectGlyphBaseStyles,
   inverseRotateVec3,
   isAxisAlignedSurfaceNormal,
   isVoxelCameraCullableNormalGroups,
@@ -753,14 +899,45 @@ export {
   parsePureColor,
   parseRgbColor,
   parseVox,
+  pentagonalHexecontahedronPolygons,
+  pentagonalIcositetrahedronPolygons,
+  pentakisDodecahedronPolygons,
+  planePolygons2 as planePolygons,
+  pointInMeshElement,
   polygonCssSurfaceNormal,
   polygonFaces,
   polygonFacesCamera,
+  prismPolygons,
+  pyramidPolygons,
+  resolveGeometry2 as 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
 };