[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="hooks/use-resizable.ts" isMerged="true" "use client" import { useState, useCallback, useEffect } from "react" interface ResizableOptions { initialWidth: number minWidth: number maxWidth: number invert: boolean } export function useResizable({ initialWidth, minWidth, maxWidth, invert = false }: ResizableOptions) { const [width, setWidth] = useState(initialWidth) const [isResizing, setIsResizing] = useState(false) const startResizing = useCallback(() => { setIsResizing(true) }, []) const stopResizing = useCallback(() => { setIsResizing(false) }, []) const resize = useCallback( (movementX: number) => { setWidth((currentWidth) => { const newWidth = invert ? currentWidth - movementX : currentWidth + movementX return Math.max(minWidth, Math.min(maxWidth, newWidth)) }) }, [minWidth, maxWidth], ) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (isResizing) { resize(e.movementX) } } const handleMouseUp = () => { stopResizing() } if (isResizing) { document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) } return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [isResizing, resize, stopResizing]) return { width, isResizing, startResizing, stopResizing } } [V0_FILE]typescriptreact:file="components/resizable-panel.tsx" isMerged="true" "use client" import type React from "react" import { motion } from "framer-motion" interface ResizablePanelProps { width: number isResizing: boolean startResizing: () => void children: React.ReactNode side: "left" | "right" } export function ResizablePanel({ width, isResizing, startResizing, children, side }: ResizablePanelProps) { return ( {children}

) } [V0_FILE]typescriptreact:file="components/file-tree.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { ChevronDown, ChevronRight, Folder, FileIcon } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" export interface FileNode { id: string name: string type: "file" | "folder" icon?: React.ReactNode children?: FileNode[] expanded?: boolean } interface FileTreeProps { data: FileNode[] onNodeClick?: (node: FileNode) => void className?: string } export function FileTree({ data, onNodeClick, className = "" }: FileTreeProps) { const [nodes, setNodes] = useState(data) const toggleNode = (nodeId: string) => { setNodes((currentNodes) => updateNodes(currentNodes, nodeId, (node) => ({ ...node, expanded: !node.expanded, })), ) } const updateNodes = (nodes: FileNode[], id: string, updateFn: (node: FileNode) => FileNode): FileNode[] => { return nodes.map((node) => { if (node.id === id) { return updateFn(node) } if (node.children) { return { ...node, children: updateNodes(node.children, id, updateFn), } } return node }) } const renderNode = (node: FileNode, level = 0) => { const isFolder = node.type === "folder" const hasChildren = isFolder && node.children && node.children.length > 0 const isExpanded = node.expanded return (

{ if (isFolder && hasChildren) { toggleNode(node.id) } if (onNodeClick) { onNodeClick(node) } }} whileHover={{ backgroundColor: "oklch(0.18 0 0)" }} transition={{ duration: 0.1 }} >

{isFolder && hasChildren ? ( {isExpanded ? : } ) : (

)} {node.icon || (isFolder ? ( ) : ( ))} {node.name}

{isFolder && hasChildren && isExpanded && ( {node.children!.map((childNode) => renderNode(childNode, level + 1))} )}

) } return

{nodes.map((node) => renderNode(node))}

} [V0_FILE]typescriptreact:file="components/tab-contents/world-building.tsx" isMerged="true" "use client" import { Grid, Move, Layers } from "lucide-react" import { motion } from "framer-motion" export function WorldBuildingTab() { return (

{/* Grid Lines */}

{/* Major Grid Lines */}

{/* 3D Axis Indicator */}

{/* Sample Terrain */}

) } [V0_FILE]typescriptreact:file="components/tab-contents/animation.tsx" isMerged="true" "use client" import { Play, Pause, SkipForward, Clock } from "lucide-react" import { motion } from "framer-motion" export function AnimationTab() { return (

00:00:00

{Array.from({ length: 10 }).map((_, i) => (

))}

Position

Rotation

Scale

Color

) } [V0_FILE]typescriptreact:file="components/tab-contents/lighting.tsx" isMerged="true" "use client" import { Sun, Moon, Zap } from "lucide-react" import { motion } from "framer-motion" import { Slider } from "@/components/ui/slider" import { useState } from "react" export function LightingTab() { const [intensity, setIntensity] = useState(75) const [range, setRange] = useState(50) const [shadows, setShadows] = useState(60) return (

{/* Dark scene with lighting effects */}

{/* 3D Scene mockup */}

{/* Controls overlay */}

Light Settings

Intensity {intensity}%

setIntensity(value[0])} max={100} step={1} />

Range {range}m

setRange(value[0])} max={100} step={1} />

Shadow Strength {shadows}%

