@mmtitanl/tablets-core 0.1.1

package/dist/index.cjs

@@ -0,0 +1,1242 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  BIELA_PREFIX: () => BIELA_PREFIX,
+  CustomSVGStore: () => CustomSVGStore,
+  DeviceCompare: () => DeviceCompare,
+  DeviceErrorBoundary: () => DeviceErrorBoundary,
+  DeviceFrame: () => DeviceFrame,
+  DynamicStatusBar: () => DynamicStatusBar,
+  HardwareButtons: () => HardwareButtons,
+  SCALE_STEPS: () => SCALE_STEPS,
+  SafeAreaOverlay: () => SafeAreaOverlay,
+  SafeAreaView: () => SafeAreaView,
+  ScaleBar: () => ScaleBar,
+  StatusBarIndicators: () => StatusBarIndicators,
+  VolumeHUD: () => VolumeHUD,
+  computeAdaptiveScale: () => computeAdaptiveScale,
+  computeFullScale: () => computeFullScale,
+  computeHostSize: () => computeHostSize,
+  getCustomSVGStore: () => getCustomSVGStore,
+  isBielaMessage: () => isBielaMessage,
+  ptsToPercent: () => ptsToPercent,
+  ptsToPx: () => ptsToPx,
+  pxToPts: () => pxToPts,
+  registerCustomDeviceSVG: () => registerCustomDeviceSVG,
+  registerDeviceSVG: () => registerDeviceSVG,
+  scaleValue: () => scaleValue,
+  snapToStep: () => snapToStep,
+  useAdaptiveScale: () => useAdaptiveScale,
+  useContainerSize: () => useContainerSize,
+  useDeviceContract: () => useDeviceContract,
+  useDeviceFrame: () => useDeviceFrame,
+  useFoldState: () => useFoldState,
+  useOrientation: () => useOrientation,
+  useScreenPower: () => useScreenPower,
+  useVolumeControl: () => useVolumeControl
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/math/scale.ts
+function ptsToPx(pts, dpr) {
+  return pts * dpr;
+}
+function pxToPts(px, dpr) {
+  return px / dpr;
+}
+function ptsToPercent(pts, total) {
+  return pts / total * 100;
+}
+function scaleValue(value, scaleFactor) {
+  return value * scaleFactor;
+}
+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 = Math.max(0, containerWidth - padding * 2);
+  const availH = Math.max(0, containerHeight - padding * 2);
+  if (availW <= 0 || availH <= 0) return minScale;
+  const sx = availW / deviceWidth;
+  const sy = availH / deviceHeight;
+  const raw = Math.min(sx, sy, maxScale);
+  return Math.max(raw, minScale);
+}
+function snapToStep(raw) {
+  const allowed = SCALE_STEPS.filter((s) => s <= raw);
+  if (allowed.length === 0) return raw;
+  return Math.max(...allowed);
+}
+function computeHostSize(deviceWidth, deviceHeight, scale) {
+  return { width: deviceWidth * scale, height: deviceHeight * scale };
+}
+function computeFullScale(deviceWidth, deviceHeight, containerWidth, containerHeight, options = {}) {
+  const { padding = 24, maxScale = 1, minScale = 0.1, snapToSteps = false } = options;
+  const raw = computeAdaptiveScale(deviceWidth, deviceHeight, containerWidth, containerHeight, padding, maxScale, minScale);
+  const scale = snapToSteps ? snapToStep(raw) : raw;
+  const { width: scaledWidth, height: scaledHeight } = computeHostSize(deviceWidth, deviceHeight, scale);
+  return {
+    scale,
+    scaledWidth,
+    scaledHeight,
+    deviceWidth,
+    deviceHeight,
+    isAtMaxScale: scale >= maxScale - 1e-4,
+    isConstrained: scale < maxScale - 1e-4,
+    scalePercent: `${Math.round(scale * 100)}%`
+  };
+}
+
+// src/hooks/use-container-size.ts
+var import_react = require("react");
+function clampToViewport(w, h) {
+  if (typeof window === "undefined") return { width: w, height: h };
+  const vw = window.visualViewport?.width ?? window.innerWidth;
+  const vh = window.visualViewport?.height ?? window.innerHeight;
+  return { width: Math.min(w, vw), height: Math.min(h, vh) };
+}
+function viewportFallback() {
+  if (typeof window === "undefined") return { width: 800, height: 600 };
+  return {
+    width: window.visualViewport?.width ?? window.innerWidth,
+    height: window.visualViewport?.height ?? window.innerHeight
+  };
+}
+function useContainerSize(ref) {
+  const [size, setSize] = (0, import_react.useState)(() => viewportFallback());
+  (0, import_react.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    let rafId = null;
+    const measure = () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        const rect = el.getBoundingClientRect();
+        const raw = rect.height > 0 ? { width: rect.width, height: rect.height } : viewportFallback();
+        setSize(clampToViewport(raw.width, raw.height));
+      });
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
+  }, [ref]);
+  return size;
+}
+
+// src/hooks/use-adaptive-scale.ts
+var import_react2 = require("react");
+function useAdaptiveScale(options) {
+  const {
+    device,
+    containerWidth,
+    containerHeight,
+    padding = 24,
+    maxScale = 1,
+    minScale = 0.1,
+    snapToSteps = false,
+    orientation = "portrait"
+  } = options;
+  return (0, import_react2.useMemo)(() => {
+    const dw = orientation === "portrait" ? device.screen.width : device.screen.height;
+    const dh = orientation === "portrait" ? device.screen.height : device.screen.width;
+    return computeFullScale(dw, dh, containerWidth, containerHeight, { padding, maxScale, minScale, snapToSteps });
+  }, [
+    device.screen.width,
+    device.screen.height,
+    containerWidth,
+    containerHeight,
+    padding,
+    maxScale,
+    minScale,
+    snapToSteps,
+    orientation
+  ]);
+}
+
+// src/hooks/use-device-contract.ts
+var import_react3 = require("react");
+var import_tablets = require("@mmtitanl/tablets");
+function useDeviceContract(deviceId, orientation = "portrait") {
+  return (0, import_react3.useMemo)(() => {
+    const contract = (0, import_tablets.getDeviceContract)(deviceId, orientation);
+    return {
+      contract,
+      cssVariables: contract.cssVariables,
+      contentZone: orientation === "portrait" ? contract.contentZone.portrait : contract.contentZone.landscape
+    };
+  }, [deviceId, orientation]);
+}
+
+// src/hooks/use-orientation.ts
+var import_react4 = require("react");
+function useOrientation(initial = "portrait") {
+  const [orientation, setOrientation] = (0, import_react4.useState)(initial);
+  const toggle = (0, import_react4.useCallback)(() => {
+    setOrientation((o) => o === "portrait" ? "landscape" : "portrait");
+  }, []);
+  return { orientation, isLandscape: orientation === "landscape", toggle, setOrientation };
+}
+
+// src/hooks/use-volume-control.ts
+var import_react5 = require("react");
+var STEPS = 16;
+function applyToMedia(level, muted) {
+  if (typeof document === "undefined") return;
+  const nodes = document.querySelectorAll(".bielaframe-content audio, .bielaframe-content video");
+  nodes.forEach((el) => {
+    el.volume = Math.max(0, Math.min(1, level));
+    el.muted = muted;
+  });
+}
+function useVolumeControl(initialVolume = 0.5) {
+  const [level, setLevel] = (0, import_react5.useState)(initialVolume);
+  const [muted, setMuted] = (0, import_react5.useState)(false);
+  const [hudVisible, setHudVisible] = (0, import_react5.useState)(false);
+  const timer = (0, import_react5.useRef)(null);
+  const flashHUD = (0, import_react5.useCallback)(() => {
+    setHudVisible(true);
+    if (timer.current) window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setHudVisible(false), 1500);
+  }, []);
+  const volumeUp = (0, import_react5.useCallback)(() => {
+    setLevel((l) => Math.min(1, l + 1 / STEPS));
+    flashHUD();
+  }, [flashHUD]);
+  const volumeDown = (0, import_react5.useCallback)(() => {
+    setLevel((l) => Math.max(0, l - 1 / STEPS));
+    flashHUD();
+  }, [flashHUD]);
+  const toggleMute = (0, import_react5.useCallback)(() => {
+    setMuted((m) => !m);
+    flashHUD();
+  }, [flashHUD]);
+  (0, import_react5.useEffect)(() => {
+    applyToMedia(level, muted);
+  }, [level, muted]);
+  return { level, muted, hudVisible, volumeUp, volumeDown, toggleMute };
+}
+
+// src/hooks/use-screen-power.ts
+var import_react6 = require("react");
+function useScreenPower() {
+  const [isOff, setIsOff] = (0, import_react6.useState)(false);
+  const toggle = (0, import_react6.useCallback)(() => setIsOff((v) => !v), []);
+  return { isOff, toggle };
+}
+
+// src/hooks/use-device-frame.ts
+var import_react7 = require("react");
+
+// src/messages.ts
+var BIELA_PREFIX = "biela:";
+function isBielaMessage(data) {
+  return typeof data === "object" && data !== null && "type" in data && typeof data.type === "string" && data.type.startsWith(BIELA_PREFIX);
+}
+
+// src/hooks/use-device-frame.ts
+function parsePx(value) {
+  if (!value) return 0;
+  const n = parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+}
+function useDeviceFrame() {
+  const [vars, setVars] = (0, import_react7.useState)({});
+  const [platform, setPlatform] = (0, import_react7.useState)(null);
+  const [deviceId, setDeviceId] = (0, import_react7.useState)(null);
+  const [orientation, setOrientation] = (0, import_react7.useState)(null);
+  const [isReady, setIsReady] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const handler = (event) => {
+      if (!isBielaMessage(event.data)) return;
+      if (event.data.type === "biela:deviceInfo") {
+        const msg = event.data;
+        setVars(msg.payload.vars);
+        setPlatform(msg.payload.platform);
+        setDeviceId(msg.payload.deviceId);
+        setOrientation(msg.payload.orientation);
+        setIsReady(true);
+      }
+    };
+    window.addEventListener("message", handler);
+    window.parent?.postMessage({ type: "biela:requestDeviceInfo" }, "*");
+    return () => window.removeEventListener("message", handler);
+  }, []);
+  const reportColorScheme = (0, import_react7.useCallback)((scheme) => {
+    if (typeof window === "undefined") return;
+    window.parent?.postMessage({ type: "biela:colorScheme", payload: { scheme } }, "*");
+  }, []);
+  const insets = {
+    top: parsePx(vars["--safe-top"]),
+    bottom: parsePx(vars["--safe-bottom"]),
+    left: parsePx(vars["--safe-left"]),
+    right: parsePx(vars["--safe-right"])
+  };
+  return { insets, vars, platform, deviceId, orientation, isReady, reportColorScheme };
+}
+
+// src/hooks/use-fold-state.ts
+var import_react8 = require("react");
+function useFoldState(baseDeviceId, initial = "folded") {
+  const [foldState, setFoldStateRaw] = (0, import_react8.useState)(initial);
+  const toggle = (0, import_react8.useCallback)(() => {
+    setFoldStateRaw((s) => s === "folded" ? "open" : "folded");
+  }, []);
+  const setFoldState = (0, import_react8.useCallback)((state) => {
+    setFoldStateRaw(state);
+  }, []);
+  const isOpen = foldState === "open";
+  const deviceId = isOpen ? `${baseDeviceId}-open` : baseDeviceId;
+  return { foldState, isOpen, deviceId, toggle, setFoldState };
+}
+
+// src/registration.tsx
+var import_tablets2 = require("@mmtitanl/tablets");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SVG_REGISTRY = /* @__PURE__ */ new Map();
+function registerDeviceSVG(deviceId, component, frame, screenRect, landscape) {
+  SVG_REGISTRY.set(deviceId, {
+    component,
+    frame,
+    screenRect,
+    landscapeComponent: landscape?.component,
+    landscapeFrame: landscape?.frame,
+    landscapeScreenRect: landscape?.screenRect
+  });
+}
+function getDeviceSVG(deviceId) {
+  return SVG_REGISTRY.get(deviceId);
+}
+function buildCustomComponent(deviceId, svgString, cropViewBox, screenRect, suffix) {
+  const scopeKey = suffix ? `${deviceId}${suffix}` : deviceId;
+  let svg = (0, import_tablets2.scopeSVGIds)(svgString, scopeKey);
+  if (cropViewBox) {
+    svg = svg.replace(
+      /<svg\b([^>]*)>/i,
+      (_m, attrs) => {
+        const stripped = attrs.replace(/\sviewBox\s*=\s*["'][^"']*["']/i, "").replace(/\swidth\s*=\s*["'][^"']*["']/i, "").replace(/\sheight\s*=\s*["'][^"']*["']/i, "");
+        return `<svg${stripped} viewBox="${cropViewBox.x} ${cropViewBox.y} ${cropViewBox.width} ${cropViewBox.height}" width="100%" height="100%">`;
+      }
+    );
+  } else {
+    svg = svg.replace(
+      /<svg\b([^>]*)>/i,
+      (_m, attrs) => {
+        const stripped = attrs.replace(/\swidth\s*=\s*["'][^"']*["']/i, "").replace(/\sheight\s*=\s*["'][^"']*["']/i, "");
+        return `<svg${stripped} width="100%" height="100%">`;
+      }
+    );
+  }
+  void screenRect;
+  const Component2 = ({ style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: { display: "block", width: "100%", height: "100%", ...style },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+  Component2.displayName = `CustomDeviceSVG(${scopeKey})`;
+  return Component2;
+}
+function registerCustomDeviceSVG(deviceId, svgString, frame, cropViewBox, screenRect, landscape) {
+  const portraitComponent = buildCustomComponent(deviceId, svgString, cropViewBox, screenRect, "");
+  const landscapeComponent = landscape ? buildCustomComponent(deviceId, landscape.svgString, landscape.cropViewBox, landscape.screenRect, "-landscape") : void 0;
+  SVG_REGISTRY.set(deviceId, {
+    component: portraitComponent,
+    frame,
+    screenRect,
+    landscapeComponent,
+    landscapeFrame: landscape?.frame,
+    landscapeScreenRect: landscape?.screenRect
+  });
+}
+
+// src/components/DeviceFrame.tsx
+var import_react11 = require("react");
+var import_tablets3 = require("@mmtitanl/tablets");
+
+// src/components/DeviceErrorBoundary.tsx
+var import_react9 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DeviceErrorBoundary = class extends import_react9.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[BielaFrame] device content crashed", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          style: {
+            padding: 20,
+            fontFamily: "system-ui",
+            color: "#ff453a",
+            background: "#1c1c1e",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            textAlign: "center"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 14, fontWeight: 600, marginBottom: 8 }, children: "Component crashed" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, opacity: 0.8 }, children: this.state.error?.message })
+          ] })
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+// src/components/SafeAreaOverlay.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function SafeAreaOverlay({ contract, orientation }) {
+  const safe = orientation === "portrait" ? contract.safeArea.portrait : contract.safeArea.landscape;
+  const w = orientation === "portrait" ? contract.screen.width : contract.screen.height;
+  const h = orientation === "portrait" ? contract.screen.height : contract.screen.width;
+  const baseStyle = { position: "absolute", pointerEvents: "none" };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...baseStyle, top: 0, left: 0, right: 0, height: safe.top, background: "rgba(255,69,58,0.25)" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: { ...baseStyle, bottom: 0, left: 0, right: 0, height: safe.bottom, background: "rgba(255,69,58,0.25)" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...baseStyle, top: 0, left: 0, bottom: 0, width: safe.left, background: "rgba(255,69,58,0.25)" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: { ...baseStyle, top: 0, right: 0, bottom: 0, width: safe.right, background: "rgba(255,69,58,0.25)" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          ...baseStyle,
+          top: safe.top,
+          bottom: safe.bottom,
+          left: safe.left,
+          right: safe.right,
+          outline: "1px dashed rgba(48,209,88,0.6)"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        style: {
+          ...baseStyle,
+          top: 4,
+          left: 8,
+          color: "white",
+          background: "rgba(0,0,0,0.6)",
+          padding: "2px 6px",
+          fontSize: 10,
+          fontFamily: "ui-monospace, monospace",
+          borderRadius: 4
+        },
+        children: [
+          w,
+          "\xD7",
+          h,
+          " \xB7 safe ",
+          safe.top,
+          "/",
+          safe.bottom,
+          "/",
+          safe.left,
+          "/",
+          safe.right
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/ScaleBar.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ScaleBar({
+  deviceName,
+  deviceWidth,
+  deviceHeight,
+  scale,
+  scalePercent,
+  isAtMaxScale,
+  onScaleChange,
+  onFit,
+  onRealSize
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      role: "region",
+      "aria-label": "Device scale controls",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "8px 12px",
+        background: "rgba(28,28,30,0.92)",
+        color: "white",
+        borderRadius: 8,
+        fontFamily: "ui-monospace, monospace",
+        fontSize: 12,
+        marginTop: 8
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: deviceName }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { opacity: 0.6 }, children: "\xB7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+          deviceWidth,
+          "\xD7",
+          deviceHeight,
+          "pt"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            type: "range",
+            min: 0.1,
+            max: 2,
+            step: 0.01,
+            value: scale,
+            "aria-label": "Scale",
+            "aria-valuenow": scale,
+            role: "slider",
+            onChange: (e) => onScaleChange?.(parseFloat(e.target.value)),
+            style: { flex: 1 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-live": "polite", style: { width: 40, textAlign: "right" }, children: scalePercent }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: onFit, type: "button", style: btn, children: "Fit" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: onRealSize, type: "button", style: { ...btn, opacity: isAtMaxScale ? 0.5 : 1 }, children: "1:1" })
+      ]
+    }
+  );
+}
+var btn = {
+  background: "transparent",
+  color: "white",
+  border: "1px solid rgba(255,255,255,0.25)",
+  padding: "2px 8px",
+  borderRadius: 4,
+  cursor: "pointer",
+  fontSize: 11
+};
+
+// src/components/DynamicStatusBar.tsx
+var import_react10 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function formatNow() {
+  const now = /* @__PURE__ */ new Date();
+  return `${now.getHours()}:${now.getMinutes().toString().padStart(2, "0")}`;
+}
+function DynamicStatusBar({
+  contract,
+  orientation,
+  colorScheme,
+  showLiveClock = true,
+  fixedTime
+}) {
+  const [now, setNow] = (0, import_react10.useState)(formatNow);
+  (0, import_react10.useEffect)(() => {
+    if (!showLiveClock || fixedTime) return;
+    const id = window.setInterval(() => setNow(formatNow()), 3e4);
+    return () => window.clearInterval(id);
+  }, [showLiveClock, fixedTime]);
+  if (orientation === "landscape" && contract.device.platform === "ios") return null;
+  const time = fixedTime ?? (showLiveClock ? now : "9:41");
+  const platform = contract.device.platform;
+  const statusBarStyle = contract.statusBar.style;
+  const height = contract.statusBar.height;
+  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: `${height}px`,
+    whiteSpace: "nowrap"
+  };
+  const patchStyle = {
+    position: "absolute",
+    top: 0,
+    height,
+    display: "flex",
+    alignItems: "center",
+    background: bgColor,
+    pointerEvents: "none"
+  };
+  if (platform === "ios" && statusBarStyle !== "dynamic-island" && statusBarStyle !== "notch") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        style: { ...patchStyle, left: "50%", transform: "translateX(-50%)", paddingLeft: 6, paddingRight: 6 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { ...clockStyle, fontWeight: 500, fontSize: baseFontSize - 1 }, children: time })
+      }
+    );
+  }
+  if (platform === "ios") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "aria-hidden": true, style: { ...patchStyle, left: 0, paddingLeft: 20, paddingRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: clockStyle, children: time }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "aria-hidden": true, style: { ...patchStyle, left: 0, paddingLeft: 16, paddingRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: clockStyle, children: time }) });
+}
+
+// src/components/DeviceFrame.tsx
+var import_tablets4 = require("@mmtitanl/tablets");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var didAutoRegister = false;
+function ensureBuiltinsRegistered() {
+  if (didAutoRegister) return;
+  registerDeviceSVG("ipad-pro-13", import_tablets4.IPadPro13SVG, import_tablets4.IPAD_PRO_13_FRAME, import_tablets4.IPAD_PRO_13_SCREEN_RECT);
+  registerDeviceSVG("ipad-pro-11", import_tablets4.IPadPro11SVG, import_tablets4.IPAD_PRO_11_FRAME, import_tablets4.IPAD_PRO_11_SCREEN_RECT);
+  registerDeviceSVG("ipad-air-13", import_tablets4.IPadAir13SVG, import_tablets4.IPAD_AIR_13_FRAME, import_tablets4.IPAD_AIR_13_SCREEN_RECT);
+  registerDeviceSVG("ipad-air-11", import_tablets4.IPadAir11SVG, import_tablets4.IPAD_AIR_11_FRAME, import_tablets4.IPAD_AIR_11_SCREEN_RECT);
+  registerDeviceSVG("ipad-mini-7", import_tablets4.IPadMini7SVG, import_tablets4.IPAD_MINI_7_FRAME, import_tablets4.IPAD_MINI_7_SCREEN_RECT);
+  registerDeviceSVG("galaxy-tab-s10", import_tablets4.GalaxyTabS10SVG, import_tablets4.GALAXY_TAB_S10_FRAME, import_tablets4.GALAXY_TAB_S10_SCREEN_RECT);
+  registerDeviceSVG("galaxy-tab-s10-ultra", import_tablets4.GalaxyTabS10UltraSVG, import_tablets4.GALAXY_TAB_S10_ULTRA_FRAME, import_tablets4.GALAXY_TAB_S10_ULTRA_SCREEN_RECT);
+  registerDeviceSVG("galaxy-tab-s10-fe", import_tablets4.GalaxyTabS10FeSVG, import_tablets4.GALAXY_TAB_S10_FE_FRAME, import_tablets4.GALAXY_TAB_S10_FE_SCREEN_RECT);
+  registerDeviceSVG("iphone-17-pro-max", import_tablets4.IPhone17ProMaxSVG, import_tablets4.IPHONE_17_PRO_MAX_FRAME, import_tablets4.IPHONE_17_PRO_MAX_SCREEN_RECT);
+  registerDeviceSVG("iphone-17-pro", import_tablets4.IPhone17ProSVG, import_tablets4.IPHONE_17_PRO_FRAME, import_tablets4.IPHONE_17_PRO_SCREEN_RECT);
+  registerDeviceSVG("iphone-air", import_tablets4.IPhoneAirSVG, import_tablets4.IPHONE_AIR_FRAME, import_tablets4.IPHONE_AIR_SCREEN_RECT);
+  registerDeviceSVG("iphone-16", import_tablets4.IPhone16SVG, import_tablets4.IPHONE_16_FRAME, import_tablets4.IPHONE_16_SCREEN_RECT);
+  registerDeviceSVG("iphone-16e", import_tablets4.IPhone16eSVG, import_tablets4.IPHONE_16E_FRAME, import_tablets4.IPHONE_16E_SCREEN_RECT);
+  registerDeviceSVG("iphone-se-3", import_tablets4.IPhoneSE3SVG, import_tablets4.IPHONE_SE_3_FRAME, import_tablets4.IPHONE_SE_3_SCREEN_RECT);
+  registerDeviceSVG("galaxy-s25", import_tablets4.GalaxyS25SVG, import_tablets4.GALAXY_S25_FRAME, import_tablets4.GALAXY_S25_SCREEN_RECT);
+  registerDeviceSVG("galaxy-s25-edge", import_tablets4.GalaxyS25EdgeSVG, import_tablets4.GALAXY_S25_EDGE_FRAME);
+  registerDeviceSVG("galaxy-s25-ultra", import_tablets4.GalaxyS25UltraSVG, import_tablets4.GALAXY_S25_ULTRA_FRAME, import_tablets4.GALAXY_S25_ULTRA_SCREEN_RECT);
+  registerDeviceSVG("pixel-9-pro", import_tablets4.Pixel9ProSVG, import_tablets4.PIXEL_9_PRO_FRAME, import_tablets4.PIXEL_9_PRO_SCREEN_RECT);
+  registerDeviceSVG("pixel-9-pro-xl", import_tablets4.Pixel9ProXLSVG, import_tablets4.PIXEL_9_PRO_XL_FRAME, import_tablets4.PIXEL_9_PRO_XL_SCREEN_RECT);
+  registerDeviceSVG("galaxy-z-fold-7", import_tablets4.GalaxyZFold7SVG, import_tablets4.GALAXY_Z_FOLD_7_FRAME, import_tablets4.GALAXY_Z_FOLD_7_SCREEN_RECT);
+  registerDeviceSVG("galaxy-z-fold-7-open", import_tablets4.GalaxyZFold7OpenSVG, import_tablets4.GALAXY_Z_FOLD_7_OPEN_FRAME, import_tablets4.GALAXY_Z_FOLD_7_OPEN_SCREEN_RECT);
+  didAutoRegister = true;
+}
+function sendDeviceInfo(iframe, contract, orientation) {
+  if (!iframe?.contentWindow) return;
+  iframe.contentWindow.postMessage(
+    {
+      type: "biela:deviceInfo",
+      payload: {
+        vars: contract.cssVariables,
+        platform: contract.device.platform,
+        deviceId: contract.device.id,
+        orientation
+      }
+    },
+    "*"
+  );
+}
+function DeviceFrame({
+  device,
+  deviceId,
+  orientation = "portrait",
+  scaleMode = "fit",
+  manualScale = 1,
+  showSafeAreaOverlay = false,
+  showScaleBar = true,
+  showStatusBar = true,
+  colorScheme = "light",
+  iframeRef,
+  onColorSchemeChange,
+  onContractReady,
+  onScaleChange,
+  children
+}) {
+  ensureBuiltinsRegistered();
+  const resolvedId = device ?? deviceId;
+  if (!resolvedId) throw new Error("DeviceFrame requires `device` or `deviceId`");
+  const meta = (0, import_tablets3.getDeviceMetadata)(resolvedId);
+  const contract = (0, import_react11.useMemo)(() => (0, import_tablets3.getDeviceContract)(resolvedId, orientation), [resolvedId, orientation]);
+  const portW = meta.screen.width;
+  const portH = meta.screen.height;
+  const rotateFrame = orientation === "landscape";
+  const dw = rotateFrame ? portH : portW;
+  const dh = rotateFrame ? portW : portH;
+  const sentinelRef = (0, import_react11.useRef)(null);
+  const frameContainerRef = (0, import_react11.useRef)(null);
+  const containerSize = useContainerSize(sentinelRef);
+  const svgEntryEarly = getDeviceSVG(resolvedId);
+  const portraitFrameEarly = svgEntryEarly?.frame;
+  const landscapeFrameEarly = svgEntryEarly?.landscapeFrame;
+  const hasLandscapeSVGEarly = !!svgEntryEarly?.landscapeComponent && !!landscapeFrameEarly;
+  const fitW = portraitFrameEarly ? rotateFrame ? hasLandscapeSVGEarly ? landscapeFrameEarly.totalWidth : portraitFrameEarly.totalHeight : portraitFrameEarly.totalWidth : rotateFrame ? portH : portW;
+  const fitH = portraitFrameEarly ? rotateFrame ? hasLandscapeSVGEarly ? landscapeFrameEarly.totalHeight : portraitFrameEarly.totalWidth : portraitFrameEarly.totalHeight : rotateFrame ? portW : portH;
+  const fitResult = (0, import_react11.useMemo)(
+    () => computeFullScale(fitW, fitH, containerSize.width, containerSize.height, {
+      snapToSteps: scaleMode === "steps"
+    }),
+    [fitW, fitH, containerSize.width, containerSize.height, scaleMode]
+  );
+  const [overrideScale, setOverrideScale] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
+    setOverrideScale(null);
+  }, [orientation]);
+  const scale = scaleMode === "manual" ? manualScale : overrideScale ?? fitResult.scale;
+  const hostWidth = fitW * scale;
+  const hostHeight = fitH * scale;
+  const isAtMaxScale = scale >= 0.9999;
+  (0, import_react11.useEffect)(() => {
+    onContractReady?.(contract);
+  }, [contract, onContractReady]);
+  (0, import_react11.useEffect)(() => {
+    onScaleChange?.(scale);
+  }, [scale, onScaleChange]);
+  (0, import_react11.useEffect)(() => {
+    if (!iframeRef?.current) return;
+    sendDeviceInfo(iframeRef.current, contract, orientation);
+    const onLoad = () => sendDeviceInfo(iframeRef.current, contract, orientation);
+    iframeRef.current.addEventListener("load", onLoad);
+    return () => iframeRef.current?.removeEventListener("load", onLoad);
+  }, [iframeRef, contract, orientation]);
+  (0, import_react11.useEffect)(() => {
+    if (!iframeRef) return;
+    const handler = (event) => {
+      const data = event.data;
+      if (!data || typeof data !== "object") return;
+      if (data.type === "biela:requestDeviceInfo") {
+        sendDeviceInfo(iframeRef.current, contract, orientation);
+      } else if (data.type === "biela:colorScheme" && data.payload?.scheme) {
+        onColorSchemeChange?.(data.payload.scheme);
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [iframeRef, contract, orientation, onColorSchemeChange]);
+  const svgEntry = getDeviceSVG(resolvedId);
+  const SVGComponent = svgEntry?.component ?? null;
+  const portraitFrame = svgEntry?.frame;
+  const LandscapeSVGComponent = svgEntry?.landscapeComponent ?? null;
+  const landscapeFrame = svgEntry?.landscapeFrame;
+  const hasLandscapeSVG = !!LandscapeSVGComponent && !!landscapeFrame;
+  const cssVarsStyle = contract.cssVariables;
+  const activeFrame = hasLandscapeSVG && rotateFrame ? landscapeFrame : portraitFrame;
+  const scalerW = hasLandscapeSVG ? Math.max(portraitFrame?.totalWidth ?? dw, landscapeFrame?.totalWidth ?? dh) : activeFrame?.totalWidth ?? (rotateFrame ? portW : dw);
+  const scalerH = hasLandscapeSVG ? Math.max(portraitFrame?.totalHeight ?? dh, landscapeFrame?.totalHeight ?? dw) : activeFrame?.totalHeight ?? (rotateFrame ? portH : dh);
+  const contentBezelLeft = activeFrame?.bezelLeft ?? 0;
+  const contentBezelTop = activeFrame?.bezelTop ?? 0;
+  const contentScreenW = activeFrame?.screenWidth ?? dw;
+  const contentScreenH = activeFrame?.screenHeight ?? dh;
+  const baseRadius = activeFrame?.screenRadius ?? meta.screen.cornerRadius ?? 0;
+  const radiusTop = activeFrame?.screenRadiusTop ?? baseRadius;
+  const radiusBottom = activeFrame?.screenRadiusBottom ?? baseRadius;
+  const useRotationFallback = rotateFrame && !hasLandscapeSVG;
+  const scalerTransform = useRotationFallback ? `scale(${scale}) translate(0px, ${scalerW}px) rotate(-90deg)` : `scale(${scale})`;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      ref: sentinelRef,
+      className: "bielaframe-sentinel",
+      style: { width: "100%", height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", overflow: "hidden" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            className: "bielaframe-host",
+            style: {
+              width: hostWidth,
+              height: hostHeight,
+              position: "relative",
+              flexShrink: 0,
+              overflow: "hidden",
+              transition: "width 400ms cubic-bezier(0.4, 0, 0.2, 1), height 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "div",
+              {
+                className: "bielaframe-scaler",
+                ref: frameContainerRef,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: scalerW,
+                  height: scalerH,
+                  transform: scalerTransform,
+                  transformOrigin: "top left",
+                  willChange: "transform",
+                  transition: "transform 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+                },
+                children: [
+                  SVGComponent && portraitFrame && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    "div",
+                    {
+                      "aria-hidden": true,
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: portraitFrame.totalWidth,
+                        height: portraitFrame.totalHeight,
+                        pointerEvents: "none",
+                        zIndex: 1,
+                        opacity: hasLandscapeSVG && rotateFrame ? 0 : 1,
+                        transition: "opacity 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        SVGComponent,
+                        {
+                          colorScheme,
+                          style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none" }
+                        }
+                      )
+                    }
+                  ),
+                  hasLandscapeSVG && LandscapeSVGComponent && landscapeFrame && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    "div",
+                    {
+                      "aria-hidden": true,
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: landscapeFrame.totalWidth,
+                        height: landscapeFrame.totalHeight,
+                        pointerEvents: "none",
+                        zIndex: 1,
+                        opacity: rotateFrame ? 1 : 0,
+                        transition: "opacity 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        LandscapeSVGComponent,
+                        {
+                          colorScheme,
+                          style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none" }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                    "div",
+                    {
+                      className: "bielaframe-content",
+                      style: {
+                        position: "absolute",
+                        left: contentBezelLeft,
+                        top: contentBezelTop,
+                        width: contentScreenW,
+                        height: contentScreenH,
+                        // `border-radius + overflow:hidden` clips the <iframe> child
+                        // in every browser. clip-path is kept as belt-and-braces — some
+                        // engines apply it to the iframe, some don't. Per-edge radii
+                        // (top vs bottom) let devices with asymmetric corners — e.g.
+                        // flat-bottom — clip correctly.
+                        borderRadius: `${radiusTop}px ${radiusTop}px ${radiusBottom}px ${radiusBottom}px`,
+                        clipPath: `inset(0 round ${radiusTop}px ${radiusTop}px ${radiusBottom}px ${radiusBottom}px)`,
+                        overflow: "hidden",
+                        isolation: "isolate",
+                        backfaceVisibility: "hidden",
+                        transform: "translateZ(0)",
+                        background: colorScheme === "dark" ? "#000" : "#fff",
+                        zIndex: 5,
+                        ...cssVarsStyle
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DeviceErrorBoundary, { children }),
+                        showStatusBar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DynamicStatusBar, { contract, orientation, colorScheme }),
+                        showSafeAreaOverlay && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeAreaOverlay, { contract, orientation })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        showScaleBar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          ScaleBar,
+          {
+            deviceName: meta.name,
+            deviceWidth: dw,
+            deviceHeight: dh,
+            scale,
+            scalePercent: `${Math.round(scale * 100)}%`,
+            isAtMaxScale,
+            isConstrained: !isAtMaxScale,
+            onScaleChange: (s) => setOverrideScale(s),
+            onFit: () => setOverrideScale(null),
+            onRealSize: () => setOverrideScale(1)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/DeviceCompare.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DeviceCompare({
+  deviceA,
+  deviceB,
+  orientation = "portrait",
+  colorScheme = "light",
+  showSafeAreaOverlay,
+  showScaleBar,
+  layout = "auto",
+  gap = 24,
+  children,
+  childrenA,
+  childrenB,
+  onContractReadyA,
+  onContractReadyB
+}) {
+  const direction = layout === "auto" ? orientation === "portrait" ? "row" : "column" : layout === "horizontal" ? "row" : "column";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: direction, gap, width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      DeviceFrame,
+      {
+        deviceId: deviceA,
+        orientation,
+        colorScheme,
+        showSafeAreaOverlay,
+        showScaleBar,
+        onContractReady: onContractReadyA,
+        children: childrenA ?? children
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      DeviceFrame,
+      {
+        deviceId: deviceB,
+        orientation,
+        colorScheme,
+        showSafeAreaOverlay,
+        showScaleBar,
+        onContractReady: onContractReadyB,
+        children: childrenB ?? children
+      }
+    ) })
+  ] });
+}
+
+// src/components/SafeAreaView.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SafeAreaView({ edges = ["top", "bottom", "left", "right"], children, style }) {
+  const padding = {
+    paddingTop: edges.includes("top") ? "var(--safe-top, 0px)" : void 0,
+    paddingBottom: edges.includes("bottom") ? "var(--safe-bottom, 0px)" : void 0,
+    paddingLeft: edges.includes("left") ? "var(--safe-left, 0px)" : void 0,
+    paddingRight: edges.includes("right") ? "var(--safe-right, 0px)" : void 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...padding, ...style }, children });
+}
+
+// src/components/VolumeHUD.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function VolumeHUD({ level, muted, visible, platform }) {
+  if (!visible) return null;
+  const isIOS = platform === "ios";
+  const pct = Math.round((muted ? 0 : level) * 100);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      role: "status",
+      "aria-label": `Volume ${pct}%`,
+      style: {
+        position: "absolute",
+        ...isIOS ? { top: "12%", left: "50%", transform: "translateX(-50%)", width: 6, height: 220, borderRadius: 3 } : { top: 16, left: "50%", transform: "translateX(-50%)", width: 240, height: 6, borderRadius: 3 },
+        background: "rgba(255,255,255,0.2)",
+        overflow: "hidden",
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          style: {
+            background: muted ? "#8e8e93" : "white",
+            ...isIOS ? { width: "100%", height: `${pct}%`, marginTop: `${100 - pct}%` } : { width: `${pct}%`, height: "100%" }
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/components/HardwareButtons.tsx
+var import_react12 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function HardwareButtons({
+  frameContainerRef,
+  onButtonPress,
+  enabled = true,
+  orientation = "portrait"
+}) {
+  const [rects, setRects] = (0, import_react12.useState)([]);
+  (0, import_react12.useEffect)(() => {
+    if (!enabled) return;
+    const container = frameContainerRef.current;
+    if (!container) return;
+    const found = [];
+    const nodes = container.querySelectorAll("[data-button]");
+    const containerRect = container.getBoundingClientRect();
+    nodes.forEach((node) => {
+      const name = node.getAttribute("data-button");
+      if (!name) return;
+      const r = node.getBoundingClientRect();
+      found.push({
+        name,
+        left: r.left - containerRect.left,
+        top: r.top - containerRect.top,
+        width: r.width,
+        height: r.height
+      });
+    });
+    setRects(found);
+  }, [frameContainerRef, enabled, orientation]);
+  if (!enabled || rects.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: rects.map((r) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      role: "button",
+      "aria-label": r.name,
+      onMouseDown: () => onButtonPress?.(r.name),
+      onTouchStart: () => onButtonPress?.(r.name),
+      style: {
+        position: "absolute",
+        left: r.left,
+        top: r.top,
+        width: r.width,
+        height: r.height,
+        cursor: "pointer",
+        zIndex: 20
+      }
+    },
+    r.name
+  )) });
+}
+
+// src/components/StatusBarIndicators.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function StatusBarIndicators({ platform, colorScheme }) {
+  const fill = colorScheme === "dark" ? "white" : "black";
+  if (platform === "ios") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "18", height: "10", viewBox: "0 0 18 10", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "0", y: "6", width: "3", height: "4", fill, rx: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "5", y: "4", width: "3", height: "6", fill, rx: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "10", y: "2", width: "3", height: "8", fill, rx: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "15", y: "0", width: "3", height: "10", fill, rx: "1" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "14", height: "10", viewBox: "0 0 14 10", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M7 9.5l3-3a4 4 0 0 0-6 0z", fill }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "26", height: "12", viewBox: "0 0 26 12", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "1", y: "1", width: "22", height: "10", rx: "2.5", fill: "none", stroke: fill, strokeWidth: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "24", y: "4", width: "1.5", height: "4", rx: "0.5", fill }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "3", y: "3", width: "18", height: "6", rx: "1.5", fill })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "14", height: "10", viewBox: "0 0 14 10", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0 9 L14 9 L14 1 Z", fill }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "20", height: "10", viewBox: "0 0 20 10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "1", y: "1", width: "16", height: "8", rx: "1.5", fill: "none", stroke: fill, strokeWidth: "1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "18", y: "3", width: "1.5", height: "4", rx: "0.5", fill }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "3", y: "3", width: "12", height: "4", fill })
+    ] })
+  ] });
+}
+
+// src/storage/custom-svg-store.ts
+var STORAGE_KEY = "bielaframe-custom-tablet-svgs";
+var CustomSVGStore = class {
+  storage;
+  constructor(storage) {
+    this.storage = storage ?? (typeof localStorage !== "undefined" ? localStorage : null);
+  }
+  getAll() {
+    if (!this.storage) return {};
+    try {
+      const raw = this.storage.getItem(STORAGE_KEY);
+      return raw ? JSON.parse(raw) : {};
+    } catch {
+      return {};
+    }
+  }
+  save(entry) {
+    const all = this.getAll();
+    all[entry.deviceId] = entry;
+    this.persist(all);
+    this.applyEntry(entry);
+  }
+  remove(deviceId) {
+    const all = this.getAll();
+    delete all[deviceId];
+    this.persist(all);
+  }
+  has(deviceId) {
+    return !!this.getAll()[deviceId];
+  }
+  get(deviceId) {
+    return this.getAll()[deviceId];
+  }
+  applyAll() {
+    const all = this.getAll();
+    Object.values(all).forEach((entry) => this.applyEntry(entry));
+  }
+  applyEntry(entry) {
+    const rawW = entry.screenRect?.width ?? 0;
+    const rawH = entry.screenRect?.height ?? 0;
+    const FORM_FACTOR_LOGICAL_W = {
+      tablet: 834,
+      phone: 390,
+      foldable: 374
+    };
+    const logicalW = entry.logicalScreenWidth ?? (entry.formFactor ? FORM_FACTOR_LOGICAL_W[entry.formFactor] : rawW);
+    const scale = rawW > 0 ? logicalW / rawW : 1;
+    const sr = entry.screenRect ? {
+      x: entry.screenRect.x * scale,
+      y: entry.screenRect.y * scale,
+      width: rawW * scale,
+      height: rawH * scale,
+      rx: (entry.screenRect.rx ?? 0) * scale,
+      rxTop: entry.screenRect.rxTop !== void 0 ? entry.screenRect.rxTop * scale : void 0,
+      rxBottom: entry.screenRect.rxBottom !== void 0 ? entry.screenRect.rxBottom * scale : void 0
+    } : void 0;
+    const portraitBezelTop = entry.bezelTop * scale;
+    const portraitBezelBottom = entry.bezelBottom * scale;
+    const portraitBezelLeft = entry.bezelLeft * scale;
+    const portraitBezelRight = entry.bezelRight * scale;
+    const portraitScreenW = sr?.width ?? logicalW;
+    const portraitScreenH = sr?.height ?? (entry.logicalScreenHeight ?? rawH);
+    let landscape;
+    if (entry.svgStringLandscape && entry.screenRectLandscape) {
+      const lRawW = entry.screenRectLandscape.width;
+      const lRawH = entry.screenRectLandscape.height;
+      const lScale = lRawW > 0 ? (entry.logicalScreenHeight ?? lRawW) / lRawW : 1;
+      const lsr = {
+        x: entry.screenRectLandscape.x * lScale,
+        y: entry.screenRectLandscape.y * lScale,
+        width: lRawW * lScale,
+        height: lRawH * lScale,
+        rx: (entry.screenRectLandscape.rx ?? 0) * lScale,
+        rxTop: entry.screenRectLandscape.rxTop !== void 0 ? entry.screenRectLandscape.rxTop * lScale : void 0,
+        rxBottom: entry.screenRectLandscape.rxBottom !== void 0 ? entry.screenRectLandscape.rxBottom * lScale : void 0
+      };
+      const lBezelTop = (entry.bezelTopLandscape ?? 0) * lScale;
+      const lBezelBottom = (entry.bezelBottomLandscape ?? 0) * lScale;
+      const lBezelLeft = (entry.bezelLeftLandscape ?? 0) * lScale;
+      const lBezelRight = (entry.bezelRightLandscape ?? 0) * lScale;
+      landscape = {
+        svgString: entry.svgStringLandscape,
+        frame: {
+          bezelTop: lBezelTop,
+          bezelBottom: lBezelBottom,
+          bezelLeft: lBezelLeft,
+          bezelRight: lBezelRight,
+          totalWidth: lsr.width + lBezelLeft + lBezelRight,
+          totalHeight: lsr.height + lBezelTop + lBezelBottom,
+          screenWidth: lsr.width,
+          screenHeight: lsr.height,
+          screenRadius: lsr.rx,
+          screenRadiusTop: lsr.rxTop,
+          screenRadiusBottom: lsr.rxBottom
+        },
+        screenRect: lsr
+      };
+    }
+    registerCustomDeviceSVG(
+      entry.deviceId,
+      entry.svgString,
+      {
+        bezelTop: portraitBezelTop,
+        bezelBottom: portraitBezelBottom,
+        bezelLeft: portraitBezelLeft,
+        bezelRight: portraitBezelRight,
+        totalWidth: portraitScreenW + portraitBezelLeft + portraitBezelRight,
+        totalHeight: portraitScreenH + portraitBezelTop + portraitBezelBottom,
+        screenWidth: portraitScreenW,
+        screenHeight: portraitScreenH,
+        screenRadius: sr?.rx ?? 0,
+        screenRadiusTop: sr?.rxTop,
+        screenRadiusBottom: sr?.rxBottom
+      },
+      void 0,
+      sr,
+      landscape
+    );
+  }
+  persist(all) {
+    if (!this.storage) return;
+    try {
+      this.storage.setItem(STORAGE_KEY, JSON.stringify(all));
+    } catch {
+    }
+  }
+};
+var singleton = null;
+function getCustomSVGStore() {
+  if (!singleton) singleton = new CustomSVGStore();
+  return singleton;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BIELA_PREFIX,
+  CustomSVGStore,
+  DeviceCompare,
+  DeviceErrorBoundary,
+  DeviceFrame,
+  DynamicStatusBar,
+  HardwareButtons,
+  SCALE_STEPS,
+  SafeAreaOverlay,
+  SafeAreaView,
+  ScaleBar,
+  StatusBarIndicators,
+  VolumeHUD,
+  computeAdaptiveScale,
+  computeFullScale,
+  computeHostSize,
+  getCustomSVGStore,
+  isBielaMessage,
+  ptsToPercent,
+  ptsToPx,
+  pxToPts,
+  registerCustomDeviceSVG,
+  registerDeviceSVG,
+  scaleValue,
+  snapToStep,
+  useAdaptiveScale,
+  useContainerSize,
+  useDeviceContract,
+  useDeviceFrame,
+  useFoldState,
+  useOrientation,
+  useScreenPower,
+  useVolumeControl
+});
+//# sourceMappingURL=index.cjs.map