@thatopen/services 0.0.3 → 0.0.5

package/dist/core/examples/execution.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/core/examples/file-metadata.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/core/examples/files.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/core/examples/folders.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/core/examples/hidden-files.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/core/examples/icons.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/core/examples/permissions.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/items.d.ts

@@ -6,6 +6,8 @@ export interface Item extends Base {
     itemType: ItemType;
     folderId?: ObjectId;
     internalId: string;
+    iconFileId?: string;
+    iconMimeType?: string;
 }
 export type ItemType = 'APP' | 'TOOL' | 'HIDDEN' | 'FILE';
 export interface ItemVersion extends Base {

package/docs/builtin/paths.json

@@ -0,0 +1,54 @@
+[
+  {
+    "path": "src/built-in/AppManager/example.ts",
+    "description": ""
+  },
+  {
+    "path": "src/built-in/CDEManager/example.ts",
+    "description": "CDEManager — CDEManager is the central state machine for a Common Data Environment. It holds files, folders, metadata schemas, viewer groups, and user permissions, and exposes a typed state machine that all file operations — selecting, editing, uploading, viewing — route through. It has no DOM or Three.js dependencies and can run in Node, a browser, or a server-side worker wherever `@thatopen/components` is available."
+  },
+  {
+    "path": "src/built-in/CDEManager/examples/FileEditing/example.ts",
+    "description": "Bulk file editing — stage, preview, revert, and commit — A project manager preparing a deliverable handoff needs to update discipline tags across fifteen IFC files after a scope change, rename each to match the new naming convention, and archive three superseded models — all before anything is sent to the backend. Doing the changes one file at a time risks leaving the file list in a half-updated state if the session is interrupted, and there is no way to review exactly what will change before committing."
+  },
+  {
+    "path": "src/built-in/CDEManager/examples/FileMoves/example.ts",
+    "description": "Drag-and-drop file and folder moves — A coordinator restructures the project after a scope change: structural files move from the root into a dedicated discipline folder, a MEP sub-folder needs to be promoted to the top level, and a few documents need to come back to root to appear in the general view. Drag-and-drop is the natural gesture for all of this, but each drag session has intermediate stages — the file is \"in the air\", hovering over a candidate target — and every panel watching the file table should see the right state without coordinating directly with the drag component."
+  },
+  {
+    "path": "src/built-in/CDEManager/examples/FileOperations/example.ts",
+    "description": "File operations — inline edit, rename, view, download, archive — BIM coordinators reviewing a model drop repeat the same small actions throughout their session: correcting a discipline tag that changed after a scope revision, renaming a file to match the agreed convention, opening it alongside the structural model to check for clashes, handing it off to a sub-consultant, or removing a superseded version from the live set. If every panel in the platform handles these separately, two panels looking at the same file at the same time can show contradictory states — one says \"uploading\", another still shows the old name."
+  },
+  {
+    "path": "src/built-in/CDEManager/examples/FileTransfers/example.ts",
+    "description": "File uploads, versioning, and the download cache — A site coordinator drops a batch of files onto the CDE every Monday after the weekend review: some are entirely new models, some are revised versions of files already in the project, and sometimes the metadata group they upload into should be stamped automatically onto the new files. If the platform makes the coordinator sort this out manually, it slows the handoff and introduces naming errors. And if an upload fails halfway through a batch, the file table should land in a safe state rather than freeze at a loading spinner."
+  },
+  {
+    "path": "src/built-in/CDEManager/examples/FolderManagement/example.ts",
+    "description": "Folder management — create, rename, archive, and commit — A project reaches the construction phase and the coordination team needs to restructure the folder hierarchy: add a \"Facades\" discipline folder, rename \"Structural\" to its official abbreviation, and archive two superseded folders that have been merged. Doing these one at a time through separate API calls means the folder tree flickers between invalid states as each change lands — a freshly created folder appears before its sibling is renamed, and the archived folders briefly disappear before the new one is visible."
+  },
+  {
+    "path": "src/built-in/CDEManager/examples/MetadataSchema/example.ts",
+    "description": "Metadata schema — define, stage, and publish field definitions — Every project has its own vocabulary for describing files: discipline codes, revision phases, area zones, review statuses. A metadata schema defines which fields exist, what values they accept, and whether they are mandatory. Without a structured schema, each user invents their own labels and the file list becomes impossible to filter or report on consistently."
+  },
+  {
+    "path": "src/built-in/CDEManager/examples/MetadataViews/example.ts",
+    "description": "Metadata views — organize fields into named table layouts — A structural engineer and an MEP coordinator look at the same file list but care about completely different metadata. Showing every field to everyone produces a wide table that is hard to navigate. Metadata views let each role define which fields appear in which order — saving the layout so the table opens correctly next time without requiring a manual setup every session."
+  },
+  {
+    "path": "src/built-in/CDEManager/examples/ProjectConfig/example.ts",
+    "description": "Project configuration — read, write, and reload persistent data — A CDE application needs to store two kinds of configuration: project-wide settings that all team members share (the metadata schema, custom naming rules) and personal settings that belong to one user (which columns are visible, which metadata views are pinned). Both live inside the project's file storage under a reserved system folder, so they travel with the project and don't rely on a separate configuration service."
+  },
+  {
+    "path": "src/built-in/FileList/example.ts",
+    "description": ""
+  },
+  {
+    "path": "src/built-in/TabbedNavigation/example.ts",
+    "description": ""
+  },
+  {
+    "path": "src/built-in/ViewportsManager/example.ts",
+    "description": ""
+  }
+]

package/docs/cli/create.md

@@ -0,0 +1,28 @@
+---
+description: "Scaffold a new app or cloud component project from a template. Covers --template (app for browser BIM apps, cloud-component for server-side components), --beta for switching to private beta engine libraries at scaffold time, and using '.' as the project name to scaffold into the current directory."
+---
+
+## thatopen create
+
+Scaffolds a new ThatOpen project and runs `npm install` automatically.
+
+**Usage:**
+```bash
+thatopen create <project-name> [flags]
+thatopen create .             # scaffold into the current directory
+```
+
+**Flags:**
+
+- `--template <template>`, `-t` — Template to use. Default: `app`.
+  - `app` — Browser BIM app running inside the platform iframe.
+  - `cloud-component` — Server-side component executed by the platform's cloud engine and consumed in apps and/or automations.
+- `--beta` — Use private beta engine libraries (`@thatopen-platform/*-beta`) instead of the public ones. Sets `beta: true` in `.thatopen` so `serve`, `local-server`, and `vite build` all resolve to beta packages automatically. Requires beta npm access configured.
+
+**Examples:**
+```bash
+thatopen create my-app
+thatopen create my-app -t cloud-component
+thatopen create my-app --beta
+thatopen create . --beta
+```

package/docs/cli/local-server.md

@@ -0,0 +1,38 @@
+---
+description: "Start a local HTTP + Socket.IO server that replicates the platform's cloud execution API on port 4001, with esbuild watch mode. Connect an app to it via EngineServicesClient's localServerUrl option to execute and monitor a local cloud component without publishing."
+---
+
+## thatopen local-server
+
+Starts a local server that mimics the platform's cloud execution API. Runs esbuild in watch mode and rebuilds the component on every save.
+
+Connect an app to it by passing `localServerUrl` to `EngineServicesClient`:
+
+```ts
+const client = new EngineServicesClient(token, apiUrl, {
+  localServerUrl: 'http://localhost:4001'
+});
+```
+
+**Usage:**
+```bash
+thatopen local-server [flags]
+```
+
+**Flags:**
+
+- `--port <port>` — Port to run the server on. Default: `4001`.
+- `--skip-build` — Skip the initial build and use the existing `dist/bundle.js`.
+
+**Endpoints:**
+
+- `POST /api/processor/:componentId/execute`
+- `GET  /api/processor/progress/:executionId`
+- `POST /api/processor/progress/:executionId/abort`
+- `GET  /api/processor/:componentId/progress`
+
+**Example:**
+```bash
+thatopen local-server
+thatopen local-server --port 5000
+```

package/docs/cli/login.md

@@ -0,0 +1,32 @@
+---
+description: "Authenticate with the ThatOpen platform by validating an access token against the API. Saves credentials globally (~/.thatopen/config.json) by default, or locally to the project's .thatopen file with --local. Local config takes priority over global."
+---
+
+## thatopen login
+
+Validates an access token against the platform API and saves the credentials. Run this once globally before using any other command, or per-project with `--local`.
+
+To get a token:
+1. Go to [https://dev.platform.thatopen.com](https://dev.platform.thatopen.com)
+2. In the header, click **Data**
+3. Find the **Tokens** card and create a new token
+4. Enable the permissions: **Apps**, **Components**, and **Storage**
+5. Copy the token
+
+**Usage:**
+```bash
+thatopen login --token <token> [flags]
+```
+
+**Flags:**
+
+- `--token <token>` — Access token from the dashboard. Required.
+- `--api-url <url>` — Platform API URL. Default: `https://dev.platform.thatopen.com`.
+- `--local` — Save credentials to `.thatopen` in the current directory instead of the global config. Use this inside a project to override the global token for that project only.
+
+**Examples:**
+```bash
+thatopen login --token my-token
+thatopen login --token my-token --local
+npm run login -- --token my-token    # from inside a scaffolded project
+```

package/docs/cli/paths.json

@@ -0,0 +1,30 @@
+[
+  {
+    "path": "docs/cli/create.md",
+    "description": "Scaffold a new app or cloud component project from a template. Covers --template (app for browser BIM apps, cloud-component for server-side components), --beta for switching to private beta engine libraries at scaffold time, and using '.' as the project name to scaffold into the current directory."
+  },
+  {
+    "path": "docs/cli/local-server.md",
+    "description": "Start a local HTTP + Socket.IO server that replicates the platform's cloud execution API on port 4001, with esbuild watch mode. Connect an app to it via EngineServicesClient's localServerUrl option to execute and monitor a local cloud component without publishing."
+  },
+  {
+    "path": "docs/cli/login.md",
+    "description": "Authenticate with the ThatOpen platform by validating an access token against the API. Saves credentials globally (~/.thatopen/config.json) by default, or locally to the project's .thatopen file with --local. Local config takes priority over global."
+  },
+  {
+    "path": "docs/cli/publish.md",
+    "description": "Build and upload the project to the platform. Automatically detects app vs cloud component from the local .thatopen config. On first publish, saves the assigned item ID back to .thatopen so subsequent runs update the same item instead of creating a new one."
+  },
+  {
+    "path": "docs/cli/run.md",
+    "description": "Build and run a cloud component locally as a child process, mirroring the backend execution environment. Accepts execution parameters as JSON via --params, validates them against declarations.json, and streams progress output to the terminal."
+  },
+  {
+    "path": "docs/cli/serve.md",
+    "description": "Start a local dev server for a browser app. Uses esbuild in watch mode and serves the IIFE bundle on port 4000 with SSE live reload. To connect: open the project on dev.platform.thatopen.com, click the Local App icon, then Get Started."
+  },
+  {
+    "path": "docs/cli/swap.md",
+    "description": "Toggle or explicitly set the engine library mode between stable public packages (@thatopen/*) and private beta packages (@thatopen-platform/*-beta). Updates package.json and .thatopen, then runs npm install. Source code never changes — aliases handle resolution."
+  }
+]

package/docs/cli/publish.md

@@ -0,0 +1,31 @@
+---
+description: "Build and upload the project to the platform. Automatically detects app vs cloud component from the local .thatopen config. On first publish, saves the assigned item ID back to .thatopen so subsequent runs update the same item instead of creating a new one."
+---
+
+## thatopen publish
+
+Builds the project and uploads it to the platform. Works for both apps and cloud components — the project type is read from `.thatopen` (`itemType: APP | COMPONENT`).
+
+First publish creates the item and auto-saves its ID to `.thatopen`. Subsequent publishes update that same item.
+
+**Usage:**
+```bash
+thatopen publish [flags]
+```
+
+**Flags:**
+
+- `--name <name>` — Item name on the platform. Defaults to `name` in `package.json`.
+- `--version-tag <tag>` — Version tag. Defaults to `version` in `package.json`.
+- `--app-id <id>` — Target an existing app by ID (overrides `.thatopen`).
+- `--component-id <id>` — Target an existing cloud component by ID (overrides `.thatopen`).
+- `--skip-build` — Skip the build step and upload the existing `dist/bundle.js`.
+- `--icon <path>` — Path to an icon file (PNG, WebP, or ICO, max 512 KB). Saved to `.thatopen` for future publishes.
+
+**Examples:**
+```bash
+thatopen publish
+thatopen publish --version-tag 2.0.0
+thatopen publish --skip-build
+thatopen publish --icon assets/icon.png
+```

package/docs/cli/run.md

@@ -0,0 +1,26 @@
+---
+description: "Build and run a cloud component locally as a child process, mirroring the backend execution environment. Accepts execution parameters as JSON via --params, validates them against declarations.json, and streams progress output to the terminal."
+---
+
+## thatopen run
+
+Builds and executes a cloud component locally, replicating what the platform's cloud engine does. Useful for testing component logic and parameters before publishing.
+
+Execution output (`MESSAGE`, `PROGRESS`, `SUCCESS`, `FAIL`) is streamed to the terminal with elapsed time.
+
+**Usage:**
+```bash
+thatopen run [flags]
+```
+
+**Flags:**
+
+- `--params <json>` — Execution parameters as a JSON string. Default: `'{}'`. Validated against `declarations.json` if present (warns, does not fail).
+- `--skip-build` — Skip the build step and run the existing `dist/bundle.js`.
+
+**Examples:**
+```bash
+thatopen run
+thatopen run --params '{"fileId": "abc123"}'
+thatopen run --skip-build
+```

package/docs/cli/serve.md

@@ -0,0 +1,43 @@
+---
+description: "Start a local dev server for a browser app. Uses esbuild in watch mode and serves the IIFE bundle on port 4000 with SSE live reload. To connect: open the project on dev.platform.thatopen.com, click the Local App icon, then Get Started."
+---
+
+## thatopen serve
+
+Builds the app in watch mode and serves the IIFE bundle locally. On every save, esbuild rebuilds and the platform reloads the bundle automatically via SSE.
+
+Does **not** open a browser tab — the app runs inside the platform iframe. Open your project on the platform, then click the debug button to connect it to the local server.
+
+**Usage:**
+```bash
+thatopen serve [flags]
+```
+
+**Flags:**
+
+- `--port <port>` — Port to serve the bundle on. Default: `4000`.
+
+**Endpoints served:**
+
+- `GET /bundle.js` — The compiled IIFE bundle.
+- `GET /bundle.js.map` — Source map.
+- `GET /events` — SSE stream for live reload.
+
+**Example:**
+```bash
+thatopen serve
+thatopen serve --port 4321
+```
+
+**Connecting the platform to your local server:**
+
+1. Go to [https://dev.platform.thatopen.com](https://dev.platform.thatopen.com) and open a project (create one first if needed).
+2. In the top right corner, click the **Local App** icon.
+3. Click **Get Started**.
+
+The platform loads the bundle from port 4000 and renders the app inside the project context, with full access to its models, data, and users. The dev server must be running before opening this URL — if nothing is served on port 4000, the platform will fail to load the app.
+
+The resulting URL follows this pattern:
+```
+https://dev.platform.thatopen.com/dashboard/projects/{projectId}/apps/local-app
+```

package/docs/cli/swap.md

@@ -0,0 +1,30 @@
+---
+description: "Toggle or explicitly set the engine library mode between stable public packages (@thatopen/*) and private beta packages (@thatopen-platform/*-beta). Updates package.json and .thatopen, then runs npm install. Source code never changes — aliases handle resolution."
+---
+
+## thatopen swap
+
+Switches the project between stable and beta engine libraries. Without flags, it toggles from the current state. Updates `package.json` dependencies and sets `beta` in `.thatopen` so `thatopen serve`, `thatopen local-server`, and `vite build` all pick up the change automatically.
+
+Source code stays unchanged — `@thatopen/components` imports resolve to the correct package via esbuild/vite aliases based on the `beta` flag in `.thatopen`.
+
+**Usage:**
+```bash
+thatopen swap           # toggle: stable → beta or beta → stable
+thatopen swap --beta    # force beta
+thatopen swap --stable  # force stable
+```
+
+**Flags:**
+
+- `--beta` — Switch to beta libraries (`@thatopen-platform/*-beta`).
+- `--stable` — Switch back to stable public libraries (`@thatopen/*`).
+
+**Examples:**
+```bash
+thatopen swap
+thatopen swap --beta
+thatopen swap --stable
+```
+
+> Beta packages are private and the access must be explicitly granted by That Open Company.

package/docs/client/paths.json

@@ -0,0 +1,38 @@
+[
+  {
+    "path": "src/core/examples/apps.ts",
+    "description": "App lifecycle — list, get with versions, create, download bundle, and archive."
+  },
+  {
+    "path": "src/core/examples/components.ts",
+    "description": "Cloud component lifecycle — list, get with versions, create, update, download bundle, archive, and recover."
+  },
+  {
+    "path": "src/core/examples/execution.ts",
+    "description": "Cloud component execution — trigger, track progress via WebSocket, list, get, and abort executions."
+  },
+  {
+    "path": "src/core/examples/file-metadata.ts",
+    "description": "File metadata and versioning — get, update, and delete per-version metadata; list, archive, recover, and permanently delete versions."
+  },
+  {
+    "path": "src/core/examples/files.ts",
+    "description": "File lifecycle — list, get with versions, create, rename, upload new version, download by version, archive, and recover."
+  },
+  {
+    "path": "src/core/examples/folders.ts",
+    "description": "Folder lifecycle — list, get, create nested folders, list files inside a folder, rename, download as ZIP, archive, and recover."
+  },
+  {
+    "path": "src/core/examples/hidden-files.ts",
+    "description": "Hidden file lifecycle — create, get, list by parent, download, and delete."
+  },
+  {
+    "path": "src/core/examples/icons.ts",
+    "description": "Item icon management — upload, download, and remove icons on any item (file, app, or component)."
+  },
+  {
+    "path": "src/core/examples/permissions.ts",
+    "description": "Permission checks — single and batch permission verification using PlatformClient (requires user JWT, not API token)."
+  }
+]

package/package.json

@@ -15,7 +15,7 @@
     "access": "public"
   },
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -27,13 +27,12 @@
     "src/cli/templates",
     "src/built-in",
     "docs",
-    "AGENTS.md",
-    "CONTEXT.md"
+    "resources"
   ],
   "scripts": {
     "dev": "vite",
     "lint": "eslint src/",
-    "build": "eslint src/ && tsc && vite build && vite build --config vite.config.cli.mts",
+    "build": "eslint src/ && tsc && vite build && vite build --config vite.config.cli.mts && node scripts/generate-cli-docs-paths.mjs && node scripts/generate-client-examples-paths.mjs",
     "build:lib": "tsc && vite build",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -45,12 +44,11 @@
     "test:cli-build-component": "npm run build:cli && node test/setup-test-component.mjs",
     "test:cli-run-component": "cd temp/test-component && thatopen run --skip-build",
     "test:cli-serve-component": "cd temp/test-component && thatopen local-server",
-    "test:cli-build-tests": "npm run build:cli && thatopen create-tests temp",
-    "test:cli-serve-tests": "thatopen serve-tests temp",
-    "template:bim": "cd src/cli/templates/bim && npm install && cd ../../../.. && node scripts/generate-template-tsconfig.mjs",
-    "template:bim:dev": "cd src/cli/templates/bim && npm run dev",
+    "template:app": "cd src/cli/templates/app && npm install && cd ../../../.. && node scripts/generate-template-tsconfig.mjs",
+    "template:app:dev": "cd src/cli/templates/app && npm run dev",
     "changeset": "changeset",
-    "version": "changeset version"
+    "version": "changeset version",
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.7",
@@ -99,4 +97,4 @@
       "optional": true
     }
   }
