@relu-interactives/spatial-ecs 0.2.2

package/dist/docs/guide/components/transform.md

@@ -0,0 +1,155 @@
+# Transform
+
+Position, rotation, and scale of an entity in its parent's local space.  Rotation is stored in **radians** (Euler XYZ). The editor inspector converts to/from degrees for display — do not store degrees in this component. Mutations should go through the `setPosition` / `setRotation` / `setScale` helpers so dependent systems pick up the change.
+
+> **Managed by:** [`TransformSyncSystem`](../systems/transform-sync-system)
+
+## Editor inspector
+
+![Transform inspector](/images/components/Transform.png)
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `position` | `Vec3` | Local position relative to the parent (or world if no parent). |
+| `rotation` | `Vec3` | Local rotation as Euler XYZ in **radians**. |
+| `scale` | `Vec3` | Local scale factors per axis (`1` = identity). |
+
+## API reference
+
+- Class: [`TransformComponent`](../../api/components/classes/TransformComponent.md)
+- Source: [`core/components/Transform.ts`](https://github.com/Relu-Interactives/relu-spatial-ecs-engine/blob/main/core/components/Transform.ts)
+
+## Scripting examples
+
+::: tip Component access patterns
+Use `this.getComponent(X)` to access a component on the **entity this script is attached to**. Use `this.world.getEntityByName` to find another entity by name, then `this.world.getComponent` to read its component:
+
+```typescript
+// Component on the entity this script is on
+const transform = this.getComponent(TransformComponent);
+
+// Component on another entity, found by its scene name
+const other = this.world.getEntityByName("Target");
+if (other) {
+  const transform = this.world.getComponent(other.entityId, TransformComponent);
+}
+```
+
+For `TransformComponent` specifically, `this.transform` is a built-in shorthand — the same component, no lookup needed.
+:::
+
+### Continuous rotation
+
+Rotate an entity on any combination of axes at inspector-controlled speeds.
+
+```typescript
+import { Behaviour } from "@relu-interactives/spatial-ecs";
+import type { FloatInput } from "@relu-interactives/spatial-ecs";
+
+export default class Rotator extends Behaviour {
+  data = {
+    speedX: 0 as FloatInput,
+    speedY: 1 as FloatInput,
+    speedZ: 0 as FloatInput,
+  };
+
+  protected onUpdate() {
+    this.transform.rotation.x += this.data.speedX * this.deltaTime;
+    this.transform.rotation.y += this.data.speedY * this.deltaTime;
+    this.transform.rotation.z += this.data.speedZ * this.deltaTime;
+  }
+}
+```
+
+### Sine-wave bobbing
+
+Animate the entity's Y position with a configurable sine wave, useful for floating objects or UI indicators.
+
+```typescript
+import { Behaviour } from "@relu-interactives/spatial-ecs";
+import type { FloatInput } from "@relu-interactives/spatial-ecs";
+
+export default class Bobber extends Behaviour {
+  data = {
+    amplitude: 0.5 as FloatInput,
+    frequency: 1 as FloatInput,
+  };
+
+  private elapsed = 0;
+  private originY = 0;
+
+  protected init() {
+    this.originY = this.transform.position.y;
+  }
+
+  protected onUpdate() {
+    this.elapsed += this.deltaTime;
+    this.transform.position.y =
+      this.originY + Math.sin(this.elapsed * this.data.frequency) * this.data.amplitude;
+  }
+}
+```
+
+### Via `ComponentInput` in the inspector
+
+You can also pick this component from the inspector using a `ComponentInput` field. Assign any entity in the inspector and the field resolves to the live `TransformComponent` instance at runtime.
+
+```typescript
+import {
+  Behaviour,
+  TransformComponent,
+  type ComponentInput,
+} from "@relu-interactives/spatial-ecs";
+
+export default class Example extends Behaviour {
+  data = {
+    targetTransform: {
+      type: "component",
+      value: null,
+    } as unknown as ComponentInput,
+  };
+
+  protected onUpdate() {
+    const transform = this.data.targetTransform.value as TransformComponent | null;
+    if (!transform) return;
+    // Use the live component instance.
+  }
+}
+```
+
+### Via `EntityInput` in the inspector
+
+Alternatively, pick an entity from the inspector using an `EntityInput` field and then read the component off that entity via `world.getComponent`:
+
+```typescript
+import {
+  Behaviour,
+  TransformComponent,
+  type EntityInput,
+  type WorldEntityView,
+} from "@relu-interactives/spatial-ecs";
+
+export default class Example extends Behaviour {
+  data = {
+    targetEntity: { type: "entity", value: null } as unknown as EntityInput,
+  };
+
+  protected onUpdate() {
+    const entity = this.data.targetEntity.value as WorldEntityView | null;
+    if (!entity) return;
+
+    const transform = this.world.getComponent(
+      entity.entityId,
+      TransformComponent,
+    ) as TransformComponent | null;
+    if (!transform) return;
+    // Use the component on the picked entity.
+  }
+}
+```
+
+::: tip Rotation units
+Rotation is stored and mutated in **radians**. The editor inspector displays degrees — convert with `Math.PI / 180` if you need to enter degree values in code.
+:::

package/dist/docs/guide/components/video.md

@@ -0,0 +1,153 @@
+# Video
+
+Plays a video file as a texture on a quad. Supports green-screen keying (`isGreenScreen`, `backgroundColor`, `similarity`, `smoothness`, `spill`). The video element, texture, and material are runtime-only and re-created when the project loads.
+
+> **Managed by:** [`VideoSystem`](../systems/video-system)
+
+## Editor inspector
+
+![Video inspector](/images/components/Video.png)
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `path` | `string` | Source URL or `localasset://` path of the video file. |
+| `options` | `typeof DEFAULT_VIDEO_OPTIONS` | Playback + green-screen options.  | Field | Default | Description | |---|---|---| | `autoplay` | `false` | Start playback as soon as the video is ready. | | `loop` | `true` | Loop playback indefinitely. | | `volume` | `1` | Linear gain in `[0, 1]`. | | `width` | `1` | Quad width in world units. | | `height` | `1` | Quad height in world units. | | `isGreenScreen` | `false` | Enable chroma keying using the fields below. | | `backgroundColor` | `"#00ff00"` | Color to key out (CSS color string). | | `similarity` | `0.4` | How close a pixel must be to the key to be removed (`0`–`1`). | | `smoothness` | `0.08` | Soft-edge thickness around the key threshold. | | `spill` | `0.12` | Amount of color spill suppression near edges. | | `positional` | `false` | When `true`, the video's audio stream is spatialized using the entity's 3D position. | | `refDistance` | `1` | Distance at which volume is unattenuated (positional only). | | `distanceModel` | `"inverse"` | WebAudio distance model (`linear`, `inverse`, `exponential`). Positional only. | | `rolloffFactor` | `1` | How quickly volume falls off past `refDistance`. Positional only. | |
+| `object` | `THREE.Object3D \| null` | Live three.js object hosting the video quad. `null` until built. |
+| `videoElement` | `HTMLVideoElement \| null` | Underlying HTML video element. `null` until built. |
+| `texture` | `THREE.VideoTexture \| null` | Three.js texture sampling the video element. `null` until built. |
+| `material` | `THREE.Material \| null` | Material rendering the video texture (with green-screen shader when enabled). `null` until built. |
+| `audioNode` | `THREE.Audio<GainNode> \| THREE.PositionalAudio \| null` | THREE.js audio node connected to this video's audio stream via `setMediaElementSource`. Present only in preview when the camera listener is available. `null` in editor mode. |
+| `isPlaying` | `boolean` | Whether the video should be playing. Managed by `VideoSystem` in preview. Non-enumerable — not persisted to snapshots or save data. Set via `play` / `stop`. |
+| `isPaused` | `boolean` | Whether the video is paused mid-playback (position is preserved). Non-enumerable — not persisted to snapshots or save data. Set via `pause` / `play` / `stop`. |
+
+## API reference
+
+- Class: [`VideoComponent`](../../api/components/classes/VideoComponent.md)
+- Source: [`core/components/Video.ts`](https://github.com/Relu-Interactives/relu-spatial-ecs-engine/blob/main/core/components/Video.ts)
+
+## Scripting examples
+
+::: tip Component access patterns
+Use `this.getComponent(X)` to access a component on the **entity this script is attached to**. Use `this.world.getEntityByName` to find another entity by name, then `this.world.getComponent` to read its component:
+
+```typescript
+// Component on the entity this script is on
+const video = this.getComponent(VideoComponent);
+
+// Component on another entity, found by its scene name
+const other = this.world.getEntityByName("Screen");
+if (other) {
+  const video = this.world.getComponent(other.entityId, VideoComponent);
+}
+```
+:::
+
+### Play / pause on key press
+
+Toggle video playback when the player presses Space.
+
+```typescript
+import { Behaviour, VideoComponent, KeyboardKeys } from "@relu-interactives/spatial-ecs";
+
+export default class VideoController extends Behaviour {
+  protected onUpdate() {
+    const video = this.getComponent(VideoComponent);
+    if (!video) return;
+
+    if (this.world.getKeyDown(KeyboardKeys.Space)) {
+      if (video.isPlaying) {
+        video.pause();
+      } else {
+        video.play();
+      }
+    }
+  }
+}
+```
+
+### Inspector-driven volume and loop
+
+Expose volume and loop settings as inspector fields so they can be tuned without re-entering the code.
+
+```typescript
+import { Behaviour, VideoComponent } from "@relu-interactives/spatial-ecs";
+import type { FloatInput, BooleanInput } from "@relu-interactives/spatial-ecs";
+
+export default class VideoSettings extends Behaviour {
+  data = {
+    volume: 1 as FloatInput,
+    loop: true as BooleanInput,
+  };
+
+  protected onUpdate() {
+    const video = this.getComponent(VideoComponent);
+    if (!video) return;
+    video.options.volume = this.data.volume;
+    video.options.loop = this.data.loop;
+  }
+}
+```
+
+### Via `ComponentInput` in the inspector
+
+You can also pick this component from the inspector using a `ComponentInput` field. Assign any entity in the inspector and the field resolves to the live `VideoComponent` instance at runtime.
+
+```typescript
+import {
+  Behaviour,
+  VideoComponent,
+  type ComponentInput,
+} from "@relu-interactives/spatial-ecs";
+
+export default class Example extends Behaviour {
+  data = {
+    targetVideo: {
+      type: "component",
+      value: null,
+    } as unknown as ComponentInput,
+  };
+
+  protected onUpdate() {
+    const video = this.data.targetVideo.value as VideoComponent | null;
+    if (!video) return;
+    // Use the live component instance.
+  }
+}
+```
+
+### Via `EntityInput` in the inspector
+
+Alternatively, pick an entity from the inspector using an `EntityInput` field and then read the component off that entity via `world.getComponent`:
+
+```typescript
+import {
+  Behaviour,
+  VideoComponent,
+  type EntityInput,
+  type WorldEntityView,
+} from "@relu-interactives/spatial-ecs";
+
+export default class Example extends Behaviour {
+  data = {
+    targetEntity: { type: "entity", value: null } as unknown as EntityInput,
+  };
+
+  protected onUpdate() {
+    const entity = this.data.targetEntity.value as WorldEntityView | null;
+    if (!entity) return;
+
+    const video = this.world.getComponent(
+      entity.entityId,
+      VideoComponent,
+    ) as VideoComponent | null;
+    if (!video) return;
+    // Use the component on the picked entity.
+  }
+}
+```
+
+::: tip Playback methods
+Use `video.play()`, `video.pause()`, and `video.stop()` to control playback. These update `isPlaying` / `isPaused` so the `VideoSystem` applies the correct HTML video element call in preview.
+:::

package/dist/docs/guide/concepts.md

@@ -0,0 +1,34 @@
+# Concepts
+
+The ECS is organized around three primitives.
+
+## Entity
+
+An **entity** is just an integer id. It owns no logic and no data on its own, everything is attached as components.
+
+## Component
+
+A **component** is a typed data container. Built-in components include `TransformComponent`, `MeshComponent`, `LightComponent`, `PhysicsComponent`, and many more. Each component:
+
+- Extends the base [`Component`](/api/Component/classes/Component) class.
+- Holds plain state (numbers, strings, vectors, asset URLs).
+
+See the [Component Catalog](./component-catalog) for an alphabetical list with field-level docs.
+
+## System
+
+A **system** queries entities by component shape and applies side effects each frame. Built-in systems handle object management, geometry, transforms, animation, rendering, and so on. As a script author you rarely interact with systems directly — you read and mutate components, and the systems do the rest.
+
+## Behaviour (Scripting)
+
+A **Behaviour** is a user-authored class that runs per-frame logic on a single entity. It has full access to `world`, the entity's `transform`, its three.js `Object3D`, and helpers for hierarchy and math.
+
+By default, Behaviours only execute at preview or runtime. Enable the **Execute in editor** toggle on a script entry in the inspector to run the full lifecycle inside the editor as well. This gives direct access to `this.world.getScene()`, `getCamera()`, and `getRenderer()` — useful for custom shaders, procedural geometry, grass, and other Three.js features the editor palette does not expose.
+
+See [Custom Behaviours](./authoring-a-behaviour) and [Running scripts in the editor](./authoring-a-behaviour#running-scripts-in-the-editor).
+
+## World
+
+The [`World`](/api/index/classes/World) is the runtime gateway you reach from a script via `this.world`. Use it to find entities, read input, query components, and access the scene/camera/renderer.
+
+See the [World](./world-api) for the full method list and recipes.

package/dist/docs/guide/getting-started/creating-objects.md

@@ -0,0 +1,50 @@
+# Creating Objects
+
+Once your scene is open, you can populate it from three places.
+
+![Creating Object example](/images/getting-started/creating-objects/creating-objects.gif)
+
+## 1. From the toolbar
+
+Click the **`+`** button in the [toolbar](./editor/toolbar). A menu lists every spawnable entity kind:
+
+![Toolbar add-object menu open over the viewport.](/images/getting-started/creating-objects/creating-objects-toolbar.png)
+
+- **Primitives:** cube, sphere, plane, cone, cylinder, torus.
+- **Lights:** directional, point, spot, ambient.
+- **Cameras:** perspective, orthographic.
+- **Anchors:** image target, face anchor, geo anchor (per project type).
+- **Empty:** a transform-only entity used as a parent group.
+
+Pick a kind. The editor spawns the entity at the world origin (or as a child of the current selection if it's an anchor type).
+
+## 2. From the hierarchy
+
+The hierarchy panel has its own **`+`** button that opens the same spawn menu.
+
+![Hierarchy panel with the add menu open and a parent selected.](/images/getting-started/creating-objects/creating-objects-hierarchy.png)
+
+
+## 3. From the assets browser
+
+Drag any asset from the [assets browser](./editor/assets-browser) into the viewport or hierarchy:
+
+- **`.glb` / `.gltf`** → spawns a `Model` entity.
+- **`.png` / `.jpg` / `.webp`** → spawns a `Sprite` or `Image` entity (or sets it as a material texture if dropped on a mesh).
+- **`.mp3` / `.wav`** → spawns an `Audio` entity.
+- **`.mp4`** → spawns a `Video` entity.
+- **Behaviour script** → attaches the script to the drop target.
+
+![Dragging a .glb file from the asset browser into the viewport.](/images/getting-started/creating-objects/creating-objects-drag-asset.gif)
+
+## Selecting and arranging
+
+- **Click** an entity in the viewport or hierarchy to select it.
+- **Drag** the gizmo to move, rotate, or scale (toggle modes from the toolbar).
+- **Drag in the hierarchy** to re-parent.
+- **Delete** removes the selected entity (and its children).
+
+## Next
+
+- [Editing inspector values](./editing-objects) — fine-tune components on selected entities.
+- [Spawning](../spawning/) — full reference of every spawnable kind.

package/dist/docs/guide/getting-started/editing-objects.md

@@ -0,0 +1,62 @@
+# Editing Inspector Values
+
+Selecting an entity opens the [Inspector](./editor/inspector) on the right side of the editor. The inspector shows one panel per component attached to that entity, you change the entity's behavior by editing those panel values.
+
+![Editing Inspector Gif](/images/getting-started/editing-objects/editing-objects-inspector.gif)
+
+## Common edits
+
+### Transform
+
+Every entity has a **Transform** panel: position, rotation, and scale. Rotation is shown in **degrees** in the UI but stored in radians at runtime. **Note:** you don't need to convert.
+
+![Transform inspector](/images/components/Transform.png)
+
+You can also drag the gizmo in the viewport instead of typing values.
+
+### Material
+
+For mesh entities, the **Material** panel exposes:
+
+- **Type:** basic, lambert, phong, standard (PBR), physical.
+- **Color / map:** solid color or texture.
+- **Roughness / metalness** (PBR only).
+- **Emissive:** self-illumination color and intensity.
+- **Transparency / opacity / blending**.
+
+![Material inspector](/images/components/Material.png)
+
+
+> [!TIP]
+> Drag a texture from the [assets browser](./editor/assets-browser) directly onto the **Color map** slot to assign it.
+
+### Light
+
+For light entities the **Light** panel exposes color, intensity, decay, and shadow settings.
+
+![Light inspector](/images/components/Light.png)
+
+
+### Script
+
+Attaching a `Behaviour` script adds a **Script** panel. Any field you declared on the behaviour class shows up here as a typed input.
+
+![Editing Script Gif](/images/getting-started/editing-objects/editing-objects-script.gif)
+
+See [Custom Behaviours](../authoring-a-behaviour) for how to declare exposed fields.
+
+## Adding components
+
+Click **`+ Add component`** at the bottom of the inspector to attach additional components — collider, rigidbody, audio, animation, custom script, etc.
+
+![Add Component Inspector Gif](/images/getting-started/editing-objects/editing-objects-add-component.png)
+
+
+## Undo / redo
+
+Every inspector edit pushes onto the undo stack. Use **⌘Z / Ctrl+Z** to revert and **⌘⇧Z / Ctrl+Shift+Z** to redo.
+
+## Related
+
+- [Inspector reference](./editor/inspector).
+- [Component Catalog](../component-catalog) — every component and field.

package/dist/docs/guide/getting-started/editor/assets-browser.md

@@ -0,0 +1,55 @@
+# Asset browser
+
+The asset browser at the bottom of the editor lists every file in your project's `assets/` folder (models, images, audio, video, and scripts).
+
+![Asset Browser](/images/getting-started/editor/asset-browser.png)
+
+## Layout
+
+- **Search bar:** fuzzy filter across the visible folder.
+- **Type filters:** `All`, `Models`, `Images`, `Audios`, `Videos`, `Scripts`, `Other`.
+- **Breadcrumb:** shows the current folder path. Click `← All assets` to go up.
+- **`New folder`:** creates a folder under the current path.
+- **Trash icon:** deletes the selected asset(s).
+
+## Importing assets
+
+There are three ways to import:
+
+1. **Drag** a file from your OS into the asset browser. Files are copied into the project's local `assets/` folder.
+2. **Drag** a file directly into the [viewport](./viewport). it imports **and** spawns a matching entity (model, image, video, audio).
+3. **Right-click → Upload** in the asset browser.
+
+Supported formats:
+
+| Type | Formats |
+| --- | --- |
+| Models | `.glb`, `.gltf`, `.fbx` |
+| Images | `.png`, `.jpg`, `.jpeg`, `.webp`, `.hdr` (skybox) |
+| Audio | `.mp3`, `.wav`, `.ogg` |
+| Video | `.mp4`, `.webm` |
+| Scripts | `.ts` (compiled by the editor on save) |
+
+## Folders
+
+Folders are real directories under `assets/`. You can:
+
+- **Drag** an asset into a folder thumbnail to move it.
+- **Right-click** a folder for rename / delete / new folder.
+- Drag a folder onto another folder to nest it.
+
+## Using assets in the scene
+
+- **Drag a model / image / video / audio** onto the viewport to spawn an entity that uses it.
+- **Drag onto an existing entity row** in the [hierarchy](./hierarchy) to assign the asset to that entity's matching component (for example, dropping a `.png` onto an entity with a `Image` component swaps its image).
+- **Drag a clip onto the Animation panel** in the [inspector](./inspector) to add it as a clip source.
+
+## Scripts
+
+Right-click in the asset browser and pick **New Component** to create a `Behaviour` script in place. The editor compiles it and exposes it for attachment via the inspector's **Script** panel. See [Custom Behaviours](../../authoring-a-behaviour).
+
+## Related
+
+<!-- - [Modules](./modules) -->
+- [Spawning](../../spawning/)
+- [Custom Behaviours](../../authoring-a-behaviour)

package/dist/docs/guide/getting-started/editor/hierarchy.md

@@ -0,0 +1,47 @@
+# Hierarchy
+
+The hierarchy panel (top-left) is the tree of every entity in your scene. It is the canonical place to **select**, **rename**, **parent**, and **toggle visibility** of entities.
+
+![Hierarchy](/images/getting-started/editor/hierarchy.png)
+
+## What you see per row
+
+Each row represents one entity:
+
+- **Name:** editable label (`Name` component value).
+- **Type tag:** the entity kind (`model`, `cube`, `directionalLight`, …) shown as muted text on the right.
+- **Eye icon:** toggles visibility for that entity.
+
+## Selection
+
+- **Click a row** to select the entity. The viewport gizmo and inspector both update.
+- **Click the empty area below the list** to deselect.
+- Selecting an entity in the viewport also highlights its row.
+
+## Searching
+
+The search box above the tree filters rows by name. It searches the displayed name only — not component values.
+
+## Adding entities
+
+The `+` button at the top of the panel opens the same menu as the top-bar `+`.
+
+## Parenting
+
+Drag a row onto another row to **re-parent** it. The dragged entity becomes a child of the drop target, and its transform becomes local to the parent.
+
+- Drop **onto** a row → child of that row.
+- Drop **between** rows → reorder under the same parent.
+- Drop on **empty space** → re-parent to the scene root.
+
+> [!IMPORTANT]
+> Some entities — for example image-target anchors — control their own children. Re-parenting them across different anchor groups can change runtime behavior. See the [Component Catalog](../../component-catalog) for component-specific notes.
+
+## Renaming
+
+Double-click a row's name to rename. The new value writes to the entity's `Name` component immediately and shows up in scripts that look entities up by name (`world.getEntityByName(...)`).
+
+## Related
+
+- [Inspector](./inspector)
+- [Spawning](../../spawning/)

package/dist/docs/guide/getting-started/editor/index.md

@@ -0,0 +1,16 @@
+# Understanding the Editor
+
+The editor window is divided into a handful of regions. Each one has a dedicated page in this section.
+
+![Annotated editor window highlighting each region](/images/getting-started/editor/editor-window.png)
+
+| Region | Purpose |
+| --- | --- |
+| [Hierarchy](./hierarchy) | The scene tree. Add, select, parent, and reorder entities. |
+| [Toolbar](./toolbar) | Global actions — settings, transform tools, save, preview, publish. |
+| [Viewport](./viewport) | The 3D scene view. Click to select, drag gizmos to transform. |
+| [Inspector](./inspector) | Edit components on the selected entity. |
+| [Assets Browser](./assets-browser) | Files in your project's `assets/` folder. Drag into the scene to add. |
+<!-- | [Modules](./modules) | Optional per-project-type module panels. | -->
+
+Read these in any order — most pages are short and focused on one region.

package/dist/docs/guide/getting-started/editor/inspector.md

@@ -0,0 +1,36 @@
+# Inspector
+
+The inspector (right panel) is where you edit the **components** of whatever is currently selected either an entity or the scene itself.
+
+![Inspector](/images/getting-started/editor/inspector.png)
+
+## Two top-level tabs
+
+At the top of the inspector are two tabs:
+
+| Tab | Shows |
+| --- | --- |
+| **Object** | Components of the entity currently selected in the [hierarchy](./hierarchy). When nothing is selected, the tab is empty. |
+| **Scene** | Scene wide singletons like skybox, fog, gravity, postprocessing. See [Scene → Environment](../../scene/environment) and [Scene → Postprocessing](../../scene/postprocessing). |
+
+## Component panels
+
+Each component on the selected entity is rendered as a collapsible panel. Common ones are:
+
+- **Name:** the editable display name.
+- **Transform:** position, rotation (degrees in the inspector, radians at runtime), and scale. Scale uniformly with the link icon.
+- **Mesh:** geometry source and shadow flags (cast / receive).
+- **Material:** color, texture, opacity, and shader-specific settings.
+- **Animation:** active state plus a list of clip sources you can drop `.fbx`, `.glb`, or `.gltf` files onto.
+- **Light:** type, color, intensity, range, shadow settings.
+- **Rigidbody / Collider:** physics body type and collider shape.
+- **Script:** attached `Behaviour` and its inspector-bound fields.
+
+The panels you see depend on which components the entity actually has. The full catalog and field-level details are in the [Component Catalog](../../component-catalog).
+
+
+## Related
+
+- [Hierarchy](./hierarchy)
+- [Scene singletons](../../scene/)
+- [Component Catalog](../../component-catalog)

package/dist/docs/guide/getting-started/editor/modules.md

@@ -0,0 +1,35 @@
+# Modules panel
+
+The **Modules** panel sits in the lower-left of the editor, below the [hierarchy](./hierarchy). It is a library of **pre-built, ready-to-drop** behaviors and entity bundles you can drag into your scene.
+
+![Modules panel with the "VR Teleport Area" module visible.](/images/getting-started/editor/modules.png)
+
+## What is a module?
+
+A module is a packaged group of one or more entities, components, and scripts that solve a recurring problem for example:
+
+- **VR Teleport Area** a floor plane with a teleport-target script wired up.
+- _More modules ship with the editor over time._
+
+Compared to creating primitive from the [top bar `+` menu](./toolbar), a module brings its **components and scripts** along with it, so you do not need to wire anything up manually.
+
+## Using a module
+
+1. Find the module in the panel (use the **Search modules…** field if needed).
+2. **Drag** the module card into the [viewport](./viewport) or onto a target row in the [hierarchy](./hierarchy).
+3. The editor spawns the module's entities at the drop location.
+4. Tune the spawned entities in the [inspector](./inspector) like any other entity.
+
+## Module vs. asset vs. spawn
+
+| Source | What you get | When to use |
+| --- | --- | --- |
+| **Top bar `+`** | A single primitive entity with default components. | Building blocks. |
+| **Asset browser** | An entity that references a media asset (model, image, …). | Bringing your own content in. |
+| **Modules panel** | A bundle of entities + components + scripts wired together. | Reusing solved patterns. |
+
+## Related
+
+- [Top bar](./toolbar) — the `+` spawn menu.
+- [Asset browser](./assets-browser) — importing your own files.
+- [Spawning](../../spawning/) — every primitive spawn kind.