<FileObject><file path="/App.js">import "./styles.css";import React, { useState, useEffect } from "react"; import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"; import TopNav from "./components/TopNav"; import Sidebar from "./components/Sidebar"; import ContextualToolbar from "./components/ContextualToolbar"; import IntelligentCanvas from "./components/IntelligentCanvas"; import SpatialIntelligenceHub from "./components/SpatialIntelligenceHub"; import BottomBar from "./components/BottomBar"; function App() { const [activePlan, setActivePlan] = useState("Plan 1"); const [activeTab, setActiveTab] = useState("Design"); const [selectedElements, setSelectedElements] = useState([]); const [designPhase, setDesignPhase] = useState("conceptual"); // conceptual, schematic, technical const [canvasMode, setCanvasMode] = useState("2d"); const [contextualTools, setContextualTools] = useState([]); // Update contextual tools based on selection and phase useEffect(() => { const getContextualTools = () => { if (selectedElements.length === 0) { return designPhase === "conceptual" ? ["sketch", "shape", "space"] : ["wall", "door", "window", "dimension"]; } const elementType = selectedElements[0]?.type; switch (elementType) { case "wall": return ["door", "window", "opening", "dimension", "material"]; case "room": return ["furniture", "fixture", "annotation", "area"]; default: return ["move", "copy", "rotate", "delete", "properties"]; } }; setContextualTools(getContextualTools()); }, [selectedElements, designPhase]); return ( <Router> <div className="flex flex-col h-screen bg-gray-50"> <TopNav activeTab={activeTab} setActiveTab={setActiveTab} designPhase={designPhase} setDesignPhase={setDesignPhase} /> <div className="flex flex-1 overflow-hidden"> <Sidebar activePlan={activePlan} setActivePlan={setActivePlan} designPhase={designPhase} /> <div className="flex flex-col flex-1 overflow-hidden"> <ContextualToolbar tools={contextualTools} designPhase={designPhase} selectedElements={selectedElements} /> <div className="flex flex-1 overflow-hidden"> <IntelligentCanvas designPhase={designPhase} selectedElements={selectedElements} setSelectedElements={setSelectedElements} canvasMode={canvasMode} /> <SpatialIntelligenceHub selectedElements={selectedElements} designPhase={designPhase} activePlan={activePlan} /> </div> </div> </div> <BottomBar canvasMode={canvasMode} setCanvasMode={setCanvasMode} /> </div> <Routes> <Route path="/" element={<Navigate to="/design" />} /> <Route path="/program" element={null} /> <Route path="/design" element={null} /> <Route path="/bim" element={null} /> <Route path="/present" element={null} /> </Routes> </Router> ); } export default App;</file><file path="/index.js">import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./styles.css"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> );</file><file path="/styles.css">@tailwind base; @tailwind components; @tailwind utilities; body { font-family: 'Inter', sans-serif; } .design-phase-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .contextual-appear { animation: contextualAppear 0.2s ease-out; } @keyframes contextualAppear { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .canvas-grid { background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px); background-size: 20px 20px; } .canvas-grid-fine { background-image: radial-gradient(circle, #f3f4f6 1px, transparent 1px); background-size: 10px 10px; }</file><file path="/lib/constants.js">// Design phase configurations export const DESIGN_PHASES = { conceptual: { label: "Conceptual", tools: ["sketch", "shape", "space", "bubble"], canvasStyle: "loose", precision: "low" }, schematic: { label: "Schematic", tools: ["wall", "room", "door", "window", "stair"], canvasStyle: "structured", precision: "medium" }, technical: { label: "Technical", tools: ["dimension", "annotation", "detail", "section"], canvasStyle: "precise", precision: "high" } }; // Contextual tool definitions export const CONTEXTUAL_TOOLS = { // Drawing tools sketch: { label: "Sketch", icon: "pen", category: "draw" }, shape: { label: "Shape", icon: "square", category: "draw" }, space: { label: "Space", icon: "circle", category: "draw" }, // Building elements wall: { label: "Wall", icon: "minus", category: "build" }, door: { label: "Door", icon: "door-open", category: "build" }, window: { label: "Window", icon: "window-maximize", category: "build" }, // Furniture & fixtures furniture: { label: "Furniture", icon: "couch", category: "furnish" }, fixture: { label: "Fixture", icon: "lightbulb", category: "furnish" }, // Documentation dimension: { label: "Dimension", icon: "ruler", category: "document" }, annotation: { label: "Note", icon: "comment", category: "document" }, // Modification move: { label: "Move", icon: "arrows-alt", category: "modify" }, copy: { label: "Copy", icon: "copy", category: "modify" }, rotate: { label: "Rotate", icon: "redo", category: "modify" } }; // Sidebar menu structure with phase awareness export const SIDEBAR_MENU = [ { label: "Plans", icon: "layer-group", children: [ { label: "Plan 1", icon: "layer-group", phase: "all" }, { label: "Site Plan", icon: "layer-group", phase: "schematic" }, ], }, { label: "Elevations", icon: "compass", children: [ { label: "North", icon: "compass", phase: "technical" }, { label: "East", icon: "compass", phase: "technical" }, { label: "South", icon: "compass", phase: "technical" }, { label: "West", icon: "compass", phase: "technical" }, ], }, { label: "3D Views", icon: "cube", children: [ { label: "Default", icon: "cube", phase: "all" }, ], }, { label: "Renders", icon: "image", children: [], }, ]; // Top nav tabs with phase integration export const TOPNAV_TABS = [ { label: "Program", path: "/program", icon: "th-large", phase: "conceptual" }, { label: "Design", path: "/design", icon: "draw-polygon", phase: "schematic" }, { label: "BIM", path: "/bim", icon: "project-diagram", phase: "technical" }, { label: "Present", path: "/present", icon: "tv", phase: "all" }, ];</file><file path="/utils/utilities.js">// Utility: classNames for conditional classes export function classNames(...classes) { return classes.filter(Boolean).join(" "); } // Get tools relevant to current context export function getContextualTools(selectedElements, designPhase) { if (selectedElements.length === 0) { switch (designPhase) { case "conceptual": return ["sketch", "shape", "space"]; case "schematic": return ["wall", "door", "window"]; case "technical": return ["dimension", "annotation", "detail"]; default: return ["sketch", "wall", "door"]; } } const elementType = selectedElements[0]?.type; switch (elementType) { case "wall": return ["door", "window", "opening", "dimension"]; case "room": return ["furniture", "fixture", "annotation"]; default: return ["move", "copy", "rotate", "delete"]; } } // Calculate design metrics export function calculateSpaceMetrics(elements) { return { totalArea: elements.reduce((sum, el) => sum + (el.area || 0), 0), roomCount: elements.filter(el => el.type === "room").length, efficiency: 0.85 // Placeholder calculation }; }</file><file path="/components/TopNav.jsx">import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronDown, faShareAlt, faCommentDots, faSun, faSlidersH, faCircle } from "@fortawesome/free-solid-svg-icons"; import { TOPNAV_TABS, DESIGN_PHASES } from "../lib/constants"; import { useNavigate, useLocation } from "react-router-dom"; import { classNames } from "../utils/utilities"; function TopNav({ activeTab, setActiveTab, designPhase, setDesignPhase }) { const navigate = useNavigate(); const location = useLocation(); return ( <nav className="flex items-center justify-between px-4 h-14 border-b bg-white z-20 design-phase-transition"> <div className="flex items-center space-x-4"> <FontAwesomeIcon icon={["fas", "layer-group"]} className="text-xl text-gray-700" /> <span className="font-semibold text-lg text-gray-800">TAM</span> <FontAwesomeIcon icon={faChevronDown} className="ml-1 text-xs text-gray-500" /> {/* Design Phase Indicator */} <div className="flex items-center ml-6 px-3 py-1 bg-gray-100 rounded-full"> <FontAwesomeIcon icon={faCircle} className={classNames( "w-2 h-2 mr-2", designPhase === "conceptual" ? "text-green-500" : designPhase === "schematic" ? "text-blue-500" : "text-purple-500" )} /> <span className="text-sm font-medium text-gray-700"> {DESIGN_PHASES[designPhase]?.label} </span> </div> </div> <div className="flex items-center space-x-2"> {TOPNAV_TABS.map((tab) => { const isActive = location.pathname === tab.path || activeTab === tab.label; return ( <button key={tab.label} onClick={() => { setActiveTab(tab.label); navigate(tab.path); if (tab.phase !== "all") { setDesignPhase(tab.phase); } }} className={classNames( "px-3 py-1 rounded-md font-medium flex items-center space-x-1 transition design-phase-transition", isActive ? "bg-blue-50 text-blue-700 shadow-sm" : "text-gray-600 hover:bg-gray-100" )} aria-label={tab.label} > <FontAwesomeIcon icon={["fas", tab.icon]} className="mr-1" /> <span>{tab.label}</span> </button> ); })} </div> <div className="flex items-center space-x-3"> <button aria-label="Comments" className="p-2 rounded hover:bg-gray-100 transition"> <FontAwesomeIcon icon={faCommentDots} /> </button> <button aria-label="Theme" className="p-2 rounded hover:bg-gray-100 transition"> <FontAwesomeIcon icon={faSun} /> </button> <button aria-label="Settings" className="p-2 rounded hover:bg-gray-100 transition"> <FontAwesomeIcon icon={faSlidersH} /> </button> <button className="ml-2 px-4 py-2 bg-black text-white rounded-lg font-semibold hover:bg-gray-900 transition" aria-label="Share" > <FontAwesomeIcon icon={faShareAlt} className="mr-2" /> Share </button> </div> </nav> ); } export default TopNav;</file><file path="/components/ContextualToolbar.jsx">import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPen, faSquare, faCircle, faMinus, faDoorOpen, faWindowMaximize, faCouch, faLightbulb, faRuler, faComment, faArrowsAlt, faCopy, faRedo } from "@fortawesome/free-solid-svg-icons"; import { CONTEXTUAL_TOOLS } from "../lib/constants"; import { classNames } from "../utils/utilities"; const ICON_MAP = { sketch: faPen, shape: faSquare, space: faCircle, wall: faMinus, door: faDoorOpen, window: faWindowMaximize, furniture: faCouch, fixture: faLightbulb, dimension: faRuler, annotation: faComment, move: faArrowsAlt, copy: faCopy, rotate: faRedo }; function ContextualToolbar({ tools, designPhase, selectedElements }) { const getToolbarTitle = () => { if (selectedElements.length > 0) { return `${selectedElements[0].type} selected`; } return `${designPhase} tools`; }; return ( <div className="flex items-center px-4 py-3 bg-white border-b space-x-1 sticky top-14 z-10 design-phase-transition"> <div className="text-xs text-gray-500 mr-4 font-medium uppercase tracking-wide"> {getToolbarTitle()} </div> <div className="flex items-center space-x-1"> {tools.map((toolKey) => { const tool = CONTEXTUAL_TOOLS[toolKey]; if (!tool) return null; return ( <button key={toolKey} className={classNames( "p-3 rounded-lg flex flex-col items-center justify-center transition contextual-appear", "text-gray-600 hover:bg-gray-100 hover:text-gray-900", "min-w-[60px] group" )} aria-label={tool.label} > <FontAwesomeIcon icon={ICON_MAP[toolKey]} className="text-lg mb-1 group-hover:scale-110 transition-transform" /> <span className="text-xs font-medium">{tool.label}</span> </button> ); })} </div> {/* Quick Actions */} <div className="ml-auto flex items-center space-x-2"> <button className="px-3 py-1 text-xs bg-gray-100 rounded-md hover:bg-gray-200 transition"> Undo </button> <button className="px-3 py-1 text-xs bg-gray-100 rounded-md hover:bg-gray-200 transition"> Redo </button> </div> </div> ); } export default ContextualToolbar;</file><file path="/components/IntelligentCanvas.jsx">import React, { useState } from "react"; import { classNames } from "../utils/utilities"; function IntelligentCanvas({ designPhase, selectedElements, setSelectedElements, canvasMode }) { const [showGrid, setShowGrid] = useState(true); const [suggestions, setSuggestions] = useState([]); const getCanvasClasses = () => { const baseClasses = "flex-1 bg-white relative overflow-auto design-phase-transition"; switch (designPhase) { case "conceptual": return classNames(baseClasses, "bg-gray-50"); case "schematic": return classNames(baseClasses, showGrid && "canvas-grid"); case "technical": return classNames(baseClasses, showGrid && "canvas-grid-fine"); default: return baseClasses; } }; const handleCanvasClick = (e) => { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Simulate element selection if (e.target.classList.contains('canvas-element')) { const elementId = e.target.dataset.elementId; setSelectedElements([{ id: elementId, type: 'wall', x, y }]); } else { setSelectedElements([]); } }; return ( <main className={getCanvasClasses()} onClick={handleCanvasClick}> {/* Canvas Content */} <div className="w-full h-full flex items-center justify-center relative"> {/* Design Phase Specific Overlays */} {designPhase === "conceptual" && ( <div className="absolute inset-0 pointer-events-none"> <div className="absolute top-4 left-4 text-gray-400 text-sm font-medium"> Sketch your ideas freely </div> </div> )} {designPhase === "schematic" && showGrid && ( <div className="absolute inset-0 pointer-events-none"> <div className="absolute top-4 right-4 text-gray-400 text-xs"> Grid: 1' × 1' </div> </div> )} {designPhase === "technical" && ( <div className="absolute inset-0 pointer-events-none"> <div className="absolute bottom-4 left-4 text-gray-400 text-xs"> Precision mode active </div> </div> )} {/* Sample Elements */} {selectedElements.length > 0 && ( <div className="absolute w-20 h-2 bg-blue-500 canvas-element cursor-pointer" data-element-id="wall-1" style={{ left: selectedElements[0].x - 40, top: selectedElements[0].y - 1 }} /> )} {/* Contextual Suggestions */} {suggestions.length > 0 && ( <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> <div className="bg-white rounded-lg shadow-lg p-4 border"> <div className="text-sm font-medium text-gray-700 mb-2">Suggestions</div> {suggestions.map((suggestion, index) => ( <button key={index} className="block w-full text-left px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded" > {suggestion} </button> ))} </div> </div> )} </div> {/* Canvas Controls */} <div className="absolute top-4 left-4 flex flex-col space-y-2"> <button onClick={() => setShowGrid(!showGrid)} className={classNames( "px-3 py-1 text-xs rounded-md transition", showGrid ? "bg-blue-100 text-blue-700" : "bg-white text-gray-600 border" )} > Grid </button> </div> </main> ); } export default IntelligentCanvas;</file><file path="/components/SpatialIntelligenceHub.jsx">import React, { useState, useEffect } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChartPie, faRuler, faCheckCircle, faExclamationTriangle, faLightbulb, faCube, faThermometerHalf, faLeaf } from "@fortawesome/free-solid-svg-icons"; import { calculateSpaceMetrics } from "../utils/utilities"; function SpatialIntelligenceHub({ selectedElements, designPhase, activePlan }) { const [metrics, setMetrics] = useState({ totalArea: 0, roomCount: 0, efficiency: 0 }); const [insights, setInsights] = useState([]); const [codeCompliance, setCodeCompliance] = useState({ status: "unknown", issues: [] }); useEffect(() => { // Simulate real-time calculations const newMetrics = calculateSpaceMetrics(selectedElements); setMetrics(newMetrics); // Generate contextual insights const newInsights = generateInsights(designPhase, newMetrics); setInsights(newInsights); // Check code compliance const compliance = checkCodeCompliance(newMetrics); setCodeCompliance(compliance); }, [selectedElements, designPhase]); const generateInsights = (phase, metrics) => { switch (phase) { case "conceptual": return [ { type: "suggestion", text: "Consider natural lighting orientation", icon: faLightbulb }, { type: "efficiency", text: "Space efficiency looks good", icon: faCheckCircle } ]; case "schematic": return [ { type: "area", text: `${metrics.totalArea} sq ft total area`, icon: faRuler }, { type: "rooms", text: `${metrics.roomCount} rooms defined`, icon: faCube } ]; case "technical": return [ { type: "compliance", text: "ADA compliance check needed", icon: faExclamationTriangle }, { type: "energy", text: "Energy efficiency: Good", icon: faLeaf } ]; default: return []; } }; const checkCodeCompliance = (metrics) => { // Simplified compliance checking if (metrics.totalArea > 0) { return { status: "checking", issues: ["Egress width verification needed"] }; } return { status: "unknown", issues: [] }; }; return ( <aside className="w-80 bg-white border-l h-full flex flex-col py-4 px-4 overflow-y-auto design-phase-transition"> {/* Header */} <div className="mb-6"> <div className="flex items-center justify-between mb-2"> <span className="text-gray-700 font-semibold text-lg">Design Intelligence</span> <FontAwesomeIcon icon={faChartPie} className="text-gray-400" /> </div> <div className="text-xs text-gray-500 uppercase tracking-wide"> {designPhase} analysis </div> </div> {/* Real-time Metrics */} <div className="mb-6"> <div className="grid grid-cols-2 gap-3 mb-4"> <div className="bg-gray-50 rounded-lg p-3"> <div className="text-2xl font-bold text-gray-800"> {metrics.totalArea.toLocaleString()} </div> <div className="text-xs text-gray-500">Total Area (sq ft)</div> </div> <div className="bg-gray-50 rounded-lg p-3"> <div className="text-2xl font-bold text-gray-800"> {Math.round(metrics.efficiency * 100)}% </div> <div className="text-xs text-gray-500">Efficiency</div> </div> </div> </div> {/* Live Insights */} <div className="mb-6"> <div className="text-sm font-medium text-gray-700 mb-3">Live Insights</div> <div className="space-y-2"> {insights.map((insight, index) => ( <div key={index} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg"> <FontAwesomeIcon icon={insight.icon} className={`mt-0.5 ${ insight.type === "suggestion" ? "text-blue-500" : insight.type === "compliance" ? "text-yellow-500" : "text-green-500" }`} /> <span className="text-sm text-gray-700">{insight.text}</span> </div> ))} </div> </div> {/* Code Compliance */} {designPhase === "technical" && ( <div className="mb-6"> <div className="text-sm font-medium text-gray-700 mb-3">Code Compliance</div> <div className="space-y-2"> <div className={`flex items-center space-x-2 p-3 rounded-lg ${ codeCompliance.status === "good" ? "bg-green-50" : codeCompliance.status === "issues" ? "bg-red-50" : "bg-yellow-50" }`}> <FontAwesomeIcon icon={codeCompliance.status === "good" ? faCheckCircle : faExclamationTriangle} className={codeCompliance.status === "good" ? "text-green-500" : "text-yellow-500"} /> <span className="text-sm text-gray-700"> {codeCompliance.status === "checking" ? "Analyzing..." : "All clear"} </span> </div> {codeCompliance.issues.map((issue, index) => ( <div key={index} className="text-xs text-gray-600 ml-6"> • {issue} </div> ))} </div> </div> )} {/* Quick Actions */} <div className="mt-auto pt-4 border-t"> <div className="text-sm font-medium text-gray-700 mb-3">Quick Actions</div> <div className="space-y-2"> <button className="w-full text-left px-3 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded-lg transition"> Generate area schedule </button> <button className="w-full text-left px-3 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded-lg transition"> Export to BIM </button> {designPhase === "conceptual" && ( <button className="w-full text-left px-3 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded-lg transition"> Import program requirements </button> )} </div> </div> </aside> ); } export default SpatialIntelligenceHub;</file><file path="/components/Sidebar.jsx">import React, { useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlus, faLayerGroup, faCompass, faCube, faImage, faChevronDown, faChevronUp, faCircle } from "@fortawesome/free-solid-svg-icons"; import { SIDEBAR_MENU } from "../lib/constants"; import { classNames } from "../utils/utilities"; function Sidebar({ activePlan, setActivePlan, designPhase }) { const [openSections, setOpenSections] = useState({ Plans: true, Elevations: true, "3D Views": true, Renders: true, }); const handleSectionToggle = (section) => { setOpenSections((prev) => ({ ...prev, [section]: !prev[section], })); }; const isItemRelevant = (item) => { return item.phase === "all" || item.phase === designPhase; }; return ( <aside className="w-64 bg-white border-r h-full flex flex-col py-4 px-2 overflow-y-auto design-phase-transition"> <div className="flex items-center justify-between mb-4 px-2"> <span className="text-gray-700 font-semibold text-lg">Views</span> <div className="flex items-center space-x-1"> <FontAwesomeIcon icon={faCircle} className={classNames( "w-2 h-2", designPhase === "conceptual" ? "text-green-500" : designPhase === "schematic" ? "text-blue-500" : "text-purple-500" )} /> <button className="text-gray-500 hover:text-gray-700 text-sm"> Stories </button> </div> </div> {SIDEBAR_MENU.map((section) => { const relevantChildren = section.children.filter(isItemRelevant); const hasRelevantChildren = relevantChildren.length > 0; return ( <div key={section.label} className="mb-2"> <button className={classNames( "flex items-center w-full px-2 py-1 font-medium hover:bg-gray-100 rounded transition", hasRelevantChildren ? "text-gray-600" : "text-gray-400" )} onClick={() => handleSectionToggle(section.label)} aria-label={section.label} disabled={!hasRelevantChildren} > <FontAwesomeIcon icon={ section.label === "Plans" ? faLayerGroup : section.label === "Elevations" ? faCompass : section.label === "3D Views" ? faCube : faImage } className="mr-2" /> <span>{section.label}</span> <span className="ml-auto"> <FontAwesomeIcon icon={openSections[section.label] ? faChevronUp : faChevronDown} /> </span> {["Plans", "3D Views", "Renders"].includes(section.label) && hasRelevantChildren && ( <button className="ml-2 p-1 rounded hover:bg-gray-200" aria-label={`Add to ${section.label}`} > <FontAwesomeIcon icon={faPlus} /> </button> )} </button> {openSections[section.label] && relevantChildren.length > 0 && ( <ul className="ml-6 mt-1"> {relevantChildren.map((item) => ( <li key={item.label}> <button className={classNames( "flex items-center w-full px-2 py-1 rounded text-sm transition", activePlan === item.label ? "bg-blue-100 text-blue-700 font-semibold" : "text-gray-600 hover:bg-gray-100" )} onClick={() => setActivePlan(item.label)} aria-label={item.label} > <FontAwesomeIcon icon={ section.label === "Plans" ? faLayerGroup : section.label === "Elevations" ? faCompass : section.label === "3D Views" ? faCube : faImage } className="mr-2" /> {item.label} </button> </li> ))} </ul> )} {openSections[section.label] && section.label === "Renders" && relevantChildren.length === 0 && ( <div className="ml-6 mt-2 text-xs text-gray-400"> Available in technical phase </div> )} </div> ); })} </aside> ); } export default Sidebar;</file><file path="/components/BottomBar.jsx">import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCog, faEye, faHandPaper, faCube, faSearch, faExpand } from "@fortawesome/free-solid-svg-icons"; import { classNames } from "../utils/utilities"; function BottomBar({ canvasMode, setCanvasMode }) { return ( <div className="fixed bottom-0 left-0 right-0 bg-white border-t px-6 py-3 flex items-center justify-between z-30 design-phase-transition"> <div className="flex items-center space-x-3"> <button className="p-2 rounded hover:bg-gray-100 transition" aria-label="Settings"> <FontAwesomeIcon icon={faCog} /> </button> <button className="p-2 rounded hover:bg-gray-100 transition" aria-label="View Options"> <FontAwesomeIcon icon={faEye} /> </button> <button className="p-2 rounded hover:bg-gray-100 transition" aria-label="Pan Tool"> <FontAwesomeIcon icon={faHandPaper} /> </button> {/* View Mode Toggle */} <div className="flex items-center bg-gray-100 rounded-lg p-1"> <button onClick={() => setCanvasMode("2d")} className={classNames( "px-3 py-1 rounded-md text-sm font-medium transition", canvasMode === "2d" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600" )} > 2D </button> <button onClick={() => setCanvasMode("3d")} className={classNames( "px-3 py-1 rounded-md text-sm font-medium transition flex items-center", canvasMode === "3d" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600" )} > <FontAwesomeIcon icon={faCube} className="mr-1" /> 3D </button> </div> </div> {/* Enhanced Search */} <div className="flex-1 flex justify-center"> <div className="relative w-96"> <FontAwesomeIcon icon={faSearch} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" /> <input type="text" className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-200 bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:bg-white transition" placeholder="Search tools, elements, or ask for help..." aria-label="Search tools or commands" /> </div> </div> {/* View Controls */} <div className="flex items-center space-x-2"> <button className="p-2 rounded hover:bg-gray-100 transition" aria-label="Fullscreen"> <FontAwesomeIcon icon={faExpand} /> </button> <div className="text-xs text-gray-500 ml-2"> Press / to search </div> </div> </div> ); } export default BottomBar;</file><file path="/index.html"><!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <title>React App</title> </head> <body> <div id="root"></div> </body></html></file></FileObject>