@glyphcss/react 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -193,6 +193,7 @@ function GlyphSceneInner({
   smoothShading,
   creaseAngle,
   autoSize,
+  shadow,
   className,
   style,
   children
@@ -212,6 +213,7 @@ function GlyphSceneInner({
     smoothShading,
     creaseAngle,
     autoSize,
+    shadow,
     camera: cameraRef.current ?? void 0
   }), []);
   const hostCallbackRef = (0, import_react3.useCallback)((el) => {
@@ -243,10 +245,11 @@ function GlyphSceneInner({
     if (smoothShading !== void 0) partial.smoothShading = smoothShading;
     if (creaseAngle !== void 0) partial.creaseAngle = creaseAngle;
     if (autoSize !== void 0) partial.autoSize = autoSize;
+    partial.shadow = shadow;
     if (Object.keys(partial).length > 0) {
       scene.setOptions(partial);
     }
-  }, [mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight, smoothShading, creaseAngle, autoSize]);
+  }, [mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight, smoothShading, creaseAngle, autoSize, shadow]);
   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 }) });
@@ -306,6 +309,8 @@ function GlyphMeshInner({
   position,
   scale,
   rotation,
+  castShadow = false,
+  receiveShadow = false,
   className,
   style,
   children
@@ -322,8 +327,10 @@ function GlyphMeshInner({
     id,
     position,
     scale,
-    rotation
-  }), [id, position, scale, rotation]);
+    rotation,
+    castShadow,
+    receiveShadow
+  }), [id, position, scale, rotation, castShadow, receiveShadow]);
   (0, import_react4.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
@@ -371,6 +378,8 @@ function GlyphGroundInner({
   position = [0, -0.5, 0],
   rotation,
   id,
+  castShadow = false,
+  receiveShadow = true,
   className,
   style
 }) {
@@ -390,6 +399,8 @@ function GlyphGroundInner({
       polygons,
       position,
       rotation,
+      castShadow,
+      receiveShadow,
       className,
       style
     }
@@ -594,12 +605,13 @@ function GlyphOrbitControls({
   drag = true,
   wheel = true,
   invert = false,
+  clampPitch = true,
   animate = false
 }) {
   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 };
+  const propsRef = (0, import_react11.useRef)({ drag, wheel, invert, clampPitch, animate });
+  propsRef.current = { drag, wheel, invert, clampPitch, animate };
   (0, import_react11.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
@@ -607,6 +619,7 @@ function GlyphOrbitControls({
       drag: propsRef.current.drag,
       wheel: propsRef.current.wheel,
       invert: propsRef.current.invert,
+      clampPitch: propsRef.current.clampPitch,
       animate: propsRef.current.animate === false ? false : propsRef.current.animate
     };
     const controls = (0, import_glyphcss5.createGlyphOrbitControls)(scene, opts);
@@ -619,7 +632,7 @@ function GlyphOrbitControls({
   (0, import_react11.useEffect)(() => {
     const controls = controlsRef.current;
     if (!controls) return;
-    controls.update({ drag, wheel, invert, animate: animate === false ? false : animate });
+    controls.update({ drag, wheel, invert, clampPitch, animate: animate === false ? false : animate });
   });
   return null;
 }

package/dist/index.d.cts

@@ -3,8 +3,8 @@ export { ApproximateMergeOptions, ArrowPolygonsOptions, AutoRotateConfig, AutoRo
 import * as react from 'react';
 import { CSSProperties, ReactNode, MouseEventHandler, RefObject } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { GlyphDirectionalLight, GlyphAmbientLight, GlyphPointerEvent, GlyphMouseEvent, GlyphWheelEvent, GlyphSceneHandle, GlyphMeshTransform, GlyphMeshHandle, GlyphCamera } from 'glyphcss';
-export { GlyphEventHandler, GlyphMeshHandle, GlyphMouseEvent, GlyphPointerEvent, GlyphWheelEvent, injectGlyphBaseStyles } from 'glyphcss';
+import { GlyphDirectionalLight, GlyphAmbientLight, GlyphShadowOptions, GlyphPointerEvent, GlyphMouseEvent, GlyphWheelEvent, GlyphSceneHandle, GlyphMeshTransform, GlyphMeshHandle, GlyphCamera } from 'glyphcss';
+export { GlyphEventHandler, GlyphMeshHandle, GlyphMouseEvent, GlyphPointerEvent, GlyphShadowOptions, GlyphWheelEvent, injectGlyphBaseStyles } from 'glyphcss';
 
 interface GlyphSceneProps {
     /** Render mode: "wireframe" | "solid". Default "solid". */
@@ -27,11 +27,17 @@ interface GlyphSceneProps {
     creaseAngle?: number;
     /** Observe host element and adapt cols/rows to fill it. Default false. */
     autoSize?: boolean;
+    /**
+     * Shadow-map configuration. `undefined` (default) means no shadows.
+     * Set this together with `castShadow`/`receiveShadow` on child `GlyphMesh`
+     * components to enable shadow casting.
+     */
+    shadow?: GlyphShadowOptions;
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;
 }
-declare function GlyphSceneInner({ mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight, smoothShading, creaseAngle, autoSize, className, style, children, }: GlyphSceneProps): react_jsx_runtime.JSX.Element;
+declare function GlyphSceneInner({ mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight, smoothShading, creaseAngle, autoSize, shadow, className, style, children, }: GlyphSceneProps): react_jsx_runtime.JSX.Element;
 declare const GlyphScene: react.MemoExoticComponent<typeof GlyphSceneInner>;
 
 interface GlyphMeshProps {
@@ -51,6 +57,17 @@ interface GlyphMeshProps {
     position?: Vec3;
     scale?: number | Vec3;
     rotation?: Vec3;
+    /**
+     * This mesh casts shadows onto `receiveShadow` surfaces.
+     * Default false — opt-in, matching PolyMesh behaviour.
+     */
+    castShadow?: boolean;
+    /**
+     * This mesh receives (displays) shadows from `castShadow` meshes.
+     * A mesh that is both `castShadow` and `receiveShadow` will self-shadow.
+     * Default false — opt-in, matching PolyMesh behaviour.
+     */
+    receiveShadow?: boolean;
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;
@@ -62,7 +79,7 @@ interface GlyphMeshProps {
     onClick?: (event: GlyphMouseEvent) => void;
     onWheel?: (event: GlyphWheelEvent) => void;
 }
-declare function GlyphMeshInner({ id, polygons: polygonsProp, geometry, size, color, position, scale, rotation, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
+declare function GlyphMeshInner({ id, polygons: polygonsProp, geometry, size, color, position, scale, rotation, castShadow, receiveShadow, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
 declare const GlyphMesh: react.MemoExoticComponent<typeof GlyphMeshInner>;
 
 interface GlyphGroundProps {
@@ -72,14 +89,24 @@ interface GlyphGroundProps {
     color?: string;
     /** World-space position. Default [0, -0.5, 0]. */
     position?: Vec3;
-    /** World-space rotation in radians (Euler XYZ). */
+    /** World-space rotation in degrees (Euler XYZ). */
     rotation?: Vec3;
     /** String id forwarded to the underlying mesh handle. */
     id?: string;
+    /**
+     * This ground plane casts shadows onto other `receiveShadow` surfaces.
+     * Default false — ground planes typically only receive shadows, matching PolyGround.
+     */
+    castShadow?: boolean;
+    /**
+     * This ground plane receives (displays) shadows from `castShadow` meshes.
+     * Default true — ground planes are the primary shadow receivers, matching PolyGround.
+     */
+    receiveShadow?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-declare function GlyphGroundInner({ size, color, position, rotation, id, className, style, }: GlyphGroundProps): react_jsx_runtime.JSX.Element;
+declare function GlyphGroundInner({ size, color, position, rotation, id, castShadow, receiveShadow, className, style, }: GlyphGroundProps): react_jsx_runtime.JSX.Element;
 declare const GlyphGround: react.MemoExoticComponent<typeof GlyphGroundInner>;
 
 interface GlyphHotspotProps {
@@ -123,7 +150,7 @@ declare function findMeshUnderPoint(clientX: number, clientY: number, filter?: (
 interface GlyphOrthographicCameraProps {
     rotX?: number;
     rotY?: number;
-    /** Orthographic zoom (fraction of min(cols, rows)). Default 0.4. */
+    /** Orthographic zoom — absolute px per world unit (zoom=1 → BASE_TILE=50). Default 0.65. */
     zoom?: number;
     /** Center of projection in normalized grid coords. Default [0.5, 0.5]. */
     center?: [number, number];
@@ -137,9 +164,9 @@ declare const GlyphOrthographicCamera: react.MemoExoticComponent<typeof GlyphOrt
 interface GlyphPerspectiveCameraProps {
     rotX?: number;
     rotY?: number;
-    /** Perspective distance. Default 3. */
+    /** Perspective distance (world units). Default 6. */
     distance?: number;
-    /** Camera zoom — mesh fraction of min(cols, rows). Default 0.4. */
+    /** Camera zoom — absolute px per world unit (zoom=1 → BASE_TILE=50). Default 0.65. */
     zoom?: number;
     /** Extra horizontal stretch on top of cellAspect. Default 1.0. */
     stretch?: number;
@@ -172,6 +199,11 @@ interface GlyphOrbitControlsProps {
     wheel?: boolean;
     /** Drag-direction inversion. Default false. */
     invert?: boolean | number;
+    /**
+     * Clamp vertical drag to ±π/2. Default true. Set false for globe-style
+     * unrestricted tumbling past the poles.
+     */
+    clampPitch?: boolean;
     /** Auto-rotate config. Default false. */
     animate?: false | {
         speed?: number;
@@ -179,7 +211,7 @@ interface GlyphOrbitControlsProps {
         pauseOnInteraction?: boolean;
     };
 }
-declare function GlyphOrbitControls({ drag, wheel, invert, animate, }: GlyphOrbitControlsProps): null;
+declare function GlyphOrbitControls({ drag, wheel, invert, clampPitch, animate, }: GlyphOrbitControlsProps): null;
 
 interface GlyphMapControlsProps {
     drag?: boolean;

package/dist/index.d.ts

@@ -3,8 +3,8 @@ export { ApproximateMergeOptions, ArrowPolygonsOptions, AutoRotateConfig, AutoRo
 import * as react from 'react';
 import { CSSProperties, ReactNode, MouseEventHandler, RefObject } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { GlyphDirectionalLight, GlyphAmbientLight, GlyphPointerEvent, GlyphMouseEvent, GlyphWheelEvent, GlyphSceneHandle, GlyphMeshTransform, GlyphMeshHandle, GlyphCamera } from 'glyphcss';
-export { GlyphEventHandler, GlyphMeshHandle, GlyphMouseEvent, GlyphPointerEvent, GlyphWheelEvent, injectGlyphBaseStyles } from 'glyphcss';
+import { GlyphDirectionalLight, GlyphAmbientLight, GlyphShadowOptions, GlyphPointerEvent, GlyphMouseEvent, GlyphWheelEvent, GlyphSceneHandle, GlyphMeshTransform, GlyphMeshHandle, GlyphCamera } from 'glyphcss';
+export { GlyphEventHandler, GlyphMeshHandle, GlyphMouseEvent, GlyphPointerEvent, GlyphShadowOptions, GlyphWheelEvent, injectGlyphBaseStyles } from 'glyphcss';
 
 interface GlyphSceneProps {
     /** Render mode: "wireframe" | "solid". Default "solid". */
@@ -27,11 +27,17 @@ interface GlyphSceneProps {
     creaseAngle?: number;
     /** Observe host element and adapt cols/rows to fill it. Default false. */
     autoSize?: boolean;
+    /**
+     * Shadow-map configuration. `undefined` (default) means no shadows.
+     * Set this together with `castShadow`/`receiveShadow` on child `GlyphMesh`
+     * components to enable shadow casting.
+     */
+    shadow?: GlyphShadowOptions;
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;
 }
-declare function GlyphSceneInner({ mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight, smoothShading, creaseAngle, autoSize, className, style, children, }: GlyphSceneProps): react_jsx_runtime.JSX.Element;
+declare function GlyphSceneInner({ mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight, smoothShading, creaseAngle, autoSize, shadow, className, style, children, }: GlyphSceneProps): react_jsx_runtime.JSX.Element;
 declare const GlyphScene: react.MemoExoticComponent<typeof GlyphSceneInner>;
 
 interface GlyphMeshProps {
@@ -51,6 +57,17 @@ interface GlyphMeshProps {
     position?: Vec3;
     scale?: number | Vec3;
     rotation?: Vec3;
+    /**
+     * This mesh casts shadows onto `receiveShadow` surfaces.
+     * Default false — opt-in, matching PolyMesh behaviour.
+     */
+    castShadow?: boolean;
+    /**
+     * This mesh receives (displays) shadows from `castShadow` meshes.
+     * A mesh that is both `castShadow` and `receiveShadow` will self-shadow.
+     * Default false — opt-in, matching PolyMesh behaviour.
+     */
+    receiveShadow?: boolean;
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;
@@ -62,7 +79,7 @@ interface GlyphMeshProps {
     onClick?: (event: GlyphMouseEvent) => void;
     onWheel?: (event: GlyphWheelEvent) => void;
 }
-declare function GlyphMeshInner({ id, polygons: polygonsProp, geometry, size, color, position, scale, rotation, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
+declare function GlyphMeshInner({ id, polygons: polygonsProp, geometry, size, color, position, scale, rotation, castShadow, receiveShadow, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
 declare const GlyphMesh: react.MemoExoticComponent<typeof GlyphMeshInner>;
 
 interface GlyphGroundProps {
@@ -72,14 +89,24 @@ interface GlyphGroundProps {
     color?: string;
     /** World-space position. Default [0, -0.5, 0]. */
     position?: Vec3;
-    /** World-space rotation in radians (Euler XYZ). */
+    /** World-space rotation in degrees (Euler XYZ). */
     rotation?: Vec3;
     /** String id forwarded to the underlying mesh handle. */
     id?: string;
+    /**
+     * This ground plane casts shadows onto other `receiveShadow` surfaces.
+     * Default false — ground planes typically only receive shadows, matching PolyGround.
+     */
+    castShadow?: boolean;
+    /**
+     * This ground plane receives (displays) shadows from `castShadow` meshes.
+     * Default true — ground planes are the primary shadow receivers, matching PolyGround.
+     */
+    receiveShadow?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-declare function GlyphGroundInner({ size, color, position, rotation, id, className, style, }: GlyphGroundProps): react_jsx_runtime.JSX.Element;
+declare function GlyphGroundInner({ size, color, position, rotation, id, castShadow, receiveShadow, className, style, }: GlyphGroundProps): react_jsx_runtime.JSX.Element;
 declare const GlyphGround: react.MemoExoticComponent<typeof GlyphGroundInner>;
 
 interface GlyphHotspotProps {
@@ -123,7 +150,7 @@ declare function findMeshUnderPoint(clientX: number, clientY: number, filter?: (
 interface GlyphOrthographicCameraProps {
     rotX?: number;
     rotY?: number;
-    /** Orthographic zoom (fraction of min(cols, rows)). Default 0.4. */
+    /** Orthographic zoom — absolute px per world unit (zoom=1 → BASE_TILE=50). Default 0.65. */
     zoom?: number;
     /** Center of projection in normalized grid coords. Default [0.5, 0.5]. */
     center?: [number, number];
@@ -137,9 +164,9 @@ declare const GlyphOrthographicCamera: react.MemoExoticComponent<typeof GlyphOrt
 interface GlyphPerspectiveCameraProps {
     rotX?: number;
     rotY?: number;
-    /** Perspective distance. Default 3. */
+    /** Perspective distance (world units). Default 6. */
     distance?: number;
-    /** Camera zoom — mesh fraction of min(cols, rows). Default 0.4. */
+    /** Camera zoom — absolute px per world unit (zoom=1 → BASE_TILE=50). Default 0.65. */
     zoom?: number;
     /** Extra horizontal stretch on top of cellAspect. Default 1.0. */
     stretch?: number;
@@ -172,6 +199,11 @@ interface GlyphOrbitControlsProps {
     wheel?: boolean;
     /** Drag-direction inversion. Default false. */
     invert?: boolean | number;
+    /**
+     * Clamp vertical drag to ±π/2. Default true. Set false for globe-style
+     * unrestricted tumbling past the poles.
+     */
+    clampPitch?: boolean;
     /** Auto-rotate config. Default false. */
     animate?: false | {
         speed?: number;
@@ -179,7 +211,7 @@ interface GlyphOrbitControlsProps {
         pauseOnInteraction?: boolean;
     };
 }
-declare function GlyphOrbitControls({ drag, wheel, invert, animate, }: GlyphOrbitControlsProps): null;
+declare function GlyphOrbitControls({ drag, wheel, invert, clampPitch, animate, }: GlyphOrbitControlsProps): null;
 
 interface GlyphMapControlsProps {
     drag?: boolean;

package/dist/index.js

@@ -149,6 +149,7 @@ function GlyphSceneInner({
   smoothShading,
   creaseAngle,
   autoSize,
+  shadow,
   className,
   style,
   children
@@ -168,6 +169,7 @@ function GlyphSceneInner({
     smoothShading,
     creaseAngle,
     autoSize,
+    shadow,
     camera: cameraRef.current ?? void 0
   }), []);
   const hostCallbackRef = useCallback((el) => {
@@ -199,10 +201,11 @@ function GlyphSceneInner({
     if (smoothShading !== void 0) partial.smoothShading = smoothShading;
     if (creaseAngle !== void 0) partial.creaseAngle = creaseAngle;
     if (autoSize !== void 0) partial.autoSize = autoSize;
+    partial.shadow = shadow;
     if (Object.keys(partial).length > 0) {
       scene.setOptions(partial);
     }
-  }, [mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight, smoothShading, creaseAngle, autoSize]);
+  }, [mode, glyphPalette, useColors, cols, rows, cellAspect, directionalLight, ambientLight, smoothShading, creaseAngle, autoSize, shadow]);
   const ctxValue = useMemo(() => ({ sceneRef }), [sceneRef]);
   const computedClassName = `glyph-host${className ? ` ${className}` : ""}`;
   return /* @__PURE__ */ jsx(GlyphSceneContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx("div", { ref: hostCallbackRef, className: computedClassName, style, children }) });
@@ -262,6 +265,8 @@ function GlyphMeshInner({
   position,
   scale,
   rotation,
+  castShadow = false,
+  receiveShadow = false,
   className,
   style,
   children
@@ -278,8 +283,10 @@ function GlyphMeshInner({
     id,
     position,
     scale,
-    rotation
-  }), [id, position, scale, rotation]);
+    rotation,
+    castShadow,
+    receiveShadow
+  }), [id, position, scale, rotation, castShadow, receiveShadow]);
   useEffect2(() => {
     const scene = sceneRef.current;
     if (!scene) return;
@@ -327,6 +334,8 @@ function GlyphGroundInner({
   position = [0, -0.5, 0],
   rotation,
   id,
+  castShadow = false,
+  receiveShadow = true,
   className,
   style
 }) {
@@ -346,6 +355,8 @@ function GlyphGroundInner({
       polygons,
       position,
       rotation,
+      castShadow,
+      receiveShadow,
       className,
       style
     }
@@ -550,12 +561,13 @@ function GlyphOrbitControls({
   drag = true,
   wheel = true,
   invert = false,
+  clampPitch = true,
   animate = false
 }) {
   const { sceneRef } = useGlyphSceneContext();
   const controlsRef = useRef8(null);
-  const propsRef = useRef8({ drag, wheel, invert, animate });
-  propsRef.current = { drag, wheel, invert, animate };
+  const propsRef = useRef8({ drag, wheel, invert, clampPitch, animate });
+  propsRef.current = { drag, wheel, invert, clampPitch, animate };
   useEffect7(() => {
     const scene = sceneRef.current;
     if (!scene) return;
@@ -563,6 +575,7 @@ function GlyphOrbitControls({
       drag: propsRef.current.drag,
       wheel: propsRef.current.wheel,
       invert: propsRef.current.invert,
+      clampPitch: propsRef.current.clampPitch,
       animate: propsRef.current.animate === false ? false : propsRef.current.animate
     };
     const controls = createGlyphOrbitControls(scene, opts);
@@ -575,7 +588,7 @@ function GlyphOrbitControls({
   useEffect7(() => {
     const controls = controlsRef.current;
     if (!controls) return;
-    controls.update({ drag, wheel, invert, animate: animate === false ? false : animate });
+    controls.update({ drag, wheel, invert, clampPitch, animate: animate === false ? false : animate });
   });
   return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glyphcss/react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "React components for the glyphcss ASCII polygon mesh rendering engine",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -40,8 +40,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@glyphcss/core": "^0.0.2",
-    "glyphcss": "^0.0.2"
+    "@glyphcss/core": "^0.0.4",
+    "glyphcss": "^0.0.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",