@biela.dev/core 1.5.1 → 1.6.0

package/dist/index.d.cts

@@ -158,6 +158,27 @@ interface ScreenPowerState {
  */
 declare function useScreenPower(): ScreenPowerState;
 
+interface UseOrientationResult {
+    /** Current orientation */
+    orientation: "portrait" | "landscape";
+    /** Convenience boolean */
+    isLandscape: boolean;
+    /** Toggle between portrait and landscape */
+    toggle: () => void;
+    /** Set orientation directly */
+    setOrientation: (o: "portrait" | "landscape") => void;
+}
+/**
+ * Hook for managing device orientation state with a toggle function.
+ *
+ * ```tsx
+ * const { orientation, toggle } = useOrientation();
+ * <button onClick={toggle}>Rotate</button>
+ * <DeviceFrame deviceId="iphone-17-pro" orientation={orientation} />
+ * ```
+ */
+declare function useOrientation(initial?: "portrait" | "landscape"): UseOrientationResult;
+
 /**
  * Resolve device SVG component by ID.
  * This is a lookup registry — devices register their SVG components here.
@@ -256,6 +277,44 @@ interface DeviceFrameProps {
  */
 declare function DeviceFrame({ device: deviceProp, deviceId, orientation, scaleMode, manualScale, showSafeAreaOverlay, showScaleBar, colorScheme, onContractReady, onScaleChange, children, }: DeviceFrameProps): react_jsx_runtime.JSX.Element;
 
+interface DeviceCompareProps {
+    /** First device ID */
+    deviceA: string;
+    /** Second device ID */
+    deviceB: string;
+    /** Orientation for both devices */
+    orientation?: "portrait" | "landscape";
+    /** Frame color scheme */
+    colorScheme?: "light" | "dark";
+    /** Show safe area overlays */
+    showSafeAreaOverlay?: boolean;
+    /** Show scale bars */
+    showScaleBar?: boolean;
+    /** Layout direction — "auto" picks row for portrait, column for landscape */
+    layout?: "horizontal" | "vertical" | "auto";
+    /** Gap between the two frames in px (default: 24) */
+    gap?: number;
+    /** Content rendered inside BOTH device frames */
+    children?: ReactNode;
+    /** Content for device A only (overrides children for A) */
+    childrenA?: ReactNode;
+    /** Content for device B only (overrides children for B) */
+    childrenB?: ReactNode;
+    /** Callback when device A contract is ready */
+    onContractReadyA?: (dlc: DeviceLayoutContract) => void;
+    /** Callback when device B contract is ready */
+    onContractReadyB?: (dlc: DeviceLayoutContract) => void;
+}
+/**
+ * DeviceCompare — renders two device frames side-by-side for comparison.
+ *
+ * Layout defaults to "auto": horizontal (row) in portrait, vertical (column) in landscape.
+ * Each frame auto-scales independently to fit its half of the container.
+ *
+ * Must be placed inside a container with explicit width and height.
+ */
+declare function DeviceCompare({ deviceA, deviceB, orientation, colorScheme, showSafeAreaOverlay, showScaleBar, layout, gap, children, childrenA, childrenB, onContractReadyA, onContractReadyB, }: DeviceCompareProps): react_jsx_runtime.JSX.Element;
+
 interface Props {
     children: ReactNode;
     fallback?: ReactNode;
@@ -407,4 +466,46 @@ interface StatusBarIndicatorsProps {
  */
 declare function StatusBarIndicators({ platform, colorScheme }: StatusBarIndicatorsProps): react_jsx_runtime.JSX.Element;
 
-export { type AdaptiveScaleResult, type ButtonName, DeviceErrorBoundary, DeviceFrame, type DeviceFrameProps, DynamicStatusBar, HardwareButtons, SCALE_STEPS, type SVGCropArea, type SVGScreenRect, SafeAreaOverlay, SafeAreaView, ScaleBar, type ScreenPowerState, StatusBarIndicators, type UseAdaptiveScaleOptions, VolumeHUD, type VolumeState, computeAdaptiveScale, computeFullScale, computeHostSize, ptsToPercent, ptsToPx, pxToPts, registerCustomDeviceSVG, registerDeviceSVG, scaleValue, snapToStep, useAdaptiveScale, useContainerSize, useDeviceContract, useScreenPower, useVolumeControl };
+interface SVGOverrideEntry {
+    deviceId: string;
+    svgString: string;
+    bezelTop: number;
+    bezelBottom: number;
+    bezelLeft: number;
+    bezelRight: number;
+    screenRect?: SVGScreenRect;
+    updatedAt: string;
+}
+/**
+ * Persistent storage for custom SVG overrides.
+ *
+ * When a user uploads a custom SVG frame for a device, it's stored in
+ * localStorage and automatically applied on subsequent imports.
+ *
+ * SSR-safe: falls back to no-op storage when localStorage is unavailable.
+ */
+declare class CustomSVGStore {
+    private storage;
+    constructor(storage?: Storage | null);
+    /** Load all stored overrides */
+    getAll(): Record<string, SVGOverrideEntry>;
+    /** Save an override and register it in the SVG registry */
+    save(entry: SVGOverrideEntry): void;
+    /** Remove an override (revert to built-in) */
+    remove(deviceId: string): void;
+    /** Check if a device has a custom override */
+    has(deviceId: string): boolean;
+    /** Get a single override by device ID */
+    get(deviceId: string): SVGOverrideEntry | undefined;
+    /**
+     * Apply all stored overrides to the SVG registry.
+     * Called during auto-registration to restore user customizations.
+     */
+    applyAll(): void;
+    private applyEntry;
+    private persist;
+}
+/** Get the default CustomSVGStore instance (singleton, uses localStorage) */
+declare function getCustomSVGStore(): CustomSVGStore;
+
+export { type AdaptiveScaleResult, type ButtonName, CustomSVGStore, DeviceCompare, type DeviceCompareProps, DeviceErrorBoundary, DeviceFrame, type DeviceFrameProps, DynamicStatusBar, HardwareButtons, SCALE_STEPS, type SVGCropArea, type SVGOverrideEntry, type SVGScreenRect, SafeAreaOverlay, SafeAreaView, ScaleBar, type ScreenPowerState, StatusBarIndicators, type UseAdaptiveScaleOptions, type UseOrientationResult, VolumeHUD, type VolumeState, computeAdaptiveScale, computeFullScale, computeHostSize, getCustomSVGStore, ptsToPercent, ptsToPx, pxToPts, registerCustomDeviceSVG, registerDeviceSVG, scaleValue, snapToStep, useAdaptiveScale, useContainerSize, useDeviceContract, useOrientation, useScreenPower, useVolumeControl };

package/dist/index.d.ts

@@ -158,6 +158,27 @@ interface ScreenPowerState {
  */
 declare function useScreenPower(): ScreenPowerState;
 
+interface UseOrientationResult {
+    /** Current orientation */
+    orientation: "portrait" | "landscape";
+    /** Convenience boolean */
+    isLandscape: boolean;
+    /** Toggle between portrait and landscape */
+    toggle: () => void;
+    /** Set orientation directly */
+    setOrientation: (o: "portrait" | "landscape") => void;
+}
+/**
+ * Hook for managing device orientation state with a toggle function.
+ *
+ * ```tsx
+ * const { orientation, toggle } = useOrientation();
+ * <button onClick={toggle}>Rotate</button>
+ * <DeviceFrame deviceId="iphone-17-pro" orientation={orientation} />
+ * ```
+ */
+declare function useOrientation(initial?: "portrait" | "landscape"): UseOrientationResult;
+
 /**
  * Resolve device SVG component by ID.
  * This is a lookup registry — devices register their SVG components here.
@@ -256,6 +277,44 @@ interface DeviceFrameProps {
  */
 declare function DeviceFrame({ device: deviceProp, deviceId, orientation, scaleMode, manualScale, showSafeAreaOverlay, showScaleBar, colorScheme, onContractReady, onScaleChange, children, }: DeviceFrameProps): react_jsx_runtime.JSX.Element;
 
+interface DeviceCompareProps {
+    /** First device ID */
+    deviceA: string;
+    /** Second device ID */
+    deviceB: string;
+    /** Orientation for both devices */
+    orientation?: "portrait" | "landscape";
+    /** Frame color scheme */
+    colorScheme?: "light" | "dark";
+    /** Show safe area overlays */
+    showSafeAreaOverlay?: boolean;
+    /** Show scale bars */
+    showScaleBar?: boolean;
+    /** Layout direction — "auto" picks row for portrait, column for landscape */
+    layout?: "horizontal" | "vertical" | "auto";
+    /** Gap between the two frames in px (default: 24) */
+    gap?: number;
+    /** Content rendered inside BOTH device frames */
+    children?: ReactNode;
+    /** Content for device A only (overrides children for A) */
+    childrenA?: ReactNode;
+    /** Content for device B only (overrides children for B) */
+    childrenB?: ReactNode;
+    /** Callback when device A contract is ready */
+    onContractReadyA?: (dlc: DeviceLayoutContract) => void;
+    /** Callback when device B contract is ready */
+    onContractReadyB?: (dlc: DeviceLayoutContract) => void;
+}
+/**
+ * DeviceCompare — renders two device frames side-by-side for comparison.
+ *
+ * Layout defaults to "auto": horizontal (row) in portrait, vertical (column) in landscape.
+ * Each frame auto-scales independently to fit its half of the container.
+ *
+ * Must be placed inside a container with explicit width and height.
+ */
+declare function DeviceCompare({ deviceA, deviceB, orientation, colorScheme, showSafeAreaOverlay, showScaleBar, layout, gap, children, childrenA, childrenB, onContractReadyA, onContractReadyB, }: DeviceCompareProps): react_jsx_runtime.JSX.Element;
+
 interface Props {
     children: ReactNode;
     fallback?: ReactNode;
@@ -407,4 +466,46 @@ interface StatusBarIndicatorsProps {
  */
 declare function StatusBarIndicators({ platform, colorScheme }: StatusBarIndicatorsProps): react_jsx_runtime.JSX.Element;
 
-export { type AdaptiveScaleResult, type ButtonName, DeviceErrorBoundary, DeviceFrame, type DeviceFrameProps, DynamicStatusBar, HardwareButtons, SCALE_STEPS, type SVGCropArea, type SVGScreenRect, SafeAreaOverlay, SafeAreaView, ScaleBar, type ScreenPowerState, StatusBarIndicators, type UseAdaptiveScaleOptions, VolumeHUD, type VolumeState, computeAdaptiveScale, computeFullScale, computeHostSize, ptsToPercent, ptsToPx, pxToPts, registerCustomDeviceSVG, registerDeviceSVG, scaleValue, snapToStep, useAdaptiveScale, useContainerSize, useDeviceContract, useScreenPower, useVolumeControl };
+interface SVGOverrideEntry {
+    deviceId: string;
+    svgString: string;
+    bezelTop: number;
+    bezelBottom: number;
+    bezelLeft: number;
+    bezelRight: number;
+    screenRect?: SVGScreenRect;
+    updatedAt: string;
+}
+/**
+ * Persistent storage for custom SVG overrides.
+ *
+ * When a user uploads a custom SVG frame for a device, it's stored in
+ * localStorage and automatically applied on subsequent imports.
+ *
+ * SSR-safe: falls back to no-op storage when localStorage is unavailable.
+ */
+declare class CustomSVGStore {
+    private storage;
+    constructor(storage?: Storage | null);
+    /** Load all stored overrides */
+    getAll(): Record<string, SVGOverrideEntry>;
+    /** Save an override and register it in the SVG registry */
+    save(entry: SVGOverrideEntry): void;
+    /** Remove an override (revert to built-in) */
+    remove(deviceId: string): void;
+    /** Check if a device has a custom override */
+    has(deviceId: string): boolean;
+    /** Get a single override by device ID */
+    get(deviceId: string): SVGOverrideEntry | undefined;
+    /**
+     * Apply all stored overrides to the SVG registry.
+     * Called during auto-registration to restore user customizations.
+     */
+    applyAll(): void;
+    private applyEntry;
+    private persist;
+}
+/** Get the default CustomSVGStore instance (singleton, uses localStorage) */
+declare function getCustomSVGStore(): CustomSVGStore;
+
+export { type AdaptiveScaleResult, type ButtonName, CustomSVGStore, DeviceCompare, type DeviceCompareProps, DeviceErrorBoundary, DeviceFrame, type DeviceFrameProps, DynamicStatusBar, HardwareButtons, SCALE_STEPS, type SVGCropArea, type SVGOverrideEntry, type SVGScreenRect, SafeAreaOverlay, SafeAreaView, ScaleBar, type ScreenPowerState, StatusBarIndicators, type UseAdaptiveScaleOptions, type UseOrientationResult, VolumeHUD, type VolumeState, computeAdaptiveScale, computeFullScale, computeHostSize, getCustomSVGStore, ptsToPercent, ptsToPx, pxToPts, registerCustomDeviceSVG, registerDeviceSVG, scaleValue, snapToStep, useAdaptiveScale, useContainerSize, useDeviceContract, useOrientation, useScreenPower, useVolumeControl };

package/dist/index.js

@@ -1,20 +1,25 @@
-import { useState, useEffect, useMemo, useRef, useCallback, Component } from 'react';
-import { getDeviceContract, scopeSVGIds, getDeviceMetadata } from '@biela.dev/devices';
+import { useState, useEffect, useMemo, Component, useRef, useCallback } from 'react';
+import { scopeSVGIds, getDeviceMetadata, getDeviceContract, IPHONE_17_PRO_MAX_FRAME, IPhone17ProMaxSVG, IPHONE_17_PRO_FRAME, IPhone17ProSVG, IPHONE_AIR_FRAME, IPhoneAirSVG, IPHONE_16_FRAME, IPhone16SVG, IPHONE_16E_FRAME, IPhone16eSVG, IPHONE_SE_3_FRAME, IPhoneSE3SVG, GALAXY_S25_ULTRA_FRAME, GalaxyS25UltraSVG, GALAXY_S25_FRAME, GalaxyS25SVG, GALAXY_S25_EDGE_FRAME, GalaxyS25EdgeSVG, PIXEL_9_PRO_XL_FRAME, Pixel9ProXLSVG, PIXEL_9_PRO_FRAME, Pixel9ProSVG } from '@biela.dev/devices';
 import { jsxs, jsx, Fragment } from '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] = useState({ width: 0, height: 0 });
+  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
@@ -69,24 +74,8 @@ function computeFullScale(deviceWidth, deviceHeight, containerWidth, containerHe
     scalePercent: `${Math.round(scale * 100)}%`
   };
 }
-function useContainerSize(ref) {
-  const [size, setSize] = useState({ width: 0, height: 0 });
-  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,
@@ -107,72 +96,6 @@ function useAdaptiveScale(options) {
     [device.screen.width, device.screen.height, containerWidth, containerHeight, padding, maxScale, minScale, snapToSteps]
   );
 }
-function useDeviceContract(deviceId, orientation = "portrait") {
-  return useMemo(() => {
-    const contract = 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] = useState(initialVolume);
-  const [muted, setMuted] = useState(false);
-  const [hudVisible, setHudVisible] = useState(false);
-  const hudTimerRef = useRef(null);
-  const showHud = useCallback(() => {
-    setHudVisible(true);
-    if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
-    hudTimerRef.current = setTimeout(() => setHudVisible(false), HUD_DISPLAY_MS);
-  }, []);
-  const volumeUp = useCallback(() => {
-    setLevel((prev) => {
-      const next = Math.min(1, Math.round((prev + STEP_SIZE) * STEPS) / STEPS);
-      return next;
-    });
-    setMuted(false);
-    showHud();
-  }, [showHud]);
-  const volumeDown = useCallback(() => {
-    setLevel((prev) => {
-      const next = Math.max(0, Math.round((prev - STEP_SIZE) * STEPS) / STEPS);
-      return next;
-    });
-    setMuted(false);
-    showHud();
-  }, [showHud]);
-  const toggleMute = useCallback(() => {
-    setMuted((prev) => !prev);
-    showHud();
-  }, [showHud]);
-  const effectiveVolume = muted ? 0 : level;
-  useEffect(() => {
-    const container = document.querySelector(".bielaframe-content");
-    if (!container) return;
-    const mediaEls = container.querySelectorAll("audio, video");
-    mediaEls.forEach((el) => {
-      el.volume = effectiveVolume;
-    });
-  }, [effectiveVolume]);
-  useEffect(() => {
-    return () => {
-      if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
-    };
-  }, []);
-  return { level, muted, hudVisible, volumeUp, volumeDown, toggleMute };
-}
-function useScreenPower() {
-  const [isOff, setIsOff] = useState(false);
-  const toggle = useCallback(() => {
-    setIsOff((prev) => !prev);
-  }, []);
-  return { isOff, toggle };
-}
 var DeviceErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -789,6 +712,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 = 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", IPhone17ProMaxSVG, IPHONE_17_PRO_MAX_FRAME);
+registerDeviceSVG("iphone-17-pro", IPhone17ProSVG, IPHONE_17_PRO_FRAME);
+registerDeviceSVG("iphone-air", IPhoneAirSVG, IPHONE_AIR_FRAME);
+registerDeviceSVG("iphone-16", IPhone16SVG, IPHONE_16_FRAME);
+registerDeviceSVG("iphone-16e", IPhone16eSVG, IPHONE_16E_FRAME);
+registerDeviceSVG("iphone-se-3", IPhoneSE3SVG, IPHONE_SE_3_FRAME);
+registerDeviceSVG("galaxy-s25-ultra", GalaxyS25UltraSVG, GALAXY_S25_ULTRA_FRAME);
+registerDeviceSVG("galaxy-s25", GalaxyS25SVG, GALAXY_S25_FRAME);
+registerDeviceSVG("galaxy-s25-edge", GalaxyS25EdgeSVG, GALAXY_S25_EDGE_FRAME);
+registerDeviceSVG("pixel-9-pro-xl", Pixel9ProXLSVG, PIXEL_9_PRO_XL_FRAME);
+registerDeviceSVG("pixel-9-pro", Pixel9ProSVG, 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 useMemo(() => {
+    const contract = 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] = useState(initialVolume);
+  const [muted, setMuted] = useState(false);
+  const [hudVisible, setHudVisible] = useState(false);
+  const hudTimerRef = useRef(null);
+  const showHud = useCallback(() => {
+    setHudVisible(true);
+    if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
+    hudTimerRef.current = setTimeout(() => setHudVisible(false), HUD_DISPLAY_MS);
+  }, []);
+  const volumeUp = useCallback(() => {
+    setLevel((prev) => {
+      const next = Math.min(1, Math.round((prev + STEP_SIZE) * STEPS) / STEPS);
+      return next;
+    });
+    setMuted(false);
+    showHud();
+  }, [showHud]);
+  const volumeDown = useCallback(() => {
+    setLevel((prev) => {
+      const next = Math.max(0, Math.round((prev - STEP_SIZE) * STEPS) / STEPS);
+      return next;
+    });
+    setMuted(false);
+    showHud();
+  }, [showHud]);
+  const toggleMute = useCallback(() => {
+    setMuted((prev) => !prev);
+    showHud();
+  }, [showHud]);
+  const effectiveVolume = muted ? 0 : level;
+  useEffect(() => {
+    const container = document.querySelector(".bielaframe-content");
+    if (!container) return;
+    const mediaEls = container.querySelectorAll("audio, video");
+    mediaEls.forEach((el) => {
+      el.volume = effectiveVolume;
+    });
+  }, [effectiveVolume]);
+  useEffect(() => {
+    return () => {
+      if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
+    };
+  }, []);
+  return { level, muted, hudVisible, volumeUp, volumeDown, toggleMute };
+}
+function useScreenPower() {
+  const [isOff, setIsOff] = useState(false);
+  const toggle = useCallback(() => {
+    setIsOff((prev) => !prev);
+  }, []);
+  return { isOff, toggle };
+}
+function useOrientation(initial = "portrait") {
+  const [orientation, setOrientation] = useState(initial);
+  const toggle = 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__ */ jsxs(
+    "div",
+    {
+      className: "bielaframe-compare",
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection,
+        alignItems: "center",
+        justifyContent: "center",
+        gap,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              width: effectiveLayout === "horizontal" ? 0 : "100%",
+              height: effectiveLayout === "vertical" ? 0 : "100%",
+              minWidth: 0,
+              minHeight: 0
+            },
+            children: /* @__PURE__ */ jsx(
+              DeviceFrame,
+              {
+                device: deviceA,
+                orientation,
+                colorScheme,
+                showSafeAreaOverlay,
+                showScaleBar,
+                onContractReady: onContractReadyA,
+                children: childrenA ?? children
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              width: effectiveLayout === "horizontal" ? 0 : "100%",
+              height: effectiveLayout === "vertical" ? 0 : "100%",
+              minWidth: 0,
+              minHeight: 0
+            },
+            children: /* @__PURE__ */ 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 = {
@@ -1176,6 +1396,6 @@ var styles = {
   }
 };
 
-export { DeviceErrorBoundary, DeviceFrame, DynamicStatusBar, HardwareButtons, SCALE_STEPS, SafeAreaOverlay, SafeAreaView, ScaleBar, StatusBarIndicators, VolumeHUD, computeAdaptiveScale, computeFullScale, computeHostSize, ptsToPercent, ptsToPx, pxToPts, registerCustomDeviceSVG, registerDeviceSVG, scaleValue, snapToStep, useAdaptiveScale, useContainerSize, useDeviceContract, useScreenPower, useVolumeControl };
+export { CustomSVGStore, DeviceCompare, DeviceErrorBoundary, DeviceFrame, DynamicStatusBar, HardwareButtons, SCALE_STEPS, SafeAreaOverlay, SafeAreaView, ScaleBar, StatusBarIndicators, VolumeHUD, computeAdaptiveScale, computeFullScale, computeHostSize, getCustomSVGStore, ptsToPercent, ptsToPx, pxToPts, registerCustomDeviceSVG, registerDeviceSVG, scaleValue, snapToStep, useAdaptiveScale, useContainerSize, useDeviceContract, useOrientation, useScreenPower, useVolumeControl };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map