setShadows(value[0])} max={100} step={1} />

) } [V0_FILE]typescriptreact:file="components/tab-contents/profiling.tsx" isMerged="true" "use client" import { BarChart, LineChart, PieChart, Activity } from "lucide-react" import { motion } from "framer-motion" export function ProfilingTab() { return (

CPU Usage

{/* CPU Usage Chart */}

{Array.from({ length: 20 }).map((_, i) => { const height = 30 + Math.random() * 70 return ( ) })}

Average: 42.3% | Peak: 78.1%

Memory Allocation

{/* Memory Pie Chart */}

2.4 GB

Scripts (25%)

Assets (15%)

System (5%)

) } [V0_FILE]typescriptreact:file="components/menubar/modern-menubar.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { ChevronRight } from "lucide-react" export interface MenuItemProps { label: string shortcut?: string action?: () => void items?: MenuItemProps[] divider?: boolean } interface MenubarProps { items: { label: string items: MenuItemProps[] }[] } export function ModernMenubar({ items }: MenubarProps) { const [activeMenu, setActiveMenu] = useState(null) const [isMenuOpen, setIsMenuOpen] = useState(false) const menubarRef = useRef(null) const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([]) const popoverRefs = useRef<(HTMLDivElement | null)[]>([]) const handleMouseLeave = () => { // Only close if we're not hovering any menu item setActiveMenu(null) setIsMenuOpen(false) } const handleItemClick = (index: number) => { if (activeMenu === index && isMenuOpen) { setActiveMenu(null) setIsMenuOpen(false) } else { setActiveMenu(index) setIsMenuOpen(true) } } const handleItemHover = (index: number) => { // If a menu is already open, switch to the hovered item if (isMenuOpen) { setActiveMenu(index) } } useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (menubarRef.current && !menubarRef.current.contains(event.target as Node)) { setActiveMenu(null) setIsMenuOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) useEffect(() => { // Set up CSS anchoring for each popover if (activeMenu !== null && isMenuOpen) { const button = menuItemRefs.current[activeMenu] const popover = popoverRefs.current[activeMenu] if (button && popover && "popover" in document) { // @ts-ignore - TypeScript doesn't know about the Popover API yet if (popover.popover) { // @ts-ignore popover.popover.showPopover() } } } }, [activeMenu, isMenuOpen]) return (

{items.map((menuItem, index) => (

(menuItemRefs.current[index] = el)} className={`px-2 py-1 text-sm rounded-sm ${ activeMenu === index && isMenuOpen ? "bg-[oklch(0.2_0_0)]" : "hover:bg-[oklch(0.18_0_0)]" }`} onClick={() => handleItemClick(index)} onMouseEnter={() => handleItemHover(index)} whileHover={{ backgroundColor: activeMenu === index ? "oklch(0.2 0 0)" : "oklch(0.18 0 0)" }} popovertarget={`menu-${index}`} > {menuItem.label}

(popoverRefs.current[index] = el)} id={`menu-${index}`} popover="auto" className="hidden"> {activeMenu === index && isMenuOpen && ( setActiveMenu(index)} > {menuItem.items.map((item, itemIndex) => ( ))} )}

))}

) } interface MenuItemComponentProps { item: MenuItemProps depth?: number isOpen?: boolean onMouseEnter?: () => void } function MenuItemComponent({ item, depth = 0, isOpen, onMouseEnter }: MenuItemComponentProps) { const [showSubmenu, setShowSubmenu] = useState(false) const itemRef = useRef(null) const submenuRef = useRef(null) const hasSubmenu = item.items && item.items.length > 0 useEffect(() => { if (!isOpen) { setShowSubmenu(false) } }, [isOpen]) const handleMouseEnter = () => { if (onMouseEnter) { onMouseEnter() } if (hasSubmenu) { setShowSubmenu(true) } } const handleMouseLeave = (e: React.MouseEvent) => { if (hasSubmenu && submenuRef.current) { const submenuRect = submenuRef.current.getBoundingClientRect() const { clientX, clientY } = e // Check if mouse is moving towards submenu const isMovingTowardsSubmenu = (depth === 0 && clientY <= submenuRect.bottom) || (depth !== 0 && clientX <= submenuRect.right) if (!isMovingTowardsSubmenu) { setShowSubmenu(false) } } } if (item.divider) { return

} return (

{ if (item.action && !hasSubmenu) { item.action() } }} > {item.label}

{item.shortcut && {item.shortcut}} {hasSubmenu && }

{showSubmenu && hasSubmenu && ( {item.items.map((subItem, index) => ( ))} )}

) } [V0_FILE]typescriptreact:file="components/ui/portal.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { createPortal } from "react-dom" interface PortalProps { children: React.ReactNode } export function Portal({ children }: PortalProps) { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) return () => setMounted(false) }, []) return mounted ? createPortal(children, document.body) : null } [V0_FILE]typescriptreact:file="components/menubar/menubar.tsx" isEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { motion } from "framer-motion" import { MenuItem, type MenuItemProps } from "./menu-item" import { Portal } from "@/components/ui/portal" interface MenubarProps { items: { label: string items: MenuItemProps[] }[] } export function Menubar({ items }: MenubarProps) { const [activeMenu, setActiveMenu] = useState(null) const [isMenuOpen, setIsMenuOpen] = useState(false) const menubarRef = useRef(null) const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([]) const handleMouseLeave = () => { // Only close if we're not hovering any menu item setActiveMenu(null) setIsMenuOpen(false) } const handleItemClick = (index: number) => { if (activeMenu === index && isMenuOpen) { setActiveMenu(null) setIsMenuOpen(false) } else { setActiveMenu(index) setIsMenuOpen(true) } } const handleItemHover = (index: number) => { // If a menu is already open, switch to the hovered item if (isMenuOpen) { setActiveMenu(index) } } useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (menubarRef.current && !menubarRef.current.contains(event.target as Node)) { setActiveMenu(null) setIsMenuOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) return (

