@layers-app/shared 0.4.7 → 0.4.8

package/dist/components/Chat/MessageList/index.js

@@ -1,159 +1,211 @@
-import { jsxs as T, jsx as l } from "react/jsx-runtime";
-import { forwardRef as D, useRef as i, useState as P, useEffect as u, useCallback as W, useImperativeHandle as k } from "react";
-import { ArrowDown01Icon as C } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as G } from "@hugeicons/react";
-import { ScrollArea as J, ActionIcon as K } from "@mantine/core";
-import s from "./MessageList.module.css.js";
-const Q = D(
-  function({
-    children: L,
-    className: y,
-    style: E,
-    stickToBottom: f,
-    unreadCount: v = 0,
-    onStickChange: h,
-    resetKey: F,
-    onReachTop: g,
-    floatingTopAction: N,
-    bottomOffset: M = 0
-  }, $) {
-    const r = i(null), B = i(null), n = i(!0), w = i(0), [A, q] = P(!1), H = i(h), b = i(g), x = i(!1);
-    u(() => {
-      H.current = h;
-    }, [h]), u(() => {
-      b.current = g;
-    }, [g]), u(() => {
-      const e = r.current, o = B.current;
-      if (!e || !o) return;
-      const t = new IntersectionObserver(
-        (m) => {
-          if (!m[0]?.isIntersecting || x.current || !b.current || n.current) return;
-          x.current = !0;
-          const p = e.scrollHeight, c = e.scrollTop;
-          Promise.resolve(b.current()).then(() => {
-            requestAnimationFrame(() => {
-              const a = r.current;
-              if (!a) return;
-              const d = a.scrollHeight - p;
-              d > 0 && (a.scrollTop = c + d);
-            });
-          }).finally(() => {
-            x.current = !1;
-          });
-        },
-        { root: e, rootMargin: "300px 0px 0px 0px" }
-      );
-      return t.observe(o), () => t.disconnect();
-    }, []);
-    const z = W(() => {
-      r.current && r.current.scrollTo({
-        top: r.current.scrollHeight,
-        behavior: "smooth"
-      });
-    }, []);
-    k(
-      $,
-      () => ({
-        scrollToBottom: () => {
-          const e = r.current;
-          if (!e) return;
-          n.current = !0, H.current?.(!0), e.scrollTop = e.scrollHeight;
-          const o = () => {
-            const t = r.current;
-            t && (t.scrollTop = t.scrollHeight, n.current = !0);
+import { jsxs as U, jsx as s } from "react/jsx-runtime";
+import { forwardRef as se, useRef as a, useState as B, useEffect as p, useCallback as v, useLayoutEffect as Y, useImperativeHandle as ce } from "react";
+import { ArrowDown01Icon as ie } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as ae } from "@hugeicons/react";
+import { ScrollArea as ue, ActionIcon as de } from "@mantine/core";
+import { useVirtualizer as fe } from "@tanstack/react-virtual";
+import l from "./MessageList.module.css.js";
+const he = 300, me = 100;
+function pe({
+  items: t,
+  renderItem: N,
+  getItemKey: f,
+  estimateItemSize: g = 64,
+  className: O,
+  style: G,
+  contentStyle: J,
+  stickToBottom: w,
+  unreadCount: T = 0,
+  onStickChange: x,
+  onReachTop: b,
+  floatingTopAction: z,
+  bottomOffset: K = 0,
+  contentBottomPad: F = 0
+}, Q) {
+  const u = a(null), S = a(null), n = a(!0), [I, X] = B(!1), [q, D] = B(0), [M, V] = B(null), h = a(null), m = a(x), y = a(b), $ = a(!1);
+  p(() => {
+    m.current = x;
+  }, [x]), p(() => {
+    y.current = b;
+  }, [b]);
+  const o = t.length > me, Z = v(
+    (e) => typeof g == "function" ? g(t[e], e) : g,
+    [g, t]
+  ), d = fe({
+    count: t.length,
+    // Only let the virtualizer drive the scroll element while virtualizing, so
+    // the flow path owns scrolling outright (no competing scroll math).
+    getScrollElement: v(
+      () => o ? u.current : null,
+      [o]
+    ),
+    estimateSize: Z,
+    getItemKey: v(
+      (e) => f(t[e], e),
+      [t, f]
+    ),
+    overscan: 12
+  }), _ = d.getTotalSize(), C = o ? d.getVirtualItems() : [], j = o ? Math.max(0, q - _) : 0, k = j + _ + F, c = v(() => {
+    const e = u.current;
+    e && (e.scrollTop = e.scrollHeight);
+  }, []);
+  Y(() => {
+    !w || !n.current || c();
+  }, [k, t, w, c]), p(() => {
+    const e = S.current;
+    if (!e || !w) return;
+    const r = new ResizeObserver(() => {
+      n.current && c();
+    });
+    return r.observe(e), () => r.disconnect();
+  }, [w, c]);
+  const W = v(
+    (e) => {
+      const r = t.findIndex((i, R) => f(i, R) === e);
+      r < 0 || (n.current = !1, o ? (d.scrollToIndex(r, { align: "center" }), requestAnimationFrame(
+        () => d.scrollToIndex(r, { align: "center" })
+      )) : S.current?.querySelector(`[data-index="${r}"]`)?.scrollIntoView({ block: "center" }), V(e), h.current && window.clearTimeout(h.current), h.current = window.setTimeout(
+        () => V(null),
+        1600
+      ));
+    },
+    [t, f, o, d]
+  );
+  ce(
+    Q,
+    () => ({
+      scrollToBottom: () => {
+        n.current = !0, m.current?.(!0), c();
+      },
+      scrollToKey: W
+    }),
+    [c, W]
+  ), p(
+    () => () => {
+      h.current && window.clearTimeout(h.current);
+    },
+    []
+  ), Y(() => {
+    const e = u.current;
+    if (!e) return;
+    const r = new ResizeObserver(() => D(e.clientHeight));
+    return r.observe(e), D(e.clientHeight), () => r.disconnect();
+  }, []), p(() => {
+    const e = u.current;
+    if (!e) return;
+    let r = !1, i = e.scrollTop;
+    const R = () => {
+      const { scrollTop: H, scrollHeight: te, clientHeight: oe } = e, P = te - H - oe, ne = H < i;
+      i = H, P < 40 ? n.current || (n.current = !0, m.current?.(!0)) : ne && n.current && (n.current = !1, m.current?.(!1));
+      const E = P > 200;
+      if (E !== r && (r = E, X(E)), H < he && !n.current && !$.current && y.current) {
+        $.current = !0;
+        const le = e.scrollHeight - e.scrollTop;
+        Promise.resolve(y.current()).then(() => {
+          const L = () => {
+            const A = u.current;
+            A && (A.scrollTop = A.scrollHeight - le);
           };
           requestAnimationFrame(() => {
-            o(), requestAnimationFrame(o);
+            L(), requestAnimationFrame(() => {
+              L(), requestAnimationFrame(L);
+            });
           });
-        }
-      }),
-      []
-    ), u(() => {
-      !f || !r.current || (n.current = !0, w.current = r.current.scrollHeight, r.current.scrollTop = r.current.scrollHeight);
-    }, [f, F]), u(() => {
-      const e = r.current;
-      if (!f || !e) return;
-      const o = new ResizeObserver(() => {
-        const c = e.scrollHeight;
-        c !== w.current && n.current && (e.scrollTop = c), w.current = c;
-      }), t = e.firstElementChild;
-      t && o.observe(t);
-      let m = !1;
-      const p = () => {
-        const { scrollTop: c, scrollHeight: a, clientHeight: d } = e, I = a - c - d, S = I < 40;
-        S !== n.current && (n.current = S, H.current?.(S));
-        const R = I > 200;
-        R !== m && (m = R, q(R));
-      };
-      return e.addEventListener("scroll", p, { passive: !0 }), () => {
-        o.disconnect(), e.removeEventListener("scroll", p);
-      };
-    }, [f]);
-    const O = v > 999 ? "999+" : v, j = v > 0;
-    return /* @__PURE__ */ T(
-      "div",
-      {
-        className: s.container,
-        style: { "--ml-bottom-offset": `${M}px` },
-        children: [
-          /* @__PURE__ */ l(
-            J,
-            {
-              className: `${s.root}${y ? ` ${y}` : ""}`,
-              style: E,
-              type: "auto",
-              scrollbars: "y",
-              viewportRef: r,
-              "data-testid": "message-list",
-              styles: {
-                content: {
-                  display: "flex",
-                  flexDirection: "column",
-                  minHeight: "100%"
-                }
-              },
-              children: /* @__PURE__ */ T("div", { className: s.wrapper, children: [
-                /* @__PURE__ */ l(
+        }).finally(() => {
+          $.current = !1;
+        });
+      }
+    };
+    return e.addEventListener("scroll", R, { passive: !0 }), () => e.removeEventListener("scroll", R);
+  }, []);
+  const ee = T > 999 ? "999+" : T, re = T > 0;
+  return /* @__PURE__ */ U(
+    "div",
+    {
+      className: l.container,
+      style: { "--ml-bottom-offset": `${K}px` },
+      children: [
+        /* @__PURE__ */ s(
+          ue,
+          {
+            className: `${l.root}${O ? ` ${O}` : ""}`,
+            style: G,
+            type: "auto",
+            scrollbars: "y",
+            viewportRef: u,
+            "data-testid": "message-list",
+            children: /* @__PURE__ */ s(
+              "div",
+              {
+                ref: S,
+                className: l.virtualRoot,
+                "data-testid": "message-list-items",
+                "data-flow": !o || void 0,
+                style: {
+                  height: o ? k : void 0,
+                  // Fill the viewport (real px — a `%` doesn't resolve through Mantine
+                  // ScrollArea's content wrapper) so the leading margin-top:auto can
+                  // push a short chat to the bottom edge.
+                  minHeight: o ? void 0 : q || void 0,
+                  paddingBottom: o ? void 0 : F,
+                  ...J
+                },
+                children: o ? C.map((e) => /* @__PURE__ */ s(
                   "div",
                   {
-                    ref: B,
-                    className: s.top,
-                    "data-testid": "message-list-top"
-                  }
-                ),
-                /* @__PURE__ */ l("div", { className: s.items, "data-testid": "message-list-items", children: L })
-              ] })
-            }
-          ),
-          A && /* @__PURE__ */ T("div", { className: s.scrollToBottomWrap, children: [
-            /* @__PURE__ */ l(
-              K,
-              {
-                variant: "default",
-                radius: "xl",
-                size: 34,
-                onClick: z,
-                "aria-label": "Scroll to bottom",
-                "data-testid": "scroll-to-bottom",
-                children: /* @__PURE__ */ l(G, { icon: C, size: 18 })
+                    "data-index": e.index,
+                    ref: d.measureElement,
+                    className: `${l.virtualRow}${e.key === M ? ` ${l.highlightRow}` : ""}`,
+                    style: { transform: `translateY(${j + e.start}px)` },
+                    children: N(t[e.index], e.index)
+                  },
+                  e.key
+                )) : t.map((e, r) => {
+                  const i = f(e, r);
+                  return /* @__PURE__ */ s(
+                    "div",
+                    {
+                      "data-index": r,
+                      className: `${l.flowRow}${i === M ? ` ${l.highlightRow}` : ""}`,
+                      children: N(e, r)
+                    },
+                    i
+                  );
+                })
               }
-            ),
-            j && /* @__PURE__ */ l("span", { className: s.scrollToBottomBadge, children: O })
-          ] }),
-          N && /* @__PURE__ */ l(
-            "div",
+            )
+          }
+        ),
+        I && /* @__PURE__ */ U("div", { className: l.scrollToBottomWrap, children: [
+          /* @__PURE__ */ s(
+            de,
             {
-              className: s.floatingTopAction,
-              "data-raised": A || void 0,
-              children: N
+              variant: "default",
+              radius: "xl",
+              size: 34,
+              onClick: () => {
+                n.current = !0, m.current?.(!0), c();
+              },
+              "aria-label": "Scroll to bottom",
+              "data-testid": "scroll-to-bottom",
+              children: /* @__PURE__ */ s(ae, { icon: ie, size: 18 })
             }
-          )
-        ]
-      }
-    );
-  }
-);
-Q.displayName = "MessageList";
+          ),
+          re && /* @__PURE__ */ s("span", { className: l.scrollToBottomBadge, children: ee })
+        ] }),
+        z && /* @__PURE__ */ s(
+          "div",
+          {
+            className: l.floatingTopAction,
+            "data-raised": I || void 0,
+            children: z
+          }
+        )
+      ]
+    }
+  );
+}
+const be = se(pe);
 export {
-  Q as MessageList
+  be as MessageList
 };

