From da418560f640d5f1b3914ab3530f0b394b1454a6 Mon Sep 17 00:00:00 2001
From: Giuseppe Leo <leo.giuseppe.84@gmail.com>
Date: Sun, 3 May 2026 02:43:54 +0200
Subject: [PATCH 1/3] feat: isometric SceneEditor, elements panel UX, image
 stamp on ground click

Closes #89

- Default camera: CameraPreset.Orthographic at [30,30,30] for isometric view
- Elements panel: remove 'Add' label prefix; rename buttons to 'New camera',
  'Add model', 'Add image'; filter-bar buttons always ghost with CSS active state
- Image stamp palette: loaded texture groups shown as thumbnails; clicking one
  enters stamp mode (crosshair cursor); clicking the 3D canvas ray-casts against
  the ground plane (y=0) and places a PlaneGeometry mesh with the image texture
- Stamp meshes are tracked and disposed on unmount
- TextureGroupHandlers: add optional onStampGroupSelect callback

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/panels/ElementsPanel.vue     | 137 ++++++++++++++++++--
 src/stores/textureGroups.ts                 |   1 +
 src/views/Tools/SceneEditor/SceneEditor.vue |  57 +++++++-
 3 files changed, 178 insertions(+), 17 deletions(-)

diff --git a/src/components/panels/ElementsPanel.vue b/src/components/panels/ElementsPanel.vue
index 10143614..b3fbe2c1 100644
--- a/src/components/panels/ElementsPanel.vue
+++ b/src/components/panels/ElementsPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import GenericPanel from './GenericPanel.vue'
 import SchemaControls from './ConfigControls.vue'
 import ElementItem from './ElementItem.vue'
@@ -105,11 +105,28 @@ interface AddButton {
 }
 
 const addButtons: AddButton[] = [
-  { type: 'camera', icon: Camera, label: 'Camera', title: 'Add Camera' },
-  { type: 'mesh', icon: Box, label: 'Mesh', title: 'Add Mesh' },
-  { type: 'textureArea', icon: Image, label: 'Texture', title: 'Add Texture Area' }
+  { type: 'camera', icon: Camera, label: 'New camera', title: 'Add a camera to the scene' },
+  { type: 'mesh', icon: Box, label: 'Add model', title: 'Add a 3D model' },
+  { type: 'textureArea', icon: Image, label: 'Add image', title: 'Load an image for stamping' }
 ]
 