{items.map((menuItem, index) => (

setActiveMenu(index)} > {menuItem.items.map((item, itemIndex) => ( ))}

)}

))}

) } [V0_FILE]typescriptreact:file="components/menubar/popover-menubar.tsx" isEdit="true" isMerged="true" "use client" import { useState, useRef } from "react" import { motion } from "framer-motion" import { ChevronRight } from "lucide-react" export interface MenuItemProps { label: string shortcut?: string action?: () => void items?: MenuItemProps[] divider?: boolean } interface MenubarProps { items: { label: string items: MenuItemProps[] }[] } export function PopoverMenubar({ items }: MenubarProps) { const [activeMenu, setActiveMenu] = useState(null) const menubarRef = useRef(null) const popoverRefs = useRef<(HTMLDivElement | null)[]>([]) const popoverSupported = typeof HTMLElement !== "undefined" && "popover" in HTMLElement.prototype const handleItemClick = (index: number) => { if (activeMenu === index) { setActiveMenu(null) if (popoverSupported && popoverRefs.current[index]) { // @ts-ignore - TypeScript doesn't know about the Popover API yet popoverRefs.current[index]?.hidePopover?.() } } else { // Close any open popover if (activeMenu !== null && popoverSupported && popoverRefs.current[activeMenu]) { // @ts-ignore popoverRefs.current[activeMenu]?.hidePopover?.() } setActiveMenu(index) if (popoverSupported && popoverRefs.current[index]) { // @ts-ignore popoverRefs.current[index]?.showPopover?.() } } } const handleItemHover = (index: number) => { // If a menu is already open, switch to the hovered item if (activeMenu !== null) { // Close current popover if (popoverSupported && popoverRefs.current[activeMenu]) { // @ts-ignore popoverRefs.current[activeMenu]?.hidePopover?.() } // Open new popover setActiveMenu(index) if (popoverSupported && popoverRefs.current[index]) { // @ts-ignore popoverRefs.current[index]?.showPopover?.() } } } return (

{items.map((menuItem, index) => (

handleItemClick(index)} onMouseEnter={() => handleItemHover(index)} whileHover={{ backgroundColor: activeMenu === index ? "oklch(0.2 0 0)" : "oklch(0.18 0 0)" }} // Fixed: Changed popovertarget to popoverTarget (camelCase for React) popoverTarget={`menu-${index}`} > {menuItem.label}

(popoverRefs.current[index] = el)} id={`menu-${index}`} // Fixed: Changed popover attribute to use data-* attribute for compatibility data-popover="manual" className="fixed bg-[oklch(0.15_0_0)] border border-[oklch(0.2_0_0)] rounded shadow-lg z-[9999] min-w-[180px]" style={{ top: "calc(var(--menubar-height, 2rem) + 0.25rem)", left: "var(--menubar-item-left, 0)", display: "none", // Hide by default, will be shown via JS }} > {menuItem.items.map((item, itemIndex) => ( ))}

))}

) } interface PopoverMenuItemProps { item: MenuItemProps depth: number } function PopoverMenuItem({ item, depth }: PopoverMenuItemProps) { const [showSubmenu, setShowSubmenu] = useState(false) const itemRef = useRef(null) const submenuRef = useRef(null) const hasSubmenu = item.items && item.items.length > 0 const popoverSupported = typeof HTMLElement !== "undefined" && "popover" in HTMLElement.prototype // Fix: Safely generate submenuId by checking if item.label exists const submenuId = item.divider ? `divider-${depth}-${Math.random().toString(36).substring(2, 9)}` : `submenu-${(item.label || "item").replace(/\s+/g, "-").toLowerCase()}-${depth}-${Math.random().toString(36).substring(2, 5)}` const handleMouseEnter = () => { if (hasSubmenu) { setShowSubmenu(true) if (popoverSupported && submenuRef.current) { // @ts-ignore submenuRef.current?.showPopover?.() } else if (submenuRef.current) { // Fallback for browsers without popover API submenuRef.current.style.display = "block" } } } const handleMouseLeave = () => { if (hasSubmenu) { setShowSubmenu(false) if (popoverSupported && submenuRef.current) { // @ts-ignore submenuRef.current?.hidePopover?.() } else if (submenuRef.current) { // Fallback for browsers without popover API submenuRef.current.style.display = "none" } } } if (item.divider) { return

} return (

{ if (item.action && !hasSubmenu) { item.action() } else if (hasSubmenu) { setShowSubmenu(!showSubmenu) if (popoverSupported && submenuRef.current) { // @ts-ignore showSubmenu ? submenuRef.current?.hidePopover?.() : submenuRef.current?.showPopover?.() } else if (submenuRef.current) { // Fallback for browsers without popover API submenuRef.current.style.display = showSubmenu ? "none" : "block" } } }} // Fixed: Changed popovertarget to popoverTarget (camelCase for React) popoverTarget={hasSubmenu ? submenuId : undefined} > {item.label}

{item.shortcut && {item.shortcut}} {hasSubmenu && }

{hasSubmenu && (

{item.items.map((subItem, index) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, Search, Play, Pause, SkipForward, Maximize2, Minus, X, Settings, Plus, MoreVertical, Folder, FileIcon, Camera, Box, Users, CuboidIcon as Cube, Zap, } from "lucide-react" import { Slider } from "@/components/ui/slider" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { motion, AnimatePresence } from "framer-motion" import { useResizable } from "@/hooks/use-resizable" import { FileTree, type FileNode } from "@/components/file-tree" import { ResizablePanel } from "@/components/resizable-panel" import { WorldBuildingTab } from "@/components/tab-contents/world-building" import { AnimationTab } from "@/components/tab-contents/animation" import { LightingTab } from "@/components/tab-contents/lighting" import { ProfilingTab } from "@/components/tab-contents/profiling" import { ReactMenubar } from "@/components/menubar/react-menubar" import { menuData } from "@/components/menubar/menu-data" export default function Editor() { const [activeTab, setActiveTab] = useState("world-building") const [position, setPosition] = useState({ x: 0, y: 0, z: 0 }) const [rotation, setRotation] = useState({ x: 0, y: 0, z: 0 }) const [scale, setScale] = useState({ x: 1, y: 1, z: 1 }) const [searchQuery, setSearchQuery] = useState("") const [pixelError, setPixelError] = useState(50) const [baseMapDistance, setBaseMapDistance] = useState(100) const [terrainSlider, setTerrainSlider] = useState(75) const [terrainDetailSlider, setTerrainDetailSlider] = useState(75) const [selectedNode, setSelectedNode] = useState(null) const leftPanel = useResizable({ initialWidth: 260, minWidth: 200, maxWidth: 400, invert: false, }) const rightPanel = useResizable({ initialWidth: 280, minWidth: 200, maxWidth: 400, invert: true, }) const handlePositionChange = (axis: "x" | "y" | "z", value: string) => { setPosition((prev) => ({ ...prev, [axis]: value })) } const handleRotationChange = (axis: "x" | "y" | "z", value: string) => { setRotation((prev) => ({ ...prev, [axis]: value })) } const handleScaleChange = (axis: "x" | "y" | "z", value: string) => { setScale((prev) => ({ ...prev, [axis]: value })) } const fileTreeData: FileNode[] = [ { id: "assets", name: "Assets", type: "folder", expanded: true, children: [ { id: "audio", name: "Audio", type: "folder", icon: , children: [], }, { id: "managers", name: "Managers", type: "folder", icon: , children: [], }, { id: "prefabs", name: "Prefabs", type: "folder", icon: , children: [], }, { id: "resources", name: "Resources", type: "folder", icon: , children: [], }, { id: "savedata", name: "Save Data", type: "folder", icon: , children: [], }, { id: "scenes", name: "Scenes", type: "folder", expanded: true, icon: , children: [ { id: "core", name: "Core", type: "file", icon: , }, { id: "workshop", name: "Workshop", type: "folder", expanded: true, icon: , children: [ { id: "city", name: "City Terrain", type: "file", icon: , }, { id: "forest", name: "Forest Terrain", type: "file", icon: , }, { id: "temple", name: "Temple", type: "file", icon: , }, ], }, ], }, { id: "scripts", name: "Scripts", type: "folder", icon: , children: [], }, { id: "visual", name: "Visual Assets", type: "folder", icon: , children: [], }, { id: "packages", name: "Packages", type: "folder", icon: , children: [], }, ], }, ] const hierarchyData: FileNode[] = [ { id: "samplescene", name: "SampleScene*", type: "folder", expanded: true, children: [ { id: "cameras", name: "Cameras", type: "folder", expanded: true, icon: , children: [ { id: "maincamera", name: "Main Camera", type: "file", icon: , }, ], }, { id: "gameobject", name: "GameObject", type: "folder", icon: , children: [], }, ], }, ] const handleNodeClick = (node: FileNode) => { setSelectedNode(node) } return (

{/* Top Menu Bar */}

My Project - Editor

{/* Tabs Bar */}

setActiveTab("world-building")} whileHover={{ backgroundColor: activeTab === "world-building" ? "oklch(0.2 0 0)" : "oklch(0.18 0 0)" }} whileTap={{ scale: 0.98 }} > World Building setActiveTab("animation")} whileHover={{ backgroundColor: activeTab === "animation" ? "oklch(0.2 0 0)" : "oklch(0.18 0 0)" }} whileTap={{ scale: 0.98 }} > Animation setActiveTab("lighting")} whileHover={{ backgroundColor: activeTab === "lighting" ? "oklch(0.2 0 0)" : "oklch(0.18 0 0)" }} whileTap={{ scale: 0.98 }} > Lighting setActiveTab("profiling")} whileHover={{ backgroundColor: activeTab === "profiling" ? "oklch(0.2 0 0)" : "oklch(0.18 0 0)" }} whileTap={{ scale: 0.98 }} > Profiling

{/* Main Content */}

{/* Left Sidebar - Project */} Project Library

setSearchQuery(e.target.value)} className="bg-transparent border-none outline-none text-sm flex-1" placeholder="Search..." />

Hierarchy

{/* Center - Scene View */}

{activeTab === "world-building" && ( )} {activeTab === "animation" && ( )} {activeTab === "lighting" && ( )} {activeTab === "profiling" && ( )}

{/* Right Sidebar - Inspector */}

Inspector Services

{selectedNode ? (

{selectedNode.icon || } {selectedNode.name}

setTerrainSlider(value[0])} max={100} step={1} className="w-24" />

Static

Tag

Layer

Transform

Position

X handlePositionChange("x", e.target.value)} className="w-full h-6 px-1 text-xs bg-[oklch(0.15_0_0)] border border-[oklch(0.2_0_0)] rounded" />

Y handlePositionChange("y", e.target.value)} className="w-full h-6 px-1 text-xs bg-[oklch(0.15_0_0)] border border-[oklch(0.2_0_0)] rounded" />

Z handlePositionChange("z", e.target.value)} className="w-full h-6 px-1 text-xs bg-[oklch(0.15_0_0)] border border-[oklch(0.2_0_0)] rounded" />

Rotation

X handleRotationChange("x", e.target.value)} className="w-full h-6 px-1 text-xs bg-[oklch(0.15_0_0)] border border-[oklch(0.2_0_0)] rounded" />

Y handleRotationChange("y", e.target.value)} className="w-full h-6 px-1 text-xs bg-[oklch(0.15_0_0)] border border-[oklch(0.2_0_0)] rounded" />

