@ethora/chat-component 26.9.6 → 26.10.1

package/dist/FilePreviewModal-Bwx0RZZw.js

@@ -0,0 +1,1763 @@
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { b2 as et, b3 as tt, E as f, b4 as yt, x as Pe, b as Et, b5 as kt, b6 as nt, b7 as rt, b8 as ot, b9 as Le, ba as Te, bb as Ce, aJ as $e, K as Ae, bc as Ue, bd as Pt, G as ke, be as St, bf as it, a as Rt, a_ as Lt, u as le, aa as _e, bg as Tt, bh as Ct, bi as Se, bj as Mt, ax as ue, bk as Be, bl as It, bm as $t, bn as At, bo as Dt, bp as Ot, aI as Ne, D as zt, bq as Ut } from "./main-CUB_w8AZ.js";
+import Me, { useState as F, useRef as U, useEffect as M, useMemo as te, useCallback as B, useLayoutEffect as _t } from "react";
+const at = (t, o, i) => {
+  const g = document.createElement("a");
+  g.href = t, g.setAttribute("download", o), i && (g.target = "_blank", g.rel = "noopener"), g.style.display = "none", document.body.appendChild(g), g.click(), g.remove();
+}, Bt = (t, o) => {
+  const i = URL.createObjectURL(t);
+  try {
+    at(i, o, !1);
+  } finally {
+    URL.revokeObjectURL(i);
+  }
+}, Nt = (t, o) => at(t, o, !0);
+async function Wt(t, o, i = {}) {
+  const g = i.fetchImpl ?? fetch, E = i.saveBlob ?? Bt, l = i.saveUrl ?? Nt;
+  let w;
+  try {
+    w = await g(t, { method: "GET" });
+  } catch {
+    return l(t, o), "direct";
+  }
+  return w.ok ? (E(new Blob([await w.arrayBuffer()]), o), "blob") : (et(t) && (w.status === 401 || w.status === 403) && tt(), "http-error");
+}
+function We(t, o) {
+  let i;
+  return (...g) => {
+    window.clearTimeout(i), i = window.setTimeout(() => t(...g), o);
+  };
+}
+function Xt({ debounce: t, scroll: o, polyfill: i, offsetSize: g } = { debounce: 0, scroll: !1, offsetSize: !1 }) {
+  const E = i || (typeof window > "u" ? class {
+  } : window.ResizeObserver);
+  if (!E) throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
+  const [l, w] = F({ left: 0, top: 0, width: 0, height: 0, bottom: 0, right: 0, x: 0, y: 0 }), c = U({ element: null, scrollContainers: null, resizeObserver: null, lastBounds: l, orientationHandler: null }), T = t ? typeof t == "number" ? t : t.scroll : null, m = t ? typeof t == "number" ? t : t.resize : null, v = U(!1);
+  M(() => (v.current = !0, () => {
+    v.current = !1;
+  }));
+  const [N, S, x] = te(() => {
+    const k = () => {
+      if (!c.current.element) return;
+      const { left: W, top: V, width: I, height: D, bottom: j, right: R, x: P, y: C } = c.current.element.getBoundingClientRect(), $ = { left: W, top: V, width: I, height: D, bottom: j, right: R, x: P, y: C };
+      c.current.element instanceof HTMLElement && g && ($.height = c.current.element.offsetHeight, $.width = c.current.element.offsetWidth), Object.freeze($), v.current && !jt(c.current.lastBounds, $) && w(c.current.lastBounds = $);
+    };
+    return [k, m ? We(k, m) : k, T ? We(k, T) : k];
+  }, [w, g, T, m]);
+  function O() {
+    c.current.scrollContainers && (c.current.scrollContainers.forEach((k) => k.removeEventListener("scroll", x, !0)), c.current.scrollContainers = null), c.current.resizeObserver && (c.current.resizeObserver.disconnect(), c.current.resizeObserver = null), c.current.orientationHandler && ("orientation" in screen && "removeEventListener" in screen.orientation ? screen.orientation.removeEventListener("change", c.current.orientationHandler) : "onorientationchange" in window && window.removeEventListener("orientationchange", c.current.orientationHandler));
+  }
+  function A() {
+    c.current.element && (c.current.resizeObserver = new E(x), c.current.resizeObserver.observe(c.current.element), o && c.current.scrollContainers && c.current.scrollContainers.forEach((k) => k.addEventListener("scroll", x, { capture: !0, passive: !0 })), c.current.orientationHandler = () => {
+      x();
+    }, "orientation" in screen && "addEventListener" in screen.orientation ? screen.orientation.addEventListener("change", c.current.orientationHandler) : "onorientationchange" in window && window.addEventListener("orientationchange", c.current.orientationHandler));
+  }
+  const H = (k) => {
+    !k || k === c.current.element || (O(), c.current.element = k, c.current.scrollContainers = st(k), A());
+  };
+  return Yt(x, !!o), Ft(S), M(() => {
+    O(), A();
+  }, [o, x, S]), M(() => O, []), [H, l, N];
+}
+function Ft(t) {
+  M(() => {
+    const o = t;
+    return window.addEventListener("resize", o), () => {
+      window.removeEventListener("resize", o);
+    };
+  }, [t]);
+}
+function Yt(t, o) {
+  M(() => {
+    if (o) {
+      const i = t;
+      return window.addEventListener("scroll", i, { capture: !0, passive: !0 }), () => {
+        window.removeEventListener("scroll", i, !0);
+      };
+    }
+  }, [t, o]);
+}
+function st(t) {
+  const o = [];
+  if (!t || t === document.body) return o;
+  const { overflow: i, overflowX: g, overflowY: E } = window.getComputedStyle(t);
+  return [i, g, E].some((l) => l === "auto" || l === "scroll") && o.push(t), [...o, ...st(t.parentElement)];
+}
+const Ht = ["x", "y", "top", "bottom", "left", "right", "width", "height"], jt = (t, o) => Ht.every((i) => t[i] === o[i]), Xe = 0.5, Fe = 3, xe = 1.25, Vt = 2e-3, Ye = 12, He = 16, je = 16, Gt = 72, Ve = 320, Zt = 150, Ge = 4, Kt = 7, qt = "800px 0px", Jt = 2, Qt = 0.9, Ze = { width: 612, height: 792 }, en = f.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+`, tn = f.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+`, nn = f.div`
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  overscroll-behavior: contain;
+  background-color: #e6e9ee;
+  border-radius: var(--ethora-radius-lg, 16px);
+  -webkit-overflow-scrolling: touch;
+`, rn = f.div`
+  position: relative;
+`, lt = f.div`
+  position: absolute;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  ${({ $loading: t }) => t && yt}
+`, on = f.canvas`
+  display: ${({ $painted: t }) => t ? "block" : "none"};
+  width: 100%;
+  height: 100%;
+`, an = f.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 16px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  pointer-events: none;
+`, ct = f.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  box-sizing: border-box;
+  border-radius: 999px;
+  background-color: rgba(20, 22, 28, 0.72);
+  color: #fff;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: auto;
+  user-select: none;
+`, sn = f(ct)`
+  grid-column: 2;
+  justify-self: center;
+  padding: 6px 14px;
+`, ln = f(ct)`
+  grid-column: 3;
+  justify-self: end;
+  padding: 3px;
+`, cn = f.span`
+  min-width: 44px;
+  text-align: center;
+  font-size: 12px;
+`, Re = f.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background-color: rgba(255, 255, 255, 0.16);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+`, dn = f.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: var(--ethora-radius-lg, 16px);
+  background-color: var(--ethora-color-bg-subtle, #f5f7fa);
+  color: var(--ethora-color-text, #141414);
+  text-align: center;
+
+  a {
+    color: var(--ethora-color-primary-text, var(--ethora-color-primary, #0052cd));
+  }
+`, un = (t, o, i) => Math.min(i, Math.max(o, t)), fn = (t) => {
+  const o = t;
+  return !o || !o.tagName ? !1 : o.isContentEditable ? !0 : ["INPUT", "TEXTAREA", "SELECT"].includes(o.tagName);
+}, Ke = (t, o, i, g) => {
+  const E = t + o;
+  let l = 0, w = -1;
+  for (let c = 0; c < i.length; c += 1) {
+    const T = i[c], m = T + g[c];
+    if (m < t) continue;
+    if (T > E) break;
+    const v = Math.min(m, E) - Math.max(T, t);
+    v > w && (l = c, w = v);
+  }
+  return l + 1;
+}, qe = (t, o) => new Set(
+  [...t].sort((i, g) => Math.abs(i - o) - Math.abs(g - o) || i - g).slice(0, Kt)
+), hn = Me.memo(function({
+  pdfDocument: o,
+  pageNumber: i,
+  width: g,
+  height: E,
+  top: l,
+  left: w,
+  active: c
+}) {
+  const T = U(null), m = U(null), [v, N] = F(!1);
+  return M(() => {
+    const S = T.current;
+    if (!S) return;
+    if (!c || g <= 0) {
+      m.current?.cancel(), m.current = null, S.width = 0, S.height = 0, N(!1);
+      return;
+    }
+    let x = !1;
+    return (async () => {
+      try {
+        const O = await o.getPage(i);
+        if (x) {
+          O.cleanup();
+          return;
+        }
+        const A = O.getViewport({ scale: 1 }), H = Math.min(window.devicePixelRatio || 1, Jt), k = O.getViewport({
+          scale: A.width ? g / A.width * H : H
+        }), W = S.getContext("2d");
+        if (!W) return;
+        S.width = Math.max(1, Math.floor(k.width)), S.height = Math.max(1, Math.floor(k.height)), m.current?.cancel();
+        const V = O.render({ canvasContext: W, viewport: k });
+        m.current = V, await V.promise, x || N(!0), O.cleanup();
+      } catch (O) {
+        x || console.warn("[Ethora] PDF page render failed:", O);
+      }
+    })(), () => {
+      x = !0, m.current?.cancel(), m.current = null;
+    };
+  }, [c, o, i, g]), /* @__PURE__ */ r(
+    lt,
+    {
+      "data-pdf-page": i,
+      $loading: !v,
+      style: { left: w, top: l, width: g, height: E },
+      children: /* @__PURE__ */ r(on, { ref: T, $painted: v })
+    }
+  );
+}), pn = ({ pdfUrl: t }) => {
+  const o = Pe(), { config: i } = Et(), [g, E] = Xt(), l = U(null), w = B(
+    (d) => {
+      l.current = d, g(d);
+    },
+    [g]
+  ), [c, T] = F("loading"), [m, v] = F(null), [N, S] = F([]), [x, O] = F(1), A = U(1), [H, k] = F(0), [W, V] = F(1), I = U(1), [D, j] = F(() => /* @__PURE__ */ new Set()), R = U(null), P = U(null), C = U(null), $ = H > 0 ? H : Ve, Y = m?.numPages ?? 0;
+  M(() => {
+    let d = !1, n = null, e;
+    return T("loading"), v(null), S([]), j(/* @__PURE__ */ new Set()), I.current = 1, V(1), (async () => {
+      const a = await kt(i?.pdfPreview?.workerSrc, i?.pdfPreview?.libUrl);
+      if (!d) {
+        if (!a || !t) {
+          T("error");
+          return;
+        }
+        try {
+          e = a.getDocument({ url: t, isEvalSupported: !1 });
+          const s = await e.promise;
+          if (d) {
+            s.destroy().catch(() => {
+            });
+            return;
+          }
+          if (n = s, s.numPages < 1) {
+            T("error");
+            return;
+          }
+          S(Array.from({ length: s.numPages }, () => Ze)), v(s), T("ready");
+        } catch (s) {
+          d || (console.warn("[Ethora] PDF open failed:", s), T("error"));
+        }
+      }
+    })(), () => {
+      d = !0, n?.destroy?.().catch(() => {
+      }), e?.destroy?.().catch(() => {
+      });
+    };
+  }, [t, i?.pdfPreview?.workerSrc, i?.pdfPreview?.libUrl]), M(() => {
+    if (!m) return;
+    let d = !1;
+    return (async () => {
+      try {
+        const n = m.numPages, e = await m.getPage(1), a = e.getViewport({ scale: 1 });
+        if (e.cleanup(), d || !a.width) return;
+        const s = { width: a.width, height: a.height };
+        S(Array.from({ length: n }, () => s));
+        for (let u = 2; u <= n; u += Ge) {
+          const y = Math.min(n, u + Ge - 1), z = await Promise.all(
+            Array.from({ length: y - u + 1 }, async (X, J) => {
+              const Q = u + J, se = await m.getPage(Q), pe = se.getViewport({ scale: 1 });
+              return se.cleanup(), {
+                pageNumber: Q,
+                size: { width: pe.width, height: pe.height }
+              };
+            })
+          );
+          if (d) return;
+          S((X) => {
+            if (X.length !== n) return X;
+            const J = X.slice();
+            return z.forEach(({ pageNumber: Q, size: se }) => {
+              J[Q - 1] = se;
+            }), J;
+          });
+        }
+      } catch (n) {
+        d || console.warn("[Ethora] PDF page measure failed:", n);
+      }
+    })(), () => {
+      d = !0;
+    };
+  }, [m]);
+  const L = te(() => {
+    const d = N.length > 0 ? N : [Ze], n = Math.max(1, $ - He * 2) * x, e = Math.max($, n + He * 2), a = [], s = [];
+    let u = je;
+    d.forEach((z) => {
+      const X = n * z.height / (z.width || 1);
+      a.push(u), s.push(X), u += X + Ye;
+    });
+    const y = u - Ye;
+    return {
+      pageWidth: n,
+      stageWidth: e,
+      stageHeight: y + Gt,
+      left: (e - n) / 2,
+      tops: a,
+      heights: s
+    };
+  }, [N, $, x]);
+  P.current = L, _t(() => {
+    const d = l.current;
+    if (!d) return;
+    const n = R.current;
+    n && (R.current = null, d.scrollLeft = n.fx * d.scrollWidth - n.cx, d.scrollTop = n.fy * d.scrollHeight - n.cy);
+    const e = Ke(
+      d.scrollTop,
+      d.clientHeight,
+      L.tops,
+      L.heights
+    );
+    e !== I.current && (I.current = e, V(e));
+  }, [L]);
+  const K = B((d, n) => {
+    const e = l.current;
+    if (!e || !e.scrollHeight || !e.scrollWidth) return;
+    if (e.scrollTop <= 0 && e.scrollLeft <= 0) {
+      R.current = null;
+      return;
+    }
+    const a = d ?? e.clientWidth / 2, s = n ?? e.clientHeight / 2;
+    R.current = {
+      fx: (e.scrollLeft + a) / e.scrollWidth,
+      fy: (e.scrollTop + s) / e.scrollHeight,
+      cx: a,
+      cy: s
+    };
+  }, []), _ = B(
+    (d, n, e) => {
+      const a = un(d, Xe, Fe);
+      a !== A.current && (K(n, e), A.current = a, O(a));
+    },
+    [K]
+  ), ee = Math.max(Ve, Math.floor(E.width || 0));
+  M(() => {
+    if (H === 0) {
+      k(ee);
+      return;
+    }
+    if (ee === H) return;
+    const d = window.setTimeout(() => {
+      K(), k(ee);
+    }, Zt);
+    return () => window.clearTimeout(d);
+  }, [ee, H, K]);
+  const ne = typeof IntersectionObserver < "u";
+  M(() => {
+    !m || ne || j(
+      qe(
+        Array.from({ length: m.numPages }, (d, n) => n + 1),
+        W
+      )
+    );
+  }, [m, W, ne]), M(() => {
+    const d = l.current;
+    if (!m || !d || typeof IntersectionObserver > "u")
+      return;
+    const n = /* @__PURE__ */ new Set(), e = new IntersectionObserver(
+      (a) => {
+        a.forEach((s) => {
+          const u = Number(s.target.dataset.pdfPage);
+          Number.isFinite(u) && (s.isIntersecting ? n.add(u) : n.delete(u));
+        }), j(qe([...n], I.current));
+      },
+      { root: d, rootMargin: qt }
+    );
+    return d.querySelectorAll("[data-pdf-page]").forEach((a) => e.observe(a)), () => e.disconnect();
+  }, [m]);
+  const de = B(() => {
+    const d = l.current, n = P.current;
+    if (!d || !n) return;
+    const e = Ke(
+      d.scrollTop,
+      d.clientHeight,
+      n.tops,
+      n.heights
+    );
+    e !== I.current && (I.current = e, V(e));
+  }, []), re = () => {
+    C.current === null && (C.current = window.requestAnimationFrame(() => {
+      C.current = null, de();
+    }));
+  };
+  if (M(
+    () => () => {
+      C.current !== null && window.cancelAnimationFrame(C.current);
+    },
+    []
+  ), M(() => {
+    const d = l.current;
+    if (!d) return;
+    const n = (e) => {
+      if (!(e.ctrlKey || e.metaKey)) return;
+      e.preventDefault();
+      const a = d.getBoundingClientRect();
+      _(
+        A.current * Math.exp(-e.deltaY * Vt),
+        e.clientX - a.left,
+        e.clientY - a.top
+      );
+    };
+    return d.addEventListener("wheel", n, { passive: !1 }), () => d.removeEventListener("wheel", n);
+  }, [c, _]), M(() => {
+    const d = (n) => {
+      if (n.defaultPrevented || n.altKey || n.ctrlKey || n.metaKey || fn(n.target)) return;
+      const e = l.current;
+      if (!e) return;
+      const a = n.target, s = !!a && e.contains(a), u = !!a && (a.tagName === "BUTTON" || a.tagName === "A");
+      switch (n.key) {
+        case "+":
+        case "=":
+          n.preventDefault(), _(A.current * xe);
+          return;
+        case "-":
+        case "_":
+          n.preventDefault(), _(A.current / xe);
+          return;
+        case "0":
+          n.preventDefault(), _(1);
+          return;
+      }
+      if (s) return;
+      const y = e.clientHeight * Qt;
+      switch (n.key) {
+        case "PageDown":
+          n.preventDefault(), e.scrollTop += y;
+          return;
+        case "PageUp":
+          n.preventDefault(), e.scrollTop -= y;
+          return;
+        case " ":
+          if (u) return;
+          n.preventDefault(), e.scrollTop += n.shiftKey ? -y : y;
+          return;
+        case "Home":
+          n.preventDefault(), e.scrollTop = 0;
+          return;
+        case "End":
+          n.preventDefault(), e.scrollTop = e.scrollHeight;
+          return;
+        default:
+          return;
+      }
+    };
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [_]), c === "error" || c === "ready" && Y === 0)
+    return /* @__PURE__ */ r(en, { children: /* @__PURE__ */ b(dn, { children: [
+      /* @__PURE__ */ r("span", { children: o("modal.filePreview.pdfUnavailable") }),
+      /* @__PURE__ */ r("a", { href: t, target: "_blank", rel: "noopener noreferrer", children: o("modal.filePreview.openExternally") })
+    ] }) });
+  const oe = Math.round(x * 100);
+  return /* @__PURE__ */ b(tn, { children: [
+    /* @__PURE__ */ r(
+      nn,
+      {
+        ref: w,
+        tabIndex: 0,
+        role: "region",
+        "aria-label": o("modal.filePreview.pdfPages"),
+        onScroll: re,
+        "data-testid": "pdf-scroll",
+        children: /* @__PURE__ */ r(rn, { style: { width: L.stageWidth, height: L.stageHeight }, children: m ? Array.from({ length: Y }, (d, n) => {
+          const e = n + 1;
+          return /* @__PURE__ */ r(
+            hn,
+            {
+              pdfDocument: m,
+              pageNumber: e,
+              width: L.pageWidth,
+              height: L.heights[n],
+              top: L.tops[n],
+              left: L.left,
+              active: D.has(e)
+            },
+            e
+          );
+        }) : /* @__PURE__ */ r(
+          lt,
+          {
+            $loading: !0,
+            "aria-hidden": "true",
+            style: {
+              left: L.left,
+              top: je,
+              width: L.pageWidth,
+              height: L.heights[0]
+            }
+          }
+        ) })
+      }
+    ),
+    c === "ready" && /* @__PURE__ */ b(an, { children: [
+      /* @__PURE__ */ b(sn, { children: [
+        W,
+        " / ",
+        Y
+      ] }),
+      /* @__PURE__ */ b(ln, { children: [
+        /* @__PURE__ */ r(
+          Re,
+          {
+            type: "button",
+            onClick: () => _(A.current / xe),
+            disabled: x <= Xe,
+            "aria-label": o("modal.filePreview.zoomOut"),
+            children: /* @__PURE__ */ r(nt, { color: "currentColor" })
+          }
+        ),
+        /* @__PURE__ */ b(cn, { children: [
+          oe,
+          "%"
+        ] }),
+        /* @__PURE__ */ r(
+          Re,
+          {
+            type: "button",
+            onClick: () => _(A.current * xe),
+            disabled: x >= Fe,
+            "aria-label": o("modal.filePreview.zoomIn"),
+            children: /* @__PURE__ */ r(rt, { color: "currentColor" })
+          }
+        ),
+        /* @__PURE__ */ r(
+          Re,
+          {
+            type: "button",
+            onClick: () => _(1),
+            disabled: x === 1,
+            "aria-label": o("modal.filePreview.resetZoom"),
+            children: /* @__PURE__ */ r(ot, { color: "currentColor" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, G = 1, Ie = 6, gn = 2.5, mn = 50, bn = 300, Je = 24, wn = 16e-4, ve = (t, o, i) => Math.min(i, Math.max(o, t)), xn = f.div`
+  position: relative;
+  /* An explicit height, not flex growth alone: the parent lays its children
+     out in a row and centres them, so the viewport would otherwise be sized
+     by its content, and the image's own max-height of 100% would resolve
+     against that auto height and never fit anything. */
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  /* A zoomed image is dragged, not selected, and a two-finger gesture is a
+     pinch rather than a page scroll. */
+  touch-action: none;
+  user-select: none;
+  /* The viewer backdrop shows through: the picture sits on the dark chrome. */
+  background-color: transparent;
+`, vn = Ae`
+  to { transform: rotate(360deg); }
+`, yn = f.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin: -20px 0 0 -20px;
+  pointer-events: none;
+  z-index: 1;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+    animation: ${vn} 900ms linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    svg {
+      animation-duration: 2400ms;
+    }
+  }
+`, En = f.img`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: blur(18px);
+  transform: scale(1.04);
+  pointer-events: none;
+  opacity: ${({ $hidden: t }) => t ? 0 : 1};
+  transition: opacity ${Te} ${Ce};
+  ${$e}
+`, kn = f.img`
+  /* Same box the single-file view always used: fill the stage and let
+     object-fit do the letterboxing, so what the viewer sees at scale 1 is
+     unchanged. It is also what makes the pan clamp exact, since the painted
+     content box is then derived from the natural aspect ratio alone. */
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform-origin: center center;
+  will-change: transform;
+  cursor: ${({ $grabbing: t, $pannable: o }) => t ? "grabbing" : o ? "grab" : "zoom-in"};
+  /* Rounded and lifted off the backdrop. The shadow follows the painted
+     pixels (drop-shadow), so a letterboxed picture is not boxed in a card. */
+  border-radius: 10px;
+  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
+  opacity: ${({ $loaded: t }) => t ? 1 : 0};
+  transition: ${({ $animate: t }) => t ? `transform ${Te} ${Ce}, ` : ""}opacity ${Te} ${Ce};
+  ${$e}
+`, dt = Me.forwardRef(
+  ({
+    src: t,
+    alt: o,
+    previewSrc: i,
+    loadingLabel: g = "",
+    onSwipeLeft: E,
+    onSwipeRight: l,
+    onError: w,
+    onScaleChange: c
+  }, T) => {
+    const m = U(null), v = U(null), [N, S] = F(!1), [x, O] = F(G), [A, H] = F({ x: 0, y: 0 }), [k, W] = F(!1), [V, I] = F(!1), D = U({ scale: G, offset: { x: 0, y: 0 } });
+    D.current = { scale: x, offset: A };
+    const j = U(null), R = U(null), P = U(
+      null
+    ), C = B((n) => {
+      const e = m.current, a = v.current;
+      if (!e) return { x: 0, y: 0 };
+      const s = e.clientWidth, u = e.clientHeight, y = a?.naturalWidth || 0, z = a?.naturalHeight || 0;
+      let X = s, J = u;
+      if (y > 0 && z > 0 && s > 0 && u > 0) {
+        const Q = Math.min(s / y, u / z);
+        X = y * Q, J = z * Q;
+      }
+      return {
+        x: Math.max(0, (X * n - s) / 2),
+        y: Math.max(0, (J * n - u) / 2)
+      };
+    }, []), $ = B(
+      (n, e, a) => {
+        const s = ve(n, G, Ie), u = C(s);
+        W(a), O(s), H({
+          x: ve(e.x, -u.x, u.x),
+          y: ve(e.y, -u.y, u.y)
+        });
+      },
+      [C]
+    ), Y = B(
+      (n, e, a, s) => {
+        const u = D.current, y = ve(n, G, Ie), z = y / u.scale;
+        $(
+          y,
+          {
+            x: e - (e - u.offset.x) * z,
+            y: a - (a - u.offset.y) * z
+          },
+          s
+        );
+      },
+      [$]
+    ), L = B(() => {
+      $(G, { x: 0, y: 0 }, !0);
+    }, [$]), K = B(
+      (n) => {
+        Y(D.current.scale * n, 0, 0, !0);
+      },
+      [Y]
+    );
+    Me.useImperativeHandle(
+      T,
+      () => ({
+        zoomIn: () => K(1.5),
+        zoomOut: () => K(1 / 1.5),
+        reset: L
+      }),
+      [K, L]
+    ), M(() => {
+      W(!1), O(G), H({ x: 0, y: 0 });
+    }, [t]), M(() => {
+      const n = v.current;
+      S(!!(n?.complete && n.naturalWidth > 0));
+    }, [t]), M(() => {
+      c?.(x);
+    }, [x, c]), M(() => {
+      const n = m.current;
+      if (!n) return;
+      const e = (a) => {
+        a.preventDefault();
+        const s = n.getBoundingClientRect(), u = a.clientX - s.left - s.width / 2, y = a.clientY - s.top - s.height / 2, z = Math.exp(-a.deltaY * wn);
+        Y(D.current.scale * z, u, y, !1);
+      };
+      return n.addEventListener("wheel", e, { passive: !1 }), () => n.removeEventListener("wheel", e);
+    }, [Y]);
+    const _ = B(
+      (n, e) => {
+        const a = m.current;
+        if (!a) return;
+        if (D.current.scale > G) {
+          L();
+          return;
+        }
+        const s = a.getBoundingClientRect();
+        Y(
+          gn,
+          n - s.left - s.width / 2,
+          e - s.top - s.height / 2,
+          !0
+        );
+      },
+      [L, Y]
+    ), ee = B((n) => {
+      n.button === 0 && (D.current.scale <= G || (n.preventDefault(), j.current = { x: n.clientX, y: n.clientY }, I(!0)));
+    }, []);
+    M(() => {
+      if (!V || typeof window > "u") return;
+      const n = (a) => {
+        const s = j.current;
+        if (!s) return;
+        const u = D.current;
+        $(
+          u.scale,
+          {
+            x: u.offset.x + (a.clientX - s.x),
+            y: u.offset.y + (a.clientY - s.y)
+          },
+          !1
+        ), j.current = { x: a.clientX, y: a.clientY };
+      }, e = () => {
+        j.current = null, I(!1);
+      };
+      return window.addEventListener("mousemove", n), window.addEventListener("mouseup", e), () => {
+        window.removeEventListener("mousemove", n), window.removeEventListener("mouseup", e);
+      };
+    }, [V, $]);
+    const ne = B((n) => {
+      if (n.touches.length === 2) {
+        const [a, s] = [n.touches[0], n.touches[1]];
+        R.current = {
+          startX: 0,
+          startY: 0,
+          lastX: 0,
+          lastY: 0,
+          pinchDistance: Math.hypot(
+            a.clientX - s.clientX,
+            a.clientY - s.clientY
+          ),
+          pinchScale: D.current.scale,
+          panning: !1,
+          moved: !1
+        };
+        return;
+      }
+      const e = n.touches[0];
+      e && (R.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        lastX: e.clientX,
+        lastY: e.clientY,
+        pinchDistance: 0,
+        pinchScale: D.current.scale,
+        panning: D.current.scale > G,
+        moved: !1
+      });
+    }, []), de = B(
+      (n) => {
+        const e = R.current;
+        if (!e) return;
+        if (n.touches.length === 2 && e.pinchDistance > 0) {
+          const [s, u] = [n.touches[0], n.touches[1]], y = Math.hypot(
+            s.clientX - u.clientX,
+            s.clientY - u.clientY
+          ), z = m.current;
+          if (!z || y <= 0) return;
+          const X = z.getBoundingClientRect(), J = (s.clientX + u.clientX) / 2 - X.left - X.width / 2, Q = (s.clientY + u.clientY) / 2 - X.top - X.height / 2;
+          e.moved = !0, Y(
+            e.pinchScale * y / e.pinchDistance,
+            J,
+            Q,
+            !1
+          );
+          return;
+        }
+        const a = n.touches[0];
+        if (a) {
+          if ((Math.abs(a.clientX - e.startX) > 6 || Math.abs(a.clientY - e.startY) > 6) && (e.moved = !0), e.panning) {
+            const s = D.current;
+            $(
+              s.scale,
+              {
+                x: s.offset.x + (a.clientX - e.lastX),
+                y: s.offset.y + (a.clientY - e.lastY)
+              },
+              !1
+            );
+          }
+          e.lastX = a.clientX, e.lastY = a.clientY;
+        }
+      },
+      [$, Y]
+    ), re = B(
+      (n) => {
+        const e = R.current;
+        if (!e || n.touches.length > 0) return;
+        if (R.current = null, !e.moved && e.pinchDistance === 0) {
+          const u = Date.now(), y = P.current;
+          if (y && u - y.time < bn && Math.abs(y.x - e.startX) < Je && Math.abs(y.y - e.startY) < Je) {
+            P.current = null, _(e.startX, e.startY);
+            return;
+          }
+          P.current = {
+            time: u,
+            x: e.startX,
+            y: e.startY
+          };
+          return;
+        }
+        if (e.panning || e.pinchDistance > 0 || D.current.scale > G) return;
+        const a = e.lastX - e.startX, s = e.lastY - e.startY;
+        Math.abs(a) < mn || Math.abs(a) <= Math.abs(s) || (a < 0 ? E?.() : l?.());
+      },
+      [E, l, _]
+    ), oe = B(
+      (n) => {
+        _(n.clientX, n.clientY);
+      },
+      [_]
+    ), d = te(
+      () => `translate(${A.x}px, ${A.y}px) scale(${x})`,
+      [A.x, A.y, x]
+    );
+    return /* @__PURE__ */ b(
+      xn,
+      {
+        ref: m,
+        "data-testid": "image-lightbox-viewport",
+        onMouseDown: ee,
+        onDoubleClick: oe,
+        onTouchStart: ne,
+        onTouchMove: de,
+        onTouchEnd: re,
+        onTouchCancel: re,
+        children: [
+          i && /* @__PURE__ */ r(
+            En,
+            {
+              src: Le(i),
+              alt: "",
+              "aria-hidden": "true",
+              draggable: !1,
+              $hidden: N,
+              "data-testid": "image-lightbox-preview"
+            }
+          ),
+          !N && /* @__PURE__ */ b(yn, { role: "status", "data-testid": "image-lightbox-spinner", children: [
+            /* @__PURE__ */ r(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  width: 1,
+                  height: 1,
+                  overflow: "hidden",
+                  clip: "rect(0 0 0 0)",
+                  whiteSpace: "nowrap"
+                },
+                children: g
+              }
+            ),
+            /* @__PURE__ */ b("svg", { viewBox: "0 0 40 40", "aria-hidden": "true", children: [
+              /* @__PURE__ */ r(
+                "circle",
+                {
+                  cx: "20",
+                  cy: "20",
+                  r: "16",
+                  fill: "none",
+                  stroke: "rgba(255, 255, 255, 0.22)",
+                  strokeWidth: "3"
+                }
+              ),
+              /* @__PURE__ */ r(
+                "circle",
+                {
+                  cx: "20",
+                  cy: "20",
+                  r: "16",
+                  fill: "none",
+                  stroke: "#ffffff",
+                  strokeWidth: "3",
+                  strokeLinecap: "round",
+                  strokeDasharray: "28 72"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ r(
+            kn,
+            {
+              ref: v,
+              "data-testid": "image-lightbox-image",
+              src: Le(t),
+              alt: o,
+              draggable: !1,
+              onLoad: () => S(!0),
+              onError: w,
+              $grabbing: V,
+              $pannable: x > G,
+              $animate: k,
+              $loaded: N,
+              style: { transform: d }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+dt.displayName = "ImageLightbox";
+const ie = (t) => String(t ?? "").trim(), ye = (t) => [ie(t?.firstName), ie(t?.lastName)].filter(Boolean).join(" "), Ee = (t) => {
+  const o = ie(t);
+  return o && !Pt(o) ? o : "";
+}, Pn = ({
+  sender: t,
+  usersSet: o,
+  me: i,
+  peerRoomName: g
+}) => {
+  if (!t) return { name: "" };
+  const E = [t.username, t.id].map((v) => Ue(ie(v))).filter(Boolean), l = E.map((v) => o?.[v]).find((v) => v && (ye(v) || v.profileImage)), w = Ue(ie(i?.xmppUsername)), c = !!w && E.includes(w), T = ye(t) || Ee(t.name) || ye(l) || (c ? ye(i) || Ee(i?.name) : "") || E.map(Ee).find(Boolean) || Ee(g) || "", m = ie(t.photo) || ie(l?.profileImage) || (c ? ie(i?.profileImage) : "") || void 0;
+  return { name: T, photo: m };
+}, Z = "#f5f7fa", ut = "rgba(245, 247, 250, 0.68)", fe = "rgba(255, 255, 255, 0.08)", ft = "rgba(255, 255, 255, 0.18)", ht = "var(--ethora-color-primary, #0052cd)", Sn = Ae`
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
+`, Rn = Ae`
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.98); }
+`, Ln = f.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  color: ${Z};
+  background-color: rgba(10, 12, 18, 0.92);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  animation: ${({ $closing: t }) => t ? ke`${Rn} 160ms ease-in forwards` : ke`${Sn} 160ms ease-out both`};
+  ${$e}
+
+  /* Without backdrop-filter the translucent colour would sit over the chat
+     and read as a smudge; go solid instead. */
+  @supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
+    background-color: #0a0c12;
+  }
+`, Tn = f.header`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 0 0 auto;
+  min-height: 64px;
+  padding: 10px 16px;
+  box-sizing: border-box;
+`, Cn = f.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1 1 auto;
+  min-width: 0;
+`, Mn = f.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1.3;
+`, In = f.span`
+  font-size: 15px;
+  font-weight: 600;
+  color: ${Z};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, $n = f.span`
+  font-size: 13px;
+  color: ${ut};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, An = f.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+`, ce = f.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  margin: 0;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: 50%;
+  background-color: ${fe};
+  color: ${Z};
+  cursor: pointer;
+  transition: background-color 150ms ease;
+
+  &:hover:not(:disabled) {
+    background-color: ${ft};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${Z};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+`, Dn = f.div`
+  position: relative;
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+`, On = f.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  ${({ $fit: t }) => t === "media" ? ke`
+          width: min(92vw, 100%);
+          height: min(82vh, 100%);
+        ` : ke`
+          max-width: 92vw;
+          max-height: 100%;
+        `}
+`, Qe = f.button`
+  position: absolute;
+  top: 50%;
+  ${({ $side: t }) => t === "left" ? "left: 12px;" : "right: 12px;"}
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  margin: 0;
+  transform: translateY(-50%);
+  border: 0;
+  border-radius: 50%;
+  background-color: rgba(10, 12, 18, 0.55);
+  color: ${Z};
+  cursor: pointer;
+  transition: background-color 150ms ease, opacity 150ms ease;
+
+  &:hover:not(:disabled) {
+    background-color: rgba(10, 12, 18, 0.8);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${Z};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+`, zn = f.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 0 0 auto;
+  padding: 10px 16px 16px;
+  box-sizing: border-box;
+`, Un = f.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: 4px 4px;
+  scrollbar-width: thin;
+  scrollbar-color: ${ft} transparent;
+
+  /* Touch users scroll by swipe; the bar only adds noise there. */
+  @media (pointer: coarse) {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+`, _n = f.button`
+  position: relative;
+  flex: 0 0 auto;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 8px;
+  background-color: ${fe};
+  cursor: pointer;
+  opacity: ${({ $active: t }) => t ? 1 : 0.6};
+  box-shadow: ${({ $active: t }) => t ? `0 0 0 2px #0a0c12, 0 0 0 4px ${ht}` : "0 0 0 0 transparent"};
+  transition: opacity 150ms ease, box-shadow 150ms ease;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${Z};
+    outline-offset: 2px;
+  }
+`, Bn = f.img`
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+`, Nn = () => /* @__PURE__ */ r(
+  "span",
+  {
+    "aria-hidden": "true",
+    style: {
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none",
+      color: "#fff",
+      background: "rgba(0, 0, 0, 0.25)"
+    },
+    children: /* @__PURE__ */ r("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ r("path", { d: "M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z" }) })
+  }
+), Wn = () => /* @__PURE__ */ r(
+  "span",
+  {
+    "aria-hidden": "true",
+    style: {
+      display: "block",
+      width: "100%",
+      height: "100%",
+      background: "linear-gradient(135deg, #2a3350, #151a2b)"
+    }
+  }
+), Xn = f.div`
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 8px;
+`, Fn = f.span`
+  justify-self: center;
+  padding: 6px 14px;
+  border-radius: 999px;
+  background-color: ${fe};
+  color: ${Z};
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+`, Yn = f.div`
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`, De = f.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  max-width: min(440px, 92vw);
+  padding: 32px 24px;
+  box-sizing: border-box;
+  text-align: center;
+  border-radius: 16px;
+  background-color: rgba(255, 255, 255, 0.05);
+  color: ${Z};
+`, Oe = f.h2`
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: ${Z};
+`, Hn = f.p`
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: ${ut};
+  overflow-wrap: anywhere;
+`, jn = f.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+`, pt = f.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 18px;
+  border-radius: 999px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+
+  &:focus-visible {
+    outline: 2px solid ${Z};
+    outline-offset: 2px;
+  }
+`, gt = f(pt)`
+  border: 0;
+  background-color: ${ht};
+  color: #ffffff;
+
+  &:hover {
+    filter: brightness(1.1);
+  }
+`, Vn = f(pt)`
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  background-color: transparent;
+  color: ${Z};
+
+  &:hover {
+    background-color: ${fe};
+  }
+`, Gn = f.span`
+  display: inline-flex;
+  --ethora-unavailable-ring: #14171f;
+  --ethora-color-bg: #14171f;
+  --ethora-unavailable-accent: #f5b544;
+  > span {
+    color: #9cc0ff;
+  }
+`, Zn = ({
+  onRetry: t,
+  onDownload: o
+}) => {
+  const i = Pe();
+  return /* @__PURE__ */ b(De, { role: "alert", "data-testid": "file-viewer-error", children: [
+    /* @__PURE__ */ r(Gn, { children: /* @__PURE__ */ r(St, { size: 88 }) }),
+    /* @__PURE__ */ r(Oe, { children: i("modal.filePreview.unavailable") }),
+    /* @__PURE__ */ b(jn, { children: [
+      /* @__PURE__ */ b(Vn, { type: "button", onClick: t, children: [
+        /* @__PURE__ */ r(er, {}),
+        i("modal.filePreview.retry")
+      ] }),
+      /* @__PURE__ */ b(gt, { type: "button", onClick: o, children: [
+        /* @__PURE__ */ r(bt, {}),
+        i("modal.filePreview.download")
+      ] })
+    ] })
+  ] });
+}, Kn = ({
+  fileName: t,
+  unsupportedText: o,
+  onDownload: i
+}) => {
+  const g = Pe(), E = it(t).toUpperCase();
+  return /* @__PURE__ */ b(De, { "data-testid": "file-viewer-file-card", children: [
+    /* @__PURE__ */ b(mt, { "aria-hidden": "true", children: [
+      /* @__PURE__ */ r(tr, {}),
+      E && /* @__PURE__ */ r(Jn, { children: E })
+    ] }),
+    /* @__PURE__ */ r(Oe, { style: { overflowWrap: "anywhere" }, children: t || g("modal.filePreview.fileLabel") }),
+    /* @__PURE__ */ r(Hn, { children: o }),
+    /* @__PURE__ */ b(gt, { type: "button", onClick: i, children: [
+      /* @__PURE__ */ r(bt, {}),
+      g("modal.filePreview.download")
+    ] })
+  ] });
+}, qn = ({ fileName: t, src: o }) => /* @__PURE__ */ b(De, { "data-testid": "file-viewer-audio-card", children: [
+  /* @__PURE__ */ r(mt, { "aria-hidden": "true", children: /* @__PURE__ */ r(nr, {}) }),
+  /* @__PURE__ */ r(Oe, { style: { overflowWrap: "anywhere" }, children: t }),
+  /* @__PURE__ */ r(
+    "audio",
+    {
+      controls: !0,
+      preload: "metadata",
+      src: o,
+      style: { width: "100%", maxWidth: 360 }
+    }
+  )
+] }), mt = f.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 96px;
+  height: 116px;
+  border-radius: 12px;
+  background-color: ${fe};
+  color: ${Z};
+`, Jn = f.span`
+  position: absolute;
+  bottom: 14px;
+  left: 0;
+  right: 0;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-align: center;
+`, he = {
+  width: 20,
+  height: 20,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.6,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": !0,
+  focusable: !1
+}, Qn = () => /* @__PURE__ */ b("svg", { ...he, children: [
+  /* @__PURE__ */ r("path", { d: "M14 4h6v6" }),
+  /* @__PURE__ */ r("path", { d: "M20 4l-9 9" }),
+  /* @__PURE__ */ r("path", { d: "M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" })
+] }), er = () => /* @__PURE__ */ b("svg", { ...he, width: 16, height: 16, children: [
+  /* @__PURE__ */ r("path", { d: "M20 12a8 8 0 1 1-2.34-5.66" }),
+  /* @__PURE__ */ r("path", { d: "M20 4v4h-4" })
+] }), bt = () => /* @__PURE__ */ b("svg", { ...he, width: 16, height: 16, children: [
+  /* @__PURE__ */ r("path", { d: "M12 4v11" }),
+  /* @__PURE__ */ r("path", { d: "M7 10l5 5 5-5" }),
+  /* @__PURE__ */ r("path", { d: "M5 20h14" })
+] }), tr = () => /* @__PURE__ */ b("svg", { ...he, width: 36, height: 36, strokeWidth: 1.3, children: [
+  /* @__PURE__ */ r("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+  /* @__PURE__ */ r("path", { d: "M14 3v5h5" })
+] }), nr = () => /* @__PURE__ */ b("svg", { ...he, width: 36, height: 36, strokeWidth: 1.3, children: [
+  /* @__PURE__ */ r("path", { d: "M9 18V5l11-2v13" }),
+  /* @__PURE__ */ r("circle", { cx: "6", cy: "18", r: "3" }),
+  /* @__PURE__ */ r("circle", { cx: "17", cy: "16", r: "3" })
+] }), rr = (t) => {
+  if (!t) return "";
+  const o = new Date(t);
+  if (Number.isNaN(o.getTime())) return "";
+  try {
+    return o.toLocaleString(void 0, {
+      dateStyle: "medium",
+      timeStyle: "short"
+    });
+  } catch {
+    return o.toISOString();
+  }
+}, or = (t, o) => {
+  if (!t || o <= 0) return t;
+  const i = t.includes("?") ? "&" : "?";
+  return `${t}${i}retry=${o}`;
+}, ir = (t) => {
+  const o = t, i = o?.tagName;
+  return i === "INPUT" || i === "TEXTAREA" || i === "SELECT" || !!o?.isContentEditable;
+}, ar = () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, sr = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), audio[controls], video[controls], [tabindex]:not([tabindex="-1"])', ur = ({
+  handleCloseModal: t
+}) => {
+  const o = Rt(), i = Pe(), g = Lt(), { activeFile: E } = le(
+    (h) => h.chatSettingStore
+  ), l = te(
+    () => E ?? { fileName: "", fileURL: "", mimetype: "" },
+    [E]
+  ), w = le(
+    (h) => h.chatSettingStore.user?.fileToken || ""
+  ), c = le(
+    (h) => _e(h)?.messages
+  ), T = le((h) => h.rooms.usersSet), m = le((h) => h.chatSettingStore.user), v = le((h) => {
+    const p = _e(h);
+    return p?.type === "private" ? String(p?.title || p?.name || "") : "";
+  }), N = U(null), S = U(null), x = U([]), [O, A] = F(G), [H, k] = F(null), [W, V] = F(
+    null
+  ), I = Tt(l?.mimetype, l?.fileName), D = te(() => Ct(c), [c]), j = l.siblings, R = te(() => {
+    if (Se(D, l) >= 0) return D;
+    const h = Mt(j);
+    return Se(h, l) >= 0 ? h : D;
+  }, [D, j, l]), P = te(
+    () => I === "image" || I === "video" ? Se(R, l) : -1,
+    [R, l, I]
+  ), C = P >= 0 && R.length > 1, $ = C && P > 0, Y = C && P < R.length - 1, L = P >= 0 ? R[P] : void 0, K = L?.fileName || l.fileName, _ = L?.sender ?? l.sender, ee = te(
+    () => Pn({
+      sender: _,
+      usersSet: T,
+      me: m,
+      peerRoomName: v
+    }),
+    [_, T, m, v]
+  ), ne = ee.name, de = rr(L?.date ?? l.date), re = !!l.fileURL, oe = I === "image" && (!re || H === l.fileURL), d = te(() => {
+    const h = ue(l.fileURL, w);
+    return W?.url === l.fileURL ? or(h, W.count) : h;
+  }, [l.fileURL, w, W]), n = L?.previewURL ? ue(L.previewURL, w) : void 0, e = B(
+    (h) => {
+      const p = R[h];
+      p && o(
+        Be({
+          fileName: p.fileName,
+          fileURL: p.fileURL,
+          mimetype: p.mimetype,
+          // Keep the opener's list so paging never loses it.
+          siblings: j
+        })
+      );
+    },
+    [o, R, j]
+  ), a = B(() => {
+    $ && e(P - 1);
+  }, [e, $, P]), s = B(() => {
+    Y && e(P + 1);
+  }, [e, Y, P]);
+  M(() => {
+    !C || typeof Image > "u" || [P - 1, P + 1].forEach((h) => {
+      const p = R[h];
+      if (!p || p.kind !== "image") return;
+      const q = ue(p.fileURL, w);
+      q && (new Image().src = q);
+    });
+  }, [C, P, R, w]), M(() => {
+    if (!C) return;
+    x.current[P]?.scrollIntoView?.({
+      block: "nearest",
+      inline: "center",
+      behavior: ar() ? "auto" : "smooth"
+    });
+  }, [C, P]), M(() => {
+    if (typeof document > "u") return;
+    const h = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = h;
+    };
+  }, []), M(() => {
+    if (typeof document > "u") return;
+    const h = (p) => {
+      if (!p.defaultPrevented && !(p.altKey || p.ctrlKey || p.metaKey) && !ir(p.target)) {
+        if (p.key === "ArrowLeft" || p.key === "ArrowRight") {
+          if (!C) return;
+          const q = p.target?.tagName;
+          if (q === "VIDEO" || q === "AUDIO") return;
+          p.preventDefault(), p.key === "ArrowLeft" ? a() : s();
+          return;
+        }
+        I !== "image" || oe || (p.key === "+" || p.key === "=" ? (p.preventDefault(), S.current?.zoomIn()) : p.key === "-" || p.key === "_" ? (p.preventDefault(), S.current?.zoomOut()) : p.key === "0" && (p.preventDefault(), S.current?.reset()));
+      }
+    };
+    return document.addEventListener("keydown", h), () => document.removeEventListener("keydown", h);
+  }, [C, a, s, I, oe]);
+  const u = () => {
+    const q = !!it(l.fileName) ? l.fileName : `MEDIA-ETHORA.${I === "image" ? "png" : I === "video" ? "mp4" : "bin"}`;
+    Wt(Ne(l.fileURL), q).catch((be) => {
+      zt.log(be);
+    });
+  }, y = () => {
+    re && window.open(
+      Ne(l.fileURL),
+      "_blank",
+      "noopener,noreferrer"
+    );
+  }, z = () => {
+    o(Be(void 0)), t?.();
+  }, X = (h) => {
+    h.target === h.currentTarget && z();
+  }, J = () => {
+    et(l.fileURL) && tt(), k(l.fileURL);
+  }, Q = () => {
+    V({
+      url: l.fileURL,
+      count: (W?.url === l.fileURL ? W.count : 0) + 1
+    }), k(null);
+  }, se = (h) => {
+    if (h.key !== "Tab" || !N.current) return;
+    const p = Array.from(
+      N.current.querySelectorAll(sr)
+    ).filter((vt) => !vt.hasAttribute("disabled"));
+    if (p.length === 0) return;
+    const q = p[0], be = p[p.length - 1], we = document.activeElement, ze = !we || !N.current.contains(we);
+    h.shiftKey && (we === q || ze) ? (h.preventDefault(), be.focus()) : !h.shiftKey && (we === be || ze) && (h.preventDefault(), q.focus());
+  }, pe = l.fileName || i("modal.filePreview.imageAlt"), wt = i("modal.filePreview.unsupported"), ge = ue(l.fileURL, w);
+  let ae, me = "media";
+  if (oe)
+    me = "content", ae = /* @__PURE__ */ r(Zn, { onRetry: Q, onDownload: u });
+  else
+    switch (I) {
+      case "image":
+        ae = /* @__PURE__ */ r(
+          dt,
+          {
+            ref: S,
+            src: d,
+            previewSrc: n,
+            alt: pe,
+            loadingLabel: i("modal.filePreview.loading"),
+            onScaleChange: A,
+            onSwipeLeft: s,
+            onSwipeRight: a,
+            onError: J
+          }
+        );
+        break;
+      case "video":
+        ae = /* @__PURE__ */ r(
+          Ut,
+          {
+            src: ge,
+            controls: !0,
+            autoPlay: !1
+          },
+          ge
+        );
+        break;
+      case "audio":
+        me = "content", ae = /* @__PURE__ */ r(qn, { fileName: K, src: ge });
+        break;
+      case "pdf":
+        ae = /* @__PURE__ */ r(pn, { pdfUrl: ge });
+        break;
+      default:
+        me = "content", ae = /* @__PURE__ */ r(
+          Kn,
+          {
+            fileName: K,
+            unsupportedText: wt,
+            onDownload: u
+          }
+        );
+    }
+  const xt = I === "image" && !oe;
+  return /* @__PURE__ */ b(
+    Ln,
+    {
+      ref: N,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": i("modal.filePreview.title"),
+      "data-testid": "file-viewer",
+      $closing: g,
+      onKeyDown: se,
+      children: [
+        /* @__PURE__ */ b(Tn, { children: [
+          /* @__PURE__ */ b(Cn, { children: [
+            _ && /* @__PURE__ */ r(
+              It,
+              {
+                src: ee.photo,
+                username: ne
+              }
+            ),
+            /* @__PURE__ */ b(Mn, { children: [
+              ne && /* @__PURE__ */ r(In, { children: ne }),
+              /* @__PURE__ */ r($n, { children: [de, K].filter(Boolean).join(" · ") || i("modal.filePreview.title") })
+            ] })
+          ] }),
+          /* @__PURE__ */ b(An, { children: [
+            /* @__PURE__ */ r(
+              ce,
+              {
+                type: "button",
+                onClick: u,
+                "aria-label": i("action.save"),
+                title: i("action.save"),
+                children: /* @__PURE__ */ r($t, { color: "currentColor" })
+              }
+            ),
+            /* @__PURE__ */ r(
+              ce,
+              {
+                type: "button",
+                onClick: y,
+                disabled: !re,
+                "aria-label": i("modal.filePreview.openExternally"),
+                title: i("modal.filePreview.openExternally"),
+                children: /* @__PURE__ */ r(Qn, {})
+              }
+            ),
+            /* @__PURE__ */ r(
+              ce,
+              {
+                type: "button",
+                onClick: z,
+                "aria-label": i("modal.filePreview.close"),
+                title: i("modal.filePreview.close"),
+                children: /* @__PURE__ */ r(At, { color: "currentColor", width: 20, height: 20 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ b(Dn, { onClick: X, "data-testid": "file-viewer-stage", children: [
+          C && /* @__PURE__ */ r(
+            Qe,
+            {
+              type: "button",
+              $side: "left",
+              onClick: a,
+              disabled: !$,
+              "aria-label": i("modal.filePreview.previousItem"),
+              children: /* @__PURE__ */ r(Dt, { color: "currentColor" })
+            }
+          ),
+          /* @__PURE__ */ r(On, { $fit: me, children: ae }),
+          C && /* @__PURE__ */ r(
+            Qe,
+            {
+              type: "button",
+              $side: "right",
+              onClick: s,
+              disabled: !Y,
+              "aria-label": i("modal.filePreview.nextItem"),
+              children: /* @__PURE__ */ r(Ot, { color: "currentColor" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ b(zn, { children: [
+          C && /* @__PURE__ */ r(
+            Un,
+            {
+              role: "group",
+              "aria-label": i("modal.filePreview.thumbnails"),
+              "data-testid": "file-viewer-thumbnails",
+              children: R.map((h, p) => /* @__PURE__ */ b(
+                _n,
+                {
+                  ref: (q) => {
+                    x.current[p] = q;
+                  },
+                  type: "button",
+                  $active: p === P,
+                  "aria-label": i("modal.filePreview.showItem", {
+                    current: p + 1,
+                    total: R.length
+                  }),
+                  "aria-current": p === P ? "true" : void 0,
+                  onClick: () => e(p),
+                  children: [
+                    h.kind === "video" && !h.previewURL ? /* @__PURE__ */ r(Wn, {}) : /* @__PURE__ */ r(
+                      Bn,
+                      {
+                        src: Le(
+                          ue(h.previewURL || h.fileURL, w)
+                        ),
+                        alt: "",
+                        loading: "lazy",
+                        draggable: !1
+                      }
+                    ),
+                    h.kind === "video" && /* @__PURE__ */ r(Nn, {})
+                  ]
+                },
+                h.key
+              ))
+            }
+          ),
+          /* @__PURE__ */ b(Xn, { children: [
+            /* @__PURE__ */ r("span", {}),
+            C ? /* @__PURE__ */ r(Fn, { "data-testid": "lightbox-position", "aria-live": "polite", children: i("modal.filePreview.position", {
+              current: P + 1,
+              total: R.length
+            }) }) : /* @__PURE__ */ r("span", {}),
+            xt ? /* @__PURE__ */ b(Yn, { children: [
+              /* @__PURE__ */ r(
+                ce,
+                {
+                  type: "button",
+                  onClick: () => S.current?.zoomOut(),
+                  disabled: O <= G,
+                  "aria-label": i("modal.filePreview.zoomOut"),
+                  children: /* @__PURE__ */ r(nt, { color: "currentColor" })
+                }
+              ),
+              /* @__PURE__ */ r(
+                ce,
+                {
+                  type: "button",
+                  onClick: () => S.current?.zoomIn(),
+                  disabled: O >= Ie,
+                  "aria-label": i("modal.filePreview.zoomIn"),
+                  children: /* @__PURE__ */ r(rt, { color: "currentColor" })
+                }
+              ),
+              /* @__PURE__ */ r(
+                ce,
+                {
+                  type: "button",
+                  onClick: () => S.current?.reset(),
+                  disabled: O <= G,
+                  "aria-label": i("modal.filePreview.resetZoom"),
+                  children: /* @__PURE__ */ r(ot, { color: "currentColor" })
+                }
+              )
+            ] }) : /* @__PURE__ */ r("span", {})
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  ur as default
+};