ZAZA/OS

{view === "welcome" && ( <>

Witaj, {email || "user"}

)} {view === "login" && ( <> )}

); } // ==================================================================== // BOOT SEQUENCE // ==================================================================== const BOOT_LINES = [ { d: 0, t: "ZAZA/BIOS v3.0.1 — © 2026 ZAZA Studio", c: "g" }, { d: 180, t: "CPU: Anthropic Claude · Opus 4.7 @ 1M context", c: "g" }, { d: 260, t: "Memory: 1.0M tokens detected ............... [OK]", c: "g" }, { d: 340, t: "Vector store: 4.8M docs ..................... [OK]", c: "g" }, { d: 420, t: "AGENT mesh: 14/14 workers online ............ [OK]", c: "g" }, { d: 500, t: "Detecting input devices ...........", c: "d" }, { d: 580, t: " → Keyboard, Mouse, Brain .................. [OK]", c: "g" }, { d: 680, t: "Loading ZAZA/OS kernel ...", c: "d" }, { d: 820, t: " → mod_synthwave .................... loaded", c: "g" }, { d: 880, t: " → mod_raycaster .................... loaded", c: "g" }, { d: 940, t: " → mod_ai_engine .................... loaded", c: "g" }, { d: 1000, t: " → mod_telepathy .............. EXPERIMENTAL", c: "a" }, { d: 1080, t: "Mounting /usr/przyszlosc ............... [OK]", c: "g" }, { d: 1180, t: "Starting window manager ................ [OK]", c: "g" }, { d: 1260, t: "", c: "g" }, { d: 1320, t: "> Wszystko nominalnie. Witaj w 2036.", c: "a" }, { d: 1440, t: "> Inicjalizacja środowiska_", c: "a" }, ]; function BootSequence({ onDone }) { const [shown, setShown] = useState([]); const [progress, setProgress] = useState(0); const [phase, setPhase] = useState("boot"); useEffect(() => { PrzelomAudio.sounds.boot(); BOOT_LINES.forEach((line) => { setTimeout(() => { setShown((prev) => [...prev, line]); if (line.t) PrzelomAudio.sounds.keypress(); }, line.d); }); setTimeout(() => setPhase("bar"), 1600); let p = 0; const tk = setInterval(() => { p += 5 + Math.random() * 9; if (p >= 100) { p = 100; clearInterval(tk); setTimeout(onDone, 350); } setProgress(p); }, 70); return () => clearInterval(tk); }, []); return (

{shown.map((l, i) => (

{l.t || " "}

))}

{phase === "bar" && (

ŁADOWANIE PULPITU

{Math.floor(progress)}%

)}

{phase === "bar" && (

"To, co inni zobaczą za dekadę — masz teraz."

)}

); } // ==================================================================== // WINDOW MANAGER (constrained do ekranu monitora) // ==================================================================== function useWindowDrag(initial, screenSize, titleHeight, getWinSize) { const [pos, setPos] = useState(initial); const posRef = useRef(pos); useEffect(() => { posRef.current = pos; }, [pos]); const drag = useRef(null); const onMouseDown = (e) => { if (e.target.closest(".win-controls") || e.target.closest(".win-resize")) return; drag.current = { x: e.clientX, y: e.clientY, ox: pos.x, oy: pos.y }; e.preventDefault(); }; useEffect(() => { const mv = (e) => { if (!drag.current) return; const newX = drag.current.ox + (e.clientX - drag.current.x); const newY = drag.current.oy + (e.clientY - drag.current.y); // Okno nie może wyjść CAŁKOWICIE poza ekran z żadnej strony — minimum 80px widoczne const sw = screenSize.current?.w || 800; const sh = screenSize.current?.h || 600; const ws = getWinSize?.() || { w: 480, h: 340 }; const TASKBAR = 32; const MIN_VISIBLE = 80; const minX = -ws.w + MIN_VISIBLE; // 80px widoczne z prawej strony okna const maxX = sw - MIN_VISIBLE; // 80px widoczne z lewej strony okna const minY = 0; // titlebar nie wychodzi w górę const maxY = sh - TASKBAR - titleHeight; // titlebar zawsze nad taskbar setPos({ x: Math.max(minX, Math.min(maxX, newX)), y: Math.max(minY, Math.min(maxY, newY)), }); }; const up = () => { drag.current = null; }; window.addEventListener("mousemove", mv); window.addEventListener("mouseup", up); return () => { window.removeEventListener("mousemove", mv); window.removeEventListener("mouseup", up); }; }, []); return [pos, setPos, onMouseDown, posRef]; } // Multi-direction resize: dir ∈ {n,s,w,e,nw,ne,sw,se} // setPos pozwala resizing od N/W krawędzi też przesunąć pozycję okna function useWindowResize(initial, minW = 280, minH = 180, getPos, setPos) { const [size, setSize] = useState(initial); const r = useRef(null); const startResize = (dir) => (e) => { const pos = getPos ? getPos() : { x: 0, y: 0 }; r.current = { dir, x: e.clientX, y: e.clientY, w: size.w, h: size.h, px: pos.x, py: pos.y, }; e.preventDefault(); e.stopPropagation(); }; useEffect(() => { const mv = (e) => { const r0 = r.current; if (!r0) return; const dx = e.clientX - r0.x; const dy = e.clientY - r0.y; let newW = r0.w, newH = r0.h, newPx = r0.px, newPy = r0.py; if (r0.dir.includes("e")) newW = Math.max(minW, r0.w + dx); if (r0.dir.includes("s")) newH = Math.max(minH, r0.h + dy); if (r0.dir.includes("w")) { newW = Math.max(minW, r0.w - dx); newPx = r0.px + (r0.w - newW); } if (r0.dir.includes("n")) { newH = Math.max(minH, r0.h - dy); newPy = r0.py + (r0.h - newH); } setSize({ w: newW, h: newH }); if ((r0.dir.includes("w") || r0.dir.includes("n")) && setPos) { setPos({ x: newPx, y: newPy }); } }; const up = () => { r.current = null; }; window.addEventListener("mousemove", mv); window.addEventListener("mouseup", up); return () => { window.removeEventListener("mousemove", mv); window.removeEventListener("mouseup", up); }; }, []); return [size, setSize, startResize]; } function AppWindow({ win, onClose, onMin, onFocus, onMaximize, children, screenSize, }) { const TITLE_H = 24; const sizeRef = useRef(win.size); // pos pierwszy żeby resizeHandle z dir n/w mógł go modyfikować const [pos, setPos, dragHandle, posRef] = useWindowDrag( win.pos, screenSize, TITLE_H, () => sizeRef.current, ); const [size, setSize, startResize] = useWindowResize( win.size, win.minW || 280, win.minH || 180, () => posRef.current, setPos, ); useEffect(() => { sizeRef.current = size; }, [size]); // KEY: NIE return null gdy minimized — zachowujemy mounted komponent (state, scroll, history). // Tylko ukrywamy CSS-em. const style = win.maximized ? {} : { left: pos.x, top: pos.y, width: size.w, height: size.h }; const Icon = ICON[win.icon]; return (