Z handleRotationChange("z", e.target.value)} className="w-full h-6 px-1 text-xs bg-[oklch(0.15_0_0)] border border-[oklch(0.2_0_0)] rounded" />

Scale

X handleScaleChange("x", e.target.value)} className="w-full h-6 px-1 text-xs bg-[oklch(0.15_0_0)] border border-[oklch(0.2_0_0)] rounded" />

Y handleScaleChange("y", e.target.value)} className="w-full h-6 px-1 text-xs bg-[oklch(0.15_0_0)] border border-[oklch(0.2_0_0)] rounded" />

Z handleScaleChange("z", e.target.value)} className="w-full h-6 px-1 text-xs bg-[oklch(0.15_0_0)] border border-[oklch(0.2_0_0)] rounded" />

Terrain

setTerrainDetailSlider(value[0])} max={100} step={1} className="w-8" />

Base Terrain

Draw

Pixel Error

setPixelError(value[0])} max={100} step={1} className="w-24" /> {pixelError}

Base Map Dist.

setBaseMapDistance(value[0])} max={100} step={1} className="w-24" /> {baseMapDistance}

Cast Shadows

Material

Add Component

) : ( Select an item to inspect )}

{/* Status Bar */}

Ready

6:30 AM 7/30/2019

) } [V0_FILE]typescriptreact:file="components/menubar/menu-data.tsx" isEdit="true" isMerged="true" export const menuData = [ { label: "File", items: [ { label: "New Scene", shortcut: "Ctrl+N" }, { label: "Open Scene", shortcut: "Ctrl+O" }, { label: "Save", shortcut: "Ctrl+S" }, { label: "Save As...", shortcut: "Ctrl+Shift+S" }, { divider: true }, { label: "Build Settings", items: [{ label: "Development Build" }, { label: "Release Build" }, { label: "Custom Build..." }], }, { label: "Build and Run", shortcut: "Ctrl+B" }, { divider: true }, { label: "Recent Projects", items: [ { label: "Project 1" }, { label: "Project 2" }, { label: "Project 3" }, { divider: true }, { label: "Clear Recent Projects" }, ], }, { divider: true }, { label: "Exit", shortcut: "Alt+F4" }, ], }, { label: "Edit", items: [ { label: "Undo", shortcut: "Ctrl+Z" }, { label: "Redo", shortcut: "Ctrl+Y" }, { divider: true }, { label: "Cut", shortcut: "Ctrl+X" }, { label: "Copy", shortcut: "Ctrl+C" }, { label: "Paste", shortcut: "Ctrl+V" }, { divider: true }, { label: "Duplicate", shortcut: "Ctrl+D" }, { label: "Delete", shortcut: "Del" }, { divider: true }, { label: "Selection", items: [ { label: "Select All", shortcut: "Ctrl+A" }, { label: "Select None", shortcut: "Shift+Ctrl+A" }, { label: "Invert Selection" }, { divider: true }, { label: "Select Children" }, { label: "Select Parent" }, ], }, { divider: true }, { label: "Preferences", items: [ { label: "General Settings" }, { label: "Input Manager" }, { label: "Graphics" }, { label: "Editor Layout" }, ], }, ], }, { label: "Project", items: [ { label: "Open Project" }, { label: "Save Project" }, { divider: true }, { label: "Project Settings", items: [ { label: "Input Manager" }, { label: "Physics" }, { label: "Quality" }, { label: "Graphics" }, { label: "Network" }, { label: "Audio" }, { label: "Time" }, { label: "Player" }, ], }, { divider: true }, { label: "Package Manager" }, { label: "Asset Management", items: [ { label: "Import New Asset...", shortcut: "Ctrl+I" }, { label: "Export Package...", shortcut: "Ctrl+E" }, { label: "Find References In Scene", shortcut: "Ctrl+F" }, { label: "Refresh", shortcut: "F5" }, ], }, ], }, { label: "Scene", items: [ { label: "New Scene", shortcut: "Ctrl+N" }, { label: "Save Scene", shortcut: "Ctrl+S" }, { label: "Save Scene As...", shortcut: "Ctrl+Shift+S" }, { divider: true }, { label: "Import", items: [ { label: "3D Model...", shortcut: "Ctrl+Shift+I" }, { label: "Texture...", shortcut: "Ctrl+T" }, { label: "Audio...", shortcut: "Ctrl+Shift+A" }, { label: "Animation...", shortcut: "Ctrl+Shift+M" }, ], }, { divider: true }, { label: "Lighting Settings", shortcut: "Ctrl+L" }, { label: "Render Settings", shortcut: "Ctrl+R" }, { divider: true }, { label: "Camera", items: [ { label: "Align With View", shortcut: "Ctrl+Shift+F" }, { label: "Align View to Selected", shortcut: "F" }, { label: "Move to View", shortcut: "Ctrl+Alt+F" }, ], }, ], }, { label: "GameObject", items: [ { label: "Create Empty", shortcut: "Alt+Shift+N" }, { label: "3D Object", items: [ { label: "Cube", shortcut: "Alt+1" }, { label: "Sphere", shortcut: "Alt+2" }, { label: "Capsule", shortcut: "Alt+3" }, { label: "Cylinder", shortcut: "Alt+4" }, { label: "Plane", shortcut: "Alt+5" }, { label: "Quad", shortcut: "Alt+6" }, { divider: true }, { label: "Terrain", shortcut: "Alt+T" }, { label: "Tree", shortcut: "Alt+Shift+T" }, { label: "Wind Zone" }, ], }, { label: "Light", items: [ { label: "Directional Light", shortcut: "Alt+Shift+D" }, { label: "Point Light", shortcut: "Alt+Shift+P" }, { label: "Spot Light", shortcut: "Alt+Shift+S" }, { label: "Area Light", shortcut: "Alt+Shift+A" }, ], }, { label: "Camera", items: [ { label: "Perspective Camera", shortcut: "Alt+Shift+C" }, { label: "Orthographic Camera", shortcut: "Alt+Shift+O" }, ], }, { divider: true }, { label: "Align With View", shortcut: "Ctrl+Shift+F" }, { label: "Move to View", shortcut: "Ctrl+Alt+F" }, { divider: true }, { label: "Center On Children", shortcut: "Alt+C" }, ], }, { label: "Player", items: [ { label: "Play", shortcut: "Ctrl+P" }, { label: "Pause", shortcut: "Ctrl+Shift+P" }, { label: "Step", shortcut: "Ctrl+Alt+P" }, { divider: true }, { label: "Attach to Process", items: [{ label: "Local Process" }, { label: "Remote Process..." }], }, { divider: true }, { label: "Profiler", shortcut: "Ctrl+7" }, { label: "Frame Debugger", shortcut: "Ctrl+8" }, ], }, { label: "Tools", items: [ { label: "Move Tool", shortcut: "W" }, { label: "Rotate Tool", shortcut: "E" }, { label: "Scale Tool", shortcut: "R" }, { label: "Rect Tool", shortcut: "T" }, { divider: true }, { label: "Snap Settings", shortcut: "Ctrl+Shift+X" }, { divider: true }, { label: "Terrain", items: [ { label: "Paint Height", shortcut: "F1" }, { label: "Paint Texture", shortcut: "F2" }, { label: "Place Trees", shortcut: "F3" }, { label: "Paint Details", shortcut: "F4" }, { label: "Terrain Settings", shortcut: "F5" }, ], }, { label: "Animation", items: [ { label: "Record", shortcut: "Ctrl+Shift+R" }, { label: "Preview", shortcut: "Ctrl+Shift+P" }, { label: "Add Event", shortcut: "Ctrl+Shift+E" }, { label: "Add Property", shortcut: "Ctrl+Shift+A" }, ], }, ], }, { label: "Window", items: [ { label: "Layouts", shortcut: "Alt+L" }, { divider: true }, { label: "Asset Store", shortcut: "Ctrl+9" }, { label: "Package Manager", shortcut: "Ctrl+0" }, { divider: true }, { label: "Animation", shortcut: "Ctrl+6" }, { label: "Audio Mixer", shortcut: "Ctrl+Alt+M" }, { label: "Console", shortcut: "Ctrl+Shift+C" }, { label: "Game", shortcut: "Ctrl+1" }, { label: "Hierarchy", shortcut: "Ctrl+2" }, { label: "Inspector", shortcut: "Ctrl+3" }, { label: "Project", shortcut: "Ctrl+4" }, { label: "Scene", shortcut: "Ctrl+5" }, { divider: true }, { label: "Analysis" }, { label: "Lighting", shortcut: "Ctrl+L" }, { label: "Navigation", shortcut: "Ctrl+Alt+N" }, { label: "Occlusion Culling", shortcut: "Ctrl+Alt+O" }, ], }, { label: "Help", items: [ { label: "About App" }, { label: "App Manual", shortcut: "F1" }, { label: "App Scripting Reference", shortcut: "F2" }, { divider: true }, { label: "Check for Updates" }, { divider: true }, { label: "Report a Bug" }, { label: "App Forums" }, { label: "App Answers" }, ], }, ] [V0_FILE]typescriptreact:file="components/menubar/menu-item.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { motion } from "framer-motion" import { ChevronRight } from "lucide-react" import { createPortal } from "react-dom" export interface MenuItemProps { label: string shortcut?: string action?: () => void items?: MenuItemProps[] divider?: boolean } interface MenuItemComponentProps { item: MenuItemProps depth?: number isOpen?: boolean onMouseEnter?: () => void parentRect?: DOMRect | null portalContainer?: Element } export function MenuItem({ item, depth = 0, isOpen, onMouseEnter, parentRect, portalContainer = document.body, }: MenuItemComponentProps) { const [showSubmenu, setShowSubmenu] = useState(false) const itemRef = useRef(null) const hasSubmenu = item.items && item.items.length > 0 useEffect(() => { if (!isOpen) { setShowSubmenu(false) } }, [isOpen]) const handleMouseEnter = () => { if (onMouseEnter) { onMouseEnter() } if (hasSubmenu) { setShowSubmenu(true) } } const handleMouseLeave = (e: React.MouseEvent) => { // Only close submenu if not moving towards it if (hasSubmenu && itemRef.current) { const rect = itemRef.current.getBoundingClientRect() const submenuRect = { left: rect.right, right: rect.right + 180, // Approximate width top: rect.top, bottom: rect.bottom, } // Check if mouse is moving towards submenu if (depth === 0) { if (e.clientY > rect.bottom) { setShowSubmenu(false) } } else { if (e.clientX > rect.right && (e.clientY < submenuRect.top || e.clientY > submenuRect.bottom)) { setShowSubmenu(false) } } } } if (item.divider) { return

} const getSubmenuPosition = () => { if (!itemRef.current) return { top: 0, left: 0 } const rect = itemRef.current.getBoundingClientRect() // For first level submenus, position below the parent if (depth === 0) { return { top: rect.bottom, left: rect.left, } } // For nested submenus, position to the right of the parent // Check if there's enough space to the right const viewportWidth = window.innerWidth const spaceToRight = viewportWidth - rect.right const submenuWidth = 240 // Wider width for submenu if (spaceToRight < submenuWidth) { // Not enough space to the right, position to the left return { top: rect.top, left: rect.left - submenuWidth, } } // Enough space to the right return { top: rect.top, left: rect.right, } } return (

{ if (item.action && !hasSubmenu) { item.action() } }} > {item.label}

