\n \n

\n {path.map((pId, i) => {\n const node = pId === 'root' \n if (n.id === pId) return n;\n if (n.children) { for(let c of n.children) { let r = find(c); if(r) return r; } }\n return null;\n })(fileSystem);\n return (\n \n setPath(path.slice(0, i + 1))}>\n {pId === 'root' \n \n {i < path.length - 1 && }\n \n );\n })}\n

\n \n

\n {/* Sidebar */}\n

Production Apps

\n {APP_CONFIG.filter(app => app.rootDir).map(app => (\n \n ))}\n

\n\n {/* Grid */}\n

\n {currentDir.children.map(item => (\n

handleFileOpen(item)}\n onClick={() => setSelection(item.id)}\n className={`flex flex-col items-center p-4 rounded-3xl border-2 transition-all cursor-pointer group ${selection === item.id \n >\n

\n {item.type === 'folder' \n

\n {item.name}\n \n {item.type === 'folder' \n \n

\n ))}\n

\n {selection && (\n

\n \n Item: {currentDir.children.find(c => c.id === selection)\n \n \n

\n )}\n

\n );\n};\n\n// --- APP CONTENT COMPONENTS ---\n\nconst StoryWriterApp = () => (\n

\n Outlining\n Chapters\n

The Neon Veil

\"The sky above the port was the color of television, tuned to a dead channel.\" - Elias adjusted his optics, the static of the city buzzing in his ears. Sector 4 was awake, and it was hungry.

\n);\n\nconst CharacterManagerApp = () => (\n

\n {[\n { name: 'Elias Thorne', role: 'Protagonist', color: 'bg-blue-500', icon: User },\n { name: 'Serafina Volt', role: 'Antagonist', color: 'bg-red-500', icon: UserCircle },\n { name: 'Jax', role: 'Sidekick', color: 'bg-emerald-500', icon: User },\n ].map(char => (\n

{char.name}

Role: {char.role}

\n ))}\n

\n);\n\nconst ScriptWriterApp = () => (\n

EXT. NEON ALLEY - NIGHT

The rain sizzles as it hits the cybernetics. ELIAS (30s) leans against a dumpster.

ELIAS

\"I'm too old for these data heists.\"

\n);\n\nconst ScenePlannerApp = () => (\n

\n {[1, 2, 3].map(s => (\n

Sequence {s}: The Chase

\n ))}\n

\n);\n\nconst EpisodeManagerApp = () => (\n

Season Roadmap

\n {['The Binary Heist', 'Silicon Tears', 'Hardwired'].map((title, i) => (\n

0{i+1}

{title}

STABLE

\n ))}\n

\n);\n\nconst ProducerDashboardApp = () => (\n

Budget: $4.2M

142

Days to Launch

88%

VFX Rendered

\n);\n\nconst VideoFXEditorApp = () => (\n

\n);\n\nconst TerminalApp = () => (\n

STUDIO OS KERNEL V5.2

[SYSTEM] INITIALIZING APP_ROOTS...

[OK] WRITER_SYSTEM MOUNTED

[OK] FX_ENGINE READY

\n studio@root:~$\n _\n

\n);\n\nconst FileViewer = ({ file }) => (\n

{file\n
{file\n
\n

\n);\n\nconst StickyNotesApp = ({ file }) => (\n

\n);\n\nconst SettingsApp = () => {\n    const { osName, setOsName } = useContext(DesktopContext);\n    return (\n        <div className=\"p-12 h-full bg-white\">\n            <h2 className=\"text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 mb-6\">System Settings</h2>\n            <div className=\"bg-gray-50 p-6 rounded-3xl border\">\n                <label className=\"text-[9px] font-black uppercase text-gray-400 block mb-2\">Display Name</label>\n                <input value={osName} onChange={e => setOsName(e.target.value)} className=\"bg-transparent text-2xl font-black uppercase border-none focus:ring-0 p-0\" />\n            </div>\n        </div>\n    );\n};\n\n// --- WINDOW COMPONENT ---\n\nconst Window = ({ windowState }) => {\n  const { focusWindow, closeApp, toggleMinimize, toggleMaximize, updateWindowPosition, activeWindowId } = useContext(DesktopContext);\n  const app = APP_CONFIG.find(a => a.id === windowState.appId);\n  const isDragging = useRef(false);\n  const offset = useRef({ x: 0, y: 0 });\n\n  if (windowState.isMinimized) return null;\n\n  const handleMouseDown = (e) => {\n    focusWindow(windowState.id);\n    if (windowState.isMaximized || e.target.closest('button')) return;\n    isDragging.current = true;\n    offset.current = { x: e.clientX - windowState.position.x, y: e.clientY - windowState.position.y };\n    const onMouseMove = (m) => isDragging.current && updateWindowPosition(windowState.id, { x: m.clientX - offset.current.x, y: m.clientY - offset.current.y });\n    const onMouseUp = () => { isDragging.current = false; window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseUp); };\n    window.addEventListener('mousemove', onMouseMove);\n    window.addEventListener('mouseup', onMouseUp);\n  };\n\n  const renderContent = () => {\n    switch(windowState.appId) {\n        case 'writer': return <StoryWriterApp />;\n        case 'characters': return <CharacterManagerApp />;\n        case 'write': return <ScriptWriterApp />;\n        case 'scenes': return <ScenePlannerApp />;\n        case 'episodes': return <EpisodeManagerApp />;\n        case 'producer': return <ProducerDashboardApp />;\n        case 'fx-editor': return <VideoFXEditorApp />;\n        case 'files': return <FileExplorer />;\n        case 'viewer': return <FileViewer file={windowState.fileData} />;\n        case 'notes': return <StickyNotesApp file={windowState.fileData} />;\n        case 'terminal': return <TerminalApp />;\n        case 'settings': return <SettingsApp />;\n        default: return null;\n    }\n  };\n\n  return (\n    <div className={`absolute flex flex-col rounded-[2.5rem] shadow-2xl overflow-hidden bg-white border-2 transition-[box-shadow,scale,opacity] duration-200 ${activeWindowId === windowState.id \n      style={{ left: windowState.isMaximized \n      onClick={() => focusWindow(windowState.id)}>\n      <div className=\"h-14 bg-gray-50 border-b flex items-center justify-between px-7 cursor-default\" onMouseDown={handleMouseDown}>\n        <div className=\"flex items-center gap-3\">\n          {app && <app.icon size={18} className=\"text-primary\" />}\n          <span className=\"text-[11px] font-black text-gray-800 uppercase tracking-widest\">{app\n        </div>\n        <div className=\"flex gap-2\">\n          <button onClick={() => toggleMinimize(windowState.id)} className=\"w-8 h-8 flex items-center justify-center hover:bg-gray-200 rounded-full\"><Minimize2 size={14}/></button>\n          <button onClick={() => toggleMaximize(windowState.id)} className=\"w-8 h-8 flex items-center justify-center hover:bg-gray-200 rounded-full\"><Maximize2 size={14}/></button>\n          <button onClick={() => closeApp(windowState.id)} className=\"w-8 h-8 flex items-center justify-center hover:bg-red-500 hover:text-white rounded-full\"><X size={14}/></button>\n        </div>\n      </div>\n      {renderContent()}\n    </div>\n  );\n};\n\n// --- CORE UI ---\n\nconst DesktopIcon = ({ app }) => {\n    const { openApp, iconPositions, updateIconPosition } = useContext(DesktopContext);\n    const pos = iconPositions[app.id] || { x: 20, y: 20 };\n    return (\n        <div className=\"absolute w-24 flex flex-col items-center gap-2 p-2 rounded-3xl group cursor-pointer\" style={{ left: pos.x, top: pos.y }} onDoubleClick={() => openApp(app.id)}>\n            <div className=\"w-16 h-16 bg-white/90 rounded-[1.75rem] shadow-sm flex items-center justify-center border border-white/50 backdrop-blur-sm group-hover:shadow-xl transition-all\"><app.icon size={32} className=\"text-primary\" /></div>\n            <span className=\"text-[10px] font-black tracking-widest text-center px-2 py-1 rounded-full uppercase truncate w-full bg-black/5 text-gray-700\">{app.title}</span>\n        </div>\n    );\n};\n\nconst Taskbar = () => {\n  const { windows, openApp, activeWindowId, toggleMinimize, focusWindow, pinnedApps } = useContext(DesktopContext);\n  return (\n    <div className=\"h-16 bg-white/80 backdrop-blur-2xl border-t flex items-center justify-center px-4 gap-2 z-[9999]\">\n      <div className=\"flex items-center gap-2 bg-gray-100/50 p-2 rounded-full border shadow-inner\">\n        <button className=\"p-2.5 text-primary hover:bg-white rounded-full\"><LayoutGrid size={24} /></button>\n        {pinnedApps.map(id => {\n          const app = APP_CONFIG.find(a => a.id === id);\n          const win = windows.find(w => w.appId === id);\n          return (\n            <button key={id} onClick={() => win \n              className={`p-2.5 relative group rounded-2xl transition-all ${win\n              <app.icon size={24} className={win\n              {win && <div className=\"absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-1 h-1 bg-primary rounded-full\" />}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default function App() {\n  const [state, dispatch] = useReducer(desktopReducer, initialState);\n  const openApp = (appId, view, fileData) => dispatch({ type: 'OPEN_APP', payload: { appId, view, fileData } });\n  const closeApp = (windowId) => dispatch({ type: 'CLOSE_APP', payload: { windowId } });\n  const focusWindow = (windowId) => dispatch({ type: 'FOCUS_WINDOW', payload: { windowId } });\n  const toggleMinimize = (windowId) => dispatch({ type: 'TOGGLE_MINIMIZE', payload: { windowId } });\n  const toggleMaximize = (windowId) => dispatch({ type: 'TOGGLE_MAXIMIZE', payload: { windowId } });\n  const updateWindowPosition = (windowId, position) => dispatch({ type: 'UPDATE_POSITION', payload: { windowId, position } });\n  const setOsName = (name) => dispatch({ type: 'SET_OS_NAME', payload: { name } });\n  const updateIconPosition = (appId, position) => dispatch({ type: 'UPDATE_ICON_POSITION', payload: { appId, position } });\n  const updateFileSystem = (fs) => dispatch({ type: 'UPDATE_FILE_SYSTEM', payload: fs });\n  const updateColors = (colors) => dispatch({ type: 'UPDATE_COLORS', payload: colors });\n\n  return (\n    <DesktopContext.Provider value={{ ...state, openApp, closeApp, focusWindow, toggleMinimize, toggleMaximize, updateWindowPosition, setOsName, updateIconPosition, updateFileSystem, updateColors }}>\n      <div className=\"h-screen w-full flex flex-col overflow-hidden bg-[\n        <div className=\"h-10 bg-white/70 backdrop-blur-md border-b flex items-center justify-between px-8 z-[9999]\">\n          <div className=\"flex items-center gap-4 font-black uppercase tracking-widest text-[11px]\"><Play size={14} className=\"text-primary\" fill=\"currentColor\"/>{state.osName}</div>\n          <div className=\"text-[10px] font-black text-gray-500 uppercase\">{new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>\n        </div>\n        <div className=\"flex-1 relative p-8\">\n          {APP_CONFIG.filter(a => !a.hidden).map(app => <DesktopIcon key={app.id} app={app} />)}\n          {state.windows.map(win => <Window key={win.id} windowState={win} />)}\n        </div>\n        <Taskbar />\n        <style>{`:root { --primary: 217 89% 61%; } .text-primary { color: hsl(var(--primary)); } .bg-primary { background-color: hsl(var(--primary)); } .border-primary { border-color: hsl(var(--primary)); } .ring-primary { --tw-ring-color: hsl(var(--primary)); }`}</style>\n      </div>\n    </DesktopContext.Provider>\n  );\n}","owner",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":-5,"_81":-5,"_82":58},"prompt",{"_173":174,"_175":176},"type","plaintext","text","import React, { createContext, useContext, useReducer, useCallback, useEffect, useState, useRef } from 'react';\nimport { \n  Settings, \n  Terminal, \n  Folder, \n  Globe, \n  StickyNote, \n  Maximize2, \n  Minimize2, \n  X, \n  LayoutGrid, \n  Palette,\n  ArrowLeft,\n  ChevronRight as ChevronRightIcon,\n  FolderPlus,\n  FilePlus,\n  FileText,\n  Trash2,\n  Eye,\n  Activity,\n  Cpu,\n  Layers,\n  HardDrive,\n  Info,\n  Play,\n  Building2,\n  Clapperboard,\n  UserCircle,\n  PenTool,\n  Users,\n  Sparkles,\n  Clapperboard as MovieIcon,\n  BookOpen,\n  Film,\n  ListOrdered,\n  FileVideo,\n  FileJson,\n  User\n} from 'lucide-react';\n\n// --- HELPERS ---\n\nconst hexToHslString = (hex) => {\n  hex = hex.replace(/^#/, '');\n  const r = parseInt(hex.substring(0, 2), 16) / 255;\n  const g = parseInt(hex.substring(2, 4), 16) / 255;\n  const b = parseInt(hex.substring(4, 6), 16) / 255;\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  let h = 0, s = 0, l = (max + min) / 2;\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    switch (max) {\n      case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n      case g: h = (b - r) / d + 2; break;\n      case b: h = (r - g) / d + 4; break;\n    }\n    h /= 6;\n  }\n  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;\n};\n\n// --- INITIAL DATA (Updated for App-Specific Structure) ---\n\nconst INITIAL_FILES = {\n  id: 'root',\n  name: 'Studio Root',\n  type: 'folder',\n  children: [\n    { id: 'app-writer', name: 'Story_Writer', type: 'folder', children: [\n        { id: 'w-1', name: 'Master_Plot_Outline.txt', type: 'file', content: 'Act 1: The discovery of the core. Act 2: The betrayal. Act 3: The reconstruction.' },\n        { id: 'w-2', name: 'World_Building_Notes.txt', type: 'file', content: 'Atmosphere is 40% neon, 60% smog. Social hierarchy based on bandwidth access.' }\n    ]},\n    { id: 'app-chars', name: 'Characters', type: 'folder', children: [\n        { id: 'c-1', name: 'Elias_Thorne.json', type: 'file', content: '{\"name\": \"Elias Thorne\", \"backstory\": \"Ex-military hacker\", \"motivation\": \"Redemption\"}' },\n        { id: 'c-2', name: 'Serafina_Volt.json', type: 'file', content: '{\"name\": \"Serafina Volt\", \"backstory\": \"CEO of Volt Corp\", \"motivation\": \"Control\"}' }\n    ]},\n    { id: 'app-script', name: 'Script_Writer', type: 'folder', children: [\n        { id: 's-1', name: 'Episode_01_Final.fountain', type: 'file', content: 'INT. OFFICE - DAY\\n\\nELIAS stares at the screen. The clock is ticking.' },\n        { id: 's-2', name: 'Dialogue_Tweaks.txt', type: 'file', content: 'Make Jax sound more frantic in Scene 4.' }\n    ]},\n    { id: 'app-production', name: 'Production_Scenes', type: 'folder', children: [\n        { id: 'p-1', name: 'Scene_01_Storyboard.png', type: 'file', content: '[Image Data Placeholder]' },\n        { id: 'p-2', name: 'Shot_List.csv', type: 'file', content: 'Shot 1.1, Wide, Sector 4, Night' }\n    ]},\n    { id: 'app-fx', name: 'FX_Editor', type: 'folder', children: [\n        { id: 'fx-1', name: 'Rain_Texture_Loop.mp4', type: 'file', content: '[Video Stream Placeholder]' },\n        { id: 'fx-2', name: 'Color_Grade_LUT.cube', type: 'file', content: 'Lattice 33' }\n    ]},\n    { id: 'app-producer', name: 'Producer_Docs', type: 'folder', children: [\n        { id: 'pr-1', name: 'Budget_S01.xlsx', type: 'file', content: 'Total: $4.2M' },\n        { id: 'pr-2', name: 'Cast_Contracts.pdf', type: 'file', content: '[Encrypted PDF]' }\n    ]}\n  ]\n};\n\nconst APP_CONFIG = [\n  { id: 'files', title: 'File Explorer', icon: Folder, category: 'System', rootDir: 'root' },\n  { id: 'writer', title: 'Story Writer', icon: BookOpen, category: 'Creative', rootDir: 'app-writer' },\n  { id: 'characters', title: 'Character Manager', icon: Users, category: 'Creative', rootDir: 'app-chars' },\n  { id: 'write', title: 'Script Writer', icon: PenTool, category: 'Creative', rootDir: 'app-script' },\n  { id: 'scenes', title: 'Scene Planner', icon: MovieIcon, category: 'Production', rootDir: 'app-production' },\n  { id: 'episodes', title: 'Episode/Installment', icon: ListOrdered, category: 'Production', rootDir: 'root' },\n  { id: 'producer', title: 'Producer Dashboard', icon: Building2, category: 'Management', rootDir: 'app-producer' },\n  { id: 'fx-editor', title: 'Video & FX Editor', icon: Sparkles, category: 'Post-Prod', rootDir: 'app-fx' },\n  { id: 'browser', title: 'Web Browser', icon: Globe, category: 'Internet' },\n  { id: 'terminal', title: 'Terminal', icon: Terminal, category: 'Development' },\n  { id: 'settings', title: 'Settings', icon: Settings, category: 'System' },\n  { id: 'notes', title: 'Sticky Notes', icon: StickyNote, category: 'Tools' },\n  { id: 'viewer', title: 'File Viewer', icon: Eye, category: 'System', hidden: true },\n];\n\n// --- REDUCER & CONTEXT ---\n\nconst DesktopContext = createContext(undefined);\n\nconst initialState = {\n  osName: 'STUDIO OS',\n  pinnedApps: ['writer', 'characters', 'write', 'fx-editor', 'producer', 'files'],\n  iconPositions: APP_CONFIG.reduce((acc, app, i) => {\n    if (app.hidden) return acc;\n    const col = Math.floor(i / 6);\n    const row = i % 6;\n    acc[app.id] = { x: 20 + (col * 110), y: 20 + (row * 110) };\n    return acc;\n  }, {}),\n  windows: [\n    { id: 'win-init', appId: 'files', currentView: 'home', isMinimized: false, isMaximized: false, position: { x: 100, y: 80 }, size: { width: 900, height: 600 }, zIndex: 10 }\n  ],\n  fileSystem: INITIAL_FILES,\n  activeWindowId: 'win-init',\n  nextZIndex: 11,\n  theme: 'modern',\n  colors: { primary: '#6366f1', accent: '#f43f5e' },\n};\n\nfunction desktopReducer(state, action) {\n  switch (action.type) {\n    case 'OPEN_APP': {\n      const { appId, view, fileData } = action.payload;\n      const existing = state.windows.find(w => w.appId === appId && (!fileData || w.fileData?.id === fileData.id));\n      \n      if (existing) {\n        return { \n          ...state, \n          activeWindowId: existing.id, \n          windows: state.windows.map(w => w.id === existing.id ? { ...w, isMinimized: false, zIndex: state.nextZIndex, currentView: view || w.currentView } : w),\n          nextZIndex: state.nextZIndex + 1 \n        };\n      }\n      const id = `win-${Date.now()}`;\n      return {\n        ...state,\n        windows: [...state.windows, {\n          id, appId, isMinimized: false, isMaximized: false,\n          currentView: view || 'default',\n          fileData: fileData || null,\n          position: { x: 150 + (state.windows.length * 20), y: 100 + (state.windows.length * 20) },\n          size: { width: 850, height: 550 },\n          zIndex: state.nextZIndex\n        }],\n        activeWindowId: id,\n        nextZIndex: state.nextZIndex + 1\n      };\n    }\n    case 'CLOSE_APP':\n      return { ...state, windows: state.windows.filter(w => w.id !== action.payload.windowId) };\n    case 'FOCUS_WINDOW':\n      return { \n        ...state, \n        activeWindowId: action.payload.windowId,\n        windows: state.windows.map(w => w.id === action.payload.windowId ? { ...w, zIndex: state.nextZIndex } : w),\n        nextZIndex: state.nextZIndex + 1 \n      };\n    case 'UPDATE_ICON_POSITION':\n        return { ...state, iconPositions: { ...state.iconPositions, [action.payload.appId]: action.payload.position } };\n    case 'UPDATE_FILE_SYSTEM':\n        return { ...state, fileSystem: action.payload };\n    case 'TOGGLE_MINIMIZE':\n      return { ...state, windows: state.windows.map(w => w.id === action.payload.windowId ? { ...w, isMinimized: !w.isMinimized } : w) };\n    case 'TOGGLE_MAXIMIZE':\n      return { ...state, windows: state.windows.map(w => w.id === action.payload.windowId ? { ...w, isMaximized: !w.isMaximized } : w) };\n    case 'UPDATE_POSITION':\n      return { ...state, windows: state.windows.map(w => w.id === action.payload.windowId ? { ...w, position: action.payload.position } : w) };\n    case 'UPDATE_COLORS':\n      return { ...state, colors: { ...state.colors, ...action.payload } };\n    case 'SET_OS_NAME':\n      return { ...state, osName: action.payload.name };\n    default:\n      return state;\n  }\n}\n\n// --- FILE EXPLORER (App-Aware) ---\n\nconst FileExplorer = () => {\n    const { fileSystem, updateFileSystem, openApp } = useContext(DesktopContext);\n    const [path, setPath] = useState(['root']);\n    const [selection, setSelection] = useState(null);\n\n    const getCurrentDir = () => {\n        let current = fileSystem;\n        for (let i = 1; i < path.length; i++) {\n            current = current.children.find(c => c.id === path[i]);\n        }\n        return current;\n    };\n\n    const currentDir = getCurrentDir();\n\n    const getIconForFile = (name) => {\n        const ext = name.split('.').pop().toLowerCase();\n        if (['mp4', 'mov', 'avi'].includes(ext)) return <FileVideo size={40} className=\"text-purple-500\" />;\n        if (ext === 'json') return <FileJson size={40} className=\"text-amber-500\" />;\n        if (['jpg', 'png', 'gif', 'svg'].includes(ext)) return <Film size={40} className=\"text-emerald-500\" />;\n        return <FileText size={40} className=\"text-gray-400\" />;\n    };\n\n    const handleFileOpen = (item) => {\n        if (item.type === 'folder') {\n            setPath([...path, item.id]);\n            setSelection(null);\n        } else {\n            const ext = item.name.split('.').pop().toLowerCase();\n            if (ext === 'txt') openApp('notes', 'default', item);\n            else openApp('viewer', 'default', item);\n        }\n    };\n\n    const goBack = () => { if (path.length > 1) setPath(path.slice(0, -1)); };\n\n    const deleteItem = (id) => {\n        const updateNested = (node) => {\n            if (node.children) return { ...node, children: node.children.filter(c => c.id !== id).map(updateNested) };\n            return node;\n        };\n        updateFileSystem(updateNested(fileSystem));\n        setSelection(null);\n    };\n\n    return (\n        <div className=\"flex flex-col h-full bg-white select-none\">\n            <div className=\"h-12 border-b flex items-center px-4 gap-4 bg-gray-50/50\">\n                <button onClick={goBack} disabled={path.length <= 1} className=\"p-1.5 hover:bg-gray-200 rounded-lg disabled:opacity-30 transition-colors\"><ArrowLeft size={16}/></button>\n                <div className=\"flex items-center gap-1 text-[11px] font-bold text-gray-500 overflow-hidden\">\n                    {path.map((pId, i) => {\n                        const node = pId === 'root' ? fileSystem : (function find(n) {\n                            if (n.id === pId) return n;\n                            if (n.children) { for(let c of n.children) { let r = find(c); if(r) return r; } }\n                            return null;\n                        })(fileSystem);\n                        return (\n                            <React.Fragment key={pId}>\n                                <span className=\"hover:text-primary cursor-pointer max-w-[120px] truncate\" onClick={() => setPath(path.slice(0, i + 1))}>\n                                    {pId === 'root' ? 'Studio Root' : node?.name}\n                                </span>\n                                {i < path.length - 1 && <ChevronRightIcon size={12}/>}\n                            </React.Fragment>\n                        );\n                    })}\n                </div>\n            </div>\n            \n            <div className=\"flex-1 flex overflow-hidden\">\n                {/* Sidebar */}\n                <div className=\"w-48 border-r bg-gray-50/50 p-4 space-y-6\">\n                    <div>\n                        <h4 className=\"text-[9px] font-black uppercase tracking-widest text-gray-400 mb-3 px-2\">Production Apps</h4>\n                        <div className=\"space-y-1\">\n                            {APP_CONFIG.filter(app => app.rootDir).map(app => (\n                                <button \n                                    key={app.id}\n                                    onClick={() => setPath(['root', app.rootDir])}\n                                    className=\"w-full flex items-center gap-2 px-3 py-2 rounded-xl text-[10px] font-bold text-gray-600 hover:bg-white hover:shadow-sm transition-all text-left\"\n                                >\n                                    <app.icon size={14} className=\"text-primary\"/>\n                                    {app.title}\n                                </button>\n                            ))}\n                        </div>\n                    </div>\n                </div>\n\n                {/* Grid */}\n                <div className=\"flex-1 p-6 overflow-auto\">\n                    <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n                        {currentDir.children.map(item => (\n                            <div \n                                key={item.id}\n                                onDoubleClick={() => handleFileOpen(item)}\n                                onClick={() => setSelection(item.id)}\n                                className={`flex flex-col items-center p-4 rounded-3xl border-2 transition-all cursor-pointer group ${selection === item.id ? 'bg-primary/5 border-primary/20 shadow-md' : 'border-transparent hover:bg-gray-50'}`}\n                            >\n                                <div className={`w-16 h-16 rounded-2xl flex items-center justify-center transition-transform group-hover:scale-110`}>\n                                    {item.type === 'folder' ? <Folder size={40} className=\"text-blue-500\" fill=\"currentColor\" fillOpacity={0.2}/> : getIconForFile(item.name)}\n                                </div>\n                                <span className=\"mt-3 text-[11px] font-bold text-gray-700 text-center truncate w-full px-1\">{item.name}</span>\n                                <span className=\"text-[8px] font-black uppercase text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity\">\n                                    {item.type === 'folder' ? 'Folder' : item.name.split('.').pop()}\n                                </span>\n                            </div>\n                        ))}\n                    </div>\n                </div>\n            </div>\n            {selection && (\n                <div className=\"h-10 border-t bg-gray-50 px-6 flex items-center justify-between\">\n                    <span className=\"text-[10px] font-black text-gray-400 uppercase tracking-widest\">\n                        Item: {currentDir.children.find(c => c.id === selection)?.name}\n                    </span>\n                    <button onClick={() => deleteItem(selection)} className=\"text-red-500 hover:bg-red-50 p-1.5 rounded-lg transition-colors\"><Trash2 size={16}/></button>\n                </div>\n            )}\n        </div>\n    );\n};\n\n// --- APP CONTENT COMPONENTS ---\n\nconst StoryWriterApp = () => (\n    <div className=\"flex flex-col h-full bg-stone-50 overflow-hidden\">\n        <div className=\"h-12 border-b bg-white flex items-center px-6 gap-6\">\n            <span className=\"text-[10px] font-black uppercase tracking-widest text-primary\">Outlining</span>\n            <span className=\"text-[10px] font-black uppercase tracking-widest text-stone-400\">Chapters</span>\n        </div>\n        <div className=\"flex-1 flex p-10\">\n            <div className=\"max-w-2xl mx-auto space-y-8 bg-white p-12 shadow-sm rounded-3xl border\">\n                <h1 className=\"text-4xl font-serif font-black text-stone-800\">The Neon Veil</h1>\n                <p className=\"text-lg font-serif leading-relaxed text-stone-700\">\"The sky above the port was the color of television, tuned to a dead channel.\" - Elias adjusted his optics, the static of the city buzzing in his ears. Sector 4 was awake, and it was hungry.</p>\n            </div>\n        </div>\n    </div>\n);\n\nconst CharacterManagerApp = () => (\n    <div className=\"flex flex-col h-full bg-white p-8 overflow-auto\">\n        <div className=\"grid grid-cols-2 lg:grid-cols-3 gap-6\">\n            {[\n                { name: 'Elias Thorne', role: 'Protagonist', color: 'bg-blue-500', icon: User },\n                { name: 'Serafina Volt', role: 'Antagonist', color: 'bg-red-500', icon: UserCircle },\n                { name: 'Jax', role: 'Sidekick', color: 'bg-emerald-500', icon: User },\n            ].map(char => (\n                <div key={char.name} className=\"p-6 border-2 rounded-[2rem] hover:border-primary transition-all group cursor-pointer\">\n                    <div className={`w-16 h-16 ${char.color} rounded-2xl mb-4 flex items-center justify-center text-white`}><char.icon size={32}/></div>\n                    <h3 className=\"text-xl font-black\">{char.name}</h3>\n                    <p className=\"text-[10px] font-bold uppercase tracking-widest text-primary\">Role: {char.role}</p>\n                </div>\n            ))}\n        </div>\n    </div>\n);\n\nconst ScriptWriterApp = () => (\n    <div className=\"flex flex-col h-full bg-gray-100 p-8 overflow-auto\">\n        <div className=\"w-[700px] mx-auto bg-white shadow-2xl p-16 font-mono text-sm leading-tight text-gray-800 uppercase\">\n            <div className=\"mb-8\">EXT. NEON ALLEY - NIGHT</div>\n            <div className=\"mb-4 pl-12 pr-12\">The rain sizzles as it hits the cybernetics. ELIAS (30s) leans against a dumpster.</div>\n            <div className=\"text-center mb-1\">ELIAS</div>\n            <div className=\"text-center italic mb-4 normal-case\">\"I'm too old for these data heists.\"</div>\n        </div>\n    </div>\n);\n\nconst ScenePlannerApp = () => (\n    <div className=\"flex flex-col h-full bg-gray-50 p-8\">\n        <div className=\"grid grid-cols-3 gap-6\">\n            {[1, 2, 3].map(s => (\n                <div key={s} className=\"bg-white border-2 rounded-3xl p-6 shadow-sm\">\n                    <div className=\"aspect-video bg-gray-200 rounded-xl mb-4 flex items-center justify-center\"><MovieIcon size={32} className=\"text-gray-400\"/></div>\n                    <h4 className=\"font-black text-sm\">Sequence {s}: The Chase</h4>\n                </div>\n            ))}\n        </div>\n    </div>\n);\n\nconst EpisodeManagerApp = () => (\n    <div className=\"p-10 h-full bg-white overflow-auto\">\n        <h2 className=\"text-2xl font-black mb-8 uppercase tracking-tighter\">Season Roadmap</h2>\n        <div className=\"space-y-4\">\n            {['The Binary Heist', 'Silicon Tears', 'Hardwired'].map((title, i) => (\n                <div key={title} className=\"flex items-center gap-6 p-6 bg-gray-50 rounded-3xl border\">\n                    <div className=\"text-2xl font-black text-gray-300\">0{i+1}</div>\n                    <div className=\"flex-1 font-black\">{title}</div>\n                    <div className=\"px-3 py-1 bg-emerald-100 text-emerald-600 rounded-full text-[9px] font-black\">STABLE</div>\n                </div>\n            ))}\n        </div>\n    </div>\n);\n\nconst ProducerDashboardApp = () => (\n    <div className=\"flex h-full bg-slate-950 text-white p-10 gap-10\">\n        <div className=\"flex-1 space-y-6\">\n            <div className=\"p-8 bg-indigo-600 rounded-[3rem]\">\n                <h2 className=\"text-3xl font-black mb-2 uppercase\">Budget: $4.2M</h2>\n                <div className=\"w-full h-2 bg-white/20 rounded-full overflow-hidden\"><div className=\"h-full bg-white w-2/3\" /></div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-6\">\n                <div className=\"p-6 bg-white/5 border border-white/10 rounded-3xl text-center\">\n                    <div className=\"text-3xl font-black\">142</div>\n                    <div className=\"text-[10px] font-black uppercase text-slate-500\">Days to Launch</div>\n                </div>\n                <div className=\"p-6 bg-white/5 border border-white/10 rounded-3xl text-center\">\n                    <div className=\"text-3xl font-black\">88%</div>\n                    <div className=\"text-[10px] font-black uppercase text-slate-500\">VFX Rendered</div>\n                </div>\n            </div>\n        </div>\n    </div>\n);\n\nconst VideoFXEditorApp = () => (\n    <div className=\"flex flex-col h-full bg-zinc-900 text-zinc-400 p-2 gap-2\">\n        <div className=\"flex-1 bg-black rounded-2xl flex items-center justify-center\"><Play size={48} className=\"opacity-20\"/></div>\n        <div className=\"h-32 bg-zinc-800 rounded-2xl p-4 flex flex-col gap-2\">\n            <div className=\"flex gap-2\">\n                <div className=\"h-4 bg-indigo-500 w-1/2 rounded\" />\n                <div className=\"h-4 bg-emerald-500 w-1/4 rounded\" />\n            </div>\n            <div className=\"h-4 bg-zinc-700 w-full rounded\" />\n        </div>\n    </div>\n);\n\nconst TerminalApp = () => (\n    <div className=\"flex-1 bg-black text-green-500 font-mono p-6 text-xs\">\n        <div>STUDIO OS KERNEL V5.2</div>\n        <div>[SYSTEM] INITIALIZING APP_ROOTS...</div>\n        <div>[OK] WRITER_SYSTEM MOUNTED</div>\n        <div>[OK] FX_ENGINE READY</div>\n        <div className=\"mt-4 flex gap-2\">\n            <span className=\"text-blue-400\">studio@root:~$</span>\n            <span className=\"animate-pulse\">_</span>\n        </div>\n    </div>\n);\n\nconst FileViewer = ({ file }) => (\n    <div className=\"p-10 bg-gray-50 h-full overflow-auto\">\n        <div className=\"max-w-2xl mx-auto bg-white p-12 rounded-[2.5rem] shadow-sm border\">\n            <h2 className=\"text-xl font-black mb-6 uppercase tracking-widest text-primary border-b pb-4\">{file?.name}</h2>\n            <div className=\"text-gray-600 whitespace-pre-wrap font-medium\">{file?.content}</div>\n        </div>\n    </div>\n);\n\nconst StickyNotesApp = ({ file }) => (\n    <div className=\"bg-yellow-50 h-full p-8\">\n        <textarea className=\"w-full h-full bg-transparent outline-none font-bold text-yellow-900 text-lg resize-none\" defaultValue={file?.content || \"Take a note...\"} />\n    </div>\n);\n\nconst SettingsApp = () => {\n    const { osName, setOsName } = useContext(DesktopContext);\n    return (\n        <div className=\"p-12 h-full bg-white\">\n            <h2 className=\"text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 mb-6\">System Settings</h2>\n            <div className=\"bg-gray-50 p-6 rounded-3xl border\">\n                <label className=\"text-[9px] font-black uppercase text-gray-400 block mb-2\">Display Name</label>\n                <input value={osName} onChange={e => setOsName(e.target.value)} className=\"bg-transparent text-2xl font-black uppercase border-none focus:ring-0 p-0\" />\n            </div>\n        </div>\n    );\n};\n\n// --- WINDOW COMPONENT ---\n\nconst Window = ({ windowState }) => {\n  const { focusWindow, closeApp, toggleMinimize, toggleMaximize, updateWindowPosition, activeWindowId } = useContext(DesktopContext);\n  const app = APP_CONFIG.find(a => a.id === windowState.appId);\n  const isDragging = useRef(false);\n  const offset = useRef({ x: 0, y: 0 });\n\n  if (windowState.isMinimized) return null;\n\n  const handleMouseDown = (e) => {\n    focusWindow(windowState.id);\n    if (windowState.isMaximized || e.target.closest('button')) return;\n    isDragging.current = true;\n    offset.current = { x: e.clientX - windowState.position.x, y: e.clientY - windowState.position.y };\n    const onMouseMove = (m) => isDragging.current && updateWindowPosition(windowState.id, { x: m.clientX - offset.current.x, y: m.clientY - offset.current.y });\n    const onMouseUp = () => { isDragging.current = false; window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseUp); };\n    window.addEventListener('mousemove', onMouseMove);\n    window.addEventListener('mouseup', onMouseUp);\n  };\n\n  const renderContent = () => {\n    switch(windowState.appId) {\n        case 'writer': return <StoryWriterApp />;\n        case 'characters': return <CharacterManagerApp />;\n        case 'write': return <ScriptWriterApp />;\n        case 'scenes': return <ScenePlannerApp />;\n        case 'episodes': return <EpisodeManagerApp />;\n        case 'producer': return <ProducerDashboardApp />;\n        case 'fx-editor': return <VideoFXEditorApp />;\n        case 'files': return <FileExplorer />;\n        case 'viewer': return <FileViewer file={windowState.fileData} />;\n        case 'notes': return <StickyNotesApp file={windowState.fileData} />;\n        case 'terminal': return <TerminalApp />;\n        case 'settings': return <SettingsApp />;\n        default: return null;\n    }\n  };\n\n  return (\n    <div className={`absolute flex flex-col rounded-[2.5rem] shadow-2xl overflow-hidden bg-white border-2 transition-[box-shadow,scale,opacity] duration-200 ${activeWindowId === windowState.id ? 'ring-8 ring-primary/5 border-primary/20 opacity-100 scale-100' : 'opacity-90 scale-[0.98]'}`}\n      style={{ left: windowState.isMaximized ? 0 : windowState.position.x, top: windowState.isMaximized ? 40 : windowState.position.y, width: windowState.isMaximized ? '100%' : windowState.size.width, height: windowState.isMaximized ? 'calc(100% - 104px)' : windowState.size.height, zIndex: windowState.zIndex }}\n      onClick={() => focusWindow(windowState.id)}>\n      <div className=\"h-14 bg-gray-50 border-b flex items-center justify-between px-7 cursor-default\" onMouseDown={handleMouseDown}>\n        <div className=\"flex items-center gap-3\">\n          {app && <app.icon size={18} className=\"text-primary\" />}\n          <span className=\"text-[11px] font-black text-gray-800 uppercase tracking-widest\">{app?.title} {windowState.fileData?.name ? `- ${windowState.fileData.name}` : ''}</span>\n        </div>\n        <div className=\"flex gap-2\">\n          <button onClick={() => toggleMinimize(windowState.id)} className=\"w-8 h-8 flex items-center justify-center hover:bg-gray-200 rounded-full\"><Minimize2 size={14}/></button>\n          <button onClick={() => toggleMaximize(windowState.id)} className=\"w-8 h-8 flex items-center justify-center hover:bg-gray-200 rounded-full\"><Maximize2 size={14}/></button>\n          <button onClick={() => closeApp(windowState.id)} className=\"w-8 h-8 flex items-center justify-center hover:bg-red-500 hover:text-white rounded-full\"><X size={14}/></button>\n        </div>\n      </div>\n      {renderContent()}\n    </div>\n  );\n};\n\n// --- CORE UI ---\n\nconst DesktopIcon = ({ app }) => {\n    const { openApp, iconPositions, updateIconPosition } = useContext(DesktopContext);\n    const pos = iconPositions[app.id] || { x: 20, y: 20 };\n    return (\n        <div className=\"absolute w-24 flex flex-col items-center gap-2 p-2 rounded-3xl group cursor-pointer\" style={{ left: pos.x, top: pos.y }} onDoubleClick={() => openApp(app.id)}>\n            <div className=\"w-16 h-16 bg-white/90 rounded-[1.75rem] shadow-sm flex items-center justify-center border border-white/50 backdrop-blur-sm group-hover:shadow-xl transition-all\"><app.icon size={32} className=\"text-primary\" /></div>\n            <span className=\"text-[10px] font-black tracking-widest text-center px-2 py-1 rounded-full uppercase truncate w-full bg-black/5 text-gray-700\">{app.title}</span>\n        </div>\n    );\n};\n\nconst Taskbar = () => {\n  const { windows, openApp, activeWindowId, toggleMinimize, focusWindow, pinnedApps } = useContext(DesktopContext);\n  return (\n    <div className=\"h-16 bg-white/80 backdrop-blur-2xl border-t flex items-center justify-center px-4 gap-2 z-[9999]\">\n      <div className=\"flex items-center gap-2 bg-gray-100/50 p-2 rounded-full border shadow-inner\">\n        <button className=\"p-2.5 text-primary hover:bg-white rounded-full\"><LayoutGrid size={24} /></button>\n        {pinnedApps.map(id => {\n          const app = APP_CONFIG.find(a => a.id === id);\n          const win = windows.find(w => w.appId === id);\n          return (\n            <button key={id} onClick={() => win ? (win.id === activeWindowId ? toggleMinimize(win.id) : focusWindow(win.id)) : openApp(id)}\n              className={`p-2.5 relative group rounded-2xl transition-all ${win?.id === activeWindowId && !win?.isMinimized ? 'bg-white shadow-lg scale-110 ring-2 ring-primary/20' : 'hover:bg-white/50'}`}>\n              <app.icon size={24} className={win?.id === activeWindowId && !win?.isMinimized ? 'text-primary' : 'text-gray-600'} />\n              {win && <div className=\"absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-1 h-1 bg-primary rounded-full\" />}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default function App() {\n  const [state, dispatch] = useReducer(desktopReducer, initialState);\n  const openApp = (appId, view, fileData) => dispatch({ type: 'OPEN_APP', payload: { appId, view, fileData } });\n  const closeApp = (windowId) => dispatch({ type: 'CLOSE_APP', payload: { windowId } });\n  const focusWindow = (windowId) => dispatch({ type: 'FOCUS_WINDOW', payload: { windowId } });\n  const toggleMinimize = (windowId) => dispatch({ type: 'TOGGLE_MINIMIZE', payload: { windowId } });\n  const toggleMaximize = (windowId) => dispatch({ type: 'TOGGLE_MAXIMIZE', payload: { windowId } });\n  const updateWindowPosition = (windowId, position) => dispatch({ type: 'UPDATE_POSITION', payload: { windowId, position } });\n  const setOsName = (name) => dispatch({ type: 'SET_OS_NAME', payload: { name } });\n  const updateIconPosition = (appId, position) => dispatch({ type: 'UPDATE_ICON_POSITION', payload: { appId, position } });\n  const updateFileSystem = (fs) => dispatch({ type: 'UPDATE_FILE_SYSTEM', payload: fs });\n  const updateColors = (colors) => dispatch({ type: 'UPDATE_COLORS', payload: colors });\n\n  return (\n    <DesktopContext.Provider value={{ ...state, openApp, closeApp, focusWindow, toggleMinimize, toggleMaximize, updateWindowPosition, setOsName, updateIconPosition, updateFileSystem, updateColors }}>\n      <div className=\"h-screen w-full flex flex-col overflow-hidden bg-[#f1f5f9]\" style={{ '--primary': hexToHslString(state.colors.primary) }}>\n        <div className=\"h-10 bg-white/70 backdrop-blur-md border-b flex items-center justify-between px-8 z-[9999]\">\n          <div className=\"flex items-center gap-4 font-black uppercase tracking-widest text-[11px]\"><Play size={14} className=\"text-primary\" fill=\"currentColor\"/>{state.osName}</div>\n          <div className=\"text-[10px] font-black text-gray-500 uppercase\">{new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>\n        </div>\n        <div className=\"flex-1 relative p-8\">\n          {APP_CONFIG.filter(a => !a.hidden).map(app => <DesktopIcon key={app.id} app={app} />)}\n          {state.windows.map(win => <Window key={win.id} windowState={win} />)}\n        </div>\n        <Taskbar />\n        <style>{`:root { --primary: 217 89% 61%; } .text-primary { color: hsl(var(--primary)); } .bg-primary { background-color: hsl(var(--primary)); } .border-primary { border-color: hsl(var(--primary)); } .ring-primary { --tw-ring-color: hsl(var(--primary)); }`}</style>\n      </div>\n    </DesktopContext.Provider>\n  );\n}","link_url","/p/6n1i27jpv86timg83k__","versioned_link_url","/p/6n1i27jpv86timg83k__/3","yapping","Summary: I added a fully functional desktop environment with draggable windows, a taskbar, file explorer, and app-specific content. You can open apps by double-clicking icons, manage files, and switch between windows. The UI uses a modern design with smooth animations and a cohesive color scheme.","page_description","cursor","eyJpZCI6IjZuMWkyN2pwdjg2dGltZzgza19fIn0","token","included",[],"about",{"_191":-5},"parent","routes/browser/layout","actionData","errors"]
</article></body></html>

Production Apps

The Neon Veil

{char.name}

Sequence {s}: The Chase

Season Roadmap

Budget: $4.2M

{file\n {file\n \n

{file\n
{file\n
\n

cool desktop