diff --git a/VERSION b/VERSION
index f83dbb3..1451d48 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.7.8
\ No newline at end of file
+0.7.9
\ No newline at end of file
diff --git a/index.html b/index.html
index 3041554..4037244 100644
--- a/index.html
+++ b/index.html
@@ -26,8 +26,8 @@
             href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&family=Caveat+Brush&display=swap"
             rel="stylesheet"
         />
-        <title>Craftbase - minimal whiteboard for builders</title>
-        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <title>Craftbase - Open-source online whiteboard for developers</title>
+
         <script
             defer
             src="https://cloud.umami.is/script.js"
diff --git a/package.json b/package.json
index 7c898a0..8233794 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "craftbase",
-    "version": "0.7.8",
+    "version": "0.7.9",
     "private": true,
     "main": "src/lib.ts",
     "module": "src/lib.ts",
@@ -34,8 +34,9 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-responsive": "10.0.0",
-        "react-router": "^6.30.3",
-        "react-router-dom": "^6.30.3",
+        "react-router": "^6.30.4",
+        "react-router-dom": "^6.30.4",
+        "shell-quote": "^1.8.4",
         "styled-components": "^6.1.11",
         "subscriptions-transport-ws": "^0.11.0",
         "two.js": "^0.8.13",
@@ -57,7 +58,9 @@
         "form-data": ">=3.0.4",
         "brace-expansion": ">=5.0.6",
         "lodash": ">=4.18.0",
-        "postcss": ">=8.5.10"
+        "postcss": ">=8.5.10",
+        "shell-quote": ">=1.8.4",
+        "vite": "~6.4.3"
     },
     "eslintConfig": {
         "extends": "react-app/base"
@@ -91,9 +94,9 @@
         "jsdom": "^25.0.0",
         "tailwindcss": "^3.4.4",
         "typescript": "^6.0.3",
-        "vite": "^6.4.2",
+        "vite": "^6.4.3",
         "vite-plugin-svgr": "^5.2.0",
         "vite-tsconfig-paths": "^6.1.1",
-        "vitest": "^3.2.4"
+        "vitest": "^3.2.6"
     }
 }
diff --git a/src/assets/blue_star.svg b/src/assets/blue_star.svg
index 89d4064..b181c4e 100644
--- a/src/assets/blue_star.svg
+++ b/src/assets/blue_star.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0052CC" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1A1612" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
\ No newline at end of file
diff --git a/src/assets/brainstorming_craftbase.png b/src/assets/brainstorming_craftbase.png
new file mode 100644
index 0000000..bd0dc81
Binary files /dev/null and b/src/assets/brainstorming_craftbase.png differ
diff --git a/src/assets/customize.svg b/src/assets/customize.svg
index 894fdb9..de83419 100644
--- a/src/assets/customize.svg
+++ b/src/assets/customize.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0052CC" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1A1612" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
\ No newline at end of file
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..b0f4cab
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1,7 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="craftbaseIconTitle" stroke="#C9A84C" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="miter" fill="none">
+  <title id="craftbaseIconTitle">Craftbase</title>
+  <!-- No background fill — transparent, works on any bg -->
+  <polyline points="4,9 4,4 9,4"/>
+  <polyline points="15,4 20,4 20,9"/>
+  <polyline points="4,15 4,20 9,20"/>
+</svg>
diff --git a/src/assets/no_signup.svg b/src/assets/no_signup.svg
index c67e3d8..8f4a93c 100644
--- a/src/assets/no_signup.svg
+++ b/src/assets/no_signup.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0052CC" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="18" y1="8" x2="23" y2="13"></line><line x1="23" y1="8" x2="18" y2="13"></line></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1A1612" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="18" y1="8" x2="23" y2="13"></line><line x1="23" y1="8" x2="18" y2="13"></line></svg>
\ No newline at end of file
diff --git a/src/assets/right_arrow_white.svg b/src/assets/right_arrow_white.svg
index a5c3506..8ed74a6 100644
--- a/src/assets/right_arrow_white.svg
+++ b/src/assets/right_arrow_white.svg
@@ -1 +1 @@
-<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="arrowRightIconTitle" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#FFFFFF"> <title id="arrowRightIconTitle">Arrow Right</title> <path d="M15 18l6-6-6-6"/> <path d="M3 12h17"/> <path stroke-linecap="round" d="M21 12h-1"/> </svg>
\ No newline at end of file
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="arrowRightIconTitle" stroke="#1A1612" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#1A1612"> <title id="arrowRightIconTitle">Arrow Right</title> <path d="M15 18l6-6-6-6"/> <path d="M3 12h17"/> <path stroke-linecap="round" d="M21 12h-1"/> </svg>
\ No newline at end of file
diff --git a/src/assets/sticker.svg b/src/assets/sticker.svg
index f847fdc..50a48cd 100644
--- a/src/assets/sticker.svg
+++ b/src/assets/sticker.svg
@@ -1 +1 @@
-<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="stickerIconTitle" stroke="#0052CC" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#0052CC"> <title id="stickerIconTitle">Sticker</title> <path d="M21,3 L21,11 C21,16.5228475 16.5228475,21 11,21 L3,21 L3,3 L21,3 Z"/> <path d="M9,21 C11.6666667,21 13,19.6666667 13,17 C13,17 13,15.6666667 13,13 L17,13 C19.6666667,13 21,11.6666667 21,9"/> </svg>
\ No newline at end of file
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="stickerIconTitle" stroke="#1A1612" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#1A1612"> <title id="stickerIconTitle">Sticker</title> <path d="M21,3 L21,11 C21,16.5228475 16.5228475,21 11,21 L3,21 L3,3 L21,3 Z"/> <path d="M9,21 C11.6666667,21 13,19.6666667 13,17 C13,17 13,15.6666667 13,13 L17,13 C19.6666667,13 21,11.6666667 21,9"/> </svg>
\ No newline at end of file
diff --git a/src/assets/whiteboarding.png b/src/assets/whiteboarding.png
deleted file mode 100644
index 3531fa1..0000000
Binary files a/src/assets/whiteboarding.png and /dev/null differ
diff --git a/src/canvas/selectionController.ts b/src/canvas/selectionController.ts
index ee1412f..56459e0 100644
--- a/src/canvas/selectionController.ts
+++ b/src/canvas/selectionController.ts
@@ -14,6 +14,7 @@ import {
 } from '../utils/textLayout'
 import { DEFAULT_TEXT_FONT_FAMILY } from '../constants/misc'
 import { getConnectorsEnabled } from '../utils/featureFlags'
+import { markSelectionChrome } from '../utils/svgExportShared'
 
 // Two.js scene shapes carry codebase-specific bookkeeping (elementData,
 // _renderer, etc.) outside the published types. Stay loose here; Stage 12
