diff --git a/VERSION b/VERSION
index 4d01880..11d9d6c 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.7.6
\ No newline at end of file
+0.7.7
\ No newline at end of file
diff --git a/package.json b/package.json
index 4d60e0b..499f324 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "craftbase",
-    "version": "0.7.6",
+    "version": "0.7.7",
     "private": true,
     "main": "src/lib.ts",
     "module": "src/lib.ts",
diff --git a/src/canvas/selectionController.ts b/src/canvas/selectionController.ts
index fa73542..7b92044 100644
--- a/src/canvas/selectionController.ts
+++ b/src/canvas/selectionController.ts
@@ -62,8 +62,15 @@ const SHAPE_ADAPTERS: Record<string, ShapeAdapter> = {
     diamond: DEFAULT_ADAPTER,
 }
 
-const HANDLE_BASE_PX = 10
-const CORNER_BASE_PX = 25
+// Handle dot diameter in *screen* px, stepped across 3 zoom ranges so the dots
+// stay stable instead of rescaling continuously with zoom.
+function handleScreenPx(scale: number): number {
+    if (scale < 0.5) return 8
+    if (scale < 2) return 11
+    return 14
+}
+const HANDLE_HIT_SLOP_MOUSE = 3
+const HANDLE_HIT_SLOP_TOUCH = 8
 const MIN_SCALE_DIMENSION = 20
 const SELECTION_PADDING = 5
 
