diff --git a/docs/extending-the-viewer.md b/docs/extending-the-viewer.md
new file mode 100644
index 0000000..aea6cb5
--- /dev/null
+++ b/docs/extending-the-viewer.md
@@ -0,0 +1,133 @@
+# Extending the embeddable viewer
+
+`@compas-dev/compas-threejs-ts` ships an embeddable API (`src/library/index.ts`) built around
+`createViewer(container, options)`. Consumers add their own UI - custom toolbar buttons, panels,
+whatever - by passing options into that call, not by forking this repo's app shell
+(`App.vue`/`Toolbar.vue`/`Sidebar.vue`). `timber_model_viewer/frontend-src` is a real, working
+example of this pattern - read alongside this guide.
+
+## Installing the package
+
+```sh
+npm install @compas-dev/compas-threejs-ts three vue
+```
+
+`three` and `vue` are peer/regular dependencies you provide yourself. Once installed:
+
+```ts
+import "@compas-dev/compas-threejs-ts/style.css";
+import { createViewer } from "@compas-dev/compas-threejs-ts";
+
+const container = document.getElementById("app")!;
+createViewer(container, { mode: "websocket" });
+```
+
+While the extension API below is still evolving, point your `package.json` at a branch instead
+of a published version:
+
+```json
+"@compas-dev/compas-threejs-ts": "github:compas-dev/compas_threejs_ts#<branch>"
+```
+
+`npm install` builds the package automatically on install (via its `prepare` script) - no manual
+build step in the dependency's checkout required. To pick up new commits on that branch:
+
+```sh
+npm update @compas-dev/compas-threejs-ts
+```
+
+Once your customization has stabilized, prefer switching to a published semver range
+(`^1.x`) - see [`releasing.md`](./releasing.md). Registry installs are reproducible from the
+lockfile alone; branch installs re-resolve to whatever the branch currently points at.
+
+## Adding a custom toolbar tool
+
+Pass `toolbarTools` - an array of `{ id, component, order? }` - to `createViewer`. Each
+`component` is mounted directly inside the toolbar, after the built-in tool groups:
+
+```ts
+// tools/MyTool.vue
+```
+
+```vue
+<template>
+  <Button variant="secondary" size="icon" @click="handleClick">Hi</Button>
+</template>
+
+<script setup lang="ts">
+import { Button } from "@compas-dev/compas-threejs-ts/ui";
+import { useViewerMessaging } from "@compas-dev/compas-threejs-ts";
+
+const { sendData } = useViewerMessaging();
+
+function handleClick() {
+  sendData({ dispatch: "other_action", action: "my_action" });
+}
+</script>
+```
+
+```ts
+// main.ts
+import { createViewer } from "@compas-dev/compas-threejs-ts";
+import MyTool from "./tools/MyTool.vue";
+
+createViewer(container, {
+  mode: "websocket",
+  toolbarTools: [{ id: "my-tool", component: MyTool, order: 10 }],
+});
+```
+
+- `order` controls left-to-right placement among _your_ tools (lower first, default `0`); the
+  built-in groups (transform, add-object, view, display) always render first, ahead of any
+  `toolbarTools`.
+- Group several related buttons under one entry by wrapping them in a single component (see
+  `timber_model_viewer/frontend-src/src/tools/CompasTimberGroup.vue`, which bundles five buttons
+  behind one `ToolDefinition`).
+
+## Talking to your backend
+
+`useViewerMessaging()` is the public, minimal messaging surface - deliberately not the full
+internal viewer runtime, so tools depend on a small stable contract instead of internals that
+are free to change:
+
+```ts
+interface ViewerMessaging {
+  send(message: unknown): boolean; // sent as-is if already a string/binary, else JSON.stringify'd
+  sendData(message: Record<string, unknown>): boolean; // always JSON
+}
+```
+
+Use `sendData` for structured messages, and `send` when you've already built the raw payload
+yourself (e.g. splicing a large uploaded JSON file straight into a message envelope without an
+extra parse/stringify round trip - see `LoadTimberModel.vue`).
+
+## UI kit
+
+`@compas-dev/compas-threejs-ts/ui` re-exports the subset of the internal component kit that's
+stable for building tools with: `Button`, `Kbd`, `KbdGroup`, `Tooltip`, `TooltipContent`,
+`TooltipProvider`, `TooltipTrigger`. Use these instead of writing your own so custom tools look
+consistent with the built-in toolbar.
+
+## What's public vs. internal
+
+Only what's exported from `@compas-dev/compas-threejs-ts` and `@compas-dev/compas-threejs-ts/ui`
+is a stable contract (`src/library/public.d.ts` / `src/library/ui.d.ts` are the hand-maintained
+source of truth for what ships - keep them in sync with `src/library/types.ts` / `src/library/
+ui.ts` when changing the public surface). Everything else under `src/` - `components/`,
+`viewer/`, `composables/`, `communications/`, `conversions/`, `store/` - is free to change
+between versions; don't import from `@/...` paths across the package boundary.
+
+## Adding a new extension point
+
+If `toolbarTools` isn't enough for what you're building (e.g. a docked side panel rather than a
+toolbar button), extend the pattern rather than forking the app shell:
+
+1. Add the option to `CompasViewerOptions` in `src/library/types.ts`, and mirror it in
+   `src/library/public.d.ts`.
+2. Add an injection key + `useX()` composable in `src/viewer/viewer_context.ts`.
+3. `app.provide()` it in `src/library/index.ts`'s `createViewer`.
+4. Consume it generically in the relevant layout component (e.g. `Sidebar.vue`) - default to
+   today's built-in behavior when the option is omitted, so existing consumers (including this
+   repo's own standalone app, `src/main.ts`) are unaffected.
+5. Run `npm run check` before opening a PR - it covers lint, typecheck (including the strict
+   `tsconfig.core.json` pass over the public-facing files), tests, and both build targets.
diff --git a/examples/embedded_custom_tool.html b/examples/embedded_custom_tool.html
new file mode 100644
index 0000000..d2f1afd
--- /dev/null
+++ b/examples/embedded_custom_tool.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Embedded COMPAS ThreeJS custom tool</title>
+    <link rel="stylesheet" href="../dist-lib/style.css" />
+    <style>
+      html,
+      body,
+      #viewer {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+
+      .example-title {
+        position: fixed;
+        z-index: 10;
+        top: 1rem;
+        left: 1rem;
+        max-width: 24rem;
+        padding: 0.75rem 1rem;
+        color: #172033;
+        background: rgb(255 255 255 / 88%);
+        border: 1px solid rgb(23 32 51 / 12%);
+        border-radius: 0.75rem;
+        box-shadow: 0 0.5rem 2rem rgb(23 32 51 / 12%);
+        font:
+          500 0.875rem/1.45 Inter,
+          sans-serif;
+        pointer-events: none;
+      }
+
+      .example-title strong {
+        display: block;
+        margin-bottom: 0.2rem;
+        font-size: 1rem;
+      }
+    </style>
+    <script type="importmap">
+      {
+        "imports": {
+          "vue": "../node_modules/vue/dist/vue.esm-browser.js",
+          "three": "../node_modules/three/build/three.module.js",
+          "three/": "../node_modules/three/",
+          "@gramaziokohler/compas-pb-ts": "../node_modules/@gramaziokohler/compas-pb-ts/dist/index.js",
+          "@bufbuild/protobuf/wire": "../node_modules/@bufbuild/protobuf/dist/esm/wire/index.js"
+        }
+      }
+    </script>
+  </head>
+
+  <body>
+    <aside class="example-title">
+      <strong>Extending the toolbar</strong>
+      A custom tool passed in via <code>toolbarTools</code>, built from the
+      public <code>/ui</code> kit and <code>useViewerMessaging()</code> - see
+      docs/extending-the-viewer.md. Click the ping button to send a message
+      through the viewer's <code>send</code> option.
+    </aside>
+    <div id="viewer" aria-label="3D viewer with a custom toolbar tool"></div>
+    <script type="module" src="./embedded_custom_tool.js"></script>
+  </body>
+</html>
diff --git a/examples/embedded_custom_tool.js b/examples/embedded_custom_tool.js
new file mode 100644
index 0000000..2aeaaf4
--- /dev/null
+++ b/examples/embedded_custom_tool.js
@@ -0,0 +1,100 @@
+import { defineComponent, h, ref } from "vue";
+import { Box, pbDumpBytes } from "@gramaziokohler/compas-pb-ts";
+
+import { createViewer, useViewerMessaging } from "../dist-lib/index.js";
+import {
+  Button,
+  Kbd,
+  KbdGroup,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../dist-lib/ui.js";
+
+// A toolbar tool authored exactly the way a consumer would: a Vue component
+// built from the public ui kit (`@compas-dev/compas-threejs-ts/ui`) and
+// `useViewerMessaging()`, with no access to viewer internals. It's passed
+// into `toolbarTools` below rather than forking Toolbar.vue.
+const PingTool = defineComponent({
+  name: "PingTool",
+  setup() {
+    const pingCount = ref(0);
+    const { sendData } = useViewerMessaging();
+
+    function handleClick() {
+      pingCount.value += 1;
+      sendData({
+        dispatch: "other_action",
+        action: "ping",
+        count: pingCount.value,
+      });
+    }
+
+    return () =>
+      h(TooltipProvider, { delayDuration: 600 }, () =>
+        h(Tooltip, null, () => [
+          h(TooltipTrigger, null, () =>
+            h(
+              Button,
+              {
+                variant: "secondary",
+                size: "icon",
+                "data-testid": "ping-tool-button",
+                onClick: handleClick,
+              },
+              () => "Hi",
+            ),
+          ),
+          h(TooltipContent, { side: "bottom" }, () => [
+            h("p", null, `Sent ${pingCount.value} ping(s)`),
+            h(KbdGroup, null, () => [h(Kbd, null, () => "click")]),
+          ]),
+        ]),
+      );
+  },
+});
+
+const container = document.querySelector("#viewer");
+if (!(container instanceof HTMLElement)) {
+  throw new Error("Viewer container was not found");
+}
+
+// Messages sent by tools via `useViewerMessaging()` are routed through this
+// `send` option instead of a real backend connection - the same hook a
+// consumer would use to wire up their own transport.
+const outgoingMessages = [];
+
+const viewer = createViewer(container, {
+  mode: "embedded",
+  defaultLighting: true,
+  showToolbar: true,
+  toolbarTools: [{ id: "ping-tool", component: PingTool, order: 10 }],
+  send(message) {
+    outgoingMessages.push(message);
+    return true;
+  },
+  onError(error) {
+    console.error(error.code, error.message, error.details);
+  },
+});
+
+const box = new Box({
+  data: {
+    guid: crypto.randomUUID(),
+    name: "Box",
+    frame: {
+      point: { x: 0, y: 0, z: 0 },
+      xaxis: { x: 1, y: 0, z: 0 },
+      yaxis: { x: 0, y: 1, z: 0 },
+    },
+    xsize: 3,
+    ysize: 3,
+    zsize: 1,
+  },
+});
+viewer.dispatch(pbDumpBytes(box));
+
+document.body.dataset.exampleReady = "true";
+window.__compasCustomTool = { viewer, outgoingMessages };
+window.addEventListener("pagehide", () => viewer.dispose(), { once: true });
diff --git a/package.json b/package.json
index 9af6a35..dd8a81e 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,10 @@
       "types": "./dist-lib/index.d.ts",
       "import": "./dist-lib/index.js"
     },
