@livelayer/react 0.18.1 → 0.18.3

package/dist/styles.css

@@ -582,34 +582,64 @@
   flex-direction: column;
 }
 
-.ll-expanded--desktop {
-  width: 400px;
-  height: 560px;
-  border-radius: 20px;
-}
-
-.ll-expanded--mobile {
-  /* 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;
+/* Sizing is media-query-driven, NOT JS-class-driven.
+ *
+ * Why: useIsMobile() is SSR-safe — it returns `false` on the server
+ * and on the very first client paint, then flips to `true` on the
+ * first useEffect tick. If sizing were keyed off the .ll-expanded--
+ * desktop / .ll-expanded--mobile class (which IS JS-driven), the
+ * first paint would render at desktop dimensions (400×560), then
+ * snap down to mobile dimensions (160×230) once the effect ran.
+ * Visitors on phones saw a visible flash of an oversized widget.
+ *
+ * The component still adds the .ll-expanded--desktop / --mobile
+ * class — other styles (the compact-status pill positioning,
+ * topbar padding, PIP sizing, etc.) key off it. But the bounding-
+ * box dimensions live in the .ll-expanded base + the media query
+ * below, so the right size is applied at first paint regardless
+ * of JS readiness.
+ *
+ * Breakpoint: 640px (matches Tailwind's `sm`). When a consumer
+ * passes a custom mobileBreakpoint prop, the JS still computes
+ * isMobile against that custom value (drives layout / waveform /
+ * compactControls behavior) — but the CSS box dims stick to 640px.
+ * Acceptable tradeoff: the visual size flickers slightly when the
+ * custom breakpoint differs from 640, but the common case (every
+ * site using the default breakpoint) has zero flash.
+ *
+ * LL landing reference (components/landing/ExperienceFork.tsx:36):
+ *   mobile (default): w-[160px] h-[230px]
+ *   sm+ (≥640px):     w-[180px] h-[260px]
+ * Desktop reference: 400 × 560, matches editor preview at app.livelayer.studio.
+ */
+.ll-expanded {
+  /* Mobile-first: phones get the thumbnail card by default. The
+     desktop override below kicks in at ≥1024px where there's
+     actually room for the full 400 × 560 panel. */
+  width: 160px;
+  height: 230px;
   border-radius: 16px;
 }
 
+@media (min-width: 640px) and (max-width: 1023px) {
+  .ll-expanded {
+    /* Sm-to-lg breakpoint — small tablets / large phones in
+       landscape. Slightly larger thumbnail. Matches the LL demo's
+       `sm:w-[180px] sm:h-[260px]` exactly. */
+    width: 180px;
+    height: 260px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ll-expanded {
+    /* Desktop card — full 400 × 560 with a softer 20px radius. */
+    width: 400px;
+    height: 560px;
+    border-radius: 20px;
+  }
+}
+
 /* ── Background layers ───────────────────────────────────────── */
 
 .ll-expanded__bg,

package/package.json

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