@livelayer/react 0.8.0 → 0.9.1

package/dist/styles.css

@@ -1425,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,
@@ -1433,3 +1474,104 @@
   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.
+
+   Sized to fit a 140px-wide slot: the parent .ll-expanded__bottom
+   has 12px insets on each side (116px usable). Three 40px buttons
+   need 120px + gaps, so we bleed past the inset with negative
+   margins and tighten the gap. flex-wrap:nowrap is critical —
+   without it the mic stacks above the ••• and end-call. */
+.ll-toolbar--compact {
+  gap: 6px;
+  flex-wrap: nowrap;
+  margin-left: -8px;
+  margin-right: -8px;
+}
+
+/* ── 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.8.0",
+  "version": "0.9.1",
   "description": "LiveLayer agent widget for React — avatar video, team switching, responsive layouts, full-fidelity embed",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,19 +16,13 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "vite build",
-    "prepublishOnly": "npm run build",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@livelayer/sdk": "workspace:*",
-    "livekit-client": "^2.17.3"
+    "livekit-client": "^2.17.3",
+    "@livelayer/sdk": "0.4.2"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
@@ -49,5 +43,10 @@
     "type": "git",
     "url": "https://github.com/Fusion-Studios-Code/live-layer.git",
     "directory": "packages/react"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}