From 156ff9c7316b906d88a1d169ae98f2997dae9ea9 Mon Sep 17 00:00:00 2001
From: Eric <ericgozzi@cosmicgarage.ch>
Date: Fri, 14 Aug 2026 09:57:44 +0200
Subject: [PATCH 1/3] refactor: split ObjectActions out of the ObjectInfo panel

ObjectInfo now shows metadata only. The backend-driven FUNCTIONS
buttons/selects move into a new ObjectActions floating panel, anchored
bottom-right so it doesn't interfere with ObjectInfo's existing full-height
top-right layout. It only renders while there are actions to show.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/App.vue                             |   2 +
 src/components/layout/ObjectActions.vue | 126 ++++++++++++++++++++++++
 src/components/layout/ObjectInfo.vue    |  63 +-----------
 3 files changed, 129 insertions(+), 62 deletions(-)
 create mode 100644 src/components/layout/ObjectActions.vue

diff --git a/src/App.vue b/src/App.vue
index d9baa1b..616a2b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,12 +6,14 @@
     <div ref="threeContainer" class="three-container"></div>
     <ThemeIndicator />
     <ObjectInfo />
+    <ObjectActions />
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import ObjectInfo from "./components/layout/ObjectInfo.vue";
+import ObjectActions from "./components/layout/ObjectActions.vue";
 import Sidebar from "@/components/layout/Sidebar.vue";
 import ThemeIndicator from "@/components/layout/ThemeIndicator.vue";
 import type { ViewerRuntime } from "@/viewer/viewer_runtime";
diff --git a/src/components/layout/ObjectActions.vue b/src/components/layout/ObjectActions.vue
new file mode 100644
index 0000000..90627b2
--- /dev/null
+++ b/src/components/layout/ObjectActions.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="actions-bar" v-if="objectActionsState.length">
+    <div class="theme object-actions" id="actions-panel" ref="actionsPanel">
+      <h1
+        class="text-lg font-bold section-title"
+        :class="{ dark: theme.value === 'dark' }"
+      >
+        FUNCTIONS
+      </h1>
+      <div
+        v-for="action in objectActionsState"
+        :key="action.guid"
+        class="single_data"
+      >
+        <Button
+          v-if="action.type === 'button'"
+          variant="outline"
+          @click="handleObjectAction(action)"
+          class="w-full"
+        >
+          {{ action.text }}
+        </Button>
+
+        <Select
+          v-else-if="action.type === 'select'"
+          :model-value="
+            typeof action.defaultValue === 'string' ? action.defaultValue : ''
+          "
+          @update:model-value="
+            (value) => {
+              action.defaultValue = typeof value === 'string' ? value : '';
+              handleObjectAction(action, value);
+            }
+          "
+        >
+          <SelectTrigger class="w-full">
+            <SelectValue
+              :placeholder="action.placeholder ?? 'Select an option'"
+            />
+          </SelectTrigger>
+          <SelectContent class="z-[4000]">
+            <SelectItem
+              v-for="option in action.options"
+              :key="option"
+              :value="option"
+            >
+              {{ option }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useHover } from "@/composables/useHover";
+import { ref, watchEffect } from "vue";
+import { useViewerRuntime } from "@/viewer/viewer_context";
+import type { ObjectAction } from "@/viewer/viewer_store";
+
+const runtime = useViewerRuntime();
+const { objectActionsState, blockPicker, theme } = runtime.store;
+const handleObjectAction = (action: ObjectAction, value?: unknown) =>
+  runtime.handleObjectAction({ ...action }, value);
+const actionsPanel = ref<HTMLElement | null>(null);
+
+const { isHovered } = useHover(actionsPanel);
+
+watchEffect(() => {
+  blockPicker.value = isHovered.value;
+});
+</script>
+
+<style scoped>
+div.actions-bar {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: 20px; /* Padding around the content */
+
+  /* WIDTH */
+  width: 30vw;
+  max-width: 300px;
+  min-width: 250px;
+  pointer-events: none;
+}
+
+/* 'scoped' means these styles only apply to this module */
+div.object-actions {
+  z-index: 1000; /* Ensure it appears above other content */
+  padding: 20px;
+  max-width: 400px;
+  border-radius: 10px;
+  margin: 0px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  color: var(--foreground);
+  pointer-events: auto;
+}
+
+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);
+  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;
+}
+</style>
diff --git a/src/components/layout/ObjectInfo.vue b/src/components/layout/ObjectInfo.vue
index d69a6cd..d059e1d 100644
--- a/src/components/layout/ObjectInfo.vue
+++ b/src/components/layout/ObjectInfo.vue
@@ -26,57 +26,6 @@
         </div>
       </div>
 