{item.shortcut && {item.shortcut}} {hasSubmenu && }

{showSubmenu && hasSubmenu && portalContainer && createPortal(

{item.items.map((subItem, index) => ( ))}

, portalContainer, )}

) } [V0_FILE]typescriptreact:file="hooks/use-anchor-positioning.ts" isMerged="true" "use client" import { useEffect, useState } from "react" export function useAnchorPositioning() { const [isSupported, setIsSupported] = useState(false) useEffect(() => { // Check if CSS Anchor Positioning API is supported const supported = typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --anchor") setIsSupported(supported) }, []) return isSupported } [V0_FILE]typescriptreact:file="components/menubar/react-menubar.tsx" isEdit="true" "use client" import React from "react" import { useState, useRef, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { ChevronRight } from "lucide-react" import { Portal } from "@/components/ui/portal" export interface MenuItemProps { label: string shortcut?: string action?: () => void items?: MenuItemProps[] divider?: boolean } interface MenubarProps { items: { label: string items: MenuItemProps[] }[] } export function ReactMenubar({ items }: MenubarProps) { const [activeMenu, setActiveMenu] = useState(null) const [isMenuOpen, setIsMenuOpen] = useState(false) const [hoveredMenuIndex, setHoveredMenuIndex] = useState(null) const menubarRef = useRef(null) const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([]) const menuContainerRefs = useRef<(HTMLDivElement | null)[]>([]) const handleMouseLeave = () => { // Only close if we're not hovering any menu item if (!isMenuOpen) { setHoveredMenuIndex(null) } } const handleItemClick = (index: number) => { if (activeMenu === index && isMenuOpen) { setActiveMenu(null) setIsMenuOpen(false) } else { setActiveMenu(index) setIsMenuOpen(true) } } const handleItemHover = (index: number) => { setHoveredMenuIndex(index) // If a menu is already open, switch to the hovered item if (isMenuOpen) { setActiveMenu(index) } } const handleItemMouseLeave = () => { // Only clear hover state if no menu is open if (!isMenuOpen) { setHoveredMenuIndex(null) } } const handleMenuContainerMouseEnter = (index: number) => { // Keep the parent menu item highlighted when hovering its submenu setHoveredMenuIndex(index) } useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (menubarRef.current && !menubarRef.current.contains(event.target as Node)) { setActiveMenu(null) setIsMenuOpen(false) setHoveredMenuIndex(null) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) return (

{items.map((menuItem, index) => (

(menuItemRefs.current[index] = el)} className={`px-2 py-1 text-sm rounded-sm ${ (activeMenu === index && isMenuOpen) || hoveredMenuIndex === index ? "bg-[oklch(0.2_0_0)]" : "hover:bg-[oklch(0.18_0_0)]" }`} onClick={() => handleItemClick(index)} onMouseEnter={() => handleItemHover(index)} onMouseLeave={handleItemMouseLeave} whileHover={{ backgroundColor: "oklch(0.2 0 0)" }} > {menuItem.label} {activeMenu === index && isMenuOpen && (

(menuContainerRefs.current[index] = el)} className="absolute z-50" style={{ top: menuItemRefs.current[index]?.getBoundingClientRect().bottom ?? 0, left: menuItemRefs.current[index]?.getBoundingClientRect().left ?? 0, pointerEvents: "auto", }} onMouseEnter={() => handleMenuContainerMouseEnter(index)} > {menuItem.items.map((item, itemIndex) => ( { setActiveMenu(null) setIsMenuOpen(false) setHoveredMenuIndex(null) }} /> ))}

)}

))}

) } interface ReactMenuItemProps { item: MenuItemProps depth?: number isOpen?: boolean onMouseEnter?: () => void parentRect?: DOMRect | null portalContainer?: Element parentMenuRef?: HTMLButtonElement | null onCloseSubmenu?: () => void } function ReactMenuItem({ item, depth = 0, isOpen, onMouseEnter, parentRect, portalContainer = document.body, parentMenuRef, onCloseSubmenu, }: ReactMenuItemProps) { const [showSubmenu, setShowSubmenu] = useState(false) const [isHovered, setIsHovered] = useState(false) const itemRef = useRef(null) const submenuRef = useRef(null) const hasSubmenu = item.items && item.items.length > 0 const [isHoveringItem, setIsHoveringItem] = useState(false) const [isHoveringSubmenu, setIsHoveringSubmenu] = useState(false) useEffect(() => { if (!isOpen) { setShowSubmenu(false) } }, [isOpen]) // Effect to handle submenu visibility based on hover states useEffect(() => { if (hasSubmenu) { if (isHoveringItem || isHoveringSubmenu) { setShowSubmenu(true) } else { // Small delay to allow moving between item and submenu const timer = setTimeout(() => { setShowSubmenu(false) }, 100) return () => clearTimeout(timer) } } }, [isHoveringItem, isHoveringSubmenu, hasSubmenu]) const handleItemMouseEnter = () => { setIsHovered(true) setIsHoveringItem(true) if (onMouseEnter) { onMouseEnter() } } const handleItemMouseLeave = () => { setIsHovered(false) setIsHoveringItem(false) } const handleSubmenuMouseEnter = () => { setIsHoveringSubmenu(true) } const handleSubmenuMouseLeave = () => { setIsHoveringSubmenu(false) } const handleItemClick = () => { if (item.action && !hasSubmenu) { item.action() // Close the menu after action is performed if (onCloseSubmenu) { onCloseSubmenu() } } } if (item.divider) { return

} // Parse shortcut into individual keys const shortcutKeys = item.shortcut?.split("+") || [] // Get submenu position relative to the parent menu item const getSubmenuPosition = () => { if (!itemRef.current) return { top: 0, left: 0 } const rect = itemRef.current.getBoundingClientRect() // For nested submenus, position to the right of the parent item const viewportWidth = window.innerWidth const spaceToRight = viewportWidth - rect.right const submenuWidth = 240 // Wider width for submenu if (spaceToRight < submenuWidth) { // Not enough space to the right, position to the left return { top: rect.top, left: rect.left - submenuWidth, } } // Enough space to the right return { top: rect.top, left: rect.right, } } return (

{item.label}

{item.shortcut && (

{shortcutKeys.map((key, index) => ( {key.trim()} {index < shortcutKeys.length - 1 && +} ))}

)} {hasSubmenu && }

{showSubmenu && hasSubmenu && portalContainer && (

{item.items.map((subItem, index) => ( ))}

)}

) }

About

Tags

Share

About

Tags

Share

More from bradennapier

More Templates Like This

About

Tags

Share

About

Tags

Share

More from bradennapier

More Templates Like This