@biela.dev/devices 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/android/index.cjs +88 -0
- package/dist/android/index.cjs.map +1 -0
- package/dist/android/index.d.cts +244 -0
- package/dist/android/index.d.ts +244 -0
- package/dist/android/index.js +3 -0
- package/dist/android/index.js.map +1 -0
- package/dist/chunk-BXBG5BY7.cjs +1302 -0
- package/dist/chunk-BXBG5BY7.cjs.map +1 -0
- package/dist/chunk-DGX4WRAK.js +1749 -0
- package/dist/chunk-DGX4WRAK.js.map +1 -0
- package/dist/chunk-OI46UKOY.cjs +1774 -0
- package/dist/chunk-OI46UKOY.cjs.map +1 -0
- package/dist/chunk-QQFC4CAP.js +1281 -0
- package/dist/chunk-QQFC4CAP.js.map +1 -0
- package/dist/contract-types-Cw1rmF3b.d.cts +199 -0
- package/dist/contract-types-Cw1rmF3b.d.ts +199 -0
- package/dist/index.cjs +1494 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +311 -0
- package/dist/index.d.ts +311 -0
- package/dist/index.js +1298 -0
- package/dist/index.js.map +1 -0
- package/dist/ios/index.cjs +104 -0
- package/dist/ios/index.cjs.map +1 -0
- package/dist/ios/index.d.cts +292 -0
- package/dist/ios/index.d.ts +292 -0
- package/dist/ios/index.js +3 -0
- package/dist/ios/index.js.map +1 -0
- package/package.json +64 -0
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
import { a as DeviceLayoutData, D as DeviceMeta } from '../contract-types-Cw1rmF3b.cjs';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* iPhone 17 Pro Max — dimensions
|
|
6
|
+
*
|
|
7
|
+
* Screen: 440x956pt (logical points at 1x)
|
|
8
|
+
* Physical: 1320x2868px at 3x DPR
|
|
9
|
+
* Display: 6.9" LTPO Super Retina XDR OLED, 460 PPI
|
|
10
|
+
* Hardware: Dynamic Island, Action Button, Camera Control
|
|
11
|
+
* Frame: Titanium
|
|
12
|
+
*/
|
|
13
|
+
declare const IPHONE_17_PRO_MAX_META: DeviceMeta;
|
|
14
|
+
declare const IPHONE_17_PRO_MAX_LAYOUT: DeviceLayoutData;
|
|
15
|
+
|
|
16
|
+
interface DeviceSVGProps$5 {
|
|
17
|
+
colorScheme?: "light" | "dark";
|
|
18
|
+
style?: React.CSSProperties;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* iPhone 17 Pro Max SVG Frame
|
|
22
|
+
*
|
|
23
|
+
* Dimensions: 440x956 logical points (screen area)
|
|
24
|
+
* Full frame includes bezels: ~470x1002pt total
|
|
25
|
+
*
|
|
26
|
+
* Structure:
|
|
27
|
+
* - Outer titanium frame with rounded corners
|
|
28
|
+
* - Screen cutout (transparent — content shows through)
|
|
29
|
+
* - Dynamic Island pill overlay
|
|
30
|
+
* - Side buttons (volume, action, power, camera control)
|
|
31
|
+
* - Bottom elements (USB-C, speaker grilles)
|
|
32
|
+
* - data-zone annotations for DLC auto-derivation
|
|
33
|
+
*
|
|
34
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
35
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
36
|
+
* Screen area is transparent — content shows through.
|
|
37
|
+
*/
|
|
38
|
+
declare function IPhone17ProMaxSVG({ colorScheme, style }: DeviceSVGProps$5): react_jsx_runtime.JSX.Element;
|
|
39
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
40
|
+
declare const IPHONE_17_PRO_MAX_FRAME: {
|
|
41
|
+
readonly bezelTop: 23;
|
|
42
|
+
readonly bezelBottom: 23;
|
|
43
|
+
readonly bezelLeft: 15;
|
|
44
|
+
readonly bezelRight: 15;
|
|
45
|
+
readonly totalWidth: 470;
|
|
46
|
+
readonly totalHeight: 1002;
|
|
47
|
+
readonly screenWidth: 440;
|
|
48
|
+
readonly screenHeight: 956;
|
|
49
|
+
readonly screenRadius: 55;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* iPhone 17 Pro — dimensions
|
|
54
|
+
*
|
|
55
|
+
* Screen: 402x874pt (logical points at 1x)
|
|
56
|
+
* Physical: 1206x2622px at 3x DPR
|
|
57
|
+
* Display: 6.3" LTPO Super Retina XDR OLED, 460 PPI
|
|
58
|
+
* Hardware: Dynamic Island, Action Button, Camera Control
|
|
59
|
+
* Frame: Titanium
|
|
60
|
+
*/
|
|
61
|
+
declare const IPHONE_17_PRO_META: DeviceMeta;
|
|
62
|
+
declare const IPHONE_17_PRO_LAYOUT: DeviceLayoutData;
|
|
63
|
+
|
|
64
|
+
interface DeviceSVGProps$4 {
|
|
65
|
+
colorScheme?: "light" | "dark";
|
|
66
|
+
style?: React.CSSProperties;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* iPhone 17 Pro SVG Frame
|
|
70
|
+
*
|
|
71
|
+
* Dimensions: 402x874 logical points (screen area)
|
|
72
|
+
* Full frame includes bezels: ~432x920pt total
|
|
73
|
+
*
|
|
74
|
+
* Structure:
|
|
75
|
+
* - Outer titanium frame with rounded corners
|
|
76
|
+
* - Screen cutout (transparent — content shows through)
|
|
77
|
+
* - Dynamic Island pill overlay
|
|
78
|
+
* - Side buttons (volume, action, power, camera control)
|
|
79
|
+
* - Bottom elements (USB-C, speaker grilles)
|
|
80
|
+
* - data-zone annotations for DLC auto-derivation
|
|
81
|
+
*
|
|
82
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
83
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
84
|
+
* Screen area is transparent — content shows through.
|
|
85
|
+
*/
|
|
86
|
+
declare function IPhone17ProSVG({ colorScheme, style }: DeviceSVGProps$4): react_jsx_runtime.JSX.Element;
|
|
87
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
88
|
+
declare const IPHONE_17_PRO_FRAME: {
|
|
89
|
+
readonly bezelTop: 23;
|
|
90
|
+
readonly bezelBottom: 23;
|
|
91
|
+
readonly bezelLeft: 15;
|
|
92
|
+
readonly bezelRight: 15;
|
|
93
|
+
readonly totalWidth: 432;
|
|
94
|
+
readonly totalHeight: 920;
|
|
95
|
+
readonly screenWidth: 402;
|
|
96
|
+
readonly screenHeight: 874;
|
|
97
|
+
readonly screenRadius: 55;
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* iPhone Air — dimensions
|
|
102
|
+
*
|
|
103
|
+
* Screen: 420x912pt (logical points at 1x)
|
|
104
|
+
* Physical: 1260x2736px at 3x DPR
|
|
105
|
+
* Display: 6.6" Super Retina XDR OLED, 460 PPI
|
|
106
|
+
* Hardware: Dynamic Island (no Action Button, no Camera Control)
|
|
107
|
+
* Frame: Aluminum (ultra-thin 5.8mm)
|
|
108
|
+
*/
|
|
109
|
+
declare const IPHONE_AIR_META: DeviceMeta;
|
|
110
|
+
declare const IPHONE_AIR_LAYOUT: DeviceLayoutData;
|
|
111
|
+
|
|
112
|
+
interface DeviceSVGProps$3 {
|
|
113
|
+
colorScheme?: "light" | "dark";
|
|
114
|
+
style?: React.CSSProperties;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* iPhone Air SVG Frame
|
|
118
|
+
*
|
|
119
|
+
* Dimensions: 420x912 logical points (screen area)
|
|
120
|
+
* Full frame includes bezels: ~440x952pt total
|
|
121
|
+
*
|
|
122
|
+
* Structure:
|
|
123
|
+
* - Outer aluminum frame with rounded corners (ultra-thin)
|
|
124
|
+
* - Screen cutout (transparent — content shows through)
|
|
125
|
+
* - Dynamic Island pill overlay
|
|
126
|
+
* - Side buttons (volume, power — no action button, no camera control)
|
|
127
|
+
* - Bottom elements (USB-C, speaker grilles)
|
|
128
|
+
* - data-zone annotations for DLC auto-derivation
|
|
129
|
+
*
|
|
130
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
131
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
132
|
+
* Screen area is transparent — content shows through.
|
|
133
|
+
*/
|
|
134
|
+
declare function IPhoneAirSVG({ colorScheme, style }: DeviceSVGProps$3): react_jsx_runtime.JSX.Element;
|
|
135
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
136
|
+
declare const IPHONE_AIR_FRAME: {
|
|
137
|
+
readonly bezelTop: 20;
|
|
138
|
+
readonly bezelBottom: 20;
|
|
139
|
+
readonly bezelLeft: 10;
|
|
140
|
+
readonly bezelRight: 10;
|
|
141
|
+
readonly totalWidth: 440;
|
|
142
|
+
readonly totalHeight: 952;
|
|
143
|
+
readonly screenWidth: 420;
|
|
144
|
+
readonly screenHeight: 912;
|
|
145
|
+
readonly screenRadius: 55;
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* iPhone 16e — dimensions (NOTCH device)
|
|
150
|
+
*
|
|
151
|
+
* Screen: 390x844pt (logical points at 1x)
|
|
152
|
+
* Physical: 1170x2532px at 3x DPR
|
|
153
|
+
* Display: 6.1" Super Retina XDR OLED, 460 PPI
|
|
154
|
+
* Hardware: Notch (no Action Button, no Camera Control)
|
|
155
|
+
* Frame: Aluminum
|
|
156
|
+
*/
|
|
157
|
+
declare const IPHONE_16E_META: DeviceMeta;
|
|
158
|
+
declare const IPHONE_16E_LAYOUT: DeviceLayoutData;
|
|
159
|
+
|
|
160
|
+
interface DeviceSVGProps$2 {
|
|
161
|
+
colorScheme?: "light" | "dark";
|
|
162
|
+
style?: React.CSSProperties;
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* iPhone 16e SVG Frame (NOTCH device)
|
|
166
|
+
*
|
|
167
|
+
* Dimensions: 390x844 logical points (screen area)
|
|
168
|
+
* Full frame includes bezels: ~414x884pt total
|
|
169
|
+
*
|
|
170
|
+
* Structure:
|
|
171
|
+
* - Outer aluminum frame with rounded corners
|
|
172
|
+
* - Screen cutout (transparent — content shows through)
|
|
173
|
+
* - Notch cutout at top center (wider, taller than Dynamic Island)
|
|
174
|
+
* - Side buttons (volume, power — no action button, no camera control)
|
|
175
|
+
* - Bottom elements (USB-C, speaker grilles)
|
|
176
|
+
* - data-zone annotations for DLC auto-derivation
|
|
177
|
+
*
|
|
178
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
179
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
180
|
+
* Screen area is transparent — content shows through.
|
|
181
|
+
*/
|
|
182
|
+
declare function IPhone16eSVG({ colorScheme, style }: DeviceSVGProps$2): react_jsx_runtime.JSX.Element;
|
|
183
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
184
|
+
declare const IPHONE_16E_FRAME: {
|
|
185
|
+
readonly bezelTop: 20;
|
|
186
|
+
readonly bezelBottom: 20;
|
|
187
|
+
readonly bezelLeft: 12;
|
|
188
|
+
readonly bezelRight: 12;
|
|
189
|
+
readonly totalWidth: 414;
|
|
190
|
+
readonly totalHeight: 884;
|
|
191
|
+
readonly screenWidth: 390;
|
|
192
|
+
readonly screenHeight: 844;
|
|
193
|
+
readonly screenRadius: 50;
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
/**
|
|
197
|
+
* iPhone 16 — VERIFIED dimensions
|
|
198
|
+
*
|
|
199
|
+
* Screen: 393×852pt (logical points at 1x)
|
|
200
|
+
* Physical: 1179×2556px at 3x DPR
|
|
201
|
+
* Display: 6.1" Super Retina XDR OLED, 460 PPI
|
|
202
|
+
* Hardware: Dynamic Island, Camera Control
|
|
203
|
+
*/
|
|
204
|
+
declare const IPHONE_16_META: DeviceMeta;
|
|
205
|
+
declare const IPHONE_16_LAYOUT: DeviceLayoutData;
|
|
206
|
+
|
|
207
|
+
interface DeviceSVGProps$1 {
|
|
208
|
+
colorScheme?: "light" | "dark";
|
|
209
|
+
style?: React.CSSProperties;
|
|
210
|
+
}
|
|
211
|
+
/**
|
|
212
|
+
* iPhone 16 SVG Frame
|
|
213
|
+
*
|
|
214
|
+
* Dimensions: 393x852 logical points (screen area)
|
|
215
|
+
* Full frame includes bezels: ~423x898pt total
|
|
216
|
+
*
|
|
217
|
+
* Structure:
|
|
218
|
+
* - Outer aluminum frame with rounded corners
|
|
219
|
+
* - Screen cutout (transparent — content shows through)
|
|
220
|
+
* - Dynamic Island pill overlay
|
|
221
|
+
* - Side buttons (volume, power, camera control — no action button)
|
|
222
|
+
* - Bottom elements (USB-C, speaker grilles)
|
|
223
|
+
* - data-zone annotations for DLC auto-derivation
|
|
224
|
+
*
|
|
225
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
226
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
227
|
+
* Screen area is transparent — content shows through.
|
|
228
|
+
*/
|
|
229
|
+
declare function IPhone16SVG({ colorScheme, style }: DeviceSVGProps$1): react_jsx_runtime.JSX.Element;
|
|
230
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
231
|
+
declare const IPHONE_16_FRAME: {
|
|
232
|
+
readonly bezelTop: 23;
|
|
233
|
+
readonly bezelBottom: 23;
|
|
234
|
+
readonly bezelLeft: 15;
|
|
235
|
+
readonly bezelRight: 15;
|
|
236
|
+
readonly totalWidth: 423;
|
|
237
|
+
readonly totalHeight: 898;
|
|
238
|
+
readonly screenWidth: 393;
|
|
239
|
+
readonly screenHeight: 852;
|
|
240
|
+
readonly screenRadius: 48;
|
|
241
|
+
};
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* iPhone SE (3rd Gen) — LEGACY device with home button
|
|
245
|
+
*
|
|
246
|
+
* Screen: 375x667pt (logical points at 1x)
|
|
247
|
+
* Physical: 750x1334px at 2x DPR
|
|
248
|
+
* Display: 4.7" Retina HD LCD, 326 PPI
|
|
249
|
+
* Hardware: Physical home button (Touch ID), no notch/island
|
|
250
|
+
* Frame: Aluminum, thick top/bottom bezels
|
|
251
|
+
*/
|
|
252
|
+
declare const IPHONE_SE_3_META: DeviceMeta;
|
|
253
|
+
declare const IPHONE_SE_3_LAYOUT: DeviceLayoutData;
|
|
254
|
+
|
|
255
|
+
interface DeviceSVGProps {
|
|
256
|
+
colorScheme?: "light" | "dark";
|
|
257
|
+
style?: React.CSSProperties;
|
|
258
|
+
}
|
|
259
|
+
/**
|
|
260
|
+
* iPhone SE (3rd Gen) SVG Frame — LEGACY home button design
|
|
261
|
+
*
|
|
262
|
+
* Dimensions: 375x667 logical points (screen area)
|
|
263
|
+
* Full frame includes bezels: ~395x807pt total
|
|
264
|
+
*
|
|
265
|
+
* Structure:
|
|
266
|
+
* - Outer aluminum frame with rounded corners
|
|
267
|
+
* - Rectangular screen cutout (nearly square corners, no notch/island)
|
|
268
|
+
* - Thick top bezel with earpiece speaker slot + front camera
|
|
269
|
+
* - Thick bottom bezel with physical circular home button (Touch ID)
|
|
270
|
+
* - Side buttons (volume, power — no action button, no camera control)
|
|
271
|
+
* - Bottom elements (Lightning/USB-C, speaker grilles)
|
|
272
|
+
* - data-zone annotations for DLC auto-derivation
|
|
273
|
+
*
|
|
274
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
275
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
276
|
+
* Screen area is transparent — content shows through.
|
|
277
|
+
*/
|
|
278
|
+
declare function IPhoneSE3SVG({ colorScheme, style }: DeviceSVGProps): react_jsx_runtime.JSX.Element;
|
|
279
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
280
|
+
declare const IPHONE_SE_3_FRAME: {
|
|
281
|
+
readonly bezelTop: 70;
|
|
282
|
+
readonly bezelBottom: 70;
|
|
283
|
+
readonly bezelLeft: 10;
|
|
284
|
+
readonly bezelRight: 10;
|
|
285
|
+
readonly totalWidth: 395;
|
|
286
|
+
readonly totalHeight: 807;
|
|
287
|
+
readonly screenWidth: 375;
|
|
288
|
+
readonly screenHeight: 667;
|
|
289
|
+
readonly screenRadius: 5;
|
|
290
|
+
};
|
|
291
|
+
|
|
292
|
+
export { IPHONE_16E_FRAME, IPHONE_16E_LAYOUT, IPHONE_16E_META, IPHONE_16_FRAME, IPHONE_16_LAYOUT, IPHONE_16_META, IPHONE_17_PRO_FRAME, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_FRAME, IPHONE_17_PRO_MAX_LAYOUT, IPHONE_17_PRO_MAX_META, IPHONE_17_PRO_META, IPHONE_AIR_FRAME, IPHONE_AIR_LAYOUT, IPHONE_AIR_META, IPHONE_SE_3_FRAME, IPHONE_SE_3_LAYOUT, IPHONE_SE_3_META, IPhone16SVG, IPhone16eSVG, IPhone17ProMaxSVG, IPhone17ProSVG, IPhoneAirSVG, IPhoneSE3SVG };
|
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
import { a as DeviceLayoutData, D as DeviceMeta } from '../contract-types-Cw1rmF3b.js';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* iPhone 17 Pro Max — dimensions
|
|
6
|
+
*
|
|
7
|
+
* Screen: 440x956pt (logical points at 1x)
|
|
8
|
+
* Physical: 1320x2868px at 3x DPR
|
|
9
|
+
* Display: 6.9" LTPO Super Retina XDR OLED, 460 PPI
|
|
10
|
+
* Hardware: Dynamic Island, Action Button, Camera Control
|
|
11
|
+
* Frame: Titanium
|
|
12
|
+
*/
|
|
13
|
+
declare const IPHONE_17_PRO_MAX_META: DeviceMeta;
|
|
14
|
+
declare const IPHONE_17_PRO_MAX_LAYOUT: DeviceLayoutData;
|
|
15
|
+
|
|
16
|
+
interface DeviceSVGProps$5 {
|
|
17
|
+
colorScheme?: "light" | "dark";
|
|
18
|
+
style?: React.CSSProperties;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* iPhone 17 Pro Max SVG Frame
|
|
22
|
+
*
|
|
23
|
+
* Dimensions: 440x956 logical points (screen area)
|
|
24
|
+
* Full frame includes bezels: ~470x1002pt total
|
|
25
|
+
*
|
|
26
|
+
* Structure:
|
|
27
|
+
* - Outer titanium frame with rounded corners
|
|
28
|
+
* - Screen cutout (transparent — content shows through)
|
|
29
|
+
* - Dynamic Island pill overlay
|
|
30
|
+
* - Side buttons (volume, action, power, camera control)
|
|
31
|
+
* - Bottom elements (USB-C, speaker grilles)
|
|
32
|
+
* - data-zone annotations for DLC auto-derivation
|
|
33
|
+
*
|
|
34
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
35
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
36
|
+
* Screen area is transparent — content shows through.
|
|
37
|
+
*/
|
|
38
|
+
declare function IPhone17ProMaxSVG({ colorScheme, style }: DeviceSVGProps$5): react_jsx_runtime.JSX.Element;
|
|
39
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
40
|
+
declare const IPHONE_17_PRO_MAX_FRAME: {
|
|
41
|
+
readonly bezelTop: 23;
|
|
42
|
+
readonly bezelBottom: 23;
|
|
43
|
+
readonly bezelLeft: 15;
|
|
44
|
+
readonly bezelRight: 15;
|
|
45
|
+
readonly totalWidth: 470;
|
|
46
|
+
readonly totalHeight: 1002;
|
|
47
|
+
readonly screenWidth: 440;
|
|
48
|
+
readonly screenHeight: 956;
|
|
49
|
+
readonly screenRadius: 55;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* iPhone 17 Pro — dimensions
|
|
54
|
+
*
|
|
55
|
+
* Screen: 402x874pt (logical points at 1x)
|
|
56
|
+
* Physical: 1206x2622px at 3x DPR
|
|
57
|
+
* Display: 6.3" LTPO Super Retina XDR OLED, 460 PPI
|
|
58
|
+
* Hardware: Dynamic Island, Action Button, Camera Control
|
|
59
|
+
* Frame: Titanium
|
|
60
|
+
*/
|
|
61
|
+
declare const IPHONE_17_PRO_META: DeviceMeta;
|
|
62
|
+
declare const IPHONE_17_PRO_LAYOUT: DeviceLayoutData;
|
|
63
|
+
|
|
64
|
+
interface DeviceSVGProps$4 {
|
|
65
|
+
colorScheme?: "light" | "dark";
|
|
66
|
+
style?: React.CSSProperties;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* iPhone 17 Pro SVG Frame
|
|
70
|
+
*
|
|
71
|
+
* Dimensions: 402x874 logical points (screen area)
|
|
72
|
+
* Full frame includes bezels: ~432x920pt total
|
|
73
|
+
*
|
|
74
|
+
* Structure:
|
|
75
|
+
* - Outer titanium frame with rounded corners
|
|
76
|
+
* - Screen cutout (transparent — content shows through)
|
|
77
|
+
* - Dynamic Island pill overlay
|
|
78
|
+
* - Side buttons (volume, action, power, camera control)
|
|
79
|
+
* - Bottom elements (USB-C, speaker grilles)
|
|
80
|
+
* - data-zone annotations for DLC auto-derivation
|
|
81
|
+
*
|
|
82
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
83
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
84
|
+
* Screen area is transparent — content shows through.
|
|
85
|
+
*/
|
|
86
|
+
declare function IPhone17ProSVG({ colorScheme, style }: DeviceSVGProps$4): react_jsx_runtime.JSX.Element;
|
|
87
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
88
|
+
declare const IPHONE_17_PRO_FRAME: {
|
|
89
|
+
readonly bezelTop: 23;
|
|
90
|
+
readonly bezelBottom: 23;
|
|
91
|
+
readonly bezelLeft: 15;
|
|
92
|
+
readonly bezelRight: 15;
|
|
93
|
+
readonly totalWidth: 432;
|
|
94
|
+
readonly totalHeight: 920;
|
|
95
|
+
readonly screenWidth: 402;
|
|
96
|
+
readonly screenHeight: 874;
|
|
97
|
+
readonly screenRadius: 55;
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* iPhone Air — dimensions
|
|
102
|
+
*
|
|
103
|
+
* Screen: 420x912pt (logical points at 1x)
|
|
104
|
+
* Physical: 1260x2736px at 3x DPR
|
|
105
|
+
* Display: 6.6" Super Retina XDR OLED, 460 PPI
|
|
106
|
+
* Hardware: Dynamic Island (no Action Button, no Camera Control)
|
|
107
|
+
* Frame: Aluminum (ultra-thin 5.8mm)
|
|
108
|
+
*/
|
|
109
|
+
declare const IPHONE_AIR_META: DeviceMeta;
|
|
110
|
+
declare const IPHONE_AIR_LAYOUT: DeviceLayoutData;
|
|
111
|
+
|
|
112
|
+
interface DeviceSVGProps$3 {
|
|
113
|
+
colorScheme?: "light" | "dark";
|
|
114
|
+
style?: React.CSSProperties;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* iPhone Air SVG Frame
|
|
118
|
+
*
|
|
119
|
+
* Dimensions: 420x912 logical points (screen area)
|
|
120
|
+
* Full frame includes bezels: ~440x952pt total
|
|
121
|
+
*
|
|
122
|
+
* Structure:
|
|
123
|
+
* - Outer aluminum frame with rounded corners (ultra-thin)
|
|
124
|
+
* - Screen cutout (transparent — content shows through)
|
|
125
|
+
* - Dynamic Island pill overlay
|
|
126
|
+
* - Side buttons (volume, power — no action button, no camera control)
|
|
127
|
+
* - Bottom elements (USB-C, speaker grilles)
|
|
128
|
+
* - data-zone annotations for DLC auto-derivation
|
|
129
|
+
*
|
|
130
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
131
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
132
|
+
* Screen area is transparent — content shows through.
|
|
133
|
+
*/
|
|
134
|
+
declare function IPhoneAirSVG({ colorScheme, style }: DeviceSVGProps$3): react_jsx_runtime.JSX.Element;
|
|
135
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
136
|
+
declare const IPHONE_AIR_FRAME: {
|
|
137
|
+
readonly bezelTop: 20;
|
|
138
|
+
readonly bezelBottom: 20;
|
|
139
|
+
readonly bezelLeft: 10;
|
|
140
|
+
readonly bezelRight: 10;
|
|
141
|
+
readonly totalWidth: 440;
|
|
142
|
+
readonly totalHeight: 952;
|
|
143
|
+
readonly screenWidth: 420;
|
|
144
|
+
readonly screenHeight: 912;
|
|
145
|
+
readonly screenRadius: 55;
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* iPhone 16e — dimensions (NOTCH device)
|
|
150
|
+
*
|
|
151
|
+
* Screen: 390x844pt (logical points at 1x)
|
|
152
|
+
* Physical: 1170x2532px at 3x DPR
|
|
153
|
+
* Display: 6.1" Super Retina XDR OLED, 460 PPI
|
|
154
|
+
* Hardware: Notch (no Action Button, no Camera Control)
|
|
155
|
+
* Frame: Aluminum
|
|
156
|
+
*/
|
|
157
|
+
declare const IPHONE_16E_META: DeviceMeta;
|
|
158
|
+
declare const IPHONE_16E_LAYOUT: DeviceLayoutData;
|
|
159
|
+
|
|
160
|
+
interface DeviceSVGProps$2 {
|
|
161
|
+
colorScheme?: "light" | "dark";
|
|
162
|
+
style?: React.CSSProperties;
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* iPhone 16e SVG Frame (NOTCH device)
|
|
166
|
+
*
|
|
167
|
+
* Dimensions: 390x844 logical points (screen area)
|
|
168
|
+
* Full frame includes bezels: ~414x884pt total
|
|
169
|
+
*
|
|
170
|
+
* Structure:
|
|
171
|
+
* - Outer aluminum frame with rounded corners
|
|
172
|
+
* - Screen cutout (transparent — content shows through)
|
|
173
|
+
* - Notch cutout at top center (wider, taller than Dynamic Island)
|
|
174
|
+
* - Side buttons (volume, power — no action button, no camera control)
|
|
175
|
+
* - Bottom elements (USB-C, speaker grilles)
|
|
176
|
+
* - data-zone annotations for DLC auto-derivation
|
|
177
|
+
*
|
|
178
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
179
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
180
|
+
* Screen area is transparent — content shows through.
|
|
181
|
+
*/
|
|
182
|
+
declare function IPhone16eSVG({ colorScheme, style }: DeviceSVGProps$2): react_jsx_runtime.JSX.Element;
|
|
183
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
184
|
+
declare const IPHONE_16E_FRAME: {
|
|
185
|
+
readonly bezelTop: 20;
|
|
186
|
+
readonly bezelBottom: 20;
|
|
187
|
+
readonly bezelLeft: 12;
|
|
188
|
+
readonly bezelRight: 12;
|
|
189
|
+
readonly totalWidth: 414;
|
|
190
|
+
readonly totalHeight: 884;
|
|
191
|
+
readonly screenWidth: 390;
|
|
192
|
+
readonly screenHeight: 844;
|
|
193
|
+
readonly screenRadius: 50;
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
/**
|
|
197
|
+
* iPhone 16 — VERIFIED dimensions
|
|
198
|
+
*
|
|
199
|
+
* Screen: 393×852pt (logical points at 1x)
|
|
200
|
+
* Physical: 1179×2556px at 3x DPR
|
|
201
|
+
* Display: 6.1" Super Retina XDR OLED, 460 PPI
|
|
202
|
+
* Hardware: Dynamic Island, Camera Control
|
|
203
|
+
*/
|
|
204
|
+
declare const IPHONE_16_META: DeviceMeta;
|
|
205
|
+
declare const IPHONE_16_LAYOUT: DeviceLayoutData;
|
|
206
|
+
|
|
207
|
+
interface DeviceSVGProps$1 {
|
|
208
|
+
colorScheme?: "light" | "dark";
|
|
209
|
+
style?: React.CSSProperties;
|
|
210
|
+
}
|
|
211
|
+
/**
|
|
212
|
+
* iPhone 16 SVG Frame
|
|
213
|
+
*
|
|
214
|
+
* Dimensions: 393x852 logical points (screen area)
|
|
215
|
+
* Full frame includes bezels: ~423x898pt total
|
|
216
|
+
*
|
|
217
|
+
* Structure:
|
|
218
|
+
* - Outer aluminum frame with rounded corners
|
|
219
|
+
* - Screen cutout (transparent — content shows through)
|
|
220
|
+
* - Dynamic Island pill overlay
|
|
221
|
+
* - Side buttons (volume, power, camera control — no action button)
|
|
222
|
+
* - Bottom elements (USB-C, speaker grilles)
|
|
223
|
+
* - data-zone annotations for DLC auto-derivation
|
|
224
|
+
*
|
|
225
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
226
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
227
|
+
* Screen area is transparent — content shows through.
|
|
228
|
+
*/
|
|
229
|
+
declare function IPhone16SVG({ colorScheme, style }: DeviceSVGProps$1): react_jsx_runtime.JSX.Element;
|
|
230
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
231
|
+
declare const IPHONE_16_FRAME: {
|
|
232
|
+
readonly bezelTop: 23;
|
|
233
|
+
readonly bezelBottom: 23;
|
|
234
|
+
readonly bezelLeft: 15;
|
|
235
|
+
readonly bezelRight: 15;
|
|
236
|
+
readonly totalWidth: 423;
|
|
237
|
+
readonly totalHeight: 898;
|
|
238
|
+
readonly screenWidth: 393;
|
|
239
|
+
readonly screenHeight: 852;
|
|
240
|
+
readonly screenRadius: 48;
|
|
241
|
+
};
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* iPhone SE (3rd Gen) — LEGACY device with home button
|
|
245
|
+
*
|
|
246
|
+
* Screen: 375x667pt (logical points at 1x)
|
|
247
|
+
* Physical: 750x1334px at 2x DPR
|
|
248
|
+
* Display: 4.7" Retina HD LCD, 326 PPI
|
|
249
|
+
* Hardware: Physical home button (Touch ID), no notch/island
|
|
250
|
+
* Frame: Aluminum, thick top/bottom bezels
|
|
251
|
+
*/
|
|
252
|
+
declare const IPHONE_SE_3_META: DeviceMeta;
|
|
253
|
+
declare const IPHONE_SE_3_LAYOUT: DeviceLayoutData;
|
|
254
|
+
|
|
255
|
+
interface DeviceSVGProps {
|
|
256
|
+
colorScheme?: "light" | "dark";
|
|
257
|
+
style?: React.CSSProperties;
|
|
258
|
+
}
|
|
259
|
+
/**
|
|
260
|
+
* iPhone SE (3rd Gen) SVG Frame — LEGACY home button design
|
|
261
|
+
*
|
|
262
|
+
* Dimensions: 375x667 logical points (screen area)
|
|
263
|
+
* Full frame includes bezels: ~395x807pt total
|
|
264
|
+
*
|
|
265
|
+
* Structure:
|
|
266
|
+
* - Outer aluminum frame with rounded corners
|
|
267
|
+
* - Rectangular screen cutout (nearly square corners, no notch/island)
|
|
268
|
+
* - Thick top bezel with earpiece speaker slot + front camera
|
|
269
|
+
* - Thick bottom bezel with physical circular home button (Touch ID)
|
|
270
|
+
* - Side buttons (volume, power — no action button, no camera control)
|
|
271
|
+
* - Bottom elements (Lightning/USB-C, speaker grilles)
|
|
272
|
+
* - data-zone annotations for DLC auto-derivation
|
|
273
|
+
*
|
|
274
|
+
* The SVG sits ON TOP of content with pointer-events: none.
|
|
275
|
+
* Bezels are opaque — they mask any content that spills over.
|
|
276
|
+
* Screen area is transparent — content shows through.
|
|
277
|
+
*/
|
|
278
|
+
declare function IPhoneSE3SVG({ colorScheme, style }: DeviceSVGProps): react_jsx_runtime.JSX.Element;
|
|
279
|
+
/** Frame dimensions needed by DeviceFrame to position content correctly */
|
|
280
|
+
declare const IPHONE_SE_3_FRAME: {
|
|
281
|
+
readonly bezelTop: 70;
|
|
282
|
+
readonly bezelBottom: 70;
|
|
283
|
+
readonly bezelLeft: 10;
|
|
284
|
+
readonly bezelRight: 10;
|
|
285
|
+
readonly totalWidth: 395;
|
|
286
|
+
readonly totalHeight: 807;
|
|
287
|
+
readonly screenWidth: 375;
|
|
288
|
+
readonly screenHeight: 667;
|
|
289
|
+
readonly screenRadius: 5;
|
|
290
|
+
};
|
|
291
|
+
|
|
292
|
+
export { IPHONE_16E_FRAME, IPHONE_16E_LAYOUT, IPHONE_16E_META, IPHONE_16_FRAME, IPHONE_16_LAYOUT, IPHONE_16_META, IPHONE_17_PRO_FRAME, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_FRAME, IPHONE_17_PRO_MAX_LAYOUT, IPHONE_17_PRO_MAX_META, IPHONE_17_PRO_META, IPHONE_AIR_FRAME, IPHONE_AIR_LAYOUT, IPHONE_AIR_META, IPHONE_SE_3_FRAME, IPHONE_SE_3_LAYOUT, IPHONE_SE_3_META, IPhone16SVG, IPhone16eSVG, IPhone17ProMaxSVG, IPhone17ProSVG, IPhoneAirSVG, IPhoneSE3SVG };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { IPHONE_16E_FRAME, IPHONE_16E_LAYOUT, IPHONE_16E_META, IPHONE_16_FRAME, IPHONE_16_LAYOUT, IPHONE_16_META, IPHONE_17_PRO_FRAME, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_FRAME, IPHONE_17_PRO_MAX_LAYOUT, IPHONE_17_PRO_MAX_META, IPHONE_17_PRO_META, IPHONE_AIR_FRAME, IPHONE_AIR_LAYOUT, IPHONE_AIR_META, IPHONE_SE_3_FRAME, IPHONE_SE_3_LAYOUT, IPHONE_SE_3_META, IPhone16SVG, IPhone16eSVG, IPhone17ProMaxSVG, IPhone17ProSVG, IPhoneAirSVG, IPhoneSE3SVG } from '../chunk-DGX4WRAK.js';
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
package/package.json
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@biela.dev/devices",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Built-in device SVG library and layout contracts for BielaFrame — 11 devices covering every unique screen class",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Biela Enterprise <alex@cocindau.com>",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"main": "./dist/index.cjs",
|
|
9
|
+
"module": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"import": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"default": "./dist/index.js"
|
|
16
|
+
},
|
|
17
|
+
"require": {
|
|
18
|
+
"types": "./dist/index.d.cts",
|
|
19
|
+
"default": "./dist/index.cjs"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"./ios/*": {
|
|
23
|
+
"import": {
|
|
24
|
+
"types": "./dist/ios/*.d.ts",
|
|
25
|
+
"default": "./dist/ios/*.js"
|
|
26
|
+
},
|
|
27
|
+
"require": {
|
|
28
|
+
"types": "./dist/ios/*.d.cts",
|
|
29
|
+
"default": "./dist/ios/*.cjs"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"./android/*": {
|
|
33
|
+
"import": {
|
|
34
|
+
"types": "./dist/android/*.d.ts",
|
|
35
|
+
"default": "./dist/android/*.js"
|
|
36
|
+
},
|
|
37
|
+
"require": {
|
|
38
|
+
"types": "./dist/android/*.d.cts",
|
|
39
|
+
"default": "./dist/android/*.cjs"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"files": ["dist"],
|
|
44
|
+
"sideEffects": false,
|
|
45
|
+
"keywords": ["device", "mockup", "iphone", "android", "pixel", "galaxy", "svg", "react", "mobile"],
|
|
46
|
+
"scripts": {
|
|
47
|
+
"build": "tsup",
|
|
48
|
+
"dev": "tsup --watch",
|
|
49
|
+
"test": "vitest run",
|
|
50
|
+
"test:watch": "vitest",
|
|
51
|
+
"typecheck": "tsc --noEmit",
|
|
52
|
+
"clean": "rm -rf dist"
|
|
53
|
+
},
|
|
54
|
+
"peerDependencies": {
|
|
55
|
+
"react": ">=18.0.0"
|
|
56
|
+
},
|
|
57
|
+
"devDependencies": {
|
|
58
|
+
"@types/react": "^18.3.0",
|
|
59
|
+
"react": "^18.3.0",
|
|
60
|
+
"tsup": "^8.3.0",
|
|
61
|
+
"typescript": "^5.7.0",
|
|
62
|
+
"vitest": "^2.1.0"
|
|
63
|
+
}
|
|
64
|
+
}
|