+    "./ui": {
+      "types": "./dist-lib/ui.d.ts",
+      "import": "./dist-lib/ui.js"
+    },
     "./style.css": "./dist-lib/style.css"
   },
   "files": [
@@ -55,7 +59,7 @@
     "test:package": "node scripts/test-package.mjs",
     "check": "npm run format:check && npm run lint && npm run typecheck && npm test && npm run build:app && npm run build:library",
     "audit:prod": "npm audit --omit=dev --audit-level=high",
-    "prepare": "git config core.hooksPath .githooks || true",
+    "prepare": "node scripts/prepare.mjs",
     "prepublishOnly": "npm run check && npm run audit:prod",
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --fix",
diff --git a/scripts/copy-library-types.mjs b/scripts/copy-library-types.mjs
index fc26dab..a16b444 100644
--- a/scripts/copy-library-types.mjs
+++ b/scripts/copy-library-types.mjs
@@ -1,3 +1,4 @@
 import { copyFileSync } from "node:fs";
 
 copyFileSync("src/library/public.d.ts", "dist-lib/index.d.ts");
+copyFileSync("src/library/ui.d.ts", "dist-lib/ui.d.ts");
diff --git a/scripts/prepare.mjs b/scripts/prepare.mjs
new file mode 100644
index 0000000..c6975a5
--- /dev/null
+++ b/scripts/prepare.mjs
@@ -0,0 +1,32 @@
+import { spawnSync } from "node:child_process";
+
+// Best-effort: sets up the commit-msg hook for local contributor checkouts.
+// Failing here (e.g. no .git directory, such as inside a package tarball)
+// must never block the build below - npm's own git-dependency install flow
+// depends on this script's exit code reflecting only the build. Captured
+// (not inherited) for the same reason as the build step below.
+spawnSync("git", ["config", "core.hooksPath", ".githooks"], {
+  stdio: "pipe",
+  shell: true,
+});
+
+// Captured rather than inherited: some npm versions still run `prepare`
+// during `npm pack --ignore-scripts` (that flag reliably skips it in newer
+// npm, but not consistently across versions - confirmed by CI using an
+// older bundled npm than this repo's pinned packageManager). When that
+// happens, anything this script prints to stdout gets interleaved into
+// `npm pack --json`'s own stdout and breaks JSON.parse for whoever's
+// consuming it (scripts/test-package.mjs). Only surface output - on
+// stderr, never stdout - if the build actually fails.
+const npmCommand = process.platform === "win32" ? "npm.cmd" : "npm";
+const build = spawnSync(npmCommand, ["run", "build:library"], {
+  stdio: "pipe",
+  shell: true,
+  encoding: "utf8",
+});
+if (build.error) throw build.error;
+if (build.status !== 0) {
+  process.stderr.write(build.stdout ?? "");
+  process.stderr.write(build.stderr ?? "");
+}
+process.exit(build.status ?? 1);
diff --git a/scripts/test-package.mjs b/scripts/test-package.mjs
index 3d9e00e..b6a1590 100644
--- a/scripts/test-package.mjs
+++ b/scripts/test-package.mjs
@@ -36,6 +36,10 @@ function run(command, args, options = {}) {
 }
 
 try {
+  // shell: true - required on Windows to spawn a .cmd shim (npm.cmd) at all;
+  // Node's spawnSync can't exec one directly without going through a shell.
+  // Safe here specifically because these args are internally generated
+  // (this repo's own paths and fixed flag strings), never user input.
   const packed = JSON.parse(
     run(
       npmCommand,
@@ -47,7 +51,7 @@ try {
         "--pack-destination",
         consumerRoot,
       ],
-      { cwd: projectRoot },
+      { cwd: projectRoot, shell: true },
     ),
   );
   const archive = join(consumerRoot, packed[0].filename);
@@ -60,7 +64,7 @@ try {
       type: "module",
     }),
   );
