1  /**
  2   * BrowserWindow — Browser window frame (Chrome-style)
  3   *
  4   * Includes: traffic lights + tab bar + URL bar
  5   *
  6   * Usage:
  7   *   <BrowserWindow url="https://example.com" title="Example">
  8   *     <YourWebPage />
  9   *   </BrowserWindow>
 10   */
 11  
 12  const browserWindowStyles = {
 13    window: {
 14      display: 'inline-block',
 15      background: '#fff',
 16      borderRadius: 10,
 17      overflow: 'hidden',
 18      boxShadow: '0 30px 80px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.15)',
 19    },
 20    chrome: {
 21      background: '#dee1e6',
 22      paddingTop: 10,
 23      paddingLeft: 10,
 24      paddingRight: 10,
 25      userSelect: 'none',
 26    },
 27    tabRow: {
 28      display: 'flex',
 29      alignItems: 'flex-end',
 30      gap: 6,
 31      position: 'relative',
 32    },
 33    trafficLights: {
 34      display: 'flex',
 35      gap: 8,
 36      alignItems: 'center',
 37      paddingBottom: 10,
 38      marginRight: 8,
 39    },
 40    light: {
 41      width: 12,
 42      height: 12,
 43      borderRadius: '50%',
 44      border: '0.5px solid rgba(0,0,0,0.15)',
 45    },
 46    close: { background: '#ff5f57' },
 47    minimize: { background: '#febc2e' },
 48    maximize: { background: '#28c840' },
 49    tab: {
 50      background: '#fff',
 51      padding: '8px 30px 8px 14px',
 52      borderTopLeftRadius: 10,
 53      borderTopRightRadius: 10,
 54      fontSize: 12,
 55      color: '#222',
 56      fontFamily: '-apple-system, sans-serif',
 57      maxWidth: 220,
 58      display: 'flex',
 59      alignItems: 'center',
 60      gap: 8,
 61      position: 'relative',
 62      whiteSpace: 'nowrap',
 63      overflow: 'hidden',
 64      textOverflow: 'ellipsis',
 65    },
 66    favicon: {
 67      width: 14,
 68      height: 14,
 69      borderRadius: 2,
 70      background: '#999',
 71      flexShrink: 0,
 72    },
 73    navBar: {
 74      background: '#fff',
 75      padding: '8px 14px',
 76      display: 'flex',
 77      alignItems: 'center',
 78      gap: 10,
 79      borderBottom: '1px solid #e5e7eb',
 80    },
 81    navButtons: {
 82      display: 'flex',
 83      gap: 4,
 84      color: '#5f6368',
 85      fontSize: 16,
 86    },
 87    navButton: {
 88      width: 28,
 89      height: 28,
 90      display: 'flex',
 91      alignItems: 'center',
 92      justifyContent: 'center',
 93      borderRadius: '50%',
 94      cursor: 'pointer',
 95    },
 96    urlBar: {
 97      flex: 1,
 98      background: '#f1f3f4',
 99      borderRadius: 999,
100      padding: '7px 14px',
101      fontSize: 13,
102      color: '#333',
103      display: 'flex',
104      alignItems: 'center',
105      gap: 8,
106      fontFamily: '-apple-system, sans-serif',
107    },
108    lockIcon: {
109      color: '#5f6368',
110      fontSize: 12,
111    },
112    content: {
113      position: 'relative',
114      overflow: 'auto',
115      background: '#fff',
116    },
117  };
118  
119  function BrowserWindow({
120    title = 'New Tab',
121    url = 'https://example.com',
122    width = 1200,
123    height = 800,
124    showTrafficLights = true,
125    children,
126  }) {
127    return (
128      <div style={browserWindowStyles.window}>
129        <div style={browserWindowStyles.chrome}>
130          <div style={browserWindowStyles.tabRow}>
131            {showTrafficLights && (
132              <div style={browserWindowStyles.trafficLights}>
133                <div style={{ ...browserWindowStyles.light, ...browserWindowStyles.close }} />
134                <div style={{ ...browserWindowStyles.light, ...browserWindowStyles.minimize }} />
135                <div style={{ ...browserWindowStyles.light, ...browserWindowStyles.maximize }} />
136              </div>
137            )}
138            <div style={browserWindowStyles.tab}>
139              <div style={browserWindowStyles.favicon} />
140              <span>{title}</span>
141            </div>
142          </div>
143        </div>
144  
145        <div style={browserWindowStyles.navBar}>
146          <div style={browserWindowStyles.navButtons}>
147            <div style={browserWindowStyles.navButton}>←</div>
148            <div style={browserWindowStyles.navButton}>→</div>
149            <div style={browserWindowStyles.navButton}>↻</div>
150          </div>
151          <div style={browserWindowStyles.urlBar}>
152            <span style={browserWindowStyles.lockIcon}>🔒</span>
153            <span>{url}</span>
154          </div>
155        </div>
156  
157        <div style={{ ...browserWindowStyles.content, width, height }}>
158          {children}
159        </div>
160      </div>
161    );
162  }
163  
164  if (typeof window !== 'undefined') {
165    window.BrowserWindow = BrowserWindow;
166  }