<ScenesWidget>

INFO

The <ScenesWidget> component must be used inside a <DesignerRoot> component.

<ScenesWidget> displays the scene tree for the current designer session. It reads scene data from the runtime state and renders each scene as a clickable, draggable item. Clicking a scene calls designer.selectScene(id).

The component supports hierarchical scenes (parent/child) rendered with indentation.

Slots

Slot	Scope	Description
#header	—	Content rendered above the scene list
#content	scene (Scene object)	Customizes how each scene item is displayed. Receives the scene object.
#footer	—	Content rendered below the scene list

Usage Example

Basic Version

<template>
    <ScenesWidget />
</template>

Custom Scene Display

<template>
    <ScenesWidget>
        <template #header>
            <button @click="addScene">+ Add Scene</button>
        </template>

        <template #content="scene">
            <span>{{ scene.props?.title || scene.id }}</span>
        </template>

        <template #footer>
            <!-- Footer content -->
        </template>
    </ScenesWidget>
</template>

Notes

• Scene items have DnD attributes applied automatically. Dropping a scene item triggers a "drop" event on designer.dnd.
• The active scene is marked with the is-active CSS class.
• Child scenes are rendered with 16px left padding per depth level.