@kiberon-labs/behave-graph-scene 1.0.1 → 2.0.0

package/src/Nodes/Queries/GetMaterialProperty.ts

@@ -0,0 +1,55 @@
+import {
+  makeFunctionNodeDefinition,
+  NodeCategory
+} from '@kiberon-labs/behave-graph';
+
+const materialPropertyChoices = [
+  { text: 'color', value: 'color' },
+  { text: 'opacity', value: 'opacity' },
+  { text: 'visible', value: 'visible' },
+  { text: 'wireframe', value: 'wireframe' }
+];
+
+export const GetMaterialProperty = makeFunctionNodeDefinition({
+  typeName: 'scene/getMaterialProperty',
+  category: NodeCategory.Query,
+  label: 'Get Material Property',
+  in: {
+    meshName: (_, graphApi) => {
+      const scene = graphApi.getDependency('IScene');
+      return {
+        valueType: 'string',
+        choices: scene?.getMeshNames()
+      };
+    },
+    property: (_) => ({
+      valueType: 'string',
+      choices: materialPropertyChoices
+    })
+  },
+  out: {
+    floatValue: 'float',
+    booleanValue: 'boolean',
+    colorValue: 'color'
+  },
+  exec: ({ graph, read, write }) => {
+    const scene = graph.getDependency('IScene');
+    const meshName = read<string>('meshName');
+    const property = read<string>('property');
+
+    const value = scene?.getMaterialProperty(meshName, property);
+
+    switch (property) {
+      case 'color':
+        write('colorValue', value ?? { r: 0, g: 0, b: 0 });
+        break;
+      case 'opacity':
+        write('floatValue', (value as number) ?? 1);
+        break;
+      case 'visible':
+      case 'wireframe':
+        write('booleanValue', (value as boolean) ?? false);
+        break;
+    }
+  }
+});

package/src/Nodes/Queries/GetMeshPosition.ts

@@ -0,0 +1,32 @@
+import {
+  makeFunctionNodeDefinition,
+  NodeCategory
+} from '@kiberon-labs/behave-graph';
+
+// Get the world-space position of a mesh.
+export const GetMeshPosition = makeFunctionNodeDefinition({
+  typeName: 'scene/getMeshPosition',
+  category: NodeCategory.Query,
+  label: 'Get Mesh Position',
+  in: {
+    meshName: (_, graphApi) => {
+      const scene = graphApi.getDependency('IScene');
+      return {
+        valueType: 'string',
+        choices: scene?.getMeshNames()
+      };
+    }
+  },
+  out: {
+    x: 'float',
+    y: 'float',
+    z: 'float'
+  },
+  exec: ({ graph, read, write }) => {
+    const scene = graph.getDependency('IScene');
+    const pos = scene?.getMeshPosition(read<string>('meshName'));
+    write('x', pos?.x ?? 0);
+    write('y', pos?.y ?? 0);
+    write('z', pos?.z ?? 0);
+  }
+});

package/src/Nodes/Queries/GetSceneProperty.ts

@@ -2,21 +2,20 @@ import {
   makeFunctionNodeDefinition,
   NodeCategory
 } from '@kiberon-labs/behave-graph';
