// MacOS.jsx — Simplified macOS Tahoe (Liquid Glass) window // Based on the macOS Tahoe UI Kit. No image assets, no dependencies. // Exports: MacWindow, MacSidebar, MacSidebarItem, MacToolbar, MacGlass, MacTrafficLights const MAC_FONT = '-apple-system, BlinkMacSystemFont, "SF Pro", "Helvetica Neue", sans-serif'; // ───────────────────────────────────────────────────────────── // Liquid glass primitive — blur + white tint + inset highlight // ───────────────────────────────────────────────────────────── function MacGlass({ children, radius = 296, dark = false, style = {} }) { return (
{children}
); } // ───────────────────────────────────────────────────────────── // Traffic lights (14px, Tahoe colors) // ───────────────────────────────────────────────────────────── function MacTrafficLights({ style = {} }) { const dot = (bg) => (
); return (
{dot('#ff736a')}{dot('#febc2e')}{dot('#19c332')}
); } // ───────────────────────────────────────────────────────────── // Toolbar — title + single glass pill icon // ───────────────────────────────────────────────────────────── function MacToolbar({ title = 'Folder' }) { return (
{/* title */}
{title}
{/* single action */}
{/* search */}
Search
); } // ───────────────────────────────────────────────────────────── // Sidebar — frosted glass panel floating inside the window // ───────────────────────────────────────────────────────────── function MacSidebarItem({ label, children, icon, selected = false, active = false }) { const isSelected = selected || active; const displayLabel = label || children; return (
{isSelected && (
)} {icon ? ( {icon} ) : (
)} {displayLabel}
); } function MacSidebar({ children }) { return (
{/* glass panel */}
{/* content */}
{/* window controls + sidebar toggle */}
{children}
); } function MacSidebarHeader({ title, children }) { return (
{title || children}
); } // ───────────────────────────────────────────────────────────── // Window — r:26, big shadow, sidebar + toolbar + content // ───────────────────────────────────────────────────────────── function MacWindow({ width = 900, height = 600, title = 'Folder', sidebar, children, }) { return (
{sidebar}
{children}
); } Object.assign(window, { MacWindow, MacSidebar, MacSidebarItem, MacSidebarHeader, MacToolbar, MacGlass, MacTrafficLights, });