@limrun/ui 0.17.0-rc.1 → 0.17.0-rc.3

package/dist/duo-view-o1yxIzxu.mjs

@@ -1,654 +0,0 @@
-import { jsx as n, jsxs as b, Fragment as L } from "react/jsx-runtime";
-import et, { useId as q, useState as I, useRef as M, useEffect as H, useCallback as rt, useLayoutEffect as nt, Suspense as ot, lazy as it } from "react";
-import { H as at, D as _, h as st, i as O, j as ct } from "./remote-control-CQjSEVDF.mjs";
-function dt(t, o, e) {
-  const [c, i] = I(t), a = M({ nativeAngle: t, send: o, failed: e });
-  a.current = { nativeAngle: t, send: o, failed: e };
-  const l = M(void 0), f = M(!1), u = M(null);
-  return H(() => (u.current = new at(
-    async (x) => {
-      await a.current.send(x), l.current === x && (l.current = void 0);
-    },
-    (x) => {
-      l.current = void 0, a.current.failed(String(x)), i(a.current.nativeAngle);
-    }
-  ), () => u.current?.stop()), []), H(() => {
-    !f.current && l.current === void 0 && i(t);
-  }, [t]), { angle: c, changeAngle: (x) => {
-    a.current.failed(void 0), l.current = x, i(x), u.current?.set(x);
-  }, interacting: f };
-}
-function ut({
-  angle: t,
-  changeAngle: o,
-  interacting: e,
-  rotate: c,
-  onFold: i,
-  foldTarget: a,
-  onHingeDrag: l,
-  children: f
-}) {
-  const u = q();
-  return /* @__PURE__ */ b("div", { className: "rc-duo-controls", onPointerDown: (d) => d.stopPropagation(), children: [
-    /* @__PURE__ */ b("div", { className: "rc-duo-hinge", children: [
-      /* @__PURE__ */ n("button", { className: "rc-duo-fold", onClick: i ?? (() => o(t < 90 ? 180 : 0)), children: (a ?? t) < 90 ? "Unfold" : "Fold" }),
-      /* @__PURE__ */ n("label", { htmlFor: u, children: "Hinge" }),
-      /* @__PURE__ */ n(
-        "input",
-        {
-          id: u,
-          type: "range",
-          min: 0,
-          max: 180,
-          step: 1,
-          value: t,
-          onPointerDown: (d) => {
-            l?.(), e.current = !0, d.currentTarget.setPointerCapture(d.pointerId);
-          },
-          onPointerUp: () => {
-            e.current = !1;
-          },
-          onPointerCancel: () => {
-            e.current = !1;
-          },
-          onLostPointerCapture: () => {
-            e.current = !1;
-          },
-          onChange: (d) => o(Number(d.target.value))
-        }
-      ),
-      /* @__PURE__ */ b("output", { children: [
-        Math.round(t),
-        "°"
-      ] }),
-      /* @__PURE__ */ n("button", { className: "rc-duo-rotate", "aria-label": "Rotate device", title: "Rotate device", onClick: c, children: /* @__PURE__ */ b(
-        "svg",
-        {
-          viewBox: "0 0 24 24",
-          width: "18",
-          height: "18",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.6",
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ n("rect", { x: "7", y: "3", width: "10", height: "18", rx: "2" }),
-            /* @__PURE__ */ n("path", { d: "M3 9a9 9 0 0 1 3-5M3 4v5h5M21 15a9 9 0 0 1-3 5m3 0v-5h-5" })
-          ]
-        }
-      ) })
-    ] }),
-    f && /* @__PURE__ */ n("div", { className: "rc-duo-views", "aria-label": "Device view", children: f })
-  ] });
-}
-function lt({ button: t }) {
-  return /* @__PURE__ */ n(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      width: "24",
-      height: "24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.7",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: t === "side" ? /* @__PURE__ */ b(L, { children: [
-        /* @__PURE__ */ n("rect", { x: "6", y: "10", width: "12", height: "11", rx: "2" }),
-        /* @__PURE__ */ n("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
-      ] }) : /* @__PURE__ */ b(L, { children: [
-        /* @__PURE__ */ n("path", { d: "M3 9h4l5-5v16l-5-5H3zM17 12h5" }),
-        t === "volumeUp" && /* @__PURE__ */ n("path", { d: "M19.5 9.5v5" })
-      ] })
-    }
-  );
-}
-function R(t, o, e, c, i, a) {
-  return "M" + (t + i) + "," + o + "H" + (t + e - a) + "a" + a + "," + a + " 0 0 1 " + a + "," + a + "V" + (o + c - a) + "a" + a + "," + a + " 0 0 1 " + -a + "," + a + "H" + (t + i) + "a" + i + "," + i + " 0 0 1 " + -i + "," + -i + "V" + (o + i) + "a" + i + "," + i + " 0 0 1 " + i + "," + -i + "Z";
-}
-function G({ inner: t, width: o, height: e }) {
-  const c = q().replace(/:/g, ""), i = t ? 8.4 : 1.25, a = 8.4;
-  return /* @__PURE__ */ b("svg", { className: "rc-duo-flat-frame", viewBox: "0 0 " + o + " " + e, "aria-hidden": "true", children: [
-    /* @__PURE__ */ b("defs", { children: [
-      /* @__PURE__ */ b("linearGradient", { id: c + "-silver", x1: "0", y1: "0", x2: "1", y2: "1", children: [
-        /* @__PURE__ */ n("stop", { offset: "0", stopColor: "#62676b" }),
-        /* @__PURE__ */ n("stop", { offset: "0.035", stopColor: "#f9faf9" }),
-        /* @__PURE__ */ n("stop", { offset: "0.11", stopColor: "#b0b4b6" }),
-        /* @__PURE__ */ n("stop", { offset: "0.31", stopColor: "#fdfefd" }),
-        /* @__PURE__ */ n("stop", { offset: "0.43", stopColor: "#797f84" }),
-        /* @__PURE__ */ n("stop", { offset: "0.51", stopColor: "#e8eaea" }),
-        /* @__PURE__ */ n("stop", { offset: "0.7", stopColor: "#979da1" }),
-        /* @__PURE__ */ n("stop", { offset: "0.87", stopColor: "#fafbf9" }),
-        /* @__PURE__ */ n("stop", { offset: "1", stopColor: "#5f676c" })
-      ] }),
-      /* @__PURE__ */ b("linearGradient", { id: c + "-spine", children: [
-        /* @__PURE__ */ n("stop", { stopColor: "#4a5154" }),
-        /* @__PURE__ */ n("stop", { offset: "0.16", stopColor: "#d6d9d9" }),
-        /* @__PURE__ */ n("stop", { offset: "0.4", stopColor: "#f8f9f7" }),
-        /* @__PURE__ */ n("stop", { offset: "0.62", stopColor: "#a2a8ab" }),
-        /* @__PURE__ */ n("stop", { offset: "0.83", stopColor: "#e4e7e5" }),
-        /* @__PURE__ */ n("stop", { offset: "1", stopColor: "#666e72" })
-      ] })
-    ] }),
-    !t && /* @__PURE__ */ b(L, { children: [
-      /* @__PURE__ */ n(
-        "rect",
-        {
-          x: "-2.3",
-          y: "0.7",
-          width: "3.3",
-          height: e - 1.4,
-          rx: "0.85",
-          fill: "url(#" + c + "-spine)",
-          stroke: "#8b9296",
-          strokeWidth: "0.15"
-        }
-      ),
-      /* @__PURE__ */ n("path", { d: "M-.6 2V" + (e - 2), stroke: "#f5f6f4", strokeWidth: "0.22" })
-    ] }),
-    /* @__PURE__ */ n(
-      "path",
-      {
-        d: R(0, 0, o, e, i, a),
-        fill: "url(#" + c + "-silver)",
-        stroke: "#696f72",
-        strokeWidth: "0.24"
-      }
-    ),
-    /* @__PURE__ */ n(
-      "path",
-      {
-        d: R(0.48, 0.48, o - 0.96, e - 0.96, Math.max(0.5, i - 0.48), a - 0.48),
-        fill: "none",
-        stroke: "#ffffff",
-        strokeOpacity: "0.85",
-        strokeWidth: "0.2"
-      }
-    ),
-    /* @__PURE__ */ n(
-      "path",
-      {
-        d: R(1.12, 1.12, o - 2.24, e - 2.24, t ? 7.15 : 0.65, 7.15),
-        fill: "#090b0d",
-        stroke: "#34393c",
-        strokeWidth: "0.2"
-      }
-    ),
-    [o - 16, t ? 19 : 16].map((l) => /* @__PURE__ */ n(et.Fragment, { children: /* @__PURE__ */ n(
-      "path",
-      {
-        d: "M" + l + ",0.17v0.82M" + l + "," + (e - 1) + "v0.82",
-        stroke: "#b1b2ac",
-        strokeWidth: "1.1"
-      }
-    ) }, l)),
-    t && [0, e - 0.6].map((l) => /* @__PURE__ */ n(
-      "rect",
-      {
-        x: o / 2 - 2.2,
-        y: l,
-        width: "4.4",
-        height: "0.6",
-        rx: "0.18",
-        fill: "url(#" + c + "-spine)",
-        stroke: "#697074",
-        strokeWidth: "0.14"
-      },
-      l
-    )),
-    /* @__PURE__ */ n(
-      "path",
-      {
-        d: "M" + (o - 0.1) + ",20h-.9m.9," + (e - 40) + "h-.9",
-        stroke: "#b1b2ac",
-        strokeWidth: "1.05"
-      }
-    )
-  ] });
-}
-function A(t, o, e, c) {
-  const i = _.width / (t ? 1 : 2), a = _.height, l = t ? 157.5 : 77.1, f = t ? 110.8 : 112.2, u = (o + (t ? 3 : 0)) % 4, d = Math.max(
-    0,
-    Math.min(
-      (e - 120) / (u % 2 ? a : i),
-      (c - 120) / (u % 2 ? i : a)
-    )
-  ), x = (h, y) => {
-    h = (h - i / 2) * d, y = (y - a / 2) * d;
-    const C = u === 1 ? { x: -y, y: h } : u === 2 ? { x: -h, y: -y } : u === 3 ? { x: y, y: -h } : { x: h, y };
-    return { x: C.x + e / 2, y: C.y + c / 2 };
-  }, P = (u % 2 ? a : i) * d, W = (u % 2 ? i : a) * d, m = {
-    min: { x: (e - P) / 2, y: (c - W) / 2 },
-    max: { x: (e + P) / 2, y: (c + W) / 2 }
-  }, p = [
-    { button: "volumeDown", x: i - 37, y: -0.32, width: 9.5, height: 0.65, edge: "top" },
-    { button: "volumeUp", x: i - 25, y: -0.32, width: 9.5, height: 0.65, edge: "top" },
-    { button: "side", x: i + 0.35, y: a / 2 - 21, width: 0.7, height: 13, edge: "right" }
-  ], v = ["top", "right", "bottom", "left"], w = p.map((h) => {
-    const y = v[(v.indexOf(h.edge) + u) % 4], C = x(h.x, h.y);
-    return y === "top" && (C.y = m.min.y - 28), y === "bottom" && (C.y = m.max.y + 28), y === "left" && (C.x = m.min.x - 28), y === "right" && (C.x = m.max.x + 28), { button: h.button, edge: y, ...C, targetX: C.x, targetY: C.y };
-  }), g = w.filter((h) => h.button !== "side"), D = u % 2 ? "y" : "x";
-  g.sort((h, y) => h[D] - y[D]);
-  const N = u % 2 ? "targetY" : "targetX";
-  if (g[1][D] - g[0][D] < 44) {
-    const h = (g[0][D] + g[1][D]) / 2;
-    g[0][N] = h - 22, g[1][N] = h + 22;
-  }
-  return {
-    bodyWidth: i,
-    bodyHeight: a,
-    screenWidth: l,
-    screenHeight: f,
-    scale: d,
-    turns: u,
-    buttons: p,
-    guides: w,
-    rect: m,
-    iconSize: Math.min(ht(m), 12 * d)
-  };
-}
-function ht(t) {
-  return Math.max(12, Math.min(24, Math.max(t.max.x - t.min.x, t.max.y - t.min.y) / 24));
-}
-function ft(t, o, e) {
-  return [
-    ["top", e.min.y - o, t, e.min.x, e.max.x],
-    ["bottom", o - e.max.y, t, e.min.x, e.max.x],
-    ["left", e.min.x - t, o, e.min.y, e.max.y],
-    ["right", t - e.max.x, o, e.min.y, e.max.y]
-  ].filter(
-    ([, i, a, l, f]) => i >= -7 && i <= 52 && a >= l - 12 && a <= f + 12
-  ).sort((i, a) => Math.abs(i[1]) - Math.abs(a[1]))[0]?.[0];
-}
-function U(t) {
-  if (!t || t.readyState < 2 || !t.videoWidth || !t.videoHeight) return;
-  const o = Math.min(1, 1024 / Math.max(t.videoWidth, t.videoHeight)), e = document.createElement("canvas");
-  try {
-    const c = e.getContext("2d");
-    return c ? (e.width = Math.round(t.videoWidth * o), e.height = Math.round(t.videoHeight * o), c.drawImage(t, 0, 0, e.width, e.height), e) : void 0;
-  } catch {
-    return;
-  }
-}
-function mt(t, o) {
-  let e = !1, c;
-  const i = (d) => {
-    e || (u(), o(d));
-  }, a = () => {
-    if (e) return;
-    const d = U(t);
-    d && i(d);
-  }, l = () => {
-    c = void 0, a(), e || (c = t?.requestVideoFrameCallback?.(l));
-  }, f = setTimeout(() => i(void 0), 2500);
-  c = t?.requestVideoFrameCallback?.(l), t?.addEventListener("loadeddata", a), !t?.requestVideoFrameCallback && t && t.readyState >= 2 && a();
-  function u() {
-    e = !0, clearTimeout(f), c !== void 0 && t?.cancelVideoFrameCallback(c), t?.removeEventListener("loadeddata", a);
-  }
-  return u;
-}
-function pt(t, o, e, c) {
-  const i = M(void 0), a = M(c), l = M({ inner: o, frame: e });
-  l.current = { inner: o, frame: e };
-  const [f, u] = I(), d = M(void 0), x = M(void 0), P = rt(() => {
-    clearTimeout(x.current), d.current = void 0, u(void 0);
-  }, []), W = (m) => {
-    if (m === o) {
-      P();
-      return;
-    }
-    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || d.current) return;
-    const p = U(t.current);
-    if (!p) return;
-    const v = l.current;
-    d.current = { from: v, to: v, before: p, ready: !1 }, u(d.current), x.current = setTimeout(P, 5e3);
-  };
-  return H(() => () => clearTimeout(x.current), []), nt(() => {
-    const m = i.current, p = { inner: o, frame: e };
-    i.current = p;
-    const v = a.current !== c;
-    if (a.current = c, !m) return;
-    if (Math.abs(m.frame.rect.min.x + m.frame.rect.max.x - e.rect.min.x - e.rect.max.x) > 0.5 || Math.abs(m.frame.rect.min.y + m.frame.rect.max.y - e.rect.min.y - e.rect.max.y) > 0.5 || v) {
-      P();
-      return;
-    }
-    if (m.inner === o || (u(void 0), !m.frame.scale || !e.scale) || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
-    const g = d.current?.before ?? U(t.current), D = d.current?.from ?? m;
-    clearTimeout(x.current), d.current = void 0, g && (p.frame = A(
-      o,
-      (D.frame.turns + (o ? 1 : 0)) % 4,
-      e.rect.min.x + e.rect.max.x,
-      e.rect.min.y + e.rect.max.y
-    ), u({ from: D, to: p, before: g, ready: !1 }));
-  }, [o, e.scale, e.turns, e.rect.min.x, e.rect.min.y, c]), H(() => {
-    if (!f || f.from.inner === o) return;
-    const m = mt(t.current, (w) => {
-      w ? u((g) => g && { ...g, after: w, ready: !0 }) : P();
-    }), p = window.matchMedia?.("(prefers-reduced-motion: reduce)"), v = () => {
-      p?.matches && u(void 0);
-    };
-    return p?.addEventListener("change", v), () => {
-      m(), p?.removeEventListener("change", v);
-    };
-  }, [f?.from, o]), { motion: f, finish: P, prepare: W };
-}
-function gt({ pose: t, image: o, scale: e }) {
-  const { bodyWidth: c, bodyHeight: i, screenWidth: a, screenHeight: l } = t.frame, f = a * e, u = l * e;
-  return /* @__PURE__ */ b("div", { className: "rc-duo-fold-still", style: { width: c * e, height: i * e }, children: [
-    /* @__PURE__ */ n(G, { inner: t.inner, width: c, height: i }),
-    /* @__PURE__ */ n(
-      "div",
-      {
-        className: "rc-duo-flat-screen",
-        style: {
-          width: f,
-          height: u,
-          left: (c - a) * e / 2,
-          top: (i - l) * e / 2,
-          borderRadius: t.inner ? 5.3 * e : [0.8, 6.6, 6.6, 0.8].map((d) => d * e + "px").join(" ")
-        },
-        children: o && /* @__PURE__ */ n(
-          "canvas",
-          {
-            ref: (d) => {
-              d && (d.width = o.width, d.height = o.height, d.getContext("2d")?.drawImage(o, 0, 0));
-            },
-            style: {
-              width: t.inner ? u : f,
-              height: t.inner ? f : u,
-              transform: `translate(-50%, -50%) rotate(${t.inner ? 90 : 0}deg)`
-            }
-          }
-        )
-      }
-    )
-  ] });
-}
-function yt({ motion: t, onFinish: o }) {
-  const e = M(null), [c, i] = I(!1);
-  return H(() => {
-    if (i(!1), !t.ready) return;
-    let a = !1, l;
-    return import("./duo-fold-renderer-BXejNHcY.mjs").then(({ renderFold: f }) => {
-      a || !e.current || (l = f(e.current, t, o), i(!0));
-    }).catch(() => {
-      a || o();
-    }), () => {
-      a = !0, l?.();
-    };
-  }, [t.ready, t.from, o]), /* @__PURE__ */ b(L, { children: [
-    !c && /* @__PURE__ */ n(
-      "div",
-      {
-        className: "rc-duo-fold-hold",
-        "aria-hidden": "true",
-        style: {
-          width: t.from.frame.bodyWidth * t.from.frame.scale,
-          height: t.from.frame.bodyHeight * t.from.frame.scale,
-          transform: `translate(-50%, -50%) rotate(${t.from.frame.turns * 90}deg)`
-        },
-        children: /* @__PURE__ */ n(gt, { pose: t.from, image: t.before, scale: t.from.frame.scale })
-      }
-    ),
-    /* @__PURE__ */ n(
-      "canvas",
-      {
-        ref: e,
-        className: "rc-duo-fold-canvas",
-        "aria-hidden": "true",
-        style: { visibility: c ? "visible" : "hidden" }
-      }
-    )
-  ] });
-}
-const bt = it(() => import("./duo-frame-BzyYljix.mjs").then((t) => t.ac));
-function xt(t) {
-  const [o, e] = I("2d");
-  return /* @__PURE__ */ b("div", { className: "rc-duo-view", children: [
-    o === "3d" ? /* @__PURE__ */ n(ot, { fallback: /* @__PURE__ */ n($, { ...t }), children: /* @__PURE__ */ n(bt, { ...t }) }) : /* @__PURE__ */ n($, { ...t }),
-    /* @__PURE__ */ b("div", { className: "rc-duo-mode", role: "group", "aria-label": "Device rendering", children: [
-      /* @__PURE__ */ n("button", { type: "button", "aria-pressed": o === "2d", onClick: () => e("2d"), children: "2D" }),
-      /* @__PURE__ */ n("button", { type: "button", "aria-pressed": o === "3d", onClick: () => e("3d"), children: "3D" })
-    ] })
-  ] });
-}
-function $(t) {
-  const o = M(null), e = M(null), c = M(t);
-  c.current = t;
-  const [i, a] = I({ width: 0, height: 0 }), [l, f] = I(), [u, d] = I(), [x, P] = I(), [W, m] = I(), p = M(void 0), v = M(null), w = t.state.displays.find(
-    (r) => r.id === (t.state.angleDegrees < 90 ? "outer" : "inner")
-  ), g = w?.id === "inner" ? t.inner : t.outer, D = w?.orientation === 2 ? 2 : w?.orientation === 3 ? 1 : w?.orientation === 4 ? 3 : 0, N = w?.id === "inner", h = A(N, D, i.width, i.height), { bodyWidth: y, bodyHeight: C, screenWidth: V, screenHeight: B, scale: k } = h, j = V * k, z = B * k;
-  H(() => {
-    const r = new ResizeObserver(([s]) => {
-      s && a({ width: s.contentRect.width, height: s.contentRect.height });
-    });
-    return o.current && r.observe(o.current), () => r.disconnect();
-  }, []), H(() => {
-    const r = e.current;
-    if (!r || !g) return;
-    const s = () => {
-      r.srcObject !== g.srcObject && (r.srcObject = g.srcObject), r.play().catch(() => {
-      }), t.outer?.pause(), t.inner?.pause();
-    };
-    return s(), g.addEventListener("loadedmetadata", s), () => {
-      g.removeEventListener("loadedmetadata", s), r.pause(), r.srcObject = null;
-      for (const T of [t.outer, t.inner]) T?.play().catch(() => {
-      });
-    };
-  }, [g, t.outer, t.inner]);
-  const {
-    motion: S,
-    finish: K,
-    prepare: Z
-  } = pt(e, N, h, t.state.orientation), { angle: J, changeAngle: Q, interacting: tt } = dt(
-    t.state.angleDegrees,
-    async (r) => {
-      Z(r >= 90);
-      try {
-        await t.setAngle(r);
-      } catch (s) {
-        throw K(), s;
-      }
-    },
-    f
-  ), E = () => {
-    if (!p.current) return;
-    const { screenId: r, x: s, y: T } = p.current;
-    c.current.touch(1, r, s, T), p.current = void 0;
-  };
-  H(() => {
-    v.current = new st(
-      (s, T) => c.current.button(s, T),
-      (s) => f(String(s))
-    );
-    const r = () => {
-      E(), v.current?.release(), m(void 0);
-    };
-    return window.addEventListener("blur", r), () => {
-      r(), window.removeEventListener("blur", r);
-    };
-  }, []), H(() => {
-    E();
-  }, [w?.screenId, D]);
-  const F = () => {
-    v.current?.release(), m(void 0);
-  }, X = (r) => ({
-    onPointerDown: (s) => {
-      S || s.button !== 0 || (s.currentTarget.setPointerCapture(s.pointerId), v.current?.press(r), m(r));
-    },
-    onPointerUp: F,
-    onPointerCancel: F,
-    onLostPointerCapture: F,
-    onBlur: F,
-    onPointerEnter: () => P(r),
-    onPointerLeave: () => P(void 0),
-    onFocus: () => d(h.guides.find((s) => s.button === r)?.edge),
-    onKeyDown: (s) => {
-      S || (s.key === "Enter" || s.key === " ") && (s.preventDefault(), s.repeat || (v.current?.press(r), m(r)));
-    },
-    onKeyUp: (s) => {
-      (s.key === "Enter" || s.key === " ") && (s.preventDefault(), F());
-    }
-  }), Y = (r) => {
-    const s = r.currentTarget.getBoundingClientRect();
-    return ct(
-      (r.clientX - s.left) / s.width,
-      (r.clientY - s.top) / s.height,
-      D
-    );
-  };
-  return /* @__PURE__ */ b("div", { className: "rc-duo", children: [
-    /* @__PURE__ */ b(
-      "div",
-      {
-        ref: o,
-        className: "rc-duo-flat-stage",
-        "data-folding": !!S,
-        "aria-busy": !!S,
-        onPointerMove: (r) => {
-          const s = r.currentTarget.getBoundingClientRect();
-          d(ft(r.clientX - s.left, r.clientY - s.top, h.rect));
-        },
-        onPointerLeave: () => {
-          d(void 0), P(void 0);
-        },
-        children: [
-          /* @__PURE__ */ b(
-            "div",
-            {
-              className: "rc-duo-flat-device",
-              "data-display": N ? "inner" : "outer",
-              style: {
-                width: y * k,
-                height: C * k,
-                transform: "translate(-50%, -50%) rotate(" + h.turns * 90 + "deg)"
-              },
-              children: [
-                /* @__PURE__ */ n(G, { inner: N, width: y, height: C }),
-                /* @__PURE__ */ n(
-                  "div",
-                  {
-                    className: "rc-duo-flat-screen",
-                    role: "application",
-                    "aria-label": "iPhone Duo 2D simulator",
-                    tabIndex: 0,
-                    style: {
-                      width: j,
-                      height: z,
-                      left: (y - V) / 2 * k,
-                      top: (C - B) / 2 * k,
-                      borderRadius: N ? 5.3 * k : [0.8, 6.6, 6.6, 0.8].map((r) => r * k + "px").join(" ")
-                    },
-                    onKeyDown: S ? void 0 : t.onKeyDown,
-                    onKeyUp: t.onKeyUp,
-                    onPointerDown: (r) => {
-                      if (S || p.current || r.button !== 0 || !w) return;
-                      r.currentTarget.focus({ preventScroll: !0 }), r.currentTarget.setPointerCapture(r.pointerId);
-                      const s = Y(r);
-                      p.current = { pointer: r.pointerId, screenId: w.screenId, ...s }, t.touch(0, w.screenId, s.x, s.y);
-                    },
-                    onPointerMove: (r) => {
-                      if (p.current?.pointer !== r.pointerId) return;
-                      const s = Y(r);
-                      Object.assign(p.current, s), t.touch(2, p.current.screenId, s.x, s.y);
-                    },
-                    onPointerUp: (r) => {
-                      p.current?.pointer === r.pointerId && E();
-                    },
-                    onPointerCancel: E,
-                    onLostPointerCapture: E,
-                    children: /* @__PURE__ */ n(
-                      "video",
-                      {
-                        ref: e,
-                        autoPlay: !0,
-                        muted: !0,
-                        playsInline: !0,
-                        style: {
-                          width: N ? z : j,
-                          height: N ? j : z,
-                          transform: "translate(-50%, -50%) rotate(" + (N ? 90 : 0) + "deg)"
-                        }
-                      }
-                    )
-                  }
-                ),
-                h.buttons.map((r) => /* @__PURE__ */ n(
-                  "button",
-                  {
-                    type: "button",
-                    className: "rc-duo-physical",
-                    "data-duo-button": r.button,
-                    "data-edge": r.edge,
-                    "data-highlighted": x === r.button,
-                    "data-pressed": W === r.button,
-                    "aria-label": O[r.button] + " physical button",
-                    title: O[r.button],
-                    style: {
-                      left: r.x * k,
-                      top: r.y * k,
-                      width: r.edge === "top" ? Math.max(28, r.width * k) : 28,
-                      height: r.edge === "top" ? 28 : Math.max(28, r.height * k)
-                    },
-                    ...X(r.button),
-                    children: /* @__PURE__ */ n("span", { style: { width: Math.max(2, r.width * k), height: Math.max(2, r.height * k) } })
-                  },
-                  r.button
-                ))
-              ]
-            }
-          ),
-          h.guides.map((r) => /* @__PURE__ */ n(
-            "button",
-            {
-              type: "button",
-              className: "rc-duo-hardware",
-              "data-duo-button": r.button,
-              "data-visible": u === r.edge,
-              "data-pressed": W === r.button,
-              "aria-label": O[r.button],
-              title: O[r.button],
-              style: {
-                left: r.targetX,
-                top: r.targetY,
-                "--duo-hardware-icon-size": `${h.iconSize}px`,
-                "--duo-hardware-icon-x": `${r.x - r.targetX}px`,
-                "--duo-hardware-icon-y": `${r.y - r.targetY}px`
-              },
-              ...X(r.button),
-              children: /* @__PURE__ */ n(lt, { button: r.button })
-            },
-            r.button
-          )),
-          S && /* @__PURE__ */ n(yt, { motion: S, onFinish: K })
-        ]
-      }
-    ),
-    /* @__PURE__ */ n(
-      ut,
-      {
-        angle: J,
-        changeAngle: Q,
-        interacting: tt,
-        rotate: () => {
-          t.setOrientation(t.state.orientation === "portrait" ? "landscape-left" : "portrait").catch((r) => f(String(r)));
-        },
-        children: /* @__PURE__ */ n("span", { className: "rc-duo-view-label", children: "Front view" })
-      }
-    ),
-    l && /* @__PURE__ */ n("div", { role: "alert", className: "rc-duo-error", children: l })
-  ] });
-}
-const Ct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: xt
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  lt as D,
-  ut as a,
-  Ct as d,
-  ft as f,
-  ht as h,
-  dt as u
-};