@limrun/ui 0.17.0-rc.2 → 0.17.0-rc.4

package/dist/duo-view-BEkVGxom.mjs

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