@livelayer/react 0.6.2 → 0.9.0

package/dist/styles.css

@@ -123,6 +123,53 @@
   top: auto;
 }
 
+/* ── Embedded experience mode ──────────────────────────────────────
+   When `experienceMode="EMBEDDED"`, the widget renders inline within
+   the host container instead of as a fixed-position floating overlay.
+   The host owns size, position, and stacking — we just unstick the
+   widget from the viewport corners and let .ll-expanded fill its
+   parent. Locked to displayMode="expanded" in TS (minimize/hide are
+   floating-widget concepts that don't apply inline). */
+.ll-widget[data-experience-mode="embedded"] {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+}
+
+/* Disable the corner-anchoring rules in embedded mode regardless of
+   what `position` was passed (we keep the prop for API symmetry). */
+.ll-widget[data-experience-mode="embedded"][data-position="bottom-right"],
+.ll-widget[data-experience-mode="embedded"][data-position="bottom-left"],
+.ll-widget[data-experience-mode="embedded"][data-position="top-right"],
+.ll-widget[data-experience-mode="embedded"][data-position="top-left"] {
+  inset: auto;
+  left: auto;
+  right: auto;
+  top: auto;
+  bottom: auto;
+}
+
+/* Override the mobile sheet behavior — no full-width bottom in embedded. */
+.ll-widget[data-experience-mode="embedded"].ll-widget--mobile.ll-widget--expanded {
+  position: relative;
+  left: auto;
+  right: auto;
+  top: auto;
+  bottom: auto;
+}
+
+/* The expanded panel fills its parent in embedded mode (host drives size).
+   No floating shadow chrome — the host card already has its own. */
+.ll-widget[data-experience-mode="embedded"] .ll-expanded--desktop,
+.ll-widget[data-experience-mode="embedded"] .ll-expanded--mobile {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  box-shadow: none;
+}
+
 /* ── 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
@@ -576,6 +623,15 @@
   background: rgba(0, 0, 0, 0.5);
 }
 
+/* Caller-controlled "transforming" overlay (avatar swap, voice swap, etc.).
+   Wins over every other overlay in the expanded surface — z-index sits
+   above the connecting/gesture overlays (4) and the local PIP (5) so the
+   caller-driven status takes priority while the swap is in flight. */
+.ll-expanded__overlay--transforming {
+  z-index: 20;
+  background: rgba(0, 0, 0, 0.45);
+}
+
 .ll-expanded__overlay-text {
   margin: 0;
   font-size: 13px;
@@ -1369,6 +1425,47 @@
   background: none;
 }
 
+/* ── OverflowPopover ─────────────────────────────────────────── */
+
+/* Floating panel anchored above the ••• trigger button. Sits inside
+   the same offsetParent as the toolbar — no portal needed. */
+.ll-overflow-popover {
+  min-width: 160px;
+  padding: 6px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.85);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
+  color: #fff;
+  z-index: 4;
+}
+
+/* Full-width row buttons inside the popover. */
+.ll-overflow-popover__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.85);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.ll-overflow-popover__item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
 /* ── Focus rings (accessibility) ─────────────────────────────── */
 
 .ll-widget button:focus-visible,
@@ -1377,3 +1474,95 @@
   outline: 2px solid var(--ll-color-primary);
   outline-offset: 2px;
 }
+
+/* ── Compact toolbar (3-button) ────────────────────────────
+   Used when compactControls=true. Renders mic | ••• | end-call,
+   with secondary controls tucked behind the OverflowPopover. */
+.ll-toolbar--compact {
+  gap: 12px;  /* roomier than the standard toolbar's 4px since only 3 buttons */
+}
+
+/* ── Overflow popover items: language pill ─────────────────
+   The disabled "EN English" row needs a subtle code badge; matches the
+   compact language pill style used in the regular topbar. */
+.ll-overflow-popover__item:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+.ll-overflow-popover__lang-code {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 18px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.95);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+/* Item glyphs (svg) sit at the start of the row. */
+.ll-overflow-popover__item > svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* When `is-on`, item gets the same treatment as `.ll-tool.is-on` —
+   subtle white background to indicate the toggle is active. */
+.ll-overflow-popover__item.is-on {
+  background: rgba(255, 255, 255, 0.16);
+  color: #fff;
+}
+
+/* ── Compact status pill ───────────────────────────────────────────────
+   Tiny live-state indicator at top-left of the avatar when the
+   topbar is hidden in compact mode. Pulses when speaking/listening
+   so it reads as "live" without taking screen real estate. */
+.ll-compact-status {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.55);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  color: rgba(255, 255, 255, 0.95);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: lowercase;
+  pointer-events: none;
+}
+
+.ll-compact-status__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.85);
+  flex-shrink: 0;
+}
+
+.ll-compact-status[data-state="listening"] .ll-compact-status__dot {
+  background: #34d399; /* green */
+  animation: ll-pulse 1.4s ease-in-out infinite;
+}
+.ll-compact-status[data-state="speaking"] .ll-compact-status__dot {
+  background: #fbbf24; /* amber */
+}
+.ll-compact-status[data-state="thinking"] .ll-compact-status__dot {
+  background: #a78bfa; /* violet */
+  animation: ll-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes ll-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.55; transform: scale(0.7); }
+}

package/package.json

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