@@ -556,6 +557,10 @@ export default class SelectionController {
         this.domElement.classList.add('shape-selected')
         this.syncToTarget()
         this.two.update()
+        // Tag the overlay so exports strip it. The `ui` lives at scene level
+        // (not in any element group), so it only reaches the full-scene PNG
+        // export — harmless to tag for the per-selection SVG export too.
+        markSelectionChrome(this.ui)
 
         this._attachHoverListener()
         this.callbacks.onSelect(
diff --git a/src/components/elements/arrowLine.tsx b/src/components/elements/arrowLine.tsx
index 2f129fb..01a839c 100644
--- a/src/components/elements/arrowLine.tsx
+++ b/src/components/elements/arrowLine.tsx
@@ -5,6 +5,7 @@ import { useImmer } from 'use-immer'
 import Two from 'two.js'
 
 import ElementCreator from '../../factory/arrowLine'
+import { readOpacity } from '../../utils/canvasUtils'
 
 import {
     updateX1Y1Vertices,
@@ -98,7 +99,7 @@ function ArrowLine(props: ElementProps): ReactElement {
             line,
         } = elementFactory.createElement()
         group.elementData = { ...props.itemData, ...props }
-        line.opacity = props.metadata?.opacity ?? 1
+        line.opacity = readOpacity(props)
         if (props.stroke) line.stroke = props.stroke
         if (props.linewidth) line.linewidth = props.linewidth
 
@@ -219,7 +220,7 @@ function ArrowLine(props: ElementProps): ReactElement {
             const lineInstance = internalState.line.data
             groupInstance.translation.x = props.x
             groupInstance.translation.y = props.y
-            lineInstance.opacity = props.metadata?.opacity ?? 1
+            lineInstance.opacity = readOpacity(props)
             two.update()
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/components/elements/circle.tsx b/src/components/elements/circle.tsx
index aaa8d27..8487c18 100644
--- a/src/components/elements/circle.tsx
+++ b/src/components/elements/circle.tsx
@@ -4,7 +4,7 @@ import { useBoardContext } from '../../views/Board/boardContext'
 
 import CircleFactory from '../../factory/circle'
 import { strokeTypeToDashes } from '../../utils/misc'
-import { applyShapeText } from '../../utils/canvasUtils'
+import { applyShapeText, readOpacity } from '../../utils/canvasUtils'
 import { componentTypes } from '../../constants/misc'
 
 // Element components receive a fluid prop bag composed of the ComponentRecord
@@ -34,7 +34,7 @@ function Circle(props: ElementProps): ReactElement {
         })
         const { group, circle } = elementFactory.createElement()
         group.elementData = { ...props.itemData, ...props }
-        const opacityValue = props.metadata?.opacity ?? 1
+        const opacityValue = readOpacity(props)
 
         if (props.parentGroup) {
             const parentGroup = props.parentGroup
diff --git a/src/components/elements/diamond.tsx b/src/components/elements/diamond.tsx
index 0a5529a..aa025cc 100644
--- a/src/components/elements/diamond.tsx
+++ b/src/components/elements/diamond.tsx
@@ -4,7 +4,7 @@ import { useBoardContext } from '../../views/Board/boardContext'
 
 import ElementFactory from '../../factory/diamond'
 import { strokeTypeToDashes } from '../../utils/misc'
-import { applyShapeText } from '../../utils/canvasUtils'
+import { applyShapeText, readOpacity } from '../../utils/canvasUtils'
 import { componentTypes } from '../../constants/misc'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,7 +29,7 @@ function Diamond(props: ElementProps): ReactElement {
         })
         const { group, diamond } = elementFactory.createElement()
         group.elementData = { ...props.itemData, ...props }
-        const opacityValue = props.metadata?.opacity ?? 1
+        const opacityValue = readOpacity(props)
 
         if (props.parentGroup) {
             const parentGroup = props.parentGroup
diff --git a/src/components/elements/divider.tsx b/src/components/elements/divider.tsx
index dcc1c1b..d25d3a9 100644
--- a/src/components/elements/divider.tsx
+++ b/src/components/elements/divider.tsx
@@ -6,6 +6,7 @@ import { useImmer } from 'use-immer'
 import { strokeTypeToDashes } from '../../utils/misc'
 
 import ElementCreator from '../../factory/divider'
+import { readOpacity } from '../../utils/canvasUtils'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type ElementProps = any
@@ -85,7 +86,7 @@ function Divider(props: ElementProps): ReactElement {
         const { group, pointCircle1, pointCircle2, line } =
             elementFactory.createElement()
         group.elementData = { ...props.itemData, ...props }
-        line.opacity = props.metadata?.opacity ?? 1
+        line.opacity = readOpacity(props)
 
         if (props.parentGroup) {
             const parentGroup = props.parentGroup
diff --git a/src/components/elements/geoText.tsx b/src/components/elements/geoText.tsx
index d72d64a..ee2619b 100644
--- a/src/components/elements/geoText.tsx
+++ b/src/components/elements/geoText.tsx
@@ -12,6 +12,7 @@ import {
     MOBILE_TEXT_SIZES_OBJECT,
 } from '../../utils/constants'
 import { lineHeightFor } from '../../utils/textLayout'
+import { readOpacity } from '../../utils/canvasUtils'
 import { useMediaQueryUtils } from '../../constants/exportHooks'
 import { computeCounterScale } from '../../utils/counterScale'
 import {
@@ -113,7 +114,7 @@ function GeoText(props: ElementProps): ReactElement {
         const elementFactory = new NewTextFactory(two, prevX, prevY, props)
         const { group, twoText } = elementFactory.createElement()
         group.elementData = { ...props.itemData, ...props }
-        twoText.opacity = props.metadata?.opacity ?? 1
+        twoText.opacity = readOpacity(props)
 
         twoTextRef.current = twoText
         groupObject = group
diff --git a/src/components/elements/groupobject.tsx b/src/components/elements/groupobject.tsx
index b8488f3..61833ed 100644
--- a/src/components/elements/groupobject.tsx
+++ b/src/components/elements/groupobject.tsx
@@ -2,14 +2,18 @@ import React, { useEffect, useState, useRef } from 'react'
 import type { ReactElement } from 'react'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const factoryModules: Record<string, () => Promise<any>> =
-    import.meta.glob('../../factory/*.ts')
+const factoryModules: Record<string, () => Promise<any>> = import.meta.glob(
+    '../../factory/*.ts'
+)
 import Two from 'two.js'
 import { useBoardContext } from '../../views/Board/boardContext'
 import getEditComponents from '../utils/editWrapper'
 import { elementOnBlurHandler } from '../../utils/misc'
-import { DEFAULT_TEXT_FONT_FAMILY } from '../../constants/misc'
-import { layoutStandaloneText } from '../../utils/canvasUtils'
+import {
+    applyShapeText,
+    layoutStandaloneText,
+    readOpacity,
+} from '../../utils/canvasUtils'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type ElementProps = any
@@ -103,9 +107,7 @@ function GroupedObjectWrapper(props: ElementProps): ReactElement {
         two.scene.children.forEach((element: ShapeLike) => {
             if (!element.elementData) return
             if (!childrenIds.includes(element.elementData.id)) return
-            const elMeta = element.elementData.metadata
-            element.opacity =
-                elMeta && !Array.isArray(elMeta) ? (elMeta.opacity ?? 1) : 1
+            element.opacity = readOpacity(element.elementData)
         })
     }
 
@@ -242,12 +244,7 @@ function GroupedObjectWrapper(props: ElementProps): ReactElement {
                     foundOriginalCount++
                     // Reveal the (now position-synced) original: restore its own
                     // group-level opacity — it was hidden at 0 under the overlay.
-                    // metadata may be a pencil vertex array, so guard the read.
-                    const elMeta = element.elementData.metadata
-                    element.opacity =
-                        elMeta && !Array.isArray(elMeta)
-                            ? (elMeta.opacity ?? 1)
-                            : 1
+                    element.opacity = readOpacity(element.elementData)
                 }
             })
             two.update()
@@ -275,9 +272,7 @@ function GroupedObjectWrapper(props: ElementProps): ReactElement {
                         childMetadata = child.metadata.map(
                             (vert: ShapeLike, index: number) => {
                                 const lwProp =
-                                    vert.lw !== undefined
-                                        ? { lw: vert.lw }
-                                        : {}
+                                    vert.lw !== undefined ? { lw: vert.lw } : {}
                                 if (index === 0) {
                                     return { x: absX, y: absY, ...lwProp }
                                 }
@@ -440,9 +435,7 @@ function GroupedObjectWrapper(props: ElementProps): ReactElement {
                 const coreObject = factoryObject.group
                 coreObject.translation.x = item.x
                 coreObject.translation.y = item.y
-                if (item.metadata?.opacity !== undefined) {
-                    coreObject.opacity = item.metadata.opacity
-                }
+                coreObject.opacity = readOpacity(item)
 
                 // Standalone text: the factory makes ONE Two.Text from the raw
                 // content, but SVG collapses `\n` to a single line. Re-lay it out
@@ -457,18 +450,23 @@ function GroupedObjectWrapper(props: ElementProps): ReactElement {
                     )
                 }
 
+                // Shape-with-text (rectangle/diamond/circle): re-materialise the
+                // embedded text the SAME way the shape components do on mount —
+                // via `applyShapeText`, which reflows the raw content to the box
+                // width and renders it as a stacked multiline text layer. The old
+                // single `two.makeText(textContent)` collapsed `\n` into one line
+                // (SVG <text> ignores newlines), so a grouped shape with multiline
+                // text spilled out of its container. Mirrors the standalone-text
+                // (`newText`) handling above.
                 const meta = item.metadata || {}
                 if (meta.hasText && meta.textContent) {
-                    const twoText = two.makeText(meta.textContent, 0, 0)
-                    twoText.fill = meta.textFill || '#000'
-                    twoText.size = meta.textFontSize || 24
-                    twoText.alignment = 'center'
-                    twoText.baseline = meta.textBaseLine || 'middle'
-                    twoText.family =
-                        meta.textFontFamily ||
-                        meta.textFamily ||
-                        DEFAULT_TEXT_FONT_FAMILY
-                    coreObject.add(twoText)
+                    applyShapeText(
+                        two,
+                        coreObject,
+                        item.componentType,
+                        item.width || meta.width || 120,
+                        meta
+                    )
                 }
 
                 coreObject.elementData = item
@@ -559,9 +557,7 @@ function GroupedObjectWrapper(props: ElementProps): ReactElement {
     // Delete-key path sets isDeletingRef and owns its teardown, so we skip then.
     useEffect(() => {
         const memberIds = new Set(
-            (props.children ?? [])
-                .map((c: ShapeLike) => c?.id)
-                .filter(Boolean)
+            (props.children ?? []).map((c: ShapeLike) => c?.id).filter(Boolean)
         )
         const onMemberRemoved = ((e: CustomEvent<{ id: string }>): void => {
             if (isDeletingRef.current) return
diff --git a/src/components/elements/newText.tsx b/src/components/elements/newText.tsx
index 8e95371..3d96c0e 100644
--- a/src/components/elements/newText.tsx
+++ b/src/components/elements/newText.tsx
@@ -4,7 +4,7 @@ import { useImmer } from 'use-immer'
 import { useBoardContext } from '../../views/Board/boardContext'
 
 import NewTextFactory from '../../factory/newText'
-import { syncTextHitRect } from '../../utils/canvasUtils'
+import { syncTextHitRect, readOpacity } from '../../utils/canvasUtils'
 import { lineHeightFor } from '../../utils/textLayout'
 import { htmlToBulletText } from '../../utils/htmlToBulletText'
 import { DEFAULT_TEXT_FONT_FAMILY } from '../../constants/misc'
@@ -49,7 +49,7 @@ function NewText(props: ElementProps): ReactElement {
         const elementFactory = new NewTextFactory(two, prevX, prevY, props)
         const { group, twoText } = elementFactory.createElement()
         group.elementData = { ...props.itemData, ...props }
-        twoText.opacity = props.metadata?.opacity ?? 1
+        twoText.opacity = readOpacity(props)
 
         twoTextRef.current = twoText
 
@@ -252,10 +252,10 @@ function NewText(props: ElementProps): ReactElement {
             input.style.padding = `${vertPad}px 8px`
             input.style.color = twoText.fill || '#3A342C'
             // Match the element's current opacity so the editor doesn't flash to
-            // full opacity on entering edit mode. The opacity handler stores it
-            // on metadata (and applies it at group level), so read that.
+            // full opacity on entering edit mode. Opacity persists in the
+            // top-level `opacity` field (legacy rows fall back to metadata).
             input.style.opacity = String(
-                group.elementData?.metadata?.opacity ?? group.opacity ?? 1
+                readOpacity(group.elementData) ?? group.opacity ?? 1
             )
             input.style.fontSize = `${cssFontSize}px`
             input.style.fontFamily = twoText.family || DEFAULT_TEXT_FONT_FAMILY
diff --git a/src/components/elements/pencil.tsx b/src/components/elements/pencil.tsx
index d23d3f4..9a96a7a 100644
--- a/src/components/elements/pencil.tsx
+++ b/src/components/elements/pencil.tsx
@@ -5,6 +5,7 @@ import { useImmer } from 'use-immer'
 import { strokeTypeToDashes } from '../../utils/misc'
 import getEditComponents from '../utils/editWrapper'
 import PencilFactory from '../../factory/pencil'
+import { readOpacity } from '../../utils/canvasUtils'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type ElementProps = any
@@ -28,13 +29,19 @@ function Pencil(props: ElementProps): ReactElement {
         const shapeRef = path || group.children[0]
         group.elementData = { ...props.itemData, ...props }
 
+        // Opacity persists in the top-level `opacity` field (pencil's
+        // `metadata` is the vertex array; legacy rows fall back to metadata).
+        const pencilOpacity = readOpacity(props)
+
         if (props.parentGroup) {
             const parentGroup = props.parentGroup
             shapeRef.translation.x = props.properties.x
             shapeRef.translation.y = props.properties.y
+            shapeRef.opacity = pencilOpacity
             parentGroup.add(shapeRef)
             two.update()
         } else {
+            group.opacity = pencilOpacity
             getEditComponents(two, group, 4)
 
             if (path) {
diff --git a/src/components/elements/rectangle.tsx b/src/components/elements/rectangle.tsx
index d147005..53bd9b0 100644
--- a/src/components/elements/rectangle.tsx
+++ b/src/components/elements/rectangle.tsx
@@ -4,7 +4,7 @@ import { useBoardContext } from '../../views/Board/boardContext'
 
 import ElementFactory from '../../factory/rectangle'
 import { strokeTypeToDashes } from '../../utils/misc'
-import { applyShapeText } from '../../utils/canvasUtils'
+import { applyShapeText, readOpacity } from '../../utils/canvasUtils'
 import { componentTypes } from '../../constants/misc'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,7 +29,7 @@ function Rectangle(props: ElementProps): ReactElement {
         })
         const { group, rectangle } = elementFactory.createElement()
         group.elementData = { ...props.itemData, ...props }
-        const opacityValue = props.metadata?.opacity ?? 1
+        const opacityValue = readOpacity(props)
 
         if (props.parentGroup) {
             const parentGroup = props.parentGroup
diff --git a/src/components/sidebar/elementProperties.tsx b/src/components/sidebar/elementProperties.tsx
index 1757b6b..4e5c409 100644
--- a/src/components/sidebar/elementProperties.tsx
+++ b/src/components/sidebar/elementProperties.tsx
@@ -7,6 +7,7 @@ import OpacitySlider from '../utils/opacitySlider'
 import Tooltip from '../common/tooltip'
 import { TEXT_SIZES_ARRAY, fillEssentialShades } from '../../utils/constants'
 import { MIXED, inspectGroupValues } from '../../utils/groupInspect'
+import { readOpacity } from '../../utils/canvasUtils'
 import { isStandaloneTextType } from '../../constants/misc'
 import type { ReorderOp } from '../canvasContextMenu'
 import BringToFrontIcon from '../../assets/bring-to-front.svg?react'
@@ -52,7 +53,7 @@ const STROKE_WIDTHS = [
 const SETS = {
     SHAPE: ['fill', 'stroke', 'strokeWidth', 'strokeType', 'opacity'],
     ARROW: ['stroke', 'strokeWidth', 'strokeType', 'opacity'],
-    PENCIL: ['stroke', 'strokeWidth', 'strokeType'],
+    PENCIL: ['stroke', 'strokeWidth', 'strokeType', 'opacity'],
     TEXT: ['textColor', 'textSize', 'textFont', 'opacity'],
     // Geo objects: stroke-centric. Area's fill is auto-derived from stroke, so
     // no fill control — but its outline still takes width/type like a route.
@@ -253,7 +254,9 @@ function readEffectiveValues({
         stroke: shapeData?.stroke ?? defaults.defaultStrokeColor,
         linewidth: shapeData?.linewidth ?? defaults.defaultLinewidth,
         strokeType: elementData?.strokeType ?? 'solid',
-        opacity: elementData?.metadata?.opacity ?? 1,
+        // Opacity lives in the top-level `opacity` field (legacy rows fall
+        // back to metadata.opacity).
+        opacity: readOpacity(elementData),
         textColor: isText
             ? (shapeData?.fill ?? defaults.defaultTextColor)
             : (textData?.fill ?? defaults.defaultTextColor),
@@ -483,6 +486,7 @@ const ElementPropertiesToolbar = () => {
         applyProperty,
         applyGroupProperty,
         reorderSelected,
+        isElementDragging,
         showMobileToolbarPanel,
         // defaults
         defaultFill,
@@ -579,6 +583,9 @@ const ElementPropertiesToolbar = () => {
 
     if (!setKey) return null
     if (isMobile && !showMobileToolbarPanel) return null
+    // Hide while the selected element/group is being dragged/resized so the
+    // fixed panel doesn't sit under it mid-interaction; it returns on release.
+    if (isElementDragging) return null
 
     const sections = SETS[setKey as keyof typeof SETS]
     // Reorder controls apply to an actually-selected element (single shape or
@@ -722,7 +729,12 @@ const ElementPropertiesToolbar = () => {
                 <div className="pt-3 px-2">
                     <SectionLabel>Opacity</SectionLabel>
                     <OpacitySlider
-                        currentOpacity={values.opacity}
+                        isMixed={values.opacity === MIXED}
+                        currentOpacity={
+                            typeof values.opacity === 'number'
+                                ? values.opacity
+                                : 1
+                        }
                         handleOnDrag={(arr): void =>
                             // Live preview while dragging: applies to the scene
                             // only (no store/history write) so the element fades
diff --git a/src/components/utils/objectSelector.ts b/src/components/utils/objectSelector.ts
index dd98625..e2a5a4e 100644
--- a/src/components/utils/objectSelector.ts
+++ b/src/components/utils/objectSelector.ts
@@ -1,4 +1,5 @@
 import Two from 'two.js'
+import { markSelectionChrome } from '../../utils/svgExportShared'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TwoLike = any
@@ -102,6 +103,9 @@ export default class Selector {
         this.areaGroup = areaGroup
         this.group.add(areaGroup)
         this.two.update()
+        // Tag the overlay so SVG/PNG exports can strip it — it lives inside the
+        // group's <g>, so a clone of the group would otherwise carry it.
+        markSelectionChrome(areaGroup)
 
         const clearSelector = (): void => {
             this.areaGroup.opacity = 0
diff --git a/src/components/utils/opacitySlider.tsx b/src/components/utils/opacitySlider.tsx
index 8b53f25..2488e9c 100644
--- a/src/components/utils/opacitySlider.tsx
+++ b/src/components/utils/opacitySlider.tsx
@@ -14,6 +14,11 @@ export interface OpacitySliderProps {
     handleOnChange: (values: number[]) => void
     handleOnDrag: (values: number[]) => void
     currentOpacity?: number
+    // True when a group selection's members have differing opacities. The
+    // slider shows a "Mixed" indicator (instead of a misleading single value)
+    // until the user drags — at which point dragging sets a uniform value
+    // across the whole group, same as any other group property edit.
+    isMixed?: boolean
 }
 
 const OpacitySlider = ({
@@ -21,8 +26,12 @@ const OpacitySlider = ({
     handleOnChange,
     handleOnDrag,
     currentOpacity,
+    isMixed = false,
 }: OpacitySliderProps): ReactElement => {
     const [values, setValues] = useState<number[]>([1])
+    // Cleared whenever the inputs change; set on first drag so the "Mixed"
+    // hint disappears as soon as the user starts choosing a value.
+    const [interacted, setInteracted] = useState(false)
     const rangerRef = useRef<HTMLDivElement | null>(null)
 
     const rangerInstance = useRanger({
@@ -33,18 +42,26 @@ const OpacitySlider = ({
         stepSize: 0.1,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrag: (instance: any) => {
+            setInteracted(true)
             setValues(instance.sortedValues)
             handleOnDrag(instance.sortedValues)
         },
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onChange: (instance: any) => handleOnChange(instance.sortedValues),
+        onChange: (instance: any) => {
+            setInteracted(true)
+            handleOnChange(instance.sortedValues)
+        },
     })
 
     useEffect(() => {
-        const arr = currentOpacity ? [currentOpacity] : [0]
+        setInteracted(false)
+        // Mixed: rest the handle at the midpoint (neutral) since there's no
+        // single current value to show.
+        const arr = isMixed ? [0.5] : currentOpacity ? [currentOpacity] : [0]
         setValues(arr)
-    }, [currentOpacity])
+    }, [currentOpacity, isMixed])
 
+    const showMixed = isMixed && !interacted
     const firstValue = values[0] ?? 0
 
     return (
@@ -67,7 +84,9 @@ const OpacitySlider = ({
                             position: 'relative',
                             userSelect: 'none',
                             height: '4px',
-                            background: `linear-gradient(to right, #C4901A ${rangerInstance.getPercentageForValue(firstValue)}%, #ddd ${rangerInstance.getPercentageForValue(firstValue)}%)`,
+                            background: showMixed
+                                ? '#ddd'
+                                : `linear-gradient(to right, #C4901A ${rangerInstance.getPercentageForValue(firstValue)}%, #ddd ${rangerInstance.getPercentageForValue(firstValue)}%)`,
                             borderRadius: '2px',
                         }}
                     >
@@ -121,13 +140,16 @@ const OpacitySlider = ({
                                             whiteSpace: 'nowrap',
                                             pointerEvents: 'none',
                                             userSelect: 'none',
-                                            opacity:
-                                                value > 0.9 || value < 0.1
-                                                    ? 0
-                                                    : 1,
+                                            opacity: showMixed
+                                                ? 1
+                                                : value > 0.9 || value < 0.1
+                                                  ? 0
+                                                  : 1,
                                         }}
                                     >
-                                        {Math.round(value * 100)}
+                                        {showMixed
+                                            ? 'Mixed'
+                                            : Math.round(value * 100)}
                                     </span>
                                 </button>
                             )
diff --git a/src/hooks/useComponentHistory.ts b/src/hooks/useComponentHistory.ts
index 3996282..c21cece 100644
--- a/src/hooks/useComponentHistory.ts
+++ b/src/hooks/useComponentHistory.ts
@@ -153,6 +153,17 @@ function applyPropertyToTwoJSGroup(
                 clearDashesOnTwoJSShape(shape)
             }
             break
+        case 'opacity':
+            // Opacity persists in the top-level `opacity` field. Apply at the
+            // GROUP level (shape + text dim uniformly and repaint reliably) and
+            // neutralize the leaf/text so they don't compound with the group's
+            // opacity. Mirrors applyProperty and the *-with-text components.
+            group.opacity = value
+            shape.opacity = 1
+            if (textNodes.length > 0) {
+                textNodes.forEach((n: ShapeLike) => (n.opacity = 1))
+            }
+            break
         case 'metadata':
             if (
                 value &&
@@ -719,16 +730,9 @@ export function useComponentHistory({
                             (c: ShapeLike) => c?.elementData?.id === e.id
                         )
                         if (coreObj) {
-                            const isOpacityChange =
-                                'metadata' in propsToApply &&
-                                propsToApply.metadata &&
-                                typeof propsToApply.metadata === 'object' &&
-                                'opacity' in
-                                    (propsToApply.metadata as Record<
-                                        string,
-                                        unknown
-                                    >)
-                            if (isOpacityChange) coreObj.opacity = 1
+                            // Opacity persists top-level now; the case 'opacity'
+                            // in applyPropertyToTwoJSGroup sets coreObj.opacity,
+                            // so no pre-reset is needed here.
                             Object.entries(propsToApply).forEach(
                                 ([name, val]) => {
                                     applyPropertyToTwoJSGroup(
diff --git a/src/newCanvas.tsx b/src/newCanvas.tsx
index 54b79b3..82f06c3 100644
--- a/src/newCanvas.tsx
+++ b/src/newCanvas.tsx
@@ -1309,7 +1309,8 @@ function addZUI(
             iconStroke: null,
             isDummy: null,
             createdAt: null,
-            metadata: { opacity: 1 },
+            opacity: 1,
+            metadata: {},
             width: 100,
             height: 0,
             fill: 'transparent',
@@ -3883,6 +3884,18 @@ const Canvas: React.FC<CanvasProps> = (props) => {
         // it back on top so the active selection box stays visible.
         zuiInstanceRef.current?.bringSelectionToFront?.()
 
+        // An arrow's "selected" look is its two endpoint circles, shown while
+        // the arrow group's <g> holds DOM focus. The restack below detaches and
+        // re-appends that <g> to reorder it, which blurs the focused node and
+        // fires arrowLine's blur handler — hiding the circles even though the
+        // arrow is still the active selection. Capture the selected arrow now so
+        // we can re-assert its endpoints after the restack settles.
+        const selectedGroup = zuiInstanceRef.current?.getSelectedGroup?.()
+        const selectedArrow =
+            selectedGroup?.elementData?.componentType === 'arrowLine'
+                ? selectedGroup
+                : null
+
         try {
             two.update()
         } catch (err) {
@@ -3893,6 +3906,20 @@ const Canvas: React.FC<CanvasProps> = (props) => {
             scene.subtractions.length = 0
             scene._flagSubtractions = false
         }
+
+        // Re-show the endpoints AFTER the restack: the blur (and its own nested
+        // two.update) has already run during the update above, so setting them
+        // visible now and re-rendering sticks. The node is no longer focused, so
+        // this second update doesn't reorder and can't re-trigger the blur.
+        if (selectedArrow) {
+            setArrowEndpointsVisible(selectedArrow, true)
+            try {
+                two.update()
+            } catch {
+                scene.subtractions.length = 0
+                scene._flagSubtractions = false
+            }
+        }
     }, [twoJSInstance])
 
     // Element groups appear in the scene over several frames as their lazy
diff --git a/src/schema/generated.ts b/src/schema/generated.ts
index 058173e..1926aa5 100644
--- a/src/schema/generated.ts
+++ b/src/schema/generated.ts
@@ -33,6 +33,19 @@ export type Boolean_Comparison_Exp = {
   _nin?: InputMaybe<Array<Scalars['Boolean']['input']>>;
 };
 
+/** Boolean expression to compare columns of type "Float". All fields are combined with logical 'AND'. */
+export type Float_Comparison_Exp = {
+  _eq?: InputMaybe<Scalars['Float']['input']>;
+  _gt?: InputMaybe<Scalars['Float']['input']>;
+  _gte?: InputMaybe<Scalars['Float']['input']>;
+  _in?: InputMaybe<Array<Scalars['Float']['input']>>;
+  _is_null?: InputMaybe<Scalars['Boolean']['input']>;
+  _lt?: InputMaybe<Scalars['Float']['input']>;
+  _lte?: InputMaybe<Scalars['Float']['input']>;
+  _neq?: InputMaybe<Scalars['Float']['input']>;
+  _nin?: InputMaybe<Array<Scalars['Float']['input']>>;
+};
+
 /** Boolean expression to compare columns of type "Int". All fields are combined with logical 'AND'. */
 export type Int_Comparison_Exp = {
   _eq?: InputMaybe<Scalars['Int']['input']>;
@@ -540,6 +553,8 @@ export type Components_Component = {
   createdAt?: Maybe<Scalars['bigint']['output']>;
   createdBy: Scalars['String']['output'];
   fill: Scalars['String']['output'];
+  headEdge?: Maybe<Scalars['String']['output']>;
+  headShapeId?: Maybe<Scalars['uuid']['output']>;
   height: Scalars['float8']['output'];
   iconStroke?: Maybe<Scalars['String']['output']>;
   id: Scalars['uuid']['output'];
@@ -547,10 +562,13 @@ export type Components_Component = {
   linewidth?: Maybe<Scalars['float8']['output']>;
   metadata?: Maybe<Scalars['jsonb']['output']>;
   objectClass: Scalars['String']['output'];
+  opacity?: Maybe<Scalars['Float']['output']>;
   position: Scalars['Int']['output'];
   radius?: Maybe<Scalars['float8']['output']>;
   stroke?: Maybe<Scalars['String']['output']>;
   strokeType?: Maybe<Scalars['String']['output']>;
+  tailEdge?: Maybe<Scalars['String']['output']>;
+  tailShapeId?: Maybe<Scalars['uuid']['output']>;
   textColor?: Maybe<Scalars['String']['output']>;
   updatedBy?: Maybe<Scalars['String']['output']>;
   width: Scalars['float8']['output'];
@@ -942,6 +960,7 @@ export type Components_Component_Avg_Fields = {
   createdAt?: Maybe<Scalars['Float']['output']>;
   height?: Maybe<Scalars['Float']['output']>;
   linewidth?: Maybe<Scalars['Float']['output']>;
+  opacity?: Maybe<Scalars['Float']['output']>;
   position?: Maybe<Scalars['Float']['output']>;
   radius?: Maybe<Scalars['Float']['output']>;
   width?: Maybe<Scalars['Float']['output']>;
@@ -966,6 +985,8 @@ export type Components_Component_Bool_Exp = {
   createdAt?: InputMaybe<Bigint_Comparison_Exp>;
   createdBy?: InputMaybe<String_Comparison_Exp>;
   fill?: InputMaybe<String_Comparison_Exp>;
+  headEdge?: InputMaybe<String_Comparison_Exp>;
+  headShapeId?: InputMaybe<Uuid_Comparison_Exp>;
   height?: InputMaybe<Float8_Comparison_Exp>;
   iconStroke?: InputMaybe<String_Comparison_Exp>;
   id?: InputMaybe<Uuid_Comparison_Exp>;
@@ -973,10 +994,13 @@ export type Components_Component_Bool_Exp = {
   linewidth?: InputMaybe<Float8_Comparison_Exp>;
   metadata?: InputMaybe<Jsonb_Comparison_Exp>;
   objectClass?: InputMaybe<String_Comparison_Exp>;
+  opacity?: InputMaybe<Float_Comparison_Exp>;
   position?: InputMaybe<Int_Comparison_Exp>;
   radius?: InputMaybe<Float8_Comparison_Exp>;
   stroke?: InputMaybe<String_Comparison_Exp>;
   strokeType?: InputMaybe<String_Comparison_Exp>;
+  tailEdge?: InputMaybe<String_Comparison_Exp>;
+  tailShapeId?: InputMaybe<Uuid_Comparison_Exp>;
   textColor?: InputMaybe<String_Comparison_Exp>;
   updatedBy?: InputMaybe<String_Comparison_Exp>;
   width?: InputMaybe<Float8_Comparison_Exp>;
@@ -1018,6 +1042,7 @@ export type Components_Component_Inc_Input = {
   createdAt?: InputMaybe<Scalars['bigint']['input']>;
   height?: InputMaybe<Scalars['float8']['input']>;
   linewidth?: InputMaybe<Scalars['float8']['input']>;
+  opacity?: InputMaybe<Scalars['Float']['input']>;
   position?: InputMaybe<Scalars['Int']['input']>;
   radius?: InputMaybe<Scalars['float8']['input']>;
   width?: InputMaybe<Scalars['float8']['input']>;
@@ -1039,6 +1064,8 @@ export type Components_Component_Insert_Input = {
   createdAt?: InputMaybe<Scalars['bigint']['input']>;
   createdBy?: InputMaybe<Scalars['String']['input']>;
   fill?: InputMaybe<Scalars['String']['input']>;
+  headEdge?: InputMaybe<Scalars['String']['input']>;
+  headShapeId?: InputMaybe<Scalars['uuid']['input']>;
   height?: InputMaybe<Scalars['float8']['input']>;
   iconStroke?: InputMaybe<Scalars['String']['input']>;
   id?: InputMaybe<Scalars['uuid']['input']>;
@@ -1046,10 +1073,13 @@ export type Components_Component_Insert_Input = {
   linewidth?: InputMaybe<Scalars['float8']['input']>;
   metadata?: InputMaybe<Scalars['jsonb']['input']>;
   objectClass?: InputMaybe<Scalars['String']['input']>;
+  opacity?: InputMaybe<Scalars['Float']['input']>;
   position?: InputMaybe<Scalars['Int']['input']>;
   radius?: InputMaybe<Scalars['float8']['input']>;
   stroke?: InputMaybe<Scalars['String']['input']>;
   strokeType?: InputMaybe<Scalars['String']['input']>;
+  tailEdge?: InputMaybe<Scalars['String']['input']>;
+  tailShapeId?: InputMaybe<Scalars['uuid']['input']>;
   textColor?: InputMaybe<Scalars['String']['input']>;
   updatedBy?: InputMaybe<Scalars['String']['input']>;
   width?: InputMaybe<Scalars['float8']['input']>;
@@ -1070,15 +1100,20 @@ export type Components_Component_Max_Fields = {
   createdAt?: Maybe<Scalars['bigint']['output']>;
   createdBy?: Maybe<Scalars['String']['output']>;
   fill?: Maybe<Scalars['String']['output']>;
+  headEdge?: Maybe<Scalars['String']['output']>;
+  headShapeId?: Maybe<Scalars['uuid']['output']>;
   height?: Maybe<Scalars['float8']['output']>;
   iconStroke?: Maybe<Scalars['String']['output']>;
   id?: Maybe<Scalars['uuid']['output']>;
   linewidth?: Maybe<Scalars['float8']['output']>;
   objectClass?: Maybe<Scalars['String']['output']>;
+  opacity?: Maybe<Scalars['Float']['output']>;
   position?: Maybe<Scalars['Int']['output']>;
   radius?: Maybe<Scalars['float8']['output']>;
   stroke?: Maybe<Scalars['String']['output']>;
   strokeType?: Maybe<Scalars['String']['output']>;
+  tailEdge?: Maybe<Scalars['String']['output']>;
+  tailShapeId?: Maybe<Scalars['uuid']['output']>;
   textColor?: Maybe<Scalars['String']['output']>;
   updatedBy?: Maybe<Scalars['String']['output']>;
   width?: Maybe<Scalars['float8']['output']>;
@@ -1099,15 +1134,20 @@ export type Components_Component_Min_Fields = {
   createdAt?: Maybe<Scalars['bigint']['output']>;
   createdBy?: Maybe<Scalars['String']['output']>;
   fill?: Maybe<Scalars['String']['output']>;
+  headEdge?: Maybe<Scalars['String']['output']>;
+  headShapeId?: Maybe<Scalars['uuid']['output']>;
   height?: Maybe<Scalars['float8']['output']>;
   iconStroke?: Maybe<Scalars['String']['output']>;
   id?: Maybe<Scalars['uuid']['output']>;
   linewidth?: Maybe<Scalars['float8']['output']>;
   objectClass?: Maybe<Scalars['String']['output']>;
+  opacity?: Maybe<Scalars['Float']['output']>;
   position?: Maybe<Scalars['Int']['output']>;
   radius?: Maybe<Scalars['float8']['output']>;
   stroke?: Maybe<Scalars['String']['output']>;
   strokeType?: Maybe<Scalars['String']['output']>;
+  tailEdge?: Maybe<Scalars['String']['output']>;
+  tailShapeId?: Maybe<Scalars['uuid']['output']>;
   textColor?: Maybe<Scalars['String']['output']>;
   updatedBy?: Maybe<Scalars['String']['output']>;
   width?: Maybe<Scalars['float8']['output']>;
@@ -1145,6 +1185,8 @@ export type Components_Component_Order_By = {
   createdAt?: InputMaybe<Order_By>;
   createdBy?: InputMaybe<Order_By>;
   fill?: InputMaybe<Order_By>;
+  headEdge?: InputMaybe<Order_By>;
+  headShapeId?: InputMaybe<Order_By>;
   height?: InputMaybe<Order_By>;
   iconStroke?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
@@ -1152,10 +1194,13 @@ export type Components_Component_Order_By = {
   linewidth?: InputMaybe<Order_By>;
   metadata?: InputMaybe<Order_By>;
   objectClass?: InputMaybe<Order_By>;
+  opacity?: InputMaybe<Order_By>;
   position?: InputMaybe<Order_By>;
   radius?: InputMaybe<Order_By>;
   stroke?: InputMaybe<Order_By>;
   strokeType?: InputMaybe<Order_By>;
+  tailEdge?: InputMaybe<Order_By>;
+  tailShapeId?: InputMaybe<Order_By>;
   textColor?: InputMaybe<Order_By>;
   updatedBy?: InputMaybe<Order_By>;
   width?: InputMaybe<Order_By>;
@@ -1195,6 +1240,10 @@ export type Components_Component_Select_Column =
   /** column name */
   | 'fill'
   /** column name */
+  | 'headEdge'
+  /** column name */
+  | 'headShapeId'
+  /** column name */
   | 'height'
   /** column name */
   | 'iconStroke'
@@ -1209,6 +1258,8 @@ export type Components_Component_Select_Column =
   /** column name */
   | 'objectClass'
   /** column name */
+  | 'opacity'
+  /** column name */
   | 'position'
   /** column name */
   | 'radius'
@@ -1217,6 +1268,10 @@ export type Components_Component_Select_Column =
   /** column name */
   | 'strokeType'
   /** column name */
+  | 'tailEdge'
+  /** column name */
+  | 'tailShapeId'
+  /** column name */
   | 'textColor'
   /** column name */
   | 'updatedBy'
@@ -1244,6 +1299,8 @@ export type Components_Component_Set_Input = {
   createdAt?: InputMaybe<Scalars['bigint']['input']>;
   createdBy?: InputMaybe<Scalars['String']['input']>;
   fill?: InputMaybe<Scalars['String']['input']>;
+  headEdge?: InputMaybe<Scalars['String']['input']>;
+  headShapeId?: InputMaybe<Scalars['uuid']['input']>;
   height?: InputMaybe<Scalars['float8']['input']>;
   iconStroke?: InputMaybe<Scalars['String']['input']>;
   id?: InputMaybe<Scalars['uuid']['input']>;
@@ -1251,10 +1308,13 @@ export type Components_Component_Set_Input = {
   linewidth?: InputMaybe<Scalars['float8']['input']>;
   metadata?: InputMaybe<Scalars['jsonb']['input']>;
   objectClass?: InputMaybe<Scalars['String']['input']>;
+  opacity?: InputMaybe<Scalars['Float']['input']>;
   position?: InputMaybe<Scalars['Int']['input']>;
   radius?: InputMaybe<Scalars['float8']['input']>;
   stroke?: InputMaybe<Scalars['String']['input']>;
   strokeType?: InputMaybe<Scalars['String']['input']>;
+  tailEdge?: InputMaybe<Scalars['String']['input']>;
+  tailShapeId?: InputMaybe<Scalars['uuid']['input']>;
   textColor?: InputMaybe<Scalars['String']['input']>;
   updatedBy?: InputMaybe<Scalars['String']['input']>;
   width?: InputMaybe<Scalars['float8']['input']>;
@@ -1272,6 +1332,7 @@ export type Components_Component_Stddev_Fields = {
   createdAt?: Maybe<Scalars['Float']['output']>;
   height?: Maybe<Scalars['Float']['output']>;
   linewidth?: Maybe<Scalars['Float']['output']>;
+  opacity?: Maybe<Scalars['Float']['output']>;
   position?: Maybe<Scalars['Float']['output']>;
   radius?: Maybe<Scalars['Float']['output']>;
   width?: Maybe<Scalars['Float']['output']>;
@@ -1289,6 +1350,7 @@ export type Components_Component_Stddev_Pop_Fields = {
   createdAt?: Maybe<Scalars['Float']['output']>;
   height?: Maybe<Scalars['Float']['output']>;
   linewidth?: Maybe<Scalars['Float']['output']>;
+  opacity?: Maybe<Scalars['Float']['output']>;
   position?: Maybe<Scalars['Float']['output']>;
   radius?: Maybe<Scalars['Float']['output']>;
   width?: Maybe<Scalars['Float']['output']>;
@@ -1306,6 +1368,7 @@ export type Components_Component_Stddev_Samp_Fields = {
   createdAt?: Maybe<Scalars['Float']['output']>;
   height?: Maybe<Scalars['Float']['output']>;
   linewidth?: Maybe<Scalars['Float']['output']>;
+  opacity?: Maybe<Scalars['Float']['output']>;
   position?: Maybe<Scalars['Float']['output']>;
   radius?: Maybe<Scalars['Float']['output']>;
   width?: Maybe<Scalars['Float']['output']>;
@@ -1334,6 +1397,8 @@ export type Components_Component_Stream_Cursor_Value_Input = {
   createdAt?: InputMaybe<Scalars['bigint']['input']>;
   createdBy?: InputMaybe<Scalars['String']['input']>;
   fill?: InputMaybe<Scalars['String']['input']>;
+  headEdge?: InputMaybe<Scalars['String']['input']>;
+  headShapeId?: InputMaybe<Scalars['uuid']['input']>;
   height?: InputMaybe<Scalars['float8']['input']>;
   iconStroke?: InputMaybe<Scalars['String']['input']>;
   id?: InputMaybe<Scalars['uuid']['input']>;
@@ -1341,10 +1406,13 @@ export type Components_Component_Stream_Cursor_Value_Input = {
   linewidth?: InputMaybe<Scalars['float8']['input']>;
   metadata?: InputMaybe<Scalars['jsonb']['input']>;
   objectClass?: InputMaybe<Scalars['String']['input']>;
+  opacity?: InputMaybe<Scalars['Float']['input']>;
   position?: InputMaybe<Scalars['Int']['input']>;
   radius?: InputMaybe<Scalars['float8']['input']>;
   stroke?: InputMaybe<Scalars['String']['input']>;
   strokeType?: InputMaybe<Scalars['String']['input']>;
+  tailEdge?: InputMaybe<Scalars['String']['input']>;
+  tailShapeId?: InputMaybe<Scalars['uuid']['input']>;
   textColor?: InputMaybe<Scalars['String']['input']>;
   updatedBy?: InputMaybe<Scalars['String']['input']>;
   width?: InputMaybe<Scalars['float8']['input']>;
@@ -1362,6 +1430,7 @@ export type Components_Component_Sum_Fields = {
   createdAt?: Maybe<Scalars['bigint']['output']>;
   height?: Maybe<Scalars['float8']['output']>;
   linewidth?: Maybe<Scalars['float8']['output']>;
+  opacity?: Maybe<Scalars['Float']['output']>;
   position?: Maybe<Scalars['Int']['output']>;
   radius?: Maybe<Scalars['float8']['output']>;
   width?: Maybe<Scalars['float8']['output']>;
@@ -1390,6 +1459,10 @@ export type Components_Component_Update_Column =
   /** column name */
   | 'fill'
   /** column name */
+  | 'headEdge'
+  /** column name */
+  | 'headShapeId'
+  /** column name */
   | 'height'
   /** column name */
   | 'iconStroke'
@@ -1404,6 +1477,8 @@ export type Components_Component_Update_Column =
   /** column name */
   | 'objectClass'
   /** column name */
+  | 'opacity'
+  /** column name */
   | 'position'
   /** column name */
   | 'radius'
@@ -1412,6 +1487,10 @@ export type Components_Component_Update_Column =
   /** column name */
   | 'strokeType'
   /** column name */
+  | 'tailEdge'
+  /** column name */
+  | 'tailShapeId'
+  /** column name */
   | 'textColor'
   /** column name */
   | 'updatedBy'
@@ -1455,6 +1534,7 @@ export type Components_Component_Var_Pop_Fields = {
   createdAt?: Maybe<Scalars['Float']['output']>;
   height?: Maybe<Scalars['Float']['output']>;
   linewidth?: Maybe<Scalars['Float']['output']>;
+  opacity?: Maybe<Scalars['Float']['output']>;
   position?: Maybe<Scalars['Float']['output']>;
   radius?: Maybe<Scalars['Float']['output']>;
   width?: Maybe<Scalars['Float']['output']>;
@@ -1472,6 +1552,7 @@ export type Components_Component_Var_Samp_Fields = {
   createdAt?: Maybe<Scalars['Float']['output']>;
   height?: Maybe<Scalars['Float']['output']>;
   linewidth?: Maybe<Scalars['Float']['output']>;
+  opacity?: Maybe<Scalars['Float']['output']>;
   position?: Maybe<Scalars['Float']['output']>;
   radius?: Maybe<Scalars['Float']['output']>;
   width?: Maybe<Scalars['Float']['output']>;
@@ -1489,6 +1570,7 @@ export type Components_Component_Variance_Fields = {
   createdAt?: Maybe<Scalars['Float']['output']>;
   height?: Maybe<Scalars['Float']['output']>;
   linewidth?: Maybe<Scalars['Float']['output']>;
+  opacity?: Maybe<Scalars['Float']['output']>;
   position?: Maybe<Scalars['Float']['output']>;
   radius?: Maybe<Scalars['Float']['output']>;
   width?: Maybe<Scalars['Float']['output']>;
@@ -3503,14 +3585,14 @@ export type GetComponentsForBoardQueryVariables = Exact<{
 }>;
 
 
-export type GetComponentsForBoardQuery = { __typename?: 'query_root', components: Array<{ __typename?: 'components_component', id: string, componentType: string, objectClass: string, children?: unknown | null, metadata?: unknown | null, x: any, x1: any, x2: any, y: any, y1: any, y2: any, fill: string, width: any, height: any, iconStroke?: string | null, stroke?: string | null, linewidth?: any | null, strokeType?: string | null, textColor?: string | null }> };
+export type GetComponentsForBoardQuery = { __typename?: 'query_root', components: Array<{ __typename?: 'components_component', id: string, componentType: string, objectClass: string, children?: unknown | null, metadata?: unknown | null, x: any, x1: any, x2: any, y: any, y1: any, y2: any, fill: string, width: any, height: any, iconStroke?: string | null, stroke?: string | null, linewidth?: any | null, strokeType?: string | null, textColor?: string | null, opacity?: number | null, position: number }> };
 
 export type GetComponentInfoQueryQueryVariables = Exact<{
   id?: InputMaybe<Scalars['uuid']['input']>;
 }>;
 
 
-export type GetComponentInfoQueryQuery = { __typename?: 'query_root', component?: { __typename?: 'components_component', metadata?: unknown | null, width: any, height: any, fill: string, id: string, stroke?: string | null, linewidth?: any | null, strokeType?: string | null, x: any, y: any, x1: any, y1: any, x2: any, y2: any, componentType: string, children?: unknown | null, updatedBy?: string | null, iconStroke?: string | null, textColor?: string | null } | null };
+export type GetComponentInfoQueryQuery = { __typename?: 'query_root', component?: { __typename?: 'components_component', metadata?: unknown | null, width: any, height: any, fill: string, id: string, stroke?: string | null, linewidth?: any | null, strokeType?: string | null, x: any, y: any, x1: any, y1: any, x2: any, y2: any, componentType: string, children?: unknown | null, updatedBy?: string | null, iconStroke?: string | null, textColor?: string | null, opacity?: number | null } | null };
 
 export type GetBoardComponentsQueryVariables = Exact<{
   boardId?: Scalars['uuid']['input'];
@@ -3560,8 +3642,8 @@ export const UpdateBoardVisibilityDocument = {"kind":"Document","definitions":[{
 export const UpdateUserRevisitCountDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"updateUserRevisitCount"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lastVisit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"timestamptz"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"update_users_user_revisits_by_pk"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pk_columns"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"user_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"userId"}}}]}},{"kind":"Argument","name":{"kind":"Name","value":"_inc"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"count"},"value":{"kind":"StringValue","value":"1","block":false}}]}},{"kind":"Argument","name":{"kind":"Name","value":"_set"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"last_visit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lastVisit"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}},{"kind":"Field","name":{"kind":"Name","value":"user_id"}},{"kind":"Field","name":{"kind":"Name","value":"last_visit"}}]}}]}}]} as unknown as DocumentNode<UpdateUserRevisitCountMutation, UpdateUserRevisitCountMutationVariables>;
 export const MyQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MyQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"users"},"name":{"kind":"Name","value":"users_user"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<MyQueryQuery, MyQueryQueryVariables>;
 export const GetComponentTypesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getComponentTypes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"componentTypes"},"name":{"kind":"Name","value":"components_componentType"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"metadata"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}},{"kind":"Field","name":{"kind":"Name","value":"fill"}},{"kind":"Field","name":{"kind":"Name","value":"textColor"}}]}}]}}]} as unknown as DocumentNode<GetComponentTypesQuery, GetComponentTypesQueryVariables>;
-export const GetComponentsForBoardDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getComponentsForBoard"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"boardId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"components"},"name":{"kind":"Name","value":"components_component"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"boardId"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"boardId"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"componentType"}},{"kind":"Field","name":{"kind":"Name","value":"objectClass"}},{"kind":"Field","name":{"kind":"Name","value":"children"}},{"kind":"Field","name":{"kind":"Name","value":"metadata"}},{"kind":"Field","name":{"kind":"Name","value":"x"}},{"kind":"Field","name":{"kind":"Name","value":"x1"}},{"kind":"Field","name":{"kind":"Name","value":"x2"}},{"kind":"Field","name":{"kind":"Name","value":"y"}},{"kind":"Field","name":{"kind":"Name","value":"y1"}},{"kind":"Field","name":{"kind":"Name","value":"y2"}},{"kind":"Field","name":{"kind":"Name","value":"fill"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}},{"kind":"Field","name":{"kind":"Name","value":"iconStroke"}},{"kind":"Field","name":{"kind":"Name","value":"stroke"}},{"kind":"Field","name":{"kind":"Name","value":"linewidth"}},{"kind":"Field","name":{"kind":"Name","value":"strokeType"}},{"kind":"Field","name":{"kind":"Name","value":"textColor"}}]}}]}}]} as unknown as DocumentNode<GetComponentsForBoardQuery, GetComponentsForBoardQueryVariables>;
-export const GetComponentInfoQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getComponentInfoQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"component"},"name":{"kind":"Name","value":"components_component_by_pk"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"metadata"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}},{"kind":"Field","name":{"kind":"Name","value":"fill"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"stroke"}},{"kind":"Field","name":{"kind":"Name","value":"linewidth"}},{"kind":"Field","name":{"kind":"Name","value":"strokeType"}},{"kind":"Field","name":{"kind":"Name","value":"x"}},{"kind":"Field","name":{"kind":"Name","value":"y"}},{"kind":"Field","name":{"kind":"Name","value":"x1"}},{"kind":"Field","name":{"kind":"Name","value":"y1"}},{"kind":"Field","name":{"kind":"Name","value":"x2"}},{"kind":"Field","name":{"kind":"Name","value":"y2"}},{"kind":"Field","name":{"kind":"Name","value":"componentType"}},{"kind":"Field","name":{"kind":"Name","value":"children"}},{"kind":"Field","name":{"kind":"Name","value":"updatedBy"}},{"kind":"Field","name":{"kind":"Name","value":"iconStroke"}},{"kind":"Field","name":{"kind":"Name","value":"textColor"}}]}}]}}]} as unknown as DocumentNode<GetComponentInfoQueryQuery, GetComponentInfoQueryQueryVariables>;
+export const GetComponentsForBoardDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getComponentsForBoard"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"boardId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"components"},"name":{"kind":"Name","value":"components_component"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"boardId"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"boardId"}}}]}}]}},{"kind":"Argument","name":{"kind":"Name","value":"order_by"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"position"},"value":{"kind":"EnumValue","value":"asc"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"componentType"}},{"kind":"Field","name":{"kind":"Name","value":"objectClass"}},{"kind":"Field","name":{"kind":"Name","value":"children"}},{"kind":"Field","name":{"kind":"Name","value":"metadata"}},{"kind":"Field","name":{"kind":"Name","value":"x"}},{"kind":"Field","name":{"kind":"Name","value":"x1"}},{"kind":"Field","name":{"kind":"Name","value":"x2"}},{"kind":"Field","name":{"kind":"Name","value":"y"}},{"kind":"Field","name":{"kind":"Name","value":"y1"}},{"kind":"Field","name":{"kind":"Name","value":"y2"}},{"kind":"Field","name":{"kind":"Name","value":"fill"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}},{"kind":"Field","name":{"kind":"Name","value":"iconStroke"}},{"kind":"Field","name":{"kind":"Name","value":"stroke"}},{"kind":"Field","name":{"kind":"Name","value":"linewidth"}},{"kind":"Field","name":{"kind":"Name","value":"strokeType"}},{"kind":"Field","name":{"kind":"Name","value":"textColor"}},{"kind":"Field","name":{"kind":"Name","value":"opacity"}},{"kind":"Field","name":{"kind":"Name","value":"position"}}]}}]}}]} as unknown as DocumentNode<GetComponentsForBoardQuery, GetComponentsForBoardQueryVariables>;
+export const GetComponentInfoQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getComponentInfoQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"component"},"name":{"kind":"Name","value":"components_component_by_pk"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"metadata"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}},{"kind":"Field","name":{"kind":"Name","value":"fill"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"stroke"}},{"kind":"Field","name":{"kind":"Name","value":"linewidth"}},{"kind":"Field","name":{"kind":"Name","value":"strokeType"}},{"kind":"Field","name":{"kind":"Name","value":"x"}},{"kind":"Field","name":{"kind":"Name","value":"y"}},{"kind":"Field","name":{"kind":"Name","value":"x1"}},{"kind":"Field","name":{"kind":"Name","value":"y1"}},{"kind":"Field","name":{"kind":"Name","value":"x2"}},{"kind":"Field","name":{"kind":"Name","value":"y2"}},{"kind":"Field","name":{"kind":"Name","value":"componentType"}},{"kind":"Field","name":{"kind":"Name","value":"children"}},{"kind":"Field","name":{"kind":"Name","value":"updatedBy"}},{"kind":"Field","name":{"kind":"Name","value":"iconStroke"}},{"kind":"Field","name":{"kind":"Name","value":"textColor"}},{"kind":"Field","name":{"kind":"Name","value":"opacity"}}]}}]}}]} as unknown as DocumentNode<GetComponentInfoQueryQuery, GetComponentInfoQueryQueryVariables>;
 export const GetBoardComponentsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getBoardComponents"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"boardId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"components"},"name":{"kind":"Name","value":"components_component"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"boardId"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"boardId"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"componentType"}}]}}]}}]} as unknown as DocumentNode<GetBoardComponentsQuery, GetBoardComponentsQueryVariables>;
 export const UserDetailsSubscriptionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"userDetailsSubscription"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"users"},"name":{"kind":"Name","value":"users_user"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<UserDetailsSubscriptionSubscription, UserDetailsSubscriptionSubscriptionVariables>;
 export const GetBoardComponentsSubscriptionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"getBoardComponentsSubscription"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"boardId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"components"},"name":{"kind":"Name","value":"components_component"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"boardId"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"boardId"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"componentType"}}]}}]}}]} as unknown as DocumentNode<GetBoardComponentsSubscriptionSubscription, GetBoardComponentsSubscriptionSubscriptionVariables>;
diff --git a/src/schema/queries/index.ts b/src/schema/queries/index.ts
index c495df4..f12e9b1 100644
--- a/src/schema/queries/index.ts
+++ b/src/schema/queries/index.ts
@@ -70,6 +70,7 @@ export const GET_COMPONENTS_FOR_BOARD_QUERY: TypedDocumentNode<
             linewidth
             strokeType
             textColor
+            opacity
             position
         }
     }
