Snapshot capture: camera-only mode + UI icons → WebP

apps/editor/app/page.tsx

@@ -29,7 +29,7 @@ const SIDEBAR_TABS = [
         alt=""
         className="h-8 w-8 object-contain"
         height={32}
-        src="/icons/scene.png"
+        src="/icons/scene.webp"
         width={32}
       />
     ),
@@ -45,7 +45,7 @@ const SIDEBAR_TABS = [
         alt=""
         className="h-8 w-8 object-contain"
         height={32}
-        src="/icons/build.png"
+        src="/icons/build.webp"
         width={32}
       />
     ),
@@ -61,7 +61,7 @@ const SIDEBAR_TABS = [
         alt=""
         className="h-8 w-8 object-contain"
         height={32}
-        src="/icons/couch.png"
+        src="/icons/couch.webp"
         width={32}
       />
     ),
@@ -77,7 +77,7 @@ const SIDEBAR_TABS = [
         alt=""
         className="h-8 w-8 object-contain"
         height={32}
-        src="/icons/settings.png"
+        src="/icons/settings.webp"
         width={32}
       />
     ),

apps/editor/components/build-tab.tsx

@@ -68,38 +68,38 @@ type MepItem = {
 
 // Same icons + ordering as the community Build sidebar, minus presets.
 const BUILD_TYPES: BuildType[] = [
-  { id: 'wall', label: 'Wall', iconSrc: '/icons/wall.png', kind: 'wall' },
-  { id: 'fence', label: 'Fence', iconSrc: '/icons/fence.png', kind: 'fence' },
-  { id: 'slab', label: 'Slab', iconSrc: '/icons/floor.png', kind: 'slab' },
-  { id: 'ceiling', label: 'Ceiling', iconSrc: '/icons/ceiling.png', kind: 'ceiling' },
-  { id: 'roof', label: 'Roof', iconSrc: '/icons/roof.png', kind: 'roof' },
-  { id: 'stair', label: 'Stairs', iconSrc: '/icons/stairs.png', kind: 'stair' },
-  { id: 'elevator', label: 'Elevator', iconSrc: '/icons/elevator.png', kind: 'elevator' },
-  { id: 'door', label: 'Door', iconSrc: '/icons/door.png', kind: 'door' },
-  { id: 'window', label: 'Window', iconSrc: '/icons/window.png', kind: 'window' },
-  { id: 'column', label: 'Column', iconSrc: '/icons/column.png', kind: 'column' },
-  { id: 'shelf', label: 'Shelf', iconSrc: '/icons/shelf.png', kind: 'shelf' },
-  { id: 'spawn', label: 'Spawn Point', iconSrc: '/icons/spawn-point.png', kind: 'spawn' },
+  { id: 'wall', label: 'Wall', iconSrc: '/icons/wall.webp', kind: 'wall' },
+  { id: 'fence', label: 'Fence', iconSrc: '/icons/fence.webp', kind: 'fence' },
+  { id: 'slab', label: 'Slab', iconSrc: '/icons/floor.webp', kind: 'slab' },
+  { id: 'ceiling', label: 'Ceiling', iconSrc: '/icons/ceiling.webp', kind: 'ceiling' },
+  { id: 'roof', label: 'Roof', iconSrc: '/icons/roof.webp', kind: 'roof' },
+  { id: 'stair', label: 'Stairs', iconSrc: '/icons/stairs.webp', kind: 'stair' },
+  { id: 'elevator', label: 'Elevator', iconSrc: '/icons/elevator.webp', kind: 'elevator' },
+  { id: 'door', label: 'Door', iconSrc: '/icons/door.webp', kind: 'door' },
+  { id: 'window', label: 'Window', iconSrc: '/icons/window.webp', kind: 'window' },
+  { id: 'column', label: 'Column', iconSrc: '/icons/column.webp', kind: 'column' },
+  { id: 'shelf', label: 'Shelf', iconSrc: '/icons/shelf.webp', kind: 'shelf' },
+  { id: 'spawn', label: 'Spawn Point', iconSrc: '/icons/spawn-point.webp', kind: 'spawn' },
   // Group tile — no tool of its own; opens the MEP sub-grid below (like Roof).
-  { id: 'mep', label: 'MEP', iconSrc: '/icons/HVAC.png' },
-  { id: 'painting', label: 'Painting', iconSrc: '/icons/paint.png', mode: 'material-paint' },
+  { id: 'mep', label: 'MEP', iconSrc: '/icons/HVAC.webp' },
+  { id: 'painting', label: 'Painting', iconSrc: '/icons/paint.webp', mode: 'material-paint' },
 ]
 
 // MEP sub-grid surfaced under the "MEP" tile — same icons + ordering the MEP
 // tools had in the community Build sidebar.
 const MEP_ITEMS: MepItem[] = [
-  { id: 'duct-segment', label: 'Duct', iconSrc: '/icons/duct.png', kind: 'duct-segment' },
+  { id: 'duct-segment', label: 'Duct', iconSrc: '/icons/duct.webp', kind: 'duct-segment' },
   {
     id: 'duct-terminal',
     label: 'Register',
-    iconSrc: '/icons/registers.png',
+    iconSrc: '/icons/registers.webp',
     kind: 'duct-terminal',
   },
-  { id: 'hvac-equipment', label: 'HVAC Unit', iconSrc: '/icons/HVAC.png', kind: 'hvac-equipment' },
-  { id: 'lineset', label: 'Lineset', iconSrc: '/icons/lineset.png', kind: 'lineset' },
-  { id: 'liquid-line', label: 'Liquid Line', iconSrc: '/icons/lineset.png', kind: 'liquid-line' },
-  { id: 'pipe-segment', label: 'DWV Pipe', iconSrc: '/icons/dwv-pipes.png', kind: 'pipe-segment' },
-  { id: 'pipe-trap', label: 'Trap', iconSrc: '/icons/dwv-pipes.png', kind: 'pipe-trap' },
+  { id: 'hvac-equipment', label: 'HVAC Unit', iconSrc: '/icons/HVAC.webp', kind: 'hvac-equipment' },
+  { id: 'lineset', label: 'Lineset', iconSrc: '/icons/lineset.webp', kind: 'lineset' },
+  { id: 'liquid-line', label: 'Liquid Line', iconSrc: '/icons/lineset.webp', kind: 'liquid-line' },
+  { id: 'pipe-segment', label: 'DWV Pipe', iconSrc: '/icons/dwv-pipes.webp', kind: 'pipe-segment' },
+  { id: 'pipe-trap', label: 'Trap', iconSrc: '/icons/dwv-pipes.webp', kind: 'pipe-trap' },
 ]
 
 /**
@@ -126,7 +126,7 @@ function activatePaintMode(): void {
 
 type RoofFeature = { kind: string; label: string; iconSrc: string }
 
-const ROOF_FEATURE_FALLBACK_ICON = '/icons/roof.png'
+const ROOF_FEATURE_FALLBACK_ICON = '/icons/roof.webp'
 
 /**
  * Roof accessories surfaced under the Roof tile (a "Features" group). Unlike
@@ -386,7 +386,7 @@ export function BuildTab() {
                   aria-hidden
                   className="size-4 object-contain"
                   height={16}
-                  src="/icons/duct-fitting.png"
+                  src="/icons/duct-fitting.webp"
                   width={16}
                 />
                 Add Fitting
@@ -416,7 +416,7 @@ export function BuildTab() {
                   aria-hidden
                   className="size-4 object-contain"
                   height={16}
-                  src="/icons/duct-fitting.png"
+                  src="/icons/duct-fitting.webp"
                   width={16}
                 />
                 Add Fitting

apps/editor/components/scene-loader.tsx

@@ -42,7 +42,7 @@ const SIDEBAR_TABS: (SidebarTab & { component: React.ComponentType })[] = [
         alt=""
         className="h-8 w-8 object-contain"
         height={32}
-        src="/icons/scene.png"
+        src="/icons/scene.webp"
         width={32}
       />
     ),
@@ -58,7 +58,7 @@ const SIDEBAR_TABS: (SidebarTab & { component: React.ComponentType })[] = [
         alt=""
         className="h-8 w-8 object-contain"
         height={32}
-        src="/icons/build.png"
+        src="/icons/build.webp"
         width={32}
       />
     ),

apps/editor/components/viewer-toolbar.tsx

@@ -86,7 +86,7 @@ const VIEW_MODES: { id: ViewMode; label: string; icon: React.ReactNode }[] = [
         alt=""
         className="h-3.5 w-3.5 object-contain"
         height={14}
-        src="/icons/building.png"
+        src="/icons/building.webp"
         width={14}
       />
     ),
@@ -99,7 +99,7 @@ const VIEW_MODES: { id: ViewMode; label: string; icon: React.ReactNode }[] = [
         alt=""
         className="h-3.5 w-3.5 object-contain"
         height={14}
-        src="/icons/blueprint.png"
+        src="/icons/blueprint.webp"
         width={14}
       />
     ),
@@ -121,9 +121,9 @@ const levelModeLabels: Record<string, string> = {
 
 const wallModeOrder = ['cutaway', 'up', 'down'] as const
 const wallModeConfig: Record<string, { icon: string; label: string }> = {
-  up: { icon: '/icons/room.png', label: 'Full height' },
-  cutaway: { icon: '/icons/wallcut.png', label: 'Cutaway' },
-  down: { icon: '/icons/walllow.png', label: 'Low' },
+  up: { icon: '/icons/room.webp', label: 'Full height' },
+  cutaway: { icon: '/icons/wallcut.webp', label: 'Cutaway' },
+  down: { icon: '/icons/walllow.webp', label: 'Low' },
 }
 
 const SHADING_OPTIONS = [

packages/editor/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx

@@ -77,7 +77,7 @@ export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndi
     }
 
     if (mode === 'material-paint') {
-      return { kind: 'asset', iconSrc: '/icons/paint.png' }
+      return { kind: 'asset', iconSrc: '/icons/paint.webp' }
     }
 
     return null

packages/editor/src/components/editor/index.tsx

@@ -569,7 +569,7 @@ function PaintCursorBadge({
           alt=""
           aria-hidden="true"
           className="h-5 w-5 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
-          src="/icons/paint.png"
+          src="/icons/paint.webp"
         />
       </div>
     </div>
@@ -601,10 +601,14 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
 }) {
   // Studio mode is a clean render/snapshot surface — no selection or editing
   // affordances. It mirrors version-preview's chrome gating on the canvas.
-  const noEditing = isVersionPreviewMode || isFirstPersonMode || isStudioMode
+  // Capture (snapshot) mode is camera-only for the same reason: suppress
+  // selection, editing handles, and the tool manager (which mounts the site
+  // boundary flags) so the framed shot stays clean.
+  const isCaptureMode = useEditor((s) => s.isCaptureMode)
+  const noEditing = isVersionPreviewMode || isFirstPersonMode || isStudioMode || isCaptureMode
   return (
     <>
-      {!(isFirstPersonMode || isStudioMode) && <SelectionManager />}
+      {!(isFirstPersonMode || isStudioMode || isCaptureMode) && <SelectionManager />}
       {!noEditing && <BoxSelectTool />}
       {!noEditing && <NodeArrowHandles />}
       {!noEditing && <GroupRotateHandle />}

packages/editor/src/components/systems/zone/zone-system.tsx

@@ -16,6 +16,9 @@ export const ZoneSystem = () => {
     const selectedLevelId = useViewer.getState().selection.levelId
     const selectedZoneId = useViewer.getState().selection.zoneId
     const hoveredId = useViewer.getState().hoveredId
+    // Snapshot capture is a clean, camera-only surface — never show zone
+    // geometry or the HTML zone tags in the framed shot.
+    const isCaptureMode = useEditor.getState().isCaptureMode
 
     const zoneGeometryVisible = structureLayer === 'zones'
     const zones = sceneRegistry.byType.zone || new Set()
@@ -35,8 +38,14 @@ export const ZoneSystem = () => {
       // Keep group visible (so <Html> labels stay active), hide/show meshes only.
       // Show meshes when: in zone mode, selected, or delete-hovered.
       if (!obj.visible) obj.visible = true
-      const meshVisible = zoneGeometryVisible || isSelected || isDeleteHovered
-      const targetOpacity = isSelected || isDeleteHovered ? 1 : zoneGeometryVisible ? 1 : 0
+      const meshVisible = !isCaptureMode && (zoneGeometryVisible || isSelected || isDeleteHovered)
+      const targetOpacity = isCaptureMode
+        ? 0
+        : isSelected || isDeleteHovered
+          ? 1
+          : zoneGeometryVisible
+            ? 1
+            : 0
 
       const walls = (obj as Group).getObjectByName('walls') as Mesh | undefined
       if (walls) {
@@ -73,8 +82,9 @@ export const ZoneSystem = () => {
         obj.userData.__raycastDisabled = true
       }
 
-      // Labels: always visible on the current level (regardless of mode)
-      const showLabel = !!selectedLevelId && isOnSelectedLevel
+      // Labels: visible on the current level (regardless of mode), but never
+      // during snapshot capture.
+      const showLabel = !isCaptureMode && !!selectedLevelId && isOnSelectedLevel
       const labelOpacity = showLabel ? '1' : '0'
       const labelEl = document.getElementById(`${zoneId}-label`)
       if (labelEl && labelEl.style.opacity !== labelOpacity) {

packages/editor/src/components/ui/action-menu/camera-actions.tsx

@@ -33,7 +33,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
               alt="Orbit Left"
               className="h-[28px] w-[28px] -scale-x-100 object-contain opacity-70 transition-opacity group-hover:opacity-100"
               height={28}
-              src="/icons/rotate.png"
+              src="/icons/rotate.webp"
               width={28}
             />
           </ActionButton>
@@ -50,7 +50,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
               alt="Orbit Right"
               className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
               height={28}
-              src="/icons/rotate.png"
+              src="/icons/rotate.webp"
               width={28}
             />
           </ActionButton>
@@ -69,7 +69,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
           alt="Top View"
           className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
           height={28}
-          src="/icons/topview.png"
+          src="/icons/topview.webp"
           width={28}
         />
       </ActionButton>

packages/editor/src/components/ui/action-menu/control-modes.tsx

@@ -24,15 +24,15 @@ type ControlConfig = {
 const controls: ControlConfig[] = [
   {
     id: 'select',
-    imageSrc: '/icons/select.png',
+    imageSrc: '/icons/select.webp',
     label: 'Select',
     shortcut: 'V',
     color: 'hover:bg-blue-500/20 hover:text-blue-400',
     activeColor: 'bg-blue-500/20 text-blue-400',
   },
   {
     id: 'zone',
-    imageSrc: '/icons/zone.png',
+    imageSrc: '/icons/zone.webp',
     label: 'Zone',
     shortcut: 'Z',
     color: 'hover:bg-green-500/20 hover:text-green-400',

packages/editor/src/components/ui/action-menu/furnish-tools.tsx

@@ -8,9 +8,9 @@ export type FurnishToolConfig = {
 }
 
 export const furnishTools: FurnishToolConfig[] = [
-  { id: 'item', iconSrc: '/icons/couch.png', label: 'Furniture', catalogCategory: 'furniture' },
-  { id: 'item', iconSrc: '/icons/appliance.png', label: 'Appliance', catalogCategory: 'appliance' },
-  { id: 'item', iconSrc: '/icons/kitchen.png', label: 'Kitchen', catalogCategory: 'kitchen' },
-  { id: 'item', iconSrc: '/icons/bathroom.png', label: 'Bathroom', catalogCategory: 'bathroom' },
-  { id: 'item', iconSrc: '/icons/tree.png', label: 'Outdoor', catalogCategory: 'outdoor' },
+  { id: 'item', iconSrc: '/icons/couch.webp', label: 'Furniture', catalogCategory: 'furniture' },
+  { id: 'item', iconSrc: '/icons/appliance.webp', label: 'Appliance', catalogCategory: 'appliance' },
+  { id: 'item', iconSrc: '/icons/kitchen.webp', label: 'Kitchen', catalogCategory: 'kitchen' },
+  { id: 'item', iconSrc: '/icons/bathroom.webp', label: 'Bathroom', catalogCategory: 'bathroom' },
+  { id: 'item', iconSrc: '/icons/tree.webp', label: 'Outdoor', catalogCategory: 'outdoor' },
 ]

packages/editor/src/components/ui/action-menu/structure-tools.tsx

@@ -12,26 +12,26 @@ export type ToolConfig = {
 // for cursor/floorplan indicators. Roof-mounted accessories are intentionally
 // absent — they're placed from the roof inspector's "Add element" section.
 export const tools: ToolConfig[] = [
-  { id: 'wall', iconSrc: '/icons/wall.png', label: 'Wall' },
-  { id: 'door', iconSrc: '/icons/door.png', label: 'Door' },
-  { id: 'window', iconSrc: '/icons/window.png', label: 'Window' },
-  { id: 'stair', iconSrc: '/icons/stairs.png', label: 'Stairs' },
-  { id: 'roof', iconSrc: '/icons/roof.png', label: 'Gable Roof' },
-  { id: 'fence', iconSrc: '/icons/fence.png', label: 'Fence' },
-  { id: 'column', iconSrc: '/icons/column.png', label: 'Column' },
-  { id: 'elevator', iconSrc: '/icons/elevator.png', label: 'Elevator' },
-  { id: 'slab', iconSrc: '/icons/floor.png', label: 'Slab' },
-  { id: 'ceiling', iconSrc: '/icons/ceiling.png', label: 'Ceiling' },
-  { id: 'zone', iconSrc: '/icons/zone.png', label: 'Zone' },
-  { id: 'spawn', iconSrc: '/icons/spawn-point.png', label: 'Spawn Point' },
-  { id: 'shelf', iconSrc: '/icons/shelf.png', label: 'Shelf' },
-  { id: 'duct-segment', iconSrc: '/icons/duct.png', label: 'Duct' },
-  { id: 'duct-fitting', iconSrc: '/icons/duct-fitting.png', label: 'Duct Fitting' },
-  { id: 'duct-terminal', iconSrc: '/icons/registers.png', label: 'Register' },
-  { id: 'hvac-equipment', iconSrc: '/icons/HVAC.png', label: 'HVAC Unit' },
-  { id: 'pipe-segment', iconSrc: '/icons/dwv-pipes.png', label: 'DWV Pipe' },
-  { id: 'pipe-trap', iconSrc: '/icons/dwv-pipes.png', label: 'Trap' },
-  { id: 'pipe-fitting', iconSrc: '/icons/duct-fitting.png', label: 'Pipe Fitting' },
-  { id: 'lineset', iconSrc: '/icons/lineset.png', label: 'Lineset' },
-  { id: 'liquid-line', iconSrc: '/icons/lineset.png', label: 'Liquid Line' },
+  { id: 'wall', iconSrc: '/icons/wall.webp', label: 'Wall' },
+  { id: 'door', iconSrc: '/icons/door.webp', label: 'Door' },
+  { id: 'window', iconSrc: '/icons/window.webp', label: 'Window' },
+  { id: 'stair', iconSrc: '/icons/stairs.webp', label: 'Stairs' },
+  { id: 'roof', iconSrc: '/icons/roof.webp', label: 'Gable Roof' },
+  { id: 'fence', iconSrc: '/icons/fence.webp', label: 'Fence' },
+  { id: 'column', iconSrc: '/icons/column.webp', label: 'Column' },
+  { id: 'elevator', iconSrc: '/icons/elevator.webp', label: 'Elevator' },
+  { id: 'slab', iconSrc: '/icons/floor.webp', label: 'Slab' },
+  { id: 'ceiling', iconSrc: '/icons/ceiling.webp', label: 'Ceiling' },
+  { id: 'zone', iconSrc: '/icons/zone.webp', label: 'Zone' },
+  { id: 'spawn', iconSrc: '/icons/spawn-point.webp', label: 'Spawn Point' },
+  { id: 'shelf', iconSrc: '/icons/shelf.webp', label: 'Shelf' },
+  { id: 'duct-segment', iconSrc: '/icons/duct.webp', label: 'Duct' },
+  { id: 'duct-fitting', iconSrc: '/icons/duct-fitting.webp', label: 'Duct Fitting' },
+  { id: 'duct-terminal', iconSrc: '/icons/registers.webp', label: 'Register' },
+  { id: 'hvac-equipment', iconSrc: '/icons/HVAC.webp', label: 'HVAC Unit' },
+  { id: 'pipe-segment', iconSrc: '/icons/dwv-pipes.webp', label: 'DWV Pipe' },
+  { id: 'pipe-trap', iconSrc: '/icons/dwv-pipes.webp', label: 'Trap' },
+  { id: 'pipe-fitting', iconSrc: '/icons/duct-fitting.webp', label: 'Pipe Fitting' },
+  { id: 'lineset', iconSrc: '/icons/lineset.webp', label: 'Lineset' },
+  { id: 'liquid-line', iconSrc: '/icons/lineset.webp', label: 'Liquid Line' },
 ]