@terraware/web-components 4.2.13 → 4.2.14-rc.1

package/components/VirtualWalkthrough/AnnotationPanel.js

@@ -0,0 +1,196 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useTheme } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Fallback hotspot diameter (px) when the rendered size isn't reported yet.
+const DEFAULT_HOTSPOT_DIAMETER = 35;
+
+// Horizontal gap (px) kept between the panel's right edge and the hotspot so
+// the connector line stays visible.
+const PANEL_HOTSPOT_GAP = 48;
+
+// Minimum distance from the left edge of the viewer, as a fraction of its
+// width, so the panel never drifts further left than this.
+const MIN_LEFT_FRACTION = 0.02;
+const CONNECTOR_STYLE = {
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  pointerEvents: 'none',
+  overflow: 'visible',
+  zIndex: 5002
+};
+const PANEL_STYLE = {
+  position: 'absolute',
+  left: '2%',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  maxHeight: '80vh',
+  zIndex: 5003,
+  backgroundColor: '#ffffff',
+  borderRadius: 12,
+  boxShadow: '0 8px 32px rgba(0,0,0,0.32)',
+  overflowY: 'auto',
+  display: 'flex',
+  flexDirection: 'column'
+};
+const IMAGE_STYLE = {
+  width: 'auto',
+  height: 'auto',
+  maxWidth: '100%',
+  maxHeight: '60vh',
+  display: 'block',
+  borderRadius: '12px 12px 0 0',
+  flexShrink: 0
+};
+const TEXT_BLOCK_STYLE = {
+  padding: '24px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8
+};
+const AnnotationPanel = ({
+  annotation,
+  hotspotPosition,
+  onClose
+}) => {
+  const theme = useTheme();
+  const panelRef = useRef(null);
+  const connectorRef = useRef(null);
+  const [lineStart, setLineStart] = useState(null);
+  const [panelLeft, setPanelLeft] = useState(null);
+  useEffect(() => {
+    if (!annotation) {
+      return;
+    }
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    const handlePointerDown = e => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('pointerdown', handlePointerDown);
+    };
+  }, [annotation, onClose]);
+
+  // Position the panel just to the left of the hotspot (clamped so it never
+  // goes further left than MIN_LEFT_FRACTION of the viewer) and anchor the
+  // connector line at the vertical center of the panel's right edge, in the
+  // connector SVG's coordinate space.
+  useLayoutEffect(() => {
+    if (!annotation || !hotspotPosition || !panelRef.current || !connectorRef.current) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setPanelLeft(null);
+      setLineStart(null);
+      return;
+    }
+    const panelWidth = panelRef.current.getBoundingClientRect().width;
+    const connectorRect = connectorRef.current.getBoundingClientRect();
+    const minLeft = connectorRect.width * MIN_LEFT_FRACTION;
+    const desiredLeft = hotspotPosition.x - PANEL_HOTSPOT_GAP - panelWidth;
+    const left = Math.max(desiredLeft, minLeft);
+    setPanelLeft(left);
+    setLineStart({
+      x: left + panelWidth,
+      y: connectorRect.height / 2
+    });
+  }, [annotation, hotspotPosition]);
+  if (!annotation) {
+    return null;
+  }
+  const panelStyle = {
+    ...PANEL_STYLE,
+    ...(annotation.imageUrl ? {
+      width: 'fit-content',
+      maxWidth: '60vw'
+    } : {
+      width: 'fit-content',
+      maxWidth: '50vw'
+    }),
+    ...(panelLeft !== null ? {
+      left: `${panelLeft}px`
+    } : {})
+  };
+
+  // Stop the line at the edge of the hotspot circle
+  let lineEnd = null;
+  if (lineStart && hotspotPosition) {
+    const dx = hotspotPosition.x - lineStart.x;
+    const dy = hotspotPosition.y - lineStart.y;
+    const dist = Math.hypot(dx, dy);
+    const radius = (hotspotPosition.size ?? DEFAULT_HOTSPOT_DIAMETER) / 2;
+    const t = dist > radius ? (dist - radius) / dist : 0;
+    lineEnd = {
+      x: lineStart.x + dx * t,
+      y: lineStart.y + dy * t
+    };
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("svg", {
+      ref: connectorRef,
+      "data-testid": "annotation-panel-connector",
+      style: CONNECTOR_STYLE,
+      children: lineStart && lineEnd && /*#__PURE__*/_jsx("line", {
+        x1: lineStart.x,
+        y1: lineStart.y,
+        x2: lineEnd.x,
+        y2: lineEnd.y,
+        stroke: "#ffffff",
+        strokeWidth: 2
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      ref: panelRef,
+      "data-testid": "annotation-panel",
+      style: panelStyle,
+      children: [annotation.imageUrl && /*#__PURE__*/_jsx("img", {
+        src: annotation.imageUrl,
+        alt: annotation.title,
+        style: IMAGE_STYLE
+      }), /*#__PURE__*/_jsxs("div", {
+        style: TEXT_BLOCK_STYLE,
+        children: [annotation.label && /*#__PURE__*/_jsx("span", {
+          "data-testid": "annotation-panel-label",
+          style: {
+            alignSelf: 'flex-start',
+            fontSize: 14,
+            fontWeight: 500,
+            color: theme.palette.TwClrTxtSuccess,
+            margin: 0,
+            padding: theme.spacing(0.5, 1),
+            backgroundColor: theme.palette.TwClrBgSuccessTertiary,
+            border: `1px solid ${theme.palette.TwClrBrdrSuccess}`,
+            borderRadius: theme.spacing(1)
+          },
+          children: annotation.label
+        }), /*#__PURE__*/_jsx("h2", {
+          "data-testid": "annotation-panel-title",
+          style: {
+            fontSize: 32,
+            fontWeight: 600,
+            color: theme.palette.TwClrTxt,
+            margin: 0
+          },
+          children: annotation.title
+        }), annotation.bodyText && /*#__PURE__*/_jsx("p", {
+          "data-testid": "annotation-panel-description",
+          style: {
+            fontSize: 16,
+            color: theme.palette.TwClrTxt,
+            lineHeight: '24px',
+            margin: 0
+          },
+          children: annotation.bodyText
+        })]
+      })]
+    })]
+  });
+};
+export default AnnotationPanel;