-}
+}

package/resources/AGENTS.md

@@ -0,0 +1,39 @@
+# Building on the That Open Platform — Agent Guide
+
+You are an AI assistant helping a user build a **BIM app** or **cloud component** on the
+That Open Platform using **`@thatopen/services`** (the `thatopen` CLI + client library).
+
+**Read this file first.** It states the rules you must follow, then routes you to the right docs.
+Open only the doc you need — don't load everything.
+
+> This guide is tool-agnostic: it works with any AI (Claude, Codex, your own). All docs it
+> references ship inside the `@thatopen/services` package under `docs/`.
+
+---
+
+## How to work
+
+- **The scaffold is already a complete, working viewer** (model loading, spatial tree, properties).
+  **Run it first** (`npm run dev`) to see it work, *then* extend it — don't rebuild a viewer from scratch.
+- **Propose a short plan and get the user's OK** before changing files. If scope is unclear, ask.
+- Prefer existing That Open functionality over custom code (see rules 1 and 2).
+
+## Hard rules (always apply)
+
+1. **Check the That Open ecosystem before building anything custom.** Fetch these indexes and read the descriptions — if something already exists, use it:
+   - Engine components (`OBC`, `OBF`): `https://raw.githubusercontent.com/ThatOpen/engine_components/refs/heads/main/examples/paths.json`
+   - Fragments (`FRAGS`): `https://raw.githubusercontent.com/ThatOpen/engine_fragment/refs/heads/main/examples/paths.json`
+   - UI components (`BUI`): `https://raw.githubusercontent.com/ThatOpen/engine_ui-components/refs/heads/main/examples/paths.json`
+     — **Filter this list**: skip every entry whose path contains `packages/obc` (forbidden — those are `@thatopen/ui-obc`, not used on this platform) and skip `bim-grid` (managed exclusively by the platform). Only use entries from `packages/core`.
+2. **All UI must be built with Lit**, using the web components from `@thatopen/ui` (`BUI`) — `bim-button`, `bim-panel`, `bim-panel-section`, `bim-toolbar`, `bim-dropdown`, `bim-input`, and the rest of `packages/core`. Always consult the design system before writing any UI: `https://raw.githubusercontent.com/ThatOpen/engine_ui-components/refs/heads/main/DESIGN.md`.
+3. **Platform built-ins** come from `@thatopen/services` and are available after `client.setup()`. Check `docs/builtin/paths.json` before reinventing something the platform already provides.
+
+---
+
+## What are you doing? → open the right doc
+
+### CLI commands
+For all CLI commands read `docs/cli/paths.json`.
+
+### Platform client API
+For all platform related operations read `docs/client/paths.json`.