onFocus(win.id)} >

!win.fixedSize && onMaximize(win.id)} >

{Icon ? : "◆"} {win.title}

{!win.fixedSize && ( )}

{children}

{!win.maximized && !win.fixedSize && ( <>

)}

); } // ==================================================================== // TASKBAR (jedyny element UI na desktopie) // ==================================================================== function Taskbar({ windows, onFocus, onClose, onShutdown, onToggleStart, startOpen, soundOn, onToggleSound, onSpotlight, onSettings, }) { const [time, setTime] = useState(""); useEffect(() => { const t = () => setTime(new Date().toLocaleTimeString("pl-PL", { hour12: false })); t(); const id = setInterval(t, 1000); return () => clearInterval(id); }, []); return (

{windows.map((w) => { const Icon = ICON[w.icon]; return (

onFocus(w.id)}> {Icon ? : "◆"} onFocus(w.id)}> {w.title} { e.stopPropagation(); onClose(w.id); }} title="Zamknij" > ×

); })}

ONLINE

CPU 12%

{time}

); } // ==================================================================== // START MENU // ==================================================================== function StartMenu({ apps, onLaunch, onClose, onShutdown }) { const [q, setQ] = useState(""); const filtered = useMemo(() => { const lq = q.trim().toLowerCase(); if (!lq) return apps; return apps.filter( (a) => a.title.toLowerCase().includes(lq) || a.desc?.toLowerCase().includes(lq) || a.short?.toLowerCase().includes(lq), ); }, [q, apps]); return ( <>

{window.AUTH?.user?.email || "zaza@studio"}

{window.AUTH?.user ? "Zalogowany — pełna personalizacja" : "Gość — kliknij aby się zalogować"}

APLIKACJE · {filtered.length}/{apps.length}

{filtered.length === 0 && (

Brak wyników dla „{q}"

)} {filtered.map((a) => { const Icon = ICON[a.icon]; return ( ); })}

⌕ setQ(e.target.value)} autoFocus /> {q && ( )}

); } // ==================================================================== // SPOTLIGHT // ==================================================================== function Spotlight({ apps, onLaunch, onClose }) { const [q, setQ] = useState(""); const [sel, setSel] = useState(0); const inputRef = useRef(null); useEffect(() => { inputRef.current?.focus(); }, []); const filtered = useMemo(() => { const lq = q.toLowerCase().trim(); if (!lq) return apps; return apps.filter( (a) => a.title.toLowerCase().includes(lq) || a.desc.toLowerCase().includes(lq), ); }, [q, apps]); useEffect(() => { setSel(0); }, [q]); const onKey = (e) => { if (e.key === "Escape") { onClose(); } else if (e.key === "ArrowDown") { e.preventDefault(); setSel((s) => Math.min(filtered.length - 1, s + 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setSel((s) => Math.max(0, s - 1)); } else if (e.key === "Enter" && filtered[sel]) { onLaunch(filtered[sel].id); onClose(); } }; return (

e.stopPropagation()}> setQ(e.target.value)} onKeyDown={onKey} />

{filtered.map((a, i) => { const Icon = ICON[a.icon]; return (

setSel(i)} onClick={() => { onLaunch(a.id); onClose(); }} >

{Icon ? : "◆"}

{a.title}

{a.desc}

); })} {filtered.length === 0 && (

Brak wyników dla "{q}"

)}

); } // ==================================================================== // EXPORTS // ==================================================================== Object.assign(window, { ScreenOff, ScreenStandby, BootSequence, AppWindow, Taskbar, StartMenu, Spotlight, ICON, });