@glyphcss/react 0.0.1

package/dist/index.cjs

@@ -0,0 +1,808 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// 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
+});
+module.exports = __toCommonJS(src_exports);
+var import_core2 = require("@glyphcss/core");
+
+// src/glyphcss/scene/GlyphcssScene.tsx
+var import_react2 = require("react");
+var import_glyphcss = require("glyphcss");
+
+// src/glyphcss/scene/context.ts
+var import_react = require("react");
+var GlyphcssSceneContext = (0, import_react.createContext)(null);
+function useGlyphcssSceneContext() {
+  const ctx = (0, import_react.useContext)(GlyphcssSceneContext);
+  if (!ctx) {
+    throw new Error("glyphcss: GlyphcssMesh must be used inside a GlyphcssScene.");
+  }
+  return ctx;
+}
+var GlyphcssMeshContext = (0, import_react.createContext)(null);
+
+// src/glyphcss/scene/GlyphcssScene.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function GlyphcssSceneInner({
+  mode,
+  glyphPalette,
+  useColors,
+  cols,
+  rows,
+  cellAspect,
+  directionalLight,
+  ambientLight,
+  className,
+  style,
+  children
+}) {
+  const hostRef = (0, import_react2.useRef)(null);
+  const sceneRef = (0, import_react2.useRef)(null);
+  const initialOpts = (0, import_react2.useMemo)(() => ({
+    mode,
+    glyphPalette,
+    useColors,
+    cols,
+    rows,
+    cellAspect,
+    directionalLight,
+    ambientLight
+  }), []);
+  const hostCallbackRef = (0, import_react2.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);
+    } else if (!el && sceneRef.current) {
+      sceneRef.current.destroy();
+      sceneRef.current = null;
+      hostRef.current = null;
+    }
+  }, [initialOpts]);
+  (0, import_react2.useEffect)(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const partial = {};
+    if (mode !== void 0) partial.mode = mode;
+    if (glyphPalette !== void 0) partial.glyphPalette = glyphPalette;
+    if (useColors !== void 0) partial.useColors = useColors;
+    if (cols !== void 0) partial.cols = cols;
+    if (rows !== void 0) partial.rows = rows;
+    if (cellAspect !== void 0) partial.cellAspect = cellAspect;
+    if (directionalLight !== void 0) partial.directionalLight = directionalLight;
+    if (ambientLight !== void 0) partial.ambientLight = ambientLight;
+    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 }) });
+}
+var GlyphcssScene = (0, import_react2.memo)(GlyphcssSceneInner);
+
+// src/glyphcss/scene/GlyphcssMesh.tsx
+var import_react3 = require("react");
+
+// src/glyphcss/scene/events.ts
+var MESH_REGISTRY = /* @__PURE__ */ new WeakMap();
+function registerMeshElement(el, handle) {
+  MESH_REGISTRY.set(el, handle);
+}
+function unregisterMeshElement(el) {
+  MESH_REGISTRY.delete(el);
+}
+function findGlyphcssMeshHandle(el) {
+  let cur = el;
+  while (cur) {
+    if (cur instanceof HTMLElement) {
+      const h = MESH_REGISTRY.get(cur);
+      if (h) return h;
+    }
+    cur = cur.parentElement;
+  }
+  return null;
+}
+
+// src/glyphcss/scene/GlyphcssMesh.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function GlyphcssMeshInner({
+  id,
+  triangles: trianglesProp,
+  position,
+  scale,
+  rotation,
+  className,
+  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)(() => ({
+    position,
+    scale,
+    rotation
+  }), [position, scale, rotation]);
+  (0, import_react3.useEffect)(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const handle = scene.add(triangles, transform);
+    meshRef.current = handle;
+    return () => {
+      handle.dispose();
+      meshRef.current = null;
+    };
+  }, [sceneRef, triangles]);
+  (0, import_react3.useEffect)(() => {
+    const mesh = meshRef.current;
+    if (!mesh) return;
+    mesh.setTransform(transform);
+    sceneRef.current?.rerender();
+  }, [sceneRef, transform]);
+  (0, import_react3.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}` : ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref: wrapperRef,
+      "data-glyphcss-mesh-id": id,
+      className: computedClassName,
+      style,
+      children
+    }
+  );
+}
+var GlyphcssMesh = (0, import_react3.memo)(GlyphcssMeshInner);
+
+// src/glyphcss/scene/GlyphcssHotspot.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function GlyphcssHotspotInner({
+  id,
+  at,
+  size,
+  onClick,
+  className,
+  children
+}) {
+  const { sceneRef } = useGlyphcssSceneContext();
+  const hotspotRef = (0, import_react4.useRef)(null);
+  const onClickRef = (0, import_react4.useRef)(onClick);
+  onClickRef.current = onClick;
+  const atKey = (0, import_react4.useMemo)(() => at.join(","), [at]);
+  const sizeKey = size ? size.join(",") : "";
+  (0, import_react4.useEffect)(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const handle = scene.addHotspot(
+      { id, at, size },
+      () => {
+      }
+    );
+    hotspotRef.current = handle;
+    return () => {
+      handle.remove();
+      hotspotRef.current = 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
+    }
+  );
+}
+var GlyphcssHotspot = (0, import_react4.memo)(GlyphcssHotspotInner);
+
+// 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)(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const handle = scene.add(triangles, options?.transform);
+    meshRef.current = handle;
+    return () => {
+      handle.dispose();
+      meshRef.current = null;
+    };
+  }, [sceneRef, triangles]);
+  (0, import_react5.useEffect)(() => {
+    const mesh = meshRef.current;
+    if (!mesh) return;
+    if (options?.transform) {
+      mesh.setTransform(options.transform);
+      sceneRef.current?.rerender();
+    }
+  }, [sceneRef, options?.transform]);
+  return { meshRef, loading };
+}
+
+// src/glyphcss/camera/GlyphcssPerspectiveCamera.tsx
+var import_react7 = 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({
+  rotX,
+  rotY,
+  distance,
+  scale,
+  stretch,
+  center,
+  children
+}) {
+  const { sceneRef } = useGlyphcssSceneContext();
+  const cameraRef = (0, import_react7.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 (center !== void 0) opts.center = center;
+    cameraRef.current = (0, import_glyphcss2.createGlyphcssPerspectiveCamera)(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)(() => {
+    const camera = cameraRef.current;
+    if (!camera) return;
+    let dirty = false;
+    if (rotX !== void 0 && camera.rotX !== rotX) {
+      camera.rotX = rotX;
+      dirty = true;
+    }
+    if (rotY !== void 0 && camera.rotY !== rotY) {
+      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;
+      dirty = true;
+    }
+    if (dirty) {
+      sceneRef.current?.rerender();
+    }
+  });
+  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 });
+}
+var GlyphcssPerspectiveCamera = (0, import_react7.memo)(GlyphcssPerspectiveCameraInner);
+
+// src/glyphcss/camera/GlyphcssOrthographicCamera.tsx
+var import_react8 = require("react");
+var import_glyphcss3 = require("glyphcss");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function GlyphcssOrthographicCameraInner({
+  rotX,
+  rotY,
+  zoom,
+  center,
+  children
+}) {
+  const { sceneRef } = useGlyphcssSceneContext();
+  const cameraRef = (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 (zoom !== void 0) opts.zoom = zoom;
+    if (center !== void 0) opts.center = center;
+    cameraRef.current = (0, import_glyphcss3.createGlyphcssOrthographicCamera)(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)(() => {
+    const camera = cameraRef.current;
+    if (!camera) return;
+    let dirty = false;
+    if (rotX !== void 0 && camera.rotX !== rotX) {
+      camera.rotX = rotX;
+      dirty = true;
+    }
+    if (rotY !== void 0 && camera.rotY !== rotY) {
+      camera.rotY = rotY;
+      dirty = true;
+    }
+    if (zoom !== void 0 && camera.scale !== zoom) {
+      camera.scale = zoom;
+      dirty = true;
+    }
+    if (dirty) sceneRef.current?.rerender();
+  });
+  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 });
+}
+var GlyphcssOrthographicCamera = (0, import_react8.memo)(GlyphcssOrthographicCameraInner);
+
+// src/glyphcss/camera/useGlyphcssCamera.ts
+var import_react9 = require("react");
+var import_glyphcss4 = require("glyphcss");
+
+// src/glyphcss/controls/GlyphcssOrbitControls.tsx
+var import_react10 = require("react");
+var import_glyphcss5 = require("glyphcss");
+function GlyphcssOrbitControls({
+  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 });
+  propsRef.current = { drag, wheel, invert, animate };
+  (0, import_react10.useEffect)(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const opts = {
+      drag: propsRef.current.drag,
+      wheel: propsRef.current.wheel,
+      invert: propsRef.current.invert,
+      animate: propsRef.current.animate === false ? false : propsRef.current.animate
+    };
+    const controls = (0, import_glyphcss5.createGlyphcssOrbitControls)(scene, opts);
+    controlsRef.current = controls;
+    return () => {
+      controls.destroy();
+      controlsRef.current = null;
+    };
+  }, [sceneRef]);
+  (0, import_react10.useEffect)(() => {
+    const controls = controlsRef.current;
+    if (!controls) return;
+    controls.update({ drag, wheel, invert, animate: animate === false ? false : animate });
+  });
+  return null;
+}
+
+// src/glyphcss/controls/GlyphcssMapControls.tsx
+var import_react11 = require("react");
+var import_glyphcss6 = require("glyphcss");
+function GlyphcssMapControls({
+  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 });
+  propsRef.current = { drag, wheel, invert, animate };
+  (0, import_react11.useEffect)(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const opts = {
+      drag: propsRef.current.drag,
+      wheel: propsRef.current.wheel,
+      invert: propsRef.current.invert,
+      animate: propsRef.current.animate === false ? false : propsRef.current.animate
+    };
+    const controls = (0, import_glyphcss6.createGlyphcssMapControls)(scene, opts);
+    controlsRef.current = controls;
+    return () => {
+      controls.destroy();
+      controlsRef.current = null;
+    };
+  }, [sceneRef]);
+  (0, import_react11.useEffect)(() => {
+    const controls = controlsRef.current;
+    if (!controls) return;
+    controls.update({ drag, wheel, invert, animate: animate === false ? false : animate });
+  });
+  return null;
+}
+
+// src/glyphcss/controls/GlyphcssFirstPersonControls.tsx
+var import_react12 = require("react");
+var import_glyphcss7 = require("glyphcss");
+function GlyphcssFirstPersonControls({
+  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 });
+  propsRef.current = { drag, keyboard, moveSpeed, lookSpeed, invert };
+  (0, import_react12.useEffect)(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const opts = {
+      drag: propsRef.current.drag,
+      keyboard: propsRef.current.keyboard,
+      moveSpeed: propsRef.current.moveSpeed,
+      lookSpeed: propsRef.current.lookSpeed,
+      invert: propsRef.current.invert
+    };
+    const controls = (0, import_glyphcss7.createGlyphcssFirstPersonControls)(scene, opts);
+    controlsRef.current = controls;
+    return () => {
+      controls.destroy();
+      controlsRef.current = null;
+    };
+  }, [sceneRef]);
+  (0, import_react12.useEffect)(() => {
+    const controls = controlsRef.current;
+    if (!controls) return;
+    controls.update({ drag, keyboard, moveSpeed, lookSpeed, invert });
+  });
+  return null;
+}
+
+// src/glyphcss/helpers/GlyphcssAxesHelper.tsx
+var import_react13 = require("react");
+function axisTriangles(size) {
+  const s = size;
+  const t = s * 0.05;
+  const triangles = [];
+  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 });
+  }
+  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;
+}
+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)(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const handle = scene.add(triangles);
+    meshRef.current = handle;
+    return () => {
+      handle.dispose();
+      meshRef.current = null;
+    };
+  }, [sceneRef, triangles]);
+  return null;
+}
+var GlyphcssAxesHelper = (0, import_react13.memo)(GlyphcssAxesHelperInner);
+
+// src/glyphcss/helpers/GlyphcssDirectionalLightHelper.tsx
+var import_react14 = require("react");
+function lightMarkerTriangles(position, color, size) {
+  const [px, py, pz] = position;
+  const s = size;
+  const top = [px, py, pz + s];
+  const bot = [px, py, pz - s];
+  const right = [px + s, py, pz];
+  const left = [px - s, py, pz];
+  const front = [px, py + s, pz];
+  const back = [px, py - s, pz];
+  return [
+    { vertices: [top, right, front], color },
+    { vertices: [top, front, left], color },
+    { vertices: [top, left, back], color },
+    { vertices: [top, back, right], color },
+    { vertices: [bot, front, right], color },
+    { vertices: [bot, left, front], color },
+    { vertices: [bot, back, left], color },
+    { vertices: [bot, right, back], color }
+  ];
+}
+function GlyphcssDirectionalLightHelperInner({
+  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),
+    [position, color, size]
+  );
+  (0, import_react14.useEffect)(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const handle = scene.add(triangles);
+    meshRef.current = handle;
+    return () => {
+      handle.dispose();
+      meshRef.current = null;
+    };
+  }, [sceneRef, triangles]);
+  return null;
+}
+var GlyphcssDirectionalLightHelper = (0, import_react14.memo)(GlyphcssDirectionalLightHelperInner);
+
+// 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");
+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)(() => {
+    if (!clips || clips.length === 0 || !controller) {
+      mixerRef.current = null;
+      return;
+    }
+    const resolvedRoot = resolveRoot(root) ?? internalRef.current;
+    if (!resolvedRoot) {
+      mixerRef.current = null;
+      return;
+    }
+    mixerRef.current = (0, import_core.createGlyphcssAnimationMixer)(resolvedRoot, controller);
+    return () => {
+      mixerRef.current?.stopAllAction();
+      mixerRef.current?.uncacheRoot();
+      mixerRef.current = null;
+    };
+  }, [clips, controller]);
+  (0, import_react15.useEffect)(() => {
+    if (!clips || clips.length === 0 || !controller) return;
+    let rafId;
+    let lastTime = null;
+    function tick(now) {
+      if (lastTime === null) {
+        lastTime = now;
+        rafId = requestAnimationFrame(tick);
+        return;
+      }
+      const dt = (now - lastTime) / 1e3;
+      lastTime = now;
+      mixerRef.current?.update(dt);
+      rafId = requestAnimationFrame(tick);
+    }
+    rafId = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(rafId);
+      lastTime = null;
+    };
+  }, [clips, controller]);
+  const resolvedClips = clips ?? [];
+  const resolvedNames = resolvedClips.map((c) => c.name);
+  const actions = (0, import_react15.useMemo)(() => {
+    const target = {};
+    for (const clip of resolvedClips) {
+      Object.defineProperty(target, clip.name, {
+        enumerable: true,
+        get() {
+          const m = mixerRef.current;
+          if (!m) return null;
+          try {
+            return m.clipAction(clip.name);
+          } catch {
+            return null;
+          }
+        }
+      });
+    }
+    return target;
+  }, [resolvedClips]);
+  return {
+    ref: internalRef,
+    mixer: mixerRef.current,
+    clips: resolvedClips,
+    names: resolvedNames,
+    actions
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BASE_TILE,
+  CAMERA_BACKFACE_CULL_EPS,
+  DEFAULT_CAMERA_STATE,
+  DEFAULT_PROJECTION,
+  GlyphcssAxesHelper,
+  GlyphcssCamera,
+  GlyphcssCameraContext,
+  GlyphcssDirectionalLightHelper,
+  GlyphcssFirstPersonControls,
+  GlyphcssHotspot,
+  GlyphcssMapControls,
+  GlyphcssMesh,
+  GlyphcssOrbitControls,
+  GlyphcssOrthographicCamera,
+  GlyphcssPerspectiveCamera,
+  GlyphcssScene,
+  GlyphcssSceneContext,
+  LoopOnce,
+  LoopPingPong,
+  LoopRepeat,
+  VOXEL_CAMERA_CULL_AXIS_EPS,
+  VOXEL_CAMERA_CULL_NORMAL_LIMIT,
+  arrowPolygons,
+  axesHelperPolygons,
+  bakeSolidTextureSampledPolygons,
+  bakeSolidTextureSamples,
+  buildSceneContext,
+  cameraCullNormalGroups,
+  cameraCullNormalGroupsFromPolygons,
+  cameraCullNormalKey,
+  cameraCullVisibleSignature,
+  cameraFacingDepth,
+  clampChannel,
+  computeSceneBbox,
+  computeShapeLighting,
+  coverPlanarPolygons,
+  createGlyphcssAnimationMixer,
+  createIsometricCamera,
+  cullInteriorPolygons,
+  findGlyphcssMeshHandle,
+  formatColor,
+  injectGlyphcssBaseStyles,
+  inverseRotateVec3,
+  isAxisAlignedSurfaceNormal,
+  isVoxelCameraCullableNormalGroups,
+  loadMesh,
+  mergePolygons,
+  normalFacesCamera,
+  normalizeInvertMultiplier,
+  normalizePolygons,
+  octahedronPolygons,
+  optimizeMeshPolygons,
+  parseColor,
+  parseGltf,
+  parseHexColor,
+  parseMtl,
+  parseObj,
+  parsePureColor,
+  parseRgbColor,
+  parseVox,
+  polygonCssSurfaceNormal,
+  polygonFaces,
+  polygonFacesCamera,
+  ringPolygons,
+  rotateVec3,
+  shadeColor,
+  useGlyphcssAnimation,
+  useGlyphcssCamera,
+  useGlyphcssMesh,
+  useGlyphcssSceneContext
+});