@kreativa/device-preview 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kreativa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# @kreativa/device-preview
+
+App-agnostic device frame + catalog for rendering **web** previews of mobile UI
+at real device window sizes and safe-area insets. Render any React tree (e.g. a
+`react-native-web` screen) inside a device bezel that lays out at the device's
+true logical size, then scales for display — so the preview never lies about
+layout.
+
+It deliberately knows nothing about your app, theme system, or React Native: you
+map your theme to a `background` colour + `statusBarStyle` and wrap the children
+in whatever providers they need.
+
+## Install
+
+```bash
+npm install @kreativa/device-preview
+```
+
+`react` is a peer dependency (>=18). The package renders DOM, so it's for web /
+`react-native-web` previews.
+
+## Usage
+
+```tsx
+import {
+  DeviceFrame,
+  IPHONE_17_PRO,
+  displayWidthFor,
+} from '@kreativa/device-preview';
+
+function Preview() {
+  return (
+    <DeviceFrame
+      device={IPHONE_17_PRO}
+      statusBarStyle="light"            // light glyphs on a dark UI
+      background="#120a18"
+      displayWidth={402}                 // CSS px; height follows the aspect ratio
+    >
+      <YourScreen />
+    </DeviceFrame>
+  );
+}
+```
+
+Feed the device's real safe-area insets into your layout (e.g. inject
+`react-native-safe-area-context`'s `SafeAreaInsetsContext`/`SafeAreaFrameContext`
+from `device.safeArea` / `device.logicalWidth × device.logicalHeight`) so screens
+get the correct insets at every scale.
+
+## Exports
+
+| Export | What it is |
+|--------|------------|
+| `DeviceFrame` | The presentational bezel (status bar, Dynamic Island, home indicator). |
+| `DEVICES`, `IPHONE_17_PRO`, `getDevice(id)`, `DEFAULT_DEVICE_ID` | The device catalog. |
+| `DevicePicker` | A bare, host-styled `<select>` over the catalog (auto-locks with one device). |
+| `ScalePicker` | A `<select>` over the scale modes. |
+| `displayWidthFor(device, mode, ctx)`, `SCALE_MODES` | Compute the rendered width for a scale mode. |
+| Types | `DeviceProfile`, `DeviceInsets`, `DynamicIsland`, `StatusBarStyle`, `ScaleMode`, `ScaleContext`. |
+
+### Scale modes
+
+Mirrors the iOS Simulator's window-scale menu (the modes a browser can reproduce
+faithfully). Layout is always computed at the device's logical size — only the
+on-screen zoom changes:
+
+- `point` — 1 device point ↔ 1 CSS px (the design-true default).
+- `pixel` — 1 device pixel ↔ 1 physical monitor pixel (uses `devicePixelRatio`).
+- `fit` — scale to fit the available preview area.
+
+```ts
+const width = displayWidthFor(IPHONE_17_PRO, 'pixel', {
+  devicePixelRatio: window.devicePixelRatio,
+});
+```
+
+The Simulator's "Physical Size" is intentionally omitted — a browser can't read
+the monitor's true PPI, so it can't render life-size accurately.
+
+## License
+
+MIT

package/dist/DeviceFrame.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Presentational device bezel for web previews. Renders one screen surface at
+ * the device's **logical** size (so `children` — typically a react-native-web
+ * tree — lay out exactly as they would on-device), then CSS-scales the whole
+ * surface down to `displayWidth`. The status bar, Dynamic Island, and home
+ * indicator are non-interactive overlays positioned in logical coordinates.
+ *
+ * It deliberately knows nothing about themes or React Native: the consumer maps
+ * its theme to `background` + `statusBarStyle` and wraps `children` in whatever
+ * providers (e.g. a SafeAreaProvider seeded from `device.safeArea`) they need.
+ */
+import type { ReactNode } from 'react';
+import type { DeviceProfile, StatusBarStyle } from './types';
+interface DeviceFrameProps {
+    device: DeviceProfile;
+    /** Status-bar glyph style — usually derived from the theme's light/dark mode. */
+    statusBarStyle: StatusBarStyle;
+    /** Screen surface colour (the app/theme background). */
+    background: string;
+    /** Rendered width of the screen surface in CSS px. Height follows the aspect ratio. */
+    displayWidth?: number;
+    /** Faux clock shown in the status bar. */
+    time?: string;
+    children: ReactNode;
+}
+export declare function DeviceFrame({ device, statusBarStyle, background, displayWidth, time, children, }: DeviceFrameProps): import("react").JSX.Element;
+export {};

