@livelayer/react 0.10.0 → 0.10.2

package/dist/styles.css

@@ -121,7 +121,18 @@
    ancestor (translateZ, scale, etc.) capture the fixed chrome and
    pin it to the slot rather than the viewport edge — that's what
    made the side-tab and audio-waveform pill unreachable in EMBEDDED
-   pre-0.10.0. The .ll-widget base rules above apply unchanged. */
+   pre-0.10.0. The .ll-widget base rules above apply unchanged.
+
+   The position rules INSIDE this container (HiddenLayout's
+   `position: fixed` on the side-tab) follow normal containing-block
+   rules: when the consumer scopes the portal to a specific element
+   via `floatingChromeContainer` (a fork-demo card, for example),
+   that element's `position: relative` becomes the containing block
+   if the chrome's positioning is `absolute` rather than `fixed`. We
+   leave HiddenLayout / MinimizedLayout's existing `position: fixed`
+   alone — consumers who pass a scoped container should mark it with
+   `transform: translateZ(0)` so `position: fixed` descendants
+   capture to the container instead of the viewport. */
 .ll-widget--floating {
   position: fixed;
   pointer-events: none;
@@ -267,6 +278,19 @@
   height: 80px;
 }
 
+/* Scoped variant — used when the package portals the tab to a host
+   container instead of document.body (e.g. a fork-demo card on a
+   marketing page). Drag-to-reposition is disabled in scoped mode
+   because a 260px-tall card has no room for it; the cursor reflects
+   that. CSS centering (top:50%/translateY(-50%)) handles vertical
+   placement against the container's bounds. */
+.ll-widget .ll-hidden--scoped {
+  cursor: pointer;
+}
+.ll-widget .ll-hidden--scoped.is-dragging {
+  cursor: pointer;
+}
+
 .ll-widget .ll-hidden__chevron {
   /* Centered visually inside the tab. The SVG's stroke handles color;
      `display: block` prevents any baseline gap that would offset the
@@ -1040,19 +1064,22 @@
 }
 
 /* Captions affordance for deaf-friendly UX: when the latest transcript
-   line is the AGENT's spoken output, tint the pill ORANGE so it reads
-   unambiguously as "this text is coming from Live Layer." The user's
-   STT pill keeps default dark styling so the two voices contrast
-   immediately at a glance. Previous opacity (0.18) was so faint
-   testers couldn't tell the agent line was differentiated at all —
-   now the pill is brand-orange, with a saturated glow + warm white
-   text on the colored background. */
+   line is the AGENT's spoken output, render the pill in fully-saturated
+   brand orange with crisp white text. The user's STT pill keeps the
+   default dark styling so the two voices contrast immediately at a
+   glance. Pre-0.10.1 the orange was rendered as a soft tint over a
+   semi-transparent black backdrop, which compressed the color into
+   a muddy brown — the user couldn't see "the agent is talking" at
+   all. Now: solid #e06540 background, white 500-weight text, no
+   blur (removed the dark backdrop-filter that was washing it out). */
 .ll-expanded__transcript--agent {
-  background: rgba(224, 101, 64, 0.85);
-  border-color: rgba(255, 175, 110, 0.6);
+  background: #e06540;
+  border-color: rgba(255, 200, 160, 0.55);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   box-shadow:
-    0 0 24px rgba(224, 101, 64, 0.4),
-    inset 0 0 0 1px rgba(255, 200, 160, 0.25);
+    0 0 28px rgba(224, 101, 64, 0.5),
+    inset 0 0 0 1px rgba(255, 215, 180, 0.3);
 }
 
 .ll-expanded__transcript--agent .ll-expanded__transcript-text {
@@ -1084,8 +1111,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  flex-wrap: wrap;
+  gap: 2px;
+  /* Toolbar must stay on one line. Wrapping produces a "4 buttons +
+     red end-call below" layout in narrow slots (280px-wide marketing
+     dock) — visually broken. Tight gap + slim split paddings below
+     fit screen / camera-split / mic-split / speaker / end-call in
+     ~250px of usable width. */
+  flex-wrap: nowrap;
 }
 
 .ll-tool {
@@ -1164,14 +1196,14 @@
 }
 
 .ll-tool-split .ll-tool--left {
-  padding-left: 14px;
-  padding-right: 4px;
+  padding-left: 10px;
+  padding-right: 2px;
   width: auto;
 }
 
 .ll-tool-split .ll-tool--right {
-  padding-left: 4px;
-  padding-right: 10px;
+  padding-left: 2px;
+  padding-right: 8px;
   width: auto;
   color: rgba(255, 255, 255, 0.7);
 }
@@ -1189,6 +1221,14 @@
 /* ── Device selection menu (mic / camera) ───────────────── */
 
 .ll-device-menu {
+  /* Default = absolute (used inline within toolbar split). The
+     ll-device-menu--floating modifier below overrides for the
+     portaled variant rendered to document.body. The inline form
+     was getting clipped by .ll-tool-split's overflow:hidden, which
+     is why chevron clicks looked like no-ops — that's why
+     ExpandedLayout now portals the menu by default. Keep the inline
+     styles for backwards compatibility with consumers calling
+     DeviceMenu directly. */
   position: absolute;
   bottom: calc(100% + 8px);
   left: 50%;
@@ -1207,6 +1247,18 @@
   gap: 2px;
 }
 
+/* Portaled variant: rendered to document.body so it escapes any
+   ancestor overflow:hidden / transform context. Position is set
+   inline via getBoundingClientRect; reset the static defaults so
+   they don't fight the inline styles. z-index matches the rest of
+   the floating chrome (max-int) so we win over consumer overlays. */
+.ll-device-menu--floating {
+  position: fixed;
+  bottom: auto;
+  left: auto;
+  z-index: 2147483647;
+}
+
 .ll-device-menu__label {
   margin: 0;
   padding: 6px 10px 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livelayer/react",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "LiveLayer agent widget for React — avatar video, team switching, responsive layouts, full-fidelity embed",
   "main": "dist/index.js",
   "module": "dist/index.mjs",