+const stampGroupId = ref<string | null>(null)
+
+const toggleStampGroup = (groupId: string) => {
+  stampGroupId.value = stampGroupId.value === groupId ? null : groupId
+  textureStore.handlers?.onStampGroupSelect?.(stampGroupId.value)
+}
+
+watch(
+  () => textureStore.groups.length,
+  () => {
+    if (stampGroupId.value && !textureStore.groups.some((g) => g.id === stampGroupId.value)) {
+      stampGroupId.value = null
+      textureStore.handlers?.onStampGroupSelect?.(null)
+    }
+  }
+)
+
 const isCameraExpanded = computed(() => {
   if (!expandedName.value) return false
   if (activeProperties.value?.type === 'camera') return true
@@ -148,7 +165,6 @@ const hasExpandedSchema = computed(
   <GenericPanel panel-type="elements" side="left" title="Elements">
     <!-- Add bar -->
     <div class="elements-panel__add-bar">
-      <span class="elements-panel__add-label">Add</span>
       <Button
         v-for="btn in addButtons"
         :key="btn.type"
@@ -158,7 +174,7 @@ const hasExpandedSchema = computed(
         :title="btn.title"
         @click="addElement(btn.type)"
       >
-        <component :is="btn.icon" class="h-3 w-3 mr-1" />{{ btn.label }}
+        <component :is="btn.icon" class="elements-panel__add-icon" />{{ btn.label }}
       </Button>
     </div>
 
@@ -166,7 +182,8 @@ const hasExpandedSchema = computed(
     <div class="elements-panel__filter-bar">
       <IconButton
         size="sm"
-        :active="allVisible"
+        variant="ghost"
+        :class="{ 'elements-panel__filter-btn--active': allVisible }"
         :title="allVisible ? 'Hide all' : 'Show all'"
         @click="allVisible ? hideAllCategories() : showAllCategories()"
       >
@@ -178,7 +195,8 @@ const hasExpandedSchema = computed(
         v-for="cat in ELEMENT_CATEGORIES"
         :key="cat.category"
         size="sm"
-        :active="!hiddenCategories.has(cat.category)"
+        variant="ghost"
+        :class="{ 'elements-panel__filter-btn--active': !hiddenCategories.has(cat.category) }"
         :title="hiddenCategories.has(cat.category) ? `Show ${cat.label}` : `Hide ${cat.label}`"
         @click="toggleCategory(cat.category)"
       >
@@ -186,6 +204,31 @@ const hasExpandedSchema = computed(
       </IconButton>
     </div>
 
+    <!-- Image stamp palette -->
+    <div v-if="textureStore.groups.length > 0" class="elements-panel__palette">
+      <p class="elements-panel__palette-label">Stamp</p>
+      <div class="elements-panel__palette-items">
+        <button
+          v-for="group in textureStore.groups"
+          :key="group.id"
+          class="elements-panel__palette-item"
+          :class="{ 'elements-panel__palette-item--active': stampGroupId === group.id }"
+          :title="
+            stampGroupId === group.id ? `Cancel stamp: ${group.name}` : `Stamp: ${group.name}`
+          "
+          @click="toggleStampGroup(group.id)"
+        >
+          <img
+            v-if="group.textures[0]"
+            :src="group.textures[0].url"
+            :alt="group.name"
+            class="elements-panel__palette-thumb"
+          />
+          <span class="elements-panel__palette-name">{{ group.name }}</span>
+        </button>
+      </div>
+    </div>
+
     <p v-if="!hasContent" class="elements-panel__empty">No scene elements.</p>
 
     <div v-else class="elements-panel__list">
@@ -276,12 +319,6 @@ const hasExpandedSchema = computed(
   flex-wrap: wrap;
 }
 
-.elements-panel__add-label {
-  font-size: var(--font-size-xs);
-  color: var(--color-muted-foreground);
-  flex-shrink: 0;
-}
-
 .elements-panel__add-btn {
   height: var(--btn-sm-height);
   padding: 0 var(--spacing-2);
@@ -289,6 +326,12 @@ const hasExpandedSchema = computed(
   gap: var(--spacing-1);
 }
 
+.elements-panel__add-icon {
+  width: var(--font-size-sm);
+  height: var(--font-size-sm);
+  flex-shrink: 0;
+}
+
 .elements-panel__filter-bar {
   display: flex;
   align-items: center;
@@ -305,6 +348,72 @@ const hasExpandedSchema = computed(
   flex-shrink: 0;
 }
 
+.elements-panel__filter-btn--active {
+  color: var(--color-foreground);
+  opacity: 1;
+}
+
+.elements-panel__filter-bar .icon-btn:not(.elements-panel__filter-btn--active) {
+  opacity: var(--opacity-muted);
+}
+
+.elements-panel__palette {
+  padding-bottom: var(--spacing-2);
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--spacing-1-5);
+}
+
+.elements-panel__palette-label {
+  font-size: var(--font-size-xs);
+  color: var(--color-muted-foreground);
+  margin: 0 0 var(--spacing-1);
+}
+
+.elements-panel__palette-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+}
+
+.elements-panel__palette-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-0-5);
+  padding: var(--spacing-1);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-secondary);
+  cursor: pointer;
+  width: 4rem;
+}
+
+.elements-panel__palette-item:hover {
+  border-color: var(--color-muted-foreground);
+}
+
+.elements-panel__palette-item--active {
+  border-color: var(--color-primary);
+  background: var(--color-muted);
+}
+
+.elements-panel__palette-thumb {
+  width: 3rem;
+  height: 3rem;
+  object-fit: cover;
+  border-radius: var(--radius-xs, 2px);
+}
+
+.elements-panel__palette-name {
+  font-size: var(--font-size-xs);
+  color: var(--color-muted-foreground);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+  text-align: center;
+}
+
 .elements-panel__empty {
   font-size: var(--font-size-base);
   color: var(--color-foreground);
diff --git a/src/stores/textureGroups.ts b/src/stores/textureGroups.ts
index 3cec9d91..b86ca453 100644
--- a/src/stores/textureGroups.ts
+++ b/src/stores/textureGroups.ts
@@ -43,6 +43,7 @@ export interface TextureGroupHandlers {
   onAddNewGroup: (event: Event) => void
   onManualUpdate: () => void
   onAddElement: (type: 'camera' | 'mesh') => void
+  onStampGroupSelect?: (groupId: string | null) => void
 }
 
 const DEFAULT_BASE_SIZE = 20
diff --git a/src/views/Tools/SceneEditor/SceneEditor.vue b/src/views/Tools/SceneEditor/SceneEditor.vue
index dd5c38a3..6eb9e24b 100644
--- a/src/views/Tools/SceneEditor/SceneEditor.vue
+++ b/src/views/Tools/SceneEditor/SceneEditor.vue
@@ -267,6 +267,11 @@ let currentWorld: any = null
 let currentGround: any = null
 let currentAmbientLight: THREE.Light | null = null
 let currentDirectionalLight: THREE.Light | null = null
+let stampGroupId: string | null = null
+const stampedMeshes: THREE.Mesh[] = []
+const STAMP_Y_OFFSET = 0.01
+const STAMP_DEFAULT_SIZE = 10
+const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
 // Live-update ground properties without reinit
 const applyGroundUpdate = (field: string, value: unknown) => {
   if (field === 'enabled' || field === 'size') {
@@ -330,17 +335,28 @@ onMounted(() => {
     onManualUpdate: () => {
       if (selectedGroupId.value) regenerateGroupMeshes(selectedGroupId.value)
     },
-    onAddElement: () => {}
+    onAddElement: () => {},
+    onStampGroupSelect: (groupId) => {
+      stampGroupId = groupId
+      if (canvas.value) canvas.value.style.cursor = groupId ? 'crosshair' : ''
+    }
   })
 
   if (canvas.value) {
     initScene()
+    canvas.value.addEventListener('click', handleStampClick)
   }
 
   openPanel('elements')
 })
 
 onBeforeUnmount(() => {
+  canvas.value?.removeEventListener('click', handleStampClick)
+  stampedMeshes.forEach((mesh) => {
+    mesh.geometry.dispose()
+    ;(mesh.material as THREE.Material).dispose()
+  })
+  stampedMeshes.length = 0
   clearViewPanels()
   clearSceneElements()
   unregisterCameraHandlers()
@@ -530,6 +546,41 @@ const regenerateGroupMeshes = (groupId: string) => {
   )
 }
 
+const handleStampClick = (event: MouseEvent): void => {
+  if (!stampGroupId || !currentScene || !currentCamera || !canvas.value) return
+  const group = textureGroups.value.find((g) => g.id === stampGroupId)
+  const texture = group?.textures[0]
+  if (!texture) return
+
+  const rect = canvas.value.getBoundingClientRect()
+  const mouse = new THREE.Vector2(
+    ((event.clientX - rect.left) / rect.width) * 2 - 1,
+    -((event.clientY - rect.top) / rect.height) * 2 + 1
+  )
+  const raycaster = new THREE.Raycaster()
+  raycaster.setFromCamera(mouse, currentCamera)
+
+  const hitPoint = new THREE.Vector3()
+  if (!raycaster.ray.intersectPlane(groundPlane, hitPoint)) return
+
+  const groupConfig = getGroupConfig(group.name)
+  const size = groupConfig?.textures.baseSize ?? [STAMP_DEFAULT_SIZE, STAMP_DEFAULT_SIZE, 0]
+  const tex = new THREE.TextureLoader().load(texture.url)
+  const geometry = new THREE.PlaneGeometry(size[0], size[1])
+  const material = new THREE.MeshStandardMaterial({
+    map: tex,
+    side: THREE.DoubleSide,
+    transparent: true
+  })
+  const mesh = new THREE.Mesh(geometry, material)
+  mesh.rotation.x = -Math.PI / 2
+  mesh.position.set(hitPoint.x, STAMP_Y_OFFSET, hitPoint.z)
+  mesh.name = `stamp-${stampGroupId}-${Date.now()}`
+  currentScene.add(mesh)
+  stampedMeshes.push(mesh)
+  updateSceneElements(currentScene)
+}
+
 // Reinitialize scene
 const reinitScene = () => {
   if (animationId) {
@@ -637,8 +688,8 @@ const initScene = async () => {
       {
         id: 'cam-1',
         label: 'Camera 1',
-        preset: CameraPreset.Perspective,
-        position: [0, 50, 100],
+        preset: CameraPreset.Orthographic,
+        position: [30, 30, 30],
         fov: 60,
         orbitTarget: [0, 0, 0]
       }

From 643dcf432c9cbd34170a53ee03c02e1d791b0fa6 Mon Sep 17 00:00:00 2001
From: Giuseppe Leo <leo.giuseppe.84@gmail.com>
Date: Mon, 4 May 2026 09:15:23 +0200
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20billboard=20stamps,=20collapsible?=
 =?UTF-8?q?=20elements,=20stamp=E2=86=92area=20toggler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Stamp meshes now stand upright as billboards (PlaneGeometry vertical,
  y-position at half-height) instead of lying flat
- Add alphaTest: 0.5 to fix background bleed-through on transparent image areas
- Element list collapses behind an arrow toggle, closed by default
- Stamp items show 'Convert to area' button which removes the billboard and
  spawns a textureGroup area centred on the stamp position using addGroupMeshes
- updateSceneElements tags stamp meshes as type='Stamp' with the associated
  groupId so ElementsPanel can detect and render the toggle
- Stamp names use __ separator for reliable groupId extraction

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/panels/ElementsPanel.vue     | 89 ++++++++++++++++++++-
 src/stores/textureGroups.ts                 |  1 +
 src/views/Tools/SceneEditor/SceneEditor.vue | 72 +++++++++++++++--
 3 files changed, 151 insertions(+), 11 deletions(-)

diff --git a/src/components/panels/ElementsPanel.vue b/src/components/panels/ElementsPanel.vue
index b3fbe2c1..224bd70f 100644
--- a/src/components/panels/ElementsPanel.vue
+++ b/src/components/panels/ElementsPanel.vue
@@ -8,7 +8,7 @@ import ElementGroup from './ElementGroup.vue'
 import ElementSpawn from './ElementSpawn.vue'
 import IconButton from '@/components/IconButton.vue'
 import { Button } from '@/components/ui/button'
-import { Box, Camera, CheckSquare, Image, Square } from 'lucide-vue-next'
+import { Box, Camera, CheckSquare, ChevronDown, ChevronRight, Image, Square } from 'lucide-vue-next'
 import type { Component } from 'vue'
 import { useDebugSceneStore } from '@/stores/debugScene'
 import { useElementPropertiesStore } from '@/stores/elementProperties'
@@ -111,6 +111,7 @@ const addButtons: AddButton[] = [
 ]
 
 const stampGroupId = ref<string | null>(null)
+const isListOpen = ref(false)
 
 const toggleStampGroup = (groupId: string) => {
   stampGroupId.value = stampGroupId.value === groupId ? null : groupId
@@ -229,9 +230,24 @@ const hasExpandedSchema = computed(
       </div>
     </div>
 
-    <p v-if="!hasContent" class="elements-panel__empty">No scene elements.</p>
+    <!-- Collapsible element list header -->
+    <div
+      class="elements-panel__list-header"
+      role="button"
+      tabindex="0"
+      @click="isListOpen = !isListOpen"
+      @keydown.enter.space.prevent="isListOpen = !isListOpen"
+    >
+      <component
+        :is="isListOpen ? ChevronDown : ChevronRight"
+        class="elements-panel__list-chevron"
+      />
+      <span class="elements-panel__list-title">Elements</span>
+    </div>
+
+    <p v-if="isListOpen && !hasContent" class="elements-panel__empty">No scene elements.</p>
 
-    <div v-else class="elements-panel__list">
+    <div v-if="isListOpen && hasContent" class="elements-panel__list">
       <!-- Ungrouped scene elements -->
       <div
         v-for="(element, index) in grouped.ungrouped"
@@ -258,6 +274,19 @@ const hasExpandedSchema = computed(
           <p v-if="element.type === 'TextureArea'" class="elements-panel__type-description">
             Texture Area
           </p>
+
+          <!-- Stamp billboard → area toggler -->
+          <div v-if="element.type === 'Stamp'" class="elements-panel__stamp-convert">
+            <span class="elements-panel__stamp-convert-label">Billboard</span>
+            <button
+              class="elements-panel__stamp-convert-btn"
+              title="Convert to area distribution"
+              @click="textureStore.handlers?.onConvertStampToArea?.(element.name)"
+            >
+              Convert to area
+            </button>
+          </div>
+
           <ElementCamera
             v-if="isCameraExpanded"
             :is-recording="isRecording"
@@ -414,6 +443,60 @@ const hasExpandedSchema = computed(
   text-align: center;
 }
 
+.elements-panel__list-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1) 0;
+  cursor: pointer;
+  user-select: none;
+  color: var(--color-muted-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+}
+
+.elements-panel__list-header:hover {
+  color: var(--color-foreground);
+}
+
+.elements-panel__list-chevron {
+  width: var(--font-size-sm);
+  height: var(--font-size-sm);
+  flex-shrink: 0;
+}
+
+.elements-panel__list-title {
+  flex: 1;
+}
+
+.elements-panel__stamp-convert {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) 0;
+}
+
+.elements-panel__stamp-convert-label {
+  font-size: var(--font-size-xs);
+  color: var(--color-muted-foreground);
+}
+
+.elements-panel__stamp-convert-btn {
+  font-size: var(--font-size-xs);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-secondary);
+  color: var(--color-foreground);
+  cursor: pointer;
+}
+
+.elements-panel__stamp-convert-btn:hover {
+  background: var(--color-muted);
+  border-color: var(--color-primary);
+}
+
 .elements-panel__empty {
   font-size: var(--font-size-base);
   color: var(--color-foreground);
diff --git a/src/stores/textureGroups.ts b/src/stores/textureGroups.ts
index b86ca453..c13f5c5e 100644
--- a/src/stores/textureGroups.ts
+++ b/src/stores/textureGroups.ts
@@ -44,6 +44,7 @@ export interface TextureGroupHandlers {
   onManualUpdate: () => void
   onAddElement: (type: 'camera' | 'mesh') => void
   onStampGroupSelect?: (groupId: string | null) => void
+  onConvertStampToArea?: (stampName: string) => void
 }
 
 const DEFAULT_BASE_SIZE = 20
diff --git a/src/views/Tools/SceneEditor/SceneEditor.vue b/src/views/Tools/SceneEditor/SceneEditor.vue
index 6eb9e24b..2ceacd4f 100644
--- a/src/views/Tools/SceneEditor/SceneEditor.vue
+++ b/src/views/Tools/SceneEditor/SceneEditor.vue
@@ -84,6 +84,15 @@ const updateSceneElements = (scene: THREE.Scene) => {
     [
       ...cameraElements,
       ...scene.children.map((child: any) => {
+        const stampId = stampGroupIdFromName(child.name ?? '')
+        if (stampId) {
+          return {
+            name: child.name,
+            type: 'Stamp',
+            hidden: hiddenElements.value.has(child.name),
+            groupId: stampId
+          }
+        }
         const groupId = textureGroups.value.find(
           (g) => child.name?.startsWith(`grp-${g.id}-`) || child.name === `wireframe-${g.id}`
         )?.id
@@ -270,8 +279,16 @@ let currentDirectionalLight: THREE.Light | null = null
 let stampGroupId: string | null = null
 const stampedMeshes: THREE.Mesh[] = []
 const STAMP_Y_OFFSET = 0.01
-const STAMP_DEFAULT_SIZE = 10
+const STAMP_DEFAULT_SIZE = 2
+const STAMP_AREA_DENSITY = 5
+const STAMP_SEPARATOR = '__'
 const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+
+const stampGroupIdFromName = (name: string): string | undefined => {
+  if (!name.startsWith(`stamp${STAMP_SEPARATOR}`)) return undefined
+  const parts = name.split(STAMP_SEPARATOR)
+  return parts[1]
+}
 // Live-update ground properties without reinit
 const applyGroundUpdate = (field: string, value: unknown) => {
   if (field === 'enabled' || field === 'size') {
@@ -339,6 +356,45 @@ onMounted(() => {
     onStampGroupSelect: (groupId) => {
       stampGroupId = groupId
       if (canvas.value) canvas.value.style.cursor = groupId ? 'crosshair' : ''
+    },
+    onConvertStampToArea: (stampName) => {
+      if (!currentScene || !currentWorld) return
+      const groupId = stampGroupIdFromName(stampName)
+      if (!groupId) return
+      const group = textureGroups.value.find((g) => g.id === groupId)
+      if (!group) return
+
+      const stampMesh = currentScene.children.find((c: any) => c.name === stampName) as
+        | THREE.Mesh
+        | undefined
+      const position = stampMesh?.position.clone() ?? new THREE.Vector3()
+
+      // Remove the billboard mesh
+      if (stampMesh) {
+        currentScene.remove(stampMesh)
+        const index = stampedMeshes.indexOf(stampMesh)
+        if (index !== -1) stampedMeshes.splice(index, 1)
+        ;(stampMesh.material as THREE.Material).dispose()
+        stampMesh.geometry.dispose()
+      }
+
+      // Configure the group to use an area centred on the stamp position
+      const name = getGroupName(groupId)
+      const existing =
+        textureStore.groupConfigRegistry[name] ?? textureStore.createDefaultGroupConfig()
+      const areaSpread = STAMP_DEFAULT_SIZE * 4
+      textureStore.groupConfigRegistry[name] = {
+        ...existing,
+        area: {
+          center: [position.x, 0, position.z] as [number, number, number],
+          size: [areaSpread, 0, areaSpread] as [number, number, number]
+        },
+        instances: { ...existing.instances, density: STAMP_AREA_DENSITY }
+      }
+
+      addGroupMeshes(currentScene, currentWorld, group, getGroupConfig, () =>
+        updateSceneElements(currentScene)
+      )
     }
   })
 
@@ -563,19 +619,19 @@ const handleStampClick = (event: MouseEvent): void => {
   const hitPoint = new THREE.Vector3()
   if (!raycaster.ray.intersectPlane(groundPlane, hitPoint)) return
 
-  const groupConfig = getGroupConfig(group.name)
-  const size = groupConfig?.textures.baseSize ?? [STAMP_DEFAULT_SIZE, STAMP_DEFAULT_SIZE, 0]
+  const billboardWidth = STAMP_DEFAULT_SIZE
+  const billboardHeight = STAMP_DEFAULT_SIZE
   const tex = new THREE.TextureLoader().load(texture.url)
-  const geometry = new THREE.PlaneGeometry(size[0], size[1])
+  const geometry = new THREE.PlaneGeometry(billboardWidth, billboardHeight)
   const material = new THREE.MeshStandardMaterial({
     map: tex,
     side: THREE.DoubleSide,
-    transparent: true
+    transparent: true,
+    alphaTest: 0.5
   })
   const mesh = new THREE.Mesh(geometry, material)
-  mesh.rotation.x = -Math.PI / 2
-  mesh.position.set(hitPoint.x, STAMP_Y_OFFSET, hitPoint.z)
-  mesh.name = `stamp-${stampGroupId}-${Date.now()}`
+  mesh.position.set(hitPoint.x, billboardHeight / 2, hitPoint.z)
+  mesh.name = ['stamp', stampGroupId, Date.now()].join(STAMP_SEPARATOR)
   currentScene.add(mesh)
   stampedMeshes.push(mesh)
   updateSceneElements(currentScene)

From 0d9b0afa1ab5b11bea2dba34e42e939b42fc0093 Mon Sep 17 00:00:00 2001
From: Giuseppe Leo <leo.giuseppe.84@gmail.com>
Date: Mon, 4 May 2026 23:23:40 +0200
Subject: [PATCH 3/3] fix: disable New camera and Add model buttons until logic
 is implemented

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/panels/ElementsPanel.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/panels/ElementsPanel.vue b/src/components/panels/ElementsPanel.vue
index 224bd70f..db4387d6 100644
--- a/src/components/panels/ElementsPanel.vue
+++ b/src/components/panels/ElementsPanel.vue
@@ -102,11 +102,18 @@ interface AddButton {
   icon: Component
   label: string
   title: string
+  disabled?: boolean
 }
 
 const addButtons: AddButton[] = [
-  { type: 'camera', icon: Camera, label: 'New camera', title: 'Add a camera to the scene' },
-  { type: 'mesh', icon: Box, label: 'Add model', title: 'Add a 3D model' },
+  {
+    type: 'camera',
+    icon: Camera,
+    label: 'New camera',
+    title: 'Not yet implemented',
+    disabled: true
+  },
+  { type: 'mesh', icon: Box, label: 'Add model', title: 'Not yet implemented', disabled: true },
   { type: 'textureArea', icon: Image, label: 'Add image', title: 'Load an image for stamping' }
 ]
 
@@ -173,7 +180,8 @@ const hasExpandedSchema = computed(
         size="sm"
         class="elements-panel__add-btn"
         :title="btn.title"
-        @click="addElement(btn.type)"
+        :disabled="btn.disabled"
+        @click="!btn.disabled && addElement(btn.type)"
       >
         <component :is="btn.icon" class="elements-panel__add-icon" />{{ btn.label }}
       </Button>