package/dist/components/Chat/MessageMeta/MessageMeta.module.css.js

@@ -1,12 +1,12 @@
-const t = "_root_1bzsv_1", e = "_time_1bzsv_31", s = "_edited_1bzsv_35", o = "_views_1bzsv_39", _ = {
+const t = "_root_q0fbi_1", e = "_time_q0fbi_61", i = "_edited_q0fbi_69", o = "_views_q0fbi_77", _ = {
   root: t,
   time: e,
-  edited: s,
+  edited: i,
   views: o
 };
 export {
   _ as default,
-  s as edited,
+  i as edited,
   t as root,
   e as time,
   o as views

package/dist/components/Chat/MessageReactions/MessageReactions.module.css.js

@@ -1,15 +1,15 @@
-const o = "_row_1ge4m_1", t = "_pill_1ge4m_10", _ = "_emoji_1ge4m_50", e = "_count_1ge4m_71", m = "_meta_1ge4m_93", c = {
-  row: o,
-  pill: t,
-  emoji: _,
-  count: e,
-  meta: m
+const t = "_row_mtm4b_1", m = "_pill_mtm4b_19", o = "_emoji_mtm4b_99", _ = "_count_mtm4b_141", c = "_meta_mtm4b_185", e = {
+  row: t,
+  pill: m,
+  emoji: o,
+  count: _,
+  meta: c
 };
 export {
-  e as count,
-  c as default,
-  _ as emoji,
-  m as meta,
-  t as pill,
-  o as row
+  _ as count,
+  e as default,
+  o as emoji,
+  c as meta,
+  m as pill,
+  t as row
 };

package/dist/components/Chat/MessageReply/MessageReply.module.css.js

@@ -1,15 +1,15 @@
-const t = "_root_z3fvn_11", o = "_border_z3fvn_8", n = "_content_z3fvn_34", e = "_title_z3fvn_43", _ = "_subtitle_z3fvn_55", s = {
+const t = "_root_13gux_21", o = "_border_13gux_15", e = "_content_13gux_67", _ = "_title_13gux_85", n = "_subtitle_13gux_109", s = {
   root: t,
   border: o,
-  content: n,
-  title: e,
-  subtitle: _
+  content: e,
+  title: _,
+  subtitle: n
 };
 export {
   o as border,
-  n as content,
+  e as content,
   s as default,
   t as root,
-  _ as subtitle,
-  e as title
+  n as subtitle,
+  _ as title
 };

package/dist/components/Chat/MessageStatus/MessageStatus.module.css.js

@@ -1,11 +1,11 @@
-const l = "_root_llell_1", o = "_icon_llell_11", n = "_animateIn_llell_16", t = {
-  root: l,
-  icon: o,
-  animateIn: n
+const o = "_root_ly31g_1", n = "_icon_ly31g_21", t = "_animateIn_ly31g_31", _ = {
+  root: o,
+  icon: n,
+  animateIn: t
 };
 export {
-  n as animateIn,
-  t as default,
-  o as icon,
-  l as root
+  t as animateIn,
+  _ as default,
+  n as icon,
+  o as root
 };

package/dist/components/Chat/ServiceMessage/ServiceMessage.module.css.js

@@ -1,4 +1,4 @@
-const t = "_root_wzzbr_1", o = "_subtitle_wzzbr_11", s = "_title_wzzbr_17", e = {
+const t = "_root_983ti_1", o = "_subtitle_983ti_21", s = "_title_983ti_33", e = {
   root: t,
   subtitle: o,
   title: s

package/dist/components/CollapsibleContainer/CollapsibleContainer.module.css.js

@@ -1,4 +1,4 @@
-const o = "_accordionRoot_3pkfo_1", c = "_accordionControl_3pkfo_5", n = "_accordionItem_3pkfo_9", t = {
+const o = "_accordionRoot_1of7x_1", c = "_accordionControl_1of7x_9", n = "_accordionItem_1of7x_17", t = {
   accordionRoot: o,
   accordionControl: c,
   accordionItem: n

package/dist/components/ColorPicker/ColorPicker.module.css.js

@@ -1,31 +1,37 @@
-const i = "_section_lidow_2", t = "_sectionLabel_lidow_15", n = "_listItem_lidow_46", e = "_listItemActive_lidow_72", l = "_listItemLabel_lidow_76", o = "_listItemSwatch_lidow_84", c = "_grid_lidow_92", _ = "_inlineSection_lidow_162", s = "_inlineSectionLabel_lidow_172", w = "_inlineRow_lidow_180", a = "_inlineSwatch_lidow_189", d = "_inlineSwatchActive_lidow_215", S = "_inlineSwatchRound_lidow_225", h = {
+const i = "_section_1go5u_3", n = "_sectionLabel_1go5u_29", t = "_listItemCaption_1go5u_45", e = "_listItem_1go5u_45", o = "_listItemActive_1go5u_155", c = "_listItemLabel_1go5u_163", l = "_listItemSwatch_1go5u_179", _ = "_grid_1go5u_195", s = "_inlineSection_1go5u_335", a = "_inlineSectionLabel_1go5u_355", S = "_inlineSectionLabelRow_1go5u_371", u = "_inlineSectionCaption_1go5u_383", g = "_inlineRow_1go5u_395", w = "_inlineSwatch_1go5u_413", m = "_inlineSwatchActive_1go5u_465", I = "_inlineSwatchRound_1go5u_485", b = {
   section: i,
-  sectionLabel: t,
-  listItem: n,
-  listItemActive: e,
-  listItemLabel: l,
-  listItemSwatch: o,
-  grid: c,
-  inlineSection: _,
-  inlineSectionLabel: s,
-  inlineRow: w,
-  inlineSwatch: a,
-  inlineSwatchActive: d,
-  inlineSwatchRound: S
+  sectionLabel: n,
+  listItemCaption: t,
+  listItem: e,
+  listItemActive: o,
+  listItemLabel: c,
+  listItemSwatch: l,
+  grid: _,
+  inlineSection: s,
+  inlineSectionLabel: a,
+  inlineSectionLabelRow: S,
+  inlineSectionCaption: u,
+  inlineRow: g,
+  inlineSwatch: w,
+  inlineSwatchActive: m,
+  inlineSwatchRound: I
 };
 export {
-  h as default,
-  c as grid,
-  w as inlineRow,
-  _ as inlineSection,
-  s as inlineSectionLabel,
-  a as inlineSwatch,
-  d as inlineSwatchActive,
-  S as inlineSwatchRound,
-  n as listItem,
-  e as listItemActive,
-  l as listItemLabel,
-  o as listItemSwatch,
+  b as default,
+  _ as grid,
+  g as inlineRow,
+  s as inlineSection,
+  u as inlineSectionCaption,
+  a as inlineSectionLabel,
+  S as inlineSectionLabelRow,
+  w as inlineSwatch,
+  m as inlineSwatchActive,
+  I as inlineSwatchRound,
+  e as listItem,
+  o as listItemActive,
+  t as listItemCaption,
+  c as listItemLabel,
+  l as listItemSwatch,
   i as section,
-  t as sectionLabel
+  n as sectionLabel
 };

package/dist/components/ColorPicker/ColorPickerList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerList.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerList.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAgB,MAAM,SAAS,CAAC;AAqHlE;;oEAEoE;AACpE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAW,EACX,gBAAgB,GACjB,EAAE,oBAAoB,2CA8CtB"}
+{"version":3,"file":"ColorPickerList.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerList.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAgB,MAAM,SAAS,CAAC;AAiIlE;;oEAEoE;AACpE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAW,EACX,gBAAgB,GACjB,EAAE,oBAAoB,2CAkEtB"}