-
(null)
+
+ // Only show for single selection of specific types
+ const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+ const node = selectedId ? nodes[selectedId as AnyNodeId] : null
+ const isValidType = node ? ALLOWED_TYPES.includes(node.type) : false
+
+ useFrame(() => {
+ if (!selectedId || !isValidType || !groupRef.current) return
+
+ const obj = sceneRegistry.nodes.get(selectedId)
+ if (obj) {
+ // Calculate bounding box in world space
+ const box = new THREE.Box3().setFromObject(obj)
+ if (!box.isEmpty()) {
+ const center = box.getCenter(new THREE.Vector3())
+ // Position slightly above the object
+ groupRef.current.position.set(center.x, box.max.y + 0.3, center.z)
+ }
+ }
+ })
+
+ const handleMove = useCallback((e: React.MouseEvent) => {
+ e.stopPropagation()
+ if (!node) return
+ sfxEmitter.emit('sfx:item-pick')
+ if (node.type === 'item' || node.type === 'window' || node.type === 'door') {
+ setMovingNode(node as any)
+ }
+ setSelection({ selectedIds: [] })
+ }, [node, setMovingNode, setSelection])
+
+ const handleDuplicate = useCallback((e: React.MouseEvent) => {
+ e.stopPropagation()
+ if (!node || !node.parentId) return
+ sfxEmitter.emit('sfx:item-pick')
+ useScene.temporal.getState().pause()
+
+ let duplicateInfo = structuredClone(node) as any
+ delete duplicateInfo.id
+ duplicateInfo.metadata = { ...duplicateInfo.metadata, isNew: true }
+
+ let duplicate: AnyNode | null = null
+ try {
+ if (node.type === 'door') {
+ duplicate = DoorNode.parse(duplicateInfo)
+ } else if (node.type === 'window') {
+ duplicate = WindowNode.parse(duplicateInfo)
+ } else if (node.type === 'item') {
+ duplicate = ItemNode.parse(duplicateInfo)
+ }
+ } catch (error) {
+ console.error('Failed to parse duplicate', error)
+ return
+ }
+
+ if (duplicate) {
+ if (duplicate.type === 'door' || duplicate.type === 'window') {
+ useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+ }
+ if (duplicate.type === 'item' || duplicate.type === 'window' || duplicate.type === 'door') {
+ setMovingNode(duplicate as any)
+ }
+ setSelection({ selectedIds: [] })
+ }
+ }, [node, setMovingNode, setSelection])
+
+ const handleDelete = useCallback((e: React.MouseEvent) => {
+ e.stopPropagation()
+ if (!selectedId || !node) return
+ sfxEmitter.emit('sfx:item-delete')
+ deleteNode(selectedId as AnyNodeId)
+ if (node.parentId) useScene.getState().dirtyNodes.add(node.parentId as AnyNodeId)
+ setSelection({ selectedIds: [] })
+ }, [selectedId, node, deleteNode, setSelection])
+
+ if (!isEditor || !selectedId || !node || !isValidType) return null
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/editor/components/editor/index.tsx b/apps/editor/components/editor/index.tsx
index 8f3d4e4f..e63890da 100644
--- a/apps/editor/components/editor/index.tsx
+++ b/apps/editor/components/editor/index.tsx
@@ -1,7 +1,8 @@
'use client'
+import { useEffect } from 'react'
import { initSpaceDetectionSync, initSpatialGridSync, useScene } from '@pascal-app/core'
-import { Viewer } from '@pascal-app/viewer'
+import { Viewer, useViewer } from '@pascal-app/viewer'
import { useProjectScene } from '@/features/community/lib/models/hooks'
import { useKeyboard } from '@/hooks/use-keyboard'
import { initSFXBus } from '@/lib/sfx-bus'
@@ -18,15 +19,43 @@ import { SidebarProvider } from '../ui/primitives/sidebar'
import { AppSidebar } from '../ui/sidebar/app-sidebar'
import { CustomCameraControls } from './custom-camera-controls'
import { ExportManager } from './export-manager'
+import { FloatingActionMenu } from './floating-action-menu'
import { Grid } from './grid'
import { SelectionManager } from './selection-manager'
import { ThumbnailGenerator } from './thumbnail-generator'
+import { useProjectStore } from '@/features/community/lib/projects/store'
+import { SceneLoader } from '../ui/scene-loader'
// Load default scene initially (will be replaced when project loads)
useScene.getState().loadScene()
initSpatialGridSync()
initSpaceDetectionSync(useScene, useEditor)
+// Auto-select the first building and level for the default scene
+const sceneNodes = useScene.getState().nodes as Record
+const sceneRootIds = useScene.getState().rootNodeIds
+const siteNode = sceneRootIds[0] ? sceneNodes[sceneRootIds[0]] : null
+const resolve = (child: any) => typeof child === 'string' ? sceneNodes[child] : child
+const firstBuilding = siteNode?.children?.map(resolve).find((n: any) => n?.type === 'building')
+const firstLevel = firstBuilding?.children?.map(resolve).find((n: any) => n?.type === 'level')
+
+if (firstBuilding && firstLevel) {
+ useViewer.getState().setSelection({
+ buildingId: firstBuilding.id,
+ levelId: firstLevel.id,
+ selectedIds: [],
+ zoneId: null,
+ })
+ useEditor.getState().setPhase('structure')
+ useEditor.getState().setStructureLayer('elements')
+
+ // Auto-select the wall tool if the level is empty
+ if (!firstLevel.children || firstLevel.children.length === 0) {
+ useEditor.getState().setMode('build')
+ useEditor.getState().setTool('wall')
+ }
+}
+
// Initialize SFX bus to connect events to sound effects
initSFXBus()
@@ -38,14 +67,26 @@ export default function Editor({ projectId }: EditorProps) {
useKeyboard()
useProjectScene()
+ const isProjectLoading = useProjectStore((state) => state.isLoading)
+ const isSceneLoading = useProjectStore((state) => state.isSceneLoading)
+ const isLoading = isProjectLoading || isSceneLoading
+
+ useEffect(() => {
+ document.body.classList.add('dark')
+ return () => {
+ document.body.classList.remove('dark')
+ }
+ }, [])
+
return (
-
e.stopPropagation()}
+ onPointerUp={(e) => e.stopPropagation()}
+ >
+
+
+
+
+
+
+
+ {isLoading &&
+
): string | null => {
+ const level = nodes[levelId];
+ if (!level) return null;
+ if (level.parentId && nodes[level.parentId]?.type === "building") {
+ return level.parentId;
+ }
+ return null;
+};
+
+const computeNextIds = (
+ node: AnyNode,
+ selectedIds: string[],
+ event?: any,
+ modifierKeys?: ModifierKeys
+): string[] => {
+ const isMeta = event?.metaKey || event?.nativeEvent?.metaKey || modifierKeys?.meta || false;
+ const isCtrl = event?.ctrlKey || event?.nativeEvent?.ctrlKey || modifierKeys?.ctrl || false;
+
+ console.log("computeNextIds:", {
+ nodeId: node.id,
+ selectedIds,
+ isMeta,
+ isCtrl,
+ eventMeta: event?.metaKey,
+ nativeMeta: event?.nativeEvent?.metaKey,
+ modMeta: modifierKeys?.meta
+ });
+
+ if (isMeta || isCtrl) {
+ if (selectedIds.includes(node.id)) {
+ return selectedIds.filter((id) => id !== node.id);
+ } else {
+ return [...selectedIds, node.id];
+ }
+ }
+
+ // Not holding modifiers: select only this node
+ return [node.id];
+};
+
const SELECTION_STRATEGIES: Record = {
site: {
types: ["building"],
@@ -45,17 +90,28 @@ const SELECTION_STRATEGIES: Record = {
structure: {
types: ["wall", "item", "zone", "slab", "ceiling", "roof", "window", "door"],
- handleSelect: (node, isShift) => {
+ handleSelect: (node, nativeEvent, modifierKeys) => {
const { selection, setSelection } = useViewer.getState();
+ const nodes = useScene.getState().nodes;
+ const nodeLevelId = resolveLevelId(node, nodes);
+ const buildingId = resolveBuildingId(nodeLevelId, nodes);
+
+ const updates: any = {};
+ if (nodeLevelId !== "default" && nodeLevelId !== selection.levelId) {
+ updates.levelId = nodeLevelId;
+ }
+ if (buildingId && buildingId !== selection.buildingId) {
+ updates.buildingId = buildingId;
+ }
+
if (node.type === 'zone') {
- setSelection({ zoneId: node.id });
+ updates.zoneId = node.id;
+ // Don't reset selectedIds in structure phase for zone, but if we changed level, it might reset them via hierarchy guard.
+ // Wait, the hierarchy guard resets zoneId if levelId changes. That's fine since we provide zoneId.
+ setSelection(updates);
} else {
- const nextIds = isShift
- ? selection.selectedIds.includes(node.id)
- ? selection.selectedIds.filter((id) => id !== node.id)
- : [...selection.selectedIds, node.id]
- : [node.id];
- setSelection({ selectedIds: nextIds });
+ updates.selectedIds = computeNextIds(node, selection.selectedIds, nativeEvent, modifierKeys);
+ setSelection(updates);
}
},
handleDeselect: () => {
@@ -89,14 +145,22 @@ const SELECTION_STRATEGIES: Record = {
furnish: {
types: ["item"],
- handleSelect: (node, isShift) => {
+ handleSelect: (node, nativeEvent, modifierKeys) => {
const { selection, setSelection } = useViewer.getState();
- const nextIds = isShift
- ? selection.selectedIds.includes(node.id)
- ? selection.selectedIds.filter((id) => id !== node.id)
- : [...selection.selectedIds, node.id]
- : [node.id];
- setSelection({ selectedIds: nextIds });
+ const nodes = useScene.getState().nodes;
+ const nodeLevelId = resolveLevelId(node, nodes);
+ const buildingId = resolveBuildingId(nodeLevelId, nodes);
+
+ const updates: any = {};
+ if (nodeLevelId !== "default" && nodeLevelId !== selection.levelId) {
+ updates.levelId = nodeLevelId;
+ }
+ if (buildingId && buildingId !== selection.buildingId) {
+ updates.buildingId = buildingId;
+ }
+
+ updates.selectedIds = computeNextIds(node, selection.selectedIds, nativeEvent, modifierKeys);
+ setSelection(updates);
},
handleDeselect: () => {
useViewer.getState().setSelection({ selectedIds: [] });
@@ -113,39 +177,116 @@ const SELECTION_STRATEGIES: Record = {
export const SelectionManager = () => {
const phase = useEditor((s) => s.phase);
const mode = useEditor((s) => s.mode);
+ const modifierKeysRef = useRef({
+ meta: false,
+ ctrl: false,
+ });
+ const clickHandledRef = useRef(false);
const movingNode = useEditor((s) => s.movingNode);
+ useEffect(() => {
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (event.key === "Meta") modifierKeysRef.current.meta = true;
+ if (event.key === "Control") modifierKeysRef.current.ctrl = true;
+ };
+
+ const onKeyUp = (event: KeyboardEvent) => {
+ if (event.key === "Meta") modifierKeysRef.current.meta = false;
+ if (event.key === "Control") modifierKeysRef.current.ctrl = false;
+ };
+
+ const clearModifiers = () => {
+ modifierKeysRef.current.meta = false;
+ modifierKeysRef.current.ctrl = false;
+ };
+
+ window.addEventListener("keydown", onKeyDown);
+ window.addEventListener("keyup", onKeyUp);
+ window.addEventListener("blur", clearModifiers);
+
+ return () => {
+ window.removeEventListener("keydown", onKeyDown);
+ window.removeEventListener("keyup", onKeyUp);
+ window.removeEventListener("blur", clearModifiers);
+ };
+ }, []);
+
useEffect(() => {
if (mode !== "select") return;
if (movingNode) return;
- const strategy = SELECTION_STRATEGIES[phase];
- if (!strategy) return;
-
const onClick = (event: NodeEvent) => {
- if (!strategy.isValid(event.node)) return;
+ const node = event.node;
+ let currentPhase = useEditor.getState().phase;
+ let targetPhase = currentPhase;
- event.stopPropagation();
- const isShift = event.nativeEvent?.shiftKey;
- strategy.handleSelect(event.node, isShift ?? false);
+ // Auto-switch between structure and furnish phases when clicking elements on the same level
+ if (currentPhase === "structure" || currentPhase === "furnish") {
+ if (isNodeInCurrentLevel(node)) {
+ if (
+ node.type === "wall" ||
+ node.type === "slab" ||
+ node.type === "ceiling" ||
+ node.type === "roof" ||
+ node.type === "window" ||
+ node.type === "door"
+ ) {
+ targetPhase = "structure";
+ } else if (node.type === "item") {
+ const item = node as ItemNode;
+ if (item.asset.category === "door" || item.asset.category === "window") {
+ targetPhase = "structure";
+ } else {
+ targetPhase = "furnish";
+ }
+ }
+
+ if (targetPhase !== currentPhase) {
+ useEditor.getState().setPhase(targetPhase);
+ if (targetPhase === "structure" && useEditor.getState().structureLayer === "zones") {
+ useEditor.getState().setStructureLayer("elements");
+ }
+ currentPhase = targetPhase;
+ }
+ }
+ }
+
+ const activeStrategy = SELECTION_STRATEGIES[currentPhase];
+ if (activeStrategy?.isValid(node)) {
+ event.stopPropagation();
+ clickHandledRef.current = true;
+
+ console.log("[SelectionManager] Valid click on:", node.type, node.id, "Shift:", event.nativeEvent.shiftKey);
+ activeStrategy.handleSelect(node, event.nativeEvent, modifierKeysRef.current);
+
+ // Reset the handled flag after a short delay to allow grid:click to be ignored
+ setTimeout(() => {
+ clickHandledRef.current = false;
+ }, 50);
+ }
};
- // Bind listeners for all potential types this strategy might care about
- strategy.types.forEach((type) => {
- emitter.on(`${type}:click`, onClick);
+ const allTypes = ["wall", "item", "building", "zone", "slab", "ceiling", "roof", "window", "door"];
+ allTypes.forEach((type) => {
+ emitter.on(`${type}:click` as any, onClick as any);
});
- const onGridClick = () => strategy.handleDeselect();
+ const onGridClick = () => {
+ if (clickHandledRef.current) return;
+ console.log("onGridClick triggered! Deselecting.");
+ const activeStrategy = SELECTION_STRATEGIES[useEditor.getState().phase];
+ if (activeStrategy) activeStrategy.handleDeselect();
+ };
emitter.on("grid:click", onGridClick);
return () => {
- strategy.types.forEach((type) => {
- emitter.off(`${type}:click`, onClick);
+ allTypes.forEach((type) => {
+ emitter.off(`${type}:click` as any, onClick as any);
});
emitter.off("grid:click", onGridClick);
};
- }, [phase, mode, movingNode]);
+ }, [mode, movingNode]);
// Global double-click handler for auto-switching phases and cross-phase hover
useEffect(() => {
@@ -231,8 +372,7 @@ export const SelectionManager = () => {
const strategy = SELECTION_STRATEGIES[targetPhase];
if (strategy) {
- const isShift = event.nativeEvent?.shiftKey;
- strategy.handleSelect(node, isShift ?? false);
+ strategy.handleSelect(node, event.nativeEvent, modifierKeysRef.current);
}
}
};
diff --git a/apps/editor/components/pascal-radio.tsx b/apps/editor/components/pascal-radio.tsx
index d882c6ab..e812b5f6 100644
--- a/apps/editor/components/pascal-radio.tsx
+++ b/apps/editor/components/pascal-radio.tsx
@@ -3,10 +3,10 @@
import { Howl } from 'howler'
import { Disc3, Settings2, SkipBack, SkipForward, Volume2, VolumeX } from 'lucide-react'
import { useCallback, useEffect, useRef, useState } from 'react'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/primitives/popover'
import { Slider } from '@/components/ui/slider'
import { cn } from '@/lib/utils'
import useAudio from '@/store/use-audio'
+import { motion, AnimatePresence } from 'framer-motion'
const PLAYLIST = [
{
@@ -66,6 +66,8 @@ export function PascalRadio() {
const [currentTrackIndex, setCurrentTrackIndex] = useState(0)
const { masterVolume, radioVolume, muted, isRadioPlaying, setRadioPlaying } = useAudio()
const soundRef = useRef(null)
+ const [isOpen, setIsOpen] = useState(false)
+ const containerRef = useRef(null)
const currentTrack = shuffledPlaylist[currentTrackIndex]!
@@ -144,74 +146,126 @@ export function PascalRadio() {
useAudio.setState({ radioVolume: value[0] })
}
+ // Handle click outside to close
+ useEffect(() => {
+ function handleClickOutside(event: MouseEvent) {
+ if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+ setIsOpen(false)
+ }
+ }
+ if (isOpen) {
+ document.addEventListener('mousedown', handleClickOutside)
+ }
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside)
+ }
+ }, [isOpen])
+
return (
- (null)
+
+ useEffect(() => {
+ // Pick a random loader on mount
+ setLoaderClass(LOADERS[Math.floor(Math.random() * LOADERS.length)] ?? LOADERS[0]!)
+ }, [])
+
+ if (!loaderClass) return null
+
+ return (
+
{}}
- onClick={() => setSelection({ selectedIds: [node.id] })}
+ onClick={(e: React.MouseEvent) => {
+ e.stopPropagation()
+ const handled = handleTreeSelection(e, node.id, selectedIds, setSelection)
+ if (!handled && useEditor.getState().phase === "furnish") {
+ useEditor.getState().setPhase("structure")
+ }
+ }}
onDoubleClick={() => setIsEditing(true)}
onMouseEnter={() => setHoveredId(node.id)}
onMouseLeave={() => setHoveredId(null)}
isSelected={isSelected}
isHovered={isHovered}
isVisible={node.visible !== false}
+ isLast={isLast}
actions={(null);
+ const [uploading, setUploading] = useState(false);
+ const [uploadingType, setUploadingType] = useState<'scan'|'guide'|null>(null);
+
+ const scanInputRef = useRef(null);
+
+ const references = Object.values(nodes).filter(
+ (node): node is ScanNode | GuideNode =>
+ (node.type === 'scan' || node.type === 'guide') && node.parentId === levelId,
+ );
+
+ const handleAddAsset = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ e.target.value = '';
+
+ const projectId = activeProject?.id;
+ if (!projectId) {
+ setUploadError('No active project. Please open a project first.');
+ return;
+ }
+
+ if (file.size > MAX_FILE_SIZE) {
+ setUploadError(`File is too large (${(file.size / 1024 / 1024).toFixed(0)} MB). Maximum size is 100 MB.`);
+ return;
+ }
+
+ // Auto-detect type based on file extension/mime type
+ const isScan = file.name.toLowerCase().endsWith('.glb') || file.name.toLowerCase().endsWith('.gltf');
+ const isImage = file.type.startsWith('image/');
+
+ if (!isScan && !isImage) {
+ setUploadError('Invalid file type. Please upload a .glb/.gltf scan or an image.');
+ return;
+ }
+
+ const type = isScan ? 'scan' : 'guide';
+
+ setUploadError(null);
+ setUploading(true);
+ setUploadingType(type);
+ const result = await uploadProjectAsset(projectId, file, type);
+ setUploading(false);
+ setUploadingType(null);
+
+ if (!result.success) {
+ setUploadError(result.error);
+ return;
+ }
+
+ const Schema = type === 'scan' ? ScanNodeSchema : GuideNodeSchema;
+ const node = Schema.parse({
+ url: result.url,
+ name: file.name,
+ parentId: levelId,
+ });
+ createNode(node, levelId as AnyNodeId);
+ setSelectedReferenceId(node.id);
+ };
+
+ const handleDelete = async (nodeId: string, e: React.MouseEvent) => {
+ e.stopPropagation();
+ const refNode = nodes[nodeId as AnyNodeId] as ScanNode | GuideNode | undefined;
+ const projectId = activeProject?.id;
+
+ if (
+ projectId &&
+ refNode?.url &&
+ (refNode.url.startsWith('http://') || refNode.url.startsWith('https://'))
+ ) {
+ deleteProjectAssetByUrl(projectId, refNode.url);
+ }
+ deleteNode(nodeId as AnyNodeId);
+ };
+
+ const rows = [
+ { type: 'upload' as const },
+ ...references.map(ref => ({ type: 'ref' as const, data: ref }))
+ ];
+
+ return (
+ ) => void;
isLast?: boolean;
@@ -336,6 +522,11 @@ function LevelItem({
const [isEditing, setIsEditing] = useState(false);
const itemRef = useRef(null);
const isSelected = selectedLevelId === level.id;
+ const [isExpanded, setIsExpanded] = useState(isSelected);
+
+ useEffect(() => {
+ setIsExpanded(isSelected);
+ }, [isSelected]);
useEffect(() => {
if (isSelected && itemRef.current) {
@@ -344,37 +535,66 @@ function LevelItem({
}, [isSelected]);
return (
- (null);
-
const building = selectedBuildingId
? (nodes[selectedBuildingId] as BuildingNode)
: null;
@@ -511,24 +737,27 @@ function LevelsSection() {
return (
-
-
+ {
+ if (!isOpen) setIsOpen(true)
+ }}
+ transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
+ className={cn(
+ "flex flex-col rounded-lg border border-border bg-background/95 shadow-lg backdrop-blur-md overflow-hidden",
+ !isOpen && "cursor-pointer hover:bg-accent/30 transition-colors"
+ )}
+ >
+
diff --git a/apps/editor/components/ui/action-menu/view-toggles.tsx b/apps/editor/components/ui/action-menu/view-toggles.tsx
index aa40e294..330385bd 100644
--- a/apps/editor/components/ui/action-menu/view-toggles.tsx
+++ b/apps/editor/components/ui/action-menu/view-toggles.tsx
@@ -85,7 +85,7 @@ export function ViewToggles() {
@@ -107,7 +107,7 @@ export function ViewToggles() {
@@ -131,7 +131,7 @@ export function ViewToggles() {
@@ -156,7 +156,7 @@ export function ViewToggles() {
@@ -178,7 +178,7 @@ export function ViewToggles() {
diff --git a/apps/editor/components/ui/primitives/sidebar.tsx b/apps/editor/components/ui/primitives/sidebar.tsx
index d6c8b0d7..fda56db9 100644
--- a/apps/editor/components/ui/primitives/sidebar.tsx
+++ b/apps/editor/components/ui/primitives/sidebar.tsx
@@ -4,6 +4,8 @@ import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { PanelLeftIcon } from "lucide-react";
import * as React from "react";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
import { Button } from "@/components/ui/primitives/button";
import { Input } from "@/components/ui/primitives/input";
import { Separator } from "@/components/ui/primitives/separator";
@@ -31,6 +33,28 @@ const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_ICON = "3rem";
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+type SidebarStore = {
+ width: number;
+ setWidth: (width: number) => void;
+ isDragging: boolean;
+ setIsDragging: (isDragging: boolean) => void;
+};
+
+export const useSidebarStore = create()(
+ persist(
+ (set) => ({
+ width: 288, // 18rem = 288px
+ setWidth: (width) => set({ width: Math.max(288, Math.min(width, 800)) }),
+ isDragging: false,
+ setIsDragging: (isDragging) => set({ isDragging }),
+ }),
+ {
+ name: "sidebar-preferences",
+ partialize: (state) => ({ width: state.width }), // Only persist width
+ }
+ )
+);
+
type SidebarContextProps = {
state: "expanded" | "collapsed";
open: boolean;
@@ -67,6 +91,8 @@ function SidebarProvider({
}) {
const isMobile = useIsMobile();
const [openMobile, setOpenMobile] = React.useState(false);
+ const sidebarWidth = useSidebarStore((state) => state.width);
+ const isDragging = useSidebarStore((state) => state.isDragging);
// This is the internal state of the sidebar.
// We use openProp and setOpenProp for control from outside the component.
@@ -136,9 +162,10 @@ function SidebarProvider({
className,
)}
data-slot="sidebar-wrapper"
+ data-dragging={isDragging}
style={
{
- "--sidebar-width": SIDEBAR_WIDTH,
+ "--sidebar-width": `${sidebarWidth}px`,
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
...style,
} as React.CSSProperties
@@ -152,6 +179,52 @@ function SidebarProvider({
);
}
+function SidebarResizer({ side }: { side: "left" | "right" }) {
+ const setWidth = useSidebarStore((state) => state.setWidth);
+ const setIsDragging = useSidebarStore((state) => state.setIsDragging);
+ const isResizing = React.useRef(false);
+
+ const handlePointerDown = (e: React.PointerEvent) => {
+ isResizing.current = true;
+ setIsDragging(true);
+ document.body.style.cursor = "col-resize";
+ document.body.style.userSelect = "none";
+ };
+
+ React.useEffect(() => {
+ const handlePointerMove = (e: PointerEvent) => {
+ if (!isResizing.current) return;
+ const newWidth = side === "left" ? e.clientX : window.innerWidth - e.clientX;
+ setWidth(Math.max(288, Math.min(newWidth, 800)));
+ };
+
+ const handlePointerUp = () => {
+ isResizing.current = false;
+ setIsDragging(false);
+ document.body.style.cursor = "";
+ document.body.style.userSelect = "";
+ };
+
+ window.addEventListener("pointermove", handlePointerMove);
+ window.addEventListener("pointerup", handlePointerUp);
+
+ return () => {
+ window.removeEventListener("pointermove", handlePointerMove);
+ window.removeEventListener("pointerup", handlePointerUp);
+ };
+ }, [setWidth, side]);
+
+ return (
+
+ );
+}
+
function Sidebar({
side = "left",
variant = "sidebar",
@@ -219,6 +292,7 @@ function Sidebar({
diff --git a/apps/editor/components/ui/scene-loader.tsx b/apps/editor/components/ui/scene-loader.tsx
new file mode 100644
index 00000000..14530033
--- /dev/null
+++ b/apps/editor/components/ui/scene-loader.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { cn } from '@/lib/utils'
+
+const LOADERS = [
+ 'pascal-loader-1',
+ 'pascal-loader-2',
+ 'pascal-loader-3',
+ 'pascal-loader-4',
+ 'pascal-loader-5',
+]
+
+interface SceneLoaderProps {
+ className?: string
+ fullScreen?: boolean
+}
+
+export function SceneLoader({ className, fullScreen = false }: SceneLoaderProps) {
+ const [loaderClass, setLoaderClass] = useState {
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault()
- handlePlayPause()
- }
- }}
- >
- {isRadioPlaying ?
-
+
@@ -45,12 +51,18 @@ export function CameraActions() {
@@ -62,12 +74,18 @@ export function CameraActions() {
diff --git a/apps/editor/components/ui/action-menu/control-modes.tsx b/apps/editor/components/ui/action-menu/control-modes.tsx
index c4d09097..15b97c62 100644
--- a/apps/editor/components/ui/action-menu/control-modes.tsx
+++ b/apps/editor/components/ui/action-menu/control-modes.tsx
@@ -1,19 +1,21 @@
"use client";
+import Image from "next/image";
import { Button } from "@/components/ui/primitives/button";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/primitives/tooltip";
-import { Hammer, MousePointer2, Pencil, Trash2 } from "lucide-react";
+import { Pencil, Trash2, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import useEditor, { Mode, Phase } from "@/store/use-editor";
type ModeConfig = {
id: Mode;
- icon: typeof MousePointer2;
+ icon?: LucideIcon;
+ imageSrc?: string;
label: string;
shortcut: string;
color: string;
@@ -24,7 +26,7 @@ type ModeConfig = {
const allModes: ModeConfig[] = [
{
id: "select",
- icon: MousePointer2,
+ imageSrc: "/icons/select.png",
label: "Select",
shortcut: "V",
color: "hover:bg-blue-500/20 hover:text-blue-400",
@@ -40,7 +42,7 @@ const allModes: ModeConfig[] = [
},
{
id: "build",
- icon: Hammer,
+ imageSrc: "/icons/build.png",
label: "Build",
shortcut: "B",
color: "hover:bg-green-500/20 hover:text-green-400",
@@ -98,22 +100,39 @@ export function ControlModes() {
{availableModes.map((m) => {
const Icon = m.icon;
const isActive = mode === m.id;
+ const isImageMode = Boolean(m.imageSrc);
return (
diff --git a/apps/editor/components/ui/action-menu/index.tsx b/apps/editor/components/ui/action-menu/index.tsx
index 461ab7d5..c5a14aff 100644
--- a/apps/editor/components/ui/action-menu/index.tsx
+++ b/apps/editor/components/ui/action-menu/index.tsx
@@ -30,7 +30,7 @@ export function ActionMenu({ className }: { className?: string }) {
transition={transition}
className={cn(
"-translate-x-1/2 fixed bottom-6 left-1/2 z-50",
- "rounded-2xl border border-zinc-800 bg-zinc-950/90 shadow-2xl backdrop-blur-md",
+ "rounded-2xl border border-border bg-background/90 shadow-2xl backdrop-blur-md",
"transition-colors duration-200 ease-out",
className,
)}
@@ -40,7 +40,7 @@ export function ActionMenu({ className }: { className?: string }) {
{mode === "build" && tool === "item" && catalogCategory && (
+
+
+
-
-
-
+
+ )}
+
+
)
}
diff --git a/apps/editor/components/systems/zone/zone-system.tsx b/apps/editor/components/systems/zone/zone-system.tsx
index 1c5e2cf6..883123de 100644
--- a/apps/editor/components/systems/zone/zone-system.tsx
+++ b/apps/editor/components/systems/zone/zone-system.tsx
@@ -1,14 +1,14 @@
import { sceneRegistry, useScene, type ZoneNode } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
-import { useEffect } from 'react'
+import { useFrame } from '@react-three/fiber'
import useEditor from '@/store/use-editor'
export const ZoneSystem = () => {
- const structureLayer = useEditor((state) => state.structureLayer)
- const levelMode = useViewer((state) => state.levelMode)
- const selectedLevelId = useViewer((state) => state.selection.levelId)
+ useFrame(() => {
+ const structureLayer = useEditor.getState().structureLayer
+ const levelMode = useViewer.getState().levelMode
+ const selectedLevelId = useViewer.getState().selection.levelId
- useEffect(() => {
const visible = structureLayer === 'zones'
const zones = sceneRegistry.byType.zone || new Set()
const nodes = useScene.getState().nodes
@@ -23,21 +23,27 @@ export const ZoneSystem = () => {
const isOnSelectedLevel = zone?.parentId === selectedLevelId
const hideInSoloMode = levelMode === 'solo' && selectedLevelId && !isOnSelectedLevel
- obj.visible = visible
+ if (obj.visible !== visible) {
+ obj.visible = visible
+ }
const label = obj.getObjectByName('label')
if (label) {
// Hide label if zone layer is off OR if in solo mode on a different level
const showLabel = visible && !hideInSoloMode;
const labelPosition = obj.userData.labelPosition as [number, number, number] | undefined
- if (showLabel && labelPosition) {
- label.position.set(...labelPosition)
- } else {
- label.position.set(-9999, -9999, -9999)
+
+ const targetX = showLabel && labelPosition ? labelPosition[0] : -9999
+ if (label.position.x !== targetX) {
+ if (showLabel && labelPosition) {
+ label.position.set(...labelPosition)
+ } else {
+ label.position.set(-9999, -9999, -9999)
+ }
}
}
})
- }, [structureLayer, levelMode, selectedLevelId])
+ })
return null
}
diff --git a/apps/editor/components/ui/action-menu/camera-actions.tsx b/apps/editor/components/ui/action-menu/camera-actions.tsx
index 929b557f..63309368 100644
--- a/apps/editor/components/ui/action-menu/camera-actions.tsx
+++ b/apps/editor/components/ui/action-menu/camera-actions.tsx
@@ -1,7 +1,7 @@
'use client'
import { emitter } from '@pascal-app/core'
-import { RotateCcw, RotateCw, Rotate3D } from 'lucide-react'
+import Image from 'next/image'
import { Button } from '@/components/ui/primitives/button'
import {
Tooltip,
@@ -28,12 +28,18 @@ export function CameraActions() {
{
+ e.stopPropagation()
+ handlePlayPause()
+ }}
+ className="rounded-sm p-1 transition-all cursor-pointer bg-accent/30 hover:bg-accent hover:text-accent-foreground hover:shadow-sm"
+ role="button"
+ tabIndex={0}
+ aria-label={isRadioPlaying ? 'Pause' : 'Play'}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ e.stopPropagation()
+ handlePlayPause()
+ }
+ }}
+ >
+ {isRadioPlaying ?
-
-
- {/* Current song info with prev/next */}
-
+ {isOpen && (
+
+
-
-
+
+ Now Playing
-
-
-
+ {currentTrack.title}
- +
+
+ {/* Current song info with prev/next */}
+
-
- {/* Volume control */}
-
+
+
+ {/* Volume control */}
+ Now Playing
+
+
+
+ + {currentTrack.title} +
+ +
+
-
-
{children}
+
+
+
+ )
+}
diff --git a/apps/editor/components/ui/sidebar/panels/site-panel/building-tree-node.tsx b/apps/editor/components/ui/sidebar/panels/site-panel/building-tree-node.tsx
index 18ec0101..1e390cf7 100644
--- a/apps/editor/components/ui/sidebar/panels/site-panel/building-tree-node.tsx
+++ b/apps/editor/components/ui/sidebar/panels/site-panel/building-tree-node.tsx
@@ -13,9 +13,10 @@ import {
interface BuildingTreeNodeProps {
node: BuildingNode;
depth: number;
+ isLast?: boolean;
}
-export function BuildingTreeNode({ node, depth }: BuildingTreeNodeProps) {
+export function BuildingTreeNode({ node, depth, isLast }: BuildingTreeNodeProps) {
const [expanded, setExpanded] = useState(true);
const createNode = useScene((state) => state.createNode);
const isSelected = useViewer((state) => state.selection.buildingId === node.id);
@@ -47,6 +48,7 @@ export function BuildingTreeNode({ node, depth }: BuildingTreeNodeProps) {
onClick={handleClick}
isSelected={isSelected}
isHovered={isHovered}
+ isLast={isLast}
actions={
+
+
+
+
+ );
+}
+
+const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
+
+function LevelReferences({ levelId, isLastLevel }: { levelId: string, isLastLevel?: boolean }) {
+ const nodes = useScene((s) => s.nodes);
+ const createNode = useScene((s) => s.createNode);
+ const deleteNode = useScene((s) => s.deleteNode);
+ const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId);
+ const activeProject = useProjectStore((s) => s.activeProject);
+ const [uploadError, setUploadError] = useState setSelectedReferenceId(refNode.id)}
+ onDoubleClick={() => setIsEditing(true)}
+ >
+ {refNode.type === 'scan' ? 
: 
}
+ setIsEditing(false)}
+ onStartEditing={() => setIsEditing(true)}
+ defaultName={refNode.type === 'scan' ? '3D Scan' : 'Guide Image'}
+ />
+
+
+
+ : }
+
+ {!isLastLevel && (
+
+ )}
+
+ {rows.map((row, i) => {
+ const isLastRow = i === rows.length - 1;
+
+ if (row.type === 'upload') {
+ return (
+
+ );
+}
+
function LevelItem({
level,
selectedLevelId,
setSelection,
- setReferencesLevelId,
deleteNode,
updateNode,
isLast,
@@ -327,7 +514,6 @@ function LevelItem({
level: LevelNode;
selectedLevelId: string | null;
setSelection: (selection: any) => void;
- setReferencesLevelId: (id: string | null) => void;
deleteNode: (id: AnyNodeId) => void;
updateNode: (id: AnyNodeId, updates: Partial
+
+
+
+
+
+
+
+ );
+ }
+
+ const ref = row.data as ScanNode | GuideNode;
+ return (
+
+
+ {uploadError}
+
+ )}
+
- {/* Vertical tree line */}
-
- {/* Horizontal branch line */}
-
-
+
@@ -456,12 +676,6 @@ function LevelItem({
-
{level.level !== 0 && (
+
+ {isExpanded && (
+
+
+ )}
+
+
);
}
@@ -486,8 +714,6 @@ function LevelsSection() {
const selectedLevelId = useViewer((state) => state.selection.levelId);
const setSelection = useViewer((state) => state.setSelection);
- const [referencesLevelId, setReferencesLevelId] = useState setSelection({ levelId: level.id })}
- onDoubleClick={() => setIsEditing(true)}
+ ref={itemRef}
+ className={cn(
+ "flex items-center group/level border-b border-border/50 pr-2 transition-all duration-200 relative h-8 select-none",
+ isSelected
+ ? "bg-accent/50 text-foreground"
+ : "text-muted-foreground hover:bg-accent/30 hover:text-foreground"
+ )}
>
- setIsEditing(false)}
- onStartEditing={() => setIsEditing(true)}
- defaultName={`Level ${level.level}`}
- />
-
+ {/* Line down to children */}
+ {isExpanded && (
+
+ )}
+
+
+
+
+
+ setSelection({ levelId: level.id })}
+ onDoubleClick={() => setIsEditing(true)}
+ >
+ 
+ setIsEditing(false)}
+ onStartEditing={() => setIsEditing(true)}
+ defaultName={`Level ${level.level}`}
+ />
+
{/* Camera snapshot button */}
+
{/* Level buttons */}
-
+
{levels.length === 0 && (
- {
- if (!open) setReferencesLevelId(null);
- }}
- />
- )}
);
}
@@ -566,13 +783,18 @@ function LayerToggle() {
const phase = useEditor((state) => state.phase);
const setPhase = useEditor((state) => state.setPhase);
+ const activeTab =
+ phase === "structure" && structureLayer === "elements" ? "structure" :
+ phase === "furnish" ? "furnish" :
+ phase === "structure" && structureLayer === "zones" ? "zones" : "none";
+
return (
-
+
-
- {/* References dialog */}
- {referencesLevelId && (
-
{/* Vertical tree line */}
{/* Horizontal branch line */}
-
+
No levels yet
)}
@@ -538,24 +767,12 @@ function LevelsSection() {
level={level}
selectedLevelId={selectedLevelId}
setSelection={setSelection}
- setReferencesLevelId={setReferencesLevelId}
deleteNode={deleteNode}
updateNode={updateNode}
isLast={index === levels.length - 1}
/>
))}
+
+
+
);
}
-function ZoneItem({ zone }: { zone: ZoneNode }) {
+function ZoneItem({ zone, isLast }: { zone: ZoneNode, isLast?: boolean }) {
const [isEditing, setIsEditing] = useState(false);
const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false);
const deleteNode = useScene((state) => state.deleteNode);
@@ -680,7 +931,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
setHoveredId(zone.id)}
onMouseLeave={() => setHoveredId(null)}
>
+ {/* Vertical tree line */}
+
+ {/* Horizontal branch line */}
+
+