-import type { IScene } from '../../Abstractions/IScene.js';
 
 export const GetSceneProperty = (valueTypeNames: string[]) =>
   valueTypeNames.map((valueTypeName) =>
     makeFunctionNodeDefinition({
       typeName: `scene/get/${valueTypeName}`,
       category: NodeCategory.Query,
-      label: `Scene set ${valueTypeName}`,
+      label: `Scene get ${valueTypeName}`,
       in: {
         jsonPath: (_, graphApi) => {
-          const scene = graphApi.getDependency<IScene>('IScene');
+          const scene = graphApi.getDependency('IScene');
 
           return {
             valueType: 'string',
-            choices: scene?.getProperties()
+            choices: scene?.getProperties(valueTypeName)
           };
         }
       },
@@ -24,7 +23,7 @@ export const GetSceneProperty = (valueTypeNames: string[]) =>
         value: valueTypeName
       },
       exec: ({ graph, read, write }) => {
-        const scene = graph.getDependency<IScene>('IScene');
+        const scene = graph.getDependency('IScene');
         const propertyValue = scene?.getProperty(
           read('jsonPath'),
           valueTypeName

package/src/Values/Internal/Mat3.ts

@@ -5,10 +5,10 @@ import {
   toSafeString
 } from '@kiberon-labs/behave-graph';
 
-import { Mat4 } from './Mat4.js';
+import type { Mat4 } from './Mat4.js';
 import { Vec2 } from './Vec2.js';
 import { Vec3 } from './Vec3.js';
-import { Vec4 } from './Vec4.js';
+import type { Vec4 } from './Vec4.js';
 
 // uses OpenGL matrix layout where each column is specified subsequently in order from left to right.
 // ( x, y, 1 ) x [ 0  3  6 ] = ( x', y', 1 )
@@ -80,7 +80,7 @@ export function mat3SetRow3(
   result = new Mat3()
 ): Mat3 {
   const re = result.set(m.elements).elements;
-  re[rowIndex + NUM_COLUMNS * 0] = row.x;
+  re[rowIndex] = row.x;
   re[rowIndex + NUM_COLUMNS * 1] = row.y;
   re[rowIndex + NUM_COLUMNS * 2] = row.z;
   return result;

package/src/Values/Internal/Mat4.ts

@@ -5,8 +5,9 @@ import {
   toSafeString
 } from '@kiberon-labs/behave-graph';
 
-import { eulerToMat3, Mat3, quatToMat3 } from './Mat3.js';
-import { Vec2 } from './Vec2.js';
+import type { Mat3 } from './Mat3.js';
+import { eulerToMat3, quatToMat3 } from './Mat3.js';
+import type { Vec2 } from './Vec2.js';
 import {
   Vec3,
   vec3Cross,
@@ -15,7 +16,7 @@ import {
   vec3Normalize,
   vec3Subtract
 } from './Vec3.js';
-import { Vec4 } from './Vec4.js';
+import type { Vec4 } from './Vec4.js';
 
 // uses OpenGL matrix layout where each column is specified subsequently in order from left to right.
 // ( x, y, z, 1 ) x [ 0  4   8  12] = ( x', y', z', 1 )
@@ -99,7 +100,7 @@ export function mat4SetRow4(
 ): Mat4 {
   const re = result.set(m.elements).elements;
   const base = Number(rowIndex);
-  re[base + NUM_COLUMNS * 0] = row.x;
+  re[base] = row.x;
   re[base + NUM_COLUMNS * 1] = row.y;
   re[base + NUM_COLUMNS * 2] = row.z;
   re[base + NUM_COLUMNS * 3] = row.w;

package/src/Values/Internal/Vec3.ts

@@ -6,11 +6,12 @@ import {
   toSafeString
 } from '@kiberon-labs/behave-graph';
 
-import { Mat3, mat4ToMat3, quatToMat3 } from './Mat3.js';
-import { Mat4 } from './Mat4.js';
-import { Vec4 } from './Vec4.js';
+import type { Mat3 } from './Mat3.js';
+import { mat4ToMat3, quatToMat3 } from './Mat3.js';
+import type { Mat4 } from './Mat4.js';
+import type { Vec4 } from './Vec4.js';
 
-export type Vec3JSON = number[];
+export type Vec3JSON = [number, number, number];
 
 export class Vec3 {
   public x: number;

package/src/Values/Internal/Vec4.ts

@@ -5,8 +5,9 @@ import {
   toSafeString
 } from '@kiberon-labs/behave-graph';
 
-import { Mat3, mat4ToMat3 } from './Mat3.js';
-import { Mat4 } from './Mat4.js';
+import type { Mat3 } from './Mat3.js';
+import { mat4ToMat3 } from './Mat3.js';
+import type { Mat4 } from './Mat4.js';
 import { Vec3 } from './Vec3.js';
 
 export type Vec4JSON = number[];

package/src/buildScene.ts

@@ -172,7 +172,6 @@ function applyNodeModifier(property: string, objectRef: Object3D, value: any) {
     }
     case 'scale': {
       const v = value as Vec3;
-      console.log(v.x);
       objectRef.scale.set(v.x, v.y, v.z);
       break;
     }
@@ -464,6 +463,18 @@ export const buildScene = ({
     onSceneChanged.removeListener(listener);
   };
 
+  // This scene is backed by a loaded glTF model and exposes it through the
+  // json-path property API (getProperty/setProperty/...). The procedural
+  // mesh/light/material API (added to IScene for scene backends like the demo
+  // scene) is not supported here, so those operations fail loudly rather than
+  // silently doing the wrong thing. Name-enumeration getters return empty so
+  // generic choice UIs degrade gracefully instead of throwing.
+  const notSupported = (op: string): never => {
+    throw new Error(
+      `The glTF-backed scene does not support "${op}". Use a scene backend that implements the procedural mesh/light API (e.g. the demo scene) for that operation.`
+    );
+  };
+
   const scene: IScene = {
     getProperty,
     setProperty,
@@ -472,7 +483,30 @@ export const buildScene = ({
     addOnClickedListener,
     removeOnClickedListener,
     addOnSceneChangedListener,
-    removeOnSceneChangedListener
+    removeOnSceneChangedListener,
+
+    // --- procedural mesh/light/material API: unsupported on a glTF scene ---
+    createMesh: () => notSupported('createMesh'),
+    deleteMesh: () => notSupported('deleteMesh'),
+    getMeshNames: () => [],
+    addLight: () => notSupported('addLight'),
+    removeLight: () => notSupported('removeLight'),
+    setLightProperty: () => notSupported('setLightProperty'),
+    getLightProperty: () => notSupported('getLightProperty'),
+    getLightNames: () => [],
+    setMaterialProperty: () => notSupported('setMaterialProperty'),
+    getMaterialProperty: () => notSupported('getMaterialProperty'),
+    addOnAnyMeshClickedListener: () =>
+      notSupported('addOnAnyMeshClickedListener'),
+    removeOnAnyMeshClickedListener: () =>
+      notSupported('removeOnAnyMeshClickedListener'),
+    getMeshPosition: () => notSupported('getMeshPosition'),
+    setMeshPosition: () => notSupported('setMeshPosition'),
+    getDistanceBetween: () => notSupported('getDistanceBetween'),
+    lookAt: () => notSupported('lookAt'),
+    moveTowards: () => notSupported('moveTowards'),
+    cloneMesh: () => notSupported('cloneMesh'),
+    setMeshVisible: () => notSupported('setMeshVisible')
   };
 
   return scene;

package/src/index.ts

@@ -1,4 +1,11 @@
-// scene profile
+import type { IScene } from './Abstractions/IScene.js';
+
+declare module '@kiberon-labs/behave-graph' {
+  interface Dependencies {
+    IScene: IScene;
+  }
+}
+
 export * from './Abstractions/IScene.js';
 export * from './Abstractions/Drivers/DummyScene.js';
 
@@ -17,9 +24,22 @@ export * from './Values/Vec3Value.js';
 export * from './Values/Vec4Value.js';
 export * from './Values/QuatValue.js';
 
-export * from './Nodes/Actions/SetSceneProperty.js';
+export * from './Nodes/Actions/AddLight.js';
+export * from './Nodes/Actions/CloneMesh.js';
+export * from './Nodes/Actions/CreateMesh.js';
+export * from './Nodes/Actions/DeleteMesh.js';
 export * from './Nodes/Actions/EaseSceneProperty.js';
+export * from './Nodes/Actions/LookAt.js';
+export * from './Nodes/Actions/MoveTowards.js';
+export * from './Nodes/Actions/RemoveLight.js';
+export * from './Nodes/Actions/SetLightProperty.js';
+export * from './Nodes/Actions/SetMaterialProperty.js';
+export * from './Nodes/Actions/SetMeshPosition.js';
+export * from './Nodes/Actions/SetMeshVisible.js';
+export * from './Nodes/Actions/SetSceneProperty.js';
 
+export * from './Nodes/Events/OnAnyMeshClicked.js';
+export * from './Nodes/Events/OnSceneChanged.js';
 export * from './Nodes/Events/OnSceneNodeClick.js';
 
 export * as ColorNodes from './Nodes/Logic/ColorNodes.js';
@@ -32,6 +52,10 @@ export * as Vec4Nodes from './Nodes/Logic/Vec4Nodes.js';
 export * as QuatNodes from './Nodes/Logic/QuatNodes.js';
 export * from './Nodes/Logic/VecElements.js';
 
+export * from './Nodes/Queries/GetDistanceBetween.js';
+export * from './Nodes/Queries/GetLightProperty.js';
+export * from './Nodes/Queries/GetMaterialProperty.js';
+export * from './Nodes/Queries/GetMeshPosition.js';
 export * from './Nodes/Queries/GetSceneProperty.js';
 
 export * from './registerSceneProfile.js';

package/src/manifest.source.ts

@@ -0,0 +1,61 @@
+import {
+  ContributionKind,
+  PackageCategory,
+  defineManifestSource,
+  type ContributionSpec,
+  type Dependencies
+} from '@kiberon-labs/behave-graph';
+import { getSceneNodesMap, getSceneValuesMap } from './registerSceneProfile.js';
+import { DummyScene } from './Abstractions/Drivers/DummyScene.js';
+import pkg from '../package.json' with { type: 'json' };
+
+/**
+ * Build-time manifest source for the scene package.
+ *
+ * The registry projects scene's own nodes + value types into static specs
+ * (instantiation only — nodes are never run, no IScene driver needed). The
+ * executable profile (`registerSceneProfile`) lives behind the `runtime` entry,
+ * loaded only by a runner. Contributions point into the built `dist`: the vec3
+ * input control, plus each scene value type so a trusted host can swap the
+ * editor's pass-through implementations for the real serializers.
+ */
+
+// (file, export, valueType name) for each scene value type.
+const valueTypeContributions: ContributionSpec[] = [
+  ['Vec2Value', 'vec2'],
+  ['Vec3Value', 'vec3'],
+  ['Vec4Value', 'vec4'],
+  ['ColorValue', 'color'],
+  ['EulerValue', 'euler'],
+  ['QuatValue', 'quat'],
+  ['Mat3Value', 'mat3'],
+  ['Mat4Value', 'mat4']
+].map(([exportName, valueType]) => ({
+  id: `${valueType}-value`,
+  kind: ContributionKind.ValueType,
+  export: `./Values/${exportName}.js#${exportName}`,
+  bind: { valueType }
+}));
+
+export default defineManifestSource({
+  package: { name: pkg.name, version: pkg.version },
+  registry: () => ({
+    nodes: getSceneNodesMap(),
+    values: getSceneValuesMap(),
+    // The DummyScene driver satisfies IScene-dependent nodes during spec
+    // generation (it never runs them); the real driver is host-provided at run
+    // time. Without it, scene-property nodes log "IScene not registered".
+    dependencies: { IScene: new DummyScene() } as unknown as Dependencies
+  }),
+  runtime: './index.js',
+  categories: [PackageCategory.Effect],
+  contributions: [
+    {
+      id: 'vec3-control',
+      kind: ContributionKind.Control,
+      export: './ui/controls/vec3.js#Vec3Control',
+      bind: { controlName: 'vec3' }
+    },
+    ...valueTypeContributions
+  ]
+});

package/src/registerSceneProfile.ts

@@ -11,7 +11,20 @@ import type {
   ValueTypeMap
 } from '@kiberon-labs/behave-graph';
 
+import { AddLight } from './Nodes/Actions/AddLight.js';
+import { CloneMesh } from './Nodes/Actions/CloneMesh.js';
+import { CreateMesh } from './Nodes/Actions/CreateMesh.js';
+import { DeleteMesh } from './Nodes/Actions/DeleteMesh.js';
+import { LookAt } from './Nodes/Actions/LookAt.js';
+import { MoveTowards } from './Nodes/Actions/MoveTowards.js';
+import { RemoveLight } from './Nodes/Actions/RemoveLight.js';
+import { SetLightProperty } from './Nodes/Actions/SetLightProperty.js';
+import { SetMaterialProperty } from './Nodes/Actions/SetMaterialProperty.js';
+import { SetMeshPosition } from './Nodes/Actions/SetMeshPosition.js';
+import { SetMeshVisible } from './Nodes/Actions/SetMeshVisible.js';
 import { SetSceneProperty } from './Nodes/Actions/SetSceneProperty.js';
+import { OnAnyMeshClicked } from './Nodes/Events/OnAnyMeshClicked.js';
+import { OnSceneChanged } from './Nodes/Events/OnSceneChanged.js';
 import { OnSceneNodeClick } from './Nodes/Events/OnSceneNodeClick.js';
 import * as ColorNodes from './Nodes/Logic/ColorNodes.js';
 import * as EulerNodes from './Nodes/Logic/EulerNodes.js';
@@ -21,6 +34,10 @@ import * as QuatNodes from './Nodes/Logic/QuatNodes.js';
 import * as Vec2Nodes from './Nodes/Logic/Vec2Nodes.js';
 import * as Vec3Nodes from './Nodes/Logic/Vec3Nodes.js';
 import * as Vec4Nodes from './Nodes/Logic/Vec4Nodes.js';
+import { GetDistanceBetween } from './Nodes/Queries/GetDistanceBetween.js';
+import { GetLightProperty } from './Nodes/Queries/GetLightProperty.js';
+import { GetMaterialProperty } from './Nodes/Queries/GetMaterialProperty.js';
+import { GetMeshPosition } from './Nodes/Queries/GetMeshPosition.js';
 import { GetSceneProperty } from './Nodes/Queries/GetSceneProperty.js';
 import { ColorValue } from './Values/ColorValue.js';
 import { EulerValue } from './Values/EulerValue.js';
@@ -74,9 +91,31 @@ export const getSceneNodesMap = memo<Record<string, NodeDefinition>>(() => {
 
     // events
     OnSceneNodeClick,
-    // actions
+    OnSceneChanged,
+    OnAnyMeshClicked,
+    // actions - property
     ...SetSceneProperty(allValueTypeNames),
+    // actions - mesh lifecycle
+    CreateMesh,
+    DeleteMesh,
+    CloneMesh,
+    // actions - spatial
+    MoveTowards,
+    LookAt,
+    SetMeshPosition,
+    SetMeshVisible,
+    // actions - lighting
+    AddLight,
+    RemoveLight,
+    SetLightProperty,
+    // actions - material
+    SetMaterialProperty,
+    // queries
     ...GetSceneProperty(allValueTypeNames),
+    GetLightProperty,
+    GetMaterialProperty,
+    GetMeshPosition,
+    GetDistanceBetween,
 
     ...getSceneStringConversions(getSceneValuesMap())
   ];
@@ -98,8 +137,6 @@ export const registerSceneProfile = (registry: IRegistry): IRegistry => {
   return {
     values,
     nodes: { ...registry.nodes, ...getSceneNodesMap() },
-    dependencies: {
-      ...registry.dependencies
-    }
+    dependencies: registry.dependencies
   };
 };

package/src/ui/controls/vec3.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { VscodeTextfield } from '@vscode-elements/react-elements';
+import type { ControlProps } from '@kiberon-labs/behave-graph-flow';
+import type { Vec3JSON } from '@/Values/Internal/Vec3';
+
+// The @vscode-elements/react-elements typings surface the underlying custom
+// element's DOM events, so its `onChange` hands back a plain `Event`. Pull the
+// value out via the input target (same hack the flow number control uses).
+const readNumber = (e: Event): number | undefined => {
+  const stringValue = (e as unknown as React.ChangeEvent<HTMLInputElement>)
+    .currentTarget.value;
+  const num = parseFloat(stringValue);
+  return isNaN(num) ? undefined : num;
+};
+
+export const Vec3Control: React.FC<ControlProps<Vec3JSON>> = ({
+  value,
+  onChange
+}) => {
+  const vec = value ?? [0, 0, 0];
+
+  const handleChangeX = (e: Event) => {
+    const num = readNumber(e);
+    if (num !== undefined) onChange([num, vec[1], vec[2]]);
+  };
+
+  const handleChangeY = (e: Event) => {
+    const num = readNumber(e);
+    if (num !== undefined) onChange([vec[0], num, vec[2]]);
+  };
+
+  const handleChangeZ = (e: Event) => {
+    const num = readNumber(e);
+    if (num !== undefined) onChange([vec[0], vec[1], num]);
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+      <label style={{ fontSize: '11px', opacity: 0.7, minWidth: '12px' }}>
+        X
+      </label>
+      <VscodeTextfield
+        type="number"
+        value={vec[0].toString()}
+        onChange={handleChangeX}
+        style={{ flex: 1 }}
+      />
+      <label style={{ fontSize: '11px', opacity: 0.7, minWidth: '12px' }}>
+        Y
+      </label>
+      <VscodeTextfield
+        type="number"
+        value={vec[1].toString()}
+        onChange={handleChangeY}
+        style={{ flex: 1 }}
+      />
+      <label style={{ fontSize: '11px', opacity: 0.7, minWidth: '12px' }}>
+        Z
+      </label>
+      <VscodeTextfield
+        type="number"
+        value={vec[2].toString()}
+        onChange={handleChangeZ}
+        style={{ flex: 1 }}
+      />
+    </div>
+  );
+};

package/stories/click.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  kitchenSinkPlugin,
+  GraphProvider,
+  LayoutController,
+  localGraphRunnerPlugin,
+  System,
+  SystemProvider,
+  type UIGraphJSON
+} from '@kiberon-labs/behave-graph-flow';
+import {
+  DefaultLogger,
+  ManualLifecycleEventEmitter,
+  registerCoreProfile
+} from '@kiberon-labs/behave-graph';
+import { registerSceneProfile } from '@/registerSceneProfile';
+import { DemoScene } from './components/DemoScene';
+import { sceneViewerPlugin } from './plugin/sceneViewerPlugin';
+import { Vec3Control } from '@/ui/controls/vec3';
+import clickDemoGraph from './data/clickDemo.json';
+
+const meta: Meta<typeof LayoutController> = {
+  component: LayoutController,
+  title: 'Apex/default',
+  decorators: [(Story) => <Story />],
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Create a demo scene instance
+const demoScene = new DemoScene();
+
+// Create the old-style registry for node definitions
+const coreRegistry = registerSceneProfile(
+  registerCoreProfile({
+    nodes: {},
+    values: {},
+    dependencies: {
+      IScene: demoScene,
+      ILifecycleEventEmitter: new ManualLifecycleEventEmitter(),
+      ILogger: new DefaultLogger()
+    }
+  })
+);
+
+// --- Click Demo story: preloads a graph with OnAnyMeshClicked → DebugLog ---
+
+const clickDemoScene = new DemoScene();
+
+const clickRegistry = registerSceneProfile(
+  registerCoreProfile({
+    nodes: {},
+    values: {},
+    dependencies: {
+      IScene: clickDemoScene,
+      ILifecycleEventEmitter: new ManualLifecycleEventEmitter(),
+      ILogger: new DefaultLogger()
+    }
+  })
+);
+
+const clickNodeRegistry = {
+  values: clickRegistry.values,
+  specs: []
+};
+
+const clickSys = new System(clickNodeRegistry);
+const clickSession = clickSys.createSession('graph');
+
+clickSys.controlStore.getState().registerControl('color', Vec3Control);
+clickSys.controlStore.getState().registerControl('vec3', Vec3Control);
+clickSys.controlStore.getState().registerControl('euler', Vec3Control);
+
+clickSys.registerPlugin(kitchenSinkPlugin);
+clickSys.registerPlugin(localGraphRunnerPlugin, {
+  registry: clickRegistry,
+  tickStrategy: async () => {
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+  }
+});
+clickSys.registerPlugin(sceneViewerPlugin, {
+  scene: clickDemoScene,
+  addMenuItem: true
+});
+
+// Preload the click demo graph so the OnAnyMeshClicked event node is present.
+// clickDemo.json is a full UIGraphJSON (UI state + inner flow), so deserialize
+// the UI state and load the inner behave graph , the same path the menubar's
+// "Load Graph" uses , rather than passing it straight to setGraph.
+const clickDemoUiGraph = clickDemoGraph as unknown as UIGraphJSON;
+clickSession.graph.deseralize(clickDemoUiGraph);
+clickSession.flowStore
+  .getState()
+  .setGraph(clickDemoUiGraph.flow, { skipLayout: true });
+
+export const ClickDemo: Story = {
+  render: () => {
+    return (
+      <SystemProvider value={clickSys}>
+        <GraphProvider value={clickSession}>
+          <LayoutController />
+        </GraphProvider>
+      </SystemProvider>
+    );
+  },
+  args: {}
+};