@limrun/ui 0.15.1 → 0.17.0-rc.1

package/dist/duo-view-o1yxIzxu.mjs

@@ -0,0 +1,654 @@
+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
+};

package/dist/frame-assets.d.ts

@@ -0,0 +1,2 @@
+import { RemoteControlAssets } from './components/remote-control';
+export declare const defaultRemoteControlAssets: RemoteControlAssets;