feat: add properties panel with inspector and tabs

- Introduced a new PropertiesPanel component with a tabbed interface for managing object properties.
- Implemented InspectorPanel to display and edit properties of the selected object.
- Added ScrollAreaHorizontal for horizontal scrolling of tabs.
- Integrated DragInput for numeric input handling in the inspector.
- Updated Zustand store for managing active properties tab state.
- Added clsx and tailwind-merge for utility class management.
- Enhanced global styles with custom scrollbar styles.
- Updated layout to include the new properties panel on the right side.

Author: alightinastorm

ai-log/agent-conversations/15.md

@@ -0,0 +1,33 @@
+# Adding the properties panel on the right side
+
+So far so good, we've got a basic 3d editor with advanced editing features, but we're still missing a lot of the things that allow us to modify the scene, such as the properties panel that editor like blender have.
+
+Task: Add a floating properties panel to the right side. It should have a tab bar on the top (which is horizontally scrollable) that allows to switch between different properties panels (for now leave all of them empty except the inspector panel).
+
+Panels: 
+ - Object Inspector: Displays properties for the selected object, including transform data (location, rotation, scale), visibility, and instancing options.
+
+ - Scene Properties: Contains settings for the overall scene, such as units, gravity, and scene-wide options like render engines or view layer settings.
+
+ - View Layer: Manages view layer settings, including layer visibility, render passes, and compositing options.
+
+ - World: Controls the environment settings, such as background lighting, environment textures, and world shaders.
+
+ - Object Modifiers: Manages modifiers applied to the selected object, like Subdivision Surface, Mirror, or Array.
+
+ - Object Data Properties: Object Data Properties (icon: varies based on object type, e.g., mesh, curve, or light)
+Contains settings specific to the object’s data type (e.g., mesh vertices, curve settings, or light properties).
+
+ - Material: Manages material settings for the selected object, including shader nodes, textures, and surface properties.
+
+ - Render Properties: Contains settings for rendering, including resolution, sampling, and output options
+
+ - Output: Manages output settings, such as file format, resolution, and output path for renders.
+
+State Management:
+- as always, everything flows as much as possible through the zustand stores!
+
+Notes:
+ - Make sure to provide a robust foundation by splitting the code feature wise in a hierarchical folder layout. Write small focused react components instead of big all-in-one files.
+
+ - The renderer is threejs, so most properties will align with whatever threejs allows

ai-log/agent-conversations/16.md

@@ -0,0 +1,4 @@
+# Vertical 1: Scene Hierarchy
+We've got most of the basic functionality as well as some advanced editing tools, now it's time to dive into some of the verticals to ensure they work properly and smoothly
+
+This will blow quite a few prompts but it's good at this stage to not mix up the context with horizontal features.

package-lock.json

@@ -14,13 +14,15 @@
     "@react-three/fiber": "^9.3.0",
     "@types/jszip": "^3.4.0",
     "@types/three": "^0.179.0",
+    "clsx": "^2.1.1",
     "immer": "^10.1.1",
     "jszip": "^3.10.1",
     "lucide-react": "^0.539.0",
     "nanoid": "^5.1.5",
     "next": "15.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "tailwind-merge": "^3.3.1",
     "three": "^0.179.1",
     "zustand": "^5.0.7"
   },

package.json

@@ -24,3 +24,31 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Dark, slim scrollbars across the app */
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+
+/* WebKit (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.18);
+  border-radius: 9999px;
+  border: 2px solid transparent; /* inner padding for a slimmer look */
+  background-clip: content-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.28);
+}

src/app/globals.css