package/dist/DevicePicker.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A bare `<select>` over the device catalog. Styling is left to the host (pass
+ * `style`/`className`) so it blends into whatever admin chrome consumes it.
+ */
+import type { CSSProperties } from 'react';
+import type { DeviceProfile } from './types';
+interface DevicePickerProps {
+    value: string;
+    onChange: (deviceId: string) => void;
+    devices?: readonly DeviceProfile[];
+    /** Force the locked (disabled) state. Defaults to locked when there is only one device. */
+    disabled?: boolean;
+    style?: CSSProperties;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function DevicePicker({ value, onChange, devices, disabled, style, className, 'aria-label': ariaLabel, }: DevicePickerProps): import("react").JSX.Element;
+export {};

package/dist/ScalePicker.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A bare `<select>` over the scale modes. Styling is left to the host (pass
+ * `style`/`className`) so it matches whatever admin chrome consumes it.
+ */
+import type { CSSProperties } from 'react';
+import { type ScaleMode } from './scale';
+interface ScalePickerProps {
+    value: ScaleMode;
+    onChange: (mode: ScaleMode) => void;
+    style?: CSSProperties;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function ScalePicker({ value, onChange, style, className, 'aria-label': ariaLabel, }: ScalePickerProps): import("react").JSX.Element;
+export {};

package/dist/devices.d.ts

@@ -0,0 +1,15 @@
+import type { DeviceProfile } from './types';
+/**
+ * iPhone 17 Pro (2025). Logical 402×874 pt (native 1206×2622 px @3×, 460 ppi),
+ * portrait safe-area insets top 62 / bottom 34, status-bar band 54 pt, ~55 pt
+ * display corner radius, and the pill-shaped Dynamic Island near the top.
+ *
+ * Sources: Apple tech specs (support.apple.com/en-us/125090) and
+ * useyourloaf.com/blog/iphone-17-screen-sizes/.
+ */
+export declare const IPHONE_17_PRO: DeviceProfile;
+/** Every device the previewer offers. Add new profiles here. */
+export declare const DEVICES: readonly DeviceProfile[];
+/** The device selected by default. */
+export declare const DEFAULT_DEVICE_ID: string;
+export declare function getDevice(id: string): DeviceProfile | undefined;

package/dist/index.cjs

@@ -0,0 +1,231 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/DeviceFrame.tsx
+var BEZEL_PADDING = 12;
+function DeviceFrame({
+  device,
+  statusBarStyle,
+  background,
+  displayWidth = 300,
+  time = "9:41",
+  children
+}) {
+  const { logicalWidth, logicalHeight, cornerRadius, statusBarHeight, dynamicIsland } = device;
+  const scale = displayWidth / logicalWidth;
+  const displayHeight = logicalHeight * scale;
+  const ink = statusBarStyle === "light" ? "rgba(255,255,255,0.92)" : "rgba(0,0,0,0.85)";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": "device-frame",
+      "data-device": device.id,
+      style: {
+        padding: BEZEL_PADDING,
+        borderRadius: cornerRadius * scale + BEZEL_PADDING,
+        background: "#0c0605",
+        border: "2px solid rgba(255,248,233,0.28)",
+        boxShadow: "0 24px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,248,233,0.18), 0 0 0 1px rgba(0,0,0,0.6)",
+        width: "fit-content"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: displayWidth,
+            height: displayHeight,
+            borderRadius: cornerRadius * scale,
+            overflow: "hidden",
+            background
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: logicalWidth,
+                height: logicalHeight,
+                transform: `scale(${scale})`,
+                transformOrigin: "top left",
+                display: "flex"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, minWidth: 0, minHeight: 0, display: "flex" }, children }),
+                dynamicIsland ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    style: {
+                      position: "absolute",
+                      top: dynamicIsland.top,
+                      left: "50%",
+                      transform: "translateX(-50%)",
+                      width: dynamicIsland.width,
+                      height: dynamicIsland.height,
+                      borderRadius: dynamicIsland.height / 2,
+                      background: "#000",
+                      pointerEvents: "none"
+                    }
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(StatusBar, { height: statusBarHeight, ink, time }),
+                /* @__PURE__ */ jsxRuntime.jsx(HomeIndicator, { width: logicalWidth, ink })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function StatusBar({ height, ink, time }) {
+  const containerStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    height,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingLeft: 28,
+    paddingRight: 28,
+    paddingTop: 14,
+    fontSize: 15,
+    fontWeight: 700,
+    color: ink,
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": true, style: containerStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: time }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13 }, children: "5G" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", gap: 2, alignItems: "flex-end" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 3, height: 6, background: ink, borderRadius: 1 } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 3, height: 9, background: ink, borderRadius: 1 } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 3, height: 12, background: ink, borderRadius: 1 } })
+      ] })
+    ] })
+  ] });
+}
+function HomeIndicator({ width, ink }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        position: "absolute",
+        bottom: 8,
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: width * 0.36,
+        height: 5,
+        borderRadius: 3,
+        background: ink,
+        opacity: 0.55,
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+
+// src/devices.ts
+var IPHONE_17_PRO = {
+  id: "iphone-17-pro",
+  name: "iPhone 17 Pro",
+  logicalWidth: 402,
+  logicalHeight: 874,
+  scale: 3,
+  safeArea: { top: 62, bottom: 34, left: 0, right: 0 },
+  statusBarHeight: 54,
+  cornerRadius: 55,
+  dynamicIsland: { width: 126, height: 37, top: 11 }
+};
+var DEVICES = [IPHONE_17_PRO];
+var DEFAULT_DEVICE_ID = IPHONE_17_PRO.id;
+function getDevice(id) {
+  return DEVICES.find((device) => device.id === id);
+}
+function DevicePicker({
+  value,
+  onChange,
+  devices = DEVICES,
+  disabled,
+  style,
+  className,
+  "aria-label": ariaLabel = "V\xE4lj enhet"
+}) {
+  const locked = disabled ?? devices.length <= 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      "aria-label": ariaLabel,
+      className,
+      value,
+      disabled: locked,
+      onChange: (e) => onChange(e.target.value),
+      style: locked ? { ...style, opacity: 0.7, cursor: "not-allowed" } : style,
+      children: devices.map((device) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: device.id, children: device.name }, device.id))
+    }
+  );
+}
+
+// src/scale.ts
+var SCALE_MODES = [
+  { id: "point", label: "Point Accurate" },
+  { id: "pixel", label: "Pixel Accurate" },
+  { id: "fit", label: "Fit Screen" }
+];
+function displayWidthFor(device, mode, ctx) {
+  switch (mode) {
+    case "pixel": {
+      const ratio = ctx.devicePixelRatio > 0 ? ctx.devicePixelRatio : 1;
+      return device.logicalWidth * device.scale / ratio;
+    }
+    case "fit": {
+      const aspect = device.logicalWidth / device.logicalHeight;
+      const widthFromHeight = ctx.availableHeight !== void 0 ? ctx.availableHeight * aspect : Number.POSITIVE_INFINITY;
+      const widthBound = ctx.availableWidth ?? Number.POSITIVE_INFINITY;
+      const fitted = Math.min(widthFromHeight, widthBound);
+      return Number.isFinite(fitted) ? fitted : device.logicalWidth;
+    }
+    case "point":
+    default:
+      return device.logicalWidth;
+  }
+}
+function ScalePicker({
+  value,
+  onChange,
+  style,
+  className,
+  "aria-label": ariaLabel = "V\xE4lj skala"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      "aria-label": ariaLabel,
+      className,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      style,
+      children: SCALE_MODES.map((mode) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: mode.id, children: mode.label }, mode.id))
+    }
+  );
+}
+
+exports.DEFAULT_DEVICE_ID = DEFAULT_DEVICE_ID;
+exports.DEVICES = DEVICES;
+exports.DeviceFrame = DeviceFrame;
+exports.DevicePicker = DevicePicker;
+exports.IPHONE_17_PRO = IPHONE_17_PRO;
+exports.SCALE_MODES = SCALE_MODES;
+exports.ScalePicker = ScalePicker;
+exports.displayWidthFor = displayWidthFor;
+exports.getDevice = getDevice;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DeviceFrame.tsx","../src/devices.ts","../src/DevicePicker.tsx","../src/scale.ts","../src/ScalePicker.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Presentational device bezel for web previews. Renders one screen surface at\n * the device's **logical** size (so `children` — typically a react-native-web\n * tree — lay out exactly as they would on-device), then CSS-scales the whole\n * surface down to `displayWidth`. The status bar, Dynamic Island, and home\n * indicator are non-interactive overlays positioned in logical coordinates.\n *\n * It deliberately knows nothing about themes or React Native: the consumer maps\n * its theme to `background` + `statusBarStyle` and wraps `children` in whatever\n * providers (e.g. a SafeAreaProvider seeded from `device.safeArea`) they need.\n */\nimport type { CSSProperties, ReactNode } from 'react';\nimport type { DeviceProfile, StatusBarStyle } from './types';\n\ninterface DeviceFrameProps {\n  device: DeviceProfile;\n  /** Status-bar glyph style — usually derived from the theme's light/dark mode. */\n  statusBarStyle: StatusBarStyle;\n  /** Screen surface colour (the app/theme background). */\n  background: string;\n  /** Rendered width of the screen surface in CSS px. Height follows the aspect ratio. */\n  displayWidth?: number;\n  /** Faux clock shown in the status bar. */\n  time?: string;\n  children: ReactNode;\n}\n\nconst BEZEL_PADDING = 12;\n\nexport function DeviceFrame({\n  device,\n  statusBarStyle,\n  background,\n  displayWidth = 300,\n  time = '9:41',\n  children,\n}: DeviceFrameProps) {\n  const { logicalWidth, logicalHeight, cornerRadius, statusBarHeight, dynamicIsland } = device;\n  const scale = displayWidth / logicalWidth;\n  const displayHeight = logicalHeight * scale;\n  // `light` status-bar style = light glyphs on a dark background, and vice versa.\n  const ink = statusBarStyle === 'light' ? 'rgba(255,255,255,0.92)' : 'rgba(0,0,0,0.85)';\n\n  return (\n    <div\n      data-testid=\"device-frame\"\n      data-device={device.id}\n      style={{\n        padding: BEZEL_PADDING,\n        borderRadius: cornerRadius * scale + BEZEL_PADDING,\n        background: '#0c0605',\n        border: '2px solid rgba(255,248,233,0.28)',\n        boxShadow:\n          '0 24px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,248,233,0.18), 0 0 0 1px rgba(0,0,0,0.6)',\n        width: 'fit-content',\n      }}\n    >\n      <div\n        style={{\n          position: 'relative',\n          width: displayWidth,\n          height: displayHeight,\n          borderRadius: cornerRadius * scale,\n          overflow: 'hidden',\n          background,\n        }}\n      >\n        {/* Logical-size surface, scaled to fit. Everything inside uses points. */}\n        <div\n          style={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: logicalWidth,\n            height: logicalHeight,\n            transform: `scale(${scale})`,\n            transformOrigin: 'top left',\n            display: 'flex',\n          }}\n        >\n          <div style={{ flex: 1, minWidth: 0, minHeight: 0, display: 'flex' }}>{children}</div>\n\n          {dynamicIsland ? (\n            <div\n              aria-hidden\n              style={{\n                position: 'absolute',\n                top: dynamicIsland.top,\n                left: '50%',\n                transform: 'translateX(-50%)',\n                width: dynamicIsland.width,\n                height: dynamicIsland.height,\n                borderRadius: dynamicIsland.height / 2,\n                background: '#000',\n                pointerEvents: 'none',\n              }}\n            />\n          ) : null}\n\n          <StatusBar height={statusBarHeight} ink={ink} time={time} />\n          <HomeIndicator width={logicalWidth} ink={ink} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction StatusBar({ height, ink, time }: { height: number; ink: string; time: string }) {\n  const containerStyle: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    height,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    paddingLeft: 28,\n    paddingRight: 28,\n    paddingTop: 14,\n    fontSize: 15,\n    fontWeight: 700,\n    color: ink,\n    pointerEvents: 'none',\n  };\n  return (\n    <div aria-hidden style={containerStyle}>\n      <span>{time}</span>\n      <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>\n        <span style={{ fontSize: 13 }}>5G</span>\n        <span style={{ display: 'inline-flex', gap: 2, alignItems: 'flex-end' }}>\n          <span style={{ width: 3, height: 6, background: ink, borderRadius: 1 }} />\n          <span style={{ width: 3, height: 9, background: ink, borderRadius: 1 }} />\n          <span style={{ width: 3, height: 12, background: ink, borderRadius: 1 }} />\n        </span>\n      </span>\n    </div>\n  );\n}\n\nfunction HomeIndicator({ width, ink }: { width: number; ink: string }) {\n  return (\n    <div\n      aria-hidden\n      style={{\n        position: 'absolute',\n        bottom: 8,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: width * 0.36,\n        height: 5,\n        borderRadius: 3,\n        background: ink,\n        opacity: 0.55,\n        pointerEvents: 'none',\n      }}\n    />\n  );\n}\n","import type { DeviceProfile } from './types';\n\n/**\n * iPhone 17 Pro (2025). Logical 402×874 pt (native 1206×2622 px @3×, 460 ppi),\n * portrait safe-area insets top 62 / bottom 34, status-bar band 54 pt, ~55 pt\n * display corner radius, and the pill-shaped Dynamic Island near the top.\n *\n * Sources: Apple tech specs (support.apple.com/en-us/125090) and\n * useyourloaf.com/blog/iphone-17-screen-sizes/.\n */\nexport const IPHONE_17_PRO: DeviceProfile = {\n  id: 'iphone-17-pro',\n  name: 'iPhone 17 Pro',\n  logicalWidth: 402,\n  logicalHeight: 874,\n  scale: 3,\n  safeArea: { top: 62, bottom: 34, left: 0, right: 0 },\n  statusBarHeight: 54,\n  cornerRadius: 55,\n  dynamicIsland: { width: 126, height: 37, top: 11 },\n};\n\n/** Every device the previewer offers. Add new profiles here. */\nexport const DEVICES: readonly DeviceProfile[] = [IPHONE_17_PRO];\n\n/** The device selected by default. */\nexport const DEFAULT_DEVICE_ID = IPHONE_17_PRO.id;\n\nexport function getDevice(id: string): DeviceProfile | undefined {\n  return DEVICES.find((device) => device.id === id);\n}\n","/**\n * A bare `<select>` over the device catalog. Styling is left to the host (pass\n * `style`/`className`) so it blends into whatever admin chrome consumes it.\n */\nimport type { CSSProperties } from 'react';\nimport { DEVICES } from './devices';\nimport type { DeviceProfile } from './types';\n\ninterface DevicePickerProps {\n  value: string;\n  onChange: (deviceId: string) => void;\n  devices?: readonly DeviceProfile[];\n  /** Force the locked (disabled) state. Defaults to locked when there is only one device. */\n  disabled?: boolean;\n  style?: CSSProperties;\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport function DevicePicker({\n  value,\n  onChange,\n  devices = DEVICES,\n  disabled,\n  style,\n  className,\n  'aria-label': ariaLabel = 'Välj enhet',\n}: DevicePickerProps) {\n  // Nothing to choose between with a single device — show it, but lock it.\n  const locked = disabled ?? devices.length <= 1;\n  return (\n    <select\n      aria-label={ariaLabel}\n      className={className}\n      value={value}\n      disabled={locked}\n      onChange={(e) => onChange(e.target.value)}\n      style={locked ? { ...style, opacity: 0.7, cursor: 'not-allowed' } : style}\n    >\n      {devices.map((device) => (\n        <option key={device.id} value={device.id}>\n          {device.name}\n        </option>\n      ))}\n    </select>\n  );\n}\n","import type { DeviceProfile } from './types';\n\n/**\n * How big to render the device on screen. Mirrors the iOS Simulator's window\n * scale menu (the modes a browser can reproduce faithfully):\n *\n * - `point` — 1 device point ↔ 1 CSS px. The design-true default.\n * - `pixel` — 1 device pixel ↔ 1 physical monitor pixel (uses devicePixelRatio).\n *   On a Retina display this is larger than `point` (the device is denser).\n * - `fit`   — scale to fit the available preview area.\n *\n * (The Simulator's \"Physical Size\" is intentionally omitted: a browser can't\n * read the monitor's true PPI, so it can't render life-size accurately.)\n *\n * In all modes the screen still lays out at the device's logical size — only the\n * on-screen zoom changes — so the preview never lies about layout.\n */\nexport type ScaleMode = 'point' | 'pixel' | 'fit';\n\nexport const SCALE_MODES: { id: ScaleMode; label: string }[] = [\n  { id: 'point', label: 'Point Accurate' },\n  { id: 'pixel', label: 'Pixel Accurate' },\n  { id: 'fit', label: 'Fit Screen' },\n];\n\nexport interface ScaleContext {\n  /** `window.devicePixelRatio` — physical monitor pixels per CSS px. */\n  devicePixelRatio: number;\n  /** Available width in the preview area (CSS px); bounds `fit`. */\n  availableWidth?: number;\n  /** Available height in the preview area (CSS px); bounds `fit`. */\n  availableHeight?: number;\n}\n\n/** Rendered width (CSS px) of the screen surface for the given scale mode. */\nexport function displayWidthFor(\n  device: DeviceProfile,\n  mode: ScaleMode,\n  ctx: ScaleContext,\n): number {\n  switch (mode) {\n    case 'pixel': {\n      const ratio = ctx.devicePixelRatio > 0 ? ctx.devicePixelRatio : 1;\n      return (device.logicalWidth * device.scale) / ratio;\n    }\n    case 'fit': {\n      const aspect = device.logicalWidth / device.logicalHeight;\n      const widthFromHeight =\n        ctx.availableHeight !== undefined ? ctx.availableHeight * aspect : Number.POSITIVE_INFINITY;\n      const widthBound = ctx.availableWidth ?? Number.POSITIVE_INFINITY;\n      const fitted = Math.min(widthFromHeight, widthBound);\n      return Number.isFinite(fitted) ? fitted : device.logicalWidth;\n    }\n    case 'point':\n    default:\n      return device.logicalWidth;\n  }\n}\n","/**\n * A bare `<select>` over the scale modes. Styling is left to the host (pass\n * `style`/`className`) so it matches whatever admin chrome consumes it.\n */\nimport type { CSSProperties } from 'react';\nimport { SCALE_MODES, type ScaleMode } from './scale';\n\ninterface ScalePickerProps {\n  value: ScaleMode;\n  onChange: (mode: ScaleMode) => void;\n  style?: CSSProperties;\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport function ScalePicker({\n  value,\n  onChange,\n  style,\n  className,\n  'aria-label': ariaLabel = 'Välj skala',\n}: ScalePickerProps) {\n  return (\n    <select\n      aria-label={ariaLabel}\n      className={className}\n      value={value}\n      onChange={(e) => onChange(e.target.value as ScaleMode)}\n      style={style}\n    >\n      {SCALE_MODES.map((mode) => (\n        <option key={mode.id} value={mode.id}>\n          {mode.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @kreativa/device-preview — app-agnostic device frame + catalog for rendering
+ * web previews of mobile UI at real device window sizes and safe-area insets.
+ */
+export { DeviceFrame } from './DeviceFrame';
+export { DevicePicker } from './DevicePicker';
+export { ScalePicker } from './ScalePicker';
+export { DEVICES, DEFAULT_DEVICE_ID, IPHONE_17_PRO, getDevice } from './devices';
+export { SCALE_MODES, displayWidthFor } from './scale';
+export type { ScaleMode, ScaleContext } from './scale';
+export type { DeviceProfile, DeviceInsets, DynamicIsland, StatusBarStyle, } from './types';

package/dist/index.js

@@ -0,0 +1,221 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/DeviceFrame.tsx
+var BEZEL_PADDING = 12;
+function DeviceFrame({
+  device,
+  statusBarStyle,
+  background,
+  displayWidth = 300,
+  time = "9:41",
+  children
+}) {
+  const { logicalWidth, logicalHeight, cornerRadius, statusBarHeight, dynamicIsland } = device;
+  const scale = displayWidth / logicalWidth;
+  const displayHeight = logicalHeight * scale;
+  const ink = statusBarStyle === "light" ? "rgba(255,255,255,0.92)" : "rgba(0,0,0,0.85)";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "device-frame",
+      "data-device": device.id,
+      style: {
+        padding: BEZEL_PADDING,
+        borderRadius: cornerRadius * scale + BEZEL_PADDING,
+        background: "#0c0605",
+        border: "2px solid rgba(255,248,233,0.28)",
+        boxShadow: "0 24px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,248,233,0.18), 0 0 0 1px rgba(0,0,0,0.6)",
+        width: "fit-content"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: displayWidth,
+            height: displayHeight,
+            borderRadius: cornerRadius * scale,
+            overflow: "hidden",
+            background
+          },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: logicalWidth,
+                height: logicalHeight,
+                transform: `scale(${scale})`,
+                transformOrigin: "top left",
+                display: "flex"
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0, minHeight: 0, display: "flex" }, children }),
+                dynamicIsland ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    style: {
+                      position: "absolute",
+                      top: dynamicIsland.top,
+                      left: "50%",
+                      transform: "translateX(-50%)",
+                      width: dynamicIsland.width,
+                      height: dynamicIsland.height,
+                      borderRadius: dynamicIsland.height / 2,
+                      background: "#000",
+                      pointerEvents: "none"
+                    }
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(StatusBar, { height: statusBarHeight, ink, time }),
+                /* @__PURE__ */ jsx(HomeIndicator, { width: logicalWidth, ink })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function StatusBar({ height, ink, time }) {
+  const containerStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    height,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingLeft: 28,
+    paddingRight: 28,
+    paddingTop: 14,
+    fontSize: 15,
+    fontWeight: 700,
+    color: ink,
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, style: containerStyle, children: [
+    /* @__PURE__ */ jsx("span", { children: time }),
+    /* @__PURE__ */ jsxs("span", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 13 }, children: "5G" }),
+      /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", gap: 2, alignItems: "flex-end" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { width: 3, height: 6, background: ink, borderRadius: 1 } }),
+        /* @__PURE__ */ jsx("span", { style: { width: 3, height: 9, background: ink, borderRadius: 1 } }),
+        /* @__PURE__ */ jsx("span", { style: { width: 3, height: 12, background: ink, borderRadius: 1 } })
+      ] })
+    ] })
+  ] });
+}
+function HomeIndicator({ width, ink }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        position: "absolute",
+        bottom: 8,
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: width * 0.36,
+        height: 5,
+        borderRadius: 3,
+        background: ink,
+        opacity: 0.55,
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+
+// src/devices.ts
+var IPHONE_17_PRO = {
+  id: "iphone-17-pro",
+  name: "iPhone 17 Pro",
+  logicalWidth: 402,
+  logicalHeight: 874,
+  scale: 3,
+  safeArea: { top: 62, bottom: 34, left: 0, right: 0 },
+  statusBarHeight: 54,
+  cornerRadius: 55,
+  dynamicIsland: { width: 126, height: 37, top: 11 }
+};
+var DEVICES = [IPHONE_17_PRO];
+var DEFAULT_DEVICE_ID = IPHONE_17_PRO.id;
+function getDevice(id) {
+  return DEVICES.find((device) => device.id === id);
+}
+function DevicePicker({
+  value,
+  onChange,
+  devices = DEVICES,
+  disabled,
+  style,
+  className,
+  "aria-label": ariaLabel = "V\xE4lj enhet"
+}) {
+  const locked = disabled ?? devices.length <= 1;
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      "aria-label": ariaLabel,
+      className,
+      value,
+      disabled: locked,
+      onChange: (e) => onChange(e.target.value),
+      style: locked ? { ...style, opacity: 0.7, cursor: "not-allowed" } : style,
+      children: devices.map((device) => /* @__PURE__ */ jsx("option", { value: device.id, children: device.name }, device.id))
+    }
+  );
+}
+
+// src/scale.ts
+var SCALE_MODES = [
+  { id: "point", label: "Point Accurate" },
+  { id: "pixel", label: "Pixel Accurate" },
+  { id: "fit", label: "Fit Screen" }
+];
+function displayWidthFor(device, mode, ctx) {
+  switch (mode) {
+    case "pixel": {
+      const ratio = ctx.devicePixelRatio > 0 ? ctx.devicePixelRatio : 1;
+      return device.logicalWidth * device.scale / ratio;
+    }
+    case "fit": {
+      const aspect = device.logicalWidth / device.logicalHeight;
+      const widthFromHeight = ctx.availableHeight !== void 0 ? ctx.availableHeight * aspect : Number.POSITIVE_INFINITY;
+      const widthBound = ctx.availableWidth ?? Number.POSITIVE_INFINITY;
+      const fitted = Math.min(widthFromHeight, widthBound);
+      return Number.isFinite(fitted) ? fitted : device.logicalWidth;
+    }
+    case "point":
+    default:
+      return device.logicalWidth;
+  }
+}
+function ScalePicker({
+  value,
+  onChange,
+  style,
+  className,
+  "aria-label": ariaLabel = "V\xE4lj skala"
+}) {
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      "aria-label": ariaLabel,
+      className,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      style,
+      children: SCALE_MODES.map((mode) => /* @__PURE__ */ jsx("option", { value: mode.id, children: mode.label }, mode.id))
+    }
+  );
+}
+
+export { DEFAULT_DEVICE_ID, DEVICES, DeviceFrame, DevicePicker, IPHONE_17_PRO, SCALE_MODES, ScalePicker, displayWidthFor, getDevice };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DeviceFrame.tsx","../src/devices.ts","../src/DevicePicker.tsx","../src/scale.ts","../src/ScalePicker.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Presentational device bezel for web previews. Renders one screen surface at\n * the device's **logical** size (so `children` — typically a react-native-web\n * tree — lay out exactly as they would on-device), then CSS-scales the whole\n * surface down to `displayWidth`. The status bar, Dynamic Island, and home\n * indicator are non-interactive overlays positioned in logical coordinates.\n *\n * It deliberately knows nothing about themes or React Native: the consumer maps\n * its theme to `background` + `statusBarStyle` and wraps `children` in whatever\n * providers (e.g. a SafeAreaProvider seeded from `device.safeArea`) they need.\n */\nimport type { CSSProperties, ReactNode } from 'react';\nimport type { DeviceProfile, StatusBarStyle } from './types';\n\ninterface DeviceFrameProps {\n  device: DeviceProfile;\n  /** Status-bar glyph style — usually derived from the theme's light/dark mode. */\n  statusBarStyle: StatusBarStyle;\n  /** Screen surface colour (the app/theme background). */\n  background: string;\n  /** Rendered width of the screen surface in CSS px. Height follows the aspect ratio. */\n  displayWidth?: number;\n  /** Faux clock shown in the status bar. */\n  time?: string;\n  children: ReactNode;\n}\n\nconst BEZEL_PADDING = 12;\n\nexport function DeviceFrame({\n  device,\n  statusBarStyle,\n  background,\n  displayWidth = 300,\n  time = '9:41',\n  children,\n}: DeviceFrameProps) {\n  const { logicalWidth, logicalHeight, cornerRadius, statusBarHeight, dynamicIsland } = device;\n  const scale = displayWidth / logicalWidth;\n  const displayHeight = logicalHeight * scale;\n  // `light` status-bar style = light glyphs on a dark background, and vice versa.\n  const ink = statusBarStyle === 'light' ? 'rgba(255,255,255,0.92)' : 'rgba(0,0,0,0.85)';\n\n  return (\n    <div\n      data-testid=\"device-frame\"\n      data-device={device.id}\n      style={{\n        padding: BEZEL_PADDING,\n        borderRadius: cornerRadius * scale + BEZEL_PADDING,\n        background: '#0c0605',\n        border: '2px solid rgba(255,248,233,0.28)',\n        boxShadow:\n          '0 24px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,248,233,0.18), 0 0 0 1px rgba(0,0,0,0.6)',\n        width: 'fit-content',\n      }}\n    >\n      <div\n        style={{\n          position: 'relative',\n          width: displayWidth,\n          height: displayHeight,\n          borderRadius: cornerRadius * scale,\n          overflow: 'hidden',\n          background,\n        }}\n      >\n        {/* Logical-size surface, scaled to fit. Everything inside uses points. */}\n        <div\n          style={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: logicalWidth,\n            height: logicalHeight,\n            transform: `scale(${scale})`,\n            transformOrigin: 'top left',\n            display: 'flex',\n          }}\n        >\n          <div style={{ flex: 1, minWidth: 0, minHeight: 0, display: 'flex' }}>{children}</div>\n\n          {dynamicIsland ? (\n            <div\n              aria-hidden\n              style={{\n                position: 'absolute',\n                top: dynamicIsland.top,\n                left: '50%',\n                transform: 'translateX(-50%)',\n                width: dynamicIsland.width,\n                height: dynamicIsland.height,\n                borderRadius: dynamicIsland.height / 2,\n                background: '#000',\n                pointerEvents: 'none',\n              }}\n            />\n          ) : null}\n\n          <StatusBar height={statusBarHeight} ink={ink} time={time} />\n          <HomeIndicator width={logicalWidth} ink={ink} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction StatusBar({ height, ink, time }: { height: number; ink: string; time: string }) {\n  const containerStyle: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    height,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    paddingLeft: 28,\n    paddingRight: 28,\n    paddingTop: 14,\n    fontSize: 15,\n    fontWeight: 700,\n    color: ink,\n    pointerEvents: 'none',\n  };\n  return (\n    <div aria-hidden style={containerStyle}>\n      <span>{time}</span>\n      <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>\n        <span style={{ fontSize: 13 }}>5G</span>\n        <span style={{ display: 'inline-flex', gap: 2, alignItems: 'flex-end' }}>\n          <span style={{ width: 3, height: 6, background: ink, borderRadius: 1 }} />\n          <span style={{ width: 3, height: 9, background: ink, borderRadius: 1 }} />\n          <span style={{ width: 3, height: 12, background: ink, borderRadius: 1 }} />\n        </span>\n      </span>\n    </div>\n  );\n}\n\nfunction HomeIndicator({ width, ink }: { width: number; ink: string }) {\n  return (\n    <div\n      aria-hidden\n      style={{\n        position: 'absolute',\n        bottom: 8,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: width * 0.36,\n        height: 5,\n        borderRadius: 3,\n        background: ink,\n        opacity: 0.55,\n        pointerEvents: 'none',\n      }}\n    />\n  );\n}\n","import type { DeviceProfile } from './types';\n\n/**\n * iPhone 17 Pro (2025). Logical 402×874 pt (native 1206×2622 px @3×, 460 ppi),\n * portrait safe-area insets top 62 / bottom 34, status-bar band 54 pt, ~55 pt\n * display corner radius, and the pill-shaped Dynamic Island near the top.\n *\n * Sources: Apple tech specs (support.apple.com/en-us/125090) and\n * useyourloaf.com/blog/iphone-17-screen-sizes/.\n */\nexport const IPHONE_17_PRO: DeviceProfile = {\n  id: 'iphone-17-pro',\n  name: 'iPhone 17 Pro',\n  logicalWidth: 402,\n  logicalHeight: 874,\n  scale: 3,\n  safeArea: { top: 62, bottom: 34, left: 0, right: 0 },\n  statusBarHeight: 54,\n  cornerRadius: 55,\n  dynamicIsland: { width: 126, height: 37, top: 11 },\n};\n\n/** Every device the previewer offers. Add new profiles here. */\nexport const DEVICES: readonly DeviceProfile[] = [IPHONE_17_PRO];\n\n/** The device selected by default. */\nexport const DEFAULT_DEVICE_ID = IPHONE_17_PRO.id;\n\nexport function getDevice(id: string): DeviceProfile | undefined {\n  return DEVICES.find((device) => device.id === id);\n}\n","/**\n * A bare `<select>` over the device catalog. Styling is left to the host (pass\n * `style`/`className`) so it blends into whatever admin chrome consumes it.\n */\nimport type { CSSProperties } from 'react';\nimport { DEVICES } from './devices';\nimport type { DeviceProfile } from './types';\n\ninterface DevicePickerProps {\n  value: string;\n  onChange: (deviceId: string) => void;\n  devices?: readonly DeviceProfile[];\n  /** Force the locked (disabled) state. Defaults to locked when there is only one device. */\n  disabled?: boolean;\n  style?: CSSProperties;\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport function DevicePicker({\n  value,\n  onChange,\n  devices = DEVICES,\n  disabled,\n  style,\n  className,\n  'aria-label': ariaLabel = 'Välj enhet',\n}: DevicePickerProps) {\n  // Nothing to choose between with a single device — show it, but lock it.\n  const locked = disabled ?? devices.length <= 1;\n  return (\n    <select\n      aria-label={ariaLabel}\n      className={className}\n      value={value}\n      disabled={locked}\n      onChange={(e) => onChange(e.target.value)}\n      style={locked ? { ...style, opacity: 0.7, cursor: 'not-allowed' } : style}\n    >\n      {devices.map((device) => (\n        <option key={device.id} value={device.id}>\n          {device.name}\n        </option>\n      ))}\n    </select>\n  );\n}\n","import type { DeviceProfile } from './types';\n\n/**\n * How big to render the device on screen. Mirrors the iOS Simulator's window\n * scale menu (the modes a browser can reproduce faithfully):\n *\n * - `point` — 1 device point ↔ 1 CSS px. The design-true default.\n * - `pixel` — 1 device pixel ↔ 1 physical monitor pixel (uses devicePixelRatio).\n *   On a Retina display this is larger than `point` (the device is denser).\n * - `fit`   — scale to fit the available preview area.\n *\n * (The Simulator's \"Physical Size\" is intentionally omitted: a browser can't\n * read the monitor's true PPI, so it can't render life-size accurately.)\n *\n * In all modes the screen still lays out at the device's logical size — only the\n * on-screen zoom changes — so the preview never lies about layout.\n */\nexport type ScaleMode = 'point' | 'pixel' | 'fit';\n\nexport const SCALE_MODES: { id: ScaleMode; label: string }[] = [\n  { id: 'point', label: 'Point Accurate' },\n  { id: 'pixel', label: 'Pixel Accurate' },\n  { id: 'fit', label: 'Fit Screen' },\n];\n\nexport interface ScaleContext {\n  /** `window.devicePixelRatio` — physical monitor pixels per CSS px. */\n  devicePixelRatio: number;\n  /** Available width in the preview area (CSS px); bounds `fit`. */\n  availableWidth?: number;\n  /** Available height in the preview area (CSS px); bounds `fit`. */\n  availableHeight?: number;\n}\n\n/** Rendered width (CSS px) of the screen surface for the given scale mode. */\nexport function displayWidthFor(\n  device: DeviceProfile,\n  mode: ScaleMode,\n  ctx: ScaleContext,\n): number {\n  switch (mode) {\n    case 'pixel': {\n      const ratio = ctx.devicePixelRatio > 0 ? ctx.devicePixelRatio : 1;\n      return (device.logicalWidth * device.scale) / ratio;\n    }\n    case 'fit': {\n      const aspect = device.logicalWidth / device.logicalHeight;\n      const widthFromHeight =\n        ctx.availableHeight !== undefined ? ctx.availableHeight * aspect : Number.POSITIVE_INFINITY;\n      const widthBound = ctx.availableWidth ?? Number.POSITIVE_INFINITY;\n      const fitted = Math.min(widthFromHeight, widthBound);\n      return Number.isFinite(fitted) ? fitted : device.logicalWidth;\n    }\n    case 'point':\n    default:\n      return device.logicalWidth;\n  }\n}\n","/**\n * A bare `<select>` over the scale modes. Styling is left to the host (pass\n * `style`/`className`) so it matches whatever admin chrome consumes it.\n */\nimport type { CSSProperties } from 'react';\nimport { SCALE_MODES, type ScaleMode } from './scale';\n\ninterface ScalePickerProps {\n  value: ScaleMode;\n  onChange: (mode: ScaleMode) => void;\n  style?: CSSProperties;\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport function ScalePicker({\n  value,\n  onChange,\n  style,\n  className,\n  'aria-label': ariaLabel = 'Välj skala',\n}: ScalePickerProps) {\n  return (\n    <select\n      aria-label={ariaLabel}\n      className={className}\n      value={value}\n      onChange={(e) => onChange(e.target.value as ScaleMode)}\n      style={style}\n    >\n      {SCALE_MODES.map((mode) => (\n        <option key={mode.id} value={mode.id}>\n          {mode.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n"]}

package/dist/scale.d.ts

@@ -0,0 +1,31 @@
+import type { DeviceProfile } from './types';
+/**
+ * How big to render the device on screen. Mirrors the iOS Simulator's window
+ * scale menu (the modes a browser can reproduce faithfully):
+ *
+ * - `point` — 1 device point ↔ 1 CSS px. The design-true default.
+ * - `pixel` — 1 device pixel ↔ 1 physical monitor pixel (uses devicePixelRatio).
+ *   On a Retina display this is larger than `point` (the device is denser).
+ * - `fit`   — scale to fit the available preview area.
+ *
+ * (The Simulator's "Physical Size" is intentionally omitted: a browser can't
+ * read the monitor's true PPI, so it can't render life-size accurately.)
+ *
+ * In all modes the screen still lays out at the device's logical size — only the
+ * on-screen zoom changes — so the preview never lies about layout.
+ */
+export type ScaleMode = 'point' | 'pixel' | 'fit';
+export declare const SCALE_MODES: {
+    id: ScaleMode;
+    label: string;
+}[];
+export interface ScaleContext {
+    /** `window.devicePixelRatio` — physical monitor pixels per CSS px. */
+    devicePixelRatio: number;
+    /** Available width in the preview area (CSS px); bounds `fit`. */
+    availableWidth?: number;
+    /** Available height in the preview area (CSS px); bounds `fit`. */
+    availableHeight?: number;
+}
+/** Rendered width (CSS px) of the screen surface for the given scale mode. */
+export declare function displayWidthFor(device: DeviceProfile, mode: ScaleMode, ctx: ScaleContext): number;

package/dist/types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Core types for the device-preview frame. Kept free of any app- or
+ * framework-specific imports so this package can be lifted into a standalone
+ * `@kreativa/device-preview` repo unchanged.
+ */
+/**
+ * Status-bar content style, mirroring the iOS/`expo-status-bar` vocabulary:
+ * `light` = light-coloured glyphs (for dark backgrounds), `dark` = dark glyphs.
+ */
+export type StatusBarStyle = 'light' | 'dark';
+export interface DeviceInsets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export interface DynamicIsland {
+    width: number;
+    height: number;
+    /** Distance from the top edge of the screen to the island, in logical points. */
+    top: number;
+}
+/**
+ * A device the previewer can render. All measurements are in **logical points**
+ * (CSS px before scaling), matching what a React Native screen lays out against
+ * — so feeding `logicalWidth`/`logicalHeight` and `safeArea` into the preview
+ * reproduces the real on-device layout.
+ */
+export interface DeviceProfile {
+    id: string;
+    name: string;
+    logicalWidth: number;
+    logicalHeight: number;
+    /** Native pixel scale (e.g. 3 for @3x). Informational; layout uses points. */
+    scale: number;
+    safeArea: DeviceInsets;
+    /** Height of the status-bar band at the top of the screen. */
+    statusBarHeight: number;
+    /** Display corner radius of the screen surface. */
+    cornerRadius: number;
+    /** Pill cutout at the top, or `null` for devices without one. */
+    dynamicIsland: DynamicIsland | null;
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@kreativa/device-preview",
+  "version": "0.1.0",
+  "description": "App-agnostic device frame + catalog for rendering web previews of mobile UI at real device window sizes and safe-area insets.",
+  "license": "MIT",
+  "author": "Kreativa",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kreativabyran/device-preview.git"
+  },
+  "homepage": "https://github.com/kreativabyran/device-preview#readme",
+  "bugs": {
+    "url": "https://github.com/kreativabyran/device-preview/issues"
+  },
+  "keywords": [
+    "react",
+    "device-frame",
+    "preview",
+    "iphone",
+    "simulator",
+    "safe-area",
+    "responsive"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig.build.json",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "lint-quiet": "concurrently \"npm run lint\" \"npm run typecheck\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "~19.2.17",
+    "@typescript-eslint/eslint-plugin": "^8.61.0",
+    "@typescript-eslint/parser": "^8.61.0",
+    "concurrently": "^10.0.3",
+    "eslint": "^9.39.4",
+    "jsdom": "^29.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tsup": "^8.5.0",
+    "typescript": "~6.0.3",
+    "vitest": "^4.1.8"
+  }
+}