@@ -324,6 +331,10 @@ export default class SelectionController {
 
         this._bringToFront()
         this.ui.visible = true
+        // Per-shape `.dragger-picker { cursor: pointer }` (common.css) sits on
+        // the SVG node directly under the cursor and beats the root's inline
+        // cursor. This class lets CSS show `move` over the selected shape body.
+        this.domElement.classList.add('shape-selected')
         this.syncToTarget()
         this.two.update()
 
@@ -345,6 +356,7 @@ export default class SelectionController {
         this.currentTextChild = null
         this.currentTextLayer = null
         this.ui.visible = false
+        this.domElement.classList.remove('shape-selected')
         this.domElement.style.cursor = ''
         this.two.update()
         this.callbacks.onDeselect()
@@ -363,7 +375,10 @@ export default class SelectionController {
 
         const scale = this.zui.scale || 1
         this.box.linewidth = 1.5 / scale
-        const handleSize = Math.min(HANDLE_BASE_PX / scale, HANDLE_BASE_PX * 1.25)
+        // Two.Points render with sizeAttenuation=false, so `size` is already a
+        // screen-px value (the renderer divides out the scene scale). Set it
+        // directly — no /scale — else the dots inflate when zoomed out.
+        const handleSize = handleScreenPx(scale)
         this.endpoints.size = handleSize
         this.midEndpoints.size = handleSize
 
@@ -401,23 +416,26 @@ export default class SelectionController {
 
         const surface = this.zui.clientToSurface(clientX, clientY)
         const scale = this.zui.scale || 1
-        const rotateLimit = HANDLE_BASE_PX / scale
-        const scaleLimit = CORNER_BASE_PX / scale
+        // Grab radius is tied to the visible dot (half its diameter) plus a few
+        // px of slop, so resize only fires on the dot — not in a bloated zone
+        // around it. Constant in screen px at any zoom.
+        const hitRadiusPx = handleScreenPx(scale) / 2 + this._hitSlopPx()
+        const hitLimit = hitRadiusPx / scale
 
         const isRect =
             this.currentGroup?.elementData?.componentType === 'rectangle'
         if (isRect) {
-            const midEdge = this._atMidEdge(surface, scaleLimit)
+            const midEdge = this._atMidEdge(surface, hitLimit)
             if (midEdge) return { mode: 'scale', corner: midEdge }
         }
 
-        const corner = this._atCorner(surface, scaleLimit)
+        const corner = this._atCorner(surface, hitLimit)
         if (!corner) return null
 
         const isOnInnerRing = this._withinCornerRadius(
             surface,
             corner,
-            rotateLimit
+            hitLimit
         )
         const mode = isOnInnerRing && this.rotationEnabled ? 'rotate' : 'scale'
         return { mode, corner }
@@ -482,6 +500,31 @@ export default class SelectionController {
         return distSq(point.x, point.y, p.x, p.y) < limit * limit
     }
 
+    // Touch arrives as synthetic mouse events, so the device pointer type is the
+    // only signal available — coarse (finger) pointers get a more forgiving slop.
+    private _hitSlopPx(): number {
+        const coarse =
+            typeof window !== 'undefined' &&
+            window.matchMedia?.('(pointer: coarse)')?.matches
+        return coarse ? HANDLE_HIT_SLOP_TOUCH : HANDLE_HIT_SLOP_MOUSE
+    }
+
+    // Is the surface point inside the selection box body (the drag zone)? Uses
+    // the same rotation convention as _vertexToSurface, derotated into box space.
+    private _withinBody(point: { x: number; y: number }): boolean {
+        const rot = this.ui.rotation || 0
+        const dx = point.x - this.ui.position.x
+        const dy = point.y - this.ui.position.y
+        const cos = Math.cos(-rot)
+        const sin = Math.sin(-rot)
+        const lx = dx * cos - dy * sin
+        const ly = dx * sin + dy * cos
+        return (
+            Math.abs(lx) <= this.box.width / 2 &&
+            Math.abs(ly) <= this.box.height / 2
+        )
+    }
+
     // ---------- Interaction lifecycle ----------
 
     beginInteraction(e: MouseEvent, hit: HitResult | null): boolean {
@@ -560,7 +603,15 @@ export default class SelectionController {
             if (this.interaction) return
             const hit = this.hitTest(ev.clientX, ev.clientY)
             if (!hit) {
-                this.domElement.style.cursor = ''
+                // Over the shape body → move (4-way arrow drag cue); empty
+                // canvas → default.
+                const surface = this.zui.clientToSurface(
+                    ev.clientX,
+                    ev.clientY
+                )
+                this.domElement.style.cursor = this._withinBody(surface)
+                    ? 'move'
+                    : ''
                 return
             }
             if (hit.mode === 'rotate') {
diff --git a/src/common.css b/src/common.css
index 9ce773c..feb048a 100644
--- a/src/common.css
+++ b/src/common.css
@@ -17,6 +17,14 @@
     cursor: pointer;
 }
 
+/* A selected shape's body is a drag zone — show the 4-way move cursor over it.
+   More specific than the bare .dragger-picker rule, so it wins; draw/pan modes
+   still override via their !important rules. Resize handles aren't
+   .dragger-picker, so they keep the directional resize cursor from the root. */
+.shape-selected .dragger-picker {
+    cursor: move;
+}
+
 /* While a draw mode (pencil/arrow/rubber) is active, the canvas-wide
    crosshair cursor must not be overridden by per-shape rules. */
 .draw-mode-active .dragger-picker {
diff --git a/src/components/sidebar/menuDrawer.tsx b/src/components/sidebar/menuDrawer.tsx
index 5f740ff..a7bc092 100644
--- a/src/components/sidebar/menuDrawer.tsx
+++ b/src/components/sidebar/menuDrawer.tsx
@@ -3,6 +3,7 @@ import type { ReactElement } from 'react'
 import { Link } from 'react-router-dom'
 import routes from '../../routes'
 import { useBoardContext } from '../../views/Board/boardContext'
+import { downloadViewportAsImage } from '../../utils/exportViewport'
 import Modal from '../common/modal'
 import Button from '../common/button'
 
@@ -63,10 +64,36 @@ const TrashIcon = (): ReactElement => (
     </svg>
 )
 
+const DownloadIcon = (): ReactElement => (
+    <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M7 1.5v7M4 5.5L7 8.5l3-3"
+            stroke="#8C7E6A"
+            strokeWidth="1.1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M2 9.5v1.5a1 1 0 001 1h8a1 1 0 001-1V9.5"
+            stroke="#8C7E6A"
+            strokeWidth="1.1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+)
+
 const MenuDrawer = (): ReactElement => {
     const refNode = useRef<HTMLDivElement | null>(null)
     const [showMenu, setShowMenu] = useState(false)
     const [showConfirm, setShowConfirm] = useState(false)
+    const [isExporting, setIsExporting] = useState(false)
     const { clearBoard } = useBoardContext()
 
     useEffect(() => {
@@ -85,6 +112,18 @@ const MenuDrawer = (): ReactElement => {
         setShowConfirm(true)
     }
 
+    const handleDownloadClick = async (): Promise<void> => {
+        setShowMenu(false)
+        try {
+            setIsExporting(true)
+            await downloadViewportAsImage()
+        } catch (err) {
+            console.error('Failed to export viewport as image', err)
+        } finally {
+            setIsExporting(false)
+        }
+    }
+
     const handleConfirmClear = (): void => {
         clearBoard()
         setShowConfirm(false)
@@ -230,6 +269,25 @@ const MenuDrawer = (): ReactElement => {
 
                         <div className="h-px bg-border-panel mx-2 mt-1 mb-1" />
 
+                        <button
+                            className="flex items-center gap-2.5 px-3 py-2 mx-1 text-sm text-ink-mid
+                                hover:bg-accent/30 rounded cursor-pointer
+                                transition-colors ease-in-out duration-150
+                                disabled:opacity-50 disabled:cursor-default"
+                            style={{ width: 'calc(100% - 8px)' }}
+                            onClick={handleDownloadClick}
+                            disabled={isExporting}
+                        >
+                            <DownloadIcon />
+                            <span>
+                                {isExporting
+                                    ? 'Preparing image…'
+                                    : 'Download as image'}
+                            </span>
+                        </button>
+
+                        <div className="h-px bg-border-panel mx-2 mt-1 mb-1" />
+
                         <button
                             className="flex items-center gap-2.5 px-3 py-2 mx-1 text-sm text-red-500
                                 hover:bg-red-500/10 rounded cursor-pointer
diff --git a/src/newCanvas.tsx b/src/newCanvas.tsx
index db6e432..20866c1 100644
--- a/src/newCanvas.tsx
+++ b/src/newCanvas.tsx
@@ -141,6 +141,12 @@ type SetOnGroupHandlerFn = (obj: any) => void
  */
 
 let isDrawing: boolean = false
+// True only while a pencil stroke is mid-flight (mousedown → mouseup). An
+// in-progress stroke isn't committed to the history log until mouseup, so
+// undo/redo must be blocked during this window — otherwise Ctrl+Z would pop the
+// previously committed element and the redo stack gets clobbered when the
+// current stroke commits, losing that earlier element for good.
+let isPencilStrokeActive: boolean = false
 let defaultLinewidthValue: number = 1
 let defaultStrokeTypeValue: string | null = null
 let defaultStrokeColorValue: string = PENCIL_DEFAULT_COLOR
@@ -1283,6 +1289,10 @@ function addZUI(
                 domElement.addEventListener('mousemove', mousemove, false)
                 domElement.addEventListener('mouseup', mouseup, false)
 
+                // Stroke is now mid-flight — block undo/redo until mouseup
+                // commits it (see isPencilStrokeActive declaration).
+                isPencilStrokeActive = true
+
                 // Single growing curved path for live preview — matches the
                 // final factory render so there's no visual jump on mouseup.
                 pencilGroup = two.makeGroup()
@@ -2064,6 +2074,9 @@ function addZUI(
                 domElement.removeEventListener('mouseup', mouseup, false)
                 break
             case SCENARIO_PENCIL_MODE: {
+                // Gesture is over — re-enable undo/redo before the stroke is
+                // committed to the store/history just below.
+                isPencilStrokeActive = false
                 const capturedPencilGroup = pencilGroup
                 pencilGroup = null
                 pencilPath = null
@@ -2858,6 +2871,9 @@ const Canvas: React.FC<CanvasProps> = (props) => {
 
     useEffect(() => {
         isPencilModeRef.current = props.isPencilMode
+        // Toggling the pencil tool means no stroke is in flight — clear the
+        // guard so a missed mouseup can't leave undo blocked indefinitely.
+        isPencilStrokeActive = false
         const root = document.getElementById('main-two-root')
         if (props.isPencilMode === true) {
             isDrawing = true
@@ -3011,6 +3027,11 @@ const Canvas: React.FC<CanvasProps> = (props) => {
         const onUndoRedoKeyDown = (evt: KeyboardEvent) => {
             if (evt.key.toLowerCase() === 'z' && (evt.ctrlKey || evt.metaKey)) {
                 evt.preventDefault()
+                // Don't undo/redo mid-stroke — the in-progress pencil stroke
+                // isn't in history yet, so undoing here would pop the wrong
+                // (previously committed) element. User must finish the stroke
+                // first. See isPencilStrokeActive.
+                if (isPencilStrokeActive) return
                 if (evt.shiftKey) {
                     redoLastAction()
                 } else {
diff --git a/src/utils/exportViewport.ts b/src/utils/exportViewport.ts
new file mode 100644
index 0000000..9de346c
--- /dev/null
+++ b/src/utils/exportViewport.ts
@@ -0,0 +1,223 @@
+// Export the current canvas viewport as a PNG.
+//
+// Two.js runs the SVG renderer in fullscreen mode (see src/newCanvas.tsx), so
+// the live <svg> element IS the viewport: any scene content panned/zoomed
+// outside the window sits outside the SVG's 0..W / 0..H box and is clipped for
+// free when we rasterize at viewport size. We therefore never touch the live
+// scene — we clone the SVG, re-create the CSS-only dotted background, embed the
+// web font(s) used on canvas (the rasterizer has no access to document fonts),
+// stamp a screen-space watermark, then draw the SVG onto a <canvas> and
+// download it as PNG.
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+const CANVAS_BG = '#f5f0e8' // --color-canvas (App.css)
+const DOT_COLOR = '#c4b89a' // radial-gradient dot color (App.css)
+const DOT_TILE = 24 // background-size: 24px 24px (App.css)
+const WATERMARK_TEXT = 'Made with craftbase.org'
+// Fonts used for canvas text. --font-sketch: 'Caveat' (App.css). Embedded so
+// rasterized text matches the screen instead of falling back to a system font.
+const FONT_FAMILIES = ['Caveat']
+const MAX_DPR = 2 // cap device-pixel scaling to bound output file size
+
+/**
+ * Download the currently-visible viewport as a PNG. Resolves once the download
+ * has been triggered; rejects if the SVG can't be found or rasterization fails.
+ * Font embedding failures are non-fatal (image still produced, text may fall
+ * back to a system font).
+ */
+export async function downloadViewportAsImage(): Promise<void> {
+    const svg = document.querySelector<SVGSVGElement>('#main-two-root svg')
+    if (!svg) throw new Error('Canvas SVG element not found')
+
+    const rect = svg.getBoundingClientRect()
+    const width = Math.round(rect.width)
+    const height = Math.round(rect.height)
+    if (width === 0 || height === 0) {
+        throw new Error('Canvas has zero size; nothing to export')
+    }
+
+    const clone = svg.cloneNode(true) as SVGSVGElement
+    clone.setAttribute('xmlns', SVG_NS)
+    clone.setAttribute('width', String(width))
+    clone.setAttribute('height', String(height))
+    clone.setAttribute('viewBox', `0 0 ${width} ${height}`)
+
+    injectBackground(clone, width, height)
+    await embedFonts(clone)
+    appendWatermark(clone, width, height)
+
+    const svgString = new XMLSerializer().serializeToString(clone)
+    await rasterizeAndDownload(svgString, width, height)
+}
+
+/** Re-create the CSS-only dotted canvas background as SVG content. */
+function injectBackground(
+    svg: SVGSVGElement,
+    width: number,
+    height: number
+): void {
+    const defs = document.createElementNS(SVG_NS, 'defs')
+    const pattern = document.createElementNS(SVG_NS, 'pattern')
+    pattern.setAttribute('id', 'cb-dots')
+    pattern.setAttribute('width', String(DOT_TILE))
+    pattern.setAttribute('height', String(DOT_TILE))
+    pattern.setAttribute('patternUnits', 'userSpaceOnUse')
+    const dot = document.createElementNS(SVG_NS, 'circle')
+    dot.setAttribute('cx', '1')
+    dot.setAttribute('cy', '1')
+    dot.setAttribute('r', '1')
+    dot.setAttribute('fill', DOT_COLOR)
+    pattern.appendChild(dot)
+    defs.appendChild(pattern)
+
+    const solid = document.createElementNS(SVG_NS, 'rect')
+    solid.setAttribute('x', '0')
+    solid.setAttribute('y', '0')
+    solid.setAttribute('width', String(width))
+    solid.setAttribute('height', String(height))
+    solid.setAttribute('fill', CANVAS_BG)
+
+    const dots = document.createElementNS(SVG_NS, 'rect')
+    dots.setAttribute('x', '0')
+    dots.setAttribute('y', '0')
+    dots.setAttribute('width', String(width))
+    dots.setAttribute('height', String(height))
+    dots.setAttribute('fill', 'url(#cb-dots)')
+
+    // First children → rendered behind the scene content.
+    svg.insertBefore(dots, svg.firstChild)
+    svg.insertBefore(solid, svg.firstChild)
+    svg.insertBefore(defs, svg.firstChild)
+}
+
+/** Bottom-right, screen-space watermark (fixed regardless of zoom/pan). */
+function appendWatermark(
+    svg: SVGSVGElement,
+    width: number,
+    height: number
+): void {
+    const text = document.createElementNS(SVG_NS, 'text')
+    text.setAttribute('x', String(width - 16))
+    text.setAttribute('y', String(height - 14))
+    text.setAttribute('text-anchor', 'end')
+    text.setAttribute('font-family', 'Caveat')
+    text.setAttribute('font-size', '20')
+    text.setAttribute('fill', '#8C7E6A')
+    text.setAttribute('fill-opacity', '0.8')
+    text.textContent = WATERMARK_TEXT
+    // Last child → drawn on top of everything.
+    svg.appendChild(text)
+}
+
+/**
+ * Inline the Google web font(s) as base64 inside a <style> in the clone. The
+ * SVG→<canvas> rasterizer renders in an isolated context with no access to the
+ * document's loaded fonts, so without this, canvas text falls back to a system
+ * font. Best-effort: any failure leaves the SVG unmodified.
+ */
+async function embedFonts(svg: SVGSVGElement): Promise<void> {
+    try {
+        const family = FONT_FAMILIES.map(
+            (f) => `family=${encodeURIComponent(f)}:wght@400..700`
+        ).join('&')
+        const cssUrl = `https://fonts.googleapis.com/css2?${family}&display=swap`
+        const cssResp = await fetch(cssUrl)
+        if (!cssResp.ok) return
+        let css = await cssResp.text()
+
+        const urls = [...css.matchAll(/url\((https:\/\/[^)]+)\)/g)].map(
+            (m) => m[1] as string
+        )
+        const uniqueUrls = [...new Set(urls)]
+        await Promise.all(
+            uniqueUrls.map(async (url) => {
+                const dataUri = await fetchAsDataUri(url)
+                if (dataUri) css = css.split(url).join(dataUri)
+            })
+        )
+
+        const style = document.createElementNS(SVG_NS, 'style')
+        style.textContent = css
+        svg.insertBefore(style, svg.firstChild)
+    } catch (err) {
+        // Non-fatal: keep going without embedded fonts.
+        console.warn('Font embedding failed; exporting with fallback font', err)
+    }
+}
+
+/** Fetch a font binary and return a base64 data URI, or null on failure. */
+async function fetchAsDataUri(url: string): Promise<string | null> {
+    try {
+        const resp = await fetch(url)
+        if (!resp.ok) return null
+        const buf = await resp.arrayBuffer()
+        const mime = resp.headers.get('content-type') || 'font/woff2'
+        let binary = ''
+        const bytes = new Uint8Array(buf)
+        for (let i = 0; i < bytes.byteLength; i++) {
+            binary += String.fromCharCode(bytes[i] as number)
+        }
+        return `data:${mime};base64,${btoa(binary)}`
+    } catch {
+        return null
+    }
+}
+
+/** Draw the serialized SVG onto a HiDPI canvas and trigger a PNG download. */
+function rasterizeAndDownload(
+    svgString: string,
+    width: number,
+    height: number
+): Promise<void> {
+    return new Promise((resolve, reject) => {
+        const svgBlob = new Blob([svgString], {
+            type: 'image/svg+xml;charset=utf-8',
+        })
+        const svgUrl = URL.createObjectURL(svgBlob)
+        const img = new Image()
+
+        img.onload = (): void => {
+            try {
+                const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR)
+                const canvas = document.createElement('canvas')
+                canvas.width = Math.round(width * dpr)
+                canvas.height = Math.round(height * dpr)
+                const ctx = canvas.getContext('2d')
+                if (!ctx) {
+                    URL.revokeObjectURL(svgUrl)
+                    reject(new Error('Could not get 2D canvas context'))
+                    return
+                }
+                ctx.scale(dpr, dpr)
+                ctx.drawImage(img, 0, 0, width, height)
+                URL.revokeObjectURL(svgUrl)
+
+                canvas.toBlob((blob) => {
+                    if (!blob) {
+                        reject(new Error('Canvas export produced no data'))
+                        return
+                    }
+                    const pngUrl = URL.createObjectURL(blob)
+                    const a = document.createElement('a')
+                    a.href = pngUrl
+                    a.download = `craftbase-${Date.now()}.png`
+                    document.body.appendChild(a)
+                    a.click()
+                    document.body.removeChild(a)
+                    URL.revokeObjectURL(pngUrl)
+                    resolve()
+                }, 'image/png')
+            } catch (err) {
+                URL.revokeObjectURL(svgUrl)
+                reject(err instanceof Error ? err : new Error(String(err)))
+            }
+        }
+
+        img.onerror = (): void => {
+            URL.revokeObjectURL(svgUrl)
+            reject(new Error('Failed to rasterize SVG'))
+        }
+
+        img.src = svgUrl
+    })
+}
diff --git a/src/utils/welcomeSketch.ts b/src/utils/welcomeSketch.ts
index 3e59ce9..56e00a8 100644
--- a/src/utils/welcomeSketch.ts
+++ b/src/utils/welcomeSketch.ts
@@ -257,7 +257,7 @@ function buildMobileWelcomeSketch(
         // Subhead — two compact lines in the upper-left, sitting well inside
         // the corner. Both lines type themselves in (top line first), then the
         // rest of the sketch follows.
-        makeHeadline(boardId, 72, 132, 'A minimal whiteboard.', 22),
+        makeHeadline(boardId, 72, 132, 'A minimal "infinite" whiteboard.', 22),
         makeHeadline(boardId, 72, 164, 'Start drawing →', 20),
 
         // Rect-with-text centered. "Tap me" since drag-on-touch is two-finger.
@@ -300,7 +300,7 @@ function buildLargeWelcomeSketch(
         // Subhead — two-line sketch text in the upper-left region, sitting well
         // inside the corner and clear of the top-center shapes toolbar. Both
         // lines type themselves in (top line first), then the rest follows.
-        makeHeadline(boardId, 150, 175, 'A minimal whiteboard.', 32),
+        makeHeadline(boardId, 150, 175, 'A minimal "infinite" whiteboard.', 32),
         makeHeadline(boardId, 150, 215, 'Start drawing →', 28),
 
         // Rect-with-text: the rectangle carries its "Drag me" label via