@thatopen/services 0.0.1

package/src/cli/templates/bim/CONTEXT.md

@@ -0,0 +1,244 @@
+# ThatOpen BIM App
+
+This is a BIM (Building Information Modeling) app built for the That Open Platform.
+It runs in the browser inside the platform's iframe and has access to a 3D viewer,
+UI components, and the platform API.
+
+## How this app works
+
+- **Entry point**: `src/main.ts` — runs as an IIFE when the platform loads the app.
+- **Build output**: `dist/bundle.js` — a single IIFE file built by Vite.
+- **Platform context**: The platform injects `window.__THATOPEN_CONTEXT__` with:
+  - `appId` — this app's unique ID
+  - `projectId` — the project this app belongs to
+  - `accessToken` — Auth0 JWT for API calls
+  - `apiUrl` — base URL for the That Open API
+
+## Commands
+
+```bash
+npm run dev        # Start dev server (esbuild watch + serve on :4000)
+npm run build               # Build dist/bundle.js (Vite/Rollup production build)
+npm run login               # Authenticate with the platform (saves token locally)
+npm run publish             # Publish to the platform
+```
+
+### Local development
+
+Apps run inside the That Open Platform (platform.thatopen.com) within a project —
+not as standalone websites. To develop locally:
+
+1. Run `npm run dev` — this watches source files with esbuild and serves the bundle on port 4000.
+2. Open your project on the platform and click the debug button.
+3. Live reload is enabled — save a file to rebuild automatically.
+
+The dev server (`thatopen serve`) uses esbuild for near-instant incremental rebuilds.
+**Important**: Do NOT run `vite`, `vite build --watch`, or `npx vite` directly for development.
+Always use `npm run dev` which runs `thatopen serve` under the hood.
+
+## Key libraries
+
+| Package | Import | Purpose |
+|---------|--------|---------|
+| `@thatopen/components` | `OBC` | BIM engine — components, fragments, worlds |
+| `@thatopen/components-front` | `OBF` | Front-end BIM components (Highlighter, measurements, etc.) |
+| `@thatopen/fragments` | `FRAGS` | Fragment geometry format |
+| `@thatopen/ui` | `BUI` | UI web components (`<bim-panel>`, `<bim-grid>`, etc.) |
+| `@thatopen/ui-obc` | `CUI` | Pre-built OBC UI tables (used by ModelsPanel) |
+| `three` | `THREE` | 3D rendering engine |
+| `thatopen-services` | `EngineServicesClient` | Platform API client + built-in components |
+
+## Architecture pattern
+
+```
+1. Create EngineServicesClient from platform context
+2. Call client.setup(globals, ...builtIns) — creates OBC.Components,
+  inits BUI, loads built-in components, calls components.init()
+3. Create viewport(s) and UI elements
+4. Configure AppManager with elements + layouts
+5. Call app.init()
+```
+
+## Built-in components
+
+Built-in components are platform-hosted UI modules loaded at runtime via the API client.
+They are fetched, evaluated, and registered with the OBC component system.
+
+| Component | Purpose |
+|-----------|---------|
+| **AppManager** | App shell — CSS grid layout system with sidebar for switching layouts |
+| **ViewportsManager** | Factory for 3D viewports with pre-configured world (scene, camera, renderer) |
+| **LoadModelButton** | Button + dropdown for loading IFC and Fragments files |
+| **ViewerToolbar** | Toolbar with Show/Hide/Focus/Isolate actions and color palette |
+| **ModelsPanel** | Panel listing loaded models with search bar and load button |
+| **ModelsDropdown** | Dropdown selector listing loaded models |
+| **ClassificationsList** | Hierarchical table of IFC classification data |
+| **ClashesList** | Interactive clash detection results with click-to-highlight |
+| **ClippingsList** | Panel listing clipping planes with enable/delete controls |
+| **LengthMeasuringsList** | Panel listing length measurements with cumulative total |
+| **AreaMeasuringsList** | Panel listing area measurements with area/perimeter totals |
+| **ColorsPalette** | Color picker grid with custom input and Highlighter styles |
+| **HighlightersList** | Panel listing Highlighter styles with manage/apply actions |
+| **QtoComparisonList** | Side-by-side quantity comparison for two selected elements |
+| **QueriesHierarchy** | Recursive multi-level query browser for IFC data |
+| **CustomViewLegend** | Color legend overlay with colored circles and labels |
+| **ScreenshotAnnotator** | Modal for annotating screenshots (arrows, text, freehand) via MarkerJS |
+
+**Full API reference**: Each component has detailed JSDoc with `@example` blocks in the
+`thatopen-services` package source (`src/built-in/index.ts`). Read that file for config
+interfaces, method signatures, and code examples.
+
+### Loading pattern
+
+Use `setup` to create the component system and load built-in components in one call:
+
+```ts
+import { PlatformClient, AppManager, ViewportsManager } from "thatopen-services";
+
+const client = PlatformClient.fromPlatformContext();
+
+// Creates OBC.Components, inits BUI, loads built-ins, calls components.init()
+const { components } = await client.setup(
+  { OBC, OBF, BUI, CUI, THREE, FRAGS },
+  AppManager, ViewportsManager,
+);
+
+const app = components.get(AppManager);
+const viewports = components.get(ViewportsManager);
+```
+
+You can also load components individually if needed:
+
+```ts
+// Batch load (parallel)
+await client.initBuiltInComponents(components, AppManager, ViewportsManager);
+
+// Or one at a time
+await client.initBuiltInComponent(AppManager, components);
+```
+
+### Required globals per component
+
+| Component | Globals to pass | Extra npm packages needed |
+|-----------|----------------|--------------------------|
+| AppManager | `{ OBC, BUI }` | — |
+| ViewportsManager | `{ OBC, BUI, THREE, FRAGS }` | — |
+| LoadModelButton | `{ OBC, BUI }` | — |
+| ModelsDropdown | `{ OBC, BUI }` | — |
+| ModelsPanel | `{ OBC, BUI, CUI }` | `@thatopen/ui-obc` |
+| ViewerToolbar | `{ OBC, OBF, BUI, THREE }` | `@thatopen/components-front` |
+| ColorsPalette | `{ OBC, OBF, BUI }` | `@thatopen/components-front` |
+| ClashesList | `{ OBC, OBF, BUI, THREE }` | `@thatopen/components-front` |
+| ClassificationsList | `{ OBC, OBF, BUI }` | `@thatopen/components-front` |
+| ClippingsList | `{ OBC, BUI }` | — |
+| HighlightersList | `{ OBC, OBF, BUI }` | `@thatopen/components-front` |
+| LengthMeasuringsList | `{ OBC, OBF, BUI, THREE }` | `@thatopen/components-front` |
+| AreaMeasuringsList | `{ OBC, OBF, BUI, THREE }` | `@thatopen/components-front` |
+| QtoComparisonList | `{ OBC, OBF, BUI }` | `@thatopen/components-front` |
+| QueriesHierarchy | `{ OBC, OBF, BUI }` | `@thatopen/components-front` |
+| CustomViewLegend | `{ OBC, BUI }` | — |
+| ScreenshotAnnotator | `{ OBC, BUI, MARKERJS }` | `@markerjs/markerjs3` |
+
+### Global abbreviations
+
+```ts
+import * as OBC from "@thatopen/components";
+import * as OBF from "@thatopen/components-front";   // needed for Toolbar, Highlighters, Clashes, etc.
+import * as BUI from "@thatopen/ui";
+import * as CUI from "@thatopen/ui-obc";              // needed for ModelsPanel
+import * as THREE from "three";
+import * as FRAGS from "@thatopen/fragments";
+import * as MARKERJS from "@markerjs/markerjs3";      // needed for ScreenshotAnnotator
+```
+
+### AppManager — app shell with CSS grid layouts
+
+Creates a grid-based layout system. Define named element slots and named layouts.
+A sidebar for switching layouts appears automatically when multiple layouts exist.
+
+```ts
+const Layouts = ["Viewer", "Split"];
+const Elements = ["viewer", "panel"];
+
+await app.init({
+  client,
+  icons: undefined, // pass Record<K, string> when using typed App interface with icon keys
+  grid: (grid: BUI.Grid<Layouts, Elements>) => {
+    grid.elements = {
+      viewer: viewportElement,
+      panel: panelFunction, // Can be HTMLElement, () => BUI.TemplateResult, or { template, initialState }
+    };
+    grid.layouts = {
+      Viewer: { template: `"viewer" 1fr / 1fr` },
+      Split: {
+        template: `"panel viewer" 1fr / 20rem 1fr`,
+        icon: "solar:settings-bold",
+      },
+    };
+  },
+});
+```
+
+The `template` string uses CSS `grid-template` shorthand: `"areas" rows / columns`.
+
+### ViewportsManager — 3D viewport factory
+
+Creates viewports with pre-configured world (scene, camera, renderer) and auto-initialized fragments.
+
+```ts
+const viewports = components.get(ViewportsManager);
+const { element, world } = await viewports.create();
+// element is an HTMLElement to place in a layout slot
+// world has world.scene, world.camera, world.renderer
+```
+
+## Loading a BIM model
+
+```ts
+const fragments = components.get(OBC.FragmentsManager);
+
+// From URL
+const response = await fetch("https://example.com/model.frag");
+const buffer = await response.arrayBuffer();
+await fragments.core.load(buffer, { modelId: "my-model" });
+
+// From platform storage
+const fileResponse = await client.downloadFile(fileId);
+const fileBuffer = await fileResponse.arrayBuffer();
+await fragments.core.load(fileBuffer, { modelId: "my-model" });
+```
+
+## EngineServicesClient API (commonly used in apps)
+
+```ts
+// Recommended: auto-reads window.__THATOPEN_CONTEXT__ and sets useBearer: true
+const client = PlatformClient.fromPlatformContext();
+console.log(client.context.projectId); // access the platform context
+
+// Files
+const files = await client.listFiles();
+const file = await client.getFile(fileId);
+const response = await client.downloadFile(fileId);
+await client.createFile({ file: blob, name: "model.ifc", versionTag: "v1" });
+
+// Folders
+const folders = await client.listFolders();
+await client.createFolder("My Folder");
+
+// Execute cloud components
+const { executionId } = await client.executeComponent(componentId, { param: "value" });
+client.onExecutionProgress(executionId, (data) => {
+  // data.progressUpdate — progress percentage
+  // data.messageUpdate — status messages
+});
+
+// Test against a local cloud component (requires thatopen local-server running in the component project)
+client.localServerUrl = "http://localhost:4001";
+const local = await client.executeComponent("any-id", { param: "value" });
+client.localServerUrl = null; // reset to use the cloud API
+```
+
+## Configuration
+
+- `.thatopen` — local config (gitignored). Created by `npm run login`. Contains `accessToken`, `apiUrl`, and `appId` after first publish.
+- `vite.config.js` — builds to IIFE format as `dist/bundle.js`. All dependencies are bundled.