-      <div class="data-container">
-        <h1
-          class="text-lg font-bold section-title"
-          :class="{ dark: theme.value === 'dark' }"
-        >
-          FUNCTIONS
-        </h1>
-        <div
-          v-for="action in objectActionsState"
-          :key="action.guid"
-          class="single_data"
-        >
-          <Button
-            v-if="action.type === 'button'"
-            variant="outline"
-            @click="handleObjectAction(action)"
-            class="w-full"
-          >
-            {{ action.text }}
-          </Button>
-
-          <Select
-            v-else-if="action.type === 'select'"
-            :model-value="
-              typeof action.defaultValue === 'string' ? action.defaultValue : ''
-            "
-            @update:model-value="
-              (value) => {
-                action.defaultValue = typeof value === 'string' ? value : '';
-                handleObjectAction(action, value);
-              }
-            "
-          >
-            <SelectTrigger class="w-full">
-              <SelectValue
-                :placeholder="action.placeholder ?? 'Select an option'"
-              />
-            </SelectTrigger>
-            <SelectContent class="z-[4000]">
-              <SelectItem
-                v-for="option in action.options"
-                :key="option"
-                :value="option"
-              >
-                {{ option }}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
       <Button
         variant="secondary"
         size="icon"
@@ -101,23 +50,13 @@
 
 <script setup lang="ts">
 import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { useHover } from "@/composables/useHover";
 import { ref, watchEffect } from "vue";
 import { ArrowBigLeftDash, ArrowBigRightDash } from "lucide-vue-next";
 import { useViewerRuntime } from "@/viewer/viewer_context";
-import type { ObjectAction } from "@/viewer/viewer_store";
 
 const runtime = useViewerRuntime();
-const { objectActionsState, objectBarData, blockPicker, theme } = runtime.store;
-const handleObjectAction = (action: ObjectAction, value?: unknown) =>
-  runtime.handleObjectAction({ ...action }, value);
+const { objectBarData, blockPicker, theme } = runtime.store;
 const infoPanel = ref<HTMLElement | null>(null);
 
 const { isHovered } = useHover(infoPanel);

From 90a6d0cab3121c547ac56bf16c49706492d8170d Mon Sep 17 00:00:00 2001
From: Eric <ericgozzi@cosmicgarage.ch>
Date: Fri, 14 Aug 2026 11:09:02 +0200
Subject: [PATCH 2/3] fix: dock ObjectActions in the same column as ObjectInfo,
 animate the reflow

