@linktr.ee/messaging-react 2.3.0-rc-1779427772 → 2.3.0

package/src/styles.css

@@ -71,20 +71,27 @@
   }
 }
 
-/* Full-screen media viewer dialog */
+/* Full-screen media viewer dialog. Drives ImageViewer / VideoViewer /
+   PdfViewer chrome with plain CSS so the package ships self-contained
+   styles — consumers don't need to wire our dist into their Tailwind
+   `content` glob for the lightbox to render correctly. */
 .mes-media-viewer {
   --transition-duration: 0.15s;
+  --mes-media-viewer-padding: 64px 24px;
+  --mes-media-viewer-max-w: min(96vw, 1400px);
 
   border: none;
   padding: 0;
   margin: 0;
   background: transparent;
+  color: white;
   width: 100vw;
   height: 100dvh;
   max-width: 100vw;
   max-height: 100dvh;
   position: fixed;
   inset: 0;
+  overflow: hidden;
 
   transition:
     opacity var(--transition-duration) ease,
@@ -120,6 +127,156 @@
   }
 }
 
+/* Top chrome bar — splits the counter (left) from the close + actions
+   (right). Sits absolutely positioned over the body so it doesn't push
+   the centered media down.
+   `pointer-events: none` on the row lets clicks fall through the
+   negative space; the counter / actions re-enable `pointer-events`
+   on themselves so the buttons stay interactive. */
+.mes-media-viewer__chrome {
+  position: absolute;
+  inset: 12px 12px auto 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.mes-media-viewer__counter {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  border-radius: 9999px;
+  background-color: rgba(255, 255, 255, 0.12);
+  color: white;
+  font-size: 13px;
+  line-height: 1;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.mes-media-viewer__actions {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+/* Shared circular icon button used by the close action, the download
+   action, and any consumer that drops a button into the chrome.
+   Defined once so every viewer-chrome button stays visually
+   consistent and so consumers can rely on a stable selector. */
+.mes-media-viewer__action {
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  background-color: rgba(255, 255, 255, 0.12);
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.mes-media-viewer__action:hover,
+.mes-media-viewer__action:focus-visible {
+  background-color: rgba(255, 255, 255, 0.22);
+  outline: none;
+}
+
+.mes-media-viewer__action[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* Carousel prev/next chrome — only rendered when a viewer carries
+   more than one item. Positioned absolutely against the dialog so the
+   buttons hug the viewport edges, mid-height. */
+.mes-media-viewer__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 48px;
+  height: 48px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  background-color: rgba(255, 255, 255, 0.12);
+  color: white;
+  cursor: pointer;
+  z-index: 1;
+  transition: background-color 0.15s ease;
+}
+
+.mes-media-viewer__nav:hover,
+.mes-media-viewer__nav:focus-visible {
+  background-color: rgba(255, 255, 255, 0.22);
+  outline: none;
+}
+
+.mes-media-viewer__nav--prev {
+  left: 16px;
+}
+
+.mes-media-viewer__nav--next {
+  right: 16px;
+}
+
+/* Flex-centered body. */
+.mes-media-viewer__body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--mes-media-viewer-padding);
+  box-sizing: border-box;
+}
+
+/* Image: contained at reasonable max dimensions, never bigger than the
+   available body. `object-fit: contain` keeps aspect ratio. */
+.mes-media-viewer__image {
+  display: block;
+  max-width: var(--mes-media-viewer-max-w);
+  max-height: calc(100dvh - 128px);
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Video: keeps native controls; let the height grow up to the bounded
+   box and width track the intrinsic aspect ratio. */
+.mes-media-viewer__video {
+  display: block;
+  max-width: var(--mes-media-viewer-max-w);
+  max-height: calc(100dvh - 128px);
+  width: auto;
+  height: auto;
+  background: black;
+}
+
+/* PDF iframe: native browser PDF rendering owns the inside, so we just
+   bound the frame and give it an opaque background. */
+.mes-media-viewer__iframe {
+  display: block;
+  width: var(--mes-media-viewer-max-w);
+  height: calc(100dvh - 128px);
+  background: white;
+  border: 0;
+}
+
 /* Textarea composer focus styles */
 .mes-textarea-composer-container:has(.mes-textarea-composer:focus) {
   outline: 2px solid black;
@@ -160,82 +317,32 @@
 }
 
 .str-chat__li .str-chat__message-inner {
-  grid-column-gap: 4px;
-}
-
-/* Outer grid for other (incoming) messages — add footer row after message */
-.str-chat__li .str-chat__message--other {
-  grid-template-areas:
-    '. message-reminder'
-    'avatar message'
-    '. footer'
-    '. replies'
-    '. translation-notice'
-    '. custom-metadata'
-    '. metadata';
-  grid-template-columns: 28px 1fr;
-  justify-items: flex-start;
-}
-
-/* Outer grid for me (outgoing) messages — add footer row after message */
-.str-chat__li .str-chat__message--me {
-  grid-template-areas:
-    'message-reminder'
-    'message'
-    'footer'
-    'replies'
-    'translation-notice'
-    'custom-metadata'
-    'metadata';
-  justify-items: end;
-}
-
-/* Avatar: proper grid item aligned to bottom of its row */
-.str-chat__li .str-chat__message--other .str-chat__message-sender-avatar {
-  grid-area: avatar;
-  align-self: end;
-}
-
-/* message-inner sits in the message grid area */
-.str-chat__li .str-chat__message-inner {
-  grid-area: message;
-}
-
-/* Inner grid: bubble beside options only (no footer row) */
-.str-chat__li .str-chat__message--other .str-chat__message-inner {
-  grid-template-areas: 'message-bubble options';
-  grid-template-columns: auto auto;
+  grid-column-gap: 0;
 }
 
-.str-chat__li .str-chat__message--me .str-chat__message-inner {
-  grid-template-areas: 'options message-bubble';
-  grid-template-columns: auto auto;
-}
-
-/* Bubble wrapper occupies the message-bubble grid area */
-.str-chat__li .str-chat__message-inner > .str-chat__message-bubble-wrapper {
-  grid-area: message-bubble;
+.str-chat__li .str-chat__message--me .str-chat__message-bubble-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
 }
 
-/* Actions button centers vertically with the bubble */
-.str-chat__li .str-chat__message-inner .str-chat__message-options {
-  align-self: center;
+.str-chat__li .str-chat__message--other {
+  position: relative;
+  grid-template-columns: 28px 1fr;
 }
 
-/* Footer: tag then vote buttons stacked, in outer grid footer area */
-.str-chat__li .str-chat__message-footer {
-  grid-area: footer;
+.str-chat__li .str-chat__message--other .str-chat__message-bubble-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-}
-
-.str-chat__li .str-chat__message--other .str-chat__message-footer {
   align-items: flex-start;
+  gap: 2px;
 }
 
-.str-chat__li .str-chat__message--me .str-chat__message-footer {
-  align-items: flex-end;
+.str-chat__li .str-chat__message--other .str-chat__avatar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
 }
 
 /* Channel list load-more button overrides */
@@ -308,7 +415,9 @@
 }
 
 .message-chatbot-indicator--attachment {
+  width: 100%;
   gap: 8px;
+  margin-top: 4px;
   color: rgba(0, 0, 0, 0.3);
 }
 
@@ -327,6 +436,7 @@
   display: inline-flex;
   align-items: center;
   gap: 2px;
+  margin-top: 4px;
 }
 
 .message-vote-button {
@@ -436,24 +546,6 @@
   margin-bottom: 0;
 }
 
-/* Locked attachment wrapper: stack card + text bubble in the correct direction */
-.str-chat__li .str-chat__message--me .str-chat__message-bubble-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.str-chat__li .str-chat__message--other .str-chat__message-bubble-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-/* Gap between locked attachment card and accompanying text bubble */
-.str-chat__message-bubble-wrapper > .str-chat__message-bubble:not(:first-child) {
-  margin-top: 4px;
-}
-
 /* Standalone tip message (tip without text) */
 .message-tip-standalone {
   display: inline-flex;
@@ -465,4 +557,4 @@
   font-weight: 500;
   color: #016e1a;
   background-color: #dbf0e0;
-}
+}