@biela.dev/core 1.5.0 → 1.6.0

package/dist/index.cjs

@@ -4,19 +4,24 @@ var react = require('react');
 var devices = require('@biela.dev/devices');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/math/conversions.ts
-function ptsToPx(pts, dpr) {
-  return Math.round(pts * dpr);
-}
-function pxToPts(px, dpr) {
-  return px / dpr;
-}
-function ptsToPercent(pts, total) {
-  if (total === 0) return 0;
-  return pts / total * 100;
-}
-function scaleValue(value, scaleFactor) {
-  return value * scaleFactor;
+// src/components/DeviceFrame.tsx
+function useContainerSize(ref) {
+  const [size, setSize] = react.useState({ width: 0, height: 0 });
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      setSize((prev) => {
+        if (prev.width === width && prev.height === height) return prev;
+        return { width, height };
+      });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
 }
 
 // src/math/scale-engine.ts
@@ -71,24 +76,8 @@ function computeFullScale(deviceWidth, deviceHeight, containerWidth, containerHe
     scalePercent: `${Math.round(scale * 100)}%`
   };
 }
-function useContainerSize(ref) {
-  const [size, setSize] = react.useState({ width: 0, height: 0 });
-  react.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const observer = new ResizeObserver(([entry]) => {
-      if (!entry) return;
-      const { width, height } = entry.contentRect;
-      setSize((prev) => {
-        if (prev.width === width && prev.height === height) return prev;
-        return { width, height };
-      });
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [ref]);
-  return size;
-}
+
+// src/hooks/useAdaptiveScale.ts
 function useAdaptiveScale(options) {
   const {
     device,
@@ -109,72 +98,6 @@ function useAdaptiveScale(options) {
     [device.screen.width, device.screen.height, containerWidth, containerHeight, padding, maxScale, minScale, snapToSteps]
   );
 }
-function useDeviceContract(deviceId, orientation = "portrait") {
-  return react.useMemo(() => {
-    const contract = devices.getDeviceContract(deviceId, orientation);
-    return {
-      contract,
-      cssVariables: contract.cssVariables,
-      contentZone: contract.contentZone[orientation]
-    };
-  }, [deviceId, orientation]);
-}
-var STEPS = 16;
-var STEP_SIZE = 1 / STEPS;
-var HUD_DISPLAY_MS = 1500;
-function useVolumeControl(initialVolume = 1) {
-  const [level, setLevel] = react.useState(initialVolume);
-  const [muted, setMuted] = react.useState(false);
-  const [hudVisible, setHudVisible] = react.useState(false);
-  const hudTimerRef = react.useRef(null);
-  const showHud = react.useCallback(() => {
-    setHudVisible(true);
-    if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
-    hudTimerRef.current = setTimeout(() => setHudVisible(false), HUD_DISPLAY_MS);
-  }, []);
-  const volumeUp = react.useCallback(() => {
-    setLevel((prev) => {
-      const next = Math.min(1, Math.round((prev + STEP_SIZE) * STEPS) / STEPS);
-      return next;
-    });
-    setMuted(false);
-    showHud();
-  }, [showHud]);
-  const volumeDown = react.useCallback(() => {
-    setLevel((prev) => {
-      const next = Math.max(0, Math.round((prev - STEP_SIZE) * STEPS) / STEPS);
-      return next;
-    });
-    setMuted(false);
-    showHud();
-  }, [showHud]);
-  const toggleMute = react.useCallback(() => {
-    setMuted((prev) => !prev);
-    showHud();
-  }, [showHud]);
-  const effectiveVolume = muted ? 0 : level;
-  react.useEffect(() => {
-    const container = document.querySelector(".bielaframe-content");
-    if (!container) return;
-    const mediaEls = container.querySelectorAll("audio, video");
-    mediaEls.forEach((el) => {
-      el.volume = effectiveVolume;
-    });
-  }, [effectiveVolume]);
-  react.useEffect(() => {
-    return () => {
-      if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
-    };
-  }, []);
-  return { level, muted, hudVisible, volumeUp, volumeDown, toggleMute };
-}
-function useScreenPower() {
-  const [isOff, setIsOff] = react.useState(false);
-  const toggle = react.useCallback(() => {
-    setIsOff((prev) => !prev);
-  }, []);
-  return { isOff, toggle };
-}
 var DeviceErrorBoundary = class extends react.Component {
   constructor(props) {
     super(props);
@@ -559,7 +482,8 @@ function registerCustomDeviceSVG(deviceId, svgString, frame, cropViewBox, screen
   SVG_REGISTRY[deviceId] = { component: CustomSVGComponent, frame };
 }
 function DeviceFrame({
-  device,
+  device: deviceProp,
+  deviceId,
   orientation = "portrait",
   scaleMode = "fit",
   manualScale,
@@ -570,23 +494,28 @@ function DeviceFrame({
   onScaleChange,
   children
 }) {
+  const device = deviceProp ?? deviceId ?? "";
   const sentinelRef = react.useRef(null);
   const frameOverlayRef = react.useRef(null);
   const hostRef = react.useRef(null);
   const scalerRef = react.useRef(null);
   const { width: containerW, height: containerH } = useContainerSize(sentinelRef);
   const deviceLookup = react.useMemo(() => {
+    if (!device) {
+      return { meta: null, contract: null, error: "(no device specified)" };
+    }
     try {
-      return {
-        meta: devices.getDeviceMetadata(device),
-        contract: devices.getDeviceContract(device, orientation),
-        error: null
-      };
+      const meta = devices.getDeviceMetadata(device);
+      const contract2 = devices.getDeviceContract(device, orientation);
+      if (!meta || !meta.screen) {
+        return { meta: null, contract: null, error: device };
+      }
+      return { meta, contract: contract2, error: null };
     } catch {
       return { meta: null, contract: null, error: device };
     }
   }, [device, orientation]);
-  if (deviceLookup.error) {
+  if (deviceLookup.error || !deviceLookup.meta || !deviceLookup.contract) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -603,7 +532,7 @@ function DeviceFrame({
         },
         children: [
           'Device not found: "',
-          deviceLookup.error,
+          deviceLookup.error || "(unknown)",
           '"'
         ]
       }
@@ -785,6 +714,303 @@ function DeviceFrame({
     }
   );
 }
+var SVG_OVERRIDES_KEY = "bielaframe-svg-overrides";
+var CustomSVGStore = class {
+  storage;
+  constructor(storage) {
+    if (storage !== void 0) {
+      this.storage = storage;
+    } else {
+      this.storage = typeof localStorage !== "undefined" ? localStorage : null;
+    }
+  }
+  /** Load all stored overrides */
+  getAll() {
+    if (!this.storage) return {};
+    try {
+      const raw = this.storage.getItem(SVG_OVERRIDES_KEY);
+      if (raw) return JSON.parse(raw);
+    } catch {
+    }
+    return {};
+  }
+  /** Save an override and register it in the SVG registry */
+  save(entry) {
+    const all = this.getAll();
+    all[entry.deviceId] = entry;
+    this.persist(all);
+    this.applyEntry(entry);
+  }
+  /** Remove an override (revert to built-in) */
+  remove(deviceId) {
+    const all = this.getAll();
+    delete all[deviceId];
+    this.persist(all);
+  }
+  /** Check if a device has a custom override */
+  has(deviceId) {
+    return this.getAll()[deviceId] !== void 0;
+  }
+  /** Get a single override by device ID */
+  get(deviceId) {
+    return this.getAll()[deviceId];
+  }
+  /**
+   * Apply all stored overrides to the SVG registry.
+   * Called during auto-registration to restore user customizations.
+   */
+  applyAll() {
+    const all = this.getAll();
+    for (const entry of Object.values(all)) {
+      this.applyEntry(entry);
+    }
+  }
+  applyEntry(entry) {
+    let screenW = 402;
+    let screenH = 874;
+    let screenR = 0;
+    try {
+      const meta = devices.getDeviceMetadata(entry.deviceId);
+      screenW = meta.screen.width;
+      screenH = meta.screen.height;
+      screenR = meta.screen.cornerRadius;
+    } catch {
+      if (entry.screenRect) {
+        screenW = entry.screenRect.width;
+        screenH = entry.screenRect.height;
+      }
+    }
+    const frame = {
+      bezelTop: entry.bezelTop,
+      bezelBottom: entry.bezelBottom,
+      bezelLeft: entry.bezelLeft,
+      bezelRight: entry.bezelRight,
+      totalWidth: entry.bezelLeft + entry.bezelRight + screenW,
+      totalHeight: entry.bezelTop + entry.bezelBottom + screenH,
+      screenWidth: screenW,
+      screenHeight: screenH,
+      screenRadius: screenR
+    };
+    try {
+      registerCustomDeviceSVG(
+        entry.deviceId,
+        entry.svgString,
+        frame,
+        void 0,
+        entry.screenRect
+      );
+    } catch {
+    }
+  }
+  persist(all) {
+    if (!this.storage) return;
+    const json = JSON.stringify(all);
+    try {
+      this.storage.setItem(SVG_OVERRIDES_KEY, json);
+    } catch {
+    }
+  }
+};
+var _store = null;
+function getCustomSVGStore() {
+  if (!_store) {
+    _store = new CustomSVGStore();
+  }
+  return _store;
+}
+
+// src/registration.ts
+registerDeviceSVG("iphone-17-pro-max", devices.IPhone17ProMaxSVG, devices.IPHONE_17_PRO_MAX_FRAME);
+registerDeviceSVG("iphone-17-pro", devices.IPhone17ProSVG, devices.IPHONE_17_PRO_FRAME);
+registerDeviceSVG("iphone-air", devices.IPhoneAirSVG, devices.IPHONE_AIR_FRAME);
+registerDeviceSVG("iphone-16", devices.IPhone16SVG, devices.IPHONE_16_FRAME);
+registerDeviceSVG("iphone-16e", devices.IPhone16eSVG, devices.IPHONE_16E_FRAME);
+registerDeviceSVG("iphone-se-3", devices.IPhoneSE3SVG, devices.IPHONE_SE_3_FRAME);
+registerDeviceSVG("galaxy-s25-ultra", devices.GalaxyS25UltraSVG, devices.GALAXY_S25_ULTRA_FRAME);
+registerDeviceSVG("galaxy-s25", devices.GalaxyS25SVG, devices.GALAXY_S25_FRAME);
+registerDeviceSVG("galaxy-s25-edge", devices.GalaxyS25EdgeSVG, devices.GALAXY_S25_EDGE_FRAME);
+registerDeviceSVG("pixel-9-pro-xl", devices.Pixel9ProXLSVG, devices.PIXEL_9_PRO_XL_FRAME);
+registerDeviceSVG("pixel-9-pro", devices.Pixel9ProSVG, devices.PIXEL_9_PRO_FRAME);
+getCustomSVGStore().applyAll();
+
+// src/math/conversions.ts
+function ptsToPx(pts, dpr) {
+  return Math.round(pts * dpr);
+}
+function pxToPts(px, dpr) {
+  return px / dpr;
+}
+function ptsToPercent(pts, total) {
+  if (total === 0) return 0;
+  return pts / total * 100;
+}
+function scaleValue(value, scaleFactor) {
+  return value * scaleFactor;
+}
+function useDeviceContract(deviceId, orientation = "portrait") {
+  return react.useMemo(() => {
+    const contract = devices.getDeviceContract(deviceId, orientation);
+    return {
+      contract,
+      cssVariables: contract.cssVariables,
+      contentZone: contract.contentZone[orientation]
+    };
+  }, [deviceId, orientation]);
+}
+var STEPS = 16;
+var STEP_SIZE = 1 / STEPS;
+var HUD_DISPLAY_MS = 1500;
+function useVolumeControl(initialVolume = 1) {
+  const [level, setLevel] = react.useState(initialVolume);
+  const [muted, setMuted] = react.useState(false);
+  const [hudVisible, setHudVisible] = react.useState(false);
+  const hudTimerRef = react.useRef(null);
+  const showHud = react.useCallback(() => {
+    setHudVisible(true);
+    if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
+    hudTimerRef.current = setTimeout(() => setHudVisible(false), HUD_DISPLAY_MS);
+  }, []);
+  const volumeUp = react.useCallback(() => {
+    setLevel((prev) => {
+      const next = Math.min(1, Math.round((prev + STEP_SIZE) * STEPS) / STEPS);
+      return next;
+    });
+    setMuted(false);
+    showHud();
+  }, [showHud]);
+  const volumeDown = react.useCallback(() => {
+    setLevel((prev) => {
+      const next = Math.max(0, Math.round((prev - STEP_SIZE) * STEPS) / STEPS);
+      return next;
+    });
+    setMuted(false);
+    showHud();
+  }, [showHud]);
+  const toggleMute = react.useCallback(() => {
+    setMuted((prev) => !prev);
+    showHud();
+  }, [showHud]);
+  const effectiveVolume = muted ? 0 : level;
+  react.useEffect(() => {
+    const container = document.querySelector(".bielaframe-content");
+    if (!container) return;
+    const mediaEls = container.querySelectorAll("audio, video");
+    mediaEls.forEach((el) => {
+      el.volume = effectiveVolume;
+    });
+  }, [effectiveVolume]);
+  react.useEffect(() => {
+    return () => {
+      if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
+    };
+  }, []);
+  return { level, muted, hudVisible, volumeUp, volumeDown, toggleMute };
+}
+function useScreenPower() {
+  const [isOff, setIsOff] = react.useState(false);
+  const toggle = react.useCallback(() => {
+    setIsOff((prev) => !prev);
+  }, []);
+  return { isOff, toggle };
+}
+function useOrientation(initial = "portrait") {
+  const [orientation, setOrientation] = react.useState(initial);
+  const toggle = react.useCallback(
+    () => setOrientation((o) => o === "portrait" ? "landscape" : "portrait"),
+    []
+  );
+  return {
+    orientation,
+    isLandscape: orientation === "landscape",
+    toggle,
+    setOrientation
+  };
+}
+function DeviceCompare({
+  deviceA,
+  deviceB,
+  orientation = "portrait",
+  colorScheme = "dark",
+  showSafeAreaOverlay = false,
+  showScaleBar = false,
+  layout = "auto",
+  gap = 24,
+  children,
+  childrenA,
+  childrenB,
+  onContractReadyA,
+  onContractReadyB
+}) {
+  const isLandscape = orientation === "landscape";
+  const effectiveLayout = layout === "auto" ? isLandscape ? "vertical" : "horizontal" : layout;
+  const flexDirection = effectiveLayout === "horizontal" ? "row" : "column";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "bielaframe-compare",
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection,
+        alignItems: "center",
+        justifyContent: "center",
+        gap,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              width: effectiveLayout === "horizontal" ? 0 : "100%",
+              height: effectiveLayout === "vertical" ? 0 : "100%",
+              minWidth: 0,
+              minHeight: 0
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              DeviceFrame,
+              {
+                device: deviceA,
+                orientation,
+                colorScheme,
+                showSafeAreaOverlay,
+                showScaleBar,
+                onContractReady: onContractReadyA,
+                children: childrenA ?? children
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              width: effectiveLayout === "horizontal" ? 0 : "100%",
+              height: effectiveLayout === "vertical" ? 0 : "100%",
+              minWidth: 0,
+              minHeight: 0
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              DeviceFrame,
+              {
+                device: deviceB,
+                orientation,
+                colorScheme,
+                showSafeAreaOverlay,
+                showScaleBar,
+                onContractReady: onContractReadyB,
+                children: childrenB ?? children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function SafeAreaView({ edges, children, style }) {
   const allEdges = !edges || edges.length === 0;
   const padding = {
@@ -1172,6 +1398,8 @@ var styles = {
   }
 };
 
+exports.CustomSVGStore = CustomSVGStore;
+exports.DeviceCompare = DeviceCompare;
 exports.DeviceErrorBoundary = DeviceErrorBoundary;
 exports.DeviceFrame = DeviceFrame;
 exports.DynamicStatusBar = DynamicStatusBar;
@@ -1185,6 +1413,7 @@ exports.VolumeHUD = VolumeHUD;
 exports.computeAdaptiveScale = computeAdaptiveScale;
 exports.computeFullScale = computeFullScale;
 exports.computeHostSize = computeHostSize;
+exports.getCustomSVGStore = getCustomSVGStore;
 exports.ptsToPercent = ptsToPercent;
 exports.ptsToPx = ptsToPx;
 exports.pxToPts = pxToPts;
@@ -1195,6 +1424,7 @@ exports.snapToStep = snapToStep;
 exports.useAdaptiveScale = useAdaptiveScale;
 exports.useContainerSize = useContainerSize;
 exports.useDeviceContract = useDeviceContract;
+exports.useOrientation = useOrientation;
 exports.useScreenPower = useScreenPower;
 exports.useVolumeControl = useVolumeControl;
 //# sourceMappingURL=index.cjs.map