1  /**
 2   * MacosWindow — macOS application window frame (with traffic lights)
 3   *
 4   * Usage:
 5   *   <MacosWindow title="Finder">
 6   *     <YourAppContent />
 7   *   </MacosWindow>
 8   */
 9  
10  const macosWindowStyles = {
11    window: {
12      display: 'inline-block',
13      background: '#fff',
14      borderRadius: 10,
15      overflow: 'hidden',
16      boxShadow: '0 30px 80px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.15)',
17    },
18    titleBar: {
19      height: 38,
20      background: 'linear-gradient(to bottom, #e8e8e8, #d8d8d8)',
21      display: 'flex',
22      alignItems: 'center',
23      padding: '0 14px',
24      borderBottom: '0.5px solid rgba(0,0,0,0.1)',
25      position: 'relative',
26      userSelect: 'none',
27    },
28    trafficLights: {
29      display: 'flex',
30      gap: 8,
31      alignItems: 'center',
32    },
33    light: {
34      width: 12,
35      height: 12,
36      borderRadius: '50%',
37      border: '0.5px solid rgba(0,0,0,0.15)',
38    },
39    close: { background: '#ff5f57' },
40    minimize: { background: '#febc2e' },
41    maximize: { background: '#28c840' },
42    title: {
43      position: 'absolute',
44      left: 0,
45      right: 0,
46      textAlign: 'center',
47      fontSize: 13,
48      color: '#333',
49      fontWeight: 500,
50      fontFamily: '-apple-system, "SF Pro Text", sans-serif',
51      pointerEvents: 'none',
52    },
53    content: {
54      position: 'relative',
55      overflow: 'auto',
56    },
57    titleBarDark: {
58      background: 'linear-gradient(to bottom, #3c3c3c, #2c2c2c)',
59      borderBottom: '0.5px solid rgba(255,255,255,0.1)',
60    },
61    titleDark: {
62      color: '#ddd',
63    },
64  };
65  
66  function MacosWindow({ title = '', width = 900, height = 600, darkMode = false, children }) {
67    return (
68      <div style={{ ...macosWindowStyles.window, background: darkMode ? '#1e1e1e' : '#fff' }}>
69        <div style={{
70          ...macosWindowStyles.titleBar,
71          ...(darkMode ? macosWindowStyles.titleBarDark : {}),
72        }}>
73          <div style={macosWindowStyles.trafficLights}>
74            <div style={{ ...macosWindowStyles.light, ...macosWindowStyles.close }} />
75            <div style={{ ...macosWindowStyles.light, ...macosWindowStyles.minimize }} />
76            <div style={{ ...macosWindowStyles.light, ...macosWindowStyles.maximize }} />
77          </div>
78          {title && (
79            <div style={{
80              ...macosWindowStyles.title,
81              ...(darkMode ? macosWindowStyles.titleDark : {}),
82            }}>
83              {title}
84            </div>
85          )}
86        </div>
87        <div style={{ ...macosWindowStyles.content, width, height }}>
88          {children}
89        </div>
90      </div>
91    );
92  }
93  
94  if (typeof window !== 'undefined') {
95    window.MacosWindow = MacosWindow;
96  }