ObjectActions now docks in the top-right slot by default and only moves
down when ObjectInfo actually opens, via a shared RightSidebar wrapper
(mirrors Sidebar's Toolbar/Openbar pattern) using TransitionGroup for the
slide/reflow animation. ObjectInfo also sizes to its metadata instead of
always stretching the full column.

Also fixes a real bug this surfaced: ObjectActions previously toggled via
an internal v-if inside the TransitionGroup, so Vue treated every
selection change (which briefly clears then repopulates the action list)
as a full leave+enter cycle, momentarily rendering two panels with the
same id while one slid out and another slid in. It now stays mounted and
hides via CSS, so only the deliberate ObjectInfo open/close triggers the
animation.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/App.vue                             |   6 +-
 src/components/layout/ObjectActions.vue | 124 ++++++++++++------------
 src/components/layout/ObjectInfo.vue    | 109 +++++----------------
 src/components/layout/RightSidebar.vue  |  79 +++++++++++++++
 4 files changed, 167 insertions(+), 151 deletions(-)
 create mode 100644 src/components/layout/RightSidebar.vue

diff --git a/src/App.vue b/src/App.vue
index 616a2b0..443fb1e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,15 +5,13 @@
     <Sidebar :show-toolbar="props.showToolbar" />
     <div ref="threeContainer" class="three-container"></div>
     <ThemeIndicator />
-    <ObjectInfo />
-    <ObjectActions />
+    <RightSidebar />
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import ObjectInfo from "./components/layout/ObjectInfo.vue";
-import ObjectActions from "./components/layout/ObjectActions.vue";
+import RightSidebar from "./components/layout/RightSidebar.vue";
 import Sidebar from "@/components/layout/Sidebar.vue";
 import ThemeIndicator from "@/components/layout/ThemeIndicator.vue";
 import type { ViewerRuntime } from "@/viewer/viewer_runtime";
diff --git a/src/components/layout/ObjectActions.vue b/src/components/layout/ObjectActions.vue
index 90627b2..68cba5c 100644
--- a/src/components/layout/ObjectActions.vue
+++ b/src/components/layout/ObjectActions.vue
@@ -1,54 +1,57 @@
 <template>
-  <div class="actions-bar" v-if="objectActionsState.length">
-    <div class="theme object-actions" id="actions-panel" ref="actionsPanel">
-      <h1
-        class="text-lg font-bold section-title"
-        :class="{ dark: theme.value === 'dark' }"
+  <div
+    class="theme object-actions"
+    :class="{ 'is-empty': !objectActionsState.length }"
+    id="actions-panel"
+    ref="actionsPanel"
+  >
+    <h1
+      class="text-lg font-bold section-title"
+      :class="{ dark: theme.value === 'dark' }"
+    >
+      FUNCTIONS
+    </h1>
+    <div
+      v-for="action in objectActionsState"
+      :key="action.guid"
+      class="single_data"
+    >
+      <Button
+        v-if="action.type === 'button'"
+        variant="outline"
+        @click="handleObjectAction(action)"
+        class="w-full"
       >
-        FUNCTIONS
-      </h1>
-      <div
-        v-for="action in objectActionsState"
-        :key="action.guid"
-        class="single_data"
-      >
-        <Button
-          v-if="action.type === 'button'"
-          variant="outline"
-          @click="handleObjectAction(action)"
-          class="w-full"
-        >
-          {{ action.text }}
-        </Button>
+        {{ action.text }}
+      </Button>
 
-        <Select
-          v-else-if="action.type === 'select'"
-          :model-value="
-            typeof action.defaultValue === 'string' ? action.defaultValue : ''
-          "
-          @update:model-value="
-            (value) => {
-              action.defaultValue = typeof value === 'string' ? value : '';
-              handleObjectAction(action, value);
-            }
-          "
-        >
-          <SelectTrigger class="w-full">
-            <SelectValue
-              :placeholder="action.placeholder ?? 'Select an option'"
-            />
-          </SelectTrigger>
-          <SelectContent class="z-[4000]">
-            <SelectItem
-              v-for="option in action.options"
-              :key="option"
-              :value="option"
-            >
-              {{ option }}
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+      <Select
+        v-else-if="action.type === 'select'"
+        :model-value="
+          typeof action.defaultValue === 'string' ? action.defaultValue : ''
+        "
+        @update:model-value="
+          (value) => {
+            action.defaultValue = typeof value === 'string' ? value : '';
+            handleObjectAction(action, value);
+          }
+        "
+      >
+        <SelectTrigger class="w-full">
+          <SelectValue
+            :placeholder="action.placeholder ?? 'Select an option'"
+          />
+        </SelectTrigger>
+        <SelectContent class="z-[4000]">
+          <SelectItem
+            v-for="option in action.options"
+            :key="option"
+            :value="option"
+          >
+            {{ option }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
     </div>
   </div>
 </template>
@@ -81,26 +84,15 @@ watchEffect(() => {
 </script>
 
 <style scoped>
-div.actions-bar {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  padding: 20px; /* Padding around the content */
-
-  /* WIDTH */
-  width: 30vw;
-  max-width: 300px;
-  min-width: 250px;
-  pointer-events: none;
-}
-
-/* 'scoped' means these styles only apply to this module */
 div.object-actions {
   z-index: 1000; /* Ensure it appears above other content */
   padding: 20px;
   max-width: 400px;
   border-radius: 10px;
   margin: 0px;
+  flex: 0 1 auto; /* Size to content within RightSidebar's column, but shrink if it doesn't fit */
+  max-height: 100%;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 30px;
@@ -108,6 +100,14 @@ div.object-actions {
   pointer-events: auto;
 }
 
+div.object-actions.is-empty {
+  /* Stay mounted (rather than v-if) so ordinary content refreshes — e.g.
+     reselecting a different object — don't trigger RightSidebar's
+     TransitionGroup enter/leave transition, which is reserved for the
+     deliberate ObjectInfo open/close toggle. */
+  display: none;
+}
+
 h1.section-title {
   margin-bottom: 10px;
   color: var(--foreground);
diff --git a/src/components/layout/ObjectInfo.vue b/src/components/layout/ObjectInfo.vue
index d059e1d..22759f9 100644
--- a/src/components/layout/ObjectInfo.vue
+++ b/src/components/layout/ObjectInfo.vue
@@ -1,49 +1,32 @@
 <template>
-  <div class="right-bar">
-    <div
-      class="theme object-info"
-      :class="{ 'is-hidden': !objectBarData.isVisible }"
-      id="info-panel"
-      ref="infoPanel"
-    >
-      <div id="data-container">
-        <div class="metadata item">
-          <h1
-            class="text-lg font-bold section-title"
-            :class="{ dark: theme.value === 'dark' }"
-          >
-            METADATA
-          </h1>
-          <div
-            v-for="(value, key) in objectBarData.data"
-            :key="key"
-            class="data-entry"
-          >
-            <p>
-              <strong> {{ key }}:</strong> {{ value }}
-            </p>
-          </div>
+  <div class="theme object-info" id="info-panel" ref="infoPanel">
+    <div id="data-container">
+      <div class="metadata item">
+        <h1
+          class="text-lg font-bold section-title"
+          :class="{ dark: theme.value === 'dark' }"
+        >
+          METADATA
+        </h1>
+        <div
+          v-for="(value, key) in objectBarData.data"
+          :key="key"
+          class="data-entry"
+        >
+          <p>
+            <strong> {{ key }}:</strong> {{ value }}
+          </p>
         </div>
       </div>
-
-      <Button
-        variant="secondary"
-        size="icon"
-        id="closeObjectBar"
-        @click="toggleObjectBar()"
-      >
-        <ArrowBigRightDash />
-      </Button>
     </div>
 
     <Button
       variant="secondary"
       size="icon"
-      id="openObjectBar"
-      :class="{ 'is-hidden': !objectBarData.isVisible }"
-      @click="toggleObjectBar()"
+      id="closeObjectBar"
+      @click="objectBarData.isVisible = false"
     >
-      <ArrowBigLeftDash />
+      <ArrowBigRightDash />
     </Button>
   </div>
 </template>
@@ -52,7 +35,7 @@
 import { Button } from "@/components/ui/button";
 import { useHover } from "@/composables/useHover";
 import { ref, watchEffect } from "vue";
-import { ArrowBigLeftDash, ArrowBigRightDash } from "lucide-vue-next";
+import { ArrowBigRightDash } from "lucide-vue-next";
 import { useViewerRuntime } from "@/viewer/viewer_context";
 
 const runtime = useViewerRuntime();
@@ -62,53 +45,25 @@ const infoPanel = ref<HTMLElement | null>(null);
 const { isHovered } = useHover(infoPanel);
 
 watchEffect(() => {
-  blockPicker.value = isHovered.value && objectBarData.isVisible;
+  blockPicker.value = isHovered.value;
 });
-
-const toggleObjectBar = () => {
-  objectBarData.isVisible = !objectBarData.isVisible;
-};
 </script>
 
 <style scoped>
-div.right-bar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 20px; /* Padding around the content */
-
-  /* WIDTH */
-  width: 30vw;
-  max-width: 300px;
-  min-width: 250px;
-  pointer-events: none;
-}
-
-/* 'scoped' means these styles only apply to this module */
 div.object-info {
   z-index: 1000; /* Ensure it appears above other content */
   padding: 20px;
   max-width: 400px;
   border-radius: 10px;
-  height: 100%;
+  max-height: 100%;
   margin: 0px;
-  right: 0%;
-  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  flex: 0 1 auto; /* Size to content within RightSidebar's column, but shrink if it doesn't fit */
   display: flex;
   flex-direction: column;
   color: var(--foreground);
   pointer-events: auto;
 }
 
-div.is-hidden {
-  transform: translateX(+150%);
-  /*display: none;*/
-  pointer-events: none;
-}
-
 div#data-container {
   position: relative;
   display: flex;
@@ -149,20 +104,4 @@ Button#closeObjectBar {
   align-self: flex-end;
   margin-top: auto;
 }
-
-Button#openObjectBar {
-  position: absolute;
-  bottom: 40px;
-  right: 40px;
-  z-index: 1;
-  display: flex;
-  visibility: hidden;
-  transition: visibility 1s;
-  pointer-events: auto;
-}
-
-Button#openObjectBar.is-hidden {
-  opacity: 1;
-  visibility: visible;
-}
 </style>
diff --git a/src/components/layout/RightSidebar.vue b/src/components/layout/RightSidebar.vue
new file mode 100644
index 0000000..7bbcff4
--- /dev/null
+++ b/src/components/layout/RightSidebar.vue
@@ -0,0 +1,79 @@
+<template>
+  <TransitionGroup tag="div" id="right-sidebar" name="right-sidebar-item">
+    <ObjectInfo v-if="objectBarData.isVisible" key="object-info" />
+    <ObjectActions key="object-actions" />
+  </TransitionGroup>
+
+  <Button
+    variant="secondary"
+    size="icon"
+    id="openObjectBar"
+    :class="{ 'is-hidden': !objectBarData.isVisible }"
+    @click="objectBarData.isVisible = true"
+  >
+    <ArrowBigLeftDash />
+  </Button>
+</template>
+
+<script setup lang="ts">
+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";
+
+const { objectBarData } = useViewerRuntime().store;
+</script>
+
+<style scoped>
+#right-sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 20px; /* Padding around the content */
+  z-index: 1000; /* Ensure it stays above the Three.js canvas */
+  row-gap: 20px; /* Space between ObjectInfo and ObjectActions */
+
+  /* WIDTH */
+  width: 30vw;
+  max-width: 300px;
+  min-width: 250px;
+  pointer-events: none;
+}
+
+.right-sidebar-item-move,
+.right-sidebar-item-enter-active,
+.right-sidebar-item-leave-active {
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.right-sidebar-item-enter-from,
+.right-sidebar-item-leave-to {
+  transform: translateX(150%);
+}
+
+.right-sidebar-item-leave-active {
+  /* Drop out of flow immediately so ObjectActions animates into place right
+     away instead of waiting for the leave transition to finish. */
+  position: absolute;
+}
+
+Button#openObjectBar {
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
+  z-index: 1001;
+  display: flex;
+  visibility: hidden;
+  transition: visibility 1s;
+  pointer-events: auto;
+}
+
+Button#openObjectBar.is-hidden {
+  opacity: 1;
+  visibility: visible;
+}
+</style>

From 8b5814955e05548e54c76268e81045f365428343 Mon Sep 17 00:00:00 2001
From: Eric <ericgozzi@cosmicgarage.ch>
Date: Fri, 14 Aug 2026 15:16:54 +0200
Subject: [PATCH 3/3] docs: note the ObjectActions panel split in the changelog

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d0940f0..d27808b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+
+## Unreleased
+
+### Changed
+
+- Split the backend-driven action buttons out of the ObjectInfo panel into
+  their own ObjectActions panel.
+
 ## [1.0.1](https://github.com/compas-dev/compas_threejs_ts/compare/v1.0.0...v1.0.1) (2026-08-13)
 
 ### Bug Fixes