@biela.dev/core 0.1.0

package/dist/index.js

@@ -0,0 +1,1175 @@
+import { useState, useEffect, useMemo, useRef, useCallback, Component } from 'react';
+import { getDeviceContract, scopeSVGIds, getDeviceMetadata } 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/math/scale-engine.ts
+var SCALE_STEPS = [0.25, 0.33, 0.5, 0.75, 1];
+function computeAdaptiveScale(deviceWidth, deviceHeight, containerWidth, containerHeight, padding = 24, maxScale = 1, minScale = 0.1) {
+  const availW = containerWidth - padding * 2;
+  const availH = containerHeight - padding * 2;
+  if (availW <= 0 || availH <= 0) return minScale;
+  const scaleW = availW / deviceWidth;
+  const scaleH = availH / deviceHeight;
+  const raw = Math.min(scaleW, scaleH, maxScale);
+  return Math.max(raw, minScale);
+}
+function snapToStep(raw) {
+  const valid = SCALE_STEPS.filter((s) => s <= raw + 1e-3);
+  if (valid.length === 0) return raw;
+  return valid[valid.length - 1];
+}
+function computeHostSize(deviceWidth, deviceHeight, scale) {
+  return {
+    width: Math.round(deviceWidth * scale),
+    height: Math.round(deviceHeight * scale)
+  };
+}
+function computeFullScale(deviceWidth, deviceHeight, containerWidth, containerHeight, options = {}) {
+  const { padding = 24, maxScale = 1, minScale = 0.1, snapToSteps = false } = options;
+  let scale = computeAdaptiveScale(
+    deviceWidth,
+    deviceHeight,
+    containerWidth,
+    containerHeight,
+    padding,
+    maxScale,
+    minScale
+  );
+  if (snapToSteps) {
+    scale = snapToStep(scale);
+  }
+  const { width: scaledWidth, height: scaledHeight } = computeHostSize(
+    deviceWidth,
+    deviceHeight,
+    scale
+  );
+  return {
+    scale,
+    scaledWidth,
+    scaledHeight,
+    deviceWidth,
+    deviceHeight,
+    isAtMaxScale: scale >= maxScale - 1e-3,
+    isConstrained: scale < maxScale - 1e-3,
+    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;
+}
+function useAdaptiveScale(options) {
+  const {
+    device,
+    containerWidth,
+    containerHeight,
+    padding = 24,
+    maxScale = 1,
+    minScale = 0.1,
+    snapToSteps = false
+  } = options;
+  return useMemo(
+    () => computeFullScale(device.screen.width, device.screen.height, containerWidth, containerHeight, {
+      padding,
+      maxScale,
+      minScale,
+      snapToSteps
+    }),
+    [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);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[BielaFrame] Component error caught by boundary:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            height: "100%",
+            padding: "24px",
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+            color: "#ef4444",
+            backgroundColor: "#1a1a1a",
+            textAlign: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "32px", marginBottom: "12px" }, children: "!" }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600, marginBottom: "8px" }, children: "Component Error" }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "#888", maxWidth: "280px", lineHeight: 1.4 }, children: this.state.error?.message ?? "An unexpected error occurred in the rendered component." })
+          ]
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+function SafeAreaOverlay({ contract, orientation }) {
+  const sa = contract.safeArea[orientation];
+  const cz = contract.contentZone[orientation];
+  const screen = contract.screen;
+  const overlay = contract.hardwareOverlays;
+  const base = {
+    position: "absolute",
+    pointerEvents: "none",
+    boxSizing: "border-box"
+  };
+  const labelStyle = {
+    position: "absolute",
+    fontSize: "9px",
+    fontFamily: "monospace",
+    color: "white",
+    textShadow: "0 1px 2px rgba(0,0,0,0.8)",
+    whiteSpace: "nowrap"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        zIndex: 20
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...base,
+              top: 0,
+              left: 0,
+              right: 0,
+              height: `${contract.statusBar.height}px`,
+              backgroundColor: "rgba(239, 68, 68, 0.25)",
+              borderBottom: "1px dashed rgba(239, 68, 68, 0.6)"
+            },
+            children: /* @__PURE__ */ jsxs("span", { style: { ...labelStyle, top: "2px", left: "4px" }, children: [
+              "status: ",
+              contract.statusBar.height,
+              "pt"
+            ] })
+          }
+        ),
+        overlay.type !== "none" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...base,
+              left: `${overlay.portrait.x}px`,
+              top: `${overlay.portrait.y}px`,
+              width: `${overlay.portrait.width}px`,
+              height: `${overlay.portrait.height}px`,
+              backgroundColor: "rgba(249, 115, 22, 0.35)",
+              border: "1px solid rgba(249, 115, 22, 0.7)",
+              borderRadius: overlay.portrait.shape === "pill" ? `${overlay.portrait.height / 2}px` : overlay.portrait.shape === "circle" ? "50%" : "4px"
+            },
+            children: /* @__PURE__ */ jsxs("span", { style: { ...labelStyle, top: "-14px", left: "0px" }, children: [
+              overlay.type,
+              ": ",
+              overlay.portrait.width,
+              "\xD7",
+              overlay.portrait.height
+            ] })
+          }
+        ),
+        sa.top > contract.statusBar.height && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...base,
+              top: `${contract.statusBar.height}px`,
+              left: 0,
+              right: 0,
+              height: `${sa.top - contract.statusBar.height}px`,
+              backgroundColor: "rgba(239, 68, 68, 0.15)",
+              borderBottom: "1px dashed rgba(239, 68, 68, 0.4)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...base,
+              left: `${cz.x}px`,
+              top: `${cz.y}px`,
+              width: `${cz.width}px`,
+              height: `${cz.height}px`,
+              backgroundColor: "rgba(34, 197, 94, 0.08)",
+              border: "1px dashed rgba(34, 197, 94, 0.4)"
+            },
+            children: /* @__PURE__ */ jsxs("span", { style: { ...labelStyle, bottom: "2px", right: "4px" }, children: [
+              "content: ",
+              cz.width,
+              "\xD7",
+              cz.height,
+              "pt"
+            ] })
+          }
+        ),
+        sa.bottom > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...base,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: `${sa.bottom}px`,
+              backgroundColor: "rgba(239, 68, 68, 0.25)",
+              borderTop: "1px dashed rgba(239, 68, 68, 0.6)"
+            },
+            children: /* @__PURE__ */ jsxs("span", { style: { ...labelStyle, bottom: "2px", right: "4px" }, children: [
+              "bottom: ",
+              sa.bottom,
+              "pt"
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { style: { ...labelStyle, top: `${sa.top + 2}px`, left: "4px" }, children: [
+          "safe-top: ",
+          sa.top,
+          "pt"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { style: { ...labelStyle, bottom: `${sa.bottom + 2}px`, left: "4px" }, children: [
+          "safe-bottom: ",
+          sa.bottom,
+          "pt"
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              ...labelStyle,
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              fontSize: "11px",
+              backgroundColor: "rgba(0,0,0,0.6)",
+              padding: "2px 6px",
+              borderRadius: "3px"
+            },
+            children: [
+              screen.width,
+              "\xD7",
+              screen.height,
+              "pt"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ScaleBar({
+  deviceName,
+  deviceWidth,
+  deviceHeight,
+  scale,
+  scalePercent,
+  isAtMaxScale,
+  isConstrained,
+  onScaleChange,
+  onFit,
+  onRealSize
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `Scale bar for ${deviceName}`,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        padding: "6px 12px",
+        marginTop: "8px",
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        borderRadius: "8px",
+        fontSize: "11px",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Mono', 'Fira Code', monospace",
+        color: "#ccc",
+        userSelect: "none",
+        width: "fit-content",
+        alignSelf: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontWeight: 500 }, children: deviceName }),
+        /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "\xB7" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          deviceWidth,
+          "\xD7",
+          deviceHeight,
+          "pt"
+        ] }),
+        /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "|" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            role: "slider",
+            "aria-label": "Device scale",
+            "aria-valuenow": Math.round(scale * 100),
+            "aria-valuemin": 10,
+            "aria-valuemax": 100,
+            min: 10,
+            max: 100,
+            step: 1,
+            value: Math.round(scale * 100),
+            onChange: (e) => onScaleChange?.(Number(e.target.value) / 100),
+            style: {
+              width: "80px",
+              accentColor: "#3b82f6",
+              cursor: "pointer"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", style: { minWidth: "32px", textAlign: "center", fontWeight: 600 }, children: scalePercent }),
+        /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "|" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onFit,
+            "aria-label": "Fit device to container",
+            style: {
+              background: isConstrained ? "rgba(59, 130, 246, 0.2)" : "transparent",
+              border: "1px solid rgba(59, 130, 246, 0.4)",
+              borderRadius: "4px",
+              color: isConstrained ? "#60a5fa" : "#666",
+              fontSize: "10px",
+              padding: "2px 6px",
+              cursor: "pointer",
+              fontWeight: isConstrained ? 600 : 400
+            },
+            children: "Fit"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onRealSize,
+            "aria-label": "Show at real device size",
+            style: {
+              background: isAtMaxScale ? "rgba(234, 179, 8, 0.2)" : "transparent",
+              border: `1px solid ${isAtMaxScale ? "rgba(234, 179, 8, 0.6)" : "rgba(102, 102, 102, 0.4)"}`,
+              borderRadius: "4px",
+              color: isAtMaxScale ? "#eab308" : "#666",
+              fontSize: "10px",
+              padding: "2px 6px",
+              cursor: "pointer",
+              fontWeight: isAtMaxScale ? 600 : 400
+            },
+            children: "1:1"
+          }
+        )
+      ]
+    }
+  );
+}
+var SVG_REGISTRY = {};
+function registerDeviceSVG(deviceId, component, frame) {
+  SVG_REGISTRY[deviceId] = { component, frame };
+}
+function registerCustomDeviceSVG(deviceId, svgString, frame, cropViewBox, screenRect) {
+  const scopedSVG = scopeSVGIds(svgString, deviceId);
+  let processedSVG = scopedSVG.replace(
+    /<svg\b([^>]*)>/i,
+    (_match, attrs) => {
+      if (cropViewBox) {
+        attrs = attrs.replace(/\bviewBox\s*=\s*["'][^"']*["']/gi, "");
+        attrs += ` viewBox="${cropViewBox.x} ${cropViewBox.y} ${cropViewBox.width} ${cropViewBox.height}"`;
+      } else if (!/viewBox/i.test(attrs)) {
+        const wMatch = attrs.match(/\bwidth\s*=\s*["']?(\d+\.?\d*)["']?/i);
+        const hMatch = attrs.match(/\bheight\s*=\s*["']?(\d+\.?\d*)["']?/i);
+        if (wMatch && hMatch) {
+          attrs += ` viewBox="0 0 ${wMatch[1]} ${hMatch[1]}"`;
+        }
+      }
+      let cleaned = attrs.replace(/\bwidth\s*=\s*["'][^"']*["']/gi, "").replace(/\bheight\s*=\s*["'][^"']*["']/gi, "");
+      if (!/preserveAspectRatio/i.test(cleaned)) {
+        cleaned += ` preserveAspectRatio="xMidYMid meet"`;
+      }
+      return `<svg${cleaned} width="100%" height="100%">`;
+    }
+  );
+  if (screenRect) {
+    const { x: sx, y: sy, width: sw, height: sh, rx: sr } = screenRect;
+    const r = sr ?? 0;
+    const vbMatch = processedSVG.match(/viewBox\s*=\s*["']([^"']+)["']/i);
+    let svgW = 1e4, svgH = 1e4;
+    if (vbMatch) {
+      const parts = vbMatch[1].split(/[\s,]+/).map(Number);
+      if (parts.length >= 4) {
+        svgW = parts[2];
+        svgH = parts[3];
+      }
+    }
+    const maskId = `${deviceId}__screen-mask`;
+    let innerPath;
+    if (r > 0) {
+      innerPath = `M${sx + r},${sy} H${sx + sw - r} A${r},${r} 0 0 1 ${sx + sw},${sy + r} V${sy + sh - r} A${r},${r} 0 0 1 ${sx + sw - r},${sy + sh} H${sx + r} A${r},${r} 0 0 1 ${sx},${sy + sh - r} V${sy + r} A${r},${r} 0 0 1 ${sx + r},${sy} Z`;
+    } else {
+      innerPath = `M${sx},${sy} V${sy + sh} H${sx + sw} V${sy} Z`;
+    }
+    const maskDef = `<mask id="${maskId}" maskUnits="userSpaceOnUse" x="0" y="0" width="${svgW}" height="${svgH}"><path fill-rule="evenodd" d="M0,0 H${svgW} V${svgH} H0 Z ${innerPath}" fill="white"/></mask>`;
+    if (/<defs[\s>]/i.test(processedSVG)) {
+      processedSVG = processedSVG.replace(/<\/defs>/i, `${maskDef}</defs>`);
+    } else {
+      processedSVG = processedSVG.replace(
+        /(<svg\b[^>]*>)/i,
+        `$1<defs>${maskDef}</defs>`
+      );
+    }
+    const defsMatch = processedSVG.match(/(<defs[\s>][\s\S]*?<\/defs>)/i);
+    const defsContent = defsMatch ? defsMatch[1] : "";
+    const defsPlaceholder = "<!--BIELAFRAME_DEFS_PLACEHOLDER-->";
+    let bodySVG = defsMatch ? processedSVG.replace(defsContent, defsPlaceholder) : processedSVG;
+    bodySVG = bodySVG.replace(/<rect\b([^>]*?)\/?>/gi, (fullMatch, attrs) => {
+      if (/\bmask\s*=/i.test(fullMatch)) return fullMatch;
+      const xVal = parseFloat(attrs.match(/\bx\s*=\s*["']?(-?\d+\.?\d*)["']?/i)?.[1] ?? "0");
+      const yVal = parseFloat(attrs.match(/\by\s*=\s*["']?(-?\d+\.?\d*)["']?/i)?.[1] ?? "0");
+      const wVal = parseFloat(attrs.match(/\bwidth\s*=\s*["']?(\d+\.?\d*)["']?/i)?.[1] ?? "0");
+      const hVal = parseFloat(attrs.match(/\bheight\s*=\s*["']?(\d+\.?\d*)["']?/i)?.[1] ?? "0");
+      if (wVal > 0 && hVal > 0 && xVal <= sx + 2 && yVal <= sy + 2 && xVal + wVal >= sx + sw - 2 && yVal + hVal >= sy + sh - 2) {
+        return fullMatch.replace(/(\/?>)$/, ` mask="url(#${maskId})"$1`);
+      }
+      return fullMatch;
+    });
+    processedSVG = bodySVG.replace(defsPlaceholder, defsContent);
+  }
+  const CustomSVGComponent = ({ style }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style,
+      dangerouslySetInnerHTML: { __html: processedSVG }
+    }
+  );
+  SVG_REGISTRY[deviceId] = { component: CustomSVGComponent, frame };
+}
+function DeviceFrame({
+  device,
+  orientation = "portrait",
+  scaleMode = "fit",
+  manualScale,
+  showSafeAreaOverlay = false,
+  showScaleBar = true,
+  colorScheme = "dark",
+  onContractReady,
+  onScaleChange,
+  children
+}) {
+  const sentinelRef = useRef(null);
+  const frameOverlayRef = useRef(null);
+  const hostRef = useRef(null);
+  const scalerRef = useRef(null);
+  const { width: containerW, height: containerH } = useContainerSize(sentinelRef);
+  const deviceLookup = useMemo(() => {
+    try {
+      return {
+        meta: getDeviceMetadata(device),
+        contract: getDeviceContract(device, orientation),
+        error: null
+      };
+    } catch {
+      return { meta: null, contract: null, error: device };
+    }
+  }, [device, orientation]);
+  if (deviceLookup.error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: sentinelRef,
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#ef4444",
+          fontFamily: "monospace",
+          fontSize: "14px"
+        },
+        children: [
+          'Device not found: "',
+          deviceLookup.error,
+          '"'
+        ]
+      }
+    );
+  }
+  const deviceMeta = deviceLookup.meta;
+  const contract = deviceLookup.contract;
+  const svgEntry = SVG_REGISTRY[device];
+  const [overrideScale, setOverrideScale] = useState(null);
+  const effectiveMaxScale = scaleMode === "manual" && manualScale != null ? manualScale : 1;
+  const frameInfo = svgEntry?.frame;
+  const frameTotalW = frameInfo?.totalWidth ?? deviceMeta.screen.width;
+  const frameTotalH = frameInfo?.totalHeight ?? deviceMeta.screen.height;
+  const frameBezelLeft = frameInfo?.bezelLeft ?? 0;
+  const frameBezelTop = frameInfo?.bezelTop ?? 0;
+  const isLandscape = orientation === "landscape";
+  const effectiveHostW = isLandscape ? frameTotalH : frameTotalW;
+  const effectiveHostH = isLandscape ? frameTotalW : frameTotalH;
+  const scaleDevice = useMemo(() => ({
+    ...deviceMeta,
+    screen: {
+      ...deviceMeta.screen,
+      width: effectiveHostW,
+      height: effectiveHostH
+    }
+  }), [device, effectiveHostW, effectiveHostH]);
+  const scaleResult = useAdaptiveScale({
+    device: scaleDevice,
+    containerWidth: scaleMode === "manual" ? Infinity : containerW,
+    containerHeight: scaleMode === "manual" ? Infinity : containerH,
+    maxScale: effectiveMaxScale,
+    snapToSteps: scaleMode === "steps"
+  });
+  const activeScale = overrideScale ?? scaleResult.scale;
+  const hostWidth = Math.round(effectiveHostW * activeScale);
+  const hostHeight = Math.round(effectiveHostH * activeScale);
+  const scalerTransform = isLandscape ? `scale(${activeScale}) translate(0px, ${frameTotalW}px) rotate(-90deg)` : `scale(${activeScale}) translate(0px, 0px) rotate(0deg)`;
+  const cssVarStyle = useMemo(() => {
+    const vars = {};
+    for (const [key, value] of Object.entries(contract.cssVariables)) {
+      vars[key] = value;
+    }
+    if (isLandscape) {
+      const lsa = contract.safeArea.landscape;
+      vars["--safe-top"] = `${lsa.top}px`;
+      vars["--safe-bottom"] = `${lsa.bottom}px`;
+      vars["--safe-left"] = `${lsa.left}px`;
+      vars["--safe-right"] = `${lsa.right}px`;
+    }
+    return vars;
+  }, [device, orientation]);
+  const onContractReadyRef = useRef(onContractReady);
+  onContractReadyRef.current = onContractReady;
+  const onScaleChangeRef = useRef(onScaleChange);
+  onScaleChangeRef.current = onScaleChange;
+  useEffect(() => {
+    onContractReadyRef.current?.(contract);
+  }, [device, orientation]);
+  useEffect(() => {
+    onScaleChangeRef.current?.(activeScale);
+  }, [activeScale]);
+  const DeviceSVGComponent = svgEntry?.component;
+  const hasMeasured = containerW > 0 && containerH > 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: sentinelRef,
+      className: "bielaframe-sentinel",
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden"
+      },
+      children: hasMeasured && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: hostRef,
+            className: "bielaframe-host",
+            "aria-label": `${contract.device.name} device frame at ${Math.round(activeScale * 100)}% scale`,
+            style: {
+              width: hostWidth,
+              height: hostHeight,
+              position: "relative",
+              flexShrink: 0,
+              transition: "width 400ms cubic-bezier(0.4, 0, 0.2, 1), height 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: scalerRef,
+                className: "bielaframe-scaler",
+                style: {
+                  width: frameTotalW,
+                  height: frameTotalH,
+                  transform: scalerTransform,
+                  transformOrigin: "top left",
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  willChange: "transform",
+                  transition: "transform 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "bielaframe-content",
+                      style: {
+                        position: "absolute",
+                        left: frameBezelLeft,
+                        top: frameBezelTop,
+                        width: deviceMeta.screen.width,
+                        height: deviceMeta.screen.height,
+                        clipPath: `inset(0 round ${contract.screen.cornerRadius}px)`,
+                        overflow: "hidden",
+                        backfaceVisibility: "hidden",
+                        transform: "translateZ(0)",
+                        ...cssVarStyle
+                      },
+                      children: /* @__PURE__ */ jsx(DeviceErrorBoundary, { children })
+                    }
+                  ),
+                  DeviceSVGComponent && /* @__PURE__ */ jsx("div", { ref: frameOverlayRef, children: /* @__PURE__ */ jsx(
+                    DeviceSVGComponent,
+                    {
+                      colorScheme,
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: frameTotalW,
+                        height: frameTotalH,
+                        pointerEvents: "none",
+                        zIndex: 10
+                      }
+                    }
+                  ) }),
+                  showSafeAreaOverlay && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        left: frameBezelLeft,
+                        top: frameBezelTop,
+                        width: deviceMeta.screen.width,
+                        height: deviceMeta.screen.height,
+                        pointerEvents: "none",
+                        zIndex: 15
+                      },
+                      children: /* @__PURE__ */ jsx(SafeAreaOverlay, { contract, orientation })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        showScaleBar && /* @__PURE__ */ jsx(
+          ScaleBar,
+          {
+            deviceName: contract.device.name,
+            deviceWidth: deviceMeta.screen.width,
+            deviceHeight: deviceMeta.screen.height,
+            scale: activeScale,
+            scalePercent: `${Math.round(activeScale * 100)}%`,
+            isAtMaxScale: activeScale >= 0.999,
+            isConstrained: activeScale < 0.999,
+            onScaleChange: (s) => setOverrideScale(s),
+            onFit: () => setOverrideScale(null),
+            onRealSize: () => setOverrideScale(1)
+          }
+        )
+      ] })
+    }
+  );
+}
+function SafeAreaView({ edges, children, style }) {
+  const allEdges = !edges || edges.length === 0;
+  const padding = {
+    paddingTop: allEdges || edges?.includes("top") ? "var(--safe-top)" : void 0,
+    paddingBottom: allEdges || edges?.includes("bottom") ? "var(--safe-bottom)" : void 0,
+    paddingLeft: allEdges || edges?.includes("left") ? "var(--safe-left)" : void 0,
+    paddingRight: allEdges || edges?.includes("right") ? "var(--safe-right)" : void 0
+  };
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%", boxSizing: "border-box", ...padding, ...style }, children });
+}
+function VolumeHUD({ level, muted, visible, platform }) {
+  if (platform === "ios") {
+    return /* @__PURE__ */ jsx(IOSVolumeHUD, { level, muted, visible });
+  }
+  return /* @__PURE__ */ jsx(AndroidVolumeHUD, { level, muted, visible });
+}
+function IOSVolumeHUD({ level, muted, visible }) {
+  const fillPercent = muted ? 0 : level * 100;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        ...iosStyles.container,
+        opacity: visible ? 1 : 0,
+        pointerEvents: "none",
+        transition: visible ? "opacity 100ms ease-in" : "opacity 300ms ease-out"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: iosStyles.track, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...iosStyles.fill,
+              height: `${fillPercent}%`
+            }
+          }
+        ) }),
+        muted && /* @__PURE__ */ jsx("div", { style: iosStyles.muteIcon, children: /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: [
+          /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "9", y2: "9", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx("line", { x1: "9", y1: "1", x2: "1", y2: "9", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })
+        ] }) })
+      ]
+    }
+  );
+}
+function AndroidVolumeHUD({ level, muted, visible }) {
+  const fillPercent = muted ? 0 : level * 100;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        ...androidStyles.container,
+        opacity: visible ? 1 : 0,
+        pointerEvents: "none",
+        transition: visible ? "opacity 100ms ease-in" : "opacity 300ms ease-out"
+      },
+      children: /* @__PURE__ */ jsx("div", { style: androidStyles.track, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            ...androidStyles.fill,
+            width: `${fillPercent}%`
+          }
+        }
+      ) })
+    }
+  );
+}
+var iosStyles = {
+  container: {
+    position: "absolute",
+    left: 8,
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 60,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 4
+  },
+  track: {
+    width: 6,
+    height: 160,
+    borderRadius: 3,
+    background: "rgba(255, 255, 255, 0.15)",
+    backdropFilter: "blur(20px)",
+    WebkitBackdropFilter: "blur(20px)",
+    overflow: "hidden",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-end",
+    border: "0.5px solid rgba(255, 255, 255, 0.2)"
+  },
+  fill: {
+    width: "100%",
+    background: "rgba(255, 255, 255, 0.85)",
+    borderRadius: 3,
+    transition: "height 80ms ease-out"
+  },
+  muteIcon: {
+    marginTop: 2
+  }
+};
+var androidStyles = {
+  container: {
+    position: "absolute",
+    top: 8,
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 60,
+    width: "60%"
+  },
+  track: {
+    width: "100%",
+    height: 4,
+    borderRadius: 2,
+    background: "rgba(255, 255, 255, 0.2)",
+    overflow: "hidden"
+  },
+  fill: {
+    height: "100%",
+    background: "rgba(255, 255, 255, 0.85)",
+    borderRadius: 2,
+    transition: "width 80ms ease-out"
+  }
+};
+var BUTTON_ATTR_MAP = {
+  "volume-up": "volumeUp",
+  "volume-down": "volumeDown",
+  "power": "power",
+  "action": "actionButton",
+  "camera": "cameraControl"
+};
+var PRESS_ANIMATION_IN = 80;
+var PRESS_ANIMATION_OUT = 120;
+var REPEAT_INITIAL_DELAY = 500;
+var REPEAT_INTERVAL = 150;
+var REPEAT_FAST_INTERVAL = 80;
+var REPEAT_FAST_THRESHOLD = 1e3;
+function HardwareButtons({
+  frameContainerRef,
+  onButtonPress,
+  enabled = true,
+  orientation = "portrait"
+}) {
+  const [hitTargets, setHitTargets] = useState([]);
+  const repeatTimerRef = useRef(null);
+  const repeatIntervalRef = useRef(null);
+  const pressStartRef = useRef(0);
+  const clearRepeat = useCallback(() => {
+    if (repeatTimerRef.current) {
+      clearTimeout(repeatTimerRef.current);
+      repeatTimerRef.current = null;
+    }
+    if (repeatIntervalRef.current) {
+      clearInterval(repeatIntervalRef.current);
+      repeatIntervalRef.current = null;
+    }
+  }, []);
+  const discoverButtons = useCallback(() => {
+    const container = frameContainerRef.current;
+    if (!container) return false;
+    const buttonEls = container.querySelectorAll("[data-button]");
+    if (buttonEls.length === 0) return false;
+    const targets = [];
+    const seen = /* @__PURE__ */ new Set();
+    buttonEls.forEach((el) => {
+      const attrValue = el.getAttribute("data-button");
+      if (!attrValue) return;
+      const buttonName = BUTTON_ATTR_MAP[attrValue];
+      if (!buttonName) return;
+      if (seen.has(buttonName)) return;
+      seen.add(buttonName);
+      const side = el.getAttribute("data-side") || "right";
+      let localLeft, localTop, localWidth, localHeight;
+      const tag = el.tagName.toLowerCase();
+      if (tag === "circle") {
+        const cx = parseFloat(el.getAttribute("cx") || "0");
+        const cy = parseFloat(el.getAttribute("cy") || "0");
+        const r = parseFloat(el.getAttribute("r") || "0");
+        localLeft = cx - r;
+        localTop = cy - r;
+        localWidth = r * 2;
+        localHeight = r * 2;
+      } else {
+        localLeft = parseFloat(el.getAttribute("x") || "0");
+        localTop = parseFloat(el.getAttribute("y") || "0");
+        localWidth = parseFloat(el.getAttribute("width") || "0");
+        localHeight = parseFloat(el.getAttribute("height") || "0");
+      }
+      if (localWidth <= 0 && localHeight <= 0) return;
+      const pad = 10;
+      targets.push({
+        name: buttonName,
+        side,
+        top: localTop - pad,
+        left: localLeft - pad,
+        width: localWidth + pad * 2,
+        height: localHeight + pad * 2,
+        svgEl: el
+      });
+    });
+    setHitTargets(targets);
+    return targets.length > 0;
+  }, [frameContainerRef]);
+  useEffect(() => {
+    if (!enabled) return;
+    if (discoverButtons()) return;
+    let retryCount = 0;
+    const maxRetries = 10;
+    let timer;
+    const retry = () => {
+      if (retryCount >= maxRetries) return;
+      retryCount++;
+      timer = setTimeout(() => {
+        if (!discoverButtons()) retry();
+      }, retryCount < 3 ? 100 : 300);
+    };
+    retry();
+    return () => clearTimeout(timer);
+  }, [enabled, orientation, discoverButtons]);
+  const applyPress = useCallback((target) => {
+    const pressOffset = target.side === "left" ? "-2px" : "2px";
+    const el = target.svgEl;
+    el.style.transform = `translateX(${pressOffset})`;
+    el.style.opacity = "0.7";
+    el.style.transition = `transform ${PRESS_ANIMATION_IN}ms ease-out, opacity ${PRESS_ANIMATION_IN}ms ease-out`;
+  }, []);
+  const releasePress = useCallback((target) => {
+    const el = target.svgEl;
+    el.style.transform = "";
+    el.style.opacity = "";
+    el.style.transition = `transform ${PRESS_ANIMATION_OUT}ms ease-in, opacity ${PRESS_ANIMATION_OUT}ms ease-in`;
+  }, []);
+  const startRepeat = useCallback((target) => {
+    const isVolumeButton = target.name === "volumeUp" || target.name === "volumeDown";
+    if (!isVolumeButton) return;
+    pressStartRef.current = Date.now();
+    repeatTimerRef.current = setTimeout(() => {
+      repeatIntervalRef.current = setInterval(() => {
+        onButtonPress?.(target.name);
+        const elapsed = Date.now() - pressStartRef.current;
+        if (elapsed > REPEAT_FAST_THRESHOLD && repeatIntervalRef.current) {
+          clearInterval(repeatIntervalRef.current);
+          repeatIntervalRef.current = setInterval(() => {
+            onButtonPress?.(target.name);
+          }, REPEAT_FAST_INTERVAL);
+        }
+      }, REPEAT_INTERVAL);
+    }, REPEAT_INITIAL_DELAY);
+  }, [onButtonPress, clearRepeat]);
+  if (!enabled || hitTargets.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: hitTargets.map((target) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: target.top,
+        left: target.left,
+        width: target.width,
+        height: target.height,
+        cursor: "pointer",
+        zIndex: 11,
+        // Transparent but clickable
+        background: "transparent"
+      },
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        applyPress(target);
+        onButtonPress?.(target.name);
+        startRepeat(target);
+      },
+      onMouseUp: (e) => {
+        e.preventDefault();
+        releasePress(target);
+        clearRepeat();
+      },
+      onMouseLeave: () => {
+        releasePress(target);
+        clearRepeat();
+      },
+      onTouchStart: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        applyPress(target);
+        onButtonPress?.(target.name);
+        startRepeat(target);
+      },
+      onTouchEnd: (e) => {
+        e.preventDefault();
+        releasePress(target);
+        clearRepeat();
+      }
+    },
+    target.name
+  )) });
+}
+function formatTime(date) {
+  const h = date.getHours();
+  const m = date.getMinutes();
+  const hour = h % 12 || 12;
+  return `${hour}:${m.toString().padStart(2, "0")}`;
+}
+function DynamicStatusBar({
+  contract,
+  orientation,
+  colorScheme,
+  showLiveClock = true,
+  fixedTime
+}) {
+  const [time, setTime] = useState(() => formatTime(/* @__PURE__ */ new Date()));
+  useEffect(() => {
+    if (fixedTime || !showLiveClock) return;
+    const interval = setInterval(() => {
+      setTime(formatTime(/* @__PURE__ */ new Date()));
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [fixedTime, showLiveClock]);
+  if (orientation === "landscape" && contract.device.platform === "ios") {
+    return null;
+  }
+  const displayTime = fixedTime ?? time;
+  const { platform } = contract.device;
+  const statusBarHeight = contract.statusBar.height;
+  const statusBarStyle = contract.statusBar.style;
+  const textColor = colorScheme === "dark" ? "#fff" : "#000";
+  const bgColor = colorScheme === "dark" ? "#000" : "#fff";
+  const fontFamily = platform === "ios" ? "-apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif" : "'Roboto', 'Google Sans', sans-serif";
+  const baseFontSize = platform === "ios" ? 15 : 12;
+  const clockStyle = {
+    color: textColor,
+    fontFamily,
+    fontSize: baseFontSize,
+    fontWeight: platform === "ios" ? 600 : 400,
+    letterSpacing: platform === "ios" ? 0.3 : 0,
+    lineHeight: `${statusBarHeight}px`,
+    whiteSpace: "nowrap"
+  };
+  const patchStyle = {
+    position: "absolute",
+    top: 0,
+    height: statusBarHeight,
+    display: "flex",
+    alignItems: "center",
+    background: bgColor,
+    pointerEvents: "none"
+  };
+  if (platform === "ios" && statusBarStyle !== "dynamic-island" && statusBarStyle !== "notch") {
+    return /* @__PURE__ */ jsx("div", { style: { ...patchStyle, left: "50%", transform: "translateX(-50%)", paddingLeft: 6, paddingRight: 6 }, children: /* @__PURE__ */ jsx("span", { style: { ...clockStyle, fontWeight: 500, fontSize: baseFontSize - 1 }, children: displayTime }) });
+  }
+  if (platform === "ios") {
+    return /* @__PURE__ */ jsx("div", { style: { ...patchStyle, left: 0, paddingLeft: 20, paddingRight: 8 }, children: /* @__PURE__ */ jsx("span", { style: clockStyle, children: displayTime }) });
+  }
+  return /* @__PURE__ */ jsx("div", { style: { ...patchStyle, left: 0, paddingLeft: 16, paddingRight: 8 }, children: /* @__PURE__ */ jsx("span", { style: clockStyle, children: displayTime }) });
+}
+function StatusBarIndicators({ platform, colorScheme }) {
+  const color = colorScheme === "dark" ? "#fff" : "#000";
+  return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsxs("svg", { width: "17", height: "11", viewBox: "0 0 17 11", fill: "none", children: [
+      /* @__PURE__ */ jsx("rect", { x: "0", y: "7", width: "3", height: "4", rx: "0.5", fill: color, opacity: "0.4" }),
+      /* @__PURE__ */ jsx("rect", { x: "4.5", y: "5", width: "3", height: "6", rx: "0.5", fill: color, opacity: "0.6" }),
+      /* @__PURE__ */ jsx("rect", { x: "9", y: "2.5", width: "3", height: "8.5", rx: "0.5", fill: color, opacity: "0.8" }),
+      /* @__PURE__ */ jsx("rect", { x: "13.5", y: "0", width: "3", height: "11", rx: "0.5", fill: color })
+    ] }),
+    /* @__PURE__ */ jsxs("svg", { width: "15", height: "11", viewBox: "0 0 15 11", fill: "none", style: { marginLeft: 5 }, children: [
+      /* @__PURE__ */ jsx("path", { d: "M7.5 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z", fill: color }),
+      /* @__PURE__ */ jsx("path", { d: "M4.5 7.5a4.2 4.2 0 0 1 6 0", stroke: color, strokeWidth: "1.2", strokeLinecap: "round", fill: "none" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 5a7.1 7.1 0 0 1 11 0", stroke: color, strokeWidth: "1.2", strokeLinecap: "round", fill: "none" }),
+      /* @__PURE__ */ jsx("path", { d: "M0 2.5a10 10 0 0 1 15 0", stroke: color, strokeWidth: "1.2", strokeLinecap: "round", fill: "none" })
+    ] }),
+    /* @__PURE__ */ jsxs("svg", { width: "25", height: "12", viewBox: "0 0 25 12", fill: "none", style: { marginLeft: 5 }, children: [
+      /* @__PURE__ */ jsx("rect", { x: "0.5", y: "0.5", width: "21", height: "11", rx: "2", stroke: color, strokeWidth: "1", fill: "none" }),
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "15", height: "8", rx: "1", fill: color, opacity: platform === "ios" ? "0.85" : "0.7" }),
+      /* @__PURE__ */ jsx("path", { d: "M22.5 4v4a1.5 1.5 0 0 0 0-4z", fill: color, opacity: "0.5" })
+    ] })
+  ] });
+}
+var styles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    gap: 0
+  }
+};
+
+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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map