package/components/VirtualWalkthrough/Application.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './application-styles.css';
+interface ApplicationProps {
+    children: React.ReactNode;
+    style?: Record<string, unknown>;
+}
+declare const Application: ({ children, style }: ApplicationProps) => import("react/jsx-runtime").JSX.Element;
+export default Application;
+//# sourceMappingURL=Application.d.ts.map

package/components/VirtualWalkthrough/Application.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Application.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/Application.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,0BAA0B,CAAC;AAElC,UAAU,gBAAgB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED,QAAA,MAAM,WAAW,GAAI,qBAAqB,gBAAgB,4CA2BzD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/VirtualWalkthrough/Application.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Application as PcApplication } from '@playcanvas/react';
+import './application-styles.css';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const Application = ({
+  children,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PcApplication, {
+      style: style,
+      graphicsDeviceOptions: {
+        antialias: false,
+        xrCompatible: true
+      },
+      children: children
+    }), /*#__PURE__*/_jsx("div", {
+      "data-annotation-container": true,
+      className: "annotation-container",
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        zIndex: 1000
+      }
+    })]
+  });
+};
+export default Application;

package/components/VirtualWalkthrough/AutoRotator.d.ts

@@ -0,0 +1,109 @@
+import { Script } from 'playcanvas';
+/**
+ * Auto-rotator script for PlayCanvas CameraControls.
+ * Automatically orbits the camera around its focus point after a period of inactivity.
+ */
+export declare class AutoRotator extends Script {
+    static scriptName: string;
+    /**
+     * Rotation speed in degrees per second when auto-rotating.
+     *
+     * @attribute
+     * @title Speed
+     */
+    speed: number;
+    /**
+     * Delay in seconds before auto-rotation starts after initialization.
+     *
+     * @attribute
+     * @title Start Delay
+     */
+    startDelay: number;
+    /**
+     * Delay in seconds before auto-rotation restarts after the camera stops moving.
+     *
+     * @attribute
+     * @title Restart Delay
+     */
+    restartDelay: number;
+    /**
+     * Duration in seconds to fade in the rotation speed.
+     *
+     * @attribute
+     * @title Start Fade In Time
+     */
+    startFadeInTime: number;
+    /**
+     * Internal timer tracking how long the camera has been idle.
+     * @private
+     */
+    private timer;
+    /**
+     * Flag to track if rotation has started at least once.
+     * @private
+     */
+    private hasStartedRotating;
+    /**
+     * Flag to track if we're currently rotating.
+     * @private
+     */
+    private isCurrentlyRotating;
+    /**
+     * Last known pitch angle for movement detection.
+     * @private
+     */
+    private pitch;
+    /**
+     * Last known yaw angle for movement detection.
+     * @private
+     */
+    private yaw;
+    /**
+     * Reference to the camera entity.
+     * @private
+     */
+    private cameraEntity;
+    /**
+     * Reference to the CameraControls script.
+     * @private
+     */
+    private cameraControls;
+    /**
+     * Reference to the WalkthroughCamera script (used when CameraControls is absent).
+     * @private
+     */
+    private walkthroughCamera;
+    /**
+     * Bound event handlers for cleanup.
+     * @private
+     */
+    private onPointerDown?;
+    private onKeyDown?;
+    /**
+     * Handle user input events.
+     * @private
+     */
+    private handleUserInput;
+    /**
+     * Initialize the script.
+     */
+    initialize(): void;
+    /**
+     * Update loop that handles auto-rotation logic.
+     * Runs after CameraControls updates.
+     */
+    postUpdate(dt: number): void;
+    /**
+     * Smooth step interpolation function.
+     *
+     * @param {number} x - Input value.
+     * @returns {number} - Smoothly interpolated value.
+     * @private
+     */
+    private smoothStep;
+    /**
+     * Clean up event listeners when the script is destroyed.
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=AutoRotator.d.ts.map

package/components/VirtualWalkthrough/AutoRotator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoRotator.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AutoRotator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,MAAM,EAAQ,MAAM,YAAY,CAAC;AAEhD;;;GAGG;AACH,qBAAa,WAAY,SAAQ,MAAM;IACrC,MAAM,CAAC,UAAU,SAAiB;IAElC;;;;;OAKG;IACH,KAAK,SAAK;IAEV;;;;;OAKG;IACH,UAAU,SAAK;IAEf;;;;;OAKG;IACH,YAAY,SAAK;IAEjB;;;;;OAKG;IACH,eAAe,SAAK;IAEpB;;;OAGG;IACH,OAAO,CAAC,KAAK,CAAK;IAElB;;;OAGG;IACH,OAAO,CAAC,kBAAkB,CAAS;IAEnC;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAAS;IAEpC;;;OAGG;IACH,OAAO,CAAC,KAAK,CAAuB;IAEpC;;;OAGG;IACH,OAAO,CAAC,GAAG,CAAuB;IAElC;;;OAGG;IACH,OAAO,CAAC,YAAY,CAAa;IAEjC;;;OAGG;IACH,OAAO,CAAC,cAAc,CAAa;IAEnC;;;OAGG;IACH,OAAO,CAAC,iBAAiB,CAAa;IAEtC;;;OAGG;IACH,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,SAAS,CAAC,CAAa;IAE/B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,UAAU;IAgBV;;;OAGG;IACH,UAAU,CAAC,EAAE,EAAE,MAAM;IAsErB;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAWlB;;OAEG;IACH,OAAO;CAQR"}

package/components/VirtualWalkthrough/AutoRotator.js

@@ -0,0 +1,217 @@
+import { Quat, Script, Vec3 } from 'playcanvas';
+
+/**
+ * Auto-rotator script for PlayCanvas CameraControls.
+ * Automatically orbits the camera around its focus point after a period of inactivity.
+ */
+export class AutoRotator extends Script {
+  static scriptName = 'autoRotator';
+
+  /**
+   * Rotation speed in degrees per second when auto-rotating.
+   *
+   * @attribute
+   * @title Speed
+   */
+  speed = 4;
+
+  /**
+   * Delay in seconds before auto-rotation starts after initialization.
+   *
+   * @attribute
+   * @title Start Delay
+   */
+  startDelay = 5;
+
+  /**
+   * Delay in seconds before auto-rotation restarts after the camera stops moving.
+   *
+   * @attribute
+   * @title Restart Delay
+   */
+  restartDelay = 2;
+
+  /**
+   * Duration in seconds to fade in the rotation speed.
+   *
+   * @attribute
+   * @title Start Fade In Time
+   */
+  startFadeInTime = 5;
+
+  /**
+   * Internal timer tracking how long the camera has been idle.
+   * @private
+   */
+  timer = 0;
+
+  /**
+   * Flag to track if rotation has started at least once.
+   * @private
+   */
+  hasStartedRotating = false;
+
+  /**
+   * Flag to track if we're currently rotating.
+   * @private
+   */
+  isCurrentlyRotating = false;
+
+  /**
+   * Last known pitch angle for movement detection.
+   * @private
+   */
+  pitch = null;
+
+  /**
+   * Last known yaw angle for movement detection.
+   * @private
+   */
+  yaw = null;
+
+  /**
+   * Reference to the camera entity.
+   * @private
+   */
+  cameraEntity = null;
+
+  /**
+   * Reference to the CameraControls script.
+   * @private
+   */
+  cameraControls = null;
+
+  /**
+   * Reference to the WalkthroughCamera script (used when CameraControls is absent).
+   * @private
+   */
+  walkthroughCamera = null;
+
+  /**
+   * Bound event handlers for cleanup.
+   * @private
+   */
+
+  /**
+   * Handle user input events.
+   * @private
+   */
+  handleUserInput() {
+    this.timer = 0;
+    this.isCurrentlyRotating = false;
+    this.hasStartedRotating = true;
+  }
+
+  /**
+   * Initialize the script.
+   */
+  initialize() {
+    this.onPointerDown = this.handleUserInput.bind(this);
+    this.onKeyDown = this.handleUserInput.bind(this);
+    if (this.app.graphicsDevice.canvas) {
+      this.app.graphicsDevice.canvas.addEventListener('pointerdown', this.onPointerDown);
+    }
+    window.addEventListener('keydown', this.onKeyDown);
+    this.cameraEntity = this.entity.findByName('camera');
+    if (this.cameraEntity) {
+      this.cameraControls = this.cameraEntity.script?.cameraControls ?? null;
+      this.walkthroughCamera = this.cameraEntity.script?.walkthroughCamera ?? null;
+    }
+  }
+
+  /**
+   * Update loop that handles auto-rotation logic.
+   * Runs after CameraControls updates.
+   */
+  postUpdate(dt) {
+    const hasControls = this.cameraControls && this.cameraControls._pose;
+    const hasWalkthrough = !!this.walkthroughCamera;
+    if (!hasControls && !hasWalkthrough) {
+      return;
+    }
+    const currentPitch = hasControls ? this.cameraControls._pose.angles.x : this.walkthroughCamera.currentPitch;
+    const currentYaw = hasControls ? this.cameraControls._pose.angles.y : this.walkthroughCamera.currentYaw;
+
+    // Initialize angles on first frame
+    if (this.pitch === null || this.yaw === null) {
+      this.pitch = currentPitch;
+      this.yaw = currentYaw;
+    }
+
+    // Check for camera movement only after initial rotation has started and while not actively rotating
+    if (this.hasStartedRotating && !this.isCurrentlyRotating && this.pitch !== null && this.yaw !== null) {
+      const pitchDiff = Math.abs(this.pitch - currentPitch);
+      const yawDiff = Math.abs(this.yaw - currentYaw);
+      if (pitchDiff > 0.1 || yawDiff > 0.1) {
+        this.pitch = currentPitch;
+        this.yaw = currentYaw;
+        this.timer = 0;
+        this.isCurrentlyRotating = false;
+        this.hasStartedRotating = true;
+        return;
+      }
+    }
+    this.timer += dt;
+
+    // Determine which delay to use
+    const currentDelay = this.hasStartedRotating ? this.restartDelay : this.startDelay;
+
+    // Start auto-rotation after delay
+    if (this.timer >= currentDelay) {
+      this.isCurrentlyRotating = true;
+      const time = this.timer - currentDelay;
+      const fadeIn = this.smoothStep(time / this.startFadeInTime);
+      const yawDelta = dt * fadeIn * this.speed;
+      if (hasControls) {
+        const pose = this.cameraControls._pose;
+        const focusPoint = pose.getFocus(new Vec3());
+        const offset = new Vec3().sub2(pose.position.clone(), focusPoint);
+        const rotationQuat = new Quat().setFromAxisAngle(Vec3.UP, yawDelta);
+        const rotatedOffset = new Vec3();
+        rotationQuat.transformVector(offset, rotatedOffset);
+        const newPos = new Vec3().add2(focusPoint, rotatedOffset);
+        pose.look(newPos, focusPoint);
+        if (this.cameraControls._controller?.attach) {
+          this.cameraControls._controller.attach(pose, false);
+        }
+        this.cameraEntity.setPosition(pose.position);
+        this.cameraEntity.setEulerAngles(pose.angles);
+        this.pitch = pose.angles.x;
+        this.yaw = pose.angles.y;
+      } else {
+        this.walkthroughCamera.orbitStep(yawDelta);
+        this.pitch = this.walkthroughCamera.currentPitch;
+        this.yaw = this.walkthroughCamera.currentYaw;
+      }
+    }
+  }
+
+  /**
+   * Smooth step interpolation function.
+   *
+   * @param {number} x - Input value.
+   * @returns {number} - Smoothly interpolated value.
+   * @private
+   */
+  smoothStep(x) {
+    if (x <= 0) {
+      return 0;
+    }
+    if (x >= 1) {
+      return 1;
+    }
+    return Math.sin((x - 0.5) * Math.PI) * 0.5 + 0.5;
+  }
+
+  /**
+   * Clean up event listeners when the script is destroyed.
+   */
+  destroy() {
+    if (this.app.graphicsDevice.canvas && this.onPointerDown) {
+      this.app.graphicsDevice.canvas.removeEventListener('pointerdown', this.onPointerDown);
+    }
+    if (this.onKeyDown) {
+      window.removeEventListener('keydown', this.onKeyDown);
+    }
+  }
+}

package/components/VirtualWalkthrough/BlockingSpinner.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from 'react';
+export default function BlockingSpinner(): JSX.Element;
+//# sourceMappingURL=BlockingSpinner.d.ts.map

package/components/VirtualWalkthrough/BlockingSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockingSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/BlockingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAIxC,MAAM,CAAC,OAAO,UAAU,eAAe,IAAI,GAAG,CAAC,OAAO,CAyBrD"}

package/components/VirtualWalkthrough/BlockingSpinner.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { CircularProgress, StyledEngineProvider, useTheme } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function BlockingSpinner() {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(StyledEngineProvider, {
+    injectFirst: true,
+    children: /*#__PURE__*/_jsx(CircularProgress, {
+      size: "193",
+      sx: {
+        height: '200px',
+        width: '200px',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        margin: 'auto',
+        '& .MuiCircularProgress-svg': {
+          color: theme.palette.TwClrIcnBrand,
+          height: '200px',
+          width: '200px'
+        }
+      }
+    })
+  });
+}

package/components/VirtualWalkthrough/BoundaryRing.d.ts

@@ -0,0 +1,9 @@
+import { Vec3 } from 'playcanvas';
+export type BoundaryRingProps = {
+    center: Vec3;
+    radius: number;
+    groundPlane: Vec3[];
+};
+declare const BoundaryRing: ({ center, radius, groundPlane }: BoundaryRingProps) => import("react/jsx-runtime").JSX.Element;
+export default BoundaryRing;
+//# sourceMappingURL=BoundaryRing.d.ts.map

package/components/VirtualWalkthrough/BoundaryRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoundaryRing.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/BoundaryRing.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAIlC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,IAAI,EAAE,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,iCAAiC,iBAAiB,4CAsBvE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/VirtualWalkthrough/BoundaryRing.js

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import { Entity } from '@playcanvas/react';
+import { Script } from '@playcanvas/react/components';
+import { useApp } from '@playcanvas/react/hooks';
+import { BoundaryRingScript } from './boundary-ring';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BoundaryRing = ({
+  center,
+  radius,
+  groundPlane
+}) => {
+  const app = useApp();
+  useEffect(() => {
+    // Set imperatively rather than via reactive Script props. @playcanvas/react wraps Script
+    // in memo() whose shallowEquals returns early on the first prop with a .equals() method
+    // (Vec3), so any prop after a Vec3 is never compared and would not propagate.
+    // @ts-expect-error - scripts are added dynamically to the entity
+    const script = app.root.findByName('boundary-ring')?.script?.boundaryRing;
+    if (script) {
+      script.center = center;
+      script.radius = radius;
+      script.groundPlane = groundPlane;
+      script.rebuild();
+    }
+  }, [app, center, radius, groundPlane]);
+  return /*#__PURE__*/_jsx(Entity, {
+    name: "boundary-ring",
+    children: /*#__PURE__*/_jsx(Script, {
+      script: BoundaryRingScript
+    })
+  });
+};
+export default BoundaryRing;

package/components/VirtualWalkthrough/CameraInfo.d.ts

@@ -0,0 +1,16 @@
+export interface CameraInfoStrings {
+    cameraInfo: string;
+    cameraPosition: string;
+    cameraFocusPoint: string;
+}
+export interface CameraState {
+    position: [number, number, number];
+    focus: [number, number, number];
+}
+interface CameraInfoProps {
+    strings: CameraInfoStrings;
+    getCameraState: () => CameraState | null;
+}
+declare const CameraInfo: ({ strings, getCameraState }: CameraInfoProps) => import("react/jsx-runtime").JSX.Element | null;
+export default CameraInfo;
+//# sourceMappingURL=CameraInfo.d.ts.map

package/components/VirtualWalkthrough/CameraInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CameraInfo.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/CameraInfo.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AAyBD,UAAU,eAAe;IACvB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,cAAc,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;CAC1C;AAED,QAAA,MAAM,UAAU,GAAI,6BAA6B,eAAe,mDA8C/D,CAAC;AAEF,eAAe,UAAU,CAAC"}