);
}
/* ============== MacShell — the desktop, chassis stage, windows, dock ====== */
function MacShell({ tweaks, setTweak, audioApi }) {
const { phase, progress, warmState, powerOn, powerOff } = usePowerOn(tweaks.skipIntro);
const [windows, setWindows] = useState([]);
const [zCounter, setZ] = useState(10);
const [poweringOff, setPoweringOff] = useState(false);
const [bootKey, setBootKey] = useState(0);
const [spotlightOpen, setSpotlightOpen] = useState(false);
const [ncOpen, setNcOpen] = useState(false);
const [selectedDesktopIcons, setSelectedDesktopIcons] = useState(() => new Set());
const [dragCircle, setDragCircle] = useState(null);
const [hasRoomForPhone, setHasRoomForPhone] = useState(
typeof window !== 'undefined' && window.innerWidth >= PHONE_OVERLAY_MIN_W
);
useEffect(() => {
const onResize = () => setHasRoomForPhone(window.innerWidth >= PHONE_OVERLAY_MIN_W);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
const screenRef = useRef(null);
const desktopAreaRef = useRef(null);
const dragInfoRef = useRef(null);
function selectOnly(id) {
setSelectedDesktopIcons(new Set([id]));
}
function handleDesktopMouseDown(e) {
if (e.button !== 0) return;
if (e.target.closest('.desktop-icon')) return;
const rect = desktopAreaRef.current?.getBoundingClientRect();
if (!rect) return;
dragInfoRef.current = {
startX: e.clientX - rect.left,
startY: e.clientY - rect.top,
clientX: e.clientX,
clientY: e.clientY,
dragging: false,
};
}
useEffect(() => {
function onMove(e) {
const info = dragInfoRef.current;
if (!info) return;
const rect = desktopAreaRef.current?.getBoundingClientRect();
if (!rect) return;
if (!info.dragging) {
const dx = e.clientX - info.clientX;
const dy = e.clientY - info.clientY;
if (Math.hypot(dx, dy) < 5) return;
info.dragging = true;
}
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const cx = info.startX;
const cy = info.startY;
const radius = Math.hypot(x - cx, y - cy);
setDragCircle({ cx, cy, r: radius });
const next = new Set();
const nodes = desktopAreaRef.current.querySelectorAll('.desktop-icon');
nodes.forEach(node => {
const r = node.getBoundingClientRect();
const ix = r.left - rect.left;
const iy = r.top - rect.top;
const nx = Math.max(ix, Math.min(cx, ix + r.width));
const ny = Math.max(iy, Math.min(cy, iy + r.height));
if (Math.hypot(cx - nx, cy - ny) <= radius) {
next.add(node.dataset.iconId);
}
});
setSelectedDesktopIcons(next);
}
function onUp() {
const info = dragInfoRef.current;
if (!info) return;
const wasDragging = info.dragging;
dragInfoRef.current = null;
setDragCircle(null);
if (!wasDragging) setSelectedDesktopIcons(new Set());
}
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
return () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp);
};
}, []);
// Cmd+K / Cmd+Space → spotlight
useEffect(() => {
function onKey(e) {
if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
e.preventDefault();
if (phase === 'desktop') setSpotlightOpen(o => !o);
}
}
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [phase]);
// Exiting fullscreen from the desktop → power off back to the screensaver.
useEffect(() => {
function onFsChange() {
const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
if (!fsEl && phase === 'desktop') shutdown();
}
document.addEventListener('fullscreenchange', onFsChange);
document.addEventListener('webkitfullscreenchange', onFsChange);
return () => {
document.removeEventListener('fullscreenchange', onFsChange);
document.removeEventListener('webkitfullscreenchange', onFsChange);
};
}, [phase]);
const stagger = useRef(0);
function nextPos(w, h) {
const i = stagger.current++ % 6;
const screen = screenRef.current?.getBoundingClientRect();
const sw = screen?.width ?? 800;
const sh = screen?.height ?? 600;
return {
x: Math.max(20, Math.min(sw - w - 20, 60 + i * 32)),
y: Math.max(40, Math.min(sh - h - 30, 60 + i * 26)),
};
}
function focusWin(id) {
setZ(z => {
const nz = z + 1;
setWindows(ws => ws.map(w => w.id === id ? { ...w, z: nz } : w));
return nz;
});
}
function closeWin(id) { setWindows(ws => ws.filter(w => w.id !== id)); }
function moveWin(id, x, y) { setWindows(ws => ws.map(w => w.id === id ? { ...w, x, y } : w)); }
function resizeWin(id, ww, hh) { setWindows(ws => ws.map(w => w.id === id ? { ...w, w: ww, h: hh } : w)); }
function navigateWin(id, kind, payload) {
const titleMap = {
work: 'Work',
side: 'Side Projects',
blogs: 'Writing',
about: 'About Me',
browser: 'Resume — Safari',
address: 'Contacts',
music: 'Music',
};
const newId = payload ? `${kind}:${payload.id}` : kind;
setWindows(ws => ws.map(w => {
if (w.id !== id) return w;
const history = [...(w.history || []), { id: w.id, kind: w.kind, payload: w.payload, title: w.title }];
return {
...w,
id: newId, kind, payload,
title: payload?.title || payload?.name || titleMap[kind] || w.title,
history,
future: [],
};
}));
}
function navigateBack(id) {
setWindows(ws => ws.map(w => {
if (w.id !== id) return w;
const history = [...(w.history || [])];
const prev = history.pop();
if (!prev) return w;
const future = [{ id: w.id, kind: w.kind, payload: w.payload, title: w.title }, ...(w.future || [])];
return { ...w, ...prev, history, future };
}));
}
function navigateForward(id) {
setWindows(ws => ws.map(w => {
if (w.id !== id) return w;
const future = [...(w.future || [])];
const next = future.shift();
if (!next) return w;
const history = [...(w.history || []), { id: w.id, kind: w.kind, payload: w.payload, title: w.title }];
return { ...w, ...next, history, future };
}));
}
function zoomWin(id) {
setWindows(ws => ws.map(w => {
if (w.id !== id) return w;
const screen = screenRef.current?.getBoundingClientRect();
const sw = screen?.width ?? 800;
const sh = screen?.height ?? 600;
if (w._zoomed) return { ...w, ...w._prev, _zoomed: false, _prev: null };
return {
...w,
_prev: { x: w.x, y: w.y, w: w.w, h: w.h },
_zoomed: true,
x: 12, y: 36,
w: sw - 24, h: sh - 80,
};
}));
}
function openWindow(kind, payload) {
if (kind === 'trash') { shutdown(); return; }
const id = payload ? `${kind}:${payload.id}` : kind;
const existing = windows.find(w => w.id === id);
if (existing) { focusWin(id); return; }
const defs = {
work: { title: 'Work', w: 720, h: 440 },
side: { title: 'Side Projects', w: 720, h: 440 },
blogs: { title: 'Writing', w: 720, h: 440 },
browser: { title: 'Resume — Safari', w: 760, h: 540 },
address: { title: 'Contacts', w: 660, h: 540 },
about: { title: 'About Me', w: 580, h: 540 },
control: { title: 'System Settings', w: 640, h: 480 },
music: { title: 'Music', w: 740, h: 520 },
workItem:{ title: payload?.name, w: 580, h: 480 },
sideItem:{ title: payload?.name, w: 540, h: 420 },
post: { title: payload?.title, w: 600, h: 500 },
};
const def = defs[kind];
if (!def) return;
const pos = nextPos(def.w, def.h);
const nz = zCounter + 1;
setZ(nz);
setWindows(ws => [...ws, { id, kind, payload, ...def, ...pos, z: nz }]);
}
function handleChassisClick(e) {
e.stopPropagation();
if (phase === 'intro') {
const el = document.documentElement;
const fn = el.requestFullscreen || el.webkitRequestFullscreen;
if (fn) fn.call(el).catch(() => {});
}
powerOn();
}
function shutdown() {
setPoweringOff(true);
setTimeout(() => {
setWindows([]);
setPoweringOff(false);
stagger.current = 0;
setBootKey(k => k + 1);
powerOff();
}, 750);
}
function restart() { shutdown(); }
// Chassis transform — at progress=1 the CRT screen should exactly cover the
// viewport, so the fade from chassis to .crt-screen.full has no visible jump.
// endScale is recomputed on resize; ty(1) compensates for the bezel-centered
// origin so the screen's final center lands at the viewport center.
const [endScale, setEndScale] = useState(() => coverScale());
useEffect(() => {
const onResize = () => setEndScale(coverScale());
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
const startScale = 0.62;
const scale = startScale + (endScale - startScale) * progress;
const ty = CRT_ORIGIN_OFFSET_Y * progress;
const fullScreen = phase === 'desktop';
const activeWin = windows.length ? windows.reduce((a, b) => a.z > b.z ? a : b) : null;
const activeId = activeWin?.id ?? null;
const runningKinds = new Set(windows.map(w => w.kind === 'workItem' ? 'work'
: w.kind === 'sideItem' ? 'side'
: w.kind === 'post' ? 'blogs'
: w.kind));
const appNameMap = {
work:'Finder', side:'Finder', blogs:'Finder', workItem:'Preview', sideItem:'Preview',
post:'Pages', browser:'Safari', address:'Contacts', about:'About', control:'System Settings',
music:'Music',
};
const activeAppName = activeWin ? appNameMap[activeWin.kind] : 'Finder';
return (
<>
{/* Chassis stage */}
{phase !== 'desktop' &&
}
{warmState && (
)}
Makhlay™ · Personal Computer
{ e.stopPropagation(); if (audioApi.active) audioApi.eject(); }}
title={audioApi.active ? 'Click to eject' : ''}/>
{phase === 'intro' && (
)}
{phase === 'desktop' && (
makOS Makhlay 15.2 · build 26.04.26
)}
{fullScreen && (
setSpotlightOpen(o => !o)}
activeAppName={activeAppName}
musicNode={audioApi.active && (
)}
/>
} label="Work"
isSelected={selectedDesktopIcons.has('work')} onSelect={selectOnly}
onOpen={() => openWindow('work')}/>
} label="Side Projects"
isSelected={selectedDesktopIcons.has('side')} onSelect={selectOnly}
onOpen={() => openWindow('side')}/>
} label="Writing"
isSelected={selectedDesktopIcons.has('blogs')} onSelect={selectOnly}
onOpen={() => openWindow('blogs')}/>
} label="About Me"
isSelected={selectedDesktopIcons.has('about')} onSelect={selectOnly}
onOpen={() => openWindow('about')}/>
{dragCircle && (
)}
{ncOpen && setNcOpen(false)}/>}
{windows.map(w => (
focusWin(w.id)}
onClose={() => closeWin(w.id)}
onMove={(x,y) => moveWin(w.id, x, y)}
onResize={(ww,hh) => resizeWin(w.id, ww, hh)}
onZoom={() => zoomWin(w.id)}
toolbar={toolbarFor(w, () => navigateBack(w.id), () => navigateForward(w.id))}
noBorder={['workItem','sideItem','post','about'].includes(w.kind)}>
{renderWindowBody(w, openWindow, tweaks, setTweak, (kind, payload) => navigateWin(w.id, kind, payload), audioApi)}
))}
setSpotlightOpen(false)} openWindow={openWindow}/>
{poweringOff && (
)}
)}
{/* iPhone peek overlay sits above both the intro chassis and the booted
desktop. Lives in the top-level fragment (not inside the crt-screen
full block) so it stays mounted across the homepage → desktop
transition. macPhase drives slide-out: visible while in 'intro',
tucked off-screen-left while macOS is up, slides back when the
user shuts down. */}
{hasRoomForPhone && (
)}
);
}
Object.assign(window, { MacShell, useClock, formatClock });