@@ -100,6 +101,7 @@ export const GET_COMPONENT_INFO_QUERY: TypedDocumentNode<
             updatedBy
             iconStroke
             textColor
+            opacity
         }
     }
 `
diff --git a/src/types/board.ts b/src/types/board.ts
index 4974741..f400510 100644
--- a/src/types/board.ts
+++ b/src/types/board.ts
@@ -239,6 +239,10 @@ export interface BoardContextValue {
     // until Canvas has mounted and populated it.
     reorderSelected: (op: 'front' | 'forward' | 'backward' | 'back') => void
 
+    // True while a selected element/group is being dragged or resized — the
+    // properties toolbar hides itself so it doesn't overlap the element.
+    isElementDragging: boolean
+
     // Element defaults (read sites: ElementPropertiesToolbar, primary sidebar, factories)
     defaultFill: string
     defaultStrokeColor: string
diff --git a/src/utils/applyGroupProperty.ts b/src/utils/applyGroupProperty.ts
index 797eefe..e535beb 100644
--- a/src/utils/applyGroupProperty.ts
+++ b/src/utils/applyGroupProperty.ts
@@ -1,5 +1,12 @@
 import type { MutableRefObject } from 'react'
 import { strokeTypeToDashes, clearDashesOnTwoJSShape } from './misc'
+import {
+    applyShapeText,
+    layoutStandaloneText,
+    shapeTextStyleFromMeta,
+    readOpacity,
+} from './canvasUtils'
+import { reflowTextForShape } from './shapeTextFit'
 
 // Bulk-apply a property to every child of the currently-focused group whose
 // element type accepts that property. Element types that don't accept the
@@ -91,8 +98,10 @@ const ACCEPTS: Record<GroupPropertyKey, Set<string>> = {
         'divider',
         'pencil',
     ]),
-    // Pencil opacity unsupported: pencil's metadata is the vertex array, so
-    // the metadata.opacity slot collides with the array shape on group blur.
+    // Pencil's metadata IS its vertex array, so opacity can't live in
+    // `metadata.opacity` like every other type (it would clobber the points).
+    // Pencil therefore persists opacity in a top-level `opacity` field instead
+    // — see the pencil branch in the opacity handler below.
     opacity: new Set([
         'rectangle',
         'circle',
@@ -101,6 +110,7 @@ const ACCEPTS: Record<GroupPropertyKey, Set<string>> = {
         'arrowLine',
         'newText',
         'geoText',
+        'pencil',
     ]),
     // rectangle, diamond AND circle all carry text the same way (see
     // applyShapeText / the *-with-text components), so a group text edit
@@ -112,13 +122,7 @@ const ACCEPTS: Record<GroupPropertyKey, Set<string>> = {
         'diamond',
         'circle',
     ]),
-    textSize: new Set([
-        'newText',
-        'geoText',
-        'rectangle',
-        'diamond',
-        'circle',
-    ]),
+    textSize: new Set(['newText', 'geoText', 'rectangle', 'diamond', 'circle']),
     textFontFamily: new Set([
         'newText',
         'geoText',
@@ -223,11 +227,6 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) {
         if (!acceptSet) return
 
         const batchEntries: HistoryBatchEntry[] = []
-        const rectsToGrow: Array<{
-            id: string
-            sceneEl: ShapeLike | undefined
-            coreObj: ShapeLike | null
-        }> = []
 
         const snapshotPrev = (
             id: string,
@@ -236,7 +235,12 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) {
             const current = stateRefForComponentStore?.current?.[id] ?? {}
             const prev: Partial<ComponentRow> = {}
             keys.forEach((k) => {
-                if (current[k] !== undefined) prev[k] = current[k]
+                let v = current[k]
+                // Opacity is unset until first edited; its effective prior value
+                // is fully opaque (or a legacy metadata.opacity). Capture that so
+                // undo of the first opacity change restores it.
+                if (v === undefined && k === 'opacity') v = readOpacity(current)
+                if (v !== undefined) prev[k] = v
             })
             return prev
         }
@@ -282,9 +286,7 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) {
                 // this by targeting the shape leaf, not the group.)
                 const sceneTexts = findTextNodesInside(sceneEl)
                 const coreTexts = findTextNodesInside(coreObj)
-                const sceneTextValues = sceneTexts.map(
-                    (t) => t?.[propertyKey]
-                )
+                const sceneTextValues = sceneTexts.map((t) => t?.[propertyKey])
                 const coreTextValues = coreTexts.map((t) => t?.[propertyKey])
 
                 applyToTwoShape(sceneEl, propertyKey, value)
@@ -321,32 +323,34 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) {
             }
 
             if (propertyKey === 'opacity') {
+                // Apply at GROUP level (mirrors the single-element path) so the
+                // value can't compound with the group-level opacity that
+                // revealMembers restores when the group is dismissed. The old
+                // code pre-staged the value on the hidden original's LEAF, then
+                // reveal set the GROUP opacity to the same value — leaf × group
+                // = value² (a 50% edit rendered as 25% after ungrouping). The
+                // hidden original stays hidden (its group opacity is 0 under the
+                // overlay); we only normalise its leaf/text to 1 so the value
+                // reveal sets later is exact. The visible overlay copy is dimmed
+                // at its own group level so the user sees the change live.
                 const sceneLeaf = sceneEl?.children?.[0]
-                if (sceneLeaf) sceneLeaf.opacity = value
-                // Dim embedded text alongside the shape leaf (rect/diamond/
-                // circle-with-text keep text in a separate text-layer node).
-                findTextNodesInside(sceneEl).forEach((t) => (t.opacity = value))
+                if (sceneLeaf) sceneLeaf.opacity = 1
+                findTextNodesInside(sceneEl).forEach((t) => (t.opacity = 1))
                 if (coreObj) {
-                    coreObj.opacity = 1
+                    coreObj.opacity = value
                     const coreLeaf = coreObj?.children?.[0]
-                    if (coreLeaf) coreLeaf.opacity = value
-                    findTextNodesInside(coreObj).forEach(
-                        (t) => (t.opacity = value)
-                    )
+                    if (coreLeaf) coreLeaf.opacity = 1
+                    findTextNodesInside(coreObj).forEach((t) => (t.opacity = 1))
                 }
                 // Live drag preview: scene only, defer the store/history write
                 // to the commit on release.
                 if (opts?.preview) return
-                const existingMeta = sceneEl?.elementData?.metadata
-                const safeMeta =
-                    existingMeta && !Array.isArray(existingMeta)
-                        ? existingMeta
-                        : {}
-                const updatedMeta = { ...safeMeta, opacity: value }
-                if (sceneEl?.elementData)
-                    sceneEl.elementData.metadata = updatedMeta
-                child.metadata = updatedMeta
-                recordChild(id, { metadata: updatedMeta })
+                // Opacity persists in the top-level `opacity` column for every
+                // element type (unified — pencil's metadata is its vertex array
+                // and the rest were migrated off metadata.opacity).
+                if (sceneEl?.elementData) sceneEl.elementData.opacity = value
+                child.opacity = value
+                recordChild(id, { opacity: value })
                 return
             }
 
@@ -405,29 +409,13 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) {
                 propertyKey === 'textSize' ||
                 propertyKey === 'textFontFamily'
             ) {
-                const sceneTexts = sceneEl
-                    ? findTextNodesInside(sceneEl)
-                    : []
-                const coreTexts = coreObj
-                    ? findTextNodesInside(coreObj)
-                    : []
-                if (
-                    (type === 'rectangle' ||
-                        type === 'diamond' ||
-                        type === 'circle') &&
-                    sceneTexts.length === 0 &&
-                    coreTexts.length === 0 &&
-                    !child?.metadata?.hasText
-                ) {
-                    return
-                }
+                const sceneTexts = sceneEl ? findTextNodesInside(sceneEl) : []
+                const coreTexts = coreObj ? findTextNodesInside(coreObj) : []
                 const metaKey =
                     propertyKey === 'textSize'
                         ? 'textFontSize'
                         : 'textFontFamily'
                 const twoKey = propertyKey === 'textSize' ? 'size' : 'family'
-                sceneTexts.forEach((t) => (t[twoKey] = value))
-                coreTexts.forEach((t) => (t[twoKey] = value))
                 const existingMeta =
                     sceneEl?.elementData?.metadata &&
                     !Array.isArray(sceneEl.elementData.metadata)
@@ -436,19 +424,150 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) {
                           ? child.metadata
                           : {}
                 const updatedMeta = { ...existingMeta, [metaKey]: value }
-                if (sceneEl?.elementData)
-                    sceneEl.elementData.metadata = updatedMeta
-                child.metadata = updatedMeta
-                recordChild(id, { metadata: updatedMeta })
 
+                if (type === 'newText' || type === 'geoText') {
+                    // Standalone text has no container box to fit — just restyle
+                    // every line node. A size change also changes the per-line
+                    // vertical offset, so re-lay the stack out (matching how the
+                    // newText component re-spaces its lines) to keep them from
+                    // overlapping. Rebuild the content string from the live line
+                    // nodes rather than trusting `metadata.content` (which can be
+                    // absent) so the re-layout never collapses the text.
+                    sceneTexts.forEach((t) => (t[twoKey] = value))
+                    coreTexts.forEach((t) => (t[twoKey] = value))
+                    if (propertyKey === 'textSize') {
+                        const lineSource =
+                            coreTexts.length > 0 ? coreTexts : sceneTexts
+                        const content =
+                            lineSource.length > 0
+                                ? lineSource
+                                      .map((n) => n.value ?? '')
+                                      .join('\n')
+                                : (updatedMeta.content ?? '')
+                        if (sceneEl)
+                            layoutStandaloneText(
+                                twoJSInstance,
+                                sceneEl,
+                                content,
+                                value
+                            )
+                        if (coreObj)
+                            layoutStandaloneText(
+                                twoJSInstance,
+                                coreObj,
+                                content,
+                                value
+                            )
+                    }
+                    if (sceneEl?.elementData)
+                        sceneEl.elementData.metadata = updatedMeta
+                    child.metadata = updatedMeta
+                    recordChild(id, { metadata: updatedMeta })
+                    return
+                }
+
+                // rectangle / diamond / circle with embedded text.
                 if (
-                    (type === 'rectangle' ||
-                        type === 'diamond' ||
-                        type === 'circle') &&
-                    (sceneTexts.length > 0 || coreTexts.length > 0)
+                    sceneTexts.length === 0 &&
+                    coreTexts.length === 0 &&
+                    !child?.metadata?.hasText
                 ) {
-                    rectsToGrow.push({ id, sceneEl, coreObj })
+                    return
+                }
+
+                // Reflow the embedded text to the shape's CURRENT (fixed) width
+                // with the new size/family so it wraps inside the box instead of
+                // spilling out — never widen the box. Widening would break the
+                // group's relative horizontal spacing (shapes laid out side by
+                // side would overlap). Then grow ONLY the height to fit the
+                // reflowed block (`reflowTextForShape.requiredHeight`), which
+                // keeps every x-position untouched. This mirrors the single
+                // element resize/reflow path (canvasUtils.applyShapeText +
+                // shapeTextFit) instead of the old getBBox width-grow.
+                const storeRow = stateRefForComponentStore?.current?.[id]
+                const width =
+                    storeRow?.width ??
+                    child?.width ??
+                    sceneEl?.children?.[0]?.width ??
+                    coreObj?.children?.[0]?.width ??
+                    120
+                const currentH =
+                    storeRow?.height ??
+                    child?.height ??
+                    sceneEl?.children?.[0]?.height ??
+                    coreObj?.children?.[0]?.height ??
+                    0
+
+                if (sceneEl)
+                    applyShapeText(
+                        twoJSInstance,
+                        sceneEl,
+                        type,
+                        width,
+                        updatedMeta
+                    )
+                if (coreObj)
+                    applyShapeText(
+                        twoJSInstance,
+                        coreObj,
+                        type,
+                        width,
+                        updatedMeta
+                    )
+
+                const { font } = shapeTextStyleFromMeta(updatedMeta)
+                const { requiredHeight } = reflowTextForShape(
+                    type,
+                    width,
+                    updatedMeta.textContent ?? '',
+                    font
+                )
+                const newH = Math.max(currentH, requiredHeight)
+
+                const bulkObj: Partial<ComponentRow> = { metadata: updatedMeta }
+                if (newH > currentH) {
+                    const sceneRect = sceneEl?.children?.[0]
+                    const coreRect = coreObj?.children?.[0]
+                    if (sceneRect) sceneRect.height = newH
+                    if (coreRect) coreRect.height = newH
+
+                    // Anchor the TOP edge: the shape path + text layer are
+                    // centered on the group origin, so growing `height` alone
+                    // expands symmetrically and pushes the top edge upward
+                    // (moving the shape's visual y). Shift the group down by half
+                    // the height delta so the box only grows downward and the top
+                    // edge — the user's "y point" — stays put. The shape center
+                    // therefore moves down by the same half-delta.
+                    //
+                    // Two coordinate spaces are in play: the scene element's
+                    // translation + the store row are ABSOLUTE world y, while the
+                    // group child entry's x/y are RELATIVE to the group center
+                    // (see the group assembly in newCanvas — `item.x - xMid`).
+                    // Shift each in its own space so a later drag-commit
+                    // (commitGroupMove: `gy + child.y`) recomputes the same
+                    // absolute position.
+                    const dy = (newH - currentH) / 2
+                    const prevAbsY = sceneEl?.translation?.y ?? storeRow?.y ?? 0
+                    const newAbsY = prevAbsY + dy
+                    if (sceneEl?.translation) sceneEl.translation.y = newAbsY
+                    if (coreObj?.translation) coreObj.translation.y += dy
+
+                    if (sceneEl?.elementData) {
+                        sceneEl.elementData.height = newH
+                        sceneEl.elementData.y = newAbsY
+                    }
+                    child.height = newH
+                    if (typeof child.y === 'number') child.y += dy
+                    else child.y = (child.relativeY ?? 0) + dy
+                    if (typeof child.relativeY === 'number')
+                        child.relativeY += dy
+                    bulkObj.height = Math.round(newH)
+                    bulkObj.y = Math.round(newAbsY)
                 }
+                if (sceneEl?.elementData)
+                    sceneEl.elementData.metadata = updatedMeta
+                child.metadata = updatedMeta
+                recordChild(id, bulkObj)
                 return
             }
         })
@@ -458,88 +577,5 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) {
         }
 
         twoJSInstance?.update()
-
-        // Grow wrapping rectangles in a single RAF after Two.js has rendered
-        // the new text size/family.
-        function runGrowPass(): void {
-            const PAD = 20
-            const growEntries: HistoryBatchEntry[] = []
-            rectsToGrow.forEach(({ id, sceneEl, coreObj }) => {
-                const sceneTexts = sceneEl
-                    ? findTextNodesInside(sceneEl)
-                    : []
-                const coreTexts = coreObj
-                    ? findTextNodesInside(coreObj)
-                    : []
-                // Prefer coreTexts for measurement: the scene element's outer
-                // group is at opacity=0 while a group is focused, and Two.js's
-                // render path leaves sceneText's _flagSize unprocessed in that
-                // state — its DOM font-size attribute stays stale. coreText is
-                // on the visible group and gets rendered correctly. Union the
-                // line nodes' boxes so multiline text is fully enclosed.
-                const measureNodes =
-                    coreTexts.length > 0 ? coreTexts : sceneTexts
-                let bw = 0
-                let bh = 0
-                measureNodes.forEach((nd) => {
-                    const b = nd?._renderer?.elem?.getBBox?.()
-                    if (!b) return
-                    bw = Math.max(bw, b.width)
-                    bh += b.height
-                })
-                const bbox = { width: bw, height: bh }
-                if (bbox.width <= 0) return
-
-                const sceneRect = sceneEl?.children?.[0]
-                const coreRect = coreObj?.children?.[0]
-                const currentW = sceneRect?.width ?? coreRect?.width
-                const currentH = sceneRect?.height ?? coreRect?.height
-                if (!currentW || !currentH) return
-
-                const minW = bbox.width + PAD
-                const minH = bbox.height + PAD
-                const newW = Math.max(currentW, minW)
-                const newH = Math.max(currentH, minH)
-                if (newW === currentW && newH === currentH) return
-
-                if (sceneRect) {
-                    sceneRect.width = newW
-                    sceneRect.height = newH
-                }
-                if (coreRect) {
-                    coreRect.width = newW
-                    coreRect.height = newH
-                }
-                const roundedW = Math.round(newW)
-                const roundedH = Math.round(newH)
-                const prevW = stateRefForComponentStore?.current?.[id]?.width
-                const prevH = stateRefForComponentStore?.current?.[id]?.height
-                updateComponentBulkPropertiesInLocalStore(
-                    id,
-                    { width: roundedW, height: roundedH },
-                    true
-                )
-                growEntries.push({
-                    action: 'UPDATE_BULK',
-                    id,
-                    prevProps: { width: prevW, height: prevH },
-                    bulkObj: { width: roundedW, height: roundedH },
-                })
-            })
-            if (growEntries.length > 0) {
-                recordBatchToHistoryLog?.(growEntries)
-                twoJSInstance?.update()
-            }
-        }
-
-        if (rectsToGrow.length > 0) {
-            // Two RAFs: first lets Two.js commit the new font-size to the SVG;
-            // second lets the browser flush layout so getBBox reflects the new
-            // text dimensions instead of the pre-change cached value.
-            requestAnimationFrame(() => {
-                twoJSInstance?.update()
-                requestAnimationFrame(() => runGrowPass())
-            })
-        }
     }
 }
diff --git a/src/utils/applyProperty.ts b/src/utils/applyProperty.ts
index 49d8c2f..8bf3be7 100644
--- a/src/utils/applyProperty.ts
+++ b/src/utils/applyProperty.ts
@@ -259,11 +259,12 @@ export function createApplyProperty(deps: ApplyPropertyDeps) {
             // Preview = live drag: mutate the scene only, defer the
             // store/history write to the commit on release.
             if (!opts?.preview) {
-                const existingMeta = elementData?.metadata ?? {}
-                const updatedMeta = { ...existingMeta, opacity: value }
-                if (elementData) elementData.metadata = updatedMeta
+                // Opacity persists in the top-level `opacity` column for every
+                // element type (pencil's `metadata` is its vertex array and
+                // never used metadata.opacity; the rest were migrated off it).
+                if (elementData) elementData.opacity = value
                 updateComponentBulkPropertiesInLocalStore(id, {
-                    metadata: updatedMeta,
+                    opacity: value,
                 })
             }
         }
diff --git a/src/utils/canvasUtils.ts b/src/utils/canvasUtils.ts
index b24b95e..df47f0c 100644
--- a/src/utils/canvasUtils.ts
+++ b/src/utils/canvasUtils.ts
@@ -40,6 +40,25 @@ export function setArrowEndpointsVisible(
     if (shape?.children?.[2]) shape.children[2].opacity = opacity
 }
 
+// Single source of truth for reading an element's opacity off a store row /
+// props / elementData. Opacity is persisted in the top-level `opacity` column
+// for every element type. The legacy `metadata.opacity` read is kept as a
+// fallback so boards saved before the migration still render dimmed (pencil
+// never used metadata.opacity — its metadata is the vertex array — so the
+// Array guard also covers it). Absent everywhere → fully opaque.
+export function readOpacity(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    source: any
+): number {
+    if (!source) return 1
+    if (typeof source.opacity === 'number') return source.opacity
+    const meta = source.metadata
+    if (meta && !Array.isArray(meta) && typeof meta.opacity === 'number') {
+        return meta.opacity
+    }
+    return 1
+}
+
 // Convert a mouse event's client coords to Two.js surface coords via ZUI.
 export function clientToSurface(
     zui: ZUILike,
@@ -78,6 +97,7 @@ interface ElementCloneSource {
     radius: number | null
     iconStroke: string | null
     textColor: string | null
+    opacity?: number | null
     metadata: unknown
     children: unknown
     relativeX?: number
@@ -118,6 +138,7 @@ export function cloneElementData(
         radius: src.radius,
         iconStroke: src.iconStroke,
         textColor: src.textColor,
+        opacity: readOpacity(src),
         metadata: Array.isArray(src.metadata)
             ? src.metadata.map((p: unknown) =>
                   typeof p === 'object' && p !== null ? { ...p } : p
diff --git a/src/utils/exportSelectionAsSvg.ts b/src/utils/exportSelectionAsSvg.ts
index 5f8e49e..134f8c1 100644
--- a/src/utils/exportSelectionAsSvg.ts
+++ b/src/utils/exportSelectionAsSvg.ts
@@ -8,7 +8,7 @@
 // (unzoomed, scene-space) transform, getBBox reports its bounds in that same
 // space, and using those bounds as the viewBox yields a 1:1 portable asset.
 
-import { SVG_NS, embedFonts } from './svgExportShared'
+import { SVG_NS, embedFonts, stripSelectionChrome } from './svgExportShared'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type GroupLike = any
@@ -24,6 +24,13 @@ export async function exportSelectionAsSvg(group: GroupLike): Promise<void> {
 
     const clone = gEl.cloneNode(true) as SVGGElement
 
+    // Drop any selection-overlay node tagged at its source (the legacy
+    // objectSelector area/handles injected into a group's <g>, or the
+    // SelectionController box if it ever ends up inside the clone). This is the
+    // primary chrome strip; the marquee-specific prune below additionally drops
+    // the transparent marquee-sized rect, which carries no tag.
+    stripSelectionChrome(clone)
+
     // A marquee group's <g> also contains the transparent marquee-sized rect and
     // the visible selection border/handles (added as children of the group). For
     // a single-element selection the group's <g> is already clean (its selection
diff --git a/src/utils/exportViewport.ts b/src/utils/exportViewport.ts
index e833ebb..ea102b6 100644
--- a/src/utils/exportViewport.ts
+++ b/src/utils/exportViewport.ts
@@ -9,7 +9,7 @@
 // stamp a screen-space watermark, then draw the SVG onto a <canvas> and
 // download it as PNG.
 
-import { SVG_NS, embedFonts } from './svgExportShared'
+import { SVG_NS, embedFonts, stripSelectionChrome } from './svgExportShared'
 import { DEFAULT_TEXT_FONT_FAMILY } from '../constants/misc'
 
 const CANVAS_BG = '#f5f0e8' // --color-canvas (App.css)
@@ -41,6 +41,9 @@ export async function downloadViewportAsImage(): Promise<void> {
     clone.setAttribute('height', String(height))
     clone.setAttribute('viewBox', `0 0 ${width} ${height}`)
 
+    // Don't bake the on-screen selection box/handles into the exported image.
+    stripSelectionChrome(clone)
+
     injectBackground(clone, width, height)
     await embedFonts(clone)
     appendWatermark(clone, width, height)
diff --git a/src/utils/groupInspect.ts b/src/utils/groupInspect.ts
index 8a63c89..dc12073 100644
--- a/src/utils/groupInspect.ts
+++ b/src/utils/groupInspect.ts
@@ -108,6 +108,7 @@ const ACCEPTS: Record<InspectableProperty, Set<string>> = {
         'arrowLine',
         'newText',
         'geoText',
+        'pencil',
     ]),
     textColor: new Set([
         'newText',
@@ -148,6 +149,9 @@ function readChildValue(child: ChildEntry, key: InspectableProperty): unknown {
         case 'strokeType':
             return child.strokeType ?? 'solid'
         case 'opacity':
+            // Opacity lives in the top-level `opacity` field (legacy rows fall
+            // back to metadata.opacity; pencil never used metadata).
+            if (typeof child.opacity === 'number') return child.opacity
             return meta?.opacity ?? 1
         case 'textColor':
             if (
diff --git a/src/utils/svgExportShared.ts b/src/utils/svgExportShared.ts
index f565022..391c454 100644
--- a/src/utils/svgExportShared.ts
+++ b/src/utils/svgExportShared.ts
@@ -8,24 +8,65 @@ import { DEFAULT_TEXT_FONT_FAMILY } from '../constants/misc'
 
 export const SVG_NS = 'http://www.w3.org/2000/svg'
 
-// Fonts used for canvas text, embedded so exported text matches the screen
-// instead of falling back to a system font. Only the Regular 400 weight is
-// requested (canvas text is always 400) — and the default font (Caveat Brush)
-// ships a single weight, so requesting a range would 400 the whole CSS fetch.
-const FONT_FAMILIES = [DEFAULT_TEXT_FONT_FAMILY]
+// DOM marker stamped on the SVG node of any selection-overlay element (the
+// selection box/handles drawn by the SelectionController, and the legacy
+// `objectSelector` area + handles injected into a group's <g>). Exports clone
+// live SVG, so without a way to tell content from chrome the selection overlay
+// leaks into the downloaded file. We tag chrome once at its source and strip it
+// from every export clone. Two.js's renderer only writes its own known
+// attributes, so a custom data-* attribute survives subsequent re-renders.
+export const SELECTION_CHROME_ATTR = 'data-cb-selection-chrome'
 
 /**
- * Inline the Google web font(s) as base64 inside a <style> in the given SVG.
- * Best-effort: any failure leaves the SVG unmodified.
+ * Tag a Two.js overlay object's rendered SVG node as selection chrome so export
+ * flows can strip it. No-op until the object has been rendered at least once
+ * (its `_renderer.elem` exists); callers invoke this right after `two.update()`.
  */
-export async function embedFonts(svg: SVGSVGElement): Promise<void> {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function markSelectionChrome(twoObject: any): void {
+    const el: Element | undefined = twoObject?._renderer?.elem
+    if (el) el.setAttribute(SELECTION_CHROME_ATTR, '1')
+}
+
+/** Remove every selection-chrome node from a cloned SVG subtree, in place. */
+export function stripSelectionChrome(root: Element): void {
+    root.querySelectorAll(`[${SELECTION_CHROME_ATTR}]`).forEach((n) =>
+        n.remove()
+    )
+}
+
+/**
+ * Collect the distinct font families actually used by <text> elements in the
+ * given SVG. Two.js writes the live `font-family` onto each <text>, so this is
+ * what the exported text will request — we must embed exactly these, not just
+ * the default. The default is always included (the watermark uses it).
+ */
+function collectUsedFamilies(svg: SVGSVGElement): string[] {
+    const families = new Set<string>([DEFAULT_TEXT_FONT_FAMILY])
+    svg.querySelectorAll('text').forEach((text) => {
+        const raw =
+            text.getAttribute('font-family') || text.style.fontFamily || ''
+        // font-family can be a comma list of fallbacks; take the primary and
+        // strip any surrounding quotes Two.js / the browser may have added.
+        const primary = raw.split(',')[0]?.trim().replace(/^["']|["']$/g, '')
+        if (primary) families.add(primary)
+    })
+    return [...families]
+}
+
+/**
+ * Fetch one Google font family's CSS with its url() references inlined as
+ * base64 data URIs. Returns the inlined CSS, or null on any failure. Only the
+ * Regular 400 weight is requested (canvas text is always 400). Each family is
+ * fetched independently so an unavailable family can't void the whole export.
+ */
+async function fetchInlinedFontCss(family: string): Promise<string | null> {
     try {
-        const family = FONT_FAMILIES.map(
-            (f) => `family=${encodeURIComponent(f)}:wght@400`
-        ).join('&')
-        const cssUrl = `https://fonts.googleapis.com/css2?${family}&display=swap`
+        const cssUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
+            family
+        )}:wght@400&display=swap`
         const cssResp = await fetch(cssUrl)
-        if (!cssResp.ok) return
+        if (!cssResp.ok) return null
         let css = await cssResp.text()
 
         const urls = [...css.matchAll(/url\((https:\/\/[^)]+)\)/g)].map(
@@ -38,6 +79,24 @@ export async function embedFonts(svg: SVGSVGElement): Promise<void> {
                 if (dataUri) css = css.split(url).join(dataUri)
             })
         )
+        return css
+    } catch {
+        return null
+    }
+}
+
+/**
+ * Inline the Google web font(s) used by the SVG's text as base64 inside a
+ * <style>. Embeds every family actually present on the canvas — not just the
+ * default — so exported text keeps its on-screen font instead of falling back.
+ * Best-effort: any failure leaves the SVG unmodified.
+ */
+export async function embedFonts(svg: SVGSVGElement): Promise<void> {
+    try {
+        const families = collectUsedFamilies(svg)
+        const cssChunks = await Promise.all(families.map(fetchInlinedFontCss))
+        const css = cssChunks.filter((c): c is string => c !== null).join('\n')
+        if (!css) return
 
         const style = document.createElementNS(SVG_NS, 'style')
         style.textContent = css
diff --git a/src/views/Board/board.tsx b/src/views/Board/board.tsx
index 4d72fd9..3fbc6ab 100644
--- a/src/views/Board/board.tsx
+++ b/src/views/Board/board.tsx
@@ -38,6 +38,7 @@ import {
     getShapeTextNodes,
     applyShapeText,
     shapeTextStyleFromMeta,
+    readOpacity,
 } from '../../utils/canvasUtils'
 import { reflowTextForShape } from '../../utils/shapeTextFit'
 import { lineHeightFor } from '../../utils/textLayout'
@@ -198,6 +199,13 @@ const BoardViewPage: React.FC<BoardProps> = (props) => {
     // Mirror of selectedGroup as a ref — useComponentHistory's applyBatch needs
     // to read the currently-focused group at undo/redo time without re-running.
     const selectedGroupRef = useRef<unknown>(null)
+    // True while a selected element/group is actively being dragged or resized.
+    // Used to hide the (fixed-position) properties toolbar so it doesn't sit
+    // under the element mid-drag. Driven by a document-level pointer watcher
+    // below; `selectionPresentRef` lets that DOM handler read the live selection
+    // without re-binding on every selection change.
+    const [isElementDragging, setIsElementDragging] = useState(false)
+    const selectionPresentRef = useRef(false)
     const [currentElement, setCurrentElement] = useState<string | null>(null)
     const [showPermissionErrorModal, setShowPermissionErrorModal] =
         useState(false)
@@ -852,7 +860,14 @@ const BoardViewPage: React.FC<BoardProps> = (props) => {
             const prevProps: Record<string, any> = {}
             Object.keys(bulkObj).forEach((key) => {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const val = (currentComponent as any)?.[key]
+                let val = (currentComponent as any)?.[key]
+                // Opacity has no stored value until first set, but its effective
+                // prior value is "fully opaque" (or a legacy metadata.opacity).
+                // Capture that so undo of the FIRST opacity change restores it
+                // instead of no-op'ing on an empty snapshot.
+                if (val === undefined && key === 'opacity') {
+                    val = readOpacity(currentComponent)
+                }
                 if (val !== undefined) {
                     prevProps[key] = val
                 }
@@ -1395,6 +1410,85 @@ const BoardViewPage: React.FC<BoardProps> = (props) => {
         }
     }, [])
 
+    // Keep a live ref of "is anything selected" for the DOM pointer watcher
+    // below — it reads this synchronously inside a capture-phase handler that
+    // must not re-bind on every selection change.
+    useEffect(() => {
+        selectionPresentRef.current = !!selectedComponent || !!selectedGroup
+    }, [selectedComponent, selectedGroup])
+
+    // Hide the fixed properties toolbar while a selected element/group is being
+    // dragged or resized, so it doesn't sit under the element mid-interaction.
+    // This watches the pointer at the document level (capture phase) rather than
+    // threading through the four separate drag paths (single-shape controller,
+    // group object, arrow endpoints, resize handles) — any of them manifests as
+    // "pointer down on the canvas with a selection, then move". Pure DOM + one
+    // boolean of React state: no canvas/React races, and pointerup/cancel always
+    // resets it. Drags that start on the toolbar itself (e.g. the opacity
+    // slider) are excluded so adjusting a control never hides the panel.
+    useEffect(() => {
+        const DRAG_THRESHOLD_SQ = 4 * 4 // px², ignore click jitter
+        let armed = false
+        let moved = false
+        let startX = 0
+        let startY = 0
+
+        const onDown = (e: PointerEvent): void => {
+            if (e.button !== 0) return
+            const target = e.target as HTMLElement | null
+            if (!target) return
+            // Ignore presses on the toolbar/UI chrome or outside the canvas, and
+            // on the in-canvas text-edit field (drag-selecting text isn't an
+            // element drag — the textarea is appended under #main-two-root).
+            if (target.closest('#floating-toolbar')) return
+            if (
+                target.closest(
+                    'input, textarea, [contenteditable="true"], .temp-input-area'
+                )
+            )
+                return
+            if (!target.closest('#main-two-root')) return
+            // Arm only when something draggable is under (or already engaged by)
+            // the pointer: a press directly on an element node, or any active
+            // selection (covers resize handles, which live in the overlay group,
+            // and select-then-drag). Empty-canvas presses — pan, marquee, draw —
+            // are left alone so they never hide a defaults panel.
+            const onElement = !!target.closest('[data-component-id]')
+            if (!onElement && !selectionPresentRef.current) return
+            armed = true
+            moved = false
+            startX = e.clientX
+            startY = e.clientY
+        }
+        const onMove = (e: PointerEvent): void => {
+            if (!armed || moved) return
+            const dx = e.clientX - startX
+            const dy = e.clientY - startY
+            if (dx * dx + dy * dy >= DRAG_THRESHOLD_SQ) {
+                moved = true
+                setIsElementDragging(true)
+            }
+        }
+        const onUp = (): void => {
+            armed = false
+            if (moved) {
+                moved = false
+                setIsElementDragging(false)
+            }
+        }
+
+        document.addEventListener('pointerdown', onDown, true)
+        document.addEventListener('pointermove', onMove, true)
+        document.addEventListener('pointerup', onUp, true)
+        document.addEventListener('pointercancel', onUp, true)
+        return () => {
+            document.removeEventListener('pointerdown', onDown, true)
+            document.removeEventListener('pointermove', onMove, true)
+            document.removeEventListener('pointerup', onUp, true)
+            document.removeEventListener('pointercancel', onUp, true)
+        }
+    }, [])
+
     const applyGroupProperty = createApplyGroupProperty({
         selectedGroup,
         twoJSInstance,
@@ -1489,6 +1583,7 @@ const BoardViewPage: React.FC<BoardProps> = (props) => {
         selectedGroup,
         applyGroupProperty,
         reorderSelected,
+        isElementDragging,
         // Defaults — read by ElementPropertiesToolbar, also still exposed
         // individually so legacy primary.js / Canvas reads keep working.
         defaultFill,
diff --git a/src/views/Home/home.tsx b/src/views/Home/home.tsx
index 4d6ddd6..adc24dd 100644
--- a/src/views/Home/home.tsx
+++ b/src/views/Home/home.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import StickerSVG from '../../assets/sticker.svg'
+import LogoSVG from '../../assets/logo.svg'
 import TwitterLogoSVG from '../../assets/twitter_logo.svg'
 import GithubLogoSVG from '../../assets/github_logo.svg'
 import RightArrowWhiteSVG from '../../assets/right_arrow_white.svg'
@@ -11,7 +11,7 @@ import BlueStarSVG from '../../assets/blue_star.svg'
 // import ImageContainer from '../../components/ProgressiveImageLoader/loader'
 // import CraftbaseBoardScreenshotPNG from '../../assets/craftbase_board_screenshot.png'
 // import CraftbaseBoardScreenshotBlurJPG from '../../assets/blur_craftbase_screenshot.jpg'
-import WhiteboardingPNG from '../../assets/whiteboarding.png'
+import Brainstorming from '../../assets/brainstorming_craftbase.png'
 import Button from '../../components/common/button'
 
 const HomePage: React.FC = () => {
@@ -35,19 +35,20 @@ const HomePage: React.FC = () => {
         <>
             {/* <Redirect to={`/board/03a3706e-fe79-4df5-80f6-2f4040ade05f`} /> */}
             <div
-                className="home-page-container relative bg-neutrals-n20 "
+                className="home-page-container relative bg-canvas "
                 // style={{ height: `${pageHeight}px` }}
             >
                 <nav
                     className="flex items-center w-full px-5 py-1 lg:py-2 2xl:py-4
-                 bg-white shadow-md
+                 bg-sidebar border-b border-border-panel
                  "
                 >
                     <div className="w-1/2 flex items-center ">
                         <div>
                             <img
-                                src={StickerSVG}
-                                className="w-4 h-4 
+                                src={LogoSVG}
+                                alt="Craftbase"
+                                className="w-4 h-4
                             lg:w-6 lg:h-6
                             2xl:w-8 2xl:h-8
                             "
@@ -55,11 +56,11 @@ const HomePage: React.FC = () => {
                         </div>
                         <div
                             className="pl-2
-                        text-primary-blue text-base lg:text-xl 2xl:text-2xl font-bold font-display"
+                        text-ink text-base lg:text-xl 2xl:text-2xl font-bold font-display"
                         >
                             craftbase
                         </div>
-                        <div className="text-primary-blue pl-2 text-sm">
+                        <div className="text-ink-muted pl-2 text-sm">
                             {' '}
                             (still in early alpha stage)
                         </div>
@@ -91,7 +92,7 @@ const HomePage: React.FC = () => {
                                 name="create_canvas"
                                 label="New Canvas"
                                 onClick={onCreateCanvas}
-                                extendClass="font-semibold shadow-lg ml-4"
+                                extendClass="font-semibold shadow-card hover:shadow-card-accent ml-4"
                             />
                         </div>
                     </div>
@@ -107,12 +108,13 @@ const HomePage: React.FC = () => {
                             <div className="text-left transition-opacity duration-300 ease-in-out">
                                 <h1 className="text-base lg:text-3xl 2xl:text-4xl font-bold font-display">
                                     Instant Infinite Whiteboard with Unique
-                                    Board Links
+                                    Shareable Board Links
                                 </h1>
                                 <p className="pt-4 2xl:pt-8 text-sm lg:text-lg 2xl:text-xl ">
-                                    Create unlimited infinite canvases. Each
-                                    board gets a unique URL. No accounts. No
-                                    dashboards. Just start thinking.
+                                    Start brainstorming in craftbase. Create as
+                                    much as shared boards as you like. Each
+                                    shared board gets a unique URL. No accounts.
+                                    No login/signup. Just start thinking.
                                 </p>
                                 {/* <p className="pt-4 2xl:pt-8 text-sm lg:text-lg 2xl:text-xl ">
                                     With real-time updates across all devices,
@@ -128,7 +130,7 @@ const HomePage: React.FC = () => {
 
                                         size="large"
                                         onClick={onCreateCanvas}
-                                        extendClass="font-semibold shadow-lg primary-btn-home hover:shadow-xl"
+                                        extendClass="font-semibold primary-btn-home shadow-card hover:shadow-card-accent"
                                     >
                                         <div className="flex items-center">
                                             <span>Start on empty canvas</span>
@@ -144,9 +146,9 @@ const HomePage: React.FC = () => {
                         <div className="w-full lg:w-7/12 pt-8 lg:pt-0 h-full ">
                             <div className="lg:pl-4 w-full flex items-center lg:justify-end justify-center ">
                                 <img
-                                    src={WhiteboardingPNG}
-                                    alt="Craftbase whiteboarding"
-                                    className="w-full lg:w-11/12 rounded-lg shadow-lg"
+                                    src={Brainstorming}
+                                    alt="Craftbase brainstorming"
+                                    className="w-full lg:w-11/12 shadow-md"
                                 />
                             </div>
                         </div>
@@ -161,8 +163,8 @@ const HomePage: React.FC = () => {
                                         className="w-10 h-10 big-desktop:w-14 big-desktop:h-14 mx-auto"
                                     />
                                 </div>
-                                <div className=" px-8 lg:px-20 big-desktop:text-lg">
-                                    <p className="mt-4 text-primary-blue font-bold font-display">
+                                <div className=" px-8 lg:px-20 big-desktop:text-lg text-center">
+                                    <p className="mt-4 text-ink font-bold font-display">
                                         No sign-up(s) needed
                                     </p>
                                     <p className="mt-2">
@@ -178,8 +180,8 @@ const HomePage: React.FC = () => {
                                         className="w-10 h-10 big-desktop:w-14 big-desktop:h-14 mx-auto"
                                     />
                                 </div>
-                                <div className=" px-8 lg:px-20 big-desktop:text-lg">
-                                    <p className="mt-4 text-primary-blue font-bold font-display">
+                                <div className=" px-8 lg:px-20 big-desktop:text-lg text-center">
+                                    <p className="mt-4 text-ink font-bold font-display">
                                         Open Source at its core
                                     </p>
                                     <p className="mt-2">
@@ -197,8 +199,8 @@ const HomePage: React.FC = () => {
                                         className="w-10 h-10 big-desktop:w-14 big-desktop:h-14 mx-auto"
                                     />
                                 </div>
-                                <div className=" px-8 lg:px-20 big-desktop:text-lg">
-                                    <p className="mt-4 text-primary-blue font-bold font-display">
+                                <div className=" px-8 lg:px-20 big-desktop:text-lg text-center">
+                                    <p className="mt-4 text-ink font-bold font-display">
                                         Customization
                                     </p>
                                     <p className="mt-2">
@@ -211,29 +213,7 @@ const HomePage: React.FC = () => {
                     </div>
 
                     <div className="mt-20 w-full flex items-center justify-center">
-                        <hr className="border border-neutrals-n80 w-2/4" />
-                    </div>
-
-                    <div className="mt-20 mb-20">
-                        <div className="text-2xl font-medium">
-                            We are still in early alpha stage. Show your support
-                            by giving a star to our{' '}
-                            <a
-                                className="text-primary-blue underline"
-                                href="https://github.com/craftbase-org"
-                                target="_blank"
-                            >
-                                Github
-                            </a>{' '}
-                            repo or by giving us a follow on{' '}
-                            <a
-                                className="text-primary-blue underline"
-                                href="https://twitter.com/craftbase_org"
-                                target="_blank"
-                            >
-                                Twitter
-                            </a>{' '}
-                        </div>
+                        <hr className="border-t border-border-panel w-2/4" />
                     </div>
 
                     {/* <div className="mt-8">
@@ -250,12 +230,12 @@ const HomePage: React.FC = () => {
                     {/* <div className="mt-8 pt-20"> </div> */}
                 </div>
                 <footer
-                    className="  
-                    w-full  px-10 2xl:px-20 
-                     bg-neutrals-n40  h-20 shadow-inner
+                    className="
+                    w-full  px-10 2xl:px-20
+                     bg-sidebar border-t border-border-panel  h-20
                 flex items-center justify-between"
                 >
-                    <div className="text-sm big-desktop:text-base">
+                    <div className="text-sm big-desktop:text-base text-ink-mid">
                         © 2026 Craftbase. All rights reserved.
                     </div>
                     <div className=" flex items-center">
diff --git a/tests/e2e/group-text-size-position.spec.js b/tests/e2e/group-text-size-position.spec.js
new file mode 100644
index 0000000..d2ef32e
--- /dev/null
+++ b/tests/e2e/group-text-size-position.spec.js
@@ -0,0 +1,226 @@
+import { test, expect } from './helpers/test.js'
+import {
+    setupLocalBoard,
+    getCanvasBox,
+    drawShape,
+    addTextToRectangle,
+    clickPointerTool,
+    dragSelectArea,
+} from './helpers/index.js'
+
+/**
+ * Regression: increasing TEXT SIZE on a group selection must not move the
+ * member shapes.
+ *
+ * The bug (see the group text-grow path in src/utils/applyGroupProperty.ts):
+ * when a shape-with-text was part of a group and its text size was bumped, the
+ * shape grew to fit the larger text by widening AND by expanding symmetrically
+ * around its centre. Two visible defects followed:
+ *
+ *   1. The box widened, so shapes laid out side by side overlapped and lost
+ *      their relative horizontal spacing.
+ *   2. Symmetric vertical growth pushed the TOP edge upward, so the shape
+ *      visually jumped up the canvas (its on-screen y changed).
+ *
+ * The fix reflows the embedded text to the shape's FIXED width (never widens)
+ * and grows ONLY the height, shifting the shape's centre down by half the
+ * height delta so the TOP edge — what the user perceives as the shape's
+ * y-position — stays anchored and the box grows strictly downward.
+ *
+ * This spec drives the real user flow for rectangle / diamond / circle (each
+ * carrying sample MULTILINE text): snapshot every shape's rendered top-left,
+ * marquee-select into a group, bump the text size from the group floating
+ * toolbar, click empty canvas to blur (the originals only re-render with the
+ * change once the group blurs — Escape does NOT deselect). Then assert, on the
+ * re-rendered originals:
+ *
+ *   - the LEFT edge (x) is unchanged  → never widened / never drifted x
+ *   - the TOP edge (y) is unchanged   → never pushed up; grows downward only
+ *   - the shape actually grew taller  → the bump took effect (assertion is
+ *     meaningful, not trivially satisfied by a no-op)
+ *   - the BOTTOM edge moved down      → growth was strictly downward
+ */
+
+// Rendered geometry is exact in theory (newY - newH/2 === oldY - oldH/2), but
+// allow a couple of pixels for Two.js' internal rounding and sub-pixel SVG
+// layout so the test isn't flaky.
+const POS_TOL = 2
+const SETTLE_MS = 400
+
+// Each shape carries hard-newline multiline text so bumping the size is
+// guaranteed to need more height (every wrapped line grows taller).
+const SHAPE_SPECS = [
+    {
+        type: 'rectangle',
+        label: 'rectangle-with-text',
+        text: 'Workspace\nIntegrations',
+    },
+    {
+        type: 'diamond',
+        label: 'diamond-with-text',
+        text: 'Quick\nbrown fox',
+    },
+    {
+        type: 'circle',
+        label: 'circle-with-text',
+        text: 'Lorem\nipsum',
+    },
+]
+
+/**
+ * Reads the rendered bounding box (viewport pixels) of a shape's <path>. The
+ * shape leaf is the first <path> inside the element group (the embedded text
+ * is <text>, the optional hit-rect comes later), so `querySelector('path')`
+ * targets the container, not the label. No pan/zoom happens between snapshots,
+ * so client-rect coordinates are directly comparable.
+ */
+async function readShapeRect(page, id) {
+    return page.$eval(`[data-component-id="${id}"] path`, (p) => {
+        const r = p.getBoundingClientRect()
+        return {
+            left: r.left,
+            top: r.top,
+            right: r.right,
+            bottom: r.bottom,
+            width: r.width,
+            height: r.height,
+        }
+    })
+}
+
+/**
+ * Creates rectangle/diamond/circle in a single horizontal row (mirroring the
+ * side-by-side layout where the spacing bug showed), each with multiline text.
+ * Returns the marquee layout + the element ids in creation order. Coordinates
+ * stay clear of the top toolbar and the left Defaults panel.
+ */
+async function createMultilineCluster(page) {
+    const box = await getCanvasBox(page)
+    const bx = box.x + box.width * 0.3
+    const by = box.y + box.height * 0.35
+    // Wide-enough boxes so the larger text wraps to a few lines (not one glyph
+    // per line); modest height growth keeps the cluster inside the viewport.
+    const COL = 235
+    const W = 200
+    const H = 80
+
+    const shapeBox = (cx, cy) => ({
+        startX: cx,
+        startY: cy,
+        endX: cx + W,
+        endY: cy + H,
+    })
+
+    const elements = []
+    for (let i = 0; i < SHAPE_SPECS.length; i++) {
+        const spec = SHAPE_SPECS[i]
+        const handle = await drawShape(page, spec.type, shapeBox(bx + i * COL, by))
+        await addTextToRectangle(page, handle, spec.text)
+        elements.push({
+            id: await handle.getAttribute('data-component-id'),
+            label: spec.label,
+        })
+    }
+
+    for (const e of elements) {
+        expect(
+            e.id,
+            'every created shape must expose a data-component-id'
+        ).toBeTruthy()
+    }
+    return { box, bx, by, COL, W, H, elements }
+}
+
+async function selectGroup(page, layout) {
+    const { bx, by, COL, W, H } = layout
+    await clickPointerTool(page)
+    const groupHandle = await dragSelectArea(page, {
+        startX: bx - 60,
+        startY: by - 90,
+        endX: bx + 2 * COL + W + 90,
+        endY: by + H + 240,
+    })
+    expect(groupHandle).not.toBeNull()
+    await page.waitForSelector('#floating-toolbar')
+}
+
+/**
+ * Deselects by clicking empty canvas (Escape does not blur the group). The
+ * shapes grow DOWNWARD, so the area below them is no longer reliably empty —
+ * click ABOVE the (top-anchored) shapes instead, between the toolbar and the
+ * shape tops. Waits until the groupobject overlay is gone so the originals
+ * have re-rendered with the applied change.
+ */
+async function deselectGroup(page, layout) {
+    const { box } = layout
+    await page.mouse.click(box.x + box.width * 0.5, box.y + 75)
+    await page.waitForFunction(
+        () =>
+            document.querySelectorAll('[data-label="groupobject_coord"]')
+                .length === 0
+    )
+}
+
+async function snapshotRects(page, elements) {
+    const map = {}
+    for (const e of elements) map[e.id] = await readShapeRect(page, e.id)
+    return map
+}
+
+test.describe('Group text-size change keeps shapes anchored (grows downward only)', () => {
+    test.beforeEach(async ({ page }) => {
+        await setupLocalBoard(page)
+    })
+
+    test('rectangle / diamond / circle with multiline text keep their top-left x,y after a group text-size bump', async ({
+        page,
+    }) => {
+        const layout = await createMultilineCluster(page)
+        const before = await snapshotRects(page, layout.elements)
+
+        await selectGroup(page, layout)
+        // Text Size row exposes S/M/L/XL by label. Default is M (36); bump to L
+        // (48) — a clear jump that forces every shape to grow taller without
+        // wrapping the wide boxes down to one glyph per line.
+        await page
+            .locator('#floating-toolbar')
+            .getByRole('button', { name: 'L', exact: true })
+            .click()
+        await page.waitForTimeout(SETTLE_MS)
+        await deselectGroup(page, layout)
+
+        const after = await snapshotRects(page, layout.elements)
+
+        for (const el of layout.elements) {
+            const b = before[el.id]
+            const a = after[el.id]
+
+            // Bug #1: the box never widens and never drifts horizontally — the
+            // LEFT edge is exactly where it was (relative spacing preserved).
+            expect(
+                Math.abs(a.left - b.left),
+                `${el.label}: left edge (x) must not move`
+            ).toBeLessThanOrEqual(POS_TOL)
+
+            // Bug #2: the TOP edge — the shape's perceived y — stays anchored;
+            // it must NOT jump up the canvas.
+            expect(
+                Math.abs(a.top - b.top),
+                `${el.label}: top edge (y) must not move`
+            ).toBeLessThanOrEqual(POS_TOL)
+
+            // The bump actually took effect: the shape grew taller, so the
+            // anchored-top assertion above is meaningful (not a no-op).
+            expect(
+                a.height,
+                `${el.label}: should have grown taller after the text-size bump`
+            ).toBeGreaterThan(b.height + POS_TOL)
+
+            // Growth is strictly downward: only the bottom edge advances.
+            expect(
+                a.bottom,
+                `${el.label}: should grow downward (bottom edge moves down)`
+            ).toBeGreaterThan(b.bottom + POS_TOL)
+        }
+    })
+})
diff --git a/yarn.lock b/yarn.lock
index f48ddad..1bd190e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1115,10 +1115,10 @@
   dependencies:
     playwright "1.59.1"
 
-"@remix-run/router@1.23.2":
-  version "1.23.2"
-  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz"
-  integrity sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==
+"@remix-run/router@1.23.3":
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.23.3.tgz#957c098d4393d301a8aa7dccf3ef28ea5430e36a"
+  integrity sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==
 
 "@repeaterjs/repeater@^3.0.4", "@repeaterjs/repeater@^3.0.6":
   version "3.0.6"
@@ -1567,64 +1567,64 @@
     "@types/babel__core" "^7.20.5"
     react-refresh "^0.17.0"
 
-"@vitest/expect@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz"
-  integrity sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==
+"@vitest/expect@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-3.2.6.tgz#dc3a617acc1f29c132ed6be15456adb75c94a7a4"
+  integrity sha512-1+7q9BtaKzEmO+fmNT3kYvoNn5Y71XWAx2Q5HRim4tTVRQVRv4uJFAQ5FbK0OPUeNP/WmVCpxYxoJdvuHVjzBQ==
   dependencies:
     "@types/chai" "^5.2.2"
-    "@vitest/spy" "3.2.4"
-    "@vitest/utils" "3.2.4"
+    "@vitest/spy" "3.2.6"
+    "@vitest/utils" "3.2.6"
     chai "^5.2.0"
     tinyrainbow "^2.0.0"
 
-"@vitest/mocker@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz"
-  integrity sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==
+"@vitest/mocker@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-3.2.6.tgz#fd0f2bc2a86d82b6013b3456ad662d04a3551434"
+  integrity sha512-EZOrpDbkKotFAP7wPAQV1UIyoGOk4oX7ynWhBhLB7v+meMHbQhU16oPpIYGTTe4oFlhpryGpgpcZP/sin3hYuw==
   dependencies:
-    "@vitest/spy" "3.2.4"
+    "@vitest/spy" "3.2.6"
     estree-walker "^3.0.3"
     magic-string "^0.30.17"
 
-"@vitest/pretty-format@3.2.4", "@vitest/pretty-format@^3.2.4":
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz"
-  integrity sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==
+"@vitest/pretty-format@3.2.6", "@vitest/pretty-format@^3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-3.2.6.tgz#5d1272700abe317f24b88009337b2b5cdaa68bf6"
+  integrity sha512-lb7XXXzmm2h2ASzFnRvQpDo6onT1NmMJA3tkGTWiBFtRJ9lxGY3d3mm/Apt36gej2bkkOVLL/yTOtufDaFa/jA==
   dependencies:
     tinyrainbow "^2.0.0"
 
-"@vitest/runner@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.4.tgz"
-  integrity sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==
+"@vitest/runner@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-3.2.6.tgz#6d9fb047b1430431987782e779aa889819a2e964"
+  integrity sha512-HYcoSj1w5tcgUnzoF0HcyaAQjpA1gj9ftUJ7iSJSuipc02jW9gKkigwZbjFldAfYHA1fa8UZVRftdMY5msWM9Q==
   dependencies:
-    "@vitest/utils" "3.2.4"
+    "@vitest/utils" "3.2.6"
     pathe "^2.0.3"
     strip-literal "^3.0.0"
 
-"@vitest/snapshot@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.4.tgz"
-  integrity sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==
+"@vitest/snapshot@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-3.2.6.tgz#3a9cb56389289028a511e97bbfd41d914004f3f5"
+  integrity sha512-H+ZjNTWGpObenh0YnlBctAPnJSI20P81PL8BPzWpx54YXLLTm8hEsWawtcYLMrwvpK48hGxLLbCS+1KRXhsKhw==
   dependencies:
-    "@vitest/pretty-format" "3.2.4"
+    "@vitest/pretty-format" "3.2.6"
     magic-string "^0.30.17"
     pathe "^2.0.3"
 
-"@vitest/spy@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz"
-  integrity sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==
+"@vitest/spy@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-3.2.6.tgz#c255ab84df924b28d6fbec60a37a7f693db4ea41"
+  integrity sha512-oq6BbH68WzcWmwtBrU9nqLeaXTR4XwJF7FSLkKEZo4i6eoXcrxjcwSuTvWBIRUTC6VC72nXYunzqgZA+IKdtxg==
   dependencies:
     tinyspy "^4.0.3"
 
-"@vitest/utils@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz"
-  integrity sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==
+"@vitest/utils@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-3.2.6.tgz#6fad3368e48b7a1d058827eb9b4bbc650a3f9402"
+  integrity sha512-lI23nIs4bnT3T8NIoh+vFaz5s2/DdP0Jgt2jxwgWljvwn82cLJtyi/If+fjFyoLMGIOz0U/fKvWE0d4jsNQEfg==
   dependencies:
-    "@vitest/pretty-format" "3.2.4"
+    "@vitest/pretty-format" "3.2.6"
     loupe "^3.1.4"
     tinyrainbow "^2.0.0"
 
@@ -3608,20 +3608,20 @@ react-responsive@10.0.0:
     prop-types "^15.6.1"
     shallow-equal "^3.1.0"
 
-react-router-dom@^6.30.3:
-  version "6.30.3"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz"
-  integrity sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==
+react-router-dom@^6.30.4:
+  version "6.30.4"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.30.4.tgz#f7167bf3da6c7d9132130ea985dd06def25e84d5"
+  integrity sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==
   dependencies:
-    "@remix-run/router" "1.23.2"
-    react-router "6.30.3"
+    "@remix-run/router" "1.23.3"
+    react-router "6.30.4"
 
-react-router@6.30.3, react-router@^6.30.3:
-  version "6.30.3"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz"
-  integrity sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==
+react-router@6.30.4, react-router@^6.30.4:
+  version "6.30.4"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.30.4.tgz#638f35176527bd243d96d81d35d33b757bad46c2"
+  integrity sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==
   dependencies:
-    "@remix-run/router" "1.23.2"
+    "@remix-run/router" "1.23.3"
 
 react@^18.3.1:
   version "18.3.1"
@@ -3856,10 +3856,10 @@ shebang-regex@^3.0.0:
   resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@^1.7.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.3.tgz#55e40ef33cf5c689902353a3d8cd1a6725f08b4b"
-  integrity sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==
+shell-quote@>=1.8.4, shell-quote@^1.7.3, shell-quote@^1.8.4:
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.4.tgz#2edd9a4dcefc96649e2e2cb12f637b1f1d92a190"
+  integrity sha512-VsC6n6vz1ihYYyZZwX7YZSF5l5x36ca17OC+a69h94YqB7X6XLwf+5MOgynYir2SLFUbl8gIYvBo8K8RoNQ6bQ==
 
 siginfo@^2.0.0:
   version "2.0.0"
@@ -4369,10 +4369,10 @@ vite-tsconfig-paths@^6.1.1:
     globrex "^0.1.2"
     tsconfck "^3.0.3"
 
-"vite@^5.0.0 || ^6.0.0 || ^7.0.0-0", vite@^6.4.2:
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-6.4.2.tgz#a4e548ca3a90ca9f3724582cab35e1ba15efc6f2"
-  integrity sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==
+"vite@^5.0.0 || ^6.0.0 || ^7.0.0-0", vite@^6.4.3, vite@~6.4.3:
+  version "6.4.3"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-6.4.3.tgz#85a164db7ce706f2a776812efa2b340f1721858e"
+  integrity sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==
   dependencies:
     esbuild "^0.25.0"
     fdir "^6.4.4"
@@ -4383,19 +4383,19 @@ vite-tsconfig-paths@^6.1.1:
   optionalDependencies:
     fsevents "~2.3.3"
 
-vitest@^3.2.4:
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz"
-  integrity sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==
+vitest@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-3.2.6.tgz#de42ebfb58e16faba4e5a314fe35e146e03cb340"
+  integrity sha512-xejya+bT/j/+R/AGa1XOfRxLmNUlLtlwjRsFUILF+xHfzElmGcmFydy2gqqIrd62ptIEfwVMofd19uNWD9L7Nw==
   dependencies:
     "@types/chai" "^5.2.2"
-    "@vitest/expect" "3.2.4"
-    "@vitest/mocker" "3.2.4"
-    "@vitest/pretty-format" "^3.2.4"
-    "@vitest/runner" "3.2.4"
-    "@vitest/snapshot" "3.2.4"
-    "@vitest/spy" "3.2.4"
-    "@vitest/utils" "3.2.4"
+    "@vitest/expect" "3.2.6"
+    "@vitest/mocker" "3.2.6"
+    "@vitest/pretty-format" "^3.2.6"
+    "@vitest/runner" "3.2.6"
+    "@vitest/snapshot" "3.2.6"
+    "@vitest/spy" "3.2.6"
+    "@vitest/utils" "3.2.6"
     chai "^5.2.0"
     debug "^4.4.1"
     expect-type "^1.2.1"