-  run(npmCommand, ["install", "--ignore-scripts", archive]);
+  run(npmCommand, ["install", "--ignore-scripts", archive], { shell: true });
 
   const packageName = "@compas-dev/compas-threejs-ts";
   const installed = JSON.parse(
diff --git a/src/App.vue b/src/App.vue
index 443fb1e..c6a005d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,39 @@
 <template>
-  <div class="app-container" :class="{ dark: theme.value === 'dark' }">
-    <!-- <Toolbar />
-        <Openbar v-if="sideBarInfoState.isVisible" /> -->
-    <Sidebar :show-toolbar="props.showToolbar" />
-    <div ref="threeContainer" class="three-container"></div>
-    <ThemeIndicator />
-    <RightSidebar />
+  <div
+    class="app-container"
+    :class="{
+      dark: theme.value === 'dark',
+      'docked-top': isDockedTop,
+    }"
+  >
+    <div v-if="isDockedTop" class="dock-top">
+      <Toolbar v-if="props.showToolbar && toolbarPlacement === 'docked-top'" />
+      <ObjectActions v-if="objectActionsPlacement === 'docked-top'" />
+    </div>
+
+    <div class="workspace">
+      <Openbar v-if="openbarPlacement === 'docked-left'" />
+      <Sidebar :show-toolbar="props.showToolbar" />
+      <div ref="threeContainer" class="three-container"></div>
+      <ThemeIndicator />
+      <RightSidebar />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
+import ObjectActions from "@/components/layout/ObjectActions.vue";
+import Openbar from "@/components/layout/Openbar.vue";
 import RightSidebar from "./components/layout/RightSidebar.vue";
 import Sidebar from "@/components/layout/Sidebar.vue";
 import ThemeIndicator from "@/components/layout/ThemeIndicator.vue";
+import Toolbar from "@/components/layout/Toolbar.vue";
+import {
+  useObjectActionsPlacement,
+  useOpenbarPlacement,
+  useToolbarPlacement,
+} from "@/viewer/viewer_context";
 import type { ViewerRuntime } from "@/viewer/viewer_runtime";
 
 const threeContainer = ref<HTMLDivElement | null>(null);
@@ -24,6 +44,14 @@ const props = withDefaults(
   },
 );
 const { theme } = props.runtime.store;
+const toolbarPlacement = useToolbarPlacement();
+const openbarPlacement = useOpenbarPlacement();
+const objectActionsPlacement = useObjectActionsPlacement();
+const isDockedTop = computed(
+  () =>
+    toolbarPlacement === "docked-top" ||
+    objectActionsPlacement === "docked-top",
+);
 
 onMounted(() => {
   if (threeContainer.value) props.runtime.attach(threeContainer.value);
@@ -46,4 +74,25 @@ div.three-container {
   position: relative;
   overflow: hidden; /* Hide any overflow from the Three.js canvas */
 }
+
+div.app-container.docked-top {
+  flex-direction: column;
+}
+
+div.dock-top {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  flex: 0 0 auto;
+  padding: 12px 16px;
+}
+
+div.workspace {
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  min-height: 0; /* Let it shrink below content size inside the column-direction app-container */
+}
 </style>
diff --git a/src/components/layout/ObjectActions.vue b/src/components/layout/ObjectActions.vue
index 68cba5c..3dcbadf 100644
--- a/src/components/layout/ObjectActions.vue
+++ b/src/components/layout/ObjectActions.vue
@@ -1,7 +1,10 @@
 <template>
   <div
     class="theme object-actions"
-    :class="{ 'is-empty': !objectActionsState.length }"
+    :class="{
+      'is-empty': !objectActionsState.length,
+      'docked-top': placement === 'docked-top',
+    }"
     id="actions-panel"
     ref="actionsPanel"
   >
@@ -20,7 +23,7 @@
         v-if="action.type === 'button'"
         variant="outline"
         @click="handleObjectAction(action)"
-        class="w-full"
+        :class="{ 'w-full': placement !== 'docked-top' }"
       >
         {{ action.text }}
       </Button>
@@ -37,7 +40,7 @@
           }
         "
       >
-        <SelectTrigger class="w-full">
+        <SelectTrigger :class="{ 'w-full': placement !== 'docked-top' }">
           <SelectValue
             :placeholder="action.placeholder ?? 'Select an option'"
           />
@@ -67,7 +70,10 @@ import {
 } from "@/components/ui/select";
 import { useHover } from "@/composables/useHover";
 import { ref, watchEffect } from "vue";
-import { useViewerRuntime } from "@/viewer/viewer_context";
+import {
+  useObjectActionsPlacement,
+  useViewerRuntime,
+} from "@/viewer/viewer_context";
 import type { ObjectAction } from "@/viewer/viewer_store";
 
 const runtime = useViewerRuntime();
@@ -75,6 +81,7 @@ const { objectActionsState, blockPicker, theme } = runtime.store;
 const handleObjectAction = (action: ObjectAction, value?: unknown) =>
   runtime.handleObjectAction({ ...action }, value);
 const actionsPanel = ref<HTMLElement | null>(null);
+const placement = useObjectActionsPlacement();
 
 const { isHovered } = useHover(actionsPanel);
 
