@livelayer/react 0.18.2 → 0.19.0

package/dist/styles.css

@@ -582,43 +582,64 @@
   flex-direction: column;
 }
 
-.ll-expanded--desktop {
-  width: 400px;
-  height: 560px;
-  border-radius: 20px;
-}
-
-.ll-expanded--mobile {
-  /* Mobile thumbnail card — matches the dimensions the LiveLayer
-     landing page uses for ExperienceForkCard's embedded preview
-     (components/landing/ExperienceFork.tsx — the canonical reference
-     design the team has shipped on www.livelayer.studio). Visitors
-     have explicitly asked us to match it exactly so the package
-     behaves identically across LL's own marketing site and customer
-     sites.
-
-     LL demo dimensions (from ExperienceFork.tsx:36):
-       mobile (default): w-[160px] h-[230px]   ←──┐ matched
-       sm+ (≥640px):     w-[180px] h-[260px]   ←──┘ matched
-
-     Border radius: rounded-2xl in Tailwind = 16px.
-
-     Width and height are explicit pixels (not aspect-ratio) because
-     the reference uses explicit pixels — preserving every detail of
-     the design contract. The two breakpoints match LL exactly so the
-     widget reads as the same component in both contexts. */
+/* 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) {
-  .ll-expanded--mobile {
+@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,
@@ -1779,3 +1800,82 @@
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.55; transform: scale(0.7); }
 }
+
+/* ── Drag + resize (0.19.0) ────────────────────────────────────────
+   Lets the visitor move the floating widget off page content (phone
+   number, CTA) and resize it. Geometry lives as an INLINE style
+   override applied by useDragAndResize ONLY after the visitor actually
+   drags/resizes (or a saved geometry is restored) — until then this
+   stylesheet's media-query sizing + .ll-widget[data-position] corner
+   anchoring stay in charge so there's no first-paint flash. These rules
+   only style the handles + interaction affordances; they never set box
+   dimensions or position. */
+
+/* Drag handle = the expanded header row. `data-ll-drag-handle` is set by
+   the hook only when dragging is enabled, so the grab cursor + page-scroll
+   suppression apply exactly when a drag can actually start. */
+.ll-widget [data-ll-drag-handle] {
+  cursor: grab;
+  /* Stop touch-drag on the handle from scrolling the page. */
+  touch-action: none;
+}
+.ll-widget.is-dragging [data-ll-drag-handle] {
+  cursor: grabbing;
+}
+
+/* While dragging OR resizing, kill text selection across the whole widget
+   so a fast pointer drag doesn't paint a selection over the header copy /
+   transcript pills, and drop transitions so the surface tracks the pointer
+   1:1 instead of easing behind it. */
+.ll-widget.is-dragging,
+.ll-widget.is-resizing,
+.ll-widget.is-dragging *,
+.ll-widget.is-resizing * {
+  user-select: none;
+  -webkit-user-select: none;
+}
+.ll-widget.is-dragging .ll-expanded,
+.ll-widget.is-resizing .ll-expanded {
+  transition: none;
+}
+
+/* Resize grip — bottom-right corner of the expanded surface. Conventional
+   placement (opposite the top-left the box grows from) and the diagonal
+   double-chevron glyph reads as "drag to resize" without a tooltip. The
+   element sits above the bottom toolbar (z-index) but is small enough not
+   to cover the end-call button. */
+.ll-expanded__resize-grip {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 6;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 3px;
+  color: rgba(255, 255, 255, 0.55);
+  cursor: nwse-resize;
+  /* Stop touch-drag on the grip from scrolling the page. */
+  touch-action: none;
+  /* The grip is a pointer-only nicety; never let it capture selection. */
+  user-select: none;
+  -webkit-user-select: none;
+  transition: color 0.15s ease;
+}
+.ll-expanded__resize-grip:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+.ll-expanded__resize-grip > svg {
+  display: block;
+  pointer-events: none;
+}
+
+/* Once the visitor has set an explicit geometry, the inline width/height
+   override the media-query box dims. We pin position:fixed inline too (the
+   hook sets it) so this class is mostly a hook for host CSS / tests; no
+   dimensional rules live here on purpose — geometry is the inline layer. */
+.ll-widget--has-geometry {
+  /* intentionally empty — see comment above. */
+}

package/package.json

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