package/src/cli/templates/bim/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "thatopen serve",
+    "build": "vite build",
+    "login": "thatopen login --local",
+    "publish": "thatopen publish"
+  },
+  "dependencies": {
+    "@markerjs/markerjs3": "^3.9.0",
+    "@thatopen/components": "~3.4.0",
+    "@thatopen/components-front": "~3.4.0",
+    "@thatopen/fragments": "~3.4.0",
+    "@thatopen/ui": "~3.4.0",
+    "@thatopen/ui-obc": "~3.4.0",
+    "thatopen-services": "file:../../../..",
+    "three": "^0.182.0"
+  },
+  "devDependencies": {
+    "@types/three": "^0.182.0",
+    "typescript": "^5.2.0",
+    "vite": "^5.2.0"
+  }
+}

package/src/cli/templates/bim/src/app.ts

@@ -0,0 +1,16 @@
+import * as OBC from "@thatopen/components";
+import * as BUI from "@thatopen/ui";
+import { AppManager } from "thatopen-services";
+import { icons } from "./globals";
+import { AppInfoSectionGridElement, CloudRunnerSectionGridElement } from "./ui-components";
+
+export type App = {
+  icons: (keyof typeof icons)[];
+  grid: BUI.Grid<
+    ["Viewer", "Split"],
+    ["viewer", AppInfoSectionGridElement, CloudRunnerSectionGridElement]
+  >;
+};
+
+export const getAppManager = (components: OBC.Components) =>
+  components.get(AppManager<App>);