@@ -98,6 +105,29 @@ div.object-actions {
   gap: 30px;
   color: var(--foreground);
   pointer-events: auto;
+  background: var(--object-actions-background);
+  border: 1px solid var(--object-actions-border-color);
+}
+
+div.object-actions.docked-top {
+  max-width: none;
+  width: 100%;
+  flex: 0 0 auto;
+  min-height: var(--docked-bar-height);
+  max-height: 40vh;
+  padding: var(--docked-bar-padding);
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Toolbar's own h1 carries no padding/margin of its own - match it here too,
+   rather than the corner-mode title's extra bezel spacing, so a docked-top
+   toolbar and object-actions bar come out the same height. */
+div.object-actions.docked-top h1.section-title {
+  margin-bottom: 0;
+  padding: 0;
 }
 
 div.object-actions.is-empty {
@@ -108,19 +138,22 @@ div.object-actions.is-empty {
   display: none;
 }
 
+div.object-actions.docked-top.is-empty {
+  /* Docked-top is its own always-mounted bar under the toolbar, not sharing
+     RightSidebar's TransitionGroup - nothing to lose by staying visible
+     (showing just the title) when there's no selection yet. */
+  display: flex;
+}
+
 h1.section-title {
   margin-bottom: 10px;
   color: var(--foreground);
-  background: color-mix(in oklab, var(--background) 25%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  background: var(--section-title-background);
+  backdrop-filter: blur(var(--section-title-blur));
+  -webkit-backdrop-filter: blur(var(--section-title-blur));
   padding: 5px;
   padding-left: 10px;
   border-radius: 10px;
-  box-shadow:
-    1px 1px 3px 0px color-mix(in oklab, var(--foreground) 35%, transparent)
-      inset,
-    -1px -1px 3px 0px color-mix(in oklab, var(--background) 70%, transparent)
-      inset;
+  box-shadow: var(--section-title-shadow);
 }
 </style>
diff --git a/src/components/layout/ObjectInfo.vue b/src/components/layout/ObjectInfo.vue
index 1a7f8e9..72cc30d 100644
--- a/src/components/layout/ObjectInfo.vue
+++ b/src/components/layout/ObjectInfo.vue
@@ -92,18 +92,13 @@ div.item {
 h1.section-title {
   margin-bottom: 10px;
   color: var(--foreground);
-  background: color-mix(in oklab, var(--background) 25%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  /*border: 1px solid rgba(255, 255, 255, 0.2);*/
+  background: var(--section-title-background);
+  backdrop-filter: blur(var(--section-title-blur));
+  -webkit-backdrop-filter: blur(var(--section-title-blur));
   padding: 5px;
   padding-left: 10px;
   border-radius: 10px;
-  box-shadow:
-    1px 1px 3px 0px color-mix(in oklab, var(--foreground) 35%, transparent)
-      inset,
-    -1px -1px 3px 0px color-mix(in oklab, var(--background) 70%, transparent)
-      inset;
+  box-shadow: var(--section-title-shadow);
 }
 
 div.data-entry {
diff --git a/src/components/layout/Openbar.vue b/src/components/layout/Openbar.vue
index 8b5e32c..3c22147 100644
--- a/src/components/layout/Openbar.vue
+++ b/src/components/layout/Openbar.vue
@@ -1,140 +1,152 @@
 <template>
-  <div
-    ref="openbarElement"
-    id="openbar"
-    class="fixed-openbar theme"
-    :class="{ 'is-hidden': !isVisible }"
-  >
-    <!-- Dynamically render components from the store -->
-    <div v-for="item in sidebarComponents" :key="item.id" class="dynamic-item">
-      <label
-        v-if="item.label"
-        class="dynamic-label"
-        :class="{ dark: theme.value === 'dark' }"
+  <template v-if="sideBarInfoState.isVisible">
+    <div
+      ref="openbarElement"
+      id="openbar"
+      class="fixed-openbar theme"
+      :class="{
+        'is-hidden': !isVisible,
+        'docked-left': placement === 'docked-left',
+      }"
+    >
+      <!-- Dynamically render components from the store -->
+      <div
+        v-for="item in sidebarComponents"
+        :key="item.id"
+        class="dynamic-item"
       >
-        {{ item.label }}
-      </label>
+        <label
+          v-if="item.label"
+          class="dynamic-label"
+          :class="{ dark: theme.value === 'dark' }"
+        >
+          {{ item.label }}
+        </label>
 
-      <div v-if="item.component === 'Button'" class="button-container">
-        <Button variant="secondary" @click="handleAction(item.action)">
-          {{ item.props.text }}
-        </Button>
-      </div>
+        <div v-if="item.component === 'Button'" class="button-container">
+          <Button variant="secondary" @click="handleAction(item.action)">
+            {{ item.props.text }}
+          </Button>
+        </div>
 
-      <div v-else-if="item.component === 'Slider'" class="slider-container">
-        <Slider
-          :min="item.props.min"
-          :max="item.props.max"
-          :step="item.props.step"
-          :default-value="item.props.defaultValue"
-          v-model="item.props.defaultValue"
-          @update:model-value="(value) => handleAction(item.action, value?.[0])"
-          class="w-[80%]"
-        />
-        <span v-if="item.props.defaultValue" class="slider-value">
-          {{ item.props.defaultValue[0] }}
-        </span>
-      </div>
+        <div v-else-if="item.component === 'Slider'" class="slider-container">
+          <Slider
+            :min="item.props.min"
+            :max="item.props.max"
+            :step="item.props.step"
+            :default-value="item.props.defaultValue"
+            v-model="item.props.defaultValue"
+            @update:model-value="
+              (value) => handleAction(item.action, value?.[0])
+            "
+            class="w-[80%]"
+          />
+          <span v-if="item.props.defaultValue" class="slider-value">
+            {{ item.props.defaultValue[0] }}
+          </span>
+        </div>
 
-      <div
-        v-else-if="item.component === 'NumberField'"
-        class="number-field-container"
-      >
-        <NumberField
-          :min="item.props.min"
-          :max="item.props.max"
-          :step="item.props.step"
-          :default-value="item.props.value"
-          v-model="item.props.value"
-          @update:model-value="(value) => handleAction(item.action, value)"
-          class="w-full"
+        <div
+          v-else-if="item.component === 'NumberField'"
+          class="number-field-container"
         >
-          <NumberFieldContent>
-            <NumberFieldDecrement />
-            <NumberFieldInput />
-            <NumberFieldIncrement />
-          </NumberFieldContent>
-        </NumberField>
-      </div>
+          <NumberField
+            :min="item.props.min"
+            :max="item.props.max"
+            :step="item.props.step"
+            :default-value="item.props.value"
+            v-model="item.props.value"
+            @update:model-value="(value) => handleAction(item.action, value)"
+            class="w-full"
+          >
+            <NumberFieldContent>
+              <NumberFieldDecrement />
+              <NumberFieldInput />
+              <NumberFieldIncrement />
+            </NumberFieldContent>
+          </NumberField>
+        </div>
 
-      <div
-        v-else-if="item.component === 'LoadJsonButton'"
-        class="load-json-button-container"
-      >
-        <LoadJsonButton :text="item.props.text" :action="item.action" />
-      </div>
-
-      <div
-        v-else-if="item.component === 'Checkbox'"
-        class="checkbox-ui-component"
-      >
-        <Checkbox
-          :id="`checkbox-${item.id}`"
-          :model-value="Boolean(item.props.defaultValue)"
-          @update:model-value="
-            (checked) => {
-              item.props.defaultValue = Boolean(checked);
-              handleAction(item.action, checked);
-            }
-          "
-        />
-        <span v-if="item.props.text">
-          {{ item.props.text }}
-        </span>
-      </div>
+        <div
+          v-else-if="item.component === 'LoadJsonButton'"
+          class="load-json-button-container"
+        >
+          <LoadJsonButton :text="item.props.text" :action="item.action" />
+        </div>
 
-      <div v-else-if="item.component === 'Select'" class="select-container">
-        <Select
-          :model-value="item.props.defaultValue ?? ''"
-          @update:model-value="
-            (value) => {
-              item.props.defaultValue = typeof value === 'string' ? value : '';
-              handleAction(item.action, value);
-            }
-          "
+        <div
+          v-else-if="item.component === 'Checkbox'"
+          class="checkbox-ui-component"
         >
-          <SelectTrigger class="w-full">
-            <SelectValue
-              :placeholder="item.props.placeholder ?? 'Select an option'"
-            />
-          </SelectTrigger>
-          <SelectContent class="z-[4000]">
-            <SelectItem
-              v-for="option in item.props.options"
-              :key="option"
-              :value="option"
-            >
-              {{ option }}
-            </SelectItem>
-          </SelectContent>
-        </Select>
+          <Checkbox
+            :id="`checkbox-${item.id}`"
+            :model-value="Boolean(item.props.defaultValue)"
+            @update:model-value="
+              (checked) => {
+                item.props.defaultValue = Boolean(checked);
+                handleAction(item.action, checked);
+              }
+            "
+          />
+          <span v-if="item.props.text">
+            {{ item.props.text }}
+          </span>
+        </div>
+
+        <div v-else-if="item.component === 'Select'" class="select-container">
+          <Select
+            :model-value="item.props.defaultValue ?? ''"
+            @update:model-value="
+              (value) => {
+                item.props.defaultValue =
+                  typeof value === 'string' ? value : '';
+                handleAction(item.action, value);
+              }
+            "
+          >
+            <SelectTrigger class="w-full">
+              <SelectValue
+                :placeholder="item.props.placeholder ?? 'Select an option'"
+              />
+            </SelectTrigger>
+            <SelectContent class="z-[4000]">
+              <SelectItem
+                v-for="option in item.props.options"
+                :key="option"
+                :value="option"
+              >
+                {{ option }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
       </div>
+      <Button
+        variant="secondary"
+        size="icon"
+        class="mb-4"
+        @click="toggleSideBar()"
+      >
+        <ArrowBigLeftDash />
+      </Button>
     </div>
     <Button
       variant="secondary"
       size="icon"
-      class="mb-4"
+      class="mb-5"
       @click="toggleSideBar()"
+      :class="{ 'is-hidden': !isVisible }"
     >
-      <ArrowBigLeftDash />
+      <ArrowBigRightDash />
     </Button>
-  </div>
-  <Button
-    variant="secondary"
-    size="icon"
-    class="mb-5"
-    @click="toggleSideBar()"
-    :class="{ 'is-hidden': !isVisible }"
-  >
-    <ArrowBigRightDash />
-  </Button>
+  </template>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
-import { useViewerRuntime } from "@/viewer/viewer_context";
+import { useOpenbarPlacement, useViewerRuntime } from "@/viewer/viewer_context";
 import { ArrowBigLeftDash, ArrowBigRightDash } from "lucide-vue-next";
 import {
   NumberField,
@@ -159,7 +171,9 @@ import { useKeyboardShortcuts } from "@/components/tools/useKeyboardShortcuts";
 const isVisible = ref(true);
 const openbarElement = ref<HTMLElement | null>(null);
 const runtime = useViewerRuntime();
-const { sidebarComponents, theme, blockPicker } = runtime.store;
+const { sidebarComponents, theme, blockPicker, sideBarInfoState } =
+  runtime.store;
+const placement = useOpenbarPlacement();
 const handleAction = (action: string, value?: unknown) =>
   runtime.handleUiAction(action, value);
 
@@ -199,6 +213,17 @@ div#openbar {
   overflow-y: auto;
 }
 
+div#openbar.docked-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 30vw;
+  max-width: 300px;
+  min-width: 250px;
+  border-radius: 0 10px 10px 0;
+  z-index: 1000;
+}
+
 div#openbar.is-hidden {
   /* Slide left by its width + margin to fully hide it */
   /* Adjust -110% depending on your margin/padding needs */
diff --git a/src/components/layout/RightSidebar.vue b/src/components/layout/RightSidebar.vue
index 7bbcff4..170429e 100644
--- a/src/components/layout/RightSidebar.vue
+++ b/src/components/layout/RightSidebar.vue
@@ -1,7 +1,10 @@
 <template>
   <TransitionGroup tag="div" id="right-sidebar" name="right-sidebar-item">
     <ObjectInfo v-if="objectBarData.isVisible" key="object-info" />
-    <ObjectActions key="object-actions" />
+    <ObjectActions
+      v-if="objectActionsPlacement === 'corner'"
+      key="object-actions"
+    />
   </TransitionGroup>
 
   <Button
@@ -20,9 +23,13 @@ import ObjectInfo from "@/components/layout/ObjectInfo.vue";
 import ObjectActions from "@/components/layout/ObjectActions.vue";
 import { Button } from "@/components/ui/button";
 import { ArrowBigLeftDash } from "lucide-vue-next";
-import { useViewerRuntime } from "@/viewer/viewer_context";
+import {
+  useObjectActionsPlacement,
+  useViewerRuntime,
+} from "@/viewer/viewer_context";
 
 const { objectBarData } = useViewerRuntime().store;
+const objectActionsPlacement = useObjectActionsPlacement();
 </script>
 
 <style scoped>
diff --git a/src/components/layout/Sidebar.vue b/src/components/layout/Sidebar.vue
index 5887040..6c882f5 100644
--- a/src/components/layout/Sidebar.vue
+++ b/src/components/layout/Sidebar.vue
@@ -1,16 +1,20 @@
 <template>
   <div id="sidebar">
-    <Toolbar v-if="showToolbar" />
-    <Openbar v-if="sideBarInfoState.isVisible" />
+    <Toolbar v-if="showToolbar && toolbarPlacement === 'corner'" />
+    <Openbar v-if="openbarPlacement === 'corner'" />
   </div>
 </template>
 
 <script setup lang="ts">
 import Toolbar from "@/components/layout/Toolbar.vue";
 import Openbar from "@/components/layout/Openbar.vue";
-import { useViewerRuntime } from "@/viewer/viewer_context";
+import {
+  useOpenbarPlacement,
+  useToolbarPlacement,
+} from "@/viewer/viewer_context";
 
-const { sideBarInfoState } = useViewerRuntime().store;
+const toolbarPlacement = useToolbarPlacement();
+const openbarPlacement = useOpenbarPlacement();
 
 withDefaults(defineProps<{ showToolbar?: boolean }>(), {
   showToolbar: true,
diff --git a/src/components/layout/Toolbar.vue b/src/components/layout/Toolbar.vue
index 8329ff0..a8305b0 100644
--- a/src/components/layout/Toolbar.vue
+++ b/src/components/layout/Toolbar.vue
@@ -1,5 +1,10 @@
 <template>
-  <div ref="toolbarElement" class="toolbar theme" id="toolbar">
+  <div
+    ref="toolbarElement"
+    class="toolbar theme"
+    :class="{ 'docked-top': toolbarPlacement === 'docked-top' }"
+    id="toolbar"
+  >
     <h1 class="text-lg font-bold" :class="{ dark: theme.value === 'dark' }">
       COMPAS ThreeJs
     </h1>
@@ -7,6 +12,11 @@
     <AddObjectGroup />
     <ViewGroup />
     <DisplayGroup />
+    <component
+      :is="tool.component"
+      v-for="tool in sortedToolbarTools"
+      :key="tool.id"
+    />
   </div>
 </template>
 
@@ -15,13 +25,22 @@ import TransformGroup from "@/components/tools/transforms/TransformGroup.vue";
 import AddObjectGroup from "@/components/tools/objects/AddObjectGroup.vue";
 import ViewGroup from "@/components/tools/views/ViewGroup.vue";
 import DisplayGroup from "@/components/tools/display/DisplayGroup.vue";
-import { useViewerRuntime } from "@/viewer/viewer_context";
+import {
+  useToolbarPlacement,
+  useToolbarTools,
+  useViewerRuntime,
+} from "@/viewer/viewer_context";
 import { useHover } from "@/composables/useHover";
-import { ref, watchEffect } from "vue";
+import { computed, ref, watchEffect } from "vue";
 
 const toolbarElement = ref<HTMLElement | null>(null);
 const { isHovered } = useHover(toolbarElement);
 const { theme, blockPicker } = useViewerRuntime().store;
+const toolbarTools = useToolbarTools();
+const toolbarPlacement = useToolbarPlacement();
+const sortedToolbarTools = computed(() =>
+  [...toolbarTools].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+);
 
 watchEffect(() => {
   blockPicker.value = isHovered.value;
@@ -29,7 +48,13 @@ watchEffect(() => {
 </script>
 
 <style scoped>
-.toolbar {
+/* `div.` prefix (matching Sidebar/ObjectActions/Openbar's own root selectors) is not
+   just style: without it, this rule's specificity exactly ties a consumer's `:root
+   .theme { border: ... }` override (also class+pseudo-class = two), and loses that tie
+   to source order - the extra element-type selector here breaks the tie properly, so
+   --toolbar-background/--toolbar-border-color stay overridable regardless of where a
+   consumer's override happens to sit in the cascade. */
+div.toolbar {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -41,6 +66,17 @@ watchEffect(() => {
   height: auto;
   width: 100%;
   pointer-events: auto;
+  background: var(--toolbar-background);
+  border: 1px solid var(--toolbar-border-color);
+}
+
+div.toolbar.docked-top {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: var(--docked-bar-padding);
+  min-height: var(--docked-bar-height);
+  width: auto;
 }
 
 :deep(.toolbar-group) {
diff --git a/src/library/index.ts b/src/library/index.ts
index c8f7a87..669ff82 100644
--- a/src/library/index.ts
+++ b/src/library/index.ts
@@ -2,7 +2,14 @@ import { createApp, markRaw } from "vue";
 
 import "../style.css";
 import App from "../App.vue";
-import { viewerRuntimeKey } from "../viewer/viewer_context";
+import {
+  objectActionsPlacementKey,
+  openbarPlacementKey,
+  toolbarPlacementKey,
+  toolbarToolsKey,
+  useViewerMessaging,
+  viewerRuntimeKey,
+} from "../viewer/viewer_context";
 import { ViewerRuntime } from "../viewer/viewer_runtime";
 import { CompasViewerError } from "./errors";
 import type { CompasViewer, CompasViewerOptions } from "./types";
@@ -10,6 +17,11 @@ import type { CompasViewer, CompasViewerOptions } from "./types";
 export type {
   CompasViewer,
   CompasViewerOptions,
+  ObjectActionsPlacement,
+  OpenbarPlacement,
+  ToolbarPlacement,
+  ToolDefinition,
+  ViewerMessaging,
   ViewerMode,
   ViewerWebSocketOptions,
 } from "./types";
@@ -18,6 +30,7 @@ export {
   type CompasViewerErrorOptions,
 } from "./errors";
 export { CompasViewerError };
+export { useViewerMessaging };
 
 export function createViewer(
   container: HTMLElement,
@@ -39,6 +52,13 @@ export function createViewer(
     showToolbar: options.showToolbar ?? true,
   });
   app.provide(viewerRuntimeKey, runtime);
+  app.provide(toolbarToolsKey, options.toolbarTools ?? []);
+  app.provide(toolbarPlacementKey, options.toolbarPlacement ?? "corner");
+  app.provide(openbarPlacementKey, options.openbarPlacement ?? "corner");
+  app.provide(
+    objectActionsPlacementKey,
+    options.objectActionsPlacement ?? "corner",
+  );
   app.mount(container);
 
   let disposed = false;
diff --git a/src/library/public.d.ts b/src/library/public.d.ts
index e8f5c89..316eea5 100644
--- a/src/library/public.d.ts
+++ b/src/library/public.d.ts
@@ -1,3 +1,5 @@
+import type { Component } from "vue";
+
 export type ViewerMode = "embedded" | "websocket";
 
 export type CompasViewerErrorCode =
@@ -30,11 +32,51 @@ export interface ViewerWebSocketOptions {
   secure?: boolean;
 }
 
+export interface ToolDefinition {
+  id: string;
+  component: Component;
+  order?: number;
+}
+
+/**
+ * `"corner"` (default): the built-in floating toolbar/sidebar panel, docked to the
+ * top-left corner - unchanged from previous versions.
+ * `"docked-top"`: the toolbar renders as a full-width bar docked to the top of the
+ * viewer, with its tool groups laid out in a row instead of stacked in a column.
+ */
+export type ToolbarPlacement = "corner" | "docked-top";
+
+/**
+ * `"corner"` (default): nested in the same floating panel as the toolbar, next to it -
+ * unchanged from previous versions. Only applies when `toolbarPlacement` is also
+ * `"corner"`; otherwise Openbar renders standalone regardless of this setting.
+ * `"docked-left"`: a standalone panel docked to the left edge, spanning the full height
+ * below the toolbar (independent of the toolbar's own placement).
+ */
+export type OpenbarPlacement = "corner" | "docked-left";
+
+/**
+ * `"corner"` (default): nested in the same floating panel as the object-info/metadata
+ * panel, top-right - unchanged from previous versions.
+ * `"docked-top"`: a standalone, always-mounted bar docked directly under the toolbar
+ * (or at the top of the viewer if the toolbar isn't also docked-top).
+ */
+export type ObjectActionsPlacement = "corner" | "docked-top";
+
+export interface ViewerMessaging {
+  send(message: unknown): boolean;
+  sendData(message: Record<string, unknown>): boolean;
+}
+
 export interface CompasViewerOptions {
   mode?: ViewerMode;
   websocket?: ViewerWebSocketOptions;
   defaultLighting?: boolean;
   showToolbar?: boolean;
+  toolbarTools?: ToolDefinition[];
+  toolbarPlacement?: ToolbarPlacement;
+  openbarPlacement?: OpenbarPlacement;
+  objectActionsPlacement?: ObjectActionsPlacement;
   send?: (message: unknown) => boolean | void;
   onError?: (error: CompasViewerError) => void;
 }
@@ -50,3 +92,5 @@ export declare function createViewer(
   container: HTMLElement,
   options?: CompasViewerOptions,
 ): CompasViewer;
+
+export declare function useViewerMessaging(): ViewerMessaging;
diff --git a/src/library/types.ts b/src/library/types.ts
index b3e61a6..83f610e 100644
--- a/src/library/types.ts
+++ b/src/library/types.ts
@@ -1,3 +1,4 @@
+import type { Component } from "vue";
 import type { CompasViewerError } from "./errors";
 
 export type ViewerMode = "embedded" | "websocket";
@@ -9,11 +10,51 @@ export interface ViewerWebSocketOptions {
   secure?: boolean;
 }
 
+export interface ToolDefinition {
+  id: string;
+  component: Component;
+  order?: number;
+}
+
+/**
+ * `"corner"` (default): the built-in floating toolbar/sidebar panel, docked to the
+ * top-left corner - unchanged from previous versions.
+ * `"docked-top"`: the toolbar renders as a full-width bar docked to the top of the
+ * viewer, with its tool groups laid out in a row instead of stacked in a column.
+ */
+export type ToolbarPlacement = "corner" | "docked-top";
+
+/**
+ * `"corner"` (default): nested in the same floating panel as the toolbar, next to it -
+ * unchanged from previous versions. Only applies when `toolbarPlacement` is also
+ * `"corner"`; otherwise Openbar renders standalone regardless of this setting.
+ * `"docked-left"`: a standalone panel docked to the left edge, spanning the full height
+ * below the toolbar (independent of the toolbar's own placement).
+ */
+export type OpenbarPlacement = "corner" | "docked-left";
+
+/**
+ * `"corner"` (default): nested in the same floating panel as the object-info/metadata
+ * panel, top-right - unchanged from previous versions.
+ * `"docked-top"`: a standalone, always-mounted bar docked directly under the toolbar
+ * (or at the top of the viewer if the toolbar isn't also docked-top).
+ */
+export type ObjectActionsPlacement = "corner" | "docked-top";
+
+export interface ViewerMessaging {
+  send(message: unknown): boolean;
+  sendData(message: Record<string, unknown>): boolean;
+}
+
 export interface CompasViewerOptions {
   mode?: ViewerMode;
   websocket?: ViewerWebSocketOptions;
   defaultLighting?: boolean;
   showToolbar?: boolean;
+  toolbarTools?: ToolDefinition[];
+  toolbarPlacement?: ToolbarPlacement;
+  openbarPlacement?: OpenbarPlacement;
+  objectActionsPlacement?: ObjectActionsPlacement;
   send?: (message: unknown) => boolean | void;
   onError?: (error: CompasViewerError) => void;
 }
diff --git a/src/library/ui.d.ts b/src/library/ui.d.ts
new file mode 100644
index 0000000..923f5e0
--- /dev/null
+++ b/src/library/ui.d.ts
@@ -0,0 +1,9 @@
+import type { Component } from "vue";
+
+export declare const Button: Component;
+export declare const Kbd: Component;
+export declare const KbdGroup: Component;
+export declare const Tooltip: Component;
+export declare const TooltipContent: Component;
+export declare const TooltipProvider: Component;
+export declare const TooltipTrigger: Component;
diff --git a/src/library/ui.ts b/src/library/ui.ts
new file mode 100644
index 0000000..b1b0250
--- /dev/null
+++ b/src/library/ui.ts
@@ -0,0 +1,8 @@
+export { Button } from "../components/ui/button";
+export { Kbd, KbdGroup } from "../components/ui/kbd";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
diff --git a/src/style.css b/src/style.css
index 3697976..84999aa 100644
--- a/src/style.css
+++ b/src/style.css
@@ -90,6 +90,38 @@
       inset,
     -3px -3px 2px 2px color-mix(in oklab, var(--background) 70%, transparent)
       inset;
+  --section-title-background: color-mix(
+    in oklab,
+    var(--background) 25%,
+    transparent
+  );
+  --section-title-shadow:
+    1px 1px 3px 0px color-mix(in oklab, var(--foreground) 35%, transparent)
+      inset,
+    -1px -1px 3px 0px color-mix(in oklab, var(--background) 70%, transparent)
+      inset;
+  --section-title-blur: 10px;
+  /* Controls how tall every docked-top bar (toolbar, object-actions, ...) is: adjust
+     this one value and both the padding and the shared height floor they use follow
+     automatically, so they stay matched. 38px = the 36px icon button plus a 1px top +
+     1px bottom border (kept even when the border color is set to transparent). */
+  --docked-bar-padding: 12px;
+  --docked-bar-height: calc(var(--docked-bar-padding) * 2 + 38px);
+  /* Independently overridable background/border for the toolbar and object-actions
+     panels - default to the same values `.theme` itself uses, so redeclaring one of
+     these doesn't affect the other panels (or Openbar) still relying on `.theme`. */
+  --toolbar-background: linear-gradient(
+    135deg,
+    var(--theme-bg-start) 0%,
+    var(--theme-bg-end) 100%
+  );
+  --toolbar-border-color: var(--theme-border-color);
+  --object-actions-background: linear-gradient(
+    135deg,
+    var(--theme-bg-start) 0%,
+    var(--theme-bg-end) 100%
+  );
+  --object-actions-border-color: var(--theme-border-color);
   font-family: Inter, sans-serif;
   font-feature-settings:
     "liga" 1,
diff --git a/src/viewer/viewer_context.ts b/src/viewer/viewer_context.ts
index 20d073d..e749f60 100644
--- a/src/viewer/viewer_context.ts
+++ b/src/viewer/viewer_context.ts
@@ -1,12 +1,34 @@
 import type { InjectionKey } from "vue";
 import { inject } from "vue";
 
+import type {
+  ObjectActionsPlacement,
+  OpenbarPlacement,
+  ToolbarPlacement,
+  ToolDefinition,
+  ViewerMessaging,
+} from "../library/types";
 import type { ViewerRuntime } from "./viewer_runtime";
 
 export const viewerRuntimeKey: InjectionKey<ViewerRuntime> = Symbol(
   "compas-viewer-runtime",
 );
 
+export const toolbarToolsKey: InjectionKey<ToolDefinition[]> = Symbol(
+  "compas-viewer-toolbar-tools",
+);
+
+export const toolbarPlacementKey: InjectionKey<ToolbarPlacement> = Symbol(
+  "compas-viewer-toolbar-placement",
+);
+
+export const openbarPlacementKey: InjectionKey<OpenbarPlacement> = Symbol(
+  "compas-viewer-openbar-placement",
+);
+
+export const objectActionsPlacementKey: InjectionKey<ObjectActionsPlacement> =
+  Symbol("compas-viewer-object-actions-placement");
+
 export function useViewerRuntime(): ViewerRuntime {
   const runtime = inject(viewerRuntimeKey);
   if (!runtime) {
@@ -14,3 +36,32 @@ export function useViewerRuntime(): ViewerRuntime {
   }
   return runtime;
 }
+
+export function useToolbarTools(): ToolDefinition[] {
+  return inject(toolbarToolsKey, []);
+}
+
+export function useToolbarPlacement(): ToolbarPlacement {
+  return inject(toolbarPlacementKey, "corner");
+}
+
+export function useOpenbarPlacement(): OpenbarPlacement {
+  return inject(openbarPlacementKey, "corner");
+}
+
+export function useObjectActionsPlacement(): ObjectActionsPlacement {
+  return inject(objectActionsPlacementKey, "corner");
+}
+
+/**
+ * Public, minimal messaging surface for custom tools - deliberately narrower than
+ * ViewerRuntime so consumers depend on a small stable contract instead of internals
+ * that are free to change.
+ */
+export function useViewerMessaging(): ViewerMessaging {
+  const runtime = useViewerRuntime();
+  return {
+    send: (message) => runtime.send(message),
+    sendData: (message) => runtime.sendData(message),
+  };
+}
diff --git a/tests/browser/custom_tool.spec.ts b/tests/browser/custom_tool.spec.ts
new file mode 100644
index 0000000..15646f7
--- /dev/null
+++ b/tests/browser/custom_tool.spec.ts
@@ -0,0 +1,45 @@
+import { expect, test } from "@playwright/test";
+
+test("renders a custom toolbar tool and routes its messages through `send`", async ({
+  page,
+}) => {
+  const errors: string[] = [];
+  const externalRequests: string[] = [];
+
+  page.on("console", (message) => {
+    if (message.type() === "error") errors.push(message.text());
+  });
+  page.on("pageerror", (error) => errors.push(error.message));
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (url.hostname !== "127.0.0.1") externalRequests.push(request.url());
+  });
+
+  await page.goto("/examples/embedded_custom_tool.html");
+  await expect(page.locator("body")).toHaveAttribute(
+    "data-example-ready",
+    "true",
+  );
+  await expect(page.locator("canvas")).toHaveCount(1);
+
+  const pingButton = page.getByTestId("ping-tool-button");
+  await expect(pingButton).toBeVisible();
+  await pingButton.click();
+  await pingButton.click();
+
+  const outgoing = await page.evaluate(() => {
+    const customTool = (
+      window as typeof window & {
+        __compasCustomTool?: { outgoingMessages: unknown[] };
+      }
+    ).__compasCustomTool;
+    return customTool?.outgoingMessages ?? [];
+  });
+
+  expect(outgoing).toEqual([
+    { dispatch: "other_action", action: "ping", count: 1 },
+    { dispatch: "other_action", action: "ping", count: 2 },
+  ]);
+  expect(externalRequests).toEqual([]);
+  expect(errors).toEqual([]);
+});
diff --git a/tests/library_import.test.ts b/tests/library_import.test.ts
index 573b291..16808d4 100644
--- a/tests/library_import.test.ts
+++ b/tests/library_import.test.ts
@@ -18,4 +18,25 @@ describe("public library entry", () => {
       }),
     );
   });
+
+  it("exposes useViewerMessaging as a function", async () => {
+    const library = await import("../src/library");
+    expect(library.useViewerMessaging).toBeTypeOf("function");
+  });
+
+  it("exposes the documented ui kit re-export surface", async () => {
+    const ui = await import("../src/library/ui");
+    expect(Object.keys(ui).sort()).toEqual([
+      "Button",
+      "Kbd",
+      "KbdGroup",
+      "Tooltip",
+      "TooltipContent",
+      "TooltipProvider",
+      "TooltipTrigger",
+    ]);
+    for (const component of Object.values(ui)) {
+      expect(component).toBeTruthy();
+    }
+  });
 });
diff --git a/tests/viewer_lifecycle.test.ts b/tests/viewer_lifecycle.test.ts
index e6874c5..5faf60b 100644
--- a/tests/viewer_lifecycle.test.ts
+++ b/tests/viewer_lifecycle.test.ts
@@ -2,11 +2,12 @@
 
 import {
   Box,
+  Dictionary,
   Frame,
   pbDumpBytes,
   Quaternion,
 } from "@gramaziokohler/compas-pb-ts";
-import { nextTick } from "vue";
+import { defineComponent, h, nextTick } from "vue";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 vi.mock("three", async () => {
@@ -31,12 +32,35 @@ vi.mock("three", async () => {
   return { ...actual, WebGLRenderer };
 });
 
-import { CompasViewerError, createViewer } from "../src/library";
+import {
+  CompasViewerError,
+  createViewer,
+  useViewerMessaging,
+} from "../src/library";
+import type { ToolDefinition } from "../src/library/types";
 import { ViewerRuntime } from "../src/viewer/viewer_runtime";
 import * as THREE from "three";
 
 const viewers: Array<{ dispose(): void }> = [];
 
+function definePingTool(toolId: string) {
+  return defineComponent({
+    name: `PingTool-${toolId}`,
+    setup() {
+      const { sendData } = useViewerMessaging();
+      function handleClick() {
+        sendData({ dispatch: "other_action", action: "ping", tool: toolId });
+      }
+      return () =>
+        h(
+          "button",
+          { class: "ping-tool", "data-tool-id": toolId, onClick: handleClick },
+          toolId,
+        );
+    },
+  });
+}
+
 function boxBytes(guid: string): Uint8Array {
   return pbDumpBytes(
     new Box({
@@ -72,6 +96,26 @@ function frameBytes(guid: string): Uint8Array {
   );
 }
 
+function uiButtonBytes(guid: string): Uint8Array {
+  const commandValue = (value: unknown) =>
+    typeof value === "number" ? { doubleValue: value } : { value };
+  return pbDumpBytes(
+    new Dictionary({
+      data: {
+        items: Object.fromEntries(
+          Object.entries({
+            dispatch: "ui",
+            type: "button",
+            guid,
+            text: "Test",
+            variant: "secondary",
+          }).map(([key, value]) => [key, commandValue(value)]),
+        ),
+      },
+    }),
+  );
+}
+
 afterEach(() => {
   viewers.splice(0).forEach((viewer) => viewer.dispose());
   vi.unstubAllGlobals();
@@ -312,3 +356,172 @@ describe("createViewer", () => {
     runtime.dispose();
   });
 });
+
+describe("toolbar extension API", () => {
+  it("mounts toolbarTools after the built-in groups, sorted by order", () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+    const tools: ToolDefinition[] = [
+      { id: "later", component: definePingTool("later"), order: 20 },
+      { id: "earlier", component: definePingTool("earlier"), order: 5 },
+      { id: "unordered", component: definePingTool("unordered") },
+    ];
+
+    const viewer = createViewer(container, {
+      mode: "embedded",
+      toolbarTools: tools,
+    });
+    viewers.push(viewer);
+
+    const toolbar = container.querySelector(".toolbar");
+    expect(toolbar).not.toBeNull();
+
+    const builtInGroups = toolbar!.querySelectorAll(".toolbar-group");
+    expect(builtInGroups).toHaveLength(4);
+
+    const toolIds = Array.from(toolbar!.querySelectorAll(".ping-tool")).map(
+      (button) => button.getAttribute("data-tool-id"),
+    );
+    expect(toolIds).toEqual(["unordered", "earlier", "later"]);
+
+    const lastBuiltInGroup = builtInGroups[builtInGroups.length - 1]!;
+    const firstToolButton = toolbar!.querySelector(".ping-tool")!;
+    expect(
+      lastBuiltInGroup.compareDocumentPosition(firstToolButton) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it("routes useViewerMessaging().sendData through the `send` option", () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+    const outgoing: unknown[] = [];
+
+    const viewer = createViewer(container, {
+      mode: "embedded",
+      toolbarTools: [{ id: "ping", component: definePingTool("ping") }],
+      send: (message) => {
+        outgoing.push(message);
+        return true;
+      },
+    });
+    viewers.push(viewer);
+
+    const button = container.querySelector<HTMLButtonElement>(".ping-tool");
+    expect(button).not.toBeNull();
+    button!.click();
+    button!.click();
+
+    expect(outgoing).toEqual([
+      { dispatch: "other_action", action: "ping", tool: "ping" },
+      { dispatch: "other_action", action: "ping", tool: "ping" },
+    ]);
+  });
+
+  it("renders only the built-in groups when toolbarTools is omitted", () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+
+    const viewer = createViewer(container, { mode: "embedded" });
+    viewers.push(viewer);
+
+    expect(container.querySelectorAll(".toolbar-group")).toHaveLength(4);
+    expect(container.querySelectorAll(".ping-tool")).toHaveLength(0);
+  });
+
+  it("defaults every panel to the corner placement", async () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+
+    const viewer = createViewer(container, { mode: "embedded" });
+    viewers.push(viewer);
+
+    expect(container.querySelector(".dock-top")).toBeNull();
+    expect(container.querySelector(".app-container.docked-top")).toBeNull();
+    // Toolbar and (once mounted) ObjectActions/Openbar all nest in their
+    // legacy corner-mode containers, exactly as before this option existed.
+    expect(container.querySelector("#sidebar .toolbar")).not.toBeNull();
+    expect(container.querySelector(".toolbar.docked-top")).toBeNull();
+    expect(
+      container.querySelector("#right-sidebar .object-actions"),
+    ).not.toBeNull();
+    expect(container.querySelector(".object-actions.docked-top")).toBeNull();
+
+    viewer.dispatch(uiButtonBytes("ui-button"));
+    await nextTick();
+    expect(container.querySelector("#sidebar #openbar")).not.toBeNull();
+    expect(container.querySelector("#openbar.docked-left")).toBeNull();
+  });
+
+  it("docks the toolbar as a full-width bar, out of #sidebar entirely", () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+
+    const viewer = createViewer(container, {
+      mode: "embedded",
+      toolbarPlacement: "docked-top",
+    });
+    viewers.push(viewer);
+
+    expect(container.querySelector(".app-container.docked-top")).not.toBeNull();
+    expect(
+      container.querySelector(".dock-top > .toolbar.docked-top"),
+    ).not.toBeNull();
+    expect(container.querySelector("#sidebar .toolbar")).toBeNull();
+  });
+
+  it("docks Openbar to the left, independent of the toolbar's own placement", async () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+
+    const viewer = createViewer(container, {
+      mode: "embedded",
+      toolbarPlacement: "docked-top",
+      openbarPlacement: "docked-left",
+    });
+    viewers.push(viewer);
+
+    viewer.dispatch(uiButtonBytes("ui-button"));
+    await nextTick();
+
+    expect(
+      container.querySelector(".workspace > #openbar.docked-left"),
+    ).not.toBeNull();
+    expect(container.querySelector("#sidebar #openbar")).toBeNull();
+  });
+
+  it("docks ObjectActions under the toolbar, out of #right-sidebar entirely", () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+
+    const viewer = createViewer(container, {
+      mode: "embedded",
+      objectActionsPlacement: "docked-top",
+    });
+    viewers.push(viewer);
+
+    expect(container.querySelector(".app-container.docked-top")).not.toBeNull();
+    expect(
+      container.querySelector(".dock-top > .object-actions.docked-top"),
+    ).not.toBeNull();
+    expect(
+      container.querySelector("#right-sidebar .object-actions"),
+    ).toBeNull();
+  });
+
+  it("keeps a docked-top ObjectActions visible even with no selection", () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+
+    const viewer = createViewer(container, {
+      mode: "embedded",
+      objectActionsPlacement: "docked-top",
+    });
+    viewers.push(viewer);
+
+    const actionsPanel = container.querySelector(".object-actions");
+    expect(actionsPanel).not.toBeNull();
+    expect(actionsPanel!.classList.contains("is-empty")).toBe(true);
+    expect(getComputedStyle(actionsPanel!).display).not.toBe("none");
+  });
+});
diff --git a/tsconfig.core.json b/tsconfig.core.json
index 152ef8f..d1b973c 100644
--- a/tsconfig.core.json
+++ b/tsconfig.core.json
@@ -15,6 +15,7 @@
     "src/library/errors.ts",
     "src/library/types.ts",
     "src/library/public.d.ts",
+    "src/library/ui.d.ts",
     "src/viewer/**/*.ts"
   ]
 }
diff --git a/vite.config.library.ts b/vite.config.library.ts
index 1587980..1514259 100644
--- a/vite.config.library.ts
+++ b/vite.config.library.ts
@@ -15,9 +15,11 @@ export default defineConfig({
     emptyOutDir: true,
     sourcemap: true,
     lib: {
-      entry: path.resolve(import.meta.dirname, "src/library/index.ts"),
+      entry: {
+        index: path.resolve(import.meta.dirname, "src/library/index.ts"),
+        ui: path.resolve(import.meta.dirname, "src/library/ui.ts"),
+      },
       formats: ["es"],
-      fileName: "index",
       cssFileName: "style",
     },
     rollupOptions: {