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

package/dist/duo-view-D9Ae00rj.mjs

@@ -1,512 +0,0 @@
-import { jsx as i, jsxs as p, Fragment as K } from "react/jsx-runtime";
-import { useId as te, useState as C, useRef as y, useEffect as F, useCallback as re, useLayoutEffect as ne, Suspense as oe, lazy as ie } from "react";
-import { H as ae, h as A, D as G, i as ce, j as se, k as O, l as de, m as ue } from "./remote-control-DiddxS8l.mjs";
-function le(e, n, r) {
-  const [c, d] = C(e), s = y({ nativeAngle: e, send: n, failed: r });
-  s.current = { nativeAngle: e, send: n, failed: r };
-  const u = y(void 0), f = y(!1), l = y(null);
-  return F(() => (l.current = new ae(
-    async (h) => {
-      await s.current.send(h), u.current === h && (u.current = void 0);
-    },
-    (h) => {
-      u.current = void 0, s.current.failed(String(h)), d(s.current.nativeAngle);
-    }
-  ), () => l.current?.stop()), []), F(() => {
-    !f.current && u.current === void 0 && d(e);
-  }, [e]), { angle: c, changeAngle: (h) => {
-    s.current.failed(void 0), u.current = h, d(h), l.current?.set(h);
-  }, interacting: f };
-}
-function he({
-  angle: e,
-  changeAngle: n,
-  interacting: r,
-  rotate: c,
-  onFold: d,
-  foldTarget: s,
-  onHingeDrag: u,
-  children: f
-}) {
-  const l = te();
-  return /* @__PURE__ */ p("div", { className: "rc-duo-controls", onPointerDown: (a) => a.stopPropagation(), children: [
-    /* @__PURE__ */ p("div", { className: "rc-duo-hinge", children: [
-      /* @__PURE__ */ i("button", { className: "rc-duo-fold", onClick: d ?? (() => n(e < 90 ? 180 : 0)), children: (s ?? e) < 90 ? "Unfold" : "Fold" }),
-      /* @__PURE__ */ i("label", { htmlFor: l, children: "Hinge" }),
-      /* @__PURE__ */ i(
-        "input",
-        {
-          id: l,
-          type: "range",
-          min: 0,
-          max: 180,
-          step: 1,
-          value: e,
-          onPointerDown: (a) => {
-            u?.(), r.current = !0, a.currentTarget.setPointerCapture(a.pointerId);
-          },
-          onPointerUp: () => {
-            r.current = !1;
-          },
-          onPointerCancel: () => {
-            r.current = !1;
-          },
-          onLostPointerCapture: () => {
-            r.current = !1;
-          },
-          onChange: (a) => n(Number(a.target.value))
-        }
-      ),
-      /* @__PURE__ */ p("output", { children: [
-        Math.round(e),
-        "°"
-      ] }),
-      /* @__PURE__ */ i("button", { className: "rc-duo-rotate", "aria-label": "Rotate device", title: "Rotate device", onClick: c, children: /* @__PURE__ */ p(
-        "svg",
-        {
-          viewBox: "0 0 24 24",
-          width: "18",
-          height: "18",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.6",
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ i("rect", { x: "7", y: "3", width: "10", height: "18", rx: "2" }),
-            /* @__PURE__ */ i("path", { d: "M3 9a9 9 0 0 1 3-5M3 4v5h5M21 15a9 9 0 0 1-3 5m3 0v-5h-5" })
-          ]
-        }
-      ) })
-    ] }),
-    f && /* @__PURE__ */ i("div", { className: "rc-duo-views", "aria-label": "Device view", children: f })
-  ] });
-}
-function fe({ button: e }) {
-  return /* @__PURE__ */ i(
-    "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: e === "side" ? /* @__PURE__ */ p(K, { children: [
-        /* @__PURE__ */ i("rect", { x: "6", y: "10", width: "12", height: "11", rx: "2" }),
-        /* @__PURE__ */ i("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
-      ] }) : /* @__PURE__ */ p(K, { children: [
-        /* @__PURE__ */ i("path", { d: "M3 9h4l5-5v16l-5-5H3zM17 12h5" }),
-        e === "volumeUp" && /* @__PURE__ */ i("path", { d: "M19.5 9.5v5" })
-      ] })
-    }
-  );
-}
-function _(e) {
-  if (!e || e.readyState < 2 || !e.videoWidth || !e.videoHeight) return;
-  const n = Math.min(1, 1024 / Math.max(e.videoWidth, e.videoHeight)), r = document.createElement("canvas");
-  try {
-    const c = r.getContext("2d");
-    return c ? (r.width = Math.round(e.videoWidth * n), r.height = Math.round(e.videoHeight * n), c.drawImage(e, 0, 0, r.width, r.height), r) : void 0;
-  } catch {
-    return;
-  }
-}
-function me(e, n) {
-  let r = !1, c;
-  const d = (a) => {
-    r || (l(), n(a));
-  }, s = () => {
-    if (r) return;
-    const a = _(e);
-    a && d(a);
-  }, u = () => {
-    c = void 0, s(), r || (c = e?.requestVideoFrameCallback?.(u));
-  }, f = setTimeout(() => d(void 0), 2500);
-  c = e?.requestVideoFrameCallback?.(u), e?.addEventListener("loadeddata", s), !e?.requestVideoFrameCallback && e && e.readyState >= 2 && s();
-  function l() {
-    r = !0, clearTimeout(f), c !== void 0 && e?.cancelVideoFrameCallback(c), e?.removeEventListener("loadeddata", s);
-  }
-  return l;
-}
-function ge(e, n, r, c, d = !0) {
-  const s = y(void 0), u = y(c), f = y({ inner: n, frame: r });
-  f.current = { inner: n, frame: r };
-  const [l, a] = C(), h = y(void 0), E = y(void 0), k = re(() => {
-    clearTimeout(E.current), h.current = void 0, a(void 0);
-  }, []), R = (m) => {
-    if (!d || m === n) {
-      k();
-      return;
-    }
-    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || h.current) return;
-    const x = _(e.current);
-    if (!x) return;
-    const D = f.current;
-    h.current = { from: D, to: D, before: x, ready: !1 }, a(h.current), E.current = setTimeout(k, 5e3);
-  };
-  return F(() => () => clearTimeout(E.current), []), ne(() => {
-    const m = s.current, x = { inner: n, frame: r };
-    s.current = x;
-    const D = u.current !== c;
-    if (u.current = c, !m) return;
-    const w = Math.abs(m.frame.rect.min.x + m.frame.rect.max.x - r.rect.min.x - r.rect.max.x) > 0.5 || Math.abs(m.frame.rect.min.y + m.frame.rect.max.y - r.rect.min.y - r.rect.max.y) > 0.5;
-    if (!d || w || D) {
-      k();
-      return;
-    }
-    if (m.inner === n || (a(void 0), !m.frame.scale || !r.scale) || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
-    const M = h.current?.before ?? _(e.current), g = h.current?.from ?? m;
-    clearTimeout(E.current), h.current = void 0, M && (x.frame = A(
-      n,
-      (g.frame.turns + (n ? 1 : 0)) % 4,
-      r.rect.min.x + r.rect.max.x,
-      r.rect.min.y + r.rect.max.y
-    ), a({ from: g, to: x, before: M, ready: !1 }));
-  }, [n, r.scale, r.turns, r.rect.min.x, r.rect.min.y, c, d]), F(() => {
-    if (!l || l.from.inner === n) return;
-    const m = me(e.current, (w) => {
-      w ? a((M) => M && { ...M, after: w, ready: !0 }) : k();
-    }), x = window.matchMedia?.("(prefers-reduced-motion: reduce)"), D = () => {
-      x?.matches && a(void 0);
-    };
-    return x?.addEventListener("change", D), () => {
-      m(), x?.removeEventListener("change", D);
-    };
-  }, [l?.from, n]), { motion: l, finish: k, prepare: R };
-}
-function ye({ pose: e, image: n, scale: r }) {
-  const { bodyWidth: c, bodyHeight: d, screenWidth: s, screenHeight: u } = e.frame, f = s * r, l = u * r;
-  return /* @__PURE__ */ p("div", { className: "rc-duo-fold-still", style: { width: c * r, height: d * r }, children: [
-    /* @__PURE__ */ i(G, { inner: e.inner, width: c, height: d }),
-    /* @__PURE__ */ i(
-      "div",
-      {
-        className: "rc-duo-flat-screen",
-        style: {
-          width: f,
-          height: l,
-          left: (c - s) * r / 2,
-          top: (d - u) * r / 2,
-          borderRadius: e.inner ? 5.3 * r : [0.8, 6.6, 6.6, 0.8].map((a) => a * r + "px").join(" ")
-        },
-        children: n && /* @__PURE__ */ i(
-          "canvas",
-          {
-            ref: (a) => {
-              a && (a.width = n.width, a.height = n.height, a.getContext("2d")?.drawImage(n, 0, 0));
-            },
-            style: {
-              width: e.inner ? l : f,
-              height: e.inner ? f : l,
-              transform: `translate(-50%, -50%) rotate(${e.inner ? 90 : 0}deg)`
-            }
-          }
-        )
-      }
-    )
-  ] });
-}
-function we({ motion: e, onFinish: n }) {
-  const r = y(null), [c, d] = C(!1);
-  return F(() => {
-    if (d(!1), !e.ready) return;
-    let s = !1, u;
-    return import("./duo-fold-renderer-BXejNHcY.mjs").then(({ renderFold: f }) => {
-      s || !r.current || (u = f(r.current, e, n), d(!0));
-    }).catch(() => {
-      s || n();
-    }), () => {
-      s = !0, u?.();
-    };
-  }, [e.ready, e.from, n]), /* @__PURE__ */ p(K, { children: [
-    !c && /* @__PURE__ */ i(
-      "div",
-      {
-        className: "rc-duo-fold-hold",
-        "aria-hidden": "true",
-        style: {
-          width: e.from.frame.bodyWidth * e.from.frame.scale,
-          height: e.from.frame.bodyHeight * e.from.frame.scale,
-          transform: `translate(-50%, -50%) rotate(${e.from.frame.turns * 90}deg)`
-        },
-        children: /* @__PURE__ */ i(ye, { pose: e.from, image: e.before, scale: e.from.frame.scale })
-      }
-    ),
-    /* @__PURE__ */ i(
-      "canvas",
-      {
-        ref: r,
-        className: "rc-duo-fold-canvas",
-        "aria-hidden": "true",
-        style: { visibility: c ? "visible" : "hidden" }
-      }
-    )
-  ] });
-}
-const ve = ie(() => import("./duo-frame-Cmw4p2uN.mjs").then((e) => e.ac));
-function be(e) {
-  const [n, r] = C("2d");
-  return /* @__PURE__ */ p("div", { className: "rc-duo-view", children: [
-    e.showFrame !== !1 && n === "3d" ? /* @__PURE__ */ i(oe, { fallback: /* @__PURE__ */ i(q, { ...e }), children: /* @__PURE__ */ i(ve, { ...e }) }) : /* @__PURE__ */ i(q, { ...e }),
-    e.showFrame !== !1 && /* @__PURE__ */ p("div", { className: "rc-duo-mode", role: "group", "aria-label": "Device rendering", children: [
-      /* @__PURE__ */ i("button", { type: "button", "aria-pressed": n === "2d", onClick: () => r("2d"), children: "2D" }),
-      /* @__PURE__ */ i("button", { type: "button", "aria-pressed": n === "3d", onClick: () => r("3d"), children: "3D" })
-    ] })
-  ] });
-}
-function q(e) {
-  const n = e.showFrame !== !1, r = y(null), c = y(null), d = y(e);
-  d.current = e;
-  const [s, u] = C({ width: 0, height: 0 }), [f, l] = C(!1), [a, h] = C(), [E, k] = C(), [R, m] = C(), [x, D] = C(), w = y(void 0), M = y(null), g = e.state.displays.find(
-    (t) => t.id === (e.state.angleDegrees < 90 ? "outer" : "inner")
-  ), H = g?.id === "inner" ? e.inner : e.outer, W = g?.orientation === 2 ? 2 : g?.orientation === 3 ? 1 : g?.orientation === 4 ? 3 : 0, P = g?.id === "inner", v = A(P, W, s.width, s.height), U = n ? v.screenWidth : (P ? g?.height : g?.width) ?? 1, z = n ? v.screenHeight : (P ? g?.width : g?.height) ?? 1, I = n ? v.bodyWidth : U, L = n ? v.bodyHeight : z, b = n ? v.scale : Math.max(
-    0,
-    Math.min(
-      s.width / (v.turns % 2 ? L : I),
-      s.height / (v.turns % 2 ? I : L)
-    )
-  ), B = U * b, V = z * b;
-  F(() => {
-    const t = new ResizeObserver(([o]) => {
-      o && u({ width: o.contentRect.width, height: o.contentRect.height });
-    });
-    return r.current && t.observe(r.current), () => t.disconnect();
-  }, []), F(() => {
-    const t = c.current;
-    if (!t || !H) return;
-    const o = () => {
-      t.srcObject !== H.srcObject && (t.srcObject = H.srcObject), t.play().catch(() => {
-      }), e.outer?.pause(), e.inner?.pause();
-    };
-    return o(), H.addEventListener("loadedmetadata", o), () => {
-      H.removeEventListener("loadedmetadata", o), t.pause(), t.srcObject = null;
-      for (const j of [e.outer, e.inner]) j?.play().catch(() => {
-      });
-    };
-  }, [H, e.outer, e.inner]);
-  const {
-    motion: N,
-    finish: $,
-    prepare: J
-  } = ge(c, P, v, e.state.orientation, n), { angle: Q, changeAngle: Z, interacting: ee } = le(
-    e.state.angleDegrees,
-    async (t) => {
-      J(t >= 90);
-      try {
-        await e.setAngle(t);
-      } catch (o) {
-        throw $(), o;
-      }
-    },
-    h
-  ), T = () => {
-    if (!w.current) return;
-    const { screenId: t, x: o, y: j } = w.current;
-    d.current.touch(1, t, o, j), w.current = void 0;
-  };
-  F(() => {
-    M.current = new ce(
-      (o, j) => d.current.button(o, j),
-      (o) => h(String(o))
-    );
-    const t = () => {
-      T(), M.current?.release(), D(void 0);
-    };
-    return window.addEventListener("blur", t), () => {
-      t(), window.removeEventListener("blur", t);
-    };
-  }, []), F(() => {
-    T();
-  }, [g?.screenId, W]);
-  const S = () => {
-    M.current?.release(), D(void 0);
-  }, X = (t) => ({
-    onPointerDown: (o) => {
-      N || o.button !== 0 || (o.currentTarget.setPointerCapture(o.pointerId), M.current?.press(t), D(t));
-    },
-    onPointerUp: S,
-    onPointerCancel: S,
-    onLostPointerCapture: S,
-    onBlur: S,
-    onPointerEnter: () => m(t),
-    onPointerLeave: () => m(void 0),
-    onFocus: () => k(v.guides.find((o) => o.button === t)?.edge),
-    onKeyDown: (o) => {
-      N || (o.key === "Enter" || o.key === " ") && (o.preventDefault(), o.repeat || (M.current?.press(t), D(t)));
-    },
-    onKeyUp: (o) => {
-      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), S());
-    }
-  }), Y = (t) => {
-    const o = t.currentTarget.getBoundingClientRect();
-    return ue(
-      (t.clientX - o.left) / o.width,
-      (t.clientY - o.top) / o.height,
-      W
-    );
-  };
-  return /* @__PURE__ */ p("div", { className: n ? "rc-duo" : "rc-duo rc-duo-frameless", children: [
-    /* @__PURE__ */ p(
-      "div",
-      {
-        ref: r,
-        className: "rc-duo-flat-stage",
-        "data-folding": !!N,
-        "aria-busy": !!N,
-        onPointerMove: (t) => {
-          if (!n) return;
-          const o = t.currentTarget.getBoundingClientRect();
-          k(de(t.clientX - o.left, t.clientY - o.top, v.rect));
-        },
-        onPointerLeave: () => {
-          k(void 0), m(void 0);
-        },
-        children: [
-          /* @__PURE__ */ p(
-            "div",
-            {
-              className: "rc-duo-flat-device",
-              "data-display": P ? "inner" : "outer",
-              style: {
-                width: I * b,
-                height: L * b,
-                transform: "translate(-50%, -50%) rotate(" + v.turns * 90 + "deg)"
-              },
-              children: [
-                n && /* @__PURE__ */ i(G, { inner: P, width: I, height: L }),
-                /* @__PURE__ */ p(
-                  "div",
-                  {
-                    className: "rc-duo-flat-screen",
-                    role: "application",
-                    "aria-label": "iPhone Duo 2D simulator",
-                    tabIndex: 0,
-                    style: {
-                      width: B,
-                      height: V,
-                      left: (I - U) / 2 * b,
-                      top: (L - z) / 2 * b,
-                      borderRadius: n ? P ? 5.3 * b : [0.8, 6.6, 6.6, 0.8].map((t) => t * b + "px").join(" ") : 0
-                    },
-                    onKeyDown: N ? void 0 : e.onKeyDown,
-                    onKeyUp: e.onKeyUp,
-                    onPointerDown: (t) => {
-                      if (N || w.current || t.button !== 0 || !g) return;
-                      t.currentTarget.focus({ preventScroll: !0 }), t.currentTarget.setPointerCapture(t.pointerId);
-                      const o = Y(t);
-                      w.current = { pointer: t.pointerId, screenId: g.screenId, ...o }, e.touch(0, g.screenId, o.x, o.y);
-                    },
-                    onPointerMove: (t) => {
-                      if (w.current?.pointer !== t.pointerId) return;
-                      const o = Y(t);
-                      Object.assign(w.current, o), e.touch(2, w.current.screenId, o.x, o.y);
-                    },
-                    onPointerUp: (t) => {
-                      w.current?.pointer === t.pointerId && T();
-                    },
-                    onPointerCancel: T,
-                    onLostPointerCapture: T,
-                    children: [
-                      /* @__PURE__ */ i(
-                        "video",
-                        {
-                          ref: c,
-                          onPlaying: () => l(!0),
-                          autoPlay: !0,
-                          muted: !0,
-                          playsInline: !0,
-                          style: {
-                            width: P ? V : B,
-                            height: P ? B : V,
-                            transform: "translate(-50%, -50%) rotate(" + (P ? 90 : 0) + "deg)"
-                          }
-                        }
-                      ),
-                      !f && /* @__PURE__ */ i(se, { logo: e.loadingLogo })
-                    ]
-                  }
-                ),
-                n && v.buttons.map((t) => /* @__PURE__ */ i(
-                  "button",
-                  {
-                    type: "button",
-                    className: "rc-duo-physical",
-                    "data-duo-button": t.button,
-                    "data-edge": t.edge,
-                    "data-highlighted": R === t.button,
-                    "data-pressed": x === t.button,
-                    "aria-label": O[t.button] + " physical button",
-                    title: O[t.button],
-                    style: {
-                      left: t.x * b,
-                      top: t.y * b,
-                      width: t.edge === "top" ? Math.max(28, t.width * b) : 28,
-                      height: t.edge === "top" ? 28 : Math.max(28, t.height * b)
-                    },
-                    ...X(t.button),
-                    children: /* @__PURE__ */ i(
-                      "span",
-                      {
-                        style: { width: Math.max(2, t.width * b), height: Math.max(2, t.height * b) }
-                      }
-                    )
-                  },
-                  t.button
-                ))
-              ]
-            }
-          ),
-          n && v.guides.map((t) => /* @__PURE__ */ i(
-            "button",
-            {
-              type: "button",
-              className: "rc-duo-hardware",
-              "data-duo-button": t.button,
-              "data-visible": E === t.edge,
-              "data-pressed": x === t.button,
-              "aria-label": O[t.button],
-              title: O[t.button],
-              style: {
-                left: t.targetX,
-                top: t.targetY,
-                "--duo-hardware-icon-size": `${v.iconSize}px`,
-                "--duo-hardware-icon-x": `${t.x - t.targetX}px`,
-                "--duo-hardware-icon-y": `${t.y - t.targetY}px`
-              },
-              ...X(t.button),
-              children: /* @__PURE__ */ i(fe, { button: t.button })
-            },
-            t.button
-          )),
-          N && /* @__PURE__ */ i(we, { motion: N, onFinish: $ })
-        ]
-      }
-    ),
-    n && /* @__PURE__ */ i(
-      he,
-      {
-        angle: Q,
-        changeAngle: Z,
-        interacting: ee,
-        rotate: () => {
-          e.setOrientation(e.state.orientation === "portrait" ? "landscape-left" : "portrait").catch((t) => h(String(t)));
-        },
-        children: /* @__PURE__ */ i("span", { className: "rc-duo-view-label", children: "Front view" })
-      }
-    ),
-    a && /* @__PURE__ */ i("div", { role: "alert", className: "rc-duo-error", children: a })
-  ] });
-}
-const Me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: be
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  fe as D,
-  he as a,
-  Me as d,
-  le as u
-};