package/src/cli/templates/bim/src/bim-components/CloudRunner/index.ts

@@ -0,0 +1,91 @@
+import * as OBC from "@thatopen/components";
+import { AppManager } from "thatopen-services";
+import { CloudRunnerStatus } from "./src";
+
+export class CloudRunner extends OBC.Component {
+  static readonly uuid = "7c4e5d3b-2a1f-4e8d-9b6c-0a3f7e2c5d1b" as const;
+
+  enabled = true;
+
+  readonly onExecutionUpdated = new OBC.Event<CloudRunnerStatus>();
+
+  // TODO: Replace with your actual component ID after publishing.
+  componentId = "your-component-id";
+  localServerUrl = "http://localhost:4001";
+
+  // Reactive state — read by the UI template on each render.
+  status = "Idle";
+  progress = 0;
+  messages: string[] = [];
+
+  constructor(components: OBC.Components) {
+    super(components);
+    components.add(CloudRunner.uuid, this);
+  }
+
+  async run(useLocal: boolean) {
+    // Resolve client at call time via AppManager — never store it as a field.
+    const app = this.components.get(AppManager);
+    const client = app.client;
+
+    client.localServerUrl = useLocal ? this.localServerUrl : null;
+
+    this.status = useLocal ? "Starting (local)..." : "Starting (deployed)...";
+    this.progress = 0;
+    this.messages = [];
+    this._trigger();
+
+    try {
+      const { executionId } = await client.executeComponent(this.componentId, {
+        greeting: "Hello from the BIM app!",
+      });
+
+      this.status = `Running (${executionId.slice(0, 8)}...)`;
+      this._trigger();
+
+      // Subscribe to real-time progress updates via WebSocket.
+      client.onExecutionProgress(executionId, (data) => {
+        if (data.progressUpdate) {
+          this.progress = data.progressUpdate.progress;
+          if (data.progressUpdate.result) {
+            this.status = `${data.progressUpdate.result}: ${data.progressUpdate.resultMessage ?? "Done"}`;
+          }
+        }
+        if (data.messageUpdate) {
+          this.messages.push(data.messageUpdate.content);
+        }
+        this._trigger();
+      });
+
+      // Poll once after a short delay to catch fast executions that complete
+      // before the WebSocket subscription is established.
+      setTimeout(async () => {
+        try {
+          const exec = await client.getExecution(executionId);
+          if (exec.result) {
+            this.progress = exec.progress;
+            this.status = `${exec.result}: ${exec.resultMessage ?? "Done"}`;
+            this._trigger();
+          }
+        } catch {
+          /* WebSocket handles it */
+        }
+      }, 2000);
+    } catch (err) {
+      this.status = `Error: ${err}`;
+      this._trigger();
+    } finally {
+      client.localServerUrl = null;
+    }
+  }
+
+  private _trigger() {
+    this.onExecutionUpdated.trigger({
+      status: this.status,
+      progress: this.progress,
+      messages: [...this.messages],
+    });
+  }
+}
+
+export * from "./src";

