<DesignerRoot>

<DesignerRoot> is the root provider component for the designer layout. It injects the Runtime instance into the Vue component tree via PTAH_INSTANCE, making it available to all child components (<ScenesWidget>, <WorkspaceWidget>, <ParameterWidget>, etc.).

Props

Prop	Type	Required	Description
app	Runtime	Yes	The Runtime instance from useDesignerApp()

Usage Example

<template>
    <DesignerRoot :app="runtime">
        <!-- All PtahJs designer widgets can be used here -->
        <div class="designer-layout">
            <aside>
                <ScenesWidget />
                <ModulesWidget />
            </aside>
            <main>
                <WorkspaceWidget />
            </main>
            <aside>
                <ParameterWidget type="module" />
                <EventsWidget type="module" />
            </aside>
        </div>
    </DesignerRoot>
</template>

<script setup>
import {
    useDesignerApp,
    DesignerRoot,
    ScenesWidget,
    ModulesWidget,
    WorkspaceWidget,
    ParameterWidget,
    EventsWidget,
} from '@ptahjs/ui-vue';

const runtime = useDesignerApp({ id: 've1' });
</script>

Notes

• <DesignerRoot> renders a <div class="designer-root"> wrapper with id set to the runtime's id.
• It uses Vue's provide() to make the runtime accessible via inject(PTAH_INSTANCE) in all descendant components.
• Only one <DesignerRoot> per runtime instance is needed.