@@ -0,0 +1,229 @@
+import { cn } from '@/utils/tailwind'
+import React, { useState, useRef, useCallback, useEffect } from 'react'
+
+interface DragInputProps {
+  value?: number
+  onChange: (value: number) => void
+  step?: number
+  precision?: number
+  min?: number
+  id?: string
+  max?: number
+  className?: string
+  label?: string
+  suffix?: string
+  disabled?: boolean
+  compact?: boolean
+}
+
+export function DragInput({
+  value,
+  onChange,
+  step = 0.01,
+  precision = 1,
+  min,
+  max,
+  id,
+  className,
+  label,
+  suffix,
+  disabled = false,
+  compact = false
+}: DragInputProps) {
+  const [isDragging, setIsDragging] = useState(false)
+  const [hasDragged, setHasDragged] = useState(false)
+  const [isEditing, setIsEditing] = useState(false)
+  const [inputValue, setInputValue] = useState(value?.toFixed(precision) ?? '')
+  const [dragStartX, setDragStartX] = useState(0)
+  const [dragStartValue, setDragStartValue] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const displayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    // Don't update input value while actively dragging
+    // This prevents external value changes from breaking the drag state
+    if (!isEditing && !isDragging && value !== undefined) {
+      setInputValue(value.toFixed(precision))
+    }
+  }, [value, precision, isEditing, isDragging])
+
+  // Handle cursor style and iframe blocking
+  useEffect(() => {
+    if (isDragging) {
+      document.body.style.cursor = 'ew-resize'
+      // Disable pointer events on all iframes during drag
+      const iframes = document.querySelectorAll('iframe')
+      iframes.forEach(iframe => {
+        iframe.style.pointerEvents = 'none'
+      })
+      
+      return () => {
+        document.body.style.cursor = 'default'
+        // Re-enable pointer events on iframes
+        iframes.forEach(iframe => {
+          iframe.style.pointerEvents = 'auto'
+        })
+      }
+    }
+  }, [isDragging])
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (isEditing || disabled) return
+    
+    setIsDragging(true)
+    setHasDragged(false)
+    setDragStartX(e.clientX)
+    setDragStartValue(value ?? 0)
+    
+    e.preventDefault()
+  }, [isEditing, disabled, value])
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDragging) return
+
+    const deltaX = e.clientX - dragStartX
+    
+    // Mark that we've actually dragged if moved more than 2 pixels
+    if (Math.abs(deltaX) > 2) {
+      setHasDragged(true)
+    }
+    
+    const deltaValue = deltaX * step
+    let newValue = dragStartValue + deltaValue
+
+    if (min !== undefined) newValue = Math.max(min, newValue)
+    if (max !== undefined) newValue = Math.min(max, newValue)
+
+    onChange(newValue)
+  }, [isDragging, step, min, max, onChange, dragStartX, dragStartValue])
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false)
+    // Reset accumulated delta after a short delay to allow click detection
+    setTimeout(() => {
+      setHasDragged(false)
+    }, 0)
+  }, [])
+
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+      }
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp])
+
+  const toggleEditing = () => {
+    if (disabled) return
+    
+    if (isEditing) {
+      handleInputBlur()
+    } else {
+      setIsEditing(true)
+      setTimeout(() => {
+        inputRef.current?.focus()
+        inputRef.current?.select()
+      }, 0)
+    }
+  }
+
+  const handleClick = () => {
+    // Only allow editing if we didn't actually drag
+    if (!hasDragged && !disabled) {
+      toggleEditing()
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) return
+    
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      toggleEditing()
+    } else if (e.key === ' ') {
+      e.preventDefault()
+      toggleEditing()
+    } else if (/^[0-9]$/.test(e.key)) {
+      // Start editing and replace the current value with the typed digit
+      e.preventDefault()
+      setIsEditing(true)
+      setInputValue(e.key)
+      setTimeout(() => {
+        inputRef.current?.focus()
+        // Position cursor at the end
+        inputRef.current?.setSelectionRange(1, 1)
+      }, 0)
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value)
+  }
+
+  const handleInputBlur = () => {
+    const numValue = parseFloat(inputValue)
+    if (!isNaN(numValue)) {
+      let finalValue = numValue
+      if (min !== undefined) finalValue = Math.max(min, finalValue)
+      if (max !== undefined) finalValue = Math.min(max, finalValue)
+      onChange(finalValue)
+    }
+    setIsEditing(false)
+  }
+
+  const handleInputKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleInputBlur()
+    } else if (e.key === 'Escape') {
+      setInputValue(value?.toFixed(precision) ?? '')
+      setIsEditing(false)
+    }
+  }
+
+  return (
+    <div className={cn("flex items-center gap-1 w-full min-w-0 overflow-hidden", className)}>
+      {label && (
+        <span className={cn("text-xs text-zinc-400 flex-shrink-0", compact ? "min-w-0" : "min-w-[40px]")}>{label}</span>
+      )}
+      {isEditing ? (
+        <input
+          id={id}
+          ref={inputRef}
+          type="text"
+          value={inputValue}
+          onChange={handleInputChange}
+          onBlur={handleInputBlur}
+          onKeyDown={handleInputKeyDown}
+          disabled={disabled}
+          className={`flex-1 h-6 px-2 text-xs border rounded focus:outline-none min-w-0 w-0 ${
+            disabled 
+              ? 'bg-zinc-800/50 border-zinc-700/30 text-zinc-500 cursor-not-allowed'
+              : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-300 focus:border-emerald-500'
+          }`}
+        />
+      ) : (
+        <div
+          ref={displayRef}
+          tabIndex={disabled ? -1 : 0}
+          className={cn(
+            "flex-1 h-6 px-2 text-xs border rounded flex items-center justify-between transition-colors select-none min-w-0",
+            disabled 
+              ? "bg-zinc-800/50 border-zinc-700/30 text-zinc-500 cursor-not-allowed"
+              : "bg-black/20 border-zinc-700/50 text-zinc-300 cursor-ew-resize hover:border-emerald-500/30 focus:border-emerald-500/50 focus:outline-none",
+            isDragging && !disabled && "bg-emerald-500/10 border-emerald-500/30"
+          )}
+          onMouseDown={handleMouseDown}
+          onClick={handleClick}
+          onKeyDown={handleKeyDown}
+        >
+          <span className="truncate">{value?.toFixed(precision) ?? ''}</span>
+          {suffix && <span className="text-zinc-500 flex-shrink-0 ml-1">{suffix}</span>}
+        </div>
+      )}
+    </div>
+  )
+} 

src/components/drag-input.tsx

@@ -8,6 +8,7 @@ import { EditToolsToolbar } from '@/features/toolbar';
 import { SelectionSummary } from '@/features/toolbar/components/selection-summary';
 import { ToolIndicator } from '@/features/tools';
 import { EditorViewport } from '@/features/viewport';
+import { PropertiesPanel } from '@/features/properties-panel/components/properties-panel';
 import React from 'react';
 
 const EditorLayout: React.FC = () => {
@@ -28,11 +29,16 @@ const EditorLayout: React.FC = () => {
           <EditToolsToolbar />
         </div>
 
-        {/* Right Scene Hierarchy Panel */}
+        {/* Left Scene Hierarchy Panel */}
         <div className="absolute left-4 top-32 z-20">
           <SceneHierarchyPanel />
         </div>
 
+        {/* Right Properties Panel */}
+        <div className="absolute right-4 top-32 z-20">
+          <PropertiesPanel />
+        </div>
+
         {/* Bottom-left selection summary */}
         <div className="absolute left-4 bottom-4 z-20 max-w-md">
           <div className="bg-black/30 backdrop-blur-sm rounded-md border border-white/10 p-3">