package/src/cli/templates/bim/src/bim-components/CloudRunner/src/index.ts

@@ -0,0 +1 @@
+export * from "./types";

package/src/cli/templates/bim/src/bim-components/CloudRunner/src/types.ts

@@ -0,0 +1,5 @@
+export interface CloudRunnerStatus {
+  status: string;
+  progress: number;
+  messages: string[];
+}

package/src/cli/templates/bim/src/bim-components/index.ts

@@ -0,0 +1 @@
+export * from "./CloudRunner";

package/src/cli/templates/bim/src/globals.ts

@@ -0,0 +1 @@
+export const icons = {};

package/src/cli/templates/bim/src/main.ts

@@ -0,0 +1,90 @@
+import * as THREE from "three";
+import * as OBC from "@thatopen/components";
+import * as OBF from "@thatopen/components-front";
+import * as FRAGS from "@thatopen/fragments";
+import * as BUI from "@thatopen/ui";
+import * as CUI from "@thatopen/ui-obc";
+import * as MARKERJS from "@markerjs/markerjs3"
+import {
+  PlatformClient,
+  AppManager,
+  ViewportsManager,
+  UIManager,
+} from "thatopen-services";
+
+import { getAppManager } from "./app";
+import { uiManager, cloudRunner, viewportsManager, getUIManager } from "./setups";
+
+// Wrap in async function since IIFE format does not support top-level await.
+async function main() {
+  // ─── Platform Client ──────────────────────────────────────────
+  // Reads auth context from window.__THATOPEN_CONTEXT__ (injected by the
+  // platform) and creates a client with Bearer auth.
+  const client = PlatformClient.fromPlatformContext();
+
+  // ─── Built-in Components ──────────────────────────────────────
+  // First argument: library globals used by the engine.
+  // Subsequent arguments: platform built-in components to initialise.
+  const { components } = await client.setup<OBC.Components>(
+    { OBC, OBF, BUI, CUI, THREE, FRAGS, MARKERJS },
+    { uuid: ViewportsManager.uuid },
+    { uuid: AppManager.uuid },
+    { uuid: UIManager.uuid },
+  );
+
+  // ─── Viewport ─────────────────────────────────────────────────
+  // Must run before app.init() so the element is ready for the grid.
+  const viewerElement = await viewportsManager(components);
+
+  // ─── App Init ─────────────────────────────────────────────────
+  const app = getAppManager(components);
+
+  await app.init({
+    client,
+    icons: [],
+    componentSetups: {
+      // core: runs in parallel before the grid mounts.
+      core: [uiManager, cloudRunner],
+    },
+    grid: (grid) => {
+      const uis = getUIManager(components);
+
+      grid.elements = {
+        viewer: viewerElement,
+        appInfoSection: {
+          template: uis.custom.get("appInfoSection").template,
+          initialState: { components },
+          label: "App Info",
+          icon: "solar:info-circle-bold",
+        },
+        cloudRunnerSection: {
+          template: uis.custom.get("cloudRunnerSection").template,
+          initialState: { components },
+          label: "Cloud Component",
+          icon: "solar:code-bold",
+        },
+      };
+
+      grid.layouts = {
+        Viewer: {
+          template: `"viewer" 1fr / 1fr`,
+        },
+        Split: {
+          template: `
+            "tabs:left(appInfoSection, cloudRunnerSection) viewer" 1fr
+            / 24rem 1fr
+          `,
+          icon: "solar:info-circle-bold",
+        },
+      };
+
+      grid.areaGroups = {
+        left: { switchersFull: true },
+      };
+
+      grid.layout = "Split";
+    },
+  });
+}
+
+main().catch(console.error);

