Application Instance API

createPtah()

createPtah(options) creates a Vue plugin that registers resources into ResourceRepository.

Parameters

• options: Object | Object[]
• each option supports:
  • id: string (required)
  • renderer: { install?: (runtime) => void, template: Component }
  • modules: Array (module tree)
  • sceneConfig: Object (must include versions)
  • parameterComponents: Record<string, Component>
  • modulesLock?: Record<string, string>
  • featureFlags?: Record<string, boolean>

Example

import { createApp } from 'vue';
import { createPtah, WebRenderer } from '@ptahjs/ui-vue';
import App from './App.vue';

const app = createApp(App);

app.use(
    createPtah({
        id: 've1',
        renderer: WebRenderer,
        modules: moduleTree,
        parameterComponents: editors,
    })
);

app.mount('#app');

---

ResourceRepository

Low-level resource registration class.

• constructor: new ResourceRepository({ id, modulesLock?, featureFlags? })
• methods:
  • rendererConfig(data)
  • sceneConfig(config)
  • parameterComponents(data)
  • modules(data)
  • mount()

---

Runtime Instance

useRuntimeApp() and useDesignerApp() both return a Runtime instance.

Common fields

• id
• isDesigner
• renderMode (WEB / SCENE / FLOW)
• lifecycleChain
• hotkeys
• designer (only in designer mode)

Runtime methods

Schema and resources

Method	Description
schema(data)	Load page schema into the runtime
getRawSchema()	Read the original schema passed to schema()
getModulesSchema(type?)	Read the full module schema map or one module schema by type
getSchemaResource(id?)	Read schema resource map entries
getModuleDefaultVersion(type)	Resolve the default module version
resolveModuleRuntime(type, version?)	Resolve the runtime implementation for a module version

runtime.schema(pageJson);

const raw = runtime.getRawSchema();
const buttonSchema = runtime.getModulesSchema('UiButton');
const buttonRuntime = runtime.resolveModuleRuntime('UiButton');

Scene and module queries

Method	Description
getSceneIds()	Get all scene ids in order
getSceneById(id)	Get one scene
getModuleById(id)	Get one module
getRootModuleIdsByScene(sceneId)	Get root module ids under a scene
getModuleChildrenIds(parentId)	Get child module ids under a scene or module
getSubSchemaById(subId)	Get nested schema data by id

const sceneIds = runtime.getSceneIds();
const currentScene = runtime.getSceneById(sceneIds[0]);
const rootIds = runtime.getRootModuleIdsByScene(currentScene.id);
const firstModule = runtime.getModuleById(rootIds[0]);

Event queries

Method	Description
getEventById(eventId)	Get one event schema
getOwnerEvents(ownerId)	Get events owned by a scene or module
getOwnerEventIds(ownerId)	Get only event ids for a scene or module

Current selection state

Method	Description
setCurrentSceneId(id)	Set the active scene id
getCurrentSceneId()	Read the active scene id
setCurrentModuleId(id)	Set the active module id
getCurrentModuleId()	Read the active module id

Inherited kernel methods

These methods come from Kernel and are also callable on Runtime.

Method	Description
subscribe(listener, options?)	Subscribe to graph updates
batch(fn)	Group multiple writes into one notification flush
getGraph()	Read the current IR graph
setStateKey(key, value)	Set one root state key
replaceMapSection(section, newMap)	Replace an entire map section
applyOperation(op)	Apply one low-level operation
applyOperations(ops)	Apply multiple operations in a batch

const unsubscribe = runtime.subscribe(({ version, changes }) => {
    console.log(version, changes);
});

runtime.batch(() => {
    runtime.setCurrentSceneId('scene-1');
    runtime.setCurrentModuleId('module-1');
});

unsubscribe();

Cleanup

Method	Description
dispose()	Dispose the runtime and emit a dispose event

---

Designer Instance

In designer mode, runtime.designer exposes:

History and runtime access

Method	Description
getRuntime()	Get the bound runtime instance
getHistory()	Get the history manager
undo()	Undo the last command
redo()	Redo the last undone command
getPageSchema()	Export the current page schema
mount()	Bind DnD to the root element
dispose()	Destroy designer DnD and DOM bindings

Scene methods

Method	Description
addScene(scene)	Create a scene and return its id
selectScene(sceneId)	Set the active scene
updateScene(payload)	Patch scene data
moveScene(payload)	Reorder a scene
deleteScene(payload)	Delete a scene
cloneScene(payload)	Clone a scene

Module methods

Method	Description
addModule(module)	Create a module and return its id
selectModule(moduleId)	Set the active module
updateModule(payload)	Patch module data
moveModule(payload)	Move a module to another parent/index
deleteModule(payload)	Delete a module subtree
cloneModule(payload)	Clone a module
copyModule(moduleId)	Copy a module into the clipboard
pasteModule(options?)	Paste the clipboard into a target parent
cutModule(moduleId)	Copy then delete a module

Custom slot methods

Method	Description
addCustomSlot(payload, index?)	Create a custom slot module and return its id
deleteCustomSlot(payload)	Delete a custom slot module

const sceneId = designer.addScene({ label: 'Home' });

const moduleId = designer.addModule({
    type: 'UiButton',
    parentId: sceneId,
    props: { label: 'Submit' },
});

designer.copyModule(moduleId);
designer.pasteModule({ targetParentId: sceneId });

const exported = designer.getPageSchema();