@webspatial/react-sdk 1.6.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +270 -0
- package/dist/Model-DO5ps8NA.d.ts +35 -0
- package/dist/Reality-BDyKL6th.d.ts +256 -0
- package/dist/Reality-DO-itiWW.d.ts +33 -0
- package/dist/SceneGraph-DxH74y6-.d.ts +214 -0
- package/dist/chunk-6JSRUX7P.js +2 -0
- package/dist/chunk-6JSRUX7P.js.map +1 -0
- package/dist/chunk-BTLTBCA7.js +2 -0
- package/dist/chunk-BTLTBCA7.js.map +1 -0
- package/dist/chunk-GG2QK5MA.js +2 -0
- package/dist/chunk-GG2QK5MA.js.map +1 -0
- package/dist/chunk-IOLNY4GP.js +2 -0
- package/dist/chunk-IOLNY4GP.js.map +1 -0
- package/dist/chunk-NWVQY6CN.js +2 -0
- package/dist/chunk-NWVQY6CN.js.map +1 -0
- package/dist/chunk-NXEOIP4Z.js +2 -0
- package/dist/chunk-NXEOIP4Z.js.map +1 -0
- package/dist/chunk-PDUEHFTO.js +2 -0
- package/dist/chunk-PDUEHFTO.js.map +1 -0
- package/dist/chunk-QHUROD77.js +2 -0
- package/dist/chunk-QHUROD77.js.map +1 -0
- package/dist/chunk-UHEO47WY.js +2 -0
- package/dist/chunk-UHEO47WY.js.map +1 -0
- package/dist/chunk-WDOPCAA3.js +19 -0
- package/dist/chunk-WDOPCAA3.js.map +1 -0
- package/dist/eager.d.ts +46 -0
- package/dist/eager.js +8 -0
- package/dist/eager.js.map +1 -0
- package/dist/experimental.d.ts +24 -0
- package/dist/experimental.js +8 -0
- package/dist/experimental.js.map +1 -0
- package/dist/index.d.ts +70 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -0
- package/dist/internal/facades-client.d.ts +50 -0
- package/dist/internal/facades-client.js +3 -0
- package/dist/internal/facades-client.js.map +1 -0
- package/dist/jsx/jsx-dev-runtime.d.ts +7 -79
- package/dist/jsx/jsx-dev-runtime.js +1 -66
- package/dist/jsx/jsx-dev-runtime.js.map +1 -1
- package/dist/jsx/jsx-runtime.d.ts +81 -2
- package/dist/jsx/jsx-runtime.js +1 -66
- package/dist/jsx/jsx-runtime.js.map +1 -1
- package/dist/jsx-shared-CFDVUVpc.d.ts +16 -0
- package/dist/motionBindingTypes-CjxIC5bP.d.ts +25 -0
- package/dist/runtime/registerEagerEntry.d.ts +8 -0
- package/dist/runtime/registerEagerEntry.js +2 -0
- package/dist/runtime/registerEagerEntry.js.map +1 -0
- package/dist/spatial.d.ts +25 -0
- package/dist/spatial.js +7 -0
- package/dist/spatial.js.map +1 -0
- package/dist/useAnimation-C1LXt-xO.d.ts +28 -0
- package/dist/useMetrics-Bm_Urbtp.d.ts +96 -0
- package/package.json +53 -33
- package/dist/default/index.d.ts +0 -408
- package/dist/default/index.js +0 -3852
- package/dist/default/index.js.map +0 -1
- package/dist/jsx/jsx-dev-runtime.web.d.ts +0 -2
- package/dist/jsx/jsx-dev-runtime.web.js +0 -18
- package/dist/jsx/jsx-dev-runtime.web.js.map +0 -1
- package/dist/jsx/jsx-runtime.web.d.ts +0 -1
- package/dist/jsx/jsx-runtime.web.js +0 -18
- package/dist/jsx/jsx-runtime.web.js.map +0 -1
- package/dist/web/index.d.ts +0 -408
- package/dist/web/index.js +0 -3905
- package/dist/web/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -13,3 +13,273 @@ The React SDK from the WebSpatial SDK makes the WebSpatial API immediately avail
|
|
|
13
13
|
- [Quick Example](https://webspatial.dev/docs/quick-example)
|
|
14
14
|
- [Core Concepts](https://webspatial.dev/docs/core-concepts)
|
|
15
15
|
- [Development Guide](https://webspatial.dev/docs/development-guide)
|
|
16
|
+
|
|
17
|
+
## Web-first, spatial-enhanced
|
|
18
|
+
|
|
19
|
+
`@webspatial/react-sdk` v1 ships as a **lean default entry plus a dynamically loaded spatial chunk**. Plain web users (Chrome, Safari, Firefox — anywhere `navigator.userAgent` does not match a WebSpatial runtime) pay only the small default bundle and see the documented per-component fallback markup. The spatial implementation is fetched over the network only when the application opts in via `bootSpatial()` from a WebSpatial-capable runtime (Apple Vision Pro / PICO OS WebSpatial shells).
|
|
20
|
+
|
|
21
|
+
**Recommended (React):** wrap spatial UI in `<SpatialBoot>` — the SDK calls `bootSpatial()` after mount and mounts `children` only after boot succeeds. On `WebSpatialBootError`, handle `onError`; `children` stay unmounted.
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { SpatialBoot, WebSpatialBootError } from '@webspatial/react-sdk'
|
|
25
|
+
|
|
26
|
+
export function AppRoot() {
|
|
27
|
+
return (
|
|
28
|
+
<SpatialBoot
|
|
29
|
+
onError={(err: WebSpatialBootError) => {
|
|
30
|
+
// show error UI; retry with bootSpatial() if needed
|
|
31
|
+
console.error(err)
|
|
32
|
+
}}
|
|
33
|
+
>
|
|
34
|
+
<App />
|
|
35
|
+
</SpatialBoot>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
While boot is in flight, `children` are not mounted (render nothing). Show loading UI in your app layout around `<SpatialBoot>` if needed.
|
|
41
|
+
|
|
42
|
+
**CSR-only optimization:** you may `await bootSpatial()` before `createRoot().render(<SpatialBoot>…)` to shorten the blank period; Next.js / Remix typically use `<SpatialBoot>` inside a `'use client'` subtree instead.
|
|
43
|
+
|
|
44
|
+
```ts
|
|
45
|
+
import { bootSpatial } from '@webspatial/react-sdk'
|
|
46
|
+
|
|
47
|
+
await bootSpatial() // plain web: immediate; WebSpatial: loads chunk
|
|
48
|
+
createRoot(el).render(
|
|
49
|
+
<SpatialBoot>
|
|
50
|
+
<App />
|
|
51
|
+
</SpatialBoot>,
|
|
52
|
+
)
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Advanced: imperative `bootSpatial()` / `onSpatialLoadError`; `useSpatialReady()` for custom capability UI without `<SpatialBoot>`. See `docs/design/spatial-boot-component.md`.
|
|
56
|
+
|
|
57
|
+
### Default fallbacks per component
|
|
58
|
+
|
|
59
|
+
Every facade in the default entry has a documented fallback rendered in plain web / SSR / pre-boot:
|
|
60
|
+
|
|
61
|
+
| Public name | Fallback rendering in non-WebSpatial browsers |
|
|
62
|
+
| ------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
|
|
63
|
+
| `Model` | Native `<model>` element (with spatial-only event props stripped) |
|
|
64
|
+
| `Reality` | Single `<div aria-hidden="true">` placeholder preserving the layout box |
|
|
65
|
+
| `Entity` / `Box` / `Sphere` / `Cone` / `Cylinder` / `Plane` / `*Entity` family | `null` (children NOT mounted) |
|
|
66
|
+
| `Material` / `Texture` / `ModelAsset` / `AttachmentAsset` / `UnlitMaterial` | `null` |
|
|
67
|
+
| `SceneGraph` / `World` | `null` (children NOT mounted) |
|
|
68
|
+
|
|
69
|
+
The full normative table lives in [`openspec/changes/lazy-load-spatial-runtime/specs/spatial-lazy-load/spec.md`](../../openspec/changes/lazy-load-spatial-runtime/specs/spatial-lazy-load/spec.md) — search for "Component facades" and "Hook placeholders".
|
|
70
|
+
|
|
71
|
+
> The factory HOCs `withSpatialized2DElementContainer` and `withSpatialMonitor` are **internal-only** in v2 — the documented public mechanism for wrapping intrinsic elements is the `enable-xr` / `enable-xr-monitor` JSX marker (see "JSX markers" below). For the rare case where you need a wrapped component as a value (e.g. to compose with another HOC like react-spring's `animated(...)`), use the recipe in "Advanced: composing with third-party HOCs" further down.
|
|
72
|
+
|
|
73
|
+
### Custom wrappers (escape hatch)
|
|
74
|
+
|
|
75
|
+
Facades intentionally do NOT accept a generic `fallback` prop in v1; the per-component defaults above are fixed. If you need a different fallback (e.g. a CSS-only 3D preview while the spatial chunk loads), write a small wrapper:
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import { Model, useSpatialReady } from '@webspatial/react-sdk'
|
|
79
|
+
|
|
80
|
+
function MyModelOrSkeleton(props: ComponentProps<typeof Model>) {
|
|
81
|
+
const ready = useSpatialReady()
|
|
82
|
+
if (!ready) {
|
|
83
|
+
// Your custom fallback. Render any HTML you like here; once `ready`
|
|
84
|
+
// flips true the next React commit mounts the real <Model />.
|
|
85
|
+
return <div className="model-skeleton" />
|
|
86
|
+
}
|
|
87
|
+
return <Model {...props} />
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
`useSpatialReady()` is hydration-safe (`useSyncExternalStore` with a stable server snapshot), so this pattern works in CSR, SSR, and React Server Components alike.
|
|
92
|
+
|
|
93
|
+
### Advanced: composing with third-party HOCs
|
|
94
|
+
|
|
95
|
+
The JSX marker `<div enable-xr>` covers ~all consumer needs, but it produces a JSX element at the call site — not a _component type_ you can pass to a third-party HOC like `animated(...)`, `motion(...)`, or `styled(...)`. Wrap your own `forwardRef` shim around the marker and pass _that_ to the third-party HOC:
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
import { forwardRef } from 'react'
|
|
99
|
+
import { animated, useSpring } from '@react-spring/web'
|
|
100
|
+
|
|
101
|
+
// `tsconfig.json` MUST set `"jsxImportSource": "@webspatial/react-sdk"` for
|
|
102
|
+
// `enable-xr` to compile into the real spatial wrapper.
|
|
103
|
+
const SpatialDiv = forwardRef<
|
|
104
|
+
HTMLDivElement,
|
|
105
|
+
React.ComponentPropsWithRef<'div'>
|
|
106
|
+
>(function SpatialDiv(props, ref) {
|
|
107
|
+
return <div enable-xr ref={ref} {...props} />
|
|
108
|
+
})
|
|
109
|
+
SpatialDiv.displayName = 'SpatialDiv'
|
|
110
|
+
|
|
111
|
+
const AnimatedDiv = animated(SpatialDiv)
|
|
112
|
+
|
|
113
|
+
export function MyPanel() {
|
|
114
|
+
const [style] = useSpring(() => ({ '--xr-back': '40' }))
|
|
115
|
+
return <AnimatedDiv style={style} className="my-panel" />
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
Why a shim is required: the spatial wrapping logic lives in the SDK's JSX runtime (resolved via `tsconfig.jsxImportSource`), so it only fires when the JSX _call site_ is parsed by your bundler. A `forwardRef` shim moves that call site into a component module the bundler compiles, then exposes the resulting component as a stable value for the third-party HOC.
|
|
120
|
+
|
|
121
|
+
### React 18+ peer dependency
|
|
122
|
+
|
|
123
|
+
`react` and `react-dom` are **required** peer dependencies (`>=18.0`). The SDK uses `useSyncExternalStore` for hydration-safe readiness; older React versions are unsupported in v1.
|
|
124
|
+
|
|
125
|
+
### Bundler compatibility
|
|
126
|
+
|
|
127
|
+
The SDK relies on three bundler capabilities to deliver its size budget: ESM resolution, the `exports` package.json field, and dynamic `import()` with code-splitting. **Tested-target list (non-normative)**: Vite ≥ 4, Webpack ≥ 5, Rollup ≥ 3, Rspack ≥ 1 (covered by `apps/spatial-rspack-min`), esbuild ≥ 0.18 with `splitting: true`, Next.js App Router (Webpack mode), Next.js Pages Router, React Router 7 (Remix-style SSR + Vite — `apps/spatial-remix-min`). See the [migration guide](../../docs/migration/lazy-load-spatial-runtime.md#bundler-compatibility) for environments that are out of scope for v1 (Module Federation, Next.js Turbopack, Webpack 4, CommonJS-only pipelines).
|
|
128
|
+
|
|
129
|
+
### Two distribution forms: default vs eager
|
|
130
|
+
|
|
131
|
+
The package publishes two entry roots with the **same export names**, so you can switch by changing only the import path:
|
|
132
|
+
|
|
133
|
+
| Entry | Import | Choose when |
|
|
134
|
+
| ------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
135
|
+
| **Default (lazy)** | `@webspatial/react-sdk` | Web-first progressive enhancement; **SSR**, streaming SSR, or any page whose **server-rendered HTML** should include façade fallbacks for spatial primitives. Smallest synchronous footprint (~5 KB marginal delta in the SDK’s §9.2 fixture). |
|
|
136
|
+
| **Eager** | `@webspatial/react-sdk/eager` | Spatial-first apps (fixed WebSpatial shells, internal AVP / PICO surfaces) where you want **one network request** and no real `bootSpatial()` work — at the cost of inlining the full spatial implementation (roughly the same bytes as lazy-loading `dist/spatial.js`; no separate product size cap). |
|
|
137
|
+
|
|
138
|
+
**SSR / CSR routing**
|
|
139
|
+
|
|
140
|
+
- Hydration-safe façade SSR (`useSpatialReady` + stable server snapshot → fallback on server and during the hydration pass) is the contract for **`@webspatial/react-sdk`** only.
|
|
141
|
+
- Spatial primitives imported from **`@webspatial/react-sdk/eager`** MUST mount on the **client** only. Server-rendering those components is **not** a supported configuration: use the default entry for SSR pages, or CSR-gate the subtree (for example Next.js `dynamic(..., { ssr: false })`, or render spatial UI only after `typeof window !== 'undefined'`).
|
|
142
|
+
|
|
143
|
+
**Other rules**
|
|
144
|
+
|
|
145
|
+
- Migrating between entries is **import-root-only**; on eager, `bootSpatial()` / `isSpatialReady()` / `useSpatialReady()` are **compatibility stubs** (`bootSpatial()` resolves immediately; readiness always reports ready).
|
|
146
|
+
- **Do not** mix both entry roots in one application bundle — the same symbol name may refer to façade vs real implementation and behavior is undefined.
|
|
147
|
+
|
|
148
|
+
Normative detail: [`openspec/changes/lazy-load-spatial-runtime/specs/spatial-lazy-load/spec.md`](../../openspec/changes/lazy-load-spatial-runtime/specs/spatial-lazy-load/spec.md) — search for "Entry routing" and "CSR-only for spatial primitives".
|
|
149
|
+
|
|
150
|
+
### Stateless utility APIs
|
|
151
|
+
|
|
152
|
+
A subset of the public API works without `bootSpatial()` ever being called and is included in the default-entry size budget:
|
|
153
|
+
|
|
154
|
+
| API | Behavior |
|
|
155
|
+
| ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
156
|
+
| `WebSpatialRuntime.supports(name, tokens?)` | Re-exported from `@webspatial/core-sdk/runtime` (inlined into the default-entry bundle at build time); see `openspec/specs/runtime-capabilities/spec.md` |
|
|
157
|
+
| `bootSpatial()` / `isSpatialReady()` / `useSpatialReady()` / `onSpatialLoadError()` / `WebSpatialBootError` | Boot bridge — see "Web-first, spatial-enhanced" above |
|
|
158
|
+
| `initScene(name, callback, options?)` | No-op without a WebSpatial session; routes to `getSession().initScene(...)` after boot |
|
|
159
|
+
| `convertCoordinate(position, { from, to })` | Throws `WebSpatialRuntimeError` when `supports('convertCoordinate')` is false or before `bootSpatial()` resolves; converts via the spatial scene when ready |
|
|
160
|
+
| `enableDebugTool()` | SSR-safe no-op; in browsers attaches `inspectCurrentSpatialScene` and `getSpatialized2DElement` to `window` (the diagnostics themselves require `bootSpatial()` to be awaited) |
|
|
161
|
+
| `version` | Package version constant (build-time injected) |
|
|
162
|
+
|
|
163
|
+
The full normative contract lives in [`openspec/changes/lazy-load-spatial-runtime/specs/spatial-lazy-load/spec.md`](../../openspec/changes/lazy-load-spatial-runtime/specs/spatial-lazy-load/spec.md) — search for "Stateless utility APIs and pure re-exports". Internal `Model` / `SpatializedContainer` host wrappers use `useSyncExternalStore` for SSR + hydration — you do **not** wrap the app in a provider for that.
|
|
164
|
+
|
|
165
|
+
### Spatial hooks
|
|
166
|
+
|
|
167
|
+
Import stable hooks from the default entry and experimental animation hooks from the experimental entry:
|
|
168
|
+
|
|
169
|
+
```ts
|
|
170
|
+
import { useMetrics } from '@webspatial/react-sdk'
|
|
171
|
+
import { useAnimation } from '@webspatial/react-sdk/experimental'
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
`useMetrics()` has a stable web placeholder. A component instance that first
|
|
175
|
+
invokes it before `bootSpatial()` resolves keeps that placeholder until it
|
|
176
|
+
unmounts and remounts.
|
|
177
|
+
|
|
178
|
+
`useAnimation(config)` has no web fallback. Call it only from components that
|
|
179
|
+
mount after spatial readiness, such as children of `<SpatialBoot>` or a tree
|
|
180
|
+
rendered after an explicit `await bootSpatial()`. Calling it before readiness
|
|
181
|
+
throws `WebSpatialRuntimeError` with capability `useAnimation`.
|
|
182
|
+
|
|
183
|
+
### RSC, server requests, and runtime detection
|
|
184
|
+
|
|
185
|
+
The default entry carries `'use client'` at the top of its emitted `dist/index.js`. Frameworks that support React Server Components treat imports from `@webspatial/react-sdk` as a **client boundary**: you can still **render** facade components from a Server Component file (they become client components), but you cannot **call** hook-style APIs from server-only modules.
|
|
186
|
+
|
|
187
|
+
If you need to **branch server-rendered HTML** on the incoming request (e.g. different hero for WebSpatial-capable shells vs plain browsers), base that decision on the **HTTP `User-Agent`** string and the **official WebSpatial documentation** for how to interpret it — for example [Introduction](https://webspatial.dev/docs/introduction) and [Development Guide](https://webspatial.dev/docs/development-guide). **Do not rely on undocumented SDK helpers** for environment detection in application code.
|
|
188
|
+
|
|
189
|
+
## SpatialDiv lifecycle differs from a plain `<div>`
|
|
190
|
+
|
|
191
|
+
A `<div enable-xr>` (SpatialDiv) is **not** a plain `<div>`. In a WebSpatial runtime the SDK renders your content into a portal whose host DOM node is created, and may be **recreated**, by the SDK — and the hidden layout box you see in the React tree is **not necessarily the same DOM node** as the visible portal host. In plain-web fallback it renders a single host element.
|
|
192
|
+
|
|
193
|
+
Because of this, **do not reach into child DOM refs inside an `enable-xr` container to synchronize layout or attach an external renderer** (Three.js, a `<canvas>` 2D context, a video player, etc.). Those child nodes may be detached/recreated under you, so a one-shot `useEffect([])` that captures `ref.current` will silently attach to a stale node.
|
|
194
|
+
|
|
195
|
+
### `onSpatialContentReady` fires only in a WebSpatial runtime
|
|
196
|
+
|
|
197
|
+
`onSpatialContentReady` is a **spatial-content-host signal**: it is invoked (in `useLayoutEffect` timing) **only when a real WebSpatial spatial content host exists** — i.e. in a WebSpatial runtime after the spatial content has committed. `ctx.host` is always that connected spatial host, and you can return a cleanup that runs on teardown / re-ready.
|
|
198
|
+
|
|
199
|
+
It does **NOT** fire on plain web (no WebSpatial runtime), nor before `bootSpatial()` has produced a spatial host. For the flat-web presentation, attach your renderer with your **own** `ref` + effect on your **own** element (see the second example), optionally branching on `useSpatialReady()`.
|
|
200
|
+
|
|
201
|
+
### Do — spatial path via `onSpatialContentReady` (+ cleanup)
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
<div
|
|
205
|
+
enable-xr
|
|
206
|
+
onSpatialContentReady={(ctx) => {
|
|
207
|
+
// Runs ONLY in a WebSpatial runtime. ctx.host is the connected spatial host.
|
|
208
|
+
const renderer = new THREE.WebGLRenderer()
|
|
209
|
+
renderer.setSize(ctx.host.clientWidth, ctx.host.clientHeight)
|
|
210
|
+
ctx.host.appendChild(renderer.domElement)
|
|
211
|
+
|
|
212
|
+
// Returned cleanup runs on unmount / before the next ready edge.
|
|
213
|
+
return () => {
|
|
214
|
+
renderer.dispose()
|
|
215
|
+
renderer.domElement.remove()
|
|
216
|
+
}
|
|
217
|
+
}}
|
|
218
|
+
/>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Do — flat-web path via your own `ref` + effect
|
|
222
|
+
|
|
223
|
+
```tsx
|
|
224
|
+
// Plain web (no WebSpatial runtime): onSpatialContentReady does NOT fire, so
|
|
225
|
+
// initialize the flat presentation from YOUR OWN element with a normal effect.
|
|
226
|
+
function FlatRenderer() {
|
|
227
|
+
const slotRef = useRef<HTMLDivElement>(null)
|
|
228
|
+
const ready = useSpatialReady() // true only in a WebSpatial runtime
|
|
229
|
+
|
|
230
|
+
useLayoutEffect(() => {
|
|
231
|
+
if (ready) return // spatial runtime is handled by onSpatialContentReady
|
|
232
|
+
const el = slotRef.current
|
|
233
|
+
if (!el) return
|
|
234
|
+
const renderer = new THREE.WebGLRenderer()
|
|
235
|
+
el.appendChild(renderer.domElement)
|
|
236
|
+
return () => {
|
|
237
|
+
renderer.dispose()
|
|
238
|
+
renderer.domElement.remove()
|
|
239
|
+
}
|
|
240
|
+
}, [ready])
|
|
241
|
+
|
|
242
|
+
return (
|
|
243
|
+
<div enable-xr onSpatialContentReady={(ctx) => attachSpatial(ctx.host)}>
|
|
244
|
+
<div ref={slotRef} /> {/* your own element, your own ref — flat path */}
|
|
245
|
+
</div>
|
|
246
|
+
)
|
|
247
|
+
}
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
### Don't — capture a child ref in `useEffect([])` assuming a spatial host
|
|
251
|
+
|
|
252
|
+
```tsx
|
|
253
|
+
// ANTI-PATTERN: fragile. The captured node may be recreated or split across
|
|
254
|
+
// a hidden layout host and a visible portal host, so `el` can become stale
|
|
255
|
+
// and the renderer attaches to a detached/wrong node. It also conflates the
|
|
256
|
+
// spatial and flat-web paths into one runtime-blind effect.
|
|
257
|
+
function Broken() {
|
|
258
|
+
const ref = useRef<HTMLDivElement>(null)
|
|
259
|
+
useEffect(() => {
|
|
260
|
+
const el = ref.current!
|
|
261
|
+
const renderer = new THREE.WebGLRenderer()
|
|
262
|
+
el.appendChild(renderer.domElement) // ← may attach to a stale node
|
|
263
|
+
}, [])
|
|
264
|
+
return (
|
|
265
|
+
<div enable-xr>
|
|
266
|
+
<div ref={ref} /> {/* child DOM ref is NOT a supported spatial attach point */}
|
|
267
|
+
</div>
|
|
268
|
+
)
|
|
269
|
+
}
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
For layout/size changes prefer **declarative React updates** (props/state) rather than imperative DOM measurement of child refs.
|
|
273
|
+
|
|
274
|
+
### Nested ordering note
|
|
275
|
+
|
|
276
|
+
`onSpatialContentReady` ordering guarantees are runtime-scoped:
|
|
277
|
+
|
|
278
|
+
- In a WebSpatial runtime, the parent `SpatialDiv` callback runs **before** the child callback on the same ready edge.
|
|
279
|
+
- In non-WebSpatial fallback (plain web DOM), parent/child ordering is **not** a guaranteed contract and should be treated as unspecified.
|
|
280
|
+
|
|
281
|
+
Recommended practice: initialize imperative renderers from each container's own `ctx.host` and avoid coupling setup logic to parent/child callback sequence in fallback web mode.
|
|
282
|
+
|
|
283
|
+
## SpatialDiv CSS and transforms
|
|
284
|
+
|
|
285
|
+
Spatial transforms are sampled from an off-screen **probe** DOM node, not from the visible portal surface. Tag/class selectors, probe vs. host split, and workarounds are documented in [WebSpatial Quirks — SpatialDiv / `enable-xr` and CSS](../../docs/webspatial-quirks.md). Maintainer architecture notes live in [`src/spatialized-container/ARCHITECTURE.md`](src/spatialized-container/ARCHITECTURE.md).
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import * as _webspatial_core_sdk from '@webspatial/core-sdk';
|
|
3
|
+
import { S as SpatializedMotionBinding } from './motionBindingTypes-CjxIC5bP.js';
|
|
4
|
+
import { S as SpatializedStatic3DContainerProps, a as SpatializedStatic3DElementRef, b as SpatialTapEvent, c as SpatialDragStartEvent, d as SpatialDragEvent, e as SpatialDragEndEvent, f as SpatialRotateEvent, g as SpatialRotateEndEvent, h as SpatialMagnifyEvent, i as SpatialMagnifyEndEvent, M as ModelLoadEvent, j as SpatialEventOptions } from './Reality-BDyKL6th.js';
|
|
5
|
+
|
|
6
|
+
type ModelProps = SpatializedStatic3DContainerProps & {
|
|
7
|
+
'enable-xr'?: boolean;
|
|
8
|
+
};
|
|
9
|
+
type ModelRef = SpatializedStatic3DElementRef;
|
|
10
|
+
declare const Model: React$1.ForwardRefExoticComponent<{
|
|
11
|
+
onSpatialTap?: ((event: SpatialTapEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
12
|
+
onSpatialDragStart?: ((event: SpatialDragStartEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
13
|
+
onSpatialDrag?: ((event: SpatialDragEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
14
|
+
onSpatialDragEnd?: ((event: SpatialDragEndEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
15
|
+
onSpatialRotate?: ((event: SpatialRotateEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
16
|
+
onSpatialRotateEnd?: ((event: SpatialRotateEndEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
17
|
+
onSpatialMagnify?: ((event: SpatialMagnifyEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
18
|
+
onSpatialMagnifyEnd?: ((event: SpatialMagnifyEndEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
19
|
+
} & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onLoad" | "onError"> & {
|
|
20
|
+
src?: string;
|
|
21
|
+
poster?: string;
|
|
22
|
+
autoPlay?: boolean;
|
|
23
|
+
loop?: boolean;
|
|
24
|
+
loading?: _webspatial_core_sdk.ModelLoadingMode;
|
|
25
|
+
stagemode?: _webspatial_core_sdk.StageMode;
|
|
26
|
+
children?: React.ReactNode;
|
|
27
|
+
onLoad?: (event: ModelLoadEvent) => void;
|
|
28
|
+
onError?: (event: ModelLoadEvent) => void;
|
|
29
|
+
spatialEventOptions?: SpatialEventOptions;
|
|
30
|
+
'xr-animation'?: SpatializedMotionBinding;
|
|
31
|
+
} & {
|
|
32
|
+
'enable-xr'?: boolean;
|
|
33
|
+
} & React$1.RefAttributes<SpatializedStatic3DElementRef>>;
|
|
34
|
+
|
|
35
|
+
export { Model as M, type ModelProps as a, type ModelRef as b };
|
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
import React__default, { ElementType } from 'react';
|
|
2
|
+
import { S as SpatializedMotionBinding } from './motionBindingTypes-CjxIC5bP.js';
|
|
3
|
+
import * as _webspatial_core_sdk from '@webspatial/core-sdk';
|
|
4
|
+
import { Vec3, SpatialTapEvent as SpatialTapEvent$1, SpatialDragStartEvent as SpatialDragStartEvent$1, SpatialDragEvent as SpatialDragEvent$1, SpatialDragEndEvent as SpatialDragEndEvent$1, SpatialRotateEvent as SpatialRotateEvent$1, SpatialRotateEndEvent as SpatialRotateEndEvent$1, SpatialMagnifyEvent as SpatialMagnifyEvent$1, SpatialMagnifyEndEvent as SpatialMagnifyEndEvent$1, ModelLoadingMode, StageMode, SpatialObject, SpatialSession, SpatializedDynamic3DElement, SpatialEntity, AnimatedProps, Quaternion } from '@webspatial/core-sdk';
|
|
5
|
+
|
|
6
|
+
/** Connected content root for imperative mounting (portal root or web fallback host). */
|
|
7
|
+
type SpatialContentReadyContext = {
|
|
8
|
+
host: HTMLElement;
|
|
9
|
+
};
|
|
10
|
+
type SpatialContentReadyCallback = (ctx: SpatialContentReadyContext) => void | (() => void);
|
|
11
|
+
/** Options for spatial pointer/gesture behavior (not DOM attributes). */
|
|
12
|
+
type SpatialEventOptions = {
|
|
13
|
+
/**
|
|
14
|
+
* Direction vector for rotate gesture constraint. `[0, 0, 0]` or omit = unconstrained.
|
|
15
|
+
*/
|
|
16
|
+
constrainedToAxis?: Vec3 | readonly [number, number, number];
|
|
17
|
+
};
|
|
18
|
+
type SpatialEventProps<T extends SpatializedElementRef> = {
|
|
19
|
+
onSpatialTap?: (event: SpatialTapEvent<T>) => void;
|
|
20
|
+
onSpatialDragStart?: (event: SpatialDragStartEvent<T>) => void;
|
|
21
|
+
onSpatialDrag?: (event: SpatialDragEvent<T>) => void;
|
|
22
|
+
onSpatialDragEnd?: (event: SpatialDragEndEvent<T>) => void;
|
|
23
|
+
onSpatialRotate?: (event: SpatialRotateEvent<T>) => void;
|
|
24
|
+
onSpatialRotateEnd?: (event: SpatialRotateEndEvent<T>) => void;
|
|
25
|
+
onSpatialMagnify?: (event: SpatialMagnifyEvent<T>) => void;
|
|
26
|
+
onSpatialMagnifyEnd?: (event: SpatialMagnifyEndEvent<T>) => void;
|
|
27
|
+
};
|
|
28
|
+
type Spatialized2DElementContainerProps<P extends ElementType> = SpatialEventProps<SpatializedElementRef> & React__default.ComponentPropsWithRef<'div'> & {
|
|
29
|
+
component: P;
|
|
30
|
+
spatialEventOptions?: SpatialEventOptions;
|
|
31
|
+
onSpatialContentReady?: SpatialContentReadyCallback;
|
|
32
|
+
};
|
|
33
|
+
type SpatializedStatic3DContainerProps = SpatialEventProps<SpatializedStatic3DElementRef> & Omit<React__default.ComponentPropsWithoutRef<'div'>, 'onLoad' | 'onError'> & {
|
|
34
|
+
src?: string;
|
|
35
|
+
poster?: string;
|
|
36
|
+
autoPlay?: boolean;
|
|
37
|
+
loop?: boolean;
|
|
38
|
+
loading?: ModelLoadingMode;
|
|
39
|
+
stagemode?: StageMode;
|
|
40
|
+
children?: React__default.ReactNode;
|
|
41
|
+
onLoad?: (event: ModelLoadEvent) => void;
|
|
42
|
+
onError?: (event: ModelLoadEvent) => void;
|
|
43
|
+
spatialEventOptions?: SpatialEventOptions;
|
|
44
|
+
/** Native root-transform motion binding from `useAnimation()` via `xr-animation`. */
|
|
45
|
+
'xr-animation'?: SpatializedMotionBinding;
|
|
46
|
+
};
|
|
47
|
+
type SpatializedElementRef<T extends HTMLElement = HTMLElement> = T;
|
|
48
|
+
type SpatializedDivElementRef = SpatializedElementRef<HTMLDivElement>;
|
|
49
|
+
type SpatializedStatic3DElementRef = SpatializedDivElementRef & {
|
|
50
|
+
currentSrc: string;
|
|
51
|
+
ready: Promise<ModelLoadEvent>;
|
|
52
|
+
entityTransform: DOMMatrixReadOnly;
|
|
53
|
+
play(): Promise<void>;
|
|
54
|
+
pause(): Promise<void>;
|
|
55
|
+
readonly paused: boolean;
|
|
56
|
+
readonly duration: number;
|
|
57
|
+
playbackRate: number;
|
|
58
|
+
currentTime: number;
|
|
59
|
+
};
|
|
60
|
+
type CurrentTarget<T extends SpatializedElementRef> = {
|
|
61
|
+
currentTarget: T;
|
|
62
|
+
};
|
|
63
|
+
type SpatialTapEvent<T extends SpatializedElementRef = SpatializedElementRef> = SpatialTapEvent$1 & CurrentTarget<T> & {
|
|
64
|
+
readonly offsetX: number;
|
|
65
|
+
readonly offsetY: number;
|
|
66
|
+
readonly offsetZ: number;
|
|
67
|
+
readonly clientX: number;
|
|
68
|
+
readonly clientY: number;
|
|
69
|
+
readonly clientZ: number;
|
|
70
|
+
};
|
|
71
|
+
type SpatialDragStartEvent<T extends SpatializedElementRef = SpatializedElementRef> = SpatialDragStartEvent$1 & CurrentTarget<T> & {
|
|
72
|
+
readonly offsetX: number;
|
|
73
|
+
readonly offsetY: number;
|
|
74
|
+
readonly offsetZ: number;
|
|
75
|
+
readonly clientX: number;
|
|
76
|
+
readonly clientY: number;
|
|
77
|
+
readonly clientZ: number;
|
|
78
|
+
};
|
|
79
|
+
type SpatialDragEvent<T extends SpatializedElementRef = SpatializedElementRef> = SpatialDragEvent$1 & CurrentTarget<T> & {
|
|
80
|
+
readonly translationX: number;
|
|
81
|
+
readonly translationY: number;
|
|
82
|
+
readonly translationZ: number;
|
|
83
|
+
};
|
|
84
|
+
type SpatialDragEndEvent<T extends SpatializedElementRef = SpatializedElementRef> = SpatialDragEndEvent$1 & CurrentTarget<T>;
|
|
85
|
+
type SpatialRotateEvent<T extends SpatializedElementRef = SpatializedElementRef> = SpatialRotateEvent$1 & CurrentTarget<T> & {
|
|
86
|
+
readonly quaternion: _webspatial_core_sdk.Quaternion;
|
|
87
|
+
};
|
|
88
|
+
type SpatialRotateEndEvent<T extends SpatializedElementRef = SpatializedElementRef> = SpatialRotateEndEvent$1 & CurrentTarget<T>;
|
|
89
|
+
type SpatialMagnifyEvent<T extends SpatializedElementRef = SpatializedElementRef> = SpatialMagnifyEvent$1 & CurrentTarget<T> & {
|
|
90
|
+
readonly magnification: number;
|
|
91
|
+
};
|
|
92
|
+
type SpatialMagnifyEndEvent<T extends SpatializedElementRef = SpatializedElementRef> = SpatialMagnifyEndEvent$1 & CurrentTarget<T>;
|
|
93
|
+
type ModelSpatialTapEvent = SpatialTapEvent<SpatializedStatic3DElementRef>;
|
|
94
|
+
type ModelSpatialDragStartEvent = SpatialDragStartEvent<SpatializedStatic3DElementRef>;
|
|
95
|
+
type ModelSpatialDragEvent = SpatialDragEvent<SpatializedStatic3DElementRef>;
|
|
96
|
+
type ModelSpatialDragEndEvent = SpatialDragEndEvent<SpatializedStatic3DElementRef>;
|
|
97
|
+
type ModelSpatialRotateEvent = SpatialRotateEvent<SpatializedStatic3DElementRef>;
|
|
98
|
+
type ModelSpatialRotateEndEvent = SpatialRotateEndEvent<SpatializedStatic3DElementRef>;
|
|
99
|
+
type ModelSpatialMagnifyEvent = SpatialMagnifyEvent<SpatializedStatic3DElementRef>;
|
|
100
|
+
type ModelSpatialMagnifyEndEvent = SpatialMagnifyEndEvent<SpatializedStatic3DElementRef>;
|
|
101
|
+
type ModelLoadEvent<T extends EventTarget = EventTarget> = CustomEvent & {
|
|
102
|
+
target: T;
|
|
103
|
+
currentTarget: SpatializedStatic3DElementRef;
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* Tracks spatial resources (textures, materials, entities, …) by string id under one Reality.
|
|
108
|
+
*
|
|
109
|
+
* Native creation is async (`createTexture`, `createUnlitMaterial`, …). The map
|
|
110
|
+
* stores `Promise<SpatialObject>` so `add(id, pendingCreation)` can run after `get(id)` — sibling
|
|
111
|
+
* JSX order does not need to match registration order. Callers are responsible for using the
|
|
112
|
+
* correct id for each resource kind (same as with string ids today).
|
|
113
|
+
*
|
|
114
|
+
* `get(id)` before `add()` is fine — resolves when `add()` runs.
|
|
115
|
+
* `has(id)` is true only after `add()`, not after `get()` alone.
|
|
116
|
+
*
|
|
117
|
+
* `subscribe` / `notify`: run when a resource settles, is removed, or updates in place (e.g. texture URL).
|
|
118
|
+
*/
|
|
119
|
+
declare class ResourceRegistry {
|
|
120
|
+
/** Every id maps to a promise — either the real resource from add(), or a placeholder until then. */
|
|
121
|
+
private resources;
|
|
122
|
+
/** ids registered via add(), not get()-only waiters */
|
|
123
|
+
private registered;
|
|
124
|
+
/** If get() ran first, we stash resolve/reject so add() can complete the waiting promise. */
|
|
125
|
+
private deferreds;
|
|
126
|
+
/** Subscribers are notified whenever an id gets a fresh resolved or failed resource attempt. */
|
|
127
|
+
private listeners;
|
|
128
|
+
add<T extends SpatialObject>(id: string, resource: Promise<T>): void;
|
|
129
|
+
subscribe(id: string, listener: () => void): () => void;
|
|
130
|
+
notify(id: string): void;
|
|
131
|
+
has(id: string): boolean;
|
|
132
|
+
get(id: string): Promise<SpatialObject>;
|
|
133
|
+
remove(id: string): void;
|
|
134
|
+
removeAndDestroy(id: string): void;
|
|
135
|
+
destroy(): void;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
type ContainerEntry = {
|
|
139
|
+
instanceId: string;
|
|
140
|
+
container: HTMLElement;
|
|
141
|
+
};
|
|
142
|
+
type ContainersChangeCallback = (containers: ContainerEntry[]) => void;
|
|
143
|
+
declare class AttachmentRegistry {
|
|
144
|
+
private containers;
|
|
145
|
+
private listeners;
|
|
146
|
+
addContainer(name: string, instanceId: string, container: HTMLElement): void;
|
|
147
|
+
removeContainer(name: string, instanceId: string): void;
|
|
148
|
+
getContainers(name: string): ContainerEntry[];
|
|
149
|
+
onContainersChange(name: string, cb: ContainersChangeCallback): () => void;
|
|
150
|
+
private notifyListeners;
|
|
151
|
+
destroy(): void;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
type RealityContextValue = {
|
|
155
|
+
session: SpatialSession;
|
|
156
|
+
reality: SpatializedDynamic3DElement;
|
|
157
|
+
resourceRegistry: ResourceRegistry;
|
|
158
|
+
attachmentRegistry: AttachmentRegistry;
|
|
159
|
+
} | null;
|
|
160
|
+
|
|
161
|
+
interface EntityRefShape {
|
|
162
|
+
convertFromEntityToEntity: (fromEntityId: string, toEntityId: string, position: Vec3) => Promise<Vec3>;
|
|
163
|
+
convertFromEntityToReality: (entityId: string, position: Vec3) => Promise<Vec3>;
|
|
164
|
+
convertFromRealityToEntity: (entityId: string, position: Vec3) => Promise<Vec3>;
|
|
165
|
+
id: string | undefined;
|
|
166
|
+
name: string | undefined;
|
|
167
|
+
entity: SpatialEntity | null;
|
|
168
|
+
}
|
|
169
|
+
declare class EntityRef implements EntityRefShape {
|
|
170
|
+
private _entity;
|
|
171
|
+
private _ctx;
|
|
172
|
+
constructor(entity?: SpatialEntity | null, ctx?: RealityContextValue | null);
|
|
173
|
+
updateEntity(entity?: SpatialEntity | null): void;
|
|
174
|
+
updateCtx(ctx?: RealityContextValue | null): void;
|
|
175
|
+
destroy(): void;
|
|
176
|
+
get entity(): SpatialEntity | null;
|
|
177
|
+
get id(): string | undefined;
|
|
178
|
+
get name(): string | undefined;
|
|
179
|
+
convertFromEntityToEntity(fromEntityId: string, toEntityId: string, position: Vec3): Promise<Vec3>;
|
|
180
|
+
convertFromEntityToReality(entityId: string, position: Vec3): Promise<Vec3>;
|
|
181
|
+
convertFromRealityToEntity(entityId: string, position: Vec3): Promise<Vec3>;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
type EntityProps = {
|
|
185
|
+
id?: string;
|
|
186
|
+
name?: string;
|
|
187
|
+
position?: Vec3;
|
|
188
|
+
rotation?: Vec3;
|
|
189
|
+
scale?: Vec3;
|
|
190
|
+
enableInput?: boolean;
|
|
191
|
+
/** Animation prop returned by useEntityAnimation(). */
|
|
192
|
+
animation?: AnimatedProps;
|
|
193
|
+
};
|
|
194
|
+
type allTarget<T extends EntityRefShape> = {
|
|
195
|
+
target: T;
|
|
196
|
+
currentTarget: T;
|
|
197
|
+
};
|
|
198
|
+
type SpatialTapEntityEvent<T extends EntityRefShape = EntityRefShape> = SpatialTapEvent$1 & allTarget<T> & {
|
|
199
|
+
readonly offsetX: number;
|
|
200
|
+
readonly offsetY: number;
|
|
201
|
+
readonly offsetZ: number;
|
|
202
|
+
readonly clientX: number;
|
|
203
|
+
readonly clientY: number;
|
|
204
|
+
readonly clientZ: number;
|
|
205
|
+
};
|
|
206
|
+
type SpatialDragStartEntityEvent<T extends EntityRefShape = EntityRefShape> = SpatialDragStartEvent$1 & allTarget<T> & {
|
|
207
|
+
readonly offsetX: number;
|
|
208
|
+
readonly offsetY: number;
|
|
209
|
+
readonly offsetZ: number;
|
|
210
|
+
readonly clientX: number;
|
|
211
|
+
readonly clientY: number;
|
|
212
|
+
readonly clientZ: number;
|
|
213
|
+
};
|
|
214
|
+
type SpatialDragEntityEvent<T extends EntityRefShape = EntityRefShape> = SpatialDragEvent$1 & allTarget<T> & {
|
|
215
|
+
readonly translationX: number;
|
|
216
|
+
readonly translationY: number;
|
|
217
|
+
readonly translationZ: number;
|
|
218
|
+
};
|
|
219
|
+
type SpatialDragEndEntityEvent<T extends EntityRefShape = EntityRefShape> = SpatialDragEndEvent$1 & allTarget<T>;
|
|
220
|
+
type SpatialRotateEntityEvent<T extends EntityRefShape = EntityRefShape> = SpatialRotateEvent$1 & allTarget<T> & {
|
|
221
|
+
readonly quaternion: Quaternion;
|
|
222
|
+
};
|
|
223
|
+
type SpatialRotateEndEntityEvent<T extends EntityRefShape = EntityRefShape> = SpatialRotateEndEvent$1 & allTarget<T>;
|
|
224
|
+
type SpatialMagnifyEntityEvent<T extends EntityRefShape = EntityRefShape> = SpatialMagnifyEvent$1 & allTarget<T> & {
|
|
225
|
+
readonly magnification: number;
|
|
226
|
+
};
|
|
227
|
+
type SpatialMagnifyEndEntityEvent<T extends EntityRefShape = EntityRefShape> = SpatialMagnifyEndEvent$1 & allTarget<T>;
|
|
228
|
+
type EntityEventHandler = {
|
|
229
|
+
onSpatialTap?: (event: SpatialTapEntityEvent) => void;
|
|
230
|
+
onSpatialDragStart?: (event: SpatialDragStartEntityEvent) => void;
|
|
231
|
+
onSpatialDrag?: (event: SpatialDragEntityEvent) => void;
|
|
232
|
+
onSpatialDragEnd?: (event: SpatialDragEndEntityEvent) => void;
|
|
233
|
+
spatialEventOptions?: SpatialEventOptions;
|
|
234
|
+
onSpatialRotate?: (event: SpatialRotateEntityEvent) => void;
|
|
235
|
+
onSpatialRotateEnd?: (event: SpatialRotateEndEntityEvent) => void;
|
|
236
|
+
onSpatialMagnify?: (event: SpatialMagnifyEntityEvent) => void;
|
|
237
|
+
onSpatialMagnifyEnd?: (event: SpatialMagnifyEndEntityEvent) => void;
|
|
238
|
+
};
|
|
239
|
+
declare const eventMap: {
|
|
240
|
+
readonly onSpatialTap: "spatialtap";
|
|
241
|
+
readonly onSpatialDragStart: "spatialdragstart";
|
|
242
|
+
readonly onSpatialDrag: "spatialdrag";
|
|
243
|
+
readonly onSpatialDragEnd: "spatialdragend";
|
|
244
|
+
readonly onSpatialRotate: "spatialrotate";
|
|
245
|
+
readonly onSpatialRotateEnd: "spatialrotateend";
|
|
246
|
+
readonly onSpatialMagnify: "spatialmagnify";
|
|
247
|
+
readonly onSpatialMagnifyEnd: "spatialmagnifyend";
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
type RealityProps = Omit<React__default.ComponentPropsWithRef<'div'>, 'onSpatialContentReady'> & EntityEventHandler & {
|
|
251
|
+
/** Native root-transform motion on the Reality container (`SpatializedDynamic3DElement`). */
|
|
252
|
+
'xr-animation'?: SpatializedMotionBinding;
|
|
253
|
+
};
|
|
254
|
+
declare const Reality: React__default.ForwardRefExoticComponent<Omit<RealityProps, "ref"> & React__default.RefAttributes<HTMLElement>>;
|
|
255
|
+
|
|
256
|
+
export { type SpatialDragStartEntityEvent as A, type SpatialMagnifyEndEntityEvent as B, type SpatialMagnifyEntityEvent as C, type SpatialRotateEndEntityEvent as D, type EntityEventHandler as E, type SpatialRotateEntityEvent as F, type SpatialTapEntityEvent as G, type SpatializedDivElementRef as H, type SpatializedElementRef as I, type Spatialized2DElementContainerProps as J, eventMap as K, type ModelLoadEvent as M, Reality as R, type SpatializedStatic3DContainerProps as S, type SpatializedStatic3DElementRef as a, type SpatialTapEvent as b, type SpatialDragStartEvent as c, type SpatialDragEvent as d, type SpatialDragEndEvent as e, type SpatialRotateEvent as f, type SpatialRotateEndEvent as g, type SpatialMagnifyEvent as h, type SpatialMagnifyEndEvent as i, type SpatialEventOptions as j, type EntityProps as k, EntityRef as l, type EntityRefShape as m, type ModelSpatialDragEndEvent as n, type ModelSpatialDragEvent as o, type ModelSpatialDragStartEvent as p, type ModelSpatialMagnifyEndEvent as q, type ModelSpatialMagnifyEvent as r, type ModelSpatialRotateEndEvent as s, type ModelSpatialRotateEvent as t, type ModelSpatialTapEvent as u, type RealityProps as v, type SpatialContentReadyCallback as w, type SpatialContentReadyContext as x, type SpatialDragEndEntityEvent as y, type SpatialDragEntityEvent as z };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import * as _webspatial_core_sdk from '@webspatial/core-sdk';
|
|
3
|
+
import { S as SpatializedMotionBinding } from './motionBindingTypes-CjxIC5bP.js';
|
|
4
|
+
import { b as SpatialTapEvent, a as SpatializedStatic3DElementRef, c as SpatialDragStartEvent, d as SpatialDragEvent, e as SpatialDragEndEvent, f as SpatialRotateEvent, g as SpatialRotateEndEvent, h as SpatialMagnifyEvent, i as SpatialMagnifyEndEvent, M as ModelLoadEvent, j as SpatialEventOptions, v as RealityProps } from './Reality-BDyKL6th.js';
|
|
5
|
+
|
|
6
|
+
declare const Model: React$1.ForwardRefExoticComponent<{
|
|
7
|
+
onSpatialTap?: ((event: SpatialTapEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
8
|
+
onSpatialDragStart?: ((event: SpatialDragStartEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
9
|
+
onSpatialDrag?: ((event: SpatialDragEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
10
|
+
onSpatialDragEnd?: ((event: SpatialDragEndEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
11
|
+
onSpatialRotate?: ((event: SpatialRotateEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
12
|
+
onSpatialRotateEnd?: ((event: SpatialRotateEndEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
13
|
+
onSpatialMagnify?: ((event: SpatialMagnifyEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
14
|
+
onSpatialMagnifyEnd?: ((event: SpatialMagnifyEndEvent<SpatializedStatic3DElementRef>) => void) | undefined;
|
|
15
|
+
} & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onLoad" | "onError"> & {
|
|
16
|
+
src?: string;
|
|
17
|
+
poster?: string;
|
|
18
|
+
autoPlay?: boolean;
|
|
19
|
+
loop?: boolean;
|
|
20
|
+
loading?: _webspatial_core_sdk.ModelLoadingMode;
|
|
21
|
+
stagemode?: _webspatial_core_sdk.StageMode;
|
|
22
|
+
children?: React.ReactNode;
|
|
23
|
+
onLoad?: (event: ModelLoadEvent) => void;
|
|
24
|
+
onError?: (event: ModelLoadEvent) => void;
|
|
25
|
+
spatialEventOptions?: SpatialEventOptions;
|
|
26
|
+
'xr-animation'?: SpatializedMotionBinding;
|
|
27
|
+
} & {
|
|
28
|
+
'enable-xr'?: boolean;
|
|
29
|
+
} & React$1.RefAttributes<SpatializedStatic3DElementRef>>;
|
|
30
|
+
|
|
31
|
+
declare const Reality: React$1.ForwardRefExoticComponent<Omit<RealityProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
|
|
32
|
+
|
|
33
|
+
export { Model as M, Reality as R };
|