package/src/cli/templates/bim/src/setups/cloud-runner.ts

@@ -0,0 +1,13 @@
+import * as OBC from "@thatopen/components";
+import { CloudRunner } from "../bim-components";
+import { getUIManager } from "./ui-manager";
+
+export const cloudRunner = (components: OBC.Components) => {
+  const runner = components.get(CloudRunner);
+  const uis = getUIManager(components);
+
+  // Re-render all appInfoSection instances whenever execution state changes.
+  runner.onExecutionUpdated.add(() => {
+    uis.custom.get("cloudRunnerSection").updateInstances();
+  });
+};

package/src/cli/templates/bim/src/setups/index.ts

@@ -0,0 +1,3 @@
+export * from "./ui-manager";
+export * from "./viewports-manager";
+export * from "./cloud-runner";

package/src/cli/templates/bim/src/setups/ui-manager.ts

@@ -0,0 +1,27 @@
+import * as OBC from "@thatopen/components";
+import * as BUI from "@thatopen/ui";
+import { UIManager } from "thatopen-services";
+import {
+  appInfoSectionTemplate,
+  AppInfoSectionState,
+  cloudRunnerSectionTemplate,
+  CloudRunnerSectionState,
+} from "../ui-components";
+
+export type CustomUIs = {
+  appInfoSection: { type: BUI.PanelSection; state: AppInfoSectionState };
+  cloudRunnerSection: { type: BUI.PanelSection; state: CloudRunnerSectionState };
+};
+
+export const getUIManager = (components: OBC.Components) =>
+  components.get(UIManager<CustomUIs>);
+
+export const uiManager = (components: OBC.Components) => {
+  const uis = getUIManager(components);
+  uis.registerTemplate("appInfoSection", {
+    template: appInfoSectionTemplate,
+  });
+  uis.registerTemplate("cloudRunnerSection", {
+    template: cloudRunnerSectionTemplate,
+  });
+};

package/src/cli/templates/bim/src/setups/viewports-manager.ts

@@ -0,0 +1,22 @@
+import * as OBC from "@thatopen/components";
+import { ViewportsManager } from "thatopen-services";
+
+export const viewportsManager = async (components: OBC.Components) => {
+  const viewports = components.get(ViewportsManager);
+  const { element, world } = await viewports.create();
+
+  // Load a sample model. Replace with client.downloadFile(fileId) to load
+  // a model from the platform:
+  //   const response = await client.downloadFile(fileId);
+  //   const buffer = await response.arrayBuffer();
+  const fragments = components.get(OBC.FragmentsManager);
+  const file = await fetch(
+    "https://thatopen.github.io/engine_components/resources/frags/school_arq.frag",
+  );
+  const buffer = await file.arrayBuffer();
+  await fragments.core.load(buffer, { modelId: "school_arq" });
+  await world.camera.controls.setLookAt(68, 23, -8.5, 21.5, -5.5, 23);
+  await fragments.core.update(true);
+
+  return element;
+};

