// shared.jsx — icons + sidebar + browser shell shared across screens // All Lucide-style 1.5px stroke SVG. const Icon = ({ d, size = 16, fill = 'none', stroke = 'currentColor', sw = 1.5, children, style }) => ( {d ? : children} ); const I = { ArrowLeft: (p)=> , ArrowRight: (p)=> , ArrowUpRight:(p)=> , Plus: (p)=> , X: (p)=> , Search: (p)=> , Star: (p)=> , Sparkle: (p)=> , Sun: (p)=> , Moon: (p)=> , Sunrise: (p)=> , Settings: (p)=> , Menu: (p)=> , Filters: (p)=> , Bookmark: (p)=> , Copy: (p)=> , Download: (p)=> , ChevronDown:(p)=> , ChevronRight:(p)=> , ChevronUp: (p)=> , Layers: (p)=> , Home: (p)=> , Calendar: (p)=> , Globe: (p)=> , Lock: (p)=> , Sidebar: (p)=> , Split: (p)=> , Cmd: (p)=> , Reload: (p)=> , Pin: (p)=> , Tab: (p)=> , Inbox: (p)=> , Trash: (p)=> , Eye: (p)=> , Mic: (p)=> , Lightning: (p)=> , Shield: (p)=> , Cloud: (p)=> , Plug: (p)=> , Heart: (p)=> , Check: (p)=> , Dot: (p)=> , Key: (p)=> , Devices: (p)=> , User: (p)=> , Bell: (p)=> , Palette: (p)=> , Code: (p)=> , Filter: (p)=> , }; /* ===== little brand glyphs (faux app icons) ===== */ const Brand = { Notion: ({s=22}) => (
N
), YT: ({s=22}) => (
), Dribbble: ({s=22}) => (
·
), X: ({s=22}) => (
𝕏
), Vercel: ({s=22}) => (
), Behance: ({s=22}) => (
Bē
), Figma: ({s=18}) => (
), Slack: ({s=18}) => ( ), GitHub: ({s=18}) => ( ), Linear: ({s=18}) => (
L
), }; /* ============== SIDEBAR ============== */ const Sidebar = ({ activeId = 'home', mode = 'home', tabs, withTrafficTitle = true, workspace='Work', accentEmoji='🌸' }) => { const defaultTabs = [ { id:'figma', label:'Design System – Figma', icon:, closable:true }, { id:'roadmap', label:'Roadmap 2024', icon:
}, { id:'mkt', label:'Marketing Site', icon: }, ]; const t = tabs || defaultTabs; return ( ); }; /* Browser shell that hosts a sidebar + main area */ const ElyShell = ({ wallpaper='dawn', children, sidebarProps={}, fakeTraffic=true }) => (
{children}
); /* topbar */ const TopBar = ({ url, host, path, secure=true, right, canBack=true, canForward=false }) => (
{secure ? : } {host ? ( <> {host} {path && {path}} ) : ( {url || 'Search ELY or type a command…'} )}
{right || ( <> )}
); window.Sidebar = Sidebar; window.ElyShell = ElyShell; window.TopBar = TopBar; window.Icon = Icon; window.I = I; window.Brand = Brand;