@livelayer/react 0.16.0 → 0.17.1

package/dist/styles.css

@@ -589,22 +589,25 @@
 }
 
 .ll-expanded--mobile {
-  /* Card layout — same shape as desktop, sized to fit comfortably in
-     a phone viewport with breathing room on every side. The min()
-     calls bound the card on small phones (iPhone SE at 320×568 still
-     gets a usable card with ~32px margins) while keeping a generous
-     default on modern devices (iPhone 16 Pro at 402×874 gets the
-     full 380×540 card). dvh accounts for the iOS dynamic toolbar so
-     the card never gets clipped behind the URL bar or home indicator.
-
-     Was previously `100vw × 80dvh` edge-to-edge bottom sheet — covered
-     ~60% of the screen in the idle state before the visitor had even
-     tapped anything. The expanded layout is now position-aware on
-     mobile too (see .ll-widget--mobile.ll-widget--expanded above) so
-     the position prop anchors the card to the chosen corner. */
-  width: min(380px, calc(100vw - 32px));
-  height: min(540px, calc(100dvh - 32px));
-  border-radius: 20px;
+  /* Mobile expanded is a thumbnail PiP — 9:16 portrait, ~150px wide.
+     The visitor's website is the primary surface; the widget is a
+     persistent reachable affordance, not the focus. Sized so it fits
+     comfortably alongside content without blocking it.
+
+     Evolution:
+       v0:    100vw × 80dvh edge-to-edge sheet → blocked 60% of screen
+       v0.16: 380 × 540 card → marginally smaller, still ~90% of phone width
+       v0.17: 150 × 267 (9:16) thumbnail → properly out-of-the-way
+
+     The clamp lets the card scale slightly with viewport — tiny phones
+     (320px wide) get 140px, normal phones (393-430px) stay at the
+     150px sweet spot, larger phones / foldables (500px+) can grow to
+     180px. aspect-ratio derives height from width so the 9:16 portrait
+     framing stays exact regardless of where in the clamp range the
+     viewport lands. */
+  width: clamp(140px, 38vw, 180px);
+  aspect-ratio: 9 / 16;
+  border-radius: 16px;
 }
 
 /* ── Background layers ───────────────────────────────────────── */
@@ -816,6 +819,38 @@
   margin-left: auto;
 }
 
+/* ── Mobile thumbnail chrome (0.18.0) ────────────────────────────
+   The 150px 9:16 widget is small enough that the standard 40px
+   header buttons + brand pill overcrowd the surface. On mobile we:
+     - Hide the "Live Layer" brand pill in the IDLE header. The
+       brand mark already lives in the minimized bottom bar that
+       appears once a session ends, and the surface is too small to
+       afford the wordmark gracefully.
+     - Hide the minimize button in the IDLE header. There's nothing
+       to minimize FROM until a call starts — minimizing a session-
+       less widget would just dismiss it, which is what the close
+       (X) button is for. Removes the redundant affordance.
+     - Shrink the close (X) button visual to 26×26 (still well
+       above the 18px touch-target floor the user specified). Icon
+       inside stays 12px. During an active call the same shrink
+       applies to the minimize button so the in-call header doesn't
+       crowd the thumbnail.
+
+   Selectors scope to .ll-widget--mobile so desktop is untouched. */
+.ll-widget--mobile .ll-expanded__header--idle .ll-expanded__brand,
+.ll-widget--mobile .ll-expanded__header--idle .ll-hbtn--ghost {
+  display: none;
+}
+
+.ll-widget--mobile .ll-hbtn {
+  width: 26px;
+  height: 26px;
+}
+.ll-widget--mobile .ll-hbtn svg {
+  width: 10px;
+  height: 10px;
+}
+
 /* ── Active top bar (pills) ─────────────────────────────────── */
 
 .ll-expanded__topbar {
@@ -1548,9 +1583,13 @@
 }
 
 .ll-expanded--mobile .ll-expanded__pip {
-  right: 10px;
-  width: 96px;
-  height: 72px;
+  /* Scaled down to fit the 0.17.0 mobile thumbnail card (~150px
+     wide). A 96px PiP in a 150px card would cover nearly the entire
+     surface during a call — defeats the point of the PiP. 48×36 is
+     readable as "your camera preview" at the card scale. */
+  right: 8px;
+  width: 48px;
+  height: 36px;
 }
 
 /* ── Error boundary fallback ─────────────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livelayer/react",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "LiveLayer agent widget for React — avatar video, team switching, responsive layouts, full-fidelity embed",
   "keywords": [
     "livelayer",