package/src/cli/templates/bim/src/ui-components/app-info-section/index.ts

@@ -0,0 +1,26 @@
+import * as BUI from "@thatopen/ui";
+import { AppInfoSectionComponent } from "./src";
+import { getAppManager } from "../../app";
+
+export const appInfoSectionTemplate: AppInfoSectionComponent = ({
+  components,
+}) => {
+  const app = getAppManager(components);
+
+  const fileItems =
+    app.projectData?.files.map(
+      (f: { name: string }) => BUI.html`<bim-label>${f.name}</bim-label>`,
+    ) ?? [];
+
+  return BUI.html`
+    <bim-panel-section label="App Info" icon="solar:info-circle-bold">
+      <bim-label>App ID: ${app.client?.context.appId}</bim-label>
+      <bim-label>Project ID: ${app.client?.context.projectId}</bim-label>
+      <bim-label>API URL: ${app.client?.context.apiUrl}</bim-label>
+      <bim-label>Files: ${fileItems.length}</bim-label>
+      ${fileItems}
+    </bim-panel-section>
+  `;
+};
+
+export * from "./src";

package/src/cli/templates/bim/src/ui-components/app-info-section/src/index.ts

@@ -0,0 +1 @@
+export * from "./types";

package/src/cli/templates/bim/src/ui-components/app-info-section/src/types.ts

@@ -0,0 +1,15 @@
+import * as BUI from "@thatopen/ui";
+import * as OBC from "@thatopen/components";
+
+export interface AppInfoSectionState {
+  components: OBC.Components;
+}
+
+export type AppInfoSectionComponent =
+  BUI.StatefullComponent<AppInfoSectionState>;
+
+// Used in App type (app.ts) to type this element slot in the grid.
+export type AppInfoSectionGridElement = {
+  name: "appInfoSection";
+  state: AppInfoSectionState;
+};

package/src/cli/templates/bim/src/ui-components/cloud-runner-section/index.ts

@@ -0,0 +1,37 @@
+import * as BUI from "@thatopen/ui";
+import { CloudRunner } from "../../bim-components";
+import { CloudRunnerSectionComponent } from "./src";
+
+export const cloudRunnerSectionTemplate: CloudRunnerSectionComponent = ({
+  components,
+}) => {
+  const runner = components.get(CloudRunner);
+
+  const messageItems = runner.messages.map(
+    (m) => BUI.html`<bim-label>${m}</bim-label>`,
+  );
+
+  return BUI.html`
+    <bim-panel-section label="Cloud Component" icon="solar:code-bold">
+      <bim-label>Component ID: ${runner.componentId}</bim-label>
+      <bim-label>Local server: ${runner.localServerUrl}</bim-label>
+      <div style="display:flex;gap:0.5rem;">
+        <bim-button
+          label="Run Local"
+          icon="solar:play-bold"
+          @click=${() => runner.run(true)}
+        ></bim-button>
+        <bim-button
+          label="Run Deployed"
+          icon="solar:cloud-bold-duotone"
+          @click=${() => runner.run(false)}
+        ></bim-button>
+      </div>
+      <bim-label>${runner.status}</bim-label>
+      <bim-label>Progress: ${runner.progress}%</bim-label>
+      ${messageItems}
+    </bim-panel-section>
+  `;
+};
+
+export * from "./src";

package/src/cli/templates/bim/src/ui-components/cloud-runner-section/src/index.ts

@@ -0,0 +1 @@
+export * from "./types";

package/src/cli/templates/bim/src/ui-components/cloud-runner-section/src/types.ts

@@ -0,0 +1,14 @@
+import * as OBC from "@thatopen/components";
+import * as BUI from "@thatopen/ui";
+
+export interface CloudRunnerSectionState {
+  components: OBC.Components;
+}
+
+export type CloudRunnerSectionComponent =
+  BUI.StatefullComponent<CloudRunnerSectionState>;
+
+export type CloudRunnerSectionGridElement = {
+  name: "cloudRunnerSection";
+  state: CloudRunnerSectionState;
+};

package/src/cli/templates/bim/src/ui-components/index.ts

@@ -0,0 +1,2 @@
+export * from "./app-info-section";
+export * from "./cloud-runner-section";