@livelayer/react 0.9.7 → 0.10.1

package/dist/styles.css

@@ -114,6 +114,33 @@
 }
 /* "custom" position relies on consumer-supplied style. */
 
+/* Floating chrome (HiddenLayout / MinimizedLayout) — portaled to
+   document.body so its fixed-position chrome anchors to the viewport
+   regardless of where the package is rendered in the host's DOM tree.
+   Without this, EMBEDDED hosts that wrap the slot in a transformed
+   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.
+
+   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;
+}
+.ll-widget--floating > * {
+  pointer-events: auto;
+}
+
 /* Mobile: minimized + expanded ignore position, always full-width bottom. */
 .ll-widget--mobile.ll-widget--minimized,
 .ll-widget--mobile.ll-widget--expanded {
@@ -170,6 +197,23 @@
   box-shadow: none;
 }
 
+/* When an EMBEDDED widget is in hidden/minimized state, the main
+   container inside the host slot is empty (HiddenLayout /
+   MinimizedLayout are portaled to document.body). Fade the empty
+   container so a transitioning host slot doesn't expose blank space
+   in the cinematic moment. The 0.25s opacity matches the floating
+   chrome's mount fade for a coordinated handoff. */
+.ll-widget[data-experience-mode="embedded"][data-display-mode="expanded"] {
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+.ll-widget[data-experience-mode="embedded"][data-display-mode="hidden"],
+.ll-widget[data-experience-mode="embedded"][data-display-mode="minimized"] {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+
 /* ── Hidden mode: edge chevron tab ────────────────────────────────── */
 /* Solid-black tab docked to the screen edge with a white chevron.
    Designed to be unmistakably visible on light AND dark pages — no
@@ -1007,19 +1051,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 {
@@ -1051,8 +1098,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 {
@@ -1131,14 +1183,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);
 }
@@ -1156,6 +1208,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%;
@@ -1174,6 +1234,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.9.7",
+  "version": "0.10.1",
   "description": "LiveLayer agent widget for React — avatar video, team switching, responsive layouts, full-fidelity embed",
   "main": "dist/index.js",
   "module": "dist/index.mjs",