void
+ onError: (message: string | null) => void
+}) {
+ const setSelection = useViewer((state) => state.setSelection)
+ const updateNode = useScene((state) => state.updateNode)
+ const deleteNode = useScene((state) => state.deleteNode)
+ const selectedReferenceId = useEditor((state) => state.selectedReferenceId)
+ const setSelectedReferenceId = useEditor((state) => state.setSelectedReferenceId)
+ const hasItems = nodes.length > 0
+
+ const handleSelect = useCallback(
+ (id: AnyNodeId) => {
+ setShow(true)
+ setSelectedReferenceId(id)
+ setSelection({ selectedIds: [], zoneId: null })
+ },
+ [setShow, setSelectedReferenceId, setSelection],
+ )
+
+ return (
+ (null)
+
+ const scans = useLevelScans()
+ const guides = useLevelGuides()
+ const total = scans.length + guides.length
+ const anyVisible = showScans || showGuides
+
+ const toggleAll = useCallback(() => {
+ const next = !anyVisible
+ setShowScans(next)
+ setShowGuides(next)
+ }, [anyVisible, setShowScans, setShowGuides])
+
+ return (
+
+
+
+
+ )
+}
+
// ── Reference floor control ────────────────────────────────────────────────────────────────────
function ReferenceFloorControl() {
@@ -753,8 +994,7 @@ export { GridSnapControl }
export function SecondaryToggles() {
return (
(null)
+
+ // The whole panel is collapsed to just its header by default; the chevron
+ // expands it to reveal the inspector body.
+ const [collapsed, setCollapsed] = useState(true)
+
+ // Drag-to-reposition from the header. `offset` is a translation applied on
+ // top of the default `top-20 right-4` anchor; null until first dragged.
+ // Dragging is clamped so no edge of the panel leaves the viewport.
+ const [offset, setOffset] = useState<{ x: number; y: number } | null>(null)
+ const [isDragging, setIsDragging] = useState(false)
+ const dragRef = useRef<{
+ startX: number
+ startY: number
+ baseX: number
+ baseY: number
+ rectLeft: number
+ rectTop: number
+ width: number
+ height: number
+ minLeft: number
+ maxLeft: number
+ minTop: number
+ maxTop: number
+ moved: boolean
+ } | null>(null)
+
+ const handleHeaderPointerDown = useCallback(
+ (e: React.PointerEvent) => {
+ // Buttons (close / reset / collapse) handle their own clicks.
+ if ((e.target as HTMLElement).closest('button')) return
+ const rect = panelRef.current?.getBoundingClientRect()
+ if (!rect) return
+ const bounds = getDragBounds(panelRef.current)
+ const base = offset ?? { x: 0, y: 0 }
+ dragRef.current = {
+ startX: e.clientX,
+ startY: e.clientY,
+ baseX: base.x,
+ baseY: base.y,
+ rectLeft: rect.left,
+ rectTop: rect.top,
+ width: rect.width,
+ height: rect.height,
+ minLeft: bounds.left + DRAG_MARGIN,
+ maxLeft: bounds.right - rect.width - DRAG_MARGIN,
+ minTop: bounds.top + DRAG_MARGIN,
+ maxTop: bounds.bottom - rect.height - DRAG_MARGIN,
+ moved: false,
+ }
+ setIsDragging(true)
+ e.currentTarget.setPointerCapture(e.pointerId)
+ },
+ [offset],
+ )
+
+ const handleHeaderPointerMove = useCallback((e: React.PointerEvent) => {
+ const drag = dragRef.current
+ if (!drag) return
+ const dx = e.clientX - drag.startX
+ const dy = e.clientY - drag.startY
+ // Hold position until the press clearly becomes a drag, so a click can
+ // still toggle collapse.
+ if (!drag.moved && Math.hypot(dx, dy) <= CLICK_SLOP) return
+ drag.moved = true
+ const left = clamp(drag.rectLeft + dx, drag.minLeft, drag.maxLeft)
+ const top = clamp(drag.rectTop + dy, drag.minTop, drag.maxTop)
+ setOffset({ x: drag.baseX + (left - drag.rectLeft), y: drag.baseY + (top - drag.rectTop) })
+ }, [])
+
+ const handleHeaderPointerUp = useCallback((e: React.PointerEvent) => {
+ const drag = dragRef.current
+ if (!drag) return
+ dragRef.current = null
+ setIsDragging(false)
+ e.currentTarget.releasePointerCapture(e.pointerId)
+ // A press that never turned into a drag is a click → toggle collapse.
+ if (!drag.moved) setCollapsed((c) => !c)
+ }, [])
+
+ // Expanding can grow the panel past an edge if it was dragged there while
+ // collapsed — nudge it back inside the viewer bounds.
+ useLayoutEffect(() => {
+ if (isMobile || collapsed) return
+ const el = panelRef.current
+ if (!el) return
+ const rect = el.getBoundingClientRect()
+ const bounds = getDragBounds(el)
+ const left = clamp(rect.left, bounds.left + DRAG_MARGIN, bounds.right - rect.width - DRAG_MARGIN)
+ const top = clamp(rect.top, bounds.top + DRAG_MARGIN, bounds.bottom - rect.height - DRAG_MARGIN)
+ const dx = left - rect.left
+ const dy = top - rect.top
+ if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
+ setOffset((prev) => ({ x: (prev?.x ?? 0) + dx, y: (prev?.y ?? 0) + dy }))
+ }
+ }, [collapsed, isMobile])
+
return (
+
+ )
+}
+
+function ReferencesControl() {
+ const showScans = useViewer((state) => state.showScans)
+ const setShowScans = useViewer((state) => state.setShowScans)
+ const showGuides = useViewer((state) => state.showGuides)
+ const setShowGuides = useViewer((state) => state.setShowGuides)
+ const [isOpen, setIsOpen] = useState(false)
+ const [uploadError, setUploadError] = useState
+
+ 
+
+
+
+ {hasItems ? (
+
+
+
+ {title}
+ {hasItems && ( ++ {nodes.length} {noun} + {nodes.length !== 1 ? 's' : ''} on this level +
+ )} +
+ {nodes.map((node, index) => (
+
+ ) : (
+
+
+ updateNode(node.id, { opacity: Math.round(Math.min(100, Math.max(0, value))) })
+ }
+ precision={0}
+ step={1}
+ unit="%"
+ value={node.opacity}
+ />
+
+ ))}
+
+
+
+
+
+ {emptyText}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ 
+
+ {total}
+
+
+
+
+ {total}
+
+
+ {uploadError && (
+
+
+ {uploadError}
+
+ )}
+
-
)
}
diff --git a/packages/editor/src/components/ui/panels/panel-wrapper.tsx b/packages/editor/src/components/ui/panels/panel-wrapper.tsx
index c38c9f85..b4ae3344 100644
--- a/packages/editor/src/components/ui/panels/panel-wrapper.tsx
+++ b/packages/editor/src/components/ui/panels/panel-wrapper.tsx
@@ -1,11 +1,46 @@
'use client'
-import { ChevronLeft, RotateCcw, X } from 'lucide-react'
+import { ChevronDown, ChevronLeft, GripHorizontal, RotateCcw, X } from 'lucide-react'
import Image from 'next/image'
-import { createContext, useContext } from 'react'
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useLayoutEffect,
+ useRef,
+ useState,
+} from 'react'
import { useIsMobile } from '../../../hooks/use-mobile'
import { cn } from '../../../lib/utils'
+const DRAG_MARGIN = 8
+// Pointer travel (px) below which a header press is treated as a click
+// (toggles collapse) rather than a drag.
+const CLICK_SLOP = 4
+
+function clamp(value: number, min: number, max: number): number {
+ return Math.min(Math.max(value, min), Math.max(min, max))
+}
+
+/**
+ * Bounds the panel is allowed to occupy — the viewer column (tagged with
+ * `data-viewer-bounds`) so it can't slide under the sidebar or top bar.
+ * Falls back to the viewport when the marker isn't found.
+ */
+function getDragBounds(el: HTMLElement | null): {
+ left: number
+ top: number
+ right: number
+ bottom: number
+} {
+ const region = el?.closest('[data-viewer-bounds]')
+ const rect = region?.getBoundingClientRect()
+ if (!rect) {
+ return { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight }
+ }
+ return { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom }
+}
+
/**
* Host-supplied inspector footer (e.g. community's "Save as preset"). The
* `PanelManager` provides it so every panel — including kind-owned
@@ -47,6 +82,103 @@ export function PanelWrapper({
const contextFooter = useContext(InspectorFooterContext)
const resolvedFooter = footer ?? contextFooter
+ const panelRef = useRef
- {/* Header — desktop only; mobile sheet provides its own header */}
+ {/* Header — desktop only; mobile sheet provides its own header. Doubles
+ as the drag handle (grip in the middle) for repositioning the panel. */}
{!isMobile && (
-
-
+
+ ()(
})
}
},
+ workspaceMode: 'edit' as WorkspaceMode,
+ _viewModeBeforeStudio: null as ViewMode | null,
+ setWorkspaceMode: (mode) => {
+ if (get().workspaceMode === mode) return
+ if (mode === 'studio') {
+ const currentViewMode = get().viewMode
+ set({
+ workspaceMode: 'studio',
+ _viewModeBeforeStudio: currentViewMode,
+ viewMode: '3d',
+ isFloorplanOpen: false,
+ mode: 'select',
+ tool: null,
+ catalogCategory: null,
+ })
+ // Clear selection so no edit affordances bleed into the clean canvas.
+ useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
+ } else {
+ const prevMode = get()._viewModeBeforeStudio
+ set({
+ workspaceMode: 'edit',
+ _viewModeBeforeStudio: null,
+ ...(prevMode ? { viewMode: prevMode, isFloorplanOpen: prevMode !== '3d' } : {}),
+ })
+ }
+ },
activeSidebarPanel: DEFAULT_ACTIVE_SIDEBAR_PANEL,
setActiveSidebarPanel: (id) => set({ activeSidebarPanel: id }),
floorplanPaneRatio: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.floorplanPaneRatio,
{onBack && (
+ {/* Centered grip — purely a visual drag affordance. */}
+
{onReset && (
)}
+
{onClose && (
diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx
index 5023ce55..54d22c76 100644
--- a/packages/editor/src/index.tsx
+++ b/packages/editor/src/index.tsx
@@ -210,6 +210,7 @@ export type {
SplitOrientation,
ToolDefaults,
ViewMode,
+ WorkspaceMode,
} from './store/use-editor'
export { default as useEditor } from './store/use-editor'
export {
diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx
index c8c32d01..69dfebfb 100644
--- a/packages/editor/src/store/use-editor.tsx
+++ b/packages/editor/src/store/use-editor.tsx
@@ -47,6 +47,7 @@ const MAX_FLOORPLAN_PANE_RATIO = 0.85
export type ViewMode = '3d' | '2d' | 'split'
export type SplitOrientation = 'horizontal' | 'vertical'
+export type WorkspaceMode = 'edit' | 'studio'
// Snapshot capture is invoked from two surfaces with different policies.
// `standard` mirrors the existing user-driven UX — pick region / viewport /
@@ -328,6 +329,12 @@ type EditorState = {
isFirstPersonMode: boolean
_viewModeBeforeFirstPerson: ViewMode | null
setFirstPersonMode: (enabled: boolean) => void
+ // Workspace mode: 'edit' is the full editing surface; 'studio' is the
+ // render/snapshot surface (clean canvas, no editing chrome or selection).
+ // Entering studio forces a 3D-only view and restores the prior view on exit.
+ workspaceMode: WorkspaceMode
+ _viewModeBeforeStudio: ViewMode | null
+ setWorkspaceMode: (mode: WorkspaceMode) => void
activeSidebarPanel: string
setActiveSidebarPanel: (id: string) => void
floorplanPaneRatio: number
@@ -851,6 +858,32 @@ const useEditor = create