package/src/built-in/AppManager/example.ts

@@ -0,0 +1,86 @@
+import * as OBC from "@thatopen/components";
+import * as BUI from "@thatopen/ui";
+import appManagerDef from "./index";
+
+// ── State types ───────────────────────────────────────────────────────
+
+type Panel1State = { label: string; components: OBC.Components };
+type Panel2State = { label: string; components: OBC.Components };
+
+// ── App type ──────────────────────────────────────────────────────────
+
+interface MyApp {
+  icons: ["LOAD", "TREE", "VIEW"];
+  grid: BUI.Grid<
+    ["Split", "Viewer"],
+    [{ name: "panel1"; state: Panel1State }, { name: "panel2"; state: Panel2State }]
+  >;
+}
+
+// ── Initialise OBC & BUI ──────────────────────────────────────────────
+
+BUI.Manager.init();
+const components = new OBC.Components();
+
+const AppManager = appManagerDef.componentDefinition;
+const app = components.get(AppManager<MyApp>);
+
+// ── Define element templates ──────────────────────────────────────────
+
+const panel1Template: BUI.StatefullComponent<Panel1State> = ({ label, components }) => {
+  const app = components.get(AppManager<MyApp>);
+  return BUI.html`
+    <bim-panel active label=${label} style="min-width: 14rem;">
+      <bim-panel-section label="Actions">
+        <bim-button icon=${app.icons.LOAD} label="Load School Model"></bim-button>
+      </bim-panel-section>
+      <bim-panel-section label="Info">
+        <bim-label>Use the sidebar to switch layouts.</bim-label>
+      </bim-panel-section>
+    </bim-panel>
+  `;
+};
+
+const panel2Template: BUI.StatefullComponent<Panel2State> = ({ label, components }) => {
+  const app = components.get(AppManager<MyApp>);
+  return BUI.html`
+    <bim-panel active label=${label} style="min-width: 14rem;">
+      <bim-panel-section label="Settings">
+        <bim-button icon=${app.icons.VIEW} label="View"></bim-button>
+      </bim-panel-section>
+    </bim-panel>
+  `;
+};
+
+// ── Init ──────────────────────────────────────────────────────────────
+
+app.init({
+  icons: {
+    LOAD: "solar:upload-bold",
+    TREE: "mdi:file-tree",
+    VIEW: "mdi:monitor",
+  },
+  grid: (grid) => {
+    grid.elements = {
+      panel1: { template: panel1Template, initialState: { label: "Models", components } },
+      panel2: { template: panel2Template, initialState: { label: "Settings", components } },
+    };
+    grid.layouts = {
+      Split: {
+        template: `
+          "panel1" 1fr
+          "panel2" 1fr
+          / 25rem 1fr`,
+        icon: app.icons.TREE,
+      },
+      Viewer: {
+        template: `"panel1" 1fr / 1fr`,
+        icon: app.icons.VIEW,
+      },
+    };
+    grid.layout = "Split";
+  },
+  container: document.getElementById("container")!,
+});
+
+app.showSidebar = true;